/* ------------------------------------------------------------
   JRW tools: the calculator pages. Loaded after styles.css and
   tools/vendor/dialkit/dialkit.css. Skins the DialKit panel in the
   house material (ivory surface, hairline edge, Inter and Geist Mono)
   and lays out the panel beside the readout.
   ------------------------------------------------------------ */

/* Head: breadcrumb, title, lede, and the one-sentence live summary */
.section--toolhead { border-top: 0; padding-top: 148px; padding-bottom: 56px; }
.section--toolhead .hero__tag a { color: inherit; text-decoration: none; }
.section--toolhead .hero__tag a:hover { color: var(--ink); }
.toolhead { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 80px; align-items: end; }
.toolhead__sentence { margin: 0; padding: 18px 0 0; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); font-family: var(--font-serif); font-variation-settings: "STYL" 0; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); text-wrap: pretty; min-height: 3.9em; }
/* Calculator head: title across the top, then lede and live summary
   side by side, starting on the same line */
.toolhead--calc { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; row-gap: 40px; }
.toolhead--calc .toolhead__title { grid-column: 1 / -1; }
.toolhead--calc .section__lede { margin-top: 0; max-width: 51ch; }
.toolhead--calc .toolhead__sentence { border-top: 0; border-left: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); padding: 0 0 0 32px; min-height: 0; }
/* Tools index head: text left, the Dials figure right, as on the case studies */
.toolhead--figure { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 48px; align-items: center; }
/* statistics pages: one centred column, the key figures under the lede */
.toolhead--column { grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; }
/* The drawing is centred in its frame, so the frame is centred on the text; the case
   studies pull theirs up into the padding, which this shorter head doesn't need. On one
   column the frame's empty bands above and below the drawing are taken back. */
.toolhead--figure .figure { margin: 0; width: min(100%, 600px); }
@media (max-width: 860px) {
  .section--toolhead { padding-top: 120px; }
  .toolhead { grid-template-columns: minmax(0, 1fr); }
  .toolhead--figure .figure { width: min(100%, 440px); justify-self: start; margin: -14% 0 -18% calc(min(100%, 440px) * -0.13); }   /* the drawing's left edge on the text's; its frame has 13% empty at the left */
  .toolhead--calc { row-gap: 28px; }
  .toolhead--calc .toolhead__sentence { border-left: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); padding: 18px 0 0; }
}

/* The tool: panel left, readout right, hairline between */
.section--tool { padding-top: 0; border-top: 0; }
.tool { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1px; background: color-mix(in srgb, var(--ink) 14%, transparent); border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.tool__panel, .tool__readout { background: var(--bone); min-width: 0; }
.tool__panel { padding: 24px 24px 24px 0; }
.tool__readout { padding: 32px 0 32px 40px; display: grid; align-content: start; gap: 28px; }
.tool__actions { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 0 0 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.tool__actions button { appearance: none; background: none; border: 0; cursor: pointer; font: inherit; font-weight: 500; letter-spacing: inherit; text-transform: inherit; color: var(--tint-text, var(--ink)); padding: 10px 0; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.tool__actions button:hover, .tool__actions button:focus-visible { text-decoration-color: currentColor; }
.tool__byline { margin: 14px 0 0; font-family: var(--font-sans); font-variation-settings: "STYL" 100; font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.prose--note p { font-size: 15px; color: var(--ink-2); }
@media (max-width: 860px) {
  .tool { grid-template-columns: minmax(0, 1fr); }
  /* The readout comes first on one column, so the panel mounting below it
     moves nothing the visitor is reading; the panel's box is reserved so
     the sections after it don't jump either. */
  .tool__readout { order: 1; padding: 28px 0 32px; }
  .tool__panel { order: 2; padding: 16px 0; min-height: 1000px; }
}

/* Readout */
.readout__big { display: grid; gap: 10px; }
.readout__num { font-family: var(--font-serif); font-variation-settings: "STYL" 0; font-size: clamp(48px, 6vw, 88px); line-height: 1; letter-spacing: -0.025em; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.readout__label { font-family: var(--font-sans); font-variation-settings: "STYL" 100; font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.readout__rows { margin: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.readout__row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 14px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); font-size: 16px; line-height: 1.4; color: var(--ink-2); }
.readout__row strong { font-family: var(--font-mono); font-weight: 500; font-size: 15px; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.readout__row--accent { color: var(--ink); }
.readout__row--accent strong { color: var(--act); }

/* DialKit, in the house material. The panel is a flat inline block:
   no glass, no shadow, hairlines in ink, ivory input surfaces. */
.tool .dialkit-root {
  --dial-glass-bg: #FFFDF8;              /* dropdowns paint with this; the panel itself is made transparent below */
  --dial-dropdown-bg: #FFFDF8;
  --dial-surface: color-mix(in srgb, #FFFDF8 85%, transparent);
  --dial-surface-hover: #FFFDF8;
  --dial-surface-active: #FFFDF8;
  --dial-surface-subtle: color-mix(in srgb, var(--ink) 10%, transparent);
  --dial-text-root: var(--ink);
  --dial-text-section: var(--ink);
  --dial-text-label: var(--ink-2);
  --dial-text-focus: var(--ink);
  --dial-text-primary: var(--ink);
  --dial-text-secondary: var(--ink-3);
  --dial-text-tertiary: color-mix(in srgb, var(--ink) 35%, transparent);
  --dial-border: color-mix(in srgb, var(--ink) 14%, transparent);
  --dial-border-hover: color-mix(in srgb, var(--ink) 28%, transparent);
  --dial-focus-ring: var(--ink);
  --dial-backdrop-blur: 0px;
  --dial-radius: 8px;
  --dial-row-height: 38px;
  --dial-row-gap: 6px;
  --dial-shadow: none;
  --dial-shadow-collapsed: none;
  --dial-shadow-dropdown: 0 1px 2px rgba(20, 19, 17, .04), 0 10px 30px -12px rgba(20, 19, 17, .18);
  font-family: var(--font-sans); font-variation-settings: "STYL" 100;
  width: 100%;
}
.tool .dialkit-panel-inner { border: 0; border-radius: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; width: 100%; max-width: none; }
.tool .dialkit-panel-inline { width: 100%; }
.tool .dialkit-panel-wrapper { width: 100%; }
/* The toolbar's copy-parameters button is for developers; the versions menu stays as saved scenarios. */
.tool .dialkit-toolbar-add { display: none; }
.tool .dialkit-panel-toolbar { display: none; }   /* saved "versions" and copy-parameters are for designers, not visitors */
/* A finger that lands on a slider must still be able to scroll the page */
.tool .dialkit-slider { touch-action: pan-y; }
/* The track reads against bone without the handle */
.tool .dialkit-slider { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 10%, transparent); }
.tool .dialkit-toolbar-primary { color: var(--bone); }
/* Sliders show their filled portion at rest, a shade darker while dragging. */
.tool .dialkit-slider-fill { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.tool .dialkit-slider-active .dialkit-slider-fill,
.tool .dialkit-slider:focus-visible .dialkit-slider-fill { background: color-mix(in srgb, var(--ink) 18%, transparent); }

/* Readout table of assumptions and the source notes */
.assume { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
.assume th { text-align: left; font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 0 16px 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.assume td { padding: 12px 16px 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); vertical-align: top; color: var(--ink-2); }
.assume td:nth-child(2), .assume td:nth-child(3) { font-family: var(--font-mono); font-size: 14px; white-space: nowrap; color: var(--ink); font-variant-numeric: tabular-nums; }
.assume tr.assume__changed td:nth-child(2) { color: var(--act); }
.assume td a { color: var(--ink); text-decoration: none; }
.assume td a:hover { text-decoration: underline; text-underline-offset: 3px; }
.assume__kind { display: inline-block; margin-top: 6px; padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.assume td:last-child { min-width: 180px; }
@media (max-width: 700px) {
  .assume thead { display: none; }
  .assume tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
  .assume td { border: 0; padding: 0; }
  .assume td:nth-child(3) { display: none; }
  .assume td:last-child { grid-column: 1 / -1; min-width: 0; }
}
.sources { margin: 0; counter-reset: src; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.sources li { padding: 16px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 66ch; }
.sources li strong { font-weight: 500; color: var(--ink); }
.sources li a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.sources li a:hover { color: var(--act); }

/* Method: formula rows */
.method { margin: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.method li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.method li strong { font-weight: 500; color: var(--ink); }
.method__num { padding-top: 4px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--ink-3); }
.method code { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); padding: 1px 6px; border-radius: 4px; }

/* Related tools: a short list of links in cells */
.related .cell__title a { color: inherit; text-decoration: none; }
.sources__also { margin: 40px 0 0; }

/* Statistics pages: key figures in the head, then number-first entries with a stable anchor and a cite line */
.keyfigs { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: color-mix(in srgb, var(--ink) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.keyfig a { display: grid; gap: 8px; padding: 18px 20px 20px; background: var(--bone); color: inherit; text-decoration: none; height: 100%; }
.keyfig a:hover .keyfig__num { color: var(--act); }
.keyfig__num { font-family: var(--font-serif); font-variation-settings: "STYL" 0; font-size: clamp(30px, 3vw, 44px); line-height: 1; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.keyfig__label { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.stats-list { margin: 0; border-top: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.stat { padding: 22px 0 24px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 0 24px; align-items: baseline; scroll-margin-top: 96px; }
.stat > :not(.stat__figure) { grid-column: 2; }
.stat__figure { margin: 0; grid-column: 1; grid-row: 1 / span 6; align-self: baseline; font-family: var(--font-serif); font-variation-settings: "STYL" 0; font-size: clamp(32px, 3vw, 42px); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat__anchor { color: var(--ink); text-decoration: none; }
.stat__anchor:hover { color: var(--act); }
.stat__claim { margin: 0; max-width: 57ch; font-family: var(--font-sans); font-variation-settings: "STYL" 100; font-weight: 500; font-size: 18px; line-height: 1.4; color: var(--ink); }
.stat__source { margin: 8px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.stat__source a { display: inline-block; padding: 3px 0; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.stat__source a:hover { color: var(--act); }
.stat__sample { color: var(--ink-3); }
.stat__sample::before { content: "·"; margin-right: 10px; }
.stat__note { margin: 8px 0 0; max-width: 60ch; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.stat__note a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.stat__note a:hover { color: var(--act); }
.stat__cite { margin: 10px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--ink-3); }
.stat__cite summary { display: inline-block; cursor: pointer; text-transform: uppercase; letter-spacing: .08em; padding: 8px 0; list-style: none; font-weight: 500; color: var(--tint-text, var(--ink)); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.stat__cite summary::-webkit-details-marker { display: none; }
.stat__cite summary::after { content: " +"; }
.stat__cite[open] summary::after { content: " –"; }
.stat__cite summary:hover, .stat__cite summary:focus-visible { text-decoration-color: currentColor; }
.stat__cite p { margin: 6px 0 0; max-width: 72ch; letter-spacing: .02em; line-height: 1.6; user-select: all; overflow-wrap: break-word; word-break: normal; }
/* The rating tag, shared by the statistics rows, the calculator defaults table and the source notes */
.kind { display: inline-block; padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3; color: var(--ink-3); white-space: nowrap; }
/* in the defaults table the tag goes on its own line under the source, so it never butts the link or runs off the edge */
.assume td .kind { display: block; width: fit-content; margin-top: 8px; }
@media (max-width: 700px) {
  .stat { grid-template-columns: minmax(0, 1fr); gap: 6px 0; }
  .stat > :not(.stat__figure) { grid-column: 1; }
  .stat__figure { grid-row: auto; }
  .keyfigs { grid-template-columns: minmax(0, 1fr); }
  /* the sample gets its own line on phones, so it needs no leading dot */
  .stat__sample { flex-basis: 100%; }
  .stat__sample::before { content: none; }
}

/* A single centered column: the section head above, the content below, 960px wide */
.section__inner--column { max-width: 960px; }
.section__inner--column .section__head { margin: 0 0 32px; }
.section__inner--column .title { max-width: 22ch; }

/* Articles */
.prose--article p { max-width: 60ch; font-size: 17px; line-height: 1.55; color: var(--ink); margin: 0 0 18px; }
.prose--article p:last-child { margin-bottom: 0; }
.prose--article a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.prose--article a:hover { color: var(--act); }
.prose--article ul, .prose--article ol { margin: 0 0 18px; padding: 0 0 0 22px; max-width: 60ch; list-style: disc; }
.prose--article ol { list-style: decimal; }
.prose--article li { font-size: 17px; line-height: 1.55; color: var(--ink); margin: 0 0 8px; }
.prose--article h3 { margin: 28px 0 10px; font-family: var(--font-serif); font-variation-settings: "STYL" 0; font-weight: 400; font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.prose--article .table { width: 100%; max-width: 760px; border-collapse: collapse; margin: 8px 0 22px; font-size: 15px; }
/* wide tables scroll inside their own box on phones instead of widening the page */
.table-wrap { max-width: 760px; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0 22px; }
.table-wrap .table { margin: 0; }
@media (max-width: 700px) { .prose--article .table td.num { white-space: normal; } }
.prose--article .table th { text-align: left; font-family: var(--font-mono); font-weight: 400; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 0 16px 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); }
.prose--article .table td { padding: 10px 16px 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); vertical-align: top; color: var(--ink-2); }
.prose--article .table td:first-child { color: var(--ink); }
.prose--article .table td.num { font-family: var(--font-mono); font-size: 14px; white-space: nowrap; color: var(--ink); }
.prose--article .pull { margin: 24px 0; padding: 18px 22px; border-left: 2px solid var(--ink); font-family: var(--font-serif); font-variation-settings: "STYL" 0; font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); max-width: 37ch; }
.prose--article .diagram { margin: 8px 0 24px; }

/* Blog category bar */
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 0; }
.filter a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; }
.filter a:hover { border-color: color-mix(in srgb, var(--ink) 40%, transparent); color: var(--ink); }
.filter a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--bone); }
.filter__count { font-size: 11px; color: inherit; opacity: .7; }
[data-category][hidden] { display: none; }

/* Mood colour on the tools pages (see styles.css): dials fill in a pale industry tint,
   header figure boxes take a wash, and a percentage figure gets a bar filled to its value */
.tint .tool .dialkit-slider-fill { background: color-mix(in srgb, var(--tint) 16%, transparent); }
.tint .tool .dialkit-slider-active .dialkit-slider-fill,
.tint .tool .dialkit-slider:focus-visible .dialkit-slider-fill { background: color-mix(in srgb, var(--tint) 28%, transparent); }
.keyfig a { background: color-mix(in srgb, var(--tint, var(--act)) 5%, var(--bone)); }   /* a page with no industry uses the house blue */
.stat__bar { display: block; width: min(100%, 140px); height: 6px; margin-top: 12px; border-radius: 3px; background: color-mix(in srgb, var(--tint, var(--act)) 18%, var(--bone)); }
.stat__bar::before { content: ""; display: block; width: var(--v); height: 100%; border-radius: inherit; background: var(--tint, var(--act)); }
/* Riffle sits further in and lower in its frame than the calculator: its own pull-in on one column */
@media (max-width: 860px) {
  .toolhead--figure .figure[data-figure="riffle"] { margin: calc(min(100%, 440px) * -0.12) 0 calc(min(100%, 440px) * -0.02) calc(min(100%, 440px) * -0.22); }
}
/* DialKit's stylesheet names its own mono for number readouts; use the site's */
.tool :is(.dialkit-slider-value, .dialkit-slider-input, .dialkit-pad-value, .dialkit-color-css-input) { font-family: var(--font-mono); }