/* Certification guides (cert-guide.html) and the track tiles on certifications.html.
   cert-guide.html draws every screen with the walk-through engine's class names, so the stage,
   chevron bar, answer tiles and Back / Continue come from assets/os-walkthrough.css (linked first).
   This file adds only what that file expects from the Workspace shell (os.css) and this page does
   not load: the .panel and .btn bases and three variables. Those bases sit in :where() so they
   can never outrank a walk-through rule. Below them are the cert-guide parts that have no
   walk-through twin: track rows, checklist tiles, notes, the fix list. Colors come from the
   --guide-* tokens that os-walkthrough.css defines on .walk. */
.cg-page{margin:0;background:#f5f7fa;color:#15181d;font:450 16px/1.55 "DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
.cg-page *{box-sizing:border-box}
.cg-page main.cg-wrap{max-width:680px;margin:0 auto;padding:24px 20px 72px}
.cg-page :focus-visible{outline:3px solid #c4a35a;outline-offset:3px}
.cg-page a{color:#162438}
html.fedm8-embed .cg-page header,html.fedm8-embed .cg-page .site-top,html.fedm8-embed .cg-page .site-trust{display:none!important}

/* ---- what os.css gives the Workspace walk-through ---- */
.walk{--bg:#eef3f8;--radius:12px;--font-sans:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
:where(.walk button){font-family:inherit;cursor:pointer;margin:0}
:where(.walk input){font-family:inherit}
.cg-page .walk.panel{border-style:solid;border-width:1px;border-radius:var(--radius);padding:22px 24px;margin:0 0 20px}
:where(.walk .btn){background:var(--gold);color:var(--navy);border:0;font-size:15px;font-weight:600;line-height:1.3;padding:8px 18px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
:where(.walk .btn:hover){background:#e0be5c}
:where(.walk .btn:disabled){opacity:.5;cursor:not-allowed}
/* The gold buttons are the official-site links. Secondary buttons are white with a blue edge, like Back. */
.cg-page .walk a.btn{text-decoration:none}
.cg-page .walk a.btn.walk-official{color:var(--navy)}
.cg-page .walk .btn.ghost{background:#fff;border:1.5px solid #1f6fb5;color:#1f6fb5;font-weight:700}
.cg-page .walk .btn.ghost:hover{background:#e8f1fb}
/* The gold focus ring is 2:1 on the light blue stage. Blue is 4.7:1 on the stage and 5:1 on a white tile. */
.cg-page .walk :focus-visible{outline:3px solid #2b6cb0;outline-offset:2px}
/* Working headings are DM Sans here, as in the Workspace. theme.css sets serif on every h1 and h2.
   Balanced and pretty wrapping keep centered lines even and stop a one-word last line. */
.cg-page .walk .walk-ask{font-family:var(--font-sans);letter-spacing:0;text-wrap:balance}
.cg-page .walk .walk-help{text-wrap:pretty}

/* ---- step screen: top row ---- */
.cg-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px;font-size:14px}
.cg-all{text-decoration:none;font-weight:650}
.cg-all:hover{text-decoration:underline}
.cg-track-name{margin:0;font:450 14px/1.4 "DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:0;color:#4b5361;text-align:right}

/* ---- track picker: walk-option tiles with a number and a status ---- */
.cg-picker .walk-help{margin-bottom:18px}
.cg-tracks{margin:0}
.cg-page .walk-picker-item.cg-track{flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:14px;text-align:left;padding:16px 18px}
.cg-num{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--guide-current);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center;margin-top:2px}
.cg-track-body{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.cg-track .cg-track-title{font-size:17px;font-weight:700;color:#12263f}
.cg-who{font-size:14.5px;color:var(--ink-2)}
.cg-meta{font-size:13px;color:var(--ink-2)}
.cg-pill{align-self:flex-start;margin-top:4px;font-size:12px;font-weight:650;color:#8a6a00;background:#fff4d9;padding:2px 9px;border-radius:999px}
.cg-pill.done{color:#14693a;background:#e9f7ee}

/* ---- step screen: stage content ---- */
.cg-links{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 14px}
.cg-links .btn{margin:0;display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:44px}
.cg-checks{list-style:none;margin:6px 0 14px;padding:0;display:grid;gap:10px}
.cg-tile{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;min-height:52px;background:var(--guide-tile);border:1.5px solid var(--guide-tile-line);border-radius:8px;box-shadow:var(--guide-shadow);color:var(--ink);font-size:16px;line-height:1.45;cursor:pointer}
.cg-tile:hover{border-color:var(--guide-done)}
.cg-tile.is-checked{background:var(--guide-tile-on);border-color:var(--guide-done);box-shadow:inset 0 0 0 1px var(--guide-done)}
.cg-tile input{flex:0 0 auto;width:22px;height:22px;margin:1px 0 0;accent-color:var(--guide-done);cursor:pointer}
.cg-tile span{text-wrap:pretty}
.cg-tile.is-checked span{color:var(--guide-current)}
@supports selector(:has(a)){
  .cg-tile:has(input:focus-visible){outline:3px solid #2b6cb0;outline-offset:2px}
  .cg-tile input:focus-visible{outline:none}
}
.cg-didit{margin:6px 0 14px;font-weight:650}
.cg-note{display:none;margin:14px 0 4px;padding:12px 14px;border-radius:8px;background:#fff;border:1px solid var(--guide-stage-line);border-left:4px solid var(--guide-done);box-shadow:var(--guide-shadow);color:var(--ink);text-align:left}
.cg-note.show{display:block}
.cg-note.stop{background:#fff8e6;border-color:#e6c876;border-left-color:#b7791f;color:#5c4700}
.cg-note.stop b::before{content:"";display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:50%;background:#d69e2e}
.cg-note .cg-action{margin:12px 0 0}
.cg-note .cg-action .btn{min-height:44px}
.cg-fix,.cg-sources{margin:16px 0 0;padding:12px 14px;border-radius:8px;background:#fff;border:1px solid var(--guide-stage-line);box-shadow:var(--guide-shadow);color:var(--ink);text-align:left}
.cg-fix{background:#fff8e6;border-color:#e6c876;border-left:4px solid #b7791f;color:#5c4700}
.cg-fix h3,.cg-sources h3{margin:0 0 6px;font-size:15px;font-weight:700;color:#12263f}
.cg-fix h3{color:#5c4700}
.cg-fix ul,.cg-sources ul,.cg-help ul{margin:0;padding-left:20px}
/* A button is one atomic box, so a bullet beside a wrapped button sits on its last line. Block rows need no bullet. */
.cg-fix ul{list-style:none;padding:0}
.cg-fix .cg-link{display:block;width:100%;min-height:44px;padding:10px 0;color:#5c4700}
.cg-next{margin-top:16px}
.cg-page .walk a.cg-next-link{text-decoration:none;color:var(--ink)}
.cg-link{font:inherit;text-align:left;background:none;border:0;padding:4px 0;color:#162438;text-decoration:underline;cursor:pointer}
.cg-reset{display:block;margin:6px auto 0}
.cg-help{margin-top:8px;padding:16px 18px;border:1px solid #d9e0ea;border-radius:12px;background:#fffffe}
.cg-help h2{font:700 15px/1.3 "DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:0;margin:0 0 8px;color:#060d18}
.cg-help li{margin-bottom:4px}
.cg-foot{font-size:13px;color:#4f5a6b;margin:18px 0 0}

/* ---- the jump list: a state pill that needs a fix ---- */
.walk-pill-stop{background:#fff1cc;color:#5c4700}
.walk-steps-row-q{min-width:0}

/* tiles on certifications.html */
.cert-tracks{margin:0 0 20px;padding:18px 18px 16px;border:1px solid #e3e8ef;border-radius:12px;background:#fffffe}
.cert-tracks h2{font-size:18px;color:#060d18;margin:0 0 4px}
.cert-tracks p{font-size:14.5px;color:#4b5361;margin:0 0 12px}
.cert-tracks ol{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.cert-tracks a{display:block;height:100%;padding:11px 14px;border:1px solid #d9e0ea;border-radius:8px;text-decoration:none;color:#060d18;font-weight:650;font-size:15px}
.cert-tracks a:hover{border-color:#c4a35a}
.cert-tracks a .sub{display:block;font-weight:450;font-size:13px;color:#4b5361}

@media (max-width:700px){
  .cg-page .walk.panel{padding:20px 16px}
}
@media (max-width:520px){
  .cg-top{flex-direction:column;gap:2px}
  .cg-track-name{text-align:left}
  .cg-page .walk-picker-item.cg-track{padding:14px}
}
.cg-footer{background:#060d18;color:#c9d4e2;font-size:13px}
.cg-wrap-foot{max-width:680px;margin:0 auto;padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.cg-footer a{color:#e0c57a}