/* HansMed Patient Portal — Healing Courtyard shell (Phase 3a).
   Self-contained top-bar shell adapted from the design's portal-styles.css.
   Strangler Fig: the legacy .nav + .sidebar are HIDDEN (not removed) so all
   existing JS still finds its elements; panels render full-width beneath the
   new bar. Loaded LAST in portal.html. */

:root {
  --court-cream-50:  #FBF7EE;
  --court-cream-100: #F5EEDF;
  --court-cream-200: #ECE2CC;
  --court-clay-200:  #C9B393;
  --court-clay-500:  #8B6B47;
  --court-ink-700:   #4A3326;
  --court-ink-900:   #261810;
  --court-font-ui:   "Manrope", "Inter", system-ui, sans-serif;
  --court-font-disp: "Fraunces", Georgia, serif;
}

/* warm courtyard paper backdrop */
body {
  background:
    radial-gradient(ellipse 90% 70% at 50% 22%, rgba(255,250,235,0.85) 0%, rgba(244,234,210,0) 70%),
    linear-gradient(180deg, #F4EAD2 0%, #EBDDBC 100%) fixed !important;
}

/* hide the legacy chrome; run main full-width */
.nav { display: none !important; }
.portal-layout { grid-template-columns: 1fr !important; }
.sidebar { display: none !important; }
.main { max-width: 1120px; margin: 0 auto; width: 100%; }

/* ── New top bar ── */
.p-bar {
  position: sticky; top: 0; z-index: 60;
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 28px;
  padding: 14px 28px;
  background: var(--court-ink-900);
  border-bottom: 1px solid rgba(0,0,0,0.4);
  font-family: var(--court-font-ui);
}
/* dark bar: keep the floating pills light, lift the bare elements to cream */
.p-bell { color: rgba(245,238,223,0.85); }
.p-bar .p-signout { color: var(--court-cream-50) !important; border-color: rgba(245,238,223,0.38) !important; }
.p-bar .p-signout:hover { background: rgba(245,238,223,0.12) !important; }
.p-logo-plate {
  display: inline-flex; align-items: center; gap: 12px;
  background: #F5EBD6; color: var(--court-ink-900);
  padding: 8px 16px 8px 10px; border-radius: 14px;
  text-decoration: none; justify-self: start;
}
.p-logo-plate svg { display: block; width: 30px; height: 30px; color: var(--court-ink-900); }
.p-logo-text { display: flex; flex-direction: column; line-height: 1; }
.p-logo-en { font-family: var(--court-font-ui); font-weight: 700; font-size: 18px; letter-spacing: .01em; }
.p-logo-zh { font-family: "Noto Serif SC","Source Han Serif SC",serif; font-weight: 500; font-size: 11.5px; margin-top: 4px; color: rgba(245,238,223,.8); letter-spacing: .04em; }

.p-nav {
  display: flex; align-items: stretch; gap: 2px; justify-self: center;
  background: var(--court-cream-100); border: 1px solid rgba(78,52,34,.08);
  border-radius: 999px; padding: 4px; max-width: 100%; overflow-x: auto;
}
.p-nav-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  color: var(--court-ink-700); text-decoration: none;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  transition: color .2s, background .25s;
}
.p-nav-btn:hover { color: var(--court-ink-900); background: rgba(78,52,34,.05); }
.p-nav-btn.active { background: var(--court-ink-900); color: var(--court-cream-50); }
.p-nav-icon { width: 16px; height: 16px; display: inline-flex; }
.p-nav-icon svg { width: 100%; height: 100%; }
.p-nav-btn .p-nav-label span[lang] { } /* lang spans toggled by existing i18n */

.p-bar-right { display: flex; align-items: center; gap: 12px; justify-self: end; }
.p-bell { position: relative; text-decoration: none; font-size: 18px; line-height: 1; color: var(--court-ink-700); }
.p-bell-badge {
  position: absolute; top: -6px; right: -8px;
  background: #c97157; color: var(--court-cream-50);
  font-size: 9px; font-weight: 700; border-radius: 999px; padding: 1px 5px;
}
.p-lang { display: flex; background: var(--court-cream-200); border-radius: 999px; padding: 3px; }
.p-lang button { border: none; background: transparent; padding: 5px 11px; border-radius: 999px; font-family: var(--court-font-ui); font-weight: 600; font-size: 12px; color: var(--court-ink-700); cursor: pointer; }
.p-lang button.active { background: var(--court-ink-900); color: var(--court-cream-50); }
.p-avatar-pill {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 14px 5px 5px; background: var(--court-cream-100);
  border: 1px solid rgba(78,52,34,.08); border-radius: 999px; text-decoration: none;
}
.p-avatar-pill:hover { background: var(--court-cream-200); }
.p-avatar-mini {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(160deg, var(--court-clay-200), var(--court-clay-500));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--court-font-disp); font-style: normal; font-weight: 600; font-size: 14px;
  color: var(--court-cream-50);
}
.p-avatar-name { font-size: 13px; font-weight: 500; color: var(--court-ink-900); }

/* hide the right cluster's text labels are bilingual; lang handled globally */

/* ── Responsive ── */
@media (max-width: 820px) {
  .p-bar { grid-template-columns: 1fr auto; gap: 12px; padding: 10px 14px; }
  .p-nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; order: 3; }
  .p-logo-zh { display: none; }
  .p-avatar-name { display: none; }
}

/* ── Tappable list row ("B+", picked 2026-08-02) ──────────────────────
   The whole card opens the record, so the target is the full row rather
   than a 61x32 button. A nested action (e.g. Order) keeps its own one-tap
   job and MUST call stopPropagation() in JS, or tapping it opens the
   record instead. Rolling out per surface: prescriptions first.

   Deliberately NOT using .btn--sm here — responsive.css re-pins that to
   min-height:32px inside a media query, which would undo the fix on the
   exact screens it is meant for. */
.tap-row { cursor: pointer; }
.tap-row:hover { border-color: var(--court-clay-500, #b8975a); }
.tap-row:focus-within { outline: 2px solid var(--court-clay-500, #b8975a); outline-offset: 2px; }

/* Visible size stays 36px so lists do not balloon; the tap area is padded
   out to 48px with a transparent overlay that stays inside its own row. */
.tap-row__hint,
.tap-row__action {
  position: relative;
  min-height: 36px;
  padding: 0 15px;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}
.tap-row__hint::before,
.tap-row__action::before {
  content: '';
  position: absolute;
  top: -6px; bottom: -6px; left: -3px; right: -3px;
}
.tap-row__hint { font-weight: 500; }
.tap-row__action { font-weight: 600; }

/* Hit-area expansion only, for buttons that already look right but measure
   under 44px — e.g. the billing row's pill (365x38) and its text-link
   button. Adds no height, so a 2.6-screen list does not get longer. */
.tap-row__hit { position: relative; }
.tap-row__hit::before {
  content: '';
  position: absolute;
  top: -5px; bottom: -5px; left: -3px; right: -3px;
}

/* The paid row's action is a 20px underlined text link, so the overlay above
   only reaches 30px. Give it a real 44px box instead: the row is ~102px tall
   and the grid centres it, so nothing moves and no page grows. */
.tap-row .download-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Action strip. Wraps instead of squeezing: an order row can carry three
   actions (View + Pay + Track), and .flex alone would shrink them below
   44px wide on a phone rather than move one to a second line. */
.tap-row__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2, 8px);
}

/* ── Live consultation controls ──────────────────────────────────────
   These sit under an active call and one of them ENDS it. They shipped as
   .btn--sm = 32px — and responsive.css re-pins that class to
   min-height:32px inside a media query, so on a phone, mid-consultation,
   the control that ends the call was a 32px target.

   Given REAL 44px boxes rather than the transparent hit overlay used in
   lists: these two sit side by side and one is destructive, so invisible
   hit areas expanding toward each other is exactly the wrong trade here.
   Real size plus a wider gap (8px -> 14px) keeps them distinct. */
.vc-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.vc-controls .btn { min-height: 44px; }

/* ── Patient-facing status badges ────────────────────────────────────
   .badge ships at 0.65rem = 10.4px. On the wellness assessment that put
   48 badges under the 12px floor being enforced everywhere else in the
   portal — and they are not decoration: "✓ Reviewed · 已审核" and
   "⚠ Needs follow-up · 需跟进" are clinical status a patient has to read.
   So they get the same 13px as every other patient-facing control.

   Scoped to a patient session (data-role is stamped on <html> before
   paint) rather than changed globally: .badge is shared with 20 admin,
   13 doctor and 1 pharmacy panel, which sit in far denser tables and
   have not been reviewed. Those stay exactly as they are.
   Tracking eases 0.08em -> 0.04em so the larger text does not also make
   every badge noticeably wider. */
html[data-role="patient"] .badge {
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.65rem;
}

/* ── Pre-consult vitals: non-blocking sanity hint ────────────────────
   Advisory only. It must never look like an error that stops the patient
   continuing — they can always submit and the practitioner confirms
   vitals verbally during the consult. */
.pa-vital { display: flex; flex-direction: column; gap: 4px; }
.pa-vital-hint {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--court-ink-700, #4A3326);
  min-height: 0;
}
.pa-vital-hint.is-warn { color: #9a5a1e; }

/* ── Video waiting room live indicator ───────────────────────────────
   The room now polls instead of asking the patient to refresh, so it has
   to LOOK alive — otherwise "you don't need to refresh" reads as a frozen
   page and they tap Refresh anyway. */
.vw-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--court-ink-700, #4A3326);
}
.vw-status::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #2f8f5b;
  animation: vw-pulse 2s ease-in-out infinite;
}
.vw-status.is-warn::before  { background: #c98a2e; }
.vw-status.is-stale::before { background: #b4441f; animation: none; }
@keyframes vw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) {
  .vw-status::before { animation: none; }
}

/* Affordance that the row itself is tappable. */
.tap-row__chev {
  margin-left: auto;
  align-self: center;
  font-size: 20px;
  line-height: 1;
  color: var(--court-ink-700, #6b7c82);
}