/* Course GPS. A map has a you-are-here dot; a GPS has a destination. The WHY
   band is the destination, and it is the reason this exists: a student in week
   two can see that JOINs are not a detour. */
/* A panel, not a takeover. The scrim was near-opaque and the box ran to 92vh,
   so opening the map felt like leaving the page you were reading. You should
   still be able to see where you were. */
#cgps{position:fixed;inset:0;z-index:9000;background:rgba(8,10,14,.42);
  backdrop-filter:blur(1.5px);
  display:flex;align-items:center;justify-content:center;padding:2.2rem 1.2rem}
#cgps[hidden]{display:none}
#cgpsbox{width:min(1000px,88vw);max-height:78vh;overflow:auto;overscroll-behavior:contain;
  position:relative;background:var(--v5-surface,#fff);
  border-radius:12px;box-shadow:0 18px 60px rgba(0,0,0,.35);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--v5-ink,#0E0E10)}
/* the band stays put while the questions and the stack scroll under it, so the
   one line saying why you are here never leaves the screen */
.cg-why{padding:.75rem 1.3rem;color:#fff;position:sticky;top:0;z-index:2}
#cgps-close{position:absolute;top:.45rem;right:.6rem;z-index:3;border:0;cursor:pointer;
  background:rgba(255,255,255,.2);color:#fff;border-radius:50%;width:26px;height:26px;
  font-size:15px;line-height:1;padding:0}
#cgps-close:hover{background:rgba(255,255,255,.36)}
.cg-kind{font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;opacity:.82}
.cg-q{font-size:.98rem;font-weight:650;margin:0 0 .18rem;line-height:1.3}
.cg-tech{font-size:.8rem;opacity:.84;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.cg-also{margin-top:.6rem;font-size:.78rem;opacity:.9}
.cg-also b{font-weight:600}
.cg-body{padding:.85rem 1.3rem .8rem}
.cg-h{font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--v5-muted,#6B7280);margin:0 0 .5rem}
/* the stack is the second half of the map and was announced in the same
   whisper as a field label. It is a heading. */
.cg-stackh{font-size:1.05rem;letter-spacing:-.01em;text-transform:none;
  font-weight:700;color:var(--v5-ink,#0E0E10);margin:1.6rem 0 .7rem}
.cg-card{float:right;text-transform:none;letter-spacing:0;font-size:.72rem;
  color:var(--m1,#2563EB);text-decoration:none}
.cg-card:hover{text-decoration:underline}

/* The map: every question down the left so the page has somewhere to point,
   you on the right, curves between. A list of twenty is the whole point; a
   grid of five lit cells never showed what was NOT being served. */

.cg-band{display:flex;align-items:center;gap:.35rem;font-size:.55rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;margin:.42rem 0 .14rem;
  color:var(--bandc,var(--v5-muted,#6B7280))}
.cg-band:first-of-type{margin-top:0}
.cg-band i{width:14px;height:3px;border-radius:2px;flex:0 0 auto}
.cg-qrow{display:flex;gap:.45rem;align-items:baseline;font-size:.735rem;line-height:1.32;
  color:var(--v5-text,#3F3F46);background:var(--v5-bg,#F7F8FA);
  border-left:2.5px solid transparent;border-radius:3px;padding:.2rem .45rem;
  margin-bottom:2px;cursor:default}
/* the same numbered circle the stack map uses, so one badge means one thing
   wherever a student meets it */
.cg-qrow b.qb{flex:0 0 auto;width:17px;height:17px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.62rem;
  font-weight:700;color:#fff;background:var(--c);opacity:.4;
  transform:translateY(1px)}
.cg-qrow.on b.qb,.cg-qrow.sub b.qb{opacity:1}
.cg-qrow.on{font-weight:650}
.cg-qrow.on b.qb{background:rgba(255,255,255,.28)}
.cg-qrow.on b{opacity:1}
.cg-qrow.sub{background:var(--v5-surface,#fff);box-shadow:inset 0 0 0 1px var(--v5-hairline,#E5E7EB)}
.cg-qt{flex:1 1 auto;min-width:0}
/* the concepts a question buys you, shown only where this page touches it */
.cg-dots{display:flex;flex-wrap:wrap;gap:.14rem .28rem;margin-top:.14rem}
.cg-dots i{font-style:normal;font-size:.6rem;letter-spacing:.01em;padding:.01rem .28rem;
  border-radius:9px;background:rgba(255,255,255,.22);white-space:nowrap}
.cg-qrow.sub .cg-dots i{background:transparent;color:var(--qc);
  box-shadow:inset 0 0 0 1px currentColor;opacity:.85}
/* a plain row's chips: grey, so the lit rows still stand out */
.cg-qrow:not(.on):not(.sub) .cg-dots i{background:var(--v5-surface,#fff);
  color:var(--v5-muted,#6B7280);box-shadow:inset 0 0 0 1px var(--v5-hairline-2,#D4D7DC)}




.cg-rest{margin-top:.7rem;padding-top:.55rem;
  border-top:1px solid var(--v5-hairline,#E5E7EB)}
.cg-sibs{list-style:none;margin:0;padding:0;display:grid;gap:.1rem .8rem;
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}
.cg-sibs a{display:flex;gap:.5rem;align-items:baseline;text-decoration:none;
  color:var(--v5-text,#3F3F46);padding:.16rem .3rem;border-radius:4px;font-size:.83rem}
.cg-sibs a:hover{background:var(--v5-bg,#F7F8FA)}
.cg-sibs .here{background:var(--v5-ink,#0E0E10);color:#fff;font-weight:640}
.cg-sibs .here:hover{background:var(--v5-ink,#0E0E10)}
.cg-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  background:var(--v5-hairline-2,#D4D7DC);transform:translateY(-1px)}
.cg-sibs .seen .cg-dot{background:var(--v5-done,#16A34A)}
.cg-sibs .here .cg-dot{background:#fff}

.cg-next{margin-top:.6rem;display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-size:.83rem}
.cg-next a{color:var(--m1,#2563EB);text-decoration:none}
.cg-next a:hover{text-decoration:underline}

.cg-foot{margin:.6rem 0 0;font-size:.72rem;color:var(--v5-muted,#6B7280)}
.cg-foot kbd{font:inherit;background:var(--v5-bg,#F7F8FA);
  border:1px solid var(--v5-hairline-2,#D4D7DC);border-radius:3px;padding:0 .28rem}
.cg-foot .sw{display:inline-block;width:9px;height:9px;border-radius:2px;
  margin:0 .25rem 0 .5rem;transform:translateY(1px);background:var(--v5-muted,#6B7280)}
.cg-foot .sw.sub{background:var(--v5-surface,#fff);border:1px solid var(--v5-muted,#6B7280)}
@media (max-width:760px){
    .cg-links{display:none}          /* arrows across a stacked layout mean nothing */
}
/* One panel, everywhere. It had a dark variant on lecture decks so it would sit
   with the deck's own chrome, but that made the same object two colours
   depending on where you pressed y, and the map is easier to read on white in
   a lit room anyway. */

/* ── the stack block: questions above, this below, on both surfaces ──────── */
.cg-spine{margin-bottom:1.3rem}
.cg-rig{position:relative;border:2px dashed var(--m5,#DB2777);border-radius:12px;
  padding:2.1rem .8rem .8rem;margin-top:.2rem}
.cg-rigtag{position:absolute;top:-.7rem;left:.9rem;right:.9rem;display:flex;
  align-items:center;gap:.5rem;flex-wrap:wrap;
  background:var(--v5-surface,#fff);padding:0 .4rem}
.cg-rigtag > b{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--m5,#DB2777)}
/* A query goes down one side and rows come back up the other. Without the two
   rails this was a pile of boxes; with them it is a data path, which is the
   thing the picture is trying to say. */
.cg-core{display:grid;grid-template-columns:2.6rem 1fr 2.6rem;gap:0 .6rem;align-items:stretch}
.cg-cols{min-width:0}
.cg-rail{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:space-between;padding:.2rem 0;color:var(--v5-muted,#6B7280)}
.cg-rail::before{content:"";position:absolute;top:1.5rem;bottom:1.5rem;width:2px;border-radius:1px}
.cg-rail.down::before{background:linear-gradient(var(--m1,#2563EB),var(--v5-hairline-2,#D4D7DC))}
.cg-rail.up::before{background:linear-gradient(var(--v5-hairline-2,#D4D7DC),var(--m3,#059669))}
.cg-rail b{font-size:.95rem;font-weight:400;line-height:1}
.cg-rail.down b:last-child,.cg-rail.up b:first-child{opacity:.45}
.cg-rail i{position:absolute;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;
  font-style:normal;font-size:.72rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;background:var(--v5-surface,#fff);padding:.5rem 0}


/* the level's own glyph, same weight for all ten */
.cg-ic{width:17px;height:17px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;opacity:.75;transform:translateY(2px)}
.cg-slab.here .cg-ic{opacity:1}

.cg-slabs{display:flex;flex-direction:column;align-items:center}
.cg-slab{width:66%;display:grid;grid-template-columns:11rem 1fr 5rem;gap:.7rem;
  align-items:center;padding:.45rem .7rem;background:var(--v5-bg,#F7F8FA);
  border:1px solid var(--v5-hairline,#E5E7EB);border-bottom-width:3px;
  border-bottom-color:var(--v5-hairline-2,#D4D7DC);margin-bottom:-1px;
  box-shadow:0 1px 0 rgba(0,0,0,.04)}
.cg-slabs .cg-slab:first-child{border-radius:7px 7px 0 0}
.cg-slabs .cg-slab:last-child{border-radius:0 0 7px 7px;border-bottom-width:1px}
.cg-slab.here{background:var(--v5-ink,#0E0E10);border-color:var(--v5-ink,#0E0E10)}
/* a level this page's questions reach, without living there */
.cg-slab.touch{background:var(--v5-surface,#fff);
  border-left:3px solid var(--v5-ink,#0E0E10);box-shadow:0 1px 0 rgba(0,0,0,.06)}
.cg-slab.touch .cg-lmeta b{color:var(--v5-ink,#0E0E10)}
.cg-rigtag.touch > b{text-decoration:underline;text-underline-offset:3px}
.cg-rig.here{border-style:solid;border-width:3px}
.cg-rigtag.here{background:var(--m5,#DB2777);border-radius:5px;padding:.12rem .45rem}
.cg-rigtag.here > b{color:#fff}
.cg-slab.here .cg-lmeta b{color:#fff}
.cg-slab.here .cg-lmeta span{color:#C9CFD8}
.cg-lmeta b{display:flex;align-items:baseline;gap:.35rem;font-size:.94rem;
  font-weight:660;line-height:1.25}
.cg-lmeta span{padding-left:calc(17px + .35rem)}
/* a module name is a name; breaking "Query Optimization" over two lines in a
   chip reads as two chips */
.cg-mchip{white-space:nowrap}
.cg-lmeta span{display:block;font-size:.76rem;color:var(--v5-muted,#6B7280);line-height:1.35}
.cg-lmods{display:flex;flex-direction:column;gap:.3rem}
.cg-mrow{display:flex;flex-wrap:wrap;gap:.3rem}
.cg-mchip{display:inline-flex;align-items:baseline;gap:.3rem;text-decoration:none;
  border-left:3px solid var(--c);background:var(--v5-surface,#fff);border-radius:4px;
  padding:.16rem .4rem;color:var(--v5-text,#3F3F46)}
.cg-mchip:hover{box-shadow:0 1px 6px rgba(0,0,0,.12)}
.cg-mchip b{color:var(--c);font-size:.7rem;font-weight:700}
.cg-mchip span{font-size:.78rem}
.cg-mchip em{font-style:normal;font-size:.62rem;color:var(--v5-muted,#6B7280)}
.cg-alts{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .4rem}
.cg-alts i{font-style:normal;font-size:.57rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--v5-muted,#6B7280)}
.cg-alt{font-size:.7rem;text-decoration:none;color:var(--v5-text,#3F3F46);
  border:1px dashed var(--v5-hairline-2,#D4D7DC);border-radius:999px;padding:.04rem .45rem}
.cg-alt:hover{border-style:solid;border-color:var(--m1,#2563EB);color:var(--m1,#2563EB)}
.cg-lq{display:flex;flex-wrap:wrap;gap:.2rem;justify-content:flex-end}
.cg-lq .qb{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:.64rem;font-weight:700;color:#fff;background:var(--c);
  flex:0 0 auto}
.cg-noq{font-size:.64rem;color:var(--v5-muted,#6B7280);font-style:italic}
.cg-fork{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin:.5rem 0}
.cg-branch{display:flex;flex-direction:column;align-items:center}
.cg-bhead{padding:.25rem .1rem .35rem;text-align:center}
.cg-bhead b{display:block;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase}
.cg-bhead span{font-size:.74rem;color:var(--v5-muted,#6B7280)}
.cg-branch.read .cg-bhead b{color:var(--m3,#059669)}
.cg-branch.write .cg-bhead b{color:var(--m4,#7C3AED)}
.cg-branch .cg-slab{width:92%;grid-template-columns:10rem 1fr 3rem;gap:.5rem}
.cg-branch.read .cg-slab:first-of-type{border-top:2px solid var(--m3,#059669);
  border-radius:7px 7px 0 0}
.cg-branch.write .cg-slab:first-of-type{border-top:2px solid var(--m4,#7C3AED);
  border-radius:7px 7px 0 0}
.cg-branch .cg-slab:last-child{border-radius:0 0 7px 7px;border-bottom-width:1px}
@media (max-width:760px){
  .cg-core{grid-template-columns:1fr}
  .cg-rail{display:none}
  .cg-slab,.cg-branch .cg-slab{width:100%;grid-template-columns:1fr;gap:.35rem}
  .cg-fork{grid-template-columns:1fr}
  .cg-lq{justify-content:flex-start}
}

/* ── the map: a plain numbered list ──────────────────────────────────────────
   The colour went too far. Per-row rules and filled category bands drew a
   boundary around every line, when the thing that works is the card's own
   shape: one question after another, the number carrying the colour and the
   question carrying the weight. Nothing else needs an edge. */
.cg-mapmode .cg-qrow{background:transparent;border:0;box-shadow:none;
  padding:.3rem .1rem;margin-bottom:0;align-items:flex-start}
.cg-mapmode .cg-qt{font-size:.88rem;font-weight:600;color:var(--v5-ink,#0E0E10);
  line-height:1.4}
.cg-mapmode .cg-qrow b.qb{width:21px;height:21px;font-size:.7rem;opacity:1;
  transform:translateY(1px)}
.cg-mapmode .cg-dots{margin-top:.12rem}
.cg-mapmode .cg-dots i{background:transparent;box-shadow:none;padding:0;
  color:var(--v5-muted,#6B7280);font-size:.72rem;font-weight:400}
.cg-mapmode .cg-dots i:not(:last-child)::after{content:" \00b7";opacity:.55}
.cg-mapmode .cg-band{margin:1.15rem 0 .3rem;font-size:.6rem;letter-spacing:.11em;
  padding:0;background:none;color:var(--bandc)}
.cg-mapmode .cg-band:first-of-type{margin-top:0}
.cg-mapmode .cg-band i{width:18px;height:2px}