/* Pedagrade learning diagrams. Shared by guides, check pages, accuracy, and home.
   Plain HTML + CSS. Interactivity uses <details>/<summary>, so everything works without JavaScript
   and with a keyboard. Colors come from site.css tokens. */

.lv{margin:28px 0 32px; border:1px solid var(--rule); background:var(--card); border-radius:14px; padding:22px 24px 18px;}
.lv-k{font-family:var(--mono); font-size:11.5px; font-weight:500; color:var(--indigo); margin:0 0 4px;}
.lv-t{font-family:var(--display); font-size:22px; font-weight:500; line-height:1.25; color:var(--ink); margin:0 0 4px;}
.lv-sub{font-size:14.5px; color:var(--muted); margin:0 0 18px;}
.lv-cap{font-size:13.5px; color:var(--muted); margin:14px 0 0;}
.lv-hint{font-family:var(--mono); font-size:11.5px; color:var(--muted); margin:12px 0 0;}
.lv details > summary{list-style:none; cursor:pointer;}
.lv details > summary::-webkit-details-marker{display:none;}
.lv details > summary:focus-visible{outline:2px solid var(--indigo); outline-offset:3px; border-radius:8px;}
.lv .more{font-size:14px; line-height:1.5; color:var(--body); margin:10px 0 0;}

/* status colors */
.is-ok{--c:var(--pass); --cs:var(--pass-soft);}
.is-gap{--c:var(--gap); --cs:var(--gap-soft);}
.is-miss{--c:var(--miss); --cs:var(--miss-soft);}
.is-n{--c:var(--muted); --cs:var(--soft);}
.tag{display:inline-block; font-family:var(--mono); font-size:11px; font-weight:500; color:var(--c); background:var(--cs); padding:2px 8px; border-radius:999px;}

/* 1. Chain: objective -> taught -> practiced -> assessed */
.chain{display:grid; grid-template-columns:repeat(var(--n,4), minmax(0,1fr)); gap:10px; position:relative;}
.chain > details{position:relative; background:var(--cs); border:1.5px solid var(--cs); border-radius:12px; padding:12px 14px;}
.chain > details[open]{border-color:var(--c);}
.chain > details:not(:last-child)::after{content:"→"; position:absolute; right:-10px; top:16px; transform:translateX(50%); color:var(--muted); font-size:20px; font-weight:700; z-index:1;}
.chain > details.is-miss{background:var(--card); border:1.5px dashed var(--c);}
.chain .nl{display:block; font-family:var(--mono); font-size:11px; font-weight:500; color:var(--c);}
.chain .nv{display:block; font-size:15px; font-weight:600; color:var(--ink); margin-top:3px; line-height:1.3;}
.chain .more{font-size:13.5px;}

/* 2. Ladder: Bloom's levels, low to high, with markers */
.ladder{display:flex; flex-direction:column-reverse; gap:6px;}
.ladder > details{display:block; margin-left:calc(var(--i,0) * 7%); background:var(--soft); border:1.5px solid transparent; border-radius:10px; padding:9px 14px;}
.ladder > details[open]{border-color:var(--rule);}
.ladder .lvl{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.ladder .ln{font-weight:600; color:var(--ink); font-size:15px; min-width:96px;}
.ladder .lverbs{font-size:13.5px; color:var(--muted);}
.ladder .mk{margin-left:auto; display:flex; gap:6px;}
.ladder > details.is-ok{background:var(--pass-soft);}
.ladder > details.is-miss{background:var(--miss-soft);}
.ladder .more{font-size:13.5px;}

/* 3. Flow: steps with arrows, one or more rows */
.flow{display:grid; gap:10px;}
.flow .row{display:grid; grid-template-columns:repeat(var(--n,3), minmax(0,1fr)); gap:10px;}
.flow .st{position:relative; background:var(--cs, var(--soft)); border-radius:12px; padding:12px 14px; font-size:14.5px; color:var(--ink); line-height:1.4;}
.flow .st b{display:block; font-size:15px;}
.flow .st small{display:block; color:var(--muted); font-size:13px; margin-top:2px;}
.flow .st:not(:last-child)::after{content:"→"; z-index:1; position:absolute; right:-10px; top:50%; transform:translate(50%,-50%); color:var(--muted); font-size:20px; font-weight:700;}
.flow .rl{font-family:var(--mono); font-size:11px; color:var(--muted); margin:6px 0 -4px;}

/* 4. Timeline: numbered events (Gagné) */
.tl{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--n,9), minmax(0,1fr)); gap:6px; counter-reset:ev;}
.tl > li{counter-increment:ev;}
.tl details{height:100%; background:var(--soft); border:1.5px solid transparent; border-radius:10px; padding:10px 8px 10px; text-align:center;}
.tl details[open]{border-color:var(--rule);}
.tl summary::before{content:counter(ev); display:flex; align-items:center; justify-content:center; width:28px; height:28px; margin:0 auto 6px; border-radius:99px; background:var(--ink); color:#fff; font-family:var(--mono); font-size:13px;}
.tl .is-gap summary::before, .tl details.is-gap summary::before{background:var(--gap);}
.tl details.is-gap{background:var(--gap-soft);}
.tl .en{display:block; font-size:13px; font-weight:600; color:var(--ink); line-height:1.25;}
.tl .more{font-size:13px; text-align:left;}
.tl-phase{display:grid; grid-template-columns:var(--cols); gap:6px; margin-top:8px; font-family:var(--mono); font-size:11px; color:var(--muted); text-align:center;}
.tl-phase span{border-top:2px solid var(--rule); padding-top:6px;}

/* 5. Buckets: columns of grouped items (Mayer) */
.bk{display:grid; grid-template-columns:repeat(var(--n,3), minmax(0,1fr)); gap:10px;}
.bk > div{background:var(--cs, var(--soft)); border-radius:12px; padding:14px 16px;}
.bk h4{margin:0 0 2px; font-size:15.5px; color:var(--ink);}
.bk p.goal{margin:0 0 10px; font-size:13.5px; color:var(--muted);}
.bk details{border-top:1px solid var(--rule); padding:8px 0;}
.bk summary{font-size:14px; font-weight:600; color:var(--ink);}
.bk summary::after{content:"+"; float:right; color:var(--muted); font-weight:400;}
.bk details[open] summary::after{content:"–";}
.bk .more{font-size:13.5px; margin-top:4px;}

/* 6. Lanes: two stages side by side (WCAG design vs build) */
.lanes{display:grid; grid-template-columns:repeat(var(--n,2), minmax(0,1fr)); gap:10px;}
.lanes > div{border:1px solid var(--rule); border-radius:12px; padding:14px 16px;}
.lanes h4{margin:0 0 2px; font-size:15.5px; color:var(--ink);}
.lanes p.who{margin:0 0 10px; font-size:13.5px; color:var(--muted);}
.lanes ul{margin:0; padding:0; list-style:none;}
.lanes li{font-size:14px; color:var(--body); padding:6px 0; border-top:1px solid var(--soft);}
.lanes li b{color:var(--ink);}

/* 7. Bars: caught vs false alarms */
.bars{display:grid; gap:12px;}
.bars .br{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,2fr); gap:14px; align-items:center;}
.bars .bl{font-size:14.5px; color:var(--ink); font-weight:600; line-height:1.3;}
.bars .bl small{display:block; font-weight:400; color:var(--muted); font-size:12.5px;}
.bars .track{position:relative; height:12px; background:var(--soft); border-radius:99px; overflow:hidden;}
.bars .fill{position:absolute; inset:0 auto 0 0; width:var(--v); background:var(--c); border-radius:99px;}
.bars .bv{display:flex; justify-content:space-between; font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:4px;}
.bars .bv b{color:var(--c); font-weight:500;}
.bars-legend{display:flex; gap:16px; font-size:12.5px; color:var(--muted); margin:0 0 14px;}
.bars-legend i{display:inline-block; width:10px; height:10px; border-radius:3px; background:var(--c); margin-right:6px; vertical-align:-1px;}

/* 8. Ranking: severity tiers (Fix first / Should fix / Consider) */
.rank{display:grid; gap:8px;}
.rank > div{display:grid; grid-template-columns:150px minmax(0,1fr); gap:14px; align-items:start; background:var(--cs); border-radius:12px; padding:12px 16px;}
.rank .rn{font-weight:700; color:var(--c); font-size:15px;}
.rank p{margin:0; font-size:14px; color:var(--body);}

@media (max-width:720px){
  .lv{padding:18px 16px 14px;}
  .chain, .flow .row, .bk, .lanes{grid-template-columns:1fr;}
  .chain > details:not(:last-child)::after, .flow .st:not(:last-child)::after{content:"↓"; right:auto; left:50%; top:auto; bottom:-10px; transform:translate(-50%,50%);}
  .tl{grid-template-columns:repeat(3, minmax(0,1fr));}
  .tl-phase{display:none;}
  .ladder > details{margin-left:calc(var(--i,0) * 3%);}
  .ladder .mk{margin-left:0; width:100%;}
  .bars .br, .rank > div{grid-template-columns:1fr; gap:6px;}
}
@media print{ .lv details{display:block;} .lv details > *{display:block;} }