/* ============================================================================================================
   VAS Portal — light glass.
   Frosted white panes over a warm pastel field — peach, lavender, sky — with the content on near-solid white
   cards. Palette derived from the client's reference (no verified dataset match; general guidance applied):
   every text pair below is checked at 4.5:1 or better on the surface it sits on.
   ============================================================================================================ */
:root {
  --ink:#1F2233; --ink-2:#3A3F52; --muted:#636A7E; --faint:#9CA2B3; --white:#fff;
  --brand:#2A62F2; --violet:#5B4BD6; --violet-soft:#ECE8FF;
  --glass:rgba(255,255,255,.56); --glass-2:rgba(255,255,255,.40); --glass-line:rgba(255,255,255,.75);
  --card:rgba(255,255,255,.88); --card-line:rgba(255,255,255,.95); --hair:#ECEDF3;
  --accent:#1F2233;
  --t-blue:#EAF0FF;  --i-blue:#2F6BFF;   --t-green:#E3F5EA; --i-green:#1E8A57;
  --t-orange:#FFEEDD; --i-orange:#BE5E0E; --t-purple:#F0EBFF; --i-purple:#6C4FE0;
  --ok-bg:#DDF5E6; --ok-ink:#14693D; --wait-bg:#FFEFC7; --wait-ink:#7A4E00; --bad-bg:#FDE3E3; --bad-ink:#A31F1F;
  --grey-bg:#EEF0F4; --grey-ink:#4B5060; --env-bg:var(--violet-soft); --env-ink:var(--violet);
  --r-pane:22px; --r-card:18px; --r-ctl:12px; --r-pill:999px;
  --shadow-card:0 8px 24px -12px rgba(60,50,90,.18), 0 1px 2px rgba(60,50,90,.05);
  --blur:18px; --measure:1320px;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; --serif:var(--sans);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* Old names some pages still reference. */
  --gold:#BE5E0E; --rose:#A31F1F; --rose-ink:#A31F1F; --line:#ECEDF3; --peach:#FFEEDD; --peach-ink:#7A4E00;
  --mint:#DDF5E6; --mint-ink:#14693D; --rosebg:#FDE3E3; --lilac:#ECE8FF; --lilac-ink:#5B4BD6; --grey:#EEF0F4; --grey-ink:#4B5060;
}
* { box-sizing:border-box; } html, body { margin:0; padding:0; min-height:100%; }
body { font-family:var(--sans); font-size:14.5px; line-height:1.5; color:var(--ink); background:#F3EEF1; -webkit-font-smoothing:antialiased; }
/* The field behind the glass: three soft light sources on a warm neutral. */
body::before { content:""; position:fixed; inset:-8%; z-index:-1; filter:blur(40px);
  background:
    radial-gradient(45% 40% at 12% 15%, #F8D8C6 0, transparent 60%),
    radial-gradient(40% 40% at 85% 12%, #D9D2F6 0, transparent 60%),
    radial-gradient(45% 45% at 80% 85%, #CFE1F8 0, transparent 60%),
    radial-gradient(35% 35% at 20% 90%, #F7E3D2 0, transparent 60%),
    linear-gradient(135deg, #F7EFEA 0%, #EFEAF5 50%, #E9EEF8 100%); }
a { color:var(--violet); text-decoration:none; } a:hover { text-decoration:underline; }
h1,h2,h3 { margin:0; color:var(--ink); } h1 { font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1.15; }
h2 { font-size:17px; font-weight:700; letter-spacing:-.01em; } h3 { font-size:15px; font-weight:700; }
p { margin:0 0 12px; } p:last-child { margin-bottom:0; } code,.mono { font-family:var(--mono); font-size:.88em; }
.num,td.num,th.num,.stat .value,.fig .v,.amount,.sc .value { font-variant-numeric:tabular-nums; }

/* ---- Shell: a light glass sidebar and an open workspace --------------------------------------------------- */
.shell { display:flex; min-height:100vh; gap:16px; padding:16px; }
.sidebar { width:238px; flex-shrink:0; position:sticky; top:16px; height:calc(100vh - 32px); display:flex; flex-direction:column; color:var(--ink);
  background:var(--glass); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur)); border:1px solid var(--glass-line); border-radius:var(--r-pane); box-shadow:0 12px 40px -18px rgba(60,50,90,.25); }
.brand { padding:22px 18px 10px; display:flex; flex-direction:column; }
.brand-mark { font-size:20px; font-weight:800; letter-spacing:-.02em; color:var(--ink); display:flex; align-items:center; gap:10px; }
.brand-mark::before { content:"V"; width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center; font-size:19px; font-weight:800; color:#fff; letter-spacing:0;
  background:linear-gradient(135deg,#4F86FF,#2F6BFF); box-shadow:0 6px 14px -6px rgba(47,107,255,.6); }
.brand-mark span { display:none; }
.brand-sub { font-size:12px; color:var(--muted); margin:2px 0 0 44px; }
.nav { padding:8px 12px; flex:1; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.15) transparent; }
.nav-group { font-size:11.5px; font-weight:600; color:var(--muted); padding:16px 12px 6px; }
.nav a { display:flex; align-items:center; gap:14px; min-height:44px; padding:0 14px; margin-bottom:2px; border-radius:14px; color:var(--ink-2); font-size:14.5px; font-weight:500; text-decoration:none; transition:background .15s ease,color .15s ease; }
.nav a:hover { background:rgba(255,255,255,.7); color:var(--ink); text-decoration:none; }
.nav a.active { background:var(--violet-soft); color:var(--violet); font-weight:600; }
.nav a:focus-visible { outline:2px solid var(--violet); outline-offset:-3px; }
.nav .ico { width:20px; height:20px; flex:none; color:var(--muted); } .nav a.active .ico { color:var(--violet); } .nav .dot { display:none; }
.sidebar-foot { padding:12px; }
/* The card at the foot of the sidebar: the one place the sidebar is allowed to be dark. */
.sidebar-foot .who { font-size:12px; color:var(--muted); overflow-wrap:anywhere; margin:12px 4px 0; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.sidebar-foot .who .btn { height:30px; padding:0 10px; font-size:12px; }
.sidebar .btn.ghost { background:rgba(255,255,255,.7); color:var(--ink-2); border-color:transparent; box-shadow:none; }

.main { flex:1; min-width:0; display:flex; flex-direction:column; background:var(--glass-2); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur)); border:1px solid var(--glass-line); border-radius:var(--r-pane); box-shadow:0 12px 40px -18px rgba(60,50,90,.2); }
.topbar { height:74px; flex-shrink:0; }
.topbar-left { display:flex; align-items:center; gap:12px; min-width:0; }
.topbar-left .small { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; color:var(--ink-2); }
.topbar-left .code { font-family:var(--mono); font-size:12px; color:var(--muted); background:rgba(255,255,255,.7); border-radius:8px; padding:3px 8px; margin-left:10px; }
.nav-toggle { display:none; }
.topbar-inner,.content { max-width:var(--measure); width:100%; margin:0 auto; padding-left:32px; padding-right:32px; }
.topbar-inner { height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.content { padding-top:8px; padding-bottom:44px; }
/* Who is signed in: initials, name, and what they are here as. */
.me { display:inline-flex; align-items:center; gap:10px; padding:5px 12px 5px 5px; border-radius:var(--r-pill); background:rgba(255,255,255,.7); border:1px solid var(--glass-line); }
.me .avatar { width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:700; color:#fff; background:linear-gradient(135deg,#6C4FE0,#2F6BFF); }
.me .name { font-size:13px; font-weight:600; color:var(--ink); line-height:1.15; max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.me .role { font-size:11.5px; color:var(--muted); }

/* ---- Page furniture ------------------------------------------------------------------------------------- */
.page-head { margin-bottom:22px; display:flex; flex-direction:column; align-items:flex-start; gap:0; }
.page-head > :first-child { min-width:0; } .page-head .eyebrow { font-size:13px; font-weight:600; color:var(--violet); margin-bottom:6px; }
.page-head .lead { color:var(--muted); max-width:64ch; font-size:15px; margin:6px 0 0; }

/* ---- Cards ------------------------------------------------------------------------------------------------ */
.card,.plain,.stat,.copyable,.figures { background:linear-gradient(170deg,#FFFFFF 0%,#FCFBFE 100%); border:1px solid var(--card-line); border-radius:var(--r-card); box-shadow:0 1px 2px rgba(31,34,51,.04), 0 14px 30px -20px rgba(80,60,140,.22), inset 0 1px 0 rgba(255,255,255,.9); }
.card,.plain { padding:20px 24px; margin-bottom:18px; } .card:last-child,.plain:last-child { margin-bottom:0; } .card.flush { padding:0; overflow:hidden; overflow-x:auto; }
.card-head,.sec { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:14px; }
.card-head .hint,.sec .hint { color:var(--muted); font-size:13.5px; max-width:72ch; margin-top:3px; } .sec .rule { display:none; }
.sec .more { font-size:13.5px; font-weight:600; color:var(--violet); white-space:nowrap; }
.panel { background:var(--card); color:var(--ink); border:1px solid var(--card-line); border-radius:var(--r-card); padding:22px 24px; margin-bottom:18px; box-shadow:var(--shadow-card); }
.panel h2,.panel h3 { color:var(--ink); } .panel .hint,.panel .muted,.panel .small { color:var(--muted); }
.group-head { display:flex; align-items:center; gap:12px; margin:28px 0 12px; } .group-head h3 { font-size:17px; margin:0; white-space:nowrap; } .group-head .rule { display:none; }
.inset { margin:14px 0 6px; padding:16px; background:#F6F6FA; border:1px solid var(--hair); border-radius:14px; } .card.flush .inset { margin:14px 24px 8px; }
.copy-inline { appearance:none; border:1px solid transparent; background:transparent; cursor:pointer; font:inherit; color:inherit; padding:3px 8px; margin:-3px -8px; border-radius:8px; max-width:100%; text-align:left; }
.copy-inline code { white-space:nowrap; } .copy-inline:hover { background:var(--grey-bg); } .copy-inline:focus-visible { outline:2px solid var(--violet); outline-offset:1px; }
.copy-inline.done { background:var(--ok-bg); } .copy-inline.done code { color:var(--ok-ink); }
.clip { max-width:34ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } table td.num,table th.num { white-space:nowrap; }

/* ---- Icon stat cards (the dashboard's top row) ---------------------------------------------------------------
   "Glowing, but professional" (soft-ui-evolution): the glow is the card's own hue at low alpha, cast downward as
   a shadow; the border is a one-pixel gradient drawn with a mask, not a stroke; and a faint highlight sits where
   a light source would. Nothing is animated except the lift on hover, and that only via transform. */
.stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:18px; }
.sc { --hue:47,107,255; --tint:#EAF0FF; position:relative; isolation:isolate; padding:20px 22px; display:flex; gap:14px; align-items:flex-start;
  background:linear-gradient(160deg,#FFFFFF 0%,#FBFBFE 100%); border:1px solid transparent; border-radius:var(--r-card);
  box-shadow:0 1px 2px rgba(31,34,51,.04), 0 18px 34px -22px rgba(var(--hue),.45), inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s cubic-bezier(.2,.7,.2,1); }
.sc::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(135deg, rgba(var(--hue),.55) 0%, rgba(255,255,255,.35) 45%, rgba(var(--hue),.22) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.sc::after { content:""; position:absolute; left:-30px; top:-40px; width:200px; height:160px; border-radius:50%; pointer-events:none; z-index:-1;
  background:radial-gradient(closest-side, rgba(var(--hue),.16), transparent); }
.sc:hover { transform:translateY(-2px); box-shadow:0 1px 2px rgba(31,34,51,.04), 0 26px 44px -22px rgba(var(--hue),.55), inset 0 1px 0 rgba(255,255,255,.9); }
.sc .tile { width:48px; height:48px; border-radius:14px; flex:none; display:grid; place-items:center; color:rgb(var(--hue));
  background:linear-gradient(145deg, #fff 0%, var(--tint) 70%); box-shadow:inset 0 0 0 1px rgba(var(--hue),.16), 0 6px 14px -8px rgba(var(--hue),.5); }
.sc .tile svg { width:22px; height:22px; }
.sc.blue   { --hue:47,107,255;  --tint:#EAF0FF; }
.sc.green  { --hue:30,138,87;   --tint:#E3F5EA; }
.sc.orange { --hue:190,94,14;   --tint:#FFEEDD; }
.sc.purple { --hue:108,79,224;  --tint:#F0EBFF; }
.sc .label { font-size:13.5px; color:var(--muted); }
/* The text column must be allowed to shrink beside the tile, and a sum must never break mid-number: the size
   gives way before the digits do. */
.sc > div:last-child { min-width:0; flex:1; }
.sc .value { font-size:clamp(19px,1.55vw,26px); font-weight:700; letter-spacing:-.02em; line-height:1.15; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sc .value .pill { vertical-align:middle; }
.sc .sub { font-size:12.5px; color:var(--muted); margin-top:5px; line-height:1.4; }
@media (max-width:1280px) { .stats { grid-template-columns:repeat(2,minmax(0,1fr)); } .sc .value { font-size:24px; } } @media (max-width:620px) { .stats { grid-template-columns:1fr; } }

/* ---- Live / Test: a segmented switch -----------------------------------------------------------------------
   A glass track and a raised white thumb that slides between two equal segments. The label carries the state
   (ink when chosen, muted when not) and a small dot carries the colour, so which half you are on is never told
   by colour alone. Test's thumb is warm, because the point of the switch is that you can tell at a glance. */
.env-switch { position:relative; display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; height:40px; padding:3px;
  border-radius:var(--r-pill); background:rgba(255,255,255,.55); border:1px solid var(--glass-line); box-shadow:inset 0 1px 2px rgba(31,34,51,.06); isolation:isolate; }
.env-switch::before { content:""; position:absolute; top:3px; bottom:3px; left:3px; width:calc(50% - 3px); border-radius:var(--r-pill); z-index:-1;
  background:#fff; box-shadow:0 2px 6px -1px rgba(31,34,51,.18), 0 1px 0 rgba(255,255,255,.9); transition:transform .22s cubic-bezier(.2,.7,.2,1), background .22s ease; }
.env-switch[data-on="test"]::before { transform:translateX(100%); background:var(--wait-bg); }
.env-switch button { appearance:none; border:0; background:transparent; font:inherit; font-size:13px; font-weight:600; color:var(--muted); min-width:74px; padding:0 14px; border-radius:var(--r-pill); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:7px; transition:color .15s ease; }
.env-switch button::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.35; transition:opacity .15s ease, background .15s ease; }
.env-switch button:hover { color:var(--ink); }
.env-switch button.on { color:var(--ink); } .env-switch button.on::before { opacity:1; background:var(--violet); }
.env-switch button.on.test { color:var(--wait-ink); } .env-switch button.on.test::before { background:var(--i-orange); }
.env-switch button:focus-visible { outline:2px solid var(--violet); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) { .env-switch::before { transition:none; } }
/* The rest of the bar keeps the same 40px rhythm. */
.topbar .pill { height:40px; padding:0 14px; font-size:13px; font-weight:500; background:rgba(255,255,255,.55); border:1px solid var(--glass-line); color:var(--ink-2); }
.topbar .pill.ok { color:var(--ok-ink); } .topbar .pill.wait { color:var(--wait-ink); } .topbar .pill.bad { color:var(--bad-ink); }
.me { height:40px; padding:0 14px 0 4px; background:rgba(255,255,255,.55); }
.me .avatar { width:32px; height:32px; font-size:12.5px; }

/* ---- Hero (kept for screens that still use it) ------------------------------------------------------------- */
.hero { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:18px; align-items:stretch; margin-bottom:18px; }
.hero .panel { display:flex; flex-direction:column; margin:0; } .hero .cap { font-size:15px; font-weight:500; color:var(--ink-2); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hero .amount { font-size:42px; font-weight:700; letter-spacing:-.03em; line-height:1.1; margin:16px 0 6px; } .hero .amount .minor { font-size:.55em; }
.hero .delta { font-size:14px; color:var(--muted); } .hero .delta b { color:var(--ink); font-weight:600; } .chartwrap { margin-top:auto; padding-top:20px; }
.chart-axis { display:flex; justify-content:space-between; font-size:12px; color:var(--faint); margin-top:8px; }
.figures { display:flex; flex-direction:column; justify-content:center; padding:6px 0; }
.fig { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 22px; } .fig + .fig { border-top:1px solid var(--hair); }
.fig .k { color:var(--muted); font-size:14px; } .fig .v { font-size:19px; font-weight:700; } .fig .v.small { font-size:14px; font-weight:600; }

/* ---- Grids / responsive ---------------------------------------------------------------------------------- */
.grid { display:grid; gap:18px; } .grid-2 { grid-template-columns:repeat(2,minmax(0,1fr)); } .grid-3 { grid-template-columns:repeat(3,minmax(0,1fr)); } .grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
/* Cards inside a grid drop their own margins; the grid carries the spacing to whatever follows it instead,
   so a row of cards never sits flush against the next card. */
.grid { margin-bottom:18px; } .grid:last-child { margin-bottom:0; }
.grid.top { align-items:start; } .grid .card,.grid .plain { margin-bottom:0; }
@media (max-width:1100px) { .grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:1040px) { .hero { grid-template-columns:1fr; } }
@media (max-width:960px) { .grid-2,.grid-3 { grid-template-columns:repeat(2,minmax(0,1fr)); } .grid-2 { grid-template-columns:1fr; } } @media (max-width:620px) { .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }
@media (max-width:1000px) { .shell { padding:12px; gap:12px; } .sidebar { width:220px; top:12px; height:calc(100vh - 24px); } .topbar-inner,.content { padding-left:20px; padding-right:20px; } h1 { font-size:26px; } .me .name,.me .role { display:none; } .me { padding:4px; } }
@media (max-width:860px) {
  .shell { padding:0; gap:0; } .main { border-radius:0; border:0; background:transparent; backdrop-filter:none; box-shadow:none; }
  .sidebar { position:fixed; top:12px; left:12px; bottom:12px; height:auto; width:min(84vw,300px); z-index:60; transform:translateX(calc(-100% - 24px)); transition:transform .25s ease; background:rgba(255,255,255,.92); }
  .sidebar.open { transform:none; } .scrim { position:fixed; inset:0; z-index:55; background:rgba(40,30,60,.35); backdrop-filter:blur(3px); }
  .topbar { position:sticky; top:0; z-index:40; background:rgba(255,255,255,.75); backdrop-filter:blur(var(--blur)); height:64px; }
  .nav-toggle { display:inline-flex; align-items:center; justify-content:center; flex:none; width:44px; height:44px; margin-left:-8px; padding:0; cursor:pointer; background:rgba(255,255,255,.8); border:1px solid var(--glass-line); border-radius:50%; color:var(--ink); }
  .nav-toggle:focus-visible { outline:2px solid var(--violet); outline-offset:2px; }
  .bars,.bars::before,.bars::after { display:block; width:18px; height:2px; border-radius:2px; background:currentColor; transition:transform .2s,opacity .2s; }
  .bars { position:relative; } .bars::before,.bars::after { content:""; position:absolute; left:0; } .bars::before { top:-6px; } .bars::after { top:6px; }
  .bars.x { background:transparent; } .bars.x::before { transform:translateY(6px) rotate(45deg); } .bars.x::after { transform:translateY(-6px) rotate(-45deg); }
}
@media (prefers-reduced-motion:reduce) { .sidebar,.bars,.bars::before,.bars::after,.caret,.btn,.nav a,.env-switch button,.skip-link,.sc { transition:none; } .sc:hover { transform:none; } }

/* ---- Stats / identifiers / next steps -------------------------------------------------------------------- */
.stat { padding:18px 20px; display:flex; flex-direction:column; } .stat .label { font-size:13.5px; color:var(--muted); }
/* A sum never breaks mid-number: the size gives way first, then an ellipsis — never a line break. */
.stat { min-width:0; }
.stat .value { font-size:clamp(18px,1.7vw,28px); font-weight:700; letter-spacing:-.02em; line-height:1.15; margin-top:8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .stat .sub { font-size:12.5px; color:var(--muted); margin-top:4px; }
.stat.accent { background:linear-gradient(150deg,#2B2545,#3E2F6B 60%,#6C4FE0 130%); border-color:transparent; } .stat.accent .label,.stat.accent .sub { color:rgba(255,255,255,.75); } .stat.accent .value { color:#fff; }
.stat.clickable { width:100%; text-align:left; font:inherit; cursor:pointer; transition:transform .15s ease,box-shadow .15s ease; } .stat.clickable:hover { transform:translateY(-2px); }
.stat.clickable.selected { box-shadow:0 0 0 2px var(--violet),var(--shadow-card); } .stat.clickable:focus-visible { outline:2px solid var(--violet); outline-offset:3px; }
.copyable { padding:16px 20px; } .copyable .label { font-size:13.5px; color:var(--muted); } .copyable .line { display:flex; align-items:center; gap:12px; margin-top:8px; }
.copyable .val { font-family:var(--mono); font-size:15px; line-height:1.45; overflow-wrap:anywhere; flex:1; min-width:0; }
.copyable .copy { flex:none; font:inherit; font-size:13px; font-weight:600; color:var(--ink); background:var(--grey-bg); border:0; border-radius:var(--r-pill); padding:8px 14px; cursor:pointer; min-height:36px; }
.copyable .copy:hover { background:#E4E6ED; } .copyable .copy.done { background:var(--ok-bg); color:var(--ok-ink); } .copyable .sub { font-size:13px; color:var(--muted); margin-top:8px; }
.next-list { margin-top:4px; } .next-list a { display:flex; align-items:center; gap:14px; padding:14px 4px; border-top:1px solid var(--hair); color:var(--ink); text-decoration:none; } .next-list a:first-child { border-top:0; }
.next-list a:hover { text-decoration:none; } .next-list a:hover .go { transform:translateX(3px); }
.next-list .n { flex:none; width:36px; height:36px; border-radius:12px; background:var(--t-purple); color:var(--i-purple); font-size:13px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.next-list .what { font-weight:600; font-size:15px; } .next-list .why { color:var(--muted); font-size:13.5px; flex:1; } .next-list .go { color:var(--violet); font-size:18px; flex:none; transition:transform .15s ease; }

/* ---- Tables --------------------------------------------------------------------------------------------- */
table { width:100%; border-collapse:collapse; font-size:14px; min-width:560px; }
th { text-align:left; font-size:13px; font-weight:500; color:var(--muted); padding:10px 14px; background:#F5F5F9; border-bottom:1px solid var(--hair); white-space:nowrap; }
th:first-child { border-radius:10px 0 0 10px; } th:last-child { border-radius:0 10px 10px 0; }
td { padding:14px; border-bottom:1px solid var(--hair); vertical-align:middle; } tbody tr:last-child td { border-bottom:0; } tbody tr:hover { background:#F8F8FC; }
td.num,th.num { text-align:right; } .card.flush table { min-width:100%; } .card.flush th:first-child,.card.flush th:last-child { border-radius:0; }
.empty { padding:44px 16px; text-align:center; color:var(--muted); } .empty strong { display:block; font-size:15px; color:var(--ink); margin-bottom:4px; } .empty > div { max-width:62ch; margin-left:auto; margin-right:auto; }
tr.asking > td { background:#F6F6FA; } tr.opened > td { border-bottom-color:transparent; } tr.detail > td { background:#F6F6FA; padding:16px 18px 20px; }
.rowtoggle { display:inline-flex; align-items:center; gap:8px; background:none; border:0; padding:0; cursor:pointer; font:inherit; color:inherit; text-align:left; }
.rowtoggle:focus-visible { outline:2px solid var(--violet); outline-offset:3px; border-radius:4px; }
.caret { display:inline-block; width:10px; color:var(--muted); transition:transform .15s ease; transform-origin:50% 50%; } .caret.open { transform:rotate(90deg); }
.card-head .rowtoggle { align-items:flex-start; gap:10px; flex:1 1 auto; min-width:0; } .card-head .rowtoggle .caret { margin-top:6px; }

/* A link that leaves the portal says so, quietly, rather than surprising somebody mid-integration. */
.nav a .ext { margin-left:auto; font-size:11px; opacity:.55; }

/* ---- Walking a supplier's tree ---------------------------------------------------------------------------- */
/* Crumbs say where you are in somebody else's hierarchy, which is the one thing a flat page of codes cannot. */
.crumbs { display:flex; align-items:center; flex-wrap:wrap; gap:4px; margin-top:14px; font-size:13px; }
.crumb { background:none; border:0; padding:3px 6px; border-radius:8px; font:inherit; font-size:13px; color:var(--violet); cursor:pointer; }
.crumb:hover { background:var(--violet-soft); } .crumb.here { color:var(--ink); font-weight:600; cursor:default; }
.crumb.here:hover { background:none; } .crumb:focus-visible { outline:2px solid var(--violet); outline-offset:1px; }
.crumb-sep { color:var(--muted); font-size:13px; }

/* How much is in scope, and a filter, in the same control: the count is the reason you would press it. */
.levels { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.level { background:#F8F8FC; border:1px solid var(--hair); border-radius:var(--r-pill); padding:5px 13px; font:inherit; font-size:12.5px; color:var(--muted); cursor:pointer; transition:background .15s ease,border-color .15s ease; }
.level b { color:var(--ink); font-weight:700; margin-right:3px; }
.level:hover:not(:disabled) { border-color:#D9DBE6; background:#fff; }
.level.on { background:var(--violet-soft); border-color:transparent; color:var(--violet); } .level.on b { color:var(--violet); }
.level:disabled { opacity:.45; cursor:not-allowed; } .level:focus-visible { outline:2px solid var(--violet); outline-offset:2px; }

/* A button that has to read as a link, for a cell where an anchor would navigate. */
.linky { background:none; border:0; padding:0; font:inherit; color:var(--violet); cursor:pointer; text-align:left; }
.linky:hover { text-decoration:underline; } .linky:focus-visible { outline:2px solid var(--violet); outline-offset:2px; border-radius:4px; }

/* ---- Pills ---------------------------------------------------------------------------------------------- */
.pill { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; font-size:12.5px; font-weight:600; line-height:1; border-radius:var(--r-pill); white-space:nowrap; }
.pill.ok { background:var(--ok-bg); color:var(--ok-ink); } .pill.wait { background:var(--wait-bg); color:var(--wait-ink); } .pill.bad { background:var(--bad-bg); color:var(--bad-ink); }
.pill.neutral { background:var(--grey-bg); color:var(--grey-ink); } .pill.env { background:var(--env-bg); color:var(--env-ink); }

/* ---- Forms ---------------------------------------------------------------------------------------------- */
.field { margin-bottom:18px; } .field:last-child { margin-bottom:0; }
.field label { display:block; font-size:14px; font-weight:600; color:var(--ink); margin-bottom:8px; } .field label .muted { font-weight:400; }
.field .help { font-size:13px; color:var(--muted); margin-top:7px; line-height:1.45; } .field .err { font-size:13px; color:var(--bad-ink); margin-top:7px; line-height:1.45; font-weight:500; }
.field.bad label { color:var(--bad-ink); } .field.bad .help { display:none; }
input:not([type="checkbox"],[type="radio"],[type="file"],[type="submit"],[type="button"],[type="reset"],[type="range"]),select,textarea {
  display:block; width:100%; font-family:inherit; font-size:14.5px; line-height:1.4; color:var(--ink); background:#fff; border:1.5px solid var(--hair); border-radius:var(--r-ctl); outline:none; transition:border-color .15s ease,box-shadow .15s ease; }
input:not([type="checkbox"],[type="radio"],[type="file"],[type="submit"],[type="button"],[type="reset"],[type="range"]),select { height:46px; padding:0 14px; } textarea { padding:12px 14px; resize:vertical; min-height:100px; }
::placeholder { color:var(--faint); opacity:1; }
input:hover:not(:disabled):not(:focus),select:hover:not(:disabled):not(:focus),textarea:hover:not(:disabled):not(:focus) { border-color:#D9DBE6; }
input:focus,select:focus,textarea:focus { border-color:var(--violet); box-shadow:0 0 0 4px rgba(91,75,214,.14); }
input:disabled,select:disabled,textarea:disabled,input[readonly],textarea[readonly] { background:#F6F6FA; color:var(--muted); cursor:not-allowed; }
select { appearance:none; padding-right:40px; cursor:pointer; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23636A7E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; }
input[type="file"] { width:100%; font-size:14px; color:var(--ink-2); border:1.5px dashed #D9DBE6; border-radius:var(--r-ctl); padding:12px 14px; background:#FBFBFD; cursor:pointer; }
input[type="file"]:hover { border-color:var(--violet); background:#fff; } input[type="file"]:focus-visible { outline:2px solid var(--violet); outline-offset:2px; }
input[type="file"]::file-selector-button { font:inherit; font-size:13px; font-weight:600; color:#fff; background:var(--accent); border:0; border-radius:var(--r-pill); padding:7px 14px; margin-right:14px; cursor:pointer; }
input[type="checkbox"],input[type="radio"] { width:18px; height:18px; accent-color:var(--violet); cursor:pointer; }
.field.bad input:not([type="checkbox"],[type="radio"]),.field.bad select,.field.bad textarea { border-color:var(--bad-ink); background:#FFF8F8; }
.field.bad input:focus,.field.bad select:focus,.field.bad textarea:focus { box-shadow:0 0 0 4px rgba(163,31,31,.12); }
.check { display:flex; align-items:center; gap:10px; font-size:14px; margin-bottom:12px; cursor:pointer; min-height:28px; } .check input { flex:none; margin:0; }
.fieldset { border-top:1px solid var(--hair); margin:22px 0 16px; padding-top:18px; } .fieldset > .legend { font-size:14px; font-weight:700; margin-bottom:14px; }
.row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
/* A row aligns on the bottom so a button sits level with the inputs beside it. That is wrong when one
   field carries help text and its neighbour does not: the taller field pushes its own label up and the
   labels stop lining up. Where a row is all fields, align the tops instead. */
/* A button standing in a row of form controls takes their height, so its top edge lines up as well as its
   bottom. Left at the button default it sat two pixels short and read as floating. */
.btn-row.with-fields .btn { height:46px; }
.row.tops { align-items:flex-start; } .row > * { flex:1; min-width:160px; } .row > .tight { flex:0 0 auto; min-width:0; }
@media (max-width:900px) { .row > * { flex:1 1 100%; } .row > .tight { flex:0 0 auto; } .kv { grid-template-columns:120px 1fr; } }
.readonly-note { height:46px; display:flex; align-items:center; padding:0 14px; border:1.5px dashed #D9DBE6; border-radius:var(--r-ctl); background:#FBFBFD; color:var(--muted); font-size:14px; }
.otp { letter-spacing:.45em; font-family:var(--mono); font-size:20px; text-align:center; text-indent:.45em; height:56px !important; }

/* ---- Buttons ------------------------------------------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 20px; border-radius:var(--r-pill); border:1px solid transparent; font:inherit; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; background:var(--accent); color:#fff; box-shadow:0 8px 18px -10px rgba(31,34,51,.5); transition:transform .15s ease,background .15s ease,box-shadow .15s ease; }
.btn:hover:not(:disabled) { background:#2C3047; transform:translateY(-1px); text-decoration:none; } .btn:active:not(:disabled) { transform:none; }
.btn:focus-visible { outline:2px solid var(--violet); outline-offset:3px; } .btn:disabled { opacity:.5; cursor:not-allowed; box-shadow:none; }
.btn.gold { background:var(--brand); } .btn.gold:hover:not(:disabled) { background:#245BE0; }
.btn.ghost { background:rgba(255,255,255,.75); color:var(--ink); border-color:var(--glass-line); box-shadow:none; } .btn.ghost:hover:not(:disabled) { background:#fff; }
.btn.danger { background:var(--bad-ink); } .btn.ok { background:var(--i-green); } .btn.small { height:40px; padding:0 14px; font-size:13.5px; }
.btn-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:20px; }
.field + .btn,.row + .btn,.check + .btn,.note + .btn,.grid + .btn,.kv + .btn,.card > .btn:not(:first-child) { margin-top:20px; }
.spin { display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } }

/* ---- Messages / steps ----------------------------------------------------------------------------------- */
.note { padding:14px 18px; margin-bottom:18px; border-radius:14px; font-size:14px; background:var(--wait-bg); color:var(--wait-ink); }
.note .title { font-weight:700; margin-bottom:3px; font-size:15px; } .note.ok { background:var(--ok-bg); color:var(--ok-ink); } .note.bad { background:var(--bad-bg); color:var(--bad-ink); } .note.info { background:var(--violet-soft); color:var(--violet); }
.note a { color:inherit; font-weight:600; } .note .btn { background:var(--accent); color:#fff; }
pre { font-family:var(--mono); font-size:12.5px; line-height:1.55; background:#2B2545; color:#ECE9F8; padding:16px 18px; border-radius:14px; overflow-x:auto; margin:0 0 14px; } pre .k { color:#F5C26B; } pre .s { color:#9FE0B8; } pre .c { color:#A79FC7; }

/* ---- Auth ----------------------------------------------------------------------------------------------- */
.auth { min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr; gap:16px; padding:16px; }
.auth-aside { color:#fff; padding:48px 48px; display:flex; flex-direction:column; border-radius:var(--r-pane); background:linear-gradient(150deg,#2B2545 0%,#3E2F6B 55%,#5B4BD6 130%); box-shadow:0 20px 50px -20px rgba(60,40,120,.5); }
.auth-aside .brand-mark { color:#fff; } .auth-aside h1 { color:#fff; font-size:40px; font-weight:800; letter-spacing:-.03em; line-height:1.08; margin-top:52px; } .auth-aside h1 em { color:#fff; font-style:normal; }
.auth-aside .blurb { color:rgba(255,255,255,.78); font-size:16px; margin-top:20px; max-width:420px; line-height:1.55; } .auth-aside .rule { display:none; }
.auth-aside ul { margin:0; padding:0; list-style:none; color:rgba(255,255,255,.85); font-size:14px; display:flex; flex-direction:column; gap:10px; } .auth-aside li { padding:14px 18px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); border-radius:14px; } .auth-aside .spacer { flex:1; }
.auth-main { display:grid; place-items:center; padding:40px 28px; background:var(--glass-2); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur)); border:1px solid var(--glass-line); border-radius:var(--r-pane); }
.auth-box { width:100%; max-width:440px; background:var(--card); border:1px solid var(--card-line); border-radius:22px; box-shadow:var(--shadow-card); padding:34px; }
.auth-box h2 { font-size:26px; font-weight:800; letter-spacing:-.02em; margin-bottom:6px; } .auth-box .sub { color:var(--muted); margin-bottom:24px; font-size:14px; } .auth-box .btn { width:100%; height:48px; }
.auth-foot { margin-top:20px; font-size:14px; color:var(--muted); text-align:center; } .auth-foot a { font-weight:600; }
@media (max-width:900px) { .auth { grid-template-columns:1fr; padding:12px; } .auth-aside { display:none; } .auth-main { padding:24px 16px; } .auth-box { padding:26px; } }

/* ---- Odds and ends -------------------------------------------------------------------------------------- */
.muted { color:var(--muted); } .small { font-size:13px; } .right { text-align:right; } .stack > * + * { margin-top:16px; } .stack > * { width:100%; }
.between { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.kv { display:grid; grid-template-columns:auto minmax(0,1fr); font-size:14px; } .kv dt { color:var(--muted); padding:11px 24px 11px 0; border-bottom:1px solid var(--hair); }
.kv dd { margin:0; color:var(--ink); font-weight:500; padding:11px 0; border-bottom:1px solid var(--hair); text-align:right; word-break:break-word; } .kv dt:last-of-type,.kv dd:last-of-type { border-bottom:0; }
.divider { height:1px; background:var(--hair); margin:20px 0; } .loading { padding:48px; text-align:center; color:var(--muted); }
#blazor-error-ui { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); max-width:560px; width:calc(100% - 36px); z-index:1000; display:none; background:var(--accent); color:#fff; padding:14px 20px; font-size:14px; border-radius:16px; box-shadow:0 20px 40px -12px rgba(0,0,0,.4); }
#blazor-error-ui .dismiss { cursor:pointer; float:right; font-weight:700; margin-left:16px; }

/* ---- Utilities: the handful of spacings the pages kept writing inline ------------------------------------- */
.m0 { margin: 0 !important; } .mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 6px !important; } .mt-2 { margin-top: 8px !important; } .mt-3 { margin-top: 14px !important; } .mt-4 { margin-top: 18px !important; }
.mb-2 { margin-bottom: 10px !important; } .mb-3 { margin-bottom: 14px !important; } .mb-4 { margin-bottom: 18px !important; }
.ink { color: var(--ink); } .text-danger { color: var(--rose-ink); } .xs { font-size: 12px; }
/* One width for every onboarding form and the stepper above it, so their edges line up. */
:root { --form-w: 680px; }
.narrow { max-width: var(--form-w); } .full { width: 100%; } .center { justify-content: center; }
.nowrap { flex-wrap: nowrap !important; } .end { justify-content: flex-end; }

/* The merchant code in the bar: a fact beside the name, not a middle-dot meta string. */
.topbar-left .code { font-family: var(--mono); font-size: 12px; color: var(--muted); background: rgba(255,255,255,.55); border-radius: 8px; padding: 3px 8px; margin-left: 10px; }

/* Keyboard users skip eighteen links to reach the page. Off-screen until focused, then a pill at the top. */
.skip-link { position: absolute; left: 24px; top: -60px; z-index: 100; background: var(--accent); color: #fff; padding: 12px 18px; border-radius: var(--r-pill); font-weight: 600; transition: top .15s ease; }
.skip-link:focus { top: 24px; outline: 2px solid #fff; outline-offset: 2px; }
#main:focus { outline: none; }

/* Every control a finger can land on is at least 40px tall; the small button was 36. */
.btn.small { height: 40px; }
.env-switch button { min-height: 36px; }

/* ---- The sign-in reference, carried through ------------------------------------------------------------------
   A light aside (the dark violet one is gone), a gradient in the headline's last line and in the primary button,
   product chips floating beside the headline, and feature rows with icon tiles. The inputs take a leading icon
   and the password a show/hide toggle. */
.auth-aside { background:var(--glass); color:var(--ink); border:1px solid var(--glass-line); backdrop-filter:blur(var(--blur)); -webkit-backdrop-filter:blur(var(--blur)); box-shadow:0 12px 40px -18px rgba(60,50,90,.25); padding:36px 40px; }
.auth-aside .brand { padding:0; } .auth-aside .brand-mark { color:var(--ink); font-size:22px; } .auth-aside .brand-sub { font-style:italic; margin-left:44px; }
.auth-hero { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,.55fr); gap:16px; align-items:center; margin:40px 0 auto; }
.auth-aside h1 { text-wrap:balance; }
.auth-aside h1 { color:var(--ink); font-size:clamp(34px,3.2vw,46px); font-weight:800; letter-spacing:-.03em; line-height:1.06; margin:0; }
.auth-aside h1 em { font-style:normal; background:linear-gradient(90deg,#2F6BFF 0%,#5B4BD6 55%,#7B4BE0 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.auth-aside .blurb { color:var(--muted); font-size:16px; margin:18px 0 0; max-width:440px; line-height:1.55; }
.auth-aside .rule, .auth-aside .spacer { display:none; }
/* Three tilted glass chips. Decorative, so they get no motion and no hit area. */
.chips { position:relative; height:270px; pointer-events:none; }
.chip { position:absolute; display:flex; align-items:center; gap:12px; padding:14px 22px 14px 14px; border-radius:18px; font-weight:600; color:var(--ink); background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.9); box-shadow:0 18px 34px -18px rgba(80,60,140,.35); backdrop-filter:blur(10px); }
.chip .tile { width:46px; height:46px; border-radius:50%; display:grid; place-items:center; } .chip .tile svg { width:22px; height:22px; }
.chip.blue { left:0; top:0; transform:rotate(8deg); } .chip.blue .tile { background:var(--t-blue); color:var(--i-blue); }
.chip.green { left:14%; top:36%; transform:rotate(6deg); } .chip.green .tile { background:var(--t-green); color:var(--i-green); }
.chip.purple { left:22%; top:70%; transform:rotate(5deg); } .chip.purple .tile { background:var(--t-purple); color:var(--i-purple); }
/* Feature rows. */
.feats { list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.feats li { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.9); }
.feats .tile { width:48px; height:48px; border-radius:50%; flex:none; display:grid; place-items:center; } .feats .tile svg { width:22px; height:22px; }
.feats .tile.purple { background:var(--t-purple); color:var(--i-purple); } .feats .tile.orange { background:var(--t-orange); color:var(--i-orange); }
.feats b { display:block; font-size:14.5px; font-weight:600; color:var(--ink); } .feats small { display:block; font-size:13px; color:var(--muted); margin-top:2px; }
/* Inputs with a leading icon, and the password's toggle. The control wrapper positions both; the input keeps
   its full-width box, so labels, errors and focus rings work exactly as on every other field. */
.control { position:relative; }
.control .lead-ico { position:absolute; left:14px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--faint); pointer-events:none; }
.control input:not([type="checkbox"],[type="radio"]) { padding-left:44px; }
.control .eye { position:absolute; right:6px; top:50%; transform:translateY(-50%); width:40px; height:40px; border:0; border-radius:10px; background:transparent; color:var(--muted); cursor:pointer; display:grid; place-items:center; }
.control .eye svg { width:20px; height:20px; } .control .eye:hover { background:var(--grey-bg); color:var(--ink); } .control .eye:focus-visible { outline:2px solid var(--violet); outline-offset:-2px; }
.control:has(.eye) input { padding-right:52px; }
/* The primary action, everywhere: a blue-to-violet gradient. Text is white at 4.5:1+ against both ends. */
.btn.gold { background:linear-gradient(90deg,#2A62F2 0%,#5B4BD6 60%,#7B4BE0 100%); color:#fff; box-shadow:0 12px 24px -12px rgba(91,75,214,.6); }
.btn.gold:hover:not(:disabled) { background:linear-gradient(90deg,#2860F0 0%,#5040C8 60%,#6E40D4 100%); }
.btn .arrow { font-size:18px; line-height:1; transition:transform .2s ease; } .btn:hover .arrow { transform:translateX(3px); }
.auth-box .btn { height:52px; font-size:16px; }
.auth-box .btn.gold:disabled { opacity:.6; }
.brand-mark::before { background:linear-gradient(135deg,#4F86FF 0%,#5B4BD6 70%,#7B4BE0 100%); box-shadow:0 6px 14px -6px rgba(91,75,214,.6); }
@media (max-width:1180px) { .auth-hero { grid-template-columns:1fr; } .chips { display:none; } }
@media (prefers-reduced-motion:reduce) { .btn .arrow { transition:none; } .btn:hover .arrow { transform:none; } }

/* ---- A text link that is a button, for things that open in place rather than navigate ------------------- */
.link { appearance:none; background:none; border:0; padding:0; font:inherit; color:var(--violet); cursor:pointer; text-align:left; text-decoration:none; overflow-wrap:anywhere; }
.link:hover { text-decoration:underline; } .link:focus-visible { outline:2px solid var(--violet); outline-offset:2px; border-radius:4px; }

/* ---- Modal: a document shown in place -------------------------------------------------------------------- */
.modal-scrim { position:fixed; inset:0; z-index:90; background:rgba(40,30,60,.42); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.modal { position:fixed; z-index:91; left:50%; top:50%; transform:translate(-50%,-50%); width:min(1100px, calc(100vw - 32px)); height:min(88vh, 900px);
  display:flex; flex-direction:column; background:#fff; border-radius:22px; box-shadow:0 30px 80px -30px rgba(40,30,60,.6); outline:none; overflow:hidden; }
.modal:focus-visible { box-shadow:0 30px 80px -30px rgba(40,30,60,.6), 0 0 0 3px var(--violet); }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 20px; border-bottom:1px solid var(--hair); flex:none; }
.modal-title { min-width:0; } .modal-title h2 { font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.modal-actions { display:flex; gap:8px; flex:none; }
.modal-body { flex:1; min-height:0; background:#F3F2F7; display:grid; place-items:center; overflow:auto; }
.modal-body img { max-width:100%; max-height:100%; object-fit:contain; display:block; }
.modal-body iframe { width:100%; height:100%; border:0; display:block; }
.modal-body .empty { max-width:48ch; } .modal-body .empty span { display:block; color:var(--muted); }
@media (max-width:640px) { .modal { width:100vw; height:100dvh; border-radius:0; } .modal-head { flex-wrap:wrap; } }

/* ---- Overlap fixes, everywhere ------------------------------------------------------------------------------
   Long identifiers and file names wrap instead of pushing a table past its card; a card that holds a bare table
   scrolls that table sideways rather than letting it spill; an action cell never wraps its buttons onto each
   other; and a selected stat rings itself without lifting into its neighbours. */
td { overflow-wrap:anywhere; }
td.right, th.right { white-space:nowrap; }
td .btn-row { gap:8px; }
.card:has(> table), .plain:has(> table) { overflow-x:auto; }
.stat.clickable:hover { transform:none; box-shadow:0 1px 2px rgba(31,34,51,.04), 0 18px 34px -20px rgba(80,60,140,.32), inset 0 1px 0 rgba(255,255,255,.9); }
.stat.clickable.selected { box-shadow:0 0 0 2px var(--violet), 0 14px 30px -20px rgba(80,60,140,.22); }
.stat.accent { background:linear-gradient(150deg,#2B2545,#3E2F6B 60%,#6C4FE0 130%); }
.stat.accent.selected { box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--violet); }
.between { row-gap:10px; }
.between, .note, .stats, .grid { flex-wrap:wrap; }
.content > .between { margin-bottom:16px; }

/* ---- A caption under a button ---------------------------------------------------------------------------------
   `.help` used to be styled only inside a field; on its own, after a button, it sat on the button's edge. It now
   has a voice anywhere, and anything that follows a button or a button row is set off from it. */
.help { font-size:13px; color:var(--muted); line-height:1.45; max-width:72ch; }
.btn + .help, .btn-row + .help, .btn + .muted, .btn-row + .muted, .btn + p, .btn-row + p, .btn + .note, .btn-row + .note { margin-top:14px; }
.help + .btn, .muted + .btn, p + .btn { margin-top:14px; }

/* ---- The access-restricted card ------------------------------------------------------------------------- */
.card.access { max-width:560px; }
.card.access .tile { width:52px; height:52px; border-radius:16px; display:grid; place-items:center; margin-bottom:14px; }
.card.access .tile svg { width:24px; height:24px; }
.card.access .tile.purple { background:var(--t-purple); color:var(--i-purple); } .card.access .tile.orange { background:var(--t-orange); color:var(--i-orange); }
.card.access p { font-size:15px; line-height:1.55; }
.note .btn.ghost { background:rgba(255,255,255,.7); color:inherit; }

/* ---- Stepper: one connected track ----------------------------------------------------------------------------
   Seven equal columns on a single line, a circle on the line for each step and its label beneath. The segment
   leading into a step is drawn by that step, so the track is coloured exactly as far as the merchant has got.
   Equal columns are what make it align: every step is the same width, whatever its label says. */
.steps { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; max-width:var(--form-w); margin:0 0 26px; padding:0; gap:0; }
.step { position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; padding:0; background:none; border-radius:0; text-align:center; min-width:0; }
.step::before { content:""; position:absolute; top:13px; right:50%; width:100%; height:2px; background:var(--hair); z-index:0; }
.step:first-child::before { display:none; }
.step.done::before, .step.now::before { background:linear-gradient(90deg,#2A62F2,#5B4BD6); }
.step .n { position:relative; z-index:1; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700;
  background:#fff; color:var(--muted); box-shadow:inset 0 0 0 2px var(--hair); }
.step .t { font-size:12.5px; color:var(--muted); line-height:1.25; padding:0 4px; overflow-wrap:anywhere; }
.step.done .n { background:var(--ok-bg); color:var(--ok-ink); box-shadow:inset 0 0 0 2px var(--ok-bg); }
.step.done .t { color:var(--ink-2); }
.step.now .n { background:linear-gradient(135deg,#2A62F2,#5B4BD6); color:#fff; box-shadow:0 0 0 4px rgba(91,75,214,.16); }
.step.now .t { color:var(--ink); font-weight:600; }
@media (max-width:620px) { .step .t { font-size:11px; } .steps { max-width:none; } }

/* ---- Searchable dropdown ------------------------------------------------------------------------------- */
.combo { position:relative; }
.combo-toggle {
  width:100%; height:46px; padding:0 40px 0 14px; text-align:left; font:inherit; color:var(--ink);
  background:#fff; border:1.5px solid var(--hair); border-radius:var(--r-ctl); cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.combo-toggle:hover { border-color:#D9DBE6; }
.combo-toggle.open, .combo-toggle:focus-visible { border-color:var(--violet); box-shadow:0 0 0 4px rgba(91,75,214,.14); outline:none; }
.combo-toggle > span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.combo-placeholder { color:var(--muted); }
.combo-caret { position:absolute; right:14px; color:var(--muted); font-size:12px; pointer-events:none; }

/* Sits under the panel and over everything else, so a click anywhere outside closes it. */
.combo-backdrop { position:fixed; inset:0; z-index:40; }

.combo-panel {
  position:absolute; z-index:41; top:calc(100% + 6px); left:0; right:0;
  background:#fff; border:1.5px solid var(--hair); border-radius:14px; overflow:hidden;
  box-shadow:0 18px 40px -16px rgba(20,24,40,.35);
}
.combo-search {
  width:100%; height:42px; padding:0 14px; border:0; border-bottom:1px solid var(--hair);
  border-radius:0; font:inherit; outline:none;
}
.combo-list { max-height:260px; overflow-y:auto; }
.combo-option {
  width:100%; padding:9px 14px; border:0; background:none; font:inherit; text-align:left; cursor:pointer;
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
.combo-option:hover { background:#F8F8FC; }
.combo-option.chosen { background:var(--violet-soft); }
.combo-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.combo-hint { color:var(--muted); font-size:12px; flex:0 0 auto; }
.combo-empty, .combo-foot { padding:12px 14px; color:var(--muted); font-size:12.5px; }
.combo-foot { border-top:1px solid var(--hair); background:#F6F6FA; }