/* signals.css — the numbered list: the homepage (en + sv), /thanks, /404
   and the /lab/ pages. Tokens, type, colour, header and footer come from
   global.css; this file only holds the list's own mechanics — the fade
   under the active line, the open body, the Next control, the request
   form, the slide layout on touch screens. Everything on the page is a
   numbered line; the mechanism is the list, not a layout. */

/* The lede: the page's h1 and value-prop sentence, visually hidden
   (.sr-only in index.html) since 2026-09-25 — it read as clutter against
   the list's own simplicity (Felix). Kept for assistive tech and for the
   copy's own sake; meta description and JSON-LD carry it for SEO. */
.lede {
  margin: 0 0 1.4em var(--num-w);
  max-width: var(--measure);
}
.lede__title {
  font-size: 1em;
  font-weight: 700;
  color: var(--ink);
}
.lede__sub {
  margin: 0.2em 0 1em;
  color: var(--ink-soft);
}

/* Room at the bottom so the last open signal can sit high on the screen. */
@media (min-width: 64em) {
  main { padding-bottom: 40vh; }
}

/* The list. */
.signals {
  list-style: none;
}

.signal__heading {
  font-size: 1em;
  font-weight: 700;
}

.signal__line {
  display: flex;
  align-items: baseline;
  width: 100%;
  padding: 0.12em 0;
  background: none;
  border: 0;
  /* Buttons default to text-align:center in the UA stylesheet; invisible
     while .signal__title had no explicit width, but a real bug once it
     got one below. */
  text-align: left;
  font-family: inherit;
  /* Titles sit at the base size, bold, like 37signals.com's signal list
     (2026-09-25, Felix: 180% read larger than theirs). */
  font-size: 1em;
  font-weight: 700;
  /* --fade (0-1) is set per-line by js/signals.js: full ink at the active
     line (hovered, focused, or the open signal), a flat --dim above it,
     and a distance-based gradient fade below it. Titles inherit this
     colour, so they're always visible (no more hide-until-hover). */
  color: rgba(var(--rgb-ink), var(--fade, 1));
  text-decoration: none;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: color var(--t);
}

.signal__num {
  flex: 0 0 var(--num-w);
  font-variant-numeric: tabular-nums;
}

/* A three-digit number ("404.") needs a wider column; the body follows. */
.signal--wide { --num-w: 4.8ch; }

.signal__title {
  width: calc(100% - 2.8ch);
}

/* Open: the chosen line's text sits under its number. Collapsed to one at a
   time only once JS has confirmed itself (html.js, set before first paint —
   see index.html's inline script). Without JS — or for a crawler/tool that
   renders CSS but never runs script — every body stays visible: one long,
   fully readable page instead of 13 inert dead ends (2026-09-25, progressive
   disclosure). */
.signal__body {
  margin: 0.45em 0 1.1em var(--num-w);
  max-width: var(--measure);
}

.js .signal__body {
  display: none;
}

.js .signal.signal--selected .signal__body {
  display: block;
}

.signal__body > * + * { margin-top: 0.55em; }

.signal__body p { color: var(--ink-soft); }

/* Next: a word and a disc with an arrow in the corner. "Start" on the index,
   "Next" once a signal is open (js/signals.js). Arrow keys and swipes do
   the same; on touch the control is hidden and swiping is the affordance. */
.next {
  position: fixed;
  right: var(--edge);
  bottom: var(--edge);
  z-index: 11;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: max(var(--font-size-small), 0.8rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--t);
}

.next__label {
  text-shadow: 0 0 0.6em var(--sky), 0 0 1.2em var(--sky);
}

.next__disc {
  position: relative;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 1.2em 0.2em var(--sky);
  transition: transform var(--t);
}

/* The arrow: a chevron in sky colour, drawn with two borders. */
.next__disc::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.42rem;
  height: 0.42rem;
  border-top: 2px solid var(--sky);
  border-right: 2px solid var(--sky);
  transform: translate(-65%, -50%) rotate(45deg);
}

.next:hover .next__label,
.next:focus-visible .next__label { text-decoration: underline; }
.next:hover .next__disc { transform: scale(1.12); }
.is-ready .next { opacity: 1; }
@media (hover: none) { .next { display: none; } }

@media (hover: hover) {
  /* The fixed Start/Next control lives bottom-right, on top of the footer.
     Reserve its footprint so the legal line's text never wraps under it.
     Touch devices hide .next entirely (above), so they keep full width. */
  .footer {
    padding-right: calc(var(--edge) + 8rem);
  }
}

/* Fading edge so the list dissolves into the sky at the bottom. */
body::after {
  content: '';
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 5em;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(0deg, var(--sky) 0%, transparent 100%);
}

@media (min-width: 64em) {
  body::after { height: 28vh; }
}


/* /lab/<idea>/ validation pages: one statement, no number, so the body
   is not indented under a number column. */
.lab .signal__body { margin-left: 0; }

/* Slides: touch and narrow screens (anything outside the desktop gate in
   global.css) get one signal per screen, snapped, every body open, and the
   Next control pointing down to the following slide (2026-09-25, Felix).
   Pure CSS, so it also works before or without JS; js/signals.js only
   tracks the current slide for the Next control and the tab title. */
@media not all and (min-width: 64em) and (hover: hover) and (pointer: fine) {
  html {
    scroll-snap-type: y mandatory;
    scroll-padding-top: 0;
  }

  main { padding: 0 var(--edge); }

  .signal {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100vh;
    min-height: 100svh;
    /* Clears the fixed header on top and the Next control below. */
    padding: 4em 0 3.5em;
    scroll-snap-align: start;
  }

  .js .signal__body { display: block; }
  .signal__body { margin-bottom: 0; }

  .signal__line {
    color: var(--ink);
    cursor: default;
  }

  .footer { scroll-snap-align: end; }

  .next { display: flex; }
  .next__disc::after { transform: translate(-50%, -65%) rotate(135deg); }
}