/* ============================================================
   Slashcure — stylesheet & design system (rb2)
   Blue brand · modern, animated, professional.

   ── Re-skinning the site ──────────────────────────────────
   Every branded colour in this file resolves to a --brand-*
   step below; nothing outside :root hardcodes a brand hex.
   To change the brand, edit the eleven --brand-* values (and
   the two rgb triples that feed rgba() shadows and glows) —
   that's the whole site, landing to admin.

     --brand-500  accents, small highlights
     --brand-600  primary: links, icons, active states
     --brand-700  buttons (deliberately a step darker)
     --brand-800  button hover
     --brand-900  deep panels: footer, dark rails, hero art

   Success / warn / danger are separate on purpose: they carry
   meaning (available vs closed), not branding, so they don't
   move when the brand does.
   ============================================================ */

:root {
  /* ── Brand ramp — the single source of the brand colour ── */
  --brand-50:  #f2f7ff;
  --brand-100: #e2ecfd;
  --brand-200: #c5d9fa;
  --brand-300: #9dbcf6;
  --brand-400: #5b8ef0;
  --brand-500: #2f6fed;
  --brand-600: #1f5fd8;
  --brand-700: #1a4db4;
  --brand-800: #173d86;
  --brand-900: #0f2f6e;
  --brand-950: #0a2350;
  /* rgb triples for rgba() — shadows, glows, scrims */
  --brand-rgb: 31, 95, 216;
  --brand-deep-rgb: 15, 47, 110;
  --brand-glow-rgb: 120, 165, 250;

  /* Brand roles (what the rest of the file actually references) */
  --color-primary: var(--brand-600);
  --color-primary-dark: var(--brand-700);
  --color-primary-darker: var(--brand-900);
  --color-primary-light: var(--brand-100);
  --color-accent: var(--brand-500);

  /* Buttons — a step darker than the primary blue */
  --color-btn: var(--brand-700);
  --color-btn-hover: var(--brand-800);

  /* Neutrals */
  --color-heading: #102233;
  --color-text: #41505f;
  --color-muted: #6f8092;
  --color-bg: #ffffff;          /* the page itself */
  --color-surface: #ffffff;     /* cards sitting on it */
  --color-fill: #f5f8ff;        /* inputs, hover states, chips — needs to read against white */
  --color-tint: #f5f8ff;        /* whisper of blue — landing section backdrop */
  --color-mint: var(--color-tint);       /* legacy name, kept so older rules still resolve */
  --color-mint-soft: var(--color-tint);  /* alternating rows */
  --color-subtle: #eef2f9;      /* disabled / readonly fills */
  --color-border: #e2e8f2;
  --color-grey-200: #cdd6e4;
  --color-grey-300: #b7c3d6;
  --color-grey-400: #97a5bb;

  /* Status — meaning, not branding: these stay put on a re-skin */
  --color-success-50: #e7f7ef;
  --color-success-100: #d6ffe9;
  --color-success-200: #b9e8d2;
  --color-success-400: #22b573;
  --color-success: #1a9a63;
  --color-success-800: #11724f;
  --success-rgb: 26, 154, 99;
  --color-ok: var(--color-success);
  --color-warn: #e07a3f;

  /* Type */
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Poppins', var(--font-body);

  /* Radius & shadow */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --shadow-sm: 0 1px 3px rgba(16, 40, 60, 0.06);
  --shadow: 0 10px 30px rgba(16, 40, 60, 0.09);
  --shadow-lg: 0 24px 60px rgba(var(--brand-deep-rgb), 0.18);
  --shadow-glow: 0 18px 50px rgba(var(--brand-rgb), 0.28);

  /* Gradients */
  --grad-primary: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  --grad-btn: linear-gradient(135deg, var(--color-btn), var(--brand-600));
  --grad-btn-hover: linear-gradient(135deg, var(--color-btn-hover), var(--color-btn));
  --grad-dark: linear-gradient(155deg, var(--color-primary-dark), var(--color-primary-darker));

  --container: 1160px;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* The `hidden` attribute is only a UA-level `display: none`, so any author
   rule that sets a display — `.btn { display: inline-flex }`, for one —
   quietly beats it and the element stays on screen. Scripts here hide things
   by setting `.hidden = true` and expect that to hold. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; color: var(--color-heading); line-height: 1.18; margin: 0 0 0.5em; letter-spacing: -0.01em; }
a { color: var(--color-primary-dark); text-decoration: none; }
a:hover { color: var(--color-primary); }
p { margin: 0 0 1rem; }
img { max-width: 100%; display: block; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 1.25rem; }

.text-gradient {
  background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Editorial section label — a tracked caption with a short accent rule,
   not a pill. Calmer and more "designed" than the badge look. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-weight: 600; font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-primary-dark); margin-bottom: 1.1rem;
}
.eyebrow::before { content: ''; width: 28px; height: 2px; border-radius: 2px; background: var(--color-primary); flex: none; }
.section__head--center .eyebrow { justify-content: center; }
.eyebrow__dot { display: none; }

/* ── Icons ────────────────────────────────────────────────── */
.icon { width: 1.25rem; height: 1.25rem; display: inline-block; flex: none; }
.icon--lg { width: 1.75rem; height: 1.75rem; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: 600; border-radius: var(--radius-sm);
  padding: 0.72rem 1.45rem; border: 1.5px solid transparent; cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn .icon { width: 1.1rem; height: 1.1rem; transition: transform 0.18s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn--sm { padding: 0.5rem 1rem; font-size: 0.9rem; }
.btn--lg { padding: 0.92rem 1.95rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* Buttons sit a step darker than the primary blue — see --color-btn. */
.btn--primary { background: var(--grad-btn); color: #fff; box-shadow: 0 1px 2px rgba(var(--brand-deep-rgb), 0.18), 0 8px 18px rgba(var(--brand-rgb), 0.22); }
.btn--primary:hover { background: var(--grad-btn-hover); box-shadow: 0 2px 4px rgba(var(--brand-deep-rgb), 0.2), 0 12px 24px rgba(var(--brand-rgb), 0.3); color: #fff; }
.btn--ghost { background: var(--color-surface); color: var(--color-primary-dark); border-color: var(--color-border); }
.btn--ghost:hover { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary-dark); }
.btn--light { background: #fff; color: var(--color-primary-dark); }
.btn--light:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }
.btn--blue { background: var(--color-btn); color: #fff; box-shadow: 0 1px 2px rgba(var(--brand-deep-rgb), 0.18), 0 8px 18px rgba(var(--brand-rgb), 0.22); }
.btn--blue:hover { background: var(--color-btn-hover); color: #fff; box-shadow: 0 2px 4px rgba(var(--brand-deep-rgb), 0.2), 0 12px 24px rgba(var(--brand-rgb), 0.3); }

/* ── Header / nav ─────────────────────────────────────────── */
.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky; top: 0; z-index: 50;
  transition: box-shadow 0.25s ease;
}
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(16, 40, 60, 0.07); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: 74px; gap: 1rem; }
/* Marketing header: brand left · nav centered · actions right. Signed-in
   visitors get the same layout, with the account button in the actions slot. */
.site-header .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
.site-header .brand { justify-self: start; }
.site-menu { display: contents; }
.site-actions { display: flex; align-items: center; gap: 0.6rem; justify-self: end; }

.brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.brand__mark { display: inline-grid; place-items: center; width: 42px; height: 42px; }
.brand__mark img { width: 100%; height: 100%; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--color-heading); }
.brand__tag { font-size: 0.7rem; color: var(--color-muted); }

.site-nav { display: flex; align-items: center; gap: 1.75rem; justify-self: center; }
.site-nav a:not(.btn) { color: var(--color-heading); font-weight: 500; font-size: 0.95rem; position: relative; }
.site-nav a:not(.btn)::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 2px; background: var(--color-primary); transition: width 0.2s var(--ease); }
.site-nav a:not(.btn):hover { color: var(--color-primary); }
.site-nav a:not(.btn):hover::after { width: 100%; }
.logout-form { margin: 0; }

/* Bell in the public header. Sized to match the adjacent .btn--sm so the row
   sits on one baseline. */
.site-bell { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border: 1.5px solid var(--color-border); border-radius: 9px; background: var(--color-surface); color: var(--color-muted); transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; }
.site-bell:hover { color: var(--color-primary-dark); border-color: var(--color-primary); background: var(--color-primary-light); }
.site-bell svg { width: 18px; height: 18px; }

/* Nav dropdown (Hospitals → cities). <details> so it works without JS; a small
   script in main.js closes it on outside click and adds hover-to-open. */
.navdd { position: relative; }
.navdd__btn { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 500; font-size: 0.95rem; color: var(--color-heading); cursor: pointer; list-style: none; }
.navdd__btn::-webkit-details-marker { display: none; }
.navdd__btn:hover, .navdd.is-active .navdd__btn { color: var(--color-primary); }
.navdd__caret { display: inline-flex; transition: transform 0.18s var(--ease); }
.navdd__caret svg { width: 15px; height: 15px; }
.navdd[open] .navdd__caret { transform: rotate(180deg); }
.navdd__menu { display: none; position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 14px); min-width: 220px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 0.4rem; z-index: 70; }
.navdd[open] .navdd__menu { display: block; }
.navdd__label { margin: 0.25rem 0.7rem 0.4rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-muted); }
.navdd__item { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.7rem; border-radius: 8px; font-size: 0.94rem; color: var(--color-heading); }
.navdd__item:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }
.navdd__item svg { width: 16px; height: 16px; flex: none; color: var(--color-muted); }
.navdd__item:hover svg { color: var(--color-primary); }
.navdd__all { display: block; margin-top: 0.3rem; padding: 0.55rem 0.7rem; border-top: 1px solid var(--color-border); font-size: 0.86rem; font-weight: 600; color: var(--color-primary-dark); }
.navdd__all:hover { color: var(--color-primary); }
/* The site-nav underline animation targets bare links — not this. */
.site-nav .navdd::after { display: none; }

/* Account button — shown on the public pages in place of Login/Sign Up once
   you're signed in. A rectangle: avatar, then name over email, then a caret
   that opens the profile menu. <details> so it works without JS. */
.acct { position: relative; }
.acct__btn { display: flex; align-items: center; gap: 0.6rem; padding: 0.35rem 0.6rem; background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: 10px; cursor: pointer; list-style: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.acct__btn::-webkit-details-marker { display: none; }
.acct__btn:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.acct__avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--grad-primary); color: #fff; font-weight: 700; font-family: var(--font-head); flex: none; }
.acct__meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; text-align: left; }
.acct__name { font-size: 0.86rem; font-weight: 700; color: var(--color-heading); max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__email { font-size: 0.74rem; color: var(--color-muted); max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct__caret { display: inline-flex; flex: none; color: var(--color-muted); transition: transform 0.18s var(--ease); }
.acct__caret svg { width: 16px; height: 16px; }
.acct[open] .acct__caret { transform: rotate(180deg); }

.acct__menu { display: none; position: absolute; right: 0; top: calc(100% + 8px); min-width: 250px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 0.35rem; z-index: 70; }
.acct[open] .acct__menu { display: block; }
.acct__menu form { margin: 0; }
.acct__item { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.6rem 0.7rem; font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; text-align: left; color: var(--color-heading); background: none; border: 0; border-radius: 8px; cursor: pointer; }
.acct__item:hover { background: var(--color-fill); color: var(--color-primary-dark); }
.acct__item svg { width: 17px; height: 17px; flex: none; color: var(--color-muted); }
.acct__item:hover svg { color: var(--color-primary); }
/* Logout sits apart from the two profile actions. */
.acct__item--quiet { margin-top: 0.3rem; padding-top: 0.7rem; border-top: 1px solid var(--color-border); border-radius: 0 0 8px 8px; color: var(--color-muted); }

.nav-toggle { display: none; background: none; border: none; cursor: pointer; color: var(--color-heading); padding: 0.4rem; }
.nav-toggle .icon { width: 1.6rem; height: 1.6rem; }

/* ── Scroll reveal ────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal--d1.in { transition-delay: 0.08s; }
.reveal--d2.in { transition-delay: 0.16s; }
.reveal--d3.in { transition-delay: 0.24s; }
.reveal--d4.in { transition-delay: 0.32s; }

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes blobMove {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -20px) scale(1.08); }
  100% { transform: translate(-20px, 20px) scale(0.96); }
}
@keyframes dashFlow { to { stroke-dashoffset: -60; } }

/* ── Hero ─────────────────────────────────────────────────── */
.site-main { min-height: 60vh; }
.hero { position: relative; padding: 4.75rem 0 4rem; overflow: hidden; background: linear-gradient(158deg, var(--brand-100) 0%, var(--brand-50) 42%, var(--color-bg) 75%); }
.hero::before { content: ''; position: absolute; z-index: 0; width: 580px; height: 580px; max-width: 70vw; border-radius: 50%; top: -190px; right: -130px; background: radial-gradient(circle, rgba(var(--brand-rgb), 0.38), transparent 70%); filter: blur(8px); }
.hero::after { content: ''; position: absolute; z-index: 0; width: 460px; height: 460px; max-width: 60vw; border-radius: 50%; bottom: -200px; left: -150px; background: radial-gradient(circle, rgba(var(--brand-rgb), 0.26), transparent 70%); filter: blur(8px); }
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__glow { position: absolute; width: 600px; height: 600px; max-width: 82vw; border-radius: 50%; top: 50%; right: -2%; transform: translateY(-50%); background: radial-gradient(circle, rgba(var(--brand-rgb), 0.30), transparent 60%); }
.hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 3rem; }
.hero__title { font-size: clamp(2.3rem, 4.8vw, 3.5rem); font-weight: 700; max-width: 15ch; }
.hero__subtitle { font-size: 1.13rem; max-width: 52ch; margin: 1.1rem 0 1.9rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.7rem; }
.hero__points { list-style: none; display: flex; flex-wrap: wrap; gap: 1.3rem; padding: 0; margin: 0; }
.hero__points li { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.92rem; font-weight: 500; }
.hero__points .icon { width: 1.05rem; height: 1.05rem; color: var(--color-primary); }

/* Hero media (family composition image) — transparent PNG cutout */
.hero__media { position: relative; display: flex; justify-content: center; }
.hero__img { width: 100%; max-width: 600px; height: auto; filter: drop-shadow(0 16px 32px rgba(var(--brand-deep-rgb), 0.15)); }

/* ── Hero — calm, editorial, soft mint backdrop ───────────── */
.hero2 { position: relative; overflow: hidden; padding: 6rem 0 5.5rem; background: var(--color-mint); border-bottom: 1px solid var(--color-border); }
.hero2__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero2__halo { position: absolute; width: 760px; height: 560px; max-width: 80vw; top: 40%; right: -12%; transform: translateY(-50%); background: radial-gradient(closest-side, rgba(var(--brand-rgb), 0.10), transparent 70%); }
@keyframes floaty-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes dashFlow2 { to { stroke-dashoffset: -80; } }

.hero2__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 3.5rem; align-items: center; }
.hero2__title { font-size: clamp(2.6rem, 5.2vw, 3.85rem); font-weight: 600; line-height: 1.05; letter-spacing: -0.025em; margin: 0.4rem 0 0; color: var(--color-heading); }
.hero2__title .accent { color: var(--color-primary-dark); }
.hero2__lead { font-size: 1.16rem; line-height: 1.6; max-width: 48ch; margin: 1.4rem 0 2rem; color: var(--color-text); }
.hero2__cta { display: flex; gap: 0.85rem; flex-wrap: wrap; }
.hero2__trust { list-style: none; display: flex; gap: 1.6rem; flex-wrap: wrap; padding: 0; margin: 2rem 0 0; }
.hero2__trust li { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; font-weight: 500; color: var(--color-muted); }
.hero2__trust .icon { width: 1rem; height: 1rem; color: var(--color-primary); }

.hero2__visual { position: relative; }
.hero2__visual picture { display: block; }
.hero2__img { width: 100%; max-width: 600px; height: auto; filter: drop-shadow(0 24px 44px rgba(var(--brand-deep-rgb), 0.14)); }
.mock { background: #fff; border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 34px 80px rgba(var(--brand-deep-rgb), 0.20); overflow: hidden; transition: transform 0.2s ease; }
.mock__bar { display: flex; align-items: center; gap: 0.45rem; padding: 0.7rem 1rem; background: var(--brand-50); border-bottom: 1px solid var(--color-border); }
.mock__bar > span { width: 11px; height: 11px; border-radius: 50%; background: var(--color-grey-200); }
.mock__bar > span:nth-child(1) { background: #ff6058; }
.mock__bar > span:nth-child(2) { background: #ffbd2e; }
.mock__bar > span:nth-child(3) { background: #29c941; }
.mock__bar em { margin-left: auto; font-style: normal; font-size: 0.74rem; color: var(--color-muted); }
.mock__app { display: grid; grid-template-columns: 128px 1fr; min-height: 320px; }
.mock__rail { background: var(--grad-dark); color: var(--brand-100); padding: 1rem 0.7rem; }
.mock__brand { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-head); font-weight: 800; font-size: 0.9rem; color: #fff; margin-bottom: 1.1rem; }
.mock__navitem { font-size: 0.76rem; padding: 0.45rem 0.55rem; border-radius: 8px; color: var(--brand-200); margin-bottom: 0.2rem; }
.mock__navitem.is-active { background: rgba(255, 255, 255, 0.16); color: #fff; font-weight: 600; }
.mock__main { padding: 1.25rem; }
.mock__hd { font-family: var(--font-head); font-weight: 700; color: var(--color-heading); margin-bottom: 1rem; }
.mock__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.mock__card { background: var(--color-fill); border: 1px solid var(--color-border); border-radius: 12px; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.35rem; }
.mock__card--wide { grid-column: 1 / -1; }
.mock__k { font-size: 0.72rem; color: var(--color-muted); }
.mock__v { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; color: var(--color-heading); }
.mock__v--ok { color: var(--color-primary-dark); }
.mock__chips { display: flex; gap: 0.4rem; }
.mock__chips i { font-style: normal; font-size: 0.72rem; background: var(--color-primary-light); color: var(--color-primary-dark); padding: 0.2rem 0.55rem; border-radius: 999px; }
.mock__pulse { color: var(--color-accent); }
.mock__pulse svg { width: 100%; height: 28px; stroke-dasharray: 80; animation: dashFlow2 2s linear infinite; }

.mock-chip { position: absolute; display: inline-flex; align-items: center; gap: 0.45rem; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: var(--shadow); border-radius: 12px; padding: 0.6rem 0.85rem; font-size: 0.8rem; font-weight: 600; color: var(--color-heading); animation: floaty 6s ease-in-out infinite; }
.mock-chip .icon { width: 1.1rem; height: 1.1rem; color: var(--color-primary); }
.mock-chip--qr { top: 14px; left: -28px; }
.mock-chip--secure { bottom: 20px; right: -22px; animation-delay: 1.4s; }

.trust-strip { border-bottom: 1px solid var(--color-border); background: var(--color-mint); }
.trust-strip__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2.75rem; padding: 1.15rem 1.25rem; }
.trust-strip span { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--color-muted); font-weight: 600; font-size: 0.84rem; letter-spacing: 0.01em; }
.trust-strip .icon { width: 1.05rem; height: 1.05rem; color: var(--color-primary); }

.hero2__eyebrow-top { display: none; }
@media (max-width: 960px) {
  .hero2 { padding: 2rem 0 3rem; }
  .hero2__inner { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
  /* Eyebrow on top, then the image, then the copy. */
  .hero2__eyebrow-top { display: inline-flex; order: 0; justify-content: center; margin: 0 auto; }
  .hero2__copy .eyebrow { display: none; }
  .hero2__visual { max-width: 460px; margin-inline: auto; order: 1; }
  .hero2__copy { order: 2; }
  .hero2__cta, .hero2__trust { justify-content: center; }
  .eyebrow { justify-content: center; }
}
@media (max-width: 540px) {
  .mock-chip--qr { left: 0; }
  .mock-chip--secure { right: 0; }
  .mock__app { grid-template-columns: 92px 1fr; }
}

/* ── Sections — alternating white / soft-mint backdrops ───── */
.section { padding: 6rem 0; scroll-margin-top: 84px; background: var(--color-surface); }
.section--alt { background: var(--color-mint); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
/* Section heads are centered throughout for a consistent rhythm. */
.section__head { text-align: center; max-width: 60ch; margin: 0 auto 3.25rem; }
.section__head .eyebrow { justify-content: center; }
.section__title { font-size: clamp(1.9rem, 3.2vw, 2.5rem); font-weight: 600; letter-spacing: -0.02em; }
.section__sub { color: var(--color-muted); font-size: 1.08rem; line-height: 1.6; margin: 0; }

/* Feature rows — full-bleed image (30%) flush to the edge / info (70%) */
.section--flush { padding-bottom: 0; }
.frows { display: grid; margin-top: 3.5rem; }
.frow { display: grid; grid-template-columns: 3fr 7fr; align-items: stretch; min-height: 420px; }
.frow--rev { grid-template-columns: 7fr 3fr; }
.frow--rev .frow__media { order: 2; }
.frow--rev .frow__body { order: 1; }
/* alternating row tint: white · greenish-white · white · greenish-white */
.frow:nth-child(even) { background: var(--color-mint-soft); }

/* image attaches flush on all sides — no padding, border, radius or gap */
.frow__media { overflow: hidden; }
.frow__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.frow__body { display: flex; align-items: center; padding: 3.5rem clamp(1.5rem, 6vw, 6rem); }
.frow__body-inner { max-width: 56ch; }
.frow__title { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 600; letter-spacing: -0.02em; margin-bottom: 0.6rem; }
.frow__text { color: var(--color-text); font-size: 1.02rem; line-height: 1.6; margin: 0 0 1.25rem; }
.frow__points { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.6rem; }
.frow__points li { display: flex; align-items: flex-start; gap: 0.6rem; color: var(--color-text); font-size: 0.96rem; }
.frow__points .icon { width: 1.15rem; height: 1.15rem; margin-top: 0.2rem; color: var(--color-primary); flex: none; }
.frow__cta { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--color-primary-dark); }
.frow__cta .icon { width: 1.05rem; height: 1.05rem; transition: transform 0.18s var(--ease); }
.frow__cta:hover .icon { transform: translateX(3px); }

@media (max-width: 820px) {
  .frow, .frow--rev { grid-template-columns: 1fr; min-height: 0; }
  .frow--rev .frow__media, .frow--rev .frow__body { order: 0; }
  .frow__media { height: 240px; }
  .frow__body { padding: 2.25rem 1.5rem 2.75rem; }
}

/* Steps — quiet cards, outlined numerals, hairline connector */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; position: relative; }
.steps__line { position: absolute; top: 54px; left: 13%; right: 13%; height: 1px; background: var(--color-border); z-index: 0; }
.step { position: relative; z-index: 1; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.75rem 1.5rem; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.step__num { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--color-surface); color: var(--color-primary-dark); font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; margin-bottom: 1rem; border: 1.5px solid var(--color-primary); }
.step__title { font-size: 1.05rem; margin-bottom: 0.4rem; letter-spacing: -0.01em; }
.step__text { color: var(--color-muted); font-size: 0.92rem; line-height: 1.55; margin: 0; }

/* Audience */
.audience { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; }
.audience-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.audience-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.audience-card__media { position: relative; height: 220px; overflow: hidden; }
.audience-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.audience-card:hover .audience-card__media img { transform: scale(1.05); }
.audience-card__tag { position: absolute; left: 1rem; bottom: 1rem; display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(255,255,255,0.92); color: var(--color-primary-dark); font-weight: 700; font-size: 0.85rem; padding: 0.4rem 0.8rem; border-radius: 999px; box-shadow: var(--shadow-sm); }
.audience-card__tag .icon { width: 1.05rem; height: 1.05rem; }
.audience-card__tag--dark { background: var(--grad-dark); color: #fff; }
.audience-card__body { padding: 1.75rem; }
.audience-card__list { list-style: none; padding: 0; margin: 0 0 1.6rem; display: flex; flex-direction: column; gap: 0.7rem; }
.audience-card__list li { display: flex; align-items: flex-start; gap: 0.6rem; }
.audience-card__list .icon { width: 1.15rem; height: 1.15rem; margin-top: 0.18rem; color: var(--color-primary); }

/* Trust band — soft mint, continuing the alternating rhythm */
.trust-band { background: var(--color-mint); border-top: 1px solid var(--color-border); padding: 3.75rem 0; }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.trust-item { display: flex; align-items: flex-start; gap: 0.9rem; }
.trust-item__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--color-primary-light); color: var(--color-primary-dark); flex: none; }
.trust-item__title { color: var(--color-heading); margin: 0 0 0.25rem; font-size: 1rem; }
.trust-item__text { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--color-muted); }

/* CTA band — the single dark focal moment of the page */
.cta-band { padding: 5rem 0 6rem; background: var(--color-surface); }
.cta-band__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; background: var(--grad-dark); border-radius: var(--radius-xl); padding: 3.5rem; overflow: hidden; box-shadow: var(--shadow-lg); }
.cta-band__glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--brand-glow-rgb), 0.28), transparent 68%); top: -160px; right: -80px; }
.cta-band__text { position: relative; z-index: 1; max-width: 52ch; }
.cta-band__title { color: #fff; margin-bottom: 0.5rem; font-size: clamp(1.6rem, 2.6vw, 2.1rem); letter-spacing: -0.02em; }
.cta-band__sub { margin: 0; color: var(--brand-200); max-width: 48ch; }
.cta-band .btn { position: relative; z-index: 1; }

/* ── Auth pages ───────────────────────────────────────────── */
.auth-wrap { padding: 3.5rem 0 4.5rem; }
.auth-narrow { max-width: 560px; }
.auth-head { text-align: center; margin-bottom: 1.75rem; }
.auth-head h1 { font-size: 1.85rem; margin-bottom: 0.3rem; }
.auth-head p { color: var(--color-muted); margin: 0; }
.auth-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 2.25rem; }
.auth-alt { text-align: center; margin: 1.25rem 0 0; color: var(--color-muted); }

/* Unsaved-changes confirm modal */
.umodal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1.25rem; background: rgba(16, 34, 51, 0.45); }
.umodal[hidden] { display: none; }
.umodal__box { background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 1.6rem 1.7rem; width: 100%; max-width: 440px; }
.umodal__title { margin: 0 0 0.5rem; font-size: 1.2rem; }
.umodal__text { margin: 0 0 1.25rem; color: var(--color-text); font-size: 0.95rem; line-height: 1.5; }
.umodal__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; }

/* ── Public username ("slashcure.com/drname") ───────────── */
/* Host prefix + field read as one control, so the whole URL is visible while
   typing. The field carries no chrome of its own — the wrapper is the input,
   and it borrows the same border/focus treatment as .form-group input. The
   [type] selector is deliberate: it has to out-specify `.form-group input`,
   which styles this same field when the control sits inside a form group. */
.uname-input { display: flex; align-items: stretch; margin-bottom: 0.6rem; background: var(--color-fill); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.uname-input:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.uname-input__host { display: flex; align-items: center; padding: 0.72rem 0.1rem 0.72rem 0.85rem; font-family: var(--font-body); font-size: 0.95rem; line-height: 1.2; color: var(--color-muted); white-space: nowrap; user-select: none; }
.uname-input input[type="text"] { flex: 1; min-width: 0; width: auto; padding: 0.72rem 0.85rem 0.72rem 0; font-family: var(--font-body); font-size: 0.95rem; line-height: 1.2; color: var(--color-heading); background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.uname-input input[type="text"]:focus { outline: none; border: 0; box-shadow: none; }
.uname-input input[type="text"]::placeholder { color: var(--color-muted); opacity: 0.75; }

/* The assigned link, shown once a handle exists. */
.uname-live { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.35rem; font-weight: 600; word-break: break-all; }
.uname-live .icon { color: var(--color-primary); flex-shrink: 0; }

/* Centered layout (no split-screen panel, no sidebar) */
.auth-centered { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 2.5rem 1.25rem 4rem; gap: 1.4rem; }
.auth-centered__brand { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; color: var(--color-heading); }
.auth-centered__body { width: 100%; max-width: 680px; }
.auth-centered__body .status-page { margin-top: 0; }

/* ── Auth split-screen (login / sign up) — no header ─────── */
.authpage { background: var(--color-bg); }
.auth-split { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
.auth-side { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: 2.75rem; color: #fff; background: linear-gradient(150deg, var(--brand-900) 0%, var(--brand-600) 55%, var(--brand-500) 100%); }
.auth-side::after { content: ''; position: absolute; inset: 0; background: radial-gradient(680px 360px at 78% 8%, rgba(255, 255, 255, 0.18), transparent 60%); pointer-events: none; }
.auth-side > * { position: relative; z-index: 1; }
.auth-side__brand { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; color: #fff; }
.auth-side__hero { max-width: 34ch; }
.auth-side__title { font-family: var(--font-head); font-weight: 600; font-size: clamp(1.85rem, 3.1vw, 2.45rem); line-height: 1.16; letter-spacing: -0.02em; margin: 0 0 1rem; color: #fff; }
.auth-side__text { font-size: 1.02rem; line-height: 1.55; color: rgba(255, 255, 255, 0.85); margin: 0; max-width: 34ch; }
.auth-side__foot { font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); margin: 0; }

.auth-main { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; }
.auth-box { width: 100%; max-width: 400px; }
.auth-box--wide { max-width: 540px; }
.auth-box .auth-head { text-align: left; margin-bottom: 1.5rem; }
.auth-box .auth-head h1 { font-size: 1.7rem; font-weight: 600; margin-bottom: 0.3rem; }
.auth-box .auth-alt { text-align: left; margin: 0.85rem 0 0; font-size: 0.9rem; }
.auth-box .form-row { grid-template-columns: 1fr; }

.auth-field { margin-bottom: 1.05rem; }
.auth-field label { display: block; margin-bottom: 0.4rem; font-size: 0.9rem; font-weight: 600; color: var(--color-heading); }
.auth-input { position: relative; display: flex; align-items: center; }
.auth-input__icon { position: absolute; left: 0.85rem; display: inline-flex; color: var(--color-muted); pointer-events: none; }
.auth-input__icon svg { width: 18px; height: 18px; }
.auth-input input { width: 100%; padding: 0.8rem 2.6rem; font-family: var(--font-body); font-size: 1rem; color: var(--color-heading); background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: 10px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.auth-input input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.pw-toggle { position: absolute; right: 0.55rem; display: inline-flex; padding: 0.35rem; background: none; border: none; cursor: pointer; color: var(--color-muted); border-radius: 6px; }
.pw-toggle:hover { color: var(--color-primary-dark); }
.pw-toggle.is-on { color: var(--color-primary); }
.pw-toggle svg { width: 18px; height: 18px; }

@media (max-width: 860px) {
  /* Don't force full height — the green panel becomes a short brand bar. */
  .auth-split { grid-template-columns: 1fr; min-height: 0; }
  .auth-side { padding: 1rem 1.5rem; justify-content: flex-start; gap: 0; }
  .auth-side__hero, .auth-side__foot { display: none; }
  .auth-main { padding-top: 2.5rem; }
}

.form-group { margin-bottom: 1.1rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group label { display: block; margin-bottom: 0.4rem; font-size: 0.92rem; font-weight: 500; color: var(--color-heading); }
.form-group input { width: 100%; padding: 0.72rem 0.85rem; font-family: var(--font-body); font-size: 1rem; color: var(--color-heading); background: var(--color-fill); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.form-group input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.form-hint { display: block; margin-top: 0.3rem; font-size: 0.8rem; color: var(--color-muted); }
.form-check { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.5rem 0 1.5rem; font-size: 0.9rem; color: var(--color-text); }
.form-check input { margin-top: 0.2rem; }
.form-error { background: #fdece1; color: #b54a18; border: 1px solid #f6cbb0; border-radius: var(--radius-sm); padding: 0.75rem 1rem; margin-bottom: 1.25rem; font-size: 0.92rem; }

/* "Are you a doctor? Click here" — the cross-link that sits above the sign-up
   form. Reads as an invitation rather than a second submit button, so it stays
   clearly subordinate to the form's own primary action. */
.auth-switch { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.5rem; padding: 0.75rem 0.9rem; background: var(--color-primary-light); border: 1.5px solid transparent; border-radius: 10px; color: var(--color-primary-dark); font-size: 0.92rem; transition: border-color 0.15s ease, background 0.15s ease; }
.auth-switch:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.auth-switch--back { background: var(--color-fill); color: var(--color-text); }
.auth-switch__icon { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 9px; background: var(--color-surface); color: var(--color-primary-dark); }
.auth-switch__icon svg { width: 17px; height: 17px; }
.auth-switch__text { flex: 1; }
.auth-switch__go { display: inline-flex; flex: none; color: var(--color-primary); transition: transform 0.18s var(--ease); }
.auth-switch__go svg { width: 16px; height: 16px; }
.auth-switch:hover .auth-switch__go { transform: translateX(3px); }

/* "Continue with Google" — Google's brand guidelines want a plain white
   button with the unmodified logo, so it deliberately doesn't use .btn. */
.gbtn { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; padding: 0.75rem 1rem; font-family: var(--font-body); font-size: 0.97rem; font-weight: 600; color: #3c4043; background: #fff; border: 1.5px solid var(--color-border); border-radius: 10px; transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.gbtn:hover { color: #3c4043; background: #f7f8fa; border-color: #c9d2dd; box-shadow: var(--shadow-sm); }
.gbtn:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.gbtn__logo { width: 18px; height: 18px; flex: none; }
.gbtn__note { margin: 0.55rem 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--color-muted); text-align: center; }

/* "or" rule between the Google button and the email form. */
.auth-or { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; color: var(--color-muted); font-size: 0.82rem; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }

/* ── Onboarding wizard ────────────────────────────────────── */
.wizard { padding: 2.5rem 0 4rem; }
.wizard__inner { display: grid; grid-template-columns: 290px 1fr; gap: 2rem; align-items: start; }

.stepper { position: sticky; top: 90px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow-sm); }
.stepper__label { font-size: 0.85rem; color: var(--color-muted); margin: 0 0 0.5rem; font-weight: 600; }
.progress { height: 8px; background: var(--color-primary-light); border-radius: 999px; overflow: hidden; }
.progress__bar { display: block; height: 100%; width: 0; background: var(--grad-primary); border-radius: 999px; transition: width 0.4s var(--ease); }
.stepper__list { list-style: none; margin: 1.25rem 0 0; padding: 0; max-height: 62vh; overflow-y: auto; }
.stepper__link { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.4rem; border-radius: 10px; color: var(--color-text); font-size: 0.9rem; }
a.stepper__link:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }
.stepper__num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-fill); border: 1.5px solid var(--color-border); color: var(--color-muted); font-size: 0.82rem; font-weight: 700; flex: none; }
.stepper__num .icon { width: 1rem; height: 1rem; }
.stepper__item.is-current > .stepper__link { color: var(--color-heading); font-weight: 600; }
.stepper__item.is-current .stepper__num { background: var(--grad-primary); border-color: transparent; color: #fff; }
.stepper__item.is-done .stepper__num { background: var(--color-primary-light); border-color: var(--color-primary-light); color: var(--color-primary-dark); }

.wizard__main { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm); }
.wizard__head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border); }
.wizard__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--color-primary-light); color: var(--color-primary-dark); flex: none; }
.wizard__icon .icon { width: 1.5rem; height: 1.5rem; }
.wizard__title { font-size: 1.5rem; margin: 0; }
.wizard__intro { color: var(--color-muted); margin: 0.25rem 0 0; font-size: 0.95rem; }

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; }
.field-grid > .form-group { grid-column: 1 / -1; margin-bottom: 0; }
.field-grid > .form-group--half { grid-column: auto; }
.field-label { display: block; margin-bottom: 0.5rem; font-size: 0.92rem; font-weight: 500; color: var(--color-heading); }
.form-group select, .form-group textarea { width: 100%; padding: 0.7rem 0.85rem; font-family: var(--font-body); font-size: 1rem; color: var(--color-heading); background: var(--color-fill); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); }
.form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
/* Non-editable fields (auto-calculated, locked) — clearly distinct so users
   don't mistake them for inputs they should fill. */
.form-group input[readonly],
.form-group textarea[readonly],
.form-group input[disabled],
.form-group select[disabled] {
  background: var(--color-subtle);
  color: var(--color-muted);
  border-style: dashed;
  border-color: var(--color-border);
  cursor: not-allowed;
}
.form-group input[readonly]:focus,
.form-group textarea[readonly]:focus { outline: none; border-color: var(--color-border); box-shadow: none; }

.choice-row { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.6rem; }
.choice { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.85rem; border: 1.5px solid var(--color-border); border-radius: 10px; cursor: pointer; font-size: 0.9rem; transition: border-color 0.15s ease, background 0.15s ease; }
.choice:hover { border-color: var(--color-primary); }
.choice input { accent-color: var(--color-primary); }
/* No font-weight change on select — bolder text is wider and reflows the row
   (a visible "jump" when checking). Colour + background signal selection. */
.choice:has(input:checked) { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary-dark); }

.repeater__row { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; padding: 1rem 2.5rem 1rem 1rem; margin-bottom: 0.75rem; background: var(--color-fill); border: 1px solid var(--color-border); border-radius: var(--radius); }
.repeater__row .form-group { margin-bottom: 0; }
.repeater__row label { font-size: 0.8rem; color: var(--color-muted); }
/* The day multi-select spans the whole clinic row so all 7 pills wrap nicely. */
.repeater__days { grid-column: 1 / -1; }
.repeater__days .choice-row { gap: 0.4rem; margin-top: 0.15rem; }
.choice.choice--sm { padding: 0.3rem 0.6rem; font-size: 0.8rem; border-radius: 8px; gap: 0.35rem; }
.repeater__remove { position: absolute; top: 0.5rem; right: 0.5rem; width: 26px; height: 26px; border-radius: 50%; border: none; background: #fff; color: var(--color-warn); font-size: 1.1rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm); }
.repeater__remove:hover { background: var(--color-warn); color: #fff; }
.repeater__tmpl { display: none; }

.wizard__actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); }

@media (max-width: 860px) {
  .wizard__inner { grid-template-columns: 1fr; }
  .stepper { position: static; }
  .stepper__list { display: none; }
}
@media (max-width: 560px) {
  .field-grid { grid-template-columns: 1fr; }
  .field-grid > .form-group--half { grid-column: 1 / -1; }
  .wizard__main { padding: 1.4rem; }
}

/* ── Onboarding (full-page shell, left rail, grouped grids) ─── */
.ob-body { background: var(--color-bg); }
.ob { display: flex; min-height: 100vh; align-items: stretch; }

.ob-rail { position: sticky; top: 0; align-self: flex-start; height: 100vh; width: 280px; flex: none; background: var(--color-surface); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; padding: 1.4rem 1.1rem; overflow-y: auto; }
.ob-rail__brand { display: flex; align-items: center; gap: 0.55rem; font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; color: var(--color-heading); padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
.ob-rail__progress { padding: 1.1rem 0.1rem 0.4rem; }
.ob-rail__label { font-size: 0.82rem; color: var(--color-muted); font-weight: 600; margin: 0 0 0.5rem; }
.ob-steps { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.ob-steps__link { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.5rem; border-radius: 10px; color: var(--color-text); font-size: 0.92rem; }
a.ob-steps__link:hover { background: var(--color-fill); color: var(--color-primary-dark); }
.ob-steps__num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-fill); border: 1.5px solid var(--color-border); color: var(--color-muted); font-size: 0.82rem; font-weight: 700; flex: none; }
.ob-steps__num .icon { width: 1rem; height: 1rem; }
.ob-steps__item.is-current > .ob-steps__link { color: var(--color-heading); font-weight: 600; }
.ob-steps__item.is-current .ob-steps__num { background: var(--grad-primary); border-color: transparent; color: #fff; }
.ob-steps__item.is-done .ob-steps__num { background: var(--color-primary-light); border-color: var(--color-primary-light); color: var(--color-primary-dark); }

.ob-main { flex: 1; min-width: 0; padding: 2.5rem 2.75rem 4rem; }
.ob-main__inner { max-width: 1080px; margin: 0 auto; }
.ob-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.75rem; }
.ob-head__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--color-primary-light); color: var(--color-primary-dark); flex: none; }
.ob-head__icon .icon { width: 1.5rem; height: 1.5rem; }
.ob-head__title { font-size: 1.7rem; margin: 0; }
.ob-head__intro { color: var(--color-muted); margin: 0.3rem 0 0; font-size: 0.97rem; }

.ob-cat { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.6rem 1.75rem; box-shadow: var(--shadow-sm); margin-bottom: 1.25rem; }
.ob-cat__head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.25rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--color-border); }
.ob-cat__icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--color-primary-light); color: var(--color-primary-dark); flex: none; }
.ob-cat__icon .icon { width: 1.15rem; height: 1.15rem; }
.ob-cat__title { margin: 0; font-size: 1.15rem; }
.ob-cat__hint { color: var(--color-muted); font-size: 0.9rem; max-width: 65ch; margin: -0.4rem 0 1.1rem; }
.ob-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.5rem; }

/* Inline disease detail forms (revealed when a condition is ticked) */
.ob-disease-forms { display: grid; gap: 1rem; margin-top: 1.25rem; }
.ob-disease { border: 1px solid var(--color-border); border-radius: 10px; padding: 1.1rem 1.25rem; background: var(--color-fill); }
.ob-disease[hidden] { display: none; }
.ob-disease__title { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; font-size: 1.02rem; }
.ob-disease__title .icon { width: 1.15rem; height: 1.15rem; color: var(--color-primary-dark); }
.ob-disease__sec { margin: 1.1rem 0 0.6rem; font-size: 0.76rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); }
.ob-disease__sec:first-of-type { margin-top: 0; }
/* `margin-top: auto` pins the save note + logout to the bottom of the rail,
   however few steps the wizard has. */
.ob-rail__save { display: flex; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 1rem; font-size: 0.78rem; color: var(--color-muted); }
.ob-rail__save .icon { width: 0.95rem; height: 0.95rem; color: var(--color-primary); flex: none; }
.ob-rail__out { margin: 0.85rem 0 0; padding-top: 0.85rem; border-top: 1px solid var(--color-border); }

@media (max-width: 860px) {
  .ob { flex-direction: column; }
  .ob-rail { position: static; height: auto; width: 100%; border-right: none; border-bottom: 1px solid var(--color-border); padding: 1rem 1.1rem; }
  .ob-rail__brand { padding-bottom: 0.7rem; }
  .ob-steps { display: none; }
  .ob-main { padding: 1.5rem 1.25rem 3rem; }
  .ob-head__title { font-size: 1.4rem; }
}
@media (max-width: 560px) {
  .ob-cat { padding: 1.25rem; }
}

/* ── Dashboards (placeholder) ─────────────────────────────── */
.dash { padding: 3.5rem 0 4.5rem; }
.dash__welcome h1 { font-size: 1.9rem; margin-bottom: 0.3rem; }
.dash__welcome p { color: var(--color-muted); }
.dash__placeholder { margin-top: 1.5rem; background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius); padding: 1.75rem; }
.badge { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.25rem 0.6rem; border-radius: 999px; margin-bottom: 0.75rem; }
.badge--soon { background: var(--color-primary-light); color: var(--color-primary-dark); }

/* ── Banners ──────────────────────────────────────────────── */
.banner { padding: 0.85rem 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1.5rem; font-size: 0.95rem; }
.banner--success { background: var(--color-primary-light); color: var(--color-primary-darker); border: 1px solid var(--brand-200); }
.banner--warn { background: #fff5ec; color: #b54a18; border: 1px solid #f6cbb0; }

/* ── Emergency (public QR view) ───────────────────────────── */
.emergency { padding: 2.5rem 0 4rem; }
.emergency__inner { max-width: 760px; }
.emergency__banner { display: flex; align-items: center; gap: 0.6rem; background: #e0322f; color: #fff; padding: 0.85rem 1.1rem; border-radius: var(--radius-sm); font-weight: 600; margin-bottom: 1.25rem; }
.emergency__banner .icon { width: 1.25rem; height: 1.25rem; }
.emergency__card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 2rem; }
.emergency__head { display: flex; align-items: center; gap: 1rem; padding-bottom: 1.25rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--color-border); }
.emergency__avatar { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary-dark); flex: none; }
.emergency__id { flex: 1; }
.emergency__id h1 { margin: 0; font-size: 1.5rem; }
.emergency__blood { text-align: center; background: #fdeee4; color: var(--color-warn); border-radius: 12px; padding: 0.5rem 0.9rem; font-size: 0.75rem; }
.emergency__blood strong { display: block; font-size: 1.4rem; color: #d23; }
.emergency__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.emergency__grid h3 { font-size: 0.95rem; margin: 0 0 0.5rem; }
.emergency__note { margin: 1.5rem 0 0; padding-top: 1.25rem; border-top: 1px dashed var(--color-border); font-size: 0.88rem; color: var(--color-muted); }
.emergency__critical { margin: 1.25rem 0; padding: 0.9rem 1.1rem; border-radius: var(--radius-sm); background: #fff4ec; border: 1px solid #f6cbb0; }
.emergency__critical h3 { margin: 0 0 0.3rem; font-size: 0.95rem; color: #b5491c; }
.emergency__critical p { margin: 0; color: var(--color-heading); white-space: pre-wrap; }

/* Patient emergency-QR page */
.emerg-page__head { margin-bottom: 1.25rem; }
.emerg-page__head h1 { margin: 0 0 0.3rem; }
.emerg-page__head .muted { max-width: 70ch; }
.emerg-grid { display: grid; grid-template-columns: 320px 1fr; gap: 1.25rem; align-items: start; }
.emerg-qr { text-align: center; }
.emerg-qr img { display: block; margin: 0 auto 0.85rem; border-radius: var(--radius-sm); }
.emerg-qr__id { margin: 0 0 0.85rem; }
.emerg-qr__url { font-size: 0.78rem; word-break: break-all; margin: 0.85rem 0 0; }
.emerg-side { display: flex; flex-direction: column; gap: 1.25rem; }
.emerg-side textarea { width: 100%; padding: 0.7rem 0.85rem; font-family: var(--font-body); font-size: 1rem; color: var(--color-heading); background: var(--color-fill); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom: 0.85rem; }
.emerg-side textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.emerg-preview { list-style: none; margin: 0 0 0.85rem; padding: 0; }
.emerg-preview li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--color-border); }
.emerg-preview li:last-child { border-bottom: none; }
.emerg-preview span { color: var(--color-muted); font-size: 0.88rem; }
.emerg-preview strong { color: var(--color-heading); text-align: right; }
@media (max-width: 760px) { .emerg-grid { grid-template-columns: 1fr; } }
.plain { list-style: none; margin: 0; padding: 0; }
.plain li { padding: 0.2rem 0; }

/* ── OTP banner (patient) ─────────────────────────────────── */
.otp-banner { background: var(--color-primary-light); border: 1px solid var(--brand-200); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; text-align: center; }
.otp-banner p { margin: 0 0 0.5rem; color: var(--color-primary-darker); }
.otp-code { font-family: var(--font-head); font-weight: 700; font-size: 2.4rem; letter-spacing: 0.3em; color: var(--color-primary-dark); }

/* ── Sharing & access ─────────────────────────────────────── */
.share-grid { display: grid; grid-template-columns: 320px 1fr; gap: 1.25rem; align-items: start; }
.share-qr { text-align: center; }
.share-qr img { margin: 0 auto; border-radius: var(--radius-sm); }
.share-healthid { margin: 0.75rem 0 0.25rem; font-size: 1rem; }
.share-healthid strong { letter-spacing: 0.04em; color: var(--color-heading); }

.req-list { display: flex; flex-direction: column; gap: 0.85rem; }
.req-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--color-fill); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem 1.25rem; }
.req-card + .req-card { margin-top: 0.75rem; }
.req-card__main p { margin: 0 0 0.2rem; }
.req-card__id { font-weight: 700; letter-spacing: 0.03em; }
.req-card__action { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.req-card__action form { margin: 0; }
.otp-form { display: flex; gap: 0.5rem; }
.otp-form input { width: 130px; padding: 0.5rem 0.7rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); font-size: 1rem; letter-spacing: 0.15em; text-align: center; }
.otp-form input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }

.req-status { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: capitalize; padding: 0.2rem 0.6rem; border-radius: 999px; background: #eef2f6; color: var(--color-text); }
.req-status--active { background: var(--color-primary-light); color: var(--color-primary-dark); }
.req-status--awaiting_otp { background: #fff3e0; color: #b06a1b; }
.req-status--pending { background: #eef2f6; color: var(--color-muted); }
.req-status--denied, .req-status--revoked, .req-status--expired { background: #fdeee4; color: var(--color-warn); }
.req-status--emergency { background: #ffe9e7; color: #d23; }
/* Status cell in the Approvals table — a doctor can carry several chips
   (approved + username requested + MLC requested), so they need breathing
   room whether they sit side by side or wrap onto their own lines. */
.admin-status { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.3rem 0.35rem; }

.record-subtitle { font-size: 0.95rem; color: var(--color-primary-dark); margin: 1.25rem 0 0.6rem; }

@media (max-width: 760px) {
  .emergency__grid { grid-template-columns: 1fr; }
  .share-grid { grid-template-columns: 1fr; }
}

/* ── Email-verify banner ──────────────────────────────────── */
.verify-banner { background: #fff5ec; color: #b54a18; border-bottom: 1px solid #f6cbb0; font-size: 0.9rem; }
.verify-banner .container { padding-block: 0.6rem; }

/* ── Diabetes control widget ──────────────────────────────── */
.control-widget { display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem; background: var(--grad-dark); color: var(--brand-50); border-radius: var(--radius-lg); padding: 1.25rem 1.6rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-sm); }
.control-widget__item { display: flex; flex-direction: column; gap: 0.15rem; }
.control-widget__label { font-size: 0.72rem; color: var(--brand-200); text-transform: uppercase; letter-spacing: 0.05em; }
.control-widget__value { font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; }
.control-widget__value--good { color: var(--brand-200); }
.control-widget__value--bad { color: #ffb4a8; }
.control-widget__value--mid { color: #ffe0a3; }
.control-widget__link { margin-left: auto; color: var(--brand-50); font-weight: 600; font-size: 0.9rem; }
.control-widget__link:hover { color: #fff; }

/* ── Doctor directory ─────────────────────────────────────── */
.doctor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; margin-top: 1rem; }
.doctor-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.6rem; box-shadow: var(--shadow-sm); text-align: center; transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease); }
.doctor-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.doctor-card__avatar { display: inline-grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary-dark); margin-bottom: 0.85rem; }
.doctor-card__name { font-size: 1.1rem; margin-bottom: 0.25rem; }
.doctor-card__verified { display: inline-block; font-size: 0.7rem; color: var(--color-primary-dark); background: var(--color-primary-light); padding: 0.15rem 0.5rem; border-radius: 999px; margin-bottom: 0.4rem; }
.doctor-card__spec { color: var(--color-primary-dark); font-weight: 600; margin: 0 0 0.2rem; }
.doctor-card__meta { font-size: 0.88rem; margin: 0; }

/* ── Patient dashboard ────────────────────────────────────── */
.patient-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; box-shadow: var(--shadow-sm); margin-bottom: 1.5rem; }
.patient-bar__id { display: flex; align-items: center; gap: 1rem; }
.patient-bar__avatar { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary-dark); }
.patient-bar__name { margin: 0; font-size: 1.4rem; }
.patient-bar__meta { margin: 0.15rem 0 0; color: var(--color-muted); font-size: 0.92rem; }

.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.dash-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-sm); }
.dash-card__title { font-size: 1.05rem; margin: 0 0 1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--color-border); }
.kv { list-style: none; margin: 0; padding: 0; }
.kv li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; font-size: 0.92rem; }
.kv li span { color: var(--color-muted); }
.kv li strong { color: var(--color-heading); }
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip { font-size: 0.82rem; font-weight: 500; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--color-primary-light); color: var(--color-primary-dark); }
.chip--warn { background: #fdeee4; color: var(--color-warn); }
.med-list { list-style: none; margin: 0; padding: 0; }
.med-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px dashed var(--color-border); font-size: 0.92rem; }
.med-list li:last-child { border-bottom: none; }
.med-list li span { color: var(--color-muted); }
.muted { color: var(--color-muted); font-size: 0.92rem; }
.dash-card__contact { font-size: 0.95rem; margin: 0; }

/* ── Profile (view & edit) ────────────────────────────────── */
.profile { padding: 2.5rem 0 4rem; }
.profile__inner { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; }
.profile-nav { position: sticky; top: 90px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow-sm); max-height: 82vh; overflow-y: auto; }
.profile-nav__title { font-size: 1.1rem; margin: 0 0 0.5rem; }
.profile-nav__group { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); font-weight: 700; margin: 1rem 0 0.4rem; }
.profile-nav__list { list-style: none; margin: 0; padding: 0; }
.profile-nav__link { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 9px; color: var(--color-text); font-size: 0.9rem; }
.profile-nav__link .icon { width: 1.1rem; height: 1.1rem; color: var(--color-muted); }
.profile-nav__link:hover { background: var(--color-fill); color: var(--color-primary-dark); }
.profile-nav__link.is-active { background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 600; }
.profile-nav__link.is-active .icon { color: var(--color-primary-dark); }

.profile-main { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm); }
.profile-main__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border); }
.profile-main__heading { display: flex; align-items: center; gap: 0.8rem; }
.profile-main__heading h1 { font-size: 1.4rem; margin: 0; }
.profile-main__icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--color-primary-light); color: var(--color-primary-dark); }
.profile-main__icon .icon { width: 1.4rem; height: 1.4rem; }

.pv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; }
.pv--full { grid-column: 1 / -1; }
.pv--half { grid-column: auto; }
.pv__label { font-size: 0.8rem; color: var(--color-muted); margin: 0 0 0.25rem; font-weight: 600; }
.pv__value { margin: 0; color: var(--color-heading); font-weight: 500; white-space: pre-wrap; }
.pv__empty { color: var(--color-muted); font-weight: 400; font-style: italic; }
.pv__tags { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pv-tag { font-size: 0.82rem; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--color-primary-light); color: var(--color-primary-dark); }
.pv-table { overflow-x: auto; }
.pv-table table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.pv-table th { text-align: left; font-size: 0.78rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.04em; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--color-border); }
.pv-table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--color-border); color: var(--color-heading); }

@media (max-width: 960px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .profile__inner { grid-template-columns: 1fr; } .profile-nav { position: static; max-height: none; } }
@media (max-width: 620px) { .dash-grid { grid-template-columns: 1fr; } .pv-grid { grid-template-columns: 1fr; } .pv--half { grid-column: 1 / -1; } }

.patient-bar__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ── Disease modules ──────────────────────────────────────── */
.disease-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.disease-card { position: relative; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow-sm); transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease); }
.disease-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.disease-card__icon { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; background: var(--color-primary-light); color: var(--color-primary-dark); margin-bottom: 1rem; }
.disease-card__name { font-size: 1.2rem; margin-bottom: 0.35rem; }
.disease-card__intro { color: var(--color-muted); font-size: 0.92rem; margin-bottom: 1.25rem; }
.disease-card__actions { display: flex; gap: 0.6rem; }
.disease-card__badge { position: absolute; top: 1rem; right: 1rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--color-primary-light); color: var(--color-primary-dark); }

/* Disease record (view & edit) */
.record { padding: 2.5rem 0 4rem; }
.record__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.record__head-actions { display: flex; gap: 0.6rem; }
.record-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow-sm); margin-bottom: 1.25rem; }
.record-section__title { font-size: 1.15rem; margin: 0 0 1.25rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--color-border); }
.record-notes { margin: 0; white-space: pre-wrap; color: var(--color-text); }
.record-section[data-rec-section] { scroll-margin-top: 66px; }

/* Doctor full-record jump-nav (sticky chips) */
.rec-nav { position: sticky; top: 0; z-index: 20; display: flex; gap: 0.4rem; overflow-x: auto; padding: 0.65rem 0; margin: 0 0 1.25rem; background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.rec-nav__link { flex: none; padding: 0.45rem 0.9rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; color: var(--color-muted); background: var(--color-surface); border: 1px solid var(--color-border); transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; }
.rec-nav__link:hover { color: var(--color-primary-dark); border-color: var(--color-primary); }
.rec-nav__link.is-active { background: var(--color-primary-light); color: var(--color-primary-dark); border-color: transparent; }

.attach-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.attach-list li { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; background: var(--color-fill); border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom: 0.5rem; }
.attach-list li .icon { width: 1.2rem; height: 1.2rem; color: var(--color-primary-dark); flex: none; }
.attach-list__name { flex: 1; font-size: 0.92rem; }
.attach-del { margin: 0; }
.attach-del__btn { width: 24px; height: 24px; border-radius: 50%; border: none; background: #fff; color: var(--color-warn); font-size: 1rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm); }
.attach-del__btn:hover { background: var(--color-warn); color: #fff; }
.attach-upload { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.attach-upload input[type="file"] { font-size: 0.9rem; }

/* Attachment gallery (base64 thumbnails) */
.attach-gallery { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1rem; }
.attach-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; width: 128px; color: var(--color-text); }
.attach-card__img { width: 128px; height: 96px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--color-border); display: block; }
.attach-card__file { display: grid; place-items: center; width: 128px; height: 96px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background: var(--color-fill); color: var(--color-primary-dark); }
.attach-card__file .icon { width: 2rem; height: 2rem; }
.attach-card__name { font-size: 0.74rem; color: var(--color-muted); max-width: 128px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-card--edit .attach-del { position: absolute; top: -8px; right: -8px; }

/* ── Doctor module ────────────────────────────────────────── */
.doc-search { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin: 1.5rem 0; }
.doc-search input[type="search"] { flex: 1; min-width: 240px; padding: 0.65rem 0.9rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size: 1rem; font-family: var(--font-body); }
.doc-search input[type="search"]:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.doc-search__clear { font-size: 0.9rem; font-weight: 600; color: var(--color-primary-dark); }
.doc-search__clear:hover { text-decoration: underline; }

.rec-table { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow-x: auto; margin-top: 0.5rem; }
.rec-table table { width: 100%; border-collapse: collapse; }
.rec-table th { text-align: left; font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); padding: 0.85rem 1rem; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.rec-table td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--color-border); font-size: 0.92rem; }
.rec-table tr:last-child td { border-bottom: none; }
.rec-table td a { font-weight: 600; }
.rec-table__actions { text-align: right; }

/* ── Health Insights ──────────────────────────────────────── */
.insights-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.25rem; margin-bottom: 1.25rem; }
.record-section.risk-card, .record-section.summary-card { margin-bottom: 0; }
.risk-light { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
.risk-dot { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.risk-dot--low { background: var(--color-success-400); box-shadow: 0 0 0 4px rgba(var(--success-rgb),0.18); }
.risk-dot--moderate { background: #e0a020; box-shadow: 0 0 0 4px rgba(224,160,32,0.18); }
.risk-dot--high { background: #e0322f; box-shadow: 0 0 0 4px rgba(224,50,47,0.18); }
.risk-level { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; text-transform: capitalize; color: var(--color-heading); }
.risk-factors { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.rf { font-size: 0.82rem; padding: 0.3rem 0.7rem; border-radius: 999px; }
.rf--ok { background: var(--color-primary-light); color: var(--color-primary-dark); }
.rf--warn { background: #fff3e0; color: #b06a1b; }
.rf--risk { background: #fdeee4; color: var(--color-warn); }
.risk-note { font-size: 0.8rem; margin: 0; }
.summary-text { font-size: 1.05rem; line-height: 1.7; color: var(--color-heading); margin-bottom: 0.75rem; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 1.5rem; position: relative; }
.timeline::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--color-border); }
.timeline__item { position: relative; padding: 0 0 1.4rem 1.25rem; }
.timeline__item::before { content: ''; position: absolute; left: -1.5rem; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--grad-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__date { font-family: var(--font-head); font-weight: 700; font-size: 0.85rem; color: var(--color-primary-dark); }
.timeline__title { margin: 0.1rem 0 0; font-weight: 600; color: var(--color-heading); }
.timeline__detail { margin: 0.1rem 0 0; font-size: 0.88rem; }
@media (max-width: 860px) { .insights-grid { grid-template-columns: 1fr; } }

/* Trend charts (server-rendered SVG) */
.charts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.chart-card { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem 1.1rem; background: var(--color-fill); }
.chart-card__title { margin: 0 0 0.5rem; font-weight: 600; font-size: 0.95rem; color: var(--color-heading); }
.chart { width: 100%; height: auto; display: block; }
.chart__axis { stroke: var(--color-border); stroke-width: 1; }
.chart__area { fill: var(--color-primary-light); opacity: 0.55; }
.chart__line { fill: none; stroke: var(--color-primary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart circle { fill: var(--color-primary-dark); }
.chart__tick, .chart__xlabel { fill: var(--color-muted); font-size: 10px; font-family: var(--font-body); }
.chart__xlabel--end { text-anchor: end; }

/* ── Disease overview (premium, white) ────────────────────── */
.dov { background: #fff; margin: -1.75rem -2rem; padding: 1.75rem 2rem 3.5rem; min-height: calc(100vh - 64px); }

.dov-id { display: flex; flex-direction: column; align-items: stretch; gap: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--color-border); }
.dov-id__who { display: flex; align-items: center; gap: 0.9rem; }
.dov-id__avatar { position: relative; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-primary); color: #fff; font-weight: 600; font-family: var(--font-head); font-size: 1.4rem; flex: none; }
.dov-id__avatar--photo { background: var(--color-border); }
.dov-id__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
/* Small camera-style overlay button to add/change the photo. */
.dp-inline { position: absolute; right: -4px; bottom: -4px; margin: 0; }
.dp-inline__btn { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-btn); color: #fff; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.25); border: 2px solid var(--color-surface); }
.dp-inline__btn svg { width: 12px; height: 12px; }
.dp-inline__del { margin: 0.3rem 0 0; }
.dp-inline__remove { background: none; border: none; padding: 0; font: inherit; font-size: 0.78rem; color: var(--color-muted); cursor: pointer; text-decoration: underline; }
.dp-inline__remove:hover { color: var(--color-heading); }
.dov-id__name { margin: 0; font-size: 1.4rem; }
.dov-id__hid { margin: 0.25rem 0 0; padding: 0; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: var(--color-primary-dark); background: none; }
.dov-id__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.1rem 1.75rem; margin: 0; width: 100%; align-content: start; }
.dov-id__facts > div { min-width: 0; }
.dov-id__facts dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); margin: 0 0 0.25rem; white-space: nowrap; }
.dov-id__facts dd { margin: 0; font-weight: 600; color: var(--color-heading); font-size: 0.92rem; overflow-wrap: anywhere; }
.dov-id__actions { display: none; }
@media (max-width: 760px) {
  .dov-id__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
  .dov-id__actions .btn { flex: 1; justify-content: center; }
  .dov-head__actions { display: none; }
  .dov-id__facts { grid-template-columns: 1fr 1fr; gap: 0.9rem 1rem; }
}

.dov-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 1.25rem 0 1rem; scroll-margin-top: 1rem; }
.dov-head__title { display: flex; align-items: center; gap: 0.6rem; }
.dov-head__icon { display: inline-grid; place-items: center; color: var(--color-primary-dark); flex: none; }
.dov-head__icon .icon { width: 1.5rem; height: 1.5rem; }
.dov-head__title h2 { margin: 0; font-size: 1.5rem; }
.dov-head__actions { display: flex; gap: 0.5rem; }
.dov-head__actions .icon { width: 1rem; height: 1rem; }

.dov-grid { display: grid; grid-template-columns: 1fr 340px; gap: 1.25rem; align-items: start; }
.dov-main { display: grid; gap: 1.25rem; min-width: 0; }
.dov-side { display: grid; gap: 1.25rem; position: sticky; top: 1.25rem; }

.dov-card { background: #fff; border: 1px solid var(--color-border); border-radius: 10px; padding: 1.5rem; box-shadow: var(--shadow-sm); scroll-margin-top: 1rem; }
.dov-card__title { margin: 0 0 1rem; font-size: 1.1rem; }

/* Dashboard: colored section headers + dense responsive card grid */
.pf-section { margin-top: 2.25rem; scroll-margin-top: 1rem; }
.dov-main > .pf-section:first-child { margin-top: 0; }
.dov-tracker-card { margin-bottom: 1.1rem; }
.pf-head { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 1rem; scroll-margin-top: 1rem; }
.pf-head__icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; flex: none; }
.pf-head__icon .icon { width: 1.1rem; height: 1.1rem; }
.pf-head h2 { margin: 0; font-size: 1.15rem; }
.ic--teal { background: var(--color-primary-light); color: var(--color-primary-dark); }
.ic--blue { background: var(--brand-100); color: var(--color-primary); }
.ic--red { background: #fde3e1; color: #c0392b; }
.ic--amber { background: #fdedcf; color: #b5701a; }
.ic--purple { background: #ece4fb; color: #6b3fc0; }
.ic--green { background: var(--color-success-50); color: var(--color-success-800); }

.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 1rem; align-items: stretch; }
.pf-card { background: #fff; border: 1px solid var(--color-border); border-radius: 10px; padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm); min-width: 0; overflow: hidden; }
.pf-card--wide { grid-column: span 2; }
.pf-card__head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.85rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--color-border); }
.pf-card__title { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--color-heading); flex: 1; min-width: 0; }
.pf-card__edit { font-size: 0.8rem; font-weight: 600; color: var(--color-primary-dark); flex: none; }
.pf-card__body { display: grid; gap: 0.55rem; }
.pf-card__empty { color: var(--color-muted); font-size: 0.84rem; margin: 0; }

.cv { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.86rem; line-height: 1.4; }
.cv__label { color: var(--color-muted); flex: none; }
.cv__value { color: var(--color-heading); font-weight: 600; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.cv--full { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.cv--full .cv__value { text-align: left; }
.cv__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.cv-tag { background: var(--color-primary-light); color: var(--color-primary-dark); font-size: 0.76rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 6px; }
@media (max-width: 700px) { .pf-card--wide { grid-column: 1 / -1; } }
.cv__tablewrap { overflow-x: auto; }
.cv__table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.cv__table th { text-align: left; color: var(--color-muted); font-weight: 600; padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.cv__table td { padding: 0.3rem 0.6rem; border-bottom: 1px solid var(--color-border); color: var(--color-heading); white-space: nowrap; }
.cv__table tr:last-child td { border-bottom: none; }

.pf-cond-head { display: flex; align-items: center; gap: 0.5rem; margin: 1.5rem 0 0.85rem; }
.pf-cond-head h3 { margin: 0; font-size: 1.02rem; }
.pf-cond-head .pf-card__edit { margin-left: auto; }

.dov-track__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.dov-track__head .dov-card__title { margin-bottom: 0.2rem; }
.dov-track__latest { text-align: right; }
.dov-track__num { font-family: var(--font-head); font-weight: 600; font-size: 2rem; color: var(--color-heading); }
.dov-track__unit { font-size: 0.9rem; color: var(--color-muted); margin-left: 0.25rem; }
.dov-track__when { display: block; font-size: 0.78rem; color: var(--color-muted); }
.dov-chart { background: var(--color-fill); border: 1px solid var(--color-border); border-radius: 8px; padding: 0.75rem; }
.dov-chart__cap { margin: 0 0 0.25rem; font-size: 0.85rem; font-weight: 600; color: var(--color-heading); }
.dov-charts-extra { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.dov-legend { display: flex; gap: 1rem; margin: 0.6rem 0 0; font-size: 0.82rem; color: var(--color-muted); }
.dov-empty { color: var(--color-muted); background: var(--color-fill); border: 1px dashed var(--color-border); border-radius: var(--radius); padding: 1.25rem; text-align: center; margin: 0; }

.dov-log { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.dov-log__field { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; min-width: 120px; }
.dov-log__field label { font-size: 0.8rem; font-weight: 600; color: var(--color-heading); }
.dov-log__field input { padding: 0.55rem 0.7rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.95rem; color: var(--color-heading); background: #fff; }
.dov-log__field input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.dov-log__btn { flex: none; white-space: nowrap; }

.dov-timeline { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 2px solid var(--color-border); display: grid; gap: 1rem; }
.dov-timeline__item { position: relative; }
.dov-timeline__item::before { content: ''; position: absolute; left: -1.32rem; top: 0.35rem; width: 9px; height: 9px; border-radius: 50%; background: var(--color-primary); border: 2px solid #fff; }
.dov-timeline__date { font-size: 0.74rem; color: var(--color-muted); font-weight: 600; }
.dov-timeline__title { margin: 0.1rem 0 0; font-weight: 600; color: var(--color-heading); font-size: 0.92rem; }
.dov-timeline__detail { margin: 0.1rem 0 0; font-size: 0.82rem; }

.dov-summary { font-size: 0.92rem; line-height: 1.6; margin: 0 0 0.6rem; color: var(--color-text); }
.dov-summary__note { font-size: 0.78rem; margin: 0; }
.dov-links { display: grid; gap: 0.6rem; }
.dov-links a { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; font-weight: 500; color: var(--color-text); }
.dov-links a:hover { color: var(--color-primary-dark); }
.dov-links .icon { width: 1.05rem; height: 1.05rem; color: var(--color-primary); flex: none; }
.dov-tip { display: flex; gap: 0.8rem; background: var(--color-primary-light); border-radius: 10px; padding: 1.1rem 1.25rem; }
.dov-tip__icon { color: var(--color-primary-dark); flex: none; }
.dov-tip__title { margin: 0 0 0.2rem; font-weight: 600; color: var(--color-primary-darker); font-size: 0.9rem; }
.dov-tip__text { margin: 0; font-size: 0.84rem; color: var(--color-primary-dark); line-height: 1.5; }
.dov-notes { margin: 0; color: var(--color-text); white-space: pre-wrap; }

/* trends — one tracker per disease inside the Health Trends card */
.dov-tracker { padding: 1.25rem 0; border-top: 1px solid var(--color-border); }
.dov-tracker:first-of-type { padding-top: 0; border-top: none; }
.dov-tracker__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.85rem; }
.dov-tracker__name { margin: 0; font-size: 1rem; }

/* conditions shown inline */
.dov-cond { padding: 1.5rem 0; border-top: 1px solid var(--color-border); }
.dov-cond:first-of-type { padding-top: 0; border-top: none; }
.dov-cond__head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.5rem; }
.dov-cond__icon { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--color-primary-light); color: var(--color-primary-dark); flex: none; }
.dov-cond__icon .icon { width: 1.2rem; height: 1.2rem; }
.dov-cond__name { margin: 0; font-size: 1.15rem; flex: 1; }
.dov-cond__edit { flex: none; }
.dov-cond__sec { padding: 0.95rem 0; border-top: 1px dashed var(--color-border); }
.dov-cond__sectitle { margin: 0 0 0.6rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); }

.dov-add { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border); }
.dov-add__label { margin: 0 0 0.7rem; font-size: 0.85rem; font-weight: 600; color: var(--color-heading); }
.dov-add__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dov-add__chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.85rem; border: 1px solid var(--color-border); border-radius: 999px; font-size: 0.88rem; font-weight: 500; color: var(--color-text); }
.dov-add__chip:hover { border-color: var(--color-primary); color: var(--color-primary-dark); background: var(--color-primary-light); }
.dov-add__chip .icon { width: 1rem; height: 1rem; color: var(--color-primary); }
/* Compact "track more" — collapsed to a single link until the patient opts in. */
.dov-add--compact { margin-top: 1rem; padding-top: 1rem; }
.dov-add__toggle { display: inline-flex; align-items: center; gap: 0.35rem; cursor: pointer; list-style: none; font-size: 0.88rem; font-weight: 600; color: var(--color-primary-dark); padding: 0.35rem 0; }
.dov-add__toggle::-webkit-details-marker { display: none; }
.dov-add--compact[open] .dov-add__row { margin-top: 0.7rem; }

/* sidebar disease dropdown */
.rail-dd { margin: 0.1rem 0; }
.rail-dd__summary { list-style: none; cursor: pointer; }
.rail-dd__summary::-webkit-details-marker { display: none; }
.rail-dd__chevron { margin-left: auto; display: inline-grid; transition: transform 0.2s var(--ease); }
.rail-dd__chevron .icon { width: 1rem; height: 1rem; }
.rail-dd[open] .rail-dd__chevron { transform: rotate(180deg); }
.rail-dd__menu { display: flex; flex-direction: column; gap: 0.05rem; margin: 0.15rem 0 0.4rem 1.05rem; padding-left: 0.85rem; border-left: 1px solid var(--color-border); }
.rail-dd__link { padding: 0.35rem 0.55rem; border-radius: 8px; font-size: 0.84rem; color: var(--color-muted); }
.rail-dd__link:hover { background: var(--color-fill); color: var(--color-primary-dark); }

@media (max-width: 960px) {
  .dov-grid { grid-template-columns: 1fr; }
  .dov-side { position: static; }
}
@media (max-width: 860px) {
  .dov { margin: -1.25rem; padding: 1.25rem 1.25rem 2.5rem; }
  .rail-dd__menu { display: none; }
}

/* ── Admin panel ──────────────────────────────────────────── */
.admin-nav { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 1.25rem 0; border-bottom: 1px solid var(--color-border); }
.admin-nav__link { padding: 0.6rem 1rem; color: var(--color-text); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.admin-nav__link:hover { color: var(--color-primary); }
.admin-nav__link.is-active { color: var(--color-primary-dark); border-bottom-color: var(--color-primary); font-weight: 600; }

.stat-grid { margin-bottom: 1.5rem; }
.stat-card { text-align: center; }
.stat-num { display: block; font-family: var(--font-head); font-weight: 700; font-size: 2.1rem; color: var(--color-primary-dark); line-height: 1; }
.stat-cap { font-size: 0.85rem; color: var(--color-muted); }

/* ── Doctor dashboard ─────────────────────────────────────── */
.doc-dash { padding: 2.5rem 0 4rem; }
.doc-hero { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; background: linear-gradient(120deg, var(--color-primary-dark), var(--color-primary)); color: #fff; border-radius: var(--radius-lg); padding: 1.9rem 2rem; box-shadow: 0 18px 44px rgba(var(--brand-deep-rgb), 0.22); margin-bottom: 1.6rem; }
.doc-hero__id { display: flex; align-items: center; gap: 1.1rem; }
.doc-hero__avatar { display: inline-grid; place-items: center; width: 66px; height: 66px; border-radius: 18px; background: rgba(255, 255, 255, 0.16); color: #fff; }
.doc-hero__avatar svg { width: 32px; height: 32px; }
.doc-hero__eyebrow { margin: 0; font-size: 0.88rem; opacity: 0.85; }
.doc-hero__name { margin: 0.1rem 0 0.2rem; font-size: 1.75rem; color: #fff; }
.doc-hero__meta { margin: 0; opacity: 0.9; font-size: 0.95rem; }
.doc-hero__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.doc-hero__actions .btn--primary { background: #fff; color: var(--color-primary-dark); box-shadow: none; }
.doc-hero__actions .btn--primary:hover { background: #fff; transform: translateY(-1px); box-shadow: none; }
.doc-hero__state { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 600; vertical-align: middle; margin-left: 0.6rem; opacity: 0.95; }
.doc-hero__state::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #fff; }
.doc-hero__state--on::before { background: var(--brand-300); box-shadow: 0 0 0 3px rgba(var(--brand-glow-rgb), 0.25); }
.doc-hero__state--off::before { background: #f6c1a8; }
.doc-hero__metarow { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin-top: 0.15rem; }
.doc-hero__toggleform { margin: 0; display: inline; }
.doc-hero__toggle { background: none; border: none; padding: 0; font: inherit; font-size: 0.82rem; color: #fff; opacity: 0.75; cursor: pointer; text-decoration: underline; }
.doc-hero__toggle:hover { opacity: 1; }
.doc-hero__actions .btn--ghost { background: rgba(255, 255, 255, 0.14); color: #fff; border-color: rgba(255, 255, 255, 0.35); }
.doc-hero__actions .btn--ghost:hover { background: rgba(255, 255, 255, 0.24); }

/* Availability status badge (doctor) — tone-coloured pill with a leading dot. */
.status-badge { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.28rem 0.7rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; line-height: 1.2; border: 1px solid transparent; vertical-align: middle; }
.status-badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 8px; }
.status-badge--green { background: var(--color-success-50); color: var(--color-success-800); border-color: var(--color-success-200); }
.status-badge--amber { background: #fef3e0; color: #9a6212; border-color: #f6dba8; }
.status-badge--red { background: #fde9e7; color: #a32b22; border-color: #f5c2bd; }
.status-badge--grey { background: #eef1f4; color: #5a6675; border-color: #d6dce3; }
/* On the dark doctor hero the badge sits on a coloured surface. */
.doc-hero .status-badge { margin-left: 0.6rem; background: rgba(255, 255, 255, 0.16); color: #fff; border-color: rgba(255, 255, 255, 0.35); }

/* Quick status switcher (dashboard hero). */
.status-switch { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.55rem; flex-wrap: wrap; }
.status-switch__label { font-size: 0.82rem; color: #fff; opacity: 0.85; }
.status-switch__select { padding: 0.4rem 0.6rem; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 0.85rem; }
.status-switch__select option { color: #1a2330; }
.status-switch .btn--ghost { background: rgba(255, 255, 255, 0.16); color: #fff; border-color: rgba(255, 255, 255, 0.35); }

.doc-profile__status { margin-top: 0.4rem; display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; }
.doctor-card__status { margin: 0.4rem 0 0; }

/* Access scope shown under a doctor on the patient's Sharing page. */
.access-scope { font-size: 0.82rem; margin: 0.35rem 0 0; padding: 0.3rem 0.55rem; border-radius: 8px; display: inline-block; }
.access-scope--limited { background: #fef3e0; color: #8a5a12; }
.access-scope--full { background: var(--color-success-50); color: var(--color-success-800); }

/* Kebab (3-dot) action menu — pure CSS via <details>, no inline JS. */
.admin-head__actions { display: flex; align-items: center; gap: 0.5rem; }
.kebab { position: relative; display: inline-block; }
.kebab__btn { list-style: none; cursor: pointer; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--color-border); background: var(--color-surface); font-size: 1.1rem; line-height: 1; color: var(--color-heading); user-select: none; }
.kebab__btn::-webkit-details-marker { display: none; }
.kebab__btn:hover { background: var(--color-bg, #f6f8fa); }
.kebab__menu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 190px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; box-shadow: var(--shadow-md, 0 10px 26px rgba(16,40,60,0.12)); padding: 0.35rem; z-index: 30; display: flex; flex-direction: column; gap: 0.1rem; }
.kebab__form { margin: 0; }
.kebab__item { display: block; width: 100%; text-align: left; background: none; border: none; padding: 0.55rem 0.7rem; border-radius: 7px; font: inherit; font-size: 0.88rem; color: var(--color-heading); cursor: pointer; text-decoration: none; }
.kebab__item:hover { background: var(--color-primary-light); }
.kebab__item--danger { color: #b3261e; }
.kebab__item--danger:hover { background: #fde9e7; }

/* Search-grant control on the doctor review page. */
.review-decide .status-badge { margin-bottom: 0.5rem; }

/* Admin broadcast compose + notification feed. */
.notif-compose__row { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
.notif-sent { margin-top: 1.25rem; }
.notif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.notif-item { display: flex; gap: 0.85rem; padding: 0.9rem 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg, 12px); background: var(--color-surface); }
.notif-item__icon { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; background: var(--color-primary-light); color: var(--color-primary-dark); }
.notif-item__icon svg { width: 18px; height: 18px; }
.notif-item__title { margin: 0; font-weight: 600; color: var(--color-heading); }
.notif-item__text { margin: 0.2rem 0 0; color: var(--color-text, #41505f); font-size: 0.92rem; }
.notif-item__time { margin: 0.3rem 0 0; font-size: 0.78rem; }

/* Sent-broadcast body: preview + Show more, so a long message is readable
   in place without stretching the row. */
.notif-body { margin-top: 0.15rem; }
.notif-body > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; cursor: pointer; list-style: none; }
.notif-body > summary::-webkit-details-marker { display: none; }
.notif-body__toggle { color: var(--color-primary-dark); font-size: 0.82rem; font-weight: 600; white-space: nowrap; }
.notif-body__toggle::after { content: 'Show more'; }
.notif-body > summary:hover .notif-body__toggle { text-decoration: underline; }
.notif-body[open] > summary .notif-body__preview { display: none; }
.notif-body[open] .notif-body__toggle::after { content: 'Show less'; }
.notif-body__full { margin: 0.25rem 0 0; max-width: 62ch; white-space: pre-wrap; font-size: 0.9rem; }
/* The repeated closer under a long message (revealed by main.js). */
.notif-body__close { display: block; margin-top: 0.35rem; padding: 0; background: none; border: none; font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--color-primary-dark); cursor: pointer; }
.notif-body__close:hover { text-decoration: underline; }
.notif-body__close[hidden] { display: none; }
/* Collapse a long sent-notifications list to the first few, with a toggle. */
.notif-sent tr.notif-row--extra { display: none; }
.notif-sent.is-expanded tr.notif-row--extra { display: table-row; }
.notif-more { padding: 0.6rem 0.25rem 0; }

@media (max-width: 640px) { .notif-compose__row { grid-template-columns: 1fr; } }

/* Prescription cards + document lists (doctor record & patient portal). */
.rx-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg, 12px); padding: 0.85rem 1rem; margin-bottom: 0.7rem; background: var(--color-surface); }
.rx-card__head { margin: 0 0 0.25rem; }
.rx-meds { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.rx-meds li { font-size: 0.9rem; margin: 0.15rem 0; }
.rx-notes { margin: 0.45rem 0 0; font-size: 0.9rem; color: var(--color-text, #41505f); }
.rx-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem; text-align: center; padding: 1.4rem 1rem; }
.rx-empty p { margin: 0; }

.doc-upload { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.4rem; }
.doc-upload__title { flex: 1 1 220px; padding: 0.5rem 0.7rem; border: 1px solid var(--color-border); border-radius: 8px; font: inherit; }
.doc-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.doc-list__item { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.6rem 0.8rem; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-surface); }
.doc-list__name { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--color-heading); flex: 1 1 auto; min-width: 0; }
.doc-list__name svg { width: 18px; height: 18px; color: var(--color-primary-dark); flex: none; }
.doc-list__actions { display: inline-flex; gap: 0.4rem; align-items: center; }

.doc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-bottom: 1.75rem; }
.doc-stat { display: flex; align-items: center; gap: 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.3rem 1.4rem; box-shadow: var(--shadow-sm); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.doc-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 10px 26px rgba(16, 40, 60, 0.08)); }
.doc-stat__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 14px; background: var(--color-primary-light); color: var(--color-primary-dark); }
.doc-stat__icon svg { width: 24px; height: 24px; }
.doc-stat__num { display: block; font-family: var(--font-head); font-weight: 700; font-size: 2rem; line-height: 1; color: var(--color-heading); }
.doc-stat__label { font-size: 0.88rem; color: var(--color-muted); }

.doc-panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.5rem 1.6rem 1.7rem; }
.doc-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.doc-panel__head h2 { margin: 0; font-size: 1.25rem; }
.doc-panel__head .doc-search { margin: 0; flex: 1; max-width: 460px; }
.doc-panel__count { color: var(--color-muted); font-size: 0.9rem; margin: 0 0 0.75rem; }
.doc-panel .rec-table { border: none; box-shadow: none; border-radius: 0; margin-top: 0; }
.doc-panel .rec-table th { padding: 0.8rem 0.85rem; }
.doc-panel .rec-table td { padding: 0.95rem 0.85rem; font-size: 0.95rem; }

.rec-name { display: inline-flex; align-items: center; gap: 0.65rem; }
.rec-name__av { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 700; font-size: 0.85rem; }

@media (max-width: 820px) { .doc-stats { grid-template-columns: 1fr; } }

/* ── Doctor dashboard: full-width, two-column ─────────────── */
.doc-dash { padding: 0 0 2.5rem; }
.doc-stats { grid-template-columns: repeat(4, 1fr); }
.doc-hero__avatar { overflow: hidden; }
.doc-hero__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.doc-dash__cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
.doc-dash__side { display: flex; flex-direction: column; gap: 1.25rem; }
.doc-sidecard__title { font-size: 1.05rem; margin-bottom: 0.9rem; }
.doc-sidecard__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--color-border); font-size: 0.92rem; }
.doc-sidecard__label { color: var(--color-muted); }
.doc-sidecard__val { text-align: right; font-weight: 500; }
.doc-sidecard__actions { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; }
@media (max-width: 1100px) { .doc-dash__cols { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .doc-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .doc-stats { grid-template-columns: 1fr; } }

/* ── Public doctor profile ────────────────────────────────── */
/* Full-bleed public profile: edge-to-edge connected surface, white background */
/* One connected card: identity panel + detail grid, hairline dividers */

/* ── Stars + reviews ──────────────────────────────────────── */
.stars { letter-spacing: 1px; white-space: nowrap; }
.stars--on { color: #f5b50a; }
.stars--off { color: var(--color-grey-200); }
.review-form { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; padding: 1.2rem 1.3rem; margin-bottom: 1.5rem; display: flex; flex-direction: column; gap: 0.9rem; }
.review-form__row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; justify-content: space-between; }
.review-form__field { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; min-width: 200px; }
.review-form__field > span { font-size: 0.82rem; color: var(--color-muted); }
.review-form input[type="text"], .review-form textarea { width: 100%; padding: 0.6rem 0.8rem; font-family: var(--font-body); font-size: 0.95rem; color: var(--color-heading); background: var(--color-fill); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); }
.review-form input[type="text"]:focus, .review-form textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.star-input { display: inline-flex; flex-direction: row-reverse; border: 0; padding: 0; margin: 0; gap: 0.1rem; }
.star-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.star-input label { font-size: 1.75rem; line-height: 1; color: var(--color-grey-200); cursor: pointer; transition: color 0.12s ease; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: #f5b50a; }
.star-input input:focus-visible + label { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.review-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.review { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 6px; padding: 0.9rem 1.1rem; }
.review__top { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.review__name { color: var(--color-heading); }
.review__date { font-size: 0.82rem; margin-left: auto; }
.review__body { margin: 0.5rem 0 0; color: var(--color-text); overflow-wrap: anywhere; }
.review-empty { padding: 0.5rem 0; }

/* ── Button loading spinner ───────────────────────────────── */
.btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.btn.is-loading::after { content: ''; position: absolute; top: 50%; left: 50%; width: 1.05em; height: 1.05em; margin: -0.52em 0 0 -0.52em; border: 2px solid rgba(255, 255, 255, 0.5); border-top-color: #fff; border-radius: 50%; animation: btnspin 0.6s linear infinite; }
.btn--ghost.is-loading::after, .btn--light.is-loading::after { border-color: rgba(var(--brand-rgb), 0.35); border-top-color: var(--color-primary-dark); }
@keyframes btnspin { to { transform: rotate(360deg); } }

/* Clickable doctor cards + photo avatars in the directory */
.doctor-card { display: block; color: inherit; text-decoration: none; }
.doctor-card__avatar { overflow: hidden; }
.doctor-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.doctor-card__cta { display: inline-block; margin-top: 0.7rem; font-weight: 600; font-size: 0.9rem; color: var(--color-primary-dark); }
.doctor-card__rating { margin: 0.2rem 0 0.35rem; font-size: 0.88rem; font-weight: 600; color: var(--color-heading); }

/* Locked (verified) fields + info banner */
.banner--info { background: var(--brand-50); color: var(--brand-900); border: 1px solid var(--brand-200); }
.form-group--locked input { background: var(--color-tint); color: var(--color-muted); cursor: not-allowed; }
.form-hint--lock { color: var(--color-primary-dark); }

/* ── Admin panel (app-shell) ──────────────────────────────── */
.admin-page { max-width: 1200px; }
.admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.admin-head h1 { margin: 0 0 0.25rem; }
/* Admin dashboard: everything attached into one square-cornered surface
   (hairline dividers via a 1px grid gap; no per-card gaps or rounded borders). */
.admin-page .doc-stat,
.admin-page .doc-panel { border-radius: 0; box-shadow: none; }
.admin-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); overflow: hidden; margin-bottom: -1px; }
.admin-stats .doc-stat { color: inherit; text-decoration: none; background: var(--color-surface); border: 0; }
.admin-stats .doc-stat:hover { transform: none; box-shadow: none; background: var(--color-fill); }
.doc-stat--alert { background: #fff8f3 !important; }
.doc-stat--alert .doc-stat__icon { background: #ffe6d3; color: #b5491c; }
.admin-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); overflow: hidden; align-items: stretch; margin-bottom: -1px; }
.admin-cols .doc-panel { border: 0; }
.admin-page > .doc-panel { border: 1px solid var(--color-border); margin-bottom: -1px; }
@media (max-width: 900px) { .admin-cols { grid-template-columns: 1fr; } .admin-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .admin-stats { grid-template-columns: 1fr; } }
.admin-breakdown { list-style: none; margin: 0 0 1rem; padding: 0; }
.admin-breakdown li { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; }
.admin-breakdown li > span:first-child { width: 72px; font-size: 0.88rem; color: var(--color-muted); flex: none; }
.admin-breakdown strong { width: 40px; text-align: right; color: var(--color-heading); flex: none; }
.admin-breakdown__bar { flex: 1; height: 8px; border-radius: 999px; background: var(--color-fill); overflow: hidden; }
.admin-breakdown__fill { display: block; height: 100%; width: 0; background: var(--grad-primary); border-radius: 999px; transition: width 0.5s var(--ease); }
/* Wide variant for the dedicated Analytics page — roomy labels (no awkward wrap). */
.admin-breakdown--wide li { padding: 0.45rem 0; gap: 0.85rem; }
.admin-breakdown--wide li > span:first-child { width: 200px; max-width: 45%; white-space: normal; line-height: 1.25; color: var(--color-heading); font-weight: 500; }
.admin-breakdown--wide strong { width: 36px; }
.an-search { width: 100%; padding: 0.55rem 0.75rem; margin-bottom: 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; }
.an-search:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.admin-mini { list-style: none; margin: 0; padding: 0.75rem 0 0; border-top: 1px solid var(--color-border); }
.admin-mini li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; }
.admin-mini span { color: var(--color-muted); font-size: 0.9rem; }
.admin-mini strong { color: var(--color-heading); }
.signup-metrics { display: flex; flex-wrap: wrap; gap: 1.1rem 1.75rem; padding: 0.25rem 0 1rem; margin-bottom: 0.85rem; border-bottom: 1px solid var(--color-border); }
.signup-metric { display: flex; flex-direction: column; gap: 0.2rem; }
.signup-metric__num { font-family: var(--font-head); font-weight: 700; font-size: 1.5rem; line-height: 1; color: var(--color-heading); }
.signup-metric__cap { font-size: 0.78rem; color: var(--color-muted); display: inline-flex; align-items: center; gap: 0.35rem; }
.signup-trend { font-size: 0.72rem; font-weight: 700; }
.signup-trend--up { color: var(--color-success); }
.signup-trend--down { color: #c0392b; }

/* Doctor signup documents */
.form-docs { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1rem 1.1rem 0.4rem; margin: 0.5rem 0 1.25rem; }
.form-docs legend { font-weight: 600; color: var(--color-heading); padding: 0 0.4rem; font-size: 0.95rem; }
.form-docs .req { color: #c0392b; }
.degree-list { display: flex; flex-direction: column; gap: 0.6rem; }
.degree-list .form-group { margin: 0; }
.degree-add { margin: 0.9rem 0 1.6rem; }
.degree-add .btn { border-style: dashed; }
.form-docs input[type="file"] { width: 100%; font-size: 0.9rem; color: var(--color-text); padding: 0.5rem 0; }
.form-docs input[type="file"]::file-selector-button { font-family: var(--font-body); font-size: 0.85rem; padding: 0.45rem 0.8rem; margin-right: 0.75rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-fill); color: var(--color-heading); cursor: pointer; }
.form-docs input[type="file"]::file-selector-button:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }

/* Doctor application-status page */
.status-page { max-width: 720px; margin: 0 auto; }
.status-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 2rem; text-align: center; margin-top: 1rem; }
.status-card__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--color-primary-light); color: var(--color-primary-dark); margin-bottom: 1rem; }
.status-card__icon svg { width: 30px; height: 30px; }
.status-card__icon--deny { background: #fdecea; color: #c0392b; }
.status-card h1 { margin: 0 0 0.4rem; font-size: 1.5rem; }
.status-card > .muted { max-width: 52ch; margin: 0 auto 0.5rem; }
.status-reason { background: #fdecea; border: 1px solid #f6cbb0; border-radius: var(--radius-sm); padding: 0.7rem 1rem; margin: 0.85rem auto; max-width: 52ch; color: var(--color-heading); }
.status-summary { text-align: left; margin-top: 1.5rem; border-top: 1px solid var(--color-border); padding-top: 1.25rem; }
.status-summary h2 { font-size: 1.05rem; margin: 0 0 0.75rem; }
.status-summary h3 { font-size: 0.9rem; margin: 1rem 0 0.5rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.status-summary dl { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.25rem; margin: 0; }
.status-summary dt { font-size: 0.78rem; color: var(--color-muted); }
.status-summary dd { margin: 0; font-weight: 600; color: var(--color-heading); }
.status-docs { list-style: none; margin: 0; padding: 0; }
.status-docs li { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; color: var(--color-heading); }
.status-docs svg { width: 18px; height: 18px; color: var(--color-primary); }
.status-logout { text-align: center; margin-top: 1.25rem; }

/* Admin doctor-review page */
.req-status--pending { background: #fff4e5; color: #b5491c; }
.req-status--denied { background: #fdecea; color: #c0392b; }
.doc-side { display: flex; flex-direction: column; gap: 1.25rem; }
.review-docs { list-style: none; margin: 0; padding: 0; }
.review-docs li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--color-border); }
.review-docs li:last-child { border-bottom: none; }
.review-docs__label { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--color-heading); font-size: 0.92rem; }
.review-docs__label svg { width: 18px; height: 18px; color: var(--color-primary); }
.review-decide { margin: 0 0 0.85rem; }
.review-deny__label { display: block; font-size: 0.82rem; color: var(--color-muted); margin: 0.5rem 0 0.35rem; }
.review-decide textarea { width: 100%; padding: 0.6rem 0.75rem; font-family: var(--font-body); font-size: 0.92rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-fill); margin-bottom: 0.5rem; }
.review-deny__btn { color: #c0392b; }

/* Admin patient-summary editor */
.review-page .doc-panel { margin-bottom: 1.25rem; }
.summary-ref { line-height: 1.6; color: var(--color-text); margin: 0; }
.summary-form textarea { width: 100%; padding: 0.8rem 0.9rem; font-family: var(--font-body); font-size: 0.98rem; line-height: 1.6; color: var(--color-heading); background: var(--color-fill); border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); margin-top: 0.6rem; }
.summary-form textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.summary-form__actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 0.85rem; flex-wrap: wrap; }
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem 1.6rem; margin: 0; }
.kv-grid dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); margin-bottom: 0.25rem; }
.kv-grid dd { margin: 0; font-weight: 600; color: var(--color-heading); font-size: 0.95rem; overflow-wrap: anywhere; }

/* Doctor active status (dashboard hero) */
.doc-hero__avail { display: flex; align-items: center; gap: 0.4rem; margin: 0.4rem 0 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.9); }
.doc-hero__avail svg { width: 16px; height: 16px; }
.doc-hero__avail a { color: #fff; text-decoration: underline; }
.doc-status { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; }
.doc-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.doc-status--on { background: rgba(255, 255, 255, 0.18); color: var(--color-success-100); }
.doc-status--off { background: rgba(255, 255, 255, 0.14); color: #ffd9d2; }

.select-inline { padding: 0.55rem 0.7rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-family: var(--font-body); font-size: 0.92rem; color: var(--color-heading); }
.select-inline:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }

/* This class sits on a <td>, so it must NOT become a flex container: a flex
   table cell leaves the row box, stops stretching to the row's height, and
   draws its border-bottom around its own content — which is why the action
   buttons used to hang below the row divider. Kept as a real cell; the
   children lay themselves out inline instead. */
.admin-actions { white-space: nowrap; text-align: right; vertical-align: middle; }
/* Fixed width on the primary action so "Review" and "View" occupy the same
   space, which keeps every row's kebab on one straight vertical line. */
.admin-actions > .btn { min-width: 84px; text-align: center; justify-content: center; vertical-align: middle; }
.admin-actions > .kebab { vertical-align: middle; }
.admin-actions > * + * { margin-left: 0.4rem; }
.inline-form { display: inline-flex; gap: 0.3rem; margin: 0; align-items: center; }

/* ── In-app chat (doctor ↔ patient) ──────────────────────── */
.chat { max-width: 760px; }
.chat__head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.chat__head h1 { margin: 0; font-size: 1.6rem; }

.chat-list { list-style: none; margin: 0; padding: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.chat-list__item { display: flex; align-items: center; gap: 0.85rem; padding: 0.95rem 1.1rem; border-bottom: 1px solid var(--color-border); color: var(--color-text); }
.chat-list li:last-child .chat-list__item { border-bottom: none; }
.chat-list__item:hover { background: var(--color-fill); }
.chat-list__avatar { display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: var(--grad-primary); color: #fff; font-weight: 700; font-family: var(--font-head); }
.chat-list__body { flex: 1; min-width: 0; }
.chat-list__top { display: flex; justify-content: space-between; gap: 0.5rem; }
.chat-list__name { font-weight: 600; color: var(--color-heading); }
.chat-list__time { font-size: 0.78rem; color: var(--color-muted); flex: none; }
.chat-list__last { display: block; font-size: 0.88rem; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-list__item.is-unread .chat-list__name { font-weight: 700; }
.chat-list__item.is-unread .chat-list__last { color: var(--color-heading); font-weight: 500; }

.chat--thread { display: flex; flex-direction: column; }
.chat-thread { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 1.25rem; height: min(56vh, 460px); overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; }
.chat-thread__empty { margin: auto; }
.chat-msg { max-width: 78%; align-self: flex-start; background: var(--color-fill); border: 1px solid var(--color-border); border-radius: 14px 14px 14px 4px; padding: 0.6rem 0.85rem; }
.chat-msg--me { align-self: flex-end; background: var(--color-primary-light); border-color: transparent; border-radius: 14px 14px 4px 14px; }
.chat-msg__body { margin: 0; color: var(--color-heading); white-space: pre-wrap; word-wrap: break-word; }
.chat-msg__time { display: block; margin-top: 0.25rem; font-size: 0.7rem; color: var(--color-muted); }
.chat-msg.is-pending { opacity: 0.8; }
.chat-msg.is-pending .chat-msg__time { font-style: italic; }
.chat-msg.is-failed .chat-msg__time { color: #c0392b; cursor: pointer; font-weight: 600; }
.chat-compose { display: flex; gap: 0.6rem; margin-top: 1rem; }
.chat-compose input[type="text"] { flex: 1; padding: 0.75rem 0.95rem; font-family: var(--font-body); font-size: 1rem; color: var(--color-heading); background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: 10px; }
.chat-compose input[type="text"]:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }

/* ── Global polish ────────────────────────────────────────── */
::selection { background: var(--color-primary-light); color: var(--color-primary-darker); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn:active { transform: translateY(0); }
.btn:disabled, .btn[disabled] { opacity: 0.55; cursor: not-allowed; box-shadow: none; transform: none; }

html { scrollbar-width: thin; scrollbar-color: var(--color-grey-300) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--color-grey-300); border-radius: 8px; border: 3px solid var(--color-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--color-grey-400); }

@media (prefers-reduced-motion: no-preference) {
  .site-main--app > section { animation: pageIn 0.45s var(--ease) both; }
  @keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
}

/* Auth-page refinement */
.auth-wrap { background: radial-gradient(900px 380px at 50% -5%, var(--color-primary-light), transparent); }
.auth-card { position: relative; overflow: hidden; }
.auth-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--grad-primary); }

/* ── Legal / policy pages ─────────────────────────────────── */
.legal { padding: 3rem 0 4rem; }
.legal__inner { max-width: 760px; }
.legal h1 { font-size: clamp(1.8rem, 4vw, 2.2rem); }
.legal h2 { font-size: 1.2rem; margin-top: 1.9rem; }
.legal__note { background: var(--color-primary-light); color: var(--color-primary-darker); padding: 0.65rem 0.95rem; border-radius: var(--radius-sm); font-size: 0.9rem; }
.legal ul { padding-left: 1.2rem; }
.legal li { margin-bottom: 0.4rem; }
.legal__back { margin-top: 2rem; }

/* ── Full-screen app shell (left rail) ────────────────────── */
body.appshell { display: block; min-height: 100vh; background: var(--color-bg); overflow-x: hidden; }

/* ── Top header (logo · search · notifications/messages/account) ── */
.topbar { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 1.25rem; height: 64px; padding: 0 1.1rem; background: #fff; border-bottom: 1px solid var(--color-border); }
.topbar__brand { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; color: var(--color-heading); flex: none; }
.topbar__brand img { flex: none; }
.topbar__search { flex: 1; max-width: 560px; margin: 0 auto; position: relative; display: flex; align-items: center; }
.topbar__search-ic { position: absolute; left: 1rem; color: var(--color-muted); display: inline-flex; pointer-events: none; }
.topbar__search-ic .icon { width: 1.05rem; height: 1.05rem; }
.topbar__search input { width: 100%; padding: 0.58rem 1.1rem 0.58rem 2.6rem; border: 1.5px solid var(--color-border); border-radius: 999px; background: #fff; font-family: var(--font-body); font-size: 0.92rem; color: var(--color-heading); }
.topbar__search input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); background: #fff; }
.topbar__actions { display: flex; align-items: center; gap: 0.3rem; flex: none; margin-left: auto; }
.topbar__icon { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; color: var(--color-muted); }
.topbar__icon:hover { background: var(--color-fill); color: var(--color-primary-dark); }
.topbar__icon .icon { width: 1.25rem; height: 1.25rem; }
.topbar__badge { position: absolute; top: 4px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--color-warn); color: #fff; font-size: 0.64rem; font-weight: 600; display: grid; place-items: center; line-height: 1; }
.topbar__acct { position: relative; }
.topbar__acctbtn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0.45rem; border-radius: 8px; cursor: pointer; list-style: none; }
.topbar__acctbtn::-webkit-details-marker { display: none; }
.topbar__acctbtn:hover { background: var(--color-fill); }
.topbar__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--grad-primary); color: #fff; display: grid; place-items: center; font-weight: 600; font-family: var(--font-head); font-size: 0.9rem; flex: none; }
.topbar__acctname { font-size: 0.85rem; font-weight: 600; color: var(--color-heading); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar__acctchev .icon { width: 0.9rem; height: 0.9rem; color: var(--color-muted); }
.topbar__menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); width: 220px; background: #fff; border: 1px solid var(--color-border); border-radius: 10px; box-shadow: var(--shadow); padding: 0.85rem; z-index: 70; }
.topbar__acct[open] .topbar__menu { display: block; }
.topbar__menuid { margin: 0 0 0.7rem; font-size: 0.82rem; color: var(--color-heading); font-weight: 600; word-break: break-word; }
.topbar__menuid span { display: block; font-size: 0.72rem; color: var(--color-muted); text-transform: capitalize; font-weight: 500; margin-top: 0.1rem; }

/* ── Notification bell popup (header) ─────────────────────── */
.topbar__notif { position: relative; }
.topbar__notifbtn { list-style: none; cursor: pointer; }
.topbar__notifbtn::-webkit-details-marker { display: none; }
.topbar__notifmenu { display: none; position: absolute; right: 0; top: calc(100% + 6px); width: 330px; max-width: 88vw; background: #fff; border: 1px solid var(--color-border); border-radius: 12px; box-shadow: var(--shadow); padding: 0.4rem; z-index: 70; }
.topbar__notif[open] .topbar__notifmenu { display: block; }
.topbar__notifhead { display: flex; justify-content: space-between; align-items: center; padding: 0.45rem 0.55rem; }
.topbar__notifhead strong { font-size: 0.92rem; color: var(--color-heading); }
.topbar__notifcount { font-size: 0.7rem; font-weight: 600; color: #fff; background: var(--color-warn); border-radius: 999px; padding: 0.08rem 0.5rem; }
.topbar__notiflist { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; }
.topbar__notifitem { padding: 0.55rem; border-radius: 8px; }
.topbar__notifitem + .topbar__notifitem { border-top: 1px solid var(--color-border); }
.topbar__notifitem.is-unread { background: #fff; }
.topbar__notifitem.is-unread .topbar__notiftitle::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--color-warn); margin-right: 0.4rem; vertical-align: middle; }
.topbar__notiftitle { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--color-heading); }
.topbar__notiftext { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--color-text); line-height: 1.35; }
.topbar__notiftime { margin: 0.2rem 0 0; font-size: 0.7rem; }
.topbar__notifempty { padding: 0.8rem 0.55rem; margin: 0; }
.topbar__notifall { display: block; text-align: center; padding: 0.6rem; margin-top: 0.25rem; font-size: 0.82rem; font-weight: 600; color: var(--color-primary-dark); border-top: 1px solid var(--color-border); text-decoration: none; }
.topbar__notifall:hover { background: var(--color-fill); border-radius: 8px; }

.appshell__below { display: flex; align-items: flex-start; }
.app-rail { position: sticky; top: 64px; align-self: flex-start; height: calc(100vh - 64px); width: 240px; flex: none; background: var(--color-surface); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; padding: 1.1rem 0.8rem; overflow-y: auto; }
.app-rail__brand { display: flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0.6rem 1rem; font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; color: var(--color-heading); border-bottom: 1px solid var(--color-border); margin-bottom: 0.85rem; }
.app-rail__brand img { flex: none; }
.app-rail__nav { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; }
.app-rail__link { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.7rem; border-radius: 10px; color: var(--color-text); font-weight: 500; font-size: 0.92rem; }
.app-rail__link .icon { width: 1.2rem; height: 1.2rem; color: var(--color-muted); flex: none; }
.app-rail__link:hover { background: var(--color-fill); color: var(--color-primary-dark); }
.app-rail__link.is-active { background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 600; }
.app-rail__link.is-active .icon { color: var(--color-primary); }
.app-rail__foot { border-top: 1px solid var(--color-border); padding-top: 0.85rem; margin-top: 0.85rem; }
.app-rail__user { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.65rem; }
.app-rail__avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-primary); color: #fff; font-weight: 700; font-family: var(--font-head); flex: none; }
.app-rail__email { font-size: 0.82rem; font-weight: 600; color: var(--color-heading); display: block; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-rail__role { font-size: 0.7rem; color: var(--color-muted); text-transform: capitalize; }
.app-rail__badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 0.35rem; display: inline-grid; place-items: center; border-radius: 999px; background: var(--color-accent, var(--color-accent)); color: #fff; font-size: 0.72rem; font-weight: 700; line-height: 1; }

/* Doctor rail: name + DP in the upper area */
.app-rail__doc { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.6rem 0.85rem; border-bottom: 1px solid var(--color-border); margin-bottom: 0.85rem; }
.app-rail__dp { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--grad-primary); color: #fff; font-weight: 700; font-family: var(--font-head); overflow: hidden; }
.app-rail__dp img { width: 100%; height: 100%; object-fit: cover; }
.app-rail__doc-id { min-width: 0; }
.app-rail__doc-name { display: block; font-size: 0.9rem; font-weight: 700; color: var(--color-heading); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-rail__doc-spec { font-size: 0.72rem; color: var(--color-muted); }

/* Doctor profile header + photo editing */
.doc-profile__head { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.doc-profile__dp { width: 78px; height: 78px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--grad-primary); color: #fff; font-weight: 700; font-family: var(--font-head); font-size: 1.9rem; overflow: hidden; box-shadow: var(--shadow-sm); }
.doc-profile__dp img { width: 100%; height: 100%; object-fit: cover; }
.doc-profile__id { flex: 1; min-width: 0; }
.doc-profile__id h1 { margin: 0; font-size: 1.6rem; }
.doc-profile__edit { flex: none; }
.badge-verified { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 0.72rem; vertical-align: middle; }

.dp-edit { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.dp-edit__preview { width: 72px; height: 72px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary-light); color: var(--color-primary-dark); overflow: hidden; }
.dp-edit__preview img { width: 100%; height: 100%; object-fit: cover; }
.dp-edit__preview svg { width: 34px; height: 34px; }
.dp-edit__form { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0; }
.dp-edit__del { margin: 0; }

.appshell__main { flex: 1; min-width: 0; padding: 1.75rem 2rem; }
.verify-banner--app { border-radius: var(--radius-sm); border: 1px solid #f6cbb0; margin-bottom: 1.25rem; padding: 0.7rem 1rem; }

/* ── Flush dashboards: edge-to-edge, white, fully attached ──── */
/* Remove the shell padding + greenish bg so the surface meets the rail & wall. */
.appshell__main:has(> .dash-flush) { padding: 0; background: #fff; min-height: calc(100vh - 64px); }
.dash-flush { background: #fff; max-width: none; }
/* Drop side borders so blocks merge seamlessly with the rail and the right wall. */
.dash-flush .admin-head,
.dash-flush .admin-stats,
.dash-flush .admin-cols,
.dash-flush .banner,
.dash-flush .doc-hero,
.dash-flush .doc-stats,
.dash-flush .doc-dash__cols,
.dash-flush > .doc-panel { border-left: 0; border-right: 0; border-radius: 0; }

/* Admin: pull the header into the connected surface */
.dash-flush .admin-head { margin: 0 0 -1px; padding: 1.4rem 1.75rem; border-bottom: 1px solid var(--color-border); background: #fff; }
.dash-flush .banner { margin: 0 0 -1px; border-radius: 0; }
.dash-flush .admin-stats { margin: 0 0 -1px; border-top: 1px solid var(--color-border); }
.dash-flush .admin-cols { margin: 0 0 -1px; border-top: 1px solid var(--color-border); }
.dash-flush > .doc-panel { margin: 0 0 -1px; border-top: 1px solid var(--color-border); }

/* Doctor dashboard: same attached, square, edge-to-edge treatment */
.dash-flush .doc-hero { margin: 0; box-shadow: none; }
.dash-flush .doc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--color-border); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); margin: 0; }
.dash-flush .doc-stats .doc-stat { background: var(--color-surface); border: 0; border-radius: 0; box-shadow: none; }
.dash-flush .doc-stats .doc-stat:hover { transform: none; box-shadow: none; background: var(--color-fill); }
.dash-flush .doc-dash__cols { gap: 1px; background: var(--color-border); align-items: stretch; margin: 0; }
.dash-flush .doc-dash__cols > .doc-panel { border: 0; border-radius: 0; box-shadow: none; }
.dash-flush .doc-dash__side { gap: 0; background: var(--color-surface); }
.dash-flush .doc-dash__side .doc-panel { border: 0; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--color-border); }
.dash-flush .doc-dash__side .doc-panel:last-child { border-bottom: 0; }
@media (max-width: 1100px) { .dash-flush .doc-dash__cols { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .dash-flush .doc-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dash-flush .doc-stats { grid-template-columns: 1fr; } }

/* Compact stat cells: smaller, no icon background, semibold numbers */
.dash-flush .doc-stat { padding: 0.8rem 1.1rem; gap: 0.6rem; }
.dash-flush .doc-stat__icon { background: transparent; width: auto; height: auto; flex: none; color: var(--color-primary); }
.dash-flush .doc-stat__icon svg { width: 22px; height: 22px; }
.dash-flush .doc-stat__num { font-size: 1.5rem; }
.dash-flush .doc-stat__label { font-size: 0.82rem; }
/* All bold text -> semibold across the flush dashboards */
.dash-flush h1, .dash-flush h2, .dash-flush h3,
.dash-flush strong,
.dash-flush .doc-stat__num,
.dash-flush .signup-metric__num,
.dash-flush .signup-trend { font-weight: 600; }

/* Mobile menu button + drawer overlay (hidden on desktop). */
.topbar__burger { display: none; place-items: center; width: 40px; height: 40px; border: none; background: none; border-radius: 8px; color: var(--color-heading); cursor: pointer; flex: none; }
.topbar__burger:hover { background: var(--color-fill); }
.topbar__burger .icon { width: 1.4rem; height: 1.4rem; }
.rail-overlay { display: none; }

@media (max-width: 860px) {
  .topbar { gap: 0.5rem; padding: 0 0.9rem; }
  .topbar__brand span { display: none; }
  .topbar__acctname { display: none; }
  .topbar__burger { display: inline-grid; }
  .appshell__below { display: block; }
  /* Full sidebar (with labels) slides in from the left as a drawer. */
  .app-rail { position: fixed; top: 64px; left: 0; height: calc(100vh - 64px); height: calc(100dvh - 64px); width: 264px; max-width: 82vw; flex-direction: column; overflow-y: auto; padding: 1.1rem 0.8rem; transform: translateX(-100%); transition: transform 0.25s var(--ease); z-index: 80; box-shadow: 2px 0 22px rgba(0, 0, 0, 0.16); }
  body.rail-open .app-rail { transform: translateX(0); }
  .app-rail__nav { flex-direction: column; flex: 1; gap: 0.2rem; }
  .app-rail__link { padding: 0.7rem 0.7rem; }
  .app-rail__link span { display: inline; }
  .rail-overlay { display: block; position: fixed; inset: 64px 0 0 0; background: rgba(var(--brand-deep-rgb), 0.4); opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease), visibility 0.25s; z-index: 75; }
  body.rail-open .rail-overlay { opacity: 1; visibility: visible; }
  body.rail-open { overflow: hidden; }
  .appshell__main { padding: 1.25rem; }
  .appshell__main:has(> .dash-flush) { padding: 0; }
}

/* ── Profile (single menu + grouped tabs) ─────────────────── */
.profile-shell { padding: 0 0 2rem; }
.ps-content { max-width: 1080px; }
.ptabs { display: flex; gap: 0.3rem; flex-wrap: wrap; border-bottom: 1px solid var(--color-border); margin: 0.75rem 0 1.5rem; }
.ptab { background: none; border: none; padding: 0.7rem 1.05rem; font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; color: var(--color-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 8px 8px 0 0; }
.ptab:hover { color: var(--color-primary-dark); background: var(--color-primary-light); }
.ptab.is-active { color: var(--color-primary-dark); border-bottom-color: var(--color-primary); }
.ptab-panel { display: none; }
.ptab-panel.is-active { display: block; animation: panelIn 0.3s var(--ease); }
.ptab-panel__intro { color: var(--color-muted); max-width: 60ch; margin: 0 0 1.25rem; }
@keyframes panelIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Profile dropdown groups (collapsible <details>) */
.pgroup { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-bottom: 0.9rem; overflow: hidden; scroll-margin-top: 1rem; }
.pgroup__head { display: flex; align-items: center; gap: 0.85rem; padding: 1.15rem 1.5rem; cursor: pointer; list-style: none; user-select: none; }
.pgroup__head::-webkit-details-marker { display: none; }
.pgroup__head:hover { background: var(--color-fill); }
.pgroup__head:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.pgroup__icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--color-primary-light); color: var(--color-primary-dark); flex: none; }
.pgroup__icon .icon { width: 1.3rem; height: 1.3rem; }
.pgroup__title { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--color-heading); flex: 1; min-width: 0; }
.pgroup__count { flex: none; min-width: 22px; height: 22px; padding: 0 0.45rem; display: inline-grid; place-items: center; border-radius: 999px; background: var(--color-fill); border: 1px solid var(--color-border); color: var(--color-muted); font-size: 0.75rem; font-weight: 700; }
.pgroup__chevron { flex: none; color: var(--color-muted); display: inline-grid; transition: transform 0.2s var(--ease); }
.pgroup__chevron .icon { width: 1.2rem; height: 1.2rem; }
.pgroup[open] .pgroup__chevron { transform: rotate(180deg); }
.pgroup[open] .pgroup__head { border-bottom: 1px solid var(--color-border); }
.pgroup__body { padding: 0.5rem 1.5rem 0.5rem; }

/* Sections sit flat inside a dropdown (the dropdown card is the chrome) */
.pgroup__body .ps-section { background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 1.25rem 0; margin: 0; border-bottom: 1px solid var(--color-border); }
.pgroup__body .ps-section:last-child { border-bottom: none; }
.pgroup__body .ps-section__head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; padding-bottom: 0; border-bottom: none; }
.pgroup__body .ps-section__name { margin: 0; font-size: 1rem; font-weight: 600; color: var(--color-heading); }

/* Disease records — clean list inside its dropdown */
.ps-section__hint { color: var(--color-muted); font-size: 0.9rem; max-width: 62ch; margin: 0.4rem 0 1rem; }
.drec-list { list-style: none; margin: 0; padding: 0; }
.drec-item { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 0; border-bottom: 1px solid var(--color-border); }
.drec-item:last-child { border-bottom: none; padding-bottom: 0; }
.drec-item__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 10px; background: var(--color-primary-light); color: var(--color-primary-dark); }
.drec-item__icon svg { width: 20px; height: 20px; }
.drec-item__body { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; }
.drec-item__name { font-weight: 600; color: var(--color-heading); }
.drec-item__status { font-size: 0.82rem; color: var(--color-muted); }
.drec-item__status.is-on { color: var(--color-primary-dark); font-weight: 600; }
.drec-item__actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
@media (max-width: 560px) {
  .drec-item { flex-wrap: wrap; }
  .drec-item__actions { width: 100%; }
  .drec-item__actions .btn { flex: 1; }
}
/* legacy section-sidebar (unused after tab refactor) */
.ps-grid { display: block; }
.ps-sidebar__title { font-family: var(--font-head); font-weight: 700; color: var(--color-heading); margin: 0.25rem 0 0.5rem; padding: 0 0.6rem; }
.ps-nav { display: flex; flex-direction: column; }
.ps-nav__group { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); font-weight: 700; margin: 0.9rem 0.6rem 0.3rem; }
.ps-nav__link { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: 9px; color: var(--color-text); font-size: 0.9rem; border-left: 3px solid transparent; }
.ps-nav__link .icon { width: 1.05rem; height: 1.05rem; color: var(--color-muted); flex: none; }
.ps-nav__link:hover { background: var(--color-fill); color: var(--color-primary-dark); }
.ps-nav__link.is-active { background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 600; border-left-color: var(--color-primary); }
.ps-nav__link.is-active .icon { color: var(--color-primary-dark); }

.ps-content__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.ps-content__head h1 { margin: 0; }
.ps-content__pdf { display: inline-flex; align-items: center; gap: 0.45rem; }
.ps-content__pdf svg { width: 16px; height: 16px; }
.ps-section { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.75rem; box-shadow: var(--shadow-sm); margin-bottom: 1.25rem; scroll-margin-top: 1.5rem; }
.ps-section__head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
.ps-section__icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--color-primary-light); color: var(--color-primary-dark); flex: none; }
.ps-section__icon .icon { width: 1.3rem; height: 1.3rem; }
.ps-section__head h2 { margin: 0; font-size: 1.2rem; }
.ps-section__edit { margin-left: auto; }

@media (max-width: 900px) {
  .ps-grid { grid-template-columns: 1fr; }
  .ps-sidebar { position: static; max-height: none; }
}

/* ── Prescriptions ────────────────────────────────────────── */
.rx-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.rx-head strong { color: var(--color-heading); }
.rx-diag { margin: 0.2rem 0 0; }
.rx-actions { display: flex; gap: 0.4rem; align-items: center; }
.rx-notes { margin: 0.75rem 0 0; white-space: pre-wrap; color: var(--color-text); }

/* ── Error page ───────────────────────────────────────────── */
.error-page { text-align: center; padding: 5rem 1.25rem; }
.error-page__code { font-family: var(--font-head); font-weight: 700; font-size: 4rem; color: var(--color-primary); margin: 0; }
.error-page__title { margin: 0.25rem 0; }
.error-page__msg { color: var(--color-muted); margin-bottom: 1.5rem; }

/* ── Footer ───────────────────────────────────────────────── */
.site-footer { background: var(--brand-900); color: var(--brand-200); }
.site-footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 2rem; padding: 3.5rem 1.25rem 2.5rem; }
.brand--footer .brand__name { color: #fff; }
.site-footer__about { margin: 1rem 0 1.2rem; font-size: 0.92rem; max-width: 32ch; }
.social { display: flex; gap: 0.6rem; }
.social a { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,0.08); color: var(--brand-100); transition: background 0.18s ease, color 0.18s ease, transform 0.18s var(--ease); }
.social a:hover { background: var(--color-primary); color: #fff; transform: translateY(-2px); }
.social .icon { width: 1.15rem; height: 1.15rem; }
.site-footer__col h4 { color: #fff; font-size: 1rem; margin-bottom: 1rem; }
.site-footer__col a, .site-footer__loc { display: flex; align-items: center; gap: 0.5rem; color: var(--brand-200); font-size: 0.92rem; margin-bottom: 0.7rem; }
.site-footer__col a:hover { color: #fff; }
.site-footer__col .icon { width: 1.05rem; height: 1.05rem; flex: none; }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 1.25rem; border-top: 1px solid rgba(255,255,255,0.08); }
.site-footer__copy { margin: 0; font-size: 0.88rem; }
.site-footer__trust { margin: 0; font-weight: 600; letter-spacing: 0.04em; color: var(--brand-100); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 960px) {
  .feature-grid, .steps, .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { order: -1; max-width: 380px; margin-inline: auto; }
  .steps__line { display: none; }
  .site-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  /* Collapse marketing header back to brand + toggle; menu becomes a dropdown */
  .site-header .site-header__inner { display: flex; justify-content: space-between; }
  .nav-toggle { display: inline-flex; }
  .site-menu { display: none; position: absolute; top: 74px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0.9rem; background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 1.1rem 1.25rem 1.4rem; box-shadow: var(--shadow); }
  .site-menu.is-open { display: flex; }
  .site-nav { flex-direction: column; align-items: stretch; gap: 0.4rem; }
  /* In the collapsed panel the dropdown expands in place rather than floating. */
  .navdd__menu { position: static; transform: none; min-width: 0; margin-top: 0.4rem; box-shadow: none; }
  .site-actions { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .site-actions .btn { width: 100%; }
  /* Stacked panel: the bell becomes a full-width row with a label beside it. */
  .site-bell { width: 100%; height: auto; padding: 0.5rem; }
  /* Inside the collapsed nav panel the menu has room to sit inline, so drop
     the floating card and let it push the panel taller instead. */
  .acct__menu { position: static; min-width: 0; margin-top: 0.4rem; box-shadow: none; }
  .site-nav a:not(.btn)::after { display: none; }
  .audience { grid-template-columns: 1fr; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; padding: 2.25rem; }
  .form-row { grid-template-columns: 1fr; }
  .auth-card { padding: 1.6rem; }
  .site-footer__top { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
@media (max-width: 480px) {
  .feature-grid, .steps, .trust-grid { grid-template-columns: 1fr; }
  .site-footer__top { grid-template-columns: 1fr; }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ── Specialty tag (bold green, under doctor name) ─────────── */
.specialty-tag { color: var(--color-success-800); font-weight: 700; margin: 0.3rem 0; }

/* ── Availability scheduler (doctor profile edit) ─────────── */
.availability { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.4rem; }
.availability__row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.5rem 0.65rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); transition: background 0.15s, border-color 0.15s; }
.availability__row.is-on { background: var(--color-primary-light); border-color: var(--color-primary); }
.availability__day { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 8.5rem; font-weight: 600; cursor: pointer; }
.availability__day input { width: 1.05rem; height: 1.05rem; }
.availability__times { display: inline-flex; align-items: center; gap: 0.5rem; }
.availability__time { padding: 0.4rem 0.55rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; font-family: var(--font-body); font-size: 0.9rem; color: var(--color-heading); }
.availability__time:disabled { opacity: 0.5; }
.availability__dash { color: var(--color-muted); font-size: 0.85rem; }

/* ── Specialty / "other" dropdown pairing ─────────────────── */
.specialty-other { margin-top: 0.5rem; }

/* ── Access request: doctor details shown to the patient ──── */
.req-card__doc { display: flex; flex-direction: column; gap: 0.15rem; }
.req-card__reason { display: inline-block; margin-top: 0.25rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 600; font-size: 0.82rem; }

/* ── Patient sharing: hide-category controls ──────────────── */
.share-toggles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.5rem 1rem; margin-top: 0.5rem; }
.share-toggle { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.65rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.share-toggle input { width: 1.05rem; height: 1.05rem; }
.share-toggle span { font-size: 0.92rem; }
.share-toggle--hidden { background: #fff4ee; border-color: #f3d3bf; }

/* Approve form with inline "choose what to share" controls (shown up front). */
.req-card--pending { display: block; }
.approve-form { margin-top: 0.75rem; }
.share-choose { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.75rem 0.9rem; margin: 0 0 0.85rem; }
.share-choose legend { font-weight: 600; font-size: 0.9rem; padding: 0 0.35rem; color: var(--color-heading); }
.share-choose__hint { margin: 0 0 0.5rem; font-size: 0.82rem; color: var(--color-muted); }
.approve-form__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ── Doctor editing patient record: edit links on the record view ── */
.rec-section__edit { float: right; font-size: 0.82rem; font-weight: 600; }

/* ── MLC Portal ───────────────────────────────────────────── */
/* Prominent opt-in callout on the doctor application form. */
.mlc-optin { margin: 1.25rem 0; padding: 1rem 1.1rem; border: 1.5px solid var(--color-primary); border-radius: var(--radius); background: var(--color-primary-light); }
.mlc-optin__head { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 0.75rem; }
.mlc-optin__icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--color-surface); color: var(--color-primary-dark); }
.mlc-optin__icon .icon { width: 1.2rem; height: 1.2rem; }
.mlc-optin__title { margin: 0; font-weight: 700; font-size: 1rem; color: var(--color-heading); }
.mlc-optin__sub { margin: 0.15rem 0 0; font-size: 0.88rem; color: var(--color-text); line-height: 1.35; }
.mlc-optin__choices { margin-bottom: 0.4rem; }
.mlc-optin .choice { background: var(--color-surface); }
.mlc-optin .form-hint { color: var(--color-primary-dark); }
.mlc-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.mlc-badge--completed { background: var(--color-success-50); color: var(--color-success-800); }
.mlc-badge--provisional { background: var(--color-primary-light); color: var(--color-primary-dark); }
.mlc-badge--pending { background: #fdeceb; color: #b3261e; }
.mlc-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; margin-top: 0.6rem; }
.mlc-photo { margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface); }
.mlc-photo img { width: 100%; height: 130px; object-fit: cover; display: block; }
.mlc-photo__file { display: grid; place-items: center; height: 130px; background: var(--color-fill); }
.mlc-photo__file .icon { width: 2rem; height: 2rem; color: var(--color-muted); }
.mlc-photo figcaption { padding: 0.4rem 0.55rem; font-size: 0.82rem; color: var(--color-heading); }
.mlc-photo__del { padding: 0 0.55rem 0.5rem; }

/* ── Message a patient by Health ID (doctor inbox) ────────── */
.chat-start { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.chat-start input { flex: 1 1 16rem; padding: 0.55rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }

/* ── Admin: specialties management ────────────────────────── */
.specialty-add { display: flex; align-items: stretch; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
/* The text field, the province and the button are one control strip: a browser
   default select next to a styled input reads as two unrelated widgets. */
.specialty-add__input,
.specialty-add__select { padding: 0.55rem 0.7rem; font: inherit; font-size: 0.95rem; color: var(--color-heading); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.specialty-add__input { flex: 1 1 18rem; }
.specialty-add__select { flex: 0 0 auto; min-width: 11.5rem; cursor: pointer; }
.specialty-add__input:focus,
.specialty-add__select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.specialty-count { margin: 0 0 0.75rem; font-size: 0.85rem; }
.specialty-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.specialty-list__item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface, #fff); }
.specialty-list__item form { margin: 0; }

/* The verified tick, still used by the doctor's own portal page. */
.dprof-verified {
  display: inline-grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 0.8rem; font-weight: 700;
}

.wa-link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-success-400); font-weight: 600; }
.wa-link svg { width: 18px; height: 18px; flex: none; }
.wa-link:hover { text-decoration: underline; }

@media (max-width: 860px) {
}

/* ── MLC list: serial + "made on" timestamp ───────────────── */
.mlc-serial { color: var(--color-muted); font-variant-numeric: tabular-nums; }
.mlc-no { font-weight: 600; }
.mlc-made { display: block; font-size: 0.72rem; color: var(--color-muted); margin-top: 0.15rem; }

/* ── Auto-growing numbered textarea (MLC description) ─────── */
textarea[data-autonumber] { overflow: hidden; resize: vertical; min-height: 4.5rem; }

/* ── MLC case documents (letters + follow-up files) ───────── */
.mlc-docs { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.mlc-docs__sub { margin: 1.1rem 0 0.35rem; font-weight: 600; font-size: 0.9rem; color: var(--color-heading); }
.mlc-docs__hint { margin-top: 0.6rem; font-size: 0.85rem; }
.mlc-doc { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.mlc-doc__label { font-weight: 600; min-width: 11rem; color: var(--color-heading); }
.mlc-doc__file { color: var(--color-muted); font-size: 0.85rem; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlc-doc__act { display: flex; align-items: center; gap: 0.4rem; margin: 0; }

/* ── Doctor's own profile: header action buttons ──────────── */

/* ── Offer type row (consultation modes, separate from availability) ── */

/* ── Brand logo (Slashcure wordmark image) ────────────────── */
/* Trimmed wordmark (no padding) — reads large even at a small height. */
.brand-logo { display: block; height: 48px; width: auto; }
.brand-logo--sm { height: 46px; } /* fills the 64px top bar */
.brand-logo--footer { height: 54px; }

/* ── Emergency access gate + log accessor meta ────────────── */
.log-meta { display: block; font-size: 0.76rem; margin-top: 0.15rem; }
.emergency__gate { max-width: 440px; margin: 0 auto; text-align: left; }
.emergency__gate h1 { font-size: 1.4rem; margin-bottom: 0.25rem; }
.emergency__form { margin-top: 1.1rem; display: flex; flex-direction: column; gap: 0.85rem; }

/* ── MLC apply/approval status ────────────────────────────── */
.mlc-status { display: flex; align-items: center; gap: 0.5rem; margin: 0.4rem 0 0; font-size: 0.95rem; }
.mlc-status svg { width: 18px; height: 18px; flex: none; }
.mlc-status--on { color: var(--color-primary-dark); }
.mlc-status--pending { color: #b26a00; }

/* ── Availability table (doctor profile) ──────────────────── */
.avail-table { width: 100%; border-collapse: collapse; margin-top: 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.avail-table th, .avail-table td { text-align: left; padding: 0.55rem 0.85rem; font-size: 0.9rem; border-bottom: 1px solid var(--color-border); }
.avail-table thead th { background: var(--color-mint); color: var(--color-heading); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.avail-table tbody th { font-weight: 600; color: var(--color-heading); width: 45%; }
.avail-table tbody td { color: var(--color-text); }
.avail-table tbody tr:last-child th, .avail-table tbody tr:last-child td { border-bottom: 0; }
.avail-table--sm { margin-top: 0.4rem; }
.avail-table--sm th, .avail-table--sm td { padding: 0.3rem 0.6rem; font-size: 0.8rem; }

/* ── Access-requests tabs + table ─────────────────────────── */
.reqtabs { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
.reqtab { border: 0; background: transparent; padding: 0.6rem 0.95rem; font: inherit; font-weight: 600; color: var(--color-muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.reqtab:hover { color: var(--color-heading); }
.reqtab.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.reqtable__name { display: block; font-weight: 600; color: var(--color-heading); }
.reqtable__sub { display: block; font-size: 0.8rem; }

/* ── Searchable checkbox group (Diseases / Labs) ──────────── */
.choice-search { width: 100%; max-width: 340px; margin: 0.15rem 0 0.6rem; padding: 0.5rem 0.75rem; font: inherit; font-size: 0.9rem; border: 1.5px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-fill); }
.choice-search:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }

/* ── Prescription card row (with delete) ──────────────────── */
.rx-card__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.rx-card__row .rx-card__head { margin: 0; }

/* ── Toast: floating, self-dismissing confirmation ───────────── */
.toast {
  position: fixed; top: 76px; right: 1.25rem; z-index: 60;
  padding: 0.7rem 1.1rem; border-radius: 8px; font-size: 0.9rem; font-weight: 600;
  background: var(--color-success-800); color: #fff; box-shadow: 0 6px 20px rgba(16, 40, 60, 0.18);
  cursor: pointer; opacity: 0; transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
@media (max-width: 640px) { .toast { top: auto; bottom: 1rem; left: 1rem; right: 1rem; text-align: center; } }

/* ── Merged doctor Profile page (dashboard + profile) ─────────── */
.pf { display: flex; flex-direction: column; gap: 0.6rem; max-width: 1280px; }
.pf-card { background: #fff; border: 1px solid var(--color-border); border-radius: 6px; padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm); }
.pf-card__title { margin: 0 0 1rem; font-size: 1.05rem; }
.pf-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.pf-card__head .pf-card__title { margin-bottom: 0; }
.pf-clinic__id { min-width: 0; }
.pf-card__sub { display: flex; align-items: center; gap: 0.3rem; margin: 0.25rem 0 0; font-size: 0.8rem; color: var(--color-muted); }
.pf-card__sub svg { width: 13px; height: 13px; flex: none; }
.pf-stat__sub { display: block; font-size: 0.72rem; color: var(--color-muted); }

/* Today-at-a-glance on the public search cards + public profile */
.dc-today { display: block; width: 100%; margin: 0.6rem 0 0.2rem; padding-top: 0.6rem; border-top: 1px solid var(--color-border); text-align: left; }
.dc-today__head { margin: 0 0 0.4rem; }
.dc-today__row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.78rem; padding: 0.12rem 0; }
.dc-today__clinic { color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-today__val { font-weight: 600; white-space: nowrap; color: var(--color-muted); }
.dc-today__val--today { color: var(--color-success); }
.dc-today__val--leave { color: #c02626; }
.avail-table tbody tr.is-today { background: var(--color-mint-soft); }
.avail-table--sm .pf-chip { font-size: 0.72rem; }

/* ── Flat, tight surfaces: doctor Profile, search, public profile ──
   Plain white page, small radii and small gaps so blocks read as one
   connected surface rather than floating pills. */
.appshell__main:has(> .pf) { background: #fff; }
body:has(.doctor-grid) .dash { background: #fff; }
.doctor-grid { gap: 0.6rem; margin-top: 0.75rem; }
.doctor-card { border-radius: 6px; padding: 1.15rem; }
.avail-table, .avail-table--sm { border-radius: 6px; }
.dash:has(.doctor-grid) { padding: 1.5rem 0 2.5rem; }
.appshell__main:has(.doctor-grid),
.appshell__main:has(.dp) { background: #fff; padding: 0; }
.appshell__main:has(.doctor-grid) .dash { padding: 1.25rem 0 2rem; }

/* Identity header */
.pf-head { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.pf-head__avatar { position: relative; width: 108px; height: 108px; flex: none; border-radius: 50%; background: var(--color-mint); display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary); border: 3px solid var(--color-border); }
.pf-head__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pf-head__dot { position: absolute; bottom: 6px; right: 6px; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid #fff; background: #9aa7b5; }
.pf-head__dot--green { background: var(--color-success-400); }
.pf-head__dot--amber { background: #eab308; }
.pf-head__dot--red { background: #e0552e; }
.pf-head__dot--grey { background: #9aa7b5; }
.pf-head__main { flex: 1; min-width: 240px; }
.pf-head__name { margin: 0; font-size: 1.5rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pf-head__quals { margin: 0.2rem 0 0.5rem; color: var(--color-muted); font-size: 0.95rem; }
/* Header pill — shows today's live in-clinic status, coloured by state. */
.pf-pill { display: inline-block; padding: 0.28rem 0.8rem; background: var(--color-primary-light); color: var(--color-primary-dark); font-size: 0.8rem; font-weight: 600; border-radius: 999px; }
.pf-pill--green { background: var(--color-success-50); color: var(--color-success-800); }
.pf-pill--red { background: #fdeaea; color: #c02626; }
.pf-pill--grey { background: var(--color-fill); color: var(--color-muted); border: 1px solid var(--color-border); }
.pf-more { display: inline-block; margin-left: 0.15rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--color-mint); color: var(--color-primary-dark); font-size: 0.72rem; font-weight: 700; cursor: help; }

/* Admin: per-clinic availability blocks on the doctor review page */
.adm-clinic { border: 1px solid var(--color-border); border-radius: 6px; padding: 0.85rem 1rem; margin-top: 0.75rem; }
.adm-clinic__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.4rem; }
.adm-clinic__name { margin: 0; font-size: 0.95rem; }
.adm-clinic__empty { margin: 0.3rem 0 0; font-size: 0.82rem; }
.pf-head__meta { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 0.7rem; font-size: 0.86rem; color: var(--color-muted); }
.pf-head__meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.pf-head__meta svg { width: 15px; height: 15px; }
.pf-head__actions { display: flex; flex-direction: column; gap: 0.5rem; align-self: flex-start; width: 180px; max-width: 100%; }
.pf-head__actions .btn svg { width: 15px; height: 15px; }
/* Compact Edit Profile sitting under the doctor's details */
.pf-head__edit { display: inline-flex; margin-top: 0.85rem; padding: 0.32rem 0.9rem; font-size: 0.8rem; }
.pf-head__viewlink { width: 100%; }

/* Two-up row on the edit form (username + QR request) */
.edit-split { display: flex; gap: 1rem; align-items: stretch; }
.edit-split__col { flex: 1 1 0; min-width: 0; }
@media (max-width: 720px) { .edit-split { flex-direction: column; } }

/* Profile QR card + download controls (compact preview) */
.pf-qr { padding: 0.55rem; border: 1px solid var(--color-border); border-radius: 8px; background: #fff; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.pf-qr__img { width: 104px; height: 104px; image-rendering: pixelated; }
.pf-qr__url { margin: 0; font-size: 0.64rem; color: var(--color-muted); word-break: break-all; text-align: center; }
.pf-qr__dl { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; width: 100%; padding: 0.35rem 0.5rem; border: none; border-radius: 6px; background: var(--color-btn); color: #fff; font-size: 0.76rem; font-weight: 600; cursor: pointer; }
.pf-qr__dl:hover { background: var(--color-btn-hover); }
.pf-qr__dl svg { width: 14px; height: 14px; }
.pf-qr__textbtn { background: none; border: none; padding: 0.1rem; font: inherit; font-size: 0.74rem; color: var(--color-primary-dark); text-decoration: underline; cursor: pointer; }
.pf-qr__textbtn:hover { color: var(--color-primary); }
.pf-qr__reqform { margin: 0; }
.pf-qr__pending { font-size: 0.72rem; color: var(--color-muted); text-align: center; }

/* Admin review: both codes (branded poster + plain) shown above the toggles */
.admin-qr { margin-bottom: 1rem; }
.admin-qr__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.7rem; align-items: start; }
.admin-qr__item { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; text-align: center; }
.admin-qr__item figcaption { font-size: 0.72rem; font-weight: 600; color: var(--color-muted); }
.admin-qr__frame { width: 100%; padding: 0.35rem; border: 1px solid var(--color-border); border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.admin-qr__frame--poster { min-height: 140px; }
.admin-qr__poster-canvas { width: 100%; height: auto; display: block; }
.admin-qr__wait { font-size: 0.72rem; color: var(--color-muted); }
.admin-qr__plain { width: 100%; height: auto; display: block; }
.admin-qr__url { margin: 0.55rem 0 0; font-size: 0.68rem; color: var(--color-muted); text-align: center; word-break: break-all; }

/* Stats strip */
.pf-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 0; overflow: hidden; }
.pf-stat { display: flex; align-items: center; gap: 0.8rem; padding: 1.1rem 1.3rem; border-right: 1px solid var(--color-border); }
.pf-stat:last-child { border-right: 0; }
.pf-stat__icon { width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--color-mint); color: var(--color-primary); }
.pf-stat__icon svg { width: 20px; height: 20px; }
.pf-stat__label { display: block; font-size: 0.76rem; color: var(--color-muted); }
.pf-stat__val { display: block; font-weight: 700; font-size: 0.95rem; color: var(--color-heading); }
.pf-stat__val--green { color: var(--color-success); }
.pf-stat__val--amber { color: #b7860b; }
.pf-stat__val--red { color: #c44a20; }
.pf-stat__val--grey { color: var(--color-muted); }

/* Two-column body */
.pf-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0.6rem; align-items: start; }
.pf-grid__main, .pf-grid__side { display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }

/* Consultation tiles */
.pf-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.pf-tile { border: 1px solid var(--color-border); border-radius: 6px; padding: 1rem 1.1rem; }
.pf-tile__icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: var(--color-mint); color: var(--color-primary); margin-bottom: 0.55rem; }
.pf-tile__icon svg { width: 19px; height: 19px; }
.pf-tile__name { margin: 0 0 0.25rem; font-weight: 700; font-size: 0.95rem; }
.pf-tile__text { margin: 0 0 0.8rem; font-size: 0.82rem; color: var(--color-muted); }
.pf-tile__toggle { display: flex; align-items: center; gap: 0.6rem; margin: 0; }
.pf-tile__state { font-size: 0.85rem; font-weight: 600; color: var(--color-muted); }
.pf-tile__state.is-on { color: var(--color-success); }

/* iOS-style switch */
.pf-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; cursor: pointer; }
.pf-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 1; }
.pf-switch__track { position: absolute; inset: 0; border-radius: 999px; background: #cdd7de; transition: background 0.18s ease; }
.pf-switch__track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: left 0.18s ease; }
.pf-switch input:disabled { cursor: not-allowed; }
.pf-switch input:disabled + .pf-switch__track { opacity: 0.5; }
.pf-tile--soon .pf-tile__icon { background: var(--color-fill); color: var(--color-muted); }
.pf-tile--soon .pf-tile__state { font-style: italic; }
.pf-switch input:checked + .pf-switch__track { background: var(--color-success-400); }
.pf-switch input:checked + .pf-switch__track::after { left: 23px; }

/* Weekly schedule table */
.pf-sched { overflow-x: auto; }
.pf-sched table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.pf-sched th, .pf-sched td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--color-border); }
.pf-sched thead th { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); }
.pf-sched tbody tr:last-child td { border-bottom: 0; }
.pf-sched tbody tr.is-today { background: var(--color-mint-soft); }
.pf-sched__day { font-weight: 600; color: var(--color-heading); }
.pf-chip { display: inline-block; padding: 0.18rem 0.65rem; border-radius: 999px; font-size: 0.76rem; font-weight: 700; }
.pf-chip--active { color: var(--color-success); background: var(--color-success-50); }
.pf-chip--today { color: #fff; background: var(--color-success); }
.pf-chip--leave { color: #c02626; background: #fdeaea; }
.pf-chip--off { color: #c02626; background: transparent; font-weight: 600; }
.pf-sched__act { text-align: right; white-space: nowrap; }
.pf-sched__act form { margin: 0; }
.pf-linkbtn { background: none; border: none; padding: 0.2rem 0.4rem; font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--color-muted); cursor: pointer; border-radius: 6px; }
.pf-linkbtn:hover { color: #c02626; background: #fdeaea; }
.pf-linkbtn--resume { color: var(--color-success); }
.pf-linkbtn--resume:hover { color: var(--color-success); background: var(--color-success-50); }
.pf-note { display: flex; align-items: center; gap: 0.4rem; margin: 0.8rem 0 0; font-size: 0.78rem; color: var(--color-muted); }
.pf-note svg { width: 14px; height: 14px; flex: none; }

/* Biodata */
.pf-bio { margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.pf-bio > div { display: grid; grid-template-columns: 130px 1fr; gap: 0.5rem; font-size: 0.88rem; }
.pf-bio dt { color: var(--color-muted); }
.pf-bio dd { margin: 0; font-weight: 600; color: var(--color-heading); overflow-wrap: anywhere; }
.pf-bio__about { grid-template-columns: 1fr; }
.pf-bio__about dd { font-weight: 400; line-height: 1.55; }

@media (max-width: 980px) {
  .pf-grid { grid-template-columns: 1fr; }
  .pf-stats { grid-template-columns: 1fr 1fr; }
  .pf-stat:nth-child(2) { border-right: 0; }
  .pf-stat:nth-child(1), .pf-stat:nth-child(2) { border-bottom: 1px solid var(--color-border); }
}
@media (max-width: 620px) {
  .pf-tiles { grid-template-columns: 1fr; }
  .pf-stats { grid-template-columns: 1fr; }
  .pf-stat { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .pf-stat:last-child { border-bottom: 0; }
  .pf-head__actions { align-self: stretch; width: 100%; }
  .pf-qr { max-width: 260px; margin-left: auto; margin-right: auto; }
}

/* ── Merged landing/home (oladoc-style) ─────────────────────── */
.lhero {
  position: relative; overflow: hidden; padding: 4rem 0 3.5rem; min-height: 600px; display: flex; align-items: center;
  color: #fff;
  /* Only the base gradient lives here now — it shows through wherever a photo
     doesn't reach, and covers the moment before the first image decodes. The
     photos and the scrim above them are real elements (.lhero__slide /
     .lhero__scrim) because a background-image can't crossfade. */
  background: linear-gradient(120deg, #0d2a63 0%, #163b86 55%, #1c53b4 100%);
}
/* Photo panel: the right-hand half of the hero, clear of the copy. Stacked
   slides, only .is-active opaque, so a swap is a crossfade rather than a
   flicker through the background. */
.lhero__slides {
  /* Runs to the top, bottom and right edges of the hero — any inset here leaves
     a bare navy strip and the photo reads as a slab pasted on the page. Only
     the left edge is deliberate, and the mask dissolves it into the navy. */
  position: absolute; top: 0; bottom: 0; left: 28%; right: 0;
  /* The fade runs further across now, so the navy carries deeper into the photo
     before the image reads at full strength. */
  mask-image: linear-gradient(90deg, transparent 0, #000 38%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%);
}
.lhero__slide {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
  /* `cover` fills the panel exactly: no letterbox bars, so the only edge the
     eye can find is the masked one. Held high so faces sit in the upper half
     rather than being cut by the bottom of the hero. */
  object-fit: cover; object-position: 50% 20%;
  transition: opacity 1.2s ease-in-out;
}
.lhero__slide.is-active { opacity: 1; }
/* Navy scrim behind the copy. It only has to reach the photo panel now, so it
   clears well before the image instead of tinting half of it. */
.lhero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #0d2a63 0%, #0d2a63 42%, rgba(13,42,99,0.72) 52%, rgba(13,42,99,0.3) 62%, rgba(13,42,99,0) 72%);
}
/* Someone who asked for less motion gets the first photo, held still. */
@media (prefers-reduced-motion: reduce) {
  .lhero__slide { transition: none; }
}
.lhero__inner { position: relative; z-index: 1; width: 100%; }
.lhero__copy { max-width: 600px; }
.lhero__title { color: #fff; margin: 0 0 1.1rem; font-size: clamp(2.1rem, 4.6vw, 3.2rem); line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; }
.lhero__title .accent { color: #ff6b6b; }
.lhero__lead { margin: 0 0 1.4rem; font-size: 1.08rem; line-height: 1.7; color: #d3e0f7; max-width: 44ch; }
.lhero__badge { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(34,181,115,0.18); border: 1px solid rgba(34,181,115,0.5); color: #b9f2d6; font-size: 0.85rem; font-weight: 600; padding: 0.35rem 0.8rem; border-radius: 999px; margin-bottom: 1.1rem; }
.lhero__badge svg { width: 15px; height: 15px; }
.lhero__badge-sep { opacity: 0.45; margin: 0 0.15rem; }
.lhero__visual { display: flex; justify-content: center; }
.lhero__img { max-width: 100%; height: auto; border-radius: 18px; }
/* One line, always. Flex + nowrap keeps the pills on a single row — inline-block
   wrapping spaced the second row by line-height, which is shorter than the pills,
   so the rows crowded.
   The row is allowed past the 600px copy column (like .lsearch) and the pills are
   sized to fit five of them; if a longer set ever overflows it scrolls sideways,
   and the mask fades the right edge so it reads as "more here" rather than as a
   pill sliced in half. */
.lhero__popular { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.35rem; width: max-content; max-width: min(760px, 100%); margin: 0.9rem 0 0; font-size: 0.8rem; color: #cdddf6; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lhero__popular::-webkit-scrollbar { display: none; }
.lhero__popular-label { flex: none; margin-right: 0.05rem; }
.lhero__popular a { flex: none; white-space: nowrap; color: #fff; text-decoration: none; background: rgba(255,255,255,0.12); padding: 0.24rem 0.62rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); transition: background 0.18s ease, border-color 0.18s ease; }
.lhero__popular a:hover { background: rgba(255,255,255,0.24); border-color: rgba(255,255,255,0.32); }

/* Search bar */
/* Segmented search bar: location · query · button, reading as one control.
   The divider is on the field rather than between elements so it disappears
   cleanly when the bar stacks on narrow screens. */
.lsearch { display: flex; align-items: stretch; gap: 6px; background: #fff; border: 1.5px solid transparent; border-radius: 14px; padding: 6px; box-shadow: 0 12px 30px rgba(10,30,60,0.22); max-width: 760px; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.lsearch:focus-within { border-color: var(--color-primary); }
.lsearch__field { position: relative; display: flex; align-items: center; gap: 0.5rem; padding: 0 0.85rem; flex: 1; min-width: 0; border-radius: 9px; }
.lsearch__field:hover { background: var(--color-fill); }
/* Hairline between the two fields, inset so it doesn't touch the bar's edges. */
.lsearch__field--loc { flex: 0 0 38%; }
.lsearch__field--loc::after { content: ''; position: absolute; right: -3px; top: 20%; bottom: 20%; width: 1px; background: var(--color-border); }
.lsearch__field svg { width: 18px; height: 18px; color: var(--color-muted); flex: none; }
.lsearch__field:focus-within svg { color: var(--color-primary); }
.lsearch__field input { border: none; outline: none; width: 100%; min-width: 0; padding: 0.72rem 0; font-family: var(--font-body); font-size: 0.95rem; background: none; color: var(--color-heading); text-overflow: ellipsis; }
/* Kill Safari/Chrome's own search decorations so both fields match. */
.lsearch__field input[type="search"] { -webkit-appearance: none; appearance: none; }
.lsearch__field input[type="search"]::-webkit-search-decoration,
.lsearch__field input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
/* The location field opens the city dialog, so it's a button in spirit. */
.lsearch__field--loc input[data-city-open] { cursor: pointer; }
.lsearch__btn { flex: none; padding: 0 1.6rem; border-radius: 9px; }
.lsearch__btn:hover { transform: none; } /* no lift — it's seated inside the bar */

/* On-page variant (the doctors directory): no drop shadow, sits on the page. */
.lsearch--page { margin: 0.5rem 0 0.9rem; box-shadow: none; border-color: var(--color-border); background: var(--color-surface); }
.lsearch--page:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }

/* Result count + reset, under the bar. */
.doc-search__meta { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0 0 1.5rem; font-size: 0.9rem; color: var(--color-muted); }

/* ── City picker dialog ──────────────────────────────────── */
/* Opened by the hero's location field. Header + search row stay put while the
   city list scrolls, so the "Get my location" button is always reachable. */
.citypick { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 1.25rem 1.25rem; background: rgba(16, 34, 51, 0.5); }
.citypick[hidden] { display: none; }
.has-modal { overflow: hidden; }
.citypick__box { display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 82vh; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.citypick__head { position: relative; display: flex; align-items: center; justify-content: center; padding: 1.1rem 3rem; border-bottom: 1px solid var(--color-border); }
.citypick__title { margin: 0; font-size: 1.15rem; color: var(--color-primary-dark); }
.citypick__close { position: absolute; right: 0.9rem; display: inline-grid; place-items: center; width: 32px; height: 32px; font-size: 1.4rem; line-height: 1; color: var(--color-muted); background: none; border: 0; border-radius: 8px; cursor: pointer; }
.citypick__close:hover { background: var(--color-fill); color: var(--color-heading); }

.citypick__search { position: relative; display: flex; align-items: center; gap: 0.5rem; padding: 0.9rem 1rem; }
.citypick__searchic { position: absolute; left: 1.7rem; display: inline-flex; color: var(--color-primary); pointer-events: none; }
.citypick__searchic svg { width: 18px; height: 18px; }
.citypick__input { flex: 1; min-width: 0; padding: 0.75rem 0.9rem 0.75rem 2.5rem; font-family: var(--font-body); font-size: 0.98rem; color: var(--color-heading); background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: 10px; }
.citypick__input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.citypick__detect { display: inline-flex; align-items: center; gap: 0.4rem; flex: none; padding: 0.75rem 0.9rem; font-family: var(--font-body); font-size: 0.88rem; font-weight: 600; color: var(--color-primary-dark); background: var(--color-fill); border: 1.5px solid var(--color-border); border-radius: 10px; cursor: pointer; }
.citypick__detect:hover:not(:disabled) { border-color: var(--color-primary); background: var(--color-primary-light); }
.citypick__detect:disabled { opacity: 0.6; cursor: default; }
.citypick__detect svg { width: 16px; height: 16px; }
.citypick__msg { margin: 0 1rem 0.6rem; font-size: 0.85rem; color: #b54a18; }

.citypick__list { flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 0 0 0.5rem; list-style: none; border-top: 1px solid var(--color-border); }
.citypick__opt { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.8rem 1.1rem; font-family: var(--font-body); font-size: 0.98rem; text-align: left; color: var(--color-heading); background: none; border: 0; border-bottom: 1px solid var(--color-border); cursor: pointer; }
.citypick__opt:hover { background: var(--color-primary-light); color: var(--color-primary-dark); }
.citypick__opt svg { width: 17px; height: 17px; flex: none; color: var(--color-muted); }
.citypick__optname { flex: 1; }
.citypick__optprov { font-size: 0.78rem; color: var(--color-muted); }
.citypick__empty { margin: 0; padding: 1.5rem 1.1rem; text-align: center; color: var(--color-muted); }

@media (max-width: 560px) {
  .citypick { padding: 0; }
  .citypick__box { max-width: none; max-height: 100vh; height: 100vh; border-radius: 0; }
  .citypick__search { flex-wrap: wrap; }
  .citypick__detect { width: 100%; justify-content: center; }
  .citypick__searchic { left: 1.7rem; }
}

/* Category tiles */
/* The category tiles are a bridge between the hero and the story below, so
   they sit tighter than the site's usual 6rem section rhythm — otherwise the
   tiles' own bottom padding plus the next section's top padding stacked up to
   ~12rem of empty page. */
.lcats { padding-top: 2.2rem; padding-bottom: 2rem; }
.lcats + .section { padding-top: 3.5rem; }
.lcat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
/* Vertical card: tinted image on top, title + text below. */
.lcat { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.15s ease; }
a.lcat:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(16,40,60,0.12); }
.lcat__media { position: relative; width: 100%; aspect-ratio: 5 / 4; display: flex; align-items: center; justify-content: center; background: var(--color-mint); overflow: hidden; }
/* Square photos cropped to 5:4 — bias the crop upward so faces (and the
   hospital's entrance sign) survive instead of being cut off at the bottom. */
.lcat__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.lcat__media svg { width: 52px; height: 52px; color: var(--color-primary); opacity: 0.85; }
.lcat:nth-child(1) .lcat__media { background: #eef0fb; }
.lcat:nth-child(2) .lcat__media { background: #fdeede; }
.lcat:nth-child(3) .lcat__media { background: #eaf5f0; }
.lcat:nth-child(4) .lcat__media { background: #eef6ee; }
.lcat__body { padding: 0.9rem 1.05rem 1.15rem; }
.lcat__title { margin: 0 0 0.25rem; font-size: 1.02rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.lcat__text { margin: 0; font-size: 0.84rem; color: var(--color-muted); line-height: 1.45; }
.lcat--soon .lcat__media { opacity: 0.92; }
.lcat__soon { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #b26a00; background: #fdf1dc; padding: 0.12rem 0.42rem; border-radius: 999px; white-space: nowrap; }

/* Section head (featured doctors) */
.lsec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.lsec-head__title { margin: 0; }
.lsec-head__sub { margin: 0.25rem 0 0; color: var(--color-muted); }
.lsec-head .btn svg { width: 15px; height: 15px; }

/* Hospitals: city chooser */
.hcity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.hcity { display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 1.2rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.hcity:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--color-primary); color: inherit; }
.hcity__icon { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--color-primary-light); color: var(--color-primary-dark); }
.hcity__icon svg { width: 20px; height: 20px; }
.hcity__body { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
.hcity__name { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; color: var(--color-heading); }
.hcity__text { font-size: 0.84rem; color: var(--color-muted); }
.hcity__go { display: inline-flex; flex: none; color: var(--color-primary); transition: transform 0.18s var(--ease); }
.hcity__go svg { width: 17px; height: 17px; }
.hcity:hover .hcity__go { transform: translateX(3px); }
.hcity-back { margin: 0 0 0.75rem; font-size: 0.9rem; }

/* Coming-soon page */
.lcs { max-width: 640px; margin: 0 auto; text-align: center; padding: 2.5rem 0; }
.lcs__icon { width: 72px; height: 72px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-mint); color: var(--color-primary); margin-bottom: 1rem; }
.lcs__icon svg { width: 34px; height: 34px; }
.lcs__title { margin: 0 0 0.6rem; }
.lcs__text { color: var(--color-muted); margin: 0 0 1.4rem; }
.lcs__actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }

@media (max-width: 860px) {
  /* Image becomes a subtle backdrop behind a heavier scrim so copy stays readable. */
  .lhero { min-height: auto; padding: 3rem 0; background: linear-gradient(120deg, #0d2a63, #1c53b4); }
  /* Narrow screens crop the photo to fill and sit it under a heavier scrim, so
     the copy stays readable over any of the three. */
  /* No room for a side panel: the photo goes full-bleed behind a heavier scrim. */
  .lhero__slides { left: 0; right: 0; mask-image: none; -webkit-mask-image: none; }
  .lhero__slide { object-fit: cover; object-position: 60% 15%; }
  .lhero__scrim { background: linear-gradient(160deg, rgba(13,42,99,0.94) 0%, rgba(13,42,99,0.8) 100%); }
  .lhero__copy { max-width: none; }
  .lcat-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  /* Stacked: the vertical hairline becomes a horizontal one between rows. */
  .lsearch { flex-direction: column; gap: 4px; }
  .lsearch__field--loc { flex: 1; }
  .lsearch__field--loc::after { right: 0; left: 0; top: auto; bottom: -2px; width: auto; height: 1px; }
  .lsearch__btn { width: 100%; padding: 0.7rem; }
  .lcat-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
}

/* ── Hospital Portal (Module 1) ────────────────────────────── */
/* Shares the admin app-shell surfaces (.admin-page / .doc-panel); everything
   here is the hospital-specific vocabulary: OPD status pills, the weekly
   schedule with its colour code, and the public hospital page. */

/* Rail identity block */
.hrail__id { display: flex; align-items: center; gap: 0.65rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--color-border); }
.hrail__logo { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--color-fill); overflow: hidden; }
.hrail__logo img { width: 100%; height: 100%; object-fit: cover; }
.hrail__logo--fallback svg { width: 20px; height: 20px; color: var(--color-primary); }
.hrail__idtext { display: flex; flex-direction: column; min-width: 0; }
.hrail__name { font-weight: 700; color: var(--color-heading); font-size: 0.92rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrail__role { font-size: 0.75rem; color: var(--color-muted); }
.hrail__super { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0; padding: 0.55rem 1.1rem; background: #fff8f3; border-bottom: 1px solid #f3ddcb; font-size: 0.76rem; color: #b5491c; }
.hrail__exit { background: none; border: none; padding: 0; font: inherit; font-weight: 700; color: #b5491c; text-decoration: underline; cursor: pointer; }
.app-rail__sep { display: block; padding: 0.9rem 1.1rem 0.35rem; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }

/* Status pills */
.hpill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.18rem 0.55rem; border-radius: 999px; font-size: 0.74rem; font-weight: 600; background: var(--color-fill); color: var(--color-muted); white-space: nowrap; }
.hpill--green { background: var(--color-success-50); color: var(--color-success-800); }
.hpill--red { background: #fdecea; color: #c0392b; }
.hpill--amber { background: #fff4e5; color: #b5491c; }
.hpill--blue { background: var(--brand-100); color: var(--brand-800); }
.hpill--solid { background: var(--brand-900); color: #fff; }

.hstatus { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.24rem 0.65rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--color-fill); color: var(--color-muted); }
.hstatus::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.hstatus--green { background: var(--color-success-50); color: var(--color-success-800); }
.hstatus--red { background: #fdecea; color: #c0392b; }
.hstatus--amber { background: #fff4e5; color: #b5491c; }
.hstatus--blue { background: var(--brand-100); color: var(--brand-800); }
.hstatus--grey { background: var(--color-subtle); color: var(--color-muted); }

.hstat--green { color: var(--color-success) !important; }
.hstat--red { color: #c0392b !important; }
.hstat--amber { color: var(--color-warn) !important; }
.hstat--blue { color: var(--color-primary) !important; }

/* Daily verification banner */

/* Dashboard lists */
.hdept-list, .hnotif-list, .hann-mini, .hsvc-list, .hqna { list-style: none; margin: 0; padding: 0; }
.hdept { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.hdept:last-child { border-bottom: none; }
.hdept__name { font-weight: 600; color: var(--color-heading); }
.hdept__nums { display: flex; gap: 0.35rem; flex-wrap: wrap; }

.hnotif { padding: 0.7rem 0; border-bottom: 1px solid var(--color-border); }
.hnotif:last-child { border-bottom: none; }
.hnotif-list--full .hnotif { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.hnotif.is-expired { opacity: 0.55; }
.hnotif__type { margin: 0; font-weight: 700; color: var(--color-heading); font-size: 0.9rem; display: flex; align-items: center; gap: 0.4rem; }
.hnotif__text { margin: 0.2rem 0; color: var(--color-text); }
.hnotif__meta { margin: 0; font-size: 0.78rem; }
.hnotice { border-left: 4px solid var(--color-primary) !important; }

.hann-mini li { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0; border-bottom: 1px solid var(--color-border); }
.hann-mini li:last-child { border-bottom: none; }

/* Filters row */
.hfilters { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.hfilter { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text); font-size: 0.85rem; font-weight: 600; }
.hfilter span { color: var(--color-muted); font-weight: 700; }
.hfilter:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.hfilter.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.hfilter.is-active span { color: rgba(255, 255, 255, 0.8); }
.hfilter--clear { background: var(--color-fill); }
.hfilters__verify { margin-left: auto; }

/* Departments grid */
.hdept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.85rem; }
.hdept-card { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.9rem 1rem; background: var(--color-surface); display: flex; flex-direction: column; gap: 0.5rem; }
.hdept-card--link:hover { border-color: var(--color-primary); }
.hdept-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.hdept-card__name { font-weight: 700; color: var(--color-heading); }
.hdept-card__desc { margin: 0; font-size: 0.85rem; }
.hdept-card__nums { display: flex; gap: 0.35rem; flex-wrap: wrap; }

/* Services */
.hsvc-add { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.hsvc-add input { flex: 1 1 200px; padding: 0.55rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; }
.hsvc { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.hsvc:last-child { border-bottom: none; }
.hsvc.is-off { opacity: 0.6; }
.hsvc__body { display: flex; flex-direction: column; gap: 0.1rem; flex: 1 1 240px; min-width: 0; }
.hsvc__name { font-weight: 600; color: var(--color-heading); }
.hsvc__desc { font-size: 0.85rem; line-height: 1.45; }
.hsvc__desc--empty { color: var(--color-muted); opacity: 0.7; font-style: italic; }
.hsvc__actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
/* The portal row previews the artwork at the size the public page draws it,
   so "what will patients see?" is answered by the list itself. */
.hsvc { --dept-soft: var(--color-fill); --dept-ink: var(--color-primary); gap: 0.75rem; }
.hsvc__art { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--dept-soft); }
.hsvc__svg { width: 26px; height: 26px; }

/* ── The service icon picker ─────────────────────────────── */
/* A disclosure, so the add form stays two fields and a button for the hospital
   that doesn't care, and a grid of swatches inside for the one that does — the
   pick is made by looking at the drawing rather than reading its name off a
   dropdown. Each swatch tints itself, so the grid is also the colour preview. */
.svcpick { --dept-soft: var(--color-fill); --dept-ink: var(--color-primary); --dept-wash: var(--color-surface); flex: 1 1 100%; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.svcpick__summary { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.55rem; cursor: pointer; list-style: none; }
.svcpick__summary::-webkit-details-marker { display: none; }
.svcpick__now { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--dept-soft); }
.svcpick__nowsvg { width: 21px; height: 21px; }
.svcpick__summarytext { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.svcpick__summarytext b { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); }
.svcpick__summarynow { font-size: 0.84rem; font-weight: 600; color: var(--color-heading); }
.svcpick__chev { margin-left: auto; display: grid; place-items: center; color: var(--color-muted); }
.svcpick__chev svg { width: 16px; height: 16px; transition: transform 0.18s var(--ease); }
.svcpick[open] .svcpick__chev svg { transform: rotate(180deg); }
.svcpick__body { max-height: 290px; overflow-y: auto; padding: 0 0.55rem 0.6rem; border-top: 1px solid var(--color-border); }
.svcpick__group { margin: 0.7rem 0 0.4rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--color-muted); }
.svcpick__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 0.4rem; }
.svcpick__opt { display: block; cursor: pointer; }
.svcpick__opt--auto { margin-top: 0.6rem; }
.svcpick input[type="radio"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; opacity: 0; }
.svcpick__box { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; height: 100%; padding: 0.5rem 0.25rem; border: 1px solid var(--color-border); border-radius: 12px; text-align: center; transition: border-color 0.15s var(--ease), background 0.15s var(--ease); }
.svcpick__opt--auto .svcpick__box { flex-direction: row; text-align: left; padding: 0.4rem 0.55rem; gap: 0.5rem; }
.svcpick__art { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--dept-soft); }
.svcpick__svg { width: 24px; height: 24px; }
.svcpick__label { font-size: 0.71rem; font-weight: 600; line-height: 1.25; color: var(--color-heading); overflow-wrap: anywhere; }
.svcpick--compact { display: flex; align-items: center; gap: 0.45rem; padding: 0.3rem 0.4rem; cursor: pointer; }
.svcpick__select { flex: 1; min-width: 0; padding: 0.4rem 0.5rem; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-surface); font: inherit; font-size: 0.84rem; color: var(--color-heading); cursor: pointer; }
.svcpick__select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.svcpick__opt:hover .svcpick__box { border-color: var(--dept-ink); }
.svcpick input[type="radio"]:checked + .svcpick__box { border-color: var(--dept-ink); background: var(--dept-wash); box-shadow: 0 0 0 1px var(--dept-ink) inset; }
.svcpick input[type="radio"]:focus-visible + .svcpick__box { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hsvc-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hsvc-tag { padding: 0.45rem 0.9rem; border-radius: 999px; background: var(--color-fill); border: 1px solid var(--color-border); font-weight: 600; color: var(--color-heading); font-size: 0.9rem; }

/* Doctor rows */
.hdoc-cell { display: flex; align-items: center; gap: 0.65rem; color: inherit; }
.hdoc-cell__img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: var(--color-fill); }
.hdoc-cell__img--blank { display: inline-grid; place-items: center; }
.hdoc-cell__img--blank svg { width: 20px; height: 20px; color: var(--color-primary); }
.hdoc-head__status { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.hdoc-photo { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; background: var(--color-fill); display: grid; place-items: center; margin-bottom: 0.75rem; }
.hdoc-photo img { width: 100%; height: 100%; object-fit: cover; }
.hdoc-photo__blank svg { width: 44px; height: 44px; color: var(--color-primary); }

/* Weekly schedule editor + display */
.hweek-edit { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.hweek-row { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 0.75rem; padding: 0.45rem 0.6rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.hweek-row.is-on { border-color: var(--brand-200); background: var(--brand-50); }
.hweek-row__day { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--color-heading); margin: 0; }
.hweek-row__times { display: flex; align-items: center; gap: 0.4rem; }
.hweek-row__times select { padding: 0.4rem 0.5rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; font-size: 0.88rem; background: var(--color-surface); }
.hweek-row__dash { color: var(--color-muted); font-size: 0.85rem; }
.hweek-row__leave { display: flex; align-items: center; gap: 0.4rem; }
.hidden-form { display: none; }
.hform-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.hweek-preview { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.hweek { list-style: none; margin: 0.5rem 0; padding: 0; }
.hweek__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.7rem; border-left: 4px solid var(--color-grey-200); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--color-fill); margin-bottom: 0.3rem; }
.hweek__day { font-weight: 600; color: var(--color-heading); }
.hweek__hours { color: var(--color-text); font-size: 0.9rem; }
/* Colour code: today · upcoming · completed · leave · timing updated */
.hweek__row--today { border-left-color: var(--color-success); background: var(--color-success-50); }
.hweek__row--upcoming { border-left-color: var(--color-primary); background: var(--brand-50); }
.hweek__row--completed { border-left-color: var(--color-grey-400); background: var(--color-subtle); color: var(--color-muted); }
.hweek__row--leave { border-left-color: #c0392b; background: #fdecea; }
.hweek__row--updated { border-left-color: #d8a800; background: #fff9e6; }
.hweek__row--off { border-left-color: var(--color-grey-200); background: var(--color-surface); }
.hweek__row--off .hweek__hours { color: var(--color-muted); }

.hweek-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.5rem 0 0; padding: 0; font-size: 0.75rem; color: var(--color-muted); }
.hweek-legend__item { display: inline-flex; align-items: center; gap: 0.35rem; }
.hweek-legend__item::before { content: ''; width: 10px; height: 10px; border-radius: 3px; background: var(--color-grey-200); }
.hweek-legend__item--today::before { background: var(--color-success); }
.hweek-legend__item--upcoming::before { background: var(--color-primary); }
.hweek-legend__item--completed::before { background: var(--color-grey-400); }
.hweek-legend__item--leave::before { background: #c0392b; }
.hweek-legend__item--updated::before { background: #d8a800; }

/* Weekly popup (public page) — a real overlay, never a new page */
.hweek-modal, .hemg { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1rem; background: rgba(16, 34, 51, 0.55); }
.hweek-modal[hidden], .hemg[hidden] { display: none; }
.hweek-modal__box, .hemg__box { width: min(440px, 100%); max-height: 86vh; overflow-y: auto; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 1.1rem 1.25rem 1.4rem; }
.hweek-modal__head, .hemg__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.hweek-modal__close { background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--color-muted); cursor: pointer; padding: 0 0.2rem; }
.hweek-modal__close:hover { color: var(--color-heading); }
.hemg__info { margin: 0.5rem 0 0.9rem; color: var(--color-text); }
/* Directions and Message share a row and wrap together rather than stacking
   into two full-width bars. */
.hemg__acts { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.hemg__msg { display: inline-flex; align-items: center; gap: 0.4rem; }
.hemg__msg svg { width: 15px; height: 15px; }
body.has-modal { overflow: hidden; }

/*
 * Urgent announcement banner (public page).
 *
 * A dimmed backdrop over the whole page and a plain card dropped in from the
 * top edge. The dim is what makes it read as "stop and read this" — with the
 * page at full strength behind it, a quiet white card was easy to look past.
 * No accent rule and no priority pill: the interruption itself is the signal,
 * and a second coloured thing above the title only competed with it.
 */
.hurg { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-start; justify-content: center; padding: 1.2rem 1rem; background: rgba(0, 0, 0, 0.38); opacity: 0; transition: opacity 0.28s ease-out; }
.hurg[hidden] { display: none; }
.hurg.is-in { opacity: 1; }
.hurg__box {
  position: relative; width: min(540px, 100%); max-height: 82vh; overflow-y: auto;
  background: var(--color-surface); border-radius: 8px; box-shadow: var(--shadow-lg);
  padding: 1.05rem 1.2rem 1.15rem;
  transform: translateY(-24px); transition: transform 0.28s ease-out;
}
.hurg.is-in .hurg__box { transform: translateY(0); }
/* Out of the flow so the title starts at the top edge rather than below a
   header row that would hold nothing but the cross. */
.hurg__close { position: absolute; top: 0.5rem; right: 0.7rem; background: none; border: none; font-size: 1.5rem; line-height: 1; color: var(--color-muted); cursor: pointer; padding: 0 0.2rem; }
.hurg__close:hover { color: var(--color-heading); }
.hurg__title { margin: 0; padding-right: 1.6rem; font-size: 1.02rem; font-weight: 700; color: var(--color-heading); }
.hurg__text { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--color-text); white-space: pre-line; }
.hurg__img { margin-top: 0.65rem; width: 100%; max-height: 200px; object-fit: cover; border-radius: 6px; }
.hurg__meta { margin: 0.55rem 0 0; font-size: 0.72rem; color: var(--color-muted); }
.hurg__more { display: inline-block; margin-top: 0.4rem; font-size: 0.76rem; font-weight: 600; }

/* A reader who asked for less motion still gets the banner, just without the drop. */
@media (prefers-reduced-motion: reduce) {
  .hurg, .hurg__box { transition: none; }
  .hurg__box { transform: none; }
}

/* Announcements */
.hann-list { list-style: none; margin: 0; padding: 0; }
.hann { display: flex; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--color-border); align-items: flex-start; }
.hann:last-child { border-bottom: none; }
.hann__img, .hann-thumb { width: 92px; height: 68px; object-fit: cover; border-radius: var(--radius-sm); flex: none; }
.hann-thumb { margin-top: 0.5rem; }
.hann__body { flex: 1; min-width: 0; }
.hann__tags { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.hann__title { margin: 0; font-weight: 700; color: var(--color-heading); }
.hann__text { margin: 0.2rem 0; color: var(--color-text); }
.hann__meta { margin: 0; font-size: 0.78rem; }
.hann__actions { display: flex; gap: 0.35rem; flex: none; align-items: center; }

.hann-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.hann-card { border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; background: var(--color-surface); }
.hann-card--urgent { border-color: #f0b8b0; }
.hann-card--high { border-color: #f3ddcb; }
.hann-card__img { width: 100%; height: 150px; object-fit: cover; display: block; }
.hann-card__body { padding: 0.9rem 1rem 1.1rem; }
.hann-card__body h3 { margin: 0.4rem 0 0.3rem; font-size: 1.05rem; }
.hann-card__body p { margin: 0; color: var(--color-text); }
.hann-card__when { margin-top: 0.4rem !important; font-size: 0.8rem; }

/* OPD questions */
.hqna__item { padding: 0.85rem 0; border-bottom: 1px solid var(--color-border); }
.hqna__item:last-child { border-bottom: none; }
.hqna__q { margin: 0; font-weight: 600; color: var(--color-heading); }
.hqna__a { margin: 0.4rem 0 0; padding: 0.55rem 0.75rem; background: var(--color-success-50); border-radius: var(--radius-sm); color: var(--color-heading); }
.hqna__meta { margin: 0.25rem 0 0; font-size: 0.78rem; }
.hqna__actions { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.55rem; flex-wrap: wrap; }
.hqna__form { display: flex; gap: 0.4rem; flex: 1 1 320px; }
.hqna__form input { flex: 1; padding: 0.5rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; }

/* ── Message inbox (portal) ───────────────────────────────── */
/* A thread per row, collapsed to its last line. Reception scans for who is
   still waiting, so that state is a pill and a left edge, not a subtlety. */
.hmsg-list { list-style: none; margin: 0; padding: 0; }
.hmsg { border-bottom: 1px solid var(--color-border); }
.hmsg:last-child { border-bottom: none; }
.hmsg > details > summary { list-style: none; cursor: pointer; }
.hmsg > details > summary::-webkit-details-marker { display: none; }
.hmsg__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 0.6rem; border-left: 3px solid transparent; flex-wrap: wrap; }
.hmsg__head:hover { background: var(--color-fill); }
.hmsg.is-waiting .hmsg__head { border-left-color: #e0223a; }
.hmsg__who { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1 1 240px; }
.hmsg__name { font-weight: 600; color: var(--color-heading); }
.hmsg__last { font-size: 0.83rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hmsg__meta { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; flex: none; }
.hmsg__body { padding: 0.2rem 0.6rem 1rem; }
.hmsg__contact { margin: 0 0 0.7rem; font-size: 0.82rem; }
/* The conversation itself: theirs on the left, ours indented and tinted, so
   the shape of the exchange is readable before a word of it is. */
.hmsg__thread { list-style: none; margin: 0 0 0.85rem; padding: 0; display: grid; gap: 0.5rem; }
.hmsg__turn { padding: 0.6rem 0.8rem; border-radius: 10px; background: var(--color-fill); max-width: 46rem; }
.hmsg__turn--us { background: var(--color-primary-light); margin-left: 1.5rem; }
.hmsg__text { margin: 0; color: var(--color-heading); white-space: pre-wrap; overflow-wrap: anywhere; }
.hmsg__when { margin: 0.3rem 0 0; font-size: 0.74rem; }
.hmsg__actions { display: flex; gap: 0.5rem; align-items: flex-start; flex-wrap: wrap; }
.hmsg__reply { display: flex; gap: 0.4rem; align-items: flex-start; flex: 1 1 340px; }
.hmsg__reply textarea { flex: 1; min-width: 0; padding: 0.5rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; resize: vertical; }
.hask { display: flex; gap: 0.5rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.hask input { flex: 1 1 260px; padding: 0.65rem 0.85rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; }

/* Super Admin hospital forms */
.hosp-create { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.hosp-create input { flex: 1 1 200px; padding: 0.6rem 0.8rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; }
.hosp-slug { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.hosp-slug__prefix { color: var(--color-muted); font-size: 0.92rem; }
.hosp-slug input { flex: 1 1 220px; padding: 0.55rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; }
.staff-form { margin-bottom: 1.25rem; }
.kebab__form--inline { display: flex; gap: 0.3rem; padding: 0.3rem 0.5rem; }
.kebab__form--inline input { flex: 1; min-width: 0; padding: 0.35rem 0.5rem; border: 1px solid var(--color-border); border-radius: 6px; font: inherit; font-size: 0.85rem; }

/* Logo / cover management */
.hbrand { display: grid; grid-template-columns: 200px 1fr; gap: 1.5rem; align-items: start; }
.hbrand__item { display: flex; flex-direction: column; gap: 0.5rem; }
.hbrand__preview { border: 1px dashed var(--color-border); border-radius: var(--radius-sm); background: var(--color-fill); display: grid; place-items: center; overflow: hidden; }
.hbrand__preview--logo { width: 140px; height: 140px; }
.hbrand__preview--cover { width: 100%; height: 140px; }
.hbrand__preview img { width: 100%; height: 100%; object-fit: cover; }
.hbrand__form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.hbrand__form input[type="file"] { font-size: 0.85rem; max-width: 100%; }

/* QR page */
.hqr { display: grid; grid-template-columns: 300px 1fr; gap: 1.75rem; align-items: start; }
.hqr__preview { text-align: center; }
.hqr__img { width: 100%; max-width: 260px; border: 1px solid var(--color-border); border-radius: var(--radius); background: #fff; }
.hqr__url { margin: 0.5rem 0 0; font-weight: 700; color: var(--color-heading); word-break: break-all; }
.hqr__poster { margin-bottom: 1rem; }
.hqr__poster-canvas { width: 100%; max-width: 320px; border: 1px solid var(--color-border); border-radius: var(--radius); }
.hqr__btns { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; }

/* Public hospital listings */
.hlist { display: grid; gap: 0.85rem; }
.hcard { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.15rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: inherit; transition: border-color 0.18s var(--ease), transform 0.18s var(--ease); }
.hcard:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.hcard__logo { display: inline-grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 14px; background: var(--color-fill); overflow: hidden; }
.hcard__logo img { width: 100%; height: 100%; object-fit: cover; }
.hcard__logo svg { width: 26px; height: 26px; color: var(--color-primary); }
.hcard__body { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; min-width: 0; }
.hcard__name { font-family: var(--font-head); font-weight: 700; color: var(--color-heading); font-size: 1.05rem; }
.hcard__addr { color: var(--color-muted); font-size: 0.88rem; }
.hcard__nums { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.15rem; }
.hcard__go svg { width: 20px; height: 20px; color: var(--color-primary); }

/* Public hospital page */
.hpub__hero { position: relative; }
.hpub__cover { height: 240px; background: var(--grad-dark); overflow: hidden; }
.hpub__cover img { width: 100%; height: 100%; object-fit: cover; }
.hpub__id { display: flex; align-items: flex-end; gap: 1.25rem; margin-top: -56px; padding-bottom: 1.5rem; flex-wrap: wrap; }
.hpub__logo { display: inline-grid; place-items: center; width: 112px; height: 112px; flex: none; border-radius: 24px; background: var(--color-surface); border: 4px solid var(--color-surface); box-shadow: var(--shadow); overflow: hidden; }
.hpub__logo img { width: 100%; height: 100%; object-fit: cover; }
.hpub__logo svg { width: 44px; height: 44px; color: var(--color-primary); }
.hpub__idtext { flex: 1; min-width: 220px; }
.hpub__name { margin: 0 0 0.15rem; font-size: 1.9rem; }
.hpub__tagline { margin: 0 0 0.35rem; color: var(--color-text); }
.hpub__meta { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0; color: var(--color-muted); font-size: 0.9rem; }
.hpub__meta span { display: inline-flex; align-items: center; gap: 0.3rem; }
.hpub__meta svg { width: 15px; height: 15px; }
.hpub__actions { display: flex; gap: 0.45rem; flex-wrap: wrap; padding-bottom: 0.25rem; }

.hpub__body { padding-bottom: 4rem; }
.hpub__section { padding: 1.75rem 0; border-top: 1px solid var(--color-border); }
.hpub__section:first-child { border-top: none; padding-top: 0.5rem; }
.hpub__sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.hpub__sechead h2 { margin: 0; font-size: 1.25rem; }
.hpub__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; }
.hpub__stat { background: var(--color-surface); padding: 1rem; text-align: center; }
.hpub__stat strong { display: block; font-family: var(--font-head); font-size: 1.9rem; line-height: 1; color: var(--color-heading); }
.hpub__stat span { font-size: 0.82rem; color: var(--color-muted); }
.hpub__stat--green strong { color: var(--color-success); }
.hpub__stat--red strong { color: #c0392b; }
.hpub__stat--amber strong { color: var(--color-warn); }

.hpub__notifs { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.75rem 1rem; background: var(--color-surface); }
.hpub__notifs summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; font-weight: 700; color: var(--color-heading); list-style: none; }
.hpub__notifs summary::-webkit-details-marker { display: none; }
.hpub__notifs summary svg { width: 17px; height: 17px; vertical-align: -3px; color: var(--color-primary); }
.hpub__about { color: var(--color-text); line-height: 1.7; margin: 0; }
.hpub__socials { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.85rem 0; }

.hdoc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.hdoc { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1rem 1.1rem 1.15rem; background: var(--color-surface); display: flex; flex-direction: column; gap: 0.6rem; }
.hdoc__top { display: flex; gap: 0.75rem; align-items: center; }
.hdoc__photo { display: inline-grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 50%; background: var(--color-fill); overflow: hidden; }
.hdoc__photo img { width: 100%; height: 100%; object-fit: cover; }
.hdoc__photo svg { width: 26px; height: 26px; color: var(--color-primary); }
.hdoc__id { min-width: 0; }
.hdoc__name { margin: 0; font-weight: 700; color: var(--color-heading); }
.hdoc__spec { margin: 0; font-size: 0.86rem; color: var(--color-primary-dark); font-weight: 600; }
.hdoc__dept { margin: 0; font-size: 0.8rem; }
.hdoc__status { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.hdoc__facts { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.75rem; margin: 0; font-size: 0.88rem; }
.hdoc__facts dt { color: var(--color-muted); }
.hdoc__facts dd { margin: 0; color: var(--color-heading); font-weight: 600; }
.hdoc__note { margin: 0; padding: 0.45rem 0.65rem; background: var(--color-fill); border-radius: var(--radius-sm); font-size: 0.86rem; color: var(--color-text); }
.hdoc__replace { margin: 0; font-size: 0.86rem; color: var(--brand-800); }
.hdoc__weekbtn { align-self: flex-start; background: none; border: none; padding: 0; font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--color-primary); text-decoration: underline; cursor: pointer; }

.hreview-form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 560px; margin-bottom: 1.25rem; }
.hreview-form__row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.hreview-form select, .hreview-form input, .hreview-form textarea { padding: 0.55rem 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; }
.hreview-form input { flex: 1 1 200px; }
.hreviews { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.85rem; }
.hreview { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.8rem 0.95rem; background: var(--color-surface); }
.hreview__head { margin: 0; display: flex; justify-content: space-between; gap: 0.5rem; }
.hreview__stars { color: var(--color-warn); font-weight: 700; }
.hreview__text { margin: 0.35rem 0; color: var(--color-text); }
.hreview__when { margin: 0; font-size: 0.78rem; }

/* Floating "Ask Receptionist" */
.hask-float { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 60; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.1rem; border-radius: 999px; background: #25d366; color: #fff; font-weight: 700; box-shadow: 0 12px 30px rgba(37, 211, 102, 0.35); }
.hask-float:hover { color: #fff; transform: translateY(-2px); }
.hask-float svg { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .hqr, .hbrand { grid-template-columns: 1fr; }
  .hweek-row { grid-template-columns: 1fr; gap: 0.5rem; }
  .hpub__cover { height: 160px; }
  .hpub__id { margin-top: -40px; }
  .hask-float span { display: none; }
  .hask-float { padding: 0.85rem; }
}

/* ── Hospital Portal — UI corrections ─────────────────────── */

/* File pickers. The bare <input type="file"> rendered as a raw OS control that
   collided with the button beside it; this wraps it in a proper affordance and
   hides the native input without hiding it from the keyboard. */
.filepick { display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.filepick input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.filepick__label { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.9rem; border: 1px dashed var(--color-grey-300); border-radius: 999px; background: var(--color-fill); color: var(--color-heading); font-size: 0.86rem; font-weight: 600; transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background 0.18s var(--ease); }
.filepick:hover .filepick__label { border-color: var(--color-primary); color: var(--color-primary-dark); background: var(--color-primary-light); }
.filepick input[type="file"]:focus-visible + .filepick__label { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.hbrand__form { align-items: center; gap: 0.6rem; }
.hbrand__form.is-auto .filepick__label::after { content: ''; }
.hbrand__form.is-uploading .filepick__label { opacity: 0.6; }

/* Daily verification: an unverified day is a warning, so it reads as one —
   red, ruled on all four sides and inset from the panels around it. */
.hverify { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.hverify--ok { border-left: 4px solid var(--color-success) !important; }
.hverify--warn {
  border: 1.5px solid #e3a79b !important;
  border-left: 5px solid #c0392b !important;
  background: #fdf3f1 !important;
  border-radius: var(--radius-sm) !important;
  margin: 0.85rem 0 !important;
  padding: 1rem 1.15rem !important;
  box-shadow: 0 2px 10px rgba(192, 57, 43, 0.08) !important;
}
.hverify--warn .hverify__body strong { color: #a5281a; display: inline-flex; align-items: center; gap: 0.45rem; }
.hverify--warn .hverify__body strong::before { content: '!'; display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; background: #c0392b; color: #fff; font-size: 0.78rem; font-weight: 800; }
.hverify__body p { margin: 0.25rem 0 0; }

/* Inline forms inside a kebab menu (rename a department, reset a password).
   The menu is only as wide as its buttons, so the text field had nowhere to go
   and collapsed to nothing. */
.kebab__menu { min-width: 190px; }
.kebab__menu:has(.kebab__form--inline) { min-width: 260px; }
.kebab__menu:has(.svcpick--compact) { min-width: 285px; }
.kebab__form--inline { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.5rem; margin: 0.1rem 0; background: var(--color-fill); border-radius: 8px; }
.kebab__form--inline input { width: 100%; min-width: 0; padding: 0.45rem 0.6rem; border: 1px solid var(--color-border); border-radius: 6px; font: inherit; font-size: 0.86rem; background: var(--color-surface); }
.kebab__form--inline input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.kebab__form--inline .kebab__item { text-align: center; background: var(--color-primary); color: #fff; font-weight: 600; padding: 0.4rem 0.6rem; }
.kebab__form--inline .kebab__item:hover { background: var(--color-primary-dark); }

/* "What patients see": switches stack as readable rows instead of wrapping into
   a row of pills that gave no clue which label belonged to which box. */
.hsettings { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.hsettings .choice { display: flex; align-items: flex-start; gap: 0.65rem; margin: 0; padding: 0.7rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; transition: border-color 0.18s var(--ease), background 0.18s var(--ease); }
.hsettings .choice:hover { border-color: var(--color-primary); background: var(--color-fill); }
.hsettings .choice input { margin-top: 0.15rem; flex: none; }
.hsettings .choice span { display: block; color: var(--color-heading); font-weight: 600; font-size: 0.92rem; }
.hsettings .choice small { display: block; margin-top: 0.15rem; color: var(--color-muted); font-weight: 400; font-size: 0.82rem; }

/* Timing-change wording, so the colour is never the only signal. */
.hweek__tag { margin-left: 0.5rem; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; background: #fff4cc; color: #8a6100; white-space: nowrap; }
.hweek__row--leave .hweek__tag { background: #fdecea; color: #c0392b; }
.hweek__row--today .hweek__tag { background: var(--color-success-50); color: var(--color-success-800); }
.hweek__hours { display: inline-flex; align-items: center; }

/* Small note under a panel heading (e.g. "this only changes today"). */
.hpanel-note { margin: -0.35rem 0 0.9rem; font-size: 0.84rem; color: var(--color-muted); }

/* ── Public hospital page — full-width layout ─────────────── */
/* Inside the app shell the page already sits in a padded main column, so its
   own centred container was stacking gutter on gutter and squeezing the
   content into a narrow ribbon. In the shell it goes edge to edge and lets the
   shell own the spacing; standalone it keeps a wide, modest gutter. */
.hpub__hero,
.hpub__body { width: 100%; }
.hpub .container { max-width: 1480px; padding-inline: 2rem; }
.hpub--shell { margin: -1.75rem -2rem; }
.hpub--shell .container { max-width: none; padding-inline: 1.75rem; }
.hpub--shell .hpub__cover { border-radius: 0; }

/* Cover: shorter, so the fold reaches actual content. */
.hpub__cover { height: 200px; }
.hpub__cover:empty { background: var(--grad-dark); }
.hpub__id { margin-top: -44px; padding-bottom: 1.1rem; gap: 1rem; }
.hpub__logo { width: 92px; height: 92px; border-radius: 20px; }
.hpub__name { font-size: 1.65rem; }

/* Sections: tighter rhythm, and the whole page reads as one surface rather
   than a stack of floating cards separated by dead space. */
.hpub__section { padding: 1.35rem 0; }
.hpub__sechead { margin-bottom: 0.75rem; }
.hpub__sechead h2 { font-size: 1.1rem; }
.hpub__stats { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.hpub__stat { padding: 0.75rem 0.5rem; }
.hpub__stat strong { font-size: 1.6rem; }

/* Doctors: denser grid, and a card whose parts line up rather than drifting. */
.hdoc-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.75rem; }
.hdoc { padding: 0.85rem 0.9rem 0.95rem; gap: 0.5rem; border-radius: var(--radius-sm); }
.hdoc__top { gap: 0.6rem; align-items: flex-start; }
.hdoc__photo { width: 48px; height: 48px; }
.hdoc__name { font-size: 0.98rem; line-height: 1.25; }
.hdoc__spec { font-size: 0.82rem; margin-top: 0.1rem; }
.hdoc__dept { font-size: 0.76rem; margin-top: 0.05rem; }
.hdoc__facts { gap: 0.15rem 0.6rem; font-size: 0.84rem; padding-top: 0.45rem; border-top: 1px solid var(--color-border); }
.hdoc__note { font-size: 0.82rem; padding: 0.4rem 0.55rem; }
.hdoc__note--change { background: #fff9e6; color: #7a5800; }
.hdoc__replace { font-size: 0.82rem; padding: 0.4rem 0.55rem; background: var(--brand-50); border-radius: var(--radius-sm); }
.hdoc__weekbtn { margin-top: 0.1rem; font-size: 0.84rem; }

/* Departments: compact chips-with-numbers rather than tall cards. */
.hpub .hdept-grid { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.6rem; }
.hpub .hdept-card { padding: 0.7rem 0.85rem; gap: 0.4rem; }
.hpub .hdept-card__name { font-size: 0.95rem; }
.hpub .hdept-card.is-active { border-color: var(--color-primary); background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--color-primary); }

/* Two-column band for About + Contact, collapsing early. */

/* Location map. */
.hmap { position: relative; margin: 0.75rem 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-fill); }
.hmap iframe { display: block; width: 100%; height: 240px; border: 0; }
.hpub__maplinks { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0; }

@media (max-width: 1100px) {
}
/* 860px, not 900: this must flip on exactly the breakpoint where
   .appshell__main drops to 1.25rem padding, or the negative margin stops
   cancelling it and the page sits misaligned in the gap between the two. */
@media (max-width: 860px) {
  .hpub--shell { margin: -1.25rem; }
  .hpub--shell .container,
  .hpub .container { padding-inline: 1.1rem; }
  .hpub__cover { height: 140px; }
  .hpub__id { margin-top: -34px; }
  .hpub__logo { width: 72px; height: 72px; }
}

/* ── Public hospital page — layout corrections ────────────── */

/* Identity strip. The logo was floating half over the cover's left edge with
   the name crowded beside it; it now sits in a proper row with the cover, and
   the actions stay pinned right. */
.hpub__id { align-items: center; gap: 1.1rem; padding-bottom: 1.25rem; }
.hpub__logo { width: 88px; height: 88px; border-radius: 18px; border: 3px solid var(--color-surface); box-shadow: 0 6px 20px rgba(16, 40, 60, 0.14); }
.hpub__tagline { font-size: 0.94rem; }
.hpub__meta { gap: 0.9rem; font-size: 0.86rem; }
.hpub__actions { margin-left: auto; }

/* Sparse sections shouldn't leave a card marooned in an empty row. Cards keep a
   sensible size and the track collapses when there is only one of them. */
.hpub .hdoc-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 300px)); justify-content: start; }
.hpub .hdept-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 240px)); justify-content: start; }
.hpub .hann-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 320px)); justify-content: start; }

/* Announcement artwork: a fixed frame, so a tall or oddly-shaped upload can't
   stretch its card out of line with the others. */
.hann-card__img { height: 160px; object-fit: cover; background: var(--color-fill); }

/* Doctor card internals. */
.hdoc__facts dt { white-space: nowrap; }
.hdoc__facts dd { overflow-wrap: anywhere; }

/* About / Contact / Map band: three areas that each get the room they need,
   rather than two columns where a one-line description left half the row bare. */
.hpub__about-band { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.25rem 2rem; align-items: start; }
.hpub__about-text { min-width: 0; }
.hpub__contact { min-width: 0; }
.hpub__map { grid-column: 1 / -1; }
.hpub__about { line-height: 1.65; }
.hpub__socials { margin-top: 1rem; }

/* Contact rows: label and value on one line, aligned down the column. */
.hcontact { margin: 0; display: grid; gap: 0.1rem; }
.hcontact__row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 0.5rem 0.9rem; align-items: baseline; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border); }
.hcontact__row:last-child { border-bottom: none; }
.hcontact dt { margin: 0; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); }
.hcontact dd { margin: 0; color: var(--color-heading); font-weight: 600; font-size: 0.92rem; overflow-wrap: anywhere; }
.hcontact__row--urgent dd a { color: #c0392b; }

/* ── Message the hospital (public) ────────────────────────── */
/* The reader's own messages sit right and tinted, the hospital's left and
   plain — the same shape as any chat, so no one has to be told which is which. */
.hmsgpub { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.55rem; }
.hmsgpub__turn { padding: 0.65rem 0.85rem; border-radius: 12px; background: var(--color-fill); max-width: min(42rem, 88%); }
.hmsgpub__turn--you { background: var(--color-primary-light); margin-left: auto; }
.hmsgpub__text { margin: 0; color: var(--color-heading); white-space: pre-wrap; overflow-wrap: anywhere; }
.hmsgpub__when { margin: 0.3rem 0 0; font-size: 0.74rem; }
.hmsgpub__pending { margin: 0 0 0.9rem; font-size: 0.83rem; }
.hmsgpub__signin { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.hmsgpub__form { display: grid; gap: 0.6rem; max-width: 42rem; }
.hmsgpub__form textarea { width: 100%; padding: 0.65rem 0.8rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; resize: vertical; background: var(--color-surface); }
.hmsgpub__form textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.hmsgpub__send { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.hmsgpub__send .muted { font-size: 0.8rem; flex: 1 1 260px; }

/* Map: shorter, and the links sit under it rather than over the tiles. */
.hmap iframe { height: 220px; }
.hpub__maplinks { margin-top: 0.5rem; }

/* Review form: inputs share a row and the button is button-sized. */
.hreview-form { max-width: 620px; }
.hreview-form__row { gap: 0.5rem; }
.hreview-form select { flex: 0 0 130px; }
.hreview-form .btn { align-self: flex-start; }

/* Ask-about-OPD row lines up with the section, not the full width. */
.hask { max-width: 720px; }

@media (max-width: 1000px) {
  .hpub__about-band { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .hpub__id { flex-wrap: wrap; }
  .hpub__actions { margin-left: 0; width: 100%; }
  .hcontact__row { grid-template-columns: 1fr; gap: 0.15rem; }
}

/* ── Public hospital page — identity strip ────────────────── */
/* The whole row used to be pulled up over the cover, which put the hospital
   name and the action buttons on top of the photo: dark text on a picture,
   unreadable, and the buttons covering whatever the photo showed. Only the
   logo rides up now; everything else sits below the cover on a clean surface. */
.hpub__id {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  margin-top: 0;
  padding-top: 0.85rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--color-border);
}
.hpub__logo {
  /* Half the logo overlaps the cover; the rest sits on the surface below. */
  margin-top: -46px;
  align-self: flex-start;
  width: 92px;
  height: 92px;
  border-radius: 18px;
  border: 3px solid var(--color-surface);
  box-shadow: 0 6px 20px rgba(16, 40, 60, 0.14);
  background: var(--color-surface);
}
.hpub__idtext { flex: 1 1 260px; min-width: 0; padding-top: 0.15rem; }
.hpub__name { margin: 0 0 0.1rem; font-size: 1.55rem; line-height: 1.2; }
.hpub__tagline { margin: 0 0 0.3rem; color: var(--color-muted); font-size: 0.92rem; }
.hpub__meta { gap: 0.35rem 1rem; font-size: 0.85rem; }
.hpub__actions { margin-left: auto; align-self: center; padding-bottom: 0; }

@media (max-width: 860px) {
  .hpub__logo { margin-top: -34px; width: 72px; height: 72px; }
  .hpub__actions { margin-left: 0; }
}

/* Larger hospital logo — it sits in the gap the cover leaves above the first
   section, so a bigger mark fills that space instead of leaving it bare. */
.hpub__logo { width: 132px; height: 132px; border-radius: 22px; margin-top: -68px; border-width: 4px; }
.hpub__idtext { padding-top: 0.35rem; }
@media (max-width: 860px) {
  .hpub__logo { width: 92px; height: 92px; border-radius: 18px; margin-top: -44px; }
}

/* ════════════════════════════════════════════════════════════
   Public hospital page (hpx) — laid out to the client's design.
   Top band: cover · identity · QR · live updates. Then OPD tiles,
   then the availability table beside a summary sidebar.
   ════════════════════════════════════════════════════════════ */

.hpx { background: #f4f7fc; padding-bottom: 3rem; }
.hpx .container { max-width: 1560px; padding-inline: 1.25rem; }
/* Inside the app shell the main column already pads; cancel it so the page
   uses the full width instead of stacking gutter on gutter. */
.hpx--shell { margin: -1.75rem -2rem; }
.hpx--shell .container { max-width: none; }

/* ── Shared card surface ─────────────────────────────────── */
.hpx__ident, .hpx__qr, .hpx__live, .hpx__tile, .hpx__card, .hpx__main {
  background: var(--color-surface);
  border: 1px solid #e4ebf5;
  border-radius: 14px;
}

/* ── Top band ────────────────────────────────────────────── */
.hpx__top {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1.35fr) minmax(190px, 220px) minmax(230px, 290px);
  gap: 0.85rem;
  padding-top: 1.1rem;
  padding-bottom: 0.85rem;
  align-items: stretch;
}
.hpx__cover { border-radius: 14px; overflow: hidden; background: var(--grad-dark); min-height: 210px; }
.hpx__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

.hpx__ident { padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.hpx__identhead { display: flex; align-items: center; gap: 0.75rem; }
.hpx__logo { display: inline-grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 12px; background: var(--color-fill); overflow: hidden; }
.hpx__logo img { width: 100%; height: 100%; object-fit: cover; }
.hpx__logo svg { width: 24px; height: 24px; color: var(--color-primary); }
.hpx__name { margin: 0; font-size: 1.3rem; line-height: 1.2; }
.hpx__tagline { margin: 0.1rem 0 0; color: var(--color-muted); font-size: 0.85rem; }

.hpx__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.hpx__facts li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.88rem; color: var(--color-text); }
.hpx__facticon { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 6px; background: var(--brand-50); color: var(--color-primary); }
.hpx__facticon svg { width: 13px; height: 13px; }
.hpx__facticon--red { background: #fdecea; color: #c0392b; }

.hpx__strip { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-top: auto; padding-top: 0.7rem; border-top: 1px solid var(--color-border); }
.hpx__stripitem { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.86rem; font-weight: 600; color: var(--color-heading); }
.hpx__striplabel { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); }
.hpx__stripactions { margin-left: auto; display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* Status dots — one vocabulary across live updates, announcements, summary. */
.hpx__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; background: var(--color-primary); }
.hpx__dot--green, .hpx__dot--available { background: #1a9a63; }
.hpx__dot--amber, .hpx__dot--leave { background: #e0a11f; }
.hpx__dot--red, .hpx__dot--late { background: #e0223a; }
.hpx__dot--blue { background: #2f6fed; }
.hpx__dot--purple { background: #7b52d6; }
.hpx__dot--other { background: #9db0c8; }

/* QR card — the page's only code. */
.hpx__qr { padding: 0.85rem 0.9rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.hpx__qrtitle { margin: 0; font-size: 0.86rem; font-weight: 700; color: var(--color-heading); display: inline-flex; align-items: center; gap: 0.35rem; }
.hpx__qrtitle svg { width: 15px; height: 15px; color: var(--color-primary); }
.hpx__qrsub { margin: 0; font-size: 0.72rem; color: var(--color-muted); }
.hpx__qrimg { width: 100%; max-width: 148px; border-radius: 10px; background: #fff; }
.hpx__qrbtns { display: flex; gap: 0.35rem; width: 100%; }
.hpx__qrbtns .btn { flex: 1; padding-inline: 0.5rem; font-size: 0.78rem; }
.hpx__qrbtns .btn svg { width: 13px; height: 13px; }
.hpx__qrcopy { background: none; border: none; padding: 0; font: inherit; font-size: 0.75rem; color: var(--color-primary); cursor: pointer; text-decoration: underline; }

/* Live updates. */
.hpx__live { padding: 0.85rem 0.95rem; display: flex; flex-direction: column; min-width: 0; }
.hpx__livehead { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.6rem; }
.hpx__livettl { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 700; color: var(--color-heading); }
.hpx__livettl svg { width: 15px; height: 15px; color: #e0223a; }
.hpx__livecount { background: #fdecea; color: #c0392b; font-size: 0.68rem; font-weight: 700; padding: 0.12rem 0.45rem; border-radius: 999px; }
.hpx__livelist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; overflow-y: auto; max-height: 190px; }
.hpx__liveitem { display: flex; gap: 0.5rem; align-items: flex-start; }
.hpx__liveitem .hpx__dot { margin-top: 0.35rem; }
.hpx__livetext { margin: 0; font-size: 0.82rem; line-height: 1.35; color: var(--color-heading); }
.hpx__livetime { margin: 0.1rem 0 0; font-size: 0.72rem; color: var(--color-muted); }
.hpx__liveempty { margin: 0; font-size: 0.84rem; }

/* ── OPD tiles ───────────────────────────────────────────── */
.hpx__tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.75rem; padding-bottom: 0.85rem; }
.hpx__tile { display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 0.9rem; }
.hpx__tileicon { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 11px; }
.hpx__tileicon svg { width: 19px; height: 19px; }
.hpx__tileicon--blue { background: #e7effd; color: #2f6fed; }
.hpx__tileicon--green { background: #e4f6ee; color: #1a9a63; }
.hpx__tileicon--amber { background: #fdf3e0; color: #b57b12; }
.hpx__tileicon--red { background: #fdecea; color: #c0392b; }
.hpx__tileicon--purple { background: #efe9fb; color: #7b52d6; }
.hpx__tilebody { display: flex; flex-direction: column; min-width: 0; }
.hpx__tilenum { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.hpx__tilenum--blue { color: #2f6fed; }
.hpx__tilenum--green { color: #1a9a63; }
.hpx__tilenum--amber { color: #b57b12; }
.hpx__tilenum--red { color: #c0392b; }
.hpx__tilenum--purple { color: #7b52d6; }
.hpx__tilecap { font-size: 0.82rem; font-weight: 600; color: var(--color-heading); }
.hpx__tilesub { font-size: 0.7rem; color: var(--color-muted); }

/* ── Body: table + sidebar ───────────────────────────────── */
.hpx__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 0.85rem; align-items: start; }
.hpx__main { padding: 1rem 1.1rem 1.2rem; min-width: 0; }
.hpx__mainhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.85rem; }
.hpx__h2 { margin: 0; font-size: 1.1rem; }
.hpx__sub { margin: 0.15rem 0 0; font-size: 0.82rem; }

.hpx__search { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; position: relative; }
.hpx__search input { width: min(320px, 52vw); padding: 0.5rem 0.7rem 0.5rem 2rem; border: 1px solid var(--color-border); border-radius: 999px; font: inherit; font-size: 0.86rem; background: var(--color-fill); }
.hpx__search input:focus { outline: none; border-color: var(--color-primary); background: #fff; box-shadow: 0 0 0 3px var(--color-primary-light); }
.hpx__searchic { position: absolute; left: 0.65rem; display: inline-flex; color: var(--color-muted); pointer-events: none; }
.hpx__searchic svg { width: 15px; height: 15px; }

/* Availability table. */
.hpx__table { overflow-x: auto; border: 1px solid var(--color-border); border-radius: 12px; }
.hpx__table table { width: 100%; border-collapse: collapse; min-width: 900px; }
.hpx__table thead th { text-align: left; padding: 0.6rem 0.7rem; background: #f7f9fd; border-bottom: 1px solid var(--color-border); font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); font-weight: 700; white-space: nowrap; }
.hpx__table tbody td { padding: 0.7rem; border-bottom: 1px solid #eef2f8; vertical-align: middle; font-size: 0.86rem; }
.hpx__row--green { box-shadow: inset 3px 0 0 #1a9a63; }
.hpx__row--amber { box-shadow: inset 3px 0 0 #e0a11f; }
.hpx__row--red { box-shadow: inset 3px 0 0 #e0223a; }
.hpx__row--blue { box-shadow: inset 3px 0 0 #2f6fed; }
.hpx__row--grey { box-shadow: inset 3px 0 0 #cdd6e4; }
.hpx__num { color: var(--color-muted); font-weight: 600; width: 34px; }
.hpx__empty { text-align: center; padding: 1.5rem 0.7rem !important; }

.hpx__doc { display: flex; align-items: center; gap: 0.6rem; min-width: 180px; }
.hpx__docimg { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; overflow: hidden; background: var(--color-fill); }
.hpx__docimg img { width: 100%; height: 100%; object-fit: cover; }
.hpx__docimg svg { width: 19px; height: 19px; color: var(--color-primary); }
.hpx__docid { display: flex; flex-direction: column; min-width: 0; }
.hpx__docname { font-weight: 700; color: var(--color-heading); }
.hpx__docqual { font-size: 0.75rem; color: var(--color-muted); }
.hpx__weeklink { align-self: flex-start; margin-top: 0.15rem; background: none; border: none; padding: 0; font: inherit; font-size: 0.74rem; font-weight: 600; color: var(--color-primary); cursor: pointer; display: inline-flex; align-items: center; gap: 0.25rem; }
.hpx__weeklink:hover { text-decoration: underline; }
.hpx__weeklink svg { width: 12px; height: 12px; }
.hpx__spec { font-weight: 600; color: var(--color-heading); }
.hpx__dept { font-size: 0.75rem; }
.hpx__room { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 6px; background: var(--color-fill); font-weight: 600; color: var(--color-heading); font-size: 0.8rem; }

.hpx__timing { display: inline-flex; flex-direction: column; gap: 0.1rem; padding: 0.4rem 0.6rem; border-radius: 8px; min-width: 150px; }
.hpx__timing--green { background: #e4f6ee; }
.hpx__timing--amber { background: #fdf3e0; }
.hpx__timing--red { background: #fdecea; }
.hpx__timing--blue { background: #e7effd; }
.hpx__timing--grey { background: var(--color-fill); }
.hpx__time { font-weight: 700; color: var(--color-heading); font-size: 0.84rem; }
.hpx__timelabel { font-size: 0.72rem; color: var(--color-muted); }
.hpx__updated { font-size: 0.7rem; font-weight: 700; color: #8a6100; }

.hpx__status { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.24rem 0.6rem; border-radius: 999px; font-size: 0.76rem; font-weight: 700; white-space: nowrap; }
.hpx__status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hpx__status--green { background: #e4f6ee; color: #11724f; }
.hpx__status--amber { background: #fdf3e0; color: #8a5a10; }
.hpx__status--red { background: #fdecea; color: #b3261e; }
.hpx__status--blue { background: #e7effd; color: #1a4db4; }
.hpx__status--grey { background: var(--color-fill); color: var(--color-muted); }
.hpx__by { font-size: 0.78rem; color: var(--color-text); white-space: nowrap; }
.hpx__verified { font-size: 0.68rem; font-weight: 700; color: #1a9a63; }
.hpx__act { text-align: right; white-space: nowrap; }

/* Replacement + note rows sit under their doctor, visibly attached to it. */
.hpx__replrow td, .hpx__noterow td { border-bottom: 1px solid #eef2f8; padding-top: 0 !important; }
.hpx__repl { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.55rem 0.7rem; background: #fff9e9; border: 1px solid #f0e0b8; border-radius: 8px; font-size: 0.82rem; }
.hpx__replicon { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: #f7e9c4; color: #8a6100; }
.hpx__replicon svg { width: 14px; height: 14px; }
.hpx__repllabel { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: #8a6100; font-weight: 700; }
.hpx__replwhen { margin-left: auto; color: #6b5520; font-weight: 600; }
.hpx__note { margin: 0 0 0.5rem; padding: 0.45rem 0.7rem; background: var(--color-fill); border-radius: 8px; font-size: 0.82rem; color: var(--color-text); }
.hpx__hidden td { padding: 0 !important; border: 0 !important; }
.hpx__count { margin: 0.7rem 0 0; font-size: 0.8rem; }

/* ── Sidebar ─────────────────────────────────────────────── */
.hpx__side { display: grid; gap: 0.85rem; position: sticky; top: 1rem; }
.hpx__card { padding: 0.9rem 1rem 1rem; }
.hpx__cardttl { margin: 0 0 0.7rem; font-size: 0.88rem; font-weight: 700; color: var(--color-heading); display: flex; align-items: center; gap: 0.4rem; }
.hpx__cardttl svg { width: 15px; height: 15px; color: var(--color-primary); }

.hpx__summary { display: flex; align-items: center; gap: 0.9rem; }
.hpx__ring { position: relative; width: 96px; height: 96px; flex: none; }
.hpx__ring svg { width: 100%; height: 100%; display: block; }
.hpx__ringbg { fill: none; stroke: #eef2f8; stroke-width: 12; }
.hpx__ringmid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.hpx__ringnum { display: block; font-family: var(--font-head); font-size: 1.3rem; font-weight: 700; color: var(--color-heading); line-height: 1; }
.hpx__ringcap { display: block; font-size: 0.66rem; color: var(--color-muted); }
.hpx__legend { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; gap: 0.32rem; }
.hpx__legend li { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--color-text); }
.hpx__legend strong { margin-left: auto; color: var(--color-heading); }

.hpx__annlist, .hpx__svclist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.hpx__ann { display: flex; gap: 0.5rem; align-items: flex-start; padding-bottom: 0.7rem; border-bottom: 1px solid #eef2f8; }
.hpx__ann:last-child { border-bottom: none; padding-bottom: 0; }
.hpx__ann .hpx__dot { margin-top: 0.35rem; }
.hpx__anntitle { margin: 0; font-size: 0.84rem; font-weight: 700; color: var(--color-heading); }
.hpx__annurg { display: inline-block; margin-right: 0.35rem; padding: 0.05rem 0.36rem; border-radius: 999px; background: #fdecea; color: #a8201a; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; vertical-align: 1px; }
.hpx__anntext { margin: 0.1rem 0 0; font-size: 0.78rem; color: var(--color-text); }
.hpx__annmeta { margin: 0.15rem 0 0; font-size: 0.7rem; color: var(--color-muted); }
.hpx__annimg { margin-top: 0.4rem; width: 100%; height: 92px; object-fit: cover; border-radius: 8px; }
/* A service wears the drawing and colour config/services.js gave it, on the
   same white-on-tint disc the department cards use — smaller, because this is
   a sidebar list rather than a grid. The fallback pair keeps a row readable if
   a tint class ever goes missing. */
.hpx__svc { --dept-soft: var(--color-fill); --dept-ink: var(--color-primary); display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.84rem; color: var(--color-heading); font-weight: 600; }
.hpx__svcart { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--dept-soft); }
.hpx__svcsvg { width: 21px; height: 21px; }
.hpx__svcbody { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.hpx__svcdesc { font-size: 0.76rem; font-weight: 400; line-height: 1.45; color: var(--color-muted); }

.hpx__card--ask { background: #f2fbf5; border-color: #cdebd8; }
.hpx__asktext { margin: 0 0 0.7rem; font-size: 0.8rem; }
.hpx__chatnow { display: flex; align-items: center; justify-content: center; gap: 0.45rem; padding: 0.6rem; border-radius: 10px; background: #25d366; color: #fff; font-weight: 700; font-size: 0.86rem; }
.hpx__chatnow:hover { color: #fff; background: #1fbb59; }
.hpx__chatnow svg { width: 17px; height: 17px; }

/* ── Lower sections keep the card surface ────────────────── */
.hpx__section { background: var(--color-surface); border: 1px solid #e4ebf5; border-radius: 14px; padding: 1.1rem 1.2rem 1.3rem; margin-top: 0.85rem; }

@media (max-width: 1240px) {
  .hpx__top { grid-template-columns: minmax(0, 1fr) minmax(190px, 220px); }
  .hpx__cover { grid-column: 1 / -1; min-height: 170px; }
  .hpx__live { grid-column: 1 / -1; }
  .hpx__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .hpx__body { grid-template-columns: 1fr; }
  .hpx__side { position: static; }
}
@media (max-width: 860px) {
  .hpx--shell { margin: -1.25rem; }
  .hpx__top { grid-template-columns: 1fr; }
  .hpx__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hpx__search { flex-wrap: wrap; }
  .hpx__headtools { width: 100%; }
  .hpx__searchwrap { flex: 1 1 100%; }
  .hpx__search input { width: 100%; }
  .hpx__deptpick { flex: 1 1 100%; max-width: none; }
  .hpx__mainhead { align-items: stretch; }
  .hpx__strip { gap: 0.7rem; }
  .hpx__stripactions { margin-left: 0; width: 100%; }
}

/* ── Identity card: cover banner + overlapping logo ───────── */
/* The cover belongs to this card alone. It used to be a separate tile beside
   the details; now it is the card's own banner, clipped to its rounded corners,
   so it never reaches the QR or live-updates panels sitting to its right. */
.hpx__top { grid-template-columns: minmax(0, 1.55fr) minmax(190px, 220px) minmax(230px, 300px); }
.hpx__ident { padding: 0; overflow: hidden; }
.hpx__identcover { height: 180px; background: var(--grad-dark); overflow: hidden; }
.hpx__identcover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hpx__identhead { align-items: flex-end; gap: 0.9rem; padding: 0 1.15rem; }
/* The logo rides up over the banner, as it did before the table redesign. */
.hpx__logo {
  width: 118px; height: 118px; margin-top: -60px; flex: none;
  border-radius: 20px; border: 4px solid var(--color-surface);
  box-shadow: 0 8px 22px rgba(16, 40, 60, 0.16); background: var(--color-surface);
}
.hpx__logo svg { width: 46px; height: 46px; }
.hpx__identname { padding-bottom: 0.35rem; min-width: 0; }
.hpx__name { font-size: 1.45rem; }
.hpx__ident .hpx__facts { padding: 0.85rem 1.15rem 0; }
.hpx__ident .hpx__strip { margin: 0.85rem 1.15rem 0; padding: 0.75rem 0 1rem; }

@media (max-width: 1240px) {
  /* The cover travels with the card now, so the card takes the full row. */
  .hpx__top { grid-template-columns: minmax(0, 1fr) minmax(190px, 220px); }
  .hpx__ident { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .hpx__top { grid-template-columns: 1fr; }
  .hpx__identcover { height: 140px; }
  .hpx__logo { width: 92px; height: 92px; margin-top: -46px; border-radius: 16px; }
  .hpx__logo svg { width: 34px; height: 34px; }
  .hpx__name { font-size: 1.25rem; }
}

/* ── Identity card: two columns, and a QR that fills its card ─ */
/* The facts list is narrow, so the right half of the card sat empty. The
   at-a-glance strip and the actions move up into it instead of running as a
   row underneath. */
.hpx__identgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(210px, auto); gap: 1rem 1.5rem; padding: 0.9rem 1.15rem 1.1rem; align-items: start; }
.hpx__ident .hpx__facts { padding: 0; }
.hpx__identside { display: flex; flex-direction: column; gap: 0.85rem; padding-left: 1.5rem; border-left: 1px solid var(--color-border); }
/* Stacked here, not strung across the bottom of the card. */
.hpx__ident .hpx__strip { display: grid; gap: 0.6rem; margin: 0; padding: 0; border-top: none; }
.hpx__ident .hpx__stripitem { align-items: flex-start; gap: 0.5rem; }
.hpx__ident .hpx__stripitem .hpx__dot { margin-top: 0.42rem; }
.hpx__ident .hpx__stripactions { margin-left: 0; }
.hpx__ident .hpx__stripactions .btn { flex: 1; justify-content: center; }

/* The QR card stretches to the identity card's height, which left the code
   small and adrift in a tall panel. Centre it and let it use the width. */
.hpx__top { grid-template-columns: minmax(0, 1.5fr) minmax(210px, 250px) minmax(230px, 300px); }
.hpx__qr { justify-content: center; gap: 0.45rem; padding: 1rem 0.95rem; }
.hpx__qrimg { max-width: 100%; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; }

@media (max-width: 1240px) {
  .hpx__top { grid-template-columns: minmax(0, 1fr) minmax(210px, 250px); }
}
@media (max-width: 760px) {
  .hpx__identgrid { grid-template-columns: 1fr; }
  .hpx__identside { padding-left: 0; padding-top: 0.85rem; border-left: none; border-top: 1px solid var(--color-border); }
  .hpx__ident .hpx__strip { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}

/* ── Identity card polish ─────────────────────────────────── */
/* Actions sit in the header beside the name, filling the space the logo and
   title leave, instead of hanging under the strip where "Emergency info"
   wrapped onto two lines. */
.hpx__identhead { flex-wrap: wrap; padding-bottom: 0.15rem; }
.hpx__identname { flex: 1 1 220px; }
.hpx__identhead .hpx__stripactions { margin-left: auto; display: flex; gap: 0.4rem; padding-bottom: 0.4rem; }
.hpx__identhead .hpx__stripactions .btn { white-space: nowrap; flex: 0 0 auto; }

/* Right column is the at-a-glance strip alone: label above value, evenly
   spaced, ruled off from the contact details. */
.hpx__identgrid { grid-template-columns: minmax(0, 1fr) minmax(190px, 240px); align-items: stretch; padding-top: 1rem; }
.hpx__identside { justify-content: flex-start; gap: 0; }
.hpx__ident .hpx__strip { gap: 0; }
.hpx__ident .hpx__stripitem { padding: 0.5rem 0; border-bottom: 1px dashed var(--color-border); }
.hpx__ident .hpx__stripitem:last-child { border-bottom: none; }
.hpx__ident .hpx__stripitem span { line-height: 1.3; }
.hpx__striplabel { margin-bottom: 0.1rem; }

/* Contact list: roomier rows, links that read as links. */
.hpx__facts { gap: 0.55rem; }
.hpx__facts li { align-items: center; line-height: 1.4; }
.hpx__facts a { color: var(--color-primary-dark); font-weight: 600; }
.hpx__facts a:hover { text-decoration: underline; }
.hpx__facticon { width: 26px; height: 26px; border-radius: 8px; }
.hpx__facticon svg { width: 14px; height: 14px; }

/* Banner a touch taller so the logo's overlap looks deliberate. */
.hpx__identcover { height: 190px; }
.hpx__identhead { align-items: flex-end; }

@media (max-width: 820px) {
  /* Three actions in one row is where they start crowding each other. Give
     each a half-width basis and the row breaks itself: two across the top,
     the third alone underneath, where flex-grow lets it take the full width
     rather than sitting half-finished. Emergency info leads, because that is
     the one someone might be in a hurry for. */
  .hpx__identhead .hpx__stripactions { margin-left: 0; width: 100%; }
  .hpx__identhead .hpx__stripactions .btn { flex: 1 1 calc(50% - 0.2rem); justify-content: center; }
}

/* ── Availability table: fit the card, stop the squeeze ───── */
/* min-width was 900px inside a card narrower than that, so the table scrolled
   sideways at full desktop width — every column pinched and the action button
   clipped off the edge. It now fits, and only scrolls on genuinely small
   screens. */
.hpx__table { border-radius: 12px; }
.hpx__table table { min-width: 720px; table-layout: fixed; }
.hpx__c-num { width: 38px; }
.hpx__c-doc { width: 25%; }
.hpx__c-spec { width: 13%; }
.hpx__c-room { width: 8%; }
.hpx__c-time { width: 17%; }
.hpx__c-status { width: 12%; }
.hpx__c-by { width: 15%; }
.hpx__c-act { width: 92px; }

.hpx__table thead th { padding: 0.55rem 0.6rem; }
.hpx__table tbody td { padding: 0.75rem 0.6rem; }
/* The colour bar reads as part of the row, not a stripe floating beside it. */
.hpx__table tbody tr > td:first-child { padding-left: 0.75rem; }

.hpx__doc { min-width: 0; gap: 0.55rem; }
.hpx__docid { min-width: 0; }
.hpx__docname { line-height: 1.25; overflow-wrap: anywhere; }
/* One line, always: the old label wrapped and dragged its icon down with it. */
.hpx__weeklink { white-space: nowrap; margin-top: 0.2rem; font-size: 0.72rem; }
.hpx__spec, .hpx__dept { overflow-wrap: anywhere; }
.hpx__room { white-space: nowrap; }
.hpx__timing { min-width: 0; width: 100%; padding: 0.35rem 0.5rem; }
.hpx__time { white-space: nowrap; font-size: 0.82rem; }
.hpx__by { white-space: normal; font-size: 0.76rem; line-height: 1.3; }
.hpx__act .btn { padding-inline: 0.6rem; }

/* Replacement and note rows read as continuations of the doctor above them. */
.hpx__replrow > td, .hpx__noterow > td { padding: 0 0.6rem 0.65rem !important; }
.hpx__noterow .hpx__note { margin: 0; }
.hpx__replrow > td:first-child, .hpx__noterow > td:first-child { padding: 0 !important; }

/* A scrollbar only when the table genuinely cannot fit. */
.hpx__table { scrollbar-width: thin; }
.hpx__table::-webkit-scrollbar { height: 8px; }
.hpx__table::-webkit-scrollbar-thumb { background: var(--color-grey-200); border-radius: 999px; }

@media (max-width: 1400px) {
  .hpx__c-by { width: 14%; }
  .hpx__c-doc { width: 24%; }
}

/* ── Availability table: room to breathe ──────────────────── */
/* It fitted, but every row was still packed to the line. This pass is about
   air: taller rows, a larger portrait, real space between columns, and a type
   hierarchy that lets the eye land on the name and the timing first. */
.hpx__main { padding: 1.35rem 1.5rem 1.5rem; }
.hpx__table { border: none; border-radius: 0; overflow-x: auto; }
.hpx__table table { min-width: 780px; border-collapse: separate; border-spacing: 0; }

.hpx__table thead th {
  background: transparent;
  border-bottom: 1px solid var(--color-border);
  padding: 0 0.85rem 0.7rem;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
}
.hpx__table thead th:first-child { padding-left: 0.5rem; }
.hpx__table thead th:last-child { padding-right: 0.5rem; }

/* Each doctor is a band of its own, separated by space rather than a hairline. */
.hpx__table tbody td { border-bottom: none; padding: 1.05rem 0.85rem; font-size: 0.9rem; }
.hpx__row { transition: background 0.15s var(--ease); }
.hpx__row:hover { background: #fafcff; }
.hpx__row > td { border-top: 1px solid #eef2f8; }
.hpx__table tbody tr:first-child > td { border-top: none; }
.hpx__row > td:first-child { padding-left: 0.9rem; }
.hpx__row > td:last-child { padding-right: 0.5rem; }
/* The status bar becomes a soft inset marker instead of a hard edge stripe. */
.hpx__row--green { box-shadow: inset 4px 0 0 -1px #1a9a63; }
.hpx__row--amber { box-shadow: inset 4px 0 0 -1px #e0a11f; }
.hpx__row--red { box-shadow: inset 4px 0 0 -1px #e0223a; }
.hpx__row--blue { box-shadow: inset 4px 0 0 -1px #2f6fed; }
.hpx__row--grey { box-shadow: inset 4px 0 0 -1px #cdd6e4; }

.hpx__num { font-size: 0.85rem; }
.hpx__doc { gap: 0.75rem; }
.hpx__docimg { width: 48px; height: 48px; }
.hpx__docimg svg { width: 22px; height: 22px; }
.hpx__docname { font-size: 0.95rem; letter-spacing: -0.01em; }
.hpx__docqual { font-size: 0.78rem; margin-top: 0.05rem; }
.hpx__weeklink { margin-top: 0.35rem; font-size: 0.75rem; gap: 0.3rem; }
.hpx__weeklink svg { width: 13px; height: 13px; }

.hpx__spec { font-size: 0.9rem; font-weight: 600; }
.hpx__dept { display: inline-block; margin-top: 0.15rem; }
.hpx__room { padding: 0.3rem 0.65rem; border-radius: 8px; font-size: 0.85rem; background: #f1f5fb; }

.hpx__timing { padding: 0.55rem 0.75rem; border-radius: 10px; gap: 0.15rem; }
.hpx__time { font-size: 0.92rem; letter-spacing: -0.01em; }
.hpx__timelabel { font-size: 0.76rem; }
.hpx__updated { margin-top: 0.1rem; }

.hpx__status { padding: 0.34rem 0.75rem; font-size: 0.78rem; }
.hpx__by { font-size: 0.82rem; color: var(--color-muted); }
.hpx__by br + .hpx__verified { display: inline-block; margin-top: 0.15rem; }
.hpx__act .btn { padding: 0.4rem 0.85rem; border-radius: 8px; }

/* Note and replacement sit under the doctor, indented to the portrait's edge. */
.hpx__replrow > td, .hpx__noterow > td { padding: 0 0.85rem 0.95rem !important; }
.hpx__note { padding: 0.55rem 0.85rem; border-radius: 10px; background: #f6f8fc; border-left: 3px solid var(--color-grey-200); font-size: 0.85rem; }
.hpx__repl { padding: 0.65rem 0.85rem; border-radius: 10px; }

.hpx__count { margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--color-border); font-size: 0.82rem; }

/* Header of the section, given the same air. */
.hpx__mainhead { margin-bottom: 1.1rem; }
.hpx__h2 { font-size: 1.18rem; }

@media (max-width: 860px) {
  .hpx__main { padding: 1rem 1rem 1.2rem; }
  .hpx__table tbody td { padding: 0.85rem 0.6rem; }
}

/* ── Availability table: edges and column balance ─────────── */
/* The action button was pressed against the card's edge, and the middle
   columns were stretched so far apart the row read as scattered rather than
   grouped. Widths are rebalanced towards the two columns people actually read
   — who the doctor is, and when they sit — and both ends get a real margin. */
.hpx__c-num { width: 44px; }
.hpx__c-doc { width: 27%; }
.hpx__c-spec { width: 14%; }
.hpx__c-room { width: 9%; }
.hpx__c-time { width: 19%; }
.hpx__c-status { width: 13%; }
.hpx__c-by { width: 14%; }
.hpx__c-act { width: 104px; }

.hpx__table thead th:first-child,
.hpx__row > td:first-child { padding-left: 1.1rem; }
.hpx__table thead th:last-child,
.hpx__row > td:last-child { padding-right: 1.1rem; }
.hpx__act { padding-left: 0 !important; }

/* Closed and on-leave rows carry the same red as their pill, so the row reads
   as unavailable at a glance rather than only at the badge. */
.hpx__timing--red .hpx__timelabel { color: #b3261e; }
.hpx__timing--red .hpx__time { color: #8c1d16; }
.hpx__status--red { background: #fdecea; color: #b3261e; }

/* A gentler divider, and the note indented to line up with the doctor's name. */
.hpx__row > td { border-top-color: #f0f4fa; }
.hpx__noterow > td { padding-left: 1.1rem !important; padding-right: 1.1rem !important; }
.hpx__replrow > td { padding-left: 1.1rem !important; padding-right: 1.1rem !important; }

/* ── Doctors as cards ─────────────────────────────────────── */
/* The table packed eight columns into a row and still felt cramped. A card per
   doctor gives the portrait real size and stacks the four things a patient
   checks — who, what they do, whether they're in today, and when. */
.hpx__dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 1rem; }
.hpx__dcard { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: 16px; background: var(--color-surface); overflow: hidden; transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease); }
.hpx__dcard:hover { border-color: var(--color-primary); box-shadow: 0 12px 28px rgba(16, 40, 60, 0.09); transform: translateY(-2px); }

/* Portrait panel — a tinted ground, so a cut-out or an uneven photo still sits
   on something deliberate. The tint follows today's status. */
.hpx__dphoto { position: relative; aspect-ratio: 4 / 3; background: #eef3fb; overflow: hidden; }
.hpx__dphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hpx__dphotoblank { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-primary); }
.hpx__dphotoblank svg { width: 46px; height: 46px; }
.hpx__dcard--green .hpx__dphoto { background: #e7f6ee; }
.hpx__dcard--amber .hpx__dphoto { background: #fdf3e0; }
.hpx__dcard--red .hpx__dphoto { background: #fdecea; }
.hpx__dcard--blue .hpx__dphoto { background: #e7effd; }
.hpx__dcard--grey .hpx__dphoto { background: #eef1f6; }
/* Status also rides on the photo, readable before the eye reaches the text. */
.hpx__dbadge { position: absolute; left: 0.6rem; bottom: 0.6rem; padding: 0.24rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: rgba(255, 255, 255, 0.94); box-shadow: 0 2px 8px rgba(16, 40, 60, 0.12); }
.hpx__dbadge--green { color: #11724f; }
.hpx__dbadge--amber { color: #8a5a10; }
.hpx__dbadge--red { color: #b3261e; }
.hpx__dbadge--blue { color: #1a4db4; }
.hpx__dbadge--grey { color: var(--color-muted); }

.hpx__dbody { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.85rem 0.95rem 1rem; }
.hpx__dname { margin: 0; font-family: var(--font-head); font-size: 1.02rem; font-weight: 700; color: var(--color-heading); line-height: 1.25; }
/* Specialty in brand blue, bold — the line people scan for. */
.hpx__dspec { margin: 0; font-size: 0.88rem; font-weight: 700; color: var(--color-primary); }
.hpx__dqual { margin: 0; font-size: 0.78rem; color: var(--color-muted); }

.hpx__dtags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.1rem; }
.hpx__tag { padding: 0.18rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; }
.hpx__tag--updated { background: #fff4cc; color: #8a6100; }
.hpx__tag--ok { background: var(--color-success-50); color: var(--color-success-800); }

/* Today's timing — the card's answer to "can I go now?" */
.hpx__dtime { display: flex; flex-direction: column; gap: 0.05rem; margin-top: 0.15rem; padding: 0.55rem 0.7rem; border-radius: 10px; background: var(--color-fill); }
.hpx__dtime--green { background: #e7f6ee; }
.hpx__dtime--amber { background: #fdf3e0; }
.hpx__dtime--red { background: #fdecea; }
.hpx__dtime--blue { background: #e7effd; }
.hpx__dtimelabel { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.hpx__dtimeval { font-size: 0.95rem; font-weight: 700; color: var(--color-heading); }
.hpx__dtimewas { font-size: 0.72rem; color: #8a6100; }

.hpx__dfacts { display: grid; grid-template-columns: auto 1fr; gap: 0.12rem 0.6rem; margin: 0.15rem 0 0; font-size: 0.8rem; }
.hpx__dfacts dt { color: var(--color-muted); }
.hpx__dfacts dd { margin: 0; font-weight: 600; color: var(--color-heading); overflow-wrap: anywhere; }

.hpx__drepl { margin: 0.15rem 0 0; padding: 0.45rem 0.6rem; border-radius: 8px; background: #fff9e9; border: 1px solid #f0e0b8; font-size: 0.8rem; color: #6b5520; }
.hpx__drepl span { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: #8a6100; }
.hpx__dnote { margin: 0.15rem 0 0; padding: 0.45rem 0.6rem; border-radius: 8px; background: var(--color-fill); font-size: 0.8rem; color: var(--color-text); }
.hpx__dby { margin: 0.1rem 0 0; font-size: 0.72rem; color: var(--color-muted); }
.hpx__dweek { margin-top: 0.5rem; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-surface); font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--color-primary-dark); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; }
.hpx__dweek:hover { border-color: var(--color-primary); background: var(--brand-50); }
.hpx__dweek svg { width: 14px; height: 14px; }
.hpx__dgrid .hpx__empty { grid-column: 1 / -1; text-align: center; padding: 1.75rem 0; }

/* ── Star ratings ─────────────────────────────────────────── */
/* Five stars with the score filled in, so "3" reads as 3-of-5 without the
   reader having to know the scale. */
.stars { display: inline-flex; align-items: center; gap: 0.08rem; line-height: 1; }
.stars__s { color: #d7dfeb; font-size: 0.95rem; }
.stars__s.is-on { color: #f2a413; }
.stars__num { margin-left: 0.35rem; font-size: 0.84rem; font-weight: 700; color: var(--color-heading); }
.stars__count { margin-left: 0.2rem; font-size: 0.78rem; color: var(--color-muted); }

/* Reviews: roomier cards, the rating on its own line above the comment. */
.hreviews { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.75rem; }
.hreview { padding: 0.9rem 1rem; border-radius: 12px; }
.hreview__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin: 0 0 0.35rem; }
.hreview__head strong { font-size: 0.92rem; color: var(--color-heading); }
.hreview__text { margin: 0.15rem 0 0.4rem; line-height: 1.5; }
.hreview__when { font-size: 0.75rem; }
.hreview-form select { font-family: var(--font-body); }

/* ── Doctor card: slimmer, and the whole card opens the details ─ */
.hpx__dcard { cursor: pointer; }
.hpx__dcard:focus-within { border-color: var(--color-primary); }
/* Status lives in the tags row under the name; the photo stays a photo. */
.hpx__dphoto { aspect-ratio: 5 / 4; }

/* Today's timing is a quiet line, not a coloured panel — the status tag above
   already carries the colour, and two coloured blocks fought each other. */
.hpx__dtime { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; margin: 0.2rem 0 0; padding: 0; background: none; }
.hpx__dtimelabel { font-size: 0.64rem; }
.hpx__dtimeval { font-size: 0.82rem; font-weight: 600; color: var(--color-text); }
.hpx__dtimewas { font-size: 0.7rem; color: var(--color-muted); }

/* A text button, not a full-width block. */
.hpx__dweek { align-self: flex-start; margin-top: 0.55rem; padding: 0; border: none; background: none; font-size: 0.8rem; color: var(--color-primary); }
.hpx__dweek:hover { background: none; text-decoration: underline; }

/* ── Doctor card hover: lift without a transform ──────────── */
/* A transform on the card would make it the containing block for any
   position:fixed descendant. The details dialog used to live inside the card,
   so hovering trapped it there and moving the pointer flipped it in and out of
   place. The dialogs have moved out, and the lift is done with shadow and
   border alone so nothing here can capture a fixed child again. */
.hpx__dcard:hover { transform: none; box-shadow: 0 10px 26px rgba(16, 40, 60, 0.10); }
/* The dialog is a full-screen overlay; never let a card's clipping touch it. */
.hpx__dgrid { overflow: visible; }

/* ── Doctor details dialog: wider, louder, self-explaining ── */
.hweek-modal__box { width: min(640px, 100%); max-height: 88vh; padding: 1.2rem 1.4rem 1.5rem; }
.hweek-modal__head { padding-bottom: 0.7rem; border-bottom: 1px solid var(--color-border); margin-bottom: 0.9rem; }
.hweek-modal__head strong { font-size: 1.05rem; }

/* Weekly rows: day, hours, then the state named in full. The colour is now a
   reinforcement of the label rather than the only thing carrying the meaning,
   which is what the legend underneath used to be needed for. */
.hweek { display: grid; gap: 0.35rem; }
.hweek__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.85rem;
  border-left-width: 5px;
  border-radius: 0 10px 10px 0;
  margin: 0;
}
.hweek__day { font-size: 0.92rem; }
.hweek__hours { font-size: 0.9rem; font-weight: 600; color: var(--color-heading); }
.hweek__tag { margin-left: 0; padding: 0.2rem 0.6rem; font-size: 0.72rem; min-width: 84px; text-align: center; }

/* Stronger tints and borders, and a tag that carries its state's colour. */
.hweek__row--today { border-left-color: #12855a; background: #dcf5e9; }
.hweek__row--today .hweek__tag { background: #12855a; color: #fff; }
.hweek__row--upcoming { border-left-color: #2f6fed; background: #e5edfd; }
.hweek__row--upcoming .hweek__tag { background: #2f6fed; color: #fff; }
.hweek__row--completed { border-left-color: #8b9bb2; background: #eef1f6; }
.hweek__row--completed .hweek__tag { background: #7d8ea6; color: #fff; }
.hweek__row--completed .hweek__day,
.hweek__row--completed .hweek__hours { color: var(--color-muted); }
.hweek__row--leave { border-left-color: #c0392b; background: #fbe0dc; }
.hweek__row--leave .hweek__tag { background: #c0392b; color: #fff; }
.hweek__row--updated { border-left-color: #d8a800; background: #fdf3d4; }
.hweek__row--updated .hweek__tag { background: #b98f00; color: #fff; }
.hweek__row--off { border-left-color: #d7dfeb; background: var(--color-surface); }
.hweek__row--off .hweek__day { color: var(--color-muted); }
.hweek__row--off .hweek__tag { background: #eef1f6; color: var(--color-muted); }

@media (max-width: 560px) {
  .hweek__row { grid-template-columns: 1fr auto; gap: 0.3rem 0.6rem; }
  .hweek__tag { grid-column: 2; min-width: 0; }
}

/* ── Social links: real marks, in brand colour ────────────── */
/* Inline SVG from the site's own icon set rather than a package: an icon CDN
   is blocked by the CSP, and a bundled icon font would need a build step this
   project doesn't have. */
.hpx__social { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.9rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); font-size: 0.85rem; font-weight: 600; color: var(--color-heading); transition: border-color 0.18s var(--ease), background 0.18s var(--ease), color 0.18s var(--ease); }
.hpx__social svg { width: 17px; height: 17px; flex: none; }
.hpx__social:hover { color: #fff; }
.hpx__social--globe:hover { background: var(--color-primary); border-color: var(--color-primary); }
.hpx__social--facebook svg { color: #1877f2; }
.hpx__social--facebook:hover { background: #1877f2; border-color: #1877f2; }
.hpx__social--facebook:hover svg { color: #fff; }
.hpx__social--instagram svg { color: #d62976; }
.hpx__social--instagram:hover { background: linear-gradient(45deg, #f9ce34, #ee2a7b 55%, #6228d7); border-color: transparent; }
.hpx__social--instagram:hover svg { color: #fff; }
.hpx__social--youtube svg { color: #ff0000; }
.hpx__social--youtube:hover { background: #ff0000; border-color: #ff0000; }
.hpx__social--youtube:hover svg { color: #fff; }
.hpub__socials { gap: 0.5rem; }

/* ── Top card: cover over both the details and the code ───── */
/* The QR used to be its own card beside the details, so the cover stopped
   short of it. The code now lives inside the same card, under the full-width
   banner, and is sized to be scanned rather than to fill a column. */
.hpx__top { grid-template-columns: minmax(0, 1fr) minmax(230px, 300px); }
.hpx__toprow { display: grid; grid-template-columns: minmax(0, 1fr) 224px; gap: 0.5rem 1.25rem; align-items: start; }
.hpx__topmain { min-width: 0; }

.hpx__qr {
  border: none;
  border-left: 1px solid var(--color-border);
  border-radius: 0;
  padding: 1rem 0 1.1rem 1.25rem;
  align-self: stretch;
  justify-content: flex-start;
  gap: 0.3rem;
}
.hpx__qrtitle { font-size: 0.8rem; }
.hpx__qrsub { font-size: 0.68rem; margin-bottom: 0.15rem; }
/* Smaller: a 160px code scans fine from a phone at arm's length. */
.hpx__qrimg { width: 160px; max-width: 100%; margin: 0 auto; }
.hpx__qrbtns { gap: 0.3rem; width: 100%; max-width: 190px; margin: 0.35rem auto 0; }
.hpx__qrbtns .btn { padding: 0.32rem 0.5rem; font-size: 0.72rem; border-radius: 7px; }
.hpx__qrbtns .btn svg { width: 12px; height: 12px; }
.hpx__qrcopy { font-size: 0.72rem; margin-top: 0.15rem; }

@media (max-width: 1240px) {
  .hpx__top { grid-template-columns: minmax(0, 1fr); }
  .hpx__live { grid-column: auto; }
}
@media (max-width: 860px) {
  .hpx__toprow { grid-template-columns: 1fr; }
  .hpx__qr { border-left: none; border-top: 1px solid var(--color-border); padding: 1rem 0 0.5rem; }
}

/* ── QR column: tighter, and aligned with the details ─────── */
/* It was a centred block in a wide column, so nothing in it lined up with the
   left-aligned details beside it, and it ran past their last line. Everything
   is left-aligned on the same baseline now, in a narrower column. */
.hpx__toprow { grid-template-columns: minmax(0, 1fr) 176px; gap: 0.5rem 1.1rem; }
.hpx__qr { align-items: flex-start; text-align: left; padding: 1rem 0 0.9rem 1.1rem; gap: 0.25rem; }
.hpx__qrtitle { font-size: 0.76rem; gap: 0.3rem; }
.hpx__qrtitle svg { width: 13px; height: 13px; }
.hpx__qrsub { font-size: 0.66rem; }
.hpx__qrimg { width: 132px; margin: 0.3rem 0 0; }
.hpx__qrbtns { max-width: 132px; margin: 0.45rem 0 0; gap: 0.25rem; }
.hpx__qrbtns .btn { padding: 0.28rem 0.4rem; font-size: 0.66rem; gap: 0.2rem; }
.hpx__qrbtns .btn svg { width: 11px; height: 11px; }
.hpx__qrcopy { font-size: 0.68rem; margin-top: 0.3rem; }

@media (max-width: 860px) {
  .hpx__toprow { grid-template-columns: 1fr; }
  .hpx__qr { padding-left: 0; }
}

/* ── Review / question authors ────────────────────────────── */
.hava { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.hava__disc { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; font-weight: 700; font-size: 0.9rem; }
.hava__disc--a { background: #e7effd; color: #1a4db4; }
.hava__disc--b { background: #e4f6ee; color: #11724f; }
.hava__disc--c { background: #fdf3e0; color: #8a5a10; }
.hava__disc--d { background: #fdecea; color: #b3261e; }
.hava__disc--e { background: #efe9fb; color: #5b34a8; }
.hava__disc--f { background: #e6f4f7; color: #12707f; }
.hava__text { display: flex; flex-direction: column; min-width: 0; }
.hava__name { font-size: 0.9rem; font-weight: 700; color: var(--color-heading); overflow-wrap: anywhere; }
.hava__sub { font-size: 0.72rem; color: var(--color-muted); }

.hreview__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
.hreview__text { margin: 0; }
.hqna__item .hava { margin-bottom: 0.4rem; }
.hqna__q { margin-left: 0; }

/* A confirmation retires itself rather than sitting there. */
.banner--success { transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
.banner--success.is-gone { opacity: 0; transform: translateY(-6px); }

/* ── Sidebar overflow: link out, or open in place ─────────── */
/* Live updates keep a fixed height however many are posted, so the column
   beside the doctor list doesn't stretch down the page. */
.hpx__livelist { max-height: 200px; }
.hpx__viewall { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.65rem; padding-top: 0.6rem; border-top: 1px solid var(--color-border); width: 100%; font-size: 0.78rem; font-weight: 700; color: var(--color-primary); }
.hpx__viewall:hover { text-decoration: underline; }

/* Services: six, then a disclosure that expands where it stands. */
.hpx__more { margin-top: 0.5rem; }
.hpx__more > summary { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; list-style: none; padding-top: 0.55rem; border-top: 1px solid var(--color-border); font-size: 0.78rem; font-weight: 700; color: var(--color-primary); }
.hpx__more > summary::-webkit-details-marker { display: none; }
.hpx__more > summary:hover { text-decoration: underline; }
.hpx__more-shut { display: none; }
.hpx__more[open] .hpx__more-open { display: none; }
.hpx__more[open] .hpx__more-shut { display: inline; }
.hpx__more-chev { display: inline-flex; margin-left: auto; transition: transform 0.18s var(--ease); }
.hpx__more-chev svg { width: 14px; height: 14px; }
.hpx__more[open] .hpx__more-chev { transform: rotate(180deg); }
.hpx__svclist--rest { margin-top: 0.7rem; }

/* ── The full-list pages ──────────────────────────────────── */
.hpx__listpage { padding-top: 1.25rem; padding-bottom: 2rem; max-width: 900px; }
.hpx__back { margin: 0 0 0.75rem; font-size: 0.88rem; font-weight: 600; }
.hpx__listhead { margin-bottom: 1.1rem; }
.hpx__h1 { margin: 0 0 0.2rem; font-size: 1.5rem; }
.hpx__listall { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.hpx__listrow { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.95rem 1.1rem; background: var(--color-surface); border: 1px solid #e4ebf5; border-radius: 12px; }
.hpx__listrow .hpx__dot { margin-top: 0.5rem; }
.hpx__listbody { min-width: 0; flex: 1; }
.hpx__listtitle { margin: 0; font-weight: 700; color: var(--color-heading); }
.hpx__listtext { margin: 0.2rem 0 0; color: var(--color-text); line-height: 1.5; }
.hpx__listmeta { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--color-muted); }
.hpx__listimg { margin-top: 0.6rem; width: 100%; max-width: 340px; height: 170px; object-fit: cover; border-radius: 10px; }
.hpx__listempty { text-align: center; padding: 2rem 1rem; }

/* ── Account activity log ─────────────────────────────────── */
.authev { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.6rem; border-radius: 999px; font-size: 0.76rem; font-weight: 700; white-space: nowrap; }
.authev::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.authev--green { background: var(--color-success-50); color: #11724f; }
.authev--blue { background: #e7effd; color: #1a4db4; }
.authev--red { background: #fdecea; color: #b3261e; }
.authev--grey { background: var(--color-fill); color: var(--color-muted); }
.authev__detail { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.78rem; }
.authev__reason { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; color: #b3261e; }

/* ── Emergency service: the siren says it out loud ────────── */
/* A hospital that runs an emergency room gets a siren that reads as switched
   on — it pulses and throws a red glow, the way the light itself would. The
   emoji is decorative (aria-hidden); the words next to it carry the meaning,
   so nothing is lost when the animation is off. */
.hsiren { display: inline-block; font-size: 0.92rem; line-height: 1; transform-origin: 50% 60%; animation: sirenOn 1.15s ease-in-out infinite; }
@keyframes sirenOn {
  0%, 100% { transform: scale(1) rotate(-6deg); filter: drop-shadow(0 0 1px rgba(224, 34, 58, 0.55)); }
  50% { transform: scale(1.16) rotate(6deg); filter: drop-shadow(0 0 9px rgba(224, 34, 58, 0.95)); }
}
@media (prefers-reduced-motion: reduce) { .hsiren { animation: none; } }

.hemg__now { display: inline-block; margin-left: 0.35rem; padding: 0.1rem 0.42rem; border-radius: 999px; font-size: 0.68rem; font-style: normal; font-weight: 700; }
.hemg__now--on { background: var(--color-success-50); color: #11724f; }
.hemg__now--off { background: var(--color-fill); color: var(--color-muted); }

.hemg__state { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.85rem; padding: 0.65rem 0.85rem; border-radius: 12px; }
.hemg__state--on { background: #fdecea; border: 1px solid #f6c9c4; }
.hemg__state--off { background: var(--color-fill); border: 1px solid var(--color-border); }
.hemg__state strong { display: block; font-size: 1rem; color: var(--color-heading); }

/* ── "Not sitting today" needs a next day to point at ─────── */
/* The label makes it unmistakably a future session; the card's "Today" line
   stays directly above it, so the two can't be read as the same thing. */
.hpx__dnext .hpx__dtimeval { color: var(--color-primary-dark); }

/* ── "About" clamped to ten lines ─────────────────────────── */
/* The clamp is the resting state so the page never reflows on load; the
   button is revealed by the script only when text is actually hidden. */
.habout__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 10; line-clamp: 10; overflow: hidden; }
.habout.is-open .habout__text { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; }
.habout__btn { margin-top: 0.35rem; padding: 0; border: none; background: none; font: inherit; font-size: 0.85rem; font-weight: 700; color: var(--color-primary); cursor: pointer; }
.habout__btn:hover { text-decoration: underline; }

/* ── City lists name their province ────────────────── */
/* Two cities can share a name across provinces, and a visitor from another
   part of the country needs to know which one this is. */
.navdd__prov { margin-left: auto; padding-left: 0.6rem; font-size: 0.74rem; color: var(--color-muted); white-space: nowrap; }
.hcity__prov { display: block; font-size: 0.76rem; font-weight: 600; color: var(--color-muted); }
.lsec-head__prov { display: block; font-size: 0.86rem; font-weight: 600; color: var(--color-muted); }

/* ── Department filter + department boxes ──────────── */
/* The chip row wrapped over several lines on any hospital with more than a
   handful of departments and pushed the doctors below the fold. The filter is
   now one dropdown in the search bar; the departments themselves are boxes
   under the doctor list, six at rest. */
.hpx__deptpick { padding: 0.5rem 0.7rem; max-width: 15rem; border: 1px solid var(--color-border); border-radius: 999px; font: inherit; font-size: 0.86rem; color: var(--color-heading); background: var(--color-fill); cursor: pointer; }
.hpx__deptpick:focus { outline: none; border-color: var(--color-primary); background: #fff; box-shadow: 0 0 0 3px var(--color-primary-light); }
.hpx__searchwrap { position: relative; display: inline-flex; align-items: center; }

.hpx__filtered { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 0.9rem; font-size: 0.84rem; color: var(--color-muted); }
.hpx__filtered strong { color: var(--color-heading); }
.hpx__clearfilter { font-size: 0.8rem; font-weight: 700; color: var(--color-primary); }

.hpx__depts { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--color-border); }
/* ── Department cards ───────────────────────────── */
/* Each card is one colour end to end: the drawing, the wash behind it, the
   soft corner blooms and the button all read from --dept-ink / --dept-soft /
   --dept-wash, which the tint class sets. config/departments.js decides which
   tint a department gets; views/partials/organ.ejs draws from the same two
   variables, so one set of artwork serves every hue. */
.hpx__deptgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 0.85rem; }
.hpx__deptgrid--rest { margin-top: 0.85rem; }

.hpx__deptbox {
  --dept-soft: var(--color-fill); --dept-ink: var(--color-primary); --dept-wash: var(--color-surface);
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  height: 100%; padding: 1.35rem 1rem 1.15rem; text-align: center;
  border: 1px solid var(--color-border); border-radius: 18px; background: var(--dept-wash);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
/* Two soft blooms of the card's own colour, top-right and mid-left, the way
   the artwork has them. Pseudo-elements so the markup stays about content. */
.hpx__deptbox::before, .hpx__deptbox::after {
  content: ''; position: absolute; z-index: -1; border-radius: 50%;
  background: var(--dept-soft); opacity: 0.75; filter: blur(6px);
}
.hpx__deptbox::before { width: 74px; height: 74px; top: -18px; right: -22px; }
.hpx__deptbox::after { width: 42px; height: 42px; top: 84px; left: -16px; opacity: 0.55; }
.hpx__deptbox:hover { border-color: var(--dept-ink); box-shadow: 0 14px 30px rgba(16, 40, 60, 0.10); transform: translateY(-2px); }
.hpx__deptbox.is-active { border-color: var(--dept-ink); box-shadow: 0 0 0 1px var(--dept-ink) inset; }

/* The medallion: a white disc with a ring of the card colour around it. */
.hpx__deptmedal { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--color-surface); box-shadow: 0 0 0 7px var(--dept-soft), 0 6px 16px rgba(16, 40, 60, 0.07); }
.hpx__deptart { width: 46px; height: 46px; }

.hpx__deptname { margin-top: 0.35rem; font-family: var(--font-head); font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--color-heading); }
.hpx__deptmeta { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--color-muted); }
.hpx__deptcta { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; margin-top: auto; padding: 0.55rem 0.9rem; border-radius: 999px; background: var(--dept-soft); color: var(--dept-ink); font-size: 0.86rem; font-weight: 700; transition: background 0.18s var(--ease); }
.hpx__deptcta svg { width: 15px; height: 15px; transition: transform 0.18s var(--ease); }
.hpx__deptbox:hover .hpx__deptcta svg { transform: translateX(3px); }

/* One rule per tint — the only place these colours are written.
   Kept light on purpose: the medallion ring, the corner blooms, the button
   fill and the drawing's own fill all read from --dept-soft, so at full
   strength a card is one block of colour and the artwork disappears into
   it. The ink line carries the card; the tint only says which one it is.
   .tint--* is the same palette under a name that isn't a department's: a
   service tile, an icon swatch, anything else that carries one drawing in
   one colour. Departments keep their own class so their markup reads as it
   always did. */
.hpx__deptbox--rose, .tint--rose { --dept-soft: #fef0f3; --dept-ink: #e0335c; --dept-wash: #fffbfc; }
.hpx__deptbox--crimson, .tint--crimson { --dept-soft: #fdeded; --dept-ink: #c62b30; --dept-wash: #fffafa; }
.hpx__deptbox--red, .tint--red { --dept-soft: #feeeec; --dept-ink: #d93b2b; --dept-wash: #fffbfa; }
.hpx__deptbox--pink, .tint--pink { --dept-soft: #fdeff7; --dept-ink: #d1358a; --dept-wash: #fffbfe; }
.hpx__deptbox--magenta, .tint--magenta { --dept-soft: #fbeffd; --dept-ink: #a334c2; --dept-wash: #fefbff; }
.hpx__deptbox--plum, .tint--plum { --dept-soft: #f7f0fb; --dept-ink: #8a3fa8; --dept-wash: #fefcfe; }
.hpx__deptbox--violet, .tint--violet { --dept-soft: #f3effe; --dept-ink: #6c46d6; --dept-wash: #fcfbff; }
.hpx__deptbox--indigo, .tint--indigo { --dept-soft: #eff1fe; --dept-ink: #4250c7; --dept-wash: #fbfcff; }
.hpx__deptbox--blue, .tint--blue { --dept-soft: #eef4fe; --dept-ink: #2f6fed; --dept-wash: #fafcff; }
.hpx__deptbox--sky, .tint--sky { --dept-soft: #ecf6fe; --dept-ink: #1580c4; --dept-wash: #fafdff; }
.hpx__deptbox--cyan, .tint--cyan { --dept-soft: #eaf7f9; --dept-ink: #0f8598; --dept-wash: #fafeff; }
.hpx__deptbox--teal, .tint--teal { --dept-soft: #ebf8f4; --dept-ink: #0f8b76; --dept-wash: #fafefc; }
.hpx__deptbox--green, .tint--green { --dept-soft: #edf9f0; --dept-ink: #18945f; --dept-wash: #fafefb; }
.hpx__deptbox--amber, .tint--amber { --dept-soft: #fdf6e8; --dept-ink: #b8801a; --dept-wash: #fffdf8; }
.hpx__deptbox--peach, .tint--peach { --dept-soft: #fdf3ed; --dept-ink: #cb641d; --dept-wash: #fffcfa; }
.hpx__deptbox--coral, .tint--coral { --dept-soft: #fdf0ed; --dept-ink: #d24f38; --dept-wash: #fffbfa; }
.hpx__deptbox--slate, .tint--slate { --dept-soft: #f1f4f8; --dept-ink: #56667e; --dept-wash: #fbfcfe; }

.hpx__more--depts > summary { justify-content: flex-start; }

/* ── Grid or list for the doctor cards ────────────── */
.hpx__headtools { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: flex-end; }
/* One segmented control: the two options share a border so they read as a
   switch between states rather than as two separate buttons. */
.hpx__viewtoggle { display: inline-flex; padding: 2px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-fill); }
.hpx__viewbtn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: var(--color-muted); }
.hpx__viewbtn svg { width: 15px; height: 15px; }
.hpx__viewbtn:hover { color: var(--color-primary-dark); }
.hpx__viewbtn.is-active { background: var(--color-surface); color: var(--color-primary-dark); box-shadow: 0 1px 3px rgba(16, 40, 60, 0.12); }

/* The identity block keeps name, speciality and qualification together, so
   list mode can treat the three of them as one column. */
.hpx__dident { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
/* The status is on the photo in grid mode, so this duplicate stays hidden
   there; empty slots collapse too, since a grid card is a stack. */
.hpx__dgrid--grid .hpx__dstatus { display: none; }
.hpx__dgrid--grid .hpx__dtags:empty, .hpx__dgrid--grid .hpx__dnext:empty { display: none; }
.hpx__dweekshort { display: none; }

/* ── List view: one doctor per row, read like a table ────── */
/* Every card lays its slots on the same column track, so the values line up
   down the page without a header row to anchor them — each cell names itself
   in a micro-label instead. */
/* The row folds on its own width, not the window's. The list shares the page
   with a 260–320px sidebar, so a 1100px window leaves it about 730px — narrow
   enough that six columns don't fit, while the viewport breakpoints below sat
   waiting for 1024px that never came. Zooming in walks through more of those
   dead zones, which is where the Details button was going: the row grew wider
   than the card, and the card clips (overflow: hidden, for its rounded top). */
.hpx__dgrid--list { grid-template-columns: 1fr; gap: 0.4rem; container: doclist / inline-size; }
.hpx__dgrid--list .hpx__dcard { flex-direction: row; align-items: center; padding: 0.45rem 0.85rem 0.45rem 0.5rem; border-radius: 12px; }
.hpx__dgrid--list .hpx__dcard:hover { transform: none; }
.hpx__dgrid--list .hpx__dphoto { flex: none; width: 46px; height: 46px; aspect-ratio: 1; border-radius: 50%; }
.hpx__dgrid--list .hpx__dphotoblank svg { width: 22px; height: 22px; }
.hpx__dgrid--list .hpx__dbadge { display: none; }
/* Every flexible track floors at 0, so the row can only ever be as wide as the
   card. A floor of 130px or 150px is a promise the container cannot always
   keep, and a grid that can't keep it overflows — silently, behind the card's
   clip. Text columns give way; status and Details size to their content and
   stay. */
.hpx__dgrid--list .hpx__dbody {
  flex: 1; min-width: 0; display: grid; align-items: center; gap: 0.5rem 0.9rem; padding: 0 0 0 0.8rem;
  grid-template-columns: minmax(0, 1.4fr) 128px minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1fr) auto;
}
.hpx__dgrid--list .hpx__dname { font-size: 0.9rem; line-height: 1.25; }
.hpx__dgrid--list .hpx__dspec { font-size: 0.76rem; }
.hpx__dgrid--list .hpx__dqual { display: none; }
.hpx__dgrid--list .hpx__dtime { flex-direction: column; align-items: flex-start; gap: 0; margin: 0; }
.hpx__dgrid--list .hpx__dtimelabel { font-size: 0.6rem; }
.hpx__dgrid--list .hpx__dtimeval { font-size: 0.8rem; }
/* One line, not a stack: three little pills in a column read as a menu. */
.hpx__dgrid--list .hpx__dtags { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0.3rem; }
.hpx__dgrid--list .hpx__tag { white-space: nowrap; }
/* Replacement, note and the rest belong to the row's dialog, not the row. */
.hpx__dgrid--list .hpx__drepl, .hpx__dgrid--list .hpx__dnote, .hpx__dgrid--list .hpx__dby { display: none; }
.hpx__dgrid--list .hpx__dweek { align-self: center; margin: 0; white-space: nowrap; }
.hpx__dgrid--list .hpx__dweeklong { display: none; }
.hpx__dgrid--list .hpx__dweekshort { display: inline; }

/* The status as its own cell — a pill, so the colour still carries. */
.hpx__dstatus { display: inline-flex; align-items: center; gap: 0.3rem; justify-self: start; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.hpx__dstatus::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.hpx__dstatus--green { background: var(--color-success-50); color: #11724f; }
.hpx__dstatus--amber { background: #fdf3e0; color: #8a5a10; }
.hpx__dstatus--red { background: #fdecea; color: #b3261e; }
.hpx__dstatus--blue { background: #e7effd; color: #1a4db4; }
.hpx__dstatus--grey { background: var(--color-fill); color: var(--color-muted); }

/* A narrow list cannot hold six columns. Each step drops the column the row
   can most afford to lose — the tags, then the next sitting, both of which the
   dialog still carries — and never the two that answer the question, nor the
   button that opens the rest. The widths are where a column would start to
   read badly, not where it would start to overflow. */
@container doclist (max-width: 820px) {
  .hpx__dgrid--list .hpx__dbody { grid-template-columns: minmax(0, 1.4fr) 128px minmax(0, 0.9fr) minmax(0, 1fr) auto; }
  .hpx__dgrid--list .hpx__dtags { display: none; }
}
@container doclist (max-width: 690px) {
  .hpx__dgrid--list .hpx__dbody { grid-template-columns: minmax(0, 1.4fr) 124px minmax(0, 1fr) auto; }
  .hpx__dgrid--list .hpx__dnext { display: none; }
}
@container doclist (max-width: 560px) {
  .hpx__dgrid--list .hpx__dcard { align-items: flex-start; }
  .hpx__dgrid--list .hpx__dbody { grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 0.7rem; }
  .hpx__dgrid--list .hpx__dident { grid-column: 1; }
  .hpx__dgrid--list .hpx__dstatus { grid-column: 2; grid-row: 1; }
}

/* Browsers without container queries keep the old viewport fold. It reads the
   window rather than the column, so it mistimes — but it never leaves six
   columns in a 700px row, which is the failure that matters. */
@supports not (container-type: inline-size) {
  @media (max-width: 1180px) {
    .hpx__dgrid--list .hpx__dbody { grid-template-columns: minmax(0, 1.4fr) 128px minmax(0, 0.9fr) minmax(0, 1fr) auto; }
    .hpx__dgrid--list .hpx__dtags { display: none; }
  }
  @media (max-width: 1024px) {
    .hpx__dgrid--list .hpx__dbody { grid-template-columns: minmax(0, 1.4fr) 124px minmax(0, 1fr) auto; }
    .hpx__dgrid--list .hpx__dnext { display: none; }
  }
  @media (max-width: 720px) {
    .hpx__dgrid--list .hpx__dcard { align-items: flex-start; }
    .hpx__dgrid--list .hpx__dbody { grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 0.7rem; }
    .hpx__dgrid--list .hpx__dident { grid-column: 1; }
    .hpx__dgrid--list .hpx__dstatus { grid-column: 2; grid-row: 1; }
  }
}

/* ── A session that has finished for the day ───────── */
/* The hours stay on the card — "was 2:00 PM – 8:00 PM" is still the answer to
   "when do they sit?" — but they read as past, not as an invitation. */
.hpx__dtimeval.is-past { color: var(--color-muted); text-decoration: line-through; text-decoration-color: var(--color-grey-300); }
.hpx__tag--done { background: var(--color-fill); color: var(--color-muted); }

/* ── Hospital highlights ──────────────────────── */
/* Bed counts and the like, shown only for the ones a hospital ticked. They
   sit inside the identity card, between the contact facts and the
   at-a-glance strip, and borrow that strip's shape — tiny uppercase label,
   figure beneath — so the middle and right of the card read as one system
   rather than two unrelated blocks. */
/* How a figure reads comes entirely from .hpx__stripitem, which the markup
   shares with the at-a-glance strip — the dot, the tiny uppercase label, the
   value beneath. What is left here is placement.

   The figures get a full-width row under the facts and the strip rather than
   a column between them. Three columns only fit when nothing in the first is
   long, and a hospital with two contact numbers and an emergency line makes
   it long every time — the middle column was squeezed until "MEDICAL
   DEPARTMENTS" broke across three lines and the numbers ran under the
   divider. A row is the same design laid out across, and it cannot collide
   with anything.

   Scoped to .hpx__ident because the figures carry .hpx__strip too, and would
   otherwise inherit `.hpx__ident .hpx__strip { padding: 0 }` from above. */
.hpx__ident .hpx__identgrid { grid-template-columns: minmax(0, 1fr) minmax(190px, 240px); align-items: start; }
.hpx__ident .hpx__facts { grid-column: 1; grid-row: 1; min-width: 0; }
.hpx__ident .hpx__identside { grid-column: 2; grid-row: 1; min-width: 0; }
.hpx__ident .hpx__hl {
  grid-column: 1 / -1; grid-row: 2; min-width: 0;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 0.2rem 1.25rem;
  padding: 0.85rem 0 0; border-top: 1px solid var(--color-border);
}
/* Across a row the dashed rule under each item would draw four stray
   underlines; the columns do the separating instead. */
.hpx__ident .hpx__hl .hpx__stripitem { padding: 0.3rem 0; border-bottom: none; }

/* A fact wraps inside its column instead of pushing the next one sideways.
   `break-word` rather than `anywhere`: the latter also lets the column
   shrink to its narrowest break, which stacked a phone number as
   "+923 / 3595 / 2877 / 6". */
.hpx__ident .hpx__facts li { min-width: 0; }
.hpx__ident .hpx__facttext { min-width: 0; overflow-wrap: break-word; }
.hpx__ident .hpx__stripitem { overflow-wrap: break-word; }

@media (max-width: 760px) {
  /* One column: facts, then the figures, then the strip. */
  .hpx__ident .hpx__identgrid { grid-template-columns: minmax(0, 1fr); }
  .hpx__ident .hpx__facts { grid-column: 1; grid-row: 1; }
  .hpx__ident .hpx__hl { grid-column: 1; grid-row: 2; }
  .hpx__ident .hpx__identside { grid-column: 1; grid-row: 3; }
}

/* ── Admin: the department catalogue ─────────────── */
/* Every row previews the artwork and colour a hospital will get, so a newly
   typed name can be seen to have matched something sensible before anyone
   picks it. Borrows the tint classes from the public cards. */
.deptcat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 0.5rem; }
.deptcat__item { --dept-soft: var(--color-fill); --dept-ink: var(--color-primary); display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0.6rem 0.45rem 0.5rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.deptcat__art { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 50%; background: var(--dept-soft); }
.deptcat__svg { width: 24px; height: 24px; }
.deptcat__name { flex: 1; min-width: 0; font-size: 0.88rem; font-weight: 600; color: var(--color-heading); overflow-wrap: anywhere; }
.deptcat__item form { margin: 0; }

   with a set of hours printed underneath. Icon left, sentence right. */

.hweek-announce { margin: 0.9rem 0; }

/* == Hospitals directory (/hospitals) ====================== */

/* Masthead: the words carry it, the illustration sits alongside and drops
   out entirely on a phone rather than pushing the search off the screen. */
.hsx__head { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.35rem; }
.hsx__headtext { min-width: 0; }
.hsx__title { margin: 0; font-size: clamp(1.9rem, 4vw, 2.65rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-heading); }
.hsx__sub { margin: 0.5rem 0 0; font-size: 1.02rem; color: var(--color-muted); }
.hsx__art { width: min(520px, 44%); height: auto; flex: none; }

/* Filter bar */
.hsx__filters { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.75rem 0.85rem; margin-bottom: 1.35rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 4px 18px rgba(16, 40, 60, 0.05); }
.hsx__search { position: relative; display: flex; align-items: center; flex: 1 1 17rem; min-width: 0; }
.hsx__search input { width: 100%; padding: 0.62rem 0.8rem 0.62rem 2.3rem; font: inherit; font-size: 0.92rem; color: var(--color-heading); background: var(--color-fill); border: 1px solid var(--color-border); border-radius: 11px; }
.hsx__search input:focus { outline: none; border-color: var(--color-primary); background: var(--color-surface); box-shadow: 0 0 0 3px var(--color-primary-light); }
.hsx__searchic { position: absolute; left: 0.8rem; display: inline-flex; color: var(--color-muted); pointer-events: none; }
.hsx__searchic svg { width: 16px; height: 16px; }
.hsx__pick { position: relative; display: flex; align-items: center; flex: 0 1 13rem; min-width: 0; }
.hsx__pick select { width: 100%; padding: 0.62rem 0.8rem 0.62rem 2.3rem; font: inherit; font-size: 0.92rem; color: var(--color-heading); background: var(--color-fill); border: 1px solid var(--color-border); border-radius: 11px; cursor: pointer; }
.hsx__pick select:focus { outline: none; border-color: var(--color-primary); background: var(--color-surface); box-shadow: 0 0 0 3px var(--color-primary-light); }
.hsx__pickic { position: absolute; left: 0.8rem; display: inline-flex; color: var(--color-muted); pointer-events: none; }
.hsx__pickic svg { width: 16px; height: 16px; }
.hsx__clear { font-size: 0.85rem; font-weight: 700; color: var(--color-primary); }

/* City cards

   A picture across the top, the name under it, three counted figures along
   the foot. The first version stacked all of that into one cramped row: an
   icon beside a two-line label left about forty pixels for the word
   "Specialties", the hospital count sat inline with the name so a city with
   none pushed everything sideways, and cards finished at different heights.
   Three bands fixes all three, because the bands line up across the row
   whatever any one city happens to hold. */
.hsx__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.1rem; }
.hsx__city {
  --hsx-soft: var(--color-fill); --hsx-ink: var(--color-primary);
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px;
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease), transform 0.18s var(--ease);
}
.hsx__city:hover { border-color: var(--hsx-ink); box-shadow: 0 12px 28px rgba(16, 40, 60, 0.10); transform: translateY(-2px); }

/* Band one: the picture. A fixed ratio, so every card in the row matches. */
.hsx__cityshot { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--hsx-soft); overflow: hidden; }
.hsx__cityshot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hsx__cityshotblank { position: absolute; inset: 0; display: grid; place-items: center; color: var(--hsx-ink); opacity: 0.45; }
.hsx__cityshotblank svg { width: 40px; height: 40px; }
.hsx__flag { position: absolute; top: 0.6rem; left: 0.6rem; padding: 0.22rem 0.62rem; border-radius: 999px; background: var(--hsx-ink); color: #fff; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; }

/* Band two: who this is. The arrow is pinned to its own column so a name of
   any length leaves it where the eye already expects it. */
.hsx__citybody { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 0.6rem; padding: 0.9rem 1rem; }
.hsx__cityname { grid-column: 1; font-family: var(--font-head); font-size: 1.08rem; font-weight: 700; line-height: 1.25; color: var(--color-heading); overflow-wrap: break-word; }
.hsx__cityprov { grid-column: 1; display: inline-flex; align-items: center; gap: 0.28rem; margin-top: 0.15rem; font-size: 0.8rem; color: var(--color-muted); }
.hsx__cityprov svg { width: 13px; height: 13px; flex: none; }
.hsx__citygo { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--hsx-soft); color: var(--hsx-ink); transition: transform 0.18s var(--ease); }
.hsx__citygo svg { width: 16px; height: 16px; }
.hsx__city:hover .hsx__citygo { transform: translateX(3px); }

/* Band three: the counts. `margin-top: auto` holds it to the floor, so a
   two-line city name lengthens the card rather than leaving a gap beneath
   the figures. Figure over label, centred — a label beside its figure is
   what made three of them fold over each other. */
.hsx__citystats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: auto; border-top: 1px solid var(--color-border); background: var(--color-fill); }
.hsx__stat { display: flex; flex-direction: column; align-items: center; gap: 0.05rem; padding: 0.62rem 0.3rem; min-width: 0; }
.hsx__stat + .hsx__stat { border-left: 1px solid var(--color-border); }
.hsx__stat b { font-family: var(--font-head); font-size: 1.1rem; line-height: 1.1; color: var(--color-heading); }
.hsx__stat em { font-style: normal; font-size: 0.68rem; color: var(--color-muted); white-space: nowrap; }

/* A city we have not reached yet recedes rather than shouting three zeros. */
.hsx__city.is-empty .hsx__cityname, .hsx__city.is-empty .hsx__stat b { color: var(--color-muted); }
.hsx__city.is-empty .hsx__cityshot { opacity: 0.6; }

.hsx__city--blue { --hsx-soft: #eaf2fe; --hsx-ink: #2f6fed; }
.hsx__city--teal { --hsx-soft: #e3f6f1; --hsx-ink: #0f8b76; }
.hsx__city--violet { --hsx-soft: #f0ebfe; --hsx-ink: #6c46d6; }
.hsx__city--amber { --hsx-soft: #fdf4e3; --hsx-ink: #b8801a; }

@media (max-width: 860px) {
  /* The illustration is decoration; the search is not. */
  .hsx__art { display: none; }
}

/* == Admin: city pictures ================================== */
/* One row per city: the picture the directory shows, its name and province,
   then what you can do to it. */
.citylist .citylist__item { display: flex; align-items: center; gap: 0.85rem; padding: 0.6rem 0.75rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.citylist__shot { display: grid; place-items: center; width: 78px; height: 52px; flex: none; overflow: hidden; border-radius: 9px; background: var(--color-fill); }
.citylist__shot img { width: 100%; height: 100%; object-fit: cover; }
.citylist__blank { display: inline-flex; color: var(--color-grey-300, var(--color-muted)); }
.citylist__blank svg { width: 20px; height: 20px; }
.citylist__body { flex: 1; min-width: 0; }
.citylist__body strong { display: block; font-size: 0.94rem; color: var(--color-heading); }
.citylist__body small { display: block; font-size: 0.8rem; }
.citylist__actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; }
.citylist__actions form { margin: 0; display: flex; align-items: center; gap: 0.4rem; }

@media (max-width: 720px) {
  .citylist .citylist__item { flex-wrap: wrap; }
  .citylist__actions { width: 100%; justify-content: flex-start; }
}

/* ── Message dialog ─────────────────────────── */
/* The thread and its box moved out of a page section and into a dialog, so
   the widths that suited a full-width column don't apply any more. */
.hmsg-modal .hweek-modal__box { width: min(560px, 100%); }
.hmsgpub__note { margin: -0.35rem 0 0.9rem; font-size: 0.84rem; }
.hmsg-modal .hmsgpub { max-height: 46vh; overflow-y: auto; padding-right: 0.15rem; }
.hmsg-modal .hmsgpub__turn { max-width: 92%; }
.hmsg-modal .hmsgpub__form { max-width: none; }
.hmsg-modal .hmsgpub__send .muted { flex: 1 1 100%; order: 2; }
.hmsg-modal .hmsgpub__send .btn { margin-left: auto; }
.hpx__stripactions .btn svg { width: 15px; height: 15px; }

/* ── Unread reply badge ──────────────────────── */
/* A reply is the one thing on this page that arrived for one particular
   reader, so it gets movement the rest of the page does not: a ring that
   pulses out of the count, twice a cycle, until they open it. The number
   itself stays still — a moving digit is harder to read, not easier. */
.hmsgbtn { position: relative; overflow: visible; }
.hmsgbtn__dot {
  position: absolute; top: -6px; right: -6px;
  display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: #e0223a; color: #fff;
  font-size: 0.66rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
/* The ring is a pseudo-element so the badge can pulse without the digit
   scaling with it. */
.hmsgbtn__dot::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(224, 34, 58, 0.55);
  animation: msgPing 1.9s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
@keyframes msgPing {
  0% { box-shadow: 0 0 0 0 rgba(224, 34, 58, 0.55); }
  55% { box-shadow: 0 0 0 9px rgba(224, 34, 58, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 34, 58, 0); }
}
@media (prefers-reduced-motion: reduce) {
  /* The colour and the count already carry it; the movement was the extra. */
  .hmsgbtn__dot::after { animation: none; }
}

/* == Highlight breakdowns ================================== */

/* The figure becomes a button when there is something behind it. It keeps
   the strip's shape exactly — one that grew a border and a background would
   stop matching the figures beside it — and says so with a line underneath.

   That line used to appear on hover only, which meant nobody knew the
   figures could be opened: there is nothing on a page to hover hopefully
   over, and a touchscreen has no hover at all. */
.hpx__hlbtn { display: flex; width: 100%; padding: 0.3rem 0 0.4rem; border: none; background: none; font: inherit; text-align: left; cursor: pointer; }
/* `flex`, not `inline-flex`: inline sat it beside the figure on the same
   line, which is what made "12 View details" read as one sentence. */
.hpx__hlmore { display: flex; align-items: center; gap: 0.22rem; width: fit-content; margin-top: 0.35rem; font-size: 0.72rem; font-weight: 700; color: var(--color-primary); white-space: nowrap; }
.hpx__hlmore svg { width: 12px; height: 12px; transition: transform 0.15s var(--ease); }
.hpx__hlbtn:hover .hpx__hlmore { text-decoration: underline; }
.hpx__hlbtn:hover .hpx__hlmore svg { transform: translateX(2px); }

/* The panel.

   Built as a short document rather than a dashboard card: a label, the
   figure it stands for, a sentence, the breakdown, a closing note. No icon
   tile, no tinted callout box, no rule that is not separating two things —
   the colour appears twice, on the figure and on its counts, and the
   typography does the rest. */
.hl-modal { --hl-soft: var(--color-fill); --hl-ink: var(--color-primary); }
.hl-panel { position: relative; width: min(440px, 100%); padding: 1.6rem 1.6rem 1.5rem; }
.hl-panel__x { position: absolute; top: 0.85rem; right: 0.95rem; width: 30px; height: 30px; padding: 0; border: none; border-radius: 8px; background: none; color: var(--color-grey-400, var(--color-muted)); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.hl-panel__x:hover { background: var(--color-fill); color: var(--color-heading); }

.hl-panel__eyebrow { margin: 0; padding-right: 2rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
/* The figure is the reason the panel opened, so it is the largest thing in
   it, and the unit rides at its baseline rather than on a line of its own. */
.hl-panel__figure { display: flex; align-items: baseline; gap: 0.45rem; margin: 0.3rem 0 0; font-family: var(--font-head); font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--hl-ink); }
.hl-panel__figure span { font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; color: var(--color-muted); }
.hl-panel__intro { margin: 0.75rem 0 0; font-size: 0.94rem; line-height: 1.6; color: var(--color-text); }

/* Name left, count right, hairlines between. A table without the furniture. */
.hl-panel__rows { list-style: none; margin: 1.15rem 0 0; padding: 0; }
.hl-panel__rows li { display: flex; align-items: baseline; gap: 0.9rem; padding: 0.6rem 0; border-top: 1px solid var(--color-border); }
.hl-panel__rows li:last-child { border-bottom: 1px solid var(--color-border); }
.hl-panel__rowname { flex: 1; min-width: 0; font-size: 0.93rem; color: var(--color-heading); overflow-wrap: break-word; }
.hl-panel__rowval { flex: none; font-family: var(--font-head); font-size: 0.95rem; font-weight: 700; color: var(--hl-ink); font-variant-numeric: tabular-nums; }

/* Names with no counts: two columns, no rules. A ladder of single words
   down the middle of a panel wastes the width and reads slower. */
.hl-panel__rows--names { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 1.25rem; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--color-border); }
.hl-panel__rows--names li { padding: 0.28rem 0; border: none; }
.hl-panel__rows--names li:last-child { border-bottom: none; }
.hl-panel__rows--names .hl-panel__rowname { position: relative; padding-left: 0.85rem; font-size: 0.9rem; }
.hl-panel__rows--names .hl-panel__rowname::before { content: ''; position: absolute; left: 0; top: 0.52em; width: 4px; height: 4px; border-radius: 50%; background: var(--hl-ink); }

/* The closing note is an aside, so it looks like one: quieter, set in from
   a rule the colour of the figure above it. */
.hl-panel__note { margin: 1.15rem 0 0; padding-left: 0.85rem; border-left: 2px solid var(--hl-soft); font-size: 0.86rem; line-height: 1.55; color: var(--color-muted); }

.hl-modal--violet { --hl-soft: #f4f0fe; --hl-ink: #6c46d6; }
.hl-modal--teal { --hl-soft: #eaf7f3; --hl-ink: #0f8b76; }
.hl-modal--amber { --hl-soft: #fdf6e9; --hl-ink: #a8741a; }
.hl-modal--blue { --hl-soft: #eef4fe; --hl-ink: #2f6fed; }

/* == Portal: editing the highlights ======================== */
.hlset .doc-panel__head { align-items: center; gap: 1rem; flex-wrap: wrap; }
.hlset__on { margin: 0 0 0 auto; }
.hlset__hint { margin: -0.2rem 0 0.6rem; }
/* One row per line, not a grid: these are a list, and a list laid out four
   across reads as a spreadsheet nobody asked for. Held to a readable width so
   the fields don't stretch the width of the panel. */
.hlrows { display: grid; gap: 0.45rem; max-width: 34rem; margin-bottom: 0.6rem; }
.hlrow { display: flex; align-items: center; gap: 0.4rem; }
.hlrow input { padding: 0.5rem 0.65rem; font: inherit; font-size: 0.9rem; color: var(--color-heading); background: var(--color-fill); border: 1px solid var(--color-border); border-radius: var(--radius-sm); min-width: 0; }
.hlrow__name { flex: 1 1 auto; }
.hlrow__count { flex: 0 0 6.5rem; }
.hlrow input:focus { outline: none; border-color: var(--color-primary); background: var(--color-surface); box-shadow: 0 0 0 3px var(--color-primary-light); }
.hlrow__x { flex: none; width: 28px; height: 28px; padding: 0; border: none; border-radius: 8px; background: none; color: var(--color-muted); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.hlrow__x:hover { background: var(--color-fill); color: #b3261e; }
.hlrows__add { margin-bottom: 1rem; padding: 0; border: none; background: none; font: inherit; font-size: 0.85rem; font-weight: 700; color: var(--color-primary); cursor: pointer; }
.hlrows__add:hover { text-decoration: underline; }
.hlset__note { margin-top: 0.2rem; }

/* == Doctor details dialog ================================= */
/* The popup behind a doctor card. It has one job the rest of the page can't
   do: when a doctor isn't sitting, say so in words, and then answer the
   question that raises — who do I see, and when?

   Three shapes, in the same frame. Somebody is covering (blue: nothing is
   lost, the name changed and the hours didn't). Nobody is (red, and the next
   OPD directly under it). Or the doctor is in, and today's hours lead. */

.hdlg .hweek-modal__box { position: relative; width: min(720px, 100%); padding: 1.15rem 1.35rem 1.25rem; }

/* The close button floats over the corner rather than sitting in a bar of its
   own. The head is already three columns wide; a fourth for one button left
   the facts nothing to breathe in. */
.hdlg__close { position: absolute; top: 0.8rem; right: 0.9rem; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: none; border-radius: 50%; background: var(--color-fill); color: var(--color-muted); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.hdlg__close:hover { background: var(--color-grey-200); color: var(--color-heading); }

/* ── Who, and the facts worth a journey ──────────────────── */
/* Department, room, fee and hospital sit beside the name rather than in a list
   further down: a patient who opened the wrong doctor should be able to tell
   before reading a word about their day. */
.hdlg__head { display: grid; grid-template-columns: auto minmax(190px, 1fr) minmax(225px, auto); align-items: start; gap: 0.5rem 1.15rem; padding: 0 2.4rem 0.95rem 0; margin-bottom: 0.95rem; border-bottom: 1px solid var(--color-border); }

.hdlg__figure { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.hdlg__photo { display: grid; place-items: center; width: 86px; height: 86px; overflow: hidden; border: 1px solid var(--color-border); border-radius: 13px; background: var(--color-fill); }
.hdlg__photo img { width: 100%; height: 100%; object-fit: cover; }
.hdlg__photo svg { width: 32px; height: 32px; color: var(--color-primary); }
.hdlg__figname { max-width: 88px; overflow: hidden; font-size: 0.68rem; font-weight: 600; color: var(--color-muted); text-align: center; text-overflow: ellipsis; white-space: nowrap; }

.hdlg__id { min-width: 0; }
.hdlg__name { display: flex; align-items: center; flex-wrap: wrap; gap: 0.1rem 0.4rem; margin: 0 0 0.1rem; font-family: var(--font-head); font-size: 1.26rem; font-weight: 700; line-height: 1.25; color: var(--color-heading); }
/* The rosette fills and the check inside it is cut out in white — the mark
   people already read as "confirmed" everywhere else. */
.hdlg__tick { display: inline-flex; flex: none; color: var(--color-primary); }
.hdlg__tick svg { width: 20px; height: 20px; }
.hdlg__tick svg path:first-child { fill: currentColor; }
.hdlg__tick svg path:last-child { stroke: #fff; stroke-width: 2.6; }
.hdlg__spec { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--color-primary); }
.hdlg__qual { margin: 0.1rem 0 0.45rem; font-size: 0.82rem; color: var(--color-muted); }

/* Covered, and the badge names the person: "Replacement Available" is a state,
   and a patient can't act on a state. */
.hdlg__by { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.34rem 0.7rem; border-radius: 999px; background: #e7effd; font-size: 0.82rem; font-weight: 700; color: var(--brand-700); }
.hdlg__by svg { width: 15px; height: 15px; flex: none; }

.hdlg__facts { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); justify-content: start; gap: 0.6rem 0; margin: 0; padding: 0; list-style: none; }
.hdlg__facts li { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; padding: 0 0.95rem; border-left: 1px solid var(--color-border); }
.hdlg__facts li:nth-child(odd) { padding-left: 0; border-left: none; }
.hdlg__factlabel { display: flex; align-items: center; gap: 0.32rem; font-size: 0.7rem; font-weight: 600; color: var(--color-muted); white-space: nowrap; }
.hdlg__factlabel svg { width: 15px; height: 15px; flex: none; }
.hdlg__factval { font-size: 0.9rem; font-weight: 700; color: var(--color-heading); overflow-wrap: anywhere; }

/* ── The notice ──────────────────────────────────────────── */
/* Loud on purpose. A red badge next to a set of hours is a puzzle; this is a
   sentence, and it is the first thing in the popup that isn't a name. */
.hdlg__alert { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem 1rem 1.15rem; border: 1px solid #f7cfc9; border-radius: 14px; background: #fdeceb; }
.hdlg__alerticon { display: grid; place-items: center; width: 54px; height: 54px; flex: none; }
.hdlg__alerticon svg { width: 42px; height: 42px; color: #d93b2b; stroke-width: 1.6; }
.hdlg__alerttext { display: flex; flex-direction: column; gap: 0.12rem; flex: 1; min-width: 0; }
.hdlg__alerttext strong { font-family: var(--font-head); font-size: 1.16rem; line-height: 1.25; color: #b3261e; }
.hdlg__alerttext span { font-size: 0.9rem; line-height: 1.45; color: #90423a; }
/* Decoration, and the first thing to go when the panel gets tight. Its own
   margins on top of the panel's padding: the drawing runs close to the edges
   of its box, so the box needs to sit well inside the panel or the couch ends
   up leaning on the border. */
.hdlg__art { width: 152px; height: 99px; flex: none; margin: 0.2rem 0.35rem 0.2rem 0.7rem; }

/* Covered: the same panel in blue, because nothing has been lost. Red here
   would send patients away from an OPD that is running. */
.hdlg__alert--cover { border-color: #d5e2fb; background: #eef3fe; }
.hdlg__alert--cover .hdlg__alerticon { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-600); color: #fff; }
.hdlg__alert--cover .hdlg__alerticon svg { width: 20px; height: 20px; color: #fff; stroke-width: 2.2; }
.hdlg__alert--cover .hdlg__alerttext strong { font-size: 1.1rem; color: var(--brand-700); }
.hdlg__alert--cover .hdlg__alerttext span { color: var(--color-text); }

/* ── Covered: the hours, and the doctor holding them ─────── */
/* The two things a patient needs once the name at the top stops being the
   answer, side by side and given equal weight. */
.hdlg__cover { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.1rem; margin-top: 0.9rem; padding-bottom: 0.95rem; border-bottom: 1px solid var(--color-border); }
.hdlg__coverwho { padding-left: 1.1rem; border-left: 1px solid var(--color-border); }
.hdlg__covttl { display: block; margin-bottom: 0.35rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.hdlg__coverwhen strong { display: block; font-family: var(--font-head); font-size: 1.5rem; line-height: 1.2; color: var(--color-heading); }
.hdlg__coverwhen .hpx__tag { margin-top: 0.35rem; }

.hdlg__standin { display: flex; align-items: center; gap: 0.65rem; }
.hdlg__standphoto { display: grid; place-items: center; width: 46px; height: 46px; flex: none; overflow: hidden; border: 1px solid var(--color-border); border-radius: 11px; background: var(--color-fill); }
.hdlg__standphoto img { width: 100%; height: 100%; object-fit: cover; }
.hdlg__standphoto svg { width: 20px; height: 20px; color: var(--color-primary); }
.hdlg__standid { display: flex; flex-direction: column; align-items: flex-start; gap: 0.12rem; min-width: 0; }
.hdlg__standid strong { font-size: 0.95rem; color: var(--color-heading); }
.hdlg__standqual { font-size: 0.76rem; color: var(--color-muted); }
.hdlg__standid .hpx__status { margin-top: 0.1rem; padding: 0.16rem 0.5rem; font-size: 0.7rem; }

/* ── Today's hours, for a doctor who is in ───────────────── */
.hdlg__panel { display: flex; align-items: center; gap: 0.9rem; padding: 0.85rem 1.1rem; border-radius: 14px; background: var(--color-fill); }
.hdlg__panelicon { display: grid; place-items: center; flex: none; color: var(--color-muted); }
.hdlg__panelicon svg { width: 30px; height: 30px; }
.hdlg__paneltext { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.hdlg__panellabel { font-size: 0.76rem; color: var(--color-muted); }
.hdlg__paneltext strong { font-family: var(--font-head); font-size: 1.1rem; color: var(--color-heading); }
.hdlg__paneltags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem; }
.hdlg__panel--green { background: #e7f6ee; }
.hdlg__panel--green .hdlg__panelicon { color: #11724f; }
.hdlg__panel--amber { background: #fdf3e0; }
.hdlg__panel--amber .hdlg__panelicon { color: #8a5a10; }
.hdlg__panel--blue { background: #e7effd; }
.hdlg__panel--blue .hdlg__panelicon { color: var(--brand-700); }
.hdlg__panel--red { background: #fdecea; }
.hdlg__panel--red .hdlg__panelicon { color: #b3261e; }

/* ── The next OPD ────────────────────────────────────────── */
/* The day on the left, the hours on the right, a rule between them: two
   answers to two different questions, not one long sentence. */
.hdlg__next { display: flex; align-items: center; gap: 1rem; margin-top: 0.7rem; padding: 0.85rem 1.15rem; border: 1px solid #d5e2fb; border-radius: 14px; background: #eef3fe; }
.hdlg__nexticon { display: grid; place-items: center; width: 46px; height: 46px; flex: none; }
.hdlg__nexticon svg { width: 34px; height: 34px; color: var(--brand-500); stroke-width: 1.7; }
.hdlg__nextday { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; padding-right: 1rem; border-right: 1px solid #cfdefa; }
.hdlg__nextlabel { font-size: 0.78rem; color: var(--color-muted); }
.hdlg__nextday strong { font-family: var(--font-head); font-size: 1.06rem; color: var(--brand-700); }
.hdlg__nexthours { display: inline-flex; align-items: center; gap: 0.5rem; flex: none; font-family: var(--font-head); font-size: 1.08rem; font-weight: 700; color: var(--color-heading); }
.hdlg__nexthours svg { width: 22px; height: 22px; flex: none; color: var(--brand-500); }
.hdlg__next--none .hdlg__nextday { padding-right: 0; border-right: none; }

/* A stand-in who couldn't be matched to a doctor here: a name and nothing
   more, which is still the answer to "who will I see instead?". */
.hdlg__repl { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; margin: 0.7rem 0 0; padding: 0.55rem 0.85rem; border: 1px solid #f0e0b8; border-radius: 10px; background: #fff9e9; }
.hdlg__repl span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #8a6100; }
.hdlg__repl strong { font-size: 0.9rem; color: #6b5520; }

/* A section label with the rest of the line ruled off. */
.hdlg__ttl { display: flex; align-items: center; gap: 0.8rem; margin: 1.15rem 0 0.55rem; }
.hdlg__ttl span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-muted); }
.hdlg__ttl::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }

/* ── The week, with today named as today ─────────────────── */
/* A day off keeps its hours and strikes them through. Blanking them leaves a
   hole where every other row states a time, and the week stops reading as a
   week; struck, the row says both things at once — this is the usual OPD, and
   it is not happening. */
.hdlg .hweek__day { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.hdlg .hweek__hours { display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; }
.hdlg .hweek__tag { border: 1px solid transparent; }
.hweek__todaytag { font-weight: 700; }
.hweek__chip { padding: 0.14rem 0.5rem; border-radius: 999px; background: rgba(255, 255, 255, 0.8); font-size: 0.68rem; font-weight: 700; color: inherit; }
.hweek__by { font-size: 0.7rem; font-weight: 600; color: var(--color-muted); text-decoration: none; }
.hweek__hours.is-struck { color: var(--color-muted); text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(179, 38, 30, 0.5); }
.hweek__row.is-today .hweek__day { font-weight: 700; }
.hweek__row--leave.is-today .hweek__day { color: #b3261e; }
.hweek__row--today.is-today .hweek__day { color: #0e6b48; }
/* The one outlined tag in the list. "Upcoming" is an offer and reads as a
   filled button; a day off is not an offer. */
.hdlg .hweek__row--leave .hweek__tag { border-color: #e0a49c; background: #fff; color: #c0392b; letter-spacing: 0.04em; text-transform: uppercase; }

/* ── The hospital's own word, and a way to reach it ──────── */
.hdlg__note { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.95rem; padding: 0.8rem 1rem; border: 1px solid #d5e2fb; border-radius: 14px; background: #eef3fe; }
.hdlg__noteic { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--brand-600); color: #fff; }
.hdlg__noteic svg { width: 18px; height: 18px; }
.hdlg__note p { flex: 1; min-width: 0; margin: 0; font-size: 0.87rem; line-height: 1.5; color: var(--color-text); }
.hdlg__note strong { color: var(--color-heading); }
/* An absence nobody is covering ends in a phone number: an emergency doesn't
   wait for the next OPD. */
.hdlg__note--leave { border-color: #f2e0b6; background: #fdf6e6; }
.hdlg__note--leave .hdlg__noteic { background: #e0a11f; }
.hdlg__note--leave p { color: #6b5520; }
.hdlg__note--leave strong { color: #5a4514; }
.hdlg__call { display: inline-flex; align-items: center; gap: 0.42rem; flex: none; padding: 0.55rem 0.9rem; border: 1px solid #dcb352; border-radius: 10px; background: var(--color-surface); font-size: 0.85rem; font-weight: 700; color: #9a6c12; }
.hdlg__call:hover { border-color: #9a6c12; background: #9a6c12; color: #fff; }
.hdlg__call svg { width: 16px; height: 16px; }

/* ── Whose hand was last on this ─────────────────────────── */
/* A schedule nobody has touched today is the one to trust least, so the popup
   closes by saying whether anybody has. */
.hdlg__stamp { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: 0.95rem 0 0; padding-top: 0.7rem; border-top: 1px solid var(--color-border); font-size: 0.76rem; color: var(--color-muted); }
.hdlg__stamp svg { width: 14px; height: 14px; flex: none; }
.hdlg__stamp strong { font-weight: 700; color: var(--color-text); }
.hdlg__stampdot { color: var(--color-grey-300); }

@media (max-width: 620px) {
  /* The facts drop under the name; the drawings go altogether — they were
     never carrying any of the meaning. */
  .hdlg__head { grid-template-columns: auto minmax(0, 1fr); }
  .hdlg__facts li { border-left: none; }
  .hdlg__facts { grid-column: 1 / -1; }
  .hdlg__art { display: none; }
  .hdlg__alerticon { width: 40px; height: 40px; }
  .hdlg__alerticon svg { width: 34px; height: 34px; }
  .hdlg__cover { grid-template-columns: minmax(0, 1fr); gap: 0.85rem; }
  .hdlg__coverwho { padding-left: 0; padding-top: 0.85rem; border-left: none; border-top: 1px solid var(--color-border); }
  .hdlg__next { flex-wrap: wrap; }
  .hdlg__nextday { padding-right: 0; border-right: none; }
  .hdlg__nexthours { padding-left: 3.4rem; }
  .hdlg__note { flex-wrap: wrap; }
  .hdlg__call { width: 100%; justify-content: center; }
}

/* Named for a screen reader, absent from the page. */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* == Doctor portal — Module 2 ============================== */

/* ── "I am at clinic now" ─────────────────────────────────── */
/* The one control on the doctor's page a patient feels within the minute, so
   it reads as a switch that is currently on or off rather than as another
   card. Off it is quiet; on it carries the same green beacon patients see. */
.pf-now { border: 1px solid var(--color-border); }
.pf-now.is-on { border-color: #9fd9be; background: #f2fbf7; }
.pf-now__head { display: flex; align-items: flex-start; gap: 0.8rem; margin-bottom: 0.9rem; }
.pf-now__id { flex: 1; min-width: 0; }
.pf-now__sub { margin: 0.2rem 0 0; font-size: 0.86rem; line-height: 1.5; color: var(--color-text); }
.pf-now__state { flex: none; padding: 0.25rem 0.65rem; border-radius: 999px; background: #12855a; color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

/* The beacon: a dot with one ring pulsing out of it. Reduced-motion turns the
   ring off and leaves the dot, which is what carries the meaning anyway. */
.pf-now__beacon { position: relative; display: block; width: 12px; height: 12px; margin-top: 0.35rem; flex: none; border-radius: 50%; background: var(--color-grey-300); }
.pf-now__beacon.is-live { background: #12b26b; }
.pf-now__beacon.is-live::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid #12b26b; animation: pf-ping 1.8s ease-out infinite; }
@keyframes pf-ping { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }

.pf-now__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.6rem; }
.pf-now__clinic { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.75rem 0.85rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.pf-now__clinic.is-here { border-color: #12b26b; box-shadow: 0 0 0 3px rgba(18, 178, 107, 0.13); }
.pf-now__cname { font-size: 0.92rem; font-weight: 700; color: var(--color-heading); }
.pf-now__cplace { font-size: 0.76rem; color: var(--color-muted); }
.pf-now__clinic .btn { margin-top: 0.55rem; }

/* The same pulse on the status pill, so "in the room now" never looks like
   the schedule's flat "In Clinic Today". */
.pf-pill--live, .status-badge--live { position: relative; }
.status-badge--live::before { position: relative; }
.status-badge--live::after {
  content: ''; position: absolute; top: 50%; left: 0.7rem; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; border: 2px solid currentColor; animation: pf-ping 1.8s ease-out infinite;
}
/* `.pf-pill` has no dot of its own, so the live variant grows one. */
.pf-pill--live { padding-left: 1.6rem; }
.pf-pill--live::before {
  content: ''; position: absolute; top: 50%; left: 0.7rem; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: currentColor;
}
.pf-pill--live::after {
  content: ''; position: absolute; top: 50%; left: 0.7rem; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; border: 2px solid currentColor; animation: pf-ping 1.8s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .pf-now__beacon.is-live::after, .pf-pill--live::after, .status-badge--live::after { animation: none; opacity: 0.35; }
}

/* ── The live banner on a public profile ──────────────────── */
/* Above everything else on the page: a patient who can go now needs to know
   before they read a bio. */
/* Which clinic, in the doctor's own words. The banner's whole job is to send
   someone to an address, so the address gets the weight, not the headline. */

/* ── Expertise tags ───────────────────────────────────────── */
/* Links, not labels: each one is the search a patient would have run to find
   this doctor, so it should take them to everyone else who treats it. */

/* ── Degrees & awards ─────────────────────────────────────── */

/* ── Social links ─────────────────────────────────────────── */

/* ── Per-clinic contact row ───────────────────────────────── */

/* ── Directory: the expertise filter ──────────────────────── */
.doc-search__filter { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin: 0.75rem 0 0; font-size: 0.86rem; }
.doc-search__tag { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.32rem 0.7rem; border-radius: 999px; background: var(--brand-600); font-weight: 700; color: #fff; }
.doc-search__tag svg { width: 15px; height: 15px; }

/* ── The tag field on the edit form ───────────────────────── */
/* The input is the control; the chips underneath are a shortcut, and a chip
   already in the line reads as picked so the row doubles as a view of the
   selection. */
.tagfield__picks { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; max-height: 8.5rem; overflow-y: auto; padding: 0.15rem; }
.tagfield__pick { padding: 0.28rem 0.65rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--color-text); cursor: pointer; }
.tagfield__pick:hover { border-color: var(--color-primary); color: var(--color-primary); }
.tagfield__pick.is-on { border-color: var(--brand-600); background: var(--brand-600); color: #fff; }
.tagfield__pick.is-on::before { content: '✓ '; }

/* A field that is genuinely fine to leave blank, said on the label rather than
   only in the hint underneath — the hint is read after the decision. */
.form-optional { margin-left: 0.35rem; padding: 0.1rem 0.4rem; border-radius: 999px; background: var(--color-fill); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--color-muted); }

/* == Doctor portal — publishing ============================ */

/* ── Announcements: picking a kind ────────────────────────── */
/* The kind is chosen first because it decides the colour and the artwork, so
   it is a row of cards rather than a dropdown — the choice is visual and the
   dropdown hid that. */
.dann-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem; }
.dann-kind { position: relative; display: block; cursor: pointer; }
.dann-kind input { position: absolute; opacity: 0; pointer-events: none; }
.dann-kind__box { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 0.8rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); font-size: 0.85rem; font-weight: 600; color: var(--color-heading); transition: border-color 0.15s var(--ease), background 0.15s var(--ease); }
.dann-kind__box svg { width: 18px; height: 18px; flex: none; color: var(--color-muted); }
.dann-kind:hover .dann-kind__box { border-color: var(--color-primary); }
.dann-kind input:checked + .dann-kind__box { border-color: var(--brand-600); background: var(--brand-50); color: var(--brand-700); }
.dann-kind input:checked + .dann-kind__box svg { color: var(--brand-600); }
.dann-kind input:focus-visible + .dann-kind__box { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.dann-kind--red input:checked + .dann-kind__box { border-color: #c0392b; background: #fdeceb; color: #a32b22; }
.dann-kind--red input:checked + .dann-kind__box svg { color: #c0392b; }
.dann-kind--amber input:checked + .dann-kind__box { border-color: #b8801a; background: #fdf6e6; color: #8a5a10; }
.dann-kind--amber input:checked + .dann-kind__box svg { color: #b8801a; }
.dann-kind--green input:checked + .dann-kind__box { border-color: #12855a; background: #eefaf4; color: #0e6b48; }
.dann-kind--green input:checked + .dann-kind__box svg { color: #12855a; }

/* ── Announcements: the board ─────────────────────────────── */
.dann-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.dann { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.75rem; padding: 0.9rem 1rem; border: 1px solid var(--color-border); border-left-width: 4px; border-radius: 12px; background: var(--color-surface); }
.dann--red { border-left-color: #c0392b; }
.dann--amber { border-left-color: #b8801a; }
.dann--green { border-left-color: #12855a; }
.dann--blue { border-left-color: var(--brand-500); }
/* A notice patients can't see is dimmed, but never hidden — the doctor came
   here to find out why it isn't showing. */
.dann.is-hidden { background: var(--color-fill); }
.dann.is-hidden .dann__title { color: var(--color-muted); }
.dann__icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 9px; background: var(--color-fill); color: var(--color-muted); }
.dann__icon svg { width: 18px; height: 18px; }
.dann__body { min-width: 0; }
.dann__top { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.25rem; }
.dann__kind { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); }
.dann__prio { padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; }
.dann__prio--high { background: #fdf6e6; color: #8a5a10; }
.dann__prio--urgent { background: #fdeceb; color: #a32b22; }
.dann__live { padding: 0.1rem 0.45rem; border-radius: 999px; background: #eefaf4; font-size: 0.68rem; font-weight: 700; color: #0e6b48; }
.dann__why { padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--color-fill); font-size: 0.68rem; font-weight: 700; color: var(--color-muted); }
.dann__title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--color-heading); }
.dann__text { margin: 0.2rem 0 0; font-size: 0.88rem; line-height: 1.5; color: var(--color-text); }
.dann__meta { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin: 0.4rem 0 0; font-size: 0.76rem; color: var(--color-muted); }
.dann__meta svg { width: 13px; height: 13px; vertical-align: -2px; }
.dann__art { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.dann__thumb { width: 54px; height: 54px; object-fit: cover; border-radius: 8px; border: 1px solid var(--color-border); }
.dann__upload { display: flex; align-items: center; gap: 0.4rem; }
.dann__upload input[type="file"] { max-width: 170px; font-size: 0.74rem; }
.dann__acts { display: flex; flex-direction: column; gap: 0.3rem; align-items: stretch; }

@media (max-width: 720px) {
  .dann { grid-template-columns: auto minmax(0, 1fr); }
  .dann__acts { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
}

/* ── Posts: the doctor's own list ─────────────────────────── */
.dpost-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }

/* Three columns, and the last one is fixed. The actions used to size to their
   own text, so a row with "Send for review" in it was a different shape from
   the row above — which is what made the list look scattered. */
.dpost { display: grid; grid-template-columns: 96px minmax(0, 1fr) 140px; align-items: start; gap: 0.9rem; padding: 0.8rem 0.9rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }

/* The icon is a layer behind the picture, not an alternative to it: a
   thumbnail that fails — a pulled video, a bad id — then falls back to the
   plate instead of a broken-image glyph. */
.dpost__thumb { position: relative; width: 96px; height: 68px; overflow: hidden; border-radius: 9px; background: var(--color-fill); }
.dpost__thumbicon { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-grey-300); }
.dpost__thumbicon svg { width: 24px; height: 24px; }
.dpost__thumb img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.dpost__thumb img[hidden] { display: none; }

.dpost__body { min-width: 0; }
.dpost__top { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.3rem; font-size: 0.76rem; }
.dpost__note { color: var(--color-muted); }
.dpost__note--dot::before { content: '·'; margin-right: 0.4rem; }
.dpost__type { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); }
/* The state is the loudest thing on the row: a doctor who reads "saved" as
   "published" waits a week wondering why nobody has read it. */
.dpost__state { padding: 0.16rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.dpost__state--grey { background: var(--color-fill); color: var(--color-muted); }
.dpost__state--amber { background: #fdf6e6; color: #8a5a10; }
.dpost__state--green { background: #eefaf4; color: #0e6b48; }
.dpost__state--red { background: #fdeceb; color: #a32b22; }
.dpost__title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.35; color: var(--color-heading); overflow-wrap: anywhere; }
/* Two lines of summary is a summary; six is the article. */
.dpost__sum { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0.25rem 0 0; font-size: 0.87rem; line-height: 1.5; color: var(--color-text); overflow-wrap: anywhere; }
.dpost__meta { margin: 0.3rem 0 0; font-size: 0.76rem; color: var(--color-muted); }
.dpost__why { margin: 0.45rem 0 0; padding: 0.5rem 0.7rem; border-radius: 9px; background: #fdeceb; font-size: 0.84rem; line-height: 1.45; color: #8f3b31; }

/* One column of equal-width buttons. `> form` is there because half of these
   are forms wrapping a button, and without it the wrapper collapsed to its
   content and the button inside it stopped filling the column. */
.dpost__acts { display: grid; gap: 0.3rem; align-content: start; }
.dpost__acts > form { display: grid; }
.dpost__acts .btn { width: 100%; padding: 0.4rem 0.6rem; justify-content: center; font-size: 0.8rem; white-space: nowrap; }
.dpost__cover { display: grid; gap: 0.35rem; }
/* The file input is the label. A raw one is a different widget from every
   other control on the row, which is most of why this column looked untidy. */
.dpost__coverpick { cursor: pointer; }
.dpost__coverpick input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Scripts auto-submit the moment a file is picked, so the explicit Upload is
   only ever needed without them. */
.js-enabled .dpost__covergo { display: none; }

@media (max-width: 760px) {
  .dpost__note--dot::before { content: none; }
  .dpost { grid-template-columns: 76px minmax(0, 1fr); gap: 0.75rem; }
  .dpost__thumb { width: 76px; height: 56px; }
  /* Full width under the row rather than a squeezed third column. */
  .dpost__acts { grid-column: 1 / -1; grid-auto-flow: column; grid-auto-columns: 1fr; }
}
@media (max-width: 460px) {
  .dpost__acts { grid-auto-flow: row; }
}

/* ── Recommendations ──────────────────────────────────────── */
.drec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.drec { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 1rem; border: 1px solid var(--color-border); border-left-width: 4px; border-radius: 12px; background: var(--color-surface); }
.drec--amber { border-left-color: #b8801a; }
.drec--green { border-left-color: #12855a; }
.drec--grey { border-left-color: var(--color-grey-300); }
.drec__body { flex: 1; min-width: 0; }
.drec__who { margin: 0; font-size: 0.98rem; font-weight: 700; color: var(--color-heading); }
.drec__note { margin: 0.2rem 0 0; font-size: 0.88rem; font-style: italic; line-height: 1.5; color: var(--color-text); }
.drec__state { margin: 0.4rem 0 0; }
.drec__pill { padding: 0.14rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
.drec__pill--amber { background: #fdf6e6; color: #8a5a10; }
.drec__pill--green { background: #eefaf4; color: #0e6b48; }
.drec__pill--grey { background: var(--color-fill); color: var(--color-muted); }
.drec__acts { display: flex; gap: 0.4rem; flex: none; }
.drec__count { padding: 0.16rem 0.55rem; border-radius: 999px; background: #fdf6e6; font-size: 0.76rem; font-weight: 700; color: #8a5a10; }

@media (max-width: 620px) { .drec { flex-wrap: wrap; } .drec__acts { width: 100%; } }

/* ── Reviews: the doctor's side ───────────────────────────── */
.drev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.drev { padding: 0.95rem 1.1rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.drev.is-hidden { background: var(--color-fill); }
.drev__head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.35rem; }
.drev__name { font-size: 0.95rem; color: var(--color-heading); }
.drev__date { font-size: 0.78rem; }
.drev__flag { padding: 0.14rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; }
.drev__flag--hidden { background: var(--color-fill); color: var(--color-muted); }
.drev__flag--pending { background: #fdf6e6; color: #8a5a10; }
.drev__text { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--color-text); }
.drev__reply, .review__reply { margin: 0.6rem 0 0; padding: 0.6rem 0.8rem; border-left: 3px solid var(--brand-300); border-radius: 0 9px 9px 0; background: var(--brand-50); }
.drev__replyhead, .review__replyhead { margin: 0 0 0.15rem; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--brand-700); }
.drev__reply p, .review__reply p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--color-text); }
.drev__do { margin-top: 0.7rem; }
.drev__do > summary { cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--color-primary); }
.drev__form { display: grid; gap: 0.4rem; margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--color-border); }
.drev__form label { font-size: 0.8rem; font-weight: 600; color: var(--color-heading); }
.drev__form textarea { padding: 0.55rem 0.7rem; font: inherit; font-size: 0.88rem; border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-fill); resize: vertical; }
.drev__form button { justify-self: start; }
.drev__hide { margin-top: 0.15rem; }

/* ── Analytics ────────────────────────────────────────────── */
.dstat-range { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.9rem; }
.dstat-range__tabs { display: flex; gap: 0.3rem; }
.dstat-range__tab { padding: 0.4rem 0.85rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); font: inherit; font-size: 0.84rem; font-weight: 600; color: var(--color-text); cursor: pointer; }
.dstat-range__tab:hover { border-color: var(--color-primary); color: var(--color-primary); }
.dstat-range__tab.is-on { border-color: var(--brand-600); background: var(--brand-600); color: #fff; }
.dstat-range__custom { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--color-muted); }
.dstat-range__custom input { padding: 0.35rem 0.5rem; font: inherit; font-size: 0.82rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); }

.dstat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.6rem; margin-bottom: 0.9rem; }
.dstat { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.9rem 1rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.dstat__icon { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 0.25rem; border-radius: 8px; background: var(--brand-50); color: var(--brand-600); }
.dstat__icon svg { width: 16px; height: 16px; }
.dstat__val { font-family: var(--font-head); font-size: 1.65rem; font-weight: 700; line-height: 1.1; color: var(--color-heading); font-variant-numeric: tabular-nums; }
.dstat__label { font-size: 0.78rem; color: var(--color-muted); }

.dchart svg { display: block; width: 100%; height: 150px; }
.dchart__axis { display: flex; justify-content: space-between; margin: 0.3rem 0 0; font-size: 0.74rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }

/* Said in words, not shown as zeroes: a confident 0 reads as "nobody wants
   you", which is a different and much worse claim than "nobody is counting". */
.dstat-soon__list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.dstat-soon__list li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem; border: 1px dashed var(--color-border); border-radius: 999px; font-size: 0.82rem; color: var(--color-muted); }
.dstat-soon__list svg { width: 15px; height: 15px; }

/* ── QR: formats, the leave poster, and sharing ───────────── */
.pf-qr__formats { display: flex; justify-content: center; gap: 0.3rem; margin: 0.5rem 0 0; }
.pf-qr__formats a, .pf-qr__formats button { padding: 0.28rem 0.6rem; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-surface); font: inherit; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.03em; color: var(--color-text); cursor: pointer; }
.pf-qr__formats a:hover, .pf-qr__formats button:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pf-qr__leave { margin-top: 0.5rem; font-size: 0.78rem; }
.pf-qr__leave > summary { cursor: pointer; color: var(--color-primary); font-weight: 600; }
.pf-qr__leave form { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 0.35rem; margin-top: 0.45rem; }
.pf-qr__leave label { color: var(--color-muted); }
.pf-qr__leave input { padding: 0.3rem 0.45rem; font: inherit; font-size: 0.76rem; border: 1px solid var(--color-border); border-radius: 7px; }
.pf-qr__share { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.3rem; margin: 0.55rem 0 0; }
.pf-qr__sharebtn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.32rem 0.6rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); font: inherit; font-size: 0.75rem; font-weight: 600; color: var(--color-heading); cursor: pointer; }
.pf-qr__sharebtn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.pf-qr__sharebtn svg { width: 14px; height: 14px; }

/* The share button on a public profile, revealed by script. */

/* ── Admin: the approval queue ────────────────────────────── */
.apost-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.apost { padding: 1rem 1.1rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.apost__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.4rem; }
.apost__type { padding: 0.14rem 0.5rem; border-radius: 999px; background: var(--brand-50); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--brand-700); }
.apost__title { font-size: 1.02rem; color: var(--color-heading); }
.apost__sum { margin: 0 0 0.5rem; font-size: 0.9rem; line-height: 1.55; color: var(--color-text); }
/* The whole post, inline. A reviewer who has to open another tab to read the
   article will approve it without reading the article. */
.apost__body { max-height: 340px; overflow-y: auto; padding: 0.8rem 0.95rem; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-fill); font-size: 0.9rem; line-height: 1.7; white-space: pre-wrap; color: var(--color-text); }
.apost__thumb { width: 260px; max-width: 100%; border-radius: 10px; margin-top: 0.5rem; }
.apost__link { margin: 0 0 0.3rem; font-size: 0.85rem; }
.apost__decide { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px solid var(--color-border); }
.apost__decide input[type="text"] { flex: 1; min-width: 220px; padding: 0.45rem 0.65rem; font: inherit; font-size: 0.85rem; border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-fill); }

/* ── Admin: reported reviews ──────────────────────────────── */
/* An empty queue is good news, so it says so rather than trailing off in
   grey. It was a bare sentence in the corner of a large empty panel. */
.apost-clear { display: flex; align-items: center; gap: 0.55rem; margin: 0; padding: 0.85rem 1rem; border: 1px solid #c9e7d7; border-radius: 10px; background: #eefaf4; font-size: 0.88rem; color: #0e6b48; }
.apost-clear__tick { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; background: #12855a; color: #fff; }
.apost-clear__tick svg { width: 13px; height: 13px; }

/* The decided list. This was marked up as `.admin-table`, a class that was
   never written — so it rendered as a browser-default table with no borders,
   no padding and columns collapsed onto their content. */
.apost-scroll { overflow-x: auto; }
.apost-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.87rem; }
.apost-table th {
  padding: 0.45rem 0.75rem; text-align: left;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--color-muted); white-space: nowrap;
}
.apost-table td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid var(--color-subtle); vertical-align: middle; }
.apost-table tr:last-child td { border-bottom: 0; }
.apost-table tbody tr:hover { background: var(--color-fill); }
.apost-table th:first-child, .apost-table td:first-child { padding-left: 0; }
.apost-table th:last-child, .apost-table td:last-child { padding-right: 0; text-align: right; }
.apost-table__title { display: block; font-weight: 600; color: var(--color-heading); }
.apost-table__type { display: block; margin-top: 0.1rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); }
.apost-table__when { color: var(--color-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.arev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.arev { padding: 1rem 1.1rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.arev__top { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.3rem; font-size: 0.85rem; }
.arev__text { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--color-text); }
/* The doctor's objection sits under the review, never above it: a moderator
   who reads the complaint first is judging the complaint. */
.arev__claim { margin-top: 0.7rem; padding: 0.7rem 0.85rem; border-left: 3px solid #b8801a; border-radius: 0 9px 9px 0; background: #fdf6e6; }
.arev__claimhead { margin: 0 0 0.2rem; font-size: 0.78rem; font-weight: 700; color: #8a5a10; }
.arev__asked { margin-left: 0.4rem; padding: 0.1rem 0.45rem; border-radius: 999px; background: #c0392b; font-size: 0.68rem; color: #fff; text-transform: uppercase; }
.arev__reason { margin: 0; font-size: 0.88rem; line-height: 1.5; color: #6b5520; }
.arev__decide { display: flex; gap: 0.45rem; margin-top: 0.8rem; }

/* ── Gallery ──────────────────────────────────────────────── */
.dgal-add { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.dgal-add input[type="text"] { flex: 1; min-width: 180px; padding: 0.45rem 0.65rem; font: inherit; font-size: 0.86rem; border: 1px solid var(--color-border); border-radius: 9px; background: var(--color-fill); }
.dgal { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.7rem; }
.dgal__item { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-surface); }
.dgal__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.dgal__cap { display: flex; gap: 0.3rem; }
.dgal__cap input { flex: 1; min-width: 0; padding: 0.3rem 0.5rem; font: inherit; font-size: 0.78rem; border: 1px solid var(--color-border); border-radius: 7px; background: var(--color-fill); }
.dgal__del { display: flex; }
.dgal__del button { width: 100%; }

/* The public side: a strip of photos, captioned only where there is something
   worth saying about one. */

/* ── Posts: the list page's own furniture ─────────────────── */
.dpost-new { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.dpost-new .btn svg { width: 15px; height: 15px; }

/* An empty group centres its invitation. A blank panel with an apologetic
   sentence in the corner is a dead end; the button is the point. */
.dpost-empty { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; padding: 1.6rem 1rem; text-align: center; }
.dpost-empty__text { max-width: 42ch; margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--color-muted); }
.dpost-empty .btn svg { width: 15px; height: 15px; }

/* Nothing at all: one invitation in the middle of the page, rather than two
   empty sections with headings over them. */
.dpost-empty--page { padding: 3.2rem 1.2rem; border: 1px dashed var(--color-border); border-radius: 16px; background: var(--color-surface); }
.dpost-empty__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--brand-50); color: var(--brand-600); }
.dpost-empty__icon svg { width: 26px; height: 26px; }
.dpost-empty__title { margin: 0.3rem 0 0; font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; color: var(--color-heading); }
.dpost-empty__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 0.35rem; }
.dpost-empty__acts .btn svg { width: 16px; height: 16px; }

.dpost-form__note { margin: 0.5rem 0 0; font-size: 0.82rem; }

/* == Public doctor profile ================================= */
/* Built like the hospital page: a few connected sheets divided by hairlines,
   not a stack of floating cards. A row of separate boxes makes every section
   look equally important and leaves the page mostly gutter; one sheet reads
   as a single document, and the rules inside it do the separating all that
   white space was doing badly. */

.dp {
  --dp-ink:    #131c26;
  --dp-text:   #4a5563;
  --dp-mute:   #77828f;
  --dp-line:   #e2e6eb;
  --dp-line-2: #eef0f3;
  --dp-ground: #ffffff;
  --dp-bg:     #f6f7f9;
  --dp-card:   #ffffff;
  --dp-blue:   #1a6ae0;
  --dp-blue-d: #1553b4;
  --dp-blue-t: #eef4fd;
  --dp-green:  #15884f;
  --dp-green-t:#eefaf3;
  --dp-wa:     #1ba94c;
  --dp-amber:  #b5761a;
  --dp-amber-t:#fff8ec;
  --dp-red:    #c0392b;
  --dp-red-t:  #fdefed;
  --dp-r:      8px;

  background: var(--dp-ground);
  color: var(--dp-text);
  font-size: 13.5px;
  line-height: 1.5;
}
/* No max-width and no auto margins: narrowing the window should pull the
   content toward the sidebar, not strand it in the middle of the screen with
   a margin on each side. The dividing rules run edge to edge; the padding
   that keeps text off the border lives on the sections instead. */
.dp__wrap { padding: 0 0 28px; }
.dp__back { margin: 0; padding: 12px 20px 10px; }
.dp svg { width: 14px; height: 14px; flex: none; }

.dp__back { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 10px; font-size: 12.5px; font-weight: 500; color: var(--dp-mute); }
.dp__back:hover { color: var(--dp-blue); }
.dp__back svg { transform: rotate(180deg); width: 13px; height: 13px; }

/* ── The sheet ────────────────────────────────────────────── */
/* One bordered surface; the sections inside are ruled off each other rather
   than floated apart. `> * + *` is the whole trick. */
.dp-sheet { min-width: 0; }
/* One rule under each section — that is the whole separation. Boxes made
   every section look equally important and turned the page into gutter. */
.dp-sec { padding: 15px 20px; border-bottom: 1px solid var(--dp-line-2); }
.dp-sheet > .dp-sec:last-child { border-bottom: 0; }
.dp-sec__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-bottom: 9px; }
.dp-sec__ttl { margin: 0 0 9px; font-family: var(--font-head, inherit); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--dp-ink); }
.dp-sec__head .dp-sec__ttl { margin: 0; }
.dp-sec__all { padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--dp-blue); cursor: pointer; }

/* ── Top: identity sheet beside the updates panel ─────────── */
.dp-top { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: stretch; border-top: 1px solid var(--dp-line); border-bottom: 1px solid var(--dp-line); }

/* Four columns joined by hairlines, not four cards with gaps. */
.dp-ident { display: grid; grid-template-columns: 148px minmax(0, 1fr) 190px; align-items: stretch; }
.dp-ident > * { padding: 16px 20px; }
.dp-ident > * + * { border-left: 1px solid var(--dp-line-2); }

.dp-ident__photo { display: grid; place-items: start center; align-self: start; }
.dp-ident__photo img,
.dp-ident__photo > svg { width: 116px; height: 130px; border-radius: var(--dp-r); }
.dp-ident__photo img { object-fit: cover; border: 1px solid var(--dp-line); }
/* No photo: the plate keeps the same footprint so the row doesn't reflow when
   one is added, with the icon centred inside it. */
.dp-ident__photo > svg { padding: 45px; border: 1px solid var(--dp-line); background: var(--dp-bg); color: #b9c2cd; box-sizing: border-box; }

.dp-ident__id { min-width: 0; display: grid; gap: 6px; align-content: start; }
.dp-ident__name {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0;
  font-family: var(--font-head, inherit); font-size: 20px; font-weight: 700;
  line-height: 1.2; letter-spacing: -0.02em; color: var(--dp-ink);
}
.dp-ident__spec { margin: -2px 0 0; font-size: 14px; font-weight: 600; color: var(--dp-blue); }

.dp-facts { display: grid; gap: 4px; margin: 2px 0 0; padding: 0; list-style: none; font-size: 12.5px; }
.dp-facts li { display: flex; align-items: baseline; gap: 7px; }
.dp-facts__ic { display: inline-flex; align-items: center; height: 1em; color: var(--dp-mute); }
.dp-facts__rate svg { color: #e8a723; fill: #e8a723; stroke: none; }
.dp-facts__rate strong { color: var(--dp-ink); }
.dp-facts__rec { color: var(--dp-mute); white-space: nowrap; }
.dp-facts__rate { white-space: nowrap; }
.dp-facts__wrap { display: flex; flex-wrap: wrap; gap: 3px 14px; }
.dp-facts__wrap > span { display: inline-flex; align-items: baseline; gap: 7px; }

.dp-tick {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 4px;
  background: var(--dp-green-t); color: var(--dp-green); font-size: 11.5px; font-weight: 700;
}
.dp-tick svg { width: 12px; height: 12px; }
.dp-tick svg path:first-child { fill: currentColor; }
.dp-tick svg path:last-child { stroke: var(--dp-green-t); stroke-width: 2.6; }
.dp-tick--sm { font-size: 10.5px; padding: 1px 5px; }

.dp-ident__acts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 3px; }
.dp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border: 1px solid transparent; border-radius: 6px;
  font-size: 13px; font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap;
}
.dp-btn--wa { background: var(--dp-wa); color: #fff; }
.dp-btn--wa:hover { background: #17913f; color: #fff; }
.dp-btn--call { background: var(--dp-card); border-color: var(--dp-line); color: var(--dp-ink); }
.dp-btn--call svg { color: var(--dp-blue); }
.dp-btn--call:hover { border-color: var(--dp-blue); color: var(--dp-ink); }
.dp-btn--book { background: var(--dp-blue); color: #fff; }
.dp-btn--book:hover { background: var(--dp-blue-d); color: #fff; }

/* ── The at-a-glance strip ────────────────────────────────── */
.dp-strip { display: grid; gap: 11px; align-content: start; }
.dp-strip__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; margin: 0; align-items: baseline; }
.dp-strip__row > span { display: grid; gap: 1px; font-size: 13px; color: var(--dp-text); }
.dp-strip__lbl { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dp-mute); }
.dp-strip__row strong { font-size: 13.5px; font-weight: 700; color: var(--dp-ink); }
.dp-strip__row em { font-style: normal; font-size: 12px; color: var(--dp-mute); }

.dp-dot { width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--dp-mute); }
.dp-dot--green { background: #1bb567; }
.dp-dot--blue  { background: var(--dp-blue); }
.dp-dot--amber { background: #e0a11f; }
.dp-dot--red   { background: var(--dp-red); }
.dp-dot--grey  { background: #b3bcc7; }
/* Only presence pulses. A dot that throbs for a static fact reads as loading. */
.dp-dot.is-live { position: relative; }
.dp-dot.is-live::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid #1bb567; animation: dp-ping 1.8s ease-out infinite;
}
@keyframes dp-ping { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .dp-dot.is-live::after { animation: none; opacity: 0.35; } }

/* ── QR ───────────────────────────────────────────────────── */
.dp-qr__sub { margin: -4px 0 9px; font-size: 12px; color: var(--dp-mute); }
.dp-qr__img { display: block; width: 136px; height: 136px; margin: 0 auto; padding: 6px; border: 1px solid var(--dp-line); border-radius: 6px; background: #fff; }
.dp-qr__btns { display: grid; gap: 4px; justify-items: center; margin: 10px 0 0; }
.dp-qr__dl {
  display: inline-flex; align-items: center; gap: 5px; padding: 0;
  border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--dp-blue); cursor: pointer;
}
.dp-qr__dl:hover { color: var(--dp-blue-d); }
.dp-qr__dl svg { width: 13px; height: 13px; }

/* ── Updates, top right ───────────────────────────────────── */
/* An announcement is the most perishable thing a doctor publishes, so it sits
   where the eye lands, not halfway down a column. Three deep — enough to see
   there is news, not so many that the clinic timings fall off the screen. */
.dp-live { display: grid; align-content: start; border-left: 1px solid var(--dp-line); }
.dp-live__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 13px 18px; border-bottom: 1px solid var(--dp-line-2); }
.dp-live__ttl { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--dp-ink); }
.dp-live__ttl svg { color: var(--dp-red); }
.dp-live__count { padding: 2px 7px; border-radius: 4px; background: var(--dp-red-t); font-size: 11px; font-weight: 700; color: var(--dp-red); }
.dp-live__empty { margin: 0; padding: 15px 18px; font-size: 12.5px; color: var(--dp-mute); }
.dp-live__list { margin: 0; padding: 0; list-style: none; }
.dp-live__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; padding: 11px 18px; }
.dp-live__item + .dp-live__item { border-top: 1px solid var(--dp-line-2); }
.dp-live__kind { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dp-mute); }
.dp-live__text { margin: 1px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--dp-ink); }
/* Two lines of detail in a panel this narrow; the full text is one click on. */
.dp-live__sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: var(--dp-text); }
.dp-live__meta { margin: 3px 0 0; font-size: 11px; color: var(--dp-mute); }
.dp-live__all { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 11px; border-top: 1px solid var(--dp-line-2); font-size: 12.5px; font-weight: 600; color: var(--dp-blue); }
.dp-live__all:hover { background: var(--dp-blue-t); }
.dp-live__all svg { width: 13px; height: 13px; }

/* ── Tabs ─────────────────────────────────────────────────── */
.dp-tabs { display: flex; gap: 2px; overflow-x: auto; padding: 0 20px; border-bottom: 1px solid var(--dp-line); }
.dp-tabs__tab { padding: 10px 12px; border-bottom: 2px solid transparent; font-size: 13px; font-weight: 600; color: var(--dp-mute); white-space: nowrap; }
.dp-tabs__tab:hover { color: var(--dp-ink); }
.dp-tabs__tab.is-on { color: var(--dp-blue); border-bottom-color: var(--dp-blue); }

/* ── Body ─────────────────────────────────────────────────── */
.dp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.dp-main { min-width: 0; }
.dp-side { position: sticky; top: 0; border-left: 1px solid var(--dp-line); }
.dp-side__ttl { display: flex; align-items: center; gap: 6px; margin: 0 0 9px; font-size: 13px; font-weight: 700; color: var(--dp-ink); }
.dp-side__ttl svg { color: var(--dp-blue); }

/* ── About ────────────────────────────────────────────────── */
.dp-about { display: grid; grid-template-columns: minmax(0, 1fr) 148px; gap: 16px; }
.dp-about p { margin: 0 0 7px; font-size: 13px; line-height: 1.6; }
.dp-about p:last-child { margin-bottom: 0; }
.dp-about__langs { padding-left: 16px; border-left: 1px solid var(--dp-line-2); }
.dp-about__langhead { display: flex; align-items: center; gap: 5px; margin: 0 0 6px !important; font-size: 12px; font-weight: 700; color: var(--dp-blue); }
.dp-about__langs ul { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; }
.dp-clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.dp-clamp.is-open { display: block; }
.dp-readmore { margin-top: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--dp-blue); cursor: pointer; }
.dp-prose { margin: 0; font-size: 13px; line-height: 1.6; }

/* ── Tags ─────────────────────────────────────────────────── */
.dp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dp-tags a { display: inline-block; padding: 5px 10px; border: 1px solid var(--dp-line); border-radius: 5px; background: #fafbfc; font-size: 12.5px; font-weight: 500; color: var(--dp-ink); }
.dp-tags a:hover { border-color: var(--dp-blue); background: var(--dp-blue-t); color: var(--dp-blue-d); }
.dp-tags__more { align-self: center; font-size: 12.5px; color: var(--dp-mute); }
.dp-tags__rest { display: none; }
.dp-tags.is-all .dp-tags__rest { display: block; }
.dp-tags.is-all .dp-tags__more { display: none; }

/* ── Clinics ──────────────────────────────────────────────── */
.dp-clinic { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 18px; padding: 18px 0; border-top: 1px solid var(--dp-line-2); }
.dp-clinic:first-of-type { padding-top: 4px; border-top: 0; }
.dp-clinic:last-of-type { padding-bottom: 2px; }
.dp-clinic--rest { display: none; }
.dp-clinic--rest.is-shown { display: grid; }
.dp-clinic__id { min-width: 0; }
.dp-clinic__name { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.35; color: var(--dp-ink); }
.dp-clinic__addr { display: flex; align-items: flex-start; gap: 5px; margin: 4px 0 0; font-size: 12px; line-height: 1.45; color: var(--dp-mute); }
.dp-clinic__addr svg { margin-top: 2px; }
.dp-clinic__addr svg { width: 12px; height: 12px; }
.dp-clinic__when { display: grid; gap: 3px; text-align: right; font-size: 12.5px; white-space: nowrap; }
.dp-clinic__when p { display: flex; align-items: baseline; justify-content: flex-end; gap: 9px; margin: 0; }
.dp-clinic__when strong { color: var(--dp-ink); white-space: nowrap; }
.dp-clinic__lbl { font-size: 11px; color: var(--dp-mute); }
.dp-clinic__lbl--open { color: var(--dp-green); font-weight: 700; }
.dp-chip { padding: 2px 6px; border-radius: 4px; font-size: 10.5px; font-weight: 700; }
.dp-chip--live { background: var(--dp-green-t); color: var(--dp-green); }

/* The week as one strip of seven equal cells — a patient checks it against
   the day they are free, not against today, so every day gets equal room. */
.dp-week {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(7, 1fr);
  margin: 12px 0 0; padding: 0; list-style: none;
  border: 1px solid var(--dp-line); border-radius: 6px; overflow: hidden;
}
.dp-week__d { display: grid; gap: 3px; padding: 9px 6px; text-align: center; border-left: 1px solid var(--dp-line-2); }
.dp-week__d:first-child { border-left: 0; }
.dp-week__n { font-size: 9.5px; font-weight: 700; letter-spacing: 0.07em; color: var(--dp-mute); }
/* One line, always. A wrapped time made every strip a different height and
   turned a scannable row into a paragraph. */
.dp-week__t { font-size: 11.5px; font-weight: 600; color: var(--dp-ink); white-space: nowrap; }
.dp-week__d.is-off { background: #fcfcfd; }
.dp-week__d.is-off .dp-week__t { color: #c3cad3; font-weight: 500; }
.dp-week__d.is-today { background: var(--dp-blue-t); }
.dp-week__d.is-today .dp-week__n { color: var(--dp-blue); }

.dp-clinic__acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 11px 0 0; font-size: 12.5px; font-weight: 600; }
.dp-clinic__acts a { display: inline-flex; align-items: center; gap: 5px; color: var(--dp-blue); }
.dp-clinic__acts a.is-wa { color: var(--dp-wa); }
.dp-clinic__acts svg { width: 13px; height: 13px; }

.dp-showall { display: flex; align-items: center; justify-content: center; gap: 5px; width: 100%; margin-top: 10px; padding: 8px; border: 1px solid var(--dp-line); border-radius: 6px; background: #fafbfc; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--dp-blue); cursor: pointer; }
.dp-showall:hover { border-color: var(--dp-blue); background: var(--dp-blue-t); }

/* ── Recommendations & reviews ────────────────────────────── */
.dp-rec { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--dp-line-2); }
.dp-rec:first-of-type { padding-top: 0; border-top: 0; }
.dp-rec__pic { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--dp-line); border-radius: 6px; background: var(--dp-bg); }
.dp-rec__pic svg { width: 17px; height: 17px; color: var(--dp-mute); }
.dp-rec__name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; font-size: 13px; font-weight: 700; color: var(--dp-ink); }
.dp-rec__note { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; font-style: italic; }

.dp-score { display: inline-flex; align-items: baseline; gap: 7px; }
.dp-score strong { font-family: var(--font-head, inherit); font-size: 18px; font-weight: 700; color: var(--dp-ink); }
.dp-score__n { font-size: 12px; color: var(--dp-mute); }
.dp-stars { color: #e8a723; font-size: 13px; letter-spacing: 1px; }
.dp-stars i { color: #d8dde3; font-style: normal; }

.dp-rev { padding: 9px 0; border-top: 1px solid var(--dp-line-2); }
.dp-rev:first-of-type { border-top: 0; padding-top: 0; }
.dp-rev__top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin: 0 0 3px; }
.dp-rev__by { font-size: 11.5px; color: var(--dp-mute); }
.dp-rev__text { margin: 0; font-size: 12.5px; line-height: 1.55; }
.dp-rev__reply { margin: 6px 0 0; padding: 7px 9px; border-left: 2px solid var(--dp-blue); border-radius: 0 4px 4px 0; background: var(--dp-blue-t); font-size: 12px; line-height: 1.5; }
.dp-rev__reply strong { color: var(--dp-blue-d); }
.dp-empty { margin: 0; font-size: 12.5px; color: var(--dp-mute); }
.dp-flash { margin: 0 0 8px; padding: 7px 9px; border-radius: 5px; background: var(--dp-green-t); font-size: 12.5px; color: var(--dp-green); }
.dp-flash--bad { background: var(--dp-red-t); color: var(--dp-red); }

.dp-more { margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--dp-line-2); }
.dp-more > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--dp-blue); list-style: none; }
.dp-more > summary::-webkit-details-marker { display: none; }
.dp-more > summary::after { content: ' ▾'; }
.dp-more[open] > summary::after { content: ' ▴'; }
.dp-revform { display: grid; gap: 7px; margin-top: 8px; }
.dp-revform input[type="text"], .dp-revform textarea { padding: 7px 9px; border: 1px solid var(--dp-line); border-radius: 5px; font: inherit; font-size: 12.5px; background: #fafbfc; resize: vertical; }
.dp-revform button { justify-self: start; }
.dp-revform__stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; margin: 0; padding: 0; border: 0; }
.dp-revform__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dp-revform__stars label { font-size: 20px; line-height: 1; color: #d8dde3; cursor: pointer; }
.dp-revform__stars input:checked ~ label,
.dp-revform__stars label:hover, .dp-revform__stars label:hover ~ label { color: #e8a723; }
.dp-revform__stars input:focus-visible + label { outline: 2px solid var(--dp-blue); outline-offset: 2px; }

/* ── Posts ────────────────────────────────────────────────── */
.dp-kinds { display: inline-flex; border: 1px solid var(--dp-line); border-radius: 5px; overflow: hidden; }
.dp-kinds button { padding: 4px 10px; border: 0; border-left: 1px solid var(--dp-line); background: var(--dp-card); font: inherit; font-size: 12px; font-weight: 600; color: var(--dp-mute); cursor: pointer; }
.dp-kinds button:first-child { border-left: 0; }
.dp-kinds button:hover { color: var(--dp-ink); }
.dp-kinds button.is-on { background: var(--dp-blue); color: #fff; }

.dp-posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.dp-post__pic { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--dp-line); border-radius: 6px; background: var(--dp-bg); }
.dp-post__picicon { position: absolute; inset: 0; display: grid; place-items: center; color: #c2c9d2; }
.dp-post__picicon svg { width: 20px; height: 20px; }
.dp-post__pic img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.dp-post__pic img[hidden] { display: none; }
.dp-post__play { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15, 25, 38, 0.28); color: #fff; }
.dp-post__play svg { width: 22px; height: 22px; }
.dp-post__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 7px 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--dp-ink); }
.dp-post__date { margin: 3px 0 0; font-size: 11px; color: var(--dp-mute); }
.dp-post__go { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--dp-blue); }
.dp-post__go svg { width: 12px; height: 12px; }

.dp-read { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--dp-line-2); }
.dp-read > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--dp-ink); }
.dp-read__body { margin-top: 7px; font-size: 13px; line-height: 1.7; white-space: pre-wrap; }

/* ── Gallery ──────────────────────────────────────────────── */
.dp-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
.dp-gal li { display: grid; gap: 3px; }
.dp-gal img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--dp-line); border-radius: 6px; }
.dp-gal span { font-size: 11px; color: var(--dp-mute); }

/* ── Sidebar ──────────────────────────────────────────────── */
.dp-bg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 9px; padding: 9px 0; border-top: 1px solid var(--dp-line-2); }
.dp-bg:first-of-type { padding-top: 0; border-top: 0; }
.dp-bg__icon { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 5px; background: var(--dp-blue-t); color: var(--dp-blue); }
.dp-bg__icon svg { width: 14px; height: 14px; }
.dp-bg__lbl { margin: 0 0 2px; font-size: 12px; font-weight: 700; color: var(--dp-ink); }
.dp-bg__val { margin: 0; font-size: 12.5px; color: var(--dp-text); }
.dp-bg__sub { margin: 0 0 4px; font-size: 11.5px; color: var(--dp-mute); }
.dp-bg__sub:last-child { margin-bottom: 0; }
.dp-side__link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--dp-blue); overflow-wrap: anywhere; }
.dp-social { display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0; }
.dp-social a { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--dp-line); border-radius: 5px; color: var(--dp-mute); }
.dp-social a:hover { border-color: var(--dp-blue); color: var(--dp-blue); }

/* ── The full updates page ────────────────────────────────── */
.dp-up__h1 { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--font-head, inherit); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--dp-ink); }
.dp-up__h1 svg { width: 18px; height: 18px; color: var(--dp-red); }
.dp-up__blurb { margin: 5px 0 0; font-size: 13px; color: var(--dp-mute); }
.dp-up { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: start; border-left: 3px solid var(--dp-mute); }
.dp-up--red { border-left-color: var(--dp-red); }
.dp-up--amber { border-left-color: var(--dp-amber); }
.dp-up--green { border-left-color: var(--dp-green); }
.dp-up--blue { border-left-color: var(--dp-blue); }
.dp-up__icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--dp-bg); color: var(--dp-mute); }
.dp-up--red .dp-up__icon { background: var(--dp-red-t); color: var(--dp-red); }
.dp-up--amber .dp-up__icon { background: var(--dp-amber-t); color: var(--dp-amber); }
.dp-up--green .dp-up__icon { background: var(--dp-green-t); color: var(--dp-green); }
.dp-up--blue .dp-up__icon { background: var(--dp-blue-t); color: var(--dp-blue); }
.dp-up__icon svg { width: 16px; height: 16px; }
.dp-up__kind { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dp-mute); }
.dp-up__flag { padding: 1px 6px; border-radius: 4px; background: var(--dp-red); color: #fff; letter-spacing: 0.03em; }
.dp-up__flag--high { background: var(--dp-amber); }
.dp-up__title { margin: 3px 0 0; font-family: var(--font-head, inherit); font-size: 15px; font-weight: 700; color: var(--dp-ink); }
.dp-up__text { margin: 4px 0 0; font-size: 13px; line-height: 1.55; }
.dp-up__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; font-size: 12px; color: var(--dp-mute); }
.dp-up__meta span { display: inline-flex; align-items: center; gap: 5px; }
.dp-up__meta svg { width: 12px; height: 12px; }
.dp-up__img { width: 92px; height: 72px; object-fit: cover; border: 1px solid var(--dp-line); border-radius: 6px; }
.dp-up__back { margin: 12px 0 0; font-size: 12.5px; }
.dp-up__back a { color: var(--dp-blue); font-weight: 600; }

/* ── Narrow ───────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .dp-top { grid-template-columns: minmax(0, 1fr) 268px; }
  .dp-grid { grid-template-columns: minmax(0, 1fr) 268px; }
}
@media (max-width: 940px) {
  /* Stacked, the vertical rules become horizontal ones — the sections stay
     joined either way, which is the point. */
  .dp-top, .dp-grid { grid-template-columns: minmax(0, 1fr); }
  .dp-live, .dp-side { border-left: 0; border-top: 1px solid var(--dp-line); }
  .dp-side { position: static; }
  .dp-ident { grid-template-columns: 132px minmax(0, 1fr); }
  .dp-strip { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border-left: 0 !important; border-top: 1px solid var(--dp-line-2); }
}
@media (max-width: 700px) {
  .dp-sec, .dp-ident > *, .dp-tabs { padding-left: 14px; padding-right: 14px; }
  .dp-live__head, .dp-live__item, .dp-live__empty { padding-left: 14px; padding-right: 14px; }
  .dp-about { grid-template-columns: minmax(0, 1fr); }
  .dp-about__langs { padding-left: 0; border-left: 0; border-top: 1px solid var(--dp-line-2); padding-top: 9px; }
  .dp-about__langs ul { display: flex; flex-wrap: wrap; gap: 4px 12px; }
  .dp-clinic { grid-template-columns: minmax(0, 1fr); }
  .dp-clinic__when { text-align: left; }
  .dp-clinic__when p { justify-content: flex-start; }
  /* Seven columns of times stop being readable long before this. */
  .dp-week { grid-template-columns: repeat(4, 1fr); }
  .dp-week__d:nth-child(4n + 1) { border-left: 0; }
  .dp-week__d:nth-child(n + 5) { border-top: 1px solid var(--dp-line-2); }
  .dp-up { grid-template-columns: auto minmax(0, 1fr); }
  .dp-up__img { display: none; }
}
@media (max-width: 520px) {
  .dp-ident { grid-template-columns: minmax(0, 1fr); }
  .dp-ident__photo { place-items: start; }
  .dp-ident__id { border-left: 0 !important; border-top: 1px solid var(--dp-line-2); }
  .dp-ident__acts .dp-btn { flex: 1; }
}