/* THE PARENTS ZONE. `CJ-2912`. * * 🔒 A SEPARATE STYLESHEET RATHER THAN AN APPEND TO shell.css, ON PURPOSE. `shell.css` is the file * the look-upgrade sessions have been working in, and a section that is BUILT BUT NOT PUBLISHED * has no business adding weight to the stylesheet every player already downloads. It is linked * from these pages' own and from nowhere else. * * ⚠️ IT USES THE EXISTING TOKENS AND DEFINES NO COLOURS OF ITS OWN, so dark mode and the accent * system keep working without this file knowing anything about them. If a token is missing here, * the fix is in tokens.css, not a hardcoded hex. * * These pages are long-form reading — the opposite of the rest of the site, which is a board and a * clock. So: a narrow measure, generous line height, and nothing that moves. */ .cj-parents { max-width: 38rem; margin: 0 auto; line-height: 1.65; } .cj-parents h1 { line-height: 1.2; margin-bottom: 0.5rem; } .cj-parents h2 { margin-top: 2.5rem; line-height: 1.25; } .cj-parents h3, .cj-parents h4 { margin-top: 1.75rem; line-height: 1.3; } .cj-parents p, .cj-parents li { /* 66ch is the readable measure. The container is already narrow; this catches wide viewports. */ max-width: 66ch; } .cj-parents__lede { font-size: 1.075rem; opacity: 0.9; } .cj-parents__crumb { font-size: 0.9rem; opacity: 0.75; margin-bottom: 0.5rem; } .cj-parents__date { font-size: 0.9rem; opacity: 0.75; margin: 0 0 1rem; } .cj-parents__note-inline { font-size: 0.95rem; opacity: 0.85; margin-top: -0.25rem; } /* --- the index cards --- */ .cj-parents__list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1.25rem; } .cj-parents__card { max-width: none; border: 1px solid var(--cj-border, currentColor); border-radius: 0.5rem; padding: 1rem 1.15rem; } .cj-parents__card h3 { margin: 0 0 0.35rem; font-size: 1.1rem; line-height: 1.3; } .cj-parents__summary { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.95rem; opacity: 0.9; } .cj-parents__summary li { margin: 0.2rem 0; } /* --- the article body --- */ .cj-parents__article > p:first-of-type { margin-top: 0; } .cj-parents blockquote.cj-parents__note { margin: 1.5rem 0; padding: 0.75rem 1rem; border-left: 3px solid var(--cj-border, currentColor); /* No background: a callout that relies on one becomes invisible when a token is missing. */ } .cj-parents blockquote.cj-parents__note > :first-child { margin-top: 0; } .cj-parents blockquote.cj-parents__note > :last-child { margin-bottom: 0; } .cj-parents hr { border: 0; border-top: 1px solid var(--cj-border, currentColor); opacity: 0.4; margin: 2rem 0; } /* 🔴 A WIDE TABLE MUST SCROLL INSIDE ITSELF. Several guides carry Must/Avoid tables, and most of * these pages are read on a phone. Without this the whole page scrolls sideways, which is the * single most common way long-form content breaks on mobile. */ .cj-parents__tablewrap { overflow-x: auto; margin: 1.25rem 0; -webkit-overflow-scrolling: touch; } .cj-parents__tablewrap table { border-collapse: collapse; min-width: 100%; } .cj-parents__tablewrap th, .cj-parents__tablewrap td { text-align: left; vertical-align: top; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--cj-border, currentColor); font-size: 0.95rem; } .cj-parents code { font-size: 0.9em; padding: 0.1em 0.3em; border-radius: 0.2em; border: 1px solid var(--cj-border, currentColor); } .cj-parents a { /* Underlined rather than colour-only: colour alone fails WCAG 1.4.1, and this section is text. */ text-decoration: underline; text-underline-offset: 0.15em; }