/*
 * theme.css — Cutis. Parchment case-file, old-money + editorial.
 * Palette approved by the owner: canvas #f3efe7, surface #faf8f4,
 * accent (buttons) #223838, accent-text (links) #8f4d19, ink #1c1a17,
 * muted #615e5a. Every other token is derived from those six.
 */

:root {
  --canvas: #f3efe7;
  --surface: #faf8f4;
  --surface-2: #eae2d2;
  --border: #ddd3bd;
  --border-strong: #c3b699;
  --ink: #1c1a17;
  --muted: #615e5a;

  --accent: #223838;
  --accent-hover: #1a2c2c;
  --accent-ink: #f3efe7;
  --accent-text: #8f4d19;
  --accent-strong: #223838;
  --accent-soft: #e0e6e1;
  --accent-border: #b7c7c0;

  --success: #3f6b4a;
  --success-ink: #ffffff;
  --success-soft: #e3ebe2;
  --success-strong: #2f5138;
  --warning: #9a5c12;
  --warning-ink: #ffffff;
  --warning-soft: #f0e5d2;
  --warning-strong: #7a480d;
  --danger: #a4342b;
  --danger-ink: #ffffff;
  --danger-soft: #f2ded9;
  --danger-strong: #832a22;

  --chart-1: #223838;
  --chart-2: #8f4d19;
  --chart-3: #6b7a4f;
  --chart-4: #a15c12;
  --chart-5: #5c4a6b;
  --chart-6: #3a5a6b;

  --font-display: "Fraunces", "Iowan Old Style", ui-serif, serif;
  --font-body: "Source Serif 4", "Iowan Old Style", ui-serif, serif;
  --font-sans: "Source Serif 4", "Iowan Old Style", ui-serif, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 500;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.04em;

  --radius-btn: 2px;
  --radius-card: 2px;
  --radius-input: 2px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-raised: 0 8px 24px rgba(28, 26, 23, 0.16);
  --shadow-btn: none;
  --card-pad: 1.75rem;
  --caps: none;
  --caps-tracking: 0.02em;
  --btn-weight: 600;
  --measure: 62ch;

  /* The one dark statement band — deliberately constant across modes, like
     ink on a fixed page rather than a themed surface. */
  --x-statement-bg: #1c2f2f;
  --x-statement-ink: #f3efe7;
}

html[data-theme="dark"] {
  --canvas: #17140f;
  --surface: #201c16;
  --surface-2: #2a251c;
  --border: #3a3327;
  --border-strong: #554a37;
  --ink: #f1ebdd;
  --muted: #b0a68f;

  --accent: #59897f;
  --accent-hover: #6b9c92;
  --accent-ink: #0f1815;
  --accent-text: #d9924f;
  --accent-strong: #9ccabf;
  --accent-soft: #223330;
  --accent-border: #3d5751;

  --success: #6fae82;
  --success-ink: #10190f;
  --success-soft: #1e2b1e;
  --success-strong: #a3d1ae;
  --warning: #d99a4c;
  --warning-ink: #1a1207;
  --warning-soft: #2e2313;
  --warning-strong: #efbb80;
  --danger: #cf7a68;
  --danger-ink: #190d0a;
  --danger-soft: #2e1913;
  --danger-strong: #e8a291;

  --chart-1: #6fa89d;
  --chart-2: #d9924f;
  --chart-3: #9bb37c;
  --chart-4: #d9ac5c;
  --chart-5: #a48fc0;
  --chart-6: #7fa4bd;

  --x-statement-bg: #1c2f2f;
  --x-statement-ink: #f3efe7;
}

/*
 * app.css — Cutis. The parchment ground, the loupe motif, the phone mock,
 * the prescription pad, the body map and the one dark statement band.
 * Tokens only, as theme.css defines them.
 */

/* ---- Ground: a faint parchment grain across the whole page --------------- */
body {
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 0);
  background-size: 24px 24px;
}

/* ---- Skip link ------------------------------------------------------------ */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  padding: 0.5rem 1rem;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* ---- Top bar --------------------------------------------------------------- */
.site-bar { position: relative; }
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.wordmark::before {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  border: 2px solid var(--accent-text);
  display: inline-block;
}
.site-nav { display: none; gap: 2rem; font-size: 0.9375rem; }
@media (min-width: 768px) { .site-nav { display: flex; justify-self: center; } }
.site-nav a { color: var(--muted); font-variant: small-caps; letter-spacing: 0.03em; }
.site-nav a:hover { color: var(--ink); text-decoration: none; }

.site-footer { border-top: 1px solid var(--border); }

/* ---- Section furniture ------------------------------------------------------ */
.section-head {
  position: relative;
  padding-top: 1.5rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.875rem, 3.2vw, 2.75rem);
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.section-head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 1px;
  background: var(--accent-text);
}

.standfirst {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125rem;
  color: var(--accent-text);
  margin-bottom: 0.75rem;
}

.hero-head {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.75rem, 6vw, 5.25rem);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.hero-head em { font-style: italic; font-weight: 500; color: var(--accent-text); }

.band-sage {
  background-color: color-mix(in srgb, var(--accent) 9%, var(--canvas));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ---- The one dark statement band, constant across modes ------------------- */
.statement-band { background: var(--x-statement-bg); }
.statement-head {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.875rem, 4vw, 3.25rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--x-statement-ink);
  text-wrap: balance;
}

/* ---- Hero loupe & parallax -------------------------------------------------- */
.loupe {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1;
  box-shadow:
    0 0 0 8px var(--surface),
    0 0 0 9px var(--border-strong),
    var(--shadow-raised);
}
.loupe::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  pointer-events: none;
}
.loupe img { display: block; width: 100%; height: 100%; object-fit: cover; }

.hero-visual { display: flex; justify-content: center; }
.loupe-hero { width: min(24rem, 80vw); }
.loupe-hero img { transform: scale(1.18); transition: transform 0.1s linear; will-change: transform; }
html.reduced-motion .loupe-hero img { transform: none !important; }

.loupe-lg { width: 9rem; flex-shrink: 0; }

/* ---- Mess list: hairline, not cards ---------------------------------------- */
.mess-list { margin-top: 2rem; border-top: 1px solid var(--border); }
.mess-list > li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
}

/* ---- Body map ---------------------------------------------------------------- */
.body-map { position: relative; max-width: 13rem; margin-top: 2.5rem; }
.body-map-figure {
  width: 100%;
  height: auto;
  fill: var(--surface-2);
  stroke: var(--border-strong);
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.lesion-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border-strong);
  cursor: pointer;
  transition: background-color 0.15s;
}
.lesion-pin:hover { background: var(--accent-hover); }
.lesion-pin[aria-pressed="true"] { background: var(--accent-text); }

/* ---- Lesion index & viewer ---------------------------------------------------- */
.lesion-index { border-top: 1px solid var(--border); }
.lesion-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.lesion-row-num { font-family: var(--font-mono); color: var(--muted); font-size: 0.875rem; }
.lesion-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lesion-row-label { font-weight: 600; color: var(--ink); }
.lesion-row-meta { font-size: 0.8125rem; color: var(--muted); }
.lesion-row[aria-pressed="true"] .lesion-row-label { color: var(--accent-text); }

.lesion-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.5rem;
  align-items: center;
  border: 1px solid var(--border);
  background: var(--surface);
  padding: 1.25rem;
}
.lesion-panel-data { min-width: 0; }
.lesion-panel[hidden] { display: none; }

/* ---- WhatsApp phone mock ------------------------------------------------------- */
.phone-mock {
  max-width: 23rem;
  margin-inline: auto;
  border: 1px solid var(--border-strong);
  border-radius: 1.25rem;
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-raised);
}
.phone-mock-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.125rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.phone-mock-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.125rem;
  background: color-mix(in srgb, var(--accent) 6%, var(--canvas));
  min-height: 20rem;
}
.bubble { max-width: 84%; padding: 0.625rem 0.875rem; border-radius: 0.875rem; font-size: 0.9375rem; line-height: 1.4; }
.bubble-out { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 0.25rem; }
.bubble-in { align-self: flex-start; background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-bottom-left-radius: 0.25rem; }
.bubble-time {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-top: 0.35rem;
  font-size: 0.6875rem;
  opacity: 0.75;
}
.bubble-time .icon { width: 0.875rem; height: 0.875rem; }
.bubble-photo { margin-bottom: 0.5rem; border-radius: 0.5rem; overflow: hidden; aspect-ratio: 4/3; }
.bubble-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.caption-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* ---- Prescription pad ------------------------------------------------------------ */
.rx-pad {
  position: relative;
  background-color: var(--surface);
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 0);
  background-size: 16px 16px;
  border: 1px solid var(--border-strong);
  padding: 2rem;
}
.rx-pad-head { border-bottom: 2px double var(--border-strong); padding-bottom: 0.75rem; margin-bottom: 1rem; }
.rx-pad-patient { display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--muted); margin-bottom: 1.25rem; }
.rx-pad-list { display: flex; flex-direction: column; gap: 0.75rem; }
.rx-pad-list li { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.75rem; border-bottom: 1px dashed var(--border); font-size: 0.9375rem; }
.rx-pad-list li:last-child { border-bottom: none; padding-bottom: 0; }
.rx-pad-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.rx-signature { font-family: var(--font-display); font-style: italic; font-size: 1.375rem; color: var(--ink); }

/* ---- Compliance definition list --------------------------------------------------- */
.def-list { border-top: 1px solid var(--border); }
.def-row {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: 2rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 640px) {
  .def-row { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* ---- Pricing table -------------------------------------------------------------- */
.pricing-table th:not(:first-child), .pricing-table td:not(:first-child) { text-align: center; }

/* ---- Book-a-demo intake device --------------------------------------------------- */
.case-intake { border: 1px solid var(--border-strong); background: var(--surface); padding: 2rem; }
.intake-form { display: flex; flex-direction: column; }