/* ==========================================================================
   htt.css — page-scoped styles for public/heat-tolerance-testing.html only.

   One `@layer pages` block, like home.css and blog.css, so these rules win over
   the shared components without out-specifying them.  Design tokens only (no
   literal hex outside var()), font-size only through --fs-*, mobile-first with
   min-width queries at 640/900 to match the site breakpoints.  Shared classes
   (.rows/.row, .btn*, .disclosure, .table, .section*, .prose) are reused, not
   redefined.

   The test strip's markup is generated by tools/assets/htt_strip.py and driven
   by public/js/htt-strip.js.  Its three series colours are fixed per signal:
   est. core temp amber (the app's CORE colour), heart rate coral, room blue.
   Each lane's two gridlines sit at 25 % and 75 % of the plot height, which is
   what lets the tick labels be placed here instead of with inline styles.

   Loaded on heat-tolerance-testing.html only, via the HTT_CSS flag in
   tools/shell/head-links.html (see tools/shell_sync.py).
   ========================================================================== */
@layer pages {

  /* ---- Signal tones ----------------------------------------------------- */
  .lane--core { --tone: var(--band-light); }
  .lane--hr   { --tone: var(--metric-rhr); }
  .lane--room, [data-tone="room"] { --tone: var(--stage-light); }

  /* ---- Hero --------------------------------------------------------------- */
  .htt-hero { padding-block: calc(var(--nav-h) + var(--space-xxl)) var(--section-y-secondary); }
  .htt-hero__title {
    max-width: 18ch;
    font: 700 var(--fs-display)/1.05 var(--font-display);
    letter-spacing: -.02em;
  }
  .htt-hero__lede {
    max-width: 62ch;
    margin-top: var(--space-lg);
    font: 400 var(--fs-body-lg)/1.6 var(--font-body);
    letter-spacing: .15px;
    color: var(--on-surface-muted);
  }
  .htt-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm-md); margin-top: var(--space-xl); }
  @media (min-width: 900px) {
    .htt-hero { padding-top: calc(var(--nav-h) + var(--space-3xl)); }
  }

  /* ---- Test strip ----------------------------------------------------------- */
  .strip {
    margin-top: var(--space-xxl);
    padding: var(--space-md);
    background: var(--surface-container);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
  }
  .strip__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--hairline);
  }
  .strip__title { font: 600 var(--fs-body-lg)/1.5 var(--font-body); letter-spacing: .15px; color: var(--on-surface); }
  .strip__minute {
    font: 500 var(--fs-body-md)/1.43 var(--font-body);
    letter-spacing: .1px;
    font-variant-numeric: tabular-nums;
    color: var(--on-surface-muted);
  }

  /* Phone: weigh-in and weigh-out side by side, the lanes below them.
     900 and up: weigh-in | lanes | weigh-out, the test read left to right. */
  .strip__body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "in out" "lanes lanes";
    gap: var(--space-lg) var(--space-md);
    padding-block: var(--space-lg);
  }
  .strip__end--in  { grid-area: in; }
  .strip__end--out { grid-area: out; }
  .strip__lanes    { grid-area: lanes; }
  .strip__end-label { font: 500 var(--fs-body-sm)/1.33 var(--font-body); letter-spacing: .4px; color: var(--on-surface-muted); }
  .strip__end-value { margin-top: var(--space-xs); font: 600 var(--fs-headline-md)/1.2 var(--font-display); white-space: nowrap; color: var(--on-surface); }
  .strip__end-sub {
    margin-top: var(--space-sm);
    font: 400 var(--fs-body-md)/1.43 var(--font-body);
    letter-spacing: .1px;
    color: var(--on-surface-muted);
  }

  .strip__lanes {
    display: grid;
    gap: var(--space-md);
    border-radius: var(--radius-sm);
    cursor: crosshair;
    touch-action: pan-y;
  }
  .strip__lanes:focus-visible { outline-offset: var(--space-sm); }

  .lane {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label value" "plot plot";
    align-items: end;
    gap: var(--space-xs) var(--space-md);
  }
  .lane__label {
    grid-area: label;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font: 500 var(--fs-body-md)/1.43 var(--font-body);
    letter-spacing: .1px;
    color: var(--on-surface);
  }
  .lane__label::before { content: ""; flex: none; width: 12px; height: 2px; border-radius: 1px; background: var(--tone); }
  .lane__value {
    grid-area: value;
    text-align: right;
    font: 400 var(--fs-body-md)/1.43 var(--font-body);
    letter-spacing: .1px;
    color: var(--on-surface-muted);
  }
  .lane__num { font: 600 var(--fs-headline-sm)/1.2 var(--font-display); color: var(--on-surface); }
  .lane__sub { display: block; font: 400 var(--fs-body-sm)/1.33 var(--font-body); letter-spacing: .4px; }

  .lane__plot { grid-area: plot; position: relative; height: 56px; padding-left: 32px; }
  .lane__area { position: relative; height: 100%; }
  .lane__area svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .lane__grid { stroke: var(--surface-container-highest); stroke-width: 1; }
  .lane__line { fill: none; stroke: var(--tone); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .lane__tick {
    position: absolute;
    left: 0;
    width: 26px;
    translate: 0 -50%;
    text-align: right;
    font: 500 var(--fs-label-sm)/1 var(--font-body);
    letter-spacing: .5px;
    font-variant-numeric: tabular-nums;
    color: var(--on-surface-muted);
  }
  .lane__tick--hi { top: 25%; }
  .lane__tick--lo { top: 75%; }

  /* The cursor and the dots exist only once js/htt-strip.js has set --x and --y. */
  .lane__dot { display: none; }
  .strip[data-ready] .lane__area::after {
    content: "";
    position: absolute;
    top: calc(-1 * var(--space-sm));
    bottom: calc(-1 * var(--space-sm));
    left: var(--x, 100%);
    width: 1px;
    translate: -50% 0;
    background: var(--hairline-strong);
  }
  .strip[data-ready] .lane__dot {
    display: block;
    position: absolute;
    left: var(--x, 100%);
    top: var(--y, 50%);
    width: 10px;
    height: 10px;
    translate: -50% -50%;
    border-radius: 50%;
    background: var(--tone);
    box-shadow: 0 0 0 2px var(--surface-container);
  }

  .strip__axis { display: grid; grid-template-columns: minmax(0, 1fr); }
  .strip__track {
    position: relative;
    height: 16px;
    margin-left: 32px;
    font: 500 var(--fs-label-sm)/1 var(--font-body);
    letter-spacing: .5px;
    font-variant-numeric: tabular-nums;
    color: var(--on-surface-muted);
  }
  .strip__track > span { position: absolute; top: var(--space-xs); translate: -50% 0; white-space: nowrap; }
  .strip__track > span:nth-child(1) { left: 0; translate: 0 0; }
  .strip__track > span:nth-child(2) { left: 33.333%; }
  .strip__track > span:nth-child(3) { left: 66.667%; }
  .strip__track > span:nth-child(4) { left: 100%; translate: -100% 0; }

  .strip__note {
    padding-top: var(--space-md);
    border-top: 1px solid var(--hairline);
    font: 400 var(--fs-body-sm)/1.33 var(--font-body);
    letter-spacing: .4px;
    color: var(--on-surface-muted);
  }
  .strip__table > summary {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font: 500 var(--fs-body-md)/1.43 var(--font-body);
    letter-spacing: .1px;
    color: var(--accent);
    cursor: pointer;
  }
  .strip__table .table-scroll { max-height: 360px; margin-block: var(--space-sm) 0; overflow-y: auto; }
  .strip__table thead th { position: sticky; top: 0; background: var(--surface-container); }

  @media (min-width: 640px) {
    .lane {
      grid-template-columns: 120px minmax(0, 1fr) 120px;
      grid-template-areas: "label plot value";
      align-items: center;
    }
    .strip__axis { grid-template-columns: 120px minmax(0, 1fr) 120px; column-gap: var(--space-md); }
    .strip__track { grid-column: 2; }
  }
  @media (min-width: 900px) {
    .strip { padding: var(--space-lg) var(--space-xl); }
    .strip__body { grid-template-columns: 160px minmax(0, 1fr) 160px; grid-template-areas: "in lanes out"; gap: 0; }
    .strip__end--in  { padding-right: var(--space-lg); border-right: 1px solid var(--hairline); }
    .strip__lanes    { padding-inline: var(--space-lg); }
    .strip__end--out { padding-left: var(--space-lg); border-left: 1px solid var(--hairline); }
    .lane__plot { height: 72px; }
  }

  /* ---- Split sections: head left, body right from 900 ----------------- */
  .htt-split { display: grid; gap: var(--space-sm); }
  @media (min-width: 900px) {
    .htt-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
    .htt-split > .section__head { position: sticky; top: calc(var(--nav-h) + var(--space-xl)); margin-bottom: 0; }
    .htt-split__body.rows > .row:first-child { padding-top: 0; }
  }

  /* ---- Before / during / after -------------------------------------------- */
  .phases { display: grid; gap: var(--space-xl); list-style: none; counter-reset: phase; }
  .phase { counter-increment: phase; padding-top: var(--space-md); border-top: 1px solid var(--hairline-strong); }
  .phase__title {
    display: flex;
    align-items: center;
    gap: var(--space-sm-md);
    font: 600 var(--fs-headline-sm)/1.33 var(--font-display);
  }
  .phase__title::before {
    content: counter(phase);
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-tint);
    font: 600 var(--fs-body-md)/1 var(--font-body);
    color: var(--accent);
  }
  .phase__list { display: grid; gap: var(--space-sm-md); margin-top: var(--space-md); list-style: none; }
  .phase__list > li {
    position: relative;
    padding-left: var(--space-md);
    font: 400 var(--fs-body-md)/1.5 var(--font-body);
    letter-spacing: .1px;
    color: var(--on-surface-muted);
  }
  .phase__list > li::before {
    content: "";
    position: absolute;
    top: .6em;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hairline-strong);
  }
  @media (min-width: 900px) {
    .phases { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  /* ---- What each report holds ------------------------------------------- */
  .report {
    padding: var(--space-md) var(--space-lg) var(--space-sm);
    background: var(--surface-container);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-md);
  }
  .report__head {
    display: flex;
    align-items: center;
    gap: var(--space-sm-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--hairline);
    color: var(--accent);
  }
  .report__title { font: 600 var(--fs-body-lg)/1.5 var(--font-body); letter-spacing: .15px; color: var(--on-surface); }
  .report__list { list-style: none; }
  .report__list > li {
    padding-block: var(--space-sm-md);
    font: 400 var(--fs-body-md)/1.43 var(--font-body);
    letter-spacing: .1px;
    color: var(--on-surface);
  }
  .report__list > li + li { border-top: 1px solid var(--hairline); }
  .report + .rows { margin-top: var(--space-xl); }

  /* ---- Data handling controls ------------------------------------------ */
  .controls { display: grid; }
  .controls__item { padding-block: var(--space-md); border-top: 1px solid var(--hairline); }
  .controls dt { font: 600 var(--fs-body-lg)/1.5 var(--font-body); letter-spacing: .15px; color: var(--on-surface); }
  .controls dd {
    margin-top: var(--space-xxs);
    font: 400 var(--fs-body-md)/1.43 var(--font-body);
    letter-spacing: .1px;
    color: var(--on-surface-muted);
  }
  @media (min-width: 640px) {
    .controls { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); }
  }

  /* ---- Citations: superscript numbers that link to the references ------- */
  .cite { margin-left: 1px; font-size: .7em; line-height: 0; vertical-align: super; }
  .cite a { padding-inline: 1px; color: var(--accent); text-decoration: none; font-variant-numeric: tabular-nums; }
  .cite a:hover { text-decoration: underline; text-underline-offset: 2px; }

  /* ---- Paper versus digital comparison ---------------------------------- */
  .compare { font-variant-numeric: normal; }
  .compare :is(th, td) { vertical-align: top; }
  .compare tbody th { color: var(--on-surface); }
  .compare td:nth-child(2) { color: var(--on-surface-muted); }
  .compare__note {
    max-width: 68ch;
    margin-top: var(--space-md);
    font: 400 var(--fs-body-sm)/1.33 var(--font-body);
    letter-spacing: .4px;
    color: var(--on-surface-muted);
  }
  /* Deliberate max-width exception (like scores.css's band table): below 640 each
     row becomes a block, with the column names carried by data-label. */
  @media not all and (min-width: 640px) {
    .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .compare tr { display: block; padding-block: var(--space-md); border-bottom: 1px solid var(--hairline); }
    .compare tbody th, .compare td { display: block; padding: 0; border: 0; }
    .compare td { margin-top: var(--space-sm); }
    .compare td::before {
      content: attr(data-label);
      display: block;
      margin-bottom: var(--space-xxs);
      font: 500 var(--fs-label-sm)/1.45 var(--font-body);
      letter-spacing: .5px;
      color: var(--on-surface-muted);
    }
    .compare td:last-child::before { color: var(--accent); }
  }
  @media (min-width: 640px) {
    .compare th[scope="row"] { width: 22%; }
    .compare td { width: 39%; }
  }

  /* ---- References (the /scores list, which lives in scores.css) --------- */
  .refs { list-style: none; counter-reset: ref; }
  .refs > li {
    counter-increment: ref;
    position: relative;
    padding: var(--space-md) 0 var(--space-md) 44px;
    border-top: 1px solid var(--hairline);
  }
  .refs > li:first-child { border-top: 0; padding-top: 0; }
  .refs > li::before {
    content: counter(ref);
    position: absolute;
    top: var(--space-md);
    left: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent-tint);
    font: 600 var(--fs-body-sm)/1 var(--font-body);
    font-variant-numeric: tabular-nums;
    color: var(--accent);
  }
  .refs > li:first-child::before { top: 0; }
  .refs > li:target::before { background: var(--accent); color: var(--on-accent); }
  .refs p { font: 400 var(--fs-body-md)/1.55 var(--font-body); letter-spacing: .1px; color: var(--on-surface-muted); }
  .refs strong { color: var(--on-surface); }
  .refs a { white-space: nowrap; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }

  /* ---- FAQ (scores.css has the same two rules; it isn't loaded here) ----- */
  .faq + .faq { margin-top: var(--space-sm-md); }
  .faq__q {
    flex: 1;
    font: 600 var(--fs-body-lg)/1.5 var(--font-body);
    letter-spacing: .15px;
    color: var(--on-surface);
  }
  .faq .disclosure__body p { color: var(--on-surface-muted); line-height: 1.6; }
  .faq .disclosure__body .faq__refs { margin-top: var(--space-sm); font-size: var(--fs-body-sm); }
  .faq__refs a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); }

  /* ---- Contact ---------------------------------------------------------- */
  .htt-cta {
    padding: var(--space-xxl) var(--space-lg);
    text-align: center;
    background: var(--surface-container);
    border: 1px solid var(--mood-border);
    border-radius: var(--radius-lg);
  }
  .htt-cta p {
    max-width: 56ch;
    margin: var(--space-sm-md) auto var(--space-lg);
    font: 400 var(--fs-body-lg)/1.5 var(--font-body);
    letter-spacing: .15px;
    color: var(--on-surface-muted);
  }
  @media (min-width: 900px) {
    .htt-cta { padding: var(--space-3xl) var(--space-xl); }
  }
}