/* dpt.v4.css: the App Direction layer (AMENDMENT 39). Loads after dpt.v3.css. OPT-IN:
   put .dpt-app on <html> together with .dpt-dark. Nothing here changes an app that does not opt in.
   Black canvas, near-black cards with a hairline, one big numeral per card with a coloured status
   word, caps micro labels, dark rows with chevrons, pill segments, a 5-tab bar.
   RULES (these override v1-v3 where they disagree, for .dpt-app surfaces only)
     1. One neutral sans (Inter) for everything, numerals included. Oswald and Roboto stay on the website.
     2. Primary button = white pill with ink text. Gold pill only when money moves. Everything else is
        a text link. No uppercase buttons. Radius: cards 22, fields 16, buttons and chips pill.
     3. Cards are --dp4-card on a --dp4-bg canvas with a 1px --dp4-line hairline. Slate is retired.
     4. One brand wash (.dp4-wash) is allowed behind a screen header. No halo or glow on any element.
     5. Text links are --dp4-link (green). On the sign-in screen only, the secondary link may be
        --dp4-text-2 (grey).
     6. The PR badge is exempt from "gold once per view". Gold BUTTONS stay once per view.
     7. Status colour always ships with a word (v3 RULE 4 still applies). No outer focus ring (AMENDMENT 36).
     8. No lift, no transform, no entrance animation on any control or card. */

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

:root.dpt-app {
  --dp4-font: 'Inter', -apple-system, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;

  /* canvas and surfaces */
  --dp4-bg: #000000;
  --dp4-card: #212226;
  --dp4-card-2: #2C2D32;
  --dp4-line: #3B3C42;
  --dp4-field: #1C1D21;
  --dp4-field-line: #34353B;
  --dp4-tabbar: #0A0A0B;

  /* text */
  --dp4-text: #F5F5F7;
  --dp4-text-2: #B8BBC2;
  --dp4-text-3: #8E9199;
  --dp4-placeholder: #8E9199;

  /* status: always with a word */
  --dp4-good: #31D07B;      --dp4-good-bg: rgba(49, 208, 123, .14);
  --dp4-watch: #F0B45A;     --dp4-watch-bg: rgba(240, 180, 90, .14);
  --dp4-bad: #FF7A70;       --dp4-bad-bg: rgba(255, 122, 112, .14);
  --dp4-link: #4ADE80;
  --dp4-link-hover: #86EFAC;

  /* brand */
  --dp4-green: #00A651;                 /* lines, the wash, sparklines */
  --dp4-gold: #FFC72C;  --dp4-gold-ink: #161208;   /* PR badge, money button */

  /* controls */
  --dp4-primary: #F5F5F7;  --dp4-primary-ink: #000000;  --dp4-primary-hover: #E4E4E8;
  --dp4-btn-h: 56px;       --dp4-btn-h-sm: 44px;
  --dp4-field-h: 66px;

  /* geometry */
  --dp4-r-card: 22px;  --dp4-r-field: 16px;  --dp4-r-pill: 999px;  --dp4-r-badge: 6px;

  /* type scale (px) */
  --dp4-t-num-hero: 44px;   /* card headline numeral, weight 500, tracking -.02em, tabular */
  --dp4-t-num-row: 28px;    /* row value */
  --dp4-t-title: 22px;      /* screen section title, weight 600 */
  --dp4-t-h1: 30px;         /* sign-in "Welcome back", weight 500 */
  --dp4-t-body: 17px;       /* row title / card label, weight 500 */
  --dp4-t-sub: 14px;        /* row sub-line, --dp4-text-2 */
  --dp4-t-micro: 11px;      /* caps eyebrow, weight 600, tracking .18em, --dp4-text-2 */

  /* v1-v3 aliases so kit components inherit the direction without a rewrite */
  --dp3-font-ui: var(--dp4-font);
  --dp3-font-display: var(--dp4-font);
  --dp3-bg: var(--dp4-bg);
  --dp3-card: var(--dp4-card);
  --dp3-card-2: var(--dp4-card-2);
  --dp3-line: var(--dp4-line);
  --dp3-line-strong: #3A3B40;
  --dp3-text: var(--dp4-text);
  --dp3-text-2: var(--dp4-text-2);
  --dp3-text-3: var(--dp4-text-3);
  --dp3-link: var(--dp4-link);
  --dp3-link-hover: var(--dp4-link-hover);
  --dp3-focus: var(--dp4-good);
  --dp3-r-lg: var(--dp4-r-card);
  --dp3-r-xl: var(--dp4-r-card);
  --dp3-r-field: var(--dp4-r-field);
  --dp3-shadow-card: none;
  --dp3-glow: none;
  --dp2-page: var(--dp4-bg);
  --dp2-card: var(--dp4-card);
  --dp2-action-glow: none;
  --dp-surface: var(--dp4-bg);
  --dp-surface-raised: var(--dp4-card);
  --dp-text: var(--dp4-text);
  --dp-text-muted: var(--dp4-text-2);
  --dp-line: var(--dp4-line);
  color-scheme: dark;
}

/* ---- components (opt-in classes) ---- */
.dpt-app body { background: var(--dp4-bg); color: var(--dp4-text); font: 17px/1.45 var(--dp4-font); -webkit-font-smoothing: antialiased; }

.dp4-card {
  background: var(--dp4-card); border: 1px solid var(--dp4-line); border-radius: var(--dp4-r-card);
  padding: 20px; box-shadow: none;
}
.dp4-eyebrow { font-size: var(--dp4-t-micro); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--dp4-text-2); }
.dp4-num { font-size: var(--dp4-t-num-hero); font-weight: 500; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.dp4-num small { font-size: 18px; font-weight: 500; color: var(--dp4-text-2); margin-left: 4px; letter-spacing: 0; }
.dp4-label { font-size: var(--dp4-t-body); color: var(--dp4-text-2); margin-top: 6px; }
.dp4-title { font-size: var(--dp4-t-title); font-weight: 600; }

.dp4-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--dp4-line); }
.dp4-row:first-child { border-top: 0; }
.dp4-row__t { font-size: var(--dp4-t-body); font-weight: 500; }
.dp4-row__s { font-size: var(--dp4-t-sub); color: var(--dp4-text-2); margin-top: 2px; }
.dp4-row__v { font-size: var(--dp4-t-num-row); font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-align: right; }
.dp4-row__v small { font-size: 13px; color: var(--dp4-text-2); margin-left: 3px; }
.dp4-row__d { font-size: 13px; font-weight: 600; text-align: right; margin-top: 2px; color: var(--dp4-good); }
.dp4-row__d.is-flat { color: var(--dp4-text-2); }
.dp4-row__d.is-watch { color: var(--dp4-watch); }
.dp4-chev { color: var(--dp4-text-3); font-size: 20px; line-height: 1; }

/* Status pill: colour + word, never colour alone. */
.dp4-pill { display: inline-block; font-size: 13px; font-weight: 600; padding: 3px 8px; border-radius: var(--dp4-r-badge); }
.dp4-pill--good { color: var(--dp4-good); background: var(--dp4-good-bg); }
.dp4-pill--watch { color: var(--dp4-watch); background: var(--dp4-watch-bg); }
.dp4-pill--bad { color: var(--dp4-bad); background: var(--dp4-bad-bg); }
.dp4-pr { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 3px 8px; border-radius: var(--dp4-r-badge); background: var(--dp4-gold); color: var(--dp4-gold-ink); }

/* Buttons: white pill primary, gold pill for money, text link for the rest. No uppercase, no ring, no lift. */
.dp4-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: var(--dp4-btn-h); padding: 0 24px; border: 0; border-radius: var(--dp4-r-pill);
  background: var(--dp4-primary); color: var(--dp4-primary-ink);
  font: 600 18px/1 var(--dp4-font); cursor: pointer; text-decoration: none; transform: none; box-shadow: none;
}
.dp4-btn:hover { background: var(--dp4-primary-hover); color: var(--dp4-primary-ink); text-decoration: none; }
.dp4-btn:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--dp4-primary-ink); }
.dp4-btn--money { background: var(--dp4-gold); color: var(--dp4-gold-ink); }
.dp4-btn--money:hover { background: #F2B91F; color: var(--dp4-gold-ink); }
.dp4-btn--sm { width: auto; min-height: var(--dp4-btn-h-sm); padding: 0 18px; font-size: 15px; }
.dp4-btn--ghost { background: var(--dp4-card-2); color: var(--dp4-text); border: 1px solid var(--dp4-line); }
.dp4-btn--ghost:hover { background: #1F2023; color: var(--dp4-text); }
.dp4-btn:disabled { opacity: .45; cursor: not-allowed; }
.dp4-link { background: none; border: 0; padding: 0; font: 600 15px/1.3 var(--dp4-font); color: var(--dp4-link); cursor: pointer; text-decoration: none; }
.dp4-link:hover { color: var(--dp4-link-hover); text-decoration: underline; }
.dp4-link--quiet { color: var(--dp4-text-2); font-weight: 500; }   /* sign-in secondary link only (RULE 5) */

/* Fields: dark, tall, no ring; focus = the field edge turns green (AMENDMENT 36). */
.dp4-field {
  display: block; width: 100%; min-height: var(--dp4-field-h); padding: 0 22px;
  background: var(--dp4-field); border: 1px solid var(--dp4-field-line); border-radius: var(--dp4-r-field);
  color: var(--dp4-text); font: 400 18px/1.2 var(--dp4-font); box-shadow: none;
}
.dp4-field::placeholder { color: var(--dp4-placeholder); opacity: 1; }
.dp4-field:focus, .dp4-field:focus-visible { outline: 0; border-color: var(--dp4-good); }
.dp4-field-wrap { position: relative; }
.dp4-field-wrap .dp4-field-aux { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); background: none; border: 0; padding: 0; color: var(--dp4-text-2); font: 500 16px/1 var(--dp4-font); cursor: pointer; }

/* Segmented control (D W M): pill track, ink-on-light active. */
.dp4-seg { display: inline-flex; padding: 4px; gap: 2px; background: var(--dp4-card-2); border-radius: var(--dp4-r-pill); }
.dp4-seg button { background: none; border: 0; border-radius: var(--dp4-r-pill); min-height: 36px; padding: 0 16px; color: var(--dp4-text-2); font: 600 14px/1 var(--dp4-font); cursor: pointer; }
.dp4-seg button.is-on { background: #2C2C2E; color: var(--dp4-text); }
.dp4-seg button:focus-visible { outline: 0; box-shadow: inset 0 0 0 1px var(--dp4-good); }

/* The one allowed wash: brand green behind a screen header (RULE 4). */
.dp4-wash { position: absolute; left: 0; right: 0; top: 0; height: 380px; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(0, 166, 81, .55), rgba(0, 166, 81, .08) 55%, transparent 75%); }

/* Bars: current white, others dim. No halo. */
.dp4-bars { display: flex; align-items: flex-end; justify-content: center; gap: 10px; }
.dp4-bar { width: 44px; border-radius: 8px; background: #2B2D31; display: flex; justify-content: center; align-items: flex-start; padding-top: 8px; font: 600 14px/1 var(--dp4-font); color: #D9D9DE; }
.dp4-bar.is-on { background: var(--dp4-primary); color: var(--dp4-primary-ink); box-shadow: none; }

/* 5-tab bar: icon over 10px caps label, active white. */
.dp4-tabs { display: flex; justify-content: space-around; align-items: flex-start; height: 84px; padding-top: 10px; background: var(--dp4-tabbar); border-top: 1px solid #1B1C1F; }
.dp4-tab { display: flex; flex-direction: column; align-items: center; gap: 6px; font: 600 10px/1 var(--dp4-font); letter-spacing: .08em; text-transform: uppercase; color: var(--dp4-text-3); text-decoration: none; min-width: 56px; }
.dp4-tab svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dp4-tab.is-on, .dp4-tab[aria-current="page"] { color: var(--dp4-text); }
.dp4-tab:focus-visible { outline: 0; color: var(--dp4-text); }

@media (prefers-reduced-motion: reduce) { .dpt-app * { transition: none !important; animation: none !important; } }