/* ============================================================
   HansMed Patient Portal — Soft Courtyard surface pass (PR 1)
   ------------------------------------------------------------
   ADDITIVE AND REVERSIBLE. Loaded LAST on portal.html ONLY.
   Deleting its <link> restores the portal exactly as it was;
   no rule in the working portal stylesheets is edited.

   ★ WHY A SEPARATE FILE, NOT AN EDIT IN PLACE ★
   doctor.html loads BOTH courtyard-portal-styles.css AND
   courtyard-portal-shell.css (grepped 2026-09-30). Editing
   .p-card / .p-btn / .p-nav in either of those would restyle the
   PRACTITIONER CONSOLE — a live clinical surface that is not in
   this change's scope and has its own skin
   (courtyard-doctor-skin.css). Keeping the pass in a file that
   only portal.html links makes that regression structurally
   impossible rather than merely unintended.

   Scope: surface only — radii, card fills, shadows, the care
   card's strip colour, and the dock. NO markup, NO JS, NO
   behaviour, NO copy, NO spacing that would reflow a screen.

   ── What is deliberately NOT here ──
   · .p-btn radius. The portal's buttons are pills (999px) and
     read fine in the softer language; changing them is the most
     visible and least necessary edit in the pass, so it is left
     as a one-line follow-up if wanted.
   · The care card itself is NOT turned into a jade slab. It is a
     WHITE DOCUMENT card by deliberate design (#541 replaced the
     dark meta-table slab with it). Only its top strip changes
     colour — see the block below.
   ============================================================ */

:root {
  /* One jade family for the whole pass, so the strip, the dock pill
     and the advice accent cannot drift apart.

     ★ DARKNESS IS LOAD-BEARING, NOT TASTE ★
     --pj-deep replaces --clay-700 (#4E3422) as a surface that
     carries cream text. Measured against #F5EEDF:
        #4E3422 (today)  →  9.89:1
        #2C4A3C (this)   →  8.45:1   AAA, normal text
     A mid jade such as #5B7B6A measures 4.38:1 on cream text and
     FAILS WCAG AA for anything that is not large text, which is
     why the pass uses the deep end of the family and not the
     colour the mockup drew. Do not lighten these two without
     re-measuring every token that sits on them. */
  --pj-deep:   #2C4A3C;
  --pj-deeper: #243B30;
  /* Hairline / accent weight — safe on cream, never carries text. */
  --pj-accent: #5B7B6A;
  /* The softer card fill. A warm off-white, one step brighter than
     --cream-100 (#F5EEDF), so trays recede and the white row-cards
     inside them still read as raised. */
  --pj-surface: #FEFCF6;
}

/* ── Trays ──
   .p-card is the tray that holds the stack-rows (which are already
   white cards of their own). Lifting the tray toward white and
   rounding it a little keeps the nesting legible. */
.p-card {
  background: var(--pj-surface);
  border-radius: 18px;
}
/* .urgent keeps its own left rule and warm border — only the corner
   follows the pass, or the accent stops lining up with the card. */
.p-card.urgent { border-radius: 18px; }
/* .dark is the one tray that must NOT be lightened: it is used where
   an inverted surface is the point. Corner only. */
.p-card.dark { border-radius: 18px; }
.p-card.clickable:hover {
  box-shadow: 0 16px 34px -18px rgba(38, 24, 16, 0.20);
}

/* ── The care card ──
   Corner and shadow only. The white document body, its clay hairline
   border and every text colour inside it are untouched. */
.p-hero {
  border-radius: 18px;
  box-shadow: 0 12px 28px -16px rgba(38, 24, 16, 0.20);
}

/* ── The care card's strip: clay brown → jade ──
   This is the whole colour story of the pass. The strip is the one
   saturated surface on Today, so moving it from #4E3422 to jade is
   what makes the screen read warmer-green without touching a single
   text colour or the document metaphor of the card beneath it.

   Contrast of its cream-100 text on the gradient's LIGHTEST point
   (--pj-deep) is 8.45:1 — see the token block above. */
.p-hero-tag {
  background: linear-gradient(100deg, var(--pj-deep), var(--pj-deeper));
}
/* The live dot sits on the strip and was tuned against brown. Amber on
   jade goes muddy, so it moves to a pale sage that still reads as
   "this is happening" against the deep green. */
.p-hero-tag .live-dot {
  background: #A8C6AE;
  box-shadow: 0 0 0 4px rgba(168, 198, 174, 0.22);
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(168, 198, 174, 0.22); }
  50%      { box-shadow: 0 0 0 8px rgba(168, 198, 174, 0.06); }
}

/* ── Rows ──
   Already white cards (#541-era). The pass only rounds them and adds
   a whisper of lift so a stack reads as separate cards rather than a
   ruled list. Border, fill and text are untouched. */
.stack-row {
  border-radius: 16px;
  box-shadow: 0 8px 18px -16px rgba(38, 24, 16, 0.32);
}
.stack-row-icon { border-radius: 12px; }

/* ── The practitioner's advice ──
   Was a cream slab with a 3px clay bar down the left and one square
   corner (0 12px 12px 0). It is the only element on Today wearing
   that shape, which made it read as a quote block rather than as
   something written to the patient. Now a card like its neighbours,
   with the accent kept as a jade left rule so the attribution cue
   survives. Text colours untouched. */
.p-advice {
  background: var(--pj-surface);
  border-left: 3px solid var(--pj-accent);
  border-radius: 16px;
  box-shadow: 0 8px 18px -16px rgba(38, 24, 16, 0.32);
}

/* ══════════════════════════════════════════════════════════════
   The dock
   ══════════════════════════════════════════════════════════════
   ★ The active-item rule MUST out-specify portal-editorial.css ★
   That file is loaded AFTER the shell and sets
       body.theme-soft-editorial .p-nav-btn.active
         { background: rgba(162,70,50,.10); color: #A24632; }
   so the live active tab is a pale CINNABAR tint, not the dark ink
   the shell declares. A bare `.p-nav-btn.active` here would lose to
   it on specificity even though this file loads later. Matching the
   body-class selector is what makes the jade pill actually paint.
   ══════════════════════════════════════════════════════════════ */
.p-nav {
  border-radius: 22px;
  box-shadow: 0 18px 44px -18px rgba(38, 24, 16, 0.38);
}
body.theme-soft-editorial .p-nav-btn.active,
.p-nav-btn.active {
  background: linear-gradient(140deg, var(--pj-deep), var(--pj-deeper));
  color: #FBF7EE;
  box-shadow: 0 8px 16px -8px rgba(36, 59, 48, 0.55);
}
/* The badge sits on the active pill too; keep it legible against jade. */
body.theme-soft-editorial .p-nav-btn.active .p-nav-badge,
.p-nav-btn.active .p-nav-badge { box-shadow: 0 0 0 2px rgba(36, 59, 48, 0.9); }

/* ── Reduced motion ──
   The pass adds no animation of its own, but it re-declares
   livePulse above; honour the same preference the rest of the site
   does rather than reviving a pulse a patient asked not to see. */
@media (prefers-reduced-motion: reduce) {
  .p-hero-tag .live-dot { animation: none; }
}