/* ib-static.css — chrome shared by the non-guide static pages.
   ---------------------------------------------------------------------------
   Every rule here was verified SINGLE-VARIANT across the 40 pages under
   public/legacy/ that are not guides (hashed, not eyeballed). Guides get their
   equivalent from ib-guide.css; they do not link this sheet.

   ORDER: linked immediately BEFORE /ib-shell.css, the slot the inline <style>
   occupied, so ib-shell.css still wins the ties it used to win.

   NOT moved here, deliberately:
     .breadcrumb*, .page-footer, .faq-*, .embed-light .ib-footer*  — drifted.
       The minority variant is almost always cycle-plotter (which paints from its
       own --cp-* tokens) or the calculators index. Hoisting the majority value
       would silently overwrite theirs, because a page's inline <style> sits
       BEFORE this link and therefore LOSES equal-specificity ties.
     .static-page h3 — single-variant, but only 25 of 43 pages carry it while
       many of the other 18 render <h3>. Moving it ADDS a colour to those pages.
       That is a visual change, not a refactor.
     :root / html,body — see ib-shell.css.
*/

.other-calcs{display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;}
.embed-mode .ib-nav{display:none;}
.embed-mode .ib-footer{display:none;}
.embed-mode .static-nav{display: none;}
.embed-mode .static-page{display: none;}
.embed-promo{text-align:center;font-size:12px;color:rgba(240,240,242,0.35);margin:24px 0 0;font-family:var(--mono);}
.embed-promo a{color:var(--teal);text-decoration:none;}
.embed-promo a:hover{text-decoration:underline;}
.example-box{background: var(--surface); border: 1px solid var(--border2); border-radius:5px; padding: 18px 20px; margin: 16px 0 24px;}
.example-box .label{font-family: var(--mono); font-size: 11px; color: var(--teal); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 10px;}
.example-box p{font-size: 14px; margin-bottom: 6px; color: rgba(240,240,242,0.7);}
.table-wrap{overflow-x: auto; margin: 16px 0 24px;}
table{width: 100%; border-collapse: collapse; font-size: 14px;}
th{text-align: left; padding: 8px 12px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(240,240,242,0.4); border-bottom: 1px solid var(--border);}
td{padding: 10px 12px; border-bottom: 1px solid var(--border); color: rgba(240,240,242,0.7);}

/* ── Shared chrome: breadcrumb, FAQ, references ────────────────────────────────
   The `.page-footer` strip — a second disclaimer plus an About/Disclaimer/Privacy
   link row, sitting directly above the real footer on all 177 pages — is GONE. It
   was the last remnant of the pre-ib-footer chrome and said nothing the footer
   doesn't. Do not reintroduce it; add links to scripts/gen-footer.mjs instead.

   The `.embed-light .ib-footer-*` and `[data-theme=light] .ib-footer-*` overrides
   are gone with it. The footer is now a fixed Deep Teal slab in BOTH themes
   (ib-shell.css), so a light-mode branch would paint dark ink on dark teal.
*/
.faq-item{border-top: 1px solid var(--border); padding: 18px 0;}
.faq-item:last-child{border-bottom: 1px solid var(--border);}
.faq-q{font-size: 15px; font-weight: 600; margin-bottom: 8px;}
.faq-a{font-size: 14px; color: rgba(240,240,242,0.65); line-height: 1.65;}
.embed-light .embed-promo{color:rgba(20,20,28,0.45);}
.embed-light body{background:var(--bg);}
[data-theme="light"] .faq-a{color:rgba(20,20,28,0.72);}

/* ── References ────────────────────────────────────────────────────────────────
   The citations had NO styling at all, and it showed. scripts/patch-calc-references
   was inserting the block before "the last </div> before <footer>", which on every
   one of the 20 calculator pages is the BREADCRUMB div — not #seo-content. So the
   citations rendered as breadcrumb text: 12px, mono, 35% opacity, and outside the
   .static-page measure. That is the "citations are the wrong font in light mode"
   bug; it was never a colour bug, it was a nesting bug.

   They now live inside #seo-content and are styled as what they are: a numbered
   source list under the SEO prose. Sized off the .static-page body copy so the two
   read as one document. */
/* The references, lifted onto their own surface. Emitted by patch-calc-references.mjs for
   the calcs listed in its CARD_CALCS set (TRT only for now) — the styling here is already
   site-wide, so rolling it out is a one-line change in that script, not a CSS change.

   `var(--surface)` rather than a literal #fff: --surface IS #ffffff on the light theme (the
   Surface White token — "cards, inputs and popovers on porcelain"), so this is a white card
   exactly as asked, but it follows the site's existing card idiom (.example-box) and so
   resolves to #18181c on the night theme instead of firing a white rectangle into a dark
   page. One rule, both themes, no [data-theme] branch needed. */
.ib-refs-card{background: var(--surface); border: 1px solid var(--border2); border-radius: 5px; padding: 22px 24px 8px; margin: 40px 0 24px;}
/* .static-page h2 carries a 40px top margin to separate it from the section above it. Inside
   the card that margin becomes dead space under the top edge — the card itself is the
   separator now. */
.ib-refs-card h2{margin-top: 0;}
@media (max-width: 767px){.ib-refs-card{padding: 18px 16px 6px;}}

.ref-list{margin: 4px 0 20px; padding-left: 22px;}
.ref-list li{font-size: 14px; line-height: 1.65; color: rgba(240,240,242,0.72); margin-bottom: 10px;}
.ref-list li::marker{color: rgba(240,240,242,0.35); font-size: 12px;}
.ref-list a{color: var(--teal); text-decoration: none;}
.ref-list a:hover{text-decoration: underline;}
.ref-note{font-size: 14px; line-height: 1.7; color: rgba(240,240,242,0.72); margin-bottom: 14px;}
.ref-foot{font-size: 13px; line-height: 1.65; color: rgba(240,240,242,0.45); margin-bottom: 8px;}
[data-theme="light"] .ref-list li,[data-theme="light"] .ref-note{color: rgba(20,20,28,0.78);}
[data-theme="light"] .ref-list li::marker{color: rgba(20,20,28,0.45);}
[data-theme="light"] .ref-foot{color: rgba(20,20,28,0.6);}
/* Instrument Teal is only 2.4:1 on porcelain — link text must use the deeper step. */
[data-theme="light"] .ref-list a{color: #0a7d73;}

.breadcrumb{font-size:12px;color:rgba(240,240,242,0.35);margin-bottom:20px;font-family:var(--mono);}
.breadcrumb a{color:rgba(240,240,242,0.65);text-decoration:none;}
.breadcrumb a:hover{color:var(--teal);text-decoration:underline;}
.breadcrumb span{margin:0 6px;color:rgba(240,240,242,0.25);}