/* ChartHorizon — The Weekly Tape
   Cool-newsprint financial-broadsheet theme. Single source of truth for the index and every page.
   Type: Newsreader, self-hosted under /assets/fonts (zero third-party requests). */

/* The weight axis is clipped to 400–700 — the only weights this site sets. Declaring the
   real range stops the browser synthesising a face it can't reach. */
@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:400 700; font-display:swap;
  src:url('/assets/fonts/newsreader.woff2') format('woff2');
}
@font-face{
  font-family:'Newsreader'; font-style:italic; font-weight:400 700; font-display:swap;
  src:url('/assets/fonts/newsreader-italic.woff2') format('woff2');
}

:root{
  --paper:#f5f4f1; --ink:#17150f; --gold:#c8a24a; --gold-ink:#7d641e;
  --rule:#ddd9d0; --rule-strong:#17150f; --thead:#ecebe6;
  /* Both muted tones clear 4.5:1 on paper, card and quote-bg — muted-2 is the lighter
     step (4.79:1), not a lighter-than-AA one. See the Muted Floor rule in DESIGN.md. */
  --muted:#6b6356; --muted-2:#736b5c;
  --quote-bg:#efede7; --quote-ink:#4a443a; --card:#fbfbf9;
  --bull:#39744b; --bear:#a8503f;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  /* Prose measure: the text column is narrower than the sheet, so figures, boards and
     tables break out past it the way plates do in print. ~75 characters at 19px. */
  --measure:38rem;
}
*{box-sizing:border-box}
/* The paper is the design; opting out of dark tells Android's auto-dark not to invert it. */
html{-webkit-text-size-adjust:100%; color-scheme:light}
body{
  max-width:760px; margin:0 auto; padding:0 22px;
  background:var(--paper); color:var(--ink);
  font:19px/1.6 var(--serif);
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}

/* ---- focus ---- */
/* One ring everywhere. Foil Gold is only 2.19:1 on paper, so it fails 1.4.11 as an
   indicator — ink carries it on light ground, gold only where the ground is ink. */
:focus-visible{outline:2px solid var(--ink); outline-offset:2px; border-radius:2px}

/* ---- a11y utilities ---- */
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0}
.skip-link{position:absolute; left:50%; top:10px; transform:translateX(-50%); z-index:20; padding:10px 16px;
  background:var(--ink); color:var(--paper); font:700 11px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase;
  text-decoration:none; border:none; border-radius:999px; opacity:0; pointer-events:none}
.skip-link:focus-visible{opacity:1; pointer-events:auto; outline:2px solid var(--gold); outline-offset:2px}

/* ---- article typography ---- */
h1{font:600 clamp(34px,4.6vw,42px)/1.1 var(--serif); letter-spacing:-.6px; margin:.55em 0 .12em; text-wrap:balance}
h2{font:650 25px/1.25 var(--serif); letter-spacing:-.2px; margin:1.6em 0 .4em; padding-top:1.1em; border-top:1px solid var(--rule); text-wrap:balance}
/* broadsheet section opener: a short gold tick sits on the hairline that opens each section */
h2::before{content:""; position:absolute; margin-top:-1.1em; width:34px; border-top:2px solid var(--gold)}
h2{position:relative}
p{margin:.75em 0; text-wrap:pretty}
strong{color:var(--ink)}
.dek{color:var(--muted); font-style:italic; line-height:1.5; margin:.2em 0 1.35em; max-width:var(--measure)}
/* Prose holds the measure; figures, boards and tables break out to the full sheet. */
.post-body>:is(p,ul,ol,dl,blockquote){max-width:var(--measure)}
a{color:var(--gold-ink); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
a:hover{color:var(--ink); border-bottom-color:var(--gold)}
img{max-width:100%; height:auto; border-radius:6px; margin:18px 0; box-shadow:0 1px 14px rgba(23,21,15,.13)}
table{border-collapse:collapse; width:100%; font:14px/1.45 var(--sans); margin:14px 0; font-variant-numeric:tabular-nums lining-nums}
td,th{border:1px solid var(--rule); padding:8px 12px; text-align:left}
th{background:var(--thead); font-weight:600}
/* read marks for post tables — always paired with a glyph + word, never color alone (Read-Mark Rule) */
.mark-bull{color:var(--bull); font-weight:700}
.mark-bear{color:var(--bear); font-weight:700}
hr{border:none; border-top:1px solid var(--rule); margin:34px 0}
/* broadsheet pull quote: tone fill inside a full hairline — no accent side-stripe */
blockquote{border:1px solid var(--rule); background:var(--quote-bg); padding:12px 18px; margin:20px 0; border-radius:4px; color:var(--quote-ink)}
blockquote p{margin:.3em 0}
.post-disclaimer{font:italic 13px/1.55 var(--sans); color:var(--muted)}

/* ---- broadsheet masthead ---- */
.site-head{padding:38px 0 0; text-align:center}
.site-head .brand{display:inline-flex; align-items:center; gap:13px; text-decoration:none; color:inherit; border:none}
.site-head .mark{flex:none; width:clamp(30px,3.4vw,38px); height:auto}
.site-head .word{font:700 clamp(30px,4.4vw,42px)/1 var(--serif); letter-spacing:.1em; text-transform:uppercase}
.masthead-sub{font:11px/1 var(--sans); letter-spacing:.26em; text-transform:uppercase; color:var(--muted); margin-top:12px}
/* classic broadsheet tramline: a thick rule with a hairline riding 3px beneath it */
.masthead-rule{position:relative; border-top:2.5px solid var(--rule-strong); margin-top:15px}
.masthead-rule::after{content:""; position:absolute; left:0; right:0; top:3px; border-top:1px solid var(--rule-strong)}
.masthead-motto{font:italic 400 14px/1 var(--serif); color:var(--muted); text-align:center; padding:11px 0 1px}
.dateline{display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; padding:10px 0; border-bottom:1px solid var(--rule);
  font:11px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; font-variant-numeric:tabular-nums}
.dateline .site-nav{display:flex; gap:16px}
/* padding + negative margin keeps the layout identical while lifting tap targets ≥24px (WCAG 2.5.8) */
.dateline .site-nav a{color:var(--muted); text-decoration:none; border:none; padding:9px 4px; margin:-9px -4px}
.dateline .site-nav a:hover{color:var(--ink)}
.dateline .site-nav a.active,.dateline .site-nav a[aria-current="page"]{color:var(--ink); font-weight:600}
.dateline .edition{margin-left:auto; color:var(--muted)}
.dateline .support{display:inline-flex; align-items:center; gap:6px; color:var(--gold-ink); text-decoration:none; border:none; letter-spacing:.06em; padding:9px 4px; margin:-9px -4px}
.dateline .support svg{width:13px; height:13px; fill:currentColor; flex:none}
.dateline .support:hover{color:var(--ink)}
@media (max-width:560px){
  .site-head .word{font-size:24px}
  .masthead-sub{letter-spacing:.18em}
  .dateline{justify-content:center; gap:8px 14px}
  .dateline .edition{margin-left:0}
}

.site-foot{margin-top:54px; padding:22px 0 46px; border-top:1px solid var(--rule); font:13px/1.62 var(--sans); color:var(--muted)}
.site-foot strong{color:var(--ink)}
.site-foot .legal-links{margin-top:8px}
.site-foot a{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--rule)}
.site-foot a:hover{color:var(--ink)}

/* ---- index front page ---- */
.index-standfirst{font:italic 400 19px/1.5 var(--serif); color:var(--muted); margin:1.3em 0 1.7em; max-width:62ch; text-wrap:pretty}
/* section rule: a small caps label riding a strong hairline, broadsheet-style (an h2, so it carries the outline) */
.section-rule{display:flex; align-items:center; gap:14px; margin:0; padding-top:0; border-top:none;
  font:700 11px/1 var(--sans); letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.section-rule::before{content:none}
.section-rule::after{content:""; flex:1; border-top:2px solid var(--rule-strong)}

/* ---- index post list ---- */
.post-list{list-style:none; padding:0; margin:6px 0 0}
.post-list li{padding:20px 0; border-top:1px solid var(--rule)}
.post-list li:first-child{border-top:none}
/* a real dateline: which edition this is, then when it ran — so seven Ledger entries in a
   row read as a running series rather than as the same note posted seven times.
   Shared by the front page and /archive/. */
.post-dateline{display:block; font:700 11px/1.3 var(--sans); letter-spacing:.12em; text-transform:uppercase; font-variant-numeric:tabular-nums}
.post-edition{color:var(--gold-ink)}
.post-date{color:var(--muted-2)}
.post-dateline .sep{color:var(--muted-2)}
.post-list .post-headline{margin:0}
.post-list .post-link{display:inline-block; margin:.16em 0 0; font:600 25px/1.18 var(--serif); letter-spacing:-.2px; color:var(--ink); border:none; text-wrap:balance}
.post-list .post-link:hover{color:var(--gold-ink)}
.post-list .post-excerpt{margin:.3em 0 0; color:var(--muted); max-width:var(--measure)}
/* front-page lead: the most recent post reads as the broadsheet lead story, not a list row */
.post-list li:first-child{padding:16px 0 28px}
.post-list li:first-child .post-link{font-size:clamp(30px,3.8vw,38px); line-height:1.1; letter-spacing:-.5px; margin-top:.1em}
.post-list li:first-child .post-excerpt{font-size:19px; line-height:1.5; max-width:60ch}

/* back issues: the front page is capped, everything else lives on /archive/ */
.more-issues{margin:26px 0 0; padding-top:16px; border-top:2px solid var(--rule-strong); text-align:right;
  font:700 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase}
.more-issues a{color:var(--gold-ink); border:none; padding:9px 2px; margin:-9px 0}
.more-issues a:hover{color:var(--ink)}
.archive-year{margin:34px 0 0}
.archive-list{list-style:none; padding:0; margin:6px 0 0}
.archive-list li{display:flex; align-items:baseline; gap:4px 16px; flex-wrap:wrap; padding:12px 0; border-top:1px solid var(--rule)}
/* rem, not em: the dateline sets its own 11px, and the column has to clear the longest
   label ("HEDGERS' LEDGER · JUL 25") on one line so the headlines stay in a column */
.archive-list .post-dateline{flex:none; width:13rem; white-space:nowrap}
.archive-list .archive-link{font:600 19px/1.3 var(--serif); color:var(--ink); border:none; flex:1 1 16ch; text-wrap:balance}
.archive-list .archive-link:hover{color:var(--gold-ink)}
@media (max-width:560px){ .archive-list li{display:block} .archive-list .post-dateline{width:auto; margin-bottom:3px} }

/* ---- "Elsewhere in the paper": the links between editions, under every post ----
   Same dateline furniture as the index and /archive/ (see _includes/post-teaser.html),
   set one step down: this is a footer to the piece you just read, not a second front page. */
.post-more{margin:46px 0 0}
.post-more-list{list-style:none; padding:0; margin:6px 0 0}
.post-more-list li{padding:14px 0; border-top:1px solid var(--rule)}
.post-more-list li:first-child{border-top:none}
.post-more-list .post-link{display:inline-block; margin:.14em 0 0; font:600 19px/1.25 var(--serif);
  letter-spacing:-.15px; color:var(--ink); border:none; text-wrap:balance}
.post-more-list .post-link:hover{color:var(--gold-ink)}

/* ---- post body: broadsheet drop cap on the first paragraph ---- */
.post-body>p:first-of-type::first-letter{
  float:left; font:600 64px/48px var(--serif); color:var(--gold-ink);
  padding:4px 9px 0 0;
}

/* ---- legal pages (Impressum / Datenschutz) ---- */
.legal{font-size:16px}
.legal h1{margin:.4em 0 .1em}
.legal h2{font-size:20px; border-top:none; padding-top:0; margin:1.7em 0 .3em}
.legal p,.legal ul{color:var(--muted); margin:.3em 0; max-width:var(--measure)}
.legal strong{color:var(--ink)}
.legal .ph{color:var(--gold-ink)}
.legal .note{margin:18px 0 30px; padding:14px 18px; border:1px solid color-mix(in srgb,var(--gold) 35%,transparent); border-radius:10px; background:var(--quote-bg); font:13px/1.55 var(--sans); color:var(--muted)}
.legal .note strong{color:var(--gold-ink)}
.legal a.link{color:var(--gold-ink); border-bottom:1px solid color-mix(in srgb,var(--gold) 40%,transparent)}
.legal a.link:hover{color:var(--ink)}
.legal .back{display:inline-block; margin-top:36px}

/* ---- /dashboard/ — coming-soon notice (broadsheet, no hero-CTA) ---- */
.notice-head{text-align:center; margin-top:.4em}
.kicker{font:700 12px/1.3 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--gold-ink); margin:0}
.notice-head h1{margin:.16em 0 .1em}
.notice-head .dek{max-width:36ch; margin-left:auto; margin-right:auto}
.notice-rule{width:54px; border-top:2px solid var(--gold); margin:16px auto 0}
/* Release line — the masthead's own dateline idiom, set directly under the rule so a shipped
   build is visible on arrival instead of 4,800px down the page. Not a hero CTA: no button,
   no panel, just the edition's stand-first for the software. */
.dl-top{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:4px 15px;
  margin:17px 0 0; font:700 11px/1 var(--sans); letter-spacing:.12em; text-transform:uppercase;
  font-variant-numeric:tabular-nums lining-nums}
.dl-top-label{color:var(--muted)}
.dl-top a{color:var(--gold-ink); letter-spacing:.12em; padding:8px 2px; margin:-8px 0;
  border-bottom:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
.dl-top a:hover{color:var(--ink); border-bottom-color:var(--gold)}
.dash-reads{margin:30px 0; padding:18px 18px 20px; border:1px solid var(--rule); border-radius:12px; background:var(--card); text-align:center}
.dash-reads .label{display:block; font:700 11px/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:13px}
.dash-reads .fx-chips{justify-content:center}
.dash-close{text-align:center; font-style:italic; color:var(--muted); margin:30px 0 4px; text-wrap:balance}
.notfound{max-width:var(--measure); margin:28px auto 0; text-align:center; text-wrap:pretty}
.dash-close strong{font-style:normal; color:var(--ink)}

/* download block — three platform buttons (active link or "Coming soon" state) */
.dl{margin:34px 0 6px; text-align:center}
.dl-label{display:block; font:700 11px/1.3 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:15px}
.dl-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:440px; margin:0 auto}
.dl-btn{display:flex; flex-direction:column; align-items:center; gap:9px; padding:18px 10px 15px; border:1px solid var(--rule); border-radius:12px; background:var(--card); color:var(--ink); text-decoration:none; transition:border-color .14s, box-shadow .14s, transform .04s}
.dl-os-ico{width:27px; height:27px; fill:var(--ink); transition:fill .14s, opacity .14s}
.dl-os{font:700 15px/1 var(--sans)}
.dl-sub{font:600 10px/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); white-space:nowrap; font-variant-numeric:tabular-nums lining-nums}
/* active state: real download link */
a.dl-btn:hover{border-color:var(--gold); box-shadow:0 2px 10px rgba(23,21,15,.09)}
a.dl-btn:hover .dl-os-ico{fill:var(--gold-ink)}
a.dl-btn:hover .dl-sub{color:var(--gold-ink)}
a.dl-btn:active{transform:translateY(1px)}
/* coming-soon state: not yet downloadable */
.dl-btn--soon{background:var(--quote-bg); border-style:dashed; cursor:default}
.dl-btn--soon .dl-os-ico{fill:var(--muted-2); opacity:.6}
.dl-btn--soon .dl-os{color:var(--muted)}
.dl-note{font:italic 14px/1.5 var(--serif); color:var(--muted); margin:16px auto 0; max-width:42ch; text-wrap:balance}
/* first-run helper for unsigned builds — collapsed by default, launched state only */
.dl-firstrun{max-width:50ch; margin:16px auto 0; text-align:left; font:14px/1.55 var(--sans); color:var(--muted)}
/* padding lifts the disclosure control to a ≥24px target (WCAG 2.5.8) without moving the layout */
.dl-firstrun summary{cursor:pointer; text-align:center; font:600 11px/1.3 var(--sans); letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); list-style:none; padding:6px 0; border-radius:4px}
.dl-firstrun summary::-webkit-details-marker{display:none}
.dl-firstrun summary::after{content:" ▾"; color:var(--muted-2)}
.dl-firstrun[open] summary::after{content:" ▴"}
.dl-firstrun p{margin:13px 0 8px}
.dl-firstrun ul{margin:0; padding-left:1.15em; list-style:disc}
.dl-firstrun li{margin:5px 0}
.dl-firstrun b{color:var(--ink); font-weight:700}
.dl-firstrun code{font:12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--quote-bg); border:1px solid var(--rule); border-radius:4px; padding:1px 5px}
@media (max-width:420px){ .dl-grid{gap:8px} .dl-btn{padding:14px 6px 12px} .dl-os{font-size:14px} .dl-sub{font-size:9px; letter-spacing:.06em} }

/* dashboard product page — screenshot plates set as plates on the sheet */
.board{margin:30px 0}
.board img{width:100%; margin:0; display:block; border:1px solid var(--rule); border-radius:10px; box-shadow:0 1px 16px rgba(23,21,15,.10)}
.board figcaption{font:italic 15px/1.5 var(--serif); color:var(--muted); text-align:center; margin-top:11px; text-wrap:balance}
/* hero breaks out wider than the 760px column, bounded so it never causes horizontal scroll */
.board-hero{--bleed:clamp(0px, calc((100vw - 716px)/2 - 16px), 160px); margin:26px calc(-1*var(--bleed)) 32px}
.board-hero img{border-radius:12px}
@media (prefers-reduced-motion:no-preference){
  .board img{transition:box-shadow .25s ease}
  .board img:hover{box-shadow:0 6px 30px rgba(23,21,15,.13)}
}

/* ---- FX Map page (/fx/) ---- */
.fxmap{margin:18px 0 6px}
.fx-section-head{display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:6px; margin:0 0 14px}
/* an h2 visually set as the board's small-caps label — resets the global h2 chrome */
.fx-section-title{font:700 13px/1.2 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin:0; padding-top:0; border-top:none}
.fx-section-title::before{content:none}
.fxmap-meta{font:11.5px/1.4 var(--sans); letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.fx-board,.fx-pairs{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.fx-pairs{margin-top:14px}
.fx-col,.fx-pairshelf{border:1px solid var(--rule); border-radius:10px; padding:14px 16px; background:var(--card)}
.fx-col--bull{border-color:color-mix(in srgb,var(--bull) 40%,transparent)}
.fx-col--bear{border-color:color-mix(in srgb,var(--bear) 40%,transparent)}
.fx-col-head{display:flex; align-items:center; gap:8px; font:700 11.5px/1 var(--sans); letter-spacing:.07em; text-transform:uppercase; margin-bottom:12px}
.fx-col--bull .fx-col-head{color:var(--bull)}
.fx-col--bear .fx-col-head{color:var(--bear)}
.fx-count{font:600 11px/1 var(--sans); color:var(--muted); background:var(--quote-bg); border:1px solid var(--rule); border-radius:999px; padding:3px 7px; letter-spacing:0}
.fx-chips{display:flex; flex-wrap:wrap; gap:7px}
.fx-chip{font:13px/1 var(--sans); padding:8px 11px; border-radius:999px; background:var(--quote-bg); border:1px solid var(--rule); color:var(--ink); white-space:nowrap}
.fx-chip b{font-weight:700; margin-left:2px}
.fx-col--bull .fx-chip b{color:var(--bull)}
.fx-col--bear .fx-chip b{color:var(--bear)}
.fx-neutral-row{display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-top:12px}
.fx-neutral-label{font:700 11px/1 var(--sans); letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-right:2px}
.fx-chip--flat b{color:var(--muted)}
.fx-pairshelf-head{font:700 11.5px/1 var(--sans); letter-spacing:.07em; text-transform:uppercase; margin-bottom:3px}
.fx-pairshelf-head--bull{color:var(--bull)}
.fx-pairshelf-head--bear{color:var(--bear)}
.fx-pairshelf-note{font:11.5px/1.4 var(--sans); color:var(--muted); margin-bottom:11px}
.fx-pairlist{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.fx-pair{display:flex; flex-direction:column; gap:3px; padding:9px 11px; border-radius:8px; background:var(--quote-bg); border:1px solid var(--rule)}
.fx-pair-nm{font:600 13px/1 var(--sans); color:var(--ink)}
.fx-pair-sp{font:11.5px/1 var(--sans); color:var(--muted)}
.fx-pair--bull .fx-pair-sp{color:var(--bull)}
.fx-pair--bear .fx-pair-sp{color:var(--bear)}
/* clickable pair tiles — open the per-pair chart overlay */
button.fx-pair{margin:0; width:100%; text-align:left; font-family:inherit; cursor:pointer; position:relative; transition:border-color .12s, box-shadow .12s, transform .04s}
button.fx-pair::after{content:"\203A"; position:absolute; top:8px; right:11px; font:600 14px/1 var(--sans); color:var(--muted-2); opacity:.55; transition:opacity .12s, transform .12s}
button.fx-pair:hover{box-shadow:0 1px 6px rgba(23,21,15,.08)}
button.fx-pair:hover::after{opacity:1; transform:translateX(2px)}
button.fx-pair--bull:hover{border-color:var(--bull)}
button.fx-pair--bull:hover::after{color:var(--bull)}
button.fx-pair--bear:hover{border-color:var(--bear)}
button.fx-pair--bear:hover::after{color:var(--bear)}
button.fx-pair:active{transform:translateY(1px)}
/* an instruction, not a link — the leading glyph keeps it from reading as one */
.fx-pair-hint{color:var(--gold-ink)}
.fx-pair-hint::before{content:"\203A\00a0"}
.fx-empty{font:italic 13px/1.5 var(--sans); color:var(--muted); margin:2px 0 0}
.fx-method{margin:16px 0 0}
.fx-method p{font:12.5px/1.55 var(--sans); color:var(--muted); margin:.4em 0}
.fx-method strong{color:var(--ink)}
.fx-rate-wrap{overflow-x:auto}
/* Shown only where the ledger actually has to scroll, so the clipped edge is announced
   rather than discovered. Hidden from AT above the breakpoint via display:none. */
.fx-rate-scroll{display:none; font:italic 13px/1.5 var(--serif); color:var(--muted); margin:9px 0 0}
/* ledger numerals: aligned figures across every FX data surface (font: shorthand resets variant-numeric, so set it per element) */
.fxmap-meta,.fx-count,.fx-chip,.fx-chip b,.fx-pair-sp,.fx-pair-nm,.fx-rate-table{font-variant-numeric:tabular-nums lining-nums}
.fx-rate-table{border-collapse:collapse; width:100%; font:13px/1.4 var(--sans); margin:0}
.fx-rate-table th,.fx-rate-table td{border:1px solid var(--rule); padding:8px 11px; text-align:left; white-space:nowrap}
/* Bank and instrument are the only wide columns; letting the two of them wrap brings the
   whole ledger inside the 760px sheet, so nothing is clipped on a desktop read. */
.fx-rate-table :is(th,td):nth-child(3),.fx-rate-table :is(th,td):nth-child(4){white-space:normal; min-width:9ch}
.fx-rate-table th{background:var(--thead); font:600 11px/1.2 var(--sans); letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.fx-rate-cur{font-weight:700}
.fx-rate-value{background:var(--quote-bg); font-weight:600}
.fx-rate-bias{font-weight:700; text-align:right}
.fx-rate-bias--bull{color:var(--bull)}
.fx-rate-bias--bear{color:var(--bear)}
.fx-rate-bias--flat{color:var(--muted)}

/* ---- embedded market widgets (TradingView, /fx/ only — see privacy.html §6) ---- */
.tv-widget{margin:14px 0 8px}
.tv-ticker{margin:6px 0 4px}
.tv-widget .tradingview-widget-container{border:1px solid var(--rule); border-radius:10px; overflow:hidden; background:var(--card)}
/* TradingView injects `.tradingview-widget-copyright a { color:#b2b5be !important }` at
   runtime — 1.86:1 on paper, i.e. an attribution link nobody can read. !important is the
   only thing that outranks !important, and our selector is the more specific of the two.
   This is the one place in the sheet where it is warranted. */
.tv-widget .tradingview-widget-copyright,.fx-modal .tradingview-widget-copyright{font:11px/1.4 var(--sans); color:var(--muted); padding:7px 11px; text-align:right}
.tv-widget .tradingview-widget-copyright a,.fx-modal-foot a{color:var(--muted) !important; border:none; padding:5px 2px; border-radius:3px}
.tv-widget .tradingview-widget-copyright a:hover,.fx-modal-foot a:hover{color:var(--ink) !important}

/* TradingView blocked — privacy extension, DNS filter, corporate proxy. The frames never
   arrive, so hide the empty shells and print a first-party note where the data should be,
   rather than leaving a headed section standing over a gap. Toggled by the script on /fx/. */
.tv-fallback{display:none}
.no-tv .tv-widget{display:none}
.no-tv .fx-pair-hint{display:none}
.no-tv .tv-fallback{display:block; margin:14px 0 8px; padding:15px 18px; border:1px solid var(--rule);
  border-radius:10px; background:var(--quote-bg); font:14px/1.55 var(--sans); color:var(--muted)}
.no-tv .tv-fallback strong{color:var(--ink)}

/* per-pair chart overlay (TradingView Advanced Chart) — a native <dialog>: the platform
   supplies the focus trap, Escape handling and focus restore; ::backdrop dims the sheet */
.fx-modal{flex-direction:column; width:min(960px,calc(100vw - 48px)); height:min(78vh,720px); padding:0;
  background:var(--card); border:1px solid var(--rule); border-radius:12px;
  box-shadow:0 18px 60px rgba(23,21,15,.35); overflow:hidden; color:inherit}
.fx-modal[open]{display:flex}
.fx-modal::backdrop{background:rgba(23,21,15,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
.fx-modal-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-top:3px solid var(--gold); border-bottom:1px solid var(--rule)}
.fx-modal[data-dir="bull"] .fx-modal-head{border-top-color:var(--bull)}
.fx-modal[data-dir="bear"] .fx-modal-head{border-top-color:var(--bear)}
.fx-modal-title{font:700 15px/1 var(--sans); letter-spacing:.03em; color:var(--ink)}
.fx-modal-x{appearance:none; width:30px; height:30px; border-radius:8px; border:1px solid var(--rule); background:var(--quote-bg); color:var(--muted); font:13px/1 var(--sans); cursor:pointer}
.fx-modal-x:hover{color:var(--ink); border-color:var(--gold)}
.fx-modal-body{flex:1; min-height:0}
.fx-modal-body .tradingview-widget-container,.fx-modal-body .tradingview-widget-container__widget{height:100%; width:100%}
.fx-modal-foot{font:11px/1.4 var(--sans); color:var(--muted); padding:6px 14px; text-align:right; border-top:1px solid var(--rule)}
/* the chart never arrived — say so inside the panel rather than showing an empty frame,
   and let the panel shrink to the message instead of framing 700px of nothing */
.fx-modal:has(.fx-modal-empty){height:auto}
.fx-modal-empty{display:flex; flex-direction:column; justify-content:center; height:100%; padding:26px 30px; text-align:center}
.fx-modal-empty p{font:italic 16px/1.55 var(--serif); color:var(--muted); margin:.35em 0; max-width:44ch; margin-inline:auto; text-wrap:pretty}
.fx-modal-empty strong{font-style:normal; color:var(--ink)}

@media (max-width:560px){
  .fx-board,.fx-pairs{grid-template-columns:1fr}
  .fx-modal{width:calc(100vw - 24px); height:82vh}
  /* below this width the ledger genuinely has to scroll — announce it */
  .fx-rate-scroll{display:block}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important}
}