/* ============================================================================
fm-ui.css — shared F/m control styling (opt-in classes; palette per CLAUDE.md)
.fm-slider Canonical TIPS range-slider look: navy (#003366) filled track
up to the thumb, light gray (#E8EAED) after, brand-red
(#BB3D32) round thumb. Put the class on the
itself OR on a wrapper around it. The fill position comes from
the --pct custom property, which FmUi.dateSliderBox (and
FmUi.sliderFill) already set on the input.
.fm-span OPT-IN modifier on an .fm-slider input for scrubbers over
history (curve-time): the track to the LEFT of the thumb
fills light blue (--fm-sky) so the span of history covered
so far is visible; the rest stays light gray. Needs
FmUi.sliderFill(input) (or dateSliderBox), which sets --pctn.
Sliders without the class keep the navy value fill.
.fm-ctl-input Text/number input that matches the .seg chiclet buttons
(font-family:inherit, 13px, weight 600, same border/radius),
so "text box font = chiclet font" holds everywhere.
Modifier: .fm-ctl-input.sm -> 11px (e.g. TIPS fwd-inflation box).
.fm-actions Centered flex row (gap 10px) for the actions under a tool's data:
Export to PDF, Export to Excel, Share, in that order. The
canonical button look and the icons live in assets/fm-theme.css
(linked last, so it wins); the rules below are the fallback for
the few embeds that do not link the theme.
Usage: then add the classes.
Page CSS variables (--navy/--red/--line/--panel) are honored when present;
hard-coded brand fallbacks apply otherwise. No imports, no external fonts.
============================================================================ */
/* ------------------------------------------------------------- graph paper
The house "paper" surface (see doc/paper.html): #EAF1F8 with a 24px fine
grid and a 120px bold grid, painted on so every page that links
this file inherits it. Pages set body{background:transparent} and their
white .panel/.card surfaces sit on top of the grid; the page-level
--paper/--bg token stays the FLAT colour, for component fills only. */
html{
--fm-paper:#EAF1F8;
--fm-grid:rgba(0,51,102,0.09);
--fm-gridbold:rgba(0,51,102,0.15);
background-color:var(--fm-paper);
background-image:
linear-gradient(var(--fm-grid) 1px,transparent 1px),
linear-gradient(90deg,var(--fm-grid) 1px,transparent 1px),
linear-gradient(var(--fm-gridbold) 1px,transparent 1px),
linear-gradient(90deg,var(--fm-gridbold) 1px,transparent 1px);
background-size:24px 24px,24px 24px,120px 120px,120px 120px;
}
/* ------------------------------------------------------------- .fm-slider */
input[type=range].fm-slider,
.fm-slider input[type=range]{
-webkit-appearance:none;appearance:none;
background:transparent;height:28px;margin:0;cursor:pointer;
}
input[type=range].fm-slider::-webkit-slider-runnable-track,
.fm-slider input[type=range]::-webkit-slider-runnable-track{
height:6px;border-radius:3px;
background:linear-gradient(90deg,var(--navy,#003366) 0 var(--pct,50%),#E8EAED var(--pct,50%) 100%);
}
input[type=range].fm-slider::-webkit-slider-thumb,
.fm-slider input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;appearance:none;
width:18px;height:18px;border-radius:50%;
background:var(--red,#BB3D32);border:2px solid #fff;
box-shadow:0 1px 3px rgba(0,24,43,.2);margin-top:-6px;
}
input[type=range].fm-slider::-moz-range-track,
.fm-slider input[type=range]::-moz-range-track{
height:6px;border-radius:3px;
background:linear-gradient(90deg,var(--navy,#003366) 0 var(--pct,50%),#E8EAED var(--pct,50%) 100%);
}
input[type=range].fm-slider::-moz-range-thumb,
.fm-slider input[type=range]::-moz-range-thumb{
width:18px;height:18px;border-radius:50%;
background:var(--red,#BB3D32);border:2px solid #fff;
}
input[type=range].fm-slider:focus-visible,
.fm-slider input[type=range]:focus-visible{
outline:2px solid var(--red,#BB3D32);outline-offset:4px;border-radius:6px;
}
/* .fm-span — opt-in covered-span fill for time-span scrubbers. --fm-sky is
the site's light blue (the hero/slide-date tint) on the #E8EAED rail; the
fill edge is centered under the 18px thumb via the unitless --pctn that
FmUi.sliderFill sets alongside --pct. Only inputs carrying .fm-span match. */
:root{--fm-sky:#9FC0DC}
input[type=range].fm-slider.fm-span::-webkit-slider-runnable-track,
.fm-slider input[type=range].fm-span::-webkit-slider-runnable-track{
background:linear-gradient(90deg,
var(--fm-sky,#9FC0DC) 0 calc(9px + (100% - 18px) * var(--pctn,0)),
#E8EAED calc(9px + (100% - 18px) * var(--pctn,0)) 100%);
}
input[type=range].fm-slider.fm-span::-moz-range-track,
.fm-slider input[type=range].fm-span::-moz-range-track{
background:linear-gradient(90deg,
var(--fm-sky,#9FC0DC) 0 calc(9px + (100% - 18px) * var(--pctn,0)),
#E8EAED calc(9px + (100% - 18px) * var(--pctn,0)) 100%);
}
/* ---------------------------------------------------------- .fm-ctl-input */
.fm-ctl-input{
appearance:none;
font-family:inherit;font-size:13px;font-weight:600; /* = .seg button */
color:var(--navy,#003366);
background:var(--panel,#fff);
border:1px solid var(--line,#E8EAED);border-radius:10px; /* = .seg shell */
padding:8px 12px;
}
.fm-ctl-input.sm{font-size:11px;padding:6px 9px}
.fm-ctl-input:focus-visible{outline:2px solid var(--red,#BB3D32);outline-offset:1px}
/* ------------------------------------------------------------ .fm-actions */
.fm-actions{
display:flex;justify-content:center;align-items:center;
gap:10px;margin:14px 0 4px;flex-wrap:wrap;
}
.fm-actions button,
.fm-actions .btn{
appearance:none;cursor:pointer;
font-family:inherit;font-size:13px;font-weight:600;
color:var(--navy,#003366);background:var(--panel,#fff);
border:1px solid var(--line,#E8EAED);border-radius:9px;padding:9px 14px;
display:inline-flex;align-items:center;gap:7px;
}
.fm-actions button:hover,
.fm-actions .btn:hover{border-color:var(--navy,#003366)}
.fm-actions button.primary,
.fm-actions .btn.primary{
background:var(--navy,#003366);color:#fff;border-color:var(--navy,#003366);
}
.fm-actions button:focus-visible,
.fm-actions .btn:focus-visible{outline:2px solid var(--red,#BB3D32);outline-offset:2px}
/* Share (site standard 2026-09-11): the last control in every .fm-actions row,
in Electric Tomato — the CTA colour fminvest.com uses (.btn-coral-red). */
.fm-actions .btn.btn-share{background:var(--electric,#FB4D3D);border-color:var(--electric,#FB4D3D);color:#fff}
.fm-actions .btn.btn-share:hover{background:#D04438;border-color:#D04438;color:#fff}
/* ------------------------------------------------------------ .fm-formula */
/* styled inline-formula pill: (1+π)t */
.fm-formula code, code.fm-formula { font-family:'Roboto Mono', ui-monospace, monospace; font-size:11px; background:#EEF2F6; padding:1px 5px; border-radius:4px; color:var(--navy,#003366); }
.fm-formula sup { font-size:.72em; }
/* ---- the yellow demo/status flag box is RETIRED (2026-09-19): explanatory text is the quiet
.tool-note defined in assets/fm-theme.css; the audit fails a yellow box that comes back ---- */
/* ---- dual-range window control (two thumbs, one track; heat-map convention) ----
One house date picker at each end (FmUi.dualRange, 2026-09-27). The box is as wide as the period it
shows (data-gran); the track gives way first on a narrow screen, so the row never scrolls sideways. */
.fm-dual{display:inline-flex;align-items:center;gap:9px;vertical-align:middle;max-width:100%;min-width:0}
.fm-dual .yr-num{width:64px;padding:5px 6px;border-radius:6px;text-align:center;flex:none;font-variant-numeric:tabular-nums}
.fm-dual[data-gran="month"] .yr-num,.fm-dual[data-gran="quarter"] .yr-num{width:84px}
.fm-dual[data-gran="day"] .yr-num{width:108px}
.fm-dual .dr{position:relative;width:190px;height:26px;display:flex;align-items:center;flex:0 1 190px;min-width:64px}
:has(> .fm-dual),.ctl:has(.fm-dual){min-width:0;max-width:100%} /* the page's wrapper and control block shrink with it */
@media (max-width:520px){:has(> .fm-dual){margin-left:0 !important}}
.fm-dual .dr-rail{position:absolute;left:0;right:0;height:4px;background:#E8EAED;border-radius:3px}
.fm-dual .dr-fill{position:absolute;height:4px;background:#003366;border-radius:3px}
.fm-dual .dr-in{position:absolute;left:0;right:0;width:100%;margin:0;height:26px;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.fm-dual .dr-in::-webkit-slider-runnable-track{background:none;border:none}
.fm-dual .dr-in::-moz-range-track{background:none;border:none}
.fm-dual .dr-in::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;pointer-events:auto;width:15px;height:15px;border-radius:50%;background:#BB3D32;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.35);cursor:pointer}
.fm-dual .dr-in::-moz-range-thumb{pointer-events:auto;width:15px;height:15px;border-radius:50%;background:#BB3D32;border:2px solid #fff;cursor:pointer}
/* ---- popup calendar (FmUi.datePicker) --------------------------------------
Header: previous / zoom title / next. Grid: days of a month, months of a year
or a page of 30 years, always the same height so zooming never moves the
header under the pointer. Footer: Today (or Latest) and the date it writes.
Colours, fonts and radii are the theme's --fm-* tokens (fm-theme.css); the
second value is the same palette colour for a page that loads without it.
Cells are 34px with a mouse and 42px (a 40px button) on touch or a narrow
screen; the popup is never wider than the viewport. */
.fm-cal{--cal-cell:34px;--cal-navy:var(--fm-navy,#003366);--cal-ink:var(--fm-navy-deep,#00182B);
--cal-line:var(--fm-line,#E8EAED);--cal-ice:var(--fm-ice,#EAF3FA);--cal-quiet:var(--fm-steel,#4D7A9D);
--cal-off:var(--fm-gray,#9AA9B5);--cal-focus:var(--fm-red,#BB3D32);--cal-now:var(--fm-electric,#FB4D3D);
--cal-fill:var(--fm-panel,#FFFFFF);--cal-r:var(--fm-radius-sm,9px);
position:absolute;z-index:60;box-sizing:border-box;width:calc(var(--cal-cell)*7 + 26px);max-width:calc(100vw - 16px);
background:var(--cal-fill);border:1px solid var(--cal-line);border-radius:var(--fm-radius,12px);
box-shadow:0 8px 28px rgba(0,24,43,.16);padding:10px 12px;font-family:inherit;font-size:13px;line-height:1.2;
color:var(--cal-ink);text-align:left;-webkit-user-select:none;user-select:none}
@media (pointer:coarse),(max-width:520px){.fm-cal{--cal-cell:42px}} /* 40px buttons + the 1px gutter each side */
.fm-cal button{appearance:none;-webkit-appearance:none;box-sizing:border-box;margin:0;padding:0;min-width:0;border:0;
background:none;color:inherit;font:inherit;text-transform:none;letter-spacing:0;cursor:pointer;
border-radius:var(--cal-r);-webkit-tap-highlight-color:transparent}
.fm-cal button:not(:disabled):hover{background:var(--cal-ice)}
.fm-cal button:focus-visible{outline:2px solid var(--cal-focus);outline-offset:1px}
.fm-cal button:disabled{cursor:default}
.fm-cal .fm-cal-hd{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.fm-cal .fm-cal-nav{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--cal-cell);
height:var(--cal-cell);border:1px solid var(--cal-line);color:var(--cal-navy);font-size:12px}
.fm-cal .fm-cal-nav:disabled{color:var(--cal-off);opacity:.55}
.fm-cal .fm-cal-title{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;
height:var(--cal-cell);font-size:14px;font-weight:700;color:var(--cal-navy)}
.fm-cal .fm-cal-title:not(:disabled)::after{content:"";flex:none;width:.62em;height:.62em;background-color:currentColor;
-webkit-mask:var(--fm-ico-down) center/contain no-repeat;mask:var(--fm-ico-down) center/contain no-repeat}
.fm-cal .fm-cal-grid{display:flex;flex-direction:column;height:calc(var(--cal-cell)*6 + 22px)}
.fm-cal .fm-cal-row{flex:1 1 0;min-height:0;display:grid;grid-template-columns:repeat(var(--cal-cols,7),minmax(0,1fr));
align-items:center}
.fm-cal .fm-cal-dow{flex:0 0 22px}
.fm-cal .fm-cal-dow > div{font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
color:var(--cal-quiet);text-align:center}
.fm-cal .fm-cal-grid [role="gridcell"]{display:flex;align-items:center;justify-content:center;padding:0 1px}
.fm-cal .fm-cal-grid button{width:100%;height:calc(var(--cal-cell) - 2px);font-size:13px;font-variant-numeric:tabular-nums}
.fm-cal .fm-cal-grid[data-level="months"] button,
.fm-cal .fm-cal-grid[data-level="quarters"] button{height:calc(var(--cal-cell) + 8px);font-weight:600}
.fm-cal .fm-cal-grid button[data-today]{box-shadow:inset 0 0 0 1.5px var(--cal-now)}
.fm-cal .fm-cal-grid button[data-sel],
.fm-cal .fm-cal-grid button[data-sel]:hover{background:var(--cal-navy);color:var(--cal-fill);font-weight:700}
.fm-cal .fm-cal-grid button:disabled{color:var(--cal-off);opacity:.6;background:none}
/* a month the source never produced (FmUi.datePicker opts.unpublished, 2026-10-01): struck through, disabled or not */
.fm-cal .fm-cal-grid button[data-np]{text-decoration:line-through;text-decoration-thickness:1.5px}
.fm-cal .fm-cal-ft{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;
padding-top:8px;border-top:1px solid var(--cal-line)}
.fm-cal .fm-cal-today{height:var(--cal-cell);padding:0 14px;border:1px solid var(--cal-line);color:var(--cal-navy);
font-size:12.5px;font-weight:600}
.fm-cal .fm-cal-today:disabled{color:var(--cal-off);opacity:.6}
.fm-cal .fm-cal-note{font-size:11.5px;color:var(--cal-quiet);font-variant-numeric:tabular-nums}
.fm-cal .fm-cal-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ------------------------------------------------- fm-share (A+B pattern) */
.fm-shareable{position:relative} /* any chart or grid container (2026-09-20: the rollover is on every tool) */
.fm-share-pill{position:absolute;top:10px;right:12px;z-index:5;appearance:none;cursor:pointer;
background:#D04438;color:#fff;border:0;border-radius:14px;padding:5px 12px;
font-family:inherit;font-size:11px;font-weight:700;opacity:0;transition:opacity .15s;
box-shadow:0 2px 8px rgba(208,68,56,.35)}
.fm-shareable:hover > .fm-share-pill,.fm-shareable:focus-within > .fm-share-pill,.fm-share-pill:focus{opacity:1}
@media (hover:none){.fm-share-pill{opacity:.92}} /* touch screens have no hover: keep it visible */
.fm-share-overlay{position:fixed;inset:0;background:rgba(0,24,43,.45);z-index:80;
display:flex;align-items:center;justify-content:center;padding:20px}
.fm-share-modal{background:#fff;border-radius:14px;box-shadow:0 18px 60px rgba(11,31,58,.35);
width:430px;max-width:94vw;max-height:86vh;overflow:auto;padding:22px 22px 16px;position:relative;
font-family:"Aaux Next","Source Sans 3",system-ui,sans-serif}
.fm-share-modal h4{margin:0 0 14px;color:#003366;font-size:16px;padding-right:26px}
.fm-share-x{position:absolute;top:10px;right:12px;appearance:none;border:0;background:none;
font-size:22px;color:#758D99;cursor:pointer;line-height:1}
.fm-share-opt{display:block;width:100%;text-align:left;appearance:none;cursor:pointer;
background:#FCFCFD;border:1px solid #E8EAED;border-radius:10px;padding:11px 14px;margin:0 0 8px;
font-family:inherit}
.fm-share-opt:hover{border-color:#003366;background:#F4F9FD}
.fm-share-opt b{display:block;color:#003366;font-size:13.5px}
.fm-share-opt span{display:block;color:#758D99;font-size:11px;margin-top:2px;word-break:break-all}
.fm-share-note{font-size:11px;color:#758D99;line-height:1.45;margin:12px 2px 0;
border-top:1px solid #E8EAED;padding-top:10px}
/* ------------------------------------------------------- fm-sort indicators */
table.fmtab thead th:not(.corner):not([data-nosort]){cursor:pointer;user-select:none}
table.fmtab thead th:not(.corner):hover{background:#1a3a5c}
table.fmtab thead th.corner[data-dir],table.fmtab thead th.fm-s-asc,table.fmtab thead th.fm-s-desc{position:relative}
/* the asc/desc indicator itself is an icon drawn by assets/fm-theme.css (no glyph characters) */
table.fmtab thead th.corner.fm-s-asc::after,table.fmtab thead th.corner.fm-s-desc::after{color:#003366}
/* ---------------------------------------------------- fm-deck slides */
.fm-slide{position:relative;width:100%;aspect-ratio:16/9;background:#fff;border:1px solid #E8EAED;
border-radius:12px;overflow:hidden;display:flex;flex-direction:column;container-type:inline-size;
font-family:"Aaux Next","Source Sans 3",system-ui,sans-serif}
.fm-slide-title{background:linear-gradient(135deg,#002342 0,#00182B 100%);align-items:center;justify-content:center}
.fm-slide-title-in{text-align:center;padding:5% 8%;color:#fff}
.fm-slide-logo{height:12cqw;max-height:18%;width:auto;margin-bottom:4%}
.fm-slide-title h1{margin:0 0 2.4%;font-size:6.4cqw;line-height:1.12;font-weight:800;letter-spacing:-.01em}
.fm-slide-title p{margin:0;font-size:2.7cqw;color:#cfe0ef;max-width:78%;margin-left:auto;margin-right:auto}
.fm-slide-date{margin-top:4%;font-size:2.1cqw;color:#9fc0dc;letter-spacing:.12em;text-transform:uppercase}
.fm-slide-text{padding:4.5% 6%}
.fm-slide-h{margin:0 0 2.5%;color:#003366;font-size:4.6cqw;font-weight:800;
border-bottom:.45cqw solid #BB3D32;display:inline-block;padding-bottom:1%}
.fm-rich{flex:1;overflow:auto;font-size:2.55cqw;line-height:1.55;color:#00182B}
.fm-rich h2{color:#003366;font-size:3.4cqw;margin:2.2% 0 1.2%}
.fm-rich h3{color:#003366;font-size:2.9cqw;margin:2% 0 1%}
.fm-rich ul,.fm-rich ol{margin:1% 0 1% 4%}
.fm-rich a{color:#003366;font-weight:600}
.fm-rich b,.fm-rich strong{color:#003366}
.fm-slide-frame{flex:1;width:100%;border:0;background:#fff}
.fm-slide-imgwrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3%;min-height:0}
.fm-slide-imgwrap img{max-width:100%;max-height:88%;object-fit:contain;border-radius:6px}
.fm-slide-cap{margin-top:1.6%;font-size:2cqw;color:#758D99}
/* creator rich-text editor */
.fm-rte-bar{display:flex;flex-wrap:wrap;gap:4px;border:1px solid #E8EAED;border-bottom:0;border-radius:9px 9px 0 0;background:#FCFCFD;padding:6px}
.fm-rte-bar button{appearance:none;border:1px solid #E8EAED;background:#fff;border-radius:6px;cursor:pointer;
font-family:inherit;font-size:12px;font-weight:600;color:#003366;padding:4px 9px;min-width:28px}
.fm-rte-bar button:hover{border-color:#003366}
.fm-rte-bar .sw{width:16px;height:16px;border-radius:4px;display:inline-block;vertical-align:-3px}
.fm-rte{border:1px solid #E8EAED;border-radius:0 0 9px 9px;background:#fff;min-height:220px;max-height:380px;
overflow:auto;padding:14px 16px;font-family:"Aaux Next","Source Sans 3",system-ui,sans-serif;
font-size:14.5px;line-height:1.55;color:#00182B;outline:none}
.fm-rte:focus{border-color:#D04438;box-shadow:0 0 0 3px rgba(208,68,56,.10)}
.fm-rte h2,.fm-rte h3{color:#003366}
/* ------------------------------------------------------------ site width
Content width follows fminvest.com's tool pages (Bootstrap container as
used on /current-us-treasury-rates, measured 2026-09-02): 1140px from a
1200px viewport, 1320px from 1400px, fluid below. Pages keep the 1140px
inline value in their own chrome CSS (nav / hero / .wrap / footer); this
shared rule widens all of them together on large screens. `html` prefix
= higher specificity than the page-inline selectors it overrides. */
@media (min-width: 1400px) {
html .wrap, html .fmnav .in { max-width: 1320px; }
}
/* 2026-09-02: the navy hero band with the triangle motif was removed site-wide
(its and per-page inline CSS are gone from every page in web/, and
scripts/audit_conformity.py now asserts it stays gone). Content therefore
begins directly under the shared company header, so the first content block
supplies the top spacing the band used to provide. index.html is exempt: its
own .tools{padding:46px 0 20px} already carries it. */
header.fmnav + .wrap{padding-top:30px}
/* The page title the band used to hold, now plain text on the page background -
one shared rule rather than 59 inline copies. Smaller than the old hero h1
(2.6rem): that size existed to fill a 314px navy band, and on the light page
it would out-shout the readout card it sits above. */
h1.page-title{font-family:"Aaux Next","Source Sans 3",system-ui,sans-serif;
font-size:1.95rem;font-weight:800;letter-spacing:-.01em;line-height:1.15;
color:#003366;margin:0 0 18px}
@media(max-width:640px){h1.page-title{font-size:1.6rem;margin-bottom:14px}}
/* Share modal: the LinkedIn click-through leads the list */
.fm-share-li{display:flex!important;align-items:center;gap:12px;border-color:#0A66C2!important}
.fm-share-li .fm-share-li-text{display:block}
.fm-share-li .fm-share-li-text b{display:block}
.fm-share-li svg{flex:0 0 auto}