/*
+------------------------------------------------------+
|  MODULE:   SEO STACK / HOME                          |
|  LOADS:    index.html, after base.css                |
|  CONTAINS: the hero, the room under the run button   |
|            and the How It Works frame under the      |
|            panel (the panel and the button are       |
|            speed.css; the bubbles and the fold live  |
|            in base.css)                              |
|  READS:    tokens from base.css. Defines none.       |
+------------------------------------------------------+
*/

/* A page sheet adds to the components layer. It holds the sections
   of its own page only. No colour is written in place here. */
@layer components {
  /* ---- the hero: the title at the start of the frame, its line of text in a bubble that opens from the title's left edge on hover; the box is
     only as wide as the title, so the bubble hangs under the words ---- */
  .hero {
    width: fit-content;
    margin-bottom: 1rem;
  }

  /* the hover bubbles (.has-tip and .tip) live in base.css: the speed page uses them too */

  /* ---- the run button sits in the frame's bottom corner (speed.css); the body leaves it the room
     it needs: 1rem under it, the button's 3rem, and 1rem above it to the last card ---- */
  .app-frame--home .app-body {
    padding-bottom: 5rem;
  }

  /* ---- How It Works: a mono pill centred under the form (the Show me pill and the title merged
     on 2026-10-13), the one handle of the fold that drops its frame open under it (the fold in
     base.css, the content dropping in like the member menu); shut on every load ---- */
  .how__handle {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
  }

  /* the heading keeps the section's name for a screen reader and lends the pill none of the
     heading's size (the History heading does the same in speed.css) */
  .how__heading {
    margin: 0;
    font: inherit;
    letter-spacing: normal;
  }

  /* the chevron after the words turns from down to right while the frame is shut */
  .how__title-icon {
    flex: none;
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s var(--ease);
  }

  .how__title[aria-expanded="false"] .how__title-icon {
    transform: rotate(-90deg);
  }

  .app-frame--how {
    margin-top: 1rem;
  }

  .how__line {
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--text-primary);
  }

  /* the three steps: one column under 42rem, a row each from 42rem (the drawing beside its number
     pill, its title and its line), three across from 60rem; each a drawing of the app (the address
     box with its bands and pills, the play button grown to its words over the loading line, the
     score ring with the fixes in order) */
  .how__steps {
    display: grid;
    gap: 1.25rem;
    padding-left: 0;
    list-style: none;
  }

  .how__step {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  /* the drawing in a frame of the page's own background, cut to a card's corner; the svg keeps
     its 320 by 152 viewBox's shape at any width */
  .how__figure {
    margin: 0 0 0.25rem;
    overflow: hidden;
    background: var(--bg-primary);
    border: 0.0625rem solid var(--border-color);
    border-radius: var(--r-lg);
  }

  .how__image {
    display: block;
    width: 100%;
    height: auto;
  }

  /* the drawings' inks: each colour class but the terminal box's sets the colour the svg's
     currentColor reads, from the app's own tokens, so the light theme draws them in its tones (the box sets its
     fill and stroke itself and stays dark in both, as the app's does); the faces are the live ones:
     the mono of the pills and the button, the ring's seven-segment digits, and the body's face the
     address inherits */
  .draw-ink {
    color: var(--text-secondary);
  }

  .draw-text {
    color: var(--text-primary);
  }

  .draw-line {
    color: var(--border-color);
  }

  .draw-speed {
    color: var(--check-speed);
  }

  .draw-security {
    color: var(--check-security);
  }

  .draw-technical {
    color: var(--check-technical);
  }

  .draw-orange {
    color: var(--color-orange);
  }

  .draw-on-orange {
    color: var(--on-orange);
  }

  .draw-amber {
    color: var(--color-amber);
  }

  .draw-cli {
    color: var(--cli-text);
  }

  .draw-cli-border {
    color: var(--cli-border);
  }

  .draw-cli-box {
    fill: var(--cli-bg);
    stroke: var(--cli-border);
  }

  .draw-mono {
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 0.06em;
  }

  .draw-bold {
    font-weight: 700;
  }

  .draw-digits {
    font-family: var(--font-digits);
  }

  .how__num {
    align-self: flex-start;
  }

  .how__step-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-lg);
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
  }

  .how__text {
    margin: 0;
    line-height: 1.6;
    color: var(--text-secondary);
  }

  /* from 42rem each step is a row: the drawing at 18rem beside its number, title and line, spanning
     their three rows (three across here would shrink the drawings to 180 px, where their words stop
     reading); the figure keeps its own height at the row's start */
  @media (min-width: 42rem) {
    .how__step {
      display: grid;
      grid-template-columns: 18rem minmax(0, 1fr);
      grid-template-rows: auto auto 1fr;
      column-gap: 1.25rem;
      align-items: start;
    }

    .how__figure {
      grid-row: 1 / 4;
    }

    .how__num,
    .how__step-title,
    .how__text {
      grid-column: 2;
    }

    /* the number pill keeps its own width in the grid (a grid item stretches across its column) */
    .how__num {
      justify-self: start;
    }
  }

  /* three across from 60rem, where the frame is 920 px (its 58rem cap comes at 60.5rem) and each
     drawing 276 px, 270 beside a 17 px default scrollbar (the page's thin one takes less) and 278.7
     once the frame is at its cap, so the drawings' words (9.5 units and up) stay 8 px and up; the
     steps go back to columns, stretched so the figure fills its column */
  @media (min-width: 60rem) {
    .how__steps {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .how__step {
      display: flex;
      align-items: stretch;
    }
  }
}