/* ============================================================================
   SymDoc web — styles (bu2iq design system skin)
   Tokens lifted from the approved mockup (2026-07-19-symdoc-restyle-mockup).
   Paper/panel surfaces · ember (#f59e42) as punctuation, ember-deep (#b06e24)
   as text accent · dusk-blue (#2c4760) for links/kickers/№ device · ink only on
   the logo tile, awning and on-ember text. Inter body + Newsreader italic accent.
   LIGHT-first, no dark theme. Every id/class/data-* referenced by the JS
   (app.js/core.js/i18n.js/map.js) is preserved — this is a re-skin only.
   ========================================================================== */

:root {
  /* — surfaces (paper) — */
  --paper:      #ffffff;
  --paper-well: #f3ecdd;
  --panel:      #fffdf8;
  --panel-2:    #f3ecdd;
  --line:       rgba(31, 36, 43, 0.14);

  /* — text (dark on light) — */
  --text:  #14181e;
  --ink:   #14181e;   /* legacy alias */
  --ink-2: #4b463c;
  --muted: #4b463c;
  --faint: #8a8272;

  /* — ember accent — */
  --ember:            #f59e42;
  --ember-bright:     #ffb866;
  --ember-deep:       #b06e24;
  --ember-wash:       rgba(245, 158, 66, 0.14);
  --ember-wash-soft:  rgba(245, 158, 66, 0.08);
  --ember-border:     rgba(176, 110, 36, 0.30);

  /* — dusk highlight (links, kickers, small-caps, № device) — */
  --dusk:        #2c4760;
  --dusk-bright: #3a5a78;
  --dusk-wash:   rgba(44, 71, 96, 0.12);
  --dusk-border: rgba(44, 71, 96, 0.34);

  /* — brand-literal ink & cream (logo tile, awning, on-ember text) — */
  --ink-brand:   #0d1117;
  --cream-brand: #f2ead9;

  /* — semantic — */
  --ok:         #4a7a54;
  --ok-wash:    rgba(74, 122, 84, 0.12);
  --ok-border:  rgba(74, 122, 84, 0.34);
  --error:      #c4523f;
  --error-deep: #a83e2d;
  --error-wash: rgba(196, 82, 63, 0.10);
  --error-border: rgba(196, 82, 63, 0.32);

  --radius-btn:  10px;
  --radius-card: 14px;
  --radius: 14px; /* legacy alias */

  /* — care teal (SymDoc mark + body-map accents) — */
  --care:        #0f766e;
  --care-bright: #14b8a6;
  --care-wash:   rgba(15, 118, 110, 0.10);
  --care-border: rgba(15, 118, 110, 0.32);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Noto Sans", "Noto Sans Devanagari", "Noto Sans Kannada", sans-serif;
  --font-accent: 'Newsreader', Georgia, serif;

  /* quiet shadow idiom — the system leans on borders, not drop shadows */
  --shadow-sm: 0 1px 2px rgba(13, 17, 23, 0.05);
  --shadow-md: 0 6px 22px rgba(13, 17, 23, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; cursor: pointer; }
a { color: var(--dusk); text-underline-offset: 3px; }
a:hover { color: var(--ember-deep); }
::selection { background: rgba(245, 158, 66, 0.3); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* The JS toggles visibility via the `hidden` attribute (el.hidden = true) on
   elements that also carry display-setting classes (.thinking, .show-more, …).
   Make `hidden` authoritative so those toggles always win over component
   display rules. */
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ header */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper-well);
  border-bottom: 1px solid var(--line);
}

.topbar-inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* wordmark lockup (the #wordmark button → home) */
.wordmark {
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
}

.wordmark-badge {
  width: 40px; height: 40px;
  border-radius: 11px;
  overflow: hidden;
  flex: none;
  background: var(--ink-brand);
}
.wordmark-badge svg { display: block; width: 40px; height: 40px; }

.wordmark-text { display: block; line-height: 1; }
.wordmark-name {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1;
}
.wordmark-name .e { color: var(--ember-deep); }
.wordmark-tag {
  display: block;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.2;
}
.wordmark-house {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--faint);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.wordmark-house .two { color: var(--ember-deep); font-weight: 600; }
.wordmark-house .say { font-family: Newsreader, Georgia, serif; font-style: italic; }

.topbar-spacer { flex: 1; }

/* City bucket selector — pill control */
.city-select {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px 5px 14px;
  margin-right: 4px;
}
.city-select .city-ic {
  width: 15px; height: 15px;
  color: var(--dusk);
  flex: none;
}
.city-select .city-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dusk);
}
.city-picker {
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  padding: 4px 2px;
  cursor: pointer;
  max-width: 40vw;
}
.city-picker:focus-visible {
  outline: 2px solid var(--dusk);
  outline-offset: 2px;
  border-radius: 6px;
}
.city-picker option:disabled {
  color: var(--faint);
  opacity: 0.6;
  cursor: not-allowed;
}
@media (max-width: 480px) {
  .city-select .city-label { display: none; }
}

/* language switch — segmented control */
.lang-switch {
  display: inline-flex;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.lang-btn {
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  transition: background 0.14s ease, color 0.14s ease;
}
.lang-btn + .lang-btn { border-left: 1px solid var(--line); }
.lang-btn:hover { color: var(--ember-deep); background: var(--panel-2); }
.lang-btn.on { background: var(--ember); color: var(--ink-brand); }

/* Location status bar (below the topbar inner row) */
.loc-status-bar {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 20px 9px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Area dropdown — pill control */
.area-select {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px 5px 14px;
}
.area-select .city-ic {
  width: 15px; height: 15px;
  color: var(--dusk);
  flex: none;
}
.area-select .city-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dusk);
}
.area-picker {
  border: none;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  padding: 4px 2px;
  cursor: pointer;
  max-width: 40vw;
}
.area-picker:focus-visible {
  outline: 2px solid var(--dusk);
  outline-offset: 2px;
  border-radius: 6px;
}
@media (max-width: 480px) {
  .area-select .city-label { display: none; }
}

/* Mandatory-locality: draw attention to the area picker until one is chosen. */
.area-select.area-needed {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
  border-radius: 999px;
  background: var(--ember-wash);
  animation: area-pulse 1.6s ease-in-out infinite;
}
.area-picker.needs-attention { color: var(--ember-deep); }
@keyframes area-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 66, 0.40); }
  50%      { box-shadow: 0 0 0 6px rgba(245, 158, 66, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .area-select.area-needed { animation: none; }
}

/* Prompt / empty-state card shown in the doctor list. */
.area-required {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  text-align: center;
  padding: 22px 18px;
  margin: 8px 0;
  border: 1px dashed var(--ember-border);
  border-radius: var(--radius-card);
  background: var(--ember-wash-soft);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}
.area-required .area-required-icon { font-size: 20px; }

/* Location status pill — state variants */
.loc-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.loc-status.granted {
  background: var(--ok-wash);
  border-color: var(--ok-border);
  color: var(--ok);
}
.loc-status.denied {
  background: var(--ember-wash);
  border-color: var(--ember-border);
  color: var(--ember-deep);
}
.loc-status.pending {
  background: var(--dusk-wash);
  border-color: var(--dusk-border);
  color: var(--dusk);
}

/* Inline retry button inside the denied pill */
.loc-retry-btn {
  background: var(--ember);
  color: var(--ink-brand);
  border: none;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  margin-left: 4px;
  transition: background 0.14s;
}
.loc-retry-btn:hover { background: var(--ember-bright); }

/* Location pill + blocked-location help hidden for now (user request
   2026-07-19) — geolocation still runs silently; the area picker stays. */
.loc-status, .loc-blocked-help { display: none !important; }

.loc-blocked-help {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ember-deep);
  background: var(--ember-wash-soft);
  border: 1px solid var(--ember-border);
  border-radius: 8px;
  padding: 8px 10px;
  max-width: 520px;
}

/* "Nearest covered city" notice in the doctors view */
.city-far-note {
  margin-top: 10px;
  background: var(--ember-wash);
  border: 1px solid var(--ember-border);
  color: var(--ember-deep);
  border-radius: var(--radius-card);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 600;
}

/* ------------------------------------------------------------------ layout */

.page {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 20px 64px;
}

.view { display: none; }
.view.active {
  display: block;
  animation: viewIn 0.45s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
@keyframes viewIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* -------------------------------------------------------------------- hero */

.hero {
  text-align: center;
  padding: 56px 0 8px;
  position: relative;
}

.hero-halo {
  position: absolute;
  inset: -40px -200px auto;
  height: 420px;
  background:
    radial-gradient(560px 260px at 50% 0%, rgba(245, 158, 66, 0.08), transparent 70%),
    radial-gradient(420px 220px at 78% 18%, rgba(44, 71, 96, 0.05), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.hero h1 {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 auto 14px;
  max-width: 720px;
  color: var(--text);
}
.hero .hero-sub {
  font-size: clamp(16px, 2.4vw, 18px);
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto 34px;
}

/* symptom composer */
.composer {
  max-width: 680px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: 10px 12px 10px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.composer:focus-within {
  border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(245, 158, 66, 0.22);
}

.composer input {
  flex: 1;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 16.5px;
  color: var(--text);
  background: transparent;
  min-width: 0;
  padding: 14px 0;
}
.composer input::placeholder { color: var(--faint); }

.mic-btn {
  width: 50px; height: 50px;
  flex: none;
  border: 1px solid var(--dusk-border);
  border-radius: 12px;
  background: var(--dusk-wash);
  color: var(--dusk);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.14s ease, transform 0.15s ease;
}
.mic-btn svg { width: 23px; height: 23px; }
.mic-btn:hover { background: rgba(44, 71, 96, 0.18); }
.mic-btn:active { transform: scale(0.96); }
.mic-btn.listening {
  animation: micPulse 1.6s ease-in-out infinite;
  background: var(--ember-wash);
  border-color: var(--ember-border);
  color: var(--ember-deep);
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(245, 158, 66, 0.16), 0 0 0 12px rgba(245, 158, 66, 0.05); }
  50% { box-shadow: 0 0 0 9px rgba(245, 158, 66, 0.22), 0 0 0 20px rgba(245, 158, 66, 0.06); }
}

.go-btn {
  flex: none;
  border: 1px solid var(--ember);
  border-radius: var(--radius-btn);
  background: var(--ember);
  color: var(--ink-brand);
  font-size: 15px;
  font-weight: 600;
  padding: 14px 22px;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.15s ease;
}
.go-btn:hover { background: var(--ember-bright); border-color: var(--ember-bright); }
.go-btn:active { transform: scale(0.97); }

.mic-hint {
  margin: 14px 0 0;
  font-size: 13.5px;
  color: var(--faint);
  min-height: 20px;
}
.mic-hint.listening { color: var(--ember-deep); font-weight: 600; }

/* chips */
.chips-label {
  margin: 34px 0 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}
.chip {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 500;
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
}
.chip:hover { border-color: var(--dusk); color: var(--dusk); }
.chip:active { transform: translateY(0); }
.chip .em { margin-right: 7px; }
.chip.danger {
  border-color: var(--ember-border);
  background: var(--ember-wash-soft);
  color: var(--ember-deep);
}
.chip.danger:hover { background: var(--ember-wash); border-color: var(--ember-border); color: var(--ember-deep); }

/* trust row */
.trust-row {
  margin: 48px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 32px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}
.trust-item { display: flex; align-items: center; gap: 9px; }
.trust-item .t-ic {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--dusk-wash);
  color: var(--dusk);
  flex: none;
}
.trust-item .t-ic svg { width: 15px; height: 15px; }
.trust-item:nth-child(1) .t-ic { background: var(--ember-wash); color: var(--ember-deep); }
.trust-item:nth-child(3) .t-ic { background: var(--ember-wash); color: var(--ember-deep); }

/* --------------------------------------------------------------- sub-pages */

.subhead {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 26px 0 6px;
}
.back-btn {
  width: 42px; height: 42px;
  flex: none;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.back-btn:hover { background: var(--panel-2); border-color: var(--dusk-border); color: var(--dusk); }
.back-btn svg { width: 18px; height: 18px; }
.subhead h2 {
  margin: 0;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(23px, 3.6vw, 30px);
  letter-spacing: 0;
  color: var(--text);
}
.subhead .sub-sub { margin: 3px 0 0; color: var(--muted); font-size: 14.5px; }

/* thinking / analyzing */
.thinking {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 70px 0 90px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 600;
}
.eq { display: flex; align-items: center; gap: 5px; height: 44px; }
.eq i {
  display: block;
  width: 6px;
  height: 100%;
  border-radius: 4px;
  background: var(--dusk);
  animation: eq 1s ease-in-out infinite;
  transform-origin: center;
}
.eq i:nth-child(1) { animation-delay: 0s;   height: 40%; }
.eq i:nth-child(2) { animation-delay: 0.12s; height: 75%; }
.eq i:nth-child(3) { animation-delay: 0.24s; height: 100%; }
.eq i:nth-child(4) { animation-delay: 0.36s; height: 65%; }
.eq i:nth-child(5) { animation-delay: 0.48s; height: 85%; }
.eq i:nth-child(6) { animation-delay: 0.6s;  height: 50%; }
@keyframes eq {
  0%, 100% { transform: scaleY(0.4); }
  50% { transform: scaleY(1); }
}

/* -------------------------------------------------------------- assessment */

.assess-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 18px;
  margin-top: 18px;
}
@media (max-width: 820px) {
  .assess-grid { grid-template-columns: 1fr; }
}

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 22px 24px;
}
.card + .card { margin-top: 18px; }
.card h3 {
  margin: 0 0 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dusk);
}

.calm-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--dusk-wash);
  border: 1px solid var(--dusk-border);
  color: var(--dusk);
  border-radius: var(--radius-card);
  padding: 13px 18px;
  font-weight: 600;
  font-size: 15.5px;
  margin-top: 20px;
}
.calm-banner .em { font-size: 22px; }

.you-said {
  margin-top: 14px;
  color: var(--muted);
  font-size: 15px;
}
.you-said q {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--text);
  quotes: "\201C" "\201D";
}

/* cause bars */
.cause { margin: 15px 0; }
.cause:first-of-type { margin-top: 4px; }
.cause-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 8px;
}
.cause-pct { color: var(--dusk); font-weight: 700; font-size: 13px; flex: none; }
.bar-track {
  height: 9px;
  border-radius: 6px;
  background: var(--panel-2);
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  width: 0;
  border-radius: 6px;
  background: var(--dusk);
  transition: width 0.9s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.bar-fill.dim { background: var(--dusk-border); }

/* urgency pill */
.urgency-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 600;
  font-size: 14.5px;
  border: 1px solid transparent;
}
.urgency-pill .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: currentColor;
  flex: none;
}
.u-emergency { background: var(--error-wash); color: var(--error-deep); border-color: var(--error-border); }
.u-24h { background: var(--ember-wash); color: var(--ember-deep); border-color: var(--ember-border); }
.u-23d { background: var(--dusk-wash); color: var(--dusk); border-color: var(--dusk-border); }
.u-self { background: var(--ok-wash); color: var(--ok); border-color: var(--ok-border); }

/* specialist */
.spec-card {
  display: flex;
  align-items: center;
  gap: 14px;
}
.spec-ic {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--dusk-wash);
  border: 1px solid var(--dusk-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  flex: none;
}
.spec-name { font-size: 18px; font-weight: 600; letter-spacing: -0.005em; color: var(--text); }
.spec-sub { color: var(--muted); font-size: 14px; }

.advice-text { font-size: 15.5px; color: var(--muted); margin: 0; }

.disclaimer {
  margin-top: 16px;
  text-align: center;
  color: var(--faint);
  font-size: 13px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}
.btn {
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  padding: 14px 24px;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-decoration: none;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--ember);
  border-color: var(--ember);
  color: var(--ink-brand);
  flex: 2 1 auto;
}
.btn-primary:hover { background: var(--ember-bright); border-color: var(--ember-bright); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  flex: 1 1 auto;
}
.btn-ghost:hover { border-color: var(--dusk); color: var(--dusk); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* -------------------------------------------------------------- emergency */
/* Genuine red-flag 108 state keeps a serious (error) tone — this is a real
   ambulance CTA, not the calm non-emergency triage. */

.emergency {
  margin-top: 22px;
  background: var(--error-wash);
  border: 1px solid var(--error-border);
  border-radius: var(--radius-card);
  padding: clamp(26px, 5vw, 44px);
  text-align: center;
}
.emergency .pulse-ring {
  width: 84px; height: 84px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  color: var(--error);
  animation: sosPulse 1.8s ease-in-out infinite;
}
.emergency .pulse-ring svg { width: 38px; height: 38px; }
@keyframes sosPulse {
  0%, 100% { box-shadow: 0 0 0 8px rgba(196, 82, 63, 0.12), 0 0 0 20px rgba(196, 82, 63, 0.05); }
  50% { box-shadow: 0 0 0 14px rgba(196, 82, 63, 0.16), 0 0 0 30px rgba(196, 82, 63, 0.06); }
}
.emergency h2 {
  margin: 0 0 8px;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(24px, 4.5vw, 32px);
  color: var(--error-deep);
  letter-spacing: 0;
}
.emergency .em-lead {
  color: var(--error-deep);
  font-size: 16px;
  max-width: 520px;
  margin: 0 auto 24px;
}
.call-108 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--error);
  color: #fff;
  border-radius: var(--radius-btn);
  padding: 18px 40px;
  font-size: clamp(18px, 3.4vw, 22px);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(196, 82, 63, 0.28);
  transition: transform 0.14s ease, background 0.14s ease;
}
.call-108:hover { background: var(--error-deep); color: #fff; transform: translateY(-2px); }
.call-108:active { transform: scale(0.97); }
.call-108 svg { width: 25px; height: 25px; }

.em-steps {
  margin: 28px auto 0;
  max-width: 520px;
  display: grid;
  gap: 10px;
  text-align: left;
}
.em-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--error-border);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 15px;
  color: var(--text);
}
.em-step .n {
  width: 26px; height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--error-wash);
  color: var(--error-deep);
  font-weight: 700;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.em-also { margin-top: 18px; color: var(--error-deep); font-size: 14.5px; }
.em-back { margin-top: 26px; }
.em-back button {
  background: none;
  border: none;
  color: var(--error-deep);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- doctors */

.near-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--dusk-wash);
  border: 1px solid var(--dusk-border);
  color: var(--dusk);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 14px;
}
.near-pill svg { width: 14px; height: 14px; flex: none; }

.widened-note {
  margin-top: 14px;
  background: var(--ember-wash);
  border: 1px solid var(--ember-border);
  color: var(--ember-deep);
  border-radius: var(--radius-card);
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
}

.doc-list {
  margin-top: 24px;
  display: grid;
  gap: 14px;
}

.doc-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 20px 22px 18px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  animation: cardIn 0.5s cubic-bezier(0.22, 0.8, 0.3, 1) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.doc-card:hover {
  border-color: var(--dusk);
  box-shadow: var(--shadow-md);
}
.doc-card.top {
  border-color: var(--ember-border);
  box-shadow: 0 0 0 1px var(--ember-border), var(--shadow-sm);
}
.doc-card.top:hover { box-shadow: 0 0 0 1px var(--ember-border), var(--shadow-md); }

.ribbon {
  position: absolute;
  top: -12px;
  left: 18px;
  background: var(--ember);
  color: var(--ink-brand);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 13px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}

.doc-main {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}
.doc-rank {
  flex: none;
  min-width: 30px;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--dusk);
  line-height: 1;
  text-align: center;
}
.doc-card.top .doc-rank { color: var(--ember-deep); }
.doc-avatar {
  width: 48px; height: 48px;
  flex: none;
  border-radius: 12px;
  background: var(--dusk-wash);
  border: 1px solid var(--dusk-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.doc-id { flex: 1; min-width: 0; }
.doc-name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-spec {
  color: var(--dusk);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 3px;
}
.doc-rating {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--muted);
}
.stars { color: var(--ember); font-size: 13.5px; letter-spacing: 1.5px; }

.doc-side { text-align: right; flex: none; }
.doc-fee { font-size: 17px; font-weight: 600; color: var(--text); }
.doc-dist { color: var(--muted); font-size: 13.5px; margin-top: 2px; }

.doc-why {
  margin-top: 14px;
  background: var(--ember-wash-soft);
  border: 1px solid var(--ember-border);
  border-radius: 10px;
  padding: 9px 14px;
  color: var(--ember-deep);
  font-size: 14px;
  font-weight: 600;
}

.doc-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.doc-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-btn);
  padding: 12px 10px;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.1s ease;
}
.doc-btn:active { transform: scale(0.97); }
.doc-btn svg { width: 16px; height: 16px; flex: none; }
.doc-btn.call { background: var(--ember); border-color: var(--ember); color: var(--ink-brand); }
.doc-btn.call:hover { background: var(--ember-bright); border-color: var(--ember-bright); }
.doc-btn.maps { background: transparent; color: var(--dusk); border: 1px solid var(--line); }
.doc-btn.maps:hover { border-color: var(--dusk); color: var(--dusk); background: var(--dusk-wash); }

.show-more {
  margin: 24px auto 0;
  display: block;
}

/* ------------------------------------------------------------ doctor modal */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(13, 17, 23, 0.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.modal-backdrop.open { opacity: 1; pointer-events: auto; }

.modal {
  background: var(--panel);
  width: 100%;
  max-width: 520px;
  border-radius: 20px 20px 0 0;
  padding: 14px 26px 30px;
  max-height: 88vh;
  overflow-y: auto;
  transform: translateY(40px);
  transition: transform 0.3s cubic-bezier(0.22, 0.8, 0.3, 1);
}
.modal-backdrop.open .modal { transform: translateY(0); }
@media (min-width: 640px) {
  .modal-backdrop { align-items: center; padding: 24px; }
  .modal { border-radius: var(--radius-card); }
}

.modal-grip {
  width: 44px; height: 5px;
  border-radius: 3px;
  background: var(--line);
  margin: 0 auto 18px;
}

.modal-head {
  display: flex;
  align-items: center;
  gap: 16px;
}
.modal-avatar {
  width: 66px; height: 66px;
  flex: none;
  border-radius: 14px;
  background: var(--dusk-wash);
  border: 1px solid var(--dusk-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px;
}
.modal-name { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.modal-spec { color: var(--dusk); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; margin-top: 2px; }
.badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--dusk-wash);
  border: 1px solid var(--dusk-border);
  color: var(--dusk);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 11px;
  letter-spacing: 0.02em;
  font-weight: 600;
  margin-top: 8px;
}
.badge-verified svg { width: 11px; height: 11px; }

.modal-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 20px;
}
.stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 8px;
  text-align: center;
}
.stat .v { font-size: 17px; font-weight: 600; color: var(--text); }
.stat .v.fee { color: var(--ember-deep); }
.stat .k { font-size: 11px; color: var(--muted); margin-top: 2px; }

.modal-why {
  margin-top: 16px;
  background: var(--ember-wash-soft);
  border: 1px solid var(--ember-border);
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--ember-deep);
  font-size: 14.5px;
  font-weight: 600;
}
.modal-area {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.modal-area svg { width: 16px; height: 16px; color: var(--dusk); flex: none; }

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.modal-close {
  margin: 18px auto 0;
  display: block;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 600;
}
.modal-close:hover { color: var(--ember-deep); }

/* ---------------------------------------------------------------- footer */

.footer {
  border-top: 1px solid var(--line);
  margin-top: 40px;
}
.footer-inner {
  max-width: 1060px;
  margin: 0 auto;
  padding: 26px 20px 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  color: var(--muted);
  font-size: 13.5px;
}
.footer .spacer { flex: 1; }
.footer .sos-link {
  color: var(--ember-deep);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.footer .sos-link:hover { color: var(--ember); text-decoration: underline; }
.footer .sos-link svg { width: 15px; height: 15px; }

/* toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 80px);
  background: var(--ink-brand);
  color: var(--cream-brand);
  border-radius: 12px;
  padding: 12px 20px;
  font-size: 14.5px;
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(13, 17, 23, 0.3);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 0.3s ease;
  z-index: 80;
  max-width: min(92vw, 480px);
  text-align: center;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero { padding-top: 36px; }
  .composer {
    flex-wrap: wrap;
    padding: 12px 14px;
    border-radius: var(--radius-card);
  }
  .composer input { flex: 1 1 100%; order: -1; padding: 6px 2px 12px; }
  .mic-btn { width: 48px; height: 48px; }
  .go-btn { flex: 1; }
  .trust-row { gap: 12px 18px; }
  .wordmark-tag, .wordmark-house { display: none; }
  .doc-actions { flex-direction: row; }
  .cta-row .btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------- map / toggle */

.view-toggle {
  display: inline-flex;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin: 16px 0 0;
}
.vt-btn {
  border: none;
  background: transparent;
  border-radius: 0;
  padding: 7px 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.vt-btn + .vt-btn { border-left: 1px solid var(--line); }
.vt-btn:hover { color: var(--ember-deep); background: var(--panel-2); }
.vt-btn.on { background: var(--ember); color: var(--ink-brand); }

.doc-map-wrap {
  margin-top: 14px;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
#docMap {
  width: 100%;
  height: 340px;
  background: var(--panel);
}
@media (max-width: 560px) {
  #docMap { height: 260px; }
}

.doc-map-note {
  background: var(--panel);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11.5px;
  padding: 7px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.doc-map-note svg { color: var(--dusk); }
.doc-map-note a { color: var(--dusk); }

/* ── Leaflet div-icon styles for YOU + doctor pins ───────────────────────── */

.map-you-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ember);
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(245, 158, 66, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-brand);
  font-size: 16px;
  line-height: 1;
}
.map-you-icon span { display: block; margin-top: -1px; }

.map-doc-icon {
  width: 32px;
  height: 32px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--dusk);
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(13, 17, 23, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}
.map-doc-icon span {
  transform: rotate(45deg);
  font-weight: 700;
  font-size: 11.5px;
  color: #fff;
  line-height: 1;
}
.map-doc-icon.tier1 {
  background: var(--dusk-bright);
}
.map-doc-icon.top {
  background: var(--ember-deep);
  width: 36px;
  height: 36px;
  border: 2.5px solid #fff;
  box-shadow: 0 3px 14px rgba(176, 110, 36, 0.45);
}
.map-doc-icon.top span { font-size: 13px; }

/* ── Leaflet popup content ───────────────────────────────────────────────── */

.map-popup {
  min-width: 160px;
  font-family: var(--font);
  font-size: 14px;
}
.mp-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 2px;
}
.mp-spec {
  color: var(--dusk);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 6px;
}
.mp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: var(--text);
  margin-top: 3px;
}
.mp-stars { color: var(--ember); font-size: 13px; }
.mp-fee { font-weight: 700; color: var(--ember-deep); }
.mp-dist { color: var(--muted); margin-left: auto; }

/* ── Card highlight (when a map pin is clicked) ─────────────────────────── */

.doc-card.map-highlight {
  outline: 3px solid var(--ember);
  outline-offset: 2px;
  transition: outline 0.1s ease;
}

/* ══════════════════════════════════════════════════════════════════════════
   2026-07-31 — public symptom-checker overhaul
   Body map (man/woman) entry · parked doctor search · doctor chrome hidden
   ════════════════════════════════════════════════════════════════════════ */

/* ── Doctor-search chrome parked: hide, keep in DOM for app.js wiring ───── */

.city-select, .loc-status-bar { display: none !important; }

/* ── Body map section ───────────────────────────────────────────────────── */

.bodymap-section {
  margin: 34px auto 0;
  max-width: 720px;
  text-align: center;
}
.bm-title {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 2px;
}
.bm-hint { color: var(--muted); font-size: 14px; margin: 0 0 14px; }

.bodymap-wrap {
  display: flex;
  gap: 18px;
  align-items: stretch;
  justify-content: center;
  text-align: left;
}

.bm-figure-col { flex: 0 0 240px; }

.bm-sex-toggle {
  display: inline-flex;
  border: 1.5px solid var(--care-border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--panel);
}
.bm-sex-btn {
  border: 0;
  background: transparent;
  font: 600 13.5px var(--font);
  color: var(--muted);
  padding: 7px 18px;
  cursor: pointer;
}
.bm-sex-btn.on { background: var(--care); color: #fff; }

.bm-figure { line-height: 0; }
.bm-svg { width: 100%; max-width: 240px; height: auto; }

/* transparent tap targets over the figure */
.bm-hit {
  fill: transparent;
  stroke: transparent;
  cursor: pointer;
  pointer-events: all;
  transition: fill 0.15s ease, stroke 0.15s ease;
}
path.bm-hit { fill: none; }
.bm-hit:hover, .bm-hit:focus {
  fill: rgba(20, 184, 166, 0.22);
  stroke: rgba(15, 118, 110, 0.55);
}
path.bm-hit:hover, path.bm-hit:focus {
  fill: none;
  stroke: rgba(20, 184, 166, 0.4);
}

/* area chips — every body area reachable without the figure too */
.bm-areas {
  flex: 1 1 auto;
  max-width: 380px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}
.bm-area-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.5px solid var(--line);
  background: var(--panel);
  border-radius: 999px;
  padding: 8px 13px;
  font: 500 13.5px var(--font);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.bm-area-chip:hover {
  border-color: var(--care-border);
  background: var(--care-wash);
  transform: translateY(-1px);
}
.bm-area-chip .ic { font-size: 15px; line-height: 1; }
.bm-area-chip.big { padding: 11px 17px; font-size: 14.5px; }

/* chooser / symptom panel */
.bm-panel {
  margin: 16px auto 0;
  max-width: 640px;
  background: var(--panel);
  border: 1.5px solid var(--care-border);
  border-radius: var(--radius-card);
  padding: 16px 18px 18px;
  text-align: left;
  box-shadow: 0 10px 30px rgba(15, 118, 110, 0.08);
}
.bm-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.bm-panel-head h3 { margin: 0; font-size: 17px; font-weight: 800; }
.bm-panel-close {
  border: 0;
  background: transparent;
  font-size: 16px;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 8px;
}
.bm-panel-close:hover { background: var(--care-wash); color: var(--text); }
.bm-panel-hint { color: var(--muted); font-size: 13.5px; margin: 3px 0 12px; }
.bm-panel-body { display: flex; flex-wrap: wrap; gap: 8px; }
.bm-sym-btn {
  border: 1.5px solid var(--line);
  background: var(--paper);
  border-radius: 10px;
  padding: 9px 13px;
  font: 500 14px var(--font);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.bm-sym-btn:hover { border-color: var(--care-border); background: var(--care-wash); }
.bm-more { width: 100%; margin-top: 4px; }
.bm-empty { color: var(--muted); font-size: 14px; margin: 4px 0; }

@media (max-width: 640px) {
  .bodymap-wrap { flex-direction: column; align-items: center; }
  .bm-figure-col { flex-basis: auto; }
  .bm-areas { max-width: none; justify-content: center; }
}

/* ── Parked doctor search ("coming soon") ───────────────────────────────── */

.btn-parked {
  position: relative;
  opacity: 0.55;
  filter: grayscale(0.55);
  cursor: not-allowed;
  pointer-events: none;
  user-select: none;
}
.soon-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2.5px 9px;
  border-radius: 999px;
  background: var(--care);
  color: #fff;
  font: 700 10.5px/1.5 var(--font);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  filter: none;
}
.parked-note {
  color: var(--muted);
  font-size: 13.5px;
  margin: 10px 0 0;
}