/* ==========================================================================
   Dental Ops — patient-facing design system (patient.css)
   Used by the standalone survey, passport, DOB gate, and education article
   pages. No app chrome, no product branding beyond the footer mark.
   Legacy class names from the pre-migration pages are kept working:
   .wrap .head .logo .q .q-missing .q-note .optrow .opt .nps .scale
   .guardrail .turnstile-box .submit #formError #thankYou .big #recoveryNote
   .review-block .review-btn .anon-note .ribbon .card .appt .label .when
   .what .est-grid .k .v .yours .est-note .edu .foot .cta .disclaimer
   .article .back .chip .title .meta .body .disc
   ========================================================================== */

/* --- Tokens (mirrors ui.css, plus patient-only surfaces) --- */
:root {
  --brand-50:#EEF8F7; --brand-100:#D6EFED; --brand-200:#B2E0DD; --brand-300:#7FCBC6;
  --brand-400:#53B6B2; --brand-500:#3AA19C; --brand-600:#2B8682; --brand-700:#236C69;
  --brand-800:#1B5553; --brand-900:#123E3D; --brand-950:#0B2A29;

  --gray-0:#FFFFFF; --gray-25:#FBFCFC; --gray-50:#F5F8F8; --gray-100:#EDF1F1; --gray-200:#DFE6E6;
  --gray-300:#C7D1D1; --gray-400:#9AA8A8; --gray-500:#6B7A7A; --gray-600:#4F5D5D; --gray-700:#384444;
  --gray-800:#243030; --gray-900:#141D1D; --gray-950:#0B1212;

  --success-50:#ECFDF3; --success-500:#12B76A; --success-600:#079455; --success-700:#067647;
  --warning-50:#FFFAEB; --warning-500:#F79009; --warning-600:#DC6803; --warning-700:#B54708;
  --danger-50:#FEF3F2;  --danger-500:#F04438;  --danger-600:#D92D20;  --danger-700:#B42318;
  --info-50:#EFF8FF;    --info-500:#2E90FA;    --info-600:#1570EF;    --info-700:#175CD3;

  --bg:#FAFBFB; --surface:#FFFFFF; --surface-2:#FBFCFC;
  --border:#E4EAEA; --border-strong:#CFD8D8;
  --ink:#141D1D; --ink-2:#384444; --ink-3:#6B7A7A; --ink-4:#9AA8A8;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:9999px;
  --shadow-xs:0 1px 2px rgba(20,29,29,.05);
  --shadow-sm:0 1px 2px rgba(20,29,29,.06),0 1px 3px rgba(20,29,29,.05);
  --shadow-md:0 4px 10px -2px rgba(20,29,29,.08),0 2px 4px -2px rgba(20,29,29,.05);
  --shadow-lg:0 16px 32px -8px rgba(20,29,29,.14),0 4px 8px -4px rgba(20,29,29,.06);
  --ring:0 0 0 3px rgba(83,182,178,.28);
  --ease:cubic-bezier(.2,.7,.2,1); --dur:160ms;

  --font-display:'Plus Jakarta Sans',Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-body:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* legacy aliases so un-migrated patient page CSS keeps rendering */
  --teal-50:var(--brand-50); --teal-100:var(--brand-100); --teal-200:var(--brand-200);
  --teal-300:var(--brand-300); --teal-400:var(--brand-400); --teal-500:var(--brand-400);
  --teal-600:var(--brand-600); --teal-700:var(--brand-700);
  --slate-50:var(--gray-50); --slate-100:var(--gray-100); --slate-200:var(--gray-200);
  --slate-300:var(--gray-300); --slate-400:var(--gray-400); --slate-500:var(--gray-500);
  --slate-600:var(--gray-600); --slate-700:var(--gray-700); --slate-900:var(--gray-900);
  --amber-50:var(--warning-50); --amber-600:var(--warning-600);
  --rose-50:var(--danger-50); --rose-600:var(--danger-600);
  --emerald-50:var(--success-50); --emerald-600:var(--success-600);
  --card:var(--surface); --font:var(--font-body);
}

/* --- Reset + base: 17px body type, faint brand gradient band at the top --- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font-body); font-size:17px; line-height:1.6;
  color:var(--ink); background:var(--bg);
  font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  padding:0 0 2rem; min-height:100vh; position:relative;
}
body::before {
  content:""; position:fixed; top:0; left:0; right:0; height:180px; z-index:-1;
  background:linear-gradient(180deg,var(--brand-50) 0%,rgba(250,251,251,0) 100%);
  pointer-events:none;
}
h1,h2,h3 { font-family:var(--font-display); font-weight:700; letter-spacing:-.02em; line-height:1.25; }
a { color:inherit; }
img,svg { display:block; max-width:100%; }
button,input,select,textarea { font:inherit; color:inherit; }
button { cursor:pointer; background:none; border:0; }
::selection { background:var(--brand-200); color:var(--brand-900); }

/* --- Page frame: .wrap, .head (logo + title), footer --- */
.wrap { max-width:640px; margin:0 auto; padding:1.5rem 1.15rem 2rem; }
.wrap.narrow { max-width:560px; }
.head { text-align:center; margin-bottom:1.5rem; }
.head .logo { width:3rem; height:3rem; margin:0 auto .7rem; flex:none; }
.head .logo img { width:100%; height:100%; object-fit:contain; }
.head h1 { font-size:1.65rem; color:var(--ink); letter-spacing:-.025em; }
.head p { font-size:.95rem; color:var(--ink-3); margin-top:.35rem; }
.head .eyebrow {
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  color:var(--brand-600); margin-bottom:.2rem;
}
/* Left-aligned head variant used by the passport (logo beside the title) */
.head.row { display:flex; align-items:center; gap:.85rem; text-align:left; }
.head.row .logo { margin:0; width:2.7rem; height:2.7rem; }

.foot {
  text-align:center; font-size:.85rem; color:var(--ink-3);
  padding:1.2rem 0 .5rem; margin-top:1.5rem;
}
.foot a:not(.cta) { color:var(--brand-700); font-weight:600; }
.powered {
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:11px; color:var(--ink-3); letter-spacing:.02em;
  margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--border);
}
.powered svg { width:16px; height:16px; flex:none; }
.disclaimer, .disc {
  font-size:.78rem; line-height:1.55; color:var(--ink-3);
  border-top:1px solid var(--border); padding-top:.9rem; margin-top:1rem;
}

/* --- Card: shared patient card surface --- */
.card {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:1.15rem 1.3rem; margin-bottom:1rem; box-shadow:var(--shadow-xs);
}
.label {
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ink-3); margin-bottom:.35rem;
}

/* --- Callouts: .callout .info|.warning|.danger|.success + .ribbon preview banner --- */
.callout {
  display:flex; align-items:flex-start; gap:.65rem;
  padding:.8rem 1rem; border-radius:var(--r-md); margin-bottom:1rem;
  border:1px solid var(--border); background:var(--gray-50);
  font-size:.9rem; line-height:1.5; color:var(--ink-2);
}
.callout svg { width:18px; height:18px; flex:none; margin-top:2px; }
.callout .callout-title { font-weight:700; margin-bottom:.15rem; }
.callout.info { background:var(--info-50); border-color:#B2DDFF; color:var(--info-700); }
.callout.warning { background:var(--warning-50); border-color:#FEDF89; color:var(--warning-700); }
.callout.danger { background:var(--danger-50); border-color:#FECDCA; color:var(--danger-700); }
.callout.success { background:var(--success-50); border-color:#A9EFC5; color:var(--success-700); }

/* Preview banner: article or passport education pending clinical review */
.ribbon {
  display:flex; align-items:flex-start; gap:.6rem;
  background:var(--warning-50); color:var(--warning-700); border:1px solid #FEDF89;
  border-radius:var(--r-md); padding:.7rem 1rem;
  font-size:.85rem; font-weight:600; line-height:1.45; margin-bottom:1.1rem;
}
.ribbon svg { width:18px; height:18px; flex:none; margin-top:1px; }

/* --- Survey: .q question cards, question counter --- */
fieldset { border:0; margin:0 0 1rem; padding:0; }
.q {
  position:relative;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:1.15rem 1.25rem; margin-bottom:.9rem; box-shadow:var(--shadow-xs);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.q:focus-within { border-color:var(--brand-300); box-shadow:var(--shadow-sm); }
/* A <legend> is anchored to the fieldset's BORDER edge and ignores the
   fieldset's padding, even at display:block — so the question text would
   straddle the card's top border. Floating it takes it out of the legend
   slot and into the content box; the next sibling clears the float. */
.q legend {
  float:left; display:block; width:100%;
  font-family:var(--font-display); font-weight:600; font-size:1.02rem; line-height:1.4;
  color:var(--ink); letter-spacing:-.01em; padding:0 0 .8rem;
}
.q legend + * { clear:both; }
/* Question counter ("1 of 9") — belongs INSIDE the legend, floated opposite. */
.q-count {
  float:right; margin-left:.75rem;
  font-size:.72rem; font-weight:600; color:var(--ink-3);
  font-variant-numeric:tabular-nums;
}
.q-missing { border-color:var(--danger-500); box-shadow:0 0 0 3px rgba(240,68,56,.12); }
.q-note { display:none; color:var(--danger-700); font-size:.85rem; font-weight:600; margin-top:.6rem; }
.q-missing .q-note { display:block; }

/* --- Survey: .optrow / .opt answer pills with checked state --- */
.optrow { display:flex; flex-wrap:wrap; gap:.5rem; }
.opt { display:inline-flex; }
.opt input { position:absolute; opacity:0; width:0; height:0; }
.opt span {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:.6rem 1.05rem;
  border:1.5px solid var(--border); border-radius:var(--r-full);
  background:var(--surface); color:var(--ink-2);
  font-size:.92rem; font-weight:600; line-height:1.2; cursor:pointer;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             color var(--dur) var(--ease), transform 80ms var(--ease);
}
.opt span:hover { border-color:var(--brand-300); background:var(--brand-50); color:var(--brand-800); }
.opt span:active { transform:translateY(1px); }
.opt input:checked + span {
  background:var(--brand-600); border-color:var(--brand-600); color:#fff;
  box-shadow:var(--shadow-sm);
}
.opt input:focus-visible + span { outline:2px solid var(--brand-500); outline-offset:3px; }

/* --- Survey: NPS 0-10 grid + endpoint scale labels --- */
.nps .optrow { display:grid; grid-template-columns:repeat(11,1fr); gap:.35rem; }
.nps .opt { display:block; }
.nps .opt span {
  width:100%; min-width:0; padding:.6rem .2rem; min-height:44px;
  border-radius:var(--r-md); font-variant-numeric:tabular-nums;
}
.nps .scale {
  display:flex; justify-content:space-between; gap:1rem;
  font-size:.76rem; color:var(--ink-3); margin-top:.55rem;
}
@media (max-width:600px) {
  .nps .optrow { grid-template-columns:repeat(6,1fr); }
}

/* --- Survey: comment box + guardrail note --- */
textarea, .textarea {
  width:100%; border:1.5px solid var(--border); border-radius:var(--r-md);
  padding:.75rem .85rem; font-size:1rem; line-height:1.5;
  background:var(--surface); color:var(--ink);
  min-height:6rem; resize:vertical;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
textarea:focus, .textarea:focus { outline:none; border-color:var(--brand-400); box-shadow:var(--ring); }
textarea::placeholder { color:var(--ink-4); }
.guardrail { font-size:.8rem; line-height:1.5; color:var(--ink-3); margin-top:.5rem; }
.optional { color:var(--ink-3); font-weight:500; }

/* --- Survey: Turnstile container --- */
.turnstile-box { display:flex; justify-content:center; margin-bottom:1rem; }

/* --- Survey: submit button, sticky mobile submit bar, form error --- */
.submit, .btn-primary-lg {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; min-height:52px; padding:.9rem 1.2rem;
  background:var(--brand-600); color:#fff; border:0; border-radius:14px;
  font-family:var(--font-body); font-size:1.02rem; font-weight:700; line-height:1;
  box-shadow:var(--shadow-sm);
  transition:background var(--dur) var(--ease), transform 80ms var(--ease);
}
.submit:hover:not(:disabled), .btn-primary-lg:hover:not(:disabled) { background:var(--brand-700); }
.submit:active:not(:disabled) { transform:translateY(1px); }
.submit:disabled { opacity:.6; cursor:not-allowed; }

.submit-bar {
  position:sticky; bottom:0; z-index:10;
  display:flex; flex-direction:column; gap:.5rem;
  padding:.85rem 1.15rem calc(.85rem + env(safe-area-inset-bottom));
  margin:1rem -1.15rem 0;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px); -webkit-backdrop-filter:saturate(180%) blur(10px);
  border-top:1px solid var(--border);
}
.submit-bar .submit-count {
  text-align:center; font-size:.8rem; color:var(--ink-3); font-variant-numeric:tabular-nums;
}
@media (min-width:601px) {
  .submit-bar {
    position:static; background:none; border-top:0; padding:0; margin:1.2rem 0 0;
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
}

#formError {
  display:none; background:var(--danger-50); color:var(--danger-700);
  border:1px solid #FECDCA; border-radius:var(--r-md);
  padding:.75rem 1rem; font-size:.9rem; font-weight:500; margin-bottom:1rem;
}

/* --- Survey: thank-you state, detractor recovery, review prompt --- */
#thankYou { display:none; text-align:center; padding:2.5rem 1rem 1rem; }
#thankYou .big {
  width:64px; height:64px; margin:0 auto 1rem; border-radius:var(--r-full);
  background:var(--success-50); color:var(--success-600);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
}
#thankYou .big svg { width:30px; height:30px; }
#thankYou h2 { font-size:1.4rem; margin-bottom:.6rem; color:var(--ink); }
#thankYou p { color:var(--ink-2); font-size:1rem; max-width:40ch; margin:0 auto; }
#recoveryNote {
  display:none; background:var(--warning-50); border:1px solid #FEDF89;
  border-radius:var(--r-lg); padding:1rem 1.2rem; margin:0 auto 1rem;
  max-width:42ch; font-size:.98rem; line-height:1.55; color:var(--warning-700); text-align:left;
}
.review-block {
  margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--border);
}
.review-block p { margin-bottom:.8rem; }
.review-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--brand-600); color:#fff; text-decoration:none;
  border-radius:14px; padding:.85rem 1.5rem; min-height:48px;
  font-weight:700; font-size:1rem; box-shadow:var(--shadow-sm);
  transition:background var(--dur) var(--ease);
}
.review-btn:hover { background:var(--brand-700); }
.anon-note { text-align:center; font-size:.8rem; color:var(--ink-3); margin-top:1.4rem; line-height:1.5; }

/* --- Passport: hero appointment card --- */
.card.appt { border-left:3px solid var(--brand-500); background:linear-gradient(180deg,var(--brand-50),var(--surface) 70%); }
.appt .when {
  font-family:var(--font-display); font-size:1.45rem; font-weight:700;
  letter-spacing:-.02em; color:var(--ink); line-height:1.25;
}
.appt .what { color:var(--ink-2); margin-top:.3rem; font-size:1rem; }

/* --- Passport: cost estimate figures --- */
.est-grid { display:flex; flex-wrap:wrap; gap:.9rem 1.75rem; margin-top:.25rem; }
.est-grid > div { min-width:7rem; }
.est-grid .k { font-size:.8rem; color:var(--ink-3); }
.est-grid .v {
  font-family:var(--font-display); font-size:1.1rem; font-weight:700;
  color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.est-grid .yours .v { color:var(--brand-600); font-size:1.6rem; }
.est-note { font-size:.8rem; line-height:1.5; color:var(--ink-3); margin-top:.75rem; }

/* --- Passport / education: article reading typography --- */
.edu h2, .body h2, .article .body h2 {
  font-family:var(--font-display); font-size:1.06rem; font-weight:700;
  color:var(--ink); letter-spacing:-.01em; margin:1.4rem 0 .5rem;
}
.edu h2:first-child, .body h2:first-child { margin-top:0; }
.edu h3, .body h3 { font-size:1rem; font-weight:700; margin:1.1rem 0 .4rem; }
.edu p, .body p { color:var(--ink-2); font-size:1.06rem; line-height:1.65; margin-bottom:.8rem; }
.edu ul, .edu ol, .body ul, .body ol { margin:0 0 .8rem 1.25rem; color:var(--ink-2); }
.edu li, .body li { margin-bottom:.35rem; line-height:1.6; }
.edu strong, .body strong { color:var(--ink); font-weight:700; }
.edu a, .body a { color:var(--brand-700); }

/* --- Education article page: back link, chip, title, meta --- */
.article { max-width:680px; margin:0 auto; }
.back {
  display:inline-flex; align-items:center; gap:.35rem;
  color:var(--brand-700); font-weight:600; font-size:.88rem;
  text-decoration:none; margin-bottom:1.1rem;
}
.back svg { width:15px; height:15px; }
.back:hover { color:var(--brand-800); }
.chip {
  display:inline-flex; align-items:center;
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
  color:var(--brand-700); background:var(--brand-50); border:1px solid var(--brand-200);
  padding:.2rem .6rem; border-radius:var(--r-full);
}
.article .title, h2.title {
  font-family:var(--font-display); font-size:1.85rem; font-weight:800;
  letter-spacing:-.03em; color:var(--ink); margin:.7rem 0 .35rem; line-height:1.2;
}
.article .meta { color:var(--ink-3); font-size:.85rem; margin-bottom:1.4rem; }

/* --- Call-to-action button (tel: link on passport) --- */
.cta {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--brand-600); color:#fff; text-decoration:none;
  font-weight:700; font-size:1rem; min-height:50px;
  padding:.8rem 1.4rem; border-radius:14px; margin:.5rem 0 1rem;
  box-shadow:var(--shadow-sm);
  transition:background var(--dur) var(--ease), transform 80ms var(--ease);
}
.cta svg { width:18px; height:18px; }
.cta:hover { background:var(--brand-700); }
.cta:active { transform:translateY(1px); }

/* --- DOB gate form (fields shared with the survey field styles) --- */
.field { display:block; margin-bottom:1rem; text-align:left; }
.field > label { display:block; font-size:.88rem; font-weight:600; color:var(--ink-2); margin-bottom:.4rem; }
.field .hint { display:block; font-size:.8rem; color:var(--ink-3); margin-top:.4rem; }
.input, input[type="date"], input[type="text"], input[type="tel"], input[type="email"], input[type="password"] {
  width:100%; min-height:48px; padding:.7rem .9rem;
  background:var(--surface); color:var(--ink);
  border:1.5px solid var(--border); border-radius:var(--r-md);
  font-size:1rem; line-height:1.4;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:focus, input[type="date"]:focus, input[type="text"]:focus, input[type="tel"]:focus,
input[type="email"]:focus, input[type="password"]:focus {
  outline:none; border-color:var(--brand-400); box-shadow:var(--ring);
}
#gateError {
  display:none; background:var(--danger-50); color:var(--danger-700);
  border:1px solid #FECDCA; border-radius:var(--r-md);
  padding:.7rem .95rem; font-size:.9rem; margin-bottom:.9rem;
}

/* --- Focus visibility + reduced motion --- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline:2px solid var(--brand-500); outline-offset:2px;
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* --- Print: white ground, no sticky chrome (education handouts) --- */
@media print {
  body { background:#fff; font-size:12pt; padding:0; }
  body::before { display:none; }
  .submit-bar, .submit, .cta, .review-btn, .back, .turnstile-box { display:none !important; }
  .card, .q { box-shadow:none; border-color:#ccc; break-inside:avoid; }
  .ribbon { border:1px solid #999; color:#000; background:none; }
  a { color:#000; text-decoration:none; }
}