/* Design tokens. Type: the printed book's three faces (interface and headings IBM Plex Sans, reading text
   Source Serif 4, code IBM Plex Mono). Colour: paper, navy ink, one orange mark, the teal of links and fields,
   a pale-blue wash for alternating bands. */
:root {
  --font-ui:"IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-read:"Source Serif 4", Georgia, "Times New Roman", serif;
  --font-code:"IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
  --wash:#EEF3F8; --ink-band:#1C2330; --rule:rgba(28,35,48,.12); --lift:0 40px 80px -52px rgba(28,35,48,.55);
  --ink:#1d2430; --muted:#56616f; --line:#dde2e8; --paper:#ffffff; --soft:#f5f7f9;
  --mark:#E4572E; --mark-ink:#C84522; --field:#0B7A75; --warn:#fff6d6; --warn-line:#e7c65a;
  --ok:#1f7a3d; --ok-bg:#e6f4ea; --bad:#b42318; --bad-bg:#fdecea; --code-bg:#1d2430; --code-ink:#e8edf3;
  color-scheme:light;   /* light only (the author, 2026-11-03): a dark system theme changes nothing, form controls included */
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.6 var(--font-ui); }
a { color:var(--field); }
/* the book's split on screen: headings and interface in sans, running text in serif (font-size-adjust keeps the
   serif's x-height level with the sans), the book's own sans parts (callouts, boxes, tables, captions) in sans */
h1, h2, h3, h4 { font-family:var(--font-ui); letter-spacing:-.012em; }
main :is(p, li, dd) { font-family:var(--font-read); font-size-adjust:.5; }
main :is(.callouts, .box, table, figcaption, .lp-mock, .lp-stage, .tree, .facts) :is(p, li, dd),
main :is(p, li):is(.small, .crumb, .kicker, .edition, .banner, .hint, .section-label, .discover-link, .switch, .lp-ask) { font-family:var(--font-ui); font-size-adjust:none; }
.btn:hover { background:#b03c1c; }
.wrap { max-width:920px; margin:0 auto; padding:0 16px; }

/* header (the author, 2026-10-25: airy and quiet): the brand, the two selectors, a hairline, the reader */
header.top { border-bottom:1px solid var(--line); background:var(--paper); position:sticky; top:0; z-index:5; }
header.top .wrap { display:flex; flex-wrap:wrap; align-items:center; gap:10px 28px; padding-top:12px; padding-bottom:12px; }
.brand { font-weight:700; color:var(--ink); text-decoration:none; margin-right:auto; line-height:1.25; }
.brand small { display:block; color:var(--muted); font-weight:500; font-size:12px; }
.pick { display:flex; flex-direction:column; gap:3px; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
.pick select { font:600 14px var(--font-ui); color:var(--ink); background:var(--paper); border:1px solid var(--line);
               border-radius:8px; height:40px; padding:0 30px 0 11px; min-width:132px; appearance:none; -webkit-appearance:none; cursor:pointer;
               background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%2356616f' stroke-width='2' stroke-linecap='round' d='m7 10 5 5 5-5'/></svg>");
               background-repeat:no-repeat; background-position:right 9px center; background-size:16px; }
.pick select:hover { border-color:var(--muted); }
.pick select:focus { outline:2px solid var(--field); outline-offset:1px; border-color:var(--field); }
.navlink { font-size:14px; font-weight:600; }
/* the reader's box sits on the same line as the selects' boxes (their labels stand above): same 40 px height,
   bottoms aligned */
.account { display:flex; align-items:center; gap:12px; min-height:40px; padding-left:28px; border-left:1px solid var(--line); align-self:flex-end; font-size:14px; }
.account:empty { display:none; }
.account .avatar { width:30px; height:30px; border-radius:50%; background:#e6f3f2; color:#0a4f4b; font-weight:700; font-size:13px;
                   display:flex; align-items:center; justify-content:center; flex:none; }
.account .who { color:var(--ink); font-weight:600; font-size:14px; white-space:nowrap; }
.account .linkbtn { color:var(--muted); font:500 13px var(--font-ui); text-decoration:none; }
.account .linkbtn:hover { color:var(--field); text-decoration:underline; }
.account .ghost { display:inline-flex; align-items:center; height:40px; border:1px solid var(--line); color:var(--ink); text-decoration:none; font-weight:600; font-size:14px;
                  border-radius:8px; padding:0 16px; background:var(--paper); }
.account .ghost:hover { border-color:var(--muted); }
footer.bottom .foot-nav { display:flex; gap:22px; margin:0 0 10px; }
footer.bottom .foot-nav a { font-weight:600; }
footer.bottom .foot-legal { display:flex; flex-wrap:wrap; gap:8px 18px; margin:10px 0 0; }
/* legal notice and privacy page: one readable column */
.doc { max-width:760px; padding-block:8px 24px; }
.doc h1 { margin:0 0 10px; }
.doc h2 { font-size:20px; margin:32px 0 10px; }
.doc p { line-height:1.6; margin:0 0 12px; }
.doc table.facts td:first-child { width:34%; }
.doc .updated { margin-top:28px; color:var(--muted); }
@media (max-width:600px) {
  .doc table.plain:not(.facts) tr:first-child { display:none; }
  .doc table.plain:not(.facts) :is(tr, td) { display:block; }
  .doc table.plain:not(.facts) tr { padding:10px 0; border-bottom:1px solid var(--line); }
  .doc table.plain:not(.facts) td { border:0; padding:3px 0; }
  .doc table.plain:not(.facts) td:not(:first-child)::before { content:attr(data-label); display:block; font:600 11px var(--font-ui); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
}
.todo { font-family:var(--font-ui); font-size:.86em; font-weight:600; color:var(--accent-text); border:1px dashed currentColor; border-radius:4px; padding:0 6px; }

main { padding:28px 0 56px; }
h1 { font-size:30px; line-height:1.2; margin:0 0 6px; }
.lead { color:var(--muted); margin:0 0 20px; font-size:17px; }
.crumb { font-size:14px; margin:0 0 10px; }

.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:8px; margin:0 0 20px; }
.facts div { background:var(--soft); border-radius:8px; padding:10px 12px; font-size:14px; }
.facts b { display:block; font-size:11px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }

.badge { display:inline-block; border-radius:999px; padding:2px 10px; font-size:13px; font-weight:600; }
.badge.pass, .badge.changed { background:var(--ok-bg); color:var(--ok); }
.badge.pending { background:var(--warn); color:var(--ink); }
.badge.fail { background:var(--bad-bg); color:var(--bad); }
.badge.documentary { background:var(--soft); color:var(--muted); border:1px solid var(--line); }

.banner { border-radius:8px; padding:12px 16px; margin:0 0 20px; background:var(--warn); border-left:4px solid var(--warn-line); }
.banner.fail { background:var(--bad-bg); border-left-color:var(--bad); }
.hidden { display:none; }

.download { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; border:1px solid var(--line); border-radius:10px;
            padding:12px 16px; margin:0 0 8px; }
.btn { display:inline-block; background:var(--mark-ink); color:#fff; text-decoration:none; font-weight:600; border-radius:8px; padding:9px 16px; }
.download span { color:var(--muted); font-size:14px; }

/* chapter cards */
.cards { display:grid; gap:12px; margin:12px 0 28px; }
.card { border:1px solid var(--line); border-radius:10px; padding:16px; display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; }
.card .num { flex:none; width:44px; height:44px; border-radius:10px; background:var(--mark); color:#fff; font-weight:700; font-size:18px;
             display:flex; align-items:center; justify-content:center; }
.card .txt { flex:1 1 260px; }
.card h3 { margin:0; font-size:18px; }
.card p { margin:2px 0 0; color:var(--muted); font-size:14px; }
/* a chapter card: the number's square level with the title, the text, the status on the right (the author, 2026-10-25) */
.card:has(> .side) { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; }
.card:has(> .num) { grid-template-columns:44px minmax(0,1fr) auto; }
.card > .num { margin-top:.44em; }   /* the square's top edge on the top of the title's capitals (IBM Plex Sans 18 px bold:
                                       half-leading 2.9 px + ascent 18 - cap height 13 = 7.9 px), never above them */
.card > .side { align-self:center; display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
@media (max-width:600px) {
  .card:has(> .num) { grid-template-columns:44px minmax(0,1fr); }
  .card:has(> .side) > .side { grid-column:-2 / -1; align-self:start; }
  .card:has(> .side):not(:has(> .num)) { grid-template-columns:minmax(0,1fr); }
}
.how { background:var(--soft); border-radius:10px; padding:14px 18px; }
.how h2 { font-size:17px; margin:0 0 4px; }

/* guide */
section.step { border-top:1px solid var(--line); padding:24px 0; }
section.step h2 { font-size:21px; margin:0 0 8px; display:flex; align-items:center; gap:12px; }
.n { flex:none; width:32px; height:32px; border-radius:50%; background:var(--mark); color:#fff;
     display:inline-flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; }
code, pre, kbd { font-family:var(--font-code); font-size:14px; }
code { background:var(--soft); padding:1px 5px; border-radius:4px; overflow-wrap:anywhere; }
kbd { border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; padding:0 5px; font-size:13px; }
.ui { font-weight:600; }
/* folder trees (div.tree of the guides, rendered by tools/build_site.py tree_html): rows with guide lines and icons
   instead of box-drawing characters (2026-10-24) */
.tree { background:var(--soft); border-radius:10px; padding:10px 16px 12px; font-size:14px; overflow-x:auto; }
.tree .tr { display:flex; align-items:center; gap:8px; min-height:30px; white-space:nowrap; }
.tree .g { flex:none; width:22px; align-self:stretch; border-left:1px solid var(--line); margin-left:9px; }
.tree .ic { flex:none; width:18px; height:18px; background-color:var(--muted);
            -webkit-mask:center/contain no-repeat; mask:center/contain no-repeat; }
.tree .ic.folder { background-color:var(--field); -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 6.5A2.5 2.5 0 0 1 5.5 4h4.2c.6 0 1.2.2 1.6.6L13 6.2h5.5A2.5 2.5 0 0 1 21 8.7v8.8a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 6.5A2.5 2.5 0 0 1 5.5 4h4.2c.6 0 1.2.2 1.6.6L13 6.2h5.5A2.5 2.5 0 0 1 21 8.7v8.8a2.5 2.5 0 0 1-2.5 2.5h-13A2.5 2.5 0 0 1 3 17.5v-11z'/></svg>"); }
.tree .ic.file { -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M6 2h7.5L19 7.5V21a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm7 1.8V8.5h4.7L13 3.8z'/></svg>"); mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill-rule='evenodd' d='M6 2h7.5L19 7.5V21a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm7 1.8V8.5h4.7L13 3.8z'/></svg>"); }
.tree .nm { color:var(--ink); }
.tree .tr.folder .nm { font-weight:600; }
.tree .an { color:var(--muted); margin-left:6px; }
.tree .an::before { content:"·"; margin-right:8px; color:var(--line); }
.tree code { font-size:13px; }
.note { background:var(--warn); border-left:4px solid var(--warn-line); padding:10px 14px; border-radius:4px; margin:12px 0; }
.none { border:2px dashed var(--field); border-radius:8px; padding:12px 16px; color:var(--field); font-weight:600; margin:8px 0; }
.small { font-size:14px; color:var(--muted); }
.codebox { position:relative; margin:12px 0; }
.codebox pre { background:var(--code-bg); color:var(--code-ink); border-radius:8px; padding:52px 16px 16px; margin:0; overflow-x:auto; line-height:1.5; font-size:13px; }
.codebox pre.robin { max-height:440px; overflow:auto; }
section.type { margin:24px 0 8px; }
section.type h2 { font-size:22px; margin:0 0 2px; }
section.step h3 { font-size:16px; margin:18px 0 4px; }
ul li { margin:4px 0; }
.copy { position:absolute; top:10px; right:10px; background:var(--mark-ink); color:#fff; border:0; border-radius:6px;
        padding:8px 14px; font:600 14px var(--font-ui); cursor:pointer; }
.copy.done { background:var(--field); }
.scroll { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:14px; margin:8px 0; }
th, td { text-align:left; vertical-align:top; padding:7px 8px; border-bottom:1px solid var(--line); }
th { color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
td.l { font-family:var(--font-code); color:var(--muted); width:36px; }
tr.reg td { background:var(--soft); font-weight:600; }
.var { color:var(--field); font-family:var(--font-code); font-size:13px; }
figure { margin:12px 0; }
img { max-width:100%; height:auto; border:1px solid var(--line); border-radius:8px; }
figcaption { color:var(--muted); font-size:13px; margin-top:4px; }
ol li { margin:4px 0; }
a.dl { font-weight:600; }

footer.bottom { border-top:1px solid var(--line); color:var(--muted); font-size:13px; }
footer.bottom .wrap { padding-top:16px; padding-bottom:28px; }

@media (max-width:1000px) { header.top .wrap { gap:10px 20px; } .account { padding-left:20px; } }
@media (max-width:600px) {
  h1 { font-size:25px; }
  header.top { position:static; }
  header.top .wrap { gap:10px 12px; }
  /* first row: the brand and the reader (name, sign out); second row: the two selectors */
  .brand { flex:1 1 auto; min-width:0; order:0; }
  .account { order:1; flex:0 0 auto; border-left:0; padding-left:0; gap:8px; align-self:flex-end; }
  .account .who { max-width:38vw; overflow:hidden; text-overflow:ellipsis; }
  .pick { order:2; flex:1 1 45%; min-width:0; }
  .pick select { width:100%; min-width:0; }
}
@media print { header.top, .copy, .download { display:none; } section.step { break-inside:avoid; } }

/* ---------- rich pages (components, special issues): the book's components, on the web ---------- */
.kicker { font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--mark); margin:0 0 6px; }
.section-label { font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 4px; }
.why { font-style:italic; color:var(--muted); }
figure.shot img, img.shot { border:1px solid var(--line); border-radius:8px; }
figure.dialog img { border:0; }
figure a.zoom { display:block; }
figure figcaption b { color:var(--ink); }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; margin:12px 0; }
.annot { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:24px; align-items:start; margin:12px 0; }
.annot.narrow { grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); }
ol.callouts { list-style:none; counter-reset:c; padding:0; margin:0; font-size:15px; }
ol.callouts li { counter-increment:c; position:relative; padding-left:36px; margin:0 0 14px; }
ol.callouts li::before { content:counter(c); position:absolute; left:0; top:1px; width:24px; height:24px; border-radius:50%;
  background:var(--field); color:#fff; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; }
ol.callouts b.label { display:block; }
.ex { display:block; font-size:13px; color:var(--muted); margin-top:2px; }
.ex code { background:#e6f3f2; color:#0a4f4b; }
.box { border-radius:10px; padding:14px 18px; margin:14px 0; }
.box h4 { margin:0 0 6px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.box p { margin:0 0 6px; } .box p:last-child { margin:0; }
.box.know { background:#eef3f8; } .box.know h4 { color:#2c5a86; }
.box.warn { background:var(--warn); } .box.warn h4 { color:#8a5a00; }
.box.found { background:#fdeee8; } .box.found h4 { color:var(--mark); }
svg.diagram { display:block; width:100%; height:auto; margin:8px 0; background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px; font-family:var(--font-ui); }
svg.diagram a { cursor:pointer; }
section.step { scroll-margin-top:90px; }
details.long { border:1px solid var(--line); border-radius:10px; padding:10px 14px; margin:12px 0; }
details.long > summary { cursor:pointer; font-weight:600; color:var(--field); }
details.long[open] > summary { margin-bottom:10px; }
.toc { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin:14px 0 6px; padding:0; list-style:none; }
.toc a { display:block; border:1px solid var(--line); border-radius:10px; padding:10px 12px; text-decoration:none; color:var(--ink); height:100%; }
.toc a:hover { border-color:var(--mark); }
.toc .n { width:24px; height:24px; font-size:13px; margin-right:6px; vertical-align:middle; }
.toc small { display:block; color:var(--muted); margin-top:4px; }
.codebox pre.ps { background:var(--code-bg); color:var(--code-ink); border-radius:8px; padding:52px 16px 16px; margin:0; overflow:auto; max-height:520px; font-size:13px; line-height:1.45; }
table.plain td:first-child { font-weight:600; }
.sources { font-size:13px; color:var(--muted); border-top:1px solid var(--line); margin-top:24px; padding-top:10px; }
@media (max-width:760px) { .annot, .annot.narrow, .pair { grid-template-columns:1fr; } }

/* a book's cover illustration and edition on its page (publication.yml cover, edition_label) */
.edition { display:inline-block; font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
           color:#fff; background:var(--mark-ink); border-radius:4px; padding:3px 8px; margin:4px 0 12px; }
/* the book's page header (2026-10-24): the real cover beside the promise, actions and facts */
.hero { display:grid; grid-template-columns:1.25fr .75fr; gap:36px; align-items:center; padding:6px 0 14px; }
.hero .kicker { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 8px; }
.hero h1 { font-size:40px; line-height:1.08; margin:0 0 12px; }
.hero .lead { font-size:17px; color:var(--muted); margin:0 0 18px; max-width:52ch; }
.hero .actions { display:flex; gap:10px; flex-wrap:wrap; margin:0 0 20px; }
.hero .ghost { display:inline-block; border:1px solid var(--line); color:var(--ink); text-decoration:none; font-weight:600; border-radius:8px; padding:9px 16px; background:var(--paper); }
.hero .facts { display:flex; gap:22px; flex-wrap:wrap; }
.hero .facts div b { display:block; font-size:22px; color:var(--ink); }
.hero .facts div span { font-size:12.5px; color:var(--muted); }
.hero .book { justify-self:center; width:270px; aspect-ratio:824/1018; border-radius:4px 10px 10px 4px; overflow:hidden;
              box-shadow:0 22px 40px -18px rgba(0,0,0,.45), 0 0 0 1px var(--line); transform:perspective(1200px) rotateY(-9deg); }
.hero .book img { display:block; width:100%; height:100%; object-fit:cover; }
.hero .book.flat { aspect-ratio:auto; transform:none; width:100%; max-width:380px; border-radius:8px; box-shadow:none; }
@media (max-width:760px) { .hero { grid-template-columns:1fr; } .hero h1 { font-size:30px; } .hero .book { transform:none; width:220px; } }

/* ---------- the landing page of the initiative (2026-10-25, design pass): full-width bands alternating paper and
   wash in a 1120 px column; the hero pairs the promise with the books themselves; numbers only where there is an
   order (how it works, the method); one orange mark per band ---------- */
.discover-link { margin:-6px 0 22px; font-size:15px; }
/* the page's wrap opens to the full width so every section (band or not) centres its own 1120 px column: the content,
   the header and the footer share one left edge */
.wrap:has(> .lp-page) { max-width:none; padding:0; }
body:has(.lp-page) :is(header.top, footer.bottom) .wrap { max-width:1120px; }
main:has(.lp-page) { overflow-x:clip; padding-block:0; }
.lp-page > .band.wash { background:var(--wash); }
.lp-page > .band.ink { background:var(--ink-band); color:#fff; }
.lp-in { max-width:1120px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px)); }
.lp-sec { padding-block:96px 88px; }
/* two paper sections in a row: a hairline across the column instead of a double white gap */
.lp-page > .lp-sec:not(.band) + .lp-sec:not(.band) { padding-top:0; }
.lp-page > .lp-sec:not(.band) + .lp-sec:not(.band) > .lp-in { padding-top:88px;
  background:linear-gradient(var(--line), var(--line)) no-repeat top center / calc(100% - 32px) 1px; }
.lp-head { max-width:660px; margin:0 0 48px; }
.lp-head p { margin:14px 0 0; font-size:19px; line-height:1.5; color:var(--muted); }
.lp-sec h2, .lp-closing h2 { font-size:38px; line-height:1.1; letter-spacing:-.022em; font-weight:600; margin:0; text-wrap:balance; }
.lp-eyebrow { display:inline-flex; align-items:center; gap:10px; font:600 12px var(--font-ui); letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text, var(--mark-ink)); margin:0 0 16px; }
.lp-eyebrow::before { content:""; width:20px; height:2px; border-radius:2px; background:var(--mark); }
.lp-page .actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.lp-page .btn { display:inline-flex; align-items:center; gap:10px; padding:14px 22px; font:600 16px var(--font-ui); border-radius:10px; text-decoration:none; }
.lp-page .btn::after { content:"\2192"; transition:transform .15s ease; }
.lp-page .btn:hover::after { transform:translateX(3px); }
.lp-page .ghost { display:inline-flex; align-items:center; border:1px solid var(--line); color:var(--ink); text-decoration:none; font:600 16px var(--font-ui); border-radius:10px; padding:13px 21px; background:var(--paper); }
.lp-page .ghost:hover { border-color:var(--muted); }
.lp-page .ghost.light { background:transparent; color:#fff; border-color:rgba(255,255,255,.35); }
.lp-page .ghost.light:hover { border-color:#fff; }

/* hero: the promise on the left, the books on the right with a run of chapter 7 and an answer of the assistant */
.lp-hero { padding-block:80px 96px; }
.lp-hero .lp-in { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:64px; align-items:center; }
.lp-hero h1 { font-size:clamp(34px, 4.4vw, 56px); line-height:1.03; letter-spacing:-.03em; font-weight:700; margin:0 0 24px; text-wrap:balance; }
.lp-hero .lead { font-size:21px; line-height:1.5; color:var(--muted); max-width:44ch; margin:0 0 36px; }
.lp-stage { position:relative; width:100%; max-width:520px; justify-self:center; aspect-ratio:1 / .9; }   /* the three books alone, larger (the author, 2026-10-25) */
.lp-stage .s-book { position:absolute; }
.lp-stage .s-book .book { width:100%; aspect-ratio:824/1018; overflow:hidden; border-radius:4px 12px 12px 4px; box-shadow:var(--lift), 0 0 0 1px var(--line); }
.lp-stage .s-book .book img { display:block; width:100%; height:100%; object-fit:cover; border:0; border-radius:0; }
.lp-stage .s-book .book.composed img { object-fit:contain; }
.lp-stage .s-main { width:66%; left:17%; top:2%; z-index:3; transform:rotate(-1.5deg); font-size:17px; }
.lp-stage .s-back1 { width:50%; left:0; top:14%; z-index:1; transform:rotate(-8deg); font-size:12.5px; }
.lp-stage .s-back2 { width:50%; right:0; top:11%; z-index:2; transform:rotate(7deg); font-size:12.5px; }
/* the books behind show their titles in the strip the Bible leaves free, the right one aligned right (the author,
   2026-11-03: the UiPath title must be visible too); a title breaks between its words, never inside one */
.lp-stage :is(.s-back1, .s-back2) .book.composed > .band { padding:9% 7%; }
.lp-stage :is(.s-back1, .s-back2) .book.composed > .band > * { max-width:var(--strip, 34%); }
.lp-stage :is(.s-back1, .s-back2) .book.composed > .band b { overflow-wrap:normal; }
.lp-stage .s-back2 .book.composed > .band { align-items:flex-end; text-align:right; }
.mk-bot .cite { display:inline-block; min-width:18px; height:18px; line-height:18px; text-align:center; font:700 11px var(--font-ui); border-radius:999px; color:#fff; padding:0 4px; margin:0 2px; vertical-align:text-top; background:var(--field-solid, var(--field)); }

/* the first book in numbers */
.lp-metrics { border-bottom:1px solid var(--line); }
.lp-metrics .lp-in { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.lp-metrics .lp-in > div { padding:28px 24px 26px; border-left:1px solid var(--line); }
.lp-metrics .cap { grid-column:1 / -1; margin:0; padding:22px 0 0; font:600 12px var(--font-ui); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.lp-metrics .lp-in > div:first-of-type { border-left:0; padding-left:max(0px, env(safe-area-inset-left, 0px)); }
.lp-metrics b { display:block; font:600 34px/1.1 var(--font-ui); letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin:0 0 6px; }
.lp-metrics span { font-size:14px; line-height:1.45; color:var(--muted); }

/* icons of the tiles */
.ic { display:inline-flex; width:44px; height:44px; border-radius:12px; background:var(--wash); align-items:center; justify-content:center; }
.ic svg { width:24px; height:24px; fill:none; stroke:var(--ink); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.ic svg .a { stroke:var(--mark); }
.band.wash .ic { background:var(--paper); }

/* how it works: three steps in order, joined by a hairline */
.lp-steps { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.lp-step { position:relative; }
.lp-step .num { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%;
                border:1.5px solid var(--mark); background:var(--paper); color:var(--accent-text, var(--mark-ink)); font:600 17px var(--font-ui); margin:0 0 24px; }
.lp-step::before { content:""; position:absolute; top:22px; left:56px; right:-28px; height:1px; background:var(--rule); }
.lp-step:last-child::before { display:none; }
.lp-step h3, .lp-tile h3, .lp-mstep h3 { font-size:19px; line-height:1.3; margin:0 0 8px; }
.lp-step p, .lp-tile p, .lp-mstep p { margin:0; color:var(--muted); font-size:17px; line-height:1.55; }

/* the assistant: what it reads and how it answers, beside the drawer as it is */
.lp-product .lp-in { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:72px; align-items:center; }
.lp-product .lp-head { margin-bottom:28px; }
.lp-lines { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.lp-lines li { position:relative; padding-left:26px; font-size:17px; line-height:1.55; }
.lp-lines li::before { content:""; position:absolute; left:2px; top:.62em; width:9px; height:9px; border-radius:50%; background:var(--mark); }
.lp-mock { border:1px solid var(--line); border-radius:18px; background:var(--paper); box-shadow:var(--lift); overflow:hidden; font:14.5px/1.8 var(--font-ui); }
.mk-head { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--line); }
.mk-tabs { display:inline-flex; gap:2px; background:var(--soft); border-radius:8px; padding:3px; }
.mk-tab { padding:5px 12px; border-radius:6px; font-weight:600; color:var(--muted); }
.mk-tab.on { background:var(--paper); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.12); }
.mk-dots { display:inline-flex; gap:5px; }
.mk-dots i { width:7px; height:7px; border-radius:50%; background:var(--line); }
.mk-body { padding:40px 32px 20px; }   /* the mock breathes like the drawer (the author, 2026-10-25) */
.mk-user { background:var(--soft); border-radius:12px 12px 2px 12px; padding:16px 20px; margin:0 0 36px 56px; }
.mk-bot p { margin:0 0 24px; }
.mk-bot code { font-size:13px; }
.mk-code { position:relative; background:var(--code-bg); color:var(--code-ink); border-radius:10px; padding:56px 22px 24px; margin:12px 0 28px; }
.mk-code pre { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font:12.5px/1.85 var(--font-code); }
.mk-copy { position:absolute; top:12px; right:12px; background:var(--mark-ink); color:#fff; border-radius:6px; padding:5px 11px; font:600 12.5px var(--font-ui); }
.mk-input { display:flex; align-items:center; gap:12px; padding:22px 24px 28px; border-top:1px solid var(--line); }
.mk-input span { flex:1 1 auto; border:1px solid var(--line); background:var(--soft); border-radius:12px; padding:14px 16px; color:var(--muted); }
.mk-input i { width:44px; height:44px; border-radius:50%; background:var(--mark-ink); flex:none; }

/* what you get: six tiles without boxes, each opened by a rule */
.lp-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:52px 44px; }
.lp-tile { border-top:1px solid var(--rule); padding-top:28px; }
.lp-tile .ic { margin:0 0 20px; }

/* who it is for: one frame, two halves */
.lp-auds { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--paper); }
.lp-aud { padding:40px 44px 42px; min-width:0; }
.lp-aud + .lp-aud { border-left:1px solid var(--line); }
.lp-aud h3 { font-size:24px; margin:0 0 6px; }
.lp-aud .sub { margin:0 0 22px; color:var(--muted); font-size:17px; }
.lp-checks { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.lp-checks li { position:relative; padding-left:32px; font-size:17px; line-height:1.5; }
.lp-checks li::before { content:""; position:absolute; left:0; top:.18em; width:20px; height:20px; border-radius:50%;
  background:var(--field-solid, var(--field)) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m6 12.5 4 4L18 8.5'/></svg>") center/13px no-repeat; }

/* the library: five covers in a row */
.lp-covers { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:28px; }
.lp-cover { display:grid; gap:10px; align-content:start; text-decoration:none; color:var(--ink); min-width:0; }
.lp-cover .book { width:100%; aspect-ratio:824/1018; border-radius:4px 10px 10px 4px; overflow:hidden; box-shadow:0 28px 46px -28px rgba(28,35,48,.6), 0 0 0 1px var(--line); font-size:13px; transition:transform .2s ease; }
.lp-cover:hover .book { transform:translateY(-5px); }
.lp-cover .book img { width:100%; height:100%; object-fit:cover; border:0; border-radius:0; display:block; }
.lp-cover b { font:600 15.5px/1.3 var(--font-ui); margin-top:6px; min-height:2.6em; }   /* two lines kept: the mentions below line up */
.lp-cover span { font:500 12.5px var(--font-ui); color:var(--muted); }
.lp-cover:not(.soon) span { color:var(--accent-text, var(--mark-ink)); }

/* the method: four moments of a chapter, in order, on a vertical line */
.lp-method { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:72px; align-items:start; }
.lp-method .lp-head { margin:0; }
.lp-msteps { position:relative; display:grid; gap:32px; }
.lp-msteps::before { content:""; position:absolute; left:17px; top:20px; bottom:20px; width:1px; background:var(--rule); }
.lp-mstep { position:relative; display:grid; grid-template-columns:36px minmax(0,1fr); gap:20px; align-items:start; }
.lp-mstep .num { position:relative; z-index:1; width:36px; height:36px; border-radius:50%; color:#fff; font:600 15px var(--font-ui); display:flex; align-items:center; justify-content:center; }

/* questions: the head and a link on the left, the answers on the right */
.lp-faq { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:72px; align-items:start; }
.lp-faq .lp-head { margin:0 0 20px; }
.lp-ask a { font:600 16px var(--font-ui); text-decoration:none; }
.lp-ask a::after { content:" \2192"; }
.lp-q { border-top:1px solid var(--line); }
.lp-q:last-child { border-bottom:1px solid var(--line); }
.lp-q summary { cursor:pointer; font:600 18px/1.4 var(--font-ui); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 0; }
.lp-q summary::-webkit-details-marker { display:none; }
.lp-q summary::after { content:""; flex:none; width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line);
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path stroke='%23E4572E' stroke-width='2.2' stroke-linecap='round' d='M12 7v10M7 12h10'/></svg>") center/14px no-repeat; transition:transform .2s ease; }
.lp-q[open] summary::after { transform:rotate(45deg); }
.lp-q p { margin:0 0 22px; color:var(--muted); font-size:17px; line-height:1.6; max-width:62ch; }

/* closing band */
.lp-closing { padding-block:88px 92px; text-align:center; }
.lp-closing h2 { font-size:40px; color:#fff; margin:0 0 14px; }
.lp-closing p { font-size:19px; color:#c9d1dc; margin:0 auto 32px; max-width:52ch; }
.lp-closing .actions { justify-content:center; }

@media (max-width:980px) {
  .lp-hero .lp-in, .lp-product .lp-in, .lp-method, .lp-faq { grid-template-columns:1fr; gap:48px; }
  .lp-stage { max-width:480px; }
  .lp-covers { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .lp-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .lp-sec { padding-block:64px 60px; }
  .lp-hero { padding-block:44px 56px; }
  .lp-hero .lead { font-size:19px; margin-bottom:28px; }
  .lp-sec h2, .lp-closing h2 { font-size:30px; }
  .lp-head { margin-bottom:32px; }
  .lp-head p { font-size:17px; }
  .lp-steps, .lp-grid, .lp-auds { grid-template-columns:1fr; }
  .lp-steps { gap:32px; }
  .lp-step::before { top:44px; bottom:-32px; left:22px; right:auto; width:1px; height:auto; }
  .lp-step { padding-left:64px; }
  .lp-step .num { position:absolute; left:0; top:0; margin:0; }
  .lp-grid { gap:36px; }
  .lp-aud { padding:30px 24px 32px; }
  .mk-body { padding:24px 18px 10px; }
  .mk-user { margin-left:28px; }
  .lp-aud + .lp-aud { border-left:0; border-top:1px solid var(--line); }
  .lp-metrics .lp-in { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lp-metrics .lp-in > div { padding:20px 16px 18px; }
  .lp-metrics .lp-in > div:nth-of-type(odd) { border-left:0; padding-left:0; }
  .lp-metrics .lp-in > div:nth-of-type(n+3) { border-top:1px solid var(--line); }
  .lp-metrics .cap { padding-top:18px; }
  .lp-metrics b { font-size:28px; }
  /* the covers scroll sideways inside their row, never the page */
  .lp-covers { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:44%; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 0 14px; gap:18px; }
  .lp-cover { scroll-snap-align:start; }
  .lp-closing { padding-block:64px 68px; }
  .lp-closing p { font-size:17px; }
}
@media (max-width:760px) {
  /* the tilted back covers keep clear of the screen's edges */
  .lp-stage .s-back1 { width:46%; left:4%; }
  .lp-stage .s-back2 { width:46%; right:4%; }
}
@media (max-width:420px) {
  .lp-page .actions > * { flex:1 1 100%; justify-content:center; }
}
@media (max-width:520px) {
  /* a phone: the books behind go back to the edges and their type gets smaller, so both titles still show whole */
  .lp-stage .s-back1 { left:0; }
  .lp-stage .s-back2 { right:0; }
  .lp-stage :is(.s-back1, .s-back2) { font-size:clamp(9px, 2.9vw, 10.5px); }
}
@media (prefers-reduced-motion: reduce) { .lp-cover .book, .lp-q summary::after, .lp-page .btn::after { transition:none; } }

/* the state an exercise starts from (feedback 2026-10-24, SC-004); a solution that is a file's contents, not code */
.note.before { margin:6px 0 10px; }
pre.text { white-space:pre-wrap; }

/* ---------- the companion app (2026-10-25): the reader's account, the sign-in page, and on the chapter pages the
   assistant and support drawer behind a bubble at the bottom right (tools/companion_server.py, companion.js) ---------- */
.linkbtn { background:none; border:0; padding:0; color:var(--field); font:600 14px var(--font-ui); cursor:pointer; text-decoration:underline; }
.account .linkbtn { text-decoration:none; }
.cp-bubble { position:fixed; right:24px; bottom:24px; width:56px; height:56px; border-radius:50%; border:0; background:var(--mark-ink); color:#fff;
             box-shadow:0 10px 24px -8px rgba(0,0,0,.45); cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:20; }
.cp-bubble:hover { background:var(--mark); }
.cp-bubble.hidden { display:none; }
/* the drawer's width is --cp-w (companion.js: 520 px on a desktop, remembered after a drag of the left edge);
   on a desktop the open drawer pushes the page (body padding) instead of covering it */
.cp-drawer { position:fixed; top:0; right:0; height:100%; width:var(--cp-w, 430px); max-width:100%; background:var(--paper); border-left:1px solid var(--line);
             box-shadow:-16px 0 40px -24px rgba(0,0,0,.5); transform:translateX(102%); transition:transform .22s ease; z-index:30;
             display:flex; flex-direction:column; }
.cp-drawer.open { transform:none; }
.cp-drawer.no-anim { transition:none; }      /* reopened at once on the next page, no slide */
.cp-msg.bot a.chap { color:var(--field); font-weight:600; }
.cp-msg.bot b.ui { font-weight:700; }
.cp-scroll { padding:20px 22px 10px; }
.cp-handle { position:absolute; left:-4px; top:0; width:9px; height:100%; cursor:col-resize; z-index:1; }
.cp-handle:hover, body.cp-resizing .cp-handle { background:var(--line); }
body.cp-resizing { user-select:none; cursor:col-resize; }
body.cp-resizing .cp-drawer { transition:none; }
@media (min-width:1100px) { body.cp-open { padding-right:var(--cp-w, 430px); } body:not(.cp-resizing) { transition:padding-right .22s ease; } }
.cp-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line); }
.cp-tabs { display:flex; gap:2px; background:var(--soft); border-radius:8px; padding:3px; }
.cp-tab { border:0; background:none; font:600 14px var(--font-ui); color:var(--muted); padding:6px 12px; border-radius:6px; cursor:pointer; }
.cp-tab.on { background:var(--paper); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.12); }
.cp-tools { display:flex; gap:2px; }
.cp-ib { width:34px; height:34px; border:0; background:none; color:var(--muted); border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.cp-ib:hover { background:var(--soft); color:var(--ink); }
.cp-view { display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.cp-view.hidden { display:none; }
.cp-scroll { flex:1 1 auto; overflow-y:auto; padding:18px 18px 8px; }
.cp-q { font-size:19px; margin:4px 0 14px; }
.cp-chips { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.cp-chips.hidden { display:none; }
.cp-chip { border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:999px; padding:7px 14px; font:15px var(--font-ui); cursor:pointer; text-align:left; }
.cp-chip:hover { border-color:var(--mark); color:var(--mark-ink); }
/* the answers breathe (the author, 2026-10-25): larger line height, room between paragraphs, items and parts */
.cp-msg { margin:0 0 18px; font-size:15px; line-height:1.65; }
.cp-msg.user { background:var(--soft); border-radius:12px 12px 2px 12px; padding:10px 14px; margin-left:36px; white-space:pre-wrap; }
.cp-msg.bot p { margin:0 0 12px; }
.cp-msg.bot p:has(> b:only-child) { margin-top:18px; }     /* a heading of the answer: room above it */
.cp-msg.bot ul, .cp-msg.bot ol { margin:0 0 14px; padding-left:24px; }
.cp-msg.bot li { margin:0 0 6px; }
.cp-msg.bot pre { background:var(--code-bg); color:var(--code-ink); border-radius:8px; padding:12px 14px; overflow-x:auto; font-size:12.5px; line-height:1.5; margin:4px 0 14px; }
.cp-msg.bot code { font-size:13.5px; }
.cp-msg.bot .cite { display:inline-block; min-width:18px; height:18px; line-height:18px; text-align:center; font-size:11px; font-weight:700; border-radius:999px;
                    background:var(--field); color:#fff; text-decoration:none; margin:0 2px; vertical-align:text-top; padding:0 4px; }
.cp-msg.bot .cite.muted { background:var(--line); color:var(--muted); cursor:default; }
/* "Name: detail": the name before the colon stands out (a variant of an action, a field, an input) */
.cp-msg.bot .term code, .cp-msg.bot .term b { background:#e6f3f2; color:#0a4f4b; font-weight:700; border-radius:4px; padding:1px 6px; }
/* a code block of an answer with the site's Copy button */
.cp-msg.bot .cp-code { margin:4px 0 14px; }
.cp-msg.bot .cp-code pre { padding:46px 14px 12px; margin:0; }
.cp-msg.bot .cp-code .copy { top:8px; right:8px; padding:6px 12px; font-size:13px; }
/* the Support tab fills the drawer: the notes and the questions keep their size, the message field takes what
   is left down to the Send button (never beyond the drawer: no scrolling on a usual screen, the field only
   shrinks to its minimum on a small one, then the tab scrolls) */
.cp-support { display:flex; flex-direction:column; padding-bottom:16px; }
.cp-support > * { flex:none; }
.cp-support .cp-q { margin-bottom:10px; }
.cp-support .cp-box { margin:0 0 10px; padding:10px 12px; font-size:14px; }
.cp-support .cp-box p { margin:0 0 6px; }
.cp-support .cp-chips { margin:0 0 10px; gap:6px; }
.cp-support .cp-chip { padding:5px 12px; font-size:14px; }
.cp-support .cp-sform { flex:1 1 auto; display:flex; flex-direction:column; gap:8px; margin:0; min-height:0; }
.cp-support .cp-sform label:last-of-type { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
.cp-support .cp-sform textarea { flex:1 1 auto; min-height:68px; resize:none; }
.cp-support .cp-sform .btn { flex:none; }
.cp-support .cp-sform #cp-sdone { margin:0; }
.cp-support .cp-sform #cp-sdone:empty { display:none; }
.cp-wait { color:var(--muted); font-style:italic; }
.cp-err { color:var(--bad); }
.cp-src { font-size:12.5px; color:var(--muted); border-top:1px solid var(--line); margin-top:6px; padding-top:6px; }
.cp-src a { color:var(--field); }
.cp-input { display:flex; align-items:flex-end; gap:8px; padding:10px 14px; border-top:1px solid var(--line); margin:0; }
.cp-input.hidden { display:none; }
.cp-input textarea { flex:1 1 auto; resize:none; font:15px var(--font-ui); color:var(--ink); background:var(--soft); border:1px solid var(--line);
                     border-radius:12px; padding:10px 14px; max-height:140px; line-height:1.4; }
.cp-input textarea:focus { outline:2px solid var(--field); outline-offset:1px; }
.cp-send { flex:none; width:42px; height:42px; border:0; border-radius:50%; background:var(--mark-ink); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.cp-send:hover { background:var(--mark); }
.cp-foot { padding:0 18px 12px; margin:0; font-size:12px; color:var(--bad); }   /* shown only when the model cannot answer */
.cp-foot.hidden { display:none; }
.cp-note { margin:0 0 12px; }
.cp-note.hidden { display:none; }
.cp-box { border:1px solid var(--line); background:var(--soft); border-radius:10px; padding:12px 14px; margin:0 0 14px; font-size:14.5px; }
.cp-box b { display:block; margin:0 0 4px; }
.cp-box p { margin:0 0 8px; }
.cp-box p:last-child { margin:0; }
.cp-links a { display:inline-block; margin:0 14px 4px 0; font-weight:600; }
.cp-actions .btn { margin:0 0 8px; }
.cp-sform { display:grid; gap:10px; margin:10px 0 0; }
.cp-sform h4 { margin:0; font-size:15px; }
.cp-sform label { display:grid; gap:4px; font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.cp-sform select, .cp-sform textarea { font:15px var(--font-ui); color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
.cp-sform textarea { min-height:96px; resize:vertical; }
.cp-sform .btn { border:0; font:600 15px var(--font-ui); cursor:pointer; justify-self:start; }
.cp-hlist { list-style:none; padding:0; margin:0; }
.cp-hlist li { margin:0; }
.cp-hitem { width:100%; text-align:left; border:1px solid var(--line); background:var(--paper); border-radius:10px; padding:9px 12px; margin:0 0 8px; cursor:pointer;
            font:15px var(--font-ui); color:var(--ink); display:grid; gap:2px; }
.cp-hitem small { color:var(--muted); font-size:12px; }
.cp-hitem:hover { border-color:var(--mark); }
body.cp-open .cp-bubble { display:none; }     /* the bubble comes back when the drawer is closed with its X */
/* on a phone the drawer is the whole screen: no edge to drag, tighter notes so the Support tab fits */
@media (max-width:760px) {
  .cp-bubble { right:16px; bottom:16px; }
  .cp-handle { display:none; }
  .cp-scroll { padding:16px 16px 8px; }
  .cp-support .cp-box:not(.cp-office) > p:not(.cp-links) { display:none; }
  .cp-support .cp-chip { font-size:13.5px; padding:5px 11px; }
  .cp-support .cp-sform textarea { min-height:60px; }
}
@media print { .cp-bubble, .cp-drawer, .account { display:none; } }


/* Retouches communes : mêmes pages, même largeur, mêmes contenus et palette. */
:root { --accent-text:var(--mark-ink); --field-solid:#0B7A75; }

/* Les couvertures composées existent déjà dans le HTML ; leur style manquait. */
.book.composed { display:flex; flex-direction:column; aspect-ratio:824/1018; overflow:hidden; background:#fff; color:#1d2430; border-radius:4px 9px 9px 4px; }
.book.composed > .band { display:flex; flex-direction:column; flex:0 0 56%; min-height:0; width:auto; margin:0; padding:10%; background:#1C2330; color:#fff; border-bottom:3px solid #E4572E; }
.book.composed > .band small { display:block; font-size:.58em; line-height:1.4; letter-spacing:.035em; color:#e6eaf0; }
.book.composed > .band b { display:block; font-size:1.2em; line-height:1.18; margin-top:10%; overflow-wrap:anywhere; }
.book.composed > .band i { display:none; }
.book.composed > .art { display:grid; place-items:center; flex:1 1 auto; min-height:0; padding:7%; background:#fff; }
.book.composed > .art img { display:block; width:100%; height:100%; min-height:0; object-fit:contain; border:0; border-radius:0; box-shadow:none; }
/* every book of the library's home in one look: cover, title, summary, badge (printed or in preparation) */
.card.shelf { display:grid; grid-template-columns:96px minmax(0,1fr); gap:6px 20px; align-items:center; }
.card.shelf .cover-mini { display:block; width:96px; grid-row:1 / span 2; }
.cover-mini .book { width:100%; aspect-ratio:824/1018; overflow:hidden; border-radius:3px 7px 7px 3px; font-size:9px;
                    box-shadow:0 10px 16px -12px rgba(29,36,48,.35),0 0 0 1px var(--line); transition:transform .2s ease; }
.cover-mini .book:not(.composed) img { display:block; width:100%; height:100%; object-fit:cover; border:0; border-radius:0; box-shadow:none; }
a.cover-mini:hover .book { transform:translateY(-3px); }
.card.shelf .txt { min-width:0; }
.card.shelf h3 a { color:var(--ink); text-decoration:none; }
.card.shelf h3 a:hover { color:var(--field); text-decoration:underline; text-underline-offset:3px; }
.card.shelf .badge { justify-self:start; grid-column:2; }
@media (prefers-reduced-motion: reduce) { .cover-mini .book { transition:none; } }
.lp-cover .book.composed { font-size:14px; }
.lp-cover .book.composed > .art img { object-fit:contain; }

/* Petites largeurs : on ajuste les conteneurs, pas le contenu. */
footer.bottom .foot-nav { flex-wrap:wrap; gap:8px 22px; }
@media (max-width:600px) {
  .card.shelf { grid-template-columns:72px minmax(0,1fr); gap:6px 14px; }
  .card.shelf .cover-mini { width:72px; }
  .cover-mini .book { font-size:7px; }
  .cover-mini .book.composed > .band small { display:none; }
}

/* Les accents décoratifs restent orange ; les petits caractères gagnent en contraste. */
.card .num, .n, .lp-mstep .num { background:var(--mark-ink); }
.kicker, .lp-eyebrow:not(.quiet), .cp-chip:hover { color:var(--accent-text); }
.lp-closing .btn { background:var(--mark-ink); }
.copy.done, .mk-bot .cite, .cp-msg.bot .cite:not(.muted), ol.callouts li::before { background:var(--field-solid); color:#fff; }

/* Repères clavier et attente cohérents avec le vert canard du site. */
a:focus-visible, button:focus-visible, summary:focus-visible { outline:2px solid var(--field); outline-offset:3px; }
button:disabled { cursor:wait; opacity:.75; }
@media (prefers-reduced-motion: reduce) {
  .cp-drawer, body:not(.cp-resizing) { transition:none; }
}

/* ---------- the sign-in and request-access pages (design pass 2026-10-25): the form in one card, the library and
   what happens next beside it; fields of one height, one focus ring, a full-width action ---------- */
.signin-wrap { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:64px; align-items:start; padding-block:40px 32px; }
.signin-card { border:1px solid var(--line); border-radius:20px; padding:40px 40px 32px; background:var(--paper); box-shadow:var(--lift); min-width:0; }
.signin-card .kicker { display:inline-flex; align-items:center; gap:10px; margin:0 0 16px; font:600 12px var(--font-ui); letter-spacing:.14em; text-transform:uppercase; }
.signin-card .kicker::before { content:""; width:20px; height:2px; border-radius:2px; background:var(--mark); }
.signin-card h1 { font-size:32px; line-height:1.12; letter-spacing:-.022em; margin:0 0 12px; text-wrap:balance; }
.signin-card .lead { font-size:18px; line-height:1.5; color:var(--muted); margin:0 0 32px; }
form.signin { display:grid; gap:20px; margin:0; }
form.signin .two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
form.signin label { display:grid; gap:8px; min-width:0; font:600 12px var(--font-ui); color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
form.signin :is(input, select, textarea) { width:100%; min-width:0; font:16px/1.4 var(--font-ui); color:var(--ink); background:var(--paper); text-transform:none; letter-spacing:0;
  border:1px solid var(--line); border-radius:10px; padding:12px 14px; transition:border-color .15s ease, box-shadow .15s ease; }
form.signin :is(input, select, textarea):hover { border-color:var(--muted); }
form.signin :is(input, select, textarea):focus { outline:none; border-color:var(--field); box-shadow:0 0 0 3px rgba(11,122,117,.18); }
form.signin input::placeholder { color:var(--muted); opacity:.65; letter-spacing:.06em; }
form.signin select { appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:40px;
  background:var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='none' stroke='%2356616f' stroke-width='2' stroke-linecap='round' d='m7 10 5 5 5-5'/></svg>") right 12px center/18px no-repeat; }
form.signin textarea { resize:vertical; min-height:128px; }
form.signin .btn { display:flex; justify-content:center; align-items:center; width:100%; margin-top:4px; padding:15px 20px; border:0; border-radius:10px; font:600 16px var(--font-ui); cursor:pointer; }
form.signin .hp { position:absolute; left:-10000px; width:1px; height:1px; opacity:0; }
form.signin .banner { margin:0; }
form.signin .banner:not(.hidden) { display:block; }
.signin-card .hint { margin:22px 0 0; padding-top:18px; border-top:1px solid var(--line); font-size:13.5px; line-height:1.5; color:var(--muted); }
.signin-side { padding-top:40px; min-width:0; }
.signin-side .covers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px 14px; margin:0 0 16px; }
.signin-side .covers .cov { display:block; min-width:0; text-decoration:none; }
.signin-side .covers .book { width:100%; aspect-ratio:824/1018; font-size:10px; overflow:hidden; border-radius:3px 8px 8px 3px;
  box-shadow:0 16px 26px -18px rgba(28,35,48,.55), 0 0 0 1px var(--line); transition:transform .2s ease; }
.signin-side .covers a.cov:hover .book { transform:translateY(-3px); }
.signin-side .covers .book img { display:block; width:100%; height:100%; object-fit:cover; border:0; border-radius:0; box-shadow:none; }
.signin-side .covers .book.composed img { object-fit:contain; }
.signin-side .all-books { margin:0 0 32px; font-size:15px; line-height:1.5; color:var(--muted); }
.signin-side h2 { font-size:19px; margin:0 0 18px; }
.signin-side .points { list-style:none; padding:0; margin:0 0 28px; display:grid; gap:16px; }
.signin-side .points li { display:grid; grid-template-columns:28px minmax(0,1fr); gap:14px; align-items:start; font-size:16.5px; line-height:1.5; }
.signin-side .points .n { width:28px; height:28px; font-size:13px; margin-top:-1px; }
.signin-side .switch { margin:0; padding-top:20px; border-top:1px solid var(--line); font-size:15px; }
.signin-side .switch a { font-weight:600; text-decoration:none; }
.signin-side .switch a::after { content:" \2192"; }
@media (max-width:860px) {
  .signin-wrap { grid-template-columns:1fr; gap:40px; padding-block:24px 16px; }
  .signin-side { padding-top:0; }
  .signin-side .covers { grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
}
@media (max-width:600px) {
  .signin-card { padding:28px 22px 24px; border-radius:16px; }
  .signin-card h1 { font-size:27px; }
  .signin-card .lead { font-size:17px; margin-bottom:26px; }
  form.signin .two { grid-template-columns:1fr; }
  .signin-side .covers { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
}
@media (prefers-reduced-motion: reduce) { form.signin :is(input, select, textarea), .signin-side .covers .book { transition:none; } }
/* the support form waits for a sign-in: shown before any typing, not at the send */
.cp-sform.locked { opacity:.55; }
.cp-sform.locked :is(select, textarea, button) { cursor:not-allowed; }
.cp-snote { margin:0 0 10px; }
/* the trainer's admin page (companion app): the access requests, one card each */
.admin { max-width:860px; padding-block:24px 40px; }
.admin .kicker { display:inline-flex; align-items:center; gap:10px; margin:0 0 14px; font:600 12px var(--font-ui); letter-spacing:.14em; text-transform:uppercase; }
.admin .kicker::before { content:""; width:20px; height:2px; border-radius:2px; background:var(--mark); }
.admin h1 { font-size:32px; line-height:1.12; letter-spacing:-.022em; margin:0 0 10px; text-wrap:balance; }
.admin .lead { font-size:17px; line-height:1.5; color:var(--muted); margin:0 0 24px; max-width:65ch; }
.admin-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 20px; }
.admin-tab { font:600 14px var(--font-ui); color:var(--muted); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:7px 16px; cursor:pointer; }
.admin-tab:hover { border-color:var(--muted); color:var(--ink); }
.admin-tab.on { background:var(--ink); border-color:var(--ink); color:var(--paper); }
.admin-list { display:grid; gap:16px; }
.admin-req { border:1px solid var(--line); border-radius:14px; padding:20px 22px; background:var(--paper); min-width:0; }
.admin-req header { display:flex; gap:12px; align-items:baseline; justify-content:space-between; flex-wrap:wrap; }
.admin-req h2 { font-size:19px; margin:0; overflow-wrap:anywhere; }
.admin-req h2 .org { color:var(--muted); font-weight:500; }
.admin-req .meta { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:center; margin:10px 0 0; font-size:14px; color:var(--muted); overflow-wrap:anywhere; }
.admin-req .meta a { color:var(--field); }
.admin-req .meta .sep { color:var(--line); }
.admin-req .msg { margin:12px 0 0; padding:12px 14px; background:var(--soft); border-radius:8px; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.5; }
.admin-act { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; margin:16px 0 0; }
.admin-act label, .admin-decline label { display:grid; gap:6px; font:600 12px var(--font-ui); color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
.admin-act input { width:96px; font:16px var(--font-ui); color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
.admin-decline { margin:16px 0 0; }
.admin-req .hidden { display:none; }      /* after .admin-act, which would show it again */
.admin-decline textarea { width:100%; min-width:0; font:15px/1.4 var(--font-ui); color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:10px 12px; text-transform:none; letter-spacing:0; resize:vertical; }
.admin-act :is(input, textarea):focus, .admin-decline textarea:focus { outline:none; border-color:var(--field); box-shadow:0 0 0 3px rgba(11,122,117,.18); }
.admin-req .btn { border:0; cursor:pointer; font:600 15px var(--font-ui); padding:10px 18px; }
.admin-req .btn.danger { background:var(--bad); }
.admin-req .btn.danger:hover { filter:brightness(.92); }
.admin-req button:disabled { opacity:.55; cursor:wait; }
.admin-ghost { font:600 15px var(--font-ui); color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:9px 16px; cursor:pointer; }
.admin-ghost:hover { border-color:var(--muted); }
.admin-result { margin:16px 0 0; }
.admin-result.banner { margin-bottom:0; }
.banner.ok { background:var(--ok-bg); border-left-color:var(--ok); }
.admin-result code.once { display:inline-block; margin-top:6px; font:600 17px var(--font-code); letter-spacing:.08em; background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:4px 10px; user-select:all; }
@media (max-width:520px) { .admin-req { padding:16px; } .admin-act .btn, .admin-act .admin-ghost { flex:1 1 100%; } }