/* ════════════════════════════════════════════════════════════════════
   THE HANDBOOK
   ────────────────────────────────────────────────────────────────────
   One document, two presentations.

     handbook.html          reads as a web page, flowing, responsive
     handbook.html?print    Paged.js paginates it into A4 pages with
                            running heads, folios and a real contents
                            page, and you print from there

   The paged rules live in the PAGED MEDIA section at the foot. They
   are wrapped in html.paged so they only bite once the polyfill has
   loaded — Chrome ignores nearly all of CSS Paged Media natively, so
   there is no point emitting them into a plain @media print block and
   hoping.

   This file is loaded only by handbook.html. It is deliberately not in
   styles.css: nothing else on the site needs 400 lines of book layout.
   ════════════════════════════════════════════════════════════════════ */

/* ── Shared: type and rhythm ─────────────────────────────────────── */

/* On the container, not on .hb: the print-edition bars are siblings of
   the article, and a variable scoped to .hb is invisible to them. That
   is what made the bar at the foot run the full width of the page while
   the text above it stopped at 34rem. */
.handbook {
  --measure: 34rem;          /* ~68 characters, the readable line */
  --rule: var(--border);
}

.hb p,
.hb li {
  line-height: 1.72;
  color: var(--text-dim);
}

.hb strong { color: var(--text); font-weight: 600; }
.hb em { font-style: italic; }

.hb h1, .hb h2, .hb h3, .hb h4 {
  color: var(--text);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

/* Superscript reference marks. Small, raised, and not so loud that
   they interrupt the sentence they are attached to. */
.ref {
  font-size: 0.62em;
  vertical-align: super;
  line-height: 0;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  padding: 0 0.08em;
}

.ref:hover { text-decoration: underline; }

/* ── Screen layout ───────────────────────────────────────────────── */

.hb { max-width: var(--measure); margin: 0 auto; }

.hb p { margin-bottom: 1.05rem; }

.hb-lead {
  font-size: 1.12rem;
  line-height: 1.62;
  color: var(--text) !important;
}

/* Cover */

.hb-cover {
  text-align: center;
  padding: 1rem 0 3rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.5rem;
}

.hb-mark { color: var(--accent); margin-bottom: 1.6rem; }
.hb-mark svg { height: 4.2rem; width: auto; display: inline-block; }

.hb-cover h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.5vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.hb-sub {
  font-size: 1.05rem;
  color: var(--text-dim);
  max-width: 27rem;
  margin: 0 auto 2rem;
}

.hb-author { font-weight: 600; margin-bottom: 0.2rem !important; }

.hb-meta {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted) !important;
}

/* Part openers and sections */

.hb-part {
  margin: 3.5rem 0 2rem;
  padding-top: 1.6rem;
  border-top: 2px solid var(--text);
}

.hb-part-no {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 0.5rem;
}

.hb-part h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.85rem;
  letter-spacing: -0.01em;
}

.hb-part .hb-part-blurb {
  margin-top: 0.7rem;
  font-style: italic;
  color: var(--text-muted) !important;
}

.hb-chapter { margin-bottom: 2.4rem; }

.hb-chapter > h3 {
  font-size: 1.16rem;
  margin: 2rem 0 0.7rem;
}

.hb-chapter h4 {
  font-size: 1rem;
  margin: 1.5rem 0 0.5rem;
}

/* The front matter's headings sit outside .hb-chapter, so they missed the
   rule above entirely and sat flush against the paragraph beneath. */
.hb-colophon-front h3 {
  font-size: 1.16rem;
  margin: 2rem 0 0.7rem;
}

.hb-colophon-front h3:first-child { margin-top: 0; }

/* Contents */

.hb-toc { margin-bottom: 2rem; }
.hb-toc h2 { font-family: var(--serif); font-weight: 400; font-size: 1.6rem; margin-bottom: 1rem; }
.hb-toc ol { list-style: none; padding: 0; margin: 0; }

.hb-toc li {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.28rem 0;
  color: var(--text-dim);
}

.hb-toc .toc-part {
  margin-top: 1rem;
  font-weight: 600;
  color: var(--text);
}

.hb-toc a { color: inherit; text-decoration: none; }
.hb-toc a:hover { text-decoration: underline; }

/* The leader dots and folio are filled in by Paged.js after layout;
   on screen there are no page numbers to show, so both stay empty. */
.hb-toc .toc-dots { flex: 1 1 auto; border-bottom: 1px dotted var(--border-firm); position: relative; top: -0.25em; }
.hb-toc .toc-page { font-family: var(--mono); font-size: 0.85rem; color: var(--text-muted); }
.hb-toc .toc-page:empty::before { content: ""; }

/* Pull quotes, rules, cases */

.hb-principle {
  background: var(--surface);
  border-left: 3px solid var(--accent);
  padding: 1rem 1.15rem;
  margin: 1.5rem 0;
}

.hb-principle p:last-child { margin-bottom: 0; }

.hb-rule {
  font-size: 1.02rem;
  font-weight: 500;
  color: var(--text) !important;
  margin-bottom: 0.3rem !important;
}

.hb-competency {
  border-left: 3px solid var(--accent);
  padding-left: 1.05rem;
  margin-bottom: 1.5rem;
}

.hb-competency h4 { margin-top: 0; }
.hb-competency .hb-q { color: var(--accent) !important; font-weight: 500; margin-bottom: 0.35rem !important; }

.hb-option {
  display: flex;
  gap: 0.85rem;
  align-items: baseline;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 0.85rem 1.05rem;
  margin-bottom: 0.65rem;
}

.hb-option p { margin: 0; }
.hb-letter { font-family: var(--mono); font-weight: 600; color: var(--accent); flex: 0 0 auto; }

/* A short documented case, set apart from the argument around it. */
.hb-case {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.05rem 1.2rem;
  margin: 1.5rem 0;
  background: var(--surface);
}

.hb-case h4 {
  margin: 0 0 0.5rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.hb-case p:last-child { margin-bottom: 0; }
.hb-case p { font-size: 0.97rem; }

/* Rule lists */

.hb-rules { margin-bottom: 2rem; }
.hb-rules-lead { font-style: italic; }
.hb-rules ol { padding-left: 1.35rem; margin: 0; }
.hb-rules li { margin-bottom: 1.05rem; }
.hb-rules li p:last-child { margin-bottom: 0; font-size: 0.95rem; }

.transfer li { margin-bottom: 0.7rem; }

/* Tables */

.hb-table-wrap { overflow-x: auto; margin: 1.4rem 0; }

.hb table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}

.hb th, .hb td {
  text-align: left;
  vertical-align: top;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--rule);
  color: var(--text-dim);
}

.hb th {
  color: var(--text);
  font-weight: 600;
  border-bottom: 1.5px solid var(--border-firm);
}

/* Sources */

.hb-sources { counter-reset: src; }
.hb-sources ol { padding-left: 1.6rem; }
.hb-sources li { margin-bottom: 0.7rem; font-size: 0.92rem; line-height: 1.6; }
.hb-sources a { color: var(--text-muted); word-break: break-word; }

.hb-colophon {
  border-top: 1px solid var(--rule);
  margin-top: 2.5rem;
  padding-top: 1.4rem;
  font-size: 0.92rem;
}

.hb-cta {
  font-family: var(--mono);
  font-size: 1.1rem;
  text-align: center;
  color: var(--accent) !important;
  padding: 1rem 0;
}

/* The bars pointing at the print edition — one under the nav, one at the
   foot. Screen only; both carry .no-print and neither is inside the
   article, so the paginated build never sees them. */
.hb-getpdf {
  /* width:100% as well as max-width. These are flex items in a column
     container and their auto side margins switch off stretch alignment,
     so without it the box shrinks to fit its own content and stops
     lining up with the text column above it. */
  width: 100%;
  max-width: var(--measure);
  margin: 2.5rem auto 0;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.hb-getpdf p {
  margin: 0;
  flex: 1 1 16rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.hb-getpdf strong { color: var(--text); }

/* .cta-btn carries no display of its own — on other pages it happens to
   sit in a flex container, which blockifies it. In a plain block it stays
   inline, so min-height and vertical padding do nothing and the button
   collapses. Pin it here rather than changing the shared rule. */
.hb-getpdf .cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  text-decoration: none;
  white-space: nowrap;
}

/* The one at the foot is the closing call to action, so it is centred and
   stacked on purpose. Left as a row it wrapped anyway — its text runs to
   three lines — and an orphaned button under a squeezed paragraph looks
   like a mistake rather than a decision. */
.hb-getpdf-end {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 1.5rem 1.3rem;
  margin-top: 3rem;
}

.hb-getpdf-end p { flex: 0 1 auto; max-width: 30rem; }

/* The one under the nav is an aside, not an announcement. */
.hb-getpdf-top {
  margin: 0 auto 2.5rem;
  padding: 0.9rem 1.1rem;
  gap: 1rem;
}

.hb-getpdf-top p { font-size: 0.88rem; flex: 1 1 14rem; }

.hb-getpdf-top .cta-btn {
  min-height: 2.4rem;
  padding: 0.5rem 1.15rem;
  font-size: 0.95rem;
}

/* 40rem, matching the site's own breakpoint in styles.css — below it the
   shared rule already forces .cta-btn to full width, so the container has
   to stop being a row at the same point or the button ends up stretched
   across a wrapped flex line. */
@media (max-width: 40rem) {
  .hb-getpdf { flex-direction: column; align-items: stretch; }
  /* flex-basis is measured along the main axis, which is now vertical —
     leaving the row's 14rem basis in place gives the paragraph a 224px
     height and opens a hole between the text and the button. */
  .hb-getpdf p { flex: 0 1 auto; }
}

/* Shown only while Paged.js is laying the document out. */
.hb-paging {
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 0.6rem;
  text-align: center;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.9rem;
  z-index: 50;
}

/* ════════════════════════════════════════════════════════════════════
   PAGED MEDIA
   Applied once Paged.js has loaded (html.paged) and again for the
   printer itself. Chrome implements almost none of this natively, so
   the polyfill is what makes running heads and folios real.
   ════════════════════════════════════════════════════════════════════ */

html.paged {
  --paper: #fff;
  --ink: #16181d;
  --ink-soft: #3c4048;
  --ink-faint: #6b7078;
  --hair: #c8ccd2;
}

html.paged body {
  background: #6e7278;
  color: var(--ink);
}

html.paged .no-print,
html.paged .top-bar,
html.paged .landing-footer,
html.paged .hb-getpdf { display: none !important; }

html.paged .landing { display: block; max-width: none; padding: 0; min-height: 0; }
html.paged .hb { max-width: none; margin: 0; }

/* Ink. Print is black on white regardless of the reader's theme. */
html.paged .hb p,
html.paged .hb li,
html.paged .hb td { color: var(--ink-soft); }

html.paged .hb h1, html.paged .hb h2,
html.paged .hb h3, html.paged .hb h4,
html.paged .hb strong, html.paged .hb th,
html.paged .hb-lead, html.paged .hb-rule { color: var(--ink); }

html.paged .hb-meta, html.paged .hb-sources a,
html.paged .toc-page { color: var(--ink-faint); }

html.paged .ref, html.paged .hb-part-no,
html.paged .hb-letter, html.paged .hb-case h4,
html.paged .hb-competency .hb-q, html.paged .hb-cta { color: var(--ink); }

html.paged .hb-mark { color: var(--ink); }

html.paged .hb-principle,
html.paged .hb-case { background: none; border-left: 2.5px solid var(--hair); }

html.paged .hb-case { border: 1px solid var(--hair); }
html.paged .hb-competency { border-left-color: var(--hair); }
html.paged .hb-option { border-color: var(--hair); }
html.paged .hb th, html.paged .hb td { border-bottom-color: var(--hair); }
html.paged .hb-part { border-top-color: var(--ink); }
html.paged .toc-dots { border-bottom-color: var(--hair); }
html.paged a { color: inherit; text-decoration: none; }

/* ── The page ────────────────────────────────────────────────────── */

@page {
  size: A4;
  margin: 24mm 20mm 20mm;

  /* Running heads sit on the outer edge, folios on the outer edge
     below. Verso carries the book, recto carries where you are in it. */
  @top-left {
    content: none;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 8pt;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7078;
    margin-bottom: 6mm;
  }
  @top-right {
    content: none;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    font-size: 8pt;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b7078;
    margin-bottom: 6mm;
  }
  @bottom-left {
    content: none;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 8.5pt;
    color: #6b7078;
    margin-top: 6mm;
  }
  @bottom-right {
    content: none;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 8.5pt;
    color: #6b7078;
    margin-top: 6mm;
  }
}

@page :left {
  margin-left: 18mm;
  margin-right: 22mm;
  @top-left { content: "The AI Decision Fluency Handbook"; }
  @bottom-left { content: counter(page); }
}

@page :right {
  margin-left: 22mm;
  margin-right: 18mm;
  @top-right { content: string(partname); }
  @bottom-right { content: counter(page); }
}

/* The cover carries nothing but itself. :first outranks :left/:right,
   and unlike a named page it is actually implemented. */
@page :first {
  @top-left { content: none; }
  @top-right { content: none; }
  @bottom-left { content: none; }
  @bottom-right { content: none; }
}

/* The recto running head follows the part you are in; the verso carries
   the book. The verso is a literal rather than a named string because
   string-set with a literal value does not resolve in Paged.js 0.4.3 —
   only content() does, and there is no element holding the book's title
   on every page to draw content() from. */
html.paged .hb-part h2 { string-set: partname content(text); }

/* ── Page assignment and breaks ──────────────────────────────────── */

/* These are declared WITHOUT the html.paged guard, deliberately.
   Paged.js strips break properties out of the rules it finds and applies
   them through its own layout pass, and that pass does not resolve an
   html.paged ancestor — with the guard on, every rule below was parsed,
   emptied, and then silently ignored, so parts opened halfway down a
   page under the tail of the previous chapter. Fragmentation properties
   do nothing in normal flow, so leaving them unguarded costs the screen
   version nothing. */

.hb-cover { break-after: page; page-break-after: always; }
.hb-colophon-front { break-after: page; page-break-after: always; }
.hb-toc { break-after: page; page-break-after: always; }
.hb-part { break-before: page; page-break-before: always; }
.hb-sources { break-before: page; page-break-before: always; }

/* No heading stranded at the foot of a page, no single line of a
   paragraph left on its own. */
.hb h2, .hb h3, .hb h4 { break-after: avoid-page; page-break-after: avoid; break-inside: avoid; }
.hb p, .hb li { orphans: 2; widows: 2; }

.hb-principle,
.hb-case,
.hb-option,
.hb-competency,
.hb-rules li,
.hb-toc li,
.hb table tr { break-inside: avoid; page-break-inside: avoid; }

/* Cosmetics for the paged build only — these Paged.js leaves alone. */
html.paged .hb-cover {
  border-bottom: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 195mm;
  box-sizing: border-box;
}

html.paged .hb-part { padding-top: 0; margin-top: 0; }

/* ── Print type ──────────────────────────────────────────────────── */

html.paged .hb { font-size: 10.5pt; }
html.paged .hb p, html.paged .hb li { line-height: 1.55; }
html.paged .hb p { margin-bottom: 0.72em; text-align: justify; hyphens: auto; }
html.paged .hb-lead { font-size: 11.5pt; text-align: left; }
html.paged .hb-part h2 { font-size: 20pt; }
html.paged .hb-chapter > h3 { font-size: 12pt; }
html.paged .hb-chapter h4 { font-size: 10.5pt; }
html.paged .hb-cover h1 { font-size: 30pt; }
html.paged .hb-sub { font-size: 12pt; }
html.paged .hb table { font-size: 9pt; }
html.paged .hb-sources li { font-size: 8.8pt; }

/* Paged.js paints its own page furniture; give it a sheet of paper. */
html.paged .pagedjs_page {
  background: var(--paper);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.28);
  margin: 10mm auto;
}

@media print {
  html.paged body { background: #fff; }
  html.paged .pagedjs_page { box-shadow: none; margin: 0; }
}

/* ── Fallback ────────────────────────────────────────────────────── */
/* If somebody prints the reading version without the print build,
   they should still get something usable rather than the navigation
   and a dark background. No folios — that is what ?print is for. */

@media print {
  html:not(.paged) .no-print,
  html:not(.paged) .top-bar,
  html:not(.paged) .landing-footer,
  html:not(.paged) .hb-getpdf { display: none !important; }

  html:not(.paged), html:not(.paged) body { background: #fff; color: #000; }
  html:not(.paged) .landing { display: block; padding: 0; max-width: none; }
  html:not(.paged) .hb { max-width: none; }
  html:not(.paged) .hb p, html:not(.paged) .hb li { color: #23262c; }
  html:not(.paged) .hb-part { break-before: page; }
  html:not(.paged) .hb-cover { break-after: page; }
  html:not(.paged) .hb h2, html:not(.paged) .hb h3 { break-after: avoid; }
  @page { margin: 20mm 18mm; }
}