/**
 * AccountSuite360 — design tokens. THE ONE TOKEN FILE.
 *
 * Phase F1 (2026-10-28) folded platform-tokens.css into this file and deleted it, so
 * every token now has one home. Do not add a second token file: put new tokens here,
 * in the layer they belong to.
 *
 * Three layers, in this order:
 *
 *   1. PALETTE (:root, --v2-palette-*). The raw values that both other layers
 *      share. Defined globally because nothing else reads these names, so defining
 *      them changes no rendering. A value used by both layers lives here ONCE.
 *
 *   2. LEGACY COMPATIBILITY (:root). The global names the ~560 unmigrated templates
 *      and their stylesheets read (--color-*, --fs-*, --sp-*, --accent, --panel ...),
 *      moved here verbatim from platform-tokens.css. Where a legacy token means the
 *      same thing as a palette entry it now points at it; the rest keep their
 *      values. A legacy token is removed only when nothing reads it — see
 *      docs/engineering/frontend-baseline/tokens.md for who reads what.
 *
 *   3. V2 SEMANTIC (.v2). The tokens v2 screens use. DELIBERATELY SCOPED TO .v2,
 *      NOT :root: 128 rules outside v2 read `var(--v2-x, <fallback>)` with a
 *      fallback that differs from the v2 value (ato-forms.css reads muted text as
 *      #667085 where v2 says #050505), so defining these globally would restyle
 *      unmigrated screens. A page opts in with the `v2` body class.
 *
 * The --v2-blue-* names hold the green practice palette (2026-08-14); the names are
 * kept so nothing renames under F1, and point at the palette like everything else.
 *
 * V2 values were transcribed from Figma file dfGPzgSv1dIirK4j4yC554, page "03 — V2
 * Design System". EXCEPTION, 2026-08-13: the text ramp, --v2-canvas and the brand
 * chrome were tuned on the running Clients list (?tweak=1); Figma is behind for those.
 */

/* ── 1. Palette ─────────────────────────────────────────────────────────── */
:root {
  --v2-palette-brand: #1f7a4c;                /* primary green: actions, brand text, table and card heads */
  --v2-palette-brand-hover: #19663f;          /* hover on brand fills; table-head rule */
  --v2-palette-brand-pressed: #145234;        /* pressed brand fill */
  --v2-palette-brand-soft: #e7f4ec;           /* tint of brand: rails, soft ink on brand heads */
  --v2-palette-white: #ffffff;                /* surfaces and ink on brand fills */
  --v2-palette-danger: #b42318;               /* destructive action and danger text */
  --v2-palette-sidebar: #1c211f;              /* sidebar fill */
  --v2-palette-sidebar-deep: #161a18;         /* sidebar brand block and footer */
  --v2-palette-sidebar-line: rgba(255, 255, 255, 0.08);/* sidebar dividers and hover wash */
  --v2-palette-sidebar-idle: #d0d6d2;         /* idle sidebar icon */
  --v2-palette-sidebar-section: #9aa39c;      /* sidebar section label / muted text */
}

/* ── 2. Legacy compatibility (was platform-tokens.css) ──────────────────── */
:root {
  /* ══════════════════════════════════════════════════════════════
     TYPE SCALE
     Seven steps. Every font-size in the product should resolve to
     one of these. The audit found 192 distinct sizes in use, with
     0.72/0.74/0.75/0.76/0.78/0.80/0.8125/0.82rem all live at once —
     visually indistinguishable, but they destroy vertical rhythm.
     ══════════════════════════════════════════════════════════════ */
  --fs-2xs: 0.6875rem;  /* 11px — micro labels, table eyebrows      */
  --fs-xs:  0.75rem;    /* 12px — captions, pill text, hints        */
  --fs-sm:  0.8125rem;  /* 13px — dense table/meta text             */
  --fs-md:  0.875rem;   /* 14px — body default, buttons, inputs     */
  --fs-lg:  1rem;       /* 16px — card titles, emphasised body      */
  --fs-xl:  1.25rem;    /* 20px — section headings (h2)             */
  --fs-2xl: 1.625rem;   /* 26px — page titles (h1)                  */

  /* Line heights — tight for headings, open for reading */
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-base: 1.5;

  /* Weights — 800 is reserved for nothing; it reads as shouting */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Letter-spacing — only headings and uppercase eyebrows need it */
  --ls-tight: -0.011em;
  --ls-eyebrow: 0.04em;

  /* ══════════════════════════════════════════════════════════════
     SPACING SCALE — 4px base
     ══════════════════════════════════════════════════════════════ */
  --sp-1: 0.25rem;   /*  4px */
  --sp-2: 0.5rem;    /*  8px */
  --sp-3: 0.75rem;   /* 12px */
  --sp-4: 1rem;      /* 16px */
  --sp-5: 1.25rem;   /* 20px */
  --sp-6: 1.5rem;    /* 24px */
  --sp-8: 2rem;      /* 32px */
  --sp-10: 2.5rem;   /* 40px */

  /* ══════════════════════════════════════════════════════════════
     MOTION — one duration, one easing. Consistency reads as quality.
     ══════════════════════════════════════════════════════════════ */
  --motion-fast: 120ms;
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* Focus ring — a single accessible treatment used everywhere */
  --focus-ring: 0 0 0 3px rgba(31, 95, 191, 0.35);
  --focus-ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.3);

  /* ── Primary brand ──
     The product was shipping TWO brand blues at once: this token
     resolved to #1e5eff (used by AML, ledger and .accent) while
     design-system.css hardcoded --ui-primary: #1f5fbf for the shell,
     so buttons and navigation were a different blue from module
     accents on the same screen. Unified on the shell's restrained
     #1f5fbf, which is what users see on every page. */
  --color-primary: var(--v2-palette-brand);
  --color-primary-hover: var(--v2-palette-brand-hover);
  --color-primary-pressed: var(--v2-palette-brand-pressed);
  --color-primary-soft: var(--v2-palette-brand-soft);
  --color-primary-tint: #dce8e1;

  /* ── Secondary ── */
  --color-navy: #1f2937;

  /* ── Semantic ──
     Each semantic colour has two roles, and they are NOT interchangeable:
       --color-x      fill/accent — dots, bars, icons, solid buttons. Chosen to read
                      as the colour at a glance; too light for text.
       --color-x-text text on the matching -bg tint. Darkened to clear WCAG AA (4.5:1).
                      Using the fill value for text fails: #f59e0b on #fef3c7 is 2.01:1.
     Reach for -text whenever the colour lands on type. */
  --color-success: #16a34a;
  --color-success-bg: #dcfce7;
  --color-success-text: #067647;
  --color-warning: #f59e0b;
  --color-warning-bg: #fef3c7;
  --color-warning-text: #ad5600;
  --color-danger: #dc2626;
  --color-danger-bg: #fee2e2;
  --color-danger-text: var(--v2-palette-danger);
  --color-info: #0ea5e9;
  --color-info-bg: #e0f2fe;
  --color-ai: #7c3aed;
  --color-ai-bg: #ede9fe;

  /* ── Neutrals & surfaces (premium enterprise tint) ── */
  --color-bg: #e2eaf4;
  --color-bg-subtle: #edf2fa;
  --color-surface: var(--v2-palette-white);
  --color-surface-raised: #f8fbff;
  --color-border: #c5d4e8;
  --color-border-soft: #d5dff0;
  --color-divider: #b8c9e0;
  --color-text: #111827;
  --color-text-secondary: #4b5563;
  --color-text-disabled: #9ca3af;

  /* ── Sidebar (enterprise navy rail — tenant & operator) ── */
  --color-sidebar-bg: var(--v2-palette-sidebar);
  --color-sidebar-bg-end: var(--v2-palette-sidebar);
  --color-sidebar-brand-bg: var(--v2-palette-sidebar-deep);
  --color-sidebar-foot-bg: var(--v2-palette-sidebar-deep);
  --color-sidebar-selected: var(--v2-palette-brand);
  --color-sidebar-hover: var(--v2-palette-sidebar-line);
  --color-sidebar-border: var(--v2-palette-sidebar-line);
  --color-sidebar-text: #f2f4f3;
  --color-sidebar-text-muted: var(--v2-palette-sidebar-section);
  --color-sidebar-text-active: var(--v2-palette-white);
  --color-sidebar-icon: var(--v2-palette-sidebar-idle);
  --color-sidebar-icon-active: var(--v2-palette-white);

  /* ── Tables ── */
  --color-table-header: var(--v2-palette-brand);
  --color-table-header-text: var(--v2-palette-white);
  --color-table-header-border: var(--v2-palette-brand-hover);
  --color-table-alt: #f0f5fc;
  --color-table-hover: #d4e4ff;
  --color-table-selected: #c7dbff;

  /* ── Status pills (table badges) ── */
  --color-pill-info-bg: #bfdbfe;
  --color-pill-info-text: #1e3a8a;
  --color-pill-info-border: #93c5fd;
  --color-pill-ok-bg: #bbf7d0;
  --color-pill-ok-text: #166534;
  --color-pill-ok-border: #86efac;
  --color-pill-warn-bg: #fde68a;
  --color-pill-warn-text: #92400e;
  --color-pill-warn-border: #fbbf24;
  --color-pill-neutral-bg: #e2e8f0;
  --color-pill-neutral-text: #334155;
  --color-pill-neutral-border: #cbd5e1;
  --color-pill-risk-bg: #fecaca;
  --color-pill-risk-text: #991b1b;
  --color-pill-risk-border: #f87171;
  --color-muted-subnote: #64748b;

  /* ── Risk levels ── */
  --color-risk-low: #16a34a;
  --color-risk-medium: #f59e0b;
  --color-risk-high: #dc2626;
  --color-risk-extreme: #991b1b;

  /* ── Escalations ── */
  --color-esc-open: #f59e0b;
  --color-esc-assigned: #1e5eff;
  --color-esc-investigating: #7c3aed;
  --color-esc-awaiting: #f59e0b;
  --color-esc-resolved: #16a34a;
  --color-esc-closed: #6b7280;
  --color-esc-smr: #991b1b;

  /* ── Dashboard charts ── */
  --color-chart-cdd: #1e5eff;
  --color-chart-completed: #16a34a;
  --color-chart-pending: #f59e0b;
  --color-chart-high-risk: #dc2626;
  --color-chart-training: #7c3aed;
  --color-chart-activity: #6b7280;

  /* ── Legacy aliases (app.css / shared components) ── */
  --bg: var(--color-bg);
  --bg-subtle: var(--color-bg-subtle);
  --panel: var(--color-surface);
  --panel-muted: var(--color-surface-raised);
  --border: var(--color-border);
  --border-strong: var(--color-divider);
  --text: var(--color-text);
  --text-secondary: var(--color-text-secondary);
  --muted: var(--color-text-secondary);
  --accent: var(--color-primary);
  --accent-soft: var(--color-primary-soft);
  --accent-hover: var(--color-primary-hover);
  --sidebar: var(--color-sidebar-bg);
  --sidebar-2: var(--color-sidebar-brand-bg);
  --sidebar-text: var(--color-sidebar-text);
  --sidebar-link: var(--color-sidebar-text);
  --sidebar-muted: var(--color-sidebar-text-muted);
  --danger: var(--color-danger);
  --danger-hover: #b91c1c;
  --danger-soft: var(--color-danger-bg);
  --success: var(--color-success);
  --success-soft: var(--color-success-bg);
  --warning: var(--color-warning);
  --warning-soft: var(--color-warning-bg);
  --rose: var(--color-danger);

  /* ── Design-system aliases ── */
  --ui-primary: var(--color-primary);
  --ui-primary-hover: var(--color-primary-hover);
  --ui-primary-pressed: var(--color-primary-pressed);
  --ui-success: var(--color-success);
  --ui-warning: var(--color-warning);
  --ui-danger: var(--color-danger);
  --ui-text: var(--color-text);
  --ui-muted: var(--color-text-secondary);
  --ui-border: var(--color-divider);
  --ui-border-soft: var(--color-border);
  --ui-surface: var(--color-surface);
  --ui-surface-subtle: var(--color-bg-subtle);
  --ui-surface-raised: var(--color-surface);
  --ui-surface-muted: var(--color-surface-raised);

  /* ── SaaS shell aliases ── */
  --saas-bg: var(--color-bg);
  --saas-card: var(--color-surface);
  --saas-card-muted: var(--color-surface-raised);
  --saas-text: var(--color-text);
  --saas-text-muted: var(--color-text-secondary);
  --saas-border: var(--color-border);
  --saas-border-soft: var(--color-border);
  --saas-primary: var(--color-primary);
  --saas-primary-hover: var(--color-primary-hover);
  --saas-primary-soft: var(--color-primary-soft);
  --saas-sidebar: var(--color-sidebar-bg);
  --saas-sidebar-strong: var(--color-sidebar-brand-bg);
  --saas-sidebar-hover: var(--color-sidebar-hover);
  --saas-sidebar-active: var(--color-sidebar-selected);
  --saas-sidebar-link: var(--color-sidebar-text);
  --saas-warning: var(--color-warning);
  --saas-danger: var(--color-danger);

  /* ── AML module aliases ── */
  --aml-primary: var(--color-primary);
  --aml-primary-dark: var(--color-primary-hover);
  --aml-surface: var(--color-surface);
  --aml-surface-muted: var(--color-bg);
  --aml-border: var(--color-border);
  --aml-line: var(--color-border);
  --aml-text: var(--color-text);
  --aml-ink: var(--color-navy);
  --aml-muted: var(--color-text-secondary);
  --aml-text-muted: var(--color-text-secondary);
  --aml-success: var(--color-success);
  --aml-warning: var(--color-warning);
  --aml-danger: var(--color-danger);

  /* ── Ledger module aliases ── */
  --lp-bg: var(--color-bg);
  --lp-surface: var(--color-surface);
  --lp-elevated: var(--color-surface);
  --lp-muted: var(--color-bg);
  --lp-border: rgba(0, 0, 0, 0.06);
  --lp-border-strong: var(--color-border);
  --lp-text: var(--color-text);
  --lp-text-2: var(--color-text-secondary);
  --lp-text-3: var(--color-text-disabled);
  --lp-accent: var(--color-primary);
  --lp-accent-soft: var(--color-primary-soft);
  --lp-ok: var(--color-success);
  --lp-ok-soft: var(--color-success-bg);
  --lp-warn: var(--color-warning);
  --lp-warn-soft: var(--color-warning-bg);
  --lp-danger: var(--color-danger);
  --lp-danger-soft: var(--color-danger-bg);
}

/* ── 3. V2 semantic ─────────────────────────────────────────────────────── */
.v2 {
  /* ── Surfaces ────────────────────────────────────────────────────────────
     White still carries the work, but it can no longer be the ONLY surface.
     Everything white on white made the product read as flat: a card and the
     page it sat on were the same colour, so nothing separated and the eye had
     no levels to climb. The canvas is now a cool grey and content sits on it.
     That single pair does most of the hierarchy; the rest is restraint. */
  /* The page behind the content. NOTE: on the surfaced screens (Dashboard,
     Clients, Work, Client profile) it is THIS token that paints, not
     --v2-blue-canvas — audited-workspace-consistency.css [retired in F3; its rules now end each family's last sheet] loads after
     surfaces.css and re-declares `.main.main-content` from --v2-canvas. Change
     --v2-blue-canvas alone and nothing will appear to happen on those four. */
  --v2-canvas: #f7f7f7;
  --v2-surface: var(--v2-palette-white);         /* content sits on the canvas    */
  --v2-surface-rail: #fcfcfd;
  --v2-surface-inset: #f3f3f3;   /* insets WITHIN a surface       */
  --v2-surface-hover: #f5f5f5;
  --v2-surface-selected: #e8f2ec;

  /* ── Workspace chrome. Practice look 2026-08-14: charcoal + sage, not Velzon blue. */
  --v2-blue-canvas: #f7f7f7;
  --v2-blue-header: var(--v2-palette-brand);
  --v2-blue-rail: var(--v2-palette-brand-soft);
  --v2-blue-thead: var(--v2-palette-brand);
  --v2-blue-border: #c5ddd0;
  --v2-blue-ink: var(--v2-palette-white);
  --v2-blue-ink-soft: var(--v2-palette-brand);

  /* ── Table header band — ONE definition, 2026-08-13 ──
     Every V2 table header reads from these two and nothing else. Before this
     there were four answers to "what colour is a table header": #eef2f7 hard
     coded twice, --v2-surface-inset in fifteen modules, --v2-surface in four
     more, and the blue band on Clients and Work. They were never going to stay
     in step, and the blue band on two screens made that obvious.

     Named by ROLE, not by colour, so the band can stop being blue one day
     without renaming anything. --v2-blue-header is the palette entry; this is
     what the band is FOR. Ink is black on it — 11.3:1, measured against the
     band itself, which is the pairing that matters and the one a
     contrast-against-white readout will not check for you. */
  --v2-table-head-bg: var(--v2-palette-brand);
  --v2-table-head-ink: var(--v2-palette-white);

  /* ── Card heading band ──
     Solid sage with light ink. Only the nested table header on a client
     profile is the light step; list pages (Clients, Work) keep the solid
     --v2-table-head-bg band. */
  --v2-card-head-bg: var(--v2-palette-brand);
  --v2-card-head-ink: var(--v2-palette-white);
  --v2-card-head-ink-soft: var(--v2-palette-brand-soft);
  --v2-card-head-ink-attention: #fff3c4;

  /* ── Borders — hierarchy comes from rules, not boxes ── */
  /* Chosen on real screens 2026-08-14: a stated line rather than a hairline,
     to match the solid card heading band above. */
  --v2-border-row: #d4d4d4;      /* between table rows            */
  --v2-border-section: #e0e0e0;  /* between sections              */
  --v2-border-default: #c4c4c4;  /* control borders               */
  --v2-border-strong: #9a9a9a;   /* checkbox/radio outlines       */
  --v2-border-focus: var(--v2-palette-brand);    /* ring on brand-filled surfaces */

  /* ── Text ── */
  /* Chosen on the running Clients list on 2026-08-13 using the theme tweaker,
     and transcribed here verbatim. Ratios are against --v2-surface (white).

     Primary, strong and secondary are now effectively one colour (black), so
     the text hierarchy on a dense table is carried entirely by SIZE and WEIGHT
     — a 14px/600 record name against 12.5px/400 supporting columns. That is
     the more durable signal anyway, but it does mean re-introducing a level by
     colour alone is no longer possible without changing these values back. */
  --v2-text-primary: #020203;    /* 20.7:1 */
  --v2-text-strong: #000000;     /* 21.0:1 — supporting columns in dense tables */
  --v2-text-secondary: #000000;  /* 21.0:1 */
  --v2-text-muted: #050505;      /* 20.4:1 — em dashes, absences */
  --v2-text-disabled: #595b5f;   /*  6.8:1 — separators, chevrons */
  --v2-text-inverse: #fcfcfd;
  /* Links are a dark navy rather than a blue. They no longer announce
     themselves by colour, so wherever a link is not also underlined the
     affordance now rests on position and context alone. */
  --v2-text-brand: var(--v2-palette-brand);

  /* ── Action — Practice sage ── */
  --v2-action-primary: var(--v2-palette-brand);
  --v2-action-primary-hover: var(--v2-palette-brand-hover);
  --v2-action-primary-pressed: var(--v2-palette-brand-pressed);
  --v2-action-danger: var(--v2-palette-danger);
  --v2-action-danger-hover: #921a10;

  /* ── Brand accent — identity only, never a status, never an action ── */
  --v2-accent: #1a5c43;
  --v2-accent-on-navy: #4fa584;

  /* ── Semantic states. Meaning is locked in Figma; do not remap per screen.
        positive: Current, Complete, Verified, Ready to lodge
        info:     In progress, In review
        warning:  Awaiting client, Due soon, Refresh due
        danger:   Overdue, Blocked, Error
        neutral:  Not started, Draft, Inactive                                   ── */
  --v2-positive: #10864f;
  --v2-positive-text: #18794e;
  --v2-positive-bg: #ecf8f1;
  --v2-positive-border: #a7d7ba;

  --v2-warning: #9a6700;
  --v2-warning-text: #9a6700;
  --v2-warning-bg: #fff7e6;
  --v2-warning-border: #e6c76b;

  --v2-danger: var(--v2-palette-danger);
  --v2-danger-text: var(--v2-palette-danger);
  --v2-danger-bg: #fff0ee;
  --v2-danger-border: #e3aaa5;

  --v2-info: #175cd3;
  --v2-info-text: #175cd3;
  --v2-info-bg: #eff4ff;
  --v2-info-border: #b2ccff;

  --v2-neutral: #d0d5dd;
  --v2-neutral-text: #667085;
  --v2-neutral-bg: #f2f4f7;
  --v2-neutral-border: #d0d5dd;

  /* ── Application shell (navy) ── */
  --v2-sidebar: var(--v2-palette-sidebar);
  --v2-sidebar-deep: var(--v2-palette-sidebar-deep);
  --v2-sidebar-hover: #2a312e;
  --v2-sidebar-active: var(--v2-palette-brand);
  --v2-sidebar-border: var(--v2-palette-sidebar-line);
  --v2-sidebar-idle: var(--v2-palette-sidebar-idle);
  --v2-sidebar-section: var(--v2-palette-sidebar-section);
  --v2-sidebar-active-text: var(--v2-palette-white);

  /* ── Typography. Inter. 12px is the floor for reading text;
        11px is permitted only for uppercase tracked labels.        ── */
  --v2-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --v2-fs-page: 24px;      --v2-lh-page: 30px;    /* page title            */
  --v2-fs-metric: 20px;    --v2-lh-metric: 26px;  /* signal value          */
  --v2-fs-section: 15px;   --v2-lh-section: 20px; /* section heading       */
  --v2-fs-body: 13px;      --v2-lh-body: 18px;    /* body + table text     */
  --v2-fs-caption: 12px;   --v2-lh-caption: 16px; /* supporting — the floor */
  --v2-fs-label: 11px;     --v2-lh-label: 15px;   /* column header/eyebrow */

  --v2-fw-regular: 400;
  --v2-fw-medium: 500;
  --v2-fw-semibold: 600;
  --v2-fw-bold: 700;

  --v2-ls-tight: -0.4px;   /* page title  */
  --v2-ls-snug: -0.05px;   /* row titles  */
  --v2-ls-label: 0.5px;    /* tracked caps */

  /* ── Spacing — 4px rhythm ── */
  --v2-sp-1: 4px;
  --v2-sp-2: 8px;
  --v2-sp-3: 12px;
  --v2-sp-4: 16px;
  --v2-sp-5: 20px;
  --v2-sp-6: 24px;
  --v2-sp-8: 32px;   /* page gutter — structural, never shrinks */

  /* ── Radius — 0 / 4 / 6 / 8 / pill. Nothing else. ── */
  --v2-radius-0: 0;
  --v2-radius-sm: 4px;    /* badges, flags, checkboxes, pagination */
  --v2-radius-md: 6px;    /* buttons, inputs, filter chips         */
  --v2-radius-lg: 8px;    /* nav items, brand mark, overlays       */
  --v2-radius-pill: 999px;/* avatars only                          */

  /* ── Elevation ───────────────────────────────────────────────────────────
     The old rule was "overlays only, content never floats". It was right about
     overlays and wrong about content: with no shadow at all AND no canvas tint,
     a card had nothing to sit on. --v2-elev-card is deliberately almost
     invisible — one pixel of lift, not a glow. It is the only shadow content
     may use, and it is never stacked with another. */
  --v2-elev-card: 0 1px 2px rgba(16, 24, 40, 0.05);
  --v2-elev-overlay: 0 4px 12px rgba(16, 24, 40, 0.10), 0 1px 3px rgba(16, 24, 40, 0.06);
  --v2-elev-modal: 0 20px 40px rgba(16, 24, 40, 0.16), 0 2px 6px rgba(16, 24, 40, 0.08);

  /* ── Focus — one visible treatment everywhere, never removed ── */
  --v2-focus-width: 2px;
  --v2-focus-offset: 2px;
  --v2-focus-color: var(--v2-action-primary);

  /* ── Layout ── */
  --v2-sidebar-width: 248px;
  --v2-sidebar-width-collapsed: 64px;
  --v2-rail-width: 340px;
  --v2-row-height: 40px;
}

/* Responsive rules. Desktop only — nothing scales proportionally.
   The sidebar never collapses on width alone; collapsing is a user action. */
@media (max-width: 1366px) {
  .v2 { --v2-rail-width: 296px; }
}
@media (max-width: 1280px) {
  .v2 { --v2-rail-width: 288px; }
}