/* dpt.v5.css: App Kit v5 (AMENDMENT 40). Loads LAST, after dpt.v3.css and
   dpt.v4.css. OPT-IN: put .dpt-v5 on <html> next to .dpt-dark. Family apps (athlete portal,
   health-hub) also keep .dpt-app, which switches the geometry to the rounded family. Nothing
   here changes an app that does not opt in. The written rules and the history of every
   older value are in brand/README.md.

   RULES (override v1-v4 where they disagree, for .dpt-v5 surfaces only). AMENDMENT 50 (look C)
   rewrote 1, 2, 3, 6 and 7; brand/README.md keeps the history of every older value.
     1. Navy, white and two greens. Canvas #080C16 is the frame (nav rail, tab bar, outer page),
        surface #0C1322 the working panel, raised #141D30 a tile (cards, fields, chips). Green
        #00D68F is the brand: accents, links, active marks, deltas, and the ONE action button
        (navy text). Deep green #007A52 is green on light surfaces and the light action fill
        (white text). Gold, every older green and every charcoal grey are gone from app surfaces.
     2. ONE filled button per screen, the action: .dp5-btn--primary and .dp5-btn--money paint
        --dp5-action (bright green, navy ink, on dark). --dp5-primary is the WHITE SLAB and paints
        SELECTED things (segments, picked chips, tabs, toasts), never the main button. Secondary
        and ghost buttons are plain text (#D5DCE6, hover white): no fill, no outline. Danger is a
        red word; a red fill only on a confirm sheet.
     3. Two radius families. Tool (staff apps): one corner shape, 8 (controls, fields, cards,
        sheets) and 6 (chips, badges), no pills. Family (.dpt-app): buttons and chips pill,
        fields 16, cards 22, sheets 24.
     4. Focus is an inset 1.5px line in the text colour, never green (AMENDMENT 49). Nothing
        outside the edge (AMENDMENT 36).
     5. Inter for everything, tabular numerals, sentence case everywhere. Caps only on the 11px
        micro label.
     6. A card is a tile: raised fill plus a 1px white-30% edge (--dp5-line-card), no shadow, no
        grain. Buttons, chips, rows and fields never lift: no transform, no glow. The sheet/dialog
        keeps its own deeper shadow. Hover and selected fills sit one rung up the navy ladder
        (raised-hover, raised-press) so they still read inside a tile.
     7. Status is a coloured dot plus a word, never a tinted fill. Class-type colours are an 8px
        dot plus the word.
     8. Every token here is --dp5-*. The alias block re-points --dp4-*, --dp3-*, --dp2-* and
        --dp-* so kit components inherit v5 without a rewrite. Apps consume tokens, never hex. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter.woff2') format('woff2');
}

/* ============================================================ TOKENS */
/* Also asserted on any descendant that carries a v3 role class (body.dpt-dark, .sheet.dpt-light): dpt.v3.css
   re-declares ~80 tokens on .dpt-dark / .dpt-light, and for inheritance the closer element wins regardless of
   where :root sits. Without this, a printed form kept an older green. */
:root.dpt-v5, .dpt-v5 :is(.dpt-dark, .dpt-light) {
  color-scheme: dark;

  /* AMENDMENT 50 (look C): the navy ladder Ops and DPT Hub shipped, now the kit default.
     Same token NAMES (they are an API); the values are look C. Canvas is the frame (nav rail, tab bar, outer
     page), surface the working panel, raised a tile (card, field, chip). Hover and selected fills step one
     rung up (raised-hover, raised-press), so a row still reads inside a tile. The card is drawn by its edge:
     --dp5-line-card over the tile is #5B616E, 3.13:1 on the canvas. The A45-A49 greys (#171717 canvas,
     #232323 surface, #3A3A3A raised and every hairline between) are retired; the README ledger keeps why
     each one was picked. A test pins these values and bans the charcoals. */
  --dp5-canvas: #080C16;
  --dp5-surface: #0C1322;
  --dp5-raised: #141D30;
  --dp5-raised-hover: #1C2740;
  --dp5-raised-press: #243652;
  /* One quiet divider for rows and rails; the white-30% line is every edge that must read (card, field,
     control). The divider is deliberately under 1.5:1 on a fill: A43's step rules swap it for line-strong
     the moment a row fills, so it never has to carry a boundary on its own. */
  --dp5-line: #1F2A40;
  --dp5-line-canvas: #1F2A40;
  --dp5-line-strong: rgba(255, 255, 255, .30);
  --dp5-line-card: rgba(255, 255, 255, .30);
  --dp5-skel: #1C2740;
  --dp5-tabbar: #080C16;
  --dp5-scrim: rgba(8, 12, 22, .72);
  --dp5-shadow-card: none;   /* A50: the 1px white-30% edge does the work (A45's lifted shadow is retired) */
  --dp5-shadow-sheet: 0 16px 48px rgba(0, 0, 0, .6);

  /* text: secondary text clears 8:1 on the panel AND on a tile (A47's floor, re-measured for navy):
     text-2 13.44 / 12.19, text-3 8.85 / 8.02. The placeholder is text-3 (A49 left it open for A50). */
  --dp5-text: #FFFFFF;
  --dp5-text-2: #D5DCE6;
  --dp5-text-3: #A9B4C4;
  --dp5-text-off: #7E8B9E;       /* disabled only: WCAG 1.4.3 exempts inactive controls */
  --dp5-text-missing: #7E8B9E;   /* a missing value said in words (Not set, No team): readable text, not a disabled control. Same ink as off here; a theme may lift it on its own */
  --dp5-placeholder: #A9B4C4;
  --dp5-ink: #0C1322;            /* text ON a light or green fill: the panel navy */

  /* the two greens */
  --dp5-green: #00D68F;
  --dp5-green-hover: #4DE3AC;
  --dp5-green-tint: rgba(0, 214, 143, .14);
  --dp5-green-deep: #007A52;
  --dp5-green-deep-hover: #00845A;   /* white text 4.7:1; #00895C was 4.4 */
  --dp5-green-deep-press: #005C3E;
  --dp5-wash: rgba(0, 214, 143, .16);
  --dp5-grain: 0;                /* A50: look C has no grain (AMENDMENT 41's layer stays, switched off) */

  /* controls */
  /* A50: the ACTION is the one filled button per screen. Bright green with navy ink on dark (9.73:1; hover
     11.40, press 7.74), deep green with white ink on light. .dp5-btn--primary and .dp5-btn--money both paint it. */
  --dp5-action: #00D68F;  --dp5-action-ink: #0C1322;  --dp5-action-hover: #4DE3AC;  --dp5-action-press: #00BF80;
  /* --dp5-primary is the WHITE SLAB: selected segments, picked chips, tabs, toasts. Never the main button. */
  --dp5-primary: #FFFFFF;  --dp5-primary-ink: #0C1322;  --dp5-primary-hover: #E6EAF0;  --dp5-primary-press: #D5DCE6;
  /* A50 supersedes A44's outline and the older grey slab: secondary and ghost are PLAIN TEXT, no fill, no
     line, no hover wash (Ops and Hub have none). Hover is the ink stepping from text-2 to white. The wash
     tokens stay declared (an API) and are transparent. */
  --dp5-secondary: transparent;  --dp5-secondary-ink: var(--dp5-text-2);  --dp5-secondary-ink-hover: var(--dp5-text);
  --dp5-secondary-line: transparent;
  --dp5-secondary-wash: transparent;
  --dp5-secondary-wash-press: transparent;
  /* Money IS the action on dark (look C). Kept as its own names so .dp5-btn--money and v3/v4 money buttons
     keep working; on light it resolves to the deep green with white ink. */
  --dp5-money: var(--dp5-action);  --dp5-money-ink: var(--dp5-action-ink);
  --dp5-money-hover: var(--dp5-action-hover);  --dp5-money-press: var(--dp5-action-press);
  /* Focus is a thin 1.5px inset line in the text colour, never a thick green border. On light surfaces --dp5-text is ink, so the line follows the text colour there too. */
  --dp5-focus: inset 0 0 0 1.5px var(--dp5-text);
  /* The focus line must contrast the fill it sits on. A white, green or deep-green control that is NOT a kit
     class sets the variable on itself instead of restating box-shadow:  .mine { --dp5-focus: var(--dp5-focus-ink); }
     (otherwise an app-named white control paints green on white at 1.9:1). An app's own
     action button takes --dp5-focus-action (navy on the bright green, white on the deep green). */
  --dp5-focus-ink: inset 0 0 0 1.5px var(--dp5-primary-ink);
  --dp5-focus-money: inset 0 0 0 1.5px var(--dp5-money-ink);
  --dp5-focus-action: inset 0 0 0 1.5px var(--dp5-action-ink);

  /* status: always a word, and on a v5 badge a dot and a word with NO fill (A50). The tints stay for the v3/v4
     aliases and are OPAQUE, mixed 14% over the navy canvas #080C16, so nothing
     tinted is charcoal-based. White text on each clears 15:1, the status colour itself 6:1. */
  --dp5-good: var(--dp5-green);   --dp5-good-tint: #072827;
  --dp5-warn: #FFB224;            --dp5-warn-tint: #2B2318;
  --dp5-bad: #FF7A7A;             --dp5-bad-tint: #2B1B24;   --dp5-bad-deep: #C42115;   /* #FF5F5F failed 4.5 on raised rows */
  --dp5-info: #5B9DFF;            --dp5-info-tint: #142037;

  /* class-type dots: dot + word, never a fill or text colour */
  --dp5-cat-performance: var(--dp5-green);
  --dp5-cat-semi: #5B9DFF;
  --dp5-cat-power: #FFB224;
  --dp5-cat-volleyball: #A78BFA;

  /* charts: one series in green, a second in grey */
  --dp5-chart: var(--dp5-green);
  --dp5-chart-fill: rgba(0, 214, 143, .18);
  --dp5-chart-other: var(--dp5-text-2);
  --dp5-chart-axis: var(--dp5-text-3);
  --dp5-chart-base: var(--dp5-line);
  --dp5-chart-point: var(--dp5-text);

  /* type */
  --dp5-font: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --dp5-t-hero: 56px;   /* hero numeral, 600, -.02em */
  --dp5-t-stat: 28px;   /* stat and page title, 600, -.01em */
  --dp5-t-h2: 20px;     /* section, 600 */
  --dp5-t-row: 16px;    /* row title, 500 */
  --dp5-t-body: 14px;
  --dp5-t-dense: 13px;  /* staff body */
  --dp5-t-meta: 12px;   /* text 3 */
  --dp5-t-micro: 11px;  /* caps, 600, .08em */

  /* spacing */
  --dp5-sp-1: 4px; --dp5-sp-2: 8px; --dp5-sp-3: 12px; --dp5-sp-4: 16px;
  --dp5-sp-5: 24px; --dp5-sp-6: 32px; --dp5-sp-7: 40px; --dp5-sp-8: 48px;

  /* motion: one curve, colour 100, reveal 180, sheet 240, screen 320 */
  --dp5-ease: cubic-bezier(.2, .8, .2, 1);
  --dp5-t-fast: 100ms; --dp5-t-base: 180ms; --dp5-t-sheet: 240ms; --dp5-t-page: 320ms;

  /* geometry, TOOL family (staff apps). .dpt-app overrides below. A50: one corner shape, 8 and 6 (Ops and Hub). */
  --dp5-r-ctl: 8px; --dp5-r-chip: 6px; --dp5-r-badge: 6px; --dp5-r-field: 8px;
  --dp5-r-card: 8px; --dp5-r-sheet: 8px;
  --dp5-h-ctl: 36px; --dp5-h-ctl-lg: 40px; --dp5-h-field: 40px; --dp5-h-row: 40px;
  --dp5-fs-ctl: 13px; --dp5-fs-field: 13px; --dp5-h-chip: 24px;
  --dp5-pad-card: 16px; --dp5-side-w: 220px; --dp5-content-max: 1180px;

  /* ---- aliases: v4 ---- */
  --dp4-font: var(--dp5-font);
  --dp4-bg: var(--dp5-canvas); --dp4-card: var(--dp5-surface); --dp4-card-2: var(--dp5-raised);
  --dp4-line: var(--dp5-line); --dp4-field: var(--dp5-raised); --dp4-field-line: var(--dp5-raised);
  --dp4-tabbar: var(--dp5-tabbar);
  --dp4-text: var(--dp5-text); --dp4-text-2: var(--dp5-text-2); --dp4-text-3: var(--dp5-text-3);
  --dp4-placeholder: var(--dp5-placeholder);
  --dp4-good: var(--dp5-good); --dp4-good-bg: var(--dp5-good-tint);
  --dp4-watch: var(--dp5-warn); --dp4-watch-bg: var(--dp5-warn-tint);
  --dp4-bad: var(--dp5-bad); --dp4-bad-bg: var(--dp5-bad-tint);
  --dp4-link: var(--dp5-green); --dp4-link-hover: var(--dp5-green-hover);
  --dp4-green: var(--dp5-green);
  --dp4-gold: var(--dp5-primary); --dp4-gold-ink: var(--dp5-primary-ink);   /* gold is out: the PR badge goes white */
  --dp4-primary: var(--dp5-primary); --dp4-primary-ink: var(--dp5-primary-ink); --dp4-primary-hover: var(--dp5-primary-hover);
  --dp4-btn-h: var(--dp5-h-ctl-lg); --dp4-btn-h-sm: var(--dp5-h-ctl); --dp4-field-h: var(--dp5-h-field);
  --dp4-r-card: var(--dp5-r-card); --dp4-r-field: var(--dp5-r-field); --dp4-r-pill: var(--dp5-r-ctl); --dp4-r-badge: var(--dp5-r-badge);
  --dp4-t-num-hero: var(--dp5-t-hero); --dp4-t-num-row: var(--dp5-t-stat); --dp4-t-title: var(--dp5-t-h2); --dp4-t-h1: var(--dp5-t-stat);
  --dp4-t-body: var(--dp5-t-row); --dp4-t-sub: var(--dp5-t-meta); --dp4-t-micro: var(--dp5-t-micro);   /* v4 defined these only under .dpt-app */

  /* ---- aliases: v3 ---- */
  --dp3-font-ui: var(--dp5-font); --dp3-font-display: var(--dp5-font);
  --dp3-bg: var(--dp5-canvas); --dp3-card: var(--dp5-surface); --dp3-card-2: var(--dp5-raised);
  --dp3-card-edge: var(--dp5-line); --dp3-line: var(--dp5-line); --dp3-line-strong: var(--dp5-line-strong);
  --dp3-text: var(--dp5-text); --dp3-text-2: var(--dp5-text-2); --dp3-text-3: var(--dp5-text-3);
  --dp3-accent: var(--dp5-green);
  --dp3-accent-hot: var(--dp5-green); --dp3-accent-hot-hover: var(--dp5-green-hover); --dp3-accent-hot-ink: var(--dp5-ink);
  --dp3-electric: var(--dp5-green); --dp3-electric-ink: var(--dp5-ink);
  --dp3-action: var(--dp5-primary); --dp3-action-ink: var(--dp5-primary-ink); --dp3-action-hover: var(--dp5-primary-hover);
  --dp3-action-rim: transparent;
  --dp3-neutral: var(--dp5-primary); --dp3-neutral-ink: var(--dp5-primary-ink); --dp3-neutral-hover: var(--dp5-primary-hover);
  --dp3-link: var(--dp5-green); --dp3-link-hover: var(--dp5-green-hover);
  --dp3-focus: var(--dp5-text); --dp3-focus-w: 1.5px;   /* AMENDMENT 49: v3 alias follows the text-colour line */
  --dp3-ok: var(--dp5-good); --dp3-warn: var(--dp5-warn); --dp3-danger: var(--dp5-bad); --dp3-info: var(--dp5-info);
  --dp3-ok-tint: var(--dp5-good-tint); --dp3-warn-tint: var(--dp5-warn-tint); --dp3-danger-tint: var(--dp5-bad-tint); --dp3-info-tint: var(--dp5-info-tint);
  --dp3-div-mid: var(--dp5-text-3); --dp3-div-neg: var(--dp5-bad);
  --dp3-seq-2: rgba(0, 214, 143, .35); --dp3-seq-3: rgba(0, 214, 143, .6); --dp3-seq-5: var(--dp5-green-hover);
  --dp3-score-optimal: var(--dp5-good); --dp3-score-fair: var(--dp5-warn); --dp3-score-low: var(--dp5-bad); --dp3-score-none: var(--dp5-text-3);
  --dp3-chart-1: var(--dp5-chart); --dp3-chart-2: var(--dp5-chart-other); --dp3-chart-3: var(--dp5-text-3);
  --dp3-chart-4: var(--dp5-chart-other); --dp3-chart-5: var(--dp5-chart-other);   /* category colours are dots only */
  --dp3-chart-axis: var(--dp5-chart-axis); --dp3-chart-grid: var(--dp5-chart-base); --dp3-chart-other: var(--dp5-chart-other);
  --dp3-div-pos: var(--dp5-good);
  --dp3-seq-1: var(--dp5-green-tint); --dp3-seq-4: var(--dp5-green);
  --dp3-glow-dot: none; --dp3-glow-ring: none; --dp3-glow-text: none;
  --dp3-shadow-card: var(--dp5-shadow-card); --dp3-shadow-float: var(--dp5-shadow-sheet);
  --dp3-r-sm: var(--dp5-r-badge); --dp3-r-md: var(--dp5-r-ctl); --dp3-r-lg: var(--dp5-r-card);
  --dp3-r-xl: var(--dp5-r-sheet); --dp3-r-pill: var(--dp5-r-ctl); --dp3-r-field: var(--dp5-r-field);
  --dp3-field-h: var(--dp5-h-field);
  --dp3-ease: var(--dp5-ease); --dp3-t-fast: var(--dp5-t-fast); --dp3-t-med: var(--dp5-t-base); --dp3-t-slow: var(--dp5-t-page);
  --dp3-t-score-hero: var(--dp5-t-hero); --dp3-t-score: var(--dp5-t-stat); --dp3-t-h1: var(--dp5-t-stat); --dp3-t-h2: var(--dp5-t-h2);
  --dp3-t-h3: var(--dp5-t-row); --dp3-t-body: var(--dp5-t-body); --dp3-t-sub: var(--dp5-t-meta); --dp3-t-micro: var(--dp5-t-micro);
  --dp3-sp-1: var(--dp5-sp-1); --dp3-sp-2: var(--dp5-sp-2); --dp3-sp-3: var(--dp5-sp-3); --dp3-sp-4: var(--dp5-sp-4); --dp3-sp-5: var(--dp5-sp-5);

  /* ---- aliases: v2 ---- */
  --dp2-page: var(--dp5-canvas); --dp2-card: var(--dp5-surface); --dp2-well: var(--dp5-canvas); --dp2-glass: var(--dp5-raised);
  --dp2-hairline: var(--dp5-line); --dp2-hairline-soft: var(--dp5-line-canvas); --dp2-card-border-c: transparent;
  --dp2-text: var(--dp5-text); --dp2-text-2: var(--dp5-text-2); --dp2-label: var(--dp5-text-3);
  --dp2-good: var(--dp5-good); --dp2-warn: var(--dp5-warn); --dp2-crit: var(--dp5-bad); --dp2-crit-chip-bg: var(--dp5-bad-tint);
  --dp2-gold: var(--dp5-primary); --dp2-gold-ink: var(--dp5-primary-ink);
  --dp2-accent-text: var(--dp5-green);
  --dp2-action: var(--dp5-primary); --dp2-action-ink: var(--dp5-primary-ink); --dp2-action-hover: var(--dp5-primary-hover);
  --dp2-action-glow: none; --dp2-fab-shadow: none; --dp2-nav-shadow: none; --dp2-action-edge: transparent;
  --dp2-nav-item: var(--dp5-text-3); --dp2-nav-active: var(--dp5-green); --dp2-nav-border: var(--dp5-line-canvas); --dp2-nav-bg: var(--dp5-tabbar);
  --dp2-streak-on: var(--dp5-green);
  --dp2-r-hero: var(--dp5-r-card); --dp2-r-card: var(--dp5-r-card); --dp2-r-stat: var(--dp5-r-card);
  --dp2-r-inner: var(--dp5-r-ctl); --dp2-r-pill: var(--dp5-r-ctl); --dp2-fs-nav: var(--dp5-t-meta);

  /* ---- aliases: v1 ---- */
  --dp-font-heading: var(--dp5-font); --dp-font-body: var(--dp5-font);
  --dp-brand: var(--dp5-green-deep); --dp-brand-dark: var(--dp5-green-deep-press);   /* the money colour; gold is gone */
  --dp-green: var(--dp5-green-deep); --dp-green-brand: var(--dp5-green); --dp-green-hover: var(--dp5-green-hover); --dp-green-text: var(--dp5-green);
  --dp-ink: var(--dp5-ink); --dp-ink-deep: var(--dp5-canvas); --dp-slate: var(--dp5-text-3);
  --dp-paper: var(--dp5-surface); --dp-mint: var(--dp5-green-tint); --dp-white: var(--dp5-text);
  --dp-border: var(--dp5-line); --dp-field-border: var(--dp5-line); --dp-field-hover: var(--dp5-line-strong);
  --dp-error: var(--dp5-bad);
  --dp-good: var(--dp5-good); --dp-good-wash: var(--dp5-good-tint); --dp-good-t: var(--dp5-good); --dp-good-wash-t: var(--dp5-good-tint);
  --dp-warn: var(--dp5-warn); --dp-warn-wash: var(--dp5-warn-tint); --dp-warn-t: var(--dp5-warn); --dp-warn-wash-t: var(--dp5-warn-tint);
  --dp-crit: var(--dp5-bad); --dp-crit-ink: var(--dp5-bad); --dp-crit-wash: var(--dp5-bad-tint); --dp-crit-t: var(--dp5-bad); --dp-crit-wash-t: var(--dp5-bad-tint);
  --dp-action: var(--dp5-primary); --dp-action-ink: var(--dp5-primary-ink); --dp-action-hover: var(--dp5-primary-hover);
  --dp-action-t: var(--dp5-green); --dp-action-t-ink: var(--dp5-ink); --dp-action-t-hover: var(--dp5-green-hover);
  --dp-attention: var(--dp5-warn); --dp-attention-ink: var(--dp5-ink);
  --dp-raised-dark: var(--dp5-raised);
  --dp-surface: var(--dp5-canvas); --dp-surface-raised: var(--dp5-surface); --dp-surface-sunken: var(--dp5-canvas);
  --dp-text: var(--dp5-text); --dp-text-muted: var(--dp5-text-2); --dp-line: var(--dp5-line);
  --dp-radius: var(--dp5-r-ctl); --dp-radius-lg: var(--dp5-r-card);
  --dp-btn-h: var(--dp5-h-ctl-lg); --dp-btn-h-sm: var(--dp5-h-ctl); --dp-btn-h-desk: var(--dp5-h-ctl);
  --dp-chrome: var(--dp5-canvas); --dp-chrome-green: var(--dp5-green); --dp-chrome-ink: var(--dp5-text);
  --dp-shadow: none; --dp-shadow-lg: none; --dp-shadow-t: none;
}

/* FAMILY geometry (athlete portal, health-hub): rounded, taller, bigger type. */
:root.dpt-v5.dpt-app, :root.dpt-v5.dpt-app :is(.dpt-dark, .dpt-light) {
  --dp5-r-ctl: 999px; --dp5-r-chip: 999px; --dp5-r-badge: 6px; --dp5-r-field: 16px;
  --dp5-r-card: 22px; --dp5-r-sheet: 24px;
  --dp5-h-ctl: 44px; --dp5-h-ctl-lg: 56px; --dp5-h-field: 56px; --dp5-h-row: 56px;
  --dp5-fs-ctl: 15px; --dp5-fs-field: 16px; --dp5-h-chip: 32px;
  --dp5-pad-card: 18px; --dp5-content-max: 720px;
}
/* A50: the FAMILY page is the website's dark section, not the staff frame. Page #0C1322, cards (tiles) #141D30
   with the white-30% edge, footer and tab bar #080C16 (--dp5-tabbar). Screen only and never on a light root or
   island: this rule is (0,4,0) on body, so outside @media screen it would beat the print and light canvases. */
@media screen {
  :root.dpt-v5.dpt-app:not(.dpt-light), :root.dpt-v5.dpt-app .dpt-dark { --dp5-canvas: #0C1322; }
}

/* TOOL family on a phone OR any coarse pointer (a tablet held on the gym floor): touch targets. */
@media (max-width: 768px), (pointer: coarse) {
  :root.dpt-v5:not(.dpt-app), :root.dpt-v5:not(.dpt-app) :is(.dpt-dark, .dpt-light) { --dp5-h-ctl: 44px; --dp5-h-ctl-lg: 48px; --dp5-h-field: 44px; --dp5-h-row: 48px; --dp5-fs-ctl: 14px; --dp5-fs-field: 16px; --dp5-h-chip: 32px; }
}

/* LIGHT surfaces: print, PDF, email only. Apps are dark-only; no toggle. A .dpt-light element inside a dark app
   (a print sheet) gets these too; it must come after the dark block so it wins the equal-specificity tie. */
:root.dpt-v5.dpt-light, .dpt-v5 .dpt-light {
  color-scheme: light;
  /* A50: look C light. Page #F5F7FA, cards and panels white, one cool line #DDE3EA, navy text, one cool grey
     #3D4757 for text-2 and text-3 (8.75:1 on the page, 9.39:1 on a card). Action and money are the deep green
     with WHITE ink; the selected slab is navy with white ink. Secondary stays plain text (the dark block's
     transparent tokens resolve here too), which prints as well as a fill does. */
  --dp5-canvas: #F5F7FA; --dp5-surface: #FFFFFF; --dp5-raised: #FFFFFF; --dp5-raised-hover: #EEF1F5; --dp5-raised-press: #E6EAF0;
  --dp5-line: #DDE3EA; --dp5-line-canvas: #DDE3EA; --dp5-line-strong: #7D8898; --dp5-skel: #EEF1F5; --dp5-tabbar: #FFFFFF; --dp5-grain: 0;
  --dp5-line-card: #DDE3EA; --dp5-shadow-card: none;
  --dp5-text: #0C1322; --dp5-text-2: #3D4757; --dp5-text-3: #3D4757; --dp5-text-off: #A0A9B6; --dp5-text-missing: #A0A9B6; --dp5-placeholder: #5E6978;
  --dp5-green: #007A52; --dp5-green-hover: #005C3E; --dp5-green-tint: rgba(0, 122, 82, .12); --dp5-wash: rgba(0, 122, 82, .08);
  --dp5-action: #007A52; --dp5-action-ink: #FFFFFF; --dp5-action-hover: #00845A; --dp5-action-press: #005C3E;
  --dp5-primary: #0C1322; --dp5-primary-ink: #FFFFFF; --dp5-primary-hover: #1C2740; --dp5-primary-press: #243652;
  --dp5-good-tint: #E0EFEA; --dp5-warn: #96540A; --dp5-warn-tint: #F2EBE2;
  --dp5-bad: #C42115; --dp5-bad-deep: #C42115; --dp5-bad-tint: #F9E9E8;
  --dp5-info: #1D4ED8; --dp5-info-tint: #E8EDFB;
  --dp5-chart-fill: rgba(0, 122, 82, .14);
  --dp5-scrim: rgba(12, 19, 34, .4);
}
@media print {
  :root.dpt-v5, .dpt-v5 :is(.dpt-dark, .dpt-light) {
    /* paper stays white; everything else is look C light */
    --dp5-canvas: #FFFFFF; --dp5-surface: #FFFFFF; --dp5-raised: #FFFFFF; --dp5-line: #DDE3EA; --dp5-line-canvas: #DDE3EA;
    --dp5-line-card: #DDE3EA; --dp5-shadow-card: none;
    --dp5-text: #0C1322; --dp5-text-2: #3D4757; --dp5-text-3: #3D4757;
    --dp5-green: #007A52; --dp5-green-tint: rgba(0, 122, 82, .12);
    --dp5-primary: #0C1322; --dp5-primary-ink: #FFFFFF;
    --dp5-action: #007A52; --dp5-action-ink: #FFFFFF; --dp5-action-hover: #00845A; --dp5-action-press: #005C3E;
    --dp5-warn: #96540A; --dp5-bad: #C42115;
  }
}

/* ============================================================ BASE */
html.dpt-v5 { background: var(--dp5-canvas); }
.dpt-v5 body {
  /* background-color, not the shorthand: body.dp5-washed keeps its wash image. */
  margin: 0; background-color: var(--dp5-canvas); color: var(--dp5-text);
  font: var(--dp5-t-body)/1.4 var(--dp5-font);
  -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1;
  -webkit-tap-highlight-color: transparent;
}
/* Zero-specificity base so a class on the element always wins (anchor buttons, nav links, app headings). */
:where(.dpt-v5 a) { color: var(--dp5-green); text-decoration: none; }
:where(.dpt-v5 a:hover) { color: var(--dp5-green-hover); }
:where(.dpt-v5 p a, .dpt-v5 li a, .dpt-v5 td a, .dpt-v5 .dp5-sub a) { text-decoration: underline; text-underline-offset: 2px; }   /* links inside copy need more than colour */
.dpt-v5 :is(button, input, select, textarea, h1, h2, h3, h4, h5, h6) { font-family: var(--dp5-font); }
:where(.dpt-v5 h1, .dpt-v5 h2, .dpt-v5 h3, .dpt-v5 h4) { margin: 0; font-weight: 600; letter-spacing: -.01em; }
:where(.dpt-v5 h1) { font-size: var(--dp5-t-stat); }
:where(.dpt-v5 h2) { font-size: var(--dp5-t-h2); }
:where(.dpt-v5 h3) { font-size: var(--dp5-t-row); font-weight: 500; letter-spacing: 0; }
/* Components size themselves border-box; apps that never set it would otherwise overflow 100%-width fields by their padding. */
.dpt-v5 [class*="dp5-"], .dpt-v5 [class*="dp5-"] *, .dpt-v5 [class*="dp5-"]::before, .dpt-v5 [class*="dp5-"]::after { box-sizing: border-box; }

/* Focus: the inset line, everywhere, never outside the edge. Text links underline instead. */
/* Focus rules carry a triple .dpt-v5 (0,3,0 scope) on purpose: dpt.v3.css's own
   `.dpt-dark :is(input, select, textarea, button, a.dp3-btn, .dp3-btn):focus-visible` is (0,3,1) and
   otherwise beats every focus colour here (a 1px green line showed on the deep-green
   money button). The bump is invisible to users and keeps the per-button inks winning.
   AMENDMENT 50.1: that v3 rule (and dpt.v1.css's) also recoloured a focused control's own BORDER, a second
   line beside this one (a white rim round the green action). Both border rules now skip anything inside
   .dpt-v5, so here the inset line is the only focus mark and a control keeps its resting edge. */
/* :where() keeps this base rule at (0,2,0); with :is() it was (0,4,0) and beat every per-button focus
   colour below (money buttons took green on deep green, 2.8:1). */
.dpt-v5.dpt-v5.dpt-v5 :where(button, [role="button"], input, select, textarea, summary, [tabindex]:not([tabindex="-1"]), a.dp5-btn):focus-visible {
  outline: 0; box-shadow: var(--dp5-focus);
}
:where(.dpt-v5 a:not(.dp5-btn)):focus-visible { outline: 0; text-decoration: underline; text-decoration-thickness: 2px; color: var(--dp5-green); }
/* On a filled control the text-colour line has no contrast: the line takes the control's own ink instead.
   A50: the primary BUTTON is the action (navy line on the bright green, white on the light deep green); the
   white slab (picked chip, PR flag) and the red confirm keep the slab ink. */
.dpt-v5.dpt-v5.dpt-v5 .dp5-btn--primary:focus-visible { box-shadow: inset 0 0 0 1.5px var(--dp5-action-ink); }
.dpt-v5.dpt-v5.dpt-v5 :is(.dp5-chip.is-on, .dp5-pr, .dp5-badge--pr, .dp5-btn--danger-fill):focus-visible { box-shadow: inset 0 0 0 1.5px var(--dp5-primary-ink); }
.dpt-v5.dpt-v5.dpt-v5 .dp5-btn--money:focus-visible { box-shadow: inset 0 0 0 1.5px var(--dp5-money-ink); }
.dpt-v5.dpt-v5.dpt-v5 .dp5-check:checked:focus-visible, .dpt-v5.dpt-v5.dpt-v5 .dp5-check:indeterminate:focus-visible { box-shadow: inset 0 0 0 1.5px var(--dp5-ink); }
@media (forced-colors: active) {
  .dpt-v5 :where(a, button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid; outline-offset: -2px; box-shadow: none; }
  .dpt-v5 :is(.dp5-check, .dp5-switch, .dp5-radio) { appearance: auto; forced-color-adjust: auto; }
  .dpt-v5 :is(.dp5-check, .dp5-switch, .dp5-radio)::after { content: none; }
}

/* ============================================================ TYPE */
.dp5-eyebrow { font-size: var(--dp5-t-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dp5-green); }
.dp5-eyebrow--quiet { color: var(--dp5-text-3); }
.dp5-title { font-size: var(--dp5-t-stat); font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.dp5-h2 { font-size: var(--dp5-t-h2); font-weight: 600; }
.dp5-sub { color: var(--dp5-text-2); }
.dp5-meta { font-size: var(--dp5-t-meta); color: var(--dp5-text-3); }
.dp5-num { font-size: var(--dp5-t-hero); font-weight: 600; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.dp5-num small, .dp5-unit { font-size: .36em; font-weight: 500; color: var(--dp5-text-2); letter-spacing: 0; margin-left: .12em; }
.dp5-stat { font-size: var(--dp5-t-stat); font-weight: 600; letter-spacing: -.01em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.dp5-delta { font-size: var(--dp5-t-dense); font-weight: 600; color: var(--dp5-good); }
.dp5-delta--flat { color: var(--dp5-text-3); }
.dp5-delta--down { color: var(--dp5-bad); }

/* ============================================================ BUTTONS */
.dp5-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--dp5-h-ctl); padding: 0 16px; border-radius: var(--dp5-r-ctl);
  /* Every variant carries the same 1.5px box so the geometry never moves. The border colour is
     transparent unless a variant sets it. box-sizing is border-box here, so the control stays 40px / 44px. */
  border: 1.5px solid var(--dp5-secondary-line);
  background: var(--dp5-secondary); color: var(--dp5-secondary-ink);
  font: 600 var(--dp5-fs-ctl)/1 var(--dp5-font); white-space: nowrap; cursor: pointer;
  text-decoration: none; transform: none; box-shadow: none;
  transition: background var(--dp5-t-fast) var(--dp5-ease), color var(--dp5-t-fast) var(--dp5-ease);
}
/* A50: the primary button is the ACTION (bright green, navy ink); --dp5-primary is the selected slab, not this. */
.dp5-btn--primary { background: var(--dp5-action); color: var(--dp5-action-ink); border-color: transparent; }
.dp5-btn--money { background: var(--dp5-money); color: var(--dp5-money-ink); border-color: transparent; }   /* A42: NO EDGE ON A MONEY BUTTON, EVER. */
.dp5-btn--ghost { background: transparent; color: var(--dp5-secondary-ink); border-color: transparent; }
.dp5-btn--link { background: transparent; color: var(--dp5-green); padding: 0 4px; border-color: transparent; }
.dp5-btn--danger { background: transparent; color: var(--dp5-bad); border-color: transparent; }
.dp5-btn--danger-fill { background: var(--dp5-bad); color: var(--dp5-primary-ink); border-color: transparent; }   /* confirm sheets only */
.dp5-btn--lg { height: var(--dp5-h-ctl-lg); padding: 0 20px; font-size: calc(var(--dp5-fs-ctl) + 1px); }
.dp5-btn--block { width: 100%; }
.dp5-btn--icon { width: var(--dp5-h-ctl); padding: 0; }
/* A50: a disabled text button stays text; only a disabled FILLED button keeps a (raised) fill so its shape holds. */
.dp5-btn:disabled, .dp5-btn[aria-disabled="true"] { background: transparent; color: var(--dp5-text-off); border-color: transparent; cursor: default; }
.dp5-btn:is(.dp5-btn--primary, .dp5-btn--money, .dp5-btn--danger-fill):is(:disabled, [aria-disabled="true"]) { background: var(--dp5-raised-hover); }
.dp5-btn.is-loading { pointer-events: none; }   /* label keeps its colour; the spinner is the state */
.dp5-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) {
  .dp5-btn:hover { background: var(--dp5-secondary-wash); color: var(--dp5-secondary-ink-hover); }
  .dp5-btn--primary:hover { background: var(--dp5-action-hover); color: var(--dp5-action-ink); }
  .dp5-btn--money:hover { background: var(--dp5-money-hover); color: var(--dp5-money-ink); }
  .dp5-btn--ghost:hover { background: transparent; color: var(--dp5-secondary-ink-hover); }
  .dp5-btn--link:hover { background: transparent; color: var(--dp5-green-hover); }
  .dp5-btn--danger:hover { background: transparent; color: var(--dp5-bad); }   /* A50: danger is a word; no tint on hover */
  .dp5-btn--danger-fill:hover { background: #FF7A7A; color: var(--dp5-ink); }
  .dp5-btn:disabled:hover { background: transparent; color: var(--dp5-text-off); }
}
/* Pressed states sit AFTER the hover block so a mouse press shows on desktop (equal specificity, later wins). */
.dp5-btn:active { background: var(--dp5-secondary-wash-press); color: var(--dp5-secondary-ink-hover); }
.dp5-btn--primary:active { background: var(--dp5-action-press); color: var(--dp5-action-ink); }
.dp5-btn--money:active { background: var(--dp5-money-press); color: var(--dp5-money-ink); }
.dp5-btn--ghost:active { background: transparent; color: var(--dp5-secondary-ink-hover); }
.dp5-btn--link:active { background: transparent; color: var(--dp5-green); }
.dp5-btn--danger:active { background: transparent; color: var(--dp5-bad); }
.dp5-btn--danger-fill:active { background: var(--dp5-bad); color: var(--dp5-primary-ink); }
.dp5-btn:is(:disabled, [aria-disabled="true"]):is(:hover, :active) { background: transparent; color: var(--dp5-text-off); }
.dp5-btn:is(.dp5-btn--primary, .dp5-btn--money, .dp5-btn--danger-fill):is(:disabled, [aria-disabled="true"]):is(:hover, :active) { background: var(--dp5-raised-hover); }
.dp5-btn, .dp5-btn:is(:hover, :active) { transform: none; filter: none; text-shadow: none; }   /* a host theme's button:hover never lifts us */
.dp5-btn--link, .dp5-link { min-width: 24px; min-height: 24px; }
.dp5-spin { width: 14px; height: 14px; border: 2px solid rgba(169, 180, 196, .4); border-top-color: currentColor; border-radius: 50%; animation: dp5-spin .8s linear infinite; }
@keyframes dp5-spin { to { transform: rotate(360deg); } }
.dp5-link { background: none; border: 0; padding: 0; color: var(--dp5-green); font: inherit; font-weight: 500; cursor: pointer; }
.dp5-link--quiet { color: var(--dp5-text-2); }   /* sign-in secondary link only */

/* ============================================================ FIELDS */
.dp5-label { display: block; font-size: var(--dp5-t-meta); color: var(--dp5-text-2); margin: 0 0 6px; }
.dp5-field {
  display: block; width: 100%; height: var(--dp5-h-field); padding: 0 14px;
  background: var(--dp5-raised); color: var(--dp5-text); border: 0; border-radius: var(--dp5-r-field);
  font: 400 var(--dp5-fs-field)/1.2 var(--dp5-font); box-shadow: inset 0 0 0 1px var(--dp5-line-strong); appearance: none; -webkit-appearance: none;
}
/* AMENDMENT 48: a field shows its edge. A borderless fill barely separates from the card or the canvas,
   so a field was found by its placeholder. The edge is inset (no layout change) in line-strong,
   and it steps aside for the focus and error lines, which set their own box-shadow. The default
   below gives every text field inside the kit the same edge; :where() keeps it at zero specificity, so an app rule
   that styles its own field (a search wrapper, a keypad buffer) keeps the last word. Never an alias token on :root:
   a var() read here re-resolves inside a light island, an alias would not (AMENDMENT 11). */
:where(.dpt-v5) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="file"], [type="color"], [type="submit"], [type="button"], [type="reset"], [type="image"]), textarea, select) {
  box-shadow: inset 0 0 0 1px var(--dp5-line-strong);
}
.dp5-field::placeholder { color: var(--dp5-placeholder); opacity: 1; }
.dp5-field[readonly] { background: var(--dp5-canvas); box-shadow: inset 0 0 0 1px var(--dp5-line); }
.dp5-field:is(:disabled, [aria-disabled="true"]) { color: var(--dp5-text-off); }
.dp5-field:focus, .dp5-field:focus-visible { outline: 0; box-shadow: var(--dp5-focus); }
.dp5-field[aria-invalid="true"], .dp5-field.is-error { box-shadow: inset 0 0 0 2px var(--dp5-bad); }
textarea.dp5-field { height: auto; min-height: calc(var(--dp5-h-field) * 2); padding: 12px 14px; line-height: 1.4; resize: vertical; }
select.dp5-field { padding-inline-end: 36px; 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='%23A9B4C4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.dp5-error { display: block; font-size: var(--dp5-t-meta); color: var(--dp5-bad); margin-top: 6px; }
.dp5-help { display: block; font-size: var(--dp5-t-meta); color: var(--dp5-text-3); margin-top: 6px; }
.dp5-field-wrap { position: relative; --dp5-aux-w: 4rem; }
.dp5-field-wrap:has(.dp5-field-aux) > .dp5-field { padding-inline-end: calc(var(--dp5-aux-w) + 20px); }   /* typed text never runs under Show */
.dp5-field-wrap .dp5-field-aux { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); min-width: var(--dp5-aux-w); min-height: 24px; background: none; border: 0; padding: 0 8px; color: var(--dp5-text-2); font: 500 var(--dp5-t-dense)/1 var(--dp5-font); cursor: pointer; }
@supports (appearance: base-select) {
  select.dp5-field:not([multiple]) { appearance: base-select; background-image: none; padding-inline-end: 14px; }
  select.dp5-field::picker-icon { color: var(--dp5-text-2); }
  select.dp5-field::picker(select) { background: var(--dp5-surface); color: var(--dp5-text); border: 0; border-radius: var(--dp5-r-sheet); box-shadow: var(--dp5-shadow-sheet); }
}
.dp5-radio { appearance: none; width: 24px; height: 24px; margin: 0; border: 0; border-radius: 50%; background: var(--dp5-raised); box-shadow: inset 0 0 0 1.5px var(--dp5-text-3); cursor: pointer; }   /* A50: a tile is raised too, so the edge (A48's checkbox recipe) is what finds it */
.dp5-radio:checked { background: radial-gradient(circle, var(--dp5-green) 0 6px, var(--dp5-raised) 7px); box-shadow: inset 0 0 0 1.5px var(--dp5-green); }
.dp5-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.dp5-fieldset > legend { padding: 0; margin-bottom: 8px; font-size: var(--dp5-t-meta); color: var(--dp5-text-2); }
.dp5-input-group { display: flex; gap: 8px; min-width: 0; }
.dp5-input-group > .dp5-field { flex: 1; min-width: 0; width: 0; }
.dp5-label.is-required::after { content: " *"; color: var(--dp5-bad); }
.dp5-switch { appearance: none; width: 40px; height: 24px; border-radius: 12px; /* the one capsule: a switch reads as a switch */ background: var(--dp5-raised-press); position: relative; cursor: pointer; border: 0; margin: 0; }
.dp5-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--dp5-text-2); transition: transform var(--dp5-t-fast) var(--dp5-ease), background var(--dp5-t-fast) var(--dp5-ease); }
.dp5-switch:is(:checked, [aria-checked="true"]) { background: var(--dp5-green-deep); }
.dp5-switch:is(:checked, [aria-checked="true"])::after { transform: translateX(16px); background: #FFFFFF; }
.dp5-check { appearance: none; width: 24px; height: 24px; border-radius: 4px; background: var(--dp5-raised); border: 0; margin: 0; cursor: pointer; display: inline-grid; place-items: center; }
.dp5-check:checked { background: var(--dp5-green); }
.dp5-check:checked::after { content: ""; width: 11px; height: 6px; border: 2px solid var(--dp5-ink); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.dp5-check:indeterminate { background: var(--dp5-green); }
.dp5-check:indeterminate::after { content: ""; width: 11px; height: 2px; background: var(--dp5-ink); }
/* AMENDMENT 48: an unticked box shows its edge in text-3. The native box had none (raised on raised); the component
   box (dpt.v5.components.css) drew line-strong, which is too faint on a hovered or selected row and on the
   table header, which is where a row checkbox lives. text-3 clears 3:1 on the card, a raised row and the canvas.
   The component rule is (0,1,0) and loads later, so this is (0,3,0). */
input.dp5-check:not(:checked):not(:indeterminate) { box-shadow: inset 0 0 0 1.5px var(--dp5-text-3); }
.dp5-check:not(input):not(.is-on):not(.is-mixed) { border-color: var(--dp5-text-3); }
.dp5-check:is(:disabled, [aria-disabled="true"]), .dp5-switch:is(:disabled, [aria-disabled="true"]), .dp5-radio:is(:disabled, [aria-disabled="true"]) { opacity: .45; cursor: default; }

/* ============================================================ SURFACES */
/* AMENDMENT 50: a card is a TILE, raised #141D30 with the white-30% edge and no shadow
   (--dp5-shadow-card is none). The edge over the tile is #5B616E, 3.13:1 on the canvas. Rows, table heads and
   chips inside it step one rung up (raised-hover to hover, raised-press to select) so they still read.
   Cards only: rows, fields, chips and buttons never lift. Light surfaces (print, email) reset the edge below. */
.dp5-card { background: var(--dp5-raised); border-radius: var(--dp5-r-card); border: 1px solid var(--dp5-line-card); box-shadow: var(--dp5-shadow-card); }
.dp5-card__body { padding: var(--dp5-pad-card); }
.dp5-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: var(--dp5-pad-card) var(--dp5-pad-card) 0; }
.dp5-row { display: flex; align-items: center; gap: 12px; min-height: var(--dp5-h-row); padding: 10px var(--dp5-pad-card); border-top: 1px solid var(--dp5-line); color: inherit; text-decoration: none; }
.dp5-row:first-child { border-top: 0; }
.dp5-row__main { flex: 1; min-width: 0; }
.dp5-row__t { font-size: var(--dp5-t-row); font-weight: 500; line-height: 1.25; }
.dp5-row__s { font-size: var(--dp5-t-meta); color: var(--dp5-text-3); margin-top: 2px; }
.dp5-row__v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dp5-row__v small { font-size: .8em; font-weight: 500; color: var(--dp5-text-2); margin-left: 3px; }
.dp5-row__d { font-size: var(--dp5-t-meta); font-weight: 600; color: var(--dp5-good); text-align: right; }
.dp5-chev { color: var(--dp5-text-3); flex: none; width: 16px; height: 16px; }
a.dp5-row, button.dp5-row { width: 100%; text-align: left; background: none; border-top: 1px solid var(--dp5-line); border-left: 0; border-right: 0; border-bottom: 0; font: inherit; cursor: pointer; }
@media (hover: hover) { a.dp5-row:hover, button.dp5-row:hover, .dp5-row.is-hover { background: var(--dp5-raised-hover); } }
.dp5-row.is-selected, .dp5-row[aria-selected="true"] { background: var(--dp5-raised-press); }
.dp5-row:is(.is-hover, .is-selected, [aria-selected="true"]) :is(.dp5-row__s, .dp5-meta, .dp5-delta--flat) { color: var(--dp5-text-2); }   /* the quiet text-3 is too faint on a filled row */
@media (hover: hover) { a.dp5-row:hover :is(.dp5-row__s, .dp5-meta), button.dp5-row:hover :is(.dp5-row__s, .dp5-meta) { color: var(--dp5-text-2); } }
.dp5-row__t, .dp5-row__main { min-width: 0; overflow-wrap: anywhere; }
.dp5-card__head { flex-wrap: wrap; }
.dp5-card__head > * { min-width: 0; }
:root.dpt-v5:not(.dpt-app) .dp5-row__t { font-size: var(--dp5-t-body); }
.dp5-divider { height: 1px; background: var(--dp5-line); border: 0; margin: 0; }
.dp5-avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; background: var(--dp5-raised-hover); color: var(--dp5-text); display: inline-flex; align-items: center; justify-content: center; font-size: var(--dp5-t-meta); font-weight: 600; overflow: hidden; }
.dp5-avatar img { width: 100%; height: 100%; object-fit: cover; }
.dp5-avatar--lg { width: 48px; height: 48px; font-size: var(--dp5-t-body); }
.dp5-prog { height: 6px; background: var(--dp5-raised); border-radius: 3px; overflow: hidden; }
.dp5-prog > i, .dp5-prog__fill { display: block; height: 100%; background: var(--dp5-green); border-radius: 3px; }

/* tables (staff apps) */
.dp5-table { width: 100%; border-collapse: collapse; font-size: var(--dp5-t-dense); }
/* AMENDMENT 41: the head sits one step lighter than the card, with a text-2 label. The rule: the head is never
   the card fill it sits in, or it vanishes against the card. */
.dp5-table th { position: sticky; top: 0; background: var(--dp5-raised-hover); text-align: left; font-size: var(--dp5-t-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dp5-text-2); padding: 8px 12px; border-bottom: 1px solid var(--dp5-line); }
.dp5-table td { padding: 0 12px; height: var(--dp5-h-row); border-bottom: 1px solid var(--dp5-line); vertical-align: middle; }
.dp5-table :is(th, td).is-num { text-align: right; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .dp5-table tbody tr:hover td { background: var(--dp5-raised-hover); } .dp5-table tbody tr:hover .dp5-meta { color: var(--dp5-text-2); } }
.dp5-table tr:is(.is-selected, [aria-selected="true"]) td { background: var(--dp5-raised-press); }
.dp5-table tr:is(.is-selected, [aria-selected="true"]) .dp5-meta { color: var(--dp5-text-2); }

/* AMENDMENT 43: an edge never paints in the fill that is about to cover it. --dp5-line and
   --dp5-raised were once the same colour, so a hairline on a hovered or selected row vanished - the
   edge did not fade, it ceased to exist. Nothing at rest moves: the edge steps to the strong line
   exactly while the element is filled, and the element ABOVE it steps too, because that hairline is
   the hovered row's own top edge. Moving the FILL to another step was tried and does not separate the line enough.
   The :has() rules are kept SEPARATE from the rest: an unsupported selector kills a whole rule, and
   the floor tablets are iPadOS 15, where :has() only arrived in 15.4. There the step simply does not
   happen and hover looks as it did before. */
.dp5-row:is(.is-hover, .is-selected, [aria-selected="true"]),
.dp5-row:is(.is-hover, .is-selected, [aria-selected="true"]) + .dp5-row { border-top-color: var(--dp5-line-strong); }
.dp5-table tbody tr:is(.is-selected, [aria-selected="true"]) td { border-bottom-color: var(--dp5-line-strong); }
.dp5-table tbody tr:has(+ tr:is(.is-selected, [aria-selected="true"])) td { border-bottom-color: var(--dp5-line-strong); }
.dp5-table:has(tbody tr:first-child:is(.is-selected, [aria-selected="true"])) thead th { border-bottom-color: var(--dp5-line-strong); }
@media (hover: hover) {
  a.dp5-row:hover, button.dp5-row:hover,
  a.dp5-row:hover + .dp5-row, button.dp5-row:hover + .dp5-row { border-top-color: var(--dp5-line-strong); }
  .dp5-table tbody tr:hover td { border-bottom-color: var(--dp5-line-strong); }
  .dp5-table tbody tr:has(+ tr:hover) td { border-bottom-color: var(--dp5-line-strong); }
  .dp5-table:has(tbody tr:first-child:hover) thead th { border-bottom-color: var(--dp5-line-strong); }
}

/* ============================================================ BADGES, CHIPS, DOTS */
.dp5-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: var(--dp5-r-badge); font-size: var(--dp5-t-meta); font-weight: 600; line-height: 1; white-space: nowrap; background: var(--dp5-raised-hover); color: var(--dp5-text-2); }
/* AMENDMENT 50: a status badge is the dot and the word, no fill, no padding, so the
   word lines up with the text beside it. The word is never green on a green ground: text on green is white or black. */
:is(.dp5-badge--good, .dp5-badge--warn, .dp5-badge--bad, .dp5-badge--info) { background: transparent; color: var(--dp5-text); padding: 0; }
:is(.dp5-badge--good, .dp5-badge--warn, .dp5-badge--bad, .dp5-badge--info)::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dp5-badge--good::before { background: var(--dp5-good); }
.dp5-badge--warn::before { background: var(--dp5-warn); }
.dp5-badge--bad::before { background: var(--dp5-bad); }
.dp5-badge--info::before { background: var(--dp5-info); }
.dp5-badge--pr, .dp5-pr { background: var(--dp5-primary); color: var(--dp5-primary-ink); letter-spacing: .04em; }
.dp5-badge { max-width: 100%; }
/* A50: a choice chip is a tile with the white-30% edge (Ops' sheet chips); picked is the white slab, no edge. */
.dp5-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border: 0; border-radius: var(--dp5-r-chip); background: var(--dp5-raised); box-shadow: inset 0 0 0 1px var(--dp5-line-card); color: var(--dp5-text-2); font: 500 var(--dp5-t-dense)/1 var(--dp5-font); cursor: pointer; white-space: nowrap; }
@media (hover: hover) { .dp5-chip:not(.is-on):not([aria-pressed="true"]):not([aria-selected="true"]):not(:disabled):hover { background: var(--dp5-raised-hover); color: var(--dp5-text); } }
.dp5-chip { height: var(--dp5-h-chip); }
:root.dpt-v5:not(.dpt-app) .dp5-chip { font-size: var(--dp5-t-meta); }
.dp5-chip:is(:disabled, [aria-disabled="true"]) { background: var(--dp5-raised); color: var(--dp5-text-off); cursor: default; }
/* A50.1: a SEGMENT's options (.dp5-seg > .dp5-chip) are words, not tiles: no fill, no edge, text-2 turning white.
   The picked one is the white slab (the next rule, declared after this one so it wins). A lone choice chip keeps
   Ops' tile + edge above. */
.dp5-seg > .dp5-chip { background: transparent; box-shadow: none; }
@media (hover: hover) { .dp5-seg > .dp5-chip:not(.is-on):not([aria-pressed="true"]):not([aria-selected="true"]):not(:disabled):hover { background: transparent; } }
.dp5-chip.is-on, .dp5-chip[aria-pressed="true"], .dp5-chip[aria-selected="true"] { background: var(--dp5-primary); color: var(--dp5-primary-ink); font-weight: 600; box-shadow: none; }
.dp5-seg { display: inline-flex; gap: 6px; }
.dp5-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dp5-text-3); flex: none; }
.dp5-dot--performance { background: var(--dp5-cat-performance); }
.dp5-dot--semi { background: var(--dp5-cat-semi); }
.dp5-dot--power { background: var(--dp5-cat-power); }
.dp5-dot--volleyball { background: var(--dp5-cat-volleyball); }
.dp5-dot--good { background: var(--dp5-good); } .dp5-dot--warn { background: var(--dp5-warn); } .dp5-dot--bad { background: var(--dp5-bad); }

/* ============================================================ NAVIGATION */
.dp5-lockup { display: flex; align-items: center; gap: 10px; padding: 6px 8px 16px; color: var(--dp5-text); text-decoration: none; }
.dp5-lockup svg, .dp5-lockup img { height: 22px; width: auto; display: block; }
.dp5-lockup b { font-weight: 700; letter-spacing: .02em; font-size: 15px; }
.dp5-lockup span { font-size: var(--dp5-t-micro); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dp5-text-3); margin-inline-start: 2px; }
/* AMENDMENT 41: the sidebar is its own plane (the tab-bar tone), and the active item carries a 2px
   green rail. Green on navigation is the active marker only, never a fill. */
.dp5-side { width: var(--dp5-side-w); flex: none; background: var(--dp5-tabbar); padding: 14px 10px; border-right: 1px solid var(--dp5-line-canvas); display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.dp5-side__label { font-size: var(--dp5-t-micro); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dp5-text-3); padding: 12px 10px 6px; }
.dp5-side__item { position: relative; display: flex; align-items: center; gap: 10px; min-height: 32px; padding: 0 10px; border-radius: var(--dp5-r-card); color: var(--dp5-text-2); font-size: var(--dp5-t-dense); font-weight: 500; text-decoration: none; background: none; border: 0; width: 100%; cursor: pointer; text-align: left; }
.dp5-side__item.is-on::before, .dp5-side__item[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 1px; background: var(--dp5-green); }
.dp5-side__item svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dp5-side__item.is-on, .dp5-side__item[aria-current="page"] { background: var(--dp5-raised); color: var(--dp5-text); }   /* A50: the open screen is a tile on the frame (Ops) */
@media (hover: hover) { .dp5-side__item:hover { background: var(--dp5-raised); color: var(--dp5-text); } }
/* AMENDMENT 43, the rail: an active or hovered item is a filled tile, and the rail's own right-hand line
   could blend into that fill, so the rail disappeared exactly where the eye was. The step below makes the
   line stronger at the active item: there the rail has to READ, not merely differ. */
.dp5-side:has(.dp5-side__item:is(.is-on, [aria-current="page"])) { border-right-color: var(--dp5-line-strong); }
@media (hover: hover) { .dp5-side:has(.dp5-side__item:hover) { border-right-color: var(--dp5-line-strong); } }
.dp5-side__user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; font-size: var(--dp5-t-meta); color: var(--dp5-text-2); }
.dp5-side__user b { display: block; color: var(--dp5-text); font-weight: 500; }
.dp5-side__user > * { min-width: 0; overflow-wrap: anywhere; }
.dp5-crumb { font-size: var(--dp5-t-meta); color: var(--dp5-text-3); }
.dp5-crumb a { color: var(--dp5-text-3); }
.dp5-tabbar { position: sticky; bottom: 0; z-index: 30; display: flex; justify-content: space-around; align-items: flex-start; background: var(--dp5-tabbar); border-top: 1px solid var(--dp5-line-canvas); padding: 10px 8px calc(10px + env(safe-area-inset-bottom, 0px)); }
.dp5-tab { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 56px; min-height: 44px; font-size: 10px; font-weight: 600; letter-spacing: .04em; color: var(--dp5-text-3); text-decoration: none; background: none; border: 0; cursor: pointer; }
.dp5-tab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.dp5-tab.is-on, .dp5-tab[aria-current="page"] { color: var(--dp5-green); }
.dp5-rail { width: 48px; }   /* icon rail 769-1023 on staff apps: the app hides labels at that width */
.dp5-wash { position: fixed; left: 0; right: 0; top: 0; height: 320px; pointer-events: none; z-index: 0; background: radial-gradient(120% 80% at 50% 0%, var(--dp5-wash), transparent 70%); }
.dp5-wash--static { position: absolute; }
/* AMENDMENT 41: the same wash as a background on the content column, so it needs no stacking
   context. Policy: the wash is a STATIC plane at the top of the column (it does not scroll with the
   content). A sticky header inside the column is opaque, so give it .dp5-washed too: it sits at the
   column's top at rest and when stuck, so the two slices line up. Put it on the column, not <body>. */
.dp5-washed { background-image: radial-gradient(120% 80% at 50% 0%, var(--dp5-wash), transparent 70%); background-repeat: no-repeat; background-size: 100% 320px; background-position: top center; }
/* AMENDMENT 41: optional grain. A fixed, click-through noise layer at --dp5-grain opacity over the whole
   canvas; it removes the flat-vector look and hides gradient banding. Off in print and on light roles.
   z-index 45: above canvas chrome (sticky heads, rails, tab bars), BELOW every overlay (toasts, menus,
   slide-overs, div dialogs); native <dialog> via showModal() is in the top layer regardless. Normal
   blending at low opacity on purpose: mix-blend-mode on a large fixed layer hits WebKit bug 250828
   (fixed only in Safari 18.4) and the floor tablets run iPadOS 15. Off per app with --dp5-grain: 0.
   Known limit: a light island (a print sheet shown on screen) inside a dark app is still under it. */
.dp5-grain { position: fixed; inset: 0; z-index: 45; pointer-events: none; opacity: var(--dp5-grain, .045); background-size: 160px 160px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* ============================================================ STATES */
.dp5-boot { position: fixed; inset: 0; z-index: 100; background: var(--dp5-canvas); display: flex; align-items: center; justify-content: center; }
.dp5-boot__bar { position: absolute; top: 0; left: 0; height: 2px; width: 38%; background: var(--dp5-green); border-radius: 0 2px 2px 0; animation: dp5-boot 1.2s var(--dp5-ease) infinite; }
@keyframes dp5-boot { 0% { transform: translateX(-100%); } 100% { transform: translateX(265%); } }
.dp5-boot svg, .dp5-boot img { height: 50px; width: auto; }
.dp5-skel { background: var(--dp5-skel); border-radius: var(--dp5-r-badge); position: relative; overflow: hidden; color: transparent; pointer-events: none; }
:root.dpt-v5.dpt-app .dp5-skel { border-radius: 8px; }
:root.dpt-v5.dpt-app .dp5-skel--avatar { border-radius: 50%; }
:root.dpt-v5.dpt-app .dp5-skel--row { border-radius: 0; }
.dp5-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .05), transparent); transform: translateX(-100%); animation: dp5-shimmer 1.4s linear infinite; }
@keyframes dp5-shimmer { to { transform: translateX(100%); } }
.dp5-skel--text { height: 12px; }
.dp5-skel--title { height: 16px; }
.dp5-skel--avatar { width: 36px; height: 36px; border-radius: 50%; }
.dp5-skel--row { height: var(--dp5-h-row); border-radius: 0; }
.dp5-skel-only { display: none; }
[aria-busy="true"] > .dp5-skel-only { display: block; }
.dp5-empty { text-align: center; padding: 28px 18px; }
.dp5-empty svg { width: 28px; height: 28px; stroke: var(--dp5-text-3); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dp5-empty b, .dp5-empty__title { display: block; font-size: 15px; font-weight: 600; margin: 10px 0 2px; }
.dp5-empty span, .dp5-empty__body { display: block; color: var(--dp5-text-2); font-size: var(--dp5-t-dense); margin-bottom: 14px; }
.dp5-empty--error svg { stroke: var(--dp5-bad); }
.dp5-toasts { position: fixed; z-index: 90; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
@media (min-width: 769px) { .dp5-toasts { left: auto; right: 24px; bottom: 24px; align-items: flex-end; } }
.dp5-toast { pointer-events: auto; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 12px; min-height: 44px; max-width: calc(100vw - 32px); padding-block: 8px; padding: 0 14px; border-radius: var(--dp5-r-ctl); background: var(--dp5-primary); color: var(--dp5-primary-ink); font-size: var(--dp5-t-dense); font-weight: 500; box-shadow: none; }
:root.dpt-v5:not(.dpt-app) .dp5-toast { border-radius: var(--dp5-r-ctl); }
.dp5-toast__mark { font-weight: 700; }
.dp5-toast--error .dp5-toast__mark { color: var(--dp5-bad-deep); }   /* the toast is white: the bright red is 2.7:1 there */
.dp5-toast__action { background: none; border: 0; padding: 0 6px; min-width: 24px; min-height: 24px; font: 600 var(--dp5-t-dense)/1 var(--dp5-font); color: var(--dp5-green-deep); cursor: pointer; }
.dp5-offline { font-size: var(--dp5-t-meta); color: var(--dp5-text-3); text-align: center; padding: 4px 0; }

/* ============================================================ SHEETS AND DIALOGS */
.dp5-scrim { position: fixed; inset: 0; z-index: 80; background: var(--dp5-scrim); display: flex; align-items: flex-end; justify-content: center; }
.dp5-sheet { width: 100%; max-width: 560px; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow: auto; overscroll-behavior: contain; background: var(--dp5-surface); border-radius: var(--dp5-r-sheet) var(--dp5-r-sheet) 0 0; padding: 14px 18px calc(22px + env(safe-area-inset-bottom, 0px)); box-shadow: var(--dp5-shadow-sheet); animation: dp5-sheet-in var(--dp5-t-sheet) var(--dp5-ease); }
.dp5-sheet__handle { width: 36px; height: 4px; border-radius: 2px; background: var(--dp5-raised); margin: 0 auto 14px; }
.dp5-sheet__title { font-size: var(--dp5-t-h2); font-weight: 600; margin-bottom: 4px; }
.dp5-sheet__body { color: var(--dp5-text-2); margin-bottom: 18px; }
.dp5-sheet__actions { display: flex; gap: 8px; }
:root.dpt-v5.dpt-app .dp5-sheet__actions { flex-direction: column; }
@keyframes dp5-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 769px) {
  .dp5-scrim { align-items: center; }
  .dp5-sheet { max-width: 480px; border-radius: var(--dp5-r-sheet); padding: 20px 22px 22px; animation: dp5-dialog-in var(--dp5-t-base) var(--dp5-ease); }
  .dp5-sheet__handle { display: none; }
  .dp5-sheet__actions { justify-content: flex-end; flex-direction: row; }
  :root.dpt-v5.dpt-app .dp5-sheet__actions { flex-direction: row; }
}
@keyframes dp5-dialog-in { from { opacity: 0; } to { opacity: 1; } }
dialog.dp5-dialog { background: var(--dp5-surface); color: var(--dp5-text); border: 0; border-radius: var(--dp5-r-sheet); padding: 20px 22px 22px; max-width: 480px; width: calc(100% - 32px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow: auto; box-shadow: var(--dp5-shadow-sheet); }
.dp5-sheet__actions { flex-wrap: wrap; }
dialog.dp5-dialog::backdrop { background: var(--dp5-scrim); }

/* ============================================================ OVERRIDES for v4 / v3 / v2 components that hard-code a colour */
.dpt-v5 .dp4-wash { background: radial-gradient(120% 90% at 50% 0%, var(--dp5-wash), transparent 70%); }
.dpt-v5 .dp4-bar { background: var(--dp5-raised); color: var(--dp5-text-2); }
.dpt-v5 .dp4-bar.is-on { background: var(--dp5-primary); color: var(--dp5-primary-ink); }
.dpt-v5 .dp4-btn { transition: background var(--dp5-t-fast) var(--dp5-ease); }
.dpt-v5.dpt-v5.dpt-v5 .dp4-btn:focus-visible { outline: 0; box-shadow: var(--dp5-focus); }
.dpt-v5 .dp4-btn--money { background: var(--dp5-money); color: var(--dp5-money-ink); }
.dpt-v5 .dp4-btn--money:hover { background: var(--dp5-money-hover); color: var(--dp5-money-ink); }
.dpt-v5 .dp4-btn--money:active { background: var(--dp5-money-press); color: var(--dp5-money-ink); }
.dpt-v5 .dp4-btn--ghost { background: transparent; color: var(--dp5-secondary-ink); border: 0; }   /* A50: plain text */
.dpt-v5 .dp4-btn--ghost:hover { background: transparent; color: var(--dp5-secondary-ink-hover); }
.dpt-v5 .dp4-btn:disabled { opacity: 1; background: var(--dp5-raised); color: var(--dp5-text-off); }
.dpt-v5 .dp4-pr { background: var(--dp5-primary); color: var(--dp5-primary-ink); }
.dpt-v5 .dp4-eyebrow { color: var(--dp5-green); letter-spacing: .08em; }
.dpt-v5 .dp4-card { border: 0; }
.dpt-v5 .dp4-seg { background: var(--dp5-raised); }
.dpt-v5 .dp4-seg button.is-on { background: var(--dp5-primary); color: var(--dp5-primary-ink); }
.dpt-v5.dpt-v5.dpt-v5 .dp4-seg button:focus-visible { outline: 0; box-shadow: var(--dp5-focus); }
.dpt-v5 .dp4-field { background: var(--dp5-raised); border: 0; }
.dpt-v5.dpt-v5.dpt-v5 .dp4-field:focus, .dpt-v5.dpt-v5.dpt-v5 .dp4-field:focus-visible { outline: 0; box-shadow: var(--dp5-focus); }
.dpt-v5 .dp4-tabs { border-top-color: var(--dp5-line-canvas); }
.dpt-v5 .dp4-tab { text-transform: none; letter-spacing: .04em; }
.dpt-v5 .dp4-tab.is-on, .dpt-v5 .dp4-tab[aria-current="page"] { color: var(--dp5-green); }
.dpt-v5 .dp4-link--quiet { color: var(--dp5-text-2); }
.dpt-v5 :is(.dp4-field, .dp3-field, .dp2-field)::placeholder { color: var(--dp5-placeholder); }
.dpt-v5 .dp3-btn--gold, .dpt-v5 .dp3-btn--gold:hover { background: var(--dp5-money); color: var(--dp5-money-ink); }   /* v3's gold = money */
/* A50: legacy status chips agree with .dp5-badge: the word (and the dot where the markup has one), never a tint. */
.dpt-v5 :is(.dp3-badge--ok, .dp3-badge--warn, .dp3-badge--danger, .dp3-badge--info, .dp3-scorechip--optimal, .dp3-scorechip--fair, .dp3-scorechip--low, .dp4-pill--good, .dp4-pill--watch, .dp4-pill--bad) { background: transparent; padding-inline: 0; }
.dpt-v5 .dp3-avatar--coach { box-shadow: none; }
.dpt-v5 .dp3-seg > .is-on { background: var(--dp5-primary); color: var(--dp5-primary-ink); box-shadow: none; }
.dpt-v5 :is(.dp3-badge, .dp3-scorechip) { border-radius: var(--dp5-r-badge); }
.dpt-v5 .dp3-card--hero { border-radius: var(--dp5-r-card); }
.dpt-v5 .dp2-stat.is-warn { border-inline-start-color: var(--dp5-warn); }
.dpt-v5 :is(.dp3-h1, .dp3-appbar-title, .dp3-scorechip, .dp2-btn, .dp2-nav a, .dp2-nav button) { text-transform: none; letter-spacing: normal; }
.dpt-v5 :is(.dp4-btn, .dp3-btn, .dp2-btn):is(:hover, :active) { transform: none; filter: none; text-shadow: none; }
.dpt-v5.dpt-v5.dpt-v5 :is(.dp4-btn, .dp3-btn, .dp2-btn):not(:focus-visible) { box-shadow: none; }
.dpt-v5.dpt-v5.dpt-v5 .dp4-btn--money:focus-visible { box-shadow: inset 0 0 0 1.5px var(--dp5-money-ink); }
.dpt-v5.dpt-v5.dpt-v5 .dp4-btn:not(.dp4-btn--money):not(.dp4-btn--ghost):focus-visible { box-shadow: inset 0 0 0 1.5px var(--dp5-primary-ink); }
.dpt-v5 .dp5-chart__baseline { stroke: var(--dp5-text-3); }
.dpt-v5 .dp5-chart__other { stroke: var(--dp5-chart-other); stroke-dasharray: 6 4; }

/* ============================================================ TOUCH */
@media (max-width: 768px), (pointer: coarse) {
  .dpt-v5 :is(.dp5-chip, .dp5-field-aux, .dp5-toast__action, .dp5-side__item, .dp5-btn--link, .dp5-link, .dp4-field-aux, .dp4-link, .dp4-seg button) { min-height: 44px; }
  .dpt-v5 :is(.dp5-check, .dp5-radio) { width: 28px; height: 28px; }
}

/* ============================================================ PRINT */
@media print {
  :root.dpt-v5, .dpt-v5 :is(.dpt-dark, .dpt-light) { color-scheme: light; print-color-adjust: exact; -webkit-print-color-adjust: exact; --dp5-tabbar: #FFFFFF; --dp5-skel: #EEF1F5; --dp5-text-3: #3D4757; --dp5-placeholder: #5E6978; --dp5-text-off: #A0A9B6; --dp5-text-missing: #A0A9B6; --dp5-line-strong: #7D8898; --dp5-green-hover: #007A52; --dp5-info: #1D4ED8; --dp5-wash: transparent; --dp5-shadow-sheet: none; --dp5-good-tint: #E0EFEA; --dp5-warn-tint: #F2EBE2; --dp5-bad-tint: #F9E9E8; --dp5-info-tint: #E8EDFB; --dp5-chart-fill: rgba(0, 122, 82, .14); }
  .dpt-v5 :is(.dp5-side, .dp5-tabbar, .dp4-tabs, .dp2-nav, .dp5-toasts, .dp5-scrim, .dp5-boot, .dp5-wash, .dp4-wash, .dp5-grain) { display: none !important; }
  .dpt-v5 .dp5-washed { background-image: none; }
  .dpt-v5 .dp5-card { box-shadow: none; }
  .dpt-v5 :is(.dp5-card, .dp4-card, .dp3-card, .dp5-row, tr) { break-inside: avoid; }
  .dpt-v5 :is(h1, h2, h3) { break-after: avoid; }
  .dpt-v5 .dp5-table th { position: static; }
  .dpt-v5 thead { display: table-header-group; }
  .dpt-v5 .dp5-dot { border: 1px solid var(--dp5-text); }
}
:root.dpt-v5.dpt-light .dp5-dot { border: 1px solid var(--dp5-text); }

/* ============================================================ MOTION */
@media (prefers-reduced-motion: reduce) {
  :root.dpt-v5, :root.dpt-v5::before, :root.dpt-v5::after, :root.dpt-v5 *, :root.dpt-v5 *::before, :root.dpt-v5 *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  :root.dpt-v5 .dp5-skel::after { content: none; }
}