/* The Spravato page (spravato.html, pilot notes 49 and 50). site.css styles the page; this file holds only what the homepage
   has no rule for: the hero without the brain, this page's few section shells, the current tab. Every selector is scoped to
   this page's own classes (.sp-*) or to aria-current, so nothing here can reach index.html or brain.html. */

/* the header: this page's tab is marked the way a link marks hover, with its underline */
.main-nav .nav-link[aria-current="page"]{ text-decoration-color:currentColor; }
.drawer-row[aria-current="page"]{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:6px; }

/* after the pinned hero every section is a sheet in the paint order (site.css section 8: "every sheet uses z-index 1 and DOM
   order decides which paints on top; the pinned hero is z-index:auto"): the homepage's tour band covers the hero's resting
   place, here the sections after the first sheet do */
#main > section{ position:relative; z-index:1; }
.sp-who,.sp-visit{ background:var(--paper); }

/* ---------------------------------------------------------------- the hero without the brain
   Wide screens: the treatment room fills the hero under the header, as the lobby does on the homepage. The scrim is the same
   neutral black (pilot note 14), turned around: dark on the left where the words sit, thinner on the right where the room
   shows (the homepage keeps its right side dark for the brain). Contrast measured: STATUS.md. */
@media (min-width:900px){
  .sp-hero .hero-photo img{ object-position:0 62%; }
  .sp-hero .hero-scrim{
    background:
      linear-gradient(90deg, rgba(10,14,12,.7) 0%, rgba(10,14,12,.64) 30%, rgba(10,14,12,.4) 55%, rgba(10,14,12,.16) 80%, rgba(10,14,12,.12) 100%),
      linear-gradient(to bottom, rgba(10,14,12,0) 38%, rgba(10,14,12,.72) 100%);
  }
}
/* phones and tablets: the room (on phones the recliner and its monitor) fills the top of the first screen, the headline starts
   where the scrim has gone dark, and the run-on sits on the dark ground below it, as on the homepage */
@media (max-width:899px){
  .sp-hero{ --room:clamp(150px, calc(var(--vh) * .3), 300px); --ph:calc(var(--header) + var(--room) + 170px); }
  .sp-hero .hero-photo img{ object-position:0 62%; }
  .sp-hero .hero-scrim{
    background:linear-gradient(to bottom, rgba(10,14,12,.26) 0, rgba(10,14,12,.12) 120px, rgba(10,14,12,.12) calc(var(--header) + var(--room) - 170px), rgba(10,14,12,.8) calc(var(--header) + var(--room) - 8px), rgba(14,19,17,.93) calc(var(--header) + var(--room) + 90px), #151B19 100%);
  }
  .sp-hero .hero-copy{ margin-top:var(--room); }
}
@media (max-width:560px){
  .sp-hero .hero-photo img{ object-position:50% 34%; }
}

/* ---------------------------------------------------------------- what Spravato is (the sheet), who qualifies */
.sp-lead{ margin-top:32px; max-width:660px; }
.sp-what .plan-rows{ margin-top:32px; }
.sp-facts .source{ margin-top:8px; }
.sp-label{ align-self:start; }
.sp-label .band-quote{ margin-top:20px; }
.sp-label .source{ margin-top:8px; }
.sp-label .crisis{ margin-top:32px; padding-bottom:0; }
@media (min-width:900px){ .sp-label{ padding:48px; } }
.sp-who{ padding:64px 0; }
.sp-rows{ margin-top:0; }
@media (max-width:899px){
  .sp-who{ padding:32px 0; }
  .sp-who .split-list{ margin-top:32px; }
}

/* ---------------------------------------------------------------- coverage: the page's one mist wash (pilot note 16) */
.sp-cover{ padding:96px 0; background:linear-gradient(to bottom, var(--paper) 0, var(--mist) 240px, var(--mist) calc(100% - 240px), var(--paper) 100%); }
@media (max-width:899px){
  .sp-cover{ padding:64px 0; background:linear-gradient(to bottom, var(--paper) 0, var(--mist) 160px, var(--mist) calc(100% - 160px), var(--paper) 100%); }
}

/* ---------------------------------------------------------------- a visit: four named parts of the day on one rule */
.sp-visit{ padding:64px 0; }
.sp-line{ margin-top:8px; max-width:660px; }
@media (max-width:899px){
  .sp-visit{ padding:32px 0; }
  .sp-day{ display:block; padding-top:0; }
  .sp-day::before{ display:none; }
  .sp-day > li{ position:relative; padding:20px 0; }
  .sp-day > li::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; background:var(--rule); }
}

/* ================================================================ port additions (Phase 1, Oct 6 2026; the fix round, Oct 7 2026)
   Everything above this block is design/final/assets/spravato.css byte for byte (tests/test_spravato.py holds it). The
   prototype's page has no lead form; the live page's callback form stays (data-source "spravato" is the CRM's lead source
   and a frozen baseline field, brief 10 item 15; PILOT-NOTES 66: it is live lead capture and it stays), under the plan
   rows of the coverage section, where the live page had it beside the same copy. PILOT-NOTES 66 draws it in the system,
   not as a boxed panel: no paper card on the mist, the fields straight on the section's wash and as wide as the plan
   rows' column, so their right edges meet the rules above them; the system's field (C32: sentence-case 14/20 600 labels,
   52px fields with a 1px --line hairline border, note 66's hairline fields, and radius 12 on paper, the spruce focus
   ring), the spruce pill at its own
   width (full width on phones, as site.css draws every pill there), a consent row 44px tall at 16/24, and the 988 line under the
   section's own 2px rule. Every selector is under .sp-form, so this page does not load legacy.css, whose survey page rules
   restyle .rtable. */
.sp-form{ --ink70:var(--ink-70); --ink50:var(--ink-70); margin-top:48px; }
.sp-form .form{ max-width:none; padding:0; background:none; border:0; border-radius:0; }
.sp-form .form label{ display:block; margin:20px 0 8px; font:600 var(--fs-small)/var(--lh-small) var(--sans); letter-spacing:0; text-transform:none; color:var(--ink); }
.sp-form .form label:first-child{ margin-top:0; }
.sp-form .form input,.sp-form .form select{ width:100%; min-height:52px; padding:0 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); font:400 var(--fs-body)/var(--lh-body) var(--sans); color:var(--ink); }
.sp-form .form input:focus-visible,.sp-form .form select:focus-visible{ outline:2px solid var(--spruce); outline-offset:3px; border-color:var(--spruce); }
.sp-form .form .btn{ margin-top:32px; }
.sp-form .form .ok{ padding:32px 0; font:400 var(--fs-row)/var(--lh-row) var(--serif); color:var(--ink); text-align:left; }
/* the consent row: lead_form() writes its label with an inline all:unset and 14px (core.py, every lead form), so the
   row's 16/24 type and its 44px target (the label, padded, toggles the box) need the !important */
.sp-form .consent{ display:flex; gap:16px; align-items:center; min-height:44px; margin-top:20px; color:var(--ink-70); }
.sp-form .consent input{ width:20px; height:20px; min-height:0; margin:0; padding:0; flex:none; accent-color:var(--spruce); }
.sp-form .consent label{ display:block !important; margin:0 !important; padding:10px 0 !important; font:400 16px/24px var(--sans) !important; color:var(--ink-70) !important; cursor:pointer !important; }
@media (max-width:899px){
  .sp-form{ margin-top:32px; }
}

/* the hero on a wide, tall window (the fix round, Oct 7 2026; PILOT-NOTES 69 and note 51): the full coverage sentence
   appears once per screen, in the fact row, so the address line keeps only the address there (on phones and short
   windows, where the fact row is hidden, the address line keeps the sentence). These are site.css's own conditions for
   showing .hero-facts (hidden under 900 wide, and at 900 and up under 880 tall); the launch polish named the sentence's
   span (.sp-cover-line; .sp-cover is the prototype's coverage section) instead of reaching it by position. And the copy stands on the fact row instead
   of over it: site.css section 42 anchors the copy 136px above the window's foot for the homepage's one-line slim row, and
   this page's four-cell row with its sources is 108px tall at 1280 and up and 160px at 900, so the address line ran into
   the row's rule (by 20px at 1440x900, 72px at 900x880; the prototype draws the same). Here the copy and the row stack
   at the foot of the window, 32px apart, whatever height the row takes. */
@media (min-width:900px) and (min-height:880px){
  .sp-hero .hero-content{ display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:48px; }
  .sp-hero .hero-copy{ position:static; margin-left:var(--L); }
  .sp-hero .hero-facts{ position:static; width:100%; margin-top:32px; }
  .sp-hero .hero-address > .sp-cover-line{ display:none; }
}

/* who qualifies (the last fix round, Oct 7 2026; the pilot's ruling 78): its one sourced row, the label's pregnancy and
   breastfeeding sentences, sets its source 8px under the row as the facts of the section above do (.sp-facts .source) */
.sp-who .source{ margin-top:8px; }