@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400..700;1,6..72,400..700&family=Inter:wght@400..700&display=swap');

@layer tokens, base, components, pages;

/* ============================================================ tokens */
@layer tokens {
  :root {
    /* "Karta" v2 - the record keeps its paper, its navy and its serif, but
       three of the original rules are deliberately reversed (DECISIONS.md,
       2026-08-28): depth is allowed, copper returns to chrome, and data gets
       a dark stage of its own. Every token NAME is unchanged, so the whole
       sheet re-skins from here. */

    /* surfaces - the ground darkens so white paper lifts off it */
    --paper: #FFFFFF;
    --ground: #E9ECF1;
    --surface: #FFFFFF;
    --glass-border: #DDE2E9;

    /* rules - still hairlines, but no longer doing elevation's job alone */
    --border: #DDE2E9;
    --border-strong: #C4CBD5;

    /* the dark stage: data, and the one hero moment per screen */
    --panel: #101C33;
    --panel-2: #17253F;
    --panel-ink: #E6EAF1;
    --panel-muted: #93A0B5;
    --panel-line: rgba(255, 255, 255, 0.09);

    /* the graphite rail */
    --rail: #0D1219;
    --rail-top: #11161D;
    --rail-ink: #E8EBEE;
    --rail-muted: #8B939D;
    --rail-line: #222932;

    /* ink */
    --ink: #0D1117;
    --ink-soft: #39424F;
    --muted: #59626F;            /* 5.6:1 on white - meta text is still AA */

    /* the action colour */
    --brand: #1B2A4A;
    --brand-strong: #101C33;
    --brand-tint: #EAEFF7;

    /* copper is chrome again - affordances, active marks, secondary action.
       --accent-lift is for dark surfaces ONLY; it is not AA on white. */
    --accent: #8C5A12;
    --accent-deep: #8C5A12;
    --accent-lift: #C08A35;
    --accent-tint: #F8F1E4;
    --accent-border: #EBDFC9;

    --sky: #2E5AA8;          --sky-tint: #EBF1FA;      --sky-border: #D9E3F3;

    /* Chart series. Colour here encodes WHICH line, never whether a reading
       is good - the platform does not interpret a measurement (SDD 07). */
    --series-sys: #1B2A4A;
    --series-dia: #8B98AB;

    --success: #1F6F43;      --success-tint: #ECF4EF;  --success-border: #D5E6DC;
    --warning: #8C5A12;      --warning-tint: #F8F1E4;
    --danger:  #A32020;      --danger-tint:  #F9EDED;
    --info:    #2E5AA8;      --info-tint:    #EBF1FA;
    --neutral-tint: #EDF0F4;

    --font-display: 'Newsreader', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --noise: none;

    /* Softer than Karta's cut edges: a card is an object now, not a cut sheet. */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-pill: 6px;
    --radius-dot: 50%;

    --fs-display: clamp(2.6rem, 2rem + 3vw, 3.9rem);
    --fs-h2: clamp(1.9rem, 1.5rem + 1.4vw, 2.6rem);
    --band-pad: clamp(48px, 4vw + 32px, 80px);

    /* The elevation ladder Karta refused. Three steps, all under 20% black,
       and every one of them tinted with the ink hue rather than pure black. */
    --shadow-sm: 0 1px 2px rgba(13, 17, 23, 0.05), 0 1px 3px rgba(13, 17, 23, 0.04);
    --shadow-md: 0 2px 4px rgba(13, 17, 23, 0.04), 0 10px 24px -6px rgba(13, 17, 23, 0.10);
    --shadow-lg: 0 4px 8px rgba(13, 17, 23, 0.06), 0 20px 48px -12px rgba(13, 17, 23, 0.18);
    /* Rings are focus and selection, and they stay. */
    --ring: 0 0 0 3px var(--brand-tint);
    --ring-tight: 0 0 0 2px var(--brand-tint);

    --rail-w: 240px;
    /* The floating assistant owns the viewport's bottom-right corner: 52px
       square, 20px in. The patient content column runs to within 46px of
       that same edge, so the corner of the column is always under it. A page
       that puts a control there gives it this much clearance; better still,
       it puts no control there (SDD 05). */
    --fab-clear: 46px;

    /* One spatial scale, so a page picks a step instead of inventing a number. */
    --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px;
    --measure: 1240px;

    --t-fast: 0.15s ease;
    --t-normal: 0.25s ease;
  }
  .density-comfort {
    --fs-base: 1.0625rem;
    --control-h: 44px;
    --card-pad: 1.75rem;
    --gap: 1.5rem;
  }
  .density-compact {
    --fs-base: 1rem;
    --control-h: 38px;
    --card-pad: 1.25rem;
    --gap: 1.25rem;
  }
}

/* ============================================================ base */
@layer base {
  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    font-family: var(--font-body);
    background: var(--ground);
    color: var(--ink-soft);
    font-size: var(--fs-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
  }

  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  @keyframes pulse-dot { 0%, 100% { opacity: 1; } 60% { opacity: 1; } }

  h1, h2 {
    font-family: var(--font-display);
    color: var(--ink);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    font-optical-sizing: auto;
  }
  h1 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.4rem); }
  h2 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); }
  h3 { color: var(--ink); font-weight: 700; font-size: 1.05em; }

  a { color: var(--brand); text-decoration: none; font-weight: 500; transition: color var(--t-fast); }
  a:hover { color: var(--brand-strong); }

  ::selection { background: var(--brand-tint); }

  :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }

  code {
    background: var(--paper);
    border: 1px solid var(--border);
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-sm);
    font-size: 0.85em;
  }
  pre { white-space: pre-wrap; font-size: 0.78rem; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
}

/* ============================================================ components */
@layer components {

  /* ---- app shell ----
     Two chromes, one material. Patients navigate from a graphite rail on the
     left (the portal is a place they live in); doctors and admins keep a
     graphite top bar (they work in one queue at a time). Both are flat
     #14181D - no glass, no elevation. */
  /* overflow-x must be `clip`, not `hidden`: hidden turns this element into a
     scroll container, which silently disables the sticky header (it sticks to
     this box instead of the viewport). Clip only clips the 100vw bands. */
  .app-container { display: flex; flex-direction: column; min-height: 100vh; overflow-x: clip; }
  .has-rail .app-container { padding-left: var(--rail-w); }

  /* ---- the patient rail ---- */
  .app-rail {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: var(--rail-w);
    display: flex; flex-direction: column;
    background: linear-gradient(178deg, var(--rail-top) 0%, var(--rail) 62%);
    color: var(--rail-ink);
    padding: 26px 0 18px;
    overflow-y: auto; overscroll-behavior: contain;
  }
  .app-rail :focus-visible { outline-color: #fff; }
  .rail-cta {
    display: flex; align-items: center; justify-content: center;
    margin: 22px 20px 26px; min-height: 40px;
    background: #fff; color: var(--rail);
    font-size: 0.86rem; font-weight: 650; letter-spacing: -0.005em;
    border-radius: var(--radius-sm);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset,
                0 6px 16px -6px rgba(0, 0, 0, 0.6);
    transition: background var(--t-fast), transform var(--t-fast);
  }
  .rail-cta:hover { background: var(--rail-ink); color: var(--rail); }
  .rail-cta.active { background: var(--rail-ink); color: var(--rail); }
  .rail-group {
    margin: 0 0 4px; padding: 14px 22px 6px;
    font-size: 0.66rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase;
    color: #6B7480;
  }
  /* No rule above the foot: it and the footer's legal rule met at two
     different heights across the rail's edge and read as a mistake. Space
     does the separating. */
  .rail-foot { margin-top: auto; padding: 24px 20px 0; }
  /* The doctor's rail opens on a caption instead of a create button: there
     is nothing for them to create from the chrome. */
  .rail-group-lead { margin-top: 18px; }
  /* PWZ under the name: an identity fact, not a fact about any one page. */
  .rail-credential {
    margin: 9px 0 0; font-size: .72rem; letter-spacing: .01em;
    color: var(--rail-muted);
  }

  /* ---- the doctor/admin top bar ---- */
  .app-header {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: center; gap: 1.5rem;
    background: var(--rail);
    border-bottom: 1px solid var(--rail-line);
    padding: 0.7rem clamp(1rem, 4vw, 2.5rem);
  }
  .app-header :focus-visible { outline-color: #fff; }
  /* The global focus outline is navy (--brand), invisible on graphite. */
  .mobile-nav :focus-visible, .band-navy :focus-visible { outline-color: #fff; }

  .app-logo-link { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--rail-ink); }
  .app-rail .app-logo-link { padding: 0 22px; }
  .app-logo-wordmark {
    font-family: var(--font-display);
    font-weight: 600; font-size: 1.24rem;
    color: #fff; letter-spacing: -0.01em; white-space: nowrap;
  }

  /* ---- nav items: pills in the top bar, rows in the rail ---- */
  .app-nav { display: flex; gap: 0.4rem; flex: 1; flex-wrap: wrap; }
  .app-rail .app-nav { flex-direction: column; flex: 0 0 auto; gap: 0; }
  .tab {
    display: inline-flex; align-items: center;
    padding: 0.45rem 1.1rem; border-radius: var(--radius-pill);
    font-weight: 600; font-size: 0.92rem;
    color: var(--ink-soft); border: 1px solid transparent;
    transition: background var(--t-fast), color var(--t-fast);
  }
  .tab:hover { background: var(--brand-tint); color: var(--brand); }
  .tab.active { background: var(--brand-tint); color: var(--brand); border-color: var(--border-strong); }
  .app-nav a {
    display: inline-flex; align-items: center;
    padding: 0.45rem 1.1rem; border-radius: var(--radius-pill);
    font-weight: 600; font-size: 0.92rem;
    color: var(--rail-muted); border: 1px solid transparent;
    transition: background var(--t-fast), color var(--t-fast);
  }
  .app-nav a:hover { background: rgba(255, 255, 255, 0.07); color: var(--rail-ink); }
  .app-nav a.active { background: rgba(255, 255, 255, 0.12); color: #fff; }
  .app-rail .app-nav { padding: 0 12px; gap: 1px; }
  .app-rail .app-nav a {
    gap: 11px; border-radius: var(--radius-sm);
    padding: 0.55rem 12px; font-size: 0.855rem; font-weight: 500;
    border-left: 0; position: relative;
  }
  .app-rail .app-nav a:hover { background: rgba(255, 255, 255, 0.05); }
  .app-rail .app-nav a.active {
    background: rgba(255, 255, 255, 0.07); color: #fff; font-weight: 600;
  }
  /* Copper marks where you are. It is the one place the accent is chrome
     and not a state, and it reads because nothing else on the rail is warm. */
  .app-rail .app-nav a.active::before {
    content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px;
    width: 2px; border-radius: 0 2px 2px 0; background: var(--accent-lift);
  }
  .app-rail .app-nav a svg { flex: 0 0 auto; opacity: 0.8; }
  .app-rail .app-nav a.active svg { opacity: 1; color: var(--accent-lift); }
  .tabs {
    display: flex; gap: 0.4rem; flex-wrap: wrap;
    margin-bottom: 2rem; padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
  }

  .user-profile { margin-left: auto; }
  .app-rail .user-profile { margin-left: 0; }
  .user-profile-inner { display: flex; align-items: center; gap: 0.75rem; }
  .app-rail .user-profile-inner { flex-wrap: wrap; gap: 0.5rem 0.6rem; }
  .user-profile-name { font-weight: 600; color: #fff; font-size: 0.92rem; white-space: nowrap; }
  /* A long name wraps instead of running off the rail; the logout button
     takes the row below on its own. */
  .app-rail .user-profile-name { flex: 1 1 0; min-width: 0; font-size: 0.83rem; white-space: normal; line-height: 1.3; overflow-wrap: anywhere; }
  .app-rail .user-profile-inner .logout-btn { flex: 1 1 100%; }
  .user-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.12); color: #fff;
    font-weight: 700; font-size: 0.78rem; letter-spacing: 0.02em;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .logout-btn {
    display: inline-flex; align-items: center;
    padding: 0.35rem 0.9rem; border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.28);
    font-weight: 600; font-size: 0.8rem; color: #fff;
    background: transparent;
    transition: border-color var(--t-fast), background var(--t-fast);
  }
  .logout-btn:hover { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.07); }
  .app-rail .logout-btn { flex: 1 1 auto; justify-content: center; }

  .app-main {
    flex: 1; width: 100%;
    max-width: 1160px; margin: 0 auto;
    padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 4vw, 2.5rem) 3rem;
  }
  .has-rail .app-main {
    max-width: 1300px; margin: 0;
    padding: 30px clamp(1.25rem, 3.4vw, 46px) 56px;
  }
  /* ---- the portal's end-mark ----
     Every page, the pulpit included since 2026-09-01: it kept a six-column
     footer of its own, whose one unique part (the support boundary) moved
     here and whose other five said what the rail and the page already had.
     Same graphite ground, same `site-foot-*` parts, one row (DECISIONS.md).
     It used to be a white band on a near-white ground, which read as more
     page rather than the end of one. The column mirrors `.app-main`'s box,
     so the footer's content sits directly under the page's. */
  .app-footer {
    background: var(--rail); color: var(--rail-ink);
    padding: 26px 0 0; font-size: 0.84rem;
  }
  .app-foot-col {
    width: 100%; max-width: 1160px; margin: 0 auto;
    padding-inline: clamp(1rem, 4vw, 2.5rem);
  }
  /* What support is and is not, beside the contact details it qualifies. */
  .app-foot-note { margin: 14px 0 0; font-size: .78rem; color: var(--panel-muted); max-width: 62ch; }
  .has-rail .app-foot-col {
    max-width: 1300px; margin: 0;
    padding-inline: clamp(1.25rem, 3.4vw, 46px);
  }
  .app-foot-top {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 14px 32px;
  }
  .app-foot-top .site-foot-logo span { font-size: 1.02rem; }
  .app-foot-reach { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
  .app-foot-reach > a {
    display: inline-flex; align-items: center; gap: 9px;
    color: rgba(255, 255, 255, 0.78); text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: color var(--t-fast);
  }
  .app-foot-reach > a:hover { color: #fff; }
  .app-foot-reach > a > svg { flex: 0 0 auto; color: var(--accent-lift); }
  .app-footer .site-foot-alert { margin-top: 18px; }
  /* The portal's only route to the public pages it has no equivalent for.
     Quiet on purpose: the rail is the navigation, this is the way out. */
  .app-footer-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
  /* A rule in the gap: the way out to the public site is not a third way to
     reach support, and without it the four sit in one undifferentiated run. */
  .app-foot-reach > .app-footer-links {
    padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, 0.14);
  }
  @media (max-width: 719px) {
    .app-foot-reach > .app-footer-links { padding-left: 0; border-left: 0; }
  }
  .app-footer-links a {
    color: rgba(255, 255, 255, 0.66); font-weight: 600; text-decoration: none;
    transition: color var(--t-fast);
  }
  .app-footer-links a:hover { color: #fff; }

  .mobile-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
    background: var(--paper);
    border-top: 1px solid var(--border);
    padding: 0 0.25rem calc(0.3rem + env(safe-area-inset-bottom));
    justify-content: space-around;
  }
  .mobile-nav a {
    display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
    flex: 1 1 0; min-width: 0;
    font-size: clamp(0.6rem, 2.6vw, 0.7rem); font-weight: 600; color: var(--muted);
    padding: 0.5rem 0.2rem 0.35rem; white-space: nowrap;
    border-top: 2px solid transparent;
  }
  .mobile-nav a.active { color: var(--brand); border-top-color: var(--brand); }
  @media (max-width: 1099px) {
    /* Below the rail's comfortable width the chrome collapses to the bottom
       bar; the rail's own entries stay reachable from the "Więcej" sheet. */
    .has-rail .app-container { padding-left: 0; }
    .app-rail { display: none; }
    .has-rail .mobile-nav { display: flex; }
    .has-rail .app-main { max-width: 1180px; margin: 0 auto; padding-bottom: 6rem; }
    .role-patient .wizard-footer { bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  }
  @media (max-width: 719px) {
    .user-profile-name { display: none; }
    /* Roles still on the top bar (admin) have no bottom mobile-nav, so their
       pill nav must survive in the top bar: it wraps onto its own
       full-width row and scrolls sideways when needed, instead of pushing
       the logout button past the right edge (where .app-container's
       overflow-x: hidden made it unreachable). */
    .app-header { flex-wrap: wrap; gap: 0.5rem 0.75rem; }
    .app-logo-wordmark { font-size: 1.12rem; }
    .app-nav {
      order: 3; flex: 1 1 100%;
      flex-wrap: nowrap; overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .app-nav::-webkit-scrollbar { display: none; }
    .app-nav a { white-space: nowrap; }
  }

  /* ---- toasts ---- */
  .toast-stack {
    position: fixed; top: 1rem; right: 1rem; z-index: 100;
    display: flex; flex-direction: column; gap: 0.6rem;
    max-width: min(92vw, 400px);
  }
  .toast {
    display: flex; gap: 0.7rem; align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-left: 4px solid var(--info);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 0.9rem 1rem;
    font-size: 0.95rem; font-weight: 500; color: var(--ink);
  }
  .toast-success { border-left-color: var(--success); }
  .toast-error   { border-left-color: var(--danger); }
  .toast-warning { border-left-color: var(--warning); }
  .toast-close {
    margin-left: auto; background: none; border: none;
    color: var(--muted); cursor: pointer;
    font-size: 1.2rem; line-height: 1; padding: 0.1rem 0.2rem;
  }
  .toast-close:hover { color: var(--ink); }

  /* ---- buttons ---- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    min-height: var(--control-h);
    padding: 0.6rem 1.5rem;
    border-radius: var(--radius-pill);
    border: 1.5px solid transparent;
    font: inherit; font-weight: 600; font-size: 0.98em;
    cursor: pointer; text-decoration: none; text-align: center;
    transition: background var(--t-fast), border-color var(--t-fast),
                color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
  }
  .btn:active { transform: translateY(1px); }
  .btn:disabled {
    opacity: 0.45; cursor: not-allowed;
    box-shadow: none;
  }
  .btn:disabled:active { transform: none; }
  .btn-secondary:disabled:hover { border-color: var(--border-strong); color: var(--ink); }
  .btn-primary:disabled:hover { background: var(--brand); }
  .btn-primary {
    background: var(--brand); color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset,
                0 4px 12px -4px rgba(27, 42, 74, 0.5);
  }
  .btn-primary:hover {
    background: var(--brand-strong); color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset,
                0 6px 16px -4px rgba(27, 42, 74, 0.55);
  }
  .btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
  .btn-secondary:hover { border-color: var(--brand); color: var(--brand); }
  .btn-small { min-height: 36px; padding: 0.35rem 1rem; font-size: 0.88rem; }
  /* display flex (not inline-flex): block-level, so its margins collapse
     with neighboring content instead of stacking on top of them */
  .btn-block { display: flex; width: 100%; }
  .btn-amber {
    background: var(--accent); color: #fff;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.14) inset,
                0 4px 12px -4px rgba(140, 90, 18, 0.5);
  }
  .btn-amber:hover { color: #fff; background: #794D0F; }
  .btn-ghost-navy {
    color: #fff; border: 1px solid rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.07);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .btn-ghost-navy:hover { color: #fff; background: rgba(255, 255, 255, 0.14); }

  /* ---- cards ---- */
  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--card-pad);
    animation: rise 0.5s ease backwards;
  }
  /* Content rhythm: the universal reset zeroes every margin, so flowed
     content inside cards and alerts (paragraphs, headings, bare lists)
     needs its vertical spacing restored here or it sets solid. */
  .card p + p, .alert p + p { margin-top: 0.6rem; }
  .card p + form, .action-panel p + form { margin-top: 0.9rem; }
  .card h3 { margin: 1.25rem 0 0.5rem; }
  .card h3:first-child { margin-top: 0; }
  .card ul:not([class]), .alert ul:not([class]) { padding-left: 1.2rem; margin: 0.5rem 0; }
  .card ul:not([class]) li + li, .alert ul:not([class]) li + li { margin-top: 0.3rem; }
  .card > details.reveal:not(:last-child) { margin-bottom: 1rem; }

  .card-title {
    display: flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 1rem;
  }
  .card-sub { color: var(--muted); font-size: 0.92rem; line-height: 1.5; margin-bottom: 1.25rem; }

  .eyebrow {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--accent-deep);
    font-family: var(--font-body);
    line-height: 1.4;
  }
  .band-head { text-align: center; max-width: 640px; margin: 0 auto 2.5rem; }
  .band-head .eyebrow { margin-bottom: 0.6rem; }
  .band-head h2 { font-size: var(--fs-h2); line-height: 1.1; }
  .band-sub { color: var(--muted); margin-top: 0.6rem; }

  .page-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem;
  }
  .page-sub { color: var(--muted); font-size: 0.95rem; margin-top: 0.35rem; }

  .stack { display: flex; flex-direction: column; gap: var(--gap); }
  .narrow-600 { max-width: 600px; margin-inline: auto; }
  .narrow-720 { max-width: 720px; margin-inline: auto; }
  .narrow-900 { max-width: 900px; margin-inline: auto; }
  /* In the portal the rail is the left edge, so a centred reading column
     made every page's H1 start at a different x - the single loudest source
     of "the screens don't feel like one app". They align left instead; the
     cap still holds the line length. */
  .has-rail .narrow-600,
  .has-rail .narrow-720,
  .has-rail .narrow-900 { margin-inline: 0; }
  .text-muted { color: var(--muted); font-size: 0.92em; line-height: 1.5; }
  /* Out of flow, so it never shows up as a stray flex/grid item. */
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }

  .layout-two-columns {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--gap); align-items: start;
  }
  @media (max-width: 899px) {
    /* minmax(0, 1fr), not bare 1fr: a bare `1fr` track has an implicit
       auto minimum, so a wide child (e.g. a table-wrap with a many-column
       table) blows the track out past the viewport - .app-container's
       overflow-x: hidden then silently crops it with no scrollbar. */
    .layout-two-columns { grid-template-columns: minmax(0, 1fr); }
  }
  /* doctor queue: the red-flag table has five columns (severity badge,
     service, age, wait, action) - the default 2fr/1fr split leaves the
     action button too little room and it clips inside .table-wrap's
     scroller. Widen the queue column at desktop sizes; the stats sidebar's
     content (two short kv-list rows) stays comfortably legible narrower. */
  @media (min-width: 900px) {
    .layout-two-columns.queue-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
  }
  .sticky-panel { position: sticky; top: 5.5rem; }

  /* ---- forms ---- */
  .form-group { margin-bottom: 1.4rem; }
  .form-group.cond-hidden { display: none; }
  .form-label { display: block; font-weight: 600; color: var(--ink); font-size: 0.95em; margin-bottom: 0.45rem; }
  .label { display: block; font-size: 0.84rem; font-weight: 600; color: var(--ink); }
  .form-help { color: var(--muted); font-size: 0.88em; margin-bottom: 0.5rem; line-height: 1.45; }
  .form-control {
    width: 100%;
    min-height: var(--control-h);
    padding: 0.65rem 0.9rem;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    font: inherit; color: var(--ink);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
  }
  .form-control::placeholder { color: #A8A29E; }
  .form-control:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-tint);
  }
  .form-control:user-invalid, .form-control.user-invalid-fallback { border-color: var(--danger); }
  textarea.form-control { line-height: 1.5; resize: vertical; }
  select.form-control { cursor: pointer; }
  .form-error { display: none; color: var(--danger); font-size: 0.85rem; font-weight: 500; margin-top: 0.35rem; }
  .form-group:has(:user-invalid) .form-error,
  .form-group:has(.user-invalid-fallback) .form-error { display: block; }

  .input-affix { position: relative; }
  .input-affix .form-control { padding-right: 3rem; }
  .affix-btn {
    position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer;
    color: var(--muted); padding: 0.5rem; border-radius: var(--radius-sm);
    display: inline-flex;
  }
  .affix-btn:hover { color: var(--ink); }

  /* ---- choice cards (questionnaire) ---- */
  .choice-list { display: grid; gap: 0.6rem; }
  .choice-card {
    display: flex; align-items: center; gap: 0.85rem;
    padding: 0.9rem 1.1rem;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer; font-weight: 500; color: var(--ink);
    transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast);
  }
  .choice-card:hover { border-color: var(--brand); transform: translateY(-1px); }
  @media (prefers-reduced-motion: reduce) { .choice-card:hover { transform: none; } }
  .choice-card input { width: 1.35rem; height: 1.35rem; accent-color: var(--brand); flex-shrink: 0; cursor: pointer; }
  .choice-card:has(input:checked) {
    border-color: var(--brand);
    background: var(--brand-tint);
    box-shadow: 0 0 0 1px var(--brand);
  }

  /* ---- badges / status pills ---- */
  .badge {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.28rem 0.85rem; border-radius: var(--radius-pill);
    font-size: 0.8rem; font-weight: 600; line-height: 1.35;
    background: var(--neutral-tint); color: var(--muted);
    white-space: nowrap;
  }
  .badge::before {
    content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-sm);
    background: currentColor; flex-shrink: 0;
  }
  .badge-submitted, .badge-in_review, .badge-approved_pending_prescription, .badge-scheduled
    { background: var(--info-tint); color: var(--info); }
  .badge-prescription_issued
    { background: var(--success-tint); color: var(--success); }
  .badge-awaiting_payment, .badge-needs_patient_info, .badge-synchronous_contact_required
    { background: var(--warning-tint); color: var(--warning); }
  /* action-required pills get a soft pulse on their dot */
  .badge-awaiting_payment::before, .badge-needs_patient_info::before, .badge-synchronous_contact_required::before
    { animation: pulse-dot 2.4s ease-out infinite; }
  .badge-rejected, .badge-referred, .badge-issuing_failed
    { background: var(--danger-tint); color: var(--danger); }
  /* draft, expired, cancelled* fall through to the neutral default */

  /* Unified status block (treatment hub) */
  .status-block { border: 1px solid; border-radius: var(--radius-md); padding: 11px 15px; margin: 14px 0 0; }
  .status-block-label { font-size: 0.85rem; font-weight: 650; display: flex; align-items: center; gap: 8px; }
  .status-block-dot { width: 8px; height: 8px; border-radius: var(--radius-dot); background: currentColor; flex-shrink: 0; }
  .status-block-sentence { font-size: 0.82rem; color: var(--ink-soft); margin-top: 3px; }
  .status-block.tone-amber { border-color: var(--accent-border); background: var(--warning-tint); }
  .status-block.tone-amber .status-block-label { color: var(--warning); }
  .status-block.tone-sky { border-color: var(--sky-border); background: var(--sky-tint); }
  .status-block.tone-sky .status-block-label { color: var(--sky); }
  .status-block.tone-green { border-color: var(--success-border); background: var(--success-tint); }
  .status-block.tone-green .status-block-label { color: var(--success); }
  .status-block.tone-danger { border-color: var(--danger); background: var(--danger-tint); }
  .status-block.tone-danger .status-block-label { color: var(--danger); }

  /* ---- alerts ---- */
  .alert {
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 1rem 1.25rem;
    font-size: 0.95em; line-height: 1.55;
    margin-bottom: 1rem;
  }
  .alert h3 {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 1.02em; margin: 0 0 0.5rem;
  }
  .alert h3 svg { flex-shrink: 0; }
  /* status badges (e.g. test-mode) sit directly under the page intro */
  .page-sub + .alert, .kv-list + .alert { margin-top: 1rem; }
  /* .stack's gap already separates; the built-in margin would double it */
  .stack > .alert, .alert:last-child { margin-bottom: 0; }
  .alert-info    { background: var(--info-tint);    border-color: color-mix(in srgb, var(--info) 30%, white);    color: #1E3A8A; }
  .alert-success { background: var(--success-tint); border-color: color-mix(in srgb, var(--success) 30%, white); color: #14532D; }
  .alert-warning { background: var(--warning-tint); border-color: color-mix(in srgb, var(--warning) 35%, white); color: #78350F; }
  .alert-danger  { background: var(--danger-tint);  border-color: color-mix(in srgb, var(--danger) 35%, white);  color: #7F1D1D; }
  .alert-sky     { background: var(--sky-tint);     border-color: var(--sky-border);                                              color: var(--ink); }

  /* ---- tables ---- */
  .table-wrap { overflow-x: auto; }
  .audit-table, .table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 0.95em; }
  .audit-table th, .table th {
    text-align: left; font-size: 0.72rem; text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--muted); font-weight: 600;
    padding: 0.7rem 0.9rem; border-bottom: 1.5px solid var(--border-strong);
  }
  .audit-table td, .table td { padding: 0.9rem; border-bottom: 1px solid var(--border); vertical-align: top; }
  .audit-table tbody tr:hover, .table tbody tr:hover { background: var(--paper); }
  .cell-strong { color: var(--ink); font-weight: 600; }
  .cell-meta { font-size: 0.8rem; color: var(--muted); }
  .cell-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; }
  .cell-tight { padding-left: 0.5rem; padding-right: 0.5rem; }
  /* keeps the row's action button on one line so it renders as a legible
     whole instead of wrapping mid-word inside a narrow action column */
  .cell-right { text-align: right; white-space: nowrap; }

  /* ---- misc ---- */
  .reveal summary { cursor: pointer; color: var(--brand); font-weight: 600; font-size: 0.9em; }
  .reveal[open] summary { margin-bottom: 0.85rem; }

  .empty-state { text-align: center; padding: 3.5rem 1rem; color: var(--muted); }
  .empty-state svg { opacity: 0.4; margin-bottom: 0.85rem; display: inline-block; }
  .empty-state p { font-weight: 500; margin-bottom: 1.25rem; }

  .icon-brand { color: var(--brand); flex-shrink: 0; }
  .icon-muted { color: var(--muted); flex-shrink: 0; }

  /* Key-value review lists (answer summaries, case data). Three distinct
     type levels - micro-caps section title, small muted label, ink value -
     so nothing competes in bold at the same size. Hairlines only ever sit
     BETWEEN rows (`.kv + .kv`), so none dangle after a section's last row;
     section boundaries get the stronger line. */
  .kv-list { display: flex; flex-direction: column; gap: 0.7rem; }
  .kv-list section > h3 {
    font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--accent-deep);
    margin: 0 0 0.75rem;
  }
  .kv-list section + section {
    padding-top: 1.1rem;
    border-top: 1px solid var(--border-strong);
  }
  .kv + .kv { border-top: 1px solid var(--border); padding-top: 0.7rem; }
  .kv-label { display: block; font-size: 0.78rem; font-weight: 500; color: var(--muted); line-height: 1.45; }
  .kv-value { display: block; margin-top: 0.2rem; color: var(--ink); font-weight: 500; line-height: 1.5; }

  .autosave-indicator { font-size: 0.8rem; color: var(--muted); text-align: center; }

  .progress-container { height: 0.4rem; background: var(--neutral-tint); border-radius: var(--radius-pill); overflow: hidden; }
  .progress-bar { height: 100%; background: var(--brand); border-radius: var(--radius-pill); transition: width var(--t-normal); }

  /* ---- intake: the question, the topic chips, the list, the featured card ---- */
  .intake-ask {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    padding: 32px 36px 28px; margin-bottom: 24px; box-shadow: var(--shadow-md);
  }
  .intake-ask h1 { margin-top: 4px; font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.6rem); line-height: 1.1; }
  .intake-ask .page-sub { font-size: 1rem; }
  .intake-ask .med-entry { margin-top: 18px; }
  .intake-topics { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
  .topic-chip {
    display: inline-flex; align-items: center; gap: 10px;
    min-height: 46px; padding: 0 18px 0 12px; border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-strong); background: var(--surface);
    color: var(--ink); font: inherit; font-weight: 600; font-size: 0.92rem; cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  }
  .topic-chip:hover { border-color: var(--brand); color: var(--brand); }
  .topic-chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
  .topic-chip-urgent { background: var(--accent-tint); border-color: var(--accent-border); color: var(--accent); }
  .topic-chip-urgent:hover { border-color: var(--accent); color: var(--accent); }
  .topic-chip-urgent[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
  .topic-chip-icon { display: inline-flex; width: 20px; height: 20px; }
  .topic-chip-icon .specialty-icon { stroke-width: 2.8; }

  .pathway-list { display: flex; flex-direction: column; }
  .pathway-list-label {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.78rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 12px;
  }
  .pathway-list-label::after { content: ""; flex: 1; height: 1px; background: var(--border); }
  .pathway-list-label-rest { display: none; order: -1; margin-top: 28px; }
  .pathway-list.has-selection .pathway-list-label-all { display: none; }
  .pathway-list.has-selection .pathway-list-label-rest { display: flex; }

  /* The selected pathway floats above the "Pozostałe" label; the rest keep
     their catalog order below it. */
  .pathway.is-selected { order: -2; }
  .pathway-feature { display: none; }
  .pathway.is-selected .pathway-feature { display: grid; }
  .pathway.is-selected .pathway-row { display: none; }

  .pathway-row {
    display: grid; grid-template-columns: 40px 1fr auto auto; gap: 16px; align-items: center;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 14px 18px; margin-bottom: 8px; cursor: pointer; color: var(--ink-soft);
    text-align: left; animation: rise 0.5s ease backwards;
  }
  .pathway-row.tile-lift:hover, .pathway-row.tile-lift:focus-visible { transform: none; box-shadow: var(--shadow-md); }
  .service-tile-icon {
    width: 40px; height: 40px; border-radius: var(--radius-sm);
    background: var(--accent-tint); border: 1px solid var(--accent-border); color: var(--accent);
    display: inline-flex; align-items: center; justify-content: center; align-self: start;
  }
  .service-tile-icon .specialty-icon { width: 22px; height: 22px; stroke-width: 3.2; }
  .specialty-icon {
    width: 100%; height: 100%; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .pathway-row-text { display: flex; flex-direction: column; min-width: 0; }
  .pathway-row-name { font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1.1rem; line-height: 1.25; }
  .pathway-row-sub { font-size: 0.82rem; color: var(--muted); margin-top: 2px; }
  .service-tile-note { font-size: 0.78rem; color: var(--accent-deep); margin-top: 4px; }
  .pathway-row-price { font-weight: 600; color: var(--ink); font-size: 0.95rem; white-space: nowrap; }
  .pathway-row-cta { font-weight: 600; color: var(--brand); font-size: 0.86rem; white-space: nowrap; }
  .pathway-row .scope-disclosure { padding-top: 6px; }
  .pathway-row .scope-disclosure summary { font-size: 0.78rem; }

  .pathway-feature {
    grid-template-columns: 1fr 280px; margin-bottom: 8px;
    background: var(--surface); border: 1.5px solid var(--brand); border-radius: 12px;
    overflow: hidden; box-shadow: var(--shadow-lg); animation: rise 0.4s ease backwards;
  }
  .pathway-feature-main { padding: 26px 30px 28px; min-width: 0; }
  .pathway-feature-label {
    display: block; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.13em;
    text-transform: uppercase; color: var(--accent-deep); margin-bottom: 8px;
  }
  .pathway-feature-name { font-size: 1.75rem; line-height: 1.1; letter-spacing: -0.015em; margin: 0; }
  .pathway-feature-desc { color: var(--muted); font-size: 0.95rem; line-height: 1.5; margin: 8px 0 0; }
  .pathway-duty {
    display: flex; align-items: flex-start; gap: 10px; margin-top: 14px;
    font-size: 0.86rem; color: var(--ink-soft); line-height: 1.5;
  }
  .pathway-duty strong { color: var(--ink); font-weight: 600; }
  .pathway-duty-dot {
    flex: none; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%;
    background: var(--success); box-shadow: 0 0 0 4px var(--success-tint);
  }
  .pathway-feature-scope { margin-top: 18px; }
  .pathway-feature-scope .scope-disclosure { padding-top: 0; }
  .pathway-feature-scope .scope-disclosure summary {
    font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  }
  .pathway-feature-scope .scope-disclosure-body {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px;
  }
  .pathway-feature-side {
    background: var(--panel); color: var(--panel-ink); padding: 26px 24px;
    display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
  }
  .pathway-feature-price-label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--panel-muted); font-weight: 600; }
  .pathway-feature-price {
    font-family: var(--font-display); font-size: 2.4rem; font-weight: 500; color: #fff;
    letter-spacing: -0.02em; line-height: 1; margin-top: 6px;
  }
  .pathway-feature-meta { font-size: 0.8rem; color: var(--panel-muted); margin-top: 14px; line-height: 1.5; }
  .pathway-feature-meta strong { color: var(--panel-ink); font-weight: 600; }
  .pathway-feature-side .service-tile-note { color: #E4B47E; }
  .btn-copper { background: var(--accent-lift); color: var(--panel); border-color: var(--accent-lift); }
  .btn-copper:hover { background: #D19A44; border-color: #D19A44; color: var(--panel); }
  .pathway-feature-cta { width: 100%; }

  @media (max-width: 700px) {
    .intake-ask { padding: 22px 20px 20px; border-radius: 10px; }
    .intake-topics { gap: 8px; margin-top: 16px; }
    .topic-chip { min-height: 44px; font-size: 0.86rem; padding: 0 14px 0 10px; }
    .pathway-row { grid-template-columns: 40px 1fr auto; padding: 14px; }
    .pathway-row-cta { display: none; }
    .pathway-feature { grid-template-columns: 1fr; }
    .pathway-feature-main { padding: 22px 20px; }
    .pathway-feature-name { font-size: 1.45rem; }
    .pathway-feature-scope .scope-disclosure-body { grid-template-columns: 1fr; }
    .pathway-feature-side { padding: 20px; }
    .pathway-feature-price { font-size: 2rem; }
  }

  .scope-disclosure {
    width: 100%; text-align: left;
    padding-top: 0.5rem; font-size: 0.84rem;
  }
  /* Pin the disclosure to the bottom of the tile's flex column so it always
     sits a fixed distance above the footer, regardless of how much content
     (name/desc/note) precedes it. */
  .scope-disclosure summary { cursor: pointer; color: var(--muted); font-weight: 600; font-size: 0.82rem; }
  .scope-disclosure summary:hover { color: var(--brand); }
  .scope-disclosure[open] summary { margin-bottom: 0.4rem; }
  .scope-disclosure-section { margin-top: 0.6rem; }
  .scope-disclosure-section h4 {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--muted); font-weight: 600; margin-bottom: 0.3rem;
  }
  .scope-disclosure-section ul { margin: 0; padding-left: 1.1rem; color: var(--ink-soft); }
  .scope-disclosure-section li { margin-bottom: 0.2rem; }
  .scope-disclosure-urgent { margin-top: 0.6rem; font-weight: 600; color: var(--danger); }

  /* ---- documents ---- */
  .dropzone {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.35rem; padding: 1.75rem 1rem;
    border: 2px dashed var(--border-strong); border-radius: var(--radius-md);
    cursor: pointer; text-align: center; color: var(--muted); font-size: 0.85rem;
    transition: border-color var(--t-fast), background var(--t-fast);
  }
  .dropzone:hover { border-color: var(--brand); background: var(--brand-tint); }
  .dropzone strong { color: var(--ink); font-size: 0.92rem; }
  /* one attached file: icon | name over meta | chip. The name is one line
     cut with an ellipsis (the full name is the link's title); it used to
     break mid-word, one character per line, in a 300px side card. */
  .document-upload-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.65rem;
    padding: 0.6rem 0.8rem; margin-bottom: 0.5rem;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface);
  }
  .document-upload-row.doc-file { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .doc-row-ico { display: inline-flex; color: var(--muted); }
  .doc-row-body { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
  .doc-row-name { display: block; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; font-size: 0.86rem; line-height: 1.35; color: var(--ink); }
  .doc-row-name a { color: inherit; }
  .doc-row-meta { font-size: 0.75rem; line-height: 1.4; color: var(--muted); }
  .doc-row-chip { white-space: nowrap; font-size: .7rem; padding: 1px 8px; }
  .doc-row-ok { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: .74rem; font-weight: 600; color: var(--success); }
  .doc-row-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-tint); }
  /* what an upload is doing - never silent (uploads.js) */
  .upload-status { margin: 10px 0 0; font-size: .82rem; line-height: 1.45; color: var(--muted); }
  .upload-status-ok { color: var(--success); }
  .upload-status-error { color: var(--danger); font-weight: 600; }
  .upload-form { margin: 0; }
  .upload-form-dropzone { margin-bottom: 0.75rem; }
  .upload-status:not([hidden]) { margin: 0 0 0.75rem; }
  .upload-form .btn:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
  .dropzone:focus-within { border-color: var(--brand); background: var(--brand-tint); }
  /* checklist row (questionnaire evidence): label left, upload action right */
  .evidence-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
  .evidence-row > span { display: flex; align-items: flex-start; gap: 9px; min-width: 0; font-size: .85rem; line-height: 1.45; }
  /* The state was two bare glyphs, ✓ and ✗, at body size. A cross also said
     "wrong" about something that is merely not done yet: an outlined mark
     instead, and a tick only once it is. */
  .evi-mark {
    flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px;
    border-radius: 50%; display: grid; place-items: center;
    font-style: normal; font-size: .66rem; font-weight: 700; line-height: 1;
  }
  .evi-mark-ok { background: var(--success-tint); border: 1px solid var(--success-border); color: var(--success); }
  .evi-mark-todo { background: var(--ground); border: 1px dashed var(--border-strong); }

  /* ---- status timeline ---- */
  .status-timeline { counter-reset: step; margin-top: 0.5rem; }
  .timeline-item { position: relative; padding: 0 0 1.75rem 3.1rem; }
  .timeline-item::before {
    content: ""; position: absolute; left: 1.05rem; top: 2.5rem; bottom: 0.2rem;
    width: 2px; background: var(--border);
  }
  .timeline-item:last-child { padding-bottom: 0; }
  .timeline-item:last-child::before { display: none; }
  .timeline-badge {
    position: absolute; left: 0; top: 0;
    width: 2.2rem; height: 2.2rem; border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-strong);
    background: var(--surface); color: var(--muted);
    font-weight: 700; font-size: 0.9rem;
    display: flex; align-items: center; justify-content: center;
  }
  .timeline-badge::before { counter-increment: step; content: counter(step); }
  .timeline-item.active .timeline-badge {
    border-color: var(--brand); color: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-tint);
  }
  .timeline-item.completed .timeline-badge {
    background: var(--success); border-color: var(--success); color: #fff;
  }
  .timeline-item.completed .timeline-badge::before { content: "✓"; }
  .timeline-item.completed::before { background: color-mix(in srgb, var(--success) 45%, white); }
  .timeline-title { font-weight: 700; color: var(--ink); font-family: var(--font-display); font-size: 1.05rem; }
  .timeline-time { font-size: 0.85rem; color: var(--muted); }
  .timeline-item p { font-size: 0.9rem; color: var(--muted); margin-top: 0.4rem; line-height: 1.5; }

  /* ---- wizard ---- */
  .wizard-step { display: none; }
  .wizard-step.active { display: block; }
  .wizard-section-title {
    display: flex; align-items: center; gap: 0.6rem;
    font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.01em;
    padding-bottom: 0.75rem; margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
  }
  .wizard-section-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: var(--radius-sm); flex-shrink: 0;
    background: var(--brand-tint); color: var(--brand);
    font-family: var(--font-body); font-size: 0.9rem; font-weight: 700;
  }
  .wizard-footer {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; flex-direction: column; gap: 0.75rem;
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
    margin: 2rem calc(-1 * var(--card-pad)) calc(-1 * var(--card-pad));
    padding: 1rem var(--card-pad);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }
  .wizard-footer-row { display: flex; gap: 0.75rem; }
  .wizard-footer-row .btn { flex: 1; }
  .wizard-footer-row .wizard-back { flex: 0 0 auto; min-width: 110px; }
  .wizard-exit-link {
    align-self: center;
    background: none; border: none; cursor: pointer;
    font-family: var(--font-body); font-size: 0.88rem; font-weight: 600;
    color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
    padding: 0.2rem 0.5rem;
  }
  .wizard-exit-link:hover { color: var(--ink); }

  /* ---- decision panel (doctor) ---- */
  /* A5 two-lane decision panel (variant C, spec 2026-07-15). */
  .decision-finalize { padding-top: 16px; border-top: 1px solid var(--border); }
  .decision-finalize h3, .decision-inquiry h3 { font-family: var(--font-display); font-size: 1.1rem; margin-top: 0; margin-bottom: 0.3rem; }
  .decision-finalize > p { font-size: 0.8rem; color: var(--muted); line-height: 1.45; margin-bottom: 0.9rem; }
  .decision-inquiry { border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 1rem; margin-top: 0.75rem; }
  .decision-inquiry > p { font-size: 0.8rem; color: var(--muted); line-height: 1.45; margin-bottom: 0.9rem; }
  .decision-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.5rem 0 0.9rem; }
  .decision-pill { border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 0.25rem 0.75rem; cursor: pointer; font-size: 0.85rem; font-weight: 500; }
  .decision-pill:has(input:checked) { background: var(--ink); color: #fff; border-color: var(--ink); }
  .decision-pill input { position: absolute; opacity: 0; pointer-events: none; }
  .decision-inquiry-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

  /* ---- checklist (admin dashboard) ---- */
  .check-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--border); }
  .check-item:last-child { border-bottom: none; }
  .check-item-icon { font-size: 1.35rem; line-height: 1.3; }
  .check-item-icon.ok { color: var(--success); }
  .check-item-icon.warn { color: var(--warning); }
  .check-item p { font-size: 0.88rem; color: var(--muted); margin-top: 0.15rem; line-height: 1.5; }
  .check-item b, .check-item strong { font-family: var(--font-display); font-size: 1.02rem; }

  /* ---- auth ---- */
  .auth-card { max-width: 480px; margin: clamp(1.5rem, 8vh, 5rem) auto; }
  .auth-head { text-align: center; margin-bottom: 2rem; }
  .auth-illustration { display: block; width: 196px; height: auto; margin: 0 auto 1rem; animation: rise 0.6s ease backwards; }
  .auth-head .app-logo-mark { color: var(--brand); margin-bottom: 0.85rem; }
  .auth-head p { font-size: 0.95rem; max-width: 34ch; margin-inline: auto; }
  .auth-title {
    font-size: clamp(2rem, 1.6rem + 1.6vw, 2.6rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    margin-top: 0.35rem;
  }
  .auth-foot {
    margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--border);
    font-size: 0.82rem; color: var(--muted); text-align: center; line-height: 1.5;
  }

  /* ---- scroll reveal (see static/js/reveal.js) ---- */
  .reveal-init { opacity: 0; transform: translateY(24px) scale(0.985); }
  .reveal-init.is-revealed {
    opacity: 1; transform: none;
    transition:
      opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--ri, 0) * 70ms),
      transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--ri, 0) * 70ms);
  }

  /* ---- entrance utility (see static/js/premium.js) ---- */
  .enter { animation: rise 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: var(--d, 0s); }
}

/* ============================================================ pages */
@layer pages {
  .page-col { max-width: 680px; margin: 0 auto; }
  .sect-head { margin-bottom: 26px; }
  .sect-title { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.15rem); margin-top: 8px; }
  .treatment-card {
    display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 24px 28px; margin-bottom: 0;
    box-shadow: var(--shadow-sm);
    transition: transform var(--t-normal), box-shadow var(--t-normal), border-color var(--t-fast);
  }
  .treatment-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
  /* A card that is waiting on the patient states it at the edge. */
  .treatment-card:has(.status-block.tone-amber) { border-left: 3px solid var(--accent); box-shadow: var(--shadow-md); }
  .treatment-card:has(.status-block.tone-sky) { border-left: 3px solid var(--sky); }
  .treatment-doctor { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; border-radius: var(--radius-md); padding: 6px 8px; margin: -6px -8px; }
  a.treatment-doctor:hover { background: var(--paper); }
  .treatment-doctor-body { display: flex; flex-direction: column; min-width: 0; }
  .treatment-doctor-name { font-weight: 600; font-size: 0.95rem; }
  .treatment-doctor-meta, .treatment-doctor-away { font-size: 0.8rem; color: var(--muted); }
  .treatment-doctor-away { color: var(--warning); }
  .treatment-doctor-chevron { margin-left: auto; color: var(--accent-deep); font-size: 1.2rem; }
  .treatment-doctor-pending .specialty-icon { width: 44px; height: 44px; flex-shrink: 0; color: var(--accent); }
  .treatment-name { font-family: var(--font-display); font-size: 1.32rem; margin-top: 13px; }
  .treatment-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: auto; padding-top: 13px; }
  /* State on the left, move on the right, one line. The status block was a
     full-width panel because it carried the sentence; with the sentence
     behind the disclosure it became a wide amber bar holding three words,
     with the button alone a row below (DECISIONS.md 2026-09-01). */
  .treatment-foot {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 18px; margin-top: 14px;
  }
  .treatment-state { min-width: 0; }
  .treatment-foot .status-block {
    display: inline-block; margin: 0; padding: 7px 13px;
  }
  .treatment-foot .more-info { margin-top: 8px; }
  .treatment-foot .treatment-actions { margin-top: 0; padding-top: 2px; flex: none; }
  @media (max-width: 599px) {
    .treatment-foot { flex-direction: column; align-items: stretch; gap: 12px; }
    .treatment-foot .treatment-actions { justify-content: flex-start; }
  }
  .btn-price { font-weight: 400; opacity: 0.85; border-left: 1px solid rgba(255, 255, 255, 0.35); padding-left: 8px; margin-left: 2px; }
  .btn-secondary .btn-price { border-left-color: var(--border-strong); }
  .history-more { display: block; text-align: center; color: var(--accent-deep); font-weight: 500; font-size: 0.88rem; margin: 10px 0; text-decoration: none; }

  /* Reduced-motion parity with the .tile-lift precedent (components layer):
     that rule can't reach these two from there, because pages-layer
     declarations always beat components-layer ones regardless of
     specificity, so the zeroing override has to live in this layer,
     alongside the hover transforms it's canceling. */
  @media (prefers-reduced-motion: reduce) {
    .treatment-card { transition: none; }
    .treatment-card:hover { transform: none; }
  }

  /* ---- landing skeleton (entry-architecture spec §4): full-width bands
     with a centered ~1080px content column. The classic "break out of a
     centered, padded ancestor" trick: it aligns to the viewport edges
     regardless of `.app-main`'s own max-width as long as that ancestor's
     left/right padding stay symmetric (they do - both come from the same
     `clamp()`). ---- */
  /* padding-bottom 0: the landing footer follows this main directly; any
     bottom padding paints a stray cream strip between the last white band
     and the navy footer. */
  .patient-home .app-main { padding-top: 0; padding-bottom: 0; }
  /* `.hero-scene` is included here too: it used to ride along on the
     template also carrying `.band-cream` for this full-bleed breakout +
     padding-block mechanic (its own rule below only supplies color/
     background/overflow), which left `.hero-scene` unable to stand alone.
     Now it can, so the template only needs the one class. */
  .band-cream, .band-white, .band-mint, .band-navy, .hero-scene {
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
    padding-block: var(--band-pad);
  }
  .band-cream { background: var(--paper); }
  .band-white { background: var(--surface); }
  .band-mint  { background: var(--brand-tint); }
  .band-navy {
    position: relative; overflow: clip; color: rgba(255, 255, 255, 0.85);
    background: var(--brand);
  }
  .band-navy::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: var(--noise); mix-blend-mode: overlay; opacity: 0.14;
  }
  .band-navy > .landing-col { position: relative; z-index: 1; }
  .band-navy h1, .band-navy h2, .band-navy h3 { color: #fff; }
  /* --accent-deep fails AA on navy; this lighter amber passes for the small
     uppercase eyebrow. */
  .band-navy .eyebrow { color: #DFA057; }
  /* --accent-deep misses AA on mint by a hair (4.49:1); this darker amber passes. */
  .band-mint .eyebrow { color: #935912; }
  .btn-on-navy { background: #fff; color: var(--ink); }
  .btn-on-navy:hover { background: var(--brand-tint); color: var(--ink); }
  .landing-col { max-width: 1080px; margin: 0 auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
  .landing-col + .landing-col { margin-top: 22px; }

  /* ---- hero ---- */
  .hero-grid { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
  .hero-copy { flex: 1 1 320px; }

  .hero-scene {
    position: relative; overflow: clip; color: rgba(255, 255, 255, 0.8);
    background: var(--brand);
    /* Extend the scene up underneath the sticky glass header: without this,
       the header's own flow slot is cream, and during the first ~100px of
       scroll (backing already faded, hero not yet at the top) the glass
       composites that cream to grey. 120px safely exceeds the header's
       height at every width, including the 720-1000px range where the nav
       pills wrap; the padding compensates so content never moves. */
    margin-top: -120px;
    padding-top: calc(var(--band-pad) + 120px);
  }
  .hero-scene::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: var(--noise); mix-blend-mode: overlay; opacity: 0.16;
  }
  .hero-glow { position: absolute; inset: -14% 0; pointer-events: none; will-change: transform; }
  .hero-glow-in {
    position: absolute; inset: 0;
    background: none;
  }
  @keyframes glow-drift { from { transform: none; } to { transform: translate3d(0, -20px, 0) scale(1.045); } }
  .hero-scene > .landing-col { position: relative; z-index: 1; }
  .hero-scene .hero-eyebrow { color: #DFA057; margin-bottom: 14px; }

  .home-greeting {
    margin-bottom: 0; color: #fff;
    font-size: clamp(2.75rem, 2rem + 2.7vw, 3.9rem);
    line-height: 1.06; letter-spacing: -0.015em;
  }
  /* masked line reveal; padding/margin pair leaves room for descenders under overflow:hidden */
  .greeting-line { display: block; overflow: hidden; padding-bottom: 0.09em; margin-bottom: -0.09em; }
  .greeting-line-in {
    display: block; transform: translateY(114%);
    animation: line-up 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: var(--ld, 0s);
  }
  @keyframes line-up { to { transform: none; } }
  .hero-tagline { color: #DFA057; }
  .hero-scene .hero-subline { color: rgba(255, 255, 255, 0.76); font-size: 1.12rem; max-width: 46ch; margin-top: 18px; }
  .hero-cta { display: flex; align-items: center; gap: 14px; margin-top: 30px; flex-wrap: wrap; }

  /* `.enter`'s generic `rise` keyframes end at `transform: none` with
     fill-mode `both`, which would pin that transform forever and cancel the
     card's static translateY(46px) bridge + hover lift below (an animated
     property outranks a normal declaration for as long as the animation's
     fill-mode keeps it applying). `rise-card` ends exactly at the card's
     resting transform, and fill-mode `backwards` (not `both`/`forwards`)
     only applies before the animation starts - once it finishes, the static
     transform/hover declarations below take back over. */
  @keyframes rise-card { from { opacity: 0; transform: translateY(84px) scale(0.97); } to { opacity: 1; transform: translateY(46px) scale(1); } }

  .hero-doctor-card {
    flex: 0 1 292px; position: relative; z-index: 5;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 26px 28px 22px; border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.10);
    -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.22); border-top-color: rgba(255, 255, 255, 0.44);
    transform: translateY(46px);
    transition: transform var(--t-normal);
  }
  .hero-doctor-card:hover { transform: translateY(42px); }
  /* Keep the shared timing-function and --d delay from `.enter` (pages
     layer beats components layer, so only these longhands need overriding). */
  .hero-doctor-card.enter { animation-name: rise-card; animation-duration: 0.9s; animation-fill-mode: backwards; }
  .hero-doctor-card .eyebrow { color: #E4B47E; margin-bottom: 12px; }
  .hero-doctor-portrait {
    width: 96px; height: 96px; border-radius: var(--radius-sm); object-fit: cover; margin-bottom: 12px;
    border: 2px solid rgba(255, 255, 255, 0.55);
    background: var(--brand-tint);
  }
  .hero-doctor-portrait.doctor-avatar-initials {
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.5rem; color: var(--brand);
  }
  .hero-doctor-name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: #fff; }
  .hero-doctor-meta { font-size: 0.84rem; color: rgba(255, 255, 255, 0.66); margin: 3px 0 12px; }
  .hero-doctor-card .availability-pill { color: #8CE8B4; background: rgba(46, 160, 92, 0.22); border: 1px solid rgba(140, 232, 180, 0.25); }
  .hero-doctor-card .availability-pill-away { color: #F4C892; background: rgba(199, 123, 41, 0.22); border-color: rgba(244, 200, 146, 0.3); }
  .hero-doctor-link {
    margin-top: 14px; padding-top: 12px; width: 100%;
    font-size: 0.86rem; font-weight: 600;
    border-top: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.85);
  }
  .hero-doctor-link span { transition: transform var(--t-fast); display: inline-block; }
  .hero-doctor-card:hover .hero-doctor-link span { transform: translateX(3px); }

  .hero-scene .trust-chips { margin-top: clamp(40px, 5vw, 64px); padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.13); }
  .hero-scene .trust-chip { color: rgba(255, 255, 255, 0.85); border-left-color: rgba(255, 255, 255, 0.13); }
  .hero-scene .trust-chip svg { width: 18px; height: 18px; stroke: #DFA057; stroke-width: 2; flex: none; }

  @media (prefers-reduced-motion: reduce) {
    .greeting-line-in { animation: none; transform: none; }
    .hero-glow-in { animation: none; }
  }
  @media (max-width: 899px) {
    .hero-doctor-card { transform: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(30, 44, 76, 0.85); }
    .hero-doctor-card:hover { transform: none; }
    /* Card's static transform is `none` here, so the entrance must end at
       `none` too - reset back to the generic `rise` keyframes (ends at
       `transform: none`) or mobile would flight in from rise-card's 84px
       start and then, once fill-mode `backwards` stops applying, snap by
       46px to the mobile resting position. */
    .hero-doctor-card.enter { animation-name: rise; }
    .btn-ghost-navy { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(30, 44, 76, 0.85); }
  }

  .availability-dot { width: 8px; height: 8px; border-radius: var(--radius-dot); background: var(--success); display: inline-block; margin-top: 2px; }
  /* The dot and the sentence it belongs to. `.avail-line` had no rule of its
     own anywhere in the sheet, so the mark sat hard against the "P" of
     "Przyjmuje pacjentów" on every screen that renders the snippet
     (DECISIONS.md 2026-09-01). */
  .avail-line { display: inline-flex; align-items: center; gap: 6px; }
  .avail-line .availability-dot { margin-top: 0; flex: none; }
  .availability-pill {
    display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-pill);
    padding: 3px 10px; font-size: 0.78rem; font-weight: 600;
    color: var(--success); background: var(--success-tint);
  }
  .availability-pill .availability-dot { margin-top: 0; }
  .availability-pill-away { color: var(--warning); background: var(--warning-tint); }

  /* ---- Twoje leczenie: 2-up grid ---- */
  .treatment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
  .treatment-grid .treatment-card { margin-bottom: 0; }
  @media (max-width: 700px) {
    .treatment-grid { grid-template-columns: 1fr; }
  }

  /* ---- Nasze usługi ---- */
  .svc-grid, .prog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
  @media (max-width: 980px) {
    .svc-grid, .prog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 560px) {
    .svc-grid, .prog-grid { grid-template-columns: 1fr; }
  }
  .svc-tile-lg, .prog-tile {
    display: flex; flex-direction: column;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 24px 20px;
    color: inherit;
  }
  /* WKRÓTCE sits in the same corner on every tile, independent of how long
     the title/description run (uneven chip rows read as misalignment). */
  .svc-tile-lg { position: relative; }
  .prog-tile { position: relative; }
  .prog-soon {
    position: absolute; top: 14px; right: 14px;
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em;
    color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 2px 6px; background: var(--paper);
  }
  .svc-icon, .prog-icon {
    width: 42px; height: 42px; border-radius: var(--radius-sm); border: 1.4px solid var(--accent);
    background: transparent; color: var(--accent); display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
  }
  .svc-icon svg, .prog-icon svg { width: 20px; height: 20px; }
  /* Pathway icons (48-unit viewBox) need a heavier stroke than the 24-unit
     service glyphs to keep the same optical weight at chip size. */
  .prog-icon .specialty-icon { width: 22px; height: 22px; stroke-width: 3.4; }
  .svc-title, .prog-title {
    font-family: var(--font-display); font-weight: 600; color: var(--ink); font-size: 1.18rem; margin-bottom: 4px;
  }
  .svc-desc, .prog-desc { font-size: 0.82rem; color: var(--muted); line-height: 1.4; min-height: 2.6em; }
  /* The tile corner is a placement, not the chip: used inline (price rows,
     the team page) the same chip must stay in the text flow, or it escapes
     to the nearest positioned ancestor and floats off in a band corner. */
  .svc-tile-lg .svc-tag, .svc-tile .svc-tag { position: absolute; top: 16px; right: 16px; }
  .svc-tag {
    display: inline-block; vertical-align: middle;
    font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em;
    /* --accent-deep misses AA on --accent-tint by a hair (4.47:1); this
       darker amber (same fix as .band-mint .eyebrow) passes at 4.84:1. */
    color: #935912; background: var(--accent-tint); border-radius: var(--radius-pill); padding: 3px 9px;
  }
  .svc-foot, .prog-foot {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border);
    font-size: 0.88rem; font-weight: 600;
  }
  .svc-go, .prog-go { color: var(--accent-deep); transition: transform var(--t-fast); }
  .svc-tile-lg:hover .svc-go, .prog-tile:hover .prog-go { transform: translateX(3px); }

  /* ---- status chips (program tiles) ---- */
  .chip { display: inline-block; border-radius: var(--radius-pill); padding: 2px 10px; font-size: 0.78rem; font-weight: 600; }
  .chip-brand { background: var(--brand-tint); color: var(--ink); }
  .chip-accent { background: var(--accent-tint); color: var(--accent-deep); }
  .chip-ok { background: var(--success-tint); color: var(--success); }
  .chip-danger { background: var(--danger-tint); color: var(--danger); }
  /* A state that is neither good nor a problem - retired, closed, finished.
     A bare `.chip` has no ground at all, so it read as loose text rather
     than as the same kind of thing as the chip beside it. */
  .chip-muted { background: var(--paper); color: var(--muted); border: 1px solid var(--border); }
  .prog-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  /* Due item as a quiet one-liner, not a wrapping pill (visual noise). */
  .prog-due {
    display: block; margin-top: 6px;
    font-size: 0.76rem; font-weight: 600; color: var(--accent-deep);
  }
  .prog-due::before { content: "\2022"; margin-right: 5px; }

  /* ---- Jeden lekarz band ---- */
  .doctor-band {
    display: flex; align-items: center; justify-content: space-between;
    gap: 40px; flex-wrap: wrap;
    background: none; border: none; padding: 0;
  }
  .doctor-band-copy { flex: 1 1 340px; max-width: 560px; }
  .doctor-band-heading { font-size: var(--fs-h2); line-height: 1.1; margin: 10px 0 6px; }
  .doctor-band-sub { color: rgba(255, 255, 255, 0.85); font-size: 1rem; }
  .doctor-band-figure { flex: 0 1 320px; position: relative; }
  .doctor-band-photo { width: 100%; aspect-ratio: 4 / 4.6; border-radius: var(--radius-md); object-fit: cover; display: block; }
  .doctor-band-plate {
    position: absolute; left: 14px; right: 14px; bottom: 14px;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px; border-radius: var(--radius-md);
    background: rgba(17, 20, 24, 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.22); border-top-color: rgba(255, 255, 255, 0.4);
  }
  .doctor-band-plate b { color: #fff; font-size: 0.95rem; display: block; }
  .doctor-band-plate span span { color: rgba(255, 255, 255, 0.65); font-size: 0.76rem; }
  @media (max-width: 899px) {
    .doctor-band-plate { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(30, 44, 76, 0.85); }
  }
  .doctor-band-checks { list-style: none; margin: 24px 0 28px; }
  .doctor-band-check { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 0.95rem; margin-bottom: 10px; }
  .doctor-band-check i {
    color: #DFA057; font-style: normal; font-weight: 700; font-size: 0.9rem; flex-shrink: 0;
  }

  /* ---- landing footer (spec §4.7) ---- */
  .landing-footer {
    position: relative; overflow: clip;
    left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw;
    background: var(--rail); color: var(--rail-ink); padding-top: 42px;
  }
  .landing-footer::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: var(--noise); mix-blend-mode: overlay; opacity: 0.10;
  }
  /* Rebuilt 2026-08-31, again 2026-09-17. Three parts: who we are and how
     to reach us, the link columns, and the emergency line as its own slim
     strip; then one bottom row with the company and the legal sentence.
     Shared by the portal footer and the public one. The contact details
     were boxed chips in a 270px column, which broke the address in two. */
  .site-foot { position: relative; z-index: 1; }
  .site-foot-top {
    display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 34px 72px; padding-bottom: 30px;
  }
  @media (max-width: 899px) { .site-foot-top { grid-template-columns: minmax(0, 1fr); gap: 30px; } }

  .site-foot-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
  .site-foot-logo img { display: block; }
  .site-foot-logo span {
    font-family: var(--font-display); font-size: 1.14rem; font-weight: 600;
    letter-spacing: -.014em; color: #fff;
  }
  .site-foot-line {
    margin: 12px 0 18px; max-width: 34ch;
    font-size: .9rem; line-height: 1.55; color: rgba(255, 255, 255, 0.62);
  }
  .site-foot-reach { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
  .site-foot-reach > li {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    font-size: .88rem; color: rgba(255, 255, 255, 0.78); font-variant-numeric: tabular-nums;
  }
  .site-foot-reach svg { flex: 0 0 auto; color: var(--accent-lift); }
  .site-foot-reach a { color: #fff; text-decoration: none; overflow-wrap: anywhere; transition: color var(--t-fast); }
  .site-foot-reach a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .site-foot-note { margin: 16px 0 0; max-width: 38ch; font-size: .78rem; line-height: 1.5; color: rgba(255, 255, 255, 0.42); }

  .site-foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 32px; }
  @media (max-width: 599px) { .site-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .site-foot-col { font-size: .86rem; min-width: 0; }
  .site-foot-col b {
    display: block; margin-bottom: 12px;
    color: #DFA057; font-size: .69rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  }
  .site-foot-col a,
  .site-foot-col span {
    display: block; padding: 4px 0; line-height: 1.5; color: rgba(255, 255, 255, 0.7);
  }
  .site-foot-col span { color: rgba(255, 255, 255, 0.42); }
  .site-foot-col a { text-decoration: none; transition: color var(--t-fast); }
  .site-foot-col a:hover { color: #fff; }

  /* The one line on this page that could matter at 3am does not belong in
     the legal small print - but it is one line, not a billboard. */
  .site-foot-alert {
    display: flex; align-items: center; gap: 4px 10px;
    margin: 0; padding: 10px 14px; font-size: .84rem; line-height: 1.4;
    border: 1px solid rgba(192, 138, 53, 0.3); border-radius: var(--radius-md);
    background: rgba(192, 138, 53, 0.09);
  }
  .site-foot-alert b { flex: 0 0 auto; }
  .site-foot-alert > span:last-child { flex: 1 1 auto; min-width: 0; }
  /* Narrow: the icon keeps its column and the two sentences stack beside it. */
  @media (max-width: 599px) {
    .site-foot-alert { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: start; }
    .site-foot-alert-ico { grid-row: 1 / span 2; margin-top: -2px; }
    .site-foot-alert b, .site-foot-alert > span:last-child { grid-column: 2; }
  }
  .site-foot-alert-ico {
    flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(192, 138, 53, 0.18); color: var(--accent-lift);
  }
  .site-foot-alert b { color: #fff; font-weight: 600; }
  .site-foot-alert > span:last-child { color: rgba(255, 255, 255, 0.55); }
  .site-foot-bottom {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 28px;
    margin-top: 22px; padding: 16px 0 22px; border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: .76rem; line-height: 1.5; color: rgba(255, 255, 255, 0.48);
  }
  .site-foot-bottom > span:first-child { color: rgba(255, 255, 255, 0.72); white-space: nowrap; }
  /* keep the bottom row readable above the fixed bottom nav (this must live
     in the pages layer: the `padding` shorthand above would beat a
     components-layer override regardless of specificity). 1099, not 719:
     that is where the rail collapses and `.mobile-nav` starts being fixed
     over the bottom of the page. */
  @media (max-width: 1099px) {
    .role-patient .site-foot-bottom { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
  }

  [x-cloak] { display: none !important; }
  .mt-1 { margin-top: 1rem; }
  .mt-2 { margin-top: 2rem; }
  .mb-1 { margin-bottom: 1rem; }
  .my-15 { margin-block: 1.5rem; }
  /* eyebrow used as a page-section label (e.g. Moje leczenie); top margin
     only when content precedes it, so a band-leading label stays flush */
  .section-label { margin-bottom: 0.9rem; }
  * + .section-label { margin-top: 2.25rem; }
  .page-sub + .page-sub { margin-top: 0.5rem; }
  .req { color: var(--danger); margin-left: 0.15rem; }
  .row-between { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

  .inset-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1.25rem; }
  .inline-form { display: inline-block; margin-right: 0.25rem; }
  .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; align-items: end; }
  .stat-num { display: block; font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; letter-spacing: -0.01em; margin-top: 0.25rem; }
  .title-danger { color: var(--danger); }
  .title-success { color: var(--success); }
  .scan-ok { font-size: 0.78rem; color: var(--success); font-weight: 600; }

  @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .wizard-step.active { animation: fadeUp 0.25s ease; }
  .wizard-head { margin-bottom: 1.25rem; display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 1rem; }
  .wizard-progress-wrap { margin-bottom: 2.25rem; }
  /* Task 4 (SDD 16 A2): questionnaire doctor strip - names the doctor who
     will read the answers, between the page head and the wizard. */
  .questionnaire-doctor-strip {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1.25rem;
  }
  .questionnaire-doctor-strip-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
  }
  .questionnaire-doctor-strip-text { color: var(--ink-soft); font-size: 0.92rem; }
  .questionnaire-doctor-strip .availability-pill { align-self: flex-start; }

  .status-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
  .refund-state { color: var(--ink-soft); font-size: 0.9rem; margin-bottom: 1.25rem; }
  .turn-pill {
    display: inline-flex; background: var(--warning); color: #fff;
    border-radius: var(--radius-pill); padding: 0.2rem 0.7rem;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    margin-bottom: 0.75rem;
  }
  .action-panel {
    border: 1px solid color-mix(in srgb, var(--warning) 45%, white);
    background: var(--warning-tint);
    border-radius: var(--radius-lg);
    padding: var(--card-pad);
    margin-top: 2rem;
  }
  .action-panel h3 {
    color: #78350F; margin-top: 0; margin-bottom: 0.6rem;
    font-family: var(--font-display); font-size: 1.25rem;
    display: flex; align-items: center; gap: 0.5rem;
  }
  .action-panel h3 svg { flex-shrink: 0; }
  .action-panel .doctor-message:not(:last-child) { margin-bottom: 1rem; }
  .action-panel-success { border-color: color-mix(in srgb, var(--success) 40%, white); background: var(--success-tint); }
  .action-panel-success h3 { color: #14532D; }
  .action-panel-danger { border-color: color-mix(in srgb, var(--danger) 40%, white); background: var(--danger-tint); }
  .action-panel-danger h3 { color: #7F1D1D; }
}

/* ---- doctor choice ---- */
.doctor-card-list { display: flex; flex-direction: column; gap: 0.7rem; max-width: 520px; margin: 0 auto; }
.doctor-card {
  display: flex; align-items: center; gap: 0.9rem; cursor: pointer;
  background: var(--surface); border: 2px solid var(--border);
  border-radius: var(--radius-lg); padding: 0.9rem 1.1rem;
}
.doctor-card:has(input:checked) {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint);
}
.doctor-card input[type="radio"] { position: absolute; opacity: 0; }
.doctor-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto; object-fit: cover;
  box-shadow: 0 0 0 3px var(--paper), 0 2px 6px rgba(13, 17, 23, 0.10);
}
.doctor-avatar-initials {
  background: var(--brand-tint); color: var(--brand-strong); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.doctor-card-name { font-weight: 700; color: var(--ink); display: block; }
.doctor-card-bio { font-size: 0.86rem; color: var(--ink-soft); display: block; margin-top: 0.2rem; }
/* same full-width primary CTA as the other flow pages, capped to the
   doctor-card column so back/forward affordances line up step to step */
.doctor-choice-cta { display: flex; width: 100%; max-width: 520px; margin: 1.2rem auto 0; }
.doctor-card-static { cursor: default; }
.doctor-card-specialty {
  display: block; font-size: 0.78rem; font-weight: 700; color: var(--brand);
  text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.15rem;
}
/* Task 3 (SDD 16 A2): richer introduction cards. Scoped to `.doctor-card-list`
   (only the introduction page) so the compact static attribution cards
   elsewhere (patient_confirm_credit.html, patient_status_detail.html) keep
   their original layout. These overrides - and the ones above - are
   unlayered, so a scoped override needs matching (unlayered) origin plus
   higher specificity: an `@layer pages` rule would never win here, since
   unlayered author styles always beat any layered rule regardless of
   specificity. */
.doctor-card-list .doctor-card {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: start;
  gap: 0.9rem;
}
.doctor-card-list .doctor-avatar { width: 64px; height: 64px; }
.doctor-card-list .doctor-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
/* Meet-the-doctors first-visit row (SDD 05 amendment 2026-07-14).
   Deliberately unlayered - same reason as the doctor-card overrides above. */
.meet-doctors-sub { color: var(--muted); margin: 0.25rem 0 1.25rem; }
.meet-doctors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.meet-doctor-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  text-align: center;
}
.meet-doctor-card .doctor-avatar { width: 72px; height: 72px; }
.meet-doctor-name { font-weight: 600; color: var(--ink); }
.meet-doctor-specialty { font-size: 0.9rem; color: var(--muted); }
.meet-doctors-cta { margin-top: 1.5rem; text-align: center; }
/* Task 4 (SDD 16 A2): questionnaire doctor strip - same unlayered-override
   reasoning as `.doctor-card-list .doctor-avatar` above: the shared
   `.doctor-avatar` rule is unlayered, so a smaller size here must be
   unlayered too or it would never win. */
.questionnaire-doctor-strip .doctor-avatar { width: 40px; height: 40px; font-size: 0.85rem; }
/* Treatment cards (patient_home.html + patient_treatment.html, both via
   snippets/treatment_card.html): 44px photo avatar with a white ring, per
   spec Decision 5. Same unlayered-override reasoning as above. */
.treatment-card .doctor-avatar { width: 44px; height: 44px; }
/* Outside `@layer pages`, like the sizes above: a layered rule cannot shrink
   the unlayered 56px default however specific it is. */
.trt-stage-who .doctor-avatar { width: 28px; height: 28px; font-size: .62rem; }
.track-body .doctor-avatar { width: 22px; height: 22px; font-size: .56rem; box-shadow: 0 0 0 1px var(--border); }
.doctor-attribution { margin-bottom: 1rem; }
.doctor-message {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 0.9rem 1rem;
  display: flex; flex-direction: column; gap: 0.6rem; text-align: left;
}
.doctor-message-head { display: flex; align-items: center; gap: 0.6rem; }
.doctor-avatar-sm { width: 40px; height: 40px; }
.doctor-message-name { display: block; font-weight: 700; color: var(--ink); font-size: 0.95rem; }
.doctor-message-time { display: block; font-size: 0.78rem; color: var(--muted); }
.doctor-message-body { color: var(--ink-soft); line-height: 1.55; margin: 0; }
.handover-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.1rem 1.2rem;
  display: flex; flex-direction: column; gap: 0.8rem; text-align: left;
}
.handover-panel > strong { color: var(--ink); }
.handover-panel p { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.handover-choice {
  display: flex; align-items: center; gap: 0.6rem;
  border: 2px solid var(--border); border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem; cursor: pointer; font-weight: 500; color: var(--ink);
}
.handover-choice:has(input:checked) {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-tint);
}
.handover-switch { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; font-size: 0.9rem; }

/* Doctor profile page */
.doctor-profile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 28px; text-align: center; }
.doctor-profile-header { display: flex; flex-direction: column; align-items: center; }
.doctor-profile-photo { width: 112px; height: 112px; border-radius: var(--radius-sm); object-fit: cover; margin-bottom: 14px; font-size: 1.7rem; }
.doctor-profile-specialties { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; margin: 0.5rem 0 0; }
.doctor-profile-pwz { color: var(--muted); font-size: 0.82rem; margin-top: 0.4rem; }
.doctor-profile-relationship { color: var(--muted); font-size: 0.88rem; margin-top: 0.3rem; }
.doctor-profile-availability {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  margin-top: 0.6rem; font-size: 0.88rem; color: var(--ink-soft);
}
.doctor-profile-away { color: var(--warning); font-weight: 600; }
.availability-dot-away { background: var(--warning); }
.doctor-profile-quote {
  margin: 1.6rem 0 0; padding: 1.1rem 1.3rem; text-align: left;
  background: var(--accent-tint); border-left: 4px solid var(--accent-deep);
  border-radius: var(--radius-md);
}
.doctor-profile-quote p { margin: 0; color: var(--accent-deep); font-size: 1.05rem; font-style: italic; line-height: 1.5; }
.doctor-profile-quote cite { display: block; margin-top: 0.5rem; color: var(--accent-deep); font-size: 0.82rem; font-style: normal; font-weight: 600; }
.doctor-profile-bio { margin-top: 1.6rem; text-align: left; color: var(--ink-soft); line-height: 1.6; }
.doctor-profile-bio h2 { font-size: 1rem; color: var(--ink); margin-bottom: 0.5rem; }
.doctor-profile-bio p + p { margin-top: 0.65rem; }
.doctor-profile-cta {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-top: 1.8rem;
}
/* ---- the way up ----
   Replaced `.back-link`, which was the word "Wstecz" set at 0.92rem in
   --muted in the top-left corner: barely a control, and it never said where
   it went (DECISIONS.md 2026-08-31). The chip names its destination, and
   sticks, because the pages that most need a way out are the long ones.

   Unlayered, like the `.back-link` it replaces, so a page-layer rule cannot
   silently outrank it. */
.page-back {
  position: sticky; top: 12px; z-index: 30;
  display: flex; align-items: center; gap: 14px;
  /* Shrink-wrapped: floating, it is a bar around a chip and a title, not a
     full-width white band with 700px of nothing after the title. */
  width: max-content; max-width: 100%;
  margin-bottom: 18px; padding: 6px 15px 6px 6px;
  border: 1px solid transparent; border-radius: var(--radius-lg);
  transition: background var(--t-normal), border-color var(--t-normal), box-shadow var(--t-normal);
}
/* Doctor, admin and visitor shells have a sticky top bar of their own to
   clear; the patient shell has a rail instead and nothing above the content.
   Keyed off the bar actually being on the page, since the body carries no
   class for those roles. The JS reads this same `top`, so the two cannot
   disagree about where "stuck" begins. */
body:has(.app-header) .page-back { top: calc(62px + 12px); }
/* Public pages open on a full-bleed band, so `.app-main` has no top padding
   - and a margin on the bar itself would collapse straight through it and
   leave the bar starting already pinned, with its floating box on, before a
   single pixel has scrolled. Padding on the parent does not collapse. */
.public-site .app-main:has(> .page-back) { padding-top: 20px; }
.page-back.is-stuck {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-color: var(--border); box-shadow: var(--shadow-md);
}
.page-back-chip {
  display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
  min-height: 36px; padding: 0 15px 0 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  color: var(--ink); font-size: 0.86rem; font-weight: 600; text-decoration: none;
  transition: border-color var(--t-fast), box-shadow var(--t-normal), color var(--t-fast);
}
.page-back-chip:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.page-back-chip > svg { flex: 0 0 auto; color: var(--accent-deep); transition: transform var(--t-fast); }
.page-back-chip:hover > svg { transform: translateX(-2px); }
/* The page's own name, so the bar still answers "where am I" once the H1 has
   scrolled away. Only meaningful while stuck, and a duplicate of the H1, so
   it is hidden from assistive tech in the markup. */
.page-back-here {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--font-display); font-size: 1rem; font-weight: 600;
  letter-spacing: -0.012em; color: var(--ink);
  opacity: 0; transition: opacity var(--t-normal);
}
.page-back.is-stuck .page-back-here { opacity: 1; }
@media (max-width: 719px) { .page-back-here { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .page-back, .page-back-chip, .page-back-here, .page-back-chip > svg { transition: none; }
}


@layer pages {
  /* Task 3 (SDD 16 A2): doctor introduction screen - brand new selectors
     only (the layout overrides of the shared `.doctor-card`/`.doctor-avatar`
     rules live unlayered, next to their originals above - see the comment
     there for why). */
  .doctor-choice-note {
    color: var(--muted);
    font-size: 0.92rem;
    margin: 0.4rem auto 0;
    max-width: 60ch;
  }
  .doctor-card-name-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
  .doctor-card-current-chip { flex: 0 0 auto; }
  .doctor-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }
  .doctor-card-quote {
    display: block;
    font-style: italic;
    color: var(--accent-deep);
    font-size: 0.88rem;
    line-height: 1.4;
  }
  .doctor-card-availability { display: block; margin-top: 0.15rem; }
  .doctor-card-link {
    display: inline-block;
    margin-top: 0.2rem;
    color: var(--brand);
    font-weight: 600;
    font-size: 0.86rem;
    text-decoration: none;
  }
  .doctor-card-link:hover { text-decoration: underline; }
  .doctor-choice-toggle {
    display: block;
    margin: 0 auto;
    background: none;
    border: none;
    color: var(--brand);
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0.3rem;
  }
  .doctor-choice-more {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }
  .doctor-choice-switch-notice {
    text-align: center;
    color: var(--warning);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0.8rem 0 0;
  }

  /* Task 4 (medicine-first entry, variant C): search + popular-medicine
     chips above the pathway tiles on the prescription-purpose intake page. */
  .med-entry { margin-bottom: 1rem; }
  .med-entry-label { margin-top: 0.75rem; }
  .med-chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
  .med-chip { border: 1px solid var(--border-strong); background: #fff; border-radius: var(--radius-pill); padding: 0.35rem 0.85rem; cursor: pointer; font: inherit; }
  .med-chip:hover { border-color: var(--ink); }
  .med-chip-area { color: var(--muted); }
  .med-chip-empty { color: var(--muted); margin-top: 0.5rem; }
  .med-fallback-divider { border-top: 1px dashed var(--border-strong); margin: 1.25rem 0 0.75rem; padding-top: 0.75rem; }


  /* ==========================================================================
     R4: external-document records and phone appointment slots (SDD 03/06).
     ========================================================================== */
  .external-doc-row { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
  .external-doc-row:last-of-type { border-bottom: none; }
  .external-doc-row .cell-meta { display: block; }
  .external-doc-row p { margin: 0.3rem 0 0; }
  .appointment-actions { display: flex; gap: 0.8rem; align-items: center; margin-top: 0.6rem; }
  .phone-preference {
    display: flex; gap: 0.5rem; align-items: flex-start;
    font-size: 0.92rem; color: var(--muted); margin: 0.8rem 0;
  }
  .phone-preference input { margin-top: 0.2rem; }

  /* ==========================================================================
     Karta - the record as an object.
     These land last in the pages layer, so they settle what the page blocks
     above assumed about a cream, glassy, elevated surface. Three rules govern
     everything here: paper is white and depth comes from a hairline, nothing
     rounds past 3px, and navy is the only colour that means "act".
     ========================================================================== */

  /* --paper is white now, so the cream band would be invisible against the
     white one; the alternation moves to paper-against-ground. */
  .band-cream { background: var(--ground); }

  /* Full-bleed bands measure 100vw from their own centre. Inside the rail
     layout that centre sits half the rail's width right of the viewport's,
     so every band slid 120px off true. Bleed to the content box instead. */
  .role-patient .band-cream,
  .role-patient .band-white,
  .role-patient .band-mint,
  .role-patient .band-navy,
  .role-patient .hero-scene {
    left: auto; right: auto; width: auto;
    margin-left: calc(-1 * clamp(1.25rem, 3.4vw, 46px));
    margin-right: calc(-1 * clamp(1.25rem, 3.4vw, 46px));
  }

  /* The hero used to tuck 120px up under a sticky glass header. The rail is
     fixed to the side and nothing overlaps the content column any more. */
  .role-patient .hero-scene { margin-top: 0; padding-top: var(--band-pad); }
  .hero-glow { display: none; }
  .hero-scene, .band-navy { color: rgba(255, 255, 255, 0.82); }
  .hero-scene .hero-eyebrow, .band-navy .eyebrow { color: var(--rail-ink); }
  .band-mint .eyebrow { color: var(--muted); }
  .hero-scene .trust-chip svg { stroke: rgba(255, 255, 255, 0.85); }

  /* The doctor card floated 46px below its row to overlap the band edge -
     an effect the flat surface has no use for. */
  .hero-doctor-card,
  .hero-doctor-card:hover { transform: none; }
  .hero-doctor-card.enter { animation-name: rise; }
  @keyframes rise-card { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

  /* Amber is no longer a button colour, so `.btn-amber` is just the primary
     action. On a navy band that makes it navy-on-navy - invisible - so it
     inverts there, the way `.btn-on-navy` already does. */
  .hero-scene .btn-amber, .band-navy .btn-amber,
  .hero-scene .btn-primary, .band-navy .btn-primary {
    background: #fff; color: var(--ink); border-color: #fff;
  }
  .hero-scene .btn-amber:hover, .band-navy .btn-amber:hover,
  .hero-scene .btn-primary:hover, .band-navy .btn-primary:hover {
    background: var(--rail-ink); color: var(--ink);
  }
  .hero-scene .btn-ghost-navy, .band-navy .btn-ghost-navy {
    background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.42);
  }

  /* Nothing lifts, nothing scales. Reveals fade in place. */
  .tile-lift:hover, .tile-lift:focus-visible { transform: none; }
  .tile-lift:hover { border-color: var(--border-strong); }
  .reveal-init { transform: none; }
  .assistant-fab:hover { transform: none; }
  .choice-card:hover { transform: none; }
  .svc-tile-lg:hover .svc-go, .prog-tile:hover .prog-go { transform: none; }

  /* The last amber left in chrome: the hero's second line, the doctor card's
     eyebrow, the checklist ticks. On a navy band the emphasis is tonal - one
     line bright, one recessive - not a second hue. */
  .hero-tagline { color: rgba(255, 255, 255, 0.5); }
  .hero-doctor-card .eyebrow { color: rgba(255, 255, 255, 0.55); }
  .doctor-band-check i { color: rgba(255, 255, 255, 0.55); }

  /* Copper is chrome again (DECISIONS.md 2026-08-28): eyebrows carry it,
     and so does every affordance below. It still never encodes a value. */
  .eyebrow { color: var(--accent-deep); letter-spacing: 0.13em; font-weight: 700; }
  .svc-icon, .prog-icon { border-color: var(--border-strong); color: var(--brand); }
  .prog-tile-mine { border: 1px solid var(--brand); }

  /* Navy stays the colour of the primary BUTTON; copper is the colour of
     the affordance - go-arrows, chevrons, ticks, section links. The two do
     not compete because navy is only ever a filled control and copper is
     only ever a mark on paper. */
  .svc-go, .prog-go,
  .history-more,
  .pub-checklist li::before,
  .treatment-doctor-chevron { color: var(--accent-deep); }
  .kv-list section > h3,
  .pub-team-headline { color: var(--brand); }
  .treatment-doctor-pending .specialty-icon { color: var(--brand); }
  .service-tile-icon { border-color: var(--border-strong); color: var(--brand); }
  .service-tile-note, .prog-due { color: var(--muted); }

  /* On the graphite bar the primary button would be navy on near-black. */
  .app-header .btn-amber, .app-header .btn-primary {
    background: #fff; color: var(--ink); border-color: #fff;
  }
  .app-header .btn-amber:hover, .app-header .btn-primary:hover {
    background: var(--rail-ink); color: var(--ink);
  }

  /* Public pages open on a band, which brings its own padding-block; the
     main's own top padding just showed a stray strip of ground above it.
     And with the rail on screen the header must not repeat the brand at all:
     hiding only the wordmark left the mark stranded beside the nav, so the
     whole home link goes - the rail's wordmark already is that link. */
  .public-site .app-main { padding-top: 0; }
  .role-patient .pub-header .app-logo-link { display: none; }

  /* Records are objects on a desk, not entries fused into one sheet: they
     stack with air between them and each carries its own edge. The card
     wanting something from the patient is the one that lifts. */
  .treatment-grid { grid-template-columns: 1fr; gap: var(--s2); }
  .treatment-grid .treatment-card { margin-bottom: 0; border-radius: var(--radius-lg); }
  .treatment-card:hover { z-index: 1; position: relative; }


  /* ---- pulpit (the patient dashboard) ----
     A working column and a quiet side column. Sections render only when they
     have something to say, so a patient with nothing on file falls through to
     the offer instead of a page of empty boxes. */
  .narrow-1180 { max-width: 1180px; margin-inline: auto; }

  .pulpit-head { margin-bottom: 34px; }
  .pulpit-head .eyebrow { display: block; margin-bottom: 6px; }
  .pulpit-head h1 { font-size: clamp(1.9rem, 3.2vw, 2.5rem); margin: 0; }
  /* Sections are only rendered when they have something in them, so a
     following-sibling rule is enough to space them. */
  .narrow-1180 section + section { margin-top: 2.6rem; }

  .pulpit-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 44px; align-items: start; }
  .pulpit-grid > aside { position: sticky; top: 24px; }
  @media (max-width: 1279px) {
    .pulpit-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    /* Stacked, the aside is as wide as the page, and a 7-column date grid
       spread over 900px reads as a spreadsheet. Side by side instead: the
       cards keep a column's width and the space gets used. */
    .pulpit-grid > aside {
      position: static; margin-top: 34px;
      display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
      gap: 16px; align-items: start;
    }
  }

  /* ---- attention strip: the only amber on the page ---- */
  .attn-row {
    display: grid; grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center; gap: 15px;
    background: var(--surface); border: 1px solid var(--border);
    border-left: 2px solid var(--accent);
    padding: 15px 18px; margin-bottom: -1px;
  }
  .attn-row:first-of-type { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
  .attn-row:last-of-type { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); margin-bottom: 0; }
  /* The kind used to BE the first column: 104px of uppercase type, which read
     as a stack of shouted words. It is a mark plus a caption now, and the
     title gets the width back (DECISIONS.md 2026-08-31). */
  .attn-ico {
    width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
    background: var(--accent-tint); border: 1px solid var(--accent-border);
    color: var(--accent-deep);
  }
  .attn-what { min-width: 0; }
  /* A renewal action is a POST, so its button arrives wrapped in a form.
     The wrapper shrink-wraps and takes the button's grid column. */
  .attn-row form { margin: 0; }
  .attn-kind {
    display: block; font-size: .67rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--accent-deep); margin-bottom: 3px;
  }
  .attn-what b { display: block; font-size: .95rem; font-weight: 600; }
  .attn-detail { display: block; font-size: .84rem; color: var(--muted); margin-top: 2px; }
  @media (max-width: 719px) {
    /* Three columns in 350px squeezes the text into a ribbon under the
       button. The mark keeps its column; the action drops under the text. */
    .attn-row { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
    .attn-row > .btn,
    .attn-row > form { grid-column: 2; justify-self: start; margin-top: 3px; }
  }

  /* ---- the doctor's case rows ----
     The queue's two lists were five-column tables inside `.table-wrap`,
     which meant a horizontal scrollbar on the screen a doctor works from
     all day. Same facts, laid out as rows that reflow: what it is, who it
     is, the meta line, the state, the move (DECISIONS.md 2026-09-02). */
  .doc-panel { margin-bottom: 34px; }
  .doc-panel:last-child { margin-bottom: 0; }
  .sect-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 22px; padding: 0 7px; border-radius: var(--radius-pill);
    background: var(--paper); border: 1px solid var(--border);
    font-size: .78rem; font-weight: 650; color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
  }
  .sect-lead { margin: -14px 0 16px; font-size: .875rem; color: var(--muted); max-width: 68ch; }
  .doc-case-list { display: flex; flex-direction: column; }
  .doc-case {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center; gap: 14px 16px;
    background: var(--surface); border: 1px solid var(--border);
    border-left: 2px solid var(--border-strong);
    padding: 15px 18px; margin-bottom: -1px;
  }
  .doc-case:first-child { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
  .doc-case:last-child { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); margin-bottom: 0; }
  .doc-case:hover { background: var(--paper); }
  /* The left edge marks the rows that are not routine. Never colour alone:
     the severity is spelled out in `.doc-case-kind` on the same row. */
  .doc-case-owed { border-left-color: var(--accent); }
  .doc-case-critical { border-left-color: var(--danger); }
  .doc-case-warning { border-left-color: var(--accent); }
  .doc-case-what { min-width: 0; }
  .doc-case-kind {
    display: block; font-size: .67rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 3px;
  }
  .doc-case-critical .doc-case-kind { color: var(--danger); }
  .doc-case-warning .doc-case-kind,
  .doc-case-owed .doc-case-kind { color: var(--accent-deep); }
  .doc-case-what b { display: block; font-size: .95rem; font-weight: 600; }
  .doc-case-meta {
    display: block; margin-top: 3px; font-size: .82rem; color: var(--muted);
    font-variant-numeric: tabular-nums;
  }
  /* Two chips or two little forms in the trailing track, stacked. */
  .stack-chips { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
  .stack-chips .inline-form { margin: 0; }
  /* A row whose detail belongs under it rather than beside it - a payment's
     refunds and its refund form, which as a table cell forced a sideways
     scroller onto the whole page. */
  .doc-case-block { align-items: start; }
  .doc-case-body { grid-column: 1 / -1; }
  .doc-case-body > .reveal { margin-top: 10px; }
  .refund-line {
    display: flex; align-items: baseline; gap: 10px;
    padding: 9px 0; border-top: 1px solid var(--border);
  }
  .refund-line .doc-case-meta { display: block; }
  /* The audit row's metadata disclosure sits in the trailing track and must
     not stretch the row. */
  .audit-row > .reveal { align-self: start; }
  .audit-row .doc-case-meta.cell-mono { font-size: .74rem; opacity: .75; }
  @media (max-width: 719px) {
    /* Three tracks in 350px squeeze the text into a ribbon: state and move
       drop under it and sit side by side. */
    .doc-case { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .doc-case > .badge, .doc-case > .btn, .doc-case > .chip { justify-self: start; }
    .stack-chips { align-items: flex-start; }
  }

  /* ---- the folded remainder ----
     Two rows in view; the rest continues the same stack behind a summary
     strip, so nothing is hidden and nothing links away (DECISIONS.md
     2026-09-01). The stack's rounded ends belong to the whole run, so the
     last visible row gives its bottom corners up when a strip follows. */
  .attn-has-more .attn-row:last-of-type {
    border-bottom-left-radius: 0; border-bottom-right-radius: 0;
  }
  .queue-more > summary {
    display: flex; align-items: center; gap: 7px;
    padding: 11px 18px; margin-bottom: -1px;
    background: var(--surface); border: 1px solid var(--border);
    border-left: 2px solid var(--accent);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-size: .82rem; font-weight: 600; color: var(--accent-deep);
    cursor: pointer; list-style: none;
  }
  .queue-more > summary::-webkit-details-marker { display: none; }
  .queue-more > summary::after {
    content: ""; width: 5px; height: 5px; margin-bottom: 2px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); transition: transform var(--t-fast);
  }
  .queue-more > summary:hover { background: var(--ground); }
  .queue-more[open] > summary { border-radius: 0; }
  .queue-more[open] > summary::after { transform: rotate(-135deg); margin-bottom: -2px; }
  /* Inside the fold the rows are mid-stack, except the last one, which is
     now the end of the whole run. */
  .queue-more .attn-row { border-radius: 0; }
  .queue-more .attn-row:last-of-type {
    border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md);
  }

  /* The row names who is on it; the sentence explaining the state is behind
     the disclosure below, closed. The row used to carry that sentence inline
     and the same row again, full size, 200px down the page (DECISIONS.md
     2026-09-01). */
  .attn-meta { display: block; font-size: .82rem; color: var(--muted); margin-top: 3px; }

  /* ---- "Co to znaczy?" ----
     The portal's one disclosure. Shared, because every screen in this pass
     has a sentence worth keeping and not worth showing. */
  .more-info { margin-top: 7px; }
  .more-info > summary {
    display: inline-flex; align-items: center; gap: 5px; width: fit-content;
    font-size: .76rem; font-weight: 600; color: var(--accent-deep);
    cursor: pointer; list-style: none;
  }
  .more-info > summary::-webkit-details-marker { display: none; }
  .more-info > summary::after {
    content: ""; width: 5px; height: 5px; margin-bottom: 2px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); transition: transform var(--t-fast);
  }
  .more-info[open] > summary::after { transform: rotate(-135deg); margin-bottom: -2px; }
  .more-info > summary:hover { color: var(--brand); }
  .more-info > p {
    margin: 6px 0 0; font-size: .82rem; line-height: 1.5; color: var(--muted);
    max-width: 52ch;
  }

  /* ---- "W toku": ours, not theirs ----
     A case in review wants nothing from the patient, so it is not a queue
     row - but it is not idle either, and must not be counted among the
     tracks with nothing happening. One line, the whole line clickable. */
  .prog-row {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 12px 18px; margin-bottom: -1px;
    background: var(--surface); border: 1px solid var(--border);
    color: var(--ink); text-decoration: none; font-size: .9rem;
    transition: border-color var(--t-fast), background var(--t-fast);
  }
  .prog-row:first-of-type { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
  .prog-row:last-of-type { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); margin-bottom: 0; }
  .prog-row:hover { border-color: var(--border-strong); background: var(--ground); }
  .prog-row-main { font-weight: 600; min-width: 0; }
  .prog-row-state { color: var(--muted); font-size: .82rem; font-weight: 600; white-space: nowrap; }

  /* ---- "Ostatnio": the record, as the pulpit's spine ----
     A dashboard's honest answer to "what is going on" is what happened. The
     feed was a footer column until 2026-08-31 and then nothing at all
     (DECISIONS.md 2026-09-01). Every row opens the page the event happened
     on: a feed nobody can click is a feed nobody reads twice.

     It is a timeline on paper now. Until 2026-09-01 it was six hairline rows
     of identical grey dots on the bare ground, with the date pinned to a far
     column across 300px of nothing: a spreadsheet sitting in the middle of
     the page between a white card and the dark programme panel. The card
     closes that hole, the mark says WHAT happened, and the line down the
     marks says the rows are one chronology rather than six unrelated
     sentences. No copper left edge - that rule means "this wants you", and
     the record wants nothing. */
  .feed {
    list-style: none; margin: 0; padding: 7px 18px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md);
  }
  /* The spine runs behind the marks, from the first centre to the last: an
     open-ended line above the first event would promise rows that are not
     there. 22px is the mark's centre - 9px of row padding plus half of 26. */
  .feed-item { position: relative; }
  .feed-item::before {
    content: ''; position: absolute; left: 13px; top: 0; bottom: 0;
    width: 1px; background: var(--accent-border);
  }
  .feed-item:first-child::before { top: 22px; }
  .feed-item:last-child::before { bottom: auto; height: 22px; }
  .feed-item:only-child::before { display: none; }
  .feed-row {
    position: relative;
    display: grid; grid-template-columns: 26px minmax(0, 1fr) auto;
    align-items: center; gap: 12px;
    padding: 9px 10px; margin-inline: -10px;
    border-radius: var(--radius-sm);
    color: var(--ink); text-decoration: none; font-size: .88rem;
    transition: background var(--t-fast);
  }
  .feed-row:hover { background: var(--ground); }
  /* Opaque, so it masks the spine rather than sitting on a visible line. */
  .feed-ico {
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    background: var(--accent-tint); border: 1px solid var(--accent-border);
    color: var(--accent-deep);
    transition: border-color var(--t-fast);
  }
  /* 14px of a drawing built at 19px thins its stroke to a hair, so the mark
     gets the weight back rather than fading into the spine. */
  .feed-ico > svg { width: 15px; height: 15px; stroke-width: 1.95; }
  .feed-row:hover .feed-ico { border-color: var(--accent); }
  /* The event and its one particular on one line while there is room, and on
     two when there is not - the particular is the half that gives way. */
  .feed-text {
    min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 8px;
  }
  .feed-text b { font-weight: 600; }
  .feed-detail { font-size: .82rem; color: var(--muted); }
  .feed-when {
    font-size: .78rem; color: var(--muted); white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  /* Nothing owed and nothing running: one sentence, and no box drawn around
     the absence of work. */
  .queue-clear {
    margin: 0; padding: 15px 18px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); color: var(--ink-soft); font-size: .9rem;
  }
  /* The tracks with nothing happening, as a line rather than a card apiece
     saying "Wszystko aktualne". */
  .queue-quiet { margin: 13px 0 var(--s4); font-size: .86rem; }
  .queue-quiet a { color: var(--ink-soft); text-decoration: none; }
  .queue-quiet a:hover { color: var(--accent-deep); }

  /* The programme panel is its own link, so its heading is the door and the
     one button left is the recurring task. */
  .prog-open { display: block; color: inherit; text-decoration: none; }
  .prog-open h3 { margin: 0; }
  .prog-open:hover h3 { color: var(--accent-lift); }

  /* ---- dark surfaces ----
     Dark stopped being "one per screen" (DECISIONS.md 2026-08-28): it marks
     the FIXED POINT of a column - the thing that is about the patient rather
     than about a transaction. Their doctor, their entitlement, their
     readings. One in the main flow and one in the aside, never two side by
     side, so a screen carries at most two and they never argue.

     Everything a dark ground has to reinterpret lives here once, so a new
     dark surface is a class in the markup and not another copy of this. */
  .panel-dark {
    background: linear-gradient(160deg, var(--panel-2) 0%, var(--panel) 100%);
    border: 0; color: var(--panel-ink); box-shadow: var(--shadow-lg);
    --series-sys: #E4B071;
    --series-dia: #6E8CC0;
  }
  .panel-dark h2, .panel-dark h3, .panel-dark h4,
  .panel-dark b, .panel-dark strong { color: #fff; }
  .panel-dark p, .panel-dark .cell-meta, .panel-dark .text-muted { color: var(--panel-muted); }
  .panel-dark .meter { background: rgba(255, 255, 255, 0.10); border-color: transparent; }
  .panel-dark .meter i { background: var(--accent-lift); }
  .panel-dark .meter-label { color: var(--panel-muted); }
  .panel-dark .btn-primary { background: #fff; color: var(--panel); box-shadow: none; }
  .panel-dark .btn-primary:hover { background: var(--rail-ink); color: var(--panel); }
  .panel-dark .btn-secondary {
    background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.22);
  }
  .panel-dark .btn-secondary:hover { border-color: rgba(255, 255, 255, 0.45); color: #fff; }
  .panel-dark :focus-visible { outline-color: #fff; }

  /* ==========================================================================
     The side column
     --------------------------------------------------------------------------
     A sidebar is not a narrow page, and it was being drawn as one: 1.25rem
     Newsreader headings, body copy at page size, buttons that wrapped. Its
     own scale instead - micro-caps with a copper mark, 0.84rem body, small
     full-width buttons - and four kinds of card rather than four identical
     white boxes:

       .side-card             paper, the default: a reference or an action
       .side-card-hero        the column's fixed point, dark (see .panel-dark)
       .side-card-quiet       borderless and muted: present, not a peer

     The kinds matter most at the bottom of a column, where "Rezygnacja" used
     to sit in the same white box, at the same weight, as the card offering a
     consultation.
     ========================================================================== */
  .side-stack { display: flex; flex-direction: column; gap: 16px; align-self: start; }
  /* The paper ground is scoped away from a hero card: .panel-dark is declared
     earlier in the sheet and carries the same one-class weight, so an
     unscoped `background` here would silently paint the hero white. */
  .side-card:not(.panel-dark) { background: var(--surface); }
  .side-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    padding: 18px 20px;
  }
  .side-card + .side-card { margin-top: 0; }
  .side-title {
    display: flex; align-items: center; gap: 8px;
    font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 13px;
  }
  .side-title svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--accent-deep); }
  .side-card p { font-size: .84rem; line-height: 1.55; color: var(--ink-soft); }
  .side-card p + p { margin-top: .55rem; }
  .side-card .cell-meta { font-size: .78rem; line-height: 1.5; }
  .side-card .card-sub { font-size: .84rem; line-height: 1.55; margin-bottom: .9rem; }
  .side-card .reveal summary { font-size: .85rem; }
  .side-card .form-label { font-size: .8rem; }
  .side-card .text-muted { font-size: .8rem; }
  /* Only a card's OWN action goes full width. A button nested inside a row
     (an evidence row's "Dodaj dokument") keeps its intrinsic size. */
  .side-card > .btn, .side-card > form > .btn { width: 100%; }
  .side-card .btn { min-height: 38px; padding: .45rem .8rem; font-size: .85rem; }
  .side-card p + .btn, .side-card p + form, .side-card p + a.btn { margin-top: 12px; }
  .side-card form + p, .side-card .btn + p { margin-top: 11px; }
  .side-note { font-size: .76rem; color: var(--muted); line-height: 1.5; margin-top: 11px; }
  .side-rule { border-top: 1px solid var(--border); margin: 15px 0 13px; }
  .side-card .meter + form, .side-card .meter + p, .side-card .meter + .btn { margin-top: 13px; }
  .side-card-quiet form { margin-top: 11px; }
  .side-link {
    display: inline-block; margin-top: 11px; font-size: .82rem; font-weight: 600;
    color: var(--accent-deep); text-decoration: none;
  }
  .side-link:hover { text-decoration: underline; }

  /* the fixed point of the column */
  .side-card-hero { border: 0; box-shadow: var(--shadow-md); }
  .side-card-hero .side-title { color: var(--panel-muted); }
  .side-card-hero .side-title svg { color: var(--accent-lift); }
  .side-card-hero .side-note { color: var(--panel-muted); }
  .side-card-hero .side-rule { border-top-color: var(--panel-line); }
  .side-card-hero a:not(.btn) { color: #fff; }
  .side-card-hero a:not(.btn):hover { color: var(--accent-lift); }

  /* Rezygnacja is not a peer of the cards above it. */
  /* .side-card:not(.panel-dark) out-weighs a bare .side-card-quiet, so the
     quiet ground is declared at the same two-class weight. Padding stays at
     the card value so its text keeps the column's left edge - stepping out
     of the card reads as misalignment, not as intent. */
  .side-card.side-card-quiet {
    background: none; border: 0; box-shadow: none; padding: 6px 20px 0;
  }
  .side-card-quiet .side-title,
  .side-card-quiet .side-title svg { color: var(--border-strong); }
  .side-card-quiet p { font-size: .78rem; color: var(--muted); }

  /* One number, at the size the column can afford. */
  .side-figure {
    display: flex; align-items: baseline; gap: 8px;
    font-variant-numeric: tabular-nums; margin-bottom: 11px;
  }
  .side-figure b { font-family: var(--font-display); font-size: 2.4rem; font-weight: 500; line-height: 1; }
  .side-figure span { font-size: .84rem; color: var(--panel-muted); }

  /* ---- the doctor, as a card worth keeping ---- */
  .side-doc-portrait { display: flex; justify-content: center; margin: 2px 0 13px; }
  .side-doc img, .side-doc .doctor-avatar-initials {
    width: 78px; height: 78px; border-radius: 50%; object-fit: cover;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12),
                0 12px 26px -10px rgba(0, 0, 0, 0.8);
  }
  .side-doc .doctor-avatar-initials { display: grid; place-items: center; font-size: 1.5rem; }
  .side-doc-name {
    display: block; text-align: center; font-family: var(--font-display);
    font-size: 1.05rem; font-weight: 600; line-height: 1.25; color: #fff;
  }
  .side-doc-role {
    display: block; text-align: center; margin-top: 6px;
    font-size: .67rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--accent-lift);
  }
  .side-doc-state {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 12px; font-size: .78rem; color: var(--panel-ink);
  }
  .side-doc-state .availability-dot { margin-top: 0; }
  .side-doc-since { display: block; text-align: center; margin-top: 11px; font-size: .73rem; color: var(--panel-muted); }
  .side-doc .btn { margin-top: 15px; }

  /* ---- the compact month ----
     Removed from the pulpit on 2026-09-01, where it was drawn to say "nie
     masz umówionego terminu" in the overwhelming majority of cases; back on
     "Moje leczenie", where the calendar is the aside's subject rather than a
     42-cell way of saying nothing. Dates and a mark, and the dialog beside it
     holds the full month (DECISIONS.md). A real <table>: seven columns of
     dates is tabular data and the day names are its column headers. */
  .side-cal-month {
    font-family: var(--font-display); font-size: 1.06rem; font-weight: 600;
    letter-spacing: -.012em; color: var(--ink); margin: -3px 0 11px;
  }
  .cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .cal-grid th {
    padding: 0 0 7px; font-size: .63rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--muted); text-align: center;
  }
  .cal-grid td { padding: 1px 0; text-align: center; }
  .cal-day {
    position: relative; display: grid; place-items: center;
    width: 28px; height: 28px; margin: 0 auto; border-radius: 50%;
    font-size: .79rem; font-variant-numeric: tabular-nums; color: var(--ink-soft);
  }
  .cal-out .cal-day { color: var(--border-strong); }
  .cal-marked { font-weight: 700; color: var(--ink); }
  .cal-today { background: var(--brand); color: #fff; font-weight: 600; }
  /* The dot is the mark; the ring is today. A day can be both, so the dot
     lifts to the copper that reads on navy. */
  .cal-day i {
    position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
    width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
  }
  .cal-today i { background: var(--accent-lift); }
  .side-cal-next {
    margin: 13px 0 12px; font-size: .8rem; color: var(--muted);
    padding-top: 12px; border-top: 1px solid var(--border);
  }
  .side-cal .btn { width: 100%; }

  /* ---- the full month, in a dialog ----
     The same `schedule` as the compact grid, drawn by the same snippets the
     page it came from used, so the two cannot drift. Month navigation is a
     page load (`?m=`), and the view re-opens the dialog. */
  .cal-dialog {
    width: min(1080px, 94vw); max-height: 90vh; overflow: auto;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--ground); color: var(--ink); padding: 0;
    box-shadow: var(--shadow-lg, 0 24px 60px rgba(16, 24, 40, .22));
  }
  .cal-dialog::backdrop { background: rgba(16, 24, 40, .45); }
  .cal-dialog-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 20px 24px 14px; border-bottom: 1px solid var(--border);
    background: var(--surface);
    position: sticky; top: 0; z-index: 1;
  }
  .cal-dialog-head h2 { font-family: var(--font-display); font-size: 1.28rem; margin: 0; }
  .cal-dialog-close {
    border: 1px solid var(--border); background: var(--surface); color: var(--muted);
    width: 32px; height: 32px; border-radius: 50%; font-size: 1.2rem; line-height: 1;
    cursor: pointer;
  }
  .cal-dialog-close:hover { border-color: var(--border-strong); color: var(--ink); }
  /* The dialog IS the schedule's layout. It declared a bare two-column grid
     while the three snippets inside it still carried `grid-area: cal | side
     | past` from the standalone page that was folded into this dialog on
     2026-09-01 - names that matched nothing here, so the month and the
     history were auto-placed into the same 300px column and drew on top of
     each other (DECISIONS.md).

     Named areas, not a nested column, because the reading order has to
     change when the layout does: wide, the history sits under the calendar
     with the agenda alongside both; stacked, the agenda comes second and the
     history last, since what is coming outranks what is done. The aside
     spans both rows so that an aside taller than them cannot strand the
     history halfway down. */
  .cal-dialog-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    grid-template-areas: "cal side" "past side";
    grid-template-rows: auto 1fr;
    column-gap: var(--s3); row-gap: var(--s4);
    padding: 22px 24px 26px; align-items: start;
  }
  .sched-agenda { grid-area: side; }
  @media (max-width: 899px) {
    .cal-dialog-body {
      grid-template-columns: minmax(0, 1fr);
      grid-template-areas: "cal" "side" "past";
    }
  }

  /* ---- the aside's "Najbliższe" ----
     A full month grid until 2026-09-01, drawn to say "nie masz umówionego
     terminu" in the overwhelming majority of cases and drawn again, properly,
     on "Wizyty i terminy" (DECISIONS.md). The next couple of dates is what a
     dashboard owes; the month is one rail entry away. */
  .cal-events { border-top: 1px solid var(--border); }
  .cal-event {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) 12px;
    align-items: center; gap: 12px; padding: 11px 0;
    border-bottom: 1px solid var(--border); color: var(--ink); text-decoration: none;
  }
  .cal-event:last-child { border-bottom: 0; padding-bottom: 2px; }
  .cal-event-date {
    display: grid; justify-items: center; line-height: 1.1; padding: 5px 0 4px;
    background: var(--accent-tint); border: 1px solid var(--accent-border);
    border-radius: var(--radius-sm);
  }
  .cal-event-date b { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; color: var(--ink); }
  .cal-event-date span { font-size: .56rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-deep); }
  .cal-event-body { min-width: 0; }
  .cal-event-body b { display: block; font-size: .86rem; font-weight: 600; }
  .cal-event-body > span { display: block; font-size: .76rem; color: var(--muted); margin-top: 2px; }
  .side-go { color: var(--border-strong); transition: color var(--t-fast), transform var(--t-fast); }
  .cal-event:hover .side-go { color: var(--accent-deep); transform: translateX(2px); }
  .side-cal .cal-empty { margin: 14px 0 12px; }

  /* ---- record rows (Wizyty i terminy · Recepty i dokumenty · Mój lekarz) ----
     One stacked list treatment for every kind of record the portal keeps:
     a date gutter, the record itself, and what you can do about it. They
     stack as separate objects with air between them, the same way treatment
     cards do - a fused sheet gave every row the same weight as the run. */
  .record-row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    align-items: start; gap: 18px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
    padding: 16px 18px; margin-bottom: 10px;
    transition: border-color var(--t-fast), box-shadow var(--t-normal);
  }
  .record-row:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
  .record-row:last-of-type { margin-bottom: 0; }
  .record-row-quiet { background: var(--surface); }

  .record-when { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
  .record-when b { font-size: 0.9rem; font-weight: 650; }
  .record-when span { font-size: 0.8rem; color: var(--muted); }

  .record-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .record-main > b { font-size: 0.95rem; font-weight: 600; }
  .record-main .cell-meta { display: block; }
  .record-hint { font-size: 0.82rem; color: var(--ink-soft); margin: 4px 0 0; }
  .record-hint .availability-dot { margin-right: 6px; }
  .record-meds { list-style: none; display: flex; flex-direction: column; gap: 7px; margin: 0 0 4px; padding: 0; }
  .record-meds b { display: block; font-size: 0.95rem; font-weight: 600; }
  .record-note { font-size: 0.82rem; color: var(--muted); margin: 10px 0 0; }
  .record-portrait .doctor-avatar { width: 56px; height: 56px; border-radius: 50%; }

  .record-side {
    display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
    text-align: right; white-space: nowrap;
  }
  .record-link { color: var(--brand); font-size: 0.84rem; font-weight: 600; text-decoration: none; }
  .record-link:hover { text-decoration: underline; }
  .record-side .btn-link-danger { font-size: 0.82rem; }

  /* A section that holds records says how many, and a section that holds
     none says what would put one there. "Nie wystawiono jeszcze żadnego
     skierowania." floating on the ground was the whole of three of the four
     sections on Recepty i dokumenty. */


  /* ---- "Moje leczenie" ----
     It sat in a 900px column while every neighbour used the portal's full
     width, so its cards were as wide as the page and twice as tall as they
     needed to be, and the right half of the screen was empty. Standard
     column, main plus aside, and the history reads like the document
     timeline it sits beside (DECISIONS.md 2026-08-31). */
  /* ---- the cockpit: one dark object, then the tracks as a ledger ----
     Redrawn 2026-09-08, twice. The morning pass got the objects right and
     the picture wrong: a dark panel three-quarters empty beside a white card
     with a hole in it, and rows that stacked five lines in one cell and one
     in the next. Now the top is one navy object - the near thing left, the
     fortnight right, the move as a band - and a row is four cells on one
     axis, two lines each. */
  .trt-top {
    display: grid; grid-template-columns: minmax(0, 1fr) 316px;
    margin-bottom: var(--s5); border-radius: var(--radius-lg); overflow: hidden;
  }
  .trt-stage { display: flex; flex-direction: column; padding: 26px 32px 28px; min-width: 0; }
  .trt-stage-eyebrow {
    margin: 0 0 10px; font-family: var(--font-body); font-size: .7rem; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase; color: var(--accent-lift);
  }
  /* The time: white, the largest thing on the page after the title. Its
     tail (until when, the channel) sits on the same baseline in the muted
     ink, so the line reads "Jutro, 08:20 - do 08:40 - WhatsApp" as one. */
  .trt-stage-when {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0;
  }
  .trt-stage-when b {
    font-family: var(--font-display); font-size: 2.5rem; font-weight: 500; line-height: 1;
    letter-spacing: -.015em; color: #fff; font-variant-numeric: tabular-nums;
  }
  .trt-stage-when span { font-size: .95rem; color: var(--panel-muted); }
  .trt-stage-who { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; }
  .trt-stage-who .doctor-avatar { width: 38px; height: 38px; box-shadow: 0 0 0 2px rgba(255,255,255,.18); }
  .trt-stage-who-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .trt-stage-who-text b { font-size: .95rem; font-weight: 600; color: #fff; }
  .trt-stage-who-text small { font-size: .8rem; color: var(--panel-muted); }
  .trt-stage-sentence { font-size: .92rem; line-height: 1.5; color: var(--panel-ink); max-width: 56ch; }
  .trt-stage-hint {
    display: inline-flex; align-items: center; gap: 8px; width: fit-content;
    margin: 14px 0 0; padding: 6px 12px 6px 10px; border-radius: var(--radius-pill);
    background: rgba(255,255,255,.07); font-size: .8rem; color: var(--panel-ink);
  }
  .trt-stage-hint svg { width: 14px; height: 14px; color: var(--accent-lift); flex: none; }
  /* The move, as a band across the foot of the stage: the case in white,
     the state beside it, the one primary button on the page at the right. */
  .trt-stage-due {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    margin-top: auto; padding-top: 18px; border-top: 1px solid var(--panel-line);
  }
  .trt-stage:has(.trt-stage-due) { padding-bottom: 24px; }
  .trt-stage-hint + .trt-stage-due, .trt-stage-who + .trt-stage-due { margin-top: 22px; }
  .trt-stage-due-body { min-width: 0; }
  .trt-stage-due-body b { display: block; font-size: .95rem; font-weight: 600; color: #fff; }
  .trt-stage-due-body span { display: block; margin-top: 2px; font-size: .8rem; line-height: 1.45; color: var(--panel-muted); }
  .trt-stage-due .track-action { flex: none; }
  .trt-stage-move { margin-top: 18px; }
  .trt-stage-move .track-action { display: inline-flex; }
  .trt-stage-none {
    margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--panel-line);
    font-size: .8rem; line-height: 1.5; color: var(--panel-muted);
  }
  .trt-stage-move + .trt-stage-none { margin-top: 22px; }
  /* On navy the button is white, so it is the brightest thing in the object. */
  .trt-stage .btn-primary { background: #fff; color: var(--brand-strong); border-color: #fff; box-shadow: none; white-space: nowrap; }
  .trt-stage .btn-primary:hover { background: var(--brand-tint); color: var(--brand-strong); }
  .trt-stage .btn-primary .btn-price { border-left-color: var(--border-strong); color: var(--ink-soft); opacity: 1; }

  /* The fortnight, on the same navy, behind a hairline. `card` stays on
     the section for the tests and the dialog's sake; the drawing does not. */
  .trt-top .trt-week {
    display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 20px;
    background: rgba(255,255,255,.045); border: 0; border-left: 1px solid var(--panel-line);
    border-radius: 0; box-shadow: none;
  }
  .trt-week-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .trt-week-title {
    margin: 0; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600;
    letter-spacing: -.012em; color: #fff;
  }
  .link-quiet {
    background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
    font-size: .8rem; font-weight: 600; color: var(--accent-deep);
  }
  .link-quiet:hover { text-decoration: underline; }
  .trt-top .link-quiet { color: var(--accent-lift); }
  .trt-top .cal-grid { margin: 2px 0 0; }
  .trt-top .cal-grid th { color: var(--panel-muted); padding-bottom: 6px; }
  .trt-top .cal-grid td { padding: 2px 0; }
  .trt-top .cal-day { width: 30px; height: 30px; color: var(--panel-ink); font-size: .82rem; }
  .trt-top .cal-out .cal-day { color: rgba(255,255,255,.28); }
  .trt-top .cal-marked { color: #fff; }
  .trt-top .cal-today { background: #fff; color: var(--panel); font-weight: 700; }
  .trt-top .cal-day i { width: 5px; height: 5px; bottom: 3px; background: var(--accent-lift); }
  .trt-top .cal-today i { background: var(--accent); }
  .trt-week-next {
    margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--panel-line);
    display: flex; flex-direction: column; gap: 2px;
    font-size: .8rem; line-height: 1.45; color: var(--panel-muted);
  }
  .trt-week-next b { color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
  .trt-week-empty { margin-top: var(--s2); }

  /* ---- the paths ----
     Fourth drawing. Three ledgers in a row were tables: competent, dull,
     and named "ścieżki" while drawing no path. Now each track is a card
     whose body is the path itself - closed consultations as dated dots on a
     solid line, the present as the one large node in the specialty's hue,
     the agreed window or the move as a hollow node on a dashed line, and a
     line that fades out when nothing is agreed, which is the truth. The
     head is the relationship: the specialty and the doctor who holds it. */
  .trt-main { min-width: 0; }
  .trt-ledger-title { margin-top: 0; }
  .ledger { display: flex; flex-direction: column; gap: 14px; }
  .track-panel {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden;
  }
  .track-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px 28px;
    flex-wrap: wrap; padding: 18px 24px 0;
  }
  /* Colour on the drawing is IDENTITY, never state. The four hues exclude
     the status vocabulary's green and red, so no card can be read as "this
     treatment is fine" or "this one is a problem" (SDD 07, DECISIONS.md
     2026-09-01). The same hue paints the present node, and nothing else. */
  .track-head {
    display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 14px;
    align-items: center; min-width: 0; --th: var(--accent-deep);
  }
  .track-head-copper { --th: var(--accent-deep); }
  .track-head-sky    { --th: var(--sky); }
  .track-head-plum   { --th: #7A3B6B; }
  .track-head-teal   { --th: #1D5F63; }
  .track-panel { --th: var(--accent-deep); }
  .track-panel:has(.track-head-sky)  { --th: var(--sky); }
  .track-panel:has(.track-head-plum) { --th: #7A3B6B; }
  .track-panel:has(.track-head-teal) { --th: #1D5F63; }
  .track-ico {
    grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center; color: #fff; background: var(--th);
  }
  .track-ico .specialty-icon { width: 19px; height: 19px; stroke-width: 2.4; }
  .track-head-name {
    grid-column: 2; margin: 0; font-family: var(--font-display); font-size: 1.32rem;
    font-weight: 600; letter-spacing: -.012em; color: var(--ink); line-height: 1.15;
  }
  .track-head-sub { grid-column: 2; display: block; margin-top: 2px; font-size: .78rem; color: var(--muted); }

  /* The doctor, right-aligned against the head: name and the one
     non-ordinary fact, then the portrait, then the way to write. */
  .track-body { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .track-body .doctor-avatar { width: 34px; height: 34px; box-shadow: 0 0 0 1px var(--border); order: 2; }
  .track-body .doctor-avatar-initials { font-size: .72rem; }
  .track-doc-text { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 0; text-align: right; order: 1; }
  .track-doc-id { font-size: .9rem; font-weight: 600; color: var(--ink); text-decoration: none; }
  .track-doc-id:hover { color: var(--accent-deep); }
  .track-doc-meta { font-size: .74rem; color: var(--muted); }
  .track-doc-away { color: var(--warning); }
  .track-doc-away .availability-dot { display: none; }
  .track-doc-chat {
    order: 3; display: inline-flex; align-items: center; gap: 5px; flex: none;
    padding: 6px 10px; margin-left: 4px; border: 1px solid var(--border); border-radius: var(--radius-pill);
    font-size: .76rem; font-weight: 600; color: var(--ink); text-decoration: none;
    transition: border-color var(--t-fast), color var(--t-fast);
  }
  .track-doc-chat svg { width: 13px; height: 13px; color: var(--accent-deep); }
  .track-doc-chat:hover { border-color: var(--accent-deep); color: var(--accent-deep); }
  .track-chat-badge {
    display: inline-grid; place-items: center; min-width: 16px; height: 16px;
    padding: 0 4px; border-radius: var(--radius-pill);
    background: var(--accent); color: #fff; font-size: .64rem; font-weight: 700;
  }
  .track-doc-pending { font-size: .8rem; color: var(--muted); }

  /* The path. Each step owns the piece of line from its node to the next
     node; the node sits on the step's left edge and the text hangs under
     it, so nothing ever centres itself off the card. */
  .path {
    list-style: none; margin: 0; padding: 24px 24px 22px;
    display: flex; align-items: flex-start; gap: 0;
  }
  .path-step { position: relative; padding: 24px 16px 0 0; min-width: 0; }
  .path-step::before {
    content: ""; position: absolute; top: 7px; left: 8px; right: 0; height: 2px;
    background: var(--border-strong);
  }
  .path-step:last-child::before { display: none; }
  .path-node {
    position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 50%;
    box-sizing: border-box; background: var(--surface);
  }
  .path-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

  /* Walked: small solid dots, the date and the outcome under each, so a
     year of treatment reads at a glance and the names wait in the fold. */
  .path-past { flex: 0 1 118px; }
  .path-past .path-node { width: 10px; height: 10px; top: 3px; left: 3px; background: var(--border-strong); }
  .path-past::before { left: 12px; }
  .path-link { display: block; color: inherit; text-decoration: none; }
  .path-link .path-node { transition: background var(--t-fast), transform var(--t-fast); }
  .path-link:hover .path-node { background: var(--ink); transform: scale(1.25); }
  .path-date { font-size: .72rem; color: var(--muted); }
  .path-outcome { font-size: .74rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .path-outcome-ok { color: var(--success); }
  .path-outcome-brand { color: var(--accent-deep); }
  .path-outcome-muted { color: var(--muted); font-weight: 500; }
  .path-more { flex: 0 0 52px; }
  .path-more .path-node { background: var(--surface); border: 2px solid var(--border-strong); }
  .path-more .path-date { font-weight: 600; color: var(--ink-soft); }

  /* The present: the large node in the specialty's hue with a halo, the
     state as the loudest text on the path, the case link under it. */
  .path-now { flex: 1 1 220px; }
  .path-now .path-node {
    width: 16px; height: 16px; background: var(--th);
    box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px color-mix(in srgb, var(--th) 28%, transparent);
  }
  .path-now::before { background: repeating-linear-gradient(90deg, var(--border-strong) 0 4px, transparent 4px 11px); opacity: .7; left: 18px; }
  /* Nothing agreed: the line runs on and fades. */
  .path-open .path-now::before { display: block; right: 0; opacity: 1; background: linear-gradient(90deg, var(--border-strong), transparent 85%); }
  .path-open .path-now { flex-grow: 1; }
  .path-now .path-text { gap: 4px; }
  .track-status-line { display: flex; align-items: center; gap: 7px; position: relative; }
  .track-status { font-size: 1rem; font-weight: 650; color: var(--ink); letter-spacing: -.005em; }
  .track-status.tone-amber  { color: var(--warning); }
  .track-status.tone-sky    { color: var(--sky); }
  .track-status.tone-green  { color: var(--success); }
  .track-status.tone-danger { color: var(--danger); }
  .track-now-name { font-size: .8rem; font-weight: 500; color: var(--muted); text-decoration: none; width: fit-content; }
  .track-now-name span { margin-left: 3px; color: var(--border-strong); transition: color var(--t-fast); }
  .track-now-name:hover, .track-now-name:hover span { color: var(--accent-deep); }
  /* The shared disclosure, drawn as an "i" that opens a note over the
     path rather than a line of copper text under every node. */
  .track-status-line .more-info { margin: 0; position: static; }
  .track-status-line .more-info > summary {
    width: 16px; height: 16px; border-radius: 50%; font-size: 0; gap: 0;
    border: 1px solid var(--border-strong); color: var(--muted); display: inline-grid; place-items: center;
  }
  .track-status-line .more-info > summary::after {
    content: "i"; width: auto; height: auto; margin: 0; border: 0; transform: none;
    font-family: var(--font-display); font-size: .7rem; font-weight: 700; font-style: italic; line-height: 1;
  }
  .track-status-line .more-info > summary:hover, .track-status-line .more-info[open] > summary { color: #fff; background: var(--brand); border-color: var(--brand); }
  .track-status-line .more-info > p {
    position: absolute; z-index: 3; left: 0; top: calc(100% + 8px); margin: 0;
    width: max(100%, 260px); max-width: 320px; padding: 10px 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: var(--shadow-md); font-size: .8rem; line-height: 1.45; color: var(--ink-soft);
  }

  /* Next: a hollow node in the hue, the window in tabular figures, the
     move. The track that is on the stage draws its move quiet, since the
     stage already holds the page's one primary button. */
  .path-next { flex: 0 1 auto; padding-right: 0; }
  .path-next .path-node { border: 2px solid var(--th); }
  .path-next .path-text { gap: 8px; }
  .track-next { display: flex; flex-direction: column; gap: 1px; font-size: .76rem; color: var(--muted); }
  .track-next b { font-size: .95rem; color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
  .track-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .track-act:empty { display: none; }
  .track-act .track-action { margin: 0; }
  .track-act .btn { white-space: nowrap; }

  /* What hangs under the path: the checklist with the copper edge that
     means "this wants you", and the named record, folded. */
  .track-asks, .track-past { margin: 0 24px 18px; }
  .path + .track-asks { margin-top: -4px; }
  .track-asks { padding: 12px 16px; border-left: 2px solid var(--accent); background: var(--accent-tint); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
  .track-block-title { margin: 0 0 6px; font-size: .74rem; font-weight: 600; color: var(--muted); }
  .track-asks .track-block-title { color: var(--accent-deep); }
  .track-plan { list-style: none; margin: 0; padding: 0; }
  .track-plan-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 5px 0; border-bottom: 1px dashed var(--accent-border);
  }
  .track-plan-row:last-child { border-bottom: 0; padding-bottom: 0; }
  .track-plan-label { font-size: .84rem; min-width: 0; color: var(--ink); }
  .track-plan-meta { font-size: .74rem; color: var(--muted); white-space: nowrap; }
  .track-plan-row.tone-amber .track-plan-meta { color: var(--accent-deep); font-weight: 650; }

  .track-past { margin-top: 0; padding-top: 12px; border-top: 1px solid var(--border); }
  .path + .track-past { margin-top: -6px; }
  .track-past > summary {
    display: inline-flex; align-items: center; gap: 6px; width: fit-content;
    cursor: pointer; list-style: none; color: var(--muted);
  }
  .track-past > summary::-webkit-details-marker { display: none; }
  .track-past > summary .track-block-title { margin: 0; color: inherit; }
  .track-past > summary::after {
    content: ""; width: 5px; height: 5px; margin-bottom: 2px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); transition: transform var(--t-fast);
  }
  .track-past[open] > summary::after { transform: rotate(-135deg); margin-bottom: -2px; }
  .track-past > summary:hover { color: var(--accent-deep); }
  .track-past-count { font-size: .72rem; font-weight: 600; color: var(--muted); }
  .track-past-count::before { content: "\00B7"; margin-right: 6px; color: var(--border-strong); }
  .track-past[open] > summary { margin-bottom: 4px; }
  .track-past .hist-list { max-width: 640px; }
  .track-past .hist-row { padding: 6px 9px 6px 0; border-bottom: 0; }
  .track-past .hist-body { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
  .track-past .hist-body b { font-size: .84rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .track-past .hist-meta { margin: 0; flex: none; font-size: .76rem; font-variant-numeric: tabular-nums; }
  .track-past .chip { font-size: .7rem; padding: 1px 8px; }

  .trt-membership {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: var(--s2) 0 0; font-size: .82rem; color: var(--muted);
  }
  .trt-membership svg { width: 15px; height: 15px; color: var(--accent-deep); flex: none; }
  .trt-membership .side-link { margin-left: auto; }

  @media (max-width: 1099px) {
    .trt-top { grid-template-columns: minmax(0, 1fr); }
    .trt-top .trt-week { border-left: 0; border-top: 1px solid var(--panel-line); flex-direction: row; flex-wrap: wrap; align-items: center; }
    .trt-week-head { flex: 1 0 100%; }
    .trt-top .cal-grid { flex: 1 1 340px; }
    .trt-week-next { flex: 1 1 200px; margin: 0; padding: 0 0 0 18px; border-top: 0; border-left: 1px solid var(--panel-line); }
  }
  @media (max-width: 599px) {
    .trt-stage { padding: 20px 18px 22px; }
    .trt-stage-when b { font-size: 1.9rem; }
    .trt-stage-due { flex-direction: column; align-items: stretch; }
    .trt-stage-due .btn { width: 100%; }
    .trt-top .trt-week { flex-direction: column; align-items: stretch; padding: 18px; }
    .trt-week-head, .trt-top .cal-grid, .trt-week-next { flex: none; }
    .trt-week-next { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--panel-line); }
    .track-row { padding: 16px 16px 0; gap: 12px; }
    .track-body { width: 100%; padding-left: 52px; }
    .track-body .doctor-avatar { order: 0; width: 30px; height: 30px; }
    .track-doc-text { align-items: flex-start; text-align: left; flex: 1; }
    .track-doc-chat { margin-left: 0; }
    /* The path stands up: the rail on the left, each step a block. */
    .path { flex-direction: column; padding: 18px 16px 16px 20px; }
    .path-step { flex: none; padding: 0 0 18px 26px; min-height: 34px; }
    .path-step::before { top: 8px; bottom: -8px; left: 7px; right: auto; width: 2px; height: auto; }
    .path-past::before { left: 7px; }
    .path-past .path-node { left: 3px; top: 4px; }
    .path-past .path-text { flex-direction: row; align-items: baseline; gap: 10px; }
    .path-more { padding-bottom: 14px; }
    .path-now::before { left: 7px; background: repeating-linear-gradient(180deg, var(--border-strong) 0 5px, transparent 5px 10px); }
    .path-open .path-now::before { background: linear-gradient(180deg, var(--border-strong), transparent 85%); bottom: -14px; }
    .path-step:last-child { padding-bottom: 0; }
    .path-open .path-now { padding-bottom: 8px; }
    .track-asks, .track-past { margin: 0 16px 16px; }
    .track-plan-row { flex-wrap: wrap; gap: 2px 14px; }
    .track-plan-meta { white-space: normal; flex: 1 0 100%; }
  }
  /* The name of the case is the link to the case. */
  /* Inline, so the mark hugs the name: pushed to the far edge of an 860px
     card it read as an unrelated control rather than as "this opens". */
  .treatment-open {
    display: inline-flex; align-items: baseline; gap: 7px; width: fit-content;
    color: inherit; text-decoration: none;
  }
  .treatment-open-go {
    font-size: 1.2rem; color: var(--border-strong);
    transition: color var(--t-fast), transform var(--t-fast);
  }
  .treatment-open:hover { color: var(--accent-deep); }
  .treatment-open:hover .treatment-open-go { color: var(--accent-deep); transform: translateX(2px); }
  /* A section heading with a count beside it. The documents page dropped
     these two when it took the `.rec-` prefix; "Moje leczenie" still wants
     them, and nothing else claims the names. */
  .rec-head { display: flex; align-items: center; gap: 10px; margin: var(--s5) 0 var(--s2); }
  .rec-head .section-label { margin: 0; }
  .rec-count {
    font-size: .72rem; font-weight: 700; color: var(--muted);
    background: var(--neutral-tint); border-radius: var(--radius-pill);
    padding: 2px 8px; font-variant-numeric: tabular-nums; line-height: 1.5;
  }

  .side-links { list-style: none; margin: 0; padding: 0; }
  .side-links li + li { margin-top: 3px; padding-top: 12px; border-top: 1px solid var(--border); }
  .side-links li + li a { padding-top: 0; }
  .side-links a {
    display: block; padding: 2px 0 12px; text-decoration: none; color: var(--ink);
  }
  .side-links li:last-child a { padding-bottom: 2px; }
  .side-links b { display: block; font-size: .86rem; font-weight: 600; }
  .side-links span { display: block; margin-top: 2px; font-size: .76rem; line-height: 1.45; color: var(--muted); }
  .side-links a:hover b { color: var(--accent-deep); }

  /* ---- the consultation history ---- */
  .hist-month + .hist-month { margin-top: var(--s3); }
  /* Rows, not cards. `.hist-row` carried `.track-panel`'s own four
     declarations - surface, hairline, radius, shadow - one level inside it,
     so the finished consultations were drawn more strongly than the live one
     and the panel read as a stack of equal boxes (DECISIONS.md 2026-09-01). */
  .hist-list { list-style: none; margin: 0; padding: 0; }
  .hist-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 16px;
    padding: 10px 9px; margin-inline: -9px;
    text-decoration: none; color: var(--ink);
    border-bottom: 1px solid var(--border); border-radius: var(--radius-sm);
    transition: background var(--t-fast);
  }
  .hist-list li:last-child .hist-row { border-bottom: 0; }
  .hist-row:hover { background: var(--ground); }
  .hist-body { min-width: 0; }
  .hist-body b { display: block; font-size: .92rem; font-weight: 600; line-height: 1.3; }
  .hist-meta { display: block; margin-top: 3px; font-size: .78rem; color: var(--muted); }
  .hist-side { display: flex; align-items: center; gap: 12px; flex: none; }

  @media (max-width: 719px) {
    .hist-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .hist-side { justify-content: flex-start; }
    .hist-side .side-go { display: none; }
  }

  /* ---- the case page ("Szczegóły zgłoszenia") ----
     Where every treatment card and every history row lands. It sat in a
     900px column under a generic h1 and a raw UUID, with the three-step
     timeline as its largest object whether or not that timeline had
     anything left to say - so the doctor's decision, which is the whole
     reason a patient opens this page, started below the fold
     (DECISIONS.md 2026-08-31). */
  .case-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--s3); align-items: start;
  }
  .case-main { min-width: 0; display: flex; flex-direction: column; gap: var(--s2); }
  .case-side { display: flex; flex-direction: column; gap: var(--s2); }
  /* On an in-flight case this chip is the only thing on the page saying
     where the case stands, so it gets a mark and a size the eye can find
     from the far side of a 1180px head. */
  .case-chip {
    flex: none; display: inline-flex; align-items: center; gap: 7px;
    font-size: .84rem; padding: 5px 13px;
  }
  .case-chip::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: currentColor; flex: none;
  }

  /* One sheet per thing the page has to say, on the page's own ground -
     the whole page used to be a single `.card` with every panel nested
     inside it, and a white doctor's message nested inside those. */
  /* Flex + gap, not `> * + * { margin-top }`: half the children here
     (`.med-list`, every `p`) reset their own margin further down the
     stylesheet, which collapsed the panel into one dense clump. */
  .case-panel {
    display: flex; flex-direction: column; gap: 14px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    padding: 20px 22px;
  }
  /* The panel is a flex column, so a bare button stretches to the sheet's
     full width and stops reading as a button. Children that want the width
     (a form, the message card, the medication list) keep it. */
  .case-panel > .btn { align-self: flex-start; }
  /* `.turn-pill` carries a bottom margin from the block layout it was built
     for; inside this flex row it just pushed the pill off the heading's
     centre line. */
  .case-panel-head .turn-pill { margin-bottom: 0; }
  .case-panel-head { display: flex; align-items: center; gap: 10px; }
  .case-panel-head h2 {
    font-family: var(--font-display); font-size: 1.08rem; color: var(--ink); margin: 0;
  }
  .case-panel p { font-size: .9rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }
  .case-note { font-size: .82rem !important; color: var(--muted) !important; }

  /* Three tones, one meaning each. Green is "you got what you asked for",
     copper is "something is waiting on you", and a decision to read keeps
     the page's own paper. Nothing here is red except the red-flag notice,
     which is an emergency - a refusal and a referral are painted neutral
     and copper in the history list on "Moje leczenie", and the two pages
     must not disagree about the same request. */
  .case-panel-ok { border-color: var(--success-border); background: var(--success-tint); }
  .case-panel-ok .case-panel-head h2, .case-panel-ok .case-panel-head svg { color: var(--success); }
  .case-panel-turn { border-color: var(--accent-border); }
  .case-panel-turn .case-panel-head h2 { color: var(--accent-deep); }
  .case-panel-quiet { background: var(--neutral-tint); box-shadow: none; }
  .case-panel-alarm { border-color: var(--danger); background: var(--danger-tint); }
  .case-panel-alarm h2, .case-panel-alarm svg { color: var(--danger); }
  .case-panel-alarm h2 {
    display: flex; align-items: center; gap: 9px;
    font-family: var(--font-display); font-size: 1.08rem; margin: 0;
  }
  .case-panel .doctor-message { background: var(--surface); }
  .case-panel-ok .doctor-message { border-color: var(--success-border); }

  /* What was prescribed, as labelled facts. It used to run as a
     dot-separated line - "50 tabl. · 1 op. · dawkowanie 1×1 · odpłatność
     100%" - where dawkowanie is the one item a patient has to read twice. */
  .med-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
  .med-list > li + li { padding-top: 14px; border-top: 1px solid var(--border); }
  .med-list b { display: block; font-size: .95rem; font-weight: 650; }
  .med-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 9px 0 0; }
  .med-facts dt {
    font-size: .68rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted);
  }
  .med-facts dd { margin: 2px 0 0; font-size: .86rem; font-weight: 600; color: var(--ink); }

  /* ---- the three steps ----
     Below the decision, and absent entirely once a case has ended without
     one. The marks were solid green squares carrying white ticks, which
     made the loudest thing on the page a story that was already over. */
  .case-steps { list-style: none; margin: 0; padding: 0; }
  .case-step { position: relative; display: flex; gap: 14px; padding-bottom: 20px; }
  .case-step:last-child { padding-bottom: 0; }
  .case-step::before {
    content: ''; position: absolute; left: 6px; top: 16px; bottom: 0;
    width: 1px; background: var(--border);
  }
  .case-step:last-child::before { display: none; }
  .case-step-mark {
    flex: 0 0 auto; width: 13px; height: 13px; margin-top: 3px; border-radius: 50%;
    border: 2px solid var(--border-strong); background: var(--ground); z-index: 1;
  }
  .case-step-done .case-step-mark { border-color: var(--success); background: var(--success); }
  .case-step-live .case-step-mark {
    border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint);
  }
  .case-step b { font-size: .92rem; font-weight: 650; color: var(--ink); }
  .case-step-todo b { color: var(--muted); }
  .case-step-when { display: block; margin-top: 2px; font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
  .case-step p { margin: 4px 0 0; font-size: .85rem; line-height: 1.55; color: var(--muted); }

  .case-answers {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 16px 22px;
  }
  .case-answers > summary { color: var(--ink); font-size: .9rem; }
  .case-answers[open] > summary { padding-bottom: 14px; border-bottom: 1px solid var(--border); }
  .case-answers section + section { margin-top: var(--s3); }
  .case-answers h3 {
    font-size: .72rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--muted); margin: 0 0 10px;
  }
  .case-doc-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 0; border-bottom: 1px solid var(--border);
  }
  .case-doc-row:last-child { border-bottom: 0; }

  .case-facts { display: flex; flex-direction: column; gap: 11px; margin: 0; }
  .case-facts dt {
    font-size: .68rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--muted);
  }
  .case-facts dd { margin: 2px 0 0; font-size: .86rem; color: var(--ink); }
  .case-doctor { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); }
  .case-doctor .doctor-avatar { width: 34px; height: 34px; }
  .case-doctor:hover span { color: var(--accent-deep); }
  /* Small, wrapping, and last: it is what support asks for, not what a
     patient reads. It was the page sub, in monospace, under a generic h1. */
  .case-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .7rem !important; color: var(--muted) !important;
    word-break: break-all; line-height: 1.5;
  }

  @media (max-width: 1199px) {
    .case-layout { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 719px) {
    /* "Twoja kolej" broke across two lines beside a heading that was also
       wrapping, so the panel opened on four lines of stacked fragments. */
    .case-panel-head { flex-wrap: wrap; }
    .case-panel-head .turn-pill { white-space: nowrap; }
    .med-facts { gap: 10px 20px; }
  }
  @media (max-width: 1199px) and (min-width: 900px) {
    .case-side { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
    .case-side > .side-card { flex: 1 1 0; min-width: 0; }
    .case-side > .side-card-quiet { flex-basis: 100%; }
  }

  /* ---- "Recepty i dokumenty": one timeline, four kinds ----
     It was four fixed sections, three of them empty for most patients, so
     the page's loudest feature was three dashed "you have nothing" boxes;
     and with a full record it was a wall with no way into it. One list, one
     filter, one empty state (DECISIONS.md 2026-08-31).

     A kind is a colour carried in `--k`, exactly as on the calendar, so the
     row mark and anything else keyed to a kind cannot drift apart. Two of
     the four match their nearest neighbour on the calendar deliberately: a
     skierowanie is a thing to go and do (copper, like a badanie), and a
     patient's own file is the same object as the wyniki they send back
     (sky). */
  .rec-prescription { --k: var(--brand);   --k-tint: var(--brand-tint);   --k-border: #CFDBEC; }
  .rec-referral     { --k: var(--accent);  --k-tint: var(--accent-tint);  --k-border: var(--accent-border); }
  .rec-sicknote     { --k: var(--success); --k-tint: var(--success-tint); --k-border: var(--success-border); }
  .rec-upload       { --k: var(--sky);     --k-tint: var(--sky-tint);     --k-border: var(--sky-border); }

  .head-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }

  /* ---- where the real documents live ----
     The page's one dark moment, and it earns it: the e-recepta code is
     never shown here (SDD 03) and e-skierowania and e-zwolnienia are
     recorded, not stored, so this is the answer to the question the page
     title raises. It used to be a grey footnote under one section. */
  .rec-sources { border-radius: var(--radius-lg); padding: 26px 30px 28px; margin-bottom: var(--s5); }
  .rec-sources-title {
    font-family: var(--font-display); font-size: 1.18rem; font-weight: 600;
    letter-spacing: -.012em; margin-bottom: 20px;
  }
  .rec-sources-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 34px; }
  .rec-source { min-width: 0; }
  .rec-source-ico {
    display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 11px;
    border-radius: 50%; background: rgba(255, 255, 255, .07);
    border: 1px solid var(--panel-line); color: var(--accent-lift);
  }
  .rec-source b { display: block; font-size: .92rem; font-weight: 600; }
  .rec-source p { margin-top: 5px; font-size: .8rem; line-height: 1.5; }
  .rec-source a {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
    font-size: .82rem; font-weight: 600; color: var(--accent-lift); text-decoration: none;
  }
  .rec-source a:hover { color: #fff; text-decoration: underline; }
  .rec-source a svg { flex: none; }

  /* ---- the filter ----
     A query param, not a JS toggle, for the reason the calendar's month is
     one: it survives a refresh, a bookmark and a link someone sent. Counts
     are over the whole record, never the filtered view - a chip that
     renumbered itself when pressed could not tell you where to look next. */
  .rec-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--s3); }
  .rec-filter {
    display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 8px 0 13px;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--surface); color: var(--ink-soft); box-shadow: var(--shadow-sm);
    font-size: .84rem; font-weight: 600; text-decoration: none;
    transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
  }
  .rec-filter span {
    min-width: 20px; padding: 1px 6px; border-radius: 4px; text-align: center;
    background: var(--neutral-tint); color: var(--muted);
    font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .rec-filter:hover { border-color: var(--border-strong); color: var(--ink); }
  .rec-filter.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
  .rec-filter.is-active span { background: rgba(255, 255, 255, .16); color: #fff; }
  /* A kind with nothing behind it stays reachable - pressing it is how you
     learn there is nothing - but it stops competing for the eye. */
  .rec-filter.is-empty:not(.is-active) { color: var(--muted); box-shadow: none; background: transparent; }
  .rec-filter.is-empty:not(.is-active) span { background: transparent; }

  /* ---- the timeline ---- */
  .rec-month + .rec-month { margin-top: var(--s4); }
  .rec-month-label {
    font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 11px;
  }
  .rec-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .rec-item {
    display: grid; grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: start; gap: 16px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
    padding: 16px 20px;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
  }
  .rec-item:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
  .rec-ico {
    display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
    background: var(--k-tint); border: 1px solid var(--k-border); color: var(--k);
  }
  .rec-body { min-width: 0; }
  .rec-line { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 5px; }
  .rec-kind {
    font-size: .6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--k);
  }
  .rec-date { font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums; }
  .rec-date::before { content: "\00b7"; margin-right: 9px; color: var(--border-strong); }
  .rec-line .chip { font-size: .7rem; }
  .rec-title { display: block; font-size: .98rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
  .rec-meta { margin-top: 3px; font-size: .8rem; line-height: 1.45; color: var(--muted); }
  .rec-note { margin-top: 7px; font-size: .8rem; line-height: 1.5; color: var(--ink-soft); }

  /* Dosage is the fact a patient re-reads, and it used to be fourth in a
     dot-separated meta line. It gets its own row and its own label. */
  .rec-meds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
  .rec-meds > li + li { padding-top: 11px; border-top: 1px dashed var(--border); }
  .rec-dose {
    display: inline-flex; align-items: baseline; gap: 8px; margin-top: 5px;
    padding: 3px 10px 4px; border-radius: var(--radius-sm);
    background: var(--k-tint); border: 1px solid var(--k-border);
    font-size: .84rem; font-weight: 600; color: var(--ink);
  }
  .rec-dose em {
    font-style: normal; font-size: .58rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--k);
  }
  .rec-meds .rec-meta { display: block; margin-top: 5px; }

  /* Where the real document is, said on the record that is only a note
     about it. Never on a file we actually hold. */
  .rec-where { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; }
  .rec-where span {
    padding: 1px 8px 2px; border-radius: 4px;
    background: var(--ground); border: 1px solid var(--border);
    font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums;
  }

  .rec-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; }
  .rec-link { font-size: .82rem; font-weight: 600; color: var(--brand); text-decoration: none; white-space: nowrap; }
  .rec-link:hover { text-decoration: underline; }
  .rec-none { font-size: .88rem; color: var(--muted); padding: 18px 2px; }
  .rec-none a { font-weight: 600; color: var(--accent-deep); text-decoration: none; }
  .rec-none a:hover { text-decoration: underline; }

  @media (max-width: 899px) {
    .rec-sources { padding: 22px 20px 24px; }
    .rec-sources-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 26px; }
  }
  @media (max-width: 619px) {
    .rec-sources-grid { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 719px) {
    .rec-item { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 14px 16px; }
    .rec-ico { width: 32px; height: 32px; }
    .rec-actions {
      grid-column: 2; flex-direction: row; align-items: center;
      justify-content: flex-start; gap: 14px; margin-top: 2px;
    }
  }

  .empty-card {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: center;
    border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
    background: var(--surface); padding: 20px 22px;
  }
  .empty-ico {
    width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    background: var(--ground); color: var(--muted);
  }
  .empty-card b { display: block; font-size: .95rem; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
  .empty-card p { font-size: .84rem; color: var(--muted); line-height: 1.5; }
  .empty-card a { display: inline-block; margin-top: 7px; font-size: .84rem; font-weight: 600; color: var(--accent-deep); }

  .chip-muted { background: var(--ground); color: var(--muted); }

  @media (max-width: 719px) {
    .record-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .record-when { flex-direction: row; gap: 8px; align-items: baseline; }
    .record-side { align-items: flex-start; text-align: left; }
  }

  /* ---- "Wizyty i terminy": the month, drawn out ----
     The page used to be two flat lists of rows, which is a record but not a
     plan: nothing on it answered "what does my next fortnight look like".
     A month grid answers that at a glance, and the agenda beside it carries
     the detail and the actions the grid has no room for.

     Three kinds of entry share one shape and one colour each, carried in
     `--k` so the grid chip, the agenda date block and the legend key cannot
     drift apart. Two of the three do not exist in the backend yet
     (`apps/web/schedule_preview.py`); those are drawn the same but tagged
     "przykład" wherever they appear, and the note under the legend says so
     in words. */
  .sched-visit  { --k: var(--brand);  --k-tint: var(--brand-tint);  --k-border: #CFDBEC; }
  .sched-test   { --k: var(--accent); --k-tint: var(--accent-tint); --k-border: var(--accent-border); }
  .sched-upload { --k: var(--sky);    --k-tint: var(--sky-tint);    --k-border: var(--sky-border); }

  /* The areas these two claim are declared by `.cal-dialog-body`, the only
     thing that renders them since "Wizyty i terminy" was folded into the
     calendar dialog (DECISIONS.md 2026-09-01). */
  .sched-cal { grid-area: cal; }
  .sched-past { grid-area: past; min-width: 0; }
  .sched-past .section-label { margin-top: 0; }
  /* The card's own padding is trimmed back: every 2px of it comes off seven
     columns at once, and a day cell that cannot hold "10:00" is not a
     calendar. */
  .sched-cal { padding: 22px 22px 24px; }

  .sched-cal-head {
    display: flex; align-items: flex-end; justify-content: space-between;
    flex-wrap: wrap; gap: 14px; margin-bottom: 18px;
  }
  .sched-cal-title h3 {
    font-family: var(--font-display); font-size: 1.45rem; font-weight: 600;
    letter-spacing: -.015em; color: var(--ink); line-height: 1.1;
  }
  .sched-next { margin-top: 4px; font-size: .8rem; color: var(--muted); }
  .sched-next b { font-weight: 650; color: var(--ink-soft); }
  .sched-next a { font-weight: 650; color: var(--accent-deep); text-decoration: none; }
  .sched-next a:hover { text-decoration: underline; }
  .sched-nav { display: flex; align-items: center; gap: 6px; }
  .sched-step, .sched-now {
    height: 34px; display: inline-grid; place-items: center;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface); color: var(--ink-soft); text-decoration: none;
    transition: border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
  }
  .sched-step { width: 34px; }
  .sched-now { padding: 0 14px; font-size: .8rem; font-weight: 600; }
  .sched-step:hover, .sched-now:hover {
    border-color: var(--border-strong); color: var(--ink); box-shadow: var(--shadow-sm);
  }
  .sched-now.is-here { background: var(--brand); border-color: var(--brand); color: #fff; }

  .sched-month { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .sched-month th {
    padding: 0 0 9px 8px; text-align: left;
    font-size: .66rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--muted);
  }
  .sched-month td { height: 96px; vertical-align: top; padding: 0; border: 1px solid var(--border); }
  .sched-cell { display: flex; flex-direction: column; gap: 4px; padding: 6px 6px 8px; overflow: hidden; }
  .sched-num {
    display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
    font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums;
    color: var(--ink-soft); flex: none;
  }
  /* Weekends and neighbouring months step back a shade; today is the only
     cell that steps forward. Declared in that order, because a Saturday can
     be all three at once. */
  .sched-rest { background: rgba(13, 17, 23, .018); }
  .sched-out { background: rgba(13, 17, 23, .03); }
  .sched-out .sched-num { color: var(--border-strong); }
  .sched-gone .sched-num { color: var(--muted); }
  .sched-gone .sched-chip { opacity: .5; }
  .sched-now-cell { background: var(--brand-tint); }
  .sched-num-today { background: var(--brand); color: #fff; }

  .sched-chip {
    display: block; min-width: 0; padding: 4px 6px 5px 7px;
    border-left: 3px solid var(--k); border-radius: 0 5px 5px 0;
    background: var(--k-tint); text-decoration: none;
    transition: box-shadow var(--t-fast), transform var(--t-fast);
  }
  a.sched-chip:hover { box-shadow: var(--shadow-sm); transform: translateX(1px); }
  .sched-chip b {
    display: block; font-size: .7rem; font-weight: 700; color: var(--k);
    font-variant-numeric: tabular-nums;
  }
  .sched-chip-name {
    display: block; font-size: .72rem; line-height: 1.25; color: var(--ink-soft);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* A dashed edge on an entry nothing in the record produced. */
  .sched-chip-preview { border-left-style: dashed; }

  .sched-legend {
    display: flex; flex-wrap: wrap; gap: 9px 22px;
    margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--border);
  }
  .sched-key { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--muted); }
  .sched-key::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--k); }
  .sched-note {
    margin-top: 14px; padding: 11px 14px; border-radius: var(--radius-sm);
    background: var(--ground); border: 1px dashed var(--border-strong);
    font-size: .78rem; line-height: 1.5; color: var(--muted);
  }
  .sched-note b { font-weight: 650; color: var(--ink-soft); }

  /* ---- the agenda beside it ---- */
  .agenda-list { list-style: none; margin: 0; padding: 0; }
  .agenda-item {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 13px;
    padding: 15px 0; border-top: 1px solid var(--border);
  }
  .agenda-item:first-child { border-top: 0; padding-top: 3px; }
  .agenda-item:last-child { padding-bottom: 2px; }
  .agenda-date {
    display: grid; justify-items: center; align-self: start; line-height: 1.05;
    padding: 6px 0 5px; border-radius: var(--radius-sm);
    background: var(--k-tint); border: 1px solid var(--k-border);
  }
  .agenda-date b { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; color: var(--ink); }
  .agenda-date span {
    margin-top: 2px; font-size: .56rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--k);
  }
  .agenda-date-now { background: var(--brand); border-color: var(--brand); }
  .agenda-date-now b, .agenda-date-now span { color: #fff; }
  .agenda-body { min-width: 0; }
  .agenda-kind { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
  .agenda-kind-name {
    font-size: .6rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--k);
  }
  .agenda-when { font-size: .72rem; color: var(--muted); }
  .agenda-when::before { content: "\00b7"; margin-right: 7px; color: var(--border-strong); }
  .agenda-tag {
    padding: 1px 5px; border: 1px solid var(--border); border-radius: 3px;
    background: var(--ground); color: var(--muted);
    font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  }
  .agenda-title { display: block; margin-top: 4px; font-size: .9rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
  .agenda-meta { margin-top: 3px; font-size: .78rem; line-height: 1.45; color: var(--muted); }
  .agenda-meta-quiet { font-size: .74rem; margin-top: 1px; }
  .agenda-time { font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .agenda-time::after { content: "\00b7"; margin: 0 6px; font-weight: 400; color: var(--border-strong); }
  .agenda-state { margin-top: 8px; }
  .agenda-state .chip { font-size: .72rem; }
  /* An invented entry is drawn the same but reads a shade quieter, so a
     column of them cannot outrank the one real window in it. */
  .agenda-preview .agenda-title { color: var(--ink-soft); font-weight: 600; }
  .agenda-note { margin-top: 6px; font-size: .74rem; line-height: 1.45; color: var(--ink-soft); }
  .agenda-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; margin-top: 9px; }
  .agenda-actions:empty { display: none; }
  .agenda-link { font-size: .8rem; font-weight: 600; color: var(--brand); text-decoration: none; }
  .agenda-link:hover { text-decoration: underline; }
  .agenda-actions .btn-link-danger { font-size: .76rem; }
  .agenda-rest { margin-top: 13px; font-size: .76rem; color: var(--muted); }

  /* Two breakpoints lived here for the full-width page these snippets used
     to be on: one stacked `.sched-layout`, the other turned the agenda into
     a card grid beside a note, because a single narrow column of entries
     would have left most of a full-bleed row empty. Both went with the page
     on 2026-09-01. The agenda is a 300px column of the dialog at every width
     the dialog is two columns wide, and the card-grid rule was still firing
     on a 900-1419px viewport - inside 300px (DECISIONS.md). */
  @media (max-width: 767px) {
    /* Seven columns of a phone screen hold a mark and nothing else, so the
       chip drops to its colour bar and the agenda below carries every word
       of it - the same trade the pulpit's small calendar makes. */
    .sched-cal { padding: 18px 14px 20px; }
    .sched-month td { height: 62px; }
    .sched-month th { font-size: .58rem; padding-left: 4px; }
    .sched-cell { gap: 3px; padding: 5px 4px 6px; }
    .sched-num { width: 22px; height: 22px; font-size: .76rem; }
    .sched-chip { height: 5px; padding: 0; border-left: 0; border-radius: 3px; background: var(--k); }
    .sched-chip b, .sched-chip-name { display: none; }
    .sched-chip-preview { opacity: .5; }
  }

  /* ---- "Więcej" sheet on the bottom bar ----
     The rail's remaining destinations plus the identity/logout that would
     otherwise be stranded in the hidden rail foot. Plain <details>, so it
     works with the keyboard and without JS; Alpine only closes it on an
     outside tap. */
  /* The bar outranks the assistant bubble (z-index 45), which otherwise
     paints over the open sheet's logout row. `.mobile-nav` is its own
     stacking context, so this has to be raised on the bar, not the sheet.
     They never overlap while the sheet is shut - the bubble is lifted clear
     of the bar at this breakpoint - so the raise costs nothing. */
  .mobile-nav { z-index: 46; }
  .mnav-more { position: relative; flex: 1 1 0; min-width: 0; }
  .mnav-more > summary {
    display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
    font-size: clamp(0.6rem, 2.6vw, 0.7rem); font-weight: 600; color: var(--muted);
    padding: 0.5rem 0.2rem 0.35rem; white-space: nowrap;
    border-top: 2px solid transparent; list-style: none; cursor: pointer;
  }
  .mnav-more > summary::-webkit-details-marker { display: none; }
  .mnav-more.active > summary, .mnav-more[open] > summary { color: var(--brand); border-top-color: var(--brand); }
  .mnav-sheet {
    position: absolute; bottom: calc(100% + 1px); right: 0;
    min-width: 232px; display: flex; flex-direction: column;
    background: var(--paper); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 6px 0;
  }
  /* Sheet rows are rows, not bar tiles: undo the bar's centred icon stack
     these <a>s would otherwise inherit from `.mobile-nav a`. */
  .mnav-sheet a {
    display: block; text-align: left; flex: 0 0 auto; border-top: 0;
    padding: 11px 18px; font-size: 0.88rem; font-weight: 500;
    color: var(--ink); text-decoration: none;
  }
  .mnav-sheet a:hover { background: var(--ground); }
  .mnav-sheet-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 6px; padding: 11px 18px 5px; border-top: 1px solid var(--border);
    font-size: 0.82rem; color: var(--muted);
  }
  .mnav-sheet-foot span { overflow: hidden; text-overflow: ellipsis; }

  /* ---- the signature ----
     One ECG blip, riding the rule above the section that wants something from
     the patient. Exactly once per screen: a second one and it stops meaning
     "look here" and starts meaning "decoration". */
  .treatment-band .sect-head,
  .rule-ecg {
    position: relative;
    border-top: 1px solid var(--border);
    padding-top: 26px;
  }
  .treatment-band .sect-head::before,
  .rule-ecg::before {
    content: '';
    position: absolute; top: -8px; left: 0;
    width: 58px; height: 16px;
    background: var(--ground) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='16' viewBox='0 0 58 16'%3E%3Cpath d='M0 8h16.6l2-5.4 3 11 2.4-5.6h5.6c2 0 2.6-3.4 4.6-3.4s2.6 3.4 4.6 3.4H58' fill='none' stroke='%238C5A12' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  }
  @media (forced-colors: active) {
    .treatment-band .sect-head::before,
    .rule-ecg::before { display: none; }
  }

  /* ---- offer & explainer surfaces ----
     Usługi i cennik, Osobisty Doktor, Programy opieki and the doctor
     profile all render the same three shapes: a stacked row list, a
     hairline grid of short facts, and a run of prose. The reviewing
     doctor's own material arrives as icon-in-pastel-circle cards; the
     content survives, the treatment does not - depth here is a 1px rule
     and whitespace, as everywhere else in the portal. */
  .page-lead { color: var(--muted); font-size: 0.95rem; max-width: 68ch; margin: -18px 0 30px; }
  .sect-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
  .sect-head-row h2 { font-size: 1.28rem; margin: 0; }
  .sect-note {
    font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--muted); white-space: nowrap;
  }

  .price-list { display: grid; }
  .price-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: start; gap: 4px 2.2rem;
    background: var(--surface); border: 1px solid var(--border);
    padding: 16px 20px; margin-bottom: -1px;
    text-decoration: none; color: var(--ink);
  }
  .price-row:first-of-type { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
  .price-row:last-of-type { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); margin-bottom: 0; }
  a.price-row:hover { background: var(--ground); border-color: var(--border-strong); }
  .price-main b { display: block; font-size: 0.98rem; font-weight: 600; margin-bottom: 3px; }
  .price-main span { display: block; font-size: 0.84rem; color: var(--muted); line-height: 1.45; max-width: 62ch; }
  /* Amber is a state ("not bookable yet"), never a price and never an action. */
  .price-main i {
    font-style: normal; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--accent-deep); margin-left: 0.5rem; white-space: nowrap;
  }
  .price-side { text-align: right; display: grid; justify-items: end; gap: 2px; }
  .price-value {
    font-family: var(--font-display); font-size: 1.34rem; font-weight: 600;
    font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.15;
  }
  .price-value small { font-size: 0.78rem; font-weight: 500; color: var(--muted); }
  .price-sub { font-size: 0.76rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .price-go { font-size: 0.82rem; font-weight: 600; color: var(--brand); white-space: nowrap; margin-top: 6px; }
  .price-row-soon { background: var(--ground); }
  .price-foot { margin-top: 14px; font-size: 0.8rem; color: var(--muted); }
  .way-row .price-side { align-self: center; }

  .rules-list { list-style: none; display: grid; margin: 0; padding: 0; }
  .rules-list li {
    background: var(--surface); border: 1px solid var(--border);
    padding: 14px 20px; margin-bottom: -1px;
    font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5;
  }
  .rules-list li:first-child { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
  .rules-list li:last-child { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); margin-bottom: 0; }

  .feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feat {
    background: var(--surface); border: 1px solid var(--border);
    padding: 14px 18px; margin: 0 -1px -1px 0; font-size: 0.9rem;
  }
  .feat b { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 4px; }
  .feat span { display: block; font-size: 0.8rem; color: var(--muted); line-height: 1.45; }

  .tag-list { list-style: none; display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
  .tag-list li {
    background: var(--surface); border: 1px solid var(--border);
    padding: 9px 16px; margin: 0 -1px -1px 0; font-size: 0.86rem;
  }

  .steps-list { list-style: none; display: grid; margin: 0; padding: 0; }
  .steps-list > li {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: start;
    background: var(--surface); border: 1px solid var(--border);
    padding: 16px 20px; margin-bottom: -1px;
  }
  .step-n {
    font-family: var(--font-display); font-size: 1.3rem; font-weight: 600;
    color: var(--border-strong); font-variant-numeric: tabular-nums; line-height: 1.15;
  }
  .steps-list b { display: block; font-size: 0.95rem; margin-bottom: 3px; }
  .steps-list span { display: block; font-size: 0.84rem; color: var(--muted); line-height: 1.45; max-width: 68ch; }

  .note-card { background: var(--surface); border: 1px solid var(--border); padding: 20px 24px; }
  .note-card p { font-size: 0.9rem; line-height: 1.6; max-width: 74ch; }
  .note-warn { margin-top: 12px; font-size: 0.82rem; color: var(--muted); }

  /* ---- state card ----
     "Where do I stand" on a page whose body is explanatory. It sits above
     the first rule so the patient's own situation is read before the
     description of the thing. */
  .state-card {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 20px 24px; margin-bottom: 34px;
  }
  .state-card-warn { border-left: 3px solid var(--accent); }
  .state-line { margin-bottom: 12px; }
  .state-note { font-size: 0.86rem; color: var(--muted); line-height: 1.55; max-width: 74ch; }
  .state-lead { font-size: 0.95rem; line-height: 1.6; max-width: 74ch; color: var(--ink-soft); }
  .state-acts { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
  .doc-row { display: flex; align-items: center; gap: 14px; }
  .doc-portrait {
    width: 52px; height: 52px; object-fit: cover;
    border: 1px solid var(--border); flex: 0 0 auto;
  }
  .doc-row > div > b { display: block; font-size: 1rem; }
  .doc-row > div > span { display: block; font-size: 0.82rem; color: var(--muted); margin-top: 2px; }
  .page-lead-tight { margin: 0 0 16px; }

  /* ---- doctor profile ----
     `public_profile_json` already carries help_with / approach / sections /
     languages for every specialist; this is where the portal finally reads
     them. "W czym mogę Ci pomóc" takes the blip: choosing a doctor is the
     one thing this page wants from the patient. */
  .doc-hero { display: flex; gap: 26px; align-items: flex-start; margin-bottom: 38px; }
  .doc-hero-photo {
    width: 148px; height: 186px; object-fit: cover;
    border: 1px solid var(--border); flex: 0 0 auto;
  }
  .doc-hero-id h1 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 0 0 4px; }
  .doc-headline { font-size: 0.95rem; color: var(--accent-deep); font-weight: 600; margin-bottom: 12px; }
  .doc-meta {
    font-size: 0.82rem; color: var(--muted);
    display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 20px;
  }
  .doc-sep { color: var(--border-strong); }
  .doc-meta .availability-dot { margin-right: 6px; }
  .doc-acts { display: flex; gap: 0.6rem; flex-wrap: wrap; }

  .doc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0 46px; margin-top: 2.6rem; }
  .doc-prose section + section { margin-top: 2.6rem; }
  .doc-prose p { font-size: 0.92rem; line-height: 1.65; margin-bottom: 0.85rem; max-width: 66ch; color: var(--ink-soft); }
  .doc-quote { border-left: 2px solid var(--accent); padding-left: 20px; }
  .doc-quote p { font-family: var(--font-display); font-size: 1.02rem; line-height: 1.6; color: var(--ink); }
  .doc-side { align-self: start; }
  .side-block { border-top: 1px solid var(--border); padding: 16px 0; }
  .side-block:first-child { border-top: 0; padding-top: 0; }
  .side-block h3 {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 9px;
  }
  /* The credential column already had the sidebar's type scale; what it
     lacked was the mark. A copper dash rather than an icon, because these
     titles come from `public_profile_json` and there is no fixed set to map
     icons onto. */
  .side-block h3::before {
    content: ''; display: inline-block; vertical-align: middle;
    width: 10px; height: 2px; border-radius: 1px; margin-right: 9px;
    background: var(--accent);
  }
  .side-block ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
  .side-block li, .side-block p { font-size: 0.82rem; line-height: 1.45; color: var(--ink-soft); }

  .pick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 20px; }
  .pick-doc {
    display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 12px; align-items: center;
    border: 1px solid var(--border); padding: 14px 16px; margin: 0 -1px -1px 0; cursor: pointer;
  }
  .pick-doc:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
  .pick-doc input { grid-column: 1; grid-row: 1 / span 3; justify-self: center; accent-color: var(--brand); }
  .pick-doc b { grid-column: 2; font-size: 0.92rem; font-weight: 600; }
  .pick-doc span { grid-column: 2; font-size: 0.78rem; color: var(--muted); }
  .pick-doc a { grid-column: 2; font-size: 0.78rem; font-weight: 600; color: var(--brand); margin-top: 2px; }
  .prog-note { margin-top: 14px; font-size: 0.78rem; color: var(--muted); max-width: 70ch; }
  .soon-list { margin-top: 26px; }

  @media (max-width: 1023px) {
    .feat-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .doc-grid { grid-template-columns: minmax(0, 1fr); }
    .doc-side { margin-top: 2.6rem; }
  }
  @media (max-width: 719px) {
    .pick-grid { grid-template-columns: minmax(0, 1fr); }
    .prog-price { text-align: left; }
  }
  @media (max-width: 719px) {
    .doc-hero { flex-direction: column; gap: 18px; }
    .doc-hero-photo { width: 116px; height: 146px; }
    /* Each fact takes its own line here, so the inline separators would be
       left dangling at the end of every one of them. */
    .doc-meta { display: block; }
    .doc-meta > span { display: block; }
    .doc-meta .doc-sep { display: none; }
  }
  @media (max-width: 719px) {
    .price-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .price-side {
      grid-column: 1; justify-items: start; text-align: left;
      grid-auto-flow: column; align-items: baseline; gap: 12px;
    }
    .price-go { margin-top: 0; margin-left: auto; }
    .feat-grid, .feat-grid-3 { grid-template-columns: minmax(0, 1fr); }
  }
}

/* Booking a call, both sides of it.

   The patient's page has one memorable thing: a strip of days that opens
   onto that day's hours. Everything else on it is quiet. The doctor's page
   is a week - seven columns of blocks - because that is the shape a person
   who works from a calendar already reads. Both reuse the record's own
   marks: navy for the chosen and the booked, copper for "this one is
   different" (out of hours, the urgent duty), a dashed edge for what is not
   settled yet. */
@layer pages {
  /* --- the patient: a day, then an hour ------------------------------- */
  .pick-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: var(--s4); align-items: start;
  }
  .pick-aside { position: sticky; top: var(--s2); display: flex; flex-direction: column; gap: var(--s2); }
  .pick-main > .page-head { margin-bottom: var(--s2); }

  .pick-strip {
    display: flex; gap: 8px; overflow-x: auto; padding: 2px 40px 10px 2px;
    scroll-snap-type: x proximity; scrollbar-width: none;
    /* the strip runs past the column on purpose; the fade is how it says so */
    mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
  }
  .pick-strip::-webkit-scrollbar { display: none; }
  .pick-day {
    flex: 0 0 92px; scroll-snap-align: start;
    display: grid; justify-items: center; gap: 1px; padding: 10px 6px 9px;
    border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--paper);
    box-shadow: var(--shadow-sm); cursor: pointer; font: inherit; color: var(--ink);
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
  }
  .pick-day:hover { border-color: var(--brand); }
  .pick-day:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  .pick-day-wd { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); }
  .pick-day-num { font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; line-height: 1.05; font-variant-numeric: tabular-nums; }
  .pick-day-mo { font-size: .72rem; color: var(--muted); margin-top: -1px; }
  .pick-day-n { margin-top: 5px; font-size: .7rem; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .pick-day-rest .pick-day-wd::after {
    content: ""; display: inline-block; width: 5px; height: 5px; margin-left: 4px; border-radius: 50%;
    background: var(--accent); vertical-align: 1px;
  }
  .pick-day.is-on { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-md); }
  .pick-day.is-on .pick-day-wd { color: var(--accent-lift); }
  .pick-day.is-on .pick-day-mo, .pick-day.is-on .pick-day-n { color: rgba(255, 255, 255, .72); }

  .pick-times-day { margin-top: var(--s2); }
  .pick-day-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; margin: 0 0 var(--s2); }
  .pick-group + .pick-group { margin-top: var(--s2); }
  .pick-group-head {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 8px;
    font-size: .8rem; font-weight: 600; color: var(--ink-soft);
  }
  .pick-group-price { font-weight: 600; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
  .pick-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
  .pick-time {
    position: relative; display: flex; align-items: center; justify-content: center;
    min-height: 42px; border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--paper); cursor: pointer; font-weight: 600; font-variant-numeric: tabular-nums;
    transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
  }
  .pick-time input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .pick-time:hover { border-color: var(--brand); }
  .pick-time:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 2px; }
  .pick-time:has(input:checked) { background: var(--brand); border-color: var(--brand); color: #fff; }
  .pick-time-ooh { border-left: 3px solid var(--accent); }
  .pick-time-ooh:has(input:checked) { border-left-color: var(--accent-lift); }

  .pick-call { margin-top: 0; }
  .pick-channels { margin-top: 4px; }
  .pick-channel { display: flex; align-items: center; gap: 12px; }
  .pick-channel-ico { width: 22px; height: 22px; flex: 0 0 auto; color: var(--accent-deep); }
  .pick-channel-body { display: flex; flex-direction: column; gap: 1px; }
  .pick-channel-body span { font-size: .8rem; color: var(--muted); }

  .pick-bar {
    position: sticky; bottom: var(--s2); z-index: 5;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
    margin-top: var(--s3); padding: 12px 14px 12px 18px;
    border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--paper);
    box-shadow: var(--shadow-lg);
  }
  .pick-bar-what { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .pick-bar-label { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); }
  .pick-bar-value { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }
  .pick-bar .btn { white-space: nowrap; }
  .pick-bar .btn[disabled] { opacity: .5; cursor: not-allowed; }

  .side-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0 12px; padding-top: 12px; border-top: 1px solid var(--panel-line); }
  .side-facts div { display: flex; flex-direction: column; gap: 2px; }
  .side-facts dt { font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--panel-muted); }
  .side-facts dd { margin: 0; font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; }
  .side-doc-link { font-size: .82rem; font-weight: 600; }
  .side-steps { margin: 0; padding-left: 1.2rem; font-size: .84rem; line-height: 1.55; color: var(--ink-soft); }
  .side-steps li + li { margin-top: 6px; }
  .side-steps + p { margin-top: 12px; }

  @media (max-width: 1099px) {
    .pick-layout { grid-template-columns: minmax(0, 1fr); }
    .pick-aside { position: static; }
    /* the bottom bar is fixed at this width, and the assistant sits on it */
    .pick-bar { bottom: 76px; padding-right: calc(var(--fab-clear) + 8px); }
  }
  @media (max-width: 719px) {
    .pick-bar { flex-direction: column; align-items: stretch; padding-right: calc(var(--fab-clear) + 22px); }
    .pick-bar .btn { width: 100%; }
  }

  /* --- the doctor: a week ---------------------------------------------- */
  .wk-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .wk-title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; margin: 0 4px; }
  .wk-legend { display: flex; gap: 14px; margin-left: auto; font-size: .74rem; color: var(--muted); }
  .wk-key { display: inline-flex; align-items: center; gap: 6px; }
  .wk-key::before { content: ""; width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--border); background: var(--paper); }
  .wk-key-booked::before { background: var(--brand-tint); border-color: var(--brand); }
  .wk-key-ooh::before { border-left: 3px solid var(--accent); }

  .wk-grid {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: start;
  }
  .wk-col { min-width: 0; border-radius: var(--radius-md); }
  .wk-head {
    display: grid; justify-items: center; gap: 2px; padding: 8px 4px 10px;
    border-bottom: 1px solid var(--border); margin-bottom: 8px;
  }
  .wk-wd { font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .wk-num {
    width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
    font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums;
  }
  .wk-col.is-today .wk-num { background: var(--brand); color: #fff; }
  .wk-col.is-today .wk-wd { color: var(--brand); }
  .wk-col.is-rest .wk-wd { color: var(--accent-deep); }
  .wk-col.is-past .wk-head { opacity: .55; }
  .wk-duty-form { margin-top: 4px; }
  .wk-duty {
    font: inherit; font-size: .66rem; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
    padding: 3px 8px; border-radius: var(--radius-pill); cursor: pointer;
    border: 1px solid var(--border); background: var(--paper); color: var(--muted);
    transition: border-color var(--t-fast), color var(--t-fast);
  }
  .wk-duty:hover { border-color: var(--accent); color: var(--accent-deep); }
  .wk-duty.is-mine { background: var(--accent); border-color: var(--accent); color: #fff; }
  .wk-duty.is-mine:hover { background: var(--accent-deep); color: #fff; }
  .wk-duty.is-other { border-style: dashed; }
  .wk-duty.is-free { color: var(--border-strong); border-color: transparent; }
  .wk-duty.is-free:hover { color: var(--accent-deep); border-color: var(--accent-border); }

  .wk-body { display: flex; flex-direction: column; gap: 6px; min-height: 48px; }
  .wk-slot {
    position: relative; display: flex; flex-direction: column; gap: 1px; min-width: 0;
    padding: 7px 24px 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--paper); color: var(--ink); text-decoration: none; font-variant-numeric: tabular-nums;
  }
  .wk-slot b { font-size: .84rem; font-weight: 650; }
  .wk-slot-who { font-size: .78rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wk-slot-what { font-size: .7rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wk-slot.is-booked { background: var(--brand-tint); border-color: var(--brand); border-left-width: 3px; padding-right: 10px; }
  a.wk-slot.is-booked:hover { box-shadow: var(--shadow-sm); }
  .wk-slot.is-hold { border-style: dashed; background: var(--paper); }
  .wk-slot.is-ooh:not(.is-booked) { border-left: 3px solid var(--accent); }
  .wk-slot.is-ooh.is-booked { border-left-color: var(--accent); }
  .wk-slot.is-gone { opacity: .5; }
  .wk-x-form { position: absolute; top: 4px; right: 4px; }
  .wk-x {
    width: 20px; height: 20px; display: grid; place-items: center; border: 0; border-radius: 4px;
    background: transparent; color: var(--border-strong); font-size: 1rem; line-height: 1; cursor: pointer;
  }
  .wk-x:hover, .wk-x:focus-visible { background: var(--danger-tint); color: var(--danger); outline: none; }
  .wk-add {
    font: inherit; font-size: .74rem; font-weight: 600; color: var(--muted); background: transparent;
    border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 10px 6px; cursor: pointer;
  }
  .wk-add:hover { color: var(--accent-deep); border-color: var(--accent); }
  .wk-publish-span { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .wk-publish-span .form-group { margin: 0; }
  /* The length of this publish: pills, "inna" with a number, or the whole
     span as one window. The preview under them is what the server will cut. */
  .wk-len { display: flex; flex-wrap: wrap; gap: 6px; }
  .wk-len-pill {
    font: inherit; font-size: .78rem; font-weight: 600; color: var(--ink-soft); background: var(--surface);
    border: 1px solid var(--border-strong); border-radius: var(--radius-pill); padding: 4px 11px; cursor: pointer;
    font-variant-numeric: tabular-nums;
  }
  .wk-len-pill:hover { border-color: var(--ink); color: var(--ink); }
  .wk-len-pill.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
  .wk-len-whole { flex-basis: 100%; text-align: center; font-weight: 500; }
  .wk-len-custom { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .84rem; color: var(--muted); }
  .wk-len-custom .form-control { width: 96px; }
  .wk-preview { margin: -4px 0 0; font-size: .8rem; line-height: 1.5; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
  .wk-preview b { color: var(--ink); }
  .wk-preview-rest { color: var(--muted); }
  .wk-slot-end { font-style: normal; font-weight: 500; color: var(--muted); }
  .wk-settings summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
  .wk-settings summary::-webkit-details-marker { display: none; }
  .wk-settings summary::after {
    content: ""; margin-left: auto; width: 7px; height: 7px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); transition: transform var(--t-fast);
  }
  .wk-settings[open] summary::after { transform: rotate(-135deg); }
  .wk-settings[open] summary { margin-bottom: 12px; }

  /* a booked call on a case page, patient's or doctor's: the day in serif,
     the hours in figures, the same date tile the pulpit and the queue use */
  .case-call-when { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
  .case-call-when .agenda-date { width: 50px; flex: 0 0 auto; }
  .case-call-title { display: block; font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; margin: 0; line-height: 1.2; }
  .case-call-time { margin: 2px 0 0; font-weight: 650; font-variant-numeric: tabular-nums; }
  .case-call-time span { font-weight: 500; color: var(--accent-deep); }
  .case-call > p { margin-top: 0; }
  .confirm-call { margin: 6px 0 4px; }
  .confirm-doc { display: flex; align-items: center; gap: 12px; }
  .confirm-doc .doctor-avatar { width: 44px; height: 44px; flex: 0 0 auto; }
  .confirm-doc p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--ink-soft); }


  @media (max-width: 1099px) {
    .wk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  @media (max-width: 719px) {
    .wk-grid { grid-template-columns: minmax(0, 1fr); }
    .wk-col.is-past { display: none; }
    .wk-col { border: 1px solid var(--border); background: var(--paper); padding: 6px 8px 8px; }
    .wk-head { grid-template-columns: auto auto 1fr; justify-items: start; align-items: center; gap: 10px; }
    .wk-duty-form { margin: 0; justify-self: end; }
    .wk-legend { margin-left: 0; width: 100%; }
  }
}

/* The consultation record and the doctor's agenda. The record is a form
   while the consultation is open and a definition list once it closes; the
   two share the label scale so a doctor reads their own note the way they
   wrote it. The ICD-10 choice is a chip, not a typed code. */
@layer pages {
  .rec-form .form-group + .form-group { margin-top: 12px; }
  .rec-icd-group { position: relative; }
  .rec-icd-chosen {
    display: flex; align-items: center; gap: 10px; min-height: var(--control-h, 38px);
    padding: 6px 8px 6px 12px; border: 1px solid var(--brand); border-radius: var(--radius-md);
    background: var(--brand-tint); font-size: .92rem;
  }
  .rec-icd { font-family: var(--font-body); font-weight: 700; letter-spacing: .02em; color: var(--brand); font-variant-numeric: tabular-nums; }
  .rec-icd-chosen span { flex: 1 1 auto; min-width: 0; }
  .rec-icd-clear {
    width: 24px; height: 24px; border: 0; border-radius: 4px; background: transparent;
    color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer;
  }
  .rec-icd-clear:hover { background: var(--paper); color: var(--danger); }
  .rec-icd-results { margin-top: 6px; }
  .icd-results { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--paper); box-shadow: var(--shadow-md); overflow: hidden; }
  .icd-results li + li { border-top: 1px solid var(--border); }
  .icd-result {
    display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; width: 100%; text-align: left;
    padding: 8px 12px; border: 0; background: transparent; font: inherit; font-size: .88rem; cursor: pointer; color: var(--ink);
  }
  .icd-result:hover, .icd-result:focus-visible { background: var(--brand-tint); outline: none; }
  .icd-result b { color: var(--brand); font-variant-numeric: tabular-nums; }
  .icd-none { margin: 6px 0 0; font-size: .82rem; color: var(--muted); }

  .rec-read { display: grid; gap: 12px; margin: 0; }
  .rec-read > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: baseline; }
  .rec-read dt { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); }
  .rec-read dd { margin: 0; font-size: .95rem; line-height: 1.55; }
  .rec-read .rec-internal { padding: 10px 12px; border-radius: var(--radius-md); background: var(--ground); }
  .rec-read .rec-internal dt { color: var(--muted); }
  .rec-line { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; }
  .rec-line-label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); }
  .rec-decisions { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: grid; gap: 8px; }
  .rec-decision { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
  .rec-decision-kind { font-weight: 650; }
  .rec-decision p { flex-basis: 100%; margin: 0; }
  .rec-addenda { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: grid; gap: 10px; }
  .rec-addendum { padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--accent-tint); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
  .rec-addendum p { margin: 0 0 4px; font-size: .92rem; line-height: 1.5; }
  .rec-addendum-internal { border-left-color: var(--border-strong); background: var(--ground); }
  .rec-add { margin-top: 12px; }
  .rec-visible { display: flex; align-items: center; gap: 8px; font-size: .86rem; }
  .rec-patient-doc { padding: 14px 18px; }
  .rec-patient-doc > summary { cursor: pointer; font-weight: 600; }
  .rec-patient-doc[open] > summary { margin-bottom: 12px; }
  .hist-link { color: inherit; text-decoration: none; }
  .hist-link:hover strong { text-decoration: underline; }

  .attempts { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
  .attempts-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
  .attempts-list li { display: flex; align-items: baseline; gap: 10px; font-size: .88rem; font-variant-numeric: tabular-nums; }
  .attempts-list li span:first-child { color: var(--muted); min-width: 64px; }
  .attempts-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .btn-absent { border-color: var(--danger); color: var(--danger); }
  .btn-absent:hover { background: var(--danger-tint); }


  /* The documents of a consultation. One list, each kind with the mark it
     has on "Recepty i dokumenty"; the registry's answer is a chip, its
     reason a line under the row. Issuing forms fold away behind their
     kind's mark; the manual fallback folds behind them. */
  .docs-list { list-style: none; margin: 0; padding: 0; }
  .docs-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--border); }
  .docs-row:first-child { padding-top: 0; }
  .docs-row:last-child { border-bottom: 0; padding-bottom: 0; }
  .docs-ico { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--ground); color: var(--ink-soft); }
  .docs-referral .docs-ico { color: var(--brand); background: var(--brand-tint); }
  .docs-sicknote .docs-ico { color: var(--sky); background: var(--sky-tint); }
  .docs-prescription .docs-ico { color: var(--success); background: var(--success-tint); }
  .docs-row.is-rejected_by_registry .docs-ico, .docs-row.is-rejected_by_connector .docs-ico { color: var(--danger); background: var(--danger-tint); }
  .docs-row.is-unknown_outcome .docs-ico, .docs-row.is-retryable_failure .docs-ico { color: var(--warning); background: var(--warning-tint); }
  .docs-body { min-width: 0; }
  .docs-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 2px; }
  .docs-line .chip { white-space: nowrap; }
  .docs-kind { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
  .docs-title { display: block; font-size: .98rem; line-height: 1.35; }
  .docs-detail { margin: 2px 0 0; font-size: .9rem; color: var(--ink-soft); }
  .docs-meta { margin: 4px 0 0; font-size: .82rem; color: var(--muted); line-height: 1.5; }
  .docs-meta .rec-icd { font-size: .82rem; }
  .docs-fail { margin: 6px 0 0; padding: 8px 10px; border-left: 3px solid var(--danger); background: var(--danger-tint); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: .86rem; line-height: 1.45; color: var(--ink); }
  .is-unknown_outcome .docs-fail, .is-retryable_failure .docs-fail { border-left-color: var(--warning); background: var(--warning-tint); }
  .docs-check { grid-column: 2; justify-self: start; margin: 4px 0 0; }
  .docs-none { margin: 0; color: var(--muted); font-size: .92rem; }
  .docs-hold { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--warning-tint); color: var(--warning); font-size: .88rem; font-weight: 600; }
  .docs-actions { margin-top: 14px; padding-top: 4px; display: grid; gap: 8px; }
  .docs-list + .docs-actions { border-top: 1px solid var(--border); padding-top: 14px; }
  .docs-issue { border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--paper); }
  .docs-issue > summary { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; list-style: none; font-weight: 600; color: var(--ink); }
  .docs-issue > summary::-webkit-details-marker { display: none; }
  .docs-issue > summary > span:last-child { display: flex; flex-direction: column; }
  .docs-issue > summary small { font-size: .78rem; font-weight: 500; color: var(--muted); }
  .docs-issue > summary::after { content: "+"; margin-left: auto; font-size: 1.25rem; font-weight: 400; color: var(--muted); line-height: 1; }
  .docs-issue[open] > summary::after { content: "\2013"; }
  .docs-issue[open] > summary { border-bottom: 1px solid var(--border); }
  .docs-issue > form, .docs-issue > .stack { padding: 14px; }
  .docs-issue:hover { border-color: var(--ink); }
  .docs-manual { border-style: dashed; }
  .docs-manual > summary { font-weight: 500; }
  .docs-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .docs-indication { border: 0; margin: 0; padding: 0; }
  .docs-indication legend { padding: 0; }
  .docs-form .form-hint { margin: 0; font-size: .84rem; color: var(--muted); line-height: 1.5; }

  /* The patient's side of the same documents: the kind's mark, what it is,
     and the one line that matters - where to collect it. */
  .pdoc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  .pdoc-row { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; }
  .pdoc-row > div > b { display: block; font-size: 1rem; line-height: 1.35; }
  .pdoc-row .cell-meta { display: block; margin-top: 2px; }
  .pdoc-ico { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--brand-tint); color: var(--brand); }
  .pdoc-note { margin: 4px 0 0; font-size: .95rem; }
  .pdoc-where { display: block; margin-top: 6px; font-size: .86rem; color: var(--ink-soft); }
  @media (max-width: 719px) {
    .docs-dates { grid-template-columns: 1fr; }
  }
}

/* Cross-document view transitions: 150ms fade between pages. Pseudo-elements
   are not matched by the global reduced-motion kill, hence the explicit off. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 150ms; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}


/* Consultation follow-ups (2026-09-08): the doctor-side failure fold on the
   "Rozmowa" card, the patient's two-way choice after it, and the urgent
   mark on a service tile and an agenda row. */
.call-failure { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px; }
.call-failure > summary { cursor: pointer; font-size: .86rem; color: var(--muted); }
.call-failure form { margin-top: 10px; display: grid; gap: 8px; }
.case-call-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 0; }
.case-choice-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.service-tile-urgent { color: var(--danger); }
/* Frozen sales (membership, programmes): greyed out, still readable, still a
   link to the page that explains the state. */
.service-tile-frozen, .price-row-frozen { opacity: .55; filter: grayscale(.6); }
.service-tile-frozen:hover, .price-row-frozen:hover { opacity: .8; }
.frozen-note { font-size: .86rem; color: var(--muted); border: 1px dashed var(--border); border-radius: 10px; padding: 10px 14px; margin: 10px 0 0; }

/* ---- the doctor's day: a stage and a board (DECISIONS.md 2026-09-11) ----
   The next call is drawn large on the one dark object of the page, today in
   order beside it; under it four columns, one card per consultation. The
   urgent one keeps red on its edge and the word "pilna" beside it. */
@layer pages {
  .ag-head { margin-bottom: 22px; }
  .ag-counts { margin: 0; font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; }
  .ag-counts-urgent { color: var(--danger); font-weight: 600; }

  .ag-stage {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px;
    padding: 26px 30px 28px; margin-bottom: 30px;
  }
  .ag-stage-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .ag-stage .side-title { margin-bottom: 0; }
  .ag-stage-urgent { color: #FFB3B3; }
  .ag-stage-urgent svg { color: #FFB3B3; }
  .ag-stage-when { display: flex; align-items: baseline; gap: 14px; margin: 0; }
  .ag-stage-when b {
    font-family: var(--font-display); font-size: clamp(2.6rem, 2rem + 2vw, 3.8rem); font-weight: 600;
    line-height: 1; letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums;
  }
  .ag-stage-when span { color: var(--panel-muted); font-size: .95rem; }
  .ag-stage-who { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
  .ag-stage-avatar { width: 46px; height: 46px; background: #fff; color: var(--panel); font-size: .95rem; }
  .ag-stage-who-text { display: flex; flex-direction: column; min-width: 0; }
  .ag-stage-who-text b { font-size: 1.2rem; color: #fff; }
  .ag-stage-who-text span { font-size: .88rem; color: var(--panel-muted); }
  .ag-stage-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
  .ag-stage-chips .chip { background: rgba(255, 255, 255, 0.1); color: #fff; }
  .ag-stage-chips .chip-warm { background: rgba(228, 176, 113, 0.18); color: #E4B071; }
  .ag-stage-reason { margin: 6px 0 0; font-family: var(--font-display); font-size: 1.05rem; line-height: 1.5; color: var(--panel-ink); max-width: 58ch; }
  .ag-stage-reason a { color: #fff; text-decoration: underline; }
  .ag-stage-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

  .ag-stage-day { border-left: 1px solid var(--panel-line); padding-left: 28px; display: flex; flex-direction: column; min-width: 0; }
  .ag-day-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
  .ag-day-row {
    display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: baseline; gap: 12px;
    padding: 8px 10px; border-radius: var(--radius-sm); font-size: .9rem;
  }
  .ag-day-row b { color: var(--panel-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
  .ag-day-row a { color: var(--panel-ink); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ag-day-row a:hover { color: #fff; }
  .ag-day-row span { font-size: .74rem; color: var(--panel-muted); }
  .ag-day-row.is-next { background: rgba(255, 255, 255, 0.08); }
  .ag-day-row.is-next b, .ag-day-row.is-next a { color: #fff; }
  .ag-day-row.is-next span { color: var(--accent-lift); }
  .ag-day-row.is-urgent { background: rgba(163, 32, 32, 0.28); }
  .ag-day-row.is-urgent b, .ag-day-row.is-urgent span { color: #FFD5D5; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .72rem; }
  .ag-day-row.is-urgent b { font-size: .9rem; letter-spacing: 0; text-transform: none; }
  .ag-day-row.is-urgent a { color: #fff; }
  .ag-day-row.is-past a, .ag-day-row.is-past b { opacity: .6; }
  .ag-day-row.is-owed { margin-top: 6px; border-top: 1px solid var(--panel-line); border-radius: 0; padding-top: 12px; }
  .ag-day-row.is-owed b, .ag-day-row.is-owed span { color: var(--accent-lift); }
  .ag-day-empty { margin: 0; font-size: .9rem; }
  .ag-stage-cal { margin-top: auto; padding-top: 14px; font-size: .84rem; color: var(--panel-muted); }
  .ag-stage-cal:hover { color: #fff; }

  .ag-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; }
  .ag-col { min-width: 0; }
  .ag-col-head { display: flex; align-items: baseline; gap: 8px; padding: 0 2px; margin-bottom: 12px; }
  .ag-col-head h2 { font-size: 1.2rem; }
  .ag-col-head span { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
  .ag-col-lead { margin: -6px 0 12px; font-size: .8rem; line-height: 1.5; color: var(--muted); }
  .ag-col-list { display: flex; flex-direction: column; gap: 10px; }
  .ag-col-day { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 6px 0 -2px 2px; }
  .ag-col-day:first-child { margin-top: 0; }
  .ag-col-empty { margin: 0; padding: 14px 2px; font-size: .86rem; color: var(--muted); }

  .ag-card {
    display: flex; flex-direction: column; min-width: 0;
    background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--border-strong);
    border-radius: var(--radius-md); padding: 12px 14px 12px; box-shadow: var(--shadow-sm);
    transition: box-shadow var(--t-fast), transform var(--t-fast);
  }
  .ag-card:hover { box-shadow: var(--shadow-md); }
  .ag-card-urgent { border-top-color: var(--danger); }
  .ag-card-owed { border-top-color: var(--accent); }
  .ag-card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .ag-card-when { font-size: 1.02rem; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .ag-card-urgent .ag-card-when { color: var(--danger); }
  .ag-mode { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; color: var(--muted); white-space: nowrap; }
  .ag-mode svg { width: 14px; height: 14px; }
  .ag-card-kind {
    display: block; margin-top: 6px; font-size: .67rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted); overflow-wrap: anywhere;
  }
  .ag-card-urgent .ag-card-kind { color: var(--danger); }
  .ag-card-owed .ag-card-kind { color: var(--accent-deep); }
  .ag-card-name { display: block; margin-top: 2px; font-size: .96rem; font-weight: 600; color: var(--ink); }
  .ag-card-name:hover { text-decoration: underline; }
  .ag-card-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
  .ag-card-meta { font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
  .ag-card-severity { font-size: .72rem; font-weight: 700; color: var(--muted); }
  .ag-card-urgent .ag-card-severity { color: var(--danger); }
  .ag-card-owed .ag-card-severity { color: var(--accent-deep); }
  .ag-card .chip { font-size: .72rem; }
  .ag-card .badge { font-size: .72rem; padding: .2rem .6rem; }

  /* the rail says how much waits, and how much of it is urgent */
  .rail-count {
    margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, 0.12); color: #fff; font-size: .72rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .rail-count-urgent { background: var(--accent-lift); color: var(--panel); }
  .mnav-count {
    position: absolute; top: 4px; right: 18%; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
    background: var(--accent-lift); color: var(--panel); font-size: .64rem; font-weight: 700; line-height: 16px; text-align: center;
  }

  @media (max-width: 1099px) {
    .ag-stage { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .ag-stage-day { border-left: 0; padding-left: 0; border-top: 1px solid var(--panel-line); padding-top: 18px; }
    .ag-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 719px) {
    .ag-board { grid-template-columns: minmax(0, 1fr); }
    .ag-stage { padding: 20px 18px 22px; }
  }
}

/* ---- the case page: a dossier and a decision (DECISIONS.md 2026-09-11) ---- */
@layer pages {
  .case-head { margin-bottom: 20px; align-items: center; }
  .case-head-who { display: flex; align-items: center; gap: 16px; min-width: 0; }
  .case-head-avatar { width: 52px; height: 52px; font-size: 1.05rem; flex: 0 0 auto; }
  .case-head h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem); }
  .case-head .page-sub { margin-top: 2px; }
  .case-head .page-sub .badge { vertical-align: middle; }
  .case-call-strip {
    display: flex; align-items: center; gap: 14px;
    padding: 10px 16px 10px 12px; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  }
  .case-call-strip .agenda-date { width: 46px; flex: 0 0 auto; }
  .case-call-strip-text { display: flex; flex-direction: column; min-width: 0; }
  .case-call-strip-text b { font-size: .95rem; color: var(--ink); font-variant-numeric: tabular-nums; }
  .case-call-strip-text b span { font-weight: 500; color: var(--accent-deep); }
  .case-call-strip-text > span { font-size: .82rem; color: var(--muted); }

  @media (min-width: 1100px) {
    .layout-two-columns.case-layout { grid-template-columns: minmax(0, 1fr) 440px; }
  }
  .case-tabs {
    position: sticky; top: 0; z-index: 5;
    display: flex; gap: 2px; padding: 8px 0 0; margin-bottom: 4px;
    background: var(--ground); border-bottom: 1px solid var(--border-strong);
  }
  .case-tabs a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px 9px; margin-bottom: -1px; font-size: .88rem; font-weight: 500; color: var(--muted);
    border-bottom: 2px solid transparent;
  }
  .case-tabs a:hover { color: var(--ink); border-bottom-color: var(--border-strong); }
  .case-tabs a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
  /* The chosen tab: ink, bold, a copper rule that sits on the bar's own line. */
  .case-tabs a[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
  .case-tabs a.is-warm { color: var(--accent-deep); }
  .case-tabs a.is-warm[aria-selected="true"] { color: var(--accent-deep); }
  .case-tabs a[aria-selected="true"] .case-tab-count { background: var(--ink); color: var(--surface); border-color: var(--ink); }
  .case-tabs a.is-warm[aria-selected="true"] .case-tab-count, .case-tabs a.is-warm .case-tab-count { background: var(--accent); color: #fff; border-color: var(--accent); }
  .case-pane { scroll-margin-top: 56px; }
  .case-rules-flag { display: block; font-size: .88rem; text-decoration: none; }
  .case-rules-flag:hover { text-decoration: underline; }
  .case-tab-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px;
    padding: 0 5px; border-radius: var(--radius-sm); background: var(--paper); border: 1px solid var(--border);
    font-size: .7rem; font-weight: 700; color: var(--ink-soft); font-variant-numeric: tabular-nums;
  }
  .case-layout .card[id] { scroll-margin-top: 56px; }

  .case-timeline { list-style: none; margin: 0; padding: 0; }
  .case-tl { position: relative; padding: 0 0 20px 26px; }
  .case-tl::before { content: ""; position: absolute; left: 5px; top: 18px; bottom: -4px; width: 2px; background: var(--border); }
  .case-tl:last-child { padding-bottom: 0; }
  .case-tl:last-child::before { display: none; }
  .case-tl-dot {
    position: absolute; left: 0; top: 6px; width: 12px; height: 12px; border-radius: 50%;
    background: var(--border-strong); border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border-strong);
  }
  .case-tl:first-child .case-tl-dot { background: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
  .case-tl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .case-tl-head strong { font-size: .95rem; }
  .case-tl-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; font-size: .82rem; color: var(--muted); }
  .case-tl-meta .badge { font-size: .72rem; padding: .18rem .6rem; }
  .case-tl-dx { display: block; margin-top: 5px; font-size: .9rem; color: var(--ink); }
  .case-tl-docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }

  .case-decision .card-title { margin-bottom: 14px; }
  .case-call-log { padding: 0 0 14px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
  .case-call-log .attempts-list { margin-bottom: 8px; }
  .case-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
  .case-section .side-title { margin-bottom: 8px; }
  .case-section > .text-muted { font-size: .84rem; line-height: 1.5; }
  .decision-finalize .side-title { margin-bottom: 6px; }
  .rec-private .form-label span { font-weight: 500; color: var(--muted); font-size: .8rem; margin-left: 4px; }
  .rec-private .form-control { background: #FBF9F4; }
  .sticky-panel .docs-card { margin-top: var(--gap); }

  /* The medication picker on the close: search, results, one chosen
     package with its four fields. The fieldset carried the browser's
     default box, the results and the chosen package had no rules of
     their own, so the copper decision read as a broken form. */
  .medication-picker { margin: 0 0 14px; padding: 14px 0 0; border: 0; border-top: 1px solid var(--border); min-width: 0; }
  .medication-picker legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
  .medication-picker .form-hint { font-size: .78rem; }
  .medication-previous {
    display: grid; gap: 4px; padding: 10px 12px; margin-bottom: 12px;
    background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius-sm);
  }
  .medication-previous-label { margin: 0; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
  .medication-previous-name { margin: 0; font-size: .88rem; color: var(--ink); line-height: 1.45; }
  .medication-previous .btn { justify-self: start; margin-top: 4px; }
  .medication-previous .form-hint { margin: 0; }
  .medication-results { list-style: none; margin: 0 0 12px; padding: 0; max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
  .medication-result { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
  .medication-result:last-child { border-bottom: 0; }
  .medication-result-body { min-width: 0; }
  .medication-result-name { margin: 0; font-size: .9rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
  .medication-result-strength { font-weight: 500; color: var(--ink-soft); margin-left: 4px; }
  .medication-result-meta { margin: 2px 0 0; font-size: .78rem; color: var(--muted); line-height: 1.4; }
  .medication-result-refusal { margin: 0; flex: 0 0 40%; font-size: .76rem; color: var(--danger); line-height: 1.35; text-align: right; }
  .medication-result-excluded { background: var(--paper); }
  .medication-result-excluded .medication-result-name { color: var(--muted); }
  .medication-result .btn { flex-shrink: 0; }
  .medication-chosen {
    padding: 12px 14px; margin-bottom: 4px;
    background: var(--paper); border: 1px solid var(--border-strong); border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
  }
  .medication-chosen-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  .medication-chosen-label { margin: 0 0 2px; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-deep); }
  .medication-chosen-name { margin: 0; font-size: .95rem; font-weight: 600; color: var(--ink); }
  .medication-change { flex-shrink: 0; padding: 0; background: none; border: 0; font-size: .82rem; font-weight: 500; color: var(--brand); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
  .medication-change:hover { color: var(--ink); }
  .medication-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  .medication-fields .form-group { margin: 0; }
  .medication-fields .form-label { font-size: .8rem; }
  .form-check { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: .88rem; cursor: pointer; }
  .form-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
  @media (max-width: 479px) { .medication-fields { grid-template-columns: 1fr; } }
}

/* ---- The doctor's archive: closed consultations by month ---- */
@layer pages {
  .arch-search { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .arch-search .form-control { width: 240px; max-width: 100%; }
  .arch-clear { font-size: .84rem; color: var(--muted); }
  .arch-month { margin-top: 20px; }
  .arch-month-title { font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border-strong); }
  .arch-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
  .arch-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
  .arch-row:last-child { border-bottom: 0; }
  .arch-when { display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: start; padding: 6px 0; border-radius: var(--radius-sm); background: var(--paper); border: 1px solid var(--border); font-variant-numeric: tabular-nums; }
  .arch-when b { font-family: var(--font-display); font-size: 1.3rem; line-height: 1; color: var(--ink); }
  .arch-when span { font-size: .72rem; color: var(--muted); margin-top: 3px; }
  .arch-body { min-width: 0; }
  .arch-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .arch-name { font-weight: 600; font-size: .98rem; color: var(--ink); }
  .arch-name:hover { color: var(--brand); }
  .arch-meta { margin: 2px 0 0; font-size: .82rem; color: var(--muted); }
  .arch-urgent { color: var(--accent-deep); font-weight: 600; }
  .arch-dx { margin: 5px 0 0; font-size: .9rem; color: var(--ink); }
  .arch-docs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
  .arch-empty { margin-top: 12px; }
  @media (max-width: 719px) {
    .arch-row { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 10px 12px; }
  }
}