/* ══════════════════════════════════════════════════════════════════════
   UNIT REVIEW, 20 Oct 2026 — tabs, panels and boxed blocks.

   Robin: "Use clear white titles for sections, and boxed content to
   emphasize key concepts. Imagine an infographic."

   So: every panel title is WHITE with a coloured rule under it, and the
   content under it sits in BOXES that take the panel's colour. Nothing
   floats. The shell (dialog.urv-modal) and the question/streak rules
   (.urv-opt, .urv-scorebar, .urv-fb-in ...) are still in pageContent.css
   because look-back.js uses them; this file is only what the cram sheet
   adds, all under .ur2-*.

   Every tab, panel and pane sets --uh / --uh-rgb inline from its hue.
   ══════════════════════════════════════════════════════════════════════ */
dialog.ur2-modal{width:min(1180px,97vw)}

/* tab bar: pinned under the title, scrolls sideways on a narrow screen */
.ur2-tabs{display:flex;gap:.4rem;flex:none;overflow-x:auto;padding:.6rem 1.15rem;
  border-bottom:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.015)}
.ur2-tab{flex:none;font-family:inherit;font-size:.82rem;font-weight:800;letter-spacing:.02em;
  padding:.5rem .95rem;border-radius:10px;cursor:pointer;white-space:nowrap;
  border:1px solid rgba(var(--uh-rgb),.4);background:rgba(var(--uh-rgb),.07);color:var(--uh)}
.ur2-tab:hover{background:rgba(var(--uh-rgb),.16)}
.ur2-tab.on{background:var(--uh);color:#0a0a0f;border-color:var(--uh)}
.ur2-tab:focus-visible{outline:2px solid #fff;outline-offset:2px}

.ur2-pane[hidden]{display:none}
dialog.ur2-modal .ur2-body{padding:1.2rem 1.25rem 2.4rem}

/* hero: the tab's title and the big numbers */
.ur2-hero{margin:0 0 1.5rem}
.ur2-kick{display:block;font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;font-size:.64rem;
  font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--uh);margin-bottom:.2rem}
.ur2-h1{margin:0 0 .3rem;font-size:clamp(1.7rem,4.4vw,2.5rem);line-height:1.1;font-weight:900;
  color:#fff;letter-spacing:-.02em}
.ur2-tag{margin:0 0 1rem;font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.66);max-width:60ch}
.ur2-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem}
.ur2-stat{padding:.7rem .85rem;border-radius:14px;
  border:1px solid rgba(var(--uh-rgb),.5);background:rgba(var(--uh-rgb),.1);
  display:flex;flex-direction:column;gap:.15rem}
.ur2-stat b{font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;font-size:clamp(1.3rem,3vw,1.8rem);
  font-weight:800;line-height:1.1;color:var(--uh)}
.ur2-stat span{font-size:.78rem;line-height:1.35;color:rgba(255,255,255,.75)}

/* the grid of panels */
.ur2-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1.6rem 1.1rem}
.ur2-p{grid-column:span 6;min-width:0}
.ur2-p.s4{grid-column:span 4}.ur2-p.s5{grid-column:span 5}.ur2-p.s7{grid-column:span 7}
.ur2-p.s8{grid-column:span 8}.ur2-p.s12{grid-column:span 12}
@media(max-width:820px){.ur2-p,.ur2-p.s4,.ur2-p.s5,.ur2-p.s7,.ur2-p.s8{grid-column:span 12}}

/* THE TITLE: white, with a rule in the panel's colour */
.ur2-pt{margin:0 0 .75rem;padding:0 0 .4rem;font-size:1.2rem;line-height:1.25;font-weight:800;
  color:#fff;letter-spacing:-.01em;
  border-bottom:2px solid var(--uh)}
.ur2-pb{display:flex;flex-direction:column;gap:.6rem}

/* key idea: the loudest box */
.ur2-key{padding:.8rem 1rem;border-radius:14px;text-align:center;
  border:2px solid var(--uh);background:rgba(var(--uh-rgb),.12)}
.ur2-key-big{display:block;font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  font-size:clamp(1.25rem,3.2vw,1.75rem);font-weight:800;line-height:1.2;color:var(--uh)}
.ur2-key p{margin:.3rem 0 0;font-size:.88rem;line-height:1.5;color:rgba(255,255,255,.85)}
.ur2-key b{color:#fff}

/* place-value rail */
.ur2-rail-l{display:block;font-size:.62rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:.35rem}
.ur2-rail-cells{display:flex;gap:.3rem;flex-wrap:wrap}
.ur2-cell{min-width:2.5rem;text-align:center;padding:.4rem .45rem;border-radius:9px;
  font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;font-weight:800;font-size:.95rem;color:var(--uh);
  border:1px solid rgba(var(--uh-rgb),.5);background:rgba(var(--uh-rgb),.1)}

/* powers of two */
.ur2-pow{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:.35rem}
.ur2-pow-row{display:flex;align-items:baseline;gap:.3rem;padding:.45rem .6rem;border-radius:10px;
  border:1px solid rgba(var(--uh-rgb),.35);background:rgba(var(--uh-rgb),.07);
  font-size:.78rem;color:rgba(255,255,255,.6)}
.ur2-pow-row b{font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;font-size:1rem;color:#fff}
.ur2-pow-row b.v{color:var(--uh);margin-left:auto}
.ur2-pow-row i{font-style:normal;color:rgba(255,255,255,.35)}

/* fact rows: label, then the snippet */
.ur2-facts{display:grid;gap:.35rem}
.ur2-fact{display:grid;grid-template-columns:minmax(6.5rem,9rem) 1fr;gap:.7rem;align-items:baseline;
  padding:.5rem .75rem;border-radius:10px;
  border:1px solid rgba(var(--uh-rgb),.32);background:rgba(var(--uh-rgb),.06)}
@media(max-width:560px){.ur2-fact{grid-template-columns:1fr;gap:.1rem}}
.ur2-fact-k{font-size:.74rem;font-weight:800;letter-spacing:.03em;color:var(--uh);line-height:1.4}
.ur2-fact-v{font-size:.88rem;line-height:1.5;color:rgba(255,255,255,.82)}
.ur2-fact-v b{color:#fff;font-weight:700}

/* worked example: mono, left is the problem, right is the answer */
.ur2-ex{display:grid;gap:.3rem}
.ur2-ex-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:.7rem;align-items:baseline;
  padding:.5rem .75rem;border-radius:10px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;line-height:1.5}
@media(max-width:560px){.ur2-ex-row{grid-template-columns:1fr;gap:.1rem}}
.ur2-ex-l{color:rgba(255,255,255,.8)}
.ur2-ex-r{color:rgba(255,255,255,.9)}
.ur2-ex b{color:var(--uh);font-weight:800}

/* numbered steps: the one place order is real */
.ur2-steps{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;counter-reset:ur2s}
.ur2-steps li{counter-increment:ur2s;position:relative;padding:.5rem .75rem .5rem 2.6rem;border-radius:10px;
  border:1px solid rgba(var(--uh-rgb),.32);background:rgba(var(--uh-rgb),.06);
  font-size:.88rem;line-height:1.5;color:rgba(255,255,255,.84)}
.ur2-steps li::before{content:counter(ur2s);position:absolute;left:.6rem;top:.5rem;
  width:1.5rem;height:1.5rem;border-radius:50%;display:grid;place-items:center;
  font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;font-size:.78rem;font-weight:800;
  background:var(--uh);color:#0a0a0f}
.ur2-steps b{color:#fff}

/* the two-column compare */
.ur2-two{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
@media(max-width:620px){.ur2-two{grid-template-columns:1fr}}
.ur2-half{padding:.85rem 1rem;border-radius:14px;
  border:2px solid var(--uh);background:rgba(var(--uh-rgb),.09)}
.ur2-half.b{border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.05)}
.ur2-half-n{display:block;font-size:1.15rem;font-weight:900;color:var(--uh);margin-bottom:.3rem}
.ur2-half.b .ur2-half-n{color:#fff}
.ur2-half p{margin:0;font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.84)}
.ur2-half b{color:#fff}
.ur2-chips{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem}
.ur2-chips li{font-size:.76rem;font-weight:600;line-height:1.3;padding:.25rem .6rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.07);color:rgba(255,255,255,.88)}

/* "watch for": the test-day box */
.ur2-trap{border:2px solid var(--c-gold);background:rgba(var(--c-gold-rgb),.07);
  border-radius:14px;padding:.7rem .95rem .8rem}
.ur2-trap-k{display:block;font-family:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;font-size:.64rem;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--c-gold);margin-bottom:.35rem}
.ur2-trap ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.ur2-trap li{position:relative;padding-left:1.3rem;font-size:.88rem;line-height:1.5;color:rgba(255,255,255,.86)}
.ur2-trap li::before{content:'!';position:absolute;left:0;top:.12rem;width:.95rem;height:.95rem;
  border-radius:50%;display:grid;place-items:center;font-size:.65rem;font-weight:900;
  background:var(--c-gold);color:#0a0a0f}
.ur2-trap b{color:#fff}

/* sims */
.ur2-sims{display:grid;grid-template-columns:repeat(var(--n,1),minmax(0,1fr));gap:.8rem;align-items:start}
@media (max-width:640px){.ur2-sims{grid-template-columns:1fr}}
.ur2-sim.playing{grid-column:1/-1}
.ur2-sim{margin:0;padding:.55rem;border-radius:14px;
  border:1px solid rgba(var(--uh-rgb),.4);background:rgba(var(--uh-rgb),.05)}
.ur2-sim figcaption{font-size:.78rem;font-weight:800;letter-spacing:.02em;color:var(--uh);
  margin:0 0 .45rem .15rem}
.ur2-sim iframe{display:block;width:100%;border:0;border-radius:10px;background:#0a0a0f}
.ur2-play{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  width:100%;height:150px;border-radius:10px;cursor:pointer;font-family:inherit;
  border:2px dashed rgba(var(--uh-rgb),.6);background:rgba(var(--uh-rgb),.08);color:var(--uh)}
.ur2-play{position:relative;overflow:hidden;aspect-ratio:16/10;height:auto}
.ur2-play:hover{background:rgba(var(--uh-rgb),.18)}
.ur2-th{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92;transition:filter .15s}
.ur2-play:hover .ur2-th{filter:brightness(1.15)}
.ur2-play:has(.ur2-th){flex-direction:row;align-items:flex-end;justify-content:flex-end;gap:0;padding:.5rem}
.ur2-play:has(.ur2-th) .ur2-play-i,.ur2-play:has(.ur2-th) .ur2-play-t{position:relative;background:rgba(0,0,0,.78);color:var(--uh);line-height:1;padding:.5rem .55rem}
.ur2-play:has(.ur2-th) .ur2-play-i{font-size:1.1rem;border-radius:999px 0 0 999px;padding-left:.8rem}
.ur2-play:has(.ur2-th) .ur2-play-t{border-radius:0 999px 999px 0;padding-right:.9rem}
.ur2-play-i{font-size:2rem;line-height:1}
.ur2-play-t{font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase}

/* practice tab */
.ur2-say{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.4rem}
.ur2-say li{padding:.55rem .8rem;border-radius:10px;font-size:.88rem;font-weight:600;line-height:1.4;
  border:1px solid rgba(var(--uh-rgb),.4);background:rgba(var(--uh-rgb),.07);color:#fff}
.ur2-groups{display:flex;flex-wrap:wrap;gap:.35rem}
.ur2-grp{font-family:inherit;font-size:.8rem;font-weight:700;padding:.38rem .85rem;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.04);color:rgba(255,255,255,.8)}
.ur2-grp:hover{border-color:rgba(255,255,255,.55)}
.ur2-grp.on{background:var(--uh);border-color:var(--uh);color:#0a0a0f}

/* ══ 21 Oct 2026: the cram sheet is short; aria and the ladder are new ══ */
.ur3-main .ur2-grid{gap:1.2rem 1rem}
.ur3-ladder{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.ur3-step{display:grid;grid-template-columns:2.2rem 1fr auto;gap:.8rem;align-items:center;padding:.6rem .8rem;border-radius:12px;
  border:1px solid rgba(var(--uh-rgb),.4);background:rgba(var(--uh-rgb),.07)}
.ur3-step>i{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;font-style:normal;font-weight:800;
  font-family:'JetBrains Mono',ui-monospace,monospace;background:var(--uh);color:#0a0a0f}
.ur3-step.done>i{background:var(--c-green)}
.ur3-step.lock{opacity:.5;border-style:dashed}.ur3-step.lock>i{background:rgba(255,255,255,.25)}
.ur3-st b{display:block;font-size:.95rem;color:#fff}.ur3-st em{display:block;font-style:normal;font-size:.78rem;color:rgba(255,255,255,.6)}
.ur3-lk{font-size:.72rem;color:rgba(255,255,255,.55)}
.ur3-go,.ur3-back,.ur3-hint,.ur3-ask button{font-family:inherit;font-weight:700;font-size:.82rem;padding:.45rem .95rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--uh);background:rgba(var(--uh-rgb),.14);color:var(--uh)}
.ur3-go:hover,.ur3-back:hover,.ur3-hint:hover,.ur3-ask button:hover{background:rgba(var(--uh-rgb),.28)}
.ur3-sim iframe{height:auto}
.ur2-pane.staged .ur3-main,.ur2-pane.staged .ur2-hero{display:none}
.ur3-stage[hidden]{display:none}
.ur3-top{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:0 0 1rem;padding-bottom:.7rem;border-bottom:2px solid var(--uh)}
.ur3-where{font-size:.9rem;color:rgba(255,255,255,.8)}.ur3-where b{color:#fff}
.ur3-phase{margin-left:auto;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--uh)}
.ur3-load{color:rgba(255,255,255,.6)}
.ur3-tp{background:none;padding:0;margin:0;max-width:none;min-height:0}
.ur3-tp .lrn-pager,.ur3-tp .lrn-full{display:none}
.ur3-pipbar{display:flex;align-items:center;gap:.8rem;margin:0 0 .8rem}
.ur3-pips{display:flex;gap:.35rem}.ur3-pips i{width:1.6rem;height:.55rem;border-radius:4px;background:rgba(255,255,255,.18)}.ur3-pips i.on{background:var(--c-green)}
.ur3-need{font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.ur3-aria{display:flex;gap:.7rem;align-items:flex-end;margin:.6rem 0}
.ur3-aria>img{flex:none;width:2.8rem;height:2.8rem;border-radius:50%;object-fit:contain}
.ur3-ab{padding:.7rem 1rem;border-radius:16px 16px 16px 4px;background:#FF007F;color:#fff;font-size:.92rem;line-height:1.5;max-width:46rem}
.ur3-ab p{margin:.4rem 0 0}.ur3-ab b{color:#fff}
.ur3-aria.ok .ur3-ab{background:#0f7a43}.ur3-aria.no .ur3-ab{background:#FF007F}
.ur3-you{align-self:flex-end;margin:.5rem 0 .5rem auto;width:fit-content;max-width:80%;padding:.55rem .9rem;border-radius:16px 16px 4px 16px;background:#A100FF;color:#fff;font-size:.9rem}
.ur3-btns{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}
.ur3-help{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:.8rem 0 .2rem}
.ur3-ask{display:flex;gap:.4rem;flex:1;min-width:14rem}
.ur3-ask input{flex:1;min-width:0;padding:.5rem .8rem;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.05);color:#fff;font:inherit;font-size:.85rem}
.ur3-dots{display:inline-flex;gap:.3rem}.ur3-dots i{width:.5rem;height:.5rem;border-radius:50%;background:#fff;opacity:.6;animation:ur3d 1s infinite}
.ur3-dots i:nth-child(2){animation-delay:.15s}.ur3-dots i:nth-child(3){animation-delay:.3s}
@keyframes ur3d{50%{opacity:1;transform:translateY(-3px)}}
.urv-opt.sel{border-color:var(--uh);background:rgba(var(--uh-rgb),.14)}
.ur3-checkrow{margin:.6rem 0 0}
.ur3-v.ok{color:#9dffb8}

.ur2-tab.lock{opacity:.55;border-style:dashed;cursor:not-allowed}
.ur2-tab.lock:hover{background:rgba(var(--uh-rgb),.07)}
.ur3-tl{font-size:.8em}
.ur3-notice{margin:0;padding:.5rem 1.15rem;background:rgba(var(--c-gold-rgb),.12);border-bottom:1px solid rgba(var(--c-gold-rgb),.4);color:var(--c-gold);font-size:.85rem;font-weight:600}
.ur3-notice[hidden]{display:none}