/* TSM Interactive — shared tokens and components. Every tool links this first, then its own CSS.
   Brand: TSM green #033303, orange #e8753a, paper #f2f2ee. Display: Zilla Slab. Body: IBM Plex Sans. Data: IBM Plex Mono. */
:root {
  color-scheme: light;
  --bg: #f2f2ee; --panel: #fbfbf8; --ink: #14201a; --muted: #56625b; --faint: #6f7a73; --rule: #d3d6cd; --chip: #e7e9e1;
  --brand: #033303; --brand-ink: #033303; --accent: #e8753a;
  --sea: #d6e1e1; --land: #e9e4d4; --coast: #97a197; --grat: #c5d0d0;
  --blue: #1b4fd4; --blue-soft: rgba(27, 79, 212, .12); --red: #c62828; --red-soft: rgba(198, 40, 40, .1);
  --good: #2c7a4b; --warn: #8f5d0f; --bad: #b3261e;
  --focus: #bf5214;
  --axis-font: 400 11px var(--mono); --axis-ink: var(--muted); --axis-line: var(--faint);
  /* categorical series (use in order) */
  --c1: #1b4fd4; --c2: #cf4d12; --c3: #0c8474; --c4: #a1487a; --c5: #a88000; --c6: #6a4fb5; --c7: #2c6d8a; --c8: #6b5b3e;
  /* actors */
  --prc: #b3261e; --roc: #0c8474; --us: #1b4fd4; --jp: #a1487a; --ph: #a88000; --ccg: #b0306e; --ally: #2c6d8a;
  --display: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0c120e; --panel: #121a15; --ink: #dfe7e1; --muted: #9daba2; --faint: #85928a; --rule: #2a382f; --chip: #18221c;
    --brand-ink: #8fcf9d; --accent: #f08a52;
    --sea: #0f1b1c; --land: #1c2621; --coast: #3b4a42; --grat: #17272a;
    --blue: #72a0ff; --blue-soft: rgba(114, 160, 255, .15); --red: #ff5f56; --red-soft: rgba(255, 95, 86, .12);
    --good: #4fbf7d; --warn: #e0a43a; --bad: #ff6b5e;
    --focus: #f08a52;
    --c1: #72a0ff; --c2: #ff8a3d; --c3: #2cc2ac; --c4: #d77ab0; --c5: #efc12f; --c6: #a68ef0; --c7: #63b3d6; --c8: #c8b48a;
    --prc: #ff5a4e; --roc: #2cc2ac; --us: #72a0ff; --jp: #d77ab0; --ph: #efc12f; --ccg: #ef6aa6; --ally: #63b3d6;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--body); padding-inline: 20px; overflow-wrap: break-word; }
@media (max-width: 520px) { body { padding-inline: 12px; } }
button { font: inherit; color: inherit; }
a { color: var(--blue); }
:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
/* One focus ring everywhere, even where a tool reset outlines. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible, [role="option"]:focus-visible { outline: 2px solid var(--focus, var(--accent)) !important; outline-offset: 2px; }
svg :focus-visible { outline: 2px solid var(--focus, var(--accent)) !important; outline-offset: 1px; }
.btn.solid:focus-visible { outline-offset: 3px; }
.wrap { max-width: 1400px; margin: 0 auto; }
.fine { font-size: 12px; color: var(--muted); margin: 0; }
.muted { color: var(--muted); }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0; }
h1, h2, h3 { font-family: var(--display); text-wrap: balance; }

/* Site chrome (injected by shared/js/chrome.js) */
.tsm-head { max-width: 1400px; margin: 0 auto; padding-block: 16px 12px; display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; border-bottom: 3px solid var(--accent); }
.tsm-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.tsm-brand img { width: 52px; height: 52px; }
.tsm-org { margin: 0; font-family: var(--display); font-weight: 600; font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-ink); }
.tsm-title { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3.4vw, 38px); line-height: 1.02; }
.tsm-sub { margin: 4px 0 0; color: var(--muted); max-width: 70ch; }
.tsm-crumbs { font-size: 12.5px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.tsm-crumbs a { color: var(--muted); text-decoration: none; border: 1px solid var(--rule); border-radius: 3px; padding: 6px 10px; }
.tsm-crumbs a:hover { border-color: var(--muted); color: var(--ink); }
.tsm-foot { max-width: 1400px; margin: 36px auto 0; padding-block: 16px 28px; border-top: 1px solid var(--rule); display: flex; gap: 12px; align-items: center; font-size: 12.5px; color: var(--muted); }
.tsm-foot img { width: 34px; height: 34px; }
.tsm-foot p { margin: 0; }

/* Buttons */
.btn { border-radius: 3px; padding: 7px 13px; cursor: pointer; font-weight: 600; font-size: 13px; border: 1px solid var(--rule); background: transparent; }
.btn:hover { border-color: var(--muted); }
.btn.solid { background: var(--brand); color: #f2f2ee; border-color: var(--brand); }
.btn.solid:hover { background: #0b4a17; }
@media (prefers-color-scheme: dark) { .btn.solid { border-color: var(--brand-ink); } }
.btn[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); }
.btn:disabled { opacity: .4; cursor: default; }
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.choices button { text-align: left; padding: 7px 9px; border: 1px solid var(--rule); background: transparent; border-radius: 3px; cursor: pointer; font-size: 12.5px; line-height: 1.25; }
.choices button:hover { border-color: var(--muted); }
.choices button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-soft); }

/* Layout */
.layout { max-width: 1400px; margin: 16px auto 0; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
@media (max-width: 1020px) { .layout { grid-template-columns: minmax(0, 1fr); } }
.stage { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card { background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; }
.panel { background: var(--panel); border: 1px solid var(--rule); border-radius: 4px; display: flex; flex-direction: column; }
.sec { padding: 14px 16px; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 10px; }
.sec:last-child { border-bottom: 0; }
.readout { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; margin: 0; }
.readout dt { color: var(--muted); } .readout dd { margin: 0; }

/* Status box */
.status { border-radius: 4px; padding: 10px 12px; border: 1px solid var(--rule); display: flex; flex-direction: column; gap: 3px; }
.status b { font-family: var(--display); font-size: 21px; line-height: 1.1; }
.status span { font-size: 12.5px; color: var(--muted); }
.status[data-s="good"] { border-color: var(--good); } .status[data-s="good"] b { color: var(--good); }
.status[data-s="warn"] { border-color: var(--warn); } .status[data-s="warn"] b { color: var(--warn); }
.status[data-s="bad"] { border-color: var(--bad); background: var(--red-soft); } .status[data-s="bad"] b { color: var(--bad); }

/* Toggles and sliders */
.tg { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; padding: 6px 4px; border-radius: 3px; cursor: pointer; position: relative; }
.tg:hover { background: var(--chip); }
.tg input { position: absolute; opacity: 0; pointer-events: none; }
.tg .sw { width: 30px; height: 17px; border-radius: 9px; background: var(--rule); position: relative; margin-top: 2px; transition: background .15s; }
.tg .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: var(--panel); transition: transform .15s; }
.tg input:checked + .sw { background: var(--brand-ink); }
.tg input:checked + .sw::after { transform: translateX(13px); }
.tg input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.tg .t { font-size: 13px; line-height: 1.3; }
.tg .t small { display: block; color: var(--muted); font-size: 11.5px; }
.slider { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.slider .sl-h { display: flex; justify-content: space-between; gap: 8px; }
.slider output { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.slider input { width: 100%; accent-color: var(--brand-ink); }
.slider small { color: var(--muted); font-size: 11.5px; }

/* Map basics (mapkit.drawBasemap) */
.mapbox { position: relative; background: var(--sea); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.mapbox svg { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.tsm-sea { fill: var(--sea); }
.tsm-land { fill: var(--land); stroke: var(--coast); stroke-width: .6; vector-effect: non-scaling-stroke; }
.tsm-grat line { stroke: var(--grat); stroke-width: .6; vector-effect: non-scaling-stroke; }
.tsm-grat text { font: 9.5px var(--mono); fill: var(--faint); }
.t-label { font: 10.5px var(--mono); paint-order: stroke; stroke: var(--sea); stroke-width: 3px; stroke-linejoin: round; }
.t-place { font: 10.5px var(--body); fill: var(--muted); }
.t-sea { font: italic 13px var(--body); fill: var(--faint); letter-spacing: .08em; }
/* Tooltips: one look across tools. Title in <b>, meta lines in .tt-d or small, links as .xlink. */
.tooltip { position: absolute; pointer-events: none; background: var(--panel); color: var(--ink); border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: 4px; padding: 7px 10px; font: 12.5px/1.4 var(--body); max-width: min(280px, calc(100vw - 32px)); box-shadow: 0 6px 20px rgba(0, 0, 0, .18); z-index: 20; }
.tooltip[hidden] { display: none; }
.tooltip b:first-child { font-family: var(--display); font-weight: 600; font-size: 14px; }
.tooltip .tt-d, .tooltip small { display: block; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.tooltip.pinned, .tooltip .xlink { pointer-events: auto; }
.xlink { display: inline-block; font-size: 12px; font-weight: 600; color: var(--blue); text-decoration: none; margin-top: 4px; white-space: nowrap; }
.xlink:hover { text-decoration: underline; }
.xlinks { display: flex; flex-wrap: wrap; gap: 4px 12px; }
/* Chart axes: shared type and ink. Tools add class="tsm-axis" to an axis <g>, or use the tokens. */
.tsm-axis text, svg text.tsm-axis { font: var(--axis-font); fill: var(--axis-ink); }
.tsm-axis line, .tsm-axis path { stroke: var(--axis-line); }
/* Export bar (shared/js/export.js) */
.tsm-export { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.tsm-export .btn { font-size: 12px; padding: 5px 10px; font-weight: 600; color: var(--muted); }
.tsm-export .btn:hover { color: var(--ink); }

/* Tables and pills */
.tablewrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 4px; background: var(--panel); }
.tablewrap table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.tablewrap th, .tablewrap td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tablewrap th { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pill { display: inline-block; font-family: var(--mono); font-size: 10.5px; padding: 1px 6px; border-radius: 9px; border: 1px solid currentColor; margin: 1px 3px 1px 0; white-space: nowrap; }
.notional { font-family: var(--mono); font-size: 10.5px; color: var(--warn); border: 1px dashed var(--warn); border-radius: 3px; padding: 0 4px; }

/* Long-form sections under a tool */
.below { max-width: 1400px; margin: 30px auto 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; }
@media (max-width: 1020px) { .below { grid-template-columns: minmax(0, 1fr); } }
.below h2 { font-weight: 700; font-size: 24px; margin: 0 0 8px; }
.below p { margin: 0 0 10px; max-width: 68ch; }
.src { font-size: 12.5px; color: var(--muted); padding-left: 1.1em; margin: 0; display: flex; flex-direction: column; gap: 6px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }