/*
 * base.css — layout & structure. Org copies of this site should NOT edit this
 * file: everything brand-specific (colours) lives in theme.css, and everything
 * text lives in tools.json + content/. If you find yourself editing base.css
 * to re-brand, stop — you probably want a token in theme.css instead.
 *
 * Accessibility notes are inline. This file implements the structural half of
 * WCAG 2.2 AA (focus visibility, skip link, reduced motion, reflow); the
 * colour half is enforced on theme.css by check-theme.js.
 */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.65 -apple-system, "Helvetica Neue", "Segoe UI", system-ui, Roboto, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* Anchor targets clear the header when jumped to (WCAG 2.4.11). */
:target { scroll-margin-top: 16px; }

/* ---- skip link: first focusable element, visible only on focus ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--text); color: var(--bg);
  padding: 10px 18px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---- keyboard focus: ≥3:1 ring on every background (checked) ------------ */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- header -------------------------------------------------------------- */
header.site { background: var(--bg-header, var(--bg)); border-bottom: 1px solid var(--line); padding: 14px 20px; }
header.site .inner {
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
header.site a.home {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); font-weight: 700; font-size: 19px;
  letter-spacing: -0.02em; text-decoration: none;
}
header.site a.home:hover { text-decoration: underline; }
header.site .logo { height: 22px; width: auto; display: block; }
header.site .aud { color: var(--text-dim); font-size: .85rem; margin-left: auto; }
header.site a.aud { text-decoration: none; }
header.site a.aud:hover { text-decoration: underline; }

/* ---- breadcrumb ----------------------------------------------------------- */
nav.crumbs { font-size: .85rem; }
nav.crumbs .inner { max-width: 720px; margin: 0 auto; padding: 12px 20px 0; }
nav.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: .45em; }
nav.crumbs li { color: var(--text-dim); }
nav.crumbs li + li::before { content: "›"; margin-right: .45em; color: var(--text-dim); }
nav.crumbs a { color: var(--link); text-decoration: none; }
nav.crumbs a:hover { text-decoration: underline; }

/* ---- content ------------------------------------------------------------- */
/* The reading column sits on its own background (--bg-content), lifted off the
   paper. The rail and the page furniture keep --bg, so the column reads as the
   thing you are meant to be looking at. */
.page {
  max-width: 720px; margin: 0 auto; padding: 24px 20px 64px;
  background: var(--bg-content);
}
main :first-child { margin-top: 0; }

@media (min-width: 760px) {
  /* Round and inset the column only once there is paper visible beside it.
     Edge to edge on a phone, where a rounded strip would just look clipped. */
  .page {
    border-radius: 8px;
    margin-top: 12px;
    padding-left: 32px;
    padding-right: 32px;
  }
  /* The furniture outside the column follows the same inset, so the logo,
     breadcrumb and footer stay on the same vertical line as the body text
     rather than 12px adrift from it. */
  header.site .inner,
  nav.crumbs .inner,
  footer.site { padding-left: 32px; padding-right: 32px; }
}

/* ---- section rail ---------------------------------------------------------
 * A persistent list of the pages beside this one (its mode group, Principles,
 * or the audience's guide), with the current page's own h2s nested under it
 * when the page has enough of them to be worth it. Generated in build.js.
 *
 * Shown only from 1100px up, where there is room for a 200px column beside the
 * 720px measure without squeezing it. Below that it is display:none rather
 * than reflowed: every link in it is also reachable from the breadcrumb trail
 * and the index pages, so hiding it removes no content (WCAG 1.4.10 reflow —
 * the page has a single column at narrow widths, as before).
 *
 * Colours come from existing theme.css tokens only: --text-dim for the resting
 * link, --text for hover/current, --line for the spine, --accent for the
 * current marker (decoration — the current item is also bolder, darker, and
 * carries aria-current, so the colour is never the only cue).
 */
.section-nav { display: none; }

@media (min-width: 1100px) {
  /* Only pages that actually have a rail become two-column; every other page
     (the root index) keeps the single centred measure it has always had. */
  body.has-rail .shell {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 40px;
    align-items: start;
  }
  /* The column fills its grid track, but keeps its internal padding: the text
     must not sit against the edge of its own background. (This rule used to
     zero the padding — harmless while .page was transparent and the "edge" was
     imaginary, a visible defect the moment it gained a background.) */
  body.has-rail .shell > .page { max-width: none; margin: 12px 0 0; }

  /* header, breadcrumb and footer mirror the grid so they line up with the
     content column rather than with the rail */
  /* header, breadcrumb and footer mirror the grid so they line up with the
     body text — 260px reaches the content track (20 shell + 200 rail + 40 gap),
     plus the column's own 32px inset. Aligning to the text rather than to the
     card's edge keeps the vertical rhythm the page had before the column
     gained a background. */
  body.has-rail header.site .inner,
  body.has-rail nav.crumbs .inner,
  body.has-rail footer.site { max-width: 1000px; padding-left: 292px; padding-right: 20px; }

  body.has-rail .section-nav {
    display: block;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 24px 0 24px;
    font-size: .9rem;
    line-height: 1.45;
  }
  .section-nav__title {
    display: block;
    margin: 0 0 10px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  a.section-nav__title { text-decoration: none; }
  a.section-nav__title:hover { color: var(--text); text-decoration: underline; }
  a.section-nav__title[aria-current="page"] { color: var(--text); }

  .section-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    border-left: 1px solid var(--line);
  }
  .section-nav li { margin: 0; }
  .section-nav a {
    display: block;
    padding: 5px 0 5px 14px;
    margin-left: -1px;
    border-left: 2px solid transparent;
    color: var(--text-dim);
    text-decoration: none;
  }
  .section-nav a:hover { color: var(--text); text-decoration: underline; }
  .section-nav a[aria-current="page"] {
    color: var(--text);
    font-weight: 600;
    border-left-color: var(--accent);
  }
  .section-nav a:focus-visible { border-radius: 2px; }

  /* the current page's own headings */
  .section-nav ul.sub {
    border-left: 0;
    margin: 2px 0 6px;
  }
  .section-nav ul.sub a {
    padding: 3px 0 3px 28px;
    border-left: 0;
    font-size: .85rem;
    font-weight: 400;
    color: var(--text-dim);
  }
  .section-nav ul.sub a:hover { color: var(--text); }

  /* ---- rail groups --------------------------------------------------------
   * A labelled cluster of related pages (Utilities, Event management). The
   * label is a span, not a link — there is no page behind it — so it must not
   * look clickable: smaller and dimmer than an entry, no hover state.
   *
   * The nested <ul> inherits the spine, which would double it up beside the
   * parent's, so the group's own spine is dropped and the children indent
   * instead. */
  .section-nav .section-nav__group {
    display: block;
    padding: 10px 0 3px 14px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-dim);
  }
  .section-nav li.group > ul { border-left: 0; }
  .section-nav li.group > ul > li > a { padding-left: 22px; }
}

@media print {
  .section-nav { display: none; }
}

h1 { font-size: 1.7rem;  line-height: 1.25; margin: .2em 0 .5em; letter-spacing: -0.022em; }
h2 { font-size: 1.25rem; margin: 1.6em 0 .4em; letter-spacing: -0.015em; }
h3 { font-size: 1.05rem; margin: 1.4em 0 .3em; }

p, ul, ol { margin: .6em 0; }
ul, ol { padding-left: 1.4em; }
li { margin: .25em 0; }

/* Content links are underlined — colour alone is not a reliable cue. */
main a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
main a:hover { text-decoration-thickness: 2px; }

code {
  background: var(--surface);
  padding: .1em .35em; border-radius: 4px;
  font-size: .9em;
  font-family: "SF Mono", "Fira Code", ui-monospace, Menlo, Consolas, monospace;
  /* Long unbroken strings (file paths like content/facilitator/brainstorm.md)
     pushed the page past the viewport at 320px — a WCAG 1.4.10 reflow failure.
     Inline code may break mid-token; `pre` still scrolls in its own box. */
  overflow-wrap: anywhere;
}
pre { background: var(--surface); padding: 14px 16px; border-radius: 6px; overflow-x: auto; }
pre code { background: none; padding: 0; }

blockquote {
  margin: 1em 0; padding: .4em 1em;
  border-left: 3px solid var(--accent);
  color: var(--text-dim);
}

hr { border: none; border-top: 1px solid var(--line); margin: 2em 0; }

img { max-width: 100%; height: auto; }

/* Screenshots carry a hairline so they read as a picture of the product rather
   than as part of the page — the app's own chrome is pale and the reading
   column is now white, so without an edge they dissolve into it.
 *
 * --accent (not a new colour): it is already the site's decorative accent, and
 * green would collide with the app's own mode colouring, where green means a
 * focusing tool. A border implying "this is a focusing tool" on a screenshot of
 * Event Info would be worse than no border.
 *
 * Scoped to /screenshots/ so the diagrams in ../diagrams/ — which carry their
 * own backgrounds and are meant to be redrawn per-org — stay untouched. */
main img[src*="/screenshots/"] {
  border: 1px solid var(--accent);
  border-radius: 6px;
  display: block;
}

/* The wrapper scrolls (build.js emits it, focusable for keyboard users), so the
   table keeps real table semantics instead of display:block. */
.table-scroll { overflow-x: auto; margin: 1em 0; }
.table-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
table { border-collapse: collapse; }
th, td { border: 1px solid var(--line); padding: .45em .8em; text-align: left; }
th { background: var(--surface); }

/* ---- footer --------------------------------------------------------------- */
footer.site {
  max-width: 720px; margin: 0 auto;
  padding: 24px 20px; color: var(--text-dim); font-size: .85rem;
  border-top: 1px solid var(--line);
}
footer.site a { color: var(--link); }

/* ---- tool-page tabs (build.js tabify + assets/js/tabs.js) ----------------- */
/* Static form is stacked sections; everything below only bites once tabs.js
   has added .tabs--ready. Selection is announced by aria-selected and shown
   two ways (text colour + accent underline) — never colour alone, and the
   accent stays decorative: the label itself is --text/--text-dim, pairs the
   reading column already uses. */
.tablist { display: flex; flex-wrap: wrap; gap: 2px;
  border-bottom: 1px solid var(--line); margin: 1.6em 0 1.1em; }
.tablist [role="tab"] {
  background: none; border: none; cursor: pointer; font: inherit;
  font-weight: 600; color: var(--text-dim);
  padding: .55em .95em; min-height: 44px;         /* touch target */
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tablist [role="tab"]:hover { color: var(--text); }
.tablist [role="tab"][aria-selected="true"] {
  color: var(--text); border-bottom-color: var(--accent);
}

/* ---- landing path cards ---------------------------------------------------
 * The three doors on the home page (content/index.md authors them as raw
 * HTML). Each card holds exactly ONE link — the title — stretched over the
 * whole card via ::after, so the target is generous and nothing competes with
 * it. Selection cues are never colour alone: hover moves the border AND
 * underlines the title; keyboard focus rings the whole card.
 * Tokens only, all on --bg pairs check-theme.js already enforces. */
.paths ul {
  list-style: none; margin: 1.2em 0 1.6em; padding: 0;
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.paths li.path {
  position: relative; margin: 0;
  background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 16px 18px 14px;
}
.paths li.path:hover { border-color: var(--accent); }
.path__title { font-size: 1.1rem; margin: 0 0 .4em; letter-spacing: -0.01em; }
.path__title a { color: var(--link); text-decoration: none; }
.path__title a::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.paths li.path:hover .path__title a { text-decoration: underline; text-underline-offset: 2px; }
.path__title a:focus-visible { outline: none; }
.path__title a:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 2px; }
.path__end { white-space: nowrap; }  /* never strand the arrow on its own line */
.path__arrow { display: inline-block; }
.paths li.path:hover .path__arrow { transform: translateX(3px); transition: transform .15s ease; }
.path__when { margin: 0 0 .5em; font-size: .92rem; line-height: 1.5; color: var(--text); }
.path__where { margin: 0; font-size: .85rem; line-height: 1.5; color: var(--text-dim); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; clip-path: inset(50%); overflow: hidden;
  white-space: nowrap;
}

/* Print: no tabs to click, so show everything — panels stacked with their
   headings restored, which is exactly the no-JS reading order. */
@media print {
  .tabs--ready .tablist { display: none; }
  .tabs--ready .tab-panel[hidden] { display: block; }
  .tabs--ready .tab-panel > h2.visually-hidden {
    position: static; width: auto; height: auto; margin: revert;
    clip-path: none; overflow: visible; white-space: normal;
  }
}