/* ============================================================
   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; }
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; }
.docpub__status { margin-top: 0.55rem; }
.docpub__modes { margin-top: 0.5rem; display: flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
.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 */
.docpub-page { background: var(--color-bg); min-height: calc(100vh - 64px); }
.docpub-page__inner { max-width: 1280px; margin: 0 auto; padding: 1.85rem 2rem 3rem; }
@media (max-width: 640px) { .docpub-page__inner { padding: 1.1rem 1rem 2.5rem; } }
.docpub-page__top { padding: 1.1rem 1.6rem; border-bottom: 1px solid var(--color-border); }
/* One connected card: identity panel + detail grid, hairline dividers */
.docpub { display: grid; grid-template-columns: 320px minmax(0, 1fr); align-items: stretch; margin: 0; background: var(--color-surface); border-top: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; overflow: hidden; box-shadow: none; }
.docpub__card { border: 0; border-right: 1px solid var(--color-border); border-radius: 0; box-shadow: none; padding: 2rem 1.5rem; text-align: center; }
.docpub__avatar { display: inline-grid; place-items: center; width: 132px; height: 132px; border-radius: 16px; overflow: hidden; background: var(--color-primary-light); color: var(--color-primary-dark); margin-bottom: 1rem; }
.docpub__avatar img { width: 100%; height: 100%; object-fit: cover; }
.docpub__avatar svg { width: 54px; height: 54px; }
.docpub__name { font-size: 1.4rem; margin-bottom: 0.3rem; }
.docpub__spec { color: var(--color-primary-dark); font-weight: 600; margin: 0.3rem 0; }
.docpub__avail { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.6rem; font-size: 0.92rem; }
.docpub__avail svg { width: 1rem; height: 1rem; }
.docpub__fee { margin-top: 0.6rem; }
.docpub__body { display: flex; flex-direction: column; gap: 0; padding: 0; }
.docpub__body .record-section { margin: 0; padding: 1.4rem 1.6rem; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; box-shadow: none; background: transparent; }
.docpub__body .record-section:last-child { border-bottom: 0; }
.docpub__body .record-section__title { margin: 0 0 1rem; font-size: 1.05rem; }
.docpub__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.1rem 1.75rem; }
.docpub__row { display: block; padding: 0; border: 0; }
.docpub__row dt { color: var(--color-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; }
.docpub__row dd { margin: 0; font-weight: 600; color: var(--color-heading); font-size: 0.95rem; overflow-wrap: anywhere; }
.docpub__note { margin: 0; padding: 1.1rem 1.6rem; font-size: 0.85rem; color: var(--color-muted); }
@media (max-width: 820px) { .docpub { grid-template-columns: 1fr; } .docpub__card { border-right: 0; border-bottom: 1px solid var(--color-border); } }

/* ── Stars + reviews ──────────────────────────────────────── */
.stars { letter-spacing: 1px; white-space: nowrap; }
.stars--on { color: #f5b50a; }
.stars--off { color: var(--color-grey-200); }
.docpub__rating { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.45rem 0; font-size: 0.95rem; }
.docpub-reviews { margin-top: 1.25rem; padding: 1.4rem 1.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.docpub-reviews__head h2 { margin: 0 0 1rem; }
.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; gap: 0.5rem; margin-bottom: 0.75rem; flex-wrap: wrap; }
.specialty-add__input { flex: 1 1 18rem; padding: 0.55rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.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; }

/* ── Public doctor profile (redesigned) ───────────────────── */
.dprof-head {
  display: flex; gap: 1.25rem; align-items: flex-start;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 1.4rem 1.5rem; margin-bottom: 1.25rem;
}
.dprof-head__avatar {
  flex: none; width: 92px; height: 92px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: var(--color-primary-light); color: var(--color-primary-dark);
}
.dprof-head__avatar img { width: 100%; height: 100%; object-fit: cover; }
.dprof-head__avatar svg { width: 44px; height: 44px; }
.dprof-head__main { flex: 1 1 auto; min-width: 0; }
.dprof-head__title { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.dprof-head__title h1 { margin: 0; font-size: 1.5rem; }
.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;
}
.dprof-head__spec { margin: 0.25rem 0 0; color: var(--color-primary-dark); font-weight: 600; }
.dprof-rating { display: flex; align-items: center; gap: 0.4rem; margin: 0.4rem 0 0; font-size: 0.92rem; }
.dprof-badges { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.75rem; }
.dprof-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.65rem; border: 1px solid var(--color-border); border-radius: 999px;
  background: var(--color-mint); font-size: 0.82rem; color: var(--color-text);
}
.dprof-badge svg { width: 15px; height: 15px; color: var(--color-primary-dark); }
.dprof-badge--verified { background: var(--color-primary-light); border-color: transparent; color: var(--color-primary-darker); font-weight: 600; }
.dprof-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-top: 0.75rem; }
.dprof-head__loc { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--color-muted); font-size: 0.86rem; }
.dprof-head__loc svg { width: 15px; height: 15px; }

.dprof-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
.dprof-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.dprof-side { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.dprof-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.1rem 1.25rem;
}
.dprof-card__title {
  display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.85rem;
  font-size: 1.05rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--color-border);
}
.dprof-card__title svg { width: 18px; height: 18px; color: var(--color-primary); }
.dprof-card__text { margin: 0; color: var(--color-text); line-height: 1.6; white-space: pre-line; }
/* Fields flow into as many columns as fit — wide cards no longer leave a big
   empty right side; narrow sidebar cards fall back to a single column. */
.dprof-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem 1.5rem; margin: 0; }
.dprof-dl > div { display: block; min-width: 0; }
.dprof-dl dt { color: var(--color-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.25rem; }
.dprof-dl dd { margin: 0; font-weight: 600; color: var(--color-heading); overflow-wrap: anywhere; }
.dprof-subhead { margin: 1rem 0 0.5rem; font-weight: 600; font-size: 0.9rem; color: var(--color-heading); }
.dprof-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dprof-clinics { display: grid; gap: 0.6rem; }
.dprof-clinic { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 0.65rem 0.8rem; background: var(--color-mint); }
.dprof-clinic__name { margin: 0; font-weight: 600; color: var(--color-heading); }
.dprof-clinic__addr { margin: 0.15rem 0 0; color: var(--color-text); font-size: 0.88rem; }
.dprof-clinic__time { display: flex; align-items: center; gap: 0.35rem; margin: 0.3rem 0 0; color: var(--color-primary-dark); font-size: 0.85rem; }
.dprof-clinic__time svg { width: 14px; height: 14px; }
.dprof-note { margin: 0.85rem 0 0; font-size: 0.82rem; }
.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) {
  .dprof-body { grid-template-columns: 1fr; }
  .dprof-head { flex-direction: column; }
}

/* ── 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 ──────────── */
.dprof-head__actions { display: flex; flex-direction: column; gap: 0.5rem; align-items: stretch; flex: 0 0 auto; }
@media (max-width: 640px) { .dprof-head__actions { flex-direction: row; width: 100%; } .dprof-head__actions .btn { flex: 1; } }

/* ── Offer type row (consultation modes, separate from availability) ── */
.dprof-offer { margin: 0.55rem 0 0; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.9rem; color: var(--color-muted); }
.dprof-offer .pv-tag { margin: 0; }

/* ── 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; }
.dprof-clinic__now { margin: 0 0 0.6rem; font-size: 0.86rem; color: var(--color-muted); }
.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; }
.docpub-page,
body:has(.doctor-grid) .dash { background: #fff; }
.docpub-page__inner { padding: 1.1rem 1.25rem 2rem; }
.dprof-body { gap: 0.6rem; }
.dprof-card { border-radius: 6px; padding: 1rem 1.1rem; }
.dprof-head { border-radius: 6px; }
.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(.docpub-page) { 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; }
}