/* Learn Git: the lesson index, lesson pages, topic hubs and the format
   collections. The look follows the rest of the site: white cards with a soft
   shadow on the page background, one accent colour, no outlined boxes. The
   git-sim viewer's own stylesheet styles the graph frame's bar and stage. */

.learn { margin-top: 64px; padding: 44px 0 72px; }
.learn-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.learn a { color: var(--ic-accent); }
.learn a:hover { color: var(--ic-accent-ink); }
.learn h1, .learn h2, .learn h3 { font-weight: 600; letter-spacing: -.01em; }
.learn code { font-family: "Cascadia Mono", "JetBrains Mono", "Fira Mono", Menlo, Consolas, monospace; font-size: .9em; background: var(--ic-chip); border-radius: 5px; padding: 1px 6px; }
/* inline code in prose: the site's global red code colour is not part of this palette */
main.learn .learn-wrap :not(pre) > code { color: var(--ic-accent-ink) !important; background: var(--ic-accent-soft); }
.learn .fine { font-size: 14px; opacity: .75; }
.learn .button { display: inline-block; padding: 12px 24px; border-radius: 999px; background: var(--ic-accent); color: #fff !important; font-weight: 600; text-decoration: none; border: 0; cursor: pointer; font-size: 15px; line-height: 1; }
.learn .button:hover { background: var(--ic-accent-ink); text-decoration: none; }
.learn .button.ghost { background: transparent; color: inherit !important; box-shadow: inset 0 0 0 1px rgba(128,128,128,.45); }
.learn .button.ghost:hover { box-shadow: inset 0 0 0 1px var(--ic-accent); color: var(--ic-accent) !important; }
.learn .button[disabled] { opacity: .4; cursor: default; }

/* cards: the one surface used everywhere */
.card { background: var(--ic-card); color: var(--ic-text); border-radius: 15px; box-shadow: var(--ic-shadow-card); }
.card a { color: var(--ic-accent); }

/* ---- shared header bits -------------------------------------------------- */
.crumbs { font-size: 14px; opacity: .75; margin: 0 0 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.lesson-head h1 { font-size: 36px; line-height: 1.15; margin: 0 0 10px; }
.lesson-head .lead { font-size: 18px; line-height: 1.55; margin: 0 0 20px; opacity: .85; }
.lesson-intro { max-width: 860px; font-size: 17px; line-height: 1.65; margin: 0 0 30px; }
.lesson-intro p { margin: 0 0 12px; }

/* pill navigation between formats / topics */

/* ---- the hero card ---------------------------------------------------------- */
/* The card itself (.hero-card, .hero-kicker, the highlighted word) is the site's,
   in css/global.css; every learn page header uses it. The learn-only bits: */
.hero-card .lead { max-width: 860px; }
.hero-card .lesson-intro { margin: 0; font-size: 16px; line-height: 1.65; color: var(--ic-text-2); max-width: 860px; }
.hero-card .lesson-intro p:last-child { margin: 0; }
.hero-card .reference-stats { color: var(--ic-muted); opacity: 1; margin: 0; }
main.learn .learn-wrap .hero-card a { color: var(--ic-accent) !important; }

/* ---- lesson index --------------------------------------------------------- */
.learn-hero { display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); gap: 40px; align-items: center; max-width: 1160px; padding: 48px 52px; }
@media (max-width: 900px) { .learn-hero { grid-template-columns: minmax(0, 1fr); padding: 36px 26px; } }
.hero-copy { position: relative; z-index: 1; }
.learn-hero h1 { font-size: 54px; line-height: 1.02; margin: 0 0 20px; }
.learn-hero .lead { max-width: none; }
.hero-progress { position: relative; z-index: 1; padding: 26px 28px; border-radius: 26px; background: var(--ic-card); box-shadow: 0 24px 50px -24px rgba(30,27,75,.35), 0 2px 6px var(--ic-chip); display: grid; grid-template-columns: auto 1fr; gap: 18px 22px; align-items: center; transform: rotate(1.2deg); }
.ring { --pct: 0; width: 132px; height: 132px; border-radius: 50%; background: conic-gradient(#34d399 calc(var(--pct) * 1%), var(--ic-rule) 0); display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(52,211,153,.15), 0 18px 40px -14px rgba(52,211,153,.6); transition: background .4s; }
.ring-inner { width: 104px; height: 104px; border-radius: 50%; background: var(--ic-card); display: grid; place-items: center; align-content: center; text-align: center; line-height: 1; color: var(--ic-ink); }
.ring-inner b { font-size: 32px; font-weight: 700; }
.ring-inner b small { font-size: 15px; opacity: .5; font-weight: 600; }
.ring-inner span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .55; margin-top: 8px; }
.hero-stats { display: grid; gap: 10px; }
.level { display: grid; gap: 3px; }
.level-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; opacity: .55; font-weight: 700; }
.level b { font-size: 24px; font-weight: 700; color: var(--ic-amber-ink); }
.level .fine { color: var(--ic-muted); }
.xp-total { display: inline-block; justify-self: start; font: 700 13px/1 sans-serif; font-family: inherit; color: #fff; background: linear-gradient(90deg, #7c3aed, #a855f7); border-radius: 999px; padding: 8px 14px; box-shadow: 0 8px 18px -8px rgba(168,85,247,.8); }
.continue-cta { grid-column: 1 / -1; display: grid !important; gap: 3px; text-align: left; padding: 16px 22px !important; border-radius: 16px !important; background: linear-gradient(90deg, #10b981, #34d399) !important; box-shadow: 0 14px 30px -10px rgba(16,185,129,.7); transition: transform .15s, box-shadow .15s; }
.continue-cta:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 18px 34px -10px rgba(16,185,129,.8); }
.continue-cta .cta-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.continue-cta .cta-title { font-size: 17px; font-weight: 700; }
main.learn .learn-wrap .learn-hero a.continue-cta, main.learn .learn-wrap .learn-hero a.continue-cta:hover, main.learn .learn-wrap .learn-hero a.continue-cta * { color: #052e1f !important; text-decoration: none !important; }
.all-done { grid-column: 1 / -1; margin: 0; }

/* ---- the level map: a board ------------------------------------------------ */
/* topic colours: one hue per topic, used for level tiles and badges */
[data-topic="basics"] { --hue-a: var(--ic-emerald); --hue-b: #34d399; --hue-soft: #d1fae5; }
[data-topic="branching"] { --hue-a: #1d4ed8; --hue-b: #60a5fa; --hue-soft: #dbeafe; }
[data-topic="history"] { --hue-a: #6d28d9; --hue-b: #a78bfa; --hue-soft: #ede9fe; }
[data-topic="team"] { --hue-a: #c2410c; --hue-b: #fbbf24; --hue-soft: #ffedd5; }
[data-topic="rescue"] { --hue-a: #be123c; --hue-b: #fb7185; --hue-soft: #ffe4e6; }
[data-topic="internals"] { --hue-a: #334155; --hue-b: var(--ic-muted); --hue-soft: var(--ic-rule); }

.journey-section { max-width: 1160px; margin: 0 auto 34px; }
.journey { list-style: none; margin: 0; padding: 18px 0 10px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 64px 48px; position: relative; }
/* rows read left to right, like text; the number badges carry the order */
.level-node { position: relative; }
/* the path: an arrow chip between tiles, and a "return" chip under the last tile of a row,
   since the next level starts again at the left */
.level-node::after { content: "\2192"; position: absolute; z-index: 1; top: 50%; right: -40px; width: 32px; height: 32px; margin-top: -16px; display: grid; place-items: center; border-radius: 50%; background: var(--ic-card); color: var(--ic-accent); border: 2px solid var(--ic-accent-line); box-shadow: 0 8px 16px -10px rgba(30,27,75,.55); font-size: 18px; font-weight: 700; line-height: 1; }
/* At a row's end the path runs on: a clean line drops from under the last tile, runs
   level across the row gap with rounded corners, and drops into an arrowhead over the
   first tile of the next row. An SVG stretched over the gap (three columns and their
   gutters to the left); the stroke keeps its width under the stretch. */
.level-node:nth-child(4n)::after { content: ""; top: auto; right: 0; left: calc(-300% - 144px); bottom: -64px; width: auto; height: 64px; margin: 0; border: 0; border-radius: 0; box-shadow: none; transform: none; pointer-events: none; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path d='M890 0 V26 Q890 50 866 50 H134 Q110 50 110 74 V94' fill='none' stroke='%23818cf8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/><path d='M97 74 L110 96 L123 74' fill='none' stroke='%23818cf8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/></svg>") center / 100% 100% no-repeat; }
.level-node.done:nth-child(4n)::after { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'><path d='M890 0 V26 Q890 50 866 50 H134 Q110 50 110 74 V94' fill='none' stroke='%2334d399' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/><path d='M97 74 L110 96 L123 74' fill='none' stroke='%2334d399' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/></svg>"); }
.level-node:nth-child(16)::after, .level-node:last-child::after { content: none; }
/* a finished level's arrow is green, so a completed stretch of the path reads as one */
.level-node.done::after { background: linear-gradient(160deg, var(--ic-emerald), #34d399); color: #fff; border-color: transparent; box-shadow: 0 8px 16px -8px rgba(16,185,129,.7); }
.level-link { display: grid; justify-items: center; text-decoration: none !important; color: inherit !important; transform: rotate(var(--tilt, 0deg)); transition: transform .18s; }
.level-node:nth-child(odd) .level-link { --tilt: -1.2deg; } .level-node:nth-child(even) .level-link { --tilt: 1.1deg; } .level-node:nth-child(3n) .level-link { --tilt: .6deg; }
.level-link:hover { transform: rotate(0deg) translateY(-6px) scale(1.03); }
.level-card { display: block; position: relative; width: 100%; box-sizing: border-box; background: var(--ic-card); color: var(--ic-text); border-radius: 22px; padding: 40px 20px 18px; box-shadow: var(--ic-shadow-hover); border-bottom: 6px solid var(--hue-b, var(--ic-accent-line)); }
.level-disc { position: relative; z-index: 2; width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center; background: var(--hue-soft, var(--ic-accent-soft)); margin: 0 0 -30px; transform: rotate(-4deg); box-shadow: 0 10px 20px -12px rgba(15,23,42,.4), 0 0 0 5px var(--ic-card); }
.level-emoji { font-size: 40px; line-height: 1; transform: rotate(4deg); }
.level-number { position: absolute; top: -12px; left: -12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, var(--hue-a, var(--ic-accent)), var(--hue-b, #818cf8)); color: #fff; font: 700 14px/1 sans-serif; font-family: inherit; box-shadow: 0 4px 10px -3px rgba(0,0,0,.35); transform: rotate(4deg); }
.level-check { display: none; position: absolute; inset: 0; border-radius: 26px; background: linear-gradient(160deg, var(--ic-emerald), #34d399); color: #fff; font-size: 40px; font-weight: 700; place-items: center; }
.level-node.done .level-check { display: grid; }
/* on a finished level the number sits on the green check, so it turns into a white
   badge with green digits (a topic's own green would vanish into the check) */
.level-number { z-index: 1; }
.level-node.done .level-number { background: var(--ic-card); color: var(--ic-em-ink); box-shadow: 0 0 0 3px #34d399, 0 4px 10px -3px rgba(0,0,0,.35); }
.level-node.done .level-card { border-bottom-color: #34d399; }
.level-node.next .level-card { border-bottom-color: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.35), 0 18px 40px -22px rgba(15,23,42,.35); animation: boardglow 1.8s ease-in-out infinite; }
@keyframes boardglow { 0%, 100% { box-shadow: 0 0 0 4px rgba(245,158,11,.45), 0 18px 40px -22px rgba(15,23,42,.35); } 50% { box-shadow: 0 0 0 12px rgba(245,158,11,0), 0 18px 40px -22px rgba(15,23,42,.35); } }
.level-node.started .level-card::before { content: "HEAD"; position: absolute; top: -14px; right: 16px; font: 700 11px/1 "Cascadia Mono", Menlo, Consolas, monospace; color: #fff; background: linear-gradient(90deg, var(--ic-accent-ink), var(--ic-accent-2)); border-radius: 7px; padding: 6px 9px; box-shadow: 0 6px 14px -6px rgba(0,0,0,.4); transform: rotate(3deg); }
.level-kicker { display: flex; justify-content: space-between; gap: 8px; font: 700 11px/1 sans-serif; font-family: inherit; letter-spacing: .1em; text-transform: uppercase; color: var(--hue-a, var(--ic-accent)); margin: 0 0 8px; }
.level-state { color: var(--ic-muted); }
.level-node.done .level-state { color: var(--ic-emerald); }
.level-node.next .level-state { color: var(--ic-amber-ink); }
.level-node.started .level-state { color: var(--ic-accent); }
.level-card b { display: block; font-size: 19px; font-weight: 700; line-height: 1.2; margin: 0 0 6px; letter-spacing: -.01em; }
.level-blurb { display: block; font-size: 13.5px; line-height: 1.45; opacity: .78; }
.level-meta { display: block; font-size: 12px; opacity: .55; margin-top: 10px; }
@media (max-width: 980px) {
  .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 28px; }
  /* the snake order's grid-row rules above are two pseudo-classes strong; this must outrank
     them, or four tiles per row still get forced into the same row and overflow the screen */
  .journey .level-node:nth-child(n) { grid-column: auto !important; grid-row: auto !important; }
  .level-node::after { content: none !important; }
  .level-link { --tilt: 0deg !important; }
}
@media (max-width: 560px) {
  .journey { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .level-card { min-height: 0; }
  /* the progress card: ring on top, stats under it, straight, so nothing is clipped */
  .hero-progress { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 14px; padding: 22px 20px; transform: none; }
  .hero-stats { justify-items: center; }
  .xp-total { justify-self: center; }
  .continue-cta, .all-done { width: 100%; }
  .learn-hero h1 { font-size: 38px; }
}

/* the level badge on a lesson page */
.level-head { position: relative; }
.level-badge { display: inline-flex; align-items: center; gap: 8px; font: 700 12px/1 sans-serif; font-family: inherit; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: linear-gradient(90deg, var(--hue-a, var(--ic-accent)), var(--hue-b, #818cf8)); border-radius: 999px; padding: 8px 14px 8px 10px; margin: 0 0 14px; box-shadow: 0 8px 18px -8px var(--hue-a, var(--ic-accent)); }
.level-badge .level-emoji { font-size: 18px; transform: none; }

/* topics on the level map */
.learn-topics { max-width: 1000px; margin: 56px auto 0; }
.learn-foot { margin-top: 72px; padding-bottom: 120px; }  /* room above it after the topics, and below it before the footer */
.learn-topics h2 { font-size: 28px; margin: 0 0 6px; text-align: center; }
.learn-topics > p { text-align: center; opacity: .8; margin: 0 0 22px; }
.topic-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.topic-tile { display: block; position: relative; padding: 20px 22px 18px 26px; background: var(--ic-card); color: var(--ic-text) !important; border-radius: 18px; box-shadow: 0 14px 30px -18px rgba(15,23,42,.35), 0 2px 6px var(--ic-chip); text-decoration: none !important; overflow: hidden; transition: transform .15s, box-shadow .15s; }
.topic-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: linear-gradient(180deg, var(--hue-a, var(--ic-accent)), var(--hue-b, #818cf8)); }
.topic-tile:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -18px rgba(15,23,42,.45), 0 2px 6px var(--ic-chip); }
.topic-tile b { display: block; font-size: 18px; font-weight: 700; margin-bottom: 6px; color: var(--hue-a, var(--ic-text)); }
.topic-tile span { display: block; font-size: 14.5px; opacity: .8; line-height: 1.5; }
main.learn .learn-wrap .topic-tile, main.learn .learn-wrap .topic-tile:hover { color: var(--ic-text) !important; }
main.learn .learn-wrap .topic-tile b { color: var(--hue-a, var(--ic-text)) !important; }
/* what a topic holds, on the topics page: "24 commands · 3 levels · ..." */
.topic-tile .topic-counts { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 12px; opacity: 1; font-size: 13px; line-height: 1.4; }
.topic-counts i { color: var(--hue-a, var(--ic-ink)); font-style: normal; font-weight: 700; }
.topic-counts i + i::before { content: "\00b7"; margin: 0 8px; color: var(--ic-muted); font-weight: 400; }
.topics-all { margin: 0 0 48px; }
.topics-more { margin: 18px 0 0; text-align: center; font-size: 15px; font-weight: 600; }

/* ---- lesson page ---------------------------------------------------------- */
/* The story sits on top; the two pictures (the scrapbook analogy and the real
   graph) share the row below it, and the one this step is about is the wider. */
.lesson-page .learn-wrap { max-width: 1480px; }
/* the site's sticky-footer trick (a negative bottom margin on main, balanced
   by padding) would let the footer overlap the pictures, so it is undone here */
main.learn.lesson-page { margin-bottom: 0; padding-bottom: 80px; }
.lesson-page .lesson-intro { max-width: 900px; }

.step-panel { padding: 20px 28px 22px; margin: 0 0 22px; }
.step-top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin: 0 0 16px; }
.step-top .progress { flex: 1 1 260px; margin: 0; }
/* Bootstrap also has a .progress (a 1rem grey bar with overflow hidden), which
   painted its light grey behind the counter and clipped it; this one is a row. */
.progress { display: flex; align-items: center; gap: 12px; height: auto; overflow: visible; background: transparent; font-size: 12px; color: var(--ic-text-2); letter-spacing: .06em; text-transform: uppercase; font-weight: 700; }
.progress #stepCounter { flex: 0 0 auto; white-space: nowrap; }
.progress .bar { flex: 1; height: 6px; border-radius: 999px; background: var(--ic-rule-2); overflow: hidden; }
.progress .bar i { display: block; height: 100%; width: 0; background: var(--ic-accent); transition: width .3s; }
.progress .xp { position: relative; font: 700 11px/1 sans-serif; font-family: inherit; color: #fff; background: #7c3aed; border-radius: 999px; padding: 6px 9px; letter-spacing: 0; text-transform: none; }
.progress .xp.pop { animation: pop .5s ease-out; }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
.xp-float { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); color: #7c3aed; background: none; font-weight: 700; font-size: 13px; animation: floatUp 1.2s ease-out forwards; pointer-events: none; }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, 0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -34px); } }
/* the steps as a row of numbered tokens: hover one for its title */
.step-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.step-chips li { margin: 0; }
.step-chips button { width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 2px solid rgba(0,0,0,.14); background: transparent; color: inherit; font: 700 11px/26px sans-serif; font-family: inherit; white-space: nowrap; cursor: pointer; opacity: .75; transition: transform .12s, background .12s; }
.step-chips button:hover { transform: translateY(-2px) scale(1.08); opacity: 1; border-color: var(--ic-accent); }
.step-chips button.done { background: #10b981; border-color: #10b981; color: #fff; opacity: 1; }
.step-chips button.on { background: var(--ic-accent); border-color: var(--ic-accent); color: #fff; opacity: 1; box-shadow: 0 0 0 4px rgba(79,70,229,.2); }

.step-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 36px; align-items: end; }
@media (max-width: 760px) { .step-body { grid-template-columns: minmax(0, 1fr); align-items: start; } }
#steps { max-width: 960px; }
.step { display: none; }
.step.on { display: block; }
.step h2 { font-size: 26px; line-height: 1.25; margin: 0 0 12px; }
.step .text { font-size: 17px; line-height: 1.65; }
.step .text p { margin: 0 0 12px; }
.step .text pre { margin: 0 0 14px; padding: 12px 16px; background: #0D1117; border-radius: 10px; overflow-x: auto; }
.step .text pre code { background: none; padding: 0; color: #E6EDF3 !important; font-size: 15px; }
.step pre.cmd { display: inline-block; margin: 0 0 14px; padding: 12px 18px; background: #0D1117; border-radius: 10px; overflow-x: auto; max-width: 100%; }
.step pre.cmd code { background: none; padding: 0; color: #E6EDF3 !important; font-size: 16px; }
.step pre.cmd code::before { content: "$ "; color: #8B949E; }
.preflight { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; opacity: .9; margin: 6px 0 12px; }
.risk { flex: none; font: 700 11px/1 sans-serif; font-family: inherit; letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: 999px; color: #fff; background: #10b981; margin-top: 1px; }
.risk.caution { background: #d9822b; }
.risk.destructive { background: #d13438; }

/* a question: the options in a row, the explanation in one place under them */
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.option-pick { width: 100%; text-align: left; padding: 14px 16px; border-radius: 12px; border: 0; background: var(--ic-chip); color: inherit; cursor: pointer; font: inherit; transition: background .15s, box-shadow .15s, transform .12s; }
.option-pick:hover { box-shadow: inset 0 0 0 2px var(--ic-accent); transform: translateY(-1px); }
.option-pick code { background: none !important; padding: 0; font-size: 15px; color: inherit !important; }
.option-pick code::before { content: "$ "; opacity: .5; }
.option.right .option-pick { background: rgba(16,185,129,.12); box-shadow: inset 0 0 0 2px #10b981; }
.option.wrong .option-pick { background: rgba(209,52,56,.08); box-shadow: inset 0 0 0 2px #d13438; }
.option .why { display: none; }
.why-box { margin: 0 0 14px; padding: 14px 18px 6px; border-radius: 12px; background: rgba(0,0,0,.03); font-size: 16px; line-height: 1.6; border-left: 4px solid var(--ic-accent); }
.why-box.right { border-left-color: #10b981; }
.why-box.wrong { border-left-color: #d13438; }
.why-box .verdict { display: inline-block; font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 6px; }
.why-box.right .verdict { color: #10b981; }
.why-box.wrong .verdict { color: #d13438; }
.why-box p { margin: 0 0 8px; }
.then { border-left: 3px solid var(--ic-accent); padding-left: 14px; }

.step-nav { display: flex; gap: 10px; justify-content: flex-end; padding-bottom: 2px; }
.step-nav .button { padding: 14px 28px; font-size: 16px; }

/* ---- the two pictures --------------------------------------------------------- */
/* the terminal and graph on the left, the scrapbook on the right */
/* the pane in focus takes three quarters of the width, the other one a quarter */
.visual-deck { display: grid; grid-template-columns: minmax(0, 25fr) minmax(0, 75fr); gap: 20px; align-items: start; transition: grid-template-columns .4s ease; }
.visual-deck[data-focus="graph"] { grid-template-columns: minmax(0, 75fr) minmax(0, 25fr); }
@media (max-width: 900px) { .visual-deck, .visual-deck[data-focus="graph"] { grid-template-columns: minmax(0, 1fr); } }
.deck-col { min-width: 0; }
.deck-caption { margin: 8px 4px 0; font-size: 13px; opacity: .7; min-height: 1.4em; }
.deck-caption:empty { display: none; }
/* the picture this step is about is ringed; the other invites a click to grow */
.visual-deck[data-focus="cue"] .scrap-frame, .visual-deck[data-focus="graph"] .git-sim-frame { box-shadow: 0 0 0 3px var(--ic-accent), 0 16px 40px -20px rgba(15,23,42,.45); }
.visual-deck[data-focus="graph"] .scrap-frame, .visual-deck[data-focus="cue"] .git-sim-frame { cursor: zoom-in; }
.visual-deck[data-focus="graph"] .scrap-frame:hover, .visual-deck[data-focus="cue"] .git-sim-frame:hover { box-shadow: 0 0 0 3px rgba(79,70,229,.35), 0 16px 40px -20px rgba(15,23,42,.45); }

/* the scrapbook picture's own frame, in the same idiom as the viewer's */
.scrap-frame { position: relative; background: #f6ecd4; color: #3b2a14; border-radius: 15px; overflow: hidden; box-shadow: var(--ic-shadow-card); transition: box-shadow .25s; }
.scrap-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; padding: 0 14px 0 18px; background: #efe1bd; border-bottom: 1px solid rgba(107,79,42,.25); }
.scrap-title { font: italic 15px/1.2 Georgia, "Times New Roman", serif; color: #3b2a14; }
.scrap-title small { font-size: 13px; opacity: .7; }
/* the subtitle goes when the pane is the small one, or the window is narrow */
.visual-deck[data-focus="graph"] .scrap-title small { display: none; }
@media (max-width: 560px) { .scrap-title small { display: none; } }
.scrap-stage { padding: 6px 6px 8px; }
.scrap-frame .frame-expand { --rule: rgba(107,79,42,.35); --panel: #fbf3dc; --text: #3b2a14; --accent: #8b5a2b; --font: "Segoe UI", Helvetica, Arial, sans-serif; margin: 0; }
.cue svg { display: block; width: 100%; height: auto; }
.cue-inline { display: block; width: 100%; height: auto; margin: 10px 0; border-radius: 12px; }

/* the terminal above the graph: the learner types the step's command here */
.terminal { margin: 0 0 12px; padding: 8px 14px; border-radius: 15px; background: #0D1117; color: #E6EDF3; font-family: "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace; box-shadow: var(--ic-shadow-card); }
/* prompt, field and button share one 36px line, so the text sits on one centre */
.term-line { display: flex; align-items: center; gap: 10px; height: 36px; }
.term-prompt { flex: none; display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; padding: 0; font-size: 15px; font-weight: 400; line-height: 36px; height: 36px; white-space: nowrap; vertical-align: middle; }
.term-prompt span { line-height: 36px; }
.term-dir { color: #79c0ff; }
.term-branch { color: #d2a8ff; }
.term-branch:not(:empty)::before { content: "("; } .term-branch:not(:empty)::after { content: ")"; }
.term-dollar { color: #8B949E; }
.term-field { flex: 1; min-width: 0; position: relative; display: flex; height: 36px; }
.term-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #E6EDF3; font: inherit; font-size: 15px; line-height: 36px; height: 36px; caret-color: transparent; padding: 0; margin: 0; box-sizing: border-box; }
.term-input:disabled { color: #6e7681; cursor: default; pointer-events: none; }
/* The cursor: one character cell wide, blinking like a terminal's, drawn over
   the character it sits on; a hollow box while the terminal is not focused. */
.term-cursor { display: none; position: absolute; top: 8px; left: 0; width: 1ch; height: 20px; background: #34d399; color: #0D1117; font: inherit; font-size: 15px; line-height: 20px; text-align: center; white-space: pre; pointer-events: none; }
.terminal.live .term-cursor { display: block; animation: term-blink 1.06s steps(1, end) infinite; }
.terminal.live .term-cursor.unfocused { background: transparent; box-shadow: inset 0 0 0 1.5px #34d399; color: transparent; animation: none; }
@keyframes term-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .terminal.live .term-cursor { animation: none; } }
.terminal.idle { opacity: .7; }
.term-run { flex: none; border: 1px solid #30363d; background: #21262d; color: #E6EDF3; font: 700 12px/1 inherit; height: 30px; padding: 0 12px; border-radius: 8px; cursor: pointer; }
.term-run:hover { border-color: var(--ic-accent); color: #fff; }
.term-run:disabled { opacity: .35; cursor: default; }
.term-out { font-size: 13px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; margin: 6px 0 0; max-height: 200px; overflow: auto; }
.term-out:empty { display: none; }
/* the output's scrollbar, in the terminal's own colours */
.term-out { scrollbar-width: thin; scrollbar-color: #3d444d #0D1117; }
.term-out::-webkit-scrollbar { width: 8px; }
.term-out::-webkit-scrollbar-track { background: transparent; }
.term-out::-webkit-scrollbar-thumb { background: #3d444d; border-radius: 4px; border: 2px solid #0D1117; }
.term-out::-webkit-scrollbar-thumb:hover { background: var(--ic-accent); }
.term-out .echo { color: #8B949E; }
.term-out .echo b { color: #E6EDF3; font-weight: 400; }
.term-out .ok { color: #34d399; }
.term-out .nope { color: #f78166; }
.term-out .hint { color: #d2a8ff; }
.term-out .git { color: #c9d1d9; opacity: .9; }
.term-out .quiet { color: #6e7681; font-style: italic; }
.terminal.idle .term-input { cursor: default; }
.terminal.done .term-input { color: #34d399; }
.terminal.shake { animation: shake .35s; }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
/* the right command: a green flash, sparks from the cursor, a line that says what was won */
.terminal { position: relative; }
.terminal.win { animation: termwin .9s ease-out; }
@keyframes termwin { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.8), 0 3px 4px 0 rgba(0,0,0,.10); } 60% { box-shadow: 0 0 0 16px rgba(52,211,153,0), 0 3px 4px 0 rgba(0,0,0,.10); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0), var(--ic-shadow-card); } }
.burst { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 5; }
.burst i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 2px; animation: spark var(--t, .9s) cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes spark { 0% { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.3); opacity: 0; } }
.term-out .ok.win { font-weight: 700; font-size: 14px; margin-top: 2px; }
.term-out .ok.win .xp { color: #f59e0b; margin-left: 6px; }
.term-out .ok.win .bonus { color: #d2a8ff; font-weight: 400; margin-left: 8px; }
.step-chips button.pop { animation: pop .5s ease-out; }
/* confetti over the graph column, a stamp with the points, a pulse on the frame and on Next */
.graph-col { position: relative; }
.graph-col .confetti { z-index: 6; }
.win-stamp { position: absolute; left: 50%; top: 110px; z-index: 7; pointer-events: none; text-align: center; padding: 12px 24px; border-radius: 16px; background: #10b981; color: #fff; box-shadow: 0 18px 40px -12px rgba(16,185,129,.65); transform: translate(-50%, 0); animation: stamp 1.7s cubic-bezier(.2,.8,.2,1) forwards; }
.win-stamp b { display: block; font: 700 30px/1.1 sans-serif; font-family: inherit; letter-spacing: -.01em; white-space: nowrap; }
.win-stamp b.long { font-size: 21px; }
.win-stamp small { display: block; margin-top: 5px; font: 700 12px/1 "Segoe UI", Helvetica, Arial, sans-serif; letter-spacing: .1em; text-transform: uppercase; opacity: .92; }
@keyframes stamp { 0% { opacity: 0; transform: translate(-50%, 12px) scale(.5) rotate(-8deg); } 18% { opacity: 1; transform: translate(-50%, 0) scale(1.1) rotate(2deg); } 32% { transform: translate(-50%, 0) scale(1) rotate(0); } 75% { opacity: 1; transform: translate(-50%, -6px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -32px) scale(.96); } }
.git-sim-frame.win { animation: framewin 1.4s ease-out; }
@keyframes framewin { 0% { box-shadow: 0 0 0 3px #10b981, 0 0 0 0 rgba(16,185,129,.55); } 70% { box-shadow: 0 0 0 3px #10b981, 0 0 0 24px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 3px var(--ic-accent), 0 16px 40px -20px rgba(15,23,42,.45); } }
#next.pulse { animation: nextpulse 1.1s ease-in-out 3; }
@keyframes nextpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(79,70,229,0); transform: none; } 50% { box-shadow: 0 0 0 9px rgba(79,70,229,.22); transform: translateY(-1px) scale(1.05); } }
@media (prefers-reduced-motion: reduce) { .terminal.win, .burst i, .step-chips button.pop, .graph-col .confetti i, .win-stamp, .git-sim-frame.win, #next.pulse { animation: none; } .win-stamp { display: none; } }
/* the command to type, called out at the top of a run step */
.type-this { display: inline-flex; flex-direction: column; gap: 6px; margin: 2px 0 16px; }
.step .text + .type-this { margin-top: 2px; }
.type-this + .text { margin-top: 2px; }
.type-this-label { font: 700 11px/1 "Segoe UI", Helvetica, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--ic-accent); }
.type-this-label::before { content: "\2328"; margin-right: 6px; font-size: 13px; }
.type-this pre.cmd { margin: 0; box-shadow: 0 0 0 2px var(--ic-accent), 0 10px 24px -14px rgba(79,70,229,.6); }

.git-sim-frame { position: relative; background: var(--bg); border-radius: 15px; overflow: hidden; box-shadow: var(--ic-shadow-card); transition: box-shadow .25s; }
.git-sim-frame #bar { position: static; height: 56px; padding: 0 12px; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--rule); }
.git-sim-frame #controls { grid-column: 1; justify-self: start; }
.git-sim-frame #bar > .right { grid-column: 2; }
.git-sim-frame #brand, .git-sim-frame #bar > .right > a { display: none; }
.git-sim-frame #scrub { width: clamp(90px, 14vw, 240px); }
@media (max-width: 980px) { .git-sim-frame #scrub { width: min(40vw, 360px); } }
/* the bar adapts to the frame's own width, not the window's: in the narrow
   column the end labels and the share and help buttons give way to the slider */
.git-sim-frame { container-type: inline-size; }
@container (max-width: 640px) {
  .git-sim-frame #toBefore, .git-sim-frame #toAfter, .git-sim-frame #share, .git-sim-frame #help, .git-sim-frame #stepLabel { display: none !important; }
  .git-sim-frame #scrub { width: clamp(70px, 40cqw, 220px); }
  .git-sim-frame #controls { gap: 8px; }
}
.git-sim-frame #stage { padding: 10px 10px 4px; min-height: 220px; }
.stage-empty { color: var(--muted, #8a7455); font: 14px/1.6 var(--font, inherit); text-align: center; padding: 60px 30px; margin: 0; }
.stage-empty a { color: var(--accent); }
.refusal { margin: 40px auto; max-width: 520px; padding: 22px 26px; border-radius: 12px; background: var(--panel); color: var(--text); font: 14px/1.6 var(--font); }
.refusal b { display: block; color: var(--accent); font-size: 15px; margin-bottom: 8px; }
.refusal code { display: block; background: var(--bg); border-radius: 6px; padding: 8px 10px; margin: 0 0 12px; color: var(--text); }
.refusal p { margin: 0; color: var(--muted); }

/* the enlarge button, veil and enlarged git-sim frame are styled in global.css
   (shared with the blog's embedded graphs); the scrapbook frame adds its own */
.scrap-frame.is-full { position: fixed; left: 16px; right: 16px; top: 16px; bottom: 16px; z-index: 9001; display: flex; flex-direction: column; border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.45); cursor: default; }
.scrap-frame.is-full .scrap-bar { flex: none; }
.scrap-frame.is-full .scrap-stage { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 16px; }
.scrap-frame.is-full .cue { width: 100%; }
.scrap-frame.is-full .cue svg { height: calc(100vh - 150px); width: auto; max-width: 100%; margin: 0 auto; }

/* the pre-flight check under the graph */
.preflight-card { margin-top: 16px; padding: 18px 22px 16px; }
.preflight-head { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; }
.preflight-title { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; opacity: .65; flex: 1; }
.preflight-summary { margin: 0 0 12px; font-size: 15px; line-height: 1.5; }
.preflight-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.preflight-cols h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; opacity: .65; }
.preflight-cols ul { margin: 0; padding: 0 0 0 16px; font-size: 13.5px; line-height: 1.5; }
.preflight-cols li { margin: 0 0 3px; font-family: "Cascadia Mono", Menlo, Consolas, monospace; font-size: 12.5px; }
.preflight-cols .lose h4 { color: #d13438; opacity: 1; }
.preflight-cols .recover h4 { color: #10b981; opacity: 1; }
.preflight-foot { margin: 12px 0 0; }

/* the end of a level: a card over the dimmed page */
.complete-veil { position: fixed; inset: 0; z-index: 9500; background: rgba(15,23,42,.72); display: flex; align-items: center; justify-content: center; padding: 20px; overflow: auto; }
.complete-veil[hidden] { display: none; }
.complete-card { position: relative; overflow: hidden; width: 100%; max-width: 680px; max-height: calc(100vh - 40px); overflow-y: auto; padding: 28px 32px 26px; font-size: 16px; line-height: 1.6; border-radius: 22px; box-shadow: 0 40px 100px rgba(0,0,0,.5); animation: popin .35s cubic-bezier(.2,.9,.3,1.2); }
@keyframes popin { 0% { transform: translateY(24px) scale(.96); opacity: 0; } 100% { transform: none; opacity: 1; } }
.complete-head { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; }
.complete-head .outro-badge { margin: 0; flex: none; }
.complete-kicker { margin: 0 0 2px; font: 700 12px/1 sans-serif; font-family: inherit; letter-spacing: .12em; text-transform: uppercase; color: var(--ic-emerald); }
.complete-card h2 { margin: 0; font-size: 28px; line-height: 1.2; }
.complete-close { margin-left: auto; align-self: flex-start; border: 0; background: var(--ic-chip); width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 14px; color: inherit; }
.complete-close:hover { background: rgba(0,0,0,.12); }
.complete-newrank { margin: 0 0 14px; padding: 12px 16px; border-radius: 12px; background: linear-gradient(90deg, #f59e0b, #fbbf24); color: #451a03; font-weight: 700; font-size: 16px; text-align: center; animation: pop .6s ease-out; }
.complete-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 0 0 16px; }
.complete-stats .stat { padding: 14px 14px 12px; border-radius: 14px; background: var(--ic-chip); text-align: center; }
.complete-stats .stat b { display: block; font-size: 22px; line-height: 1.1; font-weight: 700; letter-spacing: -.01em; }
.complete-stats .stat span { display: block; font-size: 12px; opacity: .65; margin-top: 4px; }
.complete-stats .stat-xp { background: linear-gradient(135deg, var(--ic-accent), #7c3aed); color: #fff; box-shadow: 0 14px 30px -14px rgba(79,70,229,.8); }
.complete-stats .stat-xp span { opacity: .85; }
.complete-rank { margin: 0 0 18px; }
.complete-rank-row { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; }
.complete-rank-row b { font-size: 18px; color: var(--ic-amber-ink); }
.complete-rank .bar { height: 8px; border-radius: 999px; background: rgba(0,0,0,.08); overflow: hidden; }
.complete-rank .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f59e0b, #fbbf24); transition: width .8s ease .2s; }
.complete-recap { font-size: 15.5px; opacity: .9; padding: 14px 18px; border-left: 4px solid #10b981; background: rgba(16,185,129,.06); border-radius: 0 12px 12px 0; margin: 0 0 18px; }
.complete-recap p { margin: 0 0 8px; }
.complete-recap p:last-child { margin: 0; }
.complete-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.complete-actions .button.ghost { padding: 12px 18px; font-size: 14px; }
.outro-badge { width: 56px; height: 56px; border-radius: 50%; background: #10b981; color: #fff; display: grid; place-items: center; font-size: 28px; font-weight: 700; margin: 0 0 14px; box-shadow: 0 8px 20px rgba(16,185,129,.3); }
.lesson-outro { position: relative; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; opacity: .95; animation: fall 2s ease-in forwards; }
@keyframes fall { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(420px) rotate(540deg); opacity: 0; } }
main.learn .learn-wrap .lesson-outro a.button.ghost, main.learn .learn-wrap .lesson-outro a.button.ghost:hover { color: var(--ic-text) !important; text-decoration: none !important; }
main.learn .learn-wrap .lesson-outro a.next-level, main.learn .learn-wrap .lesson-outro a.next-level:hover { display: inline-grid; gap: 3px; text-align: left; padding: 14px 24px; border-radius: 16px; background: linear-gradient(90deg, var(--ic-accent), var(--ic-accent-2)); color: #fff !important; text-decoration: none !important; box-shadow: 0 14px 30px -12px rgba(79,70,229,.7); transition: transform .15s; }
main.learn .learn-wrap .lesson-outro a.next-level:hover { transform: translateY(-2px); }
main.learn .learn-wrap .lesson-outro a.next-level .cta-label { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; color: #fff !important; font-weight: 700; }
main.learn .learn-wrap .lesson-outro a.next-level .cta-title { display: block; font-size: 17px; font-weight: 700; color: #fff !important; }
.lesson-back { margin: 36px 0 0; }

/* ---- the command explorer ------------------------------------------------- */
.explorer { display: grid; grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); gap: 24px; align-items: start; margin: 0 0 32px; }
@media (max-width: 980px) { .explorer { grid-template-columns: minmax(0, 1fr); } }
.explorer-graph { display: grid; gap: 16px; }
.explorer-caption { padding: 18px 22px 20px; }
.explorer-caption-head { display: flex; gap: 12px; align-items: stretch; margin: 0 0 12px; }
.explorer-caption-head pre.cmd { flex: 1; margin: 0 !important; }
.explorer-stepper { display: flex; gap: 6px; flex: none; }
.explorer-stepper button { width: 44px; border: 0; border-radius: 10px; background: var(--ic-chip); color: inherit; font-size: 18px; cursor: pointer; }
.explorer-stepper button:hover { background: var(--ic-accent-tint); color: var(--ic-accent); }
.explorer-actions { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin: 0; }
.explorer-actions code { font-size: 13px; }
.explorer-tools { display: flex; gap: 8px; margin: 0 0 12px; }
.explorer-tools input { flex: 1; min-width: 0; padding: 10px 14px; border: 0; border-radius: 999px; background: var(--ic-chip); font: inherit; font-size: 14px; color: inherit; outline: none; }
.explorer-tools input:focus { box-shadow: 0 0 0 2px var(--ic-accent); }
.explorer-tools .button { padding: 10px 16px; font-size: 14px; }
.chip[hidden], .explorer-group[hidden] { display: none; }
.reference-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; opacity: .8; margin: 0 0 8px; }
.reference-stats b { font-weight: 700; opacity: 1; }
.reference-glance { margin: 12px 0 0; color: var(--ic-text-2); font-size: 15px; }
.reference-glance a { color: var(--ic-accent) !important; font-weight: 700; }
.explorer-caption pre.cmd { margin: 0 0 12px; padding: 12px 14px; background: #0D1117; border-radius: 10px; overflow-x: auto; }
.explorer-caption pre.cmd code { background: none; padding: 0; color: #E6EDF3 !important; font-size: 15px; }
.explorer-caption pre.cmd code::before { content: "$ "; color: #8B949E; }
.explorer-summary { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; margin: 0 0 8px; }
.explorer-repo { margin: 0 0 14px; }
.explorer-list { padding: 18px 20px 14px; max-height: 760px; overflow-y: auto; }
.explorer-hint { margin: 0 0 12px; font-size: 14px; opacity: .75; }
.explorer-group { margin: 0; border-top: 1px solid var(--ic-rule-2); }
.explorer-group:first-of-type { border-top: 0; }
.explorer-group h3 { margin: 0; }
.group-toggle { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 4px; border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; text-align: left; }
.group-title { flex: 1; font-size: 15px; font-weight: 600; }
.group-count { font-size: 12px; font-weight: 700; opacity: .55; background: var(--ic-chip); border-radius: 999px; padding: 3px 9px; }
.group-caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: .5; transition: transform .15s; margin-right: 4px; }
.explorer-group.open .group-caret { transform: rotate(45deg); }
.explorer-group .chips { display: none; padding: 0 0 14px; }
.explorer-group.open .chips { display: flex; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
/* The reference's command list: one row per command, the risk dot then the
   command in the code face but with no code-block look; an indigo tint slides
   in on hover, the chosen one is a navy row. */
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; border-radius: 999px; background: var(--ic-chip); color: var(--ic-text); cursor: pointer; font: inherit; transition: background .15s, box-shadow .15s; }
.explorer-group .chips { flex-direction: column; align-items: stretch; gap: 2px; padding: 2px 0 12px; }
.explorer-group .chip { display: flex; width: 100%; justify-content: flex-start; text-align: left; gap: 10px; padding: 8px 10px 8px 12px; border-radius: 10px; background: transparent; color: var(--ic-ink); position: relative; transition: background .15s, color .15s, transform .15s; }
.explorer-group .chip .dot { transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.explorer-group .chip:hover { background: var(--ic-accent-tint); color: var(--ic-accent); transform: translateX(3px); }
.explorer-group .chip:hover .dot { transform: scale(1.35); }
.explorer-group .chip.on { background: var(--ic-kicker-bg); color: #fff; box-shadow: 0 8px 18px -10px rgba(30,27,75,.6); transform: none; }
.explorer-group .chip.on .dot { box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.explorer-group .chip code { font-size: 13.5px; line-height: 1.4; white-space: normal; word-break: break-word; text-align: left; }
/* the page's inline-code look (main.learn .learn-wrap :not(pre) > code) must not reach these rows */
main.learn .learn-wrap .explorer-group .chip code { background: transparent !important; border: 0; padding: 0; color: inherit !important; font-size: 13.5px; }
.chip code { background: none; padding: 0; font-size: 13px; color: inherit; }
.chip:hover { background: var(--ic-accent-tint); }
.chip.on { background: var(--ic-kicker-bg); color: #fff; }
.chip.on code { color: #fff; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #10b981; flex: none; }
.dot.caution { background: #d9822b; }
.dot.destructive { background: #d13438; }
.risk-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.risk-pick { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 0; border-radius: 999px; background: var(--ic-chip); color: var(--ic-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.risk-pick:hover { background: var(--ic-accent-tint); }
.risk-pick.on { background: var(--ic-kicker-bg); color: #fff; }
.explorer-legend { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--ic-rule-2); display: grid; gap: 6px; }
.explorer-legend li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; opacity: .8; }
.explorer-legend .dot { margin-top: 5px; }
.explorer-legend b { font-weight: 700; margin-right: 4px; }

/* ---- link colours ---------------------------------------------------------
   The site paints every link in <main> blue (orange on hover) with !important
   and a high-specificity selector. The components below carry their own
   colours, so they are restated here with more specificity. */
main.learn .learn-wrap a.button, main.learn .learn-wrap a.button:hover { color: #fff !important; font-weight: 600 !important; text-decoration: none !important; }
main.learn .learn-wrap a.button.ghost { color: inherit !important; }
main.learn .learn-wrap a.button.ghost:hover { color: var(--ic-accent) !important; }
main.learn .learn-wrap .lesson-card, main.learn .learn-wrap .lesson-card:hover,
main.learn .learn-wrap .post-card, main.learn .learn-wrap .post-card:hover,
main.learn .learn-wrap .topic-tile, main.learn .learn-wrap .topic-tile:hover,
main.learn .learn-wrap .node a, main.learn .learn-wrap .node a:hover,
main.learn .learn-wrap .collection-group h2 a, main.learn .learn-wrap .explorer-group h3 a { color: var(--ic-text) !important; font-weight: inherit !important; text-decoration: none !important; }
main.learn .learn-wrap .post-card:hover b, main.learn .learn-wrap .lesson-card:hover b, main.learn .learn-wrap .collection-group h2 a:hover, main.learn .learn-wrap .node a:hover b { color: var(--ic-accent) !important; }
main.learn .learn-wrap .track-more a, main.learn .learn-wrap .section-more a, main.learn .learn-wrap .crumbs a, main.learn .learn-wrap .lesson-outro a, main.learn .learn-wrap .learn-hero a, main.learn .learn-wrap .fine a, main.learn .learn-wrap .text a, main.learn .learn-wrap .why a, main.learn .learn-wrap .lesson-intro a { color: var(--ic-accent) !important; font-weight: 600 !important; }
main.learn .learn-wrap .track-more a:hover, main.learn .learn-wrap .section-more a:hover, main.learn .learn-wrap .crumbs a:hover, main.learn .learn-wrap .lesson-outro a:hover, main.learn .learn-wrap .learn-hero a:hover, main.learn .learn-wrap .fine a:hover, main.learn .learn-wrap .text a:hover, main.learn .learn-wrap .why a:hover, main.learn .learn-wrap .lesson-intro a:hover { color: var(--ic-accent) !important; }
main.learn .learn-wrap .git-sim-frame a { color: var(--accent) !important; font-weight: inherit !important; }

/* ---- topic hubs and collections ------------------------------------------- */
/* every topic, under a topic page's hero: plain links, the page's own marked */
.topic-index { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin: -6px 0 40px; padding: 0 4px; }
.topic-index-label { color: var(--ic-muted) !important; font-size: 14px; font-weight: 600; text-decoration: none !important; }
main.learn .learn-wrap .topic-index a.topic-index-label { color: var(--ic-muted) !important; }
.topic-index a.topic-index-label::after { display: none; }
main.learn .learn-wrap .topic-index a.topic-index-label:hover { color: var(--ic-accent) !important; }
.topic-index a { position: relative; z-index: 0; color: var(--ic-ink) !important; font-size: 15px; font-weight: 600; text-decoration: none !important; }
.topic-index a::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 1px; height: 6px; border-radius: 3px; background: var(--ic-accent-line); z-index: -1; transform: scaleX(0); transform-origin: left center; transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.topic-index a:hover::after, .topic-index a.on::after { transform: scaleX(1); }
.topic-index a.on::after { background: var(--ic-em-marker, #fde047); }
main.learn .learn-wrap .topic-index a { color: var(--ic-ink) !important; font-weight: 600 !important; text-decoration: none !important; }
main.learn .learn-wrap .topic-index a:hover { color: var(--ic-accent) !important; }
@media (prefers-reduced-motion: reduce) { .topic-index a::after { transition: none; } }
/* a topic's three doors, as on the home page: Explore (emerald), Learn
   (indigo), Develop (amber) */
.topic-door { --door: var(--ic-emerald); --door-ink: var(--ic-em-ink); --door-soft: var(--ic-em-soft); --door-line: var(--ic-em-line); margin: 0 0 40px; }
.topic-door > :last-child { margin-bottom: 0; }
.topic-door.door-learn { --door: var(--ic-accent); --door-ink: var(--ic-accent-ink); --door-soft: var(--ic-accent-tint); --door-line: var(--ic-accent-line); }
.topic-door.door-develop { --door: var(--ic-amber); --door-ink: var(--ic-amber-ink); --door-soft: var(--ic-amber-soft); --door-line: var(--ic-amber-line); }
.door-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 0 0 20px; }
/* each door set off from the one before: a rule across the page, then its
   heading with a short bar in the door's color under it */
.topic-door + .topic-door { padding-top: 40px; border-top: 1px solid var(--ic-rule); }
.door-head h2 { position: relative; margin: 0; padding-bottom: 10px; font-size: 26px; line-height: 1.2; }
.door-head h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; border-radius: 2px; background: var(--door); }
.door-verb { display: inline-block; padding: 7px 15px 6px; border-radius: 999px; background: var(--door); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .12em; line-height: 1; text-transform: uppercase; transform: rotate(-2deg); box-shadow: 0 8px 18px -10px var(--door); }
.door-block { margin: 0 0 18px; padding: 22px 24px 20px; border-top: 4px solid var(--door-line); }
/* the command explorer brings its own cards: flat inside this one */
.door-block.topic-explorer .card { box-shadow: none; border: 1px solid var(--ic-rule); }
.door-block h3 { margin: 0 0 4px; font-size: 20px; line-height: 1.3; }
.door-block h3 a { color: var(--door-ink) !important; text-decoration: none !important; }
.door-block .section-lead { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; opacity: .8; }
.door-more { margin: 0; font-size: 14px; line-height: 1.55; opacity: .85; }
.door-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.door-split, .door-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; align-items: start; }
.door-split .door-block, .door-tools .door-block { margin: 0; }
.door-block.related { grid-column: 1 / -1; }  /* the thumbnails get the full width; Go deeper sits under */
.door-block.related .article-grid { margin: 0 0 14px; }
.door-devlands { margin: 18px 0 0; font-size: 15px; line-height: 1.55; }
.door-devlands a { color: var(--door-ink) !important; font-weight: 700; }
.topic-lessons .lessons li { border-top-color: var(--ic-chip); }
.track-more { margin: 18px 0 0; font-size: 14px; font-weight: 600; }
/* Explore: the topic's cheat sheet cards */
.sheet-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 0 0 16px; }
.sheet-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px 10px 12px; border: 1px solid var(--ic-rule); border-radius: 12px; background: var(--ic-card); color: var(--ic-text) !important; text-decoration: none !important; transition: transform .15s, border-color .15s, box-shadow .15s; }
.sheet-card:hover { transform: translateY(-2px); border-color: var(--door-line); box-shadow: 0 12px 24px -16px rgba(15, 23, 42, .4); }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sheet-head b { font-size: 14px; font-weight: 700; line-height: 1.3; }
.risk-dot { flex: none; width: 9px; height: 9px; margin-top: 4px; border-radius: 50%; }
.risk-dot.safe { background: #16a34a; }
.risk-dot.caution { background: #d97706; }
.risk-dot.destructive { background: #dc2626; }
.sheet-shot { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 8px; background: #f6f8fa; }
.sheet-shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sheet-card .dark-only { display: none; }
:root[data-theme="dark"] .sheet-card .dark-only { display: block; }
:root[data-theme="dark"] .sheet-card .light-only { display: none; }
:root[data-theme="dark"] .sheet-shot { background: #16171d; }
.sheet-card code { overflow: hidden; padding: 0; background: none; color: var(--ic-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
/* Explore: the git-sim viewer's demos */
.demo-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.demo-chip { padding: 7px 12px; border: 1px solid var(--door-line); border-radius: 999px; background: var(--door-soft); text-decoration: none !important; transition: background-color .15s, border-color .15s; }
.demo-chip code { padding: 0; background: none; color: var(--door-ink); font-size: 13px; font-weight: 600; }
.demo-chip:hover { border-color: var(--door); }
/* Learn: the workflow demos */
.workflow-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.workflow-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--door-line); border-radius: 12px; background: var(--door-soft); color: var(--ic-text) !important; text-decoration: none !important; transition: transform .15s, box-shadow .15s; }
.workflow-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(15, 23, 42, .4); }
.workflow-card b { color: var(--ic-ink); font-size: 15px; line-height: 1.35; }
.workflow-card span { font-size: 13.5px; line-height: 1.45; opacity: .8; }
.workflow-card small { margin-top: 2px; color: var(--door-ink); font-size: 12px; font-weight: 700; }
/* the site colors links in the learn pages; these cards keep their own colors */
main.learn .learn-wrap .sheet-card, main.learn .learn-wrap .sheet-card:hover, main.learn .learn-wrap .workflow-card, main.learn .learn-wrap .workflow-card:hover { color: var(--ic-text) !important; }
main.learn .learn-wrap .sheet-card b, main.learn .learn-wrap .workflow-card b { color: var(--ic-ink) !important; }
main.learn .learn-wrap .workflow-card span { color: var(--ic-text) !important; }
main.learn .learn-wrap .workflow-card small { color: var(--door-ink) !important; }
/* Develop: commands to type */
.topic-door pre.cmd { margin: 0 0 12px; padding: 12px 14px; overflow-x: auto; border-radius: 10px; background: #0D1117; }
.topic-door pre.cmd code { display: block; padding: 2px 0; background: none; color: #E6EDF3 !important; font-size: 14px; }
.topic-door pre.cmd code::before { content: "$ "; color: #8B949E; }
@media (max-width: 600px) {
  .door-head h2 { font-size: 22px; }
  .door-block { padding: 18px 16px 16px; }
  .sheet-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .door-split, .door-tools { grid-template-columns: minmax(0, 1fr); }
}
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li { margin: 0; border-top: 1px solid var(--ic-rule-2); }
.post-list li:first-child { border-top: 0; }
.post-card { display: block; padding: 12px 6px; text-decoration: none !important; color: inherit !important; border-radius: 8px; transition: background .15s; }
.post-card:hover { background: var(--ic-accent-tint); }
.post-card b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 3px; line-height: 1.35; }
.post-card span { display: block; font-size: 13px; opacity: .72; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.post-list.columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0 26px; }
.post-list.columns li { border-top: 1px solid var(--ic-rule-2); }
.post-list.columns li:first-child { border-top: 1px solid var(--ic-rule-2); }
.collection-group { margin: 0 0 22px; padding: 26px 28px 20px; }
.collection-group h2 { font-size: 24px; margin: 0 0 6px; }
.collection-group h2 a { color: inherit !important; text-decoration: none; }
.collection-group h2 a:hover { color: var(--ic-accent) !important; }
.collection-group .section-lead { margin: 0 0 12px; opacity: .75; font-size: 15px; }
.section-more { margin: 14px 0 0; font-size: 14px; font-weight: 600; }

/* ---- the articles page: featured row, series card, thumbnail cards -------- */
.card-kicker { display: inline-block; align-self: flex-start; margin: 0 0 10px; padding: 6px 10px; border-radius: 999px; font: 700 11px/1 sans-serif; font-family: inherit; letter-spacing: .12em; text-transform: uppercase; color: var(--hue-ink, var(--ic-accent-ink)); background: var(--hue-soft, var(--ic-accent-soft)); border: 1px solid var(--hue-line, var(--ic-accent-line)); }
.card-desc { display: block; font-size: 14px; line-height: 1.5; color: var(--ic-text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card-meta { display: block; margin-top: 10px; font-size: 12px; color: var(--ic-muted); }
.featured-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0 0 22px; }
.featured-card { --hue: var(--ic-accent); --hue-soft: var(--ic-accent-soft); --hue-ink: var(--ic-accent-ink); --hue-line: var(--ic-accent-line); --blob: #c4b5fd; position: relative; overflow: hidden; display: flex; flex-direction: column; background: var(--ic-card); border: 1px solid var(--ic-rule-2); border-bottom: 6px solid var(--hue-line); border-radius: 22px; box-shadow: var(--ic-shadow-card); text-decoration: none !important; color: inherit !important; transition: transform .2s, box-shadow .2s; }
.featured-card.emerald { --hue: var(--ic-emerald); --hue-soft: var(--ic-em-soft); --hue-ink: var(--ic-em-ink); --hue-line: var(--ic-em-line); --blob: var(--ic-em-line); }
.featured-card.amber { --hue: var(--ic-amber); --hue-soft: var(--ic-amber-soft); --hue-ink: var(--ic-amber-ink); --hue-line: var(--ic-amber-line); --blob: #fde047; }
.featured-card::before { content: ""; position: absolute; z-index: 0; right: -70px; bottom: -90px; width: 200px; height: 200px; border-radius: 50%; background: var(--blob); opacity: var(--ic-blob-opacity); pointer-events: none; transition: transform .3s; }
.featured-card > * { position: relative; z-index: 1; }
.featured-card:hover { transform: translateY(-4px) rotate(-.3deg); box-shadow: var(--ic-shadow-hover); }
.featured-card:hover::before { transform: scale(1.1); }
.featured-thumb { display: block; margin: 12px 12px 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 16px; background: var(--ic-panel); }
.featured-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.featured-card:hover .featured-thumb img { transform: scale(1.03); }
.featured-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 18px 18px; }
.featured-body b { display: block; margin: 0 0 6px; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--ic-ink); }
main.learn .learn-wrap .featured-card:hover .featured-body b { color: var(--ic-accent); }
.series-card { margin: 0 0 22px; padding: 26px 28px 22px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 20px 34px; align-items: start; --hue-ink: var(--ic-rose-ink); --hue-soft: var(--ic-rose-soft); --hue-line: var(--ic-rose-line); }
.series-head h2 { margin: 0 0 8px; font-size: 24px; line-height: 1.2; }
.series-head .section-lead { margin: 0; font-size: 15px; line-height: 1.55; opacity: .8; }
.series-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.series-step { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; text-decoration: none !important; color: inherit !important; transition: background .15s; }
.series-step:hover { background: var(--ic-accent-tint); }
.series-num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, var(--ic-rose), #fb7185); color: #fff; font: 700 13px/1 sans-serif; font-family: inherit; box-shadow: 0 4px 10px -4px rgba(0,0,0,.35); }
.series-text { display: flex; flex-direction: column; min-width: 0; }
.series-text b { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--ic-ink); }
.series-text span { font-size: 12px; color: var(--ic-muted); }
main.learn .learn-wrap .series-step:hover .series-text b { color: var(--ic-accent); }
.article-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.article-card { display: flex; flex-direction: column; height: 100%; padding: 10px 10px 16px; border: 1px solid var(--ic-rule-2); border-radius: 18px; background: var(--ic-card); text-decoration: none !important; color: inherit !important; transition: transform .2s, box-shadow .2s, border-color .2s; }
.article-card:hover { transform: translateY(-3px); box-shadow: var(--ic-shadow-hover); border-color: var(--ic-accent-line); }
.article-thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: var(--ic-panel); margin: 0 0 12px; }
.article-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.article-card b { display: block; margin: 0 6px 6px; font-size: 15.5px; line-height: 1.35; font-weight: 700; color: var(--ic-ink); }
.article-card .card-desc, .article-card .card-meta { margin-left: 6px; margin-right: 6px; }
main.learn .learn-wrap .article-card:hover b { color: var(--ic-accent); }
/* each topic group takes its topic's hue on the heading's marker */
.articles-group h2 { position: relative; display: inline-block; }
.articles-group h2::after { content: ""; position: absolute; left: -4px; right: -4px; bottom: 2px; height: 10px; z-index: -1; border-radius: 3px; background: var(--hue-soft, var(--ic-accent-soft)); transform: rotate(-1deg); }
@media (max-width: 900px) { .featured-row { grid-template-columns: minmax(0, 1fr); } .series-card { grid-template-columns: minmax(0, 1fr); } .series-steps { grid-template-columns: minmax(0, 1fr); } }


/* ---- the level-complete card's email form, and the finished journey's Devlands step ---- */
.complete-save { margin: 18px 0 0; padding: 16px 18px 12px; border: 1px solid var(--ic-rule); border-radius: 14px; background: var(--ic-panel); text-align: left; }
.complete-save-title { margin: 0 0 4px; font-weight: 700; color: var(--ic-ink); }
.complete-save .fine { margin: 0 0 10px; }
.complete-save .input-group { max-width: 420px; }
.complete-save .g-recaptcha { transform: scale(.85); transform-origin: 0 0; margin: 6px 0 -10px; }
.complete-save form.done .g-recaptcha, .complete-save form.done .input-group { display: none !important; }
.complete-save form span[id^="emailCaptureConfirmation"] { display: none; color: var(--ic-em-ink, #047857); font-weight: 600; }
.complete-save form.done span[id^="emailCaptureConfirmation"] { display: block; }
.devlands-cta { background: linear-gradient(135deg, #4f46e5, #7c3aed) !important; border-color: transparent !important; }
.complete-devlands { margin-top: 10px; }
/* the hub's Continue button is display: grid !important, which beat the hidden attribute once every level was done */
.continue-cta[hidden] { display: none !important; }
.all-done .fine { margin: 10px 0 0; }

/* the complete card's offers: cheat sheet, certificate */
.complete-offer { border-color: var(--ic-accent-line); background: linear-gradient(160deg, var(--ic-accent-soft), var(--ic-panel) 60%); }
.complete-offer code { font-size: .92em; }
.complete-offer .cert-name { max-width: 420px; margin: 0 0 10px; border-radius: 12px; }
.complete-offer .capture-reward { margin: 10px 0 0; }
.complete-offer .capture-reward .button { display: inline-block; padding: 10px 18px; border-radius: 999px; background: var(--ic-kicker-bg); color: #fff !important; font-weight: 700; text-decoration: none; }
.complete-offer .capture-reward .button:hover { filter: brightness(1.15); }

/* the complete card's email offer stands apart from the recap above it: a bold
   bordered panel with a gift badge, a bigger title and a solid button */
.complete-save { position: relative; margin: 22px 0 0; padding: 20px 22px 16px 78px; border: 2px solid var(--ic-accent); border-radius: 18px; background: linear-gradient(135deg, var(--ic-accent-soft), var(--ic-card) 70%); box-shadow: 0 16px 34px -22px var(--ic-accent); }
.complete-save::before { content: "\1F4EC"; position: absolute; left: 20px; top: 20px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--ic-kicker-bg); font-size: 22px; box-shadow: 0 8px 18px -10px var(--ic-kicker-bg); }
#completeSheet::before { content: "\1F4C4"; }
#completeCert::before { content: "\1F3C6"; }
.complete-save-title { margin: 0 0 4px; font-size: 18px; line-height: 1.3; }
.complete-save .input-group .form-control { height: 44px; border: 1px solid var(--ic-accent-line); background: var(--ic-card); }
.complete-save .input-group .btn { height: 44px; padding: 0 20px; background: var(--ic-accent) !important; border-color: var(--ic-accent) !important; color: #fff !important; font-weight: 700; }
.complete-save .input-group .btn:hover { filter: brightness(1.1); }
.complete-offer .cert-name { height: 44px; border: 1px solid var(--ic-accent-line); background: var(--ic-card); }
@media (max-width: 560px) { .complete-save { padding: 18px 16px 14px; } .complete-save::before { position: static; margin: 0 0 10px; } }

/* the foot of a lesson page: the previous level and the level map, as two cards */
.lesson-nav { display: flex; flex-wrap: wrap; gap: 12px; margin: 36px 0 0; }
main.learn .learn-wrap a.lesson-nav-link, a.lesson-nav-link { display: inline-flex; align-items: center; gap: 12px; min-width: 220px; padding: 12px 18px 12px 14px; border: 1px solid var(--ic-rule); border-radius: 16px; background: var(--ic-card); color: var(--ic-text) !important; text-decoration: none !important; box-shadow: var(--ic-shadow-card); transition: border-color .15s, transform .15s, box-shadow .15s; }
main.learn .learn-wrap a.lesson-nav-link:hover, a.lesson-nav-link:hover { border-color: var(--ic-accent-line); transform: translateY(-2px); box-shadow: 0 14px 28px -18px var(--ic-accent); }
.lesson-nav-link .nav-arrow { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--ic-accent-soft); color: var(--ic-accent-ink); font-size: 17px; font-weight: 700; }
.lesson-nav-link .nav-text { display: flex; flex-direction: column; gap: 2px; }
.lesson-nav-link .nav-label { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ic-muted); }
.lesson-nav-link .nav-title { font-size: 15.5px; font-weight: 700; color: var(--ic-ink); }
.lesson-nav-link.map { margin-left: auto; }
@media (max-width: 560px) { .lesson-nav-link, .lesson-nav-link.map { flex: 1 1 100%; margin-left: 0; } }

.lesson-nav { margin: 36px 20px 0; }

/* a <nav>, which the site's navbar styles would otherwise give a shadow line */
main.learn nav.lesson-nav { box-shadow: none !important; background: none !important; border: 0 !important; }

/* the page's way back, as cards */
.learn .lesson-nav { margin: 32px 0 0; }

/* a group with a single sheet shows it as one wide card, picture beside the text, instead of a lone tile */
.article-grid > li:only-child { grid-column: 1 / -1; }
.article-grid > li:only-child .article-card { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 22px; align-items: start; padding: 12px; }
.article-grid > li:only-child .article-thumb { grid-row: 1 / span 3; margin: 0; }
.article-grid > li:only-child .article-card b { margin-top: 8px; font-size: 19px; }
@media (max-width: 720px) { .article-grid > li:only-child .article-card { display: flex; } .article-grid > li:only-child .article-thumb { margin: 0 0 12px; } }

/* the long connector from the end of a row down to the next: a line, never a disc.
   A done level's arrow disc is green with a glow; on this connector that glow drew
   a pale green band under the whole row. */
.level-node.done:nth-child(4n)::after { box-shadow: none; background-color: transparent; }