/* ================================================================== cm-pages.css — page types cm-base.css never had. ------------------------------------------------------------------ cm-base.css is the inherited design system: tokens, header, footer, buttons, cards, hero, FAQ, category chrome. It knows nothing about calculator pages, because none existed when it was written. Everything here uses the SAME tokens (--bg-primary, --accent, …) so both themes work with no extra work. Never introduce a hex code. Per-calculator styles are prefixed (ci-, bmi-, pc-) so 1,000 of them can share one stylesheet without colliding — _theme.js R3. ================================================================== */ /* [hidden] must win over any display rule. A class like .bmi-grid{display:grid} beats the UA's [hidden]{display:none}, so an element toggled with el.hidden stays visible — the BMI calculator showed both unit panels at once until this was added. */ [hidden] { display: none !important; } /* ---------- Homepage additions ---------- */ .hero-copy { min-width: 0; } .hero-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--card-shadow); } .hero-panel-h { font-size: 15px; font-weight: 700; color: var(--text-medium); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 18px; } .hero-stats { display: grid; gap: 14px; margin: 0 0 18px; } .hero-stats > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .hero-stats > div:last-child { border-bottom: 0; padding-bottom: 0; } .hero-stats dt { font-size: 14.5px; color: var(--text-medium); } .hero-stats dd { font-size: 30px; font-weight: 800; color: var(--text-heading); line-height: 1; } .hero-panel-note { font-size: 13.5px; color: var(--text-medium); line-height: 1.6; } .hero-panel-note a { color: var(--accent); font-weight: 600; } .cat-group { margin-bottom: 40px; } .cat-group-name { font-size: 19px; font-weight: 700; color: var(--text-heading); margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } /* ---------- Homepage "C+" (RELEASE_PLAN.md R1, S40) ---------- The hero carries the same graph paper as the calculator card, so the homepage and the tool pages read as one design. Tokens only — both themes work with no per-mode rule. Inputs compute to 16px (Hard Rule 16). */ .hero-home { background-image: linear-gradient(var(--grid-hero) 1px, transparent 1px), linear-gradient(90deg, var(--grid-hero) 1px, transparent 1px), linear-gradient(var(--grid-hero-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-hero-minor) 1px, transparent 1px), linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); background-size: 24px 24px, 24px 24px, 12px 12px, 12px 12px, auto; background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px, 0 0; border-bottom: 1px solid var(--border); } .hero-home .hero-badge { gap: 6px; } .hero-home .hero-features { margin-bottom: 26px; } .hero-home .hero-features li::before { content: "✓"; display: inline-flex; width: 22px; height: 22px; border-radius: 50%; flex: none; background: rgba(22,163,74,.12); color: var(--success); font-size: 12px; font-weight: 800; align-items: center; justify-content: center; } .hero-jump { margin-top: 18px; font-size: 13.5px; color: var(--text-medium); display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; } .hero-jump a { font-weight: 600; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 4px 11px; font-size: 13px; } .hero-jump a:hover { background: var(--accent); color: #fff; } /* the try-it card */ .hero-try { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--card-shadow); overflow: clip; } .ht-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 0 12px; border-bottom: 1px solid var(--border); background: var(--bg-secondary); } .ht-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; } .ht-tabs::-webkit-scrollbar { display: none; } .ht-tabs [role="tab"] { appearance: none; border: 0; background: transparent; font: 600 13.5px var(--font-body); color: var(--text-medium); padding: 8px 12px 10px; border-radius: 8px 8px 0 0; cursor: pointer; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; } .ht-tabs [role="tab"]:hover { color: var(--text-heading); } .ht-tabs [role="tab"][aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); background: var(--surface); } .ht-tabs [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .ht-live { font-size: 12px; font-weight: 600; color: var(--success); white-space: nowrap; padding-bottom: 8px; } .ht-panel { padding: 18px 20px; min-height: 372px; } .ht-loading, .ht-panel .calc-error { font-size: 14px; color: var(--text-medium); margin: 0; min-height: 120px; display: flex; align-items: center; } .ht-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; } .ht-field { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-medium); min-width: 0; } .ht-field input, .ht-field select { font: 16px var(--font-body); padding: 9px 11px; border-radius: 9px; border: 1px solid var(--border-strong); background: var(--bg-primary); color: var(--text-light); width: 100%; min-width: 0; } .ht-field input:focus, .ht-field select:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .ht-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .ht-result { margin-top: 14px; background: var(--accent-soft); border-radius: 12px; padding: 14px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; align-items: end; } .ht-lbl { display: block; font-size: 12px; color: var(--text-medium); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .ht-lbl em { font-style: normal; } .ht-big { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--text-heading); line-height: 1.15; letter-spacing: -.02em; overflow-wrap: anywhere; } .ht-big.ht-accent { color: var(--accent); } .ht-sub { font-size: 13px; color: var(--text-light); } .ht-bars { display: flex; align-items: flex-end; gap: 3px; height: 60px; margin-top: 12px; } .ht-bars i { flex: 1; background: var(--accent); opacity: .85; border-radius: 3px 3px 0 0; min-height: 2px; } .ht-stack { display: flex; height: 26px; margin-top: 12px; border-radius: 8px; overflow: hidden; background: var(--bg-secondary); } .ht-stack i { display: flex; align-items: center; justify-content: center; font: 600 11px var(--font-body); color: #fff; overflow: hidden; white-space: nowrap; min-width: 0; } .ht-stack i span { padding: 0 6px; overflow: hidden; text-overflow: ellipsis; } .ht-stack .ht-s1 { background: var(--success); } .ht-stack .ht-s2 { background: var(--accent); } .ht-stack .ht-s3 { background: var(--logo-minus-bg); } .ht-stack .ht-s4 { background: var(--logo-multiply-bg); } .ht-scale { margin-top: 14px; } .ht-track { position: relative; display: flex; height: 10px; border-radius: 6px; overflow: visible; } .ht-seg { flex: 1; } .ht-seg:first-child { border-radius: 6px 0 0 6px; } .ht-seg:last-child { border-radius: 0 6px 6px 0; } .ht-seg.bmi-under { flex: 3.5; background: var(--accent); } .ht-seg.bmi-healthy { flex: 6.5; background: var(--success); } .ht-seg.bmi-over { flex: 5; background: var(--star); } .ht-seg.bmi-obese { flex: 10; background: var(--danger); } .ht-marker { position: absolute; top: -5px; width: 6px; height: 20px; margin-left: -3px; background: var(--text-heading); border-radius: 3px; box-shadow: 0 0 0 2px var(--surface), 0 1px 4px rgba(0,0,0,.35); transition: left .2s ease; } .ht-ticks { position: relative; height: 14px; font-size: 11px; color: var(--text-medium); margin-top: 6px; } .ht-ticks span { position: absolute; transform: translateX(-50%); } .ht-ticks span:first-child { transform: none; } .ht-ticks span:last-child { transform: translateX(-100%); } .ht-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-medium); border-top: 1px solid var(--border); padding-top: 12px; margin-top: 14px; } .ht-foot a { font-weight: 600; color: var(--accent); white-space: nowrap; } /* stat tiles */ .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; } .stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px 10px; text-align: center; } .stat-card .sn { display: block; font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--accent); line-height: 1.1; } .stat-card .sl { display: block; font-size: 12.5px; color: var(--text-medium); margin-top: 4px; } /* sections */ .why { padding: var(--section-pad); background: var(--bg-primary); } .why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .why-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 20px; } .why-card .wi { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; color: var(--accent); } .why-card .wi svg { display: block; } .why-card h3 { font-size: 16.5px; margin-bottom: 6px; color: var(--text-heading); } .why-card p { font-size: 14px; color: var(--text-medium); line-height: 1.55; } .popular-cta { text-align: center; margin-top: 28px; } .category-soon { border-style: dashed; } .category-soon .cat-count { color: var(--text-medium); } .next { padding: var(--section-pad); background: var(--bg-primary); } .next-band { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 30px; } .next-h { font-size: 22px; margin-bottom: 8px; color: var(--text-heading); text-align: start; } .next-band p { color: var(--text-medium); font-size: 15px; line-height: 1.6; } .next-band p a { font-weight: 600; color: var(--accent); } .next-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .next-list li { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; padding: 8px 12px; border-radius: 8px; background: var(--bg-secondary); color: var(--text-light); } .next-list li span { color: var(--text-medium); font-size: 12.5px; white-space: nowrap; } body.home .section-subtitle { max-width: 640px; margin-left: auto; margin-right: auto; } @media (max-width: 1024px) { .why-grid { grid-template-columns: repeat(2, 1fr); } .next-band { grid-template-columns: 1fr; } } @media (max-width: 767px) { /* Phone order (same breakpoint as cm-base's one-column hero): copy → CTAs → the try-it card → chips → tiles. The copy column dissolves into the hero grid so the card can sit above the chips; the grid gap goes to 0 and the blocks keep their own margins; the last two check items are dropped to shorten the run to the tool. */ .hero-home .hero-grid { gap: 0; } .hero-home .hero-copy { display: contents; } .hero-home .hero-ctas { margin-bottom: 22px; } .hero-home .hero-visual { margin-bottom: 20px; } .hero-home .hero-jump { order: 1; margin-top: 0; } .hero-home .hero-features li:nth-child(n+5) { display: none; } } @media (max-width: 640px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } .ht-result { grid-template-columns: 1fr; } .why-grid { grid-template-columns: 1fr; } .ht-head { padding-left: 8px; padding-right: 8px; } .ht-live { display: none; } .ht-panel { padding: 14px 14px; } .hero-home .hero-jump { font-size: 13px; } } /* ---------- Ad slots (R4) — markers today, units on activation ---------- Hidden until SITE.thirdParty.ads is enabled; then a fixed min-height is set inline by the build so the unit never moves the page. */ .ad-slot { display: flex; justify-content: center; align-items: center; margin: 28px auto; max-width: var(--container); padding: 0 var(--gutter); } .ad-slot[hidden] { display: none; } .ad-slot > ins { width: 100%; } /* ---------- THE PAGE BAND — every page opens with this ---------- FROZEN 08-Sep-2026 (S6h), owner-approved. Changing it is a design decision the owner takes, not a fix made on the way past — Hard Rule 27. Breadcrumb, then ONE row: optional category emoji · H1 with its last word in the accent colour · the type pill pushed to the extreme right. Then one 70ch line, an optional second line, the tick line and the CTAs — all at the page gutter, with the four operator glyphs faint behind (130px here, 200px in the tall band). On a phone the H1 takes a full basis of its own, so the row reads emoji + pill and the H1 drops beneath: the same three elements, one fewer line. The CALCULATOR page adds `.band-tall` and hangs its full-width card off the same band: inputs ("ledger") 5 cols, results ("report") 7 cols, graph paper inside the card only. Engines are untouched — every engine renders
then its -out element and the shell lays them out by position; a third element (the year control) joins the ledger column. generate.js has ONE builder for all of it, pageBand(); the slot list is _theme.js SHELL and the measurements are LAYOUT.band / LAYOUT.calcCard. Nothing else may open a page. */ .page-band { position: relative; padding: 0 0 40px; background: var(--bg-primary); overflow: hidden; } .page-band .container { position: relative; z-index: 1; max-width: var(--container-outer); padding: 0 var(--gutter); } /* The breadcrumb is INSIDE that container, so it must not add a second gutter. */ .page-band .breadcrumbs { max-width: none; margin: 0 0 14px; padding: 18px 0 0; } /* A band with no breadcrumb above it (404) would otherwise start its H1 hard against the header. */ .page-band .band-h1row:first-child { margin-top: 26px; } /* One row: emoji, H1, then the pill at the extreme right. Three items and `space-between` would strand the H1 in the middle, so the row packs from the start and the pill is pushed right by an auto margin. */ .band-h1row { display: flex; align-items: center; justify-content: flex-start; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 10px; } .band-h1row .calc-pill { margin-left: auto; } .page-band h1 { font-size: 44px; font-weight: 700; line-height: 1.05; color: var(--text-heading); } .page-band h1 em { font-style: normal; color: var(--accent); } /* The category mark sits inline before the H1, on the same row as the pill, at every width. On a phone the H1 takes a full basis of its own, so the row reads emoji + pill, then the H1 beneath. */ .band-emoji { font-size: 36px; line-height: 1; flex: 0 0 auto; margin: 0; } .band-desc { font-size: 16.5px; color: var(--text-medium); max-width: 70ch; line-height: 1.6; margin-top: 10px; } .page-band .hero-ctas { justify-content: flex-start; margin-top: 18px; } .page-band:not(.band-tall) { padding-bottom: 34px; } .calc-pill { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; padding: 10px 16px; border-radius: 999px; color: color-mix(in srgb, var(--success) 60%, var(--text-heading)); background: color-mix(in srgb, var(--success) 16%, var(--bg-primary)); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--success) 85%, transparent), 0 0 0 5px color-mix(in srgb, var(--success) 14%, transparent), 0 4px 18px color-mix(in srgb, var(--success) 30%, transparent); } body.dark-mode .calc-pill { color: color-mix(in srgb, var(--success) 75%, var(--text-heading)); background: color-mix(in srgb, var(--success) 10%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--success) 55%, transparent), 0 0 18px color-mix(in srgb, var(--success) 28%, transparent); } .band-sub { font-size: 17.5px; color: var(--text-muted); max-width: 70ch; line-height: 1.5; } .band-sub a { font-weight: 600; } .calc-ticks { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 24px; font-size: 13.5px; color: var(--text-medium); } .calc-ticks li { display: inline-flex; align-items: center; gap: 6px; } .calc-ticks li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent); flex-shrink: 0; } /* The four operators, faint, behind the band — the one flourish, and the only decoration on the site. Sized to the band: the calculator band is about three times the height of a page band, so it draws them larger rather than differently — same shapes, same corners, one design. */ .calc-ops { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .calc-ops span { position: absolute; font: 700 130px/1 var(--font-display); opacity: .07; user-select: none; } .calc-ops .op-plus { color: var(--c1); left: -20px; top: -45px; } .calc-ops .op-minus { color: var(--c4); right: 36%; top: -58px; } .calc-ops .op-times { color: var(--c3); right: -26px; bottom: -71px; } .calc-ops .op-divide { color: var(--c2); left: 34%; bottom: -78px; } /* Cropped, a minus is a rectangle and a divide is a dot. The short band carries only the two that still read as operators. */ .page-band:not(.band-tall) .calc-ops .op-minus, .page-band:not(.band-tall) .calc-ops .op-divide { display: none; } .page-band:not(.band-tall) .calc-ops .op-plus { left: -26px; top: -38px; } .page-band:not(.band-tall) .calc-ops .op-times { right: -34px; bottom: -46px; } .band-tall .calc-ops span { font-size: 200px; } .band-tall .calc-ops .op-plus { left: -30px; top: -70px; } .band-tall .calc-ops .op-minus { right: 36%; top: -90px; } .band-tall .calc-ops .op-times { right: -40px; bottom: -110px; } .band-tall .calc-ops .op-divide { left: 34%; bottom: -120px; } /* The card: graph paper inside, never on the page ground. */ .calc-tool { position: relative; z-index: 2; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background-color: var(--surface); background-image: linear-gradient(var(--grid-card) 1px, transparent 1px), linear-gradient(90deg, var(--grid-card) 1px, transparent 1px), linear-gradient(var(--grid-card-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-card-minor) 1px, transparent 1px); background-size: 24px 24px, 24px 24px, 12px 12px, 12px 12px; background-position: -1px -1px; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--card-shadow); overflow: clip; /* not hidden — hidden would turn the card into a scroll container and break the sticky report */ } .calc-tool > form { grid-column: 1; grid-row: 1; padding: 22px; border-right: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 60%, transparent); } .calc-tool > form + * { grid-column: 2; grid-row: 1 / span 2; padding: 22px; position: sticky; top: 82px; align-self: start; } .calc-tool > form ~ * ~ * { grid-column: 1; grid-row: 2; padding: 0 22px 22px; border-right: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 60%, transparent); } .calc-tool > p, .calc-tool > noscript { grid-column: 1 / -1; padding: 22px; } /* An engine may add ONE full-width block under both columns (chart, ledger…). */ .calc-tool > .calc-below { grid-column: 1 / -1; grid-row: 3; padding: 26px 22px 22px; border-top: 1px solid var(--border); background: none; border-right: 0; } /* Shared below-actions row — used by every engine that adds Download/Print buttons */ .ra-below-actions { /* bmi-/pc-/it-/sx- removed S52 — those engines use the shared ci-table-bar / ci-below-actions */ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-end; } .calc-tool label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--text-heading); } .calc-tool input[type="number"], .calc-tool input[type="text"], .calc-tool select { /* >= 16px or iOS Safari force-zooms on focus — _theme.js TYPE.minInput */ font-size: 16px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-heading); min-height: 44px; width: 100%; } .calc-tool select { font-family: var(--font-body); } .calc-tool input:focus-visible, .calc-tool select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); } .calc-tool table { width: 100%; border-collapse: collapse; } .calc-tool th, .calc-tool td { padding: 9px 10px; text-align: end; border-bottom: 1px solid var(--border); font-size: 14.5px; color: var(--text-light); font-variant-numeric: tabular-nums; } .calc-tool td { font-family: var(--font-mono); font-size: 13.5px; } .calc-tool thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-medium); border-bottom-width: 2px; } .calc-tool tbody th[scope="row"] { text-align: start; font-weight: 500; color: var(--text-light); } .calc-tool strong, .calc-tool b { font-variant-numeric: tabular-nums; } .calc-loading, .calc-error { padding: 16px; border-radius: 10px; font-size: 14.5px; } .calc-loading { color: var(--text-medium); } .calc-error { background: rgba(220,38,38,.08); border: 1px solid rgba(220,38,38,.35); color: var(--danger); } /* Rule R7: an estimate says so beside the result, not in a footnote. */ .calc-estimate-note { margin-top: 14px; font-size: 12.5px; line-height: 1.6; color: var(--text-medium); } /* Formula / examples / guide / provenance */ .calc-formula, .calc-examples, .calc-guide, .calc-provenance { padding: var(--section-pad); } .calc-formula { background: var(--bg-secondary); } /* ---------- THE EDITORIAL BLOCKS (S7) ---------- Adopted from the owner's reference build: a two-column spread for the methodology and the sources, and a two-column grid of native
for the FAQ. The left rail carries the section's identity — kicker, big heading, one lede, one jump link — and the right column carries the reading. Colour and type come from our tokens (Hard Rule 24); only the layout and the rhythm are the reference's. `.guide-rail` and `.sources-rail` are the same component at two sizes. Both collapse to one column at 900px, rail first. */ .calc-guide .container, .calc-provenance .container { display: grid; grid-template-columns: minmax(240px, .66fr) minmax(0, 1.34fr); gap: 24px 64px; } .guide-rail .panel-kicker, .calc-provenance .panel-kicker { font: 500 11px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--success); margin-bottom: 6px; } .guide-rail h2 { font-size: 38px; line-height: 1.04; letter-spacing: -.03em; color: var(--text-heading); margin: 0 0 16px; } .guide-rail .guide-lede { color: var(--text-medium); font-size: 14.5px; line-height: 1.6; margin: 0 0 16px; } .guide-rail .guide-jump { color: var(--accent); font-size: 13px; font-weight: 600; } .guide-body { display: grid; gap: 30px; } .guide-body > section { margin: 0; } .guide-body h3 { font-family: var(--font-serif); font-weight: 600; font-size: 25px; line-height: 1.2; letter-spacing: -.015em; color: var(--text-heading); margin: 0 0 10px; } .guide-body p { color: var(--text-muted); font-size: 15.5px; line-height: 1.7; margin: 0 0 12px; max-width: 72ch; } .guide-body p:last-child { margin-bottom: 0; } .guide-body strong { color: var(--text-heading); font-weight: 600; } .guide-body em { font-family: var(--font-serif); font-style: italic; color: var(--text-light); } /* The FAQ: native
, so an answer opens with JavaScript off. */ .faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 24px; } .faq-grid details { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 0 18px; transition: border-color var(--transition); } .faq-grid details[open] { border-color: var(--accent); } .faq-grid summary { list-style: none; cursor: pointer; position: relative; padding: 17px 30px 17px 0; font-size: 15px; font-weight: 600; color: var(--text-heading); } .faq-grid summary::-webkit-details-marker { display: none; } .faq-grid summary::after { content: "+"; position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); color: var(--success); font: 400 22px/1 var(--font-body); } .faq-grid details[open] summary::after { content: "\2212"; } .faq-grid summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } .faq-grid p { color: var(--text-muted); font-size: 14.5px; line-height: 1.65; margin: 0 0 18px; } /* Sources: the guide's rail at a smaller size, plus the disclaimer callout. */ .calc-provenance h2 { font-size: 32px; line-height: 1.05; letter-spacing: -.03em; color: var(--text-heading); margin: 0; } .provenance-body p { color: var(--text-muted); font-size: 14.5px; line-height: 1.7; margin: 0 0 14px; max-width: 72ch; } .provenance-body .sources { margin: 0 0 16px; padding-inline-start: 20px; } .provenance-body .sources li { color: var(--text-muted); font-size: 14.5px; line-height: 1.7; } .provenance-body .byline { color: var(--text-medium); font-size: 13.5px; } .disclaimer { padding: 14px 16px; border-inline-start: 3px solid var(--star); background: color-mix(in srgb, var(--star) 8%, transparent); border-radius: 0 8px 8px 0; color: var(--text-medium); font-size: 14px; line-height: 1.6; } .disclaimer strong { color: var(--text-heading); } @media (max-width: 900px) { .calc-guide .container, .calc-provenance .container { grid-template-columns: 1fr; gap: 26px; } .guide-rail h2 { font-size: 32px; } .calc-provenance h2 { font-size: 28px; } .faq-grid { grid-template-columns: 1fr; } } @media (max-width: 560px) { .guide-body h3 { font-size: 22px; } .guide-body p { font-size: 15px; } } /* S6: these sections use the page container so their headings start at the same left edge as the H1 and the card; the TEXT inside keeps a reading measure of its own. */ .calc-formula .container, .calc-examples .container, .calc-provenance .container { max-width: var(--container); } .calc-guide .container { max-width: var(--container); margin: 0 auto; } .formula-label, .formula-box, .formula-note, .howto, .example, .sources, .byline { max-width: 76ch; } .calc-formula .section-title, .calc-examples .section-title, .calc-provenance .section-title { text-align: start; } .formula-label { font-size: 14px; font-weight: 600; color: var(--text-medium); margin-bottom: 10px; } .formula-box { background: #000; border: 1px solid #000; border-radius: 10px; padding: 16px 18px; overflow-x: auto; margin-bottom: 14px; } .formula-box code { font-family: var(--font-mono); font-size: 14.5px; color: #fff; white-space: pre; } .formula-note { font-size: 14.5px; color: var(--text-medium); line-height: 1.7; margin-bottom: 24px; } .calc-formula h3 { font-size: 18px; font-weight: 700; color: var(--text-heading); margin-bottom: 12px; } .howto { margin: 0 0 0 20px; display: grid; gap: 8px; } .howto li { font-size: 15px; color: var(--text-light); line-height: 1.65; } .example { border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 18px; background: var(--surface); } .example h3 { font-size: 16.5px; font-weight: 700; color: var(--text-heading); margin-bottom: 12px; } .example-steps { margin: 0 0 12px 20px; display: grid; gap: 6px; } .example-steps li { font-size: 14px; color: var(--text-medium); } .example-steps code { font-family: var(--font-mono); font-size: 13.5px; } .example-result { font-size: 15.5px; color: var(--success); } .calc-provenance { background: var(--bg-secondary); } .sources { margin: 0 0 20px 20px; display: grid; gap: 8px; } .sources li { font-size: 14.5px; color: var(--text-medium); line-height: 1.6; } .sources a { color: var(--accent); } .byline { font-size: 14px; color: var(--text-medium); padding-top: 16px; border-top: 1px solid var(--border); } .byline a { color: var(--accent); font-weight: 600; } /* ---------- /categories/ — the type index (pillar page) ---------- */ .type-group { margin-bottom: 36px; } .type-group h2 { font-size: 22px; font-weight: 700; color: var(--text-heading); margin-bottom: 4px; } .tg-meta { font-size: 12.5px; font-family: var(--font-mono); color: var(--text-medium); margin-bottom: 14px; } .type-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .type-cats li { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-size: 14.5px; color: var(--text-light); transition: border-color var(--transition); } .type-cats li.ti-planned { background: none; border-style: dashed; color: var(--text-medium); } .type-cats li.ti-live:hover { border-color: var(--accent); } .type-cats a { display: flex; align-items: center; gap: 9px; width: 100%; color: inherit; } .type-cats a:hover { color: var(--accent); } .ti-name { flex: 1; } .ti-n { font-family: var(--font-mono); font-size: 12px; color: var(--text-medium); white-space: nowrap; } .ti-live .ti-n { color: var(--success); } @media (max-width: 560px) { .type-cats { grid-template-columns: 1fr; } } /* ---------- Roadmap ---------- */ .roadmap-list { margin: 0 0 28px; border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; } .roadmap-list summary { cursor: pointer; font-weight: 600; color: var(--accent); font-size: 15px; } .roadmap-items { columns: 2; column-gap: 32px; margin: 16px 0 0 18px; } .roadmap-items li { font-size: 14px; color: var(--text-medium); line-height: 1.9; break-inside: avoid; } .rm-live { font-size: 11px; font-weight: 700; color: var(--success); text-transform: uppercase; letter-spacing: .06em; } .rm-planned { font-size: 11px; color: var(--text-medium); opacity: .6; text-transform: uppercase; letter-spacing: .06em; } .grid-note { text-align: start; max-width: 76ch; margin-top: 26px; font-size: 14.5px; color: var(--text-medium); } .grid-note a { color: var(--accent); font-weight: 600; } /* ================================================================== Calculator components — one prefix each. ================================================================== */ /* ---------- ci- compound interest (reference "Precision Ledger" card, S5) ---------- */ .ci-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; } .ci-kicker { margin: 0 0 4px; font: 700 11px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--kicker); } .ci-panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; } .ci-panel-heading h2 { font-size: 23px; font-weight: 700; color: var(--text-heading); margin: 5px 0 0; } .ci-text-button { display: inline-flex; align-items: center; gap: 7px; border: 2px solid transparent; border-radius: 8px; padding: 9px 18px; font-size: 13px; font-weight: 700; font-family: var(--font-body); cursor: pointer; text-decoration: none; transition: background .16s ease, border-color .16s ease, box-shadow .16s ease; white-space: nowrap; } .ci-csv { background: var(--download, #00693C); color: #fff; border-color: var(--download, #00693C); } .ci-csv:hover, .ci-csv:focus-visible { background: transparent; color: var(--download-hover, #2DBA6E); border-color: var(--download-hover, #2DBA6E); box-shadow: 0 0 0 3px var(--download-soft, rgba(45,186,110,.18)); } .ci-print { background: transparent; color: var(--accent); border-color: var(--accent); } .ci-print:hover, .ci-print:focus-visible { background: var(--accent); color: #fff; box-shadow: 0 0 0 3px var(--accent-soft); } /* Share — brand-green filled, ghost hover; matches pa-share */ .ci-share { background: var(--download, #00693C); color: #fff; border-color: var(--download, #00693C); } .ci-share:hover, .ci-share:focus-visible { background: transparent; color: var(--download-hover, #2DBA6E); border-color: var(--download-hover, #2DBA6E); box-shadow: 0 0 0 3px var(--download-soft, rgba(45,186,110,.18)); } /* Reset — a quiet ghost pill that is still visibly a button (S50: it was the browser's default grey button before). Same base as every text button. */ /* Reset — tinted pill (owner decision S51, option B): clearly a button at rest, subordinate to the primary; hover/focus fills to the accent. Same rule on every calculator; never restyled per engine. */ .ci-reset { background: var(--accent-soft); color: var(--accent); border-color: transparent; padding: 7px 14px; } .ci-reset:hover, .ci-reset:focus-visible { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .ci-privacy-line { font-size: 12px; color: var(--text-medium); margin: 8px 0 23px; } .ci-privacy-line span { color: var(--kicker); font-size: 15px; margin-right: 4px; } .ci-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; } .ci-field { display: grid; gap: 6px; color: var(--text-medium); font-size: 12px; font-weight: 500; } .ci-field > span:first-child { min-height: 18px; display: flex; align-items: center; gap: 4px; } .ci-input-wrap, .ci-select-wrap { height: 45px; display: flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); transition: border-color .18s ease, box-shadow .18s ease; } .ci-input-wrap:focus-within, .ci-select-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .calc-tool .ci-input-wrap input, .calc-tool .ci-select-wrap select { min-width: 0; width: 100%; height: 100%; min-height: 0; border: 0; outline: 0; background: transparent; color: var(--text-heading); padding: 0 10px; font: 500 16px var(--font-body); border-radius: 8px; } .calc-tool .ci-input-wrap input:focus-visible, .calc-tool .ci-select-wrap select:focus-visible { outline: none; } .ci-input-wrap b { font: 500 12px var(--font-mono); color: var(--text-medium); padding-right: 10px; white-space: nowrap; } .ci-hint { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--border-strong); background: transparent; color: var(--text-medium); font: 500 9px/1 var(--font-mono); padding: 0; } .ci-timing { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 16px; padding: 0; border: 0; } .ci-timing legend { padding: 0 0 6px; color: var(--text-medium); font-size: 12px; } .ci-timing label { flex: 1; min-width: 120px; position: relative; display: block; } .ci-timing input { position: absolute; opacity: 0; width: 1px; height: 1px; } .ci-timing span { display: block; padding: 8px 9px; border: 1px solid var(--border); border-radius: 7px; color: var(--text-medium); font-size: 12px; text-align: center; transition: .16s ease; } .ci-timing input:checked + span { border-color: var(--accent); background: var(--accent-soft); color: var(--text-heading); } .ci-timing input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; } .ci-advanced { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 13px 0; } .ci-advanced summary { list-style: none; display: flex; justify-content: space-between; align-items: center; color: var(--text-heading); font-size: 13px; font-weight: 600; cursor: pointer; } .ci-advanced summary::-webkit-details-marker { display: none; } .ci-advanced summary i { color: var(--accent); font-style: normal; font-size: 18px; margin-right: 7px; display: inline-block; } .ci-advanced[open] summary i { transform: rotate(45deg); } .ci-advanced summary small { color: var(--text-medium); font-weight: 400; font-size: 11px; } .ci-advanced-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; margin-top: 17px; } .ci-advanced p { margin: 13px 0 0; color: var(--text-medium); font-size: 11px; line-height: 1.45; } .ci-form-error { min-height: 0; margin: 0; color: var(--danger); font-size: 12px; } .ci-form-error.visible { margin-top: 12px; } .ci-actions { display: flex; gap: 9px; margin-top: 21px; } .ci-primary, .ci-secondary { height: 43px; border-radius: 8px; padding: 0 13px; font-size: 13px; font-weight: 700; font-family: var(--font-body); transition: transform .16s ease; } .ci-primary { flex: 1; border: 1px solid var(--accent); color: var(--on-accent); background: var(--accent); box-shadow: 0 9px 25px var(--accent-soft); } .ci-secondary { border: 1px solid var(--border-strong); color: var(--text-heading); background: transparent; } .ci-primary:active, .ci-secondary:active { transform: scale(.97); } .ci-out { position: relative; } .ci-topline { display: flex; align-items: center; gap: 7px; color: var(--text-medium); font: 500 11px var(--font-mono); text-transform: uppercase; letter-spacing: .07em; } .ci-asof { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--text-heading); } /* S79 (owner): the horizon is vital — bold, heading colour */ .ci-live-dot { height: 7px; width: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 12px var(--success); } .ci-result-label { margin: 39px 0 3px; color: var(--text-medium); font-size: 14px; } .ci-result-total { margin: 0; font: 700 clamp(45px, 5.6vw, 70px)/1 var(--font-display); letter-spacing: -.05em; color: var(--text-heading); white-space: nowrap; font-variant-numeric: tabular-nums; } .ci-result-detail { color: var(--text-medium); font-size: 12px; margin: 11px 0 25px; } .ci-composition { padding: 14px 0 20px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .ci-composition-bar { height: 10px; border-radius: 100px; overflow: hidden; background: var(--surface-2); display: flex; } .ci-composition-bar span { height: 100%; transition: width .24s ease; } .ci-bar-principal, .ci-key-principal { background: var(--c1); } .ci-bar-contribution, .ci-key-contribution { background: var(--c2); } .ci-bar-growth, .ci-key-growth { background: var(--c4); } .ci-composition-key { display: flex; gap: 10px 17px; flex-wrap: wrap; margin-top: 10px; } .ci-composition-key span { font-size: 11px; color: var(--text-medium); display: grid; grid-template-columns: 8px auto; column-gap: 5px; align-items: center; } .ci-composition-key i { width: 7px; height: 7px; border-radius: 2px; } .ci-composition-key b { grid-column: 2; color: var(--text-heading); font: 500 11px var(--font-mono); } /* S52: separators are per-cell borders, not a background showing through a 1px gap — a short last row used to leave a grey block. */ .ci-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-top: 21px; border: 1px solid var(--border); } .ci-stat-grid div { padding: 13px; background: var(--surface); border-inline-end: 1px solid var(--border); border-block-end: 1px solid var(--border); margin: 0 0 -1px -1px; } .ci-stat-grid div > small { display: block; margin-top: 3px; color: var(--text-medium); font-size: 10.5px; line-height: 1.4; } .ci-stat-grid span { display: block; color: var(--text-medium); font-size: 11px; } .ci-stat-grid b { font: 600 15px var(--font-mono); color: var(--text-heading); } .ci-scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 18px; } .ci-scenarios > div { border: 1px solid var(--border); padding: 11px 10px; border-radius: 7px; background: var(--surface-2); } .ci-scenarios .ci-scenario-base { border-color: var(--accent); background: var(--accent-soft); } .ci-scenarios span, .ci-scenarios small { display: block; color: var(--text-medium); font-size: 10px; } .ci-scenarios b { display: block; color: var(--text-heading); font: 500 15px var(--font-mono); margin: 1px 0; } .ci-risk-note { margin: 17px 0 0; color: var(--text-medium); font-size: 11px; line-height: 1.5; } .ci-risk-note strong { color: var(--c3); } body:not(.dark-mode) .ci-risk-note strong { color: #B45309; } /* S120: #F97316 on white was 2.8:1 at 11 px; amber-700 is 5.0:1 */ .ci-section-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-top: 8px; } .ci-section-heading h3 { font-size: 20px; font-weight: 700; color: var(--text-heading); margin: 4px 0 0; } .ci-section-heading > p { max-width: 42ch; color: var(--text-medium); font-size: 12.5px; line-height: 1.5; margin: 0; } .ci-section-heading.ci-compact { margin-top: 34px; align-items: flex-end; } .ci-chart-and-insights { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(230px, .6fr); gap: 15px; margin-top: 22px; } .ci-insight { border: 1px solid var(--border); background: var(--surface); padding: 20px; border-radius: 10px; } .ci-chart-card { padding: 0; } /* S52: the chart sits on the graph paper (VA reference) — no card, no white ground */ .ci-chart-title { display: flex; gap: 16px; flex-wrap: wrap; color: var(--text-medium); font-size: 11px; } .ci-chart-title div { display: flex; align-items: center; gap: 6px; } .ci-chart-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c1); box-shadow: 0 0 8px var(--c1); } .ci-chart-dot.ci-adjusted { background: var(--c3); box-shadow: none; } .ci-chart-wrap { width: 100%; height: 284px; margin-top: 5px; } .ci-chart-wrap svg { width: 100%; height: 100%; overflow: visible; } .ci-grid-lines line { stroke: var(--border); stroke-width: 1; } .ci-grid-lines text, .ci-axis-labels text { fill: var(--text-medium); font: 10px var(--font-mono); } .ci-area-fill { fill: url(#ci-area); } .ci-nominal-line { fill: none; stroke: var(--c1); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .ci-adjusted-line { fill: none; stroke: var(--c3); stroke-width: 2; stroke-dasharray: 5 5; stroke-linecap: round; } .ci-last-dot { fill: var(--c1); stroke: var(--surface); stroke-width: 3; } .ci-insights { display: grid; gap: 15px; } .ci-insight { display: flex; flex-direction: column; justify-content: center; } .ci-insight-index { color: var(--success); font: 500 11px var(--font-mono); } .ci-insight h4 { margin: 7px 0; font-size: 17px; font-weight: 700; color: var(--text-heading); } .ci-insight p { margin: 0; color: var(--text-medium); font-size: 12px; line-height: 1.55; } .ci-table-actions { display: flex; gap: 12px; flex-wrap: wrap; } .ci-table th, .ci-table td { white-space: nowrap; } .ci-table tbody th { font-family: var(--font-mono); } .ci-growth-cell { color: var(--success); } .ci-table-note { margin: 11px 0 0; color: var(--text-medium); font-size: 11px; } /* ---------- The below block — one look on every calculator (S52; reference: va-mortgage) ---------- ci-section-heading (kicker + h3 | description) → ci-chart (the SVG, full width, ON the graph paper — never a white card) → ci-legend → details.ci-table-wrap > summary.ci-table-bar (Hard Rule 29: toggle flush-left, ci-below-actions flush-right with ci-csv | ci-print | ci-share) → ci-table-scroll > table.ci-table. Engines add their prefix beside these only as a JS hook. */ .ci-chart { width: 100%; margin: 0 0 6px; overflow-x: auto; } .ci-chart svg { display: block; width: 100%; height: auto; overflow: visible; } .ci-chart svg text { fill: var(--text-medium); font: 10px var(--font-mono); } .ci-legend { display: flex; flex-wrap: wrap; gap: 14px; font: 500 11px var(--font-body); color: var(--text-medium); margin: 0 0 8px; } .ci-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; background: var(--c1); } .ci-legend i.ci-c2 { background: var(--c2); } .ci-legend i.ci-c3 { background: var(--c3); } .ci-legend i.ci-c4 { background: var(--c4); } .ci-table-wrap { margin-top: 6px; } .ci-table-bar { display: flex; align-items: center; gap: 12px; width: 100%; list-style: none; cursor: pointer; background: transparent; padding: 0; min-height: 44px; } .ci-table-bar::-webkit-details-marker { display: none; } .ci-table-toggle { font: 600 13px var(--font-body); color: var(--accent); flex: 0 0 auto; } .ci-table-toggle::before { content: '▶ '; font-size: 10px; } .ci-table-wrap[open] > .ci-table-bar .ci-table-toggle::before { content: '▼ '; } .ci-below-actions { display: inline-flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 10px; align-items: center; margin-left: auto; } .ci-below-actions button { pointer-events: auto; } .ci-table-scroll { margin-top: 10px; overflow-x: auto; } /* S120: phone charts. _ui.js gives a chart that would scale below 0.6 a minimum width (its text stays ≥ ~8 px) and marks the box; the hint says the chart scrolls. Engines that redraw at the container width never need it. */ .ci-chart.ci-chart-scrolls { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .ci-chart-hint { margin: 4px 0 8px; font: 500 11.5px var(--font-body); color: var(--text-medium); } /* S118 (shared, from three audit workers): a wide table or chart below the card must never widen the card on a phone (the mobile track sizes to content, so the form was clipped invisibly), and the Rule 29 bar wraps under its toggle instead of running off the edge at 390 px. */ .calc-below { min-width: 0; } .ci-table-scroll { width: 0; min-width: 100%; } @media (max-width: 480px) { .ci-table-bar { flex-wrap: wrap; } .ci-below-actions { margin-left: 0; justify-content: flex-start; } } .ci-table { width: 100%; border-collapse: collapse; font: 500 12.5px var(--font-body); color: var(--text-light); } .ci-table th { text-align: right; padding: 6px 10px; font: 600 11.5px var(--font-body); color: var(--text-medium); border-bottom: 1px solid var(--border); } .ci-table th:first-child, .ci-table td:first-child { text-align: left; } .ci-table td { text-align: right; padding: 5px 10px; font: 500 12px var(--font-mono); color: var(--text-light); border-bottom: 1px solid var(--border); } .ci-table tr:last-child td { border-bottom: none; } /* Mode tabs — one look (S52; reference: balloon-payment).
of or