:root {
  --jsc-color-bone: #F4EFE6;
  --jsc-color-paper: #FAF7F1;
  --jsc-color-surface: #FFFFFF;
  --jsc-color-surface-2: #ECE5D5;
  --jsc-color-surface-3: #E1D9C5;
  --jsc-color-ink: #1A1E1B;
  --jsc-color-ink-2: #44463E;
  --jsc-color-ink-3: #6F6F65;
  --jsc-color-mute: #94908A;
  --jsc-color-leaf: #2E6B3A;
  --jsc-color-leaf-2: #4F8C5B;
  --jsc-color-leaf-soft: #D9E5C7;
  --jsc-color-leaf-bg: #E9EFD9;
  --jsc-color-moss: #143E1F;
  --jsc-color-coral: #C0573A;
  --jsc-color-coral-soft: #F4DCD0;
  --jsc-color-gold: #A77E3A;
  --jsc-color-gold-soft: #EBDDB8;
  --jsc-color-sky: #3E6E8C;
  --jsc-color-sky-soft: #D5E1EB;
  --jsc-color-brand-forest: #214E34;
  --jsc-color-sage: #6F8F72;
  --jsc-color-warm-cream: #F7F1E6;
  --jsc-focus-ring: 0 0 0 3px rgba(33, 78, 52, 0.35);
  --jsc-layout-max-content-width: 1120px;
  --jsc-shell-padding-inline: clamp(1rem, 4vw, 2rem);
  --jsc-font-display: Instrument Serif, Georgia, "Times New Roman", serif;
  --jsc-font-sans: Geist, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --jsc-font-mono: JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  /* v0.3: complete token surface — extra status/line colors + radius / shadow / spacing / motion scales (match buildCssVariables) */
  --jsc-color-linen: #FFF9EF;
  --jsc-color-muted: #617066;
  /* v0.5: status trio realigned to the reference design system (--crit / --warn / --ok). */
  --jsc-color-danger: #B33A2A;
  --jsc-color-warning: #B27A1F;
  --jsc-color-success: #2E6B3A;
  --jsc-color-line: #DBD2BD;
  --jsc-color-line-strong: #C9BFA8;
  --jsc-color-line-soft: #EAE2CE;
  /* v0.5: radius scale matches the reference foundation (--r-xs..--r-xl); lg is the card radius. */
  --jsc-radius-xs: 4px;
  --jsc-radius-sm: 6px;
  --jsc-radius-md: 10px;
  --jsc-radius-lg: 14px;
  --jsc-radius-xl: 20px;
  --jsc-radius-pill: 999px;
  /* v0.5: layered hairline shadows from the reference (--sh-1/2/3). Cards are shadowless by design —
     shadows are reserved for floating elements (modals, toasts, sticky summaries, float CTAs). */
  --jsc-shadow-1: 0 1px 0 rgba(26, 30, 27, 0.04), 0 1px 2px rgba(26, 30, 27, 0.04);
  --jsc-shadow-2: 0 1px 0 rgba(26, 30, 27, 0.04), 0 8px 24px -6px rgba(26, 30, 27, 0.08);
  --jsc-shadow-3: 0 24px 60px -20px rgba(26, 30, 27, 0.18), 0 1px 0 rgba(26, 30, 27, 0.04);
  /* Legacy pre-0.5 shadows kept for compatibility; prefer --jsc-shadow-1/2/3. */
  --jsc-shadow-soft: 0 10px 30px rgba(26, 30, 27, 0.08);
  --jsc-shadow-card: 0 18px 50px rgba(26, 30, 27, 0.12);
  --jsc-shadow-focus: 0 0 0 3px rgba(33, 78, 52, 0.35);
  --jsc-space-xs: 4px;
  --jsc-space-sm: 8px;
  --jsc-space-md: 16px;
  --jsc-space-lg: 24px;
  --jsc-space-xl: 36px;
  --jsc-space-2xl: 56px;
  /* Emitted by buildCssVariables() from designTokens.motion — kept here for parity.
     --jsc-motion-reduced-motion-media-query mirrors the JS token (a media query isn't
     directly usable as a CSS var); --jsc-motion-standard-duration: 180ms is a usable token. */
  --jsc-motion-reduced-motion-media-query: (prefers-reduced-motion: reduce);
  --jsc-motion-standard-duration: 180ms;
  --jsc-motion-ease-out: cubic-bezier(0.2, 0, 0, 1);
  --jsc-motion-ease-in: cubic-bezier(0.6, 0, 0.85, 0.5);
  --jsc-motion-duration-fast: 160ms;
  --jsc-motion-duration-base: 240ms;
  --jsc-motion-duration-slow: 420ms;
}

/* Self-hosted brand fonts (latin subset, woff2). Covers EN + ES; see fonts/LICENSE.md.
   Geist and JetBrains Mono are variable (font-weight range); Instrument Serif ships regular + italic. */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./fonts/geist.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/instrument-serif.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('./fonts/instrument-serif-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('./fonts/jetbrains-mono.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

* { box-sizing: border-box; }
html { background: var(--jsc-color-bone); color: var(--jsc-color-ink); }
/* v0.5: base type matches the reference foundation (15px/1.45, antialiased). */
body { margin: 0; font-family: var(--jsc-font-sans); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.01em; }
a { color: inherit; }
/* Reference type primitives: serif display, tabular mono ("mono is for proof"). */
.jsc-t-display { font-family: var(--jsc-font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 1; }
.jsc-t-mono { font-family: var(--jsc-font-mono); font-feature-settings: 'tnum' 1; }
:focus-visible { outline: none; box-shadow: var(--jsc-focus-ring); border-radius: 0.5rem; }
.jsc-skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 50; transform: translateY(-160%); background: var(--jsc-color-ink); color: white; padding: .75rem 1rem; border-radius: 999px; }
.jsc-skip-link:focus { transform: translateY(0); }
.jsc-shell { min-height: 100vh; display: flex; flex-direction: column; }
.jsc-shell-header, .jsc-shell-footer { padding: 1rem var(--jsc-shell-padding-inline); }
.jsc-shell-header { background: rgba(250, 247, 241, .9); border-bottom: 1px solid rgba(26, 30, 27, .12); }
.jsc-shell-nav { max-width: var(--jsc-layout-max-content-width); margin: 0 auto; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.jsc-brand { font-weight: 800; color: var(--jsc-color-leaf); text-decoration: none; }
.jsc-nav-links, .jsc-nav-meta { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; color: var(--jsc-color-ink-3); }
.jsc-language-toggle { display: inline-flex; gap: .25rem; padding: .2rem; border: 1px solid rgba(26, 30, 27, .12); border-radius: 999px; }
.jsc-language-toggle a { padding: .25rem .5rem; border-radius: 999px; text-decoration: none; font-size: .82rem; }
.jsc-language-toggle [aria-current="true"] { background: var(--jsc-color-ink); color: var(--jsc-color-paper); }
.jsc-main { flex: 1; padding: clamp(2rem, 8vw, 5rem) var(--jsc-shell-padding-inline); }
.jsc-hero { max-width: var(--jsc-layout-max-content-width); margin: 0 auto; display: grid; gap: 2rem; }
.jsc-eyebrow { color: var(--jsc-color-leaf); font-family: var(--jsc-font-mono); font-weight: 500; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; }
.jsc-hero h1 { max-width: 14ch; margin: 0; font-family: var(--jsc-font-display); font-size: clamp(2.5rem, 8vw, 5.75rem); line-height: .95; color: var(--jsc-color-ink); }
.jsc-lede { max-width: 68ch; color: var(--jsc-color-ink-2); font-size: clamp(1.05rem, 2vw, 1.25rem); }
.jsc-actions { display: flex; flex-wrap: wrap; gap: .875rem; }
/* v0.5: button family matches the reference foundation (.btn): 40px pill, weight 500,
   leaf = the green CTA, secondary/paper = paper-on-line, sm/lg sizes. */
.jsc-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border-radius: var(--jsc-radius-pill); font-family: var(--jsc-font-sans); font-weight: 500; font-size: 14px; text-decoration: none; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform 0.06s ease, background 0.12s ease; }
.jsc-button:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }
.jsc-button-primary { background: var(--jsc-color-ink); color: var(--jsc-color-paper); }
.jsc-button-primary:hover { background: #000; }
.jsc-button-leaf { background: var(--jsc-color-leaf); color: #fff; }
.jsc-button-leaf:hover { background: var(--jsc-color-moss); }
.jsc-button-secondary, .jsc-button-paper { background: var(--jsc-color-paper); color: var(--jsc-color-ink); border-color: var(--jsc-color-line); }
.jsc-button-secondary:hover, .jsc-button-paper:hover { background: var(--jsc-color-surface-2); }
.jsc-button-ghost { background: transparent; color: var(--jsc-color-ink); border-color: var(--jsc-color-line-strong); }
.jsc-button-ghost:hover { background: var(--jsc-color-surface-2); }
.jsc-button-sm { min-height: 32px; padding: 0 12px; font-size: 13px; }
.jsc-button-lg { min-height: 48px; padding: 0 24px; font-size: 15px; }
.jsc-button-block { width: 100%; }
.jsc-button:disabled, .jsc-button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.jsc-button-label { display: inline-flex; align-items: center; }
.jsc-button-loading .jsc-button-label { margin-inline-start: .5em; }
.jsc-button-spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 999px; animation: jsc-spin .6s linear infinite; }
@keyframes jsc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .jsc-button-spinner { animation: none; border-top-color: currentColor; } }
.jsc-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1rem; padding: 0; list-style: none; }
/* v0.5: cards match the reference (.card): paper fill, hairline border, 14px radius, NO shadow. */
.jsc-card { background: var(--jsc-color-paper); border: 1px solid var(--jsc-color-line); border-radius: var(--jsc-radius-lg); padding: 1.25rem; }
.jsc-card-flat { background: var(--jsc-color-surface-2); border: 1px solid var(--jsc-color-line); border-radius: var(--jsc-radius-lg); padding: 1.25rem; }
.jsc-card-title { margin: 0 0 .5rem; font-family: var(--jsc-font-display); }
/* v0.5: pill family matches the reference (.pill): 22px, 11.5px/500, tinted borders, dot + mono modifiers.
   The per-tone text/border hexes are the reference's de-facto tokens — keep them in sync across surfaces. */
.jsc-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 1px 8px; border-radius: var(--jsc-radius-pill); font-size: 11.5px; font-weight: 500; letter-spacing: .01em; background: var(--jsc-color-surface-2); color: var(--jsc-color-ink-2); border: 1px solid var(--jsc-color-line); white-space: nowrap; }
.jsc-pill-neutral { background: var(--jsc-color-surface-2); color: var(--jsc-color-ink-2); border-color: var(--jsc-color-line); }
.jsc-pill-leaf { background: var(--jsc-color-leaf-soft); color: var(--jsc-color-moss); border-color: #B8CFA1; }
.jsc-pill-gold { background: var(--jsc-color-gold-soft); color: #6E521D; border-color: #D4BD86; }
.jsc-pill-coral { background: var(--jsc-color-coral-soft); color: #7C2D17; border-color: #E1B7A6; }
.jsc-pill-sky { background: var(--jsc-color-sky-soft); color: #234861; border-color: #B5C8D9; }
.jsc-pill-ink { background: var(--jsc-color-ink); color: var(--jsc-color-paper); border-color: var(--jsc-color-ink); }
.jsc-pill-dot::before { content: ""; width: 6px; height: 6px; border-radius: var(--jsc-radius-pill); background: currentColor; opacity: .85; }
.jsc-pill-mono { font-family: var(--jsc-font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; }
.jsc-field { display: grid; gap: .35rem; }
.jsc-field-label { font-weight: 700; }
.jsc-field-help { color: var(--jsc-color-ink-3); margin: 0; }
.jsc-field-error { color: #842F1E; margin: 0; }
.jsc-input, .jsc-select, .jsc-textarea { display: block; width: 100%; min-height: 2.75rem; padding: .6rem .75rem; font: inherit; color: var(--jsc-color-ink); background: var(--jsc-color-surface); border: 1px solid var(--jsc-color-line-strong); border-radius: var(--jsc-radius-md); }
.jsc-textarea { min-height: 6rem; resize: vertical; }
.jsc-input:focus-visible, .jsc-select:focus-visible, .jsc-textarea:focus-visible { border-color: var(--jsc-color-leaf); }
.jsc-input[aria-invalid="true"], .jsc-select[aria-invalid="true"], .jsc-textarea[aria-invalid="true"] { border-color: var(--jsc-color-coral); }
.jsc-input:disabled, .jsc-select:disabled, .jsc-textarea:disabled { opacity: .55; cursor: not-allowed; }
.jsc-fieldset { display: grid; gap: .5rem; margin: 0; padding: 1rem 1.25rem; border: 1px solid var(--jsc-color-line); border-radius: var(--jsc-radius-lg); }
.jsc-fieldset > legend { padding: 0 .4rem; font-family: var(--jsc-font-display); }
.jsc-checkbox { display: inline-flex; align-items: flex-start; gap: .5rem; line-height: 1.4; }
.jsc-checkbox input[type="checkbox"] { margin-top: .15rem; width: 1.1rem; height: 1.1rem; accent-color: var(--jsc-color-leaf); }
.jsc-state { max-width: 42rem; padding: 1rem; border: 1px solid rgba(26, 30, 27, .12); border-radius: 1rem; background: var(--jsc-color-paper); }
.jsc-error-state { border-color: var(--jsc-color-coral); }
.jsc-loading-state { color: var(--jsc-color-ink-3); }
.jsc-table { width: 100%; border-collapse: collapse; background: var(--jsc-color-surface); border-radius: 1rem; overflow: hidden; }
.jsc-table caption { text-align: left; padding: .75rem 1rem; font-weight: 800; }
.jsc-table th, .jsc-table td { padding: .75rem 1rem; border-top: 1px solid rgba(26, 30, 27, .1); text-align: left; }
.jsc-table-wrap { overflow-x: auto; }
.jsc-table th.jsc-end, .jsc-table td.jsc-end { text-align: right; }
.jsc-th-sort { display: inline-flex; align-items: center; gap: .35rem; padding: 0; background: none; border: 0; font: inherit; font-weight: 800; color: inherit; cursor: pointer; }
.jsc-th-sort:hover { color: var(--jsc-color-leaf); }
.jsc-sort-indicator { font-size: .8em; color: var(--jsc-color-ink-3); }
.jsc-table-empty { padding: 1.5rem; text-align: center; color: var(--jsc-color-ink-3); }
.jsc-pagination { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.jsc-pagination-status { color: var(--jsc-color-ink-3); font-size: .9rem; }
.jsc-cookie-banner { max-width: var(--jsc-layout-max-content-width); margin: 2rem auto 0; padding: 1rem; border: 1px solid rgba(26, 30, 27, .12); border-radius: 1.25rem; background: var(--jsc-color-paper); display: flex; gap: 1rem; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.jsc-cookie-banner p { margin: 0; max-width: 62ch; }
.jsc-cookie-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.jsc-security { max-width: var(--jsc-layout-max-content-width); margin: 2rem auto 0; color: var(--jsc-color-ink-3); }
.jsc-shell-footer { color: var(--jsc-color-ink-3); border-top: 1px solid rgba(26, 30, 27, .12); }
/* v0.5: reference foundation primitives — logo lockup, divider, dashed link. */
.jsc-logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--jsc-font-display); font-size: 22px; letter-spacing: -0.02em; color: var(--jsc-color-ink); text-decoration: none; }
/* v0.5.1: .jsc-brand-mark sizes the real logo (BrandMark component, inline SVG) — compose it
   inside .jsc-logo next to the serif brand text; the `size` prop owns its dimensions. */
.jsc-brand-mark { display: inline-flex; flex-shrink: 0; }
/* Superseded by BrandMark: the ink-circle serif-"J" placeholder below predates the real logo.
   Kept (with its sidebar sizing) until every app has migrated off it. */
.jsc-logo-mark { width: 28px; height: 28px; border-radius: var(--jsc-radius-pill); background: var(--jsc-color-ink); color: var(--jsc-color-paper); display: inline-flex; align-items: center; justify-content: center; font-family: var(--jsc-font-display); font-size: 16px; letter-spacing: -0.02em; }
.jsc-divider { height: 1px; background: var(--jsc-color-line); border: 0; }
.jsc-dashed-link { color: var(--jsc-color-ink); text-decoration: none; border-bottom: 1px dashed var(--jsc-color-line-strong); padding-bottom: 1px; }

/* ════════════════════════════════════════════════════════════════════════════
   Portal chrome (wave 1) — shared shells, navigation, and feedback pieces for
   the authed portal restyles, ported from the reference surfaces:
   account/account.css, pm/pm.css, cleaner/inbox.html, Admin/admin.css.
   Companion hexes without a token (#B8CFA1, #7C2D17, #234861) are the
   reference's de-facto pill/avatar tones — same approach as the v0.5 pills.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── TopTabNav (.acct-nav): sticky bone bar, underline tabs, right slots ── */
.jsc-topnav { padding: 16px 56px; border-bottom: 1px solid var(--jsc-color-line-soft); display: flex; align-items: center; justify-content: space-between; background: var(--jsc-color-bone); position: sticky; top: 0; z-index: 50; }
.jsc-topnav-left { display: flex; align-items: center; gap: 28px; }
.jsc-topnav-tabs { display: flex; gap: 20px; font-size: 14px; }
.jsc-topnav-tabs a { color: var(--jsc-color-ink-2); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; transition: color var(--jsc-motion-duration-fast) ease, border-color var(--jsc-motion-duration-fast) ease; }
.jsc-topnav-tabs a:hover { color: var(--jsc-color-leaf); }
.jsc-topnav-tabs a.on, .jsc-topnav-tabs a[aria-current="page"] { color: var(--jsc-color-ink); border-bottom-color: var(--jsc-color-leaf); }
.jsc-topnav-right { display: flex; align-items: center; gap: 14px; }
/* User pill (.acct-user-pill) — pair with .jsc-avatar (sm). Button-friendly resets included. */
.jsc-user-pill { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; background: var(--jsc-color-paper); border: 1px solid var(--jsc-color-line); border-radius: var(--jsc-radius-pill); font-size: 13px; font-family: inherit; color: inherit; cursor: pointer; }

/* ── SidebarShell (.pm-shell): 240px sticky sidebar + main column ── */
.jsc-app-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.jsc-app-side { background: var(--jsc-color-paper); border-right: 1px solid var(--jsc-color-line); padding: 20px 18px; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
/* Sidebar logo runs slightly smaller than the marketing lockup (.pm-side-logo). */
.jsc-app-side .jsc-logo { font-size: 20px; padding: 6px 0; }
.jsc-app-side .jsc-logo-mark { width: 24px; height: 24px; font-size: 14px; }
.jsc-org-card { padding: 14px 12px; background: var(--jsc-color-surface-2); border-radius: var(--jsc-radius-md); border: 1px solid var(--jsc-color-line); }
.jsc-org-card-name { font-size: 14px; font-weight: 600; color: var(--jsc-color-ink); }
.jsc-org-card-meta { font-family: var(--jsc-font-mono); font-size: 11px; color: var(--jsc-color-ink-3); letter-spacing: 0.1em; margin-top: 4px; }
.jsc-side-tabs { display: flex; flex-direction: column; gap: 2px; }
.jsc-side-tabs a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; font-size: 14px; color: var(--jsc-color-ink-2); text-decoration: none; border-radius: var(--jsc-radius-md); transition: background var(--jsc-motion-duration-fast) ease, color var(--jsc-motion-duration-fast) ease; }
.jsc-side-tabs a:hover { background: var(--jsc-color-surface-2); color: var(--jsc-color-ink); }
.jsc-side-tabs a.on, .jsc-side-tabs a[aria-current="page"] { background: var(--jsc-color-leaf-bg); color: var(--jsc-color-moss); font-weight: 600; }
.jsc-side-footer { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--jsc-color-line-soft); display: flex; flex-direction: column; gap: 12px; }
.jsc-app-main { padding: 32px 40px 48px; overflow-x: hidden; }

/* ── PageHeader (.acct-header / .pm-header): eyebrow + serif h1 + lead + CTA ── */
.jsc-page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 28px; flex-wrap: wrap; }
.jsc-page-header h1 { font-family: var(--jsc-font-display); font-size: clamp(44px, 5vw, 56px); letter-spacing: -0.02em; font-weight: 400; margin: 12px 0 6px; line-height: 1; }
.jsc-page-header h1 em { font-style: italic; color: var(--jsc-color-leaf); }
.jsc-page-header-lead { font-size: 16px; color: var(--jsc-color-ink-3); max-width: 560px; line-height: 1.55; margin: 0; }
.jsc-page-header-cta { display: flex; gap: 10px; }

/* ── Modal (.acct-modal-bg / .acct-modal): blurred ink scrim + paper panel ── */
.jsc-modal-bg { position: fixed; inset: 0; background: rgba(26, 30, 27, 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 24px; }
.jsc-modal { background: var(--jsc-color-paper); border-radius: var(--jsc-radius-lg); padding: 32px; max-width: 520px; width: 100%; border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: var(--jsc-shadow-3); }
.jsc-modal:focus { outline: none; }
.jsc-modal-title { font-family: var(--jsc-font-display); font-size: 28px; letter-spacing: -0.01em; font-weight: 400; margin: 0; }
.jsc-modal-lead { font-size: 14px; color: var(--jsc-color-ink-3); margin: 8px 0 0; line-height: 1.55; }
.jsc-modal-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* ── Avatar (.av / .pm-avatar / .cleaner-card .avatar): display-font initials ── */
.jsc-avatar { width: 36px; height: 36px; border-radius: var(--jsc-radius-pill); background: var(--jsc-color-gold-soft); color: var(--jsc-color-moss); display: inline-grid; place-items: center; font-family: var(--jsc-font-display); font-size: 16px; flex-shrink: 0; }
.jsc-avatar-sm { width: 28px; height: 28px; font-size: 14px; }
.jsc-avatar-lg { width: 52px; height: 52px; font-size: 22px; }
.jsc-avatar-t2 { background: var(--jsc-color-coral-soft); color: #7C2D17; }
.jsc-avatar-t3 { background: var(--jsc-color-sky-soft); color: #234861; }
.jsc-avatar-t4 { background: var(--jsc-color-leaf-bg); color: var(--jsc-color-moss); }

/* ── Dashed empty state (.acct-empty) — modifier on .jsc-empty-state ── */
.jsc-empty-dashed { background: var(--jsc-color-surface-2); border: 1px dashed var(--jsc-color-line-strong); border-radius: var(--jsc-radius-lg); padding: 32px 28px; text-align: center; max-width: none; }
.jsc-empty-icon { display: block; font-family: var(--jsc-font-display); font-size: 40px; color: var(--jsc-color-ink-3); }
.jsc-empty-dashed h2 { font-family: var(--jsc-font-display); font-size: 22px; letter-spacing: -0.01em; font-weight: 400; margin: 8px 0 4px; }
.jsc-empty-dashed p { font-size: 14px; color: var(--jsc-color-ink-2); line-height: 1.5; max-width: 420px; margin: 0 auto; }

/* ── Skeleton (Admin .skel, on kit surfaces): surface-2 → surface-3 shimmer ── */
.jsc-skeleton { display: block; height: 14px; border-radius: var(--jsc-radius-md); background: linear-gradient(90deg, var(--jsc-color-surface-2) 0%, var(--jsc-color-surface-3) 50%, var(--jsc-color-surface-2) 100%); background-size: 200% 100%; animation: jsc-skeleton-shimmer 1.4s ease-in-out infinite; }
@keyframes jsc-skeleton-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .jsc-skeleton { animation: none; background: var(--jsc-color-surface-2); } }

/* ── DarkHeroCard (.upcoming-card): ink hero with ghost-on-dark actions ── */
.jsc-hero-card { background: var(--jsc-color-ink); color: var(--jsc-color-paper); border-radius: var(--jsc-radius-lg); padding: 32px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; }
.jsc-hero-card .jsc-eyebrow { color: var(--jsc-color-leaf-soft); }
.jsc-hero-card-title { font-family: var(--jsc-font-display); font-size: 40px; line-height: 1; letter-spacing: -0.02em; margin: 12px 0 8px; color: var(--jsc-color-paper); font-weight: 400; }
.jsc-hero-card-meta { font-size: 14px; color: rgba(244, 239, 230, 0.7); margin: 0; }
.jsc-hero-card-actions { display: flex; gap: 8px; }
.jsc-button-ghost-dark { background: transparent; color: var(--jsc-color-paper); border-color: rgba(244, 239, 230, 0.3); }

/* ── AuthSplit (.auth-grid): form column + dark benefits aside ── */
.jsc-auth-grid { min-height: calc(100vh - 60px); display: grid; grid-template-columns: 1.1fr 1fr; }
.jsc-auth-left { padding: 64px 56px; display: flex; flex-direction: column; justify-content: center; max-width: 540px; margin-left: auto; }
.jsc-auth-left .jsc-eyebrow { letter-spacing: 0.16em; }
.jsc-auth-aside { background: var(--jsc-color-ink); color: var(--jsc-color-paper); padding: 64px 56px; display: flex; flex-direction: column; justify-content: center; }
.jsc-auth-aside .jsc-eyebrow { color: var(--jsc-color-leaf-soft); letter-spacing: 0.16em; }
.jsc-auth-aside h2 { font-family: var(--jsc-font-display); font-size: 40px; color: var(--jsc-color-paper); margin: 16px 0 24px; line-height: 1.05; letter-spacing: -0.02em; font-weight: 400; }
.jsc-auth-aside h2 em { color: var(--jsc-color-leaf-soft); font-style: italic; }
.jsc-auth-aside ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 16px; }
.jsc-auth-aside li { display: flex; gap: 14px; align-items: flex-start; }
.jsc-auth-aside-ic { width: 28px; height: 28px; border-radius: var(--jsc-radius-sm); background: rgba(217, 229, 199, 0.12); color: var(--jsc-color-leaf-soft); display: grid; place-items: center; font-size: 14px; flex-shrink: 0; }
.jsc-auth-aside-desc { font-size: 13.5px; color: rgba(244, 239, 230, 0.78); line-height: 1.5; }
/* Auth form companions (.auth-form .field-label / 46px inputs). */
.jsc-form-label-mono { font-family: var(--jsc-font-mono); font-size: 10.5px; color: var(--jsc-color-ink-3); letter-spacing: 0.12em; text-transform: uppercase; display: block; margin-bottom: 8px; }
.jsc-input-lg { height: 46px; min-height: 46px; padding: 0 14px; font-size: 15px; }

/* Auth forms (wave 3 — PasswordLoginForm / SetPasswordForm / AuthMethodChooser). Presentational
   shell only; copy is supplied per-portal. Composes inside .jsc-auth-left. */
.jsc-auth-form { display: grid; gap: 18px; }
.jsc-auth-form-heading { font-family: var(--jsc-font-display); font-size: 28px; font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
.jsc-auth-error { margin: 0; padding: 10px 14px; border-radius: var(--jsc-radius-md); background: var(--jsc-color-coral-soft); color: #842F1E; border: 1px solid var(--jsc-color-coral); font-size: 14px; }
.jsc-auth-actions { display: grid; gap: 10px; margin-top: 4px; }
.jsc-auth-method { display: inline-flex; gap: 4px; padding: 4px; background: var(--jsc-color-surface-2); border-radius: var(--jsc-radius-pill); }
.jsc-auth-method-tab { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 8px 16px; border-radius: var(--jsc-radius-pill); font: inherit; font-size: 13.5px; color: var(--jsc-color-ink-3); }
.jsc-auth-method-tab.on { background: var(--jsc-color-surface); color: var(--jsc-color-ink); box-shadow: var(--jsc-shadow-1); }
.jsc-auth-method-tab:focus-visible { outline: none; box-shadow: var(--jsc-shadow-focus); }

/* ── Toggle (Admin .toggle as a real switch button): 36×20 track, 16px knob ── */
.jsc-toggle { position: relative; display: inline-block; width: 36px; height: 20px; padding: 0; border: 0; background: var(--jsc-color-line); border-radius: var(--jsc-radius-pill); cursor: pointer; flex-shrink: 0; transition: background .15s; }
.jsc-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: left .15s; }
.jsc-toggle[aria-checked="true"] { background: var(--jsc-color-leaf); }
.jsc-toggle[aria-checked="true"]::after { left: 18px; }
.jsc-toggle:disabled { background: var(--jsc-color-surface-2); cursor: not-allowed; }
.jsc-toggle:disabled::after { background: var(--jsc-color-mute); }
.jsc-toggle-field { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.jsc-toggle-label { font-size: 14px; }

/* ── InfoBanner (cleaner .info-banner): leaf-soft note ── */
.jsc-info-banner { background: var(--jsc-color-leaf-bg); border: 1px solid #B8CFA1; border-radius: var(--jsc-radius-md); padding: 12px 14px; font-size: 12.5px; color: var(--jsc-color-moss); line-height: 1.55; }

/* ── Row patterns (.booking-row / .date-block) — CSS-only, compose freely ── */
.jsc-booking-row { display: grid; grid-template-columns: 72px 1fr 130px 110px auto; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--jsc-color-line-soft); align-items: center; transition: background var(--jsc-motion-duration-fast) ease; }
.jsc-booking-row:last-child { border-bottom: 0; }
.jsc-booking-row:hover { background: rgba(46, 107, 58, 0.035); }
.jsc-date-block { font-family: var(--jsc-font-display); font-size: 28px; line-height: 1; color: var(--jsc-color-ink); text-align: center; }
.jsc-date-block-day { display: block; font-size: 10.5px; font-family: var(--jsc-font-mono); color: var(--jsc-color-ink-3); letter-spacing: 0.14em; margin-top: 4px; }

/* ── StatTile (.inv-stat / .prop-stat): mono label + serif value tile ── */
.jsc-stat { background: var(--jsc-color-paper); border: 1px solid var(--jsc-color-line); border-radius: var(--jsc-radius-lg); padding: 22px 24px; }
.jsc-stat-label { font-family: var(--jsc-font-mono); font-size: 10.5px; color: var(--jsc-color-ink-3); letter-spacing: 0.12em; text-transform: uppercase; }
.jsc-stat-value { font-family: var(--jsc-font-display); font-size: 32px; line-height: 1; color: var(--jsc-color-ink); letter-spacing: -0.02em; margin-top: 8px; }
.jsc-stat-leaf .jsc-stat-value { color: var(--jsc-color-leaf); }
.jsc-stat-coral .jsc-stat-value { color: var(--jsc-color-coral); }
.jsc-stat-sub { font-size: 12.5px; color: var(--jsc-color-ink-3); margin-top: 6px; }

/* ── CleanerShell (cleaner inbox.html) — responsive (v0.7) ────────────────────
   The cleaner PWA serves one component tree to phones AND to tablet/desktop
   browsers (a supervisor opening the field app on a laptop). The treatment is
   mobile-first:
     • ≤640px (phone): full-bleed native-mobile frame — the reference design.
       Dark sticky header, scrollable top tabs, edge-to-edge body. Unchanged.
     • >640px (tablet/desktop): the shell becomes a CENTERED APP CARD on the
       bone field rather than a 480px phone column stranded mid-screen. The
       card grows to a readable max (~760px, →820px on wide screens) with
       generous body padding and vertical breathing room, a hairline border +
       soft shadow, and rounded corners. The dark header and tab bar span the
       FULL card width (not pinned at 480px) so the chrome stays coherent, and
       the sticky header rounds with the card top. Content can opt into a
       2-up layout on wide screens via the `.jsc-cleaner-grid` body helper.
   Chosen over "widen column + full-bleed header" because the cleaner app is a
   focused task surface (one cleaner's day), not a data console — a contained
   card reads as a comfortable app and keeps the mobile chrome legible at desk
   widths without restyling the header into a desktop top-bar. Reduced-motion
   safe (only the shared transition reset applies); no horizontal overflow at
   390 / 768 / 1280 (the tab bar scrolls; the card is width-bounded). The class
   hooks the app/tests/smoke depend on (.jsc-cleaner-shell, .jsc-cleaner-header,
   .jsc-cleaner-tabs, …) are emission-stable — only their CSS gains breakpoints. */
.jsc-cleaner-shell { width: 100%; margin: 0 auto; background: var(--jsc-color-bone); min-height: 100vh; }
.jsc-cleaner-header { background: var(--jsc-color-ink); color: var(--jsc-color-paper); padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; z-index: 10; }
.jsc-cleaner-header-who { display: flex; gap: 10px; align-items: center; min-width: 0; }
.jsc-cleaner-header-name { font-size: 14px; font-weight: 600; }
.jsc-cleaner-header-role { font-family: var(--jsc-font-mono); font-size: 10.5px; color: rgba(244, 239, 230, 0.6); letter-spacing: 0.06em; }
.jsc-cleaner-tabs { background: var(--jsc-color-paper); border-bottom: 1px solid var(--jsc-color-line); display: flex; gap: 0; padding: 0 4px; overflow-x: auto; }
.jsc-cleaner-tabs a { padding: 14px 12px; text-decoration: none; font-size: 13px; color: var(--jsc-color-ink-2); border-bottom: 2px solid transparent; white-space: nowrap; }
.jsc-cleaner-tabs a.on, .jsc-cleaner-tabs a[aria-current="page"] { color: var(--jsc-color-ink); border-bottom-color: var(--jsc-color-leaf); font-weight: 600; }
.jsc-tab-count { background: var(--jsc-color-leaf); color: #fff; border-radius: var(--jsc-radius-pill); padding: 1px 6px; font-size: 10px; margin-left: 4px; }
.jsc-cleaner-body { padding: 20px; }
/* Opt-in body grid: single column on phones, 2-up once the card is wide enough
   (job cards, panels, KPI tiles get room to breathe instead of stacking tall). */
.jsc-cleaner-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
/* >640px: contained app card. The card max-width steps up at 1024px; the dark
   header + tabs round with the card top so the chrome reads as one surface. */
@media (min-width: 641px) {
  .jsc-cleaner-shell { max-width: 760px; min-height: auto; margin: clamp(20px, 4vw, 48px) auto; border: 1px solid var(--jsc-color-line); border-radius: var(--jsc-radius-lg); box-shadow: var(--jsc-shadow-2); overflow: hidden; }
  .jsc-cleaner-header { padding: 20px 28px; border-radius: var(--jsc-radius-lg) var(--jsc-radius-lg) 0 0; }
  .jsc-cleaner-tabs { padding: 0 12px; }
  .jsc-cleaner-body { padding: 28px; }
  .jsc-cleaner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .jsc-cleaner-shell { max-width: 820px; }
  .jsc-cleaner-body { padding: 32px 36px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Console chrome (v0.6) — the Admin operator design (Admin/admin.css +
   Admin/Design System.md) promoted to THE canonical portal language for the
   admin portal, cleaner PWA, PM portal, and customer portal. Promoted from
   admin-web's app-local .adm-* layer, which these families supersede.
   Values are reference-exact; the rgba(255,255,255,*) sidebar text tiers and
   one-off wash hexes (#FFF4E8 / #F4B26B / #985A0E alert KPI, toast tones)
   are the reference's de-facto tokens, kept literal like the pill tones.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── SidebarShell tone="ink" (Admin aside.side): 232px ink rail, white text
      tiers, 2px leaf left-border active state, mono group eyebrows ── */
.jsc-app-shell-ink { grid-template-columns: 232px 1fr; }
.jsc-app-side-ink { background: var(--jsc-color-ink); color: var(--jsc-color-paper); border-right: 0; padding: 0; gap: 0; }
.jsc-app-side-ink .jsc-logo { color: var(--jsc-color-paper); font-size: 22px; gap: 10px; padding: 22px 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
/* Grouped nav (Admin .grp): works in both tones; groups inherit the tabs column gap. */
.jsc-side-group { display: flex; flex-direction: column; gap: inherit; }
.jsc-side-group-label { font-family: var(--jsc-font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--jsc-color-ink-3); margin: 0; padding: 18px 12px 6px; }
/* Nav companions (Admin sidebar anatomy): count badge (coral default, leaf modifier) + 16px glyph slot. */
.jsc-side-badge { margin-left: auto; background: var(--jsc-color-coral); color: #fff; border-radius: var(--jsc-radius-pill); font-size: 10px; padding: 1px 7px; font-weight: 600; font-family: var(--jsc-font-mono); }
.jsc-side-badge-leaf { background: var(--jsc-color-leaf); }
.jsc-side-glyph { width: 16px; text-align: center; font-size: 14px; opacity: 0.7; flex-shrink: 0; }
.jsc-app-side-ink .jsc-side-tabs { gap: 0; }
.jsc-app-side-ink .jsc-side-tabs a { gap: 10px; padding: 9px 24px; font-size: 13.5px; color: rgba(255, 255, 255, 0.75); border-left: 2px solid transparent; border-radius: 0; }
.jsc-app-side-ink .jsc-side-tabs a:hover { color: var(--jsc-color-paper); background: rgba(255, 255, 255, 0.04); }
.jsc-app-side-ink .jsc-side-tabs a.on, .jsc-app-side-ink .jsc-side-tabs a[aria-current="page"] { color: var(--jsc-color-paper); background: rgba(255, 255, 255, 0.06); border-left-color: var(--jsc-color-leaf); font-weight: 400; }
.jsc-app-side-ink .jsc-side-group-label { color: rgba(255, 255, 255, 0.45); padding: 18px 24px 6px; }
.jsc-app-side-ink .jsc-side-footer { padding: 16px 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.jsc-app-side-ink .jsc-language-toggle, .jsc-app-side-ink .jsc-language-toggle a { color: rgba(255, 255, 255, 0.75); border-color: rgba(255, 255, 255, 0.18); }
.jsc-app-side-ink .jsc-language-toggle [aria-current="true"] { background: var(--jsc-color-leaf); color: #fff; }

/* ── Topline (Admin .topline): mono 11px crumb + serif 44px h1 (one italic
      leaf em) + right actions/search cluster ── */
.jsc-topline { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.jsc-topline-crumb { font-family: var(--jsc-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jsc-color-ink-3); }
.jsc-topline h1 { font-family: var(--jsc-font-display); font-size: 44px; letter-spacing: -0.02em; margin: 4px 0 0; font-weight: 400; line-height: 1.05; }
.jsc-topline h1 em { color: var(--jsc-color-leaf); font-style: italic; }
.jsc-topline-lede { font-size: 13.5px; color: var(--jsc-color-ink-2); line-height: 1.5; margin: 8px 0 0; max-width: 70ch; }
.jsc-topline-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-bottom: 6px; }
/* In the topline the search holds the Admin 280px spec; in .jsc-fbar it stays fluid. */
.jsc-topline-actions .jsc-search { flex: 0 1 280px; }

/* ── KPI strip (Admin .kpis/.kpi): StatTile console variant in a .jsc-kpis row ── */
.jsc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; }
.jsc-kpi { background: var(--jsc-color-surface); border: 1px solid var(--jsc-color-line); border-radius: var(--jsc-radius-md); padding: 14px 16px; }
.jsc-kpi .jsc-stat-label { font-size: 10.5px; letter-spacing: 0.14em; }
.jsc-kpi .jsc-stat-value { font-size: 36px; margin-top: 8px; letter-spacing: -0.02em; line-height: 1; }
.jsc-kpi .jsc-stat-value em { color: var(--jsc-color-leaf); font-style: italic; }
.jsc-kpi .jsc-stat-sub { font-family: var(--jsc-font-mono); font-size: 11px; margin-top: 6px; }
.jsc-kpi-delta { font-family: var(--jsc-font-mono); font-size: 11px; margin-top: 6px; color: var(--jsc-color-leaf); }
.jsc-kpi-delta-dn { color: var(--jsc-color-coral); }
/* Alert KPI (Design System §3.6): amber wash + burnt-amber value. One per page, max. */
.jsc-kpi-alert { background: #FFF4E8; border-color: #F4B26B; }
.jsc-kpi-alert .jsc-stat-value { color: #985A0E; }

/* ── Panel (Admin .panel): the console workhorse — heading bar over body ── */
.jsc-panel { background: var(--jsc-color-surface); border: 1px solid var(--jsc-color-line); border-radius: var(--jsc-radius-md); }
.jsc-panel-hd { padding: 14px 18px; border-bottom: 1px solid var(--jsc-color-line-soft); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.jsc-panel-hd h3 { font-family: var(--jsc-font-display); font-size: 22px; letter-spacing: -0.01em; margin: 0; font-weight: 400; }
.jsc-panel-meta { font-family: var(--jsc-font-mono); font-size: 11px; color: var(--jsc-color-ink-3); letter-spacing: 0.1em; text-transform: uppercase; }
.jsc-panel-actions { display: flex; gap: 8px; align-items: center; }
.jsc-panel-bd { padding: 6px 0; }
.jsc-panel-bd-pad { padding: 14px 18px; }

/* ── Console table skin (Admin .tbl): wrap a DataTable in .jsc-tbl inside a
      Panel — mono 10.5px uppercase thead on surface-2, 14×18 cells, paper
      row-hover tint. The Panel header names the table, so the caption is
      visually hidden (it stays in the accessibility tree). ── */
.jsc-tbl .jsc-table { background: transparent; border-radius: 0; font-size: 13.5px; }
.jsc-tbl .jsc-table caption { padding: 0; height: 1px; width: 1px; position: absolute; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jsc-tbl .jsc-table th { background: var(--jsc-color-surface-2); border-top: 0; border-bottom: 1px solid var(--jsc-color-line-soft); font-family: var(--jsc-font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--jsc-color-ink-3); padding: 12px 18px; }
.jsc-tbl .jsc-table th .jsc-th-sort { font: inherit; letter-spacing: inherit; text-transform: inherit; }
.jsc-tbl .jsc-table td { border-top: 0; border-bottom: 1px solid var(--jsc-color-line-soft); padding: 14px 18px; vertical-align: middle; }
.jsc-tbl .jsc-table tbody tr:last-child td { border-bottom: 0; }
.jsc-tbl .jsc-table tbody tr:hover td { background: var(--jsc-color-paper); }
.jsc-tbl .jsc-table-empty { color: var(--jsc-color-ink-3); font-size: 13.5px; }
/* Cell helpers (Admin .tbl .nm / .sub): primary name + mono id/timestamp sub-row. */
.jsc-tbl-nm { font-weight: 500; }
.jsc-tbl-sub { font-family: var(--jsc-font-mono); font-size: 10.5px; color: var(--jsc-color-ink-3); letter-spacing: 0.08em; margin-top: 2px; }

/* ── Pager skin (Admin .pager): wrap a Pagination in .jsc-pager as a panel
      footer — mono status, 32px squares; a numbered page in a .jsc-pager-pages
      row marked .on (or aria-current="page") inverts to ink/paper. ── */
.jsc-pager .jsc-pagination { margin: 0; padding: 14px 18px; border-top: 1px solid var(--jsc-color-line-soft); }
.jsc-pager .jsc-pagination-status { font-family: var(--jsc-font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--jsc-color-ink-3); }
.jsc-pager .jsc-button { min-height: 32px; min-width: 32px; padding: 0 10px; font-size: 12.5px; }
.jsc-pager-pages { display: flex; gap: 6px; }
.jsc-pager .jsc-button.on, .jsc-pager .jsc-button[aria-current="page"] { background: var(--jsc-color-ink); color: var(--jsc-color-paper); border-color: var(--jsc-color-ink); }

/* ── Filter bar (Admin .fbar/.fchip/.fselect + reference .pm-search):
      list-page filter row — chips, chip-look selects, 42px icon search ── */
.jsc-fbar { display: flex; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--jsc-color-line-soft); align-items: center; flex-wrap: wrap; }
.jsc-fchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--jsc-radius-pill); background: var(--jsc-color-surface); border: 1px solid var(--jsc-color-line); font-family: var(--jsc-font-sans); font-size: 12.5px; color: var(--jsc-color-ink-2); cursor: pointer; transition: all .12s; white-space: nowrap; }
.jsc-fchip:hover { border-color: var(--jsc-color-line-strong); }
.jsc-fchip.on, .jsc-fchip[aria-pressed="true"] { background: var(--jsc-color-ink); color: var(--jsc-color-paper); border-color: var(--jsc-color-ink); }
.jsc-fchip-ct { font-family: var(--jsc-font-mono); font-size: 10.5px; opacity: 0.65; }
.jsc-fchip-divider { width: 1px; height: 20px; background: var(--jsc-color-line); margin: 0 4px; align-self: center; }
.jsc-fselect { display: inline-flex; align-items: center; height: 30px; padding: 0 28px 0 12px; border-radius: var(--jsc-radius-pill); border: 1px solid var(--jsc-color-line); font-family: var(--jsc-font-sans); font-size: 12.5px; color: var(--jsc-color-ink-2); cursor: pointer; appearance: none; -webkit-appearance: none; background: var(--jsc-color-surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path fill='%236F6F65' d='M2.5 4l2.5 2.5L7.5 4z'/></svg>") no-repeat right 10px center; }
.jsc-fselect:hover { border-color: var(--jsc-color-line-strong); }
.jsc-fselect:focus { outline: none; border-color: var(--jsc-color-ink); }
.jsc-search { flex: 1; min-width: 240px; height: 42px; background: var(--jsc-color-paper); border: 1px solid var(--jsc-color-line); border-radius: var(--jsc-radius-md); padding: 0 14px; display: flex; align-items: center; gap: 10px; }
.jsc-search:focus-within { border-color: var(--jsc-color-ink); }
.jsc-search-ic { color: var(--jsc-color-ink-3); font-size: 14px; }
.jsc-search-input { flex: 1; height: 100%; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 14px; color: var(--jsc-color-ink); outline: none; }

/* ── Console modal composition (Design System §12): .jsc-modal-hd/-bd/-ft
      inside the kit Modal. The :has() hook swaps the Modal panel to the flush
      console card; the legacy .jsc-modal-title/-lead/-foot keep working. ── */
.jsc-modal:has(> .jsc-modal-hd) { padding: 0; overflow: hidden; background: var(--jsc-color-surface); border: 0; border-radius: var(--jsc-radius-md); }
.jsc-modal-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 20px 24px 14px; border-bottom: 1px solid var(--jsc-color-line-soft); }
.jsc-modal-hd h3 { font-family: var(--jsc-font-display); font-size: 28px; margin: 0; font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; }
.jsc-modal-hd h3 em { color: var(--jsc-color-leaf); font-style: italic; }
.jsc-modal-crumb { font-family: var(--jsc-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--jsc-color-ink-3); margin-bottom: 4px; }
.jsc-modal-x { background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--jsc-color-ink-3); padding: 4px 8px; line-height: 1; border-radius: var(--jsc-radius-sm); flex-shrink: 0; }
.jsc-modal-x:hover { color: var(--jsc-color-ink); background: var(--jsc-color-surface-2); }
.jsc-modal-bd { padding: 20px 24px; }
.jsc-modal-bd p { font-size: 14px; color: var(--jsc-color-ink-2); line-height: 1.5; margin: 0 0 12px; }
.jsc-modal-bd p:last-child { margin-bottom: 0; }
.jsc-modal-ft { padding: 14px 24px; border-top: 1px solid var(--jsc-color-line-soft); display: flex; justify-content: flex-end; gap: 8px; background: var(--jsc-color-paper); }

/* ── Toast (Admin .toast): console action feedback, pinned bottom-right.
      Render Toast components inside a .jsc-toast-stack container. ── */
.jsc-toast-stack { position: fixed; bottom: 24px; right: 24px; z-index: 1000; display: flex; flex-direction: column; gap: 8px; max-width: 420px; pointer-events: none; }
.jsc-toast { pointer-events: auto; background: var(--jsc-color-ink); color: var(--jsc-color-paper); padding: 12px 16px; border-radius: var(--jsc-radius-md); font-size: 13px; line-height: 1.45; box-shadow: 0 12px 32px -8px rgba(26, 30, 27, 0.35); animation: jsc-toast-in .25s ease-out; }
.jsc-toast-key { display: block; font-family: var(--jsc-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #9FBE78; margin-bottom: 4px; }
.jsc-toast-warn { background: #7A5E0A; }
.jsc-toast-warn .jsc-toast-key { color: #FFE9CC; }
.jsc-toast-bad { background: #A03316; }
.jsc-toast-bad .jsc-toast-key { color: #FCE2D7; }
@keyframes jsc-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .jsc-toast { animation: none; } }

/* ── Portal chrome responsive collapse (reference 900px / 480px rules) ── */
@media (max-width: 900px) {
  .jsc-topnav { padding: 12px 20px; flex-wrap: wrap; gap: 12px; }
  .jsc-topnav-tabs { flex-wrap: wrap; gap: 12px; font-size: 13px; }
  .jsc-app-shell { grid-template-columns: 1fr; }
  .jsc-app-side { position: static; height: auto; flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; }
  .jsc-org-card, .jsc-side-footer { display: none; }
  .jsc-side-tabs { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .jsc-side-tabs a { padding: 6px 10px; font-size: 12px; }
  .jsc-app-main { padding: 24px 16px; }
  .jsc-page-header h1 { font-size: 40px; }
  .jsc-hero-card { grid-template-columns: 1fr; }
  .jsc-auth-grid { grid-template-columns: 1fr; }
  .jsc-auth-left, .jsc-auth-aside { padding: 40px 24px; max-width: none; margin: 0; }
  .jsc-booking-row { grid-template-columns: 60px 1fr; gap: 12px; }
  .jsc-booking-row > :nth-child(n+3) { grid-column: span 2; }
  /* Console chrome (v0.6): the ink sidebar collapses identically to the paper one —
     group labels hide, grouped links flow into the same horizontal wrap bar. */
  .jsc-side-group { display: contents; }
  .jsc-side-group-label { display: none; }
  .jsc-app-side-ink .jsc-logo { padding: 6px 0; border-bottom: 0; }
  .jsc-app-side-ink .jsc-side-tabs { gap: 4px; }
  .jsc-app-side-ink .jsc-side-tabs a { padding: 6px 10px; font-size: 12px; }
  .jsc-topline h1 { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; } }

/* Print foundation: clean paper output for CleanCheck reports, invoices, etc. */
.jsc-print-only { display: none; }
@page { margin: 1.6cm; }
@media print {
  html { background: #fff; }
  body { font-size: 11pt; line-height: 1.45; }
  /* Drop interactive / navigational chrome that shouldn't appear on paper. */
  .jsc-skip-link, .jsc-cookie-banner, .jsc-language-toggle, .jsc-shell-header, .jsc-shell-footer, .jsc-button, .jsc-print-hidden,
  .jsc-topnav, .jsc-app-side, .jsc-cleaner-header, .jsc-cleaner-tabs, .jsc-modal-bg, .jsc-skeleton,
  .jsc-toast-stack, .jsc-toast, .jsc-fbar, .jsc-topline-actions, .jsc-pager .jsc-pagination { display: none !important; }
  .jsc-app-shell { display: block !important; }
  .jsc-print-only { display: revert !important; }
  .jsc-main { padding: 0 !important; }
  .jsc-card, .jsc-state { box-shadow: none !important; border-color: rgba(26, 30, 27, .3); break-inside: avoid; }
  /* CleanerShell (v0.7): on paper the >640px app card drops its frame and the
     opt-in body grid collapses, so a run sheet prints as a plain full-width page. */
  .jsc-cleaner-shell { max-width: none !important; margin: 0 !important; border: 0 !important; box-shadow: none !important; }
  .jsc-cleaner-grid { display: block !important; }
  /* Console chrome (v0.6, per the Admin print sheet): keep panel borders for run sheets, smaller h1. */
  .jsc-panel { border: 1px solid #999 !important; box-shadow: none !important; break-inside: avoid; }
  .jsc-topline h1 { font-size: 28px !important; }
  .jsc-table-wrap { overflow: visible !important; }
  .jsc-table thead { display: table-header-group; }
  .jsc-table caption, .jsc-table tr { break-inside: avoid; }
  .jsc-pill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  h1, h2, h3 { break-after: avoid; }
  img { max-width: 100% !important; break-inside: avoid; }
}