*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ============================================================
   HEYDOC LIGHT THEME
   Palette mirrors the live Lovable site tokens:
   bg hsl(215 25% 93%) · fg #293f67 · primary hsl(206 85% 58%)
   soft accent hsl(206 78% 92%) · muted hsl(215 10% 50%)
   Variable NAMES are unchanged so runtime templates keep working:
   --accent is now the primary blue, --text the dark navy, etc.
============================================================ */
:root {
  --bg:        hsl(215, 25%, 93%);
  --card:      #ffffff;
  --card2:     hsl(213, 30%, 95%);
  --accent:    hsl(206, 85%, 58%);
  --accent2:   hsl(206, 85%, 46%);
  --accent-dim: hsl(206, 78%, 92%);
  --text:      #293f67;
  --muted:     hsl(215, 10%, 50%);
  --border:    hsl(215, 20%, 88%);
  --danger:    hsl(0, 84%, 55%);
  --warn:      hsl(36, 90%, 42%);
  --radius:    1rem;
  --radius-sm: 0.75rem;
  --shadow:    0 8px 30px hsla(213, 40%, 20%, 0.08);
  --trans:     0.28s cubic-bezier(0.4,0,0.2,1);

  /* extras referenced by page templates / new components */
  --text-dim:        hsl(215, 10%, 50%);   /* findcare.js references var(--text-dim) */
  --accent-fg:       hsl(206, 75%, 32%);   /* text on soft-accent surfaces */
  --shadow-hover:    0 16px 44px hsla(213, 40%, 20%, 0.14);
  --glass-bg:        rgba(255,255,255,0.6);
  --glass-border:    rgba(255,255,255,0.3);
  --online-bg:       hsl(140, 45%, 92%);
  --online-fg:       hsl(140, 45%, 30%);
  --online-dot:      hsl(140, 45%, 42%);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  background-image: linear-gradient(hsl(215, 30%, 96%), hsl(215, 25%, 91%));
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  line-height: 1.6;
  overflow-x: hidden;
  padding-bottom: 24px;
}

::selection { background: hsla(206, 85%, 58%, 0.2); color: var(--text); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(213, 25%, 78%); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: hsl(213, 30%, 68%); }

h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; line-height: 1.15; color: var(--text); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; color: var(--text); letter-spacing: -0.5px; }
h3 { font-size: 1.15rem; font-weight: 600; color: var(--text); }
p  { color: var(--muted); font-size: 0.95rem; }
a  { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* ============================================================
   EKG HEARTBEAT BACKGROUND
   Fixed, full-width, behind everything. Markup agent places:
   <div class="ekg-bg"><svg ...><polyline class="ekg-line" .../>
   <circle class="ekg-pulse" .../></svg></div>
============================================================ */
.ekg-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  /* keep the middle of the trace on screen: the pulse dot is fixed at the
     centre (x=700 of 1400), so a left-aligned oversized svg hides it */
  justify-content: center;
  overflow: hidden;
}

/* raise the trace so its baseline sits midway between the hero
   subtext and the top of the cards */
.ekg-bg svg { transform: translateY(-44px); }

.ekg-bg svg {
  display: block;
  width: 100vw;
  min-width: 100vw;
  height: auto;
}

.ekg-line {
  stroke: hsl(206, 85%, 58%);
  stroke-width: 2;
  fill: none;
  opacity: 0.13;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.ekg-pulse {
  fill: hsl(0, 85%, 55%);
  filter:
    drop-shadow(0 0 3px hsla(0, 90%, 55%, 0.95))
    drop-shadow(0 0 8px hsla(0, 90%, 55%, 0.55));
  opacity: 0.95;
}

/* with reduced motion the JS driver never starts: static line, resting dot */

/* everything the user reads sits above the EKG layer */
.tellus-bar, .page, footer, .shell-emergency { position: relative; z-index: 1; }

/* ============================================================
   NAV — translucent white bar, logo image centered among links
============================================================ */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid hsla(215, 20%, 80%, 0.5);
}

.nav-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 20px;
  max-width: 1240px;
  margin: 0 auto;
}

/* logo dead-center in the bar, independent of side content widths */
.nav-logo-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

/* link groups anchored symmetrically off the true center, so the
   padding on both sides of the logo is always identical */
.nav-side { display: flex; align-items: center; gap: 4px; list-style: none; }
.nav-side-left {
  position: absolute;
  right: calc(50% + 88px);
  top: 50%;
  transform: translateY(-50%);
}
.nav-side-right {
  position: absolute;
  left: calc(50% + 88px);
  top: 50%;
  transform: translateY(-50%);
}

/* mobile dropdown menu (all links) */
.nav-mobile {
  display: none;
  list-style: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 18px 40px hsla(213, 40%, 20%, 0.12);
  flex-direction: column;
  padding: 8px 0;
  z-index: 99;
}
.nav-mobile.open { display: flex; }
.nav-mobile li a {
  display: block;
  padding: 12px 24px;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
}
.nav-mobile li a:hover { background: var(--accent-dim); text-decoration: none; }

@media (max-width: 860px) {
  .nav-side { display: none; }
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
}
.logo:hover { text-decoration: none; }

/* Brand logo image (assets/heydoc-logo.webp) */
.nav-logo-img {
  height: 44px;
  width: auto;
  display: block;
}

/* legacy text-logo pieces, restyled for light in case they linger */
.logo-mark {
  width: 36px;
  height: 36px;
  background: var(--accent);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  color: #ffffff;
  letter-spacing: -1px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px hsla(206, 85%, 58%, 0.3);
}

.logo-text {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.5px;
}

/* left cluster: presence badge + quick home button */
.nav-left-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* desktop-only shortcut back to the homepage (the logo does the same,
   but this sits where the eye already is) */
.nav-home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  color: hsl(213, 30%, 40%);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.85);
  transition: all var(--trans);
  text-decoration: none;
}
.nav-home-btn:hover,
.nav-home-btn:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
  text-decoration: none;
}
.nav-home-btn svg { display: block; }

/* "N online" cosmetic presence badge */
.online-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 100px;
  background: var(--online-bg);
  color: var(--online-fg);
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}

.online-badge .dot,
.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--online-dot);
  flex-shrink: 0;
  animation: onlinePulse 2.4s ease-in-out infinite;
}

@keyframes onlinePulse {
  0%, 100% { box-shadow: 0 0 0 0 hsla(140, 45%, 42%, 0.35); }
  50%      { box-shadow: 0 0 0 4px hsla(140, 45%, 42%, 0); }
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.nav-links li a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 100px;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(213, 30%, 40%);
  transition: all var(--trans);
  text-decoration: none;
  white-space: nowrap;
}

.nav-links li a svg { flex-shrink: 0; }

.nav-links li a:hover {
  color: var(--text);
  background: hsla(206, 78%, 92%, 0.7);
  text-decoration: none;
}

.nav-links li a.active {
  color: var(--accent);
  background: var(--accent-dim);
  font-weight: 600;
}

/* right-side group: language pill + auth slot, stays out of the
   collapsing link lists so it is always visible on mobile */
.nav-right-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Language toggle pill — shows the OTHER language ('FR' while EN) */
.lang-toggle {
  flex-shrink: 0;
  min-width: 48px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.85);
  color: hsl(213, 30%, 40%);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1;
  cursor: pointer;
  transition: all var(--trans);
}
.lang-toggle:hover,
.lang-toggle:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}

@media (max-width: 480px) {
  .nav-right-tools { gap: 7px; }
  .lang-toggle { min-width: 44px; padding: 8px 10px; }
}

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
}

.nav-hamburger span {
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all var(--trans);
}

/* Small screens: shrink the centered logo + badge so the row
   (badge · hamburger · logo · lang toggle · auth) fits 375px
   with no overlap on the absolutely-centered logo */
@media (max-width: 640px) {
  .nav-inner { padding: 8px 12px; gap: 8px; }
  .nav-logo-img { height: 34px; max-width: 28vw; object-fit: contain; }
  .online-badge { padding: 4px 9px; font-size: 0.72rem; gap: 5px; }
}

@media (max-width: 400px) {
  .nav-logo-img { height: 30px; max-width: 25vw; }
  .online-badge { padding: 4px 7px; font-size: 0.68rem; }
}

@media (max-width: 860px) {
  /* 40px touch target (3 bars = 16px tall + 12px padding each side) */
  .nav-hamburger { display: flex; padding: 12px 10px; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 40px hsla(213, 40%, 20%, 0.12);
    flex-direction: column;
    align-items: stretch;
    padding: 12px 16px 20px;
    gap: 2px;
  }
  .nav-links.open { display: flex; }
  .nav-links li a { padding: 10px 14px; border-radius: 10px; }
}

/* ============================================================
   PAGE SYSTEM
============================================================ */
.page {
  display: none;
  opacity: 0;
  animation: pageReveal 0.38s cubic-bezier(0.4,0,0.2,1) forwards;
  min-height: calc(100vh - 65px - 64px);
  padding-bottom: 60px;
}

.page.active { display: block; }

@keyframes pageReveal {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   BACK LINK — small muted link with left-arrow SVG
============================================================ */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 4px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--trans);
  margin-bottom: 24px;
  text-decoration: none;
}
.back-btn:hover { color: var(--accent); text-decoration: none; }
.back-btn svg { flex-shrink: 0; }

/* ============================================================
   BUTTONS
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--trans);
  border: none;
  text-decoration: none;
}

.btn-primary { background: var(--accent); color: #ffffff; }
.btn-primary:hover {
  background: var(--accent2);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px hsla(206, 85%, 58%, 0.3);
  text-decoration: none;
}

.btn-ghost {
  background: #ffffff;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 100px;
}
.btn-ghost:hover {
  background: var(--accent-dim);
  border-color: hsl(206, 78%, 84%);
  text-decoration: none;
}

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: hsl(0, 84%, 48%); }

.btn:disabled, .btn.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ============================================================
   CARDS — pure white, soft shadow, gentle hover lift
============================================================ */
.glass-card {
  /* 65% opaque so the EKG trace shows through, with a slight drop shadow */
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid hsl(215, 20%, 90%);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px hsl(213, 40%, 20%, 0.10);
  transition: all var(--trans);
}

.glass-card:hover {
  border-color: hsl(213, 30%, 84%);
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

/* ============================================================
   BADGE
============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.badge-soon    { background: hsl(36, 90%, 94%);  color: var(--warn);      border: 1px solid hsl(36, 80%, 82%); }
.badge-private { background: var(--accent-dim);  color: var(--accent-fg); border: 1px solid hsl(206, 78%, 84%); }
.badge-public  { background: hsl(215, 20%, 94%); color: var(--muted);     border: 1px solid var(--border); }
.badge-new     { background: var(--accent-dim);  color: var(--accent-fg); border: 1px solid hsl(206, 78%, 84%); }
.badge-free    { background: hsl(140, 50%, 91%); color: hsl(140, 45%, 27%); border: 1px solid hsl(140, 45%, 80%); }
.badge-hot     { background: hsl(0, 84%, 96%);   color: var(--danger);    border: 1px solid hsl(0, 70%, 88%); }

/* ============================================================
   FOOTER
============================================================ */
footer {
  border-top: 1px solid var(--border);
  padding: 18px 20px;
  text-align: center;
  background: rgba(255,255,255,0.5);
}
footer p { font-size: 0.78rem; color: var(--muted); }
footer strong { color: var(--text); }

/* ============================================================
   PAGE: HOME
============================================================ */
.home-hero {
  padding: 64px 0 10px;
  text-align: center;
  position: relative;
}

.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* old white skyline SVG is retired; the fixed .ekg-bg replaces it */
.hero-bg svg { display: none; }

.hero-bg-glow {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 40%, hsla(206, 85%, 58%, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 85% 20%, hsla(206, 85%, 58%, 0.04) 0%, transparent 40%);
  /* fade the tint out at the top and bottom so it never reads as a hard band */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

.home-hero .inner { position: relative; z-index: 1; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 100px;
  background: var(--accent-dim);
  border: 1px solid hsl(206, 78%, 86%);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-fg);
  margin-bottom: 24px;
  letter-spacing: 0.3px;
}

.hero-title {
  margin-bottom: 16px;
  letter-spacing: -1px;
  /* sized so the single-line headline fits the container on desktop */
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
}
.hero-title .accent { color: var(--accent); }

/* "For free" — hand-drawn curved underline that scales with the word */
.hero-underlined {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.hero-underline {
  position: absolute;
  left: 0;
  bottom: -0.3em;
  width: 100%;
  height: 0.34em;
  color: var(--accent);
  overflow: visible;
  pointer-events: none;
}

.hero-welcome {
  font-size: 1.05rem;
  color: var(--text);
  opacity: 0.85;
  margin-bottom: 6px;
  font-weight: 500;
}

.hero-sub {
  font-size: 1.05rem;
  color: var(--muted);
  max-width: 480px;
  margin: 0 auto 18px;
}

/* Desktop: one line, italic. The 480px cap is what was breaking it over two
   lines; lifting it is enough for both languages to fit. Deliberately not
   white-space: nowrap, because the French line is 100 characters and would
   push the page sideways on a narrow laptop. Mobile keeps its own narrower
   measure below. */
@media (min-width: 861px) {
  .hero-sub {
    max-width: none;
    font-style: italic;
  }
}

.home-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (max-width: 1024px) {
  .home-cards { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
}

@media (max-width: 640px) {
  .home-cards { grid-template-columns: 1fr; max-width: 420px; }
}

.home-card {
  padding: 32px 24px 28px;
  cursor: pointer;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.home-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity var(--trans);
}

.home-card:hover::before { opacity: 1; }

/* 56px soft-accent icon tile, primary-blue icon */
.home-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 0.9rem;
  background: var(--accent-dim);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  line-height: 1;
}

.home-card-icon svg { display: block; width: 28px; height: 28px; }

.home-card-title {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--text);
  letter-spacing: -0.3px;
}

.home-card-desc {
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* Pill chips row (replaces the old stats row) */
.home-pills {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 44px 20px 12px;
}

.home-pills .pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: 100px;
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: 0 2px 10px hsla(213, 40%, 20%, 0.05);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
}

.home-pills .pill svg { flex-shrink: 0; color: var(--accent); }

/* legacy stats row, restyled for light in case it lingers */
.home-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  padding: 44px 20px 12px;
  flex-wrap: wrap;
}

.stat { text-align: center; }

.stat-num {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--accent);
  display: block;
  line-height: 1;
  margin-bottom: 6px;
}

.stat-label { font-size: 0.78rem; color: var(--muted); font-weight: 500; }

/* GTR Santé partnership lockup — GTR red works on white */
.home-partner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 8px 20px 40px;
  flex-wrap: wrap;
}

.home-partner-label {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.home-partner-lockup {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.4px;
  white-space: nowrap;
}

.home-partner-lockup .gtr { color: #c42b30; }
.home-partner-lockup .sante { color: var(--text); }

/* Insurance hint bar */
.insurance-hint {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--accent-dim);
  border: 1px solid hsl(206, 78%, 86%);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-top: 32px;
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.5;
}

.insurance-hint span:first-child { font-size: 1.1rem; flex-shrink: 0; }

/* ============================================================
   PAGE HEADERS
============================================================ */
.page-header { padding: 44px 0 32px; }
.page-header h2 { margin-bottom: 8px; }

/* ============================================================
   PAGE: ACCESS CARE
============================================================ */
.triage-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 40px;
}

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

.triage-card { padding: 36px 28px; cursor: pointer; position: relative; overflow: hidden; }
.triage-card-top { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.triage-card-top .badge { margin-left: auto; }

.triage-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 0.9rem;
  background: var(--accent-dim);
  color: var(--accent);
}
.triage-icon svg { display: block; width: 30px; height: 30px; }
.triage-card-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 8px; color: var(--text); }

/* Scope panel — overrides for accesscare.js runtime-injected styles.
   Doubled classes out-specific the injected single-class rules. */
.ac-scope-card.ac-scope-card { background: rgba(255, 255, 255, 0.5); }
.ac-scope-card.can h4 { color: var(--accent); }
.ac-scope-card.can li svg { color: hsl(140, 55%, 40%); }
.ac-scope-card.cant h4 { color: var(--text); }
.ac-scope-card.cant li { color: var(--muted); }
.ac-scope-card.cant li svg { color: var(--danger); }

.ac-field.ac-field input {
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.ac-field.ac-field input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px hsla(206, 85%, 58%, 0.12);
}
.ac-field.ac-field label { color: var(--muted); }

.ac-consent-note.ac-consent-note { color: var(--muted); }

/* ============================================================
   PAGE: FIND CARE
============================================================ */
.findcare-search-wrap { display: flex; gap: 10px; margin-bottom: 24px; }

.findcare-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
  outline: none;
  transition: border-color var(--trans), box-shadow var(--trans);
}
/* clinic-suggestion form: no outer card — only the text boxes read as surfaces */
#clinic-suggest-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

.findcare-input:focus {
  background: #ffffff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px hsla(206, 85%, 58%, 0.12);
}
.findcare-input::placeholder { color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 36px; }

.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 12px; font-size: 0.85rem;
  font-weight: 500; background: rgba(255, 255, 255, 0.8); border: 1px solid var(--border);
  cursor: pointer; color: var(--muted); transition: all var(--trans);
}
.chip svg { color: hsl(206, 80%, 62%); flex-shrink: 0; transition: color var(--trans), transform var(--trans); }
.chip:hover {
  border-color: var(--accent);
  color: var(--accent-fg);
  background: var(--accent-dim);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px hsl(213, 40%, 20%, 0.12);
}
.chip:hover svg { color: var(--accent); transform: scale(1.12); }
.chip.active { border-color: var(--accent); color: #ffffff; background: var(--accent); }
.chip.active svg { color: #ffffff; }

/* instruction toast — pans up from the bottom, auto-dismisses */
#fc-toast {
  position: fixed;
  left: 50%;
  bottom: 58px;
  transform: translate(-50%, calc(100% + 80px));
  z-index: 200;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 560px;
  width: calc(100% - 40px);
  padding: 14px 20px;
  background: #ffffff;
  border: 1px solid hsl(206, 78%, 86%);
  border-radius: 14px;
  box-shadow: 0 14px 40px hsl(213, 40%, 20%, 0.18);
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.5;
  /* invisible while parked off-screen so it can never paint over the
     footer if a transformed ancestor traps its fixed positioning */
  visibility: hidden;
  transition:
    transform 0.45s cubic-bezier(0.32, 0.72, 0.3, 1),
    visibility 0s linear 0.45s;
  pointer-events: none;
}
#fc-toast svg { color: var(--accent); flex-shrink: 0; margin-top: 2px; }
#fc-toast.show {
  transform: translate(-50%, 0);
  visibility: visible;
  transition:
    transform 0.45s cubic-bezier(0.32, 0.72, 0.3, 1),
    visibility 0s;
}

/* subtle breathing glow on the search box so it reads as "type here" */
#findcare-input { animation: fcInputGlow 3.2s ease-in-out infinite; }
#findcare-input:focus { animation: none; }
@keyframes fcInputGlow {
  0%, 100% { border-color: var(--border); box-shadow: 0 0 0 0 hsla(206, 85%, 58%, 0); }
  50% { border-color: hsl(206, 85%, 64%); box-shadow: 0 0 0 4px hsla(206, 85%, 58%, 0.14); }
}
@media (prefers-reduced-motion: reduce) {
  #findcare-input { animation: none; }
  #fc-toast { transition: none; }
}

#care-results { display: none; }
#care-results.show { display: block; animation: pageReveal 0.3s ease forwards; }

.results-header {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 20px;
  flex-wrap: wrap; gap: 10px;
}
.results-header h3 { color: var(--text); }

.care-cards { display: grid; gap: 16px; }

.care-card { padding: 24px; display: flex; gap: 20px; align-items: flex-start; }

@media (max-width: 580px) { .care-card { flex-direction: column; gap: 14px; } }

.care-card-icon {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.care-card-icon.private { background: var(--accent-dim); color: var(--accent-fg); }
.care-card-icon.public  { background: hsl(215, 20%, 94%); color: var(--muted); }
.care-card-icon.gtr     { background: #ffffff; border: 1px solid var(--border); padding: 5px; }
.care-card-icon.gtr img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* small muted service line under the GTR reimbursement headline */
.care-card-service {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin: -2px 0 6px;
}

/* GTR logo placements */
.gtr-partner-logo { height: 44px; width: auto; vertical-align: middle; }
/* sits beside the icon tile at the tile's full height */
.gtr-inline-logo  { height: 56px; width: auto; }
.ac-header-row {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}

.ac-partner {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--muted);
}

.care-card-body { flex: 1; }

.care-card-name {
  font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; color: var(--text);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}

.care-card-desc { font-size: 0.875rem; color: var(--muted); margin-bottom: 14px; }

.care-meta { display: flex; gap: 20px; flex-wrap: wrap; }

.care-meta-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.8rem; color: var(--muted);
}
.care-meta-item strong { color: var(--text); font-weight: 600; }

.care-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  flex-shrink: 0; align-self: center;
}

.findcare-insurance-note {
  display: flex; align-items: center; gap: 10px;
  background: var(--accent-dim); border: 1px solid hsl(206, 78%, 86%);
  border-radius: var(--radius-sm); padding: 12px 16px;
  margin-top: 20px; font-size: 0.85rem; color: var(--text); line-height: 1.5;
}

/* ============================================================
   PAGE: COMMUNITY
============================================================ */
.community-toolbar {
  display: flex; align-items: center;
  justify-content: space-between; margin-bottom: 20px;
  flex-wrap: wrap; gap: 12px;
}

.sort-tabs {
  display: flex; gap: 6px; background: transparent;
  border: none; border-radius: 0; padding: 0;
}

/* Display filters. Desktop shows the pills exactly as before and never sees
   this button; the mobile rules are in the 640px block further down. */
.cm-filter-toggle { display: none; }

/* Community post search. Replaces the prompt bar on this page. */
.cm-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  margin-bottom: 8px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.75);
  transition: border-color var(--trans), box-shadow var(--trans);
}
.cm-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px hsla(206, 78%, 60%, 0.15);
}
.cm-search-icon { flex-shrink: 0; color: var(--muted); }
.cm-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--text);
  outline: none;
}
.cm-search-input::placeholder { color: var(--muted); }
/* The browser's own clear affordance duplicates ours. */
.cm-search-input::-webkit-search-cancel-button { display: none; }
.cm-search-clear {
  display: none;
  flex-shrink: 0;
  width: 22px; height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--border);
  color: var(--text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.cm-search-clear:hover { background: var(--accent); color: #fff; }
.cm-search.cm-has-query .cm-search-clear { display: block; }

.cm-search-status {
  font-size: 0.76rem;
  color: var(--muted);
  min-height: 1.1em;
  margin: 0 4px 10px;
}
.cm-search-status.cm-search-empty { color: hsl(35, 60%, 34%); }

/* Machine-translation disclosure. Deliberately plain and always attached to
   the text it describes, so nobody reads a translation as the student's own
   words. */
.cm-translated {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--muted);
}
.cm-translated-label { display: inline-flex; align-items: center; gap: 5px; }
.cm-translated-label::before {
  content: '';
  width: 13px; height: 13px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: var(--cm-translate-icon) center/contain no-repeat;
  mask: var(--cm-translate-icon) center/contain no-repeat;
}
:root {
  --cm-translate-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h6M8 5v3c0 3.5-1.5 6-4 8'/%3E%3Cpath d='M7 12c1.5 2.5 3.5 4 6 5'/%3E%3Cpath d='M13 20l4-9 4 9M14.5 17h5'/%3E%3C/svg%3E");
}
.cm-translated-toggle {
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-fg);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cm-translated-toggle:hover { color: var(--accent); }
/* Reading the original: no claim to make, just the way back. */
.cm-translated.cm-translated-off { margin-top: 6px; }

@media (prefers-reduced-motion: reduce) {
  .cm-search { transition: none; }
}

.sort-tab {
  padding: 7px 16px; border-radius: 100px; font-size: 0.82rem;
  font-weight: 600; cursor: pointer; color: var(--muted);
  transition: all var(--trans); border: 1px solid var(--border); background: #ffffff;
  font-family: inherit;
}
.sort-tab:hover { color: var(--accent-fg); background: var(--accent-dim); border-color: hsl(206, 78%, 84%); }
.sort-tab.active { background: var(--accent); color: #ffffff; border-color: var(--accent); }

.post-list { display: flex; flex-direction: column; gap: 12px; }

.post-card { padding: 20px 24px 20px 16px; cursor: pointer; transition: all var(--trans); display: flex; gap: 14px; align-items: flex-start; }
.post-card:hover { border-color: hsl(213, 30%, 82%); transform: translateY(-2px); }
.post-card .post-content { flex: 1; min-width: 0; }

/* Reddit-style vote column: green up, red down */
.vote-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  padding-top: 2px;
}
.vote-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px;
  line-height: 0;
  border-radius: 7px;
  transition: background var(--trans), transform var(--trans), opacity var(--trans);
  opacity: 0.75;
}
.vote-btn:hover { transform: scale(1.18); opacity: 1; }
.vote-up   { color: hsl(140, 55%, 40%); }
.vote-down { color: hsl(0, 70%, 52%); }
.vote-up:hover, .vote-up.voted   { background: hsl(140, 50%, 92%); opacity: 1; }
.vote-down:hover, .vote-down.voted { background: hsl(0, 75%, 94%); opacity: 1; }
.vote-count { font-weight: 700; font-size: 0.9rem; color: var(--text); }

/* trending flame badge */
.trending-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: hsl(24, 90%, 45%);
  background: hsl(24, 90%, 94%);
  padding: 2px 9px;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.post-top { display: flex; align-items: flex-start; gap: 14px; }

/* Vote column */
.vote-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 36px; }

.vote-btn {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border);
  background: #ffffff; cursor: pointer; display: flex; align-items: center;
  justify-content: center; color: var(--muted); transition: all var(--trans); font-size: 12px;
}
.vote-btn svg { display: block; }
.vote-btn:hover, .vote-btn.up.voted { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.vote-btn.down.voted { border-color: var(--danger); color: var(--danger); background: hsl(0, 84%, 96%); }

.vote-count { font-size: 0.85rem; font-weight: 700; color: var(--text); }

.post-content { flex: 1; }

.post-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }

.post-author { font-size: 0.8rem; font-weight: 600; color: var(--accent); }

.post-flair {
  font-size: 0.72rem; font-weight: 600; padding: 2px 10px; border-radius: 100px;
  background: var(--accent-dim); color: var(--accent-fg); border: 1px solid transparent;
}

.post-time { font-size: 0.75rem; color: var(--muted); }

.post-title { font-size: 1rem; font-weight: 700; margin-bottom: 6px; color: var(--text); }

.post-preview {
  font-size: 0.85rem; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

.post-footer { display: flex; align-items: center; gap: 16px; margin-top: 12px; }

.post-stat { display: flex; align-items: center; gap: 5px; font-size: 0.78rem; color: var(--muted); }

#post-detail { display: none; }
#post-detail.open { display: block; animation: pageReveal 0.3s ease forwards; }
#post-list-view.hidden { display: none; }

.detail-post { padding: 28px; margin-bottom: 24px; }

.replies-section h3 { margin-bottom: 16px; }

.reply-card { padding: 16px 20px; margin-bottom: 10px; }

.reply-meta { display: flex; gap: 10px; margin-bottom: 8px; align-items: center; }
.reply-author { font-size: 0.8rem; font-weight: 600; color: var(--accent); }
.reply-time   { font-size: 0.75rem; color: var(--muted); }
.reply-text   { font-size: 0.88rem; color: var(--text); line-height: 1.55; }

.reply-input-area {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; margin-top: 20px;
  box-shadow: var(--shadow);
}
.reply-input-area h4 { margin-bottom: 12px; font-size: 0.9rem; color: var(--muted); }

.reply-textarea {
  width: 100%; background: #ffffff;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 16px; color: var(--text); font-family: inherit;
  font-size: 0.875rem; resize: vertical; min-height: 80px; outline: none;
  transition: border-color var(--trans), box-shadow var(--trans); margin-bottom: 12px;
}
.reply-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px hsla(206, 85%, 58%, 0.12); }
.reply-textarea::placeholder { color: var(--muted); }

/* Disclaimer banner: white card, red/amber left border.
   !important beats the inline border-left:...var(--accent) in community.js */
/* header row: title on the left, compact disclaimer card on the right */
.community-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

#community-disclaimer {
  background: rgba(255, 255, 255, 0.35);
  border-left: 3px solid var(--warn) !important;
  max-width: 440px;
  padding: 10px 14px;
  align-self: center;
}

/* Collapsed by default: one line plus a chevron. The full wording is a
   click away rather than a paragraph everyone scrolls past. */
.cm-disclaimer > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--text);
}
.cm-disclaimer > summary::-webkit-details-marker { display: none; }
.cm-disclaimer > summary::marker { content: ''; }
.cm-disclaimer-line { flex: 1; min-width: 0; }
.cm-disclaimer-chev {
  flex-shrink: 0;
  color: var(--muted);
  transition: transform var(--trans);
}
.cm-disclaimer[open] .cm-disclaimer-chev { transform: rotate(180deg); }
.cm-disclaimer > summary:hover .cm-disclaimer-chev { color: var(--accent); }
.cm-disclaimer > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.cm-disclaimer-body {
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--muted);
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

@media (max-width: 860px) {
  .community-header-row { flex-direction: column; align-items: stretch; gap: 0; }
  #community-disclaimer { max-width: none; margin-bottom: 16px; }
  .cm-disclaimer > summary { font-size: 0.74rem; }
}

/* ---- Mobile: the two rows of pills fold into one "Display filters" control.
   Nine pills wrapping across four lines pushed the actual posts off the
   first screen. ---- */
@media (max-width: 640px) {
  .cm-filter-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.75);
    color: var(--text);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-align: left;
  }
  .cm-filter-label { flex-shrink: 0; }
  .cm-filter-current {
    flex: 1;
    min-width: 0;
    color: var(--muted);
    font-weight: 500;
    font-size: 0.76rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
  }
  .cm-filter-chev { flex-shrink: 0; color: var(--muted); transition: transform var(--trans); }
  #post-list-view.cm-filters-open .cm-filter-chev { transform: rotate(180deg); }

  /* Closed by default; the button above says what is in force. */
  #post-list-view #sort-tabs,
  #post-list-view #flair-tabs { display: none; }
  #post-list-view.cm-filters-open #sort-tabs,
  #post-list-view.cm-filters-open #flair-tabs { display: flex; }

  #post-list-view.cm-filters-open #sort-tabs {
    margin-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }
  #post-list-view.cm-filters-open #flair-tabs { margin-top: 10px; }

  /* Put the filter control on its own line above New Post. */
  .community-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .community-toolbar .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-filter-chev { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cm-disclaimer-chev { transition: none; }
}

/* ============================================================
   MODAL (new post)
============================================================ */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: hsla(213, 40%, 20%, 0.45); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200; align-items: center; justify-content: center; padding: 20px;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 1.25rem; padding: 32px; width: 100%; max-width: 540px;
  box-shadow: 0 20px 60px hsla(213, 40%, 20%, 0.18);
  animation: pageReveal 0.25s ease forwards;
  /* popups always fit the viewport; long content scrolls inside */
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

@media (max-width: 480px) {
  .modal-overlay { padding: 14px; }
  .modal { padding: 24px 18px; }
}

.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }

.modal-close {
  width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--border);
  background: #ffffff; cursor: pointer; color: var(--muted); font-size: 18px;
  display: flex; align-items: center; justify-content: center; transition: all var(--trans);
  font-family: inherit;
}
.modal-close:hover { color: var(--text); background: var(--card2); }

.form-group { margin-bottom: 16px; }

.form-label {
  display: block; font-size: 0.82rem; font-weight: 600;
  color: var(--muted); margin-bottom: 7px; letter-spacing: 0.3px;
}

.form-input, .form-select, .form-textarea {
  width: 100%; background: #ffffff;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px 16px; color: var(--text); font-family: inherit;
  font-size: 0.9rem; outline: none;
  transition: border-color var(--trans), box-shadow var(--trans);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px hsla(206, 85%, 58%, 0.12);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--muted); }
.form-select { cursor: pointer; appearance: none; }
.form-select option { background: #ffffff; color: var(--text); }
.form-textarea { resize: vertical; min-height: 100px; }

/* ============================================================
   EMERGENCY BARS
   Global bar (.shell-emergency): FIXED to the bottom of the
   viewport, full width, solid red, white bold centered text.
   In-page bars (Access Care) stay inline as soft red cards.
============================================================ */
.shell-emergency {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 150;
  max-width: none;
  margin: 0;
  padding: 0;
}

.shell-emergency .emergency-bar {
  /* solid red only behind the text; the fade to white starts right after it */
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    hsl(0, 78%, 54%) 38%,
    hsl(0, 78%, 54%) 62%,
    #ffffff 100%
  );
  border: none;
  border-radius: 0;
  margin: 0;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: none;
}

.shell-emergency .emergency-bar p {
  color: #ffffff;
  font-weight: 600;
  font-size: 0.85rem;
  text-align: center;
  margin: 0;
}

.shell-emergency .emergency-bar strong {
  color: #ffffff;
  font-weight: 700;
}

.shell-emergency .emergency-icon {
  color: #ffffff;
  display: flex;
}
.shell-emergency .emergency-icon svg { width: 16px; height: 16px; }

/* Inline (in-page) emergency notice */
.emergency-bar {
  background: hsl(0, 84%, 97%);
  border: 1px solid hsl(0, 70%, 88%);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}
.emergency-bar span:first-child { display: inline-flex; flex-shrink: 0; }
.emergency-icon { color: var(--danger); }
.emergency-icon svg { display: block; }
.emergency-bar p { font-size: 0.82rem; color: hsl(0, 60%, 38%); margin: 0; }
.emergency-bar strong { color: var(--danger); }

/* ============================================================
   UTILS
============================================================ */
.divider { border: none; border-top: 1px solid var(--border); margin: 28px 0; }
.text-accent { color: var(--accent); }
.text-muted  { color: var(--muted); }
.text-danger { color: var(--danger); }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }

/* long user-generated or long-word content can never force a
   horizontal page scroll */
.post-title, .post-preview, .reply-text, .detail-post,
.care-card-name, .cd-name, .res-card h3, .res-body,
.hero-title, .home-card-title {
  overflow-wrap: break-word;
  word-break: break-word;
}
.post-preview, .reply-text, .detail-post { overflow-wrap: anywhere; }

/* ---------- Mobile (≤640px) ---------- */
@media (max-width: 640px) {
  /* 16px form fields prevent iOS Safari focus-zoom everywhere,
     including runtime-injected styles (auth, admin, splash PIN) */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size: 16px !important; }

  /* touch targets ≥ 40px */
  .sort-tab,
  .cd-filters button,
  .adm-range button,
  .back-btn,
  .chip { min-height: 40px; }
  .cd-actions .btn,
  .cf-result-actions .btn { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
  .vote-btn { width: 38px; height: 40px; }
  .modal-close { width: 40px; height: 40px; }
  .hd-auth-login-link.hd-auth-login-link,
  .hd-auth-chip.hd-auth-chip { min-height: 40px; }

  /* .home-cards sits inside .container — drop its own gutter so
     cards don't lose 40px to double padding */
  .home-cards { padding: 0; }

  .detail-post { padding: 20px 18px; }
  .triage-card { padding: 28px 20px; }
}

@media (max-width: 480px) {
  .home-hero { padding: 48px 0 36px; }
  .hero-sub { font-size: 0.95rem; }
  .findcare-search-wrap { flex-direction: column; }
  .care-actions { width: 100%; }
  .care-actions .btn { flex: 1; }
  .community-toolbar { flex-direction: column; align-items: stretch; }
  .community-toolbar .btn { width: 100%; }
}

/* ============================================================
   TELL US BAR — glass white card, JetBrains Mono prompt
============================================================ */
.tellus-bar {
  max-width: 780px;
  /* never touches the screen edges on narrow viewports */
  width: calc(100% - 32px);
  margin: 28px auto 0;
  padding: 18px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 1.25rem;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}

.tellus-input {
  flex: 1;
  min-width: 220px;
  background: #ffffff;
  /* always-visible outline so it clearly reads as a text box */
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  color: var(--text);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.15rem;
  text-align: center;
  outline: none;
  transition: box-shadow var(--trans), border-color var(--trans);
}
.tellus-bar:hover .tellus-input { border-color: hsl(206, 80%, 72%); }
.tellus-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px hsla(206, 85%, 58%, 0.12); }
.tellus-input::placeholder { color: var(--muted); transition: color var(--trans); }

/* hover: make it obvious this is a text box you can type into */
.tellus-bar { cursor: text; transition: border-color var(--trans), box-shadow var(--trans), background var(--trans), transform var(--trans); }
.tellus-bar:hover,
.tellus-bar:focus-within {
  background: #ffffff;
  border-color: hsl(206, 85%, 58%);
  box-shadow: 0 0 0 4px hsla(206, 85%, 58%, 0.12), 0 10px 30px hsl(213, 40%, 20%, 0.12);
  transform: translateY(-1px);
}
.tellus-bar:hover .tellus-input::placeholder { color: var(--text); }
.tellus-bar:hover .tellus-caption,
.tellus-bar:focus-within .tellus-caption { color: hsl(206, 85%, 58%); }

/* the whole bar is clickable — clicking anywhere focuses the input (real caret) */

/* hidden entirely on article reader pages */
.tellus-bar.tellus-hidden { display: none !important; }

/* on home the bar sits between the hero and the cards,
   matching the outer width of the four-card row (1140 - 2*20 padding) */
#page-home .tellus-bar { margin: 4px auto 40px; max-width: 1020px; }

/* compact variant on non-home pages: one slim line, no caption */
.tellus-bar.compact {
  max-width: 640px;
  margin: 14px auto 0;
  padding: 6px 8px 6px 14px;
  border-radius: 100px;
}
.tellus-bar.compact .tellus-caption { display: none; }
.tellus-bar.compact .tellus-input {
  font-size: 0.92rem;
  padding: 8px 12px;
  text-align: left;
  /* the slim pill IS the box on non-home pages — no inner outline */
  border: none;
  background: transparent;
}
.tellus-bar.compact .btn {
  padding: 8px 16px;
  font-size: 0.85rem;
  border-radius: 100px;
}

.tellus-caption {
  width: 100%;
  text-align: center;
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0;
}

@media (max-width: 480px) {
  .tellus-bar { flex-direction: column; align-items: stretch; }
  .tellus-bar .btn { width: 100%; }
}

/* ============================================================
   RESOURCES — overrides for resources.js runtime-injected styles
   (doubled classes beat the injected single-class rules)
============================================================ */
.res-body.res-body p,
.res-body.res-body li { color: hsl(213, 30%, 28%); }
.res-tag.res-tag {
  background: var(--accent-dim);
  color: var(--accent-fg);
  border: 1px solid transparent;
}
.res-sub.res-sub { color: var(--muted); }
.res-footer-note { color: var(--muted); }

/* ============================================================
   AUTH — overrides for auth.js runtime-injected dark styles.
   auth.js appends its <style> after this sheet, so every rule
   here uses a doubled class to win on specificity.
============================================================ */
.hd-auth-overlay.hd-auth-overlay {
  background: hsla(213, 40%, 20%, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hd-auth-modal.hd-auth-modal {
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  box-shadow: 0 20px 60px hsla(213, 40%, 20%, 0.18);
}

.hd-auth-modal.hd-auth-modal h3 { color: var(--text); font-weight: 800; }

.hd-auth-sub.hd-auth-sub { color: var(--muted); }

.hd-auth-field.hd-auth-field label { color: var(--muted); font-weight: 600; }

.hd-auth-field.hd-auth-field input,
.hd-auth-field.hd-auth-field select {
  background: #ffffff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.hd-auth-field.hd-auth-field input:focus,
.hd-auth-field.hd-auth-field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px hsla(206, 85%, 58%, 0.12);
}

.hd-auth-field.hd-auth-field div { color: var(--text); }

.hd-auth-note.hd-auth-note { color: var(--muted); }

.hd-auth-error.hd-auth-error { color: var(--danger); }
.hd-auth-success.hd-auth-success { color: hsl(140, 50%, 32%); }

.hd-auth-btn.hd-auth-btn {
  background: var(--accent);
  color: #ffffff;
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.hd-auth-btn.hd-auth-btn:hover { background: var(--accent2); }

.hd-auth-btn-ghost.hd-auth-btn-ghost {
  background: #ffffff;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.hd-auth-btn-ghost.hd-auth-btn-ghost:hover { background: var(--accent-dim); }

.hd-auth-swap.hd-auth-swap { color: var(--muted); }
.hd-auth-swap.hd-auth-swap a { color: var(--accent); }

.hd-auth-close.hd-auth-close { color: var(--muted); }
.hd-auth-close.hd-auth-close:hover { color: var(--text); }

.hd-school-form.hd-school-form {
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.hd-school-form.hd-school-form .hd-auth-checkbox { color: var(--muted); }

/* Terms consent. Given its own block because it is the one checkbox that
   blocks sign-up, so it has to be findable when the form scrolls. */
.hd-terms-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 14px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--trans), background var(--trans);
}
.hd-terms-check input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
.hd-terms-check a { color: var(--accent-fg); font-weight: 600; }
.hd-terms-check.hd-terms-missing {
  border-color: var(--danger);
  background: hsla(0, 72%, 96%, 0.9);
}

@media (prefers-reduced-motion: reduce) {
  .hd-terms-check { transition: none; }
}

.hd-auth-chip.hd-auth-chip {
  background: var(--accent-dim);
  color: var(--accent-fg);
  border: 1px solid transparent;
  border-radius: 100px;
}
.hd-auth-chip.hd-auth-chip:hover { background: hsl(206, 78%, 88%); }

.hd-auth-dropdown.hd-auth-dropdown {
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 32px hsla(213, 40%, 20%, 0.16);
}
.hd-auth-dropdown.hd-auth-dropdown button { color: var(--text); }
.hd-auth-dropdown.hd-auth-dropdown button:hover { background: var(--accent-dim); }

.hd-auth-login-link.hd-auth-login-link {
  background: #ffffff;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-weight: 600;
}
.hd-auth-login-link.hd-auth-login-link:hover { background: var(--accent-dim); }

/* Segmented Log In / Sign Up control (for the markup agent):
   <div class="hd-auth-seg"><button class="active">Log In</button>
   <button>Sign Up</button></div> */
.hd-auth-seg {
  display: flex;
  gap: 4px;
  background: hsl(215, 20%, 92%);
  border-radius: 100px;
  padding: 4px;
  margin-bottom: 20px;
}

.hd-auth-seg button {
  flex: 1;
  padding: 8px 16px;
  border: none;
  border-radius: 100px;
  background: transparent;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--trans);
}

.hd-auth-seg button.active {
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 2px 8px hsla(213, 40%, 20%, 0.12);
}

/* Final safety: the EKG svg always renders even if a container
   rule (e.g. .hero-bg svg { display:none }) would hide it. */
.ekg-bg svg { display: block; }

/* ============================================================
   FOOTER LINKS
============================================================ */
.footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.footer-links a {
  color: hsl(213, 30%, 40%);
  font-size: 0.85rem;
  font-weight: 600;
}
.footer-links a:hover { color: var(--accent); text-decoration: none; }
.footer-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--border); }

/* Access Care: compact header (partner lockup sits inline with the title) */
#page-accesscare .page-header { padding: 26px 0 18px; }
#page-accesscare .ac-routing-note { margin-bottom: 20px; }

/* ============================================================
   MOBILE COMPACT PASS — client revisions 2026-07-27.
   Everything below is mobile/collapsed-nav only; desktop is untouched.
============================================================ */

/* ---- Collapsed nav (hamburger visible) ---- */
@media (max-width: 860px) {
  /* hamburger sits far left */
  .nav-hamburger { order: -1; margin-left: -6px; }

  /* online badge slightly reduced so the row always fits; margin-right:auto
     keeps it hugging the hamburger instead of drifting into the centered logo */
  .online-badge { padding: 3px 8px; font-size: 0.68rem; gap: 4px; }
  .nav-left-tools { margin-right: auto; }

  /* the home shortcut is desktop-only — the centered logo covers it here */
  .nav-home-btn { display: none; }
  .online-badge .dot { width: 6px; height: 6px; }

  /* language toggle moves into the hamburger menu, freeing bar space
     for the username chip when logged in */
  .nav-right-tools .lang-toggle { display: none; }
  .nav-mobile-lang { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 6px; }
  .nav-mobile-lang a { color: var(--accent); font-weight: 600; }
}
@media (min-width: 861px) {
  .nav-mobile-lang { display: none; }
}

/* ---- Phone layouts ---- */
@media (max-width: 640px) {
  /* hero: the <br> in the markup carries the line break */
  .hero-title { font-size: clamp(1.1rem, 5.6vw, 1.5rem); letter-spacing: -0.5px; margin-bottom: 10px; }

  /* pull the prompt bar up close to the hero text, slim its padding */
  .home-hero { padding: 26px 0 6px; }
  .hero-sub { margin-bottom: 14px; font-size: 0.92rem; }
  #page-home .tellus-bar { margin: 0 auto 22px; padding: 12px 14px 10px; gap: 8px; }
  #page-home .tellus-bar .tellus-input { padding: 10px 12px; font-size: 1rem; }
  #page-home .tellus-bar .btn { padding: 10px 20px; }
  .tellus-caption { font-size: 0.75rem; }

  /* four feature cards: 2x2 compact grid */
  .home-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; max-width: none; }
  .home-card { padding: 16px 12px 14px; }
  .home-card-icon { width: 40px; height: 40px; margin-bottom: 10px; border-radius: 0.7rem; }
  .home-card-icon svg { width: 22px; height: 22px; }
  .home-card-title { font-size: 0.98rem; margin-bottom: 6px; }
  .home-card-desc { font-size: 0.72rem; line-height: 1.5; }

  /* trust pills: 2x2 grid */
  .home-pills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 24px 20px 8px; }
  .home-pills .pill { justify-content: center; text-align: center; white-space: normal; font-size: 0.74rem; padding: 8px 10px; }

  /* find-care category chips: symmetric 2-col grid, Blood Test full width on top */
  .chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 26px; }
  .chip { justify-content: center; padding: 10px 8px; }
  .chips .chip:first-child { grid-column: 1 / -1; }

  /* instruction toast clears the footer instead of overlapping it */
  #fc-toast { bottom: 130px; }

  /* page headers: back link + title share one row (title far right),
     subtitle drops below — content moves up on every subpage */
  .page-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 12px; padding: 12px 0 10px; }
  .page-header .back-btn { margin-bottom: 0; }
  .page-header h2 { margin: 0 0 0 auto; font-size: 1.3rem; text-align: right; }
  .page-header p, .page-header .res-sub { width: 100%; margin: 8px 0 0; }
  /* access care: flatten its header row so the h2 joins the flex row;
     the partner lockup drops to its own line underneath */
  .ac-header-row { display: contents; }
  .ac-partner { width: 100%; margin-top: 6px; }
  #page-accesscare .page-header { padding: 12px 0 10px; }

  /* the "Hey Doc, I need..." prompt bar is home-only on mobile */
  .tellus-bar.compact { display: none !important; }
}

/* ---- Admin: role / suspension controls ---- */
.adm-role-cell { display: flex; align-items: center; gap: 8px; }
.adm-role-select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  min-height: 34px;
}
.adm-role-select:disabled { opacity: 0.55; cursor: not-allowed; }
.adm-susp-tag {
  padding: 3px 9px;
  border-radius: 100px;
  background: hsla(0, 72%, 48%, 0.12);
  color: hsl(0, 72%, 40%);
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}
.adm-export-btn { margin-top: 14px; }

/* ---- Admin: per-user audit drawer ---- */
.adm-user-row { cursor: pointer; transition: background 0.15s ease; }
.adm-user-row:hover { background: hsla(206, 78%, 92%, 0.45); }

.adm-drawer-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: hsla(213, 40%, 20%, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  justify-content: flex-end;
}
.adm-drawer {
  width: min(520px, 100%);
  height: 100%;
  background: #fff;
  box-shadow: -20px 0 50px hsla(213, 40%, 20%, 0.18);
  display: flex;
  flex-direction: column;
  animation: admDrawerIn 0.28s cubic-bezier(0.32, 0.72, 0.3, 1);
}
@keyframes admDrawerIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .adm-drawer { animation: none; } }

.adm-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px 12px;
  border-bottom: 1px solid var(--border);
}
.adm-drawer-head h3 { font-size: 1.1rem; font-weight: 800; }
.adm-drawer-sub { font-size: 0.78rem; color: var(--muted); margin: 3px 0 0; overflow-wrap: anywhere; }
.adm-drawer-close {
  width: 36px; height: 36px; flex-shrink: 0;
  border: none; border-radius: 50%;
  background: transparent; color: var(--muted);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.adm-drawer-close:hover { background: hsl(215, 20%, 94%); color: var(--text); }

.adm-drawer-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 24px 0; }
.adm-chip {
  padding: 3px 10px; border-radius: 100px;
  background: var(--accent-dim); color: var(--accent-fg);
  font-size: 0.7rem; font-weight: 700;
}
.adm-chip-danger { background: hsla(0, 72%, 48%, 0.12); color: hsl(0, 72%, 40%); }
.adm-chip-quiet { background: hsl(215, 20%, 94%); color: var(--muted); }

.adm-drawer-tabs { display: flex; gap: 6px; padding: 14px 24px 0; flex-wrap: wrap; }
.adm-drawer-tabs button {
  padding: 7px 12px; border: 1px solid var(--border); border-radius: 100px;
  background: #fff; color: var(--muted);
  font-family: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer;
}
.adm-drawer-tabs button.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.adm-drawer-filter {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 24px 10px;
  font-size: 0.78rem; color: var(--muted);
}
.adm-drawer-filter select { flex: 1; min-width: 0; }

.adm-drawer-list { flex: 1; overflow-y: auto; padding: 0 24px; }
.adm-log-item { padding: 10px 0; border-bottom: 1px solid hsl(215, 20%, 94%); }
.adm-log-item:last-child { border-bottom: none; }
.adm-log-action { font-size: 0.85rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.adm-log-time { font-size: 0.72rem; color: var(--muted); margin-top: 2px; }

.adm-drawer-pager {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 24px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  font-size: 0.75rem; color: var(--muted);
}
.adm-drawer-pager button {
  padding: 7px 14px; border: 1px solid var(--border); border-radius: 8px;
  background: #fff; color: var(--text);
  font-family: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer;
  min-height: 36px;
}
.adm-drawer-pager button:disabled { opacity: 0.45; cursor: default; }

@media (max-width: 640px) {
  .adm-drawer-head, .adm-drawer-chips, .adm-drawer-tabs,
  .adm-drawer-filter, .adm-drawer-list, .adm-drawer-pager { padding-left: 16px; padding-right: 16px; }
}

/* ---- Signup: language radio group ---- */
/* One row, equal columns, however many options there are. Content-sized
   pills wrapped onto a second line and read as a broken layout. */
.hd-auth-radios {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 6px;
}
/* Scoped under .hd-auth-radios on purpose. The modal injects
   `.hd-auth-field label { display: block }` for its field captions, and these
   pills are labels inside a field, so that rule was winning on specificity
   and quietly turning every pill back into a block: justify-content did
   nothing and the text sat left. Two classes beat one class plus a type. */
.hd-auth-radios .hd-auth-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 0;
  font-weight: 500;
  gap: 6px;
  padding: 8px 6px;
  border: 1px solid hsl(215, 20%, 88%);
  border-radius: 100px;
  background: #fff;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
  min-height: 40px;
  min-width: 0;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.hd-auth-radios .hd-auth-radio:hover { border-color: var(--accent); background: var(--accent-dim); }
/* The circle is hidden, not removed: the pill's own border, fill and weight
   already say which one is picked, and four circles plus four labels did not
   fit the modal. The input still takes focus and answers to the keyboard. */
.hd-auth-radio input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
/* Selection is expressed ONLY through .is-checked, set in radioGroup().
   No :has() here on purpose: with the radio visually hidden, Chrome stopped
   invalidating :has(input:checked), so the previously selected pill kept its
   fill while the newly selected one stayed white. On a language picker that
   shows the student a different answer from the one being submitted. */
.hd-auth-radios .hd-auth-radio.is-checked {
  border-color: var(--accent);
  background: var(--accent-dim);
  font-weight: 600;
}
.hd-auth-radios .hd-auth-radio:not(.is-checked):hover {
  border-color: var(--accent);
  background: var(--accent-dim);
}
/* focus-within rather than :has(:focus-visible), for the same reason. */
.hd-auth-radio:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---- Mobile: let the EKG show through the translucent containers ----
   The trace scales with viewport width, so at 390px it collapsed to an
   84px band that never passed behind the cards, making them look solid
   even though they are the same 50% white as desktop. Stretch it back to
   a desktop-height band so the translucency actually reads. */
/* Scale the trace by WIDTH so the aspect ratio is preserved. The earlier
   scaleY approach made the band tall but squashed the waveform and turned
   the round pulse dot into a vertical streak. .ekg-bg clips the overflow,
   so a wider svg simply shows fewer heartbeats at full fidelity. */
@media (max-width: 860px) {
  .ekg-bg svg { width: 300vw; min-width: 300vw; transform: translateY(-20px); }
}
@media (max-width: 480px) {
  .ekg-bg svg { width: 360vw; min-width: 360vw; transform: translateY(-16px); }
}

/* ---- Signup: checkbox row + address autocomplete ---- */
.hd-auth-check {
  display: flex; align-items: center; gap: 9px;
  margin: 4px 0 12px; font-size: 0.85rem; color: var(--text); cursor: pointer;
}
.hd-auth-check input { accent-color: var(--accent); margin: 0; width: 16px; height: 16px; }
.hd-auth-ac { position: relative; }
.hd-auth-ac-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  background: #fff; border: 1px solid hsl(215, 20%, 88%); border-radius: 0.75rem;
  box-shadow: 0 12px 30px hsla(213, 40%, 20%, 0.14);
  max-height: 220px; overflow-y: auto;
}
.hd-auth-ac-item {
  display: block; width: 100%; text-align: left; padding: 10px 12px;
  border: none; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 0.82rem; line-height: 1.4; color: var(--text);
}
.hd-auth-ac-item:hover { background: var(--accent-dim); }
.hd-auth-subhead { font-size: 0.95rem; font-weight: 800; margin: 20px 0 8px; padding-top: 14px; border-top: 1px solid hsl(215, 20%, 90%); }

/* ---- Admin: "?" explainer bubbles ---- */
.adm-help { position: relative; display: inline-flex; margin-left: 6px; }
.adm-help-btn {
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid var(--border); background: #fff; color: var(--muted);
  font-family: inherit; font-size: 0.72rem; font-weight: 800; line-height: 1;
  cursor: pointer; padding: 0;
}
.adm-help-btn:hover { border-color: var(--accent); color: var(--accent); }
.adm-help-bubble {
  display: none; position: absolute; top: 26px; right: 0; z-index: 40;
  width: 260px; padding: 10px 12px;
  background: var(--text); color: #fff;
  border-radius: 10px; font-size: 0.76rem; font-weight: 400; line-height: 1.5;
  box-shadow: 0 12px 30px hsla(213, 40%, 20%, 0.25);
}
.adm-help-bubble.open { display: block; }
@media (max-width: 640px) { .adm-help-bubble { width: min(260px, 70vw); } }

/* ---- Admin: search boxes, see-more, clinic drawer ---- */
.adm-search { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; flex-wrap: wrap; }
.adm-search input {
  flex: 1; min-width: 220px; padding: 9px 13px;
  border: 1px solid var(--border); border-radius: 10px;
  font-family: inherit; font-size: 0.85rem; color: var(--text); background: #fff;
}
.adm-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px hsla(206,85%,58%,0.12); }
.adm-search-count { font-size: 0.76rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.adm-seemore { margin-top: 12px; padding: 8px 16px; font-size: 0.8rem; }

.adm-clinic-item {
  border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 14px; margin-bottom: 8px; background: rgba(255,255,255,0.85);
  cursor: pointer; transition: border-color 0.15s ease;
}
.adm-clinic-item:hover { border-color: var(--accent); }
.adm-clinic-name { font-weight: 700; font-size: 0.88rem; color: var(--text); }
.adm-clinic-preview {
  font-size: 0.78rem; color: var(--muted); line-height: 1.45; margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.adm-clinic-item.open .adm-clinic-preview { display: none; }
.adm-clinic-full { display: none; font-size: 0.78rem; color: var(--muted); line-height: 1.6; margin-top: 6px; }
.adm-clinic-full strong { color: var(--text); }
.adm-clinic-item.open .adm-clinic-full { display: block; }

/* ---- Mobile: stronger EKG, more see-through containers ----
   Same percentage-point scale used for the earlier opacity passes:
   EKG line 0.13 -> 0.33, containers 0.50 -> 0.30 white. */
@media (max-width: 860px) {
  .ekg-line { opacity: 0.33; }
  .glass-card,
  .ac-scope-card.ac-scope-card { background: rgba(255, 255, 255, 0.45); }
}

/* ---- Mobile: the prompt bar loses its white card ----
   Only the input and the button carry any surface; the wrapper is just
   layout. Desktop keeps its glass card. */
@media (max-width: 860px) {
  .tellus-bar,
  .tellus-bar:hover,
  .tellus-bar:focus-within {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
  }
  #page-home .tellus-bar { padding-left: 0; padding-right: 0; }
}

/* ---- Mobile: tighter hero subtitle, prompt bar sits closer under it ---- */
@media (max-width: 860px) {
  .hero-sub {
    font-size: 0.82rem;
    line-height: 1.45;
    margin-bottom: 6px;
    max-width: 34ch;
  }
  .home-hero { padding-bottom: 0; }
  #page-home .tellus-bar { margin-top: 0; padding-top: 2px; }
}

/* ---- Mobile: trust pills one per line, uniform size ---- */
@media (max-width: 860px) {
  .home-pills { grid-template-columns: 1fr; gap: 8px; max-width: 420px; margin: 0 auto; }
  .home-pills .pill {
    width: 100%;
    justify-content: center;
    white-space: nowrap;
    min-height: 42px;
  }
}

/* ---- Community: section headings for the mixed feed ---- */
.post-group-heading {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 4px 2px 10px;
}
.post-group-heading:not(:first-child) { margin-top: 22px; }

/* ---- Home pills: description on hover (desktop) and tap (touch) ---- */
.home-pills .pill {
  position: relative;
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}
.home-pills .pill:hover,
.home-pills .pill:focus-visible,
.home-pills .pill.open {
  border-color: var(--accent);
  color: var(--accent-fg);
  box-shadow: 0 6px 18px hsla(213, 40%, 20%, 0.12);
  transform: translateY(-1px);
  outline: none;
}
.home-pills .pill-note {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(4px);
  z-index: 30;
  width: max-content;
  max-width: min(300px, 84vw);
  padding: 10px 13px;
  background: var(--text);
  color: #fff;
  border-radius: 10px;
  font-size: 0.76rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  box-shadow: 0 14px 34px hsla(213, 40%, 20%, 0.28);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
/* little arrow */
.home-pills .pill-note::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--text);
}
.home-pills .pill:hover .pill-note,
.home-pills .pill:focus-visible .pill-note,
.home-pills .pill.open .pill-note {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s;
}
/* on phones the row is one pill wide, so anchor the bubble to the row */
@media (max-width: 640px) {
  .home-pills .pill-note { max-width: min(300px, 90vw); font-size: 0.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .home-pills .pill-note { transition: none; }
}

/* ============================================================
   HEYDOC GUIDE — conversational care finder
============================================================ */
.guide-panel { display: none; position: relative; z-index: 2; }
.guide-panel.open { display: block; }
.guide-inner {
  /* same footprint as the Get Guidance box above it */
  max-width: 1020px;
  width: calc(100% - 32px);
  margin: 0 auto 34px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--border);
  border-radius: 1.25rem;
  box-shadow: 0 16px 44px hsla(213, 40%, 20%, 0.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  animation: pageReveal 0.32s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.guide-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 20px 12px; border-bottom: 1px solid var(--border);
}
.guide-title { font-size: 0.95rem; font-weight: 800; color: var(--text); }
.guide-sub { font-size: 0.75rem; color: var(--muted); margin-top: 2px; line-height: 1.45; max-width: 46ch; }
.guide-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.guide-restart {
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 100px;
  background: #fff; color: var(--muted); font-family: inherit; font-size: 0.72rem;
  font-weight: 700; cursor: pointer;
}
.guide-restart:hover { border-color: var(--accent); color: var(--accent); }
.guide-close {
  width: 30px; height: 30px; border: none; border-radius: 50%;
  background: transparent; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.guide-close:hover { background: hsl(215, 20%, 94%); color: var(--text); }

/* Fixed height so the conversation scrolls inside the panel rather than
   pushing the page down as it grows. */
.guide-stream {
  padding: 16px 20px 20px;
  height: 420px;
  overflow-y: auto;
  /* No CSS smooth-scroll here: each new message starts another animation and
     they cancel one another, leaving the view short of the latest reply. */
  overscroll-behavior: contain;
}

.gd-row { display: flex; margin-bottom: 10px; }
.gd-row.gd-you { justify-content: flex-end; }
.gd-bubble {
  max-width: 84%; padding: 10px 14px; border-radius: 14px;
  font-size: 0.88rem; line-height: 1.5;
  background: hsl(215, 25%, 95%); color: var(--text);
}
.gd-you .gd-bubble { background: var(--accent); color: #fff; }

.gd-typing { display: flex; gap: 4px; align-items: center; padding: 12px 14px; }
.gd-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
  animation: gdBlink 1.1s infinite ease-in-out;
}
.gd-typing span:nth-child(2) { animation-delay: 0.16s; }
.gd-typing span:nth-child(3) { animation-delay: 0.32s; }
@keyframes gdBlink { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

.gd-choices { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.gd-choice, .gd-action {
  padding: 9px 15px; border: 1px solid hsl(206, 78%, 82%); border-radius: 100px;
  background: #fff; color: var(--accent-fg); font-family: inherit;
  font-size: 0.82rem; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: all var(--trans);
}
.gd-choice:hover, .gd-action:hover {
  background: var(--accent); border-color: var(--accent); color: #fff;
  transform: translateY(-1px); text-decoration: none;
}
.gd-action.gd-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.gd-action.gd-danger { background: var(--danger); border-color: var(--danger); color: #fff; }

.gd-results { display: grid; gap: 10px; margin: 4px 0 12px; }
.gd-clinic {
  border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 14px; background: #fff;
}
.gd-clinic-name { font-weight: 700; font-size: 0.9rem; color: var(--text); }
.gd-badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0 6px; }
.gd-badge { padding: 2px 9px; border-radius: 100px; font-size: 0.68rem; font-weight: 700; }
.gd-b-fast { background: hsl(140, 50%, 91%); color: hsl(140, 45%, 26%); }
.gd-b-ramq { background: hsl(206, 78%, 92%); color: hsl(206, 75%, 32%); }
.gd-b-ins  { background: hsl(262, 60%, 93%); color: hsl(262, 45%, 38%); }
.gd-b-priv { background: hsl(36, 90%, 92%); color: hsl(36, 90%, 30%); }
.gd-b-near { background: hsl(0, 72%, 94%); color: hsl(0, 60%, 40%); }
.gd-b-dist { background: hsl(215, 20%, 94%); color: var(--muted); }
.gd-clinic-meta { font-size: 0.76rem; color: var(--muted); line-height: 1.5; margin-top: 2px; }
.gd-clinic-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.gd-mini {
  padding: 5px 11px; border: 1px solid var(--border); border-radius: 100px;
  font-size: 0.73rem; font-weight: 600; color: var(--accent-fg);
  background: #fff; text-decoration: none;
}
.gd-mini:hover { border-color: var(--accent); text-decoration: none; }

.gd-foot { margin-top: 6px; }
.gd-disclaimer { font-size: 0.73rem; color: var(--muted); line-height: 1.5; margin-bottom: 10px; }

@media (max-width: 640px) {
  .guide-inner { width: calc(100% - 20px); border-radius: 1rem; }
  .guide-stream { height: 60vh; padding: 14px 14px 18px; }
  .gd-bubble { max-width: 90%; font-size: 0.85rem; }
  .guide-sub { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-inner { animation: none; }
  .gd-typing span { animation: none; opacity: 0.5; }
}

/* guide: result groups, partner highlight, SMS button */
.gd-group-heading {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted); margin: 10px 2px 2px;
}
/* The suggested partner card reads green; everything else keeps the muted
   blue, so which one is being recommended is obvious without reading. */
.gd-clinic.gd-partner {
  border-color: hsl(146, 45%, 68%);
  background: hsl(146, 55%, 96.5%);
}
.gd-clinic.gd-partner .gd-clinic-name { color: hsl(146, 45%, 22%); }
.gd-b-partner { background: hsl(146, 55%, 34%); color: #fff; }
.gd-sms { cursor: pointer; font-family: inherit; }
.gd-sms:disabled { opacity: 0.65; cursor: default; }
.gd-sms-done { border-color: hsl(140, 45%, 60%); color: hsl(140, 45%, 28%); }

/* guide: community thread suggestion.
   Warm orange rather than the chat's blue-grey, so a link out of the
   conversation does not read as another message in it. */
.gd-thread {
  border: 1.5px solid hsl(28, 85%, 62%);
  background: hsl(34, 100%, 96%);
  border-radius: 12px; padding: 12px 14px; margin: 12px 0 4px;
}
.gd-thread-intro { font-size: 0.76rem; color: hsl(28, 55%, 38%); margin-bottom: 4px; }
.gd-thread-title { font-size: 0.86rem; font-weight: 700; color: hsl(26, 60%, 24%); margin-bottom: 9px; line-height: 1.4; }
.gd-thread .gd-action {
  background: #fff; border-color: hsl(28, 80%, 66%); color: hsl(26, 72%, 34%);
}
.gd-thread .gd-action:hover {
  background: hsl(28, 85%, 55%); border-color: hsl(28, 85%, 55%); color: #fff;
}

/* guide: the practitioner hand-off. Green and pulsing because it is the
   action we most want seen, and blue on blue-grey disappeared. */
.gd-action.gd-pulse {
  background: hsl(146, 64%, 42%); border-color: hsl(146, 64%, 42%); color: #fff;
  box-shadow: 0 0 0 0 hsla(146, 64%, 42%, 0.55);
  animation: gdPulse 1.9s infinite;
}
.gd-action.gd-pulse:hover {
  background: hsl(146, 66%, 36%); border-color: hsl(146, 66%, 36%);
  animation: none; box-shadow: 0 3px 10px hsla(146, 64%, 30%, 0.3);
}
@keyframes gdPulse {
  0%   { box-shadow: 0 0 0 0 hsla(146, 64%, 42%, 0.5); }
  70%  { box-shadow: 0 0 0 12px hsla(146, 64%, 42%, 0); }
  100% { box-shadow: 0 0 0 0 hsla(146, 64%, 42%, 0); }
}

/* guide: side-by-side results.
   One private next to one public, and each card trimmed, so the top picks fit
   on screen instead of needing a scroll back up to find them. */
.gd-results.gd-split {
  grid-template-columns: 1fr 1fr;
  /* Headings size to their text; every card row then takes the height of the
     tallest card anywhere in the grid, so all containers come out identical
     rather than each row sizing itself. */
  grid-template-rows: auto;
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: 10px;
}
/* Cards are direct grid children, so a row sizes to its tallest card and
   every container in that row matches. */
.gd-results.gd-split > .gd-clinic { height: 100%; }
.gd-results.gd-split .gd-group-heading { margin: 0 2px 2px; align-self: end; }
.gd-col-empty { display: block; }
.gd-results.gd-split .gd-clinic { padding: 10px 11px; }
.gd-results.gd-split .gd-clinic-name { font-size: 0.83rem; line-height: 1.3; }
.gd-results.gd-split .gd-badges { gap: 4px; margin: 6px 0 5px; }
.gd-results.gd-split .gd-badge { font-size: 0.63rem; padding: 2px 7px; }
.gd-results.gd-split .gd-clinic-meta {
  font-size: 0.72rem; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.gd-results.gd-split .gd-clinic-actions { gap: 6px; margin-top: 7px; }
.gd-results.gd-split .gd-mini { padding: 4px 9px; font-size: 0.69rem; }

/* What the directory does not tell us, said plainly rather than guessed. */
.gd-b-suggested { background: hsl(146, 60%, 40%); color: #fff; }
.gd-b-svc    { background: hsl(160, 50%, 91%); color: hsl(160, 50%, 25%); }
.gd-b-unsure { background: hsl(45, 90%, 91%); color: hsl(35, 70%, 30%); }
.gd-caveats { margin: 2px 0 10px; }
.gd-caveat {
  font-size: 0.73rem; line-height: 1.5; color: hsl(35, 55%, 30%);
  background: hsl(45, 95%, 96%); border-left: 3px solid hsl(42, 90%, 62%);
  border-radius: 0 8px 8px 0; padding: 7px 11px; margin-bottom: 6px;
}

/* Stacked on a phone: two columns of clinic cards is unreadable at 375px. */
@media (max-width: 640px) {
  .gd-results.gd-split { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 6px; }
  .gd-results.gd-split .gd-group-heading { margin-top: 8px; }
  .gd-results.gd-split > .gd-clinic { height: auto; }
  .gd-col-empty { display: none; }
}

/* ---- Chat that follows you around the site ----
   On the home page the panel sits inline under the prompt bar. Anywhere
   else there is no prompt bar to sit under, so it docks in the corner and
   the conversation carries on rather than being thrown away. */
.guide-panel.gd-docked {
  position: fixed;
  right: 20px;
  bottom: 20px;
  left: auto;
  z-index: 1200;
}
.guide-panel.gd-docked .guide-inner {
  width: min(420px, calc(100vw - 40px));
  max-width: none;
  margin: 0;
  background: rgba(255, 255, 255, 0.97);
}
.guide-panel.gd-docked .guide-stream { height: min(46vh, 380px); }
.guide-panel.gd-docked .guide-sub { display: none; }
.guide-panel.gd-docked .guide-head { padding: 12px 16px 10px; }
/* Docked, the panel is ~420px no matter how wide the window is, so the
   side-by-side columns have to stack. A viewport media query cannot catch
   this: the viewport is wide, the container is not. */
.guide-panel.gd-docked .gd-results.gd-split { grid-template-columns: 1fr; gap: 6px; }
.guide-panel.gd-docked .gd-results.gd-split .gd-group-heading { margin-top: 8px; }

/* The bubble a minimised conversation folds into. */
.gd-launcher {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 22px hsla(213, 60%, 25%, 0.28);
  transition: transform var(--trans), box-shadow var(--trans);
}
.gd-launcher.show { display: flex; }
.gd-launcher:hover { transform: translateY(-2px); box-shadow: 0 12px 28px hsla(213, 60%, 25%, 0.34); }
/* A quiet "there is something here" mark, not a message counter: the guide
   never adds to the conversation while it is closed. */
.gd-launcher-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: hsl(146, 64%, 45%);
  border: 2px solid #fff;
}

@media (max-width: 640px) {
  .guide-panel.gd-docked { right: 10px; bottom: 10px; }
  .guide-panel.gd-docked .guide-inner { width: calc(100vw - 20px); border-radius: 1rem; }
  .guide-panel.gd-docked .guide-stream { height: 50vh; }
  .gd-launcher { right: 14px; bottom: 14px; width: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .gd-launcher { transition: none; }
  .gd-launcher:hover { transform: none; }
}

/* ---- Admin: what people ask the guide about ---- */
.adm-topics { display: grid; gap: 6px; margin-top: 4px; }
.adm-topic {
  display: grid;
  grid-template-columns: minmax(140px, 1.4fr) minmax(80px, 3fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.6);
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--trans), background var(--trans);
}
.adm-topic:hover { border-color: var(--accent); background: rgba(255, 255, 255, 0.9); }
.adm-topic-name { font-weight: 600; }
.adm-topic-bar {
  height: 8px;
  border-radius: 100px;
  background: hsl(215, 25%, 92%);
  overflow: hidden;
}
.adm-topic-fill { display: block; height: 100%; border-radius: 100px; background: var(--accent); }
.adm-topic-count { font-size: 0.76rem; color: var(--muted); white-space: nowrap; }
/* Unrecognised questions are a gap in the guide, not a subject. */
.adm-topic-unmatched .adm-topic-fill { background: hsl(35, 85%, 60%); }
.adm-topic-unmatched .adm-topic-name { color: hsl(30, 60%, 32%); }

@media (max-width: 640px) {
  .adm-topic { grid-template-columns: 1fr auto; gap: 6px 10px; }
  .adm-topic-bar { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .adm-topic { transition: none; }
}

/* ---- Admin: support request triage ---- */
.adm-row-click { cursor: pointer; }
.adm-row-click:hover > td { background: rgba(57, 160, 239, 0.06); }

.adm-status-select {
  padding: 5px 26px 5px 10px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: #fff;
  font-family: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7a8d' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
}
/* Untouched requests should be the ones that catch the eye. */
.adm-status-select.adm-status-unread {
  background-color: hsl(45, 95%, 93%);
  border-color: hsl(42, 85%, 68%);
  color: hsl(35, 70%, 28%);
}
.adm-status-select.adm-status-in_progress {
  background-color: hsl(206, 85%, 95%);
  border-color: hsl(206, 70%, 74%);
  color: hsl(206, 70%, 30%);
}
.adm-status-select.adm-status-resolved {
  background-color: hsl(146, 50%, 94%);
  border-color: hsl(146, 40%, 70%);
  color: hsl(146, 45%, 26%);
}

.adm-sr-field { margin-bottom: 14px; }
.adm-sr-label {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.adm-sr-value { font-size: 0.86rem; color: var(--text); line-height: 1.55; }
.adm-sr-value a { color: var(--accent-fg); }
/* The message is the point of the drawer: give it room and keep the
   student's own line breaks. */
.adm-sr-message .adm-sr-value {
  white-space: pre-wrap;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  max-height: 45vh;
  overflow-y: auto;
}

/* ---- Admin: chatbot analytics ---- */
.adm-chat-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 4px 0 14px;
}
.adm-chat-tile {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.65);
}
.adm-chat-n { font-size: 1.5rem; font-weight: 800; color: var(--text); line-height: 1.1; }
.adm-chat-l { font-size: 0.76rem; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.adm-chat-pct { font-size: 0.7rem; color: var(--muted); opacity: 0.85; margin-top: 4px; }
/* Unrecognised questions are a gap to close; emergency wording is the one
   number worth checking every day. */
.adm-chat-warn { border-color: hsl(42, 85%, 70%); background: hsl(45, 95%, 96%); }
.adm-chat-warn .adm-chat-n { color: hsl(35, 75%, 34%); }
.adm-chat-danger { border-color: hsl(0, 70%, 76%); background: hsl(0, 80%, 97%); }
.adm-chat-danger .adm-chat-n { color: hsl(0, 65%, 44%); }

.adm-subheading {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 7px;
}
/* Reporting rows, not buttons. */
.adm-topic.adm-static { cursor: default; }
.adm-topic.adm-static:hover { border-color: var(--border); background: rgba(255, 255, 255, 0.6); }

/* Insurance prompt reads as a placeholder until a real choice is made. */
.hd-auth-field select.hd-auth-unset { color: hsl(215, 10%, 60%); }