/* ==========================================================================
   Wylie and Associates Behavioral Health
   Palette: Paper #FAF6F3 · Ink #241F24 · Teal #1F6B67 · Teal deep #14514F
            Dusk #7A6A8A (secondary) · Sand #E4D9CF · Mist #E7F0EC
   Type:    Newsreader (display) · Karla (body + utility)
   ========================================================================== */

:root {
  --paper:      #FAF6F3;
  --paper-2:    #FFFFFF;
  --mist:       #E7F0EC;
  --sand:       #E4D9CF;
  --ink:        #241F24;
  --ink-soft:   #5C535A;
  --teal:       #1F6B67;
  --teal-deep:  #14514F;
  --dusk:       #7A6A8A;

  --measure:    64ch;
  --gap:        clamp(1.25rem, 3vw, 2.25rem);
  --pad-x:      clamp(1.25rem, 5vw, 4.5rem);
  --section-y:  clamp(4rem, 9vw, 7.5rem);
  --radius:     14px;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--teal-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--teal); }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- Typography ---------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.4rem); }
h2 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); }

p { margin: 0 0 1.1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 1.1rem;
}

.lede {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 52ch;
}

/* --- Layout -------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.section { padding-block: var(--section-y); }
.section--tint { background: var(--mist); }
.section--paper2 { background: var(--paper-2); }

.rule { border: 0; border-top: 1px solid var(--sand); margin: 0; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--teal-deep);
  color: #fff;
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* --- Header -------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(250, 246, 243, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--sand);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--gap);
  min-height: 78px;
  padding-block: 0.75rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.brand__mark { flex: none; width: 34px; height: 34px; }
.brand__name {
  font-family: var(--serif);
  font-size: 1.075rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.brand__name span {
  display: block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  margin-top: 0.15rem;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
.nav a {
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--ink-soft);
  padding-block: 0.35rem;
  border-bottom: 1.5px solid transparent;
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--sand); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--teal); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--sand);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  font: inherit;
  font-size: 0.875rem;
  color: var(--ink);
  cursor: pointer;
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.9rem 1.4rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn--primary { background: var(--teal-deep); color: #fff; }
.btn--primary:hover { background: var(--teal); color: #fff; }
.btn--ghost { border-color: var(--sand); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--teal); color: var(--teal-deep); background: var(--paper-2); }
.btn--sm { padding: 0.6rem 1rem; font-size: 0.875rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* --- Status chip --------------------------------------------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.45rem 0.9rem 0.45rem 0.7rem;
  border: 1px solid var(--sand);
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-soft);
}
.chip__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(31, 107, 103, 0.18);
}

/* --- Hero ---------------------------------------------------------------- */

.hero { padding-block: clamp(3rem, 7vw, 6rem) clamp(3.5rem, 8vw, 6.5rem); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero h1 { margin-bottom: 0.35em; }
.hero h1 em { color: var(--teal-deep); }

/* Signature: two care paths converging into one plan */
.paths { width: 100%; }
.paths__line { fill: none; stroke-width: 2.25; stroke-linecap: round; }
.paths__line--therapy { stroke: var(--teal); }
.paths__line--meds    { stroke: var(--dusk); }
.paths__line--joined  { stroke: var(--teal-deep); stroke-width: 3; }
.paths__label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--ink-soft);
}
.paths__node { fill: var(--paper-2); stroke: var(--teal-deep); stroke-width: 2; }

.paths [data-draw] {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
  animation: draw 1500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: var(--delay, 0ms);
}
.paths [data-fade] {
  opacity: 0;
  animation: fade 700ms ease forwards;
  animation-delay: var(--delay, 0ms);
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .paths [data-draw] { animation: none; stroke-dashoffset: 0; }
  .paths [data-fade] { animation: none; opacity: 1; }
}

/* --- Cards & grids ------------------------------------------------------- */

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }

.card {
  background: var(--paper-2);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.card h3 { margin-bottom: 0.45em; }
.card p { color: var(--ink-soft); }

.card--service { display: flex; flex-direction: column; }
.card--service .card__meta {
  margin-top: auto;
  padding-top: 1.4rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--sand);
}

/* Section intro: label left, prose right */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.split + .split { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* --- Intake steps (a real sequence, so numbers earn their place) --------- */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 1.25rem;
  padding-block: 1.6rem;
  border-top: 1px solid var(--sand);
}
.steps li:last-child { border-bottom: 1px solid var(--sand); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--dusk);
  line-height: 1;
  padding-top: 0.15rem;
}
.steps h3 { margin-bottom: 0.3em; }
.steps p { color: var(--ink-soft); margin-bottom: 0; }

/* --- Definition-style detail lists --------------------------------------- */

.facts { margin: 0; }
.facts div {
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
  gap: 1rem;
  padding-block: 1rem;
  border-top: 1px solid var(--sand);
}
.facts div:last-child { border-bottom: 1px solid var(--sand); }
.facts dt {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  padding-top: 0.2rem;
}
.facts dd { margin: 0; }

/* Small qualifying note inside a definition list value */
.note {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.list-clean { list-style: none; margin: 0; padding: 0; }
.list-clean li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.7rem;
  color: var(--ink-soft);
}
.list-clean li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--teal);
}

/* --- Crisis notice ------------------------------------------------------- */

.crisis { background: var(--teal-deep); color: #F2EFE9; }
.crisis .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  padding-block: 1.15rem;
}
.crisis p { margin: 0; max-width: none; font-size: 0.9375rem; }
.crisis strong { color: #fff; }
.crisis a { color: #fff; text-decoration-thickness: 1.5px; }
.crisis a:hover { color: var(--sand); }

/* --- Callout ------------------------------------------------------------- */

.callout {
  border-left: 3px solid var(--teal);
  background: var(--paper-2);
  padding: 1.25rem 1.5rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.9375rem;
  color: var(--ink-soft);
  max-width: var(--measure);
}
.callout strong { color: var(--ink); }

/* --- Forms --------------------------------------------------------------- */

.form { max-width: 40rem; }
.field { margin-bottom: 1.35rem; }
.field label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.45rem;
}
.field .hint {
  display: block;
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--ink-soft);
  margin-top: 0.35rem;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--sand);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--teal);
  outline: 2px solid rgba(31, 107, 103, 0.28);
  outline-offset: 0;
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  background: var(--paper-2);
  border-top: 1px solid var(--sand);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: 0.9375rem;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.site-footer h4 {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 1rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.55rem; }
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--teal-deep); text-decoration: underline; }
.site-footer address { font-style: normal; color: var(--ink-soft); }

.colophon {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--sand);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

/* --- Placeholder flagging -------------------------------------------------
   Every value still waiting on real practice information is marked with
   [data-placeholder]. Delete this rule (and the attributes) once the content
   is final — see README.md for the full list.
   ------------------------------------------------------------------------- */

[data-placeholder] {
  background: rgba(122, 106, 138, 0.12);
  box-shadow: 0 0 0 1px rgba(122, 106, 138, 0.3);
  border-radius: 3px;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { grid-template-columns: minmax(0, 1fr); }
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .nav-toggle { display: inline-block; }
  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper-2);
    border-bottom: 1px solid var(--sand);
    padding: 0.5rem var(--pad-x) 1.25rem;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a { padding-block: 0.85rem; border-bottom: 1px solid var(--sand); }
  .nav a[aria-current="page"] { border-bottom-color: var(--teal); }
  .site-header__inner { position: relative; }

  .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .facts div { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .steps li { grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0.9rem; }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- Support chat ---------------------------------------------------------
   The panel built by assets/support.js. Written for this palette rather than
   ported from webpage.contact, whose .sup-* rules assume a dark ground.
   Loaded only on pages that include support.js.
   ------------------------------------------------------------------------- */

.sup {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  font-family: var(--sans);
}

.sup-launch {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  position: relative;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  color: #fff;
  background: var(--teal-deep);
  border: 0;
  border-radius: 999px;
  padding: 0.85rem 1.3rem;
  cursor: pointer;
  box-shadow: 0 8px 24px -10px rgba(20, 81, 79, 0.7);
  transition: background-color 160ms ease, transform 160ms ease;
}
.sup-launch:hover { background: var(--teal); transform: translateY(-1px); }
.sup-launch-ico { width: 17px; height: 17px; flex: none; }
.sup-launch-ico svg { fill: currentColor; width: 100%; height: 100%; display: block; }

.sup-dot {
  position: absolute;
  top: 6px; right: 8px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--dusk);
  box-shadow: 0 0 0 2px var(--teal-deep);
}

.sup-panel {
  width: min(23rem, calc(100vw - 2rem));
  /* Leaves room for the launcher, the gap above it and the bottom offset;
     without that the panel grows past them and overflow:hidden eats the
     "Or call" footer. */
  max-height: min(34rem, calc(100vh - 9rem));
  display: flex;
  flex-direction: column;
  background: var(--paper-2);
  border: 1px solid var(--sand);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -24px rgba(36, 31, 36, 0.35);
  overflow: hidden;
}
.sup-panel[hidden] { display: none; }

.sup-head {
  display: flex;
  flex: none;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  background: var(--teal-deep);
  color: #fff;
}
.sup-head-t b {
  display: block;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 400;
}
.sup-head-s {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.75rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}
.sup-x {
  margin-left: auto;
  flex: none;
  width: 26px; height: 26px;
  padding: 5px;
  background: none;
  border: 0;
  border-radius: 6px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}
.sup-x:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }
.sup-x svg { width: 100%; height: 100%; display: block; }

/* The standing notice. Deliberately not dismissible and not inside the
   scrolling log — someone reaching for a chat box on a behavioral health site
   needs this before they type, not after they scroll. */
.sup-guard {
  flex: none;
  padding: 0.8rem 1.1rem;
  background: var(--mist);
  border-bottom: 1px solid var(--sand);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.sup-guard p { margin: 0; max-width: none; }
.sup-guard p + p { margin-top: 0.45rem; }
.sup-guard b { color: var(--ink); }
.sup-guard a { color: var(--teal-deep); font-weight: 600; }

.sup-log {
  flex: 1 1 auto;
  min-height: 4.5rem;
  overflow-y: auto;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.sup-msg {
  max-width: 85%;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  font-size: 0.875rem;
  line-height: 1.5;
}
.sup-msg p { margin: 0; max-width: none; }
.sup-msg.is-me { align-self: flex-end; background: var(--teal-deep); color: #fff; border-bottom-right-radius: 4px; }
.sup-msg.is-staff { align-self: flex-start; background: var(--mist); color: var(--ink); border-bottom-left-radius: 4px; }
.sup-when {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.6875rem;
  opacity: 0.65;
}

.sup-status {
  margin: 0;
  max-width: none;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.sup-status.is-err { color: #8C2F2F; }

.sup-intro { flex: none; padding: 0 0 0.5rem; }
.sup-intro[hidden] { display: none; }
.sup-f { display: block; margin-bottom: 0.6rem; }
.sup-f > span {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.3rem;
}
.sup-f > span i {
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}
.sup-f input {
  width: 100%;
  font: inherit;
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--sand);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
}
.sup-f input:focus { border-color: var(--teal); outline: 2px solid rgba(31, 107, 103, 0.28); }

.sup-form {
  display: flex;
  flex: none;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1.1rem;
  border-top: 1px solid var(--sand);
}
.sup-ta {
  flex: 1 1 auto;
  font: inherit;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--sand);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
  resize: none;
  max-height: 7rem;
}
.sup-ta:focus { border-color: var(--teal); outline: 2px solid rgba(31, 107, 103, 0.28); }

.sup-send {
  flex: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: #fff;
  background: var(--teal-deep);
  border: 0;
  border-radius: 999px;
  padding: 0.6rem 1rem;
  cursor: pointer;
}
.sup-send:hover:not(:disabled) { background: var(--teal); }
.sup-send:disabled { opacity: 0.55; cursor: default; }

/* Off-screen rather than display:none, so a bot filling every field still
   trips it while a real person tabbing through never lands here. */
.sup-hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
}

.sup-note {
  flex: none;
  margin: 0;
  max-width: none;
  padding: 0 1.1rem 0.9rem;
  font-size: 0.75rem;
  color: var(--ink-soft);
}
.sup-end {
  font: inherit;
  font-size: inherit;
  color: var(--ink-soft);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.sup-end:hover { color: var(--teal-deep); }

@media (max-width: 420px) {
  .sup { left: 1rem; right: 1rem; align-items: stretch; }
  .sup-panel { width: 100%; }
  .sup-launch { justify-content: center; }
}

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

/* Short viewports — landscape phones, small laptop windows. The fixed chrome
   (head + notice + composer + footer) is ~360px on its own, so below about
   620px there is nothing left for the transcript. Trim the header subtitle and
   let the notice scroll inside itself rather than clipping the composer. The
   crisis numbers stay reachable either way. */
@media (max-height: 620px) {
  .sup-head-s { display: none; }
  .sup-guard { max-height: 6.5rem; overflow-y: auto; }
  .sup-log { min-height: 3rem; }
}