/* =====================================================================================
   RJ Laravel Admin (brand-006) · F1 component kit · base.css · phase 1 (2026-10-18)
   Load order: tokens.css -> base.css. Part A is brand-005 kit v4 base.css verbatim (the 86 as-is components and the
   kit page chrome, unchanged by name). Part B is the F1 layer: the shell, the domain atoms and every F1 variant /
   missing component the flagships draw. Desktop (.kit-d) and phone (.kit-m) are dedicated compositions.
   ===================================================================================== */

/* ===== PART A · brand-005 kit v4 base.css (verbatim) ===== */
/* =====================================================================================
   RJ DTC Admin · Round 2 component kit · base.css  (FROZEN 2026-10-11 · integration pass 2026-10-11, see KIT-CHANGELOG.md)
   Load order on every page:  tokens.css  ->  base.css  ->  families/<family>/family.css
   Holds: fonts, reset, kit page chrome (header, specimen card, states row), the app shell
   (desktop + phone), and the shared primitives every family reuses (button, icon button,
   chip, field, kbd, avatar, "?" help trigger). Family-specific CSS lives in the family's
   own family.css under its own class prefix. See CONTRACT.md.

   Desktop vs phone: two DEDICATED compositions (/ and /m/), never a responsive collapse.
   No width or height media query and no container size query anywhere (scripts/check-surface-pair.py).
   The body class picks the composition:  <body class="kit kit-d">  or  <body class="kit kit-m">.
   ===================================================================================== */

/* ---------- fonts: Archivo at standard width only (wght axis, no wdth axis loaded) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400..700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:hsl(var(--canvas));color:hsl(var(--foreground));font:var(--w-regular) var(--text-body)/var(--lh-body) var(--font-ui);
  -webkit-font-smoothing:antialiased;font-feature-settings:"cv11" 1}
img,svg{display:block;max-width:100%}
svg{flex:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit;text-underline-offset:3px}
table{border-collapse:separate;border-spacing:0}
:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}
[hidden]{display:none!important}

/* Archivo voice: titles, buttons, the menu, labels, table headers. Normal width, never tracked out. */
.title,.page-title,.btn,.sb-item,.sb-group,.sb-brand b,.lbl,.th,.kit-h1,.kit-h2,.spec-h,.sec-title,.tab,.seg-i{
  font-family:var(--font-voice);font-stretch:var(--font-stretch-title);font-variation-settings:normal}
.title{font-weight:var(--title-w);letter-spacing:-.02em}
.code,code,kbd,.mono{font-family:var(--font-code);letter-spacing:0}
.code{font-size:var(--text-code)}
.num,.money{font-variant-numeric:tabular-nums}
.q{color:hsl(var(--muted-foreground))}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* =================================== KIT PAGE CHROME =================================== */
.kit-d .kit-page{max-width:var(--vp-desktop);margin:0 auto;padding:var(--s-8) var(--s-10) var(--s-18)}
.kit-m .kit-page{max-width:var(--vp-phone);margin:0 auto;padding:var(--s-5) var(--s-4) var(--s-7)}
.kit-top{display:flex;align-items:center;gap:var(--s-3);font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-bottom:var(--s-4)}
.kit-top a{color:inherit}
.kit-top .sep{opacity:.5}
.kit-top .r{margin-left:auto;display:flex;gap:var(--s-3)}
.kit-head{padding-bottom:var(--s-7);border-bottom:1px solid hsl(var(--border));margin-bottom:var(--s-8)}
.kit-d .kit-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--s-10);align-items:end}
.kit-h1{font-weight:var(--w-semibold);font-size:var(--text-display);line-height:var(--lh-display);letter-spacing:var(--tr-display)}
.kit-m .kit-h1{font-size:30px}
.kit-lede{font-size:var(--text-read);line-height:var(--lh-read);max-width:62ch}
.kit-lede+.kit-lede{margin-top:var(--s-2);color:hsl(var(--muted-foreground))}
.kit-m .kit-lede{font-size:var(--text-14);margin-top:var(--s-3)}

/* a section = one component (or one variant group) inside a family page */
.kit-sec{margin-bottom:var(--s-10)}
.kit-h2{font-weight:var(--w-semibold);font-size:var(--text-section);line-height:var(--lh-section);letter-spacing:var(--tr-section)}
.kit-sec>header{display:flex;align-items:baseline;gap:var(--s-3);margin:0 2px var(--s-3)}
.kit-sec>header p{font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.kit-sec>header .r{margin-left:auto;display:flex;gap:var(--s-2)}

/* specimen card: the white card a component sits on */
.spec{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-frame);overflow:hidden}
.spec-body{padding:var(--s-6)}
.kit-m .spec-body{padding:var(--s-4)}
.spec-body.flush{padding:0}
.spec-body.well{background:hsl(var(--muted)/.55)}
.spec-foot{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);align-items:center;padding:var(--s-3) var(--s-6);border-top:1px solid hsl(var(--border));
  font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.kit-m .spec-foot{padding:var(--s-3) var(--s-4)}
.spec-foot code{color:hsl(var(--foreground));font-size:11.5px}
.spec-h{font-weight:var(--w-semibold);font-size:var(--text-card);margin-bottom:var(--s-1)}
.spec-p{font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-bottom:var(--s-4)}
.spec-grid{display:grid;gap:var(--s-5)}
.kit-d .spec-grid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.kit-d .spec-grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.kit-d .spec-grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kit-m .spec-grid{grid-template-columns:minmax(0,1fr)}

/* states row: default / hover / focus / disabled / error / loading / empty, left to right */
.states{display:grid;gap:var(--s-4)}
.kit-d .states{grid-template-columns:repeat(var(--states-n,7),minmax(0,1fr))}
.kit-m .states{grid-template-columns:minmax(0,1fr)}
.state{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.state>.state-k{font:var(--w-medium) var(--text-micro)/1.2 var(--font-code);color:hsl(var(--muted-foreground));text-transform:lowercase}
.state>.state-v{min-height:var(--control-h);display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.kit-m .state{flex-direction:row;align-items:center;justify-content:space-between;padding:var(--s-2) 0;border-bottom:1px solid hsl(var(--border))}
.kit-m .state:last-child{border-bottom:0}
.kit-m .state>.state-k{width:72px;flex:none}
.kit-m .state>.state-v{flex:1;justify-content:flex-end}

/* forced states for specimens (so hover/focus show without a pointer) */
.is-hover.btn-primary{background:hsl(var(--primary-hover))}
.is-hover.btn-secondary{background:hsl(var(--muted));border-color:hsl(var(--secondary-border-hover))}
.is-hover.btn-ghost,.is-hover.btn-tertiary{background:hsl(var(--muted))}
.is-focus{outline:2px solid hsl(var(--ring));outline-offset:2px}
.field.is-focus,.input.is-focus{outline:0;border-color:hsl(var(--ring));box-shadow:var(--focus-ring)}

/* =================================== APP SHELL =================================== */
.frame{border-radius:var(--r-frame);overflow:clip;background:hsl(var(--background));position:relative;box-shadow:var(--e-frame)}
.app{display:grid;grid-template-columns:var(--sidebar-w) minmax(0,1fr);min-height:640px}
.sidebar{background:var(--sidebar-sheen);color:hsl(var(--sidebar-foreground));padding:14px 10px;display:flex;flex-direction:column;gap:var(--s-1);
  position:relative;box-shadow:var(--e-sidebar-edge)}
.sidebar::before{content:"";position:absolute;left:-40px;top:-60px;width:300px;height:260px;border-radius:50%;background:var(--sidebar-sheen-light);pointer-events:none}
.sidebar>*{position:relative}
.sb-brand{display:flex;align-items:center;gap:10px;padding:6px 8px 12px}
.brand-mark{width:30px;height:30px;border-radius:var(--r-control);display:grid;place-items:center;font:var(--w-bold) 12px/1 var(--font-voice);
  background:var(--brand-mark);color:var(--brand-mark-foreground);box-shadow:var(--e-brand-mark)}
.sb-brand .who{flex:1;min-width:0;line-height:1.25}
.sb-brand b{display:block;font-weight:var(--w-semibold);font-size:var(--text-card)}
.sb-brand small{font-size:var(--text-micro);opacity:.7}
.sb-group{font-size:var(--text-micro);font-weight:var(--w-medium);opacity:.6;padding:12px 10px 4px}
.sb-item{display:flex;align-items:center;gap:10px;height:36px;padding:0 10px;border-radius:var(--r-control);font-size:var(--text-card);font-weight:var(--w-medium);
  color:inherit;text-decoration:none;position:relative;transition:background-color var(--motion-hover),color var(--motion-hover)}
.sb-item svg{opacity:.8}
.sb-item:hover{background:hsl(var(--sidebar-foreground)/.06)}
.sb-item.on{background:var(--sidebar-item-on);color:hsl(var(--sidebar-accent-foreground));
  box-shadow:var(--e-sidebar-item-on)}
.sb-item.on::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:2px;border-radius:2px;background:hsl(var(--sidebar-primary));opacity:.8}
.sb-item.on svg{color:var(--sidebar-item-on-icon);opacity:1}
.sb-item em{margin-left:auto;font:normal var(--text-micro)/1 var(--font-ui);opacity:.6}
.sb-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 8px 2px;font-size:var(--text-small);border-top:1px solid hsl(var(--sidebar-foreground)/.12)}
.main{display:flex;flex-direction:column;min-width:0;position:relative;overflow:clip}
.topbar{height:var(--topbar-h);display:flex;align-items:center;gap:var(--s-3);padding:0 var(--s-5);border-bottom:1px solid hsl(var(--border));
  background:hsl(var(--background)/.86);backdrop-filter:blur(var(--blur-glass));position:relative;z-index:2}
.crumbs{display:flex;gap:var(--s-2);align-items:center;color:hsl(var(--muted-foreground));font:var(--text-card)/1 var(--font-voice)}
.crumbs b{color:hsl(var(--foreground));font-weight:var(--w-semibold)}
.top-r{margin-left:auto;display:flex;align-items:center;gap:10px}
.staging{font:var(--w-semibold) var(--text-10-5)/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:hsl(var(--warning));
  background:hsl(var(--warning)/.12);border:1px solid hsl(var(--warning)/.4);padding:5px 8px;border-radius:var(--r-control)}
.page{padding:22px var(--s-6) 26px}
.ph{display:flex;align-items:flex-end;gap:var(--s-4);margin-bottom:18px}
.page-title{font-weight:var(--title-w);font-size:var(--text-page);line-height:var(--lh-page);letter-spacing:var(--tr-page)}
.ph p{color:hsl(var(--muted-foreground));margin-top:var(--s-1)}
.ph-r{margin-left:auto;display:flex;gap:var(--s-2);align-items:center}

/* phone shell (the /m/ composition) */
.phone{background:hsl(var(--background));border:1px solid hsl(var(--border));border-radius:var(--r-frame);overflow:clip;position:relative}
.p-bar{display:flex;align-items:center;gap:10px;height:var(--pbar-h);padding:0 var(--s-3);border-bottom:1px solid hsl(var(--border));background:hsl(var(--background))}
.p-bar b{font:var(--w-semibold) 15px/1 var(--font-voice)}
.p-bar .r{margin-left:auto;display:flex;gap:6px;align-items:center}
.p-bar .icon-btn{width:var(--control-h-m);height:var(--control-h-m);border:0;background:transparent}
.p-head{display:flex;align-items:flex-end;gap:var(--s-3);padding:var(--s-4) var(--s-4) var(--s-3)}
.p-head .page-title{font-size:var(--text-24)}
.p-head p{color:hsl(var(--muted-foreground));font-size:12.5px;margin-top:2px}
.p-head .btn{margin-left:auto}
.p-sec{padding:var(--s-4);display:flex;flex-direction:column;gap:18px}
.tabbar{position:sticky;bottom:0;z-index:5;display:grid;grid-template-columns:repeat(4,1fr);background:hsl(var(--background)/.96);backdrop-filter:blur(var(--actbar-blur));
  border-top:1px solid hsl(var(--border));padding:6px 0 10px}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:46px;font:var(--text-10-5)/1 var(--font-voice);color:hsl(var(--muted-foreground));text-decoration:none}
.tabbar a.on{color:hsl(var(--primary))}
.kit-m .btn{height:var(--control-h-m)}
.kit-m .btn.sm{height:var(--control-h-m)}
.kit-m .btn.lg,.kit-m .p-btns .btn{height:var(--control-h-m-lg);font-size:var(--text-btn-lg)}
.kit-m .field,.kit-m .input{height:var(--control-h-m)}
.kit-m .icon-btn{width:var(--control-h-m);height:var(--control-h-m)}

/* =================================== SHARED PRIMITIVES =================================== */
/* buttons: primary (navy) · secondary (outlined white) · tertiary (text) · ghost · danger · danger-quiet */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);height:var(--control-h);padding:0 var(--s-4);border-radius:var(--r-control);
  font-size:var(--text-btn);font-weight:var(--w-semibold);letter-spacing:-.003em;white-space:nowrap;border:1px solid transparent;text-decoration:none;
  transition:background-color var(--motion-hover),border-color var(--motion-hover),color var(--motion-hover),box-shadow var(--motion-focus),transform var(--motion-press),filter var(--motion-hover)}
.btn:active{transform:translateY(var(--press-shift))}
.btn.sm{height:var(--control-h-sm);padding:0 var(--s-3);font-size:var(--text-btn-sm)}
.btn.lg{height:var(--control-h-m-lg);padding:0 var(--s-5);font-size:var(--text-btn-lg)}
.btn-primary{background:hsl(var(--primary));color:hsl(var(--primary-foreground));box-shadow:var(--e-btn)}
.btn-primary:hover{background:hsl(var(--primary-hover))}
.btn-secondary{background:hsl(var(--secondary));color:hsl(var(--secondary-foreground));border-color:hsl(var(--secondary-border));box-shadow:var(--e-btn-2)}
.btn-secondary:hover{background:hsl(var(--muted));border-color:hsl(var(--secondary-border-hover))}
.btn-tertiary{background:transparent;color:hsl(var(--foreground));padding:0 var(--s-3)}
.btn-tertiary:hover,.btn-ghost:hover{background:hsl(var(--muted))}
.btn-ghost{background:transparent;color:hsl(var(--muted-foreground))}
.btn-danger{background:hsl(var(--destructive));color:hsl(var(--destructive-foreground))}
.btn-danger:hover{filter:brightness(.92)}
.btn-danger-quiet{background:transparent;color:hsl(var(--destructive));border-color:hsl(var(--destructive)/.4)}
.btn-danger-quiet:hover{background:hsl(var(--destructive)/.07)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;pointer-events:none;box-shadow:none}
.btn[aria-busy=true]{pointer-events:none}
.spin{width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;animation:kit-spin var(--motion-spin) var(--ease-linear) infinite}
@keyframes kit-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:var(--motion-spin-reduced)}}
.icon-btn{width:36px;height:36px;display:inline-grid;place-items:center;border-radius:var(--r-control);border:1px solid hsl(var(--border));
  background:hsl(var(--secondary));color:hsl(var(--foreground));transition:background-color var(--motion-hover),border-color var(--motion-hover)}
.icon-btn:hover{background:hsl(var(--muted))}
.icon-btn.ghost{border-color:transparent;background:transparent;color:hsl(var(--muted-foreground))}
.icon-btn.sm{width:32px;height:32px}

/* page help trigger: the "?" icon, same spot on every page (top bar, right, before the avatar) */
.help-q{width:32px;height:32px;display:inline-grid;place-items:center;border-radius:50%;border:1px solid hsl(var(--border));background:hsl(var(--background));
  color:hsl(var(--muted-foreground));font:var(--w-semibold) 13px/1 var(--font-voice);transition:background-color var(--motion-hover),color var(--motion-hover)}
.help-q:hover,.help-q[aria-expanded=true]{background:hsl(var(--accent));color:hsl(var(--accent-foreground))}

/* status chips: square (4px), dot + label, soft fill */
.chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 var(--s-2);border-radius:var(--r-chip);font:var(--w-semibold) var(--text-micro)/1 var(--font-voice);white-space:nowrap;
  color:hsl(var(--neutral));background:hsl(var(--neutral)/var(--status-soft-alpha))}
.chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.chip.plain::before{display:none}
.chip.draft{color:hsl(var(--draft));background:hsl(var(--draft)/var(--status-soft-alpha))}
.chip.available,.chip.success{color:hsl(var(--available));background:hsl(var(--available)/var(--status-soft-alpha))}
.chip.retired{color:hsl(var(--retired));background:hsl(var(--retired)/var(--status-soft-alpha))}
.chip.info{color:hsl(var(--info));background:hsl(var(--info)/var(--status-soft-alpha))}
.chip.warning{color:hsl(var(--warning));background:hsl(var(--warning)/var(--status-soft-alpha))}
.chip.danger{color:hsl(var(--destructive));background:hsl(var(--destructive)/var(--status-soft-alpha))}
.chip.locked{color:hsl(var(--locked));background:hsl(var(--muted))}

/* basic field (inputs, select triggers); richer controls live in families/form-controls */
.lbl{display:block;font-size:var(--text-label);font-weight:var(--w-semibold);margin-bottom:7px}
.lbl small{font:var(--w-regular) var(--text-small) var(--font-ui);color:hsl(var(--muted-foreground));margin-left:6px}
.field,.input{height:var(--control-h);width:100%;border:1px solid hsl(var(--input));border-radius:var(--r-control);display:flex;align-items:center;gap:var(--s-2);
  padding:0 var(--s-3);background:hsl(var(--background));outline:none;transition:border-color var(--motion-hover),box-shadow var(--motion-focus)}
.field:focus-within,.input:focus{border-color:hsl(var(--ring));box-shadow:var(--focus-ring)}
.input::placeholder{color:hsl(var(--muted-foreground))}
.field .grow{flex:1;min-width:0}
.field.err,.input.err{border-color:hsl(var(--destructive))}
.field[aria-disabled=true],.input[disabled]{background:hsl(var(--muted));color:hsl(var(--muted-foreground));opacity:.8}
.help{font-size:var(--text-micro);color:hsl(var(--muted-foreground));margin-top:6px}
.help.err{color:hsl(var(--destructive))}
kbd{font:var(--w-medium) var(--text-11)/1 var(--font-code);padding:3px 5px;border:1px solid hsl(var(--border));border-radius:4px;background:hsl(var(--muted));color:hsl(var(--muted-foreground))}
.avatar{width:28px;height:28px;border-radius:var(--r-pill);display:inline-grid;place-items:center;background:hsl(var(--accent));color:hsl(var(--accent-foreground));
  font:var(--w-semibold) var(--text-11)/1 var(--font-voice);flex:none}
.thumb{width:30px;height:40px;border-radius:var(--r-media);flex:none;background:var(--studio);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none;background:hsl(var(--neutral))}
.dot.draft{background:hsl(var(--draft))}.dot.available{background:hsl(var(--available))}.dot.retired{background:hsl(var(--retired))}

/* shared motion hooks used by kit.js (open/close via the .open / .show class) */
.k-pop{opacity:0;transform:translateY(var(--pop-shift)) scale(.985);transform-origin:top center;visibility:hidden;pointer-events:none;
  transition:opacity var(--motion-pop-out),transform var(--motion-pop-out),visibility 0s linear var(--motion-handoff)}
.open>.k-pop{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition:opacity var(--motion-pop-in),transform var(--motion-pop-in),visibility 0s}
.k-scrim{position:absolute;inset:0;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity var(--motion-sheet-out);z-index:var(--z-scrim)}
.k-sheet{position:absolute;top:0;right:0;bottom:0;width:min(var(--sheet-w),92%);background:hsl(var(--popover));box-shadow:var(--e-sheet);z-index:var(--z-sheet);
  transform:translateX(104%);visibility:hidden;transition:transform var(--motion-sheet-out),visibility 0s linear var(--motion-handoff-sheet);display:flex;flex-direction:column}
.open>.k-scrim{opacity:1;pointer-events:auto;transition:opacity var(--motion-sheet-in)}
.open>.k-sheet{transform:none;visibility:visible;transition:transform var(--motion-sheet-in),visibility 0s}
.k-toast{opacity:0;transform:translateY(var(--toast-shift));pointer-events:none;transition:opacity var(--motion-toast-out),transform var(--motion-toast-out)}
.k-toast.show{opacity:1;transform:none;pointer-events:auto;transition:opacity var(--motion-toast-in),transform var(--motion-toast-in)}
.k-dialog{position:absolute;left:50%;top:50%;width:min(var(--dialog-w),92%);background:hsl(var(--popover));border-radius:var(--r-frame);box-shadow:var(--e-dialog);z-index:var(--z-sheet);overflow:hidden;
  opacity:0;transform:translate(-50%,-48%) scale(.98);visibility:hidden;transition:opacity var(--motion-pop-out),transform var(--motion-pop-out),visibility 0s linear var(--motion-handoff)}
.open>.k-dialog{opacity:1;transform:translate(-50%,-50%);visibility:visible;transition:opacity var(--motion-sheet-in),transform var(--motion-sheet-in),visibility 0s}
/* a stage is the positioned box a sheet/dialog/drawer demo lives in */
.k-stage{position:relative;overflow:hidden}

/* =====================================================================================
   ROUND 2 INTEGRATION (2026-10-11). Primitives promoted from the ten families so the kit is
   ONE system. Source family for each block is named; the full list is in KIT-CHANGELOG.md.
   ===================================================================================== */

/* ---------- kit chrome: phone section heads stack (form-controls, overlays, page-help, specimens, wizard-stepper, data-table) ---------- */
.kit-sec>header{flex-wrap:wrap}
.kit-m .kit-sec>header{flex-direction:column;align-items:flex-start;gap:var(--s-1)}

/* ---------- fields: hover, disabled trigger, phone text size (form-controls) ---------- */
.field,.input{cursor:text}
button.field,.field[data-k-trigger]{cursor:pointer;text-align:left}
.field:hover,.input:hover,.field.is-hover,.input.is-hover{border-color:hsl(var(--input-hover))}
.field.err:hover,.input.err:hover{border-color:hsl(var(--destructive))}
.field[aria-disabled=true]:hover,.input[disabled]:hover,.input[readonly]:hover{border-color:hsl(var(--input))}
button.field[disabled],.field[disabled]{background:hsl(var(--muted));color:hsl(var(--muted-foreground));opacity:.8;cursor:not-allowed;border-color:hsl(var(--input))}
.open>.field[data-k-trigger]{border-color:hsl(var(--ring));box-shadow:var(--focus-ring)}
.kit-m .field.auto{height:auto;min-height:var(--control-h-m)}
/* iOS zooms the page when a focused text field is under 16px */
.kit-m input:not([type=checkbox]):not([type=radio]):not([type=range]),.kit-m textarea,.kit-m select{font-size:var(--text-input-m)}

/* ---------- checkbox + radio: one input, no wrapper (form-controls; replaces .fc-box, .dt-cb, .ov-cb) ---------- */
.cb{appearance:none;-webkit-appearance:none;display:inline-block;flex:none;width:18px;height:18px;margin:0;vertical-align:middle;cursor:pointer;
  border:1.5px solid hsl(var(--input));border-radius:var(--r-chip);background:hsl(var(--background)) no-repeat center / 14px 14px;
  transition:background-color var(--motion-hover),border-color var(--motion-hover),box-shadow var(--motion-focus)}
input[type=radio].cb,.cb.rd{border-radius:50%}
.cb:hover,.cb.is-hover{border-color:hsl(var(--input-hover))}
.cb:checked,.cb[type=checkbox]:indeterminate{background-color:hsl(var(--primary));border-color:hsl(var(--primary))}
.cb[type=checkbox]:checked{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAF8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.cb[type=checkbox]:indeterminate{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAFAF8' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E")}
input[type=radio].cb:checked{background-color:hsl(var(--background));box-shadow:inset 0 0 0 4px hsl(var(--primary))}
.cb:focus-visible,.cb.is-focus{outline:0;box-shadow:var(--focus-ring)}
input[type=radio].cb:checked:focus-visible,input[type=radio].cb.is-focus:checked{box-shadow:inset 0 0 0 4px hsl(var(--primary)),var(--focus-ring)}
.cb.err{border-color:hsl(var(--destructive))}
.cb:disabled{background-color:hsl(var(--muted));border-color:hsl(var(--border));cursor:not-allowed}
.cb[type=checkbox]:disabled:checked{background-color:hsl(var(--muted-foreground)/.55);border-color:transparent}
input[type=radio].cb:disabled:checked{box-shadow:inset 0 0 0 4px hsl(var(--muted-foreground)/.55)}
.kit-m .cb{width:20px;height:20px;background-size:16px 16px}

/* ---------- switch (form-controls; replaces .wz-sw). Named .switch because .sw is a chart swatch ---------- */
.switch{position:relative;display:inline-block;width:36px;height:20px;border-radius:var(--r-pill);background:hsl(var(--input));flex:none;cursor:pointer;
  transition:background-color var(--motion-hover),box-shadow var(--motion-focus)}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:hsl(var(--background));box-shadow:var(--e-btn-2);transition:transform var(--motion-pop-in)}
.switch[aria-checked=true]{background:hsl(var(--primary))}
.switch[aria-checked=true]::after{transform:translateX(16px)}
.switch:hover,.switch.is-hover{background:hsl(var(--input-hover))}
.switch[aria-checked=true]:hover,.switch[aria-checked=true].is-hover{background:hsl(var(--primary-hover))}
.switch.is-focus,.switch:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}
.switch[disabled],.switch[aria-disabled=true]{opacity:.45;cursor:not-allowed;pointer-events:none}
.switch.lock{background:hsl(var(--primary)/.45);cursor:default;opacity:1}
.switch.busy::after{background:hsl(var(--background)/.85)}
.kit-m .switch{width:44px;height:26px}
.kit-m .switch::after{width:22px;height:22px}
.kit-m .switch[aria-checked=true]::after{transform:translateX(18px)}

/* ---------- segmented control (form-controls; replaces .dt-seg, .cg-seg, .dd-seg, .ov-seg) ---------- */
.seg{display:inline-flex;padding:3px;gap:2px;background:hsl(var(--muted));border-radius:var(--r-card);border:1px solid hsl(var(--border))}
.seg>button,.seg-i{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 var(--s-3);border-radius:var(--r-control);
  font-family:var(--font-voice);font-stretch:var(--font-stretch-title);font-size:var(--text-body);font-weight:var(--w-medium);color:hsl(var(--muted-foreground));white-space:nowrap;
  transition:background-color var(--motion-hover),color var(--motion-hover),box-shadow var(--motion-hover)}
.seg>button:hover,.seg-i:hover,.seg-i.is-hover{color:hsl(var(--foreground))}
.seg>[aria-checked=true],.seg>[aria-pressed=true],.seg>.on{background:hsl(var(--background));color:hsl(var(--foreground));box-shadow:var(--e-btn-2),0 0 0 1px hsl(var(--border))}
.seg-i.is-focus,.seg>button:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}
.seg.sm>button,.seg.sm .seg-i{height:26px;font-size:var(--text-small);padding:0 10px}
.seg.ic>button{padding:0 var(--s-2)}
.seg.full{display:flex}
.seg.full>button,.seg.full .seg-i{flex:1}
.seg[aria-disabled=true]{opacity:.5;pointer-events:none}
.seg.err{border-color:hsl(var(--destructive))}
.seg.ro{background:hsl(var(--muted)/.55)}
.seg.ro>button{cursor:default}
.seg .dot{width:6px;height:6px}
.kit-m .seg>button,.kit-m .seg-i{height:38px}

/* ---------- popover surface, menu, option (overlays + form-controls; replaces .cg-menu, .dt-pop, .ov-menu, .sp-menu, .sh-pop surfaces) ---------- */
.pop{background:hsl(var(--popover));color:hsl(var(--popover-foreground));border:1px solid hsl(var(--border));border-radius:var(--r-card);box-shadow:var(--e-pop);
  padding:var(--s-4);text-align:left}
.menu{background:hsl(var(--popover));color:hsl(var(--popover-foreground));border:1px solid hsl(var(--border));border-radius:var(--r-card);box-shadow:var(--e-pop);
  padding:var(--s-1);min-width:208px;text-align:left}
.pop.static,.menu.static{position:relative;inset:auto;opacity:1;transform:none;visibility:visible;pointer-events:auto}
.k-anchor{position:relative;display:inline-flex}
.k-anchor>.k-pop{position:absolute;top:calc(100% + var(--s-1));right:0;z-index:var(--z-pop);transform-origin:top right}
.k-anchor.l>.k-pop{right:auto;left:0;transform-origin:top left}
.k-anchor.up>.k-pop{top:auto;bottom:calc(100% + var(--s-1));transform-origin:bottom right}
.k-anchor.fill{display:flex}
.k-anchor.fill>.k-pop{left:0;right:0}
.mlabel{padding:var(--s-2) var(--s-2) var(--s-1);font-size:var(--text-micro);font-weight:var(--w-medium);color:hsl(var(--muted-foreground))}
.msep{height:1px;background:hsl(var(--border));margin:var(--s-1) calc(var(--s-1) * -1)}
.mi{display:flex;align-items:center;gap:10px;width:100%;height:var(--control-h-sm);padding:0 var(--s-2);border-radius:var(--r-control);text-align:left;white-space:nowrap;
  font:var(--w-medium) var(--text-body)/1 var(--font-voice);font-stretch:var(--font-stretch-title);color:hsl(var(--foreground));text-decoration:none;cursor:pointer;
  transition:background-color var(--motion-hover),color var(--motion-hover)}
.mi svg{color:hsl(var(--muted-foreground));flex:none}
.mi .grow{flex:1;min-width:0}
.mi kbd,.mi .r,.mi>.chip:last-child{margin-left:auto}
.mi .r{color:hsl(var(--muted-foreground));font:var(--w-regular) var(--text-small)/1 var(--font-ui)}
.mi:hover,.mi.is-hover{background:hsl(var(--muted))}
.mi:focus-visible,.mi.is-focus{outline:0;background:hsl(var(--accent));box-shadow:inset 0 0 0 1px hsl(var(--ring)/.55)}
.mi.on,.mi[aria-selected=true],.mi[aria-checked=true]{background:hsl(var(--accent));color:hsl(var(--accent-foreground))}
.mi .tick{margin-left:auto;visibility:hidden;color:hsl(var(--foreground))}
.mi.on .tick,.mi[aria-selected=true] .tick,.mi[aria-checked=true] .tick{visibility:visible}
.mi[aria-disabled=true],.mi:disabled{color:hsl(var(--muted-foreground));pointer-events:none;cursor:default}
.mi[aria-disabled=true] svg{opacity:.6}
.mi[aria-disabled=true] .why{margin-left:auto;font:var(--w-regular) var(--text-micro)/1 var(--font-ui)}
.mi.danger,.mi.danger svg{color:hsl(var(--destructive))}
.mi.danger:hover,.mi.danger.is-hover{background:hsl(var(--destructive)/.08)}
.kit-m .mi{height:var(--control-h-m);font-size:var(--text-read)}

/* ---------- tooltip (overlays; replaces .ph-tip) ---------- */
.tt{position:relative;display:inline-flex}
.tip{position:absolute;bottom:calc(100% + var(--s-2));left:50%;z-index:var(--z-tip);display:inline-flex;align-items:center;gap:var(--s-2);padding:6px var(--s-2);
  border-radius:var(--r-control);background:hsl(var(--primary));color:hsl(var(--primary-foreground));font:var(--w-medium) var(--text-small)/1.25 var(--font-ui);
  white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,2px);visibility:hidden;
  transition:opacity var(--motion-pop-out),transform var(--motion-pop-out),visibility 0s linear var(--motion-handoff)}
.tip.wrap{white-space:normal;width:232px;line-height:1.4}
.tip kbd{background:transparent;border-color:hsl(var(--primary-foreground)/.3);color:hsl(var(--primary-foreground))}
.tip::after{content:"";position:absolute;top:100%;left:50%;margin-left:-4px;border:4px solid transparent;border-top-color:hsl(var(--primary))}
.tt:hover>.tip,.tt:focus-within>.tip,.tip.show{opacity:1;transform:translate(-50%,0);visibility:visible;
  transition:opacity var(--motion-pop-in),transform var(--motion-pop-in),visibility 0s;transition-delay:var(--tooltip-delay)}
.tt:focus-within>.tip,.tip.show{transition-delay:0s}
.tt.below>.tip{bottom:auto;top:calc(100% + var(--s-2))}
.tt.below>.tip::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:hsl(var(--primary))}
.tt.end>.tip{left:auto;right:-6px;transform:translate(0,2px)}
.tt.end:hover>.tip,.tt.end:focus-within>.tip,.tt.end>.tip.show{transform:none}
.tt.end>.tip::after{left:auto;right:16px;margin-left:0}
[aria-expanded=true]+.tip,[aria-expanded=true]~.tip{display:none}

/* ---------- phone bottom sheet + full-screen sheet (raised by 6 families; form-controls / overlays version) ---------- */
.k-sheet.k-bottom{top:auto;left:0;right:0;width:100%;max-height:88%;border-radius:var(--r-frame) var(--r-frame) 0 0;box-shadow:var(--e-phone-sheet);transform:translateY(104%)}
.k-sheet.k-full{top:0;max-height:none;height:100%;border-radius:0}
.open>.k-sheet.k-bottom{transform:none}
.k-sheet.static{position:relative;inset:auto;transform:none;visibility:visible;max-height:none;width:100%}
.k-grab{width:36px;height:4px;border-radius:var(--r-pill);background:hsl(var(--border));box-shadow:inset 0 0 0 1px hsl(var(--input)/.35);margin:var(--s-2) auto 2px;flex:none}
/* help drawer below the top bar, so the "?" stays visible and works as the toggle (page-help) */
.k-stage.below-bar>.k-scrim,.k-stage.below-bar>.k-sheet:not(.k-bottom){top:var(--topbar-h)}
/* a guard dialog above an open sheet (overlays) */
.k-guard{position:absolute;inset:0;z-index:var(--z-guard-scrim);pointer-events:none}
.k-guard.open{pointer-events:auto}
.k-guard>.k-scrim{z-index:var(--z-guard-scrim)}
.k-guard>.k-dialog{z-index:var(--z-guard)}
.k-sheet.md{width:min(var(--sheet-w-md),92%)}
.k-sheet.lg{width:min(var(--sheet-w-lg),94%)}

/* ---------- environment badges (status-feedback is the source: production + local in slate, staging in ochre) ---------- */
.env-prod,.env-local{font:var(--w-semibold) var(--text-10-5)/1 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:var(--r-control);white-space:nowrap;
  color:hsl(var(--neutral));background:hsl(var(--neutral)/.1);border:1px solid hsl(var(--neutral)/.3)}
.staging{white-space:nowrap}

/* ---------- chips + dots (status-feedback) ---------- */
.chip.lg{height:var(--chip-h-lg);padding:0 10px;font-size:var(--text-btn-sm);gap:7px}
.chip.lg::before{width:7px;height:7px}
.chip.ico::before{display:none}
.chip.ico svg{width:12px;height:12px}
.chip.lg.ico svg{width:13px;height:13px}
.chip.mono{font-family:var(--font-code);font-weight:var(--w-medium);letter-spacing:0}
.chip .cnt{font:var(--w-semibold) var(--text-11)/1 var(--font-ui);font-variant-numeric:tabular-nums;min-width:18px;height:16px;padding:0 5px;display:inline-grid;place-items:center;
  border-radius:var(--r-chip);background:hsl(var(--background)/.85);color:inherit}
.dot.success{background:hsl(var(--success))}.dot.warning{background:hsl(var(--warning))}.dot.danger{background:hsl(var(--destructive))}.dot.info{background:hsl(var(--info))}

/* ---------- toast surface (status-feedback = Sonner; board 3 anatomy; replaces .ov-toast / .sp-toast surfaces) ---------- */
.toast{display:flex;gap:10px;align-items:flex-start;padding:11px 12px;border-radius:var(--r-control);background:hsl(var(--popover));color:hsl(var(--popover-foreground));
  border:1px solid hsl(var(--border));box-shadow:var(--e-toast);width:100%;position:relative}
.toast>svg{flex:none;margin-top:1px;color:hsl(var(--success))}
.toast.error>svg{color:hsl(var(--destructive))}
.toast.warning>svg{color:hsl(var(--warning))}
.toast.info>svg{color:hsl(var(--info))}
.toast.undo>svg{color:hsl(var(--foreground))}
.toast.progress>svg,.toast .spin{color:hsl(var(--info))}
.toast .spin{margin-top:2px;flex:none}
.toast .b{flex:1;min-width:0}
.toast b{display:block;font-size:13px;font-weight:var(--w-semibold);line-height:1.35}
.toast small{display:block;font-size:var(--text-micro);line-height:1.4;color:hsl(var(--muted-foreground));margin-top:1px}
.toast .act{flex:none;align-self:center;display:flex;gap:2px;margin:-4px -4px -4px 0}
.toast .act .btn{height:30px;padding:0 var(--s-2);font-size:12.5px}
.kit-m .toast .act .btn{height:var(--control-h-m);padding:0 var(--s-3);font-size:13.5px}
.toast .act .icon-btn{width:30px;height:30px}
.kit-m .toast .act .icon-btn{width:var(--control-h-m);height:var(--control-h-m)}

/* ---------- skeleton (data-table pulse, token-driven; off under reduced motion) ---------- */
.skel{display:block;height:10px;border-radius:var(--r-chip);background:hsl(var(--foreground)/.075);animation:kit-skel var(--motion-skeleton)}
.skel.sq{width:28px;height:28px;border-radius:var(--r-media)}
@keyframes kit-skel{from{opacity:.55}to{opacity:1}}

/* ---------- card lift (cards-gallery + data-display kanban) ---------- */
.lift{transition:transform var(--motion-hover),box-shadow var(--motion-hover),border-color var(--motion-hover)}
.lift:hover,.lift.is-hover{transform:translateY(var(--lift-shift));box-shadow:var(--e-card-hover)}

/* ---------- KPI figure (data-display) ---------- */
.kpi-v{font:var(--w-semibold) var(--text-kpi)/1.1 var(--font-voice);font-stretch:var(--font-stretch-title);letter-spacing:var(--tr-page);font-variant-numeric:tabular-nums}

/* ---------- "?" help trigger states + 44px hit area (page-help) ---------- */
.help-q{position:relative;transition:background-color var(--motion-hover),color var(--motion-hover),border-color var(--motion-hover),transform var(--motion-press)}
.help-q::after{content:"";position:absolute;inset:-6px;border-radius:50%}
.help-q:active{transform:translateY(var(--press-shift))}
.help-q.is-hover{background:hsl(var(--accent));color:hsl(var(--accent-foreground))}
.help-q[aria-expanded=true]{border-color:hsl(var(--ring)/.55);color:hsl(var(--primary))}
.kit-m .help-q{width:36px;height:36px}
.kit-m .help-q::after{inset:-4px}

/* =====================================================================================
   KIT v2 · PAGE PRIMITIVES (Round 4 promotion, 2026-10-11; see KIT-CHANGELOG.md § v2)
   Lifted from the local stand-ins the 64 Round 4 page folders each rebuilt (gs-/pg-/cx-/od-/
   hq-/bp-/st-/su-/wb- prefixes). Same values as those pages, so adopting one is pixel-neutral.
   Specimen: families/page-primitives/ (desktop) and families/page-primitives/m/ (phone).
   ===================================================================================== */

/* ---------- v2.1 sticky-safe shell: .frame / .main / .phone clip instead of hidden (see APP SHELL) ---------- */

/* ---------- v2.2 full-viewport overlay layer: sheets, dialogs, guards and help on a real page ---------- */
.k-layer{position:fixed;inset:0;z-index:var(--z-scrim);pointer-events:none;overflow:hidden}
.k-layer>.k-sheet,.k-layer>.k-dialog,.k-layer.open>.k-scrim,.k-layer>.k-guard.open{pointer-events:auto}
.k-layer>.k-guard{pointer-events:none}
.k-layer>.k-guard.open>.k-scrim,.k-layer>.k-guard>.k-dialog{pointer-events:auto}
.kit-d .k-layer.below-bar{left:var(--sidebar-w)}
.kit-d .k-layer.below-bar>.k-sheet:not(.k-bottom),.kit-d .k-layer.below-bar>.k-scrim{top:var(--topbar-h)}
.k-layer>.k-sheet{display:flex;flex-direction:column}
.k-sheet-b{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}

/* ---------- v2.3 tab strip: page / section navigation (not .seg, which is a control) ---------- */
.tabs{display:flex;gap:var(--s-5);border-bottom:1px solid hsl(var(--border))}
.tabs .tab{position:relative;display:inline-flex;align-items:center;gap:var(--s-2);height:var(--tab-h);padding:0;border:0;background:none;cursor:pointer;
  font:var(--w-medium) var(--text-body)/1 var(--font-voice);color:hsl(var(--muted-foreground));text-decoration:none;white-space:nowrap;transition:color var(--motion-hover)}
.tabs .tab:hover{color:hsl(var(--foreground))}
.tabs .tab.on,.tabs .tab[aria-selected=true],.tabs .tab[aria-current=page]{color:hsl(var(--foreground));font-weight:var(--w-semibold)}
.tabs .tab.on::after,.tabs .tab[aria-selected=true]::after,.tabs .tab[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:var(--r-pill);background:hsl(var(--primary))}
.tabs .tab:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px;border-radius:var(--r-chip)}
.tabs .tab em{font:normal var(--text-micro)/1 var(--font-ui);color:hsl(var(--muted-foreground))}
.kit-m .tabs{gap:var(--s-4);overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--s-4) * -1);padding:0 var(--s-4)}
.kit-m .tabs::-webkit-scrollbar{display:none}
.kit-m .tabs .tab{height:var(--tab-h-m);flex:none}
[role=tabpanel][hidden]{display:none}

/* ---------- v2.4 phone action bar: the one primary in thumb reach, above the tab bar; swaps to a selection bar ---------- */
.k-actbar{position:sticky;bottom:var(--tabbar-h);z-index:calc(var(--z-sticky) * 2);display:flex;gap:var(--s-2);align-items:center;
  padding:var(--s-3) var(--s-4);background:hsl(var(--background)/.96);backdrop-filter:blur(var(--actbar-blur));border-top:1px solid hsl(var(--border))}
.k-actbar.no-tabbar{bottom:0}
.k-actbar .btn{flex:1;height:var(--control-h-m-lg);font-size:var(--text-btn-lg)}
.k-actbar .k-selmsg{display:none;flex:1;font:var(--w-semibold) var(--text-card)/1.2 var(--font-voice);font-variant-numeric:tabular-nums}
.k-actbar.sel .k-selmsg{display:block}
.k-actbar.sel .btn{flex:none}
.k-actbar [data-k-when=sel]{display:none}
.k-actbar.sel [data-k-when=sel]{display:inline-flex}
.k-actbar.sel [data-k-when=idle]{display:none}

/* ---------- v2.5 sticky save bar: a whole-page form keeps Save in view (desktop card / phone glass) ---------- */
.k-savebar{position:sticky;bottom:0;z-index:calc(var(--z-sticky) * 2);display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-6);
  padding:var(--s-3) var(--s-4);background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-card);box-shadow:var(--e-pop)}
.k-savebar .r{margin-left:auto;display:flex;gap:var(--s-2)}
.k-savebar .k-saved,.k-savebar .k-dirty,.k-savebar .k-err{display:inline-flex;align-items:center;gap:var(--s-2);font-size:var(--text-small)}
.k-savebar .k-saved{color:hsl(var(--muted-foreground))}
.k-savebar .k-dirty{color:hsl(var(--foreground));font-weight:var(--w-medium)}
.k-savebar .k-err{color:hsl(var(--destructive))}
.k-savebar .k-dirty,.k-savebar .k-err,.k-savebar.is-dirty .k-saved,.k-savebar.is-error .k-saved,.k-savebar.is-error .k-dirty{display:none}
.k-savebar.is-dirty .k-dirty,.k-savebar.is-error .k-err{display:inline-flex}
.kit-m .k-savebar{bottom:var(--tabbar-h);flex-wrap:wrap;margin:var(--s-6) calc(var(--s-4) * -1) 0;padding:var(--s-3) var(--s-4);border-width:1px 0 0;border-radius:0;box-shadow:none;
  background:hsl(var(--background)/.96);backdrop-filter:blur(var(--actbar-blur))}
.kit-m .k-savebar .r{width:100%;margin-left:0}
.kit-m .k-savebar .r .btn{flex:1;height:var(--control-h-m-lg);font-size:var(--text-btn-lg)}

/* ---------- v2.6 record header: avatar + name + status chips + meta + ranked actions (detail pages) ---------- */
.k-rec{display:flex;align-items:flex-start;gap:var(--s-4);margin-bottom:var(--s-5)}
.k-rec>.avatar{flex:none;width:44px;height:44px;font-size:var(--text-card)}
.k-rec-b{flex:1;min-width:0}
.k-rec-t{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-2)}
.k-rec-t .page-title{margin-right:var(--s-1)}
.k-rec-m{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-4);margin-top:var(--s-1);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.k-rec-m>span{display:inline-flex;align-items:center;gap:6px}
.k-rec-a{margin-left:auto;display:flex;gap:var(--s-2);align-items:center;flex:none}
.kit-m .k-rec{flex-wrap:wrap;gap:var(--s-3)}
.kit-m .k-rec>.avatar{width:40px;height:40px}
.kit-m .k-rec-a{width:100%;margin-left:0}
.kit-m .k-rec-a .btn{flex:1}

/* ---------- v2.7 key/value aside: long ids wrap, labels hold a column ---------- */
.k-kv{display:flex;flex-direction:column;margin:0}
.k-kv>div{display:grid;grid-template-columns:var(--kv-label) minmax(0,1fr);gap:var(--s-3);padding:var(--s-2) 0;border-bottom:1px solid hsl(var(--border));font-size:var(--text-body)}
.k-kv>div:last-child{border-bottom:0}
.k-kv dt{color:hsl(var(--muted-foreground))}
.k-kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.k-kv dd.mono,.k-kv .mono{font-family:var(--font-code);font-size:var(--text-small)}
.kit-m .k-kv>div{grid-template-columns:var(--kv-label-m) minmax(0,1fr)}

/* ---------- v2.8 phone list row without a thumbnail (campaigns, rules, tickets, releases), optional trailing slot ---------- */
.k-list{margin:0 calc(var(--s-4) * -1);border-top:1px solid hsl(var(--border))}
.k-li{display:flex;gap:var(--s-3);align-items:flex-start;width:100%;min-height:var(--li-min-h);padding:var(--s-3) var(--s-4);border:0;border-bottom:1px solid hsl(var(--border));
  background:transparent;color:inherit;text-align:left;text-decoration:none;font:inherit;cursor:pointer;transition:background-color var(--motion-hover)}
.k-li:active,.k-li.is-hover{background:hsl(var(--muted))}
.k-li:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:-2px}
.k-li .t{flex:1;min-width:0}
.k-li b{display:block;font:var(--w-semibold) 15px/1.3 var(--font-voice);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-li .m{display:block;font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.k-li .s{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-2);flex-wrap:wrap}
.k-li .r{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:var(--s-1);font-size:var(--text-small);color:hsl(var(--muted-foreground));font-variant-numeric:tabular-nums}
.k-li.is-sel{background:hsl(var(--accent))}

/* ---------- v2.9 status chips the Round 4 pages needed ---------- */
.chip.ended{color:hsl(var(--retired));background:hsl(var(--retired)/var(--status-soft-alpha))}   /* campaign that ran its course: neutral, not red */
.chip.unmapped{color:hsl(var(--muted-foreground));background:hsl(var(--not-wired)/.05);box-shadow:inset 0 0 0 1px hsl(var(--not-wired)/.55)}
.chip.unmapped::before{background:transparent;box-shadow:inset 0 0 0 1px hsl(var(--not-wired))}
.k-unmapped{border:1px dashed hsl(var(--not-wired)/.55);background:hsl(var(--not-wired)/.05);border-radius:var(--r-control);padding:var(--s-3);font-size:var(--text-small);color:hsl(var(--muted-foreground))}
.k-unmapped b{display:block;color:hsl(var(--foreground));font-weight:var(--w-medium);margin-bottom:2px}
.dot.neutral{background:hsl(var(--neutral))}

/* ---------- v2.10 link-colour reset, scoped: a page's `.x a{color:inherit}` must not strip a filled link button ---------- */
a.btn{text-decoration:none}
a.btn.btn-primary,a.btn.btn-primary:hover{color:hsl(var(--primary-foreground))}
a.btn.btn-danger,a.btn.btn-danger:hover{color:hsl(var(--destructive-foreground))}


/* ===== PART B · F1 LAYER (brand-006) ===== */
/* =====================================================================================
   F1 LAYER · brand-006 RJ Laravel Admin · kit phase 1 (2026-10-18)
   Everything below is new for the Formula-1 admin and is what the flagship boards draw
   (phase-2/archetypes, phase-3/flagships/orders). Prefix .lv- for shell and composites;
   the domain atoms keep the flagship names (.sc .pp .rpill .nx .urg .bdg .verdict .ex).
   Every size reads a density token, so [data-density] swaps compact <-> comfortable with no restyle.
   No width/height media queries: desktop (.kit-d) and phone (.kit-m) are dedicated compositions.
   ===================================================================================== */

/* ---------- 0 · type at density, CJK, utilities ---------- */
.lv, .lv-app, .lv-phone { font-size: var(--text-body); line-height: var(--lh-body); font-variant-numeric: tabular-nums; }
[lang="zh-Hans"] { font-family: var(--font-ui); }
[lang="zh-Hans"] .title, [lang="zh-Hans"] .btn, [lang="zh-Hans"] .tab { letter-spacing: 0; }
.btn { padding: 0 var(--btn-px); }
.btn.sm { padding: 0 calc(var(--btn-px) - 3px); }
.kit-m .btn { padding: 0 var(--s-4); }
.btn svg { width: var(--icon-14); height: var(--icon-14); }
.ex { text-decoration: underline dotted hsl(var(--muted-foreground) / .5); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.lv-muted { color: hsl(var(--muted-foreground)); }
.lv-small { font-size: var(--text-small); }
.lv-mono { font-family: var(--font-code); font-size: var(--text-code); }
.lv-ell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-wrap { overflow-wrap: anywhere; }
.lv-row { display: flex; align-items: center; gap: var(--s-2); min-width: 0; flex-wrap: wrap; }
.lv-col { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.lv-sp { margin-left: auto; }
.lv-dash { color: hsl(var(--muted-foreground) / .7); }
.ico { width: var(--icon-16); height: var(--icon-16); stroke-width: var(--icon-stroke); }

/* annotation tags (never product UI): proposal · needs backend · API only */
.tag-prop, .tag-nb, .tag-api, .tag-ui { display: inline-flex; align-items: center; font: var(--w-semibold) var(--text-10)/15px var(--font-ui); padding: 0 4px; border-radius: var(--r-chip); white-space: nowrap; font-style: normal; }
.tag-prop { color: var(--tag-proposal); border: 1px dashed color-mix(in srgb, var(--tag-proposal) 55%, transparent); }
.tag-nb { color: hsl(var(--warning)); border: 1px dashed hsl(var(--warning) / .6); }
.tag-api { color: hsl(var(--info)); border: 1px solid hsl(var(--info) / .35); }
.tag-ui { color: hsl(var(--neutral)); border: 1px solid hsl(var(--border)); }

/* ---------- 1 · domain atoms (flagship) ---------- */
/* real status chip: the live colour as dot + tint, text darkened for contrast */
.sc { --tone: #575F72; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font: var(--w-medium) var(--text-small)/20px var(--font-ui); padding: 0 8px; border-radius: var(--r-chip); white-space: nowrap;
  color: color-mix(in srgb, var(--tone) 62%, #0E1729); background: color-mix(in srgb, var(--tone) 13%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 22%, transparent); }
.sc::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--tone); flex: none; }
.sc > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sc.lg { font-size: var(--text-body); line-height: 24px; padding: 0 10px; }
.sc.s-draft { --tone: var(--os-draft); color: #3A3F4A; } .sc.s-confirmed { --tone: var(--os-confirmed); } .sc.s-dtc_awaiting_fit { --tone: var(--os-dtc_awaiting_fit); }
.sc.s-paid { --tone: var(--os-paid); } .sc.s-build { --tone: var(--os-build); } .sc.s-manufacturing { --tone: var(--os-manufacturing); }
.sc.s-outbound { --tone: var(--os-outbound); color: #5C4A00; } .sc.s-completed { --tone: var(--os-completed); } .sc.s-delivered { --tone: var(--os-delivered); }
.sc.s-on-hold { --tone: var(--os-on-hold); } .sc.s-voided { --tone: var(--os-voided); }
.sc.t-open { --tone: var(--tk-open); } .sc.t-prr { --tone: var(--tk-prr); color: #6B4006; } .sc.t-psr { --tone: var(--tk-psr); } .sc.t-resolved { --tone: var(--tk-resolved); }
.sc.t-closed { --tone: var(--tk-closed); } .sc.t-reopen { --tone: var(--tk-reopen); }
.sc.k-ok { --tone: hsl(var(--success)); } .sc.k-warn { --tone: hsl(var(--warning)); } .sc.k-bad { --tone: hsl(var(--destructive)); } .sc.k-info { --tone: var(--steel); } .sc.k-neutral { --tone: hsl(var(--neutral)); }
/* piece pill: label code coloured by that piece's own phase */
.pp { --ph: #575F72; display: inline-flex; align-items: center; height: 19px; padding: 0 6px 0 8px; border-radius: 4px; font: var(--w-medium) var(--text-11)/1 var(--font-code); color: #0E1729;
  background: color-mix(in srgb, var(--ph) 16%, #fff); box-shadow: inset 3px 0 0 var(--ph), inset 0 0 0 1px color-mix(in srgb, var(--ph) 30%, transparent); margin-right: 3px; }
.pp.p-rff { --ph: var(--ph-rff); } .pp.p-ob { --ph: var(--ph-ob); } .pp.p-fp { --ph: var(--ph-fp); } .pp.p-as { --ph: var(--ph-as); } .pp.p-ip { --ph: var(--ph-ip); }
.pp.p-out { --ph: var(--ph-out); } .pp.p-done { --ph: var(--ph-done); } .pp.p-dlv { --ph: var(--ph-dlv); } .pp.p-hold { --ph: var(--ph-hold); }
.rpill { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; font: var(--w-medium) var(--text-micro)/20px var(--font-ui);
  padding: 0 8px; border-radius: var(--r-pill); background: var(--retailer-pill); color: var(--retailer-pill-fg); }
.urg { display: inline-flex; align-items: center; gap: 3px; font: var(--w-semibold) var(--text-10-5)/18px var(--font-title); padding: 0 6px; border-radius: var(--r-chip); color: hsl(var(--destructive)); background: hsl(var(--destructive) / .1); white-space: nowrap; }
.bdg { display: inline-flex; align-items: center; font: var(--w-bold) var(--text-10)/16px var(--font-title); padding: 0 4px; border-radius: 3px; margin-left: 5px; vertical-align: 1px; white-space: nowrap; }
.bdg.rt { background: var(--selected-row); color: var(--steel); }
.bdg.ps { background: hsl(var(--warning) / .12); color: hsl(var(--warning)); font-weight: var(--w-semibold); padding: 0 5px; }
.nx { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--r-control); border: 1px solid hsl(var(--secondary-border)); background: hsl(var(--background) / 0) ; background-color: #fff;
  font: var(--w-semibold) var(--text-micro)/1 var(--font-title); color: hsl(var(--primary)); white-space: nowrap; }
.nx.dk { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
.nx.rd { color: #930808; border-color: color-mix(in srgb, #930808 35%, transparent); }
.oid { font: var(--w-medium) var(--text-body)/1 var(--font-code); color: hsl(var(--foreground)); }
.lv-copy { display: inline-flex; align-items: center; gap: 4px; }
.lv-copy .ico { width: 12px; height: 12px; color: hsl(var(--muted-foreground)); }
.lv-av { width: 24px; height: 24px; border-radius: var(--r-pill); display: inline-grid; place-items: center; flex: none; background: #2A3553; color: #E6EAF3; font: var(--w-semibold) var(--text-10)/1 var(--font-title); }
.lv-av.lt { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }

/* ---------- 2 · surfaces ---------- */
.lv-card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--r-card); box-shadow: var(--e-1); min-width: 0; overflow: clip; }
.lv-card-h { display: flex; align-items: center; gap: 10px; min-height: calc(var(--row) + 10px); padding: 0 14px; border-bottom: 1px solid hsl(var(--border)); }
.lv-card-h h3 { font: var(--w-semibold) var(--text-card)/1.25 var(--font-title); display: flex; align-items: center; gap: 6px; min-width: 0; }
.lv-card-h .meta { margin-left: auto; font-size: var(--text-small); color: hsl(var(--muted-foreground)); white-space: nowrap; }
.lv-card-b { padding: 12px 14px; }
.lv-ground { background: hsl(var(--background)); padding: var(--page-pad); }
.lv-ground.tight { padding: 12px; }
.lv-ph { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 12px; }
.lv-ph h1 { font: var(--w-semibold) var(--text-page)/1.15 var(--font-title); letter-spacing: -.015em; }
.lv-ph .cnt { font-size: var(--text-small); color: hsl(var(--muted-foreground)); margin-bottom: 2px; }
.lv-ph .act { margin-left: auto; display: flex; gap: 8px; }
.lv-kv { display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr); }
.lv-kv > * { padding: 7px 14px; border-bottom: 1px solid hsl(var(--border)); min-width: 0; }
.lv-kv > span { color: hsl(var(--muted-foreground)); font-size: var(--text-small); padding-right: 0; }
.lv-kv > b { font-weight: var(--w-medium); text-align: right; overflow-wrap: anywhere; }
.lv-kv > *:nth-last-child(-n+2) { border-bottom: 0; }

/* ---------- 3 · tabs (status / record), toolbar, filter chips, search ---------- */
.lv-tabs { display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid hsl(var(--border)); min-width: 0; overflow: hidden; }
.lv-tab { display: inline-flex; align-items: center; gap: 7px; height: var(--tab-h); padding: 0 10px; font: var(--w-medium) var(--text-nav)/1 var(--font-title); color: hsl(var(--muted-foreground));
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; flex: none; }
.lv-tab.on { color: hsl(var(--foreground)); font-weight: var(--w-semibold); border-bottom-color: hsl(var(--primary)); }
.lv-tab .tdot { width: 7px; height: 7px; border-radius: 50%; background: var(--tone, hsl(var(--neutral))); }
.lv-tab .pill { font: var(--w-medium) var(--text-11)/18px var(--font-ui); padding: 0 6px; border-radius: var(--r-pill); background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.lv-tab.on .pill { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.lv-tab .pill.dr { background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); }
.lv-tabs .r { margin-left: auto; display: flex; align-items: center; gap: 6px; padding-bottom: 6px; flex: none; }
.lv-lnk { font: var(--w-medium) var(--text-small)/1 var(--font-title); color: var(--steel); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.lv-lnk .ico { width: 13px; height: 13px; }
.lv-tool { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid hsl(var(--border)); min-width: 0; flex-wrap: wrap; }
.lv-tool .r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lv-search { height: var(--control-h); width: 280px; max-width: 100%; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid hsl(var(--input)); border-radius: var(--r-control);
  color: hsl(var(--muted-foreground)); background: #fff; font-size: var(--text-body); white-space: nowrap; overflow: hidden; min-width: 0; }
.lv-search .v { color: hsl(var(--foreground)); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lv-search kbd { margin-left: auto; padding: 1px 5px; }
.lv-search.full { width: 100%; }
.lv-search.focus { border-color: hsl(var(--ring)); box-shadow: var(--focus-ring); }
.lv-fchip { height: var(--control-h); display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: var(--r-control); border: 1px dashed hsl(var(--input) / .8); background: #fff;
  font: var(--w-medium) var(--text-body)/1 var(--font-title); color: hsl(var(--foreground)); white-space: nowrap; max-width: 100%; min-width: 0; }
.lv-fchip.set { border-style: solid; border-color: hsl(var(--secondary-border)); background: hsl(var(--accent)); }
.lv-fchip .v { font-family: var(--font-ui); font-weight: var(--w-semibold); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lv-fchip .x { color: hsl(var(--muted-foreground)); display: inline-grid; }
.lv-fchip .ico { width: 13px; height: 13px; color: hsl(var(--muted-foreground)); }
.lv-fchip .c { font: var(--w-medium) var(--text-11)/16px var(--font-ui); padding: 0 5px; border-radius: var(--r-pill); background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.lv-fchip.dis { opacity: .55; border-style: dashed; }
.lv-vsw { display: inline-flex; align-items: center; gap: 7px; height: var(--control-h); padding: 0 10px; border: 1px solid hsl(var(--secondary-border)); border-radius: var(--r-control); background: #fff;
  font: var(--w-semibold) var(--text-btn)/1 var(--font-title); white-space: nowrap; min-width: 0; max-width: 100%; }
.lv-vsw small { font: var(--w-regular) var(--text-small)/1 var(--font-ui); color: hsl(var(--muted-foreground)); }
.lv-vsw .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lv-vsw .dirty { width: 7px; height: 7px; border-radius: 50%; background: #F2B544; flex: none; }
.lv-vsw.open { border-color: var(--steel); box-shadow: 0 0 0 2px color-mix(in srgb, var(--steel) 18%, transparent); }
.lv-dseg { display: inline-flex; padding: 2px; border-radius: var(--r-control); background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); }
.lv-dseg span { height: calc(var(--control-h) - 6px); display: flex; align-items: center; padding: 0 9px; border-radius: calc(var(--r-control) - 2px); font: var(--w-medium) var(--text-small)/1 var(--font-title); color: hsl(var(--muted-foreground)); white-space: nowrap; }
.lv-dseg span.on { background: #fff; color: hsl(var(--foreground)); font-weight: var(--w-semibold); box-shadow: 0 1px 2px rgba(14,23,41,.08); }

/* ---------- 4 · data table ---------- */
.lv-tw { position: relative; overflow: auto; min-width: 0; }
.lv-tw.clip { overflow: hidden; }
.lv-t { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: #fff; }
.lv-t th { height: var(--row-th); text-align: left; font: var(--w-semibold) var(--text-small)/1.2 var(--font-title); color: hsl(var(--muted-foreground)); background: hsl(var(--muted));
  border-bottom: 1px solid hsl(var(--border)); padding: 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: sticky; top: 0; z-index: 2; }
.lv-t th.sort { color: hsl(var(--foreground)); box-shadow: inset 0 -2px 0 var(--steel); }
.lv-t th.sortable { cursor: pointer; }
.lv-t th .ico { width: 12px; height: 12px; display: inline-block; vertical-align: -2px; margin-left: 3px; }
.lv-t td { height: var(--row); padding: 0 10px; border-bottom: 1px solid hsl(var(--border)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; font-size: var(--text-body); }
.lv-t td.num, .lv-t th.num { text-align: right; }
.lv-t td.sub, .lv-t .sub { color: hsl(var(--muted-foreground)); font-size: var(--text-small); }
.lv-t td.two { line-height: 1.15; white-space: normal; }
.lv-t td.two small { display: block; font-size: var(--text-10-5); color: hsl(var(--muted-foreground)); }
.lv-t td.wrap { white-space: normal; line-height: 1.35; padding-top: 6px; padding-bottom: 6px; overflow-wrap: anywhere; }
.lv-t td.acts { text-align: right; padding-right: 8px; overflow: visible; }
.lv-t .cbw { width: 34px; padding: 0 0 0 12px; }
.lv-t .cb { width: 15px; height: 15px; }
.lv-t tr.sel td { background: var(--selected-row); }
.lv-t tr.sel td:first-child { box-shadow: inset 2px 0 0 var(--steel); }
.lv-t tr.kf td { box-shadow: var(--e-row-focus); }
.lv-t tr.kf td:first-child { box-shadow: var(--e-row-focus-first); }
.lv-t tr.hov td { background: hsl(var(--muted) / .7); }
.lv-t tr.dim td { opacity: .55; }
.lv-t tr.grp td { background: hsl(var(--muted)); font: var(--w-semibold) var(--text-small)/1 var(--font-title); height: calc(var(--row) - 4px); }
.lv-t tr.exp td { background: hsl(var(--muted) / .45); height: auto; padding: 10px 14px 12px 46px; white-space: normal; }
.lv-t .stk { position: sticky; left: 0; z-index: 1; background: inherit; }
.lv-t th.stk { z-index: 3; }
.lv-t td.stk { background: #fff; }
.lv-t tr.sel td.stk { background: var(--selected-row); }
.lv-t .stk.edge { box-shadow: 6px 0 8px -6px var(--sticky-edge), inset -1px 0 0 hsl(var(--border)); }
.lv-t .stk2 { position: sticky; left: 34px; z-index: 1; background: #fff; }
.lv-t th.stk2 { z-index: 3; background: hsl(var(--muted)); }
.lv-t tr.sel td.stk2 { background: var(--selected-row); }
.lv-rm { width: 24px; height: 22px; display: inline-grid; place-items: center; border-radius: var(--r-control); color: hsl(var(--muted-foreground)); vertical-align: middle; }
.lv-rm.on { background: hsl(var(--accent)); color: hsl(var(--foreground)); box-shadow: inset 0 0 0 1px hsl(var(--secondary-border)); }
.lv-rm .ico { width: 15px; height: 15px; }
/* inline edit cell */
.lv-ce { display: flex; align-items: center; gap: 6px; height: calc(var(--row) - 6px); margin: 0 -6px; padding: 0 6px; border-radius: var(--r-control); border: 1px solid transparent; min-width: 0; }
.lv-ce .v { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lv-ce.edit { border-color: hsl(var(--ring)); box-shadow: var(--focus-ring); background: #fff; }
.lv-ce.saving { color: hsl(var(--muted-foreground)); }
.lv-ce.saved { background: hsl(var(--success) / .08); }
.lv-ce.saved .ico { color: hsl(var(--success)); }
.lv-ce.err { border-color: hsl(var(--destructive)); background: hsl(var(--destructive) / .05); }
.lv-ce.err small { color: hsl(var(--destructive)); font-size: var(--text-11); white-space: nowrap; }
.lv-ce .ico { width: 13px; height: 13px; flex: none; }
.lv-tfoot { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-top: 1px solid hsl(var(--border)); font-size: var(--text-small); color: hsl(var(--muted-foreground)); background: #fff; flex-wrap: wrap; }
.lv-tfoot .r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.lv-pbtn { min-width: 26px; height: 26px; padding: 0 6px; display: inline-grid; place-items: center; border: 1px solid hsl(var(--border)); border-radius: var(--r-control); color: hsl(var(--foreground)); background: #fff; font-size: var(--text-small); }
.lv-pbtn.on { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border-color: hsl(var(--primary)); }
.lv-pbtn[aria-disabled=true] { opacity: .45; }
.lv-pbtn .ico { width: 14px; height: 14px; }
.lv-sel { height: 26px; display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border: 1px solid hsl(var(--input)); border-radius: var(--r-control); color: hsl(var(--foreground)); background: #fff; white-space: nowrap; }
.lv-sel .ico { width: 12px; height: 12px; }
.lv-skel { display: block; height: 10px; border-radius: 3px; background: hsl(var(--muted)); animation: kit-pulse var(--motion-skeleton); }
@keyframes kit-pulse { from { opacity: 1 } to { opacity: .45 } }

/* ---------- 5 · bulk bar (batches of 100) ---------- */
.lv-bulk { display: flex; align-items: center; gap: 10px; padding: 0 12px; min-height: 40px; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); font-size: var(--text-body); flex-wrap: wrap; }
.lv-bulk b { font: var(--w-semibold) var(--text-body)/1 var(--font-title); white-space: nowrap; }
.lv-bulk .lk { text-decoration: underline; text-underline-offset: 3px; color: #DCE3F2; white-space: nowrap; }
.lv-bulk .cap { color: #AEB8CC; font-size: var(--text-small); white-space: nowrap; }
.lv-bulk .vr { width: 1px; height: 18px; background: rgba(250,250,248,.25); }
.lv-bulk .r { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.lv-bb { height: calc(var(--control-h) - 2px); display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: var(--r-control); border: 1px solid rgba(250,250,248,.25);
  font: var(--w-semibold) var(--text-small)/1 var(--font-title); color: #FAFAF8; white-space: nowrap; background: transparent; }
.lv-bb .ico { width: 13px; height: 13px; }
.lv-bb.danger { color: #FFB4BC; border-color: rgba(255,180,188,.35); }
.lv-bprog { width: 150px; height: 5px; border-radius: 3px; background: rgba(250,250,248,.18); overflow: hidden; display: block; flex: none; }
.lv-bprog i { display: block; height: 100%; background: hsl(var(--sidebar-primary)); }
.lv-bprog i.bad { background: #FF8A95; }
.lv-banner2 { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--selected-row); border-bottom: 1px solid hsl(var(--border)); font-size: var(--text-body); flex-wrap: wrap; }
.lv-banner2 b { font-weight: var(--w-semibold); }

/* ---------- 6 · progress: ruler (tape motif) + plain ---------- */
.lv-prog { height: 6px; border-radius: 3px; background: hsl(var(--foreground) / .09); overflow: hidden; }
.lv-prog i { display: block; height: 100%; background: var(--steel); border-radius: 3px; }
.lv-prog.bad i { background: hsl(var(--destructive)); }
.lv-prog.ok i { background: hsl(var(--success)); }
.lv-prog.ind i { width: 35%; animation: lv-ind var(--motion-indeterminate) var(--ease-standard) infinite; }
@keyframes lv-ind { from { transform: translateX(-100%) } to { transform: translateX(300%) } }
.lv-ruler { height: 12px; position: relative; background:
  repeating-linear-gradient(90deg, color-mix(in srgb, var(--tape-color) 45%, transparent) 0 1px, transparent 1px var(--tape-minor)) bottom/100% 3px no-repeat,
  repeating-linear-gradient(90deg, var(--tape-color) 0 1px, transparent 1px calc(var(--tape-major) / 2)) bottom/100% var(--tape-h) no-repeat,
  linear-gradient(hsl(var(--border)), hsl(var(--border))) bottom/100% 1px no-repeat; }
.lv-ruler i { position: absolute; left: 0; top: 0; height: 4px; border-radius: 2px; background: var(--steel); }
.lv-ruler.bad i { background: hsl(var(--destructive)); }
.lv-tape { height: 6px; pointer-events: none; opacity: var(--tape-opacity); background:
  repeating-linear-gradient(90deg, color-mix(in srgb, var(--tape-color) 55%, transparent) 0 1px, transparent 1px var(--tape-minor)) bottom/100% 3px no-repeat,
  repeating-linear-gradient(90deg, var(--tape-color) 0 1px, transparent 1px var(--tape-major)) bottom/100% var(--tape-h) no-repeat; }

/* ---------- 7 · APP SHELL: white HQ corner + white header, 76px labelled navy rail (4b·R) ---------- */
.lv-app { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); background: hsl(var(--background)); position: relative; min-height: 420px; }
.lv-app.exp { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
.lv-rail { background: var(--sidebar-sheen); color: hsl(var(--sidebar-foreground)); box-shadow: var(--e-sidebar-edge); display: flex; flex-direction: column; align-items: center; position: relative; min-width: 0; }
.lv-rail::before { content: ""; position: absolute; left: -40px; top: 40px; width: 220px; height: 220px; border-radius: 50%; background: var(--sidebar-sheen-light); pointer-events: none; }
.lv-rail > * { position: relative; }
.lv-corner { height: var(--topbar-h); width: 100%; flex: none; background: var(--hq-corner-bg); overflow: visible; display: flex; align-items: center; justify-content: center; gap: 6px; position: relative; border-bottom: 1px solid hsl(var(--border)); }
.lv-corner .bm { width: 24px; height: 24px; border-radius: var(--r-control); display: grid; place-items: center; background: var(--brand-mark); color: var(--brand-mark-foreground); box-shadow: var(--e-brand-mark); font: var(--w-bold) var(--text-10-5)/1 var(--font-title); flex: none; }
.lv-corner b { font: var(--w-bold) 15px/1 var(--font-title); color: var(--hq-corner-fg); letter-spacing: -.01em; }
.lv-corner small { display: block; font: var(--w-regular) var(--text-11)/1.2 var(--font-ui); color: var(--hq-corner-sub); }
.lv-app.exp .lv-corner { justify-content: flex-start; padding: 0 12px; gap: 9px; }
.lv-app.exp .lv-corner .bm { width: 28px; height: 28px; font-size: 11.5px; }
.lv-rail .lv-jump { width: 40px; height: 32px; display: grid; place-items: center; border-radius: var(--r-control); border: 1px solid hsl(var(--sidebar-foreground) / .18); margin: 10px 0 6px; }
.lv-rail .lv-jump .ico { width: 15px; height: 15px; }
.lv-ri { width: var(--rail-item-w); min-height: var(--rail-item-min-h); padding: 7px 2px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: var(--r-control); position: relative; color: inherit; flex: none; }
.lv-ri .ico { width: 17px; height: 17px; opacity: .9; }
.lv-ri .rl { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; text-align: center; font: var(--w-medium) var(--text-rail)/1.15 var(--font-title); max-width: 62px; overflow-wrap: anywhere; }
.lv-ri.on { background: var(--sidebar-item-on); color: hsl(var(--sidebar-accent-foreground)); box-shadow: var(--e-sidebar-item-on); }
.lv-ri.on .rl { font-weight: var(--w-semibold); }
.lv-ri.on .ico { color: var(--sidebar-item-on-icon); opacity: 1; }
.lv-ri.on::before { content: ""; position: absolute; left: -5px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 2px 2px 0; background: hsl(var(--sidebar-primary)); }
.lv-ri.hov { background: rgba(255,255,255,.09); color: #FAFAF8; }
.lv-ri .bd { position: absolute; top: 4px; right: 8px; min-width: 15px; height: 15px; border-radius: var(--r-pill); background: hsl(var(--destructive)); color: #fff; font: var(--w-semibold) var(--text-9-5)/15px var(--font-ui); padding: 0 3px; text-align: center; }
.lv-ri.dis { opacity: .4; }
.lv-rail .sep { width: 24px; height: 1px; background: hsl(var(--sidebar-foreground) / .14); margin: 6px 0; flex: none; }
.lv-rail .more { display: flex; flex-direction: column; align-items: center; opacity: .55; font: var(--w-medium) var(--text-9-5)/1.2 var(--font-title); padding: 2px 0; }
.lv-rail .foot { margin-top: auto; padding: 10px 0 12px; }
/* expanded sidebar (232px, accordion T-a) */
.lv-side { background: var(--sidebar-sheen); color: hsl(var(--sidebar-foreground)); box-shadow: var(--e-sidebar-edge); display: flex; flex-direction: column; min-width: 0; position: relative; }
.lv-side .body { padding: 10px; display: flex; flex-direction: column; gap: 2px; }
.lv-side .grp { font: var(--w-medium) var(--text-micro)/1 var(--font-title); opacity: .62; padding: 12px 10px 5px; }
.lv-si { display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 6px 10px; border-radius: var(--r-control); font: var(--w-medium) var(--text-nav)/1.2 var(--font-title); position: relative; min-width: 0; }
.lv-si .ico { width: 16px; height: 16px; opacity: .85; }
.lv-si .t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lv-si .cv { width: 13px; height: 13px; opacity: .6; }
.lv-si .n { font: var(--w-regular) var(--text-11)/1 var(--font-ui); opacity: .6; }
.lv-si.on { background: var(--sidebar-item-on); color: #FAFAF8; box-shadow: var(--e-sidebar-item-on); }
.lv-si.on::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: hsl(var(--sidebar-primary)); }
.lv-si.on .ico { color: var(--sidebar-item-on-icon); opacity: 1; }
.lv-si.dis { opacity: .45; }
.lv-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 4px 18px; padding-left: 10px; border-left: 1px solid hsl(var(--sidebar-foreground) / .14); }
.lv-sub .lv-si { min-height: 28px; font-size: var(--text-small); }
.lv-sub .h3 { font: var(--w-semibold) var(--text-10-5)/1 var(--font-title); opacity: .55; padding: 8px 10px 3px; }
/* header */
.lv-main { display: flex; flex-direction: column; min-width: 0; position: relative; }
.lv-top { height: var(--topbar-h); flex: none; display: flex; align-items: center; gap: 12px; padding: 0 var(--page-pad) 0 12px; background: #fff; border-bottom: 1px solid color-mix(in srgb, var(--steel) 35%, hsl(var(--border))); position: relative; z-index: 6; min-width: 0; }
.lv-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 6px; pointer-events: none; opacity: var(--tape-opacity); background:
  repeating-linear-gradient(90deg, color-mix(in srgb, var(--tape-color) 55%, transparent) 0 1px, transparent 1px var(--tape-minor)) bottom/100% 3px no-repeat,
  repeating-linear-gradient(90deg, var(--tape-color) 0 1px, transparent 1px var(--tape-major)) bottom/100% var(--tape-h) no-repeat; }
.lv-toggle { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-control); border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); flex: none; }
.lv-toggle .ico { width: 15px; height: 15px; }
.lv-crumbs { flex: 0 1 auto; min-width: 48px; overflow: hidden; display: flex; align-items: center; gap: 8px; font: var(--w-regular) var(--text-nav)/1 var(--font-title); color: hsl(var(--muted-foreground)); min-width: 0; white-space: nowrap; }
.lv-crumbs b { color: hsl(var(--foreground)); font-weight: var(--w-semibold); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lv-crumbs .crb { display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px; margin: 0 -6px; border-radius: var(--r-control); }
.lv-crumbs .crb .ico { width: 12px; height: 12px; }
.lv-crumbs .crb.open { background: hsl(var(--accent)); color: hsl(var(--foreground)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--steel) 35%, transparent); }
.lv-tr { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
.lv-tr > .lv-hb { flex: none; }
.lv-find { height: 30px; width: 250px; min-width: 120px; flex: 0 1 250px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid hsl(var(--input)); border-radius: var(--r-control); background: #fff; color: hsl(var(--muted-foreground)); font-size: var(--text-body); white-space: nowrap; }
.lv-find .ico { width: 14px; height: 14px; }
.lv-find kbd { margin-left: auto; padding: 1px 5px; }
.lv-hb { position: relative; display: flex; }
.lv-tb { height: 30px; display: inline-flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: var(--r-control); border: 1px solid hsl(var(--border)); font-size: var(--text-body); color: hsl(var(--foreground)); white-space: nowrap; background: #fff; position: relative; }
.lv-tb .ico { width: 15px; height: 15px; }
.lv-tb.ic { width: 30px; padding: 0; justify-content: center; }
.lv-tb.open { border-color: var(--steel); background: hsl(var(--accent)); }
.lv-tb .ch { width: 12px; height: 12px; color: hsl(var(--muted-foreground)); }
.lv-jn { font: var(--w-semibold) var(--text-11)/17px var(--font-ui); min-width: 17px; height: 17px; border-radius: var(--r-pill); text-align: center; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); padding: 0 4px; }
.lv-jn.bad { background: hsl(var(--destructive)); color: #fff; }
.lv-nbadge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; border-radius: var(--r-pill); background: hsl(var(--destructive)); color: #fff; font: var(--w-semibold) var(--text-10)/16px var(--font-ui); text-align: center; padding: 0 3px; box-shadow: 0 0 0 2px #fff; }
.lv-tb .lc { font: var(--w-semibold) var(--text-10)/1 var(--font-title); }
/* header menus: every menu hangs RIGHT-ALIGNED under its own button (FEEDBACK-B-r1) */
.lv-hmenu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; background: #fff; border-radius: 10px; box-shadow: 0 18px 48px -16px rgba(14,23,41,.5), 0 0 0 1px hsl(var(--border)); font-size: var(--text-body); overflow: hidden; }
.lv-hmenu.static { position: relative; top: auto; right: auto; }
.lv-hmenu .hh { display: flex; align-items: baseline; gap: 8px; padding: 9px 12px; border-bottom: 1px solid hsl(var(--border)); }
.lv-hmenu .hh b { font: var(--w-semibold) var(--text-card)/1.2 var(--font-title); white-space: nowrap; }
.lv-hmenu .hh small { color: hsl(var(--muted-foreground)); font-size: var(--text-small); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-hmenu .hh .a { margin-left: auto; color: var(--steel); font-size: var(--text-small); font-weight: var(--w-medium); white-space: nowrap; }
.lv-hmenu .hf { display: flex; gap: 12px; padding: 8px 12px; border-top: 1px solid hsl(var(--border)); color: var(--steel); font-size: var(--text-small); font-weight: var(--w-medium); flex-wrap: wrap; }
.lv-hmenu .hs { font: var(--w-semibold) var(--text-10-5)/1 var(--font-title); color: hsl(var(--muted-foreground)); padding: 8px 12px 4px; }
.lv-jm { width: var(--hmenu-jobs-w); }
.lv-jr { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto 40px; align-items: center; gap: 8px; min-height: var(--row); padding: 0 12px; border-bottom: 1px solid hsl(var(--border)); }
.lv-jr:last-of-type { border-bottom: 0; }
.lv-jr .d { width: 7px; height: 7px; border-radius: 50%; background: var(--steel); }
.lv-jr.queued .d { background: hsl(var(--muted-foreground)); opacity: .6; }
.lv-jr.failed .d, .lv-jr.partial .d { background: hsl(var(--destructive)); }
.lv-jr.done .d { background: hsl(var(--success)); }
.lv-jr .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-jr .s { display: flex; align-items: center; gap: 6px; font-size: var(--text-11); color: hsl(var(--muted-foreground)); white-space: nowrap; }
.lv-jr .s .bar { width: 56px; height: 4px; border-radius: 2px; background: hsl(var(--foreground) / .1); overflow: hidden; display: inline-block; }
.lv-jr .s .bar i { display: block; height: 100%; background: var(--steel); }
.lv-jr .s.err { color: hsl(var(--destructive)); }
.lv-jr .s a { color: var(--steel); font-weight: var(--w-medium); text-decoration: none; }
.lv-jr .t { text-align: right; font-size: var(--text-11); color: hsl(var(--muted-foreground)); }
.lv-nm { width: var(--hmenu-notif-w); }
.lv-nr { display: grid; grid-template-columns: 26px minmax(0, 1fr) 8px; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 1px solid hsl(var(--border)); }
.lv-nr b { font-weight: var(--w-medium); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-nr small { color: hsl(var(--muted-foreground)); font-size: var(--text-11); }
.lv-nr.un { background: color-mix(in srgb, hsl(var(--accent)) 55%, #fff); }
.lv-nr .i { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.lv-nr .i .ico { width: 14px; height: 14px; }
.lv-nr .i.bad { background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); }
.lv-nr .u { width: 7px; height: 7px; border-radius: 50%; background: var(--steel); }
.lv-tzm { width: var(--hmenu-tz-w); }
.lv-tzr { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 12px; }
.lv-tzr small { color: hsl(var(--muted-foreground)); margin-left: auto; font-size: var(--text-11); white-space: nowrap; }
.lv-tzr .ico { width: 13px; height: 13px; color: var(--steel); }
.lv-tzr.on { background: hsl(var(--accent)); font-weight: var(--w-medium); }
/* flyouts T-b / T-d and breadcrumb dropdown T-f */
.lv-fly { background: #fff; border-radius: 10px; box-shadow: 0 18px 48px -16px rgba(14,23,41,.5), 0 0 0 1px hsl(var(--border)); overflow: hidden; min-width: var(--fly-w); }
.lv-fly .fh { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid hsl(var(--border)); font: var(--w-semibold) var(--text-card)/1.2 var(--font-title); }
.lv-fly .fh small { margin-left: auto; font: var(--w-regular) var(--text-11)/1 var(--font-ui); color: hsl(var(--muted-foreground)); white-space: nowrap; }
.lv-fly .fc { display: flex; gap: 16px; padding: 8px; }
.lv-fly .fcol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lv-fly .h3 { font: var(--w-semibold) var(--text-10-5)/1 var(--font-title); color: hsl(var(--muted-foreground)); padding: 8px 10px 4px; }
.lv-fl { min-height: 30px; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-control); font-size: var(--text-body); min-width: 0; }
.lv-fl .t { min-width: 0; overflow-wrap: anywhere; }
.lv-fl.hv { background: hsl(var(--accent)); box-shadow: inset 2px 0 0 var(--steel); }
.lv-fl.on { font-weight: var(--w-semibold); }
.lv-fl .ico { margin-left: auto; width: 13px; height: 13px; color: var(--steel); flex: none; }
.lv-fly .ff { padding: 8px 14px; border-top: 1px solid hsl(var(--border)); font-size: var(--text-11); color: hsl(var(--muted-foreground)); }
/* the page inside the shell */
.lv-page { padding: var(--page-pad); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* phone shell */
.lv-phone { background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: var(--r-frame); overflow: clip; position: relative; display: flex; flex-direction: column; }
.lv-pbar { height: var(--pbar-h); display: flex; align-items: center; gap: 4px; padding: 0 4px; background: #fff; border-bottom: 1px solid color-mix(in srgb, var(--steel) 35%, hsl(var(--border))); position: relative; flex: none; }
.lv-pbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 6px; pointer-events: none; opacity: var(--tape-opacity); background:
  repeating-linear-gradient(90deg, color-mix(in srgb, var(--tape-color) 55%, transparent) 0 1px, transparent 1px var(--tape-minor)) bottom/100% 3px no-repeat,
  repeating-linear-gradient(90deg, var(--tape-color) 0 1px, transparent 1px var(--tape-major)) bottom/100% var(--tape-h) no-repeat; }
.lv-pbar .ib { width: 44px; height: 44px; display: grid; place-items: center; color: hsl(var(--foreground)); position: relative; flex: none; }
.lv-pbar .ib .ico { width: 19px; height: 19px; }
.lv-pbar h2 { font: var(--w-semibold) var(--text-18)/1.2 var(--font-title); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-pbar .bm { width: 26px; height: 26px; border-radius: var(--r-control); display: grid; place-items: center; background: var(--brand-mark); color: var(--brand-mark-foreground); font: var(--w-bold) var(--text-10-5)/1 var(--font-title); flex: none; margin-left: 8px; }
.lv-pbar .ib .lv-nbadge { top: 4px; right: 3px; }
.lv-pnav { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid hsl(var(--border)); background: #fff; padding: 6px 0 10px; flex: none; }
.lv-pnav span { display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 46px; justify-content: center; font: var(--w-medium) var(--text-10-5)/1.15 var(--font-title); color: hsl(var(--muted-foreground)); text-align: center; padding: 0 2px; }
.lv-pnav span .ico { width: 19px; height: 19px; }
.lv-pnav span.on { color: hsl(var(--primary)); font-weight: var(--w-semibold); }
.lv-pbody { padding: 12px; display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.lv-psheet { background: #fff; border-radius: 16px 16px 0 0; box-shadow: var(--e-phone-sheet); padding: 6px 14px 16px; border: 1px solid hsl(var(--border)); }
.lv-psheet .grab { width: 36px; height: 4px; border-radius: 2px; background: hsl(var(--border)); margin: 4px auto 10px; }
.lv-psheet h3 { font: var(--w-semibold) var(--text-18)/1.25 var(--font-title); margin-bottom: 8px; }
.lv-plist { background: #fff; border: 1px solid hsl(var(--border)); border-radius: var(--r-card); overflow: hidden; }
.lv-pli { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 12px; border-bottom: 1px solid hsl(var(--border)); min-width: 0; }
.lv-pli:last-child { border-bottom: 0; }
.lv-pli > .b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lv-pli > .b > b { font: var(--w-semibold) var(--text-14)/1.25 var(--font-title); overflow-wrap: anywhere; }
.lv-pli > .b > small { color: hsl(var(--muted-foreground)); font-size: var(--text-small); overflow-wrap: anywhere; }
.lv-pli > .r { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.lv-pbtns { display: grid; gap: 8px; }
.lv-pbtns.two { grid-template-columns: 1fr 1fr; }
.kit-m .lv-pbtns .btn { height: var(--control-h-m-lg); width: 100%; }
.lv-chiprow { display: flex; gap: 6px; overflow: hidden; padding-bottom: 2px; }
.lv-chiprow .lv-fchip { height: 34px; border-style: solid; border-color: hsl(var(--border)); flex: none; }

/* ---------- 8 · banners and the state vocabulary ---------- */
.lv-banner { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: var(--r-card); border: 1px solid; font-size: var(--text-body); min-width: 0; }
.lv-banner > .ico { margin-top: 1px; flex: none; width: 16px; height: 16px; }
.lv-banner .bt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lv-banner .bt b { font-weight: var(--w-semibold); }
.lv-banner .bt small { font-size: var(--text-small); color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
.lv-banner .ba { display: flex; gap: 6px; flex: none; align-items: center; flex-wrap: wrap; }
.lv-banner.info { background: color-mix(in srgb, var(--steel) 6%, #fff); border-color: color-mix(in srgb, var(--steel) 28%, transparent); }
.lv-banner.info > .ico { color: var(--steel); }
.lv-banner.warn { background: hsl(var(--warning) / .07); border-color: hsl(var(--warning) / .32); }
.lv-banner.warn > .ico { color: hsl(var(--warning)); }
.lv-banner.bad { background: hsl(var(--destructive) / .05); border-color: hsl(var(--destructive) / .3); }
.lv-banner.bad > .ico { color: hsl(var(--destructive)); }
.lv-banner.ok { background: hsl(var(--success) / .06); border-color: hsl(var(--success) / .3); }
.lv-banner.ok > .ico { color: hsl(var(--success)); }
.lv-banner.lock { background: hsl(var(--muted)); border-color: hsl(var(--border)); }
.lv-banner.lock > .ico { color: hsl(var(--neutral)); }
.lv-banner.thin { border-radius: 0; border-width: 0 0 1px; padding: 6px 12px; align-items: center; }
.lv-st { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 28px 20px; min-height: 180px; }
.lv-st .si { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.lv-st .si .ico { width: 20px; height: 20px; }
.lv-st .si.bad { background: hsl(var(--destructive) / .08); color: hsl(var(--destructive)); }
.lv-st .si.warn { background: hsl(var(--warning) / .1); color: hsl(var(--warning)); }
.lv-st .si.lock { background: hsl(var(--muted)); color: hsl(var(--neutral)); }
.lv-st h4 { font: var(--w-semibold) var(--text-section)/1.3 var(--font-title); max-width: 46ch; }
.lv-st p { font-size: var(--text-body); color: hsl(var(--muted-foreground)); max-width: 52ch; overflow-wrap: anywhere; }
.lv-st .rid { font: var(--w-regular) var(--text-11)/1 var(--font-code); color: hsl(var(--muted-foreground)); }
.lv-st .acts { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; justify-content: center; }
.lv-st.sm { min-height: 0; padding: 16px; }

/* ---------- 9 · dialogs / sheets drawn static inside a specimen ---------- */
.lv-dlg { width: 100%; max-width: 480px; background: #fff; border-radius: var(--r-frame); box-shadow: var(--e-dialog), 0 0 0 1px hsl(var(--border)); overflow: hidden; }
.lv-dlg.wide { max-width: 560px; }
.lv-dlg .dh { padding: 16px 18px 6px; display: flex; gap: 10px; align-items: flex-start; }
.lv-dlg .dh .di { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex: none; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.lv-dlg .dh .di.bad { background: hsl(var(--destructive) / .08); color: hsl(var(--destructive)); }
.lv-dlg .dh .di.warn { background: hsl(var(--warning) / .1); color: hsl(var(--warning)); }
.lv-dlg .dh h3 { font: var(--w-semibold) var(--text-section)/1.3 var(--font-title); }
.lv-dlg .dh p { font-size: var(--text-body); color: hsl(var(--muted-foreground)); margin-top: 3px; overflow-wrap: anywhere; }
.lv-dlg .db { padding: 10px 18px 14px; display: flex; flex-direction: column; gap: 10px; }
.lv-dlg .df { padding: 12px 18px; border-top: 1px solid hsl(var(--border)); display: flex; gap: 8px; justify-content: flex-end; align-items: center; background: hsl(var(--muted) / .45); flex-wrap: wrap; }
.lv-dlg .df .l { margin-right: auto; font-size: var(--text-small); color: hsl(var(--muted-foreground)); }
.lv-sum { border: 1px solid hsl(var(--border)); border-radius: var(--r-card); overflow: hidden; }
.lv-sum .sr2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 7px 12px; border-bottom: 1px solid hsl(var(--border)); font-size: var(--text-body); }
.lv-sum .sr2:last-child { border-bottom: 0; }
.lv-sum .sr2 span { color: hsl(var(--muted-foreground)); }
.lv-sum .sr2 b { font-weight: var(--w-semibold); text-align: right; font-variant-numeric: tabular-nums; }
.lv-sum .sr2.tot { background: hsl(var(--muted) / .6); }
.lv-sum .sr2 .neg { color: hsl(var(--destructive)); }
.lv-sum .sr2 .pos { color: hsl(var(--success)); }
.lv-typed { display: flex; flex-direction: column; gap: 6px; }
.lv-typed .q { font-size: var(--text-body); color: hsl(var(--foreground)); }
.lv-typed code { background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); border-radius: 4px; padding: 1px 5px; font-size: var(--text-code); }
.lv-sheet { width: 100%; max-width: 420px; background: #fff; border-left: 1px solid hsl(var(--border)); box-shadow: var(--e-sheet); display: flex; flex-direction: column; min-width: 0; }
.lv-sheet .shh { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid hsl(var(--border)); }
.lv-sheet .shh h3 { font: var(--w-semibold) var(--text-section)/1.25 var(--font-title); min-width: 0; overflow-wrap: anywhere; }
.lv-sheet .shb { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.lv-ladder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.kit-m .lv-ladder { grid-template-columns: minmax(0, 1fr); }
.lv-rung { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lv-rung > .k { font: var(--w-medium) var(--text-micro)/1.2 var(--font-code); color: hsl(var(--muted-foreground)); }

/* ---------- 10 · record header + split button + overflow ---------- */
.lv-rh { background: #fff; border: 1px solid hsl(var(--border)); border-radius: var(--r-card); overflow: hidden; }
.lv-rh .top { padding: 12px 16px 0; }
.lv-rh .back { display: flex; align-items: center; gap: 6px; font-size: var(--text-small); color: hsl(var(--muted-foreground)); margin-bottom: 6px; }
.lv-rh .back .ico { width: 13px; height: 13px; }
.lv-rh .r1 { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.lv-rh h1 { font: var(--w-semibold) var(--text-page)/1.15 var(--font-title); letter-spacing: -.015em; min-width: 0; overflow-wrap: anywhere; }
.lv-rh .acts { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lv-rh .sub { font-size: var(--text-small); color: hsl(var(--muted-foreground)); margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.lv-facts { display: grid; grid-template-columns: repeat(var(--facts, 6), minmax(0, 1fr)); margin-top: 12px; border-top: 1px solid hsl(var(--border)); }
.lv-facts > div { padding: 9px 12px; min-width: 0; }
.lv-facts > div + div { border-left: 1px solid hsl(var(--border)); }
.lv-facts small { display: block; font-size: var(--text-small); color: hsl(var(--muted-foreground)); margin-bottom: 2px; }
.lv-facts b { font-weight: var(--w-semibold); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-facts span { font-size: var(--text-small); color: hsl(var(--muted-foreground)); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-rh .lv-tabs { padding: 0 6px; border-top: 1px solid hsl(var(--border)); border-bottom: 0; }
.lv-rh.sticky { box-shadow: 0 8px 18px -14px rgba(14,23,41,.35); }
.lv-rh.sticky .r1 h1 { font-size: var(--text-section); }
.btn-split { display: inline-flex; align-items: stretch; border-radius: var(--r-control); box-shadow: var(--e-btn); }
.btn-split .btn { border-radius: var(--r-control) 0 0 var(--r-control); box-shadow: none; }
.btn-split .btn + .btn { border-radius: 0 var(--r-control) var(--r-control) 0; padding: 0 7px; border-left: 1px solid rgba(250,250,248,.22); }
.btn-split .btn-secondary + .btn-secondary { border-left: 0; }
.lv-menu { background: #fff; border-radius: 10px; box-shadow: 0 18px 48px -16px rgba(14,23,41,.5), 0 0 0 1px hsl(var(--border)); font-size: var(--text-body); overflow: hidden; min-width: 220px; }
.lv-menu .ms { padding: 4px 0; border-bottom: 1px solid hsl(var(--border)); }
.lv-menu .ms:last-child { border-bottom: 0; }
.lv-menu .mh2 { padding: 6px 12px 3px; font: var(--w-semibold) var(--text-10-5)/1 var(--font-title); color: hsl(var(--muted-foreground)); display: flex; gap: 6px; align-items: center; }
.lv-mi { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 12px; white-space: nowrap; min-width: 0; }
.lv-mi .ico { width: 14px; height: 14px; color: hsl(var(--muted-foreground)); flex: none; }
.lv-mi .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lv-mi .k { margin-left: auto; font: var(--w-regular) var(--text-10-5)/1 var(--font-code); color: hsl(var(--muted-foreground)); }
.lv-mi .d { margin-left: auto; font-size: var(--text-small); color: hsl(var(--muted-foreground)); }
.lv-mi.hv { background: hsl(var(--accent)); box-shadow: inset 2px 0 0 var(--steel); }
.lv-mi.danger, .lv-mi.danger .ico { color: hsl(var(--destructive)); }
.lv-mi.dis { opacity: .45; }

/* ---------- 11 · forms: label column, section nav, save bar ---------- */
.lv-frow { display: grid; grid-template-columns: var(--label-col) minmax(0, 1fr); gap: 12px; align-items: start; padding: 8px 0; border-bottom: 1px solid hsl(var(--border)); }
.lv-frow:last-child { border-bottom: 0; }
.lv-frow > label { font: var(--w-semibold) var(--text-label)/1.3 var(--font-title); padding-top: calc((var(--control-h) - 17px) / 2); min-width: 0; overflow-wrap: anywhere; }
.lv-frow > label small { display: block; font: var(--w-regular) var(--text-11)/1.3 var(--font-ui); color: hsl(var(--muted-foreground)); margin-top: 2px; }
.lv-frow > label .req { color: hsl(var(--destructive)); margin-left: 2px; }
.lv-frow .help { margin-top: 4px; }
.kit-m .lv-frow, .lv-frow.stack { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.kit-m .lv-frow > label, .lv-frow.stack > label { padding-top: 0; }
.lv-fsec { background: #fff; border: 1px solid hsl(var(--border)); border-radius: var(--r-card); overflow: hidden; }
.lv-fsec > header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid hsl(var(--border)); }
.lv-fsec > header h3 { font: var(--w-semibold) var(--text-card)/1.25 var(--font-title); }
.lv-fsec > header .n { font: var(--w-medium) var(--text-11)/1 var(--font-code); color: hsl(var(--muted-foreground)); }
.lv-fsec > header .ec { margin-left: auto; }
.lv-fsec .fb { padding: 4px 14px; }
.lv-fsec.err { border-color: hsl(var(--destructive) / .45); }
.lv-snav { display: flex; flex-direction: column; gap: 1px; padding: 6px; background: #fff; border: 1px solid hsl(var(--border)); border-radius: var(--r-card); min-width: 0; }
.lv-snav .sn { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 4px 10px; border-radius: var(--r-control); font: var(--w-medium) var(--text-body)/1.25 var(--font-title); color: hsl(var(--muted-foreground)); min-width: 0; }
.lv-snav .sn .t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lv-snav .sn.on { color: hsl(var(--foreground)); font-weight: var(--w-semibold); background: hsl(var(--accent)); box-shadow: inset 2px 0 0 var(--steel); }
.lv-snav .sn .e { font: var(--w-semibold) var(--text-10)/16px var(--font-ui); min-width: 16px; padding: 0 4px; border-radius: var(--r-pill); background: hsl(var(--destructive)); color: #fff; text-align: center; }
.lv-snav .sn .ok { width: 13px; height: 13px; color: hsl(var(--success)); }
.lv-save { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px 8px 16px; background: hsl(var(--save-bar)); color: hsl(var(--primary-foreground)); border-radius: var(--r-card); box-shadow: 0 16px 36px -18px rgba(14,23,41,.55); flex-wrap: wrap; }
.lv-save .m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lv-save .m b { font: var(--w-semibold) var(--text-body)/1.3 var(--font-title); }
.lv-save .m small { font-size: var(--text-small); color: #AEB8CC; overflow-wrap: anywhere; }
.lv-save .btn-secondary { background: transparent; color: #FAFAF8; border-color: rgba(250,250,248,.3); box-shadow: none; }
.lv-save .btn-primary { background: #FAFAF8; color: hsl(var(--primary)); }
.lv-save .dot2 { width: 8px; height: 8px; border-radius: 50%; background: #F2B544; flex: none; }
.lv-save.saved { background: #fff; color: hsl(var(--foreground)); border: 1px solid hsl(var(--success) / .35); box-shadow: var(--e-1); }
.lv-save.saved .m small { color: hsl(var(--muted-foreground)); }
.lv-save.err { background: #fff; color: hsl(var(--foreground)); border: 1px solid hsl(var(--destructive) / .45); }
.lv-save.err .m small { color: hsl(var(--destructive)); }
.lv-save.err .btn-secondary, .lv-save.saved .btn-secondary { color: hsl(var(--foreground)); border-color: hsl(var(--secondary-border)); }
.lv-save.err .btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.lv-save.conflict { background: #fff; color: hsl(var(--foreground)); border: 1px solid hsl(var(--warning) / .55); box-shadow: inset 3px 0 0 hsl(var(--warning)), var(--e-1); }
.lv-save.conflict .m small { color: hsl(var(--muted-foreground)); }
.lv-save.conflict .btn-secondary { color: hsl(var(--foreground)); border-color: hsl(var(--secondary-border)); }
.lv-save.conflict .btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.lv-save .ico { width: 16px; height: 16px; flex: none; }

/* ---------- 12 · stepper (import flow) ---------- */
.lv-steps { display: flex; align-items: center; gap: 0; min-width: 0; }
.lv-step { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font: var(--w-medium) var(--text-body)/1.2 var(--font-title); color: hsl(var(--muted-foreground)); }
.lv-step .m { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid hsl(var(--input)); font: var(--w-semibold) var(--text-11)/1 var(--font-ui); flex: none; background: #fff; }
.lv-step .m .ico { width: 12px; height: 12px; }
.lv-step .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-step .ln { flex: 1; height: 1px; background: hsl(var(--border)); min-width: 12px; margin: 0 6px; }
.lv-step:last-child .ln { display: none; }
.lv-step.done { color: hsl(var(--foreground)); }
.lv-step.done .m { background: hsl(var(--success)); border-color: hsl(var(--success)); color: #fff; }
.lv-step.cur { color: hsl(var(--foreground)); font-weight: var(--w-semibold); }
.lv-step.cur .m { border-color: var(--steel); background: var(--steel); color: #fff; }
.lv-step.err .m { border-color: hsl(var(--destructive)); background: hsl(var(--destructive)); color: #fff; }
.lv-step.err { color: hsl(var(--destructive)); }
.lv-step.lock { opacity: .55; }
.lv-drop { border: 1.5px dashed hsl(var(--secondary-border)); border-radius: var(--r-card); padding: 18px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; background: hsl(var(--muted) / .4); }
.lv-drop .ico { width: 22px; height: 22px; color: hsl(var(--muted-foreground)); }
.lv-drop b { font: var(--w-semibold) var(--text-body)/1.3 var(--font-title); }
.lv-drop small { color: hsl(var(--muted-foreground)); font-size: var(--text-small); }
.lv-drop.over { border-color: var(--steel); background: hsl(var(--accent)); }
.lv-drop.err { border-color: hsl(var(--destructive)); background: hsl(var(--destructive) / .04); }
.lv-file { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid hsl(var(--border)); border-radius: var(--r-card); background: #fff; min-width: 0; }
.lv-file .fi { width: 28px; height: 32px; border-radius: 4px; background: hsl(var(--muted)); display: grid; place-items: center; font: var(--w-semibold) var(--text-9)/1 var(--font-code); color: hsl(var(--muted-foreground)); flex: none; }
.lv-file .b { flex: 1; min-width: 0; }
.lv-file .b b { display: block; font-weight: var(--w-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-file .b small { color: hsl(var(--muted-foreground)); font-size: var(--text-small); }
.lv-counts { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); border: 1px solid hsl(var(--border)); border-radius: var(--r-card); overflow: hidden; background: #fff; }
.lv-counts > div { padding: 9px 12px; min-width: 0; }
.lv-counts > div + div { border-left: 1px solid hsl(var(--border)); }
.lv-counts small { display: block; color: hsl(var(--muted-foreground)); font-size: var(--text-small); }
.lv-counts b { font: var(--w-semibold) 20px/1.2 var(--font-title); letter-spacing: -.02em; }
.lv-counts .bad b { color: hsl(var(--destructive)); }
.lv-counts .ok b { color: hsl(var(--success)); }

/* ---------- 13 · timeline / audit / diff ---------- */
.lv-tl { display: flex; flex-direction: column; }
.lv-ev { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; padding: 8px 0; position: relative; }
.lv-ev::before { content: ""; position: absolute; left: 9px; top: 26px; bottom: -6px; width: 1px; background: hsl(var(--border)); }
.lv-ev:last-child::before { display: none; }
.lv-ev .dt0 { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border)); }
.lv-ev .dt0 .ico { width: 11px; height: 11px; }
.lv-ev .dt0.bad { background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / .3); }
.lv-ev .dt0.ok { background: hsl(var(--success) / .1); color: hsl(var(--success)); border-color: hsl(var(--success) / .3); }
.lv-ev .eb { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lv-ev .eb b { font-weight: var(--w-medium); overflow-wrap: anywhere; }
.lv-ev .eb small { color: hsl(var(--muted-foreground)); font-size: var(--text-small); overflow-wrap: anywhere; }
.lv-ev .when { font-size: var(--text-small); color: hsl(var(--muted-foreground)); white-space: nowrap; text-align: right; }
.lv-ev.open .eb .lv-diff { margin-top: 6px; }
.lv-diff { border: 1px solid hsl(var(--border)); border-radius: var(--r-card); overflow: hidden; background: #fff; font-size: var(--text-body); }
.lv-diff .dr { display: grid; grid-template-columns: minmax(110px, .9fr) minmax(0, 1fr) minmax(0, 1fr); border-bottom: 1px solid hsl(var(--border)); }
.lv-diff .dr:last-child { border-bottom: 0; }
.lv-diff .dr > * { padding: 6px 10px; min-width: 0; overflow-wrap: anywhere; }
.lv-diff .dr > * + * { border-left: 1px solid hsl(var(--border)); }
.lv-diff .dr.h > * { background: hsl(var(--muted)); font: var(--w-semibold) var(--text-small)/1.2 var(--font-title); color: hsl(var(--muted-foreground)); }
.lv-diff .dr .f { color: hsl(var(--muted-foreground)); font-size: var(--text-small); }
.lv-diff del, .lv-diff .del { text-decoration: line-through; color: hsl(var(--diff-del)); background: hsl(var(--diff-del) / .08); border-radius: 2px; padding: 0 2px; }
.lv-diff ins, .lv-diff .ins { text-decoration: none; color: hsl(var(--diff-add)); background: hsl(var(--diff-add) / .1); border-radius: 2px; padding: 0 2px; }
.lv-diff .same { color: hsl(var(--muted-foreground)); }
.lv-diffl { font: var(--w-regular) var(--text-code)/1.55 var(--font-code); }
.lv-diffl .l { display: grid; grid-template-columns: 34px 16px minmax(0, 1fr); padding: 0 8px; }
.lv-diffl .l .no { color: hsl(var(--muted-foreground)); text-align: right; padding-right: 8px; }
.lv-diffl .l .tx { white-space: pre-wrap; overflow-wrap: anywhere; }
.lv-diffl .l.a { background: hsl(var(--diff-add) / .08); }
.lv-diffl .l.a .sg { color: hsl(var(--diff-add)); }
.lv-diffl .l.d { background: hsl(var(--diff-del) / .07); }
.lv-diffl .l.d .sg { color: hsl(var(--diff-del)); }

/* ---------- 14 · thread ---------- */
.lv-msg { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid hsl(var(--border)); }
.lv-msg:last-child { border-bottom: 0; }
.lv-msg .mh { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.lv-msg .mh b { font-weight: var(--w-semibold); }
.lv-msg .mh small { color: hsl(var(--muted-foreground)); font-size: var(--text-small); }
.lv-msg .mb { margin-top: 3px; line-height: 1.55; overflow-wrap: anywhere; }
.lv-msg.orig { background: hsl(var(--muted) / .5); border: 1px solid hsl(var(--border)); border-radius: var(--r-card); padding: 10px 12px; }
.lv-msg.fail .mb { opacity: .7; }
.lv-att { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border: 1px solid hsl(var(--border)); border-radius: var(--r-control); background: #fff; font-size: var(--text-small); max-width: 100%; margin-top: 6px; margin-right: 6px; }
.lv-att .ico { width: 13px; height: 13px; color: hsl(var(--muted-foreground)); }
.lv-att span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-composer { border: 1px solid hsl(var(--input)); border-radius: var(--r-card); background: #fff; overflow: hidden; }
.lv-composer .ct { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid hsl(var(--border)); flex-wrap: wrap; }
.lv-composer .cb2 { padding: 10px 12px; min-height: 64px; color: hsl(var(--muted-foreground)); }
.lv-composer .cf { display: flex; align-items: center; gap: 8px; padding: 8px; border-top: 1px solid hsl(var(--border)); }
.lv-ai { border: 1px solid color-mix(in srgb, var(--steel) 30%, transparent); background: color-mix(in srgb, var(--steel) 4%, #fff); border-radius: var(--r-card); padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }

/* ---------- 15 · KPI tile + chart frame ---------- */
.lv-kpi { background: #fff; border: 1px solid hsl(var(--border)); border-radius: var(--r-card); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lv-kpi small { font: var(--w-medium) var(--text-small)/1.25 var(--font-title); color: hsl(var(--muted-foreground)); overflow-wrap: anywhere; }
.lv-kpi b { font: var(--w-semibold) 26px/1.1 var(--font-title); letter-spacing: -.02em; }
.lv-kpi .d { font-size: var(--text-small); color: hsl(var(--muted-foreground)); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lv-kpi .d .up { color: hsl(var(--success)); } .lv-kpi .d .dn { color: hsl(var(--destructive)); }
.lv-kpi svg.spark { width: 100%; height: 28px; }
.lv-kpi.bad b { color: hsl(var(--destructive)); }
.lv-kpi.stale { box-shadow: var(--e-rail-strong-warning); }
.lv-chart { background: #fff; border: 1px solid hsl(var(--border)); border-radius: var(--r-card); overflow: hidden; min-width: 0; }
.lv-chart .chh { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid hsl(var(--border)); flex-wrap: wrap; }
.lv-chart .chh h3 { font: var(--w-semibold) var(--text-card)/1.25 var(--font-title); }
.lv-chart .chh .r { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.lv-chart .chb { padding: 10px 14px 12px; }
.lv-chart svg { width: 100%; height: auto; display: block; }
.lv-leg { display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--text-small); color: hsl(var(--muted-foreground)); }
.lv-leg span { display: inline-flex; align-items: center; gap: 6px; }
.lv-leg i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* ---------- 16 · media: gallery, photo review, verdict (Pass / Fail fix) ---------- */
.lv-ph-img { position: relative; border-radius: var(--r-media); overflow: hidden; aspect-ratio: 3/4; background: var(--studio); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.lv-ph-img.sq { aspect-ratio: 1; }
.lv-ph-img .fab { position: absolute; inset: 0; }
.lv-ph-img .cap { position: absolute; left: 6px; bottom: 6px; right: 6px; display: flex; gap: 4px; align-items: center; }
.lv-gal { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 10px; }
.lv-tile { border: 1px solid hsl(var(--border)); border-radius: var(--r-card); background: #fff; overflow: hidden; display: flex; flex-direction: column; min-width: 0; position: relative; }
.lv-tile .tb2 { padding: 6px 8px; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lv-tile .tb2 b { font-weight: var(--w-medium); font-size: var(--text-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-tile .tb2 small { font-size: var(--text-11); color: hsl(var(--muted-foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-tile.sel { border-color: var(--steel); box-shadow: 0 0 0 2px color-mix(in srgb, var(--steel) 35%, transparent); }
.lv-tile .pick { position: absolute; top: 6px; left: 6px; width: 18px; height: 18px; border-radius: 4px; background: #fff; border: 1px solid hsl(var(--input)); display: grid; place-items: center; }
.lv-tile.sel .pick { background: var(--steel); border-color: var(--steel); color: #fff; }
.lv-tile .pick .ico { width: 12px; height: 12px; }
.lv-vt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.verdict { box-sizing: border-box; height: var(--verdict-h); padding: 0 var(--verdict-pad); border-radius: var(--r-control); border: 1px solid hsl(var(--border)); display: flex; align-items: center; justify-content: center; gap: 8px;
  font: var(--w-semibold) var(--text-btn)/1 var(--font-title); min-width: 0; overflow: hidden; cursor: pointer; }
.verdict .vi { display: grid; place-items: center; flex: none; }
.verdict .vi .ico { width: 15px; height: 15px; }
.verdict .vl { white-space: nowrap; flex: none; }
.verdict .vk { flex: 0 0 auto; margin-left: 2px; height: 18px; min-width: 18px; padding: 0 5px; box-sizing: border-box; display: grid; place-items: center; font: var(--w-medium) var(--text-10-5)/1 var(--font-code); border-radius: 4px; border: 1px solid currentColor; opacity: .75; }
.verdict.pass { background: color-mix(in srgb, hsl(var(--success)) 9%, #fff); color: hsl(var(--success)); border-color: hsl(var(--success) / .4); }
.verdict.fail { background: color-mix(in srgb, hsl(var(--destructive)) 7%, #fff); color: hsl(var(--destructive)); border-color: hsl(var(--destructive) / .35); }
.verdict.pass.on { background: hsl(var(--success)); color: #fff; border-color: hsl(var(--success)); }
.verdict.fail.on { background: hsl(var(--destructive)); color: #fff; border-color: hsl(var(--destructive)); }
.verdict.big { height: var(--verdict-h-big); font-size: 15px; }
.verdict[aria-disabled=true] { opacity: .45; cursor: not-allowed; }
.verdict.is-focus { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.lv-lb { background: #0F131B; border-radius: var(--r-frame); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) 300px; color: #E8EAEF; min-height: 420px; }
.lv-lb .stage { position: relative; display: grid; place-items: center; padding: 42px 56px 18px; min-width: 0; }
.lv-lb .stage .lv-ph-img { width: min(100%, 300px); }
.lv-lb .nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); color: #E8EAEF; }
.lv-lb .nav.l { left: 12px; } .lv-lb .nav.r { right: 12px; }
.lv-lb .nav .ico { width: 16px; height: 16px; }
.lv-lb .tbar { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; align-items: center; gap: 8px; font-size: var(--text-small); color: #AEB6C6; }
.lv-lb .tbar .r { margin-left: auto; display: flex; gap: 6px; }
.lv-lb .tbar kbd { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color: #C9CED8; }
.lv-lb .side { background: #fff; color: hsl(var(--foreground)); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* ---------- 17 · swatch picker (PT colour matrix) ---------- */
.lv-swg { display: grid; grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr)); gap: 6px; }
.lv-sw { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 4px; border-radius: var(--r-control); border: 1px solid transparent; }
.lv-sw i { display: block; height: 30px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.lv-sw b { font: var(--w-medium) var(--text-10-5)/1.1 var(--font-code); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-sw small { font-size: var(--text-10); color: hsl(var(--muted-foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-sw.on { border-color: var(--steel); background: hsl(var(--accent)); }
.lv-sw.ret { opacity: .5; }
.lv-sw.ret i { background-image: linear-gradient(135deg, transparent 46%, rgba(255,255,255,.85) 46% 54%, transparent 54%) !important; }

/* ---------- 18 · grids: price group, matrix editor, measurement grid ---------- */
.lv-grid { border-collapse: separate; border-spacing: 0; table-layout: fixed; background: #fff; font-variant-numeric: tabular-nums; }
.lv-grid th, .lv-grid td { height: var(--row); border-right: 1px solid hsl(var(--border)); border-bottom: 1px solid hsl(var(--border)); padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-body); }
.lv-grid th { background: hsl(var(--muted)); font: var(--w-semibold) var(--text-small)/1.2 var(--font-title); color: hsl(var(--muted-foreground)); text-align: left; position: sticky; top: 0; z-index: 2; }
.lv-grid th.num, .lv-grid td.num { text-align: right; }
.lv-grid .fz { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 6px 0 8px -6px var(--sticky-edge); }
.lv-grid th.fz { z-index: 3; background: hsl(var(--muted)); }
.lv-grid tr.grp td { background: hsl(var(--muted) / .7); font: var(--w-semibold) var(--text-small)/1 var(--font-title); }
.lv-grid td.cell { width: var(--cell-w); }
.lv-grid td.cur { box-shadow: inset 0 0 0 2px var(--steel); background: #fff; }
.lv-grid td.dirty { background: hsl(var(--changed) / .1); box-shadow: inset 2px 0 0 hsl(var(--changed)); }
.lv-grid td.saved { background: hsl(var(--success) / .08); }
.lv-grid td.rej { background: hsl(var(--destructive) / .06); box-shadow: inset 0 0 0 1px hsl(var(--destructive) / .6); color: hsl(var(--destructive)); }
.lv-grid td.ro { color: hsl(var(--muted-foreground)); background: hsl(var(--muted) / .35); }
.lv-grid td.was small, .lv-grid td .was { display: block; font-size: var(--text-10); color: hsl(var(--muted-foreground)); text-decoration: line-through; line-height: 1; }
.lv-grid td.two { line-height: 1.1; }
.lv-grid .cur-b { font: var(--w-semibold) var(--text-10)/14px var(--font-ui); padding: 0 4px; border-radius: 3px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); margin-left: 4px; }
.lv-grid td.chg { color: hsl(var(--changed)); font-weight: var(--w-semibold); background: hsl(var(--changed) / .08); }
.lv-grid td.theirs { box-shadow: inset 0 0 0 1px hsl(var(--warning) / .7); background: hsl(var(--warning) / .08); }

/* ---------- 19 · gantt ---------- */
.lv-gantt { display: grid; grid-template-columns: 220px minmax(0, 1fr); border: 1px solid hsl(var(--border)); border-radius: var(--r-card); overflow: hidden; background: #fff; }
.lv-gantt .gl { border-right: 1px solid hsl(var(--border)); min-width: 0; }
.lv-gantt .gh { height: calc(var(--row) + 8px); display: flex; align-items: center; padding: 0 10px; background: hsl(var(--muted)); border-bottom: 1px solid hsl(var(--border)); font: var(--w-semibold) var(--text-small)/1.2 var(--font-title); color: hsl(var(--muted-foreground)); gap: 8px; }
.lv-gantt .gr { height: var(--row); display: grid; grid-template-columns: 48px minmax(0, 1fr) 44px; align-items: center; gap: 6px; padding: 0 10px; border-bottom: 1px solid hsl(var(--border)); font-size: var(--text-body); }
.lv-gantt .gr span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-gantt .gt { position: relative; min-width: 0; overflow: hidden; }
.lv-gantt .days { display: grid; grid-template-columns: repeat(var(--days, 21), minmax(0, 1fr)); height: calc(var(--row) + 8px); background: hsl(var(--muted)); border-bottom: 1px solid hsl(var(--border)); }
.lv-gantt .days span { display: flex; flex-direction: column; align-items: center; justify-content: center; font: var(--w-medium) var(--text-10)/1.1 var(--font-ui); color: hsl(var(--muted-foreground)); border-left: 1px solid hsl(var(--border) / .7); }
.lv-gantt .days span.today { color: var(--steel); font-weight: var(--w-semibold); background: hsl(var(--accent)); }
.lv-gantt .days span.we { background: hsl(var(--muted) / .6); }
.lv-gantt .lane { position: relative; height: var(--row); border-bottom: 1px solid hsl(var(--border)); background-image: repeating-linear-gradient(90deg, hsl(var(--border) / .55) 0 1px, transparent 1px calc(100% / var(--days, 21))); }
.lv-gantt .bar { position: absolute; top: 50%; transform: translateY(-50%); height: 14px; border-radius: 3px; background: var(--ph, #479AFF); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.lv-gantt .bar.lbl { height: 18px; color: #0E1729; font: var(--w-medium) var(--text-10)/18px var(--font-code); padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-gantt .due { position: absolute; top: 4px; bottom: 4px; width: 2px; background: hsl(var(--destructive)); border-radius: 1px; }
.lv-gantt .now { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--steel); }

/* ---------- 20 · document / print job ---------- */
.lv-doc { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid hsl(var(--border)); border-radius: var(--r-card); background: #fff; min-width: 0; flex-wrap: wrap; }
.lv-doc .di2 { width: 30px; height: 36px; border-radius: 4px; background: hsl(var(--muted)); display: grid; place-items: center; color: hsl(var(--muted-foreground)); flex: none; position: relative; }
.lv-doc .di2 .ico { width: 15px; height: 15px; }
.lv-doc .b { flex: 1; min-width: 0; }
.lv-doc .b b { display: block; font-weight: var(--w-medium); overflow-wrap: anywhere; }
.lv-doc .b small { color: hsl(var(--muted-foreground)); font-size: var(--text-small); }
.lv-doc.err { border-color: hsl(var(--destructive) / .4); }
.lv-doc.exp { border-style: dashed; }

/* ---------- 21 · split pane ---------- */
.lv-split { display: grid; grid-template-columns: var(--split-l, 420px) 9px minmax(0, 1fr); border: 1px solid hsl(var(--border)); border-radius: var(--r-card); overflow: hidden; background: #fff; min-height: 300px; }
.lv-split .pane { min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.lv-split .hdl { background: hsl(var(--muted)); border-left: 1px solid hsl(var(--border)); border-right: 1px solid hsl(var(--border)); display: grid; place-items: center; cursor: col-resize; }
.lv-split .hdl i { width: 3px; height: 28px; border-radius: 2px; background: hsl(var(--secondary-border)); display: block; }
.lv-split .hdl.drag { background: hsl(var(--accent)); }
.lv-split .hdl.drag i { background: var(--steel); }

/* ---------- 22 · bilingual field pair (the four-label pattern) ---------- */
.lv-bi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; }
.lv-bi .bh { font: var(--w-semibold) var(--text-label)/1.3 var(--font-title); display: flex; align-items: center; gap: 6px; }
.lv-bi .bh .lg { font: var(--w-semibold) var(--text-10)/15px var(--font-ui); padding: 0 4px; border-radius: 3px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.lv-bi .miss { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-11); color: hsl(var(--warning)); }
.lv-bi4 { display: grid; grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr); gap: 0; border: 1px solid hsl(var(--border)); border-radius: var(--r-card); overflow: hidden; background: #fff; }
.lv-bi4 > * { padding: 7px 10px; border-bottom: 1px solid hsl(var(--border)); min-width: 0; }
.lv-bi4 > *:nth-last-child(-n+3) { border-bottom: 0; }
.lv-bi4 .h { background: hsl(var(--muted)); font: var(--w-semibold) var(--text-small)/1.2 var(--font-title); color: hsl(var(--muted-foreground)); }
.lv-bi4 .rl2 { font: var(--w-semibold) var(--text-small)/1.25 var(--font-title); display: flex; align-items: center; }

/* ---------- 23 · json / code viewer ---------- */
.lv-json { background: #0F131B; color: #D8DEE9; border-radius: var(--r-card); overflow: hidden; font: var(--w-regular) var(--text-code)/1.6 var(--font-code); }
.lv-json .jh { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #161B25; color: #AEB6C6; font-family: var(--font-ui); font-size: var(--text-small); flex-wrap: wrap; }
.lv-json .jh .r { margin-left: auto; display: flex; gap: 6px; }
.lv-json .jh .jb { height: 24px; display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border-radius: var(--r-control); border: 1px solid rgba(255,255,255,.14); color: #D8DEE9; }
.lv-json .jh .jb .ico { width: 12px; height: 12px; }
.lv-json pre { padding: 10px 12px; white-space: pre; overflow: hidden; margin: 0; }
.lv-json pre.wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.lv-json .k { color: #9FB4E2; } .lv-json .s { color: #A8D5B5; } .lv-json .n { color: #F2C98A; } .lv-json .b { color: #E6A0C4; } .lv-json .c { color: #6B7489; }
.lv-json .mask { background: rgba(255,255,255,.08); border-radius: 3px; padding: 0 4px; color: #AEB6C6; }

/* ---------- 24 · cron builder ---------- */
.lv-cron5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.lv-cron5 > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lv-cron5 small { font: var(--w-medium) var(--text-11)/1.2 var(--font-title); color: hsl(var(--muted-foreground)); }
.lv-cron5 .input { font-family: var(--font-code); text-align: center; }
.lv-human { padding: 8px 12px; border-radius: var(--r-card); background: hsl(var(--accent)); border: 1px solid color-mix(in srgb, var(--steel) 25%, transparent); display: flex; flex-direction: column; gap: 3px; }
.lv-human b { font-weight: var(--w-semibold); }
.lv-human small { color: hsl(var(--muted-foreground)); font-size: var(--text-small); }

/* ---------- 25 · QR display ---------- */
.lv-qr { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 14px; padding: 12px; border: 1px solid hsl(var(--border)); border-radius: var(--r-card); background: #fff; align-items: start; }
.lv-qr svg { width: 132px; height: 132px; border-radius: 4px; box-shadow: 0 0 0 1px hsl(var(--border)); background: #fff; }
.lv-qr .b { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.kit-m .lv-qr { grid-template-columns: minmax(0, 1fr); justify-items: center; }

/* ---------- 26 · sortable list + tree ---------- */
.lv-sl { border: 1px solid hsl(var(--border)); border-radius: var(--r-card); background: #fff; overflow: hidden; }
.lv-sli { display: flex; align-items: center; gap: 10px; min-height: var(--row); padding: 0 10px; border-bottom: 1px solid hsl(var(--border)); min-width: 0; }
.lv-sli:last-child { border-bottom: 0; }
.lv-sli .gp { color: hsl(var(--muted-foreground)); cursor: grab; display: grid; }
.lv-sli .gp .ico { width: 14px; height: 14px; }
.lv-sli .no { font: var(--w-medium) var(--text-11)/1 var(--font-code); color: hsl(var(--muted-foreground)); width: 20px; text-align: right; }
.lv-sli .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-sli.drag { box-shadow: 0 10px 24px -12px rgba(14,23,41,.45), 0 0 0 1px var(--steel); background: #fff; position: relative; z-index: 2; transform: translateX(6px); }
.lv-sli.ghost { background: hsl(var(--accent)); box-shadow: inset 0 2px 0 var(--steel); }
.lv-sli.ghost * { visibility: hidden; }
.lv-sli.kb { box-shadow: inset 0 0 0 2px hsl(var(--ring)); }
.lv-tree { display: flex; flex-direction: column; gap: 1px; }
.lv-tn { display: flex; align-items: center; gap: 6px; min-height: calc(var(--row) - 2px); padding: 0 8px 0 calc(8px + var(--lvl, 0) * 18px); border-radius: var(--r-control); min-width: 0; }
.lv-tn .tw2 { width: 14px; display: grid; place-items: center; color: hsl(var(--muted-foreground)); flex: none; }
.lv-tn .tw2 .ico { width: 12px; height: 12px; }
.lv-tn .ico.f { width: 15px; height: 15px; color: hsl(var(--muted-foreground)); }
.lv-tn .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-tn .c { font-size: var(--text-11); color: hsl(var(--muted-foreground)); }
.lv-tn.on { background: hsl(var(--accent)); box-shadow: inset 2px 0 0 var(--steel); font-weight: var(--w-medium); }
.lv-tn.off .t { color: hsl(var(--muted-foreground)); text-decoration: line-through; }

/* ---------- 27 · rich text ---------- */
.lv-rte { border: 1px solid hsl(var(--input)); border-radius: var(--r-card); background: #fff; overflow: hidden; }
.lv-rte .tb3 { display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .5); flex-wrap: wrap; }
.lv-rte .tb3 span { min-width: 28px; height: 28px; display: grid; place-items: center; border-radius: var(--r-control); color: hsl(var(--foreground)); font: var(--w-semibold) var(--text-body)/1 var(--font-ui); padding: 0 4px; }
.lv-rte .tb3 span.on { background: hsl(var(--accent)); box-shadow: inset 0 0 0 1px hsl(var(--secondary-border)); }
.lv-rte .tb3 .vs { width: 1px; min-width: 1px; height: 18px; background: hsl(var(--border)); padding: 0; margin: 0 4px; }
.lv-rte .tb3 .ico { width: 14px; height: 14px; }
.lv-rte .ed { padding: 12px 14px; min-height: 110px; line-height: 1.6; overflow-wrap: anywhere; }
.lv-rte .ed h4 { font: var(--w-semibold) var(--text-section)/1.3 var(--font-title); margin-bottom: 6px; }
.lv-rte .ed p + p { margin-top: 8px; }
.lv-rte .ed a { color: var(--steel); }
.lv-rte .ed ul { margin: 6px 0 0 18px; }
.lv-rte .ed .imgph { display: block; height: 70px; border-radius: 4px; background: var(--studio); margin-top: 8px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); position: relative; }
.lv-rte .ed .imgph .lv-prog { position: absolute; left: 10px; right: 10px; bottom: 10px; }
.lv-rte .ft { display: flex; gap: 10px; padding: 6px 10px; border-top: 1px solid hsl(var(--border)); font-size: var(--text-11); color: hsl(var(--muted-foreground)); }
.lv-rte.focus { border-color: hsl(var(--ring)); box-shadow: var(--focus-ring); }
.lv-rte.err { border-color: hsl(var(--destructive)); }

/* ---------- 28 · kit page helpers (specimen grid labels, compare columns) ---------- */
.kx-cmp { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 16px; }
.kit-m .kx-cmp { grid-template-columns: minmax(0, 1fr); }
.kx-cell { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kx-k { font: var(--w-medium) var(--text-micro)/1.2 var(--font-code); color: hsl(var(--muted-foreground)); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kx-k b { color: hsl(var(--foreground)); font-weight: var(--w-semibold); }
.kx-pane { border: 1px dashed hsl(var(--border)); border-radius: var(--r-card); padding: 12px; background: hsl(var(--background)); min-width: 0; }
.kx-pane.flush { padding: 0; overflow: hidden; }
.kx-pane.white { background: #fff; }
.kx-sgrid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 16px; }
.kit-m .kx-sgrid { grid-template-columns: minmax(0, 1fr); }
.kx-ctr { display: grid; grid-template-columns: 220px minmax(0, 1fr); border: 1px solid hsl(var(--border)); border-radius: var(--r-card); overflow: hidden; background: #fff; font-size: 13px; }
.kx-ctr > * { padding: 8px 12px; border-bottom: 1px solid hsl(var(--border)); min-width: 0; overflow-wrap: anywhere; }
.kx-ctr > *:nth-last-child(-n+2) { border-bottom: 0; }
.kx-ctr > dt { font: 600 12px/1.3 var(--font-title); color: hsl(var(--muted-foreground)); background: hsl(var(--muted) / .6); }
.kx-ctr code { font-size: 11.5px; background: hsl(var(--muted)); padding: 0 4px; border-radius: 3px; }
.kit-m .kx-ctr { grid-template-columns: minmax(0, 1fr); }
.kit-m .kx-ctr > dt { border-bottom: 0; padding-bottom: 2px; }
.kx-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.kx-bucket { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-chip); font: 600 11.5px/1 var(--font-title); }
.kx-bucket.f1 { background: color-mix(in srgb, var(--steel) 12%, #fff); color: var(--steel); }
.kx-bucket.miss { background: hsl(var(--warning) / .12); color: hsl(var(--warning)); }
.kx-bucket.asis { background: hsl(var(--muted)); color: hsl(var(--neutral)); }
.kx-note { font-size: 12px; color: hsl(var(--muted-foreground)); line-height: 1.5; }
.kx-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -8px 0 24px; font-size: 12px; color: hsl(var(--muted-foreground)); }
.kx-bar .lv-dseg span { cursor: pointer; }

.lv-corner::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 6px; pointer-events: none; opacity: var(--tape-opacity); background:
  repeating-linear-gradient(90deg, color-mix(in srgb, var(--tape-color) 55%, transparent) 0 1px, transparent 1px var(--tape-minor)) bottom/100% 3px no-repeat,
  repeating-linear-gradient(90deg, var(--tape-color) 0 1px, transparent 1px var(--tape-major)) bottom/100% var(--tape-h) no-repeat; }
.lv-side .lv-si .cv.open { transform: rotate(180deg); }
.lv-vt.stack { grid-template-columns: minmax(0, 1fr); }
.lv-jr .s a { display: inline-flex; align-items: center; gap: 3px; }
.lv-jr .s a .ico { width: 12px; height: 12px; }

/* ---------- 29 · grey-ground corrections: brand-005 painted controls with --background (white in DTC). On the Laravel grey
   ground they must stay white (= --card), so the delta does not turn every input grey. ---------- */
.field, .input { background: hsl(var(--card)); }
.field[aria-disabled=true], .input[disabled] { background: hsl(var(--muted)); }
.seg > [aria-checked=true], .seg > [aria-pressed=true], .seg > .on { background: hsl(var(--card)); }
.switch::after { background: hsl(var(--card)); }
.help-q, .p-bar { background: hsl(var(--card)); }
.field > .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ===== M01 v2 · wide Jobs + notification dropdowns and their side sheets (kit v2, 2026-10-18, TRUTH-JOBS §7) ===== */
.lv-jm { width: min(var(--hmenu-jobs-w), calc(100vw - 32px)); }
.lv-nm { width: min(var(--hmenu-notif-w), calc(100vw - 32px)); }
.lv-jm, .lv-nm { max-height: var(--dropdown-max-h); display: flex; flex-direction: column; text-align: left; }
.lv-jm .hh, .lv-nm .hh { align-items: center; border-bottom: 0; padding: 10px 14px 6px; flex: none; }
.lv-jm .hh .a, .lv-nm .hh .a, .lv-xs .xs-h { display: flex; align-items: center; gap: 2px; }
.lv-jm .ib, .lv-nm .ib, .lv-xs .ib, .lv-nx .ib { width: 26px; height: 26px; display: inline-grid; place-items: center; border-radius: var(--r-control); color: hsl(var(--muted-foreground)); }
.lv-jm .ib:hover, .lv-nm .ib:hover, .lv-xs .ib:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.lv-jm .ib .ico, .lv-nm .ib .ico, .lv-xs .ib .ico, .lv-nx .ib .ico { width: 15px; height: 15px; }
.lv-jm .hf, .lv-nm .hf { flex: none; padding: 9px 14px; gap: 16px; }
.lv-nm .hf .r { margin-left: auto; display: inline-flex; }
.lv-hmenu.full { width: 100%; max-height: none; flex: 1; min-height: 0; box-shadow: none; border-radius: 0; }
.lk { display: inline-flex; align-items: center; gap: 4px; color: var(--steel); font-weight: var(--w-medium); font-size: var(--text-small); text-decoration: none; cursor: pointer; white-space: nowrap; }
.lk .ico { width: 13px; height: 13px; }
/* filter strip: state tabs with counts + type select */
.lv-ddf { display: flex; align-items: center; gap: 8px; padding: 2px 14px 8px; flex: none; min-width: 0; border-bottom: 1px solid hsl(var(--border)); }
.lv-ddf .tbs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.lv-ddf .tb { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: var(--r-pill); font-size: var(--text-small); font-weight: var(--w-medium); color: hsl(var(--muted-foreground)); white-space: nowrap; cursor: pointer; }
.lv-ddf .tb i { font-style: normal; font: var(--w-semibold) var(--text-10-5)/1 var(--font-ui); color: hsl(var(--muted-foreground)); }
.lv-ddf .tb.on { background: hsl(var(--accent)); color: hsl(var(--foreground)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--steel) 40%, transparent); }
.lv-ddf .tb.bad i { color: hsl(var(--destructive)); }
.lv-ddf .ty { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 1px solid hsl(var(--border)); border-radius: var(--r-control); font-size: var(--text-small); white-space: nowrap; background: #fff; }
.lv-ddf .ty .ico { width: 12px; height: 12px; color: hsl(var(--muted-foreground)); }
/* scroll body + sticky group heads */
.lv-ddb { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 4px; }
.lv-ddb > .lv-banner { margin: 8px 14px 0; }
.lv-dg { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 10px 14px 4px; background: #fff; font: var(--w-semibold) var(--text-small)/1.2 var(--font-title); color: hsl(var(--foreground)); }
.lv-dg i { font-style: normal; color: hsl(var(--muted-foreground)); font-weight: var(--w-medium); }
.lv-dg.att { color: hsl(var(--destructive)); }
/* job row: 3 lines */
.lv-jx { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 4px 10px; padding: 8px 14px 9px; align-items: start; }
.lv-jx + .lv-jx { box-shadow: inset 0 1px 0 hsl(var(--border) / .7); }
.lv-jx:hover, .lv-jx.sel { background: hsl(var(--muted) / .55); }
.lv-jx .d { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; background: var(--steel); }
.lv-jx.queue .d { background: hsl(var(--muted-foreground)); opacity: .55; }
.lv-jx.att .d { background: hsl(var(--destructive)); }
.lv-jx.done .d { background: hsl(var(--success)); }
.lv-jx.run .d { box-shadow: 0 0 0 3px color-mix(in srgb, var(--steel) 22%, transparent); }
.lv-jx .mn { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lv-jx .l1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lv-jx .l1 b { font-weight: var(--w-semibold); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-jx .jt { flex: none; font: var(--w-medium) var(--text-10-5)/18px var(--font-ui); padding: 0 6px; border-radius: var(--r-chip); border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); white-space: nowrap; max-width: 46%; overflow: hidden; text-overflow: ellipsis; }
.lv-jx .l2 { font-size: var(--text-small); color: hsl(var(--muted-foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-jx .l3 { display: flex; align-items: center; gap: 10px; font-size: var(--text-small); color: hsl(var(--muted-foreground)); min-width: 0; }
.lv-jx .l3 .bar { flex: 1 1 auto; max-width: 260px; height: 5px; border-radius: 3px; background: hsl(var(--foreground) / .09); overflow: hidden; display: flex; }
.lv-jx .l3 .bar i { display: block; height: 100%; background: var(--steel); }
.lv-jx.done .l3 .bar i, .lv-jx.att .l3 .bar i { background: hsl(var(--success)); }
.lv-jx .l3 .bar u { display: block; height: 100%; background: hsl(var(--destructive)); }
.lv-jx .l3 .n { white-space: nowrap; color: hsl(var(--foreground)); }
.lv-jx .l3 .n b { font-weight: var(--w-semibold); }
.lv-jx .l3 .n em { font-style: normal; color: hsl(var(--destructive)); font-weight: var(--w-medium); }
.lv-jx .l3 .m { white-space: nowrap; margin-left: auto; font-variant-numeric: tabular-nums; }
.lv-jx .l3.t .n { color: hsl(var(--muted-foreground)); }
.lv-jx.att .l3.t .n { color: hsl(var(--destructive)); }
.lv-jx .mp { font-size: var(--text-small); color: hsl(var(--foreground)); background: hsl(var(--muted) / .6); border-radius: var(--r-control); padding: 4px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-ui), var(--font-cjk); }
.lv-jx .ra { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.lv-jx .ra time { font-size: var(--text-small); color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
.lv-jx .ac { display: flex; flex-wrap: wrap; gap: 4px 16px; padding-top: 1px; }
/* error excerpt: 2-line clamp, More expands in place (native details) */
.je, .nb { min-width: 0; }
.je summary, .nb summary { list-style: none; cursor: pointer; display: block; }
.je summary::-webkit-details-marker, .nb summary::-webkit-details-marker { display: none; }
.je { background: hsl(var(--destructive) / .06); border-radius: var(--r-control); padding: 5px 8px; }
.je .x { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: var(--w-regular) var(--text-11)/1.45 var(--font-code); color: hsl(var(--destructive)); overflow-wrap: anywhere; }
.je .mo, .je .le, .nb .mo, .nb .le { font-size: var(--text-11); font-weight: var(--w-medium); color: var(--steel); }
.je .le, .nb .le, .je[open] .mo, .nb[open] .mo { display: none; }
.je[open] .le, .nb[open] .le { display: inline; }
.je[open] .x, .nb[open] .x { -webkit-line-clamp: unset; display: block; }
.je pre { margin-top: 6px; max-height: 160px; overflow: auto; font: var(--w-regular) var(--text-10-5)/1.5 var(--font-code); color: hsl(var(--foreground) / .8); white-space: pre-wrap; overflow-wrap: anywhere; }
/* notification row */
.lv-nx { display: grid; grid-template-columns: 28px minmax(0, 1fr) 26px; gap: 10px; padding: 9px 14px; align-items: start; position: relative; }
.lv-nx + .lv-nx { box-shadow: inset 0 1px 0 hsl(var(--border) / .7); }
.lv-nx.un { background: color-mix(in srgb, hsl(var(--accent)) 45%, #fff); }
.lv-nx.hov { background: hsl(var(--muted) / .7); }
.lv-nx .i { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.lv-nx .i .ico { width: 15px; height: 15px; }
.lv-nx .i.bad { background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); }
.lv-nx .mn { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lv-nx .l1 { display: flex; align-items: baseline; gap: 8px; }
.lv-nx .l1 b { font-weight: var(--w-semibold); font-size: var(--text-small); }
.lv-nx .l1 time { margin-left: auto; font-size: var(--text-small); color: hsl(var(--muted-foreground)); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lv-nx .nb .x { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; line-height: 1.45; font-family: var(--font-ui), var(--font-cjk); }
.lv-nx .lks { display: flex; gap: 12px; flex-wrap: wrap; }
.lv-nx .u { display: flex; justify-content: center; padding-top: 6px; }
.lv-nx.un .u::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--steel); }
.lv-nx.hov .u { padding-top: 0; }
.lv-nx.hov .u::before { display: none; }
.lv-nx .ha { position: absolute; right: 10px; top: 6px; display: flex; gap: 2px; background: #fff; border-radius: var(--r-control); box-shadow: 0 0 0 1px hsl(var(--border)), 0 4px 10px -6px rgba(14,23,41,.35); }
/* header strip used by the specimens: the menu hangs from its own button */
.lv-hang { position: relative; min-height: calc(var(--dropdown-max-h) + 70px); }
.lv-hang .lv-top { border-radius: var(--r-control); }
/* full side sheets ("Open all") */
.lv-xs-wrap { position: relative; display: flex; justify-content: flex-end; background: var(--scrim); border-radius: var(--r-card); padding: 0; min-height: 760px; overflow: hidden; }
.lv-xs { background: #fff; display: flex; flex-direction: column; height: 760px; box-shadow: -18px 0 48px -20px rgba(14,23,41,.55); min-width: 0; }
.lv-xs.xl { width: min(var(--sheet-w-xl), calc(100% - 48px)); }
.lv-xs.lg { width: min(var(--sheet-w-lg), calc(100% - 48px)); }
.lv-xs .xs-h { display: flex; align-items: center; gap: 10px; padding: 12px 16px 8px; flex: none; }
.lv-xs .xs-h b { font: var(--w-semibold) var(--text-18)/1.2 var(--font-title); margin-right: auto; }
.lv-xs .xs-b { flex: 1; min-height: 0; display: grid; grid-template-columns: 360px minmax(0, 1fr); }
.lv-xs .xs-b.one { display: block; overflow-y: auto; }
.lv-xs .xl-l { overflow-y: auto; border-right: 1px solid hsl(var(--border)); }
.lv-xr { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 14px; cursor: pointer; }
.lv-xr .d { width: 7px; height: 7px; border-radius: 50%; background: var(--steel); }
.lv-xr.queue .d { background: hsl(var(--muted-foreground)); opacity: .55; } .lv-xr.att .d { background: hsl(var(--destructive)); } .lv-xr.done .d { background: hsl(var(--success)); }
.lv-xr .mn { min-width: 0; } .lv-xr b, .lv-xr small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-xr b { font-weight: var(--w-medium); } .lv-xr small { color: hsl(var(--muted-foreground)); font-size: var(--text-11); }
.lv-xr time { font-size: var(--text-11); color: hsl(var(--muted-foreground)); }
.lv-xr.on { background: hsl(var(--accent)); box-shadow: inset 2px 0 0 var(--steel); }
.lv-xm { padding: 4px 14px 8px 30px; font-size: var(--text-11); color: var(--steel); }
.lv-xs .xd { overflow-y: auto; padding: 14px 18px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lv-xs .xh { display: flex; align-items: flex-start; gap: 12px; }
.lv-xs .xh > div:first-child { flex: 1; min-width: 0; }
.lv-xs .xh h3 { font: var(--w-semibold) var(--text-card)/1.3 var(--font-title); }
.lv-xs .xh small { color: hsl(var(--muted-foreground)); font-size: var(--text-small); }
.lv-xs .xa { display: flex; gap: 6px; flex: none; }
.lv-xs h4 { font: var(--w-semibold) var(--text-small)/1.2 var(--font-title); color: hsl(var(--muted-foreground)); margin-top: 4px; }
.lv-kv { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 5px 12px; font-size: var(--text-body); }
.lv-kv dt { color: hsl(var(--muted-foreground)); font-size: var(--text-small); padding-top: 1px; }
.lv-kv dd { min-width: 0; overflow-wrap: anywhere; }
.lv-kv dd small { color: hsl(var(--muted-foreground)); margin-left: 6px; }
.lv-kv code { font-size: var(--text-11); }
.lv-xs .xe { font: var(--w-regular) var(--text-11)/1.5 var(--font-code); white-space: pre-wrap; overflow-wrap: anywhere; background: hsl(var(--destructive) / .05); color: hsl(var(--foreground)); border-radius: var(--r-control); padding: 8px 10px; max-height: 220px; overflow: auto; }
/* phone: the whole menu is a full-screen sheet */
.lv-pfull { display: flex; flex-direction: column; }
.lv-pfull .lv-hmenu.full { border: 0; }
.kit-m .lv-jx .ac { gap: 4px 18px; }
.kit-m .lv-jx .lk, .kit-m .lv-nx .lk { min-height: 32px; font-size: 13px; }
.kit-m .lv-jx .jt { max-width: 40%; }
.kit-m .lv-ddf .ty { display: none; }
.lv-xs .xd > * { flex: none; }
.lv-kv dt, .lv-kv dd { border: 0; padding: 0; margin: 0; background: none; }
.lv-nx .nb[open] .x { -webkit-line-clamp: unset; display: block; }
.lv-hmenu.full > .hh { display: none; }
.lv-hmenu.full > .lv-ddf { padding-top: 10px; }
.kit-m .lv-jx .l3 { flex-wrap: wrap; row-gap: 3px; }
.kit-m .lv-jx .l3 .bar { flex: 1 1 100%; max-width: none; }
.kit-m .lv-jx .l3 .m { margin-left: 0; }
.kit-m .lv-jx .l3 .m:not(:empty)::before { content: "· "; }
div.je .x { display: block; -webkit-line-clamp: unset; }
.lv-nx.hov .l1 time { visibility: hidden; }
.kit-m .lv-nx div.nb .x { -webkit-line-clamp: unset; display: block; }
.kit-m .lv-nx .ha { display: none; }
.kit-m .lv-nx.hov .u::before { display: block; }
.kit-m .lv-nx.hov .l1 time { visibility: visible; }