/* =============================================================================
 * WBIP design system — STYLE F, "Ровно посередине" / "Exactly in the middle".
 *
 * The material comes from the soft-modern world: a warm #FAF9F7 ground with a
 * faint grain and the 24px ruling of a ledger, white sheets with a gentle lift, chip
 * filters that carry their counts, a card built as a document with a
 * perforated tear-off spine, a 2px hover lift.
 * The law of the page comes from the Swiss bank: text economy, uppercase
 * letterspaced eyebrows over every block, monospace tabular figures, hairline
 * rules INSIDE a sheet instead of a box inside a box, tick-marked scales,
 * record indices, footnotes.
 *
 * One accent: indigo cooled toward ink. Radii 10px sheets / 8px controls.
 * Onest for headings and large figures, Inter for body, JetBrains Mono for
 * every figure, index, code and date.
 *
 * CLASS CONTRACT: nothing here is renamed. 145 templates depend on these
 * selectors, so every existing class keeps its name and only its values move.
 * New F-specific pieces are added as new classes at the end of this file.
 * Binding rules for the templates live in DESIGN_F.md.
 * ========================================================================== */

:root{
  /* --- material -------------------------------------------------------- */
  --bg:#FAF9F7;            /* the warm ground */
  --ground:#FAF9F7;
  --bg2:#F6F5F2;           /* sunk: inputs' rail, table head, wells */
  --panel:#FFFFFF;         /* the sheet */
  --panel2:#F6F5F2;
  --sheet:#FFFFFF;
  --sunk:#F6F5F2;
  --line:#E6E3DE;          /* the hairline */
  --line-2:#D6D2CB;        /* the hairline that has to be seen */
  --track:#EAE7E2;

  --text:#1A1A19;
  --ink:#1A1A19;
  --ink-2:#3A3835;
  --muted:#6E6862;         /* AA on the ground and on every sheet */
  --muted-2:#5C5751;

  /* --- one accent: indigo cooled toward ink ---------------------------- */
  --blue:#2C3E8C;
  --blue-deep:#1F2C68;
  --blue-wash:#EEEFF6;
  --blue-edge:rgba(44,62,140,.30);

  /* --- semantics: states, never decoration ----------------------------- */
  --sage:#3F6B5F;   --sage-wash:#ECF2EF;   --sage-edge:#DCE7E2;
  --amber:#8A5209;  --amber-wash:#FAF1E4;  --amber-edge:#F0E2CC;
  --plum:#6B4E8C;   --plum-wash:#F1EDF7;   --plum-edge:#E5DDF0;
  --stone:#57534E;  --stone-wash:#F1EFEC;  --stone-edge:#E3DFDA;
  --rose:#A33A2A;   --rose-wash:#FAEDEA;   --rose-edge:#EFD8D2;

  /* --- legacy token names, remapped onto the F palette ------------------
     Templates written before F still read these; they now resolve to the
     F semantics instead of the majolica ones. Never delete a name here. */
  --green:#3F6B5F;
  --teal:#3F6B5F;
  --teal-ink:#35594F;
  --gold:#8A5209;
  --gold-ink:#7A4708;
  --gold-bright:#D8A63A;   /* light amber: ink text on it stays AA */
  --terra:#9A5A2A;
  --terra-ink:#7E4526;
  --purple:#6B4E8C;
  --red:#A33A2A;

  /* --- the ruling of a ledger ------------------------------------------
     The ground is accounting paper: a 24px ruling locked to the body leading
     (15 x 1.6 = 24), plus one binder rule down the left margin of the column.
     Both are printed ON the paper -- they live in the body background and
     scroll with the record, never pinned to the glass with position:fixed.

     --rule-ink is not a taste number. It was swept on rendered pixels and it
     is bounded on both sides. From above, readability: --muted at 13px over a
     rule measures 4.84:1 in the shell and 4.75:1 on the landing (whose own
     chart layer tints the margin); at .042 the landing falls to 4.61 and at
     .050 to 4.56, under the 4.6 the ground has to hold. From above again,
     hierarchy: the sheet hairline drops the ground 20.6 in luma, and at .030
     the ruling drops it 7.2 -- 35% of a rule, so the ground reads as paper
     and never as a rule you follow with your eye. At .045 that would be 48%,
     which is the ornament starting to argue with the hairlines. From below,
     presence: at .026 the amplitude falls to 5.4 on the landing, too faint in
     the open margin. .030 is the value that satisfies all three. */
  --rule:24px;                    /* step = the body leading, 15 x 1.6       */
  --rule-top:23px;                /* phase: the ruling sits on a baseline    */
  --rule-ink:rgba(30,36,58,.030); /* 1/3 of a hairline, AA headroom          */
  --bind-ink:rgba(30,36,58,.060); /* the binder rule in the column margin    */
  --bind-x:8px;                   /* narrow screens: half of the 16px pad    */

  /* --- geometry -------------------------------------------------------- */
  --radius:10px;           /* sheets */
  --radius-sm:8px;         /* controls */
  --r:10px;
  --r-sm:8px;
  --topbar-h:62px;
  --rail-w:240px;

  /* --- lift ------------------------------------------------------------ */
  --sh:0 1px 2px rgba(26,26,25,.05), 0 6px 16px -10px rgba(26,26,25,.16);
  --sh-lift:0 2px 4px rgba(26,26,25,.05), 0 16px 30px -14px rgba(44,62,140,.30);
  --top-light:inset 0 1px 0 rgba(255,255,255,.9);

  --ease:cubic-bezier(.2,.85,.25,1);

  /* --- type ------------------------------------------------------------ */
  --font-display:'Onest', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
}

*{margin:0;padding:0;box-sizing:border-box}

html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-color:var(--line-2) var(--bg)}

/* The ground: warm paper, faint grain, the ruling of a ledger. No glow --
   a wash across the page only costs the footnote contrast and buys nothing.
   Grain and ruling are one substrate: both are printed on the sheet, so both
   ride in the body background and scroll with the document. The ruling layer
   is sized to exactly one 24px period so the tile can never drift out of
   phase over a long page. White sheets stay opaque and float over it. */
body{
  font-family:var(--font-body);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.030'/%3E%3C/svg%3E"),
    repeating-linear-gradient(to bottom,
      var(--rule-ink) 0 1px, transparent 1px var(--rule)),
    var(--bg);
  background-position:0 0, 0 var(--rule-top), 0 0;
  background-size:180px 180px, 100% var(--rule), auto;
  background-blend-mode:multiply, normal, normal;
  color:var(--text);
  font-size:15px;
  line-height:1.6;
  letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
}
/* The binder rule: one vertical line down the left margin of the text column,
   the way a register is punched for its folder. It is the only part of the
   treatment that may be pinned -- nothing about a vertical line moves when the
   page scrolls. It is drawn only where there is a column edge to bind: the app
   shell and the landing. Auth screens and the invoice sheet get none. */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;display:none;
  background:linear-gradient(90deg,
    transparent 0 var(--bind-x),
    var(--bind-ink) var(--bind-x) calc(var(--bind-x) + 1px),
    transparent calc(var(--bind-x) + 1px));
}
body:has(.shell)::before,
body:has(.landing)::before{display:block}
/* Shell: the column starts after the rail, the rule sits in half its padding.
   Landing: the column is centred on 1320, the rule follows it. */
@media (min-width:901px){
  body:has(.shell)::before{--bind-x:calc(var(--rail-w) + 20px)}
  body:has(.landing)::before{--bind-x:max(20px, calc(50% - 660px + 20px))}
}
@media (min-width:901px) and (max-width:1200px){
  /* the column padding drops to 28px here, so the rule moves in with it */
  body:has(.shell)::before{--bind-x:calc(var(--rail-w) + 14px)}
  body:has(.landing)::before{--bind-x:max(14px, calc(50% - 660px + 14px))}
}

a{color:var(--blue);text-decoration:none;transition:color .17s var(--ease)}
a:hover{color:var(--blue-deep)}

img,svg{max-width:100%}
table{border-collapse:collapse;width:100%}
/* A control never falls back to the UA font: F has three families to lose. */
button,input,select,textarea{font-family:inherit}

h1,h2,h3{
  font-family:var(--font-display);font-weight:600;line-height:1.18;
  letter-spacing:-.028em;
}
h1{font-size:34px;letter-spacing:-.035em;line-height:1.08}
h2{font-size:22px;letter-spacing:-.03em}
h3{font-size:17px;letter-spacing:-.024em}

/* Utilities the whole system leans on: every figure is monospaced and tabular,
   every large figure is Onest and tabular. */
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.num{font-family:var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.03em}

/* ---------- app shell ---------- */

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

.sidebar{
  position:fixed;inset:0 auto 0 0;width:var(--rail-w);z-index:50;
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-right:1px solid var(--line);
  box-shadow:var(--top-light);
  padding:22px 12px 16px;
  transition:transform .25s var(--ease);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sidebar{background:var(--panel)}
}

.logo{
  font-family:var(--font-display);font-weight:700;font-size:20px;
  color:var(--ink);letter-spacing:-.03em;padding:0 10px;
  display:inline-flex;align-items:center;gap:9px;
}
.logo:hover{color:var(--ink)}
/* The dot of the wordmark became the mark: an indigo tile with the initial. */
.logo-dot{
  width:26px;height:26px;order:-1;border-radius:var(--radius-sm);flex:none;
  display:inline-grid;place-items:center;
  background:var(--blue);color:#fff;font-size:13px;font-weight:700;
  letter-spacing:0;text-indent:-9999px;overflow:hidden;position:relative;
  box-shadow:0 2px 5px rgba(44,62,140,.28), var(--top-light);
}
.logo-dot::after{
  content:'W';position:absolute;inset:0;display:grid;place-items:center;
  text-indent:0;font-family:var(--font-display);
}
.logo-sub{
  font-size:13px;color:var(--muted-2);letter-spacing:.12em;text-transform:uppercase;
  font-weight:600;line-height:1.3;padding:10px 10px 0;margin-bottom:22px;
}

.nav{display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto}
.nav-link{
  display:block;padding:9px 12px;border-radius:var(--radius-sm);
  border-left:2px solid transparent;
  color:var(--muted-2);font-weight:500;font-size:14px;letter-spacing:-.008em;
  transition:background .17s var(--ease),color .17s var(--ease),
             border-color .17s var(--ease);
}
.nav-link:hover{background:var(--sunk);color:var(--ink)}
.nav-link.active{background:var(--blue-wash);border-left-color:var(--blue);color:var(--blue)}
.nav-group{
  margin:18px 12px 6px;font-size:13px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2);
}

.user-block{
  display:flex;align-items:center;gap:10px;margin-top:14px;
  padding:12px 10px 4px;border-top:1px solid var(--line);
}
.user-meta{min-width:0}
.user-name{
  font-weight:600;font-size:13px;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.user-role{font-size:13px;line-height:1.3;color:var(--muted)}

.main{flex:1;margin-left:var(--rail-w);min-width:0;display:flex;flex-direction:column}

.topbar{
  position:sticky;top:0;z-index:40;height:var(--topbar-h);
  display:flex;align-items:center;gap:16px;padding:0 28px;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.topbar-title{
  font-family:var(--font-display);font-size:15px;font-weight:600;
  letter-spacing:-.02em;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px}

.lang-switch{
  display:inline-flex;background:var(--sunk);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:2px;gap:2px;
}
.lang-switch a{
  padding:4px 9px;border-radius:6px;font-size:13px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.3;
  transition:color .17s var(--ease),background .17s var(--ease);
}
.lang-switch a:hover{color:var(--ink)}
.lang-switch a.active{background:var(--panel);color:var(--ink);box-shadow:var(--sh)}

.content{max-width:1320px;padding:28px 40px 96px;width:100%;position:relative;z-index:1}

/* The page header pattern: eyebrow, giant tracked headline, figures register
   on the right. Templates put .eyebrow + h1 in the left column and a
   <dl class="figures"> in the right one. */
.page-head{margin-bottom:24px;padding-bottom:0}
.page-head h1{
  font-size:clamp(28px, 3.2vw, 44px);line-height:1.02;letter-spacing:-.04em;
  overflow-wrap:break-word;
}
.page-head .eyebrow{margin-bottom:10px}
/* The only prose allowed at the top of a screen — one sentence, footnote size.
   Anything longer belongs at the bottom in .footnote (see DESIGN_F.md). */
.page-head-sub{
  color:var(--muted);font-size:13px;line-height:1.6;margin-top:12px;max-width:82ch;
}
/* Header split: headline left, figures register right, both sitting on the
   same baseline. */
.page-head-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:44px;align-items:end;
}

/* burger (mobile) */
.burger{
  display:none;background:none;border:0;cursor:pointer;padding:6px;
  flex-direction:column;gap:4px;
}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(26,26,25,.34);z-index:45}

/* ---------- buttons ---------- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 16px;border-radius:var(--radius-sm);border:1px solid transparent;
  font-family:var(--font-body);font-weight:600;font-size:14px;line-height:1.2;
  cursor:pointer;white-space:nowrap;
  transition:background .17s var(--ease),border-color .17s var(--ease),
             box-shadow .17s var(--ease),transform .17s var(--ease),color .17s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:var(--blue);color:#fff;
  box-shadow:0 1px 2px rgba(31,44,104,.30), inset 0 1px 0 rgba(255,255,255,.16);
}
.btn-primary:hover{
  background:var(--blue-deep);color:#fff;
  box-shadow:0 2px 4px rgba(31,44,104,.24), 0 10px 20px -10px rgba(31,44,104,.6);
}
/* The second action is a hairline, not a second colour. */
.btn-ghost{background:var(--panel);border-color:var(--line-2);color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--blue-edge);color:var(--blue);box-shadow:var(--sh)}
/* The old gold call-to-action keeps its name and becomes the quiet accent. */
.btn-gold{background:var(--amber-wash);border-color:var(--amber-edge);color:var(--gold-ink)}
.btn-gold:hover{border-color:var(--amber);color:var(--gold-ink);box-shadow:var(--sh)}
.btn-danger{background:var(--rose-wash);border-color:var(--rose-edge);color:var(--red)}
.btn-danger:hover{border-color:var(--red);color:var(--red);box-shadow:var(--sh)}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:6px}
.btn-block{width:100%}

/* ---------- cards & grid ---------- */

/* A sheet: white, one hairline, 10px, a gentle lift off the warm ground.
   Inside a sheet, structure is drawn with hairlines — never with another box. */
.card{
  background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;margin-bottom:16px;
  box-shadow:var(--sh), var(--top-light);
}
/* The eyebrow of a sheet, with the hairline that opens the block under it. */
.card-title{
  display:block;font-size:13px;font-weight:600;line-height:1.2;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);
  padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--line);
}
a.card{display:block;color:var(--text)}
a.card:hover{color:var(--text)}

.grid{display:grid;gap:16px;margin-bottom:16px}
.grid > *{min-width:0}
.grid .card{margin-bottom:0}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.grid.g2-wide{grid-template-columns:1.4fr 1fr}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.grid.g4{grid-template-columns:repeat(4,1fr)}
.grid-loose{align-items:start}

.card-tile{display:flex;flex-direction:column}
.card-tile-body{flex:1}
.card-tile-foot{margin-top:auto;padding-top:14px}

/* ---------- stats ---------- */

.stat{display:flex;flex-direction:column;gap:8px}
.stat-value{
  font-family:var(--font-display);font-size:30px;font-weight:700;line-height:1;
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--ink);
}
.stat-value small{
  font-family:var(--font-mono);font-size:14px;font-weight:400;color:var(--muted);
  letter-spacing:0;margin-left:4px;
}
.stat-label{
  font-size:13px;font-weight:600;line-height:1.2;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2);
}
.stat-star{color:var(--amber);font-size:16px}

/* ---------- badges & tags ---------- */

/* A status stamp, not a pill: 6px corners, 13px, one wash and one tinted edge. */
.badge{
  display:inline-block;padding:3px 8px;border-radius:6px;
  font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  line-height:1.45;border:1px solid transparent;vertical-align:middle;
  /* A stamp is one word by construction: it never wraps, anywhere. */
  white-space:nowrap;
}
.badge-blue{background:var(--blue-wash);color:var(--blue);border-color:#DFE1EF}
.badge-gold{background:var(--amber-wash);color:var(--amber);border-color:var(--amber-edge)}
.badge-green{background:var(--sage-wash);color:var(--sage);border-color:var(--sage-edge)}
.badge-red{background:var(--rose-wash);color:var(--red);border-color:var(--rose-edge)}
.badge-gray{background:var(--stone-wash);color:var(--stone);border-color:var(--stone-edge)}
.badge-purple{background:var(--plum-wash);color:var(--plum);border-color:var(--plum-edge)}

.tag{
  display:inline-block;max-width:100%;padding:2px 9px;border-radius:6px;
  background:var(--sunk);border:1px solid var(--line);
  font-size:13px;font-weight:400;line-height:1.5;color:var(--muted-2);
  margin:2px 4px 2px 0;vertical-align:middle;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* «+3» after a truncated tag row: the count of what the card does not show.
   Monospaced and borderless — a footnote to the tags, not another tag. */
.tag-more{
  display:inline-block;padding:0 2px;
  font-family:var(--font-mono);font-size:13px;line-height:1.5;
  color:var(--muted);font-variant-numeric:tabular-nums;
}
/* Verified reads as a mark beside the name instead of a stamp on every card:
   when nearly every row carries it, a full stamp is noise, not information. */
.ver-check{
  display:inline-block;margin-left:5px;font-size:13px;font-weight:700;
  color:var(--sage);vertical-align:baseline;
}

/* ---------- need families ---------- */

/* Fifteen need types in one two-column list read as a wall: the rail states the
   family (buying / selling / capital / partnership) before the label is read,
   and it also marks where each entry starts in a gapless grid. */
.need-fam{border-left:3px solid var(--line-2);padding-left:12px}
.need-demand{border-left-color:var(--blue)}
.need-supply{border-left-color:var(--sage)}
.need-capital{border-left-color:var(--amber)}
.need-partner{border-left-color:var(--plum)}

/* ---------- table ---------- */

.table-wrap{overflow-x:auto}
/* Opt-in vertical scroller: this is what makes the sticky head actually stick.
   Without it the head rule is inert, which is correct, not broken. */
.table-scroll{overflow:auto;max-height:min(70vh,720px)}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{
  position:sticky;top:0;z-index:2;
  text-align:left;padding:13px 14px;background:var(--sunk);
  font-size:13px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted-2);white-space:nowrap;
  border-bottom:1px solid var(--line);
}
.table td{
  padding:14px;border-bottom:1px solid var(--line);vertical-align:middle;
}
/* Every figure in a table is monospaced and tabular so columns line up. */
.table .mono,.table .num,.table td[data-num]{font-variant-numeric:tabular-nums}
.table .badge{white-space:nowrap}
.table-fluid-first th:first-child,
.table-fluid-first td:first-child{width:100%}
.table tbody tr{transition:background .16s var(--ease)}
.table tbody tr:hover{background:#FCFBF9}
.table tbody tr:last-child td{border-bottom:0}
.td-sub{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.45}
.td-muted{color:var(--muted);font-size:13px}
/* A right-aligned numeric cell. */
.td-num{
  text-align:right;font-family:var(--font-mono);font-size:13px;
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

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

.form-row{display:flex;flex-direction:column;margin-bottom:16px}
/* The label is always visible, always above the field, always an eyebrow. */
.form-row label{
  font-size:13px;font-weight:600;line-height:1.2;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:8px;
}

input,select,textarea{
  width:100%;min-height:44px;
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--radius-sm);
  color:var(--text);font-family:var(--font-body);font-size:15px;line-height:1.35;
  padding:11px 13px;outline:none;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--muted)}
input:hover,select:hover{border-color:var(--blue-edge)}
input:focus,select:focus,textarea:focus{
  border-color:var(--blue);box-shadow:0 0 0 3px rgba(44,62,140,.14);
}
/* A soft ring for the mouse, a real outline for the keyboard. */
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;box-shadow:none;
}
a:focus-visible,button:focus-visible,summary:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--blue);outline-offset:2px;border-radius:6px;
}
select{
  cursor:pointer;-webkit-appearance:none;appearance:none;
  padding-right:34px;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E6862' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
}
select option{background:var(--panel);color:var(--text)}
select[multiple]{padding:6px 4px;cursor:default;background-image:none}
select[multiple] option{padding:4px 9px;line-height:21px}
textarea{min-height:104px;resize:vertical}

/* ---------- searchbar ---------- */

.searchbar{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.searchbar input{flex:1;min-width:180px;width:auto;max-width:100%}
.searchbar select{width:auto;min-width:0;max-width:100%}

/* ---------- key-value ---------- */

/* Label / value rows on a hairline — the fact register in its simplest form. */
.kv{
  display:flex;justify-content:space-between;gap:16px;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;
}
.kv:last-child{border-bottom:0}
.kv-label{color:var(--muted);flex-shrink:0;font-size:13px}
.kv-value{
  text-align:right;overflow-wrap:break-word;font-weight:500;
  font-variant-numeric:tabular-nums;
}

/* ---------- empty / flash ---------- */

.empty{
  text-align:center;color:var(--muted);padding:34px 20px;
  border:1px dashed var(--line-2);border-radius:var(--radius);font-size:14px;
  background:var(--sunk);
}
/* The empty state states the absence and offers the way out — no apology. */
.empty strong,.empty b{
  display:block;font-family:var(--font-display);font-weight:600;font-size:16px;
  letter-spacing:-.02em;color:var(--ink);margin-bottom:6px;
}

/* A message is a sheet with the state written down its left edge. */
.flash{
  padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:14px;
  font-weight:500;font-size:14px;
  background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line-2);
  box-shadow:var(--sh);
  transition:opacity .5s var(--ease);
}
.flash-ok{border-left-color:var(--sage);color:var(--ink-2);background:var(--sage-wash)}
.flash-err{border-left-color:var(--red);color:var(--ink-2);background:var(--rose-wash)}
.flash.hide{opacity:0}
/* A standing state, not an event: it carries a title, a sentence and a way
   out, and unlike a flash it is never dismissed on its own. */
.flash-note{
  border-left-color:var(--amber);background:var(--amber-wash);color:var(--ink-2);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
}
.flash-note b{font-weight:600;color:var(--ink)}
.flash-note span{flex:1 1 240px;min-width:0;font-weight:400}
.flash-note a{color:var(--gold-ink);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}

/* A control that exists but is not yet earned: still readable, so the company
   sees what approval will unlock, and plainly not pressable. */
.is-locked{opacity:.4;cursor:not-allowed;filter:grayscale(1)}
.is-locked:hover{opacity:.4}

/* ---------- progress ---------- */

/* The bare bar. When the value has to be read, use .scale (below) instead:
   it carries the ticks, the number and the legend. */
.progress{
  position:relative;height:8px;background:var(--track);border-radius:3px;
  overflow:hidden;border:0;
}
.progress > span, .progress-inner{
  display:block;height:100%;border-radius:inherit;background:var(--blue);
}

/* ---------- avatar ---------- */

/* An index tile, not a portrait: mono initials on a wash, 8px corners. */
.avatar{
  width:38px;height:38px;border-radius:var(--radius-sm);flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--blue-wash);border:1px solid #DFE1EF;
  font-family:var(--font-mono);font-size:13px;font-weight:500;color:var(--blue);
  text-transform:uppercase;letter-spacing:0;line-height:1;
}
.avatar-lg{width:64px;height:64px;font-size:19px;border-radius:var(--radius)}

/* ---------- deal stage pipeline ---------- */

.stage-pipeline{display:flex;gap:0;margin:14px 0;overflow-x:auto;padding-bottom:4px}
.stage{
  flex:1;min-width:92px;position:relative;text-align:left;
  padding:10px 8px 0;font-size:13px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);line-height:1.3;
}
.stage::before{
  content:'';display:block;height:4px;border-radius:2px;margin-bottom:9px;
  background:var(--track);transition:background .2s var(--ease);
}
.stage.done{color:var(--blue)}
.stage.done::before{background:var(--blue)}
.stage.current{color:var(--gold-ink)}
.stage.current::before{background:var(--amber)}

/* ---------- checklist ---------- */

.checklist{list-style:none}
.check-item{
  display:flex;align-items:center;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--line);
}
.check-item:last-child{border-bottom:0}
.check-item a{color:var(--text);font-weight:500}
.check-item a:hover{color:var(--blue)}
.check-mark{
  width:26px;height:26px;border-radius:6px;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--sunk);border:1px solid var(--line);
  font-family:var(--font-mono);font-size:13px;font-weight:500;color:var(--muted);
}
.check-item.done .check-mark{
  background:var(--sage-wash);border-color:var(--sage-edge);color:var(--sage);
}
.check-item.done a{color:var(--muted);text-decoration:line-through}

/* ---------- activity feed ---------- */

.feed{list-style:none}
.feed-item{padding:11px 0 11px 16px;border-left:1px solid var(--line);position:relative}
.feed-item::before{
  content:'';position:absolute;left:-3px;top:19px;width:5px;height:5px;
  border-radius:50%;background:var(--blue);
}
.feed-text{font-size:14px;font-weight:500;letter-spacing:-.01em}
.feed-meta{font-family:var(--font-mono);font-size:13px;color:var(--muted);margin-top:3px}

/* ---------- landing ---------- */

.landing{max-width:1320px;margin:0 auto;padding:0 40px 60px;position:relative;z-index:1}
.landing-nav{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:18px 0;border-bottom:1px solid var(--line);
}
.landing-nav .logo{padding:0}
.landing-nav-right{display:flex;align-items:center;gap:14px}

.hero{padding:76px 0 52px;max-width:900px}
/* The kicker is the eyebrow of the landing page. */
.hero-kicker{
  display:block;font-size:13px;font-weight:600;line-height:1.2;
  letter-spacing:.13em;text-transform:uppercase;color:var(--blue);
  margin-bottom:20px;
}
.hero-title{
  font-family:var(--font-display);font-weight:600;line-height:1.02;
  font-size:clamp(34px, 5.4vw, 64px);letter-spacing:-.042em;
  color:var(--ink);margin-bottom:20px;
}
.hero-sub{font-size:16px;color:var(--muted-2);max-width:66ch;margin-bottom:30px;line-height:1.6}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

.landing-stats{margin:14px 0 44px}

.landing-chain{margin-bottom:44px}
.chain-title{
  font-size:13px;font-weight:600;line-height:1.2;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:14px;
}
.chain{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:18px 22px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--sh), var(--top-light);
}
.chain-step{
  font-family:var(--font-body);font-size:13px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;color:var(--blue);
  padding:6px 12px;border:1px solid #DFE1EF;border-radius:var(--radius-sm);
  background:var(--blue-wash);white-space:nowrap;
}
.chain-arrow{font-family:var(--font-mono);color:var(--muted);font-weight:400}

.landing-features .card-title{color:var(--muted-2)}
.feature-text{color:var(--muted-2);font-size:14px;line-height:1.6}

.landing-footer{
  border-top:1px solid var(--line);padding-top:22px;margin-top:20px;
  color:var(--muted);font-size:13px;letter-spacing:.02em;
}

/* ---------- auth ---------- */

.auth-wrap{
  min-height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:32px 20px;position:relative;z-index:1;
}
.auth-top{margin-bottom:22px}
.auth-card{width:100%;max-width:420px;padding:30px 28px}
.auth-card .logo{margin-bottom:8px}
.auth-title{margin:12px 0 4px;font-size:26px}
.auth-sub{color:var(--muted);font-size:13px;margin-bottom:22px;line-height:1.55}
.auth-alt{margin-top:18px;font-size:13px;color:var(--muted);text-align:center}

/* ==========================================================================
   F-SPECIFIC PIECES — new classes. Nothing above is renamed; everything here
   is new vocabulary for the templates. See DESIGN_F.md for the contract.
   ========================================================================== */

/* --- 1. The eyebrow: the uppercase letterspaced label over every block ---
   Never smaller than 13px, never sentence case, never a sentence. */
.eyebrow{
  display:block;font-size:13px;line-height:1.2;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);
}
.eyebrow-blue{color:var(--blue)}
.eyebrow-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.eyebrow-row .eyebrow{margin-right:auto}

/* --- 2. The record index: the number of the row and, by its wash, its family
   Put it first in a card head; two mono digits, never a decoration. */
.rec-idx{
  width:34px;height:34px;flex:none;border-radius:var(--radius-sm);
  display:inline-grid;place-items:center;
  font-family:var(--font-mono);font-size:13px;font-weight:500;
  font-variant-numeric:tabular-nums;
  border:1px solid var(--line);background:var(--sunk);color:var(--muted-2);
}
.rec-idx-blue {background:var(--blue-wash); color:var(--blue); border-color:#DFE1EF}
.rec-idx-sage {background:var(--sage-wash); color:var(--sage); border-color:var(--sage-edge)}
.rec-idx-amber{background:var(--amber-wash);color:var(--amber);border-color:var(--amber-edge)}
.rec-idx-plum {background:var(--plum-wash); color:var(--plum); border-color:var(--plum-edge)}
.rec-idx-sm{width:28px;height:28px;border-radius:6px}

/* --- 3. The tick-marked scale: a drafting rule, not a progress bar ---------
   The real value lives in the markup as --fill (and in data-fill for fx.js),
   so the scale is honest with the script switched off. */
.scale{min-width:0}
.scale-head{display:flex;align-items:baseline;gap:8px;margin-bottom:9px}
.scale-head .eyebrow{margin-right:auto}
.scale-val{
  font-family:var(--font-display);font-weight:700;font-size:24px;line-height:1;
  letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--ink);
}
.scale-max{font-family:var(--font-mono);font-size:13px;color:var(--muted)}
.scale-track{
  position:relative;height:8px;border-radius:3px;background:var(--track);overflow:hidden;
}
.scale-track > i{
  position:absolute;left:0;top:0;bottom:0;width:var(--fill,0);
  border-radius:inherit;background:var(--blue);
  transition:width .9s var(--ease);
}
/* Motion comes from the EXISTING [data-bar] hook of fx.js — put
   data-bar data-bar-dir="right" data-bar-value="75" on the same <i> and
   fx.css takes the width over. With the script off, --fill above still shows
   the truth; with reduced motion, fx.js sets the final width immediately. */
.scale-track.full > i{background:var(--blue-deep)}
.scale-ticks{position:relative;height:7px;margin-top:3px}
.scale-ticks::before,.scale-ticks::after{content:'';position:absolute;left:0;right:0;top:0}
.scale-ticks::before{
  height:4px;
  background-image:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 10%);
}
.scale-ticks::after{
  height:7px;
  background-image:repeating-linear-gradient(90deg,var(--muted) 0 1px,transparent 1px 25%);
}
.scale-legend{
  display:flex;justify-content:space-between;margin-top:5px;
  font-family:var(--font-mono);font-size:13px;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.scale-sm .scale-track{height:6px}
.scale-sm .scale-ticks{height:5px;margin-top:2px}
.scale-sm .scale-ticks::before{height:3px}
.scale-sm .scale-ticks::after{height:5px}
.scale-lg .scale-track{height:14px;border-radius:4px}
.scale-lg .scale-ticks{height:9px}
.scale-lg .scale-ticks::before{
  background-image:repeating-linear-gradient(90deg,var(--line-2) 0 1px,transparent 1px 2.5%);
}
.scale-lg .scale-ticks::after{height:9px}
.scale-lg .scale-val{font-size:32px}

/* --- 4. The tear-off spine: the foot of a card, perforated off the sheet ---
   Put it last inside a .card that has .card-doc (which removes the sheet's own
   padding so body and spine can own theirs). */
.card-doc{padding:0;overflow:visible;display:flex;flex-direction:column}
.card-doc > .card-body{padding:16px 18px 15px;flex:1;display:flex;flex-direction:column}
.card-spine{
  position:relative;margin-top:auto;padding:14px 18px 15px;background:var(--sunk);
  border-top:1px dashed var(--line-2);border-radius:0 0 var(--radius) var(--radius);
}
.card-spine::before,.card-spine::after{
  content:'';position:absolute;top:-7px;width:13px;height:13px;border-radius:50%;
  background:var(--ground);border:1px solid var(--line);
  transition:border-color .22s var(--ease);
}
.card-spine::before{left:-7px}
.card-spine::after{right:-7px}
.card:hover > .card-spine::before,
.card:hover > .card-spine::after{border-color:var(--blue-edge)}
.card:hover .scale-val{color:var(--blue)}

/* --- 5. The micro-register: two to four values on hairline dividers --------
   Replaces the descriptive sentence under a card title. <dl> of <div><dt><dd>. */
.microreg{display:flex;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.microreg > div{padding:0 11px;border-left:1px solid var(--line);min-width:0;flex:1}
.microreg > div:first-child{padding-left:0;border-left:0}
.microreg > div:last-child{padding-right:0}
.microreg dt{
  font-size:13px;font-weight:600;line-height:1.2;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.microreg dd{
  margin-top:5px;font-size:14px;font-weight:600;color:var(--ink);line-height:1.3;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.microreg dd.m,.microreg dd.mono{font-family:var(--font-mono);font-weight:500}
.microreg-flush{margin-top:0;padding-top:0;border-top:0}

/* --- 6. The fact register: label/value cells in one sheet, hairline grid ---
   The answer to "write a paragraph about this company". */
.factreg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:hidden}
.factreg .fact{
  padding:16px 22px;border-left:1px solid var(--line);border-top:1px solid var(--line);
  min-width:0;
}
.factreg .fact:nth-child(4n+1){border-left:0}
.factreg .fact:nth-child(-n+4){border-top:0}
.factreg-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.factreg-3 .fact:nth-child(4n+1){border-left:1px solid var(--line)}
.factreg-3 .fact:nth-child(-n+4){border-top:1px solid var(--line)}
.factreg-3 .fact:nth-child(3n+1){border-left:0}
.factreg-3 .fact:nth-child(-n+3){border-top:0}
.factreg-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.factreg-2 .fact:nth-child(4n+1),.factreg-2 .fact:nth-child(3n+1){border-left:1px solid var(--line)}
.factreg-2 .fact:nth-child(-n+4),.factreg-2 .fact:nth-child(-n+3){border-top:1px solid var(--line)}
.factreg-2 .fact:nth-child(odd){border-left:0}
.factreg-2 .fact:nth-child(-n+2){border-top:0}
.fact dt{
  font-size:13px;font-weight:600;line-height:1.2;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2);
}
.fact dd{
  margin-top:7px;font-size:15px;font-weight:500;letter-spacing:-.012em;
  line-height:1.4;overflow-wrap:break-word;
}
.fact dd.m,.fact dd.mono{
  font-family:var(--font-mono);font-size:14px;font-weight:400;
  font-variant-numeric:tabular-nums;
}

/* --- 7. The figures register: the numbers that sit beside a page headline -- */
.figures{display:flex;align-items:stretch}
.figures > div{padding:0 24px;border-left:1px solid var(--line);min-width:104px}
.figures > div:first-child{border-left:0;padding-left:0}
.figures > div:last-child{padding-right:0}
.figures dt{
  font-size:13px;font-weight:600;line-height:1.2;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted-2);white-space:nowrap;
}
.figures dd{
  margin-top:9px;font-family:var(--font-display);font-weight:600;font-size:30px;
  line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;
}
.figures dd.key{color:var(--blue)}

/* --- 8. Chips: filters that carry their counts, lying on the ground -------- */
.chiprow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}
.chiprow .eyebrow{margin-right:4px;flex:none}
.chip{
  border:1px solid var(--line-2);background:var(--panel);border-radius:var(--radius-sm);
  padding:6px 12px;font-family:var(--font-body);font-size:13px;font-weight:500;
  line-height:1.4;color:var(--ink-2);
  cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease);
}
.chip .n{
  font-family:var(--font-mono);font-size:13px;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.chip:hover{border-color:var(--blue-edge);color:var(--ink)}
.chip.active,.chip[aria-pressed="true"]{
  background:var(--blue-wash);border-color:var(--blue-edge);color:var(--blue);font-weight:600;
}
.chip.active .n,.chip[aria-pressed="true"] .n{color:var(--blue)}
.chip.pop{animation:f-pop .32s cubic-bezier(.34,1.5,.64,1)}
@keyframes f-pop{0%{transform:scale(.94)}58%{transform:scale(1.04)}100%{transform:scale(1)}}

/* --- 9. Segmented control: view switches, tab bars, small mode pickers ----- */
.segs{
  display:inline-flex;gap:2px;padding:3px;background:var(--sunk);
  border:1px solid var(--line);border-radius:var(--radius);
}
.segs button,.segs > a{
  border:0;background:transparent;cursor:pointer;padding:7px 16px;border-radius:6px;
  font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted-2);line-height:1.3;
  transition:color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);
}
.segs button:hover,.segs > a:hover{color:var(--ink)}
.segs button[aria-selected="true"],.segs button[aria-pressed="true"],
.segs > a.active,.segs > a[aria-current="page"]{
  background:var(--panel);color:var(--ink);box-shadow:var(--sh), var(--top-light);
}

/* --- 10. The footnote: the only prose allowed on a screen ------------------
   One sentence, 13px, muted, with a mono marker. It goes at the bottom. */
.footnote{
  display:flex;gap:12px;padding:22px 0 0;font-size:13px;color:var(--muted);
  max-width:82ch;line-height:1.6;
}
.footnote .fn{font-family:var(--font-mono);color:var(--blue);flex:none;font-weight:500}

/* --- 11. Hairline rules inside a sheet, instead of a box inside a box ------ */
.card-rule{height:0;border:0;border-top:1px solid var(--line);margin:16px -22px}
.card-rule-tight{margin:12px 0}
/* Rows on hairlines: the tabular alternative to a list of nested cards. */
.rows{overflow:hidden}
.rows > .row-line{
  display:flex;align-items:center;gap:16px;
  padding:14px 0;border-top:1px solid var(--line);
}
.rows > .row-line:first-child{border-top:0}
.row-no{
  font-family:var(--font-mono);font-size:13px;color:var(--muted);
  font-variant-numeric:tabular-nums;flex:none;
}
.row-label{font-size:14px;font-weight:500;letter-spacing:-.01em;min-width:0;flex:1}
.row-note{margin-top:3px;font-size:13px;color:var(--muted);line-height:1.45}
.row-val{
  font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;flex:none;
}
.row-val em{
  font-style:normal;font-family:var(--font-mono);font-size:13px;font-weight:400;
  color:var(--muted);
}

/* --- 12. Breadcrumbs ------------------------------------------------------ */
.crumbs{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:13px;color:var(--muted);margin-bottom:18px;
}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--blue)}
.crumbs .sep{font-family:var(--font-mono);color:var(--line-2)}
.crumbs [aria-current="page"]{color:var(--ink-2);font-weight:500}

/* --- 13. Shell footer ----------------------------------------------------- */
.shell-foot{
  margin-top:auto;padding:20px 40px 26px;
  border-top:1px solid var(--line);
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  font-size:13px;color:var(--muted);
}
.shell-foot .mono{color:var(--muted);margin-left:auto}
.shell-foot b{font-weight:600;color:var(--muted-2);letter-spacing:.02em}

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

@media (max-width:1200px){
  .content{padding:26px 28px 80px}
  .landing{padding:0 28px 52px}
  .factreg{grid-template-columns:repeat(3,minmax(0,1fr))}
  .factreg .fact:nth-child(4n+1){border-left:1px solid var(--line)}
  .factreg .fact:nth-child(-n+4){border-top:1px solid var(--line)}
  .factreg .fact:nth-child(3n+1){border-left:0}
  .factreg .fact:nth-child(-n+3){border-top:0}
}

@media (max-width:1100px){
  .grid.g4{grid-template-columns:repeat(2,1fr)}
  .grid.g3{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:900px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0);box-shadow:24px 0 60px -30px rgba(26,26,25,.34)}
  .sidebar.open ~ .sidebar-overlay, .sidebar-overlay.show{display:block}
  .main{margin-left:0}
  .burger{display:flex}
  .content{padding:20px 16px 72px}
  .topbar{padding:0 16px}
  .shell-foot{padding:18px 16px 24px}
  .grid.g2,.grid.g2-wide{grid-template-columns:1fr}
  .hero{padding:44px 0 34px}
  .landing{padding:0 16px 40px}
  .page-head-row{grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
  .figures{flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px}
  .figures > div{flex:1 1 40%;padding:0 20px 10px;min-width:0}
  .figures > div:first-child{padding-left:0}
}

@media (max-width:600px){
  /* Same 24px step, its own phase: the column starts higher on a phone. */
  :root{--rule-top:21px}
  .grid.g4,.grid.g3{grid-template-columns:1fr}
  .topbar-title{display:none}
  .hero-actions .btn{width:100%}
  .card{padding:16px}
  .card-rule{margin-left:-16px;margin-right:-16px}
  .card-doc > .card-body,.card-spine{padding-left:16px;padding-right:16px}
  .figures > div{flex:1 1 45%;padding:0 0 12px}
  .figures > div:nth-child(2n){padding-left:20px;border-left:1px solid var(--line)}
  .figures dd{font-size:26px}
  .factreg,.factreg-3,.factreg-2{grid-template-columns:minmax(0,1fr)}
  .factreg .fact{border-left:0;border-top:1px solid var(--line);padding-left:16px;padding-right:16px}
  .factreg .fact:first-child{border-top:0}
  .microreg > div{padding:0 9px}
  .microreg dd{font-size:13px}
  /* A soft cut on the right says: the chip row scrolls. */
  .chiprow{
    flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
  }
  .chiprow::-webkit-scrollbar{display:none}
  .chiprow .chip,.chiprow .eyebrow{flex:none}
  .segs{width:100%}
  .segs button,.segs > a{flex:1}
}

/* ==========================================================================
   Shell polish — additive layer. Same contract as before: nothing renames or
   resizes an existing class; fx-dependent rules are scoped to html.fx-js.
   ========================================================================== */

html.fx-js .nav-link.active{background:none;border-left-color:transparent}
html.fx-js .nav-link:hover{background:var(--sunk)}
html.fx-js .nav-link.active:hover{background:none}

.nav-group{position:relative;z-index:1}

.card{position:relative;z-index:0}

/* The sheet lifts 2px and its hairline picks up the accent. No glow, no wash
   crossing the copy — the light lives in the shadow, not on the paper. */
@media (hover:hover) and (pointer:fine){
  .card,
  a.card{
    transition:
      transform .22s var(--ease),
      border-color .22s var(--ease),
      box-shadow .22s var(--ease);
  }
  .card:hover,
  a.card:hover{border-color:var(--blue-edge);box-shadow:var(--sh-lift), var(--top-light)}
  .card:not(.auth-card):hover,
  a.card:hover{transform:translateY(-2px)}
  .card.fx-tilt{transition-property:border-color,box-shadow}
  .card.fx-tilt:hover{transform:none}
}

html.fx-js .auth-card{animation:fx-page-in 460ms var(--ease) both}

@media (prefers-reduced-motion:reduce){
  .card,
  a.card{transition:none}
  .card:hover,
  a.card:hover,
  .card:not(.auth-card):hover{transform:none}
  html.fx-js .auth-card{animation:none}
  .sidebar{transition:none}
  /* Never stuck at zero: with motion off the bar is already at its value. */
  .scale-track > i{transition:none;width:var(--fill,0)}
  .chip.pop{animation:none}
}

/* ==========================================================================
   Readability layer — text wins every conflict with the decor. Long-form
   paragraphs keep a book measure; F's law is that there are almost none.
   ========================================================================== */

p{max-width:72ch}