/* Sikkerhetskontroll (#/safety) — the practical test's safety check.
 *
 * Loaded from index.html alongside course.css and schools.css. Kept out of
 * styles.css for the same reason those are: this is one section's styling, and
 * styles.css is already the shared design system every route reads.
 *
 * Two conventions inherited from the rest of the app and worth keeping:
 *   * Every colour is a token from styles.css :root, never a literal, so the
 *     section follows the theme switch without a second dark-mode block.
 *   * .sa-* prefix throughout, like .cs-* for course figures and .sm-* for the
 *     sitemap badges — an unprefixed state word (`.note`, `.card`) would collide
 *     with the landing page's own rules, which is how a sitemap pill once
 *     inherited `display: grid`.
 */

.sa-wrap { display: flex; flex-direction: column; gap: 1.5rem; }

/* ------------------------------------------------------------------ hero */
.sa-hero { display: grid; gap: .55rem; justify-items: start; }
.sa-hero h1 { margin: 0; font-size: clamp(1.55rem, 1.1rem + 2vw, 2.3rem); line-height: 1.15; }
.sa-hero .lead { margin: 0; max-width: 62ch; color: var(--muted); line-height: 1.6; }
.sa-hero-ico {
  display: inline-grid; place-items: center; width: 46px; height: 46px;
  border-radius: 14px; background: var(--surface-2); color: var(--brand);
  border: 1px solid var(--border);
}
.sa-hero-ico svg { width: 24px; height: 24px; }

/* The breadcrumb here was `.sa-crumb`, one of three separate implementations in the
   codebase; it is now the shared `.crumbs` in styles.css and starts at Home. */

/* -------------------------------------------------------------------- prose */
.sa-prose { max-width: none; }
.sa-prose p { margin: 0 0 .85rem; line-height: 1.68; }
.sa-prose p:last-child { margin-bottom: 0; }
.sa-prose h2 { margin: 1.4rem 0 .7rem; font-size: 1.08rem; }
.sa-how { margin: 0; padding-left: 1.3rem; display: grid; gap: .5rem; }
.sa-how li { line-height: 1.6; }
.sa-h2 { margin: .5rem 0 0; font-size: 1.15rem; }

/* --------------------------------------------------------------------- note */
.sa-note { display: flex; gap: .85rem; align-items: flex-start; }
.sa-note-ico { flex: 0 0 auto; color: var(--blue); }
.sa-note-ico svg { width: 22px; height: 22px; }
.sa-note b { display: block; margin-bottom: .3rem; }
.sa-note p { margin: 0; color: var(--muted); line-height: 1.6; }

/* ------------------------------------------------------------- area cards */
.sa-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sa-card {
  display: grid; grid-template-columns: auto 1fr; gap: .5rem .85rem;
  align-items: start; padding: 1.05rem 1.1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  color: inherit; text-decoration: none;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.sa-card:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 8px 24px rgb(0 0 0 / .07); }
.sa-card-ico {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; background: var(--surface-2); color: var(--brand);
}
.sa-card-ico svg { width: 21px; height: 21px; }
.sa-card-txt { display: grid; gap: .3rem; }
.sa-card-txt b { font-size: 1.02rem; }
.sa-card-lead { color: var(--muted); font-size: .89rem; line-height: 1.55; }
.sa-card-n {
  grid-column: 2; justify-self: start; font-size: .78rem; font-weight: 600;
  color: var(--muted); background: var(--surface-2);
  border-radius: 999px; padding: .18rem .6rem;
}

/* ------------------------------------------------------------- theory link */
.sa-theory {
  margin: 0; display: flex; gap: .45rem; flex-wrap: wrap; align-items: center;
  font-size: .9rem; color: var(--muted);
}
.sa-theory a { color: var(--brand); display: inline-flex; align-items: center; min-height: 24px; }

/* ------------------------------------------------------------------- tasks */
.sa-tasks { display: grid; gap: 1rem; }
/* min-width: 0 is load-bearing, not tidying. A grid item defaults to
   `min-width: auto`, so it inflates to its min-content width — and the figures
   inside carry `min-width: 460px` (the legibility floor in the mobile block at the
   bottom of this file). Without this, a task card measured 490px inside a 390px
   phone viewport and 514px of it sat past the right edge, silently CLIPPED rather
   than scrollable, because `.view` in styles.css sets `overflow-x: clip`. That clip
   also means a document-level `scrollWidth > innerWidth` check reports no overflow,
   so the bleed is invisible to the obvious test — measure element rects instead.
   styles.css:1449 records the same trap biting once before, on `.filename`. */
.sa-task {
  min-width: 0;
  padding: 1.15rem 1.2rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px;
  /* The flag tone is carried on the LEFT edge rather than as a tinted panel: a
     tinted background would put body text on a coloured ground on the pages
     that are mostly body text, and two of the six areas flag half their tasks. */
  border-left: 3px solid var(--border);
}
.sa-task.is-warn { border-left-color: var(--amber); }
.sa-task.is-stop { border-left-color: var(--bad); }
.sa-task-h { display: flex; gap: .7rem; align-items: baseline; }
.sa-task-h h3 { margin: 0; font-size: 1.05rem; line-height: 1.35; }
.sa-task-n {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  width: 25px; height: 25px; border-radius: 8px;
  background: var(--surface-2); color: var(--muted);
  font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.sa-flag {
  margin: .7rem 0 0; display: flex; gap: .4rem; align-items: center;
  font-size: .82rem; font-weight: 600; color: var(--muted);
}
.sa-flag svg { width: 16px; height: 16px; flex: 0 0 auto; }
.sa-task.is-warn .sa-flag { color: var(--gold-ink); }
.sa-task.is-stop .sa-flag { color: var(--bad); }

.sa-step { margin-top: .95rem; }
.sa-step-k {
  display: inline-block; margin-bottom: .4rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted);
}
.sa-do { margin: 0; padding-left: 1.25rem; display: grid; gap: .35rem; }
.sa-do li { line-height: 1.6; }
/* The line to say out loud. Quoted, in a well, so it reads as speech rather than
   as one more bullet — it is the part a candidate rehearses verbatim. */
.sa-said blockquote {
  margin: 0; padding: .8rem .95rem;
  background: var(--surface-2); border-radius: 12px;
  border-left: 3px solid var(--brand);
  line-height: 1.65; font-style: normal;
}
.sa-whystep p { margin: 0; color: var(--muted); line-height: 1.65; }

/* ----------------------------------------------------------------- figures */
.sa-fig { margin: 1.1rem 0 0; }
.sa-fig svg { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--surface-2); }
.sa-fig figcaption { margin-top: .5rem; font-size: .84rem; color: var(--muted); line-height: 1.5; }
/* Half-width variant, for a figure whose subject is a couple of small objects rather
   than a scene — two warning lamps at the full column width read as posters. Rendered
   size only; the viewBox is untouched. Left at full width on phones, where the column
   is already narrower than the figure's own 460px legibility floor and it scrolls
   inside its box — halving there would leave a tiny window onto a scrolling picture. */
.sa-fig--half { max-width: max(440px, 52%); margin-inline: auto; }
.sa-photo { margin: 0; }
.sa-photo img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--border); }

/* --- figure internals (see web/app/safety-art.js) -------------------------
   Every one of these is a token, so the drawings follow the theme. They are
   deliberately NOT animated: the same rule as the question scenes — nothing
   loops while somebody is reading. */
.sa-ground { fill: transparent; }
.sa-body { fill: var(--surface); stroke: var(--text); stroke-width: 2; }
.sa-roof { fill: var(--surface-2); stroke: var(--border); stroke-width: 1.5; }
.sa-glass { fill: var(--blue); opacity: .22; }
.sa-plate { fill: var(--surface); stroke: var(--border); stroke-width: 1.6; }
.sa-tyre, .sa-carcass { fill: var(--text); opacity: .82; }
.sa-tyre-o { fill: none; stroke: var(--text); stroke-width: 14; opacity: .8; }
.sa-rim { fill: var(--surface-2); stroke: var(--border); stroke-width: 2; }
.sa-hub { fill: var(--muted); }
.sa-wheel { fill: var(--text); opacity: .85; }
.sa-wheel-rim { fill: none; stroke: var(--text); stroke-width: 11; opacity: .8; }
.sa-spoke { fill: none; stroke: var(--text); stroke-width: 7; stroke-linecap: round; opacity: .8; }
.sa-lamp { fill: var(--amber); opacity: .9; }
.sa-lamp-r { fill: var(--bad); opacity: .9; }
/* Tread rubber, and the band below the summer minimum. The two legal floors are
   LEVELS across the groove rather than layers of the rubber: a groove runs all the
   way down to the carcass, so drawing 1,6 mm as a stripe inside the block would say
   something untrue about where the depth is measured. */
.sa-block { fill: var(--text); opacity: .34; }
.sa-illegal { fill: var(--bad); opacity: .16; }
.sa-level { fill: none; stroke-width: 2.4; stroke-dasharray: 8 6; }
.sa-level.win { stroke: var(--gold-ink); }
.sa-level.sum { stroke: var(--bad); }
.sa-contact { fill: var(--bad); }
.sa-road, .sa-floor { stroke: var(--text); stroke-width: 3; opacity: .55; fill: none; }
.sa-asphalt { fill: var(--text); opacity: .12; }
.sa-centre { stroke: var(--surface); stroke-width: 3; stroke-dasharray: 18 14; fill: none; }
.sa-wall { fill: var(--text); opacity: .18; }
.sa-beam { stroke: none; }
.sa-beam.ok { fill: var(--amber); opacity: .38; }
.sa-beam.bad { fill: var(--bad); opacity: .3; }
.sa-pedal { fill: var(--text); opacity: .75; }
.sa-dim { stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 4 4; fill: none; }
.sa-arrow { stroke: var(--text); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.sa-leader { stroke: var(--muted); stroke-width: 1.3; fill: none; }
.sa-route { fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-dasharray: 9 8; }
.sa-play { fill: none; stroke: var(--brand); stroke-width: 3; stroke-dasharray: 7 6; }
.sa-triangle { fill: var(--bad); stroke: var(--surface); stroke-width: 2.5; }
.sa-hazard { stroke: var(--amber); stroke-width: 3.5; stroke-linecap: round; }
.sa-stick { fill: var(--muted); opacity: .35; }
.sa-oil { fill: var(--gold-ink); opacity: .75; }
.sa-cluster { fill: var(--surface-2); stroke: var(--border); stroke-width: 1.6; }
.sa-bulb { fill: var(--surface); stroke-width: 3; }
.sa-bulb.is-warn { stroke: var(--amber); }
.sa-bulb.is-bad { stroke: var(--bad); }
.sa-bar { fill: var(--brand); opacity: .8; }
.sa-key { fill: var(--surface-2); stroke: var(--border); stroke-width: 1.5; }
.sa-chip { fill: var(--surface-2); stroke: var(--border); stroke-width: 1.4; }
.sa-plate-rule { stroke: var(--border); stroke-width: 1.4; fill: none; }
.sa-plate-rule.faint { opacity: .55; }

/* Figure text. 13px at a 520-wide viewBox scaled into a ~700px column reads at
   roughly 17px, so this is not small type in practice — but it is the reason the
   figures must never be allowed to shrink below the min-width guard below. */
.sa-fig text { font-family: inherit; font-size: 13px; fill: var(--text); }
.sa-tag rect { fill: var(--surface); stroke: var(--border); stroke-width: 1.2; }
.sa-tag text { font-size: 11.5px; fill: var(--text); }
.sa-tag.is-note rect { fill: var(--surface-2); stroke: none; }
.sa-tag.is-note text { fill: var(--muted); }
.sa-tag.is-ok rect { fill: var(--ok-bg); stroke: none; }
.sa-tag.is-ok text { fill: var(--ok-ink); }
.sa-tag.is-bad rect { fill: var(--bad-bg); stroke: none; }
.sa-tag.is-bad text { fill: var(--bad); }
.sa-tag.is-warn rect { fill: var(--gold-bg); stroke: none; }
.sa-tag.is-warn text { fill: var(--gold-ink); }
.sa-pip circle { fill: var(--brand); }
.sa-pip text { font-size: 12px; font-weight: 700; fill: var(--brand-ink); }
.sa-chip-t { font-size: 15px; font-weight: 700; fill: var(--text); }
.sa-key-t { font-size: 15px; font-weight: 700; fill: var(--text); }
.sa-bar-t, .sa-row-v { font-size: 12.5px; fill: var(--text); font-variant-numeric: tabular-nums; }
.sa-row-k { font-size: 12.5px; fill: var(--muted); }
.sa-plate-h { font-size: 13px; font-weight: 700; fill: var(--text); }
.sa-bulb-t { font-size: 15px; font-weight: 700; fill: var(--text); }

/* ------------------------------------------------------------------- pager */
.sa-pager { display: flex; justify-content: space-between; gap: .85rem; flex-wrap: wrap; }
.sa-pager a {
  display: grid; gap: .15rem; padding: .75rem 1rem; min-height: 44px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  color: inherit; text-decoration: none; max-width: 48%;
}
.sa-pager a:hover { border-color: var(--brand); }
.sa-pager-r { text-align: right; margin-left: auto; }
.sa-pager span { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sa-pager b { font-size: .95rem; }

/* --------------------------------------------------------------------- cta */
.sa-cta { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.sa-cta b { display: block; margin-bottom: .25rem; }
.sa-cta p { margin: 0; color: var(--muted); max-width: 52ch; line-height: 1.6; }
.sa-cta-btns { display: flex; gap: .55rem; flex-wrap: wrap; }

/* ------------------------------------------------------------------ mobile */
@media (max-width: 560px) {
  .sa-card { grid-template-columns: 1fr; }
  .sa-card-ico { width: 36px; height: 36px; }
  .sa-card-n { grid-column: 1; }
  .sa-task { padding: 1rem .95rem; }
  .sa-pager a { max-width: 100%; flex: 1 1 100%; }
  .sa-pager-r { text-align: left; margin-left: 0; }
  /* The figures carry labelled text, so they have a legibility floor: below this
     the tags collide rather than shrink gracefully. Scrolling one figure inside
     its own box is the lesser evil — and the page body never scrolls sideways. */
  .sa-fig { overflow-x: auto; }
  .sa-fig svg { min-width: 460px; }
}

@media (prefers-reduced-motion: reduce) {
  .sa-card, .sa-pager a { transition: none; }
  .sa-card:hover { transform: none; }
}