/* ==========================================================================
   Careivo — signed-in app shell
   Shares the token set in site.css. This file only lays out the product.
   Body class is `portal` (not `app`: the marketing hero mockup owns `.app`).
   ========================================================================== */

/* --- The press palette, for a tool ----------------------------------------

   The signed-in app is the same system as the printed sheet, so it is set in
   the same inks. It is NOT the landing page: nothing here carries grain,
   texture or a photograph. A chemist reads these screens for eight hours, and
   noise behind a column of figures is noise in the figures.

   Two rules the marketing pages already run on, tightened for a tool:

     · #D8261A is 4.10:1 on cream. It may be a plate, a bar or a rule, and it
       may carry the ONE thing on a screen that needs acting on. Every other red
       mark is oxblood #7E1410, which is 8.66:1 and can be read at 10px.
     · A state is not an alert. "Delivered" is the end of a happy sequence and
       gets ink, not red.

   Everything below remaps the app's existing semantic tokens rather than
   rewriting six hundred lines of component CSS, so a panel, a table or a chip
   keeps its shape and changes only its ink. */

body.portal {
  --paper:     #F2E8D5;
  --paper-d:   #E7D9BF;
  --red:       #D8261A;
  --oxblood:   #7E1410;

  --bg-alt:    #E7D9BF;   /* the ground the panels sit on */
  --surface:   #F2E8D5;   /* a panel: the sheet itself */
  --surface-2: #EFE1C8;

  /* Measured on the rendered grounds, not calculated against pure paper: the
     panels sit a shade off it, so the real figures are a little lower. */
  --ink:   #1C1310;       /* 15.03:1 */
  --ink-2: #3A2B25;       /*  9.71:1 */
  --ink-3: #63504A;       /*  5.43:1 — the floor, and it carries the 10px labels */

  --line:   #C6B191;      /* a hairline, not a border */
  --line-2: #DCCCAE;

  --brand:     #D8261A;
  --brand-600: #98180F;
  --brand-700: #7E1410;   /* the red that is allowed to carry text */
  --brand-200: #C9A98F;
  --brand-50:  #EFDFC6;

  --rose:    #7E1410;  --rose-lt:    #EFDFC6;
  --amber:   #6B5312;  --amber-lt:   #E3D3A9;
  --apricot: #8A3512;  --apricot-lt: #EDDCC2;

  --plate-800: #1C1310; --plate-700: #2A1D18; --plate-600: #3E2B24;
  --plate:     #57403A; --plate-400: #7A635A; --plate-300: #B4A18E;



  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--bg-alt);
  overflow: visible;
}

/* --- Sidebar ------------------------------------------------------------ */

.side {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--line);
  padding: 1.25rem 1rem;
}
.side__brand {
  font-family: var(--font-display); font-weight: 900; font-size: 1.4375rem;
  letter-spacing: -0.035em; color: var(--ink); padding: .25rem .5rem;
}
.side__role {
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); padding: 0 .5rem; margin: .125rem 0 1.25rem;
}
.side__nav { display: flex; flex-direction: column; gap: .125rem; }
.side__nav a {
  display: flex; align-items: center; gap: .625rem;
  padding: .625rem .75rem; border-radius: 3px;
  font-size: .9375rem; font-weight: 600; color: var(--ink-2);
}
.side__nav a svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.side__nav a:hover { background: var(--bg-alt); color: var(--ink); }
.side__nav a.is-active { background: var(--brand-50); color: var(--brand-700); }
.side__nav a .count {
  margin-left: auto; font-family: var(--font-mono); font-size: .6875rem; font-weight: 600;
  background: var(--brand-600); color: #fff; border-radius: 3px; padding: .0625rem .4375rem;
}
.side__user {
  margin-top: auto; padding: .875rem .75rem 0; border-top: 1px solid var(--line);
  font-size: .875rem;
}
.side__user b { display: block; }
.side__user small { display: block; color: var(--ink-3); margin-bottom: .5rem; }
.side__logout {
  font: inherit; font-size: .8125rem; font-weight: 600; color: var(--ink-2);
  background: none; border: 1px solid var(--line); border-radius: 3px; padding: .375rem .75rem; cursor: pointer;
}
.side__logout:hover { border-color: var(--ink-3); color: var(--ink); }

/* --- Main ----------------------------------------------------------------- */

.main { padding: 1.75rem clamp(1.25rem, 3vw, 2.5rem) 3rem; min-width: 0; }
.topbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.topbar h1 { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.03em; }
.topbar p { color: var(--ink-2); margin-top: .25rem; }
.topbar__actions { display: flex; gap: .625rem; flex-wrap: wrap; }

.notice {
  border-radius: var(--r-sm); padding: .8125rem 1rem; margin-bottom: 1rem;
  font-size: .9375rem; border: 1px solid var(--line); background: var(--surface);
}
.notice--warn, .notice--warning { background: var(--amber-lt); border-color: #F5D7B0; color: #7A4A0B; }
.notice--success { background: var(--brand-50);  border-color: var(--brand-200); color: var(--brand-700); }
.notice--error   { background: var(--rose-lt);  border-color: var(--rose); color: var(--rose); }
.notice--info    { background: var(--surface-2); }

/* --- KPI tiles ------------------------------------------------------------ */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1.125rem 1.25rem; box-shadow: var(--sh-sm); }
.kpi__label { font-size: .8125rem; color: var(--ink-2); margin-bottom: .375rem; }
.kpi__value { font-family: var(--font-display); font-size: 1.75rem; font-weight: 900; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi__hint { font-size: .75rem; color: var(--ink-3); margin-top: .375rem; }

/* --- Panels & tables ------------------------------------------------------ */

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-sm); margin-bottom: 1.25rem; overflow: hidden; }
.panel__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .875rem 1.125rem; border-bottom: 1px solid var(--line); }
.panel__head h2 { font-size: 1.0625rem; letter-spacing: -0.02em; }
.panel__body { padding: 1.125rem; }
.panel__empty { padding: 2rem 1.125rem; text-align: center; color: var(--ink-2); }
.panel__empty b { display: block; color: var(--ink); margin-bottom: .25rem; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; align-items: start; }

.tbl-wrap { overflow-x: auto; position: relative; }
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th {
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500; text-align: left; padding: .625rem 1.125rem;
  border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface-2);
}
.tbl td { padding: .75rem 1.125rem; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--surface-2); }
.tbl .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tbl .muted { color: var(--ink-3); font-size: .8125rem; }
.tbl a.row-link { color: var(--brand-700); font-weight: 600; }
.tbl .is-best td { background: var(--brand-50); }

.pill {
  display: inline-block; font-family: var(--font-mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 3px;
  background: var(--bg-alt); color: var(--ink-2); white-space: nowrap;
}
.pill--placed, .pill--uploaded, .pill--reading   { background: var(--amber-lt); color: var(--amber); }
.pill--accepted, .pill--confirmed, .pill--packed { background: #E0ECFF; color: #1D4ED8; }
.pill--dispatched, .pill--out_for_delivery       { background: #EDE9FE; color: #6D28D9; }
.pill--delivered, .pill--verified                { background: var(--brand-50); color: var(--brand-700); }
.pill--cancelled, .pill--rejected                { background: var(--rose-lt); color: var(--rose); }

/* --- Forms & buttons inside the app --------------------------------------- */

/* A button is a plate with a keyline, like the ENTER cell on the gate — not a
   gradient with a soft corner. The primary one is the only oxblood field on a
   screen, which is what makes it findable. */
.portal .btn,
.rider .btn {
  border-radius: 0; font-family: var(--font-mono); font-size: .75rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.portal .btn--primary,
.rider .btn--primary {
  background: var(--oxblood); color: var(--paper);
  border: 2px solid var(--oxblood); box-shadow: none;
}
.portal .btn--primary:hover,
.rider .btn--primary:hover { background: var(--ink); border-color: var(--ink); }
.portal .btn--ghost,
.rider .btn--ghost {
  background: transparent; color: var(--ink); border: 2px solid var(--ink); box-shadow: none;
}
.portal .btn--ghost:hover,
.rider .btn--ghost:hover { background: var(--ink); color: var(--paper); box-shadow: none; }
.portal .btn--danger,
.rider .btn--danger {
  background: transparent; color: var(--oxblood); border: 2px solid var(--oxblood);
}
.portal .btn--danger:hover,
.rider .btn--danger:hover { background: var(--oxblood); color: var(--paper); }
.btn--sm { padding: .5rem .875rem; font-size: .8125rem; }
.btn--danger { background: var(--rose-lt); color: var(--rose); border-color: var(--rose); }
.inline-form { display: inline; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .875rem; }
.form-stack { display: flex; flex-direction: column; gap: 1rem; max-width: 34rem; }
.searchbar { display: flex; gap: .625rem; }
.searchbar .field-input { flex: 1; }

.qty-inline { display: inline-flex; align-items: center; gap: .25rem; }
.qty-inline input { width: 4.5rem; text-align: center; font-family: var(--font-mono); padding: .375rem .5rem; border: 1px solid var(--line); border-radius: 3px; font: inherit; }

/* --- Timeline (order status) --------------------------------------------- */

.steps-line { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; }
.steps-line li { flex: 1; position: relative; padding-top: 1.125rem; font-size: .8125rem; color: var(--ink-3); text-align: center; }
.steps-line li::before { content: ""; position: absolute; top: .25rem; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--line); transform: translateX(-50%); }
.steps-line li::after { content: ""; position: absolute; top: .55rem; left: 50%; width: 100%; height: 2px; background: var(--line); z-index: -1; }
.steps-line li:last-child::after { display: none; }
.steps-line li.done { color: var(--brand-700); font-weight: 600; }
.steps-line li.done::before, .steps-line li.done::after { background: var(--brand-600); }

/* --- Prescription lines --------------------------------------------------- */

.rxline { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; padding: .875rem 0; border-bottom: 1px solid var(--line-2); }
.rxline:last-child { border-bottom: 0; }
.rxline b { display: block; }
.rxline small { font-family: var(--font-mono); font-size: .75rem; color: var(--ink-3); }
/* A confidence is not a warning. 98% is the reader doing its job, and printing
   it in the same ink as 74% wastes the one colour that should mean "look here".
   High reads quiet; only a line the reader is unsure of takes the red. */
.conf { font-family: var(--font-mono); font-size: .75rem; font-weight: 600; color: var(--ink-3); }
.conf--low { color: var(--brand-700); font-weight: 700; }

/* --- Auth pages ----------------------------------------------------------- */

body.auth { background: var(--bg-alt); display: block; }
.auth__wrap { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; }
.auth__card { width: 100%; max-width: 27rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 2rem; }
.auth__brand { font-family: var(--font-display); font-weight: 900; font-size: 1.375rem; letter-spacing: -0.035em; margin-bottom: 1.25rem; display: block; color: var(--ink); }
.auth__card h1 { font-size: 1.5rem; margin-bottom: .375rem; }
.auth__lead { color: var(--ink-2); font-size: .9375rem; margin-bottom: 1.25rem; }
.auth__alt { text-align: center; font-size: .875rem; color: var(--ink-2); margin-top: 1.125rem; }
.auth__alt a { color: var(--brand-700); font-weight: 600; }

/* --- Narrow ------------------------------------------------------------- */

@media (max-width: 860px) {
  body.portal { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; border-right: 0; border-bottom: 1px solid var(--line); padding: .75rem 1rem; }
  .side__role { display: none; }
  .side__nav { flex-direction: row; flex-wrap: wrap; gap: .25rem; }
  .side__nav a { padding: .5rem .625rem; font-size: .875rem; }
  .side__user { margin-top: 0; margin-left: auto; padding: 0; border: 0; display: flex; align-items: center; gap: .625rem; }
  .side__user small { display: none; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  }

/* --- Entry pages: three doors ------------------------------------------- */

.gate { width: 100%; max-width: 62rem; }
.gate h1 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: .375rem; }
.gate__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.gate__card {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.5rem; box-shadow: var(--sh-sm); color: var(--ink);
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease, border-color .18s ease;
}
.gate__card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); border-color: var(--brand-200); }
.gate__card b { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -0.03em; }
.gate__card span { font-size: .9375rem; color: var(--ink-2); }
.gate__card em { font-style: normal; font-weight: 700; color: var(--brand-700); margin-top: auto; padding-top: .5rem; }
.gate__icon { width: 44px; height: 44px; border-radius: 4px; display: grid; place-items: center; background: var(--brand-50); margin-bottom: .25rem; }
.gate__icon svg { width: 22px; height: 22px; color: var(--brand-600); }
.gate__card--patient .gate__icon { background: var(--brand-50); }
.gate__card--pharmacy .gate__icon { background: #EDE7E2; }  .gate__card--pharmacy .gate__icon svg { color: #1F1E1C; }
.gate__card--distributor .gate__icon { background: var(--apricot-lt, #FFEDE5); } .gate__card--distributor .gate__icon svg { color: var(--apricot, #FF8256); }
.gate__card--pharmacy:hover { border-color: #D6CCC4; } .gate__card--distributor:hover { border-color: #FFD2C2; }

.auth__role {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-700); background: var(--brand-50); border-radius: 3px; padding: .3rem .75rem .3rem .5rem; margin-bottom: 1rem;
}
.auth__role svg { width: 15px; height: 15px; }
.auth__role--pharmacy { background: #EDE7E2; color: #1F1E1C; }
.auth__role--distributor { background: var(--apricot-lt, #FFEDE5); color: #B4471F; }

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

/* ==========================================================================
   Procurement — H01 / H02 / H03 / H04 / H05
   The rate card is the object. Everything here is a table with a name above
   it: no cards, no tiles, no rounded containers. Numbers are mono and
   tabular so columns of PTR read as a column and not as prose.
   ========================================================================== */

.pr__sub { color: var(--ink-2); }
.n { text-align: right; }

/* --- The field (H01 / H02) ----------------------------------------------- */

.pr__search {
  margin-bottom: 2rem; max-width: 46rem;
  --x-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.pr__label {
  display: block; font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .5rem;
}
.pr__input {
  width: 100%; font: inherit; font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  font-weight: 500; letter-spacing: -0.02em; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 0; padding: .875rem 1rem;
}
.pr__input::placeholder { color: var(--ink-3); font-weight: 400; }
/* WebKit paints its own blue cross here. Redraw it in the page's own ink. */
.pr__input::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; cursor: pointer; background: var(--ink-3);
  -webkit-mask: var(--x-mark) center / 14px no-repeat;
          mask: var(--x-mark) center / 14px no-repeat;
}
.pr__input:focus { outline: none; border-color: var(--plate-600); background: var(--paper); }
.pr__hint { font-size: .8125rem; color: var(--ink-3); margin-top: .5rem; }

/* --- One molecule, every distributor's rate ------------------------------ */

.mol { margin-bottom: 2.25rem; }
.mol__head {
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
  padding-bottom: .625rem; border-bottom: 2px solid var(--ink);
}
.mol__ref, .grp__ref, .rate__ref, .opt__ref {
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em;
  color: var(--ink-3); white-space: nowrap;
}
.mol__name { font-size: 1.25rem; letter-spacing: -0.025em; }
.mol__meta { margin-left: auto; font-family: var(--font-mono); font-size: .8125rem; color: var(--ink-2); }
/* `position: relative` is not decoration. These wrappers hold tables that
   contain `.vh` labels, and `.vh` is position:absolute. A static scroller
   does not clip an absolutely-positioned descendant, so the containing
   block fell through to an ancestor OUTSIDE the scroller and a 1px
   screen-reader label landed 128px past the viewport — stretching the
   document sideways on every phone while the scroller itself measured
   correctly. Positioning the wrapper brings them back inside. */
.mol__scroll { overflow-x: auto; position: relative; }
.mol__absent {
  padding: 1.25rem 0; font-size: .9375rem; color: var(--ink-2);
  border-bottom: 1px solid var(--line-2);
}

.rate { width: 100%; border-collapse: collapse; font-size: .9375rem; }
/* Fixed layout so PTR lands in the same place in every distributor's table.
   A column of prices that jogs sideways per group cannot be read as a column. */
.cartgrid .rate, .rev .rate { table-layout: fixed; }
.cartgrid .rate th:nth-child(1), .rev .rate th:nth-child(1) { width: 42%; }
.cartgrid .rate th:nth-child(2), .rev .rate th:nth-child(2) { width: 13%; }
.cartgrid .rate th:nth-child(3), .rev .rate th:nth-child(3) { width: 13%; }
.cartgrid .rate th:nth-child(4), .rev .rate th:nth-child(4) { width: 11%; }
.cartgrid .rate th:nth-child(5), .rev .rate th:nth-child(5) { width: 21%; }
.cartgrid .rate th:nth-child(5) { width: 12%; }
.cartgrid .rate th:nth-child(6) { width: 9%; }
.rate th {
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  text-align: left; padding: .625rem .75rem; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.rate th.n { text-align: right; }
.rate td { padding: .75rem; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.rate td.n {
  text-align: right; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.rate__firm { min-width: 12rem; }
.rate__ref { display: block; }
.rate__ptr { font-weight: 600; color: var(--ink); }
.rate__line { font-weight: 600; }
.rate__was { color: var(--ink-3); text-decoration: line-through; }
.rate__scheme, .rate__eta, .rate__stock { color: var(--ink-2); }

/* The cheapest rate in stock. Marked in words as well as in colour, because
   colour alone is not a statement. */
.rate tr.is-lowest td { background: var(--brand-50); }
.rate__mark {
  display: inline-block; margin-left: .5rem;
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .06em; color: var(--brand-700);
}
/* Out of stock. The row stays, and the PTR stays legible: a pharmacist still
   needs to know what this distributor charges when it comes back. */
.rate tr.is-out .rate__firm,
.rate tr.is-out .rate__scheme,
.rate tr.is-out .rate__eta,
.rate tr.is-out .rate__stock { color: var(--ink-3); }
.rate tr.is-out .rate__ptr { color: var(--ink-2); }
/* Lowest PTR and optimise are different questions, and an offer can be the
   lowest listed price while having no stock. The row keeps the words, because
   the price is a fact; it loses the fill, because the fill reads as an
   endorsement and there is nothing here to endorse. */
.rate tr.is-lowest.is-out td { background: none; }

/* Requested quantity against the quantity the distributor lists. Neither the
   cart nor checkout enforces this, so it is stated, not styled as an error. */
.rate__gap {
  display: inline-block; margin-top: .3125rem; padding-left: .5rem;
  border-left: 2px solid var(--brand);
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .03em;
  color: var(--ink-2);
}

.rate__qty {
  width: 4.25rem; font: inherit; font-family: var(--font-mono); font-size: .875rem;
  text-align: right; padding: .375rem .5rem; border: 1px solid var(--line);
  border-radius: 0; background: var(--surface); color: var(--ink);
}
.rate__qty:disabled { background: var(--bg-alt); color: var(--ink-3); }
.rate__add {
  font: inherit; font-size: .8125rem; font-weight: 600; cursor: pointer;
  color: var(--paper); background: var(--plate-700); border: 1px solid var(--plate-700);
  border-radius: 0; padding: .4375rem .875rem; white-space: nowrap;
}
.rate__add:hover { background: var(--plate-800); border-color: var(--plate-800); }
.rate__add:disabled { background: none; color: var(--ink-3); border-color: var(--line); cursor: not-allowed; }
.rate__rm {
  font: inherit; font-size: .8125rem; font-weight: 500; cursor: pointer;
  color: var(--ink-2); background: none; border: 0; border-bottom: 1px solid var(--line);
  padding: 0 0 1px;
}
.rate__rm:hover { color: var(--brand-700); border-color: var(--brand-700); }

/* --- Nothing found / nothing here ---------------------------------------- */

.pr__none { padding: 2.5rem 0; border-top: 2px solid var(--ink); max-width: 40rem; }
.pr__none h2 { font-size: 1.25rem; letter-spacing: -0.025em; margin-bottom: .375rem; }
.pr__none p { color: var(--ink-2); }
.pr__clear {
  display: inline-block; margin-top: 1rem; font-weight: 600; color: var(--ink);
  border-bottom: 1px solid var(--brand); padding-bottom: 1px;
}

/* --- The cart (H03) ------------------------------------------------------ */

.cartgrid { display: grid; grid-template-columns: minmax(0, 1fr) 19rem; gap: 2rem; align-items: start; }
.cartgrid__lines { min-width: 0; }

.grp { margin-bottom: 2rem; }
.grp__head {
  display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
  padding-bottom: .625rem; border-bottom: 2px solid var(--ink);
}
.grp__name { font-size: 1.125rem; letter-spacing: -0.025em; }
.grp__meta { margin-left: auto; font-family: var(--font-mono); font-size: .8125rem; color: var(--ink-2); }

.tot {
  position: sticky; top: 1.75rem;
  background: var(--surface); border: 1px solid var(--line); padding: 1.25rem;
}
.tot__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.tot__row--big { padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.tot__k {
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3);
}
.tot__row--big .tot__k { color: var(--ink-2); }
.tot__v {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 1.0625rem; font-weight: 600; color: var(--ink);
}
.tot__row--big .tot__v { font-size: 1.375rem; }
.tot__firm { font-weight: 600; font-size: .9375rem; }
.tot__note { font-size: .8125rem; color: var(--ink-2); margin-top: .375rem; }
.tot__note--warn { color: var(--brand-700); }
.tot__note--quiet { color: var(--ink-3); }
.tot__save { font-family: var(--font-mono); font-weight: 600; color: var(--brand-700); }
.tot__block { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line-2); }
.tot__block .tot__row { margin-top: .5rem; }
.tot__acts { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.tot__acts form { width: 100%; }
.tot__hint { font-size: .75rem; color: var(--ink-3); margin-top: -.375rem; }

/* --- What optimise did (H04) --------------------------------------------- */

.opt { border: 1px solid var(--plate-600); background: var(--surface); padding: 1rem 1.125rem 1.125rem; margin-bottom: 2rem; }
.opt__head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .625rem; }
.opt__ref { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.opt__sum { margin-left: auto; font-family: var(--font-mono); font-size: .8125rem; color: var(--ink-2); }
.opt__none { font-size: .9375rem; color: var(--ink-2); }

/* --- Review before placing (H05) ----------------------------------------- */

.rev { max-width: 60rem; }
.rev__head {
  display: flex; align-items: center; gap: .875rem; flex-wrap: wrap;
  padding-bottom: .875rem; margin-bottom: 1.75rem; border-bottom: 2px solid var(--ink);
}
.rev__k {
  font-family: var(--font-mono); font-size: .9375rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
}
.rev__arrow { font-size: 1.125rem; color: var(--brand-700); }
/* Full width, so the combined figure sits under the column it sums. */
.rev__foot { border-top: 2px solid var(--ink); padding-top: 1rem; }
.rev__foot .tot__row--big { border-bottom: 0; padding-bottom: 0; }
.rev__foot .tot__v { font-size: 1.5rem; padding-right: .75rem; }
.rev__note { font-size: .8125rem; color: var(--ink-2); margin-top: .75rem; max-width: 44rem; }
.rev__note--quiet { color: var(--ink-3); }
.rev__foot form { margin-top: 1.25rem; }
.rev__foot .btn--wide { max-width: 34rem; }
.rev__foot .refused { max-width: 44rem; margin-top: 1.25rem; }
.rev__back {
  display: inline-block; margin-top: 1rem; font-size: .875rem; font-weight: 600;
  color: var(--ink-2); border-bottom: 1px solid var(--line); padding-bottom: 1px;
}
.rev__back:hover { color: var(--ink); border-color: var(--ink); }

/* --- Refusal -------------------------------------------------------------
   Not a disabled button. The totals stay, the object stays, and the reason
   is written down. */

.refused { width: 100%; border: 1px solid var(--rose); background: var(--rose-lt); padding: .875rem 1rem; }
.refused__k {
  display: block; font-family: var(--font-mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brand-700); margin-bottom: .375rem;
}
.refused p { font-size: .8125rem; color: var(--ink); }

@media (max-width: 900px) {
  .cartgrid { grid-template-columns: minmax(0, 1fr); }
  .tot { position: static; }
}

/* ==========================================================================
   Records — H06 / H07 / H08 / H09 / H10 / H00
   Ledgers and sheets. Same table engine as the rate card, different furniture:
   a ledger is scanned down one column, a sheet is read once and filed.
   ========================================================================== */

/* --- Rail index numerals -------------------------------------------------- */

.side__ix {
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .06em;
  color: var(--ink-3); flex-shrink: 0; width: 1.25rem;
}
.side__nav a.is-active .side__ix { color: var(--brand-700); }

/* --- State ---------------------------------------------------------------
   The word is the state. Colour is a second channel only, stepping down one
   scale from early to complete, with the terminal stop in vermilion. Text
   stays at one ink so no state is ever the hard one to read.

   Named `statemark`, not `state`: site.css already owns `.state` for the
   marketing page's state language, which sets border-top and would draw a rule
   above every word here. */

.statemark {
  display: inline-block; white-space: nowrap;
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  border-left: 2px solid var(--plate-300); padding: .0625rem 0 .0625rem .5rem;
}
.statemark--placed, .statemark--uploaded              { border-color: var(--plate-300); }
.statemark--accepted, .statemark--confirmed           { border-color: var(--plate-400); }
.statemark--dispatched, .statemark--packed, .statemark--reading { border-color: var(--plate); }
.statemark--out_for_delivery                      { border-color: var(--plate-600); }
.statemark--delivered, .statemark--verified           { border-color: var(--plate-700); }
.statemark--cancelled, .statemark--rejected           { border-color: var(--brand); color: var(--ink-3); }

/* --- Filter bar ----------------------------------------------------------
   Built from the model's own choices, so it cannot offer a state that does
   not exist. Counts are the whole point: an empty state is worth seeing. */

.filt { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: 1.5rem; }
.filt__item {
  display: inline-flex; align-items: baseline; gap: .4375rem;
  font-size: .8125rem; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--line); background: var(--surface);
  padding: .375rem .6875rem;
}
.filt__item:hover { border-color: var(--ink-3); color: var(--ink); }
.filt__item.is-on { background: var(--brand-50); border-color: var(--brand-200); color: var(--brand-700); }
.filt__n { font-family: var(--font-mono); font-size: .6875rem; color: var(--ink-3); }
.filt__item.is-on .filt__n { color: var(--brand-700); }

/* --- Ledger --------------------------------------------------------------- */

.ledger { table-layout: auto; }
.ledger__ref {
  white-space: nowrap;
  font-family: var(--font-mono); font-size: .8125rem; font-weight: 600;
  color: var(--ink); border-bottom: 1px solid var(--brand-200); padding-bottom: 1px;
}
.ledger__ref:hover { border-color: var(--brand); }
.ledger__when { font-family: var(--font-mono); font-size: .8125rem; color: var(--ink-2); white-space: nowrap; }
.ledger__when span { color: var(--ink-3); }
.rate__sub { display: block; font-size: .75rem; color: var(--ink-3); }

/* --- Record sheet (H07 / H09) --------------------------------------------- */

.sheet { max-width: 58rem; }
.rec {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 1.75rem;
}
.rec__cell { background: var(--surface); padding: .875rem 1rem; }
.rec dt {
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: .3125rem;
}
.rec dd { font-size: .9375rem; font-weight: 600; color: var(--ink); }
.rec__ref { display: block; font-family: var(--font-mono); font-size: .75rem; font-weight: 400; color: var(--ink-3); }
.rec--tight { margin-bottom: 0; }

/* The state chain. Steps the backend will actually accept, in its own order. */
.chain { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0 0 1.75rem; padding: 0; }
.chain__step {
  flex: 1 1 7rem; min-width: 7rem; padding: .5rem .75rem .5rem 0;
  border-top: 2px solid var(--line); color: var(--ink-3);
}
.chain__step.is-done { border-top-color: var(--plate-700); color: var(--ink); }
.chain__ix { display: block; font-family: var(--font-mono); font-size: .625rem; letter-spacing: .1em; margin-bottom: .1875rem; }
.chain__label { font-size: .8125rem; font-weight: 600; }
.chain__step.is-stop { border-top-color: var(--brand); color: var(--brand-700); }
.chain--stopped .chain__step:not(.is-stop) { color: var(--ink-3); border-top-color: var(--line); }

.sheet__lines thead th { border-bottom-width: 2px; border-bottom-color: var(--ink); }
.sheet__lines tfoot td { padding: .875rem .75rem; border-top: 2px solid var(--ink); }
.sheet__totk {
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2);
}
.sheet__totv { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; color: var(--ink); }
.sheet__note { font-size: .8125rem; color: var(--ink-2); margin-top: 1rem; max-width: 44rem; }
.sheet__note--quiet { color: var(--ink-3); }

/* --- Action block (H09) --------------------------------------------------- */

.act { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 2px solid var(--ink); max-width: 44rem; }
.act__k {
  display: block; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: .75rem;
}
.act__hint { font-size: .8125rem; color: var(--ink-2); margin-top: .625rem; }
.act__alt { margin-top: 1rem; }

/* --- Settings (H10) ------------------------------------------------------- */

.setgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.75rem; align-items: start; }
.set { border-top: 2px solid var(--ink); padding-top: .75rem; }
.set__head { display: flex; align-items: baseline; gap: .625rem; }
.set__ix { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em; color: var(--ink-3); }
.set__head h2 { font-size: 1.0625rem; letter-spacing: -0.02em; }
.set__note { font-size: .8125rem; color: var(--ink-2); margin: .25rem 0 1rem; }
.set__note--quiet { color: var(--ink-3); margin-bottom: 0; }
.set__body { display: flex; flex-direction: column; gap: 1rem; }
.set__body .field label {
  display: block; font-family: var(--font-mono); font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: .375rem;
}
.set__formula {
  font-family: var(--font-mono); font-size: .75rem; color: var(--ink-2);
  background: var(--surface); border-left: 2px solid var(--plate-600); padding: .625rem .75rem;
}
.set__err { font-size: .75rem; color: var(--brand-700); margin-top: .375rem; }
.setgrid__act { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 1.25rem; }

/* --- Index (H00) ---------------------------------------------------------- */

.idx { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px;
       background: var(--line); border: 1px solid var(--line); margin-bottom: 2rem; }
.idx__cell {
  display: flex; flex-direction: column; background: var(--surface);
  padding: 1.125rem 1.25rem 1.25rem; color: var(--ink);
}
.idx__cell:hover { background: var(--paper); }
.idx__ix { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .1em; color: var(--ink-3); }
.idx__fig {
  font-family: var(--font-display); font-size: 2.25rem; font-weight: 900;
  letter-spacing: -0.05em; line-height: 1.05; margin: .375rem 0 .5rem;
}
.idx__fig small { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; }
.idx__k { font-size: .875rem; font-weight: 600; }
.idx__sub { font-size: .75rem; color: var(--ink-3); margin-top: .1875rem; }

.stack { min-width: 0; }
.stack__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
               padding-bottom: .625rem; border-bottom: 2px solid var(--ink); margin-bottom: .25rem; }
.stack__head h2 { font-size: 1.0625rem; letter-spacing: -0.02em; }
.stack__all { font-size: .8125rem; font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.stack__all:hover { color: var(--ink); border-color: var(--ink); }
.stack__none { padding: 1.25rem 0; font-size: .875rem; color: var(--ink-2); }
.stack__none a { font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--brand); }

@media (max-width: 720px) {
  .setgrid { grid-template-columns: minmax(0, 1fr); }
  .chain__step { flex-basis: 100%; }
}


/* ==========================================================================
   Material evidence, inside the application: none.
   Two treatments were tried on the purchase-order sheet (H07) — a faded corner
   plate and a multiplied paper texture. Both failed the only test that matters:
   the screen was better without them. A pale photograph on a pale ground either
   lightens into a rectangle or drifts under the line table, and a purchase order
   does not need atmosphere — the record is already the material object.

   So the rule the public pages set holds all the way through: cinema outside,
   story at the counter, system inside. Past the counter there are no
   photographs at all.
   ========================================================================== */

/* A quiet Save: a keyline until its row is dirty, then the one oxblood plate in
   view. The width is pinned so the row does not shift when it changes state. */
.rowsave { min-width: 5.25rem; }
.portal .btn--ghost.rowsave { color: var(--ink-3); border-color: var(--line); }
.portal .btn--ghost.rowsave:hover { color: var(--paper); border-color: var(--ink); }

/* The molecule is the row's subject and was the narrowest column on the page,
   wrapping "Aceclofenac 100mg + Paracetamol 325mg Tablet" over three lines.
   Scoped to the rate card: unscoped it widened every two-column panel on every
   screen and pushed their buttons off the edge. */
.tbl--rates th:first-child, .tbl--rates td:first-child { min-width: 15rem; }

/* ==========================================================================
   The rider's screen
   Not the dashboard. One hand, a cracked phone, sunlight, possibly a helmet.
   Large targets, few words, one job per card.
   ========================================================================== */

/* The rider's screen is not `body.portal`, so the palette remap above never
   reached it: `var(--bg)` is the olive system's pale green, and the top bar was
   printing pale green on ink. It declares the same inks the tool does, and one
   of them by name rather than by accident. */
body.rider {
  --paper: #F2E8D5; --paper-d: #E7D9BF; --red: #D8261A; --oxblood: #7E1410;
  --bg-alt: #E7D9BF; --surface: #F2E8D5; --surface-2: #EFE1C8;
  --ink: #1C1310; --ink-2: #3A2B25; --ink-3: #63504A;
  --line: #C6B191; --line-2: #DCCCAE;
  --brand: #D8261A; --brand-600: #98180F; --brand-700: #7E1410; --brand-400: #98180F;
  --brand-50: #EFDFC6; --brand-200: #C9A98F;
  --rose: #7E1410; --rose-lt: #EFDFC6;
  --amber: #6B5312; --amber-lt: #E3D3A9;
  background: var(--bg-alt); padding: 0 0 3rem; color: var(--ink);
}
.rider__top {
  position: sticky; top: 0; z-index: 2;
  background: var(--ink); color: var(--paper);
  padding: .875rem 1rem; display: flex; flex-direction: column; gap: .1rem;
}
.rider__top b { font-size: 1.0625rem; }
.rider__top span { font-family: var(--font-mono); font-size: .75rem; opacity: .8; }
.rider__msgs { padding: .75rem 1rem 0; }
.rider__list { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; max-width: 34rem; margin-inline: auto; }
.rider__foot { text-align: center; font-size: .75rem; color: var(--ink-3); padding: 1.5rem 1rem; }

.stop { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1rem; }
.stop--done { opacity: .55; }
.stop--failed { border-color: var(--rose); }
.stop__head { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .625rem; }
.stop__ix {
  flex: none; width: 2rem; height: 2rem; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); font-family: var(--font-mono);
  font-size: .875rem; border-radius: var(--r-sm);
}
.stop__name { display: block; font-size: 1.125rem; line-height: 1.25; }
.stop__state { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em;
               text-transform: uppercase; color: var(--ink-3); }
.stop__addr { font-size: 1rem; margin: 0 0 .25rem; }
.stop__landmark { font-size: .9375rem; color: var(--ink-2); margin: 0 0 .5rem; }
.stop__facts { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .625rem; font-size: .875rem; }
.stop__facts span { background: var(--bg-alt); border: 1px solid var(--line); padding: .2rem .5rem; border-radius: var(--r-sm); }
.stop__cash { font-weight: 700; }
.stop__id { font-weight: 700; }
.stop__call { margin: 0 0 .75rem; }
.stop__call a { font-size: 1.0625rem; font-weight: 600; }
.stop__done { margin: 0; font-size: .9375rem; color: var(--ink-2); }
.stop__empty { text-align: center; color: var(--ink-3); padding: 2rem 0; }

.stop__form { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.stop__label { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em;
               text-transform: uppercase; color: var(--ink-3); }
.stop__code { font-family: var(--font-mono); font-size: 1.5rem; letter-spacing: .3em; text-align: center; }
.btn--big { padding: .875rem 1rem; font-size: 1.0625rem; width: 100%; }
.stop__fail { margin-top: .75rem; }
.stop__fail summary { font-size: .9375rem; color: var(--ink-2); cursor: pointer; padding: .5rem 0; }

/* ==========================================================================
   The printed run sheet
   Carried on a dashboard, photocopied, written on. No colour that costs
   anything at a copier, and a blank column because the driver will write in
   it whatever we do.
   ========================================================================== */

body.sheetpaper { background: #fff; color: #000; padding: 1.5rem; max-width: 60rem; margin-inline: auto; }
.paper__head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
               border-bottom: 2px solid #000; padding-bottom: .625rem; margin-bottom: 1rem; }
.paper__head b { display: block; font-size: 1.125rem; }
.paper__head span { font-family: var(--font-mono); font-size: .75rem; }
.paper__meta { text-align: right; display: flex; flex-direction: column; gap: .1rem; }
.paper__table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.paper__table th { text-align: left; font-family: var(--font-mono); font-size: .6875rem;
                   letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid #000;
                   padding: .375rem .5rem; }
.paper__table td { border-bottom: 1px solid #999; padding: .625rem .5rem; vertical-align: top; }
.paper__table small { color: #444; }
.paper__blank { min-width: 11rem; }
.paper__foot { font-size: .75rem; color: #444; margin-top: 1rem; }
.paper__noprint { font-size: .8125rem; margin-top: 1.5rem; }

@media print {
  body.sheetpaper { padding: 0; }
  .paper__noprint { display: none; }
  .paper__table tr { break-inside: avoid; }
}

/* ==========================================================================
   Screens added with credit, returns, pricing and the two verification gates.
   Every rule below reuses the existing token set — no new colours are
   introduced, because a second palette is how a product starts looking like
   two products.
   ========================================================================== */

/* A panel heading where the panel has no bordered head strip. */
.panel__title {
  font-size: 1.0625rem; letter-spacing: -0.02em; margin: 0 0 .375rem;
}
.panel__body .panel__title + .set__note { margin-top: 0; }

/* A KPI that wants attention. Semantic, and deliberately not the brand accent. */
.kpi--warn { border-color: var(--amber); background: var(--amber-lt); }
.kpi--warn .kpi__label { color: var(--amber); }

/* Inline warning text inside a table cell or a read-out. */
.warn { color: var(--rose); font-size: .75rem; font-weight: 600; }

/* An unadorned list that is content rather than navigation. */
.plain { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .5rem; }
.plain li { font-size: .9rem; color: var(--ink-2); line-height: 1.5; }
.plain li b { color: var(--ink); }

/* A short form laid out in a row of fields that wraps rather than stretching. */
.rule-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .875rem; }
.rule-form .field { flex: 1 1 12rem; min-width: 0; }
.rule-form .field--narrow { flex: 0 0 7rem; }
.rule-form > .btn { flex: 0 0 auto; }

.field-input--tiny { width: 5rem; text-align: right; }

.btn--quiet {
  background: transparent; border-color: var(--line);
  color: var(--ink-2); padding: .375rem .625rem; font-size: .8125rem;
}
.btn--quiet:hover { border-color: var(--ink-3); color: var(--ink); }

/* --- Onboarding: where you are ------------------------------------------ */

.steps { list-style: none; margin: 0; padding: 0; }
.steps__item {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: start; gap: .875rem;
  padding: .875rem 1.125rem; border-top: 1px solid var(--line-2);
}
.steps__item:first-child { border-top: 0; }
.steps__item p { margin: .125rem 0 0; font-size: .8125rem; line-height: 1.5; }
.steps__ix {
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: .75rem;
  background: var(--surface-2); color: var(--ink-3); border: 1px solid var(--line);
}
.steps__state {
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap; padding-top: .375rem;
}
.steps__item--done .steps__ix { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-200); }
.steps__item--done .steps__state { color: var(--brand-700); }
.steps__item--now .steps__ix { background: var(--amber-lt); color: var(--amber); border-color: var(--amber); }
.steps__item--now .steps__state { color: var(--amber); }
.steps__item--stopped .steps__ix { background: var(--rose-lt); color: var(--rose); border-color: var(--rose); }
.steps__item--stopped .steps__state { color: var(--rose); }
.steps__item--later { opacity: .6; }

/* --- Reading a prescription --------------------------------------------- */

.rx-read { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 1.25rem; align-items: start; }
@media (max-width: 60rem) { .rx-read { grid-template-columns: minmax(0, 1fr); } }

.rx-read__image { position: sticky; top: 1.25rem; }
.rx-scan {
  display: block; width: 100%; height: auto; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--surface-2);
}

.rx-line {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .875rem;
  border-top: 1px solid var(--line-2);
}
.rx-line .field { flex: 1 1 11rem; min-width: 0; }
.rx-line .field--narrow { flex: 0 0 6rem; }
.rx-line__read { flex: 1 1 100%; display: grid; gap: .125rem; font-size: .875rem; }
.rx-line__read .muted { font-size: .8125rem; }
.rx-line__act { flex: 0 0 auto; display: flex; align-items: center; gap: .75rem; }

/* --- States introduced by returns and licensing -------------------------- */

.pill--raised                        { background: var(--amber-lt); color: var(--amber); }
.pill--partial                       { background: #E0ECFF; color: #1D4ED8; }
.pill--credited                      { background: var(--brand-50); color: var(--brand-700); }
.pill--refused, .pill--failed        { background: var(--rose-lt); color: var(--rose); }
.pill--pending                       { background: var(--surface-2); color: var(--ink-2); }
.pill--expired                       { background: var(--rose-lt); color: var(--rose); }

/* --- The rider's track, drawn from the positions we hold ----------------- */

.rmap { margin: .875rem 0 0; }
.rmap__svg {
  display: block; width: 100%; height: auto;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md);
}
.rmap__path { stroke: var(--brand-600); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.rmap__dot { fill: var(--brand-300); }
.rmap__dot--now { fill: var(--brand-700); }
.rmap__foot {
  display: flex; align-items: center; gap: .625rem; flex-wrap: wrap;
  margin-top: .5rem; font-size: .75rem;
}
.rmap__scale { height: 3px; background: var(--ink-3); border-radius: 2px; min-width: 12px; }
.rmap__out { color: var(--brand-700); margin-left: auto; }

@media (prefers-reduced-motion: no-preference) {
  .rmap__dot--now { animation: rmap-pulse 2.4s ease-in-out infinite; }
}
@keyframes rmap-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

/* ==========================================================================
   Charts. Server-drawn SVG and HTML bars; colour comes from these classes so
   every chart follows the theme without a library. One accent for the first
   series, the deeper brand for a second, and semantic amber/rose only where
   the position on the axis carries meaning.
   ========================================================================== */

.chart { margin: 0; }
.chart__svg { display: block; width: 100%; height: auto; overflow: visible; }

.chart__grid { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 3; }
.chart__axis { stroke: var(--ink-3); stroke-width: 1; }
.chart__tick, .chart__label {
  font-family: var(--font-mono); font-size: 10px; fill: var(--ink-3);
}
.chart__value {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; fill: var(--ink);
}

.chart__dot--1 { fill: var(--brand-600); }
.chart__dot--2 { fill: var(--ink-3); }
.chart__line--1 { stroke: var(--brand-600); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart__line--2 { stroke: var(--ink-3);    stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 5 4; }
.chart__end--1  { fill: var(--brand-700); stroke: var(--surface); stroke-width: 2; }
.chart__end--2  { fill: var(--ink-3);    stroke: var(--surface); stroke-width: 2; }

.chart__col        { fill: var(--brand-600); }
.chart__col--warn  { fill: var(--amber); }
.chart__col--bad   { fill: var(--rose); }

.chart__legend { display: flex; gap: 1rem; margin-top: .375rem; font-size: .75rem; color: var(--ink-2); }
.chart__key::before {
  content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px;
  vertical-align: middle; margin-right: .375rem; background: var(--brand-600);
}
.chart__key--2::before { background: var(--ink-3); }

/* An empty series says so instead of drawing a flat line — and the saying has
   to hold the space the chart would have held, or the next section butts
   straight against it. On a first run that was every dashboard's first screen. */
.chart__empty { font-size: .8125rem; color: var(--ink-3); margin: .25rem 0 1.5rem; }

/* Horizontal bars */
.hbars { display: grid; gap: .5rem; }
.hbars__row {
  display: grid; grid-template-columns: minmax(7rem, 2fr) minmax(0, 5fr) auto;
  align-items: center; gap: .75rem; font-size: .8125rem;
}
.hbars__k { color: var(--ink); overflow-wrap: anywhere; }
.hbars__k small { display: block; color: var(--ink-3); font-size: .6875rem; }
.hbars__track { display: block; height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.hbars__fill { display: block; height: 100%; background: var(--brand-600); border-radius: 5px; min-width: 2px; }
.hbars__fill--warn { background: var(--amber); }
.hbars__fill--bad  { background: var(--rose); }
.hbars__fill--ok   { background: var(--ok); }
.hbars__v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }

/* Inline sparklines */
.spark { vertical-align: middle; overflow: visible; }
.spark__line { stroke: var(--ink-3); stroke-width: 1.5; stroke-linejoin: round; }
.spark__end  { fill: var(--ink-3); }
.spark--up   .spark__line, .spark--up   .spark__end { stroke: var(--rose);  fill: var(--rose); }
.spark--down .spark__line, .spark--down .spark__end { stroke: var(--ok);    fill: var(--ok); }
.spark--up .spark__line, .spark--down .spark__line { fill: none; }

/* --- Charts, the interactive layer --------------------------------------
   Everything below only matters once charts.js has run. With it absent the
   points are invisible, the tip stays hidden, and the chart is the static
   drawing the server sent. Nothing here hides content by default.
   ------------------------------------------------------------------------ */

.chart { position: relative; }
.chart__svg:focus { outline: 2px solid var(--brand-300); outline-offset: 4px; border-radius: 4px; }

.chart__pt { fill: transparent; stroke: transparent; stroke-width: 10; cursor: crosshair; }
.chart__pt.is-on { fill: var(--surface); stroke: var(--brand-700); stroke-width: 2.5; }
.chart__pt--2.is-on { stroke: var(--ink-3); }
.chart__cross { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }

.chart__col { transition: fill-opacity .15s ease; cursor: crosshair; }
.chart__col.is-on, .chart__col:hover { fill-opacity: .78; }

.chart__tip {
  position: absolute; z-index: 5; pointer-events: none;
  min-width: 7rem; padding: .5rem .625rem;
  background: var(--ink); color: var(--bg); border-radius: var(--r-sm, 6px);
  box-shadow: var(--sh-md, 0 6px 18px rgba(0,0,0,.18));
  font-size: .75rem; line-height: 1.45;
  display: grid; gap: .125rem;
}
.chart__tip-k { font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; font-size: .625rem; opacity: .7; }
.chart__tip-row { display: flex; justify-content: space-between; gap: .75rem; }
.chart__tip-row i { font-style: normal; opacity: .8; }
.chart__tip-row b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.chart__tip-row--1 b { color: var(--brand-300); }

/* Legend buttons: look like the keys they were, act like switches. */
button.chart__key {
  background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
  border-radius: 4px;
}
button.chart__key:focus-visible { outline: 2px solid var(--brand-300); outline-offset: 3px; }
.chart__key.is-off { opacity: .45; text-decoration: line-through; }

/* A hidden series: the svg carries hide-N; everything of that series fades. */
.chart__svg.hide-1 .chart__line--1, .chart__svg.hide-1 .chart__area--1,
.chart__svg.hide-1 .chart__end--1,  .chart__svg.hide-1 .chart__pt--1, .chart__svg.hide-1 .chart__dot--1,
.chart__svg.hide-2 .chart__line--2, .chart__svg.hide-2 .chart__area--2,
.chart__svg.hide-2 .chart__end--2,  .chart__svg.hide-2 .chart__pt--2, .chart__svg.hide-2 .chart__dot--2 { opacity: 0; pointer-events: none; }
.chart__line, .chart__area, .chart__end { transition: opacity .25s ease; }

/* Draw-in: only once the script marks the chart live, so nothing is ever
   pre-hidden. Columns grow from the axis; the area fades up under the line. */
@media (prefers-reduced-motion: no-preference) {
  .chart__svg.is-live .chart__col { animation: chart-grow .7s cubic-bezier(.22,1,.36,1) both; transform-box: fill-box; transform-origin: bottom; }
  .chart__svg.is-live .chart__area { animation: chart-fade .9s ease-out both; }
  .chart__svg.is-live .chart__end  { animation: chart-fade .4s ease-out .8s both; }
}
@keyframes chart-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes chart-fade { from { opacity: 0; } to { opacity: 1; } }

/* The week switch */
.range { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface-2); border-radius: 999px; margin-left: auto; }
.range__opt {
  padding: .25rem .625rem; border-radius: 999px; font-size: .75rem;
  font-family: var(--font-mono); color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.range__opt:hover { color: var(--ink); }
.range__opt--on { background: var(--surface); color: var(--ink); box-shadow: var(--sh-sm); }
.set__head .range, .panel__head .range { margin-left: auto; }
.stack__head .range { margin-left: auto; margin-right: .75rem; }
[data-chart-frame].is-loading .chart { opacity: .5; transition: opacity .2s; }

/* --- The rail, once it stopped being six things ----------------------------

   The brief's proposed areas landed and the rail went from six entries to
   fourteen. A flat list of fourteen numbered items is a directory, not a rail:
   the numerals stop being an index and become a queue.

   So the rail is set the way the rest of the system sets a long document — a
   heading, then its entries, with one sequence running through the whole thing.
   Overview sits above the first heading with an em dash where its numeral would
   be, because it is not a step in the sequence, it is the cover.

   The rail is now taller than a laptop viewport, so it scrolls on its own while
   the account block stays pinned to the foot. */

.side__grp {
  margin: 1.125rem 0 .25rem; padding: .5rem .75rem 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: .5625rem; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-3);
}
.side__nav { overflow-y: auto; min-height: 0; padding-bottom: .5rem; }
.side__nav > a:first-child .side__ix { opacity: .55; }
.side__user { flex: none; }

/* --- The rail on a phone ---------------------------------------------------

   The brief's first constraint: ordering happens one-handed behind a counter,
   in about ten minutes, and the screen is abandoned mid-task. Fourteen entries
   and four group headings wrapped inline filled the whole first screen before
   the page began — tolerable at six items, not at eighteen elements.

   So on a phone the index behaves like an index: a bar you open, a list you
   read down, closing itself once you have chosen. Above the breakpoint the
   <details> is display:contents and the summary is gone, so the desktop rail is
   laid out exactly as though none of this existed. */

.side__menu { display: contents; }
.side__toggle { display: none; }

@media (max-width: 860px) {
  /* The shell is a `min-height: 100vh` grid. Stacked, its two rows stretched to
     fill the screen, so the rail took 257px of a 900px phone to hold a wordmark
     and a closed menu bar. The rail takes its content height; the page absorbs
     the slack. */
  body.portal { grid-template-rows: auto minmax(0, 1fr); }
  .side { flex-direction: row; flex-wrap: wrap; align-items: center; align-content: start; }
  .side__menu { display: block; width: 100%; order: 3; }

  .side__toggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: .625rem .75rem; cursor: pointer; list-style: none;
    border: 2px solid var(--ink); background: var(--surface); color: var(--ink);
    font-family: var(--font-mono); font-size: .6875rem; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
  }
  .side__toggle::-webkit-details-marker { display: none; }
  /* Three rules, drawn rather than typed, so it is the same furniture as the
     rest of the system and does not depend on a glyph being installed. */
  .side__toggleGlyph {
    width: 1rem; height: 2px; background: currentColor; position: relative;
  }
  .side__toggleGlyph::before, .side__toggleGlyph::after {
    content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
  }
  .side__toggleGlyph::before { top: -5px; }
  .side__toggleGlyph::after  { top: 5px; }
  .side__menu[open] .side__toggle { background: var(--ink); color: var(--paper); }

  /* A list read downwards, not a wrapped row of fourteen things. */
  .side__nav {
    flex-direction: column; gap: 0; overflow: visible;
    border: 2px solid var(--ink); border-top: 0; padding: .5rem 0;
  }
  .side__nav a { padding: .625rem .75rem; font-size: .9375rem; }
  .side__grp { margin: .75rem 0 .125rem; }
  .side__user { margin-left: auto; }
}

/* --- The comparison, on a phone --------------------------------------------

   "Four to six competing rows must be comparable at a glance on a phone." A
   seven-column table cannot be, and scrolling it sideways loses the comparison
   it exists for — you can hold two prices in your head, not two prices you have
   to scroll between.

   So below 700px each offer stops being a row and becomes a record: the firm
   and its price on one line, the three facts that qualify that price on the
   next, the action on the last. The prices still line up down the right edge,
   which is the thing being compared, and nothing moves sideways.

   The header row goes, so each fact carries its own label. */

@media (max-width: 700px) {
  .mol__scroll { overflow-x: visible; }
  .mol__scroll .rate thead { display: none; }
  .mol__scroll .rate,
  .mol__scroll .rate tbody { display: block; }

  .mol__scroll .rate tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: .375rem .875rem;
    padding: .875rem .625rem;
    border-bottom: 1px solid var(--line);
  }
  .mol__scroll .rate td { display: block; padding: 0; border: 0; }

  .mol__scroll .rate__firm   { grid-column: 1 / 3; grid-row: 1; }
  .mol__scroll .rate__ptr    { grid-column: 3;     grid-row: 1; font-size: 1.25rem; text-align: right; }
  .mol__scroll .rate__scheme { grid-column: 1;     grid-row: 2; }
  .mol__scroll .rate__stock  { grid-column: 2;     grid-row: 2; text-align: right; }
  .mol__scroll .rate__eta    { grid-column: 3;     grid-row: 2; text-align: right; }

  /* Without the header row each figure has to say what it is. */
  .mol__scroll .rate__scheme::before,
  .mol__scroll .rate__stock::before,
  .mol__scroll .rate__eta::before {
    display: block; font-family: var(--font-mono); font-size: .5625rem;
    letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
  }
  .mol__scroll .rate__scheme::before { content: "Scheme"; }
  .mol__scroll .rate__stock::before  { content: "Stock"; }
  .mol__scroll .rate__eta::before    { content: "Delivery"; }

  /* The action, last and reachable with a thumb. */
  .mol__scroll .rate tr > td:nth-last-child(2) { grid-column: 1 / 3; grid-row: 3; }
  .mol__scroll .rate tr > td:nth-last-child(1) { grid-column: 3;     grid-row: 3; }
  .mol__scroll .rate__qty { width: 100%; min-height: 2.75rem; }
  .mol__scroll .rate__add { min-height: 2.75rem; padding-inline: 1.25rem; }
}

/* A prescription that a browser cannot draw. Not an error — a PDF from a clinic
   is an ordinary Tuesday — so it is presented as the document it is rather than
   as a picture that failed. */
.rx-doc {
  display: grid; gap: .25rem; padding: 1.25rem;
  border: 2px dashed var(--line); color: var(--ink); text-align: center;
}
.rx-doc:hover { border-style: solid; border-color: var(--ink); }
.rx-doc__kind {
  justify-self: center; padding: .25rem .5rem; background: var(--ink); color: var(--paper);
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .18em;
}
.rx-doc__say { font-weight: 700; margin-top: .375rem; }
.rx-doc__note { font-size: .8125rem; color: var(--ink-3); }

/* The way out of an empty result is an action, not the last clause of a
   sentence about why it is empty. */
.panel__empty .row-link { display: block; margin-top: .625rem; }

/* A column whose rule cannot wait until the foot of a forty-row sheet. */
.th__note {
  display: block; font-family: var(--font-mono); font-size: .5625rem; font-weight: 400;
  letter-spacing: .12em; text-transform: none; color: var(--ink-3); margin-top: .125rem;
}

/* --- The shelf: the catalogue as cards, before anything is typed ----------- */

.shelf { margin-top: 1.5rem; border-top: 2px solid var(--ink); padding-top: .75rem; }
.shelf__head { display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1rem; }
.shelf__head h2 { font-size: 1.0625rem; letter-spacing: -0.02em; }
.shelf__count { margin-left: auto; font-family: var(--font-mono); font-size: .75rem; color: var(--ink-3); }
.shelf__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.pack {
  display: grid; gap: .25rem; padding: 1rem; background: var(--surface);
  color: var(--ink); text-decoration: none; min-width: 0;
}
.pack:hover, .pack:focus-visible { background: var(--paper, var(--surface-2)); outline: none; }
.pack__name { font-weight: 600; line-height: 1.25; margin-top: .5rem; overflow-wrap: anywhere; }
.pack__pack, .pack__mrp, .pack__firm { font-size: .75rem; color: var(--ink-3); }
.pack__firm { color: var(--ink-2); }
.pack__firm small, .pack__price small { color: var(--ink-3); font-weight: 400; }
.pack__price { font-family: var(--font-mono); font-size: 1.0625rem; margin-top: .25rem; font-variant-numeric: tabular-nums; }
.pack__price--none { font-family: var(--font-body); font-size: .8125rem; color: var(--ink-3); }
.pack__cta {
  margin-top: .5rem; font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand-700);
}
.shelf__pages { display: flex; justify-content: center; gap: 1.5rem; margin-top: 1rem; font-size: .875rem; }
.shelf__pages span { color: var(--ink-3); }

/* The pack tile: a photograph, or two letters on a colour the product owns. */
.tile { display: block; object-fit: cover; border-radius: 4px; background: var(--surface-2); flex: none; }
.tile--lg { width: 100%; aspect-ratio: 4 / 3; }
.tile--sm { width: 2.75rem; height: 2.75rem; margin-right: .75rem; }
.tile--drawn {
  display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600;
  letter-spacing: .06em; color: hsl(var(--hue) 35% 28%);
  background: linear-gradient(160deg, hsl(var(--hue) 45% 88%), hsl(var(--hue) 35% 78%));
}
.tile--lg.tile--drawn { font-size: 1.75rem; }
.tile--sm.tile--drawn { font-size: .875rem; }
.mol__head .tile { align-self: center; }

/* Adding one medicine by hand, folded under the rate card's toolbar. */
.addmed { margin-bottom: 1.25rem; }
.addmed__sum { cursor: pointer; list-style: none; }
.addmed__sum::-webkit-details-marker { display: none; }
.addmed__sum h2::before { content: "+ "; color: var(--brand-700); }
.addmed[open] .addmed__sum h2::before { content: "– "; }

/* A firm whose licence is still being checked: listed, marked, not buyable. */
.rate tr.is-pending td { color: var(--ink-3); }
.rate__mark--pending { background: var(--amber-lt); color: var(--amber); }