/* ============================================================================
   AOS · THE LISTENING POST

   One idea, carried through every screen: this machine listens to the Indian
   trade press continuously, across ten channels, and turns noise into named
   people. It is drawn as an instrument in a dark room, not as a dashboard.

   Two rules hold the whole system together:

     GOLD MEANS A LEAD. Nothing else in the interface may use it. Every gold
     mark on any screen is something worth acting on; everything else is
     structure. This is why the spectrum reads instantly.

     POPPINS IS THE CHROME, PLEX MONO IS THE MEASUREMENT. If it is set in
     Poppins it is a label a person wrote; if it is monospaced it is a number
     the machine produced. You can tell them apart without reading.

   Poppins is GSIQ's own typeface — the one gsiq.com sets everything in. The
   monospace has no counterpart on the website because a marketing site has no
   tables; here it is doing real work and stays.

   Committed single look. Every colour is painted explicitly so the page holds
   whatever ground the browser puts behind it.
   ========================================================================== */

:root {
  /* ── GSIQ brand ────────────────────────────────────────────────────────
     Read from gsiq.com's own stylesheet rather than eyeballed:

       --awb-color1 #ffffff   the page background: the site is LIGHT
       --awb-color7 #130f59   the deep indigo its feature bands use, ten times
                              on the homepage — the brand's dark surface
       --awb-color6 #2a2e4b   body text colour
       --awb-color2 #001ed4   electric blue accent
       --awb-color4 #ed1c24   red
       Poppins throughout

     A console is stared at for hours and is not a marketing page, so it stays
     dark — but dark in the brand's own indigo rather than a black of my
     choosing. Every surface below is #130f59 lightened or darkened, so the
     screen sits in the same colour world as the website's dark bands.

     #001ed4 is unusable as text on this ground — it fails contrast badly — so
     the accent is lifted to #4d6dff. An unreadable brand colour serves nobody.

     What has NOT changed is the signal set. Gold still means a lead, teal
     still means verified and reachable, red is now the brand's own #ed1c24.
     Brand colours say whose tool this is; signal colours say what to do next,
     and the two must stay different alphabets. */
  /* PAPER.
     AOS stopped putting mail on the wire. It prepares a letter and hands it
     over; a person presses Send in their own mail client. Nobody watches this
     screen for hours any more — they visit it, collect what is ready and leave,
     which is the entire reason the dark instrument face was chosen and the
     entire reason it no longer applies.

     The neutral is a cool white biased toward the brand indigo. Not cream: warm
     paper says stationery and hand-lettering, and this is a working desk.

     The signal set is unchanged in meaning and re-cut for a light ground, where
     a colour must be DARKER than its surroundings to carry weight rather than
     brighter. Blue is now the one bold thing on the screen and means exactly
     one thing: your move. */
  --void:  #f7f7fb;   /* the desk */
  --deep:  #ffffff;   /* a sheet on it */
  --panel: #ffffff;   /* raised sections */
  --lift:  #eeeef6;   /* hover, tooltips */
  --rule:  #e0e0ec;
  --rule2: #f0f0f7;
  /* The brand indigo, kept for the two places that carry the identity — the
     masthead and the sign-in — and now used as ink rather than as a ground. */
  --brand: #ffffff;

  --ink:   #151046;   /* GSIQ indigo, deepened just enough to hold as text */
  --ink2:  #5a5f8c;
  --ink3:  #8b8fb3;
  --ink4:  #b9bcd4;

  --gold:  #9c6500;   /* A LEAD. Reserved. Amber that survives a white ground. */
  --gold-d:#fdf2dd;
  --cyan:  #1d6f5e;   /* live, verified, reachable, running */
  --cyan-d:#e3f3ef;
  --blue:  #1b2ad6;   /* the brand's #001ed4. YOUR MOVE. The only bold thing. */
  --blue-d:#e8ebff;
  --red:   #b3151c;   /* the brand's red, darkened to hold: stopped, refused */
  --red-d: #fdeced;

  /* Three registers, because the product has three. Newsreader sets the letters
     — you read what the recipient reads, which is the only reliable way to
     notice it sounds wrong. Archivo is the chrome. The mono stays for data: a
     number the machine measured must not look like a label a person wrote. */
  --mono:   "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --disp:   Archivo, "Helvetica Neue", Arial, sans-serif;
  --letter: Newsreader, Georgia, "Times New Roman", serif;

  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0; background: var(--void); color: var(--ink);
  font-family: var(--disp); font-size: 13px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--gold); color: var(--void); }

/* scrollbars, so they belong to the instrument rather than the OS */
* { scrollbar-width: thin; scrollbar-color: var(--rule) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--rule); border: 2px solid var(--void); border-radius: 9px; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink4); }

/* ── shell ─────────────────────────────────────────────────────────────── */
.shell { display: flex; flex-direction: column; min-height: 100vh; }

/* the instrument bar — every reading, always, never scrolled away */
.bar {
  display: flex; align-items: stretch; flex-wrap: wrap;
  background: var(--brand); border-bottom: 1px solid var(--rule);
  color: var(--ink);
  position: sticky; top: 0; z-index: 50;
}
.bar .mk {
  padding: 10px 17px; border-right: 1px solid var(--rule);
  font-family: var(--disp); font-size: 20px; font-weight: 700;
  letter-spacing: .1em; line-height: 1; white-space: nowrap;
  display: flex; flex-direction: column; gap: 3px;
}
.bar .mk small {
  font-family: var(--mono); font-size: 7.5px; letter-spacing: .3em;
  color: var(--ink3); font-weight: 400;
}
.cell {
  padding: 10px 15px; border-right: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: 4px; min-width: 84px;
}
.cell .k { font-size: 8px; letter-spacing: .2em; color: var(--ink3); white-space: nowrap; }
.cell .v {
  font-family: var(--disp); font-size: 19px; font-weight: 600;
  letter-spacing: .02em; line-height: 1; color: var(--ink);
  display: flex; align-items: center; gap: 7px;
}
.cell.click { cursor: pointer; }
.cell.click:hover { background: var(--panel); }
.v.gold { color: var(--gold); } .v.cyan { color: var(--cyan); }
.v.red  { color: var(--red); }  .v.dim  { color: var(--ink2); }
.sp { flex: 1; }
.bar .who {
  padding: 10px 17px; border-left: 1px solid var(--rule);
  display: flex; align-items: center; gap: 11px;
  font-size: 9.5px; letter-spacing: .12em; color: var(--ink3);
}
.bar .who a { color: var(--blue); text-decoration: none; }
.bar .who a:hover { color: var(--cyan); }

.led { width: 7px; height: 7px; border-radius: 50%; background: var(--ink4); flex: 0 0 7px; }
.led.on   { background: var(--cyan); box-shadow: 0 0 7px var(--cyan); }
.led.hold { background: var(--gold); box-shadow: 0 0 7px var(--gold); }
.led.off  { background: var(--red); box-shadow: 0 0 7px var(--red); }
@media (prefers-reduced-motion: no-preference) {
  .led.on { animation: pulse 2.4s ease-in-out infinite; }
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .28 } }

/* The rail is sticky and therefore only as tall as itself. Painting its column
   into the body means a short screen still reads as one continuous instrument
   face rather than a panel floating on nothing. */
.body {
  display: flex; flex: 1; min-height: 0;
  background: linear-gradient(to right,
    var(--deep) 0 163px, var(--rule) 163px 164px, var(--deep) 164px);
}

/* ── channel rail ──────────────────────────────────────────────────────── */
.rail {
  width: 164px; flex: 0 0 164px; background: var(--deep);
  border-right: 1px solid var(--rule); padding: 6px 0;
  position: sticky; top: var(--barh, 56px); align-self: flex-start;
  max-height: calc(100vh - var(--barh, 56px)); overflow-y: auto;
}
.rail a {
  display: flex; align-items: center; gap: 10px; padding: 7px 14px;
  text-decoration: none; color: var(--ink2); border-left: 2px solid transparent;
}
.rail a .k { font-size: 9.5px; color: var(--ink4); width: 8px; }
.rail a .t {
  flex: 1; font-family: var(--disp); font-size: 16px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
}
.rail a .n { font-size: 9.5px; font-weight: 500; color: var(--ink3); }
.rail a:hover { background: var(--panel); color: var(--ink); }
.rail a.on { background: var(--panel); color: var(--ink); border-left-color: var(--gold); }
.rail a.on .t { color: var(--ink); }
.rail a .n.alert { color: var(--gold); }
.rail .grp {
  font-size: 8px; letter-spacing: .28em; color: var(--ink4);
  padding: 14px 14px 5px;
}

.main { flex: 1; min-width: 0; background: var(--deep); }

/* ── section head — a labelled rule, never a card ──────────────────────── */
.ph {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  padding: 9px 18px; background: var(--panel);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.ph h2 {
  font-family: var(--disp); font-size: 16px; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; margin: 0; color: var(--ink);
}
.ph .n { font-size: 9.5px; letter-spacing: .1em; color: var(--ink3); }
.ph .sp { flex: 1; }

.pane { background: var(--deep); }
.split { display: flex; align-items: stretch; }
.split > .l { flex: 1; min-width: 0; border-right: 1px solid var(--rule); }
.split > .r { width: 344px; flex: 0 0 344px; }
@media (max-width: 1200px) {
  .split { display: block; }
  .split > .l { border-right: 0; }
  .split > .r { width: auto; border-top: 1px solid var(--rule); }
}

/* ── first run ─────────────────────────────────────────────────────────
   Somebody opening this for the first time is told what to do, in order, and
   the strip disappears on its own once they have done it. A tool that assumes
   you already know how to use it is a tool nobody new ever uses. */
.start { background: var(--panel); border-bottom: 1px solid var(--rule); padding: 15px 18px; }
.start .h2 {
  font-family: var(--disp); font-size: 19px; font-weight: 600; letter-spacing: .05em;
  color: var(--gold); margin-bottom: 4px;
}
.start .sub2 { font-size: 11.5px; color: var(--ink2); margin-bottom: 13px; max-width: 74ch; line-height: 1.6; }
.start ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.start li { display: flex; gap: 12px; align-items: baseline; font-size: 12px; color: var(--ink2); }
.start li .n2 {
  width: 19px; height: 19px; flex: 0 0 19px; display: grid; place-items: center;
  font-size: 10px; background: var(--rule2); color: var(--ink3);
}
.start li.done .n2 { background: var(--cyan-d); color: var(--cyan); }
.start li.done { color: var(--ink4); text-decoration: line-through; }
.start li b { color: var(--ink); font-weight: 600; }
.start li a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-d); }
.start .dismiss {
  margin-top: 13px; font-size: 10px; letter-spacing: .1em; color: var(--ink4);
  background: none; border: 0; cursor: pointer; padding: 0;
}
.start .dismiss:hover { color: var(--ink2); }

/* An empty instrument should be a line, not a blank third of the screen. */
.spectrum.quiet .canvaswrap { display: none; }
.spectrum.quiet .quietline {
  padding: 0 18px 15px; font-size: 11.5px; color: var(--ink3); line-height: 1.6;
}
.spectrum.quiet .quietline a { color: var(--gold); text-decoration: none; }

/* ── THE SPECTRUM ──────────────────────────────────────────────────────── */
.spectrum { background: var(--deep); border-bottom: 1px solid var(--rule); position: relative; }
.spechead { display: flex; align-items: baseline; gap: 15px; flex-wrap: wrap; padding: 15px 18px 9px; }
.spechead h1 {
  font-family: var(--disp); font-size: 27px; font-weight: 700;
  letter-spacing: .06em; margin: 0; line-height: 1;
}
.spechead .sub { font-size: 10px; color: var(--ink3); letter-spacing: .07em; }
.spechead .sp { flex: 1; }
.key { display: flex; gap: 13px; flex-wrap: wrap; }
.key span { display: flex; align-items: center; gap: 6px; font-size: 9px; color: var(--ink3); letter-spacing: .08em; }
.key i { width: 7px; height: 7px; border-radius: 50%; display: block; }

.canvaswrap { position: relative; padding: 0 18px 14px; }
#spec { display: block; width: 100%; height: 262px; cursor: crosshair; }
@media (max-width: 860px) { #spec { height: 200px; } }

.lanes { position: absolute; left: 0; top: 0; width: 172px; pointer-events: none; font-size: 9px; }
.lanes div { display: flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--ink3); letter-spacing: .03em; }
.lanes i { width: 3px; height: 10px; display: block; flex: 0 0 3px; }

#tip {
  position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; z-index: 30;
  background: var(--lift); border: 1px solid var(--rule);
  padding: 9px 12px; max-width: 340px; transition: opacity .12s;
  font-size: 11px; line-height: 1.5;
}
#tip .co { font-family: var(--disp); font-size: 15px; font-weight: 600; letter-spacing: .05em; }
#tip .tt { color: var(--ink2); margin-top: 3px; }
#tip .wy { color: var(--ink3); margin-top: 4px; font-style: italic; }
#tip .mt { font-size: 8.5px; letter-spacing: .14em; margin-top: 6px; }

/* ── tables ────────────────────────────────────────────────────────────── */
.tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.tbl th {
  text-align: left; font-family: var(--mono); font-weight: 400;
  font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink3); padding: 7px 13px; background: var(--panel);
  border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.tbl td { padding: 9px 13px; border-bottom: 1px solid var(--rule2); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: var(--panel); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .dim { color: var(--ink3); }
.tbl .nowrap { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.tbl .name { font-family: var(--disp); font-size: 15px; font-weight: 600; letter-spacing: .04em; color: var(--ink); }
.scrollx { overflow-x: auto; }

/* ── fit score — the machine's judgement, always in display face ───────── */
.fit {
  font-family: var(--disp); font-weight: 700; font-size: 19px;
  letter-spacing: .01em; display: inline-block; min-width: 28px; text-align: right;
}
/* The strongest fit is gold, because gold is what the system exists to find.
   Warm is cyan — real, reachable, worth a look. Anything parked recedes. */
.fit.hot  { color: var(--gold); }
.fit.warm { color: var(--cyan); }
.fit.park { color: var(--ink4); }

/* ── chips ─────────────────────────────────────────────────────────────── */
.chip {
  display: inline-block; font-size: 8.5px; letter-spacing: .13em;
  padding: 2px 7px; border: 1px solid var(--ink4); color: var(--ink3);
  text-transform: uppercase; white-space: nowrap;
}
.chip.gold { color: var(--gold); border-color: var(--gold); background: var(--gold-d); }
.chip.cyan { color: var(--cyan); border-color: var(--cyan); background: var(--cyan-d); }
.chip.blue { color: var(--blue); border-color: var(--blue); background: var(--blue-d); }
.chip.red  { color: var(--red);  border-color: var(--red);  background: var(--red-d); }

.st { display: inline-block; font-size: 8.5px; letter-spacing: .13em; padding: 2px 7px;
      background: var(--rule2); color: var(--ink3); }
.st.QUEUED, .st.APPROVED, .st.ACTIVE { background: var(--blue-d); color: var(--blue); }
.st.IN_REVIEW { background: var(--gold-d); color: var(--gold); }
.st.REPLIED, .st.COMPLETED { background: var(--cyan-d); color: var(--cyan); }
.st.STOPPED { background: var(--red-d); color: var(--red); }

/* ── buttons ───────────────────────────────────────────────────────────── */
.b {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: var(--disp); font-size: 14px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; padding: 6px 14px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--panel); color: var(--ink2);
  white-space: nowrap;
}
.b:hover:not(:disabled) { border-color: var(--ink3); color: var(--ink); background: var(--lift); }
.b:disabled { opacity: .35; cursor: default; }
.b.pri  { border-color: var(--gold); color: var(--gold); background: var(--gold-d); }
.b.pri:hover:not(:disabled) { background: var(--gold); color: var(--void); border-color: var(--gold); }
.b.go   { border-color: var(--cyan); color: var(--cyan); background: var(--cyan-d); }
.b.go:hover:not(:disabled) { background: var(--cyan); color: var(--void); }
.b.no   { border-color: var(--rule); color: var(--red); }
.b.no:hover:not(:disabled) { border-color: var(--red); background: var(--red-d); color: var(--red); }
.b.sm   { padding: 3px 9px; font-size: 12px; }
.b:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── inputs ────────────────────────────────────────────────────────────── */
.inp, select.inp {
  font-family: var(--mono); font-size: 11.5px; padding: 6px 10px;
  border: 1px solid var(--rule); background: var(--void); color: var(--ink);
}
.inp:focus { outline: 1px solid var(--gold); outline-offset: -1px; border-color: transparent; }
.filters { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; padding: 9px 18px;
           background: var(--deep); border-bottom: 1px solid var(--rule2); }
.filters .inp { min-width: 170px; }

/* ── acquisitions: the actual output ───────────────────────────────────── */
.row {
  display: flex; align-items: center; gap: 15px;
  padding: 11px 18px; border-bottom: 1px solid var(--rule2);
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--panel); }
.row .who { flex: 1; min-width: 0; }
.row .who .n { font-family: var(--disp); font-size: 17px; font-weight: 600; letter-spacing: .04em; }
.row .who .r { font-size: 10.5px; color: var(--ink3); margin-top: 1px; }
.row .co { font-family: var(--disp); font-size: 14px; letter-spacing: .06em;
           color: var(--ink2); text-align: right; white-space: nowrap; }
.row .co small { display: block; font-family: var(--mono); font-size: 8.5px;
                 color: var(--ink4); letter-spacing: .14em; margin-top: 2px; }

/* ── intercepts: what it heard ─────────────────────────────────────────── */
.icept { padding: 13px 18px; border-bottom: 1px solid var(--rule2); }
.icept:last-child { border-bottom: 0; }
.icept:hover { background: var(--panel); }
.icept .h { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.icept .h .co {
  font-family: var(--disp); font-size: 18px; font-weight: 600; letter-spacing: .05em;
}
.icept .h .co a { color: inherit; text-decoration: none; }
.icept .h .co a:hover { color: var(--gold); }
.icept .s { font-size: 11.5px; color: var(--ink2); margin-top: 6px; line-height: 1.6; }
.icept .p { font-size: 10.5px; color: var(--cyan); margin-top: 6px; letter-spacing: .04em; }
.icept.rej .h .co { color: var(--ink3); font-weight: 500; }
.icept.rej .w { font-size: 11.5px; color: var(--ink3); margin-top: 5px;
                line-height: 1.55; font-style: italic; }

/* ── live job panel ────────────────────────────────────────────────────── */
.live-panel { background: var(--deep); border-bottom: 1px solid var(--rule); }
.live-panel .lh {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 18px; background: var(--panel); border-bottom: 1px solid var(--rule2);
}
.live-panel .lh .k {
  font-family: var(--disp); font-size: 16px; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
}
.live-panel .lh .stage { font-size: 8.5px; letter-spacing: .18em; color: var(--cyan); text-transform: uppercase; }
.live-panel .lh .sp { flex: 1; }
.live-panel .lh .pct { font-family: var(--disp); font-size: 17px; font-weight: 600; color: var(--cyan); }
.live-panel .track { height: 2px; background: var(--rule2); overflow: hidden; }
.live-panel .track i { display: block; height: 100%; background: var(--cyan); transition: width .5s linear; }
@media (prefers-reduced-motion: no-preference) {
  .live-panel .track i.indet { width: 26% !important; animation: sweep 1.5s ease-in-out infinite; }
}
@keyframes sweep { 0% { margin-left: -26% } 100% { margin-left: 100% } }
.live-panel.done .track i { background: var(--ink4); }
.live-panel.done .lh .stage, .live-panel.done .lh .pct { color: var(--ink3); }

.console { font-size: 11px; line-height: 1.75; padding: 10px 18px 12px;
           max-height: 240px; overflow-y: auto; }
.console div { display: flex; gap: 10px; }
.console .t { color: var(--ink4); flex: 0 0 auto; }
.console .s { color: var(--ink2); min-width: 0; white-space: pre-wrap; word-break: break-word; }
.console .s.hit  { color: var(--gold); }
.console .s.miss { color: var(--ink4); }
.console .s.warn { color: var(--red); }
.console div:last-child .s { color: var(--ink); }

/* ── readouts, meters, bars ────────────────────────────────────────────── */
.pad { padding: 14px 18px; }
.big {
  font-family: var(--disp); font-size: 34px; font-weight: 700; letter-spacing: .01em;
  line-height: 1; display: flex; align-items: baseline; gap: 9px;
}
.big small { font-family: var(--mono); font-size: 11.5px; color: var(--ink3); font-weight: 400; }
.lab { font-size: 8px; letter-spacing: .22em; color: var(--ink3); margin-top: 7px; }
.meter { height: 3px; background: var(--rule2); margin-top: 10px; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--cyan); transition: width .4s ease; }
.meter i.mid { background: var(--gold); } .meter i.full { background: var(--red); }

.bar-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.bar-row .k { width: 84px; font-size: 9px; letter-spacing: .13em; color: var(--ink3); }
.bar-row .t { flex: 1; height: 6px; background: var(--rule2); }
.bar-row .t i { display: block; height: 100%; background: var(--blue); }
.bar-row.term .t i { background: var(--ink4); }
.bar-row.good .t i { background: var(--cyan); }
.bar-row.gold .t i { background: var(--gold); }
.bar-row .n { width: 26px; text-align: right; font-family: var(--disp);
              font-size: 14px; font-weight: 600; color: var(--ink2); }

.chart { width: 100%; display: block; }
.chart .grid  { stroke: var(--rule2); stroke-width: 1; }
.chart .cap   { stroke: var(--gold); stroke-width: 1.3; fill: none; stroke-dasharray: 4 3; }
.chart .capf  { fill: var(--gold); opacity: .07; }
.chart .sent  { stroke: var(--cyan); stroke-width: 1.7; fill: none; }
.chart .sentf { fill: var(--cyan); opacity: .09; }
.chart .dot   { fill: var(--cyan); }
.legend { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 9px;
          font-size: 9px; letter-spacing: .1em; color: var(--ink3); }
.legend i { display: inline-block; width: 12px; height: 2px; margin-right: 6px; vertical-align: middle; }
.legend .k1 { background: var(--gold); } .legend .k2 { background: var(--cyan); }

/* ── review card ───────────────────────────────────────────────────────── */
.draft { background: var(--deep); border-bottom: 1px solid var(--rule); }
.draft > .hd {
  display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap;
  padding: 14px 18px; background: var(--panel); border-bottom: 1px solid var(--rule2);
}
.draft .who { flex: 1 1 250px; min-width: 0; }
.draft .who .nm { font-family: var(--disp); font-size: 21px; font-weight: 600; letter-spacing: .04em; }
.draft .who .rl { font-size: 11px; color: var(--ink2); margin-top: 2px; }
.draft .who .em { font-size: 10px; color: var(--ink3); margin-top: 6px; word-break: break-all; }
.draft .bd { padding: 15px 18px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 13px; }

details.why summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px;
  font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3);
  user-select: none;
}
details.why summary::-webkit-details-marker { display: none; }
details.why summary::before { content: "+"; color: var(--gold); }
details.why[open] summary::before { content: "\2212"; }
.why .pn { margin-top: 12px; padding: 13px 15px; background: var(--void);
           border: 1px solid var(--rule2); font-size: 11.5px; color: var(--ink2); line-height: 1.65; }
.why .pn p { margin: 0 0 11px; }
.facts { list-style: none; margin: 0; padding: 0; }
.facts li { padding: 9px 0; border-top: 1px solid var(--rule2); }
.facts li:first-child { border-top: 0; }
.facts .src { font-size: 9.5px; color: var(--ink4); margin-top: 4px; word-break: break-all; }

.prior { border-left: 2px solid var(--blue); background: var(--blue-d);
         padding: 11px 14px; font-size: 11.5px; line-height: 1.65; margin-bottom: 13px; color: var(--ink); }
.prior.dnc { border-left-color: var(--red); background: var(--red-d); }
/* A warm path is the strongest thing on a review card, so it looks it.
   Named .warmpath, not .warm: a fit score in the middle band already carries
   class="fit warm", and a bare .warm rule gave every one of those a border, a
   background and 11px of padding it was never meant to have. */
.warmpath { border-left: 2px solid var(--cyan); background: var(--cyan-d);
            padding: 11px 14px; font-size: 11.5px; line-height: 1.65; margin-bottom: 13px; }
.warmpath b { color: var(--cyan); }
.warmpath .wp { display: flex; gap: 8px; align-items: baseline; margin-top: 5px; }
.warmpath .wp .who2 { color: var(--ink); }
.warmpath.direct { border-left-color: var(--gold); background: var(--gold-d); }
.warmpath.direct b { color: var(--gold); }

.held { border-left: 2px solid var(--red); background: var(--red-d); color: var(--red);
        padding: 11px 14px; font-size: 11.5px; line-height: 1.6; margin-bottom: 13px; }
/* Only the leading <b> is a heading; bold inside the sentence stays inline. */
.held b:first-child { display: block; margin-bottom: 3px; }

label.fl { display: block; font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase;
           color: var(--ink3); margin: 14px 0 6px; }
.draft input[type=text], .draft textarea,
.frm input, .frm textarea, .frm select {
  width: 100%; padding: 9px 11px; border: 1px solid var(--rule);
  background: var(--void); color: var(--ink); font-family: var(--mono);
  font-size: 12px; line-height: 1.65;
}
.draft textarea { min-height: 195px; resize: vertical; }
.draft input:focus, .draft textarea:focus,
.frm input:focus, .frm textarea:focus, .frm select:focus {
  outline: 1px solid var(--gold); outline-offset: -1px; border-color: transparent;
}
.wc { font-size: 9.5px; letter-spacing: .1em; color: var(--ink3); text-align: right; margin-top: 6px; }
.wc.over { color: var(--red); }
.draft .ft { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 18px;
             background: var(--panel); border-top: 1px solid var(--rule2); }
.draft .ft .b { flex: 1 1 140px; padding: 10px 16px; font-size: 15px; }

/* ── forms ─────────────────────────────────────────────────────────────── */
.frm { display: grid; gap: 12px; padding: 16px 18px; }
.frm .fr { display: grid; gap: 5px; }
.frm .fr > label { font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); }
.frm .fr > .hint { font-size: 10.5px; color: var(--ink3); line-height: 1.55; }
.frm textarea { min-height: 80px; resize: vertical; }
.frm .two { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .frm .two { grid-template-columns: 1fr 1fr; } }
.frm .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.frm .title { font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink3); }

/* ── accounts ──────────────────────────────────────────────────────────── */
.urow {
  display: flex; align-items: center; gap: 13px; flex-wrap: wrap;
  padding: 11px 18px; border-bottom: 1px solid var(--rule2);
}
.urow:last-child { border-bottom: 0; }
.urow:hover { background: var(--panel); }
.urow .who { flex: 1 1 220px; min-width: 0; }
.urow .who .n { font-family: var(--disp); font-size: 17px; font-weight: 600; letter-spacing: .04em; }
.urow .who .u { font-size: 10px; color: var(--ink3); letter-spacing: .1em; margin-top: 2px; }
.urow .seen { font-size: 10px; color: var(--ink4); letter-spacing: .06em; white-space: nowrap; }
.urow.off { opacity: .5; }
.urow .acts { display: flex; gap: 6px; flex-wrap: wrap; }

.keyrow { display: grid; grid-template-columns: 1fr; gap: 9px;
          padding: 13px 18px; border-bottom: 1px solid var(--rule2); }
@media (min-width: 780px) { .keyrow { grid-template-columns: 240px 1fr; align-items: start; } }
.keyrow .meta .n { font-family: var(--disp); font-size: 17px; font-weight: 600; letter-spacing: .05em; }
.keyrow .meta .v { font-size: 9px; color: var(--ink4); letter-spacing: .1em; margin-top: 2px; }
.keyrow .meta .h { font-size: 10.5px; color: var(--ink3); margin-top: 5px; line-height: 1.55; }
.keyrow .set { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.keyrow input { flex: 1 1 210px; padding: 8px 11px; border: 1px solid var(--rule);
                background: var(--void); color: var(--ink); font-family: var(--mono); font-size: 11.5px; }

.ruleline { display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
            padding: 9px 18px; border-bottom: 1px solid var(--rule2); }
.ruleline .tx { flex: 1 1 250px; font-size: 12px; min-width: 0; color: var(--ink); }
.ruleline.off .tx { color: var(--ink4); text-decoration: line-through; }

/* ── the watch list, for somebody who has never seen a search operator ──── */
.watch { display: grid; gap: 10px; padding: 15px 18px; grid-template-columns: 1fr; }
@media (min-width: 940px) { .watch { grid-template-columns: 1fr 1fr; } }
.wcard {
  border: 1px solid var(--rule); background: var(--void);
  padding: 13px 15px; display: flex; gap: 13px; align-items: flex-start; cursor: pointer;
}
.wcard:hover { border-color: var(--ink4); }
.wcard.on { border-color: var(--cyan); background: var(--cyan-d); }
.wcard .tick {
  width: 20px; height: 20px; flex: 0 0 20px; border: 1px solid var(--ink4);
  display: grid; place-items: center; font-size: 12px; color: transparent; margin-top: 2px;
}
.wcard.on .tick { border-color: var(--cyan); color: var(--cyan); }
.wcard .b1 { flex: 1; min-width: 0; }
.wcard .t { font-family: var(--disp); font-size: 17px; font-weight: 600; letter-spacing: .04em; }
.wcard.on .t { color: var(--cyan); }
.wcard .d { font-size: 11px; color: var(--ink3); margin-top: 3px; line-height: 1.55; }
.wcard .m { font-size: 9px; letter-spacing: .12em; color: var(--ink4); margin-top: 7px; }
.wcard .m b { color: var(--gold); font-weight: 600; }

.sports { display: flex; flex-wrap: wrap; gap: 7px; padding: 15px 18px; }
.sports button {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  padding: 5px 11px; border: 1px solid var(--rule); background: var(--void);
  color: var(--ink3); cursor: pointer;
}
.sports button:hover { border-color: var(--ink4); color: var(--ink2); }
.sports button.on { border-color: var(--cyan); color: var(--cyan); background: var(--cyan-d); }
.sports button .n { color: var(--gold); margin-left: 5px; font-weight: 600; }

.plainly {
  padding: 14px 18px; font-size: 12px; line-height: 1.7; color: var(--ink2);
  background: var(--panel); border-bottom: 1px solid var(--rule);
}
.plainly b { color: var(--ink); }
.plainly .big2 {
  font-family: var(--disp); font-size: 26px; font-weight: 700; color: var(--cyan);
  letter-spacing: .02em;
}

.mkt { display: flex; gap: 7px; flex-wrap: wrap; padding: 12px 18px;
       background: var(--panel); border-bottom: 1px solid var(--rule); }
.mkt button {
  font-family: var(--disp); font-size: 15px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; padding: 5px 13px; border: 1px solid var(--rule);
  background: var(--deep); color: var(--ink2); cursor: pointer;
}
.mkt button.on { border-color: var(--gold); color: var(--gold); background: var(--gold-d); }
.mkt button.off { opacity: .45; }

/* ── delivery mode ─────────────────────────────────────────────────────
   Two mutually exclusive choices, not a checklist, so they get their own
   shape: side by side, the live one marked, the other holding the switch. */
.modes { display: grid; gap: 12px; padding: 15px 18px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .modes { grid-template-columns: 1fr 1fr; } }
.mode {
  border: 1px solid var(--rule); background: var(--void);
  padding: 15px 16px; display: flex; flex-direction: column; gap: 9px;
}
.mode.on { border-color: var(--gold); background: var(--gold-d); }
.mode .mh { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.mode .mt {
  font-family: var(--disp); font-size: 19px; font-weight: 600; letter-spacing: .05em;
}
.mode.on .mt { color: var(--gold); }
.mode .md { font-size: 11.5px; color: var(--ink2); line-height: 1.65; flex: 1; }
.mode .mn { font-size: 10.5px; color: var(--ink3); line-height: 1.6; }
.mode .b { align-self: flex-start; }

.setup { padding: 6px 18px 14px; }
.setup .step { display: grid; grid-template-columns: 22px 1fr; gap: 12px;
               padding: 10px 0; border-bottom: 1px solid var(--rule2); align-items: start; }
.setup .step .k { width: 20px; height: 20px; display: grid; place-items: center;
                  font-size: 10px; background: var(--rule2); color: var(--ink3); }
.setup .step.done .k { background: var(--cyan-d); color: var(--cyan); }
.setup .step .t { font-family: var(--disp); font-size: 16px; font-weight: 600; letter-spacing: .05em; }
.setup .step .d { font-size: 10.5px; color: var(--ink3); margin-top: 3px; line-height: 1.55; }

/* ── audit feed ────────────────────────────────────────────────────────── */
.feed .fi { display: grid; grid-template-columns: 62px 118px 1fr; gap: 12px;
            padding: 5px 18px; border-bottom: 1px solid var(--rule2); align-items: baseline; }
.feed .fi:last-child { border-bottom: 0; }
.feed .fi:hover { background: var(--panel); }
.feed .fi .t { font-size: 9.5px; color: var(--ink4); }
.feed .fi .e { font-size: 10px; letter-spacing: .06em; color: var(--blue);
               overflow: hidden; text-overflow: ellipsis; }
.feed .fi .d { font-size: 10.5px; color: var(--ink3); min-width: 0; word-break: break-word; }
.feed .fi.err .e { color: var(--red); }
.feed .fi.win .e { color: var(--gold); }

.winrow { padding: 12px 18px; border-bottom: 1px solid var(--rule2); }
.winrow .wh { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.winrow .wt { font-size: 11.5px; color: var(--ink2); margin-top: 6px; line-height: 1.6; }

.rank { display: inline-grid; place-items: center; width: 22px; height: 22px;
        font-family: var(--disp); font-size: 13px; font-weight: 700;
        background: var(--rule2); color: var(--ink3); }
.rank.g1 { background: var(--gold-d); color: var(--gold); }
.rank.g2 { background: var(--cyan-d); color: var(--cyan); }
.rate { font-family: var(--disp); font-size: 15px; font-weight: 600; color: var(--ink); }
.rate.thin { color: var(--ink3); font-weight: 500; }
.rate .of { font-family: var(--mono); color: var(--ink4); font-size: 9.5px; font-weight: 400; }
.caveat { font-size: 10.5px; color: var(--ink3); line-height: 1.65;
          padding: 12px 18px; background: var(--panel); border-top: 1px solid var(--rule2); }

.empty { text-align: center; padding: 64px 20px; color: var(--ink3); font-size: 11.5px; letter-spacing: .06em; }
.empty .bg { font-family: var(--disp); font-size: 26px; color: var(--cyan); margin-bottom: 8px; letter-spacing: .1em; }

#toast {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(16px);
  bottom: calc(20px + env(safe-area-inset-bottom));
  background: var(--gold); color: var(--void); padding: 10px 17px;
  font-family: var(--disp); font-size: 15px; font-weight: 600; letter-spacing: .06em;
  opacity: 0; transition: .16s; pointer-events: none; z-index: 90; max-width: 88vw;
}
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.bad { background: var(--red); color: #fff; }

/* ── sign in ───────────────────────────────────────────────────────────── */
.signin { max-width: 400px; margin: 15vh auto 0; padding: 0 20px; }
.signin .box { background: var(--brand); border: 1px solid var(--rule); padding: 28px; }
.signin .mk { font-family: var(--disp); font-size: 27px; font-weight: 700; letter-spacing: .1em; }
.signin .sb { font-size: 8px; letter-spacing: .34em; color: var(--ink3); margin: 5px 0 24px; }
.signin label { display: block; font-size: 8.5px; letter-spacing: .2em;
                text-transform: uppercase; color: var(--ink3); margin: 14px 0 6px; }
.signin input { width: 100%; padding: 9px 11px; border: 1px solid var(--rule);
                background: var(--void); color: var(--ink); font-family: var(--mono); font-size: 12px; }
.signin input:focus { outline: 1px solid var(--gold); outline-offset: -1px; }
.signin .b { width: 100%; margin-top: 18px; padding: 11px; font-size: 15px; }
.err { color: var(--red); font-size: 10.5px; margin-top: 10px; min-height: 15px; }

/* ── mobile ────────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .body { display: block; background: var(--deep); }
  .rail { width: auto; position: static; max-height: none; display: flex; gap: 2px;
          overflow-x: auto; padding: 5px; border-right: 0; border-bottom: 1px solid var(--rule); }
  .rail .grp { display: none; }
  .rail a { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; }
  .rail a.on { border-left: 0; border-bottom-color: var(--gold); }
  .rail a .k { display: none; }
  .bar .mk { font-size: 16px; padding: 8px 13px; }
  .spechead h1 { font-size: 21px; }
}

/* ── the flow deck ──────────────────────────────────────────────────────────
   The home screen. Eight tiles, one per stage of the pipeline, in the order
   work actually moves through it.

   Every tile carries the same three rows in the same order — doing, done,
   waiting — because a person who has read one tile has then read all eight.
   The left stripe is the state and is legible before any number is.

   Gold has exactly one job here: the machine has stopped and is waiting for a
   person. Nothing else on this screen may use it. That is what lets somebody
   glance at the deck from across the room and know whether they are needed. */
.deck { display: grid; gap: 12px; padding: 0 18px 20px;
        grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1180px) { .deck { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 900px)  { .deck { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px)  { .deck { grid-template-columns: minmax(0,1fr); } }

.tile { position: relative; display: flex; flex-direction: column; gap: 9px;
        background: var(--panel); border: 1px solid var(--rule);
        padding: 12px 13px 11px 15px; color: inherit; text-decoration: none;
        transition: background .13s ease, border-color .13s ease; }
.tile:hover { background: var(--lift); border-color: var(--ink4); }
.tile:focus-visible { outline: 1px solid var(--gold); outline-offset: -1px; }

.tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0;
                width: 2px; background: var(--ink4); }
.tile.run::before  { background: var(--cyan); }
.tile.you::before  { background: var(--gold); }
.tile.stop::before { background: var(--red); }

.tile .tt { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tile .tn { font-size: 8.5px; letter-spacing: .22em; text-transform: uppercase;
            color: var(--ink3); padding-top: 3px; }
.tile .tp { font-size: 8px; letter-spacing: .14em; text-transform: uppercase;
            padding: 3px 7px; white-space: nowrap;
            background: var(--rule2); color: var(--ink4); border: 1px solid var(--rule); }
.tile .tp.run  { background: var(--cyan-d); color: var(--cyan); border-color: var(--cyan); }
.tile .tp.you  { background: var(--gold-d); color: var(--gold); border-color: var(--gold); }
.tile .tp.stop { background: var(--red-d);  color: var(--red);     border-color: var(--red); }

.tile .tb { font-family: var(--disp); font-size: 32px; font-weight: 600; line-height: 1;
            font-variant-numeric: tabular-nums; }
.tile.you .tb { color: var(--gold); }
.tile .tb .u { font-family: var(--mono); font-size: 10px; font-weight: 400;
               color: var(--ink3); margin-left: 6px; }

.tile dl { display: flex; flex-direction: column; gap: 4px; margin: auto 0 0; }
.tile .f  { display: grid; grid-template-columns: 60px 1fr; gap: 8px; align-items: baseline; }
.tile dt  { font-size: 7.5px; letter-spacing: .16em; text-transform: uppercase;
            color: var(--ink4); white-space: nowrap; }
.tile dd  { margin: 0; font-size: 10.5px; color: var(--ink2); }
.tile dd b { color: var(--ink); font-weight: 500; }
.tile dd.you { color: var(--gold); }

/* The one-line verdict above the deck. It says whether anybody is needed at
   all, so the answer is available without reading eight tiles. */
.verdict { padding: 2px 18px 16px; font-size: 11.5px; color: var(--ink2); }
.verdict b { color: var(--gold); font-weight: 500; }
.verdict.clear b { color: var(--cyan); }

/* ── the desk ───────────────────────────────────────────────────────────────
   The home screen, rebuilt around what AOS became.

   It sends nothing. It prepares a letter and hands it over, and a person
   presses Send with their own name on it. So the screen opens with the work
   and the machinery reports in underneath — five quiet lines, past tense.

   The letter is set AS a letter: serif, reading width, real leading. You are
   looking at what the recipient will look at, which is the only reliable way to
   notice it sounds wrong. A monospaced textarea actively hides that. */
.desk { max-width: 780px; padding: 0 18px 60px; }

/* The standing line. It answers "does anything need me?" in a sentence, before
   a single number is read. */
.standing { padding: 34px 0 6px; }
.standing h1 {
  font-family: var(--letter); font-weight: 300; font-size: 31px; line-height: 1.25;
  margin: 0 0 7px; letter-spacing: -.01em; text-wrap: balance;
}
.standing h1 b { font-weight: 500; }
.standing p { margin: 0; color: var(--ink2); font-size: 13.5px; max-width: 58ch; }

/* A labelled hairline, not a card title — same instrument grammar as before. */
.dsec { margin: 38px 0 15px; display: flex; align-items: baseline; gap: 12px; }
.dsec h2 { font-family: var(--disp); font-size: 10.5px; font-weight: 600; margin: 0;
           letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.dsec .ln { flex: 1; height: 1px; background: var(--rule); }
.dsec .ct { font-family: var(--mono); font-size: 11px; color: var(--ink3); }

.letter { background: var(--deep); border: 1px solid var(--rule); margin-bottom: 15px; }
/* Ready to go out gets the one bold colour in the system. Nothing else may. */
.letter.ready { border-color: var(--blue); box-shadow: 0 1px 0 var(--blue); }

.letter .lh { padding: 15px 20px 12px; border-bottom: 1px solid var(--rule2);
              display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.letter .who { flex: 1; min-width: 190px; }
.letter .nm { font-family: var(--disp); font-weight: 600; font-size: 14.5px; }
.letter .rl { color: var(--ink2); font-size: 12.5px; }
.letter .rl em { font-style: normal; color: var(--ink); }
.letter .ad { font-family: var(--mono); font-size: 11px; color: var(--ink3); margin-top: 2px; }
.letter .fit { text-align: right; }
.letter .fit .n { font-family: var(--disp); font-weight: 600; font-size: 23px; line-height: 1;
                  font-variant-numeric: tabular-nums; }
.letter .fit .l { font-family: var(--mono); font-size: 9px; letter-spacing: .14em;
                  text-transform: uppercase; color: var(--ink3); }

.letter .lb { padding: 20px 20px 4px; }
.letter .sub { font-family: var(--letter); font-size: 18px; font-weight: 400;
               margin: 0 0 12px; line-height: 1.3; text-wrap: balance; }
.letter .body { font-family: var(--letter); font-weight: 300; font-size: 16px;
                line-height: 1.72; max-width: 62ch; color: var(--ink);
                white-space: pre-wrap; }
.letter .body .opt { color: var(--ink3); font-style: italic; }

/* The guardrail, made visible. The rule is that a personalisation claim without
   a dossier fact behind it never sends; putting the fact under the sentence it
   justifies turns that from something trusted into something checked. */
.letter .src { margin: 4px 20px 0; padding: 10px 13px; background: var(--lift);
               border-left: 2px solid var(--cyan); font-size: 12px; color: var(--ink2); }
.letter .src b { display: block; font-family: var(--disp); font-size: 10px; font-weight: 600;
                 letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
                 margin-bottom: 3px; }

.letter .lf { padding: 15px 20px; display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.letter .lf .age { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--ink3); }
.letter .hint { margin: 0 20px 15px; font-size: 12px; color: var(--ink3); max-width: 62ch; }

/* Decisions and machinery share one row grammar: label, sentence, timing. */
.strip { background: var(--deep); border: 1px solid var(--rule); }
.strip .row { display: grid; grid-template-columns: 118px 1fr auto; gap: 15px;
              align-items: baseline; padding: 10px 17px;
              border-bottom: 1px solid var(--rule2); color: inherit; text-decoration: none; }
.strip .row:last-child { border-bottom: 0; }
.strip a.row:hover { background: var(--lift); }
.strip .st { font-family: var(--disp); font-size: 10.5px; font-weight: 600;
             letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.strip .sy { color: var(--ink2); font-size: 13px; }
.strip .sy b { color: var(--ink); font-weight: 600; }
.strip .nu { font-family: var(--mono); font-size: 11px; color: var(--ink3);
             font-variant-numeric: tabular-nums; white-space: nowrap; }
.strip .row.act .st, .strip .row.act .nu { color: var(--blue); }
.strip .row.bad .st, .strip .row.bad .nu { color: var(--red); }

@media (max-width: 620px) {
  .strip .row { grid-template-columns: 1fr; gap: 3px; }
  .strip .nu { grid-column: 1; }
}