/* habit.report — one stylesheet. Self-hosted IBM Plex Mono (wordmark, titles and headings) and Public Sans (everything else); SIL OFL, licences and release tags in /fonts/.
   Palette decided 2026-10-22: black on a pale pink paper (#ffeef1, James's choice later that evening), grey for rules and secondary text, blue for links and nothing else; titles knocked out white on black. */
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/IBMPlexMono-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/IBMPlexMono-Bold.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/PublicSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/PublicSans-Medium.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/PublicSans-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/PublicSans-Bold.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/PublicSans-Italic.woff2") format("woff2"); }

:root { --paper:#ffeef1; --ink:#000; --ink2:#333; --rule:#bbb; --tint:#e6e6e6; --mark:#fff200; --link:#0000ee; --visited:#551a8b; --personal:#000; --professional:#000;
        --sans:"Public Sans", Arial, Helvetica, sans-serif; --display:"IBM Plex Mono", Menlo, Consolas, monospace; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.45; }
table, td, th, .est, .amt, .edition, .edition-line { font-variant-numeric: tabular-nums; }
main { max-width: 1280px; margin: 0 auto; padding: 0 20px 48px; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:visited { color: var(--visited); }
/* a link off the site (every one goes to a vendor's own page) carries a small arrow; nothing opens a new window unasked */
a[href^="http"]::after { content: "\00a0↗"; font-size: .85em; display: inline-block; text-decoration: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.2; letter-spacing: 0; }
/* the page title is a black tag: an inline box so a wrapped title is one tag per line (.title is the block around it) */
h1 { display: inline; font-size: clamp(19px, 4.4vw, 32px); line-height: 1.5; background: var(--ink); color: #fff; padding: .08em .32em; box-decoration-break: clone; -webkit-box-decoration-break: clone; hyphens: none; overflow-wrap: normal; margin: 0; }
.title { margin: 22px 0 10px; }
h1.index { text-transform: uppercase; letter-spacing: .06em; font-size: clamp(22px, 5.4vw, 48px); }
@media (min-width: 720px) { .sub { font-size: 34px; } .lede { font-size: 22px; } }
h2 { font-size: 20px; margin: 34px 0 8px; }
h3 { font-size: 16px; margin: 26px 0 6px; }
p { max-width: 70ch; }
code { font-family: var(--sans); font-size: .9em; }
.ne { color: var(--ink2); }
.rec { }
.pending { background: var(--tint); outline: 1px dashed var(--ink); padding: 0 4px; }
mark { background: var(--mark); color: var(--ink); padding: 0 .15em; }
small, .est, .foot, .refs, .m, .count, .edition, .n, .msg, .crumb, .audience { font-family: var(--sans); }
.est { color: var(--ink2); font-size: 12px; font-style: italic; display: block; margin-top: 2px; }

/* mast */
header.mast { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; padding: 14px 0 8px; }
.wordmark { font-family: var(--display); font-weight: 700; font-size: 20px; letter-spacing: 0; }
.wordmark a { color: #fff; background: var(--ink); text-decoration: none; padding: .1em .35em; }
.wordmark .dot { color: #fff; }
.edition { font-size: 13px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.wordmark .q { margin-left: 10px; color: var(--ink); }
/* the edition's sponsor sentence, above the masthead, only when SPONSOR is set in the build */
.edrow { text-align: right; margin: 14px 0 0; }
.edbar { display: inline-block; background: var(--tint); outline: 1px solid var(--ink); padding: .3em .6em; font-family: var(--sans); font-size: 13px; }
.edition a { margin-left: 14px; }
.band { height: 6px; margin: 0 0 10px; background: var(--rule); }
.band.personal { background: var(--personal); }
.band.professional { background: var(--professional); }
.band.both { background: linear-gradient(to right, var(--personal) 50%, var(--professional) 50%); }
footer { margin-top: 48px; border-top: 1px solid var(--rule); padding-top: 12px; font-size: 13px; color: var(--ink2); display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
footer .wordmark { font-size: 13px; color: var(--ink); }
footer nav a { margin-right: 14px; }

/* home */
.lede { font-size: 19px; margin: 0 0 30px; max-width: none; }
.blocks { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
/* a chapter block is one link, so the whole of it reads as one: a solid black block, white text, no underline; it turns blue on hover or focus */
.block { position: relative; background: var(--ink); color: #fff; text-decoration: none; padding: 22px 24px 20px; min-height: 190px; display: flex; flex-direction: column; }
.block:hover, .block:focus-within { background: var(--link); }
.block h2 { font-size: 24px; line-height: 1.2; margin: 0 0 10px; }
.block h2 a { color: #fff; text-decoration: none; }
.block a { color: #fff; text-decoration: none; }
.block h2 a::before { content: ""; position: absolute; inset: 0; }
.block h2 a::after { content: " →"; }
.block p { margin: 0 0 10px; font-size: 18px; }
.block p.n { margin-top: auto; font-size: 14px; font-variant-numeric: tabular-nums; }
.block p.also { position: relative; z-index: 1; font-size: 14px; margin: 6px 0 0; }
table.index td.free small { display: block; color: var(--ink2); font-size: 12px; }
.promises { margin: 40px 0 0; padding: 24px 0 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
.promises p { margin: 0; font-size: 16px; }
.promises p b { display: block; font-weight: 600; font-size: 18px; margin-bottom: 4px; }
.not { margin: 36px 0 0; max-width: 66ch; color: var(--ink2); }
.edition-line { font-family: var(--sans); font-size: 13px; color: var(--ink2); font-variant-numeric: tabular-nums; }

/* views */
.scenario { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; }
.scenario h1 { font-size: clamp(18px, 4.6vw, 24px); margin: 6px 0; }
.scenario .other a { font-size: 15px; }
.controls { position: sticky; top: 0; background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin: 14px 0 0; padding: 10px 0; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; font-family: var(--sans); font-size: 13.5px; z-index: 2; }
.controls label { display: inline-flex; gap: 6px; align-items: center; }
.controls select, .controls input[type=search], .controls input[type=number], .count-ctl input[type=number] { font: inherit; padding: 3px 6px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); }
.controls input[type=number], .count-ctl input[type=number] { width: 5.5em; font-variant-numeric: tabular-nums; }
.controls .quick button { font: inherit; font-size: 12px; padding: 2px 7px; border: 1px solid var(--rule); background: var(--paper); margin-left: 2px; cursor: pointer; color: var(--ink); }
.controls .quick button.on { background: var(--professional); color: #fff; border-color: var(--professional); }
.controls .n, .count-ctl .n { color: var(--ink2); }
.msg { color: var(--ink); font-weight: 600; }
.msg:empty { display: none; }
.seg { display: inline-flex; border: 1px solid var(--rule); }
.seg label { padding: 3px 9px; background: var(--paper); cursor: pointer; display: inline-flex; gap: 6px; }
.seg label.on { background: var(--professional); color: #fff; }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.controls .sub { margin-left: -10px; }
.controls .sub[hidden] { display: none; }
.summary { display: none; }

table.list, table.ladder { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 14px; margin-top: 4px; }
table.list th, table.ladder th { text-align: left; font-weight: 600; color: var(--ink2); font-size: 12px; letter-spacing: .02em; text-transform: uppercase; padding: 10px 10px 8px 0; border-bottom: 1px solid var(--ink); vertical-align: bottom; }
table.list td, table.ladder td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; font-variant-numeric: tabular-nums; }
td small { display: block; color: var(--ink2); font-size: 12.5px; margin-top: 2px; max-width: 40ch; }
td.name { font-weight: 600; }
td[data-h="Checked"] { white-space: nowrap; }
td.name a { color: var(--link); }
td a.amt { color: var(--link); }
tr.group td { background: var(--tint); color: var(--ink2); font-size: 12px; letter-spacing: .03em; text-transform: uppercase; padding: 6px 0; border-bottom: 0; }
tr.excl td { color: var(--ink2); }
tr.sel td { background: var(--tint); }
.foot { margin: 14px 0 0; font-size: 13px; color: var(--ink2); max-width: 92ch; }
.lay { margin: 16px 0 8px; padding: 12px 14px; border: 1px solid var(--rule); background: var(--paper); font-family: var(--sans); font-size: 13.5px; max-width: 92ch; }
.lay b { font-weight: 600; }
.rule { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--rule); background: var(--paper); max-width: 92ch; }
.rule p { margin: 0; }
.closing { font-family: var(--sans); font-size: 14px; color: var(--ink2); }

/* product page */
.crumb { font-size: 13px; color: var(--ink2); margin-top: 6px; }
.audience { font-size: 13.5px; color: var(--ink2); margin: 0 0 18px; }
.answer { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 10px 0 10px; }
.cell { border: 1px solid var(--rule); background: var(--paper); padding: 14px 16px; font-family: var(--sans); }
.cell .h { font-size: 12px; letter-spacing: .02em; text-transform: uppercase; color: var(--ink2); margin-bottom: 6px; }
.cell .v { font-size: 22px; font-variant-numeric: tabular-nums; }
.cell .v small, .cell .b small { display: block; font-size: 13px; color: var(--ink2); font-style: normal; margin-top: 4px; }
.cell .v small.est { font-style: italic; font-size: 12px; }
.cell .b { font-size: 13px; color: var(--ink2); margin-top: 6px; }
.count-ctl { font-family: var(--sans); font-size: 13.5px; margin: 0 0 10px; display: flex; gap: 12px 16px; align-items: center; flex-wrap: wrap; }
.count-ctl label { display: inline-flex; gap: 6px; align-items: center; }
sup.ref { font-family: var(--sans); font-size: 11px; }
sup.ref a { margin-left: 2px; }
dl { display: grid; grid-template-columns: 14em 1fr; gap: 6px 14px; font-size: 15px; }
dt { color: var(--ink2); font-family: var(--sans); font-size: 13.5px; }
dd { margin: 0; }
dl.glossary { grid-template-columns: 1fr; gap: 0; }
dl.glossary dt { font-weight: 600; font-size: 17px; color: var(--ink); margin-top: 22px; }
dl.glossary dd p { margin: 4px 0; }
dl.glossary .eg { font-family: var(--sans); font-size: 13px; color: var(--ink2); }
dl.changes { grid-template-columns: 10em 1fr; }
ul.gaps { padding-left: 20px; }
ul.gaps li { margin: 4px 0; }
ul.refs { padding-left: 20px; }
.refs { font-size: 14px; }
ol.ev { padding-left: 24px; font-family: var(--sans); font-size: 14px; }
ol.ev li { margin: 10px 0; }
ol.ev .t { font-weight: 600; }
ol.ev .m { color: var(--ink2); }
ol.ev a { word-break: break-all; }
ol.ev q { color: #333; }
.doc h2, .doc h3 { font-size: 20px; }
.doc ul { padding-left: 22px; }
table.reg td small { max-width: 48ch; }

/* the report layout (design/report/REPORT-DESIGN.md): edition line, gadget, figures, charts, chapter kickers, figures page */
/* the cover carries one link to the Edition notes page, where the edition line lives, so the hero stays short */
.edn { margin: 0 0 24px; font-family: var(--sans); font-size: 13.5px; }
.edline { font-family: var(--sans); font-size: 13.5px; color: var(--ink2); margin: 8px 0 20px; font-variant-numeric: tabular-nums; }
/* the pledge strip on the cover: five short lines in the display face, a cross before each "no" and a tick before the one "yes" */
.pledge { list-style: none; margin: -14px 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: .02em; text-transform: uppercase; }
/* the "no" symbol: a ring with a diagonal bar from upper left to lower right, drawn in CSS so it is ink, not an icon font or an emoji */
.pledge li::before { content: ""; display: inline-block; vertical-align: -.1em; width: .85em; height: .85em; margin-right: .35em; box-sizing: border-box; border: .13em solid var(--ink); border-radius: 50%; background: linear-gradient(to bottom right, transparent calc(50% - .07em), var(--ink) calc(50% - .07em), var(--ink) calc(50% + .07em), transparent calc(50% + .07em)); }
.pledge li.yes::before { content: "✓"; width: auto; height: auto; border: 0; border-radius: 0; background: none; vertical-align: 0; }
h2 small { display: block; font-size: 13.5px; color: var(--ink2); font-weight: 400; margin-top: 2px; max-width: 80ch; }
h2.chapters { margin-top: 44px; }
.figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; border-top: 1px solid var(--ink); margin-top: 10px; }
.fig { padding: 16px 0 14px; border-bottom: 1px solid var(--rule); }
.fig .num { font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fig .num small { font-size: 20px; font-weight: 600; color: var(--ink2); letter-spacing: 0; }
.fig.long .num { font-size: 34px; }
.fig .of { font-size: 15px; margin: 6px 0 0; max-width: 34ch; }
.fig .cv { font-size: 12.5px; color: var(--ink2); margin: 4px 0 0; max-width: 40ch; }
.fig a { color: var(--link); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.fig.p .num { color: var(--personal); }
.fig.q .num { color: var(--professional); }
.fig .n2 { margin: 8px 0 0; padding: 0; border: 0; }
.fig .n2 .b .v { font-size: 24px; margin-top: 4px; }
p.more { font-size: 13.5px; margin-top: 10px; }
/* gadget */
.gadget { border: 1px solid var(--rule); background: var(--paper); margin-top: 12px; }
.gadget .head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; padding: 12px 18px; border-bottom: 1px solid var(--rule); }
.gadget .head b { font-family: var(--display); font-size: 16px; }
.gadget .head span { font-size: 13px; color: var(--ink2); max-width: 72ch; }
.panels { display: grid; grid-template-columns: 1fr 1fr; }
.panel { padding: 16px 18px 18px; border-top: 6px solid var(--rule); min-width: 0; }
.panel.p { border-top-color: var(--personal); }
.panel.q { border-top-color: var(--professional); border-left: 1px solid var(--rule); }
.panel form { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-family: var(--sans); font-size: 13.5px; margin: 0 0 12px; }
.panel label { display: inline-flex; gap: 6px; align-items: center; }
.panel select, .panel input[type=number] { font: inherit; padding: 3px 6px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); }
.panel input[type=number] { width: 5.5em; font-variant-numeric: tabular-nums; }
.panel .quick { white-space: nowrap; }
.panel .quick button { font: inherit; font-size: 12px; padding: 2px 7px; border: 1px solid var(--rule); background: var(--paper); margin-left: 2px; cursor: pointer; color: var(--ink); }
.panel .quick button.on { background: var(--professional); color: #fff; border-color: var(--professional); }
.panel .n { color: var(--ink2); }
.panel noscript button { font: inherit; padding: 3px 9px; border: 1px solid var(--rule); background: var(--paper); }
.gf { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
.gf.four { grid-template-columns: repeat(4, 1fr); }
.gf .n { font-weight: 700; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
.gf .n a { color: var(--link); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.gf .l { font-size: 12.5px; color: var(--ink2); margin-top: 4px; line-height: 1.3; }
.panel .go { margin: 10px 0 0; font-size: 13.5px; }
.panel .go.note { color: var(--ink2); }
/* the two-number form: the coded-only figure first and larger, the bare-dollar assumption smaller and grey, never alone */
.n2 { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid var(--rule); }
.n2 .k { font-size: 12.5px; color: var(--ink2); margin-bottom: 6px; }
.n2 .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.n2 .v { font-weight: 700; font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; }
.n2 .b .v { color: var(--ink2); font-size: 22px; margin-top: 3px; }
.n2 .l { font-size: 12.5px; color: var(--ink2); margin-top: 4px; line-height: 1.3; }
.n2 .none { font-size: 13px; color: var(--ink2); margin: 0; }
/* charts: designed at 360 units, full width up to 560px, so they read at 375px without scaling text below 11px */
.charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 8px; }
.chart { max-width: 560px; min-width: 0; }
.chart.wide { max-width: 640px; }
.chart h3 { margin: 0 0 2px; font-size: 16px; }
.chart .cap, p.cap { font-size: 12.5px; color: var(--ink2); margin: 0 0 8px; max-width: 48ch; }
.chart .src { font-size: 12px; margin: 6px 0 0; }
svg.chart-svg { width: 100%; height: auto; display: block; }
/* chapter kickers on the cover blocks only */
.block .ch { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 6px; }
/* the figures page */
table.kf { border-collapse: collapse; width: 100%; font-family: var(--sans); font-size: 14px; margin-top: 6px; }
table.kf th { text-align: left; font-size: 12px; letter-spacing: .02em; text-transform: uppercase; color: var(--ink2); border-bottom: 1px solid var(--ink); padding: 8px 10px 6px 0; vertical-align: bottom; }
table.kf td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule); vertical-align: top; font-variant-numeric: tabular-nums; }
table.kf td.v { font-weight: 700; font-size: 18px; min-width: 9em; }
table.kf td.v small { display: inline; font-size: 13px; font-weight: 600; color: var(--ink2); margin: 0; }
table.kf td.v .b { color: var(--ink2); font-size: 15px; }
table.kf td small { display: block; color: var(--ink2); font-size: 12.5px; margin-top: 2px; }
table.kf td .b { color: var(--ink2); }
table.kf.grid td, table.kf.grid th { padding-right: 8px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.two > div { min-width: 0; }

@media (max-width: 719px) {
  main { padding: 0 16px 40px; }
  .figs, .gf, .gf.four { grid-template-columns: 1fr 1fr; }
  .fig .num { font-size: 36px; }
  .fig.long .num { font-size: 26px; margin-top: 6px; }
  .n2 .pair { grid-template-columns: 1fr; }
  .n2 .v { font-size: 24px; }
  .n2 .b .v { font-size: 20px; }
  .panels, .charts, .two { grid-template-columns: 1fr; }
  .panel.q { border-left: 0; }
  table.kf { font-size: 13px; }
  table.kf td.v { font-size: 16px; min-width: 0; }
  table.kf.grid { font-size: 12px; }
  table.kf.grid td, table.kf.grid th { padding: 6px 6px 6px 0; }

  .blocks, .promises, .answer { grid-template-columns: 1fr; }
  dl { grid-template-columns: 1fr; gap: 2px 0; }
  dd { margin-bottom: 8px; }
  .controls { gap: 8px 14px; font-size: 13px; }
  .controls .summary { display: block; width: 100%; color: var(--ink2); }
  .controls.closed > *:not(.summary):not(.toggle) { display: none; }
  .controls .toggle { display: inline-block; font: inherit; border: 1px solid var(--rule); background: var(--paper); padding: 2px 8px; cursor: pointer; }
  table.list, table.list tbody, table.list tr, table.list td { display: block; width: 100%; }
  table.list thead { display: none; }
  table.list tr { border-bottom: 2px solid var(--rule); padding: 10px 0; }
  table.list td { border: 0; padding: 3px 0; }
  table.list td.name { font-size: 16px; }
  table.list td::before { content: attr(data-h); display: block; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; color: var(--ink2); }
  table.list td.name::before { content: none; }
  table.list tr.group td { padding: 6px 0; }
  td small { max-width: none; }
  table.ladder { display: block; overflow-x: auto; font-size: 13px; }
  .cell .v { font-size: 19px; }
}
@media (min-width: 720px) { .controls .toggle { display: none; } }

.sub { font-family: var(--display); font-weight: 500; font-size: 26px; line-height: 1.2; margin: 6px 0 10px; }
@media (max-width: 600px) { .sub { font-size: 21px; } }