/*
 * app/web/css/how-it-works.css — the public How it works page: how a session runs, in the four steps
 * the editor's Overview panel names, each beside a real screenshot of the 2026 editor. Loads after
 * landing.css, the shared marketing shell, which owns the masthead and phone menu, the .g12 grid,
 * bands and section type, plates and their captions, the screenshot lightbox, the footage box
 * (.hero-footage, App Bible §19.7), the call-to-action band and the footer; everything here is this
 * page's own layout. The hero and its contents list follow philosophy.css, so the two pages read as
 * a pair. Phone rules key on [data-layout='mobile'] (device-boot.js), never on a width query.
 */

/* ---------- hero: the statement and the four steps on navy | the session on students' laptops, seam at column 7 ---------- */

.hero { grid-template-rows: minmax(720px, auto); background: var(--color-field-navy); }
.hero__text {
  grid-column: c-start 1 / c-end 6;
  grid-row: 1;
  padding: 48px var(--grid-gap) 40px 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hero__kicker { margin-bottom: 20px; }
/* display-xl's sanctioned range is 56–88 (SYSTEM §5): 88 at the 1440 frame, 56 where the column is narrowest */
.hero__h1 {
  font: var(--text-display-xl);
  font-size: clamp(56px, 6.11vw, 88px);
  letter-spacing: var(--tracking-display-xl);
  color: var(--color-ink-on-navy);
  max-width: 608px;
}
.hero__lede { margin-top: 20px; font: var(--text-lead); letter-spacing: var(--tracking-lead); color: var(--color-ink-on-navy); max-width: 608px; }
/* the hero's one action at button size: a secondary on navy; the masthead's teal sign-in stays the only primary */
.hero__action { margin-top: 28px; display: flex; }

/* the photograph side: the footage box fills columns 7–12 and the right margin; the cut is 4:3 and
   every shot is framed with its laptop or its student in the middle, so one centred focus serves all
   six from the phone's wide box to the narrow one at 1280 */
.hero__photo { grid-column: c-start 7 / full-end; grid-row: 1; position: relative; min-height: 0; }
.hero__footage { position: absolute; inset: 0; --footage-focus: 50% top; }
.hero__caption { position: absolute; right: 0; bottom: 0; max-width: 420px; }

/* the four steps as a ruled list; the whole row is the link. Hover underlines the title; focus is the
   kit's 2px ring, 2px outside the row (teal on navy). */
.toc { margin-top: 28px; display: flex; flex-direction: column; max-width: 608px; }
.toc__rows { display: flex; flex-direction: column; margin-top: 6px; }
.toc__row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 16px;
  align-items: center;
  min-height: 44px;
  border-bottom: 1px solid var(--color-rule);
  color: var(--color-ink);
  text-decoration: none;
}
.toc__num { font: var(--text-label); letter-spacing: var(--tracking-label); color: var(--color-ink-3); font-variant-numeric: tabular-nums; }
.toc__text { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; min-width: 0; }
.toc__title { font: var(--text-ui); color: var(--color-ink); white-space: nowrap; }
.toc__sub { font: var(--text-body-sm); color: var(--color-ink-2); white-space: nowrap; }
.toc__arrow { display: flex; color: var(--color-ink); }
.toc__row:hover .toc__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.toc__row:focus-visible { outline: none; border-radius: var(--radius-control); box-shadow: 0 0 0 2px var(--color-ground), 0 0 0 4px var(--color-focus); }
/* a jump from the contents lands under the sticky masthead, not behind it */
#steps, #build, #try, #live, #read { scroll-margin-top: calc(var(--size-masthead) + 24px); }

/* ---------- section furniture ---------- */

.sec-kicker { margin-bottom: 40px; }
/* a subtitle beside the title rather than under it */
.section-sub--beside { margin-top: 0; padding-top: 12px; max-width: 640px; }

/* ---------- the four steps: ruled rows, the screenshot and the words alternating sides ---------- */

.walk-band { padding-top: 88px; padding-bottom: 104px; }
.walk { margin-top: 56px; display: flex; flex-direction: column; list-style: none; padding: 0; }
/* each step opens on a strong rule; the words sit level with the top of the picture */
.walk__step { padding: 48px 0 56px; border-top: var(--rule-strong); align-items: start; }
.walk__step:last-child { padding-bottom: 0; }
.walk__text { display: flex; flex-direction: column; min-width: 0; padding-top: 4px; }
.walk__head { margin-top: 24px; display: flex; flex-direction: column; gap: 6px; }
.walk__num { font: var(--text-figure-lg); letter-spacing: var(--tracking-figure-lg); color: var(--color-ink); font-variant-numeric: lining-nums; }
.walk__title { font: var(--text-title-lg); letter-spacing: var(--tracking-title-lg); color: var(--color-ink); }
.walk__copy { margin-top: 14px; font: var(--text-body-lg); letter-spacing: var(--tracking-body-lg); color: var(--color-ink-2); max-width: 440px; }
.walk__note { margin-top: 16px; font: var(--text-body-sm); color: var(--color-ink-2); max-width: 440px; }

/* where to look: the control as it appears on the editor's screen, so a first-timer knows what to find */
.where { margin-top: 24px; padding-top: 16px; border-top: var(--rule-hair); display: flex; flex-direction: column; gap: 8px; max-width: 440px; }
.where__label { font: var(--text-label); letter-spacing: var(--tracking-label); color: var(--color-ink-3); }
.where__text { font: var(--text-body); letter-spacing: var(--tracking-body); color: var(--color-ink); }

/* a key is a picture of the editor's control, not a button: flat, no hover, no pointer */
.keys { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--size-control-compact);
  padding: 0 12px;
  border: 1px solid var(--color-edge);
  border-radius: var(--radius-control);
  background: var(--color-input);
  color: var(--color-ink);
  font: var(--text-button-sm);
  white-space: nowrap;
  cursor: default;
  user-select: none;
}
.key--primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-label); }
.key--danger { border-color: var(--color-danger); color: var(--color-danger); }
/* the rail item: the editor draws the open panel with a teal bar on its left edge */
.key--rail { border-color: var(--color-rule); border-left: 3px solid var(--color-live); background: var(--color-selected); border-radius: 0; }

/* the rail's three marks, drawn as the editor draws them */
.marks { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 2px; list-style: none; padding: 0; }
.marks__item { display: inline-flex; align-items: center; gap: 8px; font: var(--text-ui); color: var(--color-ink); }
.mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 1px; }
.mark--done { background: var(--color-primary); color: var(--color-primary-label); }
.mark--needed { border: 1.5px solid var(--color-ink); }
.mark--optional { border: 1px dashed var(--color-ink-3); }

/* ---------- after class: navy statement | photograph ---------- */

.after { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--color-field-navy); }
.after__text {
  padding: 80px var(--layout-gutter) 72px;
  padding-left: max(var(--layout-gutter), calc(100% - var(--layout-frame) / 2 + var(--layout-gutter)));
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.after__h2 { margin-top: 24px; font: var(--text-display-lg); font-size: clamp(44px, 4.45vw, 64px); letter-spacing: var(--tracking-display-lg); color: var(--color-ink-on-navy); max-width: 560px; }
.after__body { margin-top: 20px; font: var(--text-body-lg); letter-spacing: var(--tracking-body-lg); color: var(--color-ink-2-on-navy); max-width: 540px; }
.after__link { margin-top: 28px; align-self: flex-start; }
.after__photo { position: relative; min-height: 560px; overflow: hidden; }
.after__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 46% 25%; }
.after__caption { position: absolute; right: 0; bottom: 0; max-width: 420px; }

/* ---------- bottom call to action: the shell's band with two buttons ---------- */

.cta__action { gap: 12px; }

/* ---------- phone ---------- */

/* hero: text, then the footage with its caption plate */
[data-layout='mobile'] .hero { padding: 0; }
[data-layout='mobile'] .hero__text { padding: 24px var(--layout-gutter) 32px; }
[data-layout='mobile'] .hero__kicker { margin-bottom: 18px; }
[data-layout='mobile'] .hero__h1 { font: var(--text-display-md); letter-spacing: var(--tracking-display-md); max-width: none; }
[data-layout='mobile'] .hero__lede { margin-top: 16px; font: var(--text-body-lg); letter-spacing: var(--tracking-body-lg); max-width: none; }
[data-layout='mobile'] .toc { margin-top: 24px; max-width: none; }
[data-layout='mobile'] .toc__rows { margin-top: 4px; }
[data-layout='mobile'] .toc__row { grid-template-columns: 32px minmax(0, 1fr) 20px; padding: 8px 0; }
[data-layout='mobile'] .toc__text { flex-direction: column; align-items: stretch; gap: 1px; }
[data-layout='mobile'] .toc__title,
[data-layout='mobile'] .toc__sub { white-space: normal; }
[data-layout='mobile'] .toc__arrow svg { width: 20px; height: 20px; }
[data-layout='mobile'] .hero__action { margin-top: 24px; flex-direction: column; }
[data-layout='mobile'] .hero__action .tt-btn { width: 100%; }
[data-layout='mobile'] .hero__photo { height: 300px; }
[data-layout='mobile'] .hero__caption { right: auto; left: 0; max-width: 300px; }

/* the steps: kicker → number and title → copy → picture → where to look → note, whichever side the picture was on */
[data-layout='mobile'] .walk-band { padding-top: 44px; padding-bottom: 52px; }
[data-layout='mobile'] .sec-kicker { margin-bottom: 24px; }
[data-layout='mobile'] .section-sub--beside { margin-top: 14px; padding-top: 0; max-width: none; }
[data-layout='mobile'] .walk { margin-top: 32px; }
[data-layout='mobile'] .walk__step { padding: 28px 0 40px; align-items: stretch; }   /* full-width rules, whatever each block's text measures */
[data-layout='mobile'] .walk__text { display: contents; }
[data-layout='mobile'] .walk__text > .tt-kicker { order: 1; }
[data-layout='mobile'] .walk__head { order: 2; margin-top: 18px; gap: 4px; }
[data-layout='mobile'] .walk__copy { order: 3; margin-top: 10px; font: var(--text-body); letter-spacing: var(--tracking-body); max-width: none; }
[data-layout='mobile'] .walk__plate { order: 4; margin-top: 20px; }
[data-layout='mobile'] .where { order: 5; margin-top: 20px; max-width: none; }
[data-layout='mobile'] .walk__note { order: 6; margin-top: 12px; max-width: none; }

/* after class: the photograph first, then the words */
[data-layout='mobile'] .after { display: flex; flex-direction: column; }
[data-layout='mobile'] .after__photo { order: -1; min-height: 0; height: 260px; }
[data-layout='mobile'] .after__photo img { object-position: 45% 20%; }
[data-layout='mobile'] .after__caption { right: auto; left: 0; max-width: 300px; }
[data-layout='mobile'] .after__text { padding: 36px var(--layout-gutter) 44px; }
[data-layout='mobile'] .after__h2 { margin-top: 18px; font: var(--text-title-xl); letter-spacing: var(--tracking-title-xl); }
[data-layout='mobile'] .after__body { margin-top: 12px; max-width: none; }
[data-layout='mobile'] .after__link { margin-top: 16px; }

/* call to action: the two buttons stacked full width, primary first */
[data-layout='mobile'] .cta { align-items: stretch; }
[data-layout='mobile'] .cta__action { flex-direction: column; align-items: stretch; gap: 8px; }
[data-layout='mobile'] .cta__action .tt-btn--primary { order: -1; }