/* The console's look: a dense instrument. Eight sections, in order: the tokens, the shell, one
 * block per shape of the document, the mentions, the act and the chooser, the tree, the mesh and
 * the pane, and the one breakpoint, where the pane is a sheet. Colour carries one meaning only and never decides. */

/* ── 1 · tokens ────────────────────────────────────────────────────────────── */
:root {
  --bad: #b91c1c;
  --ink: #1b1b1d;
  --paper: #fbfbfa;
  --quiet: #71717a;
  --line: #e4e4e7;
  --row: #f4f4f5;
  --live: #15803d;
  --warn: #b45309;
  --relay: #6d28d9;
  --accent: #0f4c81;
  --step: 1.1rem;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bad: #f87171;
    --ink: #ededf0;
    --paper: #16161a;
    --quiet: #a1a1aa;
    --line: #2a2a31;
    --row: #1d1d23;
    --live: #4ade80;
    --warn: #fbbf24;
    --relay: #c4b5fd;
    --accent: #7fb3e6;
  }
  .schema { color: hsl(var(--hue, 210) 65% 72%); }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 13px/1.5 var(--mono);
}
button, input, textarea { font: inherit; color: inherit; }
.ok { color: var(--live); }
.warn { color: var(--warn); }
.bad { color: var(--bad); }
.quiet { color: var(--quiet); }
.pill {
  font-size: .72em; cursor: pointer; border: 1px solid var(--line);
  border-radius: 9px; padding: 0 .45rem; background: none; color: var(--accent);
}
.pill:hover { border-color: var(--accent); }
.pill:disabled { color: var(--quiet); cursor: not-allowed; border-color: var(--line); }

/* ── 2 · the shell: the nav down the side; the bar, the page with the pane beside it, and the
 * log stacked. The page pane and the side pane each scroll on their own; the nav, the bar and
 * the log never move. ── */
#app {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100vh;
}
#app > nav {
  grid-column: 1; grid-row: 1 / -1;
  border-right: 1px solid var(--line); padding: 1.25rem 1rem;
  overflow-y: auto;
}
#app > nav h1 { font-size: .9rem; margin: 0 0 1rem; letter-spacing: .14em; text-transform: uppercase; }
#app > nav a { display: block; color: var(--ink); text-decoration: none; padding: .2rem 0; }
#app > nav a.active { color: var(--accent); font-weight: 600; }
.find { margin-top: 1rem; }
.find input { width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: 3px; padding: .15rem .4rem; }
.context {
  grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .5rem 1.5rem; border-bottom: 1px solid var(--line); background: var(--paper);
}
.context > .mention { font-weight: 600; }
.context .asking { display: inline-flex; align-items: baseline; gap: .3rem; }
.context .asking .pill { border-radius: 50%; padding: 0 .35rem; }
.acting-as {
  display: inline-flex; align-items: baseline; gap: .3rem;
  border: 1px solid var(--live); border-radius: 9px; padding: .05rem .5rem;
}
.acting-as.cannot { border-color: var(--line); color: var(--quiet); }
.acting-as .why { color: var(--warn); font-size: .85em; }
.wire { margin-left: auto; color: var(--quiet); font-size: .85em; }
.wire.away { color: var(--warn); }
main { grid-column: 2; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; min-height: 0; }
main.beside { grid-template-columns: minmax(0, 1fr) minmax(20rem, 34rem); }
.page { padding: 1.25rem 1.5rem 4rem; min-width: 0; min-height: 0; overflow: auto; }
.pane { border-left: 1px solid var(--line); min-width: 0; min-height: 0; overflow: auto; background: var(--row); }
h2 { font-size: .8rem; margin: 0 0 .35rem; letter-spacing: .12em; text-transform: uppercase; color: var(--quiet); }
h3 { font-size: .8rem; margin: 1.5rem 0 .35rem; color: var(--quiet); }
.lead { margin: 0 0 .75rem; color: var(--quiet); max-width: 80ch; }
.headline { font-size: 1.1em; margin: .25rem 0 .9rem; padding: .35rem .6rem; border-left: 3px solid var(--line); }
.headline .said { display: inline; }
.fold { margin-top: 1.25rem; border-top: 1px solid var(--line); padding-top: .5rem; }
.fold summary { cursor: pointer; color: var(--quiet); }
.log { grid-column: 2; grid-row: 3; border-top: 1px solid var(--line); background: var(--paper); }
.log .drawer { font-size: .8em; background: none; border: none; color: var(--quiet); cursor: pointer; padding: .3rem 1.5rem; }
.log ol { list-style: none; margin: 0; padding: 0 1.5rem .75rem; max-height: 30vh; overflow-y: auto; font-size: .85em; }
.log li { padding: .1rem 0; }
.log li.refused { color: var(--warn); }
.log .why { color: var(--warn); margin-left: .5rem; }

/* ── 3 · one block per shape of the document ─────────────────────────────── */
.said { line-height: 1.5; }
.laid-line { overflow-wrap: anywhere; }
.laid-line > * + * { margin-left: .35rem; }
.laid-fields { display: grid; grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr); gap: .1rem .9rem; margin: .25rem 0; }
.laid-fields dt { color: var(--quiet); }
.laid-fields dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.laid-fields.inline { display: inline; margin: 0; }
.laid-fields.inline dt, .laid-fields.inline dd { display: inline; }
.laid-fields.inline dt::after { content: " "; }
.laid-fields.inline dd + dt::before { content: " · "; color: var(--quiet); }
.laid-several > * + * { margin-top: .6rem; }
.laid-several.inline { display: inline; }
.laid-several.inline > * { display: inline; }
.laid-several.inline > * + * { margin: 0 0 0 .6rem; }
.grid { border-collapse: collapse; width: 100%; margin: .35rem 0; }
.grid th {
  text-align: left; font-weight: 600; color: var(--quiet); white-space: nowrap;
  border-bottom: 1px solid var(--line); padding: .25rem .6rem .25rem 0;
  position: sticky; top: 0; background: var(--paper); z-index: 1;
}
.grid td { padding: .1rem .6rem .1rem 0; line-height: 1.45; vertical-align: baseline; font-variant-numeric: tabular-nums; }
.grid td.n, .grid td.lead { white-space: nowrap; }
.grid .laid-line { overflow-wrap: break-word; }
.grid td.n { text-align: right; }
.grid td .prose { white-space: normal; max-width: 60ch; display: inline-block; }
.grid tr.row:hover > td { background-color: var(--row); }
.grid tr.subject { cursor: pointer; }
.grid tr.picked > td { background-color: color-mix(in srgb, var(--accent) 12%, transparent); }
.grid td.lead {
  display: flex; align-items: baseline; gap: .1rem; padding-left: calc(var(--depth, 0) * var(--step));
  background-image: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px var(--step));
  background-size: calc(var(--depth, 0) * var(--step)) 100%; background-repeat: no-repeat; background-position: .55rem 0;
}
.twist { display: inline-block; width: 1.4rem; min-height: 1.4rem; text-align: center; background: none; border: 0; color: var(--quiet); cursor: pointer; padding: 0; flex: none; border-radius: 3px; }
button.twist:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.grid .mark { display: inline-block; width: 1.2ch; color: var(--warn); flex: none; }
.grid .cell { min-width: 0; }
.grid td .cell .said { display: inline; }
.under { margin-left: .5rem; color: var(--quiet); font-size: .85em; }
.grid tr.about > td { padding: .1rem .2rem .5rem calc(var(--depth, 0) * var(--step) + 1.6rem); color: var(--quiet); white-space: normal; }
.grid .grid { margin: .35rem 0; }
.schema { color: hsl(var(--hue, 210) 58% 36%); }
.locus { color: var(--relay); }
.fab-line { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; }
.fab-line code { background: var(--row); border: 1px solid var(--line); border-radius: 3px; padding: 0 .35rem; overflow-wrap: anywhere; }
.fab-answer { border-left: 2px solid var(--line); padding-left: .4rem; }
.fab-answer.ok { border-left-color: var(--live); }
.fab-answer.bad { border-left-color: var(--bad); }
.note { margin: .1rem 0 .1rem .6rem; font-size: .92em; }
.note.warn::before, .note.bad::before { content: "! "; }

/* ── 4 · the marks: how a part stands, and a mention wherever it appears ───── */
.said.for-nobody, tr.for-nobody > td { color: var(--warn); }
.said.past, tr.past > td { opacity: .55; text-decoration: line-through; }
.said.would, tr.would > td { background: color-mix(in srgb, var(--live) 10%, transparent); }
.mention { display: inline-flex; flex-wrap: wrap; align-items: baseline; color: var(--quiet); border-radius: 2px; }
.mention, .mesh-graph .node { touch-action: manipulation; -webkit-touch-callout: none; }
.pressing { user-select: none; }
/* An identity is a pill, a path is a box, a word is a chip: the same three shapes on every page. */
.mention.key { color: var(--ink); }
.mention.key .link { border: 1px solid var(--line); border-radius: 9px; padding: 0 .45rem; }
.mention.key.as-machine .link { border-color: color-mix(in srgb, var(--ink) 40%, transparent); }
.mention.id { border: 1px solid var(--line); border-radius: 3px; padding: 0 .3rem; background: color-mix(in srgb, var(--row) 70%, transparent); flex-wrap: nowrap; white-space: nowrap; }
.mention.id .step { padding: 0 .05rem; }
.mention .link, .step {
  background: none; border: 0; padding: 0 .1rem; color: inherit; cursor: pointer; text-decoration: none;
  border-radius: 2px; font-variant-numeric: tabular-nums;
}
/* Hover paints only where a pointer truly hovers; on a touch screen it would stick after a tap. */
@media (hover: hover) {
  .mention .link:hover, .step:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); text-decoration: underline; }
}
.mention.lit { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); }
.mention.glanced { outline: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 1px; border-radius: 3px; }
.mention.focused { box-shadow: inset 0 -2px 0 var(--accent); }
.mention.mine { font-weight: 600; }
.mention.as-seat { font-style: italic; }
.mention.as-machine { font-weight: 500; }
.mention.slot .link { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 0; border-radius: 4px; padding: 0 .4rem; font-size: .9em; }
.mention.entry .link, .mention.journal .link { color: var(--quiet); }
.mention.pair .sep { padding: 0 .3rem; }
.mention.ok { color: var(--live); }
.mention.warn { color: var(--warn); }
.mention.bad { color: var(--bad); }
.mention.quiet { color: var(--quiet); }
.step { color: var(--ink); }
.step.root { color: var(--quiet); font-style: italic; }
.sep { color: var(--quiet); padding: 0 .05rem; }
.you {
  font-size: .72em; letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
  color: var(--live); border: 1px solid var(--live); border-radius: 9px;
  padding: 0 .3rem; margin-left: .3rem; vertical-align: 1px;
}

/* ── 5 · the act: chips, one composer, the chooser, the answer ─────────────── */
.acting { margin: .4rem 0 1rem; }
.chips { display: inline-flex; flex-wrap: wrap; gap: .3rem; margin: .2rem 0; }
.chip {
  cursor: pointer; border: 1px solid var(--line); border-radius: 9px; padding: .05rem .55rem;
  background: none; color: var(--accent); font-size: .9em;
}
.chip:hover { border-color: var(--accent); }
.chip.picked { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: var(--accent); }
.chip.for-nobody { color: var(--warn); }
.chip.barred { color: var(--quiet); opacity: .6; }
.more-chips { align-self: center; }
.acting-group { margin: .3rem 0; }
.acting-group h4 { margin: .4rem 0 .1rem; font-size: .8rem; font-weight: 500; color: var(--quiet); }
.kinds { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .5rem; }
.kinds .chip { font-size: .78em; padding: 0 .4rem; }
.composer { border: 1px solid var(--line); border-radius: 6px; padding: .5rem .75rem .6rem; margin: .5rem 0 1rem; background: var(--paper); }
.composer .verb-about { margin: 0 0 .4rem; max-width: 60ch; }
.fields { display: grid; gap: .3rem; }
.fields .fields { margin-left: 1rem; border-left: 2px solid var(--line); padding-left: .6rem; }
.field { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.field-name { color: var(--quiet); min-width: 6rem; }
.field.optional .field-name::after { content: " ?"; }
.line { margin: .5rem 0 .2rem; }
.line code { background: var(--row); border: 1px solid var(--line); border-radius: 3px; padding: 0 .35rem; overflow-wrap: anywhere; }
.slot-at { position: relative; display: inline-flex; align-items: baseline; gap: .1rem; }
.slot-at.filled { border-bottom: 1px dashed var(--accent); border-radius: 2px; padding: 0 .15rem; }
.slot {
  background: none; cursor: pointer; border: 0; border-bottom: 1px dashed var(--accent);
  border-radius: 2px; padding: .15rem .3rem; min-height: 1.9rem; text-align: left;
}
.slot.change { border: 0; padding: 0 .2rem; min-height: 1.5rem; color: var(--accent); }
.slot:hover, .slot:focus-visible { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.slot.empty { color: var(--quiet); font-style: italic; }
.tokens { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.token {
  display: inline-flex; align-items: center; gap: .15rem;
  background: var(--row); border: 1px solid var(--line); border-radius: 9px; padding: .05rem .2rem .05rem .45rem;
}
.token .drop, .tokens .add {
  background: none; border: 0; color: var(--quiet); cursor: pointer;
  padding: 0 .35rem; min-height: 1.7rem; border-radius: 9px;
}
.token .drop:hover, .tokens .add:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.tokens .add { border: 1px dashed var(--line); }
.whole { width: 100%; min-width: 16rem; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: .35rem .45rem; resize: vertical; }
.doing { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; margin-top: .4rem; }
.run {
  background: none; border: 1px solid var(--live); color: var(--live);
  border-radius: 6px; padding: .2rem .9rem; cursor: pointer; min-height: 2rem; font-weight: 600;
}
.run:hover { background: color-mix(in srgb, var(--live) 14%, transparent); }
.run:disabled { border-color: var(--line); color: var(--quiet); cursor: not-allowed; background: none; }
.foresight { border-left: 2px solid var(--line); padding-left: .5rem; font-size: .9em; margin: .4rem 0; }
.why { margin: .2rem 0; font-size: .9em; }
.answer { border-top: 1px solid var(--line); padding-top: .6rem; margin-top: .6rem; }
.answer-command code { color: var(--quiet); }
.said-along { list-style: none; margin: 0 0 .6rem; padding: 0 0 0 .8rem; border-left: 2px solid var(--accent); }
.said-along li { padding: .1rem 0; }
.seat { display: inline-flex; align-items: baseline; gap: .3rem; }
.seat.assumed .slot { background: repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--quiet) 22%, transparent) 6px 12px); }
.pick {
  position: fixed; z-index: 70; width: max-content; min-width: 16rem; max-width: min(34rem, 92vw);
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
  box-shadow: 0 10px 32px rgb(0 0 0 / .22); padding: .4rem; display: grid; gap: .3rem;
}
.pick-head { color: var(--quiet); font-size: .85em; padding: 0 .25rem; }
.pick input { width: 100%; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: .3rem .4rem; }
.pick-about { color: var(--quiet); font-size: .85em; padding: 0 .25rem .2rem; }
.pick-rows { display: grid; max-height: 44vh; overflow-y: auto; }
.pick-row {
  text-align: left; background: none; border: 0; cursor: pointer;
  display: flex; flex-wrap: wrap; gap: 0 .6rem; align-items: baseline;
  padding: .3rem .4rem; border-radius: 4px; min-height: 2rem;
}
.pick-row.under { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.pick-row.for-nobody .pick-label, .pick-row.for-nobody .said { color: var(--warn); }
.pick-row .mention { pointer-events: none; }
.find { position: relative; }
.find .found { position: absolute; z-index: 5; left: 0; right: -6rem; margin-top: .2rem; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); display: grid; max-height: 44vh; overflow-y: auto; }
.find .found-row { padding: .2rem .4rem; cursor: pointer; }
.find .found-row:hover { background: var(--row); }
.find .found-row .mention { pointer-events: none; }
.find .quiet { margin: .2rem 0 0; font-size: .85em; }
.pick-label { color: var(--ink); }
.pick p.quiet { margin: .3rem .4rem; }
.typed { display: flex; gap: .5rem; margin-bottom: .75rem; }
.typed input { flex: 1; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: .25rem .5rem; }

/* ── 6 · the tree: one row per id, the fold by the whole lead, the holders and the words as mentions ── */
.tree { margin: .35rem 0; }
.tree .node {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  padding: .1rem .4rem .1rem calc(var(--depth, 0) * var(--step)); cursor: pointer; border-radius: 3px;
  background-image: repeating-linear-gradient(to right, var(--line) 0 1px, transparent 1px var(--step));
  background-size: calc(var(--depth, 0) * var(--step)) 100%; background-repeat: no-repeat; background-position: .55rem 0;
}
.tree .node:hover { background-color: var(--row); }
.tree .node.focused { background-color: color-mix(in srgb, var(--accent) 12%, transparent); }
.tree .node.would { background-color: color-mix(in srgb, var(--live) 10%, transparent); }
.tree .node.several .leaf { color: var(--warn); }
.tree .node.unreachable .holders { color: var(--quiet); }
.tree .leaf .mention.id { font-size: 1.06em; font-weight: 600; border-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.tree .holders { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
.tree .holders .more {
  background: none; border: 1px dashed var(--line); border-radius: 9px; padding: 0 .4rem; color: var(--quiet); cursor: pointer; font-size: .9em;
}
.tree .holders .more:hover { border-color: var(--accent); color: var(--ink); }
.tree .pills, .pills { display: inline-flex; flex-wrap: wrap; gap: .3rem; }

/* ── 7 · the mesh, and the pane the focus is drawn in ─────────────────────── */
.mesh-graph { display: block; width: 100%; max-width: 40rem; margin: .5rem auto 1rem; aspect-ratio: 1; }
.mesh-graph.small { max-width: 9rem; margin: 0; }
.mesh-small { display: block; flex: none; }
.fabric-both { display: flex; gap: 1.5rem; align-items: flex-start; }
.mesh-graph .edge { fill: none; stroke-width: .55; }
.mesh-graph .edge.direct { stroke: var(--live); }
.mesh-graph .edge.relay { stroke: var(--relay); stroke-dasharray: 2 1.2; }
.mesh-graph .edge.unobserved { stroke: var(--line); stroke-dasharray: .6 1.6; }
.mesh-graph .edge.lit { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: none; }
.mesh-graph .edge-hit { stroke: transparent; stroke-width: 4; cursor: pointer; }
.mesh-graph .node { cursor: pointer; }
.mesh-graph .node circle { stroke: var(--paper); stroke-width: .8; }
.mesh-graph .node.answering circle { fill: var(--live); }
.mesh-graph .node.refused circle { fill: var(--bad); }
.mesh-graph .node.silent circle { fill: var(--warn); }
.mesh-graph .node text { fill: var(--ink); font-size: 3px; }
.mesh-graph .node.as-seat text { font-style: italic; }
.mesh-graph .node:hover circle, .mesh-graph .node.lit circle { stroke: var(--accent); stroke-width: 1.1; }
.mesh-graph .edge-label { font-size: 2.3px; fill: var(--quiet); pointer-events: none; paint-order: stroke; stroke: var(--paper); stroke-width: .9px; stroke-linejoin: round; }
.mesh-graph .edge-label .ok { fill: var(--live); }
.mesh-graph .edge-label .warn { fill: var(--warn); }
.mesh-graph .edge-label .bad { fill: var(--bad); }
.mesh-graph .edge-label .quiet { fill: var(--quiet); }
.pair-label { margin: .25rem 0; font-size: .95em; }
.detail-pane { padding: 0 1.25rem 3rem; }
.detail-head {
  position: sticky; top: 0; z-index: 2; background: var(--row);
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  border-bottom: 1px solid var(--line); padding: 1rem 0 .4rem;
}
.detail-head .subject { font-size: 1.05em; }
.detail-pane .grid th { position: static; background: var(--row); }
.word { margin: .3rem 0; }
.word summary { cursor: pointer; display: flex; align-items: baseline; gap: .5rem; list-style: none; }
.word summary::-webkit-details-marker { display: none; }
.word summary::before { content: "▸"; color: var(--quiet); width: 1.2rem; flex: none; }
.word[open] > summary::before { content: "▾"; }
.word > .said { margin: .2rem 0 .5rem 1.2rem; }
.word.for-nobody summary, .word.for-nobody summary .mention.slot .link { color: var(--warn); }

/* ── 8 · one column when there is no room for two ─────────────────────────── */
@media (max-width: 50rem) {
  #app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }
  #app > nav { grid-column: 1; grid-row: 1; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  #app > nav h1 { margin: 0 .75rem 0 0; }
  #app > nav a { display: inline-block; padding: .2rem .5rem .2rem 0; }
  .context { grid-column: 1; grid-row: 2; padding: .5rem .75rem; }
  main { grid-column: 1; grid-row: 3; overflow: auto; }
  main.beside { grid-template-columns: minmax(0, 1fr); grid-template-rows: max-content; }
  .page { padding: 1rem .75rem 3rem; overflow: visible; }
  main.beside .page { padding-bottom: 62vh; }
  .pane {
    position: fixed; inset: auto 0 0 0; z-index: 60; max-height: 62vh; overflow: auto;
    border-left: 0; border-top: 1px solid var(--line); border-radius: 10px 10px 0 0;
    box-shadow: 0 -10px 32px rgb(0 0 0 / .22);
  }
  .log { grid-column: 1; grid-row: 4; }
  .log .drawer, .log ol { padding-left: .75rem; padding-right: .75rem; }
  .grid thead { display: none; }
  .grid tr.row { display: block; border-top: 1px solid var(--line); padding: .2rem 0; }
  .grid td { display: block; white-space: normal; }
  .grid td:not(.lead) { padding-left: calc(var(--depth, 0) * var(--step) + 1.4rem); color: var(--quiet); }
  .grid tr.about > td { display: block; }
  .fabric-both { flex-direction: column; }
  .pick { inset: auto .5rem .5rem .5rem; top: auto; max-width: none; border-radius: 10px 10px 0 0; padding: .6rem; }
  .pick-rows { max-height: 50vh; }
}