/* ══════════════════════════════════════════════════════════
   Remedi — Shared Design Tokens
   Added 2026-07-07 as step zero of the A/B/D dashboard build.

   This file did not exist before today — every existing page
   (base.html, dashboard.html, denial.html, etc.) has its palette
   hand-copied inline in its own <style> block. Those existing,
   already-shipped pages are NOT being touched or migrated here —
   this is purely additive, zero risk to anything live.

   What IS true: the values below are extracted 1:1 from what's
   already in production (base.html + templates), so this is
   documentation of the real de facto brand, not a new palette.
   The three new dashboard views (Option A/B/D) should link this
   file and use these variables instead of hand-copying hex again,
   so they visually read as the same tool and any future color
   change happens in one place.

   Standing direction (memory: feedback_remedi_design_direction):
   navy/charcoal/green is the deliberate look. The sully.ai
   light/airy direction is a future preference, not retroactive —
   do not swap this palette out without Atul's explicit go-ahead.
   ══════════════════════════════════════════════════════════ */

:root {
  /* ── Primary brand ──────────────────────────────────────── */
  --remedi-navy: #1a1a2e;          /* header bar, primary buttons, focus rings */
  --remedi-navy-hover: #2d2d4e;    /* primary button hover state */
  --remedi-green: #2ecc71;         /* accent — active nav underline, success highlights, CTAs */

  /* ── Surfaces ────────────────────────────────────────────── */
  --remedi-bg: #f4f5f7;            /* page background — moved from #f0f2f5 in Phase 1
                                      (2026-08-18) to the reskin value. The four templates that
                                      already referenced this token shift with it, which is the
                                      intended unification, not a side effect. */
  --remedi-surface: #ffffff;       /* card background */
  --remedi-surface-alt: #f7f8fa;   /* secondary/recessed card background */

  /* ── Text / neutrals (light → dark) ─────────────────────── */
  --remedi-gray-100: #eeeeee;
  --remedi-gray-200: #e0e0e0;
  --remedi-gray-300: #ccc;
  --remedi-gray-400: #bbb;
  --remedi-gray-500: #999;
  --remedi-gray-600: #888;
  --remedi-gray-700: #666;
  --remedi-gray-800: #444;
  --remedi-text: #222;
  --remedi-text-strong: #1a1a2e;

  /* ── Semantic — info (blue) ──────────────────────────────── */
  --remedi-info-bg: #e3f2fd;
  --remedi-info-border: #b3d4f7;
  --remedi-info-text: #0d47a1;

  /* ── Semantic — error / privacy (red) ────────────────────── */
  --remedi-error-bg: #fff3f3;
  --remedi-error-border: #ffb3b3;
  --remedi-error-text: #c0392b;

  /* ── Semantic — success / won (green) ────────────────────── */
  --remedi-success-bg: #e8f5e9;
  --remedi-success-bg-hover: #c8e6c9;
  --remedi-success-text: #1b5e20;

  /* ── Semantic — redraft / secondary action (pink) ────────── */
  --remedi-redraft-bg: #fce4ec;
  --remedi-redraft-bg-hover: #f8bbd9;
  --remedi-redraft-text: #880e4f;

  /* ── Semantic — warning (amber) ──────────────────────────── */
  --remedi-warn-bg: #fffde7;
  --remedi-warn-border: #fff176;
  --remedi-warn-text: #795548;

  /* ── Typography ──────────────────────────────────────────── */
  --remedi-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --remedi-font-brand: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* login/about/mfa pages */
  --remedi-font-letter: 'Georgia', serif; /* deliberate — the letter-output box, reads like a real letter */
  --remedi-font-mono: ui-monospace, Menlo, monospace;

  /* ── Shape / elevation ───────────────────────────────────── */
  --remedi-radius-sm: 6px;
  --remedi-radius-md: 8px;
  --remedi-radius-lg: 12px;
  --remedi-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --remedi-shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.25);

  /* ── Spacing scale (for new builds — existing pages use ad hoc px) ── */
  --remedi-space-xs: 6px;
  --remedi-space-sm: 10px;
  --remedi-space-md: 16px;
  --remedi-space-lg: 24px;
  --remedi-space-xl: 32px;

  /* ══════════════════════════════════════════════════════════
     RESKIN TOKENS — Phase 0, added 2026-08-18
     per REMEDI_UI_RESKIN_SPEC_2026-08-18.md (Comp B "Workbench").

     PURELY ADDITIVE. Every variable above keeps its value, because
     four templates already reference them and Phase 0's acceptance
     is "every page renders exactly as before".

     ONE COLLISION, and how it was handled: the spec sets
     --remedi-bg to #f4f5f7 while it was declared above as #f0f2f5.
     Phase 0 left it alone (repainting the four templates that
     reference it is a visible change, which Phase 0 is defined not
     to make); PHASE 1 THEN MOVED IT, and it now reads #f4f5f7 above.
     There is exactly one page-background token, not two.
     --remedi-surface collided too but at an identical #ffffff,
     so there was nothing to resolve.
     ══════════════════════════════════════════════════════════ */

  /* ── Brand — taken from login.html, so the app matches its own front door ── */
  --remedi-brand: #1A365D;         /* app header bar, primary buttons */
  --remedi-brand-hover: #2C5282;   /* primary button hover */
  --remedi-brand-accent: #4A90D9;  /* active-nav underline, focus ring, hover borders */
  --remedi-accent-soft: #e8f1fb;   /* tint OF the accent (badge/pill backgrounds) — same hue,
                                      not a second accent; do-not #4 stays satisfied */
  /* --remedi-navy stays defined above (existing pages reference it) but is no longer
     the header color anywhere once Phase 1 lands. */

  /* ── Ink & surface ──────────────────────────────────────── */
  --remedi-ink: #16161f;           /* primary text, all large numbers */
  --remedi-ink-2: #4a4a57;         /* body copy */
  --remedi-muted: #7c7c8a;         /* labels, captions, secondary meta */
  --remedi-placeholder: var(--remedi-gray-500);  /* placeholder text — see the rule below */
  --remedi-line: #e4e5ea;          /* card borders */
  --remedi-line-2: #eceef2;        /* internal dividers */
  /* (--remedi-bg-new was a Phase 0 placeholder; Phase 1 moved --remedi-bg itself
     to #f4f5f7 above, so there is exactly one page-background token.) */

  /* ── Status — RESERVED, never decorative ────────────────── */
  /* --remedi-green-text is the ONLY green allowed on text. #2ecc71 on white measures
     2.1:1 and fails WCAG (needs 4.5:1); #1b5e20 measures 7.9:1. The bright green is
     demoted to a 7px dot that must always be paired with a text label. */
  --remedi-green-text: #1b5e20;
  --remedi-green-dot: #2ecc71;     /* 7px status dot only — never text, never color-alone */
  --remedi-amber-text: #8a6100;    /* "Learning" state */

  /* ── Shape & elevation — one elevation, not three ───────── */
  --remedi-radius-row: 10px;       /* cards / rows */
  --remedi-radius-container: 14px; /* large containers */
  --remedi-shadow: 0 1px 2px rgba(16, 18, 32, .06), 0 1px 3px rgba(16, 18, 32, .04);

  /* ── Type scale — 30/22/16/14.5/13/12/11.5 ──────────────── */
  --remedi-fs-hero: 30px;          /* stat-strip lead value */
  --remedi-fs-xl: 22px;
  --remedi-fs-lg: 16px;
  --remedi-fs-md: 14.5px;          /* tool-row title */
  --remedi-fs-base: 13px;
  --remedi-fs-sm: 12px;            /* labels, sub-captions */
  --remedi-fs-label: 11.5px;       /* section label: 800 weight, uppercase, .9px tracking */

  /* ── Spacing — multiples of 4 ───────────────────────────── */
  --remedi-gap-xs: 6px;
  --remedi-gap-sm: 10px;
  --remedi-gap-md: 14px;
  --remedi-gap-lg: 22px;
  --remedi-gap-xl: 30px;
}

/* Section label — the whole hierarchy device, per the spec's component list. */
.rd-section-label {
  font-size: var(--remedi-fs-label);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .9px;
  color: var(--remedi-muted);
}

/* ══════════════════════════════════════════════════════════
   Shared primitives — optional, additive. Existing pages don't
   use these classes and don't need to. New dashboard templates
   (Option A/B/D) can use them directly to avoid re-deriving the
   same card/button look three times.
   ══════════════════════════════════════════════════════════ */

.rd-card {
  background: var(--remedi-surface);
  border-radius: var(--remedi-radius-lg);
  box-shadow: var(--remedi-shadow-card);
  padding: 22px;
}

.rd-card-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--remedi-gray-600);
  margin-bottom: 14px;
}

.rd-btn-primary {
  background: var(--remedi-navy);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  border: none;
  border-radius: var(--remedi-radius-md);
  padding: 13px;
  cursor: pointer;
  letter-spacing: 0.2px;
  transition: background 0.15s;
}
.rd-btn-primary:hover { background: var(--remedi-navy-hover); }
.rd-btn-primary:disabled { background: var(--remedi-gray-500); cursor: not-allowed; }

.rd-badge-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.rd-badge-dot.won { background: var(--remedi-green); }
.rd-badge-dot.pending { background: var(--remedi-info-text); }
.rd-badge-dot.warn { background: #f59e0b; }
.rd-badge-dot.error { background: var(--remedi-error-text); }

/* ══════════════════════════════════════════════════════════════════════════════
   COMP B — "WORKBENCH" DASHBOARD COMPONENTS            (reskin Phase 3, 2026-08-24)
   Per REMEDI_UI_RESKIN_SPEC_2026-08-18.md. Shared by dashboard.html,
   dashboard_biller.html and practice_dashboard.html so the three home screens
   read as one product — that is the whole acceptance criterion for the effort.

   These live HERE, not in a template <style> block, for two reasons: theme.css is
   the single source of truth (spec, "Why this is a system change"), and
   tests/test_design_drift.py counts hex literals in templates/ and may only go
   down. Values below come from Comp B's own CSS, with two deliberate departures:

     - Hover border is --remedi-brand-accent, not Comp B's #c6c8d0. The spec's Tool
       row component says "Hover: border -> --remedi-brand-accent", and do-not #4
       says one accent. The comp predates that rule.
     - No .r-step / number chip. Atul's revision: no step numbers. Workflow order is
       carried by the group label (spec, "Group label instead of sequence").

   Also NOT rendered, per the spec's icon/zing decision: icon, icon_bg, zing. Those
   keys stay in tool_registry (the validator and demo.html read them) — the markup
   simply stops drawing them. Do not delete the keys.
   ══════════════════════════════════════════════════════════════════════════════ */

:root{
  /* Chevron grey. Comp B used a bare #c3c5cd; it is a token so a template never has to. */
  --remedi-chevron: #c3c5cd;
}

.rk-wrap{ max-width: 1200px; margin: 0 auto; padding: 28px 24px 60px; }

/* Header row — greeting left, one quiet link right. */
.rk-head{ display:flex; align-items:baseline; justify-content:space-between;
          gap:12px; flex-wrap:wrap; margin-bottom:26px; }
.rk-greet{ font-size:22px; font-weight:700; color:var(--remedi-ink); letter-spacing:-.3px; }
.rk-greet span{ color:var(--remedi-ink); }
.rk-sub{ font-size:13px; color:var(--remedi-muted); margin-top:4px; }
.rk-link{ font-size:13px; font-weight:600; color:var(--remedi-ink-2);
          text-decoration:none; white-space:nowrap; }
.rk-link:hover{ color:var(--remedi-brand); text-decoration:underline; }

/* Section label — 11.5px uppercase muted. The entire hierarchy device. */
.rk-sec{ font-size:11.5px; font-weight:800; letter-spacing:.9px; text-transform:uppercase;
         color:var(--remedi-muted); margin:0 0 14px; }
.rk-sec + .rk-sec{ margin-top:22px; }

/* Tool row — title + one-line description + chevron. No icon chip, no emoji,
   no italic tagline, no numbering (spec, "The components"). */
.rk-tools{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:22px; }
.rk-tools--single{ grid-template-columns:1fr; }
@media (max-width:820px){ .rk-tools{ grid-template-columns:1fr; } }
.rk-tool{ display:flex; align-items:center; gap:15px; background:var(--remedi-surface);
          border:1px solid var(--remedi-line); border-radius:var(--remedi-radius-row);
          padding:15px 17px; text-decoration:none; transition:border-color .14s, box-shadow .14s; }
.rk-tool:hover{ border-color:var(--remedi-brand-accent); box-shadow:var(--remedi-shadow); }
.rk-tool:focus-visible{ outline:2px solid var(--remedi-brand-accent); outline-offset:2px; }
.rk-tool-b{ min-width:0; }
.rk-tool-t{ display:block; font-size:14.5px; font-weight:700; color:var(--remedi-ink); letter-spacing:-.1px; }

/* "New" pill — Comp B's .r-newtag geometry, in the BRAND family rather than Comp B's green.
   Green is reserved for money/status (spec do-not #6) and there is exactly one accent
   (do-not #4); the comp predates both. The exact token is --remedi-brand-hover and the
   reason is stated on the declaration below — do NOT "restore" --remedi-brand-accent here:
   it measures 2.93:1 on this tint and fails WCAG. An earlier version of this header said
   "in the brand accent", which contradicted the declaration and pointed the next editor
   straight back at the failing colour. Deliberately quiet: a small uppercase label, not a
   starburst — it sits beside a tool title a biller reads dozens of times a week, and a badge
   that shouts stops being readable as information. Visibility is a DATE (registry
   `new_until`), so this retires itself without anyone remembering to remove it. */
.rk-new{
  display:inline-block; margin-left:8px; vertical-align:2px;
  font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  /* --remedi-brand-hover, NOT --remedi-brand-accent. The accent (#4A90D9) on this tint
     measures 2.93:1 and FAILS WCAG — this is 10px/800, which is normal-size text (the
     large-text exemption starts around 18.66px bold), so it needs 4.5:1. That is the same
     rule the Status block 160 lines above applies when it demotes #2ecc71 at 2.1:1, and I
     broke it here by recolouring Comp B's pill without measuring: the comp's green on its
     own tint was 6.92:1, i.e. COMPLIANT, and the recolour traded that away. #2C5282 on the
     same tint is 6.98:1 — still the brand family, so do-not #4 (one accent) holds. */
  color:var(--remedi-brand-hover); background:var(--remedi-accent-soft);
  border-radius:4px; padding:2px 6px;
}
.rk-tool-d{ display:block; font-size:12.5px; color:var(--remedi-muted); margin-top:3px; line-height:1.45; }
.rk-arrow{ margin-left:auto; color:var(--remedi-chevron); font-size:15px; flex:none; }

/* Stat strip — ONE bordered container, cells divided by --remedi-line-2.
   Not four floating cards (spec, "The components"). */
.rk-strip{ display:flex; gap:0; background:var(--remedi-surface);
           border:1px solid var(--remedi-line); border-radius:var(--remedi-radius-container);
           overflow:hidden; margin-bottom:30px; }
.rk-cell{ flex:1; padding:18px 22px; border-right:1px solid var(--remedi-line-2); min-width:140px; }
.rk-cell:last-child{ border-right:none; }
.rk-cell-l{ font-size:11.5px; font-weight:600; color:var(--remedi-muted);
            margin-bottom:8px; letter-spacing:.2px; }
.rk-cell-v{ font-size:30px; font-weight:700; letter-spacing:-.7px;
            color:var(--remedi-ink); line-height:1; }
.rk-cell-v.lead{ font-size:40px; }
.rk-cell-s{ font-size:12px; color:var(--remedi-muted); margin-top:7px; }
.rk-cell-s b{ color:var(--remedi-green-text); font-weight:700; }
@media (max-width:820px){
  .rk-strip{ flex-wrap:wrap; }
  .rk-cell{ border-bottom:1px solid var(--remedi-line-2); min-width:50%; }
}

/* Insight card — status dot + label + meta, then the text. No left accent stripe;
   the dot carries the state, and never travels without its text label (do-not #5). */
.rk-insight{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:820px){ .rk-insight{ grid-template-columns:1fr; } }
.rk-ins{ background:var(--remedi-surface); border:1px solid var(--remedi-line);
         border-radius:var(--remedi-radius-row); padding:13px 16px; }
.rk-ins-m{ display:flex; align-items:center; gap:10px; flex-wrap:wrap;
           font-size:11px; color:var(--remedi-muted); margin-bottom:7px; }
.rk-mark{ display:inline-flex; align-items:center; gap:5px; font-size:11px;
          font-weight:700; color:var(--remedi-green-text); }
.rk-mark.learning{ color:var(--remedi-amber-text); }
.rk-mark i{ width:7px; height:7px; border-radius:50%; background:currentColor;
            display:inline-block; flex:none; }
.rk-ins-t{ font-size:13px; color:var(--remedi-ink-2); line-height:1.5; }
.rk-empty{ font-size:13px; color:var(--remedi-muted); padding:14px 2px; }


/* ══════════════════════════════════════════════════════════════════════════════
   PLACEHOLDER TEXT                                            (2026-08-26)
   The two pre-submission tools' placeholder is a stack of valid CPT codes on
   separate lines, and with no colour set it inherits the browser default — dark
   enough that a biller reads it as an already-filled box.

   ⚠️ THIS TOKEN KNOWINGLY BREACHES THE WCAG BAR THIS FILE SETS 200 LINES ABOVE,
   and that is a product decision awaiting Atul, not an oversight. Line 135 states
   the house rule for text: "fails WCAG (needs 4.5:1)". #999 is 2.85:1 on white.
   It is text. It does not meet the bar. Stated here because the previous version
   of this comment argued the value purely against browser defaults and never
   mentioned WCAG at all — a silent breach of a documented rule.

   THE TWO GOALS ARE IN DIRECT CONFLICT — the numbers, measured:
       #767676   4.54:1 vs white (AA PASS)   3.50:1 vs the field's #222 text
       #999      2.85:1 vs white (AA FAIL)   5.58:1 vs the field's #222 text
   A placeholder light enough to be obviously NOT entered data is necessarily too
   light to pass AA against the background, and vice versa. No colour satisfies
   both. #999 currently favours "not mistaken for data", because the failure it
   guards is a biller submitting a claim believing codes were entered.

   THE FIX THAT AVOIDS THE TRADE IS NOT A COLOUR. Example data does not belong in
   a placeholder — it is ambiguous with entered content by construction, and it
   vanishes on focus exactly when it is most useful. Moving the CPT stack into the
   hint line these fields already have ("— one per line, or comma-separated") and
   leaving a short placeholder would let this token go back above 4.5:1 with
   nothing lost. Flagged for Atul; not done unilaterally.

   Prior history, so the value is not re-litigated from scratch: it shipped first
   as --remedi-muted #7c7c8a (4.11:1), which was measured only in isolation and
   turned out to be barely lighter than Chrome's own default (#757575, 4.61:1) and
   DARKER than WebKit's (#A9A9A9, 2.35:1) — i.e. near a no-op on one engine and
   actively worse on the other. Note that took Chrome from AA-passing to failing;
   no engine's default passes AA on WebKit either way.

   `opacity: 1` is not redundant: Firefox applies a reduced default opacity to
   placeholders and would render this lighter than the token specifies.

   SCOPE. This reaches every template that links theme.css (i.e. extends
   base.html). Standalone templates that do not: login.html (keeps its own
   #a0aec0), forgot_password, reset_password, mfa_verify — plus about.html,
   roi.html, resolve_result.html and the _splash.html partial, which have no
   placeholder attributes today but would also opt out silently if one were added.
   The visible seam is mfa_setup.html (extends base, picks this up) against
   mfa_verify.html (does not) — the same placeholder="123456" box in two greys on
   screens a user hits back-to-back. Closing it means linking theme.css from those
   files (spec Phase 6), not widening this rule.

   A SECOND SEAM, inside single pages: base.html injects
   `.rdx-ta::placeholder{color:#bbb}` (1.92:1) for each field passed to
   attachRedactors, which is TEXTAREAS ONLY and only those listed. So on
   denial.html the three redacted textareas render #bbb while `estimatedValue`
   (an input) and `nuanceText` (an unlisted textarea) take this token — two
   placeholder greys in one form. Same on medical_necessity and prior_auth. That
   is more visible than the MFA seam and is not fixed here.

   input[type="date"] is excluded by selector. `::placeholder` never matches
   ::-webkit-datetime-edit*, and a date input has no placeholder, so the exclusion
   changes NO rendering — it documents that this rule is not the way to reach the
   mm/dd/yyyy, and guards against someone widening it into those pseudo-elements,
   which grey out the real value once a date is picked. Its one real effect is
   specificity: input:not([type="date"])::placeholder is (0,1,2) against
   textarea::placeholder at (0,0,2), so a future single-class ::placeholder
   override (0,1,1) loses to the input branch but beats the textarea branch.

   TO CHANGE THE COLOUR, edit --remedi-placeholder on its own line — NOT
   --remedi-gray-500, which it aliases and which also paints disabled primary
   buttons and thirteen text rules across cockpit.html and insights.html.
   ══════════════════════════════════════════════════════════════════════════════ */
input:not([type="date"])::placeholder,
textarea::placeholder{
  color: var(--remedi-placeholder);
  opacity: 1;
}

/* ── Application footer (2026-09-15) — the two public legal pages, on every logged-in page ── */
.app-footer {
  margin: 40px 32px 24px;
  padding-top: 16px;
  border-top: 1px solid var(--remedi-gray-200);
  text-align: center;
  font-size: 12px;
  color: var(--remedi-gray-500);
}
.app-footer a { color: inherit; text-decoration: none; }
.app-footer a:hover { text-decoration: underline; }