/*
 * The demo page, and only the demo page.
 *
 * The refresh of 8 October 2026, in the landing page's language: one calm
 * ground, a serif headline with an italic line, the call as a phone-like card
 * with one black button, the conversation as bubbles, and what the med spa
 * receives beside the call rather than under it.
 *
 * Loaded before shell.css (the `head_extra` block sits above the main
 * stylesheets in base.html), so every rule touching a shared class is prefixed
 * with `.dm` to win on specificity. The partials the try-it page shares are
 * styled from here only under `.dm`, so `/b/<slug>` is untouched.
 *
 * `.dial-hint` keeps its reserved three lines from shell.css: the recogniser
 * writes into it per syllable and the dialer must not grow and shrink.
 */

main.pub.dm::before { background: var(--bg); opacity: 1; }

/* The closing band: ink in light, a deep navy in dark rather than ink, which
   in dark is cream and made the band glare. Same pair as landing.css. */
.dm { --dm-deep: var(--ink); --dm-on-deep: var(--bg); }
html[data-theme="dark"] .dm { --dm-deep: #1a2744; --dm-on-deep: var(--ink); }

.dm-page {
  flex: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px 40px;
  display: grid;
  align-content: start;
}

.dm em { font-style: italic; color: var(--accent); }

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

.dm-hero { display: grid; gap: 16px; padding: 44px 0 32px; max-width: 900px; }

.dm-eyebrow,
.dm-card-head,
.dm-sub,
.dm .demo-suggest-head {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
}

.dm-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(36px, 4.6vw, 56px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.dm-lede { margin: 0; max-width: 56ch; font-size: 17px; line-height: 1.6; color: var(--ink-2); }

/* --------------------------------------------------------------- stage */

.dm-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 24px;
  align-items: start;
}

/* ------------------------------------------------------------ the call */

.dm-call {
  display: grid;
  gap: 22px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface-2);
  box-shadow: var(--shadow-float);
}

.dm-call-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.dm-call-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dm-call-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-1);
  color: var(--ink-2);
}
.dm-call-label { display: block; font-size: 11.5px; color: var(--ink-3); }
.dm-call-name {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink);
}

/* The button: ink rather than the brand gradient, matching the landing page's
   one primary action. Red while a call is open, so hanging up is obvious. */
.dm .dialer { padding: 10px 0 0; gap: 10px; }
.dm .dial-btn {
  width: 88px;
  height: 88px;
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--ink) 60%, transparent);
}
.dm .dialer.on-call .dial-btn { background: var(--alarm); color: #fff; box-shadow: none; }
.dm .dial-ring { inset: -8px; border-color: var(--ink-3); }
.dm .dial-label { font-size: 15px; font-weight: 600; }
.dm .dial-hint { font-size: 12px; color: var(--ink-3); max-width: 46ch; }

.dm-missing {
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface-1);
  font-size: 13.5px;
  color: var(--ink-2);
  text-align: center;
}

/* The conversation, as bubbles. The caller on the right in ink, the line on
   the left on the card's own ground. `[data-thread]` stays display: contents
   (shell.css), and `.demo-thread` inside it is still what scrolls. */
.dm .demo-thread {
  max-height: 380px;
  gap: 12px;
  padding: 4px 2px;
}
.dm .demo-turn {
  max-width: 86%;
  padding: 11px 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: var(--surface-1);
}
.dm .demo-turn.caller {
  justify-self: end;
  border-color: var(--ink);
  background: var(--ink);
  border-bottom-right-radius: 6px;
}
.dm .demo-turn.assistant {
  justify-self: start;
  border-bottom-left-radius: 6px;
}
.dm .demo-turn.caller .demo-who,
.dm .demo-turn.caller .demo-said,
.dm .demo-turn.caller .demo-why { color: var(--bg); }
.dm .demo-turn.caller .demo-who { opacity: 0.7; }
.dm .demo-said { font-size: 14px; line-height: 1.55; }
.dm .demo-who { font-family: var(--font-mono); letter-spacing: 0.12em; }

/* Lines to try, as cards to tap rather than a list of links. */
.dm .demo-suggest { gap: 10px; }
.dm .demo-suggest ul {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.dm .demo-suggest li {
  position: relative;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-1);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.dm .demo-suggest li:hover { border-color: var(--line-strong); background: var(--surface-2); }
.dm .demo-say {
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink);
}
/* The whole card is the button's target, without changing the markup the
   script binds to. */
.dm .demo-say::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.dm .demo-say:hover { color: var(--ink); text-decoration: none; }
.dm .demo-say:focus-visible { outline: none; }
.dm .demo-suggest li:has(.demo-say:focus-visible) { box-shadow: 0 0 0 3px var(--focus-ring); }
.dm .demo-say-why { font-size: 11.5px; color: var(--ink-3); }

.dm-call-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.dm-call-foot p { margin: 0; max-width: 52ch; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
.dm-call-foot b { color: var(--ink-2); }
.dm .demo-reset {
  flex: none;
  padding: 7px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 12.5px;
  text-decoration: none;
  color: var(--ink-2);
}
.dm .demo-reset:hover { background: var(--surface-1); color: var(--ink); }

/* ---------------------------------------------------------- the side */

.dm-side { display: grid; gap: 24px; }

.dm-card {
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface-1);
}
.dm-card-head { display: inline-flex; align-items: center; gap: 8px; }

.dm .biz-name { font-size: 26px; font-weight: 400; }

.dm-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 0;
}
.dm-facts div { display: grid; gap: 2px; min-width: 0; }
.dm-facts dt { font-size: 11.5px; color: var(--ink-3); }
.dm-facts dd { margin: 0; font-size: 13.5px; color: var(--ink); overflow-wrap: anywhere; }

.dm-sub { display: block; margin-bottom: 8px; }

.dm-never { border-top: 1px solid var(--line); padding-top: 14px; }
.dm-never summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.dm-never summary::-webkit-details-marker { display: none; }
.dm-never summary::after {
  content: "";
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 1.6px solid var(--ink-3);
  border-bottom: 1.6px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
}
.dm-never[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.dm-never .demo-never { margin-top: 12px; }
.dm-count {
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}

.dm-note { margin: 0; font-size: 12px; line-height: 1.55; color: var(--ink-3); }

.dm-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
@media (prefers-reduced-motion: no-preference) {
  .dm-live-dot { animation: dm-pulse 1.8s ease-in-out infinite; }
}
@keyframes dm-pulse { 50% { opacity: 0.35; } }

/* What the med spa receives: an empty state that looks like a waiting inbox,
   then records rather than messages. */
.dm .demo-received { background: var(--surface-2); }
.dm [data-received] > p.small {
  margin: 0;
  max-width: none;
  padding: 26px 18px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 16px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-3);
}
.dm .demo-ticket {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 14px;
  background: var(--surface-1);
}
.dm .demo-ticket-subject { font-size: 14px; }
.dm .demo-summary { padding: 14px 16px; border-radius: 14px; background: var(--surface-1); }

/* -------------------------------------------------------------- closer */

.dm-closer {
  display: grid;
  justify-items: center;
  gap: 16px;
  margin-top: 96px;
  padding: 64px 28px;
  border-radius: 28px;
  background: var(--dm-deep);
  color: var(--dm-on-deep);
  text-align: center;
}
.dm-closer h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 400;
  letter-spacing: -0.025em;
  color: var(--dm-on-deep);
}
.dm-closer p { margin: 0; max-width: 48ch; font-size: 15.5px; opacity: 0.8; }
.dm-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
.dm .dm-btn { padding: 13px 26px; font-size: 14px; letter-spacing: 0; }
.dm .dm-btn-light { background: var(--dm-on-deep); color: var(--dm-deep); }
.dm .dm-btn-light:hover { opacity: 0.9; }
.dm .dm-btn-outline { border-color: color-mix(in srgb, var(--dm-on-deep) 45%, transparent); color: var(--dm-on-deep); }
.dm .dm-btn-outline:hover { border-color: var(--dm-on-deep); }

/* -------------------------------------------------------------- narrow */

@media (max-width: 980px) {
  .dm-stage { grid-template-columns: minmax(0, 1fr); }
  .dm-hero { padding-top: 40px; }
}

@media (max-width: 640px) {
  .dm-page { padding: 0 16px 32px; }
  .dm-call { padding: 16px; border-radius: 22px; }
  .dm .demo-suggest ul { grid-template-columns: minmax(0, 1fr); }
  .dm-facts { grid-template-columns: minmax(0, 1fr); }
  .dm-call-foot { flex-direction: column; }
  .dm .demo-turn { max-width: 92%; }
  .dm-closer { padding: 48px 20px; margin-top: 72px; }
  .dm-actions .dm-btn { flex: 1 1 auto; }
}