/* Design tokens sourced from the Claude Design handoff (Patient Pipeline
   Portal.zip, 2026-07-28 — README.md "Design Tokens"). Hex values are final
   per that handoff; keep this file as the single source of truth rather than
   inlining colors in templates. --color-* names are this codebase's existing
   convention (kept to avoid a risky rename); design-doc token names (--teal,
   --amber, etc.) are noted in comments for cross-reference. */
:root {
    /* Light theme (default) */
    --color-ground: #eef1f4;           /* design --ground: app background */
    --color-surface: #f4f7f9;          /* design --surface: recessed fills, inputs, chips */
    --color-surface2: #ffffff;         /* design --surface2: cards, app bar */
    --color-ink: #17222d;              /* design --ink: primary text */
    --color-text-secondary: #3d4b58;   /* design --ink2 */
    --color-text-tertiary: #6a7783;    /* design --ink3: labels, meta, muted */
    --color-ink-muted: #6a7783;        /* alias kept for existing usage */
    --color-primary: #0c6e69;          /* design --teal: primary accent */
    --color-primary-dark: #054d4a;
    --color-primary-soft: #dcefed;     /* design --tealSoft */
    --color-link: #0c6e69;
    --color-signal: #a9660f;           /* design --amber: gates/overdue/attention ONLY */
    --color-signal-light: #e0a94e;
    --color-signal-soft: #f6e8d3;      /* design --amberSoft */
    --color-success: #237a4b;          /* design --green: complete/verified */
    --color-success-soft: #dcecdf;     /* design --greenSoft */
    --color-dormant: #9aa6b0;          /* design --dormant: dormant steps, archived */
    --color-dormant-soft: #e4e8eb;
    --color-hairline: #d3dbe2;         /* design --line */

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Monaco', 'Menlo', 'Courier New', monospace;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;

    /* Sizing (design radii: 14 outer / 13 cards / 12 list cards / 11 inner
       panels / 10 inputs / 9 buttons / 8 small chips / 20 pills) */
    --radius-sm: 0.25rem;
    --radius-md: 0.5625rem;   /* 9px */
    --radius-lg: 0.8125rem;   /* 13px */
    --radius-pill: 1.25rem;   /* 20px */

    /* Shadows — design's exact double-shadow card spec */
    --shadow-sm: 0 1px 2px rgba(23, 34, 45, .05);
    --shadow-md: 0 1px 2px rgba(23, 34, 45, .05), 0 6px 20px rgba(23, 34, 45, .06);
    --shadow-lg: 0 1px 2px rgba(23, 34, 45, .05), 0 10px 32px rgba(23, 34, 45, .1);
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Dark theme */
        --color-ground: #0c1218;
        --color-surface: #0f1820;
        --color-surface2: #131e28;
        --color-ink: #e7edf2;
        --color-text-secondary: #aeb9c4;
        --color-text-tertiary: #7c8894;
        --color-ink-muted: #7c8894;
        --color-primary: #4fc9c1;
        --color-primary-dark: #2fa39f;
        --color-primary-soft: #0f2a2b;
        --color-link: #4fc9c1;
        --color-signal: #e0a94e;
        --color-signal-light: #f2c94c;
        --color-signal-soft: #2c2214;
        --color-success: #3fa06a;
        --color-success-soft: #122a1c;
        --color-dormant: #5a6672;
        --color-dormant-soft: #1c252d;
        --color-hairline: #263441;
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow-md: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .4);
        --shadow-lg: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 36px rgba(0, 0, 0, .45);
    }
}

:root[data-theme="dark"] {
    --color-ground: #0c1218;
    --color-surface: #0f1820;
    --color-surface2: #131e28;
    --color-ink: #e7edf2;
    --color-text-secondary: #aeb9c4;
    --color-text-tertiary: #7c8894;
    --color-ink-muted: #7c8894;
    --color-primary: #4fc9c1;
    --color-primary-dark: #2fa39f;
    --color-primary-soft: #0f2a2b;
    --color-link: #4fc9c1;
    --color-signal: #e0a94e;
    --color-signal-light: #f2c94c;
    --color-signal-soft: #2c2214;
    --color-success: #3fa06a;
    --color-success-soft: #122a1c;
    --color-dormant: #5a6672;
    --color-dormant-soft: #1c252d;
    --color-hairline: #263441;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .4);
    --shadow-lg: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 36px rgba(0, 0, 0, .45);
}

:root[data-theme="light"] {
    --color-ground: #eef1f4;
    --color-surface: #f4f7f9;
    --color-surface2: #ffffff;
    --color-ink: #17222d;
    --color-text-secondary: #3d4b58;
    --color-text-tertiary: #6a7783;
    --color-ink-muted: #6a7783;
    --color-primary: #0c6e69;
    --color-primary-dark: #054d4a;
    --color-primary-soft: #dcefed;
    --color-link: #0c6e69;
    --color-signal: #a9660f;
    --color-signal-light: #e0a94e;
    --color-signal-soft: #f6e8d3;
    --color-success: #237a4b;
    --color-success-soft: #dcecdf;
    --color-dormant: #9aa6b0;
    --color-dormant-soft: #e4e8eb;
    --color-hairline: #d3dbe2;
    --shadow-sm: 0 1px 2px rgba(23, 34, 45, .05);
    --shadow-md: 0 1px 2px rgba(23, 34, 45, .05), 0 6px 20px rgba(23, 34, 45, .06);
    --shadow-lg: 0 1px 2px rgba(23, 34, 45, .05), 0 10px 32px rgba(23, 34, 45, .1);
}

/* Mono uppercase letter-spaced label — the "data, not decoration" identity
   token from the design (used for eyebrows, IDs, statuses, meta lines).
   Don't substitute the body sans font here. */
.eyebrow {
    font-family: var(--font-mono);
    font-size: 0.6875rem;      /* 11px */
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

.eyebrow-row {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    margin-bottom: 0.75rem;
}

.eyebrow-row .eyebrow-rule {
    flex: 1;
    height: 1px;
    background: var(--color-hairline);
}

.eyebrow-row .eyebrow-hint {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    color: var(--color-text-tertiary);
}

.mono-tag {
    font-family: var(--font-mono);
    font-size: 0.625rem;      /* 10px */
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

.tabular {
    font-variant-numeric: tabular-nums;
}

/* Status pill — mono/700/uppercase on a soft tone background */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--radius-pill);
    padding: 0.2rem 0.55rem;
}
.pill-success { color: var(--color-success); background: var(--color-success-soft); }
.pill-signal  { color: var(--color-signal); background: var(--color-signal-soft); }
.pill-primary { color: var(--color-primary); background: var(--color-primary-soft); }
.pill-dormant { color: var(--color-dormant); background: var(--color-dormant-soft); }

/* Accent-rail card modifiers — border-left: 3px solid <status color>.
   Default teal; use the modifier matching the card's real state. */
.card-rail { border-left: 3px solid var(--color-primary); }
.card-rail--signal { border-left-color: var(--color-signal); }
.card-rail--dormant { border-left-color: var(--color-dormant); }

/* Global resets */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: var(--font-sans);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--color-ground);
    color: var(--color-ink);
    line-height: 1.6;
    font-size: 1rem;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

/* Links */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* Buttons */
button, .btn {
    padding: 0.75rem 1.5rem;
    background-color: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
    font-size: 1rem;
}

button:hover, .btn:hover {
    background-color: var(--color-primary-dark);
    box-shadow: var(--shadow-md);
}

button:active, .btn:active {
    transform: translateY(1px);
}

button:disabled, .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Form elements */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 1rem;
    background-color: var(--color-ground);
    color: var(--color-ink);
    transition: border-color 0.2s, box-shadow 0.2s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(12, 110, 105, 0.1);
}

textarea {
    resize: vertical;
    min-height: 120px;
}

/* Alerts */
.alert {
    padding: 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
}

.alert-success {
    background-color: rgba(35, 122, 75, 0.1);
    color: var(--color-success);
    border: 1px solid var(--color-success);
}

.alert-error {
    background-color: rgba(255, 0, 0, 0.1);
    color: #c00;
    border: 1px solid #c00;
}

.alert-warning {
    background-color: rgba(169, 102, 15, 0.1);
    color: var(--color-signal);
    border: 1px solid var(--color-signal);
}

.alert-info {
    background-color: rgba(12, 110, 105, 0.1);
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
}

/* Tables */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

thead {
    background-color: rgba(0, 0, 0, 0.05);
}

th, td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--color-hairline);
}

th {
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Cards */
.card {
    background-color: var(--color-surface2);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: var(--shadow-md);
}

/* Utility classes */
.text-muted {
    color: var(--color-ink-muted);
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.text-mono {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    letter-spacing: 0.02em;
}

.text-uppercase {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mt-1 { margin-top: var(--space-md); }
.mt-2 { margin-top: var(--space-lg); }
.mt-3 { margin-top: var(--space-xl); }

.mb-1 { margin-bottom: var(--space-md); }
.mb-2 { margin-bottom: var(--space-lg); }
.mb-3 { margin-bottom: var(--space-xl); }

.p-1 { padding: var(--space-md); }
.p-2 { padding: var(--space-lg); }
.p-3 { padding: var(--space-xl); }

.flex {
    display: flex;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.gap-1 { gap: var(--space-md); }
.gap-2 { gap: var(--space-lg); }

/* ---------------------------------------------------------------------------
 * INLINE-EDIT AFFORDANCE — §84a + §88, one rule closing two reported defects.
 *
 * Cody asked for an equipment dropdown that ALREADY EXISTED and already worked
 * (`cases/detail.html:298` — a real <select> that POSTs on change). And Jamie
 * lost a control entirely in dark mode: *"I had her switch to light mode and
 * its there."*
 *
 * 🔑 ONE CAUSE. Seventeen inline-edit controls on the case screen carried
 * `border:1px solid transparent; background:transparent`. **A transparent
 * control is visible only by contrast with whatever is behind it**, so it was
 * never really styled — it was borrowing the page's own background. On the light
 * palette that reads as slightly-odd text; on the dark palette the inherited
 * text colour and the ground colour move and the control stops reading as a
 * control at all. Same root, two reports: "the app can do it and didn't offer"
 * and "the control is gone."
 *
 * `color` and `background-color` are set EXPLICITLY rather than left to inherit.
 * That is the actual dark-mode fix: a bare <input>/<select> falls back to the
 * BROWSER's default field colours (dark text on a light field), which is why the
 * control vanished against a dark page rather than merely looking wrong. Theming
 * the page without theming the form controls is what produced an invisible one.
 *
 * Defined once here rather than repaired seventeen times inline — the previous
 * shape was a pattern, and fixing the equipment row alone would have left
 * sixteen instances of the same defect on the same screen.
 * ------------------------------------------------------------------------- */
.inline-edit {
    width: 100%;
    color: var(--color-ink);
    background-color: var(--color-surface);
    border: 1px solid var(--color-hairline);
    border-radius: 0.25rem;
    padding: 0.125rem 0.25rem;
    /* Inherit the surrounding type so each field keeps the weight/size/family
     * its own row sets — this rule supplies the AFFORDANCE, not the typography. */
    font: inherit;
    font-size: inherit;
}

.inline-edit:hover {
    border-color: var(--color-primary);
}

/* Focus must be visible in both palettes — a keyboard user needs to know which
 * field they are in, and the hairline alone is too quiet against dark surfaces. */
.inline-edit:focus,
.inline-edit:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
    border-color: var(--color-primary);
}

/* A <select> gets the caret back. It was suppressed by the transparent styling,
 * and the caret is the one mark that says "there are other options" — which is
 * precisely the information Cody was missing when he asked for a dropdown that
 * was already there. */
select.inline-edit {
    appearance: auto;
    -webkit-appearance: auto;
    cursor: pointer;
}