/* tdx-chrome.css — the injected page chrome, as CSS instead of inline styles. * * WHY THIS FILE EXISTS * -------------------- * inject-breadcrumbs.js, inject-toc.js and inject-tldr-boxes.js each stamped a * full stylesheet into every element's style="" attribute, including * `max-width:1100px;margin:0 auto`. That width was chosen once and never * matched any of the site's fourteen shells, so on every page the chrome * established its own column a few pixels off the content column. At a 1280px * viewport a premium page stepped 43 → 83 → 67 → 83 → 67 down the left edge; * a calculator page jumped 68px. That stepping is what this file removes. * * THE CONTRACT * ------------ * Chrome never picks its own width. It asks the shell it landed in, via two * inherited custom properties: * * --tdx-measure the content column cap. `none` means "fill my parent", * which is correct wherever the shell itself is already * capped (premium-main, .wrap). A length is required where * the width lives on the *sections* rather than on main — * 391 pages do that, and inject-layout-tokens.js stamps * their value onto . * --tdx-gutter side padding, so chrome TEXT lines up with section TEXT. * Cards (.tdx-toc, .tdx-tldr) keep their own inner padding * because their box edge is the line the eye follows, not * their text. * * ORDER MATTERS: this must load AFTER tdx-theme.css and BEFORE * tdx-content-dark-fix.css, which repaints these same blocks with !important. * * Sub-elements are targeted by descendant element selectors, deliberately. * The emitters do not put classes on the

//
, and adding * them would be a second risky change to the same scripts in the same pass. */ :root { /* Layout ------------------------------------------------------------ */ /* 1100px is the LEGACY value the emitters hardcoded. It is the default on purpose: a page inject-layout-tokens.js cannot classify keeps exactly the behaviour it had before this refactor, so an unrecognised shell is never made worse. Pages it CAN classify are stamped with something better. */ --tdx-measure: 1100px; --tdx-gutter: 1.5rem; --tdx-measure-narrow: 760px; /* Chrome palette. These are the exact values the emitters hardcoded, so landing this file changes nothing; only their expression moves. */ --tdx-chrome-surface: #fbf7ec; --tdx-chrome-border: #d6cdba; --tdx-chrome-ink: #1b3a2d; --tdx-chrome-quiet: #6b6353; --tdx-chrome-accent: #a8862f; --tdx-chrome-body: #2c2416; --tdx-chrome-muted: #4a4235; --tdx-chrome-radius: 8px; --tdx-chrome-sans: Lato, Arial, sans-serif; --tdx-chrome-serif: 'Source Serif Pro', 'Source Serif 4', Georgia, serif; } /* The shared column. Every injected block gets exactly this and nothing width-related of its own. */ .tdx-breadcrumb, .tdx-reviewed-meta, .tdx-tldr, .tdx-toc, .tdx-series-nav { max-width: var(--tdx-measure); margin-inline: auto; box-sizing: border-box; } /* ------------------------------------------------------------------ * * Breadcrumb * * NOTE: `.tdx-breadcrumb` (singular) had NO light-mode CSS anywhere * * before this file — only dark-mode overrides in tdx-content-dark-fix. * * The list-reset and `display:inline` rules below are load-bearing: * * without them 657 pages render decimal-numbered crumbs stacked one * * per line. Do not trim them as redundant. * * ------------------------------------------------------------------ */ .tdx-breadcrumb { padding: 14px var(--tdx-gutter) 0; font-family: var(--tdx-chrome-sans); font-size: .84rem; line-height: 1.5; } .tdx-breadcrumb ol { list-style: none; margin: 0; padding: 0; } .tdx-breadcrumb li { display: inline; } .tdx-breadcrumb li[aria-current="page"] { color: var(--tdx-chrome-quiet); } .tdx-breadcrumb a { color: var(--tdx-chrome-ink); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; } .tdx-breadcrumb a:hover, .tdx-breadcrumb a:focus-visible { border-bottom-color: currentColor; } .tdx-breadcrumb span[aria-hidden="true"] { margin: 0 8px; color: var(--tdx-chrome-accent); } /* ------------------------------------------------------------------ * * Reviewed-by / date line * * ------------------------------------------------------------------ */ .tdx-reviewed-meta { margin-block: 4px 0; padding: 0 var(--tdx-gutter); font-family: var(--tdx-chrome-sans); font-size: .72rem; line-height: 1.5; color: var(--tdx-chrome-quiet); } .tdx-reviewed-meta a { color: inherit; text-decoration: underline; text-decoration-color: var(--tdx-chrome-border); } /* ------------------------------------------------------------------ * * Card base — .tdx-toc and .tdx-tldr were byte-identical in surface, * * border, radius and font. They differ by one 4px accent bar. * * ------------------------------------------------------------------ */ .tdx-tldr, .tdx-toc { background: var(--tdx-chrome-surface); border: 1px solid var(--tdx-chrome-border); border-radius: var(--tdx-chrome-radius); font-family: var(--tdx-chrome-sans); } /* ------------------------------------------------------------------ * * "In a nutshell" * * ------------------------------------------------------------------ */ .tdx-tldr { margin-block: 1.2rem 1.4rem; /* Horizontal padding is the shell gutter, not a value of its own, so the card's TEXT lands on the same line as body copy — not 3px off it. */ padding: 1rem var(--tdx-gutter); border-inline-start: 4px solid var(--tdx-chrome-ink); color: var(--tdx-chrome-body); line-height: 1.65; } .tdx-tldr > p { margin: .25rem 0; font-size: .98rem; } .tdx-tldr > p:first-child { font-family: var(--tdx-chrome-serif); color: var(--tdx-chrome-ink); margin: 0 0 .45rem; font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; } /* ------------------------------------------------------------------ * * Table of contents * * The `list-style:none` on summary is load-bearing: the emitter renders * * its own gold ▸, so without it BOTH arrows show on 579 pages. * * ------------------------------------------------------------------ */ .tdx-toc { margin-block: 14px 0; padding: 14px var(--tdx-gutter); font-size: .92rem; line-height: 1.6; color: var(--tdx-chrome-muted); } .tdx-toc summary { cursor: pointer; font-weight: 700; color: var(--tdx-chrome-ink); font-family: var(--tdx-chrome-serif); font-size: 1rem; list-style: none; } .tdx-toc summary::-webkit-details-marker { display: none; } .tdx-toc summary > span:first-child { display: inline-block; margin-right: .4rem; color: var(--tdx-chrome-accent); } .tdx-toc ol { margin: .6rem 0 .2rem; padding: 0 0 0 1.2rem; list-style: decimal; color: var(--tdx-chrome-ink); } .tdx-toc li { margin: .18rem 0; } .tdx-toc a { color: var(--tdx-chrome-ink); text-decoration: none; border-bottom: 1px solid var(--tdx-chrome-border); } .tdx-toc a:hover, .tdx-toc a:focus-visible { border-bottom-color: var(--tdx-chrome-accent); } /* ------------------------------------------------------------------ * * Injected markets ticker * * On 26 pages it is injected as a direct child of .options-shell, * * which is a two-column grid (minmax(0,1fr) 300px). The ticker then * * claimed column 1 and pushed
into the 300px rail — main copy * * rendering 300px wide at a 1280px viewport. Spanning every column * * puts it on its own row and hands the content column back. Inert on * * the 81 pages where its parent is not a grid. * * ------------------------------------------------------------------ */ .tdx-markets-ticker { grid-column: 1 / -1; } /* ------------------------------------------------------------------ * * Narrow reading measure — deliberate, not drift. Sources and related * * links are set narrower than body copy on purpose. * * ------------------------------------------------------------------ */ .tdx-sources, .tdx-related { max-width: var(--tdx-measure-narrow); } /* Print: tdx-theme.css forces max-width:none on the shells by name. These blocks must release their column too or they print as narrow strips. */ @media print { .tdx-breadcrumb, .tdx-reviewed-meta, .tdx-tldr, .tdx-toc, .tdx-series-nav { max-width: none !important; margin-inline: 0 !important; padding-inline: 0 !important; } }