/* ========================================
   HANK_MEDICALNOTES — customer web chrome
   Canonical Hank cyan-dark theme (milestone M9 web shell)

   The :root design tokens below are the canonical Hank cyan palette (the same
   --accent-cyan #00d9ff the console + every sibling service share, ported
   verbatim from hank-arse's adapted app.css) so every Hank customer surface
   shares one set of colors, type, and spacing. This is a BRAND CONTRACT: the
   computed --accent-cyan here MUST equal the console source token. The chrome
   that follows (.app-header / .brand / .release-badge / .meta / .app-footer +
   the anonymous-landing, credit-bar, and rate-banner foundations) is built on
   those tokens. The signed-in upload/playground customer app (M10) drops its
   own views into {% block content %} on top of this same token set.
   ======================================== */

:root {
    /* Core palette */
    --bg-primary: #0a0e14;
    --bg-secondary: #0f1419;
    --bg-elevated: #151b23;
    --bg-card: #1a222d;

    /* Text colors — 3-tier hierarchy. secondary/muted are brightened from the
       GitHub-dark defaults (which fell below WCAG-AA 4.5:1 on cards) to clear AA on
       the card surfaces for small informational text while staying visibly dimmer
       than primary. */
    --text-primary: #e6edf3;
    --text-secondary: #a4adb8;
    --text-muted: #828c98;

    /* Accent colors */
    --accent-cyan: #00d9ff;
    --accent-cyan-dim: rgba(0, 217, 255, 0.15);
    --accent-cyan-glow: rgba(0, 217, 255, 0.4);
    --accent-success: #00f5a0;
    --accent-success-dim: rgba(0, 245, 160, 0.15);
    --accent-error: #ff6b6b;
    --accent-error-dim: rgba(255, 107, 107, 0.15);
    --accent-warning: #ffd93d;
    --accent-warning-dim: rgba(255, 217, 61, 0.15);

    /* Borders */
    --border-subtle: #21262d;
    --border-default: #30363d;
    --border-emphasis: #484f58;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-glow-cyan: 0 0 20px rgba(0, 217, 255, 0.3);
    --shadow-glow-success: 0 0 20px rgba(0, 245, 160, 0.3);
    --shadow-glow-error: 0 0 20px rgba(255, 107, 107, 0.3);

    /* Typography — system/local stacks only; no runtime font CDN dependency. */
    --font-mono: 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;
    --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
}

/* ========================================
   BASE RESET + BODY
   Full-bleed: body carries NO padding so the header + footer span edge-to-edge.
   Only the content area (.web-content) is inset.
   ======================================== */
*, *::before, *::after { box-sizing: border-box; }

/* The `hidden` attribute is the app's single source of truth for show/hide (app.js
   toggles `el.hidden`). Author display rules (`.pill { display: flex }`, etc.) out-specify
   the UA `[hidden] { display: none }`, which would otherwise leak a hidden element (e.g.
   the empty CREDITS pill on the anonymous shell). Force it closed app-wide. */
[hidden] { display: none !important; }

body {
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Subtle film-grain overlay — part of the canonical Hank cyan-dark look. */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    z-index: 9999;
}

h1, h2, h3, h4 {
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: -0.02em;
    /* Balance multi-line headings so the last line never strands one short word. */
    text-wrap: balance;
}

/* Body copy: avoid single-word orphans on the prose blocks. Progressive — ignored
   where unsupported, no fallback needed. */
p {
    text-wrap: pretty;
}

/* Tabular-figures utility (make-interfaces pass). Applied at every render site that
   writes a LIVE / re-rendered number through app.js (credit counts, percentages) so a
   digit change can never nudge the row width. */
.tnum { font-variant-numeric: tabular-nums; }

a {
    color: var(--accent-cyan);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover {
    color: var(--text-primary);
    text-shadow: 0 0 10px var(--accent-cyan-glow);
}

/* ========================================
   APP HEADER (canonical Hank chrome)
   ======================================== */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-default);
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.brand {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.04em;
}
/* The Hank donkey mark in the header lockup — sits left of the wordmark, baseline-aligned. */
.brand .brand-mark {
    height: 24px;
    width: 24px;
    border-radius: 5px;
    margin-right: 9px;
    vertical-align: -0.32em;
}
.brand .logo-1 { color: var(--text-primary); }
.brand .logo-mark {
    color: var(--accent-cyan);
    text-shadow: 0 0 30px var(--accent-cyan-glow);
}
.brand .logo-2 { color: var(--text-primary); }

/* Release/beta tag — canonical Hank treatment (shared across every service + the
   console): a small italic lowercase "beta" in the brand cyan, floating just above
   the top-right of the wordmark, hugging the name. NOT a rectangle. font-size is
   relative to .brand so it scales with the wordmark; position + top is a visual lift
   only (stays in flow → never overlaps the meta cluster). */
.brand .release-badge {
    font-family: var(--font-mono);
    font-style: italic;
    font-weight: 600;
    font-size: .5em;
    letter-spacing: .02em;
    text-transform: lowercase;
    text-decoration: none;
    color: var(--accent-cyan);
    text-shadow: 0 0 9px var(--accent-cyan-glow);
    position: relative;
    top: -.9em;
    margin-left: .16em;
}
.brand .release-badge:hover { text-shadow: 0 0 14px var(--accent-cyan-glow); }

.meta {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    flex-wrap: wrap;
}
.pill {
    font-family: var(--font-mono);
    font-size: 11px;
    padding: 4px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    /* The version/credits pills carry live digits — pin their width. */
    font-variant-numeric: tabular-nums;
}
.pill.backend { color: var(--accent-success); border-color: var(--accent-success); }
.pill.link { color: var(--accent-cyan); border-color: var(--accent-cyan); }
.pill.logout {
    color: var(--accent-error);
    border-color: var(--accent-error);
    background: transparent;
    cursor: pointer;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.pill.logout:hover { background: var(--accent-error-dim); }
.pill.login {
    color: var(--accent-success);
    border-color: var(--accent-success);
    background: transparent;
    cursor: pointer;
}
.pill.login:hover { background: var(--accent-success-dim); }

/* ========================================
   CONTENT AREA
   The only inset region (header + footer are full-bleed). flex:1 pins the footer
   to the bottom on short pages.
   ======================================== */
.web-content {
    flex: 1 0 auto;
    padding: var(--space-xl) clamp(16px, 4vw, 32px);
}

/* ========================================
   AUTH-STATE / FOUC (FOUC-free 3-state shell)
   The shell ships <body class="auth-pending …">. ``auth-pending`` hides BOTH the app and
   the anonymous landing (header only) until app.js confirms the server-baked state and
   removes the class LAST — so the page never flashes the wrong content. ``body.anon`` then
   hides the app (the landing's own visibility is the server-baked ``hidden`` attribute,
   maintained idempotently by app.js). See base.html's <noscript> for the JS-disabled path.
   ======================================== */
body.auth-pending #customer-app,
body.auth-pending #anon-landing { display: none !important; }

/* ========================================
   ANONYMOUS LANDING (public soft-auth landing)
   body.anon hides the app; the sign-in card is the only thing shown.

   NOTE: ``.anon-landing`` deliberately sets NO ``display`` so the section's gating keeps
   working — the UA ``[hidden]`` rule (signed-in), ``body.auth-pending`` (boot veil), and the
   ``body.anon`` reveal all rely on the default block flow here, not an author override. The
   visual treatment lives on the inner ``.anon-card``, which is what gets elevated.
   ======================================== */
body.anon #customer-app { display: none !important; }
.anon-landing {
    margin: 9vh auto 0;
    padding: 0 1.5rem;
    text-align: center;
}
.anon-card {
    max-width: 560px;
    margin: 0 auto;
    padding: clamp(28px, 5vw, 44px) clamp(22px, 5vw, 40px);
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: 4px;
    box-shadow: var(--shadow-lg);
    text-align: center;
}
.anon-title { font-size: 1.9rem; color: var(--text-primary); margin: 0 0 14px; }
.anon-sub { color: var(--text-secondary); font-size: 15px; line-height: 1.65; margin: 0 0 22px; }

/* Value-prop pipeline strip — a visual echo of the one-line prop (document -> codes ->
   claim). Decorative chips on the elevated tokens; the arrows are aria-hidden. */
.anon-pipeline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 28px;
}
.anon-step {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: 3px;
    padding: 5px 10px;
}
.anon-arrow { color: var(--accent-cyan); font-size: 13px; }

.anon-actions { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; }
.anon-actions .btn-primary {
    padding: 11px 24px;
    font-family: var(--font-mono);
    font-size: 14px;
    cursor: pointer;
    color: var(--bg-primary);
    background: var(--accent-cyan);
    border: 1px solid var(--accent-cyan);
    border-radius: 2px;
}
.anon-actions .btn-primary:hover { box-shadow: 0 0 14px var(--accent-cyan-glow); }
.anon-actions .btn-link { color: var(--accent-cyan); font-size: 13px; text-decoration: none; }
.anon-actions .btn-link:hover { text-decoration: underline; }
/* Keyboard focus is visible on both the real <button> and the <a> links (accessibility). */
.anon-card a:focus-visible,
.anon-actions .btn-primary:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
}
.anon-note { margin-top: 30px; color: var(--text-secondary); font-size: 13px; line-height: 1.7; }
.anon-note a { color: var(--accent-cyan); text-decoration: none; }
.anon-note a:hover { text-decoration: underline; }

/* The signed-in customer coding app (M10) lives inside #customer-app — a wide,
   centered surface (the two-pane composer/result grid + the history rail). */
.customer-app {
    max-width: 1180px;
    margin: 0 auto;
    width: 100%;
}

/* ========================================
   FOOTER (canonical two-row build + legal strip)
   ======================================== */
.app-footer {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px 24px;
    margin-top: var(--space-xl);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-default);  /* mirrors header's border-bottom */
    flex-shrink: 0;
}
.footer-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}
.footer-legal {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}
.footer-copy { color: var(--text-muted); }
.footer-sep { color: var(--text-muted); }
.footer-link { color: var(--accent-cyan); text-decoration: none; }
.footer-link:hover { color: var(--text-primary); text-shadow: 0 0 10px var(--accent-cyan-glow); }

@media (max-width: 900px) {
    .app-header { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
    .app-footer { padding: 12px 16px; }
    .footer-row { gap: 6px; }
}

/* ========================================
   CREDIT USAGE BAR + RATE-LIMIT AFFORDANCE (live credit bar)
   ======================================== */
.pill.credits {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
}
.pill.credits .credit-bar {
    width: 54px;
    height: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: 3px;
    overflow: hidden;
}
.pill.credits .credit-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--accent-cyan);
    box-shadow: 0 0 8px var(--accent-cyan-glow);
    transition: width 0.4s ease;
}
.pill.credits .credit-word { font-size: 11px; letter-spacing: 0.06em; opacity: 0.75; }
/* The label swaps between "used/allowance" and "pct%" live — fixed-width digits keep
   the whole pill from twitching as the number ticks. */
.pill.credits .credit-label { font-size: 11px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
/* Amber warning tier — 80–99% of the plan's credits used (accent < 80% < amber < red). */
.pill.credits.warn {
    color: var(--accent-warning);
    border-color: var(--accent-warning);
}
.pill.credits.warn .credit-fill {
    background: var(--accent-warning);
    box-shadow: 0 0 8px var(--accent-warning-dim);
}
.pill.credits.over {
    color: var(--accent-error);
    border-color: var(--accent-error);
    cursor: pointer;  /* over-limit → the pill is an upgrade nudge (app.js wires the click) */
}
.pill.credits.over .credit-fill {
    background: var(--accent-error);
    box-shadow: 0 0 8px var(--accent-error-dim);
    width: 100% !important;
}

.rate-banner {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--accent-warning);
    background: var(--accent-warning-dim);
    border-bottom: 1px solid var(--accent-warning);
    padding: 8px 16px;
    text-align: center;
}
.rate-banner.over-credits {
    color: var(--accent-error);
    background: var(--accent-error-dim);
    border-bottom-color: var(--accent-error);
}

/* ============================================================================
   CUSTOMER CODING APP (milestone M10)

   The signed-in coding experience inside #customer-app: the BAA gate, the
   composer (record input + estimate + submit), the live-progress stepper, the
   coded-claim result card, and the org job-history rail. Built on the same
   canonical cyan-dark tokens; this section adds the make-interfaces polish —
   concentric radii (outer panels round MORE than the controls nested in them),
   tabular-nums on every live figure, press/hover feedback on every control, and
   real empty / loading / error states (never a dead spinner or a raw traceback).
   ============================================================================ */

/* Shared spinner (boot veil + history loading). A 2px ring with a cyan arc. */
.spinner {
    display: inline-block;
    width: 18px; height: 18px;
    border: 2px solid var(--border-default);
    border-top-color: var(--accent-cyan);
    border-radius: 50%;
    animation: hank-spin 0.7s linear infinite;
    vertical-align: middle;
}
.spinner-sm { width: 13px; height: 13px; border-width: 2px; }
@keyframes hank-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.4s; } }

/* Panel — the outer container. Rounds MORE than the controls inside it (concentric). */
.panel {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    padding: clamp(18px, 2.4vw, 26px);
}
.panel-head { margin-bottom: 18px; }
.panel-title { font-size: 1.15rem; color: var(--text-primary); margin: 0 0 4px; }
.panel-sub { color: var(--text-secondary); font-size: 13px; line-height: 1.55; margin: 0; }

/* Boot veil */
.app-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    padding: 80px 0;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.03em;
}

/* ---- BAA gate (blocking modal-style card) -------------------------------- */
.baa-gate {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(24px, 6vh, 80px) 16px;
    background: rgba(5, 8, 12, 0.78);
    backdrop-filter: blur(3px);
    overflow-y: auto;
}
.baa-card {
    max-width: 560px;
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border-emphasis);
    border-radius: 16px;
    box-shadow: var(--shadow-lg), var(--shadow-glow-cyan);
    padding: clamp(24px, 4vw, 34px);
    animation: baa-rise 0.28s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes baa-rise { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .baa-card { animation: none; } }
.baa-title { font-size: 1.4rem; color: var(--text-primary); margin: 0 0 8px; }
.baa-lede { color: var(--text-secondary); font-size: 14px; line-height: 1.6; margin: 0 0 16px; }
.baa-body {
    max-height: 240px;
    overflow-y: auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 16px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.65;
}
.baa-body:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 1px; }
.baa-body p { margin: 0 0 10px; }
.baa-body ul { margin: 0 0 10px; padding-left: 20px; }
.baa-body li { margin-bottom: 6px; }
.baa-body a { color: var(--accent-cyan); }
.baa-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13.5px;
    color: var(--text-primary);
    line-height: 1.45;
    margin-bottom: 18px;
    cursor: pointer;
}
.baa-check input { margin-top: 2px; accent-color: var(--accent-cyan); width: 16px; height: 16px; cursor: pointer; }
.baa-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }

/* ---- shared buttons ------------------------------------------------------ */
.btn-primary {
    padding: 11px 22px;
    font-family: var(--font-mono);
    font-size: 13.5px;
    letter-spacing: 0.02em;
    cursor: pointer;
    color: var(--bg-primary);
    background: var(--accent-cyan);
    border: 1px solid var(--accent-cyan);
    border-radius: 9px;
    transition: box-shadow 0.18s ease, transform 0.08s ease, background 0.18s ease, opacity 0.18s ease;
}
.btn-primary:hover:not(:disabled) { box-shadow: 0 0 16px var(--accent-cyan-glow); }
.btn-primary:active:not(:disabled) { transform: translateY(1px); }
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.btn-primary.is-busy { opacity: 0.7; cursor: progress; }

.btn-ghost {
    padding: 8px 16px;
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.02em;
    cursor: pointer;
    color: var(--accent-cyan);
    background: transparent;
    border: 1px solid var(--border-emphasis);
    border-radius: 8px;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.08s ease, color 0.18s ease;
}
.btn-ghost:hover { border-color: var(--accent-cyan); background: var(--accent-cyan-dim); }
.btn-ghost:active { transform: translateY(1px); }
.btn-ghost:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.btn-ghost-sm { padding: 5px 11px; font-size: 11.5px; }
.btn-link { color: var(--accent-cyan); font-size: 13px; }
.btn-link:hover { text-decoration: underline; }
.link-btn {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--accent-cyan); font: inherit; text-decoration: underline;
}

.form-error {
    color: var(--accent-error);
    font-size: 12.5px;
    margin: 12px 0 0;
    line-height: 1.45;
}

/* ---- workspace grid ------------------------------------------------------ */
.coding-workspace { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 22px); }
.workspace-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(16px, 2vw, 22px);
    align-items: start;
}
@media (max-width: 900px) { .workspace-grid { grid-template-columns: 1fr; } }

/* ---- composer ------------------------------------------------------------ */
.composer { display: flex; flex-direction: column; }

/* Job-type selector — the first decision (summarize / write / classify). Three card
   buttons; the active one carries the cyan border + dim fill. */
.jobtype {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}
@media (max-width: 560px) { .jobtype { grid-template-columns: 1fr; } }
.jobtype-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
    padding: 12px 13px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: 11px;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.08s ease;
}
.jobtype-btn:hover { border-color: var(--border-emphasis); }
.jobtype-btn:active { transform: translateY(1px); }
.jobtype-btn:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.jobtype-btn.is-active {
    border-color: var(--accent-cyan);
    background: var(--accent-cyan-dim);
    box-shadow: inset 0 0 0 1px var(--accent-cyan);
}
.jobtype-icon { font-size: 17px; line-height: 1; color: var(--text-muted); transition: color 0.18s ease; }
.jobtype-btn.is-active .jobtype-icon { color: var(--accent-cyan); }
.jobtype-name { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.25; }
.jobtype-btn.is-active .jobtype-name { color: var(--accent-cyan); }
.jobtype-blurb { font-size: 11px; line-height: 1.4; color: var(--text-muted); }

.field-required { text-transform: none; letter-spacing: 0; color: var(--accent-cyan); font-size: 10px; margin-left: 6px; }
.field-hint { color: var(--text-muted); font-size: 11px; line-height: 1.4; margin: 6px 0 0; }

/* Segmented input-mode toggle */
.seg {
    display: inline-flex;
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: 10px;
    padding: 3px;
    gap: 3px;
    margin-bottom: 16px;
    align-self: flex-start;
}
.seg-btn {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.03em;
    padding: 7px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease;
}
.seg-btn:hover { color: var(--text-primary); }
.seg-btn.is-active { background: var(--accent-cyan-dim); color: var(--accent-cyan); }
.seg-btn:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 1px; }

.input-pane { margin-bottom: 16px; }
.field { margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; }
@media (max-width: 540px) { .field-row { grid-template-columns: 1fr; } }
.field-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 7px;
}
.field-optional { text-transform: none; letter-spacing: 0; color: var(--text-muted); font-size: 10px; margin-left: 6px; }

.record-textarea, .context-textarea, .field-select {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: 9px;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    padding: 11px 13px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.record-textarea { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; resize: vertical; min-height: 150px; }
.context-textarea { resize: vertical; min-height: 48px; font-size: 13px; }
.record-textarea:focus, .context-textarea:focus, .field-select:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px var(--accent-cyan-dim);
}
.field-select { cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2300d9ff' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
}

.sample-row { display: flex; gap: 10px; align-items: stretch; }
.sample-row .field-select { flex: 1; }
.sample-row .btn-ghost { white-space: nowrap; }

/* PDF dropzone */
.dropzone {
    border: 1.5px dashed var(--border-emphasis);
    border-radius: 11px;
    background: var(--bg-secondary);
    padding: 26px 18px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.dropzone:hover { border-color: var(--accent-cyan); background: var(--accent-cyan-dim); }
.dropzone:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.dropzone.is-drag { border-color: var(--accent-cyan); border-style: solid; background: var(--accent-cyan-dim); box-shadow: inset 0 0 24px var(--accent-cyan-dim); }
.dropzone-idle { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dropzone-icon { font-size: 26px; color: var(--accent-cyan); line-height: 1; }
.dropzone-prompt { color: var(--text-primary); font-size: 13.5px; }
.dropzone-link { color: var(--accent-cyan); text-decoration: underline; }
.dropzone-hint { color: var(--text-muted); font-size: 11px; }

/* PHI posture warning banner (M13) — soft, advisory chrome shown when the deploy is not
   cleared for real PHI (MEDICALNOTES_WEB_PHI_ENABLED=false). Amber, low-key; never blocks the form. */
.phi-warning {
    display: flex; align-items: flex-start; gap: 8px;
    margin: 0 0 14px; padding: 9px 12px;
    background: var(--accent-warning-dim); border: 1px solid var(--accent-warning);
    border-radius: 8px;
}
.phi-warning-icon { color: var(--accent-warning); font-size: 14px; line-height: 1.4; flex-shrink: 0; }
.phi-warning-text { color: var(--text-secondary); font-size: 12px; line-height: 1.45; }
.dropzone-file { display: flex; align-items: center; justify-content: center; gap: 12px; }
.file-name { color: var(--text-primary); font-family: var(--font-mono); font-size: 12.5px; word-break: break-all; }
.file-clear {
    background: var(--accent-error-dim); border: 1px solid var(--accent-error); color: var(--accent-error);
    width: 22px; height: 22px; border-radius: 50%; cursor: pointer; line-height: 1; font-size: 14px; flex-shrink: 0;
}
.file-clear:hover { background: var(--accent-error); color: var(--bg-primary); }

/* Estimate bar */
.estimate-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    border-radius: 11px;
    padding: 13px 16px;
    margin: 4px 0 16px;
}
.estimate-figure { display: flex; align-items: baseline; gap: 8px; }
.estimate-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-secondary); }
.estimate-value { font-family: var(--font-mono); font-size: 26px; font-weight: 700; color: var(--accent-cyan); line-height: 1; font-variant-numeric: tabular-nums; }
.estimate-unit { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); }
.estimate-credits { display: flex; align-items: baseline; gap: 5px; font-size: 11.5px; color: var(--text-muted); font-family: var(--font-mono); }
.estimate-credits-val { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.estimate-credits-label { letter-spacing: 0.02em; }

.btn-submit { width: 100%; padding: 13px; font-size: 14px; }
.btn-submit.is-busy .btn-submit-label { opacity: 0.85; }

/* ---- result pane --------------------------------------------------------- */
.result-pane { min-height: 320px; display: flex; flex-direction: column; }

.result-empty, .result-error {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 18px;
    gap: 6px;
}
.result-empty-icon { font-size: 38px; color: var(--border-emphasis); line-height: 1; margin-bottom: 6px; }
.result-empty-title { font-size: 1.05rem; color: var(--text-secondary); margin: 0; }
.result-empty-text { color: var(--text-muted); font-size: 13px; line-height: 1.55; max-width: 320px; margin: 0; }
.result-error-icon { font-size: 34px; color: var(--accent-warning); margin-bottom: 6px; }
.result-error-title { font-size: 1.1rem; color: var(--text-primary); margin: 0; }
.result-error-text { color: var(--text-secondary); font-size: 13px; line-height: 1.55; max-width: 360px; margin: 0 0 8px; }

/* progress stepper */
.result-progress { padding: 6px 4px; }
.progress-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 22px; }
.progress-title { font-size: 1.05rem; color: var(--text-primary); margin: 0; }
.progress-elapsed { font-family: var(--font-mono); font-size: 13px; color: var(--accent-cyan); font-variant-numeric: tabular-nums; }
.stepper { list-style: none; margin: 0; padding: 0; position: relative; }
.stepper::before {
    content: ''; position: absolute; left: 8px; top: 10px; bottom: 10px;
    width: 2px; background: var(--border-default);
}
.step { display: flex; align-items: center; gap: 14px; padding: 9px 0; position: relative; }
.step-dot {
    width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
    background: var(--bg-card); border: 2px solid var(--border-emphasis); z-index: 1;
    transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.step-label { font-family: var(--font-mono); font-size: 13px; color: var(--text-muted); transition: color 0.25s ease; }
.step.is-current .step-dot {
    border-color: var(--accent-cyan); background: var(--accent-cyan);
    box-shadow: 0 0 0 4px var(--accent-cyan-dim), 0 0 12px var(--accent-cyan-glow);
    animation: step-pulse 1.4s ease-in-out infinite;
}
.step.is-current .step-label { color: var(--accent-cyan); }
.step.is-done .step-dot { border-color: var(--accent-success); background: var(--accent-success); }
.step.is-done .step-label { color: var(--text-secondary); }
@keyframes step-pulse { 0%, 100% { box-shadow: 0 0 0 4px var(--accent-cyan-dim), 0 0 10px var(--accent-cyan-glow); } 50% { box-shadow: 0 0 0 6px var(--accent-cyan-dim), 0 0 18px var(--accent-cyan-glow); } }
@media (prefers-reduced-motion: reduce) { .step.is-current .step-dot { animation: none; } }
.progress-note { color: var(--text-muted); font-size: 12px; line-height: 1.5; margin: 22px 0 0; }

/* result card */
.result-card { display: flex; flex-direction: column; gap: 14px; }
.result-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.result-card-title { font-size: 1.1rem; color: var(--text-primary); margin: 0; }
.result-card-spec { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-cyan); }
.result-card-credits { text-align: right; display: flex; align-items: baseline; gap: 5px; }
.result-credits-val { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--accent-cyan); font-variant-numeric: tabular-nums; }
.result-credits-label { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }

.result-section-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin: 4px 0 2px; }

.result-pdf-wrap { margin-bottom: 4px; }
.result-pdf { width: 100%; height: 300px; border: 1px solid var(--border-default); border-radius: 9px; background: var(--bg-secondary); }

.result-output-wrap { margin-bottom: 4px; }
.result-output { white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--text-primary); background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 9px; padding: 12px 14px; margin: 0; max-height: 420px; overflow: auto; }

/* Output section header with the Copy take-away button on the right. */
.result-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 2px; }
.result-section-head .result-section-label { margin: 0; }
.btn-copy {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em;
    padding: 4px 10px; cursor: pointer;
    color: var(--accent-cyan); background: transparent;
    border: 1px solid var(--border-emphasis); border-radius: 7px;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.08s ease;
}
.btn-copy:hover { border-color: var(--accent-cyan); background: var(--accent-cyan-dim); }
.btn-copy:active { transform: translateY(1px); }
.btn-copy:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.btn-copy.is-copied { color: var(--accent-success); border-color: var(--accent-success); background: var(--accent-success-dim); }
.btn-copy-icon { font-size: 12px; line-height: 1; }

/* Classify result — the detected note type + DOS in a two-cell grid. */
.result-classify-wrap { margin-bottom: 4px; }
.classify-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
@media (max-width: 480px) { .classify-grid { grid-template-columns: 1fr; } }
.classify-cell { background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 9px; padding: 11px 13px; margin: 0; }
.classify-key { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 5px; }
.classify-val { font-size: 14px; color: var(--text-primary); margin: 0; word-break: break-word; }

/* Result-card credits column — credits + a quiet duration stamp underneath. */
.result-duration { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); text-align: right; width: 100%; }

/* Error code chip — the machine reason, surfaced quietly (never a stack trace). */
.result-error-code { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); background: var(--bg-secondary); border: 1px solid var(--border-default); border-radius: 6px; padding: 2px 8px; }

/* A stepper op-phase that isn't this job's lane — dimmed so the customer sees only its path. */
.step.is-skipped .step-dot { opacity: 0.3; }
.step.is-skipped .step-label { opacity: 0.35; text-decoration: line-through; }

.result-lines { display: flex; flex-direction: column; gap: 8px; }
.result-line-empty { color: var(--text-muted); font-size: 13px; padding: 10px 0; }
.line {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 10px 13px;
    transition: border-color 0.18s ease;
}
.line:hover { border-color: var(--border-emphasis); }
.line-nonbillable { opacity: 0.72; }
.line-codes { display: flex; gap: 8px; flex-wrap: wrap; }
.code-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--accent-cyan-dim); border: 1px solid var(--accent-cyan); border-radius: 7px; padding: 3px 9px; }
.code-cpt { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--accent-cyan); font-variant-numeric: tabular-nums; }
.code-mod {
    font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
    color: var(--bg-primary); background: var(--accent-cyan); border-radius: 4px; padding: 1px 5px;
}
.line-icds { display: flex; gap: 6px; flex-wrap: wrap; }
.icd-chip {
    font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary);
    background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 6px; padding: 2px 7px;
    font-variant-numeric: tabular-nums;
}
.icd-chip.icd-primary { color: var(--accent-success); border-color: var(--accent-success); }
.line-conf { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--accent-success); font-variant-numeric: tabular-nums; }
.line-evidence { flex-basis: 100%; color: var(--text-muted); font-size: 12px; line-height: 1.5; }
.line-badge { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 5px; padding: 2px 7px; margin-left: auto; }
.badge-billable { color: var(--accent-success); background: var(--accent-success-dim); }
.badge-bundled { color: var(--text-muted); background: var(--bg-elevated); margin-left: auto; }
.line-conf + .line-badge { margin-left: 8px; }

.result-hre { display: flex; flex-direction: column; gap: 8px; }
.hre { border-radius: 10px; padding: 10px 13px; border: 1px solid var(--border-default); background: var(--bg-secondary); border-left-width: 3px; }
.hre.sev-high { border-left-color: var(--accent-error); }
.hre.sev-med { border-left-color: var(--accent-warning); }
.hre.sev-low { border-left-color: var(--accent-cyan); }
.hre-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.hre-tag { font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-primary); }
.hre-sev { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.hre-role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-elevated); border-radius: 5px; padding: 1px 7px; margin-left: auto; }
.hre-desc { color: var(--text-secondary); font-size: 12.5px; line-height: 1.5; margin-top: 5px; }

.result-again { align-self: flex-start; margin-top: 4px; }

/* ---- history ------------------------------------------------------------- */
.history-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.history-state { color: var(--text-muted); font-size: 13px; padding: 18px 4px; display: flex; align-items: center; gap: 8px; }
.history-state-error { color: var(--accent-warning); }
.history-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hist-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 11px 14px;
    cursor: pointer;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.08s ease;
}
.hist-row:hover { border-color: var(--accent-cyan); background: var(--accent-cyan-dim); }
.hist-row:active { transform: translateY(1px); }
.hist-row:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.hist-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hist-status { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 5px; padding: 2px 8px; }
.status-completed { color: var(--accent-success); background: var(--accent-success-dim); }
.status-running { color: var(--accent-cyan); background: var(--accent-cyan-dim); }
.status-queued { color: var(--text-secondary); background: var(--bg-elevated); }
.status-failed, .status-timed_out { color: var(--accent-error); background: var(--accent-error-dim); }
.status-canceled { color: var(--text-muted); background: var(--bg-elevated); }
.hist-job { font-family: var(--font-mono); font-size: 11px; color: var(--accent-cyan); letter-spacing: 0.03em; }
.hist-spec { font-family: var(--font-mono); font-size: 12px; color: var(--text-primary); letter-spacing: 0.02em; }
.hist-kind { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border: 1px solid var(--border-default); border-radius: 4px; padding: 1px 6px; }
.hist-meta { display: flex; align-items: center; gap: 14px; }
.hist-date { font-size: 12px; color: var(--text-muted); }
.hist-credits { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Lock body scroll behind the BAA gate so the page underneath can't be reached. */
body.baa-blocking { overflow: hidden; }