/* training.css — pieces specific to the Foundations module and the Keep learning page.
   Colors and type come from tokens.css; base components (tier cards, form fields,
   buttons, footer) come from main.css. */

/* ---------- utilities ---------- */
[hidden] { display: none !important; }   /* beats display:flex/grid on components */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--accent);
  color: #fff; padding: 10px 16px; border-radius: var(--radius); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* Keyboard focus and #anchors scroll to just below the sticky step bar instead of
   landing underneath it (WCAG 2.4.11). Tall enough for the bar when it wraps on a phone. */
html { scroll-padding-top: 88px; }

/* 16px phone gutter (main.css uses 20px) */
section, .hero, .block { padding-left: 16px; padding-right: 16px; }

/* ---------- pilot banner ---------- */
.pilot { background: #1a1508; border-bottom: 1px solid rgba(247,203,83,.35); color: var(--gold-text);
  font-size: .86rem; font-weight: 600; text-align: center; padding: 9px 16px; margin: 0; }

/* ---------- step bar ---------- */
.stepbar { position: sticky; top: 0; z-index: 50; background: var(--canvas);
  border-bottom: 1px solid var(--line); padding: 10px 16px; }
.stepbar-in { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center;
  justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.stepbar-label { margin: 0; font-size: .86rem; font-weight: 700; color: var(--ink); }
.stepbar-dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.sdot { display: block; width: 24px; height: 24px; padding: 0; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--ink-dim); background: transparent; transition: background .2s, border-color .2s; }
.sdot.is-open { background: rgba(218,56,54,.35); border-color: var(--accent); }
.sdot[aria-current="step"] { background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 10px rgba(218,56,54,.6); }
.sdot[aria-disabled="true"] { opacity: .35; cursor: not-allowed; }

/* ---------- steps ---------- */
.step { padding-top: clamp(36px, 6vw, 72px); padding-bottom: clamp(56px, 8vw, 96px); }
.step.hero { padding-top: clamp(72px, 10vw, 120px); padding-bottom: clamp(72px, 10vw, 120px);
  min-height: calc(100vh - 40px); display: flex; flex-direction: column; justify-content: center; }
.step h2 { margin-bottom: 18px; }
h1[tabindex="-1"]:focus:not(:focus-visible), h2[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

.rule { margin: 26px 0; padding: 20px 24px; border-left: 4px solid var(--accent-2);
  background: rgba(247,203,83,.06); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: clamp(1.1rem, 2.4vw, 1.35rem); font-weight: 700; color: #fff; line-height: 1.4; max-width: 62ch; }
.list { margin: 0 0 20px; padding-left: 22px; max-width: 62ch; }
.list li { margin: 0 0 10px; font-size: 1.02rem; }
.list b { color: #fff; }
.minor { font-size: 1.15rem; margin: 30px 0 8px; color: #fff; }
.callout { margin: 22px 0; padding: 16px 20px; border-left: 3px solid var(--accent);
  background: rgba(218,56,54,.07); border-radius: 0 var(--radius) var(--radius) 0; max-width: 62ch; }
.callout b { color: #fff; }
.body a, .list a, .welcome-alt a, .qr-item a, .callout a { color: var(--gold-text); font-weight: 700; }

.tools-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 4px 0 24px; }
.tool-card { padding: 18px 20px; background: var(--canvas-2); border: 1px solid var(--line);
  border-top: 3px solid var(--accent); border-radius: var(--radius); }
.tool-card b { display: block; color: #fff; font-size: 1.1rem; }
.tool-card small { color: var(--ink-dim); font-size: .92rem; }
@media (max-width: 560px) { .tools-row { grid-template-columns: 1fr; } }

.takeaways { list-style: none; counter-reset: tk; padding: 0; margin: 20px 0 24px; display: grid; gap: 12px; }
.takeaways li { counter-increment: tk; display: grid; grid-template-columns: auto 1fr; gap: 16px;
  padding: 18px 20px; background: var(--canvas-2); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; }
.takeaways li::before { content: "0" counter(tk); color: var(--red-bright); font-weight: 800;   /* accent-text is only 4.43:1 on canvas-2 */
  font-variant-numeric: tabular-nums; }
.takeaways b { color: #fff; }

/* ---------- welcome ---------- */
.welcome-facts { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 10px; max-width: 58ch; }
.welcome-facts li { padding-left: 22px; position: relative; }
.welcome-facts li::before { content: ""; position: absolute; left: 0; top: .55em; width: 9px; height: 9px;
  border-radius: 2px; background: var(--accent); }
.welcome-facts b { color: #fff; }
.resume-note { color: var(--gold-text); font-weight: 600; margin: 0 0 14px; }
.welcome-alt { margin: 24px 0 0; color: var(--ink-dim); font-size: .95rem; }

/* ---------- buttons ---------- */
button.cta { border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.ghost { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 24px;
  border: 1px solid var(--line); border-radius: var(--radius); background: transparent; color: var(--ink);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: border-color .18s, background .18s; }
.ghost:hover { border-color: var(--accent); background: var(--canvas-2); }
/* main.css hover is white on #ef4a47 = 3.66:1 (fails AA). A darker fill keeps white text at 5.62:1.
   If you change this hex, update the "white on the .cta:hover fill" pair in tests/ai-training/contrast.test.js. */
.cta:hover, .submit:hover { background: #c22f2d; }
.cta[aria-disabled="true"] { opacity: .45; box-shadow: none; transform: none; cursor: not-allowed; }
.step-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 36px;
  padding-top: 24px; border-top: 1px solid var(--line); }
.step-nav .next { margin-left: auto; }
.next-hint { flex-basis: 100%; margin: 0; color: var(--gold-text); font-size: .92rem; font-weight: 600; text-align: right; }
/* Live regions must stay RENDERED while empty (display:none removes them from the accessibility
   tree, so the first announcement can be dropped). Collapse them visually instead. The empty hint
   is taken out of the flex flow, otherwise its 100% basis would wrap onto its own row + gap. */
.next-hint:empty { position: absolute; margin: 0; }

/* ---------- checks ---------- */
.check-box { margin: 30px 0 0; padding: 22px 22px 18px; border: 1px solid var(--line);
  border-top: 3px solid var(--accent-2); border-radius: var(--radius); background: var(--canvas-2); min-width: 0; }
.check-box legend { float: left; width: 100%; padding: 0; margin: 0 0 14px; font-weight: 700;
  font-size: 1.04rem; color: #fff; line-height: 1.45; }
.check-tag { display: inline-block; margin-right: 6px; padding: 2px 9px; border-radius: 999px;
  background: rgba(247,203,83,.14); color: var(--gold-text); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; vertical-align: 2px; }
.check-opts { clear: both; display: grid; gap: 8px; }
.check-opt { display: block; width: 100%; min-height: 48px; text-align: left; position: relative;
  padding: 12px 16px 12px 46px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--canvas); color: var(--ink); font: inherit; font-size: .98rem; line-height: 1.45;
  cursor: pointer; transition: border-color .16s, background .16s; }
.check-opt::before { content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px;
  margin-top: -9px; border: 2px solid var(--ink-dim); border-radius: 50%; box-sizing: border-box;
  font-size: 11px; line-height: 14px; text-align: center; font-weight: 800; }
.check-opt:hover:not(:disabled) { border-color: var(--ink-dim); background: var(--canvas-3); }
.check-opt.is-wrong { border-color: var(--error); background: rgba(255,107,94,.08); }
.check-opt.is-wrong::before { content: "\2715"; border-color: var(--error); color: var(--error); }
.check-opt.is-right { border-color: var(--ok); background: rgba(127,209,163,.10); color: #fff; font-weight: 600; }
.check-opt.is-right::before { content: "\2713"; border-color: var(--ok); background: var(--ok); color: #0b0d0e; }
.check-opt:disabled { opacity: .45; cursor: default; }
.check-fb { margin: 14px 0 0; font-size: .96rem; line-height: 1.5; }
.check-fb:empty { margin: 0; }   /* live region: stays rendered (see .next-hint:empty), no visible gap */
.check-fb.bad { color: #ffd7d2; }
.check-fb.good { color: #d6f2e3; }

/* ---------- sign-off ---------- */
input[type=email], select { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line);
  background: var(--canvas-2); color: var(--ink); border-radius: var(--radius); font: inherit; }
input[type=text] { min-height: 48px; }
input[type=email]:focus, select:focus { outline: none; border-color: var(--accent); background: var(--canvas-3);
  box-shadow: 0 0 0 3px rgba(218,56,54,.18); }
input[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--error); }
.ack input[aria-invalid="true"] { outline: 2px solid var(--error); outline-offset: 2px; }
.field-err { margin: 8px 0 0; color: var(--error); font-size: .9rem; font-weight: 600; }
.field-err:empty { display: none; }

/* #status is a live region (role="status"): main.css hides it with display:none until it has text,
   which can drop the first announcement. Keep it rendered but collapsed while empty; once it has
   text, main.css's #status.err / #status.ok styling applies as before. */
#status:empty { display: block; padding: 0; margin: 0; border: 0; }
#status.sending { display: block; color: var(--ink-dim); background: transparent; border: 1px solid var(--line); }

/* ---------- Keep learning ---------- */
.jump { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
.jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--ink); text-decoration: none;
  font-weight: 700; font-size: .92rem; }
.jump a:hover { border-color: var(--accent); background: var(--canvas-2); }
.qr-lead { font-size: 1.12rem; max-width: 62ch; margin: 0 0 8px; }
.qr-lead b { color: #fff; }
.qr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 20px; }
.qr-item { padding: 18px 20px; background: var(--canvas-2); border: 1px solid var(--line); border-radius: var(--radius); }
.qr-item h3 { margin: 0 0 6px; font-size: 1rem; color: #fff; }
.qr-item p { margin: 0; color: var(--ink-dim); font-size: .94rem; line-height: 1.5; }
@media (max-width: 620px) { .qr-grid { grid-template-columns: 1fr; } }
.res-group { margin: 32px 0 12px; font-size: 1.1rem; color: #fff; }
.res-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .res-list { grid-template-columns: 1fr; } }
.res-card { padding: 18px 20px; background: var(--canvas-2); border: 1px solid var(--line);
  border-top: 3px solid var(--accent); border-radius: var(--radius); }
.res-meta { margin: 0 0 6px; color: var(--ink-dim); font-size: .8rem; font-weight: 600; }
.res-card h4 { margin: 0 0 8px; font-size: 1.02rem; line-height: 1.35; }
.res-card h4 a { color: #fff; text-decoration: none; }
.res-card h4 a:hover { color: var(--gold-text); text-decoration: underline; }
.res-card p { margin: 0; color: var(--ink-dim); font-size: .92rem; line-height: 1.5; }
.res-card .res-note { margin-top: 10px; color: var(--gold-text); font-size: .86rem; }
.role-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 8px; }
@media (max-width: 680px) { .role-grid { grid-template-columns: 1fr; } }
.role-card { padding: 20px 22px; background: var(--canvas-2); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; }
.role-card h3 { margin: 0 0 4px; font-size: 1.05rem; color: #fff; display: flex; flex-wrap: wrap;
  align-items: baseline; gap: 4px 10px; }
.soon { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-text); }
.role-sub { margin: 0 0 8px; color: var(--ink-dim); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; }
.role-card ul { margin: 0 0 12px; padding-left: 18px; }
.role-card li { font-size: .94rem; margin-bottom: 6px; }
.role-guard { margin: 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--ink-dim); font-size: .9rem; }
.role-guard b { color: var(--gold-text); }