/* The guide reading shell (2026-09-14), opt-in. * * Owner directive (Eric, guide reading-layout rollout, Chunk 1): the SMC-L / * SMC level-guide reading anatomy on ordinary guides. A left contents rail * beside the reading column, gold-bordered section rows with the C10 sign, * the full opening left-aligned beside one small illustration, and the real * Quick Summary and Share utilities on one C surface. * * A page joins with and loads this file * plus /js/guide-reading.js. Every selector is scoped to .guide-reading-page, * so no unenrolled page can see it. The SMC level guides keep their own * family sheet; nothing here imports or restyles them. * * Markup contract: * .gr-hero the existing .dc-hero, H1 and lede untouched, plus * .gr-hero-art holding one existing illustration * .gr-utility-bar .gr-utility-main (C surface; guide-reading.js moves the * real tldr.js button in) + #rmv-share-mount * .gr-layout aside.gr-contents > details.gr-contents-disclosure > * summary + nav.guide-nav[data-guide-nav-owner], then * .gr-body holding the page's own sections * * Rules carried from the owner contracts: 12px text floor; C10 is the shared * main.css sign (.dsc-sign, and the details.guide-details ::after enrolment); * rail links and the C controls carry no gold glow or lift (CLAUDE.md BUTTON * LAW bounded exception); content headings Source Serif 4, UI Inter; the * palette is defined for BOTH dark-mode mechanisms. */ .guide-reading-page { --gr-bg: var(--color-page-bg, #f2efe9); --gr-surface: #fffdf8; --gr-ink: #122b47; --gr-muted: #536474; --gr-line: #d9dcd8; --gr-gold: #e8b54a; --gr-link: #163f69; --gr-warm: #f3ede0; } /* A nav-only retrofit keeps its own approved page ground. */ .guide-reading-page:not(:has([data-gr-nav-only])) { background: var(--gr-bg); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .guide-reading-page { --gr-bg: #0c121b; --gr-surface: #17212e; --gr-ink: #edf1f5; --gr-muted: #adbccc; --gr-line: #344352; --gr-link: #a7d0ff; --gr-warm: #29281f; } } :root[data-theme="dark"] .guide-reading-page { --gr-bg: #0c121b; --gr-surface: #17212e; --gr-ink: #edf1f5; --gr-muted: #adbccc; --gr-line: #344352; --gr-link: #a7d0ff; --gr-warm: #29281f; } .guide-reading-page #main-content > .container:has(> .gr-hero) { max-width: 1240px; padding: 0 36px 44px; } /* A tool page that needs the rail beside its tool widens just enough that the tool column keeps roughly its former 900px width. */ .guide-reading-page main > .container:has(.gr-layout[data-gr-wide]) { max-width: 1180px; } /* A contents destination lands below the site's 64px sticky navigation. Zero specificity on purpose: any offset a page already declares still wins; this only fills the pages that had none (ship pages landed a heading under the header on production before this change). */ :where(.guide-reading-page) :where([id]) { scroll-margin-top: 84px; } /* ── Opening: full H1 and lede, left-aligned, one illustration ─────────── */ .guide-reading-page #main-content .gr-hero { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 44px; align-items: center; text-align: left; margin: 18px 0 26px; } .guide-reading-page #main-content .gr-hero h1 { font-size: 44px; line-height: 1.15; letter-spacing: -1px; color: var(--gr-ink); text-align: left; margin: 0 0 18px; } .guide-reading-page #main-content .gr-hero p { font-size: 17px; line-height: 1.8; color: var(--gr-muted); max-width: 760px; margin: 0; text-align: left; } .guide-reading-page .gr-hero-art { margin: 0; } .guide-reading-page .gr-hero-art img { display: block; width: 100%; height: auto; border: 1px solid var(--gr-line); border-radius: 12px; } /* ── Utilities: Quick Summary on the C surface, Share beside it ─────────── */ .guide-reading-page .gr-utility-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 12px 0; margin: 0 0 18px; border-top: 1px solid var(--gr-line); border-bottom: 1px solid var(--gr-line); } .guide-reading-page .gr-utility-main:empty { display: none; } .guide-reading-page .gr-utility-main .tldr-btn { margin: 0; min-height: 36px; padding: 7px 14px; border: 1px solid transparent; border-radius: 24px; background: transparent; color: var(--color-primary); font: 500 14px/1.3 var(--font-sans); box-shadow: none; transform: none; } .guide-reading-page .gr-utility-main .tldr-btn:hover { background: var(--ctl-c-hover); border-color: transparent; } .guide-reading-page .gr-utility-bar .rmv-share-mount, .guide-reading-page .gr-utility-bar .rmv-share { margin: 0; } .guide-reading-page .gr-utility-bar .rmv-share-btn { border: 1px solid var(--ctl-c-line); border-radius: 24px; min-height: 36px; padding: 7px 14px; background: linear-gradient(var(--ctl-c-face-top), var(--ctl-c-face-bottom)); box-shadow: var(--ctl-c-shadow); color: var(--color-primary); font-size: 14px; font-weight: 500; transform: none; } .guide-reading-page .gr-utility-bar .rmv-share-btn:hover { border-color: var(--color-primary); transform: none; } /* ── Contents rail beside the reading column ────────────────────────────── */ .guide-reading-page .gr-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 28px; } /* Sticky below the site's 64px navigation, with its own scroll so a long contents list never runs under the footer or out of reach. */ .guide-reading-page .gr-contents { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; overscroll-behavior: contain; min-width: 0; padding: 0 4px 12px 0; } .guide-reading-page .gr-body { min-width: 0; } .guide-reading-page .gr-contents-disclosure > summary { display: flex; align-items: center; justify-content: space-between; list-style: none; cursor: pointer; padding: 13px 0; border-bottom: 1px solid var(--gr-line); font: 700 13px/1.4 var(--font-sans); color: var(--gr-ink); } .guide-reading-page .gr-contents-disclosure > summary::-webkit-details-marker { display: none; } .guide-reading-page .gr-contents-disclosure > summary .dsc-sign { color: var(--gr-link); } .guide-reading-page main .gr-contents nav.guide-nav { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 1px; padding: 8px 0; margin: 0; border: 0; background: none; box-shadow: none; } .guide-reading-page main .gr-contents nav.guide-nav a { display: block; font: 400 13px/1.45 var(--font-sans); color: var(--gr-muted); text-decoration: none; background: none; border: 0; border-left: 2px solid transparent; border-radius: 0 6px 6px 0; padding: 6px 8px 6px 14px; min-height: 0; box-shadow: none; transform: none; overflow-wrap: break-word; } .guide-reading-page main .gr-contents nav.guide-nav a.gr-group { font-weight: 700; color: var(--gr-ink); padding: 10px 8px 4px 2px; margin-top: 6px; } .guide-reading-page main .gr-contents nav.guide-nav a.gr-group:first-child { margin-top: 0; } .guide-reading-page main .gr-contents nav.guide-nav a:hover, .guide-reading-page main .gr-contents nav.guide-nav a[aria-current="location"] { color: var(--gr-ink); border-left-color: var(--gr-gold); background: var(--gr-warm); } .guide-reading-page main .gr-contents nav.guide-nav a:focus-visible, .guide-reading-page .gr-contents-disclosure > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .guide-reading-page .gr-expand-all { width: 100%; justify-content: space-between; margin-top: 10px; font-size: 13px; } .guide-reading-page .gr-expand-all .dsc-sign { margin-left: 8px; } /* ── Reading column: chapters, gold-bordered section rows ──────────────── */ .guide-reading-page #main-content .gr-layout:not([data-gr-nav-only]) .gr-body h2, .guide-reading-page #main-content .gr-layout:not([data-gr-nav-only]) .gr-body h3 { text-align: left; } .guide-reading-page .gr-layout:not([data-gr-nav-only]) .gr-body .guide-chapter { max-width: none; margin: 0 0 44px; } .guide-reading-page #main-content .gr-layout:not([data-gr-nav-only]) .gr-body .guide-chapter-title { font-size: 28px; line-height: 1.2; color: var(--gr-ink); border: 0; padding: 0; margin: 0 0 16px; } .guide-reading-page .gr-layout:not([data-gr-nav-only]) .gr-body .guide-section { max-width: none; margin: 0 0 13px; } .guide-reading-page .gr-layout:not([data-gr-nav-only]) .gr-body .guide-section > details.guide-details { margin: 0; border: 1px solid var(--gr-gold); border-radius: 11px; background: var(--gr-surface); overflow: hidden; } .guide-reading-page .gr-layout:not([data-gr-nav-only]) .gr-body .guide-section > details.guide-details > summary { display: flex; align-items: center; gap: 16px; padding: 18px 22px; min-height: 0; } .guide-reading-page .gr-layout:not([data-gr-nav-only]) .gr-body .guide-section > details.guide-details[open] > summary { border-bottom: 1px solid var(--gr-line); } .guide-reading-page #main-content .gr-layout:not([data-gr-nav-only]) .gr-body .guide-section > details.guide-details > summary h2 { display: block; font-size: 22px; line-height: 1.3; color: var(--gr-ink); margin: 0; border: 0; padding: 0; } .guide-reading-page .gr-layout:not([data-gr-nav-only]) .gr-body .guide-section > details.guide-details > summary::after { color: var(--gr-link); } .guide-reading-page .gr-layout:not([data-gr-nav-only]) .gr-body .guide-section > details.guide-details > .details-body { padding: 22px 28px; } /* THE SYMMETRY LAW, as amended for enrolled reading pages (owner 2026-09-14): inside a bordered section row the ROW is the measure, so prose and lists fill it with both edges aligned instead of floating a 700px centred band inside the card. The same band-in-a-card defect the law exists to prevent. */ .guide-reading-page .gr-layout:not([data-gr-nav-only]) .gr-body .details-body > p, .guide-reading-page .gr-layout:not([data-gr-nav-only]) .gr-body .details-body > ul, .guide-reading-page .gr-layout:not([data-gr-nav-only]) .gr-body .details-body > ol, .guide-reading-page .gr-layout:not([data-gr-nav-only]) .gr-body .guide-section > p, .guide-reading-page .gr-layout:not([data-gr-nav-only]) .gr-body .guide-section > ul, .guide-reading-page .gr-layout:not([data-gr-nav-only]) .gr-body .guide-section > ol { max-width: none; margin-left: 0; margin-right: 0; } /* The /dc/code reading pilot (rollout D): the plain-English narrative is a centred prose band on ordinary code pages; beside the rail it starts at the reading column's left edge like every other enrolled page's prose. */ .guide-reading-page .gr-body #code-detail > .dc-narrative { margin-left: 0; margin-right: 0; } /* ── Wider screens that are not wide ────────────────────────────────────── */ @media (max-width: 1040px) { .guide-reading-page #main-content > .container:has(> .gr-hero) { padding-left: 28px; padding-right: 28px; } .guide-reading-page .gr-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 28px; } .guide-reading-page #main-content .gr-hero { grid-template-columns: minmax(0, 1fr) 220px; gap: 30px; } } /* ── Phone: contents move above the reading column as a disclosure ──────── */ @media (max-width: 760px) { .guide-reading-page #main-content > .container:has(> .gr-hero) { padding: 0 16px 30px; } .guide-reading-page #main-content .gr-hero { display: block; margin-top: 8px; } .guide-reading-page #main-content .gr-hero h1 { font-size: 32px; letter-spacing: -.5px; } .guide-reading-page #main-content .gr-hero p { font-size: 16px; line-height: 1.75; } .guide-reading-page .gr-hero-art { max-width: 220px; margin-top: 18px; } .guide-reading-page .gr-layout { display: flex; flex-direction: column; gap: 22px; margin-top: 20px; } .guide-reading-page .gr-contents { position: static; width: 100%; max-height: none; overflow: visible; padding: 0 14px; border: 1px solid var(--gr-line); border-radius: 10px; background: var(--gr-surface); } .guide-reading-page .gr-contents-disclosure > summary { border-bottom: 0; padding: 14px 0; } .guide-reading-page .gr-contents-disclosure[open] > summary { border-bottom: 1px solid var(--gr-line); } .guide-reading-page main .gr-contents nav.guide-nav a { padding: 9px 8px 9px 14px; } .guide-reading-page .gr-expand-all { margin: 4px 0 14px; } .guide-reading-page .gr-body { width: 100%; } .guide-reading-page #main-content .gr-layout:not([data-gr-nav-only]) .gr-body .guide-chapter-title { font-size: 24px; } .guide-reading-page .gr-layout:not([data-gr-nav-only]) .gr-body .guide-section > details.guide-details > summary { padding: 16px; gap: 12px; } .guide-reading-page #main-content .gr-layout:not([data-gr-nav-only]) .gr-body .guide-section > details.guide-details > summary h2 { font-size: 19px; } .guide-reading-page .gr-layout:not([data-gr-nav-only]) .gr-body .guide-section > details.guide-details > .details-body { padding: 18px 16px; } } @media print { .guide-reading-page .gr-utility-bar, .guide-reading-page .gr-contents { display: none; } .guide-reading-page .gr-layout { display: block; } } /* The opening summary and the worksheets keep their own cards; in the reading column they take the column's full width and its left edge, like every row. */ .guide-reading-page .gr-layout:not([data-gr-nav-only]) .gr-body .start-summary, .guide-reading-page .gr-layout:not([data-gr-nav-only]) .gr-body .guide-worksheets { max-width: none; margin: 0 0 28px; } /* ── Reading-first opening (owner directive, Eric, 2026-09-14) ────────────── Prepared guides open with a compact three-item orientation; the full worksheets open "Prepare and take the next step". Scoped to these classes only: no site-wide text reset, calculators untouched, 12px floor kept. */ .guide-reading-page { --gr-step: #77500e; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .guide-reading-page { --gr-step: var(--gr-gold); } } :root[data-theme="dark"] .guide-reading-page { --gr-step: var(--gr-gold); } .guide-reading-page .gr-body .start-orientation { background: transparent; border: 0; border-top: 1px solid var(--gr-gold); border-bottom: 1px solid var(--gr-line); border-radius: 0; box-shadow: none; padding: 18px 0 20px; margin: 0 0 26px; max-width: none; } .guide-reading-page #main-content .gr-body .start-orientation h2 { font: 600 22px/1.3 var(--font-serif); color: var(--gr-ink); text-align: left; margin: 0 0 16px; padding: 0; border: 0; } .guide-reading-page .start-orientation .orientation-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; padding: 0; margin: 0; max-width: none; } .guide-reading-page .start-orientation .orientation-steps li { margin: 0; padding: 0; border: 0; } .guide-reading-page .start-orientation .orientation-steps li + li { border-left: 1px solid var(--gr-line); padding-left: 18px; } .guide-reading-page .start-orientation .orientation-steps a { display: block; text-decoration: none; color: var(--gr-link); font: 600 15px/1.45 var(--font-sans); } .guide-reading-page .start-orientation .orientation-steps a:hover strong, .guide-reading-page .start-orientation .orientation-steps a:focus-visible strong { text-decoration: underline; text-underline-offset: 4px; } .guide-reading-page .start-orientation .orientation-steps a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .guide-reading-page .start-orientation .orientation-steps strong { font-weight: 600; } .guide-reading-page .start-orientation .step-number { display: block; font: 600 12px/1.3 var(--font-sans); color: var(--gr-step); margin: 0 0 7px; } .guide-reading-page .gr-body .start-orientation .orientation-steps p { font: 400 15px/1.55 var(--font-serif); color: var(--gr-muted); margin: 7px 0 0; max-width: none; } /* The quiet same-page jump beside the contents rail. */ .guide-reading-page .gr-worksheet-shortcut { display: block; border-top: 1px solid var(--gr-line); padding: 16px 0; margin: 12px 0; color: var(--gr-link); text-decoration: none; font: 500 13px/1.6 var(--font-sans); } .guide-reading-page .gr-worksheet-shortcut > span { display: block; color: var(--gr-muted); font-size: 12px; } .guide-reading-page .gr-worksheet-shortcut strong { font-weight: 600; } .guide-reading-page .gr-worksheet-shortcut:hover strong, .guide-reading-page .gr-worksheet-shortcut:focus-visible strong { text-decoration: underline; } .guide-reading-page .gr-worksheet-shortcut:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* The worksheets inside Prepare, and the original summary points as reminders. */ .guide-reading-page .gr-body .guide-chapter > .guide-worksheets { margin: 0 0 28px; } .guide-reading-page .prep-reminders { margin: 16px 0 22px; border-block: 1px solid var(--gr-line); padding: 0; } .guide-reading-page .prep-reminders > summary { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; font: 500 14px/1.5 var(--font-sans); color: var(--gr-link); list-style: none; } .guide-reading-page .prep-reminders > summary::-webkit-details-marker { display: none; } .guide-reading-page .prep-reminders > summary .dsc-sign { flex: none; transition: transform .2s ease; } .guide-reading-page .prep-reminders[open] > summary .dsc-sign { transform: rotate(45deg); } @media (prefers-reduced-motion: reduce) { .guide-reading-page .prep-reminders > summary .dsc-sign { transition: none; } } .guide-reading-page .prep-reminders ol { padding: 0 0 4px 22px; margin: 0; font-size: 15px; max-width: none; } .guide-reading-page .prep-reminders li { margin: 12px 0; } .guide-reading-page .prep-reminders li p { font-size: 15px; margin: 4px 0 0; max-width: none; } .guide-reading-page .guide-worksheets > .start-summary-actions { margin-top: 18px; } @media (max-width: 760px) { .guide-reading-page .gr-body .start-orientation { padding: 16px 0; } .guide-reading-page #main-content .gr-body .start-orientation h2 { font-size: 21px; margin-bottom: 15px; } .guide-reading-page .start-orientation .orientation-steps { grid-template-columns: 1fr; gap: 12px; } .guide-reading-page .start-orientation .orientation-steps li + li { border: 0; padding: 0; } .guide-reading-page .start-orientation .orientation-steps a { display: flex; align-items: baseline; gap: 10px; } .guide-reading-page .start-orientation .step-number { margin: 0; min-width: 18px; } .guide-reading-page .gr-body .start-orientation .orientation-steps p { margin: 3px 0 0 28px; } .guide-reading-page .gr-worksheet-shortcut { margin-top: 0; padding: 8px 0; } }