/* Wine OS — application design system.

   One stylesheet, one vocabulary. The shape is the one every serious cellar
   tool converges on and the one our reference (vinify.app) uses: a fixed icon
   rail for sections, a context sidebar for "which slice of this section", and
   a stage that always opens with a title, its actions, and its numbers before
   any table.

   Tokens first. Nothing below this block may invent a colour, a radius or a
   step of spacing -- if a value is not here it does not belong on the page.
   ==================================================================== */
:root{
  /* --- ramps ------------------------------------------------------- */
  --red-900:#4B1129; --red-800:#791C3A; --red-700:#952343; --red-600:#AB284E;
  --red-500:#BE2C55; --red-400:#D44971; --red-300:#DC6A8B; --red-200:#EDB8C7;
  --red-100:#F4DDE4; --red-50:#FAF0F3;

  --navy-900:#28273F; --navy-800:#32304F; --navy-700:#494672;
  /* 650 exists so --ink-3 can clear WCAG AA (4.5:1) on every light ground;
     600 measured 3.01:1 on --paper-2 and carried every label in the app. */
  --navy-650:#6A6991; --navy-600:#8787AB;
  --navy-500:#BCBCD1; --navy-400:#CCCCDD; --navy-300:#DCDCE7; --navy-200:#E7E7EF;
  --navy-100:#EFEFF4; --navy-50:#F5F5F9;

  --gold-900:#473734; --gold-700:#A18060; --gold-600:#C49C71; --gold-500:#E1B37F;
  --gold-300:#EDD1B2; --gold-100:#F9F0E5; --gold-50:#FCF7F2;

  --green-800:#016C58; --green-700:#018065; --green-500:#58B99D;
  --green-100:#E6F6F1; --green-50:#F7FBFA;

  --orange-800:#995200; --orange-700:#BF6800; --orange-500:#E89608; --orange-400:#F7AE3B;
  --orange-100:#FFEFCC; --orange-50:#FFF8E5;

  --blue-700:#1845AF; --blue-600:#2369F5; --blue-400:#73A2FF; --blue-300:#9ABBFD;
  --blue-100:#DFEAFF; --blue-50:#EFF4FF;

  /* --- semantic aliases -------------------------------------------- */
  --paper:var(--navy-50); --paper-2:var(--navy-100); --paper-3:var(--navy-200);
  --surface:#fff; --placeholder:var(--navy-300);
  --ink:var(--navy-800); --ink-2:var(--navy-700); --ink-3:var(--navy-650);
  --burgundy:var(--red-500); --burgundy-deep:var(--red-700); --burgundy-tint:var(--red-50);
  --gold:var(--gold-600); --gold-tint:var(--gold-100);
  --green:var(--green-800); --green-ink:var(--green-700); --green-tint:var(--green-100);
  --amber:var(--orange-700); --amber-tint:var(--orange-100);
  --blue:var(--blue-700); --blue-tint:var(--blue-100);
  --danger:var(--red-600); --danger-tint:var(--red-50);

  --hairline:rgb(50 48 79 / .12);
  --hairline-soft:rgb(50 48 79 / .07);
  --hairline-strong:rgb(50 48 79 / .24);

  /* Three roles, three stacks. The serif/sans/mono contrast is what carries
     the reference's character; keeping the roles distinct preserves it with
     no webfont to load. */
  --font-display:ui-serif,Georgia,Cambria,'Times New Roman',serif;
  --font-text:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',
    Roboto,'Helvetica Neue',sans-serif;
  --font-meta:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;

  --r-xs:2px; --r-sm:4px; --r-md:6px; --r-lg:12px; --r-pill:100px;
  --shadow-card:0 14px 34px -20px rgb(23 22 22 / .24);
  --shadow-raise:0 22px 50px -24px rgb(23 22 22 / .30);
  --shadow-pop:0 26px 60px -22px rgb(23 22 22 / .34);

  --rail-w:96px; --side-w:230px; --top-h:56px;
  --ease:cubic-bezier(.2,.8,.2,1); --dur:160ms;
}

/* ==================================================================
   DARK
   Only the semantic aliases move. The ramps above are fixed, so the two
   themes cannot quietly drift apart -- a colour that is wrong in dark is
   wrong here, in one place, and not scattered through the components.
   ================================================================== */
@media (prefers-color-scheme: dark){
  :root{
    --paper:#16151F; --paper-2:#1E1D2B; --paper-3:#2A2839; --surface:#1B1A26;
    --placeholder:#5A5875;
    --ink:#F1F1F6; --ink-2:#C9C8DA; --ink-3:#8F8DA8;

    /* red-500 is the brand on white and fails against this ground; the ramp
       has a lighter step for exactly that. */
    --burgundy:var(--red-400); --burgundy-deep:var(--red-300);
    --burgundy-tint:rgb(190 44 85 / .16);
    --danger:var(--red-400); --danger-tint:rgb(171 40 78 / .18);

    --gold:var(--gold-500); --gold-tint:rgb(196 156 113 / .16);
    --green:var(--green-500); --green-ink:var(--green-500);
    --green-tint:rgb(1 128 101 / .20);
    --amber:var(--orange-400); --amber-tint:rgb(191 104 0 / .20);
    --blue:var(--blue-400); --blue-tint:rgb(35 105 245 / .20);

    --hairline:rgb(255 255 255 / .13);
    --hairline-soft:rgb(255 255 255 / .07);
    --hairline-strong:rgb(255 255 255 / .26);

    /* a light-mode shadow is invisible on a dark ground -- these do the
       lifting that the border alone cannot */
    --shadow-card:0 14px 34px -20px rgb(0 0 0 / .70);
    --shadow-raise:0 22px 50px -24px rgb(0 0 0 / .80);
    --shadow-pop:0 26px 60px -22px rgb(0 0 0 / .85);

    color-scheme:dark;
  }
  /* the chevron is drawn, not coloured by a token */
  select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238F8DA8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
  input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px rgb(188 188 209 / .14)}

  /* category chips are pastel grounds with navy ink upstream, which inverts
     badly. Same hue coding, carried by a low-alpha ground instead. */
  .tag{background:var(--paper-3);color:var(--ink-2)}
  .tag--pink{background:rgb(249 179 199 / .18);color:#F0A8BC}
  .tag--blue{background:rgb(223 234 255 / .16);color:#A8C4F5}
  .tag--gold{background:rgb(252 242 191 / .16);color:#E2D391}
  .tag--peach{background:rgb(250 213 180 / .16);color:#E9BB8E}
  .tag--violet{background:rgb(219 217 245 / .16);color:#B9B6E8}
  .tag--rose{background:rgb(251 220 237 / .16);color:#EDB4D3}

  /* the two tinted cards borrow a light ramp step for their edge */
  .card--alert{border-color:rgb(212 73 113 / .45)}
  .card--warn{border-color:rgb(225 179 127 / .40)}

  .prod .sw{background:rgb(190 44 85 / .22);color:#E39BAF}
  .prod .sw.white{background:rgb(225 179 127 / .18);color:#DEBE8F}
  .prod .sw.spark{background:rgb(188 188 209 / .14);color:#B4B3CB}

  .tbl tbody tr:hover td{background:rgb(255 255 255 / .035)}
  .avatar{color:#1B1A26}
  .btn--go,.btn--dark{color:#16151F}
  .btn--go:hover,.btn--dark:hover{color:#16151F}
  .btn--dark{background:var(--ink);border-color:var(--ink)}
  .btn--dark:hover{background:#fff;border-color:#fff}
  .chip.on{background:var(--ink);border-color:var(--ink);color:#16151F}
  .badge{color:#16151F}
  .auth{background:linear-gradient(180deg,var(--paper) 0%,#100F17 100%)}
}

/* ==================================================================
   BASE
   ================================================================== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
/* both in rem so raising the browser's default font size scales the whole
   app, not just the parts that happened to be sized in rem */
html{font-size:100%;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--font-text);
  font-size:1rem;line-height:1.55;-webkit-font-smoothing:antialiased;
  font-feature-settings:"kern","liga","calt"}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;text-wrap:balance;color:var(--ink)}
h1{font-size:1.75rem;letter-spacing:-.03em;line-height:1.1}
h2{font-size:1.0625rem;letter-spacing:-.02em;line-height:1.2}
h3{font-size:.9375rem;letter-spacing:-.015em;line-height:1.25}
p{text-wrap:pretty}
::selection{background:var(--burgundy);color:#fff}
:focus-visible{outline:2px solid var(--burgundy);outline-offset:2px;border-radius:var(--r-md)}
.num{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:12px 20px;z-index:999}
.skip:focus{left:8px;top:8px}

/* the one label style: uppercase mono, used for every column head, KPI
   caption and section eyebrow, so "this is a label" never has to be guessed */
.meta{font-family:var(--font-meta);font-size:.75rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500}
.mute{color:var(--ink-3)}
.strong{font-weight:600;color:var(--ink)}

/* icons: one sprite, sized by the box it sits in */
.i{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ==================================================================
   SHELL — topbar / rail / sidebar / stage
   ================================================================== */
.shell{min-height:100vh;display:flex;flex-direction:column}

.topbar{display:flex;align-items:center;gap:var(--space-5);height:var(--top-h);
  padding:0 var(--space-4);background:var(--surface);
  border-bottom:1px solid var(--hairline-soft);position:sticky;top:0;z-index:40}
.brand{display:flex;align-items:baseline;gap:.45rem;font-family:var(--font-display);
  font-weight:700;font-size:1.0625rem;letter-spacing:-.03em;color:var(--ink)}
.brand em{font-style:normal;color:var(--burgundy)}

.topsearch{flex:1;max-width:420px;position:relative;display:flex;align-items:center}
.topsearch .i{position:absolute;left:11px;width:16px;height:16px;color:var(--ink-3);pointer-events:none}
.topsearch input{width:100%;height:34px;padding:0 12px 0 34px;border-radius:var(--r-md);
  border:1px solid var(--hairline-soft);background:var(--paper);font:inherit;
  font-size:.8125rem;color:var(--ink)}
.topsearch input::placeholder{color:var(--ink-3)}
.topsearch input:focus{outline:none;border-color:var(--navy-500);background:var(--surface)}

.whoami{margin-left:auto;display:flex;align-items:center;gap:var(--space-3)}
.whoami__biz{display:flex;flex-direction:column;line-height:1.15;text-align:right}
.whoami__biz b{font-size:.8125rem;font-weight:600}
.whoami__biz span{font-family:var(--font-meta);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--burgundy);color:#fff;
  display:grid;place-items:center;font-size:.75rem;font-weight:600;letter-spacing:.02em;flex:none}

.shell__body{flex:1;display:grid;grid-template-columns:var(--rail-w) 1fr;min-height:0}
.shell__body.has-side{grid-template-columns:var(--rail-w) var(--side-w) 1fr}

/* --- rail: the six places this app goes ---------------------------- */
.rail{display:flex;flex-direction:column;gap:2px;padding:var(--space-3) var(--space-2);
  background:var(--surface);border-right:1px solid var(--hairline-soft);
  position:sticky;top:var(--top-h);align-self:start;height:calc(100vh - var(--top-h));overflow-y:auto}
.rail a{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:9px 2px 8px;border-radius:var(--r-md);color:var(--ink-3);
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.rail a .i{width:20px;height:20px}
.rail a span{font-size:.75rem;font-weight:600;letter-spacing:0;line-height:1.1;text-align:center}
.rail a:hover{background:var(--paper);color:var(--ink-2)}
.rail a.on{background:var(--paper-2);color:var(--ink)}
.rail a.on::before{content:"";position:absolute;left:-8px;top:8px;bottom:8px;width:3px;
  border-radius:0 3px 3px 0;background:var(--burgundy)}
.rail__end{margin-top:auto}
.rail__sep{height:1px;background:var(--hairline-soft);margin:var(--space-2) 6px}
.badge{position:absolute;top:4px;right:12px;min-width:17px;height:17px;padding:0 5px;
  border-radius:var(--r-pill);background:var(--burgundy);color:#fff;
  font-size:.75rem;font-weight:700;display:grid;place-items:center;line-height:1;
  font-variant-numeric:tabular-nums}

/* --- context sidebar: which slice of the section ------------------- */
.side{background:var(--paper);border-right:1px solid var(--hairline-soft);
  padding:var(--space-4) var(--space-3);display:flex;flex-direction:column;gap:2px;
  position:sticky;top:var(--top-h);align-self:start;height:calc(100vh - var(--top-h));overflow-y:auto}
.side__t{font-family:var(--font-meta);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);padding:var(--space-3) 9px var(--space-1)}
.side__t:first-child{padding-top:0}
.side a{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:var(--r-md);
  font-size:.8125rem;color:var(--ink-2);white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.side a .i{width:15px;height:15px;color:var(--ink-3)}
.side a b{margin-left:auto;font-family:var(--font-meta);font-size:.75rem;font-weight:500;
  color:var(--ink-3);font-variant-numeric:tabular-nums}
.side a:hover{background:var(--paper-2);color:var(--ink)}
.side a.on{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:var(--shadow-card)}
.side a.on .i{color:var(--burgundy)}
.side__note{padding:9px;font-size:.75rem;color:var(--ink-3);line-height:1.35}

/* --- editing the cellar, from the rows that name it ----------------- */
/* A sidebar is a navigator. The verbs hide behind a ⋯ that appears on hover
   and open in a popover -- which renders in the top layer, so the menu is
   free to be wider than the 230px column and escapes .side's own overflow. */
.side__row{display:flex;align-items:center;border-radius:var(--r-md)}
.side__row > a{flex:1;min-width:0}
.side__row > a > b{margin-left:auto}
.side__row--sub > a{padding-left:26px}
.side__more{flex:none;width:24px;height:24px;margin-right:5px;padding:0;
  display:grid;place-items:center;border:0;background:none;border-radius:var(--r-sm);
  color:var(--ink-3);opacity:0;cursor:pointer;
  transition:opacity var(--dur) var(--ease),background var(--dur) var(--ease)}
.side__more .i{width:15px;height:15px}
/* Reserved, never revealed by pointer alone -- keyboard focus and an open
   menu must show it too, or the control is unreachable without a mouse. */
.side__row:hover .side__more,.side__more:focus-visible,.side__more:hover,
.side__row:has(+ .pop:popover-open) .side__more{opacity:1}
.side__more:hover{background:var(--paper-2);color:var(--ink)}
.side__add{display:flex;align-items:center;gap:9px;width:100%;padding:7px 9px;
  border:0;background:none;border-radius:var(--r-md);cursor:pointer;
  font-size:.8125rem;color:var(--ink-3);text-align:left}
.side__add .i{width:15px;height:15px}
.side__add:hover{background:var(--paper-2);color:var(--ink)}

/* The menu itself. Wider than the column it belongs to, on purpose. */
.pop{position:fixed;margin:0;width:238px;padding:7px;
  border:1px solid var(--hairline);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--shadow-pop);color:var(--ink)}
.pop::backdrop{background:transparent}
.pop__t{display:block;padding:3px 5px 7px;font-family:var(--font-meta);
  font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pop form{display:flex;gap:5px;padding:5px 0;border-top:1px solid var(--hairline-soft)}
.pop form:first-of-type{border-top:0;padding-top:0}
.pop input,.pop select{flex:1;min-width:0;height:28px;font-size:.75rem}
.pop .btn{flex:none}
.pop__last{padding-bottom:0}
.pop__last .btn{width:100%}

/* Placed against the button that opened it where the browser can do it, which
   is every current engine. Without anchor positioning a popover centres in the
   viewport: still usable, just not beside the row -- so a shim below nudges it. */
@supports (anchor-name:--x){
  .pop{position-area:inline-end span-block-end;
       position-try-fallbacks:flip-inline,flip-block;margin:0 0 0 6px}
}

/* --- stage --------------------------------------------------------- */
.stage{min-width:0;padding:var(--space-5) var(--space-6) var(--space-8);
  display:flex;flex-direction:column;gap:var(--space-4)}
.stage--narrow{max-width:56rem}

.pagehead{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--space-4);flex-wrap:wrap}
.pagehead__l{min-width:0;display:flex;flex-direction:column;gap:5px}
.pagehead h1{margin:0}
.pagehead .sub{font-size:.875rem;color:var(--ink-3);line-height:1.4;max-width:62ch}
.pagehead .meta{display:block}
.actions{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:center}

/* ==================================================================
   BUTTONS & FORM CONTROLS
   ================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:34px;padding:0 15px;border-radius:var(--r-md);border:1px solid var(--hairline);
  background:var(--surface);color:var(--ink-2);font:inherit;font-size:.8125rem;
  font-weight:600;letter-spacing:-.005em;white-space:nowrap;cursor:pointer;
  box-shadow:var(--shadow-card);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease)}
.btn .i{width:15px;height:15px}
.btn:hover{border-color:var(--hairline-strong);color:var(--ink)}
.btn--go{background:var(--burgundy);border-color:var(--burgundy);color:#fff}
.btn--go:hover{background:var(--burgundy-deep);border-color:var(--burgundy-deep);color:#fff}
.btn--dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn--dark:hover{background:var(--navy-900);border-color:var(--navy-900);color:#fff}
.btn--quiet{background:none;box-shadow:none;border-color:var(--hairline)}
.btn--quiet:hover{background:var(--paper-2)}
.btn--link{background:none;border:0;box-shadow:none;padding:0;height:auto;
  color:var(--burgundy);font-weight:600}
.btn--link:hover{color:var(--burgundy-deep);text-decoration:underline}
.btn--sm{height:28px;padding:0 11px;font-size:.75rem}
.btn--danger{color:var(--danger);border-color:var(--hairline)}
.btn--danger:hover{background:var(--danger-tint);border-color:var(--danger);color:var(--danger)}

input,select,textarea{font:inherit;font-size:.8125rem;color:var(--ink);
  height:34px;padding:0 10px;border-radius:var(--r-md);
  border:1px solid var(--hairline);background:var(--surface)}
input::placeholder{color:var(--placeholder)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--navy-500);
  box-shadow:0 0 0 3px var(--navy-100)}
input[type=file]{height:auto;padding:7px 10px;border-style:dashed;background:var(--paper)}
input[type=checkbox]{height:auto;width:auto;accent-color:var(--burgundy)}
select{padding-right:26px;appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238787AB' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 8px center}

.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field > span:first-child{font-family:var(--font-meta);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.field--w{flex:1;min-width:11rem}
.row{display:flex;gap:var(--space-2);flex-wrap:wrap;align-items:flex-end}
.row--mid{align-items:center}
.w-xs{width:5rem}.w-sm{width:7rem}.w-md{width:10rem}.w-lg{width:14rem}
.grow{flex:1;min-width:9rem}

/* ==================================================================
   CARDS, BENTO, NUMBERS
   ================================================================== */
.card{background:var(--surface);border:1px solid var(--hairline-soft);
  border-radius:var(--r-lg);padding:var(--space-4) var(--space-5);
  box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.card--flat{box-shadow:none}
.card--pad0{padding:0;overflow:hidden}
.card__t{display:flex;align-items:center;gap:8px;font-size:.875rem;font-weight:700;
  font-family:var(--font-display);letter-spacing:-.015em;color:var(--ink)}
.card__t .i{width:16px;height:16px;color:var(--burgundy)}
.card__t a,.card__t .right{margin-left:auto;font-family:var(--font-text);
  font-size:.75rem;font-weight:600}
.card__t a{color:var(--burgundy)}
.card__note{font-size:.8125rem;color:var(--ink-3);line-height:1.45}
.card--alert{border-color:var(--red-200);background:var(--burgundy-tint)}
.card--alert .card__t .i{color:var(--danger)}
.card--warn{border-color:var(--gold-300);background:var(--amber-tint)}
.card--warn .card__t .i{color:var(--amber)}
.card--good{border-color:var(--green-500);background:var(--green-tint)}
.card--good .card__t .i{color:var(--green)}

.bento{display:grid;gap:var(--space-3);grid-template-columns:repeat(3,1fr);align-items:start}
.bento--2{grid-template-columns:repeat(2,1fr)}
.span2{grid-column:span 2}
.span3{grid-column:span 3}

/* KPI strip — always the first thing under a page title */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2)}
.stats--3{grid-template-columns:repeat(3,1fr)}
.stats--5{grid-template-columns:repeat(5,1fr)}
.stat{display:grid;grid-template-columns:32px 1fr;grid-template-rows:1fr auto;
  column-gap:10px;background:var(--surface);
  border:1px solid var(--hairline-soft);border-radius:var(--r-md);padding:10px 13px}
/* Number lives in the fixed bottom row, label in the flexible top one, so a
   label that wraps to two lines grows upward and every tile's number still
   lands on one shared baseline. Icon spans both rows -- centre it by hand
   since the grid no longer centres the whole tile. */
.stat .i{grid-row:span 2;align-self:center;width:32px;height:32px;padding:7px;
  border-radius:var(--r-sm);background:var(--paper-2);color:var(--ink-2);stroke-width:1.7}
.stat em{font-family:var(--font-meta);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);font-style:normal;align-self:end}
.stat b{font-family:var(--font-display);font-weight:700;font-size:1.1875rem;
  letter-spacing:-.03em;line-height:1.15;font-variant-numeric:tabular-nums;align-self:end}
.stat--alert .i{background:var(--danger-tint);color:var(--danger)}
.stat--alert b{color:var(--danger)}
.stat--warn .i{background:var(--amber-tint);color:var(--amber)}
.stat--good .i{background:var(--green-tint);color:var(--green)}

/* --- a number and what it means ------------------------------------------
   For the two strips that answer "where does this list sit" rather than "how
   many of X". The tile is inverted: number first, then the sentence that
   reads it. That order is what makes the row typeset -- every number is one
   line, so they share a top edge no matter how long the sentences under them
   run, and the sentence is free to wrap to two or three lines without
   knocking any number out of alignment. (Label-above-number, the default
   above, cannot do that: the flexible part would be over the numbers.)

   The sentence is set in the text face in sentence case, because it is a
   sentence. Letterspaced uppercase is for a two-word label; run a clause
   through it and it stops being readable at 11px. */
.stats--said .stat{grid-template-rows:auto 1fr;row-gap:4px}
.stats--said .stat .i{align-self:start}
.stats--said .stat b{font-size:1.5rem;line-height:1.05;align-self:start}
.stats--said .stat b .mute{font-size:.875rem;font-weight:400}
.stats--said .stat em{font-family:var(--font-text);font-size:.75rem;
  letter-spacing:0;text-transform:none;line-height:1.4;color:var(--ink-3);
  align-self:start;text-wrap:pretty}

/* the two-up big numbers used on the wine page and the value card */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4) var(--space-2)}
.kpis > div{display:flex;flex-direction:column;gap:3px;padding-left:11px;
  border-left:2px solid var(--paper-3)}
.kpis em{font-family:var(--font-meta);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);font-style:normal}
.kpis b{font-family:var(--font-display);font-weight:700;font-size:1.5rem;
  letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.kpis small{font-size:.75rem;color:var(--ink-3)}
/* Same inversion as .stats--said, in the other KPI component: the number, then
   the sentence that reads it. auto-fit because the tile count here varies with
   what the data supports, and three tiles in a four-column grid leaves a hole
   that reads as a missing figure. */
.kpis--said{grid-template-columns:repeat(auto-fit,minmax(12rem,1fr))}
.kpis--said > div{gap:5px}
.kpis--said em{font-family:var(--font-text);font-size:.75rem;letter-spacing:0;
  text-transform:none;line-height:1.4;color:var(--ink-3);font-style:normal;
  text-wrap:pretty}

/* rank bars — top regions / producers / vendors */
.ranks{display:flex;flex-direction:column;gap:9px}
.ranks li{display:grid;grid-template-columns:16px 1fr auto;gap:9px;align-items:center;
  position:relative;padding-bottom:7px;font-size:.8125rem}
.ranks li i{font-style:normal;font-family:var(--font-meta);font-size:.75rem;color:var(--ink-3)}
.ranks li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.ranks li b{font-weight:600;font-variant-numeric:tabular-nums}
.ranks li u{position:absolute;left:0;bottom:0;height:3px;border-radius:var(--r-pill);
  background:var(--burgundy);opacity:.65}

/* ==================================================================
   TABLES
   ================================================================== */
.tbl{width:100%;border-collapse:separate;border-spacing:0;
  font-size:.8125rem;font-variant-numeric:tabular-nums}
.tbl th{font-family:var(--font-meta);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);font-weight:500;text-align:left;
  padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--hairline)}
.tbl td{padding:10px 14px;border-bottom:1px solid var(--hairline-soft);
  color:var(--ink-2);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--navy-50)}
.tbl .r{text-align:right}
.tbl .c{text-align:center}
.tbl .n{width:1%;white-space:nowrap}
.tbl a{font-weight:600;color:var(--ink)}
.tbl a:hover{color:var(--burgundy)}
/* A sticky <th> sticks to its nearest scroll container, and `overflow-x:auto`
   makes this one a scroll container on BOTH axes -- so the header only pins if
   the wrap is what scrolls vertically too. Hence the max-height: short tables
   never reach it, long ones scroll under a pinned header instead of running
   their headings off the top of the page. */
.tblwrap{overflow:auto;max-height:calc(100vh - var(--top-h) - var(--space-8))}
/* last-child, so a two-row thead pins its column names and lets the group
   captions ("What you charge") scroll away -- those are read once. */
.tbl thead tr:last-child th{position:sticky;top:0;z-index:10}
.tblfoot{display:flex;align-items:center;gap:10px;padding:9px 14px;
  border-top:1px solid var(--hairline-soft);
  font-family:var(--font-meta);font-size:.6875rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3)}
.tblfoot .right{margin-left:auto}

/* the product cell: swatch + name + appellation, the row's anchor */
.prod{display:grid;grid-template-columns:28px 1fr;column-gap:11px;align-items:center;min-width:0}
.prod .sw{grid-row:span 2;width:28px;height:36px;border-radius:var(--r-sm);
  background:var(--red-100);color:var(--red-700);display:grid;place-items:center;
  font-family:var(--font-display);font-size:.75rem;font-weight:700}
.prod .sw.white{background:var(--gold-100);color:var(--gold-700)}
.prod .sw.spark{background:var(--navy-100);color:var(--navy-700)}
.prod b{font-weight:600;font-size:.8125rem;letter-spacing:-.01em;color:var(--ink);
  align-self:end;line-height:1.25;overflow:hidden;white-space:normal;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2}
.tbl a.prod:hover b{color:var(--burgundy)}
.prod em{font-style:normal;font-size:.75rem;color:var(--ink-3);align-self:start;
  line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ==================================================================
   TAGS, PILLS, STATUS
   ================================================================== */
.tag{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;vertical-align:middle;font-size:.75rem;font-weight:600;
  padding:3px 9px;border-radius:var(--r-pill);background:var(--paper-2);color:var(--ink)}
.tag--pink{background:#F9B3C7;color:#32304F}
.tag--blue{background:#DFEAFF;color:#32304F}
.tag--gold{background:#FCF2BF;color:#32304F}
.tag--peach{background:#FAD5B4;color:#32304F}
.tag--violet{background:#DBD9F5;color:#32304F}
.tag--rose{background:#FBDCED;color:#32304F}

/* status is a word plus a dot, never a colour alone */
.st{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:600;
  white-space:nowrap;color:var(--ink-2)}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--navy-500);flex:none}
.st--ok{color:var(--green-ink)}      .st--ok::before{background:var(--green-500)}
.st--low{color:var(--amber)}         .st--low::before{background:var(--orange-500)}
.st--out{color:var(--ink-3)}         .st--out::before{background:var(--navy-500)}
.st--bad{color:var(--danger)}        .st--bad::before{background:var(--burgundy)}

.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;
  border-radius:var(--r-pill);font-size:.75rem;font-weight:600;
  background:var(--paper-2);color:var(--ink-2)}
.pill .i{width:13px;height:13px}
.pill--good{background:var(--green-tint);color:var(--green)}
.pill--warn{background:var(--amber-tint);color:var(--amber)}
.pill--bad{background:var(--danger-tint);color:var(--burgundy-deep)}
.pill--info{background:var(--blue-tint);color:var(--blue)}
.money{background:var(--blue-tint);color:var(--blue);font-weight:600;
  border-radius:var(--r-sm);padding:3px 7px;display:inline-block}

/* ==================================================================
   FILTER BAR
   ================================================================== */
.filters{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.filters .find{position:relative;display:flex;align-items:center;min-width:15rem;flex:1;max-width:26rem}
.filters .find .i{position:absolute;left:11px;width:15px;height:15px;color:var(--ink-3);pointer-events:none}
.filters .find input{width:100%;padding-left:33px}
.filters select{background-color:var(--surface)}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;
  border-radius:var(--r-pill);border:1px solid var(--hairline);background:var(--surface);
  font-size:.75rem;font-weight:600;color:var(--ink-2)}
.chip:hover{border-color:var(--hairline-strong);color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip .x{color:currentColor;opacity:.6}

/* ==================================================================
   PANELS FOR ACTIONS — the three-up "record what happened" block
   ================================================================== */
.acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:var(--space-3)}
.act{border:1px solid var(--hairline-soft);border-radius:var(--r-md);
  padding:var(--space-3) var(--space-4);background:var(--paper);
  display:flex;flex-direction:column;gap:var(--space-3)}
.act h3{display:flex;align-items:center;gap:7px}
.act h3 .i{width:15px;height:15px;color:var(--burgundy)}
.act p{font-size:.75rem;color:var(--ink-3);line-height:1.4;margin-top:-6px}
.act form{display:flex;flex-direction:column;gap:var(--space-3)}
.act .row{align-items:flex-end}

/* ==================================================================
   EMPTY / MESSAGE STATES
   ================================================================== */
.empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);
  padding:var(--space-7) var(--space-5);text-align:center;background:var(--surface);
  border:1px dashed var(--hairline);border-radius:var(--r-lg)}
.empty .i{width:30px;height:30px;color:var(--navy-500);stroke-width:1.4}
.empty h2{font-size:1rem}
.empty p{font-size:.8125rem;color:var(--ink-3);max-width:44ch;line-height:1.45}

.note{display:flex;gap:10px;padding:11px 14px;border-radius:var(--r-md);
  font-size:.8125rem;line-height:1.45;background:var(--paper-2);color:var(--ink-2)}
.note .i{width:16px;height:16px;flex:none;margin-top:2px}
.note--bad{background:var(--danger-tint);color:var(--burgundy-deep)}
.note--bad .i{color:var(--danger)}
.note--warn{background:var(--amber-tint);color:var(--amber)}
.note--good{background:var(--green-tint);color:var(--green)}
.note--info{background:var(--blue-tint);color:var(--blue)}

/* ==================================================================
   AUTH — the only pages without the shell
   ================================================================== */
.auth{min-height:100vh;display:grid;place-items:center;padding:var(--space-5);
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%)}
.auth__box{width:min(26rem,100%);display:flex;flex-direction:column;gap:var(--space-4)}
.auth__box .brand{font-size:1.5rem;justify-content:center}
.auth__box h1{font-size:1.375rem;text-align:center}
.auth__box .card{gap:var(--space-4)}
.auth__box .field input{height:38px}
.auth__box .btn{height:40px}
.auth__fine{text-align:center;font-size:.75rem;color:var(--ink-3)}

/* choose-a-business rows read as one list of destinations, not eight forms */
.pick{display:flex;align-items:center;gap:var(--space-3);width:100%;
  padding:var(--space-3) var(--space-4);background:var(--surface);
  border:1px solid var(--hairline-soft);border-radius:var(--r-md);
  box-shadow:var(--shadow-card);cursor:pointer;text-align:left;font:inherit;color:var(--ink);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.pick:hover{border-color:var(--burgundy);transform:translateY(-1px)}
.pick b{font-size:.9375rem;font-weight:600}
.pick .i{margin-left:auto;width:16px;height:16px;color:var(--ink-3)}

/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media (max-width:1180px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .span3{grid-column:span 2}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats--5,.stats--3{grid-template-columns:repeat(2,1fr)}
  .stage{padding:var(--space-4) var(--space-5) var(--space-7)}
}
@media (max-width:900px){
  :root{--rail-w:100%;--side-w:100%}
  .shell__body,.shell__body.has-side{grid-template-columns:1fr}
  .rail{position:static;height:auto;flex-direction:row;overflow-x:auto;
    border-right:0;border-bottom:1px solid var(--hairline-soft);padding:var(--space-2)}
  .rail a{flex:0 0 auto;flex-direction:row;gap:7px;padding:8px 12px}
  .rail a.on::before{display:none}
  .rail__end{margin-top:0;margin-left:auto}
  .rail__sep{display:none}
  .badge{position:static;margin-left:2px}
  .side{position:static;height:auto;flex-direction:row;overflow-x:auto;
    border-right:0;border-bottom:1px solid var(--hairline);padding:var(--space-3)}
  .side__t{display:none}
  .side a{flex:0 0 auto;border:1px solid var(--hairline);background:var(--surface)}
  .side__note{display:none}
  .side__more,.side__add{display:none}
  .bento,.bento--2{grid-template-columns:1fr}
  .span2,.span3{grid-column:span 1}
  .kpis{grid-template-columns:repeat(2,1fr)}
  /* The topbar search is the only wine search in the app; hiding it here left
     a somm on the floor scrolling 112 rows to find one bottle. Wrap it onto
     its own line instead. (.rail/.side are static at this width, so their
     sticky top:var(--top-h) offset no longer depends on the topbar height.) */
  .topbar{height:auto;flex-wrap:wrap;padding-bottom:var(--space-2);gap:var(--space-3)}
  .topsearch{order:3;flex:1 0 100%;max-width:none}
  .whoami__biz{display:none}
}
@media (max-width:600px){
  .stats,.stats--3,.stats--5{grid-template-columns:1fr}
  .stage{padding:var(--space-4) var(--space-4) var(--space-7)}
  h1{font-size:1.4rem}
}
@media print{
  .topbar,.rail,.side,.actions,.filters{display:none}
  .shell__body,.shell__body.has-side{grid-template-columns:1fr}
  .card{box-shadow:none;border-color:var(--hairline)}
}

/* A section's sub-sections: one rail down the left ties the indented cards to
   the parent above them. It's a flex child of .stage (sibling to the parent
   card), so it inherits the stage's vertical rhythm above and below, and lays
   its own children out on the same gap. Nests: a deeper subtree adds a rail.
   The rail sits at margin-left:0 -- flush under the parent card's own left
   edge, so it reads as that edge dropping straight down past the children
   rather than a line floating at an inset. The child cards keep their indent
   through padding-left instead. */
.subtree{margin-left:0;
  padding-left:calc(var(--space-5) + var(--space-3));
  border-left:2px solid var(--hairline);
  display:flex;flex-direction:column;gap:var(--space-4)}

/* The wine list editor: the menu name is the row, not the form on it. */
.menuname{font-size:.875rem;font-weight:600;color:var(--ink);display:block;
  line-height:1.3}
.renamer{margin-top:.35rem;gap:var(--space-2)}
.renamer input{font-size:.75rem;height:28px}
.renamer input::placeholder{font-style:italic}

/* ==================================================================
   PRICING — the editable table and its expanded evidence
   ================================================================== */
.tbl tr.prow > td{cursor:pointer}
.tbl tr.prow.is-open > td{background:var(--paper-2)}
.tbl tr.pdrawer > td{padding:0;background:var(--paper);
  border-bottom:1px solid var(--hairline)}
.tbl tr.pdrawer[hidden]{display:none}
.comps{padding:var(--space-3) var(--space-5) var(--space-4)}
.comps__head{display:flex;gap:var(--space-4);align-items:baseline;
  margin-bottom:var(--space-2);flex-wrap:wrap}
.comps .tbl th{background:transparent}
.comps .tbl td,.comps .tbl th{padding:6px 10px}

/* An edited cell has to look edited, or a page of typed prices is
   indistinguishable from a page of saved ones. */
/* Sized to their contents, not to a comfortable-looking box.
   At 13px tabular, four digits is ~30px; 3.1rem leaves room for that plus the
   input's own padding and border. The margin cell holds two digits and gets
   less. The surrounding td padding is cut too -- that was costing more width
   than the inputs were. */
.pcell{text-align:right;font-variant-numeric:tabular-nums;
  padding-inline:5px;min-width:0}
/* The browser's stepper arrows cost ~18px per cell and nobody prices a bottle
   by clicking up-arrow. Keyboard stepping still works. */
.pcell::-webkit-outer-spin-button,
.pcell::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pcell{-moz-appearance:textfield;appearance:textfield}
.pcell--money{width:3.1rem}
.pcell--pct{width:2.5rem}
.tbl th.tight,.tbl td.tight{padding-inline:5px;width:1%;white-space:nowrap}

.tbl .grouphead th{padding-bottom:3px;border-bottom:0;
  font-size:.6875rem;letter-spacing:.13em;color:var(--ink-3)}
.tbl .grouphead th:not(:empty){border-bottom:1px solid var(--hairline-soft)}
.tbl thead tr:last-child th{padding-top:5px}
.pcell.is-edited{border-color:var(--burgundy);
  box-shadow:0 0 0 2px var(--burgundy-tint);font-weight:600}
.pcell:disabled{background:var(--paper-2);color:var(--ink-3);cursor:not-allowed}
.derived{font-size:.75rem;color:var(--ink-3);white-space:nowrap}
.derived b{color:var(--ink);font-weight:600}
.derived.hot b{color:var(--danger)}

.savebar{position:sticky;bottom:0;z-index:20;display:flex;align-items:center;
  gap:var(--space-3);padding:var(--space-3) var(--space-5);background:var(--surface);
  border-top:1px solid var(--hairline);box-shadow:var(--shadow-raise);
  border-radius:0 0 var(--r-lg) var(--r-lg);flex-wrap:wrap}
.savebar[hidden]{display:none}
.savebar__count{font-weight:600}
.savebar__note{color:var(--ink-3);font-size:.8125rem}
.savebar .right{margin-left:auto;display:flex;gap:var(--space-2)}

/* ==================================================================
   OPPORTUNITIES — one shape per recommendation, whatever kind it is
   ================================================================== */
.opp{background:var(--surface);border:1px solid var(--hairline-soft);
  border-radius:var(--r-lg);box-shadow:var(--shadow-card);
  padding:var(--space-4) var(--space-5)}
/* Category colours carried over from the source, one per kind of work. */
.opp--PRICING{--cat-bg:#e7f0ea;--cat-fg:#1f6b4a}
.opp--INVENTORY{--cat-bg:#efe6f2;--cat-fg:#5b2a6b}
.opp--BTG{--cat-bg:#e6eef2;--cat-fg:#1f5169}
.opp--VARIANCE{--cat-bg:#f6e6e2;--cat-fg:#9a3412}
.opp--PURCHASING{--cat-bg:#f6ecdc;--cat-fg:#8a5a1f}
.opp--ASSORTMENT{--cat-bg:#eceae4;--cat-fg:#5a5348}
.opp--SERVICE{--cat-bg:#f4e9d8;--cat-fg:#7a5320}
.opp--IDENTITY{--cat-bg:#f6e2e8;--cat-fg:#8c2340}
.opp--POSITIONING{--cat-bg:#e3e9f6;--cat-fg:#2c4a86}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .opp{--cat-bg:rgb(255 255 255 / .08);--cat-fg:var(--ink)}
}
:root[data-theme="dark"] .opp{--cat-bg:rgb(255 255 255 / .08);--cat-fg:var(--ink)}

.opp__top{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.5rem var(--space-5)}
.opp__main{flex:1;min-width:16rem}
.opp__meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.opp__badge{display:inline-block;padding:2px 6px;border-radius:3px;font-size:.75rem;
  font-weight:600;background:var(--cat-bg);color:var(--cat-fg)}
.opp__conf{font-size:.75rem;color:var(--ink-3)}
.opp__t{font-family:var(--font-display);font-weight:700;font-size:1rem;
  letter-spacing:-.015em;line-height:1.3;margin-top:.35rem}
/* One sentence under the title, on the face. The title says what to do; this
   says why, once, in words somebody would use out loud. */
.opp__reason{font-size:.8125rem;color:var(--ink-2);margin-top:.35rem;
  line-height:1.55;max-width:56ch}
/* The section heading inside a repricing table. A director works the
   Rieslings in one sitting, so the wines arrive grouped even though the
   card is one action. */
.oppsec th{background:var(--paper-2);font-family:var(--font-meta);font-size:.6875rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;padding-top:.5rem;padding-bottom:.5rem}
/* Why a wine is on the card, as a chip rather than a run-on sentence.
   The colour carries the meaning: green is money you are making, amber is
   money you are not, grey is neither. Twenty-five rows should sort themselves
   by eye before a word is read. */
.tags{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:3px}
.tag{display:inline-block;margin:0 .25rem .2rem 0;padding:.1rem .4rem;
  border-radius:var(--r-pill);font-family:var(--font-meta);font-size:.6875rem;
  line-height:1.4;white-space:nowrap;border:1px solid transparent}
.tag--info{background:var(--paper-2);color:var(--ink-3);border-color:var(--hairline-soft)}
.tag--good{background:var(--green-tint);color:var(--green-ink);
  border-color:var(--green-tint)}
.tag--warn{background:var(--burgundy-tint);color:var(--burgundy-deep);
  border-color:var(--burgundy-tint)}
/* A price move reads as a direction before it reads as a number. */
.up{color:var(--green-ink);font-weight:600}
.down{color:var(--burgundy);font-weight:600}

.opp__money{text-align:right;flex:none;width:10.5rem}
.opp__figure{font-family:var(--font-display);font-weight:700;font-size:1.5rem;
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  color:var(--green-ink)}
.opp__figure--unsized{font-size:.9375rem;color:var(--ink-3);font-weight:600}
.opp__phrase{font-size:.75rem;color:var(--ink-3);margin-top:.3rem;line-height:1.3}
.opp__range{font-size:.75rem;color:var(--ink-3);margin-top:.15rem;
  font-variant-numeric:tabular-nums}

.opp__face{margin-top:var(--space-3);border-top:1px solid var(--hairline-soft);
  padding-top:.2rem}
.opp__face .tbl th{background:transparent;padding:.5rem .6rem}
.opp__face .tbl td{padding:.45rem .6rem}
.oppgrid{table-layout:fixed}
.oppgrid thead th{font-size:.6875rem}
.oppgrid tbody th{font-family:var(--font-text);font-size:.75rem;font-weight:600;
  color:var(--ink);text-transform:none;letter-spacing:0;width:5.5rem;
  border-bottom:1px solid var(--hairline-soft)}
.oppgrid td{vertical-align:top;font-size:.75rem;line-height:1.35}
.oppgrid td a{font-weight:600;color:var(--ink);display:block}
.oppgrid td a:hover{color:var(--burgundy)}
.oppgrid__note{display:block;color:var(--ink-3);font-size:.75rem;margin-top:2px}

.opp__why{margin-top:var(--space-3);border-top:1px solid var(--hairline-soft);
  padding-top:.6rem}
.opp__why summary{cursor:pointer;list-style:none;font-size:.75rem;font-weight:600;
  color:var(--burgundy)}
.opp__why summary::-webkit-details-marker{display:none}
.opp__why summary::before{content:"▶ ";font-size:.75rem;display:inline-block;
  transition:transform 150ms}
.opp__why[open] summary::before{content:"▼ "}
.opp__whybody{margin-top:.7rem;display:flex;flex-direction:column;gap:.7rem}
.opp__label{font-family:var(--font-meta);font-size:.6875rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.15rem}
.opp__whybody p{font-size:.75rem;color:var(--ink-2);line-height:1.5}
.opp__whybody ul{display:flex;flex-direction:column;gap:.2rem}
.opp__whybody li{font-size:.75rem;color:var(--ink-2);line-height:1.5;
  padding-left:.8rem;position:relative}
.opp__whybody li::before{content:"·";position:absolute;left:0;color:var(--ink-3)}

/* The category filter, as a row of chips above the list. */
/* The home page's labels for what is waiting. Bigger than .oppfilter, which
   is a filter you scan; these are targets you aim at, and each one is the only
   thing standing between the home page and a decision. */
.jumps{display:flex;flex-wrap:wrap;gap:8px}
.jumps a{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;
  border-radius:var(--r-md);border:1px solid var(--hairline);
  background:var(--surface);color:var(--ink-2);
  font-size:.8125rem;font-weight:600;line-height:1.2}
.jumps a .i{width:16px;height:16px;color:var(--ink-3);stroke-width:1.8}
.jumps a::after{content:"→";opacity:.4;font-weight:400}
.jumps a:hover{border-color:var(--hairline-strong);color:var(--ink)}
.jumps a:hover .i{color:var(--burgundy)}

.oppfilter{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.oppfilter a{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
  border-radius:var(--r-sm);font-size:.75rem;font-weight:500;
  background:var(--surface);color:var(--ink-3);border:1px solid var(--hairline)}
.oppfilter a b{font-variant-numeric:tabular-nums;opacity:.7;font-weight:500}
.oppfilter a:hover{color:var(--ink)}
.oppfilter a.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}