/*
 * The annotated plan sheet.
 *
 * Lifted from the standalone prototype so every plan shares one stylesheet
 * rather than carrying its own copy. The page-level resets the prototype
 * needed are gone: this now renders inside the site's layout, where a rule
 * on `body` would fight the site theme rather than style a blank page.
 *
 * The `--paper` and `--ink` variables stay scoped to the svg, because the
 * sheet is a sheet of paper in both light and dark mode — the surround
 * changes, the drawing does not.
 */
.plan-page{max-width:1340px;margin:0 auto;padding:20px 16px 48px}
.plan-crumbs{font-size:14px;color:var(--mut);margin:0 0 10px}
.plan-crumbs a{color:inherit}
.plan-place{margin:0 0 10px;color:var(--mut);font-weight:600}
.plan-lede{margin:0 0 16px;color:var(--mut);max-width:64ch}
.plan-teaches{margin:28px 0 0;max-width:72ch}
.plan-teaches h2{font:700 22px/1.15 'Barlow Condensed','Arial Narrow',sans-serif;margin:0 0 8px}
.plan-teaches ul{margin:0 0 14px;padding-left:20px}
.plan-teaches li{margin:0 0 6px}
.plan-note{font-size:14px;color:var(--mut);border-left:3px solid var(--line);padding-left:12px;margin:0}

:root{--bg:#e4e7e9;--panel:#fff;--txt:#1b2430;--mut:#58636e;--line:#c9cfd4;--hi:#e0431e;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#12161a;--panel:#1c222a;--txt:#e7ebee;--mut:#9aa6b1;--line:#333c46;--hi:#ff7a55}}
:root[data-theme="dark"]{--bg:#12161a;--panel:#1c222a;--txt:#e7ebee;--mut:#9aa6b1;--line:#333c46;--hi:#ff7a55}
*,*:before,*:after{box-sizing:inherit}
h1{font:700 30px/1.1 'Barlow Condensed','Arial Narrow',sans-serif;margin:0 0 6px}
.lede{margin:0 0 14px;color:var(--mut);max-width:64ch}
.bar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.bar button{font:600 14px Barlow,system-ui,sans-serif;padding:6px 12px;border:1px solid var(--line);background:var(--panel);color:var(--txt);border-radius:6px;cursor:pointer}
.bar button[aria-pressed=false]{opacity:.5;text-decoration:line-through}
.wrap{display:flex;gap:16px;align-items:flex-start}
.sheetbox{flex:1;min-width:0;overflow-x:auto;border-radius:4px;box-shadow:0 2px 14px rgba(0,0,0,.28)}
aside{width:300px;flex:none;position:sticky;top:calc(12px + env(safe-area-inset-top,0px));background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:16px}
aside h2{font:700 22px/1.15 'Barlow Condensed','Arial Narrow',sans-serif;margin:0 0 6px}
aside p{margin:0;color:var(--txt)}
@media (max-width:900px){.wrap{flex-direction:column}aside{width:100%;position:sticky;top:auto;bottom:0;border-radius:12px 12px 0 0;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));max-height:36vh;overflow:auto}}
svg{display:block;width:100%;min-width:780px;height:auto;--paper:#fbfbf8;--ink:#1b2430;--soft:#68737e;--esm:#2a62a8;--wet:#2f7d6d;font-family:'Barlow Condensed','Arial Narrow',sans-serif}
svg text{fill:var(--ink);letter-spacing:.02em}
.v{fill:none;stroke:var(--ink)}
.f{fill:var(--ink);fill-opacity:.04;stroke:none}
.e{stroke:var(--esm)}.w{stroke:var(--wet)}
.te{fill:var(--esm)}.ts{fill:var(--soft)}
.s{fill:var(--ink)}
.h{fill:none;stroke:transparent;pointer-events:stroke}
.hf{fill:transparent;pointer-events:all}
.halo{paint-order:stroke;stroke:var(--paper);stroke-width:3px}
.part{cursor:pointer;outline:none}
.part.on .v{stroke:var(--hi)}
.part.on .f{fill:var(--hi);fill-opacity:.16}
.part.on .s{fill:var(--hi)}
.part.on text{fill:var(--hi)}
svg.x-dim .dim,svg.x-env .env,svg.x-str .str,svg.x-wet .wetl{display:none}
@media (prefers-reduced-motion:no-preference){.part .v,.part text{transition:stroke .12s,fill .12s}}

/* The index. A card says what the plan is, where, and how much of it is
   explained — the last one because "28 parts explained" is the honest
   measure of whether a sheet is worth opening. */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin:0 0 28px}
.plan-card{display:block;padding:18px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:inherit;text-decoration:none;transition:border-color .12s,transform .12s}
.plan-card:hover,.plan-card:focus-visible{border-color:var(--hi);transform:translateY(-2px)}
.plan-card-kind{display:inline-block;font:600 11px/1 Barlow,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--hi);margin:0 0 8px}
.plan-card h2{font:700 20px/1.15 'Barlow Condensed','Arial Narrow',sans-serif;margin:0 0 4px}
.plan-card-place{margin:0 0 8px;font-size:13px;color:var(--mut)}
.plan-card-summary{margin:0 0 10px;font-size:14px;line-height:1.5}
.plan-card-count{font-size:12px;color:var(--mut)}

/* Topographic sheets.
   Index contours are heavier and carry the height; intermediates are thin.
   That weight difference is the whole reading convention — it is how an eye
   finds a number without reading every line — so it is a real stroke-width
   step, not a shade. */
svg .ct{fill:none;stroke:var(--soft);stroke-width:.7}
svg .ctx{fill:none;stroke:var(--ink);stroke-width:1.5}
svg .ctl{font-size:10px;font-weight:600}
svg .wlin{stroke:var(--wet);fill:none}
svg.x-con .con,svg.x-spt .spt{display:none}