/* === Chief A.I., Oh! · AI Basics — page-specific styles ===
   The pages use the shared brand system as their single source of truth.
   This file holds ONLY the few components the brand system does not
   provide: the glossary UI, the step sequence, the highlighted-card
   variant, and the 5th ladder tier. Everything else is brand.css. */

@import url("../brand/tokens.css");
@import url("../brand/brand.css");

/* === Glossary (AI-Basics only) === */
.gloss-search{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-lg);padding:12px 16px;margin:14px 0 18px;position:sticky;top:70px;z-index:10;box-shadow:var(--shadow-1)}
.gloss-search input{flex:1;background:transparent;border:none;outline:none;color:var(--ink);font-size:1rem;font-family:var(--sans)}
.gloss-search input::placeholder{color:var(--ink-mute)}
.gloss-search .badge{font-family:var(--mono);font-size:.7rem;color:var(--ink-mute);letter-spacing:.18em;text-transform:uppercase;padding:4px 9px;border:1px solid var(--rule);border-radius:var(--r-pill)}

.gloss-letters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.gloss-letters a{font-family:var(--mono);font-size:.78rem;color:var(--ink-soft);padding:5px 10px;border-radius:var(--r-sm);border:1px solid var(--rule);background:var(--paper);text-decoration:none}
.gloss-letters a:hover{border-color:var(--accent);color:var(--ink);text-decoration:none}

.gloss-list{display:grid;gap:10px}
.gterm{padding:16px 18px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--paper);scroll-margin-top:150px;box-shadow:var(--shadow-1)}
.gterm.hide{display:none}
.gterm h4{margin:0 0 4px;font-family:var(--serif);font-size:1.1rem;display:flex;align-items:center;gap:10px;color:var(--ink)}
.gterm .tag{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-pill);background:var(--paper-soft);border:1px solid var(--rule);color:var(--ink-soft);font-weight:600}
.gterm .tag.foundations{color:var(--ok);border-color:rgba(47,143,107,.4)}
.gterm .tag.prompting{color:var(--accent-deep);border-color:rgba(226,161,50,.5)}
.gterm .tag.llms{color:var(--secondary);border-color:rgba(61,46,90,.4)}
.gterm .tag.intermediate{color:var(--t-mcp);border-color:rgba(181,61,122,.4)}
.gterm .tag.adjacent{color:var(--warn);border-color:rgba(201,119,50,.4)}
.gterm p{margin:0;color:var(--ink-soft);font-size:.95rem}

.gloss-empty{padding:24px;text-align:center;color:var(--ink-mute);border:1px dashed var(--rule);border-radius:var(--r-lg);display:none;font-family:var(--mono);font-size:.9rem}
.gloss-empty.show{display:block}
.gterm-letter{font-family:var(--serif);font-weight:700;font-size:1.6rem;color:var(--secondary);margin:28px 0 8px;padding-bottom:6px;border-bottom:2px solid var(--accent);scroll-margin-top:130px}

/* === Step sequence (no brand equivalent) === */
.steps{display:grid;gap:12px;margin-top:16px}
.step{display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:start;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-md);padding:16px;box-shadow:var(--shadow-1)}
.step .b{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:1.1rem;background:var(--secondary);color:var(--paper)}
.step.alt .b{background:var(--accent);color:var(--ink)}
.step h4{margin:0 0 6px;font-family:var(--serif);font-weight:600;font-size:1.05rem;color:var(--ink)}
.step p{margin:0;color:var(--ink-soft)}

/* === Highlighted card (brand has .bcard, no .hl variant) === */
.bcard.hl{border-color:var(--accent);background:linear-gradient(180deg,var(--paper-soft),var(--paper));box-shadow:var(--shadow-2)}

/* === 5th ladder tier (brand defines r1–r4 only) === */
.rung.r5{border-left-color:var(--t-skill)}
.rung.r5 .lab .num{background:var(--t-skill)}