/* Inno Launch — the sourcing floor.
 *
 * Transcribed from the approved prototype (design/*.dc.html), which is the
 * visual contract. Values are lifted from it rather than re-decided, so the
 * built screens and the artboards cannot drift.
 *
 * The three hall inks are spines and ticks only, never fills. Ink blue is the
 * only interactive colour. Every state carries a drawn shape as well as a hue,
 * because this gets read on a phone in a factory in daylight.
 */

:root {
  --paper:      #F2F3EF;
  --surface:    #FBFBF9;
  --surface-2:  #E9EAE4;
  --rail:       #20241E;
  --rail-hover: #2C312A;
  --rail-rule:  #33382F;
  --rail-text:  #E7E8E2;
  --rail-dim:   #8A9082;
  --rail-faint: #767C6E;

  --ink:        #171A16;
  --muted:      #5C6058;
  --faint:      #8A8E84;
  --rule:       #D6D8D0;
  --rule-soft:  #E6E7E1;

  /* Lifted from inno-launch.com. The brand blue is #2970FA, and it does not
     carry small text: 3.93:1 on paper, and white on it is 4.38:1 — both under
     4.5. So it stays the identity colour, and the working accent is one step
     deeper, which reads as the same blue and passes. */
  --brand:      #2970FA;
  --accent:     #1E5AD6;
  --accent-dark:#1A4CB8;
  --accent-soft:#E7EFFF;
  --brand-ink:  #263547;
  --brand-dark: #111C29;

  /* Rubik is the display face on inno-launch.com. Declared once so a
     rule cannot quietly disagree with it. */
  --display: "Rubik", "Barlow Condensed", Barlow, sans-serif;

  --hall-a:     #4A6B3F;
  --hall-b:     #A8761E;
  --hall-c:     #8C3A32;
  --hall-a-txt: #3B5632;
  --hall-b-txt: #8A6118;
  --hall-c-txt: #7A322B;

  --bad:        #A3342A;
  --bad-bg:     #FBEFED;
  --bad-rule:   #E0B9B4;
  --warn:       #946313;
  --warn-bg:    #FAF4E7;
  --warn-rule:  #C9B48A;
  --warn-ink:   #5E4409;
  --ok:         #3D6B4A;
  --ok-bg:      #E4EEE7;
  --ok-rule:    #A9C6B4;
}

* { box-sizing: border-box; }

/* Any class that sets `display` beats the hidden attribute, which is how a
   "load more" button stayed on screen under an empty list. One rule rather
   than remembering it at every call site. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Barlow, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-dark); }
a:focus-visible, button:focus-visible, .stand:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px;
}

.cond { font-family: var(--display); letter-spacing: -0.012em; }
.mono { font-family: "Azeret Mono", ui-monospace, Menlo, monospace;
        font-variant-numeric: tabular-nums; }

::selection { background: var(--accent-soft); color: var(--ink); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: #C6C9C0; border-radius: 6px;
                            border: 3px solid var(--paper); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------- the shell */

.shell { display: flex; min-height: 100vh; }

.rail {
  width: 224px; flex-shrink: 0; background: var(--rail); color: var(--rail-text);
  display: flex; flex-direction: column; position: sticky; top: 0;
  height: 100vh; overflow-y: auto;
}
.rail-head {
  padding: 16px 18px 14px; border-bottom: 1px solid var(--rail-rule);
  display: flex; flex-direction: column; gap: 3px;
}
.rail-head .name { font-size: 21px; font-weight: 700; color: #FBFBF9; letter-spacing: .01em; }
.rail-head .brand { font-size: 10px; letter-spacing: .1em; color: var(--rail-dim);
                    text-transform: uppercase; display: flex; align-items: center; gap: 6px; }

.rail-groups { padding: 16px 0 0; display: flex; flex-direction: column; gap: 18px; }
.rail-hall { display: flex; flex-direction: column; gap: 5px; }
.rail-hall h2 {
  font-family: "Azeret Mono", monospace; font-size: 9.5px; letter-spacing: .14em;
  color: var(--rail-faint); text-transform: uppercase; padding: 0 18px 4px;
  margin: 0; font-weight: 400;
}
.rail-spine { display: flex; }
.rail-spine .bar { width: 3px; flex-shrink: 0; border-radius: 1px; }
.rail-spine .rows { flex-grow: 1; display: flex; flex-direction: column; gap: 5px; }

/* A tablet has a pointer and a thumb, and the rail is now the primary
   navigation on every page rather than only inside a brand. */
.navrow {
  display: flex; align-items: center; gap: 10px; padding: 5px 15px;
  min-height: 44px;
  color: var(--rail-text); transition: background .12s ease;
}
.navrow:hover { background: var(--rail-hover); color: var(--rail-text); }
.navrow .n { font-family: "Azeret Mono", monospace; font-size: 10.5px;
             color: var(--rail-dim); width: 14px; }
.navrow .label { font-size: 13.5px; flex-grow: 1; }
.navrow .count { font-family: "Azeret Mono", monospace; font-size: 11px; color: var(--rail-dim); }
.navrow.on { background: var(--rail-hover); }
.navrow.on .label { color: #FBFBF9; font-weight: 600; }
.navrow.on .n, .navrow.on .count { color: #C9CFC1; }

.rail-links { display: flex; flex-direction: column; gap: 1px;
              border-top: 1px solid var(--rail-rule); padding-top: 14px; }
.rail-links .navrow { padding: 6px 18px; }
.rail-links .navrow .label { color: #C9CFC1; }
.badge { font-family: "Azeret Mono", monospace; font-size: 10px; background: var(--accent);
         color: #FBFBF9; padding: 1px 6px; border-radius: 2px; }

.rail-foot { margin-top: auto; padding: 14px 18px; border-top: 1px solid var(--rail-rule);
             display: flex; align-items: center; gap: 9px; }
.avatar { width: 26px; height: 26px; border-radius: 50%; background: #4A5145;
          color: var(--rail-text); display: flex; align-items: center;
          justify-content: center; font-size: 13px; font-weight: 600;
          font-family: var(--display); flex-shrink: 0; }

.main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  min-width: 0;
  height: 56px; flex-shrink: 0; border-bottom: 1px solid var(--rule);
  background: var(--surface); display: flex; align-items: center;
  gap: 16px; padding: 0 26px;
}
.topbar h1 { font-family: var(--display); font-size: 20px;
             font-weight: 600; margin: 0; }
.topbar .sub { font-family: "Azeret Mono", monospace; font-size: 11px;
               color: var(--faint); letter-spacing: .04em; }
.spacer { flex-grow: 1; }

.content { flex-grow: 1; padding: 20px 26px 32px; display: flex;
           flex-direction: column; gap: 16px; }

/* How wide a page is allowed to get, named twice rather than written into
   twelve templates as twelve different numbers between 640 and 1100. A page
   that grew a second column used to need its own number invented for it, and
   the ideas and supplier pages left 356px of a 1680px screen empty.
   `page-wide` is a ceiling, not a frame: it is inert on the screens actually
   in use and only bites where an unbounded table would stop being readable. */
.page { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.page-wide { max-width: 1560px; }
.page-read { max-width: 820px; }

/* ------------------------------------------------------------------ controls */

/* One rule rather than a min-height bolted onto each call site: every button
   in the app is a real target, on a laptop and under a thumb alike. */
.btn { border-radius: 3px; padding: 9px 14px; font-size: 13px; font-weight: 500;
       min-height: 44px; justify-content: center;
       display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
       border: 1px solid var(--rule); background: var(--surface); color: var(--ink);
       font-family: inherit; transition: background .12s ease, border-color .12s ease; }
.btn:hover { border-color: var(--faint); color: var(--ink); }
.btn-p { border-color: var(--accent); background: var(--accent); color: #FBFBF9; }
.btn-p:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #FBFBF9; }
.btn[disabled], .btn.off { opacity: .42; cursor: not-allowed; }

.seg { display: flex; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.seg a { padding: 6px 14px; font-size: 12.5px; font-weight: 500;
         background: var(--surface); color: var(--muted); }
.seg a:hover { color: var(--ink); }
.seg a.on { background: var(--rail); color: #FBFBF9; }

/* The breadcrumb was a 16px-tall line of text. The negative margin keeps the
   header's rhythm while the padding gives a thumb somewhere to land. */
/* inline-flex here stopped the header column shrinking below the crumb's
   width, which pushed every stand page into horizontal scroll on a phone.
   inline-block keeps the tap area and lets the row wrap. */
.crumb { font-family: "Azeret Mono", monospace; font-size: 11px; letter-spacing: .06em;
         padding: 14px 4px; margin: -14px -4px; display: inline-block; }

/* A flex item will not shrink below its content unless it is told it may. */
.stand-head { display: flex; align-items: flex-start; gap: 16px; }
.stand-head .who { display: flex; flex-direction: column; gap: 4px;
                   flex-grow: 1; min-width: 0; }
.stand-head .who h1 { overflow-wrap: anywhere; }
.stand-head .act { display: flex; gap: 8px; flex-shrink: 0; padding-top: 4px; }
@media (max-width: 640px) {
  .stand-head { flex-wrap: wrap; }
  .stand-head .act { width: 100%; }
}

.spine { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.spine .step { display: flex; flex-direction: column; gap: 5px; }
.spine .lbl { font-size: 9.5px; white-space: nowrap; overflow: hidden; }
.spine-now { display: none; font-size: 10px; letter-spacing: .08em; color: var(--muted); }
@media (max-width: 900px) {
  .spine .lbl { display: none; }
  .spine-now { display: block; }
}

/* Six tabs plus the gate do not fit a phone. Scrolling the row is the honest
   answer — wrapping tabs onto a second line reads as broken, and letting the
   row size the header pushed every stand page into horizontal scroll. */
.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
        min-width: 0; max-width: 100%; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: 14px 10px; border-bottom: 2px solid transparent; font-size: 13.5px;
          color: var(--muted); min-width: 44px; min-height: 44px; text-align: center;
          display: inline-flex; align-items: center; gap: 5px;
          flex-shrink: 0; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { border-bottom-color: var(--ink); color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------ the floor */

.band {
  border: 1px solid var(--warn-rule); background: var(--warn-bg); border-radius: 3px;
  padding: 13px 16px; display: flex; align-items: center; gap: 18px;
}
.band h2 { font-family: var(--display); font-size: 16px;
           font-weight: 600; color: var(--warn-ink); margin: 0; }
.band .items { display: flex; gap: 22px; flex-grow: 1; flex-wrap: wrap; }
.band .item { display: flex; flex-direction: column; gap: 1px; }
.band .item strong { font-size: 13px; font-weight: 600; }
.band .item .when { font-family: "Azeret Mono", monospace; font-size: 11px; }

.hall-head { display: flex; align-items: center; gap: 11px; }
.hall-head .tick { width: 34px; height: 3px; }
.hall-head h2 { font-family: var(--display); font-size: 14px;
                font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
                margin: 0; }
.hall-head .line { flex-grow: 1; height: 1px; background: var(--rule); }
.hall-head .range { font-family: "Azeret Mono", monospace; font-size: 10.5px;
                    color: var(--faint); letter-spacing: .06em; }

.aisles { display: grid; gap: 12px; }
.aisles.a { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aisles.b { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.aisles.c { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.aisle { display: flex; flex-direction: column; gap: 7px; }
.aisle-head { display: flex; align-items: baseline; gap: 7px; }
.aisle-head .code { font-family: "Azeret Mono", monospace; font-size: 10px;
                    letter-spacing: .08em; font-weight: 500; }
.aisle-head .name { font-size: 12.5px; color: var(--muted); }

.stand {
  display: flex; flex-direction: column; gap: 7px; padding: 11px 12px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 3px;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.stand:hover { border-color: var(--accent); color: var(--ink);
  box-shadow: 0 1px 2px rgba(23,26,22,.05), 0 8px 18px -14px rgba(23,26,22,.45); }
.stand:active { transform: translateY(1px); }
.stand.hero { border: 1.5px solid var(--accent); }
.stand .top { display: flex; align-items: flex-start; gap: 8px; }
.stand .loc { font-family: "Azeret Mono", monospace; font-size: 10px;
              color: var(--faint); padding-top: 2px; }
.stand.hero .loc { color: var(--accent); font-weight: 500; }
.stand .title { font-size: 13.5px; font-weight: 600; line-height: 1.25; flex-grow: 1; }
.stand .meta { display: flex; align-items: center; gap: 8px; }

.chip { font-family: "Azeret Mono", monospace; font-size: 9.5px; letter-spacing: .07em;
        padding: 2px 6px; border-radius: 2px; font-weight: 500; }
.chip-parent { background: var(--accent-soft); color: var(--accent); }
.chip-ok { background: var(--ok-bg); color: var(--ok); }
.chip-warn { background: var(--warn-bg); color: var(--warn); }
.chip-bad { background: #F2E5E3; color: var(--bad); }

/* What somebody said to do first. Three rungs that read as a ladder rather
   than as three states: the top one carries the weight, the middle one is
   quieter, and the last is quieter still — a row of these should sort itself
   by eye before anybody reads a word of it. Not the severity hues, because a
   product being later is not a product being wrong. */
.chip-rung-first { background: var(--ink); color: var(--paper); }
.chip-rung-next { background: var(--rule); color: var(--ink); }
.chip-rung-later { background: var(--rule-soft); color: var(--muted); }

.mark { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; }
.mark-ok { color: var(--ok); font-weight: 500; }
.mark-warn { color: var(--warn); font-weight: 500; }
.mark-bad { color: var(--bad); font-weight: 500; }
.mark-none { color: var(--muted); }

.held { display: flex; align-items: center; gap: 6px; background: var(--warn-bg);
        border: 1px solid var(--warn-rule); border-radius: 2px; padding: 5px 8px; }
.held span { font-family: "Azeret Mono", monospace; font-size: 10.5px;
             color: var(--warn-ink); font-weight: 500; }

.owner { width: 19px; height: 19px; border-radius: 50%; background: var(--surface-2);
         color: var(--muted); display: flex; align-items: center; justify-content: center;
         font-size: 11px; font-weight: 600; font-family: var(--display);
         flex-shrink: 0; }

.empty-aisle { border: 1px dashed var(--rule); border-radius: 3px; padding: 14px 12px;
               display: flex; align-items: center; justify-content: center;
               font-size: 12px; color: var(--faint); }

.aside-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.aside-card { background: #EDEEE9; border: 1px solid #DEDFD9; border-radius: 3px;
              padding: 9px 11px; display: flex; align-items: center; gap: 8px; }
.aside-card .t { font-size: 12.5px; color: #6E736A; font-weight: 500; }
.aside-card .w { font-family: "Azeret Mono", monospace; font-size: 10px; color: var(--faint); }

/* --------------------------------------------------------------------- tables */

.panel { background: var(--surface); border: 1px solid var(--rule);
         border-radius: 3px; overflow: hidden; }
.panel > header { padding: 12px 16px; border-bottom: 1px solid var(--rule-soft);
                  display: flex; align-items: center; gap: 10px; }
.panel > header h2 { font-family: var(--display); font-size: 16px;
                     font-weight: 600; margin: 0; }
.panel .body { padding: 14px 16px; }

.scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; font-family: "Azeret Mono", monospace; font-size: 9.5px;
     letter-spacing: .11em; text-transform: uppercase; color: var(--faint);
     font-weight: 500; padding: 10px 14px; background: #F5F6F2;
     border-bottom: 1px solid var(--rule); white-space: nowrap; }
td { padding: 11px 14px; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tr.row-link:hover td { background: #F4F7FA; }
tr.aside td { background: #EDEEE9; color: #6E736A; }

/* ---------------------------------------------------------------- the gate */

.grid-2 { display: grid; grid-template-columns: 1fr 380px; gap: 18px; align-items: start; }

.req { display: flex; align-items: flex-start; gap: 13px; padding: 13px 18px;
       border-bottom: 1px solid var(--rule-soft); }
.req:last-child { border-bottom: none; }
.req.missing { background: #FDF7F6; }
.req .icon { flex-shrink: 0; margin-top: 1px; width: 17px; height: 17px; }
.req .text { display: flex; flex-direction: column; gap: 1px; flex-grow: 1; }
.req .text strong { font-size: 14px; font-weight: 600; }
.req .text span { font-size: 12.5px; color: var(--muted); }
.req.missing .text span { color: #8A4C45; }
.req .tag { font-family: "Azeret Mono", monospace; font-size: 10.5px; color: var(--faint);
            flex-shrink: 0; padding-top: 3px; font-weight: 500; }

.verdict { border-radius: 3px; padding: 12px 14px; display: flex; gap: 11px;
           align-items: flex-start; border: 1px solid var(--rule);
           background: var(--surface); cursor: pointer; width: 100%; text-align: left;
           font-family: inherit; transition: border-color .12s ease, background .12s ease; }
.verdict:hover { border-color: var(--faint); }
.verdict[disabled] { opacity: .45; cursor: not-allowed; background: #F4F5F1; }
.verdict strong { font-size: 14px; font-weight: 600; display: block; }
.verdict span { font-size: 12px; color: var(--muted); }
.verdict.hold.on { border: 1.5px solid var(--warn); background: var(--warn-bg); }
.verdict.reject.on { border: 1.5px solid var(--bad); background: var(--bad-bg); }

.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-family: "Azeret Mono", monospace; font-size: 10px; letter-spacing: .09em;
               color: var(--faint); text-transform: uppercase; }
.field textarea, .field input {
  border: 1px solid var(--rule); background: var(--surface); border-radius: 3px;
  padding: 11px 12px; font-family: inherit; font-size: 13px; color: var(--ink);
  line-height: 1.5; resize: vertical; min-height: 44px;
}
.field textarea:focus, .field input:focus { outline: 2px solid var(--accent);
  outline-offset: -1px; border-color: var(--accent); }

.note { border: 1px solid #C9D2DC; background: #F7F8F4; border-radius: 3px;
        padding: 14px 16px; display: flex; flex-direction: column; gap: 7px; }
.note h3 { font-family: var(--display); font-size: 15px;
           font-weight: 600; color: var(--accent); margin: 0;
           display: flex; align-items: center; gap: 8px; }
.note p { font-size: 12.5px; color: #42505E; line-height: 1.5; margin: 0; }

.alert { border: 1px solid var(--bad-rule); background: var(--bad-bg); border-radius: 3px;
         padding: 12px 15px; display: flex; align-items: center; gap: 13px; }
.alert .text strong { font-size: 13.5px; font-weight: 600; color: #7E2A22; display: block; }
.alert .text span { font-size: 12.5px; color: #8A4C45; }
.alert.good { border-color: var(--ok-rule); background: var(--ok-bg); }
.alert.good .text strong { color: #2C5238; }
.alert.good .text span { color: #2C5238; }

/* ----------------------------------------------------------------- the tray */

.write { background: var(--surface); border: 1px solid var(--rule);
         border-radius: 3px; overflow: hidden; }
.write.expanded { border-color: var(--accent); }
.write > .head { padding: 13px 18px; display: flex; align-items: center; gap: 12px; }
/* The tick is its own target. The row used to be one — a label wrapping every
   word of it — so reading a change by clicking it silently unpicked it, and a
   tray read top to bottom submitted almost nothing. */
.pick { display: inline-flex; align-items: center; padding: 4px; margin: -4px;
        cursor: pointer; flex-shrink: 0; }
.pick:focus-within { outline: 2px solid var(--accent); outline-offset: 1px;
                     border-radius: 3px; }
.offscreen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
             overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.write.expanded > .head { background: #F4F7FA; border-bottom: 1px solid var(--rule-soft); }
.write.needs-reason > .head { background: #FDFAF3; }
.agent { font-family: "Azeret Mono", monospace; font-size: 11.5px; font-weight: 500;
         color: var(--accent); }
.box { width: 16px; height: 16px; border: 1.5px solid #B0B4AA; background: var(--surface);
       border-radius: 2px; flex-shrink: 0; display: flex; align-items: center;
       justify-content: center; cursor: pointer; appearance: none; margin: 0; }
.box:checked { border-color: var(--accent); background: var(--accent); }
.box:checked::after { content: ''; width: 9px; height: 5px; border-left: 2px solid #FBFBF9;
  border-bottom: 2px solid #FBFBF9; transform: rotate(-45deg) translate(1px, -1px); }

.diff { border: 1px solid var(--rule-soft); border-radius: 3px; overflow: hidden; }
.diff .r { display: grid; grid-template-columns: 180px 1fr 1fr;
           border-bottom: 1px solid var(--rule-soft); }
.diff .r:last-child { border-bottom: none; }
.diff .r > div { padding: 9px 14px; font-size: 13px; }
.diff .r > div + div { border-left: 1px solid var(--rule-soft); }
.diff .r.h { background: #F5F6F2; }
.diff .r.h > div { font-family: "Azeret Mono", monospace; font-size: 9.5px;
                   letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.diff .now { color: var(--faint); }
.diff .next { background: #F4F7FA; }

/* --------------------------------------------------------------- the brands */

.gate-screen { background: var(--rail); min-height: 100vh; display: flex;
               flex-direction: column; color: var(--rail-text); }
.gate-screen .head { padding: 56px 60px 0; display: flex; flex-direction: column; gap: 8px; }
.gate-screen .head h1 { font-family: var(--display); font-size: 36px;
                        font-weight: 700; color: #FBFBF9; line-height: 1.05; margin: 0; }
.gate-screen .head p { font-size: 16px; color: #A8AEA1; max-width: 62ch;
                       line-height: 1.5; margin: 0; }
.brand-grid { padding: 36px 60px 60px; display: grid;
              grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.brand-card { background: var(--surface); border: 1px solid var(--rule);
              border-radius: 3px; padding: 22px 24px; display: flex;
              flex-direction: column; gap: 16px; color: var(--ink);
              transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; }
.brand-card:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(23,26,22,.05), 0 14px 30px -20px rgba(23,26,22,.5); }
.brand-card.empty { opacity: .72; cursor: default; }
.brand-card.empty:hover { border-color: var(--rule); box-shadow: none; transform: none; }
.brand-card .id { display: flex; align-items: flex-start; gap: 12px; }
.brand-card .id .bar { width: 4px; align-self: stretch; border-radius: 2px; flex-shrink: 0; }
.brand-card h2 { font-family: var(--display); font-size: 26px;
                 font-weight: 600; line-height: 1.05; margin: 0; }
.brand-card .counts { display: flex; gap: 26px; }
.brand-card .counts div { display: flex; flex-direction: column; gap: 1px; }
.brand-card .counts .n { font-family: "Azeret Mono", monospace; font-size: 26px;
                         font-weight: 500; line-height: 1; }
.brand-card .counts .l { font-family: "Azeret Mono", monospace; font-size: 9.5px;
                         color: var(--faint); letter-spacing: .08em; }
.brand-card .next { border-top: 1px solid var(--rule-soft); padding-top: 12px;
                    display: flex; align-items: center; gap: 8px; font-size: 12.5px; }

.stage-strip { margin-top: auto; padding: 0 60px 44px; display: flex;
               flex-direction: column; gap: 16px; }
.stage-strip .rule { height: 1px; background: var(--rail-rule); }
.stage-strip .ten { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; }
.stage-strip .ten div { display: flex; flex-direction: column; gap: 7px; }
.stage-strip .ten .t { height: 4px; border-radius: 2px; }
.stage-strip .ten .n { font-family: "Azeret Mono", monospace; font-size: 9.5px;
                       color: var(--rail-faint); letter-spacing: .06em; }
.stage-strip .ten .l { font-size: 12.5px; color: #C9CFC1; line-height: 1.25; }

/* --------------------------------------------------------------- responsive */

@media (max-width: 1100px) {
  .aisles.a, .aisles.b, .aisles.c { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2 { grid-template-columns: 1fr; }
  .aside-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 28px 32px 48px; }
  .gate-screen .head, .stage-strip { padding-left: 32px; padding-right: 32px; }
  .stage-strip .ten { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px 8px; }
}

@media (max-width: 760px) {
  /* The rail folds rather than disappears. It used to be hidden wholesale on a
     phone, which took the sections, the profile and the only sign-out with it. */
  .shell { flex-direction: column; }
  .rail {
    width: 100%; height: auto; position: static; overflow: visible;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "head foot" "groups groups";
    align-items: center; padding: 0 14px;
  }
  .rail-head { grid-area: head; border-bottom: none; padding: 10px 0; }
  .rail-head .who .name { font-size: 19px; }
  .rail-foot { grid-area: foot; margin-top: 0; border-top: none; padding: 8px 0; }
  .rail-foot .whoami { display: none; }
  .rail-groups {
    grid-area: groups; flex-direction: row; gap: 0; padding: 0 0 2px;
    overflow-x: auto; border-top: 1px solid var(--rail-rule);
    scrollbar-width: none;
  }
  .rail-groups::-webkit-scrollbar { display: none; }
  .rail-hall { flex-direction: row; align-items: center; gap: 0; }
  .rail-hall h2 { display: none; }
  .rail-spine .bar { display: none; }
  .rail-spine .rows { flex-direction: row; gap: 0; }
  .rail-links { flex-direction: row; border-top: none; padding-top: 0; }
  .navrow { white-space: nowrap; padding: 6px 12px; }
  .navrow.on { background: transparent; box-shadow: inset 0 -2px 0 var(--rail-text); }
  /* Yours is a convenience; on a phone the sections earn the width instead. */
  .rail-hall:has(> h2:first-child) { }
  .rail-mine-group { display: none; }
  .rail-note { display: none; }
  .rail-setup .navrow.on { box-shadow: inset 0 -2px 0 var(--ink); }
  .topbar { height: auto; flex-wrap: wrap; padding: 12px 16px; gap: 10px; }
  .content { padding: 16px 16px 28px; }
  .aisles.a, .aisles.b, .aisles.c { grid-template-columns: 1fr; }
  .aside-grid { grid-template-columns: 1fr; }
  .brand-grid { grid-template-columns: 1fr; }
  .band { flex-direction: column; align-items: flex-start; gap: 10px; }
  /* touch targets stay honest on a phone in a factory */
  .btn, .seg a, .verdict { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ------------------------------------------------------- the quote comparison */

/* Four states, four treatments. A blank cell would say all of them at once,
   which is the spreadsheet failure this grid exists to replace. */

.compare { background: var(--surface); border: 1px solid var(--rule);
           border-radius: 3px; overflow: hidden; }
.compare .grid { display: grid; min-width: 640px; }

.compare .corner { padding: 14px 16px; background: #F5F6F2; }
.compare .head { padding: 13px 16px; border-left: 1px solid var(--rule-soft);
                 display: flex; flex-direction: column; gap: 5px; }
.compare .head.out { background: #F4F5F1; }
.compare .head .who { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.compare .head .who .nm { font-family: var(--display); font-size: 18px;
                          font-weight: 600; }
.compare .head .sub { font-family: "Azeret Mono", monospace; font-size: 10.5px;
                      color: var(--faint); }
.compare .headrow { border-bottom: 1px solid var(--rule); }

.compare .grp { grid-column: 1 / -1; padding: 8px 16px; background: #EFF0EB;
                border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft);
                font-family: "Azeret Mono", monospace; font-size: 9.5px;
                letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }

.compare .rowlabel { padding: 12px 16px; border-bottom: 1px solid var(--rule-soft);
                     font-size: 13px; color: var(--muted); background: #FAFBF8;
                     display: flex; align-items: center; }
.compare .cell { padding: 12px 16px; border-bottom: 1px solid var(--rule-soft);
                 border-left: 1px solid var(--rule-soft); display: flex;
                 align-items: center; gap: 6px; font-size: 13px; }
.compare .cell.out { background: #F4F5F1; }
.compare .cell.best { background: #F5FAF5; }
.compare .price { font-family: "Azeret Mono", monospace; font-size: 15px; font-weight: 500;
                  font-variant-numeric: tabular-nums; }
.compare .price.best { color: var(--ok); }

/* refused: asked and not given. The rule under it is the whole point — it is a
   fact about the supplier, not a gap in our records. */
.compare .refused { font-family: "Azeret Mono", monospace; font-size: 12.5px;
                    color: var(--bad); border-bottom: 1.5px dashed var(--bad); }
.compare .notquoted { font-family: "Azeret Mono", monospace; font-size: 12.5px;
                      color: var(--warn); border-bottom: 1.5px dashed var(--warn-rule); }
.compare .unasked { font-family: "Azeret Mono", monospace; font-size: 13px;
                    color: var(--faint); }
.compare .absent { font-family: "Azeret Mono", monospace; font-size: 13px; color: #A5A9A0; }
.compare .why { font-size: 12.5px; color: var(--muted); line-height: 1.35; }

.compare .grid > *:nth-last-child(-n+1) { border-bottom: none; }

.legend { display: flex; gap: 18px; flex-wrap: wrap; padding: 11px 16px;
          border-top: 1px solid var(--rule-soft); background: #FAFBF8; }
.legend span { display: flex; align-items: center; gap: 7px;
               font-size: 12px; color: var(--muted); }

/* ---------------------------------------------------------- unit economics */

.econ { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.econ .fig { padding: 14px 16px; border-right: 1px solid var(--rule-soft);
             display: flex; flex-direction: column; gap: 2px; }
.econ .fig:last-child { border-right: none; background: #F5F6F2; }
.econ .fig .n { font-family: "Azeret Mono", monospace; font-size: 19px; font-weight: 500;
                font-variant-numeric: tabular-nums; align-self: flex-start; }
.econ .fig .k { font-family: "Azeret Mono", monospace; font-size: 10px; color: var(--faint);
                letter-spacing: .06em; }
.econ .fig .n.assumed { border-bottom: 1.5px dashed var(--warn); }
.econ .fig .n.quoted { border-bottom: 1.5px solid var(--ok); }

.costline { display: flex; align-items: center; gap: 10px; padding: 9px 16px;
            border-bottom: 1px solid var(--rule-soft); }
.costline:last-child { border-bottom: none; }
.costline .nm { font-size: 13px; flex-grow: 1; }
.costline .amt { font-family: "Azeret Mono", monospace; font-size: 13px;
                 font-variant-numeric: tabular-nums; }
.costline .src { font-size: 11.5px; color: var(--muted); }

/* --------------------------------------------------------------- write forms */

/* A row of fields, capped: a team name stretched across 900px reads as a
   mistake rather than as generosity. */
.form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
            max-width: 820px; }
.form-row .field { flex: 1 1 150px; min-width: 0; }
.form-row .field.wide { flex: 2 1 260px; }
.form-row .field.narrow { flex: 0 1 110px; }
select { border: 1px solid var(--rule); background: var(--surface); border-radius: 3px;
         padding: 11px 12px; font-family: inherit; font-size: 13px; color: var(--ink);
         min-height: 44px; }
select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.tick-row { display: flex; gap: 16px; flex-wrap: wrap; }
.tick-row label { display: flex; align-items: center; gap: 7px; font-size: 12.5px;
                  color: var(--muted); min-height: 44px; padding: 2px 0; cursor: pointer; }
.tick-row input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); }

details.adder { border: 1px dashed var(--rule); border-radius: 3px; background: var(--surface); }
details.adder > summary { padding: 12px 16px; cursor: pointer; font-family: var(--display);
                          font-size: 15px; font-weight: 600; color: var(--accent);
                          list-style: none; display: flex; align-items: center; gap: 8px; }
details.adder > summary::-webkit-details-marker { display: none; }
details.adder > summary::before { content: "+"; font-family: "Azeret Mono", monospace;
                                  font-size: 15px; color: var(--accent); }
details.adder[open] > summary { border-bottom: 1px solid var(--rule-soft); }
details.adder > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
details.adder .inner { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }

.problem { display: flex; align-items: flex-start; gap: 10px; background: var(--bad-bg);
           border: 1px solid var(--bad-rule); border-radius: 3px; padding: 11px 14px;
           font-size: 13px; color: #7A2A22; }

/* ---------------------------------------------------- the panel and captures */

.compare .panel-head { padding: 12px 16px; border-bottom: 1px solid var(--rule-soft);
                       display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.compare .panel-head h2 { flex-grow: 1; }

/* The offline queue talks back here. It has to be legible from arm's length in
   bad light while somebody is holding a box open. */
.capture-status { margin: 0; font-size: 13.5px; line-height: 1.5; min-height: 20px;
                  color: var(--muted); }
.capture-status.ok { color: var(--ok); font-weight: 500; }
.capture-status.warn { color: var(--warn-ink); font-weight: 500; }
.capture-status.bad { color: var(--bad); font-weight: 500; }

.capture-held { margin: 0; padding: 11px 14px; border-radius: 3px; font-size: 13.5px;
                background: var(--warn-bg); border: 1px solid var(--warn-rule);
                color: var(--warn-ink); font-weight: 500; }

input[readonly] { cursor: default; }

/* A filename is the whole point of its row, so it gets a real target rather
   than the height of one line of text. */
.filelink { display: inline-block; padding: 12px 0; margin: -12px 0;
            font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }

/* A picture opens in the viewer rather than in a browser tab, and says so
   before you click it — the icon is the difference between a file you can look
   at here and one that leaves the app. */
.filelink-image { display: inline-flex; align-items: center; gap: 7px;
                  background: none; border: none; cursor: pointer;
                  color: var(--accent); font-family: inherit; text-align: left; }
.filelink-image:hover { color: var(--accent-dark); }

/* A whole row is the target on a list, so it has to be tall enough to be one. */
tr.row-link td { padding-top: 14px; padding-bottom: 14px; }
tr.row-link a { display: block; min-height: 22px; }

/* ------------------------------------------------------------------ the doorway */

/* Sign-in shares the entrance's materials: the rail colour as ground, one lit
   card on it. Arriving here and picking a brand a second later should feel
   like the same building. */

/* One decision on the page, so it sits in the optical centre with air around
   it rather than hugging a corner. Left-aligned, because that is how every
   other surface here reads. */
.doorway { flex-grow: 1; display: flex; align-items: center;
           padding: 56px 60px 40px; }
.doorway-block { display: flex; flex-direction: column; gap: 20px;
                 width: 100%; max-width: 560px; }
.doorway-block .head { display: flex; flex-direction: column; gap: 8px; padding: 0; }
.doorway-block .head h1 { font-family: var(--display);
                          font-size: 44px; font-weight: 700; line-height: 1;
                          letter-spacing: -.01em; color: #FBFBF9; margin: 0; }
.doorway-block .head h1, .doorway-block .head p { text-wrap: balance; }
.doorway-block .head p { font-size: 16px; color: #A8AEA1; line-height: 1.5;
                         margin: 0; max-width: 52ch; }

.doorway-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 3px;
  padding: 30px 32px 32px; display: flex; flex-direction: column; gap: 12px;
}
.doorway-card .label { font-size: 9.5px; letter-spacing: .12em; color: var(--faint); }
.doorway-card h2 { font-family: var(--display); font-size: 26px;
                   font-weight: 600; line-height: 1.1; margin: 0; color: var(--ink); }
.doorway-card p { font-size: 14px; line-height: 1.6; color: var(--muted);
                  margin: 0; max-width: 52ch; }

.doorway-go { align-self: flex-start; margin-top: 10px; gap: 9px;
              padding: 12px 20px; font-size: 14px; }

.doorway-foot { font-size: 12.5px; color: var(--rail-faint); margin: 0;
                line-height: 1.5; }

/* Failure text on the dark ground: tinted from the ground's own hue rather
   than greyed, so it stays legible without shouting. */
.doorway-problem {
  display: flex; align-items: flex-start; gap: 11px; padding: 13px 16px;
  border: 1px solid #6E3A34; background: #2A211F; border-radius: 3px;
}
.doorway-problem strong { display: block; font-size: 13.5px; font-weight: 600;
                          color: #E8C4BE; }
.doorway-problem span span { font-size: 12.5px; color: #B79A95; line-height: 1.5; }

@media (max-width: 640px) {
  .doorway { padding: 0 24px 40px; }
  .doorway-card { padding: 24px 22px 26px; }
}

/* ------------------------------------------------------------------- a meter */

/* A year that is behind should read from across the room, so the bar carries
   the meaning and the number confirms it rather than the other way round. */
.meter { height: 8px; border-radius: 4px; background: var(--surface-2);
         overflow: hidden; }
.meter .fill { display: block; height: 100%; border-radius: 4px;
               transition: width .4s cubic-bezier(.2,.8,.2,1); }
.meter .fill-ok { background: var(--ok); }
.meter .fill-warn { background: var(--warn); }
.meter .fill-bad { background: var(--bad); }
@media (prefers-reduced-motion: reduce) { .meter .fill { transition: none; } }

/* ------------------------------------------------------------------- ideas */

/* A list, not a grid of identical cards. The reference code leads, because a
   record here is addressed the way records are addressed everywhere else. */

/* Four columns and a strip. The order is the order somebody reads it in —
   what it is, what it looks like, what the model made of it, what to do with
   it — and the six factors go full width underneath, because six numbers and a
   total in a fifth column left the pictures no wider than they already were. */
.idea { display: grid; align-items: start; gap: 16px 20px; padding: 20px 16px;
        grid-template-columns: minmax(0, 1.15fr) 336px minmax(0, 1fr) auto;
        grid-template-areas: "main images say side"
                             "scores scores scores scores";
        border-bottom: 1px solid var(--rule-soft); }
.idea:last-child { border-bottom: none; }
.idea-main { grid-area: main; min-width: 0; display: flex;
             flex-direction: column; gap: 7px; }
.idea-images { grid-area: images; }
.idea-say { grid-area: say; min-width: 0; }
.idea-side { grid-area: side; }
.idea-scores { grid-area: scores; }

/* The row's primary action, so it is worth a thumb rather than a cursor.
   Negative margin keeps the padding from moving the text off its baseline. */
.idea-title { font-size: 15px; font-weight: 600; color: var(--ink);
              display: inline-flex; align-items: center; gap: 9px;
              flex-wrap: wrap; min-height: 44px; padding: 4px 8px;
              margin: -4px -8px; border-radius: 2px; }
.idea-title:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.idea-title:hover { color: var(--accent); }
.idea-title .ref { font-size: 11px; color: var(--faint); letter-spacing: .04em; }

.idea-note { font-size: 13.5px; color: var(--muted); line-height: 1.55;
             margin: 0; max-width: 52ch; }
.idea-meta { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.idea-meta .via { font-size: 10px; color: var(--faint); letter-spacing: .07em; }

.idea-rationale { font-size: 12.5px; color: var(--muted); line-height: 1.55;
                  margin: 0; padding: 11px 13px; background: var(--surface-2);
                  border-radius: 3px; }
.idea-rationale.absent { background: none; padding: 0; color: var(--faint);
                         font-style: italic; }

/* ------------------------------------------------------------ the pictures */

/* 104px, three across, plus two 7px gaps — the tiles size the column rather
   than being fitted into a number decided elsewhere. At 54px you could not
   tell two black pouches apart, which is most of this catalogue. */
.idea-images { display: flex; flex-direction: column; gap: 8px; width: 336px; }
.idea-images .tiles { display: flex; gap: 7px; flex-wrap: wrap;
                      align-content: start; }
.idea-images .thumb { width: 104px; height: 104px; border-radius: 3px;
                      overflow: hidden; border: 1px solid var(--rule);
                      background: var(--surface-2); padding: 0; cursor: pointer;
                      display: block; transition: border-color .12s ease; }
.idea-images .thumb:hover { border-color: var(--accent); }
.idea-images .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* The overflow is in the markup whether or not it is drawn, so the viewer's
   set is the whole set either way and "See all" only changes what is shown. */
.idea-images .thumb.more { display: none; }
.idea-images.all .thumb.more { display: block; }

.see-more { align-self: flex-start; background: none; border: none; padding: 6px 0;
            font-size: 11px; letter-spacing: .06em; color: var(--accent);
            cursor: pointer; font-family: "Azeret Mono", monospace;
            text-transform: uppercase; min-height: 32px; }
.see-more:hover { color: var(--accent-dark); }

.thumb-add { width: 104px; height: 104px; border: 1px dashed var(--rule);
             border-radius: 3px; display: flex; flex-direction: column;
             align-items: center; justify-content: center; gap: 3px;
             cursor: pointer; color: var(--faint);
             transition: border-color .12s ease, color .12s ease; }
.thumb-add:hover { border-color: var(--accent); color: var(--accent); }
.thumb-add span { font-size: 9px; letter-spacing: .08em; }

.idea-side { flex-shrink: 0; display: flex; flex-direction: column; gap: 5px; }
.idea-side .side-label { font-size: 9px; letter-spacing: .1em; color: var(--faint); }
.status-select { font-size: 12.5px; min-width: 140px; }

/* ------------------------------------------------------------- the scoring */

/* Six factors and the total, on one strip. Each carries a bar as well as a
   number, because the shape of six bars is readable at a glance in a way six
   numerals are not — and a failing one carries a drawn cross as well as a hue,
   for daylight and for anyone who does not separate red from green. */
.idea-scores { display: grid; gap: 1px; background: var(--rule-soft);
               border: 1px solid var(--rule-soft); border-radius: 3px;
               grid-template-columns: repeat(6, minmax(0, 1fr)) minmax(120px, .9fr); }
.idea-scores .factor { background: var(--surface); padding: 9px 12px;
                       display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.idea-scores .k { font-size: 9px; letter-spacing: .1em; color: var(--faint);
                  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.idea-scores .v { font-family: "Azeret Mono", monospace; font-size: 17px;
                  font-weight: 500; display: flex; align-items: center; gap: 5px; }
.idea-scores .bar { height: 3px; border-radius: 2px; background: var(--surface-2);
                    overflow: hidden; }
.idea-scores .bar i { display: block; height: 100%; border-radius: 2px; }

.tone-ok { color: var(--ok); } .idea-scores .bar i.tone-ok { background: var(--ok); }
.tone-warn { color: var(--warn); } .idea-scores .bar i.tone-warn { background: var(--warn); }
.tone-bad { color: var(--bad); } .idea-scores .bar i.tone-bad { background: var(--bad); }

.idea-scores .factor.is-fatal { background: var(--bad-bg); }
.idea-scores .total { background: #F5F6F2; }
.idea-scores .total .v { color: var(--ink); font-size: 20px; }
.idea-scores.struck .total { background: var(--bad-bg); }

/* The floor, said out loud. An average lets a 90 on demand hide a 20 on
   margin; this is the line that stops that reading as a healthy idea. */
.idea-scores .stamp { display: flex; align-items: center; gap: 5px;
                      font-size: 11px; font-weight: 500; color: var(--bad);
                      line-height: 1.3; }

.idea-scores.unscored { display: flex; align-items: baseline; gap: 12px;
                        flex-wrap: wrap; background: var(--surface);
                        padding: 10px 12px; }
.idea-scores.unscored .none { font-size: 10px; letter-spacing: .09em;
                              color: var(--warn); font-weight: 500; }
.idea-scores.unscored .why { font-size: 12px; color: var(--faint); }

.empty-note { padding: 30px 16px; display: flex; flex-direction: column; gap: 8px; }
.empty-note .cond { font-size: 18px;
                    font-weight: 600; }
.empty-note p { margin: 0; font-size: 13.5px; color: var(--muted);
                line-height: 1.55; max-width: 66ch; }

/* The strip wraps to two rows before the columns do — seven cells across is
   the first thing to become unreadable as the page narrows. */
@media (max-width: 1400px) {
  .idea-scores { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1180px) {
  .idea { grid-template-columns: minmax(0, 1fr) 336px auto;
          grid-template-areas: "main images side"
                               "say  images side"
                               "scores scores scores"; }
}

@media (max-width: 860px) {
  .idea { grid-template-columns: minmax(0, 1fr);
          grid-template-areas: "main" "images" "say" "side" "scores"; gap: 13px; }
  .idea-images { width: auto; }
  .idea-side { flex-direction: row; align-items: center; gap: 9px; }
  .idea-scores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ----------------------------------------------------------- input modules */

.module { display: flex; align-items: center; gap: 20px; padding: 18px 16px;
          border-bottom: 1px solid var(--rule-soft); }
.module:last-child { border-bottom: none; }
.module-body { display: flex; flex-direction: column; gap: 5px;
               flex-grow: 1; min-width: 0; }
.module-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.module-head .name { font-family: var(--display); font-size: 17px;
                     font-weight: 600; }
.module-note { font-size: 13.5px; color: var(--muted); line-height: 1.5;
               max-width: 62ch; }

/* Out of reach reads as quiet, not broken: the row keeps its ink and loses its
   ground, rather than being dimmed to the point of looking like a bug. */
.module-closed { background: #EDEEE9; }
.module-closed .module-head .name { color: var(--muted); }
.module-shut { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.module-shut .mono { font-size: 10px; letter-spacing: .07em; color: var(--warn-ink); }

@media (max-width: 640px) {
  .module { flex-direction: column; align-items: flex-start; gap: 11px; }
}

/* --------------------------------------------------------- team and brands */

.subhead { display: flex; align-items: center; gap: 12px; padding: 13px 16px 9px;
           border-top: 1px solid var(--rule-soft); }
.subhead .mono { font-size: 9.5px; letter-spacing: .11em; color: var(--faint); }
.subhead-note { font-size: 12.5px; color: var(--muted); flex-grow: 1; }

/* A control that reads as a link and behaves as a button: no border, no fill,
   still a 44px target. */
.btn.linkish { border-color: transparent; background: transparent;
               color: var(--accent); padding: 8px 10px; margin: -8px -10px;
               min-height: 44px; }
.btn.linkish:hover { background: var(--accent-soft); border-color: transparent;
                     color: var(--accent-dark); }

.person { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
          border-bottom: 1px solid var(--rule-soft); }
.person:last-child { border-bottom: none; }
.person-who { display: flex; flex-direction: column; gap: 1px;
              flex-grow: 1; min-width: 0; }
.person-who .name { font-size: 14px; font-weight: 600; }
.person-who .email { font-size: 10.5px; color: var(--faint); letter-spacing: .04em;
                     overflow-wrap: anywhere; }

.avatar-light { background: var(--surface-2); color: var(--muted);
                width: 30px; height: 30px; font-size: 13px; }
.brand-tick { width: 4px; height: 30px; border-radius: 2px; flex-shrink: 0; }

.inline-form { padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.inline-form .form-row { align-items: flex-end; }

/* ------------------------------------------------------- snippets and notes */

.snippet { border: 1px solid var(--rule); border-radius: 3px;
           background: var(--surface-2); overflow: hidden; }
.snippet-head { display: flex; align-items: center; gap: 12px;
                padding: 8px 12px; border-bottom: 1px solid var(--rule);
                background: var(--surface); }
.snippet-head .mono { font-size: 9.5px; letter-spacing: .11em; color: var(--faint);
                      flex-grow: 1; }
.snippet code { display: block; padding: 13px 14px; font-family: "Azeret Mono", monospace;
                font-size: 12px; line-height: 1.6; color: var(--ink);
                overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Confirmation in place, rather than an alert somebody has to dismiss. */
.said { margin: 0; padding: 11px 14px; border-radius: 3px; font-size: 13px;
        background: var(--ok-bg); border: 1px solid var(--ok-rule); color: #2C5238; }

/* ---------------------------------------------------------------- dropzone */

.dropzone { display: flex; flex-direction: column; align-items: center;
            justify-content: center; gap: 8px; padding: 40px 24px;
            border: 1px dashed var(--rule); border-radius: 3px;
            background: var(--surface); cursor: pointer; text-align: center;
            transition: border-color .12s ease, background .12s ease; }
.dropzone:hover, .dropzone.over { border-color: var(--accent);
                                  background: var(--accent-soft); }
.dropzone:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.dropzone .big { font-family: var(--display); font-size: 17px;
                 font-weight: 600; color: var(--ink); }
.dropzone .small { font-size: 10px; letter-spacing: .09em; color: var(--faint); }

/* ------------------------------------------------------------------- chat */

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0;
                   margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
                   white-space: nowrap; border: 0; }

.chat { display: flex; flex-direction: column; gap: 0;
        height: calc(100vh - 150px); max-width: 880px;
        background: var(--surface); border: 1px solid var(--rule);
        border-radius: 3px; overflow: hidden; }

.chat-log { flex-grow: 1; overflow-y: auto; padding: 22px;
            display: flex; flex-direction: column; gap: 22px; }

/* Speaker is named in the margin rather than implied by which side a bubble
   sits on: at a glance you can still tell, and a long answer does not become a
   column two thirds of the width of the page. */
.turn { display: flex; flex-direction: column; gap: 6px; max-width: 68ch; }
.turn .who { font-size: 9.5px; letter-spacing: .12em; color: var(--faint); }
.turn-me { align-self: flex-end; align-items: flex-end; }
.turn-me .said-body { background: var(--accent-soft); border-color: #C9D8E8; }

.said-body { padding: 13px 16px; border-radius: 3px; background: var(--surface-2);
             border: 1px solid var(--rule-soft); }
.said-body p { margin: 0 0 9px; font-size: 14px; line-height: 1.6; color: var(--ink); }
.said-body p:last-child { margin-bottom: 0; }
.said-body ul, .said-body ol { margin: 0 0 9px; padding-left: 20px;
                               font-size: 14px; line-height: 1.6; }
.said-body li { margin-bottom: 4px; }
.said-body h1, .said-body h2, .said-body h3 {
  font-family: var(--display); font-size: 16px; font-weight: 600;
  margin: 14px 0 6px; }
.said-body code { font-family: "Azeret Mono", monospace; font-size: 12.5px;
                  background: var(--surface); padding: 1px 4px; border-radius: 2px; }
.said-body strong { font-weight: 600; }

.turn-actions { display: flex; align-items: center; gap: 10px; }
.kept { font-size: 10px; letter-spacing: .08em; }
.kept-yes { color: var(--ok); }
.kept-no { color: var(--faint); }

.chat-bar { display: flex; gap: 10px; padding: 14px 16px;
            border-top: 1px solid var(--rule); background: var(--surface); }
.chat-bar input { flex-grow: 1; border: 1px solid var(--rule);
                  background: var(--paper); border-radius: 3px;
                  padding: 11px 14px; font-family: inherit; font-size: 14px;
                  color: var(--ink); min-height: 44px; }
.chat-bar input:focus { outline: 2px solid var(--accent); outline-offset: -1px;
                        border-color: var(--accent); }
.chat-bar input:disabled { background: var(--surface-2); color: var(--faint); }
.chat-bar .btn { min-height: 44px; }

@media (max-width: 640px) {
  .chat { height: calc(100vh - 190px); }
  .chat-log { padding: 16px; gap: 18px; }
}

/* ------------------------------------------------------------ idea detail */

.saved { font-size: 9.5px; letter-spacing: .11em; color: var(--ok); }
.thumb-lg { width: 84px !important; height: 84px !important; }

.comment { display: flex; gap: 12px; padding: 14px 16px;
           border-bottom: 1px solid var(--rule-soft); align-items: flex-start; }
.comment:last-child { border-bottom: none; }
.comment-body { display: flex; flex-direction: column; gap: 4px;
                flex-grow: 1; min-width: 0; }
.comment-who { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.comment-who .name { font-size: 13.5px; font-weight: 600; }
.comment-who .when { font-size: 10px; color: var(--faint); letter-spacing: .06em; }
.comment-said { font-size: 13.5px; line-height: 1.6; color: var(--ink);
                white-space: pre-wrap; max-width: 70ch; }

.vote { display: flex; gap: 9px; }
.vote-btn { flex: 1 1 0; justify-content: center; min-height: 44px; }
.vote-btn .count { font-size: 12px; color: var(--faint); margin-left: 2px; }

/* A title is the whole row's target on a phone, where the row is what you aim
   at rather than the words. */
@media (max-width: 700px) {
  .idea-title { min-height: 44px; align-items: center; }
}

/* An idea that became a product. The link is the point, so it reads as a
   destination rather than a status line with a URL attached. */
.became {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--rule);
  border-radius: 2px; background: var(--accent-soft);
  min-height: 44px;
}
.became:hover { border-color: var(--accent); }
.became .ref { font-size: 11px; color: var(--accent-dark); letter-spacing: .06em; }
.became .t { font-size: 13.5px; font-weight: 600; color: var(--ink); flex-grow: 1; }

/* ------------------------------------------------------------ the one shell */

/* The rail head is a control now, not a logo: the brand is where you are, so
   it is the loud thing and the app name sits above it, said once. */
.rail-head.switcher, .rail-foot.switcher { cursor: pointer; user-select: none; }
.rail-head.switcher:hover, .rail-foot.switcher:hover { background: var(--rail-hover); }
.rail-head.switcher:focus-visible, .rail-foot.switcher:focus-visible {
  outline: 2px solid var(--accent-soft); outline-offset: -2px;
}
.rail-head .app {
  font-size: 9px; letter-spacing: .15em; color: var(--rail-faint);
  text-transform: uppercase;
}
/* Rubik is wider than the face this replaced, so a long brand name wraps. The
   chevron aligns to the first line rather than centring on the block. */
.rail-head .who { display: flex; align-items: flex-start; gap: 8px; }
.rail-head .who .name {
  flex-grow: 1; font-size: 19px; line-height: 1.15; font-weight: 600;
}
.rail-head .who .chev { margin-top: 4px; }
.rail-head .chev, .rail-foot .chev { color: var(--rail-dim); flex-shrink: 0; }

.rail-note {
  padding: 0 18px; margin: 6px 0 0; font-size: 11.5px; line-height: 1.5;
  color: var(--rail-faint);
}
.navrow.mine .label {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* A menu, not a modal: it interrupts nothing and traps no focus. */
.menu {
  position: absolute; z-index: 40; width: calc(100% - 20px); max-width: 240px;
  background: #31362E; border: 1px solid #4A5145; border-radius: 3px;
  padding: 5px 0;
  box-shadow: 0 2px 5px rgba(0,0,0,.34), 0 16px 36px -10px rgba(0,0,0,.62);
}
.menu-head { top: 62px; left: 10px; }
.menu-foot { bottom: 58px; left: 10px; }
.menu-label {
  display: block; font-size: 9px; letter-spacing: .14em; padding: 5px 13px 6px;
  color: var(--rail-faint); text-transform: uppercase;
}
.menu-item {
  display: flex; align-items: center; gap: 9px; padding: 7px 13px;
  color: var(--rail-text); font-size: 13.5px; min-height: 40px;
}
.menu-item:hover { background: #3D4439; color: var(--rail-text); }
.menu-item .pick { width: 14px; flex-shrink: 0; display: flex; color: var(--rail-dim); }
.menu-item .label { flex-grow: 1; }
.menu-item.picked .label { font-weight: 600; color: #FBFBF9; }
.menu-item.quiet .label { color: #C9CFC1; }
.menu-rule { height: 1px; background: #4A5145; margin: 5px 0; }

/* Setting up is a different room, and the whole chrome says so. Dark rail
   means you are doing the work; light means you are configuring it. */
.rail-setup {
  background: var(--surface-2); color: var(--ink);
  border-right: 1px solid var(--rule);
}
.rail-setup .rail-head, .rail-setup .rail-foot,
.rail-setup .rail-links { border-color: var(--rule); }
.rail-setup .rail-back {
  flex-direction: row; align-items: center; gap: 8px;
  font-size: 13px; color: var(--accent); min-height: 48px;
}
.rail-setup .rail-back:hover { background: var(--surface); }
.rail-setup .rail-hall h2 { color: var(--faint); }
.rail-setup .navrow { color: var(--ink); }
.rail-setup .navrow:hover { background: var(--surface); }
.rail-setup .navrow.on { background: var(--surface); }
.rail-setup .navrow.on .label { color: var(--ink); }
.rail-setup .navrow .count { color: var(--faint); }
/* The coloured spine carries the hall inks, which setup has none of. A grey
   stub of it reads as a rendering fault rather than a device. */
.rail-setup .rail-spine .bar { display: none; }
.rail-setup .rail-spine .rows { padding-left: 3px; }
.rail-setup .rail-foot.switcher:hover { background: var(--surface); }
.rail-setup .whoami .r { color: var(--faint); }
.rail-setup .chev { color: var(--faint); }
.rail-setup .menu { color: var(--rail-text); }

.whoami { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.whoami .n { font-size: 12.5px; }
.whoami .r { font-size: 9.5px; color: var(--rail-faint); letter-spacing: .05em; }
.avatar-light { background: #8A9082; color: #FBFBF9; }

/* Where you are, and one click back to any of it. */
.crumbs {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 10px 26px 0; font-size: 12.5px;
}
.crumbs a { color: var(--accent); }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 2px; }
.crumbs .sep { color: var(--faint); }
.crumbs .here { color: var(--ink); font-weight: 600; }
.crumbs + .topbar { border-top: 0; }

.prow {
  padding: 11px 16px; border-bottom: 1px solid var(--rule-soft);
  display: flex; align-items: center; gap: 12px; font-size: 13.5px;
}
.prow:last-child { border-bottom: 0; }
.prow .k { color: var(--muted); width: 120px; flex-shrink: 0; }
.prow .v { color: var(--ink); }

@media (max-width: 720px) {
  .menu { max-width: none; }
  .crumbs { padding: 10px 18px 0; }
}

/* The signed-in doorway still needs a way out. */
.gate-bar {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 12px 26px; border-bottom: 1px solid var(--rail-rule);
  background: var(--rail); color: var(--rail-text);
}
.gate-bar .app {
  font-size: 10px; letter-spacing: .14em; color: var(--rail-dim);
  text-transform: uppercase;
}
.gate-who {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 5px 9px; border-radius: 3px; min-height: 44px; user-select: none;
}
.gate-who:hover { background: var(--rail-hover); }
.gate-who:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: -2px; }
.gate-who .whoami { min-width: 0; }
.menu-gate { top: 58px; right: 20px; left: auto; width: 230px; }

@media (max-width: 720px) {
  .gate-bar { padding: 10px 18px; }
  .menu-gate { right: 12px; }
}


/* The folded rail puts both menus under the top row rather than above the
   foot. These live last on purpose: the base .menu-foot rule is later in the
   file than the layout block, and at equal specificity it was winning — which
   pinned the menu top AND bottom and stretched it down the whole screen. */
@media (max-width: 760px) {
  .menu-head { top: 52px; bottom: auto; left: 10px; right: auto; }
  .menu-foot { top: 52px; bottom: auto; left: auto; right: 10px; }
  .menu { width: auto; min-width: 210px; max-width: calc(100vw - 20px); }
}

/* A person row says what they can actually reach, not what a field is called. */
.person-tall { align-items: flex-start; padding: 14px 16px; }
.person-tall .person-who { gap: 3px; }
.person .you {
  font-size: 9px; letter-spacing: .1em; color: var(--faint);
  border: 1px solid var(--rule); border-radius: 2px; padding: 1px 4px;
  margin-left: 6px; vertical-align: middle;
}
.person .reach {
  display: flex; align-items: center; gap: 6px; margin-top: 3px;
  font-size: 12.5px; color: var(--muted);
}
.person .reach .none { color: var(--warn-ink); }

.person-edit { background: var(--surface-2); border-top: 1px solid var(--rule); }
.grantset { display: flex; flex-direction: column; gap: 7px; }
.grantset .label { font-size: 9.5px; letter-spacing: .12em; color: var(--faint); }
.grant {
  display: flex; align-items: center; gap: 10px; min-height: 40px;
  padding: 5px 10px; background: var(--surface);
  border: 1px solid var(--rule); border-radius: 2px; max-width: 460px;
}
.grant .n { flex-grow: 1; font-size: 13.5px; }
.grant select { max-width: 120px; }
.grant input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--accent); }

/* Somebody on no team, and the one click that fixes it. */
.joinrow {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px 16px 14px 62px; border-bottom: 1px solid var(--rule-soft);
  font-size: 13px; color: var(--muted);
}
.joinrow .joined { margin: 0; }

/* The wordmark from inno-launch.com. Its lettering is white on transparent, so
   it belongs on a dark ground and nowhere else — the setup rail sets the name
   in type instead of showing it grey on grey. */
.wordmark {
  display: block; height: 17px; width: auto; max-width: 100%;
  margin-bottom: 2px;
}
.rail-setup .wordmark { display: none; }

/* A way in, per brand, with the one thing that decides whether it works. */
.waypoint {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border-bottom: 1px solid var(--rule-soft);
}
.waypoint-who { display: flex; flex-direction: column; gap: 4px; flex-grow: 1; min-width: 0; }
.waypoint-who .name { font-size: 14.5px; font-weight: 600; }
.waypoint .state { display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.waypoint .state .on { color: var(--ok); }
.waypoint .state .off { color: var(--warn-ink); }
.waypoint-detail {
  padding: 4px 16px 16px; display: flex; flex-direction: column; gap: 10px;
  border-bottom: 1px solid var(--rule-soft); background: var(--surface-2);
}
.waypoint-detail:last-child { border-bottom: 0; }

/* The public form is the only screen somebody outside the company sees. */
.embed-mark {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 16px; background: var(--brand-dark);
  border-radius: 2px 2px 0 0;
}
.embed-mark .wordmark { height: 15px; margin: 0; }
.embed-mark .for {
  margin-left: auto; font-size: 10px; letter-spacing: .09em; color: #7C8899;
}

/* ------------------------------------------- the suggestion page and its card

   Two surfaces from one form. The page is opened by somebody who arrived from
   a link and owes you nothing, so it has room to say what this is. The embed
   sits inside a host page and has to fit. They were one template, which is why
   the page was as small as the card. */

/* A short page sits in the optical centre rather than clinging to the top of a
   tall screen with half a viewport of empty paper under it. It still scrolls
   normally when the content is taller than the window. */
.suggest-body {
  background: var(--paper); min-height: 100vh;
  display: flex; flex-direction: column;
}

.suggest-top {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 15px 26px; background: var(--brand-dark); color: var(--rail-text);
}
.suggest-top .wordmark { height: 18px; margin: 0; }
.suggest-top .for {
  margin-left: auto; font-size: 10.5px; letter-spacing: .1em; color: #8A97A8;
}

.suggest-page {
  width: 100%; max-width: 1000px; margin: 0 auto; padding: 52px 26px 72px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: 52px; align-items: center; align-content: center;
  flex-grow: 1;
}

.suggest-say h1 {
  font-size: clamp(30px, 4.4vw, 42px); font-weight: 700; line-height: 1.06;
  margin: 0 0 16px; color: var(--ink); text-wrap: balance;
}
.suggest-say .lede {
  margin: 0 0 22px; font-size: 16px; line-height: 1.6; color: var(--muted);
  max-width: 46ch;
}
.suggest-how { margin: 0; padding: 0; list-style: none;
               display: flex; flex-direction: column; gap: 11px; max-width: 46ch; }
.suggest-how li {
  position: relative; padding-left: 20px; font-size: 14px; line-height: 1.55;
  color: var(--muted);
}
.suggest-how li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; border-radius: 2px; background: var(--brand);
}

.suggest-card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: 3px;
  padding: 26px 24px 24px;
  box-shadow: 0 1px 2px rgba(23,26,22,.04), 0 14px 34px -20px rgba(23,26,22,.3);
}

.suggest-form { display: flex; flex-direction: column; gap: 16px; }
.suggest-form.is-page .field label { font-size: 12px; }
.suggest-form .suggest-send { align-self: flex-start; min-height: 46px; padding: 11px 22px; }
.suggest-form.is-page .suggest-send { font-size: 14.5px; }
.suggest-small { margin: 0; font-size: 12px; line-height: 1.5; color: var(--faint); }
.embed-lede { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }

/* The thing you came to do is finished, so the form goes rather than sitting
   there under a line of text inviting you to do it again by accident. */
.suggest-done { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.suggest-done .tick-round {
  width: 34px; height: 34px; border-radius: 50%; background: var(--ok);
  display: flex; align-items: center; justify-content: center;
}
.suggest-done .h { font-size: 21px; font-weight: 600; }
.suggest-done p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); max-width: 44ch; }
.suggest-done .ref { font-size: 13px; color: var(--muted); }
.suggest-done .ref .mono { font-size: 13px; color: var(--accent-dark); letter-spacing: .04em; }
.suggest-done .suggest-again { margin-top: 4px; }

@media (max-width: 860px) {
  .suggest-page { grid-template-columns: 1fr; gap: 32px; padding: 34px 20px 56px; }
  .suggest-card { padding: 22px 18px 20px; }
  .suggest-top { padding: 13px 20px; }
}

/* ---------------------------------------------------------- tester reports */
/* A tester's own page: one column, built for a phone, every control at least
   44 points tall, and nothing that relies on colour alone. */
.report-page { width: 100%; max-width: 560px; margin: 0 auto; padding: 28px 18px 56px;
               display: flex; flex-direction: column; gap: 18px; flex-grow: 1; }
.report-say h1 { font-size: clamp(26px, 7vw, 34px); font-weight: 700; line-height: 1.1;
                 margin: 0 0 6px; color: var(--ink); text-wrap: balance; }
.report-sub { display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em;
              text-transform: uppercase; color: var(--muted); margin: 14px 0 6px; }
.report-text { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink); white-space: pre-line; }
.report-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 3px;
               padding: 20px 18px; display: flex; flex-direction: column; gap: 14px; }
.report-card h1, .report-card h2 { margin: 0; font-size: 21px; font-weight: 700; color: var(--ink); }
.report-card p { margin: 0; font-size: 15px; line-height: 1.6; }
.report-form { display: flex; flex-direction: column; gap: 24px; }
.report-q { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.report-q legend { font-size: 16px; font-weight: 600; line-height: 1.4; padding: 0; margin-bottom: 10px;
                   color: var(--ink); }
.report-q textarea, .report-reaction textarea {
  width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; min-height: 88px;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--surface); }
.report-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.report-scale.report-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.report-choices { display: flex; flex-direction: column; gap: 8px; }
.report-scale label, .report-choices label { position: relative; display: block; }
.report-scale input, .report-choices input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.report-scale span, .report-choices span {
  display: flex; align-items: center; justify-content: center; min-height: 52px;
  border: 1.5px solid var(--rule); border-radius: 3px; background: var(--surface);
  font-size: 18px; font-weight: 600; color: var(--ink); cursor: pointer; }
.report-choices span { justify-content: flex-start; padding: 0 14px; font-size: 15px; font-weight: 500; }
.report-scale input:checked + span, .report-choices input:checked + span {
  background: var(--accent); border-color: var(--accent); color: #fff; }
.report-scale input:focus-visible + span, .report-choices input:focus-visible + span {
  outline: 2px solid var(--accent); outline-offset: 2px; }
.report-big { min-height: 52px; font-size: 16px; padding: 12px 20px; }
.report-alarm { background: var(--bad); border-color: var(--bad); color: #fff; }
summary.report-alarm { list-style: none; display: flex; align-items: center; justify-content: center;
                       border-radius: 3px; font-weight: 600; cursor: pointer; }
summary.report-alarm::-webkit-details-marker { display: none; }
.report-reaction details[open] > summary { margin-bottom: 14px; }
.report-reaction form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.report-stop { border: 2px solid var(--bad); }
.report-stop h1 { color: var(--bad); }
.report-small { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* On the product page: where each tester stands, and what their page says.
   A unit code is written on a tube; it never breaks across two lines — the
   register scrolls sideways instead. */
.register td.mono { white-space: nowrap; }
.checkins { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
/* Fixed columns, so a check-in sits at the same place in every question's table. */
.checkin-table { table-layout: fixed; min-width: 34rem; }
.checkin-table th:first-child, .checkin-table td:first-child { width: 15rem; }
.checkin-table caption { text-align: left; padding: 14px 16px 6px; font-size: 13.5px; font-weight: 600;
                         color: var(--ink); }
.checkin-table tfoot th, .checkin-table tfoot td { background: #F5F6F2; }
.see-grid { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.see-grid dt { font-size: 12.5px; color: var(--muted); }
.see-grid dd { margin: 0; font-size: 13px; min-width: 0; }
.link-copy { display: flex; gap: 8px; flex-wrap: wrap; }
.link-copy input { flex: 1 1 22rem; min-width: 0; font-size: 12.5px; padding: 10px 12px;
                   border: 1px solid var(--rule); border-radius: 3px; background: var(--surface-2); }
@media (max-width: 640px) {
  .see-grid { grid-template-columns: 1fr; gap: 2px 0; }
  .see-grid dd { margin-bottom: 8px; }
}

/* ------------------------------------------------------------------ viewer */

/* Looking at a picture used to mean leaving the app for a browser tab holding
   the raw file. The backdrop is the rail colour rather than a generic black,
   so this reads as a room in this app and not as the browser's own chrome. */
.viewer { border: none; padding: 0; max-width: 100vw; max-height: 100vh;
          width: 100vw; height: 100vh; background: transparent; color: #E7E8E2;
          overflow: hidden; }
.viewer::backdrop { background: rgba(32, 36, 30, .95); }
.viewer[open] { display: flex; flex-direction: column; }

.viewer-bar { display: flex; align-items: center; gap: 14px; flex-shrink: 0;
              padding: 12px 16px; border-bottom: 1px solid rgba(231,232,226,.14); }
.viewer-name { font-size: 13.5px; color: #E7E8E2; flex-grow: 1; min-width: 0;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-count { font-size: 12px; color: #A8AEA1; letter-spacing: .06em; flex-shrink: 0; }
.viewer-shut { background: none; border: none; color: #A8AEA1; cursor: pointer;
               min-width: 44px; min-height: 44px; display: flex; padding: 0;
               align-items: center; justify-content: center; border-radius: 3px; }
.viewer-shut:hover { color: #FBFBF9; background: rgba(231,232,226,.1); }

.viewer-stage { flex-grow: 1; min-height: 0; display: flex; align-items: center;
                justify-content: center; gap: 10px; padding: 16px; }
.viewer-shot { max-width: 100%; max-height: 100%; object-fit: contain;
               display: block; border-radius: 2px; }

/* Visible rather than revealed on hover: half this team is on a touch screen,
   where hover does not happen and a hidden control is a missing one. */
.viewer-step { background: rgba(231,232,226,.08); border: none; color: #E7E8E2;
               cursor: pointer; flex-shrink: 0; border-radius: 3px; padding: 0;
               width: 52px; height: 88px; display: flex;
               align-items: center; justify-content: center;
               transition: background .12s ease, opacity .12s ease; }
.viewer-step:hover { background: rgba(231,232,226,.18); }
.viewer-step[disabled] { opacity: .22; cursor: default; }
.viewer-step[disabled]:hover { background: rgba(231,232,226,.08); }
.viewer :focus-visible { outline: 2px solid #FBFBF9; outline-offset: 2px; }

@media (max-width: 700px) {
  .viewer-stage { padding: 8px; gap: 4px; }
  .viewer-step { width: 40px; height: 72px; }
}

/* ------------------------------------------------------------------ drawer */

/* The tab list still scrolls sideways and still clips its own overflow. The
   actions are beside it, not in it, so they neither scroll away nor get their
   menu cut off at the edge of the strip. */
.tab-row { display: flex; align-items: flex-end; gap: 14px;
           min-width: 0; max-width: 100%; }
/* `flex: 1 1 0` rather than flex-grow alone. A flex item is sized from its
   content unless the basis says otherwise, and the tab list's content is seven
   tabs wide — enough to push the whole header past the screen on a phone and
   put every stand page into horizontal scroll, which is a fault this header
   has had before. The basis of zero is what lets it shrink and scroll itself
   instead of widening everything above it. */
.tab-row > .tabs { flex: 1 1 0; min-width: 0; }
.tab-actions { display: flex; flex-shrink: 0; padding-bottom: 7px;
               min-width: 0; max-width: 100%; }

/* One tap for the thing this tab is mostly for, two for the rest. A row of
   five buttons is a toolbar, and a picker in front of every entry charges a
   click to the person who does this all day. */
.split { display: flex; position: relative; }
.split > .btn-p { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split-more { border-top-left-radius: 0; border-bottom-left-radius: 0;
              border-left: none; padding: 9px 10px; min-width: 38px;
              color: #FBFBF9; background: var(--accent); border-color: var(--accent); }
.split-more:hover { background: var(--accent-dark); border-color: var(--accent-dark);
                    color: #FBFBF9; }
.split-more::before { content: ''; position: absolute; left: 0; top: 9px; bottom: 9px;
                      width: 1px; background: rgba(251,251,249,.32); pointer-events: none; }

/* The rail's menu is coloured for the rail. On paper it reads as a mistake,
   so the geometry is shared and the palette is not. */
.menu-light { top: calc(100% + 6px); right: 0; left: auto; width: max-content;
              min-width: 210px; max-width: 300px;
              background: var(--surface); border-color: var(--rule);
              box-shadow: 0 1px 2px rgba(23,26,22,.05), 0 14px 32px -12px rgba(23,26,22,.4); }
.menu-light .menu-item { color: var(--ink); font-family: inherit; width: 100%;
                         background: none; border: none; cursor: pointer;
                         text-align: left; font-size: 13.5px; }
.menu-light .menu-item:hover { background: var(--surface-2); color: var(--ink); }

.drawer { border: none; padding: 0; margin: 0 0 0 auto; max-height: 100vh;
          height: 100vh; width: 460px; max-width: 100vw; background: var(--surface);
          color: var(--ink); box-shadow: -18px 0 40px -24px rgba(23,26,22,.55); }
.drawer::backdrop { background: rgba(32, 36, 30, .34); }
.drawer[open] { display: flex; flex-direction: column;
                animation: drawer-in .18s cubic-bezier(.22,.61,.36,1); }
@keyframes drawer-in { from { transform: translateX(26px); opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  .drawer[open] { animation: none; }
}

.drawer-bar { display: flex; align-items: center; gap: 12px; flex-shrink: 0;
              padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.drawer-title { font-size: 17px; font-weight: 600; margin: 0; flex-grow: 1; min-width: 0; }
.drawer-shut { background: none; border: none; color: var(--muted); cursor: pointer;
               min-width: 44px; min-height: 44px; display: flex; padding: 0;
               align-items: center; justify-content: center; border-radius: 3px;
               margin: -8px -8px -8px 0; }
.drawer-shut:hover { color: var(--ink); background: var(--surface-2); }
.drawer-body { flex-grow: 1; min-height: 0; overflow-y: auto; padding: 16px 18px 20px; }

/* Inside the drawer the disclosure is not a disclosure any more — the drawer's
   own title says which form this is, and it is the only one showing. */
.entries-drawered > details.adder { border: none; background: none; }
.entries-drawered > details.adder > summary { display: none; }
.entries-drawered > details.adder[open] > summary { border-bottom: none; }
.entries-drawered .inner { padding: 0; }

/* A long form still ends in one tap: the submit rides the bottom of the panel
   rather than sitting below its fold. The call sites carry an inline
   `align-self`, so the width is left alone and only the position is taken —
   fighting an inline style from a stylesheet is a fight this would lose. */
.entries-drawered .inner > button[type=submit] {
  position: sticky; bottom: -20px; z-index: 1;
  padding-left: 22px; padding-right: 22px; min-height: 48px;
  margin-top: 6px; margin-bottom: -20px;
  box-shadow: 0 0 0 20px var(--surface);
}

.entries { display: flex; flex-direction: column; gap: 10px; }

@media (max-width: 700px) {
  .drawer { width: 100vw; }
  .tab-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .tab-actions { padding-bottom: 10px; }
  .tab-actions .split { width: 100%; }
  .tab-actions .split > .btn-p { flex-grow: 1; }
  .menu-light { right: 0; left: auto; }
}

/* -------------------------------------------------- reviewing in place */

/* A change waiting on a decision, shown against the record it would alter.
   Bordered in the interactive colour because it is the one thing on the tab
   asking something of you; everything below it is the record as it stands. */
.review { border: 1px solid var(--accent); border-radius: 3px;
          background: var(--accent-soft); overflow: hidden; }
.review > header { display: flex; align-items: center; gap: 10px;
                   padding: 11px 16px; border-bottom: 1px solid #C9DBFB; }
.review > header h2 { font-size: 15px; font-weight: 600; margin: 0; color: var(--brand-ink); }
.review > header .badge { flex-shrink: 0; }
.review .write { border-color: #C9DBFB; }

/* The tab strip aligns on the text baseline, so a pill in a tab must not drag
   the row taller or push the underline off. */
.tabs .badge { flex-shrink: 0; line-height: 1.5; }
.stand .top .badge { flex-shrink: 0; align-self: flex-start; }

/* ------------------------------------------------ correcting in place */

/* The value is the control. Edit sits beside it in the interactive colour, out
   of the way until the value is pointed at or tabbed to, and always there on a
   touch screen, where nothing is ever pointed at.

   Its target stays inside its own row. It used to be padded out by negative
   margins, and where two correctable values sit one above the other — a
   supplier's location over what it does — the upper one's padding covered the
   lower one's Edit, so a click there opened the wrong field. A pointer needs
   only a little room; on a touch screen the row itself grows to a finger's
   height instead. */
.fix { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fix-shown { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; }
.fix-edit { font-family: "Azeret Mono", monospace; font-size: 10.5px; font-weight: 500;
            letter-spacing: .07em; text-transform: uppercase; color: var(--accent);
            padding: 3px 6px; margin: -3px -6px; opacity: 0; flex-shrink: 0; }
.fix:hover .fix-edit, .fix:focus-within .fix-edit { opacity: 1; }
@media (hover: none) {
  .fix-shown { align-items: center; }
  .fix-edit { opacity: 1; display: inline-flex; align-items: center; min-height: 44px;
              padding: 0 8px; margin: 0 -8px; }
}
.fix-open > .fix-shown { display: none; }

.fix-form { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 520px; }
.fix-form[hidden] { display: none; }
.fix-label { font-family: "Azeret Mono", monospace; font-size: 10px; letter-spacing: .09em;
             color: var(--faint); text-transform: uppercase; }
.fix-form input, .fix-form textarea {
  border: 1px solid var(--accent); background: var(--surface); border-radius: 3px;
  padding: 11px 12px; font-family: inherit; font-size: 13px; color: var(--ink);
  line-height: 1.5; resize: vertical; min-height: 44px; width: 100%;
}
.fix-form select { width: 100%; border-color: var(--accent); }
.fix-form input:focus, .fix-form textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.fix-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fix-hint { font-size: 12px; color: var(--muted); line-height: 1.45; }
.fix .problem { font-size: 12.5px; padding: 9px 12px; }

/* What a value was before, kept under it. Closed by default: the record is the
   value, and its past is one click away rather than in the way. */
.fix-history { font-size: 12px; color: var(--muted); }
.fix-history > summary { font-family: "Azeret Mono", monospace; font-size: 10.5px;
                         letter-spacing: .06em; color: var(--faint); cursor: pointer;
                         list-style: none; padding: 4px 0; }
.fix-history > summary::-webkit-details-marker { display: none; }
.fix-history.just > summary { color: var(--ok); }
.fix-history ol { list-style: none; margin: 6px 0 0; padding: 0;
                  display: flex; flex-direction: column; gap: 7px; }
.fix-history li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 8px; line-height: 1.4; }
.fix-history .was { text-decoration: line-through; color: var(--faint); }
.fix-history .who { font-family: "Azeret Mono", monospace; font-size: 10px; color: var(--faint); }
.fix-history .why { flex-basis: 100%; color: var(--ink); }

/* An action on the thing in front of you — change this quote, upload this
   file — in the same small accent type as Edit, where the thing is. */
.act-inline { font-family: "Azeret Mono", monospace; font-size: 10.5px; font-weight: 500;
              letter-spacing: .07em; text-transform: uppercase; color: var(--accent);
              background: none; border: none; cursor: pointer; padding: 14px 0; margin: -14px 0;
              text-align: left; white-space: nowrap; }
.act-inline:hover { color: var(--accent-dark); }
details.act-inline-box > summary { list-style: none; display: inline-block; }
details.act-inline-box > summary::-webkit-details-marker { display: none; }
details.act-inline-box[open] > summary { margin-bottom: 8px; }
.row-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* A plan's tests that are not on the product, shown faintly under the question
   they would answer, each with its own add. */
.planned { border-top: 1px dashed var(--rule); padding: 4px 16px 8px; }
.planned-head { display: block; font-size: 10px; letter-spacing: .08em; color: var(--faint);
                padding: 8px 0 2px; }
.planned-row { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto;
               gap: 4px 14px; align-items: baseline; padding: 8px 0;
               border-bottom: 1px solid var(--rule-soft); }
.planned-row:last-child { border-bottom: 0; }
.planned-name { font-size: 13px; color: var(--muted); }
.planned-pass { font-size: 12.5px; color: var(--faint); line-height: 1.4; }
.planned-row form, .plan-note form { margin: 0; }
.plan-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
             font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) {
  .planned-row { grid-template-columns: minmax(0, 1fr) auto; }
  .planned-row form { grid-column: 2; grid-row: 1; }
  .planned-pass { grid-column: 1 / -1; grid-row: 2; }
}

/* An empty tab leads with the thing you would do there. */
.empty-state { padding: 34px 30px; display: flex; flex-direction: column;
               align-items: center; gap: 11px; text-align: center; }
.empty-state p { max-width: 58ch; color: var(--muted); margin: 0; line-height: 1.5; }
.empty-state .waiting { font-family: "Azeret Mono", monospace; font-size: 11px;
                        letter-spacing: .05em; color: var(--accent); }

/* The line under a product's name: what it is, who has it, where it sits. */
.stand-meta { display: flex; align-items: baseline; gap: 6px 13px; color: var(--muted);
              font-size: 13px; flex-wrap: wrap; }
.stand-meta strong { color: var(--ink); }
.stand-meta .sep { color: #C6C9C0; }

/* On a phone the line wraps, and a divider left at the start or end of a line
   reads as a stray mark; the gap does the dividing instead. A panel's header
   wraps too, so an action in it moves under the title rather than being
   squeezed into a column one word wide. */
@media (max-width: 700px) {
  .stand-meta { gap: 6px 16px; }
  .stand-meta .sep { display: none; }
  .panel > header { flex-wrap: wrap; row-gap: 6px; }
}

/* A quote's breaks, a quantity and its price kept together however the row
   wraps — a price that lands on the line below its quantity reads as the next
   one's. */
.breaks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
          gap: 12px 18px; max-width: 820px; }
.break-pair { display: flex; gap: 10px; }
.break-pair .field { flex: 1 1 0; min-width: 0; }

/* ------------------------------------------------ suppliers on a product */

/* A supplier's reason for this product, and under it, quieter, its note on
   every product. */
.why-cell, .compare .cell.why-cell { flex-direction: column; align-items: flex-start; gap: 6px; }
.note-label { font-family: "Azeret Mono", monospace; font-size: 9.5px; letter-spacing: .09em;
              text-transform: uppercase; color: var(--faint); margin-top: 4px; }

/* On a phone each supplier is a section of its own rather than a column of a
   grid that scrolls sideways under a thumb. */
.supplier-cards { display: none; }
.supplier-card { padding: 14px 16px; border-top: 1px solid var(--rule-soft);
                 display: flex; flex-direction: column; gap: 8px; }
.supplier-card.out { background: #F4F5F1; }
.supplier-card header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.supplier-card .nm { font-size: 18px; font-weight: 600; }
.supplier-card .sub { font-family: "Azeret Mono", monospace; font-size: 10.5px;
                      letter-spacing: .04em; color: var(--faint); }
.card-rows { margin: 0; display: flex; flex-direction: column; }
.card-rows > div { display: flex; justify-content: space-between; align-items: center;
                   gap: 12px; min-height: 44px; border-bottom: 1px solid var(--rule-soft); }
.card-rows dt { font-size: 13px; color: var(--muted); }
.card-rows dd { margin: 0; text-align: right; font-size: 13px; }
.card-rows .lowest { font-size: 10px; color: var(--ok); }

@media (max-width: 700px) {
  .compare-grid { display: none; }
  .supplier-cards { display: flex; flex-direction: column; }
}

/* ------------------------------------------------ supplier samples */

/* A round of pieces a supplier sent, inside that supplier's column. Closed
   unless it is waiting on a verdict, so a column with six rounds stays a
   column; the one that needs you is the one that is open. */
.compare .cell.rounds-cell { flex-direction: column; align-items: stretch; gap: 8px; }
.round { border: 1px solid var(--rule-soft); border-radius: 3px; background: var(--surface); }
.round.round-waiting { border-color: var(--warn-rule); }
.round > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap;
                   align-items: center; gap: 6px 8px; padding: 10px 12px; min-height: 44px; }
.round > summary::-webkit-details-marker { display: none; }
.round > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.round-no { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.round-when { font-size: 12px; color: var(--muted); }
.round-body { padding: 4px 12px 12px; display: flex; flex-direction: column; gap: 10px;
              border-top: 1px solid var(--rule-soft); }
.round-asked { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px;
               line-height: 1.45; white-space: pre-line; }
.designs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.design { padding: 10px 0; border-bottom: 1px solid var(--rule-soft);
          display: flex; flex-direction: column; gap: 6px; }
.design:last-child { border-bottom: none; }
.design-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.design-name { font-size: 14px; }
.design-variant { font-size: 12.5px; color: var(--muted); }
.design .price { font-family: "Azeret Mono", monospace; font-size: 13px;
                 font-variant-numeric: tabular-nums; }
.design-meta { font-size: 10px; letter-spacing: .06em; color: var(--faint); }
/* Not `.verdict`: the gate page's Go, Hold and Reject buttons already carry it. */
.sample-verdict { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap;
                  font-size: 12.5px; line-height: 1.4; }
.sample-verdict .who { font-size: 10px; color: var(--faint); }

/* Keep, correct, drop: one tap each, a finger's height, the one already given
   marked by its border as well as its colour. */
.verdict-form { display: flex; flex-direction: column; gap: 6px; }
.verdict-form input { border: 1px solid var(--rule); border-radius: 3px; padding: 9px 10px;
                      font: inherit; font-size: 13px; min-height: 44px; background: var(--surface); }
.verdict-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.verdict-buttons .btn { flex: 1 1 0; }
.verdict-buttons .btn.on { border: 1.5px solid var(--accent); color: var(--accent);
                           background: var(--accent-soft); }

.shots { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.shot { width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: 3px;
        background: var(--surface-2); display: inline-flex; align-items: center;
        justify-content: center; cursor: pointer; color: var(--accent); }
.shot:hover { border-color: var(--accent); }
.round-actions { display: flex; flex-direction: column; gap: 4px; }
.round-body .row-form input, .round-body .row-form select, .round-body .stack-form textarea {
  border: 1px solid var(--rule); border-radius: 3px; padding: 9px 10px; font: inherit;
  font-size: 13px; min-height: 44px; background: var(--surface); }
.stack-form { display: flex; flex-direction: column; gap: 8px; }
.card-rounds { display: flex; flex-direction: column; gap: 8px; }

/* The log form: a design, its variant and its price, kept on one line. */
.design-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 96px;
              gap: 10px; max-width: 820px; }
/* A grid cell will not shrink below its input's own width unless told to, and
   in the drawer that pushed the price off the edge. */
.design-row .field { min-width: 0; }
.design-row .field input { width: 100%; }
@media (max-width: 700px) {
  .design-row { grid-template-columns: 1fr 1fr; }
  .design-row .field.narrow { grid-column: 1 / -1; }
}

/* The Suppliers page: a supplier's rounds under its row. */
.rounds-row td { background: #FAFBF8; padding: 4px 14px 14px; }
.rounds-of > summary { cursor: pointer; font-size: 12.5px; color: var(--accent);
                       padding: 10px 0; min-height: 44px; display: flex; align-items: center; }
.rounds-list { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }

/* ------------------------------------------------- pictures on their way up */

/* How much has gone and roughly how long is left, because a control that says
   SENDING… and nothing else cannot be told apart from one that has died. The
   bar is the app's own meter, thinner: this sits under a 104px tile rather
   than across a panel, and it moves linearly because it is reporting a rate
   rather than settling on a figure. */
.meter.meter-thin { height: 4px; border-radius: 2px; }
.meter.meter-thin .fill { border-radius: 2px; }
.fill-sending { width: 0; background: var(--accent);
                transition: width .18s linear; }
@media (prefers-reduced-motion: reduce) { .fill-sending { transition: none; } }

.sending { display: flex; flex-direction: column; gap: 5px; padding: 8px 0 2px; }
.sending-what { font-size: 10px; letter-spacing: .06em; color: var(--muted);
                padding: 6px 0 0; display: block; }
.sending-what.is-bad { color: var(--bad); }

/* Where a picture may be let go. The whole block takes it, not only the ADD
   square — 104px is a small target on a trackpad and a miss used to open the
   picture in place of the page. */
[data-drop].dropping { outline: 2px dashed var(--accent); outline-offset: 5px;
                       border-radius: 3px; }
[data-drop].dropping .thumb-add { border-color: var(--accent); color: var(--accent);
                                  background: var(--accent-soft); }

/* Held while a picture is going up: changing the filter rebuilds the rows, and
   a row rebuilt under an upload takes the progress with it. Shown as held
   rather than silently ignoring the click. */
body.is-uploading [data-holds],
body.is-refreshing [data-holds] { opacity: .45; pointer-events: none; }
.sending-done { align-self: flex-start; background: none; border: none; padding: 5px 0;
                font-size: 10px; letter-spacing: .08em; color: var(--muted);
                cursor: pointer; font-family: "Azeret Mono", monospace;
                text-decoration: underline; min-height: 32px; }
.sending-done:hover { color: var(--ink); }