/* css/tokens.css */
/* ==========================================================================
   Weesify "Aurora" design tokens v2 — docs/design/DESIGN_LANGUAGE.md
   Emerald identity, lime energy, violet intelligence (Assist), tangerine heat.
   Single source of truth for colour, type, space, radius, elevation, motion.
   ========================================================================== */
@layer reset, tokens, base, components, utilities;

@font-face { font-family: "Manrope"; font-weight: 200 800; font-style: normal; font-display: swap; src: url("/fonts/Manrope-Variable.woff") format("woff"); }
@font-face { font-family: "Urbanist"; font-weight: 100 900; font-style: normal; font-display: swap; src: url("/fonts/Urbanist-Variable.woff") format("woff"); }
@font-face { font-family: "Instrument Serif"; font-weight: 400; font-style: italic; font-display: swap; src: url("/fonts/InstrumentSerif-Italic.woff") format("woff"); }

@layer tokens {
  :root {
    color-scheme: light;

    /* ---- Brand palette ---- */
    --emerald-50: #E9FDF4;
    --emerald-100: #CFFAE6;
    --emerald-200: #9EF2CD;
    --emerald-300: #5FE6AE;
    --emerald-400: #25D695;
    --emerald-500: #0BC284;
    --emerald-600: #07A06C;
    --emerald-700: #067C55;
    --emerald-800: #065E41;
    --forest-900: #062A1E;
    --forest-950: #03170F;
    --ink-raw: #0B0F0D;

    --lime-300: #D9FB8F;
    --lime-400: #C2F45B;
    --lime-500: #A6E635;

    --violet-300: #C4B5FF;
    --violet-400: #A08BFF;
    --violet-500: #7C5CFF;
    --violet-600: #6441F2;
    --violet-700: #4B2BC9;

    --tangerine-400: #FF9A5C;
    --tangerine-500: #FF7A3D;
    --tangerine-600: #E85D1E;

    --sky-500: #3B8BFF;
    --rose-500: #FF4D8D;

    /* Stone neutrals (warm-green tint) */
    --moss-0: #FFFFFF;
    --moss-25: #FBFBF9;
    --moss-50: #F5F6F3;
    --moss-100: #EEF0EC;
    --moss-200: #E4E7E2;
    --moss-300: #CDD2CB;
    --moss-400: #9BA39B;
    --moss-500: #6B736C;
    --moss-600: #4A524C;
    --moss-700: #333A35;
    --moss-800: #1E2420;
    --moss-900: #111512;

    /* ---- Semantic surfaces ---- */
    --canvas: #F1F2EE;
    --surface: #FFFFFF;
    --surface-2: #FAFAF8;
    --surface-sunken: #F4F5F2;
    --surface-hover: #F4F5F1;
    --surface-active: #ECEEE9;
    --overlay: rgb(8 12 10 / 0.42);
    --glass: rgb(255 255 255 / 0.72);
    --glass-strong: rgb(255 255 255 / 0.86);
    --glass-line: rgb(255 255 255 / 0.7);

    --ink: var(--ink-raw);
    --text: #262C28;
    --text-muted: #5F6761;
    --text-subtle: #666D67; /* ≥4.5:1 on surface, canvas and hover (WCAG AA) */
    --text-on-ink: #F6FAF7;
    --text-on-dark: #FFFFFF; /* text on dark gradient cards — same in both themes */
    --text-on-dark-muted: rgb(255 255 255 / .8);
    /* Coach surfaces: walkthroughs, tours and help callouts (R7E). A dark card in both themes; raised + bordered in dark. */
    --coach-bg: #0B0F0D;
    --coach-fg: #FFFFFF;
    --coach-muted: rgb(255 255 255 / .8);
    --coach-subtle: rgb(255 255 255 / .68);
    --coach-line: rgb(255 255 255 / .08);
    --coach-hover: rgb(255 255 255 / .1);
    --coach-track: rgb(255 255 255 / .3);
    --coach-accent: #C2F45B;
    --coach-on-accent: #0B0F0D;
    --coach-shadow: 0 24px 60px -20px rgb(8 12 10 / .6);
    --line: #E6E9E4;
    --line-strong: #D5DAD3;

    --accent: var(--emerald-500);
    --accent-hover: var(--emerald-600);
    --accent-text: var(--emerald-700);
    --accent-soft: var(--emerald-50);
    --accent-soft-2: var(--emerald-100);
    --assist: var(--violet-500);
    --assist-soft: #F1EDFF;
    --assist-text: var(--violet-600);
    --heat: var(--tangerine-500);
    --heat-soft: #FFF1E9;

    --success: var(--emerald-600);
    --success-soft: var(--emerald-50);
    --warning: #B86F00;
    --warning-soft: #FFF5E0;
    --danger: #D93A3A;
    --danger-soft: #FDECEC;
    --info: #2563EB;
    --info-soft: #EAF1FE;

    /* Data viz: validated categorical order (see dataviz notes in DESIGN_LANGUAGE.md) */
    --chart-1: #0BC284;
    --chart-2: #7C5CFF;
    --chart-3: #FF7A3D;
    --chart-4: #3B8BFF;
    --chart-5: #E4A11B;
    --chart-6: #FF4D8D;

    /* ---- Signature gradients ---- */
    --grad-aurora: linear-gradient(120deg, #0BC284 0%, #25D695 22%, #7C5CFF 62%, #FF7A3D 100%);
    --grad-brand: linear-gradient(135deg, #C2F45B 0%, #25D695 55%, #0BC284 100%);
    --grad-forest: radial-gradient(120% 120% at 100% 0%, rgb(37 214 149 / .55) 0%, transparent 52%), linear-gradient(155deg, #0B3B2A 0%, #062A1E 48%, #03170F 100%);
    --grad-violet: radial-gradient(120% 120% at 100% 0%, rgb(196 181 255 / .5) 0%, transparent 55%), linear-gradient(155deg, #7C5CFF 0%, #5B3BE8 55%, #3A1FB0 100%);
    --grad-sunset: radial-gradient(120% 120% at 0% 0%, rgb(255 214 170 / .6) 0%, transparent 50%), linear-gradient(150deg, #FF9A5C 0%, #FF7A3D 45%, #E8531E 100%);
    --grad-ink: radial-gradient(120% 140% at 100% 0%, rgb(124 92 255 / .35) 0%, transparent 45%), radial-gradient(90% 120% at 0% 100%, rgb(11 194 132 / .28) 0%, transparent 50%), linear-gradient(160deg, #15191A 0%, #0B0D0C 100%);
    --grad-mesh: radial-gradient(60% 60% at 12% 8%, rgb(194 244 91 / .28), transparent 60%), radial-gradient(50% 55% at 88% 12%, rgb(124 92 255 / .20), transparent 60%), radial-gradient(60% 60% at 70% 100%, rgb(11 194 132 / .18), transparent 60%);
    --hatch: repeating-linear-gradient(135deg, rgb(255 255 255 / .38) 0 2px, transparent 2px 7px);

    --focus-ring: 0 0 0 3px rgb(11 194 132 / 0.32);

    /* ---- Typography ---- */
    --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-display: "Urbanist", "Manrope", ui-sans-serif, system-ui, sans-serif;
    --font-accent: "Instrument Serif", "Iowan Old Style", Georgia, serif;
    --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;
    --fs-micro: 0.75rem;    /* 12 */
    --fs-small: 0.8125rem;  /* 13 */
    --fs-body: 0.875rem;    /* 14 */
    --fs-h3: 1.0625rem;     /* 17 */
    --fs-h2: 1.375rem;      /* 22 */
    --fs-h1: clamp(1.75rem, 1.2rem + 1.6vw, 2.25rem);
    --fs-display: clamp(2.5rem, 1.4rem + 4.6vw, 4.75rem);

    /* ---- Space (4px base) ---- */
    --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
    --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-14: 56px;

    /* ---- Radius ---- */
    --r-xs: 7px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px;

    /* ---- Elevation ---- */
    --e1: 0 1px 2px rgb(20 28 22 / 0.04), 0 0 0 1px rgb(20 28 22 / 0.02);
    --e2: 0 10px 30px -10px rgb(20 28 22 / 0.16), 0 2px 6px rgb(20 28 22 / 0.05);
    --e3: 0 30px 80px -20px rgb(20 28 22 / 0.32), 0 6px 16px rgb(20 28 22 / 0.08);
    --e-glow: 0 18px 50px -12px rgb(11 194 132 / 0.45);
    --e-glow-violet: 0 18px 50px -12px rgb(124 92 255 / 0.5);
    --e-inset: inset 0 1px 0 rgb(255 255 255 / 0.7);

    /* ---- Motion ---- */
    --t-instant: 80ms; --t-fast: 150ms; --t-base: 240ms; --t-slow: 380ms; --t-lazy: 700ms;
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-spring: cubic-bezier(.34, 1.45, .64, 1);

    /* ---- Layout ---- */
    --sidebar-w: 260px;
    --sidebar-rail: 72px;
    --shell-gap: 10px;
    --topbar-h: 64px;
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --canvas: #08090A;
    --surface: #111315;
    --surface-2: #14171A;
    --surface-sunken: #0C0E10;
    --surface-hover: #1A1D20;
    --surface-active: #202428;
    --overlay: rgb(0 0 0 / 0.62);
    --glass: rgb(22 25 28 / 0.66);
    --glass-strong: rgb(22 25 28 / 0.86);
    --glass-line: rgb(255 255 255 / 0.08);

    --ink: #F4F6F5;
    --text: #D9DEDB;
    --text-muted: #8E9692;
    --text-subtle: #848C88; /* ≥4.5:1 on surface, canvas and hover (WCAG AA) */
    --text-on-ink: #0B0F0D;
    --line: rgb(255 255 255 / 0.07);
    --coach-bg: #1B1F22;
    --coach-fg: #F4F6F5;
    --coach-muted: rgb(244 246 245 / .82);
    --coach-subtle: rgb(244 246 245 / .7);
    --coach-line: rgb(255 255 255 / .14);
    --coach-hover: rgb(255 255 255 / .08);
    --coach-track: rgb(255 255 255 / .3);
    --coach-shadow: 0 24px 60px -16px rgb(0 0 0 / .8);
    --line-strong: rgb(255 255 255 / 0.12);

    --accent: #2BE3A2;
    --accent-hover: #5CEFBC;
    --accent-text: #6FF2C6;
    --accent-soft: rgb(43 227 162 / 0.10);
    --accent-soft-2: rgb(43 227 162 / 0.18);
    --assist: #9A83FF;
    --assist-soft: rgb(124 92 255 / 0.14);
    --assist-text: #B9A9FF;
    --heat: #FF9A5C;
    --heat-soft: rgb(255 122 61 / 0.14);

    --success: #3DDC9A;
    --success-soft: rgb(61 220 154 / 0.12);
    --warning: #F0B44C;
    --warning-soft: rgb(240 180 76 / 0.12);
    --danger: #F17171;
    --danger-soft: rgb(241 113 113 / 0.12);
    --info: #7BA5FF;
    --info-soft: rgb(123 165 255 / 0.12);

    --chart-1: #0FA873; /* validated: scripts/validate_palette.js --mode dark */
    --chart-2: #8468FF;
    --chart-3: #E0692F;
    --chart-4: #4388F0;
    --chart-5: #BC8C14;
    --chart-6: #EC4C87;

    --grad-mesh: radial-gradient(55% 55% at 10% 0%, rgb(43 227 162 / .16), transparent 60%), radial-gradient(45% 50% at 90% 5%, rgb(124 92 255 / .20), transparent 60%), radial-gradient(60% 60% at 60% 100%, rgb(255 122 61 / .08), transparent 60%);
    --hatch: repeating-linear-gradient(135deg, rgb(0 0 0 / .28) 0 2px, transparent 2px 7px);

    --focus-ring: 0 0 0 3px rgb(43 227 162 / 0.32);
    --e1: 0 1px 2px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.02);
    --e2: 0 14px 34px -10px rgb(0 0 0 / 0.7), 0 2px 6px rgb(0 0 0 / 0.35);
    --e3: 0 34px 90px -16px rgb(0 0 0 / 0.85);
    --e-inset: inset 0 1px 0 rgb(255 255 255 / 0.05);
  }

  @media (prefers-reduced-motion: reduce) {
    :root { --t-instant: 1ms; --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; --t-lazy: 1ms; }
  }
}

/* css/base.css */
/* Reset + base typography ------------------------------------------------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-height: 100dvh; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  /* [R3B] Icon sprites (<x-icon>, Icons::svg — always focusable="false", no width/height attributes) default to a text-sized
     box. Without this, an icon with no component rule rendered at the full container width (huge icons, text squeezed
     into a vertical strip). Any component or page rule still wins (this is the lowest layer). */
  svg[focusable="false"] { inline-size: 1.15em; flex-shrink: 0; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  table { border-collapse: collapse; }
  [hidden] { display: none !important; }
  [x-cloak] { display: none !important; }
}

@layer base {
  html { background: var(--canvas); }
  body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.57;
    color: var(--text);
    background: var(--canvas);
    font-feature-settings: "kern", "calt";
    font-weight: 450;
  }
  h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
  h1 { font-size: var(--fs-h1); letter-spacing: -0.035em; }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); }
  strong, b { font-weight: 650; color: var(--ink); }
  small { font-size: var(--fs-small); }
  code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }
  ::selection { background: var(--accent-soft-2); color: var(--ink); }

  :focus { outline: none; }
  :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }

  /* Scrollbars: quiet, thin */
  * { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

  .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; }
  .skip-link { position: absolute; inset-inline-start: 12px; top: -48px; z-index: 100; padding: 8px 14px; border-radius: var(--r-sm); background: var(--ink); color: var(--text-on-ink); transition: top var(--t-fast) var(--ease-out); }
  .skip-link:focus { top: 12px; }

  .serif-accent, em.accent { font-family: var(--font-accent); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
  .display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; color: var(--ink); }
  .tabular { font-variant-numeric: tabular-nums; }

  /* Right-to-left (ADR-0058). Machine text (code, URLs, emails, phone numbers, tokens) keeps reading left to right. */
  [dir="rtl"] :is(pre, code, kbd, samp, .mono, .dv-code, .mb-code, .cs-code, .dc-code-input) { direction: ltr; unicode-bidi: isolate; }
  [dir="rtl"] input:is([type="url"], [type="email"], [type="tel"]) { direction: ltr; }
  /* Sign for transforms that move along the reading direction: translateX(calc(24px * var(--dir-sign, 1))). */
  [dir="rtl"] { --dir-sign: -1; }
  [dir="ltr"] { --dir-sign: 1; }
  /* Mirrored icons (.flip-rtl) keep their mirror when a hover rule sets its own transform: … scaleX(var(--flip-x, 1)). */
  [dir="rtl"] .flip-rtl { --flip-x: -1; }
}

/* css/components/controls.css */
/* Buttons, inputs, choice controls ---------------------------------------- */
@layer components {
  /* ---- Button ---- */
  .btn {
    --btn-h: 36px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: var(--btn-h); padding: 0 14px;
    border-radius: var(--r-sm); border: 1px solid transparent;
    font-size: var(--fs-body); font-weight: 500; line-height: 1; white-space: nowrap;
    user-select: none; position: relative;
    transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out),
                transform var(--t-instant) var(--ease-out);
  }
  .btn:active:not(:disabled) { transform: translateY(1px) scale(0.99); }
  .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
  .btn svg { width: 16px; height: 16px; flex: none; }
  .btn .kbd { margin-inline-start: 2px; }

  .btn-primary { background: var(--ink); color: var(--text-on-ink); box-shadow: var(--e1), inset 0 1px 0 rgb(255 255 255 / .08); }
  .btn-primary:hover:not(:disabled) { background: color-mix(in oklab, var(--ink) 88%, var(--accent)); }
  .btn-primary .kbd { background: rgb(255 255 255 / .12); color: inherit; border-color: rgb(255 255 255 / .16); }
  :root[data-theme="dark"] .btn-primary .kbd { background: rgb(0 0 0 / .08); border-color: rgb(0 0 0 / .12); }

  .btn-brand { background: linear-gradient(180deg, var(--emerald-500), var(--emerald-600)); color: #fff; box-shadow: var(--e1), inset 0 1px 0 rgb(255 255 255 / .2); }
  .btn-brand:hover:not(:disabled) { background: linear-gradient(180deg, var(--emerald-600), var(--emerald-700)); }

  .btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); box-shadow: var(--e1); }
  .btn-secondary:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--moss-400); }

  .btn-ghost { background: transparent; color: var(--text); }
  .btn-ghost:hover:not(:disabled) { background: var(--surface-hover); color: var(--ink); }

  .btn-danger { background: var(--danger); color: #fff; }
  .btn-danger:hover:not(:disabled) { background: color-mix(in oklab, var(--danger) 88%, black); }
  .btn-danger-ghost { color: var(--danger); }
  .btn-danger-ghost:hover:not(:disabled) { background: var(--danger-soft); }

  .btn-sm { --btn-h: 30px; padding: 0 10px; font-size: var(--fs-small); gap: 6px; }
  .btn-lg { --btn-h: 44px; padding: 0 20px; font-size: 0.9375rem; border-radius: 10px; }
  .btn-block { width: 100%; }
  .btn-icon { width: var(--btn-h); padding: 0; }

  .btn .btn-spinner { display: none; }
  .btn[data-loading] .btn-label, .btn.is-loading .btn-label { opacity: 0; }
  .btn[data-loading] .btn-spinner, .btn.is-loading .btn-spinner { display: block; position: absolute; animation: spin .7s linear infinite; }

  /* ---- Keyboard hint ---- */
  .kbd {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px;
    font-family: var(--font-sans); font-size: 11px; font-weight: 500; line-height: 1;
    color: var(--text-muted); background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--r-xs);
  }

  /* ---- Field ---- */
  .field { display: grid; gap: 6px; }
  .field-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-small); font-weight: 500; color: var(--ink); }
  .field-label .optional { font-weight: 400; color: var(--text-subtle); }
  .field-hint { font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.45; }
  /* [R3B] An icon inside a hint sits on the text line (svg is display:block by reset). */
  .field-hint > svg { display: inline-block; inline-size: 13px; block-size: 13px; vertical-align: -2px; margin-inline-end: 4px; }
  .field-error { font-size: var(--fs-micro); color: var(--danger); display: flex; gap: 6px; align-items: center; }
  .field-error svg { width: 14px; height: 14px; }

  .input, .select, .textarea {
    width: 100%; min-height: 38px; padding: 8px 12px;
    background: var(--surface); color: var(--ink);
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    box-shadow: var(--e1);
    transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out), background var(--t-fast);
  }
  .input::placeholder, .textarea::placeholder { color: var(--text-subtle); }
  .input:hover, .select:hover, .textarea:hover { border-color: var(--moss-400); }
  .input:focus, .select:focus, .textarea:focus { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; }
  .input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--danger); }
  .input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in oklab, var(--danger) 25%, transparent); }
  .input:disabled { background: var(--surface-sunken); color: var(--text-muted); }
  .textarea { min-height: 88px; resize: vertical; line-height: 1.5; }
  .select { appearance: none; padding-inline-end: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236A7872' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5'/%3E%3Cpath d='m7 9 5-5 5 5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; }
  [dir="rtl"] .select { background-position: left 10px center; }
  .input-lg { min-height: 46px; font-size: 0.9375rem; padding: 10px 14px; border-radius: 10px; }

  /* Input group: [prefix][input][suffix] */
  .input-group { display: flex; align-items: stretch; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--e1); transition: border-color var(--t-fast), box-shadow var(--t-fast); overflow: hidden; }
  .input-group:hover { border-color: var(--moss-400); }
  .input-group:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
  .input-group .input, .input-group .select { border: 0; box-shadow: none; border-radius: 0; min-width: 0; }
  /* Narrow phones (R2): the field takes the room it can get and a long prefix shrinks with an ellipsis rather than
     pushing the group past its container. */
  .input-group { min-width: 0; max-width: 100%; }
  .input-group > .input { flex: 1 1 0; width: 0; }
  .input-group > .input-addon { flex: 0 1 auto; min-width: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; }
  .input-group .input:focus, .input-group .select:focus { box-shadow: none; }
  .input-addon { display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--surface-sunken); color: var(--text-muted); font-size: var(--fs-small); white-space: nowrap; border-inline-end: 1px solid var(--line); }
  .input-addon:last-child { border-inline-end: 0; border-inline-start: 1px solid var(--line); }
  .input-addon svg { width: 16px; height: 16px; }
  .input-icon { position: relative; }
  .input-icon > svg { position: absolute; inset-inline-start: 12px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--text-subtle); pointer-events: none; }
  .input-icon > .input { padding-inline-start: 36px; }

  /* ---- Toggle (switch) ---- */
  .switch { position: relative; display: inline-flex; width: 36px; height: 20px; flex: none; }
  .switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
  .switch-track { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--moss-300); transition: background var(--t-fast) var(--ease-out); }
  .switch-track::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .2); transition: transform var(--t-base) var(--ease-spring); }
  .switch input:checked + .switch-track { background: var(--accent); }
  .switch input:checked + .switch-track::after { transform: translateX(calc(16px * var(--dir-sign, 1))); }
  .switch input:focus-visible + .switch-track { box-shadow: var(--focus-ring); }
  :root[data-theme="dark"] .switch-track { background: var(--line-strong); }

  .toggle-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 12px 0; }
  .toggle-row + .toggle-row { border-top: 1px solid var(--line); }
  .toggle-row-title { display: block; font-weight: 500; color: var(--ink); }
  .toggle-row-desc { display: block; font-size: var(--fs-small); color: var(--text-muted); }
  .toggle-row > :first-child { min-inline-size: 0; flex: 1; }

  /* ---- Checkbox / radio ---- */
  .check { appearance: none; width: 16px; height: 16px; flex: none; border: 1px solid var(--line-strong); border-radius: 4px; background: var(--surface); display: inline-grid; place-content: center; transition: background var(--t-fast), border-color var(--t-fast); cursor: pointer; }
  .check::before { content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform var(--t-fast) var(--ease-spring); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); background: #fff; }
  .check:checked { background: var(--ink); border-color: var(--ink); }
  .check:checked::before { transform: scale(1); }
  .check[type="radio"] { border-radius: 50%; }
  .check[type="radio"]::before { clip-path: circle(50%); width: 6px; height: 6px; }
  /* [R3B] `.check` on a wrapping <label> (checkbox + text) is a label row, not the 16px box: without this the text wrapped
     one word per line inside a 16px-wide label. The native input inside gets the accent colour. */
  .check:not(input) { appearance: none; inline-size: auto; block-size: auto; border: 0; border-radius: 0; background: none; display: inline-flex; place-content: normal; align-items: flex-start; gap: 10px; min-block-size: 24px; font-size: var(--fs-small); line-height: 1.45; color: var(--ink); max-inline-size: 100%; }
  .check:not(input)::before { content: none; }
  .check:not(input) > input:is([type="checkbox"], [type="radio"]) { inline-size: 16px; block-size: 16px; margin: 2px 0 0; flex: none; accent-color: var(--accent); cursor: pointer; }

  /* ---- Segmented control ---- */
  .segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: 10px; }
  .segmented > * { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 7px; font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
  .segmented > *:hover { color: var(--ink); }
  .segmented > [aria-pressed="true"], .segmented > [aria-selected="true"], .segmented > .is-active { background: var(--surface); color: var(--ink); box-shadow: var(--e1), 0 0 0 1px var(--line); }
  .segmented svg { width: 15px; height: 15px; }

  /* ---- Choice cards (large selectable tiles, onboarding & pickers) ---- */
  .choice-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .choice {
    position: relative; display: flex; flex-direction: column; gap: 6px; text-align: start; padding: 14px;
    border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast) var(--ease-out), background var(--t-fast);
    cursor: pointer;
  }
  .choice:hover { border-color: var(--moss-400); transform: translateY(-1px); box-shadow: var(--e2); }
  .choice:has(input:checked), .choice.is-selected { border-color: var(--accent); background: linear-gradient(180deg, var(--accent-soft), var(--surface)); box-shadow: 0 0 0 1px var(--accent), var(--e1); }
  .choice:has(input:focus-visible) { box-shadow: var(--focus-ring); }
  .choice input { position: absolute; opacity: 0; pointer-events: none; }
  .choice-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-sunken); color: var(--ink); border: 1px solid var(--line); }
  .choice:has(input:checked) .choice-icon, .choice.is-selected .choice-icon { background: var(--ink); color: var(--text-on-ink); border-color: transparent; }
  .choice-icon svg { width: 18px; height: 18px; }
  .choice-title { font-weight: 500; color: var(--ink); }
  .choice-desc { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.4; }
  .choice-check { position: absolute; top: 12px; inset-inline-end: 12px; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line-strong); display: grid; place-items: center; transition: all var(--t-fast); }
  .choice:has(input:checked) .choice-check, .choice.is-selected .choice-check { background: var(--accent); border-color: var(--accent); color: #fff; }
  .choice-check svg { width: 12px; height: 12px; opacity: 0; }
  .choice:has(input:checked) .choice-check svg, .choice.is-selected .choice-check svg { opacity: 1; }

  /* Option tiles (visual pickers in builder) */
  .tile-grid { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tile { display: grid; gap: 6px; text-align: center; font-size: var(--fs-micro); color: var(--text-muted); cursor: pointer; }
  .tile-preview { aspect-ratio: 1 / 0.8; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface-sunken); display: grid; place-items: center; overflow: hidden; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
  .tile:hover .tile-preview { border-color: var(--moss-400); transform: translateY(-1px); }
  .tile.is-selected .tile-preview, .tile:has(input:checked) .tile-preview { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .tile.is-selected, .tile:has(input:checked) { color: var(--ink); font-weight: 500; }
  .tile input { position: absolute; opacity: 0; pointer-events: none; }

  /* Colour swatch input */
  .color-field { display: flex; align-items: center; gap: 8px; }
  .color-field input[type="color"] { appearance: none; width: 38px; height: 38px; padding: 3px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
  .color-field input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
  .color-field input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 5px; }
  .color-field input[type="color"]::-moz-color-swatch { border: 0; border-radius: 5px; }

  input[type="range"].range { width: 100%; accent-color: var(--accent); }

  @keyframes spin { to { rotate: 360deg; } }
}

/* css/components/surfaces.css */
/* Cards, badges, menus, dialogs, drawers, toasts, empty states, skeletons */
@layer components {
  /* ---- Card ---- */
  .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e1); }
  .card-pad { padding: var(--s-5); }
  /* A card that lays out its own content (stack / organiser panels with no .card-body) pads itself, so text and
     controls never touch the border. */
  .card:is(.stack, .stack-sm, .stack-lg, .evt-palette), .card:has(> .evt-head) { padding: clamp(16px, 1rem + .5vw, var(--s-5)); }
  .card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
  .card-title { font-size: var(--fs-h3); font-weight: 500; color: var(--ink); }
  .card-subtitle { font-size: var(--fs-small); color: var(--text-muted); }
  .card-body { padding: 20px; }
  .card-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
  .card-interactive { transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast) var(--ease-out); }
  .card-interactive:hover { border-color: var(--line-strong); box-shadow: var(--e2); transform: translateY(-1px); }

  /* ---- Badge / pill ---- */
  .badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: var(--r-pill); font-size: var(--fs-micro); font-weight: 500; line-height: 1; white-space: nowrap; background: var(--surface-sunken); color: var(--text); border: 1px solid var(--line); }
  .badge svg { width: 12px; height: 12px; }
  .badge-accent { background: var(--accent-soft); color: var(--accent-text); border-color: color-mix(in oklab, var(--accent) 25%, transparent); }
  .badge-warning { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in oklab, var(--warning) 25%, transparent); }
  .badge-danger { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in oklab, var(--danger) 25%, transparent); }
  .badge-info { background: var(--info-soft); color: var(--info); border-color: color-mix(in oklab, var(--info) 25%, transparent); }
  .badge-ink { background: var(--ink); color: var(--text-on-ink); border-color: transparent; }
  .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
  .dot-live { color: var(--accent); box-shadow: 0 0 0 0 currentColor; animation: pulse 2s var(--ease-out) infinite; }

  .delta { display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; border-radius: var(--r-pill); font-size: var(--fs-micro); font-weight: 500; }
  .delta svg { width: 12px; height: 12px; }
  .delta-up { color: var(--accent-text); background: var(--accent-soft); }
  .delta-down { color: var(--danger); background: var(--danger-soft); }
  .delta-flat { color: var(--text-muted); background: var(--surface-sunken); }

  /* ---- Avatar ---- */
  .avatar { --size: 32px; width: var(--size); height: var(--size); flex: none; border-radius: 50%; display: grid; place-items: center; font-size: calc(var(--size) * .38); font-weight: 500; color: var(--ink); background: linear-gradient(135deg, var(--emerald-100), var(--moss-100)); border: 1px solid var(--line); overflow: hidden; }
  .avatar img { width: 100%; height: 100%; object-fit: cover; }
  .avatar-square { border-radius: 9px; }
  .avatar-ws { background: linear-gradient(135deg, var(--emerald-500), var(--forest-900)); color: #fff; border: 0; }

  /* ---- Menu / popover ---- */
  .menu {
    min-width: 220px; padding: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--e2);
    transform-origin: var(--origin, top right);
  }
  .menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: 7px; font-size: var(--fs-body); color: var(--text); text-align: start; transition: background var(--t-instant), color var(--t-instant); }
  .menu-item:hover, .menu-item:focus-visible { background: var(--surface-hover); color: var(--ink); box-shadow: none; }
  .menu-item svg { width: 16px; height: 16px; color: var(--text-muted); flex: none; }
  .menu-item .kbd, .menu-item .menu-meta { margin-inline-start: auto; }
  .menu-item .menu-meta { flex: none; max-inline-size: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .menu-item-danger, .menu-item-danger svg { color: var(--danger); }
  .menu-item-danger:hover { background: var(--danger-soft); color: var(--danger); }
  .menu-sep { height: 1px; margin: 6px -6px; background: var(--line); }
  .menu-label { padding: 6px 10px 4px; font-size: var(--fs-micro); color: var(--text-subtle); font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
  /* <x-ui.dropdown>: teleported to <body>, placed by wsMenu (resources/js/ui.js); above dialogs, below toasts. */
  .menu.menu-floating { position: fixed; top: 0; left: 0; z-index: 70; } /* two classes: wins over a menu-class that positions itself */
  .menu-floating { z-index: 70; max-width: calc(100vw - 16px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .dropdown-trigger { display: block; }
  @media (pointer: coarse) {
    .menu-floating .menu-item { min-height: 44px; }
  }

  /* Transition classes for Alpine x-transition (entrance/exit) */
  .pop-enter { transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out); }
  .pop-enter-start { opacity: 0; transform: scale(.97) translateY(-4px); }
  .pop-enter-end { opacity: 1; transform: none; }
  .pop-leave { transition: opacity var(--t-instant) var(--ease-in), transform var(--t-instant) var(--ease-in); }
  .pop-leave-start { opacity: 1; }
  .pop-leave-end { opacity: 0; transform: scale(.98); }

  /* ---- Dialog / sheet ---- */
  .overlay { position: fixed; inset: 0; z-index: 60; background: var(--overlay); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  /* Dialogs sit in the centre of the screen on every size (item 16): never wider or taller than the viewport minus the
     safe areas; a long dialog scrolls inside (.dialog-body when it has one, otherwise the dialog itself). */
  .dialog-wrap {
    position: fixed; inset: 0; z-index: 61; display: grid; place-items: center; overflow: hidden; overscroll-behavior: contain;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    --dialog-max-h: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
  }
  .dialog-wrap[style] { padding-top: max(16px, env(safe-area-inset-top)) !important; padding-block-start: max(16px, env(safe-area-inset-top)) !important; }
  .dialog { width: 100%; max-width: var(--dialog-w, 520px); max-height: var(--dialog-max-h, calc(100dvh - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--e3); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
  .dialog:has(> .dialog-body), .dialog.dialog-scroll { display: flex; flex-direction: column; overflow: hidden; }
  .dialog:has(> .dialog-body) > *, .dialog.dialog-scroll > * { flex: none; }
  .dialog:has(> .dialog-body) > .dialog-body, .dialog.dialog-scroll > .dialog-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .dialog-wrap:has(> .palette) { place-items: start center; padding-top: max(10vh, env(safe-area-inset-top)) !important; } /* search palettes stay put while results change */
  .dialog-sm { --dialog-w: 440px; }
  .dialog-lg { --dialog-w: 860px; }
  .dialog-md { --dialog-w: 640px; }
  .dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px 14px; }
  .dialog-title { font-size: var(--fs-h3); font-weight: 500; color: var(--ink); display: flex; align-items: center; gap: 8px; }
  .dialog-body { padding: 4px 22px 22px; }
  .dialog-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--surface-2); }
  .dialog-enter { transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out); }
  .dialog-enter-start { opacity: 0; transform: translateY(10px) scale(.98); }
  .dialog-enter-end { opacity: 1; transform: none; }
  .fade-enter { transition: opacity var(--t-base) var(--ease-out); }
  .fade-leave { transition: opacity var(--t-fast) var(--ease-in); }
  .fade-start { opacity: 0; }
  .fade-end { opacity: 1; }

  .drawer { position: fixed; z-index: 61; top: 8px; inset-inline-end: 8px; bottom: 8px; width: min(520px, calc(100vw - 16px)); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--e3); overflow: hidden; }
  .drawer-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--line); }
  .drawer-body { flex: 1; overflow-y: auto; padding: 20px; align-content: start; }
  .drawer-enter { transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }
  .drawer-enter-start { opacity: 0; transform: translateX(calc(24px * var(--dir-sign, 1))); }
  .drawer-enter-end { opacity: 1; transform: none; }
  .drawer-leave { transition: opacity var(--t-fast) var(--ease-in), transform var(--t-fast) var(--ease-in); }
  .drawer-leave-end { opacity: 0; transform: translateX(calc(16px * var(--dir-sign, 1))); }

  @media (max-width: 640px) {
    .dialog-wrap { padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); --dialog-max-h: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom))); }
    .dialog { border-radius: var(--r-lg, 18px); }
    .dialog-header { padding: 16px 16px 12px; }
    .dialog-body { padding: 4px 16px 16px; }
    .dialog-footer { padding: 12px 16px; flex-wrap: wrap; }
    .drawer { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 92dvh; border-radius: var(--r-xl) var(--r-xl) 0 0; }
    .drawer-enter-start { transform: translateY(32px); }
  }

  /* ---- Toasts ---- */
  .toasts { position: fixed; z-index: 80; bottom: 16px; inset-inline-end: 16px; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); }
  .toast { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--ink); color: var(--text-on-ink); border-radius: var(--r-md); box-shadow: var(--e3); font-size: var(--fs-body); }
  .toast svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
  .toast-success svg { color: var(--emerald-400); }
  .toast-error svg { color: #FF9C9C; }
  .toast-enter { transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-spring); }
  .toast-enter-start { opacity: 0; transform: translateY(12px) scale(.96); }
  .toast-enter-end { opacity: 1; transform: none; }

  /* ---- Alert / callout ---- */
  .callout { display: flex; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-small); color: var(--text); }
  .callout svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
  .callout-accent { background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent) 22%, transparent); }
  .callout-accent svg { color: var(--accent-text); }
  .callout-warning { background: var(--warning-soft); border-color: color-mix(in oklab, var(--warning) 25%, transparent); }
  .callout-warning svg { color: var(--warning); }
  .callout-danger { background: var(--danger-soft); border-color: color-mix(in oklab, var(--danger) 25%, transparent); }
  .callout-danger svg { color: var(--danger); }

  /* ---- Empty state ---- */
  .empty { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 56px 24px; }
  .empty-art { position: relative; width: 240px; max-inline-size: 100%; height: 120px; margin-bottom: 12px; }
  .empty-art .ghost { position: absolute; left: 50%; width: 220px; max-inline-size: 100%; height: 44px; translate: -50% 0; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--e1); }
  .empty-art .ghost:nth-child(1) { top: 0; scale: .9; opacity: .55; }
  .empty-art .ghost:nth-child(2) { top: 30px; scale: .95; opacity: .8; }
  .empty-art .ghost:nth-child(3) { top: 62px; box-shadow: var(--e2); }
  .empty-art .ghost svg { width: 16px; height: 16px; color: var(--accent-text); }
  .empty-art .ghost .bar { height: 8px; border-radius: 4px; background: var(--moss-100); flex: 1; }
  .empty-art .ghost .bar.short { flex: .45; background: var(--accent-soft-2); }
  .empty-title { font-size: var(--fs-h3); font-weight: 500; color: var(--ink); }
  .empty-text { max-width: 380px; color: var(--text-muted); }
  .empty-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; justify-content: center; }

  /* ---- Skeleton ---- */
  .skeleton { position: relative; overflow: hidden; background: var(--surface-sunken); border-radius: 6px; }
  .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgb(255 255 255 / .55), transparent); animation: shimmer 1.4s infinite; }
  :root[data-theme="dark"] .skeleton::after { background: linear-gradient(90deg, transparent, rgb(255 255 255 / .05), transparent); }

  /* ---- Tabs (underline) ---- */
  .tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 10px 0; font-weight: 500; color: var(--text-muted); white-space: nowrap; transition: color var(--t-fast); }
  .tab:hover { color: var(--ink); }
  .tab[aria-selected="true"], .tab.is-active { color: var(--ink); }
  .tab[aria-selected="true"]::after, .tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--ink); }
  .tab .count { font-size: var(--fs-micro); color: var(--text-subtle); font-weight: 400; }

  /* ---- Progress ---- */
  .progress { height: 6px; border-radius: var(--r-pill); background: var(--surface-sunken); overflow: hidden; }
  .progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--emerald-500), var(--emerald-400)); transition: width var(--t-slow) var(--ease-out); }
  .progress-ring { --p: 0; --size: 44px; width: var(--size); height: var(--size); border-radius: 50%; background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--surface-active) 0); display: grid; place-items: center; }
  .progress-ring::before { content: ""; grid-area: 1/1; width: calc(var(--size) - 8px); height: calc(var(--size) - 8px); border-radius: 50%; background: var(--surface); }
  .progress-ring > span { grid-area: 1/1; font-size: var(--fs-micro); font-weight: 500; color: var(--ink); z-index: 1; }

  @keyframes shimmer { to { transform: translateX(100%); } }
  @keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 55%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
}

@layer components {
  :root[data-theme="dark"] .avatar:not(.avatar-ws) { background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 28%, var(--surface)), var(--surface-2)); color: var(--ink); }
}

/* css/components/aurora.css */
/* ==========================================================================
   Aurora brand layer: gradients, glass, glow, motion and signature components.
   Used by the app, the marketing site and the auth/onboarding flows.
   ========================================================================== */
@layer components {
  /* ---- Titles use the display face everywhere ---- */
  .card-title, .page-title, .dialog-title, .section-title, .kpi-value, .drawer-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; }

  /* ---- Ambient aurora backdrop (fixed, behind content) ---- */
  .aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
  .aurora::before, .aurora::after, .aurora > i {
    content: ""; position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; will-change: transform;
    animation: aurora-drift 26s var(--ease-out) infinite alternate;
  }
  .aurora::before { width: 46vmax; height: 46vmax; inset-inline-start: -12vmax; top: -18vmax; background: radial-gradient(circle, rgb(194 244 91 / .55), transparent 65%); }
  .aurora::after { width: 42vmax; height: 42vmax; inset-inline-end: -14vmax; top: -10vmax; background: radial-gradient(circle, rgb(124 92 255 / .38), transparent 65%); animation-duration: 32s; animation-direction: alternate-reverse; }
  .aurora > i { width: 38vmax; height: 38vmax; inset-inline-start: 30%; bottom: -26vmax; background: radial-gradient(circle, rgb(11 194 132 / .35), transparent 65%); animation-duration: 38s; }
  :root[data-theme="dark"] .aurora::before { background: radial-gradient(circle, rgb(43 227 162 / .30), transparent 65%); opacity: .7; }
  :root[data-theme="dark"] .aurora::after { background: radial-gradient(circle, rgb(124 92 255 / .38), transparent 65%); opacity: .8; }
  :root[data-theme="dark"] .aurora > i { background: radial-gradient(circle, rgb(255 122 61 / .16), transparent 65%); }
  @keyframes aurora-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(4vmax, 3vmax, 0) scale(1.08); } 100% { transform: translate3d(-3vmax, 5vmax, 0) scale(.96); } }

  /* Film grain (subtle, premium) */
  .grain { position: relative; isolation: isolate; }
  .grain::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; opacity: .18; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  }

  /* ---- Glass ---- */
  .glass { background: var(--glass); border: 1px solid var(--glass-line); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); box-shadow: var(--e2); }

  /* ---- Gradient cards ---- */
  .g-card { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); color: #fff; border: 0; }
  .g-card > * { position: relative; z-index: 1; }
  .g-forest { background: var(--grad-forest); box-shadow: 0 24px 50px -24px rgb(6 42 30 / .8); }
  .g-violet { background: var(--grad-violet); box-shadow: var(--e-glow-violet); }
  .g-sunset { background: var(--grad-sunset); box-shadow: 0 24px 50px -22px rgb(232 83 30 / .6); }
  .g-ink { background: var(--grad-ink); box-shadow: var(--e3); }
  .g-brand { background: var(--grad-brand); color: var(--forest-950); box-shadow: var(--e-glow); }
  .g-card::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
    background: radial-gradient(80% 60% at 110% -10%, rgb(255 255 255 / .35), transparent 60%);
  }
  .g-card .muted, .g-card .subtle, .g-card :is(small, .text-muted, .field-hint) { color: var(--text-on-dark-muted, rgb(255 255 255 / .8)); }
  /* base.css paints b/strong/dt in --ink, which is near-black in light mode: keep them light on the dark gradients. */
  .g-card:not(.g-brand) :is(b, strong, dt, dd, h5, h6, label, .tabular) { color: inherit; }
  /* Headings inherit the card's light text (base.css paints h1–h4 in --ink, which vanished on the dark gradients). */
  .g-card :is(h1, h2, h3, h4) { color: inherit; }
  .g-brand .muted { color: rgb(3 23 15 / .66); }

  .text-gradient { background: var(--grad-aurora); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .text-brand { background: linear-gradient(90deg, var(--emerald-500), var(--violet-500)); -webkit-background-clip: text; background-clip: text; color: transparent; }

  /* Gradient border (1px) */
  .g-border { position: relative; border: 0 !important; }
  .g-border::before {
    content: ""; position: absolute; inset: 0; padding: 1px; border-radius: inherit; pointer-events: none;
    background: linear-gradient(135deg, rgb(11 194 132 / .7), rgb(124 92 255 / .55), rgb(255 122 61 / .45));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  }

  /* Hover sheen */
  .sheen { position: relative; overflow: hidden; }
  .sheen::after { content: ""; position: absolute; inset: -50% auto -50% -60%; width: 40%; transform: rotate(18deg) translateX(-120%); background: linear-gradient(90deg, transparent, rgb(255 255 255 / .35), transparent); transition: transform 900ms var(--ease-out); pointer-events: none; }
  .sheen:hover::after { transform: rotate(18deg) translateX(520%); }

  /* ---- Buttons v2 ---- */
  .btn { --btn-h: 40px; border-radius: 12px; padding: 0 16px; font-weight: 600; letter-spacing: -0.005em; }
  .btn-sm { --btn-h: 32px; border-radius: 10px; padding: 0 12px; }
  .btn-icon { padding: 0; width: var(--btn-h); }
  .btn-lg { --btn-h: 50px; border-radius: 14px; padding: 0 22px; font-size: 0.9375rem; }
  .btn-xl { --btn-h: 58px; border-radius: 16px; padding: 0 28px; font-size: 1rem; }
  .btn-pill { border-radius: var(--r-pill); }
  .btn-primary { background: var(--ink); color: var(--text-on-ink); box-shadow: 0 8px 20px -10px rgb(11 15 13 / .6), inset 0 1px 0 rgb(255 255 255 / .12); }
  .btn-primary:hover:not(:disabled) { background: color-mix(in oklab, var(--ink) 86%, var(--accent)); box-shadow: 0 14px 26px -12px rgb(11 15 13 / .6), inset 0 1px 0 rgb(255 255 255 / .14); }
  .btn-brand { background: var(--grad-brand); color: var(--forest-950); box-shadow: 0 12px 28px -12px rgb(11 194 132 / .7), inset 0 1px 0 rgb(255 255 255 / .45); }
  .btn-brand:hover:not(:disabled) { filter: saturate(1.1) brightness(1.03); background: var(--grad-brand); box-shadow: 0 18px 34px -12px rgb(11 194 132 / .8), inset 0 1px 0 rgb(255 255 255 / .5); }
  .btn-assist { background: linear-gradient(135deg, #9A83FF, #7C5CFF 50%, #5B3BE8); color: #fff; box-shadow: 0 12px 28px -12px rgb(124 92 255 / .8), inset 0 1px 0 rgb(255 255 255 / .3); }
  .btn-assist:hover:not(:disabled) { filter: brightness(1.06); }
  .btn-glass { background: rgb(255 255 255 / .1); color: #fff; border: 1px solid rgb(255 255 255 / .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .btn-glass:hover:not(:disabled) { background: rgb(255 255 255 / .18); }
  .btn-secondary { border-color: var(--line-strong); box-shadow: var(--e1); }

  .input, .select, .textarea { min-height: 42px; border-radius: 12px; padding: 9px 14px; box-shadow: none; background: var(--surface); }
  .input-lg { min-height: 52px; border-radius: 14px; padding: 12px 16px; font-size: 0.9375rem; }
  .input-group { border-radius: 12px; box-shadow: none; }
  .input:focus, .select:focus, .textarea:focus { box-shadow: 0 0 0 4px var(--accent-soft-2); }
  .input-group:focus-within { box-shadow: 0 0 0 4px var(--accent-soft-2); }

  .card { border-radius: var(--r-lg); box-shadow: var(--e1); }
  .dialog { border-radius: var(--r-xl); }

  /* ---- Chips ---- */
  .chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-small); font-weight: 600; color: var(--text); white-space: nowrap; transition: all var(--t-fast) var(--ease-out); }
  .chip svg { width: 14px; height: 14px; }
  .chip:hover { border-color: var(--line-strong); color: var(--ink); }
  .chip[aria-pressed="true"], .chip.is-active { background: var(--ink); color: var(--text-on-ink); border-color: transparent; }
  .chip-glass { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .18); color: #fff; backdrop-filter: blur(8px); }
  .eyebrow { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding-block: 0; padding-inline: 6px 12px; border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 600; color: var(--ink); background: var(--glass-strong); border: 1px solid var(--line); box-shadow: var(--e1); }
  .eyebrow .eyebrow-tag { height: 20px; padding: 0 8px; border-radius: var(--r-pill); display: inline-flex; align-items: center; font-size: 11px; color: #fff; background: var(--grad-aurora); }

  /* ---- Stepper (segmented progress) ---- */
  .stepper { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
  .stepper > span { height: 4px; border-radius: var(--r-pill); background: var(--line-strong); overflow: hidden; position: relative; }
  .stepper > span::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); background: var(--grad-brand); transition: transform var(--t-lazy) var(--ease-out); }
  [dir="rtl"] .stepper > span::after { transform-origin: right; }
  .stepper > span.is-done::after, .stepper > span.is-current::after { transform: scaleX(1); }
  .stepper > span.is-current::after { background: linear-gradient(90deg, var(--emerald-500), var(--violet-500)); }

  /* ---- Select cards (onboarding pickers) ---- */
  .pick-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
  .pick {
    position: relative; display: grid; align-content: space-between; gap: 18px; min-height: 124px; padding: 16px; text-align: start; cursor: pointer;
    border-radius: 18px; border: 1px solid var(--line); background: var(--surface);
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), border-color var(--t-fast), background var(--t-base);
  }
  .pick:hover { transform: translateY(-3px); box-shadow: var(--e2); border-color: var(--line-strong); }
  .pick input { position: absolute; opacity: 0; pointer-events: none; }
  .pick-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--surface-sunken); color: var(--ink); border: 1px solid var(--line); transition: all var(--t-base) var(--ease-out); }
  .pick-icon svg { width: 20px; height: 20px; }
  .pick-title { font-family: var(--font-display); font-weight: 650; font-size: 1rem; color: var(--ink); letter-spacing: -0.01em; }
  .pick-desc { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.4; margin-top: 2px; }
  .pick-radio { position: absolute; top: 14px; inset-inline-end: 14px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; transition: all var(--t-fast); }
  .pick-radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; transform: scale(0); transition: transform var(--t-base) var(--ease-spring); }
  .pick:has(input:checked), .pick.is-selected { border-color: transparent; color: #fff; background: var(--grad-violet); box-shadow: var(--e-glow-violet); transform: translateY(-3px); }
  .pick.pick-green:has(input:checked), .pick.pick-green.is-selected { background: var(--grad-forest); box-shadow: 0 20px 44px -20px rgb(6 42 30 / .9); }
  .pick:has(input:checked) .pick-title, .pick.is-selected .pick-title { color: #fff; }
  .pick:has(input:checked) .pick-desc, .pick.is-selected .pick-desc { color: rgb(255 255 255 / .75); }
  .pick:has(input:checked) .pick-icon, .pick.is-selected .pick-icon { background: rgb(255 255 255 / .16); border-color: rgb(255 255 255 / .22); color: #fff; }
  .pick:has(input:checked) .pick-radio, .pick.is-selected .pick-radio { border-color: #fff; background: rgb(255 255 255 / .2); }
  .pick:has(input:checked) .pick-radio::after, .pick.is-selected .pick-radio::after { transform: scale(1); }
  .pick:has(input:focus-visible) { box-shadow: var(--focus-ring); }
  .pick-wide { grid-template-columns: 1fr auto; align-items: center; min-height: 96px; }

  /* ---- Floating / motion helpers ---- */
  .float { animation: float 7s ease-in-out infinite; }
  .float-slow { animation: float 10s ease-in-out infinite; }
  .float-delay { animation-delay: -3s; }
  @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
  .reveal { animation: reveal var(--t-lazy) var(--ease-out) backwards; } /* backwards, not both: a filled transform/filter would trap position: fixed dialogs inside the card (item 16) */
  .reveal-2 { animation-delay: 80ms; } .reveal-3 { animation-delay: 160ms; } .reveal-4 { animation-delay: 240ms; } .reveal-5 { animation-delay: 320ms; }
  @keyframes reveal { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
  .glow-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 18px 4px currentColor; background: currentColor; animation: twinkle 4s ease-in-out infinite; }
  @keyframes twinkle { 0%, 100% { opacity: .9; } 50% { opacity: .35; } }

  /* ---- Charts: hatched stacked bars ---- */
  .vbars { --h: 200px; display: grid; grid-template-columns: 32px 1fr; gap: 10px; }
  .vbars-axis { display: flex; flex-direction: column-reverse; justify-content: space-between; height: var(--h); font-size: 11px; color: var(--text-subtle); text-align: end; font-variant-numeric: tabular-nums; }
  .vbars-plot { position: relative; height: var(--h); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: clamp(4px, 1.4vw, 14px);
    background: repeating-linear-gradient(to top, var(--line) 0 1px, transparent 1px calc(var(--h) / 4)); }
  .vbar { position: relative; display: flex; flex-direction: column-reverse; gap: 3px; height: 100%; justify-content: flex-start; cursor: default; }
  .vbar > span { display: block; border-radius: 8px; min-height: 2px; transition: height var(--t-lazy) var(--ease-out), filter var(--t-fast); }
  .vbar .seg-a { background: var(--ink); }
  .vbar .seg-b { background: var(--lime-400); background-image: var(--hatch); }
  :root[data-theme="dark"] .vbar .seg-a { background: #EDEFEE; }
  .vbar:hover > span { filter: brightness(1.08); }
  .vbar .bar-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; translate: -50% 0; padding: 4px 8px; border-radius: 8px; background: var(--ink); color: var(--text-on-ink); font-size: 11px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--t-fast); }
  .vbar:hover .bar-tip { opacity: 1; }
  .vbars-labels { grid-column: 2; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: clamp(4px, 1.4vw, 14px); font-size: 11px; color: var(--text-subtle); text-align: center; }
  .legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: var(--fs-micro); color: var(--text-muted); }
  .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px; }

  /* ---- Donut ---- */
  .donut { --size: 168px; --thick: 22px; position: relative; width: var(--size); height: var(--size); border-radius: 50%; flex: none;
    background: conic-gradient(var(--donut)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--thick)), #000 calc(100% - var(--thick) + 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - var(--thick)), #000 calc(100% - var(--thick) + 1px)); }
  .donut-wrap { position: relative; width: var(--size, 168px); height: var(--size, 168px); flex: none; }
  .donut-center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
  .donut-center b { display: block; font-family: var(--font-display); font-size: 1.6rem; font-weight: 650; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
  .donut-center span { font-size: var(--fs-micro); color: var(--text-muted); }

  /* ---- Progress ring (setup) ---- */
  .ring { --p: 50; --size: 56px; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center; flex: none;
    background: radial-gradient(closest-side, var(--surface) 76%, transparent 78% 100%), conic-gradient(var(--accent) calc(var(--p) * 1%), var(--line) 0); }
  .ring b { font-family: var(--font-display); font-size: .95rem; font-weight: 700; color: var(--ink); }

  /* ---- Phone mockup (showcase) ---- */
  .phone { position: relative; width: 280px; aspect-ratio: 9 / 19; border-radius: 44px; padding: 10px; background: linear-gradient(160deg, #2A2F2C, #0B0D0C); box-shadow: 0 0 0 1px rgb(255 255 255 / .08) inset, 0 50px 100px -30px rgb(0 0 0 / .6), 0 30px 60px -30px rgb(11 194 132 / .35); }
  .phone-screen { position: relative; width: 100%; height: 100%; border-radius: 35px; overflow: hidden; background: var(--surface); }
  .phone-screen::before { content: ""; position: absolute; top: 9px; left: 50%; translate: -50% 0; width: 86px; height: 24px; border-radius: 20px; background: #000; z-index: 5; }

  /* ---- Section heading pattern ---- */
  .kicker { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
}

@layer components {
  .donut-block { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
  .donut-legend { flex: 1; min-width: 150px; display: grid; gap: 10px; margin: 0; padding: 0; }
  .donut-legend li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); color: var(--text); }
  .donut-legend i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
  .donut-legend b { font-variant-numeric: tabular-nums; color: var(--ink); }
  .vbar > span { border-radius: 6px; }
}

@layer components {
  .vbar .bar-tip { display: none; z-index: 5; }
  .vbar:hover .bar-tip { display: block; }
  .vbar:nth-last-child(-n+3) .bar-tip { left: auto; right: 0; translate: none; }
  .vbar:nth-child(-n+3) .bar-tip { left: 0; translate: none; }
  /* Right-to-left: the bars run from the right, so the edge tips swap sides. */
  [dir="rtl"] .vbar:nth-last-child(-n+3) .bar-tip { right: auto; left: 0; }
  [dir="rtl"] .vbar:nth-child(-n+3) .bar-tip { left: auto; right: 0; }
  .vbars-plot { overflow: visible; }
}
@layer components {
  .vbars-plot, .vbars-labels { grid-auto-columns: minmax(0, 1fr); }
  .vbars-labels span { white-space: nowrap; overflow: visible; font-size: 10.5px; }
  @media (max-width: 640px) { .vbars-plot, .vbars-labels { gap: 3px; } .vbars { grid-template-columns: 26px 1fr; gap: 6px; } }
}

/* css/components/shell.css */
/* App shell: framed layout, sidebar, top bar, page header, palette -------- */
@layer components {
  .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100dvh; padding: var(--shell-gap); gap: var(--shell-gap); background: var(--canvas); background-image: var(--grad-mesh); background-attachment: fixed; }
  .shell[data-collapsed="true"] { grid-template-columns: var(--sidebar-rail) minmax(0, 1fr); }

  /* ---- Sidebar ---- */
  /* Brand, workspace switcher and Create stay pinned at the top and the footer at the bottom; only the nav list scrolls
     (item 5). The current item is centred into view by resources/js/ui.js (and an inline call for the first paint). */
  .sidebar { position: sticky; top: var(--shell-gap); height: calc(100dvh - 2 * var(--shell-gap)); display: flex; flex-direction: column; gap: 6px; padding: 10px 8px; min-width: 0; overflow: hidden; }
  .sidebar > * { flex: none; }
  .sidebar > .nav, .sidebar > .sidebar-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-content: start; scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--ink) 18%, transparent) transparent;
    margin-inline: -4px; padding: 2px 4px 16px; position: relative;
    mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 22px), transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10px, #000 calc(100% - 22px), transparent 100%); }
  .sidebar > .nav::-webkit-scrollbar { width: 6px; }
  .sidebar > .nav::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--ink) 18%, transparent); border-radius: 6px; }
  .sidebar > .sidebar-foot { margin-top: 0; padding-top: 8px; }
  @media (max-height: 760px), (max-width: 767px) and (max-height: 920px) {
    .sidebar .usage-card { padding: 12px; gap: 8px; }
    .sidebar .usage-row { display: none; }
  }
  .sidebar-brand { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 12px; }
  .sidebar-brand .brand-mark { font-size: 1.25rem; }
  .sidebar-brand .brand-mark svg { width: 30px; height: 30px; }
  .ws-switcher { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 16px; text-align: start; background: var(--glass-strong); border: 1px solid var(--line); box-shadow: var(--e1); transition: background var(--t-fast), box-shadow var(--t-fast); }
  .ws-switcher:hover { box-shadow: var(--e2); }
  .ws-switcher .avatar { --size: 34px; border-radius: 11px; }
  .switcher-name { font-family: var(--font-display); font-weight: 700; color: var(--ink); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -0.01em; }
  .switcher-meta { font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.2; }
  .ws-switcher > svg { width: 16px; height: 16px; color: var(--text-subtle); margin-inline-start: auto; flex: none; }

  .sidebar-create { margin: 8px 0 6px; }
  .sidebar-create-btn { height: 44px; border-radius: 14px; justify-content: flex-start; padding: 0 14px; }
  .sidebar-create-btn .kbd { margin-inline-start: auto; }
  .nav { display: grid; gap: 2px; }
  .nav-section { margin-top: 14px; padding: 0 12px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); }
  .nav-item { position: relative; display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 12px; border-radius: 13px; color: var(--text-muted); font-weight: 600; transition: background var(--t-fast), color var(--t-fast); }
  .nav-item svg { width: 19px; height: 19px; flex: none; stroke-width: 1.8; }
  .nav-item:hover { background: var(--glass-strong); color: var(--ink); }
  .nav-item[aria-current="page"] { background: var(--ink); color: var(--text-on-ink); box-shadow: 0 10px 22px -12px rgb(11 15 13 / .7); }
  .nav-item[aria-current="page"] svg { color: var(--lime-400); }
  :root[data-theme="dark"] .nav-item[aria-current="page"] svg { color: var(--emerald-600); }
  .nav-item.is-soon { opacity: .55; cursor: default; }
  .nav-item.is-soon:hover { background: none; color: var(--text-muted); }
  .nav-item .soon { margin-inline-start: auto; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); background: var(--assist-soft); color: var(--assist-text); }

  .sidebar-foot { margin-top: auto; display: grid; gap: 8px; padding-top: 12px; }
  .usage-card { padding: 16px; border-radius: 20px; display: grid; gap: 12px; }
  .usage-title { color: #fff; font-family: var(--font-display); font-size: .98rem; }
  .usage-row { display: grid; gap: 6px; font-size: var(--fs-micro); color: rgb(255 255 255 / .7); }
  .usage-row .usage-line { display: flex; justify-content: space-between; }
  .usage-row .usage-line b { color: #fff; font-weight: 700; }
  .usage-card .progress { background: rgb(255 255 255 / .12); height: 6px; }
  .usage-card .progress > span { background: linear-gradient(90deg, #C2F45B, #25D695); }
  .usage-cta { display: flex; align-items: center; justify-content: center; gap: 8px; height: 36px; border-radius: 12px; background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .16); color: #fff; font-weight: 700; font-size: var(--fs-small); transition: background var(--t-fast); }
  .usage-cta:hover { background: rgb(255 255 255 / .2); }
  .usage-cta svg { width: 15px; height: 15px; }
  .usage-plans { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding-inline: 8px; margin-inline-end: -6px; border-radius: 8px; color: #C2F45B; font-size: var(--fs-micro, 12px); font-weight: 700; white-space: nowrap; }
  .usage-plans:hover, .usage-plans:focus-visible { background: rgb(255 255 255 / .12); }
  .usage-plans svg { width: 14px; height: 14px; }
  .user-chip { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 14px; text-align: start; transition: background var(--t-fast); }
  .user-chip:hover { background: var(--glass-strong); }

  .shell[data-collapsed="true"] .hide-collapsed { display: none !important; }
  .shell[data-collapsed="true"] .nav-item { justify-content: center; padding: 0; }
  .shell[data-collapsed="true"] .nav-section { visibility: hidden; height: 6px; padding: 0; margin-top: 6px; }
  .shell[data-collapsed="true"] .sidebar-create-btn { justify-content: center; padding: 0; }
  .shell[data-collapsed="true"] .ws-switcher { justify-content: center; padding: 8px 0; }
  .shell[data-collapsed="true"] .sidebar-brand { justify-content: center; }
  /* Collapsed rail (R2): the nav still scrolls but without a visible scrollbar over the icons, and the active pill gets
     a little inline room so its edges and shadow are not clipped by the scroller. */
  .shell[data-collapsed="true"] .sidebar > .nav { scrollbar-width: none; margin-inline: -8px; padding-inline: 8px; }
  .shell[data-collapsed="true"] .sidebar > .nav::-webkit-scrollbar { display: none; }
  .shell[data-collapsed="true"] .nav-item { width: 44px; justify-self: center; }

  /* ---- Main panel ---- */
  .main { min-width: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--e2); min-height: calc(100dvh - 2 * var(--shell-gap)); position: relative; }
  :root[data-theme="dark"] .main { background: var(--surface); }
  .topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; height: var(--topbar-h); padding: 0 22px; border-bottom: 1px solid var(--line); background: color-mix(in oklab, var(--surface) 84%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-radius: 28px 28px 0 0; }
  .crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-body); color: var(--text-muted); font-weight: 600; }
  .crumbs a:hover { color: var(--ink); }
  .crumbs .current { color: var(--ink); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .crumbs svg { width: 14px; height: 14px; color: var(--text-subtle); flex: none; }
  .topbar-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
  .topbar-icon { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
  .topbar-icon svg { width: 17px; height: 17px; }
  .search-trigger { display: flex; align-items: center; gap: 8px; height: 40px; width: 280px; padding-block: 0; padding-inline: 12px 8px; border: 1px solid var(--line); border-radius: 12px; color: var(--text-subtle); background: var(--surface-sunken); transition: border-color var(--t-fast), background var(--t-fast); font-weight: 500; }
  .search-trigger:hover { border-color: var(--line-strong); background: var(--surface); }
  .search-trigger svg { width: 16px; height: 16px; }
  .search-trigger .kbd { margin-inline-start: auto; }
  .assist-pill { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-radius: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #9A83FF, #7C5CFF 50%, #5B3BE8); box-shadow: 0 10px 22px -12px rgb(124 92 255 / .9), inset 0 1px 0 rgb(255 255 255 / .3); transition: filter var(--t-fast), transform var(--t-fast); }
  .assist-pill:hover { filter: brightness(1.07); transform: translateY(-1px); }
  .assist-pill svg { width: 16px; height: 16px; }
  .topbar .mobile-nav-btn, .topbar .mobile-brand { display: none; }
  .icon-btn { width: 32px; height: 32px; border-radius: 10px; }

  .page { width: 100%; max-width: 1240px; margin: 0 auto; padding: 32px 32px 64px; }
  .page-narrow { max-width: 900px; }
  .page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
  .page-title { font-size: clamp(1.8rem, 1.3rem + 1.6vw, 2.4rem); font-weight: 700; letter-spacing: -0.045em; color: var(--ink); line-height: 1.05; }
  .page-desc { margin-top: 6px; color: var(--text-muted); max-width: 640px; font-size: .95rem; }
  .page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
  .section-title { font-size: var(--fs-h3); font-weight: 700; color: var(--ink); }

  /* ---- Mobile tab bar ---- */
  .tabbar { display: none; }

  /* ---- Command palette / launcher ---- */
  .palette { --dialog-w: 620px; }
  .palette-input { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
  .palette-input svg { width: 18px; height: 18px; color: var(--text-subtle); flex: none; }
  .palette-input input { flex: 1; border: 0; background: transparent; font-size: 1rem; color: var(--ink); outline: none; }
  .palette-input input:focus-visible { box-shadow: none; }
  .palette-list { max-height: min(420px, 60vh); overflow-y: auto; padding: 8px; }
  .palette-group { padding: 8px 10px 4px; font-size: 11px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--text-subtle); }
  .palette-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border-radius: 9px; text-align: start; color: var(--text); }
  .palette-item .pi-icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-muted); flex: none; }
  .palette-item .pi-icon svg { width: 16px; height: 16px; }
  .palette-item .pi-sub { font-size: var(--fs-micro); color: var(--text-muted); }
  .palette-item .kbd { margin-inline-start: auto; }
  .palette-item.is-active, .palette-item:hover { background: var(--surface-hover); color: var(--ink); }
  .palette-item.is-active .pi-icon { background: var(--ink); color: var(--text-on-ink); border-color: transparent; }
  .palette-foot { display: flex; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: var(--fs-micro); color: var(--text-muted); background: var(--surface-2); }
  .palette-foot span { display: inline-flex; gap: 6px; align-items: center; }

  .launcher-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .launcher-tile { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); text-align: start; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast) var(--ease-out), background var(--t-fast); }
  .launcher-tile:hover, .launcher-tile:focus-visible { border-color: color-mix(in oklab, var(--accent) 50%, var(--line)); box-shadow: var(--e2); transform: translateY(-1px); background: linear-gradient(180deg, var(--accent-soft), var(--surface) 70%); }
  .launcher-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff; box-shadow: inset 0 1px 0 rgb(255 255 255 / .25), var(--e1); }
  .launcher-icon svg { width: 20px; height: 20px; }
  .launcher-title { font-weight: 500; color: var(--ink); }
  .launcher-desc { font-size: var(--fs-small); color: var(--text-muted); }
  .launcher-tile .kbd { position: absolute; top: 10px; inset-inline-end: 10px; }
  .launcher-tile[aria-disabled="true"] { opacity: .55; pointer-events: none; }

  /* ---- Responsive shell ---- */
  @media (max-width: 1023px) {
    .search-trigger { width: 40px; padding: 0; justify-content: center; }
    .search-trigger span, .search-trigger .kbd { display: none; }
  }
  @media (max-width: 767px) {
    .shell, .shell[data-collapsed="true"] { grid-template-columns: minmax(0, 1fr); padding: 0; }
    .sidebar { position: fixed; z-index: 59; top: 0; inset-inline-start: 0; bottom: 0; width: 290px; height: 100dvh; background: var(--canvas); padding: 14px 12px; transform: translateX(calc(-104% * var(--dir-sign, 1))); transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base); box-shadow: none; border-radius: 0; border-start-end-radius: 28px; border-end-end-radius: 28px; }
    /* The shadow only while open: closed, its 80px blur leaked a grey band down the screen's start edge. */
    .shell[data-mobile-open="true"] .sidebar { transform: none; box-shadow: var(--e3); }
    .topbar .mobile-nav-btn { display: inline-grid; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); }
    .topbar .mobile-brand { display: inline-flex; }
    .mobile-brand svg { width: 28px; height: 28px; }
    .main { border-radius: 0; border: 0; min-height: 100dvh; box-shadow: none; }
    .topbar { border-radius: 0; padding: 0 14px; height: 60px; }
    .crumbs { display: none; }
    .page { padding: 22px 16px 120px; }
    .launcher-grid { grid-template-columns: minmax(0, 1fr); }
    .tabbar { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center; height: 68px; padding: 0 8px; border-radius: 24px; background: color-mix(in oklab, var(--ink) 94%, transparent); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); box-shadow: 0 20px 40px -14px rgb(0 0 0 / .55); }
    .tabbar-item { display: grid; justify-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; color: rgb(255 255 255 / .55); }
    :root[data-theme="dark"] .tabbar-item { color: rgb(11 15 13 / .55); }
    .tabbar-item svg { width: 21px; height: 21px; }
    .tabbar-item[aria-current="page"] { color: var(--lime-400); }
    :root[data-theme="dark"] .tabbar-item[aria-current="page"] { color: var(--emerald-700); }
    .tabbar-create { justify-self: center; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-brand); color: var(--forest-950); box-shadow: 0 10px 24px -8px rgb(11 194 132 / .8), inset 0 1px 0 rgb(255 255 255 / .5); transform: translateY(-14px); border: 4px solid var(--canvas); }
    .tabbar-create svg { width: 24px; height: 24px; stroke-width: 2.4; }
  }
  @media (min-width: 768px) { .mobile-scrim { display: none !important; } }
  /* Stacking (R2): mobile scrim 58 < drawer 59 < dialog overlay 60 < dialog 61 < floating menus 70, so a modal opened
     from the drawer is never behind it (the drawer also closes on open-launcher / open-palette / open-copilot). */
  .overlay.mobile-scrim { z-index: 58; }
}

@layer components {
  .ws-switcher { font-size: var(--fs-body); }
  .ws-switcher .switcher-name { font-size: var(--fs-body); font-weight: 700; }
  .user-chip { font-size: var(--fs-body); }
}

@layer components { .brand-logo { height: 28px; width: auto; max-width: 170px; object-fit: contain; } 
  /* Starred and recent (ADR-0042) */
  .title-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .title-row > h1 { min-width: 0; }
  .star-btn { flex: none; color: var(--text-subtle); }
  .star-btn:hover { color: var(--amber-500, #F59E0B); }
  .star-btn.is-on { color: var(--amber-500, #F59E0B); }
  .star-btn.is-on svg { fill: currentColor; }
  .cp-hero .star-btn, .g-card .star-btn { color: rgb(255 255 255 / .75); } .cp-hero .star-btn.is-on, .g-card .star-btn.is-on { color: #FCD34D; }
  .jb-list { display: grid; gap: 2px; padding: 6px; }
  .jb-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--r-md); color: var(--ink); text-decoration: none; min-width: 0; }
  .jb-item:hover { background: var(--surface-2); }
  .jb-icon { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-sunken); color: var(--text-muted); }
  .jb-icon svg { width: 16px; height: 16px; }
  .jb-item b { display: block; font-size: 14px; font-weight: 600; }
  .jb-item small { display: block; font-size: 12px; color: var(--text-muted); }
  .jb-star { flex: none; color: var(--amber-500, #F59E0B); } .jb-star svg { width: 14px; height: 14px; fill: currentColor; }

  /* Bulk selection (ADR-0042) */
  .row:has(> .row-check) { grid-template-columns: auto auto minmax(0, 1fr) auto; }
  @media (max-width: 640px) { .row:has(> .row-check) { grid-template-columns: auto auto minmax(0, 1fr); } }
  .row .row-check { align-self: center; }
  .bulk-bar b { color: var(--text-on-ink); }
  .row.is-selected { box-shadow: inset 3px 0 0 var(--accent); background: var(--surface-2); }
  .select-all { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); margin-block: 0 8px; margin-inline: 4px 0; cursor: pointer; }
  .qr-card, .product-card-wrap { position: relative; }
  .product-card-wrap { display: grid; }
  .product-card-wrap > .product-card { height: 100%; }
  .card-check { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 3; width: 22px; height: 22px; box-shadow: 0 2px 8px rgb(0 0 0 / .18); opacity: 0; transition: opacity var(--t-fast); }
  .qr-card:hover .card-check, .product-card-wrap:hover .card-check, .card-check:checked, .card-check:focus-visible { opacity: 1; }
  @media (hover: none) { .card-check { opacity: 1; } }
  .qr-card.is-selected, .product-card-wrap.is-selected > .product-card { outline: 2px solid var(--accent); outline-offset: 2px; }
  .product-card-wrap .card-check { inset-inline-start: auto; inset-inline-end: 12px; }

  /* Settings → Import & export (ADR-0042) */
  .dh-heading { margin: 28px 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-subtle); }
  .dh-heading:first-of-type { margin-top: 8px; }
  .dh-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); }
  .dh-tile { display: flex; gap: 14px; align-items: flex-start; padding: 18px; }
  .dh-tile > div { flex: 1; min-width: 0; }
  .dh-tile b { color: var(--ink); display: block; }
  .dh-tile p { margin: 4px 0 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
  .dh-tile .btn { flex: none; }
  .dh-wide { grid-column: 1 / -1; }
  .dh-icon { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
  .dh-icon svg { width: 18px; height: 18px; position: relative; z-index: 1; }
  .dh-forms { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 2px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); column-gap: 20px; }
  .dh-forms li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14px; min-width: 0; }
  .dh-forms li .truncate { flex: 1; min-width: 0; }
  .dh-sample { margin: 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-sunken); font-size: 12.5px; overflow-x: auto; }
  .dh-result { padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-sunken); }
  .dh-result.is-ok { background: color-mix(in oklab, var(--emerald-500, #10B981) 12%, var(--surface)); }
  .dh-errors { margin: 0; padding-block: 0; padding-inline: 18px 0; display: grid; gap: 4px; font-size: 13.5px; color: var(--text-muted); max-height: 240px; overflow: auto; }
  @media (max-width: 520px) { .dh-tile { flex-wrap: wrap; } .dh-tile .btn { margin-inline-start: 54px; } }
}

/* Top bar profile menu and the profile page (owner batch 1 · item 6). */
@layer components {
  .topbar-user { flex: none; }
  .topbar-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; padding: 0; border: 0; background: none; cursor: pointer; }
  .topbar-avatar .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line); transition: box-shadow var(--t-fast); }
  .topbar-avatar:hover .avatar, .topbar-avatar[aria-expanded="true"] .avatar { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px color-mix(in oklab, var(--accent) 60%, var(--line)); }
  .topbar-avatar:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 1px; }
  .avatar-user > span { line-height: 1; }
  .um-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 6px; }
  .um-theme { display: flex; margin: 2px 6px 6px; }
  .um-theme button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--e1); }

  .pf-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); max-width: 760px; }
  .pf-photo { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
  .pf-current { box-shadow: 0 0 0 4px var(--surface-2), 0 0 0 5px var(--line); }
  .pf-crop { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
  .pf-stage { position: relative; width: 240px; height: 240px; flex: none; overflow: hidden; border-radius: var(--r-lg); background: var(--hatch, var(--surface-2)), var(--surface-2); cursor: grab; touch-action: none; direction: ltr; user-select: none; }
  .pf-stage:active { cursor: grabbing; }
  .pf-stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .pf-stage img { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
  .pf-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgb(0 0 0 / .45); outline: 2px solid rgb(255 255 255 / .9); outline-offset: -2px; pointer-events: none; }
  .pf-crop-controls { flex: 1 1 220px; min-width: 0; }
  .pf-range { flex: 1; min-width: 0; accent-color: var(--accent); height: 44px; }
}

/* R4 · nothing inside the app shell may widen the page sideways (stray off-canvas elements); scroll areas keep their own scroll */
@layer components { .shell > .main { overflow-x: clip; min-inline-size: 0; } }

/* css/components/data.css */
/* Data display: resource rows, tables, KPI tiles, charts, toolbars -------- */
@layer components {
  .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
  .toolbar .grow { flex: 1; }
  .toolbar .input-icon { width: min(320px, 100%); }

  /* ---- Resource list (row cards) ---- */
  .rows { display: grid; gap: 8px; }
  .row {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  }
  .row:hover { border-color: var(--line-strong); box-shadow: var(--e1); }
  .row.is-archived { background: var(--surface-2); }
  .row-lead { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface-2); overflow: hidden; }
  .row-lead img { width: 20px; height: 20px; }
  .row-lead svg { width: 18px; height: 18px; color: var(--text-muted); }
  .row-lead.square { border-radius: 10px; }
  .row-main { min-width: 0; display: grid; gap: 2px; }
  .row-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 500; color: var(--ink); }
  .row-title a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-strong); }
  .row-title .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .row-sub { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-small); color: var(--text-muted); }
  .row-sub svg { width: 13px; height: 13px; flex: none; color: var(--text-subtle); }
  .row-sub .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .row-meta { display: flex; align-items: center; gap: 8px; }
  .icon-btn { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; color: var(--text-muted); transition: background var(--t-instant), color var(--t-instant); }
  .icon-btn:hover { background: var(--surface-hover); color: var(--ink); }
  .icon-btn svg { width: 15px; height: 15px; }
  .icon-btn.is-done { color: var(--accent-text); }
  .stat-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-small); color: var(--text); font-variant-numeric: tabular-nums; transition: border-color var(--t-fast), background var(--t-fast); }
  .stat-pill:hover { border-color: var(--line-strong); background: var(--surface); }
  .stat-pill svg { width: 14px; height: 14px; color: var(--text-muted); }

  .pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); font-size: var(--fs-small); color: var(--text-muted); }

  /* ---- Table ---- */
  .table-wrap { position: relative; /* R3D: keeps absolutely-positioned .sr-only cells inside the scroller (no page overflow) */ border: 1px solid var(--line); border-radius: var(--r-md); overflow: auto; background: var(--surface); }
  .table { width: 100%; font-size: var(--fs-body); }
  .table th { text-align: start; font-weight: 500; font-size: var(--fs-micro); color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; }
  .table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  .table tr:last-child td { border-bottom: 0; }
  .table tbody tr { transition: background var(--t-instant); }
  .table tbody tr:hover { background: var(--surface-2); }
  .table .num { text-align: end; font-variant-numeric: tabular-nums; }

  /* ---- KPI tiles ---- */
  .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .kpi { position: relative; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--e1); overflow: hidden; }
  .kpi-label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--text-muted); }
  .kpi-label svg { width: 15px; height: 15px; }
  .kpi-value { margin-top: 8px; font-size: 1.75rem; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
  .kpi-foot { margin-top: 8px; display: flex; align-items: center; gap: 8px; font-size: var(--fs-micro); color: var(--text-muted); }
  .kpi-spark { position: absolute; inset-inline-end: 14px; top: 18px; width: 88px; height: 30px; color: var(--accent); }
  .kpi.is-feature { background: radial-gradient(120% 140% at 100% 0%, color-mix(in oklab, var(--accent) 26%, transparent), transparent 55%), linear-gradient(160deg, var(--forest-900), #0B241B); color: #E9FFF5; border-color: transparent; }
  .kpi.is-feature .kpi-label, .kpi.is-feature .kpi-foot { color: rgb(233 255 245 / .7); }
  .kpi.is-feature .kpi-value { color: #fff; }
  .kpi.is-feature .kpi-spark { color: var(--emerald-400); }
  @media (max-width: 1023px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

  /* ---- Charts (server-rendered SVG) ---- */
  .chart { width: 100%; height: 220px; color: var(--accent); }
  .chart .grid-line { stroke: var(--line); stroke-dasharray: 3 4; }
  .chart .axis { fill: var(--text-subtle); font-size: 11px; font-family: var(--font-sans); }
  .chart .area { fill: url(#chartFill); }
  .chart .line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
  .chart .bar { fill: currentColor; opacity: .85; }
  .chart-empty { display: grid; place-items: center; height: 220px; color: var(--text-muted); font-size: var(--fs-small); border: 1px dashed var(--line-strong); border-radius: var(--r-md); background: repeating-linear-gradient(135deg, transparent 0 10px, var(--surface-2) 10px 20px); }

  .bars { display: grid; gap: 6px; align-content: start; }
  .bar-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: var(--fs-small); color: var(--text); overflow: hidden; }
  .bar-row::before { content: ""; position: absolute; inset: 0; width: var(--w, 0%); background: var(--accent-soft); border-radius: inherit; transition: width var(--t-slow) var(--ease-out); }
  .bar-row > * { position: relative; }
  .bar-row .label { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bar-row .value { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }

  /* ---- Description list ---- */
  .dl { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px 16px; font-size: var(--fs-body); }
  .dl dt { color: var(--text-muted); }
  .dl dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }

  /* ---- Grid layout helpers ---- */
  .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .grid-main-side { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
  @media (max-width: 1023px) { .grid-3, .grid-main-side { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 640px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } .row { grid-template-columns: auto minmax(0, 1fr); } .row-meta { grid-column: 1 / -1; justify-content: flex-end; } .dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; } .dl dd { margin-bottom: 8px; } }
}

@layer components {
  .btn-secondary[aria-pressed="true"] { background: var(--ink); color: var(--text-on-ink); border-color: var(--ink); }
  @media (max-width: 767px) { .link-editor-grid { grid-template-columns: minmax(0, 1fr) !important; } .link-editor-side { border-inline-start: 0 !important; border-top: 1px solid var(--line); }
    /* Phones: one scroll (the dialog's), not a 64vh box inside it, and Save always in reach. */
    .link-editor-grid > .dialog-body { max-height: none !important; overflow: visible !important; }
    .link-editor-grid ~ .dialog-footer { position: sticky; bottom: 0; z-index: 2; }
  }
}

@layer components {
  @media (max-width: 767px) {
    .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .kpi { padding: 14px; }
    .kpi-value { font-size: 1.5rem; }
    .kpi-foot { white-space: nowrap; }
  }
  @media (max-width: 520px) { .kpi-spark { display: none; } }
}

/* css/components/list-views.css */
/* List, table and grid views for list screens (batch 1 · D): one table markup, three layouts. The wrapper's
   data-layout is list | table | grid | cards (a table at phone width falls back to cards). See <x-ui.views>. */
@layer components {
  .vs { position: relative; min-width: 0; container-type: inline-size; }
  .vs.table-wrap, .vs.lst-wrap { overflow: clip; }
  .vs-table { width: 100%; border-collapse: separate; border-spacing: 0; }
  .vs .vs-big { display: none; }
  .vs-thumb { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; flex: none; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-muted); font-weight: 700; font-family: var(--font-display); }
  .vs-thumb > img, .vs-thumb > svg:only-child { width: 100%; height: 100%; object-fit: cover; }
  .vs-thumb > svg:only-child { width: 18px; height: 18px; }
  .vs-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; color: var(--ink); }
  .vs-title a { color: inherit; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vs-title a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .vs-sub { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-small); color: var(--text-muted); }
  .vs-main-in { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .vs-main-text { display: grid; gap: 2px; min-width: 0; }
  .vs-actions { width: 1%; white-space: nowrap; text-align: end; }
  .vs-actions-in { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
  .vs-more { width: 36px; height: 36px; }
  .vs-empty-cell { padding: 0 !important; }

  /* Header sort button (shared with the console list engine's look) */
  .vs-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; border-radius: 6px; }
  .vs-sort svg { width: 13px; height: 13px; opacity: .5; }
  .vs-sort.is-on { color: var(--ink); }
  .vs-sort.is-on svg { opacity: 1; }
  .vs-sort:focus-visible { outline: none; box-shadow: var(--focus-ring); }

  /* View switcher */
  .vs-switch > button { padding: 0 10px; min-width: 36px; height: 32px; justify-content: center; }
  .vs-switch svg { width: 16px; height: 16px; }
  @media (pointer: coarse) { .vs-switch > button { min-width: 44px; height: 38px; } .vs-more { width: 44px; height: 44px; } }

  /* ---- Table ---- */
  .vs[data-layout="table"] thead th { position: sticky; top: var(--topbar-h, 0px); z-index: 3; }
  /* EVQ: a table that scrolls sideways is its own scroll box, so the header sticks to its top, not the page's top bar
     (with the top-bar offset it slid down over the first rows, e.g. Console → Events next to the detail pane). */
  .vs[data-layout="table"]:not(.vs-fits) thead th { top: 0; }
  .vs[data-layout="table"].vs-fits, .vs[data-layout="table"].vs-fits .vs-scroll { overflow: clip; }
  .vs[data-layout="table"] .vs-scroll, .vs.lst-wrap[data-layout="table"]:not(.vs-fits) { overflow-x: auto; }
  .vs[data-layout="table"] .vs-main { min-width: 200px; max-width: 420px; }
  .vs[data-layout="table"] .vs-thumb { width: 34px; height: 34px; border-radius: 10px; }
  .vs[data-layout="table"] td.vs-preview { width: 1%; padding-inline-end: 0; }
  .vs[data-layout="table"] .vs-hide-table { display: none; }
  .vs[data-layout="table"] td.num { white-space: nowrap; }

  /* ---- List: compact rows, no column header ---- */
  .vs[data-layout="list"] thead { display: none; }
  .vs[data-layout="list"] .vs-table, .vs[data-layout="list"] tbody { display: block; }
  .vs[data-layout="list"] tbody tr { display: flex; align-items: center; gap: 4px 14px; padding: 8px 14px; border-bottom: 1px solid var(--line); min-height: 56px; }
  .vs[data-layout="list"] tbody tr:last-child { border-bottom: 0; }
  .vs[data-layout="list"] td { display: block; padding: 0; border: 0; min-width: 0; font-size: var(--fs-small); color: var(--text-muted); white-space: nowrap; }
  .vs[data-layout="list"] td:is(.vs-main, .lst-main) { flex: 1 1 auto; font-size: var(--fs-body); color: var(--text); }
  .vs[data-layout="list"] td:is(.vs-check, .lst-check, .vs-preview, .vs-actions, .vs-status) { flex: none; }
  .vs[data-layout="list"] td.vs-actions { width: auto; margin-inline-start: auto; }
  .vs[data-layout="list"] .vs-thumb { width: 36px; height: 36px; border-radius: 11px; }
  .vs[data-layout="list"] .vs-hide-list { display: none; }
  .vs[data-layout="list"] td.vs-empty-cell { flex: 1; white-space: normal; }
  .vs[data-layout="list"] td:not(.vs-main, .lst-main, .vs-check, .lst-check, .vs-preview, .vs-actions) { flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
  .vs[data-layout="list"] td:is(.vs-main, .lst-main) { min-width: min(180px, 45%); max-width: none; }
  @container (max-width: 640px) {
    .vs[data-layout="list"] td:not(.vs-main, .lst-main, .vs-check, .lst-check, .vs-preview, .vs-actions, .vs-status, .vs-keep, .vs-empty-cell) { display: none; }
  }
  @container (max-width: 420px) {
    .vs[data-layout="list"] td.vs-status { display: none; }
    /* Phones: the title gives way (it truncates) so the row's ⋯ menu always stays inside the card. */
    .vs[data-layout="list"] tbody tr { gap: 4px 10px; padding-inline: 12px; }
    .vs[data-layout="list"] td:is(.vs-main, .lst-main) { min-width: 0; flex: 1 1 0; }
  }

  /* ---- Grid and phone cards ---- */
  .vs:is([data-layout="grid"], [data-layout="cards"]) { background: none; border: 0; border-radius: 0; overflow: visible; }
  .vs:is([data-layout="grid"], [data-layout="cards"]) :is(.vs-table, .vs-scroll) { display: block; overflow: visible; }
  .vs:is([data-layout="grid"], [data-layout="cards"]) thead { display: none; }
  .vs[data-layout="grid"] tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr)); gap: 14px; }
  .vs[data-layout="cards"] tbody { display: grid; gap: 10px; }
  .vs:is([data-layout="grid"], [data-layout="cards"]) tbody tr { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-content: start; gap: 6px 0; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); transition: box-shadow var(--t-fast), border-color var(--t-fast); }
  .vs:is([data-layout="grid"], [data-layout="cards"]) tbody tr:hover { background: var(--surface); box-shadow: var(--e2); border-color: var(--line-strong); }
  .vs:is([data-layout="grid"], [data-layout="cards"]) tbody tr.is-selected, .vs:is([data-layout="grid"], [data-layout="cards"]) tbody tr.is-open { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .vs:is([data-layout="grid"], [data-layout="cards"]) td { grid-column: 1 / -1; display: block; min-width: 0; padding: 0; border: 0; text-align: end; font-size: var(--fs-small); overflow-wrap: anywhere; }
  .vs:is([data-layout="grid"], [data-layout="cards"]) td:not([data-label]), .vs:is([data-layout="grid"], [data-layout="cards"]) td:is([data-label=""], .vs-status) { text-align: start; }
  .vs:is([data-layout="grid"], [data-layout="cards"]) td[data-label]:not([data-label=""], .vs-main, .lst-main, .vs-preview, .vs-actions, .vs-check, .lst-check, .vs-status, .vs-empty-cell)::before { content: attr(data-label); float: inline-start; margin-inline-end: 12px; line-height: 20px; color: var(--text-muted); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
  .vs:is([data-layout="grid"], [data-layout="cards"]) td:is(.vs-main, .lst-main) { grid-column: 3; grid-row: 1; text-align: start; font-size: var(--fs-body); }
  .vs:is([data-layout="grid"], [data-layout="cards"]) td.vs-preview { grid-column: 2; grid-row: 1; margin-inline-end: 12px; }
  .vs:is([data-layout="grid"], [data-layout="cards"]) td.vs-actions { grid-column: 4; grid-row: 1; width: auto; align-self: start; margin-inline-start: 8px; }
  .vs:is([data-layout="grid"], [data-layout="cards"]) td:is(.vs-check, .lst-check) { grid-column: 1; grid-row: 1; width: auto; margin-inline-end: 12px; padding: 0; }
  .vs:is([data-layout="grid"], [data-layout="cards"]) td.vs-empty-cell { display: block; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
  .vs:is([data-layout="grid"], [data-layout="cards"]) tbody tr:has(> td.vs-empty-cell) { padding: 0; border: 0; background: none; box-shadow: none; grid-column: 1 / -1; }
  .vs:is([data-layout="grid"], [data-layout="cards"]) .vs-hide-cards { display: none; }
  /* R3D: an empty-state row (one cell spanning the table) fills the card, centred, and never pokes past the screen. */
  .vs:is([data-layout="grid"], [data-layout="cards"]) td[colspan] { text-align: center; }
  .vs:is([data-layout="grid"], [data-layout="cards"]) td[colspan] > .empty { inline-size: 100%; padding-inline: 12px; }

  /* Grid cards: the big preview on top, checkbox and menu floating over it */
  .vs[data-layout="grid"] td.vs-preview { grid-column: 1 / -1; grid-row: 1; margin: -14px -14px 6px; display: block; }
  .vs[data-layout="grid"] td.vs-preview .vs-thumb { display: none; }
  .vs[data-layout="grid"] td.vs-preview .vs-big { display: grid; place-items: center; overflow: hidden; aspect-ratio: 16 / 10; border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; background: var(--surface-2); border-bottom: 1px solid var(--line); position: relative; }
  .vs[data-layout="grid"] tbody tr:has(> td.vs-preview) td:is(.vs-main, .lst-main) { grid-column: 1 / 4; grid-row: 2; }
  .vs[data-layout="grid"] tbody tr:has(> td.vs-preview) td.vs-actions { grid-row: 2; }
  .vs[data-layout="grid"] tbody tr:has(> td.vs-preview) td:is(.vs-check, .lst-check) { position: absolute; z-index: 2; top: 10px; inset-inline-start: 10px; padding: 6px; border-radius: 10px; background: color-mix(in oklab, var(--surface) 88%, transparent); }
  .vs[data-layout="grid"] .vs-hide-grid { display: none; }
  .vs[data-layout="grid"] .vs-stats-row { display: flex; flex-wrap: wrap; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .vs tbody tr { transition: none !important; }
}

/* Console list cards: in grid view the cards stand on the page, not inside another card. */
@layer components {
  .lst-card:has(> .vs[data-layout="grid"], > .vs[data-layout="cards"]) { background: none; border-color: transparent; box-shadow: none; padding: 0; }
  .lst-card .vs[data-layout="grid"] tbody, .lst-card .vs[data-layout="cards"] tbody { padding: 2px; }
}

/* Pages list: a theme swatch as the small preview, the page itself on grid cards */
@layer components {
  .vs-swatch { position: relative; }
  .vs-swatch-dot { display: block; width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in oklab, currentColor 22%, transparent); }
  .vs[data-layout="grid"] td.vs-preview .vs-site-big { aspect-ratio: auto; height: 220px; place-items: start center; pointer-events: none; }
  .vs-site-big .page-preview { position: absolute; left: 50%; top: 10px; translate: -50% 0; }
  .vs-share { display: grid; gap: 16px; }
  .vs-share-qr { width: min(220px, 70%); margin-inline: auto; padding: 12px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); }
  .vs-share-qr svg { display: block; width: 100%; height: auto; }
}

/* Links list: the destination's brand mark (or initial) tinted by its host */
@layer components {
  .vs-host, .vs-host-big { --tint: hsl(var(--hue, 160) 62% 46%); background: color-mix(in oklab, var(--tint) 13%, var(--surface)); color: color-mix(in oklab, var(--tint) 78%, var(--text)); border-color: color-mix(in oklab, var(--tint) 22%, var(--line)); }
  .vs-host svg { width: 18px; height: 18px; }
  .vs[data-layout="grid"] td.vs-preview .vs-host-big { display: flex; flex-direction: column; gap: 8px; align-items: center; justify-content: center; aspect-ratio: 16 / 7; }
  .vs-host-mark { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 18px; background: var(--surface); box-shadow: var(--e1); font: 700 22px/1 var(--font-display); }
  .vs-host-mark svg { width: 28px; height: 28px; }
  .vs-host-name { font-size: var(--fs-small); font-weight: 600; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vs tr.is-archived td:is(.vs-main, .vs-preview) { opacity: .6; }
  .vs-status { white-space: nowrap; }
  .vs-status > * + * { margin-inline-start: 4px; }
}

/* QR list: the code itself as the preview */
@layer components {
  .vs .vs-qr-thumb { padding: 3px; cursor: pointer; }
  .vs .vs-qr-thumb > svg, .vs .vs-qr-thumb > img { width: 100%; height: 100%; border-radius: 6px; display: block; }
  .vs[data-layout="grid"] td.vs-preview .vs-big.qr-card-art { aspect-ratio: auto; display: grid; padding: 20px; }
  .vs-title-btn { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vs-title-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
  .vs .qr-spark { display: inline-block; width: 90px; height: 26px; vertical-align: middle; }
  .vs[data-layout="list"] .vs-qr-thumb { width: 40px; height: 40px; }
}

/* Icon previews for lists without images (booking pages, forms, campaigns, automations…) */
@layer components {
  .vs[data-layout="grid"] td.vs-preview .vs-icon-big { aspect-ratio: 16 / 7; color: var(--text-on-ink); }
  .vs-icon-big svg { width: 34px; height: 34px; }
  .vs[data-layout="grid"] td.vs-preview .vs-order-big { aspect-ratio: auto; display: grid; place-items: start; padding: 16px; gap: 2px; }
}
@layer components {
  .vs[data-layout="grid"] td.vs-preview .vs-person-big { aspect-ratio: 16 / 6; background: var(--surface-2); }
  .vs .vs-thumb.avatar { border-radius: 50%; }
}
@layer components {
  .vs[data-layout="list"] td.vs-label-list[data-label]::before { content: attr(data-label); margin-inline-end: 6px; color: var(--text-subtle); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
}
@layer components {
  .vs[data-layout="list"] td.vs-keep { flex: none; overflow: visible; }
}
/* R6A: card galleries with list and table views (<x-ui.views.gallery>) — grid keeps the screen's own cards. */
@layer components {
  .vs-gallery[data-lv="grid"] > .vs-gallery-rows,
  .vs-gallery:not([data-lv="grid"]) > .vs-gallery-grid { display: none; }
  .vs-gallery .vs-thumb-img { inline-size: 44px; block-size: 32px; border-radius: var(--r-sm, 6px); object-fit: cover; display: grid; place-items: center; background: var(--surface-2); overflow: hidden; color: var(--text-subtle); }
  .vs-gallery .vs-thumb-img > :is(img, svg) { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .vs-gallery .vs-thumb-img > svg { inline-size: 18px; block-size: 18px; }
  .vs-gallery td .vs-row-actions { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; align-items: center; }
  @media (max-width: 640px) {
    .vs-gallery .vs[data-layout="list"] .vs-row-actions .btn-secondary { display: none; }
  }
}

/* css/components/dashboard.css */
/* Dashboard surfaces: home hero, setup banner, KPI cards, rankings, featured page ---------- */
@layer components {
  .home-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 26px; }
  .home-date { font-size: var(--fs-small); color: var(--text-muted); font-weight: 600; }
  .home-greeting { font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.1rem); letter-spacing: -0.05em; line-height: 1.02; margin: 4px 0 6px; }
  .home-greeting em.accent, .page-title em.accent { background: linear-gradient(95deg, var(--emerald-600), var(--violet-500)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-inline-end: .08em; }
  :root[data-theme="dark"] .home-greeting em.accent { background: linear-gradient(95deg, #5FE6AE, #B9A9FF); -webkit-background-clip: text; background-clip: text; }

  /* Setup banner */
  .setup { padding: 22px; border-radius: 28px; margin-bottom: 18px; }
  .setup-head { display: flex; align-items: center; gap: 16px; }
  .setup-title { color: #fff; font-size: 1.35rem; letter-spacing: -0.03em; }
  .setup-title em.accent { color: #C2F45B; }
  .setup-steps { display: grid; grid-template-columns: repeat(6, minmax(170px, 1fr)); gap: 10px; margin-top: 18px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .setup-steps::-webkit-scrollbar { display: none; }
  .setup-step { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 18px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .1); transition: background var(--t-fast), transform var(--t-base) var(--ease-out); }
  .setup-step:hover { background: rgb(255 255 255 / .12); transform: translateY(-2px); }
  .setup-step b { display: block; color: #fff; font-size: 13.5px; }
  .setup-step small { display: block; color: rgb(255 255 255 / .6); font-size: 11.5px; line-height: 1.35; margin-top: 2px; }
  .setup-step-icon { width: 32px; height: 32px; flex: none; border-radius: 11px; display: grid; place-items: center; background: rgb(255 255 255 / .1); color: #fff; }
  .setup-step-icon svg { width: 16px; height: 16px; }
  .setup-step.is-done { opacity: .6; }
  .setup-step.is-done .setup-step-icon { background: #C2F45B; color: var(--forest-950); }
  .setup-step.is-done b { text-decoration: line-through; text-decoration-color: rgb(255 255 255 / .4); }

  /* KPI cards v2 */
  .kpis { gap: 14px; }
  .kpi { padding: 18px 18px 16px; border-radius: 22px; min-height: 148px; display: flex; flex-direction: column; }
  .kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .kpi-label { font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); }
  .kpi-icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-sunken); border: 1px solid var(--line); color: var(--ink); }
  .kpi-icon svg { width: 17px; height: 17px; }
  .kpi-value { margin-top: auto; padding-top: 14px; font-size: clamp(1.8rem, 1.3rem + 1vw, 2.3rem); font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
  .kpi-foot { margin-top: 10px; }
  .kpi.is-feature { border: 0; }
  .kpi.is-feature .kpi-label, .kpi.is-feature .kpi-foot { color: rgb(255 255 255 / .7); }
  .kpi.is-feature .kpi-value { color: #fff; }
  .kpi.is-feature .kpi-icon { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .16); color: #fff; }
  .kpi.is-feature .delta-up { background: rgb(194 244 91 / .18); color: #C2F45B; }
  .kpi.is-feature .kpi-spark { position: absolute; inset-inline-end: 16px; bottom: 16px; top: auto; width: 110px; height: 40px; color: #C2F45B; opacity: .9; }

  /* Rankings */
  .top-row { display: flex; gap: 14px; align-items: center; padding: 12px 0; }
  .top-row + .top-row { border-top: 1px solid var(--line); }
  .top-rank { width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; color: var(--ink); background: var(--surface-sunken); border: 1px solid var(--line); }
  .top-row:first-child .top-rank { background: var(--grad-brand); border: 0; color: var(--forest-950); }
  .top-meter { height: 6px; border-radius: 6px; background: var(--surface-sunken); margin-top: 8px; overflow: hidden; }
  .top-meter span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--emerald-500), var(--violet-500)); }
  .fw-600 { font-weight: 650; }

  /* Featured page */
  .feature-page { padding: 20px; border-radius: 26px; display: grid; gap: 14px; min-height: 360px; overflow: hidden; }
  .feature-page-top { display: flex; justify-content: space-between; gap: 12px; }
  .feature-page-title { color: #fff; font-size: 1.4rem; letter-spacing: -0.03em; margin-top: 10px; }
  .feature-page-stat { text-align: end; }
  .feature-page-stat b { display: block; font-family: var(--font-display); font-size: 1.8rem; color: #fff; letter-spacing: -0.04em; line-height: 1; }
  .feature-page-stat small { color: rgb(255 255 255 / .6); }
  .feature-page-phone { height: 200px; position: relative; margin: 4px -20px -20px; }
  .feature-page-phone .phone { position: absolute; left: 50%; top: 0; translate: -50% 0; width: 210px; transform: rotate(-6deg); transform-origin: top center; }
  .feature-page-phone .phone-screen { height: 420px; }

  .next-action { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); transition: all var(--t-fast); }
  .next-action:hover { border-color: var(--line-strong); background: var(--surface); transform: translateY(-1px); box-shadow: var(--e1); }
  .next-action-icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--assist-soft); color: var(--assist-text); flex: none; }
  .next-action-icon svg { width: 17px; height: 17px; }
  .activity-row { display: flex; gap: 10px; padding: 9px 0; align-items: flex-start; }

  @media (min-width: 1024px) { .grid-main-side { grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; } }
  .card-header { padding: 18px 22px; }
  .card-body { padding: 20px 22px; }

  @media (max-width: 767px) {
    .setup { border-radius: 22px; padding: 18px; }
    .setup-steps { grid-template-columns: repeat(6, 78%); margin-inline-end: -18px; padding-inline-end: 18px; scroll-snap-type: x mandatory; }
    .setup-step { scroll-snap-align: start; }
    .kpi { min-height: 132px; }
    .home-hero .page-actions { width: 100%; }
    .home-hero .page-actions > * { flex: 1; }
  }
}

@layer components {
  .insight-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 18px; align-items: start; }
  .insight-grid .card:first-child { grid-row: span 2; }
  .kpis.is-loading { opacity: .6; transition: opacity var(--t-base); }
  .bar-row { padding: 9px 12px; border-radius: 10px; }
  .bar-row::before { background: linear-gradient(90deg, var(--accent-soft-2), var(--assist-soft)); }
  .bar-row .value { font-weight: 700; }
  section > h3.text-sm { font-family: var(--font-display); font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; }
}

@layer components {
  .stat-strip { display: grid; grid-template-columns: 1.1fr .8fr 1.4fr; gap: 14px; margin-bottom: 22px; }
  .stat-strip > div { border-radius: 22px; padding: 18px 20px; display: grid; gap: 4px; align-content: center; min-width: 0; }
  .stat-strip b { font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); font-weight: 700; letter-spacing: -0.04em; color: var(--ink); line-height: 1.1; }
  .stat-strip-main b { color: #fff; }
  .stat-strip-item { background: var(--surface-2); border: 1px solid var(--line); }
  .stat-strip-item.is-wide b { font-size: 1.25rem; letter-spacing: -0.02em; }
  @media (max-width: 767px) { .stat-strip { grid-template-columns: 1fr 1fr; } .stat-strip-main { grid-column: 1 / -1; } .stat-strip-item.is-wide b { font-size: 1rem; } }

  /* Resource rows, premium */
  .row { border-radius: 18px; padding: 14px 16px; gap: 16px; transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base), border-color var(--t-fast); }
  .row:hover { transform: translateY(-2px); box-shadow: var(--e2); border-color: var(--line); }
  .row-lead { width: 44px; height: 44px; border-radius: 14px !important; font-family: var(--font-display); font-size: 16px !important; font-weight: 700 !important; }
  .row-title { font-weight: 700; font-size: .95rem; letter-spacing: -0.01em; }
  .stat-pill { height: 32px; padding: 0 12px; font-weight: 700; }
  .table-wrap { border-radius: 20px; }
  .table th { font-weight: 700; letter-spacing: .08em; font-size: 11px; }
  .toolbar { gap: 10px; margin-bottom: 16px; }
  .toolbar .input { height: 42px; }
}

@layer components {
  .invite-row { display: flex; gap: 10px; align-items: flex-start; }
  @media (max-width: 640px) { .invite-row { flex-wrap: wrap; } .invite-row > .field { flex: 1 1 100%; } .invite-row > .select { flex: 1; width: auto !important; } }
}

/* Reports (ADR-0040) */
@layer components {
  .rp-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
  .rp-start { display: grid; gap: 4px; justify-items: start; padding: 16px; text-align: start; font: inherit; color: inherit; cursor: pointer; border: 1px solid var(--line); transition: border-color var(--t-fast, .15s), transform var(--t-fast, .15s); }
  .rp-start:hover { border-color: var(--accent); transform: translateY(-1px); }
  .rp-start b { color: var(--ink); }
  .rp-start small { font-size: 12.5px; line-height: 1.4; }
  .rp-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); margin-bottom: 6px; }
  .rp-icon svg { width: 17px; height: 17px; }
}

/* R17F · Store › Affiliates */
.aff-form .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.aff-form .field { display: grid; gap: 6px; min-inline-size: 0; }
.aff-form .input, .aff-form .select, .aff-form .textarea { inline-size: 100%; max-inline-size: 100%; box-sizing: border-box; }
.aff-url { overflow-wrap: anywhere; min-inline-size: 0; font-size: 12.5px; }

/* css/components/os.css */
/* Weesify OS: pillar navigation, the OS map and module pages ------------------------------ */
@layer components {
  /* Sidebar: pillar sections, compact items, roadmap badges */
  .nav-item.is-planned { color: var(--text-subtle); }
  .nav-item.is-planned svg { opacity: .8; }
  .nav-badge { margin-inline-start: auto; min-width: 26px; height: 18px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: var(--r-pill); font-size: 10px; font-weight: 700; letter-spacing: .02em; color: var(--text-subtle); border: 1px dashed var(--line-strong); }
  .nav-badge.is-now { border: 0; color: #fff; background: var(--grad-violet); }
  .nav-item[aria-current="page"] .nav-badge { color: var(--text-on-ink); border-color: rgb(255 255 255 / .3); }

  /* Status language, shared everywhere */
  .os-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
  .os-dot.is-live { background: var(--emerald-500); box-shadow: 0 0 0 3px color-mix(in oklab, var(--emerald-500) 22%, transparent); }
  .os-dot.is-building { background: var(--violet-500); box-shadow: 0 0 0 3px color-mix(in oklab, var(--violet-500) 22%, transparent); animation: os-pulse 2.2s var(--ease-out) infinite; }
  .os-dot.is-planned { background: transparent; border: 2px solid var(--text-subtle); }
  .g-card .os-dot.is-planned { border-color: rgb(255 255 255 / .7); }
  @keyframes os-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in oklab, var(--violet-500) 6%, transparent); } }
  @media (prefers-reduced-motion: reduce) { .os-dot.is-building { animation: none; } }

  .os-counts { display: flex; flex-wrap: wrap; gap: 8px; }
  .os-count { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--r-pill); background: var(--glass-strong); border: 1px solid var(--line); font-size: var(--fs-small); color: var(--text-muted); box-shadow: var(--e1); }
  .os-count b { color: var(--ink); font-size: 15px; }

  /* Roadmap strip */
  .os-road { padding: 20px 22px; }
  .os-stages { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
  .os-stage { display: grid; gap: 6px; min-width: 0; }
  .os-stage-bar { height: 6px; border-radius: var(--r-pill); background: var(--line-strong); }
  .os-stage.is-done .os-stage-bar { background: var(--grad-forest); }
  .os-stage.is-now .os-stage-bar { background: repeating-linear-gradient(-45deg, var(--violet-500) 0 6px, var(--violet-400) 6px 12px); }
  .os-stage-n { font-size: 11px; font-weight: 700; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
  .os-stage-label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .os-stage.is-done .os-stage-label { color: var(--ink); }
  .os-stage.is-now .os-stage-label { color: var(--assist-text); }
  @media (max-width: 720px) {
    .os-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  }

  /* Pillars and module cards */
  .os-pillar { margin-top: 34px; }
  .os-pillar-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
  .os-pillar-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; }
  .os-pillar-icon svg { width: 20px; height: 20px; }
  .os-pillar-title { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -0.03em; }
  .os-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
  .os-card { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 196px; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1); color: var(--text); transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast), border-color var(--t-fast); }
  .os-card:hover { transform: translateY(-2px); box-shadow: var(--e2); border-color: var(--line-strong); }
  .os-card.is-planned { background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--hatch); border-style: dashed; box-shadow: none; }
  .os-card.is-building { border-color: color-mix(in oklab, var(--violet-500) 40%, var(--line)); background: linear-gradient(160deg, var(--assist-soft), var(--surface) 55%); }
  .os-card-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--ink); border: 1px solid var(--line); }
  .os-card-icon:not(.g-card) { background: var(--surface-sunken); }
  .os-card-icon.g-card { border: 0; color: #fff; }
  .os-card-icon svg { width: 20px; height: 20px; }
  .os-card.is-building .os-card-icon { background: var(--grad-violet); color: #fff; border: 0; }
  .os-card-title { margin-top: 10px; font-family: var(--font-display); font-size: 1.12rem; letter-spacing: -0.02em; color: var(--ink); }
  .os-card-tag { font-size: var(--fs-small); color: var(--text-muted); }
  .os-card-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; gap: 8px; }
  .os-card-cta { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
  .os-card-cta svg { width: 14px; height: 14px; transition: transform var(--t-fast) var(--ease-out); }
  .os-card:hover .os-card-cta svg { transform: translateX(calc(3px * var(--dir-sign, 1))) scaleX(var(--flip-x, 1)); }
  .os-status { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--r-pill); font-size: 11px; font-weight: 700; white-space: nowrap; }
  .os-status.is-live { background: var(--accent-soft); color: var(--accent-text); }
  .os-status.is-building { background: var(--assist-soft); color: var(--assist-text); }
  .os-status.is-planned { color: var(--text-muted); border: 1px dashed var(--line-strong); }
  .os-goal { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: var(--heat); }
  .os-goal svg { width: 13px; height: 13px; }

  /* The connected-graph band */
  .os-flow { margin-top: 38px; padding: clamp(22px, 3vw, 36px); display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 1000px) { .os-flow { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; } }
  .os-flow-title { color: #fff; font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); letter-spacing: -0.04em; margin: 14px 0 8px; }
  .os-flow-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; counter-reset: flow; }
  @media (min-width: 560px) { .os-flow-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .os-flow-steps li { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .1); color: rgb(255 255 255 / .9); font-size: var(--fs-small); font-weight: 600; }
  .os-flow-icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: rgb(194 244 91 / .14); color: var(--lime-400); }
  .os-flow-icon svg { width: 17px; height: 17px; }

  /* Module page */
  .os-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); }
  .os-back:hover { color: var(--ink); }
  .os-back svg { width: 15px; height: 15px; }
  .os-hero { padding: clamp(22px, 4vw, 44px); display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 900px) { .os-hero { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); align-items: center; } }
  .os-hero-title { color: #fff; font-family: var(--font-display); font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.4rem); letter-spacing: -0.05em; line-height: 1; margin-top: 16px; }
  .os-hero-tag { font-family: var(--font-accent); font-style: italic; font-size: 1.35rem; color: rgb(255 255 255 / .86); margin-top: 6px; }
  .os-hero-pitch { max-width: 58ch; margin-top: 12px; color: rgb(255 255 255 / .78); }
  .os-hero-art { display: grid; justify-items: center; gap: 16px; }
  .os-hero-glyph { width: 116px; height: 116px; border-radius: 34px; display: grid; place-items: center; background: rgb(255 255 255 / .12); border: 1px solid rgb(255 255 255 / .22); backdrop-filter: blur(10px); box-shadow: 0 24px 60px -24px rgb(0 0 0 / .5); }
  .os-hero-glyph svg { width: 52px; height: 52px; color: #fff; stroke-width: 1.5; }
  .os-hero-stage { width: min(240px, 100%); padding: 12px 14px; border-radius: 16px; background: rgb(0 0 0 / .18); display: grid; gap: 6px; color: #fff; }
  .os-hero-stage small { color: rgb(255 255 255 / .7); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
  .os-hero-stage b { font-family: var(--font-display); font-size: 1.3rem; }
  .os-hero-stage .stepper > span { background: rgb(255 255 255 / .2); }
  @media (max-width: 899px) { .os-hero-art { justify-items: start; grid-auto-flow: column; justify-content: start; align-items: center; } .os-hero-glyph { width: 72px; height: 72px; border-radius: 22px; } .os-hero-glyph svg { width: 32px; height: 32px; } }
  .os-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .os-features li { display: flex; align-items: center; gap: 12px; font-weight: 500; color: var(--text); }
  .os-feature-tick { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent-text); }
  .os-feature-tick svg { width: 14px; height: 14px; }

  /* Create launcher: modules that are coming */
  .launcher-soon-head { display: flex; align-items: center; justify-content: space-between; margin: 20px 2px 10px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle); }
  .launcher-soon-head a { display: inline-flex; align-items: center; gap: 4px; letter-spacing: 0; text-transform: none; font-size: var(--fs-small); color: var(--assist-text); }
  .launcher-soon-head svg { width: 13px; height: 13px; }
  .launcher-soon { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 8px; }
  .launcher-soon-tile { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-radius: var(--r-md); border: 1px dashed var(--line-strong); color: var(--text-muted); font-size: var(--fs-small); font-weight: 600; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
  .launcher-soon-tile svg { width: 17px; height: 17px; flex: none; }
  .launcher-soon-tile small { font-size: 10.5px; font-weight: 700; color: var(--text-subtle); }
  .launcher-soon-tile:hover { border-style: solid; border-color: color-mix(in oklab, var(--violet-500) 45%, var(--line)); color: var(--ink); background: var(--assist-soft); }

  /* Home: compact OS overview */
  .os-home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 6px 18px; padding: 4px 20px 20px; }
  .os-home-col { display: grid; align-content: start; gap: 2px; min-width: 0; }
  .os-home-head { display: flex; align-items: center; gap: 10px; padding: 6px 0 8px; font-size: var(--fs-small); color: var(--ink); }
  .os-home-icon.g-card { border-radius: 9px; }
  .os-home-icon { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; }
  .os-home-icon svg { width: 14px; height: 14px; }
  .os-home-row { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; margin: 0 -10px; border-radius: 10px; font-size: var(--fs-small); font-weight: 600; color: var(--text); min-width: 0; }
  .os-home-row:hover { background: var(--surface-hover); }
  .os-home-row.is-planned { color: var(--text-muted); font-weight: 500; }
  .os-home-row small { font-size: 10.5px; font-weight: 700; color: var(--text-subtle); }
  .os-home-goal { width: 14px; height: 14px; color: var(--heat); flex: none; }

  /* Tall navigation: keep the pillars visible on shorter screens */
  @media (min-width: 1024px) and (max-height: 1040px) { .sidebar-foot .usage-card { display: none; } }
}

/* css/components/audience.css */
/* Audience OS: contacts, stages, tags, segments, import, contact profile ---------------------- */
@layer components {
  /* Tone palette shared by stages and tags (names only — never user colours) */
  .tone-emerald { --tone: var(--emerald-500); --tone-soft: color-mix(in oklab, var(--emerald-500) 14%, var(--surface)); --tone-text: var(--accent-text); }
  .tone-violet { --tone: var(--violet-500); --tone-soft: color-mix(in oklab, var(--violet-500) 14%, var(--surface)); --tone-text: var(--assist-text); }
  .tone-tangerine { --tone: var(--tangerine-500); --tone-soft: color-mix(in oklab, var(--tangerine-500) 14%, var(--surface)); --tone-text: color-mix(in oklab, var(--tangerine-600) 85%, var(--ink)); }
  .tone-sky { --tone: var(--sky-500); --tone-soft: color-mix(in oklab, var(--sky-500) 14%, var(--surface)); --tone-text: color-mix(in oklab, var(--sky-500) 70%, var(--ink)); }
  .tone-amber { --tone: #E4A11B; --tone-soft: color-mix(in oklab, #E4A11B 16%, var(--surface)); --tone-text: color-mix(in oklab, #B8790A 85%, var(--ink)); }
  .tone-rose { --tone: var(--rose-500); --tone-soft: color-mix(in oklab, var(--rose-500) 14%, var(--surface)); --tone-text: color-mix(in oklab, var(--rose-500) 75%, var(--ink)); }
  .tone-ink { --tone: var(--ink); --tone-soft: var(--surface-sunken); --tone-text: var(--ink); }

  .hide-sm { }
  @media (max-width: 720px) { .hide-sm { display: none; } }
  .input-sm, .select-sm { height: 34px; font-size: var(--fs-small); padding-inline: 10px; }
  .icon-btn-sm { width: 28px; height: 28px; }
  .icon-btn-sm svg { width: 15px; height: 15px; }
  .modal-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--grad-violet); color: #fff; }
  .modal-icon svg { width: 18px; height: 18px; }

  /* Stage distribution */
  .aud-stages { margin-top: 16px; padding: 16px 18px; display: grid; gap: 12px; }
  .aud-stage-bar { display: flex; gap: 3px; height: 12px; border-radius: var(--r-pill); overflow: hidden; background: var(--surface-sunken); }
  .aud-stage-bar span { background: var(--tone); min-width: 6px; }
  .aud-stage-bar span:first-child { border-radius: 0; border-start-start-radius: var(--r-pill); border-end-start-radius: var(--r-pill); }
  .aud-stage-legend { display: flex; flex-wrap: wrap; gap: 6px; }
  .aud-stage-key { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid transparent; font-size: var(--fs-small); color: var(--text-muted); font-weight: 600; }
  .aud-stage-key i { width: 9px; height: 9px; border-radius: 3px; background: var(--tone); }
  .aud-stage-key b { color: var(--ink); }
  .aud-stage-key small { color: var(--text-subtle); font-weight: 600; }
  .aud-stage-key:hover { background: var(--surface-hover); }
  .aud-stage-key.is-active { background: var(--tone-soft); border-color: color-mix(in oklab, var(--tone) 35%, transparent); color: var(--tone-text); }

  /* Layout: views rail + list */
  .aud-layout { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 1100px) { .aud-layout { grid-template-columns: 240px minmax(0, 1fr); align-items: start; } .aud-rail { position: sticky; top: 88px; } }
  .aud-rail { display: grid; gap: 14px; }
  .aud-rail-group { display: grid; gap: 2px; }
  .aud-rail-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-subtle); }
  .aud-rail-empty { padding: 8px 12px; font-size: var(--fs-small); color: var(--text-subtle); line-height: 1.45; border: 1px dashed var(--line-strong); border-radius: var(--r-md); }
  .aud-view { display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 12px; border-radius: 12px; color: var(--text-muted); font-weight: 600; font-size: var(--fs-small); text-align: start; min-width: 0; }
  .aud-view svg { width: 16px; height: 16px; flex: none; }
  .aud-view small { color: var(--text-subtle); font-weight: 600; }
  .aud-view:hover { background: var(--surface-hover); color: var(--ink); }
  .aud-view.is-active { background: var(--ink); color: var(--text-on-ink); }
  .aud-view.is-active svg { color: var(--lime-400); }
  .aud-view.is-active small { color: rgb(255 255 255 / .6); }
  .aud-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 4px; }
  @media (max-width: 1099px) {
    .aud-rail { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; gap: 8px; padding-bottom: 2px; }
    .aud-rail-group { display: flex; gap: 6px; align-items: center; }
    .aud-rail-head, .aud-rail-empty { display: none; }
    .aud-view { width: auto; white-space: nowrap; border: 1px solid var(--line); background: var(--surface); }
    .aud-tags { flex-wrap: nowrap; }
  }

  .tag-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-pill); background: var(--tone-soft); color: var(--tone-text); font-size: 12.5px; font-weight: 600; border: 1px solid color-mix(in oklab, var(--tone) 22%, transparent); white-space: nowrap; max-width: 100%; }
  .tag-chip small { opacity: .7; font-weight: 600; }
  .tag-chip.is-active { background: var(--tone); color: #fff; }
  .tag-chip.is-sm { height: 22px; padding: 0 8px; font-size: 11.5px; }
  .tag-chip button { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; margin-inline-end: -4px; color: inherit; opacity: .7; }
  .tag-chip button:hover { opacity: 1; background: rgb(0 0 0 / .08); }
  .tag-chip button svg { width: 11px; height: 11px; }
  .tag-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--tone); display: inline-block; }

  .aud-seg-banner { display: flex; align-items: center; gap: 14px; justify-content: space-between; padding: 16px 18px; margin-bottom: 14px; }

  .bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: 12px; border-radius: var(--r-md); background: var(--ink); color: var(--text-on-ink); box-shadow: var(--e2); position: sticky; top: 76px; z-index: 5; }
  .bulk-bar .btn-secondary { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .14); color: var(--text-on-ink); }
  .bulk-bar .btn-ghost { color: rgb(255 255 255 / .7); }
  .bulk-tag { display: flex; gap: 6px; }
  .bulk-tag .input { width: 150px; background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .14); color: var(--text-on-ink); }

  .aud-table tr.is-selected td { background: var(--accent-soft); }
  .aud-person { display: flex; align-items: center; gap: 12px; min-width: 0; max-width: 340px; }
  @media (max-width: 720px) { .aud-person { max-width: 190px; gap: 10px; } }
  .aud-person:hover .ink { text-decoration: underline; text-underline-offset: 3px; }
  .aud-avatar { background: var(--tone); color: #fff; border: 0; font-weight: 700; }
  .stage-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--r-pill); background: var(--tone-soft); color: var(--tone-text); font-size: 12px; font-weight: 700; }
  .stage-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tone); }
  .aud-row-tags { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; max-width: 260px; }

  /* Segment builder */
  .seg-match { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-small); color: var(--text-muted); font-weight: 600; }
  .seg-match .select { width: auto; }
  .seg-rows { display: grid; gap: 8px; }
  .seg-row { display: grid; grid-template-columns: 150px 180px minmax(0, 1fr) 36px; gap: 8px; align-items: center; padding: 8px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
  .seg-row:has(> select:nth-child(2)[aria-label='Custom field']) { grid-template-columns: 140px 150px 150px minmax(0, 1fr) 36px; }
  @media (max-width: 720px) { .seg-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; } .seg-row > :nth-child(3) { grid-column: 1 / 3; } }
  .seg-preview { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-md); background: linear-gradient(135deg, var(--assist-soft), var(--accent-soft)); }
  .seg-preview-n { font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); }
  .seg-preview b { display: block; color: var(--ink); }
  .seg-preview small { color: var(--text-muted); font-size: var(--fs-small); }

  .consent-box { display: flex; gap: 12px; padding: 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; }
  .consent-box b { display: block; color: var(--ink); font-size: var(--fs-small); }
  .consent-box small { color: var(--text-muted); font-size: 12.5px; }
  .consent-box:has(input:checked) { border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); background: var(--accent-soft); }

  .dropzone { display: grid; justify-items: center; gap: 6px; padding: 28px 18px; text-align: center; border-radius: var(--r-lg); border: 1.5px dashed var(--line-strong); background: var(--surface-2); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
  .dropzone:hover { border-color: var(--accent); background: var(--accent-soft); }
  .dropzone svg { width: 26px; height: 26px; color: var(--accent-text); }
  .dropzone b { color: var(--ink); }
  .dropzone small { color: var(--text-muted); font-size: 12.5px; max-width: 42ch; }
  .import-done { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 8px 0; }
  .import-done-icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; }
  .import-done-icon svg { width: 26px; height: 26px; }
  .import-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
  .import-stats div { padding: 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
  .import-stats b { display: block; font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); }
  .import-stats small { color: var(--text-muted); }

  /* Contact profile */
  .cp-hero { padding: clamp(20px, 3vw, 32px); display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 900px) { .cp-hero { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
  .cp-id { display: flex; align-items: center; gap: 18px; min-width: 0; }
  .cp-avatar { width: 76px; height: 76px; border-radius: 26px; display: grid; place-items: center; flex: none; font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: #fff; background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .28); box-shadow: 0 20px 40px -20px rgb(0 0 0 / .5); }
  .cp-name { color: #fff; font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); letter-spacing: -0.04em; line-height: 1.05; }
  .cp-sub { color: rgb(255 255 255 / .78); margin-top: 4px; }
  .cp-stats { display: flex; gap: 10px; flex-wrap: wrap; }
  .cp-stat { padding: 10px 14px; border-radius: 16px; background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .16); color: #fff; min-width: 110px; }
  .cp-stat small { display: block; color: rgb(255 255 255 / .7); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .cp-stat b { font-family: var(--font-display); font-size: 1.15rem; }
  .cp-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); margin-top: 18px; }
  @media (min-width: 1100px) { .cp-grid { grid-template-columns: 340px minmax(0, 1fr); align-items: start; } }
  .cp-fields { display: grid; gap: 2px; }
  .cp-field { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); }
  .cp-field:last-child { border-bottom: 0; }
  .cp-field dt { color: var(--text-muted); font-weight: 600; }
  .cp-field dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
  .cp-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .cp-tag-add { display: flex; gap: 6px; margin-top: 10px; }

  .timeline { list-style: none; margin: 0; padding: 0; display: grid; }
  .tl-item { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; padding-bottom: 18px; }
  .tl-item::before { content: ""; position: absolute; inset-inline-start: 17px; top: 38px; bottom: 0; width: 2px; background: var(--line); }
  .tl-item:last-child::before { display: none; }
  .tl-icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-sunken); color: var(--ink); border: 1px solid var(--line); }
  .tl-icon svg { width: 16px; height: 16px; }
  .tl-item.is-good .tl-icon { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
  .tl-item.is-note .tl-icon { background: var(--assist-soft); color: var(--assist-text); border-color: transparent; }
  .tl-item.is-visit .tl-icon { background: transparent; border-style: dashed; color: var(--text-muted); }
  .tl-item.is-visit .tl-title { font-weight: 500; }
  .tl-item.is-warn .tl-icon { background: var(--heat-soft); color: var(--heat); border-color: transparent; }
  .tl-title { font-weight: 600; color: var(--ink); font-size: var(--fs-small); }
  .tl-meta { font-size: 12px; color: var(--text-subtle); }
  .tl-body { margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-small); color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
  .note-composer { display: grid; gap: 8px; margin-bottom: 20px; }
  .note-composer .textarea { min-height: 84px; }
  .stage-picker { display: flex; flex-wrap: wrap; gap: 6px; }
  .stage-picker .stage-pill { height: 32px; padding: 0 14px; background: transparent; border: 1px solid var(--line); color: var(--text-muted); cursor: pointer; }
  .stage-picker .stage-pill:hover:not(:disabled) { border-color: var(--tone); color: var(--tone-text); }
  .stage-picker .stage-pill.is-current { background: var(--tone); border-color: transparent; color: #fff; box-shadow: 0 8px 20px -10px var(--tone); }
  .stage-picker .stage-pill.is-current::before { background: #fff; }
  /* Custom fields manager */
  .cf-list { display: grid; gap: 8px; }
  .cf-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto auto 36px; gap: 8px; align-items: center; padding: 8px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); }
  .cf-row .cf-opts { grid-column: 2 / 3; grid-row: 2; }
  .cf-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--assist-text); }
  .cf-key { font-size: 11px; color: var(--text-subtle); }
  @media (max-width: 640px) { .cf-row { grid-template-columns: minmax(0, 1fr) auto 36px; } .cf-type, .cf-key { display: none; } .cf-row .cf-opts { grid-column: 1 / -1; } }
  .cf-add { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
  .cf-add > .btn { justify-self: start; }
  .cf-add-grid { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr) 160px; }
}

/* css/components/forms.css */
/* Forms: list, create studio, builder, responses inbox ----------------------------------- */
@layer components {
  .inspector-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }

  /* Empty state + templates */
  .forms-empty { padding: clamp(24px, 4vw, 44px); display: grid; gap: 26px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 980px) { .forms-empty { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; } }
  .forms-empty h2 { color: #fff; font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); letter-spacing: -0.045em; line-height: 1.05; margin: 14px 0 10px; }
  .forms-empty p { color: rgb(255 255 255 / .72); max-width: 56ch; }
  .forms-empty-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .forms-empty-points li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .1); color: #fff; font-weight: 600; font-size: var(--fs-small); }
  .forms-empty-points svg { width: 18px; height: 18px; color: var(--lime-400); }
  .tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 12px; }
  .tpl-card { display: grid; gap: 6px; justify-items: start; text-align: start; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1); transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast), border-color var(--t-fast); }
  .tpl-card:hover { transform: translateY(-2px); box-shadow: var(--e2); border-color: var(--line-strong); }
  .tpl-card b { margin-top: 8px; color: var(--ink); font-family: var(--font-display); font-size: 1.05rem; }
  .tpl-card small { color: var(--text-muted); font-size: 12.5px; }
  .tpl-card-icon { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: none; }
  .tpl-card-icon svg { width: 19px; height: 19px; }
  .tpl-card-icon.is-plain { border: 1.5px dashed var(--line-strong); color: var(--text-muted); }

  /* Form cards */
  .forms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
  .form-card { display: flex; flex-direction: column; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1); overflow: hidden; transition: box-shadow var(--t-fast), transform var(--t-fast) var(--ease-out); }
  .form-card:hover { box-shadow: var(--e2); transform: translateY(-2px); }
  .form-card-art { position: relative; display: block; height: 168px; padding: 16px; border-radius: 0; color: #fff; }
  .form-card-art.is-plain { background: var(--hatch), var(--surface-2); color: var(--ink); border-bottom: 1px solid var(--line); }
  .form-card-status { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .22); backdrop-filter: blur(8px); font-size: 11.5px; font-weight: 700; }
  .form-card-art.is-plain .form-card-status { background: var(--surface); border-color: var(--line); }
  .form-card-mock { position: absolute; left: 50%; bottom: -26px; transform: translateX(-50%) rotate(-2deg); width: 72%; padding: 12px; border-radius: 16px; background: #fff; box-shadow: 0 24px 50px -20px rgb(0 0 0 / .45); display: grid; gap: 7px; transition: transform var(--t-slow) var(--ease-out); }
  .form-card:hover .form-card-mock { transform: translateX(-50%) rotate(0deg) translateY(-6px); }
  .form-card-mock i { display: grid; gap: 3px; font-style: normal; }
  .form-card-mock i b { font-size: 9.5px; font-weight: 700; color: #33413B; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .form-card-mock i::after { content: ""; height: 14px; border-radius: 5px; border: 1px solid #DCE3DF; background: #F7F9F8; }
  .form-card-mock i.is-tall::after { height: 24px; }
  .form-card-mock i.is-choice::after { height: 10px; width: 60%; border-radius: 999px; }
  .form-card-mock em { justify-self: end; font-style: normal; font-size: 9px; font-weight: 800; color: #fff; background: #0B0F0D; padding: 4px 10px; border-radius: 6px; }
  .form-card-body { padding: 36px 18px 16px; display: grid; gap: 14px; }
  .form-card-title { font-family: var(--font-display); font-size: 1.12rem; letter-spacing: -0.02em; color: var(--ink); }
  .form-card-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
  .form-card-stats div { padding: 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
  .form-card-stats dt { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); }
  .form-card-stats dd { margin: 2px 0 0; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--ink); }
  .form-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

  /* Create studio */
  .form-create { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 860px) { .form-create { grid-template-columns: minmax(0, 1fr) 280px; align-items: start; } }
  .tpl-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; }
  .tpl-pick { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); text-align: start; transition: border-color var(--t-fast), background var(--t-fast); }
  .tpl-pick b { display: block; font-size: var(--fs-small); color: var(--ink); }
  .tpl-pick small { display: block; font-size: 11.5px; color: var(--text-muted); line-height: 1.35; }
  .tpl-pick .tpl-card-icon { width: 34px; height: 34px; border-radius: 11px; }
  .tpl-pick .tpl-card-icon svg { width: 16px; height: 16px; }
  .tpl-pick:hover { border-color: var(--line-strong); }
  .tpl-pick.is-active { border-color: color-mix(in oklab, var(--accent) 60%, var(--line)); background: var(--accent-soft); box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent); }
  .form-create-preview { display: none; }
  @media (min-width: 860px) { .form-create-preview { display: block; position: sticky; top: 0; } .form-create-preview .phone { width: 100%; } }
  .form-preview-site { min-height: 100%; background: var(--site-bg); font-family: var(--site-font); color: var(--site-text); }
  .form-preview-card { margin: -34px 10px 14px; padding: 14px; border-radius: 18px; background: var(--site-surface); box-shadow: 0 16px 40px -24px rgb(0 0 0 / .4); zoom: .74; }

  /* Builder */
  .fb-mark { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; }
  .fb-mark svg { width: 16px; height: 16px; }
  .form-builder .builder-bar > * { min-width: 0; }
  .form-builder .builder-bar > .cluster:first-child { overflow: hidden; }
  .form-builder .builder-bar > .cluster:first-child > div { flex: 1 1 auto; }
  .fb-name { display: block; width: 100%; max-width: 280px; border: 0; background: transparent; font: inherit; font-weight: 700; color: var(--ink); padding: 2px 6px; margin-inline-start: -6px; border-radius: 8px; }
  .fb-name:hover { background: var(--surface-hover); }
  .fb-name:focus { outline: none; background: var(--surface); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent); }
  .fb-settings-link { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 12px; border-radius: var(--r-md); border: 1px dashed var(--line-strong); color: var(--text-muted); font-size: var(--fs-small); font-weight: 600; }
  .fb-settings-link:hover { color: var(--ink); border-style: solid; }
  .fb-settings-link svg { width: 16px; height: 16px; }
  .form-builder .outline-main { min-width: 0; flex: 1 1 auto; }
  .form-builder .outline-item { min-width: 0; }
  .outline-item.is-break { background: var(--surface-2); border-style: dashed; }
  .fb-canvas { min-height: 100%; background: var(--site-bg); font-family: var(--site-font); color: var(--site-text); }
  .fb-canvas-card { margin: -64px auto 24px; width: calc(100% - 24px); max-width: 620px; padding: 22px 18px; border-radius: calc(var(--site-radius) + 8px); background: var(--site-surface); box-shadow: 0 24px 60px -34px rgb(0 0 0 / .45); }
  .device.is-desktop .fb-canvas-card { padding: 34px; }
  .fb-canvas .wf-field[data-field] { cursor: pointer; border-radius: 12px; outline: 2px solid transparent; outline-offset: 6px; transition: outline-color var(--t-fast); }
  .fb-canvas .wf-field[data-field]:hover { outline-color: color-mix(in oklab, #0BC284 45%, transparent); }
  .fb-canvas .wf-field.is-selected { outline-color: #0BC284; }
  .fb-canvas .wf-field * { pointer-events: none; }
  .fb-logic { display: grid; gap: 10px; padding: 12px; border-radius: var(--r-md); background: var(--assist-soft); }
  .fb-logic .inspector-row svg { color: var(--assist-text); vertical-align: -2px; }
  .fb-logic-rule { display: grid; gap: 6px; }
  .fb-share { padding: 18px; }
  .fb-themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .fb-theme { display: grid; gap: 6px; padding: 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-align: center; }
  .fb-theme span { height: 44px; border-radius: 10px; }
  .fb-theme small { font-size: 11px; font-weight: 600; color: var(--text-muted); }
  .fb-theme.is-active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
  .fb-theme.is-active small { color: var(--ink); }

  /* Responses */
  .insights-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 16px; }
  .ins-row { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr) 64px; gap: 10px; align-items: center; font-size: var(--fs-small); }
  .ins-label { color: var(--ink); font-weight: 600; }
  .ins-bar { height: 10px; border-radius: var(--r-pill); background: var(--surface-sunken); overflow: hidden; }
  .ins-bar i { display: block; height: 100%; border-radius: inherit; background: var(--grad-brand); min-width: 3px; }
  .ins-n { text-align: end; font-weight: 700; color: var(--ink); }
  .ins-n small { margin-inline-start: 6px; font-weight: 600; color: var(--text-subtle); }
  .inbox { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 1000px) { .inbox { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); } .inbox-detail { position: sticky; top: 88px; } .inbox-back { display: none; } }
  @media (max-width: 999px) { .inbox.has-open .inbox-list { display: none; } .inbox:not(.has-open) .inbox-detail { display: none; } }
  .inbox-list { display: grid; gap: 6px; align-content: start; }
  .inbox-tools { display: grid; gap: 8px; margin-bottom: 6px; }
  .inbox-tools small { margin-inline-start: 4px; opacity: .7; }
  .inbox-item { display: flex; gap: 12px; align-items: center; width: 100%; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); text-align: start; transition: border-color var(--t-fast), background var(--t-fast); }
  .inbox-item:hover { border-color: var(--line-strong); }
  .inbox-item.is-open { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
  .inbox-item.is-new b::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 7px; border-radius: 50%; background: var(--accent); vertical-align: 2px; }
  .inbox-item b { color: var(--ink); font-size: var(--fs-small); }
  .inbox-excerpt { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
  .inbox-detail { padding: 20px; min-height: 320px; }
  .inbox-detail-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
  .inbox-contact { display: flex; align-items: center; gap: 12px; margin: 14px 0; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); color: var(--text); }
  .inbox-contact:hover { border-color: var(--line-strong); }
  .inbox-contact b { color: var(--ink); font-size: var(--fs-small); }
  .qa { display: grid; gap: 2px; margin: 0; }
  .qa-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .qa-row:last-child { border-bottom: 0; }
  .qa-row dt { font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
  .qa-row dd { margin: 4px 0 0; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
  .qa-row.is-old dt::after { content: " · removed from form"; color: var(--text-subtle); font-weight: 500; }
  .inbox-placeholder { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 60px 16px; }
  .inbox-placeholder span { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 6px; }
  .inbox-placeholder svg { width: 24px; height: 24px; }

  /* Settings: email sending */
  .mail-picks { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
  .mail-pick { display: flex; align-items: flex-start; gap: 14px; padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); cursor: pointer; box-shadow: var(--e1); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
  .mail-pick b { color: var(--ink); font-family: var(--font-display); font-size: 1.05rem; }
  .mail-pick small { display: block; margin-top: 6px; color: var(--text-muted); font-size: 13px; line-height: 1.45; }
  .mail-pick.is-active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--e2); }
  .mail-pick.is-active .pick-radio { border-color: var(--ink); background: radial-gradient(circle, var(--ink) 45%, transparent 50%); }
  .mail-pick-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; }
  .mail-pick-icon svg { width: 20px; height: 20px; }
  .mail-pick .pick-radio { position: static; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--line-strong); flex: none; }
  .mail-server-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) 120px 170px; }
  @media (max-width: 640px) { .mail-server-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .mail-server-grid > :first-child { grid-column: 1 / -1; } }
  .mail-providers { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
  .mail-provider { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); border: 1px dashed var(--line-strong); font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
  .mail-provider svg { width: 16px; height: 16px; color: var(--text-muted); }
}

/* R4C: block search in the form builder's Add panel; template gallery filters */
.fb-add-search { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 2px 2px 10px; background: var(--surface); color: var(--text-muted); }
.fb-add-search .input { flex: 1; min-height: 40px; }
.tpl-filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.tpl-filters button { flex: none; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.tpl-filters button[aria-pressed="true"] { background: var(--text); color: var(--surface); border-color: var(--text); }
.tpl-search { display: flex; gap: 8px; align-items: center; }
.tpl-search .input { flex: 1; }
.tpl-picks { max-height: min(52vh, 520px); overflow-y: auto; }

/* css/components/store.css */
/* Store: products, editor, orders, payments ---------------------------------------------- */
@layer components {
  .store-connect { padding: clamp(20px, 3vw, 32px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
  .store-connect h2 { color: #fff; font-family: var(--font-display); font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem); letter-spacing: -0.03em; margin: 12px 0 6px; }
  .store-connect p { color: rgb(255 255 255 / .8); max-width: 60ch; }

  .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }
  .product-card { display: flex; flex-direction: column; border-radius: var(--r-xl); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1); transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast); color: var(--text); }
  .product-card:hover { transform: translateY(-3px); box-shadow: var(--e2); }
  .product-card-img { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; background-size: cover; background-position: center; border-radius: 0; color: #fff; }
  .product-card-img > svg { width: 38px; height: 38px; opacity: .9; }
  .product-card-status { position: absolute; top: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: rgb(11 15 13 / .55); color: #fff; font-size: 11.5px; font-weight: 700; backdrop-filter: blur(8px); }
  .product-card-body { display: grid; gap: 4px; padding: 14px 16px 16px; }
  .product-card-body > b { font-family: var(--font-display); font-size: 1.08rem; color: var(--ink); }
  .product-card-price { font-weight: 800; color: var(--ink); }
  .product-card-stats { display: flex; gap: 14px; margin-top: 6px; font-size: 12.5px; color: var(--text-muted); }
  .product-card-stats b { color: var(--ink); }

  .pe-layout { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 1100px) { .pe-layout { grid-template-columns: minmax(0, 1fr) 320px; } .pe-preview { position: sticky; top: 88px; } }
  .pe-preview { display: grid; gap: 14px; justify-items: center; }
  .pe-preview .phone { width: 300px; }
  @media (max-width: 1099px) { .pe-preview { display: none; } }
  .pe-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; margin: 0; }
  .pe-stats div { padding: 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); text-align: center; }
  .pe-stats dt { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); }
  .pe-stats dd { margin: 2px 0 0; font-weight: 800; color: var(--ink); font-size: 13.5px; }
  .pe-image { display: flex; gap: 16px; align-items: center; }
  .pe-image img, .pe-image-ph { width: 160px; aspect-ratio: 16 / 10; border-radius: var(--r-md); object-fit: cover; flex: none; }
  .pe-image-ph { display: grid; place-items: center; }
  .pe-image-ph svg { width: 26px; height: 26px; }
  .pe-price-grid { display: grid; gap: 12px; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1fr); }
  @media (max-width: 560px) { .pe-price-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .pe-price-grid > :first-child { grid-column: 1 / -1; } }
  .pe-files { display: grid; gap: 8px; }
  .pe-file { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
  .pe-file svg { width: 16px; height: 16px; flex: none; }

  .order-status { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; background: var(--surface-sunken); color: var(--text-muted); }
  .order-status.is-paid { background: var(--accent-soft); color: var(--accent-text); }
  .order-status.is-pending { background: var(--warning-soft); color: var(--warning); }
  .order-status.is-failed { background: var(--danger-soft); color: var(--danger); }
  .order-hero { padding: 20px; display: grid; gap: 2px; }
  .order-hero small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
  .order-hero b { font-family: var(--font-display); font-size: 2rem; letter-spacing: -0.04em; }

  .pay-grid { display: grid; gap: 14px; }
  .pay-card { display: grid; gap: 14px; padding: 20px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1); }
  .pay-card.is-connected { border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); }
  .pay-card-head { display: flex; gap: 14px; align-items: flex-start; }
  .pay-card-head b { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); margin-inline-end: 6px; }
  .pay-logo { width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; flex: none; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; }
  .pay-webhook { display: grid; gap: 6px; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
}

.orders-tools { min-width: 0; }
.orders-tools > * { min-width: 0; }
.orders-tools .orders-source { width: auto; flex: 0 0 auto; min-width: 150px; } /* EVQ: store vs event-ticket orders */
@media (max-width: 640px) {
  .orders-tools { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .orders-tools .segmented { display: flex; overflow-x: auto; scrollbar-width: none; }
  .orders-tools .segmented button { flex: 1 0 auto; }
  .orders-tools .orders-source { width: 100%; }
}

/* Weesify Wallet ------------------------------------------------------------------------ */
@layer components {
  .wl-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 900px) { .wl-grid { grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(0, 1fr)); } }
  .wl-hero { padding: 24px; border-radius: 26px; display: grid; gap: 6px; align-content: end; min-height: 170px; color: #fff; }
  .wl-label { font-size: 13px; font-weight: 600; opacity: .8; }
  .wl-amount { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); letter-spacing: -0.04em; line-height: 1.02; }
  .wl-note { font-size: 13px; opacity: .78; }
  .wl-tile { padding: 20px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); display: grid; gap: 4px; align-content: end; min-width: 0; }
  .wl-tile span { font-size: 13px; color: var(--text-muted); font-weight: 600; }
  .wl-tile b { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); letter-spacing: -0.02em; }
  .wl-tile small { font-size: 12px; color: var(--text-subtle); display: flex; gap: 4px; align-items: center; }
  .wl-account b { font-size: 1.1rem; }
  .wl-account .link-btn { justify-self: start; margin-top: 4px; font-size: 13px; }
  .wl-setup { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 1000px) { .wl-setup { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
  .wl-setup-intro { padding: 28px; border-radius: 28px; color: #fff; display: grid; gap: 12px; }
  .wl-setup-intro h2 { margin: 6px 0 0; font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); letter-spacing: -0.03em; line-height: 1.05; }
  .wl-setup-intro p { margin: 0; opacity: .85; }
  .wl-setup-intro ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; font-size: 14px; }
  .wl-setup-intro li { display: flex; gap: 10px; align-items: flex-start; }
  .wl-setup-intro li svg { width: 18px; height: 18px; flex: none; color: var(--lime-400); }
  .wl-resolved { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); color: var(--accent-text); }
  .wl-resolved svg { width: 22px; height: 22px; flex: none; }
  .wl-resolved small { display: block; font-size: 11.5px; font-weight: 600; opacity: .8; }
  .wl-resolved b { color: var(--ink); }
  .wl-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
  .wl-steps li { display: inline-flex; align-items: center; gap: 6px; }
  .wl-steps li + li::before { content: ""; inline-size: 18px; block-size: 1px; background: var(--line); margin-inline-end: 2px; }
  .wl-steps span { inline-size: 22px; block-size: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); }
  .wl-steps .is-done span { background: var(--accent-soft); color: var(--accent-text); }
  .wl-steps .is-current { color: var(--ink); }
  .wl-steps .is-current span { background: var(--ink); color: var(--canvas); }
  .wl-alt { justify-self: center; min-block-size: 44px; }
  .wl-going { text-align: center; margin: 0; }
  .wl-pending { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
  .wl-pending-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; flex: none; }
  .wl-list { display: grid; }
  .wl-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line); min-width: 0; }
  .wl-row b { color: var(--ink); font-size: var(--fs-small); display: block; }
  .wl-row small { display: block; font-size: 12px; }
  .wl-row-icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-muted); flex: none; }
  .wl-row-icon svg { width: 16px; height: 16px; }
  .wl-row-icon.is-in { background: var(--accent-soft); color: var(--accent-text); }
  .wl-amt { white-space: nowrap; }
  .wl-amt.is-in { color: var(--accent-text); }
  .wl-currencies { display: grid; gap: 8px; }
  .wl-cur-row { display: flex; align-items: baseline; gap: 12px; }
  .wl-cur-row b { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); }
  @media (max-width: 560px) { .wl-row { padding: 12px 16px; } }
}
@layer components { .wl-hero .wl-amount, .wl-hero b { color: #fff; } }

/* Plan & billing ---------------------------------------------------------------------- */
@layer components {
  .bl-top { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 1000px) { .bl-top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
  .bl-current { padding: 26px; border-radius: 28px; color: #fff; display: grid; gap: 10px; align-content: start; }
  .bl-current h2 { margin: 8px 0 0; font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); letter-spacing: -0.04em; line-height: 1; color: #fff; }
  .bl-current p { margin: 0; opacity: .82; }
  .bl-current .badge { background: rgb(255 255 255 / .16); color: #fff; border-color: rgb(255 255 255 / .25); }
  .bl-current-foot { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / .16); font-size: 14px; }
  .bl-current-foot b { color: #fff; }
  .bl-meter { display: grid; gap: 6px; font-size: 13px; color: var(--text-muted); }
  .bl-meter b { color: var(--ink); }
  .bl-meter.is-near .progress span { background: var(--warning); }
  .bl-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .bl-save { margin-inline-start: 4px; color: var(--accent-text); font-weight: 700; }
  .bl-plans { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 900px) { .bl-plans { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
  .bl-plan { position: relative; display: grid; gap: 12px; align-content: start; padding: 22px; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); }
  .bl-plan.is-featured { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--e2); }
  .bl-plan.is-current { background: var(--surface-2); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft-2, var(--accent-soft)); }
  .bl-current-badge { display: inline-flex; align-items: center; gap: 4px; }
  .bl-current-badge svg { inline-size: 13px; block-size: 13px; }
  .bl-plan-note { margin: 0; font-size: 12.5px; color: var(--text-muted); }
  .bl-plan-actions { display: grid; gap: 6px; margin-block-start: auto; }
  .bl-plan-actions .btn { margin-block-start: 0; min-block-size: 44px; }
  .bl-plan-actions [aria-disabled="true"] { cursor: default; opacity: .85; }
  .bl-plan h3 { margin: 0; font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); }
  .bl-plan-tag { margin: 0; color: var(--text-muted); font-size: 13.5px; min-height: 2.8em; }
  .bl-price { margin: 0; display: flex; align-items: baseline; gap: 6px; }
  .bl-price b { font-family: var(--font-display); font-size: 2rem; letter-spacing: -0.03em; color: var(--ink); }
  .bl-price small { color: var(--text-muted); }
  .bl-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; color: var(--text); }
  .bl-plan li { display: flex; gap: 8px; align-items: flex-start; }
  .bl-plan li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent-text); }
  .bl-plan .btn { margin-top: auto; }
}

/* Storefront settings (ADR-0033) ------------------------------------------------------------ */
@layer components {
  .sfa-start { display: grid; gap: 24px; padding: clamp(22px, 4vw, 40px); align-items: center; overflow: hidden; }
  .sfa-start-copy { display: grid; gap: 12px; justify-items: start; max-width: 520px; }
  .sfa-start h2 { margin: 0; font-family: var(--font-display); font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); letter-spacing: -0.03em; }
  .sfa-start p { margin: 0; opacity: .88; line-height: 1.55; }
  .sfa-start-art { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 360px; width: 100%; justify-self: center; }
  .sfa-tile { display: grid; gap: 8px; padding: 10px; border-radius: 18px; background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .24); backdrop-filter: blur(10px);
    animation: sfa-float 6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.4s); }
  .sfa-tile i { display: block; aspect-ratio: 4 / 3; border-radius: 12px; background: linear-gradient(135deg, rgb(255 255 255 / .55), rgb(255 255 255 / .12)); }
  .sfa-tile b { display: block; height: 9px; width: 70%; border-radius: 9px; background: rgb(255 255 255 / .6); }
  .sfa-tile em { display: block; height: 22px; width: 48%; border-radius: 8px; background: #fff; justify-self: end; }
  @keyframes sfa-float { 50% { transform: translateY(-6px); } }
  @media (prefers-reduced-motion: reduce) { .sfa-tile { animation: none; } }

  .sfa-layout { display: grid; gap: 20px; align-items: start; }
  .sfa-status { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
  .sfa-entry { display: flex; align-items: center; gap: 14px; padding: 14px 16px; color: var(--text); transition: transform var(--t-fast), box-shadow var(--t-fast); }
  .sfa-entry:hover { transform: translateY(-1px); box-shadow: var(--e2); }
  .sfa-entry.is-live .sfa-status-icon { background: var(--accent); color: var(--text-on-accent, #fff); }
  .sfa-entry-go { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; background: var(--surface-sunken); color: var(--text-muted); flex: none; transition: transform var(--t-fast); }
  .sfa-entry:hover .sfa-entry-go { transform: translateX(calc(3px * var(--dir-sign, 1))); }
  .sfa-status-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--surface-sunken); color: var(--text-muted); }
  .sfa-status.is-live .sfa-status-icon { background: var(--accent); color: var(--text-on-accent, #fff); box-shadow: 0 12px 26px -14px var(--accent); }
  .sfa-status-copy { display: grid; gap: 2px; min-width: 0; flex: 1; }
  .sfa-url { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 13.5px; color: var(--text-muted); }
  .sfa-looks { border: 0; margin: 0; padding: 0; min-width: 0; }
  .sfa-look-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 6px; }
  .sfa-look { display: grid; gap: 6px; padding: 6px; border-radius: 14px; border: 1.5px solid var(--line); cursor: pointer; transition: border-color var(--t-fast), transform var(--t-fast); }
  .sfa-look:hover { transform: translateY(-1px); }
  .sfa-look.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .sfa-look:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
  .sfa-look-sw { position: relative; display: block; height: 38px; border-radius: 9px; background: var(--lk-bg); border: 1px solid rgb(0 0 0 / .06); overflow: hidden; }
  .sfa-look-sw i:first-child { position: absolute; inset-inline-start: 8px; top: 8px; width: 22px; height: 22px; border-radius: 7px; background: var(--lk-accent); }
  .sfa-look-sw i:last-child { position: absolute; inset-inline: 36px 10px; top: 15px; height: 7px; border-radius: 7px; background: var(--lk-text); opacity: .6; }
  .sfa-look-name { font-size: 12.5px; font-weight: 600; text-align: center; }

  .sfa-list { list-style: none; margin: 0; padding: 0 8px 8px; display: grid; }
  .sfa-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; transition: background var(--t-fast); }
  .sfa-item:hover { background: var(--surface-2); }
  .sfa-item + .sfa-item { border-top: 1px solid var(--line); border-radius: 0; }
  .sfa-item.is-dim .sfa-thumb, .sfa-item.is-dim .sfa-item-main { opacity: .5; }
  .sfa-status-icon svg { width: 22px; height: 22px; }
  .sfa-entry-go svg { width: 16px; height: 16px; }
  .sfa-thumb svg { width: 20px; height: 20px; }
  .sfa-thumb { width: 46px; height: 46px; flex: none; border-radius: 12px; background: var(--accent-soft) center / cover no-repeat; display: grid; place-items: center; color: var(--accent-text); }
  .sfa-item-main { display: grid; gap: 3px; min-width: 0; flex: 1; }
  .sfa-item-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); }
  .sfa-item-meta .badge { font-size: 11px; }
  .sfa-item-ctl { display: flex; align-items: center; gap: 2px; flex: none; }
  .sfa-item-ctl .switch { margin-inline-start: 6px; }

  .sfa-preview { display: none; }
  .sfa-phone { margin-top: 8px; border-radius: 34px; padding: 10px; background: var(--ink, #0B0F0D); box-shadow: 0 40px 80px -40px rgb(0 0 0 / .6); }

  .order-lines { list-style: none; margin: 0; padding: 4px 14px; border-radius: var(--r-md); border: 1px solid var(--line); display: grid; }
  .order-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: 13.5px; min-width: 0; }
  .order-lines li + li { border-top: 1px solid var(--line); }

  @media (min-width: 900px) {
    .sfa-start { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  }
  @media (min-width: 1100px) {
    .sfa-layout { grid-template-columns: minmax(0, 1fr) 340px; }
    .sfa-preview { display: block; position: sticky; top: 88px; }
  }
}

/* Options and inventory (ADR-0037) */
@layer components {
  .pe-opt { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr) auto; gap: 10px; align-items: start; }
  .pe-opt-x { margin-top: 28px; }
  @media (max-width: 560px) { .pe-opt { grid-template-columns: minmax(0, 1fr) auto; } .pe-opt > :nth-child(2) { grid-column: 1 / 2; } .pe-opt-x { grid-row: 1; grid-column: 2; } }
  .pe-variants .table td { vertical-align: top; }
  .pe-variants .input-sm { width: 100%; min-width: 72px; }
  .pe-variants .field-error { margin-top: 4px; }
  .pe-stock-grid { align-items: start; }

  .iv-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 1150px) { .iv-grid { grid-template-columns: minmax(0, 1fr) 340px; } }
  .iv-stock { display: inline-flex; align-items: center; gap: 4px; }
  .iv-count { width: 76px; text-align: center; font-variant-numeric: tabular-nums; }
  .iv-move { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-top: 1px solid var(--line); font-size: var(--fs-small); min-width: 0; }
  .iv-move small { display: block; }
  .iv-change { flex: none; min-width: 44px; padding: 3px 8px; border-radius: 999px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--surface-sunken); color: var(--ink); }
  .iv-change.is-down { background: var(--danger-soft); color: var(--danger); }
  .iv-change.is-up { background: var(--success-soft); color: var(--success); }
  .iv-sheet { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: flex-end; }
  .iv-sheet-backdrop { position: absolute; inset: 0; background: rgb(10 12 14 / .38); backdrop-filter: blur(3px); }
  .iv-sheet-panel { position: relative; width: min(440px, 100%); height: 100%; overflow-y: auto; border-radius: 0; animation: iv-in .22s var(--ease-out, ease-out); }
  @keyframes iv-in { from { transform: translateX(calc(24px * var(--dir-sign, 1))); opacity: 0; } }
  @media (prefers-reduced-motion: reduce) { .iv-sheet-panel { animation: none; } }
}

/* Discounts (ADR-0038) */
@layer components {
  .dc-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--line); }
  .dc-row:first-child { border-top: 0; }
  .dc-row.is-dim .dc-main, .dc-row.is-dim .dc-tag { opacity: .6; }
  .dc-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; font-weight: 700; letter-spacing: .03em; background: var(--accent-soft); color: var(--accent-text); border: 1px dashed color-mix(in oklab, var(--accent) 45%, transparent); white-space: nowrap; }
  .dc-tag.is-sale { font-family: inherit; letter-spacing: 0; background: var(--violet-soft, var(--assist-soft)); color: var(--violet-700); border-style: solid; border-color: transparent; }
  .dc-tag svg { width: 14px; height: 14px; }
  .dc-main { min-width: 0; display: grid; gap: 2px; }
  .dc-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dc-uses { display: grid; justify-items: end; line-height: 1.2; }
  .dc-actions { flex-wrap: nowrap; }
  @media (max-width: 760px) {
    .dc-row { grid-template-columns: minmax(0, 1fr) auto; }
    .dc-tag { grid-column: 1; justify-self: start; }
    .dc-row .tk-state { grid-column: 2; grid-row: 1; justify-self: end; }
    .dc-main { grid-column: 1 / -1; }
    .dc-uses { justify-items: start; grid-column: 1; }
    .dc-actions { grid-column: 2; justify-self: end; }
  }
  .dc-type { margin-bottom: 4px; }
  .dc-type svg { width: 15px; height: 15px; }
  .dc-amount { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 120px; align-items: start; }
  @media (max-width: 560px) { .dc-amount { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .dc-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; max-height: 220px; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
  .dc-code-input { text-transform: uppercase; letter-spacing: .04em; font-family: var(--font-mono, ui-monospace, monospace); }
}

/* Licence keys (ADR-0039) */
@layer components {
  .lic-grid { align-items: start; }
  .lic-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--fs-small); color: var(--text-muted); }
  .lic-stats b { color: var(--ink); }
  .lic-pool { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; }
  .lk-key { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; letter-spacing: .03em; }
}
@layer components {
  .lk-reveal { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); flex-wrap: wrap; }
  .lk-reveal code { font-size: 14.5px; overflow-wrap: anywhere; flex: 1; min-width: 0; }
  .lk-reveal .muted { flex: 1; }
  .lk-device { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: var(--fs-small); min-width: 0; }
  .lk-device svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
  .lk-device.is-dim { opacity: .55; }
}
@layer components { .table tr.is-clickable { cursor: pointer; } .table tr.is-clickable:hover td { background: var(--surface-hover); } }

/* Store → Reviews (B3 · U3) */
@layer components {
  .rvm { display: grid; gap: 8px; padding: clamp(16px, 1rem + .5vw, 20px); }
  .rvm-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
  .rvm-stars { font-size: 17px; letter-spacing: 1px; color: var(--warning, var(--accent)); }
  .rvm-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }
}

/* A16: wallet step 2 explains how a Stripe seller is paid (direct vs destination charges) */
@layer components {
  .wl-mode { display: grid; gap: 8px; padding: 14px 16px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
  .wl-mode-title { display: flex; gap: 8px; align-items: center; margin: 0; color: var(--ink); font-weight: 700; font-size: 14.5px; }
  .wl-mode-title svg { width: 17px; height: 17px; flex: none; color: var(--accent-text); }
  .wl-mode ul { margin: 0; padding-inline-start: 20px; display: grid; gap: 5px; font-size: 13px; line-height: 1.5; color: var(--text); }
  .wl-dash { display: inline-flex; gap: 6px; align-items: center; min-height: 44px; color: inherit; text-decoration: underline; text-underline-offset: 3px; justify-self: start; }
  .wl-dash svg { width: 15px; height: 15px; }
}

/* B16 · card on file before a free trial -------------------------------------------------- */
@layer components {
  .b16-step { border-color: var(--accent); scroll-margin-block-start: 80px; }
  .b16-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 720px) { .b16-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .b16-secure { display: flex; align-items: flex-start; gap: 8px; }
  .b16-secure svg, .b16-card svg, .b16-onfile-row > svg { flex: none; inline-size: 18px; block-size: 18px; }
  .b16-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius, 12px); background: var(--surface-2, var(--surface)); }
  .b16-summary { margin: 0; padding: 14px 16px; border-inline-start: 3px solid var(--accent); border-radius: var(--radius, 12px); background: var(--accent-soft, var(--surface-2)); line-height: 1.55; }
  .b16-consent { min-block-size: 44px; align-items: flex-start; }
  .b16-consent .check { margin-block-start: 3px; }
  .b16-onfile-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
  .b16-onfile-row .btn { min-block-size: 44px; }
}

/* R17A · savings counter and fee cap strip (home + wallet) */
.fs-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-item { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .875rem; font-weight: 600; }
.fs-item svg { inline-size: 18px; block-size: 18px; flex: none; color: var(--accent); }
.fs-reached { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
/* R17C · Store editor › Earn more */
.cv-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .cv-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cv-kpi { display: grid; gap: 2px; padding: 12px; border-radius: var(--radius-md, 12px); background: var(--surface-2, var(--bg-subtle)); border: 1px solid var(--border); min-inline-size: 0; }
.cv-kpi b { font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cv-tool { display: grid; gap: 10px; padding-block: 12px; border-block-start: 1px solid var(--border); }
.cv-fields { align-items: start; }
.cv-radio { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.cv-radio label { display: flex; gap: 8px; align-items: center; min-block-size: 44px; font-size: 14px; color: var(--ink); }
.cv-actions { display: flex; gap: 12px; align-items: center; }

/* css/components/email.css */
/* Email & broadcasts (ADR-0019): inbox-style list, composer with a live phone preview, results ---------------- */
@layer components {
  /* Empty state */
  .em-empty { padding: clamp(24px, 4vw, 44px); display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
  @media (min-width: 980px) { .em-empty { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; } }
  .em-empty h2 { color: #fff; font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); letter-spacing: -0.045em; line-height: 1.05; margin: 14px 0 10px; }
  .em-empty h2 em.accent { color: #C2F45B; font-style: italic; }
  .em-empty p { color: rgb(255 255 255 / .72); max-width: 54ch; }
  .em-empty-art { position: relative; min-height: 230px; display: grid; place-items: center; }
  .em-env { position: relative; width: min(280px, 80%); aspect-ratio: 1.45; border-radius: 18px; background: linear-gradient(160deg, #1D2A24, #111815); border: 1px solid rgb(255 255 255 / .12); box-shadow: 0 40px 80px -30px rgb(0 0 0 / .7); }
  .em-env-flap { position: absolute; inset: 0 0 38% 0; clip-path: polygon(0 0, 100% 0, 50% 100%); background: linear-gradient(180deg, rgb(255 255 255 / .1), rgb(255 255 255 / .02)); border-radius: 18px 18px 0 0; z-index: 2; }
  .em-env-letter { position: absolute; left: 9%; right: 9%; bottom: 22%; padding: 14px; border-radius: 12px; background: #fff; display: grid; gap: 7px; transform: translateY(-38%) rotate(-3deg); box-shadow: 0 20px 40px -18px rgb(0 0 0 / .5); animation: em-rise 3.2s var(--ease-out) infinite alternate; }
  .em-env-letter i { height: 7px; border-radius: 99px; background: #E3E8E5; }
  .em-env-letter i.is-h { height: 11px; width: 70%; background: #101512; }
  .em-env-letter i.is-short { width: 55%; }
  .em-env-letter b { width: 42%; height: 18px; border-radius: 6px; background: var(--emerald-500); margin-top: 4px; }
  @keyframes em-rise { to { transform: translateY(-52%) rotate(0deg); } }
  @media (prefers-reduced-motion: reduce) { .em-env-letter { animation: none; } }
  .em-float { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: var(--r-pill); background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .16); backdrop-filter: blur(10px); color: #fff; font-size: 12px; font-weight: 700; }
  .em-float svg { width: 14px; height: 14px; color: var(--lime-400); }
  .em-float-1 { top: 8%; inset-inline-end: 4%; } .em-float-2 { bottom: 6%; inset-inline-start: 2%; }

  .em-meter { height: 8px; border-radius: 99px; background: rgb(255 255 255 / .18); overflow: hidden; margin-top: 12px; }
  .em-meter > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lime-400), #fff); transition: width .6s var(--ease-out); }
  .em-meter.is-light { background: var(--surface-sunken); margin-top: 4px; }
  .em-meter.is-light > span { background: linear-gradient(90deg, var(--emerald-500), var(--violet-500)); }
  .tab-count { display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 6px; margin-inline-start: 4px; border-radius: 99px; background: var(--surface-sunken); font-size: 11px; font-weight: 700; color: var(--text-muted); }

  /* Inbox-style list */
  .em-list { display: grid; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1); overflow: hidden; }
  .em-row { display: flex; align-items: center; gap: 12px; padding-block: 12px; padding-inline: 0 14px; border-bottom: 1px solid var(--line); transition: background var(--t-fast); }
  .em-row:last-child { border-bottom: 0; }
  .em-row:hover { background: var(--surface-hover); }
  .em-row-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; padding-inline-start: 16px; color: inherit; text-decoration: none; }
  .em-avatar { width: 40px; height: 40px; flex: none; border-radius: 14px; display: grid; place-items: center; background: var(--surface-sunken); color: var(--text-muted); border: 1px dashed var(--line-strong); }
  .em-avatar svg { width: 18px; height: 18px; }
  .em-avatar.is-sent { background: var(--grad-forest); color: #fff; border: 0; }
  .em-avatar.is-sending { background: var(--grad-brand); color: #fff; border: 0; }
  .em-avatar.is-scheduled { background: var(--grad-violet); color: #fff; border: 0; }
  .em-avatar.is-failed { background: var(--danger-soft); color: var(--danger); border: 0; }
  .em-row-text { min-width: 0; display: grid; gap: 1px; }
  .em-row-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .em-row-top b { color: var(--ink); font-size: 15px; }
  .em-row-text small { color: var(--text-muted); font-size: 13px; }
  .em-row-text small.em-row-when { color: var(--text-subtle); font-size: 12px; }
  .em-status { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: .01em; background: var(--surface-sunken); color: var(--text-muted); flex: none; }
  .em-status.is-sent { background: var(--success-soft); color: var(--success); }
  .em-status.is-sending, .em-status.is-scheduled { background: var(--assist-soft); color: var(--assist-text); }
  .em-status.is-failed { background: var(--danger-soft); color: var(--danger); }
  .em-status.is-public { background: var(--info-soft); color: var(--info); } /* B3 · F3: listed in a newsletter block's archive */
  .em-row-stats { display: flex; gap: 18px; margin: 0; flex: none; }
  .em-row-stats dt { font-size: 11px; color: var(--text-subtle); }
  .em-row-stats dd { margin: 0; font-weight: 700; color: var(--ink); font-size: 15px; }
  @media (max-width: 640px) { .em-row { flex-wrap: wrap; padding-block: 12px; padding-inline: 0 12px; } .em-row-stats { order: 3; width: 100%; padding-inline-start: 70px; } }

  /* Composer */
  .em-hero { align-items: flex-end; flex-wrap: wrap; }
  @media (max-width: 760px) { .em-hero { display: flex; flex-direction: column; align-items: stretch; } .em-hero > div { width: 100%; } .em-hero .page-actions { flex-wrap: wrap; } .em-hero .page-actions > * { flex: 1 1 auto; } }
  .em-name { width: 100%; border: 0; background: transparent; padding: 2px 0; font-family: var(--font-display); font-size: var(--fs-h1); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); border-bottom: 1.5px dashed transparent; border-radius: 0; }
  .em-name:hover { border-bottom-color: var(--line-strong); }
  .em-name:focus { outline: none; border-bottom-color: var(--accent); }
  .em-steps { display: flex; gap: 6px; margin: 4px 0 20px; overflow-x: auto; scrollbar-width: none; }
  .em-step { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding-block: 0; padding-inline: 6px 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--text-muted); font-weight: 600; font-size: var(--fs-small); white-space: nowrap; }
  .em-step i { width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; background: var(--surface-sunken); color: var(--text-muted); }
  .em-step.is-active { background: var(--ink); color: var(--text-on-ink); border-color: var(--ink); }
  .em-step.is-active i { background: var(--emerald-500); color: #04140D; }
  .em-compose { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 1100px) { .em-compose { grid-template-columns: minmax(0, 1fr) 420px; } }
  .em-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
  .em-mobile-switch { display: none; margin-bottom: 14px; }
  @media (max-width: 1099px) {
    .em-mobile-switch { display: inline-flex; }
    .em-compose[data-show="edit"] .em-preview { display: none; }
    .em-compose[data-show="preview"] .em-panel { display: none; }
  }
  .em-from { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
  .em-from > div { display: grid; }
  .em-from-avatar { width: 36px; height: 36px; flex: none; border-radius: 99px; display: grid; place-items: center; background: var(--grad-brand); color: #fff; font-weight: 800; font-family: var(--font-display); }

  .em-blocks { display: grid; }
  .em-block { border-top: 1px solid var(--line); }
  .em-block.is-open { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
  .em-block-head { display: flex; align-items: center; gap: 4px; padding-block: 6px; padding-inline: 0 10px; }
  .em-block-toggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding-block: 8px; padding-inline: 16px 0; background: none; border: 0; text-align: start; color: inherit; }
  .em-block-icon { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--surface-sunken); color: var(--ink); }
  .em-block.is-open .em-block-icon { background: var(--ink); color: var(--text-on-ink); }
  .em-block-icon svg { width: 16px; height: 16px; }
  .em-block-sum { display: grid; min-width: 0; }
  .em-block-sum b { font-size: 13px; color: var(--ink); }
  .em-block-sum small { color: var(--text-muted); font-size: 12.5px; }
  .em-block-tools { display: flex; align-items: center; gap: 2px; flex: none; }
  .em-block-body { padding: 4px 16px 18px; }
  .em-tags { display: flex; flex-wrap: wrap; gap: 6px; }
  .em-tag { height: 28px; padding: 0 10px; border-radius: 99px; border: 1px dashed var(--line-strong); background: var(--surface); color: var(--text-muted); font-size: 12px; font-weight: 600; }
  .em-tag:hover { border-style: solid; color: var(--ink); }
  .em-add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 14px 16px; border-top: 1px solid var(--line); background: var(--hatch), var(--surface-2); }
  .em-add-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink); box-shadow: var(--e1); transition: transform var(--t-fast) var(--ease-out); }
  .em-add-btn:hover { transform: translateY(-1px); border-color: var(--line-strong); }
  .em-add-btn svg { width: 15px; height: 15px; color: var(--accent-text); }
  .em-color { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); }
  .em-color input { width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: none; cursor: pointer; }
  .em-swatches { display: flex; gap: 8px; }
  .em-swatch { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line-strong); background: linear-gradient(135deg, var(--bg) 50%, var(--card) 50%); }
  .em-swatch.is-active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
  .em-logo-thumb { height: 32px; width: auto; max-width: 90px; border-radius: 6px; border: 1px solid var(--line); background: #fff; }

  .em-aud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  @media (max-width: 560px) { .em-aud { grid-template-columns: minmax(0, 1fr); } }
  .em-aud-card { display: grid; gap: 2px; padding: 14px; border-radius: var(--r-lg); border: 1.5px solid var(--line); background: var(--surface); cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
  .em-aud-card:hover { border-color: var(--line-strong); }
  .em-aud-card.is-locked { cursor: default; background: var(--surface-sunken); } .em-aud-card.is-locked > :not(.upl) { opacity: .6; } .em-aud-card.is-locked .upl { justify-self: start; margin-block-start: 4px; } /* R13C */
  .em-aud-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
  .em-aud-card:focus-within { box-shadow: var(--focus-ring); }
  .em-aud-icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-sunken); margin-bottom: 8px; }
  .em-aud-card.is-active .em-aud-icon { background: var(--accent); color: #fff; }
  .em-aud-icon svg { width: 17px; height: 17px; }
  .em-aud-card b { color: var(--ink); } .em-aud-card small { color: var(--text-muted); font-size: 12.5px; }

  .em-check { list-style: none; margin: 0; padding: 0; display: grid; }
  .em-check li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .em-check li:last-child { border-bottom: 0; }
  .em-check li > svg { width: 26px; height: 26px; padding: 5px; border-radius: 99px; flex: none; }
  .em-check li.is-ok > svg { background: var(--success-soft); color: var(--success); }
  .em-check li.is-bad > svg { background: var(--danger-soft); color: var(--danger); }
  .em-check li > span { flex: 1; min-width: 0; display: grid; }
  .em-check li small { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .em-problems { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; }
  .em-when { display: grid; gap: 12px; justify-items: start; padding: 14px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); }
  .em-sched { color: #fff; }
  .em-sched h2 { color: #fff; font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); letter-spacing: -0.03em; margin: 14px 0 6px; }
  .em-sched p { color: rgb(255 255 255 / .75); }
  .em-kpis { margin-top: 0; }
  @media (min-width: 1100px) { .em-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .em-panel > .callout { margin-bottom: 16px; }

  /* Preview: an inbox row on top, the email below, inside a device frame */
  .em-preview { position: sticky; top: calc(var(--topbar-h, 64px) + 16px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; min-width: 0; }
  .em-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .em-device { justify-self: center; width: 390px; max-width: 100%; border-radius: 34px; padding: 10px; background: linear-gradient(160deg, #1B211E, #0A0D0C); box-shadow: var(--e3), inset 0 0 0 1px rgb(255 255 255 / .08); display: grid; gap: 0; overflow: hidden; transition: width var(--t-slow, .3s) var(--ease-out), border-radius .3s; }
  .em-device.is-desktop { width: 100%; border-radius: 16px; padding: 6px; }
  @media (min-width: 1100px) { .em-device.is-desktop { width: min(680px, calc(100vw - 420px)); justify-self: end; } }
  .em-inbox { display: flex; gap: 10px; align-items: flex-start; padding: 14px 14px 12px; border-radius: 26px 26px 0 0; background: #fff; border-bottom: 1px solid #E8ECE9; color: #101512; }
  .em-device.is-desktop .em-inbox { border-radius: 11px 11px 0 0; }
  .em-inbox > div { flex: 1; font-size: 13px; }
  .em-inbox b { font-size: 14px; }
  .em-inbox-subj { font-weight: 600; }
  .em-inbox-pre { font-size: 12.5px; color: #6B746E !important; }
  .em-inbox small { color: #8A938D; }
  .em-frame { display: block; width: 100%; height: min(640px, 70vh); border: 0; background: #F1F2EE; border-radius: 0 0 26px 26px; }
  .em-device.is-desktop .em-frame { border-radius: 0 0 11px 11px; height: min(720px, 75vh); }

  /* R4F: deliverability panel */
  .em-health .card-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 16px 20px 4px; }
  .em-health .card-title { display: inline-flex; gap: 8px; align-items: center; }
  .em-health-grid { list-style: none; margin: 0; padding: 12px 20px; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 720px) { .em-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .em-health-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .em-health-grid li { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: var(--r-md, 12px); background: var(--surface-2, var(--bg-subtle)); }
  .em-health-grid li > svg { flex: none; width: 18px; height: 18px; margin-block-start: 2px; color: var(--success, #0BC284); }
  .em-health-grid li.is-bad > svg { color: var(--danger, #DC2626); }
  .em-health-grid span { display: grid; gap: 2px; min-width: 0; }
  .em-health-grid small { color: var(--text-muted, var(--muted)); }
  .em-health-note { padding: 0 20px 16px; margin: 0; }
  .em-when-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 720px) { .em-when-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .em-when-quick { margin-block: 8px; }
  .em-when-quick .chip { min-height: 36px; cursor: pointer; }

  /* R4F: template gallery */
  .em-gallery-cats { margin-block-end: 14px; }
  .em-gallery-cats .chip { min-height: 36px; cursor: pointer; }
  .em-gallery-cats .chip[aria-pressed="true"] { background: var(--text, #101512); color: var(--bg, #fff); }
  .em-gallery { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 720px) { .em-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .em-tpl { display: grid; gap: 4px; text-align: start; padding: 10px; border-radius: var(--r-lg, 14px); border: 1px solid var(--line); background: var(--surface, var(--bg)); color: inherit; cursor: pointer; transition: border-color .15s, transform .15s; min-height: 44px; }
  .em-tpl:hover, .em-tpl:focus-visible { border-color: var(--tpl); transform: translateY(-1px); }
  @media (prefers-reduced-motion: reduce) { .em-tpl:hover, .em-tpl:focus-visible { transform: none; } }
  .em-tpl-art { position: relative; display: grid; gap: 6px; align-content: start; height: 96px; padding: 12px; border-radius: 10px; background: color-mix(in srgb, var(--tpl) 14%, var(--surface, #fff)); overflow: hidden; margin-block-end: 4px; }
  .em-tpl-art svg { width: 20px; height: 20px; color: var(--tpl); }
  .em-tpl-art i { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--tpl) 30%, transparent); }
  .em-tpl-art i.is-short { width: 55%; }
  .em-tpl-art b { display: block; width: 40%; height: 14px; border-radius: 7px; background: var(--tpl); }
  .em-tpl-name { font-weight: 600; font-size: 14px; }
  .em-tpl small { color: var(--text-muted, var(--muted)); font-size: 12px; line-height: 1.35; }
  .em-gallery-h { font-size: 14px; margin: 18px 0 8px; }
}

/* css/components/automations.css */
/* Automations (ADR-0020): recipe list, a vertical flow canvas with "+" between steps, an inspector, run history ---- */
@layer components {
  .au-empty { padding: clamp(24px, 4vw, 44px); display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); overflow: hidden; margin-bottom: 24px; }
  @media (min-width: 980px) { .au-empty { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; } }
  .au-empty h2 { color: #fff; font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); letter-spacing: -0.045em; line-height: 1.05; margin: 14px 0 10px; }
  .au-empty h2 em.accent { color: #C2F45B; font-style: italic; }
  .au-empty p { color: rgb(255 255 255 / .72); max-width: 54ch; }
  .au-empty-art { display: grid; justify-items: center; gap: 0; }
  .au-empty-art i { width: 2px; height: 18px; background: linear-gradient(rgb(255 255 255 / .1), rgb(255 255 255 / .35)); }
  .au-node { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 14px; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .14); color: #fff; font-weight: 700; font-size: 13px; backdrop-filter: blur(8px); animation: au-pop .6s var(--ease-out) both; }
  .au-node svg { width: 16px; height: 16px; color: var(--lime-400); }
  .au-node.is-trigger { background: linear-gradient(135deg, var(--violet-500), var(--violet-700)); border-color: transparent; }
  .au-node.is-trigger svg { color: #fff; }
  .au-node.is-wait { background: transparent; border-style: dashed; color: rgb(255 255 255 / .75); }
  .au-empty-art > :nth-child(3) { animation-delay: .12s; } .au-empty-art > :nth-child(5) { animation-delay: .24s; } .au-empty-art > :nth-child(7) { animation-delay: .36s; }
  @keyframes au-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }
  @media (prefers-reduced-motion: reduce) { .au-node { animation: none; } }

  /* List */
  .au-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
  .au-card { position: relative; display: grid; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1); transition: box-shadow var(--t-fast), transform var(--t-fast) var(--ease-out); }
  .au-card:hover { box-shadow: var(--e2); transform: translateY(-2px); }
  .au-card-main { display: grid; gap: 10px; padding: 18px 18px 16px; color: inherit; text-decoration: none; min-width: 0; }
  .au-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-inline-end: 72px; }
  .au-card-title { font-family: var(--font-display); font-size: 1.14rem; letter-spacing: -0.02em; color: var(--ink); }
  .au-card-actions { position: absolute; top: 14px; inset-inline-end: 12px; display: flex; align-items: center; gap: 6px; }
  .au-state { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; background: var(--surface-sunken); color: var(--text-muted); }
  .au-state.is-active { background: var(--success-soft); color: var(--success); }
  .au-strip { display: flex; align-items: center; gap: 0; padding: 12px; border-radius: 14px; background: var(--hatch), var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
  .au-strip i { flex: 1 1 10px; max-width: 22px; height: 2px; background: var(--line-strong); }
  .au-strip-trigger, .au-strip-step, .au-strip-more { width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 11px; font-weight: 800; }
  .au-strip-trigger { background: linear-gradient(135deg, var(--violet-500), var(--violet-700)); color: #fff; border: 0; }
  .au-strip-step svg, .au-strip-trigger svg { width: 15px; height: 15px; }
  .au-strip-step.is-wait { border-style: dashed; color: var(--text-muted); }
  .au-strip-step.is-send_email { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
  .au-strip-step.is-branch { background: var(--assist-soft); color: var(--assist-text); border-color: transparent; }

  /* Builder */
  .au-hero { align-items: flex-end; flex-wrap: wrap; }
  @media (max-width: 760px) { .au-hero { flex-direction: column; align-items: stretch; } .au-hero > div { width: 100%; } .au-hero .page-actions { flex-wrap: wrap; } }
  .au-builder { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 1100px) { .au-builder { grid-template-columns: minmax(0, 1fr) 400px; } .au-back { display: none; } }
  @media (max-width: 1099px) { .au-builder[data-pane="canvas"] .au-inspector { display: none; } .au-builder[data-pane="inspector"] .au-canvas { display: none; } }
  .au-canvas { border-radius: var(--r-xl); border: 1px solid var(--line); background: radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--ink) 12%, transparent) 1px, transparent 0) 0 0 / 18px 18px, var(--surface-2); padding: clamp(18px, 3vw, 36px) 12px; overflow-x: auto; min-height: 420px; }
  .au-flow { display: grid; justify-items: center; min-width: min-content; }
  .au-node-wrap { display: grid; justify-items: center; width: 100%; }
  .au-card-node { position: relative; width: min(100%, 400px); min-width: 260px; display: flex; align-items: center; gap: 4px; border-radius: 18px; background: var(--surface); border: 1.5px solid var(--line); box-shadow: var(--e1); transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast) var(--ease-out); text-align: start; }
  .au-card-node:hover { border-color: var(--line-strong); box-shadow: var(--e2); }
  .au-card-node.is-selected { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), var(--e2); }
  button.au-card-node { padding: 14px 16px; gap: 12px; color: inherit; }
  .au-card-node.is-trigger { background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--violet-400), var(--emerald-400)) border-box; border-color: transparent; }
  .au-card-node.is-wait { border-style: dashed; background: color-mix(in oklab, var(--surface) 70%, transparent); box-shadow: none; }
  .au-card-node.is-end { width: auto; min-width: 0; border-radius: 99px; }
  .au-node-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding-block: 12px; padding-inline: 14px 4px; background: none; border: 0; text-align: start; color: inherit; }
  .au-node-icon { width: 38px; height: 38px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--surface-sunken); color: var(--ink); }
  .au-node-icon svg { width: 18px; height: 18px; }
  .au-node-icon.g-card { background: var(--grad-violet); color: #fff; }
  .au-node-icon.g-card svg { color: #fff; }
  .au-node-icon.is-send_email { background: var(--accent-soft); color: var(--accent-text); }
  .au-node-icon.is-notify { background: var(--warning-soft); color: var(--warning); }
  .au-node-icon.is-branch { background: var(--assist-soft); color: var(--assist-text); }
  .au-node-icon.is-webhook { background: var(--info-soft); color: var(--info); }
  .au-node-icon.is-end { background: var(--ink); color: var(--text-on-ink); }
  .au-node-text { display: grid; min-width: 0; gap: 1px; }
  .au-node-text small { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-subtle); }
  .au-node-text b { color: var(--ink); font-size: 14px; }
  .au-node-text em { font-style: normal; font-size: 12px; color: var(--text-muted); }
  .au-node-tools { display: flex; align-items: center; padding-inline-end: 8px; opacity: .55; transition: opacity var(--t-fast); }
  .au-card-node:hover .au-node-tools, .au-card-node.is-selected .au-node-tools, .au-card-node:focus-within .au-node-tools { opacity: 1; }
  .au-node-tools .icon-btn { width: 30px; height: 30px; }

  .au-line { width: 2px; height: 28px; background: var(--line-strong); }
  .au-add { position: relative; display: grid; justify-items: center; height: 46px; }
  .au-add::before { content: ""; position: absolute; top: 0; bottom: 0; inset-inline-start: 50%; width: 2px; margin-inline-start: -1px; background: var(--line-strong); }
  .au-add-btn { position: relative; z-index: 1; align-self: center; width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center; background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--text-muted); transition: transform var(--t-fast) var(--ease-spring), background var(--t-fast), color var(--t-fast); }
  .au-add-btn svg { width: 14px; height: 14px; }
  .au-add-btn:hover, .au-add-btn[aria-expanded="true"] { background: var(--ink); color: var(--text-on-ink); border-color: var(--ink); transform: scale(1.15); }
  .au-add-menu { position: absolute; top: 40px; z-index: 30; width: 300px; max-height: 420px; overflow: auto; padding: 8px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e3); display: grid; gap: 4px; }
  .au-add-group small { display: block; padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-subtle); }
  .au-add-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: none; border: 0; text-align: start; color: inherit; }
  .au-add-item:hover { background: var(--surface-hover); }
  .au-add-item.is-locked { cursor: default; } .au-add-item.is-locked > span:not(.upl):not(.au-add-icon) { opacity: .6; flex: 1; } /* R12D */
  .au-add-item b { display: block; font-size: 13.5px; color: var(--ink); } .au-add-item small { color: var(--text-muted); font-size: 12px; }
  .au-add-icon { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--surface-sunken); }
  .au-add-icon svg { width: 16px; height: 16px; }
  .au-add-icon.is-send_email { background: var(--accent-soft); color: var(--accent-text); }
  .au-add-icon.is-branch { background: var(--assist-soft); color: var(--assist-text); }

  .au-branch { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 28px; width: 100%; padding-top: 22px; position: relative; align-items: stretch; }
  .au-branch::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 22px; border: 2px solid var(--line-strong); border-bottom: 0; border-radius: 14px 14px 0 0; }
  .au-branch::after { content: ""; position: absolute; top: -12px; inset-inline-start: 50%; width: 2px; height: 12px; margin-inline-start: -1px; background: var(--line-strong); }
  .au-branch-col { display: flex; flex-direction: column; align-items: center; padding: 0 6px; min-width: 0; }
  .au-branch-col > .au-node-wrap { width: 100%; }
  .au-fill { flex: 1; width: 2px; min-height: 10px; background: var(--line-strong); }
  .au-merge { position: relative; width: 100%; height: 22px; }
  .au-merge::before { content: ""; position: absolute; top: 0; left: 25%; right: 25%; height: 22px; border: 2px solid var(--line-strong); border-top: 0; border-radius: 0 0 14px 14px; }
  .au-branch-label { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 99px; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; }
  .au-branch-col.is-yes .au-branch-label { background: var(--success-soft); color: var(--success); }
  .au-branch-col.is-no .au-branch-label { background: var(--danger-soft); color: var(--danger); }
  .au-finish { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); color: var(--text-muted); font-size: 12.5px; font-weight: 600; }
  .au-finish svg { width: 15px; height: 15px; color: var(--success); }
  .au-hint { color: var(--text-muted); font-size: 13px; margin-top: 4px; }

  .au-inspector { position: sticky; top: calc(var(--topbar-h, 64px) + 16px); display: grid; gap: 10px; min-width: 0; }
  .au-inspect { border: 1px solid var(--line); margin: 0; padding: 0; min-width: 0; }
  .au-inspect .kicker { display: block; margin-bottom: 2px; }
  .au-triggers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .au-trigger-opt { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); text-align: start; font-size: 12.5px; font-weight: 600; color: var(--ink); min-height: 48px; }
  .au-trigger-opt svg { width: 16px; height: 16px; flex: none; color: var(--text-muted); }
  .au-trigger-opt:hover { border-color: var(--line-strong); }
  .au-trigger-opt.is-active { border-color: var(--violet-500); background: var(--assist-soft); }
  .au-trigger-opt.is-active svg { color: var(--assist-text); }
  .au-cond { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 6px; align-items: center; }
  @media (max-width: 520px) { .au-cond { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } .au-cond > :nth-child(3) { grid-column: 1 / 3; } }
  .au-preview-frame { display: block; width: 100%; height: min(640px, 70vh); border: 0; background: #F1F2EE; border-radius: 0 0 var(--r-lg) var(--r-lg); }

  /* Run history */
  .au-run { gap: 8px; }
  .au-run.is-open { background: var(--surface-2); }
  .au-run-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; background: none; border: 0; text-align: start; color: inherit; padding: 0; }
  .au-run-status { flex: none; height: 22px; padding: 0 9px; border-radius: 99px; display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 700; background: var(--surface-sunken); color: var(--text-muted); }
  .au-run-status.is-waiting, .au-run-status.is-running { background: var(--assist-soft); color: var(--assist-text); }
  .au-run-status.is-completed { background: var(--success-soft); color: var(--success); }
  .au-run-status.is-failed { background: var(--danger-soft); color: var(--danger); }
  .au-log { list-style: none; margin: 0; padding-block: 6px 16px; padding-inline: 62px 18px; display: grid; gap: 0; background: var(--surface-2); border-bottom: 1px solid var(--line); }
  .au-log li { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
  .au-log li::before { content: ""; position: absolute; inset-inline-start: 4px; top: 22px; bottom: -8px; width: 2px; background: var(--line); }
  .au-log li:last-child::before { display: none; }
  .au-log-dot { width: 10px; height: 10px; margin-top: 5px; flex: none; border-radius: 99px; background: var(--success); }
  .au-log li.is-waiting .au-log-dot { background: var(--violet-500); } .au-log li.is-skipped .au-log-dot { background: var(--text-subtle); } .au-log li.is-failed .au-log-dot { background: var(--danger); }
  .au-log li.is-no .au-log-dot { background: var(--tangerine-500); }
  .au-log b { display: block; font-size: 13.5px; color: var(--ink); } .au-log small { color: var(--text-muted); font-size: 12.5px; }
}
@layer components {
  /* Phones: the two paths of an if / else stack, each marked with its colour, instead of scrolling sideways. */
  @media (max-width: 700px) {
    .au-branch { grid-template-columns: minmax(0, 1fr); gap: 14px; padding-top: 10px; }
    .au-branch::before, .au-merge::before { display: none; }
    .au-merge { height: 10px; }
    .au-branch-col { padding: 12px 8px 4px; border-radius: 20px; border: 1.5px dashed var(--line-strong); }
    .au-branch-col.is-yes { border-color: color-mix(in oklab, var(--success) 45%, transparent); }
    .au-branch-col.is-no { border-color: color-mix(in oklab, var(--danger) 40%, transparent); }
    .au-fill { display: none; }
    .au-card-node { min-width: 0; }
  }
}

/* css/components/notifications.css */
/* Notifications (ADR-0021): the bell, its panel, the inbox and settings ------------------------------------------ */
@layer components {
  .nb { position: relative; }
  .nb-btn { position: relative; }
  .nb-count { position: absolute; top: -5px; inset-inline-end: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; display: grid; place-items: center;
    background: var(--tangerine-500); color: #fff; font-size: 10px; font-weight: 800; line-height: 1; box-shadow: 0 0 0 2px var(--surface); animation: nb-pop .35s var(--ease-spring); }
  @keyframes nb-pop { from { transform: scale(.4); } }
  @media (prefers-reduced-motion: reduce) { .nb-count { animation: none; } }
  .nb-panel { position: absolute; inset-inline-end: -8px; top: calc(100% + 10px); z-index: 60; width: min(380px, calc(100vw - 24px)); border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e3); overflow: hidden; }
  @media (max-width: 640px) { .nb-panel { position: fixed; right: 12px; left: 12px; width: auto; top: 64px; } }
  .nb-head, .nb-foot { display: flex; align-items: center; justify-content: space-between; padding-block: 12px 10px; padding-inline: 16px 14px; }
  .nb-head b { font-family: var(--font-display); font-size: 1.02rem; color: var(--ink); }
  .nb-foot { border-top: 1px solid var(--line); padding: 10px 16px; font-size: 13px; font-weight: 600; }
  .nb-push { border-top: 1px solid var(--line); }
  .nb-push-btn { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: none; border: 0; color: var(--accent); font-size: 13px; font-weight: 700; text-align: start; }
  .nb-push-btn:hover { background: var(--surface-hover); }
  .nb-push-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .nb-push-btn svg { width: 16px; height: 16px; flex: none; }
  .nb-push-btn:disabled { opacity: .6; }
  .nb-list { max-height: min(460px, 60vh); overflow: auto; border-top: 1px solid var(--line); }
  .nb-item { width: 100%; display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; background: none; border: 0; text-align: start; color: inherit; position: relative; }
  .nb-item:hover { background: var(--surface-hover); }
  .nb-item.is-unread::after, .nb-row.is-unread .nb-item::after { content: ""; position: absolute; inset-inline-start: 6px; top: 22px; width: 6px; height: 6px; border-radius: 99px; background: var(--accent); }
  .nb-icon { width: 34px; height: 34px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--surface-sunken); color: var(--ink); }
  .nb-icon svg { width: 16px; height: 16px; }
  .nb-icon.is-store-order { background: var(--success-soft); color: var(--success); }
  .nb-icon.is-forms-response, .nb-icon.is-automations-alert { background: var(--assist-soft); color: var(--assist-text); }
  .nb-icon.is-billing, .nb-icon.is-moderation { background: var(--warning-soft); color: var(--warning); }
  .nb-icon.is-email-finished { background: var(--accent-soft); color: var(--accent-text); }
  .nb-text { display: grid; gap: 1px; min-width: 0; }
  .nb-text b { font-size: 13.5px; color: var(--ink); line-height: 1.35; }
  .nb-text b em { font-style: normal; font-weight: 600; color: var(--text-muted); font-size: 12px; }
  .nb-text small { color: var(--text-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .nb-text small.nb-meta { color: var(--text-subtle); font-size: 11.5px; }
  .nb-item:not(.is-unread) .nb-text b { font-weight: 600; }
  .nb-empty { display: grid; justify-items: center; gap: 4px; padding: 36px 20px; text-align: center; color: var(--text-muted); }
  .nb-empty svg { width: 22px; height: 22px; margin-bottom: 6px; color: var(--text-subtle); }
  .nb-empty b { color: var(--ink); } .nb-empty small { font-size: 12.5px; }

  .nb-page { max-width: 820px; }
  .nb-day { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-subtle); margin: 18px 4px 8px; }
  .nb-card { overflow: hidden; }
  .nb-row { display: flex; align-items: center; gap: 4px; padding-inline-end: 10px; border-bottom: 1px solid var(--line); }
  .nb-row:last-child { border-bottom: 0; }
  .nb-row.is-unread { background: color-mix(in oklab, var(--accent-soft) 45%, transparent); }
  .nb-row .nb-item { flex: 1; min-width: 0; }

  .nb-cols { display: flex; gap: 22px; font-size: 12px; font-weight: 700; color: var(--text-subtle); }
  .nb-prefs { display: grid; }
  .nb-pref { display: flex; align-items: center; gap: 18px; padding: 14px 20px; border-top: 1px solid var(--line); }
  .nb-pref b { display: block; color: var(--ink); font-size: 14px; }
  .nb-pref small { color: var(--text-muted); font-size: 12.5px; }
  .nb-req { color: var(--accent-text); font-weight: 600; }
  .nb-toggle { display: inline-flex; align-items: center; gap: 8px; }
  .nb-toggle-label { display: none; font-size: 12px; color: var(--text-muted); }
  .nb-toggle input:disabled + .switch-track { opacity: .55; }
  @media (max-width: 640px) { .nb-pref { flex-wrap: wrap; gap: 10px 16px; } .nb-pref > .grow { flex-basis: 100% !important; /* R3D: beats the .grow utility layer */ } .nb-toggle-label { display: inline; } }
}
/* R6C: the Console bell's section labels */
@layer components {
  .cs-bell-label { margin: 0; padding-block: 10px 4px; padding-inline: 16px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); }
  a.nb-item { text-decoration: none; min-height: 44px; align-items: center; }
}

/* css/components/bookings.css */
/* Bookings (ADR-0022): agenda, services, schedule editor ------------------------------------------------------------ */
@layer components {
  .bk-empty { padding: clamp(24px, 4vw, 44px); display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); overflow: hidden; margin-bottom: 24px; }
  @media (min-width: 980px) { .bk-empty { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; } }
  .bk-empty h2 { color: #fff; font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); letter-spacing: -0.045em; line-height: 1.05; margin: 14px 0 10px; }
  .bk-empty h2 em.accent { color: #FFF3C4; font-style: italic; }
  .bk-empty p { color: rgb(255 255 255 / .82); max-width: 54ch; }
  .bk-empty-art { display: grid; place-items: center; }
  .bk-mock { width: min(300px, 90%); padding: 18px; border-radius: 22px; background: #fff; color: #101512; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .5); transform: rotate(-2deg); display: grid; gap: 12px; }
  .bk-mock b { font-family: var(--font-display); font-size: 18px; }
  .bk-mock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .bk-mock-grid i { font-style: normal; text-align: center; padding: 9px 0; border-radius: 10px; border: 1.5px solid #E3E8E5; font-weight: 700; font-size: 13px; }
  .bk-mock-grid i.is-on { background: #FF7A3D; border-color: #FF7A3D; color: #fff; }
  .bk-mock em { font-style: normal; text-align: center; padding: 12px; border-radius: 12px; background: #101512; color: #fff; font-weight: 800; }

  .bk-services { display: grid; gap: 10px; }
  .bk-service { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1); color: inherit; text-decoration: none; transition: box-shadow var(--t-fast), transform var(--t-fast) var(--ease-out); }
  .bk-service:hover { box-shadow: var(--e2); transform: translateY(-1px); }
  .bk-service > span.grow { display: grid; }
  .bk-service b { color: var(--ink); }
  .bk-service-icon { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--grad-sunset); color: #fff; flex: none; }
  .bk-service-icon.is-event { background: var(--grad-violet); }
  .bk-service-icon svg { width: 19px; height: 19px; }

  .bk-agenda-day { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; margin-bottom: 18px; }
  @media (max-width: 560px) { .bk-agenda-day { grid-template-columns: minmax(0, 1fr); gap: 8px; } }
  .bk-agenda-date { display: flex; align-items: center; gap: 10px; align-self: start; position: sticky; top: calc(var(--topbar-h, 64px) + 12px); }
  @media (min-width: 561px) { .bk-agenda-date { flex-direction: column; gap: 0; padding-top: 6px; } }
  .bk-agenda-date b { font-family: var(--font-display); font-size: 2rem; line-height: 1; color: var(--ink); letter-spacing: -0.04em; }
  .bk-agenda-date span { display: grid; justify-items: center; font-weight: 700; font-size: 13px; color: var(--ink); }
  .bk-agenda-date small { font-size: 11px; color: var(--text-subtle); font-weight: 600; }
  .bk-agenda-list { display: grid; gap: 8px; }
  .bk-slotcard { display: flex; align-items: center; gap: 14px; width: 100%; padding: 12px 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1); text-align: start; color: inherit; position: relative; overflow: hidden; transition: box-shadow var(--t-fast); }
  .bk-slotcard::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 4px; background: var(--tangerine-500); }
  .bk-slotcard.is-attended::before { background: var(--success); } .bk-slotcard.is-no_show::before, .bk-slotcard.is-cancelled::before { background: var(--line-strong); }
  .bk-slotcard:hover { box-shadow: var(--e2); }
  .bk-slotcard > .grow { display: grid; }
  .bk-slotcard b { color: var(--ink); } .bk-slotcard small { color: var(--text-muted); font-size: 12.5px; }
  .bk-slotcard-time { display: grid; min-width: 52px; }
  .bk-slotcard-time b { font-family: var(--font-display); font-size: 1.05rem; }
  .bk-status { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; background: var(--warning-soft); color: var(--tangerine-600); }
  .bk-status.is-attended { background: var(--success-soft); color: var(--success); }
  .bk-status.is-no_show, .bk-status.is-cancelled { background: var(--surface-sunken); color: var(--text-muted); }
  .bk-drawer .dl { margin: 0; }

  .bk-week { display: grid; gap: 4px; }
  .bk-week-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 4px 10px; border-radius: 12px; }
  .bk-week-row.is-on { background: var(--surface-2); }
  .bk-week-row > b { width: 100px; font-size: 14px; color: var(--ink); }
  .bk-week-times { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .bk-week-times .input { width: 118px; height: 38px; }
  .bk-week-times span { color: var(--text-muted); font-size: 13px; }
  @media (max-width: 520px) { .bk-week-row { flex-wrap: wrap; } .bk-week-row > b { width: auto; flex: 1; } .bk-week-times { width: 100%; padding-inline-start: 48px; } }
  .bk-sessions { display: grid; gap: 8px; }
  .bk-session { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
  .bk-session > .grow { display: grid; }
  .bk-session-date { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; align-content: center; background: var(--grad-violet); color: #fff; flex: none; }
  .bk-session-date b { font-size: 17px; line-height: 1; } .bk-session-date small { font-size: 10.5px; font-weight: 700; text-transform: uppercase; }
  .chip-x { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-inline-start: 2px; border: 0; background: none; color: inherit; border-radius: 99px; }
  .chip-x svg { width: 12px; height: 12px; }
  .pe-side { min-width: 0; }
  @media (min-width: 1100px) { .pe-side { position: sticky; top: calc(var(--topbar-h, 64px) + 16px); } }
  .bk-prev-day { display: grid; gap: 6px; }
  .bk-prev-day b { font-size: 13px; color: var(--ink); }
  .bk-prev-day span { display: flex; flex-wrap: wrap; gap: 6px; }
  .bk-prev-day i { font-style: normal; font-size: 12px; font-weight: 700; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); }
  .bk-prev-day em { font-style: normal; font-size: 12px; color: var(--text-muted); align-self: center; }
}

/* css/components/courses.css */
/* Courses (ADR-0023) ------------------------------------------------------------------------------------------------ */
@layer components {
  .cr-empty { padding: clamp(24px, 4vw, 44px); display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); overflow: hidden; margin-bottom: 24px; }
  @media (min-width: 980px) { .cr-empty { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; } }
  .cr-empty h2 { color: #fff; font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); letter-spacing: -0.045em; line-height: 1.05; margin: 14px 0 10px; }
  .cr-empty h2 em.accent { color: #C2F45B; font-style: italic; }
  .cr-empty p { color: rgb(255 255 255 / .8); max-width: 54ch; }
  .cr-empty-art { display: grid; place-items: center; }
  .cr-mock { width: min(300px, 90%); padding: 14px; border-radius: 20px; background: #fff; color: #101512; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .5); transform: rotate(2deg); display: grid; gap: 10px; }
  .cr-mock-video { aspect-ratio: 16/9; border-radius: 12px; background: linear-gradient(135deg, #1F2925, #3B2A8F); display: grid; place-items: center; color: #fff; }
  .cr-mock-video svg { width: 34px; height: 34px; }
  .cr-mock i { height: 6px; border-radius: 99px; background: linear-gradient(90deg, #7C5CFF var(--w), #E6E9E4 var(--w)); }
  .cr-mock em { font-style: normal; text-align: center; padding: 10px; border-radius: 10px; background: #0BC284; color: #04140D; font-weight: 800; font-size: 13px; }

  .cr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; }
  .cr-card { display: grid; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1); overflow: hidden; color: inherit; text-decoration: none; transition: box-shadow var(--t-fast), transform var(--t-fast) var(--ease-out); }
  .cr-card:hover { box-shadow: var(--e2); transform: translateY(-2px); }
  .cr-card-art { position: relative; height: 150px; display: grid; place-items: center; color: #fff; }
  .cr-card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .cr-card-art > svg { width: 38px; height: 38px; }
  .cr-card-state { position: absolute; top: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 99px; background: rgb(255 255 255 / .9); color: #101512; font-size: 11.5px; font-weight: 700; }
  .cr-card-body { display: grid; gap: 4px; padding: 14px 16px 16px; }
  .cr-card-body > b { font-family: var(--font-display); font-size: 1.08rem; color: var(--ink); }
  .cr-card-stats { display: flex; gap: 16px; margin-top: 8px; font-size: 13px; color: var(--text-muted); }
  .cr-card-stats b { color: var(--ink); }

  .cr-builder { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 1100px) { .cr-builder { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } .cr-editor { position: sticky; top: calc(var(--topbar-h, 64px) + 16px); } }
  .cr-lessons { display: grid; }
  .cr-section { margin: 0; padding: 12px 18px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-subtle); border-top: 1px solid var(--line); }
  .cr-lesson { display: flex; align-items: center; border-top: 1px solid var(--line); }
  .cr-lesson.is-selected { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
  .cr-lesson-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding-block: 12px; padding-inline: 16px 8px; background: none; border: 0; text-align: start; color: inherit; }
  .cr-lesson-main > .grow { display: grid; }
  .cr-lesson-main b { color: var(--ink); font-size: 14px; }
  .cr-lesson-main small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
  .cr-lesson-main small svg { width: 13px; height: 13px; }
  .cr-lesson-n { width: 28px; height: 28px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--surface-sunken); font-weight: 800; font-size: 12.5px; color: var(--ink); }
  .cr-lesson.is-selected .cr-lesson-n { background: var(--ink); color: var(--text-on-ink); }
  .cr-lesson-tools { display: flex; padding-inline-end: 8px; opacity: .6; } .cr-lesson:hover .cr-lesson-tools { opacity: 1; }
  .cr-lesson-tools .icon-btn { width: 30px; height: 30px; }
  .cr-pill { display: inline-flex; height: 18px; padding: 0 7px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; font-size: 11px; align-items: center; }
  .cr-pill.is-drip { background: var(--assist-soft); color: var(--assist-text); }
  .cr-add { display: flex; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--line); background: var(--hatch), var(--surface-2); }
  .cr-add .input { flex: 1; }
  .cr-video { aspect-ratio: 16/9; border-radius: 14px; overflow: hidden; background: #000; }
  .cr-video iframe { width: 100%; height: 100%; border: 0; }
  .cr-invite { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
  @media (max-width: 720px) { .cr-invite { grid-template-columns: minmax(0, 1fr); } }
  .cr-student.is-revoked { opacity: .6; }
  .cr-progress { width: 90px; height: 7px; border-radius: 99px; background: var(--surface-sunken); overflow: hidden; flex: none; }
  .cr-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--violet-500), var(--emerald-500)); border-radius: inherit; }
  .cr-pct { width: 42px; text-align: end; font-weight: 700; font-size: 13px; color: var(--ink); flex: none; }
  @media (max-width: 560px) { .cr-progress { display: none; } }

  /* Course depth (ADR-0041): lesson kinds, quiz and assignment settings, question bank, handed-in work, discussion,
     certificate designer and instructors ------------------------------------------------------------------------ */
  .cr-editor .card-body > *, .cr-quiz > * { min-width: 0; }
  .cr-qlist { grid-template-columns: minmax(0, 1fr); } .cr-qlist li, .cr-qlist li > .grow { min-width: 0; }
  .cr-add-kind { width: auto; flex: none; max-width: 140px; }
  @media (max-width: 520px) { .cr-add { flex-wrap: wrap; } .cr-add-kind { max-width: none; flex: 1 1 100%; } }
  .cr-lesson-n svg { width: 14px; height: 14px; }
  .cr-lesson-n.is-quiz { background: var(--violet-100, #EDE7FF); color: var(--violet-600, #5B3FE0); }
  .cr-lesson-n.is-assignment { background: var(--amber-100, #FEF3C7); color: var(--amber-700, #B45309); }
  .cr-pill.is-quiz { background: var(--violet-100, #EDE7FF); color: var(--violet-700, #4B2FC7); }
  .cr-pill.is-assignment { background: var(--amber-100, #FEF3C7); color: var(--amber-800, #92400E); }
  .cr-quiz { display: grid; gap: 14px; padding: 16px; border-radius: var(--r-lg); background: var(--hatch), var(--surface-2); border: 1px solid var(--line); }
  .cr-quiz-head { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; }
  .cr-quiz-head b { color: var(--ink); }
  .cr-quiz-label { margin: 4px 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-subtle); display: flex; gap: 6px; }
  .cr-quiz-label span { color: var(--ink); }
  .cr-qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: cq; }
  .cr-qlist li { display: flex; align-items: center; gap: 10px; min-height: 44px; padding-block: 4px; padding-inline: 12px 4px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); font-size: 13.5px; color: var(--ink); }
  .cr-qlist:not(.is-bank) li:not(.muted)::before { counter-increment: cq; content: counter(cq); font-weight: 800; font-size: 12px; color: var(--text-subtle); width: 14px; }
  .cr-qlist.is-bank li { background: transparent; border-style: dashed; }
  .cr-qlist li.muted { border-style: dashed; background: transparent; padding: 10px 12px; }
  .cr-q-type { flex: none; font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--text-subtle); width: 92px; }
  @media (max-width: 520px) { .cr-q-type { display: none; } }

  .qb-list { display: grid; }
  .qb-item { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-top: 1px solid var(--line); }
  .qb-n { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--violet-100, #EDE7FF); color: var(--violet-700, #4B2FC7); font-weight: 800; font-size: 12.5px; }
  .qb-prompt { margin: 0 0 6px; color: var(--ink); font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; }
  .qb-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text-muted); margin-bottom: 4px; }
  .qb-answer { display: inline-flex; align-items: center; gap: 4px; color: var(--emerald-700, #047857); font-weight: 600; min-width: 0; }
  .qb-answer svg { width: 13px; height: 13px; flex: none; }
  .qb-types { flex-wrap: wrap; }
  .qb-options { display: grid; gap: 8px; }
  .qb-option { display: flex; gap: 8px; align-items: center; }
  .qb-option .input { flex: 1; }
  .qb-mark { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; border: 1.5px solid var(--line-strong, var(--line)); color: transparent; cursor: pointer; transition: all var(--t-fast); }
  .qb-mark input { position: absolute; opacity: 0; pointer-events: none; }
  .qb-mark svg { width: 16px; height: 16px; }
  .qb-option.is-right .qb-mark { background: var(--emerald-500, #10B981); border-color: var(--emerald-500, #10B981); color: #fff; }
  .qb-mark:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

  .wq-row { width: 100%; background: none; border: 0; text-align: start; cursor: pointer; color: inherit; }
  .wq-row:hover { background: var(--surface-2); }
  .wq-row small svg { width: 12px; height: 12px; vertical-align: -1px; }
  .wq-status { flex: none; display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--surface-sunken); color: var(--text-muted); }
  .wq-status.is-submitted { background: var(--violet-100, #EDE7FF); color: var(--violet-700, #4B2FC7); }
  .wq-status.is-changes_requested { background: var(--amber-100, #FEF3C7); color: var(--amber-800, #92400E); }
  .wq-status.is-approved { background: var(--emerald-100, #D1FAE5); color: var(--emerald-800, #065F46); }
  .wq-body { padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); white-space: pre-line; overflow-wrap: anywhere; font-size: 14.5px; line-height: 1.6; color: var(--ink); max-height: 42vh; overflow: auto; }
  .wq-file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg); border: 1px solid var(--line); color: var(--ink); text-decoration: none; min-width: 0; }
  .wq-file:hover { border-color: var(--accent); }
  .wq-file > span { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-sunken); }
  .wq-file b { flex: 1; min-width: 0; font-size: 14px; }
  .wq-file small { color: var(--text-muted); flex: none; }
  .wq-file svg { width: 16px; height: 16px; flex: none; }

  .dc-switch.is-on { border-color: color-mix(in oklab, var(--accent) 40%, var(--line)); }
  .dc-threads { display: grid; gap: 12px; }
  .dc-thread { padding: 4px 0; overflow: hidden; }
  .dc-thread.is-hidden > .dc-c:first-child, .dc-c.is-hidden { opacity: .55; }
  .dc-c { padding: 14px 18px; }
  .dc-c header { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
  .dc-c header b { color: var(--ink); }
  .dc-c header small { color: var(--text-muted); font-size: 12px; }
  .dc-c p { margin: 6px 0 0; white-space: pre-line; overflow-wrap: anywhere; color: var(--text); font-size: 14.5px; line-height: 1.55; }
  .dc-c.is-reply { margin: 0 18px 10px clamp(18px, 4vw, 44px); padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); }
  .dc-c.is-team { box-shadow: inset 3px 0 0 var(--accent); }
  .dc-tools { display: flex; gap: 4px; margin-block: 6px 0; margin-inline: -8px 0; }
  .dc-reply { display: grid; gap: 8px; padding: 0 18px 16px clamp(18px, 4vw, 44px); }

  .cd-layout { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 1100px) { .cd-layout { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); } .cd-preview-wrap { position: sticky; top: calc(var(--topbar-h, 64px) + 16px); } }
  .cd-controls { margin: 0; min-width: 0; }
  .cd-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .cd-style { display: grid; gap: 6px; justify-items: center; font-size: 12.5px; font-weight: 700; color: var(--text-muted); cursor: pointer; }
  .cd-style.is-on { color: var(--ink); }
  .cd-thumb { width: 100%; aspect-ratio: 1.414; border-radius: 8px; background: #fff; border: 1.5px solid var(--line); display: grid; align-content: center; justify-items: center; gap: 5px; position: relative; overflow: hidden; }
  .cd-style.is-on .cd-thumb { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .cd-thumb i { display: block; height: 4px; border-radius: 4px; background: #D8DDD9; width: 50%; }
  .cd-thumb i:nth-child(2) { width: 70%; height: 6px; background: #14201A; }
  .cd-thumb-classic { outline: 2px solid var(--cert-accent); outline-offset: -6px; }
  .cd-thumb-modern { justify-items: start; padding-inline-start: 20%; }
  .cd-thumb-modern::before { content: ''; position: absolute; inset-block: 0; inset-inline: 0 auto; width: 9%; background: var(--cert-accent); }
  .cd-thumb-minimal i:first-child { background: var(--cert-accent); width: 18%; }
  .cd-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
  .cd-swatch { width: 32px; height: 32px; border-radius: 99px; background: var(--sw); cursor: pointer; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); transition: transform var(--t-fast); }
  .cd-swatch.is-on { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--sw); transform: scale(1.05); }
  .cd-swatch:focus-within { outline: 2px solid var(--accent); outline-offset: 4px; }
  .cd-preview-label { display: flex; gap: 6px; align-items: center; margin: 0 0 8px; }
  .cd-preview { --cert-accent: #7C5CFF; aspect-ratio: 1.414; background: #fff; border-radius: 14px; box-shadow: var(--e3); padding: clamp(10px, 2vw, 20px); color: #14201A; font-family: Georgia, 'Times New Roman', serif; position: relative; overflow: hidden; container-type: inline-size; transition: opacity var(--t-fast); }
  .cd-preview.is-refreshing { opacity: .6; }
  .cd-inner { height: 100%; display: grid; align-content: center; justify-items: center; text-align: center; gap: 2px; padding: 4%; border-radius: 8px; }
  .cd-classic .cd-inner { border: 2px solid color-mix(in oklab, var(--cert-accent) 45%, #D9CFB0); outline: 1px solid color-mix(in oklab, var(--cert-accent) 45%, #D9CFB0); outline-offset: -8px; }
  .cd-modern { font-family: var(--font-body, system-ui), sans-serif; }
  .cd-modern::before { content: ''; position: absolute; inset-block: 0; inset-inline: 0 auto; width: 2.4cqw; background: var(--cert-accent); }
  .cd-modern .cd-inner { justify-items: start; text-align: start; padding-inline-start: 9%; }
  .cd-modern .cd-heading { font-weight: 800; letter-spacing: -0.02em; }
  .cd-modern .cd-name { font-weight: 800; border-bottom: 3px solid var(--cert-accent); padding-inline-start: 0; }
  .cd-modern .cd-meta { justify-content: flex-start; }
  .cd-minimal .cd-heading::before { content: ''; display: block; width: 8cqw; height: 3px; margin: 0 auto 2cqw; background: var(--cert-accent); border-radius: 3px; }
  .cd-minimal .cd-name { border-bottom: 0; }
  .cd-logo { max-height: 5cqw; max-width: 30%; object-fit: contain; margin-bottom: 1cqw; }
  .cd-org { margin: 0; font-family: system-ui, sans-serif; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: 1.4cqw; color: var(--cert-accent); }
  .cd-heading { margin: .6cqw 0 1.6cqw; font-size: 3.4cqw; }
  .cd-small { margin: 0; font-style: italic; color: #56655E; font-size: 1.6cqw; }
  .cd-name { margin: .6cqw 0; font-size: 5.4cqw; border-bottom: 1px solid #D9CFB0; padding: 0 5% .6cqw; line-height: 1.15; }
  .cd-course { margin: .6cqw 0 2cqw; font-size: 2.8cqw; font-weight: 700; }
  .cd-meta { display: flex; gap: 4cqw; flex-wrap: wrap; justify-content: center; font-family: system-ui, sans-serif; }
  .cd-meta span { display: grid; } .cd-meta small { font-size: 1.2cqw; color: #8A9690; text-transform: uppercase; letter-spacing: .08em; } .cd-meta b { font-size: 1.6cqw; }
  .cd-sign { justify-items: center; } .cd-modern .cd-sign { justify-items: start; }
  .cd-sign i { font-family: 'Brush Script MT', 'Segoe Script', cursive; font-size: 2.8cqw; line-height: 1; border-bottom: 1px solid #C9CFCB; padding: 0 1.2cqw 2px; }

  .in-list { display: grid; }
  .in-row { display: flex; align-items: center; gap: 12px; padding-block: 12px; padding-inline: 18px 8px; border-top: 1px solid var(--line); }
  .in-photo { flex: none; width: 40px; height: 40px; border-radius: 99px; display: grid; place-items: center; background: var(--violet-100, #EDE7FF) center / cover no-repeat; color: var(--violet-700, #4B2FC7); font-weight: 800; }
  .in-photo.is-lg { width: 72px; height: 72px; font-size: 24px; } .in-photo.is-lg svg { width: 28px; height: 28px; }
  .in-photo-edit { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
  .in-empty { margin: 0; padding: 14px 18px 18px; border-top: 1px solid var(--line); }
}

/* css/components/community.css */
/* Community (ADR-0024) ---------------------------------------------------------------------------------------------- */
@layer components {
  .cm-hero { padding: clamp(24px, 4vw, 44px); display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); overflow: hidden; margin-bottom: 24px; }
  @media (min-width: 980px) { .cm-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; } }
  .cm-hero h2 { color: #fff; font-family: var(--font-display); font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); letter-spacing: -0.045em; line-height: 1.05; margin: 14px 0 10px; }
  .cm-hero h2 em.accent { color: #FFB3CF; font-style: italic; }
  .cm-hero p { color: rgb(255 255 255 / .8); max-width: 54ch; }
  .cm-hero-art { display: grid; place-items: center; }
  .cm-mock { width: min(320px, 92%); padding: 12px; border-radius: 20px; background: #fff; color: #101512; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .5); transform: rotate(-2deg); display: grid; gap: 8px; }
  .cm-mock-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; column-gap: 10px; padding: 10px; border-radius: 12px; background: #F4F6F3; font-size: 13px; }
  .cm-mock-row i { grid-row: span 2; width: 30px; height: 30px; border-radius: 99px; display: grid; place-items: center; font-style: normal; font-weight: 800; color: #fff; background: linear-gradient(145deg, #FF7AA8, #8468FF); }
  .cm-mock-row:first-child i { background: linear-gradient(145deg, #1F2925, #5B3BE8); }
  .cm-mock-row small { grid-column: 2; color: #6B776F; font-size: 11.5px; }
  .cm-mock-row em { font-style: normal; font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 99px; color: #fff; background: #1F2925; }
  .cm-card-flag { position: absolute; top: 12px; inset-inline-end: 12px; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 99px; background: var(--danger); color: #fff; font-size: 11.5px; font-weight: 800; }
  .cm-card-flag svg { width: 12px; height: 12px; }

  .cmm-layout { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 1100px) { .cmm-layout { grid-template-columns: minmax(0, 1fr) 300px; } .cmm-layout > aside { position: sticky; top: calc(var(--topbar-h, 64px) + 16px); } }
  .cmm-compose-head { display: flex; gap: 10px; align-items: center; }
  .cmm-compose-head > div { display: grid; }
  .cmm-av { width: 36px; height: 36px; flex: none; border-radius: 99px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: var(--ink); background: color-mix(in oklab, var(--accent) 16%, var(--surface)); }
  .cmm-av.is-team { color: #fff; background: linear-gradient(145deg, #1F2925, #5B3BE8); }
  .cmm-av-sm { width: 28px; height: 28px; font-size: 12px; }
  .cmm-filter { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .cmm-post.is-hidden { opacity: .65; border-style: dashed; }
  .cmm-post-head { display: flex; gap: 10px; align-items: center; }
  .cmm-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .cmm-meta b { color: var(--ink); }
  .cmm-meta .badge svg { width: 11px; height: 11px; }
  .cmm-post-title { margin: 12px 0 0; font-family: var(--font-display); font-size: 1.1rem; letter-spacing: -0.02em; color: var(--ink); }
  .cmm-text { font-size: var(--fs-body, 15px); line-height: 1.6; overflow-wrap: anywhere; margin-top: 6px; }
  .cmm-text p { margin: 0 0 6px; } .cmm-text h2 { font-size: 1rem; margin: 10px 0 4px; } .cmm-text ul { margin: 0 0 6px; padding-inline-start: 20px; }
  .cmm-post-foot { display: flex; align-items: center; gap: 16px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-muted); }
  .cmm-post-foot > span, .cmm-link { display: inline-flex; align-items: center; gap: 6px; }
  .cmm-post-foot svg { width: 15px; height: 15px; }
  .cmm-link { font: inherit; font-weight: 600; color: var(--text-muted); background: none; border: 0; padding: 0; cursor: pointer; }
  .cmm-link:hover { color: var(--ink); }
  .cmm-comments { display: grid; gap: 8px; margin-top: 12px; padding: 12px; border-radius: var(--r-lg); background: var(--surface-2, color-mix(in oklab, var(--ink) 3%, var(--surface))); }
  .cmm-comment { display: flex; gap: 10px; align-items: flex-start; }
  .cmm-comment.is-hidden { opacity: .6; }
  .cmm-comment .cmm-text { margin-top: 2px; font-size: 14px; }
  .cmm-reply { display: grid; gap: 8px; margin-top: 4px; }
  .cmm-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .cmm-stats span { display: grid; padding: 10px; border-radius: var(--r-md); background: color-mix(in oklab, var(--ink) 4%, transparent); }
  .cmm-stats b { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); }
  .cmm-stats small { font-size: 12px; color: var(--text-muted); }
  .cmm-stats .is-alert b { color: var(--danger); }
  .tab-count.is-alert { background: var(--danger); color: #fff; }

  .cmm-spaces { display: grid; }
  .cmm-space { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-top: 1px solid var(--line); }
  .cmm-space-icon { width: 36px; height: 36px; flex: none; border-radius: 11px; display: grid; place-items: center; background: color-mix(in oklab, var(--accent) 12%, var(--surface)); color: var(--accent-text, var(--ink)); }
  .cmm-space-icon svg { width: 17px; height: 17px; }
  .cmm-space-fields { flex: 1; min-width: 0; display: grid; gap: 8px; border: 0; margin: 0; padding: 0; }
  .cmm-space-fields > .input:first-child { font-weight: 700; }
  .cmm-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); cursor: pointer; }
  .cmm-toggle input { width: 16px; height: 16px; accent-color: var(--accent); }
  .cmm-space-tools { display: flex; gap: 2px; }
  .cmm-report { align-items: flex-start; }
  .cmm-report-icon { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--danger-soft); color: var(--danger); }
  .cmm-report-icon svg { width: 15px; height: 15px; }
  .cmm-quote { margin: 8px 0 0; padding: 8px 12px; border-inline-start: 3px solid var(--line-strong); color: var(--text-muted); font-size: 13.5px; white-space: pre-line; }
}

/* css/components/ai.css */
/* AI gateway: console and workspace settings (ADR-0025) ---------------------------------------------------------- */
@layer components {
  .ai-picks { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
  .ai-prices { display: grid; grid-template-columns: minmax(90px, auto) 1fr 1fr; gap: 8px 12px; align-items: center; max-width: 460px; }
  .ai-set { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 1100px) { .ai-set { grid-template-columns: minmax(0, 1fr) 320px; } .ai-set > aside { position: sticky; top: calc(var(--topbar-h, 64px) + 16px); } }
  .ai-tones { display: flex; flex-wrap: wrap; gap: 6px; }
  .ai-tones .chip { cursor: pointer; }
  .card.is-muted { opacity: .6; }
  .ai-credits { background: linear-gradient(160deg, color-mix(in oklab, var(--accent) 10%, var(--surface)), var(--surface) 60%); }
  .ai-credits-n { margin: 0; font-family: var(--font-display); font-size: 2rem; letter-spacing: -0.03em; color: var(--ink); }
  .ai-credits-n small { font-family: var(--font-sans, inherit); font-size: 13px; letter-spacing: 0; color: var(--text-muted); font-weight: 500; }
  .ai-meter { height: 8px; border-radius: 99px; background: color-mix(in oklab, var(--ink) 8%, transparent); overflow: hidden; }
  .ai-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8468FF, var(--accent)); }
  .ai-meter.is-low span { background: var(--danger); }
}

/* Write with AI (ADR-0043) ---------------------------------------------------------------------------------------- */
@layer components {
  .aid-brief, .aid-result { display: grid; gap: 14px; }
  .aid-wrap { flex-wrap: wrap; }
  .aid-meta { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-muted); }
  .aid-meta svg { width: 14px; height: 14px; color: var(--violet-500, #7C5CFF); flex: none; }
  .aid-label { margin: 4px 0 -6px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-subtle); }
  .aid-picks { display: grid; gap: 6px; }
  .aid-pick { display: block; padding: 11px 14px; border-radius: var(--r-md); border: 1.5px solid var(--line); cursor: pointer; font-weight: 600; color: var(--ink); transition: border-color var(--t-fast), background var(--t-fast); }
  .aid-pick.is-on { border-color: var(--violet-500, #7C5CFF); background: color-mix(in oklab, var(--violet-500, #7C5CFF) 8%, var(--surface)); }
  .aid-pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
  .aid-pre, .aid-tag { margin: 0; font-weight: 600; color: var(--ink); }
  .aid-pre { font-weight: 500; color: var(--text-muted); }
  .aid-doc { padding: 16px 18px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); max-height: 44vh; overflow: auto; display: grid; gap: 10px; }
  .aid-doc h3 { margin: 0; font-size: 1.05rem; color: var(--ink); }
  .aid-doc p { margin: 0; white-space: pre-line; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
  .aid-btn { justify-self: start; display: inline-flex; padding: 8px 16px; border-radius: 99px; background: var(--ink); color: var(--text-on-ink); font-weight: 700; font-size: 13.5px; }
  .aid-list { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; }
  .aid-lessons, .aid-quiz { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 46vh; overflow: auto; counter-reset: al; }
  .aid-lessons li:not(.aid-sec) { counter-increment: al; padding-block: 10px; padding-inline: 42px 12px; border-radius: var(--r-md); background: var(--surface-2); position: relative; }
  .aid-lessons li:not(.aid-sec)::before { content: counter(al); position: absolute; inset-inline-start: 12px; top: 10px; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: var(--surface-sunken); font-size: 11.5px; font-weight: 800; }
  .aid-lessons b, .aid-quiz b { display: block; color: var(--ink); font-size: 14px; }
  .aid-lessons small, .aid-quiz small { display: block; margin-top: 3px; color: var(--text-muted); font-size: 12.5px; line-height: 1.5; }
  .aid-sec { margin-top: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-subtle); }
  .aid-quiz li { padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); }
  .aid-opt { display: inline-flex; margin-block: 6px 0; margin-inline: 0 6px; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--line); font-size: 12.5px; color: var(--text-muted); }
  .aid-opt.is-right { border-color: var(--emerald-500, #10B981); background: color-mix(in oklab, var(--emerald-500, #10B981) 12%, var(--surface)); color: var(--ink); font-weight: 600; }
}

/* Assist copilot and insights (ADR-0044) ------------------------------------------------------------------------- */
@layer components {
  @media (max-width: 640px) { .assist-pill { padding: 0 12px; } }
  .cop { width: min(460px, calc(100vw - 16px)); }
  .cop-head { align-items: center; }
  .cop-mark { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #9A83FF, #7C5CFF 50%, #5B3BE8); box-shadow: 0 10px 22px -12px rgb(124 92 255 / .9); }
  .cop-mark svg { width: 18px; height: 18px; }
  .cop-body { display: flex; flex-direction: column; gap: 14px; padding-bottom: 20px; }
  .cop-intro { display: grid; gap: 14px; }
  .cop-hello { margin: 0; font-size: 15px; color: var(--ink); line-height: 1.5; }
  .cop-starters { display: flex; flex-wrap: wrap; gap: 8px; }
  .cop-chip { padding: 8px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; text-align: start; transition: border-color var(--t-fast), background var(--t-fast); }
  .cop-chip:hover { border-color: #9A83FF; background: color-mix(in oklab, #7C5CFF 6%, var(--surface)); }
  .cop-design { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--hatch), var(--surface-2); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
  .cop-design span { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface); flex: none; }
  .cop-design b { flex: 1; font-size: 14px; }
  .cop-design svg { width: 16px; height: 16px; }
  .cop-q { align-self: flex-end; max-width: 85%; padding: 10px 14px; border-radius: 16px; border-end-end-radius: 4px; background: var(--ink); color: var(--text-on-ink); font-size: 14.5px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
  .cop-a { align-self: stretch; display: grid; gap: 10px; padding: 14px 16px; border-radius: 16px; border-end-start-radius: 4px; background: var(--surface-2); border: 1px solid var(--line); }
  .cop-text { font-size: 14.5px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
  .cop-text p { margin: 0 0 8px; } .cop-text p:last-child { margin-bottom: 0; }
  .cop-text ul { margin: 4px 0 8px; padding-inline-start: 18px; }
  .cop-text b { color: var(--ink); }
  .cop-links { display: flex; flex-wrap: wrap; gap: 6px; }
  .cop-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 600; text-decoration: none; }
  .cop-link:hover { border-color: #9A83FF; }
  .cop-link svg { width: 13px; height: 13px; }
  .cop-link.is-guide { font-weight: 500; }
  .cop-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .cop-foot small { color: var(--text-subtle); font-size: 11.5px; }
  .cop-foot .icon-btn { width: 28px; height: 28px; } .cop-foot .icon-btn svg { width: 14px; height: 14px; }
  .cop-thinking { align-self: flex-start; gap: 5px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); }
  .cop-thinking span { width: 7px; height: 7px; border-radius: 99px; background: #9A83FF; animation: cop-dot 1s infinite ease-in-out; }
  .cop-thinking span:nth-child(2) { animation-delay: .15s; } .cop-thinking span:nth-child(3) { animation-delay: .3s; }
  @keyframes cop-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
  @media (prefers-reduced-motion: reduce) { .cop-thinking span { animation: none; } }
  .cop-ask { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--surface); }
  .cop-ask textarea { resize: none; min-height: 44px; max-height: 140px; padding: 11px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); font: inherit; font-size: 14.5px; color: var(--ink); field-sizing: content; }
  .cop-ask textarea:focus { outline: 2px solid #9A83FF; outline-offset: 0; }
  .cop-ask .btn { width: 44px; height: 44px; border-radius: 14px; }

  .ins-card { overflow: hidden; }
  .ins-grid { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 960px) { .ins-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } .ins-exp { border-inline-start: 1px solid var(--line); } }
  .ins-col { padding: 16px 20px 20px; display: grid; gap: 12px; align-content: start; }
  .ins-exp { background: var(--hatch), var(--surface-2); }
  .ins-label { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-subtle); }
  .ins-obs { display: flex; gap: 12px; align-items: flex-start; }
  .ins-trend { flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-sunken); color: var(--text-muted); }
  .ins-trend svg { width: 15px; height: 15px; }
  .ins-trend.is-up { background: var(--emerald-100, #D1FAE5); color: var(--emerald-700, #047857); }
  .ins-trend.is-down { background: #FEE2E2; color: #B91C1C; }
  .ins-obs b, .ins-x b { display: block; color: var(--ink); font-size: 14px; }
  .ins-obs p, .ins-x p { margin: 2px 0 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.5; }
  .ins-x { padding: 12px 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); display: grid; gap: 6px; }
  .ins-x a { justify-self: start; font-size: 13px; font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
  .ins-x a svg { width: 13px; height: 13px; }
  .ins-empty { padding: 20px; display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
}

/* Automation drafts (ADR-0045) */
@layer components {
  .aid-flow { display: grid; gap: 8px; max-height: 50vh; overflow: auto; padding: 2px; }
  .aid-step { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
  .aid-step > span { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface); color: var(--text-muted); }
  .aid-step > span svg { width: 15px; height: 15px; }
  .aid-step > div { flex: 1; min-width: 0; display: grid; gap: 3px; }
  .aid-step b { color: var(--ink); font-size: 14px; }
  .aid-step small { color: var(--text-muted); font-size: 12.5px; line-height: 1.5; }
  .aid-step.is-trigger { background: color-mix(in oklab, #7C5CFF 8%, var(--surface)); border-color: color-mix(in oklab, #7C5CFF 35%, var(--line)); }
  .aid-step.is-trigger > span { background: #7C5CFF; color: #fff; }
  .aid-branch { margin-top: 6px; padding-block: 8px 0; padding-inline: 12px 0; border-inline-start: 2px solid var(--emerald-500, #10B981); display: grid; gap: 6px; }
  .aid-branch.is-no { border-inline-start-color: #F59E0B; }
  .aid-branch > p { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--text-subtle); }
  .tpl-card.is-describe { border-style: dashed; border-color: color-mix(in oklab, #7C5CFF 45%, var(--line)); }
  .tpl-card.is-locked { cursor: default; } .tpl-card.is-locked > :not(.upl) { opacity: .6; } .tpl-card.is-locked .upl { justify-self: start; } /* R13C */
}

/* css/components/workspace.css */
/* Wave F2 (ADR-0027): activity log, role matrix, action center, account data ---------------------------------- */
@layer components {
  /* Settings → Activity */
  .act-head { flex-wrap: wrap; gap: 14px; }
  .act-filters { display: flex; flex-wrap: wrap; gap: 8px; }
  .act-filters .select { width: auto; min-width: 150px; }
  .act-body { transition: opacity .2s var(--ease-out, ease); }
  .act-body { position: relative; }
  .act-day { padding: 6px 20px 14px; border-top: 1px solid var(--line); }
  .act-day-label { position: sticky; top: 0; z-index: 1; margin: 0; padding: 12px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); background: var(--surface); }
  .act-list { list-style: none; margin: 0; padding: 0; position: relative; }
  .act-list::before { content: ""; position: absolute; inset-inline-start: 17px; top: 18px; bottom: 18px; width: 1px; background: var(--line); }
  .act-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 0; min-width: 0; }
  .act-icon { position: relative; z-index: 1; flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--line); }
  .act-icon svg { width: 17px; height: 17px; }
  .act-icon.is-team { background: color-mix(in oklab, var(--chart-1) 14%, var(--surface)); color: var(--chart-1); }
  .act-icon.is-presence { background: color-mix(in oklab, var(--chart-2) 14%, var(--surface)); color: var(--chart-2); }
  .act-icon.is-audience { background: color-mix(in oklab, var(--chart-3) 14%, var(--surface)); color: var(--chart-3); }
  .act-icon.is-sales { background: color-mix(in oklab, var(--chart-4) 16%, var(--surface)); color: var(--chart-4); }
  .act-icon.is-programmes { background: color-mix(in oklab, var(--chart-5) 14%, var(--surface)); color: var(--chart-5); }
  .act-icon.is-messaging { background: color-mix(in oklab, var(--chart-6) 14%, var(--surface)); color: var(--chart-6); }
  .act-icon.is-weesify { background: var(--ink); color: var(--text-on-ink); border-color: transparent; }
  .act-line { display: block; color: var(--text-muted); font-size: var(--fs-small); line-height: 1.4; overflow-wrap: anywhere; }
  .act-line b { color: var(--ink); font-weight: 650; }
  .act-meta { display: block; font-size: 12px; color: var(--text-subtle); margin-top: 1px; }
  .act-detail { color: var(--text-muted); font-weight: 600; }

  /* Members → What each role can do */
  .role-matrix-summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
  .role-matrix-summary::-webkit-details-marker { display: none; }
  .role-matrix-card[open] .role-matrix-summary > svg { transform: rotate(180deg); }
  .role-matrix-summary > svg { transition: transform .2s var(--ease-out, ease); color: var(--text-subtle); }
  .role-matrix-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
  .role-matrix { width: 100%; border-collapse: collapse; font-size: var(--fs-small); min-width: 640px; }
  .role-matrix th, .role-matrix td { padding: 10px 14px; text-align: start; border-bottom: 1px solid var(--line); white-space: nowrap; }
  .role-matrix thead th { font-size: 12px; font-weight: 700; color: var(--text-subtle); letter-spacing: .04em; text-transform: uppercase; background: var(--surface-2); }
  .role-matrix tbody th { color: var(--ink); font-weight: 600; position: sticky; inset-inline-start: 0; background: var(--surface); }
  .rm-level { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 12.5px; padding: 3px 9px; border-radius: 99px; }
  .rm-level.is-full { background: color-mix(in oklab, var(--success) 14%, transparent); color: color-mix(in oklab, var(--success) 70%, var(--ink)); }
  .rm-level.is-some { background: var(--accent-soft); color: var(--accent-text); }
  .rm-level.is-view { background: var(--surface-2); color: var(--text-muted); }
  .rm-level.is-none { color: var(--text-subtle); padding-inline-start: 12px; }

  @media (max-width: 640px) {
    .act-filters { width: 100%; }
    .act-filters .select { flex: 1 1 140px; min-width: 0; }
    .act-day { padding: 4px 14px 12px; }
  }
}

/* Home → Needs you (action center) */
@layer components {
  .needs-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; margin-inline-start: 6px; border-radius: 99px; font-size: 12px; font-weight: 700; background: var(--ink); color: var(--text-on-ink); vertical-align: 2px; }
  .next-action { position: relative; }
  .next-action.is-urgent { border-color: color-mix(in oklab, var(--danger) 35%, var(--line)); background: color-mix(in oklab, var(--danger) 6%, var(--surface)); }
  .next-action.is-urgent .next-action-icon { background: color-mix(in oklab, var(--danger) 14%, var(--surface)); color: var(--danger); }
  .next-action.is-todo .next-action-icon { background: var(--accent-soft); color: var(--accent-text); }
  .next-action-cta { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 650; color: var(--ink); padding: 6px 10px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); transition: all var(--t-fast); }
  .next-action:hover .next-action-cta { background: var(--ink); color: var(--text-on-ink); border-color: transparent; }
  .next-action.is-urgent .next-action-cta { background: var(--danger); color: #fff; border-color: transparent; }
  .needs-clear { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: color-mix(in oklab, var(--success) 8%, var(--surface)); border: 1px dashed color-mix(in oklab, var(--success) 35%, var(--line)); }
  .needs-clear b { color: var(--ink); font-size: var(--fs-small); }
  .needs-clear-icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in oklab, var(--success) 16%, var(--surface)); color: var(--success); flex: none; }
  .needs-clear-icon svg { width: 18px; height: 18px; }
  @media (max-width: 480px) { .next-action-cta { display: none; } }
}

/* Account → Your data */
@layer components {
  .data-badge { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); flex: none; }
  .data-badge svg { width: 19px; height: 19px; }
  .data-badge.is-danger { background: var(--danger-soft); color: var(--danger); }
  .data-includes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
  .data-includes li { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-small); color: var(--ink); font-weight: 550; }
  .data-includes svg { width: 16px; height: 16px; color: var(--text-muted); flex: none; }
  .data-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
  .data-row .field { min-width: 220px; }
  .danger-zone { border-color: color-mix(in oklab, var(--danger) 30%, var(--line)); }
  .close-plan { display: grid; gap: 10px; }
  .close-plan-group { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
  .close-plan-group b { color: var(--ink); font-size: var(--fs-small); }
  .close-plan-group ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
  .close-plan-group li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink); }
  .close-plan-group li svg { width: 14px; height: 14px; color: var(--text-muted); }
  .close-blockers { margin: 6px 0 0; padding-inline-start: 18px; font-size: var(--fs-small); color: var(--text-muted); }
  .callout.is-warning { background: var(--warning-soft); border-color: color-mix(in oklab, var(--warning) 35%, transparent); }
  .callout.is-warning > svg { color: var(--warning); }
}
@layer components {
  .needs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 10px; }
  .needs-grid > .needs-clear { grid-column: 1 / -1; }
  .needs-card { container-type: inline-size; }
  @container (max-width: 460px) { .next-action-cta .cta-t { display: none; } .next-action-cta { padding: 7px; } }
}

/* Media library (ADR-0028) */
@layer components {
  .media-split { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 1100px) { .media-split.has-open { grid-template-columns: minmax(0, 1fr) 360px; } .media-detail { position: sticky; top: 88px; } }
  .media-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .media-tile { position: relative; display: flex; flex-direction: column; width: 100%; padding: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); text-align: start; font: inherit; color: inherit; cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
  .media-tile:hover { transform: translateY(-2px); box-shadow: var(--e2); border-color: var(--line-strong); }
  .media-tile.is-open { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
  .media-thumb { aspect-ratio: 4 / 3; display: block; background-color: var(--surface-2); background-image: linear-gradient(45deg, var(--line) 25%, transparent 25%), linear-gradient(-45deg, var(--line) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--line) 75%), linear-gradient(-45deg, transparent 75%, var(--line) 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
  .media-thumb { position: relative; min-height: 0; overflow: hidden; flex: none; }
  .media-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
  .media-thumb-file { display: grid; place-content: center; justify-items: center; gap: 4px; background-image: none; color: var(--text-muted); min-height: 120px; } /* PDFs (B3 · U3) */
  .media-thumb-file svg { width: 34px; height: 34px; }
  .media-thumb-file small { font-size: 11px; font-weight: 800; letter-spacing: .08em; }
  .media-meta { display: grid; gap: 2px; padding: 10px 12px 12px; min-width: 0; }
  .media-meta b { color: var(--ink); font-size: 13px; font-weight: 650; }
  .media-meta small { color: var(--text-subtle); font-size: 12px; }
  .media-use { position: absolute; top: 8px; inset-inline-start: 8px; padding: 3px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; background: rgb(0 0 0 / .55); color: #fff; backdrop-filter: blur(6px); }
  .media-use.is-used { background: color-mix(in oklab, var(--success) 88%, black); }
  .media-detail { overflow: hidden; }
  .media-detail-img { background: var(--surface-2); display: grid; place-items: center; max-height: 300px; border-bottom: 1px solid var(--line); }
  .media-detail-img img { max-width: 100%; max-height: 300px; object-fit: contain; display: block; }
  .dl-compact { grid-template-columns: 70px 1fr; row-gap: 4px; font-size: var(--fs-small); }
  .media-used-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); color: var(--ink); font-size: var(--fs-small); min-width: 0; }
  .media-used-row:hover { background: var(--surface-2); }
  @media (max-width: 1099px) { .media-split.has-open > div:first-child { display: none; } }
}
@layer components {
  .picker-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); max-height: 56vh; overflow: auto; }
  .picker-tile { display: grid; gap: 6px; width: 100%; padding: 6px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font: inherit; text-align: start; color: var(--text-muted); font-size: 12px; transition: border-color var(--t-fast), transform var(--t-fast); }
  .picker-tile:hover, .picker-tile:focus-visible { border-color: var(--ink); transform: translateY(-1px); }
  .picker-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--surface-2); display: block; }
}
@layer components {
  .brand-apply { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 14px; border: 1px dashed color-mix(in oklab, var(--assist, #7C5CFF) 45%, var(--line)); background: color-mix(in oklab, var(--assist, #7C5CFF) 6%, var(--surface)); text-align: start; font: inherit; color: var(--text-muted); cursor: pointer; transition: all var(--t-fast); }
  .brand-apply:hover { border-style: solid; transform: translateY(-1px); box-shadow: var(--e1); }
  .brand-apply b { display: block; color: var(--ink); font-size: 13px; }
  .brand-apply small { display: block; font-size: 12px; line-height: 1.35; }
  .brand-apply-icon { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--assist-soft); color: var(--assist-text); }
  .brand-apply-icon svg { width: 16px; height: 16px; }
}

/* Settings → Brand (ADR-0028) */
@layer components {
  .brand-layout { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 1100px) { .brand-layout { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } .brand-preview { position: sticky; top: 88px; } }
  .brand-logo-preview img { object-fit: contain; padding: 6px; }
  .brand-preview { display: grid; gap: 14px; }
  .brand-page { border-radius: 26px; overflow: hidden; background: var(--site-bg); color: var(--site-text); font-family: var(--site-font); box-shadow: var(--e2); border: 1px solid var(--line); }
  .brand-page-cover { height: 86px; background: var(--site-cover, var(--site-accent)); }
  .brand-page-cover[style*="none"] { background: var(--site-accent); }
  .brand-page-body { display: grid; justify-items: center; gap: 8px; padding: 0 22px 24px; text-align: center; }
  .brand-page-avatar { width: 64px; height: 64px; margin-top: -32px; border-radius: 22px; display: grid; place-items: center; background: var(--site-surface); border: 3px solid var(--site-bg-base); font-family: var(--site-heading); font-weight: 800; font-size: 26px; color: var(--site-accent); overflow: hidden; }
  .brand-page-avatar img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
  .brand-page h3 { margin: 4px 0 0; font-family: var(--site-heading); font-size: 22px; letter-spacing: -.02em; color: var(--site-text); }
  .brand-page p { margin: 0 0 6px; color: var(--site-muted); font-size: 13.5px; }
  .brand-page-btn { width: 100%; padding: 12px; border-radius: var(--site-radius); background: var(--site-btn-bg); color: var(--site-btn-text); font-weight: 650; font-size: 14px; }
  .brand-page-btn.is-soft { background: var(--site-surface); color: var(--site-text); border: 1px solid color-mix(in oklab, var(--site-text) 12%, transparent); }
  .brand-email { padding: 18px; border-radius: 22px; background: var(--em-bg); border: 1px solid var(--line); }
  .brand-email-card { background: var(--em-card); border-radius: 14px; padding: 20px; display: grid; gap: 8px; justify-items: start; color: #1d2320; box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
  .brand-email-logo { max-height: 34px; max-width: 160px; object-fit: contain; }
  .brand-email-name { font-size: 15px; }
  .brand-email h4 { margin: 6px 0 0; font-size: 20px; font-family: inherit; }
  .brand-email p { margin: 0; font-size: 13.5px; color: #55605a; }
  .brand-email-btn { margin-top: 6px; padding: 10px 16px; border-radius: 10px; background: var(--em-accent); color: var(--em-accent-text, #fff); font-weight: 650; font-size: 13.5px; }
}
@layer components {
  .saved-list { display: grid; gap: 8px; }
  .saved-row { display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
  .saved-row.is-selected { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
  .saved-pick { flex: 1; display: flex; align-items: center; gap: 12px; padding: 8px; border: 0; background: none; font: inherit; text-align: start; cursor: pointer; color: var(--text-muted); min-width: 0; border-radius: 12px; }
  .saved-pick:hover { background: var(--surface-2); }
  .saved-pick b { display: block; color: var(--ink); font-size: 14px; }
  .saved-pick small { display: block; font-size: 12px; }
  .saved-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent-text); }
  .saved-icon svg { width: 18px; height: 18px; }
}

/* What's new (ADR-0028) */
@layer components {
  .wn { position: relative; }
  .wn-btn { position: relative; }
  .wn-dot { position: absolute; top: 6px; inset-inline-end: 6px; width: 8px; height: 8px; border-radius: 99px; background: var(--assist, #7C5CFF); box-shadow: 0 0 0 2px var(--surface); animation: wn-pulse 2.4s ease-in-out infinite; }
  @keyframes wn-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
  .wn-overlay { position: fixed; inset: 0; z-index: 80; background: rgb(8 10 9 / .28); backdrop-filter: blur(2px); animation: fade-in .2s ease both; }
  .wn-panel { position: fixed; top: 10px; inset-inline-end: 10px; bottom: 10px; z-index: 81; width: min(420px, calc(100vw - 20px)); display: flex; flex-direction: column; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e3); overflow: hidden; animation: wn-in .32s var(--ease-out, cubic-bezier(.2,.8,.2,1)) both; }
  @keyframes wn-in { from { transform: translateX(calc(24px * var(--dir-sign, 1))); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  .wn-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 22px 14px; background: radial-gradient(120% 120% at 100% 0%, color-mix(in oklab, var(--assist, #7C5CFF) 16%, transparent) 0%, transparent 60%); border-bottom: 1px solid var(--line); }
  .wn-head h2 { margin: 2px 0 0; font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -.02em; color: var(--ink); }
  .wn-list { list-style: none; margin: 0; padding: 8px 22px; overflow-y: auto; flex: 1; }
  .wn-item { padding: 16px 0; border-bottom: 1px solid var(--line); }
  .wn-item:last-child { border-bottom: 0; }
  .wn-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-subtle); font-weight: 600; }
  .wn-tag { padding: 2px 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-text); font-size: 11px; font-weight: 700; letter-spacing: .02em; }
  .wn-tag.is-ai { background: var(--assist-soft); color: var(--assist-text); }
  .wn-tag.is-improved { background: var(--surface-2); color: var(--text-muted); }
  .wn-item h3 { margin: 8px 0 4px; font-size: 15px; color: var(--ink); letter-spacing: -.01em; }
  .wn-item p { margin: 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.55; }
  .wn-foot { padding: 14px 22px; border-top: 1px solid var(--line); background: var(--surface-2); }
  @media (prefers-reduced-motion: reduce) { .wn-dot, .wn-panel, .wn-overlay { animation: none; } }
}

/* F2c mobile polish (ADR-0029) */
@layer components {
  .sheet-handle { display: none; }
  @media (max-width: 640px) {
    .sheet-handle { display: block; width: 40px; height: 5px; border-radius: 99px; background: var(--line-strong); margin: 10px auto 0; }
    .launcher-dialog .dialog-header { padding-top: 12px; }
    .launcher-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .launcher-tile { flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px; min-height: 104px; }
    .launcher-tile .launcher-desc, .launcher-tile .kbd { display: none; }
    .launcher-icon { width: 38px; height: 38px; border-radius: 11px; }
    .launcher-title { font-size: 14px; }
    .launcher-soon { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Scrollable tab rows say so: a soft fade on whichever edge has more. */
    .tabs.has-more-right { mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
    .tabs.has-more-left { mask-image: linear-gradient(90deg, transparent, #000 44px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); }
    .tabs.has-more-left.has-more-right { mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }

    /* Members: the invite form stacks. */
    .invite-row { flex-wrap: wrap; }
    .invite-row > .grow { flex: 1 1 100% !important; /* R3D: beats the .grow utility layer */ }
    .invite-row .select { flex: 1; width: auto !important; }

    /* The support notice collapses to one line. */
    .support-note { padding: 8px 12px; font-size: 13px; }
    .support-note .support-note-long { display: none; }

    /* Larger text: KPI footnotes wrap instead of pushing past the card. */
    .kpi-foot { flex-wrap: wrap; min-width: 0; }
    .kpi-foot > span { min-width: 0; overflow-wrap: anywhere; }
  }
}

/* F2c display & accessibility preferences (ADR-0029). Set per person in Account → Display, written on <html>. */
@layer components {
  /* Text size scales the whole interface the way browser zoom does, so px and rem sizes grow together. */
  html[data-text="large"] { zoom: 1.1; }
  html[data-text="larger"] { zoom: 1.22; }

  html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }

  html[data-contrast="high"] { --text: #111513; --text-muted: #3A423C; --text-subtle: #505A53; --line: #B9C0B8; --line-strong: #8C958D; }
  html[data-contrast="high"][data-theme="dark"] { --text: #F4F6F5; --text-muted: #C9D0CC; --text-subtle: #AAB3AE; --line: rgb(255 255 255 / .28); --line-strong: rgb(255 255 255 / .42); }
  html[data-contrast="high"] :focus-visible { outline: 3px solid var(--ink) !important; outline-offset: 2px; }

  html[data-underline] main a:not(.btn):not(.menu-item):not(.nav-item):not(.tab):not(.card-link):not(.media-used-row),
  html[data-underline] .page-desc a, html[data-underline] .text-sm a { text-decoration: underline; text-underline-offset: 3px; }

  /* The display settings screen */
  .ds-grid { display: grid; gap: 16px; }
  .ds-row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-top: 1px solid var(--line); }
  .ds-row:first-child { border-top: 0; }
  .ds-row .grow { min-width: 0; }
  .ds-row b { display: block; color: var(--ink); font-size: 14px; }
  .ds-row small { display: block; color: var(--text-muted); font-size: 13px; margin-top: 2px; }
  .ds-sample { padding: 18px 20px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); }
  .ds-sample h3 { margin-bottom: 4px; }
  .ds-sample p { color: var(--text-muted); }
  @media (max-width: 640px) {
    .ds-row { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; }
    .ds-row .segmented { width: 100%; display: flex; }
    .ds-row .segmented > button { flex: 1; }
  }
}

@layer components {
  .offline-page { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background: var(--canvas); }
  .offline-card { max-width: 420px; text-align: center; display: grid; gap: 12px; justify-items: center; }
  .offline-icon { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); color: var(--text-muted); }
  .offline-icon svg { width: 28px; height: 28px; }
  .offline-card p { color: var(--text-muted); }
}

/* Refreshing lists (ADR-0029): the old results dim and a thin shimmer runs along the top while new ones load. */
@layer components {
  .is-refreshing { position: relative; pointer-events: none; }
  .is-refreshing > * { opacity: .5; transition: opacity var(--t-fast); }
  .is-refreshing::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 3px; border-radius: 99px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 50% 100%; background-repeat: no-repeat;
    animation: refreshing 1s ease-in-out infinite; }
  @keyframes refreshing { from { background-position: -50% 0; } to { background-position: 150% 0; } }
  @media (prefers-reduced-motion: reduce) { .is-refreshing::before { animation: none; background: var(--accent); opacity: .5; } }
}

/* First-run tour (ADR-0029) */
@layer components {
  .tour-card { position: fixed; z-index: 55; inset-inline-end: 24px; bottom: 24px; width: min(360px, calc(100vw - 32px)); padding: 18px 18px 14px; border-radius: 20px;
    background: var(--coach-bg); color: var(--coach-fg); border: 1px solid var(--coach-line); box-shadow: var(--coach-shadow); outline: none; }
  .tour-head { display: flex; align-items: center; gap: 10px; }
  .tour-head .icon-btn { margin-inline-start: auto; min-width: 44px; min-height: 44px; color: var(--coach-subtle); }
  .tour-head .icon-btn:hover { background: var(--coach-hover); color: var(--coach-fg); }
  .tour-icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--coach-accent); color: var(--coach-on-accent); }
  .tour-icon svg { width: 18px; height: 18px; }
  .tour-count { font-size: 12px; font-weight: 700; color: var(--coach-subtle); letter-spacing: .02em; }
  .tour-title { margin: 12px 0 4px; font-size: 18px; color: var(--coach-fg); }
  .tour-text { font-size: 14px; line-height: 1.55; color: var(--coach-muted); }
  .tour-foot { display: flex; align-items: center; gap: 6px; margin-top: 14px; }
  .tour-foot .btn-ghost { color: var(--coach-muted); background: transparent; border-color: transparent; }
  .tour-foot .btn-ghost:hover { background: var(--coach-hover); color: var(--coach-fg); }
  .tour-foot .btn-primary, .tour-foot .btn-primary:hover, .tour-foot .btn-primary:focus-visible { background: var(--coach-accent); color: var(--coach-on-accent); border-color: transparent; }
  .tour-foot .btn:focus-visible, .tour-head .icon-btn:focus-visible { outline: 2px solid var(--coach-accent); outline-offset: 2px; }
  .tour-foot .btn-primary:hover { filter: brightness(1.06); }
  .tour-dots { display: flex; gap: 5px; }
  .tour-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--coach-track); transition: width var(--t-fast), background var(--t-fast); }
  .tour-dots i.is-on { width: 18px; background: var(--coach-accent); }
  @media (prefers-reduced-motion: reduce) { .tour-dots i, .tour-target { transition: none; } }
  .tour-target { position: relative; z-index: 5; outline: 3px solid var(--coach-accent) !important; outline-offset: 4px; border-radius: 14px; box-shadow: 0 0 0 9999px rgb(8 12 10 / .28); transition: box-shadow var(--t-base); }
  @media (max-width: 640px) {
    .tour-card { inset-inline: 12px; width: auto; bottom: calc(104px + env(safe-area-inset-bottom)); }
  }
}

/* Passkeys list (ADR-0030) */
@layer components {
  .pk-list { display: grid; gap: 8px; }
  .pk-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
  .pk-row small { display: block; font-size: 12.5px; }
  .pk-icon { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); flex: none; }
  .pk-icon svg { width: 18px; height: 18px; }
}

/* Leaving: exit survey and pause (ADR-0030) */
@layer components {
  .leave-reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .leave-reason { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); font-size: 13.5px; font-weight: 600; color: var(--text); cursor: pointer; background: var(--surface); transition: border-color var(--t-fast), background var(--t-fast); }
  .leave-reason:hover { border-color: var(--line-strong); }
  .leave-reason.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); box-shadow: 0 0 0 1px var(--accent) inset; }
  .leave-reason:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
  .leave-pause { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-lg); background: var(--accent-soft); border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); }
  .leave-pause .segmented { display: flex; } .leave-pause .segmented > button { flex: 1; }
  .leave-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
  @media (max-width: 640px) { .leave-reason { font-size: 13px; padding: 8px 10px; line-height: 1.3; } }
}

/* Domain DNS guidance (ADR-0031) */
@layer components {
  .dns-full { display: block; color: var(--text-subtle); font-size: 11px; margin-top: 2px; }
  .dns-diag { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-md); background: color-mix(in oklab, var(--warning, #D97706) 8%, var(--surface)); border: 1px solid color-mix(in oklab, var(--warning, #D97706) 30%, transparent); }
  .dns-diag-head { display: flex; align-items: center; gap: 8px; margin: 0; }
  .dns-diag-head svg { width: 16px; height: 16px; }
  .dns-steps { margin: 0; padding-inline-start: 18px; display: grid; gap: 10px; }
  .dns-steps li { font-size: 13.5px; line-height: 1.5; }
  .dns-steps li b { display: block; color: var(--ink); }
  .dns-steps li > span { display: block; color: var(--text-muted); overflow-wrap: anywhere; }
  .dns-steps .dns-fix { color: var(--ink); font-weight: 600; margin-top: 2px; }
  .dns-steps .dns-fix svg { display: inline-block; width: 13px; height: 13px; vertical-align: -2px; }
  @media (max-width: 640px) {
    .dns-table thead { display: none; }
    .dns-table, .dns-table tbody, .dns-table tr, .dns-table td { display: block; width: 100%; }
    .dns-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
    .dns-table td { padding: 0 !important; border: 0 !important; }
    .dns-table td:nth-child(2) { grid-column: 2 / 4; }
    .dns-table td:nth-child(3) { grid-column: 1 / 3; word-break: break-all; }
    .dns-table td:nth-child(4) { grid-column: 3; grid-row: 2; }
  }
}

/* QR studio (ADR-0032) */
@layer components {
  .qr-campaigns { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 16px; scrollbar-width: none; }
  .qr-camp { flex: 0 0 auto; min-width: 150px; max-width: 220px; display: grid; gap: 2px; text-align: start; padding: 12px 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
  .qr-camp:hover { border-color: var(--line-strong); }
  .qr-camp.is-on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
  .qr-camp b { font-size: 14px; color: var(--ink); }
  .qr-camp small { font-size: 12px; color: var(--text-muted); }
  .qr-camp-bar { height: 4px; border-radius: 99px; background: var(--surface-sunken); margin-top: 6px; overflow: hidden; }
  .qr-camp-bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
  .qr-layout { display: grid; gap: 18px; }
  .qr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
  .qr-card { overflow: hidden; transition: box-shadow var(--t-fast), border-color var(--t-fast); }
  .qr-card.is-open { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
  .qr-card-art { display: grid; place-items: center; width: 100%; padding: 20px; background: radial-gradient(120% 90% at 50% 0%, var(--accent-soft), var(--surface-2)); border-bottom: 1px solid var(--line); cursor: pointer; }
  .qr-card-code { width: 128px; height: 128px; border-radius: 14px; overflow: hidden; box-shadow: var(--e2); background: #fff; transition: transform var(--t-base) var(--ease-out); }
  .qr-card-art:hover .qr-card-code { transform: scale(1.04) rotate(-1deg); }
  .qr-card-code svg, .qr-card-code img { width: 100%; height: 100%; display: block; }
  .qr-card-body { display: grid; gap: 10px; padding: 14px 16px; }
  .qr-card-stats { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .qr-card-num { font-size: 13px; color: var(--text-muted); }
  .qr-card-num b { font-size: 20px; color: var(--ink); font-family: var(--font-display); letter-spacing: -.02em; }
  .qr-spark { color: var(--accent); flex: none; }
  .qr-spark svg { width: 96px; height: 30px; }
  .qr-tag { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 99px; background: var(--surface-sunken); color: var(--text); border: 1px solid var(--line); cursor: pointer; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .qr-tag:hover { border-color: var(--line-strong); }
  /* R20C: scans open as a modal sheet: from the bottom on phones, from the inline end on wide screens. */
  .qr-detail-wrap { place-items: end center; padding-inline: 0; padding-bottom: 0; }
  .qr-detail-wrap .qr-detail { inline-size: 100%; max-inline-size: 560px; max-block-size: 88dvh; padding-bottom: env(safe-area-inset-bottom); border-end-start-radius: 0; border-end-end-radius: 0; animation: qr-sheet-up var(--t-base, .2s) var(--ease-out, ease-out); }
  @media (min-width: 900px) { .qr-detail-wrap { place-items: stretch end; padding: 12px; } .qr-detail-wrap .qr-detail { max-inline-size: 420px; max-block-size: none; block-size: 100%; border-radius: var(--r-lg, 16px); animation-name: qr-sheet-in; } }
  @keyframes qr-sheet-up { from { transform: translateY(24px); opacity: 0; } }
  @keyframes qr-sheet-in { from { transform: translateX(24px); opacity: 0; } }
  [dir="rtl"] .qr-detail-wrap .qr-detail { animation-name: qr-sheet-up; }
  @media (prefers-reduced-motion: reduce) { .qr-detail-wrap .qr-detail { animation: none; } }
  .qr-detail-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .qr-detail-kpis > div { padding: 12px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); display: grid; gap: 2px; }
  .qr-detail-kpis b { font-size: 22px; color: var(--ink); font-family: var(--font-display); }
  @media (max-width: 640px) { .qr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .qr-card-art { padding: 14px; } .qr-card-code { width: 100%; height: auto; aspect-ratio: 1; } .qr-card-body { padding: 12px; } .qr-card-stats .qr-spark { display: none; } }
}

/* Visit-to-sale funnel (ADR-0032) */
@layer components {
  .funnel { display: grid; gap: 14px; }
  .funnel-step { display: grid; gap: 6px; }
  .funnel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .funnel-label { font-size: 14px; font-weight: 600; color: var(--ink); }
  .funnel-head b { font-size: 20px; font-family: var(--font-display); color: var(--ink); letter-spacing: -.02em; }
  .funnel-bar { height: 14px; border-radius: 99px; background: var(--surface-sunken); overflow: hidden; }
  .funnel-bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 55%, #7C5CFF)); transition: width var(--t-base) var(--ease-out); }
  .funnel-step:last-child .funnel-bar i { background: linear-gradient(90deg, #C2F45B, var(--accent)); }
  .funnel-foot { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); }
  .funnel-drop { color: var(--danger, #C2410C); font-weight: 600; }
  @media (max-width: 640px) { .funnel-card .card-header { flex-wrap: wrap; } .funnel-card .card-header select { max-width: 100% !important; width: 100% !important; } }
}

@layer components {
  @media (max-width: 640px) { .toolbar { flex-wrap: wrap; } .toolbar > .input-icon.grow { flex: 1 1 100% !important; width: 100%; } }
  .qr-card-body > * { min-width: 0; }
  .qr-card-body .cluster { flex-wrap: wrap; min-width: 0; } .qr-tag { max-width: 100%; }
}

/* R19D · owner items 4 + 7: sticky settings tabs; the General plan card as a summary (meters + feature categories). */
@layer components {
  :root { --stick-top: var(--topbar-h, 64px); }
  @media (max-width: 767px) { :root { --stick-top: 60px; } }
  .settings-tabs { position: sticky; top: var(--stick-top); z-index: 15; margin-inline: -12px; padding-inline: 12px; background: var(--surface); transition: box-shadow var(--t-fast), background var(--t-fast); }
  .settings-tabs.is-stuck { background: color-mix(in oklab, var(--surface) 86%, transparent); backdrop-filter: saturate(1.5) blur(12px); -webkit-backdrop-filter: saturate(1.5) blur(12px); box-shadow: 0 8px 18px -14px color-mix(in oklab, var(--ink) 45%, transparent); }
  .settings-tabs .tab { scroll-margin-inline: 24px; }

  .gp-plan-head { align-items: center; gap: 12px; flex-wrap: wrap; }
  .gp-plan-id { display: grid; gap: 6px; min-width: 0; }
  .gp-plan-badge { display: inline-flex; align-items: center; gap: 7px; justify-self: start; padding: 5px 12px 5px 10px; border-radius: var(--r-pill); background: var(--ink); color: var(--text-on-ink); font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; }
  .gp-plan-badge svg { width: 15px; height: 15px; color: var(--accent); }
  .gp-plan-body { display: grid; gap: 18px; }
  .gp-meters { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
  .gp-meter { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-sunken); min-width: 0; }
  .gp-meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: var(--fs-small); color: var(--text-muted); min-width: 0; }
  .gp-meter-top b { color: var(--ink); }
  .gp-meter-top .tabular { white-space: nowrap; flex: none; }
  .gp-meter-label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gp-meter-label svg { width: 15px; height: 15px; flex: none; color: var(--text-subtle); }
  .gp-meter .progress { height: 6px; }
  .gp-meter.is-near .progress > span { background: var(--warning, #d97706); }
  .gp-feat-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; min-width: 0; }
  .gp-cats { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1 1 320px; padding-block: 2px; }
  .gp-cats::-webkit-scrollbar { display: none; }
  .gp-cat { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--text-muted); font-size: var(--fs-small); font-weight: 600; cursor: pointer; white-space: nowrap; }
  .gp-cat:hover { color: var(--ink); border-color: var(--line-strong); }
  .gp-cat.is-active { background: var(--ink); border-color: var(--ink); color: var(--text-on-ink); }
  .gp-cat:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .gp-cat-n { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: var(--r-pill); background: color-mix(in oklab, currentColor 14%, transparent); }
  .gp-search { position: relative; flex: 0 1 240px; min-width: 0; }
  .gp-search svg { position: absolute; inset-inline-start: 12px; top: 50%; translate: 0 -50%; width: 15px; height: 15px; color: var(--text-subtle); pointer-events: none; }
  .gp-search .input { padding-inline-start: 34px; min-height: 40px; }
  .gp-feats-wrap { display: grid; gap: 8px; }
  .gp-feats-h { font-size: var(--fs-small); font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
  .gp-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
  .gp-feat { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-small); color: var(--ink); min-width: 0; }
  .gp-feat > svg { width: 15px; height: 15px; flex: none; color: var(--accent-text); }
  .gp-feat.is-off { color: var(--text-subtle); }
  .gp-feat.is-off > svg { color: var(--text-subtle); }
  .gp-feat-label { flex: 1 1 auto; min-width: 0; }
  .gp-feat-val { flex: none; font-weight: 650; font-variant-numeric: tabular-nums; }
  @media (max-width: 600px) {
    .gp-search { flex-basis: 100%; }
    .gp-meters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .gp-meter { padding: 10px 12px; }
    .gp-meter-top { flex-direction: column; align-items: flex-start; gap: 2px; }
    .gp-meter-label { max-width: 100%; }
  }
}

/* css/components/media-av.css */
/* Video and audio in the app (B3 · M3): the chunked uploader, the inspector's clip field, library and picker tiles. */
@layer components {
  .av-upload { display: grid; gap: 6px; min-width: 0; }
  .av-upload-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .av-upload .is-disabled { opacity: .55; pointer-events: none; }
  .av-upload-progress { display: grid; gap: 4px; }
  .av-upload-bar { block-size: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
  .av-upload-bar span { display: block; block-size: 100%; inline-size: 0; border-radius: inherit; background: var(--accent, var(--ink)); transition: inline-size .2s; }
  .av-upload-hint { margin: 0; }
  .av-upload.is-compact .av-upload-hint { display: none; }
  .av-upload.is-compact { display: contents; }
  .av-field { display: grid; gap: 8px; }
  .av-field-video { inline-size: 100%; max-block-size: 220px; border-radius: 12px; background: var(--ink); display: block; }
  .av-field-audio { inline-size: 100%; display: block; }
  .av-field-empty { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 12px; border: 1px dashed var(--line-strong); color: var(--text-muted); }
  .av-field-empty svg { inline-size: 20px; block-size: 20px; }
  .media-thumb-clip { background-image: none; background: linear-gradient(150deg, var(--ink) 0%, color-mix(in oklab, var(--ink) 70%, var(--accent, var(--ink))) 100%); color: var(--surface); display: grid; place-content: center; justify-items: center; gap: 4px; min-height: 120px; }
  .media-thumb-clip svg { inline-size: 32px; block-size: 32px; }
  .media-thumb-clip small { font-size: 11px; font-weight: 800; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
  .media-detail-av { display: block; inline-size: 100%; max-block-size: 300px; background: var(--ink); }
  .media-detail-av-audio { padding: 18px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
  .media-detail-av-audio audio { inline-size: 100%; display: block; }
  .picker-file { display: grid; place-content: center; justify-items: center; gap: 4px; aspect-ratio: 1; border-radius: 10px; background: var(--surface-2); color: var(--text-muted); }
  .picker-file svg { inline-size: 28px; block-size: 28px; }
  .picker-file small { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
}


/* The upload dialog (batch 1 · F, owner item 4): drop zone, per-file progress, failed state with retry, From URL. */
@layer components {
  .mu-dialog { display: grid; gap: 14px; min-width: 0; }
  .mu-tabs { justify-self: start; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .mu-tabs > button { min-height: 36px; white-space: nowrap; }
  .mu { display: grid; gap: 12px; min-width: 0; }
  .mu-drop { position: relative; display: grid; justify-items: center; gap: 6px; padding: 28px 18px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg); background: color-mix(in oklab, var(--accent-soft) 35%, var(--surface)); text-align: center; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast); }
  .mu-drop:hover, .mu-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
  .mu-drop.is-over { transform: scale(1.01); }
  .mu-drop:focus-within { box-shadow: var(--focus-ring); border-color: var(--accent); }
  .mu-drop-art { inline-size: 56px; block-size: 56px; display: grid; place-items: center; border-radius: 18px; background: var(--surface); color: var(--accent-text, var(--accent)); box-shadow: var(--e1); margin-block-end: 4px; }
  .mu-drop-art svg { inline-size: 28px; block-size: 28px; }
  .mu-drop-title { font-weight: 600; color: var(--ink); }
  .mu-browse { color: var(--accent-text, var(--accent)); text-decoration: underline; text-underline-offset: 3px; }
  .mu-drop-hint { font-size: var(--fs-small); color: var(--text-muted); max-inline-size: 46ch; }
  .mu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-block-size: 44vh; overflow: auto; overscroll-behavior: contain; }
  .mu-item { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); min-width: 0; }
  .mu-item.is-failed { border-color: color-mix(in oklab, var(--danger) 35%, var(--line)); background: color-mix(in oklab, var(--danger-soft) 60%, var(--surface)); }
  .mu-item.is-cancelled { opacity: .65; }
  .mu-type { inline-size: 40px; block-size: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; overflow: hidden; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--line); }
  .mu-type img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
  .mu-type svg { inline-size: 20px; block-size: 20px; }
  .mu-item.is-failed .mu-type { color: var(--danger); }
  .mu-main { display: grid; gap: 5px; flex: 1; min-width: 0; }
  .mu-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .mu-row b { flex: 1; min-width: 0; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
  .mu-item.is-failed .mu-row b { color: var(--danger); }
  .mu-pct { font-size: var(--fs-micro); font-weight: 700; color: var(--text-muted); }
  .mu-ok { color: var(--success); display: inline-flex; }
  .mu-ok svg { inline-size: 18px; block-size: 18px; }
  .mu-bar { display: block; block-size: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
  .mu-bar span { display: block; block-size: 100%; inline-size: 0; border-radius: inherit; background: var(--accent); transition: inline-size .2s var(--ease-out, ease); }
  .mu-item.is-processing .mu-bar span, .mu-item.is-queued .mu-bar span { background: repeating-linear-gradient(-45deg, var(--accent) 0 8px, color-mix(in oklab, var(--accent) 70%, var(--surface)) 8px 16px); background-size: 200% 100%; animation: mu-stripe 1s linear infinite; }
  .mu-item.is-queued .mu-bar span { inline-size: 100% !important; opacity: .25; animation: none; }
  .mu-note { font-size: var(--fs-micro); color: var(--text-muted); overflow-wrap: anywhere; }
  .mu-item.is-failed .mu-note { color: var(--danger); }
  .mu-actions { display: flex; gap: 2px; flex: none; }
  .mu-actions .icon-btn { inline-size: 36px; block-size: 36px; }
  .mu-retry { color: var(--danger); }
  .mu-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .mu-url { display: grid; gap: 10px; }
  .mu-url-row { display: flex; gap: 8px; flex-wrap: wrap; }
  .mu-url-row .input-icon { min-width: min(100%, 240px); }
  @keyframes mu-stripe { to { background-position: -32px 0; } }
  @media (pointer: coarse) { .mu-actions .icon-btn { inline-size: 44px; block-size: 44px; } }
  @media (max-width: 640px) { .mu-drop { padding: 22px 14px; } .mu-list { max-block-size: 50vh; } }
  @media (prefers-reduced-motion: reduce) { .mu-drop, .mu-bar span { transition: none; } .mu-item .mu-bar span { animation: none !important; } .mu-drop.is-over { transform: none; } }
}

/* The media library page (batch 1 · F): recently modified, storage usage, files in grid / table / list, bulk bar. */
@layer components {
  .ml-h { font-family: var(--font-display); font-size: 1.05rem; font-weight: 650; color: var(--ink); margin: 0; display: inline-flex; align-items: center; gap: 8px; }
  .ml-top { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-block-end: 18px; }
  @media (min-width: 1100px) { .ml-top { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }
  .ml-section-head { margin-block-end: 10px; gap: 8px; }
  .ml-recent { margin-block-end: 14px; min-width: 0; }
  .ml-recent-list { list-style: none; margin: 0; padding: 2px 2px 8px; display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .ml-recent-list > li { flex: 0 0 220px; scroll-snap-align: start; min-width: 0; }
  .ml-recent-card { display: flex; align-items: center; gap: 12px; inline-size: 100%; min-height: 64px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font: inherit; color: inherit; text-align: start; cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
  .ml-recent-card:hover { border-color: var(--line-strong); box-shadow: var(--e1); transform: translateY(-1px); }
  .ml-recent-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .ml-recent-meta { display: grid; gap: 2px; min-width: 0; }
  .ml-recent-meta b { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
  .ml-recent-meta small { font-size: var(--fs-micro); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ml-ficon { inline-size: 40px; block-size: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-muted); }
  .ml-ficon img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
  .ml-ficon svg { inline-size: 18px; block-size: 18px; }
  .ml-k-image { color: var(--chart-2); background: color-mix(in oklab, var(--chart-2) 12%, var(--surface)); }
  .ml-k-video { color: var(--chart-4); background: color-mix(in oklab, var(--chart-4) 12%, var(--surface)); }
  .ml-k-audio { color: var(--chart-5); background: color-mix(in oklab, var(--chart-5) 14%, var(--surface)); }
  .ml-k-pdf { color: var(--chart-3); background: color-mix(in oklab, var(--chart-3) 12%, var(--surface)); }
  .ml-stats { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ml-stat { display: flex; align-items: center; gap: 12px; inline-size: 100%; block-size: 100%; min-height: 64px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font: inherit; color: inherit; text-align: start; }
  button.ml-stat { cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
  button.ml-stat:hover { border-color: var(--line-strong); box-shadow: var(--e1); }
  button.ml-stat[aria-pressed="true"] { border-color: var(--warning); background: var(--warning-soft); }
  .ml-stat > span:last-child { display: grid; min-width: 0; }
  .ml-stat b { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; }
  .ml-stat small { font-size: var(--fs-micro); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ml-stat-ic { inline-size: 36px; block-size: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text, var(--accent)); }
  .ml-stat-ic svg { inline-size: 18px; block-size: 18px; }
  .ml-stat-ic.is-warn { background: var(--warning-soft); color: var(--warning); }
  .ml-stat-ic.is-ok { background: var(--success-soft); color: var(--success); }
  .ml-nowrap { white-space: nowrap; }
  .ml-table td:nth-child(2) { min-width: 220px; }
  .ml-storage .card-body { display: grid; gap: 14px; }
  .ml-storage-top { display: flex; align-items: center; gap: 18px; }
  .ml-storage-top .donut-center b { font-size: 1.15rem; }
  .ml-storage-sum { display: grid; gap: 4px; justify-items: start; min-width: 0; }
  .ml-storage-sum > b { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
  .ml-kinds { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .ml-kind { display: flex; align-items: center; gap: 12px; inline-size: 100%; min-height: 52px; padding: 6px 10px 6px 6px; border: 1px solid transparent; border-radius: var(--r-md); background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
  .ml-kind:hover { background: var(--surface-hover, var(--surface-2)); }
  .ml-kind.is-on { border-color: var(--line-strong); background: var(--surface-2); }
  .ml-kind.is-static { cursor: default; }
  .ml-kind.is-static:hover { background: none; }
  .ml-kind b { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
  .ml-kind small { font-size: var(--fs-micro); color: var(--text-muted); font-variant-numeric: tabular-nums; }
  .ml-dot { inline-size: 10px; block-size: 10px; border-radius: 3px; flex: none; }
  .ml-files { overflow: visible; }
  /* R4 · D: compact header, slim stats strip, pager, slide-over panel */
  .ml-head { display: grid; gap: 12px; margin-block-end: 14px; }
  .ml-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .ml-title { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); }
  .ml-head-acts { display: flex; align-items: center; gap: 8px; }
  .ml-head .ml-toolbar { padding: 0; }
  .ml-filters { display: contents; }
  .ml-filter-toggle { display: none; position: relative; }
  .ml-filter-toggle .ml-dot-on { position: absolute; top: 6px; inset-inline-end: 6px; }
  .ml-dot-on { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--accent); }
  .ml-strip { margin-block-end: 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
  .ml-strip-sum { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; cursor: pointer; list-style: none; border-radius: inherit; }
  .ml-strip-sum::-webkit-details-marker { display: none; }
  .ml-strip-sum:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .ml-donut-sm { flex: none; }
  .ml-strip-used { display: grid; min-width: 0; line-height: 1.2; }
  .ml-strip-used b { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.05rem; }
  .ml-strip-used small, .ml-strip-hint { font-size: var(--fs-micro); color: var(--text-muted); }
  .ml-strip-chev { inline-size: 16px; block-size: 16px; color: var(--text-muted); transition: transform var(--t-fast); }
  .ml-strip[open] .ml-strip-chev { transform: rotate(180deg); }
  .ml-chips { list-style: none; margin: 0; padding: 0 14px 12px; display: flex; flex-wrap: wrap; gap: 8px; }
  .ml-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); font: inherit; font-size: var(--fs-small); color: inherit; cursor: pointer; white-space: nowrap; }
  .ml-chip b { font-weight: 600; color: var(--ink); }
  .ml-chip small { color: var(--text-muted); font-size: var(--fs-micro); }
  .ml-chip svg { inline-size: 16px; block-size: 16px; }
  .ml-chip:hover { border-color: var(--line-strong); }
  .ml-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .ml-chip.is-on { border-color: var(--accent); background: var(--accent-soft); }
  .ml-chip.is-warn svg { color: var(--warning); }
  .ml-chip.is-warn[aria-pressed="true"] { border-color: var(--warning); background: var(--warning-soft); }
  .ml-chip.is-ok svg { color: var(--success); }
  .ml-chip.is-static { cursor: default; }
  .ml-files .ml-body { padding-block-start: 18px; }
  .ml-pager { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 18px; border-block-start: 1px solid var(--line); }
  .ml-per { display: inline-flex; align-items: center; gap: 8px; margin-inline-end: auto; }
  .ml-per .select { inline-size: auto; }
  .ml-pages { display: inline-flex; align-items: center; gap: 4px; }
  .ml-pg { min-inline-size: 36px; block-size: 36px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--r-sm, 8px); background: none; font: inherit; font-size: var(--fs-small); color: inherit; cursor: pointer; font-variant-numeric: tabular-nums; }
  .ml-pg:hover { background: var(--surface-2); }
  .ml-pg.is-on { border-color: var(--line-strong); background: var(--surface-2); font-weight: 700; color: var(--ink); }
  .ml-pg:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .ml-pg-gap { color: var(--text-muted); padding: 0 2px; }
  .ml-pages .icon-btn[disabled] { opacity: .4; pointer-events: none; }
  .ml-panel { inline-size: min(480px, calc(100vw - 16px)); animation: ml-in var(--t-base) var(--ease-out); }
  .ml-panel-head { align-items: center; }
  .ml-panel-t { display: grid; gap: 2px; min-width: 0; }
  .ml-panel-t h2 { margin: 0; font-size: 1.05rem; font-weight: 650; }
  .ml-panel-body { display: grid; gap: 16px; padding: 16px 20px 24px; }
  .ml-panel .media-detail-img { margin: 0; border: 1px solid var(--line); border-radius: var(--r-md); max-height: none; min-height: 200px; overflow: hidden; background: repeating-conic-gradient(var(--surface-2) 0% 25%, var(--surface) 0% 50%) 50% / 16px 16px; }
  .ml-panel .media-detail-img img { max-height: 48vh; }
  .ml-panel .media-detail-av { border-radius: var(--r-md); max-block-size: 48vh; }
  .ml-panel .media-detail-av-audio { border: 1px solid var(--line); border-radius: var(--r-md); }
  .ml-panel-pdf { display: grid; gap: 6px; justify-items: start; }
  .ml-panel-pdf iframe { inline-size: 100%; block-size: 48vh; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
  @keyframes ml-in { from { opacity: 0; transform: translateX(calc(24px * var(--dir-sign, 1))); } to { opacity: 1; transform: none; } }
  @media (max-width: 820px) {
    .ml-filter-toggle { display: inline-flex; }
    .ml .ml-search { flex: 1 1 0; }
    .ml-filters { display: none; }
    .ml-filters.is-open { display: flex; flex-wrap: wrap; gap: 8px; inline-size: 100%; }
    .ml-filters.is-open .select { flex: 1 1 calc(50% - 4px); min-width: 0; }
  }
  @media (max-width: 640px) {
    .ml-strip-hint { display: none; }
    .ml-head-row { flex-wrap: nowrap; }
    .ml-title { font-size: 1.35rem; }
    .ml-recent-list > li { flex-basis: 72%; }
    .ml-pager { padding-inline: 14px; justify-content: space-between; }
    .ml-per { margin-inline-end: 0; }
    .ml-pages { inline-size: 100%; justify-content: center; }
    .ml-pg, .ml-pages .icon-btn { min-inline-size: 44px; block-size: 44px; }
    .ml-panel { inset: 0; inline-size: 100%; max-height: none; border-radius: 0; border: 0; animation-name: ml-up; }
    .ml-panel-body { padding: 14px 16px calc(24px + env(safe-area-inset-bottom)); }
    .ml .ml-bulk { position: fixed; top: auto; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 76px); inset-inline: 12px; margin: 0; z-index: 40; } /* above the tab bar */
    .ml-head-acts .btn .ml-up-t { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .ml-head-acts .btn { min-width: 44px; padding-inline: 12px; }
    .ml .ml-views > button { min-width: 40px; }
    .ml-filter-toggle .ml-filter-t { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .ml-filter-toggle { min-width: 44px; min-height: 44px; padding-inline: 12px; }
    .ml-head-acts .btn { min-height: 44px; }
    .ml .ml-views > button { min-height: 44px; }
  }
  @media (max-width: 400px) { .ml-title .badge { display: none; } }
  @keyframes ml-up { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
  .ml-files-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 0; flex-wrap: wrap; }
  .ml-views > button { min-height: 36px; }
  .ml-toolbar { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 18px; align-items: center; }
  .ml-toolbar .select { inline-size: auto; min-width: 0; flex: 0 1 auto; }
  .ml-search { flex: 1 1 240px; min-width: 0; }
  .ml-bulk { position: sticky; top: calc(var(--topbar-h, 64px) + 8px); z-index: 5; display: flex; align-items: center; gap: 8px; margin: 0 18px 12px; padding: 8px 8px 8px 14px; border-radius: var(--r-md); background: var(--ink); color: var(--text-on-ink, #fff); box-shadow: var(--e2); }
  .ml-bulk .btn-secondary { background: color-mix(in oklab, var(--surface) 14%, transparent); color: inherit; border-color: color-mix(in oklab, var(--surface) 25%, transparent); }
  .ml-bulk .btn-danger-ghost { color: color-mix(in oklab, var(--danger) 55%, #fff); }
  .ml-bulk .icon-btn, .ml-bulk b { color: inherit; }
  .ml-body { padding: 0 18px 18px; min-width: 0; }
  .ml-files .media-split { padding: 0; }
  .ml-more { margin-block-start: 16px; }
  .ml-table-wrap { border-radius: var(--r-md); }
  .ml-table th { white-space: nowrap; }
  .ml-table td { vertical-align: middle; }
  .ml-table tr.is-open td { background: var(--accent-soft); }
  .ml-col-check { inline-size: 44px; }
  .ml-col-act { inline-size: 88px; text-align: end; }
  .ml-acts { display: inline-flex; gap: 2px; }
  @media (pointer: coarse) { .ml-acts .icon-btn { inline-size: 44px; block-size: 44px; } }
  .ml-num { text-align: end; white-space: nowrap; }
  .ml-name { display: flex; align-items: center; gap: 12px; min-width: 0; max-inline-size: 360px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
  .ml-name:hover b { text-decoration: underline; text-underline-offset: 3px; }
  .ml-name:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 10px; }
  .ml-name-t { display: grid; gap: 2px; min-width: 0; }
  .ml-name-t b { font-weight: 600; color: var(--ink); font-size: var(--fs-small); }
  .ml-name-t small { font-size: var(--fs-micro); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ml-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-inline-size: 180px; font-size: var(--fs-small); }
  .ml-date { white-space: nowrap; font-size: var(--fs-small); }
  .ml-date small { display: block; font-size: var(--fs-micro); color: var(--text-muted); }
  .ml-use { display: inline-flex; padding: 2px 8px; border-radius: 99px; font-size: var(--fs-micro); font-weight: 700; white-space: nowrap; background: var(--surface-2); color: var(--text-muted); }
  .ml-use.is-used { background: var(--success-soft); color: var(--success); }
  .ml-list { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
  .ml-list-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: 60px; border-block-end: 1px solid var(--line); background: var(--surface); }
  .ml-list-row:last-child { border-block-end: 0; }
  .ml-list-row.is-open { background: var(--accent-soft); }
  .ml-list-row .ml-name { max-inline-size: none; flex: 1; }
  .ml-tile-wrap { position: relative; }
  .ml-tile-check { position: absolute; z-index: 2; top: 6px; inset-inline-end: 6px; display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 10px; background: color-mix(in oklab, var(--surface) 85%, transparent); backdrop-filter: blur(6px); opacity: 0; transition: opacity var(--t-fast); cursor: pointer; }
  .ml-tile-wrap:hover .ml-tile-check, .ml-tile-wrap.is-selected .ml-tile-check, .ml-tile-check:focus-within { opacity: 1; }
  .ml-tile-wrap.is-selected .media-tile { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
  @media (hover: none) { .ml-tile-check { opacity: 1; } }
  .ml-replace { border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 12px; }
  .ml-replace > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; font-weight: 600; font-size: var(--fs-small); color: var(--ink); list-style: none; }
  .ml-replace > summary::-webkit-details-marker { display: none; }
  .ml-replace > summary svg { inline-size: 16px; block-size: 16px; }
  .ml-replace[open] { padding-block-end: 12px; }
  .ml-replace[open] > p { margin: 0 0 10px; }
  .ml-replace .mu-drop { padding: 16px 12px; }
  .ml-replace .mu-drop-art { inline-size: 40px; block-size: 40px; border-radius: 12px; }
  .ml-danger { display: grid; gap: 6px; justify-items: start; padding-block-start: 10px; border-block-start: 1px solid var(--line); }
  .ml-danger p { display: flex; gap: 6px; align-items: flex-start; margin: 0; }
  @media (max-width: 1099px) { .ml-hide-md { display: none; } }
  @media (max-width: 640px) {
    .ml-hide-sm { display: none; }
    .ml-body { padding: 0 14px 14px; }
    .ml-bulk { margin-inline: 14px; }
    .ml-toolbar .select { flex: 1 1 calc(50% - 4px); }
    .ml-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .ml-stat { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; }
    .ml-stat b { font-size: 1.05rem; }
    .ml-table td:nth-child(2) { min-width: 0; }
    .ml-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    /* The table becomes stacked rows: name, then the facts that matter most. */
    .ml-table thead { display: none; }
    .ml-table, .ml-table tbody, .ml-table tr, .ml-table td { display: block; }
    .ml-table tr { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px 10px; padding: 12px 10px; border-block-end: 1px solid var(--line); }
    .ml-table td { padding: 0 !important; border: 0 !important; }
    .ml-table td.ml-col-check { grid-row: 1 / span 3; align-self: center; }
    .ml-table td:nth-child(2) { grid-column: 2; }
    .ml-table td.ml-col-act { grid-column: 3; grid-row: 1; }
    .ml-table td.ml-num, .ml-table td:nth-child(5), .ml-table td:nth-child(6), .ml-table td:nth-child(8) { grid-column: 2 / span 2; text-align: start; display: inline-flex; gap: 6px; align-items: center; font-size: var(--fs-micro); }
    .ml-table td.ml-date small { display: inline; }
  }
  :root[data-theme="dark"] .ml-bulk { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line-strong); }
  @media (prefers-reduced-motion: reduce) { .ml-panel { animation: none; } .ml-strip-chev { transition: none; } .ml-recent-card, .ml-tile-check { transition: none; } .ml-recent-card:hover { transform: none; } }
}

/* css/components/console.css */
/* Super Admin console (ADR-0013): a dark "control room" rail, the same calm canvas for work. */
@layer components {
  .console-sidebar { background: radial-gradient(120% 60% at 0% 0%, color-mix(in oklab, var(--lime-400) 16%, transparent), transparent 60%), var(--forest-950); border-radius: 26px; padding: 14px 10px; color: rgb(255 255 255 / .74); box-shadow: 0 30px 60px -30px rgb(4 20 12 / .7); }
  .console-sidebar .brand-mark { color: #fff; }
  .cs-tag { margin-inline-start: 2px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--lime-400); color: var(--forest-950); }
  .console-sidebar .nav-section { color: rgb(255 255 255 / .42); }
  .console-sidebar .nav-item { color: rgb(255 255 255 / .72); }
  .console-sidebar .nav-item:hover { background: rgb(255 255 255 / .07); color: #fff; }
  .console-sidebar .nav-item[aria-current="page"] { background: #fff; color: var(--forest-950); box-shadow: 0 12px 24px -14px rgb(0 0 0 / .8); }
  .console-sidebar .user-chip { color: #fff; background: rgb(255 255 255 / .06); border-color: transparent; }
  .console-sidebar .sidebar-foot { gap: 2px; flex: none; }
  /* The menu scrolls on its own, with a visible scrollbar and a fade when more is below, so nothing is hidden on a
     laptop-height screen; the brand, role and the lock/account foot stay in place. */
  .console-sidebar { overflow: hidden; }
  .console-sidebar .sidebar-brand, .console-sidebar .cs-role { flex: none; }
  .console-sidebar .nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; align-content: start; padding-bottom: 28px; margin-inline-end: -4px; padding-inline-end: 4px;
    scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / .28) transparent;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
  .console-sidebar .nav::-webkit-scrollbar { display: block; width: 6px; }
  .console-sidebar .nav::-webkit-scrollbar-thumb { background: rgb(255 255 255 / .28); border-radius: 6px; }
  @media (max-height: 920px) {
    .console-sidebar .nav-item { height: 33px; }
    .console-sidebar .nav-section { margin-top: 10px; padding-bottom: 4px; }
    .console-sidebar .sidebar-brand { padding-bottom: 8px; }
  }
  .cs-foot-btn { width: 100%; background: none; border: 0; cursor: pointer; font: inherit; }
  .cs-role { display: flex; align-items: center; gap: 10px; margin: 6px 4px 8px; padding: 10px 12px; border-radius: 16px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .08); }
  .cs-role b { display: block; color: #fff; font-size: 13px; }
  .cs-role small { display: block; font-size: 11px; color: rgb(255 255 255 / .5); }
  .cs-role-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--lime-400); box-shadow: 0 0 0 4px color-mix(in oklab, var(--lime-400) 25%, transparent); flex: none; animation: cs-pulse 2.4s var(--ease-out) infinite; }
  @keyframes cs-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in oklab, var(--lime-400) 0%, transparent); } }
  @media (prefers-reduced-motion: reduce) { .cs-role-dot { animation: none; } }
  .cs-crumb-tag { padding: 3px 9px; border-radius: 999px; background: var(--forest-950); color: var(--lime-400); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

  .cs-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-top: 16px; }
  @media (min-width: 1000px) { .cs-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .cs-money { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .cs-money:last-child { border-bottom: 0; }
  .cs-money b { font-family: var(--font-display); font-size: 26px; color: var(--ink); letter-spacing: -.02em; }
  .cs-cur { min-width: 44px; padding: 3px 8px; border-radius: 8px; background: var(--surface-2); font-size: 11px; font-weight: 800; text-align: center; color: var(--text-muted); }
  .cs-health { display: grid; gap: 2px; }
  .cs-health-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-small); min-width: 0; }
  .cs-health-row:last-child { border-bottom: 0; }
  .cs-health-row b { color: var(--ink); text-align: end; overflow-wrap: anywhere; }
  .os-dot.is-danger { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
  .cs-roadmap { display: grid; gap: 4px; }
  @media (min-width: 900px) { .cs-roadmap { grid-template-columns: 1fr 1fr; column-gap: 24px; } }
  .cs-road-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: var(--fs-small); color: var(--text); }
  .cs-road-icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); flex: none; }
  .cs-road-icon svg { width: 17px; height: 17px; }

  .cs-split { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 1100px) { .cs-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } .cs-detail { position: sticky; top: 88px; } .cs-back { display: none; } }
  @media (max-width: 1099px) { .cs-split.has-open .cs-list { display: none; } .cs-split:not(.has-open) .cs-detail { display: none; } }
  .cs-list { padding: 6px; display: grid; gap: 2px; }
  .cs-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 14px; border: 1px solid transparent; background: none; text-align: start; font: inherit; color: var(--text); cursor: pointer; min-width: 0; }
  .cs-row:hover { background: var(--surface-hover); }
  .cs-row.is-open { background: var(--surface-2); border-color: var(--line-strong); }
  .cs-row b { color: var(--ink); font-size: var(--fs-small); }
  .cs-detail { padding: 20px; display: grid; gap: 16px; min-height: 320px; align-content: start; }
  .cs-detail-head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); min-width: 0; }
  .cs-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0; }
  .cs-facts dt { font-size: 12px; color: var(--text-muted); font-weight: 600; }
  .cs-facts dd { margin: 3px 0 0; color: var(--ink); font-weight: 600; font-size: var(--fs-small); }
  .cs-mini-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font-size: var(--fs-small); min-width: 0; }
  .cs-mini-row:hover { border-color: var(--line-strong); }
  .cs-mini-row svg { width: 16px; height: 16px; flex: none; }
  .cs-actions { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); justify-items: start; }
  .cs-actions .field { width: 100%; }
  .cs-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
  .cs-stats div { padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
  .cs-stats b { display: block; font-family: var(--font-display); font-size: 22px; color: var(--ink); }
  .cs-stats small { color: var(--text-muted); font-size: 12px; }

  .cs-mods { display: grid; gap: 8px; }
  @media (min-width: 900px) { .cs-mods { grid-template-columns: 1fr 1fr; } }
  .cs-mod { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); min-width: 0; transition: opacity var(--t-fast), background var(--t-fast); }
  .cs-mod.is-off { background: var(--surface-sunken); }
  .cs-mod.is-off .cs-road-icon, .cs-mod.is-off p { opacity: .55; }
  .cs-switch { position: relative; flex: none; width: 44px; height: 26px; border-radius: 999px; border: 0; padding: 0; background: var(--line-strong); cursor: pointer; transition: background var(--t-fast); }
  .cs-switch span { position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgb(0 0 0 / .25); transition: transform var(--t-fast) var(--ease-out); }
  .cs-switch[aria-checked="true"] { background: var(--accent); }
  .cs-switch[aria-checked="true"] span { transform: translateX(calc(18px * var(--dir-sign, 1))); }
  .cs-switch:focus-visible { outline: none; box-shadow: var(--focus-ring); }

  .cs-pay.is-on { border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent), var(--e1); }
  .cs-pay-head { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
  .cs-pay-head .badge { margin-inline-start: 6px; vertical-align: 2px; }
  .cs-pay-logo { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 20px; flex: none; }
  .cs-pay-paystack { background: linear-gradient(140deg, #0BA4DB, #011B33); }
  .cs-pay-flutterwave { background: linear-gradient(140deg, #F5A623, #FB4E20); }
  .cs-pay-stripe { background: linear-gradient(140deg, #8B7CFF, #533AFD); }
  .cs-pay-paypal { background: linear-gradient(140deg, #009CDE, #003087); } /* R17B */
  .cs-pay-form { padding-top: 14px; border-top: 1px dashed var(--line-strong); }
  .cs-chip { cursor: pointer; }
  .cs-chip:has(input:checked) { background: var(--ink); color: var(--text-on-ink); border-color: var(--ink); }
  .cs-chip:has(input:focus-visible) { box-shadow: var(--focus-ring); }

  .cs-roles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .cs-role-card { padding: 16px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); display: grid; gap: 4px; }
  .cs-role-card b { color: var(--ink); font-family: var(--font-display); font-size: 17px; }
  .cs-role-card small { color: var(--text-muted); font-size: 12.5px; line-height: 1.45; }
  .cs-role-card.is-super_admin { background: var(--forest-950); border-color: transparent; }
  .cs-role-card.is-super_admin b { color: var(--lime-400); }
  .cs-role-card.is-super_admin small { color: rgb(255 255 255 / .7); }
  .cs-add { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); align-items: end; }
  @media (min-width: 720px) { .cs-add { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; } }
  .cs-team { display: grid; }
  .cs-team-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line); min-width: 0; }
  .cs-team-row b { color: var(--ink); font-size: var(--fs-small); }
  .cs-role-select { width: auto; min-width: 128px; height: 36px; }
  @media (max-width: 560px) { .cs-team-row { flex-wrap: wrap; padding: 12px 16px; } .cs-team-row > .grow { flex-basis: calc(100% - 52px) !important; /* R3D: beats the .grow utility layer */ } .cs-role-select { flex: 1; } }

  .cs-audit { padding: 4px 0; }
  .cs-audit-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); min-width: 0; }
  .cs-audit-row:last-of-type { border-bottom: 0; }
  .cs-audit-row b { color: var(--ink); }
  .cs-audit-dot { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--accent); flex: none; }
  .cs-audit-dot.is-warn { background: var(--warning); }
  .cs-props { margin-top: 3px; overflow-wrap: anywhere; }

  .cs-enrol { display: flex; align-items: center; gap: 18px; padding: 16px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; }
  .cs-qr { width: 148px; height: 148px; padding: 8px; border-radius: 14px; background: #fff; flex: none; }
  .cs-qr svg { width: 100%; height: 100%; display: block; }
  .cs-secret { display: block; font-family: var(--font-mono); font-size: 13px; letter-spacing: .06em; color: var(--ink); overflow-wrap: anywhere; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
  .cs-code { font-family: var(--font-mono); font-size: 22px; letter-spacing: .3em; text-align: center; }
  .cs-recovery { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
  .cs-recovery code { font-family: var(--font-mono); font-size: 14px; color: var(--ink); text-align: center; padding: 8px; border-radius: 10px; background: var(--surface-2); }
  .link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-text); font-weight: 600; cursor: pointer; }
  .link-btn:hover { text-decoration: underline; }
}

@layer components {
  .cs-models { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 1000px) { .cs-models { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .cs-model { display: grid; gap: 8px; align-content: start; text-align: start; padding: 18px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); font: inherit; color: var(--text); cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
  .cs-model:hover { border-color: var(--line-strong); transform: translateY(-1px); }
  .cs-model.is-active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--e2); }
  .cs-model b { color: var(--ink); font-family: var(--font-display); font-size: 18px; }
  .cs-model small { color: var(--text-muted); font-size: 13px; line-height: 1.5; }
  .cs-model-top { display: flex; justify-content: space-between; align-items: center; }
  .cs-model-icon { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: var(--forest-950); color: var(--lime-400); }
  .cs-model-icon svg { width: 19px; height: 19px; }
  .cs-model-warn { display: flex; gap: 8px; align-items: flex-start; padding: 9px 11px; border-radius: 12px; background: var(--warning-soft); color: var(--warning); font-size: 12px; font-weight: 600; line-height: 1.4; }
  .cs-model-warn svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
  .cs-rules { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 800px) { .cs-rules { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .cs-pay-sandbox { background: linear-gradient(140deg, #5B6B63, #1D2621); }
  .cs-webhook { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); min-width: 0; }
  .cs-webhook code { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); overflow-wrap: anywhere; }
  .cs-health { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
  .cs-health-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
  .cs-health-item { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; overflow-wrap: anywhere; }
  .cs-health-item > svg { inline-size: 18px; block-size: 18px; margin-block-start: 2px; }
  .cs-health-item.is-ok > svg { color: var(--success); }
  .cs-health-item.is-bad > svg { color: var(--danger); }
}

@layer components {
  .pl-layout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 1200px) { .pl-layout.has-editor { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .pl-editor { position: sticky; top: 88px; max-height: calc(100dvh - 110px); overflow-y: auto; } }
  .pl-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .pl-layout.has-editor .pl-list { grid-template-columns: minmax(0, 1fr); }
  .pl-card { border-radius: 22px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
  .pl-card.is-open { box-shadow: 0 0 0 2px var(--ink); }
  .pl-card.is-muted { opacity: .7; }
  .pl-card-head { padding: 18px; color: #fff; display: grid; gap: 10px; }
  .pl-card-head b, .pl-card-head .pl-price { font-family: var(--font-display); font-size: 1.3rem; color: #fff; }
  .pl-card-head .pl-price { font-size: 1.15rem; }
  .pl-card-head .badge { background: rgb(255 255 255 / .16); color: #fff; border-color: rgb(255 255 255 / .25); }
  .pl-price { font-family: var(--font-display); font-size: 1.15rem; }
  .pl-price small { opacity: .7; font-size: 12px; }
  .pl-card-body { padding: 14px 18px; display: grid; gap: 10px; }
  .pl-prices { display: grid; grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
  .pl-features { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 700px) { .pl-features { grid-template-columns: 1fr 1fr; } }
  .pl-feature { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); min-width: 0; }
}
.cs-comp { padding: 12px 14px; border-radius: 14px; border: 1px dashed var(--line-strong); } .cs-comp summary { cursor: pointer; }

/* ---- Marketing page builder (ADR-0016) ---- */
@layer components {
  .input.is-static { display: flex; align-items: center; color: var(--text-muted); background: var(--surface-sunken); }
  .icon-btn.is-active { background: var(--ink); color: var(--surface); }
  .mb { display: grid; gap: 12px; padding: 12px; }
  .mb-inspector .card-header { flex-wrap: nowrap; gap: 10px; }
  .mb-inspector .card-header > .cluster:last-child { flex-wrap: nowrap; flex: none; }
  .mb-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1); }
  .mb-top-title { display: grid; min-width: 0; flex: 1 1 180px; }
  .mb-top-title b { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: -0.02em; }
  .mb-top-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
  .mb-top .segmented button { padding: 6px 10px; }
  .mb-top .segmented svg { width: 16px; height: 16px; }
  .mb-panes { display: none; }
  .mb-grid { display: grid; grid-template-columns: 250px 380px minmax(0, 1fr); gap: 12px; height: calc(100dvh - 180px); min-height: 560px; }
  .mb-outline, .mb-inspector { overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
  .mb-outline { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
  .mb-outline-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 4px; }
  .mb-sections { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 0; margin: 0; list-style: none; }
  .mb-outline-head .label, .mb-list .label, .field > .label { font-weight: 700; font-size: 13px; color: var(--ink); }
  .mb-sec { display: flex; align-items: center; gap: 2px; border-radius: 14px; border: 1px solid transparent; transition: background var(--t-fast), border-color var(--t-fast); }
  .mb-sec:hover { background: var(--surface-hover); }
  .mb-sec.is-open { background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent) 35%, transparent); }
  .mb-sec.is-hidden .mb-sec-main { opacity: .55; }
  .mb-sec-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px; text-align: start; }
  .mb-sec-main b { display: block; font-size: 13.5px; }
  .mb-sec-main small { display: block; font-size: 12px; color: var(--text-muted); }
  .mb-sec-tools { display: none; padding-inline-end: 4px; }
  .mb-sec:hover .mb-sec-tools, .mb-sec.is-open .mb-sec-tools { display: flex; }
  .mb-sec-tools .icon-btn { width: 26px; height: 26px; }
  .mb-sec-tools svg { width: 14px; height: 14px; }
  .mb-sec-icon { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-sunken); color: var(--ink); }
  .mb-sec-icon svg { width: 16px; height: 16px; }
  .mb-sec-icon.is-lg { width: 40px; height: 40px; border-radius: 12px; background: var(--grad-forest); color: var(--lime-400); }
  .mb-add { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 14px; border: 1.5px dashed var(--line-strong); font-weight: 700; color: var(--text-muted); margin-top: 4px; }
  .mb-add:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
  .mb-add svg { width: 16px; height: 16px; }
  .mb-library { display: grid; gap: 6px; }
  .mb-lib { display: flex; gap: 12px; align-items: flex-start; text-align: start; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
  .mb-lib:hover { border-color: var(--accent); box-shadow: var(--e1); }
  .mb-lib b { display: block; font-size: 13.5px; }
  .mb-lib small { display: block; color: var(--text-muted); font-size: 12px; line-height: 1.45; }
  .mb-inspector { display: flex; flex-direction: column; }
  .mb-inspector .card-body { flex: 1; }
  .mb-publish-note { position: sticky; bottom: 0; padding: 10px 14px; background: var(--surface); border-top: 1px solid var(--line); }
  .mb-code { font-family: var(--font-mono); font-size: 13px; line-height: 1.55; }
  .mb-toggle { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; font-size: 14px; }
  .mb-toggle span { display: grid; gap: 2px; }
  .mb-icon-pick { display: flex; gap: 8px; align-items: center; }
  .mb-icon-now { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-sunken); }
  .mb-icon-now svg { width: 18px; height: 18px; }
  .mb-image { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .mb-image-thumb { width: 64px; height: 48px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--surface-sunken); color: var(--text-subtle); border: 1px solid var(--line); }
  .mb-image-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .mb-image label { cursor: pointer; }
  .mb-list { display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); }
  .mb-item { border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
  .mb-item-bar { display: flex; align-items: center; justify-content: space-between; padding-block: 6px; padding-inline: 12px 6px; border-bottom: 1px solid var(--line); font-size: 13px; }
  .mb-item-bar .icon-btn { width: 28px; height: 28px; }
  .mb-item-bar svg { width: 14px; height: 14px; }
  .mb-item-fields { padding: 12px; display: grid; gap: 12px; }
  .mb-preview { position: relative; min-height: 0; border-radius: 24px; background: var(--surface-sunken); border: 1px solid var(--line); overflow: hidden; display: grid; place-items: stretch; }
  .mb-frame { position: relative; overflow: hidden; }
  .mb-frame.is-desktop iframe { width: 1440px; height: calc(100% / var(--s, 1)); transform: scale(var(--s, 1)); transform-origin: 0 0; border: 0; display: block; background: #fff; }
  [dir="rtl"] .mb-frame.is-desktop iframe { transform-origin: 100% 0; } /* the wide frame hangs from the right edge in right-to-left */
  .mb-frame.is-mobile { display: grid; place-items: center; padding: 16px; }
  .mb-frame.is-mobile iframe { width: 390px; max-width: 100%; height: 100%; border: 10px solid #0B0D0C; border-radius: 42px; background: #fff; box-shadow: var(--e3); }
  .mb-saving { position: absolute; inset-inline-end: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--ink); color: var(--surface); font-size: 12px; font-weight: 700; }
  .mb-saving svg { width: 14px; height: 14px; }
  @media (max-width: 1280px) { .mb-grid { grid-template-columns: 230px 340px minmax(0, 1fr); } }
  @media (max-width: 1100px) {
    .mb-panes { display: flex; width: 100%; }
    .mb-panes button { flex: 1; }
    .mb-grid { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
    .mb-outline, .mb-inspector, .mb-preview { display: none; }
    .mb-outline.is-shown, .mb-inspector.is-shown { display: flex; max-height: none; }
    .mb-preview.is-shown { display: grid; height: calc(100dvh - 200px); min-height: 520px; }
    .mb-sec-tools { display: flex; }
  }
}

/* ---- Marketing site screen ---- */
@layer components {
  .ms-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
  .ms-page { border-radius: 24px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1); display: flex; flex-direction: column; }
  .ms-page-head { display: grid; gap: 6px; padding: 18px; min-height: 130px; align-content: end; color: #fff; }
  .ms-page-head b { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.03em; color: #fff; }
  .ms-page-path { font-size: 12px; opacity: .75; font-weight: 600; }
  .ms-page-count { font-size: 12px; opacity: .7; }
  .ms-page-body { padding: 14px 18px 18px; display: grid; gap: 10px; }
  .ms-link { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr) auto; gap: 8px; align-items: center; }
  .ms-link.is-compact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .ms-link.is-nav { grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, .9fr) auto; }
  .ms-menu { border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; background: var(--surface); }
  .ms-menu > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; list-style: none; }
  .ms-menu > summary::-webkit-details-marker { display: none; }
  .ms-menu > summary svg { width: 18px; height: 18px; flex: none; color: var(--brand, currentColor); }
  .ms-menu[open] > summary { margin-bottom: 4px; }
  .ms-mcard, .ms-mcol { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--surface-2, var(--bg)); border: 1px solid var(--line); }
  .ms-mcard-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
  .ms-mitem { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, .9fr) minmax(0, 1.3fr) minmax(0, .9fr) auto auto; gap: 8px; align-items: center; }
  .ms-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; align-items: start; }
  .ms-starters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ms-starter { display: grid; gap: 4px; padding: 14px; border-radius: 16px; border: 1.5px solid var(--line); cursor: pointer; background: var(--surface); }
  .ms-starter small { color: var(--text-muted); line-height: 1.45; }
  .ms-starter:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--focus-ring); }
  .ms-announce-preview { padding: 18px; border-radius: 18px; background: var(--grad-ink); }
  .ms-announce-preview .mk-announce { max-width: max-content; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding-block: 8px; padding-inline: 16px 8px; border-radius: 999px; font-size: 13.5px; font-weight: 650; }
  .ms-announce-preview .mk-announce a { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 999px; font-weight: 750; }
  .ms-announce-preview svg { width: 14px; height: 14px; }
  .ms-announce-preview .is-ink { background: rgb(12 14 13 / .86); color: #fff; } .ms-announce-preview .is-ink a { background: var(--lime-400); color: var(--forest-950); }
  .ms-announce-preview .is-brand { background: var(--grad-brand); color: var(--forest-950); } .ms-announce-preview .is-brand a { background: rgb(3 23 15 / .9); color: #fff; }
  .ms-announce-preview .is-violet { background: var(--grad-violet); color: #fff; } .ms-announce-preview .is-violet a { background: #fff; color: var(--violet-700); }
  @media (max-width: 640px) {
    .ms-link, .ms-link.is-compact { grid-template-columns: minmax(0, 1fr) auto; }
    .ms-link.is-nav { grid-template-columns: minmax(0, 1fr) auto; } .ms-link.is-nav > :nth-child(3) { grid-column: 1; grid-row: 3; } .ms-link.is-nav > :nth-child(4) { grid-column: 2; grid-row: 1 / span 3; }
    .ms-mcard-row, .ms-mitem { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ms-link > :nth-child(1) { grid-column: 1; grid-row: 1; } .ms-link > :nth-child(2) { grid-column: 1; grid-row: 2; } .ms-link > :nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
    .ms-starters { grid-template-columns: minmax(0, 1fr); }
  }
}

/* ---- Appearance ---- */
@layer components {
  .ap-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px; align-items: start; }
  .ap-preview-wrap { position: sticky; top: 88px; }
  .ap-thumb-logo { width: 120px; }
  .ap-thumb-logo img { object-fit: contain; padding: 6px; }
  .ap-thumb-logo svg { width: 34px; height: 28px; }
  .ap-thumb-favicon { width: 48px; }
  .ap-thumb-favicon img { object-fit: contain; padding: 8px; }
  .ap-palettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .ap-palette, .ap-font { display: grid; gap: 4px; padding: 10px; border-radius: 18px; border: 1.5px solid var(--line); cursor: pointer; background: var(--surface); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
  .ap-palette:has(input:checked), .ap-font:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ink) 14%, transparent); }
  .ap-palette small, .ap-font small { color: var(--text-muted); font-size: 12px; line-height: 1.4; }
  .ap-swatch { height: 70px; border-radius: 12px; display: flex; align-items: flex-end; gap: 5px; padding: 8px; margin-bottom: 4px; }
  .ap-swatch i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .6); }
  .ap-fonts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .ap-font-sample { font-size: 2.4rem; font-weight: 700; letter-spacing: -0.04em; color: var(--ink); line-height: 1.1; }
  .ap-save { position: sticky; bottom: 12px; display: flex; justify-content: flex-end; }
  .ap-preview { border-radius: 28px; background: var(--canvas); border: 1px solid var(--line); padding: 14px; display: grid; gap: 12px; box-shadow: var(--e2); overflow: hidden; }
  .ap-nav { display: flex; align-items: center; gap: 10px; padding-block: 10px; padding-inline: 14px 10px; border-radius: 16px; background: var(--surface); box-shadow: var(--e1); }
  .ap-nav .brand-mark { font-size: 1rem; }
  .ap-nav-links { display: flex; gap: 6px; margin: 0 auto; } .ap-nav-links i { width: 34px; height: 8px; border-radius: 4px; background: var(--line-strong); }
  .ap-hero { border-radius: 22px; padding: 22px; color: #fff; display: grid; gap: 10px; }
  .ap-hero h3 { font-family: var(--font-display); font-size: 1.9rem; line-height: 1.05; letter-spacing: -0.045em; color: #fff; font-weight: 700; }
  .ap-hero h3 em.accent { font-family: var(--font-accent); font-weight: 400; background: linear-gradient(95deg, var(--lime-400), #B9A9FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .ap-hero p { color: rgb(255 255 255 / .72); font-size: 14px; }
  .ap-chip { justify-self: start; padding: 4px 10px; border-radius: 999px; background: rgb(255 255 255 / .12); font-size: 12px; font-weight: 700; }
  .ap-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .ap-card { padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 10px; }
  .ap-card .mk-icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
  .ap-card .mk-icon svg { width: 18px; height: 18px; }
  .ap-bar { height: 8px; border-radius: 4px; background: var(--surface-sunken); overflow: hidden; } .ap-bar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }
  .ap-tab { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px 12px 4px 4px; background: var(--surface); border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; }
  .ap-fav img { width: 16px; height: 16px; display: block; object-fit: contain; }
  @media (max-width: 1100px) { .ap-grid { grid-template-columns: minmax(0, 1fr); } .ap-preview-wrap { position: static; order: -1; } }
  @media (max-width: 640px) { .ap-fonts { grid-template-columns: minmax(0, 1fr); } }
}

/* ---- Support access (ADR-0017) ---- */
@layer components {
  .support-bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 12px; margin: 10px 16px 0; padding-block: 10px; padding-inline: 16px 10px; border-radius: 16px; background: var(--grad-violet); color: #fff; font-size: 14px; box-shadow: var(--e3); }
  .support-bar-dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgb(255 255 255 / .25); animation: pulse 1.6s infinite; flex: none; }
  .support-bar-end { background: #fff; color: var(--violet-700); font-weight: 750; }
  .support-bar-end svg { width: 14px; height: 14px; }
  .imp-bar { background: linear-gradient(135deg, var(--amber-600, #d97706), var(--rose-600, #e11d48)); flex-wrap: wrap; }
  .imp-bar-allow { position: relative; }
  .imp-bar-allow > summary { list-style: none; cursor: pointer; min-height: 36px; }
  .imp-bar-allow > summary::-webkit-details-marker { display: none; }
  .imp-filters { display: flex; padding-inline: 16px; padding-block-end: 12px; flex-wrap: wrap; }
  .imp-filters > .input { inline-size: auto; flex: 0 1 180px; }
  .imp-filters > input.input { flex: 1 1 220px; }
  .imp-settings { padding: 16px; max-inline-size: 480px; }
  .imp-bar-ghost { background: rgb(255 255 255 / .16); color: #fff; border: 1px solid rgb(255 255 255 / .4); }
  .imp-bar-confirm { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: 50; display: grid; gap: 10px; inline-size: min(280px, 80vw); padding: 12px; border-radius: 12px; background: var(--surface); color: var(--text); box-shadow: var(--e3); font-size: 13px; }
  .support-note { display: flex; align-items: center; gap: 10px; margin: 10px 16px 0; padding: 10px 14px; border-radius: 14px; background: var(--assist-soft); color: var(--assist-text); font-size: 14px; font-weight: 600; }
  .support-note.is-pending { background: var(--grad-violet); color: #fff; }
  .support-note.is-danger { background: var(--danger-soft); color: var(--danger); }
  .support-note svg { width: 16px; height: 16px; flex: none; }
  .support-note b { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
  .sa-request { display: flex; align-items: center; gap: 14px; padding: 16px; margin-bottom: 16px; border-radius: 22px; background: var(--surface); border: 1.5px solid var(--violet-300); box-shadow: var(--e2); }
  .sa-request p { margin-top: 4px; color: var(--ink); font-weight: 600; }
  .sa-request-icon { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; }
  .sa-request-icon svg { width: 22px; height: 22px; }
  .sa-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px; align-items: start; }
  .sa-status { border-radius: 26px; padding: 24px; color: #fff; display: grid; gap: 8px; }
  .sa-status h2 { font-family: var(--font-display); font-size: 1.8rem; letter-spacing: -0.04em; color: #fff; }
  .sa-status p { color: rgb(255 255 255 / .74); }
  .sa-status-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / .16); }
  .sa-revoke { background: #fff; color: var(--danger); font-weight: 750; }
  .sa-scopes { display: grid; gap: 8px; }
  .sa-scope { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; padding: 14px; border-radius: 18px; border: 1.5px solid var(--line); cursor: pointer; }
  .sa-scope:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: var(--focus-ring); }
  .sa-scope-icon { grid-row: span 2; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-sunken); color: var(--ink); }
  .sa-scope-icon svg { width: 18px; height: 18px; }
  .sa-scope small { color: var(--text-muted); line-height: 1.45; }
  .cs-support { display: grid; gap: 10px; }
  @media (max-width: 960px) { .sa-grid { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 640px) { .support-bar { margin: 8px; flex-wrap: wrap; } .sa-request { flex-wrap: wrap; } }
}

/* ---- Moderation (ADR-0017) ---- */
@layer components {
  .md-count { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--surface-sunken); color: var(--ink); }
  .md-count.is-hot { background: var(--grad-sunset); color: #fff; }
  .md-icon { flex: none; width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; color: #fff; }
  .md-icon svg { width: 22px; height: 22px; }
  .md-reports { display: grid; gap: 8px; }
  .md-report { padding: 12px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); display: grid; gap: 4px; font-size: 14px; }
  .md-report p { color: var(--text); line-height: 1.5; overflow-wrap: anywhere; }
  .md-action { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
  .md-appeal { padding: 12px 14px; border-radius: 14px; background: var(--assist-soft); font-size: 14px; }
  .md-appeal p { margin-top: 4px; color: var(--ink); overflow-wrap: anywhere; }
  .notice-card { border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1); overflow: hidden; }
  .notice-head { display: flex; gap: 14px; align-items: center; padding: 18px; background: var(--danger-soft); }
  .notice-head.is-lifted { background: var(--accent-soft); }
  .notice-head .md-icon { width: 44px; height: 44px; }
  .notice-body { padding: 18px; display: grid; gap: 12px; }
}

/* ---- Account & security (ADR-0018) ---- */
@layer components {
  .ac-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px; align-items: start; }
  .ac-enrol { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: center; }
  .ac-enrol .cs-qr { width: 180px; padding: 10px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
  .ac-codes { padding: 16px; border-radius: 18px; background: var(--heat-soft); display: grid; gap: 12px; }
  .ac-codes ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; padding-inline-start: 1.4em; list-style: decimal; font-family: var(--font-mono); }
  .tfa-input { font-family: var(--font-mono); letter-spacing: .2em; font-size: 1.15rem; }
  @media (max-width: 960px) { .ac-grid { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 520px) { .ac-enrol { grid-template-columns: minmax(0, 1fr); justify-items: start; } }
}
@layer components {
  .sc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .sc-wide { grid-column: 1 / -1; }
  .sc-save { grid-column: 1 / -1; position: sticky; bottom: 12px; display: flex; justify-content: flex-end; }
  @media (max-width: 960px) { .sc-grid { grid-template-columns: minmax(0, 1fr); } }
}

/* ---- Overview (ADR-0018) ---- */
@layer components {
  .ov-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .ov-grid > .ov-wide:first-child { grid-column: span 1; }
  @media (min-width: 1100px) { .ov-grid:has(.ov-wide) { grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr); } .ov-grid:has(.ov-wide:last-child) { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); } }
  .ov-row { transition: background var(--t-fast); }
  a.ov-row:hover { background: var(--surface-hover); }
  .ov-hot { background: var(--heat-soft); color: var(--heat); }
  .ov-count { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -0.03em; color: var(--ink); }
  @media (max-width: 960px) { .ov-grid { grid-template-columns: minmax(0, 1fr); } }
}
@layer components { .ac-grid .grid-2, .sc-grid .grid-2 { align-items: start; } }

/* Why people leave (ADR-0030) */
@layer components {
  .exit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
  .exit-quote { margin: 0; padding: 12px 14px; border-inline-start: 3px solid var(--accent); background: var(--surface-2); border-radius: 0; border-start-end-radius: var(--r-md); border-end-end-radius: var(--r-md); }
  .exit-quote p { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
  .exit-quote small { display: block; margin-top: 4px; font-size: 12px; }
  @media (max-width: 900px) { .exit-grid { grid-template-columns: 1fr; } }
}

/* Console → Migration centre (ADR-0051) */
@layer components {
  .mg-top { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 1000px) { .mg-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .mg-gates { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .mg-gates li { display: flex; gap: 10px; align-items: flex-start; }
  .mg-gates li > svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--muted); }
  .mg-gates li.is-ok > svg { color: var(--accent); }
  .mg-gates b { display: block; font-size: 14px; }
  .mg-gates small { display: block; font-size: 12px; }
  .mg-bad { color: var(--danger); }
  .mg-legacy { display: flex; gap: 6px; align-items: center; }
  .mg-legacy svg { width: 16px; height: 16px; flex: none; }
  .mg-kinds { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .mg-kind { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; }
  .mg-kind:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
  .mg-kind input { margin-top: 3px; accent-color: var(--accent); }
  .mg-kind b { display: block; font-size: 14px; }
  .mg-kind small { display: block; font-size: 12px; }
  .mg-table { width: 100%; font-size: 13px; }
  .mg-table th[scope="row"] { text-transform: capitalize; font-weight: 600; white-space: nowrap; }
  .mg-table tr.is-off td, .mg-table tr.is-off th { color: var(--danger); }
  .mg-detail { overflow-wrap: anywhere; max-width: 32ch; }
  .mg-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; }
  .mg-list li { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
  .mg-reasons .badge { text-transform: none; }
  .mg-steps { margin: 0; padding-inline-start: 20px; display: grid; gap: 4px; }
}

/* ==== C1 · R — Staff & roles: role cards, permission matrix, role editor ==== */
@layer components {
  .cs-tab-count { display: inline-block; margin-inline-start: 4px; font-size: var(--fs-micro); color: var(--text-muted); }
  .cs-rcards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
  .cs-rcard { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--e1); min-width: 0; }
  .cs-rcard-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
  .cs-rcard-head b { color: var(--ink); font-family: var(--font-display); font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cs-rcard-desc { margin: 0; color: var(--text-muted); font-size: var(--fs-small); line-height: 1.45; }
  .cs-rcard-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-micro); color: var(--text-muted); }
  .cs-rcard-meta span { display: inline-flex; align-items: center; gap: 5px; }
  .cs-rcard-meta svg { width: 14px; height: 14px; }
  .cs-rcard-bar { height: 6px; border-radius: var(--r-pill); background: var(--surface-sunken); overflow: hidden; }
  .cs-rcard-bar span { display: block; block-size: 100%; inline-size: var(--pct, 0%); border-radius: inherit; background: var(--accent); transition: inline-size var(--t-fast, .2s) var(--ease-out); }
  .cs-rcard-actions { display: flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 4px; }
  .cs-rcard-actions .btn { margin-inline-end: auto; }
  .cs-rcard-lock { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: auto; }
  .cs-rcard-lock svg { width: 14px; height: 14px; }
  .cs-rcard.is-super { background: var(--forest-950); border-color: transparent; }
  .cs-rcard.is-super .cs-rcard-head b { color: var(--lime-400); }
  .cs-rcard.is-super .cs-rcard-desc, .cs-rcard.is-super .cs-rcard-meta, .cs-rcard.is-super .cs-rcard-lock { color: rgb(255 255 255 / .7); }
  .cs-rcard.is-super .cs-rcard-bar { background: rgb(255 255 255 / .12); }
  .cs-rcard.is-super .cs-rcard-bar span { background: var(--lime-400); }

  .cs-matrix-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
  .cs-matrix { border-collapse: separate; border-spacing: 0; min-width: 100%; }
  .cs-matrix thead th { position: sticky; top: 0; z-index: 1; }
  .cs-matrix th[scope="row"], .cs-matrix thead th:first-child { position: sticky; inset-inline-start: 0; z-index: 2; background: var(--surface); min-width: 240px; max-width: 340px; text-align: start; font-weight: 400; }
  .cs-matrix thead th:first-child { background: var(--surface-2); z-index: 3; }
  .cs-matrix th[scope="row"] b { display: block; color: var(--ink); font-size: var(--fs-small); font-weight: 600; }
  .cs-matrix th[scope="row"] small { display: block; color: var(--text-muted); font-size: var(--fs-micro); line-height: 1.4; white-space: normal; }
  .cs-matrix-role { text-align: center !important; min-width: 96px; }
  .cs-matrix-area th { background: var(--surface-sunken); color: var(--text-muted); font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; text-align: start; padding: 8px 14px; }
  .cs-matrix-cell { text-align: center; }
  .cs-tick { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); }
  .cs-tick svg { width: 14px; height: 14px; }
  .cs-nontick { color: var(--text-subtle); }

  .cs-perm-groups { display: grid; gap: 14px; }
  .cs-perm-group { margin: 0; padding: 0; border: 0; display: grid; gap: 2px; }
  .cs-perm-group legend { padding: 0 0 6px; font-size: var(--fs-micro); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
  .cs-perm { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); cursor: pointer; transition: background var(--t-instant); }
  .cs-perm:hover { background: var(--surface-2); }
  .cs-perm input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
  .cs-perm > span:not(.badge) { flex: 1; min-width: 0; }
  .cs-perm b { display: block; color: var(--ink); font-size: var(--fs-small); font-weight: 600; }
  .cs-perm small { display: block; color: var(--text-muted); font-size: var(--fs-micro); line-height: 1.45; }
  .cs-perm.is-locked { cursor: not-allowed; opacity: .7; }
  .cs-perm.is-locked:hover { background: none; }
  .cs-perm .badge svg { width: 11px; height: 11px; }
}

/* ==== C1 · L — Console list engine: toolbar, filter popovers, chips, sortable headers, selection, bulk bar, saved views ==== */
@layer components {
  .lst-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
  .lst-presets .segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .lst-toolbar { gap: 8px; margin-bottom: 10px; }
  .lst-toolbar .lst-search { min-width: min(260px, 100%); }
  .lst-tool { gap: 6px; white-space: nowrap; }
  .lst-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill); background: var(--ink); color: var(--text-on-ink); font-size: 11px; font-weight: 600; }
  .lst-size { width: auto; height: 32px; font-size: var(--fs-small); }
  .lst-view-name { max-width: 16ch; }
  .lst-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warning); flex: none; }

  /* Popovers (filters, columns, saved views): stay open while you work in them. */
  .lst-pop-wrap { position: relative; }
  .lst-pop { position: absolute; z-index: 40; inset-block-start: calc(100% + 6px); inset-inline-start: 0; width: min(360px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow: auto; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--e2); }
  .lst-views { inset-inline-start: auto; inset-inline-end: 0; width: min(380px, calc(100vw - 32px)); padding: 6px; }
  .lst-filters { display: grid; gap: 12px; }
  .lst-filter { display: grid; gap: 6px; }
  .lst-filter-label { font-size: var(--fs-micro); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
  .lst-filter .select, .lst-filter .input { height: 34px; }
  .lst-opts { display: flex; flex-wrap: wrap; gap: 6px; }
  .lst-opts .chip { height: 28px; padding: 0 10px; cursor: pointer; }
  .lst-dates { display: flex; align-items: center; gap: 6px; }
  .lst-dates .input { flex: 1 1 0; min-width: 0; }
  .lst-pop-foot { display: flex; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--line); }
  .lst-cols { display: grid; gap: 8px; width: min(240px, calc(100vw - 32px)); }

  /* Saved views */
  .lst-view-list { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 2px; }
  .lst-view { display: flex; align-items: center; gap: 2px; border-radius: 8px; padding-inline-end: 2px; }
  .lst-view:hover, .lst-view.is-active { background: var(--surface-hover); }
  .lst-view.is-active .lst-view-apply b { color: var(--accent-text); }
  .lst-view-apply { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; padding: 7px 10px; border: 0; background: none; font: inherit; color: var(--text); text-align: start; cursor: pointer; }
  .lst-view-apply b { font-size: var(--fs-small); color: var(--ink); }
  .lst-view-apply small { font-size: var(--fs-micro); }
  .lst-view .icon-btn { width: 28px; height: 28px; flex: none; }
  .lst-view .icon-btn svg { width: 15px; height: 15px; }
  .lst-star svg { color: var(--text-subtle); }
  .lst-star.is-on svg { color: var(--warning); fill: currentColor; }
  .lst-save { display: grid; gap: 8px; padding: 6px 4px 4px; }
  .lst-save-row { --gap: 6px; flex-wrap: nowrap; }
  .lst-save-row .input { height: 32px; min-width: 0; }

  /* Active filters */
  .lst-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -2px 0 12px; }
  .lst-chip { height: 28px; padding-inline: 10px 4px; font-weight: 500; }
  .lst-matches { margin-inline-start: auto; font-size: var(--fs-small); }

  /* Table: selection column, sortable headers, clickable rows */
  .lst-card { padding: 0; gap: 0; overflow: visible; }
  .lst-card > .table-wrap, .lst-card .lst-wrap { border: 0; border-radius: inherit; }
  .lst-table th.lst-check, .lst-table td.lst-check { width: 40px; padding-inline: 14px 4px; }
  .lst-table td.lst-check .check, .lst-table th.lst-check .check { vertical-align: middle; }
  .lst-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
  .lst-sort svg { width: 12px; height: 12px; opacity: .55; }
  .lst-sort:hover, .lst-sort.is-on { color: var(--ink); }
  .lst-sort.is-on svg { opacity: 1; }
  .lst-sortbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: var(--fs-small); color: var(--text-muted); }
  .lst-table td.lst-main { min-width: 200px; max-width: 360px; }
  .lst-row-open { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: start; cursor: pointer; }
  .lst-row-text { display: grid; min-width: 0; }
  .lst-row-text b { color: var(--ink); font-size: var(--fs-small); }
  .lst-row-text small { font-size: var(--fs-micro); }
  .lst-table tr.is-open > td { background: var(--surface-2); }
  .lst-table tr.is-open > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
  [dir="rtl"] .lst-table tr.is-open > td:first-child { box-shadow: inset -3px 0 0 var(--accent); }
  .lst-owner { max-width: 200px; }

  /* Bulk bar: sticks under the top bar while you scroll the list */
  .lst-bulk { position: sticky; inset-block-start: calc(var(--topbar-h, 64px) + 8px); z-index: 6; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 8px; padding: 8px; padding-inline: 14px 10px; border: 1px solid var(--accent); border-radius: var(--r-md); background: var(--accent-soft); box-shadow: var(--e1); }
  .lst-bulk-count { font-weight: 600; color: var(--ink); font-size: var(--fs-small); }
  .lst-bulk-actions { --gap: 6px; margin-inline-start: auto; }

  @media (max-width: 640px) {
    .lst-toolbar .lst-search { flex: 1 1 100%; }
    .lst-tool .btn-label { display: none; }
    .lst-bulk-actions { margin-inline-start: 0; }
    .lst-matches { flex-basis: 100%; margin-inline-start: 0; }
  }
}
/* C1 · R (review): warning badges on money / email / AI permissions */
@layer components {
  .cs-matrix-warn { margin-top: 4px; }
  .cs-perm .badge-warning { flex: none; align-self: center; }
}

/* C1 · role matrix rows read as sentences, not table-header caps */
.cs-matrix tbody th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm, 13px); font-weight: 400; color: var(--text); text-align: start; }
.cs-matrix tbody th[scope="row"] b { display: block; font-weight: 600; }
.cs-matrix tbody th[scope="row"] small { display: block; margin-block-start: 2px; color: var(--text-muted); font-size: var(--fs-micro, 12px); }

/* ==== C2 · S — SMS (provider, countries, log) and notification defaults ==== */
@layer components {
  .sms-countries { display: grid; gap: 4px 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); max-block-size: 320px; overflow-y: auto; padding-inline-end: 4px; }
  .sms-country { display: flex; align-items: center; gap: 8px; min-width: 0; padding-block: 6px; font-size: var(--fs-small); color: var(--text); cursor: pointer; }
  .sms-country small { flex: none; }
  .sms-to { white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
  .sms-error { max-inline-size: 280px; }
  .sms-measure { font-variant-numeric: tabular-nums; }
  .nd-changed { color: var(--accent); font-weight: 600; }
  /* a channel a kind doesn't use: same width as a switch so the columns stay lined up (account settings too) */
  .nb-toggle-none > span[aria-hidden] { display: inline-block; inline-size: 36px; text-align: center; }
}

/* C2 · P — Console → Communications → Email users (ADR-0062) */
@layer components {
  .pm-ico { display: inline-grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 10px; flex: none; }
  .pm-ico svg { inline-size: 16px; block-size: 16px; }
  .pm-status.is-sent { background: var(--accent-soft); color: var(--ink); }
  .pm-status.is-sending, .pm-status.is-scheduled { background: var(--surface-2); color: var(--ink); }
  .pm-status.is-cancelled { opacity: .7; }
  .pm-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 20px; align-items: start; }
  .pm-side { position: sticky; inset-block-start: calc(var(--topbar-h, 64px) + 12px); }
  .pm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-block-end: 16px; }
  .pm-kinds { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; }
  .pm-kind { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); cursor: pointer; }
  .pm-kind:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
  .pm-kind span { display: grid; gap: 2px; }
  .pm-kind small { font-size: var(--fs-micro); }
  .pm-tabs { max-inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
  .pm-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; border: 0; padding: 0; margin: 0; }
  .pm-checks legend { inline-size: 100%; margin-block-end: 4px; }
  .pm-count { font-size: 28px; font-weight: 700; color: var(--ink); margin: 0; }
  .pm-count.is-refreshing { opacity: .5; }
  .pm-sample, .pm-reasons, .pm-describe { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .pm-sample li { display: grid; min-inline-size: 0; font-size: var(--fs-small); }
  .pm-reasons li { display: flex; gap: 12px; font-size: var(--fs-small); }
  .pm-describe li { font-size: var(--fs-small); padding-inline-start: 14px; position: relative; }
  .pm-describe li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .6em; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--accent); }
  .pm-preview { overflow: hidden; }
  .pm-preview-subject { margin: 0; padding: 12px 16px; border-block-end: 1px solid var(--line); font-size: var(--fs-small); color: var(--ink); overflow-wrap: anywhere; }
  .pm-preview-subject small { display: block; }
  .pm-preview-body { padding: 16px; text-align: start; overflow-wrap: anywhere; }
  .pm-preview-body h3 { margin: 0 0 12px; font-size: 18px; color: var(--ink); }
  .pm-preview-body p { color: var(--text) !important; }
  .pm-preview-btn { pointer-events: none; }
  .pm-when { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; cursor: pointer; }
  @media (max-width: 960px) {
    .pm-grid { grid-template-columns: minmax(0, 1fr); }
    .pm-side { position: static; }
    .pm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}

/* ==== C2 · D — Sent mail, suppression list, deliverability (ADR-0062) ==== */
@layer components {
  .ml-subject { max-inline-size: 280px; }
  .ml-subject .truncate, .sp-detail .truncate { display: block; }
  .sp-detail { max-inline-size: 260px; }
  .ml-detail-icon { display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: var(--r-md); flex: none; }
  .ml-headers { display: grid; gap: 6px; margin: 0; font-size: var(--fs-small); }
  .ml-headers > div { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 8px; }
  .ml-headers dt { color: var(--text-muted); font-family: var(--font-mono, monospace); font-size: var(--fs-micro); }
  .ml-headers dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; text-align: start; }

  .dlv-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .dlv-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .dlv-check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); border-inline-start-width: 3px; }
  .dlv-check > svg { flex: none; margin-block-start: 2px; }
  .dlv-check.is-ok { border-inline-start-color: var(--accent); }
  .dlv-check.is-ok > svg { color: var(--accent); }
  .dlv-check.is-warn { border-inline-start-color: var(--warning); background: var(--warning-soft); }
  .dlv-check.is-warn > svg { color: var(--warning); }
  .dlv-check.is-fail { border-inline-start-color: var(--danger); background: var(--danger-soft); }
  .dlv-check.is-fail > svg { color: var(--danger); }
  .dlv-check p { margin: 0; overflow-wrap: anywhere; }
  .dlv-fix { margin-block-start: 4px !important; color: var(--ink); }
  .dlv-selectors { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
  .dlv-selectors .field { flex: 1 1 260px; margin: 0; }
  .dlv-hook { display: grid; gap: 8px; padding-block-end: 16px; border-block-end: 1px solid var(--line); }
  .dlv-hook:last-of-type { border-block-end: 0; padding-block-end: 0; }
  .dlv-hook-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .dlv-hook p { margin: 0; }
  .dlv-url { display: flex; align-items: center; gap: 6px; min-inline-size: 0; padding: 6px 6px; padding-inline-start: 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
  .dlv-url code { flex: 1 1 auto; min-inline-size: 0; font-size: var(--fs-micro); color: var(--ink); text-align: start; }
  .dlv-secret { display: grid; gap: 8px; }

  @media (max-width: 800px) {
    .dlv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ml-headers > div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  }
}

/* ==== C2 · T — Email templates: list and editor with live preview (ADR-0062) ==== */
@layer components {
  .et-icon { display: inline-grid; place-items: center; flex: none; inline-size: 32px; block-size: 32px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text); }
  .et-langs { display: inline-flex; flex-wrap: wrap; gap: 4px; }
  .et-back { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
  .et-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }
  .et-key { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted); }
  .et-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .et-form { display: grid; gap: 14px; padding: 20px; }
  .et-form .field { margin: 0; }
  .et-lang { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; padding-block-end: 14px; border-block-end: 1px solid var(--line); }
  .et-lang .field { flex: 1 1 240px; }
  .et-status { display: flex; flex-wrap: wrap; gap: 6px; padding-block-end: 6px; }
  .et-body { min-block-size: 140px; resize: vertical; line-height: 1.55; }
  .et-vars { display: grid; gap: 6px; }
  .et-vars .field-hint { margin: 0; }
  .et-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .et-chip { cursor: pointer; height: 28px; padding: 0 10px; }
  .et-chip code { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink); }
  .et-chip small { color: var(--text-muted); font-weight: 500; }
  .et-chip.is-needed { border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); background: var(--accent-soft); }
  .et-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block-start: 14px; border-block-start: 1px solid var(--line); }
  .et-preview { position: sticky; inset-block-start: calc(var(--topbar-h, 56px) + 12px); display: grid; overflow: hidden; }
  .et-preview-head { display: grid; gap: 2px; padding: 14px 18px; border-block-end: 1px solid var(--line); background: var(--surface-2); }
  .et-subject { overflow-wrap: anywhere; color: var(--ink); }
  /* The email itself is drawn by its own inline styles, on its own background, like an inbox would. */
  .et-frame { inline-size: 100%; block-size: min(78vh, 900px); border: 0; background: var(--surface-sunken); }

  @media (max-width: 1100px) {
    .et-editor { grid-template-columns: minmax(0, 1fr); }
    .et-preview { position: static; }
    .et-frame { block-size: 640px; }
  }
}

/* ==== C2 · T — SMS templates in the same editor (ADR-0062) ==== */
@layer components {
  .et-sms { display: grid; gap: 10px; padding: 18px; }
  .et-sms-bubble { margin: 0; justify-self: start; max-inline-size: 36ch; padding: 12px 14px; border-radius: 18px; border-end-start-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
  .et-sms-count { margin: 0; }
  .et-sms-test { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding-block-start: 12px; border-block-start: 1px solid var(--line); }
  .et-sms-test .field { flex: 1 1 200px; margin: 0; }
}

/* C2 · icon sizes in the deliverability checks and the template editor's back link */
.dlv-check > svg { inline-size: 18px; block-size: 18px; }
.et-back svg { inline-size: 16px; block-size: 16px; flex: none; }

/* C3 · staff notes panel (ADR-0063) */
.sn-panel { display: grid; gap: 10px; }
.sn-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-sm, 14px); font-weight: 600; }
.sn-title svg { inline-size: 16px; block-size: 16px; }
.sn-title small { font-weight: 400; font-size: var(--fs-micro, 12px); }
.sn-form { display: grid; gap: 8px; justify-items: start; }
.sn-form textarea { inline-size: 100%; }
.sn-note { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.sn-note.is-pinned { border-inline-start: 3px solid var(--accent); }
.sn-body { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.sn-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin-block-start: 6px; font-size: var(--fs-micro, 12px); color: var(--text-muted); }
.sn-actions { display: inline-flex; gap: 4px; }

/* ==== C3 · U — Users detail panel: tabs, inline edit rows, devices, activity log, data and closure ==== */
@layer components {
  .ud-tabs { margin-block-start: -4px; }
  .ud-panel { display: grid; gap: 14px; min-inline-size: 0; }
  .ud-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
  .ud-row .field { margin: 0; flex: 1 1 180px; min-inline-size: 0; }
  .ud-row-center { align-items: center; }
  .ud-center { text-align: center; }
  .ud-span { grid-column: 1 / -1; }
  .ud-span dd { display: flex; flex-wrap: wrap; gap: 6px; }
  .ud-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .ud-actions svg { inline-size: 14px; block-size: 14px; }
  .ud-cell { display: grid; min-inline-size: 0; }
  .ud-cell small { font-size: var(--fs-micro); }
  .ud-danger { display: grid; gap: 10px; padding-block-start: 14px; border-block-start: 1px solid var(--line); }
  .ud-list { margin: 4px 0 0; padding-inline-start: 18px; }
  .ud-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .ud-log > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 8px 10px; border-radius: var(--r-md); }
  .ud-log > li:nth-child(odd) { background: var(--surface-2); }
  .ud-action { font-size: var(--fs-micro); color: var(--ink); overflow-wrap: anywhere; }
  .ud-why { flex-basis: 100%; color: var(--text-muted); overflow-wrap: anywhere; }
}

/* C3 · V — staff invitations and per-person extra permissions (ADR-0063) */
.cs-invite-extras { margin-block-start: 14px; padding-block-start: 12px; border-block-start: 1px solid var(--line); }
.cs-invite-extras > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; cursor: pointer; font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.cs-invite-extras > summary .optional { font-weight: 400; color: var(--text-muted); }
.cs-invite-extras[open] > summary { margin-block-end: 10px; }
.cs-invite-extras .field { margin-block-start: 12px; }
.cs-inv-error { margin: 0; padding-inline: 20px; padding-block-end: 10px; }
.cs-last-active { flex: none; white-space: nowrap; font-size: var(--fs-micro); }
.cs-extras-on { color: var(--accent); }
.cs-team-row .btn svg { inline-size: 14px; block-size: 14px; }
.cs-extra-meta { margin-block-start: 4px; color: var(--accent) !important; overflow-wrap: anywhere; }
.cs-extras-foot { display: grid; gap: 12px; margin-block-start: 14px; padding-block-start: 12px; border-block-start: 1px solid var(--line); }
@media (min-width: 720px) { .cs-extras-foot { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; } }

/* ==== C3 · W — Workspace detail: tabs, facts, members, usage and overrides, activity (ADR-0063) ==== */
.wsd-tabs { margin-block-start: -4px; }
.wsd-panel { display: grid; gap: 14px; min-inline-size: 0; }
.wsd-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 16px; margin: 0; }
.wsd-facts > div { min-inline-size: 0; }
.wsd-facts dt { font-size: var(--fs-micro); color: var(--text-muted); }
.wsd-facts dd { margin: 2px 0 0; font-size: var(--fs-small); overflow-wrap: anywhere; }
.wsd-money + .wsd-money::before { content: " · "; color: var(--text-subtle); }
.wsd-section { display: grid; gap: 10px; padding-block-start: 14px; border-block-start: 1px solid var(--line); }
.wsd-h { margin: 0; font-size: var(--fs-small); font-weight: 600; }
.wsd-danger { padding: 12px 14px; border: 1px solid var(--line); border-inline-start: 3px solid var(--danger); border-radius: 12px; background: var(--surface-2); }
.wsd-danger summary { cursor: pointer; }
.wsd-list { margin: 4px 0 0; padding-inline-start: 18px; }
.wsd-members, .wsd-limits, .wsd-activity { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wsd-member { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.wsd-member-who { display: grid; min-inline-size: 0; }
.wsd-badges { gap: 4px; margin-block-start: 4px; }
.wsd-member-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wsd-member-actions .select { inline-size: auto; min-inline-size: 120px; }
.wsd-limit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.wsd-limit-name { display: grid; min-inline-size: 0; font-size: var(--fs-small); }
.wsd-limit-name small { font-size: var(--fs-micro); }
.wsd-limit-value { font-size: var(--fs-small); text-align: end; }
.wsd-limit-bar, .wsd-limit-ov { grid-column: 1 / -1; }
.wsd-limit-ov { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wsd-limit-ov small { overflow-wrap: anywhere; }
.wsd-activity li { display: grid; gap: 2px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-inline-size: 0; }
.wsd-action { font-family: var(--font-mono); font-size: var(--fs-micro); overflow-wrap: anywhere; }
.wsd-reason { color: var(--text); overflow-wrap: anywhere; }

/* ==== C4 · O — Orders: per-currency totals, order lines (ADR-0064) ==== */
.od-kpis { padding: 4px 0; margin-block-end: 16px; }
.od-kpi-table th[scope="row"] { font-weight: 600; }
.od-kpi-table small { display: block; font-size: var(--fs-micro); }
.od-kpi-empty { margin: 0; padding: 12px 16px; }
.od-item { max-inline-size: 220px; }
.od-lines tfoot th { font-weight: 400; text-align: start; }
.od-lines tfoot tr:first-child > * { border-block-start: 1px solid var(--line); }
.od-lines small { font-size: var(--fs-micro); }

/* ==== C4 · L — Wallets, payouts and finance (ADR-0064) ==== */
.wal-bal { display: grid; justify-items: end; gap: 1px; }
.wal-bal + .wal-bal { margin-block-start: 4px; }
.wal-bal small { font-size: var(--fs-micro); }
.wal-neg { color: var(--danger); }
.wal-balances { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.wal-bal-card { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); min-inline-size: 0; }
.wal-cur { font-weight: 700; font-size: var(--fs-small); letter-spacing: .04em; }
.wal-ledger-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.wal-ledger-tools .select, .wal-ledger-tools .input { inline-size: auto; min-inline-size: 140px; flex: 1 1 140px; }
.wal-ledger td { vertical-align: top; }
.wal-ledger small { display: block; font-size: var(--fs-micro); }
.wal-desc { overflow-wrap: anywhere; }
.fin-tools { flex-wrap: wrap; align-items: center; gap: 10px; }
.fin-select { inline-size: auto; min-inline-size: 160px; }
.fin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 16px; margin-block-end: 16px; }
.fin-card { min-inline-size: 0; }
.fin-table th[scope="row"] { font-weight: 500; text-align: start; }
.fin-liab { display: grid; gap: 8px; padding: 12px 16px; border-block-start: 1px solid var(--line); }
.fin-liab-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: var(--fs-small); }
.fin-chart { margin-block-end: 16px; }
.fin-chart .card-header { flex-wrap: wrap; gap: 10px; }
.fin-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; padding: 0 16px 16px; color: var(--accent); }
.fin-files { padding: 0 16px 16px; }

/* ==== C4 · B — Subscriptions, invoices, plan coupons, dunning (ADR-0064) ==== */
.bil-sum { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 14px 18px; margin-block-end: 16px; }
.bil-sum-cell { display: grid; gap: 1px; min-inline-size: 140px; }
.bil-sum-cell b { font-size: var(--fs-h3, 1.15rem); }
.bil-sum-cell small { font-size: var(--fs-micro); }
.bil-sum-empty { margin: 0; }
.bil-icon { display: grid; place-items: center; inline-size: 44px; block-size: 44px; border-radius: 14px; flex: none; }
.bil-form { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.bil-inv { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); min-inline-size: 0; }
.bil-lines { inline-size: 100%; }
.bil-lines th { font-weight: 400; text-align: start; }
.bil-lines .bil-num { text-align: end; white-space: nowrap; }
.bil-lines tfoot tr:first-child > * { border-block-start: 1px solid var(--line); }
.bil-lines .bil-total > * { font-weight: 700; }
.bil-amounts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.bil-steps { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-inline-size: 0; }
.bil-steps .checkbox-row .grow { min-inline-size: 0; }
/* R3C: the applied-code summary. Its icon is sized (an unsized inline SVG grows to 300px and squeezes the text into a column). */
.bl-coupon { margin-block-end: 14px; }
.bl-coupon-on { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; margin: 0; padding: 14px 16px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--accent-text) 22%, transparent); background: var(--accent-soft); color: var(--text); }
.bl-coupon-icon { display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 12px; background: var(--surface); color: var(--accent-text); flex: none; }
.bl-coupon-icon svg { inline-size: 20px; block-size: 20px; }
.bl-coupon-body { display: grid; gap: 4px; min-inline-size: 0; overflow-wrap: anywhere; }
.bl-coupon-body p { margin: 0; }
.bl-coupon-head { font-size: var(--fs-small, 14px); color: var(--accent-text); }
.bl-coupon-head b { font-family: var(--font-mono, ui-monospace, monospace); letter-spacing: .04em; color: var(--ink); }
.bl-coupon-gives { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--ink); }
.bl-coupon-terms { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 2px 0 0; font-size: var(--fs-small, 14px); }
.bl-coupon-terms div { display: flex; gap: 6px; min-inline-size: 0; }
.bl-coupon-terms dt { color: var(--text-muted); }
.bl-coupon-terms dd { margin: 0; color: var(--ink); font-weight: 600; }
.bl-coupon-notes { font-size: var(--fs-micro, 12px); color: var(--text-muted); }
.bl-coupon-remove { align-self: start; min-block-size: 36px; }
@media (max-width: 520px) {
  .bl-coupon-on { grid-template-columns: auto minmax(0, 1fr); }
  .bl-coupon-remove { grid-column: 1 / -1; justify-self: end; }
}
.bl-deal { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.4; }
.bl-deal svg { inline-size: 16px; block-size: 16px; flex: none; margin-block-start: 1px; }
.bl-deal.is-ok { background: var(--accent-soft); color: var(--accent-text); }
.bl-deal.is-ok b { color: var(--ink); }
.bl-deal.is-ok s { color: var(--text-muted); }
.bl-deal.is-off { background: var(--surface-2); color: var(--text-muted); }
.bl-coupon-form { max-inline-size: 420px; }

/* ==== C5 · M — Moderation depth: list tabs, reasons, rules, offenders (ADR-0017) ==== */
.md-tabs { flex-wrap: wrap; }
.md-tab-count { opacity: .6; }
.md-rules { display: grid; gap: 16px; }
.md-inline-form { align-items: flex-end; gap: 12px; }
.md-num { inline-size: 110px; }
.md-reason-form { border-block-end: 1px solid var(--line); }
.md-reason-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 640px) { .md-reason-grid { grid-template-columns: minmax(0, 1fr); } }
.md-clip { max-inline-size: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-row-actions { white-space: nowrap; }
.md-row-actions .icon-btn[disabled] { opacity: .35; }
.md-offender-bar { flex-wrap: wrap; align-items: center; gap: 12px; }
.md-window { align-items: center; gap: 8px; }
.md-window .select { inline-size: auto; }
.md-add-host { margin-block-end: 16px; }
.md-host-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.md-host-form > .field { flex: 1 1 240px; min-inline-size: 0; }
.md-detail { display: grid; gap: 12px; padding: 16px; margin-block-end: 16px; }
.md-min { min-inline-size: 0; }
.md-gap-8 { --gap: 8px; }
.md-nowrap { flex-wrap: nowrap; }
.md-cell-main { max-inline-size: 440px; min-inline-size: 0; }
.md-block { display: block; }
.md-open { background: none; border: 0; padding: 0; text-align: start; cursor: pointer; max-inline-size: 100%; font: inherit; }
.md-open:hover, .md-open:focus-visible { text-decoration: underline; }
.lst-table tr.is-selected > td { background: var(--accent-soft); }
.md-expand > td { background: var(--surface-2); }

/* ==== C5 · G — Content detail panels, reserved addresses (ADR-0065) ==== */
.ctd-tabs { flex-wrap: wrap; }
.ctd-item { max-inline-size: 420px; }
.ctd-open { display: block; max-inline-size: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: start; cursor: pointer; }
.ctd-open:hover, .ctd-open:focus-visible { text-decoration: underline; }
.ctd-sub { display: block; }
.ctd-icon { flex: none; }
.ctd-head-text { min-inline-size: 0; }
.ctd-preview { inline-size: 100%; block-size: 420px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.ctd-sales th[scope="row"] { font-weight: 600; }
.ctd-sales small { display: block; font-size: var(--fs-micro); }
.ra-add { margin-block-end: 16px; }
.ra-future small { display: block; }
.ra-reason { max-inline-size: 320px; overflow-wrap: anywhere; }
.ra-builtin { margin-block-start: 16px; }
.ra-builtin summary { cursor: pointer; }
.ra-words { margin: 4px 0 12px; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted); overflow-wrap: anywhere; }

/* ==== C5 · T — Design library: templates, theme presets and fonts (ADR-0065) ==== */
@layer components {
  .dl-list { padding: 6px; display: grid; gap: 4px; }
  .dl-list-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px 6px; }
  .dl-list-head p { margin: 0; flex: 1 1 260px; }
  .dl-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .dl-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); border: 1px solid transparent; min-inline-size: 0; }
  .dl-row:hover { background: var(--surface-hover); }
  .dl-row.is-open { background: var(--surface-2); border-color: var(--line-strong); }
  .dl-row.is-off .dl-open, .dl-row.is-off .dl-swatch, .dl-row.is-off .dl-font-sample { opacity: .55; }
  .dl-handle { flex: none; display: inline-grid; place-items: center; color: var(--text-muted); cursor: grab; }
  .dl-handle svg { inline-size: 16px; block-size: 16px; }
  .dl-swatch { flex: none; position: relative; inline-size: 34px; block-size: 34px; border-radius: var(--r-sm); border: 1px solid var(--line); overflow: hidden; }
  .dl-swatch span { position: absolute; inset-inline-end: 5px; inset-block-end: 5px; inline-size: 12px; block-size: 12px; border-radius: var(--r-pill); }
  .dl-open { flex: 1 1 auto; display: grid; gap: 1px; min-inline-size: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--text); text-align: start; cursor: pointer; }
  .dl-open b { color: var(--ink); font-size: var(--fs-small); }
  .dl-open small { font-size: var(--fs-micro); }
  .dl-font-name { cursor: default; }
  .dl-font-name .input { max-inline-size: 260px; }
  .dl-font-sample { flex: none; inline-size: 44px; text-align: center; font-size: 22px; font-weight: 700; color: var(--ink); }
  .dl-badges { display: inline-flex; flex-wrap: wrap; gap: 4px; }
  .dl-move { flex: none; display: inline-flex; align-items: center; gap: 2px; }
  .dl-frame { inline-size: 100%; block-size: min(70vh, 720px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-sunken); }
  .dl-frame.is-short { block-size: min(52vh, 520px); }
  .dl-sources { display: grid; gap: 2px; max-block-size: 280px; overflow: auto; }
  .dl-image, .dl-translate { display: grid; gap: 10px; padding-block-start: 14px; border-block-start: 1px solid var(--line); }
  .dl-image .field-label { margin: 0; }
  .dl-image-img { inline-size: 100%; max-inline-size: 360px; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--line); }
  .dl-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 10px; }
  .dl-hex { inline-size: 100%; min-inline-size: 0; }
  /* The create studio: an official template's preview image covers its swatch. */
  .template-swatch-image { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }

  @media (max-width: 640px) {
    .dl-move .icon-btn { display: none; }
    .dl-badges { display: none; }
  }
}

/* ==== C6 · S — Support tooling: SLA badges and targets, tags, saved replies, merge (ADR-0034) ==== */
@layer components {
  .sp-count { opacity: .6; margin-inline-start: 4px; }
  .sp-minw { min-inline-size: 0; }
  .sp-block { display: block; }
  .sp-pri { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  .sp-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
  .sp-snippet { max-inline-size: 420px; }
  .sp-actions { justify-content: flex-end; flex-wrap: nowrap; --gap: 2px; }
  .sp-sla { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-block-end: 12px; padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-sunken); color: var(--text); }
  .sp-sla.is-breached { background: var(--danger-soft); }
  .sp-sla.is-near { background: var(--warning-soft); }
  .sp-tagbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-block: 4px 12px; }
  .sp-tag[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
  .sp-saved { margin-block-end: 6px; }
  .sp-merge { margin-block-start: 12px; padding-block-start: 12px; border-block-start: 1px solid var(--line); display: grid; gap: 10px; justify-items: start; }
  .sp-merge form { inline-size: 100%; }
  .sp-sla-grid { display: grid; grid-template-columns: minmax(90px, 140px) minmax(0, 160px) minmax(0, 160px); gap: 8px 12px; align-items: center; margin: 0; padding: 0; border: 0; min-inline-size: 0; }
  .sp-sla-grid .field { margin: 0; }
  .sp-plan { padding-block-start: 14px; border-block-start: 1px dashed var(--line); }
  .sp-plan-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 0; margin-block-end: 6px; }
  .sp-add-plan { flex-wrap: wrap; }
  .sp-tag-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .sp-tag-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 6px 0; border-block-end: 1px solid var(--line); }
  .sp-tag-list .sp-actions { margin-inline-start: auto; }
  .sp-confirm { inline-size: 100%; justify-content: flex-end; }
  .sp-tag-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
  .sp-tag-buttons { padding-block-end: 4px; }
  @media (max-width: 640px) {
    .sp-sla-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .sp-sla-grid > .sp-pri, .sp-sla-grid > span:first-of-type { grid-column: 1 / -1; }
  }
}

/* ---- C6 · K: Console → Courses, Community, Bookings (ADR-0066) ---- */
@layer components {
  .c6k-count { opacity: .6; }
  .c6k-minw { min-inline-size: 0; }
  .c6k-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
  .c6k-quote { margin: 0 0 8px; padding: 10px 14px; border-inline-start: 3px solid var(--line-strong); background: var(--surface-sunken); border-radius: var(--r-md); color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
  .c6k-quote b { display: block; margin-block-end: 4px; }
  @media (max-width: 640px) {
    .c6k-form-grid { grid-template-columns: minmax(0, 1fr); }
  }
}
/* ---- end C6 · K ---- */
/* ---- C6 · D: Console → Developers (tokens, webhooks, limits), Usage & limits, AI per plan (ADR-0066) ---- */
@layer components {
  .dv-tabs { margin-block-end: 16px; }
  .dv-tabs .tab[aria-current="page"] { color: var(--ink); }
  .dv-tabs .tab[aria-current="page"]::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 2px; border-radius: 2px; background: var(--ink); }
  .dv-tabs .tab svg { inline-size: 16px; block-size: 16px; }
  .dv-bars { display: flex; align-items: flex-end; gap: 2px; block-size: 72px; margin: 8px 0 0; padding: 0; list-style: none; border-block-end: 1px solid var(--line); }
  .dv-bars li { flex: 1 1 0; block-size: 100%; display: flex; align-items: flex-end; min-inline-size: 0; }
  .dv-bars li > span:first-child { display: block; inline-size: 100%; border-start-start-radius: 3px; border-start-end-radius: 3px; background: var(--accent); }
  .dv-failure { align-items: flex-start; }
  .dv-failure .wsd-reason { display: block; max-inline-size: 100%; }
  .dv-limits { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
  .ul-share { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
  .ul-meter { display: inline-block; inline-size: 72px; block-size: 6px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
  .ul-meter > span { display: block; block-size: 100%; border-radius: inherit; background: var(--accent); }
  .ul-share.is-near .ul-meter > span { background: var(--warning); }
  .ul-share.is-over .ul-meter > span { background: var(--danger); }
  .ul-share.is-over .tabular { color: var(--danger); font-weight: 600; }
  .ai-plan-table th[scope="row"] { font-weight: 500; text-align: start; }
  @media (max-width: 640px) {
    .ul-meter { display: none; }
  }
}
/* ---- end C6 · D ---- */

/* ==== C6 · A — Audience imports, form spam, broadcasts oversight, automation runs (ADR-0066) ==== */
@layer components {
  .lst-table tr.c6a-flagged > td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
  .lst-table tr.c6a-flagged:dir(rtl) > td:first-child { box-shadow: inset -3px 0 0 var(--danger); }
  .c6a-flag { display: inline-flex; align-items: center; gap: 4px; flex: none; }
  .c6a-flag svg { inline-size: 12px; block-size: 12px; }
  .c6a-note { margin-block: -4px 10px; }
  .c6a-signals ul { margin: 0; padding-inline-start: 18px; display: grid; gap: 2px; }
  .c6a-reveal { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-block: 8px 12px; }
  .c6a-reveal .field { flex: 1 1 240px; margin: 0; }
  .c6a-answer { white-space: pre-wrap; overflow-wrap: anywhere; }
  .c6a-form-limit { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr); gap: 10px; }
  .c6a-limits { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; margin-block-end: 12px; }
  .c6a-limit-input { display: flex; align-items: center; gap: 6px; }
  .c6a-limit-input .input { inline-size: 100%; min-inline-size: 0; }
  .c6a-textarea { inline-size: 100%; min-block-size: 120px; font-family: var(--font-mono); font-size: var(--fs-small); }
  .wsd-activity li.c6a-step-failed .wsd-action { color: var(--danger); }

  @media (max-width: 640px) {
    .c6a-form-limit { grid-template-columns: 1fr; }
  }
}
/* ---- end C6 · A ---- */

/* ==== C7 · F — Feature flags, experiments, limits (ADR-0067) ==== */
@layer components {
  .c7f-tabs { margin-block-end: 16px; }
  .c7f-mod { flex-wrap: wrap; }
  .c7f-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-block-start: 4px; }
  .c7f-state { font-weight: 600; color: var(--text-muted); }
  .c7f-state.is-on { color: var(--success); }
  .c7f-state.is-targeted { color: var(--accent-text); }
  .c7f-key { font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 400; color: var(--text-muted); margin-inline-start: 6px; }
  .cs-switch[aria-checked="mixed"] { background: color-mix(in oklab, var(--accent) 55%, var(--line-strong)); }
  .cs-switch[aria-checked="mixed"] span { transform: translateX(calc(9px * var(--dir-sign, 1))); }
  .c7f-segmented { flex-wrap: wrap; }
  .c7f-seg { position: relative; cursor: pointer; }
  .c7f-seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .c7f-seg:focus-within { box-shadow: var(--focus-ring); }
  .c7f-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-inline-size: 0; }
  .c7f-plans { display: flex; flex-wrap: wrap; gap: 6px 16px; }
  .c7f-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .c7f-list { font-family: var(--font-mono); font-size: var(--fs-small); min-block-size: 96px; }
  .c7f-num { max-inline-size: 120px; }
  .c7f-variant { display: grid; grid-template-columns: minmax(0, 1fr) 110px auto; gap: 8px; align-items: center; }
  .c7f-subhead { font-size: var(--fs-small); font-weight: 600; margin-block: 16px 8px; }
  .c7f-hypothesis { margin-block-end: 12px; color: var(--text-muted); overflow-wrap: anywhere; }
  .c7f-results th[scope="row"] { font-weight: 500; text-align: start; }
  .c7f-results small { display: block; }
  .c7f-results tr.is-winner th, .c7f-results tr.is-winner td { background: var(--accent-soft); }
  .c7f-limits { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; }

  @media (max-width: 640px) {
    .c7f-grid { grid-template-columns: 1fr; }
    .c7f-variant { grid-template-columns: minmax(0, 1fr) 90px auto; }
  }
}
/* ---- end C7 · F ---- */

/* ==== C7 · X — Platform analytics, payment provider order, AI prompts (ADR-0067) ==== */
@layer components {
  .pa-tools { flex-wrap: wrap; align-items: center; gap: 10px; }
  .pa-select { inline-size: auto; min-inline-size: 150px; }
  .pa-note { margin-block: 4px 12px; }
  .pa-chart .card-header { flex-wrap: wrap; gap: 10px; }
  .pa-chart-body { padding: 0 16px 16px; color: var(--accent); }
  .card-body .pa-chart-body { padding: 0; }
  .pa-table-wrap { border: 0; border-radius: 0; }
  .pa-table-wrap th[scope="row"] { font-weight: 500; text-align: start; white-space: nowrap; }
  .pa-grid { align-items: start; }
  .pa-funnel { display: grid; gap: 8px; }
  .pa-step { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-sm); font-size: var(--fs-small); overflow: hidden; }
  .pa-step > * { position: relative; }
  .pa-step-bar { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: var(--w, 0%); background: var(--accent-soft-2); border-radius: inherit; }
  .pa-step small { min-inline-size: 4.5em; text-align: end; }
  .pa-cohorts th, .pa-cohorts td { padding-inline: 8px; }
  .pa-cell { background: color-mix(in srgb, var(--accent) var(--p, 0%), transparent); color: var(--ink); }

  .pr-preview { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .pr-preview li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-small); }
  .pr-preview li > b { min-inline-size: 3.5em; }
  .pr-chain { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
  .pr-rule { display: grid; grid-template-columns: minmax(120px, 200px) minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
  .pr-key { inline-size: 100%; }
  .pr-order { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
  .pr-order li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); padding: 4px 8px; border-radius: var(--r-xs); background: var(--surface); border: 1px solid var(--line); }
  .pr-pos { inline-size: 1.5em; color: var(--text-muted); font-weight: 600; }
  .pr-error { grid-column: 1 / -1; margin: 0; }

  .aip-row { inline-size: 100%; text-align: start; cursor: pointer; background: none; border: 0; }
  .aip-row:hover { background: var(--surface-hover); }
  .aip-body { font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.55; min-block-size: 220px; }
  .aip-toggle { gap: 6px; align-items: center; }
  .aip-viewing { align-items: center; }
  .aip-diff { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; max-block-size: 420px; overflow: auto; }
  .aip-diff ins { text-decoration: none; background: var(--success-soft); color: var(--success); border-radius: 3px; }
  .aip-diff del { background: var(--danger-soft); color: var(--danger); border-radius: 3px; }
  .aip-test { padding-block-start: 12px; border-block-start: 1px solid var(--line); }
  .aip-result { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
  .aip-result.is-bad { border-color: var(--danger); background: var(--danger-soft); }
  .aip-output { margin: 0; font-family: var(--font-mono); font-size: var(--fs-small); white-space: pre-wrap; overflow-wrap: anywhere; max-block-size: 360px; overflow: auto; }
  .aip-note { display: block; color: var(--text); overflow-wrap: anywhere; }
  .aip-history .wl-row { flex-wrap: wrap; }

  @media (max-width: 640px) {
    .pr-rule { grid-template-columns: minmax(0, 1fr) auto; }
    .pr-order { grid-column: 1 / -1; grid-row: 2; }
  }
}
/* ---- end C7 · X ---- */

/* ==== C7 · O — Logs, scheduler, media & storage, reopening workspaces (ADR-0067) ==== */
@layer components {
  .c7o-h { margin-block-end: 8px; font-size: var(--fs-h3, 1.125rem); font-weight: 600; }
  .c7o-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; }
  .c7o-log-tools { display: grid; gap: 12px; }
  .c7o-log-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
  .c7o-log-row .field { margin: 0; min-inline-size: 150px; }
  .c7o-log-search { flex: 1 1 220px; }
  .c7o-log-levels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .c7o-entry { padding-block: 10px; border-block-start: 1px solid var(--line); }
  .c7o-entry:first-of-type { border-block-start: 0; }
  .c7o-entry-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .c7o-entry-msg { margin-block: 4px 0; font-family: var(--font-mono); font-size: var(--fs-small); overflow-wrap: anywhere; white-space: pre-wrap; text-align: start; }
  .c7o-entry-more summary { cursor: pointer; color: var(--text-muted); margin-block-start: 4px; }
  .c7o-pre { margin-block: 6px 0; padding: 10px 12px; max-block-size: 360px; overflow: auto; border-radius: var(--r-sm, 8px);
    background: var(--surface-sunken); font-family: var(--font-mono); font-size: var(--fs-small); white-space: pre-wrap; overflow-wrap: anywhere; text-align: start; }
  .c7o-level { display: inline-flex; align-items: center; padding-inline: 8px; block-size: 22px; border-radius: 999px; font-size: var(--fs-small); font-weight: 600;
    background: var(--surface-sunken); color: var(--text-muted); }
  .c7o-level.is-bad { background: var(--danger-soft, var(--surface-sunken)); color: var(--danger); }
  .c7o-level.is-warn { background: var(--warning-soft, var(--surface-sunken)); color: var(--warning); }
  .c7o-pager { display: flex; justify-content: flex-end; gap: 8px; padding-block-start: 12px; border-block-start: 1px solid var(--line); }
  .c7o-outcome { font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); }
  .c7o-outcome.is-ok { color: var(--success, var(--accent)); }
  .c7o-outcome.is-bad { color: var(--danger); }
  .c7o-outcome.is-warn { color: var(--warning); }
  .c7o-run { text-align: end; white-space: nowrap; }
  .c7o-steps { margin: 0 0 12px; padding-inline-start: 20px; display: grid; gap: 8px; }
  .c7o-cmd { display: flex; align-items: center; gap: 8px; margin-block: 6px; padding: 8px 10px; border-radius: var(--r-sm, 8px); background: var(--surface-sunken); }
  .c7o-cmd code { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; font-size: var(--fs-small); text-align: start; }
  .c7o-file { display: inline-block; max-inline-size: 36ch; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .c7o-quotas { display: grid; gap: 12px; }
  .c7o-quota-input { display: flex; align-items: center; gap: 6px; }
  .c7o-quota-input .input { inline-size: 100%; min-inline-size: 0; }
  .c7o-reopen .field { max-inline-size: 420px; }

  @media (max-width: 640px) {
    .c7o-log-row .field { flex: 1 1 100%; }
    .c7o-file { max-inline-size: 22ch; }
  }
}
/* ---- end C7 · O ---- */

/* ==== C7 · R — Regional settings, data retention, legal & consent, consent records, changelog (ADR-0067) ==== */
.rg-bulk { gap: 6px; }
.rg-default { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--text-muted); }
.rg-group { border: 0; margin: 0; padding: 0; }
.rg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 16px; }
.rg-cur small { display: block; }
.rg-cur.is-default b::after { content: " ★"; color: var(--warning); }
.dr-table td { vertical-align: top; }
.dr-what b, .dr-what small { display: block; }
.dr-what small { margin-block-start: 4px; max-width: 520px; }
.dr-input { width: 150px; }
.dr-input .input { width: 120px; }
.dr-input small { display: block; margin-block-start: 4px; }
.dr-fixed { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dr-fixed li { display: flex; gap: 10px; align-items: flex-start; }
.dr-fixed small { display: block; }
.dr-run { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-block: 8px; border-block-start: 1px solid var(--line); }
.dr-run-item { margin-inline-end: 12px; white-space: nowrap; }
.lg-docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin-block-end: 20px; }
.lg-doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.lg-stat { color: var(--text-muted); }
.lg-publish { padding: 14px; border-radius: var(--r-md); background: var(--surface-sunken); }
.lg-versions { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; border-block-start: 1px solid var(--line); padding-block-start: 10px; }
.lg-versions small { display: block; }
.lg-versions p { margin: 4px 0 0; }
.lg-lang { max-width: 280px; }
.lg-status { display: flex; align-items: center; gap: 8px; margin: 0; }
.lg-status.is-ok { color: var(--success); }
.lg-status.is-due { color: var(--warning); }
.lg-docs { list-style: none; margin: 0; display: grid; gap: 8px; }
.lg-docs li { display: flex; gap: 10px; align-items: baseline; }
.lg-accept-list { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 12px; }
.lg-accept-list p { margin: 6px 0; }
.cr-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.cr-stat { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-md); }
.cr-stat b { display: block; font-size: 1.3rem; }
.cr-lookup { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.cl-badge.is-new { background: var(--success-soft); color: var(--success); }
.cl-badge.is-improved { background: var(--info-soft); color: var(--info); }
.cl-badge.is-fixed { background: var(--warning-soft); color: var(--warning); }
.cl-src { white-space: pre-wrap; max-height: 220px; overflow: auto; padding: 10px; border-radius: var(--r-sm); background: var(--surface-sunken); font-size: 13px; }
.cl-tags { border: 0; margin: 0; padding: 0; gap: 16px; }
/* ---- end C7 · R ---- */

/* ── Lead · icons inside running text: an icon with no sizing class stays text-sized (C7 screens showed full-width icons) ── */
:where(.console-body) :where(p, li, small, dd, td) > svg:where(:not([class])) { display: inline-block; inline-size: 1em; block-size: 1em; vertical-align: -0.125em; flex: none; }
@layer components {
  .sc-row { padding-block: 10px; border-block-end: 1px solid var(--line); --gap: 8px; }
  .sc-row:last-child { border-block-end: 0; }
}

/* ==== R4E — custom templates and email layouts ==== */
@layer components {
  .et-new { display: grid; gap: 12px; margin-block-end: 16px; }
  .et-new-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
  .et-row-actions { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-block-start: 4px; }
  .el-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-block-end: 12px; }
  .el-views { margin-block-end: 16px; }
  .el-name { display: block; font-weight: 750; color: var(--ink); }
  .el-desc { display: block; margin-block-start: 2px; line-height: 1.45; }
  .el-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
  .el-actions .btn { min-block-size: 44px; }
  .el-row.is-default .el-name::after { content: ""; display: inline-block; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--accent); margin-inline-start: 8px; vertical-align: middle; }
  /* D11 · Layout picker. The swatch (list/table) and the grid card: a fixed 4:3 window onto a scaled live preview, the name and a
     clamped description, then a footer row of actions that never overlaps the text. */
  .el-swatch { position: relative; border: 0; background: var(--sw-a); overflow: hidden; }
  .el-swatch i { position: absolute; inset: 22% 18% 0; border-radius: 6px 6px 0 0; background: var(--sw-c); box-shadow: 0 -1px 0 color-mix(in oklab, var(--sw-b) 60%, transparent); }
  .el-swatch i::before { content: ""; position: absolute; inset-inline-start: 18%; inset-block-start: 36%; inline-size: 44%; block-size: 16%; border-radius: 3px; background: var(--sw-b); }
  .el-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .el-own { font-size: var(--fs-micro); }
  .el-desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  .el-thumb { color-scheme: light; inline-size: 200%; block-size: 200%; border: 0; transform-origin: 0 0; pointer-events: none; position: absolute; inset-block-start: 0; inset-inline-start: 0; transform: scale(.5); }
  [dir="rtl"] .el-thumb { transform-origin: 100% 0; }
  .el-views { container-type: inline-size; }
  .vs[data-layout="grid"].el-views tbody { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 16px; }
  @container (min-width: 440px) { .vs[data-layout="grid"].el-views tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @container (min-width: 820px) { .vs[data-layout="grid"].el-views tbody { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @container (min-width: 1180px) { .vs[data-layout="grid"].el-views tbody { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .vs[data-layout="grid"] tbody tr.el-row { display: flex; flex-direction: column; gap: 10px; padding: 0 0 14px; overflow: hidden; transition: transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast); }
  .vs[data-layout="grid"] tbody tr.el-row:hover { transform: translateY(-3px); }
  .vs[data-layout="grid"] tbody tr.el-row:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, transparent), var(--e2); }
  .vs[data-layout="grid"] tbody tr.el-row.is-default { border-color: var(--accent); }
  .vs[data-layout="grid"] tbody tr.el-row > td { margin: 0; padding-inline: 16px; text-align: start; }
  .vs[data-layout="grid"] tbody tr.el-row > td.vs-preview { padding: 0; margin: 0; }
  .vs[data-layout="grid"] td.vs-preview .el-big { display: block; position: relative; aspect-ratio: 4 / 3; block-size: auto; overflow: hidden; border-radius: 0; border-block-end: 1px solid var(--line); }
  .vs[data-layout="grid"] tbody tr.el-row > td.vs-main { flex: 1 1 auto; font-size: var(--fs-body); }
  .vs[data-layout="grid"] tbody tr.el-row > td.vs-status { display: none; }
  .vs[data-layout="grid"] tbody tr.el-row > td.vs-actions { inline-size: auto; margin-block-start: auto; }
  .vs[data-layout="grid"] tbody tr.el-row .el-actions { justify-content: space-between; flex-wrap: nowrap; padding-block-start: 12px; border-block-start: 1px solid var(--line); }
  .vs[data-layout="grid"] tbody tr.el-row .el-actions .btn { flex: 1 1 0; justify-content: center; white-space: nowrap; }
  .el-views tr.el-row td.vs-main { min-inline-size: min(100%, 13rem); flex: 1 1 13rem; }
  .el-default-tag { display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 1 1 0; min-block-size: 44px; border-radius: var(--r-md, 10px); font-weight: 650; font-size: var(--fs-small); color: var(--accent-ink, var(--accent)); background: color-mix(in oklab, var(--accent) 12%, transparent); }
  .el-default-tag svg { inline-size: 16px; block-size: 16px; }
  .vs:not([data-layout="grid"]) .el-default-tag { display: none; }
  @media (prefers-reduced-motion: reduce) { .vs[data-layout="grid"] tbody tr.el-row:hover { transform: none; } }
  @media (max-width: 560px) { .vs:not([data-layout="grid"]).el-views .el-actions .btn-ghost { display: none; } }
  /* D11 · Colours & style editor */
  .et-derive, .et-colour-row { display: flex; gap: var(--s-2); align-items: center; }
  .et-derive .input, .et-colour-row .input { flex: 1 1 auto; min-inline-size: 0; font-family: var(--font-mono, ui-monospace, monospace); text-transform: uppercase; }
  .et-derive { flex-wrap: wrap; }
  .et-derive .input { min-inline-size: 9ch; }
  .et-derive .btn, .et-colour-row .btn-icon { min-block-size: 44px; min-inline-size: 44px; flex: none; }
  .et-swatch { flex: none; inline-size: 44px; block-size: 44px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; }
  .et-swatch::-webkit-color-swatch-wrapper { padding: 0; }
  .et-swatch::-webkit-color-swatch { border: 0; border-radius: 8px; }
  .et-swatch::-moz-color-swatch { border: 0; border-radius: 8px; }
  .et-colours { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--s-3); }
  .et-colour { display: grid; gap: 6px; min-inline-size: 0; }
  .et-colour .label { margin: 0; }
  .et-colour .field-error { margin: 0; }
  .et-presets { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .et-preset { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding: 6px 14px 6px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; }
  .et-preset:hover { border-color: var(--line-strong); box-shadow: var(--e1); }
  .et-preset:focus-visible, .et-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
  .et-preset-dots { display: inline-flex; }
  .et-preset-dots i { inline-size: 18px; block-size: 18px; border-radius: 50%; border: 2px solid var(--surface); margin-inline-start: -6px; }
  .et-preset-dots i:first-child { margin-inline-start: 0; }
  .et-segs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
  .et-seg span { display: inline-flex; align-items: center; min-block-size: 40px; padding-inline: 14px; border-radius: 10px; font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); cursor: pointer; }
  .et-seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--e1); }
  .et-warn { margin: 4px 0 0; padding-inline-start: 18px; font-size: var(--fs-small); }
  .et-ok { display: flex; align-items: center; gap: 6px; color: var(--success, var(--accent)); margin: 0; }
  .et-ok svg { inline-size: 16px; block-size: 16px; }
  .el-overrides { display: grid; gap: 8px; }
}

/* R7B · Console → Account health */
.ah-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3, 12px); margin-block-end: var(--space-5, 24px); }
.ah-stat { display: flex; flex-direction: column; gap: 4px; padding: var(--space-4, 16px); }
.ah-stat b { font-size: var(--text-xl, 1.25rem); }
.ah-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4, 16px); }
.ah-grid .field { display: flex; flex-direction: column; gap: 6px; }
.ah-toggle { display: flex; align-items: flex-start; gap: 10px; min-block-size: 44px; cursor: pointer; }
.ah-toggle input { inline-size: 20px; block-size: 20px; margin-block-start: 2px; flex: none; }
.ah-toggle small { display: block; }
.ah-rule + .ah-rule { border-block-start: 1px solid var(--border); padding-block-start: var(--space-4, 16px); }
.ah-actions { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px); }
.ah-actions .btn { min-block-size: 44px; }
.ah-sample { margin: 0; padding-inline-start: 1.2em; }

/* ==== B8 — New template step flow + Layout per template ==== */
@layer components {
  .nt { display: grid; gap: 0; padding: 0; margin-block-end: var(--s-4); overflow: hidden; }
  .nt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-3); }
  .nt-head .btn-icon { min-inline-size: 44px; min-block-size: 44px; flex: none; }
  .nt-steps { padding-inline: var(--s-5); padding-block-end: var(--s-4); border-block-end: 1px solid var(--line); }
  .nt-progress { block-size: 4px; border-radius: var(--r-pill); background: var(--surface-sunken); overflow: hidden; margin-block-end: var(--s-3); }
  .nt-progress span { display: block; block-size: 100%; min-inline-size: 4%; background: var(--accent); border-radius: inherit; transition: inline-size var(--t-base) var(--ease-out); }
  .nt-steps ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); }
  .nt-step { display: flex; align-items: center; gap: var(--s-2); inline-size: 100%; min-block-size: 44px; padding: 0 var(--s-2); border: 0; border-radius: var(--r-md); background: none; color: var(--text-muted); font: inherit; font-size: var(--fs-small); text-align: start; cursor: pointer; }
  .nt-step:hover { background: var(--surface-hover); }
  .nt-step:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .nt-step-dot { display: inline-grid; place-items: center; inline-size: 28px; block-size: 28px; flex: none; border-radius: 50%; border: 1px solid var(--line-strong); font-weight: 600; font-size: 13px; }
  .nt-step-dot svg { inline-size: 14px; block-size: 14px; }
  .nt-step.is-current { color: var(--text); font-weight: 600; }
  .nt-step.is-current .nt-step-dot { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
  .nt-step.is-done .nt-step-dot { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
  .nt-step-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nt-body { display: grid; gap: var(--s-5); padding: var(--s-5); align-content: start; }
  .nt-body.is-refreshing { opacity: .6; }
  .nt-body .field { margin: 0; }
  .nt-grid { display: grid; gap: var(--s-4) var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); align-items: start; }
  .nt-fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: grid; gap: var(--s-2); }
  .nt-fieldset legend { padding: 0; margin-block-end: var(--s-2); }
  .nt-channels { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
  .nt-choice, .nt-layout { position: relative; display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
  .nt-choice:hover, .nt-layout:hover { border-color: var(--line-strong); }
  .nt-choice input, .nt-layout input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
  .nt-choice:has(input:checked), .nt-layout:has(input:checked) { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 8%, var(--surface)); box-shadow: 0 0 0 1px var(--accent); }
  .nt-choice:has(input:focus-visible), .nt-layout:has(input:focus-visible) { box-shadow: var(--focus-ring); }
  .nt-choice b, .nt-layout b { display: block; }
  .nt-choice small, .nt-layout small { display: block; font-size: var(--fs-small); line-height: 1.4; }
  .nt-choice-icon { display: inline-grid; place-items: center; inline-size: 44px; block-size: 44px; flex: none; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); }
  .nt-choice-icon svg { inline-size: 22px; block-size: 22px; }
  .nt-key { display: flex; align-items: stretch; }
  .nt-key-prefix { display: inline-flex; align-items: center; padding-inline: var(--s-3); border: 1px solid var(--line); border-inline-end: 0; border-start-start-radius: var(--r-md); border-end-start-radius: var(--r-md); background: var(--surface-sunken); color: var(--text-muted); font-family: var(--font-mono); font-size: 13px; }
  .nt-key .input { border-start-start-radius: 0; border-end-start-radius: 0; flex: 1; min-inline-size: 0; }
  .nt-key-preview { margin: var(--s-1) 0 0; }
  .nt-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-md); background: var(--surface-sunken); }
  .nt-chip { min-block-size: 36px; padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--text); font-family: var(--font-mono); font-size: 13px; cursor: pointer; }
  .nt-chip:hover { border-color: var(--accent); color: var(--accent); }
  .nt-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .nt-textarea { min-block-size: 160px; resize: vertical; }
  .nt-counter { margin: var(--s-1) 0 0; }
  .nt-check-field { align-self: center; padding-block-start: var(--s-5); }
  .nt-split { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 1024px) { .nt-split { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); } }
  .nt-layouts { display: grid; gap: var(--s-2); max-block-size: 620px; overflow: auto; padding: 2px; }
  .nt-layout { padding: var(--s-2); }
  .nt-layout-thumb { position: relative; inline-size: 72px; block-size: 56px; flex: none; overflow: hidden; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-sunken); display: grid; place-items: center; color: var(--text-muted); }
  .nt-layout-thumb iframe { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 640px; block-size: 500px; border: 0; transform: scale(.1125); transform-origin: 0 0; pointer-events: none; }
  [dir="rtl"] .nt-layout-thumb iframe { transform-origin: 100% 0; }
  .nt-preview { display: grid; gap: var(--s-3); min-inline-size: 0; align-content: start; }
  .nt-preview-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2); }
  .nt-frame-wrap { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-sunken); padding: var(--s-3); display: grid; justify-items: center; }
  .nt-frame { inline-size: 100%; block-size: 640px; border: 0; border-radius: var(--r-md); background: #fff; transition: inline-size var(--t-base) var(--ease-out); }
  .nt-frame-wrap.is-mobile .nt-frame { inline-size: min(100%, 375px); }
  .nt-sms { padding: var(--s-5); border-radius: var(--r-lg); background: var(--surface-sunken); }
  .nt-bubble { max-inline-size: 320px; margin: 0; padding: var(--s-3) var(--s-4); border-radius: 18px 18px 18px 4px; background: var(--surface); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }
  .nt-summary { display: grid; gap: var(--s-3) var(--s-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin: 0; }
  .nt-summary > div { display: grid; gap: var(--s-1); padding: var(--s-3); border-radius: var(--r-md); background: var(--surface-sunken); min-inline-size: 0; }
  .nt-summary dt { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
  .nt-summary dd { margin: 0; overflow-wrap: anywhere; }
  .nt-summary-wide { grid-column: 1 / -1; }
  .nt-summary-body { white-space: pre-wrap; }
  .nt-test { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
  .nt-test > span { flex: 1 1 200px; }
  .nt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-block-start: 1px solid var(--line); background: var(--surface-sunken); }
  .nt-foot-actions { display: flex; gap: var(--s-2); margin-inline-start: auto; }
  .nt-foot .btn { min-block-size: 44px; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--s-2); }
  @media (max-width: 640px) {
    .nt-head, .nt-body { padding-inline: var(--s-4); }
    .nt-steps { padding-inline: var(--s-4); }
    .nt-step { justify-content: center; padding: 0; }
    .nt-step-label { display: none; }
    .nt-step.is-current .nt-step-label { display: none; }
    .nt-check-field { padding-block-start: 0; }
    .nt-frame { block-size: 520px; }
    .nt-foot { padding-inline: var(--s-4); }
    .nt-foot > span { display: none; }
    .nt-foot-actions { inline-size: 100%; }
    .nt-foot-actions .btn { flex: 1; justify-content: center; }
  }

  .lpt { padding: 0; gap: 0; overflow: clip; }
  .lpt-head { padding: var(--s-5) var(--s-5) var(--s-3); }
  .lpt-head p { margin: var(--s-1) 0 0; }
  .lpt-bar { position: sticky; inset-block-start: var(--topbar-h, 0px); z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-5); background: var(--surface); border-block: 1px solid var(--line); }
  .lpt-search { position: relative; flex: 1 1 240px; display: flex; align-items: center; }
  .lpt-search svg { position: absolute; inset-inline-start: var(--s-3); inline-size: 16px; block-size: 16px; color: var(--text-muted); pointer-events: none; }
  .lpt-search .input { padding-inline-start: 36px; inline-size: 100%; }
  .lpt-only { min-block-size: 44px; display: inline-flex; align-items: center; gap: var(--s-2); }
  .lpt-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-2); border-radius: var(--r-md); background: var(--accent-soft); }
  .lpt-bulk .select { inline-size: auto; }
  .lpt-groups { display: grid; }
  .lpt-group + .lpt-group { border-block-start: 1px solid var(--line); }
  .lpt-group-head { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-5); background: var(--surface-sunken); }
  .lpt-toggle { flex: 1; display: flex; align-items: center; gap: var(--s-2); min-block-size: 44px; min-inline-size: 0; border: 0; background: none; color: var(--text); font: inherit; cursor: pointer; text-align: start; }
  .lpt-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
  .lpt-chev { inline-size: 16px; block-size: 16px; transition: transform var(--t-fast); }
  .lpt-toggle[aria-expanded="false"] .lpt-chev { transform: rotate(-90deg); }
  .lpt-gset { inline-size: auto; max-inline-size: 180px; }
  .lpt-check { display: inline-grid; place-items: center; min-inline-size: 44px; min-block-size: 44px; flex: none; cursor: pointer; }
  .lpt-check input { inline-size: 18px; block-size: 18px; }
  .lpt-rows { list-style: none; margin: 0; padding: 0; }
  .lpt-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-5); border-block-start: 1px solid var(--line); }
  .lpt-row.is-own { background: color-mix(in oklab, var(--accent) 5%, transparent); }
  .lpt-name { display: flex; align-items: center; gap: var(--s-2); min-inline-size: 0; color: var(--text); text-decoration: none; min-block-size: 44px; }
  .lpt-name:hover .truncate { text-decoration: underline; }
  .lpt-chan { flex: none; }
  .lpt-chan svg { inline-size: 12px; block-size: 12px; }
  .lpt-pick { display: flex; align-items: center; gap: var(--s-2); }
  .lpt-pick .select { inline-size: 170px; }
  .lpt-swatch { inline-size: 18px; block-size: 18px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--sw-a) 50%, var(--sw-b) 50%); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--text) 18%, transparent); }
  .lpt-pick .btn-icon { min-inline-size: 44px; min-block-size: 44px; }
  .lpt-empty { padding: var(--s-5); text-align: center; margin: 0; }
  @media (max-width: 640px) {
    .lpt-head, .lpt-bar { padding-inline: var(--s-4); }
    .lpt-group-head { padding-inline: var(--s-2); flex-wrap: wrap; }
    .lpt-toggle { flex: 1 1 200px; }
    .lpt-gset { margin-inline-start: 52px; max-inline-size: none; flex: 1 1 100%; }
    .lpt-row { grid-template-columns: auto minmax(0, 1fr); padding-inline: var(--s-2); row-gap: 0; }
    .lpt-name { flex-wrap: wrap; row-gap: 2px; padding-block: var(--s-2); }
    .lpt-pick { grid-column: 2; padding-block-end: var(--s-2); }
    .lpt-pick .select { flex: 1; inline-size: auto; }
  }
  /* A9 · Console → Email layouts → Brand, header & footer */
  .eb { margin-block: var(--s-5); }
  .eb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5); align-items: start; }
  .eb-set { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
  .eb-legend { font-weight: 700; font-size: 0.8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-block-end: var(--s-2); padding: 0; }
  .eb-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); align-items: start; }
  .eb-logo { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
  .eb-logo-thumb { display: inline-grid; place-items: center; inline-size: 96px; block-size: 52px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: #6b7d75; overflow: hidden; }
  .eb-logo-thumb.is-dark { background: #062a1e; color: #a9c2b7; }
  .eb-logo-thumb img { max-inline-size: 84px; max-block-size: 40px; object-fit: contain; }
  .eb-logo .btn { min-block-size: 44px; }
  .eb-links { list-style: none; margin: var(--s-2) 0; padding: 0; display: grid; gap: var(--s-2); }
  .eb-link { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; gap: var(--s-2); align-items: center; }
  .eb-link .field-error { grid-column: 1 / -1; margin: 0; }
  .eb-link .btn-icon { min-inline-size: 44px; min-block-size: 44px; }
  .eb-socials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
  .eb-social { display: flex; align-items: center; gap: var(--s-2); }
  .eb-social img { flex: none; }
  .eb-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }
  .eb-preview { position: sticky; inset-block-start: var(--s-4); display: grid; gap: var(--s-2); }
  .eb-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
  .eb-preview-bar .label { white-space: nowrap; margin: 0; }
  .eb-preview-bar .select { inline-size: auto; min-inline-size: 160px; }
  .eb-frame { inline-size: 100%; block-size: min(78vh, 900px); border: 1px solid var(--line); border-radius: 16px; background: #fff; }
  @media (max-width: 960px) {
    .eb-grid { grid-template-columns: minmax(0, 1fr); padding: var(--s-4); }
    .eb-preview { position: static; }
    .eb-frame { block-size: 640px; }
  }
  @media (max-width: 640px) {
    .eb-row, .eb-socials { grid-template-columns: minmax(0, 1fr); }
    .eb-link { grid-template-columns: minmax(0, 1fr) auto; }
    .eb-link input:first-of-type { grid-column: 1 / 2; }
    .eb-link input[type=url] { grid-column: 1 / 2; grid-row: 2; }
    .eb-link .btn-icon { grid-row: 1 / 3; grid-column: 2; }
  }
}

/* R10A · Email risk panel (Sign-up & login protection) */
@layer components {
.er-probe { display: flex; gap: var(--space-2, .5rem); align-items: stretch; }
.er-probe .input { flex: 1 1 auto; min-inline-size: 0; }
.er-break { overflow-wrap: anywhere; word-break: break-word; }
.er-reasons { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .375rem; }
.er-reasons li { display: flex; justify-content: space-between; gap: .75rem; align-items: center; }
.er-num { max-inline-size: 160px; }
.er-num-group { max-inline-size: 200px; }
.er-select { max-inline-size: 280px; }
.er-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-4, 1rem); }
.er-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .75rem 1rem; border-block-end: 1px solid var(--border); }
.er-row { cursor: pointer; align-items: flex-start; min-block-size: 44px; }
.er-row .check { margin-block-start: .25rem; flex: none; }
.er-main { display: grid; gap: .25rem; min-inline-size: 0; }
.er-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
}

/* R11B · Plans → Features & limits matrix */
@layer components {
  .pm-layout { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 1000px) { .pm-layout { grid-template-columns: 240px minmax(0, 1fr); align-items: start; } }
  .pm-nav { display: flex; flex-direction: column; gap: 2px; padding: 10px; }
  .pm-nav .input { margin-block-end: 8px; }
  @media (max-width: 999px) { .pm-nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; align-items: center; } .pm-nav .input { margin: 0; min-width: 180px; } .pm-nav-item { white-space: nowrap; } }
  .pm-nav-item { display: flex; align-items: center; gap: 8px; min-height: 44px; padding-inline: 12px; border-radius: var(--r-sm); background: none; border: 0; color: var(--text); text-align: start; font-size: var(--fs-small); cursor: pointer; }
  .pm-nav-item:hover { background: var(--surface-2); }
  .pm-nav-item[aria-current="true"] { background: var(--surface-2); font-weight: 600; box-shadow: inset 3px 0 0 var(--brand); }
  .pm-main { min-width: 0; }
  .pm-copy { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 16px 12px; }
  .pm-table { max-height: 70vh; }
  .pm-table th.pm-label { min-width: 220px; position: sticky; inset-inline-start: 0; background: var(--surface); z-index: 1; text-align: start; font-weight: 400; }
  .pm-table tbody th.pm-label { text-transform: none; letter-spacing: normal; color: var(--text); font-size: var(--fs-small); }
  .pm-label small { display: block; font-size: 11px; text-transform: none; }
  .pm-copy .select { width: auto; max-width: 100%; min-height: 44px; }
  .pm-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 2; }
  .pm-num { width: 96px; }
  .pm-bulk { display: inline-flex; gap: 4px; white-space: nowrap; }
}

/* A16: Console → Payments → how Stripe sellers get paid */
@layer components {
  .ss-modes { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); border: 0; padding: 0; margin: 0; min-width: 0; }
  @media (min-width: 1000px) { .ss-modes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .ss-mode { display: grid; gap: 8px; align-content: start; padding: 18px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
  .ss-mode:hover { border-color: var(--line-strong); }
  .ss-mode.is-active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--e2); }
  .ss-mode:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
  .ss-mode b { color: var(--ink); font-family: var(--font-display); font-size: 17px; }
  .ss-mode small { color: var(--text-muted); font-size: 13px; line-height: 1.5; }
  .ss-mode .ss-where { color: var(--accent-text); font-weight: 600; font-size: 12.5px; }
  .ss-mode-top { display: flex; justify-content: space-between; align-items: center; }
  .ss-facts { list-style: none; margin: 4px 0 0; padding: 10px 0 0; border-block-start: 1px solid var(--line); display: grid; gap: 6px; }
  .ss-facts li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.45; color: var(--text); }
  .ss-facts svg { width: 14px; height: 14px; flex: none; margin-block-start: 2px; color: var(--text-muted); }
  .ss-grid { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 800px) { .ss-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (prefers-reduced-motion: reduce) { .ss-mode { transition: none; } }
}

/* R17A · Console → Payments → Pricing and fees */
.pp-rates { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.pp-rates li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.pp-rate { font-size: 1.5rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.pp-grid { display: grid; grid-template-columns: minmax(0, 320px); gap: 12px; }

/* css/components/console-nav.css */
/* Console navigation and ⌘K search (C1·K, ADR-0061): collapsible sidebar groups, pinned screens, the topbar search
   button and the Console palette's extras. Logical properties only (right-to-left safe); colours from tokens. */
@layer components {
  /* Group headers are buttons: the same look as a section label, with a chevron that turns when folded. */
  .cs-nav-group { display: grid; gap: 2px; }
  .cs-nav-items { display: grid; gap: 2px; }
  .cs-nav-toggle { display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: none; font-family: inherit; text-align: start; cursor: pointer; border-radius: 8px; padding-block-start: 4px; }
  .console-sidebar .cs-nav-toggle:hover { color: color-mix(in oklab, var(--moss-0) 80%, transparent); }
  .cs-nav-toggle:focus-visible { outline: 2px solid var(--lime-400); outline-offset: 1px; }
  .cs-nav-chev { width: 13px; height: 13px; flex: none; opacity: .7; transition: transform var(--t-fast); }
  .cs-nav-toggle[aria-expanded="false"] .cs-nav-chev { transform: rotate(-90deg); }
  [dir="rtl"] .cs-nav-toggle[aria-expanded="false"] .cs-nav-chev { transform: rotate(90deg); }
  .cs-nav-group[data-current] .cs-nav-toggle { cursor: default; }
  .cs-nav-group[data-current] .cs-nav-chev { opacity: .3; }

  /* A star to pin or unpin, shown on hover or keyboard focus (always, faintly, on touch screens). */
  .cs-nav-row { position: relative; }
  .cs-nav-row .nav-item { padding-inline-end: 36px; }
  .cs-pin { position: absolute; inset-block: 0; inset-inline-end: 6px; margin-block: auto; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: inherit; cursor: pointer; opacity: 0; transition: opacity var(--t-fast), background var(--t-fast); }
  .console-sidebar .cs-pin { color: color-mix(in oklab, var(--moss-0) 70%, transparent); }
  .cs-pin svg { width: 14px; height: 14px; }
  .cs-pin.is-pinned svg { fill: currentColor; }
  .console-sidebar .cs-pin.is-pinned { color: var(--lime-400); }
  .cs-nav-row:hover .cs-pin, .cs-nav-row:focus-within .cs-pin { opacity: 1; }
  .cs-pin:hover { background: color-mix(in oklab, currentColor 14%, transparent); }
  .cs-pin:focus-visible { opacity: 1; outline: 2px solid var(--lime-400); outline-offset: 0; }
  .console-sidebar .cs-nav-row:has(.nav-item[aria-current="page"]) .cs-pin { color: var(--forest-950); }
  .cs-nav-row:hover .nav-count, .cs-nav-row:focus-within .nav-count { visibility: hidden; }
  @media (hover: none) { .cs-pin { opacity: .55; } .cs-nav-row .nav-count { margin-inline-end: 22px; } .cs-nav-row:focus-within .nav-count { visibility: visible; } }

  /* Topbar search: a wide button on desktop, an icon on phones. */
  .cs-search { margin-inline-start: auto; width: min(320px, 38vw); }
  .cs-search + .topbar-actions { margin-inline-start: 0; }
  .cs-search-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start; }
  @media (max-width: 767px) {
    .cs-search { width: 40px; padding: 0; justify-content: center; }
    .cs-search .cs-search-text, .cs-search .kbd { display: none; }
  }

  /* Console palette extras. */
  .cs-palette .palette-item .cs-palette-enter { width: 14px; height: 14px; margin-inline-start: auto; flex: none; color: var(--text-subtle); opacity: 0; }
  .cs-palette .palette-item.is-active .cs-palette-enter { opacity: 1; }
  .cs-palette-close { display: none; }
  .cs-palette-note { margin: 0; padding: 8px 18px; font-size: var(--fs-micro); color: var(--text-muted); background: var(--surface-2); border-bottom: 1px solid var(--line); }
  @media (max-width: 767px) {
    .cs-palette-close { display: inline-grid; }
    .cs-palette .palette-list { max-height: min(520px, 62dvh); }
    .cs-palette .palette-foot { display: none; }
  }
  @media (prefers-reduced-motion: reduce) { .cs-nav-chev, .cs-pin { transition: none; } }
}

/* css/components/i18n.css */
/* Console → Languages and Translations (ADR-0058). Logical properties throughout, so right-to-left works. */
.lg-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-block-end: 1px solid var(--border); }
.lg-row:last-child { border-block-end: 0; }
.lg-row .badge { margin-inline-start: 6px; }
.lg-code { font: 600 12px/1 var(--font-mono, ui-monospace, monospace); padding: 6px 8px; border-radius: 8px; background: var(--surface-2, var(--bg-subtle)); min-width: 58px; text-align: center; }
.lg-meter { height: 6px; border-radius: 99px; background: var(--surface-2, var(--bg-subtle)); overflow: hidden; margin: 8px 0 6px; max-width: 420px; }
.lg-meter > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.tr-head { display: flex; align-items: flex-end; gap: 18px; padding: 16px 18px; flex-wrap: wrap; margin-block-end: 14px; }
.tr-head .field { margin: 0; min-width: 240px; }
.tr-progress .lg-meter { max-width: none; }
.tr-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 16px; padding: 14px 18px; border-block-end: 1px solid var(--border); }
.tr-row:last-child { border-block-end: 0; }
.tr-row.is-ai { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.tr-src p { margin: 0 0 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
.tr-file { font: 11px/1.3 var(--font-mono, ui-monospace, monospace); opacity: .7; margin-inline-start: 6px; }
.tr-dst textarea { width: 100%; resize: vertical; min-height: 40px; }
.tr-meta { display: flex; align-items: center; gap: 8px; min-height: 22px; margin-top: 4px; flex-wrap: wrap; }
.tr-saved { color: var(--success-text, var(--accent-text)); display: inline-flex; align-items: center; gap: 4px; }
.tr-import { margin-top: 16px; }
@media (max-width: 760px) { .tr-row { grid-template-columns: 1fr; } }

/* Icons that point a direction (arrows, chevrons, "back") mirror in right-to-left languages. */
[dir="rtl"] .flip-rtl { --flip-x: -1; transform: scaleX(-1); }
.tr-ai-off { display: inline-flex; align-items: center; gap: 6px; }
.tr-ai-off svg { width: 14px; height: 14px; flex: none; }

/* css/components/support.css */
/* Help & support in the app and console (ADR-0034) ------------------------------------------ */
@layer components {
  /* In-app help centre */
  .hc-hero { position: relative; overflow: hidden; padding: clamp(24px, 4vw, 44px); border-radius: var(--r-2xl); color: #fff; }
  .hc-hero-inner { position: relative; z-index: 1; display: grid; gap: 14px; justify-items: start; max-width: 680px; }
  .hc-hero h1 { color: #fff; margin: 0; font-family: var(--font-display); font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem); letter-spacing: -0.035em; line-height: 1.05; }
  .hc-search { position: relative; display: flex; align-items: center; width: 100%; }
  .hc-search > svg { position: absolute; inset-inline-start: 16px; width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; }
  .hc-search input { width: 100%; height: 54px; padding-block: 0; padding-inline: 46px 48px; border-radius: var(--r-pill); border: 0; background: var(--surface); color: var(--text); font: inherit; font-size: 16px; box-shadow: 0 18px 40px -20px rgb(0 0 0 / .55); }
  .hc-search input:focus { outline: none; box-shadow: 0 0 0 4px rgb(194 244 91 / .45), 0 18px 40px -20px rgb(0 0 0 / .55); }
  .hc-search-spin { position: absolute; inset-inline-end: 18px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--accent); animation: spin .7s linear infinite; }
  .hc-hero-foot { margin: 0; font-size: 14px; opacity: .88; }
  .hc-link { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
  .hc-hero-art { position: absolute; inset-inline-end: -40px; top: -40px; width: 320px; height: 320px; pointer-events: none; }
  .hc-hero-art span { position: absolute; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / .2); inset: 0; animation: hc-pulse 6s ease-in-out infinite; }
  .hc-hero-art span:nth-child(2) { inset: 50px; animation-delay: -2s; }
  .hc-hero-art span:nth-child(3) { inset: 100px; background: rgb(194 244 91 / .18); border-color: transparent; animation-delay: -4s; }
  @media (max-width: 640px) { .hc-hero-art { display: none; } }
  @keyframes hc-pulse { 50% { transform: scale(1.05); opacity: .7; } }
  @media (prefers-reduced-motion: reduce) { .hc-hero-art span { animation: none; } }

  .hc-layout { display: grid; gap: 20px; align-items: start; }
  @media (min-width: 1100px) { .hc-layout { grid-template-columns: minmax(0, 1fr) 360px; } }
  .hc-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 12px; }
  .hc-cat { display: grid; gap: 6px; padding: 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1); color: var(--text); transition: transform var(--t-fast), box-shadow var(--t-fast); }
  .hc-cat:hover { transform: translateY(-2px); box-shadow: var(--e2); }
  .hc-cat b { color: var(--ink); }
  .hc-cat small { color: var(--text-muted); font-size: 12.5px; line-height: 1.4; }
  .hc-cat-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); margin-bottom: 4px; }
  .hc-cat-icon svg { width: 18px; height: 18px; }
  .hc-list, .hc-reqs { list-style: none; margin: 0; padding: 0 8px 8px; display: grid; }
  .hc-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; color: var(--text); }
  .hc-item:hover { background: var(--surface-hover); }
  .hc-item-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--surface-sunken); color: var(--text-muted); }
  .hc-item-icon svg { width: 16px; height: 16px; }
  .hc-item-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
  .hc-item-main b { color: var(--ink); font-size: var(--fs-small); }
  .hc-item-main small { color: var(--text-muted); font-size: 12.5px; }
  .hc-item-main em { font-style: normal; font-size: 12px; color: var(--text-subtle); }
  .hc-item-go { width: 14px; height: 14px; color: var(--text-subtle); flex: none; }
  .hc-req { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: var(--text); }
  .hc-req:hover { background: var(--surface-hover); }
  .hc-req-main { display: grid; min-width: 0; flex: 1; }
  .hc-req-main b { color: var(--ink); font-size: var(--fs-small); }
  .hc-req-main small { color: var(--text-muted); font-size: 12px; }
  .hc-reqs li + li .hc-req { border-top: 1px solid var(--line); border-radius: 0; }
  .hc-ideas { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--r-xl); color: #fff; }
  .hc-ideas span { display: grid; gap: 2px; flex: 1; }
  .hc-ideas small { opacity: .85; font-size: 13px; }
  .hc-ideas-icon { width: 42px; height: 42px; flex: none !important; border-radius: 14px; display: grid !important; place-items: center; background: rgb(255 255 255 / .18); }
  .hc-ideas-icon svg { width: 20px; height: 20px; }
  .hc-ideas-go { width: 18px; height: 18px; flex: none; transition: transform var(--t-fast); }
  .hc-ideas:hover .hc-ideas-go { transform: translateX(calc(3px * var(--dir-sign, 1))) scaleX(var(--flip-x, 1)); }
  .hc-topics { border: 0; margin: 0; padding: 0; min-width: 0; }
  .hc-topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-top: 6px; }
  .hc-topic { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--line); cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text); transition: border-color var(--t-fast), background var(--t-fast); }
  .hc-topic svg { width: 16px; height: 16px; color: var(--text-muted); flex: none; }
  .hc-topic:hover { background: var(--surface-hover); }
  .hc-topic.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
  .hc-topic.is-on svg { color: var(--accent-text); }
  .hc-topic:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
  .hc-suggest { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: var(--assist-soft, var(--accent-soft)); }
  .hc-suggest p { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
  .hc-suggest p svg { width: 15px; height: 15px; color: var(--assist, var(--accent)); }
  .hc-suggest a, .hc-suggest button { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; text-align: start; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--accent-text); cursor: pointer; }
  .hc-suggest a:hover, .hc-suggest button:hover { text-decoration: underline; }
  .hc-suggest svg { width: 13px; height: 13px; }

  /* A request's conversation */
  .tk-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); }
  .tk-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-subtle); }
  .tk-status.is-open i { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
  .tk-status.is-pending i { background: var(--warning); box-shadow: 0 0 0 4px var(--warning-soft); }
  .tk-status.is-solved i { background: var(--success); }
  .tk-sent { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; margin-bottom: 16px; border-radius: var(--r-lg); background: var(--accent-soft); color: var(--ink); }
  .tk-sent p { margin: 2px 0 0; font-size: var(--fs-small); color: var(--text); }
  .tk-sent-icon { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--accent); color: #fff; }
  .tk-thread { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 14px; }
  .tk-msg { display: flex; gap: 12px; align-items: flex-start; }
  .tk-msg.is-me { flex-direction: row-reverse; }
  .tk-avatar { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--surface-sunken); color: var(--ink); font-weight: 700; font-size: 13px; overflow: hidden; }
  .tk-msg.is-staff .tk-avatar { background: var(--ink); color: #C2F45B; }
  .tk-msg.is-staff .tk-avatar svg { width: 22px; height: 22px; }
  .tk-bubble { max-width: min(640px, 100%); min-width: 0; padding: 12px 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1); }
  .tk-msg.is-me .tk-bubble { background: var(--accent-soft); border-color: transparent; border-start-end-radius: 6px; }
  .tk-msg.is-staff .tk-bubble { border-start-start-radius: 6px; }
  .tk-msg.is-note .tk-bubble { background: var(--warning-soft); border-color: color-mix(in oklab, var(--warning) 30%, transparent); }
  .tk-thread.is-console .tk-msg.is-staff { flex-direction: row-reverse; }
  .tk-thread.is-console .tk-msg.is-staff .tk-bubble, .tk-thread.is-console .tk-msg.is-note .tk-bubble { margin-inline-start: auto; }
  .tk-thread.is-console .tk-msg.is-note { justify-content: flex-end; }
  .tk-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 4px; font-size: 12.5px; }
  .tk-meta b { color: var(--ink); }
  .tk-meta time { color: var(--text-subtle); }
  .tk-body { white-space: pre-line; overflow-wrap: anywhere; font-size: var(--fs-small); line-height: 1.6; color: var(--text); }
  .tk-sys { text-align: center; }
  .tk-sys span { display: inline-block; padding: 4px 12px; border-radius: var(--r-pill); background: var(--surface-sunken); font-size: 12px; color: var(--text-muted); }
  .tk-reply { padding: 16px; display: grid; gap: 12px; }
  .tk-reply .between { gap: 12px; flex-wrap: wrap; }
  .tk-closed a { font-weight: 700; color: var(--accent-text); }
  .tk-rate { margin-top: 16px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .tk-rate p { margin: 0; display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
  .tk-rate p svg { width: 16px; height: 16px; }

  /* Console inbox */
  .nav-count { margin-inline-start: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--accent); color: #fff; }
  .select-sm, .input-sm { height: 32px; font-size: 13px; }
  .tk-views { flex-wrap: wrap; }
  .tk-pri { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--line-strong); }
  .tk-pri.is-high { background: var(--warning); }
  .tk-pri.is-urgent { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
  .tk-pri.is-low { background: transparent; border: 1.5px solid var(--line-strong); }
  .tk-state { padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: var(--surface-sunken); color: var(--text-muted); }
  .tk-state.is-open { background: var(--accent-soft); color: var(--accent-text); }
  .tk-state.is-pending { background: var(--warning-soft); color: var(--warning); }
  @media (max-width: 640px) { .tk-row .tk-state { display: none; } }
  .tk-detail { display: grid; gap: 14px; }
  .tk-controls { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
  .tk-controls label { display: grid; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
  .tk-who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
  .tk-history { font-size: 13px; }
  .tk-history summary { cursor: pointer; font-weight: 700; color: var(--text-muted); }
  .tk-history button { display: block; width: 100%; margin-top: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: start; font: inherit; font-size: 13px; cursor: pointer; }
  .tk-history button:hover { background: var(--surface-hover); }
  .tk-thread.is-console { max-height: 56vh; overflow-y: auto; padding: 2px; margin: 0; }
  .tk-compose { display: grid; gap: 10px; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface-2); }
  .tk-compose.is-note { background: var(--warning-soft); border-color: color-mix(in oklab, var(--warning) 30%, transparent); }
  .tk-compose .between { gap: 10px; flex-wrap: wrap; }
  .tk-then { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-muted); }
  .tk-guides { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .tk-guides .input-icon { flex: 1 1 220px; }
  .tk-guide { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
  .tk-guide svg { width: 12px; height: 12px; }

  /* Ideas */
  .idea-tools { flex-wrap: wrap; }
  .idea-tools > .select { width: auto; flex: 0 0 auto; min-width: 150px; }
  .idea-tools > .input-icon { flex: 1 1 260px; }
  @media (max-width: 640px) { .idea-tools > .select { flex: 1 1 40%; } }
  .idea-list { display: grid; gap: 8px; }
  .idea-row { display: flex; align-items: stretch; gap: 12px; padding: 10px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1); }
  .idea-vote { display: grid; justify-items: center; align-content: center; gap: 0; width: 56px; flex: none; padding: 6px 0; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface); color: var(--text-muted); font: inherit; cursor: pointer; transition: all var(--t-fast); }
  .idea-vote svg { width: 16px; height: 16px; }
  .idea-vote b { font-size: 15px; color: var(--ink); }
  .idea-vote:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-text); }
  .idea-vote.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
  .idea-vote.is-on b { color: #fff; }
  .idea-vote:disabled { opacity: .5; cursor: default; }
  .idea-vote.is-wide { display: inline-flex; width: auto; gap: 6px; padding: 8px 14px; font-weight: 700; }
  .idea-main { display: grid; gap: 6px; align-content: center; min-width: 0; flex: 1; padding: 4px 6px; border: 0; background: none; text-align: start; font: inherit; color: var(--text); cursor: pointer; border-radius: 10px; }
  .idea-main:hover b { text-decoration: underline; text-underline-offset: 3px; }
  .idea-main b { color: var(--ink); overflow-wrap: anywhere; }
  .idea-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-muted); }
  .idea-meta > span { display: inline-flex; align-items: center; gap: 4px; }
  .idea-meta svg { width: 13px; height: 13px; }
  .idea-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--surface-sunken); color: var(--text-muted); }
  .idea-status svg { width: 13px; height: 13px; }
  .idea-status.is-review { background: var(--info-soft); color: var(--info); }
  .idea-status.is-planned { background: var(--assist-soft, var(--info-soft)); color: var(--assist-text, var(--info)); }
  .idea-status.is-progress { background: var(--warning-soft); color: var(--warning); }
  .idea-status.is-shipped { background: var(--accent-soft); color: var(--accent-text); }
  .idea-status.is-declined { background: var(--danger-soft); color: var(--danger); }
  .idea-body { white-space: pre-line; overflow-wrap: anywhere; font-size: var(--fs-small); line-height: 1.6; color: var(--text); }
  .idea-merged { margin: 0; font-size: var(--fs-small); color: var(--text-muted); }
  .idea-response { padding: 14px 16px; border-radius: 16px; background: var(--coach-bg); color: var(--coach-muted); border: 1px solid var(--coach-line); }
  .idea-response p { margin: 0; white-space: pre-line; font-size: var(--fs-small); line-height: 1.6; }
  .idea-response-by { display: flex !important; align-items: center; gap: 8px; margin-bottom: 6px !important; font-weight: 700; color: #C2F45B; font-size: 12.5px !important; }
  .idea-response-by svg { width: 18px; height: 18px; }
  .idea-comments { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
  .idea-comments li { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: var(--fs-small); overflow-wrap: anywhere; }
  .idea-comments li p { margin: 0; white-space: pre-line; }
  .idea-comments li.is-staff { background: var(--accent-soft); }
  .idea-comments li.is-hidden { opacity: .55; }
  .idea-c-by { display: flex; align-items: center; gap: 8px; margin-bottom: 4px !important; font-size: 12.5px; }
  .idea-c-by b { color: var(--ink); }
  .idea-c-by time { color: var(--text-subtle); }
  .idea-c-by .icon-btn { margin-inline-start: auto; width: 26px; height: 26px; }
  .idea-c-empty { color: var(--text-muted); background: none !important; padding-inline-start: 0 !important; }

  /* Console help centre */
  .hlp-grid { display: grid; gap: 20px; align-items: start; }
  @media (min-width: 1000px) { .hlp-grid { grid-template-columns: 280px minmax(0, 1fr); } }
  .hlp-cats { padding-bottom: 8px; }
  .hlp-cat-row { position: relative; }
  .hlp-cat { display: flex; align-items: center; gap: 10px; width: calc(100% - 16px); margin: 0 8px; padding: 9px 10px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: var(--fs-small); color: var(--text); text-align: start; cursor: pointer; }
  .hlp-cat svg { width: 16px; height: 16px; color: var(--text-muted); flex: none; }
  .hlp-cat:hover { background: var(--surface-hover); }
  .hlp-cat.is-on { background: var(--surface-active, var(--surface-2)); font-weight: 700; color: var(--ink); }
  .hlp-cat small { color: var(--text-subtle); }
  .hlp-cat-tools { position: absolute; inset-inline-end: 10px; top: 50%; transform: translateY(-50%); display: none; gap: 0; background: var(--surface); border-radius: 8px; }
  .hlp-cat-row:hover .hlp-cat-tools, .hlp-cat-row:focus-within .hlp-cat-tools { display: flex; }
  .hlp-cat-tools .icon-btn { width: 26px; height: 26px; }
  .hlp-fb { list-style: none; margin: 0; padding: 0 20px 16px; display: grid; gap: 12px; }
  .hlp-fb p { margin: 0 0 2px; font-size: var(--fs-small); color: var(--text); }
  .hlp-icons { border: 0; margin: 0; padding: 0; }
  .hlp-icon-grid { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .hlp-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; border: 1.5px solid var(--line); cursor: pointer; color: var(--text-muted); }
  .hlp-icon svg { width: 17px; height: 17px; }
  .hlp-icon.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
  .hlp-icon:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
  .hlp-editor { display: grid; gap: 20px; align-items: start; }
  @media (min-width: 1200px) { .hlp-editor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hlp-preview { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; } }
  .hlp-md { font-family: var(--font-mono); font-size: 13.5px; line-height: 1.6; min-height: 380px; }
  .hlp-preview { padding: 20px 24px; border-radius: var(--r-xl); background: var(--surface); border: 1px dashed var(--line-strong); }
  .hlp-prose { font-size: 15px; line-height: 1.7; color: var(--text); overflow-wrap: anywhere; }
  .hlp-prose h1 { font-family: var(--font-display); font-size: 1.8rem; letter-spacing: -0.03em; line-height: 1.1; margin: 6px 0 8px; color: var(--ink); }
  .hlp-prose h2 { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -0.02em; margin: 1.6em 0 .5em; color: var(--ink); }
  .hlp-prose h3 { font-size: 1.05rem; margin: 1.3em 0 .4em; color: var(--ink); }
  .hlp-prose code { font-family: var(--font-mono); font-size: .88em; padding: 2px 6px; border-radius: 6px; background: var(--surface-sunken); }
  .hlp-prose pre { padding: 14px 16px; border-radius: 12px; background: var(--coach-bg); color: var(--coach-muted); border: 1px solid var(--coach-line); overflow-x: auto; }
  .hlp-prose pre code { background: none; padding: 0; color: inherit; }
  .hlp-prose img { max-width: 100%; border-radius: 12px; }
  .hlp-prose blockquote { margin: 1em 0; padding: 10px 16px; border-inline-start: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0; border-start-end-radius: 12px; border-end-end-radius: 12px; }
  .hlp-prose table { width: 100%; border-collapse: collapse; font-size: 14px; }
  .hlp-prose th, .hlp-prose td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: start; }
  .hlp-prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
  .hlp-lead { font-size: 1.05rem; color: var(--text-muted); }
}

/* Console → Status (ADR-0035) ----------------------------------------------------------------- */
@layer components {
  .stc-banner { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--e1); }
  .stc-banner b { display: block; color: var(--ink); }
  .stc-banner small { color: var(--text-muted); font-size: 13px; }
  .stc-dot, .st-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: var(--line-strong); }
  .stc-banner.is-ok .stc-dot, .st-dot.is-ok { background: var(--success, #10B981); box-shadow: 0 0 0 5px var(--success-soft); }
  .stc-banner.is-warn .stc-dot, .st-dot.is-warn { background: var(--warning); box-shadow: 0 0 0 5px var(--warning-soft); }
  .stc-banner.is-bad .stc-dot, .st-dot.is-bad { background: var(--danger); box-shadow: 0 0 0 5px var(--danger-soft); }
  .stc-banner.is-maint .stc-dot, .st-dot.is-maint { background: var(--info); box-shadow: 0 0 0 5px var(--info-soft); }
  .st-dot { width: 9px; height: 9px; }
  .stc-grid { display: grid; gap: 20px; align-items: start; }
  @media (min-width: 1150px) { .stc-grid { grid-template-columns: minmax(0, 1fr) 380px; } }
  .stc-inc { display: grid; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line); }
  .stc-inc-title { margin: 2px 0 0; font-size: 15.5px; color: var(--ink); }
  .stc-updates { list-style: none; margin: 0; padding-block: 0; padding-inline: 12px 0; display: grid; gap: 8px; border-inline-start: 2px solid var(--line); font-size: 13px; color: var(--text-muted); }
  .stc-updates b { color: var(--ink); }
  .stc-updates p { margin: 2px 0 0; color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
  .stc-post { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--surface-2); }
  .stc-post .select { justify-self: start; width: auto; min-width: 180px; }
  .stc-recent, .stc-comps, .stc-checks { list-style: none; margin: 0; padding: 0 8px 10px; display: grid; }
  .stc-recent li, .stc-comps li, .stc-checks li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: var(--fs-small); min-width: 0; }
  .stc-recent li + li, .stc-comps li + li, .stc-checks li + li { border-top: 1px solid var(--line); }
  .stc-comps .select { width: auto; flex: none; max-width: 150px; }
  .stc-affects { border: 0; margin: 0; padding: 0; min-width: 0; }
  .stc-affect-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 6px; }
}

/* The app-wide status notice (ADR-0035) */
@layer components {
  .status-note { display: flex; align-items: center; gap: 10px; margin: 10px 16px 0; padding: 10px 14px; border-radius: 14px; font-size: 14px; font-weight: 600; min-width: 0; }
  .status-note.is-bad { background: var(--danger-soft); color: var(--danger); }
  .status-note.is-warn { background: var(--warning-soft); color: var(--warning); }
  .status-note.is-maint { background: var(--info-soft); color: var(--info); }
  .status-note b { color: inherit; }
  .status-note-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: currentColor; animation: status-pulse 1.8s ease-in-out infinite; }
  .status-note-go { display: inline-flex; align-items: center; gap: 4px; flex: none; }
  .status-note-go svg { width: 15px; height: 15px; }
  @keyframes status-pulse { 50% { opacity: .35; } }
  @media (prefers-reduced-motion: reduce) { .status-note-dot { animation: none; } }
  @media (max-width: 640px) { .status-note { margin: 8px 10px 0; padding: 8px 12px; font-size: 13px; } }
}

/* Console oversight: health, content, security events, announcements (ADR-0036) */
@layer components {
  .hl-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 1100px) { .hl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hl-grid > :first-child { grid-column: 1 / -1; } }
  .hl-state { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
  .hl-state.is-ok { background: var(--success-soft); color: var(--success); }
  .hl-state.is-warn { background: var(--warning-soft); color: var(--warning); }
  .hl-state.is-bad { background: var(--danger-soft); color: var(--danger); }
  .hl-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 20px; }
  .hl-job { display: flex; align-items: flex-start; gap: 12px; padding: 12px 20px; border-top: 1px solid var(--line); min-width: 0; }
  .hl-job small { display: block; }
  .hl-job small.hl-err { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .hl-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; margin: 0; padding: 16px 20px; }
  .card-body .hl-stats { padding: 0; }
  .hl-stats.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hl-stats > div { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
  .hl-stats dt { font-size: 12px; color: var(--text-muted); }
  .hl-stats dd { margin: 2px 0 0; font-size: 20px; font-weight: 700; color: var(--ink); }
  .hl-stats > .is-bad { background: var(--danger-soft); } .hl-stats > .is-bad dd { color: var(--danger); }
  .hl-stats > .is-warn { background: var(--warning-soft); } .hl-stats > .is-warn dd { color: var(--warning); }
  .hl-errors { list-style: none; margin: 0; padding: 4px 8px 10px; display: grid; }
  .card-body .hl-errors { padding: 0; }
  .hl-errors li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: var(--fs-small); min-width: 0; }
  .hl-errors li + li { border-top: 1px solid var(--line); }
  .hl-errors .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .progress.is-bad > span { background: var(--danger); }

  .card > .pager { margin: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-lg, 16px) var(--r-lg, 16px); }
  .ct-select { width: auto; flex: none; max-width: 190px; }
  .table tr.is-dim > td > :not(.badge) { opacity: .55; }
  .ct-take > td { background: var(--surface-2); }
  .ct-take-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
  .ct-take-form .select { width: auto; }
  @media (max-width: 640px) { .toolbar .ct-select { max-width: none; flex: 1 1 140px; } .ct-take-form > * { flex: 1 1 100%; } }

  .se-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 20px; border: 0; border-top: 1px solid var(--line); background: none; text-align: start; font: inherit; color: inherit; cursor: pointer; min-width: 0; }
  .se-row:hover { background: var(--surface-hover, var(--surface-2)); }
  .se-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .se-count { flex: none; min-width: 38px; padding: 4px 8px; border-radius: 10px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--surface-sunken); color: var(--ink); }
  .se-count.is-hot { background: var(--danger-soft); color: var(--danger); }
  .se-dot { display: inline-block; width: 8px; height: 8px; margin-inline-end: 8px; border-radius: 50%; background: var(--success); vertical-align: 1px; }
  .se-dot.is-bad { background: var(--danger); }
  .se-dot.is-warn { background: var(--warning); }

  .an-grid { align-items: start; }
  .an-row { display: grid; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--line); }
  .an-row:first-child { border-top: 0; }
  .an-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
  .an-meta .cluster { margin-inline-start: auto; }
  .checkbox-row { display: flex; align-items: center; gap: 10px; font-size: var(--fs-small); color: var(--ink); cursor: pointer; }
  .checkbox-row input { width: 18px; height: 18px; accent-color: var(--accent); }
}

/* The in-app announcement bar (ADR-0036) */
@layer components {
  .annc { display: flex; align-items: center; gap: 12px; margin: 10px 16px 0; padding-block: 10px; padding-inline: 14px 12px; border-radius: 14px; font-size: 14px; min-width: 0; background: var(--info-soft); color: var(--ink); }
  .annc.is-preview { margin: 0; }
  .annc.is-success { background: var(--success-soft); }
  .annc.is-warning { background: var(--warning-soft); }
  .annc.is-promo { background: linear-gradient(100deg, var(--violet-600), #6d28d9 55%, #0f766e); color: #fff; }
  .annc-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: rgb(255 255 255 / .55); color: var(--info); }
  .annc.is-success .annc-icon { color: var(--success); }
  .annc.is-warning .annc-icon { color: var(--warning); }
  .annc.is-promo .annc-icon { background: rgb(255 255 255 / .16); color: #C2F45B; }
  .annc-icon svg { width: 17px; height: 17px; }
  .annc-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; column-gap: 8px; }
  .annc-text b { color: inherit; font-weight: 700; }
  .annc-text span { opacity: .82; overflow-wrap: anywhere; }
  .annc-go { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: 13px; background: var(--surface); color: var(--ink); text-decoration: none; }
  .annc.is-promo .annc-go { background: #fff; color: var(--violet-700); }
  .annc-go svg { width: 14px; height: 14px; }
  .annc-x { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 10px; background: none; color: inherit; opacity: .7; cursor: pointer; }
  .annc-x:hover { opacity: 1; background: rgb(0 0 0 / .06); }
  .annc-x svg { width: 16px; height: 16px; }
  @media (max-width: 640px) {
    .annc { margin: 8px 10px 0; flex-wrap: wrap; font-size: 13px; }
    .annc-text { flex-basis: calc(100% - 90px); }
    .annc-go { order: 3; margin-inline-start: 42px; }
  }
}

/* css/components/auth.css */
/* Auth + onboarding: split stage. Left = calm form on an aurora canvas, right = dark living showcase. */
@layer components {
  .auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); min-height: 100dvh; gap: 0; background: var(--canvas); }
  .auth-main { position: relative; display: flex; flex-direction: column; min-height: 100dvh; overflow: hidden; isolation: isolate; }
  .auth-aurora { position: absolute; z-index: -1; opacity: .75; }
  :root[data-theme="dark"] .auth-aurora { opacity: .55; }
  .auth-top { display: flex; align-items: center; justify-content: space-between; padding: 24px clamp(20px, 5vw, 56px); }
  .auth-content { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; align-items: center; padding: 12px clamp(20px, 5vw, 56px) 32px; }
  .auth-panel { width: 100%; max-width: 440px; margin: 0 auto; }
  .auth-title { font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.1rem); line-height: 1.02; letter-spacing: -0.045em; margin: 18px 0 10px; }
  .auth-title em.accent, .onb-title em.accent { font-size: 1.08em; letter-spacing: -0.02em; background: linear-gradient(95deg, var(--emerald-600), var(--violet-500)); -webkit-background-clip: text; background-clip: text; color: transparent; padding-inline-end: .06em; }
  :root[data-theme="dark"] .auth-title em.accent, :root[data-theme="dark"] .onb-title em.accent { background: linear-gradient(95deg, #5FE6AE, #B9A9FF); -webkit-background-clip: text; background-clip: text; }
  .auth-sub { color: var(--text-muted); font-size: 0.975rem; max-width: 380px; }
  .auth-form { margin-top: 28px; display: grid; gap: 16px; }
  .auth-alt { margin-top: 26px; font-size: var(--fs-body); color: var(--text-muted); }
  .auth-alt a { color: var(--ink); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
  .auth-alt a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .auth-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 18px clamp(20px, 5vw, 56px) 22px; font-size: var(--fs-small); color: var(--text-subtle); }
  .auth-foot a:hover { color: var(--ink); }
  .auth-fineprint { font-size: var(--fs-micro); color: var(--text-subtle); text-align: center; }
  .auth-fineprint a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }

  .field-icon { position: relative; }
  .field-icon > svg { position: absolute; inset-inline-start: 16px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: var(--text-subtle); pointer-events: none; z-index: 1; transition: color var(--t-fast); }
  .field-icon > .input { padding-inline-start: 46px; }
  .field-icon:focus-within > svg { color: var(--accent-text); }
  .field-icon > .field-action { position: absolute; inset-inline-end: 8px; top: 50%; translate: 0 -50%; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: var(--text-subtle); }
  .field-icon > .field-action:hover { color: var(--ink); background: var(--surface-hover); }
  .field-icon > .field-action svg { width: 18px; height: 18px; }
  .field-icon > .input:has(+ .field-action), .field-icon > .input.has-action { padding-inline-end: 52px; }
  .auth .input-lg { background: var(--glass-strong); border-color: var(--line-strong); }
  :root[data-theme="dark"] .auth .input-lg { background: rgb(255 255 255 / .03); }

  .strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-top: 8px; }
  .strength > i { height: 4px; border-radius: 4px; background: var(--line-strong); transition: background var(--t-base); }
  .strength[data-score="1"] > i:nth-child(-n+1) { background: var(--danger); }
  .strength[data-score="2"] > i:nth-child(-n+2) { background: var(--tangerine-500); }
  .strength[data-score="3"] > i:nth-child(-n+3) { background: var(--lime-500); }
  .strength[data-score="4"] > i { background: var(--emerald-500); }

  .theme-icon-light { display: none; }
  :root[data-theme="dark"] .theme-icon-light { display: block; }
  :root[data-theme="dark"] .theme-icon-dark { display: none; }

  .brand-mark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--ink); letter-spacing: -0.03em; }
  .brand-mark svg { width: 34px; height: 34px; }

  /* ---- Stage ---- */
  .auth-stage { position: sticky; top: 0; height: 100dvh; margin-block: 12px; margin-inline: 0 12px; height: calc(100dvh - 24px); border-radius: var(--r-2xl); overflow: hidden; color: #fff; background: var(--grad-ink); box-shadow: var(--e3); }
  .stage-glow { position: absolute; inset: -20%; background: radial-gradient(40% 35% at 30% 30%, rgb(43 227 162 / .28), transparent 70%), radial-gradient(35% 35% at 75% 25%, rgb(124 92 255 / .38), transparent 70%), radial-gradient(40% 40% at 60% 90%, rgb(255 122 61 / .18), transparent 70%); animation: aurora-drift 24s ease-in-out infinite alternate; pointer-events: none; }
  .stage-inner { position: relative; z-index: 1; height: 100%; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(24px, 3vw, 40px); }
  .stage-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .stage-kicker { font-size: var(--fs-micro); letter-spacing: .12em; text-transform: uppercase; color: rgb(255 255 255 / .5); font-weight: 600; }
  .stage-visual { position: relative; display: grid; place-items: center; min-height: 0; }
  .scene { position: absolute; inset: 0; display: grid; place-items: center; }
  .scene-enter { transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out), filter 600ms var(--ease-out); }
  .scene-leave { transition: opacity 300ms var(--ease-in); position: absolute; }
  .scene-start { opacity: 0; transform: translateY(16px) scale(.98); filter: blur(8px); }
  .stage-copy { text-align: center; max-width: 460px; margin: 0 auto; min-height: 132px; }
  .stage-copy h2 { color: #fff; font-size: clamp(1.6rem, 1.1rem + 1.3vw, 2.2rem); line-height: 1.08; letter-spacing: -0.035em; }
  .stage-copy h2 em.accent { color: #C2F45B; font-size: 1.1em; }
  .stage-copy p { margin-top: 10px; color: rgb(255 255 255 / .62); font-size: .95rem; }
  .stage-dots { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
  .stage-dots button { width: 8px; height: 8px; border-radius: 8px; background: rgb(255 255 255 / .25); transition: width var(--t-base) var(--ease-out), background var(--t-base); }
  .stage-dots button.is-on { width: 28px; background: #fff; }

  .auth-stage .phone { width: min(250px, 58%); }
  .auth-stage .glass, .onb-stage .glass { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .12); box-shadow: 0 20px 50px -20px rgb(0 0 0 / .6); color: #fff; }
  .float-card { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; min-width: 180px; }
  .float-card small { display: block; font-size: 11px; color: rgb(255 255 255 / .62); font-weight: 600; }
  .float-card b { display: block; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; color: #fff; line-height: 1.2; }
  .float-card.g-brand small { color: rgb(3 23 15 / .6); } .float-card.g-brand b { color: var(--forest-950); }
  .float-card > svg { width: 20px; height: 20px; }
  .fc-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; }
  .fc-icon svg { width: 18px; height: 18px; }
  .fc-qr { width: 64px; height: 64px; padding: 6px; background: #fff; border-radius: 12px; }
  .fc-qr svg { width: 100%; height: 100%; }
  .float-card .delta-up { background: rgb(194 244 91 / .18); color: #C2F45B; }

  /* Mini page inside phones */
  .mini-page { height: 100%; overflow: hidden; background: linear-gradient(180deg, #FFF6EE, #FFFFFF 55%); color: #111; text-align: center; font-family: var(--font-sans); }
  .mini-cover { height: 30%; background: var(--grad-sunset); border-radius: 0 0 28px 28px; }
  .mini-avatar { width: 64px; height: 64px; margin: -34px auto 0; border-radius: 50%; border: 3px solid #fff; background: linear-gradient(135deg, #0B3B2A, #0BC284); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; box-shadow: 0 10px 20px -8px rgb(0 0 0 / .35); }
  .mini-name { margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 4px; }
  .mini-name svg { width: 14px; height: 14px; color: #0BC284; }
  .mini-bio { font-size: 11px; color: #6B736C; margin-top: 2px; }
  .mini-socials { display: flex; justify-content: center; gap: 8px; margin: 10px 0 12px; }
  .mini-socials i { width: 22px; height: 22px; border-radius: 50%; background: #111; opacity: .85; }
  .mini-link { margin: 0 14px 8px; height: 36px; border-radius: 14px; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; background: #fff; box-shadow: 0 4px 14px -6px rgb(0 0 0 / .18), 0 0 0 1px rgb(0 0 0 / .05); }
  .mini-link.is-hero { background: #111; color: #fff; }
  .mini-card { margin: 12px 14px 0; padding: 12px; border-radius: 16px; background: #111; color: #fff; text-align: start; display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 2px; }
  .mini-card b { font-size: 12px; color: #fff; } .mini-card span { font-size: 10px; opacity: .6; grid-row: 2; }
  .mini-card i { grid-row: span 2; font-style: normal; font-size: 10.5px; font-weight: 700; padding: 6px 10px; border-radius: 10px; background: #FF7A3D; }

  .stage-panel { width: min(430px, 86%); padding: 22px; border-radius: 24px; }
  .sp-label { color: rgb(255 255 255 / .6); font-weight: 600; font-size: 12px; }
  .sp-value { font-family: var(--font-display); font-size: 2.2rem; font-weight: 700; letter-spacing: -0.04em; color: #fff; line-height: 1.1; }
  .sp-bars { height: 150px; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 10px; align-items: end; margin: 18px 0 12px; }
  .sp-bar { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; }
  .sp-bar span { display: block; border-radius: 7px; }
  .sp-bar .seg-a { background: #EDEFEE; }
  .sp-bar .seg-b { background: #C2F45B; background-image: repeating-linear-gradient(135deg, rgb(0 0 0 / .18) 0 2px, transparent 2px 6px); }

  .assist-demo { display: grid; gap: 14px; }
  .ad-prompt { display: flex; gap: 10px; align-items: flex-start; }
  .ad-avatar { width: 32px; height: 32px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--grad-violet); }
  .ad-avatar svg { width: 16px; height: 16px; }
  .ad-prompt p { font-size: 13.5px; line-height: 1.5; color: rgb(255 255 255 / .9); padding: 10px 12px; border-radius: 14px; border-start-start-radius: 4px; background: rgb(124 92 255 / .28); border: 1px solid rgb(154 131 255 / .35); }
  .ad-build { display: grid; gap: 8px; padding: 12px; border-radius: 18px; background: rgb(255 255 255 / .96); }
  .ad-block { height: 12px; border-radius: 8px; background: linear-gradient(90deg, #EEF0EC 25%, #F8F9F6 50%, #EEF0EC 75%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; margin: 0 auto; width: 80%; }
  .ad-cover { height: 58px; width: 100%; background: var(--grad-sunset); animation: none; border-radius: 12px; }
  .ad-btn { height: 30px; width: 100%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; color: #fff; background: #1D1410; animation: none; }
  .ad-btn.is-soft { background: #FFE6D6; color: #9A3A0C; }
  .ad-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; height: auto; background: none; animation: none; width: 100%; }
  .ad-row i { height: 44px; border-radius: 10px; background: #FFF1E7; }
  .ad-status { font-size: 12px; color: rgb(255 255 255 / .7); display: flex; align-items: center; gap: 8px; }
  .ad-status b { color: #fff; }
  @keyframes shimmer { to { background-position: -200% 0; } }

  /* ---- Onboarding ---- */
  .onb-top { padding-bottom: 8px; }
  .onb-progress { display: flex; align-items: center; gap: 14px; padding: 0 clamp(20px, 5vw, 56px); }
  .onb-progress .stepper { flex: 1; max-width: 520px; }
  .onb-content { align-items: start; padding-top: clamp(20px, 5vh, 56px); overflow-y: auto; }
  .onb-panel { width: 100%; max-width: 620px; margin: 0 auto; }
  .onb-title { font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.2rem); line-height: 1.02; letter-spacing: -0.045em; margin-bottom: 10px; }
  .onb-kinds { display: grid; gap: 12px; margin-top: 28px; }
  .onb-kinds .pick-wide { padding-block: 18px; padding-inline: 20px 58px; }
  .onb-kind-art { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; color: #fff; transform: rotate(-6deg); transition: transform var(--t-slow) var(--ease-spring); box-shadow: 0 14px 28px -14px rgb(0 0 0 / .5); }
  .onb-kind-art svg { width: 28px; height: 28px; }
  .onb-kind-personal { background: var(--grad-sunset); }
  .onb-kind-business { background: var(--grad-brand); color: var(--forest-950); }
  .onb-kind-agency { background: var(--grad-violet); }
  .onb-kind-organization { background: var(--grad-ink); }
  .pick:hover .onb-kind-art, .pick:has(input:checked) .onb-kind-art { transform: rotate(0) scale(1.05); }
  .onb-industries { margin-top: 28px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .onb-industries .pick { min-height: 118px; }
  .onb-nav { position: sticky; bottom: 0; display: flex; justify-content: space-between; gap: 12px; padding: 18px clamp(20px, 5vw, 56px) 24px; background: linear-gradient(transparent, var(--canvas) 40%); z-index: 2; }
  .onb-nav > * { min-width: 120px; }
  .onb-advanced { margin-top: 4px; border-radius: 14px; border: 1px solid var(--line); padding: 12px 14px; background: var(--glass-strong); }
  .onb-advanced summary { cursor: pointer; font-size: var(--fs-small); color: var(--text-muted); display: flex; align-items: center; gap: 8px; list-style: none; }
  .onb-advanced summary::-webkit-details-marker { display: none; }
  .onb-advanced[open] summary { margin-bottom: 12px; }
  .my-5 { margin-top: 20px; margin-bottom: 20px; }
  .assist-box.is-active { box-shadow: var(--e-glow-violet); }

  .handle-field { display: flex; align-items: center; min-height: 60px; border-radius: 16px; border: 1.5px solid var(--line-strong); background: var(--glass-strong); padding-block: 0; padding-inline: clamp(12px, 4vw, 18px) 8px; min-width: 0; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
  .handle-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft-2); }
  .handle-field.is-ok { border-color: var(--accent); }
  .handle-field.is-bad { border-color: var(--danger); }
  .handle-host { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: clamp(1rem, 4.6vw, 1.2rem); font-weight: 600; color: var(--text-subtle); letter-spacing: -0.02em; }
  .handle-field input { flex: 1 1 0; width: 0; min-width: 0; border: 0; background: transparent; outline: none; font-family: var(--font-display); font-size: clamp(1rem, 4.6vw, 1.2rem); font-weight: 700; color: var(--ink); letter-spacing: -0.02em; height: 56px; }
  .handle-state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 700; padding: 0 10px; height: 32px; border-radius: 10px; white-space: nowrap; }
  .handle-state svg { width: 15px; height: 15px; }
  /* Narrow phones (R2): the state collapses to its icon (the word stays in the accessibility tree) so the typed
     address keeps the room. */
  @media (max-width: 380px) { .handle-state { flex: none; font-size: 0; gap: 0; padding: 0 8px; } }
  .is-ok .handle-state { color: var(--accent-text); background: var(--accent-soft); }
  .is-bad .handle-state { color: var(--danger); background: var(--danger-soft); }
  :root[data-theme="dark"] .handle-field { background: rgb(255 255 255 / .03); }

  .onb-done { padding-top: 4vh; }
  .avatar-stack { display: flex; margin-bottom: 22px; }
  .avatar-stack .avatar { border: 3px solid var(--canvas); margin-inline-start: -10px; font-family: var(--font-display); font-weight: 700; }
  .avatar-stack .avatar:first-child { margin-inline-start: 0; }
  .onb-next { display: grid; gap: 10px; margin-top: 30px; }
  .onb-next-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; transition: transform var(--t-base) var(--ease-out); }
  .onb-next-card:hover { transform: translateX(calc(4px * var(--dir-sign, 1))); }
  .onb-next-card > span:nth-child(2) { flex: 1; display: grid; }
  .onb-next-card b { font-family: var(--font-display); color: var(--ink); font-size: 1rem; }
  .onb-next-card small { color: var(--text-muted); font-size: var(--fs-small); }
  .onb-next-card .fc-icon { color: #fff; }

  .onb-os { width: min(460px, 100%); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 10px; }
  .onb-os-node { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding-block: 0; padding-inline: 12px 16px; border-radius: var(--r-pill); color: rgb(255 255 255 / .55); font-size: var(--fs-small); font-weight: 600; background: rgb(255 255 255 / .05); border: 1px dashed rgb(255 255 255 / .2); transition: all var(--t-base) var(--ease-spring); }
  .onb-os-node svg { width: 16px; height: 16px; }
  .onb-os-node.is-on { color: #fff; border: 1px solid rgb(194 244 91 / .5); background: rgb(194 244 91 / .12); transform: translateY(-2px); box-shadow: 0 10px 30px -12px rgb(194 244 91 / .5); }
  .onb-os-node.is-on svg { color: var(--lime-400); }
  .onb-mod { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--text-subtle); }
  .onb-mod .os-dot { width: 6px; height: 6px; }
  .onb-mod.is-live { color: var(--accent-text); }
  .onb-mod.is-building { color: var(--assist-text); }
  /* Onboarding stage: copy in its own top row, the visual in the row below, anchored to the bottom edge and
     cropped by the panel so it can never reach the text at any panel height (sized off the container). */
  .onb-stage { container: onbstage / size; }
  .onb-stage-inner { grid-template-rows: auto minmax(0, 1fr); gap: clamp(16px, 5cqh, 44px); padding-block-end: 0; }
  .onb-stage-head { display: grid; gap: clamp(14px, 3.4cqh, 28px); position: relative; z-index: 4; }
  .onb-stage-copy { text-align: start; margin: 0; max-width: 26ch; min-height: 0; animation: onb-copy-in 520ms var(--ease-out) both; }
  .onb-stage-copy h2 { font-size: clamp(1.55rem, 1rem + 2.6cqw, 2.35rem); text-wrap: balance; }
  .onb-stage-copy p { margin-top: 8px; font-size: .95rem; }
  @keyframes onb-copy-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .onb-stage-visual { position: relative; display: block; min-height: 0; z-index: 1; }
  .onb-stage-visual::before { content: ""; position: absolute; inset-inline: 10%; inset-block: 18% -30%; background: radial-gradient(50% 50% at 50% 50%, rgb(124 92 255 / .32), transparent 70%); filter: blur(30px); pointer-events: none; }
  .onb-fan { position: absolute; inset-block-start: clamp(4px, 2cqh, 24px); inset-inline: 0; height: 0; display: flex; justify-content: center; }
  .onb-fan .phone { position: absolute; top: 0; width: clamp(190px, calc(46cqh - 70px), 320px); transition: transform var(--t-lazy) var(--ease-out); }
  .onb-fan-0 { transform: translateX(-60%) translateY(16%) rotate(-8deg) scale(.9); z-index: 1; opacity: .88; }
  .onb-fan-1 { transform: scale(1.04); transform-origin: top center; z-index: 3; }
  .onb-fan-2 { transform: translateX(60%) translateY(16%) rotate(8deg) scale(.9); z-index: 2; opacity: .88; }
  .onb-fan .page-preview { --scale: .5 !important; }
  /* Keep the scaled page filling the screen whatever size the phone is drawn at. */
  .onb-stage .page-preview.is-phone { width: calc(100% / var(--scale)); margin-bottom: 0; }
  .onb-stage .onb-fan .page-preview { --scale: .74 !important; }
  .onb-stage .onb-phone-wrap .page-preview { --scale: .8 !important; }
  .onb-phone-wrap { position: absolute; inset-block-start: clamp(4px, 2cqh, 24px); inset-inline-end: clamp(20px, 12cqw, 110px); }
  .onb-phone-wrap .phone { width: clamp(210px, calc(48cqh - 70px), 340px); max-width: none; }
  .onb-phone-wrap .onb-urlbar { position: absolute; z-index: 4; inset-block-start: 16%; inset-inline-end: calc(100% - 36px); white-space: nowrap; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .onb-os-window { position: absolute; inset-block: clamp(4px, 2cqh, 24px) -48px; inset-inline: 0 -14%; border-radius: 26px; padding: 0 0 20px; overflow: hidden; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  .onb-os-bar { display: flex; align-items: center; gap: 6px; height: 44px; padding-inline: 18px; border-block-end: 1px solid rgb(255 255 255 / .1); font-size: 12px; font-weight: 600; color: rgb(255 255 255 / .55); }
  .onb-os-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgb(255 255 255 / .2); }
  .onb-os-bar i:first-child { background: #FF9A5C; } .onb-os-bar i:nth-child(2) { background: #C2F45B; } .onb-os-bar i:nth-child(3) { background: #9A83FF; }
  .onb-os-bar span { margin-inline-start: 10px; }
  .onb-os-window .onb-os { width: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); justify-content: start; padding-block: 18px 0; padding-inline: 18px calc(14% + 18px); }
  .onb-os-window .onb-os-node { justify-content: flex-start; }
  @container onbstage (max-height: 720px) {
    .onb-stage-copy h2 { font-size: clamp(1.4rem, .9rem + 2.2cqw, 1.95rem); }
    .onb-stage-copy p { font-size: .88rem; margin-top: 6px; }
    .onb-os-window .onb-os { gap: 8px; } .onb-os-window .onb-os-node { height: 38px; }
  }
  @container onbstage (max-height: 760px) {
    .onb-stage .onb-fan .page-preview { --scale: .55 !important; }
    .onb-stage .onb-phone-wrap .page-preview { --scale: .6 !important; }
  }
  @container onbstage (max-width: 600px) {
    .onb-phone-wrap .onb-urlbar { inset-block-start: 50px; inset-inline-end: 50%; translate: calc(50% * var(--dir-sign, 1)) 0; }
  }
  @media (prefers-reduced-motion: reduce) { .onb-stage-copy { animation: none; } }
  @container onbstage (max-width: 520px) {
    .onb-fan-0 { transform: translateX(-52%) translateY(16%) rotate(-8deg) scale(.86); }
    .onb-fan-2 { transform: translateX(52%) translateY(16%) rotate(8deg) scale(.86); }
  }
  .onb-phone-wrap .phone-screen { transition: opacity var(--t-base), filter var(--t-base); }
  .onb-phone-wrap .phone-screen.is-loading { opacity: .5; filter: blur(3px); }
  .onb-urlbar { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: 13px; color: #fff; }
  .onb-urlbar svg { width: 14px; height: 14px; color: #C2F45B; }
  .onb-celebrate { animation: celebrate 1.2s var(--ease-spring) both; }
  @keyframes celebrate { 0% { transform: translateY(30px) scale(.9); opacity: 0; } 100% { transform: none; opacity: 1; } }

  .auth-teaser { display: none; }
  /* ---- Responsive ---- */
  @media (max-width: 1023px) {
    .auth { grid-template-columns: minmax(0, 1fr); }
    .auth-stage { display: none; }
    .auth-content { align-items: start; padding-top: 3vh; }
    .onb-industries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .onb-content { padding-bottom: 12px; }
    .auth-teaser { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin: 34px -20px 0; padding: 4px 20px 24px; scroll-padding-inline: 20px; scroll-snap-type: x mandatory; }
    .auth-teaser::-webkit-scrollbar { display: none; }
    .auth-teaser > div { flex: 0 0 78%; max-width: 300px; scroll-snap-align: start; padding: 16px; border-radius: 20px; display: grid; gap: 10px; }
    .auth-teaser b { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: -0.02em; color: inherit; }
    .auth-teaser p { font-size: 12.5px; opacity: .75; }
    .auth-teaser .fc-icon { background: rgb(255 255 255 / .16); }
  }
  @media (max-width: 640px) {
    .auth-top { padding: 16px 20px; }
    .auth-foot { justify-content: center; }
  }

  /* Legacy helpers still used by a few screens */
  .success-mark { width: 68px; height: 68px; margin: 0 auto 16px; border-radius: 22px; display: grid; place-items: center; background: var(--grad-forest); color: #fff; box-shadow: var(--e-glow); animation: pop var(--t-slow) var(--ease-spring) both; }
  .success-mark svg { width: 30px; height: 30px; }
  .divider-text { display: flex; align-items: center; gap: 12px; color: var(--text-subtle); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .08em; }
  .divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: var(--line); }
  @keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* Passkey sign-in (ADR-0030) */
@layer components {
  .auth-passkey { display: grid; gap: 12px; margin-top: 14px; }
  .auth-or { display: flex; align-items: center; gap: 12px; color: var(--text-subtle); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
  .auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
}

/* Onboarding: your brand (ADR-0030) */
@layer components {
  .onb-brand-group { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
  .onb-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
  .onb-swatch { width: 44px; height: 44px; border-radius: 14px; background: var(--sw, var(--surface)); border: 1px solid rgb(0 0 0 / .08); display: grid; place-items: center; color: var(--text-muted); cursor: pointer; transition: transform var(--t-fast), box-shadow var(--t-fast); }
  .onb-swatch:hover { transform: translateY(-1px); }
  .onb-swatch.is-on { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--ink); }
  .onb-swatch.is-template, .onb-swatch.is-custom { background: var(--surface); border-color: var(--line-strong); }
  .onb-swatch.is-custom { background: conic-gradient(from 90deg, #F06A2A, #D4A017, #0A8A5F, #2F6BFF, #7C5CFF, #E0457B, #F06A2A); color: #fff; }
  .onb-swatch.is-custom svg { filter: drop-shadow(0 1px 2px rgb(0 0 0 / .4)); }
  .onb-swatch:focus-visible, .onb-swatch:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
  .onb-swatch svg { width: 18px; height: 18px; }
  .onb-fonts { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
  .onb-font { display: grid; gap: 2px; justify-items: center; padding: 12px 8px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: border-color var(--t-fast); }
  .onb-font b { font-size: 26px; line-height: 1.1; color: var(--ink); font-weight: 600; }
  .onb-font small { font-size: 12px; color: var(--text-muted); font-weight: 600; }
  .onb-font.is-on { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
  .onb-logo { display: flex; align-items: center; gap: 14px; }
  .onb-logo-box { width: 72px; height: 72px; border-radius: 18px; border: 1px dashed var(--line-strong); background: var(--surface); display: grid; place-items: center; overflow: hidden; flex: none; color: var(--text-subtle); }
  .onb-logo-box img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
  .onb-logo-box > svg { width: 26px; height: 26px; }
}

/* R7A · honeypot (off-screen, not display:none so naive bots still fill it), captcha and email hints */
.auth-hp { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.auth-captcha { display: flex; justify-content: center; min-block-size: 65px; }
.auth-email-hint { margin-block-start: 6px; font-size: var(--text-sm, 0.875rem); color: var(--text-muted, inherit); }
.auth-email-hint .link-btn { background: none; border: 0; padding: 0; min-block-size: 44px; color: var(--brand, currentColor); font-weight: 600; text-decoration: underline; cursor: pointer; }
.undeliverable-banner { margin: 12px var(--gutter, 16px) 0; }
.undeliverable-banner a { font-weight: 600; text-decoration: underline; }
/* R10B · built-in browser check */
.auth-pow { display: flex; align-items: center; gap: .5rem; min-block-size: 1.5rem; font-size: .8125rem; color: var(--text-muted, currentColor); }
.auth-pow-dot { inline-size: .625rem; block-size: .625rem; border-radius: 50%; background: var(--border-strong, currentColor); flex: none; }
.auth-pow.is-busy .auth-pow-dot { background: var(--warning, #d97706); animation: auth-pow-pulse 1s ease-in-out infinite; }
.auth-pow.is-done .auth-pow-dot { background: var(--success, #16a34a); }
@keyframes auth-pow-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .auth-pow.is-busy .auth-pow-dot { animation: none; } }

/* css/components/developers.css */
/* Developers: API tokens in settings and the public API reference (ADR-0046) -------- */
@layer components {
  .dv-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 16px; align-items: start; }
  .dv-row.is-off { opacity: .62; }
  .dv-hint { font-family: var(--font-mono, ui-monospace, monospace); font-size: .75rem; font-weight: 500; color: var(--text-muted); margin-inline-start: 6px; }
  .dv-scopes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
  .dv-scopes .badge { font-family: var(--font-mono, ui-monospace, monospace); font-size: .6875rem; }
  .dv-reveal { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: 22px; border: 1.5px solid var(--accent); background: var(--accent-soft); margin-bottom: 16px; }
  .dv-reveal-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; color: #fff; flex: none; }
  .dv-reveal-icon svg { width: 20px; height: 20px; }
  .dv-token { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-block: 8px; padding-inline: 14px 8px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); max-width: 100%; }
  .dv-token code { font-family: var(--font-mono, ui-monospace, monospace); font-size: .875rem; overflow-wrap: anywhere; flex: 1; min-width: 0; user-select: all; }
  .dv-code { margin: 0; padding: 14px 16px; border-radius: 16px; background: #14161a; color: #e8e6e1; font-family: var(--font-mono, ui-monospace, monospace); font-size: .8125rem; line-height: 1.6; overflow-x: auto; white-space: pre; }
  .dv-code code { font: inherit; color: inherit; background: none; }
  .dv-notes { list-style: none; display: grid; gap: 12px; margin: 0; }
  .dv-notes li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: .875rem; color: var(--text-muted); line-height: 1.5; }
  .dv-notes svg { width: 18px; height: 18px; color: var(--ink); margin-top: 1px; }
  .dv-pick { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
  .dv-scope { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line); cursor: pointer; }
  .dv-scope:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
  .dv-scope input { margin-top: 3px; }
  .dv-scope code { font-family: var(--font-mono, ui-monospace, monospace); font-size: .6875rem; color: var(--text-muted); }
  .dv-scope small { display: block; color: var(--text-muted); font-size: .8125rem; }
  .dv-scope.is-off { opacity: .55; cursor: not-allowed; }

  /* Public reference */
  .dv-doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; }
  .dv-toc { position: sticky; top: 90px; display: grid; gap: 2px; font-size: .875rem; }
  .dv-toc a { padding: 6px 10px; border-radius: 10px; color: var(--text-muted); text-decoration: none; }
  .dv-toc a:hover { background: var(--surface-sunken); color: var(--ink); }
  .dv-toc b { padding: 14px 10px 4px; font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
  .dv-sec { display: grid; gap: 14px; padding-bottom: 36px; scroll-margin-top: 90px; }
  .dv-sec h2 { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: -0.03em; }
  .dv-sec p, .dv-sec li { color: var(--text-muted); line-height: 1.65; }
  .dv-sec ul { padding-inline-start: 1.2em; display: grid; gap: 4px; }
  .dv-sec code:not(.dv-code code) { font-family: var(--font-mono, ui-monospace, monospace); font-size: .85em; background: var(--surface-sunken); padding: 1px 6px; border-radius: 6px; }
  .dv-ep { border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: hidden; scroll-margin-top: 90px; }
  .dv-ep > summary { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; }
  .dv-ep > summary::-webkit-details-marker { display: none; }
  .dv-ep[open] > summary { border-bottom: 1px solid var(--line); }
  .dv-verb { font-family: var(--font-mono, ui-monospace, monospace); font-size: .6875rem; font-weight: 700; padding: 3px 8px; border-radius: 8px; min-width: 56px; text-align: center; background: var(--surface-sunken); }
  .dv-verb.is-get { background: #e3f1e8; color: #1f6b3d; }
  .dv-verb.is-post { background: #e6ecfb; color: #2d4fb3; }
  .dv-verb.is-patch { background: #fbf0dd; color: #8a5a10; }
  .dv-verb.is-delete { background: #fbe4e2; color: #a2322a; }
  .dv-path { font-family: var(--font-mono, ui-monospace, monospace); font-size: .875rem; font-weight: 600; }
  .dv-ep-body { padding: 14px 16px; display: grid; gap: 10px; }
  .dv-params { width: 100%; border-collapse: collapse; font-size: .8125rem; }
  .dv-params th, .dv-params td { text-align: start; padding: 6px 8px; border-top: 1px solid var(--line); vertical-align: top; }
  .dv-params th { color: var(--text-muted); font-weight: 600; font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; border-top: 0; }
  .dv-params td:first-child { font-family: var(--font-mono, ui-monospace, monospace); white-space: nowrap; }
  @media (max-width: 960px) { .dv-grid, .dv-doc { grid-template-columns: minmax(0, 1fr); } .dv-toc { position: static; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }
  @media (max-width: 640px) { .dv-reveal { flex-wrap: wrap; } }
}
@layer components {
  .dv-subtabs { margin-bottom: 16px; }
  .wh-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
  .wh-list { display: grid; gap: 6px; padding: 10px; }
  .wh-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border-radius: 16px; border: 1px solid transparent; text-align: start; width: 100%; background: none; cursor: pointer; }
  .wh-item:hover { background: var(--surface-2); }
  .wh-item.is-active { border-color: var(--accent); background: var(--accent-soft); }
  .wh-kind { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-sunken); color: var(--ink); font-weight: 700; font-size: .8125rem; }
  .wh-kind svg { width: 18px; height: 18px; }
  .wh-kind.is-slack { background: #f4ede4; color: #611f69; }
  .wh-kind.is-discord { background: #e8eafd; color: #4752c4; }
  .wh-head { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
  .wh-head h2 { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -0.02em; overflow-wrap: anywhere; }
  .wh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .wh-stat { padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
  .wh-stat small { display: block; color: var(--text-muted); font-size: .75rem; }
  .wh-stat b { font-size: .9375rem; }
  .wh-events { display: flex; flex-wrap: wrap; gap: 4px; }
  .wh-log { display: grid; }
  .wh-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line); font-size: .875rem; }
  .wh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); }
  .wh-dot.is-delivered { background: var(--success, #1f8a4c); }
  .wh-dot.is-failed { background: var(--warning); }
  .wh-dot.is-dead { background: var(--danger); }
  .wh-row code { font-family: var(--font-mono, ui-monospace, monospace); font-size: .8125rem; }
  .wh-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; }
  .wh-pick legend { grid-column: 1 / -1; }
  .wh-pick h4 { grid-column: 1 / -1; font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-top: 8px; }
  .wh-check { display: flex; gap: 8px; align-items: center; font-size: .875rem; }
  .wh-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .wh-kinds label { display: grid; justify-items: center; gap: 6px; padding: 14px 8px; border-radius: 16px; border: 1.5px solid var(--line); cursor: pointer; font-weight: 600; font-size: .875rem; }
  .wh-kinds label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
  .wh-json { max-height: 420px; overflow: auto; }
  .ig-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
  .ig-card { display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); }
  .ig-card header { display: flex; gap: 12px; align-items: center; }
  .ig-logo { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 1rem; color: #fff; flex: none; }
  .ig-logo svg { width: 20px; height: 20px; }
  .ig-card p { color: var(--text-muted); font-size: .875rem; line-height: 1.5; }
  .ig-card details summary { cursor: pointer; font-size: .875rem; font-weight: 600; }
  .ig-card ol { padding-inline-start: 1.2em; display: grid; gap: 6px; margin-top: 8px; font-size: .8125rem; color: var(--text-muted); line-height: 1.5; }
  .ig-card footer { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
  .ig-h { font-family: var(--font-display); font-size: 1.1rem; margin: 20px 0 10px; }
  @media (max-width: 960px) { .wh-grid { grid-template-columns: minmax(0, 1fr); } }
  @media (max-width: 640px) { .wh-stats { grid-template-columns: minmax(0, 1fr); } .wh-pick { grid-template-columns: minmax(0, 1fr); } .wh-row { grid-template-columns: auto minmax(0, 1fr) auto; } .wh-row .wh-when { display: none; } }
}
/* Templates marketplace (ADR-0048) */
@layer components {
  .mp-search { display: flex; align-items: center; gap: 10px; max-width: 520px; margin-top: 18px; padding: 0 16px; height: 50px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1); }
  .mp-search svg { width: 18px; height: 18px; color: var(--text-muted); }
  .mp-search input { flex: 1; border: 0; background: none; outline: none; font: inherit; min-width: 0; }
  .mp-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; align-items: center; }
  .mp-cats a { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-muted); text-decoration: none; font-size: .875rem; background: var(--surface); }
  .mp-cats a.is-active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
  .mp-cats .grow { flex: 1; }
  .mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
  .mp-card { display: grid; border-radius: 22px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; text-decoration: none; color: inherit; transition: box-shadow var(--t-fast), transform var(--t-fast); }
  .mp-card:hover { box-shadow: var(--e2, 0 8px 30px rgb(0 0 0 / .08)); transform: translateY(-2px); }
  .mp-thumb { height: 300px; overflow: hidden; position: relative; background: var(--surface-sunken); display: flex; justify-content: center; }
  .mp-thumb .page-preview { flex: none; }
  .mp-meta { display: grid; gap: 2px; padding: 12px 14px; border-top: 1px solid var(--line); }
  .mp-meta small { color: var(--text-muted); font-size: .8125rem; }
  .mp-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
  .mp-stage { display: flex; justify-content: center; padding: 28px; border-radius: 32px; background: var(--surface-sunken); }
  .mp-info { display: grid; gap: 16px; align-content: start; position: sticky; top: 100px; }
  .mp-info .btn { justify-self: start; }
  .mp-by { color: var(--text-muted); }
  .mp-notes { list-style: none; display: grid; gap: 8px; padding: 0; margin: 0; color: var(--text-muted); font-size: .9375rem; }
  .mp-notes li { display: flex; gap: 8px; align-items: center; }
  .mp-notes svg { width: 16px; height: 16px; color: var(--accent); }
  .mp-h { font-family: var(--font-display); font-size: 1.4rem; margin: 48px 0 16px; }
  .mk-row .mk-note { display: flex; gap: 6px; align-items: center; margin-top: 4px; color: var(--danger); font-size: .8125rem; }
  .mk-row .mk-note svg { width: 14px; height: 14px; }
  .mk-share { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 20px; }
  .mk-share-preview { display: flex; justify-content: center; }
  .mk-share-preview .phone { transform: scale(.8); transform-origin: top center; }
  .mk-use { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; }
  .mk-review { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; }
  .mk-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .875rem; }
  .mk-facts dt { color: var(--text-muted); }
  @media (max-width: 960px) { .mp-detail, .mk-use, .mk-review { grid-template-columns: minmax(0, 1fr); } .mp-info { position: static; } .mk-share { grid-template-columns: minmax(0, 1fr); } .mk-share-preview { display: none; } }
}
@layer components {
  /* Reviewers see every block: the console preview scrolls instead of cropping. */
  .mk-review .phone { aspect-ratio: auto; height: 640px; }
  .mk-review .phone-screen { overflow-y: auto; }
}
@layer components {
  .mp-card { position: relative; }
  .mp-card-link { font-weight: 700; color: inherit; text-decoration: none; }
  .mp-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* the whole card is the link */
  .mp-card-link:focus-visible { outline: none; }
  .mp-card:has(.mp-card-link:focus-visible) { box-shadow: var(--focus-ring); }
}
/* Partner programme (ADR-0049) */
@layer components {
  .pt-join { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 16px; align-items: start; }
  .pt-pitch { padding: 28px; color: #fff; border-radius: 26px; display: grid; gap: 14px; }
  .pt-pitch h2 { font-family: var(--font-display); font-size: 1.8rem; letter-spacing: -0.03em; color: #fff; }
  .pt-pitch ol { display: grid; gap: 10px; padding-inline-start: 1.2em; color: rgb(255 255 255 / .85); line-height: 1.5; }
  .pt-pitch b { color: #fff; }
  .pt-link { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
  .pt-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 16px; align-items: start; }
  .pt-details { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-mono, ui-monospace, monospace); font-size: .875rem; padding: 12px; border-radius: 12px; background: var(--surface-sunken); margin-top: 4px; }
  @media (max-width: 960px) { .pt-join, .pt-grid { grid-template-columns: minmax(0, 1fr); } }
}
@layer components {
  .pt-saved { display: inline-flex; align-items: center; gap: 6px; }
  .pt-saved svg { width: 16px; height: 16px; color: var(--accent); }
}

/* css/components/speed.css */
/* Batch 1 · speed (item 1): instant feedback while a page or an action loads (resources/js/speed.js). */
@layer components {
  /* Top progress bar: starts on press, trickles while the server works, completes and fades. */
  .nav-progress {
    position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 2147483000; height: 3px; pointer-events: none;
    transform-origin: left center; transform: scaleX(0); opacity: 0;
    background: linear-gradient(90deg, var(--emerald-400), var(--accent));
    box-shadow: 0 0 10px color-mix(in oklab, var(--accent) 55%, transparent);
  }
  [dir="rtl"] .nav-progress { transform-origin: right center; }
  .nav-progress[data-state="run"] { opacity: 1; animation: nav-progress-trickle 8s cubic-bezier(.08, .7, .2, 1) forwards; }
  .nav-progress[data-state="done"] { opacity: 0; transform: scaleX(1); transition: transform .18s var(--ease-out), opacity .3s .12s; }
  @keyframes nav-progress-trickle { 0% { transform: scaleX(0); } 6% { transform: scaleX(.3); } 40% { transform: scaleX(.7); } 100% { transform: scaleX(.94); } }

  /* The outgoing page steps back while the next one loads (only when that takes more than a blink). */
  #main { transition: opacity .16s var(--ease-out); }
  :root[data-nav-pending] #main { opacity: .55; cursor: progress; }
  :root[data-nav-pending] #main > * { pointer-events: none; }

  /* The control that started a Livewire request shows it at once (Livewire 4 sets data-loading on it). */
  [data-loading]:is(.btn:not(:has(.btn-spinner)), .icon-btn, .menu-item, .chip, .tab, [role="tab"], .segmented button, .nav-item, [wire\:click]) {
    cursor: progress; animation: loading-pulse 1s ease-in-out infinite;
  }
  [data-pressed]:is(.nav-item, .tabbar-item) { opacity: .8; }
  @keyframes loading-pulse { 50% { opacity: .55; } }

  /* A page card's thumbnail while it loads (ThumbCache): a soft placeholder in the page's own background. */
  .page-preview-inner[data-thumb-src]:empty { min-height: 100%; }
  .page-preview-inner[data-thumb-state="loading"]:empty, .page-preview-inner[data-thumb-src]:not([data-thumb-state]):empty {
    background: linear-gradient(100deg, transparent 30%, color-mix(in oklab, var(--surface) 35%, transparent) 50%, transparent 70%) 0 0 / 200% 100%;
    animation: thumb-shimmer 1.4s linear infinite;
  }
  @keyframes thumb-shimmer { to { background-position: -200% 0; } }

  @media (prefers-reduced-motion: reduce) {
    .page-preview-inner[data-thumb-src] { animation: none !important; }
    .nav-progress[data-state="run"] { animation: none; transform: scaleX(.7); }
    [data-loading] { animation: none !important; opacity: .65; }
    #main { transition: none; }
  }
  :root[data-motion="reduce"] .nav-progress[data-state="run"] { animation: none; transform: scaleX(.7); }
  :root[data-motion="reduce"] [data-loading] { animation: none !important; opacity: .65; }
}

/* css/components/projects.css */
/* Projects (owner item 15, batch 1 · L): index cards, detail sections, picker ----------------------------------------- */
@layer components {
  .pj-mark { --pj: var(--accent); display: inline-grid; place-items: center; flex: none; inline-size: 40px; block-size: 40px; border-radius: var(--r-md);
    background: color-mix(in srgb, var(--pj) 16%, var(--surface)); color: color-mix(in srgb, var(--pj) 78%, var(--ink));
    border: 1px solid color-mix(in srgb, var(--pj) 28%, var(--line)); }
  .pj-mark svg { inline-size: 20px; block-size: 20px; }
  .pj-mark-sm { inline-size: 30px; block-size: 30px; border-radius: var(--r-sm); }
  .pj-mark-sm svg { inline-size: 16px; block-size: 16px; }
  .pj-mark-lg { inline-size: 64px; block-size: 64px; border-radius: var(--r-xl); }
  .pj-mark-lg svg { inline-size: 30px; block-size: 30px; }
  .pj-emoji { font-size: 1.15em; line-height: 1; }
  .pj-mark-lg .pj-emoji { font-size: 32px; }
  .pj-mark-sm .pj-emoji { font-size: 15px; }
  .pj-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--pj); flex: none; }

  .pj-usage { padding-inline: 4px; }

  .pj-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 640px) { .pj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .pj-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .pj-grid-empty { grid-column: 1 / -1; }

  .pj-card { --pj: var(--accent); position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1); border-block-start: 3px solid var(--pj); min-inline-size: 0;
    transition: box-shadow var(--t-fast), transform var(--t-fast) var(--ease-out); }
  .pj-card:hover { box-shadow: var(--e2); }
  @media (prefers-reduced-motion: no-preference) { .pj-card:hover { transform: translateY(-1px); } }
  .pj-card.is-archived { opacity: .78; }
  .pj-card-head { display: flex; align-items: center; gap: 12px; min-inline-size: 0; }
  .pj-card-title { display: grid; min-inline-size: 0; flex: 1; }
  .pj-card-title a { font-weight: 650; color: var(--ink); text-decoration: none; font-size: 1.02rem; }
  .pj-card-title a:focus-visible { outline: none; }
  .pj-card-title a:focus-visible::after { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-lg); }
  .pj-card-menu, .pj-subs, .pj-card .pj-sub { position: relative; z-index: 2; }
  .pj-card-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
  .pj-card-empty { margin: 0; }
  .pj-card-new { align-items: flex-start; justify-content: center; border-style: dashed; border-block-start-style: dashed; border-block-start-width: 1px; border-color: var(--line-strong);
    background: transparent; box-shadow: none; cursor: pointer; text-align: start; min-block-size: 132px; color: var(--text); font: inherit; }
  .pj-card-new:hover { background: var(--surface-hover); }
  .pj-card-new:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

  .pj-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .pj-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); font-size: 12.5px; color: var(--text-muted); }
  .pj-chip svg { inline-size: 14px; block-size: 14px; }
  .pj-chip b { color: var(--ink); font-weight: 650; }

  .pj-subs { display: grid; gap: 4px; padding-block-start: 10px; border-block-start: 1px dashed var(--line); }
  .pj-sub { display: flex; align-items: center; gap: 8px; min-block-size: 36px; padding-inline: 8px; border-radius: var(--r-sm); color: var(--text); text-decoration: none; font-size: 14px; }
  .pj-sub:hover { background: var(--surface-hover); }
  .pj-sub .truncate { flex: 1; min-inline-size: 0; }

  .pj-ungrouped { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-block-start: 22px; }
  .pj-ungrouped p { margin: 4px 0 0; max-inline-size: 60ch; }

  /* Dialog */
  .pj-swatches, .pj-icons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .pj-swatch { inline-size: 32px; block-size: 32px; border-radius: 50%; background: var(--pj); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; padding: 0; }
  .pj-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--pj); }
  .pj-swatch:focus-visible, .pj-icon-opt:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
  .pj-icon-opt { display: inline-grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text-muted); cursor: pointer; padding: 0; }
  .pj-icon-opt svg { inline-size: 18px; block-size: 18px; }
  .pj-icon-opt[aria-checked="true"] { background: color-mix(in srgb, var(--pj) 16%, var(--surface)); border-color: var(--pj); color: color-mix(in srgb, var(--pj) 78%, var(--ink)); }
  .pj-emoji-input { inline-size: 64px; text-align: center; }

  /* Detail */
  .pj-crumbs { display: flex; align-items: center; gap: 6px; margin-block-end: 10px; color: var(--text-muted); }
  .pj-crumbs a { color: inherit; text-decoration: none; }
  .pj-crumbs a:hover { color: var(--ink); text-decoration: underline; }
  .pj-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-block-end: 22px; }
  .pj-hero-copy { flex: 1; min-inline-size: min(100%, 220px); display: grid; gap: 4px; justify-items: start; }
  .pj-hero-copy .page-title { margin: 0; font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); letter-spacing: -0.04em; overflow-wrap: anywhere; }
  .pj-hero-copy .page-desc { margin: 0; }
  @media (max-width: 640px) { .pj-hero-actions { inline-size: 100%; } .pj-hero-actions > .btn { flex: 1; } }

  .pj-kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); margin-block-end: 22px; }
  .pj-kpis:empty { display: none; }
  .pj-kpis .kpi-value { overflow-wrap: anywhere; }

  .pj-section { margin-block-end: 18px; }
  .pj-section.card { padding: 6px 0 8px; }
  .pj-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; }
  .pj-section:not(.card) .pj-section-head { padding-inline: 0; }
  .pj-section-head .card-title { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
  .pj-section-head .card-title svg { inline-size: 18px; block-size: 18px; color: var(--pj); }
  .pj-count { font-size: 12px; font-weight: 650; padding: 1px 8px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--text-muted); }

  .pj-subgrid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
  .pj-subcard { display: flex; align-items: center; gap: 10px; min-block-size: 56px; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line);
    border-inline-start: 3px solid var(--pj); color: inherit; text-decoration: none; min-inline-size: 0; }
  .pj-subcard:hover { background: var(--surface-hover); }
  .pj-subcard.is-archived { opacity: .7; }

  .pj-items { list-style: none; margin: 0; padding: 0; }
  .pj-item { display: flex; align-items: center; gap: 12px; padding: 8px 16px; min-block-size: 56px; border-block-start: 1px solid var(--line); }
  .pj-item-icon { display: inline-grid; place-items: center; inline-size: 34px; block-size: 34px; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-muted); flex: none; }
  .pj-item-icon svg { inline-size: 16px; block-size: 16px; }
  .pj-item-main { display: grid; flex: 1; min-inline-size: 0; color: inherit; text-decoration: none; padding-block: 4px; }
  .pj-item-main b { color: var(--ink); font-weight: 600; }
  .pj-item-main:hover b { text-decoration: underline; }
  .pj-item-main:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-xs); }
  @media (max-width: 520px) { .pj-metric { display: none; } }
  .pj-more { margin: 6px 12px 0; }

  .pj-add-types { display: flex; gap: 6px; overflow-x: auto; padding-block-end: 2px; scrollbar-width: thin; }
  .pj-type-tab { display: inline-flex; align-items: center; gap: 6px; flex: none; min-block-size: 40px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); color: var(--text-muted); font: inherit; font-size: 13.5px; cursor: pointer; }
  .pj-type-tab svg { inline-size: 15px; block-size: 15px; }
  .pj-type-tab[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--canvas); }
  .pj-type-tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
  .pj-pick { display: grid; max-block-size: min(46vh, 380px); overflow-y: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
  .pj-pick-row { display: flex; align-items: center; gap: 12px; min-block-size: 48px; padding: 6px 12px; border-block-end: 1px solid var(--line); cursor: pointer; }
  .pj-pick-row:last-child { border-block-end: 0; }
  .pj-pick-row:hover { background: var(--surface-hover); }
  .pj-pick-empty { padding: 18px; margin: 0; text-align: center; }

  /* The picker other screens embed, and the list filter */
  .pj-filter { inline-size: auto; max-inline-size: 220px; }
}

/* css/components/domains.css */
/* Batch 1 · J (owner item 13): Console → Domains and the domain picker (ADR-0069). */
@layer components {
  .dmn-stack { --gap: var(--s-4); }
  .dmn-card { padding: var(--s-4); display: grid; gap: var(--s-3); }
  .dmn-head { display: flex; align-items: center; gap: var(--s-3); min-inline-size: 0; flex-wrap: wrap; }
  .dmn-ico { inline-size: 40px; block-size: 40px; flex: none; display: grid; place-items: center; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text); }
  .dmn-ico svg { inline-size: 20px; block-size: 20px; }
  .dmn-title { flex: 1 1 180px; min-inline-size: 0; }
  .dmn-title p:first-child { overflow-wrap: anywhere; }
  .dmn-badges { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-inline-start: auto; }
  .dmn-badges .icon-btn { min-inline-size: 44px; min-block-size: 44px; }
  .dmn-facts { display: grid; gap: var(--s-2); margin: 0; }
  .dmn-facts > div { display: grid; grid-template-columns: 110px 1fr; gap: var(--s-2); align-items: start; }
  .dmn-facts dt { font-size: var(--fs-small); color: var(--text-muted); padding-block-start: 4px; }
  .dmn-facts dd { margin: 0; }
  .dmn-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .dmn-chip { display: inline-flex; align-items: center; gap: 6px; min-block-size: 28px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: 12.5px; font-weight: 600; }
  .dmn-chip svg { inline-size: 14px; block-size: 14px; color: var(--text-muted); }
  .dmn-chip-on { background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent) 30%, transparent); color: var(--accent-text); }
  .dmn-chip-on svg { color: currentColor; }
  .dmn-checks { display: grid; gap: 6px; padding: var(--s-3); border-radius: var(--r-md); background: var(--surface-sunken); }
  .dmn-check { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-small); margin: 0; }
  .dmn-check svg { inline-size: 16px; block-size: 16px; flex: none; margin-block-start: 2px; }
  .dmn-check.is-ok svg { color: var(--success); }
  .dmn-check.is-bad svg { color: var(--warning); }
  .dmn-check em { display: block; font-style: normal; color: var(--text-muted); }
  .dmn-check em:empty { display: none; }
  .dmn-off { display: grid; gap: var(--s-3); padding: var(--s-3); border: 1px dashed var(--line-strong); border-radius: var(--r-md); }
  .dmn-form { display: grid; gap: var(--s-4); }
  .dmn-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; min-inline-size: 0; }
  .dmn-options { display: flex; flex-wrap: wrap; gap: 8px; }
  .dmn-option { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); cursor: pointer; font-size: var(--fs-small); font-weight: 600; color: var(--ink); transition: border-color var(--t-fast), background var(--t-fast); }
  .dmn-option svg { inline-size: 16px; block-size: 16px; color: var(--text-muted); }
  .dmn-option:hover { border-color: var(--line-strong); }
  .dmn-option:has(input:checked) { border-color: color-mix(in oklab, var(--accent) 45%, transparent); background: var(--accent-soft); color: var(--accent-text); }
  .dmn-option:has(input:focus-visible) { box-shadow: var(--focus-ring); }
  .dmn-help .card-title { display: flex; align-items: center; gap: 8px; }
  .dmn-help .card-title svg { inline-size: 18px; block-size: 18px; flex: none; color: var(--accent-text); }
  .dmn-steps { margin: 0; padding-inline-start: 1.25em; display: grid; gap: 8px; font-size: var(--fs-small); color: var(--text); }
  .dmn-table b { overflow-wrap: anywhere; }
  .dmn-sub { display: block; }
  @media (min-width: 640px) { .hide-md-up { display: none; } }
  @media (max-width: 520px) { .dmn-facts > div { grid-template-columns: 1fr; gap: 4px; } }

  /* The domain picker (x-domains.picker): host select + address, one control. */
  .dpk { display: flex; align-items: stretch; min-inline-size: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
  .dpk:focus-within { box-shadow: var(--focus-ring); border-color: var(--accent); }
  .dpk-domain { flex: 0 1 auto; max-inline-size: 55%; min-block-size: 44px; border: 0; border-inline-end: 1px solid var(--line); border-radius: 0; background-color: var(--surface-sunken); font-weight: 600; }
  .dpk-domain:focus { box-shadow: none; outline: none; }
  .dpk-path { flex: 1 1 120px; min-inline-size: 0; border: 0; border-radius: 0; min-block-size: 44px; }
  .dpk-path:focus { box-shadow: none; outline: none; }
  .dpk-move { display: grid; gap: var(--s-2); }
  .dpk-move-row { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }
  .dpk-move-row .select { flex: 1 1 200px; min-inline-size: 0; min-block-size: 44px; }
  .dpk-url { font-size: var(--fs-small); color: var(--text-muted); overflow-wrap: anywhere; }
  .dpk-url b { color: var(--ink); font-weight: 600; }
  @media (max-width: 420px) { .dpk { flex-direction: column; } .dpk-domain { max-inline-size: none; border-inline-end: 0; border-block-end: 1px solid var(--line); } }
}

/* css/components/page-analytics.css */
/* Owner item 9: one page's analytics (Sites → page → Analytics) ------------------------------------------------- */
@layer components {
  .pa-hero { align-items: flex-end; }
  .pa-hero-text { min-width: 0; max-width: 100%; display: grid; gap: 2px; justify-items: start; text-align: start; }
  .pa-back { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; text-decoration: none; inline-size: max-content; }
  .pa-back:hover { color: var(--ink); }
  .pa-title { overflow-wrap: anywhere; }
  .pa-meta { flex-wrap: wrap; min-width: 0; }
  .pa-url { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; color: var(--text-muted); }
  .pa-url:hover { color: var(--ink); }

  .pa-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-block-end: 18px; }
  .pa-range button { min-height: 36px; padding-inline: 12px; }
  .pa-custom { display: inline-flex; align-items: center; gap: 8px; }
  .pa-date .input { min-height: 40px; inline-size: 158px; }
  .pa-compare { margin: 0; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .pa-currencies { margin-block: 10px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }

  .pa-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pa-kpis .kpi-value { overflow-wrap: anywhere; }

  .pa-card-head { flex-wrap: wrap; gap: 10px; }
  .pa-chart { padding-block-start: 4px; }
  .pa-chart .chart { inline-size: 100%; color: var(--accent); }

  .pa-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .pa-bd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

  .pa-blocks { display: grid; gap: 14px; padding-block-start: 6px; }
  .pa-block { display: flex; gap: 12px; align-items: flex-start; }
  .pa-block-main { flex: 1; min-width: 0; display: grid; gap: 6px; }
  .pa-block-line { gap: 10px; }
  .pa-block-name { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; }
  .pa-block-name a { text-decoration: none; }
  .pa-block-name a:hover { text-decoration: underline; }
  .pa-block-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }

  .pa-qr-row { padding-block: 10px; border-block-end: 1px solid var(--line); gap: 12px; }
  .pa-qr-row:last-child { border-block-end: 0; }

  .pa-feed { list-style: none; margin: 0; padding: 0; display: grid; }
  .pa-feed-item { display: flex; gap: 12px; align-items: flex-start; padding-block: 10px; border-block-end: 1px solid var(--line); }
  .pa-feed-item:last-child { border-block-end: 0; }
  .pa-feed-icon { flex: none; inline-size: 32px; block-size: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-sunken); color: var(--text-muted); }
  .pa-feed-icon svg { inline-size: 16px; block-size: 16px; }
  .pa-feed-item.is-click .pa-feed-icon { background: var(--info-soft); color: var(--info); }
  .pa-feed-item.is-lead .pa-feed-icon { background: var(--accent-soft); color: var(--accent-text); }
  .pa-feed-item.is-sale .pa-feed-icon { background: var(--success-soft); color: var(--success); }
  .pa-feed-main { flex: 1; min-width: 0; }
  .pa-feed-main p { margin: 0; overflow-wrap: anywhere; }
  .pa-feed-time { flex: none; white-space: nowrap; }

  .pa-imp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .pa-imp { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px 14px; align-items: center; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
  .pa-imp-icon { inline-size: 36px; block-size: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-sunken); color: var(--text-muted); }
  .pa-imp-icon svg { inline-size: 18px; block-size: 18px; }
  .pa-imp.is-warn .pa-imp-icon { background: var(--warning-soft); color: var(--warning); }
  .pa-imp.is-info .pa-imp-icon { background: var(--info-soft); color: var(--info); }
  .pa-imp.is-tip .pa-imp-icon { background: var(--accent-soft); color: var(--accent-text); }
  .pa-imp-main p { margin: 0; }
  .pa-imp-title { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
  .pa-imp-tone { display: inline-block; margin-inline-end: 6px; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; background: var(--surface-sunken); color: var(--text-muted); vertical-align: 2px; }
  .pa-imp.is-warn .pa-imp-tone { background: var(--warning-soft); color: var(--warning); }
  .pa-imp-action { min-height: 44px; white-space: nowrap; }

  .pa-locked, .pa-empty-card { margin-block-end: 0; }

  /* Overflow guard (R4): nothing on this screen may be wider than its card or the viewport, at 320 px and up.
     Grid/flex children default to min-width: auto and grow to their longest unbroken text, so reset it everywhere. */
  .pa-page { min-inline-size: 0; max-inline-size: 100%; overflow-wrap: anywhere; }
  .pa-page .card, .pa-page .card-header, .pa-page .card-body, .pa-page .card-header > div { min-inline-size: 0; max-inline-size: 100%; }
  .pa-page .card-header > div:first-child { flex: 1 1 12rem; }
  .pa-blocks, .pa-feed, .pa-imp-list, .pa-page .bars, .pa-page .funnel { grid-template-columns: minmax(0, 1fr); }
  .pa-block-line { min-inline-size: 0; flex-wrap: nowrap; }
  .pa-block-name { flex: 1 1 auto; }
  .pa-block-name > svg, .pa-block-line > b, .pa-qr-row > b { flex: none; }
  .pa-block-name > .truncate, .pa-qr-row > .truncate { flex: 1 1 auto; display: block; min-inline-size: 0; }
  .pa-page .top-meter { max-inline-size: 100%; }
  .pa-page .top-meter span { max-inline-size: 100%; }
  .pa-block-meta > span { min-inline-size: 0; overflow-wrap: anywhere; }
  .pa-page .bar-row .label { display: block; flex: 1 1 auto; }
  .pa-page .bar-row .value { flex: none; }
  .pa-page .funnel-head { display: flex; justify-content: space-between; gap: 10px; min-inline-size: 0; }
  .pa-page .funnel-label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pa-page .funnel-bar, .pa-page .funnel-foot { max-inline-size: 100%; min-inline-size: 0; }
  .pa-page .donut-legend { min-inline-size: 0; }
  .pa-page .donut-legend li { min-inline-size: 0; }
  .pa-page .donut-legend .grow { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pa-imp-main { min-inline-size: 0; }
  .pa-page .ins-obs > div, .pa-page .ins-x { min-inline-size: 0; }
  .pa-page .chart, .pa-page svg { max-inline-size: 100%; }
  .pa-page .table-wrap { max-inline-size: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pa-page .segmented { max-inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
  .pa-sk-title { display: block; block-size: 14px; inline-size: 40%; }
  .pa-sk-row { display: block; block-size: 10px; }
  .pa-sk-block { display: block; block-size: 56px; border-radius: 12px; }
  .pa-skeleton .pa-bd-grid > .card:nth-child(n + 4) { display: none; }

  @media (max-width: 1023px) {
    .pa-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pa-grid { grid-template-columns: minmax(0, 1fr); }
    .pa-bd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 640px) {
    .pa-hero { flex-direction: column; align-items: stretch; }
    .pa-hero-text { inline-size: 100%; margin-inline: 0; }
    .pa-kpis .kpi-foot { flex-wrap: wrap; white-space: normal; }
    .pa-actions { justify-content: flex-start; }
    .pa-actions > * { flex: 1 1 auto; }
    .pa-toolbar { align-items: stretch; }
    .pa-range { display: flex; inline-size: 100%; }
    .pa-range button { flex: 1; min-height: 44px; padding-inline: 6px; }
    .pa-custom { inline-size: 100%; }
    .pa-date { flex: 1; }
    .pa-date .input { inline-size: 100%; min-height: 44px; }
    .pa-bd-grid { grid-template-columns: minmax(0, 1fr); }
    .pa-imp { grid-template-columns: auto minmax(0, 1fr); }
    .pa-imp-action { grid-column: 1 / -1; justify-content: center; white-space: normal; }
    .pa-range button { flex: 1 1 0; min-inline-size: 0; }
    .pa-custom { flex-wrap: wrap; }
    .pa-date { min-inline-size: 0; flex: 1 1 8rem; }
    .pa-page .card-header .segmented { inline-size: 100%; }
    .pa-page .card-header .segmented button { flex: 1 1 0; }
  }
  @media (max-width: 359px) {
    .pa-kpis { grid-template-columns: minmax(0, 1fr); }
    .pa-range button { padding-inline: 4px; font-size: var(--fs-small); }
  }
}

/* css/components/links.css */
/* Batch 1 · I (owner item 11): the short-link editor's app badge, targeting rows and link preview card. */
@layer components {
  .link-app-badge { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid color-mix(in oklab, var(--accent) 35%, var(--line)); background: var(--accent-soft); }
  .link-app-icon { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--surface); color: var(--accent-text); box-shadow: var(--e1); }
  .link-app-icon svg { width: 18px; height: 18px; }
  .link-app-text { flex: 1; min-width: 0; }
  .link-app-text p { margin: 0; }
  .link-geo-row { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
  .link-geo-row .icon-btn { width: 44px; height: 44px; }
  .link-card-edit { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start; }
  .link-card-image { width: 112px; aspect-ratio: 1.91 / 1; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--surface-sunken); border: 1px solid var(--line); color: var(--text-subtle); }
  .link-card-image img { width: 100%; height: 100%; object-fit: cover; }
  @media (max-width: 520px) {
    .link-geo-row { grid-template-columns: minmax(0, 1fr) 44px; }
    .link-geo-row .input { grid-column: 1 / -1; grid-row: 2; }
    .link-card-edit { grid-template-columns: minmax(0, 1fr); }
    .link-card-image { width: 100%; max-width: 240px; }
  }
}

/* css/components/qr.css */
/* Batch 1 · H (owner item 10): the QR designer (type → content → design → download) and QR card fixes. */
@layer components {
  /* Cards on the QR list: the options menu must float outside the card, so the card itself never clips. */
  .qr-card { overflow: visible; }
  .qr-card-art { border-start-start-radius: inherit; border-start-end-radius: inherit; }
  .qr-card-code { width: 132px; height: auto; aspect-ratio: 1; display: grid; place-items: center; }
  .qr-card-code svg, .qr-card-code img { width: 100%; height: auto; max-height: 100%; }

  /* Designer layout: phones get one step at a time; wide screens see everything with the preview beside it. */
  .qrd-page { padding-bottom: 96px; }
  .qrd { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
  .qrd-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .qrd-head-text { min-width: 0; flex: 1; }
  .qrd-head-text .page-title { margin: 0; }
  .qrd-head-actions { display: flex; align-items: center; gap: 10px; }
  .qrd-main { display: grid; gap: 16px; min-width: 0; }
  .qrd-sec { min-width: 0; }
  .qrd-sec > .card-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

  .qrd-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .qrd-step-btn { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 8px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--text-muted); font-size: var(--fs-small); font-weight: 600; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
  .qrd-step-num { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-sunken); font-size: 12px; flex: none; }
  .qrd-step-btn.is-current { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
  .qrd-step-btn.is-current .qrd-step-num, .qrd-step-btn.is-done .qrd-step-num { background: var(--ink); color: var(--text-on-ink); }
  .qrd-step-btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }

  /* Types */
  .qrd-types { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .qrd-type { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
  .qrd-type:hover { border-color: var(--line-strong); }
  .qrd-type:has(input:checked), .qrd-type.is-on { border-color: var(--accent); background: linear-gradient(180deg, var(--accent-soft), var(--surface)); box-shadow: 0 0 0 1px var(--accent); }
  .qrd-type:has(input:focus-visible) { box-shadow: var(--focus-ring); }
  .qrd-type-icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--surface-sunken); color: var(--ink); }
  .qrd-type-icon svg { width: 18px; height: 18px; }
  .qrd-type:has(input:checked) .qrd-type-icon { background: var(--ink); color: var(--text-on-ink); }
  .qrd-type-text { display: grid; min-width: 0; }
  .qrd-type-text b { font-size: 14px; color: var(--ink); }
  .qrd-type-text small { font-size: 12px; line-height: 1.3; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  .qrd-seg { display: flex; width: 100%; }
  .qrd-seg > * { flex: 1; justify-content: center; min-height: 36px; }
  .qrd-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: var(--fs-small); color: var(--text); cursor: pointer; }
  .qrd-more { border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 14px; }
  .qrd-more > summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; font-size: var(--fs-small); color: var(--ink); cursor: pointer; }
  .qrd-more[open] { padding-bottom: 14px; }
  .qrd-track { padding: 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); display: grid; gap: 8px; }
  .qrd-track-link { display: flex; align-items: center; gap: 6px; }
  .qrd-track-link svg { width: 14px; height: 14px; }

  /* Design */
  .qrd-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 0 16px; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .qrd-tabs .tab { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--text-muted); font-weight: 600; font-size: var(--fs-small); border-bottom: 2px solid transparent; white-space: nowrap; cursor: pointer; }
  .qrd-tabs .tab svg, .qrd-tabs.tabs .tab svg { width: 16px; height: 16px; flex: none; }
  .qrd-toggle-hint { display: block; }
  .qrd-tabs .tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }
  .qrd-tabs .tab:focus-visible { box-shadow: var(--focus-ring); outline: none; border-radius: 8px; }

  .qrd-gallery { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .qrd-tpl { display: grid; gap: 6px; padding: 8px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); cursor: pointer; text-align: center; transition: border-color var(--t-fast), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast); }
  .qrd-tpl:hover { border-color: var(--line-strong); transform: translateY(-1px); box-shadow: var(--e1); }
  .qrd-tpl.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .qrd-tpl:focus-visible { box-shadow: var(--focus-ring); outline: none; }
  .qrd-tpl-art { display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; background: #F4F5F2; padding: 8px; }
  .qrd-tpl-art svg { width: 100%; height: 100%; }
  .qrd-tpl-name { font-size: 12px; font-weight: 600; color: var(--ink); }

  .qrd-colors { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .qrd-color { display: grid; gap: 6px; }
  .qrd-color-row { display: flex; align-items: center; gap: 8px; }
  .qrd-color-row input[type="color"] { flex: none; width: 44px; height: 44px; padding: 3px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
  .qrd-color-row input[type="color"]:disabled { opacity: .4; cursor: not-allowed; }
  .qrd-color-row .input { min-width: 0; text-transform: uppercase; }
  .qrd-range { width: 100%; accent-color: var(--accent); min-height: 32px; }

  .qrd-shapes { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }
  .qrd-shape { display: grid; justify-items: center; gap: 6px; padding: 10px 6px; min-height: 44px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
  .qrd-shape:hover { border-color: var(--line-strong); }
  .qrd-shape.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--ink); }
  .qrd-shape:focus-visible { box-shadow: var(--focus-ring); outline: none; }
  .qrd-shape-art { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; background: #fff; overflow: hidden; border: 1px solid var(--line); }
  .qrd-shape-art svg { width: 100%; height: 100%; }
  .qrd-frames .qrd-shape-art { width: 56px; height: 64px; padding: 4px; }

  .qrd-logo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .qrd-logo-art { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; border: 1px dashed var(--line-strong); background: var(--surface-2); color: var(--text-muted); overflow: hidden; }
  .qrd-logo-art img { width: 100%; height: 100%; object-fit: contain; }

  /* Preview */
  .qrd-aside { min-width: 0; }
  .qrd-preview-card { display: grid; gap: 12px; padding: 16px; }
  .qrd-preview { position: relative; display: grid; place-items: center; min-height: 220px; padding: 18px; border-radius: var(--r-lg); background: radial-gradient(120% 90% at 50% 0%, var(--accent-soft), var(--surface-2)); transition: opacity var(--t-fast); }
  .qrd-preview.is-transparent { background-color: #fff; background-image: linear-gradient(45deg, #EEF0EC 25%, transparent 25%), linear-gradient(-45deg, #EEF0EC 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #EEF0EC 75%), linear-gradient(-45deg, transparent 75%, #EEF0EC 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
  .qrd-preview.is-busy { opacity: .7; }
  .qrd-preview-art { width: min(100%, 300px); }
  .qrd-preview-art svg { display: block; width: 100%; height: auto; border-radius: 6px; filter: drop-shadow(0 8px 22px rgb(14 26 21 / .14)); }
  .qrd-preview-empty { display: grid; justify-items: center; gap: 8px; max-width: 240px; text-align: center; color: var(--text-muted); font-size: var(--fs-small); }
  .qrd-preview-empty svg { width: 28px; height: 28px; }
  .qrd-warnings { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .qrd-warnings:empty { display: none; }
  .qrd-encoded { overflow-wrap: anywhere; margin: 0; }
  .qrd-dl { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
  .qrd-dl .field-label { margin: 0; }
  .qrd-dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .qrd-dl-grid .btn { justify-content: center; min-height: 44px; }
  .qrd-create { justify-content: center; min-height: 44px; }

  .qrd-nav { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 12px 0 calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--canvas) 70%, transparent); }
  .qrd-nav .btn { min-height: 44px; }

  /* Phones and tablets: one step at a time. */
  @media (max-width: 1023px) {
    .qrd-sec { display: none; }
    .qrd[data-step="1"] .qrd-sec[data-sec="1"], .qrd[data-step="2"] .qrd-sec[data-sec="2"], .qrd[data-step="3"] .qrd-sec[data-sec="3"] { display: block; }
    .qrd-aside { display: none; }
    .qrd[data-step="3"] .qrd-aside, .qrd[data-step="4"] .qrd-aside { display: block; }
    .qrd[data-step="3"] .qrd-aside { order: 2; position: sticky; top: calc(var(--topbar-h, 56px) + 6px); z-index: 4; }
    .qrd[data-step="3"] .qrd-main { order: 3; }
    .qrd[data-step="3"] .qrd-nav { order: 4; }
    .qrd[data-step="3"] .qrd-preview-card { padding: 8px; box-shadow: var(--e2); }
    .qrd[data-step="3"] .qrd-preview { min-height: 0; padding: 8px; }
    .qrd[data-step="3"] .qrd-preview-art { width: 132px; }
    .qrd[data-step="3"] .qrd-dl, .qrd[data-step="3"] .qrd-encoded { display: none; }
    .qrd-head-actions .btn { display: none; }
    .qrd-head .page-title { font-size: 22px; }
    .qrd-step-btn span:not(.qrd-step-num) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  }
  @media (max-width: 420px) {
    .qrd-step-btn { flex-direction: column; gap: 2px; font-size: 11px; padding: 4px; }
    .qrd-types { grid-template-columns: 1fr 1fr; }
    .qrd-type { padding: 8px 10px; }
    .qrd-type-text small { display: none; }
    .qrd-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .qrd-shapes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  /* Wide screens: editor and a sticky preview side by side; the stepper isn't needed. */
  @media (min-width: 1024px) {
    .qrd { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
    .qrd-head, .qrd-steps { grid-column: 1 / -1; }
    .qrd-steps, .qrd-nav { display: none; }
    .qrd-aside { position: sticky; top: calc(var(--topbar-h, 64px) + 16px); }
    .qrd-types { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
  }
  @media (prefers-reduced-motion: reduce) {
    .qrd-tpl, .qrd-type, .qrd-preview { transition: none; }
    .qrd-tpl:hover { transform: none; }
  }

  /* R12B · plan-locked options stay visible with an upgrade badge */
  .qrd-type.is-locked, .qrd-tpl.is-locked { cursor: default; }
  .qrd-type.is-locked .qrd-type-icon, .qrd-type.is-locked .qrd-type-text, .qrd-tpl.is-locked .qrd-tpl-art, .qrd-tpl.is-locked .qrd-tpl-name { opacity: .55; }
  .qrd-tpl.is-locked { position: relative; }
  .qrd-lock { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; z-index: 1; }
  /* R15B · .upl is display:contents, so pin the round lock itself; the text keeps clear of it. */
  .qrd-lock > .upl-badge { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; z-index: 1; }
  .qrd-type.is-locked .qrd-type-text { padding-inline-end: 22px; }
  .qrd-shape:disabled, .qrd-seg button:disabled { opacity: .45; cursor: not-allowed; }
}

/* css/components/events-insights.css */
/* EV9 — event analytics (ea-), promotion (ep-), tasks (et-), team (etm-). Tokens only; logical properties (RTL). */
@layer components {
  .ea-hero { align-items: flex-end; }
  .ea-hero-text { min-width: 0; max-width: 100%; display: grid; gap: 2px; justify-items: start; }
  .ea-back { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; text-decoration: none; inline-size: max-content; }
  .ea-back:hover { color: var(--ink); }
  .ea-title { overflow-wrap: anywhere; }
  .ea-meta { flex-wrap: wrap; }
  .ea-actions { flex-wrap: wrap; }

  .ea-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-block-end: 16px; }
  .ea-range { max-inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
  .ea-range button { min-height: 36px; padding-inline: 12px; white-space: nowrap; }
  .ea-table th, .ea-table td { position: relative; }
  .ea-custom { display: inline-flex; align-items: center; gap: 8px; }
  .ea-custom .input { inline-size: 150px; }
  .ea-filters { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .ea-filters .select { min-height: 36px; inline-size: auto; max-inline-size: 220px; }
  .ea-hero.is-compact { padding-block-start: 4px; }
  .ea-hero.is-compact .ea-hero-text { gap: 0; }
  .ea-compare { margin: 0; flex-basis: 100%; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

  .ea-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-block-start: 16px; }
  .ea-kpis .kpi-value { overflow-wrap: anywhere; }
  .ea-body.is-loading, .ea-kpis.is-loading, .et-board.is-loading { opacity: .55; transition: opacity .2s; }

  /* Section tabs: a calm underline rail that scrolls sideways on phones. */
  .ea-tabs { display: flex; gap: 4px; margin-block: 22px 18px; overflow-x: auto; scrollbar-width: none; border-block-end: 1px solid var(--line); }
  .ea-tabs::-webkit-scrollbar { display: none; }
  .ea-tab { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding-inline: 12px; border: 0; background: none; color: var(--text-muted); font: inherit; font-weight: 500;
    cursor: pointer; border-block-end: 2px solid transparent; margin-block-end: -1px; border-radius: 8px 8px 0 0; }
  .ea-tab:hover { color: var(--ink); background: var(--surface-sunken); }
  .ea-tab[aria-current="page"] { color: var(--ink); border-block-end-color: var(--accent); }
  .ea-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

  .ea-card-head { flex-wrap: wrap; gap: 10px; }
  .ea-chart { padding-block-start: 4px; }
  .ea-chart .chart { inline-size: 100%; color: var(--accent); }
  .ea-metrics { flex-wrap: wrap; }
  .ea-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .ea-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
  .ea-bd-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .ea-page .funnel-head { display: flex; justify-content: space-between; gap: 10px; }

  .ea-mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-block-start: 14px; }
  .ea-mini-stats > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-sunken); }
  .ea-mini-stats b { font-size: 1.15rem; color: var(--ink); }

  .ea-stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; }
  .ea-stat-strip > div { display: grid; gap: 4px; padding: 14px 16px; border-inline-end: 1px solid var(--line); }
  .ea-stat-strip > div:last-child { border-inline-end: 0; }
  .ea-stat-strip span { font-size: .78rem; color: var(--text-muted); }
  .ea-stat-strip b { font-size: 1.35rem; color: var(--ink); letter-spacing: -.01em; }

  .ea-cap { display: grid; gap: 6px; padding-block: 8px; border-block-end: 1px solid var(--line); }
  .ea-cap:last-child { border-block-end: 0; }
  .ea-cap.is-past { opacity: .65; }
  .ea-cap-line { gap: 10px; }
  .ea-progress { height: 8px; }
  .ea-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .4s ease; }
  .ea-progress.is-hot > span { background: var(--warning); }
  .ea-cap .text-xs { margin: 0; }

  .ea-table th.num, .ea-table td.num { text-align: end; white-space: nowrap; }
  .ea-table td { vertical-align: top; }
  .ea-table .d-block, .ea-page .d-block { display: block; }
  .ea-table td .progress { min-inline-size: 80px; margin-block: 6px 2px; }

  /* Money: a waterfall from gross to net. */
  .ea-money + .ea-money { margin-block-start: 16px; }
  .ea-net { display: grid; justify-items: end; gap: 2px; }
  .ea-net b { font-size: 1.6rem; letter-spacing: -.02em; color: var(--ink); }
  .ea-waterfall { margin: 0; display: grid; }
  .ea-waterfall > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-block: 9px; border-block-end: 1px dashed var(--line); }
  .ea-waterfall dt { color: var(--text); }
  .ea-waterfall dd { margin: 0; }
  .ea-waterfall .is-total dt, .ea-waterfall .is-total dd { font-weight: 600; color: var(--ink); }
  .ea-waterfall .is-net { border-block-end: 0; border-block-start: 2px solid var(--ink); margin-block-start: 4px; }
  .ea-waterfall .is-net dt, .ea-waterfall .is-net dd { font-weight: 700; color: var(--ink); font-size: 1.05rem; }

  /* Attendance ring. */
  .ea-attend { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
  .ea-ring-body { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
  .ea-ring { --p: 0; inline-size: 168px; block-size: 168px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--surface-sunken) 0); }
  .ea-ring > div { inline-size: 128px; block-size: 128px; border-radius: 50%; background: var(--surface); display: grid; place-content: center; text-align: center; }
  .ea-ring b { font-size: 1.8rem; color: var(--ink); letter-spacing: -.02em; }
  .ea-ring span { font-size: .78rem; color: var(--text-muted); }
  .ea-ring-legend { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; flex: 1; min-inline-size: 200px; }
  .ea-ring-legend dt { font-size: .78rem; color: var(--text-muted); }
  .ea-ring-legend dd { margin: 0; font-size: 1.3rem; font-weight: 600; color: var(--ink); }
  .ea-note { padding: 0 20px 16px; margin: 0; }
  .ea-modes { display: grid; gap: 16px; }
  .ea-mode { display: flex; align-items: center; gap: 12px; }
  .ea-mode .progress { margin-block-start: 6px; }
  .ea-mode-icon, .ea-tile-icon, .ep-kind-icon, .etm-role-icon { inline-size: 36px; block-size: 36px; border-radius: 11px; display: grid; place-items: center; flex: none;
    background: var(--accent-soft); color: var(--accent-text); }
  .ea-mode-icon svg, .ea-tile-icon svg, .ep-kind-icon svg, .etm-role-icon svg { inline-size: 18px; block-size: 18px; }
  .bar-row.is-warn { --bar: var(--warning-soft); }

  .ea-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
  .ea-tile { display: grid; gap: 4px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
  .ea-tile b { font-size: 1.6rem; color: var(--ink); letter-spacing: -.02em; }
  .ea-tile-icon { margin-block-end: 6px; }

  /* Live panel: a dark strip with a pulse, so "now" reads differently from history. */
  .ea-live { margin-block-start: 4px; padding: 16px 18px; border-radius: 18px; background: var(--grad-ink); color: rgb(255 255 255 / .92);
    display: grid; gap: 12px; box-shadow: var(--e3); }
  .ea-live-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .ea-live-title { margin: 0; font-size: .95rem; display: inline-flex; align-items: center; gap: 8px; color: #fff; }
  .ea-live-time { color: rgb(255 255 255 / .7); }
  .ea-live-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
  .ea-live-stat { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgb(255 255 255 / .06); }
  .ea-live-stat b { font-size: 1.45rem; color: #fff; letter-spacing: -.02em; }
  .ea-live-stat span { font-size: .74rem; color: rgb(255 255 255 / .72); }
  .ea-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; max-block-size: 210px; overflow: auto; }
  .ea-feed-item { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-block-start: 1px solid rgb(255 255 255 / .08); font-size: .85rem; animation: ea-in .4s ease both; }
  .ea-feed-item svg { color: var(--emerald-400, var(--accent)); flex: none; }
  .ea-feed-item.is-warn svg { color: var(--warning); }
  .ea-feed-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .ea-feed-time { flex: none; font-size: .74rem; color: rgb(255 255 255 / .6); }
  @keyframes ea-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .ea-feed-item { animation: none; } }

  .ea-sched { gap: 12px; padding-block: 10px; border-block-end: 1px solid var(--line); }
  .ea-sched:last-child { border-block-end: 0; }
  .ea-sched p { margin: 0; }
  .ea-people { display: grid; gap: 8px; max-block-size: 240px; overflow: auto; padding: 4px; }
  .ea-sort { display: inline-flex; align-items: center; gap: 8px; }
  .ea-sort .muted { white-space: nowrap; }

  /* Promotion */
  .ep-share-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 24px; align-items: center; }
  .ep-share-main { display: grid; gap: 14px; min-width: 0; }
  .ep-url .input { min-width: 0; }
  .ep-socials { display: flex; flex-wrap: wrap; gap: 8px; }
  .ep-social { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding-inline: 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface);
    color: var(--ink); text-decoration: none; font-weight: 500; transition: transform .15s, border-color .15s, background .15s; }
  .ep-social:hover { border-color: var(--ink); transform: translateY(-1px); }
  .ep-social:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .ep-preview { margin: 0; display: grid; gap: 6px; }
  .ep-preview img, .ep-qr-img { inline-size: 100%; block-size: auto; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-sunken); box-shadow: var(--shadow-sm); }
  .ep-presets .stat-pill { cursor: pointer; border: 1px solid var(--line); background: var(--surface); font: inherit; }
  .ep-presets .stat-pill:hover { border-color: var(--ink); }
  .ep-utm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .ep-utm-grid .field { margin: 0; }
  .ep-built { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: var(--surface-sunken); }
  .ep-built code { overflow-wrap: anywhere; font-size: .8rem; color: var(--ink); }
  .ep-qr { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; align-items: start; }

  .ep-kinds, .etm-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
  .ep-kind { display: grid; gap: 6px; justify-items: start; text-align: start; padding: 14px; border: 1px dashed var(--line-strong, var(--line)); border-radius: 14px; background: var(--surface); font: inherit;
    color: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
  .ep-kind:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); }
  .ep-kind:disabled { opacity: .5; cursor: not-allowed; }
  .ep-links { list-style: none; margin: 0; padding: 0; }
  .ep-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 14px 20px; border-block-start: 1px solid var(--line); }
  .ep-link.is-paused { opacity: .7; }
  .ep-link-main { min-width: 0; display: grid; gap: 2px; }
  .ep-link-main p { margin: 0; }
  .ep-link-stats { margin: 0; display: grid; grid-template-columns: repeat(4, auto); gap: 4px 18px; }
  .ep-link-stats > div { display: grid; justify-items: end; }
  .ep-link-stats dt { font-size: .72rem; color: var(--text-muted); }
  .ep-link-stats dd { margin: 0; font-weight: 600; color: var(--ink); }
  .ep-link-actions { display: inline-flex; gap: 4px; }
  .ep-assets { display: grid; grid-template-columns: 1.6fr 1fr .62fr; grid-template-areas: "social square story" "banner card story"; gap: 16px; align-items: start; }
  .ep-asset { margin: 0; display: grid; gap: 8px; min-width: 0; }
  .ep-asset.is-social { grid-area: social; } .ep-asset.is-square { grid-area: square; } .ep-asset.is-story { grid-area: story; } .ep-asset.is-banner { grid-area: banner; } .ep-asset.is-card { grid-area: card; }
  .ep-asset-img { display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--surface-sunken); transition: transform .2s, box-shadow .2s; }
  .ep-asset-img:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, var(--shadow-sm)); }
  .ep-asset-img img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
  .ep-asset figcaption { display: grid; gap: 2px; }
  .ep-asset figcaption a { display: inline-flex; align-items: center; gap: 4px; inline-size: max-content; }
  .ep-captions { margin: 0; white-space: pre-wrap; font: inherit; font-size: .85rem; line-height: 1.55; max-block-size: 300px; overflow: auto; padding: 12px; border-radius: 12px; background: var(--surface-sunken); }
  .ep-embed { display: grid; gap: 6px; }
  .ep-embed code { display: block; padding: 10px; border-radius: 10px; background: var(--surface-sunken); overflow-wrap: anywhere; white-space: pre-wrap; }
  .ep-kind-pick { display: flex; flex-wrap: wrap; gap: 6px; }
  .ep-kind-pick button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding-inline: 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font: inherit; cursor: pointer; color: var(--text); }
  .ep-kind-pick button[aria-checked="true"] { border-color: var(--ink); background: var(--ink); color: var(--surface); }

  /* Tasks */
  .et-summary { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); }
  .et-progress { flex: 1 1 260px; display: grid; gap: 8px; }
  .et-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .et-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding-inline: 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font: inherit; color: var(--text); cursor: pointer; }
  .et-chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
  .et-chip.is-warn:not([aria-pressed="true"]) b { color: var(--danger); }
  .et-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
  .et-col { border-radius: 18px; background: var(--surface-sunken); padding: 10px; display: grid; gap: 8px; }
  .et-col-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px; }
  .et-col-head h2 { margin: 0; font-size: .9rem; font-weight: 600; color: var(--ink); display: inline-flex; gap: 6px; align-items: center; }
  .et-col.is-doing .et-col-head h2::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--info, var(--accent)); }
  .et-col.is-todo .et-col-head h2::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--text-muted); }
  .et-col.is-done .et-col-head h2::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--success, var(--accent)); }
  .et-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .et-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 12px; border-radius: 14px; background: var(--surface);
    border: 1px solid var(--line); box-shadow: var(--shadow-xs, none); transition: border-color .15s, transform .15s; }
  .et-card:hover { border-color: var(--line-strong, var(--ink)); }
  .et-card.prio-urgent { box-shadow: inset 3px 0 0 var(--danger); }
  .et-card.prio-high { box-shadow: inset 3px 0 0 var(--warning); }
  [dir="rtl"] .et-card.prio-urgent { box-shadow: inset -3px 0 0 var(--danger); }
  [dir="rtl"] .et-card.prio-high { box-shadow: inset -3px 0 0 var(--warning); }
  .et-card.is-done .et-card-title { text-decoration: line-through; color: var(--text-muted); }
  .et-check { inline-size: 24px; block-size: 24px; border-radius: 50%; border: 2px solid var(--line-strong, var(--text-muted)); background: none; display: grid; place-items: center; cursor: pointer; padding: 0; color: transparent; margin-block-start: 1px; }
  .et-check svg { inline-size: 14px; block-size: 14px; }
  .et-check:hover { border-color: var(--accent); color: var(--accent); }
  .et-check[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
  .et-card-main { all: unset; cursor: pointer; display: grid; gap: 6px; min-width: 0; }
  .et-card-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
  .et-card-title { color: var(--ink); font-weight: 500; overflow-wrap: anywhere; line-height: 1.35; }
  .et-card-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .75rem; color: var(--text-muted); }
  .et-card-meta > span { display: inline-flex; align-items: center; gap: 4px; }
  .et-due.is-late { color: var(--danger); font-weight: 600; }
  .et-due.is-soon { color: var(--warning); font-weight: 600; }
  .et-prio { color: var(--warning); }
  .et-avatar, .etm-avatar { inline-size: 28px; block-size: 28px; font-size: .75rem; }
  .etm-avatar.is-sm { inline-size: 22px; block-size: 22px; font-size: .7rem; }
  .et-next { position: absolute; inset-block-end: 8px; inset-inline-end: 8px; inline-size: 26px; block-size: 26px; border-radius: 8px; border: 0; background: var(--surface-sunken); color: var(--text-muted);
    display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .15s; }
  .et-next svg { inline-size: 14px; block-size: 14px; }
  .et-card:hover .et-next, .et-card:focus-within .et-next { opacity: 1; }
  .et-empty { padding: 14px 6px; text-align: center; }
  .et-form { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; }
  .et-side { padding-inline-start: 20px; border-inline-start: 1px solid var(--line); }
  .et-seg { flex-wrap: wrap; }
  .et-attach { gap: 8px; padding: 6px 8px; border-radius: 10px; background: var(--surface-sunken); font-size: .85rem; }
  .et-attach a, .et-attach span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
  .et-comments { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-block-size: 240px; overflow: auto; }
  .et-comments li { display: flex; gap: 8px; align-items: flex-start; }
  .et-comments p { margin: 0; }
  .et-comment-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .88rem; }

  /* Team */
  .etm-list { list-style: none; margin: 0; padding: 0; }
  .etm-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 20px; border-block-start: 1px solid var(--line); }
  .etm-main p { margin: 0; }
  .etm-role { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-pill); background: var(--surface-sunken); font-size: .8rem; color: var(--ink); white-space: nowrap; }
  .etm-actions { display: inline-flex; gap: 4px; align-items: center; }
  .etm-ws { display: flex; flex-wrap: wrap; gap: 8px; }
  .etm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: var(--r-pill); border: 1px solid var(--line); font-size: .85rem; }
  .etm-roles { border: 0; padding: 0; margin: 0; }
  .etm-role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; max-block-size: 340px; overflow: auto; padding: 2px; }
  .etm-role-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--surface); }
  .etm-role-opt input { position: absolute; opacity: 0; pointer-events: none; }
  .etm-role-opt:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
  .etm-role-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
  .etm-role-opt.is-locked { opacity: .5; cursor: not-allowed; }
  .etm-role-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
  .etm-abilities { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 10px; }
  .etm-ability { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding-inline: 10px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: .8rem; color: var(--text-muted); cursor: pointer; }
  .etm-ability.is-on { color: var(--ink); background: var(--accent-soft); border-color: transparent; }
  .etm-ability.is-changed { box-shadow: 0 0 0 2px var(--warning); }
  .etm-ability:disabled { opacity: .45; cursor: not-allowed; }
  .etm-matrix th, .etm-matrix td { font-size: .78rem; }
  .etm-matrix-role { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; padding-block: 8px; font-weight: 500; }
  .etm-yes { color: var(--accent); }
  .etm-no { color: var(--text-subtle, var(--text-muted)); }

  @media (max-width: 1024px) {
    .ea-live-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ep-assets { grid-template-columns: 1fr 1fr; grid-template-areas: "social social" "square story" "card story" "banner banner"; }
  }
  @media (max-width: 860px) {
    .ea-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ea-grid, .ea-grid-3, .ea-attend, .ep-share-body, .et-board, .et-form { grid-template-columns: minmax(0, 1fr); }
    .et-side { padding-inline-start: 0; border-inline-start: 0; border-block-start: 1px solid var(--line); padding-block-start: 16px; }
    .ep-utm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ep-link { grid-template-columns: auto minmax(0, 1fr) auto; }
    .ep-link-stats { grid-column: 2 / -1; grid-row: 2; justify-content: start; grid-template-columns: repeat(4, auto); }
    .ep-link-stats > div { justify-items: start; }
    .etm-row { grid-template-columns: auto minmax(0, 1fr) auto; }
    .etm-role { grid-column: 2; grid-row: 2; justify-self: start; }
  }
  @media (max-width: 560px) {
    .ea-live-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ea-bd-2 { grid-template-columns: minmax(0, 1fr); }
    .ea-filters .select { inline-size: auto; max-inline-size: none; flex: 1 1 140px; }
    .ea-custom .input { inline-size: 132px; }
    .ep-assets { grid-template-columns: 1fr 1fr; grid-template-areas: "social social" "banner banner" "square card" "story story"; }
    .ep-asset.is-story { max-inline-size: 60%; }
    .ep-qr { grid-template-columns: 96px minmax(0, 1fr); }
    .ep-link-stats { grid-template-columns: repeat(2, auto); }
    .ea-ring-body { justify-content: center; }
    .ep-link { padding-inline: 14px; }
    .etm-row { padding-inline: 14px; }
  }
}

/* css/components/events-partners.css */
/* EV6 — Events: sponsors, exhibitors, venues, seat map editor (organiser screens). Tokens only; logical properties (RTL). */
@layer components {
  .evx-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; } /* [R3B] minmax: a wide child no longer widens the page past the phone viewport */
  .evx-hero { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; justify-content: space-between; padding: 22px 24px; border-radius: var(--r-2xl); background: var(--grad-mesh), var(--surface); border: 1px solid var(--line); position: relative; overflow: hidden; }
  .evx-hero::after { content: ""; position: absolute; inset-inline-end: -60px; inset-block-start: -80px; inline-size: 260px; block-size: 260px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), transparent); pointer-events: none; }
  .evx-hero-copy { max-inline-size: 640px; position: relative; z-index: 1; }
  .evx-hero .page-title { margin: 4px 0; }
  .evx-hero-side { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; position: relative; z-index: 1; }
  .evx-stats { display: flex; gap: 10px; margin: 0; position: relative; z-index: 1; flex-wrap: wrap; }
  .evx-stats > div { padding: 10px 14px; border-radius: var(--r-lg); background: var(--glass-strong, var(--surface)); border: 1px solid var(--line); min-inline-size: 110px; backdrop-filter: blur(10px); }
  .evx-stats dt { font-size: var(--fs-micro); color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
  .evx-stats dd { margin: 2px 0 0; font: 600 22px/1.1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
  .evx-stats dd small { font-size: 13px; color: var(--text-muted); }
  .evx-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
  .evx-toolbar .segmented { max-inline-size: 100%; overflow-x: auto; }
  .evx-toolbar .segmented > * { white-space: nowrap; flex: none; }
  .evx-search { inline-size: 220px; }
  .evx-upgrade { padding-block: 12px; }
  .evx-alert { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: var(--r-lg); background: var(--warning-soft); color: var(--text); font-size: var(--fs-small); }
  .evx-alert svg { inline-size: 16px; block-size: 16px; flex: none; }

  /* Pipeline board */
  .evx-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 1fr); gap: 12px; overflow-x: auto; padding-block-end: 6px; scroll-snap-type: x mandatory; }
  .evx-col { background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 10px; min-block-size: 220px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; }
  .evx-col-head { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px; font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); }
  .evx-col-head span { display: inline-flex; gap: 6px; align-items: center; }
  .evx-col-head b { font-variant-numeric: tabular-nums; background: var(--surface); border-radius: var(--r-pill); padding: 1px 8px; color: var(--ink); }
  .evx-col-body { display: grid; gap: 8px; align-content: start; }
  .evx-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px; display: grid; gap: 8px; transition: transform var(--t-fast), box-shadow var(--t-fast); }
  .evx-card:hover { transform: translateY(-1px); box-shadow: var(--e2, 0 6px 20px -8px rgba(0,0,0,.18)); }
  .evx-card-main, .evx-exh-main { display: flex; gap: 10px; align-items: center; text-align: start; inline-size: 100%; }
  .evx-card-text { display: grid; min-inline-size: 0; }
  .evx-card-text b { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .evx-card-text small { color: var(--text-muted); font-size: var(--fs-micro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .evx-card-foot { display: flex; align-items: center; gap: 8px; }
  .evx-card-foot .dropdown { margin-inline-start: auto; }
  .evx-amount { font-weight: 600; font-size: var(--fs-small); font-variant-numeric: tabular-nums; color: var(--ink); }
  .evx-progress { flex: 1; block-size: 6px; border-radius: var(--r-pill); background: var(--surface-sunken); overflow: hidden; min-inline-size: 40px; }
  .evx-progress i { display: block; block-size: 100%; background: var(--accent); border-radius: inherit; }
  .evx-logo { inline-size: 40px; block-size: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); box-shadow: inset 0 -3px 0 var(--tc, transparent); font-weight: 700; color: var(--text-muted); }
  .evx-logo img { inline-size: 100%; block-size: 100%; object-fit: contain; padding: 4px; }
  .evx-logo.is-lg { inline-size: 72px; block-size: 72px; border-radius: 18px; }
  .evx-cancelled summary { cursor: pointer; color: var(--text-muted); font-size: var(--fs-small); }

  /* Tiers & packages */
  .evx-split { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 960px) { .evx-split { grid-template-columns: 340px minmax(0, 1fr); } .evx-split.is-wide { grid-template-columns: minmax(0, 1fr) 340px; } }
  .evx-tiers { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
  .evx-tiers li { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface-2); }
  .evx-tiers li > i { inline-size: 10px; block-size: 28px; border-radius: 4px; flex: none; }
  .evx-tiers li > span { flex: 1; display: grid; min-inline-size: 0; }
  .evx-tiers small { color: var(--text-muted); font-size: var(--fs-micro); }
  .evx-packages { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .evx-package { position: relative; padding: 18px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
  .evx-package::before { content: ""; position: absolute; inset: 0 0 auto; block-size: 4px; background: var(--tc); }
  .evx-package header { display: flex; justify-content: space-between; align-items: center; }
  .evx-package h3 { margin: 0; font: 600 20px/1.2 var(--font-display); color: var(--ink); }
  .evx-price { margin: 0; font: 600 26px/1.1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
  .evx-benefits { list-style: none; margin: 6px 0 10px; padding: 0; display: grid; gap: 4px; font-size: var(--fs-small); flex: 1; }
  .evx-benefits li { display: flex; gap: 6px; align-items: baseline; }
  .evx-benefits svg { color: var(--accent); inline-size: 14px; block-size: 14px; flex: none; transform: translateY(2px); }

  /* Editors */
  .evx-editor { display: grid; gap: 14px; }
  .evx-editor-logo { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
  .evx-fieldset { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 12px 14px 14px; display: grid; gap: 8px; margin: 0; }
  .evx-fieldset legend { font-weight: 600; font-size: var(--fs-small); padding: 0 6px; color: var(--ink); }
  .evx-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
  .evx-row > .input, .evx-row > .select { flex: 1 1 140px; min-inline-size: 0; }
  .evx-row > .evx-num { flex: 0 0 80px; }
  .evx-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
  .evx-check { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-small); }
  .evx-check input { margin-block-start: 3px; accent-color: var(--accent); }
  .evx-color { padding: 4px; block-size: 40px; }
  .evx-deliv { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .evx-deliv li { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface-2); border-inline-start: 3px solid var(--line-strong); }
  .evx-deliv li.is-received, .evx-deliv li.is-requested { border-inline-start-color: var(--info); }
  .evx-deliv li.is-approved, .evx-deliv li.is-done { border-inline-start-color: var(--success); }
  .evx-deliv li.is-done b { text-decoration: line-through; color: var(--text-muted); }
  .evx-deliv li > span { flex: 1; display: grid; min-inline-size: 0; }
  .evx-deliv small { color: var(--text-muted); font-size: var(--fs-micro); }
  .evx-deliv .select { inline-size: auto; }
  .evx-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
  .evx-asset { border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px; display: grid; gap: 6px; text-align: center; font-size: var(--fs-micro); }
  .evx-asset img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--surface-2); border-radius: var(--r-sm); }
  .evx-asset-doc { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--surface-2); border-radius: var(--r-sm); color: var(--text-muted); }
  .evx-portal-link { display: flex; gap: 6px; align-items: center; }
  .evx-portal-link .input { font-family: var(--font-mono); font-size: 12px; }

  /* Exhibitors */
  .evx-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .evx-exh { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 14px; display: grid; gap: 10px; transition: transform var(--t-fast); }
  .evx-exh:hover { transform: translateY(-1px); }
  .evx-exh.is-muted { opacity: .55; }
  .evx-exh-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  .evx-booth-chip { display: inline-flex; gap: 4px; align-items: center; font-size: var(--fs-micro); font-weight: 600; padding: 2px 8px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); }
  .evx-booth-chip svg { inline-size: 12px; block-size: 12px; }
  .evx-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 0; padding-block-start: 10px; border-block-start: 1px solid var(--line); }
  .evx-mini dt { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
  .evx-mini dd { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
  .evx-booths { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-block-start: 14px; }
  .evx-booth { display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-2); }
  .evx-booth-code { inline-size: 54px; block-size: 54px; border-radius: 12px; display: grid; place-items: center; font: 700 15px/1 var(--font-display); background: var(--surface); border: 1px dashed var(--line-strong); color: var(--ink); flex: none; }
  .evx-booth.is-assigned .evx-booth-code { background: var(--accent); color: var(--text-on-ink, #fff); border: 0; }
  .evx-booth.is-reserved .evx-booth-code { background: var(--warning-soft); border-style: solid; }
  .evx-booth-body { flex: 1; display: grid; gap: 4px; min-inline-size: 0; }
  .evx-booth-body small { color: var(--text-muted); font-size: var(--fs-micro); }
  .evx-plan { position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface-2); margin-block-start: 10px; user-select: none; }
  .evx-plan img { display: block; inline-size: 100%; block-size: auto; }
  .evx-plan.is-pick { cursor: crosshair; }
  .evx-plan-booth { position: absolute; display: grid; place-items: center; font-size: 10px; font-weight: 700; border-radius: 4px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1.5px dashed var(--ink); color: var(--ink); min-inline-size: 18px; min-block-size: 14px; }
  .evx-plan-booth.is-assigned { background: color-mix(in srgb, var(--accent) 80%, transparent); border: 0; color: #fff; }
  .evx-plan-booth.is-reserved { background: color-mix(in srgb, var(--warning) 50%, transparent); }
  .evx-pin { position: absolute; transform: translate(-50%, -100%); padding: 3px 8px 3px 20px; border-radius: var(--r-pill); background: var(--ink); color: var(--surface); font-size: 11px; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 12px -4px rgba(0,0,0,.4); }
  [dir="rtl"] .evx-pin { transform: translate(50%, -100%); }
  .evx-pin::before { content: ""; position: absolute; inset-inline-start: 7px; inset-block-start: 50%; inline-size: 8px; block-size: 8px; margin-block-start: -4px; border-radius: 50%; background: var(--accent); }
  .evx-pin.is-entrance::before, .evx-pin.is-accessible::before { background: var(--success); }
  .evx-pin.is-exit::before { background: var(--danger); }
  .evx-pin.is-toilets::before, .evx-pin.is-info::before { background: var(--info); }
  .evx-pin.is-food::before, .evx-pin.is-parking::before { background: var(--warning); }

  /* Venues */
  .evx-venues { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .evx-venue { display: grid; text-align: start; border-radius: var(--r-xl); border: 1px solid var(--line); background: var(--surface); overflow: hidden; transition: transform var(--t-fast), box-shadow var(--t-fast); }
  .evx-venue:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -18px rgba(0,0,0,.3); }
  .evx-venue-art { block-size: 120px; display: grid; place-items: center; color: #fff; overflow: hidden; }
  .evx-venue-art img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .evx-venue-art svg { inline-size: 34px; block-size: 34px; }
  .evx-venue-body { display: grid; gap: 2px; padding: 14px; }
  .evx-venue-body b { font: 600 18px/1.2 var(--font-display); color: var(--ink); }
  .evx-venue-body small { color: var(--text-muted); }
  .evx-venue-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-block-start: 8px; font-size: var(--fs-micro); color: var(--text-muted); }
  .evx-venue-meta span { display: inline-flex; gap: 4px; align-items: center; }
  .evx-venue-meta svg { inline-size: 13px; block-size: 13px; }
  .evx-panes { inline-size: fit-content; max-inline-size: 100%; overflow-x: auto; }
  .evx-rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .evx-rooms li { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: var(--r-lg); background: var(--surface-2); }
  .evx-room-kind { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 4px 8px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); color: var(--text-muted); }
  .evx-room-main { flex: 1; display: grid; min-inline-size: 0; }
  .evx-room-main small { font-size: var(--fs-micro); }
  .evx-drop { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 30px 16px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-xl); color: var(--text-muted); }
  .evx-drop svg { inline-size: 30px; block-size: 30px; }

  /* Seat map editor + live view */
  .sme { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; --cell: 26px; }
  @media (min-width: 1100px) { .sme { grid-template-columns: minmax(0, 1fr) 340px; } }
  .sme-side { display: grid; gap: 12px; }
  .sme-canvas { padding: 14px; overflow: hidden; }
  .sme-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; padding-block-end: 12px; border-block-end: 1px solid var(--line); }
  .sme-tool-group { display: flex; flex-wrap: wrap; gap: 4px; }
  .sme-tool { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); border: 1px solid transparent; }
  .sme-tool[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
  .sme-tool:hover:not([aria-pressed="true"]) { border-color: var(--line); color: var(--ink); }
  .sme-swatch { inline-size: 14px; block-size: 14px; border-radius: 4px; background: var(--accent); display: grid; place-items: center; font-size: 10px; }
  .sme-swatch.is-gap { background: transparent; border: 1.5px dashed var(--line-strong); }
  .sme-swatch.is-acc { background: transparent; inline-size: auto; }
  .sme-swatch.is-blk { background: repeating-linear-gradient(45deg, var(--line-strong) 0 3px, transparent 3px 6px); }
  .sme-stage-wrap { overflow: auto; padding: 18px 6px 8px; max-block-size: 70vh; overscroll-behavior: contain; }
  .sme-stage { margin: 0 auto 24px; inline-size: min(520px, 80%); text-align: center; }
  .sme-stage span, .sme-stage-input { display: block; inline-size: 100%; padding: 10px 0 16px; border: 0; border-block-start: 3px solid var(--accent); border-radius: 50% 50% 10px 10px / 100% 100% 10px 10px;
    background: linear-gradient(180deg, var(--accent-soft), transparent); text-align: center; font: 700 11px/1 var(--font-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--text-muted); }
  .sme-stage-input:focus { outline: none; color: var(--ink); }
  .sme-sections { display: grid; gap: 20px; justify-items: center; inline-size: max-content; margin-inline: auto; }
  .sme-section { padding: 10px 12px 12px; border-radius: var(--r-lg); border: 1.5px solid transparent; transition: border-color var(--t-fast), background var(--t-fast); }
  .sme-section.is-active { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent-soft) 40%, transparent); }
  .sme-section-head { display: flex; justify-content: center; gap: 8px; align-items: baseline; margin-block-end: 8px; font-size: var(--fs-small); }
  .sme-section-head small { color: var(--text-muted); font-size: var(--fs-micro); }
  .sme-grid { display: grid; gap: 4px; align-items: center; touch-action: none; }
  .sme-rowlabel { font-size: 10px; font-weight: 700; color: var(--text-muted); padding-inline-end: 6px; text-align: end; min-inline-size: 16px; background: none; border: 0; }
  button.sme-rowlabel:hover { color: var(--accent); }
  .sme-cell { inline-size: var(--cell); block-size: var(--cell); border-radius: 8px 8px 5px 5px; display: grid; place-items: center; font-size: 9px; font-weight: 700; cursor: pointer; user-select: none;
    background: color-mix(in srgb, var(--c, var(--accent)) 30%, var(--surface)); color: color-mix(in srgb, var(--c, var(--accent)) 50%, var(--ink)); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--c, var(--accent)) 60%, transparent); border: 0; padding: 0; }
  .sme-cell.is-gap { background: transparent; box-shadow: none; outline: 1px dashed var(--line); outline-offset: -3px; color: transparent; }
  .sme-cell.is-blk { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--c) 30%, var(--surface)) 0 3px, var(--surface-2) 3px 6px); }
  .sme-cell.is-acc { font-size: 12px; }
  .sme-cell.is-available { background: color-mix(in srgb, var(--c) 34%, var(--surface)); }
  .sme-cell.is-sold { background: var(--c); color: #fff; box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
  .sme-cell.is-held { background: var(--warning-soft); color: var(--warning); box-shadow: inset 0 0 0 2px var(--warning); }
  .sme-cell.is-blocked { background: repeating-linear-gradient(45deg, var(--line-strong) 0 3px, var(--surface-2) 3px 6px); color: var(--text-subtle); box-shadow: none; }
  .sme-cell.is-focus { outline: 3px solid var(--ink); outline-offset: 2px; transform: scale(1.12); }
  .sme-hint { font-size: var(--fs-micro); color: var(--text-muted); text-align: center; margin: 8px 0 0; }
  .sme-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-block-end: 12px; }
  .sme-summary div { display: grid; padding: 10px; border-radius: var(--r-md); background: var(--surface-2); text-align: center; }
  .sme-summary b { font: 600 22px/1.1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
  .sme-summary span { font-size: var(--fs-micro); color: var(--text-muted); }
  .sme-save { inline-size: 100%; justify-content: center; }
  .sme-side-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-block-end: 8px; }
  .sme-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-block-end: 10px; }
  .sme-chip { padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--line); font-size: var(--fs-micro); font-weight: 600; color: var(--text-muted); }
  .sme-chip[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
  .sme-cat { padding: 8px; border-radius: var(--r-md); background: var(--surface-2); margin-block-start: 8px; display: grid; gap: 6px; }
  .sme-cat-head { display: flex; gap: 6px; align-items: center; }
  .sme-cat-head .input { flex: 1; }
  .sme-color { inline-size: 32px; block-size: 32px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
  .sme-types { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-small); }
  .sme-type { display: inline-flex; gap: 5px; align-items: center; }
  .sme-type small { color: var(--text-muted); }
  .smv-kpis { display: flex; gap: 8px; overflow-x: auto; padding-block-end: 4px; }
  .smv-kpi { flex: none; min-inline-size: 120px; padding: 10px 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
  .smv-kpi span { display: flex; gap: 6px; align-items: center; font-size: var(--fs-micro); color: var(--text-muted); font-weight: 600; }
  .smv-kpi span i { inline-size: 8px; block-size: 8px; border-radius: 50%; }
  .smv-kpi b { font: 600 22px/1.2 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
  .smv-kpi small { font-size: 12px; color: var(--text-muted); }
  .smv-legend { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; font-size: var(--fs-micro); color: var(--text-muted); padding-block-start: 10px; border-block-start: 1px solid var(--line); }
  .smv-legend span { display: inline-flex; gap: 6px; align-items: center; }
  .smv-legend i { inline-size: 12px; block-size: 12px; border-radius: 3px; display: inline-block; }
  .smv-legend .is-available { background: color-mix(in srgb, var(--accent) 34%, var(--surface)); }
  .smv-legend .is-held { background: var(--warning-soft); box-shadow: inset 0 0 0 2px var(--warning); }
  .smv-legend .is-sold { background: var(--accent); }
  .smv-legend .is-blocked { background: repeating-linear-gradient(45deg, var(--line-strong) 0 3px, var(--surface-2) 3px 6px); }
  .smv-seat { font: 600 22px/1.2 var(--font-display); margin: 4px 0 8px; color: var(--ink); }
  .smv-person { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: var(--r-md); background: var(--surface-2); margin-block: 10px 6px; }
  .smv-person div { display: grid; min-inline-size: 0; }
  .smv-assign { display: grid; gap: 6px; margin-block-start: 14px; padding-block-start: 14px; border-block-start: 1px solid var(--line); }
  .smv-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
  .smv-results li { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 6px 8px; border-radius: var(--r-md); background: var(--surface-2); }
  .smv-results li span { display: grid; min-inline-size: 0; }
  .smv-results small { font-size: var(--fs-micro); overflow: hidden; text-overflow: ellipsis; }
  @media (max-width: 640px) {
    .evx-hero { padding: 18px; }
    .evx-stats > div { min-inline-size: 0; flex: 1; }
    .evx-search { inline-size: 100%; }
    .evx-toolbar > .cluster { inline-size: 100%; }
    .sme { --cell: 22px; }
  }
}

/* css/components/pixels.css */
/* Batch 1 · K (owner item 14): the Pixels screen and the pixel picker in the link editor and page settings. */
@layer components {
  .px-notice { display: flex; gap: var(--s-3); align-items: flex-start; margin-block-end: var(--s-4); }
  .px-notice > svg { flex: none; inline-size: 20px; block-size: 20px; color: var(--accent-text); margin-block-start: 2px; }
  .px-summary { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-block-end: var(--s-3); }
  .px-summary span { display: inline-flex; align-items: center; gap: 6px; }
  .px-grid { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
  .px-card { padding: var(--s-4); display: grid; gap: var(--s-3); align-content: start; min-inline-size: 0; }
  .px-card.is-paused { opacity: .72; }
  .px-card-head { display: flex; align-items: center; gap: var(--s-3); min-inline-size: 0; }
  .px-card-title { flex: 1; min-inline-size: 0; }
  .px-card-head .icon-btn { inline-size: 44px; block-size: 44px; }
  .px-logo { flex: none; display: inline-grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 12px; font: 700 16px/1 var(--font-display, inherit); color: var(--surface); background: var(--ink); vertical-align: middle; }
  .px-logo-meta { background: #0866ff; } .px-logo-ga4 { background: #e37400; } .px-logo-gtm { background: #246fdb; } .px-logo-google_ads { background: #1a73e8; }
  .px-logo-linkedin { background: #0a66c2; } .px-logo-pinterest { background: #e60023; } .px-logo-x { background: #0f1419; } .px-logo-quora { background: #b92b27; }
  .px-logo-tiktok { background: #010101; box-shadow: inset 2px 0 0 #25f4ee, inset -2px 0 0 #fe2c55; } .px-logo-snapchat { background: #fffc00; color: #111; } .px-logo-reddit { background: #ff4500; } .px-logo-bing { background: #00809d; }
  .px-id { display: flex; align-items: center; gap: var(--s-2); padding: 6px 6px 6px var(--s-3); border-radius: var(--r-xs, 8px); background: var(--surface-sunken); min-inline-size: 0; }
  .px-id code { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 13px/1.4 var(--font-mono); color: var(--text); }
  .px-where { display: flex; flex-wrap: wrap; gap: 6px; min-inline-size: 0; }
  .px-chip { display: inline-flex; align-items: center; gap: 6px; max-inline-size: 100%; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: var(--fs-small, 13px); color: var(--text); background: var(--surface); }
  .px-chip .truncate { max-inline-size: 180px; }
  .px-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; color: var(--text-muted); }
  .px-checks li { display: flex; align-items: center; gap: 6px; }
  .px-checks .is-ok { color: var(--success, var(--accent-text)); }
  .px-checks .is-bad { color: var(--warning); }
  .px-card-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
  .px-card-actions .btn { min-block-size: 44px; }
  .px-how { margin-block-start: var(--s-5, 24px); }
  .px-how-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); color: var(--text-muted); }
  .px-how-list li { display: flex; gap: var(--s-2); align-items: flex-start; }
  .px-how-list svg { flex: none; margin-block-start: 3px; color: var(--accent-text); }
  @media (min-width: 900px) { .px-how-list { grid-template-columns: 1fr 1fr; } }

  /* The add dialog: providers as a grid of tiles (radio inputs). */
  .px-providers { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s-2); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .px-providers legend { margin-block-end: var(--s-2); }
  .px-provider { display: flex; align-items: center; gap: var(--s-2); min-block-size: 52px; padding: 6px 10px 6px 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
  .px-provider .px-logo { inline-size: 32px; block-size: 32px; font-size: 14px; border-radius: 9px; }
  .px-provider-name { font-size: 13px; line-height: 1.25; color: var(--text); }
  .px-provider:hover { background: var(--surface-hover); }
  .px-provider:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
  .px-provider:has(input:focus-visible) { box-shadow: var(--focus-ring); }
  .px-id-input { display: grid; gap: 6px; }
  .px-id-state { display: inline-flex; align-items: center; gap: 6px; min-block-size: 18px; font-size: 13px; color: var(--text-muted); }
  .px-id-state.is-ok { color: var(--success, var(--accent-text)); }
  .px-id-state.is-bad { color: var(--warning); }

  /* Where it fires. */
  .px-targets { display: grid; gap: 2px; max-block-size: 280px; overflow: auto; overscroll-behavior: contain; padding: 2px; border: 1px solid var(--line); border-radius: 12px; }
  .px-target { display: flex; align-items: center; gap: var(--s-3); min-block-size: 44px; padding: 6px 10px; border-radius: 10px; cursor: pointer; min-inline-size: 0; }
  .px-target:hover { background: var(--surface-hover); }
  .px-target > span { display: grid; min-inline-size: 0; }
  .px-target small { display: block; }
  .px-target-form { justify-content: space-between; cursor: default; flex-wrap: wrap; }
  .px-target-main { display: flex; align-items: center; gap: var(--s-3); flex: 1; min-inline-size: 0; cursor: pointer; min-block-size: 32px; }
  .px-target-form .select { inline-size: auto; min-block-size: 36px; }

  /* The picker in the link editor and page settings. */
  .px-pick { display: grid; gap: var(--s-2); }
  .px-pick-list { display: grid; gap: 2px; }
  .px-pick .px-logo { inline-size: 28px; block-size: 28px; font-size: 12px; border-radius: 8px; }
}

/* css/components/upsell.css */
/* R4G · owner item 7: the lock badge, its popover, the upgrade sheet, the inline upsell card and the plans-page extras. */
@layer components {
  .upl { display: contents; }
  /* R15B · icon-only round lock (26px visual, 44px hit area via ::after). */
  .upl-badge { display: inline-grid; place-items: center; flex: none; align-self: flex-start; justify-self: start; inline-size: 26px; block-size: 26px; padding: 0; border-radius: 50%; border: 1px solid color-mix(in srgb, #C9971C 45%, transparent);
    background: linear-gradient(135deg, #FFF6DD, #FBE7B5); color: #5A4208; cursor: pointer; position: relative; transition: transform var(--t-fast), box-shadow var(--t-fast); }
  .upl-badge::after { content: ""; position: absolute; inset: -9px; } /* 44px touch target */
  .upl-badge:hover, .upl-badge:focus-visible { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgb(201 151 28 / .7); }
  .upl-badge:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .upl-badge svg { inline-size: 13px; block-size: 13px; }
  .upl-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-text); }
  .upl-kicker svg { inline-size: 13px; block-size: 13px; }
  .upl-pop { position: fixed; z-index: 90; inline-size: min(320px, calc(100vw - 24px)); padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface); color: var(--text);
    border: 1px solid var(--line); box-shadow: 0 24px 48px -16px rgb(0 0 0 / .28), 0 2px 6px rgb(0 0 0 / .06); display: grid; gap: var(--s-2); }
  .upl-pop.is-up { transform: translateY(-100%); }
  .upl-pop-title { font-weight: 700; color: var(--ink); font-size: var(--fs-body); }
  .upl-pop-text, .upl-card-text, .upl-sheet-text { font-size: var(--fs-small); color: var(--text-muted); }
  .upl-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: var(--fs-small); }
  .upl-benefits li { display: flex; gap: 8px; align-items: flex-start; }
  .upl-benefits svg { flex: none; inline-size: 16px; block-size: 16px; color: var(--success); margin-block-start: 2px; }
  .upl-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
  .upl-price b { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); }
  .upl-price small { color: var(--text-muted); }
  .upl-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-1); }
  .upl-actions .btn { min-block-size: 44px; }
  .upl-card { inline-size: 100%; display: flex; gap: var(--s-4); padding: var(--s-6); border-radius: var(--r-xl); border: 1px solid var(--line); margin-block-end: var(--s-4);
    background: radial-gradient(120% 140% at 100% 0%, var(--accent-soft) 0%, transparent 55%), var(--surface); }
  .upl-card-icon { flex: none; display: grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: var(--r-md); background: linear-gradient(135deg, #FFF6DD, #FBE7B5); color: #7A5A0C; }
  .upl-card-icon svg { inline-size: 24px; block-size: 24px; }
  .upl-card-body { display: grid; gap: var(--s-2); min-inline-size: 0; }
  .upl-card-title { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--ink); }
  .upl-sheet { overflow: hidden; padding: 0; }
  .upl-hero { position: relative; padding: var(--s-6) var(--s-6) var(--s-4); background: var(--grad-forest); color: #fff; display: grid; gap: var(--s-2); }
  .upl-hero .upl-kicker { color: rgb(255 255 255 / .85); }
  .upl-hero .upl-sheet-text { color: rgb(255 255 255 / .82); }
  .upl-sheet-title { color: #fff; font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.15; padding-inline-end: 40px; }
  .upl-close { position: absolute; inset-block-start: var(--s-3); inset-inline-end: var(--s-3); color: #fff; }
  .upl-plan { display: grid; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-lg); border: 1px solid var(--accent); background: var(--accent-soft); }
  .upl-plan-name { font-size: var(--fs-body); color: var(--ink); }
  .upl-usage { display: grid; gap: 6px; }
  .upl-offer { display: flex; gap: 8px; align-items: center; padding: var(--s-3); border-radius: var(--r-md); background: var(--warning-soft); font-size: var(--fs-small); }
  .upl-offer svg { flex: none; inline-size: 18px; block-size: 18px; }
  @media (max-width: 640px) {
    .upl-wrap { align-items: flex-end; padding: 0; }
    .upl-sheet { inline-size: 100%; max-inline-size: none; border-end-start-radius: 0; border-end-end-radius: 0; }
    .upl-card { flex-direction: column; padding: var(--s-5); }
    .upl-actions .btn { flex: 1 1 auto; }
  }
  /* Plans page (Settings → Plan & billing) */
  .bl-promo { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--grad-forest); color: #fff; margin-block: var(--s-4); }
  .bl-promo svg { flex: none; inline-size: 20px; block-size: 20px; }
  .bl-promo b { background: rgb(255 255 255 / .16); padding: 2px 8px; border-radius: var(--r-xs); }
  .bl-plan.is-recommended { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft-2), 0 18px 40px -24px rgb(0 0 0 / .4); }
  .bl-compare { overflow-x: auto; max-inline-size: 100%; }
  [data-compare] { min-inline-size: 0; max-inline-size: 100%; overflow: hidden; }
  .bl-compare table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-small); min-inline-size: 520px; }
  .bl-compare th, .bl-compare td { padding: 10px 12px; border-block-end: 1px solid var(--line); text-align: center; }
  .bl-compare th:first-child, .bl-compare td:first-child { text-align: start; position: sticky; inset-inline-start: 0; background: var(--surface); }
  .bl-compare thead th { font-weight: 700; color: var(--ink); }
  .bl-compare .is-rec { background: var(--accent-soft); }
  .bl-compare .grp td { font-weight: 700; color: var(--text-muted); text-transform: uppercase; font-size: var(--fs-micro); letter-spacing: .05em; background: var(--surface-2); }
  .bl-faq details { border-block-end: 1px solid var(--line); padding-block: var(--s-3); }
  .bl-faq summary { cursor: pointer; font-weight: 600; color: var(--ink); min-block-size: 32px; display: flex; align-items: center; }
  .bl-faq p { margin-block-start: var(--s-2); font-size: var(--fs-small); color: var(--text-muted); }
}
@media (prefers-reduced-motion: reduce) { .upl-badge { transition: none; } .upl-badge:hover { transform: none; } }
@layer components { .bl-compare td > svg { display: block; margin-inline: auto; } }
/* R11A · locked preview: a realistic sample under a soft blur + veil, with a centred glass card (<x-upgrade.preview>). */
@layer components {
  .upv { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-xl, 20px); border: 1px solid var(--line); background: var(--surface); min-block-size: 420px; display: grid; }
  .upv-page { min-block-size: min(70vh, 600px); }
  .upv-sample { grid-area: 1 / 1; padding: var(--s-5); display: grid; gap: var(--s-4); align-content: start; filter: blur(4px) saturate(1.15); opacity: .95; pointer-events: none; user-select: none; transform: scale(1.02); }
  .upv-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s-3); }
  .upv-tile { display: grid; gap: 4px; padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); }
  .upv-tile span { font-size: var(--fs-micro); color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
  .upv-tile b { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--ink); }
  .upv-tile i { font-style: normal; font-size: var(--fs-small); color: var(--accent); }
  .upv-chart { color: var(--accent); block-size: 170px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); padding: var(--s-3); }
  .upv-chart svg { inline-size: 100%; block-size: 100%; display: block; }
  .upv-bars { display: grid; gap: var(--s-2); }
  .upv-bar { display: grid; grid-template-columns: 110px 1fr; gap: var(--s-3); align-items: center; font-size: var(--fs-small); color: var(--text-muted); }
  .upv-bar i { block-size: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-soft-2, var(--accent-soft))); }
  .upv-list { display: grid; gap: var(--s-2); }
  .upv-row, .upv-card { display: grid; grid-template-columns: auto 1fr auto auto; gap: var(--s-3); align-items: center; padding: var(--s-4); border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); }
  .upv-row b, .upv-card b { color: var(--ink); }
  .upv-row small, .upv-card small { color: var(--text-muted); }
  .upv-row em, .upv-card em { font-style: normal; font-size: var(--fs-micro); padding: 2px 8px; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink, var(--accent)); }
  .upv-dot { inline-size: 32px; block-size: 32px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), #F6C453); }
  .upv-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-3); }
  .upv-card { grid-template-columns: 1fr; align-content: start; min-block-size: 150px; }
  .upv-veil { grid-area: 1 / 1; z-index: 1; background: radial-gradient(120% 80% at 50% 45%, color-mix(in srgb, var(--surface) 10%, transparent), color-mix(in srgb, var(--surface) 70%, transparent)); }
  .upv-veil::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .16) 50%, transparent 70%); background-size: 250% 100%; animation: upv-shimmer 3.2s ease-in-out infinite; }
  .upv-card-wrap { grid-area: 1 / 1; z-index: 2; display: grid; place-items: center; padding: var(--s-5) var(--s-4); }
  .upv-glass { inline-size: min(460px, 100%); display: grid; gap: var(--s-2); justify-items: start; padding: var(--s-6); border-radius: var(--r-xl, 20px); background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: 0 30px 60px -30px rgb(0 0 0 / .45), 0 0 0 1px var(--line); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); animation: upv-rise .5s cubic-bezier(.2,.8,.2,1) both; }
  .upv-glass:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .upv-icon { display: grid; place-items: center; inline-size: 52px; block-size: 52px; border-radius: 16px; background: linear-gradient(135deg, #FFF6DD, #FBE7B5); color: #7A5A0C; box-shadow: 0 10px 24px -12px #B88A1A; }
  .upv-icon svg { inline-size: 26px; block-size: 26px; }
  .upv-title { font-family: var(--font-display); font-size: var(--fs-h2); line-height: 1.15; color: var(--ink); }
  .upv-pitch { color: var(--text-muted); }
  .upv-price { margin-block-start: var(--s-1); }
  .upv-actions { inline-size: 100%; margin-block-start: var(--s-2); }
  .upv-actions .btn { min-block-size: 44px; }
  .upl-ask { display: flex; gap: 8px; align-items: center; color: var(--text-muted); flex: 1 1 100%; }
  @media (max-width: 640px) {
    .upv { min-block-size: 520px; }
    .upv-glass { padding: var(--s-5); }
    .upv-actions .btn { flex: 1 1 100%; }
    .upv-row { grid-template-columns: auto 1fr auto; }
    .upv-row small { display: none; }
  }
}
@keyframes upv-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@keyframes upv-rise { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .upv-veil::after { animation: none; display: none; } .upv-glass { animation: none; } }
@layer components { .bl-plan.is-preselected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent), 0 18px 40px -24px rgb(0 0 0 / .4); scroll-margin-block-start: 96px; } }

/* R15A · owner items 1/2/5/6: recommended plan, gold current plan, tabbed compare, quick-compare dialog */
@layer components {
  :root { --gold: #B7841B; --gold-2: #E9C25A; --gold-soft: rgb(233 194 90 / .16); }
  :root[data-theme="dark"] { --gold: #E9C25A; --gold-2: #F6DE8D; --gold-soft: rgb(233 194 90 / .12); }
  @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --gold: #E9C25A; --gold-2: #F6DE8D; --gold-soft: rgb(233 194 90 / .12); } }

  .bl-plans { align-items: stretch; }
  .bl-plan.is-recommended { border: 2px solid transparent; background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 35%, var(--brand, #7c5cff))) border-box;
    box-shadow: 0 24px 48px -28px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 0 6px var(--accent-soft); padding-block-start: 30px; }
  @media (min-width: 900px) { .bl-plan.is-recommended { transform: scale(1.03); z-index: 1; } }
  @media (max-width: 899px) { .bl-plan.is-recommended { order: -1; } }
  .bl-ribbon { position: absolute; inset-block-start: -13px; inset-inline-start: 50%; translate: -50% 0; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
    background: var(--accent); color: var(--on-accent, #fff); font-size: var(--fs-micro, 12px); font-weight: 700; letter-spacing: .02em; white-space: nowrap; box-shadow: var(--e2); }
  [dir="rtl"] .bl-ribbon { translate: 50% 0; }
  .bl-ribbon svg { width: 13px; height: 13px; }
  .bl-mine { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: var(--fs-micro, 12px); font-weight: 700; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
  .bl-mine svg { width: 13px; height: 13px; }
  .bl-mine.is-gold { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: #3a2a00; border-color: transparent; }
  .bl-mine.is-gold.is-trial { background: transparent; color: var(--gold); border: 1.5px solid var(--gold); }
  .bl-plan.is-gold { border: 2px solid var(--gold); background: linear-gradient(180deg, var(--gold-soft), transparent 140px), var(--surface); box-shadow: 0 0 0 5px var(--gold-soft), 0 18px 40px -26px rgb(0 0 0 / .45); }
  .bl-plan.is-gold.is-recommended { background: linear-gradient(180deg, var(--gold-soft), transparent 140px) padding-box, var(--surface) padding-box, linear-gradient(135deg, var(--gold-2), var(--gold)) border-box; border-color: transparent; box-shadow: 0 0 0 5px var(--gold-soft), 0 24px 48px -28px rgb(0 0 0 / .45); }

  .bl-cmp-head { flex-wrap: wrap; gap: 12px; }
  .bl-cmp-body.is-busy, .is-busy > .pc { opacity: .6; transition: opacity .15s; }
  .bl-cmp-tabs { display: flex; gap: 6px; overflow-x: auto; padding-block-end: 4px; margin-block-end: 12px; scrollbar-width: thin; }
  .chip-tab { flex: none; min-block-size: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-weight: 600; font-size: var(--fs-small, 14px); cursor: pointer; }
  .chip-tab:hover { border-color: var(--line-strong, var(--text-muted)); }
  .chip-tab[aria-selected="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
  .pc-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-block-end: 10px; }
  .pc-search { position: relative; flex: 1 1 220px; max-inline-size: 340px; }
  .pc-search svg { position: absolute; inset-inline-start: 12px; inset-block-start: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; }
  .pc-search .input { padding-inline-start: 36px; }
  .pc-switch { display: none; }
  .pc-switch .is-gold[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--gold); }
  .pc-scroll { overflow: auto; max-block-size: min(70vh, 640px); border: 1px solid var(--line); border-radius: 16px; }
  .pc table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-small, 14px); }
  .pc th, .pc td { padding: 11px 14px; border-block-end: 1px solid var(--line); text-align: center; }
  .pc tbody th { text-align: start; font-weight: 500; color: var(--text); }
  .pc thead th { position: sticky; inset-block-start: 0; z-index: 2; background: var(--surface); vertical-align: top; }
  .pc thead th:first-child, .pc tbody th { position: sticky; inset-inline-start: 0; background: var(--surface); z-index: 1; }
  .pc thead th:first-child { z-index: 3; }
  .pc-name { display: block; font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1rem; }
  .pc-price { display: block; font-size: var(--fs-micro, 12px); color: var(--text-muted); font-weight: 500; }
  .pc-mark { display: inline-flex; align-items: center; gap: 4px; margin-block: 4px 2px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
  .pc-mark svg { width: 12px; height: 12px; }
  .pc-mark.is-rec { background: var(--accent); color: var(--on-accent, #fff); }
  .pc-mark.is-gold { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: #3a2a00; }
  .pc .is-rec:not(.pc-mark) { background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface)); }
  .pc .is-mine { box-shadow: inset 2px 0 0 var(--gold), inset -2px 0 0 var(--gold); }
  .pc thead .is-mine { box-shadow: inset 2px 0 0 var(--gold), inset -2px 0 0 var(--gold), inset 0 2px 0 var(--gold); }
  .pc-yes svg { width: 18px; height: 18px; color: var(--accent-text); display: block; margin-inline: auto; }
  .pc-no { color: var(--text-muted); }
  .pc-val { font-weight: 600; color: var(--ink); }
  .pc tr.is-hl > * { background: color-mix(in srgb, var(--gold-soft) 100%, var(--surface)); }
  .pc tr.is-hl > th { font-weight: 700; box-shadow: inset 3px 0 0 var(--gold); }
  @media (max-width: 639px) {
    .pc-switch { display: flex; overflow-x: auto; max-inline-size: 100%; }
    .pc-switch button { min-block-size: 40px; }
    .pc table[data-col="0"] [data-c]:not([data-c="0"]), .pc table[data-col="1"] [data-c]:not([data-c="1"]), .pc table[data-col="2"] [data-c]:not([data-c="2"]),
    .pc table[data-col="3"] [data-c]:not([data-c="3"]), .pc table[data-col="4"] [data-c]:not([data-c="4"]), .pc table[data-col="5"] [data-c]:not([data-c="5"]) { display: none; }
    .pc th, .pc td { padding: 10px; }
  }
  .bl-mine-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 700px) { .bl-mine-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 1100px) { .bl-mine-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .bl-mine-cat { margin: 0 0 8px; font-size: var(--fs-micro, 12px); text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
  .bl-mine-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
  .bl-mine-grid li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; }
  .bl-mine-grid li svg { width: 14px; height: 14px; color: var(--gold); flex: none; }
  .bl-mine-grid li b { margin-inline-start: 6px; color: var(--ink); }
  .qc .dialog-body { gap: 12px; }
  .qc-ctas { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
  .qc-ctas .btn { min-block-size: 44px; }
  .qc-skel { display: grid; gap: 10px; }
  .qc-skel .skeleton { display: block; block-size: 44px; }
  @media (prefers-reduced-motion: reduce) { .bl-plan.is-recommended { transform: none; } }
}
@layer components {
  .bl-mine-grid > section { padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
  .bl-mine-more summary { cursor: pointer; margin-block-start: 8px; min-block-size: 32px; display: inline-flex; align-items: center; font-weight: 600; font-size: 13px; color: var(--accent-text); }
  .bl-mine-more ul { margin-block-start: 6px; }
}

/* css/components/events-website.css */
/* EV3 — Event website builder (livewire/events/website). Canopy tokens only. */
.evb-status { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); }
.evb-callout { margin-block-end: 14px; }
.evb-body { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1100px) { .evb-body { grid-template-columns: 400px minmax(0, 1fr); } }
.evb-side { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
@media (min-width: 1100px) { .evb-side { position: sticky; top: 76px; max-height: calc(100vh - 96px); } }
.evb-tabs { display: flex; gap: 2px; padding: 6px; overflow-x: auto; border-block-end: 1px solid var(--line); scrollbar-width: none; flex: none; }
.evb-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 0; background: none; border-radius: var(--r-sm); font: 600 var(--fs-small) var(--font-sans); color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.evb-tab svg { width: 15px; height: 15px; }
.evb-tab:hover { background: var(--surface-hover); color: var(--text); }
.evb-tab.is-active { background: var(--ink); color: var(--text-on-ink); }
.evb-pane { padding: 16px; display: grid; gap: 14px; overflow-y: auto; min-height: 0; }
.evb-pages { display: flex; flex-wrap: wrap; gap: 6px; }
.evb-page { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: 600 var(--fs-small) var(--font-sans); cursor: pointer; color: var(--text); }
.evb-page.is-active { border-color: var(--ink); background: var(--ink); color: var(--text-on-ink); }
.evb-page.is-off { opacity: .5; text-decoration: line-through; }
.evb-pagebar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.evb-outline-head { display: flex; justify-content: space-between; align-items: center; }
.evb-outline { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.evb-sec { display: flex; align-items: center; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.evb-sec:hover { border-color: var(--line-strong); }
.evb-sec.is-hidden { opacity: .55; }
.evb-sec-main { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; border: 0; background: none; padding: 4px; text-align: start; font: 600 var(--fs-body) var(--font-sans); color: var(--text); cursor: pointer; }
.evb-sec-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-text); flex: none; }
.evb-sec-icon svg { width: 16px; height: 16px; }
.evb-sec-tools { display: flex; gap: 0; opacity: .7; }
.evb-sec:hover .evb-sec-tools, .evb-sec:focus-within .evb-sec-tools { opacity: 1; }
@media (max-width: 600px) { .evb-sec-tools .btn:nth-child(-n+2) { display: none; } }
.evb-inspector { display: grid; gap: 14px; }
.evb-insp-head { display: flex; gap: 10px; align-items: center; padding-block-end: 10px; border-block-end: 1px solid var(--line); }
.evb-field { display: grid; gap: 6px; }
.evb-lang { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 5px; background: var(--surface-sunken); color: var(--text-muted); }
.evb-switch { display: flex; gap: 10px; align-items: center; font-size: var(--fs-small); font-weight: 600; cursor: pointer; }
.evb-switch input { width: 18px; height: 18px; accent-color: var(--accent); }
.evb-switch.is-sm { font-weight: 500; }
.evb-variants { display: flex; flex-wrap: wrap; gap: 6px; }
.evb-chip { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font: 600 var(--fs-micro) var(--font-sans); cursor: pointer; color: var(--text); }
.evb-chip.is-on { background: var(--ink); color: var(--text-on-ink); border-color: var(--ink); }
.evb-image { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.evb-image img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.evb-image img.evb-og { width: 100%; height: auto; aspect-ratio: 1200 / 630; }
.evb-image .select { flex: 1; min-width: 140px; }
.evb-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.evb-item { display: grid; gap: 8px; padding: 10px; border-radius: var(--r-md); background: var(--surface-sunken); }
.evb-item-head { display: flex; justify-content: space-between; align-items: center; }
.evb-newpage { display: grid; gap: 6px; padding-block-start: 10px; border-block-start: 1px dashed var(--line); }
.evb-dirs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.evb-dir { display: grid; gap: 4px; padding: 8px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--surface); text-align: start; cursor: pointer; color: var(--text); font-family: var(--font-sans); }
.evb-dir:hover { border-color: var(--line-strong); }
.evb-dir.is-on { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-soft); }
.evb-dir-swatch { display: grid; grid-template-columns: 1fr 1fr; height: 54px; border-radius: var(--r); overflow: hidden; }
.evb-dir-swatch span { display: grid; place-items: center; font: var(--w) 1.35rem/1 var(--f); letter-spacing: -.02em; position: relative; }
.evb-dir-swatch .is-l { background: var(--b); color: var(--t); }
.evb-dir-swatch .is-d { background: var(--db); color: var(--dt); }
.evb-dir-swatch .is-l::after, .evb-dir-swatch .is-d::after { content: ""; position: absolute; inset-inline-end: 7px; bottom: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--a); }
.evb-dir-swatch .is-d::after { background: var(--da); }
.evb-dir-name { font-weight: 700; font-size: var(--fs-small); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.evb-dir .muted { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.evb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.evb-color { width: 44px; height: 40px; padding: 2px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); flex: none; }
.evb-range { width: 100%; accent-color: var(--accent); }
.evb-serp { padding: 14px; border-radius: var(--r-md); background: var(--surface-sunken); font-family: arial, sans-serif; }
.evb-serp-url { margin: 0; font-size: 12px; color: var(--text-muted); }
.evb-serp-title { margin: 2px 0; font-size: 18px; color: #1a0dab; }
.evb-serp-desc { margin: 0; font-size: 13px; color: var(--text-muted); }
.evb-ld pre { max-height: 260px; overflow: auto; padding: 10px; border-radius: 10px; background: var(--surface-sunken); white-space: pre-wrap; word-break: break-all; }
.evb-snippet { display: flex; gap: 6px; align-items: flex-start; }
.evb-snippet textarea, .evb-snippet input { flex: 1; min-width: 0; }
.evb-embed-prev { border-radius: var(--r-md); background: repeating-conic-gradient(var(--surface-sunken) 0 25%, var(--surface) 0 50%) 0 0 / 16px 16px; padding: 10px; border: 1px solid var(--line); }
.evb-embed-prev iframe { width: 100%; border: 0; display: block; max-height: 520px; }
.evb-access { padding-block-start: 14px; border-block-start: 1px solid var(--line); }
.evb-langs { display: flex; gap: 6px; padding: 10px 16px; border-block-start: 1px solid var(--line); flex: none; }
.evb-stage { display: grid; gap: 10px; min-width: 0; }
.evb-stage-bar { display: flex; gap: 12px; align-items: center; }
.evb-frame { border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-sunken); overflow: hidden; display: grid; justify-items: center; padding: 0; transition: padding .3s var(--ease-out); }
.evb-frame iframe { width: 100%; height: calc(100vh - 210px); min-height: 560px; border: 0; background: var(--surface); display: block; transition: width .3s var(--ease-out); }
.evb-frame.is-mobile { padding: 18px 0; background: var(--grad-mesh), var(--surface-sunken); }
.evb-frame.is-mobile iframe { width: 390px; max-width: 100%; height: 780px; border-radius: 34px; box-shadow: 0 0 0 10px var(--ink), 0 30px 60px -20px rgb(0 0 0 / .45); }
.evb-lib-wrap { position: fixed; inset: 0; z-index: 80; background: var(--overlay); display: grid; place-items: center; padding: 16px; }
.evb-lib { width: min(860px, 100%); max-height: min(86vh, 900px); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.evb-lib-head { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-block-end: 1px solid var(--line); }
.evb-lib-head .input { flex: 1; }
.evb-lib-body { padding: 16px; overflow-y: auto; display: grid; gap: 10px; }
.evb-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.evb-lib-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); text-align: start; cursor: pointer; color: var(--text); font-family: var(--font-sans); font-size: var(--fs-small); }
.evb-lib-item:hover { border-color: var(--ink); background: var(--surface-hover); }
.evb-lib-item .d-block { display: block; margin-block-start: 2px; }

/* css/components/events.css */
/* Weesify Events — product shell (EV1): event nav, events home, wizard, command centre, settings, templates ---------- */
@layer components {
  /* ---------- Per-event header + navigation (x-events.event-nav) ---------- */
  /* [R3B] Compact premium header: back · avatar · title + status · one wrapping meta line · actions; primary tabs as a
     scrollable segmented bar, secondary tabs as a lighter underline row. Grid areas re-flow on phones. */
  .evn { margin-bottom: 20px; display: grid; gap: 14px; min-width: 0; container: evn / inline-size; }
  .evn-top { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "back thumb id actions"; align-items: center; column-gap: 14px; row-gap: 10px; min-width: 0; }
  .evn-back { grid-area: back; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; min-width: 40px; padding: 0 12px; border-radius: var(--r-pill); color: var(--text-muted); font-size: var(--fs-small); font-weight: 600; border: 1px solid var(--line); background: var(--surface); transition: color var(--t-fast), border-color var(--t-fast); }
  .evn-back:hover { color: var(--ink); border-color: var(--line-strong); }
  .evn-back svg { width: 16px; height: 16px; flex: none; }
  .evn-thumb { grid-area: thumb; width: 52px; height: 52px; border-radius: 16px; overflow: hidden; display: grid; place-items: center; color: #fff; box-shadow: var(--e1), 0 0 0 1px var(--line); }
  .evn-thumb img { width: 100%; height: 100%; object-fit: cover; }
  .evn-thumb svg { width: 22px; height: 22px; }
  .evn-id { grid-area: id; min-width: 0; display: grid; gap: 4px; }
  .evn-name-row { display: flex; align-items: center; gap: 6px 10px; min-width: 0; flex-wrap: wrap; }
  .evn-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem); letter-spacing: -0.03em; color: var(--ink); line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
  .evn-status { flex: none; }
  .evn-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--text-muted); line-height: 1.4; min-width: 0; }
  .evn-meta > li { display: inline-flex; align-items: center; gap: 5px; min-width: 0; white-space: nowrap; }
  /* Separators sit in a gutter that is clipped at the start of each line, so a wrapped line never starts with "·". */
  .evn-meta-wrap { overflow: hidden; min-width: 0; }
  .evn-meta { margin-inline-start: -18px; }
  .evn-meta > li::before { content: "·"; flex: none; inline-size: 18px; text-align: center; color: var(--text-subtle); }
  .evn-meta > li { gap: 0; }
  .evn-meta > li > svg { margin-inline-end: 5px; }
  .evn-meta svg { width: 14px; height: 14px; flex: none; color: var(--text-subtle); }
  .evn-meta > li > span { overflow: hidden; text-overflow: ellipsis; }
  .evn-when { color: var(--ink); font-weight: 550; }
  .evn-where { max-inline-size: 100%; }
  .evn-meta > li.evn-chip { padding: 1px 8px 1px 6px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text); font-size: var(--fs-micro, 12px); font-weight: 650; }
  .evn-meta > li.evn-chip svg { color: currentColor; width: 12px; height: 12px; }
  .evn-meta > li.evn-chip { margin-inline-start: 18px; }
  .evn-meta > li.evn-chip::before { content: none; }
  .evn-actions { grid-area: actions; display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }

  .evn-groups, .evn-items { display: flex; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; overscroll-behavior-x: contain; min-width: 0; }
  .evn-groups::-webkit-scrollbar, .evn-items::-webkit-scrollbar { display: none; }
  .evn-groups { gap: 2px; padding: 4px; border-radius: 16px; background: var(--surface-sunken); border: 1px solid var(--line); justify-self: start; max-inline-size: 100%; }
  .evn-group { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 14px; border-radius: 12px; white-space: nowrap; font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); flex: none; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
  .evn-group svg { width: 16px; height: 16px; flex: none; }
  .evn-group:hover { color: var(--ink); background: var(--surface-hover); }
  .evn-group.is-active { background: var(--ink); color: var(--text-on-ink); box-shadow: var(--e2); }
  .evn-group:focus-visible, .evn-item:focus-visible, .evn-back:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  .evn-items { gap: 4px; border-bottom: 1px solid var(--line); padding-inline: 2px; }
  .evn-item { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px; white-space: nowrap; font-size: var(--fs-small); font-weight: 500; color: var(--text-muted); flex: none; border-radius: 8px 8px 0 0; }
  .evn-item svg { width: 15px; height: 15px; flex: none; }
  .evn-item:hover { color: var(--ink); background: var(--surface-hover); }
  .evn-item.is-active { color: var(--ink); font-weight: 650; }
  .evn-item.is-active::after { content: ""; position: absolute; inset-inline: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
  .evn-item.is-active svg { color: var(--accent-text); }
  .evn-add { margin-block: 6px; min-height: 28px; border: 1px dashed var(--line-strong); border-radius: var(--r-pill); }
  .evn-title { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: -0.03em; color: var(--ink); margin-top: 2px; }
  @container evn (max-width: 899px) {
    .evn-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .evn-back-label { display: none; }
    .evn-back { padding: 0; }
  }
  @container evn (max-width: 600px) {
    .evn-top { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "back thumb id" "actions actions actions"; column-gap: 10px; align-items: start; }
    .evn-top:not(:has(.evn-actions)) { grid-template-areas: "back thumb id"; }
    .evn-back { min-height: 40px; margin-top: 2px; }
    .evn-thumb { width: 44px; height: 44px; border-radius: 13px; }
    .evn-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 1.15rem; }
    .evn-actions { justify-content: flex-start; flex-wrap: wrap; }
    .evn-groups { justify-self: stretch; }
    .evn-group { min-height: 36px; padding: 0 12px; }
  }

  /* ---------- Shared bits ---------- */
  .ev-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; }
  .ev-back svg { width: 14px; height: 14px; }
  .ev-h2 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
  .ev-auto { width: auto; }
  .ev-num { width: 84px; text-align: center; }
  .ev-span { grid-column: 1 / -1; }
  .ev-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .ev-problems { margin: 6px 0 0; padding-inline-start: 18px; display: grid; gap: 4px; list-style: disc; }
  .ev-datechip { position: absolute; top: 12px; inset-inline-start: 12px; display: grid; justify-items: center; min-width: 46px; padding: 6px 8px; border-radius: 14px; background: rgb(255 255 255 / .92); color: #101512; box-shadow: 0 8px 20px -10px rgb(0 0 0 / .5); line-height: 1; backdrop-filter: blur(8px); }
  .ev-datechip b { font-family: var(--font-display); font-size: 1.25rem; letter-spacing: -0.03em; }
  .ev-datechip small { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #C2410C; margin-top: 2px; }
  .choice.is-disabled { opacity: .55; cursor: not-allowed; }
  .ev-choice-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
  .ev-choice-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
  .ev-fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; min-width: 0; }
  .ev-seg { flex-wrap: wrap; }
  .ev-seg > label { cursor: pointer; }
  .ev-seg > label:has(input:focus-visible) { box-shadow: var(--focus-ring); }
  .ev-seg > label:has(input:disabled) { opacity: .5; cursor: not-allowed; }
  .ev-more { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; background: var(--surface-2); }
  .ev-more > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-small); color: var(--ink); list-style: none; }
  .ev-more > summary::-webkit-details-marker { display: none; }
  .ev-more > summary svg { width: 16px; height: 16px; color: var(--text-muted); }
  .ev-sub { padding: 18px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-2); }
  .ev-sub-title { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); font-size: .95rem; }
  .ev-sub-title svg { width: 17px; height: 17px; color: var(--accent-text); }
  .ev-dt { flex-wrap: nowrap; }
  .ev-dt .input { min-width: 0; }
  .ev-handoff { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-md); background: var(--assist-soft); color: var(--text); }
  .ev-handoff > svg { width: 20px; height: 20px; color: var(--assist-text); flex: none; margin-top: 2px; }
  .ev-handoff b { color: var(--ink); }
  .ev-handoff p { font-size: var(--fs-small); color: var(--text-muted); margin-top: 2px; }
  .ev-handoffs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
  .ev-toggles { padding: 4px 16px; }
  .ev-parts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
  .ev-part { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; background: var(--surface); }
  .ev-part:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
  .ev-part .check { margin-top: 2px; }
  .ev-part span { display: grid; gap: 2px; }
  .ev-part b { font-size: var(--fs-small); color: var(--ink); }
  .ev-part small { font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.35; }

  /* ---------- Events home ---------- */
  .ev-bridge { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-lg); background: linear-gradient(120deg, var(--heat-soft), var(--surface)); border: 1px solid var(--line); margin-bottom: 18px; }
  .ev-bridge-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--heat); color: #fff; flex: none; }
  .ev-bridge-icon svg { width: 20px; height: 20px; }
  .ev-bridge b { color: var(--ink); }
  .ev-bridge p { font-size: var(--fs-small); color: var(--text-muted); margin: 2px 0 10px; max-width: 70ch; }
  .ev-bridge-list { display: flex; flex-wrap: wrap; gap: 6px; }
  .ev-bridge-list .chip { cursor: pointer; }
  .ev-empty { padding: clamp(24px, 4vw, 48px); display: grid; gap: 28px; overflow: hidden; }
  @media (min-width: 980px) { .ev-empty { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; } }
  .ev-empty h2 { color: #fff; font-family: var(--font-display); font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem); letter-spacing: -0.05em; line-height: 1.02; margin: 14px 0 10px; }
  .ev-empty h2 em.accent { color: #C2F45B; font-family: var(--font-accent); font-weight: 400; letter-spacing: -0.02em; }
  .ev-empty p { color: rgb(255 255 255 / .8); max-width: 54ch; }
  .ev-empty-art { position: relative; display: grid; place-items: center; min-height: 220px; }
  .ev-ticket-art { width: min(300px, 92%); border-radius: 22px; background: #fff; color: #101512; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .6); display: grid; grid-template-columns: 1fr auto; overflow: hidden; transform: rotate(-3deg); }
  .ev-ticket-art-top { padding: 18px; display: grid; gap: 4px; }
  .ev-ticket-art-top b { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: -0.02em; }
  .ev-ticket-art-top small { color: #6B736C; }
  .ev-ticket-art-qr { grid-row: span 2; display: grid; place-items: center; padding: 18px; border-inline-start: 2px dashed #E4E7E2; }
  .ev-ticket-art-qr svg { width: 54px; height: 54px; }
  .ev-ticket-art-foot { padding: 10px 18px; background: #C2F45B; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
  .ev-stat-float { position: absolute; bottom: 10%; inset-inline-start: 6%; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 16px; background: var(--glass-strong); color: #101512; box-shadow: var(--e2); font-size: var(--fs-small); backdrop-filter: blur(10px); }
  .ev-stat-float svg { width: 16px; height: 16px; color: var(--violet-600); }

  .ev-dash { display: grid; gap: 14px; }
  @media (min-width: 1100px) { .ev-dash:has(.ev-next) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: stretch; } }
  .ev-dash-kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
  .ev-next { position: relative; display: grid; gap: 10px; align-content: end; padding: 22px; min-height: 220px; color: #fff; overflow: hidden; isolation: isolate; transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base); }
  .ev-next:hover { transform: translateY(-2px); box-shadow: var(--e2); }
  .ev-next-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; opacity: .5; mask-image: linear-gradient(180deg, #000 0%, transparent 95%); }
  .ev-next .chip { justify-self: start; }
  .ev-next-name { font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); letter-spacing: -0.04em; line-height: 1.05; }
  .ev-next-when { display: inline-flex; align-items: center; gap: 6px; color: rgb(255 255 255 / .8); font-size: var(--fs-small); }
  .ev-next-when svg { width: 15px; height: 15px; }
  .ev-next-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: var(--fs-small); color: rgb(255 255 255 / .75); }
  .ev-next-meta b { color: #C2F45B; font-weight: 700; }
  .ev-next-go { position: absolute; top: 18px; inset-inline-end: 18px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .2); }
  .ev-next-go svg { width: 18px; height: 18px; }
  .ev-tabs { overflow-x: auto; scrollbar-width: none; }
  .ev-tabs .tab { white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
  .ev-tabs .tab svg { width: 15px; height: 15px; }
  .ev-toolbar { flex-wrap: wrap; gap: 8px; }
  .ev-search { min-width: min(100%, 220px); }
  .ev-card-art { position: relative; }
  .ev-where { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); }
  .ev-where svg { width: 14px; height: 14px; flex: none; }

  /* Calendar */
  .ev-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); }
  .ev-cal-dow { padding: 8px; font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-subtle); text-align: center; }
  .ev-cal-day { min-height: 108px; padding: 6px; border-top: 1px solid var(--line); border-inline-start: 1px solid var(--line); display: grid; align-content: start; gap: 4px; min-width: 0; }
  .ev-cal-day:nth-child(7n + 1) { border-inline-start: 0; }
  .ev-cal-day.is-out { background: var(--surface-sunken); }
  .ev-cal-day.is-out .ev-cal-num { color: var(--text-subtle); }
  .ev-cal-num { font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
  .ev-cal-day.is-today .ev-cal-num { background: var(--ink); color: var(--text-on-ink); }
  .ev-cal-item { display: block; font-size: 11.5px; line-height: 1.3; padding: 3px 6px; border-radius: 6px; background: var(--info-soft); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-inline-start: 3px solid var(--info); }
  .ev-cal-item.is-success { background: var(--accent-soft); border-color: var(--accent); }
  .ev-cal-item.is-warning { background: var(--warning-soft); border-color: var(--warning); }
  .ev-cal-item.is-danger, .ev-cal-item.is-cancelled { background: var(--danger-soft); border-color: var(--danger); text-decoration: line-through; }
  .ev-cal-item.is-neutral { background: var(--surface-sunken); border-color: var(--line-strong); }
  .ev-cal-item .tabular { font-weight: 700; }
  .ev-cal-more { font-size: 11px; color: var(--text-muted); padding-inline-start: 6px; }
  @media (max-width: 640px) {
    .ev-cal-day { min-height: 64px; padding: 4px; }
    .ev-cal-item { font-size: 0; padding: 0; height: 6px; border-radius: 3px; border-inline-start-width: 0; background: var(--info); }
    .ev-cal-item .tabular { display: none; }
    .ev-cal-item.is-success { background: var(--accent); }
    .ev-cal-item.is-warning { background: var(--warning); }
    .ev-cal-item.is-danger, .ev-cal-item.is-cancelled { background: var(--danger); }
  }

  /* ---------- Create: start chooser ---------- */
  .ev-starts { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
  .ev-start { position: relative; display: grid; align-content: start; gap: 10px; min-height: 200px; padding: 22px; text-align: start; color: #fff; border: 0; cursor: pointer; transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base); }
  .ev-start:hover:not(:disabled) { transform: translateY(-4px); box-shadow: var(--e2); }
  .ev-start:disabled { opacity: .6; cursor: not-allowed; }
  .ev-start .chip { justify-self: start; }
  .ev-start b { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.035em; margin-top: 18px; }
  .ev-start > span:not(.chip):not(.ev-start-go) { color: rgb(255 255 255 / .8); font-size: var(--fs-small); max-width: 34ch; }
  .ev-start-go { position: absolute; bottom: 18px; inset-inline-end: 18px; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .16); }
  .ev-start-go svg { width: 18px; height: 18px; }
  .ev-tpl-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 240px); gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .ev-tpl { display: grid; gap: 6px; scroll-snap-align: start; }
  .ev-tpl b { color: var(--ink); font-size: var(--fs-small); }
  .ev-tpl small { color: var(--text-muted); font-size: var(--fs-micro); }
  .ev-tpl-art { position: relative; aspect-ratio: 16 / 10; border-radius: var(--r-md); overflow: hidden; display: grid; place-items: center; color: #fff; }
  .ev-tpl-art img { width: 100%; height: 100%; object-fit: cover; }
  .ev-tpl-art svg { width: 28px; height: 28px; }
  .ev-tpl-art .chip { position: absolute; top: 10px; inset-inline-start: 10px; }
  .ev-mini-cover { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: var(--surface-sunken); color: var(--text-muted); }
  .ev-mini-cover img { width: 100%; height: 100%; object-fit: cover; }
  .ev-copy { max-width: 820px; }
  .ev-copy-when { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }

  /* ---------- Wizard ---------- */
  .ev-wiz-head { display: grid; gap: 14px; margin-bottom: 18px; }
  .ev-wiz-title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
  .ev-stepper { max-width: 520px; }
  .ev-wiz { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ev-wiz-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 900px) { .ev-wiz { grid-template-columns: 200px minmax(0, 1fr); } }
  @media (min-width: 1240px) {
    .ev-wiz { grid-template-columns: 210px minmax(0, 1fr) 320px; }
    .ev-wiz-grid { grid-template-columns: minmax(0, 1fr) 340px; }
  }
  .ev-steps ol { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
  @media (min-width: 900px) { .ev-steps { position: sticky; top: 84px; } .ev-steps ol { flex-direction: column; overflow: visible; } }
  .ev-step { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 12px; background: none; border: 1px solid transparent; color: var(--text-muted); font-size: var(--fs-small); font-weight: 600; white-space: nowrap; cursor: pointer; text-align: start; transition: background var(--t-fast), color var(--t-fast); }
  .ev-step:disabled { cursor: default; opacity: .55; }
  .ev-step:hover:not(:disabled) { background: var(--surface-hover); color: var(--ink); }
  .ev-step-dot { width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); }
  .ev-step-dot svg { width: 15px; height: 15px; }
  .ev-step.is-done .ev-step-dot { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
  .ev-step.is-current { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: var(--e1); }
  .ev-step.is-current .ev-step-dot { background: var(--ink); color: var(--text-on-ink); border-color: var(--ink); }
  @media (max-width: 899px) { .ev-step-label { display: none; } .ev-step.is-current .ev-step-label { display: inline; } }
  .ev-panel { overflow: visible; }
  .ev-panel-body { padding: clamp(16px, 3vw, 28px); animation: ev-in var(--t-slow) var(--ease-out); }
  @keyframes ev-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .ev-wiz-foot { display: flex; align-items: center; gap: 10px; position: sticky; bottom: 0; z-index: 3; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); border-end-start-radius: inherit; border-end-end-radius: inherit; }
  @media (max-width: 640px) { .ev-wiz-foot { bottom: calc(64px + env(safe-area-inset-bottom)); } .ev-wiz-foot .btn-brand, .ev-wiz-foot .btn-primary { flex: 1; justify-content: center; } }
  .ev-title-input { font-family: var(--font-display); font-weight: 650; letter-spacing: -0.02em; }

  .ev-media-row { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 640px) { .ev-media-row { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); } }
  .ev-media { display: grid; gap: 6px; align-content: start; justify-items: start; }
  .ev-drop { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); border: 1.5px dashed var(--line-strong); background: var(--surface-sunken); overflow: hidden; display: grid; place-items: center; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
  .ev-drop.is-square { aspect-ratio: 1; max-width: 220px; }
  .ev-drop:hover { border-color: var(--accent); background: var(--accent-soft); }
  .ev-drop img { width: 100%; height: 100%; object-fit: cover; }
  .ev-drop-empty { display: grid; justify-items: center; gap: 4px; color: var(--text-muted); padding: 10px; text-align: center; }
  .ev-drop-empty svg { width: 26px; height: 26px; }
  .ev-drop-empty b { color: var(--ink); font-size: var(--fs-small); }
  .ev-drop-empty small { font-size: var(--fs-micro); }
  .ev-drop-over { position: absolute; inset-inline-end: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-pill); background: rgb(0 0 0 / .55); color: #fff; font-size: var(--fs-micro); backdrop-filter: blur(6px); }
  .ev-drop-over svg { width: 14px; height: 14px; }
  .ev-color { width: 44px; height: 40px; padding: 2px; border: 1px solid var(--line-strong); border-start-start-radius: var(--r-sm); border-end-start-radius: var(--r-sm); background: var(--surface); cursor: pointer; flex: none; }
  .ev-logo-row { align-items: center; }
  .ev-logo-thumb { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; border: 1px solid var(--line); background: #fff; }

  .ev-when { display: grid; gap: 8px; padding: 14px; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-2); }
  .ev-when-row { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
  .ev-when-label { width: 60px; padding-top: 10px; font-weight: 600; font-size: var(--fs-small); color: var(--text-muted); }
  .ev-when-row .field { margin: 0; }
  .ev-when .toggle-row { padding-bottom: 0; }
  .ev-date-row, .ev-loc-row { display: grid; gap: 8px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; }
  .ev-loc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto; }
  @media (max-width: 520px) { .ev-date-row { grid-template-columns: 1fr 1fr auto; } .ev-date-row > input:first-child { grid-column: 1 / -1; } }
  .ev-repeat { padding: 14px; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); }
  .ev-repeat-line { align-items: center; flex-wrap: wrap; font-size: var(--fs-small); color: var(--text-muted); }
  .ev-days { display: flex; gap: 6px; flex-wrap: wrap; }
  .ev-day { width: 46px; height: 40px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); cursor: pointer; transition: all var(--t-fast); }
  .ev-day.is-on { background: var(--ink); color: var(--text-on-ink); border-color: var(--ink); }
  .ev-day:has(input:focus-visible) { box-shadow: var(--focus-ring); }
  .ev-date-preview { padding: 14px 16px; border-radius: var(--r-lg); background: var(--accent-soft); }
  .ev-date-preview ul { margin-top: 8px; display: grid; gap: 6px; }
  .ev-date-preview li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--ink); }
  .ev-date-preview svg { width: 15px; height: 15px; color: var(--accent-text); }

  .ev-map-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); }
  .ev-map-card:hover { border-color: var(--line-strong); box-shadow: var(--e1); }
  .ev-map-card > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
  .ev-map-card b { color: var(--ink); font-size: var(--fs-small); }
  .ev-map-card small { color: var(--text-muted); font-size: var(--fs-micro); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ev-map-card > svg { width: 16px; height: 16px; color: var(--text-muted); }
  .ev-map-pin { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--heat-soft); color: var(--heat); flex: none; }
  .ev-map-pin svg { width: 18px; height: 18px; }
  .ev-providers { display: flex; flex-wrap: wrap; gap: 6px; }
  .ev-provider { padding: 8px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); font-size: var(--fs-small); font-weight: 600; color: var(--text-muted); cursor: pointer; }
  .ev-provider.is-on { background: var(--ink); border-color: var(--ink); color: var(--text-on-ink); }
  .ev-provider:has(input:focus-visible) { box-shadow: var(--focus-ring); }
  .ev-window { align-items: start; }

  .ev-cur { max-width: 260px; margin: 0; }
  .ev-cur-mini { width: auto; max-width: 90px; border-start-end-radius: 0; border-end-end-radius: 0; }
  .ev-tickets { display: grid; gap: 12px; }
  .ev-ticket { display: grid; grid-template-columns: 44px minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
  .ev-ticket-stub { display: grid; place-items: center; background: var(--grad-forest); color: #C2F45B; border-inline-end: 2px dashed rgb(255 255 255 / .35); }
  .ev-ticket-stub svg { width: 18px; height: 18px; transform: rotate(-90deg); }
  .ev-ticket-body { padding: 14px; display: grid; gap: 10px; min-width: 0; }
  .ev-ticket-top { display: flex; gap: 8px; align-items: center; }
  .ev-ticket-name { font-weight: 650; }
  .ev-ticket-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); align-items: start; }
  .ev-ticket-grid .field { margin: 0; }

  .ev-themes { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
  .ev-theme { display: grid; gap: 4px; padding: 8px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
  .ev-theme:hover { transform: translateY(-2px); box-shadow: var(--e1); }
  .ev-theme.is-on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .ev-theme:has(input:focus-visible) { box-shadow: var(--focus-ring); }
  .ev-theme b { font-size: var(--fs-small); color: var(--ink); padding-inline: 4px; }
  .ev-theme small { font-size: var(--fs-micro); color: var(--text-muted); padding-inline: 4px; line-height: 1.35; }
  .ev-theme-art { height: 74px; border-radius: 10px; display: grid; grid-template-rows: 1fr 8px 8px; gap: 4px; padding: 8px; }
  .ev-theme-art i { border-radius: 4px; }
  .ev-theme-art i:nth-child(1) { border-radius: 6px; }
  .ev-theme-art i:nth-child(3) { width: 60%; }
  .ev-theme-editorial .ev-theme-art { background: #F6F1E7; } .ev-theme-editorial .ev-theme-art i { background: #1B1B1B; } .ev-theme-editorial .ev-theme-art i:nth-child(1) { background: linear-gradient(135deg, #D9CBB0, #A68B5B); }
  .ev-theme-aurora .ev-theme-art { background: var(--grad-aurora); } .ev-theme-aurora .ev-theme-art i { background: rgb(255 255 255 / .75); }
  .ev-theme-noir .ev-theme-art { background: #0B0D0C; } .ev-theme-noir .ev-theme-art i { background: #F2F7F4; } .ev-theme-noir .ev-theme-art i:nth-child(1) { background: linear-gradient(135deg, #2A2F2C, #7C5CFF); }
  .ev-theme-minimal .ev-theme-art { background: #fff; border: 1px solid var(--line); } .ev-theme-minimal .ev-theme-art i { background: #D5DAD3; } .ev-theme-minimal .ev-theme-art i:nth-child(1) { background: #EEF0EC; }
  .ev-theme-festival .ev-theme-art { background: #FF4D8D; } .ev-theme-festival .ev-theme-art i { background: #FFE14D; } .ev-theme-festival .ev-theme-art i:nth-child(1) { background: linear-gradient(135deg, #3B8BFF, #7C5CFF); }
  .ev-theme-sunrise .ev-theme-art { background: var(--grad-sunset); } .ev-theme-sunrise .ev-theme-art i { background: rgb(255 255 255 / .8); }
  .ev-modules { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
  .ev-faq { display: flex; gap: 8px; align-items: flex-start; }
  .ev-faq-in { flex: 1; min-width: 0; }
  .ev-gallery { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .ev-gallery figure { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; margin: 0; }
  .ev-gallery img { width: 100%; height: 100%; object-fit: cover; }
  .ev-gallery figure .icon-btn { position: absolute; top: 4px; inset-inline-end: 4px; background: rgb(0 0 0 / .55); color: #fff; width: 28px; height: 28px; }
  .ev-gallery-add { aspect-ratio: 1; border-radius: 12px; border: 1.5px dashed var(--line-strong); display: grid; place-items: center; align-content: center; gap: 4px; color: var(--text-muted); font-size: var(--fs-micro); background: var(--surface-sunken); cursor: pointer; }
  .ev-gallery-add:hover { border-color: var(--accent); color: var(--accent-text); }
  .ev-gallery-add svg { width: 20px; height: 20px; }

  .ev-timeline { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
  .ev-tl-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; position: relative; }
  .ev-tl-item + .ev-tl-item { border-top: 1px solid var(--line); }
  .ev-tl-item.is-fixed { cursor: default; background: var(--accent-soft); }
  .ev-tl-item b { display: block; color: var(--ink); font-size: var(--fs-small); }
  .ev-tl-item small { color: var(--text-muted); font-size: var(--fs-micro); }
  .ev-tl-dot { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-sunken); color: var(--ink); flex: none; }
  .ev-tl-dot svg { width: 16px; height: 16px; }
  .ev-tl-item.is-fixed .ev-tl-dot { background: var(--accent); color: #fff; }

  .ev-check { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-lg); background: var(--warning-soft); }
  .ev-check.is-ready { background: var(--accent-soft); }
  .ev-check-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--warning); color: #fff; flex: none; }
  .ev-check.is-ready .ev-check-icon { background: var(--accent); }
  .ev-check-icon svg { width: 18px; height: 18px; }
  .ev-check b { color: var(--ink); }
  .ev-check ul { margin: 6px 0; display: grid; gap: 4px; }
  .ev-check li { display: flex; gap: 6px; align-items: center; font-size: var(--fs-small); }
  .ev-check li svg { width: 14px; height: 14px; color: var(--warning); }
  .ev-previews { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
  .ev-serp { display: grid; gap: 3px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); }
  .ev-serp-url { font-size: 12px; color: var(--text-muted); }
  .ev-serp-title { font-size: 1.05rem; color: #1A0DAB; }
  :root[data-theme="dark"] .ev-serp-title { color: #8AB4F8; }
  .ev-serp-desc { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.45; }
  .ev-og { border-radius: var(--r-md); border: 1px solid var(--line); overflow: hidden; background: var(--surface); }
  .ev-og-img { aspect-ratio: 1.91 / 1; display: grid; place-items: center; color: #fff; }
  .ev-og-img img { width: 100%; height: 100%; object-fit: cover; }
  .ev-og-img svg { width: 30px; height: 30px; }
  .ev-og-meta { display: grid; gap: 2px; padding: 10px 12px; background: var(--surface-2); }
  .ev-og-meta small { font-size: 11px; color: var(--text-subtle); }
  .ev-og-meta b { font-size: var(--fs-small); color: var(--ink); }

  /* Live preview */
  .ev-preview { display: none; }
  @media (min-width: 1240px) { .ev-preview { display: grid; gap: 10px; position: sticky; top: 84px; } }
  .ev-preview-kicker { display: inline-flex; align-items: center; gap: 6px; }
  .ev-pcard { --ev-accent: var(--accent); border-radius: var(--r-xl); overflow: hidden; background: var(--surface); box-shadow: var(--e2); border: 1px solid var(--line); }
  .ev-pcard-cover { position: relative; aspect-ratio: 16 / 10; display: grid; background: var(--grad-forest); }
  .ev-pcard.ev-theme-aurora .ev-pcard-cover { background: var(--grad-aurora); }
  .ev-pcard.ev-theme-noir .ev-pcard-cover { background: var(--grad-ink); }
  .ev-pcard.ev-theme-sunrise .ev-pcard-cover, .ev-pcard.ev-theme-festival .ev-pcard-cover { background: var(--grad-sunset); }
  .ev-pcard.ev-theme-editorial .ev-pcard-cover { background: linear-gradient(135deg, #D9CBB0, #A68B5B); }
  .ev-pcard.ev-theme-minimal .ev-pcard-cover { background: var(--surface-sunken); }
  .ev-pcard-cover img { width: 100%; height: 100%; object-fit: cover; }
  .ev-pcard-format { position: absolute; bottom: 12px; inset-inline-start: 12px; padding: 4px 10px; border-radius: var(--r-pill); background: rgb(0 0 0 / .5); color: #fff; font-size: 11px; font-weight: 600; backdrop-filter: blur(6px); }
  .ev-pcard-body { padding: 16px 18px 18px; display: grid; gap: 8px; }
  .ev-pcard-title { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: -0.03em; line-height: 1.12; color: var(--ink); }
  .ev-pcard.ev-theme-editorial .ev-pcard-title { font-family: var(--font-accent); font-weight: 400; font-size: 1.55rem; letter-spacing: -0.01em; }
  .ev-pcard-sum { font-size: var(--fs-small); color: var(--text-muted); }
  .ev-pcard-meta { display: grid; gap: 6px; margin: 4px 0; }
  .ev-pcard-meta li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--text); }
  .ev-pcard-meta svg { width: 15px; height: 15px; color: var(--text-muted); flex: none; }
  .ev-pcard-cta { display: grid; place-items: center; height: 44px; border-radius: var(--r-pill); background: var(--ev-accent); color: #fff; font-weight: 700; font-size: var(--fs-small); }
  .ev-preview-foot { display: flex; align-items: center; gap: 6px; font-size: var(--fs-micro); color: var(--text-muted); }
  .ev-preview-foot svg { width: 14px; height: 14px; }
  .ev-golive { padding: 14px 16px; border-radius: var(--r-md); background: var(--accent-soft); }

  /* ---------- Command centre ---------- */
  .ev-born { display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-radius: var(--r-lg); background: linear-gradient(110deg, var(--accent-soft), var(--assist-soft)); margin-bottom: 14px; }
  .ev-born.is-draft { background: var(--warning-soft); }
  .ev-born-icon { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--ink); color: #C2F45B; flex: none; }
  .ev-born-icon svg { width: 20px; height: 20px; }
  .ev-born b { color: var(--ink); }
  .ev-born p { font-size: var(--fs-small); color: var(--text-muted); }
  .ev-stage { display: grid; gap: 22px; padding: clamp(18px, 3vw, 30px); color: #fff; margin-bottom: 14px; }
  @media (min-width: 980px) { .ev-stage { grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); align-items: center; } }
  .ev-stage-main { display: grid; gap: 12px; align-content: start; min-width: 0; }
  .ev-stage-main > .chip { justify-self: start; }
  .ev-cd { display: grid; gap: 6px; }
  .ev-cd-label { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .12em; color: rgb(255 255 255 / .6); font-weight: 700; }
  .ev-cd-units { display: flex; gap: clamp(8px, 2vw, 18px); }
  .ev-cd-units span { display: grid; gap: 2px; min-width: 56px; }
  .ev-cd-units b { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
  .ev-cd-units small { font-size: var(--fs-micro); color: rgb(255 255 255 / .6); }
  .ev-cd-big { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem); letter-spacing: -0.04em; line-height: 1.05; }
  .ev-cd-sub { color: rgb(255 255 255 / .7); font-size: var(--fs-small); }
  .ev-stage-when { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-small); color: rgb(255 255 255 / .85); }
  .ev-stage-when span { color: rgb(255 255 255 / .55); }
  .ev-stage-when svg { width: 15px; height: 15px; }
  .ev-path { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
  .ev-path li { display: grid; gap: 6px; font-size: 11px; color: rgb(255 255 255 / .5); font-weight: 600; }
  .ev-path li span { height: 4px; border-radius: 99px; background: rgb(255 255 255 / .16); }
  .ev-path li.is-done { color: rgb(255 255 255 / .8); } .ev-path li.is-done span { background: #25D695; }
  .ev-path li.is-now { color: #C2F45B; } .ev-path li.is-now span { background: linear-gradient(90deg, #C2F45B, #25D695); box-shadow: 0 0 12px rgb(194 244 91 / .6); }
  .ev-health { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; border-radius: var(--r-lg); background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .12); backdrop-filter: blur(10px); }
  .ev-health-ring { --p: 0; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: radial-gradient(closest-side, #121614 79%, transparent 80% 100%), conic-gradient(#C2F45B calc(var(--p) * 1%), rgb(255 255 255 / .12) 0); }
  .ev-health-ring b { font-family: var(--font-display); font-size: 1.7rem; letter-spacing: -0.04em; line-height: 1; }
  .ev-health-ring small { font-size: 10px; color: rgb(255 255 255 / .6); text-transform: uppercase; letter-spacing: .1em; }
  .ev-health-list { display: grid; gap: 5px; }
  .ev-health-list li { display: flex; gap: 7px; align-items: center; font-size: 12.5px; color: rgb(255 255 255 / .8); }
  .ev-health-list li svg { width: 14px; height: 14px; flex: none; color: rgb(255 255 255 / .4); }
  .ev-health-list li.is-done { color: rgb(255 255 255 / .5); } .ev-health-list li.is-done svg { color: #25D695; }
  .ev-health-list a, .ev-health-list button { color: #fff; text-decoration: underline; text-decoration-color: rgb(255 255 255 / .3); text-underline-offset: 3px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: start; }
  .ev-alerts { display: grid; gap: 8px; margin-bottom: 14px; }
  .ev-alert { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-md); background: var(--info-soft); font-size: var(--fs-small); color: var(--ink); }
  .ev-alert > svg { width: 18px; height: 18px; color: var(--info); flex: none; }
  .ev-alert.is-warning { background: var(--warning-soft); } .ev-alert.is-warning > svg { color: var(--warning); }
  .ev-alert.is-danger { background: var(--danger-soft); } .ev-alert.is-danger > svg { color: var(--danger); }
  .ev-kpis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); margin-bottom: 18px; }
  .ev-cap-row { display: flex; align-items: center; gap: 12px; }
  .ev-cc { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 1100px) { .ev-cc { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); } }
  .ev-overview .card-title { display: inline-flex; align-items: center; gap: 8px; }
  .ev-overview .card-title > svg { width: 17px; height: 17px; color: var(--text-muted); }
  .ev-tt { display: grid; }
  .ev-tt li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 1fr); gap: 14px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--line); }
  .ev-tt li.is-paused { opacity: .6; }
  .ev-tt-main { display: grid; min-width: 0; }
  .ev-tt-main b { color: var(--ink); font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ev-tt-main small { color: var(--text-muted); font-size: var(--fs-micro); }
  .ev-tt-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
  .ev-tt-bar small { font-size: var(--fs-micro); color: var(--text-muted); }
  .ev-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0 16px 16px; }
  .ev-quick-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r-md); border: 1px solid var(--line); font-size: var(--fs-small); font-weight: 600; color: var(--ink); transition: background var(--t-fast), transform var(--t-fast), border-color var(--t-fast); }
  .ev-quick-item:hover { background: var(--surface-hover); transform: translateY(-1px); border-color: var(--line-strong); }
  .ev-quick-item span { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-sunken); flex: none; }
  .ev-quick-item svg { width: 15px; height: 15px; }
  .ev-mini-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
  .ev-mini-stats > * { display: grid; gap: 2px; padding: 14px 16px; background: var(--surface); }
  .ev-mini-stats > a:hover { background: var(--surface-hover); }
  .ev-mini-stats svg { width: 16px; height: 16px; color: var(--text-muted); }
  .ev-mini-stats b { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -0.03em; color: var(--ink); }
  .ev-mini-stats small { font-size: var(--fs-micro); color: var(--text-muted); }
  .ev-comms { display: flex; flex-wrap: wrap; gap: 8px; }
  .ev-comms span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface-sunken); color: var(--text-subtle); text-decoration: line-through; }
  .ev-comms span.is-on { color: var(--accent-text); background: var(--accent-soft); text-decoration: none; }
  .ev-comms svg { width: 13px; height: 13px; }

  /* ---------- Settings ---------- */
  .ev-settings-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
  @media (min-width: 900px) { .ev-settings-grid { grid-template-columns: 220px minmax(0, 1fr); } }
  .ev-side-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
  @media (min-width: 900px) { .ev-side-tabs { flex-direction: column; position: sticky; top: 84px; } }
  .ev-side-tabs button { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px; background: none; border: 0; color: var(--text-muted); font-weight: 600; font-size: var(--fs-small); white-space: nowrap; cursor: pointer; text-align: start; }
  .ev-side-tabs button svg { width: 16px; height: 16px; }
  .ev-side-tabs button:hover { background: var(--surface-hover); color: var(--ink); }
  .ev-side-tabs button.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--e1), 0 0 0 1px var(--line); }
  .ev-side-tabs button.is-danger { color: var(--danger); }
  .ev-moves { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
  .ev-move { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-weight: 600; font-size: var(--fs-small); cursor: pointer; text-align: start; transition: all var(--t-fast); }
  .ev-move svg { width: 17px; height: 17px; flex: none; }
  .ev-move:hover { transform: translateY(-1px); box-shadow: var(--e1); }
  .ev-move.is-primary { background: var(--ink); color: var(--text-on-ink); border-color: var(--ink); }
  .ev-move.is-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
  .ev-danger .card-header { gap: 14px; flex-wrap: wrap; }

  /* ---------- Templates ---------- */
  .ev-tpl-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
  .ev-tpl-card { display: grid; grid-template-rows: auto 1fr auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); overflow: hidden; transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base); }
  .ev-tpl-card:hover { transform: translateY(-3px); box-shadow: var(--e2); }
  .ev-tpl-card .ev-tpl-art { border-radius: 0; }
  .ev-tpl-body { padding: 14px 16px; display: grid; gap: 8px; align-content: start; }
  .ev-tpl-body h3 { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: -0.02em; color: var(--ink); }
  .ev-tpl-body .text-xs svg { width: 13px; height: 13px; vertical-align: -2px; }
  .ev-tpl-foot { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); }
  /* R4B: gallery filters, gradient art, preview */
  .ev-tpl-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-block-end: 12px; }
  .ev-tpl-toolbar .ev-tpl-search { flex: 1 1 260px; min-inline-size: min(100%, 260px); }
  .ev-tpl-toolbar .segmented { overflow-x: auto; max-inline-size: 100%; }
  .ev-tpl-niches { display: flex; gap: 8px; overflow-x: auto; padding-block-end: 6px; margin-block-end: 14px; scrollbar-width: thin; }
  .ev-tpl-niches .chip { min-block-size: 44px; height: auto; cursor: pointer; flex: none; }
  .ev-tpl-card button.ev-tpl-art { border: 0; padding: 0; inline-size: 100%; cursor: pointer; font: inherit; }
  .ev-tpl-grad { background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--tpl-a) 85%, #fff 15%), transparent 60%), linear-gradient(135deg, var(--tpl-a), var(--tpl-b)); }
  .ev-tpl-art .ev-tpl-fmt { inset-inline-start: auto; inset-inline-end: 10px; }
  .ev-tpl-blurb { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .ev-tpl-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; }
  .ev-tpl-hero { aspect-ratio: auto; block-size: clamp(120px, 22vw, 180px); flex: none; border-radius: var(--r-md); }
  .ev-tpl-hero img { object-position: center 75%; }
  .ev-tpl-sec { display: grid; gap: 8px; }
  .ev-tpl-sec h3 { font-size: var(--fs-small); font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: 0.04em; }
  .ev-tpl-list, .ev-tpl-agenda, .ev-tpl-tickets { list-style: none; margin: 0; padding: 0; }
  .ev-tpl-list { display: grid; gap: 6px; }
  .ev-tpl-list li { display: flex; gap: 8px; align-items: start; }
  .ev-tpl-list svg { width: 16px; height: 16px; color: var(--accent); flex: none; margin-block-start: 3px; }
  .ev-tpl-agenda { display: grid; gap: 0; border-inline-start: 2px solid var(--line); padding-inline-start: 14px !important; }
  .ev-tpl-agenda li { display: grid; grid-template-columns: minmax(84px, max-content) 1fr; gap: 12px; padding-block: 6px; font-size: var(--fs-small); }
  .ev-tpl-agenda b { color: var(--ink); font-variant-numeric: tabular-nums; }
  .ev-tpl-tickets { display: grid; gap: 8px; }
  .ev-tpl-tickets li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
  .ev-tpl-tickets li div { display: grid; gap: 2px; min-inline-size: 0; }
  .ev-tpl-faq { border-block-end: 1px solid var(--line); padding-block: 8px; }
  .ev-tpl-faq summary { cursor: pointer; font-weight: 600; color: var(--ink); min-block-size: 32px; }
  .ev-tpl-swatch { display: inline-block; inline-size: 14px; block-size: 14px; border-radius: 4px; background: var(--sw); vertical-align: -2px; border: 1px solid var(--line); }
}
@layer components {
  .ev-stage, .ev-next { color: #fff; }
  .ev-cd-units b, .ev-cd-big, .ev-next-name, .ev-health-ring b { color: #fff; }
  .ev-kpi-cap .progress-ring { background: radial-gradient(closest-side, var(--surface) 76%, transparent 77% 100%), conic-gradient(var(--accent) calc(var(--p) * 1%), var(--surface-active) 0); }
  .ev-kpi-cap .progress-ring b { color: var(--ink); }
}
@layer components {
  .ev-datechip b { color: #101512; }
  .ev-media { min-width: 0; width: 100%; }
  .ev-media .field-label { white-space: nowrap; }
  .ev-drop.is-square { width: 100%; }
}
@layer components {
  .ev-start b, .ev-start { color: #fff; }
}

@layer components { .evn-item .evn-lock { inline-size: 14px; block-size: 14px; margin-inline-start: auto; opacity: .7; color: var(--accent-ink, currentColor); flex: none; } }

/* R19D · owner items 5, 6, 9: sticky event navigation (both rows, compact once stuck), copy-link button, compact stage. */
@layer components {
  .evn[data-stick] { position: sticky; top: calc(var(--stick-top, var(--topbar-h, 64px)) - var(--stick-lift, 0px)); z-index: 15; margin-inline: -12px; padding-inline: 12px; padding-bottom: 6px; background: var(--surface); transition: box-shadow var(--t-fast); }
  .evn.is-stuck { background: color-mix(in oklab, var(--surface) 88%, transparent); backdrop-filter: saturate(1.5) blur(12px); -webkit-backdrop-filter: saturate(1.5) blur(12px); box-shadow: 0 10px 20px -16px color-mix(in oklab, var(--ink) 50%, transparent); border-end-start-radius: 14px; border-end-end-radius: 14px; }
  .evn.is-stuck .evn-top { visibility: hidden; }
  /* R20C: being stuck changes paint only (background, blur, shadow, visibility); never size, padding or display,
     or the header's height changes as it pins, which moves the scroll position and re-toggles (the "shake"). */
  .evn-group, .evn-item { scroll-margin-inline: 24px; }

  .ev-copy-link { position: relative; }
  .ev-copy-link svg { width: 16px; height: 16px; }
  .ev-copy-link.is-done { color: var(--accent-text); border-color: color-mix(in oklab, var(--accent) 50%, var(--line)); }
  .ev-copy-link[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); inset-inline-start: 50%; translate: -50% 4px; padding: 5px 9px; border-radius: 8px; background: var(--ink); color: var(--text-on-ink); font-size: 12px; font-weight: 600; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--t-fast), translate var(--t-fast); z-index: 30; }
  [dir="rtl"] .ev-copy-link[data-tip]::after { translate: 50% 4px; }
  .ev-copy-link:hover::after, .ev-copy-link:focus-visible::after { opacity: 1; translate: -50% 0; }
  [dir="rtl"] .ev-copy-link:hover::after, [dir="rtl"] .ev-copy-link:focus-visible::after { translate: 50% 0; }

  .ev-stage.ev-stage-c { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: clamp(14px, 2.2vw, 20px) clamp(16px, 2.6vw, 24px); }
  .ev-sc-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 22px; min-width: 0; }
  .ev-sc-lead { display: grid; gap: 8px; justify-items: start; min-width: 0; }
  .ev-stage-c .ev-cd { gap: 3px; }
  .ev-stage-c .ev-cd-units { gap: 12px; }
  .ev-stage-c .ev-cd-units span { min-width: 0; grid-auto-flow: column; align-items: baseline; gap: 3px; }
  .ev-stage-c .ev-cd-units b { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
  .ev-stage-c .ev-cd-big { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); }
  .ev-sc-when { display: grid; gap: 4px; min-width: 0; }
  .ev-stage-c .ev-stage-when { flex-wrap: nowrap; min-width: 0; }
  .ev-stage-c .ev-stage-when svg { flex: none; }
  .ev-sc-date { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: rgb(255 255 255 / .9) !important; }
  .ev-hbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px 6px 6px; border-radius: var(--r-pill); background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .14); color: #fff; cursor: pointer; text-align: start; transition: background var(--t-fast), border-color var(--t-fast); }
  .ev-hbtn:hover { background: rgb(255 255 255 / .13); }
  .ev-hbtn:focus-visible { outline: 2px solid #C2F45B; outline-offset: 2px; }
  .ev-hbtn .ev-health-ring { width: 42px; height: 42px; flex: none; }
  .ev-hbtn .ev-health-ring b { font-size: .95rem; letter-spacing: -0.02em; }
  .ev-hbtn-text { display: grid; line-height: 1.2; }
  .ev-hbtn-text b { font-size: var(--fs-small); color: #fff; }
  .ev-hbtn-text small { font-size: 11px; color: rgb(255 255 255 / .6); }
  .ev-hbtn.has-todo .ev-hbtn-text b { color: #C2F45B; }
  .ev-hbtn-chev { width: 16px; height: 16px; color: rgb(255 255 255 / .6); transition: rotate var(--t-fast); }
  .ev-hbtn[aria-expanded="true"] .ev-hbtn-chev { rotate: 180deg; }
  .ev-path.ev-path-slim { margin: 0; padding: 0; list-style: none; gap: 4px; }
  .ev-path-slim li { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ev-path-slim li { gap: 4px; font-size: 10.5px; }
  .ev-path-slim li span { height: 3px; }
  .ev-hdrawer { padding: 12px 14px; border-radius: var(--r-lg); background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .12); }
  .ev-hdrawer .ev-health-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 4px 18px; }
  .ev-hdrawer .ev-health-list li { min-height: 32px; font-size: 13px; }
  .ev-hdrawer .ev-health-list a, .ev-hdrawer .ev-health-list button { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
  .ev-hdrawer .ev-health-list a svg, .ev-hdrawer .ev-health-list button svg { width: 13px; height: 13px; color: rgb(255 255 255 / .6); }
  @media (max-width: 760px) {
    .ev-sc-row { grid-template-columns: minmax(0, 1fr) auto; }
    .ev-sc-when { grid-column: 1 / -1; grid-row: 2; }
    .ev-sc-lead { grid-row: 1; }
    .ev-hbtn { grid-row: 1; align-self: start; padding-inline-end: 8px; }
    .ev-hbtn-text small, .ev-hbtn-chev { display: none; }
    .ev-stage-c .ev-stage-when { flex-wrap: wrap; }
    .ev-sc-date { white-space: normal; }
    .ev-path-slim li:not(.is-now) { color: transparent; }
  }
  @media (prefers-reduced-motion: reduce) { .ev-hbtn-chev, .evn[data-stick] { transition: none; } }
}

/* css/components/events-engagement.css */
/* Weesify Events — EV7 organiser screens: Virtual rooms, Engagement, Networking & hub. Tokens only, logical CSS. */
@layer components {
  .eve-page { display: grid; gap: 16px; }
  .eve-h2 { margin: 0; font: 750 1.05rem/1.3 var(--font-display); color: var(--ink); display: flex; gap: 8px; align-items: center; }
  .eve-h3 { margin: 6px 0 0; font: 750 .95rem var(--font-display); color: var(--ink); }
  .eve-hero { position: relative; overflow: hidden; display: grid; gap: 18px; padding: 22px; border-radius: var(--r-xl); background: var(--grad-ink); color: #fff; }
  .eve-hero.is-violet { background: var(--grad-violet); }
  .eve-hero .kicker { color: var(--lime-300); }
  .eve-hero .page-title { color: #fff; }
  .eve-hero .page-desc { color: rgb(255 255 255 / .78); max-inline-size: 60ch; }
  .eve-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
  .eve-stats > div { padding: 12px 14px; border-radius: var(--r-md); background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .12); backdrop-filter: blur(8px); }
  .eve-stats > div.is-live { background: rgb(194 244 91 / .16); border-color: rgb(194 244 91 / .35); }
  .eve-stats dt { font-size: 12px; font-weight: 700; color: rgb(255 255 255 / .7); }
  .eve-stats dd { margin: 2px 0 0; font: 800 1.6rem/1.1 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .eve-stats dd small { font-size: .9rem; opacity: .6; font-weight: 600; }
  .eve-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
  .eve-toolbar code { font-size: 12px; padding: 2px 6px; border-radius: 6px; background: var(--surface-sunken); word-break: break-all; }
  .eve-toolbar .tabs { overflow-x: auto; max-inline-size: 100%; }

  .eve-hybrid-grid { display: grid; gap: 12px; margin-block: 12px 8px; }
  .eve-hy { padding: 14px; border-radius: var(--r-md); background: var(--surface-sunken); display: grid; gap: 4px; }
  .eve-hy.is-virtual { background: var(--assist-soft); }
  .eve-hy-label { margin: 0; font-weight: 750; display: flex; gap: 6px; align-items: center; color: var(--ink); }
  .eve-hy-big { margin: 0; font: 800 2rem/1 var(--font-display); letter-spacing: -0.04em; color: var(--ink); }
  .eve-meter { inline-size: 100%; block-size: 8px; appearance: none; border: 0; border-radius: 4px; background: var(--line); overflow: hidden; }
  .eve-meter::-webkit-progress-bar { background: var(--line); border-radius: 4px; }
  .eve-meter::-webkit-progress-value { background: var(--accent); border-radius: 4px; }
  .eve-meter::-moz-progress-bar { background: var(--accent); border-radius: 4px; }
  .eve-hy.is-virtual .eve-meter::-webkit-progress-value { background: var(--assist); }
  .eve-hy.is-virtual .eve-meter::-moz-progress-bar { background: var(--assist); }

  .eve-rooms { display: grid; gap: 12px; }
  .eve-room.is-live { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow: var(--e-glow); }
  .eve-room-ico { inline-size: 40px; block-size: 40px; border-radius: 13px; display: inline-grid; place-items: center; background: var(--assist-soft); color: var(--assist-text); flex: none; }
  .eve-room-ico.is-heat { background: var(--heat-soft); color: var(--heat); }
  .eve-room-ico.is-violet { background: var(--grad-violet); color: #fff; }
  .eve-room-name { margin: 0; font: 750 1.05rem var(--font-display); color: var(--ink); }
  .eve-mini { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; }
  .eve-mini.is-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eve-mini > div { padding: 8px 10px; border-radius: 10px; background: var(--surface-sunken); }
  .eve-mini dt { font-size: 11px; font-weight: 700; color: var(--text-muted); }
  .eve-mini dd { margin: 0; font: 800 1.05rem var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }

  .eve-editor { border-color: color-mix(in srgb, var(--assist) 40%, var(--line)); }
  .eve-form-grid { display: grid; gap: 12px; }
  .eve-form-grid > * { min-width: 0; }
  .eve-form-grid .input { inline-size: 100%; min-width: 0; }
  .eve-providers { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .eve-providers legend { margin-block-end: 6px; }
  .eve-provider { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-strong); cursor: pointer; font-weight: 700; font-size: 13.5px; }
  .eve-provider input { position: absolute; opacity: 0; }
  .eve-provider small { grid-column: 2; font-size: 11px; color: var(--accent-text); font-weight: 600; }
  .eve-provider.is-on { border-color: var(--ink); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--ink); }
  .eve-provider:has(input:focus-visible) { box-shadow: var(--focus-ring); }
  .eve-checks { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }

  .eve-rooms-filter { display: flex; gap: 6px; flex-wrap: wrap; }
  .eve-q-text { margin: 0; font-size: 15px; color: var(--ink); white-space: pre-line; }
  .eve-votes { display: grid; justify-items: center; inline-size: 48px; padding: 8px 0; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); flex: none; }
  .eve-votes b { font: 800 1rem var(--font-display); }
  .eve-answer { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--accent-soft); color: var(--accent-text); font-size: 14px; }
  .eve-chat { overflow: hidden; }
  .eve-chat-list { list-style: none; margin: 0; padding: 12px; display: grid; gap: 10px; max-block-size: 60vh; overflow-y: auto; }
  .eve-msg { display: flex; gap: 10px; align-items: flex-start; }
  .eve-msg.is-hidden { opacity: .55; }
  .eve-msg.is-pending .eve-msg-text { border-inline-start: 3px solid var(--warning); padding-inline-start: 8px; }
  .eve-msg-text { margin: 2px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
  .eve-av { inline-size: 30px; block-size: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, var(--violet-300), var(--emerald-300)); color: var(--forest-950); font: 800 12px var(--font-display); }
  .eve-av.is-team { background: var(--grad-forest); color: #fff; }
  .eve-chat-compose { display: flex; gap: 8px; padding: 10px 12px; border-block-start: 1px solid var(--line); background: var(--surface-sunken); }
  .eve-split { display: grid; gap: 16px; align-items: start; }
  .eve-poll.is-open { border-color: color-mix(in srgb, var(--assist) 45%, var(--line)); }
  .eve-poll-q { margin: 0; font: 750 1rem var(--font-display); color: var(--ink); }
  .eve-opt { display: grid; gap: 4px; }
  .eve-poll .eve-meter::-webkit-progress-value { background: var(--assist); }
  .eve-poll .eve-meter::-moz-progress-bar { background: var(--assist); }
  .eve-quote { margin: 0; padding: 10px 12px; border-inline-start: 3px solid var(--line-strong); background: var(--surface-sunken); border-radius: 0 10px 10px 0; white-space: pre-line; }
  .eve-toggle { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--r-md); background: var(--surface-sunken); cursor: pointer; }
  .eve-toggle.is-off { opacity: .8; }
  .eve-toggle input { position: absolute; opacity: 0; }
  .eve-toggle b { display: flex; gap: 6px; align-items: center; color: var(--ink); }
  .eve-toggle small { display: block; }
  .eve-toggle-ui { inline-size: 44px; block-size: 26px; border-radius: 13px; background: var(--line-strong); position: relative; flex: none; transition: background var(--t-base); }
  .eve-toggle-ui::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 20px; block-size: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .2); transition: inset-inline-start var(--t-base) var(--ease-spring); }
  .eve-toggle input:checked + .eve-toggle-ui { background: var(--accent); }
  .eve-toggle input:checked + .eve-toggle-ui::after { inset-inline-start: 21px; }
  .eve-toggle input:focus-visible + .eve-toggle-ui { box-shadow: var(--focus-ring); }
  .eve-optin { display: grid; gap: 6px; }
  .eve-report { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-block: 8px; border-block-start: 1px solid var(--line); }
  .eve-community-linked { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--r-md); background: var(--assist-soft); }

  @media (min-width: 720px) {
    .eve-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: end; padding: 28px; }
    .eve-hybrid-grid { grid-template-columns: 1fr 1fr; }
    .eve-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .eve-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .eve-providers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  @media (min-width: 1100px) {
    .eve-rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .eve-split { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); }
    .eve-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
}
@layer components {
  .eve-page, .eve-page > * { min-inline-size: 0; max-inline-size: 100%; }
  .eve-toolbar { inline-size: 100%; }
  .eve-toolbar .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .eve-page .segmented { max-inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
  .eve-rooms-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block-end: 2px; }
  .eve-rooms-filter .chip { flex: none; }
  .eve-q .card-body { flex-wrap: wrap; }
}
@layer components {
  .eve-page :where(.eve-h2, .eve-h3, .eve-hy-label, .eve-toolbar p, .eve-toggle b, .eve-answer, .eve-room-ico, .eve-votes, p.muted, p.text-sm) > svg,
  .eve-page :where(.eve-h2, .eve-hy-label, .eve-toolbar p, .eve-toggle b, p) svg { inline-size: 16px; block-size: 16px; flex: none; vertical-align: -3px; }
  .eve-page .eve-h2 svg { inline-size: 18px; block-size: 18px; color: var(--accent); }
  .eve-room-ico svg { inline-size: 20px !important; block-size: 20px !important; }
  .eve-page .checkbox-row { flex-wrap: nowrap; }
}

/* css/components/events-checkin.css */
/* EV4 — staff check-in app (events.checkin) and badge designer (events.badges). Mobile-first; logical properties. */
@layer components {
  .ci-app {
    --ci-bar: rgb(255 255 255 / .78);
    --ci-ok: #0BA673; --ci-ok-2: #067C55;
    --ci-warn: #E59A12; --ci-warn-2: #B86F00;
    --ci-bad: #E03A3A; --ci-bad-2: #A61E2B;
    min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; background: var(--canvas); color: var(--text);
    font-family: var(--font-sans);
  }
  :root[data-theme="dark"] .ci-app { --ci-bar: rgb(18 22 20 / .78); }

  .ci-app svg { width: 18px; height: 18px; flex: none; }
  .ci-icon-btn svg, .ci-round svg { width: 22px; height: 22px; }
  .ci-search svg { width: 20px; height: 20px; color: var(--text-muted); }
  .ci-alert > svg { width: 22px; height: 22px; margin-block-start: 2px; }
  .ci-pay-qr svg, .ci-flash svg { width: 100%; height: auto; }

  /* Top bar */
  .ci-top {
    position: sticky; inset-block-start: 0; z-index: 20; display: flex; align-items: center; gap: var(--s-3);
    padding: calc(env(safe-area-inset-top) + 10px) var(--s-4) 10px; background: var(--ci-bar);
    backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); border-block-end: 1px solid var(--line);
  }
  .ci-top-title { min-width: 0; flex: 1; display: grid; gap: 2px; }
  .ci-event { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; color: var(--ink); }
  .ci-station-chip {
    justify-self: start; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 10px 3px 8px; border-radius: var(--r-pill);
    background: var(--accent-soft); color: var(--accent-text); font-weight: 700; font-size: var(--fs-micro); border: 1px solid color-mix(in oklab, var(--accent) 22%, transparent);
  }
  .ci-station-chip svg { width: 14px; height: 14px; flex: none; }
  .ci-icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--text); background: var(--surface); border: 1px solid var(--line); flex: none; }
  .ci-icon-btn:hover { background: var(--surface-hover); }
  .ci-net { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--r-pill); font-size: var(--fs-micro); font-weight: 700; background: var(--surface); border: 1px solid var(--line); }
  .ci-net-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ci-ok); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ci-ok) 22%, transparent); }
  .ci-net[data-state="offline"] { background: var(--warning-soft); color: var(--warning); border-color: color-mix(in oklab, var(--warning) 30%, transparent); }
  .ci-net[data-state="offline"] .ci-net-dot { background: var(--ci-warn); animation: ci-blink 1.2s steps(2) infinite; }

  /* Panels */
  .ci-panel { padding: var(--s-4) var(--s-4) calc(var(--s-6) + 76px); width: 100%; max-width: 760px; margin-inline: auto; display: grid; gap: var(--s-4); align-content: start; }
  .ci-scan-body { display: grid; gap: var(--s-4); }

  .ci-viewfinder {
    position: relative; aspect-ratio: 1 / 1; max-height: 58dvh; width: 100%; margin-inline: auto; border-radius: var(--r-xl); overflow: hidden;
    background: radial-gradient(120% 90% at 50% 0%, #1B2420 0%, #0A0D0C 70%); box-shadow: var(--e3), inset 0 0 0 1px rgb(255 255 255 / .06);
  }
  .ci-viewfinder video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--t-slow) var(--ease-out); }
  .ci-viewfinder.is-live video { opacity: 1; }
  .ci-frame { position: absolute; inset: 16%; pointer-events: none; }
  .ci-frame i { position: absolute; width: 34px; height: 34px; border: 4px solid var(--emerald-400); filter: drop-shadow(0 0 10px rgb(37 214 149 / .55)); }
  .ci-frame i:nth-child(1) { inset-block-start: 0; inset-inline-start: 0; border-inline-end: 0; border-block-end: 0; border-start-start-radius: 14px; }
  .ci-frame i:nth-child(2) { inset-block-start: 0; inset-inline-end: 0; border-inline-start: 0; border-block-end: 0; border-start-end-radius: 14px; }
  .ci-frame i:nth-child(3) { inset-block-end: 0; inset-inline-start: 0; border-inline-end: 0; border-block-start: 0; border-end-start-radius: 14px; }
  .ci-frame i:nth-child(4) { inset-block-end: 0; inset-inline-end: 0; border-inline-start: 0; border-block-start: 0; border-end-end-radius: 14px; }
  .ci-laser { position: absolute; inset-inline: 6%; height: 2px; inset-block-start: 50%; background: linear-gradient(90deg, transparent, var(--emerald-300), transparent); box-shadow: 0 0 14px 2px rgb(37 214 149 / .6); animation: ci-sweep 2.2s var(--ease-out) infinite alternate; }
  .ci-cam-msg { position: absolute; inset-inline: 12px; inset-block-end: 70px; padding: 10px 12px; border-radius: 12px; background: rgb(0 0 0 / .6); color: #fff; font-size: var(--fs-small); text-align: center; backdrop-filter: blur(8px); }
  .ci-cam-actions { position: absolute; inset-block-end: 14px; inset-inline-end: 14px; display: flex; gap: 8px; }
  .ci-round { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgb(255 255 255 / .14); border: 1px solid rgb(255 255 255 / .22); backdrop-filter: blur(10px); }
  .ci-viewfinder.is-live [data-ci-start] { display: none; }

  .ci-manual { display: flex; gap: var(--s-2); }
  .ci-manual .input { flex: 1; min-width: 0; font-family: var(--font-mono); letter-spacing: .04em; height: 48px; }
  .ci-manual .btn { height: 48px; }
  .ci-direction { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--surface-sunken); border: 1px solid var(--line); }
  .ci-direction label { position: relative; }
  .ci-direction input { position: absolute; opacity: 0; inset: 0; }
  .ci-direction span { display: flex; justify-content: center; align-items: center; gap: 6px; height: 40px; border-radius: 10px; font-weight: 700; font-size: var(--fs-small); color: var(--text-muted); }
  .ci-direction input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--e1); }
  .ci-direction input:focus-visible + span { box-shadow: var(--focus-ring); }

  .ci-recent-head { display: flex; align-items: baseline; justify-content: space-between; }
  .ci-recent-head h2 { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .12em; color: var(--text-muted); font-weight: 800; }
  .ci-queue { font-size: var(--fs-micro); font-weight: 700; color: var(--text-muted); }
  .ci-queue[data-pending="1"] { color: var(--warning); }
  .ci-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
  .ci-recent li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
  .ci-recent-empty { color: var(--text-muted); font-size: var(--fs-small); display: block !important; text-align: center; }
  .ci-recent-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ci-ok); }
  .ci-recent li[data-tone="warn"] .ci-recent-dot { background: var(--ci-warn); }
  .ci-recent li[data-tone="bad"] .ci-recent-dot { background: var(--ci-bad); }
  .ci-recent-main { min-width: 0; display: grid; }
  .ci-recent-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ci-recent-main small, .ci-recent time { color: var(--text-muted); font-size: var(--fs-micro); }

  /* Lookup */
  .ci-search { position: sticky; inset-block-start: 74px; z-index: 5; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--e2); }
  .ci-search .input { border: 0; box-shadow: none; background: transparent; height: 52px; font-size: 1rem; padding-inline: 0; }
  .ci-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .ci-person { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); }
  .ci-person .avatar { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; background: var(--accent-soft); color: var(--accent-text); }
  .ci-person-main { min-width: 0; display: grid; gap: 2px; }
  .ci-person-meta { color: var(--text-muted); font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ci-person-tags { display: flex; gap: 6px; margin-block-start: 2px; }
  .ci-person-actions { grid-column: 1 / -1; display: flex; gap: 6px; justify-content: flex-end; }
  @media (min-width: 560px) { .ci-person { grid-template-columns: auto 1fr auto; } .ci-person-actions { grid-column: auto; } }

  /* Walk-in */
  .ci-walkin, .ci-pay { display: grid; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-xl); }
  .ci-walkin-head h2, .ci-pay h2 { font-family: var(--font-display); font-size: var(--fs-h2); letter-spacing: -.02em; color: var(--ink); }
  .ci-types { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
  .ci-type { position: relative; display: block; }
  .ci-type input { position: absolute; opacity: 0; }
  .ci-type span { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--line-strong); background: var(--surface); }
  .ci-type em { font-style: normal; font-weight: 800; color: var(--text-muted); }
  .ci-type input:checked + span { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent); }
  .ci-type input:checked + span em { color: var(--accent-text); }
  .ci-type input:focus-visible + span { box-shadow: var(--focus-ring); }
  .ci-grid2 { display: grid; grid-template-columns: 1fr 96px; gap: var(--s-3); }
  .ci-check { display: flex; align-items: center; gap: 10px; font-weight: 600; min-height: 36px; }
  .ci-check input { width: 18px; height: 18px; accent-color: var(--accent); }
  .ci-note { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--success-soft); color: var(--success); font-weight: 700; }
  .ci-fine { color: var(--text-muted); font-size: var(--fs-micro); text-align: center; }
  .ci-pay { position: relative; overflow: hidden; text-align: center; justify-items: center; }
  .ci-pay-qr { width: min(260px, 70vw); padding: 14px; background: #fff; border-radius: 22px; box-shadow: var(--e2); }
  .ci-pay-qr svg { width: 100%; height: auto; display: block; }
  .ci-pay-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
  .ci-pulse { position: absolute; inset: auto 0 0; height: 3px; background: var(--grad-aurora); background-size: 200% 100%; animation: ci-flow 1.6s linear infinite; }

  /* Live */
  .ci-alert { display: flex; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--warning-soft); color: var(--warning); border: 1px solid color-mix(in oklab, var(--warning) 25%, transparent); }
  .ci-alert[data-tone="bad"] { background: var(--danger-soft); color: var(--danger); border-color: color-mix(in oklab, var(--danger) 25%, transparent); }
  .ci-alert p { color: var(--text); font-size: var(--fs-small); margin: 2px 0 0; }
  .ci-hero { display: grid; grid-template-columns: auto 1fr; gap: var(--s-5); align-items: center; padding: var(--s-5); border-radius: var(--r-xl); background: var(--grad-forest); color: #fff; border: 0; }
  .ci-ring { --p: 0; width: 132px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
    background: conic-gradient(var(--lime-400) calc(var(--p) * 1%), rgb(255 255 255 / .14) 0); position: relative; }
  .ci-ring::before { content: ""; position: absolute; inset: 12px; border-radius: 50%; background: #082519; }
  .ci-ring span { position: relative; display: grid; text-align: center; }
  .ci-ring strong, .ci-ring small, .ci-kpis dd, .ci-kpis dt { color: #fff; }
  .ci-ring strong { font-family: var(--font-display); font-size: 2rem; line-height: 1; letter-spacing: -.03em; }
  .ci-ring small { opacity: .7; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
  .ci-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin: 0; }
  .ci-kpis dt { font-size: var(--fs-micro); opacity: .7; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
  .ci-kpis dd { margin: 0; font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
  .ci-kpis dd small { font-size: .9rem; opacity: .6; margin-inline-start: 4px; font-weight: 600; }
  .ci-kpis dd.is-bad { color: #FFB3A6; }
  @media (max-width: 420px) { .ci-hero { grid-template-columns: 1fr; justify-items: center; } .ci-kpis { width: 100%; } }
  .ci-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-block-end: var(--s-3); }
  .ci-card-head h3 { font-size: var(--fs-h3); font-weight: 800; color: var(--ink); }
  .ci-curve-card, .ci-two > .card { padding: var(--s-4); border-radius: var(--r-lg); }
  .ci-curve { height: 96px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 5px; align-items: end; }
  .ci-curve span { height: max(4px, var(--h)); border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--emerald-400), var(--emerald-600)); }
  .ci-two { display: grid; gap: var(--s-4); }
  @media (min-width: 640px) { .ci-two { grid-template-columns: 1fr 1fr; } }
  .ci-bars, .ci-stations-live { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
  .ci-bars li { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; font-size: var(--fs-small); }
  .ci-bars i { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--accent) var(--w), var(--surface-sunken) var(--w)); }
  .ci-stations-live li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: var(--fs-small); }
  .ci-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--moss-300); }
  .ci-dot[data-on="1"] { background: var(--ci-ok); box-shadow: 0 0 0 3px color-mix(in oklab, var(--ci-ok) 20%, transparent); }

  /* Bottom tabs */
  .ci-tabs {
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 30; display: grid; grid-template-columns: repeat(4, 1fr);
    padding: 6px max(8px, env(safe-area-inset-left), calc((100% - 760px) / 2)) calc(6px + env(safe-area-inset-bottom)); background: var(--ci-bar);
    backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px); border-block-start: 1px solid var(--line);
  }
  .ci-tabs button { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 14px; color: var(--text-muted); font-size: 11px; font-weight: 700; }
  .ci-tabs button svg { width: 22px; height: 22px; }
  .ci-station-icon svg { width: 20px; height: 20px; }
  .ci-tabs button.is-on { color: var(--accent-text); background: var(--accent-soft); }
  .ci-tab-dot { position: absolute; inset-block-start: 6px; inset-inline-end: calc(50% - 18px); width: 8px; height: 8px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 0 2px var(--surface); }

  /* Station sheet */
  .ci-sheet-wrap { position: fixed; inset: 0; z-index: 40; display: grid; align-items: end; background: var(--overlay); backdrop-filter: blur(4px); }
  .ci-sheet { width: 100%; max-width: 560px; margin-inline: auto; max-height: 88dvh; overflow: auto; display: grid; gap: var(--s-4); padding: var(--s-5) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom));
    background: var(--surface); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: var(--e3); animation: ci-up var(--t-base) var(--ease-out); }
  @media (min-width: 640px) { .ci-sheet-wrap { align-items: center; } .ci-sheet { border-radius: var(--r-xl); } }
  .ci-sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
  .ci-sheet-head h2 { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--ink); letter-spacing: -.02em; }
  .ci-station-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .ci-station-list li { display: flex; gap: 8px; align-items: center; }
  .ci-station { flex: 1; min-width: 0; display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; text-align: start; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface-2); }
  .ci-station:hover { border-color: var(--line-strong); background: var(--surface-hover); }
  .ci-station-list li.is-on .ci-station { border-color: var(--accent); background: var(--accent-soft); }
  .ci-station-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ink); color: var(--text-on-ink); }
  .ci-station-text { min-width: 0; display: grid; }
  .ci-station-text small { color: var(--text-muted); }
  .ci-station-form { display: grid; gap: var(--s-3); }
  .ci-fieldset { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; margin: 0; display: grid; gap: 2px; }
  .ci-sheet-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }

  /* Full-screen feedback */
  .ci-flash { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 24px; text-align: center; color: #fff; outline: none;
    background: radial-gradient(120% 80% at 50% 0%, rgb(255 255 255 / .18), transparent 60%), linear-gradient(170deg, var(--ci-ok), var(--ci-ok-2)); animation: ci-pop var(--t-fast) var(--ease-spring); }
  .ci-flash[data-tone="warn"] { background: radial-gradient(120% 80% at 50% 0%, rgb(255 255 255 / .2), transparent 60%), linear-gradient(170deg, var(--ci-warn), var(--ci-warn-2)); }
  .ci-flash[data-tone="bad"] { background: repeating-linear-gradient(135deg, rgb(0 0 0 / .06) 0 14px, transparent 14px 28px), linear-gradient(170deg, var(--ci-bad), var(--ci-bad-2)); }
  .ci-flash[data-vip="1"] .ci-flash-icon { box-shadow: 0 0 0 6px #F4C95D, 0 0 40px 10px rgb(244 201 93 / .6); }
  .ci-flash-inner { display: grid; justify-items: center; gap: 10px; max-width: 520px; }
  .ci-flash-icon { width: 112px; height: 112px; border-radius: 50%; background: rgb(255 255 255 / .2); border: 3px solid rgb(255 255 255 / .9); position: relative; margin-block-end: 8px; }
  .ci-flash-icon::before, .ci-flash-icon::after { content: ""; position: absolute; background: #fff; border-radius: 4px; }
  .ci-flash[data-tone="ok"] .ci-flash-icon::before { width: 22px; height: 8px; inset-inline-start: 28px; inset-block-start: 56px; transform: rotate(45deg); }
  .ci-flash[data-tone="ok"] .ci-flash-icon::after { width: 50px; height: 8px; inset-inline-start: 38px; inset-block-start: 48px; transform: rotate(-50deg); }
  .ci-flash[data-tone="bad"] .ci-flash-icon::before, .ci-flash[data-tone="bad"] .ci-flash-icon::after { width: 56px; height: 8px; inset-inline-start: 25px; inset-block-start: 49px; transform: rotate(45deg); }
  .ci-flash[data-tone="bad"] .ci-flash-icon::after { transform: rotate(-45deg); }
  .ci-flash[data-tone="warn"] .ci-flash-icon::before { width: 9px; height: 42px; inset-inline-start: 48px; inset-block-start: 22px; }
  .ci-flash[data-tone="warn"] .ci-flash-icon::after { width: 10px; height: 10px; border-radius: 50%; inset-inline-start: 48px; inset-block-start: 74px; }
  .ci-flash-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 9vw, 3.4rem); line-height: 1; letter-spacing: -.03em; margin: 0; }
  .ci-flash-name { font-size: clamp(1.4rem, 6vw, 2.1rem); font-weight: 800; margin: 6px 0 0; }
  .ci-flash-type { font-weight: 700; opacity: .9; margin: 0; text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-small); }
  .ci-flash-detail { opacity: .92; max-width: 34ch; margin: 6px 0 0; font-size: 1rem; }
  .ci-flash-actions .btn { background: #fff; color: #0B0F0D; border: 0; }
  .ci-flash-tap { margin-block-start: 18px; opacity: .65; font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .14em; font-weight: 700; }

  @keyframes ci-sweep { from { transform: translateY(-140%); } to { transform: translateY(140%); } }
  @keyframes ci-blink { 50% { opacity: .2; } }
  @keyframes ci-pop { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
  @keyframes ci-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes ci-flow { to { background-position: -200% 0; } }
  @media (prefers-reduced-motion: reduce) { .ci-laser, .ci-pulse, .ci-net-dot { animation: none !important; } .ci-flash, .ci-sheet { animation: none; } }
  :root[data-motion="reduce"] .ci-laser { animation: none; }

  /* Badge designer (events.badges) */
  .bd-layout { display: grid; gap: var(--s-5); }
  @media (min-width: 1040px) { .bd-layout { grid-template-columns: minmax(320px, 400px) 1fr; align-items: start; } .bd-stage { position: sticky; inset-block-start: 88px; } }
  .bd-templates { display: flex; gap: 8px; flex-wrap: wrap; }
  .bd-templates button { padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); font-weight: 700; font-size: var(--fs-small); display: inline-flex; gap: 6px; align-items: center; }
  .bd-templates button { white-space: nowrap; }
  .bd-templates svg { width: 16px; height: 16px; }
  .bd-templates button.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
  .bd-panel { display: grid; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-xl); }
  .bd-toggles { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; }
  .bd-seg { display: inline-grid; grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: 12px; background: var(--surface-sunken); border: 1px solid var(--line); }
  .bd-seg label { position: relative; }
  .bd-seg input { position: absolute; opacity: 0; }
  .bd-seg span { display: block; padding: 6px 12px; border-radius: 9px; font-weight: 700; font-size: var(--fs-small); color: var(--text-muted); }
  .bd-seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--e1); }
  .bd-seg input:focus-visible + span { box-shadow: var(--focus-ring); }
  .bd-stage { display: grid; gap: var(--s-4); }
  .bd-canvas { display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); border-radius: var(--r-xl); background: var(--grad-mesh), var(--surface-sunken); border: 1px solid var(--line); min-height: 420px; }
  .bd-sheet { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
  .bdg { --acc: #0BC284; --ink-on: #04140D; position: relative; width: 260px; aspect-ratio: var(--ratio, 105 / 148); background: #fff; color: #0B0F0D; border-radius: 10px; overflow: hidden;
    box-shadow: 0 30px 60px -24px rgb(20 28 22 / .45), 0 0 0 1px rgb(20 28 22 / .06); display: flex; flex-direction: column; font-family: var(--font-sans); }
  .bdg[data-size="4x3"], .bdg[data-size="cr80"] { width: 320px; }
  .bdg-band { background: var(--acc); color: var(--ink-on); padding: 12px 16px; display: grid; gap: 2px; }
  .bdg-band b { font-family: var(--font-display); font-size: 14px; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .bdg-band small { font-size: 10px; opacity: .85; }
  .bdg[data-band="side"] { flex-direction: row; }
  .bdg[data-band="side"]::before { content: ""; width: 6%; background: var(--acc); flex: none; }
  .bdg-body { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 12px; min-width: 0; }
  .bdg[data-align="center"] .bdg-body { align-items: center; text-align: center; }
  .bdg-name { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.02; letter-spacing: -.02em; margin-block-start: 6px; overflow-wrap: anywhere; }
  .bdg[data-scale="huge"] .bdg-name { font-size: 32px; }
  .bdg-job { color: #5E6862; font-size: 12px; }
  .bdg-co { font-weight: 800; font-size: 13px; }
  .bdg-pill { align-self: flex-start; margin-block-start: 6px; padding: 3px 10px; border-radius: 4px; background: var(--acc); color: var(--ink-on); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
  .bdg[data-align="center"] .bdg-pill { align-self: center; }
  .bdg-qr { margin-block-start: auto; width: 42%; aspect-ratio: 1; }
  .bdg-qr svg { width: 100%; height: 100%; display: block; }
  .bdg-row { display: flex; gap: 8px; align-items: flex-end; margin-block-start: auto; width: 100%; }
  .bdg[data-size="4x3"] .bdg-qr, .bdg[data-size="cr80"] .bdg-qr { position: absolute; inset-inline-end: 12px; inset-block-end: 12px; width: 30%; }
  .bdg-sponsors { display: flex; gap: 8px; justify-content: center; align-items: center; border-block-start: 1px solid #E3E7E2; padding-block-start: 8px; width: 100%; margin-block-start: 8px; }
  .bdg-sponsors span { font-size: 9px; font-weight: 800; color: #5E6862; text-transform: uppercase; letter-spacing: .06em; }
  .bdg-sponsors img { max-height: 18px; max-width: 60px; object-fit: contain; }
  .bdg-sessions { font-size: 10px; color: #5E6862; list-style: none; margin: 4px 0 0; padding: 0; }
  .bdg-foot { font-size: 9px; color: #5E6862; text-align: center; }
  .bd-print { display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-xl); }
  .bd-print-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: end; }
  .bd-print-row .field { min-width: 150px; flex: 1; }
}

/* css/components/events-programme.css */
/* EV5 · Events agenda builder (.eva) and speakers (.evs) — app screens. Tokens only; logical properties (RTL). */
@layer components {
  /* KPI strip */
  .eva-kpis { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-end: 18px; }
  @media (min-width: 900px) { .eva-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .eva-kpi { display: grid; gap: 2px; padding: 16px 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1); }
  .eva-kpi span { font-size: var(--fs-small); color: var(--text-muted); font-weight: 600; }
  .eva-kpi b { font-family: var(--font-display); font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; }
  .eva-kpi small { font-size: var(--fs-micro); color: var(--text-subtle); }
  .eva-kpi small a { color: var(--accent-text); font-weight: 700; }
  .eva-kpi.is-ink { background: var(--grad-ink, var(--ink)); border-color: transparent; }
  .eva-kpi.is-ink span, .eva-kpi.is-ink small { color: color-mix(in oklab, var(--text-on-ink) 72%, transparent); }
  .eva-kpi.is-ink b { color: var(--text-on-ink); }
  .eva-kpi.is-alert { border-color: color-mix(in oklab, var(--danger) 45%, var(--line)); background: var(--danger-soft); }
  .eva-kpi.is-alert b { color: var(--danger); }
  .eva-kpi.is-ok b { color: var(--accent-text); }

  /* Toolbar & days */
  .eva-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-block-end: 14px; }
  .eva-toolbar-end { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-inline-start: auto; }
  .eva-days { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .eva-days::-webkit-scrollbar { display: none; }
  .eva-day { flex: none; display: grid; text-align: start; padding: 8px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text-muted); transition: background var(--t-fast, .14s); }
  .eva-day small { font-size: var(--fs-micro); font-weight: 600; }
  .eva-day b { font-size: 14px; color: var(--ink); }
  .eva-day:hover { background: var(--surface-hover); }
  .eva-day.is-active { background: var(--ink); border-color: var(--ink); color: color-mix(in oklab, var(--text-on-ink) 70%, transparent); }
  .eva-day.is-active b { color: var(--text-on-ink); }
  .eva-dayline { margin: 0; font-size: 15px; }
  .eva-select .select { min-width: 200px; }

  /* Layout */
  .eva-layout { display: grid; gap: 16px; }
  @media (min-width: 1440px) { .eva-layout { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
  @media (min-width: 900px) and (max-width: 1439px) { .eva-side { grid-template-columns: 1fr 1fr; align-items: start; } }
  .eva-board { min-width: 0; display: grid; gap: 14px; transition: opacity var(--t-fast, .14s); }
  .eva-board.is-busy { opacity: .6; }
  .eva-side { display: grid; gap: 14px; }
  @media (min-width: 1440px) { .eva-side { position: sticky; inset-block-start: calc(var(--topbar-h, 64px) + 12px); } }

  /* Timeline grid */
  .eva-grid { --hours-w: 56px; position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--e1); overflow: auto; max-height: 78vh; }
  .eva-grid-head { position: sticky; inset-block-start: 0; z-index: 3; display: grid; grid-template-columns: var(--hours-w) repeat(var(--lanes), minmax(170px, 1fr)); background: color-mix(in oklab, var(--surface) 92%, transparent);
    backdrop-filter: blur(8px); border-block-end: 1px solid var(--line); min-width: calc(var(--hours-w) + var(--lanes) * 170px); }
  .eva-lane-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px; border-inline-start: 1px solid var(--line); min-width: 0; }
  .eva-lane-head b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .eva-lane-head small { color: var(--text-subtle); font-size: var(--fs-micro); white-space: nowrap; }
  .eva-lane-head i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
  .eva-grid-body { position: relative; display: grid; grid-template-columns: var(--hours-w) repeat(var(--lanes), minmax(170px, 1fr)); min-width: calc(var(--hours-w) + var(--lanes) * 170px); }
  .eva-hours { position: relative; }
  .eva-hours span { position: absolute; inset-inline-end: 8px; transform: translateY(-7px); font-size: 11px; font-weight: 700; color: var(--text-subtle); font-variant-numeric: tabular-nums; }
  .eva-hours span:first-child { transform: translateY(4px); }
  .eva-lane { position: relative; border-inline-start: 1px solid var(--line); cursor: copy;
    background-image: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px calc(var(--ppm) * 60)),
      repeating-linear-gradient(to bottom, color-mix(in oklab, var(--line) 45%, transparent) 0 1px, transparent 1px calc(var(--ppm) * 30)); }
  .eva-lane:hover { background-color: color-mix(in oklab, var(--surface-hover) 50%, transparent); }
  .eva-item { position: absolute; z-index: 1; margin-inline-start: 2px; border-radius: 12px; background: color-mix(in oklab, var(--track) 14%, var(--surface)); border: 1px solid color-mix(in oklab, var(--track) 40%, var(--line));
    box-shadow: 0 1px 2px rgb(0 0 0 / .06); overflow: hidden; cursor: grab; transition: box-shadow var(--t-fast, .14s), transform var(--t-fast, .14s); }
  .eva-item::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 4px; background: var(--track); }
  .eva-item:hover { box-shadow: var(--e2); z-index: 2; transform: translateY(-1px); }
  .eva-item:active { cursor: grabbing; }
  .eva-item.is-draft { background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--track) 8%, var(--surface)) 0 8px, var(--surface) 8px 16px); border-style: dashed; }
  .eva-item.is-cancelled { opacity: .55; }
  .eva-item.is-cancelled .eva-item-title { text-decoration: line-through; }
  .eva-item.is-break, .eva-item.is-meal { --track: var(--line-strong); background: var(--surface-sunken); }
  .eva-item.is-conflict { border-color: var(--danger); box-shadow: 0 0 0 2px color-mix(in oklab, var(--danger) 30%, transparent); }
  .eva-item-btn { display: grid; align-content: start; gap: 2px; width: 100%; height: 100%; padding: 6px 8px 6px 12px; text-align: start; background: none; border: 0; color: inherit; font: inherit; cursor: inherit; }
  .eva-item-time { font-size: 11px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .eva-item-title { font-size: 13px; line-height: 1.25; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .eva-item-people { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .eva-item-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; font-weight: 700; color: var(--text-muted); }
  .eva-item-meta span { display: inline-flex; align-items: center; gap: 3px; }
  .eva-item-meta svg { width: 12px; height: 12px; }
  .eva-flag { color: var(--danger); }
  .eva-item.is-short .eva-item-btn { grid-auto-flow: column; justify-content: start; align-items: center; gap: 6px; padding-block: 2px; }
  .eva-item.is-short .eva-item-people, .eva-item.is-short .eva-item-meta { display: none; }
  .eva-item.is-short .eva-item-title { -webkit-line-clamp: 1; font-size: 12px; }
  .eva-item.is-compact .eva-item-people { display: none; }
  .eva-item.is-compact .eva-item-title { -webkit-line-clamp: 1; }
  .eva-hint { position: sticky; inset-inline-start: 0; display: flex; align-items: center; gap: 6px; margin: 0; padding: 10px 14px; font-size: var(--fs-micro); color: var(--text-subtle); border-block-start: 1px solid var(--line); }

  /* List view */
  .eva-list .rows { margin: 0; padding: 0; list-style: none; }
  .eva-row { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px 14px; align-items: center; padding: 14px 16px 14px 20px; border-block-start: 1px solid var(--line); }
  .eva-row:first-child { border-block-start: 0; }
  .eva-row::before { content: ""; position: absolute; inset-block: 10px; inset-inline-start: 8px; width: 4px; border-radius: 4px; background: var(--track); }
  .eva-row.is-conflict { background: color-mix(in oklab, var(--danger-soft) 60%, transparent); }
  .eva-row-time b { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .eva-row-time small { color: var(--text-subtle); font-size: var(--fs-micro); }
  .eva-row-main { display: grid; gap: 2px; text-align: start; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; min-width: 0; }
  .eva-row-main b { font-size: 14.5px; }
  .eva-row-end { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  @media (min-width: 760px) { .eva-row { grid-template-columns: 72px minmax(0, 1fr) auto; } .eva-row-end { grid-column: auto; } }
  @media (min-width: 760px) { .is-hidden-desktop { display: none !important; } }
  @media (max-width: 759px) { .eva-grid { display: none; } .eva-viewtoggle { display: none; } }

  /* Side cards */
  .eva-conflicts.has-conflicts { border-color: color-mix(in oklab, var(--danger) 40%, var(--line)); }
  .eva-conflict { display: flex; gap: 10px; padding-block: 10px; border-block-start: 1px solid var(--line); }
  .eva-conflict:first-child { border-block-start: 0; padding-block-start: 0; }
  .eva-conflict b { font-size: 13.5px; }
  .eva-conflict p { margin: 2px 0 0; }
  .eva-conflict-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--danger-soft); color: var(--danger); flex: none; }
  .eva-allclear { display: flex; gap: 8px; align-items: center; margin: 0; color: var(--accent-text); font-weight: 600; font-size: 13.5px; }
  .eva-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; }
  .eva-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
  .eva-legend i, .eva-swatch { width: 12px; height: 12px; border-radius: 50%; flex: none; display: inline-block; }
  .eva-swatches { display: flex; gap: 8px; }
  .eva-swatch-pick { position: relative; }
  .eva-swatch-pick input { position: absolute; opacity: 0; inset: 0; }
  .eva-swatch-pick span:not(.sr-only) { display: block; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
  .eva-swatch-pick input:checked + span { box-shadow: 0 0 0 2px var(--ink); }
  .eva-swatch-pick input:focus-visible + span { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }
  .eva-inline-form { padding-block-start: 12px; border-block-start: 1px dashed var(--line); }
  .eva-copy-list { display: grid; gap: 6px; max-height: 260px; overflow: auto; padding: 8px; border-radius: 12px; background: var(--surface-sunken); }

  /* Editor */
  .eva-kinds, .eva-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .eva-kind, .eva-chip { position: relative; }
  .eva-kind input, .eva-chip input { position: absolute; opacity: 0; inset: 0; }
  .eva-kind span, .eva-chip span { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
  .eva-kind input:checked + span, .eva-chip input:checked + span { background: var(--ink); color: var(--text-on-ink); border-color: var(--ink); }
  .eva-kind input:focus-visible + span, .eva-chip input:focus-visible + span { outline: 2px solid var(--focus-ring, var(--accent)); outline-offset: 2px; }
  .eva-when { display: grid; gap: 12px; grid-template-columns: 1fr; }
  @media (min-width: 560px) { .eva-when { grid-template-columns: 1.4fr 1fr 1fr; } }
  .eva-fieldset { display: grid; gap: 12px; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2, var(--surface)); }
  .eva-fieldset legend { padding-inline: 6px; font-weight: 700; font-size: 13px; }
  .eva-speaker-pick { display: grid; gap: 4px; max-height: 220px; overflow: auto; padding: 6px; border-radius: 12px; border: 1px solid var(--line); }
  .eva-speaker-opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px; border-radius: 8px; }
  .eva-speaker-opt:hover { background: var(--surface-hover); }
  .eva-speaker-opt small { display: block; }
  .eva-speaker-opt .select { width: auto; min-width: 120px; }
  .eva-people-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  @media (min-width: 560px) { .eva-people-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .eva-people-kpis span { padding: 10px 12px; border-radius: 12px; background: var(--surface-sunken); font-size: var(--fs-small); color: var(--text-muted); }
  .eva-people-kpis b { display: block; font-family: var(--font-display); font-size: 22px; color: var(--ink); }

  /* Speakers: pipeline board */
  .evs-toolbar { display: flex; gap: 10px; margin-block-end: 14px; }
  .evs-toolbar .input-icon { max-width: 360px; flex: 1; }
  .evs-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: 12px; overflow-x: auto; padding-block-end: 8px; scroll-snap-type: x proximity; }
  .evs-col { display: grid; align-content: start; gap: 10px; min-width: 0; padding: 12px; border-radius: 22px; background: var(--surface-sunken); border: 1px solid var(--line); scroll-snap-align: start; }
  .evs-col-head { display: flex; align-items: center; gap: 8px; padding-inline: 4px; }
  .evs-col-head h2 { margin: 0; font-size: 13.5px; font-weight: 800; }
  .evs-count { margin-inline-start: auto; font-size: 12px; font-weight: 700; color: var(--text-muted); padding: 1px 8px; border-radius: 999px; background: var(--surface); }
  .evs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
  .evs-col.is-invited .evs-dot { background: var(--info); }
  .evs-col.is-confirmed .evs-dot { background: var(--warning); }
  .evs-col.is-published .evs-dot { background: var(--emerald-500); }
  .evs-col.is-declined .evs-dot { background: var(--danger); }
  .evs-col-body { display: grid; gap: 8px; }
  .evs-col-empty { margin: 0; padding: 14px; text-align: center; font-size: var(--fs-small); color: var(--text-subtle); border: 1.5px dashed var(--line); border-radius: 14px; }
  .evs-card { display: grid; gap: 10px; padding: 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1); transition: box-shadow var(--t-fast, .14s), transform var(--t-fast, .14s); }
  .evs-card:hover { box-shadow: var(--e2); transform: translateY(-1px); }
  .evs-card-main { display: flex; gap: 10px; align-items: center; text-align: start; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; min-width: 0; }
  .evs-card-text { display: grid; min-width: 0; }
  .evs-card-text b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .evs-card-text small { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .evs-card-foot { display: flex; align-items: center; gap: 8px; }
  .evs-meter { flex: 1; height: 5px; border-radius: 999px; background: var(--surface-sunken); overflow: hidden; }
  .evs-meter span { display: block; height: 100%; border-radius: inherit; background: var(--grad-violet, var(--violet-500)); }
  .evs-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 14px; overflow: hidden; background: var(--grad-violet, var(--violet-500)); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 15px; }
  .evs-avatar img { width: 100%; height: 100%; object-fit: cover; }
  .evs-avatar.is-lg { width: 88px; height: 88px; border-radius: 26px; font-size: 28px; }

  /* Speaker editor */
  .evs-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .evs-steps { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; flex: 1; }
  .evs-steps li { flex: 1; padding-block-start: 8px; border-block-start: 3px solid var(--line); font-size: var(--fs-micro); font-weight: 700; color: var(--text-subtle); }
  .evs-steps li.is-done { border-color: var(--emerald-500); color: var(--text-muted); }
  .evs-steps li.is-current { border-color: var(--violet-500); color: var(--ink); }
  .evs-profile { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
  .evs-photo { display: grid; justify-items: center; gap: 8px; }
  .evs-more { border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
  .evs-more summary { cursor: pointer; font-weight: 700; font-size: 13.5px; }
  .evs-panels { display: grid; gap: 12px; }
  @media (min-width: 640px) { .evs-panels { grid-template-columns: 1fr 1fr; } .evs-panel.is-wide { grid-column: 1 / -1; } }
  .evs-panel { display: grid; align-content: start; gap: 8px; padding: 14px; border-radius: 16px; background: var(--surface-sunken); }
  .evs-panel h3 { margin: 0; font-size: 13.5px; font-weight: 800; }
  .evs-check { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--text-muted); }
  .evs-check li { display: flex; align-items: center; gap: 6px; }
  .evs-check li.is-done { color: var(--ink); }
  .evs-check li.is-done svg { color: var(--emerald-600); }
  .evs-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 6px 0 0; font-size: 12.5px; }
  .evs-dl dt { font-weight: 700; color: var(--text-muted); }
  .evs-dl dd { margin: 0; }
  .evs-line { display: grid; margin: 0; font-size: 13px; }
  .evs-linkbox { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 4px 4px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
  .evs-linkbox code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }

  /* Call for speakers */
  .evs-cfp { display: grid; gap: 16px; }
  @media (min-width: 1100px) { .evs-cfp { grid-template-columns: 380px minmax(0, 1fr); align-items: start; } }
  /* [R3B] The long form link (nowrap <code>) set the settings card's min-content width, pushing the form (and the
     "Accept proposals" switch) out over the Proposals panel. Let every level shrink; the link ellipsises. */
  .evs-cfp > *, .evs-cfp-settings .card-body > * { min-width: 0; }
  .evs-cfp-settings .evs-linkbox { flex: 1 1 220px; max-inline-size: 100%; }
  .evs-subs .rows { margin: 0; padding: 0; list-style: none; }
  /* [R3B] The proposals filter wraps under the title on phones instead of pushing past the card. */
  .evs-subs .card-header { flex-wrap: wrap; gap: 8px; }
  .evs-subs .card-header .segmented { max-inline-size: 100%; overflow-x: auto; scrollbar-width: none; }
  .evs-subs .card-header .segmented > * { flex: none; }
  .evs-sub { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-block-start: 1px solid var(--line); }
  .evs-sub-main { flex: 1; display: grid; gap: 2px; text-align: start; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; min-width: 0; }
  .evs-stars { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: 13px; white-space: nowrap; }
  .evs-stars svg { color: var(--warning); }
  .evs-proposal { display: grid; gap: 12px; }
  .evs-proposal-head { display: flex; align-items: center; gap: 12px; }
  .evs-proposal-head > div { flex: 1; display: grid; min-width: 0; }
  .evs-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .evs-abstract { margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--surface-sunken); white-space: pre-line; font-size: 14px; line-height: 1.6; }
  .evs-review { display: grid; gap: 8px; padding-block-start: 12px; border-block-start: 1px solid var(--line); }
  .evs-review h3, .evs-proposal h3 { margin: 0; font-size: 13.5px; font-weight: 800; }
  .evs-rate { display: flex; gap: 4px; }
  .evs-star { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--line-strong); cursor: pointer; }
  .evs-star svg { width: 20px; height: 20px; }
  .evs-star.is-on { color: var(--warning); background: var(--warning-soft); border-color: color-mix(in oklab, var(--warning) 40%, var(--line)); }
  .evs-star.is-on svg { fill: currentColor; }
  .evs-reviews { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
  .evs-mini-stars { color: var(--warning); letter-spacing: 1px; }
}

/* css/components/events-dates.css */
/* Events → Dates and series (EV10). Two columns on wide screens (dates | schedule), one on phones. Tokens only. */
.evd-page { display: grid; gap: 18px; }
.evd-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 22px 24px; border-radius: var(--r-xl);
  background: var(--grad-mesh, var(--surface)); border: 1px solid var(--line); position: relative; overflow: hidden; }
.evd-hero::after { content: ""; position: absolute; inset: auto -60px -80px auto; width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--accent-soft), transparent); pointer-events: none; }
.evd-hero-copy { display: grid; gap: 4px; max-width: 60ch; }
.evd-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.evd-stats > div { min-width: 120px; padding: 10px 14px; border-radius: var(--r-lg); background: var(--glass, var(--surface)); border: 1px solid var(--glass-line, var(--line)); backdrop-filter: blur(12px); }
.evd-stats dt { font-size: var(--fs-micro, 11px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.evd-stats dd { margin: 2px 0 0; font-weight: 750; font-size: 15px; font-variant-numeric: tabular-nums; }
.evd-stats dd small { display: block; font-weight: 500; font-size: 11.5px; color: var(--text-muted); }
.evd-grid { display: grid; gap: 18px; align-items: start; }
@media (min-width: 1100px) { .evd-grid { grid-template-columns: minmax(0, 1fr) 400px; } .evd-side { position: sticky; top: calc(var(--topbar-h, 56px) + 16px); } }
.evd-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.evd-head .card-title { display: inline-flex; align-items: center; gap: 8px; margin: 0; flex: 1 1 auto; }
.evd-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-inline-start: 4px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; background: var(--surface-sunken); color: var(--text-muted); }
.evd-list { margin: 0; padding: 0; list-style: none; }
.evd-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "tile main act" "tile places places"; gap: 6px 14px; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--line); transition: background var(--t-fast, .15s); }
.evd-row:last-child { border-bottom: 0; }
.evd-row:hover { background: var(--surface-hover); }
@media (min-width: 720px) { .evd-row { grid-template-columns: 56px minmax(0, 1fr) 150px auto; grid-template-areas: "tile main places act"; } }
.evd-tile { grid-area: tile; display: grid; justify-items: center; align-content: center; min-height: 58px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent-text, var(--text)); line-height: 1.05; }
.evd-tile small { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.evd-tile b { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.is-cancelled .evd-tile { background: var(--surface-sunken); color: var(--text-muted); }
.is-cancelled .evd-when b { text-decoration: line-through; color: var(--text-muted); }
.is-past .evd-tile { background: var(--surface-sunken); color: var(--text-muted); }
.evd-main { grid-area: main; display: grid; gap: 6px; min-width: 0; }
.evd-when { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; align-items: baseline; }
.evd-when span { color: var(--text-muted); font-variant-numeric: tabular-nums; font-size: 13.5px; }
.evd-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.evd-note { font-size: 12.5px; color: var(--text-muted); font-style: italic; }
.evd-places { grid-area: places; display: grid; gap: 4px; }
.evd-places small { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.evd-meter { height: 6px; border-radius: var(--r-pill); background: var(--surface-sunken); overflow: hidden; }
.evd-meter span { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: var(--grad-brand, var(--accent)); }
.evd-actions { grid-area: act; display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.evd-pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--text-muted); }
.evd-sched > :not(.evd-head) { margin: 16px 18px; }
.evd-rules { display: grid; gap: 8px; padding: 0; list-style: none; }
.evd-rules li { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--accent-soft); }
.evd-rules small { color: var(--text-muted); }
.evd-row2 { display: grid; gap: 12px; }
@media (min-width: 520px) { .evd-row2 { grid-template-columns: 1fr 1fr; } }
.evd-freq { width: 100%; overflow-x: auto; }
.evd-days { display: flex; flex-wrap: wrap; gap: 6px; border: 0; margin: 0; padding: 0; }
.evd-days legend { width: 100%; margin-bottom: 6px; }
.evd-day { min-width: 44px; min-height: 40px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); font-weight: 650; font-size: 13px;
  transition: background var(--t-fast, .15s), color var(--t-fast, .15s), transform var(--t-fast, .15s); }
.evd-day[aria-pressed="true"] { background: var(--ink); color: var(--text-on-ink); border-color: transparent; }
.evd-day:active { transform: scale(.96); }
.evd-ends { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.evd-mono { font-family: var(--font-mono); font-size: 13px; }
.evd-preview { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-lg); background: var(--surface-sunken); }
.evd-summary { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 700; }
.evd-preview ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: d; }
.evd-preview li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; padding: 6px 8px; border-radius: var(--r-sm); font-size: 13px; counter-increment: d; }
.evd-preview li:nth-child(odd) { background: color-mix(in oklab, var(--surface) 70%, transparent); }
.evd-preview li b { font-variant-numeric: tabular-nums; } .evd-preview li b small { color: var(--text-muted); font-weight: 600; }
.evd-preview li.is-dst { box-shadow: inset 3px 0 0 var(--warning); }
.evd-dst { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--warning); }
.evd-dst svg { width: 13px; height: 13px; }
.evd-upgrade { display: flex; gap: 8px; align-items: center; color: var(--text-muted); }
.evd-tzline { display: flex; align-items: center; gap: 6px; margin-top: -6px; }
.evd-tickets, .evd-scope { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; }
.evd-scope-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid var(--line); cursor: pointer; }
.evd-scope-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.evd-scope-opt.is-danger:has(input:checked) { border-color: var(--danger); background: var(--danger-soft); }
.evd-scope-opt span { display: grid; gap: 2px; } .evd-scope-opt small { color: var(--text-muted); }
.evd-scope-opt input { margin-top: 3px; accent-color: var(--accent); }
.evd-impact { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--warning-soft); font-weight: 650; font-size: 13.5px; }
.evd-head .card-title svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.evd-stats dd small { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.evd-tzline, .evd-summary, .evd-impact, .evd-upgrade, .evd-preview .field-error) svg { width: 15px; height: 15px; flex: none; }
.evd-summary svg, .evd-impact svg { color: var(--accent); }

/* css/components/events-console.css */
/* EV11 — Console → Events (directive §53). Logical properties only (RTL), design tokens only. */
@layer components {
  .evc-tabs { overflow-x: auto; scrollbar-width: none; margin-block-end: var(--s-4); }
  .evc-tabs::-webkit-scrollbar { display: none; }
  .evc-tabs .tab { white-space: nowrap; }
  .evc-scroll { overflow-x: auto; max-inline-size: 100%; scrollbar-width: none; }

  /* Calendar chip in lists: day over month, like a ticket stub. */
  .evc-date { flex: none; inline-size: 40px; block-size: 44px; border-radius: var(--r-md); display: grid; place-content: center; text-align: center;
    background: var(--surface-2); border: 1px solid var(--line); line-height: 1; margin-inline-end: var(--s-3); }
  .evc-date b { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
  .evc-date small { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-block-start: 2px; }
  .evc-star { inline-size: 14px; block-size: 14px; color: var(--tangerine-500); vertical-align: -2px; margin-inline-start: 4px; }
  .evc-verified { inline-size: 15px; block-size: 15px; color: var(--accent); vertical-align: -2px; margin-inline-start: 4px; }

  .evc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--s-2); margin-block-end: var(--s-4); }
  .evc-kpis > div { padding: var(--s-3); border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
  .evc-kpis span { font-size: var(--fs-micro); color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
  .evc-kpis b { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); overflow-wrap: anywhere; }

  .evc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-3); margin-block: var(--s-2) var(--s-5); }
  .evc-tile { padding: var(--s-4); border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1); display: flex; flex-direction: column; gap: 4px; min-inline-size: 0; }
  .evc-tile > span { font-size: var(--fs-small); color: var(--text-muted); }
  .evc-tile > b { font-family: var(--font-display); font-size: var(--fs-h2); color: var(--ink); line-height: 1.1; }
  .evc-tile > small { color: var(--text-muted); font-size: var(--fs-small); }
  .evc-tile.is-feature { background: var(--grad-forest); color: var(--text-on-ink); border-color: transparent; }
  .evc-tile.is-feature > span, .evc-tile.is-feature > small, .evc-tile.is-feature > b { color: var(--text-on-ink); }
  .evc-tile.is-feature a { color: var(--lime-300); }
  .evc-tile.is-warn { border-color: color-mix(in oklab, var(--warning) 45%, var(--line)); background: color-mix(in oklab, var(--warning-soft) 60%, var(--surface)); }

  .evc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--s-4); align-items: start; }
  .evc-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--s-3); }
  .evc-form { position: sticky; inset-block-start: calc(var(--topbar-h) + var(--s-4)); }

  .evc-rows { list-style: none; margin: 0; padding: var(--s-2) var(--s-4) var(--s-4); display: flex; flex-direction: column; }
  .evc-rows > li { display: flex; align-items: center; gap: var(--s-3); padding-block: 10px; border-block-end: 1px solid var(--line); min-inline-size: 0; }
  .evc-rows > li:last-child { border-block-end: 0; }
  .evc-rows > li.is-off { opacity: .55; }
  .evc-rows > li.is-open { background: var(--surface-hover); border-radius: var(--r-md); padding-inline: var(--s-2); }
  .evc-row-actions { flex: none; gap: 4px; }
  .evc-ico { flex: none; inline-size: 34px; block-size: 34px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
  .evc-ico svg { inline-size: 17px; block-size: 17px; }
  .evc-rank { flex: none; inline-size: 26px; block-size: 26px; border-radius: var(--r-pill); display: grid; place-items: center; background: var(--surface-2); font-size: var(--fs-small); color: var(--text-muted); }

  .evc-pills { display: flex; flex-wrap: wrap; gap: 6px; }
  .evc-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-small); color: var(--text); text-decoration: none; margin-inline-end: 4px; }
  a.evc-pill:hover { background: var(--surface-hover); }
  .evc-pill.is-soft { background: transparent; }
  .evc-chip { display: inline-flex; gap: 6px; align-items: baseline; padding: 2px 8px; margin: 2px; border-radius: var(--r-sm); background: var(--surface-2); font-size: var(--fs-small); }
  .evc-answer { display: block; }

  .evc-callout { display: flex; gap: var(--s-3); align-items: flex-start; margin: var(--s-3) var(--s-4) 0; padding: var(--s-3); border-radius: var(--r-lg);
    background: var(--warning-soft); border: 1px solid color-mix(in oklab, var(--warning) 30%, transparent); }
  .evc-callout > svg { flex: none; inline-size: 18px; block-size: 18px; color: var(--warning); margin-block-start: 2px; }

  .evc-checks { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); border: 0; padding: 0; margin: 0 0 var(--s-3); }
  .evc-checks[disabled] { opacity: .6; }
  .evc-config { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--s-5); }
  .evc-config fieldset { border: 0; padding: 0; margin: 0; min-inline-size: 0; align-content: start; }
  .evc-currencies { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
  .evc-narrow { max-inline-size: 140px; }
  .evc-capture { display: flex; align-items: flex-end; gap: var(--s-2); flex-wrap: wrap; }
  .evc-capture > :first-child { flex: 1 1 200px; }
  .evc-code { font-family: var(--font-mono); font-size: var(--fs-small); line-height: 1.5; }

  /* Weekly growth: slim columns with the organiser count beneath. */
  .evc-weeks { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; align-items: end; block-size: 170px; }
  .evc-week { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; block-size: 100%; }
  .evc-week-bar { inline-size: 100%; max-inline-size: 26px; block-size: max(3px, var(--h)); border-radius: 6px 6px 2px 2px; background: var(--grad-forest); }
  .evc-week small { font-size: var(--fs-micro); color: var(--text-muted); min-block-size: 1em; }

  /* Health monitors. */
  .evc-monitors { list-style: none; margin: 0; padding: 0 var(--s-4) var(--s-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s-2); }
  .evc-monitors li { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface-2); min-inline-size: 0; }
  .evc-monitors li b { display: block; font-size: var(--fs-small); color: var(--ink); }
  .evc-monitors li small { display: block; font-size: var(--fs-micro); }
  .evc-monitors li > .tabular { font-weight: 600; color: var(--ink); text-align: end; font-size: var(--fs-small); }
  .evc-dot { flex: none; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px var(--success-soft); }
  .evc-monitors .is-warn .evc-dot { background: var(--warning); box-shadow: 0 0 0 4px var(--warning-soft); }
  .evc-monitors .is-bad { border-color: color-mix(in oklab, var(--danger) 40%, var(--line)); }
  .evc-monitors .is-bad .evc-dot { background: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); }
  .evc-health .card-title .badge { margin-inline-start: var(--s-2); vertical-align: 2px; }

  @media (max-width: 640px) {
    .evc-form { position: static; }
    .evc-tiles { grid-template-columns: 1fr 1fr; }
    .evc-tile > b { font-size: var(--fs-h3); }
    .evc-row-actions .btn { padding-inline: 8px; }
    /* R3D: on a phone the name/key/pills take the full row; usage + actions drop below instead of squashing it. */
    .evc-rows > li { flex-wrap: wrap; }
    .evc-rows > li > .grow { flex-basis: calc(100% - 52px) !important; } /* beats the .grow utility layer */
    .evc-rows > li > .evc-row-actions { margin-inline-start: auto; }
  }
}

/* css/components/events-ticketing.css */
/* EV2 — ticketing, orders, attendees, waitlist, invitations, registration form (organiser screens). Tokens only; logical
   properties (RTL); light/dark via the design tokens. Prefix evt-. */
.evt-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 4px 0 20px; }
@media (min-width: 900px) { .evt-kpis { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); } }
.evt-kpi { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: var(--radius-lg, 18px); text-align: start;
    background: var(--surface); border: 1px solid var(--line); color: var(--text); font: inherit; min-width: 0; }
button.evt-kpi { cursor: pointer; transition: border-color .15s, transform .15s; }
button.evt-kpi:hover { border-color: var(--accent); }
.evt-kpi > span { font-size: 12.5px; color: var(--text-muted); font-weight: 600; letter-spacing: .01em; }
.evt-kpi > b { font-size: 26px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; }
.evt-kpi > b small { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.evt-kpi > small { font-size: 12.5px; color: var(--text-muted); }
.evt-kpi.is-feature { grid-column: span 2; color: #fff; border: 0; overflow: hidden;
    background: radial-gradient(120% 140% at 0% 0%, #6d4aff 0%, transparent 60%), radial-gradient(100% 120% at 100% 100%, #ff6b4a 0%, transparent 55%), #1b1430; }
@media (min-width: 900px) { .evt-kpi.is-feature { grid-column: auto; } }
.evt-kpi.is-feature > b { color: var(--text-on-dark, #fff); }
.evt-kpi.is-feature > span, .evt-kpi.is-feature > small, .evt-kpi.is-feature > b small, .evt-kpi.is-feature .link { color: var(--text-on-dark-muted, rgb(255 255 255 / .8)); }
.evt-kpi.is-alert { border-color: color-mix(in srgb, var(--warning, #d97706) 55%, var(--line)); }
.evt-kpi.is-alert > b { color: var(--warning, #d97706); }
.evt-kpi.is-ok > b { color: var(--accent-text); }
.evt-kpi.is-on { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.evt-meter { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--text) 9%, transparent); overflow: hidden; margin-top: 8px; }
.evt-meter i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), #ff6b4a); }
.evt-meter.is-light { background: rgba(255, 255, 255, .2); }
.evt-meter.is-light i { background: #fff; }

.evt-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 18px; padding-bottom: 2px; scrollbar-width: none; }
.evt-tabs button { flex: none; display: inline-flex; gap: 8px; align-items: center; padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent;
    color: var(--text-muted); font: 600 13.5px var(--font, inherit); cursor: pointer; }
.evt-tabs button.is-on { background: var(--ink); color: var(--text-on-ink); border-color: var(--ink); }
.evt-tabs svg { width: 16px; height: 16px; }
.evt-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.evt-head p { margin: 0; max-width: 60ch; }
.evt-h { display: flex; gap: 10px; align-items: center; margin: 0 0 4px; font-size: 15.5px; font-weight: 650; }
.evt-h svg { color: var(--accent); }

/* Ticket types */
.evt-types { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; }
.evt-type { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); position: relative; }
.evt-type::after { content: ""; position: absolute; inset-block: 14px; inset-inline-start: 74px; border-inline-start: 2px dashed var(--line); }
.evt-type.is-paused, .evt-type.is-archived { opacity: .7; }
.evt-type-stub svg { width: 24px; height: 24px; }
.evt .segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.evt .toolbar { min-width: 0; }
.evt-type-stub { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--accent), #ff6b4a); }
.evt-type.kind-free .evt-type-stub { background: linear-gradient(135deg, #0f9d6b, #38bdf8); }
.evt-type.kind-donation .evt-type-stub { background: linear-gradient(135deg, #e11d48, #fb923c); }
.evt-type.kind-complimentary .evt-type-stub, .evt-type.kind-invitation .evt-type-stub { background: linear-gradient(135deg, #1f2937, #6d4aff); }
.evt-type-main { padding-inline-start: 14px; min-width: 0; }
.evt-type-head { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.evt-type-head h3 { margin: 0; font-size: 16px; font-weight: 650; margin-inline-end: 4px; }
.evt-type-price { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.evt-type-price b { font-size: 18px; }
.evt-tier { display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; font-weight: 600; color: #e0582f; }
.evt-tier svg { width: 14px; height: 14px; }
.evt-type-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12.5px; color: var(--text-muted); }
.evt-type-meta span { display: inline-flex; gap: 5px; align-items: center; }
.evt-type-meta svg { width: 14px; height: 14px; }
.evt-type-act { grid-column: 1 / -1; display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
@media (min-width: 720px) {
    .evt-type { grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; }
    .evt-type-act { grid-column: auto; }
}
.evt-presets { padding: 18px; border-radius: 20px; border: 1.5px dashed var(--line); }
.evt-preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.evt-preset { display: grid; gap: 3px; text-align: start; padding: 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer;
    font: inherit; transition: border-color .15s, transform .15s; }
.evt-preset:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.evt-preset:disabled { opacity: .45; cursor: not-allowed; }
.evt-preset svg { color: var(--accent); width: 20px; height: 20px; margin-bottom: 4px; }
.evt-preset b { font-size: 13.5px; }
.evt-preset small { font-size: 12px; color: var(--text-muted); line-height: 1.35; }
.evt-editor.is-compact .evt-preset-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

/* Forms */
.evt-form { display: grid; gap: 4px; }
.evt-sec { border-top: 1px solid var(--line); padding: 12px 0 4px; margin-top: 6px; }
.evt-sec > summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-weight: 600; font-size: 14px; list-style: none; }
.evt-sec > summary::-webkit-details-marker { display: none; }
.evt-sec > summary small { flex-basis: 100%; font-weight: 400; color: var(--text-muted); font-size: 12.5px; }
.evt-sec > summary svg { color: var(--accent); width: 16px; height: 16px; }
.evt-tier-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--text) 4%, transparent); }
@media (min-width: 720px) { .evt-tier-row { grid-template-columns: 1.2fr .8fr 1.3fr 1.3fr .7fr auto; align-items: center; padding: 6px; } }
.evt-group-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; font-size: 14px; }
.evt-group-row .input { width: 90px; }
.evt-group-row select.input { width: auto; flex: 1; min-width: 160px; }
.evt-checks { border: 0; padding: 0; margin: 10px 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.evt-checks legend { font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.evt-checks legend small { font-weight: 400; color: var(--text-muted); }
.evt-checks label { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; }
.evt-choice { display: grid; gap: 10px; }
@media (min-width: 640px) { .evt-choice { grid-template-columns: 1fr 1fr; } }
.evt-choice label { display: grid; gap: 2px; padding: 14px; border-radius: 16px; border: 1.5px solid var(--line); cursor: pointer; }
.evt-choice label.is-on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.evt-choice small { color: var(--text-muted); }
.evt-policy { display: grid; gap: 16px; max-width: 820px; }
.evt-savebar { position: sticky; bottom: 12px; display: flex; justify-content: flex-end; }
.evt-code { font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 10%, transparent); }
.evt-code-input { text-transform: uppercase; letter-spacing: .05em; }
.evt-codes-out { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Lists */
.evt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.evt-row { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.evt-row-main { flex: 1 1 200px; min-width: 0; display: grid; gap: 2px; }
.evt-row-main small { color: var(--text-muted); font-size: 12.5px; overflow-wrap: anywhere; }
.evt-row-icon, .evt-avatar { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 700; }
.evt-avatar { border-radius: 50%; width: 36px; height: 36px; font-size: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, transparent), color-mix(in srgb, #ff6b4a 25%, transparent)); color: var(--text); }
.evt-avatar.is-lg { width: 48px; height: 48px; font-size: 18px; }
.evt-pos { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; background: color-mix(in srgb, var(--text) 6%, transparent); }
.evt-approvals { margin-bottom: 18px; border-color: color-mix(in srgb, var(--warning, #d97706) 40%, var(--line)); }
.evt-approvals .evt-list { margin-top: 12px; }
.evt-filters { flex-wrap: wrap; }
.evt-filters select.input { width: auto; flex: 1 1 calc(50% - 8px); min-width: 0; }
@media (min-width: 900px) { .evt-filters select.input { flex: 0 1 180px; } }
.evt-bulk { position: sticky; top: 8px; z-index: 5; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; margin-bottom: 10px; border-radius: 16px;
    background: var(--ink); color: var(--text-on-ink); box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .5); }
.evt-bulk .input { width: 130px; min-height: 34px; }
.evt-bulk .icon-btn { color: inherit; }
.evt-table td { vertical-align: middle; }
.evt-cb { width: 36px; }
.evt-cb input { width: 18px; height: 18px; accent-color: var(--accent); }
.evt-person-cell { display: flex; gap: 10px; align-items: center; min-width: 0; }
.evt-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.evt-tags i { font-style: normal; font-size: 11px; padding: 1px 7px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 600; }
.evt-in { display: inline-flex; gap: 4px; align-items: center; color: var(--accent); font-weight: 600; }
.evt-in svg { width: 15px; height: 15px; }
.d-block { display: block; }

/* Drawer */
.evt-drawer .drawer-body { padding-bottom: 40px; }
.evt-ticket-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 18px; color: #fff;
    background: radial-gradient(120% 140% at 0% 0%, #6d4aff 0%, transparent 60%), radial-gradient(100% 120% at 100% 100%, #ff6b4a 0%, transparent 55%), #1b1430; }
.evt-ticket-card div { display: grid; gap: 2px; }
.evt-ticket-card b { font-size: 20px; letter-spacing: .06em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.evt-ticket-card small { opacity: .75; font-size: 12px; }
.evt-ticket-card > svg { width: 40px; height: 40px; opacity: .85; }
.evt-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.evt-mini li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.evt-mini svg { width: 15px; height: 15px; color: var(--text-muted); }
.evt-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; border-inline-start: 2px solid var(--line); padding-inline-start: 14px; }
.evt-history li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; }
.evt-history svg { width: 15px; height: 15px; color: var(--accent); }
.evt-history time { font-size: 11.5px; }
.evt-refund { padding: 14px; border-radius: 16px; border: 1px solid var(--line); }
.evt-inline { display: flex; gap: 8px; }
.evt-inline .input { flex: 1; }

/* Waitlist & form builder layout */
.evt-split { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1000px) { .evt-split { grid-template-columns: 320px minmax(0, 1fr); } .evt-split.is-wide { grid-template-columns: minmax(0, 1fr) 300px; } }
.evt-settings { position: sticky; top: 16px; }
.evt-fixed { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.evt-fixed li { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 99px; background: color-mix(in srgb, var(--text) 6%, transparent); font-size: 13px; }
.evt-fixed svg { width: 14px; height: 14px; }
.evt-ask { display: grid; gap: 6px; margin-top: 8px; }
.evt-questions { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.evt-q { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 12px; border-radius: 16px; border: 1px solid var(--line); }
.evt-q-icon { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.evt-q-act { display: flex; gap: 2px; margin-inline-start: auto; }
.evt-req { color: var(--danger, #e11d48); font-style: normal; }
.evt-cond { display: inline-flex; gap: 5px; align-items: center; color: var(--accent-text) !important; }
.evt-cond svg { width: 13px; height: 13px; }
.evt-palette { position: sticky; top: 16px; }
.evt-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.evt-type-grid button { display: flex; gap: 8px; align-items: center; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; font: 500 13px var(--font, inherit); text-align: start; }
.evt-type-grid button:hover { border-color: var(--accent); }
.evt-type-grid svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.evt-empty { margin-bottom: 18px; }
@media (max-width: 640px) {
    .evt-kpi > b { font-size: 22px; }
    .evt-row .btn { flex: 1 1 auto; }
}

/* css/components/events-comms.css */
/* EV8 — Events → Emails and notifications, Feedback, Certificates. Logical properties only (RTL); tokens only. */
.evc-grid { display: grid; gap: 20px; }
@media (min-width: 1100px) { .evc-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } }

.evc-phase { margin: 0 0 22px; }
.evc-phase-title { font: 700 12px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 10px; padding-inline-start: 4px; }
.evc-steps { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 10px; }
.evc-steps::before { content: ""; position: absolute; inset-block: 22px; inset-inline-start: 25px; width: 2px; border-radius: 2px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, transparent), color-mix(in srgb, var(--violet-500) 35%, transparent)); }
.evc-step { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px 16px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 18px; transition: border-color .15s, box-shadow .15s, opacity .15s; }
.evc-step.is-on { box-shadow: var(--e1); }
.evc-step.is-off { background: var(--surface-2); }
.evc-step.is-off .evc-step-main > p, .evc-step.is-off .evc-step-head b { color: var(--text-muted); }
.evc-step-icon { position: relative; z-index: 1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: #fff;
    background: radial-gradient(120% 120% at 0% 0%, var(--emerald-400), var(--forest-900)); box-shadow: 0 0 0 4px var(--canvas); }
.evc-step.is-off .evc-step-icon { background: var(--moss-300); }
.evc-step-icon svg { width: 17px; height: 17px; }
.evc-step-main { min-width: 0; display: grid; gap: 6px; }
.evc-step-main > p { margin: 0; font-size: 13.5px; color: var(--text-subtle, var(--text-muted)); line-height: 1.45; }
.evc-step-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.evc-step-head b { font-size: 15px; }
.evc-step-actions { display: flex; gap: 4px; align-items: center; }
@media (max-width: 560px) {
    .evc-step { grid-template-columns: 34px minmax(0, 1fr); }
    .evc-step-actions { grid-column: 1 / -1; justify-content: flex-end; border-top: 1px dashed var(--line); padding-top: 8px; }
}

.evc-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.evc-chip { display: inline-flex; gap: 6px; align-items: center; padding: 4px 6px 4px 8px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); font-size: 13px; }
.evc-chip .input { width: 64px; }
.evc-chip.is-pick { padding: 6px 10px; cursor: pointer; }
.evc-chip.is-pick:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.evc-chip.is-soft { font-size: 12.5px; }
.evc-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.evc-inline .input { width: 80px; }
.evc-sms { font-size: 13px; }
.evc-savebar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px;
    background: var(--glass-strong, var(--surface)); border: 1px solid var(--glass-line, var(--line)); backdrop-filter: blur(14px); box-shadow: var(--e2); }

.evc-side .card { padding: 18px; }
.evc-note { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.evc-lang { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.evc-lang:last-child { border-bottom: 0; }

.evc-audience { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.evc-reach { margin: 0; display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; color: var(--accent-text); }
.evc-reach svg { width: 15px; height: 15px; }

.evc-lead { max-width: 70ch; margin: 0 0 14px; }
.evc-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-bottom: 14px; }
.evc-card { display: grid; gap: 8px; align-content: start; padding: 18px; }
.evc-card-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); }
.evc-card-count { font-size: 13px; color: var(--text-muted); }
.evc-log { overflow-x: auto; padding: 0; }
.evc-frame { width: 100%; min-height: 70vh; border: 0; background: #EEF2F0; border-radius: 0 0 16px 16px; }

/* Feedback */
.evf-surveys { display: grid; gap: 10px; }
.evf-survey { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line);
    background: var(--surface); cursor: pointer; text-align: start; font: inherit; color: inherit; }
.evf-survey.is-active { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.evf-survey small { color: var(--text-muted); }
.evf-q { display: grid; gap: 8px; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.evf-q-head { display: flex; gap: 8px; align-items: center; }
.evf-q-head .input { flex: 1; }
.evf-bars { display: grid; gap: 6px; }
.evf-bar { display: grid; grid-template-columns: 70px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: 13px; }
.evf-bar i { display: block; height: 10px; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--violet-500)); min-width: 2px; }
.evf-bar-track { background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.evf-big { font: 700 34px/1 var(--font-display, var(--font-sans)); letter-spacing: -.02em; }
.evf-comments { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.evf-comments li { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14px; line-height: 1.5; }

/* Certificates */
.evx-preview { position: relative; aspect-ratio: 1.414; border-radius: 18px; overflow: hidden; background: #fff; color: #14201A; border: 1px solid var(--line); box-shadow: var(--e2);
    display: grid; place-items: center; text-align: center; padding: 6% 8%; }
.evx-preview.is-classic { outline: 2px solid var(--cert-accent); outline-offset: -14px; }
.evx-preview.is-modern { border-inline-start: 14px solid var(--cert-accent); }
.evx-preview .k { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cert-accent); font-weight: 700; }
.evx-preview h3 { margin: 6px 0; font: 700 clamp(16px, 2.6vw, 26px)/1.15 var(--font-display, var(--font-sans)); }
.evx-preview .n { font: 700 clamp(18px, 3vw, 30px)/1.1 var(--font-display, var(--font-sans)); border-bottom: 1px solid #d6dbd8; padding-bottom: 6px; margin: 8px auto; display: inline-block; }
.evx-preview small { color: #56655E; font-size: 12px; }
.evx-accents { display: flex; gap: 8px; flex-wrap: wrap; }
.evx-accents label { width: 28px; height: 28px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; box-shadow: inset 0 0 0 2px #fff; }
.evx-accents input { position: absolute; opacity: 0; pointer-events: none; }
.evx-accents label:has(input:checked) { border-color: var(--ink); }
.evx-accents label:has(input:focus-visible) { box-shadow: var(--focus-ring); }

.evc .evt-h { display: flex; gap: 8px; align-items: center; margin: 0; font-size: 15px; font-weight: 700; }
.evc .evt-h svg { width: 18px; height: 18px; flex: none; color: var(--accent-text); }
.evc .evt-tabs svg, .evc .evc-reach svg, .evc .evc-card-icon svg { width: 16px; height: 16px; }
.evc .evt-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--text-on-ink); border-color: var(--ink); }
.evx-preview h3, .evx-preview b, .evx-preview .n, .evx-preview i { color: #14201A; }

/* css/site/base.css */
/* ==========================================================================
   Weesify public pages: the base part (ADR-0068 §9). Tokens, the page shell, typography, shared primitives
   (buttons, cards, inputs), block wrappers, styling tokens, animations. Every page bundle starts with it, and
   module pages (forms, store, bookings, courses, community) use it with their module parts.
   Themed entirely by --site-* tokens set on .ws-site from the document theme (Theme::cssVars). Scoped under
   .ws-site so the builder canvas can include the same rules inside the app.
   ========================================================================== */
@font-face { font-family: "Poppins"; font-weight: 400; font-display: swap; src: url("/fonts/Poppins-Regular.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-display: swap; src: url("/fonts/Poppins-Medium.woff") format("woff"); }
@font-face { font-family: "Poppins"; font-weight: 600 700; font-display: swap; src: url("/fonts/Poppins-Bold.woff") format("woff"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("/fonts/Lora-Italic-Variable.woff") format("woff"); }
@font-face { font-family: "Manrope"; font-weight: 200 800; font-display: swap; src: url("/fonts/Manrope-Variable.woff") format("woff"); }
@font-face { font-family: "Urbanist"; font-weight: 100 900; font-display: swap; src: url("/fonts/Urbanist-Variable.woff") format("woff"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/InstrumentSerif-Italic.woff") format("woff"); }

/* Right-to-left (ADR-0058). This file ships in every bundle, including the standalone public one, so the
   direction primitives live here too: the transform sign, mirrored icons, and machine text that stays left to right. */
[dir="rtl"] { --dir-sign: -1; }
[dir="ltr"] { --dir-sign: 1; }
[dir="rtl"] .flip-rtl { --flip-x: -1; transform: scaleX(-1); }
[dir="rtl"] .ws-page input:is([type="url"], [type="email"], [type="tel"]) { direction: ltr; }

/* ---- Page shell -------------------------------------------------------------------------------------------- */
.ws-site :is(h1, h2, h3, h4, p, summary, b, strong, blockquote, figcaption) { color: inherit; }
.ws-site :is(b, strong) { font-weight: 700; } /* never inherit the app theme inside the builder canvas / thumbnails */
.ws-page { margin: 0; min-height: 100dvh; -webkit-font-smoothing: antialiased; }
.ws-page *, .ws-page *::before, .ws-page *::after, .ws-frame, .ws-frame *, .ws-frame *::before, .ws-frame *::after { box-sizing: border-box; }
.ws-page main { min-height: 100dvh; }

.ws-site { --gap: 12px; position: relative; min-height: 100%; background: var(--site-bg); color: var(--site-text); font-family: var(--site-font); font-size: 15px; line-height: 1.55; font-weight: 500; -webkit-font-smoothing: antialiased; overflow: hidden; overflow: clip; }
.ws-page .ws-site { min-height: 100dvh; }
.ws-site-inner { width: 100%; max-width: 560px; margin: 0 auto; padding: 44px 18px 40px; display: flex; flex-direction: column; gap: var(--gap); position: relative; }
.ws-site a { color: inherit; text-decoration: none; }
.ws-site svg { width: 18px; height: 18px; flex: none; }
.ws-block { position: relative; animation: ws-rise .5s cubic-bezier(.2,.8,.2,1) both; }
.ws-block:nth-child(2) { animation-delay: .04s } .ws-block:nth-child(3) { animation-delay: .08s } .ws-block:nth-child(4) { animation-delay: .12s } .ws-block:nth-child(5) { animation-delay: .16s } .ws-block:nth-child(n+6) { animation-delay: .2s }
@keyframes ws-rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .ws-block { animation: none; } }

/* ---- Shared primitives: buttons (themed by .ws-btn-*), cards, inputs --------------------------------------- */
/* Buttons (themed by .ws-btn-*) */
.ws-button { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 12px 18px; border-radius: var(--site-radius); font-weight: 700; letter-spacing: -0.01em; transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, background .18s, border-color .18s; }
.ws-button:hover { transform: translateY(-2px); }
.ws-button:active { transform: translateY(0) scale(.99); }
.ws-button:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 60%, transparent); outline-offset: 2px; }
.ws-button-label { flex: 1; text-align: center; }
.ws-button-icon, .ws-button-arrow { width: 22px; display: grid; place-items: center; opacity: .85; }
.ws-button-arrow { opacity: 0; transform: translate(-4px, 4px); transition: opacity .18s, transform .18s; }
.ws-button:hover .ws-button-arrow { opacity: .7; transform: none; }
.ws-btn-solid .ws-button { background: var(--site-btn-bg); color: var(--site-btn-text); box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.ws-btn-solid .ws-button:hover { box-shadow: 0 10px 24px -12px rgb(0 0 0 / .45); }
.ws-btn-soft .ws-button { background: color-mix(in oklab, var(--site-btn-bg) 16%, transparent); color: var(--site-text); border: 1px solid color-mix(in oklab, var(--site-btn-bg) 30%, transparent); backdrop-filter: blur(8px); }
.ws-btn-soft .ws-button:hover { background: color-mix(in oklab, var(--site-btn-bg) 24%, transparent); }
.ws-btn-outline .ws-button { background: transparent; color: var(--site-text); border: 1.5px solid var(--site-text); }
.ws-btn-outline .ws-button:hover { background: var(--site-text); color: var(--site-bg-base); }
.ws-btn-shadow .ws-button { background: var(--site-surface); color: var(--site-text); box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 8px 22px -10px rgb(0 0 0 / .25); }
.ws-btn-shadow .ws-button:hover { box-shadow: 0 16px 32px -12px rgb(0 0 0 / .32); }
.ws-site .ws-button-featured { background: var(--site-accent) !important; color: var(--site-accent-text) !important; border-color: transparent !important; box-shadow: 0 12px 28px -14px var(--site-accent) !important; }
.ws-site .ws-button-outline { background: transparent !important; color: var(--site-text) !important; border: 1.5px solid currentColor !important; box-shadow: none !important; }
.ws-placeholder { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 96px; padding: 16px; border-radius: var(--site-radius); border: 1.5px dashed color-mix(in oklab, var(--site-text) 22%, transparent); color: var(--site-muted); font-size: 14px; }
/* Cards (capture, countdown) */
.ws-card { padding: 20px; border-radius: calc(var(--site-radius) + 4px); background: var(--site-surface); border: 1px solid color-mix(in oklab, var(--site-text) 9%, transparent); box-shadow: 0 12px 32px -22px rgb(0 0 0 / .35); text-align: center; }
.ws-card-title { margin: 0; font-size: 1.05rem; font-weight: 600; }
.ws-card-text { margin: 6px 0 0; color: var(--site-muted); font-size: 14px; }
.ws-capture-form { margin-top: 14px; display: grid; gap: 8px; }
.ws-capture-row { display: flex; gap: 8px; }
.ws-input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border-radius: calc(var(--site-radius) - 2px); border: 1px solid color-mix(in oklab, var(--site-text) 18%, transparent); background: color-mix(in oklab, var(--site-surface) 80%, white); color: #0E1A15; font: inherit; }
.ws-input:focus { outline: 3px solid color-mix(in oklab, var(--site-accent) 45%, transparent); border-color: var(--site-accent); }
.ws-submit { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 18px; border: 0; border-radius: calc(var(--site-radius) - 2px); background: var(--site-accent); color: var(--site-accent-text); font: inherit; font-weight: 600; cursor: pointer; transition: filter .15s, transform .15s; }
.ws-submit:hover { filter: brightness(1.05); transform: translateY(-1px); }
.ws-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--site-muted); text-align: start; }
.ws-consent input { margin-top: 3px; accent-color: var(--site-accent); }
.ws-success { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 14px 0 0; color: var(--site-text); font-weight: 500; }
.ws-success svg { color: var(--site-accent); }

.ws-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ws-report-link { display: block; width: max-content; margin: 10px auto 0; font-size: 12px; opacity: .55; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ws-report-link:hover { opacity: .9; }

/* ---- Branding, empty states, system pages (gate / 404 / sensitive) ----------------------------------------- */
/* Branding + empty */
.ws-branding { margin: 22px auto 0; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--site-text, #0E1A15); background: color-mix(in oklab, var(--site-surface, #fff) 70%, transparent); border: 1px solid color-mix(in oklab, var(--site-text, #0E1A15) 10%, transparent); backdrop-filter: blur(6px); opacity: .85; }
.ws-branding:hover { opacity: 1; }
.ws-branding svg { width: 16px !important; height: 14px !important; color: #0BC284; }
.ws-empty { padding: 40px 16px; text-align: center; color: var(--site-muted); border: 1.5px dashed color-mix(in oklab, var(--site-text) 18%, transparent); border-radius: var(--site-radius); }

/* System pages (gate / 404 / sensitive) */
.ws-system { --site-text: #0E1A15; --site-muted: #56655E; --site-accent: #0BC284; --site-accent-text: #fff; --site-surface: #fff; --site-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; font-family: "Poppins", system-ui, sans-serif; color: #0E1A15; background: radial-gradient(90% 60% at 50% 0%, #D6FAEA 0%, #F6FAF8 55%, #FFFFFF 100%); }
.ws-system main { min-height: 0; }
.ws-system-card { width: 100%; max-width: 400px; padding: 32px 28px; text-align: center; background: #fff; border: 1px solid #E3E9E6; border-radius: 22px; box-shadow: 0 30px 60px -30px rgb(8 50 36 / .35); }
.ws-system-card h1 { margin: 0; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; }
.ws-system-card p { margin: 8px 0 0; color: #56655E; font-size: 14px; }
.ws-system-icon { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 16px; display: grid; place-items: center; background: #EAFDF5; color: #067A53; }
.ws-system-icon svg { width: 24px; height: 24px; }
.ws-system-links { margin-top: 18px; font-size: 14px; color: #6B7280; }
.ws-system-links a { color: #067A53; font-weight: 600; text-decoration: none; }
.ws-system-links a:hover { text-decoration: underline; }
.ws-brand-icon svg { width: 32px; height: 26px; }
.ws-gate-form { margin-top: 18px; display: grid; gap: 10px; }
.ws-gate-form .ws-submit { width: 100%; }
.ws-error { margin: 0 !important; color: #C93434 !important; font-size: 13px !important; }
.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 (max-width: 420px) { .ws-capture-row { flex-direction: column; } .ws-capture-row .ws-input { flex: none; width: 100%; } .ws-submit { width: 100%; } }
.ws-system a.ws-submit, .ws-branding { text-decoration: none; }


/* ---- Premium layer (was "v2" in site.css) ------------------------------------------------------------------- */
.ws-dark { color-scheme: dark; }
.ws-btn-glass .ws-button { background: color-mix(in oklab, var(--site-surface) 100%, transparent); color: var(--site-text); border: 1px solid color-mix(in oklab, var(--site-text) 12%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 10px 30px -18px rgb(0 0 0 / .5); }
.ws-btn-glass .ws-button:hover { background: color-mix(in oklab, var(--site-text) 10%, transparent); border-color: color-mix(in oklab, var(--site-accent) 45%, transparent); }
.ws-button-icon { width: 34px; height: 34px; margin-block: -4px; margin-inline: -6px 0; border-radius: calc(var(--site-radius) - 6px); background: color-mix(in oklab, currentColor 10%, transparent); opacity: 1; }
.ws-button-icon svg { width: 17px; height: 17px; }
.ws-button-featured { position: relative; overflow: hidden; }
.ws-button-featured::after { content: ""; position: absolute; top: -50%; bottom: -50%; left: -30%; width: 30%; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgb(255 255 255 / .35), transparent); animation: ws-sheen 4.5s ease-in-out infinite; }
@keyframes ws-sheen { 0%, 60% { left: -40%; } 100% { left: 130%; } }
.ws-card-glass { --site-blur: blur(18px) saturate(1.4); --site-line: color-mix(in oklab, var(--site-text) 11%, transparent); }
.ws-card-glass .ws-card { background: var(--site-surface); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-color: color-mix(in oklab, var(--site-text) 11%, transparent); }
.ws-card { border-radius: calc(var(--site-radius) + 6px); padding: 22px; }
.ws-card-title { font-family: var(--site-heading); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; }
.ws-dark .ws-input { background: rgb(255 255 255 / .08); color: var(--site-text); border-color: rgb(255 255 255 / .14); }
.ws-dark .ws-input::placeholder { color: color-mix(in oklab, var(--site-text) 50%, transparent); }

/* ==========================================================================
   ADR-0068 display layer
   ========================================================================== */

/* ---- Tokens the theme doesn't set on older token arrays, and colours for text over media ---------------------- */
.ws-site {
  --site-on-media: #FFFFFF; --site-ink-dark: #0E1A15; --site-ink-light: #FFFFFF;
  --site-shadow-sm: 0 1px 2px rgba(0,0,0,.08); --site-shadow-md: 0 12px 32px -22px rgba(0,0,0,.35);
  --site-shadow-lg: 0 24px 48px -24px rgba(0,0,0,.45); --site-shadow-float: 0 40px 80px -32px rgba(0,0,0,.5);
  --site-btn-radius: var(--site-radius); --site-line: color-mix(in oklab, var(--site-text) 9%, transparent);
  --site-gap: var(--gap); --site-ease: cubic-bezier(.2,.8,.2,1);
}
.ws-space-compact { --gap: 9px; --pad-k: .85; }
.ws-space-airy { --gap: 18px; --pad-k: 1.2; }
.ws-bshape-square { --site-btn-radius: 0px; }
.ws-bshape-pill { --site-btn-radius: 999px; }
.ws-bshape-leaf { --site-btn-radius: calc(var(--site-radius) + 12px) 4px; }
.ws-site .ws-button { border-radius: var(--site-btn-radius); font-family: var(--site-btn-font, inherit); }

/* ---- The page frame: the container every responsive rule queries (ADR-0068 §5) -------------------------------- */
.ws-frame { container: ws-page / inline-size; position: relative; z-index: 1; width: 100%; }
.ws-frame > * { --w: var(--w-m, 560px); }
@container ws-page (min-width: 600px) { .ws-frame > * { --w: var(--w-t, 560px); } }
@container ws-page (min-width: 1024px) { .ws-frame > * { --w: var(--w-d, 560px); } }
.ws-frame .ws-site-inner { max-width: var(--w, 560px); }
.ws-site > .ws-frame:only-child, .ws-page .ws-frame { min-height: inherit; }

/* ---- Backgrounds: in site/blocks/_background.css, linked by pages that use one (owner item 2) ------------------ */

/* ---- Block wrapper and the styling tokens (block.style → ws-s-{prop}-{value} → --b-* custom properties) ------- */
.ws-block { --b-bg: initial; --b-fg: initial; --b-border: initial; --b-radius: initial; --b-shadow: initial; --b-pad: initial; --b-blur: initial;
  --b-scale: 1; --b-fit: initial; --b-align: initial; --b-justify: initial; --cols: initial; min-width: 0; }
.ws-surface { background: var(--b-bg, var(--site-surface)); color: var(--b-fg, inherit); border: var(--b-border, 1px solid var(--site-line));
  border-radius: var(--b-radius, calc(var(--site-radius) + 6px)); box-shadow: var(--b-shadow, var(--site-shadow-md)); backdrop-filter: var(--b-blur, var(--site-blur, none)); -webkit-backdrop-filter: var(--b-blur, var(--site-blur, none)); }
.ws-s-surface-none { --b-bg: transparent; --b-border: 0 solid transparent; --b-shadow: none; --b-pad: 0px; }
.ws-s-surface-solid { --b-bg: var(--site-surface); }
.ws-s-surface-soft { --b-bg: color-mix(in oklab, var(--b-accent, var(--site-accent)) 12%, transparent); --b-border: 1px solid color-mix(in oklab, var(--b-accent, var(--site-accent)) 24%, transparent); --b-shadow: none; }
.ws-s-surface-glass { --b-bg: color-mix(in oklab, var(--site-surface) 55%, transparent); --b-blur: blur(16px) saturate(1.4); --b-border: 1px solid color-mix(in oklab, var(--site-text) 13%, transparent); }
.ws-s-surface-outline { --b-bg: transparent; --b-border: 1.5px solid color-mix(in oklab, currentColor 70%, transparent); --b-shadow: none; }
.ws-s-surface-gradient { --b-bg: radial-gradient(90% 90% at 100% 0%, rgb(255 255 255 / .3), transparent 55%), linear-gradient(150deg, color-mix(in oklab, var(--b-accent, var(--site-accent)) 88%, #fff), color-mix(in oklab, var(--b-accent, var(--site-accent)) 68%, #000)); --b-fg: var(--site-on-media); --b-border: 0 solid transparent; --b-shadow: 0 14px 30px -18px rgb(0 0 0 / .5); }
.ws-s-surface-accent { --b-bg: var(--b-accent, var(--site-accent)); --b-fg: var(--b-accent-text, var(--site-accent-text)); --b-border: 0 solid transparent; --b-shadow: 0 14px 30px -16px var(--b-accent, var(--site-accent)); }
.ws-s-surface-image { --b-fg: var(--site-on-media); --b-border: 0 solid transparent; }
.ws-s-shape-square { --b-radius: 0px; --site-btn-radius: 0px; }
.ws-s-shape-rounded { --b-radius: max(14px, calc(var(--site-radius) + 4px)); --site-btn-radius: max(12px, var(--site-radius)); }
.ws-s-shape-pill { --b-radius: 999px; --site-btn-radius: 999px; }
.ws-s-shape-organic { --b-radius: 30px 10px 30px 10px; --site-btn-radius: 24px 8px 24px 8px; }
.ws-s-elevation-none { --b-shadow: none; }
.ws-s-elevation-sm { --b-shadow: var(--site-shadow-sm); }
.ws-s-elevation-md { --b-shadow: var(--site-shadow-md); }
.ws-s-elevation-lg { --b-shadow: var(--site-shadow-lg); }
.ws-s-elevation-float { --b-shadow: var(--site-shadow-float); }
.ws-s-text-light { --b-fg: var(--site-ink-light); color: var(--site-ink-light); --site-muted: color-mix(in oklab, var(--site-ink-light) 72%, transparent); }
.ws-s-text-dark { --b-fg: var(--site-ink-dark); color: var(--site-ink-dark); --site-muted: color-mix(in oklab, var(--site-ink-dark) 68%, transparent); }
.ws-s-align-start { --b-align: start; --b-justify: flex-start; text-align: start; }
.ws-s-align-center { --b-align: center; --b-justify: center; text-align: center; }
.ws-s-width-content { max-width: 100%; }
.ws-s-width-wide { width: min(100cqw - 24px, 100% + 240px); max-width: none; margin-inline: calc((100% - min(100cqw - 24px, 100% + 240px)) / 2); }
.ws-s-width-full { width: 100cqw; max-width: none; margin-inline: calc(50% - 50cqw); --b-radius: 0px; }
.ws-s-padding-none { --b-pad: 0px; }
.ws-s-padding-s { --b-pad: 12px; }
.ws-s-padding-m { --b-pad: 20px; }
.ws-s-padding-l { --b-pad: 32px; }
.ws-s-size-s { --b-scale: .9; font-size: .93em; }
.ws-s-size-m { --b-scale: 1; }
.ws-s-size-l { --b-scale: 1.12; font-size: 1.06em; }
.ws-s-size-xl { --b-scale: 1.28; font-size: 1.14em; }
.ws-s-border-none { --b-border: 0 solid transparent; }
.ws-s-border-hairline { --b-border: 1px solid color-mix(in oklab, var(--site-text) 14%, transparent); }
.ws-s-border-strong { --b-border: 2px solid currentColor; }
.ws-s-media-fit-cover { --b-fit: cover; }
.ws-s-media-fit-contain { --b-fit: contain; }
.ws-s-accent { --site-accent: var(--b-accent); --site-accent-text: var(--b-accent-text); }

/* Hover (interactive surfaces carry .ws-hov) */
.ws-hov { transition: transform .2s var(--site-ease), box-shadow .2s, background .18s, border-color .18s; }
.ws-hov:hover { transform: translateY(var(--b-hover-y, -2px)) rotate(var(--b-hover-rot, 0deg)); }
.ws-hov:active { transform: translateY(0) scale(.99); }
.ws-hov:focus-visible, .ws-site :is(a, button, summary):focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 60%, transparent); outline-offset: 2px; }
.ws-s-hover-lift { --b-hover-y: -4px; }
.ws-s-hover-glow .ws-hov:hover { box-shadow: 0 0 0 3px color-mix(in oklab, var(--site-accent) 35%, transparent), 0 18px 40px -18px var(--site-accent); }
.ws-s-hover-tilt { --b-hover-y: -3px; --b-hover-rot: -1.2deg; }
.ws-s-hover-none .ws-hov:hover, .ws-s-hover-none .ws-button:hover { transform: none; }

/* ---- Custom button and block styling (owner fix R6D). Values arrive as --b-* custom properties on the block wrapper
   (StyleTokens::vars, allow-listed hex / clamped numbers / built gradients only); these rules win over the surface,
   theme fill and presentation-system button looks, in light and dark alike. */
.ws-site .ws-s-bgx { --b-bg: var(--b-bgx); --b-fg: var(--b-bgx-fg); }
.ws-site .ws-s-bgx.ws-surface, .ws-site .ws-s-bgx .ws-surface { background: var(--b-bgx); color: var(--b-bgx-fg); }
.ws-site .ws-block.ws-s-btn-bg :is(.ws-button, .ws-hero-btn) { background: var(--b-btn-bg) !important; color: var(--b-btn-fg) !important; border-color: transparent !important; }
.ws-site .ws-block.ws-s-btn-fg :is(.ws-button, .ws-hero-btn) { color: var(--b-btn-fg) !important; }
.ws-site .ws-block.ws-s-btn-bd :is(.ws-button, .ws-hero-btn) { border: var(--b-bw, 1.5px) solid var(--b-btn-bd) !important; }
.ws-site .ws-block.ws-s-bw:not(.ws-s-btn-bd) :is(.ws-button, .ws-hero-btn) { border-width: var(--b-bw) !important; border-style: solid !important; }
.ws-site .ws-block.ws-s-radius { --b-radius: var(--b-rad); --site-btn-radius: var(--b-rad); }
.ws-site .ws-block.ws-s-radius :is(.ws-button, .ws-hero-btn) { border-radius: var(--b-rad) !important; }
.ws-site .ws-block.ws-s-op { opacity: var(--b-op); }
.ws-site .ws-block.ws-s-shadow-none :is(.ws-button, .ws-hero-btn), .ws-s-shadow-none { --b-shadow: none; }
.ws-site .ws-block.ws-s-shadow-none :is(.ws-button, .ws-hero-btn) { box-shadow: none !important; }
.ws-site .ws-block.ws-s-shadow-soft { --b-shadow: 0 6px 18px -10px color-mix(in oklab, var(--b-shc, #000) 45%, transparent); }
.ws-site .ws-block.ws-s-shadow-medium { --b-shadow: 0 14px 32px -14px color-mix(in oklab, var(--b-shc, #000) 60%, transparent); }
.ws-site .ws-block.ws-s-shadow-glow { --b-shadow: 0 0 0 1px color-mix(in oklab, var(--b-shc, var(--site-accent)) 40%, transparent), 0 10px 34px -6px color-mix(in oklab, var(--b-shc, var(--site-accent)) 75%, transparent); }
.ws-site .ws-block:is(.ws-s-shadow-soft, .ws-s-shadow-medium, .ws-s-shadow-glow) :is(.ws-button, .ws-hero-btn) { box-shadow: var(--b-shadow) !important; }
.ws-site .ws-block.ws-s-btn-size-sm .ws-button { min-height: 44px; padding: 8px 14px; font-size: 14px; }
.ws-site .ws-block.ws-s-btn-size-md .ws-button { min-height: 54px; }
.ws-site .ws-block.ws-s-btn-size-lg .ws-button { min-height: 68px; padding-inline: 24px; font-size: 17px; }
.ws-site .ws-block.ws-s-btn-size-full { width: 100cqw; max-width: none; margin-inline: calc(50% - 50cqw); }
.ws-site .ws-block.ws-s-btn-size-full .ws-button { border-radius: 0 !important; min-height: 64px; }
.ws-site .ws-block.ws-s-btn-size-sm:not(.ws-s-text-align-start, .ws-s-text-align-end) .ws-button { width: fit-content; margin-inline: auto; }
.ws-s-icon-pos-start .ws-button :is(.ws-button-icon, .ws-button-thumb) { order: 0; }
.ws-s-icon-pos-end .ws-button :is(.ws-button-icon, .ws-button-thumb) { order: 3; }
.ws-s-icon-pos-end .ws-button .ws-button-arrow { order: 2; }
.ws-s-icon-pos-none .ws-button :is(.ws-button-icon, .ws-button-thumb) { display: none; }
.ws-s-text-align-start { text-align: start; --b-align: start; --b-justify: flex-start; }
.ws-s-text-align-center { text-align: center; --b-align: center; --b-justify: center; }
.ws-s-text-align-end { text-align: end; --b-align: end; --b-justify: flex-end; }
.ws-s-text-align-start .ws-button-label { text-align: start; }
.ws-s-text-align-center .ws-button-label { text-align: center; }
.ws-s-text-align-end .ws-button-label { text-align: end; }
.ws-s-weight-400 { --b-weight: 400; } .ws-s-weight-500 { --b-weight: 500; } .ws-s-weight-600 { --b-weight: 600; } .ws-s-weight-700 { --b-weight: 700; } .ws-s-weight-800 { --b-weight: 800; }
.ws-site .ws-block[class*="ws-s-weight-"] :is(.ws-button, .ws-hero-btn, .ws-t1) { font-weight: var(--b-weight) !important; }
.ws-s-tracking-tight { --b-track: -0.03em; } .ws-s-tracking-normal { --b-track: 0em; } .ws-s-tracking-wide { --b-track: .04em; } .ws-s-tracking-wider { --b-track: .1em; }
.ws-site .ws-block[class*="ws-s-tracking-"] :is(.ws-button, .ws-hero-btn, .ws-t1) { letter-spacing: var(--b-track) !important; }
.ws-s-hover-darken .ws-hov:hover, .ws-site .ws-s-hover-darken :is(.ws-button, .ws-hero-btn):hover { filter: brightness(.88); transform: none; }
@media (prefers-reduced-motion: reduce) { .ws-site .ws-block :is(.ws-button, .ws-hero-btn):hover { transform: none; } }

/* ---- Item primitives shared by the variants --------------------------------------------------------------------- */
.ws-media { display: block; width: 100%; height: 100%; object-fit: var(--b-fit, cover); }
.ws-media-ph { display: grid; place-items: center; width: 100%; height: 100%; min-height: 64px; color: color-mix(in oklab, var(--site-accent-text) 85%, transparent);
  background: radial-gradient(90% 90% at 100% 0%, rgb(255 255 255 / .28), transparent 55%), linear-gradient(150deg, color-mix(in oklab, var(--site-accent) 80%, var(--site-surface)), color-mix(in oklab, var(--site-accent) 55%, var(--site-text))); }
.ws-media-ph svg { width: 28%; height: auto; max-width: 44px; opacity: .9; }
.ws-ico { width: 40px; height: 40px; flex: none; border-radius: calc(var(--site-radius) - 4px); display: grid; place-items: center; background: color-mix(in oklab, var(--site-accent) 16%, transparent); color: var(--site-accent); }
.ws-ico svg { width: 19px; height: 19px; }
.ws-t1 { margin: 0; font-family: var(--site-heading); font-weight: 700; letter-spacing: -0.02em; line-height: 1.18; font-size: calc(1.04rem * var(--b-scale, 1)); overflow-wrap: anywhere; }
.ws-t2 { margin: 0; color: var(--site-muted); font-size: 13.5px; font-weight: 500; line-height: 1.4; }
.ws-tx { margin: 0; color: var(--site-muted); font-size: 14px; line-height: 1.55; }
.ws-tx p { margin: 0 0 .6em; } .ws-tx p:last-child { margin: 0; }
.ws-eyebrow { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--site-accent); }
.ws-badge { display: inline-flex; align-items: center; gap: 4px; width: fit-content; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; background: var(--site-accent); color: var(--site-accent-text); }
.ws-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; font-weight: 600; color: var(--site-muted); }
.ws-meta li { display: inline-flex; align-items: center; gap: 5px; }
.ws-meta svg { width: 14px; height: 14px; }
.ws-price { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ws-price s { font-weight: 500; font-size: .86em; color: var(--site-muted); }
.ws-rating { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; }
.ws-rating svg { width: 14px; height: 14px; color: var(--site-accent); fill: currentColor; }
.ws-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: var(--site-btn-radius); background: var(--site-accent); color: var(--site-accent-text); font-weight: 700; font-size: 14px; white-space: nowrap; }
.ws-cta svg { width: 16px; height: 16px; }
.ws-go { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, currentColor 8%, transparent); transition: transform .2s var(--site-ease), background .2s; }
.ws-go svg { width: 16px; height: 16px; }
.ws-hov:hover .ws-go { transform: translateX(calc(3px * var(--dir-sign, 1))); }
.ws-copied { outline: 2px solid var(--site-accent) !important; }

/* ---- Collections: one markup, layouts switched by CSS (ADR-0068 §5) --------------------------------------------- */
.ws-many { position: relative; min-width: 0; }
.ws-chead { display: grid; gap: 4px; margin: 0 0 12px; text-align: var(--b-align, start); }
.ws-chead h2 { margin: 0; font-family: var(--site-heading); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.025em; }
.ws-chead p { margin: 0; color: var(--site-muted); font-size: 14px; }
.ws-track { display: grid; gap: var(--c-gap, 10px); min-width: 0; }
.ws-car-nav { display: none; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.ws-car-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--site-line); background: var(--site-surface); color: var(--site-text); display: grid; place-items: center; cursor: pointer; box-shadow: var(--site-shadow-sm); transition: opacity .2s, transform .2s; }
.ws-car-nav button:hover { transform: translateY(-1px); }
.ws-car-nav button[disabled] { opacity: .35; cursor: default; }
.ws-car-nav svg { width: 18px; height: 18px; }
html:not(.ws-js) .ws-mode-public .ws-car-nav { display: none !important; }
.ws-ci { position: relative; min-width: 0; }

/* ---- Behaviour animations (reveal on scroll; only with site.js, never under reduced motion) --------------------- */
.ws-block.ws-a { animation: none; }
.ws-js .ws-mode-public .ws-a:not(.is-in) { opacity: 0; }
.ws-js .ws-mode-public .ws-a-rise:not(.is-in) { transform: translateY(22px); }
.ws-js .ws-mode-public .ws-a-scale:not(.is-in) { transform: scale(.95); }
.ws-js .ws-mode-public .ws-a-slide:not(.is-in) { transform: translateX(calc(28px * var(--dir-sign, 1))); }
.ws-js .ws-mode-public .ws-a-stagger:not(.is-in) { opacity: 1; }
.ws-js .ws-mode-public .ws-a-stagger:not(.is-in) .ws-track > * { opacity: 0; transform: translateY(14px); }
.ws-a, .ws-a-stagger .ws-track > * { transition: opacity .7s ease, transform .7s var(--site-ease); }
.ws-a-stagger .ws-track > * { transition-delay: calc(min(var(--i, 0), 10) * 70ms); }
.ws-motion-none .ws-block { animation: none; }
.ws-motion-none :is(.ws-hov, .ws-button, .ws-a) { transition: none; }
.ws-motion-none .ws-button-featured::after { animation: none; }

/* ---- Sticky slot (sticky CTA bar, announcement, floating button) ------------------------------------------------ */
.ws-sticky { position: sticky; bottom: 0; z-index: 40; display: grid; justify-items: center; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.ws-sticky > * { pointer-events: auto; width: min(100%, var(--w-m, 560px)); }
.ws-sticky .ws-block { animation: none; }

/* ---- Builder canvas and thumbnails -------------------------------------------------------------------------------- */
.ws-mode-canvas .ws-block.is-hidden { opacity: .38; }
.ws-mode-canvas .ws-block.is-empty > .ws-placeholder { min-height: 72px; }
.ws-is-thumb { pointer-events: none; }
.ws-is-thumb .ws-block { animation: none; }
.ws-is-thumb .ws-site-inner { padding-block: 20px; }

/* ---- Reduced motion: everything stills, including the featured sheen and animated backgrounds ------------------ */
@media (prefers-reduced-motion: reduce) {
  .ws-site *, .ws-site *::before, .ws-site *::after, .ws-site { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .ws-button-featured::after, .ws-sheen::after { display: none; }
  .ws-js .ws-a, .ws-js .ws-a-stagger .ws-track > * { opacity: 1 !important; transform: none !important; }
}
.ws-dark .ws-branding { background: rgb(255 255 255 / .08); color: var(--site-text); border-color: rgb(255 255 255 / .12); }

/* ---- Lightbox (galleries; built by site.js) ------------------------------------------------------------------------ */
.ws-lightbox { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 56px 12px; background: rgb(6 8 7 / .92); }
.ws-lightbox[hidden] { display: none; }
.ws-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 80px -30px rgb(0 0 0 / .8); }
.ws-lightbox button { position: absolute; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.ws-lightbox button:hover, .ws-lightbox button:focus-visible { background: rgb(255 255 255 / .24); outline: 2px solid rgb(255 255 255 / .6); }
.ws-lb-close { top: 12px; inset-inline-end: 12px; }
.ws-lb-prev { inset-inline-start: 12px; top: 50%; transform: translateY(-50%); }
.ws-lb-next { inset-inline-end: 12px; top: 50%; transform: translateY(-50%); }
.ws-lb-count { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: rgb(255 255 255 / .8); font-size: 13px; font-weight: 600; }
.ws-lb-fig { margin: 0; display: grid; justify-items: center; align-content: center; gap: 12px; width: 100%; height: 100%; min-height: 0; }
.ws-lb-fig img { max-height: calc(100% - 44px); min-height: 0; }
.ws-lb-cap { max-width: 60ch; color: rgb(255 255 255 / .88); font: 500 14px/1.45 system-ui, sans-serif; text-align: center; }
.ws-lb-cap[hidden] { display: none; }
.ws-lightbox button[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) { .ws-lightbox:not([hidden]) .ws-lb-fig img { animation: ws-lb-in .28s cubic-bezier(.2,.8,.2,1); } }
@keyframes ws-lb-in { from { opacity: 0; transform: scale(.97); } }

/* ---- Flow: shells that place single items two to a row on larger screens (systems add .ws-flow-half via blockClasses) */
.ws-flow { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); align-items: start; }
.ws-flow > .ws-block { grid-column: 1 / -1; min-width: 0; }
@container ws-page (min-width: 600px) {
  .ws-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-flow > .ws-flow-half { grid-column: auto; align-self: stretch; }
  .ws-flow > .ws-flow-half > :not(.ws-sheet) { height: 100%; }
}
/* Items over media keep light text (links inherit the page colour otherwise). */
.ws-site :is(.ws-sv-image-card, .ws-sv-banner, .ws-mg-lead, .ws-tile-x.has-media) { color: var(--site-on-media); }
.ws-site .ws-tile-x:not(.has-media) { color: var(--b-fg, var(--site-on-media)); }
.ws-site .ws-sv-premium { color: var(--site-ink-light); }
.ws-site .ws-surface { color: var(--b-fg, var(--site-text)); }

/* ---- Item parts shared by several variants (text block, thumbnails, price pill, bento tiles) ---- */
.ws-on-media { position: absolute; top: 12px; inset-inline-start: 12px; box-shadow: 0 6px 16px -8px rgb(0 0 0 / .5); }
.ws-txt { display: grid; gap: 4px; min-width: 0; }
.ws-eyebrow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ws-txt .ws-t1 { font-size: calc(1.12rem * var(--b-scale, 1)); }
.ws-txt .ws-tx { margin-top: 2px; }
.ws-tx.is-clamped { display: -webkit-box; -webkit-line-clamp: var(--clamp, 3); -webkit-box-orient: vertical; overflow: hidden; }
.ws-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.ws-thumb { width: calc(56px * var(--b-scale, 1)); height: calc(56px * var(--b-scale, 1)); flex: none; border-radius: max(8px, calc(var(--site-radius) - 2px)); overflow: hidden; display: grid; place-items: center; }
.ws-thumb .ws-ico { width: 100%; height: 100%; border-radius: inherit; }
.ws-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ws-pill { flex: none; padding: 7px 12px; border-radius: 999px; font-weight: 800; font-size: 13.5px; background: var(--site-accent); color: var(--site-accent-text); font-variant-numeric: tabular-nums; }
.ws-tile-x { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-height: 150px; aspect-ratio: 1; padding: var(--b-pad, 16px); overflow: hidden; isolation: isolate; text-align: start;
  border-radius: var(--b-radius, calc(var(--site-radius) + 8px)); color: var(--b-fg, var(--site-on-media)); box-shadow: var(--b-shadow, 0 16px 32px -20px rgb(0 0 0 / .5)); border: var(--b-border, 0 solid transparent);
  background: var(--b-bg, radial-gradient(90% 90% at 100% 0%, rgb(255 255 255 / .32), transparent 55%), linear-gradient(150deg, color-mix(in oklab, var(--site-accent) 88%, #fff), color-mix(in oklab, var(--site-accent) 68%, #000))); }
.ws-tile-x .ws-tile-bg { position: absolute; inset: 0; z-index: -2; transition: transform .6s var(--site-ease); }
.ws-tile-x:hover .ws-tile-bg { transform: scale(1.05); }
.ws-tile-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(0 0 0 / .05) 30%, rgb(0 0 0 / .68)); }
.ws-tile-x.has-media { color: var(--site-on-media); }
.ws-tile-top { display: flex; justify-content: space-between; align-items: flex-start; }
.ws-tile-x .ws-tile-icon { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in oklab, currentColor 18%, transparent); }
.ws-tile-x .ws-tile-icon svg { width: 20px; height: 20px; }
.ws-tile-x .ws-tile-arrow { position: static; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, currentColor 18%, transparent); }
.ws-tile-x .ws-tile-arrow svg { width: 14px; height: 14px; }
.ws-tile-x .ws-tile-text { display: grid; gap: 3px; }
.ws-tile-x .ws-tile-text b { font-family: var(--site-heading); font-size: calc(1.15rem * var(--b-scale, 1)); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; }
.ws-tile-x .ws-tile-text small { font-size: 12.5px; opacity: .78; font-weight: 600; }
.ws-tile-price { font-weight: 800 !important; opacity: 1 !important; }
.ws-s-surface-solid .ws-tile-x, .ws-s-surface-none .ws-tile-x, .ws-s-surface-outline .ws-tile-x, .ws-s-surface-glass .ws-tile-x, .ws-s-surface-soft .ws-tile-x { color: var(--b-fg, var(--site-text)); }
.ws-s-surface-soft .ws-tile-x .ws-tile-icon, .ws-s-surface-solid .ws-tile-x .ws-tile-icon { background: color-mix(in oklab, var(--site-accent) 16%, transparent); color: var(--site-accent); }

/* Mixed-language content: each paragraph takes its direction from its own first strong letter, so English text on an
   Arabic page (or the reverse) keeps its punctuation at the right end. */
.ws-site :where(p, h1, h2, h3, h4, h5, h6, li, blockquote, figcaption, dd, dt, td, th, summary, label, small) { unicode-bidi: plaintext; }

/* Rich text from the builder's editor (Batch 1 · item 3): the alignment and size classes RichText keeps, on
   paragraphs, list items and quotes. The builder canvas and its editor use these same rules. */
.ws-site :is(p, li, blockquote).rt-align-start { text-align: start; }
.ws-site :is(p, li, blockquote).rt-align-center { text-align: center; }
.ws-site :is(p, li, blockquote).rt-align-end { text-align: end; }
.ws-site :is(p, li, blockquote).rt-align-justify { text-align: justify; hyphens: auto; }
.ws-site :is(p, li, blockquote).rt-size-sm { font-size: .875em; }
.ws-site :is(p, li, blockquote).rt-size-lg { font-size: 1.2em; line-height: 1.45; }
.ws-site :is(p, li, blockquote).rt-size-xl { font-size: 1.5em; line-height: 1.3; letter-spacing: -0.01em; }
.ws-text blockquote { margin: 0 0 .7em; padding-inline-start: .9em; border-inline-start: 3px solid color-mix(in oklab, var(--site-accent) 60%, transparent); font-style: italic; }

/* css/site/modules/forms.css */
/* Weesify Forms: hosted, embedded and in the builder canvas (ADR-0016). Split out of site.css (ADR-0068 §9); module pages load it through the site.css bundle. */
/* ---- Weesify Forms (hosted, embedded, builder canvas) ---- */
.wf { display: grid; gap: 18px; text-align: start; }
.wf-head { display: grid; gap: 8px; }
.wf-title { font-family: var(--site-heading); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); line-height: 1.08; letter-spacing: -0.03em; color: var(--site-text); margin: 0; }
.wf-intro { color: var(--site-muted); font-size: 15px; line-height: 1.55; margin: 0; white-space: pre-line; }
.wf-progress { height: 6px; border-radius: 999px; background: color-mix(in oklab, var(--site-text) 10%, transparent); overflow: hidden; }
.wf-progress span { display: block; height: 100%; border-radius: inherit; background: var(--site-accent); transition: width .35s cubic-bezier(.2,.8,.2,1); }
.wf-stepcount { margin: -8px 0 0; font-size: 12px; font-weight: 600; color: var(--site-muted); letter-spacing: .02em; }
.wf:not(.wf-js) .wf-stepcount, .wf:not(.wf-js) .wf-progress { display: none; }
.wf-step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; }
.wf-step[hidden] { display: none; }
.wf-step-title { font-family: var(--site-heading); font-size: 1.2rem; font-weight: 700; color: var(--site-text); padding: 0; margin-bottom: 4px; }
.wf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.wf-field { grid-column: 1 / -1; display: grid; gap: 6px; min-width: 0; position: relative; }
.wf-field.wf-w-half { grid-column: span 1; }
@media (max-width: 520px) { .wf-field.wf-w-half { grid-column: 1 / -1; } }
/* A form in a narrow place on a wide screen (a join or checkout sheet, a column) stacks its half-width fields too. */
.wf-grid { container-type: inline-size; }
@container (max-width: 400px) { .wf-field.wf-w-half { grid-column: 1 / -1; } }
.wf-field[hidden] { display: none; }
.wf-label { font-weight: 600; font-size: 14px; color: var(--site-text); }
.wf-req { font-style: normal; color: var(--site-accent); margin-inline-start: 3px; }
.wf-help { font-size: 12.5px; color: var(--site-muted); margin: -2px 0 2px; line-height: 1.45; }
.wf-input { box-sizing: border-box; width: 100%; height: 48px; padding: 0 14px; border-radius: calc(var(--site-radius) - 4px); border: 1px solid color-mix(in oklab, var(--site-text) 16%, transparent); background: color-mix(in oklab, var(--site-surface) 85%, white); color: #0E1A15; font: inherit; font-size: 15px; transition: border-color .15s, box-shadow .15s; }
.ws-dark .wf-input { background: rgb(255 255 255 / .06); color: var(--site-text); border-color: rgb(255 255 255 / .16); }
.wf-input::placeholder { color: color-mix(in oklab, var(--site-muted) 80%, transparent); }
.wf-input:focus { outline: none; border-color: var(--site-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 22%, transparent); }
.wf-textarea { height: auto; min-height: 120px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.wf-select-wrap { position: relative; }
.wf-select-wrap::after { content: ""; position: absolute; inset-inline-end: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--site-muted); border-bottom: 2px solid var(--site-muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.wf-select { appearance: none; padding-inline-end: 40px; }
.wf-choices { display: grid; gap: 8px; }
.wf-choice { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px; border-radius: calc(var(--site-radius) - 4px); border: 1px solid color-mix(in oklab, var(--site-text) 14%, transparent); background: color-mix(in oklab, var(--site-surface) 90%, transparent); cursor: pointer; font-size: 15px; color: var(--site-text); transition: border-color .15s, background .15s; }
.wf-choice input { position: absolute; opacity: 0; pointer-events: none; }
.wf-choice-mark { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid color-mix(in oklab, var(--site-text) 30%, transparent); display: grid; place-items: center; transition: all .15s; }
.wf-t-checkboxes .wf-choice-mark { border-radius: 6px; }
.wf-choice:has(input:checked) { border-color: var(--site-accent); background: color-mix(in oklab, var(--site-accent) 10%, var(--site-surface)); }
.wf-choice input:checked + .wf-choice-mark { border-color: var(--site-accent); background: var(--site-accent); box-shadow: inset 0 0 0 3px var(--site-surface); }
.wf-t-checkboxes .wf-choice input:checked + .wf-choice-mark { box-shadow: none; background: var(--site-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.wf-choice:has(input:focus-visible) { box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 22%, transparent); }
.wf-rating { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.wf-rating input { position: absolute; opacity: 0; pointer-events: none; }
.wf-rating label { cursor: pointer; color: color-mix(in oklab, var(--site-text) 22%, transparent); transition: color .12s, transform .12s; }
.wf-rating label svg { width: 34px; height: 34px; fill: currentColor; }
.wf-rating label:hover, .wf-rating label:hover ~ label, .wf-rating input:checked ~ label { color: #F5B82E; }
.wf-rating label:hover { transform: scale(1.08); }
.wf-rating input:focus-visible + label { outline: 3px solid color-mix(in oklab, var(--site-accent) 45%, transparent); border-radius: 8px; }
.wf-consent { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: calc(var(--site-radius) - 4px); background: color-mix(in oklab, var(--site-accent) 7%, transparent); font-size: 13.5px; line-height: 1.45; color: var(--site-text); cursor: pointer; }
.wf-consent input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--site-accent); flex: none; }
.wf-heading { font-family: var(--site-heading); font-size: 1.25rem; margin: 8px 0 0; color: var(--site-text); letter-spacing: -0.02em; }
.wf-paragraph { margin: 0; color: var(--site-muted); line-height: 1.55; white-space: pre-line; }
.wf-break { display: flex; align-items: center; gap: 10px; color: var(--site-muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.wf-break::before, .wf-break::after { content: ""; flex: 1; height: 1px; background: color-mix(in oklab, var(--site-text) 14%, transparent); }
.wf-break span { display: inline-flex; align-items: center; gap: 6px; }
.wf-break svg { width: 14px; height: 14px; }
.wf-field.has-error .wf-input, .wf-field.has-error .wf-choice { border-color: #E5484D; }
.wf-error { margin: 0; font-size: 12.5px; color: #E5484D; font-weight: 600; }
.wf-alert { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgb(229 72 77 / .1); color: #C4333A; font-size: 14px; font-weight: 600; }
.wf-alert svg { width: 18px; height: 18px; flex: none; }
.wf-nav { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 4px; }
.wf-nav .ws-submit { min-width: 140px; height: 50px; gap: 8px; }
.wf-nav .ws-submit svg { width: 16px; height: 16px; }
.wf-submit.is-sending { opacity: .7; }
.wf-back { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: auto; background: none; border: 0; font: inherit; font-weight: 600; color: var(--site-muted); cursor: pointer; padding: 10px 4px; }
.wf-back svg { width: 16px; height: 16px; }
.wf-back[hidden], .wf-next[hidden], .wf-submit[hidden] { display: none; }
@media (max-width: 420px) { .wf-nav .ws-submit { flex: 1; } }
.wf-logic-badge { position: absolute; top: -9px; inset-inline-end: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: #fff; background: #7C5CFF; z-index: 2; }
.wf-logic-badge svg { width: 11px; height: 11px; }

/* Hosted form page */
.wf-page { min-height: 100dvh; background: var(--site-bg); color: var(--site-text); font-family: var(--site-font); }
.wf-page-cover { height: clamp(120px, 22vw, 200px); background: var(--site-cover); }
.wf-page-inner { width: min(640px, 100% - 28px); margin: calc(-1 * clamp(60px, 10vw, 100px)) auto 40px; }
.wf-page-card { padding: clamp(22px, 5vw, 40px); border-radius: calc(var(--site-radius) + 10px); background: var(--site-surface); border: 1px solid color-mix(in oklab, var(--site-text) 8%, transparent); box-shadow: 0 30px 80px -40px rgb(0 0 0 / .45); backdrop-filter: blur(12px); }
.wf-page-by { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; font-size: 13px; font-weight: 600; color: var(--site-muted); }
.wf-page-by i { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-style: normal; color: var(--site-accent-text); background: var(--site-accent); font-weight: 800; }
.wf-done { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 20px 0; }
.wf-done-icon { width: 72px; height: 72px; border-radius: 24px; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 20px 40px -20px var(--site-accent); animation: wf-pop .5s cubic-bezier(.2,1.4,.4,1); }
.wf-done-icon svg { width: 34px; height: 34px; }
.wf-done h1 { font-family: var(--site-heading); font-size: 1.8rem; margin: 6px 0 0; letter-spacing: -0.03em; }
.wf-done p { color: var(--site-muted); margin: 0; max-width: 44ch; line-height: 1.55; white-space: pre-line; }
.wf-done .wf-note { margin-top: 8px; padding: 10px 14px; border-radius: 12px; background: color-mix(in oklab, var(--site-accent) 10%, transparent); color: var(--site-text); font-size: 14px; font-weight: 600; }
@keyframes wf-pop { from { transform: scale(.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wf-done-icon { animation: none; } .wf-progress span { transition: none; } }
.ws-block-form .ws-card { text-align: start; }

/* R4C: rich form blocks */
.wf-parts { display: grid; gap: 10px; }
.wf-parts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wf-parts-2 .wf-span-2 { grid-column: 1 / -1; }
@container (max-width: 400px) { .wf-parts-2 { grid-template-columns: 1fr; } }
.wf-phone { grid-template-columns: minmax(104px, 128px) minmax(0, 1fr); }
.wf-sub { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--site-muted); }
.wf-affix { display: flex; align-items: stretch; }
.wf-affix .wf-input { border-start-start-radius: 0; border-end-start-radius: 0; }
.wf-affix.is-end .wf-input { border-radius: calc(var(--site-radius) - 4px) 0 0 calc(var(--site-radius) - 4px); }
.wf-affix-tag { display: grid; place-items: center; padding-inline: 14px; font-weight: 700; font-size: 13px; color: var(--site-muted); background: color-mix(in oklab, var(--site-text) 6%, transparent); border: 1px solid color-mix(in oklab, var(--site-text) 16%, transparent); border-inline-end: 0; border-radius: calc(var(--site-radius) - 4px) 0 0 calc(var(--site-radius) - 4px); }
.wf-affix.is-end .wf-affix-tag { border-inline-end: 1px solid color-mix(in oklab, var(--site-text) 16%, transparent); border-inline-start: 0; border-radius: 0 calc(var(--site-radius) - 4px) calc(var(--site-radius) - 4px) 0; }
.wf-scale { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 6px; }
.wf-scale-11 { --n: 11; } .wf-scale-10 { --n: 10; } .wf-scale-7 { --n: 7; } .wf-scale-5 { --n: 5; } .wf-scale-3 { --n: 3; }
@media (max-width: 520px) { .wf-scale-11, .wf-scale-10 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.wf-scale-pt { position: relative; }
.wf-scale-pt input, .wf-pic input, .wf-matrix input { position: absolute; opacity: 0; pointer-events: none; }
.wf-scale-pt span { display: grid; place-items: center; min-height: 44px; border-radius: calc(var(--site-radius) - 6px); border: 1px solid color-mix(in oklab, var(--site-text) 16%, transparent); font-weight: 700; cursor: pointer; transition: background .12s, color .12s; }
.wf-scale-pt input:checked + span { background: var(--site-accent); color: var(--site-accent-text); border-color: var(--site-accent); }
.wf-scale-pt input:focus-visible + span, .wf-pic input:focus-visible + .wf-pic-img { box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 22%, transparent); }
.wf-scale-ends { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--site-muted); }
.wf-slider { display: flex; align-items: center; gap: 12px; }
.wf-slider input { flex: 1; accent-color: var(--site-accent); min-height: 44px; }
.wf-slider output { min-width: 64px; text-align: center; font-weight: 700; padding: 8px 10px; border-radius: 10px; background: color-mix(in oklab, var(--site-accent) 12%, transparent); }
.wf-yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wf-choice .wf-other-input { position: static; opacity: 1; pointer-events: auto; height: 38px; flex: 1; min-width: 0; }
.wf-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.wf-pic { position: relative; display: grid; gap: 6px; cursor: pointer; }
.wf-pic-img { aspect-ratio: 4 / 3; border-radius: calc(var(--site-radius) - 4px); overflow: hidden; border: 2px solid color-mix(in oklab, var(--site-text) 12%, transparent); display: grid; place-items: center; background: color-mix(in oklab, var(--site-text) 5%, transparent); }
.wf-pic-img img { width: 100%; height: 100%; object-fit: cover; }
.wf-pic input:checked + .wf-pic-img { border-color: var(--site-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--site-accent) 25%, transparent); }
.wf-pic-label { font-weight: 600; font-size: 14px; text-align: center; }
.wf-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wf-rank li { display: grid; grid-template-columns: 84px 1fr; gap: 10px; align-items: center; }
.wf-matrix-wrap { overflow-x: auto; }
.wf-matrix { width: 100%; border-collapse: collapse; font-size: 13px; }
.wf-matrix th, .wf-matrix td { padding: 8px 6px; text-align: center; border-bottom: 1px solid color-mix(in oklab, var(--site-text) 8%, transparent); }
.wf-matrix th[scope="row"] { text-align: start; font-weight: 600; }
.wf-matrix thead th { font-weight: 600; color: var(--site-muted); font-size: 12px; }
.wf-matrix label { display: inline-grid; place-items: center; width: 44px; height: 44px; cursor: pointer; position: relative; }
.wf-matrix label::before { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 2px solid color-mix(in oklab, var(--site-text) 30%, transparent); }
.wf-matrix label:has(input:checked)::before { border-color: var(--site-accent); background: var(--site-accent); box-shadow: inset 0 0 0 3px var(--site-surface); }
.wf-matrix label:has(input:focus-visible)::before { box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 22%, transparent); }
.wf-sign { position: relative; border: 1px dashed color-mix(in oklab, var(--site-text) 25%, transparent); border-radius: calc(var(--site-radius) - 4px); background: color-mix(in oklab, var(--site-text) 3%, var(--site-surface)); }
.wf-sign canvas { display: block; width: 100%; height: 160px; touch-action: none; cursor: crosshair; }
.wf-sign-clear { position: absolute; top: 6px; inset-inline-end: 6px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 999px; background: color-mix(in oklab, var(--site-text) 8%, transparent); color: var(--site-text); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.wf-sign-hint { position: absolute; bottom: 8px; inset-inline-start: 12px; font-size: 11px; color: var(--site-muted); pointer-events: none; }
.wf-divider { border: 0; height: 1px; margin: 4px 0; background: color-mix(in oklab, var(--site-text) 14%, transparent); }
.wf-spacer-sm { height: 8px; } .wf-spacer-md { height: 24px; } .wf-spacer-lg { height: 48px; }
.wf-rich { color: var(--site-text); line-height: 1.6; }
.wf-rich > :first-child { margin-top: 0; } .wf-rich > :last-child { margin-bottom: 0; }
.wf-rich a { color: var(--site-accent); }
.wf-image { margin: 0; display: grid; gap: 6px; }
.wf-image img { width: 100%; height: auto; border-radius: calc(var(--site-radius) - 4px); display: block; }
.wf-image figcaption { font-size: 12.5px; color: var(--site-muted); }
.wf-video { aspect-ratio: 16 / 9; border-radius: calc(var(--site-radius) - 4px); overflow: hidden; background: #000; }
.wf-video iframe { width: 100%; height: 100%; border: 0; }
.wf-media-empty { display: flex; align-items: center; gap: 8px; padding: 14px; border-radius: 12px; border: 1px dashed color-mix(in oklab, var(--site-text) 20%, transparent); color: var(--site-muted); font-size: 13px; }
.wf-media-empty svg { width: 18px; height: 18px; flex: none; }
.wf-video-ph { aspect-ratio: 16 / 9; justify-content: center; }
.wf-appointment { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px; border-radius: calc(var(--site-radius) - 4px); background: color-mix(in oklab, var(--site-accent) 8%, transparent); }
.wf-appointment p { margin: 0; font-weight: 600; }
.wf-appt-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; text-decoration: none; }
.wf-appt-btn svg { width: 16px; height: 16px; }
.wf-consent a { color: var(--site-accent); margin-inline-start: 4px; }

/* R5A: dropdown "Other" reveals its text box (CSS only, CSP-safe). */
.wf-select-other { display: none; margin-block-start: 8px; }
.wf-select-wrap:has(option[value="__other"]:checked) + .wf-select-other { display: block; }

/* R5E: file upload block */
.wf-file { display: grid; gap: 6px; }
.wf-file-input { min-block-size: 44px; inline-size: 100%; padding: 10px 12px; border: 1px dashed color-mix(in oklab, var(--site-text) 25%, transparent); border-radius: calc(var(--site-radius) - 4px); background: color-mix(in oklab, var(--site-text) 3%, var(--site-surface)); color: var(--site-text); font: inherit; cursor: pointer; }
.wf-file-input:focus-visible { outline: 2px solid var(--site-accent, currentColor); outline-offset: 2px; }
.wf-file-input::file-selector-button { margin-inline-end: 12px; padding: 8px 14px; border: 0; border-radius: calc(var(--site-radius) - 6px); background: color-mix(in oklab, var(--site-text) 10%, transparent); color: inherit; font: inherit; cursor: pointer; }
.wf-file-hint { display: flex; align-items: center; gap: 6px; }
.wf-file-hint svg { inline-size: 14px; block-size: 14px; flex: none; }

/* css/site/modules/sheets.css */
/* Module actions: the trigger card and the sheet (ADR-0012). Split out of site.css (ADR-0068 §9); module pages load it through the site.css bundle. */
/* ---- Module actions: premium trigger card + sheet (forms today; store, bookings, courses next) ---- */
.ws-action-card { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: calc(var(--site-radius) + 4px); background: var(--site-surface); color: var(--site-text); border: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); box-shadow: 0 14px 34px -22px rgb(0 0 0 / .45); overflow: hidden; isolation: isolate; transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; text-decoration: none; }
.ws-action-card::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--site-accent) 22%, transparent), transparent 55%); }
.ws-action-card:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -24px rgb(0 0 0 / .5); }
.ws-action-card:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 60%, transparent); outline-offset: 2px; }
.ws-action-icon { width: 48px; height: 48px; flex: none; border-radius: 15px; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 10px 22px -12px var(--site-accent); }
.ws-action-icon svg { width: 22px; height: 22px; }
.ws-action-text { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: start; }
.ws-action-text b { font-family: var(--site-heading); font-size: 16px; letter-spacing: -0.01em; }
.ws-action-text small { color: var(--site-muted); font-size: 12.5px; font-weight: 500; }
.ws-action-go { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--site-text) 7%, transparent); transition: transform .2s; }
.ws-action-go svg { width: 16px; height: 16px; }
.ws-action-card:hover .ws-action-go { transform: translateX(calc(3px * var(--dir-sign, 1))); background: var(--site-accent); color: var(--site-accent-text); }

.ws-sheet { position: fixed; inset: 0; z-index: 100; display: grid; align-items: end; justify-items: center; }
.ws-sheet[hidden] { display: none; }
.ws-sheet-backdrop { position: absolute; inset: 0; background: rgb(8 10 9 / .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .28s ease; }
.ws-sheet-panel { position: relative; width: min(560px, 100%); max-height: min(92dvh, 900px); overflow-y: auto; overscroll-behavior: contain; background: var(--site-bg-base); background-image: var(--site-bg); color: var(--site-text); font-family: var(--site-font); border-radius: 28px 28px 0 0; box-shadow: 0 -30px 80px -30px rgb(0 0 0 / .6); transform: translateY(40px); opacity: 0; transition: transform .38s cubic-bezier(.2,.9,.25,1), opacity .25s ease; padding-bottom: env(safe-area-inset-bottom); }
.ws-sheet.is-open .ws-sheet-backdrop { opacity: 1; }
.ws-sheet.is-open .ws-sheet-panel { transform: none; opacity: 1; }
@media (min-width: 640px) { .ws-sheet { align-items: center; padding: 24px; } .ws-sheet-panel { border-radius: 28px; transform: translateY(16px) scale(.98); } }
.ws-sheet-grab { display: block; width: 44px; height: 5px; border-radius: 999px; margin: 10px auto 0; background: color-mix(in oklab, var(--site-text) 22%, transparent); }
@media (min-width: 640px) { .ws-sheet-grab { display: none; } }
.ws-sheet-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px 16px; background: linear-gradient(var(--site-bg-base) 70%, color-mix(in oklab, var(--site-bg-base) 0%, transparent)); }
.ws-sheet-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--site-cover); opacity: .9; }
.ws-sheet-icon { width: 46px; height: 46px; flex: none; border-radius: 15px; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 12px 24px -14px var(--site-accent); }
.ws-sheet-icon svg { width: 22px; height: 22px; }
.ws-sheet-titles { flex: 1; min-width: 0; }
.ws-sheet-titles h2 { margin: 2px 0 4px; font-family: var(--site-heading); font-size: 1.35rem; line-height: 1.15; letter-spacing: -0.025em; }
.ws-sheet-titles p { margin: 0; color: var(--site-muted); font-size: 14px; line-height: 1.5; white-space: pre-line; }
.ws-sheet-close { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; background: color-mix(in oklab, var(--site-text) 8%, transparent); color: var(--site-text); cursor: pointer; }
.ws-sheet-close:hover { background: color-mix(in oklab, var(--site-text) 14%, transparent); }
.ws-sheet-close svg { width: 18px; height: 18px; }
.ws-sheet-body { padding: 4px 20px 24px; }
.ws-sheet-body .wf { background: var(--site-surface); padding: 18px; border-radius: calc(var(--site-radius) + 4px); border: 1px solid color-mix(in oklab, var(--site-text) 8%, transparent); }
html.ws-sheet-lock, html.ws-sheet-lock body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .ws-sheet-panel, .ws-sheet-backdrop { transition: none; } }
.ws-action-thumb { width: 56px; height: 56px; flex: none; border-radius: 14px; object-fit: cover; box-shadow: 0 10px 22px -14px rgb(0 0 0 / .5); }
.ws-action-meta { flex: none; padding: 8px 12px; border-radius: 999px; background: var(--site-accent); color: var(--site-accent-text); font-weight: 800; font-size: 13.5px; box-shadow: 0 10px 20px -12px var(--site-accent); }

/* css/site/modules/commerce.css */
/* Shop: product details, checkout and the pay page (ADR-0014). Split out of site.css (ADR-0068 §9); module pages load it through the site.css bundle. */
/* ---- Shop: product details + checkout ---- */
.shop { display: grid; gap: 14px; text-align: start; }
.shop-img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: calc(var(--site-radius) + 2px); box-shadow: 0 20px 44px -28px rgb(0 0 0 / .55); }
.shop-name { margin: 4px 0 0; font-family: var(--site-heading); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); line-height: 1.08; letter-spacing: -0.03em; color: var(--site-text); }
.shop-tagline { margin: -6px 0 0; color: var(--site-muted); font-size: 15px; }
.shop-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0; }
.shop-price b { font-family: var(--site-heading); font-size: 1.7rem; letter-spacing: -0.03em; color: var(--site-text); }
.shop-price s { color: var(--site-muted); font-size: 15px; }
.shop-save { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; background: color-mix(in oklab, var(--site-accent) 16%, transparent); color: var(--site-text); }
.shop-desc { color: var(--site-text); opacity: .86; line-height: 1.6; white-space: pre-line; font-size: 15px; }
.shop-includes { list-style: none; margin: 0; padding: 14px; display: grid; gap: 9px; border-radius: calc(var(--site-radius) - 2px); background: color-mix(in oklab, var(--site-accent) 7%, transparent); }
.shop-includes li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; font-weight: 600; color: var(--site-text); }
.shop-includes svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--site-accent); stroke-width: 3; }
.shop-form { display: grid; gap: 14px; padding-top: 6px; border-top: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); }
.shop-buy { width: 100%; height: 54px; gap: 10px; font-size: 16px; }
.shop-buy svg { width: 18px; height: 18px; }
.shop-trust { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 12.5px; color: var(--site-muted); text-align: center; }
.shop-trust svg { width: 14px; height: 14px; }
.shop-delivery-msg { margin: 6px 0 0; padding: 14px; border-radius: 14px; background: color-mix(in oklab, var(--site-accent) 8%, transparent); white-space: pre-line; line-height: 1.55; }
.shop-dl-title { margin: 18px 0 8px; font-family: var(--site-heading); font-size: 1.1rem; }
.shop-dl { display: grid; gap: 10px; }

/* Checkout in the sheet (ADR-0014): the details form gives way to Weesify's own pay page in a frame. */
.shop-payframe { display: block; width: 100%; min-height: 420px; border: 0; border-radius: calc(var(--site-radius) + 2px); background: transparent; }
.shop-payframe[hidden] { display: none; } /* B4 · Q4: an inline checkout keeps its unused pay frame out of the layout */
.shop.is-paying > :not(.shop-payframe) { display: none; }
body.is-framed { background: transparent; }
body.is-framed .wf-page { min-height: 0; padding: 0; background: transparent; }
body.is-framed .wf-page-inner { padding: 0; }
body.is-framed .wf-page-card { box-shadow: none; padding: 4px 2px 12px; background: transparent; border: 0; }

/* Weesify pay page */
.pay { display: grid; gap: 16px; }
.pay-summary { display: grid; gap: 4px; padding: 16px 18px; border-radius: calc(var(--site-radius) + 2px); background: color-mix(in oklab, var(--site-accent) 7%, var(--site-card)); border: 1px solid color-mix(in oklab, var(--site-accent) 18%, transparent); }
.pay-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--site-text); }
.pay-line b { font-family: var(--site-heading); font-size: 1.6rem; letter-spacing: -0.03em; white-space: nowrap; }
.pay-line.is-muted { color: var(--site-muted); font-size: 13px; }
.pay-test { display: flex; gap: 8px; align-items: center; margin: 0; padding: 9px 12px; border-radius: 12px; background: #FFF6DB; color: #7A5A00; font-size: 13px; font-weight: 600; }
.pay-test svg, .pay-alert svg { width: 16px; height: 16px; flex: none; }
.pay-alert { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #FDECEC; color: #9B1C1C; font-size: 14px; }
.pay-alert[hidden] { display: none; }
.pay-form { display: grid; gap: 14px; }
.pay-element { min-height: 140px; }
.pay-card { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.pay-hint { margin: -4px 0 0; text-align: center; color: var(--site-muted); font-size: 12.5px; }
.shop-buy.is-busy { opacity: .7; pointer-events: none; }
/* B4 · Q4: the gift card's "who is it for?" part of the checkout. */
.gc-for { margin: 0; padding: 14px; min-width: 0; border: 1px dashed color-mix(in oklab, var(--site-accent) 45%, transparent); border-radius: calc(var(--site-radius) - 2px);
  background: color-mix(in oklab, var(--site-accent) 6%, transparent); }
.gc-for > legend { display: inline-flex; align-items: center; gap: 6px; padding-inline: 6px; }
.gc-for > legend svg { width: 16px; height: 16px; color: var(--site-accent); }
.gc-for > .wf-help { margin: 0 0 8px; }
/* R17B · ways to pay + PayPal / Apple Pay / Google Pay */
.pay-methods { display: grid; gap: 10px; margin-block: 4px 2px; }
.pay-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pay-switch-opt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 48px; padding-inline: 12px; border-radius: 12px; border: 1.5px solid var(--site-line, rgb(0 0 0 / .12)); background: transparent; color: inherit; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }
.pay-switch-opt svg { inline-size: 18px; block-size: 18px; }
.pay-switch-opt[aria-pressed="true"] { border-color: var(--site-accent, #10b981); box-shadow: inset 0 0 0 1px var(--site-accent, #10b981); }
.pay-switch-opt:focus-visible { outline: 2px solid var(--site-accent, #10b981); outline-offset: 2px; }
.pay-pp { display: inline-grid; place-items: center; inline-size: 20px; block-size: 20px; border-radius: 6px; background: #003087; color: #fff; font-weight: 800; font-style: italic; font-size: 12px; }
.pay-ways-label { margin: 0; font-size: 12px; color: var(--site-muted); }
.pay-ways { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pay-way { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: var(--site-soft, rgb(0 0 0 / .05)); font-size: 12.5px; }
.pay-way svg { inline-size: 14px; block-size: 14px; }
.pay-express:empty { display: none; }
.pay-express { margin-block-end: 6px; }
.pay-paypal { min-block-size: 48px; }

/* css/site/modules/reporting.css */
/* Reporting a page (ADR-0017). Split out of site.css (ADR-0068 §9); module pages load it through the site.css bundle. */
/* Reporting (ADR-0017) */
.ws-report-link { display: block; width: max-content; margin: 10px auto 0; font-size: 12px; opacity: .55; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ws-report-link:hover { opacity: .9; }
.ws-report { display: grid; gap: 14px; margin-top: 22px; text-align: start; }
.ws-field { display: grid; gap: 6px; font-weight: 600; font-size: 14px; }
.ws-field small { font-weight: 500; opacity: .7; }
.ws-field textarea.ws-input { height: auto; padding: 12px 14px; resize: vertical; }
.ws-field select.ws-input { appearance: auto; }
.ws-error { color: #D93A3A; font-weight: 600; opacity: 1 !important; }
.ws-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* css/site/modules/bookings.css */
/* Bookings (ADR-0022). Split out of site.css (ADR-0068 §9); module pages load it through the site.css bundle. */
/* Bookings (ADR-0022): day chips, time grid, booking card ------------------------------------------------------- */
.bk { display: grid; gap: 12px; margin: 4px 0 18px; }
.bk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--site-muted); }
.bk-meta svg { width: 15px; height: 15px; }
.bk-meta span { opacity: .5; }
.bk-days { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.bk-day { flex: none; scroll-snap-align: start; cursor: pointer; }
.bk-day input { position: absolute; opacity: 0; pointer-events: none; }
.bk-day span { display: grid; justify-items: center; gap: 0; width: 60px; padding: 9px 0; border-radius: calc(var(--site-radius) + 2px); border: 1.5px solid color-mix(in oklab, var(--site-text) 14%, transparent); background: var(--site-surface); color: var(--site-text); transition: border-color .15s, background .15s, transform .15s; }
.bk-day span b { font-size: 20px; line-height: 1.15; font-weight: 800; }
.bk-day span small { font-size: 11px; color: var(--site-muted); font-weight: 600; }
.bk-day:hover span { transform: translateY(-1px); }
.bk-day input:checked + span { background: var(--site-accent); border-color: var(--site-accent); color: var(--site-accent-text); }
.bk-day input:checked + span small { color: inherit; opacity: .85; }
.bk-day input:focus-visible + span { outline: 3px solid color-mix(in oklab, var(--site-accent) 45%, transparent); outline-offset: 2px; }
.bk-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.bk-times-head { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; font-weight: 700; color: var(--site-heading); }
@supports selector(:has(a)) { .bk-times-head { display: none; } }
.bk-time { cursor: pointer; }
.bk-time input { position: absolute; opacity: 0; pointer-events: none; }
.bk-time span { display: grid; justify-items: center; padding: 11px 6px; border-radius: calc(var(--site-radius) - 2px); border: 1.5px solid color-mix(in oklab, var(--site-text) 14%, transparent); background: var(--site-surface); font-weight: 700; font-size: 15px; color: var(--site-text); transition: border-color .15s, background .15s; }
.bk-time span small { font-size: 11px; font-weight: 600; color: var(--site-muted); }
.bk-time:hover span { border-color: var(--site-accent); }
.bk-time input:checked + span { background: var(--site-accent); border-color: var(--site-accent); color: var(--site-accent-text); }
.bk-time input:checked + span small { color: inherit; }
.bk-time input:focus-visible + span { outline: 3px solid color-mix(in oklab, var(--site-accent) 45%, transparent); outline-offset: 2px; }
.bk.has-error .bk-times { outline: 2px solid #D93A3A; outline-offset: 6px; border-radius: 8px; }
.bk-card { display: grid; gap: 8px; margin: 16px 0; padding: 16px 18px; border-radius: calc(var(--site-radius) + 4px); border: 1px solid color-mix(in oklab, var(--site-text) 12%, transparent); background: var(--site-surface); color: var(--site-text); font-size: 15px; }
.bk-card b { font-size: 18px; color: var(--site-heading); }
.bk-card span { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bk-card svg { width: 16px; height: 16px; color: var(--site-muted); flex: none; }
.bk-card small { color: var(--site-muted); }
.bk-card a { color: var(--site-accent); font-weight: 700; }
.bk-cancel { margin-top: 14px; }
.bk-cancel summary { cursor: pointer; font-size: 14px; color: var(--site-muted); font-weight: 600; }
.bk-cancel details[open] summary { margin-bottom: 10px; }

/* css/site/modules/courses.css */
/* Courses (ADR-0023, ADR-0041). Split out of site.css (ADR-0068 §9); module pages load it through the site.css bundle. */
/* Courses (ADR-0023): curriculum on the sales page, the student area, certificates ------------------------------- */
.cs-curr { margin: 6px 0 20px; padding: 16px; border-radius: calc(var(--site-radius) + 4px); border: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); background: color-mix(in oklab, var(--site-surface) 80%, transparent); }
.cs-curr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 8px; }
.cs-curr-head b { color: var(--site-heading); font-size: 16px; } .cs-curr-head span { font-size: 13px; color: var(--site-muted); }
.cs-curr-section { margin: 12px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--site-muted); }
.cs-curr-list { list-style: none; margin: 0; padding: 0; display: grid; }
.cs-curr-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid color-mix(in oklab, var(--site-text) 8%, transparent); font-size: 14.5px; color: var(--site-text); }
.cs-curr-list li:first-child { border-top: 0; }
.cs-curr-icon svg { width: 16px; height: 16px; color: var(--site-muted); display: block; }
.cs-curr-title { flex: 1; min-width: 0; }
.cs-curr-list small { color: var(--site-muted); font-size: 12px; }
.cs-curr-preview { font-size: 12.5px; font-weight: 700; color: var(--site-accent); text-decoration: none; padding: 3px 9px; border-radius: 99px; background: color-mix(in oklab, var(--site-accent) 12%, transparent); }
.cs-curr-by { margin: 10px 0 0; font-size: 13px; color: var(--site-muted); }
.cs-access { margin-top: 12px; font-size: 13.5px; }
.cs-access summary { cursor: pointer; color: var(--site-muted); font-weight: 600; }
.cs-access-form { display: grid; gap: 8px; margin-top: 10px; }

.lr { min-height: 100dvh; background: var(--site-bg-base); color: var(--site-text); font-family: var(--site-font); }
.lr-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 12px clamp(14px, 3vw, 28px); background: color-mix(in oklab, var(--site-surface) 92%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); }
.lr-bar-title { display: grid; flex: 1; min-width: 0; }
.lr-bar-title small { font-size: 11.5px; color: var(--site-muted); font-weight: 600; }
.lr-bar-title b { color: var(--site-heading); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-progress { width: min(200px, 30vw); height: 8px; border-radius: 99px; background: color-mix(in oklab, var(--site-text) 10%, transparent); overflow: hidden; }
.lr-progress span { display: block; height: 100%; border-radius: inherit; background: var(--site-accent); transition: width .5s; }
.lr-pct { font-weight: 800; font-size: 13px; color: var(--site-heading); min-width: 38px; text-align: end; }
.lr-cta { font-weight: 800; font-size: 14px; padding: 9px 16px; border-radius: 99px; background: var(--site-accent); color: var(--site-accent-text); text-decoration: none; }
.lr-body { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1180px; margin: 0 auto; gap: 24px; padding: 20px clamp(14px, 3vw, 28px) 60px; }
@media (min-width: 960px) { .lr-body { grid-template-columns: 300px minmax(0, 1fr); } .lr-nav { position: sticky; top: 76px; align-self: start; max-height: calc(100dvh - 96px); overflow: auto; } }
.lr-nav-toggle { border-radius: calc(var(--site-radius) + 4px); background: var(--site-surface); border: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); padding: 6px; }
.lr-nav-toggle summary { display: flex; justify-content: space-between; padding: 10px 12px; font-weight: 800; cursor: pointer; color: var(--site-heading); list-style: none; }
.lr-nav-toggle summary span { color: var(--site-muted); font-weight: 600; font-size: 13px; }
.lr-nav-section { margin: 10px 12px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--site-muted); }
.lr-nav ol { list-style: none; margin: 0; padding: 0; }
.lr-nav li a, .lr-nav-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: 12px; color: var(--site-text); text-decoration: none; font-size: 14px; }
.lr-nav li a:hover { background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.lr-nav li.is-current a { background: color-mix(in oklab, var(--site-accent) 14%, transparent); font-weight: 700; }
.lr-nav li i { flex: none; width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center; border: 1.5px solid color-mix(in oklab, var(--site-text) 20%, transparent); }
.lr-nav li i svg { width: 12px; height: 12px; }
.lr-nav li.is-done i { background: var(--site-accent); border-color: var(--site-accent); color: var(--site-accent-text); }
.lr-nav li.is-locked { opacity: .55; }
.lr-nav li small { display: block; font-size: 11.5px; color: var(--site-muted); }
.lr-main { min-width: 0; }
.lr-kicker { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--site-accent); }
.lr-title { margin: 0 0 16px; color: var(--site-heading); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.3rem); letter-spacing: -0.03em; line-height: 1.12; }
.lr-video { position: relative; aspect-ratio: 16 / 9; border-radius: calc(var(--site-radius) + 6px); overflow: hidden; background: #000; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .5); margin-bottom: 22px; }
.lr-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lr-text { font-size: 16.5px; line-height: 1.7; max-width: 70ch; }
.lr-text h2 { font-size: 1.3rem; color: var(--site-heading); margin: 24px 0 8px; }
.lr-text a { color: var(--site-accent); font-weight: 600; }
.lr-text ul { padding-inline-start: 20px; }
.lr-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 32px; padding-top: 20px; border-top: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); flex-wrap: wrap; }
.lr-btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--site-text); text-decoration: none; padding: 12px 14px; border-radius: 12px; }
.lr-btn svg, .lr-done svg { width: 16px; height: 16px; }
.lr-done { display: inline-flex; align-items: center; gap: 8px; width: auto; padding: 0 22px; }
.lr-empty, .lr-finished { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 40px 20px; border-radius: calc(var(--site-radius) + 6px); background: var(--site-surface); border: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); margin-bottom: 20px; }
.lr-empty svg { width: 28px; height: 28px; color: var(--site-muted); }
.lr-empty h1, .lr-finished h1 { margin: 6px 0 0; color: var(--site-heading); font-size: 1.5rem; }
.lr-finished span svg { width: 44px; height: 44px; color: var(--site-accent); }
.lr-finished .ws-submit { width: auto; padding: 0 24px; margin-top: 10px; display: inline-flex; align-items: center; text-decoration: none; }
.lr-preview-note { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--site-muted); margin: 0 0 12px; }
.lr-preview-note svg { width: 15px; height: 15px; }
.lr-preview-note a { color: var(--site-accent); font-weight: 700; }

.cert-page { margin: 0; min-height: 100dvh; display: grid; place-items: center; background: radial-gradient(circle at 20% 10%, #EDE7FF, transparent 50%), radial-gradient(circle at 90% 90%, #D8F7EA, transparent 50%), #F7F8F5; font-family: Georgia, 'Times New Roman', serif; color: #14201A; padding: 20px; }
.cert { width: min(900px, 100%); aspect-ratio: 1.414; max-height: 90dvh; background: #fff; border-radius: 14px; box-shadow: 0 50px 100px -40px rgb(20 32 26 / .35); padding: clamp(14px, 2.5vw, 26px); }
.cert-inner { height: 100%; border: 2px solid #D9CFB0; outline: 1px solid #D9CFB0; outline-offset: -8px; border-radius: 8px; display: grid; align-content: center; justify-items: center; text-align: center; padding: 4%; gap: 4px; }
.cert-org { margin: 0; font-family: -apple-system, 'Segoe UI', sans-serif; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: clamp(10px, 1.3vw, 13px); color: #7C5CFF; }
.cert-kicker { margin: 6px 0 14px; font-size: clamp(18px, 3vw, 30px); letter-spacing: .02em; }
.cert-small { margin: 0; font-style: italic; color: #56655E; font-size: clamp(11px, 1.4vw, 15px); }
.cert-name { margin: 6px 0; font-size: clamp(24px, 5vw, 52px); font-weight: 400; border-bottom: 1px solid #D9CFB0; padding: 0 5% 6px; }
.cert-course { margin: 6px 0 16px; font-size: clamp(16px, 2.6vw, 26px); font-weight: 700; }
.cert-meta { display: flex; gap: clamp(14px, 4vw, 48px); flex-wrap: wrap; justify-content: center; font-family: -apple-system, 'Segoe UI', sans-serif; }
.cert-meta span { display: grid; } .cert-meta small { font-size: 11px; color: #8A9690; text-transform: uppercase; letter-spacing: .08em; } .cert-meta b { font-size: clamp(12px, 1.5vw, 15px); }
.cert-void { color: #C0392B; font-weight: 700; font-family: sans-serif; }
.cert-foot { margin: 18px 0 0; font-family: sans-serif; font-size: 11px; color: #8A9690; }
.cert { --cert-accent: #7C5CFF; }
.cert-page { align-content: center; gap: 14px; }
.cert-logo { max-height: clamp(26px, 5vw, 48px); max-width: 40%; object-fit: contain; margin-bottom: 6px; }
.cert-org { color: var(--cert-accent); }
.cert-classic .cert-inner { border-color: color-mix(in oklab, var(--cert-accent) 45%, #D9CFB0); outline-color: color-mix(in oklab, var(--cert-accent) 45%, #D9CFB0); }
.cert-modern { position: relative; overflow: hidden; font-family: -apple-system, 'Segoe UI', sans-serif; }
.cert-modern::before { content: ''; position: absolute; inset-block: 0; inset-inline: 0 auto; width: clamp(10px, 2.2vw, 22px); background: var(--cert-accent); }
.cert-modern .cert-inner { border: 0; outline: 0; justify-items: start; text-align: start; padding-inline-start: 9%; }
.cert-modern .cert-kicker { font-weight: 800; letter-spacing: -0.02em; }
.cert-modern .cert-name { font-weight: 800; letter-spacing: -0.03em; padding-inline-start: 0; border-bottom-color: var(--cert-accent); border-bottom-width: 3px; }
.cert-modern .cert-meta { justify-content: flex-start; }
.cert-minimal .cert-inner { border: 0; outline: 0; }
.cert-minimal .cert-kicker::before { content: ''; display: block; width: 56px; height: 3px; margin: 0 auto 14px; background: var(--cert-accent); border-radius: 3px; }
.cert-minimal .cert-name { border-bottom: 0; }
.cert-sign { display: grid; justify-items: center; }
.cert-sign i { font-family: 'Brush Script MT', 'Segoe Script', cursive; font-size: clamp(18px, 2.6vw, 28px); line-height: 1; border-bottom: 1px solid #C9CFCB; padding: 0 12px 2px; color: #14201A; }
.cert-modern .cert-sign { justify-items: start; }
.cert-actions { margin: 0; text-align: center; font-family: -apple-system, 'Segoe UI', sans-serif; }
.cert-actions a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 99px; background: #14201A; color: #fff; font-weight: 700; font-size: 14px; text-decoration: none; }
.cert-actions svg { width: 16px; height: 16px; }
@media print { .cert-page { background: #fff; } .cert { box-shadow: none; } .cert-actions { display: none; } }

/* Course depth (ADR-0041): quizzes, assignments and lesson discussions in the student area ------------------------ */
.lr-note { margin: 0 0 12px; font-size: 14px; color: var(--site-muted); font-weight: 600; }
.lr-quiz, .lr-work { margin-top: 26px; display: grid; gap: 16px; }
.lr-questions { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: q; }
.lr-q { counter-increment: q; padding: 18px; border-radius: calc(var(--site-radius) + 4px); background: var(--site-surface); border: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); }
.lr-q fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; min-width: 0; }
.lr-q-prompt { margin: 0; padding: 0; display: flex; gap: 10px; align-items: flex-start; font-weight: 700; color: var(--site-heading); font-size: 16px; line-height: 1.4; }
.lr-q-prompt::before { content: counter(q); flex: none; width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center; font-size: 12.5px; background: color-mix(in oklab, var(--site-accent) 14%, transparent); color: var(--site-accent); }
.lr-q legend.lr-q-prompt { margin-bottom: 12px; }
.lr-q-prompt small { font-weight: 500; color: var(--site-muted); }
.lr-q-mark { margin-inline-start: auto; flex: none; width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; }
.lr-q-mark svg { width: 14px; height: 14px; }
.lr-q.is-right { border-color: color-mix(in oklab, #10B981 45%, transparent); }
.lr-q.is-right .lr-q-mark { background: #10B981; color: #fff; }
.lr-q.is-wrong { border-color: color-mix(in oklab, #EF4444 40%, transparent); }
.lr-q.is-wrong .lr-q-mark { background: #EF4444; color: #fff; }
.lr-q-answer { margin-block: 10px 0; margin-inline: 36px 0; font-size: 14px; font-weight: 700; color: var(--site-text); }
.lr-q-why { margin-block: 6px 0; margin-inline: 36px 0; font-size: 14px; color: var(--site-muted); line-height: 1.55; }
.lr-score { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 28px 20px; border-radius: calc(var(--site-radius) + 6px); color: #fff; background: linear-gradient(135deg, #0F766E, #10B981); box-shadow: 0 30px 60px -34px rgb(16 185 129 / .7); }
.lr-score.is-fail { background: linear-gradient(135deg, #7C2D12, #F97316); box-shadow: 0 30px 60px -34px rgb(249 115 22 / .7); }
.lr-score b { font-size: clamp(2.6rem, 2rem + 3vw, 4rem); line-height: 1; letter-spacing: -0.04em; }
.lr-score span { font-weight: 700; opacity: .92; }
.lr-score small { opacity: .85; }
.lr-score .ws-submit { width: auto; padding: 0 22px; margin-top: 8px; display: inline-flex; align-items: center; text-decoration: none; background: #fff; color: #14201A; }
.lr-status { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: calc(var(--site-radius) + 4px); background: var(--site-surface); border: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); }
.lr-status > svg { flex: none; width: 22px; height: 22px; margin-top: 2px; color: var(--site-muted); }
.lr-status b { display: block; color: var(--site-heading); }
.lr-status small { color: var(--site-muted); font-size: 12.5px; }
.lr-status.is-approved { border-color: color-mix(in oklab, #10B981 45%, transparent); background: color-mix(in oklab, #10B981 8%, var(--site-surface)); }
.lr-status.is-approved > svg { color: #10B981; }
.lr-status.is-changes_requested { border-color: color-mix(in oklab, #F59E0B 50%, transparent); background: color-mix(in oklab, #F59E0B 8%, var(--site-surface)); }
.lr-status.is-changes_requested > svg { color: #D97706; }
.lr-feedback { margin: 10px 0 0; padding: 10px 12px; border-inline-start: 3px solid var(--site-accent); border-radius: 6px; background: color-mix(in oklab, var(--site-text) 4%, transparent); white-space: pre-line; font-size: 14.5px; }
.lr-mywork { padding: 14px 16px; border-radius: 12px; background: color-mix(in oklab, var(--site-text) 4%, transparent); }
.lr-mywork small { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--site-muted); }
.lr-mywork p { margin: 4px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.lr-work .lr-btn { justify-self: start; padding-inline-start: 0; }
.lr-work-form { display: grid; gap: 14px; padding: 20px; border-radius: calc(var(--site-radius) + 4px); background: var(--site-surface); border: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); }
.lr-work-form h2 { margin: 0; font-size: 1.15rem; color: var(--site-heading); }
.lr-work-form .ws-submit, .lr-quiz-form .ws-submit { justify-self: start; }
.lr-quiz-form { display: grid; gap: 16px; }
.lr-disc { margin-top: 40px; padding-top: 24px; border-top: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); display: grid; gap: 14px; }
.lr-disc h2 { margin: 0; font-size: 1.2rem; color: var(--site-heading); display: flex; align-items: center; gap: 8px; }
.lr-disc h2 span { font-size: 12px; font-weight: 800; padding: 2px 9px; border-radius: 99px; background: color-mix(in oklab, var(--site-text) 8%, transparent); color: var(--site-muted); }
.lr-c { padding: 14px 16px; border-radius: calc(var(--site-radius) + 2px); background: var(--site-surface); border: 1px solid color-mix(in oklab, var(--site-text) 9%, transparent); }
.lr-c header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.lr-c header b { color: var(--site-heading); }
.lr-c header small { color: var(--site-muted); font-size: 12px; margin-inline-start: auto; }
.lr-c p { margin: 6px 0 0; white-space: pre-line; overflow-wrap: anywhere; font-size: 15px; line-height: 1.55; }
.lr-c.is-reply { margin: 10px 0 0 clamp(8px, 3vw, 24px); background: color-mix(in oklab, var(--site-text) 3%, transparent); }
.lr-c.is-team { border-color: color-mix(in oklab, var(--site-accent) 35%, transparent); }
.lr-c-badge { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 99px; background: var(--site-accent); color: var(--site-accent-text); }
.lr-c-reply { margin-top: 8px; }
.lr-c-reply summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--site-accent); list-style: none; }
.lr-c-reply form { display: grid; gap: 8px; margin-top: 8px; }
.lr-c-reply .lr-btn { justify-self: start; padding: 8px 0; }
.lr-c-new { display: grid; gap: 10px; }
.lr-c-new .ws-submit { justify-self: start; width: auto; padding: 0 22px; }
.lr-nav li .lr-kind { display: inline-block; margin-inline-start: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--site-accent); }

/* Instructors on the course sales page (ADR-0041) */
.crs-team { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.crs-person { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: calc(var(--site-radius) + 4px); background: var(--site-surface); border: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); }
.crs-person-photo { flex: none; width: 56px; height: 56px; border-radius: 99px; background: color-mix(in oklab, var(--site-accent) 18%, transparent) center / cover no-repeat; display: grid; place-items: center; font-weight: 800; color: var(--site-accent); font-size: 20px; }
.crs-person b { display: block; color: var(--site-heading); }
.crs-person small { display: block; color: var(--site-muted); font-size: 13px; font-weight: 600; }
.crs-person p { margin: 6px 0 0; font-size: 14px; line-height: 1.55; }

/* css/site/modules/community.css */
/* Community (ADR-0024, ADR-0031). Split out of site.css (ADR-0068 §9); module pages load it through the site.css bundle. */
/* ---------------------------------------------------------------- community (ADR-0024) */
.cm, .cm-gate, .cm-inside { --cm-line: color-mix(in oklab, var(--site-text) 10%, transparent); --cm-soft: color-mix(in oklab, var(--site-text) 5%, transparent); }
.cm { min-height: 100dvh; background: var(--site-bg-base); color: var(--site-text); font-family: var(--site-font); }
.cm-bar { position: sticky; top: 0; z-index: 6; display: flex; align-items: center; gap: 12px; padding: 10px clamp(14px, 3vw, 28px); background: color-mix(in oklab, var(--site-surface) 90%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--cm-line); }
.cm-brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.cm-logo { width: 36px; height: 36px; border-radius: 11px; flex: none; display: grid; place-items: center; object-fit: cover; font-weight: 800; color: var(--site-accent-text); background: linear-gradient(145deg, var(--site-accent), color-mix(in oklab, var(--site-accent) 55%, #7C5CFF)); }
.cm-brand-text { display: grid; min-width: 0; }
.cm-brand-text small { font-size: 11.5px; color: var(--site-muted); font-weight: 600; }
.cm-brand-text b { color: var(--site-heading); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-me { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--site-heading); font-weight: 700; font-size: 14px; padding-block: 4px; padding-inline: 4px 12px; border-radius: 99px; border: 1px solid var(--cm-line); background: var(--site-surface); }
.cm-me.is-active { border-color: var(--site-accent); }
.cm-me-name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .cm-me-name { display: none; } .cm-me { padding: 3px; } }
.cm-av { width: 36px; height: 36px; border-radius: 99px; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: var(--site-heading); background: color-mix(in oklab, var(--site-accent) 18%, var(--site-surface)); }
.cm-av.is-team { color: #fff; background: linear-gradient(145deg, #1F2925, #5B3BE8); }
.cm-av-sm { width: 30px; height: 30px; font-size: 12.5px; }
.cm-av-lg { width: 48px; height: 48px; font-size: 18px; }

.cm-body { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1180px; margin: 0 auto; gap: 18px; padding: 14px clamp(14px, 3vw, 28px) 64px; }
.cm-nav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * clamp(14px, 3vw, 28px)); padding: 2px clamp(14px, 3vw, 28px); }
.cm-nav::-webkit-scrollbar { display: none; }
.cm-nav-item { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 8px 13px; border-radius: 99px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--site-text); background: var(--site-surface); border: 1px solid var(--cm-line); }
.cm-nav-item svg { width: 15px; height: 15px; color: var(--site-muted); }
.cm-nav-item small { color: var(--site-muted); font-weight: 600; font-size: 12px; }
.cm-nav-item.is-active { background: var(--site-accent); color: var(--site-accent-text); border-color: transparent; }
.cm-nav-item.is-active svg, .cm-nav-item.is-active small { color: inherit; opacity: .8; }
.cm-side { display: none; }
@media (min-width: 900px) {
  .cm-body { grid-template-columns: 230px minmax(0, 1fr); gap: 28px; padding-top: 24px; }
  .cm-nav { flex-direction: column; margin: 0; padding: 0; overflow: visible; position: sticky; top: 80px; align-self: start; }
  .cm-nav-item { border: 0; background: transparent; border-radius: 12px; padding: 10px 12px; }
  .cm-nav-item span { flex: 1; }
  .cm-nav-item:hover { background: var(--cm-soft); }
  .cm-nav-item.is-active { background: var(--site-surface); color: var(--site-heading); box-shadow: 0 1px 0 var(--cm-line), 0 10px 24px -18px rgb(0 0 0 / .35); }
  .cm-nav-item.is-active svg { color: var(--site-accent); opacity: 1; }
}
@media (min-width: 1180px) { .cm-body { grid-template-columns: 230px minmax(0, 1fr) 280px; } .cm-side { display: grid; gap: 14px; align-content: start; position: sticky; top: 80px; align-self: start; } }
.cm-main { min-width: 0; display: grid; gap: 14px; align-content: start; }
.cm-head h1 { margin: 0; color: var(--site-heading); font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem); letter-spacing: -0.03em; line-height: 1.1; }
.cm-head p { margin: 6px 0 0; color: var(--site-muted); font-size: 15px; max-width: 60ch; }
.cm-card { background: var(--site-surface); border: 1px solid var(--cm-line); border-radius: calc(var(--site-radius) + 6px); padding: 16px; display: grid; gap: 8px; }
.cm-card b { color: var(--site-heading); }
.cm-card p { margin: 0; }
.cm-muted { color: var(--site-muted); font-size: 14px; }
.cm-pre { white-space: pre-line; }
.cm-stat { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
.cm-stat svg { width: 15px; height: 15px; color: var(--site-accent); }
.cm-powered { font-size: 12px; color: var(--site-muted); margin: 4px 4px 0; }
.cm-powered a { color: inherit; }
.cm-alert, .cm-ok, .cm-note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 11px 14px; border-radius: 14px; font-size: 14px; }
.cm-alert { background: color-mix(in oklab, #E5484D 12%, var(--site-surface)); color: color-mix(in oklab, #E5484D 70%, var(--site-heading)); }
.cm-ok { background: color-mix(in oklab, var(--site-accent) 14%, var(--site-surface)); color: var(--site-heading); }
.cm-note { background: var(--cm-soft); color: var(--site-muted); }
.cm-note a { color: var(--site-accent); font-weight: 700; }
.cm-alert svg, .cm-ok svg, .cm-note svg { width: 16px; height: 16px; flex: none; }

.cm-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; color: var(--site-text); background: var(--site-surface); border: 1px solid var(--cm-line); border-radius: 12px; padding: 10px 12px; resize: vertical; }
.cm-input:focus { outline: 2px solid color-mix(in oklab, var(--site-accent) 45%, transparent); outline-offset: 1px; }
.cm-compose { display: flex; gap: 12px; align-items: flex-start; background: var(--site-surface); border: 1px solid var(--cm-line); border-radius: calc(var(--site-radius) + 6px); padding: 14px; box-shadow: 0 18px 40px -32px rgb(0 0 0 / .45); }
.cm-compose-fields { flex: 1; min-width: 0; display: grid; gap: 8px; }
.cm-compose .cm-input { border-color: transparent; background: var(--cm-soft); }
.cm-input-title { font-weight: 700; }
.cm-compose-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cm-select { font: inherit; font-size: 13.5px; font-weight: 600; color: var(--site-text); background: var(--cm-soft); border: 0; border-radius: 99px; padding: 8px 12px; max-width: 60vw; }
.cm-btn { width: auto; min-height: 40px; padding: 0 18px; display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; }
.cm-btn svg { width: 15px; height: 15px; }
.cm-btn-ghost { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 14px; font-weight: 700; color: var(--site-heading); background: transparent; border: 1px solid var(--cm-line); border-radius: 12px; padding: 9px 14px; cursor: pointer; }
.cm-btn-ghost svg { width: 15px; height: 15px; }
.cm-btn-ghost.is-danger { color: #D93036; border-color: color-mix(in oklab, #D93036 35%, transparent); }
.cm-rules summary { cursor: pointer; font-size: 13px; color: var(--site-muted); font-weight: 600; }
.cm-rules p { white-space: pre-line; font-size: 13.5px; color: var(--site-muted); margin: 6px 0 0; }

.cm-feed { display: grid; gap: 12px; }
.cm-post { position: relative; background: var(--site-surface); border: 1px solid var(--cm-line); border-radius: calc(var(--site-radius) + 6px); padding: 16px 16px 10px; }
.cm-post.is-pinned { border-color: color-mix(in oklab, var(--site-accent) 45%, transparent); }
.cm-post.is-hidden, .cm-comment.is-hidden { opacity: .6; border-style: dashed; }
.cm-post-head { display: flex; align-items: center; gap: 10px; }
.cm-meta { margin: 0; flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 7px; row-gap: 0; font-size: 14px; }
.cm-meta b { color: var(--site-heading); }
.cm-meta-sub, .cm-meta time { color: var(--site-muted); font-size: 12.5px; }
.cm-post-head .cm-meta-sub { flex-basis: 100%; }
.cm-meta-sub a { color: inherit; font-weight: 600; text-decoration: none; }
.cm-badge { font-size: 11px; font-weight: 800; letter-spacing: .02em; padding: 2px 8px; border-radius: 99px; color: var(--site-accent); background: color-mix(in oklab, var(--site-accent) 13%, transparent); }
.cm-badge.is-team { color: #fff; background: linear-gradient(90deg, #1F2925, #5B3BE8); }
.cm-badge.is-hidden { color: #B25E00; background: color-mix(in oklab, #F5A524 18%, transparent); }
.cm-badge.is-you { color: var(--site-muted); background: var(--cm-soft); }
.cm-pin svg { width: 16px; height: 16px; color: var(--site-accent); }
.cm-post-title { margin: 12px 0 0; font-size: 1.12rem; line-height: 1.3; letter-spacing: -0.01em; color: var(--site-heading); }
h1.cm-post-title { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); letter-spacing: -0.02em; }
.cm-post-title a { color: inherit; text-decoration: none; }
.cm-text { font-size: 15.5px; line-height: 1.6; margin-top: 8px; overflow-wrap: anywhere; }
.cm-text p { margin: 0 0 8px; } .cm-text h2 { font-size: 1.05rem; color: var(--site-heading); margin: 12px 0 6px; } .cm-text ul { margin: 0 0 8px; padding-inline-start: 20px; }
.cm-text a { color: var(--site-accent); font-weight: 600; }
.cm-more { display: inline-block; font-size: 14px; font-weight: 700; color: var(--site-accent); text-decoration: none; margin-top: -2px; }
.cm-post-foot { display: flex; gap: 4px; margin-top: 8px; border-top: 1px solid var(--cm-line); padding-top: 6px; }
.cm-act { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--site-muted); background: transparent; border: 0; border-radius: 10px; padding: 8px 10px; cursor: pointer; text-decoration: none; }
.cm-act:hover { background: var(--cm-soft); color: var(--site-heading); }
.cm-act svg { width: 17px; height: 17px; }
.cm-act.is-liked { color: #E5486F; } .cm-act.is-liked svg { fill: currentColor; }
.cm-act.is-static { cursor: default; } .cm-act.is-static:hover { background: none; color: var(--site-muted); }
.cm-menu { position: relative; }
.cm-menu summary { list-style: none; cursor: pointer; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--site-muted); }
.cm-menu summary::-webkit-details-marker { display: none; }
.cm-menu summary svg { width: 18px; height: 18px; }
.cm-menu[open] summary { background: var(--cm-soft); }
.cm-menu-pop { position: absolute; inset-inline-end: 0; top: 36px; z-index: 4; width: 250px; display: grid; gap: 2px; padding: 6px; background: var(--site-surface); border: 1px solid var(--cm-line); border-radius: 14px; box-shadow: 0 24px 50px -20px rgb(0 0 0 / .35); }
.cm-menu-pop button { display: flex; align-items: center; gap: 9px; width: 100%; font: inherit; font-size: 14px; font-weight: 600; text-align: start; color: var(--site-text); background: transparent; border: 0; border-radius: 10px; padding: 9px 10px; cursor: pointer; }
.cm-menu-pop button:hover { background: var(--cm-soft); }
.cm-menu-pop button svg { width: 15px; height: 15px; color: var(--site-muted); }
.cm-menu-pop .is-danger { color: #D93036; }
.cm-report-form { display: grid; gap: 6px; }
.cm-report-form .cm-input { font-size: 13.5px; padding: 8px 10px; }
.cm-empty { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 44px 20px; border-radius: calc(var(--site-radius) + 6px); border: 1px dashed var(--cm-line); color: var(--site-muted); }
.cm-empty svg { width: 28px; height: 28px; }
.cm-empty h2 { margin: 6px 0 0; font-size: 1.1rem; color: var(--site-heading); }
.cm-empty p { margin: 0; }
.cm-pager { display: flex; justify-content: space-between; }
.cm-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--site-muted); text-decoration: none; }
.cm-back svg { width: 15px; height: 15px; }

.cm-comments { display: grid; gap: 10px; }
.cm-comments h2 { margin: 6px 0 0; font-size: 1rem; color: var(--site-heading); }
.cm-comment { display: flex; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--site-surface); border: 1px solid var(--cm-line); }
.cm-comment-main { flex: 1; min-width: 0; }
.cm-comment .cm-text { margin-top: 4px; font-size: 15px; }
.cm-comment-tools { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.cm-link { font: inherit; font-size: 12.5px; font-weight: 700; color: var(--site-muted); background: none; border: 0; padding: 0; cursor: pointer; list-style: none; }
.cm-report summary::-webkit-details-marker { display: none; }
.cm-report[open] { flex-basis: 100%; }
.cm-report .cm-report-form { margin-top: 6px; grid-template-columns: 1fr auto; }
.cm-compose-comment { box-shadow: none; }

.cm-search { position: relative; }
.cm-search svg { position: absolute; inset-inline-start: 12px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--site-muted); }
.cm-search .cm-input { padding-inline-start: 36px; }
.cm-head .cm-search { margin-top: 14px; max-width: 460px; }
.cm-head .cm-search .cm-input { padding-inline-end: 38px; border-radius: 99px; }
.cm-search-clear { position: absolute; inset-inline-end: 8px; top: 50%; translate: 0 -50%; width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center; color: var(--site-muted); }
.cm-search .cm-search-clear svg { position: static; translate: none; width: 14px; height: 14px; }
.cm-search-clear:hover { background: var(--cm-soft); color: var(--site-heading); }
.cm-search input[type=search]::-webkit-search-cancel-button { display: none; }
.cm-results { margin: 0; font-size: 14px; color: var(--site-muted); font-weight: 600; }
.cm-people { display: grid; gap: 10px; }
@media (min-width: 640px) { .cm-people { grid-template-columns: 1fr 1fr; } }
.cm-person { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; background: var(--site-surface); border: 1px solid var(--cm-line); }
.cm-person-name { margin: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .cm-person-name b { color: var(--site-heading); }
.cm-person-bio { margin: 3px 0; font-size: 14px; }
.cm-person small { color: var(--site-muted); font-size: 12.5px; }
.cm-form { gap: 12px; }
.cm-field { display: grid; gap: 6px; font-size: 14px; font-weight: 700; color: var(--site-heading); }
.cm-field small { color: var(--site-muted); font-weight: 500; }
.cm-check { display: flex; align-items: center; gap: 9px; font-size: 14px; }
.cm-check input { width: 18px; height: 18px; accent-color: var(--site-accent); }
.cm-danger summary { cursor: pointer; font-weight: 700; color: #D93036; }

/* What's inside (community/inside): its own copy of the list rules, because a bio page's join sheet loads this module but
   not the courses one, where the shared .cs-curr list lives (without them the icons render at full width). */
.cm-inside { margin: 6px 0 20px; padding: 16px; border-radius: calc(var(--site-radius) + 4px); border: 1px solid var(--cm-line); background: color-mix(in oklab, var(--site-surface) 80%, transparent); }
.cm-inside .cs-curr-head { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; margin: 0 0 8px; }
.cm-inside .cs-curr-head b { color: var(--site-heading); font-size: 16px; } .cm-inside .cs-curr-head span { font-size: 13px; color: var(--site-muted); }
.cm-inside .cs-curr-list { list-style: none; margin: 0; padding: 0; display: grid; }
.cm-inside .cs-curr-list li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--cm-line); font-size: 14.5px; color: var(--site-text); }
.cm-inside .cs-curr-list li:first-child { border-top: 0; }
.cm-inside .cs-curr-icon { flex: none; padding-top: 2px; }
.cm-inside .cs-curr-icon svg { width: 16px; height: 16px; color: var(--site-muted); display: block; }
.cm-inside .cs-curr-title { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.cm-inside .cs-curr-preview { flex: none; font-size: 12.5px; font-weight: 700; color: var(--site-accent); text-decoration: none; padding: 3px 9px; border-radius: 99px; background: color-mix(in oklab, var(--site-accent) 12%, transparent); }
.cm-inside .cs-access { margin-top: 12px; font-size: 13.5px; }
.cm-inside .cs-access summary { cursor: pointer; color: var(--site-muted); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.cm-inside .cs-access-form { display: grid; gap: 8px; margin-top: 10px; }
.cm-inside-desc { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--site-muted); }
.cm-gate { display: grid; justify-items: center; text-align: center; gap: 8px; }
.cm-gate-mark { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; overflow: hidden; color: var(--site-accent-text); background: linear-gradient(145deg, var(--site-accent), color-mix(in oklab, var(--site-accent) 55%, #7C5CFF)); box-shadow: 0 20px 40px -20px color-mix(in oklab, var(--site-accent) 80%, transparent); }
.cm-gate-mark svg { width: 30px; height: 30px; } .cm-gate-mark img { width: 100%; height: 100%; object-fit: cover; }
.cm-gate-by { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--site-muted); text-transform: uppercase; letter-spacing: .05em; }
.cm-gate h1 { margin: 0; color: var(--site-heading); font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); letter-spacing: -0.03em; line-height: 1.1; }
.cm-gate-tag { margin: 0; color: var(--site-muted); font-size: 16px; }
.cm-gate-count { display: inline-flex; align-items: center; gap: 7px; margin: 6px 0; font-size: 14px; font-weight: 700; }
.cm-gate-count svg { width: 16px; height: 16px; color: var(--site-accent); }
.cm-gate-spaces { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cm-gate-spaces a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--site-text); border: 1px solid var(--cm-line); }
.cm-gate-spaces svg { width: 14px; height: 14px; color: var(--site-muted); } .cm-gate-spaces small { color: var(--site-accent); font-weight: 700; }
.cm-gate-join { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; margin-top: 8px; }
.cm-gate-join svg { width: 18px; height: 18px; }
.cm-gate .cs-access { width: 100%; }
.cm-row { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-gate-av { font-size: 26px; font-weight: 800; color: var(--site-accent-text); background: var(--site-accent); }

/* In-community notifications (ADR-0031) */
.cm-bell { position: relative; margin-inline-start: auto; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 99px; border: 1px solid var(--cm-line); background: var(--site-surface); color: var(--site-heading); flex: none; }
.cm-bell svg { width: 18px; height: 18px; }
.cm-bell.is-active { border-color: var(--site-accent); }
.cm-bell-count { position: absolute; top: -4px; inset-inline-end: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--site-accent); color: var(--site-on-accent, #fff); font-size: 11px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--site-bg, #fff); }
.cm-inbox { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cm-note-item a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 14px; border-radius: calc(var(--site-radius) + 4px); border: 1px solid var(--cm-line); background: var(--site-surface); text-decoration: none; color: var(--site-text); }
.cm-note-item a:hover { border-color: color-mix(in oklab, var(--site-accent) 45%, var(--cm-line)); }
.cm-note-item a { position: relative; }
.cm-note-item.is-new a { border-color: color-mix(in oklab, var(--site-accent) 45%, var(--cm-line)); box-shadow: inset 3px 0 0 var(--site-accent); }
.cm-note-item.is-new time::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 99px; background: var(--site-accent); margin-inline-end: 6px; vertical-align: 1px; }
.cm-note-icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--cm-soft); color: var(--site-heading); }
.cm-note-icon svg { width: 16px; height: 16px; }
.cm-note-icon.is-announcement { background: color-mix(in oklab, var(--site-accent) 16%, transparent); color: var(--site-accent); }
.cm-note-text { font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.cm-note-text b { color: var(--site-heading); }
.cm-note-text small { display: block; margin-top: 3px; color: var(--site-muted); font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cm-note-item time { font-size: 12px; color: var(--site-muted); white-space: nowrap; }

/* css/site/modules/shop-extras.css */
/* Product options, discounts and licence keys (ADR-0037-0039). Split out of site.css (ADR-0068 §9); module pages load it through the site.css bundle. */
/* Product options (ADR-0037) */
.shop-variants { border: 0; margin: 0; padding: 0; min-width: 0; }
.shop-variants legend { padding: 0; margin-bottom: 8px; }
.shop-variant { justify-content: flex-start; }
.shop-variant-name { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.shop-variant-name small { display: block; font-weight: 500; font-size: 12.5px; color: var(--site-muted); }
.shop-variant-price { flex: none; display: inline-flex; align-items: baseline; gap: 6px; font-weight: 700; font-variant-numeric: tabular-nums; }
.shop-variant-price s { font-weight: 500; font-size: 13px; color: var(--site-muted); }
.shop-variant.is-out { opacity: .55; cursor: not-allowed; }
.shop-variant.is-out .shop-variant-title { text-decoration: line-through; text-decoration-thickness: 1px; }
.shop-add { margin-top: 10px; }

/* Discounts (ADR-0038) */
.shop-sale { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin: 0; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: color-mix(in oklab, var(--site-accent) 14%, transparent); color: var(--site-text); }
.shop-sale svg { width: 15px; height: 15px; color: var(--site-accent); }
.shop-price s { color: var(--site-muted); font-size: 15px; }
.shop-code { border-radius: calc(var(--site-radius) - 4px); border: 1px dashed color-mix(in oklab, var(--site-text) 22%, transparent); padding: 10px 14px; font-size: 14px; }
.shop-code summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; color: var(--site-text); list-style: none; }
.shop-code summary::-webkit-details-marker { display: none; }
.shop-code summary svg { width: 16px; height: 16px; }
.shop-code .wf-input { margin-top: 10px; text-transform: uppercase; letter-spacing: .04em; }
.shop-code[open] { border-style: solid; }

/* Licence keys on the order page (ADR-0039) */
.lic-list { display: grid; gap: 10px; }
.lic { display: grid; gap: 6px; padding: 12px 14px; border-radius: calc(var(--site-radius) - 4px); border: 1px solid color-mix(in oklab, var(--site-text) 12%, transparent); background: color-mix(in oklab, var(--site-surface) 92%, transparent); min-width: 0; }
.lic small { color: var(--site-muted); font-size: 13px; }
.lic-key { display: block; padding: 10px 12px; border-radius: 10px; background: color-mix(in oklab, var(--site-text) 6%, transparent); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; letter-spacing: .04em; color: var(--site-text); overflow-wrap: anywhere; user-select: all; cursor: copy; }
.lic-key.is-copied { outline: 2px solid var(--site-accent); }
.lic-devices { margin: 2px 0 0; font-size: 13px; color: var(--site-muted); }
.lic-device { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; }
.lic-device span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.lic-device svg { width: 15px; height: 15px; flex: none; }
.lic-device button { flex: none; border: 0; background: none; font: inherit; font-weight: 600; color: var(--site-accent); cursor: pointer; }

.shop-tax { margin: -4px 0 0; font-size: 13px; color: var(--site-muted); }
/* R17C · conversion tools in the checkout summary and the receipt's upsell */
.cv-summary { display: grid; gap: 12px; }
.cv-bump { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: calc(var(--site-radius) - 4px); border: 2px dashed color-mix(in oklab, var(--site-accent, var(--site-text)) 55%, transparent); background: color-mix(in oklab, var(--site-accent, var(--site-text)) 7%, transparent); cursor: pointer; min-block-size: 44px; }
.cv-bump input { inline-size: 22px; block-size: 22px; flex: none; margin-block-start: 2px; accent-color: var(--site-accent, var(--site-text)); }
.cv-bump-body { display: grid; gap: 4px; min-inline-size: 0; }
.cv-bump-head { font-weight: 700; color: var(--site-text); }
.cv-bump-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; font-size: 14px; color: var(--site-text); }
.cv-bump-meta s, .cv-price s { opacity: .6; font-size: 13px; }
.cv-bump-hint, .cv-fine { font-size: 12.5px; opacity: .72; color: var(--site-text); margin: 0; }
.cv-tips, .cv-plan { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-inline-size: 0; }
.cv-tips legend, .cv-plan legend { font-weight: 600; font-size: 14px; color: var(--site-text); padding: 0; margin-block-end: 6px; }
.cv-tips legend small { font-weight: 400; opacity: .7; margin-inline-start: 6px; }
.cv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-chip { position: relative; }
.cv-chip input { position: absolute; opacity: 0; inset: 0; }
.cv-chip span { display: inline-flex; gap: 6px; align-items: center; min-block-size: 44px; padding-inline: 14px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--site-text) 22%, transparent); font-size: 14px; color: var(--site-text); cursor: pointer; }
.cv-chip span small { opacity: .65; }
.cv-chip input:checked + span { border-color: var(--site-accent, var(--site-text)); background: color-mix(in oklab, var(--site-accent, var(--site-text)) 12%, transparent); font-weight: 600; }
.cv-chip input:focus-visible + span { outline: 2px solid var(--site-accent, var(--site-text)); outline-offset: 2px; }
.cv-tips:not(:has(input[value="custom"]:checked)) .cv-tip-amount { display: none; }
.cv-plan-opt { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; min-block-size: 44px; border-radius: calc(var(--site-radius) - 4px); border: 1px solid color-mix(in oklab, var(--site-text) 18%, transparent); cursor: pointer; color: var(--site-text); }
.cv-plan-opt:has(input:checked) { border-color: var(--site-accent, var(--site-text)); background: color-mix(in oklab, var(--site-accent, var(--site-text)) 8%, transparent); }
.cv-plan-opt input { margin-block-start: 3px; accent-color: var(--site-accent, var(--site-text)); }
.cv-plan-opt span { display: grid; gap: 2px; }
.cv-plan-opt small { opacity: .72; font-size: 12.5px; }
.cv-later { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--site-text); opacity: .85; margin: 0; }
.cv-later svg { inline-size: 16px; block-size: 16px; flex: none; }
.cv-upsell { margin-block: 20px; padding: 18px; border-radius: var(--site-radius); border: 2px solid var(--site-accent, var(--site-text)); display: grid; gap: 12px; text-align: start; }
.cv-upsell h2 { font-size: 20px; margin: 0; color: var(--site-text); }
.cv-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; opacity: .7; margin: 0; color: var(--site-text); }
.cv-upsell-row { display: flex; gap: 12px; align-items: center; }
.cv-upsell-row img { border-radius: 10px; object-fit: cover; flex: none; }
.cv-upsell-name { font-weight: 600; margin: 0; color: var(--site-text); }
.cv-price { margin: 0; display: flex; gap: 8px; align-items: baseline; color: var(--site-text); }

/* css/site/modules/storefront.css */
/* ==========================================================================
   Storefront, cart and "find my orders" (ADR-0033). Public pages, themed by --site-* tokens.
   Mobile-first: one column of cards, a sticky cart bar; two to three columns from tablet up.
   ========================================================================== */
.sf { overflow: visible; overflow-x: clip; --sf-line: color-mix(in oklab, var(--site-text) 10%, transparent); --sf-soft: color-mix(in oklab, var(--site-accent) 10%, transparent); }
.sf svg { width: 16px; height: 16px; }

/* Top bar */
.sf-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px max(16px, env(safe-area-inset-left), calc((100% - 1080px) / 2)); padding-top: max(10px, env(safe-area-inset-top));
    background: color-mix(in oklab, var(--site-bg-base) 78%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--sf-line); }
.sf-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-weight: 700; }
.sf-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--site-heading); letter-spacing: -0.01em; }
.sf-mark { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; font-style: normal; font-weight: 800; background: var(--site-accent); color: var(--site-accent-text); }
.sf-logo { width: 30px; height: 30px; border-radius: 10px; object-fit: cover; flex: none; }
.sf-cart-btn, .sf-back { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: 14px; flex: none;
    background: var(--site-surface); border: 1px solid var(--sf-line); box-shadow: 0 8px 20px -14px rgb(0 0 0 / .4); transition: transform .15s, box-shadow .15s; }
.sf-cart-btn:hover, .sf-back:hover { transform: translateY(-1px); }
.sf-cart-btn.has-items { background: var(--site-accent); color: var(--site-accent-text); border-color: transparent; }
.sf .sf-badge { min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; font-size: 12px; background: var(--site-accent-text); color: var(--site-accent); }
.sf-cart-btn:focus-visible, .sf-back:focus-visible, .sf-btn:focus-visible, .sf-chip:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 55%, transparent); outline-offset: 2px; }

/* Hero */
.sf-hero { position: relative; }
.sf-hero-cover { height: clamp(110px, 20vw, 190px); background: var(--site-cover); }
.sf-hero-inner { width: min(1080px, 100% - 32px); margin: calc(-1 * clamp(44px, 7vw, 64px)) auto 0; position: relative; display: grid; justify-items: start; gap: 8px; }
.sf-hero-mark, .sf-hero-logo { width: clamp(76px, 12vw, 96px); height: clamp(76px, 12vw, 96px); border-radius: 26px; border: 4px solid var(--site-bg-base); box-shadow: 0 18px 40px -20px rgb(0 0 0 / .5); }
.sf-hero-mark { display: grid; place-items: center; font-family: var(--site-heading); font-size: clamp(2rem, 1.5rem + 2vw, 2.7rem); font-weight: 800; background: var(--site-accent); color: var(--site-accent-text); }
.sf-hero-logo { object-fit: cover; background: var(--site-surface); }
.sf-title { margin: 6px 0 0; font-family: var(--site-heading); font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem); line-height: 1.02; letter-spacing: -0.035em; }
.sf-intro { margin: 0; max-width: 62ch; color: var(--site-muted); font-size: 15.5px; line-height: 1.55; }
.sf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--site-muted); }
.sf-meta svg { width: 14px; height: 14px; }

/* Body */
.sf-body { width: min(1080px, 100% - 32px); margin: 22px auto 0; display: grid; gap: 16px; }
.sf-alert { margin: 0; }
.sf-note { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--sf-soft); font-size: 14px; font-weight: 600; }

.sf-toast { display: flex; align-items: center; gap: 12px; padding-block: 10px; padding-inline: 12px 10px; border-radius: calc(var(--site-radius) + 4px); background: var(--site-surface); border: 1px solid var(--sf-line); box-shadow: 0 18px 40px -24px rgb(0 0 0 / .5); animation: sf-drop .45s cubic-bezier(.2,1.2,.4,1) both; }
.sf-toast-icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; background: var(--site-accent); color: var(--site-accent-text); }
.sf-toast-text { display: grid; min-width: 0; flex: 1; line-height: 1.3; }
.sf-toast-text small { color: var(--site-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf a.sf-toast-go { flex: none; padding: 9px 14px; border-radius: 999px; font-weight: 700; font-size: 13.5px; background: var(--site-text); color: var(--site-bg-base); }
@keyframes sf-drop { from { opacity: 0; transform: translateY(-8px) scale(.98); } }

.sf-tools { display: grid; gap: 12px; }
.sf-search { position: relative; display: flex; align-items: center; }
.sf-search svg { position: absolute; inset-inline-start: 14px; color: var(--site-muted); pointer-events: none; }
.sf-search input { width: 100%; height: 46px; padding-block: 0; padding-inline: 40px 14px; border-radius: 999px; border: 1px solid var(--sf-line); background: var(--site-surface); color: var(--site-text); font: inherit; font-size: 15px; }
.sf-search input:focus { outline: none; border-color: var(--site-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 18%, transparent); }
.sf-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 16px), transparent); }
.sf-chips::-webkit-scrollbar { display: none; }
.sf-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 700; border: 1px solid var(--sf-line); background: var(--site-surface); color: var(--site-text); }
.sf-chip svg { width: 15px; height: 15px; opacity: .8; }
.sf-chip.is-on { background: var(--site-text); color: var(--site-bg-base); border-color: transparent; }

/* Product grid */
.sf-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.sf-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); border-radius: calc(var(--site-radius) + 6px); background: var(--site-surface); border: 1px solid var(--sf-line); overflow: hidden;
    box-shadow: 0 16px 36px -28px rgb(0 0 0 / .5); transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; animation: ws-rise .45s cubic-bezier(.2,.8,.2,1) both; }
.sf-card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -30px rgb(0 0 0 / .55); }
.sf-card.is-added { box-shadow: 0 0 0 3px color-mix(in oklab, var(--site-accent) 45%, transparent), 0 26px 50px -30px rgb(0 0 0 / .55); }
.sf-card-media { position: relative; display: grid; place-items: center; min-height: 112px; min-width: 0; background: var(--sf-soft); color: var(--site-accent); overflow: hidden; }
.sf-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.sf-card:hover .sf-card-media img { transform: scale(1.04); }
.sf-card-media.is-blank { background: radial-gradient(120% 120% at 0% 0%, color-mix(in oklab, var(--site-accent) 30%, transparent), transparent 60%), var(--sf-soft); }
.sf-card-media.is-blank > svg { width: 34px; height: 34px; stroke-width: 1.6; }
.sf-kind { display: none; }
.sf-save { position: absolute; top: 8px; inset-inline-start: 8px; padding: 3px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; background: var(--site-accent); color: var(--site-accent-text); }
.sf-card-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; min-width: 0; }
.sf-card-name { margin: 0; font-family: var(--site-heading); font-size: 1.05rem; line-height: 1.2; letter-spacing: -0.015em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-card-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sf-card-tag { margin: 0; font-size: 13.5px; color: var(--site-muted); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-card-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sf-price { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.sf-price b { font-family: var(--site-heading); font-size: 1.12rem; letter-spacing: -0.02em; }
.sf-price s { font-size: 13px; color: var(--site-muted); }
.sf-add { margin: 0; }
.sf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 14px; border: 0; border-radius: calc(var(--site-radius) - 4px); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
    background: var(--site-btn-bg); color: var(--site-btn-text); transition: transform .15s, filter .15s; white-space: nowrap; }
.sf-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.sf-btn.is-ghost { background: transparent; color: var(--site-text); box-shadow: inset 0 0 0 1.5px var(--sf-line); }
.sf-btn.is-in { background: var(--sf-soft); color: var(--site-text); }
.sf-btn.is-off { background: transparent; color: var(--site-muted); cursor: default; box-shadow: inset 0 0 0 1.5px var(--sf-line); }
.sf-btn.is-busy, .ws-submit.is-busy { opacity: .7; pointer-events: none; }

.sf-empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 48px 20px; border-radius: calc(var(--site-radius) + 6px); border: 1.5px dashed var(--sf-line); }
.sf-empty-icon { width: 64px; height: 64px; border-radius: 22px; display: grid; place-items: center; background: var(--sf-soft); color: var(--site-accent); }
.sf-empty-icon svg { width: 28px; height: 28px; }
.sf-empty h2 { margin: 6px 0 0; font-family: var(--site-heading); font-size: 1.35rem; letter-spacing: -0.02em; }
.sf-empty p { margin: 0 0 8px; color: var(--site-muted); }

.sf-foot { width: min(1080px, 100% - 32px); margin: 36px auto 0; padding: 18px 0 calc(110px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--sf-line); font-size: 13px; font-weight: 600; color: var(--site-muted); }
.sf-foot > a:first-child { display: inline-flex; align-items: center; gap: 6px; }
.sf-foot > a:first-child:hover { color: var(--site-text); }
.sf-foot .ws-branding { margin: 0; }

/* Sticky cart bar (phones) */
.sf a.sf-bar { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; padding-block: 8px; padding-inline: 12px 8px; border-radius: 999px;
    background: var(--site-text); color: var(--site-bg-base); box-shadow: 0 20px 44px -16px rgb(0 0 0 / .55); animation: sf-up .5s cubic-bezier(.2,1.2,.4,1) both; }
.sf-bar-count { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; }
.sf-bar-total { flex: 1; font-weight: 700; font-size: 14px; opacity: .85; }
.sf .sf-bar-go { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 999px; font-weight: 800; font-size: 14px; background: var(--site-accent); color: var(--site-accent-text); }
@keyframes sf-up { from { opacity: 0; transform: translateY(20px); } }

/* Cart page */
.sf-cart-title { margin: 6px 0 0; font-family: var(--site-heading); font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); letter-spacing: -0.035em; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sf-cart-title small { font-family: var(--site-font); font-size: 14px; font-weight: 700; color: var(--site-muted); letter-spacing: 0; }
.sf-cart-grid { display: grid; gap: 16px; align-items: start; }
.sf-lines { display: grid; margin: 0; border-radius: calc(var(--site-radius) + 6px); background: var(--site-surface); border: 1px solid var(--sf-line); overflow: hidden; transition: opacity .2s; }
.sf-lines.is-saving { opacity: .6; }
.sf-line { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px; }
.sf-line + .sf-line { border-top: 1px solid var(--sf-line); }
.sf-line-img { position: relative; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: var(--sf-soft); color: var(--site-accent); }
.sf-line-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-line-main { display: grid; gap: 3px; min-width: 0; }
.sf-line-name { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.sf-line-variant { display: block; font-size: 13px; color: var(--site-muted); margin-top: 1px; }
.sf-line-note { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--site-muted); }
.sf-line-note svg { width: 13px; height: 13px; }
.sf-line-ctl { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.sf-qty select { height: 34px; padding-block: 0; padding-inline: 12px 28px; border-radius: 10px; border: 1px solid var(--sf-line); background: var(--site-surface); color: var(--site-text); font: inherit; font-weight: 700; font-size: 14px; }
.sf-qty-one { font-size: 13px; font-weight: 700; color: var(--site-muted); }
.sf-remove { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--site-muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.sf-remove:hover { color: #C4333A; background: rgb(229 72 77 / .08); }
.sf-remove svg { width: 14px; height: 14px; }
.sf-line-price { display: grid; justify-items: end; gap: 2px; text-align: end; }
.sf-line-price b { font-family: var(--site-heading); font-size: 1.02rem; white-space: nowrap; }
.sf-line-price small { font-size: 12px; color: var(--site-muted); white-space: nowrap; }
.sf-update { padding: 0 14px 14px; }
.sf-summary { display: grid; gap: 16px; padding: 18px; border-radius: calc(var(--site-radius) + 6px); background: var(--site-surface); border: 1px solid var(--sf-line); box-shadow: 0 26px 60px -40px rgb(0 0 0 / .5); }
.sf-sum-rows { display: grid; gap: 8px; }
.sf-sum-rows p { margin: 0; display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--site-muted); }
.sf-sum-total { padding-top: 10px; border-top: 1px solid var(--sf-line); color: var(--site-text) !important; font-weight: 700; }
.sf-sum-total b { font-family: var(--site-heading); font-size: 1.45rem; letter-spacing: -0.02em; }
.sf-checkout { border-top: 0; padding-top: 0; }
.sf-foot-by { font-weight: 600; }

/* Find my orders */
.sf-lookup { display: grid; gap: 12px; }
.sf-lookup-icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 18px 36px -18px var(--site-accent); }
.sf-lookup-icon svg { width: 26px; height: 26px; }
.sf-lookup-title { margin: 6px 0 0; font-family: var(--site-heading); font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.2rem); letter-spacing: -0.035em; }
.sf-lookup-text { margin: 0 0 4px; color: var(--site-muted); line-height: 1.55; }

/* Receipt: the lines of a cart order */
.ord-lines { display: grid; margin: 4px 0 0; padding: 0; list-style: none; border-top: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); }
.ord-lines li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); font-size: 14.5px; }
.ord-lines li span { min-width: 0; overflow-wrap: anywhere; }
.ord-lines li small { color: var(--site-muted); font-weight: 700; }
.ord-lines li b { white-space: nowrap; }
.ord-lines li.is-total { border-bottom: 0; font-weight: 800; }
.ord-find { margin: 18px 0 0; text-align: center; font-size: 13px; color: var(--site-muted); }
.ord-find a { text-decoration: underline; text-underline-offset: 3px; }

@media (min-width: 640px) {
    .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
    .sf-card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .sf-card-media { aspect-ratio: 4 / 3; min-height: 0; }
    .sf-kind { position: absolute; top: 10px; inset-inline-end: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800;
        background: color-mix(in oklab, var(--site-surface) 82%, transparent); color: var(--site-text); backdrop-filter: blur(8px); }
    .sf-kind svg { width: 13px; height: 13px; }
    .sf-save { top: 10px; inset-inline-start: 10px; }
    .sf-card-body { padding: 16px 18px 18px; gap: 6px; }
    .sf-card-name { font-size: 1.18rem; }
    .sf-tools { grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); align-items: center; }
    .sf-chips { margin: 0; padding: 2px 0; mask-image: none; flex-wrap: wrap; overflow: visible; }
    .sf-foot { padding-bottom: 40px; }
    .sf a.sf-bar { inset-inline-start: auto; inset-inline-end: 24px; bottom: 24px; min-width: 340px; }
}
@media (min-width: 960px) {
    .sf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sf-cart-grid { grid-template-columns: minmax(0, 1fr) 380px; }
    .sf-summary { position: sticky; top: 76px; }
}
@media (prefers-reduced-motion: reduce) { .sf-card, .sf-toast, .sf-bar { animation: none; } .sf-card:hover { transform: none; } }

/* On a product page: add to the shop's cart instead of buying now */
.sf-also { display: grid; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed color-mix(in oklab, var(--site-text) 14%, transparent); }
.sf-also form { margin: 0; }
.sf-also-btn { width: 100%; height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: calc(var(--site-radius) - 2px); font: inherit; font-weight: 700; cursor: pointer;
    background: transparent; color: var(--site-text); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--site-text) 16%, transparent); transition: background .15s; }
.sf-also-btn:hover { background: color-mix(in oklab, var(--site-accent) 10%, transparent); }
.sf-also-btn svg, .sf-also-link svg { width: 16px; height: 16px; }
.sf-also-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--site-muted); }
.sf-also-link:hover { color: var(--site-text); }

/* The small live preview on the Storefront settings screen (app). Unlayered, like the rest of this file, so it wins over the page's own breakpoints. */
.sfa-mini { height: 560px; border-radius: 26px; overflow: hidden auto; scrollbar-width: none; font-size: 13px; }
.sfa-mini .sf-hero-cover { height: 84px; }
.sfa-mini .sf-hero-inner { width: calc(100% - 24px); margin-top: -34px; gap: 4px; }
.sfa-mini .sf-hero-mark, .sfa-mini .sf-hero-logo { width: 60px; height: 60px; border-radius: 18px; font-size: 1.5rem; border-width: 3px; }
.sfa-mini .sf-title { font-size: 1.4rem; margin-top: 2px; }
.sfa-mini .sf-intro { font-size: 12.5px; }
.sfa-mini .sf-body { width: calc(100% - 24px); margin-top: 14px; padding-bottom: 20px; }
.sfa-mini .sf-grid { grid-template-columns: 1fr; gap: 10px; }
.sfa-mini .sf-card { grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: none; animation: none; }
.sfa-mini .sf-card-media { aspect-ratio: 1; }
.sfa-mini .sf-card-body { padding: 10px 12px; }
.sfa-mini .sf-card-name { font-size: .92rem; }
.sfa-mini .sf-price b { font-size: .95rem; }
.sfa-mini .sf-btn { height: 30px; padding: 0 10px; font-size: 12px; }
.sfa-mini .sf-kind { display: none; }
.sfa-mini .sf-empty { padding: 28px 12px; }
.sfa-mini .sf-hero-inner { margin: -34px auto 0; }
.sfa-mini .sf-card:hover { transform: none; }

/* Discounts (ADR-0038) */
.sf-sum-rows .sf-sum-off { color: var(--site-accent); font-weight: 600; }
.sf-sum-off span:first-child { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.sf-sum-off svg { width: 15px; height: 15px; flex: none; }
.sf-sum-off small { font-weight: 500; color: var(--site-muted); }
.sf-code { border-radius: calc(var(--site-radius) - 2px); border: 1px dashed var(--sf-line); padding: 10px 12px; font-size: 14px; }
.sf-code summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; color: var(--site-text); list-style: none; }
.sf-code summary::-webkit-details-marker { display: none; }
.sf-code svg { width: 16px; height: 16px; flex: none; }
.sf-code-form { display: flex; gap: 8px; margin-top: 10px; }
.sf-code-form .wf-input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .04em; }
.sf-code-form .sf-btn { flex: none; }
.sf-code .wf-error { margin: 8px 0 0; }
.sf-code.is-on { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-style: solid; background: color-mix(in oklab, var(--site-accent) 8%, transparent); }
.sf-code.is-on span { display: inline-flex; align-items: center; gap: 6px; }

/* R17F · affiliate sign-up and dashboard */
.aff-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 16px 0; }
.aff-stats > div { padding: 12px; border: 1px solid color-mix(in srgb, currentColor 14%, transparent); border-radius: 12px; }
.aff-stats dt { font-size: .8rem; opacity: .7; }
.aff-stats dd { margin: 4px 0 0; font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.aff-h2 { font-size: 1.05rem; margin: 20px 0 6px; }
.aff-links, .aff-rows { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 10px; }
.aff-links li { display: grid; gap: 6px; }
.aff-links .wf-input { font-size: .85rem; direction: ltr; }
.aff-rows li { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; padding-block: 8px; border-block-end: 1px solid color-mix(in srgb, currentColor 10%, transparent); }
.aff-terms { max-block-size: 160px; overflow: auto; font-size: .85rem; padding: 10px; border-radius: 10px; background: color-mix(in srgb, currentColor 5%, transparent); margin-block-end: 8px; }

/* R17E: buyer "Request a refund" on the receipt */
.ord-refund { margin-block-start: 18px; padding-block-start: 12px; border-block-start: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); }
.ord-refund summary { cursor: pointer; min-block-size: 44px; display: flex; align-items: center; font-weight: 600; }
.ord-refund-form { display: grid; gap: 8px; margin-block-start: 8px; text-align: start; }
.ord-refund-form label { font-size: 13.5px; opacity: .8; }
.ord-refund-form textarea, .ord-refund-form input { inline-size: 100%; min-block-size: 44px; padding: 10px 12px; border-radius: 10px; border: 1px solid color-mix(in oklab, var(--site-text) 20%, transparent); background: transparent; color: inherit; font: inherit; }
.ord-refund-form button { min-block-size: 44px; border-radius: 999px; border: 0; padding-inline: 20px; font-weight: 600; background: var(--site-accent, var(--site-text)); color: var(--site-accent-text, var(--site-bg)); cursor: pointer; justify-self: start; }
.ord-refund-error { color: #c0392b; font-size: 13.5px; margin: 0; }

/* css/site/modules/article.css */
/* Articles (B3 · U3): the full text in the page's sheet and on its own page. Comfortable measure and rhythm. */
.bp-article { display: grid; gap: 12px; text-align: start; }
.bp-cover { border-radius: var(--site-radius); overflow: hidden; aspect-ratio: 16 / 9; }
.bp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-cat { width: fit-content; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--site-accent); background: color-mix(in oklab, var(--site-accent) 12%, transparent); }
.bp-h1 { margin: 0; font-size: clamp(1.6rem, 5vw, 2.3rem); line-height: 1.12; letter-spacing: -0.035em; font-family: var(--site-heading, inherit); }
.bp-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--site-muted); font-size: 13.5px; font-weight: 600; }
.bp-meta span { display: inline-flex; align-items: center; gap: 6px; }
.bp-meta svg { width: 15px !important; height: 15px !important; }
.bp-body { font-size: 16.5px; line-height: 1.75; max-width: 68ch; }
.bp-body :is(h2, h3, h4) { margin: 1.4em 0 .4em; line-height: 1.25; letter-spacing: -0.02em; }
.bp-body p { margin: 0 0 1em; }
.bp-body a { color: var(--site-accent); text-decoration: underline; text-underline-offset: 3px; }
.bp-body blockquote { margin: 1.2em 0; padding-inline-start: 16px; border-inline-start: 3px solid var(--site-accent); font-style: italic; }
.bp-body :is(ul, ol) { padding-inline-start: 1.3em; margin: 0 0 1em; }
.bp-page { max-width: 760px; margin-inline: auto; }
.bp-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; color: var(--site-muted); font-weight: 700; font-size: 14px; }
.bp-back svg { width: 16px; height: 16px; }

/* css/site/modules/donations.css */
/* Donations in the checkout (hosted product page and the bio-page sheet): amount chips, "Other", message. */
.dn { border: 0; margin: 0; padding: 0; min-width: 0; }
.dn legend { padding: 0; margin-bottom: 8px; }
.dn-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.dn-chip { position: relative; cursor: pointer; min-width: 0; }
.dn-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.dn-chip-in { display: grid; place-items: center; align-content: center; gap: 2px; min-height: 56px; padding: 8px 10px; text-align: center;
  border-radius: calc(var(--site-radius) - 2px); border: 1.5px solid color-mix(in oklab, var(--site-text) 14%, transparent);
  background: color-mix(in oklab, var(--site-surface) 88%, transparent); color: var(--site-text); transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.dn-chip.has-emoji .dn-chip-in { min-height: 76px; }
.dn-chip-in b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.dn-chip-in small { font-size: 11.5px; font-weight: 700; color: var(--site-muted); line-height: 1.2; }
.dn-emoji { font-size: 22px; line-height: 1; }
.dn-chip:hover .dn-chip-in { border-color: color-mix(in oklab, var(--site-accent) 55%, transparent); transform: translateY(-1px); }
.dn-chip input:checked + .dn-chip-in { border-color: var(--site-accent); background: color-mix(in oklab, var(--site-accent) 12%, var(--site-surface)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--site-accent) 22%, transparent); }
.dn-chip input:checked + .dn-chip-in small { color: var(--site-accent); }
.dn-chip input:focus-visible + .dn-chip-in { outline: 3px solid color-mix(in oklab, var(--site-accent) 60%, transparent); outline-offset: 2px; }
.dn-custom { display: grid; gap: 6px; margin-top: 12px; }
.dn:has(.dn-chip-other input:not(:checked)) .dn-custom { display: none; }
.dn-amount { position: relative; display: flex; align-items: center; }
.dn-amount > span { position: absolute; inset-inline-start: 14px; font-weight: 800; color: var(--site-muted); pointer-events: none; }
.dn-amount .wf-input { padding-inline-start: 38px; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.dn-opt { font-weight: 500; font-size: 12px; color: var(--site-muted); }
@media (prefers-reduced-motion: reduce) { .dn-chip-in { transition: none; } .dn-chip:hover .dn-chip-in { transform: none; } }

/* ---- Support blocks on the page (donate, fundraiser, tip jar, supporter perks): shared parts ---------------------- */
.sp-donate, .sp-card { position: relative; overflow: hidden; text-align: var(--b-align, start); }
.sp-body { display: grid; gap: 14px; padding: var(--b-pad, 22px); }
.sp-head { display: flex; align-items: center; gap: 12px; }
.sp-head-t { display: grid; gap: 4px; min-width: 0; }
.sp-title { margin: 0; font-family: var(--site-heading); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; font-size: calc(1.36rem * var(--b-scale, 1)); overflow-wrap: anywhere; }
.sp-text { margin: 0; color: var(--site-muted); font-size: 14.5px; line-height: 1.55; }
.sp-badge { width: 46px; height: 46px; flex: none; border-radius: 15px; display: grid; place-items: center; color: var(--site-accent-text);
  background: radial-gradient(90% 90% at 100% 0%, color-mix(in oklab, var(--site-surface) 35%, transparent), transparent 60%), var(--site-accent); box-shadow: 0 10px 22px -12px var(--site-accent); }
.sp-badge svg { width: 22px; height: 22px; }
.sp-media { aspect-ratio: 16 / 9; overflow: hidden; }
.sp-media .ws-media { transition: transform .8s var(--site-ease); }
.sp-donate:hover .sp-media .ws-media { transform: scale(1.03); }
/* Amount chips */
.sp-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@container ws-page (min-width: 440px) { .sp-chips { grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); } }
.sp-chip { position: relative; display: grid; place-items: center; align-content: center; gap: 1px; min-height: 52px; padding: 8px 10px; text-align: center;
  border-radius: calc(var(--site-radius) - 2px); border: 1.5px solid color-mix(in oklab, var(--site-text) 12%, transparent); background: color-mix(in oklab, var(--site-bg-base) 55%, var(--site-surface)); color: var(--site-text); }
.sp-chip b { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.sp-chip small { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--site-accent); }
.sp-chip:hover { border-color: color-mix(in oklab, var(--site-accent) 60%, transparent); }
.sp-chip.is-popular { border-color: var(--site-accent); background: color-mix(in oklab, var(--site-accent) 11%, var(--site-surface)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--site-accent) 16%, transparent); }
.sp-chip-other b { font-size: 14px; font-weight: 700; color: var(--site-muted); }
.sp-chips-l .sp-chip { min-height: 66px; }
.sp-chips-l .sp-chip b { font-size: 19px; }
.sp-chip.has-emoji { min-height: 84px; gap: 3px; }
.sp-emoji { font-size: 26px; line-height: 1; transition: transform .25s var(--site-ease); }
.sp-chip:hover .sp-emoji { transform: scale(1.15) rotate(-6deg); }
/* The main button and the footnote */
.sp-cta { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 20px; border-radius: var(--site-btn-radius); font-weight: 800; font-size: 15.5px;
  background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 14px 28px -16px var(--site-accent); transition: transform .18s var(--site-ease), filter .18s; }
.sp-cta:hover { transform: translateY(-2px); filter: brightness(1.05); }
.sp-cta svg { width: 18px; height: 18px; }
.sp-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: -2px 0 0; font-size: 12.5px; font-weight: 600; color: var(--site-muted); }
.sp-foot span { display: inline-flex; align-items: center; gap: 5px; }
.sp-foot svg { width: 14px; height: 14px; }
/* Compact row and pill */
.sp-compact { display: flex; align-items: center; gap: 12px; min-height: 64px; padding-block: 12px; padding-inline: 14px 12px; text-align: start; }
.sp-compact-ico { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: color-mix(in oklab, var(--site-accent) 16%, transparent); color: var(--site-accent); }
.sp-compact-ico svg { width: 20px; height: 20px; }
.sp-compact-t { display: grid; gap: 2px; min-width: 0; flex: 1; }
.sp-compact-t .ws-t2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-pill { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; font-weight: 800; font-size: 13.5px; background: var(--site-accent); color: var(--site-accent-text); }
.sp-btn .ws-button-icon { color: inherit; }
@media (prefers-reduced-motion: reduce) { .sp-media .ws-media, .sp-emoji, .sp-cta { transition: none; } }
.sp-chips .sp-chip-other { grid-column: 1 / -1; min-height: 44px; border-style: dashed; background: transparent; }
.sp-chips-l .sp-chip-other { min-height: 48px; }
.sp-chips .sp-chip-other b { font-size: 14px; }

/* css/site/modules/event-programme.css */
/* EV5 · Weesify Events programme pages (public): speaker portal, call for speakers, personal agenda, agenda section.
   Scoped to .evp. Light and dark (prefers-color-scheme, or data-theme on <html>). Logical properties only (RTL). */
.evp { --evp-bg: #F3F6F4; --evp-surface: #FFFFFF; --evp-soft: #EEF3F0; --evp-line: #E1E8E4; --evp-text: #0E1A15; --evp-muted: #56655E; --evp-faint: #8A9690;
    --evp-ink: #0E1A15; --evp-on-ink: #FFFFFF; --evp-accent: #7C5CFF; --evp-accent-soft: #EFEBFF; --evp-good: #067A53; --evp-good-soft: #DDF8EC; --evp-warn: #9A5B00;
    --evp-warn-soft: #FFF1D6; --evp-bad: #B42323; --evp-bad-soft: #FDE7E7; --evp-shadow: 0 1px 2px rgba(14, 26, 21, .05), 0 12px 32px -12px rgba(14, 26, 21, .14);
    --evp-hero: radial-gradient(120% 140% at 0% 0%, #2B1F66 0%, #0E1A15 55%), #0E1A15;
    min-height: 100vh; background: var(--evp-bg); color: var(--evp-text); font-family: "Manrope", system-ui, sans-serif; font-size: 15px; line-height: 1.55;
    -webkit-font-smoothing: antialiased; }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .evp { --evp-bg: #0B110E; --evp-surface: #121A16; --evp-soft: #18221D; --evp-line: #23302A; --evp-text: #EEF4F1; --evp-muted: #A3B2AB;
        --evp-faint: #73827B; --evp-ink: #F2F7F4; --evp-on-ink: #0E1A15; --evp-accent: #9C86FF; --evp-accent-soft: #241D45; --evp-good: #5BE3AE; --evp-good-soft: #10291F;
        --evp-warn: #F2C26B; --evp-warn-soft: #2C2210; --evp-bad: #FF8A8A; --evp-bad-soft: #301616; --evp-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px -12px rgba(0, 0, 0, .6);
        --evp-hero: radial-gradient(120% 140% at 0% 0%, #2B1F66 0%, #070B09 60%), #070B09; }
}
html[data-theme="dark"] .evp { --evp-bg: #0B110E; --evp-surface: #121A16; --evp-soft: #18221D; --evp-line: #23302A; --evp-text: #EEF4F1; --evp-muted: #A3B2AB;
    --evp-faint: #73827B; --evp-ink: #F2F7F4; --evp-on-ink: #0E1A15; --evp-accent: #9C86FF; --evp-accent-soft: #241D45; --evp-good: #5BE3AE; --evp-good-soft: #10291F;
    --evp-warn: #F2C26B; --evp-warn-soft: #2C2210; --evp-bad: #FF8A8A; --evp-bad-soft: #301616; --evp-hero: radial-gradient(120% 140% at 0% 0%, #2B1F66 0%, #070B09 60%), #070B09; }
.evp *, .evp *::before, .evp *::after { box-sizing: border-box; }
.evp a { color: inherit; }
.evp :focus-visible { outline: 2px solid var(--evp-accent); outline-offset: 2px; border-radius: 6px; }
.evp svg { width: 1em; height: 1em; flex: none; }
.evp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hero band */
.evp-hero { position: relative; background: var(--evp-hero); color: #fff; padding-block: 28px 76px; padding-inline: 20px; overflow: hidden; }
.evp-hero::after { content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -10%; width: 60vw; max-width: 560px; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgba(124, 92, 255, .45), rgba(255, 122, 61, .18) 45%, transparent 70%); filter: blur(10px); pointer-events: none; }
.evp-hero-in { position: relative; z-index: 1; max-width: 980px; margin-inline: auto; }
.evp-by { display: flex; margin: 0; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: rgba(255, 255, 255, .78); }
.evp-by i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: rgba(255, 255, 255, .14); font-style: normal; font-size: 12px; }
.evp-kicker { display: inline-flex; align-items: center; gap: 6px; margin-block: 22px 8px; padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.evp-title { margin: 0; font-family: "Urbanist", "Manrope", sans-serif; font-weight: 800; font-size: clamp(30px, 6vw, 52px); line-height: 1.02; letter-spacing: -0.045em; }
.evp-title em { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-style: italic; letter-spacing: -0.01em; color: #C9BCFF; }
.evp-sub { margin-block: 12px 0; max-width: 620px; color: rgba(255, 255, 255, .78); font-size: 15px; }
.evp-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-block-start: 16px; font-size: 13.5px; color: rgba(255, 255, 255, .86); }
.evp-meta span { display: inline-flex; align-items: center; gap: 6px; }

.evp-main { position: relative; z-index: 2; max-width: 980px; margin: -52px auto 0; padding: 0 16px 64px; display: grid; gap: 16px; }
.evp-card { background: var(--evp-surface); border: 1px solid var(--evp-line); border-radius: 24px; box-shadow: var(--evp-shadow); padding: 22px; }
.evp-card h2 { margin: 0 0 4px; font-family: "Urbanist", "Manrope", sans-serif; font-size: 21px; font-weight: 800; letter-spacing: -0.03em; }
.evp-card h3 { margin: 0; font-size: 15px; font-weight: 800; }
.evp-lead { margin: 0 0 16px; color: var(--evp-muted); font-size: 14px; }
.evp-grid2 { display: grid; gap: 16px; }
@media (min-width: 860px) { .evp-grid2 { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; } }

/* Notices */
.evp-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; font-size: 14px; font-weight: 600; }
.evp-note svg { margin-block-start: 3px; }
.evp-note.is-good { background: var(--evp-good-soft); color: var(--evp-good); }
.evp-note.is-warn { background: var(--evp-warn-soft); color: var(--evp-warn); }
.evp-note.is-bad { background: var(--evp-bad-soft); color: var(--evp-bad); }
.evp-note.is-info { background: var(--evp-accent-soft); color: var(--evp-accent); }

/* Forms */
.evp-form { display: grid; gap: 14px; }
.evp-row { display: grid; gap: 14px; }
@media (min-width: 640px) { .evp-row { grid-template-columns: 1fr 1fr; } }
.evp-field { display: grid; gap: 6px; }
.evp-field label, .evp-label { font-size: 13px; font-weight: 700; color: var(--evp-text); }
.evp-field small { color: var(--evp-faint); font-size: 12.5px; font-weight: 500; }
.evp-input, .evp textarea, .evp select { width: 100%; min-height: 46px; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--evp-line); background: var(--evp-soft);
    color: var(--evp-text); font: inherit; font-size: 15px; transition: border-color .14s, background .14s; }
.evp textarea { min-height: 120px; resize: vertical; }
.evp-input:focus, .evp textarea:focus, .evp select:focus { outline: none; border-color: var(--evp-accent); background: var(--evp-surface); box-shadow: 0 0 0 4px var(--evp-accent-soft); }
.evp-err { color: var(--evp-bad); font-size: 13px; font-weight: 600; }
.evp-field.has-error .evp-input, .evp-field.has-error textarea { border-color: var(--evp-bad); }
.evp-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.evp-choice { position: relative; }
.evp-choice input { position: absolute; opacity: 0; inset: 0; }
.evp-choice span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--evp-line); background: var(--evp-soft);
    font-size: 14px; font-weight: 700; cursor: pointer; }
.evp-choice input:checked + span { background: var(--evp-ink); color: var(--evp-on-ink); border-color: var(--evp-ink); }
.evp-choice input:focus-visible + span { outline: 2px solid var(--evp-accent); outline-offset: 2px; }
.evp-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.evp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 12px; border: 1px solid transparent;
    background: var(--evp-ink); color: var(--evp-on-ink); font: inherit; font-size: 14px; font-weight: 800; text-decoration: none; cursor: pointer; transition: transform .08s, opacity .14s; }
.evp-btn:hover { opacity: .92; }
.evp-btn:active { transform: scale(.98); }
.evp-btn.is-ghost { background: transparent; color: var(--evp-text); border-color: var(--evp-line); }
.evp-btn.is-accent { background: var(--evp-accent); color: #fff; }
.evp-btn.is-good { background: var(--evp-good-soft); color: var(--evp-good); }
.evp-btn.is-sm { min-height: 36px; padding: 6px 12px; font-size: 13px; border-radius: 10px; }
.evp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Speaker header */
.evp-person { display: flex; gap: 16px; align-items: center; }
.evp-avatar { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; flex: none; overflow: hidden; background: linear-gradient(135deg, #7C5CFF, #FF7A3D);
    color: #fff; font-family: "Urbanist", sans-serif; font-weight: 800; font-size: 22px; }
.evp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.evp-avatar.is-lg { width: 96px; height: 96px; border-radius: 28px; font-size: 32px; }
.evp-avatar.is-sm { width: 30px; height: 30px; border-radius: 10px; font-size: 12px; }

/* Progress ring + checklist */
.evp-progress { display: flex; gap: 14px; align-items: center; margin-block-end: 12px; }
.evp-ring { --p: 0; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; flex: none;
    background: conic-gradient(var(--evp-accent) calc(var(--p) * 1%), var(--evp-soft) 0); }
.evp-ring b { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--evp-surface); font-size: 14px; font-weight: 800; }
.evp-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.evp-check li { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--evp-muted); }
.evp-check li i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--evp-line); font-style: normal; }
.evp-check li.is-done { color: var(--evp-text); }
.evp-check li.is-done i { background: var(--evp-good); border-color: var(--evp-good); color: #fff; }

/* Day tabs */
.evp-days { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block-end: 2px; }
.evp-days::-webkit-scrollbar { display: none; }
.evp-day-tab { flex: none; display: grid; gap: 0; min-width: 84px; padding: 10px 14px; border-radius: 16px; border: 1px solid var(--evp-line); background: var(--evp-surface);
    text-decoration: none; font-size: 12px; color: var(--evp-muted); font-weight: 700; }
.evp-day-tab b { font-size: 15px; color: var(--evp-text); font-weight: 800; }
.evp-day-tab[aria-current="true"] { background: var(--evp-ink); border-color: var(--evp-ink); color: rgba(255, 255, 255, .7); }
.evp-day-tab[aria-current="true"] b { color: var(--evp-on-ink); }
.evp-seg { display: inline-flex; padding: 4px; border-radius: 14px; background: var(--evp-soft); border: 1px solid var(--evp-line); }
.evp-seg a { padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 800; text-decoration: none; color: var(--evp-muted); }
.evp-seg a[aria-current="page"] { background: var(--evp-surface); color: var(--evp-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

/* Timeline of sessions */
.evp-day { display: grid; gap: 10px; }
.evp-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-block: 8px 2px; }
.evp-day-head h2 { font-size: 19px; }
.evp-zone { font-size: 12px; color: var(--evp-faint); font-weight: 700; }
.evp-slot { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
@media (min-width: 640px) { .evp-slot { grid-template-columns: 92px minmax(0, 1fr); } }
.evp-time { padding-block-start: 16px; text-align: end; font-variant-numeric: tabular-nums; }
.evp-time b { display: block; font-family: "Urbanist", sans-serif; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; }
.evp-time small { display: block; color: var(--evp-faint); font-size: 12px; font-weight: 700; }
.evp-time [data-evp-viewer] { color: var(--evp-accent); }
.evp-session { --track: var(--evp-line); position: relative; display: grid; gap: 8px; padding: 16px 18px; padding-inline-start: 20px; border-radius: 20px; background: var(--evp-surface);
    border: 1px solid var(--evp-line); box-shadow: var(--evp-shadow); overflow: hidden; scroll-margin-block-start: 16px; }
.evp-session::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 5px; background: var(--track); }
.evp-session.is-break { background: repeating-linear-gradient(135deg, var(--evp-soft) 0 10px, transparent 10px 20px), var(--evp-surface); box-shadow: none; }
.evp-session.is-mine { border-color: var(--evp-accent); box-shadow: 0 0 0 3px var(--evp-accent-soft), var(--evp-shadow); }
.evp-session.is-past { opacity: .62; }
.evp-session h3 { font-family: "Urbanist", "Manrope", sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.evp-session p { margin: 0; color: var(--evp-muted); font-size: 14px; }
.evp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.evp-tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--evp-soft); color: var(--evp-muted); font-size: 12px; font-weight: 800; }
.evp-tag.is-track { color: var(--evp-text); }
.evp-tag.is-track::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--track); }
.evp-tag.is-good { background: var(--evp-good-soft); color: var(--evp-good); }
.evp-tag.is-warn { background: var(--evp-warn-soft); color: var(--evp-warn); }
.evp-tag.is-bad { background: var(--evp-bad-soft); color: var(--evp-bad); }
.evp-tag.is-accent { background: var(--evp-accent-soft); color: var(--evp-accent); }
.evp-speakers { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.evp-speaker { display: inline-flex; gap: 8px; align-items: center; font-size: 13px; }
.evp-speaker b { display: block; font-weight: 800; color: var(--evp-text); }
.evp-speaker small { display: block; color: var(--evp-faint); font-size: 12px; }
.evp-session-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding-block-start: 4px; }
.evp-session-foot form { margin: 0; }
.evp-warnline { display: flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--evp-warn); }
.evp-cap { font-size: 12.5px; color: var(--evp-faint); font-weight: 700; }
.evp-cap meter { width: 80px; height: 6px; vertical-align: middle; }

/* Lists in the portal */
.evp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.evp-list li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 16px; background: var(--evp-soft); }
.evp-list li > div { min-width: 0; }
.evp-list b { display: block; font-size: 14px; overflow-wrap: anywhere; }
.evp-list small { color: var(--evp-faint); font-size: 12.5px; }
.evp-empty { padding: 26px 16px; text-align: center; color: var(--evp-muted); border: 1.5px dashed var(--evp-line); border-radius: 18px; font-size: 14px; }
.evp-foot { text-align: center; color: var(--evp-faint); font-size: 12px; padding-block: 8px 24px; }
details.evp-more > summary { cursor: pointer; font-size: 13px; font-weight: 800; color: var(--evp-accent); list-style: none; }
details.evp-more > summary::-webkit-details-marker { display: none; }
@media (prefers-reduced-motion: no-preference) {
    .evp-session, .evp-card { animation: evp-rise .42s cubic-bezier(.2, .8, .2, 1) both; }
    @keyframes evp-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 520px) {
    .evp-card { padding: 18px; border-radius: 20px; }
    .evp-hero { padding-block-end: 70px; }
    .evp-session { padding: 14px; padding-inline-start: 16px; }
}

/* css/site/modules/interact.css */
/* B3 · C3 shared pieces for interactive blocks (waitlist, RSVP, call me back, request a call, SMS sign-up, coupon, pay me,
   bookings): a heading stack, the pill email row, the phone picker, choice chips, fact pills and the "done" state. */
.ix { position: relative; display: grid; gap: 16px; padding: var(--b-pad, 22px); text-align: start; }
.ix-plain { padding: var(--b-pad, 0); }
.ix-head { display: grid; gap: 6px; align-content: start; }
.ix-top { display: flex; align-items: center; gap: 12px; }
.ix-badge { flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text);
  box-shadow: 0 12px 24px -14px var(--site-accent); }
.ix-badge svg { width: 22px; height: 22px; }
.ix-title { margin: 0; font-family: var(--site-heading); font-size: calc(1.3rem * var(--b-scale, 1)); font-weight: 750; letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance; }
.ix-text { margin: 0; color: var(--site-muted); font-size: 14.5px; line-height: 1.55; }
.ix-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.ix-fact { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: color-mix(in oklab, var(--site-accent) 11%, transparent); color: var(--site-text); }
.ix-fact svg { width: 14px; height: 14px; color: var(--site-accent); }
.ix-fact.is-hot { background: color-mix(in oklab, var(--site-accent) 92%, transparent); color: var(--site-accent-text); }
.ix-fact.is-hot svg { color: currentColor; }
.ix-form { display: grid; gap: 10px; margin: 0; }
.ix-row { display: flex; gap: 8px; padding: 5px; border-radius: calc(var(--site-btn-radius) + 4px); background: color-mix(in oklab, var(--site-surface) 82%, white);
  border: 1px solid color-mix(in oklab, var(--site-text) 14%, transparent); }
.ws-dark .ix-row { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .16); }
.ix-row:focus-within { border-color: var(--site-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 22%, transparent); }
.ix-row .ix-in { flex: 1; min-width: 0; height: 46px; padding: 0 12px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 15px; }
.ix-row .ix-in:focus { outline: none; }
.ix-go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border: 0; border-radius: var(--site-btn-radius);
  background: var(--site-accent); color: var(--site-accent-text); font: inherit; font-weight: 800; cursor: pointer; text-decoration: none; white-space: nowrap;
  box-shadow: 0 12px 26px -16px var(--site-accent); transition: transform .18s var(--site-ease), filter .18s; }
.ix-go:hover { transform: translateY(-1px); filter: brightness(1.05); }
.ix-go svg { width: 17px; height: 17px; }
.ix-go.is-wide { width: 100%; min-height: 50px; }
.ix-go[disabled] { cursor: default; }
@container ws-page (max-width: 420px) {
  .ix-row { flex-direction: column; padding: 6px; }
  .ix-row .ix-go { width: 100%; }
}
.ix-consent { display: flex; gap: 9px; align-items: flex-start; margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--site-muted); }
.ix-consent input { margin-top: 2px; width: 18px; height: 18px; flex: none; accent-color: var(--site-accent); }
.ix-fine { margin: 0; font-size: 12px; line-height: 1.45; color: var(--site-muted); display: flex; gap: 6px; align-items: flex-start; }
.ix-fine svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--site-accent); }
/* Phone: a country picker and the number, as one field. */
.ix-phone { display: flex; gap: 0; border-radius: calc(var(--site-radius) - 4px); border: 1px solid color-mix(in oklab, var(--site-text) 16%, transparent);
  background: color-mix(in oklab, var(--site-surface) 85%, white); overflow: hidden; }
.ws-dark .ix-phone { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .16); }
.ix-phone:focus-within { border-color: var(--site-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 22%, transparent); }
.ix-phone select, .ix-phone input { height: 48px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 15px; }
.ix-phone select { flex: none; max-width: 42%; padding-inline: 12px 6px; border-inline-end: 1px solid color-mix(in oklab, var(--site-text) 12%, transparent); font-weight: 700; }
.ix-phone input { flex: 1; min-width: 0; padding-inline: 12px; }
.ix-phone select:focus, .ix-phone input:focus { outline: none; }
.ix-phone .wf-input { border: 0; box-shadow: none; }
/* Choice chips (preferred times, guests): radios or checkboxes that look like pills. */
.ix-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.ix-chip { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in oklab, var(--site-text) 16%, transparent); background: color-mix(in oklab, var(--site-surface) 90%, transparent); font-size: 14px; font-weight: 650; }
.ix-chip input { position: absolute; opacity: 0; pointer-events: none; }
.ix-chip svg { width: 15px; height: 15px; color: var(--site-accent); }
.ix-chip:has(input:checked) { border-color: var(--site-accent); background: var(--site-accent); color: var(--site-accent-text); }
.ix-chip:has(input:checked) svg { color: currentColor; }
.ix-chip:has(input:focus-visible) { box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 25%, transparent); }
.ix-legend { padding: 0; margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--site-text); }
/* Done. */
.ix-done { display: grid; justify-items: center; gap: 10px; padding: 14px 6px 6px; text-align: center; }
.ix-done p { margin: 0; font-weight: 650; max-width: 40ch; }
.ix-done small { color: var(--site-muted); font-size: 13px; }
.ix-done-icon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text);
  box-shadow: 0 14px 30px -16px var(--site-accent); animation: ix-pop .5s var(--site-ease) both; }
.ix-done-icon svg { width: 26px; height: 26px; stroke-width: 3; }
@keyframes ix-pop { from { transform: scale(.6); opacity: 0; } }
.ix-people { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--site-muted); }
.ix-dots { display: inline-flex; }
.ix-dots i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--site-surface); margin-inline-start: -7px;
  background: linear-gradient(140deg, color-mix(in oklab, var(--site-accent) 85%, white), color-mix(in oklab, var(--site-accent) 55%, var(--site-ink-dark))); }
.ix-dots i:first-child { margin-inline-start: 0; }
.ix-dots i:nth-child(2) { filter: hue-rotate(40deg); }
.ix-dots i:nth-child(3) { filter: hue-rotate(-40deg); }
@media (prefers-reduced-motion: reduce) { .ix-done-icon { animation: none; } .ix-go { transition: none; } }
.ix fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ix .wf-grid > .ix-fine, .ix .wf-grid > .wf-alert { grid-column: 1 / -1; }
/* Links styled as buttons keep their colours over the page's link reset (.ws-site a). */
.ws-site a.ix-go { color: var(--site-accent-text); }

/* css/site/modules/locks.css */
/* Locked blocks (B5, ADR-0068 §7): the card shown instead of the content. */
.ws-lock { position: relative; display: grid; justify-items: center; gap: 10px; padding: 26px 22px 22px; text-align: center; border-radius: var(--b-radius, calc(var(--site-radius) + 6px));
  overflow: hidden; isolation: isolate; }
.ws-lock::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .9;
  background: radial-gradient(120% 80% at 50% -10%, color-mix(in oklab, var(--site-accent) 22%, transparent), transparent 60%),
    repeating-linear-gradient(135deg, color-mix(in oklab, var(--site-text) 4%, transparent) 0 10px, transparent 10px 20px); }
.ws-lock-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--site-accent); color: var(--site-accent-text);
  box-shadow: 0 10px 24px -12px color-mix(in oklab, var(--site-accent) 70%, transparent); }
.ws-lock-icon svg { width: 24px; height: 24px; }
.ws-lock-title { margin: 4px 0 0; font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.02em; font-weight: 700; font-family: var(--site-heading, inherit); }
.ws-lock-text { margin: 0; max-width: 34ch; color: var(--site-muted); font-size: 14.5px; }
.ws-lock-error { margin: 0; padding: 6px 12px; border-radius: 999px; background: color-mix(in oklab, #D14343 14%, transparent); color: inherit; font-size: 13.5px; font-weight: 600; }
.ws-lock-form { display: grid; gap: 10px; width: min(100%, 380px); margin-block-start: 4px; }
.ws-lock-row { display: flex; gap: 8px; }
.ws-lock-row .ws-input { flex: 1 1 auto; min-height: 46px; }
.ws-lock-form .ws-submit, .ws-lock-cta { min-height: 46px; }
.ws-lock-form > .ws-submit { width: 100%; }
.ws-lock-cta { gap: 10px; margin-block-start: 4px; text-decoration: none; }
.ws-lock-price { padding: 2px 8px; border-radius: 999px; background: color-mix(in oklab, var(--site-accent-text) 18%, transparent); font-size: 13px; }
.ws-lock-note { margin: 0; color: var(--site-muted); font-size: 12.5px; max-width: 38ch; }
.ws-lock .ws-consent { font-size: 12.5px; color: var(--site-muted); text-align: start; }
@media (max-width: 420px) { .ws-lock-row { flex-direction: column; } }

/* css/site/modules/reviews.css */
/* Leave a review (B3 · U3): the signed review page — a radio star picker that works without scripts. */
.rv-form { display: grid; gap: 10px; text-align: start; }
.rv-kicker { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--site-muted); }
.rv-title { margin: 0 0 4px; font-size: clamp(1.4rem, 4vw, 1.8rem); line-height: 1.15; letter-spacing: -0.03em; }
.rv-label { font-weight: 700; font-size: 14px; margin-top: 6px; }
.rv-opt { color: var(--site-muted); font-weight: 500; }
.rv-note { margin: 0; color: var(--site-muted); font-size: 13px; }
.rv-err { margin: 0; color: var(--site-danger, hsl(358 75% 59%)); font-size: 13px; font-weight: 600; }
.rv-body { height: auto; min-height: 120px; padding-block: 12px; resize: vertical; line-height: 1.5; }
.rv-stars-set { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.rv-stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.rv-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rv-stars label { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; cursor: pointer; color: color-mix(in oklab, var(--site-text) 22%, transparent); transition: color .15s, transform .15s, background .15s; }
.rv-stars label svg { width: 30px; height: 30px; fill: currentColor; }
.rv-stars label:hover, .rv-stars label:hover ~ label, .rv-stars input:checked ~ label { color: var(--site-star, hsl(42 96% 52%)); }
.rv-stars label:hover { transform: scale(1.08); }
.rv-stars input:focus-visible + label { outline: 3px solid color-mix(in oklab, var(--site-accent) 55%, transparent); outline-offset: 1px; }
.rv-send { margin-top: 8px; height: 50px; }

/* css/site/variants/single/button.css */
/* Single variant: button. The theme's button (fill × shape) with optional icon or thumbnail; style tokens restyle it. */
.ws-sv-button .ws-button-label small { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 600; letter-spacing: 0; opacity: .72; }
.ws-sv-button .ws-button-price { font-weight: 800; opacity: .9; }
.ws-button-thumb { width: 40px; height: 40px; flex: none; margin-block: -6px; margin-inline: -8px 0; border-radius: max(6px, calc(var(--site-radius) - 6px)); overflow: hidden; box-shadow: 0 6px 14px -8px rgb(0 0 0 / .4); }
.ws-bshape-pill .ws-button-thumb, .ws-s-shape-pill .ws-button-thumb { border-radius: 50%; }
.ws-button-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Accent (the classic "featured" link) and outline keep their exact old look, sheen included (stilled under reduced motion). */
.ws-site .ws-s-surface-accent .ws-button { background: var(--site-accent) !important; color: var(--site-accent-text) !important; border-color: transparent !important; box-shadow: 0 12px 28px -14px var(--site-accent) !important; position: relative; overflow: hidden; }
.ws-s-surface-accent .ws-button::after { content: ""; position: absolute; top: -50%; bottom: -50%; left: -30%; width: 30%; transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgb(255 255 255 / .35), transparent); animation: ws-sheen 4.5s ease-in-out infinite; pointer-events: none; }
.ws-site .ws-s-surface-outline .ws-button { background: transparent !important; color: var(--site-text) !important; border: 1.5px solid currentColor !important; box-shadow: none !important; }
.ws-site .ws-s-surface-soft .ws-button { background: color-mix(in oklab, var(--site-accent) 14%, transparent); color: var(--site-text); border: 1px solid color-mix(in oklab, var(--site-accent) 30%, transparent); box-shadow: none; }
.ws-site .ws-s-surface-glass .ws-button { background: color-mix(in oklab, var(--site-surface) 55%, transparent); color: var(--site-text); border: 1px solid color-mix(in oklab, var(--site-text) 14%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
.ws-site .ws-s-surface-solid .ws-button { background: var(--site-surface); color: var(--site-text); border: 1px solid var(--site-line); }
.ws-site .ws-s-surface-gradient .ws-button { background: linear-gradient(120deg, color-mix(in oklab, var(--site-accent) 90%, #fff), color-mix(in oklab, var(--site-accent) 62%, #000)); color: var(--site-on-media); border: 0; box-shadow: 0 16px 30px -16px var(--site-accent); }
.ws-site .ws-s-surface-none .ws-button { background: transparent; color: var(--site-text); border: 0; box-shadow: none; min-height: 48px; }
.ws-site .ws-s-surface-none .ws-button:hover { background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.ws-site :is(.ws-s-elevation-sm, .ws-s-elevation-md, .ws-s-elevation-lg, .ws-s-elevation-float) .ws-button { box-shadow: var(--b-shadow); }
.ws-site .ws-s-elevation-none .ws-button { box-shadow: none; }
.ws-site .ws-s-border-hairline .ws-button { border: 1px solid color-mix(in oklab, var(--site-text) 16%, transparent); }
.ws-site .ws-s-border-strong .ws-button { border: 2px solid currentColor; }
.ws-site .ws-s-text-light .ws-button { color: var(--site-ink-light); } .ws-site .ws-s-text-dark .ws-button { color: var(--site-ink-dark); }
.ws-s-size-s .ws-sv-button { min-height: 48px; padding-block: 8px; font-size: 14px; }
.ws-s-size-l .ws-sv-button { min-height: 66px; font-size: 16.5px; }
.ws-s-size-xl .ws-sv-button { min-height: 76px; font-size: 18px; }
.ws-s-align-start .ws-sv-button .ws-button-label { text-align: start; }
.ws-s-padding-l .ws-sv-button { padding-inline: 24px; } .ws-s-padding-s .ws-sv-button { padding-inline: 12px; }
.ws-s-hover-lift .ws-button:hover { transform: translateY(-4px); }
.ws-s-hover-glow .ws-button:hover { box-shadow: 0 0 0 3px color-mix(in oklab, var(--site-accent) 35%, transparent), 0 18px 40px -18px var(--site-accent); }
.ws-s-hover-tilt .ws-button:hover { transform: translateY(-3px) rotate(-1deg); }

/* css/site/variants/single/icon-button.css */
/* Single variant: icon button. A round icon (or thumbnail) with a short label beneath. */
.ws-sv-icon-button { display: grid; justify-items: center; gap: 6px; width: fit-content; min-width: 88px; margin-inline: auto; padding: 4px; text-align: center; }
.ws-s-align-start .ws-sv-icon-button { margin-inline: 0; }
.ws-ib-disc { width: calc(64px * var(--b-scale, 1)); height: calc(64px * var(--b-scale, 1)); display: grid; place-items: center; overflow: hidden; border-radius: var(--b-radius, 50%); --b-bg: var(--site-surface); color: var(--site-accent); }
.ws-ib-disc svg { width: 26px; height: 26px; }
.ws-ib-disc img { width: 100%; height: 100%; object-fit: cover; }
.ws-sv-icon-button .ws-t1 { font-size: 13.5px; font-family: var(--site-font); letter-spacing: -0.005em; }
.ws-sv-icon-button .ws-t2 { font-size: 12px; }
.ws-s-surface-accent .ws-ib-disc { color: var(--site-accent-text); }

/* css/site/variants/single/thumb-row.css */
/* Single variant: thumbnail row. */
.ws-sv-thumb-row { display: flex; align-items: center; gap: 14px; padding: var(--b-pad, 10px 14px 10px 10px); text-align: start; min-height: 76px; }
.ws-sv-thumb-row .ws-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ws-s-surface-accent .ws-sv-thumb-row .ws-pill { background: var(--site-accent-text); color: var(--site-accent); }
.ws-s-surface-accent .ws-sv-thumb-row .ws-t2 { color: color-mix(in oklab, var(--site-accent-text) 78%, transparent); }

/* css/site/variants/single/card.css */
/* Single variant: card. */
.ws-sv-card { display: flex; flex-direction: column; overflow: hidden; text-align: start; }
.ws-card-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.ws-card-media img, .ws-card-media .ws-media-ph { transition: transform .5s var(--site-ease); }
.ws-sv-card:hover .ws-card-media img { transform: scale(1.03); }
.ws-card-body { display: block; padding: var(--b-pad, 16px 18px 18px); }
.ws-sv-card .ws-foot .ws-price { font-size: 1.1rem; }
/* Without an image: a row card with an accent icon badge. */
.ws-sv-card.is-plain { flex-direction: row; align-items: center; gap: 14px; padding: var(--b-pad, 14px 16px); isolation: isolate; position: relative; }
.ws-sv-card.is-plain::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--site-accent) 20%, transparent), transparent 55%); }
.ws-sv-card.is-plain .ws-txt { flex: 1; }
.ws-sv-card.is-plain .ws-t1 { font-size: calc(1rem * var(--b-scale, 1)); }
.ws-card-badge { width: 48px; height: 48px; flex: none; border-radius: 15px; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 10px 22px -12px var(--site-accent); }
.ws-card-badge svg { width: 22px; height: 22px; }
.ws-sv-card.is-plain .ws-pill { box-shadow: 0 10px 20px -12px var(--site-accent); }

/* css/site/variants/single/card-horizontal.css */
/* Single variant: horizontal card. */
.ws-sv-card-horizontal { display: flex; align-items: stretch; gap: 0; overflow: hidden; text-align: start; min-height: 112px; }
.ws-ch-media { position: relative; width: 36%; max-width: 220px; flex: none; min-height: 112px; background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.ws-ch-media img, .ws-ch-media .ws-media-ph { position: absolute; inset: 0; }
.ws-ch-body { flex: 1; min-width: 0; display: flex; align-items: center; padding: var(--b-pad, 14px 16px); }
.ws-sv-card-horizontal > .ws-go { align-self: center; margin-inline-end: 14px; }
.ws-sv-card-horizontal .ws-txt .ws-t1 { font-size: calc(1.05rem * var(--b-scale, 1)); }

/* css/site/variants/single/featured.css */
/* Single variant: featured. */
.ws-sv-featured { display: block; overflow: hidden; text-align: start; }
.ws-ft-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.ws-ft-media img { transition: transform .6s var(--site-ease); }
.ws-sv-featured:hover .ws-ft-media img { transform: scale(1.03); }
.ws-ft-play { position: absolute; inset-inline-end: 14px; bottom: 14px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--site-surface) 88%, transparent); color: var(--site-text); backdrop-filter: blur(8px); box-shadow: 0 10px 24px -10px rgb(0 0 0 / .5); }
.ws-ft-body { display: block; padding: var(--b-pad, 16px 18px 18px); }
.ws-sv-featured .ws-t1 { font-size: calc(1.35rem * var(--b-scale, 1)); letter-spacing: -0.03em; }

/* css/site/variants/single/split.css */
/* Single variant: split (stacks on phones). */
.ws-sv-split { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; text-align: start; }
.ws-sp-media { position: relative; aspect-ratio: 4 / 3; background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.ws-sp-media img, .ws-sp-media .ws-media-ph { position: absolute; inset: 0; }
.ws-sp-body { display: flex; align-items: center; padding: var(--b-pad, 18px 20px 20px); }
.ws-sv-split .ws-t1 { font-size: calc(1.3rem * var(--b-scale, 1)); letter-spacing: -0.03em; }
@container ws-page (min-width: 600px) { .ws-sv-split { grid-template-columns: 1fr 1fr; } .ws-sp-media { aspect-ratio: auto; min-height: 240px; } .ws-sp-body { padding: var(--b-pad, 24px 26px); } }
.ws-r-t-layout-stack .ws-sv-split, .ws-r-d-layout-stack .ws-sv-split { grid-template-columns: minmax(0, 1fr); }

/* css/site/variants/single/image-card.css */
/* Single variant: image card. */
.ws-sv-image-card { position: relative; display: flex; align-items: flex-end; min-height: 240px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--b-radius, calc(var(--site-radius) + 8px)); color: var(--site-on-media); box-shadow: var(--b-shadow, var(--site-shadow-lg)); isolation: isolate; text-align: start; }
.ws-sv-image-card > .ws-media, .ws-sv-image-card > .ws-media-ph { position: absolute; inset: 0; z-index: -2; transition: transform .6s var(--site-ease); }
.ws-sv-image-card:hover > .ws-media { transform: scale(1.04); }
.ws-ic-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgb(0 0 0 / .72)); }
.ws-ic-body { flex: 1; display: flex; align-items: flex-end; gap: 12px; padding: var(--b-pad, 18px); }
.ws-ic-body .ws-txt { flex: 1; }
.ws-sv-image-card .ws-t1 { font-size: calc(1.4rem * var(--b-scale, 1)); letter-spacing: -0.03em; color: inherit; }
.ws-sv-image-card :is(.ws-t2, .ws-meta, .ws-eyebrow) { color: color-mix(in oklab, var(--site-on-media) 82%, transparent); }
.ws-sv-image-card .ws-go { background: color-mix(in oklab, var(--site-on-media) 22%, transparent); backdrop-filter: blur(8px); }
@container ws-page (min-width: 600px) { .ws-sv-image-card { aspect-ratio: 16 / 9; } }

/* css/site/variants/single/banner.css */
/* Single variant: banner. */
.ws-sv-banner { position: relative; display: flex; align-items: center; min-height: 128px; overflow: hidden; border-radius: var(--b-radius, calc(var(--site-radius) + 6px)); color: var(--site-on-media); box-shadow: var(--b-shadow, var(--site-shadow-md)); isolation: isolate; text-align: start; }
.ws-sv-banner > .ws-media, .ws-sv-banner > .ws-media-ph { position: absolute; inset: 0; z-index: -2; }
.ws-bn-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(0 0 0 / .7), rgb(0 0 0 / .15)); }
[dir="rtl"] .ws-bn-shade { background: linear-gradient(-90deg, rgb(0 0 0 / .7), rgb(0 0 0 / .15)); }
.ws-bn-body { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: var(--b-pad, 18px 20px); }
.ws-sv-banner .ws-t1 { font-size: calc(1.2rem * var(--b-scale, 1)); color: inherit; }
.ws-sv-banner :is(.ws-t2, .ws-eyebrow) { color: color-mix(in oklab, var(--site-on-media) 82%, transparent); }
.ws-sv-banner .ws-foot { margin-top: 2px; }
.ws-sv-banner .ws-go { background: color-mix(in oklab, var(--site-on-media) 22%, transparent); }
@container ws-page (min-width: 600px) { .ws-sv-banner { min-height: 160px; } }

/* css/site/variants/single/hero-cta.css */
/* Single variant: hero. */
.ws-sv-hero-cta { position: relative; overflow: hidden; display: grid; padding: var(--b-pad, 30px 22px); text-align: var(--b-align, center); isolation: isolate;
  --b-bg: radial-gradient(80% 90% at 100% 0%, color-mix(in oklab, var(--site-accent) 28%, transparent), transparent 60%), radial-gradient(70% 80% at 0% 100%, color-mix(in oklab, var(--site-accent) 16%, transparent), transparent 60%), var(--site-surface); }
.ws-hero-media { position: absolute; inset: 0; z-index: -1; opacity: .18; }
.ws-hero-media img { filter: saturate(1.1); }
.ws-hero-body { display: grid; gap: 10px; justify-items: var(--b-align, center); }
.ws-hero-title { margin: 0; font-family: var(--site-heading); font-size: clamp(1.8rem, 1.3rem + 3cqw, 3rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.045em; max-width: 18ch; }
.ws-heading-serif .ws-hero-title { font-weight: 400; font-style: italic; letter-spacing: -0.03em; }
.ws-hero-text { margin: 0; color: var(--site-muted); font-size: 1.02rem; max-width: 44ch; }
.ws-hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: var(--b-justify, center); gap: 14px; margin-top: 8px; }
.ws-hero-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 26px; border-radius: var(--site-btn-radius); background: var(--site-accent); color: var(--site-accent-text); font-weight: 800; font-size: 15.5px; box-shadow: 0 16px 32px -14px var(--site-accent); transition: transform .2s var(--site-ease), box-shadow .2s; }
.ws-hero-btn:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -16px var(--site-accent); }
.ws-hero-btn svg { width: 18px; height: 18px; }
.ws-sv-hero-cta .ws-price { font-size: 1.3rem; }
.ws-s-surface-accent .ws-hero-btn, .ws-s-surface-gradient .ws-hero-btn { background: var(--site-accent-text); color: var(--site-accent); }
.ws-s-surface-accent .ws-hero-text { color: color-mix(in oklab, var(--site-accent-text) 80%, transparent); }

/* css/site/variants/single/tile.css */
/* Single variant: tile, and the tile look shared by the bento collection. */
.ws-sv-tile { max-width: 100%; }
.ws-k-single > .ws-sv-tile { aspect-ratio: auto; min-height: 150px; }

/* css/site/variants/single/editorial.css */
/* Single variant: editorial. */
.ws-sv-editorial { display: grid; gap: 14px; padding: 18px 0 16px; border-top: 1px solid color-mix(in oklab, var(--site-text) 16%, transparent); text-align: start; }
.ws-ed-media { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: max(4px, calc(var(--site-radius) - 4px)); background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.ws-ed-media img { transition: transform .6s var(--site-ease); }
.ws-sv-editorial:hover .ws-ed-media img { transform: scale(1.03); }
.ws-ed-body { display: grid; gap: 6px; }
.ws-ed-title { margin: 0; font-family: var(--site-heading); font-size: calc(1.5rem * var(--b-scale, 1)); font-weight: 700; line-height: 1.12; letter-spacing: -0.03em; }
.ws-heading-serif .ws-ed-title { font-weight: 400; font-style: italic; font-size: calc(1.75rem * var(--b-scale, 1)); letter-spacing: -0.02em; }
.ws-ed-dek { color: var(--site-muted); font-size: 14.5px; line-height: 1.55; }
.ws-ed-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 700; font-size: 13.5px; color: var(--site-accent); }
.ws-ed-more svg { width: 15px; height: 15px; transition: transform .2s; }
.ws-sv-editorial:hover .ws-ed-more svg { transform: translateX(calc(3px * var(--dir-sign, 1))); }
.ws-sv-editorial:hover .ws-ed-title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* css/site/variants/single/premium.css */
/* Single variant: premium. A dark glossy card whatever the theme, with an accent glow. */
.ws-sv-premium { position: relative; display: flex; align-items: center; gap: 14px; padding: var(--b-pad, 14px 16px 14px 14px); overflow: hidden; isolation: isolate; text-align: start;
  border-radius: var(--b-radius, calc(var(--site-radius) + 6px)); color: var(--site-ink-light); --site-muted: color-mix(in oklab, var(--site-ink-light) 66%, transparent);
  background: linear-gradient(160deg, color-mix(in oklab, var(--site-ink-dark) 86%, var(--site-accent)), var(--site-ink-dark) 70%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 0 0 1px color-mix(in oklab, var(--site-accent) 35%, transparent), var(--b-shadow, 0 22px 44px -22px color-mix(in oklab, var(--site-accent) 70%, #000)); }
.ws-pm-glow { position: absolute; inset: -40% -10% auto auto; width: 70%; aspect-ratio: 1; z-index: -1; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--site-accent) 55%, transparent), transparent 65%); filter: blur(6px); }
.ws-pm-media { width: 60px; height: 60px; flex: none; border-radius: 14px; overflow: hidden; display: grid; place-items: center; box-shadow: 0 10px 24px -12px rgb(0 0 0 / .8); }
.ws-pm-icon { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(145deg, var(--site-accent), color-mix(in oklab, var(--site-accent) 55%, #000)); color: var(--site-accent-text); }
.ws-pm-icon svg { width: 24px; height: 24px; }
.ws-pm-body { flex: 1; min-width: 0; }
.ws-sv-premium .ws-eyebrow { color: color-mix(in oklab, var(--site-accent) 70%, var(--site-ink-light)); }
.ws-pm-end { display: flex; align-items: center; gap: 8px; flex: none; }
.ws-pm-price { padding: 7px 12px; border-radius: 999px; font-weight: 800; font-size: 13.5px; background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 8px 20px -10px var(--site-accent); }
.ws-sv-premium .ws-go { background: rgb(255 255 255 / .1); }

/* css/site/variants/single/compact.css */
/* Single variant: compact. */
.ws-sv-compact { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: var(--b-pad, 8px 12px); border-radius: var(--b-radius, calc(var(--site-radius) - 2px)); border: var(--b-border, 1px solid var(--site-line)); background: var(--b-bg, color-mix(in oklab, var(--site-surface) 70%, transparent)); color: var(--b-fg, inherit); text-align: start; }
.ws-cp-icon { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; color: var(--site-accent); background: color-mix(in oklab, var(--site-accent) 13%, transparent); }
.ws-cp-icon svg { width: 15px; height: 15px; }
.ws-sv-compact .ws-t1 { font-family: var(--site-font); font-size: 14.5px; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-sv-compact .ws-t2 { flex: 1; min-width: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-sv-compact .ws-price { margin-inline-start: auto; font-size: 13.5px; }
.ws-cp-go { margin-inline-start: auto; opacity: .55; display: grid; }
.ws-sv-compact .ws-t2 + .ws-cp-go, .ws-sv-compact .ws-price + .ws-cp-go { margin-inline-start: 0; }

/* css/site/variants/single/minimal-text.css */
/* Single variant: text link. */
.ws-sv-minimal-text { display: grid; gap: 2px; padding: 10px 2px; text-align: var(--b-align, center); justify-items: var(--b-align, center); }
.ws-mt-line { display: inline-flex; align-items: center; gap: 6px; }
.ws-mt-title { font-family: var(--site-heading); font-size: calc(1.12rem * var(--b-scale, 1)); font-weight: 700; letter-spacing: -0.02em; text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--site-accent) 0%, transparent); text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color .2s; }
.ws-sv-minimal-text:hover .ws-mt-title { text-decoration-color: var(--site-accent); }
.ws-mt-arrow { display: grid; color: var(--site-accent); transition: transform .2s var(--site-ease); }
.ws-mt-arrow svg { width: 16px; height: 16px; }
.ws-sv-minimal-text:hover .ws-mt-arrow { transform: translate(2px, -2px); }

/* css/site/variants/collection/list.css */
/* Collection variant: list. Rows separated by hairlines inside one surface. */
.ws-cv-list { padding: var(--b-pad, 4px 14px); }
.ws-cv-list .ws-track { gap: 0; }
.ws-cv-list .ws-track > div + div { border-top: 1px solid color-mix(in oklab, var(--site-text) 9%, transparent); }
.ws-li { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 2px; text-align: start; }
a.ws-li:hover .ws-t1 { color: var(--site-accent); }
.ws-li .ws-txt { flex: 1; }
.ws-li .ws-t1 { font-size: calc(1rem * var(--b-scale, 1)); transition: color .15s; }
.ws-li-thumb { width: 44px; height: 44px; flex: none; border-radius: 10px; overflow: hidden; }
.ws-li-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ws-li-go { opacity: .45; display: grid; }
.ws-li .ws-ico { width: 36px; height: 36px; }

/* css/site/variants/collection/buttons.css */
/* Collection variant: buttons. A stack of theme buttons. */
.ws-cv-buttons .ws-track { gap: var(--gap, 12px); }
.ws-cv-buttons .ws-button-label small { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 600; opacity: .72; }
.ws-cv-buttons .ws-button-thumb { width: 40px; height: 40px; flex: none; margin-block: -6px; margin-inline: -8px 0; border-radius: max(6px, calc(var(--site-radius) - 6px)); overflow: hidden; }
.ws-cv-buttons .ws-button-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ws-site .ws-s-surface-accent .ws-cv-buttons .ws-button { background: var(--site-accent); color: var(--site-accent-text); border-color: transparent; }
.ws-site .ws-s-surface-outline .ws-cv-buttons .ws-button { background: transparent; color: var(--site-text); border: 1.5px solid currentColor; box-shadow: none; }

/* css/site/variants/collection/rows.css */
/* Collection variant: rows. Card rows with thumbnails. */
.ws-cv-rows .ws-track { gap: 10px; }
.ws-row { display: flex; align-items: center; gap: 14px; padding: var(--b-pad, 10px 14px 10px 10px); min-height: 76px; text-align: start; }
.ws-row .ws-txt { flex: 1; }
.ws-row .ws-foot { margin-top: 2px; }
@container ws-page (min-width: 1024px) { .ws-cv-rows .ws-track { grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); } }

/* css/site/variants/collection/grid.css */
/* Collection variant: grid. Two columns on phones and tablets, three on desktop (block.responsive columns override).
   Items without media are tiles, which is the classic Tiles look; style.surface gradient gives the classic gradient tiles. */
.ws-cv-grid .ws-track { --c: 2; grid-template-columns: repeat(var(--cols, var(--c)), minmax(0, 1fr)); gap: 10px; }
@container ws-page (min-width: 1024px) { .ws-cv-grid .ws-track { --c: 3; } }
.ws-gcard { display: flex; flex-direction: column; overflow: hidden; text-align: start; }
.ws-gcard-media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.ws-gcard-media img { transition: transform .5s var(--site-ease); }
.ws-gcard:hover .ws-gcard-media img { transform: scale(1.04); }
.ws-gcard-body { display: block; padding: 10px 12px 12px; }
.ws-gcard .ws-t1 { font-size: 14.5px; }
.ws-gcard .ws-foot { margin-top: 4px; }

/* The tile (the Tiles block's look since 2.0). */
.ws-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 124px; padding: var(--b-pad, 14px); border-radius: var(--b-radius, calc(var(--site-radius) + 2px)); overflow: hidden; isolation: isolate; text-align: start;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; box-shadow: var(--b-shadow, 0 12px 30px -22px rgb(0 0 0 / .4)); }
a.ws-tile:hover { transform: translateY(-3px); }
.ws-tile-icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in oklab, var(--site-accent) 16%, transparent); color: var(--site-accent); }
.ws-tile-text { display: grid; gap: 2px; }
.ws-tile-text b { font-family: var(--site-heading); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.ws-tile-text small { font-size: 12.5px; opacity: .72; font-weight: 600; }
.ws-tile-arrow { position: absolute; top: 12px; inset-inline-end: 12px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--site-text) 7%, transparent); }
.ws-tile-arrow svg { width: 14px; height: 14px; }
.ws-card-glass .ws-tile { backdrop-filter: blur(16px); }
.ws-s-surface-outline .ws-tile .ws-tile-icon { border: 1.5px solid currentColor; background: none; color: inherit; }
.ws-s-surface-outline .ws-tile { border: 1.5px solid color-mix(in oklab, var(--site-text) 22%, transparent); }
/* Gradient tiles: four hues in turn, as the classic Tiles block. */
.ws-s-surface-gradient .ws-tile { color: #fff; background: none; border: 0; box-shadow: 0 14px 30px -18px rgb(0 0 0 / .5); }
.ws-s-surface-gradient .ws-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 90% at 100% 0%, rgb(255 255 255 / .35), transparent 55%), linear-gradient(150deg, color-mix(in oklab, var(--site-accent) 88%, #fff), color-mix(in oklab, var(--site-accent) 70%, #000)); }
.ws-s-surface-gradient .ws-tile:nth-child(4n+2)::before { background: radial-gradient(90% 90% at 100% 0%, rgb(255 255 255 / .3), transparent 55%), linear-gradient(150deg, color-mix(in oklab, var(--site-text) 80%, var(--site-accent)), var(--site-text)); }
.ws-s-surface-gradient .ws-tile:nth-child(4n+3)::before { background: radial-gradient(90% 90% at 100% 0%, rgb(255 255 255 / .3), transparent 55%), linear-gradient(150deg, color-mix(in oklab, var(--site-accent) 55%, #7C5CFF), color-mix(in oklab, var(--site-accent) 35%, #3A1FB0)); }
.ws-s-surface-gradient .ws-tile .ws-tile-icon { background: rgb(255 255 255 / .18); color: inherit; }
.ws-s-surface-gradient .ws-tile .ws-tile-arrow { background: rgb(255 255 255 / .18); }
.ws-s-surface-gradient .ws-tile:nth-child(4n+2) { color: var(--site-bg-base); }
.ws-dark .ws-s-surface-gradient .ws-tile:nth-child(4n+2) { color: #0A0B0B; }
/* Carousel layout (phones with many items): cards peek. */
.ws-cv-grid { --car-w: 46%; }
/* An odd last item fills the row on two-column layouts (phones and tablets), unless columns were set explicitly. */
@container ws-page (max-width: 1023.98px) { .ws-block:not([class*="-cols-"]) .ws-cv-grid .ws-track > .ws-tile:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* css/site/variants/collection/carousel.css */
/* Collection variant: carousel. Scroll snap with the next card peeking in; arrows with site.js. */
.ws-cv-carousel { --car-w: 78%; }
.ws-cv-carousel .ws-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; overscroll-behavior-x: contain; scrollbar-width: none; padding: 2px 2px 8px; margin: -2px -2px 0; }
.ws-cv-carousel .ws-track::-webkit-scrollbar { display: none; }
.ws-cv-carousel .ws-track > * { flex: 0 0 var(--car-w); scroll-snap-align: start; }
.ws-cv-carousel .ws-car-nav { display: flex; }
@container ws-page (min-width: 600px) { .ws-cv-carousel { --car-w: 44%; } }
@container ws-page (min-width: 1024px) { .ws-cv-carousel { --car-w: calc((100% - 24px) / 3); } }
.ws-cc { display: flex; flex-direction: column; overflow: hidden; text-align: start; }
.ws-cc-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.ws-cc-media img { transition: transform .5s var(--site-ease); }
.ws-cc:hover .ws-cc-media img { transform: scale(1.04); }
.ws-cc-body { display: block; padding: 12px 14px 14px; }
.ws-cc .ws-t1 { font-size: 15px; }
.ws-track:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 55%, transparent); outline-offset: 4px; border-radius: 12px; }

/* css/site/variants/collection/bento.css */
/* Collection variant: bento. Mixed tile sizes: the first is 2×2, every fourth is wide. */
.ws-cv-bento .ws-track { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(128px, auto); grid-auto-flow: dense; gap: 10px; }
@container ws-page (min-width: 600px) { .ws-cv-bento .ws-track { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); } }
.ws-cv-bento .ws-tile-x { aspect-ratio: auto; min-height: 128px; height: 100%; }
.ws-cv-bento .is-big { grid-column: span 2; grid-row: span 2; }
.ws-cv-bento .is-big .ws-tile-text b { font-size: 1.5rem; }
.ws-cv-bento .is-wide { grid-column: span 2; }
.ws-cv-bento .ws-tile-x:nth-child(4n+2):not(.has-media) { background: var(--b-bg, radial-gradient(90% 90% at 100% 0%, rgb(255 255 255 / .28), transparent 55%), linear-gradient(150deg, color-mix(in oklab, var(--site-text) 82%, var(--site-accent)), var(--site-text))); color: var(--b-fg, var(--site-bg-base)); }
.ws-cv-bento .ws-tile-x:nth-child(4n+3):not(.has-media) { background: var(--b-bg, var(--site-surface)); color: var(--b-fg, var(--site-text)); border: var(--b-border, 1px solid var(--site-line)); }
.ws-cv-bento .ws-tile-x:nth-child(4n+3):not(.has-media) .ws-tile-icon { background: color-mix(in oklab, var(--site-accent) 16%, transparent); color: var(--site-accent); }

/* css/site/variants/collection/masonry.css */
/* Collection variant: masonry. CSS columns; every image keeps its own shape. */
.ws-cv-masonry .ws-track { display: block; columns: var(--cols, 2); column-gap: 10px; }
@container ws-page (min-width: 1024px) { .ws-cv-masonry .ws-track { columns: var(--cols, 3); } }
.ws-mz { display: block; break-inside: avoid; margin-bottom: 10px; border-radius: var(--b-radius, calc(var(--site-radius) + 4px)); overflow: hidden; background: var(--b-bg, var(--site-surface)); box-shadow: var(--b-shadow, var(--site-shadow-md)); text-align: start; }
.ws-mz-media { display: block; aspect-ratio: var(--ratio, 4 / 5); overflow: hidden; }
.ws-mz-media img { transition: transform .5s var(--site-ease); }
.ws-mz:hover .ws-mz-media img { transform: scale(1.04); }
.ws-mz-cap { display: grid; gap: 1px; padding: 10px 12px 12px; font-size: 14px; }
.ws-mz-cap small { color: var(--site-muted); font-size: 12.5px; font-weight: 600; }
.ws-cv-masonry .ws-mz:nth-child(3n+2) .ws-mz-media:not([style]) { aspect-ratio: 1; }
.ws-cv-masonry .ws-mz:nth-child(3n) .ws-mz-media:not([style]) { aspect-ratio: 3 / 4; }

/* css/site/variants/collection/showcase.css */
/* Collection variant: showcase. One large item with the rest beside it (stacked on phones). */
.ws-cv-showcase .ws-track { grid-template-columns: minmax(0, 1fr); gap: 12px; }
@container ws-page (min-width: 600px) { .ws-cv-showcase .ws-track { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: stretch; } }
.ws-sc-lead { display: flex; flex-direction: column; overflow: hidden; text-align: start; }
.ws-sc-media { position: relative; display: block; aspect-ratio: 16 / 11; overflow: hidden; background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.ws-sc-body { display: block; padding: var(--b-pad, 16px 18px 18px); }
.ws-sc-lead .ws-t1 { font-size: 1.3rem; letter-spacing: -0.03em; }
.ws-sc-rest { display: grid; gap: 10px; align-content: start; }
.ws-sc-row { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: calc(var(--site-radius) + 2px); background: var(--b-bg, var(--site-surface)); border: var(--b-border, 1px solid var(--site-line)); text-align: start; }
.ws-sc-row .ws-thumb { width: 72px; height: 72px; }
.ws-sc-row .ws-txt { flex: 1; }
.ws-sc-row .ws-t1 { font-size: 14.5px; }

/* css/site/variants/collection/magazine.css */
/* Collection variant: magazine. A lead story over its image, then stories with small thumbnails. */
.ws-cv-magazine .ws-track { gap: 0; }
.ws-mg-lead { position: relative; display: flex; align-items: flex-end; min-height: 280px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--b-radius, calc(var(--site-radius) + 6px)); color: var(--site-on-media); isolation: isolate; text-align: start; margin-bottom: 8px; }
.ws-mg-lead > .ws-media, .ws-mg-lead > .ws-media-ph { position: absolute; inset: 0; z-index: -2; transition: transform .6s var(--site-ease); }
.ws-mg-lead:hover > .ws-media { transform: scale(1.03); }
.ws-mg-lead .ws-ic-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 25%, rgb(0 0 0 / .78)); }
.ws-mg-lead-body { display: grid; gap: 6px; padding: 20px; }
.ws-mg-lead .ws-eyebrow { color: color-mix(in oklab, var(--site-on-media) 85%, transparent); }
.ws-mg-title { margin: 0; font-family: var(--site-heading); font-size: clamp(1.4rem, 1.1rem + 1.8cqw, 2.2rem); line-height: 1.08; letter-spacing: -0.035em; }
.ws-heading-serif .ws-mg-title { font-weight: 400; font-style: italic; }
.ws-mg-dek { color: color-mix(in oklab, var(--site-on-media) 82%, transparent); font-size: 14.5px; max-width: 52ch; }
.ws-mg-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); text-align: start; }
.ws-mg-txt { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ws-mg-row-title { font-family: var(--site-heading); font-size: 1.08rem; line-height: 1.2; letter-spacing: -0.02em; }
a.ws-mg-row:hover .ws-mg-row-title { text-decoration: underline; text-underline-offset: 3px; }
.ws-mg-row .ws-thumb { width: 84px; height: 64px; border-radius: 8px; }
@container ws-page (min-width: 1024px) {
  .ws-cv-magazine .ws-track { grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .ws-mg-lead { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
}

/* css/site/variants/collection/accordion.css */
/* Collection variant: accordion (the classic FAQ look). Native <details>, so it works without scripts. */
.ws-cv-accordion .ws-track { gap: 8px; }
.ws-acc.ws-surface { border-radius: var(--b-radius, var(--site-radius)); box-shadow: var(--b-shadow, none); text-align: start; }
.ws-acc summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; font-weight: 500; list-style: none; min-height: 48px; }
.ws-acc summary::-webkit-details-marker { display: none; }
.ws-acc-q { flex: 1; }
.ws-acc-icon { display: grid; color: var(--site-accent); }
.ws-acc-mark { transition: transform .2s; display: grid; }
.ws-acc[open] .ws-acc-mark { transform: rotate(45deg); }
.ws-acc-a { padding: 0 16px 14px; color: var(--site-muted); font-size: 14px; }
.ws-acc-a p { margin: 0; }
.ws-acc-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-weight: 700; color: var(--site-accent); }
.ws-acc-link svg { width: 15px; height: 15px; }

/* css/site/variants/collection/tabs.css */
/* Collection variant: tabs. Without scripts every panel shows in turn; with site.js it becomes ARIA tabs. */
.ws-tablist { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px; margin-bottom: 10px; border-radius: 999px; background: color-mix(in oklab, var(--site-text) 6%, transparent); width: fit-content; max-width: 100%; margin-inline: auto; }
.ws-s-align-start .ws-tablist { margin-inline: 0; }
.ws-tablist::-webkit-scrollbar { display: none; }
.ws-tablist [role="tab"] { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--site-muted); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.ws-tablist [role="tab"][aria-selected="true"] { background: var(--site-surface); color: var(--site-text); box-shadow: var(--site-shadow-sm); }
.ws-tabpanel { display: grid; gap: 10px; padding: var(--b-pad, 18px); text-align: start; }
.ws-tabpanel[hidden] { display: none; }
.ws-tabpanel-title { margin: 0; font-family: var(--site-heading); font-size: 1.15rem; letter-spacing: -0.02em; }
.ws-tab-media { display: block; aspect-ratio: 16 / 9; border-radius: calc(var(--site-radius) - 2px); overflow: hidden; }
.ws-tabpanel .ws-cta { justify-self: start; }
html:not(.ws-js) .ws-mode-public .ws-tablist { display: none; }
.ws-js .ws-mode-public .ws-cv-tabs .ws-tabpanel-title, .ws-mode-canvas .ws-cv-tabs .ws-tabpanel-title, .ws-mode-thumb .ws-cv-tabs .ws-tabpanel-title { display: none; }
.ws-mode-canvas .ws-cv-tabs .ws-tabpanel:not(:first-child), .ws-mode-thumb .ws-cv-tabs .ws-tabpanel:not(:first-child) { display: none; }

/* css/site/variants/collection/marquee.css */
/* Collection variant: marquee. A slow strip that loops (two copies), pauses on hover and focus, and stops under reduced motion. */
.ws-mq-view { display: flex; overflow: hidden; gap: 12px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ws-cv-marquee .ws-track { display: flex; flex: none; gap: 12px; min-width: 100%; justify-content: space-around; animation: ws-marquee calc(var(--n, 6) * 4s) linear infinite; }
.ws-cv-marquee:is(:hover, :focus-within) .ws-track { animation-play-state: paused; }
@keyframes ws-marquee { to { transform: translateX(calc(-100% - 12px)); } }
[dir="rtl"] .ws-cv-marquee .ws-track { animation-name: ws-marquee-rtl; }
@keyframes ws-marquee-rtl { to { transform: translateX(calc(100% + 12px)); } }
.ws-mq-item { display: inline-flex; align-items: center; gap: 10px; flex: none; min-height: 48px; padding: 8px 16px; border-radius: 999px; background: var(--b-bg, var(--site-surface)); border: var(--b-border, 1px solid var(--site-line)); white-space: nowrap; font-weight: 700; font-size: 14.5px; }
.ws-mq-media { width: 32px; height: 32px; border-radius: 50%; overflow: hidden; }
.ws-mq-icon { display: grid; color: var(--site-accent); }
.ws-mq-s { font-weight: 500; color: var(--site-muted); font-size: 13px; }
.ws-mode-canvas .ws-cv-marquee .ws-track, .ws-mode-thumb .ws-cv-marquee .ws-track, .ws-motion-none .ws-cv-marquee .ws-track { animation: none; }
@media (prefers-reduced-motion: reduce) { .ws-mq-view { flex-wrap: wrap; mask-image: none; -webkit-mask-image: none; } .ws-cv-marquee .ws-track { animation: none; flex-wrap: wrap; justify-content: center; } .ws-cv-marquee .ws-mq-copy { display: none; } }

/* css/site/variants/collection/stack-cards.css */
/* Collection variant: stacked cards. Each card sticks a little lower than the last, so they pile up as you scroll. */
.ws-cv-stack-cards .ws-track { gap: 14px; }
.ws-sk { position: sticky; top: calc(16px + var(--i, 0) * 12px); display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; text-align: start; box-shadow: var(--b-shadow, 0 -10px 30px -22px rgb(0 0 0 / .35), var(--site-shadow-lg)); }
.ws-mode-canvas .ws-sk, .ws-mode-thumb .ws-sk { position: relative; top: 0; }
.ws-sk-media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.ws-sk-body { display: grid; gap: 6px; padding: var(--b-pad, 16px 18px 18px); }
.ws-sk-n { font-family: var(--site-heading); font-weight: 800; font-size: 13px; letter-spacing: .08em; color: var(--site-accent); }
@container ws-page (min-width: 600px) { .ws-sk { grid-template-columns: 1fr 1fr; } .ws-sk-media { aspect-ratio: auto; min-height: 220px; } .ws-sk-body { align-content: center; padding: 24px; } }

/* css/site/variants/collection/timeline.css */
/* Collection variant: timeline. */
.ws-cv-timeline .ws-track { list-style: none; margin: 0; padding: 0; gap: 0; position: relative; }
.ws-tl { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding-bottom: 18px; text-align: start; }
.ws-tl::before { content: ""; position: absolute; inset-inline-start: 13px; top: 28px; bottom: 0; width: 2px; background: color-mix(in oklab, var(--site-text) 12%, transparent); }
.ws-tl:last-child::before { display: none; }
.ws-tl-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 0 0 5px color-mix(in oklab, var(--site-accent) 18%, transparent); }
.ws-tl-dot:empty::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ws-tl-dot svg { width: 14px; height: 14px; }
.ws-tl-card { display: block; padding: 2px 0 0; }
a.ws-tl-card:hover .ws-t1 { color: var(--site-accent); }

/* css/site/variants/collection/compact.css */
/* Collection variant: compact. Chips that wrap. */
.ws-cv-compact .ws-track { display: flex; flex-wrap: wrap; gap: 8px; justify-content: var(--b-justify, center); }
.ws-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px; border-radius: 999px; background: var(--b-bg, var(--site-surface)); border: var(--b-border, 1px solid var(--site-line)); color: var(--b-fg, inherit); font-weight: 700; font-size: 14px; box-shadow: var(--b-shadow, var(--site-shadow-sm)); }
.ws-chip svg { width: 16px; height: 16px; color: var(--site-accent); }
.ws-chip-media { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; margin-inline-start: -6px; }
.ws-chip-s { font-weight: 500; color: var(--site-muted); font-size: 13px; }

/* css/site/blocks/_background.css */
/* Page backgrounds (owner item 2; PageBackground). Linked by pages whose background needs more than a colour or a
   gradient: the animated gradient, the mesh, the pattern library, an image, a video and the glass backdrop. Every value
   comes from the theme's custom properties (PageBackground::style), never from raw user CSS. The layer
   (sites/partials/background.blade.php) sits under the page frame; video, mesh, glass and fixed images keep a
   viewport-tall layer in place while the page scrolls (position: sticky, no background-attachment: fixed). */

/* ---- Animated gradient ------------------------------------------------------------------------------------------ */
.ws-bg-animated { background-size: 280% 280%; animation: ws-bg-pan var(--site-bg-speed, 22s) ease-in-out infinite alternate; }
@keyframes ws-bg-pan { from { background-position: 0% 30%; } to { background-position: 100% 70%; } }

/* ---- Pattern library: drawn in the text colour over the page colour --------------------------------------------- */
.ws-bgp { --ink: color-mix(in oklab, var(--site-text) 10%, transparent); }
.ws-bgp-dots { background: radial-gradient(var(--ink) 1.3px, transparent 1.8px) 0 0 / 18px 18px, var(--site-bg); }
.ws-bgp-grid { background: linear-gradient(var(--ink) 1px, transparent 1px) 0 0 / 26px 26px, linear-gradient(90deg, var(--ink) 1px, transparent 1px) 0 0 / 26px 26px, var(--site-bg); }
.ws-bgp-lines { background: repeating-linear-gradient(0deg, var(--ink) 0 1px, transparent 1px 16px), var(--site-bg); }
.ws-bgp-diagonal { background: repeating-linear-gradient(45deg, var(--ink) 0 1px, transparent 1px 13px), var(--site-bg); }
.ws-bgp-checks { background: conic-gradient(color-mix(in oklab, var(--site-text) 5%, transparent) 25%, transparent 0 50%, color-mix(in oklab, var(--site-text) 5%, transparent) 0 75%, transparent 0) 0 0 / 32px 32px, var(--site-bg); }
.ws-bgp-stagger { background: radial-gradient(var(--ink) 1.4px, transparent 2px) 0 0 / 28px 28px, radial-gradient(var(--ink) 1.4px, transparent 2px) 14px 14px / 28px 28px, var(--site-bg); }
.ws-bgp-rings { background: repeating-radial-gradient(circle at 100% 0%, transparent 0 22px, var(--ink) 22px 23px), var(--site-bg); }
.ws-bgp-waves { background: radial-gradient(circle at 50% 100%, transparent 8px, var(--ink) 8.5px 10px, transparent 10.5px) 0 0 / 26px 13px, var(--site-bg); }
/* Grain: a static SVG noise tile (img-src data: is allowed; nothing here comes from the page). Light grain on dark pages. */
.ws-bgp-grain { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 180px, var(--site-bg); }
.ws-dark.ws-bgp-grain, .ws-dark .ws-bgp-grain { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px 180px, var(--site-bg); }

/* ---- The layer under the page frame ------------------------------------------------------------------------------ */
.ws-bgl { position: absolute; inset: 0; z-index: 0; overflow: hidden; overflow: clip; pointer-events: none; }
.ws-bgl-in { position: absolute; inset: 0; overflow: hidden; overflow: clip; }
.ws-bgl-stick .ws-bgl-in { position: sticky; inset: auto; top: 0; width: 100%; height: 100vh; height: 100dvh; max-height: 100%; }
@media (min-width: 1024px) { .ws-bg-fixed .ws-bgl-image .ws-bgl-in { position: sticky; inset: auto; top: 0; width: 100%; height: 100vh; height: 100dvh; max-height: 100%; } }
.ws-is-thumb .ws-bgl-in, .ws-mode-thumb .ws-bgl-in { position: absolute; inset: 0; height: auto; }

/* Image: fill, fit or tile, at a focal position, with an optional blur. */
.ws-bgl-img { position: absolute; inset: calc(-2 * var(--site-bg-blur, 0px)); background: var(--site-bg-image) var(--site-bg-pos, 50% 50%) / var(--site-bg-size, cover) var(--site-bg-repeat, no-repeat); filter: blur(var(--site-bg-blur, 0px)); }

/* Video (and its poster): object-fit cover at the focal position. */
.ws-bgl-poster, .ws-bgl-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--site-bg-pos, 50% 50%); display: block; border: 0; }
.ws-bgl-media { background: transparent; }

/* The overlay that keeps text readable over a photo or a video. */
.ws-bgl-shade { position: absolute; inset: 0; background: color-mix(in oklab, var(--site-bg-overlay-color, var(--site-bg-base)) calc(var(--site-bg-overlay, .4) * 100%), transparent); }

/* Mesh: four soft colour fields drifting slowly. Glass: the same fields, still and larger, under frosted cards. */
.ws-bgl-blobs { position: absolute; inset: -12%;
  background: radial-gradient(55% 50% at 18% 20%, var(--bg-m1, transparent) 0%, transparent 72%), radial-gradient(55% 48% at 86% 16%, var(--bg-m2, transparent) 0%, transparent 72%),
    radial-gradient(60% 52% at 80% 84%, var(--bg-m3, transparent) 0%, transparent 72%), radial-gradient(55% 52% at 14% 82%, var(--bg-m4, transparent) 0%, transparent 72%); }
.ws-bgl-mesh .ws-bgl-blobs { animation: ws-mesh var(--site-bg-speed, 22s) ease-in-out infinite alternate; will-change: transform; }
@keyframes ws-mesh { 0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); } 50% { transform: translate3d(5%, -4%, 0) rotate(9deg) scale(1.1); } 100% { transform: translate3d(-4%, 5%, 0) rotate(-7deg) scale(1.04); } }
.ws-bgl-glass .ws-bgl-blobs { inset: -6%; opacity: .9;
  background: radial-gradient(48% 34% at 16% 18%, var(--bg-m1, transparent) 0%, transparent 72%), radial-gradient(46% 34% at 90% 46%, var(--bg-m2, transparent) 0%, transparent 72%),
    radial-gradient(52% 36% at 26% 88%, var(--bg-m3, transparent) 0%, transparent 72%); }
.ws-bgk-glass { --site-blur: blur(22px) saturate(1.5); }

/* Speeds (animated gradient and mesh). */
.ws-bgs-slow { --site-bg-speed: 36s; }
.ws-bgs-fast { --site-bg-speed: 12s; }

/* ---- Motion: a still page when the theme or the visitor asks for one ----------------------------------------------- */
.ws-motion-none .ws-bg-animated, .ws-motion-none .ws-bgl-blobs, .ws-is-thumb .ws-bgl-blobs { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .ws-bg-animated, .ws-bgl-blobs { animation: none !important; }
  /* The builder canvas plays the loop with autoplay; visitors who prefer less motion see the poster there too. */
  .ws-bgl-video .ws-bgl-media[autoplay] { display: none; }
}

/* css/site/blocks/_bgvideo.css */
/* Background video (owner item 2): the pause / play button site-media.js reveals once the loop is playing. A looping
   video beside the content must be pausable (WCAG 2.2.2), and the button stays a 44 px target clear of the safe area. */
.ws-bgv-toggle { position: fixed; z-index: 45; inset-block-end: max(14px, env(safe-area-inset-bottom, 0px)); inset-inline-end: 14px;
  width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in oklab, var(--site-text) 18%, transparent); color: var(--site-text);
  background: color-mix(in oklab, var(--site-bg-overlay-color, var(--site-bg-base)) 72%, transparent);
  backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); box-shadow: var(--site-shadow-sm); }
.ws-bgv-toggle[hidden] { display: none; }
.ws-bgv-toggle svg { width: 18px; height: 18px; }
.ws-bgv-toggle .ws-bgv-i-play { display: none; }
.ws-bgv-toggle[aria-pressed="false"] .ws-bgv-i-play { display: inline-flex; }
.ws-bgv-toggle[aria-pressed="false"] .ws-bgv-i-pause { display: none; }
.ws-bgv-toggle:hover { background: color-mix(in oklab, var(--site-bg-overlay-color, var(--site-bg-base)) 88%, transparent); }
.ws-bgv-toggle.is-raised { inset-block-end: max(84px, calc(env(safe-area-inset-bottom, 0px) + 70px)); }
/* The video fades in over its poster once it really plays, so a slow start never flashes black. */
.ws-bgl-video.has-poster .ws-bgl-media[data-ws-bgv] { opacity: 0; transition: opacity .6s ease; }
.ws-bgl-video.has-poster.is-playing .ws-bgl-media[data-ws-bgv] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ws-bgl-video .ws-bgl-media[data-ws-bgv] { transition: none; } }

/* css/site/blocks/_networks.css */
/* Brand colours of social networks, messengers and community platforms (the only fixed colours the social blocks use).
   A block puts .ws-net-{key} on an element and reads --net (the brand colour) and --net-ink (text on it).
   Pulled in by social profiles, follower counts, messengers, community channels and share this page. */
.ws-site [class*="ws-net-"] { --net-ink: #FFFFFF; }
.ws-net-instagram { --net: #E1306C; } .ws-net-tiktok { --net: #111111; } .ws-net-youtube { --net: #FF0033; } .ws-net-x { --net: #111111; }
.ws-net-facebook, .ws-net-facebook-group { --net: #1877F2; } .ws-net-linkedin { --net: #0A66C2; } .ws-net-threads { --net: #111111; }
.ws-net-pinterest { --net: #E60023; } .ws-net-twitch { --net: #9146FF; } .ws-net-spotify { --net: #1DB954; } .ws-net-soundcloud { --net: #FF5500; }
.ws-net-applemusic { --net: #FA243C; } .ws-net-github { --net: #24292F; } .ws-net-dribbble { --net: #EA4C89; } .ws-net-behance { --net: #1769FF; }
.ws-net-bluesky { --net: #1185FE; } .ws-net-mastodon { --net: #6364FF; } .ws-net-medium { --net: #111111; } .ws-net-substack { --net: #FF6719; }
.ws-net-patreon { --net: #FF424D; } .ws-net-reddit { --net: #FF4500; } .ws-net-discord { --net: #5865F2; }
.ws-net-telegram { --net: #229ED9; } .ws-net-whatsapp, .ws-net-whatsapp-channel, .ws-net-whatsapp-community { --net: #25D366; }
.ws-net-messenger { --net: #0A7CFF; } .ws-net-signal { --net: #3A76F0; } .ws-net-viber { --net: #7360F2; } .ws-net-sms { --net: #34C759; }
.ws-net-wechat { --net: #07C160; } .ws-net-line { --net: #06C755; } .ws-net-slack { --net: #4A154B; } .ws-net-skool { --net: #2E6BE6; }
.ws-net-circle { --net: #5F45FF; } .ws-net-email { --net: #6B7280; } .ws-net-linkedin-share { --net: #0A66C2; }
.ws-site .ws-net-snapchat { --net: #FFFC00; --net-ink: #111111; }
.ws-site :is(.ws-net-website, .ws-net-newsletter, .ws-net-other) { --net: var(--site-accent); --net-ink: var(--site-accent-text); }

/* css/site/blocks/accordion_group.css */
/* Accordion group (B3 · U3): accordion (one card, panels between hairlines) and cards (each panel its own card). */
.ag { display: flex; flex-direction: column; gap: 14px; text-align: start; }
.ag-head { display: grid; gap: 4px; text-align: var(--b-align, start); }
.ag-title { margin: 0; font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.025em; font-weight: 700; font-family: var(--site-heading, inherit); }
.ag-intro { margin: 0; color: var(--site-muted); font-size: 14.5px; }
.ag-list { display: flex; flex-direction: column; }
.ag-accordion .ag-list { border-radius: var(--b-radius, calc(var(--site-radius) + 4px)); overflow: hidden; }
.ag-accordion .ag-item + .ag-item { border-block-start: 1px solid var(--site-line); }
.ag-cards .ag-list { gap: 10px; }
.ag-cards .ag-item { border-radius: var(--b-radius, calc(var(--site-radius) + 2px)); box-shadow: var(--b-shadow, none); transition: box-shadow .2s, transform .2s; }
.ag-cards .ag-item[open] { box-shadow: var(--site-shadow-md, 0 14px 32px -20px rgb(0 0 0 / .35)); }
.ag-sum { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 14px 18px; cursor: pointer; list-style: none; font-weight: 700; font-size: 15.5px; letter-spacing: -0.012em; }
.ag-sum::-webkit-details-marker { display: none; }
.ag-sum:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 55%, transparent); outline-offset: -3px; border-radius: var(--site-radius); }
.ag-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in oklab, var(--site-accent) 14%, transparent); color: var(--site-accent); flex: none; }
.ag-ico svg { width: 17px; height: 17px; }
.ag-q { flex: 1; min-width: 0; }
.ag-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in oklab, var(--site-text) 6%, transparent); transition: transform .25s cubic-bezier(.2,.8,.2,1), background .2s; flex: none; }
.ag-mark svg { width: 16px; height: 16px; }
.ag-item[open] .ag-mark { transform: rotate(180deg); background: var(--site-accent); color: var(--site-accent-text); }
.ag-body { display: flex; flex-direction: column; gap: var(--gap, 12px); padding: 0 18px 18px; }
.ag-item[open] .ag-body { animation: ag-open .3s cubic-bezier(.2,.8,.2,1); }
@keyframes ag-open { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .ag-item[open] .ag-body { animation: none; } .ag-mark { transition: none; } }
.ag-demo { margin: 0; color: var(--site-muted); font-size: 14px; }
.ws-mode-thumb .ag-item:not(:first-child) .ag-body { display: none; }

/* css/site/blocks/activity_ticker.css */
/* Live activity (B4): ticker (marquee strip), toast (a card in the bottom corner, in the sticky slot), pill. */
.ws-act { min-width: 0; }
.ws-act-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--site-accent); box-shadow: 0 0 0 0 color-mix(in oklab, var(--site-accent) 60%, transparent); animation: ws-act-pulse 2.4s ease-out infinite; }
@keyframes ws-act-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--site-accent) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 8px transparent; } }
.ws-act-ico { display: inline-grid; place-items: center; flex: none; color: var(--site-accent); }
.ws-site .ws-act-ico svg { width: 15px; height: 15px; }
.ws-act-sample { margin: 0 0 8px; font-size: 11.5px; font-weight: 650; color: var(--site-muted); text-align: center; }

/* Ticker: a label chip, then the events sliding by; hover or focus pauses it. */
.ws-act-ticker { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 999px; overflow: hidden;
  background: var(--b-bg, var(--site-surface)); border: var(--b-border, 1px solid color-mix(in oklab, var(--site-text) 9%, transparent)); box-shadow: var(--b-shadow, var(--site-shadow-sm)); }
.ws-act-ticker:has(.ws-act-sample) { flex-wrap: wrap; justify-content: center; border-radius: calc(var(--site-radius) + 10px); }
.ws-act-ticker .ws-act-sample { flex-basis: 100%; margin: 4px 0 0; }
.ws-act-live { display: inline-flex; align-items: center; gap: 8px; flex: none; min-height: 34px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: color-mix(in oklab, var(--site-accent) 14%, transparent); color: var(--site-text); }
.ws-act-viewport { flex: 1; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); border-radius: 999px; }
.ws-act-viewport:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 55%, transparent); outline-offset: 2px; }
.ws-act-track { display: flex; width: max-content; animation: ws-act-run calc(var(--n, 6) * 6s) linear infinite; }
.ws-act-viewport:hover .ws-act-track, .ws-act-viewport:focus-within .ws-act-track, .ws-act-viewport:focus .ws-act-track { animation-play-state: paused; }
@keyframes ws-act-run { to { transform: translateX(calc(-50% * var(--dir-sign, 1))); } }
.ws-act-run { display: flex; margin: 0; padding: 0; list-style: none; }
.ws-act-item { display: inline-flex; align-items: center; gap: 7px; padding-inline: 14px 18px; white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--site-text);
  border-inline-end: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); }
.ws-act-item small { font-size: 12px; font-weight: 600; color: var(--site-muted); }

/* Toast: one event at a time, bottom inline-start corner of the screen. */
.ws-sticky > .ws-block-activity-ticker.ws-v-toast { justify-self: start; width: min(100%, 360px); }
.ws-act-toast { position: relative; display: flex; align-items: center; gap: 4px; padding: 10px 6px 10px 10px; border-radius: calc(var(--site-radius) + 10px);
  background: color-mix(in oklab, var(--site-surface) 88%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid color-mix(in oklab, var(--site-text) 9%, transparent); box-shadow: 0 22px 44px -20px rgb(0 0 0 / .45); }
.ws-act-toast:has(.ws-act-sample) { flex-wrap: wrap; }
.ws-act-toast .ws-act-sample { flex-basis: 100%; text-align: start; margin: 0 0 4px 4px; }
.ws-act-list { flex: 1; min-width: 0; display: grid; margin: 0; padding: 0; list-style: none; }
.ws-act-card { grid-area: 1 / 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.ws-act-card:not(.is-on) { visibility: hidden; opacity: 0; }
.ws-act-card.is-on { animation: ws-act-in .45s var(--site-ease) both; }
@keyframes ws-act-in { from { opacity: 0; transform: translateY(8px); } }
.ws-act-badge { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: var(--site-accent-text);
  background: linear-gradient(140deg, var(--site-accent), color-mix(in oklab, var(--site-accent) 65%, var(--site-text))); }
.ws-site .ws-act-badge svg { width: 20px; height: 20px; }
.ws-act-copy { min-width: 0; display: grid; gap: 2px; }
.ws-act-copy b { font-size: 13.5px; font-weight: 650; line-height: 1.35; color: var(--site-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; unicode-bidi: plaintext; }
.ws-act-copy small { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--site-muted); }
.ws-act-copy .ws-act-dot { width: 6px; height: 6px; }
.ws-act-ctl { display: flex; flex-direction: column; flex: none; }
.ws-act-btn { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--site-muted); cursor: pointer; }
.ws-act-btn:hover { background: color-mix(in oklab, var(--site-text) 7%, transparent); color: var(--site-text); }
.ws-act-btn:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 55%, transparent); outline-offset: 1px; }
.ws-site .ws-act-btn svg { width: 16px; height: 16px; }
.ws-act-i-play { display: none; }
.ws-act-btn[aria-pressed="true"] .ws-act-i-pause { display: none; } .ws-act-btn[aria-pressed="true"] .ws-act-i-play { display: grid; }
html:not(.ws-js) .ws-act-btn[data-activity-pause] { display: none; }

/* Pill: the headline and the latest event in one chip. */
.ws-act-pill { display: grid; justify-items: center; }
.ws-act-pillrow { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px 10px; max-width: 100%; margin: 0; padding: 10px 18px; border-radius: 999px;
  font-size: 13.5px; line-height: 1.35; color: var(--site-text); background: var(--b-bg, var(--site-surface)); border: var(--b-border, 1px solid color-mix(in oklab, var(--site-text) 9%, transparent)); box-shadow: var(--b-shadow, var(--site-shadow-sm)); }
.ws-act-sum { font-weight: 800; }
.ws-act-sep { color: var(--site-muted); }
.ws-act-latest { color: var(--site-muted); font-weight: 600; text-align: center; }
.ws-act-latest small { font-size: 12px; opacity: .85; }

@media (prefers-reduced-motion: reduce) {
  .ws-act-dot { animation: none; }
  .ws-act-track { animation: none; }
  .ws-act-viewport { overflow-x: auto; mask-image: none; scroll-snap-type: x proximity; }
  .ws-act-run[aria-hidden="true"] { display: none; }
  .ws-act-item { scroll-snap-align: start; }
  .ws-act-card.is-on { animation: none; }
}
:is(.ws-mode-canvas, .ws-is-thumb) .ws-act-track { animation: none; }

/* css/site/blocks/add_to_calendar.css */
/* Add to calendar (ADR-0068, W3): buttons, card. */
.ws-atc { min-width: 0; text-align: var(--b-align, center); }
.ws-atc-what { display: grid; gap: 2px; margin: 0 0 10px; font-size: 14px; }
.ws-atc-what strong { font-family: var(--site-heading); font-size: 1.05rem; letter-spacing: -0.015em; }
.ws-atc-what time { color: var(--site-muted); font-weight: 600; }
.ws-atc .ws-ev-local { display: block; font-size: 12.5px; font-weight: 600; color: var(--site-muted); }
.ws-atc-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ws-atc-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 64px; padding: 10px 6px; border-radius: calc(var(--site-radius) + 2px);
  font-size: 12.5px; font-weight: 700; line-height: 1.2; text-align: center; background: var(--site-surface); color: var(--site-text); border: 1px solid var(--site-line); box-shadow: var(--site-shadow-sm);
  transition: transform .18s var(--site-ease), box-shadow .18s, border-color .18s; }
.ws-atc-btn:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--site-accent) 45%, transparent); box-shadow: var(--site-shadow-md); }
.ws-atc-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in oklab, var(--site-accent) 14%, transparent); color: var(--site-accent); }
.ws-atc-ico svg { width: 16px; height: 16px; }
.ws-atc-ics { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--site-muted); text-decoration: underline; text-underline-offset: 3px; }
.ws-atc-ics:hover { color: var(--site-text); }
.ws-atc-ended { margin: 6px 0 0; color: var(--site-muted); font-size: 13.5px; font-weight: 600; }
@container ws-page (min-width: 600px) { .ws-atc-btn { flex-direction: row; min-height: 50px; font-size: 13.5px; } }

.ws-atc-card { padding: var(--b-pad, 18px); text-align: start; }
.ws-atc-top { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.ws-atc-card .ws-ev-date { flex: none; background: color-mix(in oklab, var(--site-accent) 12%, transparent); box-shadow: none; }
.ws-atc-txt { display: grid; gap: 3px; min-width: 0; }
.ws-atc-title { margin: 0; font-family: var(--site-heading); font-size: calc(1.2rem * var(--b-scale, 1)); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.ws-atc-when { margin: 0; font-size: 13.5px; font-weight: 700; }
.ws-atc-where { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 13px; color: var(--site-muted); font-weight: 600; }
.ws-atc-where svg { width: 14px; height: 14px; }
.ws-atc-card .ws-atc-ics { display: block; text-align: center; }
.ws-site :is(.ws-atc-where, .ws-atc-ended) { color: var(--site-muted); }
.ws-site a.ws-atc-btn { color: var(--site-text); }
.ws-site a.ws-atc-ics { color: var(--site-muted); }
.ws-site .ws-atc-txt .ws-eyebrow { color: var(--site-accent); }

/* css/site/blocks/age_gate.css */
/* Age gate (B5): modal and veil. Alone on the page until confirmed, so it fills the viewport. */
.ws-agegate { display: grid; place-items: center; min-height: min(100vh, 900px); min-height: min(100dvh, 900px); padding: 24px 16px;
  padding-block-end: max(24px, env(safe-area-inset-bottom)); }
.ws-agegate.is-canvas { min-height: 0; padding: 8px 0; }
.ws-agegate-veil { background: radial-gradient(100% 70% at 50% 0%, color-mix(in oklab, var(--site-accent) 30%, transparent), transparent 70%),
  var(--site-bg, transparent); border-radius: var(--b-radius, calc(var(--site-radius) + 8px)); }
.ws-agegate-card { display: grid; justify-items: center; gap: 12px; width: min(100%, 420px); padding: 32px 24px 26px; text-align: center;
  border-radius: calc(var(--site-radius) + 10px); }
.ws-agegate-modal .ws-agegate-card { box-shadow: 0 30px 70px -30px rgb(0 0 0 / .45); }
.ws-agegate-badge { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--site-accent); color: var(--site-accent-text);
  font-weight: 800; font-size: 1.35rem; letter-spacing: -0.03em; box-shadow: 0 0 0 8px color-mix(in oklab, var(--site-accent) 18%, transparent); }
.ws-agegate-title { margin: 6px 0 0; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.8rem); line-height: 1.15; letter-spacing: -0.03em; font-family: var(--site-heading, inherit); }
.ws-agegate-text { margin: 0; color: var(--site-muted); max-width: 32ch; }
.ws-agegate-actions { display: grid; gap: 10px; width: 100%; margin-block-start: 6px; }
.ws-agegate-actions .ws-submit { width: 100%; min-height: 48px; }
.ws-agegate-leave { display: grid; place-items: center; min-height: 44px; color: var(--site-muted); font-weight: 600; text-decoration: none; }
.ws-agegate-leave:hover { color: var(--site-text); }
.ws-agegate-note { margin: 4px 0 0; font-size: 12px; color: var(--site-muted); }

/* css/site/blocks/ai_concierge.css */
/* "Ask me anything" (B5 · A5): the page side (.aic-*: chat card, premium card, floating button and panel) and the chat
   frame's own document (.aicf-*, also used for the builder's still preview). Themed by --site-* tokens only. */

/* ---- Shared: the orb (avatar), titles ----------------------------------------------------------------------- */
.aic { --aic-ring: color-mix(in oklab, var(--site-accent) 30%, transparent); position: relative; }
.aic-orb { position: relative; flex: none; inline-size: 44px; block-size: 44px; border-radius: 50%; display: grid; place-items: center;
  background: conic-gradient(from 200deg, var(--site-accent), color-mix(in oklab, var(--site-accent) 45%, var(--site-surface)), color-mix(in oklab, var(--site-accent) 80%, var(--site-text)), var(--site-accent));
  color: var(--site-accent-text); box-shadow: 0 0 0 3px var(--aic-ring), 0 10px 24px -12px var(--site-accent); }
.aic-orb.is-lg { inline-size: 56px; block-size: 56px; }
.aic-orb img { inline-size: 100%; block-size: 100%; border-radius: 50%; object-fit: cover; }
.ws-site .aic-orb svg { inline-size: 22px; block-size: 22px; }
.aic-live { position: absolute; inset-block-end: 1px; inset-inline-end: 1px; inline-size: 11px; block-size: 11px; border-radius: 50%; background: var(--site-accent);
  box-shadow: 0 0 0 2.5px var(--site-surface); }
.aic-live::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: aic-ping 2.4s ease-out infinite; }
@keyframes aic-ping { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(2.4); opacity: 0; } }
.aic-titles { display: grid; gap: 2px; min-inline-size: 0; }
.aic-title { margin: 0; font-family: var(--site-heading, inherit); font-size: 16.5px; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; }
.aic-sub { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--site-muted); min-inline-size: 0; }
.aic-pill { flex: none; display: inline-grid; place-items: center; min-inline-size: 24px; block-size: 18px; padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 800;
  letter-spacing: .06em; background: color-mix(in oklab, var(--site-accent) 16%, transparent); color: var(--site-accent); }
.aic-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-block-end: 1px solid var(--site-line);
  background: linear-gradient(180deg, color-mix(in oklab, var(--site-accent) 9%, transparent), transparent); }
.aic-body { position: relative; }
.aic-frame { display: block; inline-size: 100%; block-size: 460px; border: 0; background: transparent; color-scheme: normal; }
@container ws-page (min-width: 600px) { .aic-frame { block-size: 520px; } }
.aic-nojs { display: inline-flex; align-items: center; gap: 6px; margin: 14px 16px; font-weight: 700; color: var(--site-accent); }
.aic-js .aic-nojs { display: none; }
.aic summary { list-style: none; cursor: pointer; }
.aic summary::-webkit-details-marker { display: none; }
.aic summary:focus-visible, .aic-fab:focus-visible { outline: 3px solid var(--aic-ring); outline-offset: 3px; }

/* ---- Chat: the conversation in a card ------------------------------------------------------------------------ */
.aic-chat { padding: 0; overflow: hidden; border-radius: var(--b-radius, calc(var(--site-radius) + 8px)); box-shadow: var(--b-shadow, var(--site-shadow-md)); }

/* ---- Card: greeting and example questions; opens the chat underneath --------------------------------------------- */
.aic-card { padding: 0; overflow: hidden; border-radius: var(--b-radius, calc(var(--site-radius) + 10px)); box-shadow: var(--b-shadow, var(--site-shadow-md)); }
.aic-face { position: relative; display: grid; gap: 14px; padding: 20px; isolation: isolate; }
.aic-glow { position: absolute; inset: -40% -20% auto auto; inline-size: 70%; aspect-ratio: 1; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--site-accent) 26%, transparent), transparent); }
[dir="rtl"] .aic-glow { inset: -40% auto auto -20%; }
.aic-face-top { display: flex; align-items: center; gap: 14px; }
.aic-face .aic-title { font-size: 19px; }
.aic-greet { font-size: 15px; line-height: 1.55; color: color-mix(in oklab, var(--site-text) 82%, transparent); unicode-bidi: plaintext; }
.aic-examples { display: flex; flex-wrap: wrap; gap: 8px; }
.aic-example { display: inline-flex; align-items: center; min-block-size: 34px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 650; line-height: 1.3;
  background: color-mix(in oklab, var(--site-accent) 8%, var(--site-surface)); border: 1px solid color-mix(in oklab, var(--site-accent) 22%, var(--site-line)); color: var(--site-text); }
.aic-example::before { content: "“"; color: var(--site-accent); font-weight: 800; margin-inline-end: 2px; }
.aic-example::after { content: "”"; color: var(--site-accent); font-weight: 800; margin-inline-start: 2px; }
.aic-cta { display: flex; justify-content: center; align-items: center; min-block-size: 50px; border-radius: var(--site-btn-radius); font-weight: 750; font-size: 15px;
  background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 14px 28px -16px var(--site-accent); transition: transform .2s var(--site-ease); }
.aic-cta > span { display: inline-flex; align-items: center; gap: 8px; }
.aic-face:hover .aic-cta { transform: translateY(-1px); }
.aic-cta .aic-cta-close, .aic-card[open] .aic-cta .aic-cta-open { display: none; }
.aic-card[open] .aic-cta .aic-cta-close { display: inline-flex; }
.aic-card[open] .aic-cta { background: color-mix(in oklab, var(--site-text) 7%, transparent); color: var(--site-text); box-shadow: none; }
.aic-card[open] .aic-examples { display: none; }
.aic-drawer { border-block-start: 1px solid var(--site-line); animation: aic-in .3s var(--site-ease) both; }

/* ---- Floating: a round button in the corner (the page's sticky slot), the chat in a panel above it ---------------- */
.ws-sticky > .ws-block-ai-concierge.ws-v-floating { justify-self: end; inline-size: auto; }
.aic-float { display: grid; justify-items: end; }
.aic-fab { position: relative; inline-size: 60px; block-size: 60px; display: grid; place-items: center; border-radius: 50%;
  background: conic-gradient(from 200deg, var(--site-accent), color-mix(in oklab, var(--site-accent) 70%, var(--site-text)), var(--site-accent));
  color: var(--site-accent-text); box-shadow: 0 16px 36px -12px color-mix(in oklab, var(--site-text) 55%, transparent), 0 0 0 4px var(--aic-ring); transition: transform .2s var(--site-ease); }
.aic-fab:hover { transform: scale(1.05); }
.ws-site .aic-fab svg { inline-size: 26px; block-size: 26px; }
.aic-fab-close, .aic-float[open] .aic-fab-open { display: none; }
.aic-float[open] .aic-fab-close { display: grid; }
.aic-fab-tip { position: absolute; inset-inline-end: calc(100% + 10px); white-space: nowrap; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 750;
  background: var(--site-surface); color: var(--site-text); box-shadow: var(--site-shadow-md); border: 1px solid var(--site-line); pointer-events: none; }
.aic-float[open] .aic-fab-tip { display: none; }
.aic-panel { position: absolute; inset-block-end: calc(100% + 12px); inset-inline-end: 0; inline-size: min(390px, calc(100vw - 28px)); block-size: min(600px, calc(100dvh - 120px));
  display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: var(--site-surface); color: var(--site-text); border: 1px solid var(--site-line);
  box-shadow: 0 30px 70px -24px color-mix(in oklab, var(--site-text) 55%, transparent); transform-origin: bottom right; animation: aic-in .28s var(--site-ease) both; }
[dir="rtl"] .aic-panel { transform-origin: bottom left; }
.aic-panel .aic-body { flex: 1; min-block-size: 0; display: flex; }
.aic-panel .aic-frame { block-size: auto; flex: 1; }
@keyframes aic-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
/* The builder and thumbnails: the panel is shown open, in the flow. */
.ws-mode-canvas .aic-float .aic-panel, .ws-is-thumb .aic-float .aic-panel { position: static; block-size: auto; margin-block-end: 10px; animation: none; }

/* ---- The still preview (builder, thumbnails) --------------------------------------------------------------------- */
.aic-preview { display: grid; gap: 10px; padding: 14px; }
.aic-preview .aicf-msg { max-inline-size: 92%; }

/* ---- The chat frame's own document ----------------------------------------------------------------------------- */
.aicf-doc, .aicf-body { margin: 0; block-size: 100%; background: transparent; color-scheme: normal; }
.aicf.ws-site { display: flex; flex-direction: column; block-size: 100dvh; min-block-size: 0; background: transparent; font-size: 14.5px; }
.aicf *, .aicf *::before, .aicf *::after, .aic-preview * { box-sizing: border-box; }
.aicf-log { flex: 1; min-block-size: 0; overflow-y: auto; display: flex; flex-direction: column-reverse; padding: 14px 14px 8px; overscroll-behavior: contain; scrollbar-width: thin; }
.aicf-stream { display: flex; flex-direction: column; gap: 10px; }
.aicf-msg { display: grid; gap: 8px; max-inline-size: 88%; animation: aic-msg .32s var(--site-ease) both; }
@keyframes aic-msg { from { opacity: 0; transform: translateY(6px); } }
.aicf-msg > p { margin: 0; padding: 10px 14px; border-radius: 18px; line-height: 1.5; unicode-bidi: plaintext; overflow-wrap: anywhere; }
.aicf-msg.is-bot { align-self: flex-start; grid-template-columns: minmax(0, 1fr); }
.aicf-msg.is-bot > p { background: color-mix(in oklab, var(--site-text) 6%, var(--site-surface)); color: var(--site-text); border-end-start-radius: 6px; }
.aicf-msg.is-me { align-self: flex-end; }
.aicf-msg.is-me > p { background: var(--site-accent); color: var(--site-accent-text); border-end-end-radius: 6px; }
.aicf-msg:focus { outline: none; }
.aicf-face { inline-size: 28px; block-size: 28px; border-radius: 50%; object-fit: cover; }
.aicf-note { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--site-muted); }
.ws-site .aicf-note svg { inline-size: 14px; block-size: 14px; color: var(--site-accent); }

.aicf-faq { padding: 10px 12px; border-radius: 14px; border: 1px solid var(--site-line); background: var(--site-surface); display: grid; gap: 4px; font-size: 13.5px; }
.aicf-faq b { font-weight: 750; }
.aicf-faq p { margin: 0; color: color-mix(in oklab, var(--site-text) 80%, transparent); unicode-bidi: plaintext; }

.aicf-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.aicf-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 16px; background: var(--site-surface); border: 1px solid var(--site-line);
  box-shadow: 0 8px 20px -16px color-mix(in oklab, var(--site-text) 60%, transparent); }
.aicf-item-img { flex: none; inline-size: 56px; block-size: 56px; border-radius: 12px; object-fit: cover; }
.aicf-item-img.is-icon { display: grid; place-items: center; background: color-mix(in oklab, var(--site-accent) 12%, var(--site-surface)); color: var(--site-accent); }
.aicf-item-t { flex: 1; min-inline-size: 0; display: grid; gap: 1px; line-height: 1.3; }
.aicf-item-t b { font-weight: 750; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aicf-item-t small { font-size: 12px; font-weight: 600; color: var(--site-muted); }
.aicf-item-next { display: inline-flex; align-items: center; gap: 4px; }
.ws-site .aicf-item-next svg { inline-size: 12px; block-size: 12px; }
.aicf-item-go { flex: none; display: inline-grid; place-items: center; min-block-size: 40px; min-inline-size: 64px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 750;
  background: var(--site-accent); color: var(--site-accent-text); text-decoration: none; }
.ws-site .aicf-item-go { color: var(--site-accent-text); }
.aicf-item-out { flex: none; font-size: 12px; font-weight: 700; color: var(--site-muted); padding-inline: 8px; }

.aicf-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-block-start: 2px; }
.aicf-chip { display: inline-flex; align-items: center; min-block-size: 40px; padding: 8px 14px; border-radius: 999px; font: inherit; font-size: 13.5px; font-weight: 650; line-height: 1.3; cursor: pointer;
  text-align: start; background: var(--site-surface); color: var(--site-accent); border: 1.5px solid color-mix(in oklab, var(--site-accent) 45%, var(--site-line)); transition: background .2s, transform .2s; }
.aicf-chip:hover { background: color-mix(in oklab, var(--site-accent) 10%, var(--site-surface)); }
.aicf-chip:focus-visible, .aicf-item-go:focus-visible, .aicf-send:focus-visible, .aicf-btn:focus-visible, .aicf-email summary:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 40%, transparent); outline-offset: 2px; }

.aicf-email { align-self: stretch; border-radius: 16px; border: 1px dashed color-mix(in oklab, var(--site-accent) 40%, var(--site-line)); background: color-mix(in oklab, var(--site-accent) 4%, var(--site-surface)); }
.aicf-email summary { list-style: none; display: flex; align-items: center; gap: 8px; min-block-size: 44px; padding: 8px 14px; font-weight: 700; font-size: 13.5px; cursor: pointer; color: var(--site-accent); }
.aicf-email summary::-webkit-details-marker { display: none; }
.aicf-email-form { display: grid; gap: 10px; padding: 0 14px 14px; }
.aicf-field { inline-size: 100%; min-block-size: 44px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--site-line); background: var(--site-surface); color: var(--site-text); font: inherit; }
[dir="rtl"] .aicf-field[type="email"] { direction: ltr; text-align: end; }
.aicf-check { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; font-weight: 600; color: color-mix(in oklab, var(--site-text) 80%, transparent); }
.aicf-check input { margin-block-start: 2px; inline-size: 18px; block-size: 18px; accent-color: var(--site-accent); flex: none; }
.aicf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-block-size: 44px; padding: 0 18px; border: 0; border-radius: 999px; font: inherit; font-weight: 750;
  cursor: pointer; background: var(--site-accent); color: var(--site-accent-text); text-decoration: none; }
.ws-site .aicf-btn { color: var(--site-accent-text); }

.aicf-composer { position: relative; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin: 0 12px; padding: 6px; border-radius: 26px; background: var(--site-surface);
  border: 1px solid color-mix(in oklab, var(--site-text) 14%, transparent); box-shadow: 0 10px 26px -18px color-mix(in oklab, var(--site-text) 70%, transparent); }
.aicf-composer:focus-within { border-color: color-mix(in oklab, var(--site-accent) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 15%, transparent); }
.aicf-input { flex: 1; min-inline-size: 0; min-block-size: 40px; max-block-size: 120px; padding: 9px 10px 9px 12px; border: 0; outline: 0; resize: none; background: transparent; color: var(--site-text);
  font: inherit; font-size: 15px; line-height: 1.45; unicode-bidi: plaintext; field-sizing: content; }
.aicf-input::placeholder { color: var(--site-muted); }
.aicf-composer.is-still .aicf-input { display: flex; align-items: center; color: var(--site-muted); }
.aicf-send { flex: none; inline-size: 40px; block-size: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--site-accent); color: var(--site-accent-text); transition: transform .2s var(--site-ease), opacity .2s; }
.aicf-send:hover { transform: scale(1.06); }
.ws-site .aicf-send svg { inline-size: 20px; block-size: 20px; }
.aicf-notice { flex-basis: 100%; order: -1; margin: 4px 8px 0; font-size: 12.5px; font-weight: 650; color: var(--site-accent); }
.aicf-restart { flex: 1; }
.aicf-foot { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 12px; margin: 0; padding: 8px 14px 10px; font-size: 11px; font-weight: 600; color: var(--site-muted); text-align: center; }
.aicf-foot a { color: var(--site-accent); font-weight: 750; text-decoration: none; }
/* While a message is on its way (concierge.js). */
.aicf-typing { display: inline-flex; gap: 4px; padding: 14px 16px; border-radius: 18px; border-end-start-radius: 6px; background: color-mix(in oklab, var(--site-text) 6%, var(--site-surface)); align-self: flex-start; }
.aicf-typing i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--site-muted); animation: aic-dot 1.1s infinite ease-in-out both; }
.aicf-typing i:nth-child(2) { animation-delay: .15s; } .aicf-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes aic-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.aicf.is-sending .aicf-send { opacity: .5; pointer-events: none; }

/* The item sheet: the checkout in its frame. */
.aic-item { margin-inline: -20px; margin-block-end: -24px; }
.aic-item-frame { display: block; inline-size: 100%; block-size: min(72dvh, 760px); border: 0; background: transparent; color-scheme: normal; }
.aicf-item-doc .ws-site { background: transparent; min-block-size: 0; }
.aicf-item-doc .ws-sheet-body { padding: 4px 20px 24px; }

@media (prefers-reduced-motion: reduce) {
  .aic-live::after, .aicf-msg, .aic-panel, .aic-drawer, .aicf-typing i { animation: none; }
  .aic-fab, .aic-cta, .aicf-send, .aicf-chip { transition: none; }
}

/* css/site/blocks/anchor_link.css */
/* Jump to section (B3 · U3): smooth scrolling to the target unless reduced motion is asked for; the target is
   briefly marked when reached. */
@media (prefers-reduced-motion: no-preference) {
  html:has(.ws-block-anchor-link) { scroll-behavior: smooth; }
  .ws-site:has(.ws-block-anchor-link) .ws-block:target { animation: al-hit 1.4s ease-out; }
}
.ws-site:has(.ws-block-anchor-link) .ws-block[id] { scroll-margin-top: 20px; }
.ws-site:has(.ws-v-sticky.ws-block-page-nav) .ws-block[id] { scroll-margin-top: 76px; }
@keyframes al-hit { 0%, 30% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 40%, transparent); border-radius: var(--site-radius); } 100% { box-shadow: 0 0 0 4px transparent; } }

/* css/site/blocks/announcement.css */
/* Announcement: bar, pill, ticker, sticky-top (the bar in the page's top sticky slot). Tones: accent, contrast, soft. */
.ws-ann { --ann-bg: var(--site-accent); --ann-fg: var(--site-accent-text); display: flex; align-items: center; gap: 10px; min-height: 50px; min-width: 0;
  padding: var(--b-pad, 7px 7px 7px 14px); border-radius: var(--b-radius, calc(var(--site-radius) + 4px)); background: var(--ann-bg); color: var(--ann-fg);
  font-size: 14px; font-weight: 600; line-height: 1.35; text-align: start; box-shadow: var(--b-shadow, 0 12px 28px -20px rgb(0 0 0 / .55)); }
.ws-ann-contrast { --ann-bg: var(--site-text); --ann-fg: var(--site-bg-base, var(--site-surface)); }
.ws-ann-soft { --ann-bg: color-mix(in oklab, var(--site-accent) 13%, var(--site-surface)); --ann-fg: var(--site-text); border: 1px solid color-mix(in oklab, var(--site-accent) 26%, transparent); box-shadow: none; }
.ws-ann-ico { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in oklab, currentColor 16%, transparent); }
.ws-ann-soft .ws-ann-ico { background: var(--site-accent); color: var(--site-accent-text); }
.ws-ann-ico svg { width: 15px; height: 15px; }
.ws-ann-text { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.ws-ann-link { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 12px; border-radius: 999px; font-weight: 800; font-size: 13px; white-space: nowrap;
  background: color-mix(in oklab, currentColor 16%, transparent); color: inherit; transition: background .18s; }
.ws-ann-soft .ws-ann-link { background: var(--site-accent); color: var(--site-accent-text); }
.ws-ann-link:hover { background: color-mix(in oklab, currentColor 26%, transparent); }
.ws-ann-link svg { width: 14px; height: 14px; }
.ws-ann-x { position: relative; flex: none; width: 36px; height: 36px; margin: -2px; border: 0; border-radius: 50%; display: grid; place-items: center; background: transparent; color: inherit; cursor: pointer; opacity: .8; }
.ws-ann-x::after { content: ""; position: absolute; inset: -4px; }
.ws-ann-x:hover { opacity: 1; background: color-mix(in oklab, currentColor 14%, transparent); }
.ws-ann-x svg { width: 16px; height: 16px; }
html:not(.ws-js) .ws-mode-public .ws-ann-x { display: none; }
.ws-site .ws-block-announcement[hidden], .ws-sticky-top > [hidden] { display: none !important; }
.ws-ann-bar:has(.ws-ann-link) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "ico text link x"; }
.ws-ann-bar .ws-ann-ico { grid-area: ico; } .ws-ann-bar .ws-ann-text { grid-area: text; } .ws-ann-bar .ws-ann-link { grid-area: link; } .ws-ann-bar .ws-ann-x { grid-area: x; }
@container ws-page (max-width: 460px) {
  .ws-ann-bar:has(.ws-ann-link) { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico text x" ". link ."; row-gap: 6px; padding-block-end: 10px; }
  .ws-ann-bar .ws-ann-link { justify-self: start; }
}
/* In the top sticky slot (outside the page container) the bar stays on one line: a smaller type and link. */
.ws-sticky-top .ws-ann { font-size: 13px; min-height: 46px; }
.ws-sticky-top .ws-ann-link { min-height: 32px; padding: 0 10px; font-size: 12.5px; }

/* Pill: a centred chip. */
.ws-ann-pill { width: fit-content; max-width: 100%; margin-inline: auto; min-height: 44px; padding: 5px 5px 5px 8px; border-radius: 26px; font-size: 13.5px; gap: 8px; }
.ws-ann-pill .ws-ann-ico { width: 30px; height: 30px; }
.ws-ann-pill .ws-ann-link { min-height: 34px; }
.ws-ann-pill:not(:has(.ws-ann-link, .ws-ann-x)) { padding-inline-end: 16px; }
.ws-s-align-start .ws-ann-pill { margin-inline: 0; }

/* Ticker: the message scrolls; pauses on hover or focus; still (and wrapping) under reduced motion. */
.ws-ann-ticker { padding-inline-start: 0; overflow: hidden; }
.ws-ann-track { flex: 1; min-width: 0; display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.ws-ann-run { flex: none; display: flex; margin: 0; animation: ws-ann-tick 28s linear infinite; }
.ws-ann-item { display: inline-flex; align-items: center; gap: 10px; padding-inline: 14px 26px; white-space: nowrap; }
.ws-ann-item::after { content: "✦"; margin-inline-start: 26px; opacity: .55; font-size: 11px; }
.ws-ann-ticker:hover .ws-ann-run, .ws-ann-ticker:focus-within .ws-ann-run { animation-play-state: paused; }
@keyframes ws-ann-tick { from { transform: translateX(0); } to { transform: translateX(calc(-100% * var(--dir-sign, 1))); } }
@media (prefers-reduced-motion: reduce) {
  .ws-ann-run { animation: none !important; } .ws-ann-run[aria-hidden], .ws-ann-item[aria-hidden] { display: none; }
  .ws-ann-item { white-space: normal; padding-inline: 14px 0; } .ws-ann-item::after { display: none; } .ws-ann-track { -webkit-mask-image: none; mask-image: none; }
}
.ws-motion-none .ws-ann-run { animation: none; } .ws-motion-none .ws-ann-run[aria-hidden], .ws-motion-none .ws-ann-item[aria-hidden] { display: none; }
.ws-motion-none .ws-ann-item { white-space: normal; } .ws-motion-none .ws-ann-item::after { display: none; }
.ws-is-thumb .ws-ann-run { animation: none; }

/* The top sticky slot (sticky-top): pinned under the top edge, clear of the notch. */
.ws-sticky-top { position: sticky; top: 0; z-index: 45; display: grid; justify-items: center; gap: 8px; padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 0; pointer-events: none; }
.ws-sticky-top > * { pointer-events: auto; width: min(100%, var(--w-m, 560px)); }
.ws-sticky-top .ws-block { animation: none; }
.ws-ann-v-sticky-top { box-shadow: var(--b-shadow, 0 16px 36px -18px rgb(0 0 0 / .5)); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); }
.ws-ann-v-sticky-top.ws-ann-soft { --ann-bg: color-mix(in oklab, color-mix(in oklab, var(--site-accent) 13%, var(--site-surface)) 88%, transparent); }

/* css/site/blocks/app_download.css */
/* App store badges: badges, card, split. The store buttons are ink pills with the store's mark (not copied badge art). */
.ws-stores { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ws-site .ws-store { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; min-width: 164px; padding: 7px 18px 7px 14px; border-radius: 13px; text-align: start;
  background: var(--site-ink-dark); color: var(--site-ink-light); border: 1px solid color-mix(in oklab, var(--site-ink-light) 22%, transparent);
  box-shadow: 0 12px 24px -16px rgb(0 0 0 / .6); transition: transform .18s var(--site-ease), box-shadow .18s; }
.ws-store:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgb(0 0 0 / .7); }
.ws-site .ws-store svg { width: 26px; height: 26px; flex: none; }
.ws-store-t { display: grid; line-height: 1.05; }
.ws-store-t small { font-size: 10.5px; font-weight: 600; letter-spacing: .02em; opacity: .85; }
.ws-store-t b { font-size: 17.5px; font-weight: 700; letter-spacing: -0.01em; }
@container ws-page (max-width: 380px) { .ws-stores > .ws-store { flex: 1 1 100%; justify-content: center; } }

.ws-app { text-align: start; }
.ws-app-card, .ws-app-split { padding: var(--b-pad, 20px); display: grid; gap: 18px; }
.ws-app-body { display: grid; gap: 14px; min-width: 0; }
.ws-app-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ws-app-icon { width: 64px; height: 64px; flex: none; overflow: hidden; border-radius: 22%; display: grid; box-shadow: 0 0 0 1px var(--site-line), 0 10px 22px -14px rgb(0 0 0 / .5); }
.ws-app-icon .ws-media { width: 100%; height: 100%; object-fit: cover; }
.ws-app-mono { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--site-heading); font-weight: 800; font-size: 28px; color: var(--site-accent-text);
  background: radial-gradient(100% 80% at 100% 0%, rgb(255 255 255 / .35), transparent 60%), linear-gradient(145deg, color-mix(in oklab, var(--site-accent) 85%, var(--site-surface)), color-mix(in oklab, var(--site-accent) 60%, var(--site-text))); }
.ws-app-id { display: grid; gap: 3px; min-width: 0; }
.ws-app-id .ws-t1 { font-size: calc(1.2rem * var(--b-scale, 1)); }
.ws-site .ws-app-rating { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--site-muted); }
.ws-app-rating b { color: var(--site-text); font-weight: 800; }
.ws-app-stars { font-size: 14px; letter-spacing: 1px; line-height: 1; background: linear-gradient(90deg, var(--site-accent) var(--r, 100%), color-mix(in oklab, currentColor 22%, transparent) var(--r, 100%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ws-app-stars::before { content: "★★★★★"; }
[dir="rtl"] .ws-app-stars { background-image: linear-gradient(270deg, var(--site-accent) var(--r, 100%), color-mix(in oklab, currentColor 22%, transparent) var(--r, 100%)); }
.ws-site .ws-app-tag { margin: 0; color: var(--site-muted); font-size: 14.5px; line-height: 1.5; }
.ws-app .ws-stores { justify-content: flex-start; }
.ws-app-card .ws-stores > .ws-store, .ws-app-split .ws-stores > .ws-store { flex: 1 1 150px; max-width: 220px; }
.ws-s-align-center .ws-app-body { justify-items: center; text-align: center; } .ws-s-align-center .ws-app .ws-stores { justify-content: center; }

.ws-app-split { overflow: hidden; background: var(--b-bg, radial-gradient(80% 90% at 100% 100%, color-mix(in oklab, var(--site-accent) 22%, transparent), transparent 70%), var(--site-surface)); }
.ws-app-phone { justify-self: center; width: min(180px, 55%); padding: 7px; border-radius: 34px; background: var(--site-ink-dark); box-shadow: 0 0 0 1px color-mix(in oklab, var(--site-ink-light) 18%, transparent), 0 30px 50px -26px rgb(0 0 0 / .65); margin-bottom: -90px; }
.ws-app-screen { display: block; overflow: hidden; aspect-ratio: 9 / 18; border-radius: 28px; background: var(--site-surface); }
.ws-app-screen .ws-media { width: 100%; height: 100%; object-fit: cover; }
.ws-app-screen-ph { display: grid; place-items: center; align-content: center; gap: 12px; width: 100%; height: 100%; text-align: center; padding: 16px;
  background: radial-gradient(90% 60% at 50% 0%, color-mix(in oklab, var(--site-accent) 35%, transparent), transparent 70%), color-mix(in oklab, var(--site-accent) 8%, var(--site-surface)); }
.ws-app-screen-ph b { font-family: var(--site-heading); font-size: 15px; font-weight: 800; letter-spacing: -0.02em; }
@container ws-page (min-width: 600px) {
  .ws-app-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; padding: var(--b-pad, 30px 30px 0); }
  .ws-app-split .ws-app-body { padding-bottom: 30px; }
  .ws-app-split .ws-app-phone { width: min(220px, 100%); margin-bottom: -40px; align-self: end; }
}
.ws-app-badges .ws-stores { justify-content: center; }
.ws-s-align-start .ws-app-badges .ws-stores { justify-content: flex-start; }
.ws-app-rating > span:not(.ws-app-stars) { white-space: nowrap; }

/* css/site/blocks/audio.css */
/* Audio (B3 · M3): player, card, compact, waveform; the player (.ws-ap) is shared with the playlist block. */
.ws-aud { display: grid; gap: 14px; min-width: 0; text-align: start; padding: var(--b-pad, 14px); border-radius: var(--b-radius, calc(var(--site-radius) + 6px)); }
.ws-aud-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ws-aud-cover { position: relative; width: 72px; height: 72px; flex: none; overflow: hidden; border-radius: max(10px, calc(var(--site-radius) - 2px)); box-shadow: 0 12px 26px -14px rgb(0 0 0 / .55);
  background: linear-gradient(145deg, color-mix(in oklab, var(--site-accent) 72%, var(--site-ink-dark)), var(--site-accent)); }
.ws-aud-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-aud-disc { position: absolute; inset: 0; display: grid; place-items: center; color: var(--site-accent-text); }
.ws-site .ws-aud-disc svg { width: 46%; height: 46%; }
.ws-aud-words { display: grid; gap: 2px; min-width: 0; }
.ws-aud-artist { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--site-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-aud-title { font-family: var(--site-heading); font-size: calc(1.12rem * var(--b-scale, 1)); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: anywhere; }
.ws-aud-text { margin-top: 4px; color: var(--site-muted); font-size: 14px; line-height: 1.5; }
.ws-site .ws-aud-cta { justify-self: start; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 18px; border-radius: var(--site-btn-radius);
  background: color-mix(in oklab, var(--site-accent) 14%, transparent); color: var(--site-accent); font-weight: 700; font-size: 14px; }
.ws-aud-cta svg { width: 15px; height: 15px; }

/* The player. Without scripts the native control shows; with them, ours. */
.ws-ap { --p: 0; min-width: 0; }
.ws-ap-native { display: block; width: 100%; }
.ws-ap.is-enhanced .ws-ap-native { display: none; }
.ws-ap-ui { display: none; align-items: center; gap: 12px; min-width: 0; }
.ws-ap.is-enhanced .ws-ap-ui { display: flex; }
.ws-ap-play { position: relative; width: 48px; height: 48px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 10px 22px -10px color-mix(in oklab, var(--site-accent) 70%, transparent); transition: transform .18s var(--site-ease); }
.ws-ap-play:hover { transform: scale(1.06); }
.ws-ap-play:focus-visible, .ws-ap-seek:focus-visible + * { outline: 3px solid color-mix(in oklab, var(--site-accent) 60%, transparent); outline-offset: 3px; }
.ws-site .ws-ap-play svg { width: 19px; height: 19px; fill: currentColor; stroke: none; }
.ws-ap-i-play svg { margin-inline-start: 2px; }
.ws-ap-i-pause, .ws-ap-play[aria-pressed="true"] .ws-ap-i-play { display: none; }
.ws-ap-play[aria-pressed="true"] .ws-ap-i-pause { display: inline; }
.ws-ap-track { position: relative; flex: 1; min-width: 0; height: 40px; display: flex; align-items: center; }
.ws-ap-wave { display: flex; align-items: center; gap: 2px; width: 100%; height: 100%; overflow: hidden; }
.ws-ap-wave i { flex: 1; min-width: 1px; height: calc(var(--h) * 100%); border-radius: 99px; background: color-mix(in oklab, var(--site-text) 18%, transparent); transition: background .15s; }
.ws-ap-wave i.on { background: var(--site-accent); }
.ws-ap.is-playing .ws-ap-wave i.on:last-of-type { background: var(--site-accent); }
.ws-ap-line { width: 100%; height: 5px; border-radius: 99px; background: color-mix(in oklab, var(--site-text) 14%, transparent); overflow: hidden; }
.ws-ap-line span { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: inherit; background: var(--site-accent); }
.ws-ap-seek { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.ws-ap-seek:focus-visible { opacity: 1; background: transparent; outline: 2px solid color-mix(in oklab, var(--site-accent) 60%, transparent); outline-offset: 4px; border-radius: 8px; }
.ws-ap-seek:focus-visible::-webkit-slider-thumb { opacity: 0; }
.ws-ap-time { flex: none; font-size: 12.5px; font-weight: 700; color: var(--site-muted); font-variant-numeric: tabular-nums; direction: ltr; white-space: nowrap; }

/* Card: big cover art. */
.ws-aud-card .ws-aud-head { flex-direction: column; align-items: stretch; gap: 14px; }
.ws-aud-card .ws-aud-cover { width: 100%; height: auto; aspect-ratio: 1; border-radius: calc(var(--site-radius) + 2px); }
.ws-aud-card .ws-aud-disc svg { width: 30%; height: 30%; }
.ws-aud-card .ws-aud-title { font-size: calc(1.35rem * var(--b-scale, 1)); }
@container ws-page (min-width: 600px) {
  .ws-aud-card { grid-template-columns: 220px minmax(0, 1fr); column-gap: 22px; align-items: center; padding: var(--b-pad, 18px); }
  .ws-aud-card .ws-aud-head { display: contents; }
  .ws-aud-card .ws-aud-cover { grid-row: 1 / span 3; }
  .ws-aud-card .ws-aud-words, .ws-aud-card .ws-ap, .ws-aud-card .ws-aud-cta { grid-column: 2; }
}

/* Compact: one slim row. */
.ws-aud-compact { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px 12px; padding: var(--b-pad, 8px 12px 8px 8px); border-radius: var(--b-radius, 999px); }
.ws-aud-mini { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: color-mix(in oklab, var(--site-accent) 16%, transparent); color: var(--site-accent); }
.ws-aud-mini img { width: 100%; height: 100%; object-fit: cover; }
.ws-site .ws-aud-mini svg { width: 20px; height: 20px; }
.ws-aud-compact .ws-aud-title { font-size: 15px; }
.ws-aud-compact .ws-aud-artist { font-size: 11px; }
.ws-aud-compact .ws-ap { grid-column: 1 / -1; }
.ws-ap-compact .ws-ap-play { width: 40px; height: 40px; }
.ws-ap-compact .ws-ap-track { height: 24px; }
@container ws-page (min-width: 600px) {
  .ws-aud-compact { grid-template-columns: auto minmax(0, 14rem) minmax(0, 1fr); }
  .ws-aud-compact .ws-ap { grid-column: auto; }
}

/* Waveform: the sound is the hero. */
.ws-aud-waveform { padding: var(--b-pad, 20px); color: var(--site-accent-text); box-shadow: var(--b-shadow, var(--site-shadow-lg));
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--site-accent) 55%, var(--site-surface)) 0%, transparent 60%),
              linear-gradient(150deg, color-mix(in oklab, var(--site-accent) 85%, var(--site-ink-dark)) 0%, color-mix(in oklab, var(--site-accent) 45%, var(--site-ink-dark)) 100%); }
.ws-aud-waveform .ws-aud-artist, .ws-aud-waveform .ws-aud-text { color: color-mix(in oklab, var(--site-accent-text) 78%, transparent); }
.ws-aud-waveform .ws-aud-title { font-size: calc(1.45rem * var(--b-scale, 1)); }
.ws-aud-waveform .ws-ap-track { height: 72px; }
.ws-aud-waveform .ws-ap-wave { gap: 2px; }
@container ws-page (min-width: 600px) { .ws-aud-waveform .ws-ap-wave { gap: 3px; } }
.ws-aud-waveform .ws-ap-wave i { background: color-mix(in oklab, var(--site-accent-text) 28%, transparent); }
.ws-aud-waveform .ws-ap-wave i.on { background: var(--site-accent-text); }
.ws-aud-waveform .ws-ap-play { width: 60px; height: 60px; background: var(--site-accent-text); color: var(--site-accent); box-shadow: 0 14px 30px -12px rgb(0 0 0 / .5); }
.ws-aud-waveform .ws-ap-time { color: color-mix(in oklab, var(--site-accent-text) 80%, transparent); }
.ws-aud-waveform .ws-ap-native { color-scheme: dark; }
.ws-site .ws-aud-waveform .ws-aud-cta { background: color-mix(in oklab, var(--site-accent-text) 16%, transparent); color: var(--site-accent-text); }
@media (prefers-reduced-motion: reduce) { .ws-ap-play, .ws-ap-wave i { transition: none; } }

/* css/site/blocks/audio_embed.css */
/* Spotify, Apple Music, SoundCloud (programme B · W2): compact, full, card; the builder's stand-in player. */
.ws-au { --au-r: var(--b-radius, max(12px, var(--site-radius))); display: grid; gap: 12px; text-align: start; }
.ws-au-spotify { --au-brand: #1DB954; }
.ws-au-apple-music { --au-brand: #FA2D48; }
.ws-au-soundcloud { --au-brand: #FF5500; }
.ws-au-frame { position: relative; width: 100%; overflow: hidden; border-radius: var(--au-r); background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.ws-au-frame iframe { display: block; width: 100%; height: 100%; border: 0; color-scheme: normal; }
.ws-au.ws-surface { padding: var(--b-pad, 14px); border-radius: calc(var(--au-r) + 6px); }
.ws-au-head { display: flex; align-items: center; gap: 12px; padding: 2px 2px 0; min-width: 0; }
.ws-au-logo { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--au-brand); background: color-mix(in oklab, var(--au-brand) 13%, transparent); }
.ws-au-logo svg { width: 22px; height: 22px; fill: currentColor; }
.ws-au-words { display: grid; gap: 1px; min-width: 0; }
.ws-au-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--site-muted); }
.ws-au-title { font-family: var(--site-heading); font-size: calc(1.08rem * var(--b-scale, 1)); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: anywhere; }
.ws-au-sub { color: var(--site-muted); font-size: 13.5px; }
.ws-au-open { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: var(--site-btn-radius); font-weight: 700; font-size: 14.5px;
  background: var(--site-accent); color: var(--site-accent-text); transition: transform .18s var(--site-ease), box-shadow .18s; }
.ws-au-open svg { width: 17px; height: 17px; fill: none; }
.ws-au-open svg:first-child { fill: currentColor; stroke: none; }
.ws-au-open:hover { transform: translateY(-2px); box-shadow: var(--site-shadow-md); }
.ws-au-open:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 60%, transparent); outline-offset: 2px; }

/* The builder's stand-in: artwork, words, a waveform and a play button, the height of the real player. */
.ws-au-mock { position: absolute; inset: 0; display: flex; align-items: center; gap: 14px; padding: 14px; color: var(--site-ink-light);
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--au-brand) 70%, var(--site-ink-light)) 0%, transparent 55%), linear-gradient(135deg, color-mix(in oklab, var(--au-brand) 55%, var(--site-ink-dark)) 0%, var(--site-ink-dark) 100%); }
.ws-au-mock.is-tall { flex-direction: column; align-items: flex-start; justify-content: flex-end; }
.ws-au-art { width: 96px; height: 96px; max-height: calc(100% - 8px); aspect-ratio: 1; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgb(255 255 255 / .14); box-shadow: 0 12px 30px -12px rgb(0 0 0 / .6); }
.ws-au-mock.is-tall .ws-au-art { width: 132px; height: 132px; margin-block-end: auto; }
.ws-au-art svg { width: 42%; height: 42%; fill: currentColor; }
.ws-au-mock-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ws-au-mock-t b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-au-mock-t small { font-size: 12.5px; opacity: .75; }
.ws-au-bars { display: flex; align-items: flex-end; gap: 3px; height: 22px; margin-block-start: 8px; }
.ws-au-bars i { flex: 1; max-width: 5px; height: var(--h); border-radius: 2px; background: rgb(255 255 255 / .55); }
.ws-au-play { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--site-ink-light); color: var(--site-ink-dark); }
.ws-au-mock.is-tall .ws-au-play { position: absolute; inset-block-end: 14px; inset-inline-end: 14px; }
.ws-au-play svg { width: 18px; height: 18px; fill: currentColor; margin-inline-start: 2px; }
.ws-au-mock.is-tall .ws-au-mock-t { flex: none; width: 100%; padding-inline-end: 56px; }

/* css/site/blocks/awards.css */
/* Awards: rows, grid, marquee. Laurel medallions in the accent (gold-leaning for winners). */
.ws-aw { --aw-gold: color-mix(in oklab, var(--site-accent) 35%, hsl(40 80% 48%)); margin: 0; padding: 0; list-style: none; text-align: start; }
.ws-aw-cell { min-width: 0; display: grid; }
.ws-aw-item { display: flex; align-items: center; gap: 14px; min-width: 0; color: inherit; }
.ws-aw-medal { --tone: var(--site-accent); position: relative; flex: none; display: flex; align-items: center; justify-content: center; color: var(--tone); }
.ws-aw-winner .ws-aw-medal { --tone: var(--aw-gold); }
.ws-aw-nominee .ws-aw-medal, .ws-aw-none .ws-aw-medal { --tone: color-mix(in oklab, var(--site-text) 55%, transparent); }
.ws-aw-laurel { width: 16px !important; height: 34px !important; flex: none; }
.ws-aw-laurel:last-child { transform: scaleX(-1); }
.ws-aw-core { display: grid; justify-items: center; align-content: center; min-width: 42px; text-align: center; line-height: 1.05; color: var(--site-text); }
.ws-aw-core svg { width: 20px; height: 20px; color: var(--tone); }
.ws-aw-level { font-size: 8.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tone); }
.ws-aw-year { font-family: var(--site-heading); font-size: 15px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ws-aw-words { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ws-aw-t { font-family: var(--site-heading); font-weight: 700; font-size: calc(15px * var(--b-scale, 1)); line-height: 1.25; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.ws-aw-by { color: var(--site-muted); font-size: 13px; }
a.ws-aw-item:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 60%, transparent); outline-offset: 3px; border-radius: 10px; }
/* Rows. */
.ws-aw-rows { padding: var(--b-pad, 6px 16px); }
.ws-aw-rows .ws-aw-item { padding-block: 12px; min-height: 64px; }
.ws-aw-rows .ws-aw-cell + .ws-aw-cell .ws-aw-item { border-block-start: 1px solid var(--site-line); }
.ws-aw-rows a.ws-aw-item:hover .ws-aw-t { color: var(--site-accent); }
/* Grid: badges. */
.ws-aw-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 10px; }
.ws-aw-grid .ws-aw-item { flex-direction: column; justify-content: flex-start; gap: 10px; height: 100%; padding: var(--b-pad, 18px 12px 16px); text-align: center; border-radius: var(--b-radius, calc(var(--site-radius) + 4px)); }
.ws-aw-grid .ws-aw-laurel { width: 26px !important; height: 56px !important; }
.ws-aw-grid .ws-aw-core { width: 92px; min-height: 56px; }
.ws-aw-grid .ws-aw-core .ws-aw-t { font-size: 12.5px; line-height: 1.15; }
.ws-aw-grid .ws-aw-level { font-size: 9px; margin-block-end: 3px; }
.ws-aw-grid .ws-aw-words { justify-items: center; }
@container ws-page (min-width: 600px) { .ws-aw-grid { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } }
/* Marquee. */
.ws-aw-marquee .ws-track { gap: 34px; align-items: center; animation-duration: calc(var(--n, 4) * 6s); }
.ws-aw-marquee .ws-aw-item { white-space: nowrap; }
.ws-aw-marquee.is-paused .ws-track { animation-play-state: paused; }
.ws-aw-pause { display: grid; place-items: center; width: 44px; height: 44px; margin: 8px auto 0; border-radius: 50%; border: 1px solid var(--site-line); background: var(--site-surface); color: var(--site-text); cursor: pointer; }
.ws-aw-pause[hidden] { display: none; }
.ws-aw-pause svg { width: 15px; height: 15px; }
.ws-aw-i-play { display: none; }
.ws-aw-marquee.is-paused .ws-aw-i-play { display: grid; } .ws-aw-marquee.is-paused .ws-aw-i-pause { display: none; }
@media (prefers-reduced-motion: reduce) { .ws-aw-marquee .ws-track { gap: 14px 28px; } .ws-aw-marquee .ws-aw-item { white-space: normal; } }
.ws-aw-rows .ws-aw-core, .ws-aw-marquee .ws-aw-core { width: 56px; }
[dir="rtl"] .ws-aw-laurel { transform: scaleX(-1); }
[dir="rtl"] .ws-aw-laurel:last-child { transform: none; }

/* css/site/blocks/badges.css */
/* Badges & credentials: rows, grid, marquee and compact are shared; as chips a badge shows its name only (the issuer is in the rows and grid). */
.ws-block-badges .ws-cv-compact .ws-chip-s { display: none; }
.ws-block-badges .ws-cv-compact .ws-chip svg, .ws-block-badges .ws-cv-marquee .ws-mq-icon svg { color: var(--site-accent); }

/* css/site/blocks/before_after.css */
/* Before and after (B3 · M3): slider and side-by-side. --pos is where the divider sits (inline-start side = before). */
.ws-ba { margin: 0; display: grid; gap: 10px; min-width: 0; }
.ws-ba-stage { position: relative; overflow: hidden; aspect-ratio: var(--ba-ratio, 4 / 3); max-height: 78vh; border-radius: var(--b-radius, calc(var(--site-radius) + 6px));
  background: var(--site-ink-dark); box-shadow: var(--b-shadow, var(--site-shadow-md)); isolation: isolate; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ws-ba-layer { position: absolute; inset: 0; }
.ws-ba-layer img, .ws-ba-half img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-ba-before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0); }
[dir="rtl"] .ws-ba-before { clip-path: inset(0 0 0 calc(100% - var(--pos, 50%))); }
.ws-ba-line { position: absolute; top: 0; bottom: 0; inset-inline-start: var(--pos, 50%); width: 3px; margin-inline-start: -1.5px; background: var(--site-on-media, #FFFFFF);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .12), 0 0 18px rgb(0 0 0 / .35); pointer-events: none; z-index: 2; }
.ws-ba-knob { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--site-on-media, #FFFFFF); color: var(--site-ink-dark); box-shadow: 0 10px 28px -8px rgb(0 0 0 / .55); transition: transform .2s var(--site-ease); }
.ws-site .ws-ba-knob svg { width: 16px; height: 16px; margin: 0 -2px; }
.ws-ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.ws-ba-range:focus-visible ~ .ws-ba-line .ws-ba-knob { outline: 3px solid color-mix(in oklab, var(--site-accent) 75%, transparent); outline-offset: 3px; transform: scale(1.06); }
.ws-ba-stage:hover .ws-ba-knob { transform: scale(1.06); }
.ws-ba-tag { position: absolute; top: 12px; z-index: 2; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: rgb(0 0 0 / .5); color: var(--site-on-media, #FFFFFF); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none; }
.ws-ba-tag.is-before { inset-inline-start: 12px; }
.ws-ba-tag.is-after { inset-inline-end: 12px; background: color-mix(in oklab, var(--site-accent) 88%, transparent); color: var(--site-accent-text); }
.ws-ba-cap { margin: 0; font-size: 14px; color: var(--site-muted); text-align: center; text-wrap: balance; }
.ws-ba-pair { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.ws-ba-half { position: relative; overflow: hidden; aspect-ratio: var(--ba-ratio, 4 / 3); border-radius: var(--b-radius, calc(var(--site-radius) + 4px)); background: var(--site-ink-dark); box-shadow: var(--b-shadow, var(--site-shadow-sm)); }
@container ws-page (min-width: 480px) { .ws-ba-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ws-ba-half { aspect-ratio: 4 / 5; } }
@media (prefers-reduced-motion: reduce) { .ws-ba-knob { transition: none; } }

/* css/site/blocks/bento_grid.css */
/* Bento grid container: its blocks become tiles; spans from each block's responsive settings (ws-r-*-span-*). */
.ws-bgrid { --grid-cols: 2; display: grid; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); grid-auto-rows: minmax(140px, auto); grid-auto-flow: dense; gap: var(--bg-gap, 12px); }
.ws-bgrid-gap-s { --bg-gap: 8px; } .ws-bgrid-gap-l { --bg-gap: 18px; }
.ws-bgrid > .ws-block { display: flex; flex-direction: column; min-width: 0; }
.ws-bgrid > .ws-block > :not(.ws-sheet) { flex: 1; }
.ws-bgrid .ws-sv-tile, .ws-bgrid .ws-tile-x { aspect-ratio: auto; height: 100%; min-height: 140px; }
.ws-bgrid .ws-image { height: 100%; } .ws-bgrid .ws-image img { height: 100%; object-fit: cover; }
@container ws-page (min-width: 600px) { .ws-bgrid-c3 { --grid-cols: 3; } .ws-bgrid-c4 { --grid-cols: 4; } .ws-bgrid { grid-auto-rows: minmax(160px, auto); } }

/* css/site/blocks/book.css */
/* Book / publication: card, featured, split. The cover is drawn as a book: spine shading, a page edge, a soft shadow. */
.ws-bk { position: relative; display: grid; gap: 18px; padding: var(--b-pad, 18px); text-align: start; border-radius: var(--b-radius, calc(var(--site-radius) + 8px)); overflow: hidden; }
.ws-bk-stage { display: grid; place-items: center; }
.ws-bk-book { position: relative; width: 100%; max-width: var(--bk-w, 120px); aspect-ratio: 2 / 3; border-radius: 3px 8px 8px 3px;
  box-shadow: 1px 1px 0 color-mix(in oklab, var(--site-text) 12%, transparent), 4px 4px 0 -1px var(--site-surface), 4px 4px 0 0 color-mix(in oklab, var(--site-text) 14%, transparent),
    0 22px 36px -18px color-mix(in oklab, var(--site-ink-dark) 70%, transparent); transform: rotate(-1.5deg); transition: transform .4s var(--site-ease); }
[dir="rtl"] .ws-bk-book { transform: rotate(1.5deg) scaleX(1); }
.ws-bk:hover .ws-bk-book { transform: rotate(0) translateY(-3px); }
.ws-bk-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.ws-bk-spine { position: absolute; inset-block: 0; inset-inline-start: 0; width: 9%; border-radius: 3px 0 0 3px; pointer-events: none;
  background: linear-gradient(90deg, color-mix(in oklab, var(--site-ink-dark) 34%, transparent), color-mix(in oklab, var(--site-ink-light) 22%, transparent) 55%, transparent); }
[dir="rtl"] .ws-bk-spine { background: linear-gradient(-90deg, color-mix(in oklab, var(--site-ink-dark) 34%, transparent), color-mix(in oklab, var(--site-ink-light) 22%, transparent) 55%, transparent); }
.ws-bk-typeset { display: flex; flex-direction: column; justify-content: space-between; padding: 16% 12% 12% 16%; overflow: hidden; color: var(--site-accent-text);
  background: radial-gradient(120% 80% at 100% 0%, color-mix(in oklab, var(--site-accent-text) 26%, transparent), transparent 60%), linear-gradient(160deg, var(--site-accent), color-mix(in oklab, var(--site-accent) 55%, var(--site-ink-dark))); }
.ws-bk-ty-t { font-family: var(--site-heading); font-weight: 800; font-size: calc(var(--bk-w, 120px) * .13); line-height: 1.05; letter-spacing: -0.03em; overflow-wrap: anywhere; text-wrap: balance; }
.ws-bk-ty-a { font-size: calc(var(--bk-w, 120px) * .07); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.ws-bk-body { display: grid; gap: 6px; align-content: start; min-width: 0; }
.ws-bk-badge { margin-block-end: 2px; }
.ws-bk-title { margin: 0; font-family: var(--site-heading); font-size: calc(1.3rem * var(--b-scale, 1)); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; text-wrap: balance; overflow-wrap: anywhere; }
.ws-heading-serif .ws-bk-title { font-weight: 600; font-style: italic; }
.ws-bk-author { margin: 0; color: var(--site-muted); font-weight: 600; font-size: 14px; }
.ws-bk-blurb { margin: 4px 0 0; font-size: 14.5px; line-height: 1.6; color: color-mix(in oklab, var(--site-text) 84%, transparent); text-wrap: pretty; }
.ws-bk-facts { margin: 2px 0 0; font-size: 12.5px; font-weight: 700; color: var(--site-muted); letter-spacing: .01em; }
.ws-bk-buy { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 10px; }
.ws-bk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 0 16px; border-radius: var(--site-btn-radius); font-weight: 700; font-size: 14px;
  border: 1.5px solid color-mix(in oklab, var(--site-text) 16%, transparent); transition: transform .18s var(--site-ease), background .18s, box-shadow .18s; }
.ws-bk-btn svg { width: 16px; height: 16px; }
.ws-bk-btn:hover { transform: translateY(-2px); background: color-mix(in oklab, var(--site-text) 5%, transparent); }
.ws-bk-btn.is-primary { background: var(--site-accent); color: var(--site-accent-text); border-color: transparent; box-shadow: 0 12px 26px -16px var(--site-accent); }
.ws-bk-btn.is-primary:hover { background: var(--site-accent); box-shadow: 0 16px 30px -14px var(--site-accent); }
/* Card: a compact row, cover first. */
.ws-bk-card { grid-template-columns: 96px minmax(0, 1fr); align-items: start; --bk-w: 96px; }
.ws-bk-card .ws-bk-blurb { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ws-bk-card .ws-bk-buy > * { flex: 1 1 auto; }
/* Featured: the book on a glowing stage. */
.ws-bk-featured { --bk-w: 170px; justify-items: center; text-align: center; padding: var(--b-pad, 4px 0); }
.ws-bk-featured .ws-bk-stage { width: 100%; padding: 30px 0 34px; border-radius: var(--b-radius, calc(var(--site-radius) + 10px));
  background: radial-gradient(60% 70% at 50% 40%, color-mix(in oklab, var(--site-accent) 34%, transparent), transparent 70%), color-mix(in oklab, var(--site-accent) 8%, var(--site-surface)); }
.ws-bk-featured .ws-bk-body { justify-items: center; max-width: 52ch; }
.ws-bk-featured .ws-bk-title { font-size: calc(1.7rem * var(--b-scale, 1)); }
.ws-bk-featured .ws-bk-buy { justify-content: center; }
/* Split: side by side from tablets. */
.ws-bk-split { --bk-w: 150px; }
.ws-bk-split .ws-bk-stage { padding: 22px 0; border-radius: calc(var(--site-radius) + 2px); background: color-mix(in oklab, var(--site-accent) 10%, transparent); }
@container ws-page (min-width: 600px) {
  .ws-bk-card { grid-template-columns: 110px minmax(0, 1fr); --bk-w: 110px; gap: 20px; }
  .ws-bk-card .ws-bk-buy > * { flex: 0 0 auto; }
  .ws-bk-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: 26px; }
  .ws-bk-split .ws-bk-stage { height: 100%; padding: 30px 0; }
  .ws-bk-featured { --bk-w: 200px; }
}
@media (prefers-reduced-motion: reduce) { .ws-bk-book, .ws-bk-btn { transition: none; } .ws-bk:hover .ws-bk-book { transform: rotate(-1.5deg); } }

/* css/site/blocks/booking_calendar.css */
/* Booking calendar: inline (month grids) and sheet (a two-week strip). Shared pieces in modules/interact and booking_slots. */
.bc .bs-top { display: flex; align-items: flex-start; gap: 12px; }
.bc .bs-note { margin: 0; font-size: 12px; color: var(--site-muted); }
.bc .bs-empty { margin: 0; display: flex; align-items: center; gap: 8px; padding: 14px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--site-muted); background: color-mix(in oklab, var(--site-text) 5%, transparent); }
.bc .bs-empty svg { width: 18px; height: 18px; }
.bc-months { display: grid; gap: 18px; }
@container ws-page (min-width: 900px) { .bc-months { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; } }
.bc-month { display: grid; gap: 8px; }
.bc-mname { margin: 0; font-family: var(--site-heading); font-weight: 800; font-size: 1.05rem; text-transform: capitalize; }
.bc-grid { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; margin: 0 -4px; }
.bc-grid th { padding: 2px 0 4px; font-size: 11.5px; font-weight: 800; color: var(--site-muted); text-transform: uppercase; }
.bc-grid td { padding: 0; text-align: center; }
.bc-day, .bc-blank { position: relative; display: grid; place-items: center; aspect-ratio: 1; min-height: 40px; border-radius: 12px; font-variant-numeric: tabular-nums; }
.bc-day b { font-weight: 650; font-size: 14px; }
.bc-day.is-past { opacity: .35; }
.bc-day:not(.is-open):not(.is-past) b { color: var(--site-muted); }
.bc-day.is-today { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--site-text) 30%, transparent); }
a.bc-day { text-decoration: none; color: var(--site-text); background: color-mix(in oklab, var(--site-accent) 12%, var(--site-surface)); transition: background .18s, color .18s, transform .18s var(--site-ease); }
a.bc-day b { font-weight: 800; }
a.bc-day i { position: absolute; inset-block-end: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--site-accent); }
a.bc-day.is-many i { width: 14px; border-radius: 3px; }
a.bc-day:hover, a.bc-day:focus-visible { background: var(--site-accent); color: var(--site-accent-text); transform: translateY(-1px); outline: none; }
a.bc-day:hover i, a.bc-day:focus-visible i { background: var(--site-accent-text); }
.bc-next { margin: 0; display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; }
.bc-next svg { width: 16px; height: 16px; color: var(--site-accent); }
.bc-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(52px, 1fr); gap: 6px; margin: 0; padding: 0 0 6px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.bc-strip li { scroll-snap-align: start; }
.bc-sday { position: relative; display: grid; justify-items: center; gap: 2px; min-height: 64px; padding: 8px 4px 12px; border-radius: 14px; text-decoration: none; color: var(--site-muted);
  background: color-mix(in oklab, var(--site-text) 4%, transparent); }
.bc-sday small { font-size: 11px; font-weight: 700; text-transform: uppercase; }
.bc-sday b { font-size: 1.05rem; font-weight: 800; }
.bc-sday.is-open { color: var(--site-text); background: color-mix(in oklab, var(--site-accent) 12%, var(--site-surface)); }
.bc-sday.is-open i { position: absolute; inset-block-end: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--site-accent); }
.bc-sday.is-open:hover, .bc-sday.is-open:focus-visible { background: var(--site-accent); color: var(--site-accent-text); outline: none; }
.bc-sday.is-open:hover i { background: var(--site-accent-text); }
@media (prefers-reduced-motion: reduce) { a.bc-day { transition: none; } }
.ws-site a.bc-sday.is-open { color: var(--site-text); }
.ws-site a.bc-sday.is-open:hover, .ws-site a.bc-sday.is-open:focus-visible, .ws-site a.bc-day:hover, .ws-site a.bc-day:focus-visible { color: var(--site-accent-text); }

/* css/site/blocks/booking_slots.css */
/* Next available times (and the booking calendar's times): slots, week, card (shared pieces in modules/interact). */
.bs-top { display: flex; align-items: flex-start; gap: 12px; }
.bs-zone { display: grid; gap: 10px; }
.bs-days { display: grid; gap: 12px; }
.bs-day { display: grid; gap: 8px; }
.bs-dayname { margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .01em; color: var(--site-text); }
.bs-times { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-time { display: inline-grid; place-items: center; min-width: 76px; min-height: 44px; padding: 0 14px; border-radius: 12px; text-decoration: none; font-weight: 750; font-size: 14.5px;
  font-variant-numeric: tabular-nums; color: var(--site-text); border: 1.5px solid color-mix(in oklab, var(--site-accent) 35%, transparent);
  background: color-mix(in oklab, var(--site-accent) 7%, var(--site-surface)); transition: background .18s, color .18s, transform .18s var(--site-ease); }
.bs-time:hover { background: var(--site-accent); color: var(--site-accent-text); border-color: var(--site-accent); transform: translateY(-1px); }
.bs-time:focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 28%, transparent); }
.bs-note { margin: 0; font-size: 12px; color: var(--site-muted); }
.bs-empty { margin: 0; display: flex; align-items: center; gap: 8px; padding: 14px; border-radius: 12px; font-size: 14px; font-weight: 600; color: var(--site-muted);
  background: color-mix(in oklab, var(--site-text) 5%, transparent); }
.bs-empty svg { width: 18px; height: 18px; flex: none; }
/* Slots: on wider pages the day sits beside its times. */
@container ws-page (min-width: 600px) {
  .bs-slots .bs-day { grid-template-columns: 120px minmax(0, 1fr); align-items: start; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid color-mix(in oklab, var(--site-text) 8%, transparent); }
  .bs-slots .bs-day:last-child { border-bottom: 0; padding-bottom: 0; }
  .bs-slots .bs-dayname { padding-top: 12px; }
}
/* Week: seven columns that swipe on phones. */
.bs-week .bs-days { grid-auto-flow: column; grid-auto-columns: minmax(108px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; padding-bottom: 6px; scrollbar-width: thin; }
.bs-week .bs-day { scroll-snap-align: start; align-content: start; padding: 10px 8px; border-radius: calc(var(--site-radius) - 4px); background: color-mix(in oklab, var(--site-text) 4%, transparent); }
.bs-week .bs-dayname { text-align: center; text-transform: capitalize; white-space: nowrap; }
.bs-week .bs-times { flex-direction: column; }
.bs-week .bs-time { min-width: 0; width: 100%; padding: 0 6px; font-size: 13.5px; white-space: nowrap; }
/* Card: the next few, compact. */
.bs-card .bs-time { min-width: 68px; }
@media (prefers-reduced-motion: reduce) { .bs-time { transition: none; } }
.ws-site a.bs-time { color: var(--site-text); }
.ws-site a.bs-time:hover, .ws-site a.bs-time:focus-visible { color: var(--site-accent-text); }

/* css/site/blocks/business_info.css */
/* Business details: card, rows, compact. */
.bi { display: grid; gap: 14px; padding: var(--b-pad, 20px); text-align: start; }
.bi-head { display: flex; align-items: center; gap: 12px; }
.bi-head-t { display: grid; gap: 2px; min-width: 0; }
.bi-logo { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; font-family: var(--site-heading); font-weight: 800; font-size: 1.35rem;
  background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 12px 24px -14px var(--site-accent); }
.bi-name { margin: 0; font-family: var(--site-heading); font-size: calc(1.2rem * var(--b-scale, 1)); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.bi-cat { margin: 0; color: var(--site-muted); font-size: 13.5px; }
.bi-facts { margin: 0; display: grid; gap: 0; }
.bi-fact { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; border-top: 1px solid var(--site-line); }
.bi-fact:first-child { border-top: 0; padding-top: 0; }
.bi-fact dt { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--site-muted); }
.bi-fact dt svg { width: 14px; height: 14px; color: var(--site-accent); }
.bi-fact dd { margin: 0; font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; padding-inline-start: 21px; }
.bi-fact dd a { display: inline-flex; min-height: 32px; align-items: center; color: var(--site-text); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--site-accent) 55%, transparent); text-underline-offset: 3px; }
.bi-legal { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 10px; border-top: 1px dashed var(--site-line); font-size: 12px; color: var(--site-muted); }
@container ws-page (min-width: 600px) {
  .bi-rows .bi-fact, .bi-card .bi-fact { grid-template-columns: 170px minmax(0, 1fr); align-items: baseline; gap: 12px; }
  .bi-rows .bi-fact dd, .bi-card .bi-fact dd { padding-inline-start: 0; }
}
.bi-compact { gap: 10px; padding: var(--b-pad, 16px); }
.bi-compact .bi-facts { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 16px; }
.bi-compact .bi-fact { border: 0; padding: 0; }
.bi-compact .bi-fact dt span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bi-compact .bi-fact { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; }
.bi-compact .bi-fact dd { padding: 0; font-size: 13.5px; }

/* css/site/blocks/button_group.css */
/* Button row: row (side by side, the main action filled); buttons, rows and grid are shared. */
.ws-bg-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-bg-row > * { flex: 1 1 124px; }
.ws-site .ws-bg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; min-width: 0; padding: 10px 16px;
  border-radius: var(--site-btn-radius); font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; text-align: center;
  background: var(--b-bg, color-mix(in oklab, var(--site-surface) 70%, transparent)); color: var(--site-text); border: 1.5px solid color-mix(in oklab, currentColor 18%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ws-bg-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ws-bg-btn svg { width: 17px; height: 17px; flex: none; }
.ws-bg-btn:hover { border-color: color-mix(in oklab, currentColor 40%, transparent); }
.ws-site .ws-bg-btn.is-primary { background: var(--site-accent); color: var(--site-accent-text); border-color: transparent; box-shadow: 0 12px 26px -16px var(--site-accent); }
.ws-bg-btn.is-primary:hover { filter: brightness(1.05); }
/* The shared grid, as short buttons: as many per line as fit, no tall tiles. */
.ws-block-button-group .ws-cv-grid .ws-track { display: flex; flex-wrap: wrap; } .ws-block-button-group .ws-cv-grid .ws-track > * { flex: 1 1 104px; }
.ws-block-button-group .ws-cv-grid .ws-tile { min-height: 0; gap: 10px; }
.ws-block-button-group .ws-cv-rows .ws-row { min-height: 60px; }
.ws-block-button-group .ws-cv-rows .ws-thumb { width: 42px; height: 42px; }

/* css/site/blocks/calendly.css */
/* Calendly: inline and button (the sheet holds the same frame). */
.cl { overflow: hidden; text-align: start; }
.cl-head { display: flex; gap: 12px; align-items: center; padding: var(--b-pad, 16px 18px); border-bottom: 1px solid var(--site-line); }
.cl-ico { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: color-mix(in oklab, var(--site-accent) 15%, transparent); color: var(--site-accent); }
.cl-title { margin: 0; font-family: var(--site-heading); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }
.cl-text { margin: 2px 0 0; color: var(--site-muted); font-size: 13.5px; }
.cl-frame { position: relative; width: 100%; background: var(--site-ink-light); }
.cl-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cl-ph { position: absolute; inset: 0; display: grid; align-content: start; gap: 18px; padding: 26px; background: color-mix(in oklab, var(--site-surface) 94%, var(--site-text)); }
.cl-ph-head { display: grid; gap: 8px; } .cl-ph-head i { display: block; height: 10px; width: 55%; border-radius: 5px; background: color-mix(in oklab, var(--site-text) 12%, transparent); } .cl-ph-head i + i { width: 35%; }
.cl-ph-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; max-width: 360px; }
.cl-ph-cal i { aspect-ratio: 1; border-radius: 50%; background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.cl-ph-cal i.is-open { background: color-mix(in oklab, var(--site-accent) 30%, transparent); box-shadow: inset 0 0 0 2px var(--site-accent); }
.cl-ph-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--site-muted); font-size: 13px; }
.ws-sheet .cl-frame { border-radius: calc(var(--site-radius) - 2px); overflow: hidden; }

/* css/site/blocks/callback.css */
/* Call me back: card, inline (shared pieces in modules/interact). The badge rings gently. */
.cb .wf-grid { gap: 12px; }
.cb-ring { position: relative; }
.cb-ring::after { content: ""; position: absolute; inset: -5px; border-radius: 19px; border: 2px solid color-mix(in oklab, var(--site-accent) 45%, transparent);
  animation: cb-ring 2.4s var(--site-ease) infinite; }
@keyframes cb-ring { 0% { opacity: .9; transform: scale(.92); } 70%, 100% { opacity: 0; transform: scale(1.18); } }
.cb .ix-fine { margin-top: 8px; }
@container ws-page (max-width: 440px) { .cb .wf-field.wf-w-half { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .cb-ring::after { animation: none; opacity: 0; } }

/* css/site/blocks/callout.css */
/* Callout: info, success, warning, accent, glass. Tones mix the theme's text and accent with fixed hues for meaning. */
.ws-co { --tone: var(--site-accent); position: relative; display: flex; gap: 14px; align-items: flex-start; padding: var(--b-pad, 16px 18px); text-align: start;
  border-radius: var(--b-radius, calc(var(--site-radius) + 2px)); color: var(--b-fg, var(--site-text));
  background: var(--b-bg, color-mix(in oklab, var(--tone) 10%, var(--site-surface))); border: var(--b-border, 1px solid color-mix(in oklab, var(--tone) 26%, transparent)); box-shadow: var(--b-shadow, none); }
.ws-co-info { --tone: color-mix(in oklab, var(--site-accent) 30%, hsl(212 90% 52%)); }
.ws-co-success { --tone: hsl(152 70% 38%); }
.ws-co-warning { --tone: hsl(36 95% 48%); }
.ws-co:is(.ws-co-info, .ws-co-success, .ws-co-warning)::before { content: ""; position: absolute; inset-block: 12px; inset-inline-start: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--tone); }
[dir="rtl"] .ws-co::before { border-radius: 3px 0 0 3px; }
.ws-co-icon { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--tone); background: color-mix(in oklab, var(--tone) 16%, transparent); }
.ws-co-icon svg { width: 18px; height: 18px; }
.ws-co-body { display: grid; gap: 3px; min-width: 0; padding-block-start: 6px; }
.ws-co-title { margin: 0; font-family: var(--site-heading); font-weight: 700; font-size: calc(1rem * var(--b-scale, 1)); letter-spacing: -0.015em; line-height: 1.3; }
.ws-co-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: color-mix(in oklab, currentColor 82%, transparent); text-wrap: pretty; }
.ws-co-link { display: inline-flex; align-items: center; gap: 6px; width: fit-content; min-height: 44px; margin-block: 2px -10px; font-weight: 700; font-size: 14px; color: var(--tone); text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); text-underline-offset: 4px; }
.ws-co-link svg { width: 15px; height: 15px; transition: translate .18s var(--site-ease); }
.ws-co-link:hover svg { translate: calc(3px * var(--dir-sign, 1)) 0; }
.ws-co-warning .ws-co-link { color: color-mix(in oklab, var(--tone) 60%, var(--site-text)); }
.ws-co-accent { --tone: var(--site-accent-text); background: var(--b-bg, radial-gradient(120% 140% at 100% 0%, color-mix(in oklab, var(--site-accent-text) 18%, transparent), transparent 55%), var(--site-accent)); color: var(--b-fg, var(--site-accent-text)); border: var(--b-border, 0 solid transparent); box-shadow: var(--b-shadow, 0 16px 34px -20px var(--site-accent)); }
.ws-co-accent .ws-co-icon { background: color-mix(in oklab, var(--site-accent-text) 18%, transparent); }
.ws-co-glass { --tone: var(--site-accent); background: var(--b-bg, color-mix(in oklab, var(--site-surface) 55%, transparent)); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: var(--b-border, 1px solid color-mix(in oklab, var(--site-text) 12%, transparent)); box-shadow: var(--b-shadow, var(--site-shadow-md)); }
.ws-dark .ws-co-warning .ws-co-link { color: var(--tone); }
@container ws-page (min-width: 600px) { .ws-co { gap: 16px; padding: var(--b-pad, 18px 22px); } }

/* css/site/blocks/carousel.css */
/* Image carousel: carousel, slideshow (optional autoplay), cards, peek. Scroll snap; arrows, dots and autoplay via site.js. */
.ws-sl { --sl-r: var(--b-radius, calc(var(--site-radius) + 4px)); --shade: color-mix(in oklab, var(--site-ink-dark) 78%, transparent); margin: 0; }
.ws-sl-stage { position: relative; min-width: 0; }
.ws-sl .ws-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding-block-end: 6px; }
.ws-sl .ws-track::-webkit-scrollbar { display: none; }
.ws-sl-slide { flex: 0 0 var(--car-w, 76%); min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.ws-sl-card { position: relative; display: flex; flex-direction: column; gap: 10px; height: 100%; text-align: start; color: inherit; }
.ws-sl-media { position: relative; display: block; overflow: hidden; isolation: isolate; aspect-ratio: var(--shape, 4 / 5); border-radius: var(--sl-r); background: color-mix(in oklab, var(--site-text) 7%, transparent); }
.ws-sl-media .ws-media, .ws-sl-media .ws-media-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--b-fit, cover); transition: transform .8s var(--site-ease); }
a.ws-sl-card:hover .ws-sl-media .ws-media { transform: scale(1.04); }
a.ws-sl-card[data-lightbox] { cursor: zoom-in; }
a.ws-sl-card:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 60%, transparent); outline-offset: 3px; border-radius: var(--sl-r); }
.ws-sl-body { display: grid; gap: 3px; padding-inline: 2px; min-width: 0; }
.ws-sl-t { font-family: var(--site-heading); font-weight: 700; font-size: calc(1rem * var(--b-scale, 1)); letter-spacing: -0.015em; line-height: 1.25; overflow-wrap: anywhere; }
.ws-sl-c { color: var(--site-muted); font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ws-sl-cta { display: inline-flex; align-items: center; gap: 6px; width: fit-content; margin-block-start: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--site-btn-radius);
  background: var(--site-accent); color: var(--site-accent-text); font-weight: 700; font-size: 13.5px; }
.ws-sl-cta svg { width: 15px; height: 15px; transition: translate .2s var(--site-ease); }
a.ws-sl-card:hover .ws-sl-cta svg { translate: calc(3px * var(--dir-sign, 1)) 0; }
.ws-sl .ws-car-nav { display: flex; }
@container ws-page (min-width: 600px) { .ws-sl-carousel .ws-sl-slide { flex-basis: var(--car-w, 42%); } }
@container ws-page (min-width: 1024px) { .ws-sl-carousel .ws-sl-slide { flex-basis: var(--car-w, calc((100% - 24px) / 3)); } }

/* Slideshow: one wide slide, the words over a soft shade, arrows over the photo. */
.ws-sl-slideshow .ws-track { gap: 0; padding: 0; border-radius: var(--sl-r); box-shadow: var(--b-shadow, var(--site-shadow-md)); }
.ws-sl-slideshow .ws-sl-slide { flex-basis: 100%; }
.ws-sl-slideshow .ws-sl-media { border-radius: 0; }
.ws-sl-slideshow .ws-sl-card { gap: 0; }
.ws-sl-slideshow .ws-sl-body { position: absolute; z-index: 2; inset-inline: 0; inset-block-end: 0; padding: 20px 20px 18px; color: var(--site-ink-light); }
.ws-sl-slideshow .ws-sl-t { font-size: calc(1.3rem * var(--b-scale, 1)); letter-spacing: -0.025em; text-wrap: balance; }
.ws-sl-slideshow .ws-sl-c { color: color-mix(in oklab, var(--site-ink-light) 82%, transparent); max-width: 48ch; }
.ws-sl-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 40%, var(--shade)); pointer-events: none; }
:is(.ws-sl-slideshow, .ws-sl-peek) .ws-car-nav { position: absolute; z-index: 3; inset-inline: 10px; inset-block-start: 50%; margin: 0; justify-content: space-between; transform: translateY(-50%); pointer-events: none; }
:is(.ws-sl-slideshow, .ws-sl-peek) .ws-car-nav button { pointer-events: auto; background: color-mix(in oklab, var(--site-surface) 80%, transparent); border-color: transparent; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--site-shadow-md); }
:is(.ws-sl-slideshow, .ws-sl-peek) .ws-car-nav button[disabled] { opacity: 0; pointer-events: none; }
@container ws-page (min-width: 600px) { .ws-sl-slideshow .ws-sl-body { padding: 28px 30px 26px; } .ws-sl-slideshow .ws-sl-t { font-size: calc(1.65rem * var(--b-scale, 1)); } }

/* Cards: each slide is a card with its photo on top and a call to action. */
.ws-sl-cards .ws-sl-slide { flex-basis: var(--car-w, 84%); }
.ws-sl-cards .ws-sl-card { gap: 0; overflow: hidden; }
.ws-sl-cards .ws-sl-media { border-radius: 0; }
.ws-sl-cards .ws-sl-body { padding: 14px 16px 16px; gap: 4px; }
.ws-sl-cards .ws-sl-c { -webkit-line-clamp: 3; }
@container ws-page (min-width: 600px) { .ws-sl-cards .ws-sl-slide { flex-basis: var(--car-w, 58%); } }
@container ws-page (min-width: 1024px) { .ws-sl-cards .ws-sl-slide { flex-basis: var(--car-w, 46%); } }

/* Peek: the current slide in the middle, its neighbours dimmed at the edges. */
.ws-sl-peek .ws-track { padding-inline: 12%; scroll-padding-inline: 12%; gap: 10px; }
.ws-sl-peek .ws-sl-slide { flex-basis: 100%; scroll-snap-align: center; transition: opacity .35s, transform .35s var(--site-ease); }
.ws-sl-peek .ws-sl-body { text-align: center; justify-items: center; padding-block-start: 2px; }
.ws-js .ws-sl-peek .ws-sl-slide { opacity: .45; transform: scale(.93); }
.ws-js .ws-sl-peek .ws-sl-slide.is-current { opacity: 1; transform: none; }
.ws-mode-canvas .ws-sl-peek .ws-sl-slide, .ws-mode-thumb .ws-sl-peek .ws-sl-slide { opacity: 1; transform: none; }
@container ws-page (min-width: 600px) { .ws-sl-peek .ws-track { padding-inline: 22%; scroll-padding-inline: 22%; } }

/* Dots, pause. */
.ws-sl-foot { display: flex; align-items: center; justify-content: center; gap: 6px; margin-block-start: 6px; }
.ws-sl-dots { display: flex; flex-wrap: wrap; justify-content: center; }
.ws-sl-dots button { width: 22px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.ws-sl-dots button::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: color-mix(in oklab, var(--site-text) 26%, transparent); transition: width .25s var(--site-ease), background .25s; }
.ws-sl-dots button.is-on::before { width: 18px; background: var(--site-accent); }
.ws-sl-dots button:focus-visible { outline: 2px solid var(--site-accent); outline-offset: -8px; border-radius: 999px; }
.ws-sl-play { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--site-line); background: var(--site-surface); color: var(--site-text); display: grid; place-items: center; cursor: pointer; box-shadow: var(--site-shadow-sm); }
.ws-sl-play[hidden] { display: none; }
.ws-sl-play svg { width: 16px; height: 16px; }
.ws-sl-i-play { display: none; }
.ws-sl.is-stopped .ws-sl-i-play { display: grid; }
.ws-sl.is-stopped .ws-sl-i-pause { display: none; }
html:not(.ws-js) .ws-mode-public .ws-sl-dots { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ws-sl-media .ws-media, .ws-sl-peek .ws-sl-slide, .ws-sl-dots button::before { transition: none; }
  a.ws-sl-card:hover .ws-sl-media .ws-media { transform: none; }
}

/* css/site/blocks/carousel_group.css */
/* Carousel of blocks (B3 · U3): carousel (one slide in view, the next peeking) and peek (several in view on wider
   screens). Scroll snap; the next slide always shows a little so phones see there is more. */
.cg { --cg-w: 86%; display: flex; flex-direction: column; gap: 12px; text-align: start; }
.cg-peek { --cg-w: 72%; }
.cg-head { display: flex; align-items: flex-end; gap: 12px; }
.cg-head-text { flex: 1; min-width: 0; display: grid; gap: 4px; text-align: var(--b-align, start); }
.cg-title { margin: 0; font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.025em; font-weight: 700; font-family: var(--site-heading, inherit); }
.cg-intro { margin: 0; color: var(--site-muted); font-size: 14.5px; }
.cg .ws-car-nav { display: flex; margin: 0; flex: none; }
.cg-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding: 4px 2px 10px; margin: -4px -2px 0; outline: none; }
.cg-track::-webkit-scrollbar { display: none; }
.cg-track:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 45%, transparent); outline-offset: 2px; border-radius: var(--site-radius); }
.cg-slide { flex: 0 0 var(--cg-w); min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; }
.cg-slide > .ws-block { flex: 0 0 auto; }
.cg-stitle { margin: 0; font-size: 1rem; font-weight: 700; }
.cg-dots { display: flex; justify-content: center; gap: 6px; }
.cg-dot { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; }
.cg-dot::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: color-mix(in oklab, var(--site-text) 25%, transparent); transition: width .25s, background .25s; }
.cg-dot.is-on::before { width: 22px; background: var(--site-accent); }
.cg-dot:focus-visible { outline: 2px solid var(--site-accent); border-radius: 50%; }
.cg-demo { display: grid; gap: 4px; padding: 12px; border-radius: var(--b-radius, var(--site-radius)); }
.cg-demo-media { display: block; aspect-ratio: 4 / 3; border-radius: calc(var(--site-radius) - 4px); background: linear-gradient(135deg, color-mix(in oklab, var(--site-accent) 45%, transparent), color-mix(in oklab, var(--site-accent) 12%, transparent)); margin-bottom: 6px; }
.cg-demo span:last-child { color: var(--site-muted); font-size: 13px; }
@container ws-page (min-width: 600px) { .cg { --cg-w: 62%; } .cg-peek { --cg-w: 44%; } }
@container ws-page (min-width: 1024px) { .cg { --cg-w: 70%; } .cg-peek { --cg-w: calc((100% - 24px) / 3); } }
@media (prefers-reduced-motion: no-preference) { .cg-track { scroll-behavior: smooth; } }

/* css/site/blocks/case_study.css */
/* Case study (B3 · U3): card, featured, editorial. */
.cs { display: flex; flex-direction: column; gap: 16px; text-align: start; border-radius: var(--b-radius, calc(var(--site-radius) + 4px)); overflow: hidden; }
.cs-card, .cs-featured { padding-block-end: 20px; }
.cs-card > :not(.cs-cover), .cs-featured > :not(.cs-hero) { margin-inline: 20px; }
.cs-cover { aspect-ratio: 16 / 9; overflow: hidden; }
.cs-cover .ws-media, .cs-hero-media .ws-media, .cs-img .ws-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-head { display: grid; gap: 6px; }
.cs-client, .cs-kicker { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--site-accent); }
.cs-title { margin: 0; font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.025em; font-weight: 750; font-family: var(--site-heading, inherit); }
.cs-sum { margin: 0; color: var(--site-muted); font-size: 14.5px; line-height: 1.55; }
.cs-metrics { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(min(var(--n, 3), 3), minmax(0, 1fr)); gap: 8px; }
.cs-metrics li { display: grid; gap: 2px; padding: 12px; border-radius: var(--site-radius); background: color-mix(in oklab, var(--site-accent) 9%, transparent); }
.cs-metrics b { font-size: 1.45rem; line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; color: var(--site-accent); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cs-metrics span { font-size: 12.5px; color: var(--site-muted); font-weight: 600; line-height: 1.3; }
.cs-more summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 14px; border-radius: var(--site-radius); border: 1px solid var(--site-line); cursor: pointer; list-style: none; font-weight: 700; }
.cs-more summary::-webkit-details-marker { display: none; }
.cs-more summary span { display: grid; transition: transform .2s; }
.cs-more[open] summary span { transform: rotate(180deg); }
.cs-more summary:focus-visible, .cs-link:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 55%, transparent); outline-offset: 2px; }
.cs-story { display: grid; gap: 14px; padding: 16px 2px 2px; }
.cs-ch { display: grid; gap: 4px; align-content: start; }
.cs-ch h3 { margin: 0; font-size: 1rem; font-weight: 750; letter-spacing: -0.01em; }
.cs-ch p { margin: 0; font-size: 14.5px; line-height: 1.65; color: color-mix(in oklab, var(--site-text) 85%, transparent); white-space: pre-line; }
.cs-quote { margin: 0; padding: 14px 16px; border-inline-start: 3px solid var(--site-accent); border-radius: 0 var(--site-radius) var(--site-radius) 0; background: color-mix(in oklab, var(--site-text) 4%, transparent); }
[dir="rtl"] .cs-quote { border-radius: var(--site-radius) 0 0 var(--site-radius); }
.cs-quote p { margin: 0; font-size: 15px; line-height: 1.55; font-style: italic; }
.cs-quote cite { display: block; margin-top: 6px; font-style: normal; font-size: 13px; font-weight: 700; color: var(--site-muted); }
.cs-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cs-tags li { padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--site-line); color: var(--site-muted); }
.cs-link { display: inline-flex; align-items: center; gap: 8px; width: fit-content; min-height: 44px; font-weight: 750; color: var(--site-accent); }
.cs-link svg { width: 16px; height: 16px; transition: transform .2s; }
.cs-link:hover svg { transform: translateX(calc(3px * var(--dir-sign, 1))); }
/* featured */
.cs-hero { position: relative; min-height: 300px; display: grid; align-items: end; color: var(--site-on-media, #fff); }
.cs-hero-media { position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in oklab, var(--site-accent) 70%, var(--site-text)), var(--site-accent)); }
.cs-hero-media .ws-media-ph { display: none; }
.cs-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / .72), rgb(0 0 0 / .1) 65%); }
.cs-hero-text { position: relative; z-index: 1; display: grid; gap: 8px; padding: 24px 20px; }
.cs-hero .cs-client { color: inherit; opacity: .85; }
.cs-hero .cs-title { font-size: clamp(1.45rem, 5cqi, 2.1rem); color: inherit; }
.cs-hero .cs-sum { color: inherit; opacity: .9; }
.cs-chapters { display: grid; gap: 16px; }
.cs-featured .cs-ch { padding: 14px; border-radius: var(--site-radius); background: color-mix(in oklab, var(--site-text) 3.5%, transparent); }
.cs-n { font-size: 12px; font-weight: 800; letter-spacing: .08em; color: var(--site-accent); font-variant-numeric: tabular-nums; }
.cs-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cs-img { aspect-ratio: 4 / 3; border-radius: var(--site-radius); overflow: hidden; }
/* editorial */
.cs-editorial { overflow: visible; gap: 22px; }
.cs-editorial .cs-title { font-size: clamp(1.7rem, 6cqi, 2.6rem); line-height: 1.08; letter-spacing: -0.04em; }
.cs-editorial .cs-sum { font-size: 1.08rem; }
.cs-editorial .cs-cover { border-radius: var(--b-radius, calc(var(--site-radius) + 4px)); }
.cs-editorial .cs-metrics li { background: none; padding: 14px 0 0; border-radius: 0; border-block-start: 2px solid var(--site-text); }
.cs-editorial .cs-metrics b { font-size: 2rem; color: var(--site-text); }
.cs-editorial .cs-ch { grid-template-columns: auto 1fr; column-gap: 14px; padding-block-start: 14px; border-block-start: 1px solid var(--site-line); }
.cs-editorial .cs-ch .cs-n { grid-row: span 2; font-size: 1.3rem; }
.cs-quote-big { border: 0; background: none; padding: 8px 0; text-align: center; }
.cs-quote-big p { font-size: clamp(1.2rem, 4.5cqi, 1.6rem); line-height: 1.35; font-family: var(--site-heading, inherit); letter-spacing: -0.02em; }
@container ws-page (min-width: 600px) {
  .cs-hero { min-height: 380px; }
  .cs-hero-text { padding: 32px 28px; }
  .cs-card > :not(.cs-cover), .cs-featured > :not(.cs-hero) { margin-inline: 24px; }
  .cs-images-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container ws-page (min-width: 1024px) {
  .cs-featured .cs-chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-metrics { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
}

/* css/site/blocks/class_schedule.css */
/* Class schedule: week, list, cards (shared pieces in modules/interact). */
.csd { display: grid; gap: 16px; text-align: start; }
.csd-week { display: grid; gap: 10px; }
.csd-wlabel { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--site-accent); }
.csd-days { display: grid; gap: 10px; }
.csd-day { display: grid; gap: 4px; padding: 12px; }
.csd-dlabel { margin: 0 0 4px; display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 14.5px; }
.csd-dchip { display: grid; justify-items: center; width: 42px; padding: 4px 0; border-radius: 11px; line-height: 1.05; background: color-mix(in oklab, var(--site-accent) 13%, transparent); }
.csd-dchip small { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--site-accent); }
.csd-dchip b { font-size: 1.05rem; }
.csd-list { display: grid; }
.csd-s { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid color-mix(in oklab, var(--site-text) 8%, transparent); }
.csd-list .csd-s:first-child { border-top: 0; }
.csd-time { margin: 0; display: grid; font-variant-numeric: tabular-nums; }
.csd-time time { font-weight: 800; font-size: 15px; }
.csd-time small { font-size: 12px; color: var(--site-muted); }
.csd-main { display: grid; gap: 3px; min-width: 0; }
.csd-name { margin: 0; font-size: 15px; font-weight: 750; line-height: 1.25; }
.csd-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--site-muted); }
.csd-meta span { display: inline-flex; align-items: center; gap: 4px; }
.csd-meta svg { width: 13px; height: 13px; }
.csd-left { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--site-muted); }
.csd-left.is-hot { color: var(--site-accent); }
.csd-bar { width: 56px; height: 5px; border-radius: 99px; overflow: hidden; background: color-mix(in oklab, var(--site-text) 10%, transparent); }
.csd-bar i { display: block; height: 100%; width: calc(var(--fill, 0) * 100%); border-radius: inherit; background: var(--site-accent); }
.csd-book { display: inline-grid; place-items: center; min-width: 72px; min-height: 44px; padding: 0 16px; border-radius: var(--site-btn-radius); text-decoration: none; font-weight: 800; font-size: 14px;
  background: var(--site-accent); color: var(--site-accent-text); transition: transform .18s var(--site-ease), filter .18s; }
.csd-book:hover { transform: translateY(-1px); filter: brightness(1.05); }
.csd-book:focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 28%, transparent); }
.csd-book.is-full { background: color-mix(in oklab, var(--site-text) 8%, transparent); color: var(--site-muted); }
.csd-s.is-sold_out .csd-name, .csd-s.is-closed .csd-name { color: var(--site-muted); }
.csd-note { margin: 0; font-size: 12px; color: var(--site-muted); }
.csd-empty { margin: 0; display: flex; gap: 8px; align-items: center; padding: 16px; font-weight: 600; color: var(--site-muted); }
.csd-empty svg { width: 18px; height: 18px; }
/* Week: days as columns on wide pages (swipe on tablets). */
@container ws-page (min-width: 900px) {
  .csd-week .csd-days { grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); overflow-x: auto; align-items: start; scrollbar-width: thin; }
  .csd-week .csd-s { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .csd-week .csd-time { display: flex; gap: 6px; align-items: baseline; }
  .csd-week .csd-book { justify-self: start; }
  .ws-sys-classic .csd-week .csd-days, .ws-sys-minimal .csd-week .csd-days { grid-auto-flow: row; }
  .ws-sys-classic .csd-week .csd-s, .ws-sys-minimal .csd-week .csd-s { grid-template-columns: 62px minmax(0, 1fr) auto; }
}
/* Cards: each session a card. */
.csd-cards .csd-day { padding: 0; background: none; border: 0; box-shadow: none; }
.csd-cards .csd-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.csd-cards .csd-s { grid-template-columns: auto minmax(0, 1fr); padding: 14px; border: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); border-radius: var(--site-radius);
  background: var(--site-surface); box-shadow: var(--site-shadow-sm); }
.csd-cards .csd-book { grid-column: 1 / -1; }
@media (prefers-reduced-motion: reduce) { .csd-book { transition: none; } }
.ws-site a.csd-book { color: var(--site-accent-text); }

/* css/site/blocks/cohort.css */
/* Next cohort (B3 · M3): countdown-card, banner, compact. Countdown digits from blocks/countdown. */
.ws-coh { display: grid; gap: 14px; min-width: 0; text-align: start; padding: var(--b-pad, 18px); border-radius: var(--b-radius, calc(var(--site-radius) + 8px)); }
.ws-coh-main { display: grid; gap: 7px; min-width: 0; }
.ws-site .ws-coh-eyebrow { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--site-accent); }
.ws-coh-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in oklab, currentColor 22%, transparent); }
.ws-coh-seats { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: auto; padding: 4px 10px; border-radius: 999px; font-size: 12px; letter-spacing: 0; text-transform: none;
  background: color-mix(in oklab, var(--site-text) 7%, transparent); color: var(--site-text); }
.ws-coh-seats.is-low { background: color-mix(in oklab, var(--site-accent) 16%, transparent); color: var(--site-accent); }
.ws-site .ws-coh-seats svg { width: 14px; height: 14px; }
.ws-coh-title { margin: 0; font-family: var(--site-heading); font-size: calc(1.45rem * var(--b-scale, 1)); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.ws-site .ws-coh-when { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 650; font-size: 14.5px; }
.ws-site .ws-coh-when svg { width: 17px; height: 17px; color: var(--site-accent); flex: none; }
.ws-site .ws-coh-text { margin: 0; color: var(--site-muted); font-size: 14.5px; line-height: 1.5; }
.ws-coh-cd .ws-countdown-grid { margin: 0; }
.ws-coh-cd .ws-countdown-grid div { text-align: center; }
.ws-site .ws-coh-closed, .ws-site .ws-coh-cd .ws-countdown-ended { margin: 0; padding: 12px 14px; border-radius: calc(var(--site-radius) - 2px); background: color-mix(in oklab, var(--site-text) 6%, transparent); color: var(--site-muted); font-weight: 600; }
.ws-site .ws-coh-cta { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 22px; border-radius: var(--site-btn-radius); border: 0; cursor: pointer; font-family: inherit;
  background: var(--site-btn-bg, var(--site-accent)); color: var(--site-btn-text, var(--site-accent-text)); font-weight: 800; font-size: 15.5px; box-shadow: 0 14px 28px -16px color-mix(in oklab, var(--site-accent) 80%, transparent); }
.ws-coh-cta small { font-weight: 600; opacity: .85; }
.ws-coh-cta svg { width: 17px; height: 17px; }

/* Banner: an accent strip. */
.ws-coh-banner { color: var(--site-accent-text); box-shadow: var(--b-shadow, var(--site-shadow-md));
  background: radial-gradient(90% 120% at 100% 0%, color-mix(in oklab, var(--site-accent) 60%, var(--site-surface)) 0%, transparent 55%), linear-gradient(140deg, var(--site-accent), color-mix(in oklab, var(--site-accent) 55%, var(--site-ink-dark))); }
.ws-site .ws-coh-banner .ws-coh-eyebrow, .ws-site .ws-coh-banner .ws-coh-when svg { color: var(--site-accent-text); }
.ws-site .ws-coh-banner .ws-coh-text { color: color-mix(in oklab, var(--site-accent-text) 82%, transparent); }
.ws-coh-banner .ws-coh-seats { background: color-mix(in oklab, var(--site-accent-text) 18%, transparent); color: var(--site-accent-text); }
.ws-coh-banner .ws-countdown-grid div { background: color-mix(in oklab, var(--site-accent-text) 14%, transparent); }
.ws-coh-banner .ws-countdown-grid span { color: color-mix(in oklab, var(--site-accent-text) 75%, transparent); }
.ws-site .ws-coh-banner .ws-coh-cta { background: var(--site-accent-text); color: var(--site-accent); box-shadow: 0 14px 28px -16px rgb(0 0 0 / .5); }
@container ws-page (min-width: 720px) {
  .ws-coh-banner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; padding: var(--b-pad, 24px 26px); }
  .ws-coh-banner .ws-coh-main { grid-row: span 2; }
  .ws-coh-banner .ws-countdown-grid { grid-template-columns: repeat(4, 62px); }
}

/* Compact: one row. */
.ws-coh-compact { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: var(--b-pad, 14px 16px); }
.ws-coh-compact .ws-coh-title { font-size: calc(1.1rem * var(--b-scale, 1)); }
.ws-coh-compact .ws-coh-when { font-size: 13.5px; color: var(--site-muted); }
.ws-site .ws-coh-in { margin: 0; font-weight: 800; font-size: 14px; color: var(--site-accent); }
.ws-site .ws-coh-compact .ws-coh-cta { min-height: 44px; font-size: 14.5px; }
@container ws-page (min-width: 600px) {
  .ws-coh-compact { grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: 16px; }
}

/* css/site/blocks/columns.css */
/* Columns container: 2, 3, 4 or a sidebar; each child block is a column. Stacks on phones (and tablets when asked). */
.ws-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cols-gap, 14px); align-items: stretch; }
.ws-cols-gap-s { --cols-gap: 8px; } .ws-cols-gap-l { --cols-gap: 24px; }
.ws-cols-v-start { align-items: start; } .ws-cols-v-center { align-items: center; }
.ws-cols-v-stretch > .ws-block > :not(.ws-sheet) { height: 100%; }
.ws-cols > .ws-block { min-width: 0; }
@container ws-page (min-width: 600px) {
  .ws-cols-stack-mobile.ws-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-cols-stack-mobile.ws-cols-2.ws-cols-r-wide-start { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .ws-cols-stack-mobile.ws-cols-2.ws-cols-r-wide-end { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .ws-cols-stack-mobile.ws-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ws-cols-stack-mobile.ws-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-cols-stack-mobile.ws-cols-sidebar { grid-template-columns: minmax(200px, 1fr) minmax(0, 2.2fr); }
}
@container ws-page (min-width: 1024px) {
  .ws-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-cols-2.ws-cols-r-wide-start { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .ws-cols-2.ws-cols-r-wide-end { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .ws-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ws-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ws-cols-sidebar { grid-template-columns: minmax(240px, 1fr) minmax(0, 2.6fr); }
  .ws-cols-sidebar > .ws-block:first-child { position: sticky; top: 24px; align-self: start; }
}

/* css/site/blocks/community_channels.css */
/* Community channels: cards, buttons, rows. Platform colours from blocks/_networks (--net, --net-ink). */
.ws-cc { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ws-cc > li { min-width: 0; display: grid; }
.ws-cc-item { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-align: start; }
.ws-cc-ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--net, var(--site-accent)); color: var(--net-ink, var(--site-accent-text)); }
.ws-site .ws-cc-ico svg { width: 22px; height: 22px; }
.ws-cc-t { flex: 1; min-width: 0; display: grid; gap: 2px; line-height: 1.3; }
.ws-cc-name { font-family: var(--site-heading); font-weight: 750; font-size: 15.5px; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.ws-cc-t small { font-size: 12.5px; font-weight: 600; color: var(--site-muted); }
.ws-cc-join { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 16px; border-radius: 999px; font-weight: 750; font-size: 13.5px; white-space: nowrap;
  background: var(--net, var(--site-accent)); color: var(--net-ink, var(--site-accent-text)); }
.ws-cc-join svg { width: 15px; height: 15px; transition: translate .18s; }
.ws-cc-item:hover .ws-cc-join svg { translate: calc(3px * var(--dir-sign, 1)) 0; }

/* Cards: a tinted card per community. */
.ws-cc-cards { grid-template-columns: minmax(0, 1fr); }
@container ws-page (min-width: 600px) { .ws-cc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ws-cc-cards > li:only-child { grid-column: 1 / -1; } }
.ws-cc-cards .ws-cc-item { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; overflow: hidden; isolation: isolate;
  border-radius: var(--b-radius, calc(var(--site-radius) + 8px)); border: var(--b-border, 1px solid color-mix(in oklab, var(--net, var(--site-accent)) 24%, var(--site-line)));
  background: var(--b-bg, radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--net, var(--site-accent)) 16%, transparent), transparent 60%), var(--site-surface)); box-shadow: var(--b-shadow, var(--site-shadow-md)); }
.ws-cc-plat { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in oklab, var(--net, var(--site-accent)) 75%, var(--site-text)); }
.ws-cc-about { font-size: 13.5px; font-weight: 500; color: var(--site-muted); line-height: 1.45; }
.ws-cc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.ws-cc-members { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; }
.ws-cc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--net, var(--site-accent)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--net, var(--site-accent)) 25%, transparent); }
.ws-cc-cards .ws-cc-foot .ws-cc-join { margin-inline-start: auto; }

/* Buttons: full width in the platform's colour. */
.ws-cc-buttons .ws-cc-item { min-height: 62px; padding: 9px 18px 9px 9px; border-radius: var(--site-btn-radius); background: var(--net, var(--site-accent)); color: var(--net-ink, var(--site-accent-text)); box-shadow: 0 12px 26px -18px var(--net, var(--site-accent)); }
.ws-cc-buttons .ws-cc-ico { background: color-mix(in oklab, var(--net-ink, #FFFFFF) 18%, transparent); color: inherit; }
.ws-cc-buttons .ws-cc-t small { color: inherit; opacity: .8; }
.ws-cc-go svg { width: 18px; height: 18px; }

/* Rows. */
.ws-cc-rows .ws-cc-item { padding: 10px 10px 10px 10px; background: var(--b-bg, var(--site-surface)); border: var(--b-border, 1px solid var(--site-line)); border-radius: var(--b-radius, calc(var(--site-radius) + 4px)); box-shadow: var(--b-shadow, var(--site-shadow-sm)); }

/* css/site/blocks/community_preview.css */
/* Community feed (B3 · M3): feed, cards, compact. */
.ws-cf { display: grid; gap: 10px; min-width: 0; text-align: start; }
.ws-cf-top { display: flex; align-items: center; gap: 12px; padding: 2px; min-width: 0; }
.ws-cf-ico { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 14px; background: color-mix(in oklab, var(--site-accent) 14%, transparent); color: var(--site-accent); }
.ws-site .ws-cf-ico svg { width: 21px; height: 21px; }
.ws-cf-name { display: grid; gap: 1px; min-width: 0; }
.ws-cf-name b { font-family: var(--site-heading); font-weight: 700; font-size: calc(1.05rem * var(--b-scale, 1)); letter-spacing: -0.02em; }
.ws-cf-name small { font-size: 12.5px; color: var(--site-muted); }
.ws-cf-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.ws-cf-post { border-radius: var(--b-radius, calc(var(--site-radius) + 4px)); min-width: 0; }
.ws-site .ws-cf-link { display: grid; gap: 8px; padding: var(--b-pad, 14px 16px); color: inherit; height: 100%; align-content: start; border-radius: inherit; }
.ws-cf-link:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 60%, transparent); outline-offset: 2px; }
.ws-cf-by { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ws-cf-av { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px;
  background: linear-gradient(145deg, color-mix(in oklab, var(--site-accent) 35%, var(--site-surface)), color-mix(in oklab, var(--site-accent) 18%, var(--site-surface))); color: var(--site-accent); }
.ws-cf-av.is-team { background: var(--site-accent); color: var(--site-accent-text); }
.ws-site .ws-cf-av svg { width: 17px; height: 17px; }
.ws-cf-who { flex: 1; display: grid; min-width: 0; }
.ws-cf-who b { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-cf-who small { font-size: 12px; color: var(--site-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-cf-team { flex: none; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; background: color-mix(in oklab, var(--site-accent) 14%, transparent); color: var(--site-accent); }
.ws-cf-title { font-weight: 750; font-size: 15.5px; line-height: 1.3; overflow-wrap: anywhere; }
.ws-cf-ex { color: var(--site-muted); font-size: 14px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ws-cf-stats { display: flex; align-items: center; gap: 14px; font-size: 12.5px; font-weight: 700; color: var(--site-muted); font-variant-numeric: tabular-nums; }
.ws-cf-stats > span { display: inline-flex; align-items: center; gap: 5px; }
.ws-site .ws-cf-stats svg { width: 15px; height: 15px; }
.ws-cf-when { margin-inline-start: auto; font-weight: 500; }
.ws-site .ws-cf-cta { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding: 0 20px; border-radius: var(--site-btn-radius); border: 0; cursor: pointer; font-family: inherit;
  background: var(--site-btn-bg, var(--site-accent)); color: var(--site-btn-text, var(--site-accent-text)); font-weight: 800; font-size: 15px; }
.ws-cf-cta small { font-weight: 600; opacity: .85; }
.ws-cf-cta svg { width: 17px; height: 17px; }

/* Cards: a scroll-snap row on phones, a grid on wide pages. */
.ws-cf-track { grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 10px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.ws-cf-track > li { scroll-snap-align: start; }
.ws-cf-track:focus-visible { outline: 2px solid color-mix(in oklab, var(--site-accent) 50%, transparent); outline-offset: 2px; border-radius: 12px; }
@container ws-page (min-width: 720px) { .ws-cf-track { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; padding: 0; } }
.ws-cf-cards .ws-cf-ex { -webkit-line-clamp: 4; }

/* Compact: titles on one surface. */
.ws-cf-compact { padding: var(--b-pad, 12px 14px); border-radius: var(--b-radius, calc(var(--site-radius) + 4px)); gap: 4px; }
.ws-cf-compact .ws-cf-posts { gap: 0; }
.ws-cf-compact .ws-cf-post + .ws-cf-post { border-top: 1px solid var(--site-line); }
.ws-site .ws-cf-compact .ws-cf-link { padding: 12px 2px; gap: 5px; }
.ws-cf-compact .ws-cf-title { font-size: 15px; }
.ws-cf-compact .ws-cf-cta { margin-top: 8px; }
.ws-cf-cards .ws-cf-team { display: none; }

/* css/site/blocks/consultation.css */
/* Request a call: card, inline (shared pieces in modules/interact). On wide pages the card sets the words beside the form. */
.cs .wf-grid { gap: 12px; }
.cs-card { --b-bg: radial-gradient(120% 100% at 0% 0%, color-mix(in oklab, var(--site-accent) 14%, transparent), transparent 55%), var(--site-surface); }
@container ws-page (max-width: 440px) { .cs .wf-field.wf-w-half { grid-column: 1 / -1; } }
@container ws-page (min-width: 900px) {
  .cs-card { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; padding: var(--b-pad, 30px); }
  .cs-card .ix-title { font-size: calc(1.65rem * var(--b-scale, 1)); }
  .ws-sys-classic .cs-card, .ws-sys-minimal .cs-card { grid-template-columns: 1fr; }
}

/* css/site/blocks/contact_buttons.css */
/* Contact buttons: floating (buttons, rows and grid are the shared collection variants). */
.ws-block-contact-buttons.ws-v-floating { width: 100%; }
.cb-float { display: flex; flex-wrap: wrap-reverse; align-items: center; justify-content: flex-end; gap: 10px; padding-inline-end: env(safe-area-inset-right, 0px); }
.cb-fab { display: inline-flex; align-items: center; gap: 8px; min-width: 52px; height: 52px; padding: 0 14px; justify-content: center; border-radius: 999px;
  background: var(--site-surface); color: var(--site-text); box-shadow: 0 16px 34px -14px color-mix(in oklab, var(--site-ink-dark) 60%, transparent), 0 0 0 1px var(--site-line); }
.cb-fab.is-main { background: var(--site-accent); color: var(--site-accent-text); padding-inline: 16px 20px; box-shadow: 0 18px 36px -14px var(--site-accent); }
.cb-fab-ico { display: grid; place-items: center; }
.cb-fab-ico svg { width: 21px; height: 21px; }
.cb-fab-t { font-weight: 800; font-size: 14.5px; white-space: nowrap; }
.cb-fab:not(.is-main) { padding: 0; width: 52px; }
.ws-mode-canvas .cb-float { justify-content: flex-end; }

/* css/site/blocks/contact_card.css */
/* Save my contact: button (the classic look), card, qr. */
.ws-vc { padding: var(--b-pad, 20px); display: grid; gap: 14px; text-align: start; }
.ws-vc-head { display: flex; align-items: center; gap: 12px; }
.ws-vc-avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-family: var(--site-heading); font-weight: 700; font-size: 1.3rem; background: var(--site-accent); color: var(--site-accent-text); flex: none; }
.ws-vc-head p { margin: 0; }
.ws-vc-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ws-vc-rows li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; min-width: 0; }
.ws-vc-rows li span { overflow-wrap: anywhere; }
.ws-vc-rows svg { color: var(--site-accent); width: 16px; height: 16px; }
.ws-vc-save { width: 100%; }
.ws-vc-qr { width: min(220px, 70%); margin-inline: auto; padding: 12px; border-radius: 16px; background: #FFFFFF; color: #0E1A15; }
.ws-vc-qr svg { width: 100%; height: auto; display: block; }
.ws-vc-qr { text-align: center; }

/* css/site/blocks/contact_form.css */
/* Contact form: card, inline, split (fields from modules/forms). */
.cf { display: grid; gap: 18px; padding: var(--b-pad, 22px); text-align: start; }
.cf-inline { padding: var(--b-pad, 0); }
.cf-copy { display: grid; gap: 6px; align-content: start; }
.cf-title { margin: 0; font-family: var(--site-heading); font-size: calc(1.3rem * var(--b-scale, 1)); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.cf-text { margin: 0; color: var(--site-muted); font-size: 14px; line-height: 1.55; }
.cf-reply { margin: 4px 0 0; display: inline-flex; align-items: center; gap: 7px; width: fit-content; padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: color-mix(in oklab, var(--site-accent) 11%, transparent); color: var(--site-text); }
.cf-reply svg { width: 14px; height: 14px; color: var(--site-accent); }
.cf-badge { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 6px; background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 12px 24px -14px var(--site-accent); }
.cf-badge svg { width: 22px; height: 22px; }
.cf-form { margin: 0; }
.cf-send { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; padding: 0 20px; border: 0; border-radius: var(--site-btn-radius);
  font: inherit; font-weight: 800; cursor: pointer; background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 14px 28px -16px var(--site-accent); transition: transform .18s var(--site-ease), filter .18s; }
.cf-send:hover { transform: translateY(-1px); filter: brightness(1.05); }
.cf-send svg { width: 17px; height: 17px; }
.cf-done { display: grid; justify-items: center; gap: 10px; padding: 18px 8px; text-align: center; }
.cf-done p { margin: 0; font-weight: 600; max-width: 38ch; }
.cf-done-icon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text); animation: cf-pop .5s var(--site-ease) both; }
.cf-done-icon svg { width: 26px; height: 26px; stroke-width: 3; }
@keyframes cf-pop { from { transform: scale(.6); opacity: 0; } }
.cf .wf-grid { gap: 12px; }
@container ws-page (max-width: 440px) { .cf .wf-field.wf-w-half { grid-column: 1 / -1; } }
@container ws-page (min-width: 600px) {
  .cf-split { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 28px; padding: var(--b-pad, 28px); }
  .cf-split .cf-title { font-size: calc(1.6rem * var(--b-scale, 1)); }
}
@media (prefers-reduced-motion: reduce) { .cf-done-icon { animation: none; } .cf-send { transition: none; } }
.cf-split .cf-form .wf-field.wf-w-half { grid-column: 1 / -1; }

/* css/site/blocks/countdown.css */
/* Countdown: card (the classic look), banner, flip, minimal, bar, ring. */
.ws-countdown-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ws-countdown-grid div { display: grid; padding: 10px 4px; border-radius: calc(var(--site-radius) - 4px); background: color-mix(in oklab, var(--site-accent) 12%, transparent); }
.ws-countdown-grid strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ws-countdown-grid span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--site-muted); }
.ws-countdown-ended { margin: 10px 0 0; font-weight: 600; }
.ws-heading-serif .ws-countdown .ws-card-title { font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.ws-cd-banner { display: grid; gap: 10px; align-items: center; padding: var(--b-pad, 14px 18px); text-align: start; }
.ws-cd-banner .ws-countdown-grid { margin: 0; gap: 6px; }
.ws-cd-banner .ws-countdown-grid div { padding: 6px 2px; text-align: center; }
@container ws-page (min-width: 600px) { .ws-cd-banner { grid-template-columns: minmax(0, 1fr) auto; } .ws-cd-banner .ws-countdown-grid { grid-template-columns: repeat(4, 64px); } }
.ws-cd-flip { padding: var(--b-pad, 20px); text-align: center; }
.ws-cd-flip .ws-countdown-grid div { position: relative; padding: 14px 4px 10px; background: color-mix(in oklab, var(--site-text) 90%, var(--site-bg-base)); color: var(--site-bg-base); box-shadow: inset 0 -2px 0 rgb(0 0 0 / .2), var(--site-shadow-sm); }
.ws-cd-flip .ws-countdown-grid div::after { content: ""; position: absolute; inset-inline: 0; top: 50%; height: 1px; background: rgb(0 0 0 / .25); }
.ws-cd-flip .ws-countdown-grid strong { font-size: 1.9rem; }
.ws-cd-flip .ws-countdown-grid span { color: color-mix(in oklab, var(--site-bg-base) 70%, transparent); }
.ws-cd-minimal { text-align: var(--b-align, center); }
.ws-cd-minimal .ws-countdown-grid { gap: 2px; max-width: 360px; margin-inline: auto; }
.ws-cd-minimal .ws-countdown-grid div { background: none; }
.ws-cd-minimal .ws-countdown-grid strong { font-family: var(--site-heading); font-size: 2.2rem; font-weight: 700; letter-spacing: -0.04em; }
.ws-cd-bar { padding: var(--b-pad, 16px 18px); text-align: start; }
.ws-cd-bar .ws-countdown-grid { grid-template-columns: repeat(4, auto); justify-content: start; gap: 14px; margin-top: 6px; }
.ws-cd-bar .ws-countdown-grid div { background: none; padding: 0; display: flex; align-items: baseline; gap: 4px; }
.ws-cd-track { margin-top: 12px; height: 8px; border-radius: 999px; background: color-mix(in oklab, var(--site-text) 10%, transparent); overflow: hidden; }
.ws-cd-track span { display: block; height: 100%; width: var(--p, 50%); border-radius: inherit; background: linear-gradient(90deg, color-mix(in oklab, var(--site-accent) 60%, transparent), var(--site-accent)); }
.ws-cd-ring { padding: var(--b-pad, 20px); text-align: center; }
.ws-cd-ring .ws-countdown-grid div { aspect-ratio: 1; align-content: center; border-radius: 50%; background: conic-gradient(var(--site-accent) var(--turn, 75%), color-mix(in oklab, var(--site-accent) 14%, transparent) 0); position: relative; }
.ws-cd-ring .ws-countdown-grid div::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--site-surface); }
.ws-cd-ring .ws-countdown-grid div > * { position: relative; }
.ws-cd-ring .ws-countdown-grid div:nth-child(2) { --turn: 60%; } .ws-cd-ring .ws-countdown-grid div:nth-child(3) { --turn: 45%; } .ws-cd-ring .ws-countdown-grid div:nth-child(4) { --turn: 30%; }

/* css/site/blocks/coupon.css */
/* Discount code: ticket, card, banner, compact. The code copies with one tap (site.js adds .ws-copied for a moment). */
.cp { position: relative; display: grid; gap: 0; text-align: start; overflow: hidden; }
.cp-main, .cp-side { display: grid; gap: 10px; align-content: start; padding: var(--b-pad, 20px); }
.cp-head { display: grid; gap: 6px; }
.cp-eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--site-accent); }
.cp-eyebrow svg { width: 15px; height: 15px; }
.cp-title { margin: 0; font-family: var(--site-heading); font-size: calc(1.9rem * var(--b-scale, 1)); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; }
.cp-text { margin: 0; color: var(--site-muted); font-size: 14px; line-height: 1.5; }
.cp-state { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--site-muted); }
.cp-label { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--site-muted); }
.cp-code { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; padding: 8px 10px 8px 16px;
  border-radius: calc(var(--site-radius) - 4px); border: 2px dashed color-mix(in oklab, var(--site-accent) 55%, transparent); background: color-mix(in oklab, var(--site-accent) 8%, transparent);
  color: var(--site-text); font: inherit; cursor: pointer; transition: background .18s, border-color .18s; }
.cp-code span { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.15rem; font-weight: 800; letter-spacing: .12em; user-select: all; word-break: break-all; text-align: start; }
.cp-code svg { flex: none; width: 34px; height: 34px; padding: 9px; border-radius: 10px; background: var(--site-accent); color: var(--site-accent-text); }
.cp-code:hover { border-color: var(--site-accent); }
.cp-code:focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 25%, transparent); }
.cp-copied { position: absolute; inset-inline-end: 8px; inset-block-start: 50%; transform: translateY(-50%) scale(.8); opacity: 0; padding: 6px 10px; border-radius: 999px; font-style: normal;
  font-size: 12px; font-weight: 800; background: var(--site-text); color: var(--site-bg-base); pointer-events: none; transition: opacity .18s, transform .18s var(--site-ease); }
.cp-code.ws-copied .cp-copied { opacity: 1; transform: translateY(-50%) scale(1); }
.cp-code.ws-copied { background: color-mix(in oklab, var(--site-accent) 16%, transparent); border-style: solid; }
.cp-use { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: var(--site-btn-radius); text-decoration: none;
  background: var(--site-text); color: var(--site-bg-base); font-weight: 800; transition: transform .18s var(--site-ease); }
.cp-use:hover { transform: translateY(-1px); }
.cp-use svg { width: 16px; height: 16px; }
.cp-facts { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; font-weight: 700; color: var(--site-muted); }
.cp-facts li { display: inline-flex; align-items: center; gap: 5px; }
.cp-facts svg { width: 14px; height: 14px; }
.cp-facts .is-urgent { color: var(--site-accent); }
.cp-terms { margin: 0; font-size: 11.5px; color: var(--site-muted); }
/* Ticket: two halves, each punched where they meet (a mask per half, so any page background shows through), joined by a
   perforated edge. Stacked on phones; side by side on wider pages. */
.cp-ticket { --cp-n: 12px; border-radius: var(--site-radius); box-shadow: var(--b-shadow, var(--site-shadow-md)); color: var(--b-fg, var(--site-text)); }
.cp-ticket .cp-main { background: linear-gradient(150deg, color-mix(in oklab, var(--site-accent) 92%, var(--site-surface)), color-mix(in oklab, var(--site-accent) 62%, var(--site-ink-dark)));
  color: var(--site-accent-text); padding-bottom: 22px;
  -webkit-mask: radial-gradient(circle var(--cp-n) at 0 100%, transparent 98%, var(--site-text) 100%) 0 0 / 51% 100% no-repeat, radial-gradient(circle var(--cp-n) at 100% 100%, transparent 98%, var(--site-text) 100%) 100% 0 / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--cp-n) at 0 100%, transparent 98%, var(--site-text) 100%) 0 0 / 51% 100% no-repeat, radial-gradient(circle var(--cp-n) at 100% 100%, transparent 98%, var(--site-text) 100%) 100% 0 / 51% 100% no-repeat; }
.cp-ticket .cp-eyebrow, .cp-ticket .cp-text, .cp-ticket .cp-state { color: color-mix(in oklab, var(--site-accent-text) 82%, transparent); }
.cp-ticket .cp-side { background: var(--b-bg, var(--site-surface)); border-top: 2px dashed color-mix(in oklab, var(--site-text) 16%, transparent); padding-top: 22px;
  -webkit-mask: radial-gradient(circle var(--cp-n) at 0 0, transparent 98%, var(--site-text) 100%) 0 0 / 51% 100% no-repeat, radial-gradient(circle var(--cp-n) at 100% 0, transparent 98%, var(--site-text) 100%) 100% 0 / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--cp-n) at 0 0, transparent 98%, var(--site-text) 100%) 0 0 / 51% 100% no-repeat, radial-gradient(circle var(--cp-n) at 100% 0, transparent 98%, var(--site-text) 100%) 100% 0 / 51% 100% no-repeat; }
@container ws-page (min-width: 600px) {
  .cp-ticket, .cp-card { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .cp-ticket .cp-main { align-content: center; padding-bottom: var(--b-pad, 20px);
    -webkit-mask: radial-gradient(circle var(--cp-n) at 100% 0, transparent 98%, var(--site-text) 100%) 0 0 / 100% 51% no-repeat, radial-gradient(circle var(--cp-n) at 100% 100%, transparent 98%, var(--site-text) 100%) 0 100% / 100% 51% no-repeat;
    mask: radial-gradient(circle var(--cp-n) at 100% 0, transparent 98%, var(--site-text) 100%) 0 0 / 100% 51% no-repeat, radial-gradient(circle var(--cp-n) at 100% 100%, transparent 98%, var(--site-text) 100%) 0 100% / 100% 51% no-repeat; }
  .cp-ticket .cp-side { border-top: 0; border-inline-start: 2px dashed color-mix(in oklab, var(--site-text) 16%, transparent); padding-top: var(--b-pad, 20px); align-content: center;
    -webkit-mask: radial-gradient(circle var(--cp-n) at 0 0, transparent 98%, var(--site-text) 100%) 0 0 / 100% 51% no-repeat, radial-gradient(circle var(--cp-n) at 0 100%, transparent 98%, var(--site-text) 100%) 0 100% / 100% 51% no-repeat;
    mask: radial-gradient(circle var(--cp-n) at 0 0, transparent 98%, var(--site-text) 100%) 0 0 / 100% 51% no-repeat, radial-gradient(circle var(--cp-n) at 0 100%, transparent 98%, var(--site-text) 100%) 0 100% / 100% 51% no-repeat; }
  [dir="rtl"] .cp-ticket .cp-main { -webkit-mask: radial-gradient(circle var(--cp-n) at 0 0, transparent 98%, var(--site-text) 100%) 0 0 / 100% 51% no-repeat, radial-gradient(circle var(--cp-n) at 0 100%, transparent 98%, var(--site-text) 100%) 0 100% / 100% 51% no-repeat;
    mask: radial-gradient(circle var(--cp-n) at 0 0, transparent 98%, var(--site-text) 100%) 0 0 / 100% 51% no-repeat, radial-gradient(circle var(--cp-n) at 0 100%, transparent 98%, var(--site-text) 100%) 0 100% / 100% 51% no-repeat; }
  [dir="rtl"] .cp-ticket .cp-side { -webkit-mask: radial-gradient(circle var(--cp-n) at 100% 0, transparent 98%, var(--site-text) 100%) 0 0 / 100% 51% no-repeat, radial-gradient(circle var(--cp-n) at 100% 100%, transparent 98%, var(--site-text) 100%) 0 100% / 100% 51% no-repeat;
    mask: radial-gradient(circle var(--cp-n) at 100% 0, transparent 98%, var(--site-text) 100%) 0 0 / 100% 51% no-repeat, radial-gradient(circle var(--cp-n) at 100% 100%, transparent 98%, var(--site-text) 100%) 0 100% / 100% 51% no-repeat; }
  .ws-sys-classic .cp-ticket, .ws-sys-minimal .cp-ticket { grid-template-columns: 1fr; }
  .ws-sys-classic .cp-ticket .cp-main, .ws-sys-minimal .cp-ticket .cp-main { padding-bottom: 22px;
    -webkit-mask: radial-gradient(circle var(--cp-n) at 0 100%, transparent 98%, var(--site-text) 100%) 0 0 / 51% 100% no-repeat, radial-gradient(circle var(--cp-n) at 100% 100%, transparent 98%, var(--site-text) 100%) 100% 0 / 51% 100% no-repeat;
    mask: radial-gradient(circle var(--cp-n) at 0 100%, transparent 98%, var(--site-text) 100%) 0 0 / 51% 100% no-repeat, radial-gradient(circle var(--cp-n) at 100% 100%, transparent 98%, var(--site-text) 100%) 100% 0 / 51% 100% no-repeat; }
  .ws-sys-classic .cp-ticket .cp-side, .ws-sys-minimal .cp-ticket .cp-side { border-inline-start: 0; border-top: 2px dashed color-mix(in oklab, var(--site-text) 16%, transparent);
    -webkit-mask: radial-gradient(circle var(--cp-n) at 0 0, transparent 98%, var(--site-text) 100%) 0 0 / 51% 100% no-repeat, radial-gradient(circle var(--cp-n) at 100% 0, transparent 98%, var(--site-text) 100%) 100% 0 / 51% 100% no-repeat;
    mask: radial-gradient(circle var(--cp-n) at 0 0, transparent 98%, var(--site-text) 100%) 0 0 / 51% 100% no-repeat, radial-gradient(circle var(--cp-n) at 100% 0, transparent 98%, var(--site-text) 100%) 100% 0 / 51% 100% no-repeat; }
}
/* Card: a plain surface with the code beside the words on wider pages. */
.cp-card .cp-side { padding-top: 0; }
@container ws-page (min-width: 600px) { .cp-card .cp-side { padding-top: var(--b-pad, 20px); align-content: center; } }
/* Banner: an accent strip. */
.cp-banner { --b-bg: radial-gradient(110% 140% at 100% 0%, color-mix(in oklab, var(--site-accent-text) 22%, transparent), transparent 55%), linear-gradient(140deg, color-mix(in oklab, var(--site-accent) 95%, var(--site-surface)), color-mix(in oklab, var(--site-accent) 60%, var(--site-ink-dark)));
  --b-fg: var(--site-accent-text); --b-border: 0 solid transparent; }
.cp-banner .cp-eyebrow, .cp-banner .cp-text, .cp-banner .cp-label, .cp-banner .cp-facts, .cp-banner .cp-terms { color: color-mix(in oklab, var(--site-accent-text) 82%, transparent); }
.cp-banner .cp-code { border-color: color-mix(in oklab, var(--site-accent-text) 55%, transparent); background: color-mix(in oklab, var(--site-accent-text) 12%, transparent); color: var(--site-accent-text); }
.cp-banner .cp-code svg { background: var(--site-accent-text); color: var(--site-accent); }
.cp-banner .cp-use { background: var(--site-accent-text); color: var(--site-accent); }
.cp-banner .cp-side { padding-top: 0; }
@container ws-page (min-width: 600px) { .cp-banner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; } .cp-banner .cp-side { padding-top: var(--b-pad, 20px); } }
/* Compact: one row. */
.cp-compact { display: flex; align-items: center; gap: 12px; padding: var(--b-pad, 10px 12px); }
.cp-ico { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in oklab, var(--site-accent) 14%, transparent); color: var(--site-accent); }
.cp-ico svg { width: 20px; height: 20px; }
.cp-compact-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cp-compact-t b { font-weight: 800; line-height: 1.2; }
.cp-compact-t small { font-size: 12px; color: var(--site-muted); font-weight: 600; }
.cp-compact-t .is-urgent { color: var(--site-accent); }
.cp-compact .cp-code { width: auto; min-height: 44px; padding: 4px 6px 4px 12px; }
.cp-compact .cp-code span { font-size: .95rem; letter-spacing: .08em; }
.cp-compact .cp-code svg { width: 30px; height: 30px; padding: 8px; }
@media (prefers-reduced-motion: reduce) { .cp-copied, .cp-use, .cp-code { transition: none; } }
.ws-site a.cp-use { color: var(--site-bg-base); }
.ws-site .cp-banner a.cp-use { color: var(--site-accent); }

/* css/site/blocks/cta.css */
/* Call to action: hero, split, card, banner, minimal, gradient, glass, premium. */
.ws-ctab { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 20px; padding: var(--b-pad, 28px 22px); text-align: center;
  border-radius: var(--b-radius, calc(var(--site-radius) + 10px)); color: var(--b-fg, var(--site-text)); }
.ws-ctab-body { position: relative; display: grid; justify-items: center; gap: 10px; min-width: 0; }
.ws-site .ws-ctab-eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: color-mix(in oklab, var(--site-accent) 14%, transparent); color: var(--site-accent); }
.ws-ctab-h { margin: 0; max-width: 22ch; font-family: var(--site-heading); font-size: calc(1.62rem * var(--b-scale, 1)); font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; text-wrap: balance; overflow-wrap: anywhere; }
.ws-site .ws-ctab-text { margin: 0; max-width: 46ch; color: var(--site-muted); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.ws-ctab-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; margin-top: 8px; }
.ws-ctab-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: var(--site-btn-radius); font-weight: 750; font-size: 15px; letter-spacing: -0.01em; text-align: center;
  transition: transform .18s var(--site-ease), box-shadow .18s, background .18s, border-color .18s; }
.ws-ctab-btn svg { width: 17px; height: 17px; transition: translate .18s var(--site-ease); }
.ws-ctab-btn:hover { transform: translateY(-2px); }
.ws-ctab-btn:hover svg { translate: calc(3px * var(--dir-sign, 1)) 0; }
.ws-ctab-btn.is-primary { background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 14px 30px -16px var(--site-accent); }
.ws-ctab-btn.is-primary:hover { box-shadow: 0 18px 36px -14px var(--site-accent); }
.ws-ctab-btn.is-secondary { background: color-mix(in oklab, currentColor 6%, transparent); color: inherit; border: 1.5px solid color-mix(in oklab, currentColor 18%, transparent); }
.ws-ctab-btn.is-secondary svg { display: none; }
.ws-site .ws-ctab-note { margin: 2px 0 0; display: inline-flex; align-items: center; gap: 6px; color: var(--site-muted); font-size: 12.5px; font-weight: 600; }
.ws-ctab-note svg { width: 14px; height: 14px; color: var(--site-accent); }
.ws-ctab-media { display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: calc(var(--site-radius) + 4px); box-shadow: var(--site-shadow-md); }
.ws-ctab-media .ws-media { width: 100%; height: 100%; object-fit: var(--b-fit, cover); }
.ws-ctab-bg { position: absolute; inset: 0; z-index: -2; }
.ws-ctab-bg .ws-media { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--site-ease); }
.ws-ctab:hover .ws-ctab-bg .ws-media { transform: scale(1.03); }
.ws-ctab-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(0 0 0 / .08) 0%, rgb(0 0 0 / .35) 45%, rgb(0 0 0 / .78) 100%); }
.ws-ctab-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
@container ws-page (max-width: 440px) { .ws-ctab-actions > * { flex: 1 1 100%; } }
@container ws-page (min-width: 600px) { .ws-ctab { padding: var(--b-pad, 38px 34px); } .ws-ctab-h { font-size: calc(2rem * var(--b-scale, 1)); } }
.ws-s-align-start .ws-ctab { text-align: start; } .ws-s-align-start .ws-ctab-body { justify-items: start; } .ws-s-align-start .ws-ctab-actions { justify-content: flex-start; }

/* Hero: a soft accent glow on the surface, a large headline, media beneath. */
.ws-ctab-hero { padding-block: var(--b-pad, 40px 30px); border: var(--b-border, 1px solid var(--site-line)); box-shadow: var(--b-shadow, var(--site-shadow-md));
  background: var(--b-bg, radial-gradient(90% 70% at 50% -10%, color-mix(in oklab, var(--site-accent) 22%, transparent), transparent 70%), var(--site-surface)); }
.ws-ctab-hero .ws-ctab-h { font-size: calc(1.9rem * var(--b-scale, 1)); }
@container ws-page (min-width: 600px) { .ws-ctab-hero .ws-ctab-h { font-size: calc(2.5rem * var(--b-scale, 1)); } .ws-ctab-hero { padding-block: var(--b-pad, 56px 40px); } }
@container ws-page (min-width: 1024px) { .ws-ctab-hero .ws-ctab-h { font-size: calc(2.9rem * var(--b-scale, 1)); } }

/* Split: media beside the words (stacked on phones, media first). */
.ws-ctab-split { text-align: start; background: var(--b-bg, var(--site-surface)); border: var(--b-border, 1px solid var(--site-line)); box-shadow: var(--b-shadow, var(--site-shadow-md)); }
.ws-ctab-split .ws-ctab-body { justify-items: start; }
.ws-ctab-split .ws-ctab-actions { justify-content: flex-start; }
.ws-ctab-split.has-media { padding: var(--b-pad, 14px); gap: 18px; }
.ws-ctab-split.has-media .ws-ctab-body { padding: 4px 8px 12px; }
.ws-ctab-split.has-media:not(.is-media-start) .ws-ctab-media { order: -1; }
.ws-ctab-split .ws-ctab-media { aspect-ratio: 4 / 3; }
@container ws-page (min-width: 600px) {
  .ws-ctab-split.has-media { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: 26px; }
  .ws-ctab-split.has-media:not(.is-media-start) .ws-ctab-media { order: 0; }
  .ws-ctab-split.has-media .ws-ctab-body { padding: 18px 8px 18px 18px; }
  .ws-ctab-split .ws-ctab-media { aspect-ratio: 1; height: 100%; }
  .ws-ctab-split .ws-ctab-actions > * { flex: 0 1 auto; }
}

/* Card: media on top of a card, words left-aligned below. */
.ws-ctab-card { text-align: start; background: var(--b-bg, var(--site-surface)); border: var(--b-border, 1px solid var(--site-line)); box-shadow: var(--b-shadow, var(--site-shadow-md)); }
.ws-ctab-card .ws-ctab-body { justify-items: start; }
.ws-ctab-card .ws-ctab-actions { justify-content: flex-start; }
.ws-ctab-card.has-media { padding: 0; gap: 0; }
.ws-ctab-card.has-media .ws-ctab-media { border-radius: 0; box-shadow: none; aspect-ratio: 16 / 9; }
.ws-ctab-card.has-media .ws-ctab-body { padding: var(--b-pad, 22px 22px 24px); }
.ws-ctab-card .ws-ctab-h { font-size: calc(1.4rem * var(--b-scale, 1)); }

/* Banner: the words over the image (or over a deep accent wash), anchored to the bottom. */
.ws-ctab-banner { min-height: 280px; align-content: end; text-align: start; color: var(--site-on-media); --site-muted: color-mix(in oklab, var(--site-on-media) 80%, transparent);
  box-shadow: var(--b-shadow, var(--site-shadow-lg)); background: color-mix(in oklab, var(--site-accent) 70%, var(--site-ink-dark)); }
.ws-ctab-banner .ws-ctab-body { justify-items: start; }
.ws-ctab-banner .ws-ctab-actions { justify-content: flex-start; }
.ws-ctab-banner .ws-ctab-eyebrow, .ws-ctab-gradient .ws-ctab-eyebrow { background: color-mix(in oklab, var(--site-on-media) 18%, transparent); color: var(--site-on-media); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ws-ctab-banner .ws-ctab-note svg, .ws-ctab-gradient .ws-ctab-note svg { color: currentColor; }
.ws-ctab-banner.no-media .ws-ctab-glow { background: radial-gradient(70% 90% at 100% 0%, color-mix(in oklab, var(--site-accent) 80%, var(--site-on-media)) 0%, transparent 60%),
  radial-gradient(60% 80% at 0% 100%, color-mix(in oklab, var(--site-accent) 60%, var(--site-ink-dark)), transparent 70%); }
@container ws-page (min-width: 600px) { .ws-ctab-banner { min-height: 340px; } }

/* Minimal: no surface, just the words and arrow links between two hairlines. */
.ws-ctab-minimal { padding: var(--b-pad, 30px 4px); border-radius: 0; border-block: 1px solid color-mix(in oklab, currentColor 14%, transparent); gap: 8px; }
.ws-ctab-minimal .ws-ctab-eyebrow { background: none; padding: 0; }
.ws-ctab-minimal .ws-ctab-actions { gap: 4px 18px; margin-top: 4px; }
.ws-ctab-minimal .ws-ctab-btn { min-height: 44px; padding: 0 2px; border: 0; border-radius: 0; background: none; box-shadow: none; flex: 0 0 auto; }
.ws-ctab-minimal .ws-ctab-btn span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .25s var(--site-ease); padding-bottom: 2px; }
.ws-ctab-minimal .ws-ctab-btn:hover { transform: none; }
.ws-ctab-minimal .ws-ctab-btn:hover span { background-size: 100% 1.5px; }
.ws-ctab-minimal .ws-ctab-btn.is-primary { color: var(--site-accent); }
.ws-ctab-minimal .ws-ctab-btn.is-secondary { color: inherit; opacity: .78; }
.ws-ctab-minimal .ws-ctab-btn.is-secondary svg { display: inline; }

/* Gradient: a vivid accent mesh with light text and a light main button. */
.ws-ctab-gradient { color: var(--site-on-media); --site-muted: color-mix(in oklab, var(--site-on-media) 82%, transparent); box-shadow: var(--b-shadow, 0 24px 50px -26px var(--site-accent));
  background: var(--b-bg, linear-gradient(135deg, color-mix(in oklab, var(--site-accent) 92%, var(--site-on-media)) 0%, var(--site-accent) 45%, color-mix(in oklab, var(--site-accent) 55%, var(--site-ink-dark)) 100%)); }
.ws-ctab-gradient .ws-ctab-glow { background: radial-gradient(45% 60% at 85% 10%, rgb(255 255 255 / .35), transparent 70%), radial-gradient(50% 60% at 10% 100%, color-mix(in oklab, var(--site-accent) 40%, var(--site-ink-dark)), transparent 70%); }
.ws-ctab-gradient .ws-ctab-btn.is-primary, .ws-ctab-banner .ws-ctab-btn.is-primary { background: var(--site-on-media); color: color-mix(in oklab, var(--site-accent) 45%, var(--site-ink-dark)); box-shadow: 0 14px 30px -16px rgb(0 0 0 / .5); }
.ws-ctab-gradient .ws-ctab-btn.is-secondary, .ws-ctab-banner .ws-ctab-btn.is-secondary { background: color-mix(in oklab, var(--site-on-media) 14%, transparent); border-color: color-mix(in oklab, var(--site-on-media) 40%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Glass: frosted glass over soft colour (or over the image). */
.ws-ctab-glass { padding: var(--b-pad, 18px); background: color-mix(in oklab, var(--site-accent) 10%, var(--site-surface)); box-shadow: var(--b-shadow, var(--site-shadow-md)); }
.ws-ctab-glass .ws-ctab-glow { background: radial-gradient(45% 60% at 15% 12%, var(--site-accent), transparent 70%),
  radial-gradient(42% 55% at 90% 28%, color-mix(in oklab, var(--site-accent) 60%, #7C5CFF), transparent 70%),
  radial-gradient(50% 60% at 55% 105%, color-mix(in oklab, var(--site-accent) 70%, var(--site-ink-dark)), transparent 72%); filter: saturate(1.3); }
.ws-ctab-glass .ws-ctab-body { padding: 26px 20px; border-radius: calc(var(--site-radius) + 6px); background: color-mix(in oklab, var(--site-surface) 56%, transparent);
  border: 1px solid color-mix(in oklab, var(--site-on-media) 50%, transparent); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--site-on-media) 50%, transparent), 0 20px 40px -24px rgb(0 0 0 / .45);
  backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); }
.ws-ctab-glass.has-media { min-height: 300px; align-content: end; }
@container ws-page (min-width: 600px) { .ws-ctab-glass { padding: var(--b-pad, 34px); } .ws-ctab-glass .ws-ctab-body { padding: 34px 30px; } }

/* Premium: an ink card with an accent glow, gradient headline and a fine gradient border. */
.ws-ctab-premium { color: var(--site-ink-light); --site-muted: color-mix(in oklab, var(--site-ink-light) 68%, transparent); box-shadow: var(--b-shadow, 0 30px 60px -30px rgb(0 0 0 / .7));
  background: var(--b-bg, radial-gradient(100% 70% at 50% -10%, color-mix(in oklab, var(--site-accent) 38%, transparent), transparent 62%), linear-gradient(180deg, color-mix(in oklab, var(--site-ink-dark) 88%, var(--site-accent)), var(--site-ink-dark))); }
.ws-ctab-premium::before { content: ""; position: absolute; inset: 0; z-index: 0; padding: 1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(160deg, color-mix(in oklab, var(--site-accent) 80%, var(--site-ink-light)), transparent 35%, transparent 65%, color-mix(in oklab, var(--site-accent) 50%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.ws-ctab-premium .ws-ctab-glow { background: radial-gradient(30% 40% at 50% 0%, color-mix(in oklab, var(--site-accent) 55%, transparent), transparent 70%); filter: blur(10px); }
.ws-ctab-premium .ws-ctab-eyebrow { background: color-mix(in oklab, var(--site-accent) 22%, transparent); color: color-mix(in oklab, var(--site-accent) 60%, var(--site-ink-light)); border: 1px solid color-mix(in oklab, var(--site-accent) 40%, transparent); }
.ws-ctab-premium .ws-ctab-h { background: linear-gradient(180deg, var(--site-ink-light) 30%, color-mix(in oklab, var(--site-ink-light) 55%, var(--site-accent))); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.ws-ctab-premium .ws-ctab-btn.is-primary { box-shadow: 0 0 0 1px color-mix(in oklab, var(--site-accent) 60%, var(--site-ink-light)), 0 16px 40px -12px var(--site-accent); }
.ws-ctab-premium .ws-ctab-btn.is-secondary { background: color-mix(in oklab, var(--site-ink-light) 7%, transparent); border-color: color-mix(in oklab, var(--site-ink-light) 18%, transparent); }
.ws-ctab-premium .ws-ctab-media { border: 1px solid color-mix(in oklab, var(--site-ink-light) 12%, transparent); box-shadow: 0 20px 40px -20px rgb(0 0 0 / .8); }
@container ws-page (min-width: 600px) { .ws-ctab-premium { padding: var(--b-pad, 48px 40px); } .ws-ctab-premium .ws-ctab-h { font-size: calc(2.2rem * var(--b-scale, 1)); } }

/* css/site/blocks/currency_switch.css */
/* Currency switcher (B4): pills (radio chips) and menu (a native select). Shown only with site-utility.js. */
html:not(.ws-js) .ws-mode-public .ws-block-currency-switch { display: none; }
.ws-ccy { display: grid; gap: 8px; justify-items: center; text-align: center; }
.ws-ccy-set { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 10px; justify-items: center; }
.ws-ccy-label { display: inline-flex; align-items: center; gap: 7px; padding: 0; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--site-muted); }
.ws-site .ws-ccy-label svg { width: 16px; height: 16px; }
.ws-ccy-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 5px; border-radius: 999px; max-width: 100%;
  background: color-mix(in oklab, var(--site-text) 6%, var(--b-bg, var(--site-surface))); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--site-text) 8%, transparent); }
.ws-ccy-pill { position: relative; display: inline-grid; }
.ws-ccy-pill input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.ws-ccy-pill span { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 56px; justify-content: center; padding: 0 16px; border-radius: 999px;
  font-size: 14px; font-weight: 700; color: var(--site-text); transition: background .2s ease, color .2s ease, box-shadow .2s ease; }
.ws-ccy-pill b { font-weight: 800; opacity: .55; }
.ws-ccy-pill input:checked + span { background: var(--site-surface); box-shadow: 0 6px 16px -10px rgb(0 0 0 / .45), 0 0 0 1px color-mix(in oklab, var(--site-text) 8%, transparent); color: var(--site-text); }
.ws-ccy-pill input:checked + span b { opacity: 1; color: var(--site-accent); }
.ws-ccy-pill input:focus-visible + span { outline: 3px solid color-mix(in oklab, var(--site-accent) 55%, transparent); outline-offset: 2px; }
.ws-ccy-menu { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px 12px; }
.ws-ccy-select { position: relative; display: inline-flex; align-items: center; }
.ws-ccy-select select { appearance: none; min-height: 46px; padding: 0 40px 0 16px; border-radius: 999px; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
  color: var(--site-text); background: var(--b-bg, var(--site-surface)); border: 1px solid color-mix(in oklab, var(--site-text) 14%, transparent); box-shadow: var(--site-shadow-sm); }
.ws-ccy-select select:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 55%, transparent); outline-offset: 2px; }
.ws-ccy-select svg { position: absolute; inset-inline-end: 14px; width: 16px; height: 16px; pointer-events: none; color: var(--site-muted); }
.ws-ccy-note { margin: 0; font-size: 12px; color: var(--site-muted); }
/* Product items in another currency, hidden by the switcher. */
.ws-ccy-off { display: none !important; }

/* css/site/blocks/curriculum.css */
/* Curriculum preview (B3 · M3): accordion, list, timeline. */
.ws-cur { display: grid; gap: 10px; min-width: 0; text-align: start; }
.ws-cur-top { display: flex; align-items: center; gap: 12px; padding: 4px 2px 6px; min-width: 0; }
.ws-cur-ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 14px; background: color-mix(in oklab, var(--site-accent) 14%, transparent); color: var(--site-accent); }
.ws-site .ws-cur-ico svg { width: 22px; height: 22px; }
.ws-cur-head { display: grid; gap: 2px; min-width: 0; }
.ws-cur-head b { font-family: var(--site-heading); font-size: calc(1.08rem * var(--b-scale, 1)); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.ws-cur-head small { font-size: 13px; color: var(--site-muted); }
.ws-cur-mods { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ws-cur-mod { border-radius: var(--b-radius, calc(var(--site-radius) + 4px)); overflow: hidden; }
.ws-cur-sum { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 16px; list-style: none; cursor: default; }
details > .ws-cur-sum { cursor: pointer; }
.ws-cur-sum::-webkit-details-marker { display: none; }
details > .ws-cur-sum:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 60%, transparent); outline-offset: -3px; border-radius: inherit; }
.ws-cur-n { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--site-accent); color: var(--site-accent-text); }
.ws-cur-mt { flex: 1; display: grid; gap: 1px; min-width: 0; }
.ws-cur-mt b { font-weight: 700; font-size: 15.5px; line-height: 1.3; }
.ws-cur-mt small { font-size: 12.5px; color: var(--site-muted); }
.ws-cur-chev { display: grid; color: var(--site-muted); transition: transform .25s var(--site-ease); }
.ws-site .ws-cur-chev svg { width: 18px; height: 18px; }
details[open] > .ws-cur-sum .ws-cur-chev { transform: rotate(180deg); }
.ws-cur-ls { list-style: none; margin: 0; padding: 0 12px 10px; display: grid; }
.ws-cur-l { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 4px; border-top: 1px solid var(--site-line); font-size: 14.5px; }
.ws-cur-li { display: grid; color: var(--site-muted); flex: none; }
.ws-site .ws-cur-li svg { width: 17px; height: 17px; }
.ws-cur-l.is-free .ws-cur-li { color: var(--site-accent); }
.ws-cur-lt { flex: 1; min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.ws-cur-kind { margin-inline-start: 6px; padding: 1px 7px; border-radius: 99px; font-style: normal; font-size: 11px; font-weight: 700; background: color-mix(in oklab, var(--site-text) 8%, transparent); color: var(--site-muted); white-space: nowrap; }
.ws-cur-min { flex: none; font-size: 12.5px; color: var(--site-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ws-site .ws-cur-free { flex: none; display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; font-weight: 800;
  background: color-mix(in oklab, var(--site-accent) 14%, transparent); color: var(--site-accent); }
.ws-site .ws-cur-free svg { width: 14px; height: 14px; }
.ws-cur-lock { flex: none; display: grid; width: 32px; justify-items: center; color: color-mix(in oklab, var(--site-muted) 80%, transparent); }
.ws-site .ws-cur-lock svg { width: 15px; height: 15px; }
.ws-cur-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 12px 18px; border-radius: var(--b-radius, calc(var(--site-radius) + 4px));
  background: color-mix(in oklab, var(--site-accent) 10%, var(--site-surface)); border: 1px solid color-mix(in oklab, var(--site-accent) 22%, transparent); }
.ws-cur-price { font-family: var(--site-heading); font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.ws-site .ws-cur-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: var(--site-btn-radius); margin-inline-start: auto;
  background: var(--site-btn-bg, var(--site-accent)); color: var(--site-btn-text, var(--site-accent-text)); font-weight: 800; font-size: 15px; border: 0; cursor: pointer; font-family: inherit; }
.ws-cur-cta svg { width: 16px; height: 16px; }

/* List: one surface, every module open, hairlines between. */
.ws-cur-list .ws-cur-mods { gap: 0; }
.ws-cur-list .ws-cur-mod { border-radius: 0; box-shadow: none; background: none; border: 0; }
.ws-cur-list .ws-cur-mods { border-radius: var(--b-radius, calc(var(--site-radius) + 4px)); overflow: hidden; background: var(--site-surface); border: 1px solid var(--site-line); }
.ws-cur-list .ws-cur-mod + .ws-cur-mod { border-top: 1px solid var(--site-line); }
.ws-cur-list .ws-cur-n { background: color-mix(in oklab, var(--site-accent) 14%, transparent); color: var(--site-accent); }

/* Timeline: modules as steps on a line. */
.ws-cur-timeline .ws-cur-mods { position: relative; gap: 14px; padding-inline-start: 22px; }
.ws-cur-timeline .ws-cur-mods::before { content: ""; position: absolute; inset-block: 18px; inset-inline-start: 14px; width: 2px; background: linear-gradient(var(--site-accent), color-mix(in oklab, var(--site-accent) 15%, transparent)); border-radius: 2px; }
.ws-cur-timeline .ws-cur-mod { overflow: visible; position: relative; }
.ws-cur-timeline .ws-cur-n { position: absolute; inset-inline-start: -23px; top: 13px; box-shadow: 0 0 0 4px var(--site-bg-base); }
.ws-cur-timeline .ws-cur-sum { padding-inline-start: 22px; }
@media (prefers-reduced-motion: reduce) { .ws-cur-chev { transition: none; } }

/* css/site/blocks/custom_html.css */
/* Custom code (B4 · Q4): a fixed-height sandboxed frame; in the builder, a placeholder that never runs the code. */
.chx { margin: 0; overflow: hidden; border-radius: var(--site-radius); }
.chx-frame { display: block; width: 100%; height: var(--chx-h, 320px); border: 0; background: transparent; }
.chx-ph { position: relative; height: var(--chx-h, 320px); max-height: 420px; min-height: 120px; display: grid; place-content: center; justify-items: center; gap: 6px;
  padding: 20px; text-align: center; overflow: hidden;
  background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--site-text) 4%, transparent) 0 10px, transparent 10px 20px); }
.chx-ph b { font-family: var(--site-heading); font-size: 1.05rem; }
.chx-ph small { color: var(--site-muted); font-size: 12.5px; }
.chx-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text); }
.chx-ico svg { width: 22px; height: 22px; }
.chx-off { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700;
  background: color-mix(in oklab, var(--site-text) 9%, transparent); }
.chx-off svg { width: 13px; height: 13px; }
.chx-lines { position: absolute; inset-inline: 22px; inset-block-end: 16px; display: grid; gap: 6px; opacity: .5; }
.chx-lines i { display: block; height: 6px; border-radius: 3px; background: color-mix(in oklab, var(--site-text) 12%, transparent); }
.chx-lines i:nth-child(2) { width: 70%; } .chx-lines i:nth-child(3) { width: 45%; }

/* css/site/blocks/divider.css */
/* Divider: line, dots, space (the classic three), wave, gradient, ornament. */
.ws-divider { display: flex; justify-content: center; align-items: center; padding: 6px 0; color: color-mix(in oklab, var(--site-text) 22%, transparent); }
.ws-divider-line span { display: block; width: 100%; height: 1px; background: color-mix(in oklab, var(--site-text) 14%, transparent); }
.ws-divider-dots span { display: block; width: 40px; height: 6px; background: radial-gradient(circle, color-mix(in oklab, var(--site-text) 35%, transparent) 2px, transparent 2.5px) 0 0 / 13px 6px repeat-x; }
.ws-divider-space span { height: 12px; }
.ws-divider-wave svg { width: 120px; height: 12px; color: color-mix(in oklab, var(--site-accent) 70%, transparent); }
.ws-divider-gradient span { display: block; width: 100%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--site-accent), transparent); }
.ws-divider-ornament { gap: 14px; color: var(--site-accent); }
.ws-orn-line { flex: 1; max-width: 120px; height: 1px; background: color-mix(in oklab, var(--site-text) 18%, transparent); }
.ws-orn { font-size: 14px; line-height: 1; }

/* css/site/blocks/donate.css */
/* Donate: card, amounts, featured, compact, button (shared parts in modules/donations). */
.sp-dv-card.has-media .sp-body { padding-top: 18px; }
.sp-dv-amounts .sp-body { gap: 16px; }
.sp-dv-amounts .sp-title { font-size: calc(1.22rem * var(--b-scale, 1)); }
.sp-dv-featured .sp-hero { position: relative; min-height: 240px; display: flex; align-items: flex-end; isolation: isolate; color: var(--site-on-media);
  background: radial-gradient(80% 90% at 100% 0%, color-mix(in oklab, var(--site-surface) 30%, transparent), transparent 60%), linear-gradient(150deg, color-mix(in oklab, var(--site-accent) 90%, var(--site-surface)), color-mix(in oklab, var(--site-accent) 55%, var(--site-ink-dark))); }
.sp-dv-featured .sp-hero-img { position: absolute; inset: 0; z-index: -2; }
.sp-dv-featured.has-media .sp-hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 25%, color-mix(in oklab, var(--site-ink-dark) 78%, transparent)); }
.sp-hero-text { display: grid; gap: 10px; padding: 22px var(--b-pad, 22px) 20px; }
.sp-dv-featured .sp-title { font-size: calc(1.7rem * var(--b-scale, 1)); color: var(--site-on-media); text-wrap: balance; }
.sp-tag { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .02em;
  background: color-mix(in oklab, var(--site-ink-dark) 35%, transparent); color: var(--site-on-media); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sp-tag svg { width: 14px; height: 14px; }
@container ws-page (min-width: 600px) { .sp-dv-featured .sp-hero { min-height: 300px; } .sp-dv-featured .sp-title { font-size: calc(2rem * var(--b-scale, 1)); } }

/* css/site/blocks/donor_wall.css */
/* Supporters wall (B3 · U3): wall, list, marquee, grid. Avatars are initials on accent-derived tints (no photos). */
.dw { display: flex; flex-direction: column; gap: 14px; }
.dw-head { display: grid; justify-items: center; gap: 6px; text-align: center; }
.dw-heart { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: color-mix(in oklab, var(--site-accent) 14%, transparent); color: var(--site-accent); }
.dw-heart svg { width: 22px; height: 22px; }
.dw-title { margin: 0; font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.025em; font-weight: 700; font-family: var(--site-heading, inherit); }
.dw-intro { margin: 0; color: var(--site-muted); font-size: 14.5px; max-width: 46ch; }
.dw-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dw-item { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: var(--b-radius, var(--site-radius)); min-width: 0; text-align: start; }
.dw-av { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex: none; font-size: 13.5px; font-weight: 800; color: var(--site-accent-text); background: var(--site-accent); }
.dw-h1 { background: color-mix(in oklab, var(--site-accent) 70%, var(--site-text)); }
.dw-h2 { background: color-mix(in oklab, var(--site-accent) 55%, var(--site-bg-base, var(--site-bg))); color: var(--site-text); }
.dw-h3 { background: color-mix(in oklab, var(--site-accent) 82%, var(--site-star, hsl(42 96% 52%))); }
.dw-h4 { background: color-mix(in oklab, var(--site-text) 80%, var(--site-accent)); color: var(--site-bg-base, var(--site-bg)); }
.dw-h5 { background: color-mix(in oklab, var(--site-accent) 35%, var(--site-surface)); color: var(--site-text); }
.dw-body { display: grid; gap: 3px; min-width: 0; }
.dw-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14.5px; }
.dw-amt { font-size: 12.5px; font-weight: 700; color: var(--site-accent); font-variant-numeric: tabular-nums; }
.dw-msg { font-size: 14px; color: color-mix(in oklab, var(--site-text) 82%, transparent); line-height: 1.5; overflow-wrap: anywhere; }
.dw-when { font-size: 12px; color: var(--site-muted); }
.dw-others { display: inline-flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--site-muted); }
.dw-others svg { width: 15px; height: 15px; color: var(--site-accent); }
/* wall: a mosaic; cards with a message span two columns on wider pages */
.dw-wall-in { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-flow: dense; }
.dw-wall-in .dw-item { flex-direction: column; align-items: flex-start; }
.dw-wall-in .dw-item.has-msg { grid-column: span 2; flex-direction: row; }
/* list */
.dw-list-in { gap: 0; }
.dw-list-in .dw-item { padding-inline: 2px; border-radius: 0; }
.dw-list-in .dw-item + .dw-item { border-block-start: 1px solid var(--site-line); }
/* grid: avatar tiles */
.dw-grid-in { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.dw-grid-in .dw-item { flex-direction: column; align-items: center; text-align: center; padding: 16px 8px; }
.dw-grid-in .dw-av { width: 52px; height: 52px; font-size: 16px; }
.dw-grid-in .dw-name { justify-content: center; flex-direction: column; align-items: center; }
/* marquee */
.dw-mq { position: relative; }
.dw-mq-track { list-style: none; margin: 0; padding: 4px 0; }
.dw-chip { display: inline-flex; align-items: center; gap: 10px; flex: none; min-height: 48px; padding: 6px 16px 6px 6px; border-radius: 999px; white-space: nowrap; font-size: 14px; }
.dw-chip .dw-av { width: 36px; height: 36px; font-size: 12px; }
.dw-mq.is-paused .ws-track { animation-play-state: paused; }
.dw-pause { display: grid; place-items: center; margin: 8px auto 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--site-line); background: var(--site-surface); color: var(--site-text); cursor: pointer; }
.dw-pause[hidden] { display: none; }
.dw-pause svg { width: 15px; height: 15px; }
.dw-i-play { display: none; }
.dw-mq.is-paused .dw-i-play { display: grid; }
.dw-mq.is-paused .dw-i-pause { display: none; }

/* css/site/blocks/download.css */
/* Download: its own card (a file card); button, card-horizontal, thumb-row and featured are shared. */
.ws-site .ws-dl { display: flex; align-items: center; gap: 16px; padding: var(--b-pad, 14px); text-align: start; }
.ws-dl-file { position: relative; width: 84px; height: 104px; flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 10px 22px 10px 10px; color: var(--site-accent-text);
  background: radial-gradient(90% 70% at 100% 0%, rgb(255 255 255 / .3), transparent 60%), linear-gradient(160deg, color-mix(in oklab, var(--site-accent) 85%, var(--site-surface)), color-mix(in oklab, var(--site-accent) 60%, var(--site-text)));
  box-shadow: 0 14px 26px -16px color-mix(in oklab, var(--site-accent) 70%, var(--site-text)); }
.ws-dl-file::after { content: ""; position: absolute; top: 0; inset-inline-end: 0; width: 22px; height: 22px; background: linear-gradient(225deg, var(--site-surface) 50%, rgb(255 255 255 / .35) 50%); border-end-start-radius: 8px; }
.ws-dl-file.has-media::after { display: none; }
.ws-dl-file .ws-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ws-site .ws-dl-file > svg { width: 32px; height: 32px; margin-bottom: 14px; }
.ws-dl-type { position: absolute; bottom: 8px; inset-inline: 8px; padding: 2px 0; border-radius: 6px; text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .06em; background: rgb(0 0 0 / .22); color: #FFFFFF; backdrop-filter: blur(4px); }
.ws-dl-body { flex: 1; min-width: 0; display: grid; gap: 5px; }
.ws-dl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 6px; }
.ws-dl-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px; border-radius: var(--site-btn-radius); background: var(--site-accent); color: var(--site-accent-text); font-weight: 750; font-size: 14px; box-shadow: 0 10px 22px -14px var(--site-accent); }
.ws-dl-btn svg { width: 16px; height: 16px; transition: translate .2s var(--site-ease); }
.ws-dl:hover .ws-dl-btn svg { translate: 0 2px; }
.ws-dl-size { font-size: 12.5px; font-weight: 700; color: var(--site-muted); font-variant-numeric: tabular-nums; }

/* css/site/blocks/email_capture.css */
/* Email sign-up: card (the classic look), inline, banner, split, minimal, gradient, sticky. */
.ws-capture .ws-ec-copy { display: grid; gap: 0; }
@container ws-page (max-width: 420px) { .ws-capture-row { flex-direction: column; } .ws-capture-row .ws-input { flex: none; width: 100%; } .ws-capture .ws-submit { width: 100%; } }
.ws-ec-inline { text-align: var(--b-align, center); }
.ws-ec-banner { display: grid; gap: 12px; padding: var(--b-pad, 18px 20px); text-align: start; }
.ws-ec-banner .ws-capture-form { margin-top: 0; }
@container ws-page (min-width: 600px) { .ws-ec-banner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 24px; } }
.ws-ec-split { display: grid; gap: 16px; padding: var(--b-pad, 24px); text-align: start; }
@container ws-page (min-width: 600px) { .ws-ec-split { grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; } .ws-ec-split .ws-capture-form { margin-top: 0; } }
.ws-ec-split .ws-card-title { font-size: 1.45rem; letter-spacing: -0.03em; }
.ws-ec-minimal { text-align: var(--b-align, center); }
.ws-ec-minimal .ws-input { border-radius: 0; border-width: 0 0 1.5px; background: transparent; padding-inline: 2px; }
.ws-ec-minimal .ws-submit { background: transparent; color: var(--site-text); border-bottom: 1.5px solid currentColor; border-radius: 0; padding-inline: 6px; }
.ws-ec-gradient { padding: var(--b-pad, 26px 22px); text-align: center; --b-bg: radial-gradient(120% 120% at 100% 0%, rgb(255 255 255 / .28), transparent 50%), linear-gradient(150deg, color-mix(in oklab, var(--site-accent) 92%, #fff), color-mix(in oklab, var(--site-accent) 62%, #000)); --b-fg: var(--site-accent-text); --b-border: 0 solid transparent; --b-shadow: 0 24px 50px -26px var(--site-accent); }
.ws-ec-gradient .ws-card-text { color: color-mix(in oklab, var(--site-accent-text) 80%, transparent); }
.ws-ec-gradient .ws-submit { background: var(--site-accent-text); color: var(--site-accent); }
.ws-ec-gradient .ws-input { background: color-mix(in oklab, var(--site-accent-text) 92%, transparent); border-color: transparent; color: var(--site-ink-dark); }
.ws-ec-gradient .ws-consent { color: color-mix(in oklab, var(--site-accent-text) 80%, transparent); }
.ws-ec-sticky { display: flex; align-items: center; gap: 12px; padding: var(--b-pad, 10px 12px); text-align: start; --b-shadow: var(--site-shadow-float); }
.ws-ec-sticky .ws-ec-copy { flex: 1; min-width: 0; }
.ws-ec-sticky .ws-card-title { font-size: 14.5px; }
.ws-ec-sticky .ws-capture-form { margin: 0; flex: 1.4; }
.ws-ec-sticky .ws-consent { display: none; }
.ws-ec-gradient .ws-input::placeholder { color: color-mix(in oklab, var(--site-ink-dark) 55%, transparent); }

/* css/site/blocks/embed.css */
/* Video & music embeds: player (the classic look), card, compact. */
.ws-embed { width: 100%; overflow: hidden; border-radius: var(--site-radius); background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.ws-embed iframe { display: block; width: 100%; height: 100%; min-height: 152px; border: 0; }
.ws-embed-spotify iframe, .ws-embed-soundcloud iframe { min-height: 152px; }
.ws-embed-preview { height: 100%; border-style: solid; }
.ws-embed-wrap.ws-ev-card { padding: 12px; display: grid; gap: 10px; }
.ws-embed-head { display: grid; gap: 2px; padding: 4px 6px 0; text-align: start; }
.ws-embed-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.ws-embed-row-t { flex: 1; min-width: 0; display: grid; gap: 2px; text-align: start; }

/* css/site/blocks/event.css */
/* Event (ADR-0068, W3): card, featured, split, banner, ticket, compact. Shared parts: the date tile, the "when" line
   (with the visitor's own time added by site.js), facts, and the button with an add-to-calendar disclosure. */
.ws-ev { position: relative; min-width: 0; text-align: start; }
.ws-ev-body { display: grid; gap: 8px; min-width: 0; }
.ws-ev-title { margin: 0; font-family: var(--site-heading); font-size: calc(1.3rem * var(--b-scale, 1)); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; overflow-wrap: anywhere; }
.ws-heading-serif .ws-ev-title { font-style: italic; font-weight: 400; }
.ws-ev-cue { margin: 0; width: fit-content; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: color-mix(in oklab, var(--site-accent) 14%, transparent); color: var(--site-accent); }
.is-live .ws-ev-cue { background: var(--site-accent); color: var(--site-accent-text); }
.ws-ev-when { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 14px; font-weight: 700; line-height: 1.4; }
.ws-ev-when > svg { width: 17px; height: 17px; margin-top: 1px; color: var(--site-accent); }
.ws-ev-when time { display: block; }
.ws-ev-local { display: block; font-size: 12.5px; font-weight: 600; color: var(--site-muted); }
.ws-ev-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 13px; font-weight: 600; color: var(--site-muted); }
.ws-ev-facts li { display: inline-flex; align-items: center; gap: 6px; }
.ws-ev-facts svg { width: 15px; height: 15px; }
.ws-ev-places.is-few { color: color-mix(in oklab, var(--site-accent) 80%, var(--site-text)); font-weight: 800; }
.ws-ev-text { margin: 2px 0 0; color: var(--site-muted); font-size: 14px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.ws-ev-date { display: grid; justify-items: center; align-content: center; width: 60px; min-height: 64px; padding: 6px 4px; border-radius: calc(var(--site-radius) + 2px); line-height: 1.05; text-align: center;
  background: var(--site-surface); color: var(--site-text); box-shadow: 0 10px 24px -14px rgb(0 0 0 / .45); font-variant-numeric: tabular-nums; }
.ws-ev-date small { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ws-ev-date small:first-child { color: var(--site-accent); }
.ws-ev-date small:last-child { color: var(--site-muted); font-weight: 700; letter-spacing: .04em; }
.ws-ev-date b { font-family: var(--site-heading); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.04em; }

.ws-ev-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.ws-ev-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: var(--site-btn-radius); flex: 1 1 auto;
  background: var(--site-accent); color: var(--site-accent-text); font-weight: 800; font-size: 15px; box-shadow: 0 12px 26px -14px var(--site-accent); transition: transform .18s var(--site-ease), filter .18s; }
.ws-ev-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.ws-ev-btn-price { padding: 3px 9px; border-radius: 999px; font-size: 13px; background: color-mix(in oklab, var(--site-accent-text) 18%, transparent); font-variant-numeric: tabular-nums; }
.ws-ev-btn.is-off { background: color-mix(in oklab, var(--site-text) 8%, transparent); color: var(--site-muted); box-shadow: none; cursor: default; flex: 0 1 auto; }
.ws-ev-btn.is-off:hover { transform: none; filter: none; }
.ws-ev-btn.is-small { flex: none; min-height: 44px; padding: 0 16px; font-size: 13.5px; }
.ws-ev-pricetag { font-weight: 800; font-variant-numeric: tabular-nums; }
.ws-ev-cal { position: relative; }
.ws-ev-cal summary { display: inline-flex; align-items: center; gap: 7px; min-height: 48px; padding: 0 16px; border-radius: var(--site-btn-radius); cursor: pointer; list-style: none;
  font-weight: 700; font-size: 14px; border: 1.5px solid color-mix(in oklab, currentColor 20%, transparent); }
.ws-ev-cal summary::-webkit-details-marker { display: none; }
.ws-ev-cal summary svg { width: 16px; height: 16px; }
.ws-ev-cal[open] summary { background: color-mix(in oklab, currentColor 6%, transparent); }
.ws-ev-cal-menu { position: absolute; z-index: 5; inset-inline-end: 0; top: calc(100% + 6px); min-width: 210px; display: grid; padding: 6px; border-radius: calc(var(--site-radius) + 4px);
  background: var(--site-surface); color: var(--site-text); border: 1px solid var(--site-line); box-shadow: var(--site-shadow-lg); }
.ws-ev-cal-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: calc(var(--site-radius) - 2px); font-size: 14px; font-weight: 600; }
.ws-ev-cal-menu a:hover, .ws-ev-cal-menu a:focus-visible { background: color-mix(in oklab, var(--site-accent) 12%, transparent); }

.ws-ev-media, .ws-ev-hero { position: relative; overflow: hidden; background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.ws-ev-media .ws-ev-date, .ws-ev-hero .ws-ev-date { position: absolute; top: 12px; inset-inline-start: 12px; }
.is-ended .ws-ev-media img, .is-ended .ws-ev-hero img { filter: grayscale(1); opacity: .7; }

/* Card */
.ws-ev-card { overflow: hidden; }
.ws-ev-card .ws-ev-media { aspect-ratio: 16 / 9; }
.ws-ev-card .ws-ev-body { padding: var(--b-pad, 16px 18px 18px); }

/* Featured */
.ws-ev-featured { overflow: hidden; }
.ws-ev-hero { aspect-ratio: 4 / 5; color: var(--site-on-media); }
@container ws-page (min-width: 600px) { .ws-ev-hero { aspect-ratio: 16 / 9; } }
.ws-ev-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / 0) 35%, rgb(0 0 0 / .72)); }
.ws-ev-hero-txt { position: absolute; inset-inline: 0; bottom: 0; display: grid; gap: 8px; padding: 20px; }
.ws-ev-hero-txt .ws-ev-title { font-size: calc(1.7rem * var(--b-scale, 1)); color: var(--site-on-media); text-shadow: 0 2px 18px rgb(0 0 0 / .35); }
.ws-ev-hero-txt .ws-ev-cue { background: rgb(255 255 255 / .2); color: var(--site-on-media); backdrop-filter: blur(8px); }
.ws-ev-featured .ws-ev-body { padding: var(--b-pad, 16px 20px 20px); }

/* Split */
.ws-ev-split { display: grid; overflow: hidden; }
.ws-ev-split .ws-ev-media { aspect-ratio: 16 / 9; }
.ws-ev-split .ws-ev-body { padding: var(--b-pad, 16px 18px 18px); }
@container ws-page (min-width: 600px) {
  .ws-ev-split { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
  .ws-ev-split .ws-ev-media { aspect-ratio: auto; min-height: 100%; }
  .ws-ev-split .ws-ev-body { align-self: center; padding: var(--b-pad, 22px); }
}

/* Banner */
.ws-ev-banner { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; padding: var(--b-pad, 16px); border-radius: var(--b-radius, calc(var(--site-radius) + 8px));
  background: var(--b-bg, radial-gradient(90% 120% at 100% 0%, rgb(255 255 255 / .22), transparent 55%), linear-gradient(135deg, color-mix(in oklab, var(--site-accent) 92%, #fff), color-mix(in oklab, var(--site-accent) 70%, #000)));
  color: var(--b-fg, var(--site-accent-text)); box-shadow: var(--b-shadow, 0 18px 36px -22px var(--site-accent)); border: var(--b-border, 0 solid transparent); }
.ws-ev-banner .ws-ev-actions { grid-column: 1 / -1; margin: 0; }
.ws-ev-banner :is(.ws-ev-when > svg, .ws-ev-local, .ws-ev-facts) { color: inherit; opacity: .85; }
.ws-ev-banner .ws-ev-cue { background: color-mix(in oklab, currentColor 18%, transparent); color: inherit; }
.ws-ev-banner .ws-ev-btn { background: var(--site-accent-text); color: var(--site-accent); box-shadow: 0 10px 22px -14px rgb(0 0 0 / .5); }
.ws-ev-banner .ws-ev-date { box-shadow: none; }
@container ws-page (min-width: 600px) { .ws-ev-banner { grid-template-columns: auto minmax(0, 1fr) auto; padding: var(--b-pad, 18px 20px); } .ws-ev-banner .ws-ev-actions { grid-column: auto; flex-direction: column; align-items: stretch; } }

/* Ticket */
.ws-ev-ticket { --notch: 14px; display: grid; grid-template-columns: 92px minmax(0, 1fr); border-radius: var(--b-radius, calc(var(--site-radius) + 8px)); color: var(--b-fg, var(--site-text));
  background: var(--b-bg, var(--site-surface)); box-shadow: var(--b-shadow, var(--site-shadow-md)); border: var(--b-border, 1px solid var(--site-line));
  -webkit-mask: radial-gradient(circle var(--notch) at 92px 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 92px 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle var(--notch) at 92px 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 92px 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
[dir="rtl"] .ws-ev-ticket { -webkit-mask: radial-gradient(circle var(--notch) at calc(100% - 92px) 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at calc(100% - 92px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle var(--notch) at calc(100% - 92px) 0, transparent 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--notch) at calc(100% - 92px) 100%, transparent 98%, #000) bottom / 100% 51% no-repeat; }
.ws-ev-stub { display: grid; align-content: center; justify-items: center; gap: 2px; padding: 16px 8px; border-inline-end: 2px dashed color-mix(in oklab, var(--site-text) 18%, transparent);
  background: color-mix(in oklab, var(--site-accent) 12%, transparent); border-start-start-radius: inherit; border-end-start-radius: inherit; text-align: center; font-variant-numeric: tabular-nums; }
.ws-ev-stub-mon { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--site-accent); }
.ws-ev-stub-day { font-family: var(--site-heading); font-size: 2.4rem; font-weight: 800; letter-spacing: -0.05em; line-height: 1; }
.ws-ev-stub-time { font-size: 12px; font-weight: 700; color: var(--site-muted); }
.ws-ev-ticket .ws-ev-body { padding: var(--b-pad, 16px 18px); }

/* Compact */
.ws-ev-compact { display: flex; align-items: center; gap: 12px; padding: var(--b-pad, 10px 12px); }
.ws-ev-compact .ws-ev-date { width: 52px; min-height: 56px; box-shadow: none; background: color-mix(in oklab, var(--site-accent) 12%, transparent); }
.ws-ev-compact .ws-ev-date b { font-size: 1.35rem; }
.ws-ev-compact .ws-ev-body { flex: 1; gap: 2px; }
.ws-ev-compact .ws-ev-title { font-size: 1rem; }
.ws-ev-line { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--site-muted); }
.ws-ev-line .ws-ev-local { display: block; }
.ws-ev-compact .ws-ev-places { margin: 0; font-size: 12px; font-weight: 800; }
.ws-ev-places.is-sold_out { color: var(--site-muted); }
.ws-site .ws-ev-cue { color: var(--site-accent); }
.ws-site .is-live .ws-ev-cue { color: var(--site-accent-text); }
.ws-site .ws-ev-hero-txt .ws-ev-cue, .ws-site .ws-ev-banner .ws-ev-cue { color: inherit; }
.ws-site .ws-ev-text, .ws-site .ws-ev-line { color: var(--site-muted); }
.ws-site .ws-ev-places.is-few { color: color-mix(in oklab, var(--site-accent) 80%, var(--site-text)); }
.ws-site .ws-ev-places.is-sold_out { color: var(--site-muted); }
.ws-site a.ws-ev-btn { color: var(--site-accent-text); }
.ws-site .ws-ev-banner a.ws-ev-btn { color: var(--site-accent); }
.ws-site .ws-ev-banner .ws-ev-places, .ws-ev-banner .ws-ev-when > svg { color: inherit; }

/* css/site/blocks/events_list.css */
/* Events list (ADR-0068, W3): list, cards, timeline, calendar, carousel. Reuses the event block's parts (blocks/event). */
.ws-el { margin: 0; padding: 0; list-style: none; min-width: 0; text-align: start; }
.ws-el-title { margin: 0; font-family: var(--site-heading); font-size: calc(1.02rem * var(--b-scale, 1)); font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; overflow-wrap: anywhere; }
.ws-el-where { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 8px; }
.ws-el-where svg { width: 13px; height: 13px; }
.ws-el-price { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ws-el-btns { display: inline-flex; align-items: center; gap: 6px; }
.ws-el .ws-ev-places { margin: 0; font-size: 12.5px; font-weight: 800; }
.ws-ev-cal.is-small summary { width: 44px; min-height: 44px; padding: 0; justify-content: center; }

/* Rows (list and calendar) */
.ws-el-list { display: grid; margin: 0; padding: 0; list-style: none; }
.ws-el-list.ws-surface { padding: 4px var(--b-pad, 16px); }
.ws-el-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; align-items: center; padding: 14px 0; border-top: 1px solid var(--site-line); scroll-margin-top: 80px; }
.ws-el-row:first-child { border-top: 0; }
.ws-el-row .ws-ev-date { width: 54px; min-height: 58px; box-shadow: none; background: color-mix(in oklab, var(--site-accent) 11%, transparent); }
.ws-el-row .ws-ev-date b { font-size: 1.35rem; }
.ws-el-main { display: grid; gap: 3px; min-width: 0; }
.ws-el-main .ws-ev-cue { font-size: 10.5px; padding: 2px 8px; }
.ws-el-end { grid-column: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
@container ws-page (min-width: 600px) { .ws-el-row { grid-template-columns: auto minmax(0, 1fr) auto; } .ws-el-end { grid-column: auto; justify-content: flex-end; } }
.ws-el-row.is-sold_out .ws-el-title, .ws-el-row.is-closed .ws-el-title { color: var(--site-muted); }
.ws-el-row:target { background: color-mix(in oklab, var(--site-accent) 7%, transparent); border-radius: calc(var(--site-radius) - 2px); }

/* Cards and carousel */
.ws-el-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@container ws-page (min-width: 600px) { .ws-el-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container ws-page (min-width: 1024px) { .ws-el-cards:not([data-count="2"]):not([data-count="4"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ws-el-card { display: flex; flex-direction: column; overflow: hidden; scroll-margin-top: 80px; }
.ws-el-card .ws-ev-media { aspect-ratio: 16 / 10; }
.ws-el-cue { position: absolute; top: 14px; inset-inline-end: 12px; background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 6px 16px -8px rgb(0 0 0 / .45); }
.ws-el-card-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: var(--b-pad, 14px 16px 16px); }
.ws-el-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
.ws-el-carousel .ws-track > .ws-el-card { flex-basis: var(--car-w); }

/* Timeline */
.ws-el-timeline { position: relative; display: grid; gap: 12px; padding-inline-start: 22px; }
.ws-el-timeline::before { content: ""; position: absolute; top: 6px; bottom: 6px; inset-inline-start: 6px; width: 2px; border-radius: 2px; background: color-mix(in oklab, var(--site-accent) 30%, transparent); }
.ws-el-month { margin: 6px 0 -2px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--site-accent); }
.ws-el-month:first-child { margin-top: 0; }
.ws-el-tl { position: relative; scroll-margin-top: 80px; }
.ws-el-dot { position: absolute; top: 20px; inset-inline-start: -21px; width: 12px; height: 12px; border-radius: 50%; background: var(--site-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 18%, var(--site-bg-base)); }
.ws-el-tl.is-sold_out .ws-el-dot { background: var(--site-muted); }
.ws-el-tl-card { display: grid; gap: 8px; padding: var(--b-pad, 14px 16px); }
.ws-el-tl-top { display: flex; gap: 12px; align-items: flex-start; }
.ws-el-tl-day { display: grid; justify-items: center; min-width: 40px; line-height: 1; }
.ws-el-tl-day b { font-family: var(--site-heading); font-size: 1.7rem; font-weight: 800; letter-spacing: -0.04em; }
.ws-el-tl-day small { margin-top: 3px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--site-muted); }
.ws-el-tl .ws-el-card-foot { padding-top: 2px; }

/* Calendar */
.ws-el-calendar { display: grid; gap: 12px; }
.ws-el-cal { padding: var(--b-pad, 16px); }
.ws-el-cal-title { margin: 0 0 10px; font-family: var(--site-heading); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; text-align: center; }
.ws-el-grid { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; font-variant-numeric: tabular-nums; }
.ws-el-grid th { padding: 2px 0 6px; font-size: 11px; font-weight: 800; color: var(--site-muted); text-transform: uppercase; }
.ws-el-grid abbr { text-decoration: none; }
.ws-el-grid td { padding: 0; text-align: center; }
.ws-el-grid td > * { display: grid; place-items: center; aspect-ratio: 1; max-height: 48px; margin-inline: auto; width: 100%; max-width: 48px; border-radius: 50%; font-size: 13.5px; font-weight: 600; }
.ws-el-grid td.is-out > * { opacity: .3; }
.ws-el-grid td.is-today > * { box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--site-text) 35%, transparent); }
.ws-el-grid td.has-ev a { background: var(--site-accent); color: var(--site-accent-text); font-weight: 800; box-shadow: 0 8px 18px -10px var(--site-accent); transition: transform .15s var(--site-ease); }
.ws-el-grid td.has-ev a:hover { transform: scale(1.08); }
.ws-el-cal .ws-el-list { margin-top: 10px; border-top: 1px solid var(--site-line); }
.ws-el-cal .ws-el-row:first-child { border-top: 0; }

/* css/site/blocks/faq.css */
/* FAQ: accordion (the classic look, on the shared accordion variant), list, two-column, cards. */
.ws-faq2 dl { margin: 0; display: grid; gap: 18px 28px; }
@container ws-page (min-width: 600px) { .ws-faq2 dl { grid-template-columns: 1fr 1fr; } }
.ws-faq2-item { text-align: start; }
.ws-faq2-item dt { font-family: var(--site-heading); font-weight: 700; font-size: 1.02rem; letter-spacing: -0.015em; }
.ws-faq2-item dd { margin: 6px 0 0; color: var(--site-muted); font-size: 14px; line-height: 1.55; }
.ws-faqc .ws-track { gap: 10px; }
@container ws-page (min-width: 600px) { .ws-faqc .ws-track { grid-template-columns: 1fr 1fr; } }
.ws-faqc-item { padding: var(--b-pad, 18px); text-align: start; display: grid; gap: 6px; align-content: start; }
.ws-faqc-q { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 13px; background: var(--site-accent); color: var(--site-accent-text); }

/* css/site/blocks/follower_counts.css */
/* Follower counts: grid, rows, compact, bento. Brand colour per platform from blocks/_networks (--net, --net-ink). */
.ws-fc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0 0 12px; }
.ws-fc-head h2 { margin: 0; font-family: var(--site-heading); font-size: 1.2rem; font-weight: 700; letter-spacing: -0.025em; }
.ws-site .ws-fc-total { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--site-muted); }
.ws-fc-total b { color: var(--site-text); font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ws-fc { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ws-fc-cell { min-width: 0; display: grid; }
.ws-site .ws-fc-item { position: relative; min-width: 0; display: grid; gap: 4px; align-content: start; text-align: start; color: var(--site-text); }
.ws-fc-ico { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--net, var(--site-accent)); color: var(--net-ink, var(--site-accent-text)); }
.ws-site .ws-fc-ico svg { width: 19px; height: 19px; }
.ws-fc-num { font-family: var(--site-heading); font-size: calc(1.7rem * var(--b-scale, 1)); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ws-fc-lab { display: grid; gap: 0; line-height: 1.3; min-width: 0; }
.ws-fc-net { font-weight: 700; font-size: 13px; }
.ws-fc-aud { font-size: 12.5px; font-weight: 600; color: var(--site-muted); }
.ws-fc-go { position: absolute; top: 12px; inset-inline-end: 12px; opacity: .45; }
.ws-fc-go svg { width: 15px; height: 15px; }
[dir="rtl"] .ws-fc-go svg { transform: scaleX(-1); }

/* Grid: tinted tiles. */
.ws-fc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container ws-page (min-width: 600px) { .ws-fc-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.ws-fc-grid .ws-fc-item { padding: 14px; gap: 8px; border-radius: var(--b-radius, calc(var(--site-radius) + 6px)); border: 1px solid color-mix(in oklab, var(--net, var(--site-accent)) 22%, var(--site-line));
  background: var(--b-bg, linear-gradient(160deg, color-mix(in oklab, var(--net, var(--site-accent)) 12%, var(--site-surface)), var(--site-surface) 70%)); box-shadow: var(--b-shadow, var(--site-shadow-sm)); }
.ws-fc-grid .ws-fc-num { margin-top: 6px; }

/* Rows: one surface, a row per platform, the number at the end. */
.ws-fc-rows { gap: 0; padding: 4px 0; border-radius: var(--b-radius, calc(var(--site-radius) + 6px)); background: var(--b-bg, var(--site-surface)); border: var(--b-border, 1px solid var(--site-line)); box-shadow: var(--b-shadow, var(--site-shadow-md)); }
.ws-fc-rows .ws-fc-cell + .ws-fc-cell { border-top: 1px solid var(--site-line); }
.ws-fc-rows .ws-fc-item { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico lab num"; align-items: center; column-gap: 12px; padding: 12px 16px; min-height: 64px; }
.ws-fc-rows .ws-fc-ico { grid-area: ico; }
.ws-fc-rows .ws-fc-lab { grid-area: lab; }
.ws-fc-rows .ws-fc-num { grid-area: num; font-size: calc(1.3rem * var(--b-scale, 1)); }
.ws-fc-rows .ws-fc-go { display: none; }
.ws-fc-rows .ws-fc-net { font-size: 14.5px; }

/* Compact: chips. */
.ws-fc-compact { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ws-fc-compact .ws-fc-item { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 14px 4px 4px; border-radius: 999px; background: var(--site-surface); border: 1px solid var(--site-line); box-shadow: var(--site-shadow-sm); }
.ws-fc-compact .ws-fc-ico { width: 34px; height: 34px; }
.ws-site .ws-fc-compact .ws-fc-ico svg { width: 16px; height: 16px; }
.ws-fc-compact .ws-fc-num { font-size: 15px; letter-spacing: -0.02em; }
.ws-s-align-start .ws-fc-compact { justify-content: flex-start; }

/* Bento: the biggest audience as a large branded tile. */
.ws-fc-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container ws-page (min-width: 600px) { .ws-fc-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ws-fc-bento .is-lead { grid-row: span 2; } }
.ws-fc-bento .ws-fc-item { padding: 14px; gap: 6px; border-radius: var(--b-radius, calc(var(--site-radius) + 8px)); background: var(--site-surface); border: 1px solid var(--site-line); box-shadow: var(--site-shadow-sm); }
.ws-fc-bento .is-lead { grid-column: span 2; }
.ws-fc-bento .is-lead .ws-fc-item { align-content: space-between; min-height: 170px; padding: 18px; color: var(--net-ink, var(--site-accent-text)); border: 0;
  background: radial-gradient(90% 90% at 100% 0%, rgb(255 255 255 / .28), transparent 55%), var(--net, var(--site-accent)); box-shadow: 0 18px 36px -20px var(--net, var(--site-accent)); }
.ws-fc-bento .is-lead .ws-fc-ico { background: rgb(255 255 255 / .2); color: inherit; width: 44px; height: 44px; }
.ws-fc-bento .is-lead .ws-fc-num { font-size: calc(2.6rem * var(--b-scale, 1)); }
.ws-fc-bento .is-lead .ws-fc-aud { color: inherit; opacity: .82; }
.ws-fc-bento .ws-fc-cell:not(.is-lead) .ws-fc-num { font-size: calc(1.35rem * var(--b-scale, 1)); }

/* css/site/blocks/form.css */
/* Form block: inline, card and button (the trigger styles live in modules/sheets). */
.ws-block-form .ws-card { text-align: start; }

/* css/site/blocks/free_lesson.css */
/* Free preview lesson (B3 · M3): player and card. The YouTube facade styles come from blocks/youtube. */
.ws-fl { display: grid; gap: 14px; min-width: 0; text-align: start; padding: var(--b-pad, 10px); border-radius: var(--b-radius, calc(var(--site-radius) + 8px)); --yt: var(--site-accent); }
.ws-fl-stage { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: calc(var(--site-radius) + 2px); background: var(--site-ink-dark); isolation: isolate; box-shadow: none; }
.ws-fl-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ws-fl-still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ws-fl-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .1), rgb(0 0 0 / .45)); }
.ws-fl-play { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text);
  box-shadow: 0 14px 32px -10px rgb(0 0 0 / .6); transition: transform .2s var(--site-ease); }
.ws-site .ws-fl-play svg { width: 24px; height: 24px; fill: currentColor; stroke: none; margin-inline-start: 3px; }
.ws-fl-still:hover .ws-fl-play { transform: scale(1.07); }
.ws-fl-play.is-small { width: 44px; height: 44px; }
.ws-site .ws-fl-play.is-small svg { width: 17px; height: 17px; }
.ws-fl-body { display: grid; gap: 7px; padding: 2px 8px 8px; min-width: 0; }
.ws-site .ws-fl-eyebrow { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--site-muted); }
.ws-fl-free { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: color-mix(in oklab, var(--site-accent) 15%, transparent); color: var(--site-accent); }
.ws-fl-title { margin: 0; font-family: var(--site-heading); font-size: calc(1.3rem * var(--b-scale, 1)); font-weight: 750; letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance; }
.ws-site .ws-fl-meta { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--site-muted); }
.ws-site .ws-fl-meta svg { width: 15px; height: 15px; }
.ws-fl-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ws-site .ws-fl-watch, .ws-site .ws-fl-enrol { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: var(--site-btn-radius);
  font-weight: 750; font-size: 14.5px; border: 0; cursor: pointer; font-family: inherit; }
.ws-site .ws-fl-watch { background: color-mix(in oklab, var(--site-text) 7%, transparent); color: var(--site-text); }
.ws-site .ws-fl-enrol { background: var(--site-btn-bg, var(--site-accent)); color: var(--site-btn-text, var(--site-accent-text)); }
.ws-fl-enrol small { font-weight: 600; opacity: .85; }
.ws-fl-watch svg { width: 17px; height: 17px; }
.ws-fl-cover { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; border-radius: calc(var(--site-radius) + 2px); background: color-mix(in oklab, var(--site-accent) 18%, var(--site-surface)); }
.ws-fl-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
@container ws-page (min-width: 600px) {
  .ws-fl-card { grid-template-columns: 240px minmax(0, 1fr); align-items: center; gap: 20px; }
  .ws-fl-card .ws-fl-cover { aspect-ratio: 4 / 3; }
  .ws-fl-title { font-size: calc(1.5rem * var(--b-scale, 1)); }
}
@media (prefers-reduced-motion: reduce) { .ws-fl-play { transition: none; } }

/* css/site/blocks/fundraiser.css */
/* Fundraising goal: thermometer, ring, bar-card, banner (buttons in modules/donations). --p is the progress (0–100%). */
.fr { display: grid; gap: 16px; padding: var(--b-pad, 22px); text-align: var(--b-align, start); position: relative; overflow: hidden; }
.fr-copy { display: grid; gap: 6px; min-width: 0; }
.fr-title { margin: 0; font-family: var(--site-heading); font-size: calc(1.3rem * var(--b-scale, 1)); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance; }
.fr-text { margin: 0; color: var(--site-muted); font-size: 14px; line-height: 1.55; }
.fr-raised { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.fr-raised strong { font-family: var(--site-heading); font-size: calc(2rem * var(--b-scale, 1)); font-weight: 800; letter-spacing: -0.035em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--site-accent); }
.fr-raised span { font-weight: 700; color: var(--site-muted); }
.fr-stats { display: grid; gap: 12px; min-width: 0; }
.fr-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fr-facts li { display: inline-flex; align-items: baseline; gap: 4px; padding: 6px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--site-muted); background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.fr-facts b { color: var(--site-text); font-weight: 800; font-variant-numeric: tabular-nums; }
.fr-bar { height: 12px; border-radius: 999px; background: color-mix(in oklab, var(--site-accent) 14%, transparent); overflow: hidden; }
.fr-bar span { display: block; height: 100%; width: var(--p); min-width: 12px; border-radius: inherit; position: relative; overflow: hidden;
  background: linear-gradient(90deg, color-mix(in oklab, var(--site-accent) 70%, var(--site-surface)), var(--site-accent)); animation: fr-grow 1.1s var(--site-ease) both; }
.fr-bar span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--site-surface) 45%, transparent), transparent); transform: translateX(-100%); animation: fr-shine 2.8s 1.2s ease-in-out infinite; }
@keyframes fr-grow { from { width: 0; } }
@keyframes fr-shine { to { transform: translateX(100%); } }
.fr-act .sp-cta { width: 100%; }
.fr-ended { margin: 0; display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: calc(var(--site-radius) - 2px); font-weight: 600; font-size: 14px; background: color-mix(in oklab, var(--site-accent) 10%, transparent); }
.fr-ended svg { color: var(--site-accent); }
.fr.is-reached .fr-raised strong::after { content: " ✓"; }

/* Thermometer: the tube sits beside the numbers */
.fr-thermometer { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "copy copy" "stats thermo" "act act"; align-items: end; }
.fr-thermometer .fr-copy { grid-area: copy; } .fr-thermometer .fr-stats { grid-area: stats; } .fr-thermometer .fr-act { grid-area: act; }
.fr-thermo { grid-area: thermo; position: relative; display: grid; justify-items: center; width: 64px; padding-bottom: 28px; }
.fr-tube { position: relative; width: 26px; height: 170px; border-radius: 999px; background: color-mix(in oklab, var(--site-accent) 13%, transparent); box-shadow: inset 0 2px 6px color-mix(in oklab, var(--site-ink-dark) 12%, transparent); overflow: hidden; }
.fr-fill { position: absolute; inset-inline: 0; bottom: 0; height: max(var(--p), 14%); border-radius: inherit; background: linear-gradient(0deg, var(--site-accent), color-mix(in oklab, var(--site-accent) 65%, var(--site-surface))); animation: fr-rise 1.2s var(--site-ease) both; }
@keyframes fr-rise { from { height: 0; } }
.fr-bulb { position: absolute; bottom: 0; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 0 0 6px var(--site-surface), 0 14px 26px -12px var(--site-accent); }
.fr-bulb svg { width: 24px; height: 24px; }
.fr-thermometer .fr-facts { flex-direction: column; align-items: flex-start; }

/* Ring */
.fr-ring { justify-items: center; text-align: center; }
.fr-ring .fr-copy, .fr-ring .fr-act { width: 100%; }
.fr-gauge { position: relative; width: min(220px, 70%); aspect-ratio: 1; }
.fr-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fr-gauge circle { fill: none; stroke-width: 11; stroke-linecap: round; }
.fr-ring-bg { stroke: color-mix(in oklab, var(--site-accent) 14%, transparent); }
.fr-ring-fg { stroke: var(--site-accent); animation: fr-dash 1.3s var(--site-ease) both; }
@keyframes fr-dash { from { stroke-dasharray: 0 100; } }
.fr-gauge-in { position: absolute; inset: 0; display: grid; place-content: center; gap: 2px; }
.fr-gauge-in strong { font-family: var(--site-heading); font-size: calc(2.2rem * var(--b-scale, 1)); font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.fr-gauge-in span { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--site-muted); }
.fr-ring .fr-raised, .fr-ring .fr-facts { justify-content: center; }

/* Banner: one wide strip */
.fr-banner { gap: 12px; }
.fr-banner .fr-title { font-size: calc(1.1rem * var(--b-scale, 1)); }
.fr-banner .fr-raised strong { font-size: calc(1.5rem * var(--b-scale, 1)); }
@container ws-page (min-width: 600px) {
  .fr-banner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 20px; }
  .fr-banner .fr-act .sp-cta { width: auto; }
  .fr-bar-card { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .fr-bar span, .fr-bar span::after, .fr-fill, .fr-ring-fg { animation: none; } }

/* css/site/blocks/gallery.css */
/* Gallery: grid, masonry, carousel, slideshow, bento, stack-cards, filmstrip. Photos first: thin gutters, soft corners,
   captions over or under the photo, a zoom hint on photos that open full screen. */
.ws-gl { --gl-gap: 6px; --gl-r: var(--b-radius, max(8px, calc(var(--site-radius) - 2px))); --shade: color-mix(in oklab, var(--site-ink-dark) 74%, transparent); }
.ws-gl-stage { position: relative; min-width: 0; }
.ws-gl .ws-track { gap: var(--gl-gap); }
.ws-gl-shot { position: relative; margin: 0; min-width: 0; display: grid; gap: 7px; align-content: start; }
.ws-gl-link { position: relative; display: block; overflow: hidden; isolation: isolate; aspect-ratio: var(--shape, 1 / 1); border-radius: var(--gl-r);
  background: color-mix(in oklab, var(--site-text) 7%, transparent); }
.ws-gl-link .ws-media, .ws-gl-link .ws-media-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--b-fit, cover); transition: transform .7s var(--site-ease), filter .3s; }
a.ws-gl-link { cursor: zoom-in; }
a.ws-gl-link:hover .ws-media { transform: scale(1.05); }
a.ws-gl-link:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 65%, transparent); outline-offset: 2px; }
.ws-gl-zoom { position: absolute; z-index: 2; inset-block-start: 8px; inset-inline-end: 8px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in oklab, var(--site-ink-dark) 42%, transparent); color: var(--site-ink-light); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  opacity: 0; transform: scale(.85); transition: opacity .2s, transform .2s var(--site-ease); }
.ws-gl-zoom svg { width: 14px; height: 14px; }
a.ws-gl-link:is(:hover, :focus-visible) .ws-gl-zoom { opacity: 1; transform: none; }
@media (hover: none) { .ws-gl-zoom { opacity: .85; transform: none; } }
.ws-gl-cap { margin: 0; padding-inline: 2px; font-size: 12.5px; font-weight: 500; line-height: 1.4; color: var(--site-muted); text-align: start; text-wrap: pretty; }
/* Captions laid over the photo (grid, bento, slideshow, filmstrip). */
:is(.ws-gl-grid, .ws-gl-bento, .ws-gl-slideshow, .ws-gl-filmstrip) .ws-gl-cap { position: absolute; z-index: 1; inset-inline: 0; inset-block-end: 0; padding: 36px 12px 10px;
  border-radius: 0 0 var(--gl-r) var(--gl-r); background: linear-gradient(180deg, transparent, var(--shade)); color: var(--site-ink-light); font-weight: 650; pointer-events: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ws-gl-grid .ws-gl-cap { font-size: 12px; padding: 26px 10px 8px; }

/* Grid: two columns on phones, three from tablets (Responsive → columns overrides). */
.ws-gl-grid .ws-track { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
@container ws-page (min-width: 600px) { .ws-gl-grid .ws-track { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } }

/* Masonry: columns of the photos' own shapes. */
.ws-gl-masonry .ws-track { display: block; columns: var(--cols, 2); column-gap: var(--gl-gap); }
.ws-gl-masonry .ws-gl-shot { break-inside: avoid; margin-block-end: var(--gl-gap); }
.ws-gl-masonry .ws-gl-link { aspect-ratio: var(--r, 4 / 3); }
.ws-gl-masonry .ws-gl-cap { padding-block-end: 6px; }
@container ws-page (min-width: 600px) { .ws-gl-masonry .ws-track { columns: var(--cols, 3); } }

/* Carousel and the slide shows: scroll snap, the next photo peeking in; arrows with site.js. */
:is(.ws-gl-carousel, .ws-gl-slideshow, .ws-gl-filmstrip) .ws-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
:is(.ws-gl-carousel, .ws-gl-slideshow, .ws-gl-filmstrip) .ws-track::-webkit-scrollbar { display: none; }
:is(.ws-gl-carousel, .ws-gl-slideshow, .ws-gl-filmstrip) .ws-track > * { scroll-snap-align: start; scroll-snap-stop: always; }
.ws-gl-carousel .ws-track { gap: 10px; padding-block-end: 4px; }
.ws-gl-carousel .ws-track > * { flex: 0 0 var(--car-w, 74%); }
.ws-gl-carousel .ws-car-nav { display: flex; }
@container ws-page (min-width: 600px) { .ws-gl-carousel .ws-track > * { flex-basis: var(--car-w, 42%); } }
@container ws-page (min-width: 1024px) { .ws-gl-carousel .ws-track > * { flex-basis: var(--car-w, calc((100% - 20px) / 3)); } }

.ws-gl-slideshow .ws-track, .ws-gl-filmstrip .ws-track { gap: 0; border-radius: var(--gl-r); box-shadow: var(--b-shadow, var(--site-shadow-md)); }
.ws-gl-slideshow .ws-track > *, .ws-gl-filmstrip .ws-track > * { flex: 0 0 100%; }
.ws-gl-slideshow .ws-gl-link, .ws-gl-filmstrip .ws-gl-link { border-radius: 0; }
.ws-gl-slideshow .ws-gl-cap, .ws-gl-filmstrip .ws-gl-cap { border-radius: 0; padding: 48px 18px 16px; font-size: 14px; }
:is(.ws-gl-slideshow, .ws-gl-filmstrip) .ws-car-nav { position: absolute; z-index: 3; inset-inline: 10px; inset-block-start: 50%; margin: 0; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; }
:is(.ws-gl-slideshow, .ws-gl-filmstrip) .ws-car-nav button { pointer-events: auto; background: color-mix(in oklab, var(--site-surface) 78%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: transparent; box-shadow: var(--site-shadow-md); }
:is(.ws-gl-slideshow, .ws-gl-filmstrip) .ws-car-nav button[disabled] { opacity: 0; pointer-events: none; }
.ws-gl-count { position: absolute; z-index: 3; inset-block-start: 12px; inset-inline-end: 12px; padding: 4px 10px; border-radius: 999px; pointer-events: none;
  background: color-mix(in oklab, var(--site-ink-dark) 55%, transparent); color: var(--site-ink-light); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
html:not(.ws-js) .ws-mode-public .ws-gl-count { display: none; }
.ws-gl-dots { display: flex; flex-wrap: wrap; justify-content: center; margin-block-start: 6px; }
.ws-gl-dots button { width: 22px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.ws-gl-dots button::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: color-mix(in oklab, var(--site-text) 26%, transparent); transition: width .25s var(--site-ease), background .25s; }
.ws-gl-dots button.is-on::before { width: 18px; background: var(--site-accent); }
.ws-gl-dots button:focus-visible { outline: 2px solid var(--site-accent); outline-offset: -8px; border-radius: 999px; }
.ws-gl-thumbs { display: flex; gap: 6px; margin-block-start: 8px; padding: 2px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.ws-gl-thumbs::-webkit-scrollbar { display: none; }
.ws-gl-thumbs button { position: relative; flex: 0 0 60px; height: 60px; padding: 0; overflow: hidden; cursor: pointer; scroll-snap-align: start;
  border: 0; border-radius: max(6px, calc(var(--site-radius) - 6px)); background: color-mix(in oklab, var(--site-text) 8%, transparent); opacity: .55; transition: opacity .2s, transform .2s var(--site-ease); }
.ws-gl-thumbs button::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .2s; }
.ws-gl-thumbs button:hover { opacity: .85; }
.ws-gl-thumbs button.is-on { opacity: 1; }
.ws-gl-thumbs button.is-on::after { box-shadow: inset 0 0 0 2.5px var(--site-accent); }
.ws-gl-thumbs .ws-media { width: 100%; height: 100%; object-fit: cover; }
@container ws-page (min-width: 600px) { .ws-gl-thumbs button { flex-basis: 72px; height: 72px; } }

/* Bento: a big photo, then wide and tall ones between squares. */
.ws-gl-bento .ws-track { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); grid-auto-flow: dense; }
.ws-gl-bento .ws-gl-shot { aspect-ratio: 1; }
.ws-gl-bento .ws-gl-link { position: absolute; inset: 0; aspect-ratio: auto; }
.ws-gl-bento .is-big { grid-column: span 2; grid-row: span 2; }
.ws-gl-bento .is-wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.ws-gl-bento .is-tall { grid-row: span 2; aspect-ratio: auto; }
@container ws-page (min-width: 600px) { .ws-gl-bento .ws-track { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } }

/* Stacked cards: each photo sticks a little lower than the last, so they pile up like prints. */
.ws-gl-stack-cards .ws-track { display: grid; gap: 18px; }
.ws-gl-stack-cards .ws-gl-shot { position: sticky; inset-block-start: calc(16px + var(--i, 0) * 10px); padding: 8px; gap: 8px;
  background: var(--b-bg, var(--site-surface)); border: var(--b-border, 1px solid var(--site-line)); border-radius: calc(var(--gl-r) + 6px); box-shadow: var(--site-shadow-lg); }
.ws-gl-stack-cards .ws-gl-link { aspect-ratio: 4 / 5; }
.ws-gl-stack-cards .ws-gl-cap { padding: 2px 6px 4px; font-size: 13.5px; color: var(--site-text); font-weight: 600; }
@container ws-page (min-width: 600px) { .ws-gl-stack-cards .ws-gl-link { aspect-ratio: 3 / 2; } }
.ws-mode-thumb .ws-gl-stack-cards .ws-gl-shot { position: relative; inset-block-start: auto; }

@media (prefers-reduced-motion: reduce) {
  .ws-gl .ws-media, .ws-gl-thumbs button, .ws-gl-dots button::before { transition: none; }
  a.ws-gl-link:hover .ws-media { transform: none; }
}

/* css/site/blocks/gift_card.css */
/* Gift card (B4 · Q4): a card face drawn in CSS from the theme's accent (or the product's image), then words and a button. */
.gcx { display: grid; gap: 18px; padding: var(--b-pad, 18px); text-align: start; }
.gcx-card { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; }
.gcx-face { position: relative; isolation: isolate; aspect-ratio: 1.586; border-radius: calc(var(--site-radius) + 2px); overflow: hidden; padding: 16px 18px;
  display: grid; grid-template-rows: auto 1fr auto; color: var(--site-accent-text);
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in oklab, var(--site-accent) 70%, white) 0%, var(--site-accent) 45%,
    color-mix(in oklab, var(--site-accent) 62%, black) 100%);
  box-shadow: 0 22px 40px -24px color-mix(in oklab, var(--site-accent) 80%, black), inset 0 0 0 1px rgb(255 255 255 / .18);
  transform: rotate(-2deg); transition: transform .35s var(--site-ease); }
.gcx:hover .gcx-face { transform: rotate(0deg) translateY(-2px); }
.gcx-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.gcx-face.has-image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(0 0 0 / .05), rgb(0 0 0 / .55)); }
.gcx-face.has-image { color: white; }
.gcx-shine { position: absolute; inset: -40% -10% auto auto; width: 70%; height: 120%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 255 255 / .28), transparent); }
.gcx-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gcx-top svg { width: 22px; height: 22px; opacity: .9; }
.gcx-shop { font-family: var(--site-heading); font-size: 15px; font-weight: 800; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcx-chip { align-self: center; width: 38px; height: 28px; border-radius: 6px;
  background: linear-gradient(135deg, rgb(255 255 255 / .75), rgb(255 255 255 / .35)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .5); }
.gcx-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.gcx-bottom small { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.gcx-value { font-family: var(--site-heading); font-size: calc(1.6rem * var(--b-scale, 1)); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.gcx-body { display: grid; gap: 10px; align-content: start; }
.gcx-title { margin: 0; font-family: var(--site-heading); font-size: calc(1.3rem * var(--b-scale, 1)); font-weight: 750; letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance; }
.gcx-text { margin: 0; color: var(--site-muted); font-size: 14.5px; line-height: 1.55; }
.gcx-values { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gcx-values li { min-height: 32px; display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; font-weight: 800; font-size: 13.5px;
  border: 1px solid color-mix(in oklab, var(--site-accent) 45%, transparent); color: var(--site-text); font-variant-numeric: tabular-nums; }
.gcx-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; color: var(--site-muted); font-size: 12.5px; font-weight: 650; }
.gcx-facts li { display: inline-flex; align-items: center; gap: 6px; }
.gcx-facts svg { width: 14px; height: 14px; color: var(--site-accent); }
.gcx-go.is-off { opacity: .55; cursor: default; }
.gcx-featured { padding: var(--b-pad, 20px); }
.gcx-featured .gcx-face { max-width: 420px; width: 100%; justify-self: center; padding: 22px 24px; transform: rotate(-3deg); margin-block: 6px 4px; }
.gcx-featured .gcx-value { font-size: calc(2.2rem * var(--b-scale, 1)); }
.gcx-featured .gcx-body { text-align: center; justify-items: center; }
.gcx-featured .gcx-values, .gcx-featured .gcx-facts { justify-content: center; }
@container ws-page (max-width: 520px) {
  .gcx-card { grid-template-columns: 1fr; }
  .gcx-card .gcx-face { max-width: 340px; }
}
@media (prefers-reduced-motion: reduce) { .gcx-face { transition: none; } .gcx:hover .gcx-face { transform: rotate(-2deg); } }

/* css/site/blocks/heading.css */
/* Heading: plain (the classic look; style.size s/m/l/xl), eyebrow, underline, display, gradient, split, numbered. */
.ws-hd { text-align: var(--b-align, center); }
.ws-heading { margin: 16px 0 0; font-family: var(--site-heading); font-weight: 700; letter-spacing: -0.025em; font-size: 1.15rem; }
.ws-font-lora .ws-heading { font-family: "Lora", Georgia, serif; font-style: italic; }
.ws-heading-serif .ws-heading { font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.ws-s-size-s .ws-hd-plain .ws-heading { font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; color: var(--site-muted); }
.ws-heading-serif .ws-s-size-s .ws-hd-plain .ws-heading { font-style: normal; font-family: var(--site-font); font-weight: 700; }
.ws-s-size-l .ws-heading { font-size: 1.5rem; }
.ws-s-size-xl .ws-heading { font-size: 2rem; }
.ws-hd .ws-eyebrow { margin-top: 16px; }
.ws-hd .ws-eyebrow + .ws-heading { margin-top: 4px; }
.ws-hd-eyebrow .ws-heading { font-size: 1.35rem; line-height: 1.2; }
.ws-hd-underline .ws-heading { display: inline-block; padding-bottom: 8px; background: linear-gradient(90deg, var(--site-accent), color-mix(in oklab, var(--site-accent) 30%, transparent)) no-repeat center bottom / 48px 3px; }
.ws-s-align-start .ws-hd-underline .ws-heading, .ws-hd-underline:is([style*="start"]) .ws-heading { background-position: left bottom; }
.ws-hd-display .ws-heading { font-size: clamp(1.9rem, 1.4rem + 3cqw, 3.2rem); letter-spacing: -0.045em; line-height: 1.02; }
.ws-heading-serif .ws-hd-display .ws-heading { letter-spacing: -0.03em; }
.ws-hd-gradient .ws-heading { font-size: clamp(1.6rem, 1.3rem + 2cqw, 2.4rem); letter-spacing: -0.04em; background: linear-gradient(100deg, var(--site-accent), color-mix(in oklab, var(--site-accent) 45%, var(--site-text))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ws-hd-split { display: flex; align-items: flex-end; gap: 16px; text-align: start; }
.ws-hd-split .ws-hd-in { flex: none; max-width: 75%; }
.ws-hd-split .ws-hd-rule { flex: 1; height: 1px; margin-bottom: 9px; background: color-mix(in oklab, var(--site-text) 18%, transparent); }
.ws-hd-numbered { display: flex; align-items: baseline; gap: 14px; text-align: start; }
.ws-hd-num { font-family: var(--site-heading); font-size: 2.4rem; font-weight: 700; line-height: 1; letter-spacing: -0.05em; color: color-mix(in oklab, var(--site-accent) 75%, transparent); font-variant-numeric: tabular-nums; }
.ws-hd-numbered .ws-heading { font-size: 1.35rem; margin-top: 0; }

/* css/site/blocks/hours.css */
/* Opening hours: table, compact, card. Status colours come from the accent and text tokens. */
.hr { display: grid; gap: 14px; padding: var(--b-pad, 20px); text-align: start; }
.hr-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.hr-title { margin: 0; font-family: var(--site-heading); font-size: calc(1.15rem * var(--b-scale, 1)); font-weight: 700; letter-spacing: -0.02em; }
.hr-status { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13.5px; color: var(--site-muted); }
.hr-status strong { color: var(--site-text); font-weight: 800; }
.hr-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: color-mix(in oklab, var(--site-text) 35%, transparent); }
.hr-status.is-open .hr-dot { background: var(--site-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 22%, transparent); animation: hr-pulse 2.4s ease-in-out infinite; }
.hr-status.is-open strong { color: var(--site-accent); }
.hr-status.is-soon .hr-dot { background: color-mix(in oklab, var(--site-accent) 50%, var(--site-text)); box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-text) 12%, transparent); }
@keyframes hr-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in oklab, var(--site-accent) 8%, transparent); } }
.hr-status.is-big { display: grid; justify-items: start; gap: 4px; }
.hr-status.is-big strong { font-family: var(--site-heading); font-size: calc(1.8rem * var(--b-scale, 1)); letter-spacing: -0.03em; line-height: 1.05; display: flex; align-items: center; gap: 10px; }
.hr-status.is-big { grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; }
.hr-status.is-big .hr-dot { width: 12px; height: 12px; }
.hr-status.is-big > span:not(.hr-dot) { grid-column: 1 / -1; font-size: 14px; }
.hr-week { width: 100%; border-collapse: collapse; font-size: 14px; }
.hr-week th, .hr-week td { padding: 9px 4px; text-align: start; vertical-align: top; border-top: 1px solid var(--site-line); }
.hr-week tr:first-child th, .hr-week tr:first-child td { border-top: 0; }
.hr-week th { font-weight: 600; color: var(--site-muted); }
.hr-week td { text-align: end; font-weight: 700; font-variant-numeric: tabular-nums; }
.hr-week td span { display: block; }
.hr-week tr.is-closed td { color: var(--site-muted); font-weight: 600; }
.hr-week tr.is-today th, .hr-week tr.is-today td { color: var(--site-text); }
.hr-week tr.is-today { background: color-mix(in oklab, var(--site-accent) 9%, transparent); }
.hr-week tr.is-today th { font-weight: 800; }
.hr-week tr.is-today th, .hr-week tr.is-today td { border-radius: 0; }
.hr-tag { display: inline-block; margin-inline-start: 6px; padding: 2px 7px; border-radius: 999px; font-size: 11px; font-weight: 800; background: color-mix(in oklab, var(--site-accent) 14%, transparent); color: var(--site-text); }
.hr-today { margin: 0; font-size: 14px; color: var(--site-muted); }
.hr-today b { color: var(--site-text); font-variant-numeric: tabular-nums; }
.hr-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; }
.hr-tiles li { display: grid; gap: 2px; align-content: start; padding: 9px 8px; border-radius: calc(var(--site-radius) - 4px); background: color-mix(in oklab, var(--site-text) 5%, transparent); font-size: 12px; font-variant-numeric: tabular-nums; }
.hr-tiles b { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--site-muted); }
.hr-tiles li.is-today { background: var(--site-accent); color: var(--site-accent-text); }
.hr-tiles li.is-today b { color: inherit; opacity: .85; }
.hr-tiles li.is-closed:not(.is-today) span { color: var(--site-muted); }
.hr-specials { list-style: none; margin: 0; padding: 10px 12px; display: grid; gap: 6px; border-radius: calc(var(--site-radius) - 2px); background: color-mix(in oklab, var(--site-accent) 7%, transparent); font-size: 13px; }
.hr-specials li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.hr-specials svg { width: 14px; height: 14px; color: var(--site-accent); }
.hr-specials em { font-style: normal; color: var(--site-muted); }
.hr-foot { display: grid; gap: 4px; }
.hr-foot p { margin: 0; font-size: 12.5px; color: var(--site-muted); line-height: 1.45; }
.hr-tz { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: center; }
.hr-tz svg { width: 13px; height: 13px; }
.hr-tz [data-local-out] { font-weight: 700; color: var(--site-text); }
/* Compact: a disclosure */
.hr-compact { padding: 0; gap: 0; }
.hr-compact .hr-foot, .hr-compact .hr-specials { margin: 0 16px 14px; }
.hr-more summary { list-style: none; cursor: pointer; }
.hr-more summary::-webkit-details-marker { display: none; }
.hr-sum { display: flex; align-items: center; gap: 12px; min-height: 64px; padding-block: 12px; padding-inline: 14px; }
.hr-ico { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: color-mix(in oklab, var(--site-accent) 15%, transparent); color: var(--site-accent); }
.hr-sum-t { display: grid; gap: 2px; min-width: 0; flex: 1; }
.hr-sum-t small { font-size: 12px; font-weight: 600; color: var(--site-muted); }
.hr-chev { transition: transform .2s var(--site-ease); color: var(--site-muted); }
.hr-more[open] .hr-chev { transform: rotate(180deg); }
.hr-more .hr-week { margin: 0 16px 10px; width: calc(100% - 32px); }
.hr-compact:not(:has(details[open])) .hr-foot, .hr-compact:not(:has(details[open])) .hr-specials { display: none; }
@media (prefers-reduced-motion: reduce) { .hr-status.is-open .hr-dot { animation: none; } }

/* css/site/blocks/image.css */
/* Image: rounded, square, wide (the classic three), portrait, circle, frame, polaroid, full-bleed. Width and height come
   from the media library, so nothing shifts while images load. */
.ws-image { display: block; margin: 0; overflow: hidden; border-radius: var(--site-radius); box-shadow: 0 10px 30px -18px rgb(0 0 0 / .4); position: relative; }
.ws-image img { display: block; width: 100%; height: auto; object-fit: var(--b-fit, cover); }
.ws-image-square { border-radius: 0; }
.ws-image-wide img { aspect-ratio: 16 / 7; object-fit: var(--b-fit, cover); }
.ws-image-portrait img { aspect-ratio: 4 / 5; object-fit: var(--b-fit, cover); }
.ws-image-circle { width: min(72%, 320px); margin-inline: auto; border-radius: 50%; aspect-ratio: 1; box-shadow: 0 0 0 6px color-mix(in oklab, var(--site-surface) 80%, transparent), var(--site-shadow-lg); }
.ws-image-circle img { height: 100%; aspect-ratio: 1; object-fit: cover; }
.ws-image-frame { padding: 10px; background: var(--site-surface); border: 1px solid var(--site-line); border-radius: calc(var(--site-radius) + 8px); box-shadow: var(--site-shadow-lg); }
.ws-image-frame img { border-radius: max(4px, calc(var(--site-radius) - 2px)); }
.ws-image-polaroid { padding: 12px 12px 14px; background: #FFFFFF; color: var(--site-ink-dark); border-radius: 4px; box-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 20px 40px -20px rgb(0 0 0 / .45); transform: rotate(-1.4deg); max-width: 92%; margin-inline: auto; }
.ws-image-polaroid img { aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.ws-image-polaroid .ws-image-cap { display: block; margin-top: 12px; text-align: center; font-family: var(--site-heading); font-size: 1rem; font-style: italic; }
.ws-image-full-bleed { width: 100cqw; max-width: none; margin-inline: calc(50% - 50cqw); border-radius: 0; box-shadow: none; }
.ws-image-full-bleed img { max-height: 70vh; object-fit: cover; }
.ws-image-cap { display: block; padding: 10px 4px 0; font-size: 13px; color: var(--site-muted); text-align: var(--b-align, center); }
.ws-image:not(.ws-image-polaroid):not(.ws-image-frame) .ws-image-cap { position: absolute; inset: auto 0 0; padding: 26px 14px 12px; color: var(--site-on-media); background: linear-gradient(transparent, rgb(0 0 0 / .55)); font-weight: 600; }
a.ws-image { transition: transform .2s var(--site-ease), box-shadow .2s; }
a.ws-image:hover { transform: translateY(-2px); }
.ws-image:not(.ws-image-circle):not(.ws-image-full-bleed) img { max-height: min(640px, 88vh); }

/* css/site/blocks/instagram_post.css */
/* Instagram post: embed (Instagram's /embed frame) and card (Weesify's own, also the builder's preview). */
.ws-block-instagram-post { --ig: linear-gradient(45deg, #FEDA75 0%, #FA7E1E 25%, #D62976 55%, #962FBF 78%, #4F5BD5 100%); }
.ws-ig-embed { width: min(100%, 480px); margin-inline: auto; overflow: hidden; border-radius: var(--b-radius, calc(var(--site-radius) + 6px)); background: var(--site-surface); box-shadow: var(--site-shadow-md); border: 1px solid var(--site-line); }
.ws-ig-embed iframe { display: block; width: 100%; height: 640px; border: 0; }
@container ws-page (max-width: 420px) { .ws-ig-embed iframe { height: 560px; } }
.ws-ig-card { display: grid; width: min(100%, 480px); margin-inline: auto; overflow: hidden; text-align: start; }
.ws-ig-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
.ws-ig-avatar { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #FFFFFF; background: var(--ig); box-shadow: 0 0 0 2px var(--site-surface), 0 0 0 3.5px #D62976; }
.ws-site .ws-ig-avatar svg { width: 18px; height: 18px; }
.ws-ig-who { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.ws-ig-who b { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-ig-who small { font-size: 12px; color: var(--site-muted); font-weight: 600; }
.ws-ig-open { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in oklab, currentColor 7%, transparent); }
.ws-ig-open svg { width: 15px; height: 15px; }
.ws-ig-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.ws-ig-media .ws-media { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--site-ease); }
.ws-hov:hover .ws-ig-media .ws-media { transform: scale(1.03); }
.ws-ig-wash { display: grid; place-items: center; width: 100%; height: 100%; color: #FFFFFF; background: radial-gradient(90% 70% at 20% 110%, rgb(255 255 255 / .22), transparent 60%), var(--ig); }
.ws-site .ws-ig-wash svg { width: 64px; height: 64px; opacity: .92; }
.ws-ig-reel { position: absolute; top: 10px; inset-inline-end: 10px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgb(0 0 0 / .45); color: #FFFFFF; }
.ws-site .ws-ig-reel svg { width: 16px; height: 16px; }
.ws-ig-body { display: grid; gap: 8px; padding: 12px 14px 16px; }
.ws-ig-acts { display: flex; gap: 14px; }
.ws-site .ws-ig-acts svg { width: 22px; height: 22px; }
.ws-ig-cap { font-size: 14px; line-height: 1.45; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ws-ig-cap b { font-weight: 700; margin-inline-end: 4px; }
.ws-ig-cta { justify-self: start; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--site-btn-radius); font-weight: 700; font-size: 14px; color: #FFFFFF; background: var(--ig); }

/* css/site/blocks/instructor.css */
/* Instructor (ADR-0068, W3): card, split, compact. */
.ws-in { padding: var(--b-pad, 20px); min-width: 0; }
.ws-in-name { margin: 0; font-family: var(--site-heading); font-size: calc(1.25rem * var(--b-scale, 1)); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.ws-heading-serif .ws-in-name { font-style: italic; font-weight: 400; }
.ws-in-role { margin: 2px 0 0; color: var(--site-accent); font-size: 13.5px; font-weight: 700; }
.ws-in-bio { margin: 10px 0 0; color: var(--site-muted); font-size: 14.5px; line-height: 1.6; }
.ws-in-hl { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.ws-in-hl li { display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.ws-in-hl svg { width: 13px; height: 13px; color: var(--site-accent); stroke-width: 3; }
.ws-in-link { margin-top: 16px; }
.ws-in-course { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 16px; padding: 12px; text-align: start;
  border-radius: calc(var(--site-radius) + 2px); background: color-mix(in oklab, var(--site-text) 4%, transparent); border: 1px solid var(--site-line); }
.ws-in-course-txt { display: grid; gap: 3px; min-width: 0; }
.ws-in-course-txt strong { font-weight: 700; line-height: 1.25; }
.ws-in-course-txt .ws-eyebrow { font-size: 10.5px; }
.ws-in-course-end { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
@container ws-page (min-width: 600px) { .ws-in-course { grid-template-columns: auto minmax(0, 1fr) auto; } .ws-in-course-end { grid-column: auto; flex-direction: column; align-items: flex-end; } }

.ws-in-card { text-align: center; }
.ws-in-photo { display: block; width: calc(104px * var(--b-scale, 1)); aspect-ratio: 1; margin: 0 auto 12px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 4px var(--b-bg, var(--site-surface)), 0 0 0 6px color-mix(in oklab, var(--site-accent) 45%, transparent), var(--site-shadow-md); }
.ws-in-card .ws-in-hl { justify-content: center; }
.ws-in-card .ws-in-bio { max-width: 46ch; margin-inline: auto; }

.ws-in-split { display: grid; gap: 18px; padding: 0; overflow: hidden; text-align: start; }
.ws-in-portrait { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.ws-in-body { padding: 0 var(--b-pad, 20px) var(--b-pad, 20px); }
.ws-in-body .ws-eyebrow { margin-bottom: 6px; }
@container ws-page (min-width: 600px) {
  .ws-in-split { grid-template-columns: minmax(200px, 38%) minmax(0, 1fr); gap: 0; }
  .ws-in-portrait { aspect-ratio: auto; height: 100%; min-height: 320px; }
  .ws-in-body { padding: var(--b-pad, 26px); align-self: center; }
}

.ws-in-compact { padding: var(--b-pad, 12px 14px); }
.ws-in-row { display: flex; align-items: center; gap: 12px; }
.ws-in-avatar { width: 52px; height: 52px; flex: none; border-radius: 50%; overflow: hidden; }
.ws-in-who { flex: 1; min-width: 0; display: grid; gap: 1px; text-align: start; }
.ws-in-who .ws-in-name { font-size: 1rem; }
.ws-in-who .ws-in-role { margin: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-in-go { min-height: 44px; padding: 0 14px; font-size: 13.5px; }
.ws-site .ws-in-role { color: var(--site-accent); }
.ws-site .ws-in-bio { color: var(--site-muted); }
.ws-site a.ws-cta:is(.ws-in-link, .ws-in-go) { color: var(--site-accent-text); }
.ws-in-portrait img { object-position: 50% 22%; }
.ws-site .ws-in-body .ws-eyebrow { color: var(--site-accent); }

/* css/site/blocks/join_community.css */
/* Join community: card, banner, split. Faces come from blocks/member_count when both are used; the essentials are here too. */
.jc { position: relative; overflow: hidden; display: grid; text-align: var(--b-align, start); }
.jc-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: radial-gradient(70% 90% at 90% 10%, color-mix(in oklab, var(--site-surface) 40%, transparent), transparent 60%), linear-gradient(140deg, color-mix(in oklab, var(--site-accent) 85%, var(--site-surface)), color-mix(in oklab, var(--site-accent) 55%, var(--site-ink-dark))); }
.jc-art { position: absolute; inset: 0; display: grid; place-items: center; color: color-mix(in oklab, var(--site-accent-text) 85%, transparent); }
.jc-art svg { width: 64px; height: 64px; stroke-width: 1.4; }
.jc-price { position: absolute; top: 12px; inset-inline-end: 12px; padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: 13px; background: var(--site-surface); color: var(--site-text); box-shadow: var(--site-shadow-md); }
.jc-body { display: grid; gap: 10px; padding: var(--b-pad, 20px 22px 22px); min-width: 0; }
.jc-kicker { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--site-accent); }
.jc-kicker svg { width: 14px; height: 14px; }
.jc-title { margin: 0; font-family: var(--site-heading); font-size: calc(1.35rem * var(--b-scale, 1)); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; text-wrap: balance; }
.jc-text { margin: 0; color: var(--site-muted); font-size: 14px; line-height: 1.55; }
.jc-proof { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jc-facts { display: grid; gap: 1px; font-size: 13px; color: var(--site-muted); }
.jc-facts b { color: var(--site-text); font-weight: 800; }
.jc-cta { margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 20px; border-radius: var(--site-btn-radius);
  font-weight: 800; background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 14px 28px -16px var(--site-accent); transition: transform .18s var(--site-ease); }
.jc-cta:hover { transform: translateY(-2px); }
.jc-cta svg { width: 17px; height: 17px; }
.jc-cta-price { padding: 3px 9px; border-radius: 999px; font-size: 12.5px; background: color-mix(in oklab, var(--site-accent-text) 18%, transparent); }
/* Banner: the whole block is a bold accent strip */
.jc-banner { border-radius: var(--b-radius, calc(var(--site-radius) + 8px)); color: var(--site-accent-text); box-shadow: var(--b-shadow, var(--site-shadow-lg));
  background: radial-gradient(80% 120% at 100% 0%, color-mix(in oklab, var(--site-surface) 28%, transparent), transparent 60%), linear-gradient(135deg, var(--site-accent), color-mix(in oklab, var(--site-accent) 60%, var(--site-ink-dark))); }
.jc-banner .jc-kicker, .jc-banner .jc-text, .jc-banner .jc-facts, .jc-banner .jc-facts b { color: inherit; }
.jc-banner .jc-text, .jc-banner .jc-facts { opacity: .86; }
.jc-banner .jc-cta { background: var(--site-surface); color: var(--site-text); box-shadow: 0 12px 26px -14px var(--site-ink-dark); }
.jc-banner .jc-cta-price { background: color-mix(in oklab, var(--site-accent) 16%, transparent); }
.jc-banner .mc-face { box-shadow: 0 0 0 2px var(--site-accent); }
@container ws-page (min-width: 600px) {
  .jc-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: stretch; }
  .jc-split .jc-media { aspect-ratio: auto; min-height: 100%; }
  .jc-split .jc-body { align-content: center; padding: var(--b-pad, 26px); }
  .jc-banner .jc-body { grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center; }
  .jc-banner .jc-body > :not(.jc-cta) { grid-column: 1; }
  .jc-banner .jc-cta { grid-column: 2; grid-row: 1 / span 4; }
}
/* Member initials (also in blocks/member_count) */
.jc .mc-faces, .mc .mc-faces { display: inline-flex; align-items: center; }
.mc-face { width: var(--fs, 32px); height: var(--fs, 32px); flex: none; border-radius: 50%; display: grid; place-items: center; margin-inline-start: calc(var(--fs, 32px) * -.16);
  font-size: calc(var(--fs, 32px) * .42); font-weight: 800; color: var(--site-accent-text); box-shadow: 0 0 0 2px var(--site-surface);
  background: color-mix(in oklab, var(--site-accent) calc(100% - var(--i, 0) * 12%), var(--site-text)); }
.mc-face:first-child { margin-inline-start: 0; }
.mc-more { background: var(--site-surface); color: var(--site-text); font-size: calc(var(--fs, 32px) * .32); box-shadow: 0 0 0 2px var(--site-surface), inset 0 0 0 1px var(--site-line); }
.mc-faces-s { --fs: 30px; } .mc-faces-m { --fs: 38px; } .mc-faces-l { --fs: 48px; }
@media (prefers-reduced-motion: reduce) { .jc-cta { transition: none; } }

/* css/site/blocks/language_switch.css */
/* Language switcher (B3 · U3): pills, menu, flags (text-code badges, never country flags). */
.ls { display: flex; flex-wrap: wrap; align-items: center; justify-content: var(--b-justify, center); gap: 8px; }
.ls-label { color: var(--site-muted); font-size: 13.5px; font-weight: 600; }
.ls-row { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; justify-content: inherit; }
.ls-item { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--site-muted); border: 1px solid var(--site-line); background: color-mix(in oklab, var(--site-surface) 70%, transparent); transition: color .2s, background .2s, border-color .2s, transform .2s; }
.ls-item:hover { color: var(--site-text); transform: translateY(-1px); }
.ls-item[aria-current="true"] { background: var(--site-text); color: var(--site-bg-base, var(--site-bg)); border-color: transparent; }
.ls a:focus-visible, .ls-toggle:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 55%, transparent); outline-offset: 2px; }
/* flags: round code badges with the language's own name */
.ls-flags .ls-item { padding: 4px 14px 4px 4px; min-height: 44px; }
.ls-badge { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 11.5px; letter-spacing: .04em; font-weight: 800; background: color-mix(in oklab, var(--site-accent) 16%, transparent); color: var(--site-accent); }
.ls-flags .ls-item[aria-current="true"] .ls-badge { background: var(--site-accent); color: var(--site-accent-text); }
/* menu */
.ls-menu { position: relative; }
.ls-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border-radius: 999px; cursor: pointer; list-style: none; font-weight: 700; font-size: 14px; }
.ls-toggle::-webkit-details-marker { display: none; }
.ls-globe, .ls-caret { display: grid; }
.ls-globe svg { width: 17px; height: 17px; color: var(--site-accent); }
.ls-caret svg { width: 15px; height: 15px; transition: transform .2s; }
.ls-menu[open] .ls-caret svg { transform: rotate(180deg); }
.ls-list { position: absolute; z-index: 40; inset-block-start: calc(100% + 8px); inset-inline-start: 50%; translate: calc(-50% * var(--dir-sign, 1)) 0; min-width: 220px; list-style: none; margin: 0; padding: 6px; border-radius: calc(var(--site-radius) + 2px); box-shadow: var(--site-shadow-lg, 0 22px 50px -24px rgb(0 0 0 / .5)); display: grid; gap: 2px; text-align: start; }
.ls-list a { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border-radius: calc(var(--site-radius) - 4px); font-weight: 600; }
.ls-list a:hover { background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.ls-list a[aria-current="true"] { background: color-mix(in oklab, var(--site-accent) 12%, transparent); }
.ls-code { display: grid; place-items: center; width: 30px; height: 22px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .04em; background: color-mix(in oklab, var(--site-text) 8%, transparent); color: var(--site-muted); }
.ls-native { flex: 1; }
.ls-tick { display: grid; color: var(--site-accent); }
.ws-s-align-start .ls { justify-content: flex-start; }
.ws-s-align-start .ls-list { inset-inline-start: 0; translate: none; }
/* An open menu sits above the blocks after it (each block is its own stacking context while its entrance animation holds). */
.ws-block:has(.ls-menu[open]) { z-index: 45; }

/* css/site/blocks/lead_magnet.css */
/* Free download for email: card, featured, split, banner. */
.lm { display: grid; gap: 18px; padding: var(--b-pad, 22px); text-align: start; overflow: hidden; }
.lm-cover { justify-self: center; width: min(170px, 48%); aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; transform: rotate(-3deg);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--site-surface) 60%, transparent) inset, 0 24px 44px -22px color-mix(in oklab, var(--site-ink-dark) 70%, transparent), 0 6px 14px -8px color-mix(in oklab, var(--site-ink-dark) 40%, transparent); }
.lm-doc { position: relative; display: grid; align-content: space-between; gap: 10px; width: 100%; height: 100%; padding: 16px 14px; color: var(--site-accent-text);
  background: radial-gradient(90% 70% at 100% 0%, color-mix(in oklab, var(--site-surface) 32%, transparent), transparent 60%), linear-gradient(160deg, var(--site-accent), color-mix(in oklab, var(--site-accent) 55%, var(--site-ink-dark))); }
.lm-doc::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 8px; width: 2px; background: color-mix(in oklab, var(--site-accent-text) 22%, transparent); }
.lm-doc-top svg { width: 24px; height: 24px; opacity: .9; }
.lm-doc-lines { display: grid; gap: 6px; }
.lm-doc-lines i { display: block; height: 5px; border-radius: 3px; background: color-mix(in oklab, var(--site-accent-text) 30%, transparent); }
.lm-doc-lines i:nth-child(2) { width: 80%; } .lm-doc-lines i:nth-child(3) { width: 60%; }
.lm-doc b { font-family: var(--site-heading); font-size: 15px; line-height: 1.15; letter-spacing: -0.01em; }
.lm-body { display: grid; gap: 10px; min-width: 0; align-content: center; }
.lm-eyebrow { margin: 0; display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: color-mix(in oklab, var(--site-accent) 13%, transparent); color: var(--site-accent); }
.lm-eyebrow svg { width: 13px; height: 13px; }
.lm-title { margin: 0; font-family: var(--site-heading); font-size: calc(1.4rem * var(--b-scale, 1)); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.lm-text { margin: 0; color: var(--site-muted); font-size: 14px; line-height: 1.55; }
.lm-points { list-style: none; margin: 2px 0; padding: 0; display: grid; gap: 7px; }
.lm-points li { display: flex; gap: 9px; align-items: flex-start; font-size: 14px; font-weight: 600; }
.lm-points svg { width: 18px; height: 18px; flex: none; padding: 3px; border-radius: 50%; background: var(--site-accent); color: var(--site-accent-text); stroke-width: 3; margin-top: 1px; }
.lm-form { display: grid; gap: 8px; margin-top: 4px; }
.lm-row { display: flex; gap: 8px; }
.lm-row .ws-input { height: 50px; }
.lm-send { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 50px; padding: 0 18px; border: 0; border-radius: var(--site-btn-radius);
  font: inherit; font-weight: 800; cursor: pointer; background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 12px 24px -14px var(--site-accent); }
.lm-send svg { width: 17px; height: 17px; }
@container ws-page (max-width: 440px) { .lm-row { flex-direction: column; } .lm-row .ws-input { flex: none; width: 100%; } .lm-send { width: 100%; } }
.lm-done { display: grid; gap: 10px; }
.lm-done-t { margin: 0; display: flex; align-items: center; gap: 8px; font-weight: 700; }
.lm-done-t svg { color: var(--site-accent); width: 20px; height: 20px; }
.lm-mailed { padding: 12px 14px; border-radius: calc(var(--site-radius) - 2px); background: color-mix(in oklab, var(--site-accent) 10%, transparent); }
.lm-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lm-file { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; border-radius: calc(var(--site-radius) - 2px); border: 1.5px solid color-mix(in oklab, var(--site-accent) 45%, transparent); background: color-mix(in oklab, var(--site-accent) 7%, transparent); }
.lm-file-ico { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text); }
.lm-file-t { display: grid; gap: 1px; min-width: 0; }
.lm-file-t strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-file-t small { color: var(--site-muted); font-size: 12px; }
/* Featured: a big cover on top */
.lm-featured .lm-cover { width: min(210px, 60%); margin-top: 6px; }
.lm-featured .lm-body { text-align: center; justify-items: center; }
.lm-featured .lm-points { justify-items: start; text-align: start; }
.lm-featured .lm-form { width: 100%; }
/* Banner: a slim strip */
.lm-banner { gap: 12px; }
.lm-banner .lm-title { font-size: calc(1.15rem * var(--b-scale, 1)); }
@container ws-page (min-width: 600px) {
  .lm-card, .lm-split { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 26px; }
  .lm-card .lm-cover { width: 150px; }
  .lm-split { padding: var(--b-pad, 28px); }
  .lm-split .lm-cover { width: 220px; }
  .lm-split .lm-title { font-size: calc(1.7rem * var(--b-scale, 1)); }
}

/* css/site/blocks/link_group.css */
/* Link group: every shared collection layout, plus its own accordion (one fold for the whole group). */
.ws-block-link-group .ws-cv-buttons .ws-button .ws-button-label small { display: block; font-size: 12.5px; font-weight: 500; opacity: .72; }
.ws-lg-fold { overflow: hidden; }
.ws-lg-sum { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: var(--b-pad, 14px 16px); cursor: pointer; list-style: none; text-align: start; }
.ws-lg-sum::-webkit-details-marker { display: none; }
.ws-lg-sum:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 60%, transparent); outline-offset: -3px; border-radius: inherit; }
.ws-lg-sum-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ws-lg-mark { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, currentColor 7%, transparent); transition: transform .25s var(--site-ease); }
.ws-lg-fold[open] .ws-lg-mark { transform: rotate(180deg); }
.ws-lg-list { list-style: none; margin: 0; padding: 0 8px 8px; display: grid; gap: 2px; border-top: 1px solid var(--site-line); padding-top: 8px; }
.ws-lg-fold[open] .ws-lg-list > li { animation: ws-lg-in .35s var(--site-ease) both; animation-delay: calc(min(var(--i, 0), 8) * 35ms); }
@keyframes ws-lg-in { from { opacity: 0; transform: translateY(-4px); } }
.ws-lg-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px; border-radius: calc(var(--site-radius) + 2px); color: inherit; text-align: start; transition: background .18s; }
.ws-lg-row:hover { background: color-mix(in oklab, currentColor 6%, transparent); }
.ws-lg-thumb { width: 44px; height: 44px; flex: none; border-radius: max(10px, calc(var(--site-radius) - 4px)); overflow: hidden; display: grid; }
.ws-lg-thumb .ws-ico { width: 100%; height: 100%; border-radius: inherit; }
.ws-lg-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ws-lg-row-t { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ws-lg-row-t strong { font-weight: 700; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.ws-lg-row-t small { font-size: 13px; font-weight: 500; color: var(--site-muted); line-height: 1.35; }
.ws-lg-go { width: 18px; flex: none; display: grid; opacity: .45; transition: opacity .18s, transform .18s; }
.ws-lg-go svg { width: 16px; height: 16px; }
.ws-lg-row:hover .ws-lg-go { opacity: .9; transform: translate(calc(2px * var(--dir-sign, 1)), -2px); }
[dir="rtl"] .ws-lg-go svg { transform: scaleX(-1); }
.ws-block-link-group .ws-cv-compact .ws-chip-s { display: none; }

/* css/site/blocks/list_block.css */
/* Checklist / features: checklist, icons, grid, numbered. */
.ws-lb { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; text-align: start; }
.ws-lb.ws-surface { padding: var(--b-pad, 18px 18px); gap: 0; }
.ws-lb-item { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.ws-lb-mark { flex: none; display: grid; place-items: center; }
.ws-lb-words { display: grid; gap: 2px; min-width: 0; padding-block-start: 3px; }
.ws-lb-t { font-weight: 700; font-size: calc(15px * var(--b-scale, 1)); line-height: 1.35; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ws-lb-x { color: var(--site-muted); font-size: 13.5px; line-height: 1.5; text-wrap: pretty; }
/* Checklist: accent ticks, hairlines between points. */
.ws-lb-checklist .ws-lb-item { padding-block: 12px; border-block-end: 1px solid var(--site-line); }
.ws-lb-checklist .ws-lb-item:first-child { padding-block-start: 2px; }
.ws-lb-checklist .ws-lb-item:last-child { border-block-end: 0; padding-block-end: 2px; }
.ws-lb-checklist .ws-lb-mark { width: 24px; height: 24px; margin-block-start: 1px; border-radius: 50%; background: var(--site-accent); color: var(--site-accent-text); }
.ws-lb-checklist .ws-lb-mark svg { width: 14px; height: 14px; stroke-width: 3; }
.ws-lb-checklist .ws-lb-words { padding-block-start: 1px; }
/* Icons: a soft tile per point. */
.ws-lb-icons { gap: 16px; }
.ws-lb-icons .ws-lb-mark, .ws-lb-grid .ws-lb-mark { width: 42px; height: 42px; border-radius: calc(var(--site-radius) - 4px); background: color-mix(in oklab, var(--site-accent) 15%, transparent); color: var(--site-accent); }
.ws-lb-icons .ws-lb-mark svg, .ws-lb-grid .ws-lb-mark svg { width: 20px; height: 20px; }
.ws-lb-icons .ws-lb-words { padding-block-start: 1px; }
/* Grid: feature tiles. */
.ws-lb-grid { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 8px; }
.ws-lb-grid .ws-lb-item { flex-direction: column; gap: 12px; padding: var(--b-pad, 16px); border-radius: var(--b-radius, calc(var(--site-radius) + 4px)); }
.ws-lb-grid .ws-lb-words { padding: 0; }
.ws-lb-grid .ws-lb-x { font-size: 13px; }
/* Numbered: big numerals in the heading face. */
.ws-lb-numbered .ws-lb-item { gap: 16px; padding-block: 14px; border-block-end: 1px solid var(--site-line); }
.ws-lb-numbered .ws-lb-item:first-child { padding-block-start: 2px; }
.ws-lb-numbered .ws-lb-item:last-child { border-block-end: 0; padding-block-end: 2px; }
.ws-lb-numbered .ws-lb-mark { min-width: 36px; font-family: var(--site-heading); font-size: 1.55rem; font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: var(--site-accent); font-variant-numeric: tabular-nums; }

/* css/site/blocks/live_now.css */
/* Live now (B4): pill, banner, card. A red "LIVE" badge with a pulsing dot (still under reduced motion). */
.ws-live { display: flex; align-items: center; gap: 12px; min-width: 0; color: var(--site-text); text-decoration: none; }
.ws-live:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 55%, transparent); outline-offset: 3px; }
.ws-live-note { margin: 0 0 8px; font-size: 12px; font-weight: 650; color: var(--site-muted); text-align: center; }
.ws-live-badge { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 26px; padding: 0 10px; border-radius: 999px; font-size: 11.5px; font-weight: 850;
  letter-spacing: .08em; text-transform: uppercase; color: var(--site-live-ink, var(--site-accent-text)); background: var(--site-live, var(--site-accent)); }
.ws-live-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: ws-live-pulse 1.6s ease-in-out infinite; }
@keyframes ws-live-pulse { 50% { opacity: .25; } }
.ws-live-brand { display: grid; place-items: center; flex: none; }
.ws-site .ws-live-brand svg { width: 20px; height: 20px; }
.ws-live-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ws-live-title { font-size: 15px; font-weight: 750; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; unicode-bidi: plaintext; }
.ws-live-text { font-size: 13px; line-height: 1.4; color: var(--site-muted); }
.ws-live-cta { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 40px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 750;
  background: color-mix(in oklab, var(--site-text) 8%, transparent); }
.ws-site .ws-live-cta svg { width: 15px; height: 15px; }

.ws-live-pill { width: fit-content; max-width: 100%; margin-inline: auto; padding: 6px; border-radius: 999px; background: var(--b-bg, var(--site-surface));
  border: var(--b-border, 1px solid color-mix(in oklab, var(--site-text) 10%, transparent)); box-shadow: var(--b-shadow, var(--site-shadow-sm)), 0 0 0 4px color-mix(in oklab, var(--site-accent) 12%, transparent); }
.ws-live-pill .ws-live-title { white-space: nowrap; font-size: 14px; }
.ws-live-pill .ws-live-cta { background: var(--site-accent); color: var(--site-accent-text); }

.ws-live-banner { padding: 12px 12px 12px 14px; border-radius: calc(var(--site-radius) + 8px); color: var(--site-surface);
  background: linear-gradient(120deg, var(--site-text), color-mix(in oklab, var(--site-text) 78%, var(--site-accent))); box-shadow: 0 18px 40px -22px rgb(0 0 0 / .55); }
.ws-live-banner :is(.ws-live-title, .ws-live-brand) { color: var(--site-surface); }
.ws-live-banner .ws-live-text { color: color-mix(in oklab, var(--site-surface) 72%, transparent); }
.ws-live-banner .ws-live-cta { background: var(--site-accent); color: var(--site-accent-text); }
@container ws-page (max-width: 420px) { .ws-live-banner { flex-wrap: wrap; } .ws-live-banner .ws-live-copy { flex-basis: calc(100% - 90px); } .ws-live-banner .ws-live-cta { flex: 1 1 100%; justify-content: center; } }

.ws-live-card { flex-direction: column; align-items: stretch; gap: 0; overflow: hidden; border-radius: var(--b-radius, calc(var(--site-radius) + 8px)); background: var(--b-bg, var(--site-surface));
  border: var(--b-border, 1px solid color-mix(in oklab, var(--site-text) 9%, transparent)); box-shadow: var(--b-shadow, var(--site-shadow-md)); }
.ws-live-cover { position: relative; display: grid; aspect-ratio: 16 / 9; background: linear-gradient(135deg, color-mix(in oklab, var(--site-accent) 70%, var(--site-text)), var(--site-text)); color: var(--site-surface); }
.ws-live-img { width: 100%; height: 100%; object-fit: cover; grid-area: 1 / 1; }
.ws-live-art { grid-area: 1 / 1; display: grid; place-items: center; }
.ws-site .ws-live-art svg { width: 56px; height: 56px; opacity: .9; }
.ws-live-cover .ws-live-badge { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; box-shadow: 0 6px 16px -6px rgb(0 0 0 / .5); }
.ws-live-body { display: grid; gap: 6px; padding: 16px 18px 18px; }
.ws-live-card .ws-live-title { font-size: 18px; }
.ws-live-card .ws-live-cta { justify-self: start; margin-top: 6px; min-height: 46px; padding: 0 18px; background: var(--site-accent); color: var(--site-accent-text); }
.ws-site .ws-live-card .ws-live-cta svg:first-child:not(:last-child) { width: 17px; height: 17px; }
@media (prefers-reduced-motion: reduce) { .ws-live-dot { animation: none; } }

/* css/site/blocks/logo_cloud.css */
/* Logos / as seen in: grid, marquee, rows, grayscale. Logos are contained, never cropped; names without a logo
   become wordmarks in four typographic treatments so a row still looks designed. */
.ws-lc { --lc-h: 30px; display: grid; gap: 14px; text-align: center; }
.ws-lc-size-s { --lc-h: 22px; } .ws-lc-size-l { --lc-h: 42px; }
.ws-lc-title { margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--site-muted); }
.ws-lc-list { margin: 0; padding: 0; list-style: none; }
.ws-lc-cell { min-width: 0; display: grid; }
.ws-lc-logo { display: grid; place-items: center; min-height: 44px; min-width: 0; color: var(--site-text); transition: opacity .25s, filter .25s, transform .2s var(--site-ease); }
.ws-lc-logo .ws-media { width: auto; height: var(--lc-h); max-width: 100%; object-fit: contain; }
a.ws-lc-logo:hover { transform: translateY(-1px); }
a.ws-lc-logo:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 60%, transparent); outline-offset: 2px; border-radius: 8px; }
.ws-lc-word { font-family: var(--site-heading); font-size: calc(var(--lc-h) * .62); line-height: 1; font-weight: 800; letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ws-lc-w1 .ws-lc-word { font-weight: 500; font-style: italic; font-family: "Instrument Serif", Georgia, serif; font-size: calc(var(--lc-h) * .78); letter-spacing: -0.01em; }
.ws-lc-w2 .ws-lc-word { font-weight: 700; letter-spacing: .18em; font-size: calc(var(--lc-h) * .46); text-transform: uppercase; }
.ws-lc-w3 .ws-lc-word { font-weight: 600; letter-spacing: -0.05em; }
.ws-lc-w3 .ws-lc-word::before { content: "●"; margin-inline-end: 4px; font-size: .7em; color: var(--site-accent); vertical-align: .1em; }
/* Grid and grayscale: even cells on a soft surface. */
:is(.ws-lc-grid, .ws-lc-grayscale) .ws-lc-list { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 8px; }
:is(.ws-lc-grid, .ws-lc-grayscale) .ws-lc-logo { min-height: calc(var(--lc-h) + 44px); padding: 12px 14px; border-radius: var(--b-radius, calc(var(--site-radius) + 2px));
  background: var(--b-bg, color-mix(in oklab, var(--site-surface) 70%, transparent)); border: var(--b-border, 1px solid var(--site-line)); }
@container ws-page (min-width: 600px) { :is(.ws-lc-grid, .ws-lc-grayscale) .ws-lc-list { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); } }
.ws-lc-grayscale .ws-lc-logo { filter: grayscale(1); opacity: .6; }
.ws-lc-grayscale .ws-lc-logo:is(:hover, :focus-visible), .ws-lc-grayscale .ws-lc-cell:focus-within .ws-lc-logo { filter: none; opacity: 1; }
.ws-lc-grayscale .ws-lc-word { color: var(--site-muted); }
.ws-lc-grayscale .ws-lc-logo:is(:hover, :focus-visible) .ws-lc-word { color: var(--site-text); }
/* Rows: a wrapping line of logos between hairlines. */
.ws-lc-rows .ws-lc-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 28px; padding-block: 16px; border-block: 1px solid var(--site-line); }
.ws-lc-rows .ws-lc-logo { opacity: .82; }
.ws-lc-rows .ws-lc-logo:hover { opacity: 1; }
/* Marquee: on the shared strip, logos spaced out; a pause button. */
.ws-lc-mq .ws-track { gap: 40px; align-items: center; animation-duration: calc(var(--n, 6) * 3.2s); }
.ws-lc-mq .ws-lc-logo { opacity: .82; }
.ws-lc-mq .ws-lc-cell { flex: none; }
.ws-lc-mq.is-paused .ws-track { animation-play-state: paused; }
.ws-lc-mq .ws-mq-view { padding-block: 6px; }
.ws-lc-pause { display: grid; place-items: center; width: 44px; height: 44px; margin: 6px auto 0; border-radius: 50%; border: 1px solid var(--site-line); background: var(--site-surface); color: var(--site-text); cursor: pointer; }
.ws-lc-pause[hidden] { display: none; }
.ws-lc-pause svg { width: 15px; height: 15px; }
.ws-lc-i-play { display: none; }
.ws-lc-mq.is-paused .ws-lc-i-play { display: grid; } .ws-lc-mq.is-paused .ws-lc-i-pause { display: none; }
@media (prefers-reduced-motion: reduce) { .ws-lc-mq .ws-track { gap: 14px 28px; } .ws-lc-logo { transition: none; } }

/* css/site/blocks/logo_header.css */
/* Logo header: centered, left, banner. The mark is the logo (circle, rounded, square or a wide wordmark) or a monogram. */
.ws-lh { --lh: 84px; display: grid; justify-items: center; gap: 12px; text-align: center; }
.ws-lh-size-s { --lh: 64px; } .ws-lh-size-l { --lh: 112px; }
@container ws-page (min-width: 600px) { .ws-lh-size-m { --lh: 92px; } .ws-lh-size-l { --lh: 124px; } }
.ws-lh-mark { position: relative; z-index: 1; width: var(--lh); height: var(--lh); flex: none; display: grid; place-items: center; overflow: hidden; border-radius: 26%;
  background: var(--site-surface); box-shadow: 0 0 0 1px var(--site-line), 0 14px 30px -18px rgb(0 0 0 / .45); color: inherit; transition: transform .2s var(--site-ease); }
a.ws-lh-mark:hover { transform: translateY(-2px) scale(1.02); }
.ws-lh-circle .ws-lh-mark { border-radius: 50%; }
.ws-lh-square .ws-lh-mark { border-radius: 6px; }
.ws-lh-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-lh-wordmark .ws-lh-mark { width: auto; max-width: min(280px, 80%); height: calc(var(--lh) * .62); border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.ws-lh-wordmark .ws-lh-img { width: auto; max-width: 100%; height: 100%; object-fit: contain; }
.ws-lh-mono { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--site-heading); font-weight: 800; letter-spacing: -0.04em;
  font-size: calc(var(--lh) * .36); color: var(--site-accent-text);
  background: radial-gradient(120% 90% at 100% 0%, rgb(255 255 255 / .35), transparent 55%), linear-gradient(150deg, color-mix(in oklab, var(--site-accent) 85%, var(--site-surface)), color-mix(in oklab, var(--site-accent) 60%, var(--site-text))); }
.ws-lh-wordmark .ws-lh-mono { width: auto; padding-inline: .5em; border-radius: 12px; }
.ws-lh-text { display: grid; gap: 4px; min-width: 0; }
.ws-lh-name { margin: 0; font-family: var(--site-heading); font-size: calc(1.45rem * var(--b-scale, 1)); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; overflow-wrap: anywhere; }
.ws-site .ws-lh-tag { margin: 0; color: var(--site-muted); font-size: 14.5px; font-weight: 500; line-height: 1.45; max-width: 40ch; margin-inline: auto; }
.ws-lh-wordmark .ws-lh-name { font-size: calc(1.1rem * var(--b-scale, 1)); }
@container ws-page (min-width: 600px) { .ws-lh-name { font-size: calc(1.7rem * var(--b-scale, 1)); } }

.ws-lh-left { display: flex; align-items: center; gap: 16px; text-align: start; }
.ws-lh-left .ws-lh-tag { margin-inline: 0; }
.ws-s-align-start .ws-lh-centered { justify-items: start; text-align: start; }
.ws-s-align-start .ws-lh-centered .ws-lh-tag { margin-inline: 0; }

.ws-lh-banner { justify-items: start; text-align: start; gap: 0; }
.ws-lh-cover { width: 100%; aspect-ratio: 2.4 / 1; overflow: hidden; border-radius: var(--b-radius, calc(var(--site-radius) + 10px)); box-shadow: var(--site-shadow-md); }
@container ws-page (min-width: 600px) { .ws-lh-cover { aspect-ratio: 3.2 / 1; } }
.ws-lh-cover-ph { display: block; width: 100%; height: 100%;
  background: radial-gradient(60% 90% at 12% 110%, color-mix(in oklab, var(--site-accent) 70%, transparent), transparent 70%),
    radial-gradient(50% 80% at 90% 0%, color-mix(in oklab, var(--site-accent) 45%, var(--site-surface)), transparent 70%),
    linear-gradient(135deg, color-mix(in oklab, var(--site-accent) 35%, var(--site-surface)), color-mix(in oklab, var(--site-accent) 80%, var(--site-text))); }
.ws-lh-banner .ws-lh-mark { margin-top: calc(var(--lh) * -.5); margin-inline-start: 18px; box-shadow: 0 0 0 4px var(--site-bg-base, var(--site-surface)), 0 14px 30px -18px rgb(0 0 0 / .5); }
.ws-lh-banner.ws-lh-wordmark .ws-lh-mark { margin-top: 14px; box-shadow: none; }
.ws-lh-banner .ws-lh-text { padding: 12px 6px 0; }
.ws-lh-banner .ws-lh-tag { margin-inline: 0; }
.ws-s-align-center .ws-lh-banner { justify-items: center; text-align: center; }
.ws-s-align-center .ws-lh-banner .ws-lh-mark { margin-inline-start: 0; }

/* css/site/blocks/loom.css */
/* Loom and Twitch (B3 · U3): player and card. The same rules as twitch.css, so each block brings its own part. */
.ve { margin: 0; overflow: hidden; border-radius: var(--b-radius, calc(var(--site-radius) + 2px)); text-align: start; }
.ve-frame { position: relative; width: 100%; background: var(--site-ink-dark, var(--site-text)); }
.ve-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ve-poster { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--site-on-media, #fff); background: radial-gradient(120% 90% at 20% 10%, color-mix(in oklab, var(--ve-brand) 70%, transparent), transparent 60%), linear-gradient(135deg, color-mix(in oklab, var(--ve-brand) 55%, var(--site-ink-dark, var(--site-text))), var(--site-ink-dark, var(--site-text))); }
.ve-play { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: rgb(255 255 255 / .16); backdrop-filter: blur(6px); box-shadow: 0 10px 30px -10px rgb(0 0 0 / .5); color: var(--site-on-media, #fff); }
.ve-play svg { width: 24px; height: 24px; margin-inline-start: 3px; }
.ve-brand { font-weight: 800; letter-spacing: .02em; opacity: .9; }
.ve-cap { display: grid; gap: 2px; padding: 12px 16px 14px; }
.ve-cap b { font-size: 15px; letter-spacing: -0.01em; }
.ve-cap span { color: var(--site-muted); font-size: 13.5px; }
.ve-twitch { --ve-brand: hsl(264 100% 64%); }
.ve-loom { --ve-brand: hsl(252 90% 63%); }
.ve-card { display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 10px; border-radius: var(--b-radius, calc(var(--site-radius) + 2px)); align-items: center; text-align: start; }
.ve-card-media { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: calc(var(--site-radius) - 2px); overflow: hidden; background: linear-gradient(135deg, var(--ve-brand), color-mix(in oklab, var(--ve-brand) 40%, var(--site-ink-dark, var(--site-text)))); }
.ve-card-media .ve-play { width: 44px; height: 44px; }
.ve-card-media .ve-play svg { width: 18px; height: 18px; }
.ve-fact { position: absolute; inset-block-end: 6px; inset-inline-start: 6px; display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; color: var(--site-on-media, #fff); background: rgb(0 0 0 / .45); }
.ve-dot { width: 6px; height: 6px; border-radius: 50%; background: hsl(0 85% 60%); }
.ve-card-body { display: grid; gap: 3px; min-width: 0; }
.ve-brand-row { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--ve-brand); }
.ve-brand-row svg { width: 14px !important; height: 14px !important; }
.ve-card-title { font-size: 15.5px; letter-spacing: -0.01em; line-height: 1.3; }
.ve-card-text { color: var(--site-muted); font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ve-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-weight: 750; font-size: 13.5px; }
.ve-cta svg { width: 15px; height: 15px; }
.ve-card:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 55%, transparent); outline-offset: 2px; }
@container ws-page (min-width: 600px) { .ve-card { grid-template-columns: 148px 1fr; } }

/* css/site/blocks/lottie_gif.css */
/* Animated sticker / GIF (B4 · Q4). Inline sits in the flow; sticker takes no room and floats over its neighbours. */
.lgx { margin: 0; }
.lgx-img { display: block; width: 100%; height: auto; }
.lgx-inline { display: grid; gap: 8px; justify-items: center; }
.lgx-inline .lgx-art { display: block; width: 100%; overflow: hidden; border-radius: var(--site-radius); }
.lgx-inline.lgx-s .lgx-art { max-width: 160px; }
.lgx-inline.lgx-m .lgx-art { max-width: 300px; }
.lgx-inline.lgx-l .lgx-art { max-width: 100%; }
.lgx-al-start { justify-items: start; } .lgx-al-end { justify-items: end; }
.lgx-cap { color: var(--site-muted); font-size: 13.5px; font-weight: 600; text-align: center; text-wrap: balance; }
.lgx-al-start .lgx-cap { text-align: start; } .lgx-al-end .lgx-cap { text-align: end; }
.lgx-calm { display: none; align-items: center; gap: 8px; padding: 12px 16px; border-radius: var(--site-radius); font-size: 14px; color: var(--site-muted);
  background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.lgx-calm svg { width: 16px; height: 16px; color: var(--site-accent); }
/* The sticker: a zero-height anchor; the art hangs off it over the block above (top corners) or below (bottom corners). */
.ws-block-lottie-gif:has(.lgx-sticker) { position: relative; z-index: 3; height: 0; margin-block: calc(var(--site-gap, 12px) / -2); pointer-events: none; }
.lgx-sticker { position: absolute; inset-inline: 0; height: 0; pointer-events: none; }
.lgx-sticker .lgx-art, .lgx-sticker .lgx-demo { position: absolute; width: var(--lgx-w, 110px); transform: rotate(var(--lgx-tilt, -8deg));
  filter: drop-shadow(0 10px 14px color-mix(in oklab, var(--site-ink-dark) 28%, transparent)); }
.lgx-sticker.lgx-s { --lgx-w: 72px; } .lgx-sticker.lgx-m { --lgx-w: 110px; } .lgx-sticker.lgx-l { --lgx-w: 156px; }
.lgx-at-top-end .lgx-art, .lgx-at-top-end .lgx-demo { inset-inline-end: -6px; inset-block-end: -18px; }
.lgx-at-top-start .lgx-art, .lgx-at-top-start .lgx-demo { inset-inline-start: -6px; inset-block-end: -18px; }
.lgx-at-bottom-end .lgx-art, .lgx-at-bottom-end .lgx-demo { inset-inline-end: -6px; inset-block-start: -18px; }
.lgx-at-bottom-start .lgx-art, .lgx-at-bottom-start .lgx-demo { inset-inline-start: -6px; inset-block-start: -18px; }
.lgx-sticker .lgx-art { animation: lgx-bob 4.5s var(--site-ease, ease) infinite; }
@keyframes lgx-bob { 50% { translate: 0 -4px; } }
/* Without an image (builder and library previews): a drawn sparkle. */
.lgx-demo { display: grid; place-items: center; aspect-ratio: 1; width: min(100%, 200px); border-radius: 30%; color: var(--site-accent-text);
  background: conic-gradient(from 210deg, var(--site-accent), color-mix(in oklab, var(--site-accent) 55%, var(--site-ink-light)), var(--site-accent)); }
.lgx-demo span { display: grid; place-items: center; width: 52%; aspect-ratio: 1; }
.lgx-demo svg { width: 100%; height: 100%; }
.lgx-inline .lgx-demo { width: 140px; }
/* Builder: the sticker still shows where it hangs. */
.ws-mode-canvas .ws-block-lottie-gif:has(.lgx-sticker) { height: 28px; margin-block: 0; outline: 1px dashed color-mix(in oklab, var(--site-text) 20%, transparent); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .lgx-sticker .lgx-art { animation: none; }
  .lgx-art.is-calm-hide { display: none; }
  .lgx-inline .lgx-calm { display: inline-flex; }
}

/* css/site/blocks/map.css */
/* Map / location: map, card, split, compact. The placeholder (builder, or no coordinates) is drawn with tokens only. */
.mp { overflow: hidden; display: grid; text-align: start; }
.mp-map { position: relative; aspect-ratio: 16 / 10; min-height: 200px; background: color-mix(in oklab, var(--site-accent) 8%, var(--site-surface)); }
.mp-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.mp-ph { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; }
.mp-ph-grid { position: absolute; inset: 0; background: linear-gradient(color-mix(in oklab, var(--site-text) 6%, transparent) 1px, transparent 1px) 0 0 / 28px 28px,
  linear-gradient(90deg, color-mix(in oklab, var(--site-text) 6%, transparent) 1px, transparent 1px) 0 0 / 28px 28px; }
.mp-ph-road { position: absolute; background: color-mix(in oklab, var(--site-surface) 92%, var(--site-text)); border-radius: 6px; box-shadow: 0 0 0 1px color-mix(in oklab, var(--site-text) 8%, transparent); }
.mp-ph-r1 { inset-inline: -10%; top: 58%; height: 14px; transform: rotate(-8deg); }
.mp-ph-r2 { inset-block: -10%; inset-inline-start: 34%; width: 12px; transform: rotate(14deg); }
.mp-ph-r3 { inset-inline: 40% -10%; top: 24%; height: 9px; transform: rotate(22deg); }
.mp-ph-pin { position: relative; width: 50px; height: 50px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 16px 28px -12px var(--site-accent); }
.mp-ph-pin svg { transform: rotate(45deg); width: 22px; height: 22px; }
.mp-ph-note { position: absolute; bottom: 12px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--site-surface); color: var(--site-muted); box-shadow: var(--site-shadow-sm); }
.mp-chip { position: absolute; bottom: 12px; inset-inline-start: 12px; max-width: calc(100% - 24px); display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px;
  font-weight: 800; font-size: 13px; background: var(--site-surface); color: var(--site-text); box-shadow: var(--site-shadow-md); pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-chip svg { width: 15px; height: 15px; color: var(--site-accent); flex: none; }
.mp-info { display: grid; gap: 12px; padding: var(--b-pad, 18px 20px 20px); }
.mp-where { display: flex; gap: 12px; align-items: flex-start; }
.mp-pin { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: color-mix(in oklab, var(--site-accent) 15%, transparent); color: var(--site-accent); }
.mp-pin svg { width: 20px; height: 20px; }
.mp-title { margin: 0 0 2px; font-family: var(--site-heading); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }
.mp-address { font-style: normal; display: grid; color: var(--site-muted); font-size: 14px; line-height: 1.45; }
.mp-note { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--site-muted); }
.mp-note svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.mp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mp-btn { flex: 1 1 140px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 0 16px; border-radius: var(--site-btn-radius);
  font-weight: 800; font-size: 14px; border: 1.5px solid color-mix(in oklab, var(--site-text) 14%, transparent); color: var(--site-text); }
.mp-btn.is-main { background: var(--site-accent); color: var(--site-accent-text); border-color: transparent; box-shadow: 0 12px 24px -14px var(--site-accent); }
.mp-btn svg { width: 16px; height: 16px; }
.mp-map-v .mp-map, .mp-map.is-tall { aspect-ratio: 4 / 3; }
.mp-row { display: flex; align-items: center; gap: 12px; min-height: 64px; padding-block: 12px; padding-inline: 14px 12px; text-align: start; }
.mp-row-t { display: grid; gap: 2px; min-width: 0; flex: 1; }
.mp-row-t .ws-t2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container ws-page (min-width: 600px) {
  .mp-split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .mp-split .mp-map { aspect-ratio: auto; min-height: 300px; }
  .mp-split .mp-info { align-content: center; padding: var(--b-pad, 24px); }
  .mp-split .mp-actions { flex-direction: column; }
  .mp-split .mp-btn { flex: none; }
}

/* css/site/blocks/media_banner.css */
/* Media banner: polish on the shared banner, image-card, hero and split for a photo-led promotion. */
.ws-block-media-banner .ws-sv-banner { min-height: 220px; align-items: flex-end; }
.ws-block-media-banner .ws-bn-body { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 12px; padding: var(--b-pad, 22px 20px); }
.ws-block-media-banner .ws-sv-banner .ws-t1 { font-size: calc(1.45rem * var(--b-scale, 1)); letter-spacing: -0.03em; text-wrap: balance; max-width: 22ch; }
.ws-block-media-banner .ws-bn-shade { background: linear-gradient(180deg, transparent 20%, color-mix(in oklab, var(--site-ink-dark) 78%, transparent)); }
.ws-block-media-banner .ws-sv-banner .ws-media { transition: transform 1s var(--site-ease); }
.ws-block-media-banner .ws-sv-banner:hover .ws-media { transform: scale(1.03); }
@container ws-page (min-width: 600px) {
  .ws-block-media-banner .ws-sv-banner { min-height: 260px; align-items: center; }
  .ws-block-media-banner .ws-bn-body { flex-direction: row; align-items: flex-end; justify-content: space-between; padding: var(--b-pad, 30px 32px); }
  .ws-block-media-banner .ws-bn-shade { background: linear-gradient(90deg, color-mix(in oklab, var(--site-ink-dark) 76%, transparent), transparent 75%); }
  [dir="rtl"] .ws-block-media-banner .ws-bn-shade { background: linear-gradient(-90deg, color-mix(in oklab, var(--site-ink-dark) 76%, transparent), transparent 75%); }
}
@media (prefers-reduced-motion: reduce) { .ws-block-media-banner .ws-sv-banner .ws-media { transition: none; } .ws-block-media-banner .ws-sv-banner:hover .ws-media { transform: none; } }

/* css/site/blocks/media_kit.css */
/* Media kit (B4 · Q4): a pitch card for brands — numbers as tiles, demographic bars, rates and a logo cloud. */
.mkx { display: grid; gap: 16px; padding: var(--b-pad, 20px); text-align: start; }
.mkx-head { display: flex; align-items: center; gap: 14px; }
.mkx-photo { flex: none; width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  box-shadow: 0 0 0 3px var(--site-surface), 0 0 0 5px color-mix(in oklab, var(--site-accent) 60%, transparent); }
.mkx-img { width: 100%; height: 100%; object-fit: cover; }
.mkx-initial { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--site-heading); font-weight: 800; font-size: 26px;
  color: var(--site-accent-text); background: linear-gradient(140deg, var(--site-accent), color-mix(in oklab, var(--site-accent) 60%, var(--site-ink-dark))); }
.mkx-who { flex: 1; min-width: 0; display: grid; gap: 2px; }
.mkx-kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--site-accent); }
.mkx-kicker svg { width: 14px; height: 14px; }
.mkx-name { margin: 0; font-family: var(--site-heading); font-size: calc(1.35rem * var(--b-scale, 1)); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }
.mkx-tagline { margin: 0; color: var(--site-muted); font-size: 14px; }
.mkx-about { margin: 0; font-size: 14.5px; line-height: 1.6; }
.mkx-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.mkx-num { display: grid; gap: 2px; padding: 12px 14px; border-radius: calc(var(--site-radius) - 4px); background: color-mix(in oklab, var(--site-text) 5%, transparent); }
.mkx-num dt { order: 2; font-size: 12px; font-weight: 600; color: var(--site-muted); }
.mkx-num dd { order: 1; margin: 0; display: flex; align-items: baseline; gap: 6px; font-family: var(--site-heading); font-size: 1.45rem; font-weight: 800; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums; }
.mkx-num.is-live { background: color-mix(in oklab, var(--site-accent) 12%, transparent); }
.mkx-live { display: inline-flex; align-items: center; gap: 4px; font-family: var(--site-font); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--site-accent); }
.mkx-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mkx-part { display: grid; gap: 10px; padding-block-start: 14px; border-block-start: 1px solid var(--site-line); }
.mkx-h { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--site-muted); }
.mkx-demo { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mkx-demo li { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; font-size: 14px; font-weight: 600; }
.mkx-demo b { font-variant-numeric: tabular-nums; }
.mkx-demo i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--site-accent) var(--share), color-mix(in oklab, var(--site-text) 9%, transparent) var(--share)); }
[dir="rtl"] .mkx-demo i { background: linear-gradient(270deg, var(--site-accent) var(--share), color-mix(in oklab, var(--site-text) 9%, transparent) var(--share)); }
.mkx-rates { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.mkx-rates li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding-block: 8px; border-block-end: 1px dashed var(--site-line); }
.mkx-rates li:last-child { border-block-end: 0; }
.mkx-rates span { display: grid; gap: 2px; min-width: 0; }
.mkx-rates small { color: var(--site-muted); font-size: 12.5px; }
.mkx-rates em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mkx-brands { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.mkx-brands li { display: grid; place-items: center; min-height: 48px; min-width: 96px; padding: 8px 14px; border-radius: calc(var(--site-radius) - 6px);
  border: 1px solid var(--site-line); font-family: var(--site-heading); font-weight: 800; letter-spacing: -0.01em; color: var(--site-muted); }
.mkx-logo { max-height: 30px; width: auto; max-width: 110px; object-fit: contain; filter: grayscale(1); opacity: .8; }
.mkx-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mkx-go { flex: 1 1 200px; }
.mkx-pdf, .mkx-pdf-mini { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: var(--site-btn-radius);
  border: 1px solid color-mix(in oklab, var(--site-text) 18%, transparent); font-weight: 750; text-decoration: none; color: inherit; }
.mkx-pdf svg, .mkx-pdf-mini svg { width: 17px; height: 17px; }
.mkx-pdf-mini { flex: none; width: 46px; padding: 0; border-radius: 50%; }
.mkx-compact { gap: 12px; }
.mkx-compact .mkx-photo { width: 48px; height: 48px; }
.mkx-compact .mkx-name { font-size: 1.1rem; }
.mkx-compact .mkx-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mkx-compact .mkx-num { padding: 8px 10px; }
.mkx-compact .mkx-num dd { font-size: 1.15rem; }
@container ws-page (min-width: 600px) {
  .mkx-full .mkx-nums, .mkx-card .mkx-nums { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
}

/* css/site/blocks/member_count.css */
/* Member avatars: avatars, count, card (the initials themselves are in blocks/join_community, which this block loads). */
.mc { display: grid; gap: 10px; justify-items: var(--b-justify, center); text-align: var(--b-align, center); }
.mc-row { display: flex; align-items: center; justify-content: var(--b-justify, center); gap: 12px; flex-wrap: wrap; }
.mc-line { margin: 0; font-size: 15px; color: var(--site-muted); font-weight: 600; }
.mc-line strong { color: var(--site-text); font-weight: 800; font-variant-numeric: tabular-nums; }
.mc-text { margin: 0; color: var(--site-muted); font-size: 13.5px; line-height: 1.5; max-width: 42ch; }
.mc-big { margin: 0; display: grid; gap: 2px; }
.mc-big strong { font-family: var(--site-heading); font-size: calc(3rem * var(--b-scale, 1)); font-weight: 800; letter-spacing: -0.05em; line-height: .95; font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--site-text), var(--site-accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mc-big span { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--site-muted); }
.mc-card { padding: var(--b-pad, 22px); }
.mc-card .mc-line { font-size: 16px; }
.mc-card .jc-cta { width: 100%; }

/* css/site/blocks/members_only.css */
/* Members-only section (B5), shown to members. */
.ws-members { display: flex; flex-direction: column; gap: var(--ws-gap, 12px); padding: 14px; border-radius: var(--b-radius, calc(var(--site-radius) + 6px));
  border: 1px dashed color-mix(in oklab, var(--site-accent) 45%, transparent); background: color-mix(in oklab, var(--site-accent) 5%, transparent); }
.ws-members-ribbon { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin: 0; padding: 4px 10px; border-radius: 999px;
  background: var(--site-accent); color: var(--site-accent-text); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.ws-members-ribbon svg { width: 13px; height: 13px; }

/* css/site/blocks/messengers.css */
/* Message me: buttons, rows, grid, floating (the page's sticky slot). App colours from blocks/_networks. */
.ws-msg { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ws-msg > li { min-width: 0; display: grid; }
.ws-msg-item { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 56px; padding: 8px 16px 8px 8px; border: 0; font: inherit; text-align: start; cursor: pointer; color: inherit; background: none; width: 100%; }
.ws-msg-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--net, var(--site-accent)); color: var(--net-ink, var(--site-accent-text)); }
.ws-site .ws-msg-ico svg { width: 21px; height: 21px; }
.ws-msg-t { flex: 1; min-width: 0; display: grid; gap: 1px; line-height: 1.3; }
.ws-msg-t b { font-weight: 750; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-msg-t small { font-size: 12.5px; font-weight: 600; color: var(--site-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Buttons: the app's colour, full width. */
.ws-msg-buttons .ws-msg-item { border-radius: var(--site-btn-radius); background: var(--net, var(--site-accent)); color: var(--net-ink, var(--site-accent-text)); min-height: 58px; box-shadow: 0 12px 26px -18px var(--net, var(--site-accent)); }
.ws-msg-buttons .ws-msg-ico { background: color-mix(in oklab, var(--net-ink, #FFFFFF) 18%, transparent); color: inherit; }
.ws-msg-buttons .ws-msg-t { text-align: center; padding-inline-end: 40px; }
.ws-msg-buttons .ws-msg-t small { color: inherit; opacity: .8; }

/* Rows: one surface card per app. */
.ws-msg-rows .ws-msg-item { background: var(--b-bg, var(--site-surface)); border: var(--b-border, 1px solid var(--site-line)); border-radius: var(--b-radius, calc(var(--site-radius) + 4px)); box-shadow: var(--b-shadow, var(--site-shadow-sm)); padding-inline-end: 12px; }
.ws-msg-copy { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: color-mix(in oklab, currentColor 8%, transparent); }
.ws-msg-copy svg { width: 14px; height: 14px; }
.ws-msg-copied { display: none; }
[data-copied] .ws-msg-copy-t { display: none; } [data-copied] .ws-msg-copied { display: inline; }
.ws-msg-item.ws-copied { outline-offset: 2px; }

/* Grid: branded tiles. */
.ws-msg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container ws-page (min-width: 600px) { .ws-msg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ws-msg-grid .ws-msg-item { flex-direction: column; align-items: flex-start; gap: 18px; min-height: 124px; padding: 14px; border-radius: var(--b-radius, calc(var(--site-radius) + 6px));
  background: linear-gradient(160deg, color-mix(in oklab, var(--net, var(--site-accent)) 14%, var(--site-surface)), var(--site-surface) 75%); border: 1px solid color-mix(in oklab, var(--net, var(--site-accent)) 25%, var(--site-line)); box-shadow: var(--site-shadow-sm); }
.ws-msg-grid .ws-msg-t { flex: none; width: 100%; }
.ws-msg-grid .ws-msg-ico { width: 44px; height: 44px; }

/* Floating: a round button in the corner of the screen (inline end), clear of the home bar. */
.ws-sticky > .ws-block-messengers.ws-v-floating { justify-self: end; width: auto; }
.ws-msg-float { position: relative; display: grid; justify-items: end; }
.ws-msg-fab { position: relative; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; border: 0; cursor: pointer; list-style: none; padding: 0;
  background: var(--net, var(--site-accent)); color: var(--net-ink, var(--site-accent-text)); box-shadow: 0 16px 36px -12px rgb(0 0 0 / .45), 0 0 0 4px color-mix(in oklab, var(--net, var(--site-accent)) 22%, transparent);
  transition: transform .2s var(--site-ease); }
.ws-msg-fab::-webkit-details-marker { display: none; }
.ws-msg-fab:hover { transform: scale(1.06); }
.ws-site .ws-msg-fab svg { width: 28px; height: 28px; }
.ws-msg-fab-main { background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 16px 36px -12px rgb(0 0 0 / .45), 0 0 0 4px color-mix(in oklab, var(--site-accent) 22%, transparent); }
.ws-msg-fab-tip { position: absolute; inset-inline-end: calc(100% + 10px); white-space: nowrap; padding: 8px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
  background: var(--site-surface); color: var(--site-text); box-shadow: var(--site-shadow-md); border: 1px solid var(--site-line); pointer-events: none; }
.ws-msg-close { display: none; }
.ws-msg-menu[open] .ws-msg-open { display: none; } .ws-msg-menu[open] .ws-msg-close { display: grid; }
.ws-msg-pop { position: absolute; bottom: calc(100% + 12px); inset-inline-end: 0; list-style: none; margin: 0; padding: 0; display: grid; justify-items: end; gap: 8px; }
.ws-msg-menu[open] .ws-msg-pop li { animation: ws-msg-pop .28s var(--site-ease) both; animation-delay: calc((var(--n, 4) - var(--i, 0)) * 30ms); }
@keyframes ws-msg-pop { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.ws-msg-pill { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 5px 16px 5px 5px; border-radius: 999px; border: 0; font: inherit; cursor: pointer; white-space: nowrap;
  font-size: 14px; font-weight: 700; background: var(--site-surface); color: var(--site-text); box-shadow: 0 12px 28px -12px rgb(0 0 0 / .4); border: 1px solid var(--site-line); }
.ws-msg-pill .ws-msg-ico { width: 38px; height: 38px; }
.ws-site .ws-msg-pill .ws-msg-ico svg { width: 19px; height: 19px; }
.ws-mode-canvas .ws-msg-menu .ws-msg-pop, .ws-is-thumb .ws-msg-menu .ws-msg-pop { position: static; margin-bottom: 10px; }

/* css/site/blocks/newsletter.css */
/* Newsletter + archive (B3 · F3): card, archive, split. The form's fields are the shared capture styles (base.css).
   Layout follows the block's own width (a narrow page column on desktop stays stacked). */
.ws-block-newsletter { container: nl / inline-size; }
.ws-nl { display: grid; gap: 16px; min-width: 0; text-align: start; padding: var(--b-pad, 20px); border-radius: var(--b-radius, calc(var(--site-radius) + 8px)); }
.ws-nl-copy { display: grid; gap: 6px; justify-items: start; }
.ws-nl .ws-card-title { margin: 0; }
.ws-nl .ws-card-text { margin: 0; color: var(--site-muted); }
.ws-nl .ws-capture-form { margin-top: 0; }
.ws-nl-badge { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 4px; color: var(--site-accent-text); background: var(--site-accent);
  box-shadow: 0 12px 26px -14px color-mix(in oklab, var(--site-accent) 90%, transparent); }
.ws-site .ws-nl-badge svg { width: 22px; height: 22px; }
.ws-nl-done { justify-content: flex-start; margin: 0; }

.ws-nl-issues { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--site-line); }
.ws-nl-issues-title { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--site-muted); }
.ws-site .ws-nl-issues-title svg { width: 15px; height: 15px; }
.ws-nl-list { display: grid; margin: 0; padding: 0; list-style: none; }
.ws-nl-issue { display: grid; grid-template-columns: auto minmax(0, 1fr) 18px; align-items: center; gap: 2px 14px; min-height: 48px; padding: 8px 8px; margin-inline: -8px;
  border-radius: 12px; color: inherit; text-decoration: none; transition: background .18s; }
.ws-nl-issue:hover, .ws-nl-issue:focus-visible { background: color-mix(in oklab, var(--site-accent) 9%, transparent); }
.ws-nl-issue:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 55%, transparent); outline-offset: 0; }
.ws-nl-date { grid-row: 1 / span 2; width: 84px; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: var(--site-accent); font-variant-numeric: tabular-nums; }
.ws-nl-subject { font-weight: 700; font-size: 14.5px; line-height: 1.3; overflow-wrap: anywhere; }
.ws-nl-pre { grid-column: 2; color: var(--site-muted); font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ws-nl-go { grid-row: 1 / span 2; grid-column: 3; color: var(--site-muted); }
.ws-site .ws-nl-go svg { width: 16px; height: 16px; }
[dir="rtl"] .ws-nl-go svg { transform: scaleX(-1); }
.ws-nl-hint { margin: 0; padding: 12px 14px; border-radius: 12px; font-size: 13px; color: var(--site-muted); border: 1px dashed color-mix(in oklab, var(--site-text) 22%, transparent); }

/* Archive: the issues lead, with their previews; the form sits in a tinted footer. */
.ws-nl-archive { overflow: hidden; }
.ws-nl-issues.is-big { border-top: 0; padding-top: 0; }
.ws-nl-issues.is-big .ws-nl-list > li + li { border-top: 1px solid var(--site-line); }
.ws-nl-issues.is-big .ws-nl-issue { min-height: 64px; padding-block: 12px; }
.ws-nl-issues.is-big .ws-nl-subject { font-family: var(--site-heading); font-size: calc(1.02rem * var(--b-scale, 1)); letter-spacing: -0.01em; }
.ws-nl-foot { margin: 0 calc(-1 * var(--b-pad, 20px)) calc(-1 * var(--b-pad, 20px)); padding: 16px var(--b-pad, 20px) var(--b-pad, 20px);
  background: color-mix(in oklab, var(--site-accent) 8%, transparent); border-top: 1px solid var(--site-line); }

@container nl (max-width: 420px) {
  .ws-nl .ws-capture-row { flex-direction: column; }
  .ws-nl .ws-capture-row .ws-input { flex: none; width: 100%; }
  .ws-nl .ws-submit { width: 100%; }
  .ws-nl-date { width: auto; grid-row: auto; grid-column: 2; }
  .ws-nl-issue { grid-template-columns: 0 minmax(0, 1fr) 18px; column-gap: 0; }
  .ws-nl-subject { grid-column: 2; }
  .ws-nl-go { grid-row: 1 / span 3; }
}
@container nl (min-width: 680px) {
  .ws-nl { padding: var(--b-pad, 26px); }
  .ws-nl-split:not(.is-solo) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .ws-nl-split .ws-nl-side { display: grid; gap: 16px; }
  .ws-nl-split .ws-nl-issues { border-top: 0; padding-top: 0; padding-inline-start: 26px; border-inline-start: 1px solid var(--site-line); }
  .ws-nl-foot { margin: 0 calc(-1 * var(--b-pad, 26px)) calc(-1 * var(--b-pad, 26px)); padding: 18px var(--b-pad, 26px) var(--b-pad, 26px); }
}
@container nl (max-width: 679.98px) { .ws-nl-split .ws-nl-side { display: grid; gap: 16px; } }
@media (prefers-reduced-motion: reduce) { .ws-nl-issue { transition: none; } }

/* css/site/blocks/open_in_browser.css */
/* Open in browser helper (B4): banner (pinned in the top sticky slot) and pill. Only rendered inside in-app browsers. */
.ws-oib { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ws-oib-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in oklab, var(--site-accent) 16%, transparent); color: var(--site-accent); }
.ws-site .ws-oib-ico svg { width: 19px; height: 19px; }
.ws-oib-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ws-oib-msg { margin: 0; font-size: 14px; font-weight: 650; line-height: 1.35; unicode-bidi: plaintext; }
.ws-oib-steps { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--site-muted); }
.ws-oib-acts { position: relative; flex: none; display: grid; }
.ws-oib-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 750; white-space: nowrap; text-decoration: none; background: var(--site-accent); color: var(--site-accent-text); }
.ws-site .ws-oib-btn svg { width: 16px; height: 16px; }
.ws-oib-btn:focus-visible, .ws-oib-x:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 55%, transparent); outline-offset: 2px; }
.ws-oib-done { display: none; align-items: center; gap: 6px; }
.ws-oib-t { display: inline-flex; align-items: center; gap: 6px; }
.ws-oib-btn[data-copied] .ws-oib-t { display: none; } .ws-oib-btn[data-copied] .ws-oib-done { display: inline-flex; }
/* The address itself, for when copying isn't allowed: visible only after a failed copy, ready to long-press. */
.ws-oib-url { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0; width: min(260px, 70vw); height: 40px; padding: 0 10px; border-radius: 10px; font: inherit; font-size: 13px;
  color: var(--site-text); background: var(--site-surface); border: 1px solid color-mix(in oklab, var(--site-text) 16%, transparent); opacity: 0; pointer-events: none; }
.ws-oib.is-manual .ws-oib-url { position: static; opacity: 1; pointer-events: auto; margin-top: 6px; }
.ws-oib-x { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: inherit; opacity: .7; cursor: pointer; }
.ws-site .ws-oib-x svg { width: 18px; height: 18px; }

/* Banner: a frosted strip pinned to the top. */
.ws-oib-banner { padding: 10px 6px 10px 12px; border-radius: calc(var(--site-radius) + 8px); color: var(--site-text); background: color-mix(in oklab, var(--site-surface) 86%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); box-shadow: 0 16px 36px -18px rgb(0 0 0 / .45); }
.ws-oib-banner.is-manual { flex-wrap: wrap; }
/* Pill: a compact chip in the page. */
.ws-oib-pill { width: fit-content; max-width: 100%; margin-inline: auto; padding: 6px 6px 6px 8px; border-radius: 999px; background: var(--b-bg, var(--site-surface));
  border: var(--b-border, 1px solid color-mix(in oklab, var(--site-text) 10%, transparent)); box-shadow: var(--b-shadow, var(--site-shadow-sm)); }
.ws-oib-pill .ws-oib-ico { border-radius: 50%; width: 34px; height: 34px; }
.ws-oib-pill .ws-oib-msg { font-size: 13px; }
.ws-oib-pill .ws-oib-steps { display: none; }
.ws-oib-pill .ws-oib-btn { min-height: 40px; padding: 0 14px; font-size: 13px; }
@container ws-page (max-width: 420px) {
  .ws-oib-pill { border-radius: calc(var(--site-radius) + 10px); flex-wrap: wrap; padding: 10px; }
  .ws-oib-pill .ws-oib-acts { flex: 1 1 100%; }
}
/* A narrow screen: the message gets the full width, the button its own row. */
.ws-sticky-top:has(> .ws-block-open-in-browser) { container: ws-stop / inline-size; }
@container ws-stop (max-width: 520px) {
  .ws-oib-banner { flex-wrap: wrap; align-items: flex-start; padding: 12px 6px 12px 12px; }
  .ws-oib-banner .ws-oib-copy { flex: 1 1 calc(100% - 110px); padding-top: 2px; }
  .ws-oib-banner .ws-oib-x { order: 2; margin-top: -6px; }
  .ws-oib-banner .ws-oib-acts { order: 3; flex: 1 1 100%; padding-inline-end: 6px; }
  .ws-oib-banner .ws-oib-btn { width: 100%; }
}

/* css/site/blocks/order_lookup.css */
/* Find my order (B4 · Q4): inline is one row on wide pages; card stacks the fields under a badge. */
.olk-fields { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.olk-fields:not(:has(.olk-number)) { grid-template-columns: minmax(0, 1fr) auto; }
.olk-field { display: grid; gap: 5px; min-width: 0; }
.olk-label { font-size: 12.5px; font-weight: 700; color: var(--site-text); }
.olk-label small { font-weight: 500; color: var(--site-muted); }
.olk-in { display: flex; align-items: center; gap: 8px; height: 48px; padding-inline: 12px; border-radius: calc(var(--site-btn-radius) + 2px);
  background: color-mix(in oklab, var(--site-surface) 84%, white); border: 1px solid color-mix(in oklab, var(--site-text) 15%, transparent); }
.ws-dark .olk-in { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .16); }
.olk-in:focus-within { border-color: var(--site-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 22%, transparent); }
.olk-in svg { width: 17px; height: 17px; flex: none; color: var(--site-muted); }
.olk-in input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: inherit; font: inherit; font-size: 15px; }
.olk-in input:focus { outline: none; }
.olk-go { height: 48px; }
.olk-inline { padding-inline: 0; }
.olk-inline .ix-badge { width: 40px; height: 40px; border-radius: 13px; }
.olk-card .olk-fields { grid-template-columns: 1fr; }
.olk-card .olk-go { width: 100%; min-height: 50px; }
@container ws-page (max-width: 560px) {
  .olk-fields, .olk-fields:not(:has(.olk-number)) { grid-template-columns: 1fr; }
  .olk-go { width: 100%; }
}

/* css/site/blocks/page_nav.css */
/* Page menu (B3 · U3): tabs, pills, hamburger, sticky. Jump targets clear a sticky bar (scroll-margin) and the
   scroll is smooth unless the visitor asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) { html:has(.pn) { scroll-behavior: smooth; } }
.ws-site:has(.pn) .ws-block[id] { scroll-margin-top: 76px; }
.pn { width: 100%; }
.pn-track { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
[dir="rtl"] .pn-track { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 24px), transparent); }
.pn-track::-webkit-scrollbar { display: none; }
.pn-link { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-weight: 700; font-size: 14.5px; white-space: nowrap; color: var(--site-muted); transition: color .2s, background .2s, border-color .2s; }
.pn-link:hover, .pn-link[aria-current="true"] { color: var(--site-text); }
.pn-link:focus-visible, .pn-sheet a:focus-visible, .pn-toggle:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 55%, transparent); outline-offset: 2px; }
/* tabs */
.pn-tabs .pn-track { border-block-end: 1px solid var(--site-line); gap: 2px; }
.pn-tabs .pn-link { border-block-end: 2.5px solid transparent; margin-block-end: -1px; }
.pn-tabs .pn-link[aria-current="true"] { border-block-end-color: var(--site-accent); }
/* pills */
.pn-pills .pn-track { flex-wrap: wrap; justify-content: var(--b-justify, center); -webkit-mask-image: none; mask-image: none; overflow: visible; gap: 8px; }
.pn-pills .pn-link { border-radius: 999px; border: 1px solid var(--site-line); background: color-mix(in oklab, var(--site-surface) 72%, transparent); min-height: 40px; }
.pn-pills .pn-link:hover { border-color: color-mix(in oklab, var(--site-text) 30%, transparent); }
.pn-pills .pn-link[aria-current="true"] { background: var(--site-text); color: var(--site-bg-base, var(--site-bg)); border-color: transparent; }
/* sticky: the wrapper sticks to the top of the page (under the notch) */
.ws-mode-public .ws-block-page-nav.ws-v-sticky, .ws-mode-canvas .ws-block-page-nav.ws-v-sticky { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; }
.pn-sticky { padding: 6px; border-radius: 999px; background: color-mix(in oklab, var(--site-bg-base, var(--site-bg)) 78%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border: 1px solid var(--site-line); box-shadow: 0 12px 30px -20px rgb(0 0 0 / .45); }
.pn-sticky .pn-link { border-radius: 999px; min-height: 40px; }
.pn-sticky .pn-link[aria-current="true"] { background: var(--site-accent); color: var(--site-accent-text); }
/* hamburger */
.pn-menu { position: relative; }
.pn-toggle { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; border-radius: var(--b-radius, var(--site-radius)); cursor: pointer; list-style: none; font-weight: 700; }
.pn-toggle::-webkit-details-marker { display: none; }
.pn-toggle-label { flex: 1; }
.pn-burger { display: grid; gap: 4px; width: 18px; }
.pn-burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s, opacity .2s; }
.pn-menu[open] .pn-burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.pn-menu[open] .pn-burger i:nth-child(2) { opacity: 0; }
.pn-menu[open] .pn-burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.pn-count { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; font-size: 12.5px; background: color-mix(in oklab, var(--site-text) 8%, transparent); color: var(--site-muted); }
.pn-sheet { list-style: none; margin: 8px 0 0; padding: 6px; border-radius: var(--b-radius, var(--site-radius)); display: grid; gap: 2px; box-shadow: var(--site-shadow-md, 0 18px 40px -24px rgb(0 0 0 / .45)); }
.pn-sheet a { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border-radius: calc(var(--site-radius) - 4px); font-weight: 600; }
.pn-sheet a:hover, .pn-sheet a[aria-current="true"] { background: color-mix(in oklab, var(--site-accent) 12%, transparent); }
.pn-n { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--site-muted); font-weight: 700; }
.pn-l { flex: 1; }
.pn-go { opacity: .5; width: 16px !important; height: 16px !important; }
.pn-menu[open] .pn-sheet { animation: pn-open .22s cubic-bezier(.2,.8,.2,1); }
@keyframes pn-open { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .pn-menu[open] .pn-sheet { animation: none; } .pn-burger i { transition: none; } }
.ws-block:has(.pn-menu[open]) { z-index: 35; }

/* css/site/blocks/paid_question.css */
/* Ask me (paid) (B4 · Q4): who answers, the price and how soon, and a question box that opens the checkout. */
.pq-head { display: flex; align-items: center; gap: 14px; }
.pq-avatar { position: relative; flex: none; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in oklab, var(--site-accent) 16%, transparent); color: var(--site-accent);
  box-shadow: 0 0 0 3px var(--site-surface), 0 0 0 5px color-mix(in oklab, var(--site-accent) 55%, transparent); }
.pq-avatar svg { width: 26px; height: 26px; }
.pq-avatar .pq-img, .pq-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pq-dot { position: absolute; inset-block-end: 1px; inset-inline-end: 1px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--site-accent); box-shadow: 0 0 0 3px var(--site-surface); }
.pq-ask { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: calc(var(--site-btn-radius) + 4px); text-decoration: none; color: inherit;
  background: color-mix(in oklab, var(--site-surface) 84%, var(--site-ink-light)); border: 1px solid color-mix(in oklab, var(--site-text) 14%, transparent);
  min-height: 58px; transition: border-color .18s, box-shadow .18s; }
.ws-dark .pq-ask { background: color-mix(in oklab, var(--site-ink-light) 6%, transparent); border-color: color-mix(in oklab, var(--site-ink-light) 16%, transparent); }
.pq-ask:hover, .pq-ask:focus-visible { border-color: var(--site-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 20%, transparent); outline: none; }
.pq-ask-ph { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px; color: var(--site-muted); font-size: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pq-ask-ph svg { width: 16px; height: 16px; flex: none; }
.ws-site a.pq-ask .ix-go { color: var(--site-accent-text); }
.pq-form .shop { padding: 0; }
.pq-form .shop-trust { margin-bottom: 0; }
@container ws-page (max-width: 420px) {
  .pq-ask { flex-direction: column; align-items: stretch; padding: 10px; }
  .pq-ask .ix-go { width: 100%; }
}

/* css/site/blocks/pay_link.css */
/* Pay me / invoice: card, amount-picker, button (shared pieces in modules/interact). */
.pay { --b-bg: radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--site-accent) 12%, transparent), transparent 55%), var(--site-surface); }
.pay .ix-top { align-items: flex-start; }
.pay .ix-head { flex: 1; min-width: 0; }
.pay-ref { flex: none; padding: 6px 10px; border-radius: 9px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  background: color-mix(in oklab, var(--site-text) 7%, transparent); color: var(--site-muted); }
.pay-amount { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: calc(var(--site-radius) - 4px);
  background: color-mix(in oklab, var(--site-text) 5%, transparent); border: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent); }
.pay-amount-label { font-size: 13px; font-weight: 700; color: var(--site-muted); }
.pay-amount b { font-family: var(--site-heading); font-size: calc(2rem * var(--b-scale, 1)); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.pay-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.pay-chip { display: grid; place-items: center; min-height: 52px; padding: 8px 10px; border-radius: calc(var(--site-radius) - 4px); text-decoration: none; color: var(--site-text);
  border: 1.5px solid color-mix(in oklab, var(--site-text) 14%, transparent); background: color-mix(in oklab, var(--site-surface) 92%, transparent); transition: border-color .18s, transform .18s var(--site-ease); }
.pay-chip b { font-weight: 800; font-variant-numeric: tabular-nums; }
.pay-chip:hover { border-color: var(--site-accent); transform: translateY(-1px); }
.pay-chip.is-popular { border-color: var(--site-accent); background: color-mix(in oklab, var(--site-accent) 10%, var(--site-surface)); }
.pay-chip-other b { font-weight: 700; font-size: 14px; color: var(--site-muted); }
.pay-chips.is-large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pay-chips.is-large .pay-chip { min-height: 68px; }
.pay-chips.is-large .pay-chip b { font-size: 1.25rem; }
.pay-chips .pay-chip.pay-chip-other b { font-size: 14px; font-weight: 700; color: var(--site-muted); }
@container ws-page (min-width: 600px) { .pay-chips.is-large { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pay-trust { margin: 0; display: flex; gap: 7px; align-items: flex-start; font-size: 12px; line-height: 1.45; color: var(--site-muted); }
.pay-trust svg { width: 15px; height: 15px; flex: none; color: var(--site-accent); }
.pay-btn .ws-button-label { display: grid; gap: 1px; }
.pay-btn-amt { font-size: 12px; font-weight: 700; opacity: .8; }
@media (prefers-reduced-motion: reduce) { .pay-chip { transition: none; } }

/* css/site/blocks/pdf.css */
/* PDF (B3 · U3): viewer (the browser's PDF viewer in a same-origin frame), card and button. */
.pdf-viewer { margin: 0; overflow: hidden; border-radius: var(--b-radius, calc(var(--site-radius) + 2px)); text-align: start; }
.pdf-head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-block-end: 1px solid var(--site-line); }
.pdf-ico { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: color-mix(in oklab, var(--site-accent) 15%, transparent); color: var(--site-accent); }
.pdf-head-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.pdf-head-text b { font-size: 15px; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-head-text span { font-size: 12.5px; color: var(--site-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdf-head-open { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--site-muted); flex: none; }
.pdf-head-open:hover { background: color-mix(in oklab, var(--site-text) 6%, transparent); color: var(--site-text); }
.pdf-frame { position: relative; width: 100%; background: color-mix(in oklab, var(--site-text) 6%, var(--site-surface)); }
.pdf-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pdf-ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; }
.pdf-page { display: grid; align-content: start; gap: 10px; width: min(78%, 380px); aspect-ratio: 1 / 1.33; padding: 28px 24px; border-radius: 6px; background: var(--site-surface); box-shadow: 0 18px 40px -22px rgb(0 0 0 / .45); }
.pdf-page i { display: block; height: 8px; border-radius: 4px; background: color-mix(in oklab, var(--site-text) 10%, transparent); }
.pdf-page i.is-h { height: 14px; width: 60%; margin-bottom: 6px; background: color-mix(in oklab, var(--site-accent) 45%, transparent); }
.pdf-page i.is-short { width: 70%; }
/* card */
.pdf-card { display: flex; gap: 16px; padding: 14px; border-radius: var(--b-radius, calc(var(--site-radius) + 2px)); text-align: start; align-items: center; }
.pdf-doc { position: relative; flex: none; display: grid; align-content: start; gap: 5px; width: 72px; aspect-ratio: 1 / 1.3; padding: 18px 10px 0; border-radius: 6px 14px 6px 6px; background: var(--site-surface); border: 1px solid var(--site-line); box-shadow: 0 10px 22px -16px rgb(0 0 0 / .4); }
[dir="rtl"] .pdf-doc { border-radius: 14px 6px 6px 6px; }
.pdf-doc i { display: block; height: 4px; border-radius: 2px; background: color-mix(in oklab, var(--site-text) 12%, transparent); }
.pdf-doc i:nth-child(3) { width: 70%; }
.pdf-doc b { position: absolute; inset-block-end: 8px; inset-inline-start: 8px; padding: 2px 6px; border-radius: 4px; font-size: 10px; letter-spacing: .06em; background: var(--site-accent); color: var(--site-accent-text); }
.pdf-body { display: grid; gap: 3px; min-width: 0; flex: 1; }
.pdf-title { font-size: 15.5px; letter-spacing: -0.01em; }
.pdf-text { color: var(--site-muted); font-size: 13.5px; line-height: 1.45; }
.pdf-facts { font-size: 12px; font-weight: 700; color: var(--site-muted); letter-spacing: .03em; }
.pdf-actions { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.pdf-open { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--site-accent); color: var(--site-accent-text); font-weight: 750; font-size: 13.5px; }
.pdf-open svg { width: 15px; height: 15px; }
.pdf-dl { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--site-line); color: var(--site-text); }
.pdf-dl svg { width: 16px; height: 16px; }
.pdf-open:focus-visible, .pdf-dl:focus-visible, .pdf-head-open:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 55%, transparent); outline-offset: 2px; }
.pdf-size { display: block; font-size: 11.5px; font-weight: 600; opacity: .75; }

/* css/site/blocks/playlist.css */
/* Track list (B3 · M3): list, rows, cards. Uses the audio player (.ws-ap) from blocks/audio. */
.ws-pl { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; text-align: start; }
.ws-pl-track { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; min-width: 0; }
.ws-pl-track .ws-ap { grid-column: 1 / -1; }
.ws-pl-words { display: grid; gap: 1px; min-width: 0; }
.ws-pl-title { font-weight: 700; font-size: 15px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-pl-artist { font-size: 12.5px; color: var(--site-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-pl-track.is-current .ws-pl-title { color: var(--site-accent); }
.ws-pl .ws-ap-play { width: 40px; height: 40px; }
.ws-pl .ws-ap-track { height: 22px; }
.ws-pl .ws-ap-native { height: 40px; }
@container ws-page (min-width: 600px) {
  .ws-pl-list .ws-pl-track, .ws-pl-rows .ws-pl-track { grid-template-columns: auto minmax(0, 13rem) minmax(0, 1fr); }
  .ws-pl-list .ws-pl-track .ws-ap, .ws-pl-rows .ws-pl-track .ws-ap { grid-column: auto; }
}

/* List: numbered tracks inside one surface, hairlines between. */
.ws-pl-list { gap: 0; padding: 6px var(--b-pad, 14px); border-radius: var(--b-radius, calc(var(--site-radius) + 6px)); }
.ws-pl-list .ws-pl-track { padding: 10px 0; border-bottom: 1px solid var(--site-line); }
.ws-pl-list .ws-pl-track:last-child { border-bottom: 0; }
.ws-pl-n { width: 26px; text-align: center; font-weight: 800; font-size: 14px; color: var(--site-muted); font-variant-numeric: tabular-nums; }
.ws-pl-track.is-current .ws-pl-n { color: var(--site-accent); }

/* Rows: separate rows with cover art. */
.ws-pl-rows .ws-pl-track { padding: var(--b-pad, 10px 14px 10px 10px); border-radius: var(--b-radius, calc(var(--site-radius) + 4px)); }
.ws-pl-cover { position: relative; display: block; width: 52px; height: 52px; overflow: hidden; border-radius: max(8px, calc(var(--site-radius) - 4px));
  background: linear-gradient(145deg, color-mix(in oklab, var(--site-accent) 72%, var(--site-ink-dark)), var(--site-accent)); }
.ws-pl-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cards: a grid of cover cards, two across on phones. */
.ws-pl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ws-pl-cards .ws-pl-track { grid-template-columns: minmax(0, 1fr); padding: var(--b-pad, 10px); border-radius: var(--b-radius, calc(var(--site-radius) + 6px)); align-content: start; }
.ws-pl-cards .ws-pl-cover { width: 100%; height: auto; aspect-ratio: 1; border-radius: calc(var(--site-radius) + 2px); }
.ws-pl-cards .ws-ap-time { display: none; }
@container ws-page (min-width: 720px) { .ws-pl-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* css/site/blocks/podcast.css */
/* Podcast (B3 · F3): player (latest episode, native audio), episodes (disclosure rows, each with its own player), card. */
.ws-pod { --pod-r: var(--b-radius, max(14px, var(--site-radius))); display: grid; gap: 14px; min-width: 0; text-align: start; padding: var(--b-pad, 16px); border-radius: calc(var(--pod-r) + 4px); }
.ws-pod-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; min-width: 0; }
.ws-pod-cover { position: relative; display: block; width: 112px; aspect-ratio: 1; overflow: hidden; border-radius: var(--pod-r); flex: none;
  background: color-mix(in oklab, var(--site-accent) 18%, var(--site-surface)); box-shadow: 0 16px 34px -18px rgb(0 0 0 / .55); }
.ws-pod-cover img, .ws-pod-cover .ws-media-ph { width: 100%; height: 100%; object-fit: cover; }
.ws-pod-head.is-small .ws-pod-cover { width: 64px; border-radius: calc(var(--pod-r) - 4px); }
.ws-pod-words { display: grid; gap: 4px; min-width: 0; }
.ws-pod-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--site-accent); }
.ws-site .ws-pod-eyebrow svg { width: 14px; height: 14px; }
.ws-pod-eyebrow span { color: var(--site-muted); letter-spacing: .04em; }
.ws-pod-title { margin: 0; font-family: var(--site-heading); font-size: calc(1.18rem * var(--b-scale, 1)); font-weight: 750; letter-spacing: -0.02em; line-height: 1.22; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ws-pod-show { margin: 0; color: var(--site-muted); font-size: 13.5px; font-weight: 600; }
.ws-pod-meta { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--site-muted); font-variant-numeric: tabular-nums; }
.ws-pod-notes { margin: 0; color: var(--site-muted); }
.ws-pod-audio { display: block; width: 100%; height: 48px; border-radius: 999px; color-scheme: light dark; }

/* The builder's still stand-in for the player. */
.ws-pod-mock { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 52px; padding: 4px 14px 4px 4px; border-radius: 999px;
  background: color-mix(in oklab, var(--site-text) 7%, transparent); }
.ws-pod-mock-play { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text); }
.ws-site .ws-pod-mock-play svg { width: 18px; height: 18px; fill: currentColor; stroke: none; margin-inline-start: 2px; }
.ws-pod-mock-bar { height: 4px; border-radius: 4px; background: color-mix(in oklab, var(--site-text) 14%, transparent); overflow: hidden; }
.ws-pod-mock-bar i { display: block; width: 28%; height: 100%; background: var(--site-accent); }
.ws-pod-mock-time { font-size: 12px; font-weight: 700; color: var(--site-muted); font-variant-numeric: tabular-nums; }

.ws-pod-btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: var(--site-btn-radius); font-weight: 700;
  background: var(--site-accent); color: var(--site-accent-text); }
.ws-site .ws-pod-btn svg { width: 18px; height: 18px; }
.ws-pod-apps { display: flex; flex-wrap: wrap; gap: 8px; }
.ws-pod-app { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; font-size: 13.5px; font-weight: 700;
  border: 1px solid color-mix(in oklab, var(--site-text) 14%, transparent); color: inherit; transition: background .18s, transform .18s var(--site-ease); }
.ws-pod-app:hover, .ws-pod-app:focus-visible { background: color-mix(in oklab, var(--site-text) 6%, transparent); transform: translateY(-1px); }
.ws-site .ws-pod-app svg { width: 18px; height: 18px; fill: currentColor; }

/* Episodes */
.ws-pod-list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--site-line); }
.ws-pod-list > li { border-bottom: 1px solid var(--site-line); }
.ws-pod-ep > summary { display: grid; grid-template-columns: 40px minmax(0, 1fr) 24px; align-items: center; gap: 12px; min-height: 56px; padding: 8px 2px; cursor: pointer; list-style: none; }
.ws-pod-ep > summary::-webkit-details-marker { display: none; }
.ws-pod-ep > summary:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 60%, transparent); outline-offset: 2px; border-radius: 10px; }
.ws-pod-ep-ico { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--site-accent); background: color-mix(in oklab, var(--site-accent) 14%, transparent); }
.ws-site .ws-pod-ep-ico svg { width: 16px; height: 16px; fill: currentColor; stroke: none; margin-inline-start: 2px; }
.ws-pod-ep[open] .ws-pod-ep-ico { background: var(--site-accent); color: var(--site-accent-text); }
.ws-pod-ep-ico svg + svg, .ws-pod-ep.is-playing .ws-pod-ep-ico svg:first-child { display: none; }
.ws-pod-ep.is-playing .ws-pod-ep-ico svg + svg { display: block; margin: 0; }
.ws-pod-ep-ico[role="button"] { cursor: pointer; }
.ws-pod-ep-ico[role="button"]:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 60%, transparent); outline-offset: 2px; }
.ws-pod-fallback[hidden], .ws-pod-audio[hidden] { display: none; }
.ws-pod-ep-words { display: grid; gap: 2px; min-width: 0; }
.ws-pod-ep-words strong { font-size: 14.5px; line-height: 1.3; font-weight: 700; overflow-wrap: anywhere; }
.ws-pod-ep-words small { color: var(--site-muted); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ws-pod-ep-chev { color: var(--site-muted); transition: transform .2s var(--site-ease); }
.ws-site .ws-pod-ep-chev svg { width: 18px; height: 18px; }
.ws-pod-ep[open] .ws-pod-ep-chev { transform: rotate(180deg); }
.ws-pod-ep-body { display: grid; gap: 10px; padding: 0 2px 14px calc(40px + 14px); }
.ws-pod-ep-body .ws-tx { margin: 0; color: var(--site-muted); font-size: 14px; }
.ws-pod-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--site-accent); }
.ws-site .ws-pod-link svg { width: 16px; height: 16px; }
.ws-pod-fallback { display: flex; flex-wrap: wrap; align-items: center; column-gap: 14px; row-gap: 4px; }
.ws-pod-fallback-msg { flex-basis: 100%; color: var(--site-muted); font-size: 13.5px; font-weight: 600; }
.ws-pod-retry { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-block: 0; padding-inline: 14px; border: 1px solid color-mix(in oklab, var(--site-accent) 45%, transparent); border-radius: 999px; background: transparent; color: var(--site-accent); font: inherit; font-weight: 700; cursor: pointer; }
.ws-pod-retry:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 60%, transparent); outline-offset: 2px; }
.ws-site .ws-pod-retry svg { width: 16px; height: 16px; }

/* Card */
.ws-pod-card { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; color: inherit; text-decoration: none; }
.ws-pod-card .ws-pod-cover { width: 84px; }
.ws-pod-card .ws-pod-title { font-size: calc(1.02rem * var(--b-scale, 1)); -webkit-line-clamp: 2; }
.ws-pod-go { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text);
  box-shadow: 0 10px 24px -12px color-mix(in oklab, var(--site-accent) 80%, transparent); transition: transform .18s var(--site-ease); }
.ws-site .ws-pod-go svg { width: 18px; height: 18px; fill: currentColor; stroke: none; margin-inline-start: 2px; }
.ws-pod-card:hover .ws-pod-go { transform: scale(1.06); }

@container ws-page (max-width: 420px) {
  .ws-pod-player .ws-pod-cover { width: 88px; }
  .ws-pod-card .ws-pod-cover { width: 64px; }
  .ws-pod-ep-body { padding-inline-start: 2px; }
}
@container ws-page (min-width: 600px) {
  .ws-pod-player .ws-pod-cover { width: 132px; }
  .ws-pod { padding: var(--b-pad, 20px); }
}
@media (prefers-reduced-motion: reduce) { .ws-pod-ep-chev, .ws-pod-go, .ws-pod-app { transition: none; } }

/* css/site/blocks/poll.css */
/* Poll: bars, cards, emoji (shared pieces in modules/interact). Answers are buttons; results fill each answer by its share. */
.pl-kicker { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--site-accent); }
.pl-kicker svg { width: 14px; height: 14px; }
.pl-list { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; list-style: none; }
.pl-opt { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px 16px;
  border-radius: calc(var(--site-radius) - 2px); border: 1px solid color-mix(in oklab, var(--site-text) 14%, transparent);
  background: color-mix(in oklab, var(--site-surface) 92%, transparent); color: inherit; font: inherit; font-size: 15px; font-weight: 650; text-align: start; cursor: pointer;
  transition: border-color .18s, transform .18s var(--site-ease), background .18s; }
button.pl-opt:hover, label.pl-opt:hover { border-color: var(--site-accent); transform: translateY(-1px); }
button.pl-opt:focus-visible, .pl-opt:has(input:focus-visible) { outline: none; box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 25%, transparent); }
.pl-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pl-label { flex: 1; min-width: 0; line-height: 1.3; }
.pl-emoji { flex: none; font-size: 1.35rem; line-height: 1; }
.pl-arrow { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: color-mix(in oklab, var(--site-accent) 12%, transparent); color: var(--site-accent); }
.pl-arrow svg { width: 15px; height: 15px; }
.pl-mark { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; border: 2px solid color-mix(in oklab, var(--site-text) 28%, transparent); color: transparent; }
.pl-mark svg { width: 14px; height: 14px; stroke-width: 3.5; }
.pl-opt:has(input:checked) { border-color: var(--site-accent); background: color-mix(in oklab, var(--site-accent) 10%, var(--site-surface)); }
.pl-opt:has(input:checked) .pl-mark { background: var(--site-accent); border-color: var(--site-accent); color: var(--site-accent-text); }
/* Results: the fill grows to the answer's share. */
.pl-opt.is-result { cursor: default; }
.pl-fill { position: absolute; inset: 0; z-index: -1; transform-origin: 0 50%; transform: scaleX(var(--share, 0)); background: color-mix(in oklab, var(--site-accent) 16%, transparent);
  animation: pl-grow .9s var(--site-ease) both; }
[dir="rtl"] .pl-fill { transform-origin: 100% 50%; }
.pl-opt.is-lead { border-color: color-mix(in oklab, var(--site-accent) 60%, transparent); }
.pl-opt.is-lead .pl-fill { background: color-mix(in oklab, var(--site-accent) 30%, transparent); }
.pl-pct { flex: none; font-variant-numeric: tabular-nums; font-weight: 800; }
@keyframes pl-grow { from { transform: scaleX(0); } }
.pl-foot { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--site-muted); font-weight: 600; }
.pl-thanks { display: inline-flex; align-items: center; gap: 6px; color: var(--site-text); }
.pl-thanks svg { width: 15px; height: 15px; color: var(--site-accent); }
/* Cards: tiles in two columns, the emoji large. */
.pl-v-cards .pl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pl-v-cards .pl-opt { flex-direction: column; align-items: flex-start; justify-content: space-between; min-height: 112px; padding: 14px; gap: 12px; }
.pl-v-cards .pl-emoji { font-size: 2rem; }
.pl-v-cards .pl-arrow { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; }
.pl-v-cards .pl-mark { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; }
.pl-v-cards .pl-fill { transform-origin: 50% 100%; transform: scaleY(var(--share, 0)); animation-name: pl-rise; }
.pl-v-cards .pl-pct { font-size: 1.5rem; letter-spacing: -0.02em; }
@keyframes pl-rise { from { transform: scaleY(0); } }
@container ws-page (min-width: 900px) { .pl-v-cards .pl-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Emoji: big round reactions in a row. */
.pl-v-emoji .ix-head { text-align: center; justify-items: center; }
.pl-v-emoji .pl-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pl-v-emoji .pl-opt { flex-direction: column; justify-content: center; gap: 6px; width: auto; min-width: 64px; flex: 1 1 64px; max-width: 132px; min-height: 104px; padding: 12px 4px;
  border-radius: calc(var(--site-radius) + 6px); text-align: center; }
.pl-v-emoji .pl-opt .pl-emoji { font-size: 2.3rem; transition: transform .2s var(--site-ease); }
.pl-v-emoji button.pl-opt:hover .pl-emoji { transform: scale(1.15) rotate(-6deg); }
.pl-v-emoji .pl-label { flex: none; font-size: 12.5px; font-weight: 700; }
.pl-v-emoji .pl-arrow { display: none; }
.pl-v-emoji .pl-mark { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; width: 18px; height: 18px; }
.pl-v-emoji .pl-fill { transform-origin: 50% 100%; transform: scaleY(var(--share, 0)); animation-name: pl-rise; }
.pl-v-emoji .pl-foot { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .pl-fill { animation: none; } .pl-opt, .pl-v-emoji .pl-opt .pl-emoji { transition: none; } }

/* css/site/blocks/popup.css */
/* Pop-up (B4): modal, slide-in, bar. Public pages keep it hidden in the overlay slot (after the page) until
   site-utility.js opens it (.is-open). The builder and thumbnails show it in place, as an editable card. */
.ws-overlays { position: relative; z-index: 60; }
/* No entrance animation here: its leftover transform would trap the fixed dialog inside the block. */
.ws-overlays .ws-block { animation: none; }
.ws-mode-public .ws-overlays > .ws-block { margin: 0; }
.ws-pop[hidden] { display: none !important; }
.ws-pop-panel { position: relative; color: var(--site-text); background: var(--site-surface); border-radius: calc(var(--site-radius) + 12px); overflow: hidden;
  box-shadow: 0 40px 80px -28px rgb(0 0 0 / .55), 0 0 0 1px color-mix(in oklab, var(--site-text) 8%, transparent); outline: none; }
.ws-pop-x { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--site-text); background: color-mix(in oklab, var(--site-surface) 72%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ws-site .ws-pop-x svg { width: 20px; height: 20px; }
.ws-pop-x:focus-visible, .ws-pop-cta:focus-visible, .ws-pop-no:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 55%, transparent); outline-offset: 2px; }
.ws-pop-media { aspect-ratio: 16 / 9; background: color-mix(in oklab, var(--site-text) 6%, var(--site-surface)); }
.ws-pop-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ws-pop-body { display: grid; gap: 12px; padding: 28px 26px 26px; }
.ws-pop-title { margin: 0; padding-inline-end: 36px; font-family: var(--site-heading-font, inherit); font-size: 24px; line-height: 1.15; letter-spacing: -.01em; color: var(--site-heading, var(--site-text)); text-wrap: balance; }
.ws-pop-media + .ws-pop-body .ws-pop-title { padding-inline-end: 0; }
.ws-pop-text { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--site-muted); unicode-bidi: plaintext; }
.ws-pop-blocks { display: grid; gap: 12px; }
.ws-pop-blocks > .ws-block { margin: 0; }
.ws-pop-actions { display: grid; gap: 6px; margin-top: 4px; }
.ws-pop-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: var(--site-btn-radius); text-decoration: none;
  font-weight: 700; font-size: 15.5px; background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 14px 28px -16px color-mix(in oklab, var(--site-accent) 85%, transparent); }
.ws-site .ws-pop-cta svg { width: 18px; height: 18px; }
.ws-pop-no { min-height: 44px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--site-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Modal: centred over a dimmed, softly blurred page. */
.ws-mode-public .ws-pop-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.ws-pop-backdrop { position: absolute; inset: 0; background: rgb(8 10 12 / .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ws-pop-modal .ws-pop-panel { width: min(100%, 440px); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain; }
.ws-mode-public .ws-pop-modal .ws-pop-backdrop { opacity: 0; transition: opacity .3s ease; }
.ws-mode-public .ws-pop-modal .ws-pop-panel { opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .3s ease, transform .4s var(--site-ease); }
.ws-mode-public .ws-pop-modal.is-open .ws-pop-backdrop { opacity: 1; }
.ws-mode-public .ws-pop-modal.is-open .ws-pop-panel { opacity: 1; transform: none; }

/* Slide-in: a card in the inline-end corner; never covers the whole page. */
.ws-mode-public .ws-pop-slide-in { position: fixed; z-index: 75; inset-inline-end: max(16px, env(safe-area-inset-right, 0px)); inset-block-end: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(380px, calc(100% - 32px)); }
.ws-pop-slide-in .ws-pop-body { padding: 22px 20px 20px; }
.ws-pop-slide-in .ws-pop-title { font-size: 19px; }
.ws-pop-slide-in .ws-pop-text { font-size: 14.5px; }
.ws-pop-slide-in .ws-pop-panel { max-height: min(70dvh, 560px); overflow: auto; }
.ws-mode-public .ws-pop-slide-in .ws-pop-panel { opacity: 0; transform: translateX(calc(24px * var(--dir-sign, 1))); transition: opacity .3s ease, transform .4s var(--site-ease); }
.ws-mode-public .ws-pop-slide-in.is-open .ws-pop-panel { opacity: 1; transform: none; }

/* Bar: a strip along the bottom edge with the message and the button side by side. */
.ws-mode-public .ws-pop-bar { position: fixed; z-index: 75; inset-inline: 0; inset-block-end: 0; padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
.ws-pop-bar .ws-pop-panel { container: popbar / inline-size; width: min(100%, 880px); margin-inline: auto; }
.ws-pop-bar .ws-pop-body { grid-template-columns: minmax(0, 1fr); align-items: center; gap: 4px 18px; padding: 16px 64px 16px 20px; }
.ws-pop-bar .ws-pop-title { font-size: 17px; padding: 0; }
.ws-pop-bar .ws-pop-text { font-size: 14px; }
.ws-pop-bar .ws-pop-actions { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.ws-pop-bar .ws-pop-cta { min-height: 46px; }
.ws-pop-bar .ws-pop-x { inset-block-start: 50%; translate: 0 -50%; }
@container popbar (min-width: 640px) {
  .ws-pop-bar .ws-pop-body { grid-template-columns: minmax(0, 1fr) auto; }
  .ws-pop-bar .ws-pop-actions { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
}
.ws-mode-public .ws-pop-bar .ws-pop-panel { opacity: 0; transform: translateY(24px); transition: opacity .3s ease, transform .4s var(--site-ease); }
.ws-mode-public .ws-pop-bar.is-open .ws-pop-panel { opacity: 1; transform: none; }

/* Builder canvas and thumbnails: in place, labelled with its trigger. */
.ws-mode-canvas .ws-overlays, .ws-is-thumb .ws-overlays { padding: 8px 14px 24px; display: grid; justify-items: center; gap: 14px; }
.ws-mode-canvas .ws-overlays > .ws-block, .ws-is-thumb .ws-overlays > .ws-block { width: min(100%, var(--w-m, 560px)); }
.ws-pop-tag { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--site-muted);
  background: color-mix(in oklab, var(--site-text) 7%, transparent); }
.ws-site .ws-pop-tag svg { width: 14px; height: 14px; }
:is(.ws-mode-canvas, .ws-is-thumb) .ws-pop-backdrop { display: none; }
:is(.ws-mode-canvas, .ws-is-thumb) .ws-pop-panel { width: 100%; }

html.ws-pop-lock, html.ws-pop-lock body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .ws-mode-public .ws-pop .ws-pop-panel, .ws-mode-public .ws-pop .ws-pop-backdrop { transition: none !important; transform: none !important; }
}

/* css/site/blocks/price_list.css */
/* Price list / menu (ADR-0068, W3): rows, grid, menu. */
.ws-pl { display: grid; gap: 12px; min-width: 0; text-align: start; }
.ws-pl-sname { margin: 0 0 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--site-accent); }
.ws-pl-list { display: grid; margin: 0; padding: 0; list-style: none; }
.ws-pl-name { font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; overflow-wrap: anywhere; }
.ws-pl-desc { display: block; margin-top: 2px; color: var(--site-muted); font-size: 13.5px; line-height: 1.45; }
.ws-pl-tag { display: inline-flex; vertical-align: 2px; margin-inline-start: 6px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: color-mix(in oklab, var(--site-accent) 14%, transparent); color: var(--site-accent); }
.ws-pl-price { display: inline-flex; align-items: baseline; gap: 5px; flex: none; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ws-pl-price b { font-weight: 800; font-size: 15px; }
.ws-pl-price small { font-size: 12px; font-weight: 600; color: var(--site-muted); }
.ws-pl-price small.is-alone { font-style: italic; }
.ws-pl-note { margin: 2px 0 0; color: var(--site-muted); font-size: 12.5px; text-align: var(--b-align, center); }

/* Rows */
.ws-pl-rows .ws-pl-section { padding: var(--b-pad, 16px 18px); }
.ws-pl-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--site-line); }
.ws-pl-row:first-child { border-top: 0; padding-top: 6px; }
.ws-pl-row:last-child { padding-bottom: 2px; }
.ws-pl-main { flex: 1; min-width: 0; }
.ws-pl-row .ws-thumb { width: 52px; height: 52px; }

/* Grid */
.ws-pl-grid { gap: 18px; }
.ws-pl-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
@container ws-page (min-width: 1024px) { .ws-pl-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ws-pl-card { display: flex; flex-direction: column; overflow: hidden; }
.ws-pl-card-media { display: block; aspect-ratio: 1; overflow: hidden; background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.ws-pl-card-body { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 12px; }
.ws-pl-card .ws-pl-tag { margin: 0 0 2px; width: fit-content; }
.ws-pl-card .ws-pl-price { margin-top: auto; padding-top: 6px; }
.ws-pl-card .ws-pl-price b { font-size: 16px; color: var(--site-accent); }

/* Menu */
.ws-pl-menu { gap: 22px; padding: var(--b-pad, 26px 22px); }
.ws-pl-mtitle { margin: 0; text-align: center; font-family: var(--site-heading); font-size: calc(1.6rem * var(--b-scale, 1)); font-weight: 700; letter-spacing: -0.02em; }
.ws-pl-mintro { margin: -14px auto 0; max-width: 42ch; text-align: center; color: var(--site-muted); font-size: 14px; }
.ws-heading-serif .ws-pl-mtitle { font-style: italic; font-weight: 400; }
.ws-pl-menu .ws-pl-sname { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; text-align: center; }
.ws-pl-menu .ws-pl-sname::before, .ws-pl-menu .ws-pl-sname::after { content: ""; flex: 1; height: 1px; background: color-mix(in oklab, var(--site-accent) 40%, transparent); }
.ws-pl-menu .ws-pl-list { gap: 14px; }
.ws-pl-line { display: flex; align-items: baseline; gap: 8px; }
.ws-pl-dots { flex: 1; min-width: 16px; border-bottom: 1.5px dotted color-mix(in oklab, var(--site-text) 30%, transparent); transform: translateY(-4px); }
.ws-pl-menu .ws-pl-desc { font-style: italic; }
.ws-pl-menu .ws-pl-note { margin-top: -6px; }
.ws-site .ws-pl-sname { color: var(--site-accent); }
.ws-site :is(.ws-pl-note, .ws-pl-mintro) { color: var(--site-muted); }

/* css/site/blocks/pricing_table.css */
/* Pricing table (ADR-0068, W3): cards, compare, rows. The highlighted plan carries an accent ring and a filled button. */
.ws-pt { --pt-line: color-mix(in oklab, var(--site-text) 10%, transparent); min-width: 0; }
.ws-pt-name { margin: 0; font-family: var(--site-heading); font-size: calc(1.08rem * var(--b-scale, 1)); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.ws-pt-for { margin: 2px 0 0; color: var(--site-muted); font-size: 13.5px; line-height: 1.4; }
.ws-pt-badge { display: inline-flex; align-items: center; gap: 5px; width: fit-content; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
  background: color-mix(in oklab, var(--site-accent) 14%, transparent); color: var(--site-accent); }
.ws-pt-badge svg { width: 13px; height: 13px; }
.ws-pt-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 0; font-variant-numeric: tabular-nums; }
.ws-pt-amount { font-family: var(--site-heading); font-size: calc(2rem * var(--b-scale, 1)); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.ws-pt-per { color: var(--site-muted); font-size: 13.5px; font-weight: 600; }
.ws-pt-was { color: var(--site-muted); font-size: 13.5px; font-weight: 600; }
.ws-pt-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: var(--site-btn-radius); font-weight: 700; font-size: 14.5px;
  border: 1.5px solid color-mix(in oklab, var(--site-text) 18%, transparent); color: inherit; background: transparent; transition: transform .18s var(--site-ease), background .18s, box-shadow .18s; }
.ws-pt-cta svg { width: 16px; height: 16px; transition: transform .18s var(--site-ease); }
.ws-pt-cta:hover { transform: translateY(-1px); background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.ws-pt-cta:hover svg { transform: translateX(calc(3px * var(--dir-sign, 1))); }
.ws-pt-cta.is-primary { background: var(--site-accent); color: var(--site-accent-text); border-color: transparent; box-shadow: 0 12px 26px -14px var(--site-accent); }
.ws-pt-cta.is-primary:hover { background: var(--site-accent); filter: brightness(1.05); }
.ws-pt-note { margin: 10px 0 0; color: var(--site-muted); font-size: 12.5px; text-align: var(--b-align, center); }

/* Cards */
.ws-pt-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: stretch; }
@container ws-page (min-width: 600px) { .ws-pt-cards[data-count="2"], .ws-pt-cards[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ws-pt-cards:is([data-count="3"], [data-count="5"], [data-count="6"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container ws-page (min-width: 1024px) { .ws-pt-cards[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ws-pt-plan { position: relative; display: flex; flex-direction: column; gap: 14px; padding: var(--b-pad, 20px); text-align: start; min-width: 0; }
.ws-pt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ws-pt-titles { min-width: 0; }
.ws-pt-plan .ws-pt-cta { width: 100%; }
.ws-pt-plan.is-hl { border-color: transparent; box-shadow: 0 0 0 2px var(--site-accent), var(--b-shadow, var(--site-shadow-lg)); }
.ws-pt-plan.is-hl .ws-pt-badge { background: var(--site-accent); color: var(--site-accent-text); }
@container ws-page (min-width: 600px) { .ws-pt-cards .ws-pt-plan.is-hl { transform: translateY(-6px); } }
.ws-pt-feats { display: grid; gap: 9px; margin: 2px 0 0; padding: 14px 0 0; list-style: none; border-top: 1px solid var(--pt-line); font-size: 14px; line-height: 1.4; }
.ws-pt-feats li { display: flex; align-items: flex-start; gap: 9px; }
.ws-pt-feats li.is-off { color: var(--site-muted); }
.ws-pt-feats li.is-off > span:last-child { text-decoration: line-through; text-decoration-color: color-mix(in oklab, currentColor 45%, transparent); }
.ws-pt-tick { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--site-accent) 16%, transparent); color: var(--site-accent); }
.ws-pt-tick svg { width: 12px; height: 12px; stroke-width: 3; }
.is-off > .ws-pt-tick, .ws-pt-tick.is-off { background: color-mix(in oklab, var(--site-text) 7%, transparent); color: var(--site-muted); }

/* Rows */
.ws-pt-rows { display: grid; gap: 10px; }
.ws-pt-row { display: grid; gap: 14px; padding: var(--b-pad, 16px 18px); text-align: start; }
.ws-pt-row.is-hl { box-shadow: 0 0 0 2px var(--site-accent), var(--b-shadow, var(--site-shadow-md)); border-color: transparent; }
.ws-pt-row.is-hl .ws-pt-badge { background: var(--site-accent); color: var(--site-accent-text); }
.ws-pt-row-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ws-pt-row-end { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ws-pt-row .ws-pt-amount { font-size: calc(1.5rem * var(--b-scale, 1)); }
.ws-pt-chips { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 12.5px; font-weight: 600; color: var(--site-muted); }
.ws-pt-chips li { display: inline-flex; align-items: center; gap: 4px; }
.ws-pt-chips svg { width: 13px; height: 13px; color: var(--site-accent); stroke-width: 3; }
@container ws-page (min-width: 600px) {
  .ws-pt-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .ws-pt-row-end { flex-direction: column; align-items: flex-end; gap: 8px; }
}

/* Compare */
.ws-pt-compare { padding: 0; overflow: hidden; }
.ws-pt-scroll { overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.ws-pt-scroll:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 60%, transparent); outline-offset: -3px; }
.ws-pt-table { width: 100%; min-width: calc(150px + var(--n, 3) * 128px); border-collapse: separate; border-spacing: 0; font-size: 14px; }
.ws-pt-table th, .ws-pt-table td { padding: 12px 10px; border-bottom: 1px solid var(--pt-line); text-align: center; vertical-align: middle; }
.ws-pt-table tbody tr:last-child > * { border-bottom: 0; }
.ws-pt-table tbody th { position: sticky; inset-inline-start: 0; z-index: 1; text-align: start; font-weight: 600; background: var(--b-bg, var(--site-surface)); min-width: 150px; max-width: 220px; }
.ws-pt-table thead th { vertical-align: bottom; padding-top: 18px; background: color-mix(in oklab, var(--site-text) 3%, transparent); }
.ws-pt-table thead th > * { display: flex; justify-content: center; margin-inline: auto; }
.ws-pt-table thead th > * + * { margin-top: 6px; }
.ws-pt-table thead .ws-pt-corner { position: sticky; inset-inline-start: 0; z-index: 2; background: var(--b-bg, var(--site-surface)); }
.ws-pt-table .ws-pt-amount { font-size: 1.35rem; }
.ws-pt-table .ws-pt-price { justify-content: center; }
.ws-pt-table .ws-pt-cta { min-height: 40px; padding: 0 14px; font-size: 13.5px; width: 100%; }
.ws-pt-table .is-hl { background: color-mix(in oklab, var(--site-accent) 7%, var(--b-bg, var(--site-surface))); }
.ws-pt-table thead th.is-hl { background: color-mix(in oklab, var(--site-accent) 12%, var(--b-bg, var(--site-surface))); box-shadow: inset 0 3px 0 var(--site-accent); }
.ws-pt-table .ws-pt-tick { margin-inline: auto; }
@media (prefers-reduced-motion: reduce) { .ws-pt-cards .ws-pt-plan.is-hl { transform: none; } }
.ws-pt-rows .ws-pt-cta { white-space: nowrap; flex: none; }
.ws-pt-rows .ws-pt-price { flex-wrap: nowrap; }
.ws-pt-table thead th { min-width: 132px; }
/* Beat the shell's `.ws-site p/h3 { color: inherit }`. */
.ws-site :is(.ws-pt-for, .ws-pt-note, .ws-pt-per, .ws-pt-was) { color: var(--site-muted); }
.ws-site a.ws-pt-cta.is-primary { color: var(--site-accent-text); }

/* css/site/blocks/profile.css */
/* Profile block (ADR-0068): classic, cover, hero and left keep their original look; split, card, minimal and sidebar are new. */
.ws-profile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; margin-bottom: 6px; }
.ws-profile-left { flex-direction: row; text-align: start; }
.ws-profile-hero .ws-avatar { width: 120px; height: 120px; }
.ws-profile-hero .ws-name { font-size: 1.7rem; }
.ws-avatar { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: color-mix(in oklab, var(--site-accent) 22%, var(--site-surface)); color: var(--site-text); font-size: 2rem; font-weight: 600; box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-surface) 70%, transparent), 0 10px 30px -10px rgb(0 0 0 / .25); }
.ws-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ws-name { margin: 0; font-family: var(--site-heading); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1.1; display: inline-flex; align-items: center; gap: 6px; }
.ws-font-lora .ws-name { font-family: "Lora", Georgia, serif; font-style: italic; }
.ws-heading-serif .ws-name { font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.ws-heading-serif .ws-name { font-size: 2.1rem; }
.ws-verified { color: var(--site-accent); width: 20px !important; height: 20px !important; }
.ws-bio { margin: 4px 0 0; color: var(--site-muted); max-width: 420px; }
.ws-profile-cover { margin: -44px -18px 6px; gap: 10px; }
.ws-cover { width: 100%; height: 190px; background: var(--site-cover, none); background-size: cover; background-position: center; border-radius: 0 0 34px 34px; position: relative; overflow: hidden; }
.ws-cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 80% 0%, rgb(255 255 255 / .28), transparent 60%); pointer-events: none; }
.ws-light .ws-cover:not([style]) { background: var(--site-cover); }
.ws-profile-cover .ws-avatar { position: relative; z-index: 1; width: 112px; height: 112px; margin-top: -64px; font-size: 2.3rem; font-family: var(--site-heading); font-weight: 700; box-shadow: 0 0 0 5px var(--site-bg-base), 0 18px 40px -16px rgb(0 0 0 / .45); background: linear-gradient(145deg, color-mix(in oklab, var(--site-accent) 70%, #000), var(--site-accent)); color: var(--site-accent-text); }
.ws-profile-cover .ws-profile-text { padding: 0 18px; }
.ws-profile-cover .ws-bio { margin: 6px auto 0; }
.ws-profile-hero .ws-avatar { width: 128px; height: 128px; }
.ws-profile-hero .ws-name { font-size: 2rem; }
@container ws-page (min-width: 720px) { .ws-cover { height: 220px; border-radius: 0 0 40px 40px; } }
/* The cover reaches the page edges only where the page is one column (classic-width shells). */
.ws-shell-modern .ws-profile-cover, .ws-shell-advanced .ws-profile-cover { margin-top: -44px; }
.ws-profile-left .ws-bio { margin-inline: 0; }

/* Hero with a cover: a big cover band behind a large avatar. */
.ws-pv-hero .ws-cover { position: absolute; inset: -44px -18px auto; width: auto; height: 170px; border-radius: 0 0 36px 36px; z-index: 0; }
.ws-pv-hero:has(.ws-cover) { position: relative; padding-top: 70px; }
.ws-pv-hero .ws-avatar, .ws-pv-hero .ws-profile-text { position: relative; z-index: 1; }
.ws-pv-hero:has(.ws-cover) .ws-avatar { box-shadow: 0 0 0 5px var(--site-bg-base), 0 18px 40px -16px rgb(0 0 0 / .45); }

/* Split: a large photo beside the name and bio (stacked on phones). */
.ws-pv-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; text-align: start; align-items: center; }
.ws-pv-photo { position: relative; aspect-ratio: 4 / 3; border-radius: calc(var(--site-radius) + 10px); overflow: hidden; box-shadow: var(--site-shadow-lg); background: color-mix(in oklab, var(--site-accent) 22%, var(--site-surface)); }
.ws-pv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-pv-initial { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--site-heading); font-size: 4rem; font-weight: 700; color: var(--site-accent-text); background: radial-gradient(90% 90% at 100% 0%, rgb(255 255 255 / .3), transparent 55%), linear-gradient(150deg, color-mix(in oklab, var(--site-accent) 85%, #fff), color-mix(in oklab, var(--site-accent) 65%, #000)); }
.ws-pv-split .ws-name { font-size: clamp(1.9rem, 1.4rem + 2.4cqw, 3rem); letter-spacing: -0.04em; }
.ws-pv-split .ws-bio { font-size: 1.05rem; max-width: 46ch; }
@container ws-page (min-width: 600px) { .ws-pv-split { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(20px, 4cqw, 48px); } .ws-pv-photo { aspect-ratio: 4 / 5; max-height: 420px; } }

/* Card: the profile on a surface, with an optional cover strip. */
.ws-pv-card { position: relative; overflow: hidden; padding: var(--b-pad, 24px 20px); }
.ws-pv-card .ws-cover { position: absolute; inset: 0 0 auto; height: 96px; border-radius: 0; }
.ws-pv-card:has(.ws-cover) { padding-top: 56px; }
.ws-pv-card .ws-avatar { position: relative; box-shadow: 0 0 0 4px var(--site-surface), var(--site-shadow-md); }
.ws-card-glass .ws-pv-card:has(.ws-cover) .ws-avatar { box-shadow: 0 0 0 4px var(--site-bg-base), var(--site-shadow-md); }

/* Minimal: name and bio, typographic. */
.ws-pv-minimal { align-items: var(--b-justify, center); gap: 6px; padding-block: 8px; }
.ws-pv-minimal .ws-name { font-size: clamp(2rem, 1.5rem + 3cqw, 3.4rem); letter-spacing: -0.045em; }
.ws-pv-minimal .ws-bio { font-size: 1.05rem; max-width: 52ch; }

/* Sidebar: large avatar; the Creator system pins it beside the content on desktop. */
.ws-pv-sidebar .ws-avatar { width: 120px; height: 120px; }
.ws-pv-sidebar .ws-cover { height: 120px; border-radius: calc(var(--site-radius) + 10px); margin-bottom: -60px; }
.ws-pv-sidebar:has(.ws-cover) .ws-avatar { position: relative; box-shadow: 0 0 0 5px var(--site-bg-base), var(--site-shadow-md); }
.ws-pv-sidebar .ws-name { font-size: 1.9rem; }
@container ws-page (min-width: 1024px) { .ws-pv-sidebar { align-items: flex-start; text-align: start; } .ws-pv-sidebar .ws-bio { margin-inline: 0; } }

/* ---- R24 photo hero headers: photo-fade, photo-blur, photo-tint, arch, cinematic ------------------------------
   The header carries --hp-bg (page colour from the photo, or the owner's) and --hp-pos (focal point). The page behind
   adopts it through a fixed backdrop; text/card tokens follow the WCAG tone class (ws-ph-light / ws-ph-dark). */
.ws-block:has(> .ws-ph), .ws-block:has(.ws-ph) { animation: none; }
.ws-site:has(.ws-ph) { background: transparent; }
.ws-site:has(.ws-ph-light) .ws-site-inner { --site-text: #fff; --site-muted: rgb(255 255 255 / .74); --site-surface: transparent; --site-btn-bg: #fff; --site-btn-text: #111; color: #fff; }
.ws-site:has(.ws-ph-dark) .ws-site-inner { --site-text: #141414; --site-muted: rgb(20 20 20 / .7); --site-surface: transparent; --site-btn-bg: #141414; --site-btn-text: #fff; color: #141414; }
.ws-ph { --hp-h: min(56vh, 520px); position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; margin: -44px -18px 4px; isolation: auto; }
.ws-ph::before { content: ""; position: fixed; inset: 0; z-index: -2; background: var(--hp-bg); pointer-events: none; }
.ws-ph-media { position: relative; width: 100%; height: var(--hp-h); overflow: hidden; background: linear-gradient(160deg, color-mix(in oklab, var(--site-accent) 55%, var(--hp-bg)), var(--hp-bg)); }
.ws-ph-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--hp-pos, 50% 22%); }
.ws-ph-initial { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--site-heading); font-weight: 700; font-size: clamp(5rem, 30cqi, 9rem); color: rgb(255 255 255 / .9); letter-spacing: -0.05em; }
.ws-ph-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 18px; max-width: 100%; }
.ws-ph .ws-ph-name { font-size: clamp(2rem, 9cqi, 2.9rem); line-height: 1.05; letter-spacing: -0.035em; color: var(--site-text); display: inline-block; overflow-wrap: anywhere; text-wrap: balance; }
.ws-ph .ws-ph-name .ws-verified { display: inline-block; vertical-align: -0.08em; margin-inline-start: 6px; width: .72em !important; height: .72em !important; color: #3b82f6; }
.ws-ph .ws-ph-bio { color: var(--site-muted); font-size: 1.05rem; max-width: 34ch; margin: 0; text-wrap: pretty; }
.ws-ph-loc { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0 0; font-weight: 600; color: var(--site-text); }
.ws-ph-loc svg { width: 18px !important; height: 18px !important; }

/* 1 · Photo fade: the photo melts into the page colour; the name sits over the fade. */
.ws-ph-photo-fade .ws-ph-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 42%, color-mix(in oklab, var(--hp-bg) 55%, transparent) 72%, var(--hp-bg) 98%); }
.ws-ph-photo-fade .ws-ph-text { margin-top: -96px; }

/* 2 · Photo blur: a sharp photo card over a blurred, darkened copy of itself behind the whole page; glass cards. */
.ws-ph-backdrop { position: fixed; inset: -40px; z-index: -1; pointer-events: none; }
.ws-ph-backdrop img { width: 100%; height: 100%; object-fit: cover; filter: blur(42px) saturate(1.3) brightness(.55); transform: scale(1.1); }
.ws-ph-photo-blur { margin-top: -20px; }
.ws-ph-photo-blur .ws-ph-media { --hp-h: min(46vh, 420px); width: calc(100% - 36px); border-radius: 28px; box-shadow: 0 30px 60px -24px rgb(0 0 0 / .6); }
.ws-ph-photo-blur .ws-ph-text { margin-top: 18px; }
.ws-site:has(.ws-ph-photo-blur) .ws-site-inner { --site-text: #fff; --site-muted: rgb(255 255 255 / .76); color: #fff; }
.ws-site:has(.ws-ph-photo-blur) :is(.ws-button, .ws-surface, .ws-card) { background: rgb(255 255 255 / .12) !important; border: 1px solid rgb(255 255 255 / .22) !important; color: #fff !important; backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: none !important; }

/* 3 · Photo tint: duotone in the brand colour, editorial oversized name. */
.ws-ph-photo-tint .ws-ph-media { background: var(--site-accent); }
.ws-ph-photo-tint .ws-ph-img { filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; }
.ws-ph-photo-tint .ws-ph-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, var(--hp-bg)); }
.ws-ph-photo-tint .ws-ph-text { margin-top: -64px; }
.ws-ph-photo-tint .ws-ph-name { font-size: clamp(2.2rem, 12cqi, 4.2rem); text-transform: uppercase; letter-spacing: -0.05em; line-height: .92; }

/* 4 · Arch portrait: a tall arched frame with a soft halo of the page colour. */
.ws-ph-arch { margin-top: 0; padding-top: 28px; }
.ws-ph-arch .ws-ph-media { --hp-h: min(48vh, 400px); width: min(68%, 290px); border-radius: 999px 999px 26px 26px; box-shadow: 0 0 0 6px color-mix(in oklab, var(--site-text) 14%, transparent), 0 0 90px 30px color-mix(in oklab, var(--hp-bg) 60%, #fff 40%); }
.ws-ph-arch .ws-ph-text { margin-top: 22px; }
.ws-ph-arch .ws-ph-name { font-family: "Lora", Georgia, serif; font-weight: 500; font-style: italic; }

/* 5 · Cinematic: 16:9 with film grain, name bottom-start over a gradient. */
.ws-ph-cinematic { align-items: stretch; text-align: start; }
.ws-ph-cinematic .ws-ph-media { height: auto; aspect-ratio: 4 / 5; max-height: var(--hp-h); }
.ws-ph-cinematic .ws-ph-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgb(0 0 0 / .25), transparent 30%, transparent 50%, var(--hp-bg)); }
.ws-ph-grain { position: absolute; inset: 0; z-index: 1; opacity: .22; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ws-ph-cinematic .ws-ph-text { align-items: flex-start; margin-top: -120px; padding-inline: 22px; }
.ws-ph-cinematic .ws-ph-name { font-size: clamp(2rem, 10cqi, 3.4rem); text-transform: uppercase; letter-spacing: -0.02em; }

/* Cards below follow the look: outlined transparent cards with pill CTAs (fade / tint / arch / cinematic). */
.ws-site:has(.ws-ph:not(.ws-ph-photo-blur)) :is(.ws-button, .ws-surface, .ws-card) { background: transparent !important; border: 2px solid color-mix(in oklab, var(--site-text) 88%, transparent) !important; color: var(--site-text) !important; box-shadow: none !important; border-radius: 28px; }
.ws-site:has(.ws-ph) .ws-button { min-height: 60px; }
.ws-site:has(.ws-ph) .ws-social-icon, .ws-site:has(.ws-ph) .ws-socials a { background: color-mix(in oklab, var(--site-text) 14%, transparent); color: var(--site-text); }

/* The Weesify chip and share button stay legible over any photo (frosted light chip). */
.ws-page:has(.ws-ph) :is(.wpr-chip, .wpr-corner) { background: rgb(255 255 255 / .9) !important; color: #111 !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 20px -8px rgb(0 0 0 / .45); }

/* Desktop: a premium centred column, the photo framed with soft side fades rather than a stretched phone. */
@container ws-page (min-width: 720px) {
    .ws-ph-photo-fade .ws-ph-media, .ws-ph-photo-tint .ws-ph-media { --hp-h: 560px; -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); }
    .ws-ph-cinematic .ws-ph-media { aspect-ratio: 16 / 9; border-radius: 0 0 28px 28px; }
}
@container ws-page (min-width: 900px) {
    .ws-ph-photo-fade .ws-ph-media, .ws-ph-photo-tint .ws-ph-media { width: calc(100% + 240px); margin-inline: -120px; -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); }
    .ws-ph-photo-fade .ws-ph-text { margin-top: -120px; }
}
@media (prefers-reduced-motion: no-preference) {
    .ws-ph-img { animation: ws-ph-in 1.1s cubic-bezier(.2,.8,.2,1) both; }
    @keyframes ws-ph-in { from { opacity: 0; transform: scale(1.04); } }
}

/* Fix: in the editor canvas and in thumbnails the page-wide backdrops are contained by the preview, never drawn over the editor. */
.device-screen, [class*="thumb"]:has(.ws-ph) { contain: paint; isolation: isolate; }

/* css/site/blocks/profile_video.css */
/* Video profile (B3 · M3): cover-video and circle-video. Shares .ws-avatar, .ws-name and .ws-bio with the profile. */
.ws-pvid { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; margin-bottom: 6px; }
.ws-pvid-media { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(135deg, color-mix(in oklab, var(--site-accent) 75%, var(--site-ink-dark)), var(--site-accent)); }
.ws-pvid-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-pvid-fill { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--site-heading); font-size: 3rem; font-weight: 700; color: var(--site-accent-text); }
.ws-mode-canvas .ws-pvid-el { pointer-events: none; }

/* Cover: the loop as a wide band reaching the page edges, the avatar over its lower edge. */
.ws-pvid-cover-video { margin: -44px -18px 6px; gap: 10px; }
.ws-pvid-cover-video .ws-pvid-media { width: 100%; height: 230px; border-radius: 0 0 34px 34px; }
.ws-pvid-cover-video .ws-pvid-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .18), rgb(0 0 0 / 0) 40%, rgb(0 0 0 / .28)); pointer-events: none; z-index: 1; }
.ws-pvid-cover-video .ws-vid-toggle { top: 54px; bottom: auto; inset-inline-end: 14px; width: 38px; height: 38px; }
.ws-pvid-avatar { position: relative; z-index: 2; width: 112px; height: 112px; margin-top: -66px; font-size: 2.3rem; font-family: var(--site-heading); font-weight: 700;
  box-shadow: 0 0 0 5px var(--site-bg-base), 0 18px 40px -16px rgb(0 0 0 / .45); background: linear-gradient(145deg, color-mix(in oklab, var(--site-accent) 70%, var(--site-ink-dark)), var(--site-accent)); color: var(--site-accent-text); }
.ws-pvid-cover-video .ws-pvid-text { padding: 0 18px; }
.ws-pvid .ws-bio { margin: 6px auto 0; }
@container ws-page (min-width: 720px) { .ws-pvid-cover-video .ws-pvid-media { height: 300px; border-radius: 0 0 40px 40px; } }
.ws-shell-modern .ws-pvid-cover-video, .ws-shell-advanced .ws-pvid-cover-video { margin-top: -44px; }

/* Circle: the loop is the profile picture, in a slowly turning gradient ring (still under reduced motion). */
.ws-pvid-circle-video { padding-top: 6px; }
.ws-pvid-circle-video .ws-pvid-media { width: 148px; height: 148px; border-radius: 50%; overflow: visible; background: none; }
.ws-pvid-circle-video .ws-pvid-media::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, var(--site-accent), color-mix(in oklab, var(--site-accent) 30%, var(--site-surface)), var(--site-accent)); animation: ws-pvid-ring 8s linear infinite; }
.ws-pvid-circle-video .ws-pvid-el, .ws-pvid-circle-video .ws-pvid-fill { border-radius: 50%; box-shadow: 0 0 0 4px var(--site-bg-base), 0 22px 46px -18px rgb(0 0 0 / .5);
  background: linear-gradient(145deg, color-mix(in oklab, var(--site-accent) 70%, var(--site-ink-dark)), var(--site-accent)); }
.ws-pvid-circle-video .ws-vid-toggle { inset-inline-end: -2px; bottom: 2px; width: 40px; height: 40px; box-shadow: 0 0 0 3px var(--site-bg-base); background: var(--site-ink-dark); }
@keyframes ws-pvid-ring { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .ws-pvid-circle-video .ws-pvid-media::before { animation: none; } }
@container ws-page (min-width: 720px) { .ws-pvid-circle-video .ws-pvid-media { width: 168px; height: 168px; } }

/* css/site/blocks/qr_code.css */
/* QR code: card, compact, poster. The code always sits on a light tile so it scans in dark themes too. */
.qr { display: grid; gap: 16px; padding: var(--b-pad, 20px); justify-items: center; text-align: center; }
.qr-code { width: min(220px, 72%); aspect-ratio: 1; padding: 10px; border-radius: 18px; background: var(--site-ink-light); box-shadow: 0 0 0 1px var(--site-line), var(--site-shadow-md); }
.qr-code svg { width: 100%; height: 100%; display: block; }
.qr-body { display: grid; gap: 6px; justify-items: center; min-width: 0; }
.qr-title { margin: 0; font-family: var(--site-heading); font-size: calc(1.2rem * var(--b-scale, 1)); font-weight: 700; letter-spacing: -0.02em; }
.qr-text { margin: 0; color: var(--site-muted); font-size: 14px; line-height: 1.5; max-width: 40ch; }
.qr-url { margin: 2px 0 0; display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 12.5px; font-weight: 700; color: var(--site-muted); }
.qr-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-url svg { width: 14px; height: 14px; flex: none; }
.qr-dl { display: flex; gap: 8px; margin-top: 6px; }
.qr-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 800; font-size: 13px; border: 1.5px solid color-mix(in oklab, var(--site-text) 14%, transparent); }
.qr-btn:hover { background: var(--site-accent); color: var(--site-accent-text); border-color: transparent; }
.qr-btn svg { width: 15px; height: 15px; }
@container ws-page (min-width: 600px) {
  .qr-card { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: start; align-items: center; gap: 22px; }
  .qr-card .qr-code { width: 180px; }
  .qr-card .qr-body { justify-items: start; }
}
.qr-compact { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: start; align-items: center; gap: 14px; padding: var(--b-pad, 12px 14px); }
.qr-compact .qr-code { width: 84px; padding: 5px; border-radius: 12px; box-shadow: 0 0 0 1px var(--site-line); }
.qr-compact .qr-body { justify-items: start; gap: 2px; }
.qr-compact .qr-title { font-size: 1rem; }
.qr-compact .qr-dl { margin-top: 4px; }
.qr-compact .qr-btn { min-height: 36px; padding: 0 11px; }
.qr-poster { padding: var(--b-pad, 28px 22px); gap: 18px; background: var(--b-bg, radial-gradient(90% 60% at 50% 0%, color-mix(in oklab, var(--site-accent) 16%, var(--site-surface)), var(--site-surface) 70%)); }
.qr-poster .qr-title { font-size: calc(1.8rem * var(--b-scale, 1)); letter-spacing: -0.035em; }
.qr-poster .qr-code { width: min(300px, 82%); padding: 16px; border-radius: 24px; box-shadow: 0 0 0 6px color-mix(in oklab, var(--site-accent) 22%, transparent), var(--site-shadow-lg); }

/* css/site/blocks/quiz.css */
/* Quiz → recommendation (B4 · Q4): answer cards that move on when tapped (steps), then a result with the pick. */
.qzx-kicker { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--site-accent); }
.qzx-kicker svg { width: 15px; height: 15px; }
.qzx-form { gap: 14px; }
.qzx-q { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.qzx-card .qzx-q + .qzx-q { padding-block-start: 10px; }
.qzx-nav [hidden], .qzx-form [hidden] { display: none !important; }
.qzx-question { display: flex; align-items: baseline; gap: 10px; padding: 0; margin: 0 0 4px; font-family: var(--site-heading); font-size: calc(1.1rem * var(--b-scale, 1));
  font-weight: 750; letter-spacing: -0.015em; line-height: 1.3; }
.qzx-num { flex: none; width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-family: var(--site-font);
  background: color-mix(in oklab, var(--site-accent) 15%, transparent); color: var(--site-accent); }
.qzx-opts { display: grid; gap: 8px; }
.qzx-steps .qzx-opts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.qzx-opt { position: relative; display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 10px 14px; border-radius: calc(var(--site-radius) - 4px); cursor: pointer;
  border: 1px solid color-mix(in oklab, var(--site-text) 14%, transparent); background: color-mix(in oklab, var(--site-surface) 90%, transparent);
  font-weight: 650; transition: border-color .15s, background .15s, transform .15s; }
.qzx-opt:hover { border-color: color-mix(in oklab, var(--site-accent) 60%, transparent); transform: translateY(-1px); }
.qzx-opt input { position: absolute; opacity: 0; pointer-events: none; }
.qzx-mark { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid color-mix(in oklab, var(--site-text) 30%, transparent); }
.qzx-opt:has(input:checked) { border-color: var(--site-accent); background: color-mix(in oklab, var(--site-accent) 10%, var(--site-surface)); }
.qzx-opt:has(input:checked) .qzx-mark { border-color: var(--site-accent); background: var(--site-accent); box-shadow: inset 0 0 0 3px var(--site-surface); }
.qzx-opt:has(input:focus-visible) { box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 25%, transparent); }
.qzx-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qzx-nav .ix-go { margin-inline-start: auto; }
.qzx-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 0; background: none; color: var(--site-muted); font: inherit; font-weight: 700; cursor: pointer; }
.qzx-back svg, .qzx-nav svg { width: 16px; height: 16px; }
/* With steps running, the last question's submit replaces Next; tapping an answer moves on, so Next can stay quiet. */
.qzx-form.wf-js .wf-next { background: transparent; color: var(--site-accent); box-shadow: none; }
.qzx-result { display: grid; gap: 12px; }
.qzx-pick { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: var(--site-radius); text-decoration: none; color: inherit;
  background: color-mix(in oklab, var(--site-accent) 8%, var(--site-surface)); border: 1px solid color-mix(in oklab, var(--site-accent) 30%, transparent); }
.qzx-pick-media { flex: none; width: 108px; aspect-ratio: 1; border-radius: calc(var(--site-radius) - 4px); overflow: hidden; }
.qzx-pick-img { width: 100%; height: 100%; object-fit: cover; }
.qzx-pick-body { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.qzx-pick-body strong { font-size: 1.05rem; }
.qzx-pick-body small { color: var(--site-muted); font-weight: 700; }
.ws-site a.qzx-pick .ix-go { color: var(--site-accent-text); min-height: 42px; }
.qzx-retake { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--site-muted); font-weight: 700; font-size: 14px; text-decoration: none; }
.qzx-retake svg { width: 15px; height: 15px; }
@media (prefers-reduced-motion: reduce) { .qzx-opt { transition: none; } .qzx-opt:hover { transform: none; } }
.qzx-pick.is-plain { padding: 0; background: none; border: 0; }

/* css/site/blocks/quote.css */
/* Quote: card (the classic look), plain, large, pull, minimal. */
.ws-quote { margin: 0; padding: 22px 22px 20px; border-radius: calc(var(--site-radius) + 6px); position: relative; }
.ws-quote.ws-surface { border-radius: var(--b-radius, calc(var(--site-radius) + 6px)); box-shadow: var(--b-shadow, none); padding: var(--b-pad, 22px 22px 20px); }
.ws-quote-mark { width: 30px !important; height: 30px !important; color: var(--site-accent); margin-bottom: 6px; }
.ws-quote blockquote { margin: 0; font-family: var(--site-heading); font-size: 1.15rem; font-weight: 600; line-height: 1.4; letter-spacing: -0.015em; }
.ws-heading-serif .ws-quote blockquote { font-style: italic; font-weight: 400; font-size: 1.35rem; }
.ws-quote figcaption { margin-top: 12px; font-size: 13px; color: var(--site-muted); display: flex; align-items: center; gap: 10px; justify-content: var(--b-justify, flex-start); }
.ws-quote figcaption b { color: var(--site-text); }
.ws-q-avatar { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: none; }
.ws-qv-plain { padding: 8px 4px; text-align: var(--b-align, center); }
.ws-qv-plain figcaption { justify-content: var(--b-justify, center); }
.ws-qv-large { padding: 12px 4px; text-align: var(--b-align, center); }
.ws-qv-large .ws-quote-mark { width: 44px !important; height: 44px !important; margin-inline: auto; display: block; }
.ws-qv-large blockquote { font-size: clamp(1.4rem, 1.1rem + 1.8cqw, 2.1rem); line-height: 1.25; letter-spacing: -0.03em; }
.ws-heading-serif .ws-qv-large blockquote { font-size: clamp(1.6rem, 1.2rem + 2cqw, 2.4rem); }
.ws-qv-large figcaption { justify-content: var(--b-justify, center); font-size: 14px; }
.ws-qv-pull { padding: 6px 0 6px 20px; border-inline-start: 3px solid var(--site-accent); border-radius: 0; text-align: start; }
.ws-qv-pull blockquote { font-size: 1.35rem; line-height: 1.35; }
.ws-qv-minimal { padding: 4px 0; text-align: var(--b-align, center); }
.ws-qv-minimal blockquote { font-family: var(--site-font); font-weight: 500; font-size: 1.05rem; color: var(--site-text); }
.ws-qv-minimal blockquote::before { content: "“"; } .ws-qv-minimal blockquote::after { content: "”"; }
.ws-qv-minimal figcaption { justify-content: var(--b-justify, center); }

/* css/site/blocks/rating_summary.css */
/* Rating summary (B3 · U3): stars, bars, badge. The stars and bars styles come with the reviews part. */
.rsm { display: grid; gap: 18px; text-align: center; }
.rsm-stars, .rsm-bars { padding: 22px; border-radius: var(--b-radius, calc(var(--site-radius) + 4px)); }
.rsm-score { display: grid; justify-items: center; gap: 6px; }
.rsm-title { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--site-muted); }
.rsm-big { font-size: 3.4rem; line-height: 1; letter-spacing: -0.05em; font-weight: 800; }
.rsm-big span { font-size: .38em; letter-spacing: 0; color: var(--site-muted); font-weight: 600; margin-inline-start: 2px; }
.rsm-count { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--site-muted); }
.rsm-count svg { width: 16px; height: 16px; color: var(--site-accent); }
.rsm-bar-l { min-width: 5.5em; text-align: start; }
.rsm-bar-n { min-width: 4ch; text-align: end; }
.rsm-badge { justify-items: var(--b-justify, center); }
.rsm-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; font-size: 14px; box-shadow: var(--site-shadow-sm, none); }
.rsm-star { color: var(--site-star, hsl(42 96% 52%)); font-size: 18px; line-height: 1; }
.rsm-sep { width: 1px; height: 16px; background: var(--site-line); }
.rsm-pill-count { color: var(--site-muted); font-weight: 600; }
.rsm-check { display: grid; color: var(--site-accent); }
.rsm-check svg { width: 16px; height: 16px; }
@container ws-page (min-width: 600px) {
  .rsm-bars { grid-template-columns: minmax(160px, .8fr) 1.6fr; align-items: center; text-align: start; padding: 24px 28px; }
}

/* css/site/blocks/referral.css */
/* Invite a friend (B4 · Q4): sign up for a personal link, then copy and share it; an optional leaderboard. */
.rfx-pixel { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.rfx-invited { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12.5px; font-weight: 800; color: var(--site-accent); }
.rfx-invited svg { width: 14px; height: 14px; }
.rfx-reward { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 14px; border-radius: calc(var(--site-radius) - 4px); font-weight: 700; font-size: 14px;
  background: color-mix(in oklab, var(--site-accent) 12%, transparent); border: 1px dashed color-mix(in oklab, var(--site-accent) 50%, transparent); }
.rfx-reward svg { width: 18px; height: 18px; flex: none; color: var(--site-accent); }
.rfx-fields { display: grid; gap: 8px; }
.rfx-in { height: 48px; padding: 0 14px; border-radius: calc(var(--site-btn-radius) + 2px); font: inherit; font-size: 15px; color: inherit;
  background: color-mix(in oklab, var(--site-surface) 84%, var(--site-ink-light)); border: 1px solid color-mix(in oklab, var(--site-text) 14%, transparent); }
.ws-dark .rfx-in { background: color-mix(in oklab, var(--site-ink-light) 6%, transparent); border-color: color-mix(in oklab, var(--site-ink-light) 16%, transparent); }
.rfx-in:focus { outline: none; border-color: var(--site-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 22%, transparent); }
.rfx-mine { display: grid; gap: 10px; }
.rfx-label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--site-muted); }
.rfx-label svg { width: 15px; height: 15px; color: var(--site-accent); }
.rfx-link { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 14px; border-radius: calc(var(--site-btn-radius) + 4px);
  border: 1px solid var(--site-accent); background: color-mix(in oklab, var(--site-accent) 7%, var(--site-surface)); }
.rfx-link code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; user-select: all; direction: ltr; }
.rfx-share { display: flex; flex-wrap: wrap; gap: 8px; }
.rfx-share a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none; color: inherit;
  border: 1px solid color-mix(in oklab, var(--site-text) 16%, transparent); }
.rfx-board { display: grid; gap: 8px; padding-block-start: 12px; border-block-start: 1px solid var(--site-line); }
.rfx-leaders { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rfx-leaders li { display: flex; align-items: center; gap: 10px; min-height: 38px; font-size: 14px; }
.rfx-rank { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12px; background: color-mix(in oklab, var(--site-text) 8%, transparent); }
.rfx-leaders li:first-child .rfx-rank { background: var(--site-accent); color: var(--site-accent-text); }
.rfx-who { flex: 1; min-width: 0; font-weight: 650; }
.rfx-leaders b { color: var(--site-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.rfx-banner { padding: var(--b-pad, 18px 20px); border-radius: var(--site-radius); color: var(--site-accent-text);
  background: linear-gradient(120deg, var(--site-accent), color-mix(in oklab, var(--site-accent) 70%, var(--site-ink-dark))); }
.rfx-banner .ix-text, .rfx-banner .rfx-label, .rfx-banner .rfx-invited, .rfx-banner .ix-consent, .rfx-banner .ix-fine, .rfx-banner .rfx-leaders b { color: color-mix(in oklab, var(--site-accent-text) 82%, transparent); }
.rfx-banner .ix-badge { background: var(--site-accent-text); color: var(--site-accent); }
.rfx-banner .ix-go { background: var(--site-accent-text); color: var(--site-accent); box-shadow: none; }
.rfx-banner .rfx-reward { background: color-mix(in oklab, var(--site-accent-text) 14%, transparent); border-color: color-mix(in oklab, var(--site-accent-text) 45%, transparent); }
.rfx-banner .rfx-reward svg, .rfx-banner .ix-fine svg, .rfx-banner .rfx-label svg { color: currentColor; }
.rfx-banner .ix-row { background: var(--site-surface); color: var(--site-text); }
.rfx-banner .rfx-in { background: var(--site-surface); color: var(--site-text); }
.rfx-banner .rfx-link { background: var(--site-surface); color: var(--site-text); border-color: transparent; }
.rfx-banner .rfx-share a { border-color: color-mix(in oklab, var(--site-accent-text) 40%, transparent); }
.ws-site .rfx-banner .rfx-share a { color: var(--site-accent-text); }
.rfx-banner .rfx-board { border-color: color-mix(in oklab, var(--site-accent-text) 25%, transparent); }
.rfx-banner .rfx-rank { background: color-mix(in oklab, var(--site-accent-text) 18%, transparent); }
.rfx-banner .rfx-leaders li:first-child .rfx-rank { background: var(--site-accent-text); color: var(--site-accent); }
@container ws-page (max-width: 420px) { .rfx-link { flex-wrap: wrap; padding: 8px; } .rfx-link .ix-go { width: 100%; } }
.rfx > *, .rfx-mine > * { min-width: 0; }

/* css/site/blocks/release.css */
/* New release (B3 · M3): featured, card, split. Countdown digits come from blocks/countdown; the player from blocks/audio. */
.ws-rel { display: grid; gap: 16px; min-width: 0; text-align: start; padding: var(--b-pad, 14px); border-radius: var(--b-radius, calc(var(--site-radius) + 8px)); overflow: hidden; }
.ws-rel-art { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: calc(var(--site-radius) + 2px); box-shadow: 0 24px 50px -24px rgb(0 0 0 / .6);
  background: linear-gradient(145deg, color-mix(in oklab, var(--site-accent) 72%, var(--site-ink-dark)), var(--site-accent)); }
.ws-rel-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-rel-flag { position: absolute; inset-inline-start: 10px; bottom: 10px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .03em;
  background: rgb(0 0 0 / .6); color: var(--site-on-media, #FFFFFF); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ws-rel-flag.is-out { background: var(--site-accent); color: var(--site-accent-text); }
.ws-rel-body { display: grid; gap: 10px; min-width: 0; align-content: start; }
.ws-site .ws-rel-kind { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--site-accent); }
.ws-rel-title { margin: 0; font-family: var(--site-heading); font-size: calc(1.7rem * var(--b-scale, 1)); font-weight: 800; letter-spacing: -0.035em; line-height: 1.05; text-wrap: balance; overflow-wrap: anywhere; }
.ws-site .ws-rel-text { margin: 0; color: var(--site-muted); font-size: 14.5px; line-height: 1.5; }
.ws-rel-cd .ws-countdown-grid { margin-top: 2px; }
.ws-rel-cd .ws-countdown-grid div { text-align: center; }
.ws-rel-cd .ws-countdown-ended { margin: 0; font-weight: 800; color: var(--site-accent); }
.ws-site .ws-rel-presave { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 22px; border-radius: var(--site-btn-radius);
  background: var(--site-btn-bg, var(--site-accent)); color: var(--site-btn-text, var(--site-accent-text)); font-weight: 800; font-size: 15.5px; box-shadow: 0 14px 28px -14px color-mix(in oklab, var(--site-accent) 80%, transparent);
  transition: transform .18s var(--site-ease); }
.ws-rel-presave:hover { transform: translateY(-2px); }
.ws-rel-presave svg { width: 18px; height: 18px; }
.ws-rel-stores { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ws-site .ws-rel-store { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 14px 6px 6px; border-radius: var(--site-btn-radius); font-weight: 700; font-size: 15px;
  background: color-mix(in oklab, var(--site-text) 5%, transparent); border: 1px solid var(--site-line); transition: background .18s, transform .18s var(--site-ease); }
.ws-rel-store:hover { background: color-mix(in oklab, var(--site-accent) 10%, transparent); transform: translateY(-1px); }
.ws-rel-store-i { width: 40px; height: 40px; flex: none; border-radius: calc(var(--site-btn-radius) - 4px); display: grid; place-items: center; background: var(--site-surface); box-shadow: var(--site-shadow-sm); }
.ws-site .ws-rel-store-i svg { width: 21px; height: 21px; }
.ws-rel-store > span:nth-child(2) { flex: 1; min-width: 0; }
.ws-site .ws-rel-go { width: 16px; height: 16px; color: var(--site-muted); }
.ws-rel-art .ws-aud-disc { position: absolute; inset: 0; display: grid; place-items: center; color: var(--site-accent-text); }
.ws-site .ws-rel-art .ws-aud-disc svg { width: 34%; height: 34%; }

/* Featured: the cover centred and large. */
.ws-rel-featured { padding: var(--b-pad, 18px); text-align: center; }
.ws-rel-featured .ws-rel-art { width: min(100%, 360px); justify-self: center; }
.ws-rel-featured .ws-rel-body { justify-items: stretch; }
.ws-rel-featured .ws-rel-title { font-size: calc(2rem * var(--b-scale, 1)); }
.ws-rel-featured .ws-rel-store { text-align: start; }

/* Card: the cover beside the words. */
.ws-rel-card { grid-template-columns: 104px minmax(0, 1fr); align-items: start; gap: 14px; }
.ws-rel-card .ws-rel-art { box-shadow: 0 14px 30px -18px rgb(0 0 0 / .6); }
.ws-rel-card .ws-rel-flag { inset-inline-start: 6px; bottom: 6px; font-size: 10px; padding: 3px 8px; }
.ws-rel-card .ws-rel-title { font-size: calc(1.3rem * var(--b-scale, 1)); }
.ws-rel-card .ws-rel-cd, .ws-rel-card .ws-ap, .ws-rel-card .ws-rel-presave, .ws-rel-card .ws-rel-stores { grid-column: 1 / -1; }
.ws-rel-card .ws-rel-body { display: contents; }
.ws-rel-card .ws-rel-kind, .ws-rel-card .ws-rel-title, .ws-rel-card .ws-rel-text { grid-column: 2; }
.ws-rel-card .ws-rel-art { grid-row: 1 / span 3; }
@container ws-page (min-width: 600px) { .ws-rel-card { grid-template-columns: 140px minmax(0, 1fr); } .ws-rel-card .ws-rel-stores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Split: the cover and the words side by side on wide pages. */
@container ws-page (min-width: 600px) {
  .ws-rel-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: center; padding: var(--b-pad, 18px); }
  .ws-rel-split .ws-rel-title { font-size: calc(2.2rem * var(--b-scale, 1)); }
}
@media (prefers-reduced-motion: reduce) { .ws-rel-presave, .ws-rel-store { transition: none; } }

/* css/site/blocks/reviews.css */
/* Verified reviews (B3 · U3) and the shared stars (also used by the rating summary): summary, carousel, list, grid. */
.rvs { position: relative; display: inline-block; line-height: 1; letter-spacing: 1px; white-space: nowrap; font-size: 15px; }
.rvs-s { font-size: 14px; } .rvs-l { font-size: 26px; letter-spacing: 3px; }
.rvs-off { color: color-mix(in oklab, var(--site-text) 18%, transparent); }
.rvs-on { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--r, 100%); overflow: hidden; color: var(--site-star, hsl(42 96% 52%)); }
[dir="rtl"] .rvs-on { direction: rtl; }
.rvb { display: flex; flex-direction: column; gap: 14px; text-align: start; }
.rvb-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; }
.rvb-head-text { display: grid; gap: 4px; }
.rvb-title { margin: 0; font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.025em; font-weight: 700; font-family: var(--site-heading, inherit); }
.rvb-intro { margin: 0; color: var(--site-muted); font-size: 14.5px; }
.rvb-avg { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--site-muted); }
.rvb-avg b { color: var(--site-text); font-size: 15px; }
.rv { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--b-radius, calc(var(--site-radius) + 2px)); min-width: 0; }
.rv-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
.rv-verified { white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 6px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: .01em; color: var(--site-accent); background: color-mix(in oklab, var(--site-accent) 12%, transparent); }
.rv-verified svg { width: 14px; height: 14px; }
.rv-headline { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.rv-text { margin: 0; font-size: 14.5px; line-height: 1.6; color: color-mix(in oklab, var(--site-text) 86%, transparent); white-space: pre-line; overflow-wrap: anywhere; }
.rv-by { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 4px; }
.rv-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex: none; font-size: 13px; font-weight: 800; color: var(--site-accent-text); background: linear-gradient(135deg, var(--site-accent), color-mix(in oklab, var(--site-accent) 55%, var(--site-text))); }
.rv-who { display: grid; min-width: 0; font-size: 14px; }
.rv-meta { color: var(--site-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* summary */
.rvb-sum { display: grid; gap: 18px; padding: 20px; border-radius: var(--b-radius, calc(var(--site-radius) + 4px)); }
.rvb-score { display: grid; justify-items: center; align-content: center; gap: 6px; text-align: center; }
.rvb-big { font-size: 3.2rem; line-height: 1; letter-spacing: -0.05em; font-weight: 800; }
.rvb-count { color: var(--site-muted); font-size: 13px; font-weight: 600; }
.rvb-bars, .rsm-dist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: center; }
.rvb-bars li, .rsm-dist li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: 13px; color: var(--site-muted); font-variant-numeric: tabular-nums; }
.rvb-bar, .rsm-bar { height: 8px; border-radius: 999px; background: color-mix(in oklab, var(--site-text) 9%, transparent); overflow: hidden; }
.rvb-bar i, .rsm-bar i { display: block; height: 100%; width: var(--w, 0%); border-radius: inherit; background: var(--site-star, hsl(42 96% 52%)); }
.rvb-bar-l { width: 2.4em; } .rvb-bar-n { min-width: 2.5ch; text-align: end; }
.rvb-list { display: grid; gap: 10px; }
.rvb-list .rv:not(.ws-surface) { padding-inline: 2px; border-radius: 0; }
.rvb-list-in { gap: 0; }
.rvb-list-in .rv + .rv { border-block-start: 1px solid var(--site-line); }
/* carousel */
.rvb-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px 2px 10px; margin: -2px -2px 0; overscroll-behavior-x: contain; outline: none; }
.rvb-track::-webkit-scrollbar { display: none; }
.rvb-track > .rv { flex: 0 0 84%; scroll-snap-align: start; }
.rvb-car .ws-car-nav { display: flex; }
@container ws-page (min-width: 600px) {
  .rvb-sum { grid-template-columns: minmax(150px, .8fr) 1.6fr; padding: 24px 28px; }
  .rvb-track > .rv { flex-basis: 46%; }
}
@container ws-page (min-width: 1024px) {
  .rvb-track > .rv { flex-basis: calc((100% - 24px) / 3); }
}
/* Columns follow the block's own width (the page column differs per presentation system). */
.rvb-grid-in, .rvb-list-sum { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }

/* css/site/blocks/rsvp.css */
/* RSVP: card, inline (the date tile and "when" line from blocks/event, the rest from modules/interact). */
.rv { overflow: hidden; }
.rv.has-media { padding: 0; gap: 0; }
.rv.has-media .rv-body { padding: 16px var(--b-pad, 22px) var(--b-pad, 22px); }
.rv-body { display: grid; gap: 12px; }
.rv-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.rv-media .ws-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.rv-date { position: absolute; inset-block-end: 12px; inset-inline-start: 12px; }
.rv-headrow { display: flex; align-items: center; gap: 14px; }
.rv-headrow .ix-head { min-width: 0; }
.rv-where { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--site-muted); }
.rv-where svg { width: 16px; height: 16px; color: var(--site-accent); flex: none; }
.rv-count { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.rv-places { font-size: 13px; font-weight: 750; color: var(--site-muted); }
.rv-places.is-hot { color: var(--site-accent); }
.rv-bar { flex: 1 0 100%; height: 6px; border-radius: 99px; overflow: hidden; background: color-mix(in oklab, var(--site-text) 9%, transparent); }
.rv-bar i { display: block; height: 100%; width: calc(var(--fill, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, color-mix(in oklab, var(--site-accent) 70%, var(--site-surface)), var(--site-accent)); }
.rv-ended { margin: 0; display: flex; align-items: center; gap: 8px; padding: 14px; border-radius: 12px; font-weight: 650; color: var(--site-muted); background: color-mix(in oklab, var(--site-text) 5%, transparent); }
.rv-ended svg { width: 18px; height: 18px; flex: none; }
.rv .wf-grid { gap: 12px; }
.rv-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rv-actions .ix-go { flex: 1 1 200px; min-height: 50px; }
.rv-cal { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 50px; padding: 0 16px; border-radius: var(--site-btn-radius); text-decoration: none;
  font-weight: 700; font-size: 14px; color: var(--site-text); border: 1.5px solid color-mix(in oklab, var(--site-text) 18%, transparent); }
.rv-cal svg { width: 16px; height: 16px; }
.rv-cal:hover { border-color: var(--site-accent); }
@container ws-page (max-width: 440px) { .rv .wf-field.wf-w-half { grid-column: 1 / -1; } }
@container ws-page (min-width: 900px) {
  .rv-card.has-media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rv-card.has-media .rv-media { aspect-ratio: auto; min-height: 100%; }
  .ws-sys-classic .rv-card.has-media, .ws-sys-minimal .rv-card.has-media { grid-template-columns: 1fr; }
  .ws-sys-classic .rv-card.has-media .rv-media, .ws-sys-minimal .rv-card.has-media .rv-media { aspect-ratio: 16 / 9; }
}
.rv-body { align-content: start; }
@container ws-page (min-width: 900px) { .rv-card.has-media .rv-body { align-content: center; } }

/* css/site/blocks/search.css */
/* Search this page (B4): bar (a field in the page) and icon (a round button that opens a panel over the top of the
   screen). Shown only when site-utility.js runs (html.ws-js); matches are painted with the CSS Highlight API. */
html:not(.ws-js) .ws-mode-public .ws-block-search { display: none; }
.ws-srch { position: relative; }
.ws-block-search { z-index: 20; } /* its results drop over the blocks below */
.ws-block-search.ws-v-icon { animation: none; } /* a transform would trap the fixed panel */
.ws-srch-field { position: relative; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 8px 0 16px; border-radius: 999px;
  background: var(--b-bg, var(--site-surface)); border: var(--b-border, 1px solid color-mix(in oklab, var(--site-text) 12%, transparent)); box-shadow: var(--b-shadow, var(--site-shadow-sm));
  transition: box-shadow .2s ease, border-color .2s ease; }
.ws-srch-field:focus-within { border-color: color-mix(in oklab, var(--site-accent) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 18%, transparent), var(--site-shadow-sm); }
.ws-srch-ico { display: grid; place-items: center; color: var(--site-muted); flex: none; }
.ws-site .ws-srch-ico svg { width: 19px; height: 19px; }
.ws-srch-input { flex: 1; min-width: 0; height: 50px; border: 0; background: none; color: var(--site-text); font: inherit; font-size: 16px; outline: none; }
.ws-srch-input::placeholder { color: var(--site-muted); opacity: 1; }
.ws-srch-input::-webkit-search-cancel-button { cursor: pointer; }
.ws-srch-count { flex: none; font-size: 12.5px; font-weight: 650; color: var(--site-muted); white-space: nowrap; padding-inline-end: 8px; font-variant-numeric: tabular-nums; }
.ws-srch-count:empty { display: none; }
.ws-srch-list { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; max-height: min(60vh, 420px); overflow: auto;
  background: var(--site-surface); color: var(--site-text); border-radius: calc(var(--site-radius) + 8px); border: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent);
  box-shadow: 0 30px 60px -24px rgb(0 0 0 / .45); }
.ws-srch-opt { display: grid; gap: 2px; padding: 10px 12px; border-radius: calc(var(--site-radius) + 2px); cursor: pointer; min-height: 44px; }
.ws-srch-opt b { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-srch-opt span { font-size: 13px; line-height: 1.45; color: var(--site-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ws-srch-opt mark { background: color-mix(in oklab, var(--site-accent) 26%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.ws-srch-opt[aria-selected="true"], .ws-srch-opt:hover { background: color-mix(in oklab, var(--site-accent) 10%, transparent); }
.ws-srch-empty { padding: 14px 12px; font-size: 14px; color: var(--site-muted); }

/* Icon: a round button at the inline end; the panel opens over the top of the screen. */
.ws-srch-icon { display: flex; justify-content: flex-end; }
.ws-srch-open { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px 0 14px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-size: 14.5px; font-weight: 700;
  color: var(--site-text); background: var(--b-bg, var(--site-surface)); box-shadow: var(--b-shadow, var(--site-shadow-sm)), inset 0 0 0 1px color-mix(in oklab, var(--site-text) 10%, transparent); }
.ws-site .ws-srch-open svg { width: 18px; height: 18px; }
.ws-srch-open:focus-visible, .ws-srch-x:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 55%, transparent); outline-offset: 2px; }
.ws-mode-public .ws-srch-icon .ws-srch-panel { position: fixed; z-index: 85; inset-inline: 0; top: 0; padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 12px;
  background: color-mix(in oklab, var(--site-surface) 97%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 20px 40px -24px rgb(0 0 0 / .4); }
.ws-mode-public .ws-srch-icon .ws-srch-panel > * { max-width: 640px; margin-inline: auto; }
.ws-mode-public .ws-srch-icon .ws-srch-list { position: static; margin-top: 8px; }
.ws-srch-x { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--site-muted); cursor: pointer; }
.ws-site .ws-srch-x svg { width: 20px; height: 20px; }
:is(.ws-mode-canvas, .ws-is-thumb) .ws-srch-icon { flex-direction: column; align-items: flex-end; gap: 10px; }
:is(.ws-mode-canvas, .ws-is-thumb) .ws-srch-icon .ws-srch-panel { width: 100%; }

/* The matches on the page, painted without touching the text. */
::highlight(ws-find) { background-color: color-mix(in oklab, var(--site-accent) 34%, transparent); color: inherit; }
::highlight(ws-find-now) { background-color: var(--site-accent); color: var(--site-accent-text); }
.ws-block.ws-srch-hit { animation: ws-srch-hit 1.4s ease; border-radius: calc(var(--site-radius) + 4px); }
@keyframes ws-srch-hit { 0%, 30% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 45%, transparent); } 100% { box-shadow: 0 0 0 4px transparent; } }

/* css/site/blocks/section.css */
/* Section container: contained, full-bleed, card, split; backgrounds page, card, tint, accent or image. */
.ws-sec { position: relative; display: grid; gap: var(--gap); padding: var(--b-pad, 22px 0); border-radius: var(--b-radius, calc(var(--site-radius) + 10px)); isolation: isolate; }
.ws-sec-in { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.ws-sec-title { margin: 0 0 4px; font-family: var(--site-heading); font-size: clamp(1.4rem, 1.2rem + 1.2cqw, 2rem); letter-spacing: -0.035em; text-align: var(--b-align, start); }
.ws-sec-bg-surface { background: var(--site-surface); border: 1px solid var(--site-line); padding: var(--b-pad, 22px 18px); }
.ws-sec-bg-soft { background: color-mix(in oklab, var(--site-accent) 9%, transparent); padding: var(--b-pad, 22px 18px); }
.ws-sec-bg-accent { background: var(--site-accent); color: var(--site-accent-text); padding: var(--b-pad, 24px 18px); }
.ws-sec-bg-image { color: var(--site-on-media); padding: var(--b-pad, 32px 18px); background: linear-gradient(rgb(0 0 0 / .45), rgb(0 0 0 / .55)), var(--sec-img, none) center / cover; }
.ws-sec-full-bleed { width: 100cqw; margin-inline: calc(50% - 50cqw); border-radius: 0; padding-inline: max(18px, calc(50cqw - var(--w, 560px) / 2)); }
.ws-sec-card { padding: var(--b-pad, 22px 18px); }
.ws-sec-split { grid-template-columns: minmax(0, 1fr); overflow: hidden; padding: 0; }
.ws-sec-media { position: relative; min-height: 220px; border-radius: inherit; overflow: hidden; }
.ws-sec-media .ws-media, .ws-sec-media .ws-media-ph { position: absolute; inset: 0; }
.ws-sec-split .ws-sec-in { padding: var(--b-pad, 20px 4px); }
@container ws-page (min-width: 600px) { .ws-sec-split { grid-template-columns: 1fr 1fr; gap: clamp(20px, 3cqw, 40px); align-items: center; } .ws-sec-media { min-height: 360px; height: 100%; } }
.ws-drop { display: grid; place-items: center; min-height: 72px; padding: 12px; border: 1.5px dashed color-mix(in oklab, var(--site-text) 24%, transparent); border-radius: var(--site-radius); color: var(--site-muted); font-size: 13px; font-weight: 600; }
.ws-sec .ws-block, .ws-cols .ws-block, .ws-bgrid .ws-block { animation: none; }
.ws-sec-bg-accent > .ws-sec-in > .ws-block > :is(.ws-text, .ws-hd, .ws-socials) { --site-muted: color-mix(in oklab, var(--site-accent-text) 78%, transparent); }
.ws-site .ws-sec-bg-accent .ws-button { background: var(--site-accent-text); color: var(--site-accent); border-color: transparent; }

/* css/site/blocks/sensitive.css */
/* Sensitive content veil (B5): a native <details>; closed, only the cover shows. */
.ws-veil { display: grid; gap: 12px; }
.ws-veil-cover { position: relative; display: grid; justify-items: center; gap: 6px; min-height: 180px; align-content: center; padding: 24px 20px; cursor: pointer;
  list-style: none; text-align: center; border-radius: var(--b-radius, calc(var(--site-radius) + 6px)); overflow: hidden; isolation: isolate; }
.ws-veil-cover::-webkit-details-marker { display: none; }
.ws-veil-blur .ws-veil-cover::before { content: ""; position: absolute; inset: -20px; z-index: -1; filter: blur(18px);
  background: conic-gradient(from 210deg at 30% 40%, color-mix(in oklab, var(--site-accent) 55%, transparent), color-mix(in oklab, var(--site-text) 18%, transparent),
    color-mix(in oklab, var(--site-accent) 30%, var(--site-surface)), color-mix(in oklab, var(--site-accent) 55%, transparent)); }
.ws-veil-blur .ws-veil-cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in oklab, var(--site-surface) 55%, transparent);
  backdrop-filter: blur(6px); }
.ws-veil-cover:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 55%, transparent); outline-offset: 2px; }
.ws-veil-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in oklab, var(--site-text) 10%, transparent); }
.ws-veil-icon svg { width: 20px; height: 20px; }
.ws-veil-title { font-weight: 700; font-size: 1.05rem; letter-spacing: -0.015em; }
.ws-veil-text { color: var(--site-muted); font-size: 14px; max-width: 34ch; }
.ws-veil-btn { display: inline-flex; align-items: center; min-height: 44px; margin-block-start: 6px; padding: 0 18px; border-radius: 999px; background: var(--site-text);
  color: var(--site-bg-base, #fff); font-weight: 600; font-size: 14px; }
.ws-veil[open] > .ws-veil-cover { min-height: 0; padding: 10px 16px; grid-auto-flow: column; justify-content: start; gap: 10px; }
.ws-veil[open] > .ws-veil-cover .ws-veil-text, .ws-veil[open] > .ws-veil-cover .ws-veil-btn { display: none; }
.ws-veil[open] > .ws-veil-cover .ws-veil-icon { width: 30px; height: 30px; }
.ws-veil-body { display: flex; flex-direction: column; gap: var(--ws-gap, 12px); }

/* css/site/blocks/services.css */
/* Services menu (ADR-0068, W3): the cards variant (rows, grid, accordion and tabs are the shared collection variants). */
.ws-svc-cards .ws-track { grid-template-columns: minmax(0, 1fr); gap: 10px; }
@container ws-page (min-width: 600px) { .ws-svc-cards .ws-track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container ws-page (min-width: 1024px) { .ws-svc-cards[data-count="3"] .ws-track, .ws-svc-cards[data-count="6"] .ws-track { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ws-svc { display: flex; flex-direction: column; gap: 14px; padding: var(--b-pad, 18px); text-align: start; }
.ws-svc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ws-svc-ico, .ws-svc-img { width: 48px; height: 48px; flex: none; border-radius: calc(var(--site-radius) - 2px); overflow: hidden; display: grid; place-items: center;
  background: color-mix(in oklab, var(--site-accent) 14%, transparent); color: var(--site-accent); }
.ws-svc-ico svg { width: 22px; height: 22px; }
.ws-svc-price .ws-price { font-size: 1.15rem; }
.ws-svc-body { display: grid; gap: 4px; flex: 1; }
.ws-svc-body .ws-meta { margin-top: 6px; display: grid; gap: 6px; }
.ws-svc-body .ws-meta li:last-child { color: var(--site-accent); }
.ws-svc-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: var(--site-btn-radius); font-weight: 700; font-size: 14.5px;
  background: var(--site-accent); color: var(--site-accent-text); }
.ws-svc-cta svg { width: 16px; height: 16px; transition: transform .18s var(--site-ease); }
.ws-svc:hover .ws-svc-cta svg { transform: translateX(calc(3px * var(--dir-sign, 1))); }

/* css/site/blocks/share_page.css */
/* Share this page: buttons, card, compact. Targets carry their network's colour (blocks/_networks). */
.ws-share { display: grid; gap: 12px; text-align: start; }
.ws-share-head { display: flex; align-items: center; gap: 12px; }
.ws-share-head > div { display: grid; gap: 2px; min-width: 0; }
.ws-share-buttons .ws-share-head { justify-content: center; text-align: center; }
.ws-share-main { display: flex; gap: 8px; }
.ws-share-native, .ws-share-copy { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 0 18px; border: 0; cursor: pointer;
  border-radius: var(--site-btn-radius); font: inherit; font-weight: 750; font-size: 15px; background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 14px 28px -18px var(--site-accent);
  transition: transform .18s var(--site-ease), filter .18s; }
.ws-share-native:hover, .ws-share-copy:hover { transform: translateY(-2px); filter: brightness(1.04); }
.ws-share-native[hidden] { display: none; }
.ws-share-native svg, .ws-share-copy svg { width: 18px; height: 18px; }
.ws-share-done { display: none; }
.ws-share-copy[data-copied] .ws-share-copy-t { display: none; }
.ws-share-copy[data-copied] .ws-share-done { display: inline; }
.ws-share-copy.ws-copied { outline: none !important; }
.has-native:not(.ws-share-card) .ws-share-copy { display: none; }
.ws-share-targets { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.ws-site .ws-share-t { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: var(--net-ink, var(--site-accent-text)); background: var(--net, var(--site-accent));
  box-shadow: 0 10px 20px -14px var(--net, var(--site-accent)); transition: transform .18s var(--site-ease), filter .18s; }
.ws-share-t:hover { transform: translateY(-2px); filter: brightness(1.08); }
.ws-share-ico { display: grid; place-items: center; }
.ws-site .ws-share-ico svg { width: 20px; height: 20px; }

/* Buttons: every target as a labelled button in a grid. */
.ws-share-buttons .ws-share-targets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ws-share-buttons .ws-share-t { width: auto; height: auto; min-height: 50px; padding: 0 14px; border-radius: var(--site-btn-radius); display: flex; justify-content: flex-start; gap: 10px;
  background: var(--site-surface); color: var(--site-text); border: 1px solid var(--site-line); box-shadow: var(--site-shadow-sm); }
.ws-share-buttons .ws-share-ico { width: 30px; height: 30px; border-radius: 50%; background: var(--net, var(--site-accent)); color: var(--net-ink, var(--site-accent-text)); flex: none; }
.ws-site .ws-share-buttons .ws-share-ico svg { width: 16px; height: 16px; }
.ws-share-l { font-weight: 700; font-size: 14.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container ws-page (min-width: 600px) { .ws-share-buttons .ws-share-targets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Card: the page link with a copy button, then round targets. */
.ws-share-card { padding: var(--b-pad, 20px); gap: 16px; }
.ws-share-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 6px 0 14px; border-radius: var(--site-btn-radius);
  background: color-mix(in oklab, var(--site-text) 5%, transparent); border: 1px solid var(--site-line); color: var(--site-muted); }
.ws-share-link svg { width: 16px; height: 16px; flex: none; }
.ws-share-link input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--site-text); text-overflow: ellipsis; outline: none; }
.ws-share-link:focus-within { outline: 3px solid color-mix(in oklab, var(--site-accent) 45%, transparent); }
.ws-share-card .ws-share-copy { flex: none; min-height: 52px; padding: 0 16px; }
.ws-share-card .ws-share-native { flex: none; width: 52px; padding: 0; }
.ws-share-card .ws-share-native span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ws-share-card .ws-share-targets { justify-content: flex-start; }
@container ws-page (max-width: 400px) { .ws-share-card .ws-share-main { flex-wrap: wrap; } .ws-share-card .ws-share-link { flex-basis: 100%; } .ws-share-card .ws-share-copy { flex: 1; } }

/* Compact: one line. */
.ws-share-compact { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.ws-share-compact .ws-share-main { flex: none; }
.ws-share-compact .ws-share-native, .ws-share-compact .ws-share-copy { min-height: 44px; padding: 0 16px; font-size: 14px; border-radius: 999px; }
.ws-share-compact .ws-share-t { width: 44px; height: 44px; }
.ws-site .ws-share-compact .ws-share-ico svg { width: 18px; height: 18px; }
.ws-s-align-start .ws-share-compact, .ws-s-align-start .ws-share-targets { justify-content: flex-start; }

/* css/site/blocks/shop_the_look.css */
/* Shop the look (B4 · Q4). Pins sit in image coordinates (the stage is always left-to-right); rows below or beside. */
.stl { display: grid; gap: 14px; text-align: start; }
.stl-head { display: grid; gap: 4px; }
.stl-title { margin: 0; font-family: var(--site-heading); font-size: calc(1.3rem * var(--b-scale, 1)); font-weight: 750; letter-spacing: -0.025em; }
.stl-text { margin: 0; color: var(--site-muted); font-size: 14.5px; }
.stl-grid { display: grid; gap: 12px; }
.stl-stage { position: relative; margin: 0; direction: ltr; border-radius: var(--site-radius); overflow: hidden; background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.stl-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.stl-ph { display: grid; place-items: center; aspect-ratio: 4 / 5; color: var(--site-muted);
  background: linear-gradient(160deg, color-mix(in oklab, var(--site-accent) 22%, var(--site-surface)), color-mix(in oklab, var(--site-accent) 8%, var(--site-surface))); }
.stl-ph svg { width: 44px; height: 44px; opacity: .5; }
.stl-pin { position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y); translate: -50% -50%; z-index: 1; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; text-decoration: none; font-weight: 800; font-size: 13px; color: var(--site-accent-text); background: var(--site-accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--site-on-media) 85%, transparent), 0 8px 18px -6px color-mix(in oklab, var(--site-ink-dark) 60%, transparent); }
.stl-pin::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid color-mix(in oklab, var(--site-on-media) 70%, transparent);
  animation: stl-ping 2.4s ease-out infinite; }
@keyframes stl-ping { 0% { transform: scale(.7); opacity: 1; } 80%, 100% { transform: scale(1.35); opacity: 0; } }
.ws-site a.stl-pin { color: var(--site-accent-text); }
.stl-pin:focus-visible { outline: 3px solid var(--site-on-media); outline-offset: 3px; }
.stl-tip { position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%; translate: -50% 0; white-space: nowrap; padding: 5px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--site-ink-dark); background: var(--site-on-media); opacity: 0; pointer-events: none; transition: opacity .18s; }
.stl-pin:hover .stl-tip, .stl-pin:focus-visible .stl-tip { opacity: 1; }
.stl-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.stl-row { scroll-margin-block: 90px; }
.stl-row:target .stl-card { border-color: var(--site-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--site-accent) 28%, transparent); }
.stl-card { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 10px 8px 8px; border-radius: calc(var(--site-radius) - 2px); text-decoration: none; color: inherit;
  border: 1px solid transparent; }
.stl-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px;
  background: color-mix(in oklab, var(--site-accent) 14%, transparent); color: var(--site-accent); }
.stl-thumb { flex: none; width: 64px; height: 64px; border-radius: calc(var(--site-radius) - 6px); overflow: hidden; }
.stl-thumb-img { width: 100%; height: 100%; object-fit: cover; }
.stl-name { flex: 1; min-width: 0; display: grid; gap: 2px; }
.stl-name strong { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stl-name small { color: var(--site-muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.stl-name s { opacity: .7; font-weight: 500; }
.stl-cta { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: var(--site-btn-radius);
  background: var(--site-accent); color: var(--site-accent-text); font-weight: 800; font-size: 13.5px; }
.stl-cta svg { width: 15px; height: 15px; }
@container ws-page (min-width: 600px) {
  .stl-v-split .stl-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }

}

.stl-v-list .stl-card { min-height: 80px; }
@media (prefers-reduced-motion: reduce) { .stl-pin::before { animation: none; } .stl-tip { transition: none; } }
.stl-v-split .stl-name strong { white-space: normal; overflow-wrap: anywhere; }
.stl-v-split .stl-cta { padding: 0 12px; }

/* css/site/blocks/smart_music_link.css */
/* Music link (B3 · F3): card, buttons, compact. Store colours are the stores' own marks (the only fixed colours here). */
.ws-ml-s-spotify { --ml: #1DB954; } .ws-ml-s-apple_music { --ml: #FA243C; } .ws-ml-s-youtube_music { --ml: #FF0033; } .ws-ml-s-deezer { --ml: #A238FF; }
.ws-ml-s-amazon_music { --ml: #25D1DA; } .ws-ml-s-soundcloud { --ml: #FF5500; } .ws-ml-s-bandcamp { --ml: #1DA0C3; } .ws-ml-s-audiomack { --ml: #FFA200; }
.ws-ml-s-boomplay { --ml: #2C6BFF; } .ws-ml-s-anghami { --ml: #8B2CF5; }
.ws-ml-s-tidal, .ws-ml-s-other { --ml: var(--site-text); }

.ws-ml { display: grid; gap: 14px; min-width: 0; text-align: start; border-radius: var(--b-radius, calc(var(--site-radius) + 8px)); }
.ws-ml.ws-surface { padding: var(--b-pad, 16px); overflow: hidden; }
.ws-ml-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ws-ml-words { display: grid; gap: 2px; min-width: 0; }
.ws-ml-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--site-accent); }
.ws-ml-title { margin: 0; font-family: var(--site-heading); font-size: calc(1.3rem * var(--b-scale, 1)); font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; overflow-wrap: anywhere; }
.ws-ml-artist { margin: 0; color: var(--site-muted); font-size: 14.5px; font-weight: 600; }
.ws-ml-cover { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: calc(var(--site-radius) + 2px); background: color-mix(in oklab, var(--site-accent) 20%, var(--site-surface));
  box-shadow: 0 22px 44px -22px rgb(0 0 0 / .6); }
.ws-ml-cover img, .ws-ml-cover .ws-media-ph { width: 100%; height: 100%; object-fit: cover; }
.ws-ml-cover.is-small { width: 72px; flex: none; border-radius: calc(var(--site-radius) - 2px); box-shadow: 0 12px 26px -16px rgb(0 0 0 / .55); }

/* Card: the cover over a blur of itself. */
.ws-ml-card { gap: 16px; }
.ws-ml-card .ws-ml-head { justify-content: center; text-align: center; }
.ws-ml-card .ws-ml-words { justify-items: center; }
.ws-ml-hero { position: relative; display: grid; place-items: center; margin: calc(-1 * var(--b-pad, 16px)) calc(-1 * var(--b-pad, 16px)) 0; padding: 26px 16px 22px; overflow: hidden; isolation: isolate; }
.ws-ml-backdrop { position: absolute; inset: -30px; z-index: -1; opacity: .55; filter: blur(34px) saturate(1.3); }
.ws-ml-backdrop img { width: 100%; height: 100%; object-fit: cover; }
.ws-ml-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, var(--b-bg, var(--site-surface)) 100%); }
.ws-ml-hero .ws-ml-cover { width: min(64%, 240px); }

.ws-ml-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ws-ml-card .ws-ml-list > li + li { border-top: 1px solid var(--site-line); }
.ws-ml-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 6px 4px; color: inherit; text-decoration: none; border-radius: 12px; }
.ws-ml-card .ws-ml-row:hover, .ws-ml-card .ws-ml-row:focus-visible { background: color-mix(in oklab, var(--ml) 9%, transparent); }
.ws-ml-mark { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ml); background: color-mix(in oklab, var(--ml) 14%, transparent); }
.ws-site .ws-ml-mark svg, .ws-site .ws-ml-ico svg { width: 20px; height: 20px; fill: currentColor; }
.ws-ml-mark b, .ws-ml-ico b { font-family: var(--site-heading); font-size: 17px; font-weight: 900; line-height: 1; }
.ws-ml-name { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-ml-play { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 800;
  border: 1.5px solid color-mix(in oklab, var(--site-text) 18%, transparent); transition: background .18s, color .18s, border-color .18s; }
.ws-ml-row:hover .ws-ml-play, .ws-ml-row:focus-visible .ws-ml-play { background: var(--ml); border-color: var(--ml); color: var(--site-bg); }

/* Buttons: a pill per store. */
.ws-ml-buttons .ws-ml-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.ws-ml-buttons .ws-ml-row { grid-template-columns: 36px minmax(0, 1fr) 20px; min-height: 56px; padding: 8px 14px 8px 10px; border-radius: var(--site-btn-radius); }
.ws-ml-buttons .ws-ml-mark { width: 36px; height: 36px; }
.ws-ml-go { color: var(--site-muted); }
.ws-site .ws-ml-go svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }

/* Compact: round marks. */
.ws-ml-icons { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ws-ml-ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--ml); background: color-mix(in oklab, var(--ml) 13%, transparent);
  transition: transform .18s var(--site-ease), background .18s, color .18s; }
.ws-ml-ico:hover, .ws-ml-ico:focus-visible { transform: translateY(-2px); background: var(--ml); color: var(--site-bg); }
.ws-ml-row:focus-visible, .ws-ml-ico:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 60%, transparent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ws-ml-ico, .ws-ml-play { transition: none; } }

/* css/site/blocks/sms_optin.css */
/* SMS sign-up: card, inline (shared pieces in modules/interact). The card shows a message bubble preview. */
.sms .wf-grid { gap: 12px; }
.sms-copy { display: grid; gap: 12px; align-content: start; }
.sms-bubble { position: relative; justify-self: start; max-width: 300px; display: grid; gap: 4px; padding: 12px 14px; border-radius: 20px 20px 20px 6px; font-size: 14px; line-height: 1.45;
  background: color-mix(in oklab, var(--site-accent) 14%, var(--site-surface)); border: 1px solid color-mix(in oklab, var(--site-accent) 22%, transparent); }
.sms-bubble small { font-size: 11px; color: var(--site-muted); font-weight: 600; }
[dir="rtl"] .sms-bubble { border-radius: 20px 20px 6px 20px; }
@container ws-page (min-width: 900px) {
  .sms-card { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 30px; padding: var(--b-pad, 28px); align-items: start; }
  .ws-sys-classic .sms-card, .ws-sys-minimal .sms-card { grid-template-columns: 1fr; }
}

/* css/site/blocks/social_grid.css */
/* Clickable post grid (B3 · F3): grid (square tiles, tight gaps, like a profile grid), masonry, carousel (portrait cards). */
.ws-block-social-grid .ws-cv-grid .ws-track { --c: 3; gap: 4px; }
.ws-block-social-grid .ws-gcard { position: relative; border: 0; border-radius: calc(var(--site-radius) * .5); box-shadow: none; background: none; }
.ws-block-social-grid .ws-gcard-media { aspect-ratio: 1; border-radius: inherit; }
.ws-block-social-grid .ws-gcard-media img { width: 100%; height: 100%; object-fit: cover; }
.ws-block-social-grid .ws-gcard-body { position: absolute; inset: auto 0 0; padding: 22px 8px 6px; color: var(--site-on-media);
  background: linear-gradient(180deg, transparent, rgb(0 0 0 / .62)); pointer-events: none; }
.ws-block-social-grid .ws-gcard-body:not(:has(.ws-t1)) { display: none; }
.ws-block-social-grid .ws-gcard .ws-t1 { font-size: 12px; font-weight: 700; line-height: 1.25; color: inherit; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ws-block-social-grid a.ws-gcard::after { content: ""; position: absolute; inset-inline-end: 8px; top: 8px; width: 26px; height: 26px; border-radius: 50%; opacity: 0;
  background: rgb(0 0 0 / .45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: opacity .2s; }
.ws-block-social-grid a.ws-gcard:is(:hover, :focus-visible)::after { opacity: 1; }
[dir="rtl"] .ws-block-social-grid a.ws-gcard::after { transform: scaleX(-1); }
@media (hover: none) { .ws-block-social-grid a.ws-gcard::after { opacity: .9; } }
.ws-block-social-grid .ws-cc-media { aspect-ratio: 4 / 5; }
.ws-block-social-grid .ws-cc-media img { width: 100%; height: 100%; object-fit: cover; }
.ws-block-social-grid .ws-cc-body:not(:has(.ws-t1)) { display: none; }
.ws-block-social-grid .ws-cv-masonry .ws-mz { border-radius: calc(var(--site-radius) * .6); }
@media (prefers-reduced-motion: reduce) { .ws-block-social-grid a.ws-gcard::after { transition: none; } }

/* css/site/blocks/social_post.css */
/* Post card (B3 · F3): card, card-horizontal, compact. The network's colour comes from _networks.css (--net). */
.ws-sp { display: flex; gap: 0; min-width: 0; overflow: hidden; text-align: start; color: inherit; text-decoration: none; border-radius: var(--b-radius, calc(var(--site-radius) + 6px)); }
.ws-sp-body { display: grid; gap: 12px; flex: 1; min-width: 0; padding: var(--b-pad, 16px 18px); }
.ws-sp-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.ws-sp-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-weight: 800; font-size: 17px;
  background: color-mix(in oklab, var(--site-accent) 22%, var(--site-surface)); color: var(--site-text); }
.ws-sp-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ws-sp-who { display: grid; gap: 1px; min-width: 0; line-height: 1.25; }
.ws-sp-who strong { font-size: 15px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-sp-who small { color: var(--site-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-sp-net { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--net, var(--site-text)); background: color-mix(in oklab, var(--net, var(--site-text)) 12%, transparent); }
.ws-sp-x .ws-sp-net, .ws-sp-threads .ws-sp-net { color: var(--site-text); background: color-mix(in oklab, var(--site-text) 9%, transparent); }
.ws-site .ws-sp-net svg { width: 16px; height: 16px; fill: currentColor; }
.ws-sp-text { font-size: calc(15.5px * var(--b-scale, 1)); line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.ws-sp-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ws-sp-pic { display: block; overflow: hidden; border-radius: calc(var(--site-radius) + 2px); background: color-mix(in oklab, var(--site-text) 8%, transparent); }
.ws-sp-pic img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ws-sp-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding-top: 10px; border-top: 1px solid var(--site-line); color: var(--site-muted); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ws-sp-date { margin-inline-end: auto; }
.ws-sp-count { display: inline-flex; align-items: center; gap: 6px; }
.ws-site .ws-sp-count svg { width: 16px; height: 16px; }
.ws-sp-cta { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 40px; padding: 0 14px; border-radius: var(--site-btn-radius); font-size: 13.5px; font-weight: 700;
  background: color-mix(in oklab, var(--site-text) 7%, transparent); }
.ws-site .ws-sp-cta svg { width: 15px; height: 15px; }
a.ws-sp:hover .ws-sp-cta { background: var(--site-accent); color: var(--site-accent-text); }
a.ws-sp:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 60%, transparent); outline-offset: 2px; }

/* Card, horizontal: the picture beside the words (stacked on narrow pages). */
.ws-sp-card-horizontal { flex-direction: column; }
.ws-sp-card-horizontal > .ws-sp-pic { border-radius: 0; }
@container ws-page (min-width: 520px) {
  .ws-sp-card-horizontal { flex-direction: row; }
  .ws-sp-card-horizontal > .ws-sp-pic { flex: 0 0 38%; }
  .ws-sp-card-horizontal > .ws-sp-pic img { aspect-ratio: auto; min-height: 100%; }
}

/* Compact */
.ws-sp-compact .ws-sp-body { gap: 8px; padding: var(--b-pad, 12px 14px); }
.ws-sp-compact .ws-sp-head { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; }
.ws-sp-compact .ws-sp-avatar { width: 36px; height: 36px; font-size: 14px; }
.ws-sp-compact .ws-sp-net { width: 28px; height: 28px; }
.ws-sp-compact .ws-sp-text { font-size: 14px; -webkit-line-clamp: 2; }

/* css/site/blocks/social_profiles.css */
/* Social profile cards: cards, grid, carousel, rows. Brand colour per profile from blocks/_networks (--net, --net-ink). */
.ws-sp-track { display: grid; gap: 10px; }
.ws-sp-cell { min-width: 0; display: grid; }
.ws-site .ws-sp-item { position: relative; display: grid; justify-items: center; gap: 4px; min-width: 0; overflow: hidden; text-align: center; color: var(--site-text);
  background: var(--b-bg, var(--site-surface)); border: var(--b-border, 1px solid var(--site-line)); border-radius: var(--b-radius, calc(var(--site-radius) + 6px)); box-shadow: var(--b-shadow, var(--site-shadow-md)); }
.ws-sp-avatar { position: relative; width: 60px; height: 60px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--net, var(--site-accent)); color: var(--net-ink, var(--site-accent-text)); }
.ws-site .ws-sp-avatar > svg { width: 28px; height: 28px; }
.ws-sp-avatar .ws-media { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ws-sp-badge { position: absolute; inset-inline-end: -3px; bottom: -3px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--net); color: var(--net-ink); box-shadow: 0 0 0 2.5px var(--site-surface); }
.ws-site .ws-sp-badge svg { width: 13px; height: 13px; }
.ws-sp-text { display: grid; gap: 1px; min-width: 0; max-width: 100%; }
.ws-sp-name { font-family: var(--site-heading); font-weight: 750; font-size: 15px; letter-spacing: -0.015em; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-sp-handle { font-size: 12.5px; font-weight: 600; color: var(--site-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; unicode-bidi: plaintext; }
.ws-sp-count { font-size: 12.5px; font-weight: 600; color: var(--site-muted); }
.ws-sp-count b { color: var(--site-text); font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.ws-sp-follow { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 16px; border-radius: 999px; font-weight: 750; font-size: 13.5px; background: var(--net, var(--site-accent)); color: var(--net-ink, var(--site-accent-text)); }

/* Cards (and the carousel's cards): a colour band with the mark, the picture overlapping it. */
.ws-sp-cards .ws-sp-track { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ws-sp-cards .ws-sp-item, .ws-sp-carousel .ws-sp-item { padding: 0 12px 14px; }
.ws-sp-band { align-self: stretch; justify-self: stretch; height: 56px; margin-inline: -12px; margin-bottom: -30px; display: flex; justify-content: flex-end; align-items: flex-start; padding: 8px 10px;
  background: radial-gradient(80% 120% at 100% 0%, rgb(255 255 255 / .28), transparent 60%), var(--net, var(--site-accent)); color: var(--net-ink, var(--site-accent-text)); }
.ws-sp-mark { opacity: .9; } .ws-site .ws-sp-mark svg { width: 16px; height: 16px; }
.ws-sp-cards .ws-sp-avatar, .ws-sp-carousel .ws-sp-avatar { box-shadow: 0 0 0 3px var(--site-surface), 0 8px 18px -10px rgb(0 0 0 / .5); margin-bottom: 4px; }
.ws-sp-cards .ws-sp-follow, .ws-sp-carousel .ws-sp-follow { margin-top: 6px; align-self: end; }
.ws-sp-cards .ws-sp-item, .ws-sp-carousel .ws-sp-item { grid-template-rows: auto auto auto 1fr auto; }

/* Carousel. */
.ws-sp-carousel .ws-sp-track { grid-auto-flow: column; grid-auto-columns: 44%; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 10px; scrollbar-width: none; overscroll-behavior-x: contain; }
.ws-sp-carousel .ws-sp-track::-webkit-scrollbar { display: none; }
.ws-sp-carousel .ws-sp-cell { scroll-snap-align: start; }
.ws-sp-carousel .ws-car-nav { display: flex; }
@container ws-page (min-width: 600px) { .ws-sp-carousel .ws-sp-track { grid-auto-columns: 190px; } }

/* Grid: compact branded tiles. */
.ws-sp-grid .ws-sp-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container ws-page (min-width: 600px) { .ws-sp-grid .ws-sp-track { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ws-sp-grid .ws-sp-item { justify-items: start; text-align: start; gap: 8px; padding: 14px; color: var(--net-ink, var(--site-accent-text)); border: 0;
  background: radial-gradient(90% 90% at 100% 0%, rgb(255 255 255 / .25), transparent 55%), var(--net, var(--site-accent)); box-shadow: 0 14px 28px -18px var(--net, var(--site-accent)); }
.ws-sp-grid .ws-sp-avatar { width: 40px; height: 40px; background: rgb(255 255 255 / .2); color: inherit; }
.ws-site .ws-sp-grid .ws-sp-avatar > svg { width: 20px; height: 20px; }
.ws-sp-grid .ws-sp-handle, .ws-sp-grid .ws-sp-count, .ws-sp-grid .ws-sp-count b { color: inherit; opacity: .85; }
.ws-sp-grid .ws-sp-count b { opacity: 1; }
.ws-sp-grid .ws-sp-text { margin-top: 10px; }

/* Rows. */
.ws-sp-rows .ws-sp-item { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "av text follow" "av count follow"; justify-items: start; align-items: center; column-gap: 12px; row-gap: 0; padding: 10px 12px; text-align: start; }
.ws-sp-rows .ws-sp-avatar { grid-area: av; width: 48px; height: 48px; }
.ws-site .ws-sp-rows .ws-sp-avatar > svg { width: 22px; height: 22px; }
.ws-sp-rows .ws-sp-text { grid-area: text; }
.ws-sp-rows .ws-sp-count { grid-area: count; font-size: 12px; }
.ws-sp-rows .ws-sp-count b { font-size: 12.5px; }
.ws-sp-rows .ws-sp-follow { grid-area: follow; }
.ws-sp-rows .ws-sp-item:not(:has(.ws-sp-count)) { grid-template-areas: "av text follow"; }

/* css/site/blocks/socials.css */
/* Social icons: icons (the classic look), pills, buttons, grid, brand-colored, large, minimal. */
.ws-socials { display: flex; flex-wrap: wrap; justify-content: var(--b-justify, center); gap: 6px; }
.ws-social { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--site-text); transition: background .18s, transform .18s; }
.ws-social:hover { background: color-mix(in oklab, var(--site-text) 8%, transparent); transform: translateY(-2px); }
.ws-social { background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.ws-dark .ws-social:hover { background: rgb(255 255 255 / .08); }
.ws-s-size-s .ws-so-icons .ws-social { width: 36px; height: 36px; } .ws-s-size-s .ws-so-icons svg { width: 16px; height: 16px; }
.ws-s-size-l .ws-so-icons .ws-social, .ws-s-size-xl .ws-so-icons .ws-social { width: 50px; height: 50px; } .ws-s-size-l .ws-so-icons svg, .ws-s-size-xl .ws-so-icons svg { width: 24px; height: 24px; }
.ws-social > span { font-size: 13.5px; font-weight: 700; letter-spacing: -0.005em; }

.ws-so-pills { gap: 8px; }
.ws-so-pills .ws-social { width: auto; height: 44px; padding: 0 16px 0 12px; border-radius: 999px; display: inline-flex; gap: 8px; border: 1px solid var(--site-line); background: var(--site-surface); box-shadow: var(--site-shadow-sm); }
.ws-so-buttons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ws-so-buttons .ws-social { width: 100%; height: 52px; border-radius: var(--site-btn-radius); display: flex; justify-content: center; gap: 10px; background: var(--site-surface); border: 1px solid var(--site-line); }
.ws-so-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.ws-so-grid .ws-social { width: auto; height: auto; aspect-ratio: 1.2; border-radius: calc(var(--site-radius) + 4px); display: grid; align-content: center; justify-items: center; gap: 6px; background: var(--site-surface); border: 1px solid var(--site-line); box-shadow: var(--site-shadow-sm); }
.ws-so-grid .ws-social svg { width: 24px; height: 24px; }
.ws-so-large .ws-social { width: 58px; height: 58px; } .ws-so-large svg { width: 26px; height: 26px; }
.ws-so-minimal { gap: 2px; } .ws-so-minimal .ws-social { background: transparent; opacity: .8; } .ws-so-minimal .ws-social:hover { opacity: 1; background: transparent; }
.ws-so-brand-colored .ws-social { color: #fff; background: var(--net, var(--site-accent)); box-shadow: 0 10px 20px -14px var(--net, var(--site-accent)); }
.ws-so-brand-colored .ws-social:hover { background: var(--net, var(--site-accent)); filter: brightness(1.08); }
/* Network colours (brand marks; the only fixed colours here). */
.ws-net-instagram { --net: #E1306C; } .ws-net-tiktok { --net: #111111; } .ws-net-youtube { --net: #FF0033; } .ws-net-x { --net: #111111; }
.ws-net-facebook { --net: #1877F2; } .ws-net-linkedin { --net: #0A66C2; } .ws-net-whatsapp { --net: #25D366; } .ws-net-telegram { --net: #229ED9; }
.ws-net-snapchat { --net: #F7C600; } .ws-net-pinterest { --net: #E60023; } .ws-net-spotify { --net: #1DB954; } .ws-net-twitch { --net: #9146FF; }
.ws-net-discord { --net: #5865F2; } .ws-net-github { --net: #24292F; } .ws-net-threads { --net: #111111; } .ws-net-soundcloud { --net: #FF5500; }
.ws-net-behance { --net: #1769FF; } .ws-net-dribbble { --net: #EA4C89; } .ws-net-medium { --net: #111111; } .ws-net-substack { --net: #FF6719; }
.ws-net-patreon { --net: #FF424D; } .ws-net-apple { --net: #111111; } .ws-net-bluesky { --net: #1185FE; } .ws-net-reddit { --net: #FF4500; }

/* css/site/blocks/spacer.css */
/* Spacer: empty space (s, m, l, xl), a little taller on desktop. */
.ws-spacer { height: 12px; }
.ws-spacer-m { height: 24px; } .ws-spacer-l { height: 44px; } .ws-spacer-xl { height: 72px; }
@container ws-page (min-width: 1024px) { .ws-spacer-m { height: 32px; } .ws-spacer-l { height: 60px; } .ws-spacer-xl { height: 100px; } }
.ws-mode-canvas .ws-spacer { display: grid; place-items: center; min-height: 18px; border: 1px dashed color-mix(in oklab, var(--site-text) 18%, transparent); border-radius: 8px; }
.ws-mode-canvas .ws-spacer span { font-size: 11px; font-weight: 700; color: var(--site-muted); text-transform: uppercase; letter-spacing: .08em; }

/* css/site/blocks/stats.css */
/* Highlights: counters (the classic look); on the shared grid, rows, bento and compact variants the value leads. */
.ws-stats { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 4px; padding: 16px 8px; border-radius: calc(var(--site-radius) + 6px); text-align: center; }
.ws-stats.ws-surface { box-shadow: var(--b-shadow, none); padding: var(--b-pad, 16px 8px); }
.ws-stats > div { display: grid; gap: 2px; position: relative; }
.ws-stats > div + div::before { content: ""; position: absolute; inset-inline-start: -2px; top: 12%; bottom: 12%; width: 1px; background: color-mix(in oklab, var(--site-text) 12%, transparent); }
.ws-stats strong { font-family: var(--site-heading); font-size: 1.65rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ws-heading-serif .ws-stats strong { font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.ws-stats span { font-size: 12px; font-weight: 600; color: var(--site-muted); text-transform: uppercase; letter-spacing: .06em; }
.ws-block-stats :is(.ws-tile, .ws-tile-x) .ws-tile-text b { font-size: 2rem; letter-spacing: -0.045em; line-height: 1; }
.ws-block-stats :is(.ws-tile, .ws-tile-x) .ws-tile-text small { text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; }
.ws-block-stats .ws-cv-grid .ws-tile { min-height: 104px; justify-content: flex-end; }
.ws-block-stats .ws-cv-compact .ws-chip-t { font-family: var(--site-heading); font-size: 1.05rem; letter-spacing: -0.03em; }
.ws-block-stats .ws-cv-rows .ws-thumb { display: none; }
.ws-block-stats .ws-cv-rows .ws-t1 { font-size: 1.6rem; letter-spacing: -0.04em; }
.ws-block-stats .ws-cv-grid .ws-track { --c: min(var(--n, 3), 4); }
.ws-block-stats .ws-cv-grid .ws-tile { min-height: 96px; padding: 14px 12px; }
@container ws-page (max-width: 420px) { .ws-block-stats .ws-cv-grid .ws-tile-text b { font-size: 1.5rem; } }

/* css/site/blocks/stats_header.css */
/* Profile stats: inline (the social-profile header row, split by hairlines); rows, grid and compact are shared. */
.ws-sh-inline { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); max-width: calc(var(--n, 3) * 140px); }
.ws-sh-inline li { position: relative; min-width: 0; }
.ws-sh-inline li + li::before { content: ""; position: absolute; inset-block: 24%; inset-inline-start: 0; width: 1px; background: color-mix(in oklab, currentColor 16%, transparent); }
.ws-sh-stat { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 52px; padding: 6px 8px; border-radius: 14px; text-align: center; color: inherit; }
a.ws-sh-stat:hover { background: color-mix(in oklab, currentColor 6%, transparent); }
.ws-sh-num { font-family: var(--site-heading); font-size: calc(1.3rem * var(--b-scale, 1)); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ws-sh-label { font-size: 12.5px; font-weight: 600; line-height: 1.3; color: var(--site-muted); overflow-wrap: anywhere; }
.ws-s-align-start .ws-sh-inline { margin-inline: 0; }
.ws-s-align-start .ws-sh-stat { justify-items: start; text-align: start; }
@container ws-page (min-width: 600px) { .ws-sh-num { font-size: calc(1.45rem * var(--b-scale, 1)); } .ws-sh-label { font-size: 13px; } }
/* The shared layouts, tuned for numbers: no placeholder thumbnails, the number large, tiles as short as their content. */
.ws-block-stats-header .ws-cv-rows .ws-thumb { display: none; }
.ws-block-stats-header .ws-cv-rows .ws-row { min-height: 58px; padding: var(--b-pad, 12px 16px); }
.ws-block-stats-header .ws-cv-rows .ws-txt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.ws-block-stats-header .ws-cv-rows .ws-t1 { font-size: calc(1.3rem * var(--b-scale, 1)); font-weight: 800; font-variant-numeric: tabular-nums; }
.ws-block-stats-header .ws-cv-grid .ws-track { display: flex; flex-wrap: wrap; } .ws-block-stats-header .ws-cv-grid .ws-track > * { flex: 1 1 96px; }
.ws-block-stats-header .ws-cv-grid .ws-tile { min-height: 0; gap: 0; padding: var(--b-pad, 16px 12px); justify-content: center; text-align: center; background: var(--b-bg, var(--site-surface)); border: var(--b-border, 1px solid var(--site-line)); }
.ws-block-stats-header .ws-cv-grid .ws-tile-text { justify-items: center; }
.ws-block-stats-header .ws-cv-grid .ws-tile-text b { font-size: calc(1.5rem * var(--b-scale, 1)); font-weight: 800; font-variant-numeric: tabular-nums; }
.ws-block-stats-header .ws-cv-grid .ws-tile-arrow { top: 8px; inset-inline-end: 8px; width: 24px; height: 24px; }

/* css/site/blocks/steps.css */
/* How it works: timeline, numbered, cards, horizontal. */
.ws-st { display: grid; gap: 16px; text-align: start; }
.ws-st-list { margin: 0; padding: 0; list-style: none; }
.ws-st-step { position: relative; display: flex; gap: 14px; min-width: 0; }
.ws-st-mark { flex: none; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.ws-st-mark svg { width: 18px; height: 18px; }
.ws-st-words { display: grid; gap: 3px; min-width: 0; }
.ws-st-n { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--site-accent); }
.ws-st-t { font-family: var(--site-heading); font-weight: 700; font-size: calc(1.02rem * var(--b-scale, 1)); letter-spacing: -0.015em; line-height: 1.3; overflow-wrap: anywhere; }
.ws-st-x { color: var(--site-muted); font-size: 14px; line-height: 1.55; text-wrap: pretty; }
.ws-st-cta { justify-self: var(--b-justify, start); display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--site-btn-radius);
  background: var(--site-accent); color: var(--site-accent-text); font-weight: 700; font-size: 15px; box-shadow: 0 14px 30px -18px var(--site-accent); transition: transform .18s var(--site-ease); }
.ws-st-cta svg { width: 16px; height: 16px; }
.ws-st-cta:hover { transform: translateY(-2px); }
/* Timeline: numbered dots joined by a line. */
.ws-st-timeline .ws-st-list { gap: 0; }
.ws-st-timeline .ws-st-step { padding-block-end: 22px; }
.ws-st-timeline .ws-st-step:last-child { padding-block-end: 0; }
.ws-st-timeline .ws-st-step:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 15px; inset-block: 34px 2px; width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--site-accent) 60%, transparent), color-mix(in oklab, var(--site-text) 10%, transparent)); }
.ws-st-timeline .ws-st-mark { width: 32px; height: 32px; border-radius: 50%; background: var(--site-accent); color: var(--site-accent-text); font-weight: 800; font-size: 14px;
  box-shadow: 0 0 0 5px color-mix(in oklab, var(--site-accent) 16%, transparent); }
.ws-st-timeline .ws-st-words { padding-block-start: 4px; }
/* Numbered: editorial numerals. */
.ws-st-numbered .ws-st-list { gap: 0; }
.ws-st-numbered .ws-st-step { gap: 18px; padding-block: 16px; border-block-start: 1px solid var(--site-line); }
.ws-st-numbered .ws-st-step:first-child { border-block-start: 0; padding-block-start: 0; }
.ws-st-numbered .ws-st-mark { align-self: start; min-width: 48px; font-family: var(--site-heading); font-size: 2.1rem; font-weight: 800; line-height: .9; letter-spacing: -0.05em;
  background: linear-gradient(160deg, var(--site-accent), color-mix(in oklab, var(--site-accent) 45%, var(--site-text))); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Cards. */
.ws-st-cards .ws-st-list { display: grid; gap: 10px; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
.ws-st-cards .ws-st-step { flex-direction: column; gap: 12px; padding: var(--b-pad, 18px); border-radius: var(--b-radius, calc(var(--site-radius) + 6px)); }
.ws-st-cards .ws-st-mark { width: 44px; height: 44px; border-radius: calc(var(--site-radius) - 2px); background: color-mix(in oklab, var(--site-accent) 15%, transparent); color: var(--site-accent); font-weight: 800; font-size: 16px; }
@container ws-page (min-width: 600px) { .ws-st-cards .ws-st-list { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); } }
/* Horizontal: a row joined by a line; a swipeable strip on phones. */
.ws-st-horizontal .ws-st-list { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-block: 2px 6px; }
.ws-st-horizontal .ws-st-list::-webkit-scrollbar { display: none; }
.ws-st-horizontal .ws-st-step { flex: 0 0 72%; flex-direction: column; gap: 12px; scroll-snap-align: start; }
.ws-st-horizontal .ws-st-step:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 21px; inset-inline: 54px -10px; height: 2px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, color-mix(in oklab, var(--site-accent) 55%, transparent) 0 6px, transparent 6px 11px); }
.ws-st-horizontal .ws-st-mark { width: 44px; height: 44px; border-radius: 50%; background: var(--site-surface); color: var(--site-accent); font-weight: 800; font-size: 16px;
  border: 2px solid var(--site-accent); box-shadow: var(--site-shadow-sm); }
@container ws-page (min-width: 600px) { .ws-st-horizontal .ws-st-list { overflow: visible; } .ws-st-horizontal .ws-st-step { flex: 1 1 0; } }
.ws-st-list:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 55%, transparent); outline-offset: 4px; border-radius: 12px; }

/* css/site/blocks/sticky_cta.css */
/* Sticky button bar (B4): bar (a glass dock), floating (an extended round button), pill. Lives in the bottom sticky
   slot (.ws-sticky, after the page, safe-area padded). site-utility.js adds .is-away until the visitor scrolls past the
   first screen and while the on-screen keyboard is open. */
.ws-sticky > .ws-block-sticky-cta { width: min(100%, 680px); }
.ws-sticky > .ws-block-sticky-cta.ws-v-floating { justify-self: end; width: auto; max-width: 100%; }
.ws-sticky > .ws-block-sticky-cta.ws-v-pill { width: auto; max-width: 100%; }
.ws-scta { container: scta / inline-size; transition: transform .38s var(--site-ease), opacity .28s ease, visibility 0s linear 0s; }
.ws-v-floating .ws-scta, .ws-v-pill .ws-scta { container-type: normal; }
.ws-scta.is-away { transform: translateY(calc(100% + 24px)); opacity: 0; visibility: hidden; pointer-events: none; transition: transform .3s ease, opacity .2s ease, visibility 0s linear .3s; }
.ws-scta-in { display: flex; align-items: center; gap: 10px 14px; min-width: 0; }
.ws-scta-text { flex: 1 1 12ch; min-width: 0; margin: 0; font-size: 14px; font-weight: 650; line-height: 1.3; color: var(--site-text); text-wrap: balance; unicode-bidi: plaintext; }
.ws-scta-acts { display: flex; gap: 8px; flex: none; min-width: 0; }
.ws-scta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; min-width: 48px; padding: 0 18px; border-radius: var(--site-btn-radius); border: 0;
  font: inherit; font-size: 15px; font-weight: 700; line-height: 1.1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .18s var(--site-ease), filter .18s ease, box-shadow .18s ease; }
.ws-scta-btn:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 55%, transparent); outline-offset: 2px; }
.ws-scta-btn:active { transform: scale(.97); }
.ws-scta-primary { background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 10px 24px -12px color-mix(in oklab, var(--site-accent) 80%, transparent); }
.ws-scta-primary:hover { filter: brightness(1.06); }
.ws-scta-secondary { background: color-mix(in oklab, var(--site-text) 7%, var(--site-surface)); color: var(--site-text); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--site-text) 12%, transparent); }
.ws-scta-secondary:hover { background: color-mix(in oklab, var(--site-text) 11%, var(--site-surface)); }
.ws-scta-ico { display: grid; place-items: center; flex: none; }
.ws-site .ws-scta-ico svg { width: 18px; height: 18px; }
.ws-scta-label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ws-scta-price { padding: 3px 8px; border-radius: 999px; font-size: 12.5px; font-weight: 750; background: color-mix(in oklab, currentColor 16%, transparent); font-variant-numeric: tabular-nums; }
.ws-scta-done { margin: 0; cursor: default; background: color-mix(in oklab, var(--site-accent) 14%, var(--site-surface)); color: var(--site-text); white-space: normal; font-size: 13.5px; }
.ws-site .ws-scta-done svg { width: 18px; height: 18px; color: var(--site-accent); flex: none; }

/* Bar: a frosted dock with the text beside the buttons; on a narrow screen two buttons share the row under the text. */
.ws-scta-bar .ws-scta-in { padding: 10px 10px 10px 18px; border-radius: calc(var(--site-radius) + 10px); background: color-mix(in oklab, var(--site-surface) 80%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); border: 1px solid color-mix(in oklab, var(--site-text) 10%, transparent);
  box-shadow: 0 24px 48px -20px rgb(0 0 0 / .45), 0 2px 6px -2px rgb(0 0 0 / .12); }
.ws-scta-bar:not(:has(.ws-scta-text)) .ws-scta-in { padding-inline-start: 10px; }
.ws-scta-bar:not(:has(.ws-scta-text)) .ws-scta-acts { flex: 1; }
.ws-scta-bar:not(:has(.ws-scta-text)) .ws-scta-btn { flex: 1; }
@container scta (max-width: 520px) {
  .ws-scta-bar.has-two .ws-scta-in { flex-wrap: wrap; padding: 12px; }
  .ws-scta-bar.has-two .ws-scta-text { flex-basis: 100%; padding-inline: 6px; font-size: 13.5px; }
  .ws-scta-bar.has-two .ws-scta-acts { flex: 1 1 100%; }
  .ws-scta-bar.has-two .ws-scta-btn { flex: 1 1 0; padding-inline: 12px; }
  .ws-scta-bar.has-two .ws-scta-price { display: none; }
}

/* Floating: the main action as an extended round button, the second as a small round one above it. */
.ws-scta-floating .ws-scta-in { flex-direction: column-reverse; align-items: flex-end; gap: 10px; }
.ws-scta-floating .ws-scta-acts { flex-direction: column-reverse; align-items: flex-end; gap: 10px; }
.ws-scta-floating .ws-scta-btn { border-radius: 999px; }
.ws-scta-floating .ws-scta-primary { min-height: 58px; padding: 0 24px 0 20px; font-size: 16px;
  box-shadow: 0 18px 38px -14px rgb(0 0 0 / .5), 0 0 0 5px color-mix(in oklab, var(--site-accent) 20%, transparent); }
.ws-scta-floating .ws-scta-secondary { width: 50px; height: 50px; padding: 0; background: var(--site-surface); box-shadow: 0 14px 30px -14px rgb(0 0 0 / .5), inset 0 0 0 1px color-mix(in oklab, var(--site-text) 10%, transparent); }
.ws-scta-floating .ws-scta-secondary .ws-scta-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ws-site .ws-scta-floating .ws-scta-primary .ws-scta-ico svg { width: 21px; height: 21px; }

/* Pill: one compact chip in the middle, the text as a quiet lead-in. */
.ws-scta-pill .ws-scta-in { padding: 6px 6px 6px 18px; border-radius: 999px; gap: 12px; background: color-mix(in oklab, var(--site-text) 90%, transparent); color: var(--site-surface);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 20px 40px -18px rgb(0 0 0 / .55); }
.ws-scta-pill:not(:has(.ws-scta-text)) .ws-scta-in { padding-inline-start: 6px; }
.ws-scta-pill .ws-scta-text { flex: 0 1 auto; color: inherit; font-size: 13.5px; max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-scta-pill .ws-scta-btn { border-radius: 999px; min-height: 44px; padding: 0 16px; font-size: 14px; }
.ws-scta-pill .ws-scta-secondary { background: color-mix(in oklab, var(--site-surface) 16%, transparent); color: inherit; box-shadow: none; }

/* The email sheet's form. */
.ws-scta-form { display: grid; gap: 12px; }
.ws-scta-field { display: grid; gap: 6px; font-size: 13px; font-weight: 650; color: var(--site-muted); }
.ws-scta-form .ws-submit { width: 100%; min-height: 48px; }

/* Builder canvas and thumbnails: always shown, never moved off screen. */
.ws-mode-canvas .ws-scta.is-away, .ws-is-thumb .ws-scta.is-away { transform: none; opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .ws-scta, .ws-scta.is-away { transform: none; transition: opacity .001ms, visibility 0s; }
}
/* The slot as a container, so the pill can drop its text when two buttons need the room. */
.ws-sticky:has(> .ws-block-sticky-cta) { container: ws-sticky / inline-size; }
@container ws-sticky (max-width: 480px) {
  .ws-scta-pill.has-two .ws-scta-text { display: none; }
  .ws-scta-pill.has-two .ws-scta-in { padding-inline-start: 6px; }
}

/* css/site/blocks/storefront.css */
/* Storefront: full (pills, search, grid), categories (tabs of swipeable rows), compact (a shop card). */
.sf2 { display: grid; gap: 14px; text-align: start; }
.sf2-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; }
.sf2-head .ix-head { flex: 1 1 240px; }
.sf2-all { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; font-size: 14px; font-weight: 800; color: var(--site-accent); text-decoration: none; }
.sf2-all svg { width: 16px; height: 16px; transition: transform .18s var(--site-ease); }
.sf2-all:hover svg { transform: translateX(3px); }
[dir="rtl"] .sf2-all svg, [dir="rtl"] .sf2 .ix-go svg { transform: scaleX(-1); }
.sf2-tools { display: grid; gap: 10px; }
.sf2-tools[hidden] { display: none; }
.sf2-search { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; border-radius: var(--site-btn-radius);
  border: 1px solid color-mix(in oklab, var(--site-text) 14%, transparent); background: var(--site-surface); }
.sf2-search:focus-within { border-color: var(--site-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 22%, transparent); }
.sf2-search svg { width: 18px; height: 18px; color: var(--site-muted); flex: none; }
.sf2-search input { flex: 1; min-width: 0; height: 46px; border: 0; background: transparent; color: inherit; font: inherit; font-size: 15px; }
.sf2-search input:focus { outline: none; }
.sf2-pills { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 2px; margin: -2px; }
.sf2-pills::-webkit-scrollbar { display: none; }
.sf2-pill { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid color-mix(in oklab, var(--site-text) 14%, transparent); background: var(--site-surface); color: var(--site-text); font: inherit; font-size: 14px; font-weight: 700; }
.sf2-pill small { font-size: 12px; font-weight: 700; color: var(--site-muted); }
.sf2-pill[aria-pressed="true"], .sf2-pill[aria-selected="true"] { background: var(--site-text); border-color: var(--site-text); color: var(--site-bg-base); }
.sf2-pill[aria-pressed="true"] small, .sf2-pill[aria-selected="true"] small { color: color-mix(in oklab, var(--site-bg-base) 75%, transparent); }
.sf2-pill:focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 25%, transparent); }
.sf2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@container ws-page (min-width: 600px) { .sf2-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@container ws-page (min-width: 1100px) { .sf2-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ws-sys-classic .sf2-grid, .ws-sys-minimal .sf2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf2-card { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--site-radius); text-decoration: none; color: var(--site-text);
  background: var(--site-surface); border: 1px solid color-mix(in oklab, var(--site-text) 9%, transparent); box-shadow: var(--site-shadow-sm); transition: transform .2s var(--site-ease), box-shadow .2s; }
.sf2-card[hidden] { display: none; }
.sf2-card:hover { transform: translateY(-2px); box-shadow: var(--site-shadow-md); }
.sf2-card:focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 30%, transparent); }
.sf2-media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: color-mix(in oklab, var(--site-accent) 8%, var(--site-surface)); }
.sf2-media .ws-media { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s var(--site-ease); }
.sf2-card:hover .sf2-media .ws-media { transform: scale(1.04); }
.sf2-media .ws-badge { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; }
.sf2-body { display: grid; gap: 4px; align-content: start; padding: 10px 12px 12px; }
.sf2-name { font-size: 14.5px; font-weight: 750; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf2-sub { font-size: 12.5px; color: var(--site-muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sf2-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; align-self: end; }
.sf2-price { display: inline-flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.sf2-price b { font-weight: 800; }
.sf2-price s { font-size: 12px; color: var(--site-muted); }
.sf2-add { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text); }
.sf2-add svg { width: 16px; height: 16px; stroke-width: 2.6; }
.sf2-none { margin: 0; padding: 18px; text-align: center; color: var(--site-muted); font-weight: 600; }
.sf2-none[hidden] { display: none; }
/* Categories: a swipeable row per kind. */
.sf2-cats .sf2-pills { margin-bottom: 2px; }
.sf2-panel { display: grid; gap: 10px; }
.sf2-panel[hidden] { display: none; }
.sf2-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(168px, 44%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 8px; margin: -2px;
  scrollbar-width: thin; overscroll-behavior-x: contain; }
.sf2-row > * { scroll-snap-align: start; }
.sf2-row:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 2px; }
@container ws-page (min-width: 600px) { .sf2-row { grid-auto-columns: minmax(190px, 30%); } }
@container ws-page (min-width: 1100px) { .sf2-row { grid-auto-columns: minmax(200px, 23%); } }
/* Compact: a shop card. */
.sf2-rows { display: grid; gap: 4px; }
.sf2-rowitem { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px; margin: 0 -8px; border-radius: calc(var(--site-radius) - 4px); text-decoration: none; color: var(--site-text); }
.sf2-rowitem:hover { background: color-mix(in oklab, var(--site-text) 5%, transparent); }
.sf2-thumb { flex: none; width: 52px; height: 52px; border-radius: 12px; overflow: hidden; background: color-mix(in oklab, var(--site-accent) 10%, var(--site-surface)); display: grid; place-items: center; }
.sf2-thumb .ws-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf2-rowtext { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sf2-rowtext b { font-weight: 750; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf2-rowtext small { font-size: 12.5px; color: var(--site-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf2-rowtext .sf2-rowbadge { color: var(--site-accent); font-weight: 700; }
.sf2-rowprice { flex: none; font-weight: 800; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .sf2-card, .sf2-media .ws-media, .sf2-all svg { transition: none; } }
.ws-site a.sf2-all { color: var(--site-accent); }

/* css/site/blocks/supporter_perks.css */
/* Supporter perks: cards and checklist (rows is the shared collection variant). */
.spk-cards { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@container ws-page (min-width: 600px) { .spk-cards { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } }
.spk-card { display: flex; flex-direction: column; gap: 8px; padding: var(--b-pad, 18px); text-align: var(--b-align, start); position: relative; }
.spk-card.is-mid { box-shadow: 0 0 0 2px var(--site-accent), var(--site-shadow-lg); }
.spk-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in oklab, var(--site-accent) 15%, transparent); color: var(--site-accent); }
.spk-ico svg { width: 20px; height: 20px; }
.spk-price { margin: 4px 0 0; font-family: var(--site-heading); font-size: calc(1.5rem * var(--b-scale, 1)); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.spk-t { margin: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.spk-tx { margin: 0; color: var(--site-muted); font-size: 13.5px; line-height: 1.5; flex: 1; }
.spk-cta { margin-top: 6px; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: var(--site-btn-radius); font-weight: 800; font-size: 14px;
  background: color-mix(in oklab, var(--site-accent) 14%, transparent); color: var(--site-text); border: 1.5px solid color-mix(in oklab, var(--site-accent) 40%, transparent); }
.spk-card.is-mid .spk-cta, .spk-cta:hover { background: var(--site-accent); color: var(--site-accent-text); border-color: transparent; }
.spk-checklist { list-style: none; margin: 0; padding: 6px; display: grid; }
.spk-checklist li + li { border-top: 1px solid var(--site-line); }
.spk-line { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; border-radius: calc(var(--site-radius) - 2px); text-align: start; }
.spk-tick { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text); }
.spk-tick svg { width: 14px; height: 14px; stroke-width: 3; }
.spk-line-t { display: grid; gap: 2px; min-width: 0; flex: 1; }
.spk-line-t strong { font-weight: 700; }
.spk-line-t small { color: var(--site-muted); font-size: 13px; line-height: 1.4; }
.spk-amt { flex: none; padding: 6px 11px; border-radius: 999px; font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; background: color-mix(in oklab, var(--site-accent) 13%, transparent); color: var(--site-text); }
a.spk-line:hover .spk-amt { background: var(--site-accent); color: var(--site-accent-text); }

/* css/site/blocks/survey.css */
/* Short survey (B4 · Q4): a header with the count and time, then the Forms renderer, one question per step. */
.svx { display: grid; gap: 14px; padding: var(--b-pad, 20px); text-align: start; }
.svx-head { display: flex; gap: 14px; align-items: center; }
.svx-badge { flex: none; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text);
  box-shadow: 0 12px 24px -14px var(--site-accent); }
.svx-badge svg { width: 22px; height: 22px; }
.svx-titles { display: grid; gap: 4px; min-width: 0; }
.svx-title { margin: 0; font-family: var(--site-heading); font-size: calc(1.25rem * var(--b-scale, 1)); font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.svx-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; color: var(--site-muted); font-size: 12.5px; font-weight: 650; }
.svx-meta span { display: inline-flex; align-items: center; gap: 5px; }
.svx-meta svg { width: 13px; height: 13px; }
.svx-intro { margin: 0; color: var(--site-muted); font-size: 14.5px; line-height: 1.55; }
.svx-form .wf { margin: 0; }
.svx-steps .wf-step-title { display: none; }
.svx-steps .wf-label { font-size: 1.05rem; font-weight: 700; }
.svx-demo { display: grid; gap: 10px; }
.svx-opt { display: block; padding: 12px 14px; border-radius: calc(var(--site-radius) - 4px); border: 1px solid color-mix(in oklab, var(--site-text) 15%, transparent); font-weight: 600; }
.svx-opt.is-on { border-color: var(--site-accent); box-shadow: inset 0 0 0 1px var(--site-accent); }

/* css/site/blocks/table.css */
/* Table / comparison (B3 · U3). table: stacks into labelled cards on phones; compare: scrolls sideways with a
   sticky first column and a highlighted column; cards: each row a card. */
.tb { margin: 0; display: grid; gap: 10px; text-align: start; min-width: 0; }
.tb-title { margin: 0; font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.025em; font-weight: 700; font-family: var(--site-heading, inherit); text-align: var(--b-align, start); }
.tb-scroll { border-radius: var(--b-radius, calc(var(--site-radius) + 2px)); overflow: hidden; }
.tb-t { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.tb-cap { caption-side: bottom; padding: 10px 16px; font-size: 12.5px; color: var(--site-muted); text-align: start; }
.tb-t th, .tb-t td { padding: 12px 16px; vertical-align: middle; }
.tb-t thead th { font-size: 12.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--site-muted); border-block-end: 1px solid var(--site-line); }
.tb-t tbody tr + tr > * { border-block-start: 1px solid color-mix(in oklab, var(--site-text) 7%, transparent); }
.tb-t tbody th { font-weight: 700; }
.is-striped .tb-t tbody tr:nth-child(even) { background: color-mix(in oklab, var(--site-text) 3.5%, transparent); }
.tb-a-start { text-align: start; } .tb-a-center { text-align: center; } .tb-a-end { text-align: end; }
.tb-yes, .tb-no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; }
.tb-yes { background: color-mix(in oklab, var(--site-accent) 16%, transparent); color: var(--site-accent); }
.tb-no { color: color-mix(in oklab, var(--site-text) 35%, transparent); }
.tb-yes svg, .tb-no svg { width: 15px; height: 15px; }
/* table: phones stack each row into a labelled card */
@container ws-page (max-width: 599px) {
  .tb-table .tb-scroll { background: none; border: 0; box-shadow: none; overflow: visible; }
  .tb-table .tb-t, .tb-table .tb-t tbody, .tb-table .tb-t tr, .tb-table .tb-t th, .tb-table .tb-t td { display: block; }
  .tb-table .tb-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tb-table .tb-t tbody { display: grid; gap: 10px; }
  .tb-table .tb-t tbody tr { padding: 6px 0; border-radius: var(--b-radius, var(--site-radius)); background: var(--b-bg, var(--site-surface)); border: var(--b-border, 1px solid var(--site-line)); }
  .tb-table .tb-t tbody tr + tr > * { border: 0; }
  .tb-table .tb-t tbody th { font-size: 15.5px; padding: 10px 16px 6px; text-align: start; }
  .tb-table .tb-t td { display: flex; justify-content: space-between; gap: 12px; padding: 7px 16px; text-align: end; }
  .tb-table .tb-t td::before { content: attr(data-label); color: var(--site-muted); font-weight: 600; text-align: start; }
  .tb-table .tb-t td.is-empty { display: none; }
  .tb-table .tb-t { display: flex; flex-direction: column; }
  .tb-table .tb-cap { display: block; order: 2; padding: 8px 2px 0; }
}
/* compare */
.tb-compare .tb-scroll { overflow-x: auto; scrollbar-width: thin; }
.tb-compare .tb-t { min-width: max(100%, calc(var(--cols, 4) * 120px)); }
.tb-compare .tb-t th:first-child, .tb-compare .tb-t td:first-child { position: sticky; inset-inline-start: 0; z-index: 1; background: var(--b-bg, var(--site-surface)); }
.tb-compare .is-hl { background: color-mix(in oklab, var(--site-accent) 9%, var(--b-bg, var(--site-surface))); }
.tb-compare thead .is-hl { color: var(--site-accent); }
.tb-pick { display: block; width: fit-content; margin: 0 auto 6px; padding: 2px 8px; border-radius: 999px; background: var(--site-accent); color: var(--site-accent-text); font-size: 10.5px; letter-spacing: .06em; }
.tb-compare .tb-t thead th { padding-block: 16px; }
/* cards */
.tb-cards { display: grid; gap: 10px; }
.tb-card { margin: 0; padding: 16px; border-radius: var(--b-radius, calc(var(--site-radius) + 2px)); display: grid; gap: 2px; }
.tb-card-title { font-weight: 800; font-size: 1.02rem; margin-bottom: 6px; letter-spacing: -0.01em; }
.tb-card-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-block-start: 1px solid color-mix(in oklab, var(--site-text) 7%, transparent); font-size: 14px; }
.tb-card-row dt { color: var(--site-muted); font-weight: 600; }
.tb-card-row dd { margin: 0; text-align: end; font-weight: 600; }
.tb-card-row.is-hl dd { color: var(--site-accent); }
@container ws-page (min-width: 600px) { .tb-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container ws-page (min-width: 1024px) { .tb-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* css/site/blocks/tabs_content.css */
/* Tabbed content (B3 · U3): tabs (underlined bar), pills (chips), segmented (one track, a raised thumb). Logical
   properties only; the bar scrolls sideways on phones with a fade at the edge. */
.tc { display: flex; flex-direction: column; gap: 14px; text-align: start; }
.tc-head { display: grid; gap: 4px; text-align: var(--b-align, start); }
.tc-title { margin: 0; font-size: 1.35rem; line-height: 1.2; letter-spacing: -0.025em; font-weight: 700; font-family: var(--site-heading, inherit); }
.tc-intro { margin: 0; color: var(--site-muted); font-size: 14.5px; }
.tc-bar { position: relative; }
.tc-list { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.tc-list::-webkit-scrollbar { display: none; }
.tc-tab { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; background: transparent; color: var(--site-muted); font: inherit; font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer; transition: color .2s, background .2s, box-shadow .2s, border-color .2s; }
.tc-tab:hover { color: var(--site-text); }
.tc-tab:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 55%, transparent); outline-offset: 2px; }
.tc-tab-ico { display: grid; }
.tc-tab-ico svg { width: 16px; height: 16px; }
.tc-tab[aria-selected="true"] { color: var(--site-text); }
/* tabs: a hairline under the bar, the active tab underlined in the accent */
.tc-tabs .tc-list { border-block-end: 1px solid var(--site-line); gap: 2px; }
.tc-tabs .tc-tab { border-block-end: 2.5px solid transparent; margin-block-end: -1px; border-radius: 0; padding-inline: 14px; }
.tc-tabs .tc-tab[aria-selected="true"] { border-block-end-color: var(--site-accent); }
/* pills */
.tc-pills .tc-list { gap: 8px; padding: 2px; }
.tc-pills .tc-tab { border-radius: 999px; border: 1px solid var(--site-line); background: color-mix(in oklab, var(--site-surface) 70%, transparent); }
.tc-pills .tc-tab[aria-selected="true"] { background: var(--site-accent); border-color: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 10px 22px -14px var(--site-accent); }
/* segmented */
.tc-segmented .tc-list { padding: 4px; border-radius: calc(var(--site-radius) + 4px); background: color-mix(in oklab, var(--site-text) 7%, transparent); gap: 2px; }
.tc-segmented .tc-tab { flex: 1 0 auto; justify-content: center; border-radius: var(--site-radius); min-height: 40px; }
.tc-segmented .tc-tab[aria-selected="true"] { background: var(--site-surface); box-shadow: var(--site-shadow-sm, 0 2px 8px -4px rgb(0 0 0 / .25)); }
.ws-s-align-center .tc-segmented .tc-list, .ws-s-align-center .tc-pills .tc-list { width: fit-content; max-width: 100%; margin-inline: auto; }
.tc-panels { display: flex; flex-direction: column; gap: 22px; }
.tc-panel { display: flex; flex-direction: column; gap: 10px; outline: none; }
.tc-panel:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 45%, transparent); outline-offset: 6px; border-radius: var(--site-radius); }
.tc-panel[hidden] { display: none; }
.tc-blocks { display: flex; flex-direction: column; gap: var(--gap, 12px); }
.tc-ptitle { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.015em; }
/* With scripts the tab names the panel; without, the bar is gone and every panel keeps its title. */
.ws-js .ws-mode-public .tc.is-tabbed .tc-ptitle, .ws-mode-thumb .tc-ptitle { display: none; }
html:not(.ws-js) .ws-mode-public .tc-bar { display: none; }
.ws-mode-public .tc-panel { animation: tc-in .28s cubic-bezier(.2,.8,.2,1); }
@keyframes tc-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .ws-mode-public .tc-panel { animation: none; } }
/* The builder shows every panel, separated */
.ws-mode-canvas .tc-panel + .tc-panel { padding-block-start: 16px; border-block-start: 1.5px dashed color-mix(in oklab, var(--site-text) 18%, transparent); }
.ws-mode-thumb .tc-panel:not(:first-child) { display: none; }
.tc-demo { display: grid; gap: 6px; padding: 18px; border-radius: var(--b-radius, var(--site-radius)); }
.tc-demo span { color: var(--site-muted); font-size: 14px; }
.tc-demo i { display: block; height: 9px; border-radius: 6px; background: color-mix(in oklab, var(--site-text) 9%, transparent); }
.tc-demo i + i { width: 62%; }

/* css/site/blocks/team.css */
/* Team: cards (grid, carousel and rows are the shared collection variants). */
.tm-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@container ws-page (min-width: 600px) { .tm-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tm-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: var(--b-pad, 18px 14px); text-align: center; min-width: 0; }
.tm-photo { width: 84px; height: 84px; border-radius: 50%; overflow: hidden; flex: none; display: grid; place-items: center; box-shadow: 0 0 0 3px var(--site-surface), 0 0 0 5px color-mix(in oklab, var(--site-accent) 35%, transparent); }
.tm-initials { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--site-heading); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em;
  background: linear-gradient(145deg, color-mix(in oklab, var(--site-accent) 80%, var(--site-surface)), color-mix(in oklab, var(--site-accent) 60%, var(--site-ink-dark))); color: var(--site-accent-text); }
.tm-t { display: grid; gap: 2px; min-width: 0; }
.tm-name { font-family: var(--site-heading); font-weight: 700; letter-spacing: -0.015em; font-size: 1rem; overflow-wrap: anywhere; }
.tm-role { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--site-accent); }
.tm-bio { margin: 0; color: var(--site-muted); font-size: 13px; line-height: 1.5; flex: 1; }
.tm-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tm-link { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 700; background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.tm-link:hover { background: var(--site-accent); color: var(--site-accent-text); }
.tm-link svg { width: 14px; height: 14px; }

/* css/site/blocks/testimonial.css */
/* Testimonial (one): card, large, minimal, split, bubble, video. The card itself is styled by testimonials.css. */
.ws-tm.ws-tm1-large { align-items: center; text-align: center; gap: 18px; padding: var(--b-pad, 12px 4px); }
.ws-tm1-large::before { content: "“"; display: block; height: .55em; margin-block-end: -6px; font-family: var(--site-heading); font-size: 5rem; line-height: 1; font-weight: 800; color: var(--site-accent); }
.ws-tm1-large .ws-tm-top { justify-content: center; }
.ws-tm1-large .ws-tm-q p { font-family: var(--site-heading); font-size: clamp(1.3rem, 1.05rem + 1.6cqw, 2rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.025em; text-wrap: balance; }
.ws-tm1-large .ws-tm-q p::before, .ws-tm1-large .ws-tm-q p::after { content: none; }
.ws-tm1-large .ws-tm-by { justify-content: center; }
.ws-tm1-large .ws-tm-who { flex: none; text-align: start; }
.ws-tm.ws-tm1-minimal { align-items: center; text-align: center; gap: 10px; padding: var(--b-pad, 6px 4px); }
.ws-tm1-minimal .ws-tm-q p { font-size: calc(17px * var(--b-scale, 1)); color: var(--site-text); }
.ws-tm1-minimal .ws-tm-av { display: none; }
.ws-tm1-minimal .ws-tm-by { justify-content: center; }
.ws-tm1-minimal .ws-tm-who { flex: none; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; justify-content: center; }
.ws-tm1-minimal .ws-tm-who b::before { content: "— "; }
.ws-tm1-minimal .ws-tm-top { justify-content: center; }
/* Bubble: the words in a speech bubble, the person beneath its tail. */
.ws-tm.ws-tm1-bubble { padding: 0; gap: 16px; }
.ws-tm1-bubble .ws-tm-top { order: 2; padding-inline: 4px; }
.ws-tm1-bubble .ws-tm-q { position: relative; order: 1; padding: var(--b-pad, 18px 20px); border-radius: var(--b-radius, calc(var(--site-radius) + 10px));
  background: var(--b-bg, var(--site-accent)); color: var(--b-fg, var(--site-accent-text)); box-shadow: 0 18px 36px -22px var(--site-accent); }
.ws-tm1-bubble .ws-tm-q::after { content: ""; position: absolute; inset-block-start: 100%; inset-inline-start: 26px; width: 22px; height: 14px; background: inherit; clip-path: polygon(0 0, 100% 0, 0 100%); }
[dir="rtl"] .ws-tm1-bubble .ws-tm-q::after { clip-path: polygon(0 0, 100% 0, 100% 100%); }
.ws-tm1-bubble .ws-tm-q p { font-size: calc(16.5px * var(--b-scale, 1)); font-weight: 600; }
.ws-tm1-bubble .ws-tm-by { order: 3; padding-inline: 12px; }
/* Split: a portrait beside the words. */
.ws-tm1.ws-tm1-split { display: grid; overflow: hidden; border-radius: var(--b-radius, calc(var(--site-radius) + 8px)); padding: 0; }
.ws-tm1-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: color-mix(in oklab, var(--site-accent) 16%, var(--site-surface)); }
.ws-tm1-photo .ws-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ws-tm1-mono { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--site-heading); font-size: 3.4rem; font-weight: 800; letter-spacing: -0.03em; color: var(--site-accent);
  background: radial-gradient(80% 80% at 30% 20%, color-mix(in oklab, var(--site-accent) 30%, transparent), transparent 70%); }
.ws-tm1-split .ws-tm1-body { padding: var(--b-pad, 20px 20px 22px); border-radius: 0; }
.ws-tm1-split .ws-tm-q p { font-size: calc(17px * var(--b-scale, 1)); }
@container ws-page (min-width: 600px) { .ws-tm1-split { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } .ws-tm1-photo { aspect-ratio: auto; min-height: 100%; } .ws-tm1-split .ws-tm1-body { align-self: center; padding: 28px 28px 26px; } }
/* Video. */
.ws-tm1-video { display: grid; overflow: hidden; padding: 0; border-radius: var(--b-radius, calc(var(--site-radius) + 8px)); }
.ws-tm1-frame { position: relative; width: 100%; max-height: 80svh; margin-inline: auto; background: var(--site-ink-dark); }
.ws-tm1-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.ws-tm1-stand { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--site-ink-light);
  background: radial-gradient(90% 90% at 20% 10%, color-mix(in oklab, var(--site-accent) 45%, transparent), transparent 60%), var(--site-ink-dark); }
.ws-tm1-stand small { font-size: 12.5px; font-weight: 600; opacity: .8; }
.ws-tm1-play { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--site-ink-light); color: var(--site-ink-dark); box-shadow: 0 16px 34px -12px rgb(0 0 0 / .6); }
.ws-tm1-play svg { width: 22px; height: 22px; fill: currentColor; margin-inline-start: 3px; }
.ws-tm1-video .ws-tm1-body { border-radius: 0; }
.ws-tm1-split .ws-tm-av { display: none; }

/* css/site/blocks/testimonials.css */
/* Testimonials (and the single Testimonial's card): carousel, grid, masonry, marquee, stack-cards, list. */
.ws-tm { margin: 0; display: flex; flex-direction: column; gap: 14px; padding: var(--b-pad, 20px); text-align: start; min-width: 0; height: 100%;
  border-radius: var(--b-radius, calc(var(--site-radius) + 6px)); }
.ws-tm-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.ws-tm-stars { position: relative; display: inline-block; font-size: 15px; line-height: 1; letter-spacing: 2px; color: color-mix(in oklab, var(--site-text) 16%, transparent); white-space: nowrap; }
.ws-tm-stars-on { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--r, 100%); overflow: hidden; color: var(--site-star, hsl(42 96% 52%)); }
.ws-tm-src { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--site-muted); }
a.ws-tm-src { min-height: 32px; text-decoration: underline; text-decoration-color: color-mix(in oklab, currentColor 30%, transparent); text-underline-offset: 3px; }
a.ws-tm-src:hover { color: var(--site-text); }
.ws-tm-src svg { width: 13px; height: 13px; }
.ws-tm-q { margin: 0; flex: 1; }
.ws-tm-q p { margin: 0; font-size: calc(15.5px * var(--b-scale, 1)); line-height: 1.6; font-weight: 500; letter-spacing: -0.005em; text-wrap: pretty; }
.ws-tm-q p::before { content: "“"; } .ws-tm-q p::after { content: "”"; }
.ws-heading-serif .ws-tm-q p { font-family: var(--site-heading); font-style: italic; font-size: calc(17px * var(--b-scale, 1)); }
.ws-tm-by { display: flex; align-items: center; gap: 11px; min-width: 0; }
.ws-tm-av { width: 42px; height: 42px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; font-weight: 800; font-size: 14px; letter-spacing: .02em;
  background: linear-gradient(145deg, color-mix(in oklab, var(--site-accent) 30%, var(--site-surface)), color-mix(in oklab, var(--site-accent) 60%, var(--site-surface))); color: color-mix(in oklab, var(--site-accent) 45%, var(--site-text)); }
.ws-tm-av .ws-media { width: 100%; height: 100%; object-fit: cover; }
.ws-tm-who { display: grid; min-width: 0; flex: 1; line-height: 1.3; }
.ws-tm-who b { font-size: 14px; }
.ws-tm-who span { color: var(--site-muted); font-size: 12.5px; }
.ws-tm-go { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--site-muted); }
.ws-tm-go:hover { color: var(--site-text); background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.ws-tm-go svg { width: 16px; height: 16px; }

.ws-tms-head { gap: 6px; }
.ws-tms-avg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 0 !important; color: var(--site-text) !important; font-size: 14px !important; }
.ws-tms-avg b { font-size: 15px; }
.ws-tms-avg span:last-child { color: var(--site-muted); }
.ws-tms .ws-track { gap: 12px; }
.ws-tms-cell { min-width: 0; }

/* Carousel. */
.ws-tms-carousel .ws-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding: 2px 2px 10px; margin: -2px -2px 0; }
.ws-tms-carousel .ws-track::-webkit-scrollbar { display: none; }
.ws-tms-carousel .ws-tms-cell { flex: 0 0 var(--car-w, 86%); scroll-snap-align: start; }
.ws-tms-carousel .ws-car-nav { display: flex; }
@container ws-page (min-width: 600px) { .ws-tms-carousel .ws-tms-cell { flex-basis: var(--car-w, 60%); } }
@container ws-page (min-width: 1024px) { .ws-tms-carousel .ws-tms-cell { flex-basis: var(--car-w, calc((100% - 12px) / 2)); } }
/* Grid and masonry. */
.ws-tms-grid .ws-track { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); }
.ws-tms-masonry .ws-track { display: block; columns: var(--cols, 1); column-gap: 12px; }
.ws-tms-masonry .ws-tms-cell { break-inside: avoid; margin-block-end: 12px; }
.ws-tms-masonry .ws-tms-cell:nth-child(3n+1) .ws-tm-q p { font-size: calc(16.5px * var(--b-scale, 1)); }
@container ws-page (min-width: 600px) { .ws-tms-grid .ws-track { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); } .ws-tms-masonry .ws-track { columns: var(--cols, 2); } }
/* Marquee: fixed-width cards on the shared marquee strip; a pause button in the corner. */
.ws-tms-marquee .ws-track { align-items: stretch; gap: 12px; animation-duration: calc(var(--n, 4) * 9s); }
.ws-tms-marquee .ws-tms-cell { flex: 0 0 290px; }
.ws-tms-marquee .ws-tm-q p { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.ws-tms-marquee.is-paused .ws-track { animation-play-state: paused; }
.ws-tms-marquee .ws-mq-view { padding-block: 4px 12px; }
.ws-tms-pause { position: absolute; inset-block-end: -6px; inset-inline-end: 0; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--site-line); background: var(--site-surface);
  color: var(--site-text); display: grid; place-items: center; cursor: pointer; box-shadow: var(--site-shadow-sm); z-index: 2; }
.ws-tms-marquee:has(.ws-tms-pause:not([hidden])) { padding-block-end: 40px; }
.ws-tms-pause[hidden] { display: none; }
.ws-tms-pause svg { width: 15px; height: 15px; }
.ws-tms-i-play { display: none; }
.ws-tms-marquee.is-paused .ws-tms-i-play { display: grid; }
.ws-tms-marquee.is-paused .ws-tms-i-pause { display: none; }
@media (prefers-reduced-motion: reduce) { .ws-tms-marquee .ws-tms-cell { flex-basis: min(290px, 100%); } }
/* Stacked cards. */
.ws-tms-stack-cards .ws-track { display: grid; gap: 16px; }
.ws-tms-stack-cards .ws-tms-cell { position: sticky; inset-block-start: calc(16px + var(--i, 0) * 12px); }
.ws-tms-stack-cards .ws-tm { box-shadow: var(--b-shadow, var(--site-shadow-lg)); padding: var(--b-pad, 24px); }
.ws-tms-stack-cards .ws-tm-q p { font-size: calc(17px * var(--b-scale, 1)); }
.ws-mode-thumb .ws-tms-stack-cards .ws-tms-cell { position: relative; inset-block-start: auto; }
/* List. */
.ws-tms-list .ws-track { gap: 0; }
.ws-tms-list .ws-tm { padding: 18px 2px; border-radius: 0; border-block-end: 1px solid var(--site-line); }
.ws-tms-list .ws-tms-cell:first-child .ws-tm { padding-block-start: 4px; }
.ws-tms-list .ws-tms-cell:last-child .ws-tm { border-block-end: 0; }

/* css/site/blocks/text.css */
/* Text: plain (the classic look), card, lead, columns, callout. */
.ws-text { color: var(--site-text); text-align: var(--b-align, center); }
.ws-text p { margin: 0 0 .7em; } .ws-text p:last-child { margin-bottom: 0; }
.ws-text a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in oklab, var(--site-accent) 70%, transparent); }
.ws-text ul, .ws-text ol { text-align: start; margin: 0 0 .7em; padding-inline-start: 1.3em; }
.ws-tv-card { padding: var(--b-pad, 20px); text-align: var(--b-align, start); }
.ws-tv-lead { font-size: 1.18rem; line-height: 1.5; font-weight: 500; letter-spacing: -0.01em; }
.ws-heading-serif .ws-tv-lead { font-family: var(--site-heading); font-size: 1.4rem; font-style: italic; font-weight: 400; }
.ws-tv-columns { text-align: var(--b-align, start); }
@container ws-page (min-width: 600px) { .ws-tv-columns .ws-tv-body { columns: 2; column-gap: 32px; } .ws-tv-columns p { break-inside: avoid; } }
.ws-tv-callout { display: flex; gap: 12px; align-items: flex-start; padding: var(--b-pad, 16px 18px); text-align: start; --b-bg: color-mix(in oklab, var(--site-accent) 11%, var(--site-surface)); --b-border: 1px solid color-mix(in oklab, var(--site-accent) 26%, transparent); --b-shadow: none; }
.ws-tv-icon { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text); }
.ws-tv-icon svg { width: 16px; height: 16px; }
.ws-tv-callout .ws-tv-body { flex: 1; min-width: 0; padding-top: 3px; }

/* css/site/blocks/tiktok.css */
/* TikTok: player, card, carousel. Frames are 9:16; the builder shows a placeholder in the same shape. */
.ws-tt-track { display: grid; gap: 12px; }
.ws-tt.is-one .ws-tt-track { justify-content: center; grid-template-columns: min(100%, 340px); }
.ws-tt-player.is-many .ws-tt-track, .ws-tt-card.is-many .ws-tt-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ws-tt-card.is-many .ws-tt-track { grid-template-columns: minmax(0, 1fr); }
@container ws-page (min-width: 600px) { .ws-tt-card.is-many .ws-tt-track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container ws-page (min-width: 1024px) { .ws-tt-player.is-many .ws-tt-track { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ws-tt-item { margin: 0; min-width: 0; display: grid; gap: 8px; }
.ws-tt-frame { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: var(--b-radius, calc(var(--site-radius) + 6px)); background: var(--site-ink-dark); box-shadow: var(--site-shadow-md); }
.ws-tt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ws-tt-ph { position: absolute; inset: 0; display: grid; place-items: center; align-content: end; gap: 10px; padding: 16px; color: var(--site-on-media); text-align: center;
  background: radial-gradient(70% 45% at 20% 10%, color-mix(in oklab, var(--site-accent) 45%, transparent), transparent 70%), linear-gradient(170deg, color-mix(in oklab, var(--site-ink-dark) 80%, var(--site-accent)), var(--site-ink-dark)); }
.ws-tt-ph-mark { position: absolute; top: 12px; inset-inline-start: 12px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .12); }
.ws-site .ws-tt-ph-mark svg { width: 16px; height: 16px; }
.ws-tt-ph-play { position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .16); backdrop-filter: blur(6px); }
.ws-site .ws-tt-ph-play svg { width: 22px; height: 22px; fill: currentColor; stroke: none; margin-inline-start: 3px; }
.ws-tt-ph-cap { font-size: 13px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.ws-tt-card .ws-tt-item { padding: var(--b-pad, 10px); gap: 10px; text-align: start; }
.ws-tt-card .ws-tt-frame { border-radius: calc(var(--site-radius) + 2px); box-shadow: none; }
.ws-tt-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px 0; font-size: 14px; }
.ws-tt-mark { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--site-ink-dark); color: var(--site-ink-light); }
.ws-site .ws-tt-mark svg { width: 15px; height: 15px; }
.ws-tt-foot { display: grid; gap: 4px; padding: 0 4px 4px; }
.ws-site .ws-tt-cap { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.4; }
.ws-site .ws-tt-out { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; font-weight: 700; font-size: 13.5px; color: var(--site-accent); }
.ws-tt-out svg { width: 15px; height: 15px; }

.ws-tt-carousel .ws-tt-track { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 68%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 2px 2px 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
.ws-tt-carousel .ws-tt-track::-webkit-scrollbar { display: none; }
.ws-tt-carousel.is-one .ws-tt-track { grid-auto-columns: min(100%, 340px); justify-content: center; }
.ws-tt-carousel .ws-tt-item { scroll-snap-align: start; }
.ws-tt-carousel .ws-tt-cap { padding-inline: 4px; color: var(--site-muted); font-size: 13px; }
.ws-tt-carousel .ws-car-nav { display: flex; }
@container ws-page (min-width: 600px) { .ws-tt-carousel .ws-tt-track { grid-auto-columns: 240px; } }

/* css/site/blocks/tiles.css */
/* Tiles: the shared grid, bento, carousel and list variants; the classic 2-column look is the grid at every width. */
.ws-block-tiles .ws-cv-grid .ws-track { --c: 2; }

/* css/site/blocks/timeline.css */
/* Timeline / journey: polish on the shared timeline, stacked cards and compact variants. */
.ws-block-timeline .ws-sk-n { display: none; }
.ws-block-timeline .ws-sk-media:has(.ws-media-ph) { display: none; }
.ws-block-timeline .ws-cv-timeline .ws-eyebrow { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.ws-block-timeline .ws-cv-timeline .ws-t1 { font-size: calc(1.05rem * var(--b-scale, 1)); }
.ws-block-timeline .ws-cv-stack-cards .ws-eyebrow { display: inline-block; padding: 3px 9px; border-radius: 999px; background: color-mix(in oklab, var(--site-accent) 14%, transparent); }

/* css/site/blocks/tip_jar.css */
/* Tip jar: card, emoji, amounts, button (chips and the button in modules/donations). */
.tj { display: grid; gap: 16px; padding: var(--b-pad, 22px); text-align: var(--b-align, start); }
.tj-head { display: flex; align-items: center; gap: 14px; }
.tj-head-t { display: grid; gap: 4px; min-width: 0; }
.tj-title { margin: 0; font-family: var(--site-heading); font-size: calc(1.25rem * var(--b-scale, 1)); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
.tj-text { margin: 0; color: var(--site-muted); font-size: 14px; line-height: 1.5; }
.tj-jar { width: 62px; height: 62px; flex: none; border-radius: 20px; display: grid; place-items: center; font-size: 32px; line-height: 1;
  background: radial-gradient(90% 90% at 100% 0%, color-mix(in oklab, var(--site-surface) 55%, transparent), transparent 60%), color-mix(in oklab, var(--site-accent) 22%, var(--site-surface));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--site-accent) 30%, transparent); transform: rotate(-4deg); }
.tj-jar svg { width: 28px; height: 28px; color: var(--site-accent); }
.tj-emoji { padding: var(--b-pad, 4px 0); text-align: var(--b-align, center); }
.tj-emoji .tj-head { justify-content: center; text-align: center; }
.tj-emoji .sp-chips { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.tj-emoji .sp-chip { min-height: 112px; background: var(--site-surface); box-shadow: var(--site-shadow-md); border-color: transparent; }
.tj-emoji .sp-emoji { font-size: 38px; }
.tj-amounts .sp-chip { min-height: 58px; }
.tj-button-emoji { font-size: 20px; line-height: 1; }

/* css/site/blocks/tour_dates.css */
/* Tour dates (ADR-0068, W3): rows, list, compact. */
.ws-td { margin: 0; padding: 0; list-style: none; min-width: 0; text-align: start; }
.ws-td-city { font-family: var(--site-heading); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; overflow-wrap: anywhere; }
.ws-td-venue { display: block; color: var(--site-muted); font-size: 13px; font-weight: 600; }
.ws-td-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: var(--site-btn-radius); font-weight: 800; font-size: 14px; white-space: nowrap;
  background: var(--site-accent); color: var(--site-accent-text); transition: transform .18s var(--site-ease), filter .18s; }
.ws-td-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.ws-td-btn.is-small { min-height: 40px; padding: 0 14px; font-size: 13px; }
.ws-td-state { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap;
  border: 1.5px solid color-mix(in oklab, var(--site-text) 18%, transparent); color: var(--site-muted); }
.ws-td-state.is-sold_out { background: color-mix(in oklab, var(--site-text) 8%, transparent); border-color: transparent; }
.ws-td-state.is-cancelled { text-decoration: line-through; }
.ws-td-few { display: inline-block; margin-top: 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--site-accent); }
.is-cancelled .ws-td-city, .is-sold_out .ws-td-city { color: var(--site-muted); }

/* Rows */
.ws-td-rows { display: grid; gap: 8px; }
.ws-td-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: var(--b-pad, 12px 14px); }
.ws-td-date { display: grid; justify-items: center; width: 52px; padding: 4px 0; line-height: 1.05; font-variant-numeric: tabular-nums; border-inline-end: 1px solid var(--site-line); padding-inline-end: 12px; box-sizing: content-box; }
.ws-td-date small { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--site-muted); }
.ws-td-date small:first-child { color: var(--site-accent); }
.ws-td-date b { font-family: var(--site-heading); font-size: 1.55rem; font-weight: 800; letter-spacing: -0.04em; }
.ws-td-row .ws-td-city { font-size: calc(1.1rem * var(--b-scale, 1)); }
.ws-td-row .ws-td-where { min-width: 0; }

/* List */
.ws-td-list { padding: 4px var(--b-pad, 16px); }
.ws-td-li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--site-line); }
.ws-td-li:first-child { border-top: 0; }
.ws-td-short { grid-column: 1 / -1; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--site-accent); }
@container ws-page (min-width: 600px) { .ws-td-li { grid-template-columns: 130px minmax(0, 1fr) auto; } .ws-td-short { grid-column: auto; } }

/* Compact */
.ws-td-compact { display: grid; gap: 2px; }
.ws-td-compact :is(a, .is-static) { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: calc(var(--site-radius) - 2px); font-size: 14px; font-weight: 600; }
.ws-td-compact a:hover, .ws-td-compact a:focus-visible { background: color-mix(in oklab, var(--site-accent) 10%, transparent); }
.ws-td-compact time { min-width: 64px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--site-accent); }
.ws-td-compact span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-td-compact svg { width: 16px; height: 16px; opacity: .7; }
.ws-td-compact small { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--site-muted); }
.ws-td-compact .is-static { color: var(--site-muted); }
.ws-site .is-cancelled .ws-td-city, .ws-site .is-sold_out .ws-td-city { color: var(--site-muted); }
.ws-site a.ws-td-btn { color: var(--site-accent-text); }

/* css/site/blocks/twitch.css */
/* Twitch and Loom (B3 · U3; loom.css repeats this file's rules through its own part): player and card. */
.ve { margin: 0; overflow: hidden; border-radius: var(--b-radius, calc(var(--site-radius) + 2px)); text-align: start; }
.ve-frame { position: relative; width: 100%; background: var(--site-ink-dark, var(--site-text)); }
.ve-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ve-poster { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--site-on-media, #fff); background: radial-gradient(120% 90% at 20% 10%, color-mix(in oklab, var(--ve-brand) 70%, transparent), transparent 60%), linear-gradient(135deg, color-mix(in oklab, var(--ve-brand) 55%, var(--site-ink-dark, var(--site-text))), var(--site-ink-dark, var(--site-text))); }
.ve-play { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: rgb(255 255 255 / .16); backdrop-filter: blur(6px); box-shadow: 0 10px 30px -10px rgb(0 0 0 / .5); color: var(--site-on-media, #fff); }
.ve-play svg { width: 24px; height: 24px; margin-inline-start: 3px; }
.ve-brand { font-weight: 800; letter-spacing: .02em; opacity: .9; }
.ve-cap { display: grid; gap: 2px; padding: 12px 16px 14px; }
.ve-cap b { font-size: 15px; letter-spacing: -0.01em; }
.ve-cap span { color: var(--site-muted); font-size: 13.5px; }
.ve-twitch { --ve-brand: hsl(264 100% 64%); }
.ve-loom { --ve-brand: hsl(252 90% 63%); }
.ve-card { display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 10px; border-radius: var(--b-radius, calc(var(--site-radius) + 2px)); align-items: center; text-align: start; }
.ve-card-media { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: calc(var(--site-radius) - 2px); overflow: hidden; background: linear-gradient(135deg, var(--ve-brand), color-mix(in oklab, var(--ve-brand) 40%, var(--site-ink-dark, var(--site-text)))); }
.ve-card-media .ve-play { width: 44px; height: 44px; }
.ve-card-media .ve-play svg { width: 18px; height: 18px; }
.ve-fact { position: absolute; inset-block-end: 6px; inset-inline-start: 6px; display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; color: var(--site-on-media, #fff); background: rgb(0 0 0 / .45); }
.ve-dot { width: 6px; height: 6px; border-radius: 50%; background: hsl(0 85% 60%); }
.ve-card-body { display: grid; gap: 3px; min-width: 0; }
.ve-brand-row { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--ve-brand); }
.ve-brand-row svg { width: 14px !important; height: 14px !important; }
.ve-card-title { font-size: 15.5px; letter-spacing: -0.01em; line-height: 1.3; }
.ve-card-text { color: var(--site-muted); font-size: 13.5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ve-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-weight: 750; font-size: 13.5px; }
.ve-cta svg { width: 15px; height: 15px; }
.ve-card:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 55%, transparent); outline-offset: 2px; }
@container ws-page (min-width: 600px) { .ve-card { grid-template-columns: 148px 1fr; } }

/* css/site/blocks/typeform.css */
/* Typeform / Tally / Jotform / Google Forms (B3 · U3): inline and button (the sheet holds the same frame). */
.tf { overflow: hidden; text-align: start; border-radius: var(--b-radius, calc(var(--site-radius) + 2px)); }
.tf-head { display: flex; gap: 12px; align-items: center; padding: var(--b-pad, 16px 18px); border-bottom: 1px solid var(--site-line); }
.tf-ico { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: color-mix(in oklab, var(--site-accent) 15%, transparent); color: var(--site-accent); }
.tf-title { margin: 0; font-family: var(--site-heading); font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }
.tf-text { margin: 2px 0 0; color: var(--site-muted); font-size: 13.5px; }
.tf-frame { position: relative; width: 100%; background: var(--site-surface); }
.tf-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tf-ph { position: absolute; inset: 0; display: grid; align-content: center; gap: 18px; padding: 28px; max-width: 460px; }
.tf-ph i { display: block; height: 11px; border-radius: 6px; background: color-mix(in oklab, var(--site-text) 12%, transparent); }
.tf-ph-q { display: grid; gap: 8px; } .tf-ph-q i:first-child { width: 80%; height: 16px; } .tf-ph-q i + i { width: 50%; }
.tf-ph-a { display: grid; gap: 8px; } .tf-ph-a i { height: 40px; border-radius: 10px; border: 1.5px solid color-mix(in oklab, var(--site-text) 14%, transparent); background: none; }
.tf-ph-a i:nth-child(2) { border-color: var(--site-accent); background: color-mix(in oklab, var(--site-accent) 10%, transparent); }
.tf-ph-btn { width: 110px; height: 40px; border-radius: 10px; background: var(--site-accent); }
.tf-ph-label { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--site-muted); font-size: 13px; }
.ws-sheet .tf-frame { border-radius: calc(var(--site-radius) - 2px); overflow: hidden; }

/* css/site/blocks/video.css */
/* Uploaded video (B3 · M3): player, featured, card, background-hero. The stage keeps the clip's own shape. */
.ws-vid { display: grid; min-width: 0; text-align: start; }
.ws-vid-stage { position: relative; overflow: hidden; aspect-ratio: var(--vid-ratio, 16 / 9); max-height: 82vh; border-radius: var(--b-radius, calc(var(--site-radius) + 6px));
  background: var(--site-ink-dark); box-shadow: var(--b-shadow, var(--site-shadow-md)); isolation: isolate; }
.ws-vid-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: var(--b-fit, cover); background: var(--site-ink-dark); display: block; }
.ws-vid-player .ws-vid-el, .ws-vid-featured .ws-vid-el, .ws-vid-card .ws-vid-el { object-fit: contain; }
.ws-mode-canvas .ws-vid-el, .ws-is-thumb .ws-vid-el { pointer-events: none; }

/* The big play button: shown until the clip starts (site-media.js); without scripts the browser's controls are enough. */
.ws-vid-big { display: none; position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; align-items: center; gap: 10px; padding: 6px 18px 6px 6px;
  border: 1px solid rgb(255 255 255 / .28); border-radius: 999px; background: rgb(0 0 0 / .38); color: var(--site-on-media, #FFFFFF); font: inherit; font-weight: 700; font-size: 14px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; transition: transform .2s var(--site-ease), background .2s; z-index: 2; }
.ws-js .ws-vid-big, .ws-is-thumb .ws-vid-big, .ws-mode-canvas .ws-vid-big { display: inline-flex; }
.ws-vid-big > span { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--site-accent); color: var(--site-accent-text); box-shadow: 0 10px 30px -8px rgb(0 0 0 / .55); }
.ws-site .ws-vid-big svg { width: 20px; height: 20px; fill: currentColor; stroke: none; margin-inline-start: 3px; }
.ws-vid-big small { font-size: 13px; font-variant-numeric: tabular-nums; direction: ltr; opacity: .9; }
.ws-vid-big:hover { transform: scale(1.04); background: rgb(0 0 0 / .5); }
.ws-vid-big:focus-visible, .ws-vid-toggle:focus-visible, .ws-vid-cta:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 70%, transparent); outline-offset: 3px; }
.ws-vid.is-playing .ws-vid-big, .ws-vid.is-started .ws-vid-big, .ws-vid.is-started .ws-vid-cap { opacity: 0; pointer-events: none; transform: scale(.9); }
.ws-vid-cap { position: absolute; inset-inline: 0; top: 0; padding: 14px 16px 30px; color: var(--site-on-media, #FFFFFF); font-weight: 700; font-size: 15px; line-height: 1.3;
  background: linear-gradient(180deg, rgb(0 0 0 / .55), rgb(0 0 0 / 0)); text-shadow: 0 1px 8px rgb(0 0 0 / .4); pointer-events: none; transition: opacity .3s; z-index: 1; }

/* Muted loops: a small pause/play button in the corner (WCAG 2.2.2). */
.ws-vid-toggle { position: absolute; inset-inline-end: 12px; bottom: 12px; z-index: 3; width: 44px; height: 44px; display: none; place-items: center; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / .3); background: rgb(0 0 0 / .4); color: var(--site-on-media, #FFFFFF); cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ws-js .ws-vid-toggle { display: grid; }
.ws-site .ws-vid-toggle svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.ws-vid-toggle .ws-vid-i-pause, .ws-vid-toggle[aria-pressed="true"] .ws-vid-i-play { display: none; }
.ws-vid-toggle[aria-pressed="true"] .ws-vid-i-pause { display: inline; }

/* Featured and card: the clip on a surface with the words beneath. */
.ws-vid-featured { padding: var(--b-pad, 10px); gap: 14px; }
.ws-vid-featured .ws-vid-stage, .ws-vid-card .ws-vid-stage { box-shadow: none; border-radius: calc(var(--site-radius) + 2px); }
.ws-vid-body { display: grid; gap: 7px; padding: 2px 8px 8px; min-width: 0; }
.ws-site .ws-vid-meta { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--site-muted); font-variant-numeric: tabular-nums; }
.ws-site .ws-vid-meta svg { width: 15px; height: 15px; }
.ws-site .ws-vid-out { justify-self: start; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; margin-top: 2px; padding: 0 18px; border-radius: var(--site-btn-radius);
  background: var(--site-btn-bg, var(--site-accent)); color: var(--site-btn-text, var(--site-accent-text)); font-weight: 700; font-size: 14px; }
.ws-vid-out svg { width: 15px; height: 15px; }
.ws-vid-card { overflow: hidden; padding: 0; }
.ws-vid-card .ws-vid-stage { border-radius: 0; }
.ws-vid-card .ws-vid-body { padding: var(--b-pad, 14px 16px 16px); }
.ws-vid-card .ws-vid-big { padding: 5px; } .ws-vid-card .ws-vid-big small { display: none; } .ws-vid-card .ws-vid-big > span { width: 46px; height: 46px; }
@container ws-page (min-width: 600px) {
  .ws-vid-card { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
  .ws-vid-card .ws-vid-stage { width: 100%; min-width: 0; }
  .ws-vid-card .ws-vid-body { padding: var(--b-pad, 18px 22px); }
}

/* Background hero: the loop fills the block, a shade keeps the words readable. */
.ws-vid-background-hero .ws-vid-stage { aspect-ratio: 4 / 5; max-height: 640px; box-shadow: var(--b-shadow, var(--site-shadow-lg)); }
@container ws-page (min-width: 600px) { .ws-vid-background-hero .ws-vid-stage { aspect-ratio: 16 / 9; } }
.ws-vid-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgb(0 0 0 / calc(var(--vid-shade, .45) * .5)) 0%, rgb(0 0 0 / calc(var(--vid-shade, .45) * .35)) 40%, rgb(0 0 0 / calc(var(--vid-shade, .45) + .2)) 100%); }
.ws-vid-over { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; display: grid; justify-items: start; gap: 12px; padding: 24px 22px 26px; padding-inline-end: 72px; color: var(--site-on-media, #FFFFFF); }
.ws-vid-big-title { margin: 0; font-family: var(--site-heading); font-size: calc(1.75rem * var(--b-scale, 1)); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance; max-width: 18ch; text-shadow: 0 2px 18px rgb(0 0 0 / .3); }
.ws-vid-lead { margin: 0; font-size: 15.5px; line-height: 1.5; max-width: 46ch; opacity: .92; }
.ws-site .ws-vid-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--site-on-media, #FFFFFF); color: var(--site-ink-dark);
  font-weight: 800; font-size: 15px; box-shadow: 0 14px 30px -12px rgb(0 0 0 / .6); transition: transform .2s var(--site-ease); }
.ws-vid-cta:hover { transform: translateY(-1px); }
.ws-vid-cta svg { width: 16px; height: 16px; }
@container ws-page (min-width: 600px) { .ws-vid-over { padding: 40px 40px 40px; } .ws-vid-big-title { font-size: calc(2.6rem * var(--b-scale, 1)); } .ws-vid-lead { font-size: 17px; } }
.ws-vid-background-hero .ws-vid-toggle { top: 14px; bottom: auto; }
@media (prefers-reduced-motion: reduce) { .ws-vid-big, .ws-vid-cta { transition: none; } }

/* css/site/blocks/video_list.css */
/* Video playlist (B3 · M3): the collection variants, with a play mark on every thumbnail and video-shaped (16:9) media. */
.ws-block-video-list .ws-gcard-media, .ws-block-video-list .ws-cc-media, .ws-block-video-list .ws-sc-media { position: relative; aspect-ratio: 16 / 9; }
.ws-block-video-list .ws-gcard-media::after, .ws-block-video-list .ws-cc-media::after, .ws-block-video-list .ws-sc-media::after, .ws-block-video-list .ws-li-thumb::after, .ws-block-video-list .ws-thumb::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%; pointer-events: none;
  background: rgb(0 0 0 / .45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M8 5.5v13a1 1 0 0 0 1.5.86l10.4-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5z'/%3E%3C/svg%3E") 55% 50% / 20px no-repeat;
  border: 1px solid rgb(255 255 255 / .35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: transform .25s var(--site-ease), background-color .2s; }
.ws-block-video-list .ws-sc-media::after { width: 64px; height: 64px; background-size: 26px; background-color: var(--site-accent); border-color: transparent; }
.ws-block-video-list .ws-li-thumb, .ws-block-video-list .ws-thumb { position: relative; }
.ws-block-video-list .ws-li-thumb::after, .ws-block-video-list .ws-thumb::after { width: 22px; height: 22px; background-size: 11px; }
.ws-block-video-list .ws-hov:hover .ws-gcard-media::after, .ws-block-video-list .ws-hov:hover .ws-cc-media::after, .ws-block-video-list .ws-hov:hover .ws-sc-media::after { transform: scale(1.08); background-color: var(--site-accent); }
.ws-block-video-list .ws-li-thumb { width: 72px; aspect-ratio: 16 / 9; height: auto; }
.ws-block-video-list .ws-badge.ws-on-media { inset-inline-start: auto; inset-inline-end: 8px; top: auto; bottom: 8px; font-variant-numeric: tabular-nums; direction: ltr; background: rgb(0 0 0 / .72); color: #FFFFFF; }
@media (prefers-reduced-motion: reduce) { .ws-block-video-list [class*="media"]::after { transition: none; } }

/* css/site/blocks/waitlist.css */
/* Waitlist: card, inline, banner (shared pieces in modules/interact). */
.wl { overflow: hidden; }
.wl.has-media { padding: 0; gap: 0; }
.wl.has-media .wl-body { padding: 18px var(--b-pad, 22px) var(--b-pad, 22px); }
.wl-body { display: grid; gap: 14px; }
.wl-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.wl-media .ws-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.wl-tag { position: absolute; inset-block-start: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: .02em; background: color-mix(in oklab, var(--site-ink-dark) 55%, transparent); color: var(--site-on-media);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.wl-tag svg { width: 14px; height: 14px; }
.wl-banner { --b-bg: radial-gradient(120% 140% at 100% 0%, color-mix(in oklab, var(--site-accent) 30%, transparent), transparent 55%), var(--site-surface); }
.wl-banner .ix-head { grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: center; }
.wl-banner .ix-head > :not(.ix-badge) { grid-column: 2; }
.wl-banner .ix-badge { grid-row: span 3; align-self: start; }
@container ws-page (min-width: 600px) {
  .wl-banner .wl-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 28px; }
  .wl-banner .ix-people { grid-column: 2; }
  .wl.has-media { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .wl.has-media .wl-media { aspect-ratio: auto; min-height: 100%; }
  .wl.has-media .wl-body { padding: var(--b-pad, 26px); align-content: center; }
  .ws-sys-classic .wl.has-media, .ws-sys-minimal .wl.has-media { grid-template-columns: 1fr; }
  .ws-sys-classic .wl.has-media .wl-media, .ws-sys-minimal .wl.has-media .wl-media { aspect-ratio: 16 / 9; }
}

/* css/site/blocks/wevents.css */
/* Weesify Events blocks (EV10, ADR-0071 · directive §41): poster, next-event strip, countdown with its event, category
   chips, registration panel, ticket stub, ticket pricing, availability, location, agenda, sponsors, video, announcement.
   The event and events-list parts (date tile, when line, buttons) come from blocks/event and blocks/events_list. */
.ws-wev-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ws-wev-muted { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--site-muted); font-size: 13.5px; font-weight: 600; }
.ws-wev-muted svg { width: 15px; height: 15px; flex: none; }
.ws-wev-ghost { display: inline-flex; align-items: center; min-height: 48px; padding: 0 18px; border-radius: var(--site-btn-radius); font-weight: 700; font-size: 14px;
  border: 1.5px solid color-mix(in oklab, currentColor 22%, transparent); }
.ws-wev-ghost:hover { background: color-mix(in oklab, currentColor 6%, transparent); }

/* Poster: editorial full-bleed */
.ws-wev-poster { position: relative; display: grid; overflow: hidden; border-radius: calc(var(--site-radius) * 1.6 + 6px); color: var(--site-on-media, #fff);
  background: var(--site-text); isolation: isolate; min-height: 520px; box-shadow: var(--site-shadow-lg); }
.ws-wev-poster-media { position: absolute; inset: 0; z-index: -1; }
.ws-wev-poster-media .ws-media, .ws-wev-poster-media img { width: 100%; height: 100%; object-fit: cover; }
.ws-wev-poster-shade { position: absolute; inset: 0; background:
  radial-gradient(120% 70% at 0% 100%, rgb(0 0 0 / .78), transparent 70%), linear-gradient(180deg, rgb(0 0 0 / .1) 0%, rgb(0 0 0 / .25) 40%, rgb(0 0 0 / .82) 100%); }
.ws-wev-poster-body { align-self: end; display: grid; gap: 10px; padding: clamp(20px, 5cqi, 44px); max-width: 720px; }
.ws-wev-poster-top { display: flex; align-items: flex-end; gap: 14px; margin-bottom: auto; }
.ws-wev-poster-top .ws-ev-cue { margin-bottom: 6px; }
.ws-wev-poster-day { display: grid; line-height: .9; }
.ws-wev-poster-day b { font-family: var(--site-heading); font-size: clamp(3.6rem, 16cqi, 6.5rem); font-weight: 800; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.ws-wev-poster-day small { margin-top: 6px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.ws-wev-poster .ws-ev-cue { background: color-mix(in oklab, #fff 18%, transparent); color: inherit; backdrop-filter: blur(var(--site-blur, 12px)); }
.ws-wev-poster-title { margin: 0; font-family: var(--site-heading); font-size: clamp(1.9rem, 7cqi, 3.2rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; }
.ws-heading-serif .ws-wev-poster-title { font-weight: 400; font-style: italic; }
.ws-wev-poster-text { margin: 0; font-size: 15.5px; line-height: 1.55; opacity: .88; max-width: 56ch; }
.ws-wev-poster :is(.ws-ev-when > svg, .ws-ev-local, .ws-ev-facts) { color: inherit; opacity: .9; }
.ws-wev-poster .ws-ev-cal summary { border-color: color-mix(in oklab, #fff 40%, transparent); }
.ws-wev-poster .ws-ev-actions { margin-top: 10px; }
@container ws-page (min-width: 600px) { .ws-wev-poster { min-height: 560px; } .ws-wev-poster .ws-ev-btn { flex: 0 1 auto; min-width: 220px; } }
.is-ended.ws-wev-poster img { filter: grayscale(.9); }

/* Next event: strip */
.ws-wev-strip { display: flex; align-items: center; gap: 14px; padding: 10px 14px 10px 10px; border-radius: calc(var(--site-radius) + 6px); min-height: 84px; text-align: start; }
.ws-wev-strip .ws-ev-date { width: 58px; min-height: 62px; flex: none; background: color-mix(in oklab, var(--site-accent) 12%, var(--site-surface)); box-shadow: none; }
.ws-wev-strip-txt { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ws-wev-strip-label { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--site-accent); }
.ws-wev-strip-title { font-family: var(--site-heading); font-size: 1.05rem; font-weight: 750; letter-spacing: -0.015em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-wev-strip-meta { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 13px; font-weight: 600; color: var(--site-muted); }
.ws-wev-strip-go { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; flex: none; background: var(--site-accent); color: var(--site-accent-text);
  transition: transform .2s var(--site-ease); }
.ws-wev-strip-go svg { width: 18px; height: 18px; }
.ws-wev-strip:hover .ws-wev-strip-go { transform: translateX(3px); }
[dir="rtl"] .ws-wev-strip-go svg { transform: scaleX(-1); }

/* Countdown with its event */
.ws-wev-cd { display: grid; gap: 12px; }
.ws-wev-cd-event { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 4px 4px 0; }
.ws-wev-cd-txt { display: grid; gap: 2px; min-width: 0; }
.ws-wev-cd-title { font-family: var(--site-heading); font-weight: 750; font-size: 1.05rem; letter-spacing: -0.015em; }
.ws-wev-cd-when { font-size: 13px; font-weight: 600; color: var(--site-muted); }
.ws-wev-cd-banner .ws-wev-cd-event, .ws-wev-cd-bar .ws-wev-cd-event { padding-inline: 2px; }

/* Categories */
.ws-wev-cats { display: grid; gap: 18px; }
.ws-wev-chips { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 4px; scrollbar-width: none; }
.ws-wev-chips::-webkit-scrollbar { display: none; }
.ws-wev-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; white-space: nowrap; scroll-snap-align: start;
  font-weight: 700; font-size: 14px; background: var(--site-surface); border: 1px solid var(--site-line); }
.ws-wev-chip span { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; font-size: 12px;
  background: color-mix(in oklab, var(--site-accent) 14%, transparent); color: var(--site-accent); }
.ws-wev-chip:hover { border-color: var(--site-accent); }
.ws-wev-cat { display: grid; gap: 10px; scroll-margin-top: 80px; }
.ws-wev-cat-title { margin: 0; font-family: var(--site-heading); font-size: 1.15rem; letter-spacing: -0.02em; }

/* Registration panel */
.ws-wev-reg { display: grid; gap: 16px; padding: clamp(18px, 5cqi, 30px); border-radius: calc(var(--site-radius) * 1.4 + 6px); position: relative; overflow: hidden; }
.ws-wev-reg::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--site-accent), color-mix(in oklab, var(--site-accent) 30%, transparent)); }
.ws-wev-reg-head { display: grid; gap: 6px; }
.ws-wev-reg-title { margin: 0; font-family: var(--site-heading); font-size: clamp(1.5rem, 5.5cqi, 2.1rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance; }
.ws-wev-reg-text { margin: 0; color: var(--site-muted); line-height: 1.55; }
.ws-wev-reg-event { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: calc(var(--site-radius) + 4px); background: color-mix(in oklab, var(--site-text) 4%, transparent); }
.ws-wev-reg-ev { display: grid; gap: 4px; min-width: 0; }
.ws-wev-reg-ev > strong { font-size: 1.02rem; letter-spacing: -0.01em; }
.ws-wev-reg-ev .ws-ev-when { font-size: 13px; }
.ws-wev-reg-ev .ws-ev-when > svg { display: none; }
.ws-wev-reg-form { display: grid; gap: 10px; }
@container ws-page (min-width: 600px) { .ws-wev-reg-form { grid-template-columns: 1fr 1fr; } .ws-wev-reg-form .ws-ev-btn, .ws-wev-reg-form .ws-wev-fine { grid-column: 1 / -1; } }
.ws-wev-field { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
.ws-wev-field input { min-height: 48px; padding: 0 14px; border-radius: calc(var(--site-radius) + 2px); border: 1.5px solid var(--site-line); background: var(--site-surface); color: var(--site-text);
  font: inherit; font-weight: 500; font-size: 15px; }
.ws-wev-field input:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 1px; border-color: transparent; }
.ws-wev-fine { margin: 0; font-size: 12.5px; color: var(--site-muted); text-align: center; }
.ws-wev-meter { position: relative; height: 10px; border-radius: 999px; background: color-mix(in oklab, var(--site-text) 9%, transparent); overflow: hidden; }
.ws-wev-meter > span { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--p, 0%); border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in oklab, var(--site-accent) 70%, transparent), var(--site-accent)); transition: width .6s var(--site-ease); }
.ws-wev-meter.is-small { height: 6px; }

/* Ticket stub */
.ws-wev-stub { --notch: 14px; display: grid; grid-template-columns: 1fr; position: relative; filter: drop-shadow(0 18px 30px rgb(0 0 0 / .14)); }
.ws-wev-stub-main, .ws-wev-stub-side { background: var(--site-surface); color: var(--site-text); padding: 20px 22px; }
.ws-wev-stub-main { display: grid; gap: 8px; border-radius: calc(var(--site-radius) + 8px) calc(var(--site-radius) + 8px) 0 0;
  -webkit-mask: radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) top left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) top right / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--notch) at 0 100%, #0000 98%, #000) top left / 51% 100% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) top right / 51% 100% no-repeat; }
.ws-wev-stub-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; border-top: 2px dashed var(--site-line);
  border-radius: 0 0 calc(var(--site-radius) + 8px) calc(var(--site-radius) + 8px);
  background: color-mix(in oklab, var(--site-accent) 10%, var(--site-surface)); }
.ws-wev-stub-title { font-family: var(--site-heading); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; }
.ws-wev-stub-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 6px 0 0; }
.ws-wev-stub-facts dt { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--site-muted); }
.ws-wev-stub-facts dd { margin: 2px 0 0; font-weight: 700; font-size: 14px; }
.ws-wev-stub-price { font-family: var(--site-heading); font-size: 1.5rem; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
@container ws-page (min-width: 600px) {
  .ws-wev-stub { grid-template-columns: 1fr 220px; }
  .ws-wev-stub-main { border-radius: calc(var(--site-radius) + 8px) 0 0 calc(var(--site-radius) + 8px);
    -webkit-mask: radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) top right / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) bottom right / 100% 51% no-repeat;
    mask: radial-gradient(circle var(--notch) at 100% 0, #0000 98%, #000) top right / 100% 51% no-repeat, radial-gradient(circle var(--notch) at 100% 100%, #0000 98%, #000) bottom right / 100% 51% no-repeat; }
  .ws-wev-stub-side { flex-direction: column; align-items: stretch; justify-content: center; border-top: 0; border-inline-start: 2px dashed var(--site-line);
    border-radius: 0 calc(var(--site-radius) + 8px) calc(var(--site-radius) + 8px) 0; text-align: center; }
}

/* Ticket pricing */
.ws-wev-price-grid { display: grid; gap: 12px; }
.ws-wev-price-tiers .ws-wev-price-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); align-items: stretch; }
.ws-wev-tier { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: calc(var(--site-radius) + 8px); position: relative; }
.ws-wev-tier.is-star { outline: 2px solid var(--site-accent); outline-offset: -2px; box-shadow: 0 24px 40px -24px var(--site-accent); }
@container ws-page (min-width: 600px) { .ws-wev-price-tiers .ws-wev-tier.is-star { transform: translateY(-6px); } }
.ws-wev-tier-head { display: grid; gap: 4px; }
.ws-wev-tier-head .ws-badge { width: fit-content; }
.ws-wev-tier-name { margin: 0; font-size: 1.05rem; font-weight: 750; letter-spacing: -0.01em; }
.ws-wev-tier-price { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 0; }
.ws-wev-tier-price b { font-family: var(--site-heading); font-size: 1.9rem; font-weight: 800; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.ws-wev-tier-price s { color: var(--site-muted); font-weight: 600; }
.ws-wev-tier-ends { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--site-accent); }
.ws-wev-tier-desc { margin: 0; color: var(--site-muted); font-size: 14px; line-height: 1.5; }
.ws-wev-tier-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.ws-wev-tier-list li { display: flex; gap: 8px; align-items: flex-start; }
.ws-wev-tier-list svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--site-accent); }
.ws-wev-tier-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 4px; }
.ws-wev-tier-state { font-size: 12.5px; font-weight: 800; color: color-mix(in oklab, var(--site-accent) 80%, var(--site-text)); }
.ws-wev-tier.is-sold-out { opacity: .7; }
.ws-wev-price-list .ws-wev-tier, .ws-wev-price-compact .ws-wev-tier { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.ws-wev-price-list .ws-wev-tier-head, .ws-wev-price-compact .ws-wev-tier-head { flex: 1 1 200px; }
.ws-wev-price-list .ws-wev-tier-desc { flex: 1 1 100%; order: 3; }
.ws-wev-price-list .ws-wev-tier-foot, .ws-wev-price-compact .ws-wev-tier-foot { margin-top: 0; padding-top: 0; }
.ws-wev-price-compact .ws-wev-tier { padding: 12px 14px; }
.ws-wev-price-compact .ws-wev-tier-price b { font-size: 1.2rem; }
.ws-wev-price-compact .ws-wev-tier-head { grid-template-columns: 1fr auto; align-items: center; }
.ws-wev-price-compact .ws-wev-tier-head .ws-badge, .ws-wev-price-compact .ws-wev-tier-ends { display: none; }

/* Availability */
.ws-wev-avail { display: grid; gap: 12px; padding: 20px; border-radius: calc(var(--site-radius) + 8px); }
.ws-wev-avail-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.ws-wev-avail-title { margin: 2px 0; font-family: var(--site-heading); font-size: 1.2rem; letter-spacing: -0.02em; }
.ws-wev-avail-big { display: grid; justify-items: end; margin: 0; line-height: 1; text-align: end; }
.ws-wev-avail-big b { font-family: var(--site-heading); font-size: 2.6rem; font-weight: 800; letter-spacing: -0.05em; color: var(--site-accent); font-variant-numeric: tabular-nums; }
.ws-wev-avail-big small { font-size: 12px; font-weight: 700; color: var(--site-muted); }
.ws-wev-avail-scale { display: flex; justify-content: space-between; margin: 0; font-size: 12.5px; font-weight: 700; color: var(--site-muted); }
.ws-wev-avail-status { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 800; }
.ws-wev-dot { width: 9px; height: 9px; border-radius: 99px; background: var(--site-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--site-accent) 20%, transparent); flex: none; }
.is-sold_out .ws-wev-dot, .is-cancelled .ws-wev-dot, .is-closed .ws-wev-dot { background: var(--site-muted); box-shadow: none; }
@media (prefers-reduced-motion: no-preference) { .is-few .ws-wev-dot { animation: ws-wev-pulse 1.8s ease-in-out infinite; } }
@keyframes ws-wev-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in oklab, var(--site-accent) 6%, transparent); } }
.ws-wev-dates { display: grid; margin: 0; padding: 0; list-style: none; }
.ws-wev-date { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "when act" "meter meter" "left left"; gap: 6px 12px; align-items: center; padding: 12px 0;
  border-top: 1px solid var(--site-line); }
.ws-wev-date:first-child { border-top: 0; }
.ws-wev-date-when { grid-area: when; display: grid; } .ws-wev-date-when small { color: var(--site-muted); font-weight: 600; font-size: 12.5px; }
.ws-wev-date .ws-wev-meter, .ws-wev-meter-gap { grid-area: meter; }
.ws-wev-date-left { grid-area: left; font-size: 12.5px; font-weight: 700; color: var(--site-muted); }
.ws-wev-date .ws-ev-btn { grid-area: act; }
.ws-wev-date.is-sold_out .ws-wev-date-left, .ws-wev-date.is-few .ws-wev-date-left { color: color-mix(in oklab, var(--site-accent) 80%, var(--site-text)); }
@container ws-page (min-width: 600px) { .ws-wev-date { grid-template-columns: 180px 1fr 140px auto; grid-template-areas: "when meter left act"; } }
.ws-wev-badge { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: 999px; font-size: 13.5px; max-width: 100%;
  background: var(--site-surface); border: 1px solid var(--site-line); box-shadow: var(--site-shadow-sm); }
.ws-wev-badge span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Location */
.ws-wev-loc { display: grid; overflow: hidden; border-radius: calc(var(--site-radius) + 8px); }
.ws-wev-loc-body { display: grid; gap: 10px; padding: 20px; align-content: start; }
.ws-wev-loc-name { margin: 0; font-family: var(--site-heading); font-size: 1.3rem; letter-spacing: -0.02em; }
.ws-wev-loc-addr { display: grid; font-style: normal; font-weight: 600; line-height: 1.5; }
.ws-wev-loc-map { aspect-ratio: 16 / 9; background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.ws-wev-loc-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.ws-wev-loc-mapph { display: grid; place-items: center; height: 100%; color: var(--site-muted); }
.ws-wev-loc-mapph svg { width: 40px; height: 40px; opacity: .6; }
@container ws-page (min-width: 600px) { .ws-wev-loc-map + .ws-wev-loc-body { padding: 24px; } .ws-wev-loc-map { grid-row: 1; } .ws-wev-loc-map:has(+ .ws-wev-loc-body) { aspect-ratio: auto; min-height: 280px; }
  .ws-wev-loc-map:has(+ .ws-wev-loc-body), .ws-wev-loc-map + .ws-wev-loc-body { grid-row: 1; } .ws-wev-loc:has(.ws-wev-loc-map) { grid-template-columns: 1.1fr 1fr; } }
.ws-wev-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ws-wev-tags li { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: color-mix(in oklab, var(--site-accent) 12%, transparent); color: color-mix(in oklab, var(--site-accent) 75%, var(--site-text)); }
.ws-wev-tags svg { width: 13px; height: 13px; }
.ws-wev-online { display: flex; gap: 8px; align-items: flex-start; margin: 0; font-size: 14px; font-weight: 600; }
.ws-wev-online svg { width: 17px; height: 17px; color: var(--site-accent); flex: none; margin-top: 1px; }
.ws-wev-loc-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: calc(var(--site-radius) + 6px); }
.ws-wev-loc-row-t { display: grid; flex: 1; min-width: 0; } .ws-wev-loc-row-t small { color: var(--site-muted); font-weight: 600; }

/* Agenda */
.ws-wev-agenda { display: grid; gap: 14px; }
.ws-wev-day { display: grid; gap: 8px; }
.ws-wev-day-title { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--site-accent); }
.ws-wev-sessions { display: grid; margin: 0; padding: 0; list-style: none; border-radius: calc(var(--site-radius) + 8px); overflow: hidden; }
.ws-wev-session { --track: var(--site-accent); display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 14px 16px; position: relative; border-top: 1px solid var(--site-line); }
.ws-wev-session:first-child { border-top: 0; }
.ws-wev-session::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: 0; width: 3px; border-radius: 3px; background: var(--track); }
.ws-wev-session.is-break { background: color-mix(in oklab, var(--site-text) 3.5%, transparent); }
.ws-wev-session.is-break::before { background: var(--site-line); }
.ws-wev-session-time { display: grid; align-content: start; font-variant-numeric: tabular-nums; }
.ws-wev-session-time b { font-size: 15px; } .ws-wev-session-time small { color: var(--site-muted); font-weight: 600; }
.ws-wev-session-main { display: grid; gap: 3px; min-width: 0; }
.ws-wev-session-kind { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--track); }
.ws-wev-session-title { font-size: 15.5px; line-height: 1.3; letter-spacing: -0.01em; }
.is-break .ws-wev-session-title { font-weight: 600; color: var(--site-muted); }
.ws-wev-session-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--site-muted); font-weight: 600; }
.ws-wev-session-meta span { display: inline-flex; align-items: center; gap: 5px; } .ws-wev-session-meta svg { width: 14px; height: 14px; }
.ws-wev-agenda-compact .ws-wev-session { grid-template-columns: 52px 1fr; padding: 9px 4px; } .ws-wev-agenda-compact .ws-wev-session::before { display: none; }
.ws-wev-more { margin: 0; } .ws-wev-more a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 800; color: var(--site-accent); }
.ws-wev-more svg { width: 16px; height: 16px; }

/* Sponsors */
.ws-wev-spons { display: grid; gap: 18px; }
.ws-wev-spons-tier { display: grid; gap: 10px; }
.ws-wev-spons-name { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--site-muted); text-align: center; }
.ws-wev-logos { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.is-top .ws-wev-logos { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.ws-wev-logo { display: grid; place-items: center; min-height: 72px; padding: 14px; border-radius: calc(var(--site-radius) + 4px); text-align: center; font-size: 14px; }
.is-top .ws-wev-logo { min-height: 104px; font-size: 1.05rem; }
.ws-wev-logo img { max-width: 100%; max-height: 56px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .85; transition: filter .2s, opacity .2s; }
.is-top .ws-wev-logo img { max-height: 72px; }
a.ws-wev-logo:hover img { filter: none; opacity: 1; }

/* Video */
.ws-wev-video { display: grid; gap: 0; margin: 0; overflow: hidden; border-radius: calc(var(--site-radius) + 8px); }
.ws-wev-video .ws-embed { border-radius: inherit; overflow: hidden; }
.ws-wev-video.ws-surface .ws-embed { border-radius: 0; }
.ws-wev-video-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px 0; }
.ws-wev-video.ws-surface .ws-wev-video-cap { padding: 14px 16px; }
.ws-wev-video-cap > span { display: grid; gap: 2px; } .ws-wev-video-cap small { color: var(--site-muted); font-weight: 600; }

/* Announcement */
.ws-wev-news { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: calc(var(--site-radius) + 8px); flex-wrap: wrap; }
.ws-wev-news-ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; flex: none;
  background: color-mix(in oklab, var(--tone, var(--site-accent)) 16%, transparent); color: var(--tone, var(--site-accent)); }
.ws-wev-news-ico svg { width: 20px; height: 20px; }
.ws-wev-news-txt { display: grid; gap: 3px; flex: 1 1 200px; min-width: 0; } .ws-wev-news-txt p { margin: 0; color: var(--site-muted); font-size: 14px; line-height: 1.5; }
.is-danger { --tone: #DC2626; } .is-warn { --tone: #D97706; }
.ws-wev-news-bar, .ws-wev-news-pill { display: flex; align-items: center; gap: 10px; margin: 0; min-height: 48px; padding: 6px 14px 6px 6px; font-weight: 700; font-size: 14px;
  background: color-mix(in oklab, var(--tone, var(--site-accent)) 12%, var(--site-surface)); color: var(--site-text); border: 1px solid color-mix(in oklab, var(--tone, var(--site-accent)) 28%, transparent); }
.ws-wev-news-bar { border-radius: calc(var(--site-radius) + 4px); }
.ws-wev-news-pill { width: fit-content; max-width: 100%; margin-inline: auto; border-radius: 999px; font-size: 13.5px; }
.ws-wev-news-bar .ws-wev-news-ico, .ws-wev-news-pill .ws-wev-news-ico { width: 34px; height: 34px; border-radius: 999px; background: var(--tone, var(--site-accent)); color: var(--site-accent-text); }
.is-danger .ws-wev-news-ico, .is-warn .ws-wev-news-ico { color: #fff; }
.ws-wev-news-bar .ws-wev-news-ico svg, .ws-wev-news-pill .ws-wev-news-ico svg { width: 16px; height: 16px; }
.ws-wev-news-line { flex: 1; min-width: 0; line-height: 1.35; }
.ws-wev-news-go svg { width: 16px; height: 16px; } [dir="rtl"] .ws-wev-news-go svg { transform: scaleX(-1); }

/* css/site/blocks/youtube.css */
/* YouTube: player, featured, banner (play in place), card, thumb-row (open YouTube). The red is YouTube's own mark. */
.ws-block-youtube { --yt: #FF0033; }
.ws-yt { display: grid; gap: 0; min-width: 0; }
.ws-yt-stage { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--b-radius, calc(var(--site-radius) + 6px)); background: var(--site-ink-dark); box-shadow: var(--b-shadow, var(--site-shadow-md)); isolation: isolate; }
.ws-yt-player.is-vertical .ws-yt-stage { aspect-ratio: 9 / 16; width: min(100%, 340px); margin-inline: auto; }
.ws-yt-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ws-site .ws-yt-facade { position: absolute; inset: 0; display: block; color: var(--site-on-media); }
.ws-yt-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--site-ease), filter .3s; }
.ws-yt-facade:hover .ws-yt-poster { transform: scale(1.03); }
.ws-yt-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .55) 0%, rgb(0 0 0 / 0) 34%, rgb(0 0 0 / 0) 62%, rgb(0 0 0 / .45) 100%); }
.ws-yt-top { position: absolute; inset-inline: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: 14px 16px; text-align: start; }
.ws-yt-mark { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / .92); color: var(--yt); }
.ws-site .ws-yt-mark svg { width: 17px; height: 17px; }
.ws-yt-title { font-weight: 700; font-size: 15px; line-height: 1.3; text-shadow: 0 1px 8px rgb(0 0 0 / .45); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ws-yt-play { position: absolute; inset: 0; margin: auto; width: 72px; height: 50px; border-radius: 16px; display: grid; place-items: center; background: var(--yt); color: #FFFFFF;
  box-shadow: 0 12px 30px -10px rgb(0 0 0 / .6); transition: transform .2s var(--site-ease), background .2s; }
.ws-site .ws-yt-play svg { width: 24px; height: 24px; fill: currentColor; stroke: none; margin-inline-start: 3px; }
.ws-yt-facade:hover .ws-yt-play, .ws-yt-facade:focus-visible .ws-yt-play { transform: scale(1.08); }
.ws-yt-play.is-small { width: 52px; height: 36px; border-radius: 12px; }
.ws-yt-play.is-tiny { width: 34px; height: 24px; border-radius: 8px; }
.ws-site .ws-yt-play.is-small svg { width: 18px; height: 18px; } .ws-site .ws-yt-play.is-tiny svg { width: 13px; height: 13px; margin-inline-start: 1px; }
.ws-yt-dur { position: absolute; inset-inline-end: 10px; bottom: 10px; padding: 2px 7px; border-radius: 6px; background: rgb(0 0 0 / .78); color: #FFFFFF; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr; }
.ws-yt-facade:focus-visible { outline: 3px solid color-mix(in oklab, var(--site-accent) 70%, transparent); outline-offset: -3px; border-radius: inherit; }

/* Featured: the player on a card with the words beneath. */
.ws-yt-featured { padding: var(--b-pad, 10px); gap: 12px; }
.ws-yt-featured .ws-yt-stage { border-radius: calc(var(--site-radius) + 2px); box-shadow: none; }
.ws-yt-body { display: grid; gap: 6px; padding: 2px 8px 8px; text-align: start; min-width: 0; }
.ws-site .ws-yt-meta { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--site-muted); }
.ws-site .ws-yt-meta svg { width: 15px; height: 15px; color: var(--yt); }
.ws-site .ws-yt-out { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin-top: 2px; font-weight: 700; font-size: 14px; color: var(--site-accent); }
.ws-yt-out svg { width: 15px; height: 15px; }

/* Banner: cinematic, the title over the picture. */
.ws-yt-banner .ws-yt-stage { aspect-ratio: 4 / 3; box-shadow: var(--b-shadow, var(--site-shadow-lg)); }
@container ws-page (min-width: 600px) { .ws-yt-banner .ws-yt-stage { aspect-ratio: 2 / 1; } }
.ws-yt-banner .ws-yt-shade { background: linear-gradient(180deg, rgb(0 0 0 / 0) 25%, rgb(0 0 0 / .82) 100%); }
.ws-yt-over { position: absolute; inset-inline: 0; bottom: 0; display: grid; justify-items: start; gap: 10px; padding: 20px; text-align: start; }
.ws-yt-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; opacity: .9; }
.ws-site .ws-yt-eyebrow svg { width: 17px; height: 17px; color: var(--yt); background: #FFFFFF; border-radius: 4px; padding: 1px; }
.ws-yt-big { font-family: var(--site-heading); font-size: calc(1.45rem * var(--b-scale, 1)); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; text-shadow: 0 2px 16px rgb(0 0 0 / .35); max-width: 26ch; }
@container ws-page (min-width: 600px) { .ws-yt-big { font-size: calc(1.9rem * var(--b-scale, 1)); } .ws-yt-over { padding: 28px; } }
.ws-yt-go { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 5px 16px 5px 5px; border-radius: 999px; background: rgb(255 255 255 / .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgb(255 255 255 / .28); font-weight: 700; font-size: 14px; transition: background .2s; }
.ws-yt-facade:hover .ws-yt-go { background: rgb(255 255 255 / .26); }
.ws-yt-go-play { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--yt); }
.ws-site .ws-yt-go-play svg { width: 15px; height: 15px; fill: currentColor; stroke: none; margin-inline-start: 2px; }
.ws-yt-go-dur { opacity: .75; font-variant-numeric: tabular-nums; direction: ltr; }

/* Card: opens YouTube. */
.ws-yt-card { display: grid; overflow: hidden; text-align: start; }
.ws-yt-card .ws-yt-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--site-ink-dark); }
.ws-yt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--site-ease); }
.ws-hov:hover .ws-yt-thumb img { transform: scale(1.04); }
.ws-yt-card .ws-yt-body { padding: var(--b-pad, 16px 18px 18px); gap: 7px; }
.ws-yt-cta { justify-self: start; display: inline-flex; align-items: center; gap: 7px; min-height: 42px; margin-top: 4px; padding: 0 16px; border-radius: var(--site-btn-radius); background: var(--yt); color: #FFFFFF; font-weight: 700; font-size: 14px; }
.ws-site .ws-yt-cta svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }

/* Thumbnail row: compact, opens YouTube. */
.ws-yt-row { display: flex; align-items: center; gap: 12px; padding: var(--b-pad, 8px); padding-inline-end: 14px; text-align: start; min-height: 76px; }
.ws-yt-row .ws-yt-thumb { position: relative; width: 116px; flex: none; aspect-ratio: 16 / 9; overflow: hidden; border-radius: max(8px, calc(var(--site-radius) - 2px)); background: var(--site-ink-dark); }
.ws-yt-row .ws-yt-dur { inset-inline-end: 5px; bottom: 5px; font-size: 10.5px; padding: 1px 5px; }
.ws-yt-row-t { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ws-yt-row-t strong { font-weight: 700; font-size: 14.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ws-yt-row-t small { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--site-muted); }
.ws-site .ws-yt-row-t small svg { width: 14px; height: 14px; color: var(--yt); }
@container ws-page (min-width: 600px) { .ws-yt-row .ws-yt-thumb { width: 150px; } }

/* css/site/blocks/youtube_latest.css */
/* Latest YouTube uploads (B3 · F3): grid, carousel and list are the shared collection variants with 16:9 thumbnails and
   a play mark; showcase is the newest video in the YouTube block's lazy player with the next ones beside it. The red is
   YouTube's own mark. */
.ws-block-youtube-latest { --yt: #FF0033; container: ytl / inline-size; }
.ws-block-youtube-latest :is(.ws-gcard-media, .ws-cc-media, .ws-li-thumb) { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.ws-block-youtube-latest :is(.ws-gcard-media, .ws-cc-media, .ws-li-thumb) img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.ws-block-youtube-latest .ws-li-thumb { width: 104px; height: auto; flex: none; border-radius: calc(var(--site-radius) - 4px); }
.ws-block-youtube-latest :is(.ws-gcard-media, .ws-cc-media)::after { content: ""; position: absolute; inset: 0; margin: auto; width: 46px; height: 32px; border-radius: 10px;
  background: var(--yt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5.5v13l10.5-6.5z'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: 0 10px 24px -10px rgb(0 0 0 / .6); transition: transform .2s var(--site-ease); }
.ws-block-youtube-latest a:hover :is(.ws-gcard-media, .ws-cc-media)::after { transform: scale(1.08); }

/* Showcase */
.ws-ytl { display: grid; gap: 14px; min-width: 0; text-align: start; }
.ws-ytl-lead { display: grid; gap: 12px; min-width: 0; }
.ws-ytl-new { position: absolute; inset-inline-start: 12px; top: 12px; padding: 4px 10px; border-radius: 999px; background: var(--yt); color: #FFFFFF;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ws-ytl-lead-text { display: grid; gap: 4px; padding-inline: 2px; }
.ws-ytl-lead-text .ws-t1 { font-size: calc(1.15rem * var(--b-scale, 1)); line-height: 1.25; margin: 0; }
.ws-ytl-meta { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--site-muted); font-size: 13px; font-weight: 600; }
.ws-site .ws-ytl-meta svg { width: 18px; height: 18px; flex: none; color: var(--yt); }
.ws-ytl-rest { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.ws-ytl-row { display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 44px; padding: 6px; border-radius: calc(var(--site-radius) + 2px);
  color: inherit; text-decoration: none; transition: background .18s; }
.ws-ytl-row:hover, .ws-ytl-row:focus-visible { background: color-mix(in oklab, var(--site-text) 6%, transparent); }
.ws-ytl-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: calc(var(--site-radius) - 2px); background: color-mix(in oklab, var(--site-text) 10%, transparent); }
.ws-ytl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ws-ytl-thumb .ws-yt-play { opacity: .92; }
.ws-ytl-row-text { display: grid; gap: 3px; min-width: 0; }
.ws-ytl-row-text strong { font-size: 14px; line-height: 1.3; font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ws-ytl-row-text small { color: var(--site-muted); font-size: 12px; font-weight: 600; }
/* Wider pages: the next videos as a row of small cards under the player (side by side when the block itself is wide). */
@container ytl (min-width: 520px) {
  .ws-ytl-rest { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
  .ws-ytl-row { grid-template-columns: 1fr; align-items: start; gap: 8px; padding: 6px; }
}
@container ytl (min-width: 860px) {
  .ws-ytl:not(.is-single) { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; gap: 18px; }
  .ws-ytl:not(.is-single) .ws-ytl-rest { grid-template-columns: 1fr; gap: 4px; }
  .ws-ytl:not(.is-single) .ws-ytl-row { grid-template-columns: 140px minmax(0, 1fr); align-items: center; }
}
@media (prefers-reduced-motion: reduce) { .ws-block-youtube-latest :is(.ws-gcard-media, .ws-cc-media)::after { transition: none; } }

/* css/site/systems/classic.css */
/* Classic system: the profile and one list, 560 px wide at every size (the pre-ADR-0068 page). The base part is all it needs. */
.ws-sys-classic .ws-site-inner { max-width: 560px; }

/* css/site/systems/modern.css */
/* Modern system: a rich header, cards and media, swipeable collections. */
.ws-sys-modern .ws-site-inner { --gap: 14px; }
.ws-shell-modern .ws-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 6px; }
.ws-sys-modern .ws-pv-hero .ws-name { font-size: clamp(2rem, 1.6rem + 2cqw, 2.6rem); letter-spacing: -0.045em; }
.ws-sys-modern .ws-hd .ws-heading { margin-top: 20px; }
@container ws-page (min-width: 1024px) { .ws-sys-modern .ws-site-inner { padding-top: 64px; --gap: 16px; } }

/* css/site/systems/creator.css */
/* Creator system: content first; on desktop the header is a sticky sidebar beside the content. */
.ws-shell-creator { width: 100%; max-width: var(--w); margin: 0 auto; padding: 44px 18px 40px; display: grid; gap: var(--gap); position: relative; }
.ws-shell-creator .ws-side-in, .ws-shell-creator .ws-main { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.ws-sys-creator .ws-hd .ws-heading { margin-top: 18px; }
@container ws-page (min-width: 1024px) {
  .ws-shell-creator { grid-template-columns: 340px minmax(0, 1fr); column-gap: 44px; padding: 48px 32px 48px; align-items: start; }
  .ws-shell-creator.no-side { grid-template-columns: minmax(0, 1fr); }
  .ws-shell-creator .ws-side { position: sticky; top: 28px; }
  .ws-shell-creator .ws-side-in { padding: 28px 22px 24px; background: var(--site-surface); border: 1px solid var(--site-line); border-radius: calc(var(--site-radius) + 14px); box-shadow: var(--site-shadow-lg); }
  .ws-card-glass .ws-shell-creator .ws-side-in { backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); }
  .ws-shell-creator .ws-side .ws-profile-cover { margin: -28px -22px 6px; }
  .ws-shell-creator .ws-side .ws-cover { border-radius: calc(var(--site-radius) + 14px) calc(var(--site-radius) + 14px) 28px 28px; }
  .ws-shell-creator .ws-main { padding-top: 4px; }
  .ws-opt-sidebar-end .ws-shell-creator { grid-template-columns: minmax(0, 1fr) 340px; }
  .ws-opt-sidebar-end .ws-shell-creator .ws-side { order: 2; }
  .ws-shell-creator .ws-main > .ws-block:first-child .ws-heading { margin-top: 0; }
}
.ws-sys-creator .ws-main .ws-hd { text-align: var(--b-align, start); }

/* css/site/systems/commerce.css */
/* Commerce system: a compact store header, a product hero, products in grids; single items two to a row on larger screens. */
.ws-sys-commerce .ws-site-inner { --gap: 14px; }
.ws-shell-commerce .ws-head { display: flex; flex-direction: column; gap: 10px; padding-bottom: 18px; margin-bottom: 6px; border-bottom: 1px solid var(--site-line); }
.ws-shell-commerce .ws-head .ws-socials { justify-content: flex-start; }
.ws-shell-commerce .ws-profile-left { align-items: center; }
.ws-sys-commerce .ws-hd { text-align: var(--b-align, start); }
.ws-sys-commerce .ws-hd .ws-heading { font-size: 1.45rem; letter-spacing: -0.035em; }
@container ws-page (min-width: 1024px) { .ws-sys-commerce .ws-site-inner { padding: 40px 32px 48px; } .ws-shell-commerce .ws-head { flex-direction: row; align-items: center; justify-content: space-between; } }

/* css/site/systems/portfolio.css */
/* Portfolio system: a quiet header, then the work at full width in masonry and showcase layouts. */
.ws-sys-portfolio .ws-site-inner { --gap: 18px; }
.ws-shell-portfolio .ws-head { display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
.ws-shell-portfolio .ws-head .ws-socials { justify-content: flex-start; }
.ws-sys-portfolio .ws-hd { text-align: var(--b-align, start); }
.ws-sys-portfolio .ws-hd-display .ws-heading { font-size: clamp(2.2rem, 1.5rem + 4cqw, 4.2rem); }
.ws-sys-portfolio .ws-profile-left .ws-name { font-size: clamp(1.8rem, 1.4rem + 2cqw, 2.6rem); }
@container ws-page (min-width: 1024px) {
  .ws-sys-portfolio .ws-site-inner { padding: 56px 40px 56px; --gap: 22px; }
  .ws-shell-portfolio .ws-head { flex-direction: row; align-items: flex-end; justify-content: space-between; padding-bottom: 24px; border-bottom: 1px solid var(--site-line); }
}

/* css/site/systems/professional.css */
/* Professional system: a split hero band across the page, then services and contact. */
.ws-hero-band { position: relative; background: radial-gradient(70% 90% at 90% 0%, color-mix(in oklab, var(--site-accent) 20%, transparent), transparent 60%), linear-gradient(180deg, color-mix(in oklab, var(--site-accent) 8%, var(--site-bg-base)), transparent); border-bottom: 1px solid var(--site-line); }
.ws-hero-in { width: 100%; max-width: var(--w); margin: 0 auto; padding: 40px 18px 30px; display: flex; flex-direction: column; gap: 14px; }
.ws-hero-in .ws-socials { justify-content: flex-start; }
.ws-sys-professional .ws-site-inner { padding-top: 32px; --gap: 14px; }
.ws-sys-professional .ws-hd { text-align: var(--b-align, start); }
.ws-sys-professional .ws-hd .ws-heading { font-size: 1.4rem; letter-spacing: -0.03em; }
@container ws-page (min-width: 1024px) { .ws-hero-in { padding: 64px 32px 48px; } .ws-sys-professional .ws-site-inner { padding: 48px 32px 56px; } }

/* css/site/systems/editorial.css */
/* Editorial system: a masthead and a big serif type scale; stories two to a row on larger screens. */
.ws-sys-editorial > .ws-frame { --site-heading: "Instrument Serif", "Iowan Old Style", Georgia, serif; } /* the theme sets --site-heading on .ws-site */
.ws-sys-editorial :is(.ws-name, .ws-heading, .ws-ed-title, .ws-mg-title, .ws-hero-title) { font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.ws-shell-editorial .ws-masthead { display: flex; flex-direction: column; gap: 10px; padding-bottom: 20px; margin-bottom: 10px; border-bottom: 3px double color-mix(in oklab, var(--site-text) 30%, transparent); }
.ws-sys-editorial .ws-pv-minimal .ws-name { font-size: clamp(2.6rem, 1.8rem + 5cqw, 5rem); line-height: .95; }
.ws-sys-editorial .ws-hd { text-align: var(--b-align, start); }
.ws-sys-editorial .ws-hd .ws-heading { font-size: 1.9rem; }
.ws-sys-editorial .ws-hd-display .ws-heading { font-size: clamp(2.4rem, 1.6rem + 4cqw, 4.2rem); }
@container ws-page (min-width: 1024px) {
  .ws-sys-editorial .ws-site-inner { padding: 56px 40px; }
  .ws-shell-editorial .ws-flow { column-gap: 40px; }
  .ws-opt-columns-1 .ws-shell-editorial .ws-flow > .ws-flow-half { grid-column: 1 / -1; }
  .ws-shell-editorial .ws-masthead { flex-direction: row; align-items: flex-end; justify-content: space-between; }
}
.ws-shell-editorial .ws-masthead .ws-profile { align-items: flex-start; text-align: start; } .ws-shell-editorial .ws-masthead .ws-bio { margin-inline: 0; } .ws-shell-editorial .ws-masthead .ws-socials { justify-content: flex-start; }

/* css/site/systems/bento.css */
/* Bento system: every block is a tile in one grid, four across on desktop and two on phones; spans from responsive rules. */
.ws-bento { --grid-cols: 2; display: grid; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); grid-auto-flow: dense; gap: var(--bento-gap, 12px); }
.ws-opt-density-tight .ws-bento { --bento-gap: 8px; } .ws-opt-density-airy .ws-bento { --bento-gap: 18px; }
.ws-bento > .ws-block { display: flex; flex-direction: column; min-width: 0; animation: none; }
.ws-bento > .ws-block > :not(.ws-sheet) { flex: 1; }
.ws-bento .ws-sv-tile, .ws-bento .ws-tile-x { aspect-ratio: auto; height: 100%; min-height: 150px; }
.ws-bento :is(.ws-sv-card, .ws-sv-featured, .ws-sv-thumb-row, .ws-quote, .ws-capture, .ws-countdown, .ws-text, .ws-stats, .ws-pv-card) { height: 100%; }
.ws-bento .ws-block-heading, .ws-bento .ws-block-divider { min-height: 0; }
.ws-bento .ws-block-heading .ws-heading { margin-top: 10px; }
.ws-bento .ws-image { height: 100%; } .ws-bento .ws-image img { height: 100%; object-fit: cover; }
.ws-bento .ws-block-image { min-height: 0; }
.ws-bento .ws-embed { height: 100%; }
.ws-bento .ws-text.ws-tv-plain { padding: 18px; background: var(--site-surface); border: 1px solid var(--site-line); border-radius: calc(var(--site-radius) + 8px); text-align: start; }
.ws-bento .ws-socials { height: 100%; align-content: center; }
.ws-sys-bento .ws-site-inner { padding-top: 32px; }
@container ws-page (min-width: 600px) { .ws-bento { --grid-cols: 4; grid-auto-rows: minmax(160px, auto); } }
@container ws-page (min-width: 1024px) { .ws-sys-bento .ws-site-inner { padding: 48px 32px; } .ws-bento { grid-auto-rows: minmax(180px, auto); } }

/* css/site/systems/luxury.css */
/* Luxury system: full-bleed imagery, generous whitespace, refined type and quiet, hairline buttons. */
.ws-lux-head { position: relative; }
.ws-lux-head .ws-block { animation: none; }
.ws-lux-head .ws-profile-cover { margin: 0; gap: 14px; padding-bottom: 20px; }
.ws-lux-head .ws-cover { height: clamp(240px, 42cqw, 460px); border-radius: 0; }
.ws-lux-head .ws-profile-cover .ws-avatar { width: 124px; height: 124px; margin-top: -72px; }
.ws-lux-head .ws-socials { padding-bottom: 8px; }
.ws-sys-luxury .ws-name { font-size: clamp(2rem, 1.6rem + 2.4cqw, 3rem); font-weight: 500; letter-spacing: -0.02em; }
.ws-sys-luxury .ws-bio { letter-spacing: .01em; }
.ws-sys-luxury .ws-site-inner { --gap: 18px; padding-top: 36px; }
.ws-sys-luxury .ws-button { background: transparent; color: var(--site-text); border: 1px solid color-mix(in oklab, var(--site-text) 34%, transparent); box-shadow: none; text-transform: uppercase; letter-spacing: .16em; font-size: 12.5px; font-weight: 600; min-height: 58px; backdrop-filter: none; }
.ws-sys-luxury .ws-button:hover { background: var(--site-text); color: var(--site-bg-base); transform: none; }
.ws-sys-luxury .ws-button-icon { background: none; }
.ws-sys-luxury .ws-eyebrow { letter-spacing: .24em; font-weight: 600; }
.ws-sys-luxury .ws-hd .ws-heading { font-weight: 500; letter-spacing: -0.01em; }
.ws-sys-luxury .ws-surface { box-shadow: none; }
@container ws-page (min-width: 1024px) { .ws-sys-luxury .ws-site-inner { padding-top: 56px; --gap: 22px; } }

/* css/site/systems/minimal.css */
/* Minimal system: typography first, no boxes (a block's explicit surface still applies). */
.ws-sys-minimal .ws-block:not([class*=" ws-s-surface-"]) :is(.ws-surface, .ws-card) { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding-inline: 0; }
.ws-sys-minimal .ws-block:not([class*=" ws-s-surface-"]) .ws-acc { border-bottom: 1px solid var(--site-line); border-radius: 0; }
.ws-sys-minimal .ws-site-inner { --gap: 10px; padding-top: 56px; }
.ws-sys-minimal .ws-pv-minimal .ws-name { font-size: clamp(2rem, 1.6rem + 2.4cqw, 2.8rem); }
.ws-sys-minimal .ws-sv-minimal-text { padding-block: 12px; border-bottom: 1px solid var(--site-line); }
.ws-sys-minimal .ws-hd .ws-heading { font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--site-muted); margin-top: 24px; font-family: var(--site-font); font-style: normal; }

/* css/site/systems/advanced.css */
/* Advanced system: sections and columns, with a sticky menu of the page's sections. */
.ws-pnav { position: sticky; top: 0; z-index: 30; background: color-mix(in oklab, var(--site-bg-base) 82%, transparent); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); border-bottom: 1px solid var(--site-line); }
.ws-pnav-in { width: 100%; max-width: var(--w); margin: 0 auto; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding: 8px 12px; }
.ws-pnav-in::-webkit-scrollbar { display: none; }
.ws-pnav a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; font-weight: 700; font-size: 14px; white-space: nowrap; color: var(--site-muted); transition: background .2s, color .2s; }
.ws-pnav a:hover { background: color-mix(in oklab, var(--site-text) 7%, transparent); color: var(--site-text); }
.ws-sys-advanced .ws-block[id] { scroll-margin-top: 72px; }
.ws-shell-advanced .ws-head { display: flex; flex-direction: column; gap: 12px; }
.ws-sys-advanced .ws-hd { text-align: var(--b-align, start); }
.ws-sys-advanced .ws-hd .ws-heading { font-size: 1.6rem; letter-spacing: -0.035em; }
@container ws-page (min-width: 1024px) { .ws-sys-advanced .ws-site-inner { padding: 48px 32px 56px; --gap: 18px; } }
.ws-shell-advanced .ws-head .ws-socials { justify-content: flex-start; }

/* css/site/responsive.css */
/* GENERATED by App\Domain\Presence\Display\ResponsiveRules::css() — do not edit by hand (ADR-0068 §5).
   Per-block responsive settings as container queries on the page frame. */
@container ws-page (max-width: 599.98px) {
  .ws-r-m-hidden { display: none !important; }
  .ws-mode-canvas .ws-block.ws-r-m-hidden { display: block !important; opacity: .35; }
  .ws-r-m-cols-1 { --cols: 1; }
  .ws-r-m-cols-2 { --cols: 2; }
  .ws-r-m-cols-3 { --cols: 3; }
  .ws-r-m-cols-4 { --cols: 4; }
  .ws-r-m-span-1x1 { grid-column: span 1; grid-row: span 1; }
  .ws-r-m-span-2x1 { grid-column: span 2; grid-row: span 1; }
  .ws-r-m-span-1x2 { grid-column: span 1; grid-row: span 2; }
  .ws-r-m-span-2x2 { grid-column: span 2; grid-row: span 2; }
  .ws-r-m-span-full { grid-column: 1 / -1; }
  .ws-r-m-align-start { --b-align: start; --b-justify: flex-start; text-align: start; }
  .ws-r-m-align-center { --b-align: center; --b-justify: center; text-align: center; }
  .ws-r-m-layout-grid .ws-track { display: grid !important; grid-template-columns: repeat(var(--cols, var(--c, 2)), minmax(0, 1fr)) !important; overflow: visible !important; }
  .ws-r-m-layout-grid .ws-track > * { flex: initial !important; }
  .ws-r-m-layout-grid .ws-car-nav { display: none !important; }
  .ws-r-m-layout-carousel .ws-track { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; overscroll-behavior-x: contain; scrollbar-width: none; padding-block-end: 4px; }
  .ws-r-m-layout-carousel .ws-track::-webkit-scrollbar { display: none; }
  .ws-r-m-layout-carousel .ws-track > * { flex: 0 0 var(--car-w, 78%) !important; scroll-snap-align: start; grid-column: auto !important; grid-row: auto !important; }
  .ws-r-m-layout-carousel .ws-car-nav { display: flex !important; }
  .ws-r-m-layout-list .ws-track, .ws-r-m-layout-stack .ws-track { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; overflow: visible !important; }
  .ws-r-m-layout-list .ws-track > *, .ws-r-m-layout-stack .ws-track > * { grid-column: auto !important; grid-row: auto !important; flex: initial !important; }
  .ws-r-m-layout-stack .ws-track { gap: calc(var(--site-gap, 12px) * 1.5) !important; }
  .ws-r-m-layout-list .ws-car-nav, .ws-r-m-layout-stack .ws-car-nav { display: none !important; }
}
@container ws-page (min-width: 600px) and (max-width: 1023.98px) {
  .ws-r-t-hidden { display: none !important; }
  .ws-mode-canvas .ws-block.ws-r-t-hidden { display: block !important; opacity: .35; }
  .ws-r-t-cols-1 { --cols: 1; }
  .ws-r-t-cols-2 { --cols: 2; }
  .ws-r-t-cols-3 { --cols: 3; }
  .ws-r-t-cols-4 { --cols: 4; }
  .ws-r-t-span-1x1 { grid-column: span 1; grid-row: span 1; }
  .ws-r-t-span-2x1 { grid-column: span 2; grid-row: span 1; }
  .ws-r-t-span-1x2 { grid-column: span 1; grid-row: span 2; }
  .ws-r-t-span-2x2 { grid-column: span 2; grid-row: span 2; }
  .ws-r-t-span-full { grid-column: 1 / -1; }
  .ws-r-t-align-start { --b-align: start; --b-justify: flex-start; text-align: start; }
  .ws-r-t-align-center { --b-align: center; --b-justify: center; text-align: center; }
  .ws-r-t-layout-grid .ws-track { display: grid !important; grid-template-columns: repeat(var(--cols, var(--c, 2)), minmax(0, 1fr)) !important; overflow: visible !important; }
  .ws-r-t-layout-grid .ws-track > * { flex: initial !important; }
  .ws-r-t-layout-grid .ws-car-nav { display: none !important; }
  .ws-r-t-layout-carousel .ws-track { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; overscroll-behavior-x: contain; scrollbar-width: none; padding-block-end: 4px; }
  .ws-r-t-layout-carousel .ws-track::-webkit-scrollbar { display: none; }
  .ws-r-t-layout-carousel .ws-track > * { flex: 0 0 var(--car-w, 78%) !important; scroll-snap-align: start; grid-column: auto !important; grid-row: auto !important; }
  .ws-r-t-layout-carousel .ws-car-nav { display: flex !important; }
  .ws-r-t-layout-list .ws-track, .ws-r-t-layout-stack .ws-track { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; overflow: visible !important; }
  .ws-r-t-layout-list .ws-track > *, .ws-r-t-layout-stack .ws-track > * { grid-column: auto !important; grid-row: auto !important; flex: initial !important; }
  .ws-r-t-layout-stack .ws-track { gap: calc(var(--site-gap, 12px) * 1.5) !important; }
  .ws-r-t-layout-list .ws-car-nav, .ws-r-t-layout-stack .ws-car-nav { display: none !important; }
}
@container ws-page (min-width: 1024px) {
  .ws-r-d-hidden { display: none !important; }
  .ws-mode-canvas .ws-block.ws-r-d-hidden { display: block !important; opacity: .35; }
  .ws-r-d-cols-1 { --cols: 1; }
  .ws-r-d-cols-2 { --cols: 2; }
  .ws-r-d-cols-3 { --cols: 3; }
  .ws-r-d-cols-4 { --cols: 4; }
  .ws-r-d-span-1x1 { grid-column: span 1; grid-row: span 1; }
  .ws-r-d-span-2x1 { grid-column: span 2; grid-row: span 1; }
  .ws-r-d-span-1x2 { grid-column: span 1; grid-row: span 2; }
  .ws-r-d-span-2x2 { grid-column: span 2; grid-row: span 2; }
  .ws-r-d-span-full { grid-column: 1 / -1; }
  .ws-r-d-align-start { --b-align: start; --b-justify: flex-start; text-align: start; }
  .ws-r-d-align-center { --b-align: center; --b-justify: center; text-align: center; }
  .ws-r-d-layout-grid .ws-track { display: grid !important; grid-template-columns: repeat(var(--cols, var(--c, 2)), minmax(0, 1fr)) !important; overflow: visible !important; }
  .ws-r-d-layout-grid .ws-track > * { flex: initial !important; }
  .ws-r-d-layout-grid .ws-car-nav { display: none !important; }
  .ws-r-d-layout-carousel .ws-track { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; overscroll-behavior-x: contain; scrollbar-width: none; padding-block-end: 4px; }
  .ws-r-d-layout-carousel .ws-track::-webkit-scrollbar { display: none; }
  .ws-r-d-layout-carousel .ws-track > * { flex: 0 0 var(--car-w, 78%) !important; scroll-snap-align: start; grid-column: auto !important; grid-row: auto !important; }
  .ws-r-d-layout-carousel .ws-car-nav { display: flex !important; }
  .ws-r-d-layout-list .ws-track, .ws-r-d-layout-stack .ws-track { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; overflow: visible !important; }
  .ws-r-d-layout-list .ws-track > *, .ws-r-d-layout-stack .ws-track > * { grid-column: auto !important; grid-row: auto !important; flex: initial !important; }
  .ws-r-d-layout-stack .ws-track { gap: calc(var(--site-gap, 12px) * 1.5) !important; }
  .ws-r-d-layout-list .ws-car-nav, .ws-r-d-layout-stack .ws-car-nav { display: none !important; }
}

/* css/components/builder.css */
/* Pages list + three-pane builder ---------------------------------------- */
@layer components {
  /* ---- Page hero (shared by list screens) ---- */
  .page-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 26px; }
  .page-hero .page-title { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.6rem); letter-spacing: -0.045em; margin-top: 4px; }

  /* ---- Pages grid ---- */
  .site-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 18px; }
  .site-card { position: relative; display: flex; flex-direction: column; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e1); overflow: hidden; transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out); text-align: start; }
  .site-card:hover { transform: translateY(-4px); box-shadow: var(--e3); }
  .stretched-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
  .site-card .badge { position: relative; z-index: 2; }
  .site-thumb { position: relative; height: 250px; overflow: hidden; margin: 8px 8px 0; border-radius: 18px; pointer-events: none; }
  .site-thumb .page-preview { position: absolute; left: 50%; top: 0; translate: -50% 0; }
  .site-thumb::after { content: ""; position: absolute; inset: auto 0 0; height: 70px; background: linear-gradient(transparent, rgb(0 0 0 / .08)); }
  .site-thumb-actions { position: absolute; inset-inline-end: 10px; bottom: 10px; z-index: 3; pointer-events: auto; opacity: 0; transform: translateY(6px); transition: all var(--t-base) var(--ease-out); }
  .site-card:hover .site-thumb-actions { opacity: 1; transform: none; }
  .site-card-body { padding: 14px 18px 16px; }
  .site-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.08rem; letter-spacing: -0.02em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .site-card-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: var(--fs-micro); color: var(--text-muted); }
  .site-card-stats span { display: inline-flex; align-items: center; gap: 5px; }
  .site-card-stats b { color: var(--ink); font-weight: 700; }
  .site-card-new { align-items: center; justify-content: center; gap: 8px; min-height: 340px; border: 1.5px dashed var(--line-strong); background: transparent; box-shadow: none; }
  .site-card-new b { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); }
  .site-card-new-icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--grad-brand); color: var(--forest-950); box-shadow: var(--e-glow); margin-bottom: 6px; }
  .site-card-new-icon svg { width: 24px; height: 24px; }
  .site-card-new:hover { border-color: var(--accent); background: var(--accent-soft); }

  /* Scaled, non-interactive render of a page document */
  .page-preview { width: 390px; transform: scale(var(--scale, .6)); transform-origin: top center; margin-bottom: calc(-100% * (1 - var(--scale, .6))); pointer-events: none; }
  .page-preview-inner .ws-block { animation: none; cursor: default; }
  .page-preview-inner .ws-site { min-height: 820px; }
  .page-preview.is-phone { position: absolute; left: 50%; top: 0; translate: -50% 0; }

  /* Empty hero */
  .empty-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 24px; padding: clamp(28px, 5vw, 56px); border-radius: 32px; min-height: 420px; }
  .empty-hero-copy h2 { color: #fff; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.2rem); letter-spacing: -0.045em; line-height: 1.02; margin-top: 16px; }
  .empty-hero-copy h2 em.accent { color: #C2F45B; }
  .empty-hero-copy p { color: rgb(255 255 255 / .7); margin-top: 12px; max-width: 460px; font-size: 1rem; }
  .empty-hero-art { display: grid; place-items: center; }
  .empty-hero-art .phone { width: 230px; }
  @media (max-width: 800px) { .empty-hero { grid-template-columns: 1fr; } .empty-hero-art { display: none; } }

  /* ---- Create studio ---- */
  .studio-wrap { position: fixed; inset: 0; z-index: 61; display: grid; place-items: center; padding: 16px; overflow-y: auto; }
  .studio { width: min(1180px, 100%); height: min(820px, calc(100dvh - 32px)); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); background: var(--surface); border-radius: 32px; overflow: hidden; box-shadow: var(--e3); border: 1px solid var(--line); }
  .studio-main { display: flex; flex-direction: column; min-height: 0; }
  .studio-head { display: flex; justify-content: space-between; gap: 16px; padding: 26px 28px 8px; }
  .studio-title { font-size: 2rem; letter-spacing: -0.045em; }
  .studio-title em.accent { background: linear-gradient(95deg, var(--emerald-600), var(--violet-500)); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .studio-tabs { display: flex; gap: 6px; padding: 10px 28px 0; }
  .studio-tab { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; font-weight: 700; color: var(--text-muted); border: 1px solid transparent; transition: all var(--t-fast); }
  .studio-tab svg { width: 16px; height: 16px; }
  .studio-tab:hover { color: var(--ink); background: var(--surface-hover); }
  .studio-tab[aria-selected="true"] { background: var(--ink); color: var(--text-on-ink); }
  .studio-tab.is-assist[aria-selected="true"] { background: linear-gradient(135deg, #9A83FF, #7C5CFF 50%, #5B3BE8); color: #fff; box-shadow: var(--e-glow-violet); }
  .studio-body { flex: 1; overflow-y: auto; padding: 20px 28px; }
  .studio-fields { display: grid; grid-template-columns: 1fr 1.3fr; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
  .studio-foot { display: flex; align-items: center; gap: 8px; padding: 16px 28px; border-top: 1px solid var(--line); background: var(--surface-2); }
  .studio-preview-toggle { display: none; }
  .studio-stage { position: relative; overflow: hidden; background: var(--grad-ink); isolation: isolate; }
  .studio-stage-inner { position: relative; z-index: 1; height: 100%; display: grid; place-items: center; align-content: center; gap: 18px; padding: 28px; }
  .studio-stage .phone { width: 290px; }
  .studio-stage .phone-screen { transition: opacity var(--t-base), filter var(--t-base); }
  .studio-stage .phone-screen.is-loading { opacity: .5; filter: blur(3px); }
  .studio-empty { height: 100%; display: grid; place-items: center; align-content: center; gap: 14px; padding: 30px; text-align: center; color: var(--text-muted); background: linear-gradient(180deg, #F4F1FF, #fff); }
  .studio-empty p { color: #6B6488; font-size: 13px; }

  .assist-box { position: relative; border-radius: 22px; padding: 18px; background: linear-gradient(180deg, var(--assist-soft), var(--surface) 70%); }
  .assist-label { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
  .assist-orb { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; background: var(--grad-violet); color: #fff; box-shadow: var(--e-glow-violet); flex: none; }
  .assist-orb svg { width: 17px; height: 17px; }
  .assist-orb.is-lg { width: 56px; height: 56px; border-radius: 18px; }
  .assist-orb.is-lg svg { width: 26px; height: 26px; }
  .assist-input { width: 100%; margin-top: 12px; border: 0; background: transparent; resize: none; font-size: 1.05rem; line-height: 1.55; color: var(--ink); outline: none; font-weight: 500; }
  .assist-input::placeholder { color: var(--text-subtle); }
  .assist-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
  .assist-notes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
  .assist-notes .chip svg { color: var(--accent-text); }

  .template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 12px; }
  .template-card { position: relative; display: grid; gap: 10px; padding: 8px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); text-align: start; transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base), border-color var(--t-fast); }
  .template-card:hover { transform: translateY(-3px); box-shadow: var(--e2); }
  .template-card.is-selected { border-color: transparent; box-shadow: 0 0 0 2px var(--ink), var(--e2); }
  .template-swatch { position: relative; display: grid; align-content: start; justify-items: center; gap: 5px; height: 132px; padding-bottom: 10px; border-radius: 14px; overflow: hidden; }
  .template-swatch-cover { width: 100%; height: 42px; margin-bottom: -8px; }
  .template-swatch-dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .9); box-shadow: 0 4px 10px -4px rgb(0 0 0 / .4); }
  .template-swatch-line { width: 48%; height: 5px; border-radius: 4px; opacity: .8; }
  .template-swatch-line.is-short { width: 30%; opacity: .35; }
  .template-swatch-btn { width: 76%; height: 13px; border-radius: 6px; margin-top: 2px; }
  .template-meta { display: grid; padding: 0 4px 4px; }
  .template-meta b { font-family: var(--font-display); font-size: .98rem; font-weight: 700; color: var(--ink); letter-spacing: -0.015em; }
  .template-meta small { font-size: 11.5px; color: var(--text-muted); }
  .template-check { position: absolute; top: 14px; inset-inline-end: 14px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--text-on-ink); box-shadow: var(--e2); }
  .template-check svg { width: 14px; height: 14px; }

  @media (max-width: 900px) {
    .studio { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 24px); border-radius: 26px; }
    .studio-stage { position: absolute; inset: auto 0 72px 0; height: 0; transition: height var(--t-slow) var(--ease-out); z-index: 5; border-radius: 26px 26px 0 0; }
    .studio-stage.is-open { height: calc(100% - 120px); }
    .studio-preview-toggle { display: inline-flex; }
    .studio-fields { grid-template-columns: 1fr; }
    .studio-head, .studio-tabs, .studio-body, .studio-foot { padding-inline-start: 18px; padding-inline-end: 18px; }
    .studio .studio-fields { margin-inline-start: 18px !important; margin-inline-end: 18px !important; }
    .studio-foot .btn-ghost { display: none; }
    /* Narrow phones (R2): the tab strip and the footer wrap instead of running off the dialog's end edge. */
    .studio-tabs { flex-wrap: wrap; }
    .studio-tab { padding: 0 12px; }
    .studio-foot { flex-wrap: wrap; }
    .studio-foot > .btn-lg { flex: 1 1 auto; min-width: 0; justify-content: center; }
  }

  /* ---- Builder frame ---- */
  body.is-builder { overflow: hidden; }
  .builder { height: 100dvh; display: grid; grid-template-rows: 56px minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); background: var(--canvas); }
  .builder-bar > * { min-width: 0; }
  .builder-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 0 14px; background: var(--surface); border-bottom: 1px solid var(--line); }
  .builder-bar > :last-child { justify-self: end; }
  .builder-center { justify-self: center; }
  .save-state { display: inline-flex; align-items: center; min-width: 110px; justify-content: flex-end; }
  .save-state svg { display: inline; vertical-align: -2px; }
  .spin { animation: spin .8s linear infinite; }

  .builder-body { display: grid; grid-template-columns: 300px minmax(0, 1fr) 340px; min-height: 0; }
  .builder-left, .builder-right { display: flex; flex-direction: column; min-height: 0; background: var(--surface); }
  .builder-left { border-inline-end: 1px solid var(--line); }
  .builder-right { border-inline-start: 1px solid var(--line); }
  .builder-tabs { display: flex; gap: 18px; padding: 0 16px; border-bottom: 1px solid var(--line); flex: none; }
  .builder-tabs .tab { padding: 13px 0 11px; }
  .builder-tabs .tab:disabled { opacity: .4; cursor: not-allowed; }
  .builder-scroll { flex: 1; overflow-y: auto; padding: 14px 14px 32px; }

  /* ---- Outline ---- */
  .outline { grid-template-columns: minmax(0, 1fr); display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; }
  .outline-item { position: relative; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 11px; border: 1px solid transparent; background: var(--surface); transition: background var(--t-instant), border-color var(--t-fast), box-shadow var(--t-fast); }
  .outline-item:hover { background: var(--surface-hover); }
  .outline-item.is-selected { border-color: color-mix(in oklab, var(--accent) 55%, var(--line)); background: var(--accent-soft); box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent); }
  .outline-item.is-hidden .outline-main { opacity: .45; }
  .outline-item.sortable-ghost { opacity: .35; }
  .outline-item.sortable-chosen { box-shadow: var(--e2); background: var(--surface); }
  .outline-handle { display: grid; place-items: center; width: 20px; height: 34px; color: var(--text-subtle); cursor: grab; flex: none; }
  .outline-handle:active { cursor: grabbing; }
  .outline-handle svg { width: 14px; height: 14px; }
  .outline-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 4px 4px; text-align: start; border-radius: 8px; }
  .outline-icon { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--surface-sunken); border: 1px solid var(--line); color: var(--ink); }
  .outline-icon svg { width: 15px; height: 15px; }
  .outline-item.is-selected .outline-icon { background: var(--ink); color: var(--text-on-ink); border-color: transparent; }
  .outline-title { display: block; font-size: var(--fs-small); font-weight: 500; color: var(--ink); line-height: 1.25; }
  .outline-sub { display: block; font-size: var(--fs-micro); color: var(--text-muted); line-height: 1.3; }
  .outline-actions { display: flex; opacity: 0; transition: opacity var(--t-fast); }
  .outline-item:hover .outline-actions, .outline-item.is-selected .outline-actions, .outline-item:focus-within .outline-actions { opacity: 1; }
  .outline-add { margin-top: 10px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border: 1.5px dashed var(--line-strong); border-radius: 11px; color: var(--text-muted); font-weight: 500; transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast); }
  .outline-add:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
  .outline-add svg { width: 16px; height: 16px; }

  /* ---- Palette ---- */
  .block-palette { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
  .block-tile { display: grid; justify-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); }
  .block-tile:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--accent) 50%, var(--line)); box-shadow: var(--e2); background: linear-gradient(180deg, var(--accent-soft), var(--surface)); }
  .block-tile:active { transform: translateY(0) scale(.97); }
  .block-tile-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-sunken); color: var(--ink); border: 1px solid var(--line); }
  .block-tile:hover .block-tile-icon { background: var(--ink); color: var(--text-on-ink); border-color: transparent; }
  .block-tile-icon svg { width: 17px; height: 17px; }
  .block-tile-label { font-size: 11.5px; font-weight: 500; color: var(--ink); text-align: center; line-height: 1.2; }
  /* R13A · a premium tile the plan doesn't include: visible, muted, with its lock badge */
  .block-tile.is-locked { cursor: default; background: var(--surface-sunken); }
  .block-tile.is-locked:hover { transform: none; box-shadow: none; }
  .block-tile.is-locked .block-tile-icon, .block-tile.is-locked .block-tile-label { opacity: .6; }

  /* ---- Canvas + device ---- */
  .builder-canvas { position: relative; overflow-y: auto; padding: 28px 24px 60px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
  .device { width: 390px; max-width: 100%; transition: width var(--t-slow) var(--ease-out); flex: none; }
  .device.is-tablet { width: min(820px, 100%); }
  .device.is-desktop { width: min(1280px, 100%); }
  .device.is-tablet .device-screen { border-radius: 24px; }
  .device-screen { border-radius: 36px; overflow: hidden; min-height: 720px; box-shadow: 0 0 0 10px #0E1A15, 0 0 0 11px #2A3631, 0 40px 80px -30px rgb(8 50 36 / .55); position: relative; }
  .device.is-desktop .device-screen { border-radius: 14px; box-shadow: 0 0 0 1px var(--line-strong), 0 30px 60px -30px rgb(8 50 36 / .45); min-height: 640px; }
  .device-screen .ws-site { min-height: 720px; }
  .device.is-desktop .device-screen .ws-site { min-height: 640px; }
  .device-screen .ws-block { cursor: pointer; outline: 2px solid transparent; outline-offset: 5px; border-radius: calc(var(--site-radius) + 4px); transition: outline-color var(--t-fast); }
  .device-screen .ws-block:hover { outline-color: color-mix(in oklab, #0BC284 45%, transparent); }
  .device-screen .ws-block.is-selected { outline-color: #0BC284; }
  .device-screen .ws-block.is-hidden { opacity: .35; }
  .device-screen a, .device-screen button, .device-screen input, .device-screen summary { pointer-events: none; }
  .canvas-warn { max-width: 390px; }

  /* ---- Inspector ---- */
  .inspector-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
  .inspector-section { border-top: 1px solid var(--line); padding-top: 12px; }
  .inspector-section summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: var(--fs-small); font-weight: 500; color: var(--ink); }
  .inspector-section summary::-webkit-details-marker { display: none; }
  .image-field { display: flex; gap: 12px; align-items: flex-start; }
  .image-field-preview { width: 64px; height: 64px; flex: none; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: var(--surface-sunken); border: 1px solid var(--line); color: var(--text-subtle); }
  .image-field-preview img { width: 100%; height: 100%; object-fit: cover; }
  .theme-swatch { display: grid; grid-template-columns: 18px 1fr; grid-template-rows: 10px 10px; gap: 4px; width: 62%; align-items: center; }
  .theme-swatch > span:first-child { grid-row: span 2; }
  .theme-swatch > span:not(:first-child) { height: 10px; }
  .btn-sample { display: block; width: 60%; height: 16px; border-radius: 6px; }
  .btn-sample-solid { background: var(--ink); }
  .btn-sample-soft { background: color-mix(in oklab, var(--accent) 22%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 40%, transparent); }
  .btn-sample-outline { border: 1.5px solid var(--ink); }
  .btn-sample-shadow { background: var(--surface); box-shadow: 0 4px 10px -3px rgb(0 0 0 / .3); }

  .builder-mobile-tabs { display: none; }

  @media (max-width: 1180px) { .builder-body { grid-template-columns: 260px minmax(0, 1fr) 300px; } }
  @media (max-width: 1023px) {
    .builder { grid-template-rows: 56px minmax(0, 1fr) 60px; }
    .builder-bar { grid-template-columns: minmax(0, 1fr) auto; }
    .builder-center { display: none; }
    .builder-body { grid-template-columns: minmax(0, 1fr); }
    .builder-left, .builder-right, .builder-canvas { display: none; }
    .builder-body[data-pane="blocks"] .builder-left, .builder-body[data-pane="inspector"] .builder-right { display: flex; border: 0; }
    .builder-body[data-pane="canvas"] .builder-canvas { display: flex; padding: 18px 12px 40px; }
    .builder-mobile-tabs { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface); border-top: 1px solid var(--line); }
    .builder-mobile-tabs button { display: grid; justify-items: center; align-content: center; gap: 2px; font-size: 11px; font-weight: 500; color: var(--text-muted); }
    .builder-mobile-tabs button svg { width: 20px; height: 20px; }
    .builder-mobile-tabs button[aria-pressed="true"] { color: var(--ink); }
    .builder-mobile-tabs button[aria-pressed="true"] svg { color: var(--accent-text); }
    .device-screen { box-shadow: 0 0 0 1px var(--line-strong), 0 20px 40px -24px rgb(8 50 36 / .45); border-radius: 22px; min-height: 600px; }
  }
}

/* ---- Builder v2: premium chrome ---- */
@layer components {
  .builder { grid-template-rows: 64px minmax(0, 1fr); background: var(--canvas); background-image: var(--grad-mesh); }
  .builder-bar { background: color-mix(in oklab, var(--surface) 86%, transparent); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); padding: 0 16px; }
  .builder-site-dot { width: 34px; height: 34px; border-radius: 11px; flex: none; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3), var(--e1); }
  .builder-assist-btn { height: 34px; padding: 0 12px; border-radius: 10px; }
  .builder-body { grid-template-columns: 300px minmax(0, 1fr) 360px; gap: 10px; padding: 10px; }
  .builder-left, .builder-right { border: 1px solid var(--line) !important; border-radius: 22px; overflow: hidden; box-shadow: var(--e1); }
  .builder-tabs { gap: 4px; padding: 8px; border-bottom: 1px solid var(--line); }
  .builder-tabs .tab { padding: 0 12px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--text-muted); border: 0; }
  .builder-tabs .tab:hover { background: var(--surface-hover); color: var(--ink); }
  .builder-tabs .tab.is-active { background: var(--ink); color: var(--text-on-ink); }
  .builder-tabs .tab::after { display: none; }
  .builder-canvas { border-radius: 22px; background: radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--text-subtle) 40%, transparent) 1px, transparent 0) 0 0 / 20px 20px; padding-top: 18px; }
  .canvas-url { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--line); box-shadow: var(--e1); font-size: 12.5px; font-weight: 700; color: var(--ink); backdrop-filter: blur(10px); }
  .device-screen { box-shadow: 0 0 0 10px #111413, 0 0 0 11px #2B302D, 0 50px 90px -40px rgb(0 0 0 / .55), 0 30px 60px -30px rgb(11 194 132 / .25); border-radius: 40px; }
  :root[data-theme="dark"] .device-screen { box-shadow: 0 0 0 10px #1C201F, 0 0 0 11px #353B38, 0 50px 90px -40px rgb(0 0 0 / .9), 0 30px 60px -30px rgb(124 92 255 / .3); }
  .device-screen .ws-block.is-selected { outline-color: var(--violet-500); }
  .device-screen .ws-block:hover { outline-color: color-mix(in oklab, var(--violet-500) 45%, transparent); }

  .builder-quick { display: grid; gap: 8px; margin-bottom: 14px; }
  .builder-quick-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; text-align: start; transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base); }
  .builder-quick-card:hover { transform: translateY(-2px); }
  .builder-quick-card > svg { width: 20px; height: 20px; flex: none; }
  .builder-quick-card b { display: block; font-family: var(--font-display); font-size: .98rem; letter-spacing: -0.01em; color: inherit; }
  .builder-quick-card small { display: block; font-size: 11.5px; opacity: .75; }
  .builder-quick-card.is-plain { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); }
  .builder-quick-card.is-plain:hover { box-shadow: var(--e2); }

  .outline-item { border-radius: 14px; padding: 5px; }
  .outline-item.is-selected { border-color: color-mix(in oklab, var(--violet-500) 45%, var(--line)); background: var(--assist-soft); box-shadow: 0 0 0 1px color-mix(in oklab, var(--violet-500) 25%, transparent); }
  .outline-item.is-selected .outline-icon { background: var(--grad-violet); color: #fff; }
  .outline-icon { border-radius: 11px; width: 34px; height: 34px; }
  .outline-title { font-weight: 700; }
  .block-tile { border-radius: 16px; padding: 14px 6px 12px; }
  .block-tile-icon { border-radius: 12px; width: 38px; height: 38px; }
  .block-tile:hover .block-tile-icon { background: var(--grad-violet); color: #fff; }
  .block-tile.is-locked:hover .block-tile-icon { background: var(--surface-sunken); color: var(--ink); }

  .builder-dialog { overflow: hidden; }
  .image-field-preview svg { width: 22px; height: 22px; }
  .builder-dialog-hero { display: flex; gap: 16px; align-items: flex-start; padding: 22px; border-radius: 0; }

  .theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .theme-card { display: grid; gap: 6px; text-align: center; font-size: var(--fs-micro); font-weight: 700; color: var(--text-muted); }
  .theme-card-preview { position: relative; display: grid; justify-items: center; align-content: start; gap: 5px; height: 96px; padding-bottom: 8px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base); }
  .theme-card:hover .theme-card-preview { transform: translateY(-2px); box-shadow: var(--e2); }
  .theme-card.is-selected .theme-card-preview { box-shadow: 0 0 0 2px var(--ink), var(--e2); }
  .theme-card.is-selected { color: var(--ink); }
  .theme-card-cover { width: 100%; height: 28px; margin-bottom: -8px; }
  .theme-card-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .9); }
  .theme-card-btn { width: 72%; height: 11px; }
  .theme-card-btn.is-2 { opacity: .14; }
  .btn-sample-glass { background: color-mix(in oklab, var(--ink) 10%, transparent); border: 1px solid var(--line-strong); backdrop-filter: blur(4px); }

  @media (max-width: 1180px) { .builder-body { grid-template-columns: 270px minmax(0, 1fr) 320px; } }
  @media (max-width: 1023px) {
    .builder { grid-template-rows: 60px minmax(0, 1fr) 64px; }
    .builder-body { padding: 0; gap: 0; grid-template-columns: minmax(0, 1fr); }
    .builder-left, .builder-right { border-radius: 0; border: 0 !important; box-shadow: none; }
    .builder-canvas { border-radius: 0; }
    .canvas-url { display: none; }
  }
}

/* Version history (ADR-0031) */
@layer components {
  .hist-save { display: flex; gap: 6px; }
  .hist-save .input { flex: 1; min-width: 0; }
  .hist-empty { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 28px 12px; border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--text-muted); }
  .hist-empty > svg { width: 22px; height: 22px; }
  .hist-list { display: grid; gap: 0; position: relative; }
  .hist-item { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; }
  .hist-item + .hist-item::before { content: ""; position: absolute; inset-inline-start: 15px; top: -10px; height: 20px; width: 2px; background: var(--line); }
  .hist-dot { width: 32px; height: 32px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--surface-sunken); color: var(--text-muted); border: 1px solid var(--line); }
  .hist-dot svg { width: 15px; height: 15px; }
  .hist-dot.is-published { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
  .hist-dot.is-live { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent); }
  .hist-body { flex: 1; min-width: 0; }
  .hist-body > div { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .hist-name { font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }
  .hist-body small { display: block; font-size: 12px; margin-top: 2px; }
}

/* Share preview (ADR-0032) */
@layer components {
  .share-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: var(--e1); }
  .share-card-img { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--surface-sunken); }
  .share-card-body { display: grid; gap: 2px; padding: 10px 12px; background: var(--surface-2); border-top: 1px solid var(--line); }
  .share-card-body small { font-size: 11px; color: var(--text-subtle); text-transform: lowercase; }
  .share-card-body b { font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .share-card-body span { font-size: 12px; color: var(--text-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
}

/* ==========================================================================================================
   Builder v3 (ADR-0068 §11): top bar that fits every width, outline tree, canvas tools and heat map,
   the block library (full-screen modal / bottom sheet) and the page design panel.
   ========================================================================================================== */
@layer components {
  .builder .kbd, .lib .kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; border: 1px solid var(--line-strong);
    background: var(--surface-2); color: var(--text-muted); font: 600 11px/1 var(--font-mono); box-shadow: 0 1px 0 var(--line-strong); }
  .btn-primary .kbd { background: rgb(255 255 255 / .14); color: inherit; border-color: rgb(255 255 255 / .2); box-shadow: none; }

  /* The library, media picker and dialogs are children of the grid too: keep them out of its rows. */
  .builder > :not(.builder-bar, .builder-body, .builder-mobile-tabs) { position: fixed; width: 0; height: 0; }
  .builder-mobile-tabs { grid-row: 3; }

  /* ---- Top bar: nothing wraps; wide-only actions move into the ⋯ menu ---- */
  .builder-bar-start { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: nowrap; }
  .builder-site-name { min-width: 0; line-height: 1.2; }
  .builder-site-name a { color: inherit; }
  .builder-center { display: flex; align-items: center; gap: 6px; }
  .builder-bar-end { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: nowrap; min-width: 0; }
  .builder-bar-end > * { flex: none; }
  /* The save state gives way first (R1): it truncates, then only its icon shows; it never runs under Undo/Redo. */
  .builder-bar-end > .save-state { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .save-state > span, .save-state > span > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
  .save-state-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .builder-center { min-width: 0; }
  .builder-center > .btn { flex: none; }
  .builder-bar-more { display: none; }
  @media (max-width: 1399px) {
    .builder-bar-wide { display: none !important; }
    .builder-bar-more { display: inline-flex; }
    .save-state { min-width: 0; }
    .save-state-text { display: none; }
  }
  @media (max-width: 1023px) {
    .builder-bar { grid-template-columns: minmax(0, 1fr) auto; }
    .builder-center { display: none; }
  }
  @media (max-width: 560px) {
    .builder-bar-label { display: none; }
    .builder-bar { padding: 0 10px; gap: 6px; }
    .builder-bar-end { gap: 4px; }
    .builder-site-dot { display: none; }
  }

  /* ---- Left column: header with the library button, outline tree ---- */
  .builder-left-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--line); flex: none; }
  .builder-left-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
  .builder-add-btn { gap: 6px; }

  .outline-item { display: block; padding: 0; border: 0; background: none; box-shadow: none; }
  .outline-item:hover { background: none; }
  .outline-row { position: relative; display: flex; align-items: center; gap: 2px; padding: 5px; border-radius: 14px; border: 1px solid transparent; background: var(--surface);
    transition: background var(--t-instant), border-color var(--t-fast), box-shadow var(--t-fast); }
  .outline-row:hover { background: var(--surface-hover); }
  .outline-item.is-selected { border: 0; background: none; box-shadow: none; }
  .outline-item.is-selected > .outline-row { border-color: color-mix(in oklab, var(--violet-500) 45%, var(--line)); background: var(--assist-soft); box-shadow: 0 0 0 1px color-mix(in oklab, var(--violet-500) 25%, transparent); }
  .outline-item.is-selected > .outline-row .outline-icon { background: var(--grad-violet); color: #fff; border-color: transparent; }
  .outline-item:not(.is-selected) > .outline-row .outline-icon { background: var(--surface-sunken); color: var(--ink); }
  .outline-item.is-hidden > .outline-row .outline-main { opacity: .45; }
  .outline-item.is-hidden { opacity: 1; }
  .outline-actions { display: flex; align-items: center; opacity: 0; transition: opacity var(--t-fast); }
  .outline-row:hover .outline-actions, .outline-item.is-selected > .outline-row .outline-actions, .outline-row:focus-within .outline-actions { opacity: 1; }
  .outline-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .outline-children { margin: 4px 0 2px; margin-inline-start: 22px; padding-inline-start: 8px; border-inline-start: 1.5px dashed var(--line-strong); }
  .outline-children .outline-icon { width: 28px; height: 28px; border-radius: 9px; }
  .outline-paste { margin-top: 8px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line);
    background: var(--surface-2); color: var(--ink); font-weight: 600; font-size: var(--fs-small); }
  .outline-paste:hover { background: var(--surface-hover); }
  .outline-paste svg { width: 16px; height: 16px; flex: none; }
  @media (hover: none) { .outline-actions { opacity: 1; } }

  /* ---- Canvas: head, tools, drop marks, heat map ---- */
  .canvas-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; max-width: 100%; }
  .canvas-heat-toggle { display: inline-flex; align-items: center; gap: 6px; }
  .canvas-heat-toggle .chip { height: 34px; background: var(--glass-strong); backdrop-filter: blur(10px); }
  .canvas-heat-toggle .chip.is-active { background: linear-gradient(135deg, var(--heat), var(--rose-500)); color: #fff; }
  .canvas-heat-toggle .segmented > *, .insp-insights .segmented > * { white-space: nowrap; }
  .canvas-heat-legend { display: inline-flex; align-items: center; gap: 8px; max-width: min(430px, 100%); color: var(--text-muted); text-align: center; }
  .canvas-heat-scale { width: 64px; height: 8px; border-radius: 99px; flex: none; background: linear-gradient(90deg, color-mix(in oklab, var(--info) 45%, transparent), var(--heat), var(--rose-500)); }
  .device { position: relative; }
  .canvas-tools { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
  .canvas-outline { display: none; }
  .canvas-bar { position: absolute; display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 34px; pointer-events: none; }
  .canvas-bar.is-inside { padding-inline: 8px; }
  .canvas-bar-name { pointer-events: auto; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; background: var(--violet-500); color: #fff;
    font-size: 11.5px; font-weight: 700; white-space: nowrap; box-shadow: var(--e2); max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
  .canvas-bar-actions { pointer-events: auto; display: inline-flex; gap: 2px; padding: 3px; border-radius: 11px; background: var(--ink); box-shadow: var(--e3); }
  .canvas-bar-btn { width: 30px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--text-on-ink); transition: background var(--t-fast); }
  .canvas-bar-btn svg { width: 15px; height: 15px; }
  .canvas-bar-btn:hover, .canvas-bar-btn:focus-visible { background: rgb(255 255 255 / .14); outline: none; }
  .canvas-bar-btn:focus-visible { box-shadow: 0 0 0 2px var(--violet-300); }
  .canvas-bar-btn.is-danger:hover { background: var(--danger); }
  .canvas-bar-btn.is-grab { cursor: grab; }
  .canvas-bar-btn.is-grab:active { cursor: grabbing; }
  .canvas-insert { position: absolute; pointer-events: auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--violet-500); color: #fff;
    box-shadow: 0 0 0 3px var(--surface), var(--e2); transition: transform var(--t-fast) var(--ease-out), background var(--t-fast); z-index: 2; }
  .canvas-insert svg { width: 16px; height: 16px; }
  .canvas-insert:hover, .canvas-insert:focus-visible { transform: scale(1.15); background: var(--violet-600); outline: none; }
  .canvas-drop-line { position: absolute; border-radius: 3px; background: var(--violet-500); box-shadow: 0 0 0 3px color-mix(in oklab, var(--violet-500) 22%, transparent); pointer-events: none; }
  .canvas-drop-box { position: absolute; border-radius: 14px; border: 2px dashed var(--violet-500); background: color-mix(in oklab, var(--violet-500) 10%, transparent); pointer-events: none; }
  @media (pointer: coarse) {
    .canvas-bar { height: 44px; }
    .canvas-bar-btn { width: 40px; height: 38px; }
    .canvas-insert { width: 36px; height: 36px; }
  }
  .builder-canvas.is-heat .device-screen .ws-block { outline: 2px solid color-mix(in oklab, var(--heat) calc(var(--heat-v, 0) * 100%), color-mix(in oklab, var(--info) 60%, transparent)); outline-offset: 3px; }
  .builder-canvas.is-heat .device-screen .ws-block::after { content: var(--heat-label, "–"); position: absolute; inset-block-start: 6px; inset-inline-end: 6px; z-index: 6; pointer-events: none;
    padding: 3px 8px; border-radius: 99px; font: 700 11px/1.3 var(--font-sans); color: #fff; letter-spacing: .01em;
    background: color-mix(in oklab, var(--rose-500) calc(var(--heat-v, 0) * 100%), color-mix(in oklab, var(--info) 80%, #000)); box-shadow: 0 4px 12px -4px rgb(0 0 0 / .45); }
  .builder-canvas.is-heat .device-screen .ws-block .ws-block::after { inset-block-start: 4px; inset-inline-end: 4px; }

  /* ---- Mobile pane bar with the library button ---- */
  @media (max-width: 1023px) {
    .builder-mobile-tabs { grid-template-columns: 1fr 1fr auto 1fr; align-items: center; padding-bottom: env(safe-area-inset-bottom); }
    .builder-mobile-add { padding: 0 10px; }
    .builder-mobile-add > span { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--grad-violet); color: #fff; box-shadow: var(--e-glow-violet); margin-top: -18px; }
    .builder-mobile-add > span svg { width: 22px; height: 22px; }
    .builder-left-head .kbd { display: none; }
  }
}

/* ---- The block library -------------------------------------------------------------------------------- */
@layer components {
  .lib { position: fixed; inset: 0; z-index: 70; }
  .lib-overlay { position: absolute; inset: 0; background: var(--overlay); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .lib-panel { position: absolute; inset: 16px; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border-radius: 28px; background: var(--surface);
    border: 1px solid var(--line); box-shadow: var(--e3), 0 60px 120px -40px rgb(0 0 0 / .45); }
  .lib.is-dragging { pointer-events: none; }
  .canvas-tools-dragging { opacity: 0; pointer-events: none; }
  .lib.is-dragging .lib-panel, .lib.is-dragging .lib-overlay { opacity: 0; pointer-events: none; transition: opacity .18s var(--ease-out); }
  .lib-enter { transition: opacity .22s var(--ease-out), transform .28s var(--ease-out); }
  .lib-enter-start { opacity: 0; transform: translateY(14px) scale(.985); }
  .lib-enter-end { opacity: 1; transform: none; }
  .lib-grabber { display: none; }

  .lib-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px 14px 24px; border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, color-mix(in oklab, var(--assist-soft) 70%, var(--surface)), var(--surface)); }
  .lib-title-wrap { flex: none; min-width: 0; }
  .lib-title { font-family: var(--font-display); font-size: 1.45rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; }
  .lib-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
  .lib-search { position: relative; flex: 1; min-width: 0; max-width: 640px; margin-inline: auto; display: flex; align-items: center; }
  .lib-search > svg { position: absolute; inset-inline-start: 16px; width: 18px; height: 18px; color: var(--text-subtle); pointer-events: none; }
  .lib-search .kbd { position: absolute; inset-inline-end: 12px; pointer-events: none; }
  .lib-search-input { width: 100%; height: 48px; padding: 0 44px 0 46px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
    font-size: 15.5px; font-weight: 500; box-shadow: var(--e1); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
  .lib-search-input::placeholder { color: var(--text-subtle); }
  .lib-search-input:focus { outline: none; border-color: var(--violet-500); box-shadow: 0 0 0 4px color-mix(in oklab, var(--violet-500) 18%, transparent), var(--e1); }
  .lib-search-input::-webkit-search-cancel-button { display: none; }
  .lib-paste { max-width: 220px; flex: none; height: 36px; }
  .lib-close { flex: none; width: 40px; height: 40px; }

  .lib-body { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 0; }
  .lib-rail { overflow-y: auto; padding: 14px 10px 24px; border-inline-end: 1px solid var(--line); background: var(--surface-2); }
  .lib-rail-group { display: grid; gap: 2px; }
  .lib-rail-title { margin: 18px 10px 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); }
  .lib-nav { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 10px; border-radius: 11px; text-align: start; font-size: 13.5px; font-weight: 600; color: var(--text-muted);
    transition: background var(--t-fast), color var(--t-fast); }
  .lib-nav svg, .lib-nav-icon svg { width: 16px; height: 16px; flex: none; }
  .lib-nav-icon { display: inline-grid; place-items: center; }
  .lib-nav:hover { background: var(--surface-hover); color: var(--ink); }
  .lib-nav.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--e1), 0 0 0 1px var(--line); }
  .lib-nav.is-active svg { color: var(--violet-500); }
  .lib-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .lib-count { font-size: 11px; font-weight: 600; color: var(--text-subtle); font-variant-numeric: tabular-nums; }

  .lib-main { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; min-width: 0; }
  .lib-filters { display: flex; align-items: center; gap: 12px; padding: 12px 22px; border-bottom: 1px solid var(--line); min-width: 0; }
  .lib-chips { display: flex; gap: 6px; overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 88%, transparent); }
  [dir="rtl"] .lib-chips { mask-image: linear-gradient(-90deg, #000 88%, transparent); }
  .lib-chips::-webkit-scrollbar { display: none; }
  .lib-chips .chip { flex: none; height: 32px; }
  .lib-selects { display: flex; gap: 6px; flex: none; }
  .lib-select .select { height: 34px; padding-block: 0; font-size: var(--fs-small); min-width: 130px; }
  .lib-results { overflow-y: auto; padding: 6px 22px 32px; scroll-padding: 16px; }
  .lib-hint { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 22px; border-top: 1px solid var(--line); font-size: 12px; color: var(--text-subtle); background: var(--surface-2); }
  .lib-hint span { display: inline-flex; align-items: center; gap: 6px; }

  .lib-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 18px 0 4px; }
  .lib-section-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
  .lib-section-sub { font-size: 12px; color: var(--text-muted); }
  .lib-group-head { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 12px; }
  .lib-group-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
  .lib-group-sub { font-size: 12.5px; color: var(--text-muted); }
  .lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 228px), 1fr)); gap: 14px; }

  .lib-card { position: relative; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / .04);
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base), border-color var(--t-fast); }
  .lib-card:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--violet-500) 35%, var(--line)); box-shadow: var(--e2), 0 18px 40px -24px color-mix(in oklab, var(--violet-500) 55%, transparent); }
  .lib-card:has(.lib-card-main:focus-visible) { border-color: var(--violet-500); box-shadow: 0 0 0 3px color-mix(in oklab, var(--violet-500) 30%, transparent), var(--e2); }
  .lib-card-main { display: grid; width: 100%; text-align: start; border-radius: inherit; cursor: pointer; outline: none; }
  .lib-thumb { position: relative; display: block; height: 168px; overflow: hidden; border-radius: 19px 19px 0 0; background: var(--surface-sunken); isolation: isolate; }
  .lib-thumb::after { content: ""; position: absolute; inset: auto 0 0; height: 36px; background: linear-gradient(transparent, rgb(0 0 0 / .06)); pointer-events: none; }
  .lib-thumb-frame { position: absolute; top: 0; inset-inline-start: 0; width: 150%; height: 150%; transform: scale(calc(1 / 1.5)); transform-origin: top left; pointer-events: none; }
  [dir="rtl"] .lib-thumb-frame { transform-origin: top right; }
  .lib-thumb-frame > .ws-site, .ds-thumb-frame > .ws-site, .insp-variant-frame > .ws-site, .lib-variant-frame > .ws-site { height: 100%; min-height: 100%; display: flex; flex-direction: column; justify-content: safe center; }
  .lib-thumb-icon { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-subtle); }
  .lib-thumb-icon svg { width: 28px; height: 28px; }
  .lib-thumb-icon.is-loading { background: linear-gradient(100deg, transparent 20%, color-mix(in oklab, var(--surface) 70%, transparent) 50%, transparent 80%) 0 0 / 200% 100%, var(--surface-sunken); animation: lib-shimmer 1.2s linear infinite; }
  @keyframes lib-shimmer { to { background-position: -200% 0, 0 0; } }
  .lib-card-body { display: grid; gap: 3px; padding: 12px 14px 14px; min-width: 0; }
  .lib-card-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: -0.015em; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lib-card-desc { font-size: 12.5px; line-height: 1.4; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
  .lib mark { background: color-mix(in oklab, var(--violet-500) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
  .lib-badges { position: absolute; top: 10px; inset-inline-start: 10px; display: flex; gap: 4px; pointer-events: none; }
  .lib-badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 99px; font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
    background: rgb(255 255 255 / .9); color: #111; box-shadow: 0 2px 8px -2px rgb(0 0 0 / .25); backdrop-filter: blur(6px); }
  .lib-badge svg { width: 11px; height: 11px; }
  .lib-badge.is-icon { inline-size: 22px; padding: 0; justify-content: center; } /* R15B */
  .lib-badge.is-new { background: var(--lime-400); color: var(--forest-950); }
  .lib-badge.is-featured { background: var(--ink); color: var(--text-on-ink); }
  .lib-badge.is-premium { background: linear-gradient(135deg, #F5D78E, #D9A441); color: #3A2A06; }
  .lib-badge.is-preset { background: var(--violet-500); color: #fff; }
  .lib-card-tools { position: absolute; top: 8px; inset-inline-end: 8px; display: flex; gap: 4px; opacity: 0; transform: translateY(-3px); transition: opacity var(--t-fast), transform var(--t-fast); }
  .lib-tool-group { display: contents; }
  .lib-card:hover .lib-card-tools, .lib-card:focus-within .lib-card-tools, .lib-card-tools:has(.is-on) { opacity: 1; transform: none; }
  .lib-tool { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgb(255 255 255 / .92); color: #1b1f1d; box-shadow: 0 4px 12px -4px rgb(0 0 0 / .35); backdrop-filter: blur(6px); }
  .lib-tool svg { width: 15px; height: 15px; }
  .lib-tool:hover { background: #fff; }
  .lib-tool.is-on { color: #C98A00; }
  .lib-tool.is-on svg { fill: currentColor; }
  .lib-tool.is-danger:hover { color: var(--danger); }
  .lib-card.is-locked .lib-thumb::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(180deg, transparent 40%, rgb(0 0 0 / .28)); }
  .lib-card.is-skeleton { pointer-events: none; }
  .lib-card.is-skeleton .lib-thumb { animation: lib-shimmer 1.2s linear infinite; background: linear-gradient(100deg, transparent 20%, color-mix(in oklab, var(--surface) 70%, transparent) 50%, transparent 80%) 0 0 / 200% 100%, var(--surface-sunken); }
  .lib-card.is-skeleton .lib-card-body span { display: block; height: 12px; border-radius: 6px; background: var(--surface-sunken); }
  .lib-card.is-skeleton .lib-card-body span + span { width: 60%; }
  .lib-rename { position: absolute; inset: auto 8px 8px; z-index: 3; display: flex; gap: 6px; padding: 6px; border-radius: 12px; background: var(--surface); box-shadow: var(--e3); }
  .lib-rename .input { height: 34px; }
  .lib-empty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 60px 16px; }
  .lib-empty-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--assist-soft); color: var(--violet-500); }
  .lib-empty-icon svg { width: 22px; height: 22px; }

  /* Preview before adding */
  .lib-preview { position: absolute; inset: 0; z-index: 5; display: grid; grid-template-columns: minmax(0, 1fr) 380px; background: var(--surface); animation: lib-slide .24s var(--ease-out); }
  @keyframes lib-slide { from { opacity: 0; transform: translateX(calc(var(--dir-sign, 1) * 18px)); } }
  .lib-preview-stage { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; background: radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--text-subtle) 35%, transparent) 1px, transparent 0) 0 0 / 20px 20px, var(--canvas); }
  .lib-preview-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; }
  .lib-preview-canvas { overflow: auto; isolation: isolate; contain: paint; display: grid; justify-items: center; align-content: safe center; gap: 12px; padding: 12px 24px 32px; }
  .lib-preview-frame { width: 390px; max-width: 100%; border-radius: 34px; overflow: hidden; box-shadow: 0 0 0 9px #111413, 0 0 0 10px #2B302D, 0 40px 80px -36px rgb(0 0 0 / .55); background: var(--surface); }
  .lib-preview-canvas.is-desktop .lib-preview-frame { width: min(100%, 1100px); border-radius: 14px; box-shadow: 0 0 0 1px var(--line-strong), 0 30px 60px -30px rgb(0 0 0 / .45); }
  .lib-preview-note { font-size: 12px; color: var(--text-muted); text-align: center; }
  .lib-preview-side { display: flex; flex-direction: column; gap: 18px; min-height: 0; overflow-y: auto; padding: 22px; border-inline-start: 1px solid var(--line); }
  .lib-preview-kicker { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--violet-500); }
  .lib-preview-title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1.1; }
  .lib-variant-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
  .lib-variant { display: grid; gap: 5px; padding: 5px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); text-align: start; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
  .lib-variant:hover { border-color: var(--line-strong); }
  .lib-variant:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .lib-variant.is-active { border-color: var(--violet-500); box-shadow: 0 0 0 1px var(--violet-500); background: var(--assist-soft); }
  .lib-variant-thumb { position: relative; display: grid; place-items: center; height: 70px; border-radius: 10px; overflow: hidden; background: var(--surface-sunken); color: var(--violet-500); }
  .lib-variant-thumb > svg { width: 20px; height: 20px; }
  .lib-variant-frame { position: absolute; top: 0; inset-inline-start: 0; width: 480%; height: 480%; transform: scale(calc(1 / 4.8)); transform-origin: top left; pointer-events: none; }
  [dir="rtl"] .lib-variant-frame { transform-origin: top right; }
  .lib-variant-label { font-size: 11.5px; font-weight: 600; color: var(--ink); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lib-preview-actions { margin-top: auto; display: grid; gap: 8px; position: sticky; bottom: -22px; padding: 14px 0 0; background: linear-gradient(transparent, var(--surface) 30%); }
  .lib-add { height: 48px; font-size: 15px; justify-content: center; }
  /* R15B · premium card: head (icon + copy + lock) on top, actions below; container query so it never squeezes. */
  .lib-upgrade { container-type: inline-size; display: grid; gap: 12px; padding: 14px; border-radius: 16px; border: 1px solid color-mix(in srgb, #C9971C 35%, transparent); background: linear-gradient(135deg, #FFF6DD, #FBE7B5); color: #3A2A06; }
  .lib-upgrade-head { display: flex; align-items: flex-start; gap: 12px; min-inline-size: 0; }
  .lib-upgrade-copy { flex: 1 1 auto; min-inline-size: 0; display: grid; gap: 2px; }
  .lib-upgrade-title { font-weight: 700; color: #3A2A06; overflow-wrap: anywhere; }
  .lib-upgrade-text { font-size: var(--fs-small); color: #6B5520; overflow-wrap: anywhere; }
  .lib-upgrade-lock { flex: none; }
  .lib-upgrade-icon { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #F5D78E, #D9A441); color: #3A2A06; }
  .lib-upgrade-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .lib-upgrade-actions .btn { min-block-size: 44px; flex: 1 1 100%; justify-content: center; text-align: center; white-space: normal; }
  @container (min-width: 460px) { .lib-upgrade-actions .lib-upgrade-cta { flex: 1 1 auto; } .lib-upgrade-actions .lib-upgrade-compare { flex: 0 0 auto; } }
  .lib-upgrade-compare { background: rgb(255 255 255 / .7); color: #3A2A06; border-color: color-mix(in srgb, #C9971C 40%, transparent); }
  [data-theme="dark"] .lib-upgrade { background: linear-gradient(135deg, #2E2510, #3A2E12); color: #FBE7B5; border-color: color-mix(in srgb, #C9971C 40%, transparent); }
  [data-theme="dark"] .lib-upgrade-title { color: #FFF6DD; }
  [data-theme="dark"] .lib-upgrade-text { color: #E3CC8E; }
  [data-theme="dark"] .lib-upgrade-compare { background: rgb(255 255 255 / .06); color: #FBE7B5; }

  /* Phones and small tablets: a bottom sheet with the rail as a chip row */
  @media (max-width: 767px) {
    .lib-panel { inset: auto 0 0 0; height: 94dvh; border-radius: 26px 26px 0 0; padding-bottom: env(safe-area-inset-bottom); }
    .lib-enter-start { transform: translateY(40px); }
    .lib-grabber { display: block; width: 44px; height: 5px; border-radius: 99px; background: var(--line-strong); margin: 8px auto -4px; }
    .lib-panel { grid-template-rows: auto auto minmax(0, 1fr); }
    .lib-head { flex-wrap: wrap; gap: 10px; padding: 10px 14px 12px; }
    .lib-title { font-size: 1.2rem; }
    .lib-sub { display: none; }
    .lib-title-wrap { flex: 1; }
    .lib-search { order: 5; flex-basis: 100%; max-width: none; }
    .lib-search .kbd { display: none; }
    .lib-search-input { height: 46px; font-size: 16px; }
    .lib-paste { order: 6; max-width: 100%; }
    .lib-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .lib-rail { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
    .lib-rail::-webkit-scrollbar { display: none; }
    .lib-rail-group { display: flex; gap: 6px; }
    .lib-rail-title { display: none; }
    .lib-nav { width: auto; flex: none; min-height: 40px; border-radius: 99px; padding: 0 14px; border: 1px solid var(--line); background: var(--surface); white-space: nowrap; }
    .lib-nav.is-active { background: var(--ink); color: var(--text-on-ink); box-shadow: none; border-color: transparent; }
    .lib-nav.is-active svg { color: inherit; }
    .lib-filters { flex-wrap: wrap; padding: 10px 14px; gap: 8px; }
    .lib-chips { flex-basis: 100%; }
    .lib-selects { flex-basis: 100%; }
    .lib-select { flex: 1; }
    .lib-select .select { width: 100%; min-width: 0; height: 40px; }
    .lib-results { padding: 4px 14px 28px; }
    .lib-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .lib-thumb { height: 124px; }
    .lib-thumb-frame { width: 210%; height: 210%; transform: scale(calc(1 / 2.1)); }
    .lib-card { border-radius: 16px; }
    .lib-card-body { padding: 10px 10px 12px; }
    .lib-card-title { font-size: 14px; }
    .lib-card-desc { font-size: 12px; }
    .lib-card-tools { opacity: 1; transform: none; }
    .lib-tool { width: 36px; height: 36px; }
    .lib-hint { display: none; }
    /* Phone (R1): the sample scrolls in its own clipped region; the display choices and Add sit below it, never under it. */
    .lib-preview { display: flex; flex-direction: column; overflow: hidden; }
    .lib-preview-stage { flex: 1 1 auto; min-height: 140px; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
    .lib-preview-top { padding: 8px 12px; }
    .lib-preview-canvas { overflow-y: auto; overscroll-behavior: contain; align-content: start; padding: 4px 14px 14px; }
    .lib-preview-frame { width: 100%; border-radius: 22px; box-shadow: 0 0 0 1px var(--line-strong), var(--e2); }
    .lib-preview-side { flex: 0 1 auto; max-height: 58%; position: relative; z-index: 1; background: var(--surface); gap: 12px; border: 0; border-top: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain; padding: 12px 16px 0; box-shadow: 0 -12px 24px -18px rgb(0 0 0 / .35); }
    .lib-preview-side .lib-preview-title { font-size: 1.25rem; }
    .lib-preview-side > div:first-child > .text-sm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .lib-preview-actions { position: sticky; bottom: 0; padding: 10px 0 12px; background: var(--surface); }
  }
  @media (min-width: 768px) and (max-width: 1100px) {
    .lib-body { grid-template-columns: 200px minmax(0, 1fr); }
    .lib-preview { grid-template-columns: minmax(0, 1fr) 320px; }
    .lib-paste { display: none; }
  }
  @media (hover: none) { .lib-card-tools { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) {
    .lib-card, .lib-enter, .lib-preview, .lib-thumb-icon.is-loading, .lib-card.is-skeleton .lib-thumb { transition: none; animation: none; }
    .lib-card:hover { transform: none; }
  }
}

/* ---- Page design panel ------------------------------------------------------------------------------------ */
@layer components {
  .design-panel .ds-section { display: grid; gap: 12px; }
  .design-panel .ds-section + .ds-section { padding-top: 18px; border-top: 1px solid var(--line); }
  .ds-head { display: grid; gap: 2px; }
  .ds-title { font-family: var(--font-display); font-size: 1rem; font-weight: 800; letter-spacing: -0.015em; color: var(--ink); }
  .ds-desc { margin-top: -4px; }
  .ds-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 10px; }
  .ds-gallery.is-themes { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .ds-card { display: grid; gap: 6px; text-align: center; border-radius: 16px; padding: 4px; }
  .ds-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .ds-thumb { position: relative; display: block; height: 150px; overflow: hidden; border-radius: 14px; background: var(--surface-sunken); border: 1px solid var(--line);
    transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base); isolation: isolate; }
  .ds-gallery.is-themes .ds-thumb { height: 118px; }
  .ds-card:hover .ds-thumb { transform: translateY(-2px); box-shadow: var(--e2); }
  .ds-card.is-active .ds-thumb { border-color: transparent; box-shadow: 0 0 0 2px var(--violet-500), var(--e2); }
  .ds-thumb-frame { position: absolute; top: 0; inset-inline-start: 0; width: 260%; height: 260%; transform: scale(calc(1 / 2.6)); transform-origin: top left; pointer-events: none; }
  .ds-gallery.is-systems .ds-thumb-frame { width: 700%; height: 700%; transform: scale(calc(1 / 7)); }
  .ds-gallery.is-themes .ds-thumb-frame { width: 350%; height: 350%; transform: scale(calc(1 / 3.5)); }
  .ds-thumb-frame > .ws-site { justify-content: flex-start !important; }
  [dir="rtl"] .ds-thumb-frame { transform-origin: top right; }
  .ds-thumb-skel { position: absolute; inset: 0; }
  .ds-thumb-skel.is-loading { background: linear-gradient(100deg, transparent 20%, color-mix(in oklab, var(--surface) 70%, transparent) 50%, transparent 80%) 0 0 / 200% 100%; animation: lib-shimmer 1.2s linear infinite; }
  .ds-check { position: absolute; top: 6px; inset-inline-end: 6px; z-index: 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--violet-500); color: #fff; box-shadow: var(--e2); }
  .ds-check svg { width: 13px; height: 13px; }
  .ds-card-name { font-size: 12px; font-weight: 700; color: var(--text-muted); }
  .ds-card.is-active .ds-card-name { color: var(--ink); }
  .ds-swatch { position: absolute; inset: auto 8px 8px; display: flex; gap: 4px; }
  .ds-swatch i { flex: 1; height: 12px; border-radius: 4px; }

  .ds-colours { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
  .ds-colour { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; min-width: 0; }
  .ds-colour:hover { border-color: var(--line-strong); }
  .ds-colour:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
  .ds-colour > span:last-child { display: grid; min-width: 0; }
  .ds-colour b { font-size: 12.5px; color: var(--ink); }
  .ds-colour small { font-size: 10.5px; color: var(--text-subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ds-colour-dot { position: relative; width: 30px; height: 30px; flex: none; border-radius: 9px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); overflow: hidden; }
  .ds-colour-dot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

  .ds-buttons { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .ds-btn-tile { display: grid; gap: 6px; justify-items: center; padding: 10px 4px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
  .ds-btn-tile small { font-size: 11px; font-weight: 600; color: var(--text-muted); }
  .ds-btn-tile.is-active { border-color: var(--violet-500); box-shadow: 0 0 0 1px var(--violet-500); background: var(--assist-soft); }
  .ds-btn-tile.is-active small { color: var(--ink); }
  .ds-btn-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .ds-btn-sample { display: grid; place-items: center; width: 100%; height: 26px; padding: 0 4px; font-size: 10.5px; font-weight: 700; border-radius: var(--pr, 10px); overflow: hidden; white-space: nowrap; }
  .ds-btn-sample.shape-square { border-radius: 2px; }
  .ds-btn-sample.shape-pill { border-radius: 99px; }
  .ds-btn-sample.shape-leaf { border-radius: 14px 2px 14px 2px; }
  .ds-btn-sample.is-solid { background: var(--pa); color: var(--pt); }
  .ds-btn-sample.is-soft { background: color-mix(in oklab, var(--pa) 18%, transparent); color: var(--px); border: 1px solid color-mix(in oklab, var(--pa) 35%, transparent); }
  .ds-btn-sample.is-glass { background: color-mix(in oklab, var(--px) 8%, transparent); color: var(--px); border: 1px solid color-mix(in oklab, var(--px) 18%, transparent); }
  .ds-btn-sample.is-outline { background: transparent; color: var(--px); border: 1.5px solid var(--px); }
  .ds-btn-sample.is-shadow { background: var(--surface); color: var(--px); box-shadow: 0 6px 14px -6px rgb(0 0 0 / .35); }

  .ds-fonts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .ds-font { display: grid; gap: 2px; justify-items: center; padding: 8px 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); }
  .ds-font small { font-size: 10.5px; font-weight: 600; color: var(--text-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ds-font.is-active { border-color: var(--violet-500); box-shadow: 0 0 0 1px var(--violet-500); background: var(--assist-soft); }
  .ds-font:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .ds-font-sample { font-size: 21px; font-weight: 700; line-height: 1.1; color: var(--ink); }
  .ds-font-sample.is-italic { font-style: italic; font-weight: 400; }

  .ds-bgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .ds-bg { display: grid; gap: 5px; justify-items: center; padding: 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
  .ds-bg small { font-size: 11px; font-weight: 600; color: var(--text-muted); }
  .ds-bg.is-active { border-color: var(--violet-500); box-shadow: 0 0 0 1px var(--violet-500); background: var(--assist-soft); }
  .ds-bg:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .ds-bg-art { width: 100%; height: 36px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); background: var(--b); }
  .ds-bg-art.is-preset { background: linear-gradient(135deg, var(--b), color-mix(in oklab, var(--a) 25%, var(--b))); }
  .ds-bg-art.is-gradient { background: linear-gradient(135deg, var(--b), var(--a)); }
  .ds-bg-art.is-animated { background: linear-gradient(135deg, var(--b), var(--a), var(--b)) 0 0 / 300% 300%; animation: ds-pan 5s ease-in-out infinite alternate; }
  @keyframes ds-pan { to { background-position: 100% 100%; } }
  .ds-bg-art.is-pattern { background: radial-gradient(color-mix(in oklab, var(--ink) 30%, transparent) 1.2px, transparent 1.6px) 0 0 / 8px 8px, var(--b); }
  .ds-bg-art.is-image { background: linear-gradient(160deg, #8FB8A8, #2F5D50 60%, #1B2F2A); }
  .ds-patterns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .ds-pattern { display: grid; gap: 4px; justify-items: center; padding: 5px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); }
  .ds-pattern small { font-size: 10.5px; font-weight: 600; color: var(--text-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ds-pattern.is-active { border-color: var(--violet-500); box-shadow: 0 0 0 1px var(--violet-500); }
  .ds-pattern-art { display: block; width: 100%; height: 38px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .08); }
  .ds-image { display: flex; align-items: center; gap: 12px; }
  .ds-image-preview { width: 72px; height: 72px; flex: none; border-radius: 14px; overflow: hidden; display: grid; place-items: center; background: var(--surface-sunken); border: 1px solid var(--line); color: var(--text-subtle); }
  .ds-image-preview img { width: 100%; height: 100%; object-fit: cover; }
  @media (prefers-reduced-motion: reduce) { .ds-bg-art.is-animated, .ds-thumb-skel.is-loading { animation: none; } }
}

/* Unlayered on purpose: the site stylesheet (unlayered) sets the page frame's height; thumbnails centre their block. */
.lib-thumb-frame > .ws-site > .ws-frame, .insp-variant-frame > .ws-site > .ws-frame, .lib-variant-frame > .ws-site > .ws-frame, .lib-preview-frame > .ws-site > .ws-frame { min-height: 0; }
.lib-preview-frame > .ws-site { min-height: min(620px, 62vh); display: flex; flex-direction: column; justify-content: safe center; }
.lib-preview-canvas.is-desktop .lib-preview-frame > .ws-site { min-height: min(460px, 52vh); }
@media (max-width: 767px) { .lib-preview-frame > .ws-site { min-height: 300px; } }

/* ==========================================================================================================
   Batch 1 · speed and item 3: optimistic panels (placeholders while the server answers), the shared block menu,
   the rich text editor, one readable type scale for the panels, and the phone layout (sheets, sticky bar).
   ========================================================================================================== */
@layer components {
  /* Placeholders shown the instant a panel or heavy tab is chosen, until its content arrives. */
  .insp-skeleton { display: grid; gap: 12px; padding: 4px 0; }
  .insp-skeleton > span { display: block; height: 38px; border-radius: var(--r-md);
    background: linear-gradient(100deg, transparent 20%, color-mix(in oklab, var(--surface) 70%, transparent) 50%, transparent 80%) 0 0 / 200% 100%, var(--surface-sunken);
    animation: lib-shimmer 1.2s linear infinite; }
  .insp-skeleton > span.is-short { width: 55%; height: 14px; }
  .insp-skeleton.is-panel > span:first-child { height: 64px; }
  .share-card-skel { display: block; }
  .share-card-skel.is-loading { animation: lib-shimmer 1.2s linear infinite; background: linear-gradient(100deg, transparent 20%, color-mix(in oklab, var(--surface) 70%, transparent) 50%, transparent 80%) 0 0 / 200% 100%, var(--surface-sunken); }
  /* A request in flight: the save state already says "Saving…"; the canvas fades a touch so a stale preview reads as stale. */
  .builder.is-busy .device-screen { transition: opacity var(--t-base) var(--t-base); opacity: .92; }
  .builder[data-traveling] .device-screen { transition: opacity var(--t-instant); opacity: .6; }
  .builder[data-traveling] [data-history] { pointer-events: none; }

  /* The block menu shared by every outline row and the inspector (teleported to <body>, anchored to its button). */
  .builder-menu { position: absolute; z-index: 90; width: 232px; max-width: calc(100vw - 24px); max-height: min(70vh, 460px); overflow-y: auto; }
  @media (pointer: coarse) { .builder-menu .menu-item { min-height: 44px; } }

  /* ---- Rich text editor ---- */
  .rt-field { gap: 6px; position: relative; }
  /* Insert link popover (R1) */
  .rt-link { position: absolute; z-index: 30; inset-inline: 0; top: 64px; margin-inline: auto; width: min(100%, 340px); padding: 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--e3, 0 18px 40px -16px rgb(0 0 0 / .35)); }
  .rt-link-form { display: grid; gap: 8px; }
  .rt-link .input { min-height: 44px; }
  .rt-link-toggle { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: var(--fs-small, 13px); color: var(--ink); cursor: pointer; }
  .rt-link-toggle input { width: 18px; height: 18px; accent-color: var(--accent); }
  .rt-link-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .rt-link-spacer { flex: 1 1 auto; }
  .rt-link .field-error { margin: 0; }
  .rt-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-block-end: 0; border-start-start-radius: var(--r-md); border-start-end-radius: var(--r-md); background: var(--surface-2); }
  .rt-group { display: inline-flex; gap: 1px; padding-inline-end: 4px; border-inline-end: 1px solid var(--line); }
  .rt-group:last-child { border-inline-end: 0; padding-inline-end: 0; }
  .rt-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: var(--text-muted); transition: background var(--t-instant), color var(--t-instant); }
  .rt-btn svg { width: 16px; height: 16px; }
  .rt-btn:hover { background: var(--surface-hover); color: var(--ink); }
  .rt-btn[aria-pressed="true"] { background: var(--ink); color: var(--text-on-ink); }
  .rt-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  [dir="rtl"] .rt-btn svg { transform: none; }
  .rt-size { height: 32px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: 600 var(--fs-micro)/1 var(--font-sans); cursor: pointer; }
  .rt-size:hover { background: var(--surface-hover); }
  .rt-size:focus-visible { outline: 2px solid var(--accent); }
  .rt-surface.ws-site { min-height: 0; overflow: visible; border: 1px solid var(--line-strong); border-end-start-radius: var(--r-md); border-end-end-radius: var(--r-md);
    background: var(--site-bg-base, var(--surface)); font-size: 15px; }
  .rt-field:has(.rt-toolbar) .rt-surface { border-color: var(--line); }
  .rt-field:not(:has(.rt-toolbar)) .rt-surface { border-radius: var(--r-md); }
  .rt-editor { min-height: 132px; max-height: 420px; overflow-y: auto; padding: 12px 14px; outline: none; text-align: start; overflow-wrap: anywhere; }
  .rt-surface:focus-within { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent); border-color: var(--accent); }
  .rt-editor:empty::before { content: attr(data-placeholder); color: var(--text-subtle); pointer-events: none; }
  .rt-editor[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--danger); }
  .rt-editor ul, .rt-editor ol { text-align: start; }

  /* ---- One type scale for the panels (tokens only): labels 13, body 14, hints and tabs 12 ---- */
  .builder-left, .builder-right { font-size: var(--fs-body); }
  .builder-right :is(.field-label, .insp-label) { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
  .builder-right :is(.field-hint, .toggle-row-desc, .insp-intro .text-xs) { font-size: var(--fs-micro); line-height: 1.45; }
  .builder-right .toggle-row-title { font-size: var(--fs-small); }
  .builder-right .insp-tab { font-size: var(--fs-micro); }
  .builder-right .insp-seg > button { font-size: var(--fs-micro); }
  .builder-right .insp-variant-label small, .builder-right .insp-item-num { font-size: var(--fs-micro); }
  .builder-right .insp-lang { font-size: 11px; }
  .outline-title { font-size: var(--fs-small); }
  .outline-sub { font-size: var(--fs-micro); }
  .builder-tabs .tab { font-size: var(--fs-small); }
  /* Field grids: aligned columns that never squeeze below a readable width. */
  .builder-right .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); align-items: end; }
  .builder-right :is(.input, .select, .textarea) { min-width: 0; max-width: 100%; }
  .builder-right .builder-scroll { overflow-x: hidden; }

  /* ---- Phones and tablets ---- */
  @media (max-width: 1023px) {
    /* No zoom-in on focus (iOS zooms inputs under 16px). */
    .builder :is(.input, .select, .textarea, .rt-editor) { font-size: 16px; }
    /* Panels open as sheets over the preview, with a grabber, and the action bar stays at the bottom. */
    .builder-body { position: relative; }
    .builder-body .builder-canvas { display: flex; padding: 14px 10px 40px; }
    .builder-body[data-pane="blocks"] .builder-left, .builder-body[data-pane="inspector"] .builder-right {
      position: absolute; inset: auto 0 0 0; max-height: 82%; height: 82%; z-index: 40; display: flex; flex-direction: column;
      border-radius: 22px 22px 0 0; border: 1px solid var(--line) !important; border-bottom: 0 !important; background: var(--surface);
      box-shadow: 0 -20px 50px -20px rgb(0 0 0 / .35); animation: b-sheet-in var(--t-base) var(--ease-out); }
    .builder-body[data-pane="blocks"]::before, .builder-body[data-pane="inspector"]::before {
      content: ""; position: absolute; inset: 0; z-index: 39; background: var(--overlay); opacity: .6; }
    .builder-body:is([data-pane="blocks"], [data-pane="inspector"]) .canvas-tools { display: none; }
    .builder-body[data-pane="blocks"] .builder-left::before, .builder-body[data-pane="inspector"] .builder-right::before {
      content: ""; display: block; width: 40px; height: 5px; border-radius: 99px; background: var(--line-strong); margin: 8px auto 0; flex: none; }
    .builder-mobile-tabs { position: sticky; bottom: 0; z-index: 30; box-shadow: 0 -8px 24px -18px rgb(0 0 0 / .4); }
    /* With a sheet open the raised add button sits in the bar, not over the sheet's last field (it floats only over the preview). */
    .builder-body:not([data-pane="canvas"]) ~ .builder-mobile-tabs .builder-mobile-add > span { margin-top: 0; width: 44px; height: 44px; box-shadow: none; }
    .builder-tabs { overflow-x: auto; scrollbar-width: none; flex: none; }
    .builder-tabs .tab { flex: none; }
    .insp-tabs { grid-template-columns: repeat(6, minmax(52px, 1fr)); overflow-x: auto; }
  }
  @keyframes b-sheet-in { from { transform: translateY(24px); opacity: .6; } }
  @media (prefers-reduced-motion: reduce) {
    .insp-skeleton > span, .share-card-skel.is-loading { animation: none; }
    .builder-body .builder-left, .builder-body .builder-right { animation: none !important; }
  }
}

/* css/components/builder-background.css */
/* Builder: the page background panel (owner item 2; livewire/sites/partials/inspector-background). The kind tiles and
   pattern tiles reuse .ds-bg / .ds-pattern from builder.css; this adds the new kinds' art, the colour stops, the
   focal-point grid, the video and poster pickers and the contrast readout. */
@layer components {
  .bgp-kinds .ds-bg { min-height: 64px; }
  .ds-bg-art { position: relative; display: grid; place-items: center; }
  .ds-bg-art.is-solid { background: var(--b); }
  .ds-bg-art.is-mesh { background: radial-gradient(60% 70% at 20% 25%, var(--a), transparent 70%), radial-gradient(60% 70% at 85% 80%, color-mix(in oklab, var(--a) 40%, #7C5CFF), transparent 70%), var(--b); }
  .ds-bg-art.is-glass { background: radial-gradient(50% 70% at 25% 30%, color-mix(in oklab, var(--a) 70%, transparent), transparent 70%), radial-gradient(50% 70% at 80% 70%, color-mix(in oklab, var(--a) 40%, #FF7A3D), transparent 70%), var(--b); }
  .ds-bg-art.is-glass::after { content: ""; position: absolute; inset: 9px 14px; border-radius: 6px; background: rgb(255 255 255 / .45); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .6); }
  .ds-bg-art.is-video { background: linear-gradient(160deg, #3B2A5C, #0F1B2E 70%); color: #fff; }
  .ds-bg-art.is-video::after { content: ""; width: 0; height: 0; border-block: 6px solid transparent; border-inline-start: 10px solid rgb(255 255 255 / .9); margin-inline-start: 2px; }
  .ds-bg-art .bgp-lock { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; width: 14px; height: 14px; padding: 2px; border-radius: 6px; background: rgb(0 0 0 / .45); color: #fff; }
  .ds-bg:disabled { cursor: not-allowed; opacity: .7; }

  .bgp-bar { display: block; height: 28px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); margin-block-end: 8px; }
  .bgp-stops { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
  .bgp-stop { display: flex; align-items: center; gap: 10px; min-height: 44px; }
  .bgp-stop .ds-colour-dot { width: 36px; height: 36px; border-radius: 10px; }
  .bgp-stop .range { flex: 1; min-width: 0; }
  .bgp-stop .mono { font-size: 11px; color: var(--text-muted); }
  .bgp-pct { min-width: 3.2ch; text-align: end; }
  .bgp-stop .btn-icon { min-width: 36px; min-height: 36px; }
  .bgp-add { margin-block-start: 4px; min-height: 36px; }

  .bgp-pos { display: grid; grid-template-columns: repeat(3, 44px); gap: 4px; padding: 4px; inline-size: max-content; border-radius: 14px; background: var(--surface-sunken); border: 1px solid var(--line); }
  .bgp-pos button { inline-size: 44px; block-size: 36px; display: grid; place-items: center; border-radius: 10px; border: 0; background: transparent; cursor: pointer; }
  .bgp-pos button i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-subtle, var(--text-muted)); opacity: .55; }
  .bgp-pos button:hover i { opacity: 1; }
  .bgp-pos button.is-active { background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 0 0 1px var(--violet-500); }
  .bgp-pos button.is-active i { width: 10px; height: 10px; background: var(--violet-500); opacity: 1; }
  .bgp-pos button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

  .bgp-media { display: grid; gap: 12px; }
  .bgp-media .ds-image { align-items: flex-start; }
  .bgp-actions { display: flex; flex-wrap: wrap; gap: 6px; }
  .bgp-video-preview { position: relative; }
  .ds-image-preview.is-small { width: 52px; height: 52px; border-radius: 12px; }
  .bgp-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgb(0 0 0 / .25); }
  .bgp-play svg { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .5)); }
  .bgp-overlay { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }

  .bgp-toggle { padding: 4px 0; align-items: center; }
  .bgp-contrast { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; padding: 8px 10px; border-radius: 12px; font-size: var(--fs-small, 13px); font-weight: 600; }
  .bgp-contrast.is-ok { background: var(--success-soft); color: var(--success); }
  .bgp-contrast.is-low { background: var(--warning-soft); color: var(--warning); }
  .bgp-contrast small { flex-basis: 100%; font-weight: 500; }
  .bgp-contrast-sample { display: inline-grid; place-items: center; width: 30px; height: 26px; border-radius: 8px; font-weight: 700; font-size: 13px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); }
}

/* css/components/inspector.css */
/* Block inspector: tabs, field components, variants gallery (ADR-0068 §11) ------------------------------------ */
@layer components {
  .insp-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 3px; margin-bottom: 16px; border-radius: var(--r-md);
    background: var(--surface-sunken); border: 1px solid var(--line); position: sticky; top: -1px; z-index: 2; }
  .insp-tab { display: grid; justify-items: center; gap: 2px; min-height: 44px; padding: 6px 2px; border: 0; border-radius: var(--r-sm); background: transparent;
    color: var(--text-muted, var(--text)); font-size: 11px; font-weight: 600; letter-spacing: .01em; cursor: pointer; transition: background var(--t-fast), color var(--t-fast); }
  .insp-tab svg { width: 16px; height: 16px; }
  .insp-tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .insp-tab:hover { color: var(--ink); background: var(--surface-hover); }
  .insp-tab.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--e1, 0 1px 2px rgb(0 0 0 / .08)); }
  .insp-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

  .insp-label { display: flex; align-items: center; gap: 6px; }
  .insp-label-text { flex: 1; min-width: 0; }
  .insp-req { color: var(--danger, var(--accent)); margin-inline-start: 2px; }
  .insp-lang { font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 1px 6px; border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent-text, var(--ink)); }
  .insp-range-value { font-variant-numeric: tabular-nums; color: var(--text-subtle); font-size: var(--fs-small); }
  .insp-segmented { display: flex; }
  .insp-segmented > button { flex: 1; min-width: 0; }

  .insp-group { border: 0; padding: 12px 0 0; margin: 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
  .insp-group > legend { display: flex; align-items: center; gap: 6px; padding: 0; margin-bottom: 4px; }
  .insp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); gap: 10px; }
  .insp-grid > *, .insp-grid .input, .insp-grid .select { min-width: 0; max-width: 100%; }
  .insp-grid input[type="datetime-local"] { font-size: var(--fs-small); padding-inline: 8px; }
  .insp-grid:has(input[type="datetime-local"]) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }

  .insp-langs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .insp-lang-chip { padding: 0; gap: 0; }
  .insp-lang-chip > button:first-child { border: 0; background: none; color: inherit; font: inherit; padding: 0 12px; height: 100%; cursor: pointer; }
  .insp-lang-chip .chip-x { margin-inline-end: 6px; }
  .insp-lang-add { width: auto; height: 30px; padding-block: 0; font-size: var(--fs-small); }

  .insp-items ol { list-style: none; margin: 0; padding: 0; }
  .insp-item { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
  .insp-item-head { display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 4px; }
  .insp-item-toggle { flex: 1; min-width: 0; min-height: 36px; display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 0 6px; color: var(--ink);
    font: inherit; font-size: var(--fs-small); font-weight: 500; text-align: start; cursor: pointer; border-radius: var(--r-sm); }
  .insp-item-toggle:focus-visible { outline: 2px solid var(--accent); }
  .insp-chevron { width: 14px; height: 14px; color: var(--text-subtle); transition: transform var(--t-fast); flex: none; }
  .insp-item-toggle[aria-expanded="true"] .insp-chevron { transform: rotate(90deg); }
  [dir="rtl"] .insp-chevron { transform: scaleX(-1); }
  [dir="rtl"] .insp-item-toggle[aria-expanded="true"] .insp-chevron { transform: rotate(90deg); }
  .insp-item-num { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: var(--r-pill); background: var(--surface-sunken); font-size: 11px; color: var(--text-subtle); }
  .insp-item-actions { display: flex; gap: 0; opacity: .7; }
  .insp-item:hover .insp-item-actions, .insp-item:focus-within .insp-item-actions { opacity: 1; }
  .insp-item-body { padding: 4px 12px 12px; border-top: 1px solid var(--line); }

  .insp-color { display: flex; gap: 8px; align-items: center; }
  .insp-color input[type="color"] { width: 40px; height: 36px; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
  .insp-icon-pick { display: flex; gap: 8px; align-items: center; }
  .insp-icon-preview { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface-sunken); color: var(--ink); }
  .insp-icon-preview svg { width: 18px; height: 18px; }
  .insp-stars { display: flex; gap: 2px; align-items: center; }
  .insp-stars button { width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: none; color: var(--line-strong, var(--text-subtle)); border-radius: var(--r-sm); cursor: pointer; }
  .insp-stars button.is-on { color: var(--warning, #E0A100); }
  .insp-stars button.is-on svg { fill: currentColor; }

  .insp-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
  .insp-gallery-item { position: relative; margin: 0; aspect-ratio: 1; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-sunken); border: 1px solid var(--line); }
  .insp-gallery-item img { width: 100%; height: 100%; object-fit: cover; }
  .insp-gallery-item .icon-btn { position: absolute; inset-block-start: 2px; inset-inline-end: 2px; background: var(--surface); width: 26px; height: 26px; }
  .insp-gallery-add { aspect-ratio: 1; display: grid; place-items: center; border: 1px dashed var(--line-strong, var(--line)); border-radius: var(--r-sm); background: none; color: var(--text-subtle); cursor: pointer; }
  .insp-gallery-add:hover { color: var(--ink); border-color: var(--ink); }

  .insp-variants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .insp-variant { display: grid; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); text-align: start; cursor: pointer;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
  .insp-variant:hover { border-color: var(--line-strong, var(--ink)); }
  .insp-variant { position: relative; }
  .insp-variant:has(.insp-variant-label:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
  .insp-variant:has(.insp-variant-label:disabled) { cursor: default; }
  .insp-variant-label { appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; text-align: start; cursor: inherit; min-height: 20px; }
  .insp-variant-label:focus-visible { outline: none; }
  .insp-variant-label::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* the whole card is the hit target */
  .insp-variant.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
  .insp-variant-thumb { position: relative; height: 84px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-sunken); display: grid; place-items: center; color: var(--text-subtle); pointer-events: none; }
  .insp-variant-thumb > svg { width: 22px; height: 22px; }
  .insp-variant-frame { overflow: hidden; contain: layout paint; }
  .insp-variant-frame { position: absolute; inset: 0; width: 250%; transform: scale(.4); transform-origin: top left; }
  [dir="rtl"] .insp-variant-frame { transform-origin: top right; }
  .insp-variant-label { display: grid; font-size: var(--fs-small); font-weight: 600; color: var(--ink); line-height: 1.25; }
  .insp-variant-label small { font-weight: 400; color: var(--text-subtle); font-size: 11px; }

  .insp-rule { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, 1.2fr) auto; gap: 6px; align-items: center; }
  @media (max-width: 420px) { .insp-rule { grid-template-columns: 1fr 1fr; } }
  .insp-days .chip { cursor: pointer; min-height: 32px; }
  .insp-days .chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

  .insp-translate { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
  .insp-ai-review { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .block-tile.is-locked { position: relative; }
  .block-tile.is-locked .block-tile-icon, .block-tile.is-locked .block-tile-label { opacity: .55; }
  .block-tile-lock { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; display: grid; place-items: center; width: 20px; height: 20px;
    border-radius: var(--r-pill); background: var(--ink); color: var(--text-on-ink); }
  .block-tile-lock svg { width: 11px; height: 11px; }

  @media (prefers-reduced-motion: reduce) {
    .insp-tab, .insp-variant, .insp-chevron { transition: none; }
  }
}

/* Inspector v3 (ADR-0068 §11): six tabs, segmented radio controls, swatches, device tabs, rules as sentences,
   variant gallery thumbnails and the Insights tab. */
@layer components {
  .insp-tabs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .insp-tab { font-size: 10.5px; }
  .insp-head-icon { width: 34px; height: 34px; border-radius: 11px; background: var(--grad-violet) !important; color: #fff !important; border-color: transparent !important; }
  .insp-intro { display: grid; gap: 2px; }

  /* Segmented radio control */
  .insp-seg-field { gap: 6px; }
  .insp-seg { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: var(--surface-sunken); border: 1px solid var(--line); }
  .insp-seg > button { flex: 1 1 auto; min-width: 0; min-height: 32px; padding: 0 8px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
  .insp-seg > button svg { width: 15px; height: 15px; }
  .insp-seg > button:hover:not(:disabled) { color: var(--ink); }
  .insp-seg > button.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--e1), 0 0 0 1px var(--line); }
  .insp-seg > button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .insp-seg > button:disabled { cursor: not-allowed; opacity: .6; }
  @media (pointer: coarse) { .insp-seg > button { min-height: 40px; } }

  /* Surface swatches */
  .insp-swatches { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .insp-swatch { display: grid; gap: 5px; justify-items: center; padding: 6px 4px 7px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
  .insp-swatch:hover { border-color: var(--line-strong); }
  .insp-swatch.is-active { border-color: var(--violet-500); box-shadow: 0 0 0 1px var(--violet-500); background: var(--assist-soft); }
  .insp-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .insp-swatch-label { font-size: 11px; font-weight: 600; color: var(--text-muted); }
  .insp-swatch.is-active .insp-swatch-label { color: var(--ink); }
  .insp-swatch-art { position: relative; display: grid; place-items: center; width: 100%; height: 34px; border-radius: 8px; overflow: hidden;
    background: linear-gradient(135deg, color-mix(in oklab, var(--pa) 18%, var(--surface-sunken)), var(--surface-sunken)); }
  .insp-swatch-art i { width: 64%; height: 16px; border-radius: 6px; }
  .sw-theme i { background: var(--surface); box-shadow: 0 1px 3px rgb(0 0 0 / .15); }
  .sw-none i { background: transparent; border: 1.5px dashed var(--line-strong); }
  .sw-solid i { background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); }
  .sw-soft i { background: color-mix(in oklab, var(--pa) 22%, transparent); }
  .sw-glass i { background: rgb(255 255 255 / .45); border: 1px solid rgb(255 255 255 / .8); backdrop-filter: blur(4px); box-shadow: 0 4px 10px -4px rgb(0 0 0 / .25); }
  .sw-outline i { background: transparent; border: 1.5px solid var(--ink); }
  .sw-gradient i { background: linear-gradient(135deg, var(--pa), color-mix(in oklab, var(--pa) 40%, var(--violet-500))); }
  .sw-accent i { background: var(--pa); }
  .sw-image i { background: linear-gradient(160deg, #9CC9B7, #2F5D50); }

  /* Accent colours */
  .insp-accents { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .insp-accent { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); display: grid; place-items: center; color: #fff; }
  .insp-accent svg { width: 14px; height: 14px; }
  .insp-accent.is-active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--c); }
  .insp-accent:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .insp-accent.is-theme { background: conic-gradient(from 90deg, var(--c), color-mix(in oklab, var(--c) 40%, #fff), var(--c)); }
  .insp-accent.is-custom { background: conic-gradient(#FF5E5E, #FFC53D, #38D996, #3DA2FF, #9A83FF, #FF5E5E); cursor: pointer; overflow: hidden; }
  .insp-accent.is-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  .insp-accent.is-custom svg { filter: drop-shadow(0 1px 1px rgb(0 0 0 / .4)); pointer-events: none; }
  .insp-accent-hex { width: 96px; height: 32px; font-size: 12.5px; }

  /* Device tabs (Responsive) */
  .insp-devices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .insp-device { display: grid; justify-items: center; gap: 2px; min-height: 64px; padding: 8px 4px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text-muted); }
  .insp-device svg { width: 20px; height: 20px; }
  .insp-device span { font-size: 12px; font-weight: 700; }
  .insp-device small { font-size: 10.5px; color: var(--success); font-weight: 600; }
  .insp-device small.is-off { color: var(--text-subtle); text-decoration: line-through; }
  .insp-device.is-active { border-color: var(--violet-500); color: var(--ink); box-shadow: 0 0 0 1px var(--violet-500); background: var(--assist-soft); }
  .insp-device:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .insp-group-card { padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }

  /* Schedule and rules */
  .insp-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .insp-day { position: relative; display: grid; place-items: center; min-height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; font-weight: 700; color: var(--text-muted); cursor: pointer; }
  .insp-day.is-active { background: var(--ink); color: var(--text-on-ink); border-color: transparent; }
  .insp-day:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
  .insp-rules { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
  .insp-rule-card { display: flex; align-items: flex-start; gap: 8px; padding: 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
  .insp-rule-icon { width: 30px; height: 30px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--assist-soft); color: var(--violet-500); }
  .insp-rule-icon svg { width: 15px; height: 15px; }
  .insp-sentence { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; color: var(--ink); line-height: 1.5; }
  .insp-sentence > span { font-weight: 600; color: var(--text-muted); }
  .insp-pill-select { appearance: none; -webkit-appearance: none; max-width: 100%; height: 28px; padding: 0 22px 0 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface-2)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
    font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
  [dir="rtl"] .insp-pill-select { padding: 0 10px 0 22px; background-position: left 8px center; }
  .insp-pill-select.is-value { background-color: var(--assist-soft); border-color: color-mix(in oklab, var(--violet-500) 35%, var(--line)); color: var(--assist-text, var(--ink)); }
  .insp-pill-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .insp-rule-value { height: 30px; flex: 1 1 120px; min-width: 100px; font-size: 12.5px; border-radius: 99px; }
  .insp-rule-x { flex: none; }
  .insp-add-rules { display: flex; flex-wrap: wrap; gap: 6px; }
  .insp-add-rules .chip { cursor: pointer; }
  @media (pointer: coarse) { .insp-pill-select { height: 36px; } .insp-rule-value { height: 38px; } }

  /* Variant gallery */
  .insp-variants { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
  .insp-variant-frame { height: 250%; }
  .insp-variant-thumb { height: 96px; }
  .insp-variant.is-auto .insp-variant-thumb { background: linear-gradient(135deg, var(--assist-soft), var(--surface-sunken)); color: var(--violet-500); }
  .insp-variant.is-active { border-color: var(--violet-500); box-shadow: 0 0 0 1px var(--violet-500); background: var(--assist-soft); }
  .insp-variant-check { position: absolute; top: 5px; inset-inline-end: 5px; z-index: 2; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--violet-500); color: #fff; }
  .insp-variant-check svg { width: 12px; height: 12px; }

  /* Insights */
  .insp-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; transition: opacity var(--t-fast); }
  .insp-kpis.is-loading { opacity: .5; }
  .insp-kpi { display: grid; gap: 4px; padding: 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
  .insp-kpi b { font-family: var(--font-display); font-size: 1.45rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
  .insp-kpi.is-feature { background: var(--grad-violet); border-color: transparent; }
  .insp-kpi.is-feature b, .insp-kpi.is-feature .insp-kpi-label { color: #fff; }
  .insp-kpi-label { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
  .insp-kpi-label svg { width: 13px; height: 13px; }
  .insp-chart { margin: 0; display: grid; gap: 8px; }
  .insp-bars { display: flex; align-items: flex-end; gap: 3px; height: 84px; padding: 8px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
  .insp-bar { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
  .insp-bar i, .insp-bar b { position: absolute; bottom: 0; width: 70%; min-height: 2px; border-radius: 3px 3px 1px 1px; }
  .insp-bar i { background: color-mix(in oklab, var(--violet-500) 28%, transparent); }
  .insp-bar b { width: 38%; background: var(--violet-500); }
  .insp-legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--text-muted); }
  .insp-legend span { display: inline-flex; align-items: center; gap: 6px; }
  .insp-legend i { width: 10px; height: 10px; border-radius: 3px; }
  .insp-legend i.is-views { background: color-mix(in oklab, var(--violet-500) 28%, transparent); }
  .insp-legend i.is-clicks { background: var(--violet-500); }
  .insp-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
  .insp-dl div { display: grid; gap: 2px; }
  .insp-dl dt { font-size: 11.5px; color: var(--text-muted); }
  .insp-dl dd { margin: 0; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
  .insp-revenue { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--text-muted); }
  .insp-revenue b { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); }
  .insp-items-rank { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
  .insp-items-rank li { display: grid; grid-template-columns: minmax(0, 1fr) 70px auto; align-items: center; gap: 8px; font-size: 12.5px; }
  .insp-items-label { color: var(--ink); }
  .insp-items-bar { height: 8px; border-radius: 99px; background: var(--surface-sunken); overflow: hidden; }
  .insp-items-bar i { display: block; height: 100%; border-radius: inherit; background: var(--violet-500); }
  .insp-items-rank b { font-variant-numeric: tabular-nums; color: var(--ink); min-width: 2ch; text-align: end; }
  .insp-locked { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 28px 12px; border-radius: 16px; border: 1px dashed var(--line-strong); }
  .insp-locked-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-sunken); color: var(--text-muted); }
  @media (prefers-reduced-motion: reduce) { .insp-seg > button, .insp-swatch, .insp-kpis { transition: none; } }
}

/* "Preview as…" (B5) and audience rules */
@layer components {
  .canvas-preview-as { position: relative; }
  .canvas-preview-panel { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 50%; translate: -50% 0; z-index: 80; width: min(340px, 86vw); display: grid; gap: 10px;
    padding: 14px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--e3, 0 18px 40px -18px rgb(0 0 0 / .3)); }
  [dir="rtl"] .canvas-preview-panel { translate: 50% 0; }
  .canvas-preview-as.is-on .chip { background: var(--violet-500, var(--accent)); color: #fff; border-color: transparent; }
  .insp-rule-word { font-weight: 600; color: var(--ink); }
}
/* B4 · Q4: the shop-the-look hotspot editor (image coordinates never mirror, so the stage is always left-to-right). */
.hs-editor { display: grid; gap: 6px; margin-block-end: 8px; }
.hs-stage { position: relative; direction: ltr; border-radius: 10px; overflow: hidden; cursor: crosshair; background: var(--surface-sunken); }
.hs-stage img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
.hs-pin { position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y); translate: -50% -50%; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; font: 700 12px/1 inherit; font-size: 12px; color: var(--text-on-ink); background: color-mix(in oklab, var(--ink-raw) 75%, transparent);
  border: 2px solid var(--text-on-ink); box-shadow: 0 4px 12px color-mix(in oklab, var(--ink-raw) 30%, transparent); cursor: pointer; }
.hs-pin.is-active { background: var(--accent); transform: scale(1.15); }
.hs-pin:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* B5 · A5: an "Ask me anything" block's kept questions in Insights. */
.insp-qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-block-size: 260px; overflow-y: auto; }
.insp-qlist li { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--surface-sunken); border: 1px solid var(--line); }
/* Owner fix R6D: Style tab gradient editors and colour pickers. */
.insp-sub { margin: 14px 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.insp-grad { display: grid; gap: 8px; }
.insp-grad-bar { height: 34px; border-radius: 10px; background: var(--g); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .1); }
.insp-grad-stops { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.insp-grad-stop { display: grid; grid-template-columns: 32px 84px minmax(0, 1fr) 38px auto; align-items: center; gap: 8px; }
.insp-grad-swatch { position: relative; width: 32px; height: 32px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .14), 0 0 0 2px var(--surface); cursor: pointer; overflow: hidden; flex: none; }
.insp-grad-swatch.is-auto { background: repeating-conic-gradient(var(--surface-sunken) 0 25%, var(--line) 0 50%) 50% / 10px 10px; }
.insp-grad-swatch input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.insp-grad-swatch:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.insp-grad-hex { height: 32px; font-size: 12.5px; padding-inline: 8px; }
.insp-grad-pc { text-align: end; }
.insp-colours { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.insp-colour { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-sunken); }
.insp-colour > span { flex: 1; min-width: 0; line-height: 1.3; }
.insp-range { display: grid; gap: 4px; }
.insp-range .field-label { display: flex; justify-content: space-between; }
.insp-range input[type="range"] { width: 100%; accent-color: var(--accent); min-height: 28px; }

/* css/components/guide.css */
/* Page walkthroughs and "Need a hand?" hints (R6F) */
@layer components {
  .guide-spot { position: fixed; z-index: 70; border-radius: 14px; pointer-events: none;
    box-shadow: 0 0 0 3px var(--accent, #C2F45B), 0 0 0 9999px var(--overlay); transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; }
  .guide-scrim { position: fixed; inset: 0; z-index: 70; background: var(--overlay); }
  .guide-pop { position: fixed; z-index: 71; width: min(340px, calc(100vw - 32px)); padding: 16px 16px 12px; border-radius: 18px;
    background: var(--coach-bg); color: var(--coach-fg); border: 1px solid var(--coach-line); box-shadow: var(--coach-shadow); outline: none; }
  .guide-pop.is-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
  .guide-pop.is-sheet { inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto; }
  .guide-pop:focus-visible { box-shadow: 0 0 0 3px var(--coach-accent), var(--coach-shadow); }
  .guide-head { display: flex; align-items: center; gap: 10px; }
  .guide-head .icon-btn, .guide-nudge-head .icon-btn { margin-inline-start: auto; min-width: 44px; min-height: 44px; }
  .guide-head .icon-btn { color: var(--coach-subtle); }
  .guide-head .icon-btn:hover { background: var(--coach-hover); color: var(--coach-fg); }
  .guide-icon { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--coach-accent); color: var(--coach-on-accent); flex: none; }
  .guide-icon svg { width: 17px; height: 17px; }
  .guide-count { font-size: 12px; font-weight: 700; color: var(--coach-subtle); letter-spacing: .02em; }
  .guide-title { margin: 10px 0 4px; font-size: 17px; color: var(--coach-fg); }
  .guide-text { font-size: 14px; line-height: 1.55; color: var(--coach-muted); }
  .guide-foot { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
  .guide-foot .btn { min-height: 40px; }
  .guide-foot .btn-primary, .guide-foot .btn-primary:hover, .guide-foot .btn-primary:focus-visible { background: var(--coach-accent); color: var(--coach-on-accent); border-color: transparent; }
  .guide-foot .btn-primary:hover { filter: brightness(1.06); }
  .guide-foot .btn:focus-visible, .guide-head .icon-btn:focus-visible { outline: 2px solid var(--coach-accent); outline-offset: 2px; }
  .guide-foot .btn-ghost { color: var(--coach-muted); background: transparent; border-color: transparent; }
  .guide-foot .btn-ghost:hover { background: var(--coach-hover); color: var(--coach-fg); }
  .guide-dots { display: flex; gap: 5px; }
  .guide-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--coach-track); transition: width .2s ease; }
  .guide-dots i.is-on { width: 16px; background: var(--coach-accent); }

  .guide-nudge { position: fixed; z-index: 60; inset-inline-end: 20px; bottom: 20px; width: min(360px, calc(100vw - 24px)); padding: 14px 14px 8px;
    border-radius: 18px; background: var(--surface); color: var(--text); border: 1px solid var(--line);
    box-shadow: 0 20px 50px -20px rgb(8 12 10 / .35); animation: guide-rise .35s cubic-bezier(.2, .8, .2, 1); }
  .guide-nudge-head { display: flex; align-items: flex-start; gap: 10px; }
  .guide-nudge-head .icon-btn { margin-block-start: -8px; margin-inline-end: -8px; }
  .guide-nudge-icon { width: 36px; height: 36px; border-radius: 12px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--accent, #C2F45B) 40%, transparent); color: var(--text); }
  .guide-nudge-icon svg { width: 18px; height: 18px; }
  .guide-nudge-title { font-size: 15px; margin: 2px 0 2px; }
  .guide-nudge-text { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
  .guide-nudge-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
  .guide-nudge-actions .btn { min-height: 40px; }
  .guide-snooze { display: block; width: 100%; min-height: 36px; margin-top: 4px; font-size: 12.5px; color: var(--text-muted); text-align: center; background: none; border: 0; cursor: pointer; border-radius: 10px; }
  .guide-snooze:hover { color: var(--text); text-decoration: underline; }
  @media (max-width: 760px) { .guide-nudge { inset-inline: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); width: auto; } }
  @keyframes guide-rise { from { opacity: 0; transform: translateY(12px); } }
  @media (prefers-reduced-motion: reduce) { .guide-spot, .guide-dots i { transition: none; } .guide-nudge { animation: none; } }
  [data-motion="reduce"] .guide-spot, [data-motion="reduce"] .guide-dots i { transition: none; }
  [data-motion="reduce"] .guide-nudge { animation: none; }
}

/* css/components/pwa.css */
/* R21A · installable app: install card, iOS sheet, update toast, connection pill, offline and share pages,
   and standalone polish (safe areas, no pull-to-refresh bounce, window controls overlay). */
@layer components {
  .pwa-install { position: fixed; z-index: 70; inset-block-end: max(16px, env(safe-area-inset-bottom)); inset-inline-start: 16px; width: min(400px, calc(100vw - 32px));
    display: grid; grid-template-columns: 48px 1fr; gap: 12px 14px; align-items: start; padding: 16px 44px 16px 16px; border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 60px -24px rgb(0 0 0 / .35); animation: pwa-rise .32s cubic-bezier(.2, .8, .2, 1); }
  .pwa-install[hidden], .pwa-update[hidden], .pwa-net[hidden], .pwa-sheet-wrap[hidden] { display: none; }
  .pwa-install-icon { width: 48px; height: 48px; border-radius: 13px; box-shadow: 0 0 0 1px var(--line); }
  .pwa-install-title { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3; margin: 0; }
  .pwa-install-text { font-size: 13px; color: var(--text-muted); margin: 4px 0 0; line-height: 1.45; }
  .pwa-install-actions { grid-column: 2; display: flex; gap: 8px; flex-wrap: wrap; }
  .pwa-install-actions .btn { min-height: 40px; }
  .pwa-install-x { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; width: 36px; height: 36px; }
  @media (max-width: 1023px) { .pwa-install { inset-block-end: calc(max(12px, env(safe-area-inset-bottom)) + 80px); inset-inline-start: 12px; width: calc(100vw - 24px); } }

  .pwa-sheet-wrap { position: fixed; inset: 0; z-index: 90; display: grid; align-items: end; justify-items: center; }
  .pwa-sheet-scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .45); opacity: 0; transition: opacity .2s; }
  .pwa-sheet { position: relative; width: min(480px, 100vw); display: grid; gap: 16px; padding: 10px 20px calc(20px + env(safe-area-inset-bottom));
    background: var(--surface); border-radius: 26px 26px 0 0; box-shadow: 0 -20px 60px -20px rgb(0 0 0 / .4); transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); outline: none; }
  .pwa-sheet-wrap.is-open .pwa-sheet { transform: none; }
  .pwa-sheet-wrap.is-open .pwa-sheet-scrim { opacity: 1; }
  .pwa-sheet-grip { justify-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--line); }
  .pwa-sheet-head { display: flex; gap: 14px; align-items: center; }
  .pwa-sheet-icon { width: 56px; height: 56px; border-radius: 15px; box-shadow: 0 0 0 1px var(--line); flex: none; }
  .pwa-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
  .pwa-steps li { display: grid; grid-template-columns: 28px 1fr 40px; gap: 12px; align-items: center; min-height: 56px; padding: 8px 12px; border-radius: var(--r-md); background: var(--canvas); font-size: 14px; color: var(--ink); }
  .pwa-step-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--accent); color: #fff; }
  .pwa-step-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); color: #0A84FF; }
  .pwa-step-ico svg { width: 20px; height: 20px; }
  .pwa-sheet-done { min-height: 48px; }
  @media (min-width: 700px) { .pwa-sheet-wrap { align-items: center; } .pwa-sheet { border-radius: 26px; padding-block-end: 20px; } }

  .pwa-update { position: fixed; z-index: 85; inset-block-start: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center;
    width: max-content; max-width: calc(100vw - 24px); padding: 8px 8px 8px 16px; border-radius: var(--r-pill); background: var(--ink); color: var(--canvas); font-size: 14px; font-weight: 600;
    box-shadow: 0 18px 40px -16px rgb(0 0 0 / .5); animation: pwa-drop .3s cubic-bezier(.2, .8, .2, 1); }
  .pwa-update svg { width: 18px; height: 18px; flex: none; }
  .pwa-update .icon-btn { color: inherit; width: 36px; height: 36px; }
  .pwa-update .btn { min-height: 36px; }

  .pwa-net { position: fixed; z-index: 85; inset-block-end: calc(max(12px, env(safe-area-inset-bottom)) + 4px); left: 50%; transform: translateX(-50%); display: inline-flex; gap: 8px; align-items: center;
    padding: 8px 14px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 10px 30px -12px rgb(0 0 0 / .35); }
  .pwa-net-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
  .pwa-net.is-off .pwa-net-dot { background: #E5484D; }
  @media (max-width: 1023px) { .pwa-net { inset-block-end: calc(max(12px, env(safe-area-inset-bottom)) + 84px); } }

  /* The offline page */
  .pwa-offline { padding: 32px 24px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 80px -40px rgb(0 0 0 / .35); }
  .pwa-offline h1 { font-size: 24px; color: var(--ink); margin: 4px 0 0; }
  .pwa-offline-icon { color: var(--accent); background: color-mix(in oklab, var(--accent) 12%, var(--surface)); border-color: color-mix(in oklab, var(--accent) 25%, var(--line)); }
  .pwa-offline-queue { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: var(--r-md); background: var(--canvas); color: var(--ink); font-size: 14px; }
  .pwa-offline-queue[hidden], .pwa-offline-auto[hidden] { display: none; }
  .pwa-offline-actions .btn { min-height: 44px; }

  /* The share page */
  .pwa-share { min-height: 100dvh; display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
  .pwa-share-card { width: min(480px, 100%); }
  .pwa-share-title { font-size: 22px; }
  .pwa-share-url { padding: 10px 12px; border-radius: var(--r-sm); background: var(--canvas); font-size: 13px; }
  .pwa-share-actions { display: grid; gap: 8px; }
  .pwa-share-action { display: flex; gap: 12px; align-items: center; min-height: 56px; padding: 10px 14px; border-radius: var(--r-md); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
  .pwa-share-action:hover, .pwa-share-action:focus-visible { border-color: var(--accent); background: color-mix(in oklab, var(--accent) 6%, var(--surface)); }
  .pwa-share-action > svg { width: 22px; height: 22px; color: var(--accent); flex: none; }
  .pwa-share-action span { display: grid; gap: 2px; }
  /* R22A · shared files */
  .pwa-share-note { margin: 0; padding: 10px 12px; border-radius: var(--r-sm); background: var(--canvas); font-size: 14px; }
  .pwa-share-note.is-error { color: var(--danger, #b42318); background: color-mix(in oklab, var(--danger, #b42318) 8%, var(--surface)); }
  .pwa-share-saved { display: flex; gap: 8px; align-items: center; margin: 0; font-weight: 600; color: var(--ok, var(--accent)); }
  .pwa-share-saved > svg { width: 18px; height: 18px; }
  .pwa-share-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-block-size: 320px; overflow-y: auto; }
  .pwa-share-file { display: flex; gap: 12px; align-items: center; min-height: 56px; padding: 6px; border-radius: var(--r-md); border: 1px solid var(--line); }
  .pwa-share-file > img, .pwa-share-file-icon { inline-size: 44px; block-size: 44px; border-radius: var(--r-sm); object-fit: cover; flex: none; background: var(--canvas); display: grid; place-items: center; color: var(--accent); }
  .pwa-share-file-name { flex: 1; min-inline-size: 0; font-size: 14px; }
  .pwa-share-file-act { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding-inline: 12px; border-radius: var(--r-sm); color: var(--accent); font-weight: 600; font-size: 13px; text-decoration: none; }
  .pwa-share-file-act:hover, .pwa-share-file-act:focus-visible { background: color-mix(in oklab, var(--accent) 8%, var(--surface)); }

  /* Console › App (PWA) preview */
  .pwa-preview { display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap; padding: 20px; border-radius: var(--r-lg); background: linear-gradient(160deg, #1f3b33, #0b1512); }
  .pwa-preview-app { display: grid; gap: 6px; justify-items: center; width: 76px; color: #fff; font-size: 12px; text-align: center; }
  .pwa-preview-app img { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 8px 20px -8px rgb(0 0 0 / .6); }
  .pwa-preview-app.is-round img { border-radius: 50%; }

  @keyframes pwa-rise { from { opacity: 0; transform: translateY(16px); } }
  @keyframes pwa-drop { from { opacity: 0; translate: 0 -12px; } }
  @media (prefers-reduced-motion: reduce) { .pwa-install, .pwa-update { animation: none; } .pwa-sheet, .pwa-sheet-scrim { transition: none; } }
  :root[data-motion="reduce"] .pwa-install, :root[data-motion="reduce"] .pwa-update { animation: none; }

  /* Standalone polish */
  :root[data-standalone] body, :root[data-standalone] { overscroll-behavior-y: none; }
  @media (display-mode: standalone) {
    html, body { overscroll-behavior-y: none; }
    .topbar { padding-block-start: env(safe-area-inset-top); height: calc(var(--topbar-h) + env(safe-area-inset-top)); padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right)); }
  }
  @media (display-mode: window-controls-overlay) {
    .topbar { padding-inline-start: max(22px, env(titlebar-area-x, 0px)); padding-inline-end: max(22px, calc(100vw - env(titlebar-area-x, 0px) - env(titlebar-area-width, 100vw))); -webkit-app-region: drag; app-region: drag; }
    .topbar a, .topbar button, .topbar input, .topbar [role="button"] { -webkit-app-region: no-drag; app-region: no-drag; }
  }
}

/* R23C · "Install app" on the marketing site (nav + mobile menu); pwa.js unhides it only where installing is possible. */
.mk-install { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-block: 8px; padding-inline: 12px; border: 0; border-radius: 12px; background: none; color: var(--ink); font: inherit; font-weight: 700; white-space: nowrap; cursor: pointer; }
.mk-install svg { width: 18px; height: 18px; flex: none; }
.mk-install:hover { background: rgb(0 0 0 / .05); }
.mk-install:focus-visible, .mk-install-m:focus-visible { outline: 2px solid var(--focus, currentColor); outline-offset: 2px; }
.mk-install[hidden], .mk-install-m[hidden] { display: none; }
.mk-install-m { inline-size: 100%; border: 0; background: none; font-family: inherit; text-align: start; }
.mk-install-m svg { width: 20px; height: 20px; }
[data-theme="dark"] .mk-install:hover { background: rgb(255 255 255 / .08); }
.mk-nav.is-dark:not(.mega-open) .mk-install { color: #fff; }
/* Icon-only until there's room for the label (the nav is tight up to ~1360px); the name stays for screen readers. */
@media (max-width: 1359px) { .mk-install { inline-size: 44px; justify-content: center; padding-inline: 0; } .mk-install span { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }
@media (max-width: 1040px) { .mk-install { display: none; } }

/* css/utilities.css */
/* Small, deliberate utility layer (ADR-0005). Prefer components. ---------- */
@layer utilities {
  .stack { display: grid; gap: var(--gap, 16px); }
  .stack-sm { display: grid; gap: 8px; }
  .stack-lg { display: grid; gap: 24px; }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 8px); }
  .between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .center { display: grid; place-items: center; }
  .grow { flex: 1; min-width: 0; }
  .nowrap { white-space: nowrap; }
  .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .muted { color: var(--text-muted); }
  .subtle { color: var(--text-subtle); }
  .ink { color: var(--ink); }
  .accent-text { color: var(--accent-text); }
  .danger-text { color: var(--danger); }
  .text-sm { font-size: var(--fs-small); }
  .text-xs { font-size: var(--fs-micro); }
  .text-lg { font-size: var(--fs-h3); }
  .fw-500 { font-weight: 500; }
  .mono { font-family: var(--font-mono); }
  .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
  .mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
  .w-full { width: 100%; }
  .icon-14 { width: 14px; height: 14px; } .icon-16 { width: 16px; height: 16px; } .icon-18 { width: 18px; height: 18px; } .icon-20 { width: 20px; height: 20px; }
  .hide-mobile { } @media (max-width: 640px) { .hide-mobile { display: none !important; } }
  .show-mobile { display: none !important; } @media (max-width: 640px) { .show-mobile { display: revert !important; } }
  .fade-in { animation: fade-in var(--t-slow) var(--ease-out) both; }
  .rise-in { animation: rise-in var(--t-slow) var(--ease-out) both; }
  @keyframes fade-in { from { opacity: 0; } }
  @keyframes rise-in { from { opacity: 0; transform: translateY(6px); } }
}