/* ============================================================================ jp-portal-tokens.css — Clinic Portal token + parity layer — v1.7.15 ---------------------------------------------------------------------------- Companion to jp-design-tokens.css (the Block 46.1 MOBILE system — untouched). This file does the same job for the Clinic Portal: 1 · TOKENS — canonical portal variables (mirrors the values the portal's inline styles established; new code references variables, never raw hex). 2 · SHARED COMPONENTS — jp-* utilities (card, pill, chip, btn) so features stop re-implementing the same pieces inside injected CSS strings. 3 · PARITY — dark-theme + responsive coverage for the v1.7.11–14 surfaces (Risk Engine v2 `rk2-*`, Scribe v2 `scb-*`, workflow rail / pathway `cpw-*`, unified AI views `cpv-*` / `mc-*` / `soq*`), which previously rendered light-only and desktop-first. Loaded by JetPatient_ClinicPortal_v2.html. Module-injected styles keep working unchanged; the [data-theme="dark"] rules here win on specificity (attribute + class), not load order. Docs: Docs/DESIGN_TOKENS.md. ========================================================================== */ /* ── 1 · Tokens (canonical, portal scope) ───────────────────────────────── */ :root { --navy: #0A2D6E; --navy-lt: #1a3f88; --navy-dk: #061d4a; --teal: #00C9C0; --teal-dk: #00A8A0; --teal-lt: #E0FAF9; --bg: #F7F9FD; --surface: #fff; --border: #D4DCF0; --text: #0A2D6E; --muted: #6B7A9F; --danger: #E53E3E; --warn: #F6AD55; --success: #38A169; --violet: #7C5CF7; --violet-dk:#5B21B6; /* sign-off / amendment family */ --info: #0e7490; /* LOCAL-provenance family */ --radius: 16px; --radius-sm: 10px; --shadow: 0 2px 12px rgba(10,45,110,.08); --shadow-md: 0 4px 24px rgba(10,45,110,.12); --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } [data-theme="dark"] { --bg: #0B1730; --surface: #102040; --border: rgba(255,255,255,.10); --text: #E8EEF8; --muted: #93A3C4; --teal-lt: rgba(0,201,192,.12); --shadow: 0 2px 12px rgba(0,0,0,.35); --shadow-md: 0 4px 24px rgba(0,0,0,.45); } /* ── 2 · Shared components (use these in new code) ──────────────────────── */ .jp-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; } .jp-btn { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font); font-size: 12px; font-weight: 800; border-radius: var(--radius-sm); padding: 9px 16px; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: all .15s; } .jp-btn:hover { border-color: var(--teal-dk); background: rgba(0,201,192,.06); } .jp-btn.primary { background: linear-gradient(135deg, var(--teal), var(--teal-dk)); border-color: transparent; color: #fff; } .jp-btn.primary:hover { filter: brightness(1.05); } .jp-btn:disabled { opacity: .5; cursor: not-allowed; } .jp-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: 2px 9px; border: 1px solid transparent; } .jp-pill.teal { color: var(--teal-dk); background: rgba(0,201,192,.10); border-color: rgba(0,201,192,.30); } .jp-pill.amber { color: #92400e; background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.30); } .jp-pill.violet { color: var(--violet-dk); background: rgba(124,92,247,.10); border-color: rgba(124,92,247,.35); } .jp-pill.info { color: var(--info); background: rgba(14,116,144,.08); border-color: rgba(14,116,144,.28); } .jp-pill.green { color: #166534; background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.30); } .jp-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; } /* ── 3a · Dark parity — unified AI views (cpv- · mc- · soq) ─────────────── */ [data-theme="dark"] .cpv-card, [data-theme="dark"] .cpv-ctx, [data-theme="dark"] .mc-row, [data-theme="dark"] .mc-rule, [data-theme="dark"] .soq-panel { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .cpv-card h4, [data-theme="dark"] .mc-row .t, [data-theme="dark"] .mc-rule .t, [data-theme="dark"] .soq-h, [data-theme="dark"] .soq-row .tx { color: var(--text); } [data-theme="dark"] .cpv-result { color: #B9C5DD; } [data-theme="dark"] .cpv-result .h { color: var(--text); } [data-theme="dark"] .cpv-btn { background: var(--surface); color: var(--text); border-color: var(--border); } [data-theme="dark"] .cpv-btn.primary { color: #fff; } [data-theme="dark"] .cpv-ctx select, [data-theme="dark"] .cpv-form input, [data-theme="dark"] .cpv-form select, [data-theme="dark"] .cpv-ta { background: #0d1a36; color: var(--text); border-color: var(--border); } [data-theme="dark"] .cpv-score.cpv-band-moderate { color: var(--text); } [data-theme="dark"] .mc-empty { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .soq-row { border-color: rgba(255,255,255,.06); } [data-theme="dark"] .soq-foot { background: #0d1a36; } [data-theme="dark"] .cpv-diff { background: rgba(124,92,247,.10); color: #C9D4EA; } /* ── 3b · Dark parity — Risk Engine v2 (rk2-) ───────────────────────────── */ [data-theme="dark"] .rk2-chip { background: #0d1a36; color: var(--text); border-color: var(--border); } [data-theme="dark"] .rk2-cat, [data-theme="dark"] .rk2-iv { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .rk2-cat .v, [data-theme="dark"] .rk2-iv .ttl, [data-theme="dark"] .rk2-drv .n { color: var(--text); } [data-theme="dark"] .rk2-cat .bar, [data-theme="dark"] .rk2-drv .bar { background: rgba(255,255,255,.08); } [data-theme="dark"] .rk2-iv .why { background: #0d1a36; color: #B9C5DD; } [data-theme="dark"] .rk2-prob { color: var(--muted); } [data-theme="dark"] .rk2-prob b { color: var(--text); } [data-theme="dark"] .rk2-note { color: var(--muted); border-color: var(--border); } /* ── 3c · Dark parity — Scribe v2 (scb-) ────────────────────────────────── */ [data-theme="dark"] .scb-sec, [data-theme="dark"] .scb-tlh { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .scb-h, [data-theme="dark"] .scb-tl b { color: var(--text); } [data-theme="dark"] .scb-item, [data-theme="dark"] .scb-tl, [data-theme="dark"] .scb-sum .body { color: #B9C5DD; } [data-theme="dark"] .scb-h button { background: var(--surface); color: var(--text); border-color: var(--border); } [data-theme="dark"] .scb-edit textarea { background: #0d1a36; color: var(--text); } [data-theme="dark"] .scb-tlwrap { border-color: var(--border); } [data-theme="dark"] .scb-tl.hl { background: rgba(0,201,192,.18); } [data-theme="dark"] .scb-sum { background: rgba(0,201,192,.06); } [data-theme="dark"] .scb-sum .tabs button { background: var(--surface); color: var(--muted); border-color: var(--border); } [data-theme="dark"] .scb-sum .tabs button.on { background: var(--teal); color: #06243f; } [data-theme="dark"] .scb-ref { background: rgba(14,116,144,.18); } [data-theme="dark"] .scb-meta { color: var(--muted); } /* ── 3d · Dark parity — workflow rail + pathway (cpw-) ──────────────────── */ [data-theme="dark"] .cpw-rail, [data-theme="dark"] .cpw-pw { background: var(--surface); border-color: var(--border); } [data-theme="dark"] .cpw-hd .t, [data-theme="dark"] .cpw-pw-hd .t, [data-theme="dark"] .cpw-step .l, [data-theme="dark"] .cpw-task .lbl { color: var(--text); } [data-theme="dark"] .cpw-step { background: #0d1a36; border-color: var(--border); } [data-theme="dark"] .cpw-step.done { background: var(--surface); } [data-theme="dark"] .cpw-step.idle .ic { background: rgba(255,255,255,.06); } [data-theme="dark"] .cpw-hd .who { background: rgba(0,201,192,.12); color: var(--text); } [data-theme="dark"] .cpw-pw-bar { background: rgba(255,255,255,.08); } [data-theme="dark"] .cpw-task { border-color: rgba(255,255,255,.06); } [data-theme="dark"] .cpw-task .tick { background: #0d1a36; border-color: var(--border); } [data-theme="dark"] .cpw-task.done .lbl { color: var(--muted); } [data-theme="dark"] .cpw-foot, [data-theme="dark"] .cpw-hd .sub { color: var(--muted); } [data-theme="dark"] .cpw-accept .info { color: #B9C5DD; } /* ── 3e · Dark parity — workbench result panels ─────────────────────────── */ [data-theme="dark"] .jp-cp-aiwb-result { background: #0d1a36; border-color: var(--border); color: #B9C5DD; } [data-theme="dark"] .jp-cp-aiwb-h, [data-theme="dark"] .jp-cp-aiwb-htab-title { color: var(--text); } [data-theme="dark"] .jp-cp-aiwb-htab { background: #0d1a36; border-color: var(--border); color: var(--text); } /* ── 4 · Responsive parity (≤ 680px) ────────────────────────────────────── */ @media (max-width: 680px) { .cpw-steps { grid-template-columns: repeat(2, 1fr); } .cpw-step .arrow { display: none; } .cpw-next { flex-direction: column; align-items: flex-start; } .cpw-next button { margin-left: 0; width: 100%; } .rk2-iv { grid-template-columns: 34px 1fr; } .rk2-iv .acts { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; min-width: 0; } .rk2-drv .n { flex-basis: 130px; } .rk2-head { gap: 10px; } .rk2-cats { grid-template-columns: repeat(2, 1fr); } .scb-h button { font-size: 9px; padding: 2px 7px; } .scb-tlist { max-height: 170px; } .cpv-wrap { max-width: 100%; } .cpv-form { grid-template-columns: 1fr; } }