/* ============================================================================================
   Captivate One kit, v0.3 (2026-10-07: brand wave logo in the app bar)
   One shared look for every Captivate app until each one becomes a Captivate One module.

   Palette, fonts and radii are Captivate One's CURRENT look, taken from
   Project Code/Captivate CRM/src/styles.css (the "Architectural Technology" theme kit):
   charcoal + bronze dark theme by default, warm paper light theme, high-contrast field mode.
   On top of that, Rene's 2026-10-07 decisions:
     - larger, easier-to-read text: body 15px (16px on touch, 17px in field density); NO text under 13px
     - less on each screen: taller rows, roomier sections, bigger controls
   Changes made on purpose, all small and listed in ROLLOUT-PLAN.md ("What changes from Captivate One today"):
     - --faint is lifted a step in both themes so labels pass WCAG AA (was 4.0:1 dark, 3.55:1 light)
     - light-theme status colors (--good --warn --crit --info) darkened a step: 5.2:1 or better on both surfaces
     - new --border-input for input, button, chip and seg edges (3:1 or better; --border-strong was 1.7:1)
     - small labels use --muted, not --faint
     - "Match system" now also switches the chart colors (Captivate One has a bug here)
     - no gradients anywhere: the select chevron is an SVG and loaders pulse instead of shimmer
     - every control is 44px or taller on touch screens and in field density
   v0.2 (same day): review fixes. Content sits on --surface; light AA colors; --border-input; any-pointer
   44px targets; field-density phone headings; print block completed (light values for every token, 9.5pt
   floor, app bar prints without its actions); Budget and Inventory aliases; 100dvh.

   HOW TO USE
   1. Copy this file into the app (do not link it from another pages.dev site: Access and the
      Cloudflare move both break cross-origin links). Keep the version line above.
   2. Fonts: add this <link> in <head> (same as Captivate CRM/index.html line 17):
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=IBM+Plex+Sans+Condensed:wght@400;500;600&display=swap">
      Offline apps (Tune Up, Discovery) inline the woff2 files instead; system fonts are the fallback.
   3. Theme before first paint (put in <head>, before the stylesheet):
        <meta name="color-scheme" content="dark light"><meta name="theme-color" content="#111315">
        <script>try{var t=localStorage.getItem('cap_theme_v2');document.documentElement.dataset.theme=
          (t==='light'||t==='system')?t:'dark'}catch(e){document.documentElement.dataset.theme='dark'}</script>
      Field apps that default to light set data-theme="light" instead (decision for Rene).
   4. Density: nothing for office apps; <body data-density="field"> for phones/iPads in the field.
   5. The file has five parts between marker comments so a copy step can take only what an app
      can absorb safely:
        KIT:TOKENS      always safe (custom properties only)
        KIT:BASE        element defaults (body, headings, links, focus); safe for most apps
        KIT:ALIASES     optional bridge from old variable names to the new tokens (read its note:
                        aliases on body beat an app's own :root variables of the same name)
        KIT:COMPONENTS  class rules using Captivate One's class names. These collide with some
                        apps' own classes; read the app's section in ROLLOUT-PLAN.md first.
        KIT:PRINT       light paper under @media print, whatever the screen theme
   6. JS that needs a token reads it from body, not the root:
        getComputedStyle(document.body).getPropertyValue('--accent')
   ============================================================================================ */


/* ==== KIT:TOKENS ============================================================================ */

/* ---- Dark (default). Same values as Captivate One except --faint (contrast fix). */
:root{
  /* surfaces: app background > working surface > secondary > raised; overlay for popovers and drawers */
  --ground:#111315; --surface:#181B1E; --surface-2:#202428; --raised:#262A2F; --overlay:#1B1E22;
  --inset:#131517; --hover:#1E2226; --rule:#262A2F;
  --border:#30363B; --border-strong:#3B4248;
  --border-input:#646C73;   /* edges of inputs, buttons, chips, seg: 3.2:1 on --surface (border-strong is 1.7:1, fine for rules, too faint for a control) */
  /* text */
  --text:#F4F1EA; --muted:#9EA5AA; --faint:#838B90;           /* faint was #737B80 (4.0:1); now 5.0:1 */
  /* bronze accent, used sparingly: primary action, selected state, focus, important numbers */
  --accent:#B89A68; --accent-hi:#C9AD7C; --accent-ink:#16140F; --accent-text:#B89A68;
  --accent-soft:rgba(184,154,104,.12); --accent-line:rgba(184,154,104,.45); --accent-soft-ink:#D8C299;
  --selected:rgba(184,154,104,.10); --selected-ink:#E4D0A8; --link:#D0BA90;
  /* status colors: only for real status, never decoration */
  --good:#7FB48F; --good-bg:rgba(127,180,143,.11); --good-line:rgba(127,180,143,.38);
  --info:#86A8C4; --info-bg:rgba(134,168,196,.11); --info-line:rgba(134,168,196,.38);
  --warn:#E0A33C; --warn-bg:rgba(224,163,60,.12); --warn-line:rgba(224,163,60,.44);
  --crit:#DC7166; --crit-bg:rgba(220,113,102,.12); --crit-line:rgba(220,113,102,.44);
  /* depth: no resting shadows; popovers and drawers only */
  --shadow:none; --pop-shadow:0 18px 44px rgba(0,0,0,.55); --drawer-shadow:-28px 0 64px rgba(0,0,0,.55);
  --scrim:rgba(6,7,8,.62); --skel:#23272B;
  /* charts: bronze first, quiet tones after; split = stacked-bar series */
  --chart-1:#B89A68; --chart-2:#7F9DB9; --chart-3:#8AA58F; --chart-4:#A38DB0; --chart-5:#8C959B; --chart-6:#D1C29F;
  --split-1:#B48637; --split-2:#346FA9; --split-3:#1AA598; --split-4:#7B5A9F; --split-5:#5D7627; --split-other:#5E666B;

  /* fonts: Geist for reading, condensed Plex for labels and numbers, Geist Mono for codes */
  --sans:'Geist','IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --cond:'IBM Plex Sans Condensed','Roboto Condensed','Arial Narrow',sans-serif;
  --mono:'Geist Mono','IBM Plex Mono',ui-monospace,Menlo,monospace;

  /* radii: Captivate One's 3 / 5 / 7 (squarer than the Templates 6-8px; kept on purpose) */
  --r-sm:3px; --r-md:5px; --r-lg:7px;

  /* ---- readable type scale (new). Every size in the components below comes from here. */
  --fs-xs:13px;      /* floor: caps labels, pills, table headers, footnotes */
  --fs-sm:14px;      /* secondary lines, meta, helper text, buttons */
  --fs:15px;         /* body, table cells, inputs */
  --fs-md:16px;      /* list titles, emphasised body */
  --fs-lg:18px;      /* h3, drawer titles, record subject */
  --fs-xl:21px;      /* h2 */
  --fs-h1:26px;      /* page title */
  --fs-num:30px;     /* metric numerals */
  --fs-num-sm:24px;  /* compact metric numerals */
  --fs-num-lg:40px;  /* single hero figure (a quote total, a budget) */
  --lh:1.5; --lh-tight:1.25;
  /* labels keep Captivate One's condensed caps, at readable size and tighter tracking.
     Set --label-case:none to try sentence case (Templates rule) without touching markup. */
  --label-case:uppercase; --label-track:.07em;

  /* ---- spacing and sizing (roomier than Captivate One today) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  --ctl:38px;        /* control height (was 32, leadership 30) */
  --ctl-sm:32px;     /* small buttons (was 26) */
  --chip-h:34px;     /* filter chips (was 28) */
  --row-y:11px; --row-x:14px;   /* table cell padding: ~46px rows (was ~34) */
  --section-gap:36px;           /* space above each section (was 26) */
  --pad:32px;                   /* page side padding */
  --bar:52px;                   /* app bar height */
  --measure:72ch;               /* longest comfortable line of prose */
  color-scheme:dark;
}

/* ---- Light: same structure on warm paper; bronze darkened for contrast. */
:root[data-theme="light"]{
  --ground:#E9E6DF; --surface:#F6F4EF; --surface-2:#EEEBE4; --raised:#E5E1D8; --overlay:#FBFAF7; --inset:#FFFFFF; --hover:#EFECE6; --rule:#E3DFD7;
  --border:#D6D1C7; --border-strong:#C1BBAF; --border-input:#8A8478;
  --text:#1B1D1F; --muted:#545B60; --faint:#5E656A;   /* faint was #7B8287 (3.55:1); now 5.4:1 on --surface, 4.75:1 on --ground */
  --accent:#8C6D3C; --accent-hi:#7A5E31; --accent-ink:#FFFFFF; --accent-text:#7A5E31;
  --accent-soft:rgba(140,109,60,.10); --accent-line:rgba(140,109,60,.45); --accent-soft-ink:#6B5025;
  --selected:rgba(140,109,60,.09); --selected-ink:#5A431E; --link:#77592B;
  /* status text one step darker than Captivate One (#2E7851 #3B6687 #93620F #AE392D sat at 4.2-4.9:1 on --ground
     and failed inside tinted pills); each is now 5.2:1 or better on both surfaces. Tints follow the new hues. */
  --good:#276A47; --good-bg:rgba(39,106,71,.09); --good-line:rgba(39,106,71,.35);
  --info:#355E7D; --info-bg:rgba(53,94,125,.09); --info-line:rgba(53,94,125,.35);
  --warn:#7E540C; --warn-bg:rgba(126,84,12,.10); --warn-line:rgba(126,84,12,.38);
  --crit:#9E3329; --crit-bg:rgba(158,51,41,.09); --crit-line:rgba(158,51,41,.38);
  --pop-shadow:0 14px 36px rgba(40,34,24,.18); --drawer-shadow:-20px 0 48px rgba(40,34,24,.18); --scrim:rgba(30,26,20,.32);
  --skel:#E4E0D8;
  --chart-1:#8C6D3C; --chart-2:#4F7394; --chart-3:#5E7F63; --chart-4:#7B6590; --chart-5:#6A737A; --chart-6:#8C7B4F;   /* chart-6 was #A8966B (2.6:1) */
  --split-1:#B18334; --split-2:#1D5B92; --split-3:#0E8F84; --split-4:#674689; --split-5:#4A620B; --split-other:#9AA0A4;
  color-scheme:light;
}

/* ---- Match system: the light values when the OS is light (chart tokens included this time). */
@media (prefers-color-scheme: light){
  :root[data-theme="system"]{
    --ground:#E9E6DF; --surface:#F6F4EF; --surface-2:#EEEBE4; --raised:#E5E1D8; --overlay:#FBFAF7; --inset:#FFFFFF; --hover:#EFECE6; --rule:#E3DFD7;
    --border:#D6D1C7; --border-strong:#C1BBAF; --border-input:#8A8478;
    --text:#1B1D1F; --muted:#545B60; --faint:#5E656A;
    --accent:#8C6D3C; --accent-hi:#7A5E31; --accent-ink:#FFFFFF; --accent-text:#7A5E31;
    --accent-soft:rgba(140,109,60,.10); --accent-line:rgba(140,109,60,.45); --accent-soft-ink:#6B5025;
    --selected:rgba(140,109,60,.09); --selected-ink:#5A431E; --link:#77592B;
    --good:#276A47; --good-bg:rgba(39,106,71,.09); --good-line:rgba(39,106,71,.35);
    --info:#355E7D; --info-bg:rgba(53,94,125,.09); --info-line:rgba(53,94,125,.35);
    --warn:#7E540C; --warn-bg:rgba(126,84,12,.10); --warn-line:rgba(126,84,12,.38);
    --crit:#9E3329; --crit-bg:rgba(158,51,41,.09); --crit-line:rgba(158,51,41,.38);
    --pop-shadow:0 14px 36px rgba(40,34,24,.18); --drawer-shadow:-20px 0 48px rgba(40,34,24,.18); --scrim:rgba(30,26,20,.32);
    --skel:#E4E0D8;
    --chart-1:#8C6D3C; --chart-2:#4F7394; --chart-3:#5E7F63; --chart-4:#7B6590; --chart-5:#6A737A; --chart-6:#8C7B4F;
    --split-1:#B18334; --split-2:#1D5B92; --split-3:#0E8F84; --split-4:#674689; --split-5:#4A620B; --split-other:#9AA0A4;
    color-scheme:light;
  }
}

/* ---- Touch screens (iPad, phone): every control 44px or taller; 16px inputs stop iOS zooming on focus.
   any-pointer, not pointer: an iPad with a trackpad or a laptop with a touch screen still gets fingers. */
@media (any-pointer:coarse){
  :root{ --fs:16px; --fs-md:17px; --ctl:44px; --ctl-sm:44px; --chip-h:44px; --row-y:13px; }
}
/* ---- Phones: tighter page edge, smaller display sizes so headings do not wrap badly. */
@media (max-width:640px){
  :root{ --pad:16px; --fs-h1:22px; --fs-xl:19px; --fs-num:26px; --fs-num-lg:34px; --section-gap:28px; }
}

/* ---- Field density: techs, warehouse, vans, sales iPads in client homes. Set on <body>.
   Captivate One's installer and warehouse workspaces get it too. Small controls stay at the 44px target. */
body[data-density="field"], body[data-role="installer"], body[data-role="warehouse"]{
  --fs-xs:14px; --fs-sm:15px; --fs:17px; --fs-md:18px; --fs-lg:20px; --fs-xl:23px; --fs-h1:28px;
  --ctl:48px; --ctl-sm:44px; --chip-h:44px; --row-y:14px; --pad:16px;
}
/* Field density on a phone: the body rule above beats the :root phone sizes, so cap the headings here too. */
@media (max-width:640px){
  body[data-density="field"], body[data-role="installer"], body[data-role="warehouse"]{ --fs-h1:24px; --fs-xl:20px; }
}
/* Captivate One office workspaces: no smaller-than-default override any more (leadership used to be 13px). */
body[data-role="leadership"], body[data-role="sales"]{ --fs:15px; }
@media (any-pointer:coarse){ body[data-role="leadership"], body[data-role="sales"]{ --fs:16px; } }

/* ---- Field mode: high-contrast variant for sunlight, whatever the theme. Toggle a class on <body>. */
body.field{
  --ground:#07080A; --surface:#0E1012; --surface-2:#181B1E; --raised:#22262A; --overlay:#111316; --inset:#050607; --hover:#16191C; --rule:#2B3035;
  --border:#474E54; --border-strong:#666E75; --border-input:#7E868D; --text:#FFFFFF; --muted:#D6DADD; --faint:#AAB1B6;
  --accent:#E4BC6C; --accent-hi:#F0CD85; --accent-ink:#0B0B0B; --accent-text:#E4BC6C;
  --accent-soft:rgba(228,188,108,.16); --accent-line:rgba(228,188,108,.65); --accent-soft-ink:#F3D79B;
  --selected:rgba(228,188,108,.14); --selected-ink:#F7E0AE; --link:#F0CF8A;
  --good:#93DCA8; --good-bg:rgba(147,220,168,.14); --good-line:rgba(147,220,168,.5);
  --info:#A2CBEE; --info-bg:rgba(162,203,238,.14); --info-line:rgba(162,203,238,.5);
  --warn:#F4C45E; --warn-bg:rgba(244,196,94,.15); --warn-line:rgba(244,196,94,.55);
  --crit:#FF8C7E; --crit-bg:rgba(255,140,126,.15); --crit-line:rgba(255,140,126,.6);
  --skel:#1C1F22;
  color-scheme:dark;
}
/* ==== /KIT:TOKENS =========================================================================== */


/* ==== KIT:BASE ============================================================================== */
/* Element defaults only. App rules loaded after the kit win at equal specificity (custom properties are the
   exception: see the KIT:ALIASES note). Content sits on --surface, as Captivate One's .main/.sheet do; only the
   app bar (.capbar) and the overscroll canvas (html) keep --ground. min-height stops a short page showing the
   darker ground under the surface. */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ground);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--surface);color:var(--text);font-family:var(--sans);font-size:var(--fs);line-height:var(--lh);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"cv11","ss01"}
[hidden]{display:none!important}   /* JS-toggled overlays (scanner, toast) rely on this */

/* headings: clear steps, sentence case, no oversized display type */
h1,h2,h3,h4{margin:0;font-weight:600;line-height:var(--lh-tight);text-wrap:balance;color:var(--text)}
h1{font-size:var(--fs-h1);letter-spacing:-.012em}
h2{font-size:var(--fs-xl);letter-spacing:-.006em}
h3{font-size:var(--fs-lg)}
h4{font-size:var(--fs-md)}
p{margin:0 0 var(--sp-3)}
small{font-size:var(--fs-sm)}

/* links: bronze-tinted, underline on hover only */
a{color:var(--link);text-decoration:none;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration:underline;text-decoration-color:var(--accent-line)}

/* form elements inherit the type; native checkboxes and radios pick up bronze */
button,input,select,textarea{font:inherit;color:inherit;accent-color:var(--accent)}
input::placeholder,textarea::placeholder{color:var(--faint)}
img,svg,video{max-width:100%}
hr{border:0;border-top:1px solid var(--border);margin:var(--sp-6) 0}
::selection{background:var(--accent-line);color:var(--text)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* text helpers (all at or above the 13px floor) */
.muted{color:var(--muted)} .faint{color:var(--faint)} .accent{color:var(--accent-text)}
.small{font-size:var(--fs-sm)}
.num{font-family:var(--cond);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.mono{font-family:var(--mono);font-size:max(13px,.94em)}   /* .94em of a 14px line would be 13.2px; of 13px, below the floor */
.caps{font-family:var(--cond);font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--label-track);text-transform:var(--label-case)}
.prose{max-width:var(--measure)}
.nw{white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ==== /KIT:BASE ============================================================================= */


/* ==== KIT:ALIASES =========================================================================== */
/* Optional bridge: old variable names used across the apps, pointed at the new tokens, so existing
   CSS and inline styles pick up the palette on day one. They sit on body (like Captivate One) so field
   mode reaches them. Two things follow from that:
   - body is a descendant of :root, so an alias here BEATS an app's own :root variable of the same name,
     whatever the load order (the app's :root value is only inherited; body's own declaration wins).
     That is the intent: the old palette goes quiet even where an app's :root block is still in place.
     An app cannot re-tune an aliased name from :root; it tunes the kit token, or sets the alias on body.
   - JS that reads a token must read it from body: getComputedStyle(document.body).getPropertyValue('--blue').
     Reading document.documentElement returns the app's old :root value, or an empty string.
   Delete each alias once nothing in the app uses it. */
body{
  --bg:var(--ground); --card:var(--surface); --panel:var(--surface); --surface2:var(--surface-2); --raise:var(--surface-2);
  --card-2:var(--raised);                                   /* Budget: second card tone, band-bar track */
  --line:var(--border); --line-strong:var(--border-strong); --soft:var(--rule); --track:var(--surface-2);
  --ink:var(--text); --ink-soft:var(--muted); --text-2:var(--muted); --text-3:var(--faint);
  --ok:var(--good); --oksoft:var(--good-bg); --success:var(--good); --green:var(--good);
  --amber:var(--warn); --warning:var(--warn); --yellow:var(--warn);
  --urgent:var(--crit); --red:var(--crit); --redsoft:var(--crit-bg); --err:var(--crit);
  /* --blue is the old BRAND accent in Inventory, Client Map, Permit Scout and Service Hub, not a status
     color, so it maps to bronze (not --info); --blue-ink is its pressed/dark step */
  --blue:var(--accent); --blue-ink:var(--accent-hi); --bluesoft:var(--accent-soft);
  --acc:var(--accent); --acc-2:var(--accent-hi); --acc-press:var(--accent-hi); --on-acc:var(--accent-ink);
  --accentsoft:var(--accent-soft); --accentline:var(--accent-line); --on-accent:var(--accent-ink); --accent-press:var(--accent-hi);
  --brand:var(--accent);
  /* Budget's Lux effects, switched off. --glow / --glow-soft sit inside box-shadow lists ("0 0 24px var(--glow)"),
     where transparent keeps the list valid and `none` would not. --grad is NOT a gradient in Budget Beta: it is
     the fill behind .btn, .steps button.active and .sysnav button.active ("background:var(--grad)"), so `none`
     would leave accent-ink text on no fill; the flat accent keeps those readable and still has no gradient. */
  --glow:transparent; --glow-soft:transparent; --grad:var(--accent);
  --radius:var(--r-md); --radius-sm:var(--r-sm); --radius-lg:var(--r-lg);
  --nav-h:max(58px,calc(var(--ctl) + 12px));                /* Inventory bottom nav: 58px at desk, 60px in field density */
  --font:var(--sans); --font-ui:var(--sans); --font-disp:var(--sans); --font-head:var(--sans); --font-mono:var(--mono);
}
/* ==== /KIT:ALIASES ========================================================================== */


/* ==== KIT:COMPONENTS ======================================================================== */
/* Captivate One's class names at the readable scale. Shell classes (.nav .wrap .main .sheet .rail
   .appbar) are left out on purpose; standalone apps use .capbar and .page below. */

/* ---- App bar for standalone apps: brand mark + wordmark + page title + actions. 52px, no fill. */
.capbar{position:sticky;top:0;z-index:12;box-sizing:content-box;display:flex;align-items:center;gap:var(--sp-4);min-height:var(--bar);
  padding:env(safe-area-inset-top,0px) var(--pad) 0;background:var(--ground);border-bottom:1px solid var(--border)}
.capbar .brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;white-space:nowrap}
.capbar .brand:hover{text-decoration:none}
.mark{width:20px;height:20px;flex:none;border:1.5px solid var(--accent);border-radius:2px;position:relative;display:inline-block}
.mark::after{content:"";position:absolute;left:3px;right:3px;bottom:3px;height:4px;background:var(--accent)}
.capbar .wm{font-family:var(--cond);font-size:var(--fs-xs);font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.capbar .wm em{font-style:normal;color:var(--accent-text)}
/* Brand logo (2026-10-07, Rene): the real Captivate wave wordmark from the brand sheet replaces .mark + .wm in the app bar.
   Two bitmaps from Captivate Look/brand/: wordmark in paper for dark, in black for light; CSS picks by theme. Markup:
   <a class="brand" href="/" aria-label="Captivate"><img class="logo ondark" src=".../captivate-wave-logo-ondark.png" alt="Captivate" width="450" height="139"><img class="logo onlight" src=".../captivate-wave-logo-onlight.png" alt="" aria-hidden="true" width="450" height="139"></a> */
.capbar .brand .logo{display:block;height:40px;width:auto;flex:none}
.capbar .brand .logo.onlight{display:none}
:root[data-theme="light"] .capbar .brand .logo.ondark{display:none}
:root[data-theme="light"] .capbar .brand .logo.onlight{display:block}
@media (prefers-color-scheme: light){
  :root[data-theme="system"] .capbar .brand .logo.ondark{display:none}
  :root[data-theme="system"] .capbar .brand .logo.onlight{display:block}
}
@media (max-width:640px){ .capbar .brand .logo{height:32px} }
.capbar .title{color:var(--muted);font-size:var(--fs-md);padding-left:var(--sp-4);border-left:1px solid var(--border);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.capbar .right{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2)}
.beta{font-family:var(--cond);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:var(--label-case);color:var(--accent-text);border:1px solid var(--accent-line);border-radius:var(--r-sm);padding:1px 6px}

/* ---- Page container: content sits on the working surface, no card around it. */
.page{max-width:1240px;margin:0 auto;padding:var(--sp-6) var(--pad) var(--sp-12)}
.page.narrow{max-width:760px}
.surface{background:var(--surface)}

/* ---- Page header: optional eyebrow, title, one muted sub-line, actions on the right. */
.ph{display:flex;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-6);padding-bottom:var(--sp-4);border-bottom:1px solid var(--border)}
.ph .t{display:flex;flex-direction:column;gap:var(--sp-1);min-width:0}
.ph .eyebrow,.crumbs{font-family:var(--cond);font-size:var(--fs-xs);font-weight:500;letter-spacing:.12em;text-transform:var(--label-case);color:var(--accent-text)}
.crumbs{color:var(--muted)} .crumbs a{color:var(--muted)}
.ph .t>.muted,.ph .sub{font-size:var(--fs-sm);color:var(--muted)}
.ph .actions{margin-left:auto;display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap}

/* ---- Sections: a heading over a hairline instead of a bordered card. */
.section{margin-top:var(--section-gap)}
.section:first-child{margin-top:0}
.sh{display:flex;align-items:baseline;gap:var(--sp-3);padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:var(--sp-2)}
.sh h2,.sh h3{font-family:var(--cond);font-size:var(--fs-sm);font-weight:600;letter-spacing:.1em;text-transform:var(--label-case);color:var(--muted)}
.sh .r{margin-left:auto;font-size:var(--fs-sm);color:var(--faint)}
.sh .r a{font-family:var(--cond);font-size:var(--fs-xs);letter-spacing:.08em;text-transform:var(--label-case);color:var(--accent-text)}
.sh .cnt{font-family:var(--cond);font-size:var(--fs-sm);color:var(--faint);font-variant-numeric:tabular-nums}

/* ---- Cards and panels: used sparingly; flat, hairline, 5px. A panel holding a table drops its frame. */
.card{background:transparent;border:1px solid var(--border);border-radius:var(--r-md)}
.card .ct{display:flex;align-items:center;gap:var(--sp-2);padding:12px 20px;border-bottom:1px solid var(--border);
  font-family:var(--cond);font-size:var(--fs-sm);font-weight:600;letter-spacing:.1em;text-transform:var(--label-case);color:var(--muted)}
.card .ct .r{margin-left:auto;font-family:var(--sans);font-weight:400;letter-spacing:0;text-transform:none;color:var(--faint)}
.card .cb{padding:18px 20px}
.panel{background:transparent;border:1px solid var(--border);border-radius:var(--r-md);padding:18px 20px;margin-bottom:var(--sp-5)}
.panel>h3{margin:0 0 12px;font-family:var(--cond);font-size:var(--fs-sm);font-weight:600;letter-spacing:.1em;text-transform:var(--label-case);color:var(--muted)}
.panel:has(> .tbl),.panel:has(> .tw){border:0;padding:0;border-radius:0}
.split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--sp-10)}
.split.rule>*+*{border-left:1px solid var(--border);padding-left:var(--sp-8)}

/* ---- Buttons: primary bronze fill (one per screen), secondary outlined, ghost text, danger muted red. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);height:var(--ctl);padding:0 16px;
  border:1px solid var(--border-input);border-radius:var(--r-sm);background:transparent;color:var(--text);
  font-size:var(--fs-sm);font-weight:500;white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:background .12s,border-color .12s,color .12s}
a.btn:hover{text-decoration:none}
.btn:hover{background:var(--surface-2);border-color:var(--faint)}
.btn.primary,.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn.primary:hover,.btn-primary:hover{background:var(--accent-hi);border-color:var(--accent-hi)}
.btn.tonal{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-soft-ink)}
.btn.tonal:hover{border-color:var(--accent)}
.btn.ghost,.btn-ghost{border-color:transparent;background:transparent;color:var(--muted)}
.btn.ghost:hover,.btn-ghost:hover{background:var(--surface-2);color:var(--text)}
.btn.danger{color:var(--crit);border-color:var(--crit-line)}
.btn.danger:hover{background:var(--crit-bg);border-color:var(--crit)}
.btn.sm{height:var(--ctl-sm);padding:0 12px;font-size:var(--fs-xs)}
.btn.block{width:100%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:default;pointer-events:none}
.link{border:0;background:none;padding:0;color:var(--link);cursor:pointer;font:inherit}
.link:hover{text-decoration:underline}
.icoBtn{display:inline-grid;place-items:center;width:var(--ctl);height:var(--ctl);border:0;border-radius:var(--r-md);background:transparent;color:var(--muted);cursor:pointer}
.icoBtn:hover{background:var(--surface-2);color:var(--text)}

/* ---- Inputs, selects, textareas, labels. Text inside fields is body size; never under 16px on touch. */
.input,.finput{display:block;width:100%;height:var(--ctl);padding:0 12px;border:1px solid var(--border-input);border-radius:var(--r-sm);
  background:var(--inset);color:var(--text);font:inherit;font-size:var(--fs)}
.input:hover,.finput:hover{border-color:var(--faint)}
.input:focus,.finput:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent-line)}
textarea.input,textarea.finput{height:auto;min-height:110px;padding:10px 12px;line-height:var(--lh);resize:vertical}
select.input,select.finput{appearance:none;-webkit-appearance:none;padding-right:34px;background-repeat:no-repeat;background-position:right 12px center;background-size:12px 8px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238C949A' stroke-width='1.6'/%3E%3C/svg%3E")}
@media (any-pointer:coarse){.input,.finput{font-size:max(16px,var(--fs))}}
label.f,label.fl{display:flex;flex-direction:column;gap:6px;font-family:var(--cond);font-size:var(--fs-xs);font-weight:500;letter-spacing:var(--label-track);text-transform:var(--label-case);color:var(--muted)}
label.f .input,label.fl .finput,label.f .hint{font-family:var(--sans);letter-spacing:0;text-transform:none}
.hint{font-size:var(--fs-sm);color:var(--faint);font-weight:400}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--sp-4) var(--sp-5)}
.check{display:flex;align-items:center;gap:10px;min-height:var(--ctl);cursor:pointer}
.check input{width:20px;height:20px;margin:0;flex:none}

/* ---- Toolbar, filter chips, segmented control. One toolbar row per screen; extra filters go behind "More filters". */
.toolbar{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;padding:0 0 var(--sp-4)}
.toolbar .sp,.sp{flex:1}
.toolbar .input{width:auto}
.toolbar .input.search{flex:1;min-width:220px;max-width:420px}
.chip{display:inline-flex;align-items:center;gap:var(--sp-2);height:var(--chip-h);padding:0 14px;border:1px solid var(--border-input);border-radius:var(--r-sm);
  background:transparent;color:var(--muted);font-size:var(--fs-sm);white-space:nowrap;cursor:pointer}
.chip:hover{color:var(--text);border-color:var(--faint)}
.chip.on{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-soft-ink);font-weight:500}
.chip .dd{font-family:var(--cond);color:var(--faint);font-variant-numeric:tabular-nums}
.chip.on .dd{color:var(--accent-text)}
.seg{display:inline-flex;height:var(--chip-h);border:1px solid var(--border-input);border-radius:var(--r-sm);background:var(--inset);overflow:hidden;flex:none}
.seg button{border:0;background:none;padding:0 14px;cursor:pointer;color:var(--muted);font-size:var(--fs-sm);font-weight:500}
.seg button+button{border-left:1px solid var(--border)}
.seg button:hover{color:var(--text)}
.seg button.on,.seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-soft-ink)}

/* ---- Tabs: underline, no pills. Scroll sideways on phones. */
.tabs{display:flex;gap:0 28px;border-bottom:1px solid var(--border);margin-bottom:var(--sp-5);overflow-x:auto;scrollbar-width:none}
.tabs button,.tabs a{flex:none;border:0;background:none;padding:12px 0 11px;margin-bottom:-1px;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;
  font-family:var(--cond);font-size:var(--fs-sm);font-weight:600;letter-spacing:.08em;text-transform:var(--label-case);color:var(--muted);text-decoration:none}
.tabs button:hover,.tabs a:hover{color:var(--text)}
.tabs .on,.tabs [aria-selected="true"]{color:var(--text);border-bottom-color:var(--accent)}
.tabs .cnt{margin-left:6px;color:var(--faint);font-weight:500;letter-spacing:0}
.tabs .on .cnt{color:var(--accent-text)}

/* ---- Tables: no frame, hairline rows, condensed caps headers, ~46px rows. */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tw.pane{max-height:calc(100dvh - 220px);overflow:auto;border-top:1px solid var(--border)}   /* dvh: iOS Safari's toolbar does not hide the last rows */
.tbl{width:100%;border-collapse:separate;border-spacing:0}
.tbl th{text-align:left;font-family:var(--cond);font-size:var(--fs-xs);font-weight:500;letter-spacing:var(--label-track);text-transform:var(--label-case);
  color:var(--muted);padding:10px var(--row-x) 9px;border-bottom:1px solid var(--border);background:var(--surface);white-space:nowrap}
.tw.pane .tbl th{position:sticky;top:0;z-index:1}
.tbl td{padding:var(--row-y) var(--row-x);border-bottom:1px solid var(--rule);font-size:var(--fs);line-height:1.4;vertical-align:middle}
.tbl td .sub,.tbl td .small{display:block;font-size:var(--fs-sm);color:var(--faint);margin-top:2px}
.tbl tbody tr:last-child td{border-bottom-color:var(--border)}
.tbl tr.row{cursor:pointer}
.tbl tr.row:hover td{background:var(--hover)}
.tbl tr.row:hover td:first-child{box-shadow:inset 2px 0 0 var(--accent)}
.tbl tr.hl-crit td:first-child{box-shadow:inset 2px 0 0 var(--crit)}
.tbl tr.hl-warn td:first-child{box-shadow:inset 2px 0 0 var(--warn)}
.tbl .r{text-align:right} .tbl .c{text-align:center}
.tbl td.num,.tbl td.r{font-family:var(--cond);font-variant-numeric:tabular-nums}
.tbl th[aria-sort="ascending"],.tbl th[aria-sort="descending"]{color:var(--accent-text)}
.tbl td.emptyCell{color:var(--muted);padding:24px var(--row-x)}

/* ---- Lists and key-value rows: hairlines, no boxes. */
.list{display:flex;flex-direction:column}
.list>*{display:flex;gap:var(--sp-3);align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--rule)}
.list>*:last-child{border-bottom:0}
.list .r{margin-left:auto;white-space:nowrap}
.list .tt{font-size:var(--fs-md);font-weight:500}
.list .sub{font-size:var(--fs-sm);color:var(--faint)}
.kv{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:0 var(--sp-4);margin:0}
.kv dt,.kv dd{padding:10px 0;border-bottom:1px solid var(--rule)}
.kv dt{color:var(--muted);font-size:var(--fs-sm)}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}

/* ---- Status: pills only for real status; a dot + word where a box is too loud. */
.pill,.lbl,.tag,.bdg{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border:1px solid var(--border-strong);border-radius:var(--r-sm);
  background:transparent;color:var(--muted);font-family:var(--cond);font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:var(--label-case);
  white-space:nowrap;line-height:1;vertical-align:1px}
.pill.good,.lbl.good{color:var(--good);border-color:var(--good-line);background:var(--good-bg)}
.pill.warn,.lbl.warn{color:var(--warn);border-color:var(--warn-line);background:var(--warn-bg)}
.pill.crit,.lbl.crit{color:var(--crit);border-color:var(--crit-line);background:var(--crit-bg)}
.pill.info,.lbl.info,.tag{color:var(--info);border-color:var(--info-line);background:var(--info-bg)}
.pill.accent,.lbl.accent{color:var(--accent-soft-ink);border-color:var(--accent-line);background:var(--accent-soft)}
.pill.faint,.lbl.faint{color:var(--faint);border-color:var(--border)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--faint);flex:none}
.dot.good{background:var(--good)} .dot.warn{background:var(--warn)} .dot.crit{background:var(--crit)} .dot.info{background:var(--info)} .dot.accent{background:var(--accent)}
.st{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--muted);white-space:nowrap}

/* ---- Metrics strip: replaces rows of KPI cards. 3-4 numbers, hairline dividers, condensed numerals. */
.mstrip,.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:0 0 var(--sp-6)}
.mstrip>.m,.metric{position:relative;display:flex;flex-direction:column;gap:2px;min-width:0;padding:14px 18px 16px;border-left:1px solid var(--border);color:inherit;text-decoration:none}
.mstrip>.m:first-child,.metric:first-child{border-left:0;padding-left:0}
a.m:hover,a.metric:hover{background:var(--hover);text-decoration:none}
.mstrip .ml,.metric .l{font-family:var(--cond);font-size:var(--fs-xs);font-weight:500;letter-spacing:var(--label-track);text-transform:var(--label-case);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mstrip .mn,.metric .n{font-family:var(--cond);font-size:var(--fs-num);font-weight:400;line-height:1.1;font-variant-numeric:tabular-nums;color:var(--text)}
.mstrip .ms{font-size:var(--fs-sm);color:var(--faint);line-height:1.35}
.mstrip.sm .mn{font-size:var(--fs-num-sm)}
.mstrip .m::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:transparent}
.mstrip .m.crit::before{background:var(--crit)} .mstrip .m.warn::before{background:var(--warn)} .mstrip .m.accent::before{background:var(--accent-line)}
.mstrip .m.crit .mn{color:var(--crit)} .mstrip .m.warn .mn{color:var(--warn)} .mstrip .m.good .mn{color:var(--good)} .mstrip .m.accent .mn{color:var(--accent-text)}
.mstrip .m.zero .mn{color:var(--faint)}
.figure{font-family:var(--cond);font-size:var(--fs-num-lg);font-weight:400;line-height:1.05;font-variant-numeric:tabular-nums}

/* ---- Callouts, empty and loading states. Left rule + tint, no icons or illustrations. */
.callout{padding:12px 16px;border-left:2px solid var(--border-strong);background:var(--surface-2);border-radius:0 var(--r-sm) var(--r-sm) 0;max-width:var(--measure)}
.callout.good{border-left-color:var(--good);background:var(--good-bg)}
.callout.warn{border-left-color:var(--warn);background:var(--warn-bg)}
.callout.crit{border-left-color:var(--crit);background:var(--crit-bg)}
.callout.info{border-left-color:var(--info);background:var(--info-bg)}
.callout strong{display:block;margin-bottom:2px}
.empty{padding:20px 0 20px 16px;border-left:2px solid var(--border-strong);margin:var(--sp-3) 0;color:var(--muted)}
.empty h3{font-size:var(--fs-md);font-weight:600;color:var(--text);margin:0 0 4px}
.empty p{margin:0;max-width:var(--measure)}
.loading{color:var(--muted);font-size:var(--fs-sm);padding:24px 0 8px}
.skel{display:block;height:12px;border-radius:2px;background:var(--skel);animation:capPulse 1.4s ease-in-out infinite}
@keyframes capPulse{50%{opacity:.5}}

/* ---- Popover menu (account menu, "More" menu). */
.pop{position:absolute;top:calc(100% + 6px);right:0;z-index:25;min-width:240px;max-width:min(360px,calc(100vw - 24px));padding:6px 0;
  background:var(--overlay);border:1px solid var(--border-strong);border-radius:var(--r-md);box-shadow:var(--pop-shadow);color:var(--text);font-size:var(--fs)}
.pop .mi{display:flex;align-items:center;gap:10px;width:100%;min-height:var(--ctl);padding:0 16px;border:0;background:none;text-align:left;cursor:pointer;color:var(--text)}
.pop .mi:hover{background:var(--surface-2)}
.pop .mi.on{background:var(--selected);color:var(--selected-ink)}
.pop .ph2{padding:10px 16px 6px;font-family:var(--cond);font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--label-track);text-transform:var(--label-case);color:var(--muted)}
.pop hr{margin:6px 0}

/* ---- Overlay, drawer, modal, toast. */
.ov{position:fixed;inset:0;z-index:20;background:var(--scrim)}
.dr{position:fixed;top:0;right:0;bottom:0;z-index:21;width:min(560px,100%);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);
  background:var(--overlay);color:var(--text);border-left:1px solid var(--border-strong);box-shadow:var(--drawer-shadow);animation:capDrIn .16s ease-out}
@keyframes capDrIn{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
.dr .dh,.modal .dh{display:flex;align-items:center;gap:var(--sp-3);padding:16px 20px;border-bottom:1px solid var(--border)}
.dr .dh h2,.modal .dh h2{font-size:var(--fs-lg)}
.dr .dh button,.modal .dh button{margin-left:auto}
.dr .db,.modal .db{flex:1;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:var(--sp-4)}
.dr .df,.modal .df{display:flex;gap:var(--sp-2);justify-content:flex-end;padding:12px 20px;padding-bottom:max(12px,env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);background:var(--surface)}
.modal{position:fixed;z-index:21;left:50%;top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 64px);display:flex;flex-direction:column;
  background:var(--overlay);color:var(--text);border:1px solid var(--border-strong);border-radius:var(--r-lg);box-shadow:var(--pop-shadow)}
.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:30;max-width:calc(100vw - 32px);padding:12px 18px;
  background:var(--overlay);color:var(--text);border:1px solid var(--border-strong);border-left:2px solid var(--accent);border-radius:var(--r-sm);box-shadow:var(--pop-shadow);font-size:var(--fs)}
.toast.err{border-left-color:var(--crit)}

/* ---- Sticky bottom action bar (field forms): one primary action, the rest secondary or in "More". */
.actionbar{position:sticky;bottom:0;z-index:10;display:flex;gap:var(--sp-2);align-items:center;padding:12px var(--pad);padding-bottom:max(12px,env(safe-area-inset-bottom,0px));
  background:var(--surface);border-top:1px solid var(--border)}
.actionbar .status{margin-right:auto;font-size:var(--fs-sm);color:var(--muted)}

/* ---- Responsive: tablets get one column; phones get stacked headers, sheets and 2-up metrics. */
@media (max-width:980px){
  .split{grid-template-columns:minmax(0,1fr);gap:var(--sp-8)}
  .split.rule>*+*{border-left:0;padding-left:0}
}
@media (max-width:640px){
  .capbar .title{display:none}
  .ph .actions{margin-left:0;width:100%}
  .kv{grid-template-columns:1fr}
  .kv dt{border-bottom:0;padding-bottom:0}
  .mstrip,.metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mstrip>.m:nth-child(odd),.metric:nth-child(odd){border-left:0;padding-left:0}
  .mstrip>.m:nth-child(n+3),.metric:nth-child(n+3){border-top:1px solid var(--border)}
  .toolbar .input.search{min-width:0;flex-basis:100%;max-width:none}
  .modal{left:0;right:0;top:auto;bottom:0;transform:none;width:100%;max-height:88dvh;border-radius:var(--r-lg) var(--r-lg) 0 0}
}
/* ==== /KIT:COMPONENTS ======================================================================= */


/* ==== KIT:PRINT ============================================================================= */
/* Printing always uses light paper, whatever the screen theme, so a dark page never prints
   light text on white. Every token gets a light value here, including the ones only the dark theme
   sets (--raised --overlay --selected --skel --chart-* --split-* and the *-line tints), so nothing
   dark-tuned leaks through. Client PDFs built in JS (jsPDF, Google Docs) are NOT affected by this. */
@media print{
  :root,:root[data-theme],body,body.field,body[data-density],body[data-role]{
    --ground:#FFFFFF; --surface:#FFFFFF; --surface-2:#F4F2ED; --raised:#ECE9E2; --overlay:#FFFFFF; --inset:#FFFFFF; --hover:transparent; --rule:#E3DFD7;
    --border:#D6D1C7; --border-strong:#C1BBAF; --border-input:#8A8478; --text:#1B1D1F; --muted:#454B50; --faint:#5C6368;
    --accent:#8C6D3C; --accent-hi:#7A5E31; --accent-text:#7A5E31; --accent-ink:#FFFFFF; --accent-soft:rgba(140,109,60,.10); --accent-line:rgba(140,109,60,.45); --accent-soft-ink:#6B5025;
    --selected:rgba(140,109,60,.09); --selected-ink:#5A431E; --link:#1B1D1F;
    --good:#276A47; --good-bg:transparent; --good-line:rgba(39,106,71,.35);
    --info:#355E7D; --info-bg:transparent; --info-line:rgba(53,94,125,.35);
    --warn:#7E540C; --warn-bg:transparent; --warn-line:rgba(126,84,12,.38);
    --crit:#9E3329; --crit-bg:transparent; --crit-line:rgba(158,51,41,.38);
    --shadow:none; --pop-shadow:none; --drawer-shadow:none; --scrim:transparent; --skel:#E4E0D8;
    --chart-1:#8C6D3C; --chart-2:#4F7394; --chart-3:#5E7F63; --chart-4:#7B6590; --chart-5:#6A737A; --chart-6:#8C7B4F;
    --split-1:#B18334; --split-2:#1D5B92; --split-3:#0E8F84; --split-4:#674689; --split-5:#4A620B; --split-other:#9AA0A4;
    /* print type: 9.5pt is the floor (the 13px screen floor on paper); numerals scaled to match */
    --fs-xs:9.5pt; --fs-sm:10pt; --fs:11pt; --fs-md:11.5pt; --fs-lg:12.5pt; --fs-xl:14pt; --fs-h1:18pt;
    --fs-num:20pt; --fs-num-sm:16pt; --fs-num-lg:26pt;
    color-scheme:light;
  }
  html,body{background:#FFFFFF}
  /* the app bar prints as a letterhead line (mark, wordmark, page title); only its actions go */
  .capbar{position:static;background:#FFFFFF}
  .capbar .right,.toolbar,.actionbar,.toast,.ov,.dr,.pop,.modal,.no-print{display:none!important}
  .capbar .brand .logo.ondark{display:none!important} .capbar .brand .logo.onlight{display:block!important}
  .page{padding:0;max-width:none}
  .tbl tr,.list>*,.kv dd{break-inside:avoid}
  a{color:inherit;text-decoration:none}
}
/* ==== /KIT:PRINT ============================================================================ */