/* XP-STYLE-OC-1 — the alternate look ("Try the new look (preview)"). OFF BY DEFAULT.
   Every rule here sits under html[data-style="base"], set before paint by App.razor from
   the per-user ui:style setting (oc-style cookie) or a ?style=base demo link. Without the
   attribute nothing in this file matches, so today's design renders unchanged (the
   Tools/StyleBaseline captures prove it). Rationale and the designer-call items each
   rule answers: C:\Claude\OpComm\design\STYLE.md (DC-n) and STYLE-REFERENCE.md.
   Tokens only redefine values theme.css already names; light and dark are two values of
   the same token, never a per-component dark rule. */

/* The account-menu item itself (admins only). Not gated: it is the switch. */
.style-preview-row { display: flex; align-items: center; gap: 8px; }
.style-preview-check { margin-left: auto; visibility: hidden; }
html[data-style="base"] .style-preview-check { visibility: visible; }

/* Screen only: print keeps today's colours (STYLE.md §8.6). */
@media screen {
  /* ── 1. Roles (STYLE-BASE §11) mapped onto today's --oc-* tokens ─────────────── */
  html[data-style="base"] {
    /* New role tokens the base asks for; today has no equivalent. */
    --oc-focus: #2563eb;                 /* DC-3: one ring */
    --oc-line-strong: #7a8496;           /* DC-5: control edges, 3.8:1 on white */
    --oc-radius-control: 6px;            /* DC-6 */
    --oc-radius-card: 10px;
    --oc-shadow-1: 0 2px 10px rgba(15, 23, 42, 0.10);
    --oc-shadow-2: 0 12px 40px rgba(15, 23, 42, 0.18);
    --oc-font: "Gilroy", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;   /* DC-1: brand face kept */
    --oc-mono: Consolas, "IBM Plex Mono", ui-monospace, monospace;

    /* Retuned values (light). Each was below AA today; see STYLE.md §4. */
    --oc-text-muted: #5f6b7a;            /* DC-4: 2.65:1 -> 5.43:1 */
    --oc-card-sub: #5f6b7a;
    --oc-chrome-muted: #5f6b7a;
    --oc-input-border: var(--oc-line-strong);
    --oc-menu-border: var(--oc-line-strong);
    --oc-link: var(--oc-accent);         /* DC-2: one accent; #007bff was 3.98:1 */
    --oc-link-alt: var(--oc-accent);

    /* Status chips (DC-7): soft tint + strong text, every pair >= 4.5:1. The six hues stay
       distinct because each one carries clinical meaning (STYLE.md §8). */
    --oc-chip-pending-bg: #EEF1F5;   --oc-chip-pending-fg: #4A5463;   --oc-chip-pending-bd: #A3ADBB;
    --oc-chip-progress-bg: #FFF4CC;  --oc-chip-progress-fg: #7A5300;  --oc-chip-progress-bd: #E0B000;
    --oc-chip-completed-bg: #E3F5E1; --oc-chip-completed-fg: #2C6B31; --oc-chip-completed-bd: #52B358;
    --oc-chip-cancelled-bg: #FCE4E4; --oc-chip-cancelled-fg: #A30000; --oc-chip-cancelled-bd: #E56D6D;
    --oc-chip-discharged-bg: #E3EDFD; --oc-chip-discharged-fg: #1A4FA8; --oc-chip-discharged-bd: #4184f1;
    --oc-chip-noshow-bg: #FFEBD6;    --oc-chip-noshow-fg: #8A4500;    --oc-chip-noshow-bd: #E08A2E;
  }

  html[data-style="base"][data-theme="dark"] {
    --oc-focus: #60a5fa;
    --oc-line-strong: #64748b;           /* 3.75:1 on --oc-page-bg */
    --oc-shadow-1: 0 2px 10px rgba(0, 0, 0, 0.45);
    --oc-shadow-2: 0 12px 40px rgba(0, 0, 0, 0.55);
    --oc-text-muted: #94a3b8;
    --oc-card-sub: #94a3b8;
    --oc-chrome-muted: #94a3b8;
    --oc-link: #60a5fa;
    --oc-link-alt: #60a5fa;
    /* Dark chips already pass; they keep today's values. */
    --oc-chip-pending-bg: #334155;   --oc-chip-pending-fg: #e2e8f0;   --oc-chip-pending-bd: #64748b;
    --oc-chip-progress-bg: #854d0e;  --oc-chip-progress-fg: #fef3c7;  --oc-chip-progress-bd: #d97706;
    --oc-chip-completed-bg: #14532d; --oc-chip-completed-fg: #bbf7d0; --oc-chip-completed-bd: #22c55e;
    --oc-chip-cancelled-bg: #7f1d1d; --oc-chip-cancelled-fg: #fecaca; --oc-chip-cancelled-bd: #ef4444;
    --oc-chip-discharged-bg: #1e40af; --oc-chip-discharged-fg: #dbeafe; --oc-chip-discharged-bd: #60a5fa;
    --oc-chip-noshow-bg: #9a3412;    --oc-chip-noshow-fg: #ffedd5;    --oc-chip-noshow-bd: #f97316;
  }

  /* ── 2. Type (DC-1, DC-8) ─────────────────────────────────────────────────────── */
  /* DC-10 (line-height 1.45) is NOT applied: it adds row height to dense clinical lists (STYLE.md §8.4). */
  /* Stacked numbers line up. */
  html[data-style="base"] :is(table, .e-grid, [class*="clock"], [class*="timer"], [class*="count"], [class*="badge"]) {
    font-variant-numeric: tabular-nums;
  }

  /* ── 3. One focus ring (DC-3; STYLE-BASE §7). Today 795 rules remove the outline. ── */
  html[data-style="base"] :focus-visible {
    outline: 2px solid var(--oc-focus) !important;
    outline-offset: 2px !important;
  }
  html[data-style="base"] :is([role="tab"], [role="menuitem"], [role="menuitemradio"], [role="menuitemcheckbox"]):focus-visible {
    outline-offset: -2px !important;
  }

  /* Links: only the --oc-link token changes; nav and chrome anchors keep their own colours. */

  /* ── 9. Motion (STYLE-BASE §9) ───────────────────────────────────────────────── */
}

@media screen and (prefers-reduced-motion: reduce) {
  html[data-style="base"] *, html[data-style="base"] *::before, html[data-style="base"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}