/* The handbook frame ("Handbook with side notes", preset a5-handbook).
   Loaded after app.css, on handbook builds only, and every rule is scoped to
   body[data-frame="handbook"], so a rail build is untouched even if this file
   is present in dist/.

   Three widths, each measured in a browser at 1440 / 1280 / 1024 / 900 / 768 /
   390 with every section open (document scrollWidth == viewport width):

     >= 1024px  contents | text | margin notes. handbook.js lifts every note
                into the margin level with the block it illustrates and pushes a
                note down when the one above would overlap it.
     901-1023   contents | text; the notes stay in the text as tinted cards.
     <= 900     one column; the contents list becomes the sticky "On this page"
                bar; <= 720 a table becomes one card per row.

   2026-09-22: lowered from 1200 to 1024 (user-reported: a maximised ordinary
   laptop window was landing in the 901-1199 fallback, so notes never reached
   the margin on a normal-sized screen). Re-measured at 1024px with every
   section open on every chapter page: no horizontal overflow, no note
   overlapping the text or the contents column. 900 stays the floor — one
   column below it is unchanged, and the fallback band (901-1023) still
   exists for a genuinely narrow window, just a smaller one now.

   Colours are app.css's tokens only, so the dark theme and its measured
   contrast table carry over unchanged. */

body[data-frame="handbook"] {
  /* 2026-09-22, user-requested: contents column 13% narrower than the
     original 212 (-> 184), then widened back up a little (-> 196) once seen
     next to the panel's gutters; margin-note column 3% narrower (272 -> 264)
     — the reading column, the only one of the three set as `minmax(0, 1fr)`,
     absorbs both cuts and gets wider. Both inter-column gaps also came down
     a step in the same pass: the user found the empty space between the
     three columns too wide once the reading column had grown. Neither fixed
     column has its own minimum width below this, so nothing else needs to
     change for the grid to stay valid. */
  --hb-toc-w: 196px;
  --hb-gap: 18px;
  --hb-note-w: 264px;
  --hb-note-gap: 20px;       /* between the text column and a margin note */
  --hb-note-edge: 20px;      /* between a margin note and the panel's edge */
  --where-h: 0px;            /* the phone's sticky position bar, measured by JS */
}

/* ------------------------------------------------------------- the grid */
body[data-frame="handbook"] .hb-page {
  display: grid; grid-template-columns: var(--hb-toc-w) minmax(0, 1fr); gap: var(--hb-gap);
  max-width: var(--wrap); margin: 0 auto; padding-top: 18px; align-items: start;
}
/* The Executive Summary is a single open section: no duplicate page contents
   column or phone position bar, and no empty margin-note gutter. */
body[data-frame="handbook"] .hb-page.hb-page-full {
  grid-template-columns: minmax(0, 1fr);
}
body[data-frame="handbook"] .col-left.wide { max-width: none; margin: 0; }
body[data-frame="handbook"] .sec,
body[data-frame="handbook"] .sec-title {
  scroll-margin-top: calc(var(--topbar-h) + var(--where-h) + 14px);
}
body[data-frame="handbook"] .sec-summary { max-width: 64ch; }

/* ------------------------------------------------ the contents column */
body[data-frame="handbook"] .hb-toc {
  position: sticky; top: calc(var(--topbar-h) + 16px);
  max-height: calc(100vh - var(--topbar-h) - 32px); overflow-y: auto;
  padding: 12px 0 16px; font-size: 13px;
}
body[data-frame="handbook"] .hb-toc-h {
  margin: 0 0 8px 12px; font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
body[data-frame="handbook"] .hb-toc-h2 { margin-top: 22px; }
body[data-frame="handbook"] .hb-toc-list,
body[data-frame="handbook"] .hb-toc-sub { list-style: none; margin: 0; padding: 0; }
body[data-frame="handbook"] .hb-toc a {
  display: flex; gap: 8px; padding: 5px 8px 5px 10px;
  border-left: 2px solid var(--line); line-height: 1.35;
  font-weight: 600; color: var(--ink-2); overflow-wrap: anywhere;
}
body[data-frame="handbook"] .hb-toc a:hover { text-decoration: none; color: var(--accent-warm); }
body[data-frame="handbook"] .hb-toc-l1 > a { font-weight: 800; color: var(--ink); }
body[data-frame="handbook"] .hb-toc-n {
  flex: 0 0 auto; min-width: 2.1em; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
body[data-frame="handbook"] .hb-toc a.cur {
  border-left-color: var(--accent-warm); color: var(--accent-warm); font-weight: 800;
  background: var(--panel); border-radius: 0 4px 4px 0;
}
body[data-frame="handbook"] .hb-toc a.cur .hb-toc-n { color: var(--accent-warm); }
/* An x.y's own x.y.z sections. Without JavaScript every one is shown; with it,
   only the section being read opens its list, so the column stays one screen. */
body[data-frame="handbook"] .hb-toc-sub { margin: 1px 0 6px 12px; }
body[data-frame="handbook"] .hb-toc-sub a { font-size: 12.5px; padding: 3px 8px 3px 10px; }
.hb-js body[data-frame="handbook"] .hb-toc .hb-toc-sub { display: none; }
.hb-js body[data-frame="handbook"] .hb-toc li.open > .hb-toc-sub { display: block; }
/* a divider heading ("Sales", "Marketing") is a group label, not a row */
body[data-frame="handbook"] .hb-toc-div > a {
  padding-top: 8px; font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3);
}

/* ------------------------------------------- the phone's position bar */
body[data-frame="handbook"] .hb-where { display: none; }

/* ------------------------------------------------------ the text column */
body[data-frame="handbook"] .hb-read { min-width: 0; }
/* The paragraph Word set bold all through and ended with a colon. Its bold is
   Word's own (<strong> from the marks); this adds only the space above and the
   short rule that says "a new group starts here". */
body[data-frame="handbook"] .blk.p.lead-in {
  margin: 24px 0 8px; line-height: 1.35; color: var(--ink);
}
body[data-frame="handbook"] .blk.p.lead-in::before {
  content: ""; display: block; width: 22px; height: 3px; margin-bottom: 7px;
  background: var(--orange-bright); border-radius: 2px;
}

/* Inline sub-heading: a level-4 section read as part of its parent. */
body[data-frame="handbook"] .sec.hb-sub {
  border-left: 0; padding-left: 0; margin: 22px 0 6px;
}
body[data-frame="handbook"] .hb-sub > .sec-title {
  display: flex; align-items: baseline; gap: 8px; width: 100%; margin: 0 0 4px;
  font-size: 16px; font-weight: 800; color: var(--ink);
}
body[data-frame="handbook"] .hb-subhead-text { display: inline-flex; gap: 8px; align-items: baseline; }
body[data-frame="handbook"] .hb-sub > .sec-title .sec-num { color: var(--accent-warm); margin-right: 0; }

/* A chapter that is always open (Executive Summary) has no caret to show. */
body[data-frame="handbook"] .sec.hb-open > .sec-title .sec-caret { display: none; }

/* The Executive Summary's journey items as numbered steps. The numbers are
   CSS counters, not text; the list's words are the book's. The colours are
   the journey's own: understand/identify+assess light, develop+test+execute
   deep, track petrol-light — the same pairs the arrow band uses. */
body[data-frame="handbook"] .hb-steps {
  list-style: none; counter-reset: step; padding: 0; margin: 6px 0 20px;
}
body[data-frame="handbook"] .hb-steps > li {
  counter-increment: step; position: relative; margin: 0;
  padding: 12px 0 12px 56px; min-height: 38px;
  border-top: 1px solid var(--line-2); line-height: 1.6;
}
body[data-frame="handbook"] .hb-steps > li:last-child { border-bottom: 1px solid var(--line-2); }
body[data-frame="handbook"] .hb-steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 11px;
  width: 38px; height: 38px; border-radius: 50%; text-align: center; line-height: 38px;
  font-weight: 900; font-size: 17px; background: var(--orange-100); color: var(--orange-900);
}
body[data-frame="handbook"] .hb-steps > li:nth-child(3)::before,
body[data-frame="handbook"] .hb-steps > li:nth-child(4)::before,
body[data-frame="handbook"] .hb-steps > li:nth-child(5)::before { background: var(--orange); color: var(--on-dark); }
body[data-frame="handbook"] .hb-steps > li:nth-child(6)::before { background: var(--petrol-100); color: var(--petrol-900); }

/* ------------------------------------------------------------ the notes
   One look for a note wherever it stands: in the margin, in the text, on the
   library's grid. Field insight = petrol, example = slate, AI tools = the
   tile's orange top rule — the three materials the rail cards had. */
body[data-frame="handbook"] .mnote {
  font-size: 13.5px; line-height: 1.5; padding: 10px 12px 8px;
  border-radius: var(--radius); overflow-wrap: anywhere;
  background: var(--tint); border: 1px solid var(--tint-line); border-left: 3px solid var(--petrol);
}
body[data-frame="handbook"] .mnote-example { background: var(--ground); border-color: var(--line); border-left-color: var(--slate); }
body[data-frame="handbook"] .mnote-tools {
  background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--orange-bright);
}
body[data-frame="handbook"] .mnote.flash { box-shadow: 0 0 0 2px var(--orange-bright); }
body[data-frame="handbook"] .mnote-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 6px;
}
body[data-frame="handbook"] .mnote-kind {
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-warm);
}
body[data-frame="handbook"] .mnote-type,
body[data-frame="handbook"] .mnote-team {
  font-size: 10.5px; font-weight: 700; line-height: 1.6; padding: 0 7px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--tint-line); color: var(--accent-cool);
}
body[data-frame="handbook"] .mnote-example .mnote-type { border-color: var(--line); color: var(--ink-2); }
body[data-frame="handbook"] .mnote-team { border-color: var(--orange-100); color: var(--accent-warm); }
body[data-frame="handbook"] .mnote-text { margin: 0 0 6px; color: var(--ink); }
body[data-frame="handbook"] .mnote-illustrative > .p { margin: 0 0 8px; }
body[data-frame="handbook"] .mnote-illustrative .value-proposition-examples { margin-bottom: 0; }
body[data-frame="handbook"] .mnote-illustrative .value-proposition-examples .p { margin-top: 6px; margin-bottom: 6px; }
/* `.mnote-lead-hidden` (blocks.html bp_body, `hide_lead` override): the same
   "still in dist/, off the screen only" contract app.css documents for
   `.checklist-plain` — check_handbook.py's check 13 requires every string of
   the book to render on its page, so this stays in the DOM and on paper. */
@media screen {
  body[data-frame="handbook"] .mnote-lead-hidden { display: none; }
}
/* A `case_split` card's paragraphs (bp_body in blocks.html): each one a
   different team's account, so each gets its own chip and a rule from the
   one before it — without the rule two teams' stories read as one passage. */
body[data-frame="handbook"] .mnote-para { padding-top: 8px; margin-top: 2px; border-top: 1px solid var(--tint-line); }
body[data-frame="handbook"] .mnote-para:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
body[data-frame="handbook"] .mnote-para-tags { margin: 0 0 4px; }
body[data-frame="handbook"] .mnote .card-figure { margin: 6px 0; }
body[data-frame="handbook"] .mnote .card-figure img { max-height: 200px; }
body[data-frame="handbook"] .mnote-tool {
  display: flex; flex-direction: column; gap: 2px; padding: 7px 0 8px;
  border-top: 1px solid var(--line-2);
}
body[data-frame="handbook"] .mnote-head + .mnote-tool { border-top: 0; padding-top: 0; }
/* No font-weight here: the name's bold is Word's own, carried as <strong> by
   rich(). Word bolds most tool names all through, but not all of them — "(pending
   release)" is italic only, and one name's bold stops part-way — and a weight
   set here would have shown bold that Word does not have. */
body[data-frame="handbook"] .mnote-tool-name { margin: 0; line-height: 1.3; }
body[data-frame="handbook"] .mnote-tool-tag { margin: 0; font-size: 12.5px; color: var(--accent-warm); }
/* This paragraph explains EVE specifically, so it stays visible with that
   tool even when the tool's longer access details are folded. */
body[data-frame="handbook"] .mnote-tool-note {
  margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line-2);
  color: var(--ink-2);
}
body[data-frame="handbook"] .mnote-tool-go { font-size: 12px; font-weight: 700; }
body[data-frame="handbook"] .mnote-pending {
  align-self: flex-start; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 3px;
  background: var(--muted-fill); color: var(--muted-ink);
}
body[data-frame="handbook"] .mnote-more { margin-top: 2px; font-size: 12.5px; }
body[data-frame="handbook"] .mnote-more-btn {
  font: inherit; font-size: 12px; font-weight: 700; color: var(--ink-3); cursor: pointer;
  background: none; border: 0; padding: 2px 0; text-align: left;
}
body[data-frame="handbook"] .mnote-more-btn::before { content: "\25B8"; display: inline-block; width: 1.1em; transition: transform .15s; }
body[data-frame="handbook"] .mnote-more-btn[aria-expanded="true"]::before { transform: rotate(90deg); }
body[data-frame="handbook"] .mnote-more-btn:hover { color: var(--accent-warm); }
body[data-frame="handbook"] .mnote-more-btn:focus-visible { outline: 2px solid var(--accent-warm); outline-offset: 2px; }
body[data-frame="handbook"] .mnote-more .tool-lines { margin: 4px 0 4px; padding-left: 16px; font-size: 12.5px; color: var(--ink-2); }
body[data-frame="handbook"] .mnote-more .tool-links { font-size: 12px; padding-top: 5px; }

/* In the text (every width below the margin layout, and without JS): a
   tinted card between the paragraphs, at the note's own place. */
body[data-frame="handbook"] .mnote[data-note] { margin: 14px 0 18px; }

/* library.html's Best practice grid: the same card, with a footer link */
body[data-frame="handbook"] .bp-card { scroll-margin-top: calc(var(--topbar-h) + var(--where-h) + 14px); }
body[data-frame="handbook"] .bp-foot {
  display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 6px 0 0; padding-top: 6px;
  border-top: 1px solid var(--line-2); font-size: 12px; color: var(--ink-3);
}
body[data-frame="handbook"] .card-grid .bp-card:target { box-shadow: 0 0 0 2px var(--orange-bright); }
body[data-frame="handbook"] .also-tagged,
body:not([data-frame="handbook"]) .also-tagged { margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-3); }

/* ---------------------------------------------------- figure zoom overlay */
body[data-frame="handbook"] .figure-zoom { cursor: zoom-in; }
.hb-zoom {
  position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column;
  background: rgba(15, 26, 25, .92);
}
.hb-zoom[hidden] { display: none; }
.hb-zoom-bar { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 12px; }
.hb-zoom-btn {
  font: inherit; font-size: 13px; font-weight: 700; padding: 7px 14px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .55); border-radius: 4px; background: transparent; color: #fff;
}
.hb-zoom-btn:focus-visible { outline: 2px solid var(--orange-100); outline-offset: 2px; }
.hb-zoom-stage { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; text-align: center; padding: 0 12px 16px; }
.hb-zoom-stage img {
  max-width: 100%; max-height: calc(100vh - 80px); width: auto; height: auto;
  background: #fff; cursor: zoom-in;
}
/* "Actual size": the file's own pixels, panned inside the stage. */
.hb-zoom.is-actual .hb-zoom-stage img { max-width: none; max-height: none; cursor: zoom-out; }
html.hb-zoom-open { overflow: hidden; }

/* ------------------------------------------- wide: notes in the margin */
@media (min-width: 1024px) {
  .hb-js body[data-frame="handbook"] .hb-read.hb-margin-page {
    position: relative;
    padding-right: calc(var(--hb-note-w) + var(--hb-note-gap) + var(--hb-note-edge));
  }
  .hb-js body[data-frame="handbook"] .hb-read.hb-margin-page .mnote[data-note]:not(.mnote-inline) {
    position: absolute; right: var(--hb-note-edge); width: var(--hb-note-w); margin: 0;
  }
  /* before handbook.js has placed a note it would sit at its static position,
     on top of the text; it stays invisible until it has a place */
  .hb-js body[data-frame="handbook"] .hb-read.hb-margin-page .mnote[data-note]:not(.mnote-inline):not(.is-placed) { visibility: hidden; }
  /* a hairline from the note back towards the text it stands beside */
  .hb-js body[data-frame="handbook"] .hb-read.hb-margin-page .mnote[data-note]:not(.mnote-inline)::before {
    content: ""; position: absolute; left: calc(-1 * var(--hb-note-gap) + 4px); top: 14px;
    width: calc(var(--hb-note-gap) - 10px); border-top: 1px solid var(--sign-grey-line);
  }
}

/* The two selectable layouts swap the long 2.2.3 Best Practice and the
   AI tool groups between the reading column and the margin. */
body[data-frame="handbook"] .mnote-inline { font-size: 14px; line-height: 1.6; }
/* The tracking chart now has the reading column, not a small sidebar slot. */
body[data-frame="handbook"] .mnote-inline[data-block="6.1-b14"] .card-figure img { max-height: none; }
/* Sidebar variant: the Word's level-4 AI grouping retains an anchor for old
   links but does not create a second visible section in the reading column. */
body[data-frame="handbook"] .sec.hb-ai-merged { margin: 0; }
body[data-frame="handbook"] .hb-section-alias { display: block; height: 0; scroll-margin-top: calc(var(--topbar-h) + 12px); }
body[data-frame="handbook"] .hb-ai-merged > .sec-body > .lead-in:first-of-type { margin-top: 16px; }
body[data-frame="handbook"] .hb-ai-sub {
  border-top: 3px solid var(--orange-bright); padding-top: 12px;
}
body[data-frame="handbook"] .hb-ai-sub > .sec-title { color: var(--accent-warm); }
body[data-frame="handbook"] .hb-ai-sub .mnote-tools {
  display: block; margin-top: 8px; border-top: 1px solid var(--line);
}
body[data-frame="handbook"] .hb-ai-sub .mnote-tools > .mnote-head { margin: 0 0 8px; }
/* The Word places Founding Exhibitor Program and Sales Tools beneath the
   numbered AI heading in 5.3.3.1. Keep the book's structure, but give the first
   non-AI lead-in a clear visual break after the tool cards. */
body[data-frame="handbook"] .hb-ai-sub .mnote-tools + .lead-in {
  border-top: 1px solid var(--line); padding-top: 20px; margin-top: 28px;
}
body[data-frame="handbook"] .hb-ai-sub .mnote-tool,
body[data-frame="handbook"] .hb-ai-sub .mnote-head + .mnote-tool {
  border: 1px solid var(--line); border-left: 3px solid var(--orange-bright);
  border-radius: 4px; background: var(--ground);
  padding: 10px 12px; margin: 8px 0;
}
@media (min-width: 1024px) {
  .hb-js body[data-frame="handbook"] .hb-read.hb-margin-page .mnote-inline[data-note] {
    position: static; width: auto; top: auto; visibility: visible; margin: 14px 0 18px;
  }
}
/* ------------------------------------------------ medium and phone */
@media (max-width: 1199px) {
  body[data-frame="handbook"] .mnote[data-note] { font-size: 14px; }
}
@media (max-width: 900px) {
  body[data-frame="handbook"] .hb-page { display: block; padding-top: 12px; }
  /* app.css pads .library itself at this width (it was the page's only
     column); in the handbook the article inside carries the padding */
  body[data-frame="handbook"] .library.hb-page { padding-left: 0; padding-right: 0; padding-bottom: 0; }
  body[data-frame="handbook"] .hb-toc { display: none; }
  body[data-frame="handbook"] .col-left.hb-read { padding-left: 16px; padding-right: 16px; }
  body[data-frame="handbook"] .sec-card { padding: 10px 11px 4px; }
  body[data-frame="handbook"] .hb-where {
    display: block; position: sticky; top: var(--topbar-h); z-index: 30;
    margin: 14px -16px 0; background: var(--panel);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 6px 12px -10px rgba(var(--shadow-rgb), .35);
  }
  body[data-frame="handbook"] .hb-where-btn {
    display: flex; align-items: center; gap: 9px; padding: 9px 16px; cursor: pointer;
    list-style: none;
  }
  body[data-frame="handbook"] .hb-where-btn::-webkit-details-marker { display: none; }
  body[data-frame="handbook"] .hb-where-btn:focus-visible { outline: 2px solid var(--accent-warm); outline-offset: -2px; }
  body[data-frame="handbook"] .hb-where-l {
    flex: 0 0 auto; font-size: 9.5px; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-3);
  }
  body[data-frame="handbook"] .hb-where-cur {
    flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 800; color: var(--accent-warm);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body[data-frame="handbook"] .hb-where-caret { flex: 0 0 auto; color: var(--ink-3); transition: transform .15s; }
  body[data-frame="handbook"] .hb-where[open] .hb-where-caret { transform: rotate(180deg); }
  body[data-frame="handbook"] .hb-where-panel {
    max-height: 62vh; overflow-y: auto; padding: 2px 16px 12px; border-top: 1px solid var(--line-2);
  }
  body[data-frame="handbook"] .hb-where-panel .hb-toc-list,
  body[data-frame="handbook"] .hb-where-panel .hb-toc-sub { list-style: none; margin: 0; padding: 0; }
  body[data-frame="handbook"] .hb-where-panel .hb-toc-sub { padding-left: 14px; }
  body[data-frame="handbook"] .hb-where-panel a {
    display: flex; gap: 8px; padding: 7px 0; font-size: 14px; line-height: 1.35;
    color: var(--ink); overflow-wrap: anywhere;
  }
  body[data-frame="handbook"] .hb-where-panel a.cur { color: var(--accent-warm); font-weight: 800; }
  body[data-frame="handbook"] .hb-where-panel .hb-toc-l1 > a { font-weight: 800; }
  body[data-frame="handbook"] .hb-where-panel .hb-toc-div > a {
    font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  }
  body[data-frame="handbook"] .hb-where-panel .hb-toc-n { flex: 0 0 auto; min-width: 2.4em; color: var(--ink-3); }
  body[data-frame="handbook"] .hb-where-panel .hb-toc-h {
    margin: 14px 0 4px; font-size: 10px; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-3);
  }
  body[data-frame="handbook"] .col-head { margin-bottom: 0; }
  body[data-frame="handbook"] .hb-steps > li { padding-left: 50px; }
}

/* ---- a table as one card per row (phone) -------------------------------
   The first cell is the card's title; every other cell is labelled with its
   column's header — the book's own header words, carried in data-label — so
   nothing is added and nothing is lost. The header row itself shrinks to the
   first column's heading, set as a small key above the cards. Only the
   outer table: a table Word nested inside a cell stays a small table. */
@media (max-width: 720px) {
  body[data-frame="handbook"] .table-wrap { border: 0; border-radius: 0; overflow: visible; }
  body[data-frame="handbook"] .table-wrap > table,
  body[data-frame="handbook"] .table-wrap > table > thead,
  body[data-frame="handbook"] .table-wrap > table > thead > tr,
  body[data-frame="handbook"] .table-wrap > table > tbody,
  body[data-frame="handbook"] .table-wrap > table > tbody > tr,
  body[data-frame="handbook"] .table-wrap > table > tbody > tr > td { display: block; width: auto; }
  body[data-frame="handbook"] .table-wrap > table > thead > tr > th { display: none; }
  body[data-frame="handbook"] .table-wrap > table > thead > tr > th:first-child {
    display: block; min-width: 0; padding: 0 0 6px; border: 0; background: none;
    white-space: normal; font-size: 11px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--petrol-900);
  }
  body[data-frame="handbook"] .table-wrap > table > tbody > tr {
    margin: 0 0 8px; padding: 9px 12px 8px; background: var(--panel);
    border: 1px solid var(--line); border-left: 3px solid var(--petrol-100); border-radius: var(--radius);
  }
  body[data-frame="handbook"] .table-wrap > table > tbody > tr > td {
    min-width: 0; padding: 0; border: 0; font-size: 14px; overflow-wrap: anywhere;
  }
  body[data-frame="handbook"] .table-wrap > table > tbody > tr > td:first-child { font-weight: 700; color: var(--ink); }
  body[data-frame="handbook"] .table-wrap > table > tbody > tr > td:not(:first-child)::before {
    content: attr(data-label); display: block; margin: 8px 0 1px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  }
  body[data-frame="handbook"] .table-wrap > table > tbody > tr > td[data-label=""]::before { display: none; }
  body[data-frame="handbook"] .cell-table { max-width: 100%; }
  /* A merged dimension stays with all of its criteria, as one phone card.
     No duplicated headings and no orphaned criteria after the first row. */
  body[data-frame="handbook"] .table-wrap > table.word-merged > tbody.merged-group {
    margin: 0 0 8px; padding: 9px 12px 8px; background: var(--panel);
    border: 1px solid var(--line); border-left: 3px solid var(--petrol-100); border-radius: var(--radius);
  }
  body[data-frame="handbook"] .table-wrap > table.word-merged > tbody.merged-group > tr {
    margin: 0; padding: 0; background: none; border: 0; border-radius: 0;
  }
  body[data-frame="handbook"] .table-wrap > table.word-merged > tbody.merged-group > tr + tr {
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line);
  }
  body[data-frame="handbook"] .table-wrap > table.word-merged > tbody > tr > td:not([data-col="0"]) {
    font-weight: 400; color: var(--ink-2);
  }
  body[data-frame="handbook"] .table-wrap > table.word-merged > tbody > tr > td:not([data-col="0"])::before {
    content: attr(data-label); display: block; margin: 8px 0 1px;
    font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
  }
}

/* ------------------------------------------------------------------ print
   Paper has no margin column to lift a note into and no screen to scroll, so
   every note goes back into the text at its own place, the tool details open,
   and the contents list, position bar and zoom overlay are dropped. */
@media print {
  body[data-frame="handbook"] .hb-page { display: block; padding: 0; }
  body[data-frame="handbook"] .hb-toc,
  body[data-frame="handbook"] .hb-where,
  body[data-frame="handbook"] .mnote-more-btn,
  .hb-zoom { display: none !important; }
  body[data-frame="handbook"] .hb-read,
  .hb-js body[data-frame="handbook"] .hb-read.hb-margin-page {
    position: static !important; padding: 0 !important; min-height: 0 !important;
  }
  body[data-frame="handbook"] .mnote[data-note],
  .hb-js body[data-frame="handbook"] .hb-read.hb-margin-page .mnote[data-note] {
    position: static !important; width: auto !important; top: auto !important;
    visibility: visible !important; margin: 10px 0 !important;
    break-inside: avoid; page-break-inside: avoid;
  }
  .hb-js body[data-frame="handbook"] .hb-read.hb-margin-page .mnote[data-note]::before { display: none; }
  body[data-frame="handbook"] .mnote-more-body { display: block !important; }
  body[data-frame="handbook"] .mnote { border-color: #ccc; }
}

/* Reading controls: collapse the contents without losing the way back. */
body[data-frame="handbook"] .hb-toc-toggle {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  position:sticky; top:0; z-index:2;
  width:100%; min-height:40px; margin:0 0 20px; padding:10px 12px;
  border:1px solid var(--line); border-radius:6px; background:var(--panel);
  color:var(--petrol-900); font:inherit; font-size:12px; font-weight:700; cursor:pointer;
}
body[data-frame="handbook"] .hb-toc-toggle[hidden] { display:none; }
body[data-frame="handbook"] .hb-toc-toggle:hover { border-color:var(--accent-cool); background:var(--tint); }
body[data-frame="handbook"] .hb-toc-toggle:focus-visible { outline:2px solid var(--accent-cool); outline-offset:3px; }
.hb-toc-toggle-mark { width:7px; height:7px; border-left:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); flex:none; }
@media(min-width:901px) {
  body[data-frame="handbook"].hb-contents-collapsed .hb-page { grid-template-columns:48px minmax(0,1fr); }
  body[data-frame="handbook"].hb-contents-collapsed .hb-toc { overflow:visible; }
  body[data-frame="handbook"].hb-contents-collapsed .hb-toc-toggle { flex-direction:column; padding:15px 10px; gap:14px; }
  .hb-contents-collapsed .hb-toc-toggle-label { writing-mode:vertical-rl; }
  .hb-contents-collapsed .hb-toc-toggle-mark { transform:rotate(225deg); }
}
/* Figures occupy the text column; wide diagrams scroll inside their frame. */
body[data-frame="handbook"] .hb-read :is(.sec-body,.figure,.card-figure,.figure-zoom) { min-width:0; max-width:100%; }
body[data-frame="handbook"] .hb-read .figure-text { width:100%; overflow-x:auto; }
@media print { body[data-frame="handbook"] .hb-toc-toggle { display:none!important; } }