/* First Badges - felt sash on scout-green paper. Light and dark themes via [data-theme] on <html>. */
:root {
  --sans: "Avenir Next", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --serif: "Rockwell", "Roboto Slab", "Georgia", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --bg: #eef0e4; --paper: #fbfbf5; --panel: #ffffff; --ink: #1d2a1f; --muted: #556052; --line: #cfd5c2;
  --forest: #2f5a3a; --forest-ink: #ffffff; --forest-soft: #e1ebdc; --khaki: #c8b47e; --khaki-deep: #a8935c; --stitch: #fff7df;
  --felt: #3b5e45; --felt-2: #34553e; --brass: #7a5e10; --brass-ink: #fff;
  --ok: #2e6b35; --warn: #8a4b00; --warn-bg: #fff2dc; --info: #2c5578; --info-bg: #e5eff8;
  --chip: #e7ebdc; --chip-ink: #2a3a2c;
  --a-hands: #9a4a1c; --a-kitchen: #b3332a; --a-money: #2e7d32; --a-around: #1f5f99; --a-people: #7b3f8c; --a-body: #0f7676; --a-mind: #8a6400; --a-home: #56662a; --a-none: #6b6b6b;
  --on-fill: #ffffff;
}
:root[data-theme="dark"] {
  --bg: #121813; --paper: #18201a; --panel: #1d261f; --ink: #e6ecde; --muted: #a7b3a2; --line: #34413a;
  --forest: #7fc08f; --forest-ink: #0e1a11; --forest-soft: #23352a; --khaki: #6f6038; --khaki-deep: #5a4d2c; --stitch: #f3e6bf;
  --felt: #24382b; --felt-2: #1f3125; --brass: #e2c063; --brass-ink: #1b1505;
  --ok: #8fd39a; --warn: #f2b765; --warn-bg: #3a2a12; --info: #9cc6ee; --info-bg: #182a3b;
  --chip: #26322a; --chip-ink: #dbe5d3;
  --a-hands: #e8956a; --a-kitchen: #f08a7e; --a-money: #79c97c; --a-around: #78b2ec; --a-people: #cf98e0; --a-body: #5fcaca; --a-mind: #e6c25a; --a-home: #b5c574; --a-none: #aaaaaa;
  --on-fill: #11160f;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.5 var(--sans); }
a { color: var(--forest); }
button, input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: 0.86rem; } .muted { color: var(--muted); } .mono { font-family: var(--mono); }

/* Header */
.bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.back { text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.brand { display: flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 1.1rem; }
.logo { width: 28px; height: 28px; }
.lg-sash { fill: var(--khaki); }
.lg-b1 { fill: var(--a-kitchen); stroke: var(--stitch); stroke-width: 1.4; stroke-dasharray: 2 1.6; }
.lg-b2 { fill: var(--a-around); stroke: var(--stitch); stroke-width: 1.4; stroke-dasharray: 2 1.6; }
.session { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 0.88rem; cursor: pointer; text-decoration: none; }
.pill:hover:not(:disabled) { border-color: var(--forest); }
.pill.solid { background: var(--forest); border-color: var(--forest); color: var(--forest-ink); }
.pill.ghost { background: transparent; cursor: default; }
.pill.tiny { padding: 3px 10px; font-size: 0.8rem; }
.pill:disabled { opacity: 0.5; cursor: not-allowed; }

/* Hero */
main { max-width: 1180px; margin: 0 auto; padding: 0 16px 40px; }
.hero { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: 26px 0 14px; }
.kicker { margin: 0; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: 700; color: var(--brass); }
h1 { font-family: var(--serif); font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1.05; margin: 4px 0 10px; }
.lede { max-width: 62ch; margin: 0 0 14px; }
.samples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { border: 1px solid var(--line); background: var(--chip); color: var(--chip-ink); border-radius: 999px; padding: 5px 12px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.chip.on { background: var(--forest); color: var(--forest-ink); border-color: var(--forest); }
.hero-art { position: relative; width: 200px; height: 150px; background: linear-gradient(135deg, transparent 32%, var(--khaki) 32%, var(--khaki) 64%, transparent 64%); border-radius: 12px; }
.ha { position: absolute; width: 58px; height: 58px; border-radius: 50%; border: 3px dashed var(--stitch); box-shadow: 0 0 0 4px var(--khaki-deep); }
.ha1 { left: 8px; top: 6px; background: var(--a-kitchen); } .ha2 { left: 72px; top: 48px; background: var(--a-money); } .ha3 { left: 136px; top: 90px; background: var(--a-around); }

/* Panels */
.layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 18px; align-items: start; }
.col-in, .col-out { display: grid; gap: 18px; min-width: 0; }
.col-out { position: sticky; top: 64px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; min-width: 0; }
main > .panel { margin-top: 18px; }
.ph { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-family: var(--serif); font-size: 1.2rem; flex-wrap: wrap; }
.step-tag { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--forest); color: var(--forest-ink); font: 700 0.85rem var(--sans); }
.lbl { display: block; font-weight: 600; font-size: 0.88rem; margin: 10px 0 4px; }
input[type=text], select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--paper); }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 3px solid color-mix(in srgb, var(--forest) 45%, transparent); outline-offset: 1px; }
.grid3 { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quick { margin-top: 6px; }
.quick-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.qa { border: 1px dashed var(--line); background: var(--paper); border-radius: 999px; padding: 3px 10px; font-size: 0.8rem; cursor: pointer; color: var(--ink); }
.qa:hover { border-color: var(--forest); }
.sub { font-size: 0.92rem; margin: 14px 0 6px; }

/* The page's read */
.lean { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.lean-l { display: grid; gap: 4px; max-width: 32ch; }
.lean-r { display: flex; gap: 14px; }
.lean-r div { display: grid; text-align: center; }
.lean-r b { font: 700 1.4rem var(--serif); }
.lean-r span { font-size: 0.75rem; color: var(--muted); }
.badge { display: inline-block; width: max-content; border-radius: 6px; padding: 3px 10px; font-weight: 700; font-size: 0.85rem; background: var(--chip); color: var(--chip-ink); border: 1px solid var(--line); }
.badge.v-starter { background: var(--info-bg); color: var(--info); border-color: currentColor; }
.badge.v-half { background: var(--warn-bg); color: var(--warn); border-color: currentColor; }
.badge.v-full { background: var(--forest-soft); color: var(--ok); border-color: currentColor; }
.tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li { background: var(--chip); color: var(--chip-ink); border-radius: 999px; padding: 2px 10px; font-size: 0.82rem; }
.ideas { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.ideas li { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 5px 8px; font-size: 0.85rem; background: var(--paper); }
.ideas .dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.ideas .ia { color: var(--muted); font-size: 0.75rem; margin-left: auto; white-space: nowrap; }
li.none { color: var(--muted); font-style: italic; list-style: none; }
.rules { margin: 12px 0 0; }

/* Run */
.go { width: 100%; margin-top: 4px; border: 0; border-radius: 12px; padding: 13px 16px; background: var(--forest); color: var(--forest-ink); font: 700 1.05rem var(--sans); cursor: pointer; }
.go:disabled { opacity: 0.55; cursor: not-allowed; }
.meter { margin: 8px 0 0; }
.note { background: var(--info-bg); color: var(--info); border-radius: 10px; padding: 8px 10px; font-size: 0.88rem; margin: 6px 0; }
.note.warn { background: var(--warn-bg); color: var(--warn); }
.gate { background: var(--warn-bg); color: var(--warn); border-radius: 10px; padding: 8px 10px; font-size: 0.88rem; }
.gate .pill { margin-left: 4px; }

/* The sash */
.stage-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.seg-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.sw { border: 0; background: var(--paper); padding: 5px 14px; font-weight: 700; font-size: 0.85rem; cursor: pointer; color: var(--ink); }
.sw.on { background: var(--forest); color: var(--forest-ink); }
.sw:disabled { opacity: 0.45; cursor: not-allowed; }
.felt { border-radius: 14px; padding: 16px 12px 22px; overflow: hidden; color: #f4f1e3;
  background: radial-gradient(circle at 20% 15%, rgba(255,255,255,0.07), transparent 40%), repeating-linear-gradient(45deg, var(--felt) 0 3px, var(--felt-2) 3px 6px); }
.sash-title { margin: 0 0 10px; font: 700 1.15rem var(--serif); color: #f6f1dc; overflow-wrap: anywhere; }
.sash-band { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; padding: 18px 12px 16px; margin: 8px 6px;
  background: linear-gradient(180deg, var(--khaki), var(--khaki-deep)); border-radius: 6px; transform: rotate(-3deg);
  box-shadow: 0 6px 14px rgba(0,0,0,0.3), inset 0 0 0 5px var(--khaki-deep), inset 0 0 0 6px rgba(255,247,223,0.85); }
.sash-band::before { content: ""; position: absolute; inset: 9px; border: 2px dashed rgba(255,247,223,0.75); border-radius: 4px; pointer-events: none; }
.sash-band.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sash-band.is-draft .bdg .bface { opacity: 0.82; }
.sash-empty { grid-column: 1 / -1; text-align: center; color: #2a2414; font-weight: 600; margin: 18px 0; }
.bdg { position: relative; display: grid; justify-items: center; gap: 4px; background: none; border: 0; padding: 4px 2px; cursor: pointer; color: #231d0e; min-width: 0; --c: var(--a-none); }
.bdg .bface { width: min(88px, 100%); height: auto; aspect-ratio: 1; transition: transform 0.15s; }
.bdg:hover .bface, .bdg.sel .bface { transform: scale(1.06); }
.bdg.sel .bface { filter: drop-shadow(0 0 0 #fff) drop-shadow(0 3px 5px rgba(0,0,0,0.35)); }
.bname { font-weight: 800; font-size: 0.82rem; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
.bsub { font-size: 0.72rem; line-height: 1.1; text-align: center; color: #241c0b; }
.bdg.sel .bname { text-decoration: underline; text-underline-offset: 3px; }
:root[data-theme="dark"] .bdg, :root[data-theme="dark"] .sash-empty { color: #f6efd6; }
:root[data-theme="dark"] .bsub { color: #e8dcb6; }
.a-hands { --c: var(--a-hands); } .a-kitchen { --c: var(--a-kitchen); } .a-money { --c: var(--a-money); } .a-around { --c: var(--a-around); }
.a-people { --c: var(--a-people); } .a-body { --c: var(--a-body); } .a-mind { --c: var(--a-mind); } .a-home { --c: var(--a-home); } .a-none { --c: var(--a-none); }
.bface .b-ring { fill: var(--c); }
.bface .b-fill { fill: var(--paper); }
.bface .b-stitch { fill: none; stroke: var(--stitch); stroke-width: 2; stroke-dasharray: 4 3; }
.bface .b-icon path { fill: none; stroke: var(--c); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.earned .bface .b-fill { fill: var(--c); }
.earned .bface .b-icon path { stroke: var(--on-fill); }
.bface .b-check circle { fill: var(--brass); stroke: var(--stitch); stroke-width: 1.5; }
.bface .b-check path { fill: none; stroke: var(--brass-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.weeks { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 12px 0 0; }
.wk { display: flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-left: 6px solid var(--c); border-radius: 8px; padding: 3px 8px; font-size: 0.8rem; background: var(--paper); }
.wk-n { font-weight: 800; font-family: var(--mono); font-size: 0.75rem; }
.wk.nofit { border-style: dashed; border-left-style: solid; color: var(--muted); }
.wk.earned .wk-b { text-decoration: line-through; }

/* The requirement card */
.req { margin-top: 14px; border: 1px solid var(--line); border-top: 6px solid var(--c); border-radius: 12px; padding: 14px; background: var(--paper); }
.req-head { display: flex; gap: 12px; align-items: center; }
.req-head .bface { width: 64px; height: 64px; flex: none; }
.req-title { min-width: 0; }
.req-title h3 { margin: 0; font: 700 1.25rem var(--serif); overflow-wrap: anywhere; }
.req-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.req-chips span { border-radius: 999px; padding: 1px 9px; font-size: 0.76rem; font-weight: 700; border: 1px solid var(--line); }
.chip-area { color: var(--c); border-color: var(--c) !important; background: var(--panel); }
.chip-step.s-ready { background: var(--forest-soft); color: var(--ok); }
.chip-step.s-stretch { background: var(--info-bg); color: var(--info); }
.chip-step.s-draft { background: var(--chip); color: var(--chip-ink); }
.chip-week { background: var(--chip); color: var(--chip-ink); }
.req-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 12px 0 0; font-size: 0.9rem; }
.req-facts dt { font-weight: 700; color: var(--muted); }
.req-facts dd { margin: 0; }
.lesson h4, .look h4 { margin: 12px 0 6px; font-size: 0.95rem; }
.need { margin: 0 0 6px; font-size: 0.9rem; }
.say { margin: 0 0 8px; font-family: var(--serif); font-style: italic; }
.arc { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; counter-reset: arc; }
.arc li { display: grid; grid-template-columns: 84px 1fr; gap: 8px; align-items: start; font-size: 0.9rem; }
.arc-k { font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; background: var(--chip); color: var(--chip-ink); border-radius: 6px; padding: 2px 6px; text-align: center; }
.look { border: 2px dashed var(--c); border-radius: 10px; padding: 2px 12px 8px; margin-top: 12px; }
.look p { margin: 0; }
.practice { font-size: 0.9rem; margin: 10px 0 0; }
.safety { font-size: 0.9rem; margin: 10px 0 0; background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 6px 10px; }
.req-act { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* Progress, result, exports, history */
.stages { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 4px; }
.stage { color: var(--muted); } .stage.active { color: var(--ink); font-weight: 700; } .stage.done { color: var(--ok); }
.stage-ic { display: inline-block; width: 1.2em; font-family: var(--mono); }
.raw { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 10px; font: 0.8rem/1.45 var(--mono); max-height: 360px; overflow: auto; }
.res-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.res-head h2 { margin: 0; font-family: var(--serif); overflow-wrap: anywhere; }
.rnote { font-family: var(--serif); font-size: 1.02rem; }
.askmore, .nextbox { border: 1px solid var(--line); border-radius: 10px; padding: 4px 12px 12px; margin: 10px 0; background: var(--paper); }
.asks { margin: 6px 0 10px; padding-left: 20px; }
.recon { margin: 6px 0; padding-left: 18px; }
.recon li { margin: 3px 0; }
.recon li.warn { color: var(--warn); } .recon li.info { color: var(--info); }
.cardrow { display: flex; flex-wrap: wrap; gap: 8px; }
.hlist { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.hrow { display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; flex-wrap: wrap; }
.hinfo { display: grid; flex: 1 1 200px; min-width: 0; }
.hinfo b { overflow-wrap: anywhere; }
.foot { max-width: 1180px; margin: 0 auto; padding: 10px 16px 40px; color: var(--muted); font-size: 0.86rem; }
.toasts { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 20; max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--forest); border-radius: 10px; padding: 9px 12px; box-shadow: 0 6px 16px rgba(0,0,0,0.18); font-size: 0.9rem; transition: opacity 0.5s; }
.toast.err { border-left-color: var(--warn); }
.toast.gone { opacity: 0; }
.print-sheet { display: none; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .col-out { position: static; }
  .hero { grid-template-columns: 1fr; }
  .hero-art { display: none; }
}
@media (max-width: 520px) {
  .sash-band, .sash-band.n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); transform: rotate(-2deg); }
  .sash-band.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid3, .grid2 { grid-template-columns: 1fr; }
  .lean-r { gap: 10px; }
  .arc li { grid-template-columns: 1fr; gap: 2px; }
  .arc-k { justify-self: start; }
  .req-facts { grid-template-columns: 1fr; }
  .bar { gap: 8px; }
}

/* Print: the lesson cards only, one badge per block. */
@media print {
  body { background: #fff; color: #000; }
  .bar, main, .foot, .toasts { display: none !important; }
  .print-sheet { display: block !important; font: 11pt/1.4 Georgia, serif; }
  .print-sheet .pcard { border: 1.5pt dashed #555; border-radius: 10pt; padding: 10pt 14pt; margin: 0 0 12pt; break-inside: avoid; }
  .print-sheet h2 { margin: 0 0 4pt; font-size: 14pt; }
  .print-sheet h1 { font-size: 18pt; margin: 0 0 10pt; }
  .print-sheet .pmeta { font-size: 9pt; color: #444; margin: 0 0 6pt; }
  .print-sheet ol { margin: 4pt 0; }
}
@media print { .print-sheet .pearn { font-size: 10pt; margin: 6pt 0 0; } }