/* =====================================================================
   ScanMyCar — code-explainer pages (docs/codes/*). Additions on top of
   ../styles.css only: the big code heading, the safety-verdict badge
   (green / amber / red), the live-data pivot, and the library grid.
   Pages link ../fonts.css + ../styles.css first, then this file.
   ===================================================================== */

/* ---- page heading: the code big in Orbitron amber ------------------- */
.codehead__code {
  display: block; font-family: var(--font-display); font-weight: 700;
  color: var(--amber); line-height: 1; letter-spacing: .04em;
  font-size: clamp(2.8rem, 2rem + 4vw, 4.6rem);
  font-variant-numeric: tabular-nums;
}
.codehead__title {
  display: block; margin-top: .9rem; color: var(--text);
  font-weight: 600; line-height: 1.25;
  font-size: clamp(1.15rem, 1rem + 1vw, 1.7rem);
}

/* ---- safety-verdict badge ------------------------------------------- */
.verdict {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-body); font-weight: 700; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 999px; padding: .32rem .85rem;
}
.verdict::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.verdict--ok      { color: var(--green); }
.verdict--soon    { color: var(--amber); }
.verdict--caution { color: var(--red); }
.verdict-line { margin-top: 1.4rem; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }

/* ordering hints under section headings ("most likely first" etc.) */
.legal__body .secnote { color: var(--dim); font-size: .85rem; margin-top: .5rem; }

/* ---- the live-data pivot to the app --------------------------------- */
.legal__body .pivot {
  margin-top: 1.2rem; padding: .9rem 1.1rem; color: #cdd2d6;
  background: var(--surface); border: 1px solid var(--bezel);
  border-left: 2px solid var(--amber); border-radius: var(--r-sm);
  font-size: .98rem;
}

/* ---- code library grid (codes/index.html) --------------------------- */
.codegrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: .9rem; margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
.codecard {
  display: flex; flex-direction: column; gap: .45rem; text-decoration: none;
  background: var(--surface); border: 1px solid var(--bezel); border-radius: var(--r);
  padding: 1.05rem 1.15rem;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.codecard:hover { border-color: var(--amber); background: var(--surface-2); }
.codecard__code {
  font-family: var(--font-mono); font-weight: 700; font-size: 1.25rem;
  color: var(--amber); letter-spacing: .02em;
}
.codecard__name { color: #cdd2d6; font-size: .95rem; line-height: 1.35; flex: 1; }
.codecard .verdict { align-self: flex-start; margin-top: .4rem; font-size: .64rem; padding: .2rem .6rem; }