/* =========================================================================
   dour back office
   =========================================================================

   This stylesheet is the opposite of `dour.css` in every way that matters, and
   deliberately so. That file is the origin's own compiled CSS, taken whole,
   never re-derived — it is the shopper's design and it is not ours to invent.
   This one is written from nothing, because the back office has no origin: it
   is a room that never existed on the live site.

   It is loaded ONLY by the admin's root layout. Nothing here can reach a
   storefront route, and no Bootstrap or Odoo rule can reach in.

   ------------------------------------------------------------------------
   The idea

   The plan's strongest claim is that stock is a ledger and not a number: "a
   count answers how many; it cannot answer why is this three." Everything
   below follows from that.

     - Colour is reserved. There is no brand blue, no primary purple, no
       accent for decoration. The only saturated colour in the entire back
       office is stock truth and order state, so a coloured pixel always
       means something. Buttons are ink on paper.

     - Three states, not two. `counted` / `never counted` / `none left` each
       get their own colour, their own mark and their own word, because
       "nobody has looked at this" is not zero and the schema goes to some
       trouble to keep them apart.

     - The movement strip (§8) is the signature: wherever a count appears, the
       ledger that produced it appears beside it. You cannot see a number in
       this room without seeing where it came from.

   ------------------------------------------------------------------------
   The type

     Bricolage Grotesque  display — page titles, graph counts. Used sparingly.
     Instrument Sans      interface — labels, prose, controls, table text.
     DM Mono              data — SKUs, references, timestamps, deltas, money.

   Every stack that can carry money ends in Noto Sans Bengali, because the
   currency symbol is BENGALI RUPEE MARK (U+09F3) and no Latin face has it.
   It appears 210 times in the capture. Without the fallback every price in
   this room renders a tofu box.
   ========================================================================= */


/* ============================================================ 1. tokens == */

:root {
  color-scheme: light;

  /* Ground. Cool and slightly grey-green: a working surface under strip
     lighting, not the warm paper of something meant to be read for pleasure. */
  --paper:      #eaeef2;
  --card:       #ffffff;
  --sunk:       #e0e6ec;
  --rail:       #171c23;
  --rail-ink:   #aeb8c4;
  --rail-hot:   #ffffff;

  --ink:        #12161c;
  --ink-2:      #3f4854;
  --ink-3:      #667283;
  --faint:      #93a0b0;

  --line:       #d3dae1;
  --line-2:     #c0c9d3;

  /* The three states of stock. The only saturated colour in the product. */
  --counted:      #0f6b57;
  --counted-wash: #dcece7;
  --unknown:      #9a5a12;
  --unknown-wash: #f5e9d8;
  --empty:        #93342a;
  --empty-wash:   #f5e2df;

  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-ui:      "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-data:    "DM Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* Anything that can hold a price. */
  --f-money:   "DM Mono", ui-monospace, Consolas, "Noto Sans Bengali", monospace;

  --rail-w: 212px;
  --bar-h:  46px;

  --shadow: 0 1px 2px rgb(18 22 28 / .06), 0 4px 14px -6px rgb(18 22 28 / .10);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:      #0d1116;
    --card:       #151a21;
    --sunk:       #1c222b;
    --rail:       #090c10;
    --rail-ink:   #8b96a4;
    --rail-hot:   #ffffff;

    --ink:        #e7ecf2;
    --ink-2:      #b3bdca;
    --ink-3:      #8592a2;
    --faint:      #616e7e;

    --line:       #262d37;
    --line-2:     #38414e;

    --counted:      #4fb495;
    --counted-wash: #13302a;
    --unknown:      #d69a41;
    --unknown-wash: #2f2717;
    --empty:        #d4705f;
    --empty-wash:   #331d1a;

    --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 4px 14px -6px rgb(0 0 0 / .6);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0d1116; --card: #151a21; --sunk: #1c222b;
  --rail: #090c10; --rail-ink: #8b96a4; --rail-hot: #ffffff;
  --ink: #e7ecf2; --ink-2: #b3bdca; --ink-3: #8592a2; --faint: #616e7e;
  --line: #262d37; --line-2: #38414e;
  --counted: #4fb495; --counted-wash: #13302a;
  --unknown: #d69a41; --unknown-wash: #2f2717;
  --empty: #d4705f; --empty-wash: #331d1a;
  --shadow: 0 1px 2px rgb(0 0 0 / .5), 0 4px 14px -6px rgb(0 0 0 / .6);
}


/* ============================================================== 2. base == */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.011em; }

img { max-width: 100%; display: block; }

:focus-visible {
  outline: 2px solid var(--counted);
  outline-offset: 2px;
  border-radius: 2px;
}

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

/* Micro-label. The workhorse of the whole room: every field, column and
   section is introduced by one, and they are the only uppercase text here. */
.lbl {
  font-family: var(--f-data);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mono { font-family: var(--f-data); font-size: .92em; }
.dim  { color: var(--ink-3); }
.faint { color: var(--faint); }


/* ============================================================ 3. shell === */

.shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: 100vh;
}

/* -- the rail ------------------------------------------------------------ */

.rail {
  background: var(--rail);
  color: var(--rail-ink);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.rail-mark {
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 16px;
  border-bottom: 1px solid rgb(255 255 255 / .07);
  flex: none;
}
.rail-mark b {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--rail-hot);
}
.rail-mark span {
  font-family: var(--f-data);
  font-size: 9.5px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: #5d6a7a;
}

.rail-nav { padding: 10px 0; flex: 1 1 auto; }

.rail-link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  font-size: 13px;
  color: var(--rail-ink);
  border-left: 2px solid transparent;
}
.rail-link:hover { background: rgb(255 255 255 / .045); color: var(--rail-hot); text-decoration: none; }
.rail-link[aria-current="page"] {
  color: var(--rail-hot);
  background: rgb(255 255 255 / .06);
  border-left-color: var(--counted);
  font-weight: 600;
}

/* The count beside a nav item is work waiting for hands, not a total. */
.rail-count {
  font-family: var(--f-data);
  font-size: 10.5px;
  min-width: 20px;
  text-align: center;
  padding: 1px 5px;
  border-radius: 2px;
  background: rgb(255 255 255 / .09);
  color: #c5cedb;
}
.rail-count[data-tone="unknown"] { background: var(--unknown); color: #1b1305; font-weight: 600; }
.rail-count[data-tone="empty"]   { background: var(--empty);   color: #fff; font-weight: 600; }

.rail-sep {
  margin: 12px 16px 8px;
  padding-top: 12px;
  border-top: 1px solid rgb(255 255 255 / .08);
}

/* The three-state legend lives in the rail permanently, so the colour code is
   learnable rather than mysterious — it is the vocabulary of the whole room. */
.legend { padding: 0 16px 16px; display: grid; gap: 6px; }
.legend-row {
  display: grid;
  grid-template-columns: 10px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #7c8899;
}
.legend-key { width: 10px; height: 10px; border-radius: 2px; }
.legend-key[data-state="counted"]      { background: var(--counted); }
.legend-key[data-state="never-counted"]{ background: transparent; border: 1px dashed var(--unknown); }
.legend-key[data-state="none-left"]    { background: var(--empty); }

.rail-who {
  padding: 12px 16px;
  border-top: 1px solid rgb(255 255 255 / .07);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.rail-who b { display: block; color: var(--rail-hot); font-size: 12.5px; font-weight: 600; }
.rail-who span { font-family: var(--f-data); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #5d6a7a; }

/* Its own button rather than `.btn`: that one is drawn for the light page and
   goes invisible against the rail. */
.rail-out {
  font: inherit;
  font-size: 11px;
  color: #8b98a8;
  background: transparent;
  border: 1px solid rgb(255 255 255 / .12);
  border-radius: 5px;
  padding: 4px 8px;
  cursor: pointer;
}
.rail-out:hover { color: var(--rail-hot); border-color: rgb(255 255 255 / .28); }

/* -- the bar and the page ------------------------------------------------ */

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

.bar {
  height: var(--bar-h);
  flex: none;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  position: sticky;
  top: 0;
  z-index: 20;
}

.crumb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-3); min-width: 0; }
.crumb b { color: var(--ink); font-weight: 600; }
.crumb i { font-style: normal; color: var(--line-2); flex: none; }
/* Product names run long and variant trails run longer. The trail truncates
   from the end rather than being clipped by the bar, so what survives is the
   part that tells you where you are. */
.crumb b, .crumb a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.crumb a { flex: 0 1 auto; }
.crumb b:last-of-type { flex: 1 1 auto; }

.page { padding: 24px 22px 72px; max-width: 1360px; width: 100%; }

.head { margin-bottom: 20px; }
.head h1 {
  font-family: var(--f-display);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -.024em;
  line-height: 1.12;
}
.head p { margin: 5px 0 0; color: var(--ink-3); font-size: 13.5px; max-width: 68ch; }

.head-split { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }


/* ============================================================ 4. cards === */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
}

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line);
}
.card-head h2 { font-family: var(--f-display); font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }

.card-body { padding: 15px; }

.grid { display: grid; gap: 16px; }
.grid.two   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.side  { grid-template-columns: minmax(0, 1fr) 336px; align-items: start; }

/* A column of cards. */
.col { display: grid; gap: 16px; min-width: 0; }

/* Grid and flex children are `min-width: auto` by default, which means the
   widest thing inside — a table with a min-width, a long SKU, an unbroken
   reference — sets the width of its container instead of scrolling inside it.
   One wide table then widens its card, its column, the page and the document,
   and every screen picks up a horizontal scrollbar. Every layout box in here
   opts out, so the designed scrollers (.tw, .graph, .rail) are the only things
   that ever scroll sideways. */
.grid > *, .col > *, .card, .card-body, .t-wrap, .tw, .main, .rail { min-width: 0; }


/* =========================================================== 5. tables === */

.tw { overflow-x: auto; }

table.t {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

table.t th {
  position: sticky;
  top: var(--bar-h);
  z-index: 5;
  background: var(--card);
  text-align: left;
  font-family: var(--f-data);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}

table.t td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  color: var(--ink-2);
}

table.t tbody tr:hover td { background: var(--sunk); }
table.t tbody tr:last-child td { border-bottom: 0; }

table.t td.n, table.t th.n { text-align: right; font-family: var(--f-money); }
table.t td.k { color: var(--ink); font-weight: 600; }
table.t td.m { font-family: var(--f-data); font-size: 12px; color: var(--ink-3); white-space: nowrap; }

.t-wrap { background: var(--card); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }

/* An empty table is an invitation, not a shrug. */
.empty { padding: 44px 20px; text-align: center; color: var(--ink-3); }
.empty b { display: block; color: var(--ink); font-size: 14.5px; font-weight: 600; margin-bottom: 4px; font-family: var(--f-display); }
.empty p { margin: 0 auto; max-width: 44ch; font-size: 13px; }


/* ============================================================ 6. money === */

.money { font-family: var(--f-money); font-variant-numeric: tabular-nums; white-space: nowrap; }
.money .sym { color: var(--ink-3); margin-left: .28em; font-size: .95em; }
.money.big { font-family: var(--f-display); font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.money.big .sym { font-family: var(--f-money); font-size: 13px; font-weight: 400; }

/* The net/VAT breakdown under a gross. Prices are tax-inclusive at 10% and
   every money surface has to know which side of the tax it is on. */
.split { display: grid; gap: 2px; margin-top: 6px; }
.split-row { display: flex; justify-content: space-between; gap: 14px; font-size: 11.5px; color: var(--ink-3); }
.split-row span:last-child { font-family: var(--f-money); }


/* =========================================================== 7. states === */

/* The word and the mark for one of the three stock states. Always both: the
   colour is the fast read and the word is the one that survives a photocopier,
   a projector, or a reader who does not see the difference. */
.state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--f-data);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 2px 7px 2px 6px;
  border-radius: 2px;
  border: 1px solid transparent;
}
.state::before { content: ""; width: 7px; height: 7px; border-radius: 1px; flex: none; }

.state[data-state="counted"]       { color: var(--counted); background: var(--counted-wash); }
.state[data-state="counted"]::before { background: var(--counted); }

.state[data-state="none-left"]     { color: var(--empty); background: var(--empty-wash); }
.state[data-state="none-left"]::before { background: var(--empty); }

/* Outlined, not filled — the honest look of a row that does not exist yet. */
.state[data-state="never-counted"] { color: var(--unknown); background: transparent; border-color: var(--unknown); border-style: dashed; }
.state[data-state="never-counted"]::before { background: transparent; border: 1px dashed var(--unknown); }

/* Order status. Ink by default; only the two terminal states take colour,
   because those are the ones you cannot walk back. */
.status {
  display: inline-block;
  font-family: var(--f-data);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 2px;
  background: var(--sunk);
  color: var(--ink-2);
  white-space: nowrap;
}
.status[data-status="placed"]    { background: var(--ink); color: var(--card); }
.status[data-status="delivered"] { background: var(--counted-wash); color: var(--counted); }
.status[data-status="cancelled"] { background: var(--empty-wash); color: var(--empty); }
.status[data-status="refunded"]  { background: var(--empty-wash); color: var(--empty); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 2px;
  background: var(--sunk);
  color: var(--ink-2);
  white-space: nowrap;
}
.chip .sw { width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgb(0 0 0 / .22); flex: none; }


/* ================================================== 8. the movement strip */

/* THE SIGNATURE.

   Wherever a count appears, the ledger that produced it appears beside it.
   Each bar is one movement: above the centre rule is stock arriving, below is
   stock leaving, and the colour is the reason. Oldest at the left.

   A variant nobody has counted has no bars at all and says so — the strip
   renders as an empty dashed well rather than a flat line, because a flat
   line reads as "nothing happened" and the truth is "nobody has looked". */

.strip {
  --strip-h: 26px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  height: var(--strip-h);
  min-width: 58px;
  padding: 0 3px;
}

/* The centre rule: the line movements are measured from. */
.strip::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 1px;
  background: var(--line-2);
  pointer-events: none;
}

.strip-bar {
  position: relative;
  z-index: 1;
  width: 4px;
  border-radius: 1px;
  flex: none;
  /* --h is set inline from |delta|; --dir is 1 for in, -1 for out. */
  height: var(--h, 4px);
  align-self: center;
  transform: translateY(calc(var(--dir, 1) * -0.5 * (var(--h, 4px) + 1px)));
}

.strip-bar[data-reason="opening_count"] { background: var(--ink-3); }
.strip-bar[data-reason="receipt"]       { background: var(--counted); }
.strip-bar[data-reason="return"]        { background: var(--counted); opacity: .55; }
.strip-bar[data-reason="sale"]          { background: var(--ink-3); opacity: .8; }
.strip-bar[data-reason="adjustment"]    { background: var(--unknown); }
.strip-bar[data-reason="damage"]        { background: var(--empty); }

.strip.is-empty {
  border: 1px dashed var(--unknown);
  border-radius: 2px;
  opacity: .75;
}
.strip.is-empty::after { display: none; }

/* The strip's own key, shown once per page rather than beside every strip. */
.strip-key { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.strip-key div { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-3); }
.strip-key i { width: 4px; height: 12px; border-radius: 1px; font-style: normal; flex: none; }


/* ================================================ 9. the order state graph */

/* The front door. `ORDER_TRANSITIONS` drawn as itself, with live counts in the
   nodes — the table that governs the business, rather than a row of tiles. */

.graph { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 4px 0 2px; }

.gnode {
  flex: 1 1 0;
  min-width: 116px;
  background: var(--card);
  border: 1px solid var(--line);
  border-right: 0;
  padding: 13px 14px 12px;
  display: block;
  position: relative;
}
.gnode:first-child { border-radius: 3px 0 0 3px; }
.gnode:last-of-type { border-right: 1px solid var(--line); border-radius: 0 3px 3px 0; }
.gnode:hover { background: var(--sunk); text-decoration: none; }
.gnode[aria-current="true"] { background: var(--sunk); box-shadow: inset 0 2px 0 var(--counted); }

.gnode .n {
  font-family: var(--f-display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--ink);
  display: block;
}
.gnode .l {
  font-family: var(--f-data);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 6px;
  display: block;
}
.gnode.zero .n { color: var(--faint); }

/* The arrow between two nodes, drawn in the border gap. */
.gnode + .gnode::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -4.5px;
  background: var(--card);
  border-top: 1px solid var(--line-2);
  border-right: 1px solid var(--line-2);
  transform: rotate(45deg);
  z-index: 2;
}

/* The two terminal states hang off the run rather than continuing it. */
.graph-ends {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.gend {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  border: 1px dashed var(--line-2);
  border-radius: 3px;
  color: var(--ink-3);
  font-size: 12px;
  flex: none;
}
.gend b { font-family: var(--f-display); font-size: 16px; font-weight: 700; color: var(--ink-2); }
.gend:hover { background: var(--card); text-decoration: none; }

.graph-note {
  margin: 0;
  flex: 1 1 22ch;
  min-width: 0;
  font-size: 12px;
  color: var(--faint);
  max-width: 54ch;
}


/* ========================================================== 10. controls = */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--f-ui);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 13px;
  border-radius: 2px;
  border: 1px solid var(--line-2);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, transform .04s ease;
}
.btn:hover { background: var(--sunk); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* Ink, not a brand colour. The one strong button on a screen is strong by
   being the only filled thing on it. */
.btn.solid { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.solid:hover { background: var(--ink-2); border-color: var(--ink-2); }

.btn.quiet { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.quiet:hover { background: var(--sunk); color: var(--ink); }

.btn.danger { color: var(--empty); border-color: var(--empty); }
.btn.danger:hover { background: var(--empty-wash); }

.btn.sm { font-size: 11.5px; padding: 5px 9px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* -- fields -------------------------------------------------------------- */

.field { display: grid; gap: 5px; }
.field > .lbl { display: block; }

.input, .select, .textarea {
  font-family: var(--f-ui);
  font-size: 13px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-2);
  border-radius: 2px;
  padding: 7px 9px;
  width: 100%;
  min-width: 0;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--counted); outline-offset: 1px; }
.input.num { font-family: var(--f-money); text-align: right; }
.textarea { resize: vertical; min-height: 68px; }

.hint { font-size: 11.5px; color: var(--ink-3); }

/* -- filter bar ---------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  margin-bottom: 14px;
}
.pill {
  font-family: var(--f-ui);
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 2px;
  border: 1px solid var(--line-2);
  background: var(--card);
  color: var(--ink-2);
}
.pill:hover { background: var(--sunk); text-decoration: none; }
.pill[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 600; }
.pill .c { font-family: var(--f-data); font-size: 10.5px; color: var(--ink-3); margin-left: 5px; }
.pill[aria-current="true"] .c { color: rgb(255 255 255 / .6); }


/* =========================================================== 11. history = */

/* An order's event log. Every move records who made it — a back-office
   decision is not something to infer from the current status. */
.hist { display: grid; gap: 0; }
.hist-row {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 14px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}
.hist-row:first-child { border-top: 0; }
.hist-when { font-family: var(--f-data); font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.hist-what { font-size: 12.5px; color: var(--ink-2); }
.hist-what b { color: var(--ink); font-weight: 600; }
.hist-note { display: block; margin-top: 2px; color: var(--ink-3); font-size: 12px; }


/* ============================================================ 12. detail = */

.kv { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 6px 14px; font-size: 13px; }
.kv dt { color: var(--ink-3); font-size: 11.5px; padding-top: 1px; }
.kv dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }

/* The four-level cascade, shown as four levels. Flattening it to one line is
   how the precision the courier is priced on gets lost. */
.cascade { display: grid; gap: 3px; }
.cascade-row { display: grid; grid-template-columns: 62px 1fr; gap: 10px; font-size: 12.5px; align-items: baseline; }
.cascade-row .lbl { font-size: 9.5px; }
.cascade-row b { font-weight: 500; color: var(--ink); }

.thumb {
  width: 34px; height: 34px;
  object-fit: cover;
  border-radius: 2px;
  background: var(--sunk);
  border: 1px solid var(--line);
  flex: none;
}

.stack { display: flex; align-items: center; gap: 10px; min-width: 0; }
.stack > div { min-width: 0; }
.stack b { display: block; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stack span { font-family: var(--f-data); font-size: 11px; color: var(--ink-3); }

.note {
  border-left: 2px solid var(--unknown);
  background: var(--unknown-wash);
  padding: 10px 13px;
  border-radius: 0 2px 2px 0;
  font-size: 12.5px;
  color: var(--ink-2);
}
.note b { color: var(--ink); font-weight: 600; }
.note.plain { border-left-color: var(--line-2); background: var(--sunk); }


/* ========================================================== 13. sign-in == */

.gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--rail);
}
.gate-card {
  width: 100%;
  max-width: 348px;
  background: var(--card);
  border-radius: 4px;
  padding: 28px;
  box-shadow: var(--shadow);
}
.gate-mark { display: flex; align-items: baseline; gap: 8px; margin-bottom: 20px; }
.gate-mark b { font-family: var(--f-display); font-size: 21px; font-weight: 700; letter-spacing: -.03em; }
.gate-mark span { font-family: var(--f-data); font-size: 9.5px; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-3); }
.gate form { display: grid; gap: 13px; }
.gate .btn { width: 100%; padding: 10px; }


/* ========================================================= 14. responsive */

@media (max-width: 1080px) {
  .grid.side, .grid.three { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding-right: 10px;
    /* A grid item is `min-width: auto` by default, so without this the row of
       links sets the width of the whole page instead of scrolling inside the
       rail — and every screen picks up a horizontal scrollbar it does not
       want. The track being minmax(0, 1fr) is not enough on its own. */
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .rail-mark { flex: none; }
  .rail-mark { border-bottom: 0; border-right: 1px solid rgb(255 255 255 / .07); }
  .rail-nav { display: flex; padding: 0; flex: 0 0 auto; }
  .rail-link { border-left: 0; border-bottom: 2px solid transparent; padding: 12px 12px; }
  .rail-link[aria-current="page"] { border-left-color: transparent; border-bottom-color: var(--counted); }
  .rail-sep, .legend, .rail-who { display: none; }
  .grid.two { grid-template-columns: minmax(0, 1fr); }
  /* The label beside a card's title is a caption, not a second heading — at
     this width it drops under rather than squeezing the title into two lines. */
  .card-head { flex-direction: column; align-items: flex-start; gap: 3px; }
  .page { padding: 18px 14px 56px; }
  .bar { padding: 0 14px; }
  table.t th { top: 0; }
  .kv { grid-template-columns: 92px minmax(0, 1fr); }
}

/* -- search ---------------------------------------------------------------- */

.search {
  display: flex;
  gap: 6px;
  align-items: center;
  max-width: 520px;
  margin: 0 0 14px;
}
.search .input { flex: 1; min-width: 0; }