/* Site-level polish and layout. Kept out of the design system so tokens/ stays in sync with the
   source project. Grids live here rather than in inline styles so breakpoints can reach them.

   Breakpoints: mobile < 640, tablet 640 to 1023, desktop 1024 and up. */

.section { padding: var(--space-section) 0; }
.section-tight { padding: var(--space-section-tight) 0; }
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter-desktop); }

.grid { display: grid; gap: var(--space-md); }
.grid-lg { gap: var(--space-lg); }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.g-hero { grid-template-columns: 1.15fr 1fr; }
.g-rail { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-xxl); }
.g-brief { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-xl); align-items: start; }

/* Contents rail beside an article. */
.rail {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-xl));
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Verdict, progress and export beside the questions. */
.brief-panel {
  position: sticky;
  top: calc(var(--nav-height) + var(--space-xl));
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Wide tables scroll inside their own box. The page never scrolls sideways.
   min-width:0 because a flex or grid child otherwise floors at its content width,
   which hands the table's min-width straight back to the column. */
.scroll-x { overflow-x: auto; min-width: 0; }

/* Rows of buttons at the end of a section. Wrapping is the point: two full
   sentences of label do not fit on one line at 375. */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

h1, h2, h3, h4 { text-wrap: balance; }

/* Counters that change while you read. Stops the layout twitching. */
.tnum { font-variant-numeric: tabular-nums; }

/* Anchored headings clear the fixed nav. */
[id] { scroll-margin-top: calc(var(--nav-height) + var(--space-xl)); }

/* Tactile press. Never below 0.95. */
button {
  transition-property: scale, opacity, background-color, color;
  transition-duration: 140ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
button:active:not(:disabled) { scale: 0.96; }

/* Contents rail: 40px minimum hit area, muted until pointed at. */
.rail-link {
  display: flex;
  align-items: center;
  min-height: 40px;
  color: var(--ink-muted);
  text-decoration: none;
}
.rail-link:hover,
.rail-link:focus-visible { color: var(--ink); text-decoration: none; }

/* Nav links carry the same floor. */
nav a { display: inline-flex; align-items: center; min-height: 40px; }

/* Answer rows. Full width because the answers are sentences, not words. */
.choice {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-xs) var(--space-sm);
  text-align: left;
  border: 1px solid var(--hairline-soft);
  border-radius: var(--rounded-md);
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  cursor: pointer;
  transition-property: background-color, border-color, color;
  transition-duration: 140ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.choice:hover { border-color: var(--hairline); color: var(--ink); }
.choice-on { background: var(--canvas); border-color: var(--ink); color: var(--ink); }

.choice-dot {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: var(--rounded-full);
  border: 1px solid var(--hairline);
  transition-property: border-color, box-shadow;
  transition-duration: 140ms;
}
.choice-on .choice-dot {
  border-color: var(--ink);
  box-shadow: inset 0 0 0 3px var(--canvas), inset 0 0 0 14px var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  button:active:not(:disabled) { scale: 1; }
  html { scroll-behavior: auto; }
}

/* ---------- Tablet and below: 1024px ---------- */
@media (max-width: 1023px) {
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .g-3 { grid-template-columns: repeat(2, 1fr); }
  /* minmax(0,…) not 1fr: a bare 1fr track grows to its widest child, so one
     wide table would stretch the whole column past the viewport. */
  .g-hero,
  .g-rail,
  .g-brief { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }

  /* The contents rail turns into a scrolling row above the article. */
  .rail {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: var(--space-lg);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--hairline-soft);
  }
  .rail-link { white-space: nowrap; }

  /* Verdict and export follow the questions, so answering ends on the result. */
  .brief-panel { position: static; }

  /* Footer ships a five-column grid with hard minimums. */
  footer > div {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--space-xl) !important;
  }
}

/* ---------- Nav wraps before it crowds: 900px ---------- */
@media (max-width: 899px) {
  /* The bar is two rows here, so everything keyed to nav height follows. */
  :root { --nav-height: 120px; }

  /* TopNav ships with inline styles, so these need the override. */
  header > div {
    height: auto !important;
    flex-wrap: wrap;
    row-gap: var(--space-xs);
    padding: var(--space-xs) var(--gutter-mobile) !important;
  }
  /* Drop the secondary nav action so the wordmark and primary share one row.
     Source index still sits at the foot of the library and in the footer. */
  header > div > div:last-child > button:first-child { display: none !important; }

  header nav {
    order: 3;
    flex: 1 0 100% !important;
    min-width: 0;
    max-width: 100%;
    justify-content: flex-start !important;
    overflow-x: auto;
    gap: var(--space-lg) !important;
  }
}

/* ---------- Mobile: 640px ---------- */
@media (max-width: 639px) {
  .container { padding: 0 var(--gutter-mobile); }
  .section { padding: var(--space-xxl) 0; }
  .section-tight { padding: var(--space-xl) 0; }

  .g-2,
  .g-3,
  .g-4 { grid-template-columns: 1fr; }

  /* Tables keep their shape and scroll inside the box. */
  .scroll-x > * { min-width: 520px; }

  .choice { align-items: flex-start; padding: var(--space-sm); }
  .choice-dot { margin-top: 2px; }

  footer > div {
    grid-template-columns: 1fr !important;
    padding: var(--space-xxl) var(--gutter-mobile) !important;
    gap: var(--space-lg) !important;
  }
}