/* Svanzen — built from design_system/ by scripts/build_ds_css.py.
   DO NOT EDIT: every rule below is copied from the file its banner names, and
   the ONE transformation applied is noted where it happens. Edit the named
   file and rebuild. The pinned design-system revision and the sync-back
   runbook are in docs/design/DS_SYNC.md. */
/* ==== design_system/tokens/fonts.css ==== */
/* 3 face declaration(s) removed here by scripts/build_ds_css.py.
   This application declares its own, against absolute /static/fonts/ URLs
   that its allowlist route actually serves — ui_tokens.SVANZEN_FONT_HTML and
   webhook.py's _FONT_FILES. The commentary around this point argues for faces
   that are declared THERE, not here. */
/* ONE TYPEFACE, ONE FILE, ONE REQUEST. Figtree is a variable font with a
   wght axis; `font-weight: 400 800` is a RANGE, not a typo. The upstream axis
   runs 300-900 — 400 800 is what we DECLARE, so a stray 900 clamps to 800
   rather than quietly opening a ninth weight into the ramp.
   Self-hosted: a same-origin fetch has no third party to trust. */
/* THE TWO INDIC FACES, NOW SELF-HOSTED LIKE EVERY OTHER FACE HERE — a public
   register page carries no third-party font request, which was the whole
   argument for self-hosting Figtree and applies identically to these.
   VARIABLE, WITH TWO AXES. Both files carry wdth as well as wght; `400 700`
   is what we DECLARE on the weight axis, so a stray 800 clamps rather than
   quietly opening a weight the Latin ramp does not have. The width axis is
   left at its default: a condensed Kannada is a different typographic
   decision, not a fallback.
   TTF, NOT WOFF2, and that is honest rather than ideal: these are the upstream
   binaries from google/fonts, ~640 KB each against Figtree's 27 KB. Subset and
   convert them before production — the family names do not change when you do,
   so nothing else in this system moves. */
:root{
  --sv-font: Figtree, system-ui, -apple-system, sans-serif;
  /* NAMED INDIC STACKS, NOT A SYSTEM FALLBACK. A script that resolves to
     whatever the OS happens to carry is not multilingual support. Set the
     stack AND the 1.4 line-height floor (--sv-lh-indic) on the element. */
  --sv-font-kannada: 'Noto Sans Kannada', Figtree, system-ui, sans-serif;
  --sv-font-devanagari: 'Noto Sans Devanagari', Figtree, system-ui, sans-serif;
  --sv-lh-indic: 1.4; /* @kind font */
}
/* ==== design_system/tokens/colors.css ==== */
/* Svanzen — colour. A white ground; artwork and photographs carry the colour.
   One accent under three names (brand, action, focus) so they can diverge.
   No green or amber on a product surface: state is said in words and glyphs. */
:root{
  --sv-ground:#FFFFFF;
  --sv-card:#FFFFFF;
  --sv-well:#F7F7F7;            /* recessed: the follow-up, the facts block, skeletons */
  --sv-ink:#222222;             /* headings, labels, the filled secondary — 15.9:1 */
  --sv-text-body:#484848;       /* sentences — 9.2:1 */
  --sv-quiet:#6F6F6F;           /* meta — 5.0:1 */
  --sv-tint:#9C9C9C;            /* never text: disabled fills and rules only */
  --sv-border-soft:#EBEBEB;     /* hairlines: rows, sections, cards */
  --sv-border-button:#DDDDDD;   /* a labelled button or chip, lifted by --sv-el-lift */
  --sv-border-control:#8A8A8A;  /* 3:1 — fields, icon-only controls, dashed absence */
  --sv-cobalt:#2C50C8;
  --sv-brand-accent:var(--sv-cobalt);    /* the wordmark */
  --sv-action-primary:var(--sv-cobalt);  /* the one primary per screen, and links — 6.8:1 */
  --sv-action-primary-hover:#20399A;
  --sv-on-cobalt:#FFFFFF;
  --sv-destructive:#E7000B; /* the console only: errors and destructive actions in /admin. A public surface shows an error in ink with "!" (no red, no amber, no green) */
  --sv-on-destructive:#FFFFFF;
  --sv-destructive-fill:var(--sv-destructive);
  --sv-focus:var(--sv-cobalt);           /* a 2px ring at 2px */
  --sv-focus-on-cobalt:#FFFFFF; /* drawn inside a cobalt fill */
  --sv-scrim:rgba(34,34,34,.42);
  --sv-toast:#1F1F1F;
  --sv-on-toast:#FFFFFF;
  --sv-on-toast-quiet:#BDBDBD;
}
/* ==== design_system/tokens/typography.css ==== */
/* Svanzen — type. Figtree only. Seven sizes; hierarchy comes from weight and
   grey. The interface — rows, labels, buttons, chips, meta — is 14; sentences are
   16. 600 is the ceiling (800 for the wordmark alone). 12 is the floor.
   Display and title step up inside a wide page (patterns/layout.css), by
   container, so a phone frame stays a phone at any viewport. */
:root{
  /* THE SCALE. Interface 14, sentences 16, 12 the floor; weight 600 the ceiling. */
  --sv-display:30px; /* @kind font */
  --sv-display-lh:1.15; /* @kind font */
  --sv-display-ls:-.03em; /* @kind font */
  --sv-title:24px; /* @kind font */
  --sv-title-lh:1.2; /* @kind font */
  --sv-title-ls:-.025em; /* @kind font */
  --sv-section:18px; /* @kind font */
  --sv-section-lh:1.3; /* @kind font */
  --sv-section-ls:-.015em; /* @kind font */
  --sv-lede:17px; /* @kind font */
  --sv-lede-lh:1.5; /* @kind font */
  --sv-body-size:16px; /* @kind font */
  --sv-body-lh:1.55; /* @kind font */
  --sv-control-size:14px; /* @kind font */
  --sv-control-lh:1.35; /* @kind font */
  --sv-meta-size:14px; /* @kind font */
  --sv-meta-lh:1.5; /* @kind font */
  --sv-micro:12px; /* @kind font */
  --sv-micro-lh:1.4; /* @kind font */
  --sv-badge-size:12px; /* @kind font */ /* badges and tooltips — shadcn text-xs; the same 12 as the floor */
  --sv-figure:30px; /* @kind font */
  --sv-figure-ls:.14em; /* @kind font */
  --sv-input-size:14px; /* @kind font */ /* text typed into a field — shadcn text-sm; 16 on a phone-width page (layout.css) so iOS does not zoom */
  --sv-w-regular:400; /* @kind font */
  --sv-w-medium:500; /* @kind font */
  --sv-w-semi:600; /* @kind font */
  --sv-toast-size:13px; /* @kind font */ /* Sonner's toast text, which shadcn uses */
  /* 600 is the ceiling for every role; 800 survives for the wordmark alone. */
  --sv-w-wordmark:800; /* @kind font */
  --sv-wordmark-size:22.8px; /* @kind font */
  --sv-mark-size:28px; /* @kind font */
}
.sv-display{font:var(--sv-w-semi) var(--sv-display)/var(--sv-display-lh) var(--sv-font);letter-spacing:var(--sv-display-ls);color:var(--sv-ink);text-wrap:balance}
.sv-title{font:var(--sv-w-semi) var(--sv-title)/var(--sv-title-lh) var(--sv-font);letter-spacing:var(--sv-title-ls);color:var(--sv-ink);text-wrap:balance}
.sv-section-t{font:var(--sv-w-semi) var(--sv-section)/var(--sv-section-lh) var(--sv-font);letter-spacing:var(--sv-section-ls);color:var(--sv-ink)}
.sv-lede{font:var(--sv-w-regular) var(--sv-lede)/var(--sv-lede-lh) var(--sv-font);color:var(--sv-text-body);text-wrap:pretty}
.sv-prose{font:var(--sv-w-regular) var(--sv-body-size)/var(--sv-body-lh) var(--sv-font);color:var(--sv-text-body);text-wrap:pretty}
.sv-control-t{font:var(--sv-w-semi) var(--sv-control-size)/var(--sv-control-lh) var(--sv-font);color:var(--sv-ink)}
.sv-meta{font:var(--sv-w-regular) var(--sv-meta-size)/var(--sv-meta-lh) var(--sv-font);color:var(--sv-quiet)}
.sv-micro-t{font:var(--sv-w-semi) var(--sv-micro)/var(--sv-micro-lh) var(--sv-font);color:var(--sv-quiet)}
.sv-code{font:var(--sv-w-semi) var(--sv-figure)/1 var(--sv-font);letter-spacing:var(--sv-figure-ls);color:var(--sv-ink);font-variant-numeric:tabular-nums}
.sv-num{font-variant-numeric:tabular-nums}
.sv-kannada{font-family:var(--sv-font-kannada);line-height:var(--sv-lh-indic)}
.sv-devanagari{font-family:var(--sv-font-devanagari);line-height:var(--sv-lh-indic)}
.sv-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ==== design_system/tokens/radii.css ==== */
/* SOFT CORNERS — 8 · 12 · 16. A control is 8; a card, a menu, a popover, a toast or the tabs track 12; a photographic frame, a sheet or a dialog 16. A shape inside a rounded shape takes the outer corner minus its inset. */
:root{
  --sv-r-input:8px; /* @kind radius */ /* fields */
  --sv-r-pill:8px; /* @kind radius */ /* buttons, chips, tabs */
  --sv-r-card:12px; /* @kind radius */ /* cards, the tabs track */
  --sv-r-pop:var(--sv-r-card); /* @kind radius */ /* menus, popovers, toasts */
  --sv-r-grid:var(--sv-r-card); /* @kind radius */ /* a data table's frame */
  --sv-r-frame:16px; /* @kind radius */ /* images, the ask line, the reply box */
  --sv-r-sheet:16px; /* @kind radius */ /* dialogs, a bottom sheet's top corners */
  --sv-r-round:50%; /* @kind radius */
}
/* ==== design_system/tokens/elevation.css ==== */
/* Svanzen — five shadows. A shadow says "this floats or presses", never
   "this matters": cards and rows are flat. */
:root{
  --sv-el-lift:0 1px 2px rgba(34,34,34,.07); /* @kind shadow */ /* a labelled button or chip on its hairline */
  --sv-el-raise:0 18px 44px -28px rgba(34,34,34,.35); /* @kind shadow */ /* the ask line, the composer */
  --sv-el-pop:0 24px 50px -22px rgba(0,0,0,.35); /* @kind shadow */ /* menus, toasts */
  --sv-el-sheet:0 30px 80px -30px rgba(0,0,0,.5); /* @kind shadow */ /* dialogs and sheets */
  --sv-el-ring:0 0 0 3px rgba(44,80,200,.22); /* @kind shadow */ /* the soft focus ring on fields and buttons, beside the 2px outline */
  --sv-el-ring-destructive:0 0 0 3px rgba(231,0,11,.2); /* @kind shadow */ /* the console only */
  --sv-el-toast:var(--sv-el-pop); /* @kind shadow */
}
/* ==== design_system/tokens/motion.css ==== */
/* Svanzen — motion. Four durations, one ease-out curve; nothing bounces. */
:root{
  --sv-t-quick:120ms;  /* @kind other */ /* a press */
  --sv-t-hover:160ms;  /* @kind other */
  --sv-t-glide:220ms;  /* @kind other */ /* a tab thumb sliding, a menu gliding in */
  --sv-t-screen:280ms; /* @kind other */
  --sv-t-expand:380ms; /* @kind other */ /* a sheet rising, a disclosure opening */
  --sv-ease:cubic-bezier(0,0,.2,1); /* @kind other */
  --sv-press-scale:.98; /* @kind other */
}
@keyframes svScreenIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes svSheetUp{from{transform:translateY(101%)}to{transform:none}}
@keyframes svScrimIn{from{opacity:0}to{opacity:1}}
@keyframes svPulse{50%{opacity:.5}}
@keyframes svGlideIn{from{opacity:0;transform:translateY(-4px) scale(.97);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}
@keyframes svPop{40%{transform:scale(1.2)}}
@keyframes svToastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
}
/* The throbber: assets/svanzen-loading.svg, animated when inlined under .sv-throbber. */
.sv-throbber .ring-cw{transform-origin:200px 200px;animation:svThrobCw 1.6s linear infinite}
.sv-throbber .ring-ccw{transform-origin:200px 200px;animation:svThrobCcw 9s linear infinite}
.sv-throbber .ripple{transform-origin:200px 205px;opacity:0;animation:svThrobRipple 3.2s cubic-bezier(.2,.7,.3,1) infinite}
.sv-throbber .r2{animation-delay:.8s}.sv-throbber .r3{animation-delay:1.6s}.sv-throbber .r4{animation-delay:2.4s}
.sv-throbber .swan-group{animation:svThrobBob 2.4s ease-in-out infinite}
.sv-throbber .swan-shadow{transform-origin:200px 268px;animation:svThrobShadow 2.4s ease-in-out infinite}
.sv-throbber .dot{animation:svThrobDot 1.2s ease-in-out infinite}.sv-throbber .d2{animation-delay:.2s}.sv-throbber .d3{animation-delay:.4s}
@keyframes svThrobCw{to{transform:rotate(360deg)}}
@keyframes svThrobCcw{to{transform:rotate(-360deg)}}
@keyframes svThrobRipple{0%{transform:scale(.55);opacity:0}20%{opacity:.9}100%{transform:scale(1.9);opacity:0}}
@keyframes svThrobBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes svThrobShadow{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.86)}}
@keyframes svThrobDot{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.sv-throbber *{animation:none!important}.sv-throbber .ripple{opacity:.5;transform:scale(1.2)}}
/* ==== design_system/tokens/layout.css ==== */
/* Svanzen — space and layout. One spacing scale; the page shell
   (patterns/layout.css) is a container, so a frame lays out by its own width. */
:root{
  --sv-s1:4px; --sv-s2:8px; --sv-s3:12px; --sv-s4:16px; --sv-s5:24px; --sv-s6:32px; --sv-s7:48px; --sv-s8:64px;
  --sv-tap:32px;         /* the hit floor of a text control: 32 on a wide page, 44 on a phone-width page or console (patterns/layout.css, console.css) and wherever the pointer is touch */
  /* THE SHADCN SCALE. Heights from shadcn/ui new-york-v4: a control is h-9 (36), sm h-8 (32), lg h-10 (40),
     a menu or select item ~32, a tab 30 inside a 36 track, an avatar 32. On a phone-width page the controls step up one
     (40 / 36) and the text-control floor is 44, for touch (Apple HIG 44pt; WCAG 2.2 2.5.8 needs 24). */
  --sv-h:36px; --sv-h-sm:32px; --sv-h-lg:40px; --sv-h-item:32px; --sv-h-tab:30px; --sv-h-line:48px;
  --sv-tile:32px; --sv-tile-lg:40px;
  --sv-gutter:16px;      /* 48 inside a wide page */
  --sv-page-max:1180px;
  --sv-read:680px;       /* a reading column */
  --sv-rail:320px;       /* the side panel inside a wide page */
}
/* A TOUCH POINTER GETS THE 44 FLOOR EVERYWHERE (5.4): a control outside a Page or a ConsoleShell has no container
   to measure, so on a phone it would keep 32. A mouse on a narrow window keeps 32: it is not a finger. */
@media (pointer:coarse){:root{--sv-tap:44px}}
/* ==== design_system/base/elements.css ==== */
/* Svanzen — elements. The margin reset lands here:
   user-agent margins were adding to every flex gap. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sv-ground);color:var(--sv-text-body);font:var(--sv-w-regular) var(--sv-body-size)/var(--sv-body-lh) var(--sv-font);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,p,figure,blockquote,dl,dd,ul,ol,fieldset{margin:0}
ul[role="list"],ol[role="list"],menu{padding:0;list-style:none}
fieldset{padding:0;border:0;min-width:0}
img,svg,canvas,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
a{color:var(--sv-action-primary);text-underline-offset:2px}
a:hover{color:var(--sv-action-primary-hover)}
:focus-visible{outline:2px solid var(--sv-focus);outline-offset:2px}
[hidden]{display:none!important}
/* ==== design_system/patterns/core.css ==== */
/* Svanzen — core controls. A labelled control sits on a hairline with a
   one-pixel lift; a field or an icon-only control keeps the 3:1 edge. 44px tap
   floor. One primary (cobalt) per screen; the filled secondary is ink. */
.sv-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--sv-h);padding:0 14px;border-radius:var(--sv-r-pill);border:1px solid var(--sv-border-button);background:var(--sv-card);box-shadow:var(--sv-el-lift);color:var(--sv-ink);font:var(--sv-w-medium) var(--sv-control-size)/1 var(--sv-font);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background var(--sv-t-hover) var(--sv-ease),transform var(--sv-t-hover) var(--sv-ease)}
.sv-btn:hover{background:var(--sv-well);color:var(--sv-ink)}
.sv-btn:focus-visible{outline:0;border-color:var(--sv-action-primary);box-shadow:var(--sv-el-ring)}
.sv-btn:active{transform:scale(var(--sv-press-scale))}
.sv-btn.primary{background:var(--sv-action-primary);border-color:var(--sv-action-primary);color:var(--sv-on-cobalt)}
.sv-btn.primary:hover{background:var(--sv-action-primary-hover);border-color:var(--sv-action-primary-hover);color:var(--sv-on-cobalt)}
.sv-btn.primary:focus-visible{outline:0;box-shadow:var(--sv-el-ring)}
.sv-btn.ink{background:var(--sv-ink);border-color:var(--sv-ink);color:var(--sv-ground)}
.sv-btn.ink:hover{background:#000;color:var(--sv-ground)}
.sv-btn.quiet{border-color:transparent;background:transparent;box-shadow:none}
.sv-btn.quiet:hover{background:var(--sv-well)}
/* the quiet variant's box-shadow:none sits after .sv-btn:focus-visible at equal weight, so its ring is restated (5.4, WCAG 2.4.7) */
.sv-btn.quiet:focus-visible{border-color:var(--sv-action-primary);box-shadow:var(--sv-el-ring)}
.sv-btn.sm{height:var(--sv-h-sm);padding:0 12px}
.sv-btn.lg{height:var(--sv-h-lg);padding:0 20px}
.sv-btn.full{width:100%}
.sv-btn:disabled,.sv-btn[aria-disabled="true"]{background:var(--sv-well);border-color:var(--sv-well);box-shadow:none;color:var(--sv-quiet);cursor:default;transform:none}
.sv-btn svg{flex:none}
.sv-link{display:inline-flex;align-items:center;min-height:var(--sv-tap);padding:0;border:0;background:none;font:var(--sv-w-medium) var(--sv-control-size)/1 var(--sv-font);color:var(--sv-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--sv-border-control);cursor:pointer}
.sv-link:hover{color:var(--sv-ink);text-decoration-color:var(--sv-ink)}
.sv-iconbtn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--sv-h);height:var(--sv-h);padding:0;border-radius:var(--sv-r-pill);border:1px solid var(--sv-border-control);background:var(--sv-card);color:var(--sv-ink);cursor:pointer}
.sv-iconbtn.plain{border-color:transparent;background:transparent}
.sv-iconbtn:hover{background:var(--sv-well)}
.sv-iconbtn:focus-visible{outline:0;border-color:var(--sv-action-primary);box-shadow:var(--sv-el-ring)}
.sv-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.sv-field>label{font:var(--sv-w-medium) var(--sv-control-size)/1 var(--sv-font);color:var(--sv-ink)}
.sv-field>.hint{font:var(--sv-w-regular) var(--sv-micro)/var(--sv-micro-lh) var(--sv-font);color:var(--sv-quiet)}
.sv-field>.err{font:var(--sv-w-medium) var(--sv-micro)/var(--sv-micro-lh) var(--sv-font);color:var(--sv-ink)}
.sv-field>.err:before{content:"! "}
.sv-input{width:100%;min-height:var(--sv-h);padding:4px 12px;border-radius:var(--sv-r-input);border:1px solid var(--sv-border-control);background:var(--sv-card);box-shadow:var(--sv-el-lift);transition:border-color var(--sv-t-hover),box-shadow var(--sv-t-hover);font:var(--sv-w-regular) var(--sv-input-size)/1.4 var(--sv-font);color:var(--sv-ink)}
textarea.sv-input{min-height:64px;padding:8px 12px;resize:vertical}
.sv-input::placeholder{color:var(--sv-quiet)}
.sv-input:focus{outline:0;border-color:var(--sv-action-primary);box-shadow:var(--sv-el-ring)}
.sv-prefix{display:flex;align-items:center;border-radius:var(--sv-r-input);border:1px solid var(--sv-border-control);background:var(--sv-card)}
.sv-prefix>span{padding:0 4px 0 12px;font:var(--sv-w-medium) var(--sv-body-size)/1 var(--sv-font);color:var(--sv-quiet)}
.sv-prefix>.sv-input{border:0;min-height:calc(var(--sv-h) - 2px);padding-left:4px}
.sv-prefix:focus-within{border-color:var(--sv-action-primary);box-shadow:var(--sv-el-ring)}
.sv-prefix>.sv-input:focus{box-shadow:none}
.sv-code-in{display:flex;gap:8px}
.sv-code-in input{width:var(--sv-h);height:var(--sv-h);padding:0;text-align:center;border-radius:var(--sv-r-input);border:1px solid var(--sv-border-control);background:var(--sv-card);font:var(--sv-w-medium) var(--sv-input-size)/1 var(--sv-font);color:var(--sv-ink);font-variant-numeric:tabular-nums}
.sv-code-in input:focus{outline:0;border-color:var(--sv-action-primary);box-shadow:var(--sv-el-ring)}
.sv-composer{display:flex;flex-direction:column;gap:10px}
.sv-composer-box{display:flex;align-items:center;gap:8px;min-height:var(--sv-h-line);padding:5px 5px 5px 16px;border-radius:var(--sv-r-input);border:1px solid var(--sv-border-button);background:var(--sv-card);box-shadow:var(--sv-el-lift)}
.sv-composer-box:focus-within{border-color:var(--sv-action-primary);box-shadow:var(--sv-el-ring)}
.sv-composer-box input{flex:1;min-width:0;height:var(--sv-h);padding:0;border:0;outline:0;background:transparent;font:var(--sv-w-regular) var(--sv-input-size)/1 var(--sv-font);color:var(--sv-ink)}
.sv-composer-box input::placeholder{color:var(--sv-quiet)}
.sv-composer-box button{flex:none;height:var(--sv-h-sm);padding:0 12px;border:0;border-radius:var(--sv-r-input);background:var(--sv-ink);color:var(--sv-ground);font:var(--sv-w-medium) var(--sv-control-size)/1 var(--sv-font);cursor:pointer}
.sv-composer-box input:placeholder-shown+button{background:var(--sv-well);color:var(--sv-quiet);cursor:default}
.sv-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sv-chip{display:inline-flex;align-items:center;gap:6px;height:var(--sv-h-sm);padding:0 12px;border-radius:var(--sv-r-pill);border:1px solid var(--sv-border-button);background:var(--sv-card);box-shadow:var(--sv-el-lift);font:var(--sv-w-medium) var(--sv-control-size)/1 var(--sv-font);color:var(--sv-text-body);white-space:nowrap;cursor:pointer}
.sv-chip:hover{background:var(--sv-well)}
.sv-chip[aria-pressed="true"]{background:var(--sv-ink);border-color:var(--sv-ink);color:var(--sv-ground);box-shadow:none}
.sv-chip.fact{height:22px;padding:0 8px;border-color:transparent;background:var(--sv-well);box-shadow:none;font-size:var(--sv-badge-size);font-weight:var(--sv-w-medium);color:var(--sv-ink);cursor:default}
.sv-chip.fact small{font-weight:var(--sv-w-regular);font-size:var(--sv-badge-size);color:var(--sv-quiet)}
.sv-seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--sv-r-card);background:var(--sv-well)}
.sv-seg button{height:var(--sv-h-tab);padding:0 8px;border:0;border-radius:calc(var(--sv-r-card) - 4px);background:transparent;font:var(--sv-w-medium) var(--sv-control-size)/1 var(--sv-font);color:var(--sv-text-body);cursor:pointer}
.sv-seg button[aria-pressed="true"]{background:var(--sv-card);color:var(--sv-ink);box-shadow:var(--sv-el-raise)}
.sv-tabs{display:inline-flex;align-self:flex-start;gap:2px;max-width:100%;padding:3px;border-radius:var(--sv-r-card);background:var(--sv-well);overflow-x:auto;scrollbar-width:none}
.sv-tabs a{display:inline-flex;align-items:center;gap:8px;flex:none;height:var(--sv-h-tab);padding:0 8px;border-radius:calc(var(--sv-r-card) - 4px);font:var(--sv-w-medium) var(--sv-control-size)/1 var(--sv-font);color:var(--sv-quiet);text-decoration:none}
.sv-tabs a:hover{color:var(--sv-ink)}
.sv-tabs a[aria-current="page"]{background:var(--sv-card);color:var(--sv-ink);box-shadow:var(--sv-el-raise)}
.sv-tabs a b{min-width:22px;height:20px;padding:0 6px;border-radius:6px;background:transparent;box-shadow:inset 0 0 0 1px var(--sv-border-soft);font:var(--sv-w-medium) var(--sv-badge-size)/20px var(--sv-font);color:var(--sv-ink);text-align:center;font-variant-numeric:tabular-nums}
.sv-disc{display:flex;flex-direction:column;gap:10px}
.sv-disc>button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:var(--sv-tap);padding:0;border:0;background:none;font:var(--sv-w-medium) var(--sv-control-size)/1.3 var(--sv-font);color:var(--sv-ink);text-align:left;cursor:pointer}
.sv-disc>button svg{flex:none;color:var(--sv-quiet);transition:transform var(--sv-t-hover) var(--sv-ease)}
.sv-disc>button[aria-expanded="true"] svg{transform:rotate(180deg)}
.sv-menu{position:relative;display:inline-flex}
.sv-menu-list{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:220px;margin:0;padding:4px;list-style:none;border-radius:var(--sv-r-pop);border:1px solid var(--sv-border-soft);background:var(--sv-card);box-shadow:var(--sv-el-pop)}
.sv-menu-list button{display:flex;align-items:center;gap:8px;width:100%;min-height:var(--sv-h-item);padding:0 8px;border:0;border-radius:calc(var(--sv-r-card) - 6px);background:none;font:var(--sv-w-regular) var(--sv-control-size)/1.2 var(--sv-font);color:var(--sv-ink);text-align:left;cursor:pointer}
.sv-menu-list button:hover,.sv-menu-list button:focus-visible{background:var(--sv-well);outline:0}
.sv-scrim{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--sv-scrim);animation:svScrimIn var(--sv-t-screen) var(--sv-ease)}
.sv-scrim.in{position:absolute}
.sv-dialog{display:flex;flex-direction:column;gap:16px;width:100%;max-width:460px;padding:24px;border-radius:var(--sv-r-sheet);background:var(--sv-card);box-shadow:var(--sv-el-sheet)}
.sv-dialog>h2{font:var(--sv-w-semi) var(--sv-section)/var(--sv-section-lh) var(--sv-font);letter-spacing:var(--sv-section-ls);color:var(--sv-ink)}
.sv-dialog-a{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.sv-scrim.sheet{align-items:flex-end;padding:0}
.sv-scrim.sheet .sv-dialog{max-width:none;border-radius:var(--sv-r-sheet) var(--sv-r-sheet) 0 0;padding:20px 16px 28px;animation:svSheetUp var(--sv-t-expand) var(--sv-ease)}
.sv-scrim.sheet .sv-dialog-a{flex-direction:column-reverse}
.sv-scrim.sheet .sv-dialog-a .sv-btn{width:100%}
.sv-toast{display:flex;align-items:flex-start;gap:12px;width:min(100%,380px);padding:16px;border-radius:var(--sv-r-pop);background:var(--sv-toast);box-shadow:var(--sv-el-toast);color:var(--sv-on-toast);animation:svToastIn var(--sv-t-screen) var(--sv-ease)}
.sv-toast>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.sv-toast b{font:var(--sv-w-medium) var(--sv-toast-size)/1.5 var(--sv-font)}
.sv-toast-a{display:flex;gap:16px}
.sv-toast-a button{padding:0;border:0;background:none;font:var(--sv-w-semi) var(--sv-toast-size)/1 var(--sv-font);color:var(--sv-on-toast);cursor:pointer}
.sv-toast-a button.q{color:var(--sv-on-toast-quiet)}
.sv-toast>.x{flex:none;display:flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-4px -4px 0 0;padding:0;border:0;border-radius:6px;background:none;color:var(--sv-on-toast-quiet);cursor:pointer}
.sv-toast :focus-visible{outline-color:var(--sv-on-toast)}
.sv-tile{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--sv-tile);height:var(--sv-tile);border-radius:var(--sv-r-round);border:0;background:var(--sv-well);box-shadow:none;font:var(--sv-w-regular) var(--sv-control-size)/1 var(--sv-font);color:var(--sv-text-body);overflow:hidden}
.sv-tile.lg{width:var(--sv-tile-lg);height:var(--sv-tile-lg);font-size:var(--sv-body-size)}
.sv-tile img,.sv-tile canvas{width:100%;height:100%;object-fit:cover}
.sv-itemstate{display:flex;flex-wrap:wrap;align-items:baseline;font:var(--sv-w-regular) var(--sv-meta-size)/var(--sv-meta-lh) var(--sv-font);color:var(--sv-quiet)}
.sv-itemstate b{font-weight:var(--sv-w-semi);color:var(--sv-ink)}
.sv-itemstate>*+*:before{content:"·";margin:0 8px;color:var(--sv-tint)}
.sv-addline{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;font:var(--sv-w-regular) var(--sv-meta-size)/1 var(--sv-font);color:var(--sv-quiet)}
.sv-addline i{font-style:normal;color:var(--sv-tint)}
.sv-skel{display:block;height:12px;border-radius:var(--sv-r-input);background:#EFEFEF;animation:svPulse 2s ease-in-out infinite}
/* MICRO-INTERACTIONS, each one explaining a change of state (MicroKit's sliding indicator, glide menu,
   focus field, sliding arrow and icon swap; none of its decoration). */
.sv-btn{transition:background-color var(--sv-t-hover) var(--sv-ease),border-color var(--sv-t-hover) var(--sv-ease),box-shadow var(--sv-t-hover) var(--sv-ease),color var(--sv-t-hover) var(--sv-ease),transform var(--sv-t-quick) var(--sv-ease)}
.sv-btn-end{display:inline-flex;transition:transform var(--sv-t-hover) var(--sv-ease)}
.sv-btn:hover .sv-btn-end{transform:translateX(2px)}
.sv-btn[aria-pressed="true"] svg{animation:svPop var(--sv-t-glide) var(--sv-ease)}
.sv-chip,.sv-seg button,.sv-tabs a,.sv-iconbtn,.sv-menu-list button{transition:background-color var(--sv-t-hover) var(--sv-ease),color var(--sv-t-hover) var(--sv-ease),border-color var(--sv-t-hover) var(--sv-ease),box-shadow var(--sv-t-hover) var(--sv-ease),transform var(--sv-t-quick) var(--sv-ease)}
.sv-chip:active,.sv-iconbtn:active{transform:scale(var(--sv-press-scale))}
.sv-menu-list{transform-origin:top right;animation:svGlideIn var(--sv-t-glide) var(--sv-ease)}
.sv-tabs,.sv-seg{position:relative}
.sv-thumb{position:absolute;left:0;top:4px;bottom:4px;z-index:0;border-radius:calc(var(--sv-r-card) - 4px);background:var(--sv-card);box-shadow:var(--sv-el-lift);transition:transform var(--sv-t-glide) var(--sv-ease),width var(--sv-t-glide) var(--sv-ease);pointer-events:none}
.sv-tabs a,.sv-seg button{position:relative;z-index:1}
.sv-tabs.slides a[aria-current="page"],.sv-seg.slides button[aria-pressed="true"]{background:transparent;box-shadow:none}
/* a field reads 16 on a phone (no zoom on focus) and 14 on a wide page, as shadcn's text-base md:text-sm. */
@container svpage (min-width:600px){.sv-input{font-size:var(--sv-control-size)}}

/* THE TOOLTIP — shadcn TooltipContent: ink, 12px, 6×12, the control radius. 12 is allowed here and on badges only. */
.sv-tip{display:inline-block;width:fit-content;max-width:280px;padding:6px 12px;border-radius:var(--sv-r-input);background:var(--sv-ink);color:var(--sv-ground);font:var(--sv-w-regular) var(--sv-badge-size)/1.35 var(--sv-font);text-wrap:balance}

/* DESTRUCTIVE — shadcn variant="destructive": red fill, white text, the red ring. */
.sv-console .sv-btn.destructive{background:var(--sv-destructive-fill);border-color:transparent;color:var(--sv-on-destructive)}
.sv-console .sv-btn.destructive:hover{background:color-mix(in srgb,var(--sv-destructive-fill) 90%,transparent);color:var(--sv-on-destructive)}
.sv-console .sv-btn.destructive:focus-visible{box-shadow:var(--sv-el-ring-destructive)}

/* WITH NO SCRIPT (5.4). Inside a page's Main, what a component would open is drawn open and what only a script can
   work is not drawn: a Disclosure's body shows under its label; a Menu's list lies open in the flow, without its ⋯;
   a closed Dialog sits in the flow, without its Close; a Composer's suggestions (a script fills the line) and
   AddLine (a script opens its forms; the page draws them open) are not drawn. `!important` only where a rule
   un-hides, because base/elements.css hides [hidden] with it. The bar and the console are untouched. */
@media (scripting:none){
.sv-page main .sv-disc>[hidden]{display:block!important}
.sv-page main .sv-disc>button{cursor:default}
.sv-page main .sv-disc>button svg,.sv-page main .sv-menu>button,.sv-page main .sv-dialog-close,.sv-page main .sv-composer>.sv-chips,.sv-page main .sv-addline{display:none}
.sv-page main .sv-menu-list[hidden]{display:block!important;position:static;min-width:0;padding:0;border:0;box-shadow:none;animation:none}
.sv-page main .sv-scrim[hidden]{display:block!important;position:static;padding:0;background:none;animation:none}
.sv-page main .sv-scrim[hidden]>.sv-dialog{max-width:none;padding:16px 0;box-shadow:none}
}
/* ==== design_system/patterns/layout.css ==== */
/* Svanzen — the page. .sv-page is a container: what is inside lays out by the
   frame's own width (phone under 600, rows fold under 720, wide at 900), so a
   page is right at 390 and at 1280 in the same window. */
.sv-page{container:svpage/inline-size;background:var(--sv-ground);color:var(--sv-text-body);min-width:0}
.sv-page-in{--sv-gutter:16px;position:relative;min-height:100%}
@container svpage (min-width:900px){.sv-page-in{--sv-gutter:32px;--sv-display:36px}}
/* Typed text is 16 under 768 (shadcn text-base md:text-sm), so iOS does not zoom. Controls are 36 at every width. */
@container svpage (max-width:767px){.sv-page-in{--sv-input-size:16px}}
/* On a phone-width page the controls step up one and the text-control floor is 44 (touch). */
@container svpage (max-width:599px){.sv-page-in{--sv-h:40px;--sv-h-sm:36px;--sv-h-tab:34px;--sv-h-item:40px;--sv-tap:44px}}
.sv-appbar{display:flex;align-items:center;gap:12px;height:56px;padding:0 var(--sv-gutter)}
.sv-appbar.line{border-bottom:1px solid var(--sv-border-soft)}
.sv-brand{display:inline-flex;align-items:center;gap:9px;font:var(--sv-w-wordmark) var(--sv-wordmark-size)/1 var(--sv-font);letter-spacing:-.01em;color:var(--sv-brand-accent);text-decoration:none}
.sv-brand:hover{color:var(--sv-brand-accent)}
.sv-brand img{width:var(--sv-mark-size);height:var(--sv-mark-size)}
.sv-appbar-r{margin-left:auto;display:flex;align-items:center;gap:8px;min-width:0}
/* the business a supplier's bar names: data, so never linted (sv-verbatim), cut with an ellipsis before the bar wraps */
.sv-appbar-n{min-width:0;max-width:16em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--sv-w-regular) var(--sv-meta-size)/1.3 var(--sv-font);color:var(--sv-text-body)}
@container svpage (min-width:900px){.sv-appbar{height:60px}}
.sv-loc{display:flex;align-items:center;gap:8px;min-height:var(--sv-tap);padding:0 var(--sv-gutter);border-bottom:1px solid var(--sv-border-soft);font:var(--sv-w-regular) var(--sv-meta-size)/1.3 var(--sv-font);color:var(--sv-quiet)}
.sv-loc svg{flex:none;color:var(--sv-action-primary)}
.sv-loc b{font-weight:var(--sv-w-semi);color:var(--sv-ink)}
.sv-loc .sv-link{margin-left:auto}
.sv-main{display:flex;flex-direction:column;gap:32px;width:100%;max-width:calc(var(--sv-page-max) + 2 * var(--sv-gutter));margin:0 auto;padding:24px var(--sv-gutter) 40px}
.sv-main.read{max-width:calc(var(--sv-read) + 2 * var(--sv-gutter))}
@container svpage (min-width:900px){.sv-main{padding-top:40px;padding-bottom:56px}}
/* A LONE BUTTON KEEPS ITS OWN WIDTH (5.4): a column would deal it the whole width with its label centred. `full` still fills. */
:where(.sv-main,.sv-stack,.sv-aside,.sv-sec-b)>.sv-btn{align-self:flex-start}
.sv-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
@container svpage (min-width:960px){.sv-cols{grid-template-columns:minmax(0,1fr) var(--sv-rail);gap:48px}.sv-aside{position:sticky;top:24px}}
.sv-stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.sv-aside{display:flex;flex-direction:column;gap:20px;min-width:0}
.sv-head{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px 24px}
.sv-head-t{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1 1 320px}
.sv-head-t>p{font:var(--sv-w-regular) var(--sv-body-size)/1.5 var(--sv-font);color:var(--sv-quiet)}
.sv-head-a{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.sv-head-a>small{font:var(--sv-w-regular) var(--sv-micro)/1.3 var(--sv-font);color:var(--sv-quiet)}
.sv-head-a>.row{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
@container svpage (max-width:599px){.sv-head-a{align-items:stretch;width:100%}.sv-head-a .sv-btn{width:100%}.sv-head-a>.row .sv-btn{flex:1 1 auto}}
.sv-sec{display:flex;flex-direction:column;min-width:0}
.sv-sec-h{display:flex;align-items:center;gap:8px 12px;min-height:40px;padding-bottom:10px;border-bottom:1px solid var(--sv-border-soft)}
.sv-sec-h h2{font:var(--sv-w-semi) var(--sv-body-size)/1.3 var(--sv-font);color:var(--sv-ink)}
.sv-sec-h>span{font:var(--sv-w-regular) var(--sv-meta-size)/1 var(--sv-font);color:var(--sv-quiet);font-variant-numeric:tabular-nums}
.sv-sec-h>.end{margin-left:auto}
.sv-sec-b{display:flex;flex-direction:column}
.sv-sec.flat .sv-sec-b{padding-top:16px;gap:16px}
.sv-row{display:grid;grid-template-columns:var(--sv-tile) minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:10px;padding:12px 0;border-bottom:1px solid var(--sv-border-soft)}
.sv-row.nolead{grid-template-columns:minmax(0,1fr) auto}
.sv-row>.sv-tile{align-self:start}
.sv-row-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.sv-row-t>b,.sv-row-t>a.n{font:var(--sv-w-medium) var(--sv-control-size)/1.4 var(--sv-font);color:var(--sv-ink);text-decoration:none}
.sv-row-t>a.n:hover{text-decoration:underline}
.sv-row-t>p{font:var(--sv-w-regular) var(--sv-meta-size)/1.5 var(--sv-font);color:var(--sv-text-body);text-wrap:pretty}
.sv-row-t>.sub{display:flex;flex-wrap:wrap;font:var(--sv-w-regular) var(--sv-meta-size)/1.45 var(--sv-font);color:var(--sv-quiet)}
.sv-row-t>.sub span+span:before{content:"·";margin:0 7px}
.sv-row-r{display:flex;align-items:center;gap:24px;justify-self:end}
.sv-row-m{display:flex;gap:16px;font:var(--sv-w-regular) var(--sv-meta-size)/1.4 var(--sv-font);color:var(--sv-quiet);white-space:nowrap}
.sv-row-m span{min-width:120px}
.sv-row-a{display:flex;align-items:center;gap:8px}
.sv-row-x{grid-column:2/-1;min-width:0}
.sv-row.nolead .sv-row-x{grid-column:1/-1}
@container svpage (min-width:720px){.sv-row-t>.sub.narrow{display:none}}
@container svpage (max-width:719px){
.sv-row{grid-template-columns:40px minmax(0,1fr);align-items:start}
.sv-row.nolead{grid-template-columns:minmax(0,1fr)}
.sv-row-r{grid-column:2;justify-self:stretch;flex-direction:column;align-items:stretch;gap:10px}
.sv-row.nolead .sv-row-r{grid-column:1}
.sv-row-m{display:none}
.sv-row-a .sv-btn:first-child{flex:1}
.sv-row-x{grid-column:1/-1}
}
.sv-well{padding:14px 16px;border-radius:var(--sv-r-frame);background:var(--sv-well)}
.sv-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px 24px}
.sv-facts>div{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:10px;font:var(--sv-w-regular) var(--sv-meta-size)/1.5 var(--sv-font);color:var(--sv-text-body)}
.sv-facts svg{color:var(--sv-action-primary);margin-top:2px}
.sv-facts b{font-weight:var(--sv-w-semi);color:var(--sv-ink)}
.sv-facts .attr{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;font:var(--sv-w-medium) var(--sv-meta-size)/1 var(--sv-font);color:#5F6368}
.sv-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 20px;margin:0}
.sv-kv dt{font:var(--sv-w-regular) var(--sv-meta-size)/1.5 var(--sv-font);color:var(--sv-quiet)}
.sv-kv dd{margin:0;font:var(--sv-w-medium) var(--sv-meta-size)/1.5 var(--sv-font);color:var(--sv-ink)}
.sv-foot{display:flex;flex-wrap:wrap;gap:8px 20px;padding:24px var(--sv-gutter);border-top:1px solid var(--sv-border-soft);font:var(--sv-w-regular) var(--sv-meta-size)/1.4 var(--sv-font);color:var(--sv-quiet)}
.sv-foot a{color:var(--sv-quiet);text-decoration:none}
.sv-foot a:hover{color:var(--sv-ink)}
/* catalogue plates: one 4:3 frame, cover-cropped, so a drawing and a slab line up; `tall` is a portrait frame that
   contains a portrait cover whole (a full-length door is never cropped). The image fades in over the well when it
   arrives: the component marks the frame once it can watch the load, so with no script nothing waits. */
.sv-plates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
@container svpage (min-width:600px){.sv-plates{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 16px}}
@container svpage (min-width:900px){.sv-plates{grid-template-columns:repeat(4,minmax(0,1fr))}}
.sv-plate{display:flex;flex-direction:column;gap:4px;min-width:0;color:inherit;text-decoration:none;border-radius:var(--sv-r-frame)}
.sv-plate-i{display:block;aspect-ratio:4/3;margin-bottom:8px;border-radius:var(--sv-r-frame);overflow:hidden;background:var(--sv-well);box-shadow:inset 0 0 0 1px var(--sv-border-soft)}
.sv-plate-i img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--sv-t-glide) var(--sv-ease)}
.sv-plate:hover .sv-plate-i img{transform:scale(1.03)}
.sv-plate.tall .sv-plate-i{aspect-ratio:3/5}
.sv-plate.tall .sv-plate-i img{object-fit:contain}
.sv-plate-i img{transition:opacity var(--sv-t-expand) var(--sv-ease),transform var(--sv-t-glide) var(--sv-ease)}
.sv-plate-i[data-fade] img:not([data-in]){opacity:0}
.sv-plate>b{font:var(--sv-w-medium) var(--sv-body-size)/1.35 var(--sv-font);color:var(--sv-ink);overflow-wrap:anywhere}
.sv-plate>small{font:var(--sv-w-regular) var(--sv-meta-size)/1.4 var(--sv-font);color:var(--sv-quiet)}
.sv-plate:focus-visible{outline:0}.sv-plate:focus-visible .sv-plate-i{box-shadow:0 0 0 2px var(--sv-focus),var(--sv-el-ring)}
/* WITH NO SCRIPT (5.4): a row's facts are drawn open, its Menu's list wraps under its one action, and the row
   reads from the top, so a tall action column does not push the name down. */
@media (scripting:none){
.sv-page main .sv-row{align-items:start}
.sv-page main .sv-row-x[hidden]{display:block!important}
.sv-page main .sv-row-a{flex-wrap:wrap}
.sv-page main .sv-row-a .sv-menu{display:contents}
.sv-page main .sv-row-a .sv-menu-list{flex-basis:100%}
}
/* ==== design_system/patterns/ask.css ==== */
/* Svanzen — the ask: the box, the reading, the follow-up, the float, the reply, the supplier's line, the comparison. */
.sv-ask{display:flex;flex-direction:column;gap:10px}
.sv-ask-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 8px 8px 14px;border-radius:var(--sv-r-input);border:1px solid var(--sv-border-control);background:var(--sv-card);color:var(--sv-ink);box-shadow:var(--sv-el-lift)}
.sv-ask-line:focus-within{border-color:var(--sv-action-primary);box-shadow:var(--sv-el-ring)}
.sv-ask-line .sv-ask-in{flex:1 0 100%;min-width:0;min-height:3em;resize:none;field-sizing:content;max-height:9em;border:0;outline:0;background:transparent;font:var(--sv-w-regular) var(--sv-input-size)/1.5 var(--sv-font);color:var(--sv-ink);padding:0}
.sv-ask-line .sv-ask-in::placeholder{color:var(--sv-quiet)}
.sv-ask-thumb{width:32px;height:32px;border-radius:var(--sv-r-input);background-size:cover;background-position:center;flex:none}
.sv-ask-cam{height:var(--sv-h);padding:0 12px;border-radius:var(--sv-r-input);border:1px solid var(--sv-border-button);display:inline-flex;align-items:center;gap:6px;font:var(--sv-w-medium) var(--sv-control-size)/1 var(--sv-font);color:var(--sv-ink);background:var(--sv-card);flex:none;cursor:pointer;box-shadow:var(--sv-el-lift)}
.sv-ask-go{height:var(--sv-h);padding:0 16px;border:0;border-radius:var(--sv-r-input);background:var(--sv-action-primary);color:var(--sv-on-cobalt,#fff);font:var(--sv-w-medium) var(--sv-control-size)/1 var(--sv-font);flex:none;margin-left:auto;cursor:pointer}
.sv-ask-go:disabled{background:#EBEBEB;color:var(--sv-quiet);cursor:default}
.sv-ask-go:focus-visible{outline:2px solid var(--sv-focus-on-cobalt);outline-offset:-4px}
.sv-ask-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:0 2px}
.sv-ask-lb{font:var(--sv-w-medium) var(--sv-micro)/var(--sv-micro-lh) var(--sv-font);color:var(--sv-quiet)}
.sv-ask-chip{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border-radius:var(--sv-r-pill);border:1px solid var(--sv-border-button);background:var(--sv-card);font:var(--sv-w-medium) var(--sv-control-size)/1 var(--sv-font);color:var(--sv-ink);white-space:nowrap;cursor:pointer;box-shadow:var(--sv-el-lift)}
.sv-ask-chip small{font:var(--sv-w-regular) var(--sv-micro)/1 var(--sv-font);color:var(--sv-quiet)}
.sv-ask-chip .car{font-size:var(--sv-micro);color:var(--sv-quiet)}
.sv-ask-chip.req:after{content:"";width:6px;height:6px;border-radius:3px;background:var(--sv-action-primary)}
.sv-ask-chip.miss{border-style:dashed;color:var(--sv-quiet);font-weight:var(--sv-w-medium);border-color:var(--sv-border-control);box-shadow:none}
.sv-ask-chip.miss.req{border-color:var(--sv-action-primary);color:var(--sv-action-primary)}
.sv-ask-chip.miss.req:after{display:none}
.sv-ask-chip[aria-expanded="true"]{border-color:var(--sv-ink)}
.sv-ask-chip:focus-visible{outline:2px solid var(--sv-focus);outline-offset:2px}
/* A LONG READING WRAPS INSIDE THE LINE (5.4, WCAG 1.4.10): a place or a typed option of any length stays on the page. */
.sv-ask-chip{max-width:100%;padding-top:6px;padding-bottom:6px;white-space:normal;text-align:left;line-height:1.25;overflow-wrap:anywhere}
.sv-ask-chip small{white-space:nowrap}
.sv-ask-menu{position:absolute;left:0;top:calc(100% + 6px);z-index:30;min-width:200px;background:var(--sv-card);border:1px solid var(--sv-border-soft);border-radius:var(--sv-r-pop);box-shadow:var(--sv-el-pop);padding:6px;display:flex;flex-direction:column;gap:2px;margin:0;list-style:none;text-align:left}
.sv-ask-menu li{padding:6px 8px;border-radius:calc(var(--sv-r-card) - 6px);font:var(--sv-w-regular) var(--sv-control-size)/1.2 var(--sv-font);color:var(--sv-ink);white-space:nowrap;cursor:pointer;display:flex;justify-content:space-between;gap:12px}
.sv-ask-menu li:hover,.sv-ask-menu li:focus-visible{background:#F7F7F7;outline:0}
.sv-ask-menu li[aria-selected="true"]{background:var(--sv-ink);color:var(--sv-ground)}
.sv-ask-menu li{white-space:normal;overflow-wrap:anywhere}
.sv-ask-menu li.in{border:1px dashed var(--sv-border-control);color:var(--sv-quiet);margin-top:4px}
.sv-ask-next{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border-radius:var(--sv-r-frame);background:#F7F7F7}
.sv-ask-next b{font:var(--sv-w-semi) var(--sv-body-size)/var(--sv-body-lh) var(--sv-font);color:var(--sv-ink)}
.sv-ask-opts{display:flex;flex-wrap:wrap;gap:6px}
.sv-ask-opts button{min-height:var(--sv-h-sm);padding:0 12px;border-radius:var(--sv-r-pill);border:1px solid var(--sv-border-button);background:var(--sv-card);font:var(--sv-w-medium) var(--sv-control-size)/1 var(--sv-font);color:var(--sv-text-body);cursor:pointer;box-shadow:var(--sv-el-lift)}
.sv-ask-opts button[aria-pressed="true"]{background:var(--sv-ink);color:var(--sv-card);border-color:var(--sv-ink)}
.sv-ask-val{height:var(--sv-h);border-radius:var(--sv-r-input);border:1px solid var(--sv-border-control);background:var(--sv-card);padding:0 12px;font:var(--sv-w-regular) var(--sv-meta-size)/1 var(--sv-font);color:var(--sv-ink);max-width:280px}
.sv-ask-tick{font:var(--sv-w-regular) var(--sv-micro)/var(--sv-micro-lh) var(--sv-font);color:var(--sv-quiet)}
.sv-ask-tick:before{content:"✓ ";color:var(--sv-action-primary);font-weight:var(--sv-w-semi)}
.sv-ask-sug{display:flex;flex-wrap:wrap;gap:8px}
.sv-ask-sug button{min-height:var(--sv-h-sm);padding:0 12px;border-radius:var(--sv-r-pill);border:1px solid var(--sv-border-button);background:var(--sv-card);font:var(--sv-w-medium) var(--sv-control-size)/1 var(--sv-font);color:var(--sv-text-body);display:inline-flex;align-items:center;gap:6px;cursor:pointer;box-shadow:var(--sv-el-lift)}
.sv-ask-sug button:before{content:"+";color:var(--sv-action-primary);font-weight:var(--sv-w-semi)}
.sv-reply{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;padding:14px 16px;border-radius:var(--sv-r-card);background:var(--sv-card);border:1px solid var(--sv-border-soft)}
.sv-reply small{font:var(--sv-w-regular) var(--sv-micro)/var(--sv-micro-lh) var(--sv-font);color:var(--sv-quiet)}
.sv-reply .spec{font:var(--sv-w-semi) var(--sv-body-size)/1.4 var(--sv-font);color:var(--sv-ink);display:block;margin-top:2px}
.sv-reply .rate{font:var(--sv-w-semi) var(--sv-section)/1 var(--sv-font);letter-spacing:var(--sv-section-ls);color:var(--sv-ink);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.sv-reply .rate .unit{font-size:var(--sv-meta-size);font-weight:var(--sv-w-regular);color:var(--sv-quiet);margin-left:4px}
.sv-reply .meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 0;margin-top:2px;font:var(--sv-w-regular) var(--sv-meta-size)/var(--sv-meta-lh) var(--sv-font);color:var(--sv-quiet)}
.sv-reply .meta span+span:before{content:"·";margin:0 8px;color:var(--sv-border-control)}
.sv-reply .meta span.ctr{color:var(--sv-action-primary);font-weight:var(--sv-w-semi)}
.sv-float{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--sv-r-card);background:var(--sv-card);border:1px solid var(--sv-border-soft)}
.sv-float-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.sv-float-h b{font:var(--sv-w-semi) var(--sv-body-size)/var(--sv-body-lh) var(--sv-font);color:var(--sv-ink)}
.sv-float-st{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font:var(--sv-w-regular) var(--sv-meta-size)/1 var(--sv-font);color:var(--sv-quiet)}
.sv-float-st b{font-weight:var(--sv-w-semi);color:var(--sv-ink);font-variant-numeric:tabular-nums}
.sv-float-bar{flex:1 1 80px;height:4px;border-radius:2px;background:#EBEBEB;overflow:hidden;position:relative}
.sv-float-bar i{position:absolute;inset:0;width:var(--w,0%);background:var(--sv-action-primary)}
.sv-rfq{border:1px solid var(--sv-border-soft);border-radius:var(--sv-r-card);background:var(--sv-card);overflow:hidden}
.sv-rfq-line{display:grid;grid-template-columns:130px minmax(0,1fr) 260px;gap:12px;padding:11px 16px;border-bottom:1px solid var(--sv-border-soft);align-items:center}
.sv-rfq-line:last-child{border-bottom:0}
.sv-rfq-line .k{font:var(--sv-w-semi) var(--sv-meta-size)/1.3 var(--sv-font);color:var(--sv-ink)}
.sv-rfq-line .a{font:var(--sv-w-regular) var(--sv-meta-size)/1.4 var(--sv-font);color:var(--sv-text-body)}
.sv-rfq-line .a em{font-style:normal;color:var(--sv-quiet)}
.sv-rfq-line .a.y{color:var(--sv-ink);font-weight:var(--sv-w-medium)}
.sv-rfq-line .a.c{color:var(--sv-action-primary);font-weight:var(--sv-w-semi)}
.sv-rfq-line .a.r{color:var(--sv-ink);font-weight:var(--sv-w-semi);font-size:var(--sv-control-size);font-variant-numeric:tabular-nums}
.sv-rfq-seg{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.sv-rfq-seg button{min-height:32px;padding:0 11px;border-radius:var(--sv-r-pill);border:1px solid var(--sv-border-button);background:var(--sv-card);font:var(--sv-w-medium) var(--sv-control-size)/1 var(--sv-font);color:var(--sv-text-body);cursor:pointer;white-space:nowrap;box-shadow:var(--sv-el-lift)}
.sv-rfq-seg button[aria-pressed="true"]{background:var(--sv-ink);border-color:var(--sv-ink);color:var(--sv-card)}
.sv-rfq-seg button.ctr[aria-pressed="true"]{background:var(--sv-card);border-color:var(--sv-action-primary);color:var(--sv-action-primary)}
.sv-rfq-seg button.fill[aria-pressed="true"]{background:var(--sv-card);border-color:var(--sv-ink);color:var(--sv-ink)}
@media (max-width:640px){.sv-rfq-line{grid-template-columns:96px minmax(0,1fr)}.sv-rfq-line .sv-rfq-seg{grid-column:2}}
.sv-ask-line{container-type:inline-size;container-name:svask}
@container svask (max-width:460px){.sv-ask-cam{width:var(--sv-h);padding:0;justify-content:center}.sv-ask-cam span{display:none}.sv-ask-go{padding:0 16px}}
.sv-ask-pic{position:relative;flex:none;display:flex}
.sv-ask-pic .sv-ask-thumb{width:32px;height:32px}
.sv-ask-x{position:absolute;top:-8px;right:-8px;width:22px;height:22px;padding:0;border-radius:50%;border:1px solid var(--sv-border-control);background:var(--sv-card);color:var(--sv-ink);font:var(--sv-w-semi) var(--sv-micro)/1 var(--sv-font);display:grid;place-items:center;cursor:pointer}
.sv-ask-x:after{content:"";position:absolute;inset:-11px}
.sv-ask-x:focus-visible{outline:2px solid var(--sv-focus);outline-offset:2px}
.sv-ask-chip.k0{background:var(--sv-well)}
.sv-ask-chip.miss.req{border-color:var(--sv-border-control);color:var(--sv-ink)}
.sv-ask-chip.miss.req:after{display:block}
.sv-ask-menu li .o{display:flex;flex-direction:column;gap:2px}
.sv-ask-menu li small{font:var(--sv-w-regular) var(--sv-micro)/1.3 var(--sv-font);color:var(--sv-quiet)}
.sv-ask-menu li[aria-selected="true"] small{color:var(--sv-on-toast-quiet)}
.sv-ask-more{min-height:32px;padding:0 4px;border:0;background:none;font:var(--sv-w-semi) var(--sv-control-size)/1 var(--sv-font);color:var(--sv-text-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.sv-ask-more:focus-visible{outline:2px solid var(--sv-focus);outline-offset:2px}
.sv-asksum{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.sv-asksum ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.sv-asksum li{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:var(--sv-r-pill);border:1px solid var(--sv-border-soft);font:var(--sv-w-medium) var(--sv-control-size)/1.2 var(--sv-font);color:var(--sv-ink)}
.sv-asksum li small{font:var(--sv-w-regular) var(--sv-micro)/1 var(--sv-font);color:var(--sv-quiet)}
.sv-asksum .sv-link{min-height:var(--sv-tap);display:inline-flex;align-items:center}
.sv-floatask{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.sv-float.lapsed .sv-float-bar i{background:var(--sv-tint)}
.sv-reply .as{grid-column:1/-1;margin:2px 0 0;font:var(--sv-w-regular) var(--sv-meta-size)/var(--sv-meta-lh) var(--sv-font);color:var(--sv-text-body)}
.sv-reply .as b{font-weight:var(--sv-w-semi);color:var(--sv-ink)}
.sv-replygrid-scroll{overflow-x:auto;overflow-y:hidden;max-width:100%}
.sv-replygrid-scroll:focus-visible{outline:2px solid var(--sv-focus);outline-offset:2px}
.sv-replygrid{width:100%;border-collapse:collapse;color:var(--sv-ink);font-size:var(--sv-meta-size);line-height:var(--sv-meta-lh);font-variant-numeric:tabular-nums}
.sv-replygrid caption{text-align:left;padding:0 0 8px;color:var(--sv-quiet)}
.sv-replygrid th,.sv-replygrid td{text-align:left;vertical-align:top;padding:8px;border-bottom:1px solid var(--sv-border-soft);overflow-wrap:anywhere;min-width:128px}
.sv-replygrid th{font-weight:var(--sv-w-medium)}
.sv-replygrid thead th{color:var(--sv-ink)}
.sv-replygrid thead th.on{color:var(--sv-ink)}
.sv-replygrid thead th small{display:block;font:var(--sv-w-medium) var(--sv-micro)/1.3 var(--sv-font);color:var(--sv-ink)}
.sv-replygrid tbody th{position:sticky;left:0;z-index:1;background:var(--sv-card);min-width:104px;width:104px;color:var(--sv-text-body);font-weight:var(--sv-w-medium)}
.sv-replygrid td.ctr{color:var(--sv-action-primary);font-weight:var(--sv-w-semi)}
.sv-replygrid td.rate{font-weight:var(--sv-w-semi);font-size:var(--sv-control-size)}
.sv-replygrid tr.dec th,.sv-replygrid tr.dec td{border-bottom:0;padding-top:6px}
.sv-replygrid tr.dec .sv-link{min-height:var(--sv-tap);display:inline-flex;align-items:center}
.sv-numchoice{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;border:0;min-width:0}
.sv-numchoice legend{padding:0 0 6px;font:var(--sv-w-semi) var(--sv-section)/var(--sv-section-lh) var(--sv-font);letter-spacing:var(--sv-section-ls);color:var(--sv-ink)}
.sv-numchoice label{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:var(--sv-r-frame);border:1px solid var(--sv-border-button);background:var(--sv-card);cursor:pointer;box-shadow:var(--sv-el-lift)}
.sv-numchoice label:has(input:checked){border-color:var(--sv-ink);box-shadow:inset 0 0 0 1px var(--sv-ink)}
.sv-numchoice input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--sv-ink)}
.sv-numchoice b{display:block;font:var(--sv-w-semi) var(--sv-body-size)/1.35 var(--sv-font);color:var(--sv-ink)}
.sv-numchoice label span span{display:block;margin-top:2px;font:var(--sv-w-regular) var(--sv-meta-size)/var(--sv-meta-lh) var(--sv-font);color:var(--sv-text-body)}

.sv-rfq{container-type:inline-size;container-name:svrfq}
@container svrfq (max-width:600px){.sv-rfq-line{grid-template-columns:96px minmax(0,1fr)}.sv-rfq-line .sv-rfq-seg{grid-column:2}}
.sv-rfq-line.as .a{color:var(--sv-quiet)}
.sv-rfq-line.as .a b{display:block;font-weight:var(--sv-w-semi);color:var(--sv-text-body)}
.sv-art{position:relative;width:100%;height:100%;overflow:hidden;background:#FBF8F3}
.sv-art canvas{position:absolute;inset:0;width:100%;height:100%}
.sv-hero{display:grid;grid-template-columns:minmax(0,1fr)}
.sv-hero-art{position:relative;height:220px}
.sv-hero-w{display:flex;flex-direction:column;gap:16px;padding:24px var(--sv-gutter) 36px;min-width:0}
@container svpage (min-width:900px){.sv-hero{grid-template-columns:minmax(0,600px) minmax(0,1fr);min-height:600px}.sv-hero-w{order:0;padding:64px 0 64px var(--sv-gutter)}.sv-hero-art{order:1;height:auto;margin:16px var(--sv-gutter) 16px 48px;border-radius:var(--sv-r-frame)}}
.sv-floatask .sv-btn{box-shadow:none}
.sv-row-more{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;min-height:30px;margin-top:2px;padding:0;border:0;background:none;font:var(--sv-w-medium) var(--sv-meta-size)/1 var(--sv-font);color:var(--sv-ink);cursor:pointer}
.sv-row-more svg{transition:transform var(--sv-t-hover) var(--sv-ease)}
.sv-row-more[aria-expanded="true"] svg{transform:rotate(180deg)}
.sv-replygrid tbody tr:hover{background:#FAFAFA}
.sv-replygrid thead th{font-weight:var(--sv-w-medium)}
/* THE HOME ARTWORK SITS IN ITS FRAME (5.4): a band across the top of a phone's hero, the right-hand column of a wide
   one, never behind the words. No border, no caption: inside the frame the painting dissolves through a soft mask
   into a ground from the artist's palette. Home page only. */
@property --art-g1{syntax:'<color>';inherits:true;initial-value:#FFFFFF}
@property --art-g2{syntax:'<color>';inherits:true;initial-value:#FFFFFF}
.sv-hero-art{position:relative;height:240px;margin:0 var(--sv-gutter);border-radius:var(--sv-r-frame);overflow:hidden}
.sv-hero-art .sv-art{position:absolute;inset:0;background:radial-gradient(ellipse 72% 66% at 58% 46%,var(--art-g1) 0%,rgba(255,255,255,0) 100%),radial-gradient(ellipse 50% 56% at 26% 34%,var(--art-g2) 0%,rgba(255,255,255,0) 100%),#FBF8F3;transition:--art-g1 .9s var(--sv-ease),--art-g2 .9s var(--sv-ease)}
.sv-hero-art .sv-art canvas{-webkit-mask-image:radial-gradient(closest-side at 50% 50%,#000 60%,rgba(0,0,0,.6) 82%,transparent 100%);mask-image:radial-gradient(closest-side at 50% 50%,#000 60%,rgba(0,0,0,.6) 82%,transparent 100%)}
@container svpage (min-width:900px){.sv-hero-art{height:auto;margin:16px var(--sv-gutter) 16px 48px}}
.sv-ask-menu{transform-origin:top left;animation:svGlideIn var(--sv-t-glide) var(--sv-ease)}

/* trust markers: a glyph and a label, a button that explains itself */
.sv-tm{position:relative;display:inline-flex}
.sv-tm>button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 8px 0 6px;margin:0 -8px 0 -6px;border:0;border-radius:var(--sv-r-input);background:none;font:var(--sv-w-medium) var(--sv-control-size)/1 var(--sv-font);color:var(--sv-ink);cursor:pointer;transition:background-color var(--sv-t-hover) var(--sv-ease)}
.sv-tm>button:hover,.sv-tm>button[aria-expanded="true"]{background:var(--sv-well)}
.sv-tm>button:focus-visible{outline:0;box-shadow:var(--sv-el-ring)}
.sv-tm-pop{position:absolute;left:-6px;top:calc(100% + 6px);z-index:40;width:min(320px,80vw);display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:var(--sv-r-pop);background:var(--sv-card);border:1px solid var(--sv-border-soft);box-shadow:0 18px 40px -16px rgba(34,34,34,.28);animation:svGlideIn var(--sv-t-glide) var(--sv-ease)}
.sv-tm-pop b{display:flex;align-items:center;gap:10px;font:var(--sv-w-semi) var(--sv-control-size)/1.3 var(--sv-font);color:var(--sv-ink)}
.sv-tm-pop .w{font:var(--sv-w-regular) var(--sv-meta-size)/var(--sv-meta-lh) var(--sv-font);color:var(--sv-text-body)}
.sv-tm-pop small{font:var(--sv-w-regular) var(--sv-micro)/1.4 var(--sv-font);color:var(--sv-quiet)}
.sv-row-tm{display:flex;margin:2px 0 4px}
.sv-tmpanel{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:var(--sv-r-card);border:1px solid var(--sv-border-soft);max-width:560px;color:var(--sv-ink)}
.sv-tmpanel svg{flex:none}
.sv-tmpanel b{display:block;font:var(--sv-w-semi) var(--sv-section)/var(--sv-section-lh) var(--sv-font);color:var(--sv-ink)}
.sv-tmpanel p{margin:2px 0 4px;font:var(--sv-w-regular) var(--sv-meta-size)/var(--sv-meta-lh) var(--sv-font);color:var(--sv-text-body)}

/* WITH NO SCRIPT (5.4): no painting that was never painted, and no Photo button that cannot open anything; AskBox's
   <noscript> label, round a real file input, stands in. A VendorRow's facts are drawn open, so their toggle is not. */
.sv-ask-cam:has(>input:focus-visible){outline:2px solid var(--sv-focus);outline-offset:2px}
.sv-ask-line>noscript{display:none}
@media (scripting:none){
.sv-hero-art,.sv-ask-line>button.sv-ask-cam{display:none}
.sv-ask-line>noscript{display:contents}
.sv-page main .sv-row-more{display:none}
}
/* ==== design_system/patterns/console.css ==== */
/* patterns/console.css — the console (/admin) on the same system.
   Scoped to .sv-console, so a public page never sees a rule here. It is IN the
   bundle (not REFERENCE_ONLY): the console links the same stylesheet, and this
   layer replaces admin/shared.py's _ADMIN_EXTRAS_CSS. Sizes are the system scale, laid out
   as a shadcn/ui v4 dashboard: body 14, sidebar 256 with 32px items, a 12px count
   badge, 40px table heads in ink and sentence case, stat cards at 24/600. The
   console keeps the three state colours the public pages never use (ok, warn,
   neg), always with a word beside them, and its dark theme. */
.sv-console{--sv-side-accent:#F5F5F5;--sv-ok:#176B45;--sv-ok-soft:#E7F4ED;--sv-warn:#8A4F08;--sv-warn-soft:#FFF3DF;--sv-neg:#A4312B;--sv-neg-soft:#FCEAE8;--sv-info-soft:#EEF2FC;--sv-side:#FAFAFA;--sv-side-hover:#F0F0F0;--sv-side-w:256px;container:svconsole/inline-size;min-height:100%;background:var(--sv-ground);color:var(--sv-text-body);font:var(--sv-w-regular) var(--sv-control-size)/1.45 var(--sv-font)}
.sv-console[data-theme="dark"]{--sv-destructive:#FF6467;--sv-destructive-fill:color-mix(in srgb,#FF6467 60%,#171717);--sv-side-accent:#262626;--sv-ground:#0F1218;--sv-card:#0F1218;--sv-well:#161B23;--sv-side:#12161D;--sv-side-hover:#1B212B;--sv-ink:#E7EAF0;--sv-text-body:#C8CED8;--sv-quiet:#A8B0BF;--sv-tint:#6E7787;--sv-border-control:#707B8D;--sv-border-button:#3A4352;--sv-border-soft:#2A313D;--sv-action-primary:#7C9BF2;--sv-brand-accent:#7C9BF2;--sv-on-cobalt:#0F1218;--sv-focus:#E7EAF0;--sv-ok:#4CC38A;--sv-ok-soft:#142A1E;--sv-warn:#E0A458;--sv-warn-soft:#2A2115;--sv-neg:#E5736B;--sv-neg-soft:#331D1B;--sv-info-soft:#1B2440}
@media (prefers-color-scheme:dark){.sv-console[data-theme="auto"]{--sv-destructive:#FF6467;--sv-destructive-fill:color-mix(in srgb,#FF6467 60%,#171717);--sv-side-accent:#262626;--sv-ground:#0F1218;--sv-card:#0F1218;--sv-well:#161B23;--sv-side:#12161D;--sv-side-hover:#1B212B;--sv-ink:#E7EAF0;--sv-text-body:#C8CED8;--sv-quiet:#A8B0BF;--sv-tint:#6E7787;--sv-border-control:#707B8D;--sv-border-button:#3A4352;--sv-border-soft:#2A313D;--sv-action-primary:#7C9BF2;--sv-brand-accent:#7C9BF2;--sv-on-cobalt:#0F1218;--sv-focus:#E7EAF0;--sv-ok:#4CC38A;--sv-ok-soft:#142A1E;--sv-warn:#E0A458;--sv-warn-soft:#2A2115;--sv-neg:#E5736B;--sv-neg-soft:#331D1B;--sv-info-soft:#1B2440}}
.sv-cshell{display:grid;grid-template-columns:var(--sv-side-w) minmax(0,1fr);min-height:100%}
.sv-cskip{position:absolute;left:8px;top:8px;z-index:100;transform:translateY(-200%);padding:8px 12px;border-radius:var(--sv-r-input);background:var(--sv-card);color:var(--sv-ink);box-shadow:var(--sv-el-lift)}
.sv-cskip:focus{transform:none}
/* the sidebar (shadcn Sidebar): brand, groups in sentence case, 32px items, a count badge */
.sv-cside{display:flex;flex-direction:column;gap:2px;min-width:0;padding:12px 8px 16px;background:var(--sv-side);border-right:1px solid var(--sv-border-soft)}
.sv-cbrand{display:flex;align-items:center;gap:8px;height:40px;padding:0 8px;margin-bottom:4px;font:var(--sv-w-wordmark) var(--sv-lede)/1 var(--sv-font);letter-spacing:-.01em;color:var(--sv-brand-accent);text-decoration:none}
.sv-cbrand img{width:24px;height:24px}
.sv-cbrand span{margin-left:auto;font:var(--sv-w-medium) var(--sv-micro)/1 var(--sv-font);letter-spacing:0;color:var(--sv-quiet)}
.sv-cgroup{display:flex;flex-direction:column;gap:1px;padding-top:8px}
.sv-cgroup>p{display:flex;align-items:center;height:32px;margin:0;padding:0 8px;font:var(--sv-w-medium) var(--sv-micro)/1 var(--sv-font);color:var(--sv-quiet)}
.sv-cnav a{display:flex;align-items:center;gap:8px;height:var(--sv-tap);padding:0 8px;border-radius:var(--sv-r-input);font:var(--sv-w-regular) var(--sv-control-size)/1 var(--sv-font);color:var(--sv-ink);text-decoration:none}
.sv-cnav a:hover{background:var(--sv-side-hover)}
.sv-cnav a[aria-current="page"]{background:var(--sv-side-accent);font-weight:var(--sv-w-medium);box-shadow:none}
.sv-cnav a:focus-visible{outline:0;box-shadow:var(--sv-el-ring)}
.sv-ccount{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:6px;background:var(--sv-card);box-shadow:inset 0 0 0 1px var(--sv-border-soft);font:var(--sv-w-medium) var(--sv-badge-size)/1 var(--sv-font);font-variant-numeric:tabular-nums;color:var(--sv-ink)}
.sv-ccount.warn{background:var(--sv-warn-soft);box-shadow:none;color:var(--sv-warn)}
.sv-ccount.quiet{color:var(--sv-quiet)}
.sv-ccount.unread{background:transparent;box-shadow:inset 0 0 0 1px var(--sv-border-control);color:var(--sv-quiet)}
.sv-cside-foot{margin-top:auto;display:flex;align-items:center;gap:8px;padding:12px 8px 0;border-top:1px solid var(--sv-border-soft);color:var(--sv-quiet)}
.sv-cside-foot .sv-btn{margin-left:auto}
/* the phone bar: the sidebar becomes a sheet behind Menu */
.sv-ctop{display:none;align-items:center;gap:8px;height:56px;padding:0 12px;border-bottom:1px solid var(--sv-border-soft);background:var(--sv-card)}
.sv-ctop b{font:var(--sv-w-medium) var(--sv-control-size)/1 var(--sv-font);color:var(--sv-ink)}
.sv-ctop .sv-ccount{margin-left:0}
/* the page */
.sv-cmain{min-width:0;width:100%;max-width:1160px;padding:24px 32px 64px;box-sizing:border-box}
.sv-cmain.wide{max-width:1760px}
.sv-chead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin-bottom:24px}
.sv-chead h1{margin:0;font:var(--sv-w-semi) var(--sv-title)/var(--sv-title-lh) var(--sv-font);letter-spacing:var(--sv-title-ls);color:var(--sv-ink)}
.sv-chead h1 small{margin-left:4px;font:var(--sv-w-regular) var(--sv-control-size)/1 var(--sv-font);letter-spacing:0;color:var(--sv-quiet)}
.sv-chead p{margin:4px 0 0;max-width:72ch;color:var(--sv-quiet)}
.sv-chead .act{display:flex;flex-wrap:wrap;gap:8px}
.sv-csec{display:flex;flex-direction:column;gap:12px;margin-top:32px}
.sv-csec:first-child{margin-top:0}
.sv-csec>header{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.sv-csec h2{margin:0;font:var(--sv-w-semi) var(--sv-section)/var(--sv-section-lh) var(--sv-font);letter-spacing:var(--sv-section-ls);color:var(--sv-ink)}
.sv-csec>header p{margin:0;color:var(--sv-quiet)}
.sv-csec>header .end{margin-left:auto;display:flex;gap:8px}
.sv-cnote{margin:0;color:var(--sv-quiet)}
/* stat cards (shadcn SectionCards): the label, the number, one line under it */
.sv-cstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.sv-cstat{display:flex;flex-direction:column;gap:6px;min-width:0;overflow-wrap:anywhere;padding:24px;border-radius:var(--sv-r-card);border:1px solid var(--sv-border-soft);background:var(--sv-card);box-shadow:var(--sv-el-lift)}
.sv-cstat .k{color:var(--sv-quiet)}
.sv-cstat .v{font:var(--sv-w-semi) var(--sv-title)/1.1 var(--sv-font);letter-spacing:-.02em;color:var(--sv-ink);font-variant-numeric:tabular-nums}
.sv-cstat .v small{margin-left:0;font:var(--sv-w-regular) var(--sv-control-size)/1 var(--sv-font);letter-spacing:0;color:var(--sv-quiet)}
.sv-cstat .s{font:var(--sv-w-regular) var(--sv-meta-size)/var(--sv-meta-lh) var(--sv-font);color:var(--sv-quiet)}
.sv-cstat .s.neg{color:var(--sv-neg)}
.sv-cstat .s.warn{color:var(--sv-warn)}
.sv-cbar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--sv-border-soft)}
.sv-cbar i{display:block;height:100%}
.sv-cbar i.ok{background:var(--sv-ok)}.sv-cbar i.warn{background:var(--sv-warn)}.sv-cbar i.neg{background:var(--sv-neg)}.sv-cbar i.info{background:var(--sv-action-primary)}
/* the toolbar: search, filter chips with counts, actions at the end */
.sv-ctools{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sv-ctools .sv-field{flex:1 1 240px;max-width:340px}
.sv-ctools .sv-chip b{margin-left:6px;font:var(--sv-w-medium) var(--sv-micro)/1 var(--sv-font);font-variant-numeric:tabular-nums;color:var(--sv-quiet)}
.sv-ctools .sv-chip[aria-pressed="true"] b{color:inherit}
.sv-ctools .end{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px}
/* the data table (shadcn Table): 14px, 40px head in ink, 8×12 cells, a scroll region with a name */
.sv-ctable-wrap{position:relative;max-width:100%;overflow-x:auto;overflow-y:hidden;border:1px solid var(--sv-border-soft);border-radius:var(--sv-r-grid);background:var(--sv-card)}
.sv-ctable-wrap:focus-visible{outline:0;box-shadow:var(--sv-el-ring)}
.sv-ctable{width:100%;border-collapse:collapse;color:var(--sv-ink);font:var(--sv-w-regular) var(--sv-control-size)/1.45 var(--sv-font)}
.sv-ctable caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sv-ctable th,.sv-ctable td{padding:8px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--sv-border-soft);white-space:nowrap}
.sv-ctable thead th{height:40px;background:var(--sv-side);font-weight:var(--sv-w-medium);color:var(--sv-ink)}
.sv-ctable tbody tr:hover{background:var(--sv-side)}
.sv-ctable tbody tr:last-child td,.sv-ctable tbody tr:last-child th{border-bottom:0}
.sv-ctable tfoot th,.sv-ctable tfoot td{border-top:1px solid var(--sv-border-soft);border-bottom:0;background:var(--sv-side);font-weight:var(--sv-w-medium)}
.sv-ctable .num{text-align:right;font-variant-numeric:tabular-nums}
.sv-ctable .wrap{white-space:normal;min-width:220px;max-width:520px}
.sv-ctable .q{color:var(--sv-quiet)}
.sv-ctable td small{display:block;font:var(--sv-w-regular) var(--sv-micro)/1.35 var(--sv-font);color:var(--sv-quiet)}
.sv-ctable .act{text-align:right}
.sv-ctable .act>div{display:inline-flex;gap:6px}
.sv-ctable tr.empty td{padding:24px 12px;text-align:center;color:var(--sv-quiet);white-space:normal}
/* state badges: a word, a soft ground, a dot — never colour alone */
.sv-cbadge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--sv-r-input);background:var(--sv-well);font:var(--sv-w-medium) var(--sv-badge-size)/1 var(--sv-font);white-space:nowrap;color:var(--sv-ink)}
.sv-cbadge i{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.sv-cbadge.ok{background:var(--sv-ok-soft);color:var(--sv-ok)}
.sv-cbadge.warn{background:var(--sv-warn-soft);color:var(--sv-warn)}
.sv-cbadge.neg{background:var(--sv-neg-soft);color:var(--sv-neg)}
.sv-cbadge.info{background:var(--sv-info-soft);color:var(--sv-action-primary)}
.sv-cbadge.quiet{background:transparent;box-shadow:inset 0 0 0 1px var(--sv-border-soft);color:var(--sv-quiet)}
/* the decision list: one row per decision, the badge first, one action at the end (replaces .need) */
.sv-cneeds{display:flex;flex-direction:column;border:1px solid var(--sv-border-soft);border-radius:var(--sv-r-card);background:var(--sv-card);box-shadow:var(--sv-el-lift)}
.sv-cneed{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:12px 16px;border-bottom:1px solid var(--sv-border-soft)}
.sv-cneed:last-child{border-bottom:0}
.sv-cneed>div{min-width:0;overflow-wrap:anywhere}
.sv-cneed b{display:block;font-weight:var(--sv-w-medium);color:var(--sv-ink)}
.sv-cneed span{color:var(--sv-quiet)}
.sv-cneed .a{display:flex;gap:6px}
/* a case's facts, a card, an alert, a one-time secret, the pager */
.sv-cdl{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px 24px;margin:0}
.sv-cdl dt{color:var(--sv-quiet)}
.sv-cdl dd{margin:2px 0 0;font-weight:var(--sv-w-medium);color:var(--sv-ink);overflow-wrap:anywhere}
.sv-ccard{display:flex;flex-direction:column;gap:24px;min-width:0;padding:24px;border-radius:var(--sv-r-card);border:1px solid var(--sv-border-soft);background:var(--sv-card);box-shadow:var(--sv-el-lift)}
.sv-ccard>h3+p{margin-top:-18px}
.sv-ccard>h3{margin:0;font:var(--sv-w-semi) var(--sv-body-size)/1.3 var(--sv-font);color:var(--sv-ink)}
.sv-ccard>p{margin:0}
.sv-ccard .row{display:flex;flex-wrap:wrap;gap:8px}
.sv-cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.sv-calert{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;padding:12px 16px;border-radius:var(--sv-r-frame);border:1px solid var(--sv-border-soft);background:var(--sv-card);color:var(--sv-text-body)}
.sv-calert svg{grid-row:span 2;margin-top:2px;color:var(--sv-ink)}
.sv-calert b{font-weight:var(--sv-w-medium);color:var(--sv-ink)}
.sv-calert.neg{color:var(--sv-destructive)}
.sv-calert.neg b,.sv-calert.neg svg{color:var(--sv-destructive)}
.sv-calert.warn b,.sv-calert.warn svg{color:var(--sv-warn)}
.sv-csecret{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;border-radius:var(--sv-r-input);background:var(--sv-well);color:var(--sv-ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sv-csecret span{flex:1;min-width:0}
.sv-cpage{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;color:var(--sv-quiet)}
.sv-cpage>div{display:flex;gap:6px}

.sv-cframe{width:100%;height:420px;border:1px solid var(--sv-border-soft);border-radius:var(--sv-r-card);background:var(--sv-card)}
.sv-clogin{max-width:360px;margin:72px auto;display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:var(--sv-r-card);border:1px solid var(--sv-border-soft);background:var(--sv-card);box-shadow:var(--sv-el-lift)}
.sv-clogin h1{margin:0;font:var(--sv-w-semi) var(--sv-section)/1.3 var(--sv-font);color:var(--sv-ink)}
.sv-clogin p{margin:0;color:var(--sv-quiet)}
@container svconsole (max-width:820px){
.sv-cshell{grid-template-columns:minmax(0,1fr)}
.sv-cside{display:none}
.sv-cside.open{display:flex;position:fixed;inset:0 20% 0 0;z-index:60;box-shadow:var(--sv-el-sheet)}
.sv-ctop{display:flex}
.sv-cmain{padding:20px 16px 48px}
.sv-chead .act{width:100%}
.sv-chead .act .sv-btn{flex:1}
.sv-cstats{grid-template-columns:repeat(2,minmax(0,1fr))}
.sv-cneed{grid-template-columns:auto minmax(0,1fr)}
.sv-cneed .a{grid-column:2}
.sv-ctools .end{margin-left:0}
.sv-ctools .sv-field{flex-basis:100%;max-width:none}
.sv-clogin{margin:32px 16px}
/* the Inbox on a phone (5.4, ADM-06): the numbers marked `after` follow the section after them, before the rest */
.sv-cmain:has(>.sv-cstats.after){display:flex;flex-direction:column}
.sv-cmain:has(>.sv-cstats.after)>.sv-chead{margin-bottom:0}
.sv-cmain>.sv-cstats.after{order:1;margin-top:32px}
.sv-cmain>.sv-cstats.after+*~*{order:2}
}
/* a phone-width console steps its controls up as a page does, with the 44 touch floor (5.4) */
@container svconsole (max-width:599px){.sv-cshell,.sv-clogin{--sv-h:40px;--sv-h-sm:36px;--sv-h-tab:34px;--sv-h-item:40px;--sv-tap:44px}}
/* ==== scripts/ds_extras.css ==== */
/* THE REPO'S OWN LAYER, AND THE ONE FILE IN THE BUNDLE THAT IS NOT VENDORED.

   design_system/ is a verbatim copy of the claude.ai Design project and must
   stay that way — docs/design/DS_SYNC.md pushes it back up, so a rule written
   in there to fix a repo surface would be pushed into the design system as if
   a designer had drawn it. This file is where a repo-owned rule goes instead.

   ITS POSITION IS THE POINT, AND SINCE DS 5.3 IT IS LAST. 5.x has no trailing
   wide-viewport sheet — its responsive rules are container queries inside
   each pattern file — so scripts/build_ds_css.py splices this file AFTER
   every design-system rule and it wins every equal-specificity tie
   (design_system/MIGRATION-5.3.md §3). That is why it may own nothing the
   system defines: a rule here whose subject is a design-system class would
   silently redraw a 5.3 component on every page.
   tests/test_ds53_runtime_sheets.py is the guard — it computes the system's
   classes and tokens from the served bundle — and its reviewed
   ALLOWED_SUBJECTS names any rule below that must restyle a component,
   with its reason, logged for the design project: none since DS 5.4
   (28 Sep 2026), which answered all twenty-one.

   NO `--sv-*` PROPERTY IS DECLARED HERE (the namespace is the system's), NO
   PIXEL TYPE SIZE, and NOTHING LAYS OUT BY THE VIEWPORT (MIGRATION-5.3 §9):
   a width step is a container query on 5.3's page (`svpage`). Preference
   queries — reduced motion, scripting — stay.

   THE RECORD, 28 SEP 2026 (DS 5.3 T6): the notes that stood here for every
   rule the route trains deleted (T2-T5) left this file; each train's record
   in docs/design/DS_SYNC.md names what left and why. */

/* ------------------------------------------------------------- type -- */
/* The home fold's wait line and the Location line's note. */
.sv-note{font-size:var(--sv-meta-size);line-height:var(--sv-meta-lh);color:var(--sv-quiet);margin:0}
/* A BARE `<b>` OR `<strong>` RENDERS AT THE BROWSER'S OWN 700; the ceiling is
   600 for every role but the wordmark. */
b, strong { font-weight: var(--sv-w-semi); }
/* A PLACEHOLDER MUST NEVER READ AS A REAL VALUE at a glance (the operator's
   local preview of the statutory block): a dashed underline, a size under
   the values around it. */
.ph{font-size:var(--sv-micro);font-weight:var(--sv-w-regular);color:var(--sv-text-body);border-bottom:1px dashed var(--sv-border-control)}
/* A run of digits — a CIN, a GSTIN, a phone, a website — takes tabular
   figures and a break point, not a second typeface. */
.sv-mono { font-variant-numeric: tabular-nums; letter-spacing: .01em;
           overflow-wrap: anywhere; }
/* The operator's "Not for publication" banner (landing/shell.py). */
.banner { background: var(--sv-card); border-bottom: 1px solid var(--sv-ink);
          padding: 14px 22px; font-size: var(--sv-meta-size);
          line-height: 1.55; color: var(--sv-ink); }
.banner code { font-family: inherit; font-weight: 600;
               font-size: var(--sv-micro); overflow-wrap: anywhere; }
/* The list a composed answer draws (ui_tokens.prose_html). The markers are
   REAL — the order is the model's statement, and a reader copying it needs
   the numerals to come with it. */
.sv-prose-list{margin:2px 0;padding-left:22px;font-size:var(--sv-meta-size);
               line-height:1.55;color:var(--sv-text-body)}
.sv-prose-list li{margin:0 0 6px}
.sv-prose-list li:last-child{margin-bottom:0}
.sv-prose-list::marker,.sv-prose-list li::marker{color:var(--sv-quiet)}

/* ------------------------------------------ the photo, before it is sent --
   WHAT THE READER PICKED, SHOWN BACK TO THEM (the front door and the
   signed-in photo door). A confirmation, not a submission: Find (or Look it
   up) sends it, Remove is the way back. `[hidden]` gets its own rule on each
   block because a `display` declaration beats the UA's `[hidden]` style. */
.sv-preview { display: flex; align-items: center; justify-content: center;
              gap: 14px; }
.sv-preview[hidden] { display: none; }
.sv-preview .thumb { width: 72px; height: 72px; object-fit: cover;
                     border-radius: var(--sv-r-frame);
                     border: 1px solid var(--sv-border-soft); }
.sv-preview .thumb[hidden] { display: none; }
.sv-preview .acts { display: flex; align-items: center; gap: 14px; }
.sv-preview .sv-attached { max-width: 210px; }
/* A file this browser cannot decode draws its name, size and a tick
   (ui_tokens.SVANZEN_THUMBNAIL_JS) instead of a picture. */
.sv-attached{display:inline-flex;align-items:center;gap:7px;min-width:0;
             font-size:var(--sv-meta-size);font-weight:var(--sv-w-semi);
             line-height:1.35;color:var(--sv-ink)}
.sv-attached[hidden]{display:none}
.sv-attached svg{flex:none;color:var(--sv-cobalt)}
.sv-attached .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A photo we will not take: weight, not colour. */
.sv-toobig{display:block;font-size:var(--sv-meta-size);
           font-weight:var(--sv-w-semi);line-height:1.4;
           color:var(--sv-ink);margin:8px 0 0}
.sv-toobig[hidden]{display:none}

/* ------------------------------------------------------- the front door --
   The fold's own blocks around 5.3's AskBox: the no-script Identify's row,
   the column that steps aside for the wait, the wait itself (the question on
   its way in the reader's own words, over the throbber), and the photo
   control — CLIPPED, not hidden, so it stays in the tab order, with its
   ring drawn on the label a reader can see. */
.sv-actions { display: flex; gap: 10px; justify-content: center;
              flex-wrap: wrap; padding-top: 16px; }
.sv-column[hidden] { display: none; }
.sv-waiting { display: flex; flex-direction: column; align-items: center;
           justify-content: center; padding: 8px 0 20px; }
.sv-waiting[hidden] { display: none; }
.sv-asked { max-width: 320px; margin: 0 0 8px;
            font-size: var(--sv-body-size); font-weight: 600;
            line-height: 1.45; color: var(--sv-ink);
            text-wrap: pretty; }
.sv-asked[hidden] { display: none; }
.sv-file { position: absolute; width: 1px; height: 1px;
           margin: -1px; padding: 0; overflow: hidden;
           clip: rect(0 0 0 0); clip-path: inset(50%);
           white-space: nowrap; border: 0; }
.sv-column:has(#photo:focus-visible) [for="photo"] {
                   outline: 2px solid var(--sv-focus); outline-offset: 2px; }

/* ------------------------------------------------ Google's attribution --
   The policy's text form (3 Sep 2026): 400 weight, the micro step (inside
   the policy's 12–16), the quiet colour that passed the contrast walk.
   WRITTEN CLOSED UP, and that is load-bearing: tests/test_svanzen_pages.py
   pins the SPACED selector out of the served bytes (it was once a /v-only
   alias for another rule). */
.sv-attrib{margin:8px 0 0;font-size:var(--sv-micro);line-height:var(--sv-micro-lh);font-weight:400;color:var(--sv-quiet);white-space:nowrap}

/* ----------------------------------------------------------- the shell --
   THE MENU'S LINKS. 5.3's Menu draws its items as buttons; the bar's menu
   navigates, so its items are `a role="menuitem"` (ui/ds.py `menu(links=)`)
   and take the list's button look — a rule whose subject is the `a` is the
   application's. Its floor is the tap floor (`--sv-tap`: 32 wide, 44 on a
   phone), its corner the control corner; the current page says so in
   weight; a separator is a group boundary. */
.sv-menu-list a{display:flex;align-items:center;gap:8px;width:100%;min-height:var(--sv-tap);padding:0 8px;border-radius:var(--sv-r-input);font:var(--sv-w-regular) var(--sv-control-size)/1.2 var(--sv-font);color:var(--sv-ink);text-align:left;text-decoration:none;white-space:nowrap;transition:background-color var(--sv-t-hover) var(--sv-ease),color var(--sv-t-hover) var(--sv-ease)}
.sv-menu-list a:hover,.sv-menu-list a:focus-visible{background:var(--sv-well);color:var(--sv-ink);outline:0}
.sv-menu-list a[aria-current="page"]{font-weight:var(--sv-w-semi)}
.sv-menu-list [role="separator"]{height:1px;margin:4px 0;background:var(--sv-border-soft)}
/* THE FOOTER'S SIGN OUT is a POST (a GET that ends a session is ended by
   whatever prefetches the page): a form's button that reads as a link. */
.sv-foot form{margin:0}
.sv-foot form button{padding:0;border:0;background:none;font:inherit;color:var(--sv-quiet);cursor:pointer}
.sv-foot form button:hover{color:var(--sv-ink)}
/* UNDER A 420px PAGE FOR BUSINESSES LEAVES THE PUBLIC BAR; it stays one tap
   away in the menu and the footer. (The supplier's bar names its business
   through 5.4's AppHeader `name`, `.sv-appbar-n`, since 28 Sep 2026: the
   application's `.sv-bizname` left with the span it dressed.) */
@container svpage (max-width:419px){.sv-forbiz{display:none}}
/* THE SCREEN ROOT IS NOT A FIXED-POSITIONING CONTAINING BLOCK: `backwards`
   fills only before the animation's active phase, so the plate's download
   sheet (a fixed scrim inside the screen) lays out against the viewport. */
main.sv-screen{animation-fill-mode:backwards}
/* EVERY CONTENT IMAGE FADES IN over its Tile's well; `@starting-style` is
   the whole mechanism, and no script is involved. */
.sv-tile img{opacity:1;transition:opacity var(--sv-t-hover) var(--sv-ease)}
@starting-style{.sv-tile img{opacity:0}}
/* SECTION REVEAL, armed by the script that reveals it (`sv-motion` on
   <html>, ui_tokens.SVANZEN_REVEAL_SCRIPT): with no script, every section
   is visible. */
.sv-motion .sv-reveal{opacity:0;transform:translateY(8px);transition:opacity var(--sv-t-expand) var(--sv-ease),transform var(--sv-t-expand) var(--sv-ease)}
.sv-motion .sv-reveal.in{opacity:1;transform:none}
/* AND NONE OF IT FOR A READER WHO ASKED FOR LESS: turned off, not shortened. */
@media (prefers-reduced-motion:reduce){
  .sv-tile img{transition:none}
  .sv-menu-list a{transition:none}
  .sv-motion .sv-reveal{opacity:1;transform:none;transition:none}
}

/* ------------------------------------------------------- the workspace --
   The shell's wide column (`_page(workspace=True)`): its field-like controls
   at the column's width (a radio or a checkbox is not a field — `:where()`
   keeps the specificity), and no vertical padding of its own, so 5.3's Main
   is the page's only rhythm. From a page 900 wide the column is 1120. */
.sv-v9-wide input:where(:not([type=radio]):not([type=checkbox])),.sv-v9-wide select,.sv-v9-wide textarea{min-width:0;max-width:100%;width:100%;box-sizing:border-box}
.sv-wrap.sv-v9-wide{padding-top:0;padding-bottom:0}
@container svpage (min-width:900px){
  .sv-wrap.sv-v9-wide{max-width:1120px}
}
/* THE WORKSPACE PAGES' OWN PARTS (portal/pages.py), on some twenty pages: a
   form's buttons on one wrapping line; a closed choice as its real radios or
   checkboxes; fields under one legend; a form as one of Main's blocks; a
   list's filters on one line where the column has room (each filter the row
   grows, `sv-pgrow`, takes a share); an enquiry's frozen text; a photograph
   in 5.3's frame at no more than 360px; a long link that wraps. */
.sv-pacts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.sv-pticks{display:flex;flex-wrap:wrap;gap:4px 20px;min-width:0;margin:0;padding:0;border:0}
.sv-pticks legend,.sv-pset>legend{padding:0 0 6px;font:var(--sv-w-medium) var(--sv-control-size)/1.4 var(--sv-font);color:var(--sv-ink)}
.sv-pticks label,.sv-listform .sv-pticks label{display:inline-flex;align-items:center;gap:8px;min-height:var(--sv-tap);font:var(--sv-w-regular) var(--sv-control-size)/1.3 var(--sv-font);color:var(--sv-ink)}
.sv-pticks input{flex:none;width:auto;margin:0;padding:0;accent-color:var(--sv-ink)}
.sv-pset{display:grid;gap:12px;min-width:0;margin:0;padding:0;border:0}
.sv-main>.sv-listform,.sv-sec.flat .sv-sec-b>.sv-listform{margin-top:0}
.sv-listform.sv-pfilter{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px}
.sv-pfilter>.sv-pgrow{flex:1 1 200px;min-width:0}
.sv-pfilter>.sv-pacts{flex:none}
.sv-ptext{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font:var(--sv-w-regular) var(--sv-meta-size)/var(--sv-meta-lh) var(--sv-font);color:var(--sv-ink)}
.sv-pphoto{margin:0}
.sv-pphoto img{display:block;width:100%;max-width:360px;height:auto;border-radius:var(--sv-r-frame);background:var(--sv-well)}
.sv-pwrap{overflow-wrap:anywhere}

/* ------------------------------------- the catalogues and public pages --
   What those pages draw and no component does: the catalogue search at the
   drawing's own width, a pager on one wrapping row, a Tile and its line on
   one line, a design's plate and the specimen sheet in 5.3's frame. */
.sv-catsearch{max-width:440px}
.sv-pager{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.sv-leadline{display:flex;align-items:center;gap:16px;min-width:0}
.sv-designplate{margin:0;max-width:480px}
.sv-designplate figcaption{margin-top:8px}
.sv-specimen{margin:0;max-width:320px;color:var(--sv-ink)}
.sv-specimen svg{display:block;width:100%;height:auto}
.sv-specimen figcaption{margin-top:8px}
/* A small public form's stack — 5.3's Field over its buttons' line. */
.sv-feedback{display:grid;gap:12px}
/* The statutory block's registered office keeps the lines it was written in. */
.sv-addr{white-space:pre-line}

/* ================================================ reviewed exceptions ==
   NONE SINCE 28 SEP 2026 (DS 5.4, the fix release). The twenty-one rules
   that restyled a 5.3 component — the tall Plate, the quiet Button's ring,
   AskBox's chip, the no-script posture, and the console's wordmark, table
   region, long words and the Inbox's phone order — are each drawn by the
   system itself now and left this file with their ALLOWED_SUBJECTS entries
   (tests/test_ds53_runtime_sheets.py; docs/design/DS_SYNC.md, "5.4").
   A DESIGN'S OWN PLATE (the design page's figure, `.sv-designplate`) keeps
   its narrower column when its cover is portrait: the figure takes 5.4's
   `Plate tall` classes (`sv-plate tall`, the founder's #528, "doors are
   supposed to be full length"), and stays a block — a plate's frame, not a
   link. */
.sv-designplate.tall{display:block;max-width:300px}

/* ======================================= the console's document (T4a) =====
   28 SEP 2026 (DS 5.3 T4a, the console's shell): every /admin page is 5.3's
   ConsoleShell, and the login is inside its root — `.sv-console` directly
   in <body>, dressed by patterns/console.css. Two things the component
   cannot say about the document it sits in. Its root fills the window: the
   system's `min-height:100%` chain (`.sv-console`, `.sv-cshell`) needs a
   parent of definite height, which a grid body gives it (a stretched grid
   item's height is definite), so the sidebar reaches the window's foot and
   the dark ground covers what <body>'s own light ground would show under a
   short page. And Sign out is a form, a POST (a GET that ends a session is
   one a prefetch can end): the form, not its button, is the foot's flex
   item, so it takes the auto margin the system gives the button. */
body:has(> .sv-console){display:grid;min-height:100vh;min-height:100dvh}
.sv-cside-foot>form{margin-left:auto}