/* =========================================================================
   Looks: two alternative appearances over the same components, chosen in the footer and remembered per browser.
   Papier (no attribute) is the default from tokens.css. Each look is a token override plus a few component rules;
   every colour stays a light-dark() pair so the theme toggle keeps working inside a look.
   ========================================================================= */

/* ---------- Instrument: neutral canvas, white bordered cards, one sans typeface, blue accent ---------- */
html[data-look="instrument"] {
  --bg:         light-dark(#f3f4f6, #101214);
  --panel:      light-dark(#ffffff, #181b1f);
  --surface:    light-dark(#ffffff, #1d2126);
  --surface-2:  light-dark(#e9ebef, #262a30);
  --grid:       light-dark(#e5e7eb, #262a30);
  --border:     light-dark(#dfe2e7, #2f343b);
  --axis:       light-dark(#c3c8cf, #434950);
  --mark-muted: light-dark(#cdd2d9, #434950);
  --text-3:     light-dark(#5f6672, #9aa3ad);
  --text-2:     light-dark(#454c57, #c3c9d1);
  --text-1:     light-dark(#111827, #f3f4f6);
  --accent:        light-dark(#1d5fd6, #60a5fa);
  --accent-strong: light-dark(#1646a8, #93c5fd);
  --radius-card: 10px; --radius-control: 6px; --radius-chip: 999px;
  --font-display: var(--font-ui);
  --display-scale: 1;
  --rule: 1px solid var(--border);
  --rule-axis: 1px solid var(--axis);
  --shadow-card: 0 1px 1px light-dark(rgb(17 24 39 / 0.05), rgb(0 0 0 / 0.35)),
                 0 3px 7px -4px light-dark(rgb(17 24 39 / 0.10), rgb(0 0 0 / 0.40)),
                 0 14px 30px -16px light-dark(rgb(17 24 39 / 0.20), rgb(0 0 0 / 0.65));
  --shadow-card-hover: 0 1px 1px light-dark(rgb(17 24 39 / 0.06), rgb(0 0 0 / 0.4)),
                       0 5px 11px -6px light-dark(rgb(17 24 39 / 0.14), rgb(0 0 0 / 0.45)),
                       0 22px 40px -18px light-dark(rgb(17 24 39 / 0.26), rgb(0 0 0 / 0.7));
}
html[data-look="instrument"] .display-56, html[data-look="instrument"] .display-40, html[data-look="instrument"] .display-28,
html[data-look="instrument"] .display-22, html[data-look="instrument"] .chart-frame__title, html[data-look="instrument"] .hero-figure,
html[data-look="instrument"] .kpi__value, html[data-look="instrument"] .prelim__value, html[data-look="instrument"] .empty__title,
html[data-look="instrument"] .choose__name, html[data-look="instrument"] .figure-block__value, html[data-look="instrument"] .wordmark__name,
html[data-look="instrument"] .fact__figure {
  font-family: var(--font-ui); font-weight: 600; letter-spacing: -0.01em;
}
/* The sans name is wider than the serif one at the same size; at 22 px it takes the room the serif takes, so the
   header tools stay on the top row. */
@media (min-width: 768px) {
  html[data-look="instrument"] .site-header .wordmark__name { font-size: 22px; }
  html[data-look="instrument"] .site-header .wordmark__domain { margin-top: -8px; }
}
html[data-look="instrument"] .chart-frame, html[data-look="instrument"] .kpi, html[data-look="instrument"] .picker,
html[data-look="instrument"] .prelim, html[data-look="instrument"] .figure-block, html[data-look="instrument"] .facts,
html[data-look="instrument"] .choose__card, html[data-look="instrument"] .club-card {
  border: 1px solid var(--border);
}
html[data-look="instrument"] .site-header { border-bottom: 1px solid var(--border); }
html[data-look="instrument"] .site-header::after, html[data-look="instrument"] .site-footer::before { display: none; }
html[data-look="instrument"] .site-footer { border-top: 1px solid var(--border); }
html[data-look="instrument"] .section--ruled { border-top: 1px solid var(--border); }
html[data-look="instrument"] .chart__plot { fill: var(--panel); }
html[data-look="instrument"] .club-bar { display: none; }

/* ---------- Broadsheet: printed sheets on the paper, section bands, inverted masthead, larger numbers ----------
   Depth as in print: each block is a sheet one step lighter than the paper, under its heavy rule, with a hard shadow
   offset down and to the right (no blur), as if laid on the page; a link moves a step further out under the pointer. */
html[data-look="broadsheet"] {
  --panel: var(--bg);
  /* In the dark the sheet is a clear step lighter than the paper and its bands, and the shadow only a step darker than
     the ground (black would read as a bar along the edge). */
  --sheet: light-dark(#fffdf9, #2a2723);
  --shadow-card: 3px 3px 0 light-dark(rgb(25 23 19 / 0.16), rgb(0 0 0 / 0.3));
  --shadow-card-hover: 5px 5px 0 light-dark(rgb(25 23 19 / 0.2), rgb(0 0 0 / 0.38));
  --wash: light-dark(#ece8de, #1d1b18);
  --display-scale: 1.18;
  --rule: 3px solid var(--text-1);
}
html[data-look="broadsheet"] .chart-frame, html[data-look="broadsheet"] .kpi, html[data-look="broadsheet"] .picker,
html[data-look="broadsheet"] .prelim, html[data-look="broadsheet"] .figure-block, html[data-look="broadsheet"] .facts,
html[data-look="broadsheet"] .choose__card, html[data-look="broadsheet"] .club-card, html[data-look="broadsheet"] .home__card,
html[data-look="broadsheet"] .fx-card, html[data-look="broadsheet"] .forum-auth, html[data-look="broadsheet"] .top-post,
html[data-look="broadsheet"] .fin-head-section, html[data-look="broadsheet"] .fin-head-section + #tabelle,
html[data-look="broadsheet"] .discussion--chart { background: var(--sheet); }
html[data-look="broadsheet"] .choose__card:hover, html[data-look="broadsheet"] .club-card:hover,
html[data-look="broadsheet"] .top-post:hover { transform: translate(-2px, -2px); }
html[data-look="broadsheet"] .site-header { background: light-dark(#191713, #f2eee6); color: light-dark(#f5f2eb, #151412); border-bottom: 0; }
html[data-look="broadsheet"] .site-header a, html[data-look="broadsheet"] .site-header .btn, html[data-look="broadsheet"] .site-header .search__field,
html[data-look="broadsheet"] .site-header .search__input, html[data-look="broadsheet"] .site-header .season-pick select { color: inherit; }
html[data-look="broadsheet"] .site-header .nav a { color: light-dark(#cfc8ba, #4f4a41); }
html[data-look="broadsheet"] .site-header .nav a[aria-current="page"], html[data-look="broadsheet"] .site-header .nav a:hover { color: inherit; }
html[data-look="broadsheet"] .site-header .season-pick select { border-bottom-color: light-dark(#4a463f, #c9c3b6); }
html[data-look="broadsheet"] .site-header .search__field { border-bottom-color: light-dark(#4a463f, #c9c3b6); }
html[data-look="broadsheet"] .site-header::after { display: none; }
/* The ball on the inverted masthead: paper face, ink panels, so its lines read against the dark ground. */
html[data-look="broadsheet"] .site-header .wordmark__face { fill: light-dark(#f5f2eb, #151412); stroke: light-dark(#f5f2eb, #151412); }
html[data-look="broadsheet"] .site-header .wordmark__panel { fill: light-dark(#191713, #f2eee6); }
html[data-look="broadsheet"] .site-header .wordmark__track { stroke-width: 2.4; }
/* Bands: every second section of a page, the league cards and the league table on the front. */
html[data-look="broadsheet"] .club-theme > section:nth-of-type(even), html[data-look="broadsheet"] .league-theme > section:nth-of-type(even),
html[data-look="broadsheet"] main > section:nth-of-type(even), html[data-look="broadsheet"] .choose, html[data-look="broadsheet"] .league-compare {
  background: var(--wash); box-shadow: 0 0 0 100vmax var(--wash); clip-path: inset(0 -100vmax); padding-block: var(--sp-5);
}
html[data-look="broadsheet"] .chart__plot { fill: transparent; stroke: var(--axis); }
html[data-look="broadsheet"] .choose { padding-block: var(--sp-4); }
html[data-look="broadsheet"] .site-header .prefs__menu .btn--primary { color: var(--bg); }
/* On the inverted masthead the icon buttons keep their light ink when pressed or hovered: a tint of it, not the paper. */
html[data-look="broadsheet"] .site-header .btn--icon:hover, html[data-look="broadsheet"] .site-header .btn--icon[aria-expanded="true"] { background: color-mix(in oklab, currentColor 16%, transparent); }
/* The menu is paper again: its tabs take their own colours back from the masthead's inherited ink. */
html[data-look="broadsheet"] .site-header .prefs__menu .segmented a { color: var(--text-2); }
html[data-look="broadsheet"] .site-header .prefs__menu .segmented a:hover, html[data-look="broadsheet"] .site-header .prefs__menu .segmented a[aria-current="page"] { color: var(--text-1); }
@media (prefers-reduced-motion: reduce) {
  html[data-look="broadsheet"] .choose__card:hover, html[data-look="broadsheet"] .club-card:hover, html[data-look="broadsheet"] .top-post:hover { transform: none; }
}