/* app.css — Think Small console. One stylesheet, no framework. Width classes, not device detection:
   compact (phone, or a narrow iPad window) · medium (iPad portrait) · wide (iPad landscape, laptop). */
:root {
  --ink: #1b2733; --muted: #5c7288; --rule: #d5d8de; --field: #f4f5f7; --blue: #2a78d6; --mark: #1f4e8c;
  --warn: #b5471b; --ok: #1baf7a; --max-compact: 560px; --max-medium: 900px; --max-wide: 1380px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 17px/1.45 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--ink); background: #fff; }
a { color: var(--blue); text-decoration: none; } a:hover { text-decoration: underline; }
button.link { background: none; border: 0; padding: 0; color: var(--blue); font: inherit; cursor: pointer; }
form.inline { display: inline; }

/* shell: rail on the left from 900px up; a slide-in menu below that (phone, narrow iPad window) */
.shell { display: flex; min-height: 100vh; }
.rail { width: 272px; flex: 0 0 272px; border-right: 1px solid var(--rule); background: #f7f8fa; padding: 12px 10px 16px; display: flex; flex-direction: column; gap: 6px; }
.rail-head { display: flex; align-items: center; gap: 6px; padding: 2px 4px; }
.rail-head .mark { gap: 6px; min-width: 0; } .rail-head .mark img { width: 30px; height: 30px; }
.mark { display: flex; align-items: center; gap: 8px; color: var(--mark); }
.wordmark { font-weight: 600; font-size: 19px; letter-spacing: -.005em; line-height: 1; white-space: nowrap; }
.wordmark sub { font-size: 12px; font-weight: 600; vertical-align: -.22em; margin-left: 3px; }
/* edition badge: D here, S in the Streamlit lab — the two run in parallel until the cut-over (owner, 2026-09-30) */
.edition { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1.5px solid var(--mark); border-radius: 5px; color: var(--mark); font-weight: 700; font-size: 13px; line-height: 1; margin-left: auto; margin-right: 6px; }
.top .edition { margin-left: 2px; }
.rail-expand { width: 28px; height: 28px; border: 1px solid var(--rule); border-radius: 6px; background: #fff; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
/* 0.73.0 — + opens every chapter, − closes them (owner, 2026-10-04: "no multi-chevron contraction"); a button with nothing to do is pale */
.rail-tools { display: flex; align-items: center; gap: 6px; }
.rail-tools .rail-oc { margin-left: auto; display: inline-flex; gap: 4px; }
.rail-tools .rail-expand { width: 26px; height: 24px; font-size: 16px; }
.rail-expand:disabled { opacity: .35; cursor: default; }
.rail-fine { font-size: 11px; color: #8a919b; padding: 0 6px 6px; }
.rail-nav { flex: 1; overflow-y: auto; }
.rail-nav details { margin: 2px 0; }
.rail-nav summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--ink); padding: 8px 6px; border-radius: 6px; list-style: none; min-height: 36px; display: flex; align-items: center; }
.rail-nav summary::-webkit-details-marker { display: none; }
/* chapters hang to the left of their pages (owner, 2026-10-01: "that which governs [extends] clearly to the left"):
   the triangle sits in a narrow gutter, the chapter name starts at 20px, every page under it at 40px */
.rail-nav summary { padding-left: 4px; }
.rail-nav summary:hover { background: #eceff3; }
/* the twisty (0.47.4): a chevron that points right when closed and turns to point down when open — every chapter and
   every branch of a page's tree (console/rail_node.html). The row toggles; a link on the row still navigates. */
.rail-nav summary::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; margin: 0 7px 0 3px; border-right: 1.6px solid #8a919b;
  border-bottom: 1.6px solid #8a919b; transform: rotate(-45deg); transition: transform .16s ease; }
.rail-nav details[open] > summary::before { transform: translateY(-2px) rotate(45deg); }
.rail-nav summary:hover::before { border-color: var(--ink); }
.rail-nav details > .rail-item { padding-left: 40px; }
.rail-nav > .rail-item { padding-left: 20px; font-weight: 600; font-size: 14px; }
.rail-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px 7px 22px; border-radius: 6px; font-size: 15px; color: var(--ink); text-decoration: none; min-height: 36px; }
.rail-item:hover { background: #eceff3; text-decoration: none; }
.rail-item.current { background: #fff; box-shadow: 0 0 0 1px var(--rule); font-weight: 600; }
.rail-item.lab { color: #5c7288; } .rail-item.lab.off { color: #9aa5b1; }
.rail-item .tag { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: #8a919b; border: 1px solid #d5d8de; border-radius: 4px; padding: 0 4px; }
.rail-rule { font-size: 11px; color: #8a919b; border-top: 1px solid var(--rule); margin: 6px 6px 2px 40px; padding-top: 4px; }
.rail-close, .rail-open { display: none; font-size: 22px; line-height: 1; cursor: pointer; padding: 6px 10px; color: var(--muted); }
.railtoggle { display: none; }
.body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-bottom: 1px solid var(--rule); min-height: 44px; }
.compact-only { display: none; }
.who { margin-left: auto; display: flex; gap: 14px; align-items: center; font-size: 14px; color: var(--muted); white-space: nowrap; }
.who .long { display: inline; }
.who-name { color: var(--ink); font-weight: 600; }
/* UX tweak (owner, 2026-10-11): the two store links, stacked small beside the user's name */
.who-store { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.15; font-size: 11px; }
.who-store a { color: var(--muted); text-decoration: none; } .who-store a:hover { color: var(--blue); text-decoration: underline; }
@media (max-width: 600px) { .who-store { display: none; } }
.mark.small .wordmark { font-size: 16px; }

@media (max-width: 899px) {
  .rail { position: fixed; inset: 0 auto 0 0; z-index: 20; transform: translateX(-100%); transition: transform .18s ease; box-shadow: 0 0 0 100vw rgba(0,0,0,0); width: 84vw; max-width: 320px; }
  .railtoggle:checked ~ .shell .rail { transform: none; box-shadow: 0 0 0 100vw rgba(0,0,0,.25); }
  .rail-close, .rail-open { display: inline-block; }
  .compact-only { display: inline-flex; }
  .who { gap: 10px; } .who .long { display: none; }
}

.page { padding: 14px 18px 40px; width: 100%; }
body.layout-compact .page { max-width: var(--max-compact); }
body.layout-medium  .page { max-width: var(--max-medium); }
body.layout-wide    .page { max-width: var(--max-wide); }
h1 { font-size: 1.55rem; margin: .2rem 0 .8rem; } h2 { font-size: 1.25rem; margin: 1.3rem 0 .5rem; } h3 { font-size: 1.1rem; }
.crumb { font-size: 13px; color: var(--muted); letter-spacing: .02em; margin-bottom: .3rem; }
.muted { color: var(--muted); } .warn { color: var(--warn); } .ok { color: var(--ok); }
.card { border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; margin: 0 0 12px; background: #fff; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
.big { font-size: 1.9rem; font-weight: 600; line-height: 1.1; }
.notice { background: #fff6ec; border: 1px solid #f3d3b4; color: #6b3a11; padding: 10px 12px; border-radius: 8px; margin: 0 0 12px; }

/* tables: readable on a phone by horizontal scroll, never by shrinking type below 14px */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { border-collapse: collapse; width: 100%; font-size: 15px; }
table.data th, table.data td { padding: 6px 8px; border-bottom: 1px solid var(--rule); text-align: left; white-space: nowrap; }
table.data th { font-weight: 600; color: var(--muted); font-size: 13px; letter-spacing: .02em; position: sticky; top: 0; background: #fff; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tr:hover td { background: var(--field); }

/* forms and actions: 44pt targets, thumb reach on the phone */
input[type=text], input[type=password], input[type=search], select { font: inherit; padding: 9px 10px; border: 1px solid var(--rule); border-radius: 8px; min-height: 44px; width: 100%; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--rule); background: #eef0f3; color: var(--ink); font: inherit; cursor: pointer; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
body.layout-compact .actions { position: sticky; bottom: 0; background: #fff; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.foot { border-top: 1px solid var(--rule); padding: 10px 18px 14px; color: var(--muted); font-size: 13px; display: flex; flex-direction: column; gap: 6px; }
.foot-line { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.foot .print { margin-left: auto; }
.pageid { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--field); border: 1px solid var(--rule); border-radius: 8px; padding: 8px 12px; color: var(--ink); font-size: 14px; }
.pageid-label { font-weight: 600; color: var(--muted); }
.pageid code { font-size: 15px; user-select: all; }
.confidential { font-size: 12px; letter-spacing: .02em; color: #8a919b; text-transform: uppercase; }
.printmark { display: none; }
.provenance { font-size: 13px; color: var(--muted); margin-top: 14px; }

/* print: 8½ × 11, headings repeat, no chrome */
@media print {
  @page { size: letter; }
  body { font-size: 11pt; color: #000; }
  .rail, .top, .foot .print, .actions, form { display: none !important; }
  .shell { display: block; }
  .page { max-width: none !important; padding: 0; }
  .tablewrap { overflow: visible; }
  table.data { font-size: 9.5pt; } table.data th { position: static; }
  thead { display: table-header-group; } tr { page-break-inside: avoid; }
  .foot { border: 0; padding: 0; margin-top: 12pt; font-size: 9pt; }
  .pageid { border: 0; background: none; padding: 0; font-size: 9pt; } .pageid button { display: none; }
  .confidential { display: none; }
  /* the print mark: fixed at the foot of every sheet — who printed it, which page, when, and the confidentiality line */
  .printmark { display: block; position: fixed; bottom: 0; left: 0; right: 0; font-size: 8pt; color: #000; border-top: 0.5pt solid #000; padding-top: 3pt; }
  @page { margin: 0.6in 0.6in 0.8in; }
  a { color: #000; }
}

/* attachments panel: picture, permalinks, links */
.attach-grid { display: grid; grid-template-columns: 220px 1fr; gap: 16px; align-items: start; }
@media (max-width: 600px) { .attach-grid { grid-template-columns: 1fr; } }
.attach-pic { max-width: 200px; max-height: 200px; border: 1px solid var(--rule); border-radius: 6px; display: block; }
.attach-pic.empty { width: 200px; height: 120px; display: flex; align-items: center; justify-content: center; background: var(--field); }
.attach-form { margin-top: 8px; } .attach-form input[type=file] { font-size: 14px; }
.attach-links { list-style: none; padding: 0; margin: 0 0 8px; } .attach-links li { padding: 4px 0; }
.attach .row input[type=text] { width: auto; flex: 1; min-width: 160px; } .attach .row select { width: auto; }

/* Notebook: a Markdown document (the design manual and the other repo docs) */
.md h1 { font-size: 1.55rem; } .md h2 { font-size: 1.25rem; margin-top: 1.4rem; } .md h3 { font-size: 1.05rem; }
.md pre { background: var(--field); border: 1px solid var(--rule); border-radius: 8px; padding: 10px 12px; overflow-x: auto; font-size: 13px; }
.md code { font-size: .92em; } .md table { border-collapse: collapse; } .md td, .md th { border-bottom: 1px solid var(--rule); padding: 4px 8px; }
.md hr { border: 0; border-top: 1px solid var(--rule); margin: 1.4rem 0; }
.small { font-size: 12px; }

/* A thing loaded under a rail page (an author under Authors, the month-end packages under Month-end close): its own
   pages as a tree whose every branch opens and closes (0.47.4; console/templatetags/rail_tree.py). */
.rail-sub { margin: 2px 6px 6px 34px; border-left: 2px solid var(--rule); padding-left: 2px; }
.rail-nav .rail-tree { margin: 0; }
.rail-nav .rail-tree > summary { min-height: 30px; padding: 4px 6px 4px 4px; font-size: 14px; font-weight: 600; }
.rail-nav .rail-tree.rail-year > summary { font-weight: 500; color: var(--muted); }
.rail-nav .rail-tree > summary > a { color: inherit; flex: 1; min-width: 0; }
.rail-nav .rail-tree > summary > a:hover { text-decoration: underline; }
.rail-nav .rail-tree > summary .rail-label { flex: 1; }
.rail-nav .rail-tree > summary.current { background: #fff; box-shadow: 0 0 0 1px var(--rule); }
.rail-count { margin-left: auto; font-size: 11px; font-weight: 400; color: #8a919b; font-variant-numeric: tabular-nums; }
.rail-kids { padding-left: 12px; }
.rail-kids > .rail-item { padding: 4px 8px 4px 20px; min-height: 28px; font-size: 14px; }
/* Opening and closing slide where the browser can (details content transitions); elsewhere they simply open.
   Off until the arrival state is set (.rail-ready), and off for anyone who asks for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .rail-nav.rail-ready { interpolate-size: allow-keywords; }
  .rail-nav.rail-ready details::details-content { block-size: 0; overflow-y: clip;
    transition: block-size .18s ease, content-visibility .18s allow-discrete; }
  .rail-nav.rail-ready details[open]::details-content { block-size: auto; }
}
/* From 900px up the rail stands still while the page scrolls, and scrolls on its own (as the lab's sidebar does). */
@media (min-width: 900px) {
  .rail { position: sticky; top: 0; height: 100vh; align-self: flex-start; }
  .rail-nav { min-height: 0; overscroll-behavior: contain; }
}

/* 0.49.0 — the load-time line at the foot of every page; pages not built in Django yet ("not yet", no lab link) */
.foot .loadtime{font-size:12px;color:#5c7288;margin-top:.25rem;font-variant-numeric:tabular-nums}
.foot .loadtime b{font-weight:600;color:#1b2733}
.rail-item.soon .tag{background:#eef1f5;color:#5c7288;border-color:#d5d8de}

/* Manuals (owner, 2026-10-03): Executive, TSmall User Manual, IT Admin — Wagtail pages with the rail's tree and "a page
   width that's restricted so we design for iPad or printing on paper as a PDF". About 75 characters a line on screen;
   6.5 in of text on paper, which with the sheet margin leaves an inch of white space each side; nothing under 12 pt. */
body.layout-manual .page { max-width: 46rem; }
.manual h1 { font-size: 1.6rem; line-height: 1.25; margin: .3rem 0 .8rem; }
.manual h2 { font-size: 1.25rem; margin-top: 1.6rem; } .manual h3 { font-size: 1.08rem; margin-top: 1.2rem; }
.manual p, .manual li { max-width: 46rem; }
.manual .md table { font-size: 15px; margin: .6rem 0 1rem; } .manual .md th { text-align: left; }
.manual .md td:not(:first-child) { vertical-align: top; }
.manual-crumb { font-size: 14px; color: var(--muted); margin-bottom: .2rem; }
.manual-name { font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.manual-intro { font-size: 1.05rem; color: #34495e; }
.manual-list { padding-left: 1.1rem; } .manual-list li { margin: .45rem 0; } .manual-list .muted { font-size: 14px; }
.manual-toc { padding-left: 1.2rem; } .manual-toc li { margin: .15rem 0; } .manual-toc .lvl2 { margin-left: 1.2rem; } .manual-toc .lvl3 { margin-left: 2.4rem; } .manual-toc .lvl4 { margin-left: 3.6rem; }
.manual-article { border-top: 1px solid var(--rule); margin-top: 2rem; padding-top: 1rem; }
.manual-chapter h1.chapter-title { color: var(--mark); }
.button-link { display: inline-block; border: 1px solid var(--blue); border-radius: 8px; padding: 8px 14px; }
@media print {
  body.layout-manual { font-size: 12pt; }
  body.layout-manual .page { max-width: 6.5in !important; margin: 0 auto; }
  .manual .md table, .manual table { font-size: 12pt; }
  .manual-noprint { display: none !important; }
  .manual-article { border: 0; margin-top: 0; padding-top: 0; page-break-before: always; break-before: page; }
  .manual h1, .manual h2, .manual h3 { page-break-after: avoid; break-after: avoid; }
  .manual-cover { page-break-after: always; break-after: page; }
}
.manual-printhead { display: none; }
@media print {
  body.layout-manual .printmark { display: none !important; }   /* the manuals print their mark in the sheet margin (notebook/_print.html) */
  .manual-printhead { display: block; font-size: 8pt; color: #000; border-bottom: 0.5pt solid #000; padding-bottom: 2pt; margin-bottom: 8pt; }
}
/* 0.52.1: a long code name in a manual table (cpj_etl/refdata.py, inventory_movements) may break, so a table never runs
   past 6.5 in on paper; ordinary words never break. */
.manual .md td code { overflow-wrap: anywhere; }
@media print { .manual .md table { width: 100%; } .manual .md td code { word-break: break-all; } }

/* 0.53.1 (owner, 2026-10-03: pages must still work on a phone; the exceptions are tracked on About › Pages on a phone).
   Two things made almost every page a little wider than an iPhone: the sign-in line at the top (6 px) and the key/value
   lists, whose label column took its full width. On a narrow screen both now give way. */
@media (max-width: 480px) {
  .top { gap: 6px; padding: 6px 8px; }
  .who { gap: 8px; font-size: 13px; }
  body dl.kv, body .roy dl.kv { grid-template-columns: minmax(0, 42%) minmax(0, 1fr); }
  body dl.kv dt, body dl.kv dd { overflow-wrap: anywhere; min-width: 0; }
  body .rep code, body .roy code { overflow-wrap: anywhere; }
}
.phone-note { display: none; }
@media (max-width: 600px) {
  .phone-note { display: block; margin: 0 0 .6rem; padding: .45rem .7rem; border: 1px solid #c9a227; background: #fff7e0;
                border-radius: 8px; font-size: 14px; }
}
@media print { .phone-note { display: none !important; } }

/* The page head (0.55.0, owner 2026-10-03): the breadcrumb above the rule, the find box left of the user, a tighter rail
   head. The page's own .crumb is cloned into .top-crumb by base.html's script; the original stays for print. */
.rail-fine { padding-bottom: 2px; } .rail-fine a { color: inherit; } .rail-fine a:hover { color: var(--blue); }
.rail-asof { padding-bottom: 8px; }
.top-crumb { flex: 1 1 auto; min-width: 0; }
.top-crumb .crumb { margin: 0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-crumb .crumb a { color: var(--muted); } .top-crumb .crumb a:hover { color: var(--blue); }
.top .who { margin-left: 0; }
.finder { position: relative; flex: 0 1 320px; margin: 0 0 0 auto; }
.finder input { width: 100%; font: inherit; font-size: 14px; min-height: 32px; padding: 4px 10px; border: 1px solid var(--rule);
  border-radius: 8px; background: var(--field); color: var(--ink); }
.finder input:focus { outline: none; border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px rgba(42,120,214,.15); }
.finder-list { position: absolute; top: calc(100% + 4px); right: 0; width: min(480px, 92vw); background: #fff; border: 1px solid var(--rule);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(27,39,51,.14); padding: 4px; z-index: 30; max-height: 70vh; overflow-y: auto; }
.finder-hit { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 6px; color: var(--ink); }
.finder-hit:hover, .finder-hit.on { background: #eef3fb; text-decoration: none; }
.finder-t { font-size: 14px; } .finder-w { font-size: 12px; color: var(--muted); }
.finder-data { border-top: 1px solid var(--rule); margin-top: 2px; border-radius: 0 0 6px 6px; }
@media screen and (min-width: 900px) { .page .crumb.crumb-lifted { display: none; } }
@media (max-width: 899px) { .top-crumb { display: none; } .finder { flex-basis: 220px; } }

/* Home (0.55.0): what matters when you come in — royalties due, inventory short, Amazon fill rate, newest orders. */
.home-h1 { font-size: 1.3rem; margin: 0 0 .2rem; }
.home-fresh { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.home-wide { grid-column: 1 / -1; }
@media (max-width: 760px) { .home-grid { grid-template-columns: 1fr; } }
.home-card { margin: 0; }
.home-card h2 { font-size: 1.05rem; margin: 0 0 .35rem; }
.home-card > p { margin: .3rem 0; }
.home-figs .big { font-size: 1.6rem; margin-right: 2px; }
table.data.home-table { font-size: 14px; }
.home-more { font-size: 14px; }
.home-act { border-color: #f3d3b4; background: #fffaf3; }
.home-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; font-size: 14px; }
.btn-go { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 8px; background: var(--blue);
  color: #fff; font-weight: 600; font-size: 15px; margin-right: 10px; }
.btn-go:hover { text-decoration: none; filter: brightness(1.07); }
.home-goto { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.home-h2link { color: var(--ink); } .home-h2link:hover { color: var(--blue); }
table.data th.grp { text-align: center; border-bottom: 1px solid var(--rule); }
table.data th.grp-key { color: var(--ink); }
table.data tr.home-now td { background: #f4f8fd; font-weight: 600; }
body.layout-wide .home-grid { max-width: 1240px; }


/* 0.56.0 — red dot beside a page (or a chapter) with open issues; the viewer can hide them (switch under the version). */
.rail-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #d93025; margin-left: 7px; flex: 0 0 9px; vertical-align: middle; }
.rail-item .rail-dot { margin-left: auto; }
body.no-dots .rail-nav .rail-dot { display: none; }
.rail-dots { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rail-dots .rail-dot { margin-left: 2px; }
body.no-dots .rail-dots .rail-dot { opacity: .35; }
.rail-dots button.link { padding: 0; font: inherit; color: inherit; }
/* 0.56.0 — the version in the page head */
.top .top-ver { font-size: 13px; color: var(--muted, #5c7288); margin-right: 12px; white-space: nowrap; }
@media print { .top .top-ver { display: none; } }
/* 0.56.0 — every table sorts by its column headings */
main.page tr.can-sort > th { cursor: pointer; user-select: none; }
main.page tr.can-sort > th.sorted::after { content: " \25BE"; color: #0b57d0; }
main.page tr.can-sort > th.sorted.rev::after { content: " \25B4"; }
@media print { main.page tr.can-sort > th.sorted::after { content: ""; } }
.bm-form { display: inline-flex; margin: 0; }
.bm-star { background: none; border: 0; padding: 2px 4px; font-size: 20px; line-height: 1; color: #8a919b; cursor: pointer; }
.bm-star:hover { color: #c98a00; } .bm-star.on { color: #e0a100; }
/* Home's own shape (0.55.0): the cards on the left, a right rail with the large mark and the person's bookmarks. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.home-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 18px; align-items: start; max-width: 1520px; }
.home-layout .home-grid { max-width: none; }
.home-side { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 12px; }
.home-logo { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 0 6px; color: var(--mark); }
.home-logo:hover { text-decoration: none; }
.home-logo img { width: 96px; height: 96px; }
.home-logo .wordmark { font-size: 24px; }
.home-bm { border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; background: #f7f8fa; }
.home-bm h2 { font-size: 14px; margin: 0 0 6px; color: var(--muted); letter-spacing: .03em; text-transform: uppercase; }
.home-bm ul { list-style: none; margin: 0; padding: 0; }
.home-bm li { display: flex; align-items: baseline; gap: 6px; padding: 4px 0; border-top: 1px solid #eceff3; font-size: 14px; }
.home-bm li:first-child { border-top: 0; }
.home-bm li > a { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.home-bm-date { font-size: 12px; color: #8a919b; white-space: nowrap; font-variant-numeric: tabular-nums; }
.home-bm-x { margin: 0; } .home-bm-x button { background: none; border: 0; color: #8a919b; cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
.home-bm-x button:hover { color: var(--warn); }
.home-bm p { font-size: 14px; margin: 0; }
@media (max-width: 1100px) { .home-layout { grid-template-columns: 1fr; } .home-side { position: static; order: -1; }
  .home-logo { flex-direction: row; justify-content: flex-start; padding: 0; } .home-logo img { width: 40px; height: 40px; } }

/* 0.57.0 — rail bundles (a heading above the first page of each bundle in a chapter) and book-family switches */
.rail-rule.rail-bundle { font-size: 12px; font-weight: 700; color: #3d4a57; text-transform: none; border-top: 1px solid var(--rule); margin: 10px 6px 2px 40px; padding-top: 6px; }
.fam-presets { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; margin: .2rem 0 .4rem; }
.fam-presets .fam-lab { font-size: 13px; color: #3d4a57; margin-right: .3rem; }
fieldset.fam { border: 1px solid #d5d8de; border-radius: 8px; padding: .3rem .6rem .4rem; margin: 0 0 .2rem; flex-basis: 100%; }
fieldset.fam legend { font-size: 13px; padding: 0 .3rem; }
fieldset.fam label.famck { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: .3rem; font-size: 14px; margin: .15rem .9rem .15rem 0; min-height: 32px; }
/* 0.55.0 (owner, 2026-10-03): a closed chapter carries the red dot; opened, the dot leaves the chapter for the page. */
.rail-nav details[open] > summary > .rail-dot { display: none; }
.rail-nav summary > .rail-dot { margin-left: auto; margin-right: 6px; }
.home-issues li .rail-dot { margin: 0 2px 0 0; align-self: center; }
.home-dot-def { font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.home-dot-def .rail-dot { margin: 0 4px 0 0; }
.home-issues p { margin: 6px 0 0; }
table.data.home-short td:nth-child(2) { white-space: normal; min-width: 180px; }
table.data.home-short th, table.data.home-short td { padding: 6px 6px; }

/* 0.59.0 — a chapter whose name is a link (Amazon opens its dashboard); the arrow beside it still opens and closes. */
.rail-nav summary a.rail-chapter-link { color: inherit; text-decoration: none; flex: 1; }
.rail-nav summary a.rail-chapter-link:hover { text-decoration: underline; }
/* 0.55.0 (owner, 2026-10-03): no centered art — the mark and its words sit at the left of the right rail; ™ on the name. */
.home-logo { align-items: flex-start; padding-left: 2px; }
.wordmark .tm { font-size: .45em; vertical-align: super; margin-left: 1px; font-weight: 500; }
.rail-head .wordmark { font-size: 18px; } .rail-head .wordmark sub { margin-left: 1px; }   /* 0.55.0: room for ™ before the D badge */

/* 0.77.0 total rows (owner, 2026-10-04: "I want to see it a little bit more clearly"): every total row on every page — a
   double rule above, a light band, bold figures. A grand total (tr.gt) under it gets a single rule and the same band. */
main.page table tr.tot td, main.page table tr.tot th { font-weight: 700; background: #eef2f7; border-top: 3px double #1b2733 !important; border-bottom: 1px solid #1b2733; }
main.page table tr.gt td, main.page table tr.gt th { font-weight: 700; background: #f6f8fb; border-top: 1px solid #1b2733 !important; }
main.page table tr.gt td.lab, main.page table tr.tot td.lab { white-space: normal; }
@media print { main.page table tr.tot td, main.page table tr.gt td { background: #eef2f7 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } }

/* 0.89.0 (owner, 2026-10-10): where this copy runs, in color, in every header — amber on the laptop (development stack),
   blue in the cloud (Render), pink anywhere else. The header is not printed; Settings › Environment prints its panel. */
.top-host { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid; border-radius: 999px; font-size: 12.5px;
  font-weight: 600; text-decoration: none; white-space: nowrap; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.top-host.host-mac { background: #fff3d9; border-color: #e0a53a; color: #5a3b00; }
.top-host.host-cloud { background: #e8f1fc; border-color: #6f9fd8; color: #123d6b; }
.top-host.host-other { background: #fde7ec; border-color: #e08a9a; color: #6e1526; }