/* ART/GTO page layer for the static tool pages (preflop range pages, /gto-solutions, the free tools), in the Notation identity
   (board: marketing/identity/unified-a; tokens: /brand/brand.css). Looks only: page text, titles, URLs and structured data come
   unchanged from the build scripts (tools/build_range_pages.py, build_solutions_page.py, build_tool_pages.py).
   Range grids and action swatches are solver data: their colours come inline from the build script and are never touched here. */
@import url("/brand/brand.css");

:root {
  /* the old names stay (tools-taste.css reads them); the values are the brand's */
  --paper: var(--b-white); --paper-raised: var(--b-paper); --paper-inset: #E6E8F2;
  --brd: var(--b-rule); --brd-strong: var(--b-ink);
  --ink: var(--b-ink); --ink-dim: var(--b-ink-2); --ink-faint: #4A4D70;
  --felt: var(--b-klein); --felt-mid: var(--b-klein);
  --brass: var(--b-klein); --brass-text: var(--b-klein); --brass-bright: var(--b-acid);

  --sans: var(--b-display);      /* Archivo at normal width for UI words; titles use the expanded cut */
  --serif: var(--b-serif);
  --mono: var(--b-mono);

  /* type scale */
  --t-display: var(--b-t-title, clamp(28px, 3.4vw, 48px));   /* brand type scale (brand/brand.css) */
  --t-h2: var(--b-t-h2, clamp(24px, 2.8vw, 38px));
  --t-lead: var(--b-t-lead, clamp(17px, 1.3vw, 19px));
  --t-body: 17px;
  --t-data: 12.5px;
  --t-label: 11px;

  /* space */
  --s1: 6px; --s2: 12px; --s3: 24px; --s4: 32px; --s5: 64px;
  --field-pad: var(--s5);
  --win-bar: 28px;
  --win-frame: 3px;

  /* motion */
  --ease-link: cubic-bezier(.12, .23, .5, 1);
  --dur-link: .35s;
  --ease-spring: var(--b-ease);
  --dur-spring: var(--b-dur);
}
@media (max-width: 640px) { :root { --field-pad: var(--s4); } }

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; }
html, body { margin: 0; }
body { background: var(--b-white); color: var(--b-ink); font: 400 var(--t-body)/1.5 var(--b-serif); -webkit-font-smoothing: antialiased; counter-reset: sec; }
a { color: var(--b-klein); text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: color var(--dur-link) var(--ease-link), text-underline-offset var(--dur-link) var(--ease-link); }
a:hover { color: var(--b-verm-deep); text-underline-offset: 5px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
code { font: 500 .82em/1 var(--b-mono); background: var(--b-paper); padding: 2px 5px; }

/* full-bleed flat fields behind blocks, without changing the markup */
.field-felt, .cols, .viewer.bottom { background: var(--b-klein); box-shadow: 0 0 0 100vmax var(--b-klein); clip-path: inset(0 -100vmax); }
.field-ink, .faq, h2:has(+ .faq) { background: var(--b-ink); box-shadow: 0 0 0 100vmax var(--b-ink); clip-path: inset(0 -100vmax); }
.cols :focus-visible, .viewer.bottom :focus-visible, .faq :focus-visible { outline-color: var(--b-acid); }

/* white field: the claim */
main, main.wrap { padding-top: var(--s3); }
.crumbs { font: 500 11px/1.4 var(--b-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin: var(--s2) 0 var(--s4); }
.crumbs a { color: var(--b-klein); }
h1 { font: 900 var(--t-display)/.9 var(--b-display); font-stretch: 125%; letter-spacing: -.02em; text-transform: uppercase; margin: 0 0 var(--s4); max-width: 26ch; text-wrap: balance; }
h1 small { display: block; margin-top: var(--s3); max-width: 64ch; font: 500 var(--t-data)/1.5 var(--b-mono); font-stretch: 100%; letter-spacing: .03em; text-transform: none; color: var(--ink-faint); }
/* Notation: every section title is numbered, §1 … on a 2 px rule, like a journal page */
main h2 { counter-increment: sec; display: grid; grid-template-columns: 3.2em minmax(0, 1fr); align-items: baseline; border-top: 2px solid currentColor; padding-top: 14px;
  font: 900 var(--t-h2)/.98 var(--b-display); font-stretch: 125%; letter-spacing: -.01em; text-transform: uppercase; margin: var(--s5) 0 var(--s4); }
main h2::before { content: "§" counter(sec); font: 400 .62em/1 var(--b-serif); font-stretch: 100%; letter-spacing: 0; text-transform: none; }
h3 { font: 700 20px/1.25 var(--b-serif); margin: var(--s3) 0 var(--s1); }
.lead { font: 400 var(--t-lead)/1.4 var(--b-serif); color: var(--b-ink); max-width: 52ch; margin: 0 0 var(--s4); }

/* a range page is a tool, not a pitch: one-line title, the chart in the first screen, the summary under it */
main:has(> h1.compact) .crumbs { margin: 0 0 var(--s2); }
h1.compact { font-size: var(--b-t-title, clamp(28px, 3.4vw, 48px)); line-height: .95; max-width: none; margin: 0 0 var(--s3); }
h1.compact small { margin-top: var(--s2); }
h1.compact + h2 { margin-top: var(--s4); }
h1 + .cols { padding-top: var(--s4); }
.cols + .lead { margin-top: var(--s4); }
.rows + .intro, .tw + .intro { margin-top: var(--s5); }
@media (max-width: 640px) { h1 + .cols { padding: var(--s3) 0; } h1.compact { margin-bottom: var(--s2); } main h2 { grid-template-columns: 2.6em minmax(0, 1fr); } }

/* buttons: the vermilion answer, squared, mono */
.btn { position: relative; display: inline-flex; align-items: center; gap: .5em; padding: 14px 20px; background: var(--b-verm); color: var(--b-ink) !important;
  font: 700 13px/1 var(--b-mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  transition: background-color .2s, color .2s, transform var(--b-dur) var(--b-ease); }
.btn:hover { background: var(--b-ink); color: var(--b-white) !important; transform: translateY(-2px); }

/* windows: 3 px ink frame, ink title bar with a [§n] number, white body */
.cols > div:first-child { background: var(--b-ink); padding: 0 var(--win-frame) var(--win-frame); }
.viewer.top::before, .cols > div:first-child::before { display: block; height: var(--win-bar); margin: 0 calc(-1 * var(--win-frame)); padding: 0 12px; background: var(--b-ink); color: var(--b-white);
  font: 600 var(--t-label)/var(--win-bar) var(--b-mono); letter-spacing: .08em; text-transform: uppercase; }
.viewer.top::before { content: "ART/GTO Viewer · this spot"; }
.cols > div:first-child::before { content: "Fig. 1 · Solver strategy · 169 hands"; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cols > div { min-width: 0; }
@media (max-width: 520px) { .viewer.top::before, .cols > div:first-child::before { font-size: 10px; letter-spacing: .04em; padding: 0 8px; } }
.viewer.top { margin: 0 0 var(--s5); max-width: 760px; background: var(--b-white); border: var(--win-frame) solid var(--b-ink); border-top: 0; padding: 0; }
.viewer.top .btn { margin: var(--s3) var(--s3) 0; }
.viewer.top p { margin: 0; padding: var(--s3); font: 400 var(--t-data)/1.6 var(--b-mono); color: var(--ink-dim); }
.viewer b { white-space: nowrap; font-weight: 600; color: var(--b-ink); }

/* Klein field: the chart */
.cols { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s4); align-items: start; padding: var(--field-pad) 0; margin: 0; color: var(--b-white); }
@media (max-width: 820px) { .cols { grid-template-columns: 1fr; } }
.cols > div:first-child .grid, .cols > div:first-child .note { background: var(--b-white); margin: 0; }
.cols > div:first-child .grid { padding: var(--s2); }
.cols > div:first-child .note { padding: 0 var(--s2) var(--s2); color: var(--ink-faint); }
.cols > div:first-child .note a { color: var(--b-klein); }
/* the grid: cell colours (inline, from the build script), size and labels as before; only the corners are squared */
.grid { border-collapse: separate; border-spacing: 2px; width: 100%; table-layout: fixed; }
.grid td { height: 36px; border-radius: 0; text-align: center; font: 600 11px/1 var(--b-mono); font-stretch: 87.5%; color: #fff; padding: 0; overflow: hidden; }
.grid td span { text-shadow: 0 0 3px rgba(0, 0, 0, .55); }
.grid td.lt span { color: #1B1810; text-shadow: 0 0 3px rgba(251, 247, 234, .9); }
.grid td.out { background: var(--paper-inset); }
.grid td.out span { color: var(--ink-faint); text-shadow: none; font-weight: 500; }
@media (max-width: 520px) { .grid td { height: 24px; font-size: 8px; font-stretch: 75%; } .grid { border-spacing: 1px; } .cols > div:first-child .grid { padding: 4px; } }

/* the action-share table is a window: its header row is the title bar */
.tot { border-collapse: collapse; width: 100%; background: var(--b-white); color: var(--b-ink); outline: var(--win-frame) solid var(--b-ink); outline-offset: 0; }
.tot thead th { background: var(--b-ink); color: var(--b-white); height: var(--win-bar); padding: 0 10px; font: 600 var(--t-label)/1 var(--b-mono); letter-spacing: .08em; text-transform: uppercase; text-align: left; }
.tot td { border-bottom: 1px solid var(--b-rule); padding: 10px; font: 500 var(--t-data)/1.3 var(--b-mono); }
.tot .n { text-align: right; font-variant-numeric: tabular-nums; }
.tot thead th.n { text-align: right; }
.cols > div:last-child > .note { color: #DCE0FF; font: 400 12px/1.55 var(--b-mono); margin: var(--s2) 0; }
i { display: inline-block; width: 11px; height: 11px; border-radius: 0; margin-right: 8px; vertical-align: -1px; }
.note { font: 400 12px/1.55 var(--b-mono); color: var(--ink-faint); margin: var(--s2) 0; }

/* try-card: the existing photo card, squared in a 3 px frame */
.try-card { position: relative; display: block; overflow: hidden; border-radius: 0; aspect-ratio: 4/5; margin: var(--s3) 0 0; background: var(--b-ink);
  border: var(--win-frame) solid var(--b-ink); text-decoration: none; }
.cols .try-card { border-color: var(--b-white); }
.try-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 400ms ease; }
.try-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(13, 14, 31, 0) 45%, rgba(13, 14, 31, .9) 100%); }
.tc-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; display: flex; flex-direction: column; gap: 8px; padding: 0 18px 18px; }
.tc-eyebrow { font: 600 10px/1.35 var(--b-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--b-acid); }
.tc-label { font: 900 21px/1 var(--b-display); font-stretch: 125%; text-transform: uppercase; letter-spacing: -.01em; color: var(--b-white); padding-right: 56px; }
.tc-arr { position: absolute; right: 16px; bottom: 18px; width: 44px; height: 44px; display: grid; place-items: center; background: var(--b-verm);
  color: var(--b-ink); font: 700 21px/1 var(--b-serif); transition: transform var(--b-dur) var(--b-ease), background-color 180ms ease; }
.try-card:hover img { transform: scale(1.04); }
.try-card:hover .tc-arr { transform: translateX(4px); background: var(--b-acid); }
.try-card:focus-visible { outline: 3px solid var(--b-acid); outline-offset: 3px; }
.intro { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; align-items: start; }
.intro .try-card { margin: 0; }
.intro p { max-width: 60ch; }
@media (max-width: 820px) { .intro { grid-template-columns: 1fr; } .try-card { aspect-ratio: 16/10; max-width: 520px; } .try-card img { object-position: 55% 25%; } }

/* white field: hand lists and related spots */
.hands { margin: 0; display: grid; gap: var(--s4); }
.hands dt { font: 900 18px/1.1 var(--b-display); font-stretch: 112%; text-transform: uppercase; display: flex; align-items: center; }
.hands dt i { width: 16px; height: 16px; }
.hands dd { margin: var(--s2) 0 0 24px; font: 400 var(--t-data)/1.8 var(--b-mono); color: var(--ink-dim); }
.hands dd span { color: var(--b-klein); text-transform: uppercase; font-size: var(--t-label); font-weight: 600; letter-spacing: .08em; }
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s1); }
.chips a { display: inline-block; background: var(--b-white); box-shadow: inset 0 0 0 2px var(--b-ink); padding: 10px 13px; font: 500 var(--t-data)/1 var(--b-mono);
  color: var(--b-ink); text-decoration: none; transition: background-color .2s, transform var(--b-dur) var(--b-ease); }
.chips a:hover { background: var(--b-acid); color: var(--b-ink); transform: translateY(-2px); }
.rows { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--b-ink); }
.rows li { border-bottom: 1px solid var(--b-rule); }
.rows a { display: flex; justify-content: space-between; gap: 16px; padding: 12px 2px; text-decoration: none; color: var(--b-ink); flex-wrap: wrap; font: 600 14px/1.35 var(--b-mono); }
.rows a:hover { background: var(--b-paper); color: var(--b-klein); }
.rows b { font-weight: 600; }
.rows small { color: var(--ink-faint); font: 400 12.5px/1.35 var(--b-mono); }
.tw { overflow-x: auto; }
.matrix { border-collapse: collapse; min-width: 640px; }
.matrix th, .matrix td { border: 1px solid var(--b-rule); padding: 8px 10px; font: 400 12px/1.3 var(--b-mono); text-align: left; }
.matrix thead th { background: var(--b-ink); color: var(--b-white); border-color: var(--b-ink); font-weight: 600; letter-spacing: .04em; }
.matrix tbody th { background: var(--b-paper); font-weight: 600; }

/* ink field: questions */
h2:has(+ .faq) { color: var(--b-white); border-top: 0; margin: var(--s5) 0 0; padding: var(--field-pad) 0 var(--s4); }
.faq { padding: 0 0 var(--field-pad); }
.faq details { border-bottom: 1px solid rgba(255, 255, 255, .2); }
.faq details:first-child { border-top: 2px solid var(--b-white); }
.faq summary { list-style: none; display: flex; justify-content: space-between; gap: var(--s3); align-items: center; padding: 16px 0; cursor: pointer;
  font: 500 var(--t-data)/1.45 var(--b-mono); letter-spacing: .02em; color: var(--b-white); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 20px; height: 20px; border: 2px solid currentColor; display: grid; place-items: center; font-size: 12px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { color: var(--b-acid); }
.faq details p { margin: 0; padding: 0 0 var(--s3); max-width: 62ch; font: 400 var(--t-lead)/1.4 var(--b-serif); color: var(--b-white); }

/* Klein field: closing call to action */
.viewer.bottom { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; padding: var(--field-pad) 0 var(--s4); margin: 0; color: var(--b-white); }
.viewer.bottom p { margin: 0; flex: 1 1 320px; font: 400 15px/1.55 var(--b-serif); color: #DCE0FF; }
.viewer.bottom b { color: var(--b-white); }
.viewer.bottom a:not(.btn) { color: var(--b-white); }
.viewer.bottom a:not(.btn):hover { color: var(--b-acid); }
.viewer.bottom .btn:hover { background: var(--b-white); color: var(--b-ink) !important; }
/* the page's source note, last in the page body above the site footer */
.about-note { margin: 0; padding: var(--s3) 0 var(--s4); max-width: 80ch; font: 400 12px/1.65 var(--b-mono); color: var(--ink-faint); }
.viewer.bottom + .about-note { padding-top: var(--s4); }
.about-note b { color: var(--b-ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}