/* Palette taken from the Squad Vision app (Styles/Controls.xaml) */
:root {
  --backdrop: #0B0F1A;
  --card: #141B2E;
  --card-2: #1A2236;
  --border: #232B40;
  --border-2: #2A3350;
  --text: #E8ECF4;
  --label: #AEB4C2;
  --muted: #8A93A6;
  --dim: #5A6688;
  --accent: #2D7DFB;
  --accent-light: #5B9CFF;
  --success: #5DCAA5;
  --warning: #FFC53D;
  --danger: #E24B4A;
  --youth: #B79CFF;
  --radius: 14px;
  --wrap: 1120px;
  --gutter: 16px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--backdrop);
  color: var(--text);
  font: 16px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: var(--accent-light); text-decoration: none; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(2.3rem, 5.5vw, 3.75rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 800; max-width: 22ch; }
h3 { font-size: 1.1rem; font-weight: 700; }
p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 640px) { :root { --gutter: 28px; } }
.narrow { max-width: 760px; }
.accent { color: var(--accent-light); }
.fine { font-size: .85rem; color: var(--dim); }

.eyebrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-light); margin-bottom: 1rem;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(93,202,165,.18); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .8em 1.4em; border-radius: 10px; border: 1px solid transparent;
  background: var(--accent); color: #fff; font: inherit; font-weight: 600;
  cursor: pointer; transition: background .15s, transform .15s, border-color .15s;
}
.btn:hover { background: var(--accent-light); transform: translateY(-1px); }
.btn:focus-visible, summary:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 2px; }
.btn-ghost { background: transparent; border-color: var(--border-2); color: var(--text); }
.btn-ghost:hover { background: var(--card-2); border-color: var(--dim); }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(11,15,26,.8); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { position: relative; display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: .6rem; color: var(--text); font-weight: 700; }
.nav-links { display: flex; align-items: center; gap: 1.5rem; }
.nav-link, .nav-menu > summary { color: var(--label); font-size: .95rem; }
.nav-link:hover, .nav-menu > summary:hover, .nav-menu[open] > summary { color: var(--text); }
@media (max-width: 760px) { .nav-link { display: none; } }

/* Features menu: a <details>, so it opens without JS. main.js closes it on
   an outside click, Escape, or once a link in it is picked. */
.nav-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::after {
  content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .15s;
}
.nav-menu[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.nav-menu > summary:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 4px; border-radius: 4px; }
.nav-panel {
  position: absolute; top: calc(100% - 6px); right: var(--gutter); width: min(560px, calc(100% - 2 * var(--gutter)));
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px;
  background: var(--card); border: 1px solid var(--border-2); border-radius: var(--radius); padding: 20px 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.nav-group { display: grid; gap: 2px; align-content: start; }
.nav-group-label { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin: 0 0 4px; }
.nav-panel a { display: block; border-radius: 8px; padding: 6px 8px; margin: 0 -8px; }
.nav-panel a:hover { background: var(--card-2); }
.nav-panel a b { display: block; color: var(--text); font-weight: 600; font-size: .92rem; }
.nav-panel a span { display: block; color: var(--muted); font-size: .8rem; }
.nav-panel a[aria-current="page"] b { color: var(--accent-light); }
.nav-panel .nav-all { grid-column: 1 / -1; margin: 2px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border); border-radius: 0; color: var(--accent-light); font-weight: 600; font-size: .9rem; }
.nav-panel .nav-all:hover { background: none; }
@media (max-width: 760px) {
  .nav-panel { left: var(--gutter); width: auto; grid-template-columns: 1fr; max-height: calc(100vh - 80px); overflow-y: auto; }
}

/* Hero */
.hero {
  padding: 72px 0 96px;
  background:
    radial-gradient(600px 400px at 85% 10%, rgba(45,125,251,.22), transparent 70%),
    radial-gradient(500px 300px at 0% 100%, rgba(183,156,255,.10), transparent 70%);
}
.hero-grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.05fr 1fr; } }
.lede { font-size: 1.15rem; color: var(--label); max-width: 34em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 16px; }

/* Cards */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }

/* Hero card: a real Player evolution summary card, rebuilt from the app */
.hero-visual { position: relative; max-width: 520px; width: 100%; justify-self: center; }
.shot-label { font-size: .8rem; color: var(--muted); margin: 0 0 10px 4px; }
.shot-label b { color: var(--label); font-weight: 600; }
.sv-card {
  padding: 18px 20px 14px; border-color: rgba(93,202,165,.45);
  box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(93,202,165,.08);
}
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip {
  font-size: .82rem; font-weight: 700; padding: .25em .8em; border-radius: 999px;
  background: var(--success); color: #0B2A20;
}
.chips-note { font-size: .78rem; color: var(--dim); }
.net { display: flex; align-items: center; gap: 14px; margin: 16px 0 14px; }
.net-n { font-size: 2.1rem; font-weight: 800; color: var(--success); line-height: 1; }
.net-t { font-weight: 700; font-size: 1.05rem; }
.net-s { color: var(--muted); font-size: .9rem; }
.attr-groups { display: grid; grid-template-columns: 88px 1fr; gap: 10px 8px; margin: 0; }
.attr-groups dt { color: var(--dim); font-size: .85rem; padding-top: 3px; }
.attr-groups dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.attr {
  font-size: .82rem; padding: .2em .7em; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(93,202,165,.35); color: var(--success);
}
.attr b { color: var(--text); font-weight: 700; margin-left: 2px; }
.sv-foot {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: .8rem; color: var(--dim);
}
.sv-open { color: var(--accent-light); font-weight: 600; }
@media (max-width: 420px) { .attr-groups { grid-template-columns: 1fr; gap: 4px; } .attr-groups dd { margin-bottom: 6px; } }

/* Sections */
.section { padding: 96px 0; }
.section-alt { background: linear-gradient(180deg, rgba(20,27,46,.55), rgba(20,27,46,.2)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-lede { color: var(--label); font-size: 1.1rem; max-width: 40em; margin-bottom: 40px; }

.grid-3 { display: grid; gap: 20px; }
@media (min-width: 820px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.problem { padding: 28px; }
.problem p { color: var(--muted); margin: 0; }
.icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 1.2rem; font-weight: 700; margin-bottom: 16px; }
.icon-amber { color: var(--warning); background: rgba(255,197,61,.12); }
.icon-red { color: var(--danger); background: rgba(226,75,74,.12); }
.icon-green { color: var(--success); background: rgba(93,202,165,.12); }

/* Feature tour: the app's tab bar, one panel per tab.
   Without JS every panel shows, stacked; main.js turns it into tabs. */
.tour-anchors span { display: block; scroll-margin-top: 88px; }
.tour { margin-top: 40px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.tour-tabs {
  position: relative; display: flex; gap: 4px; overflow-x: auto; padding: 0 8px;
  border-bottom: 1px solid var(--border); background: var(--backdrop);
  scrollbar-width: thin; scrollbar-color: var(--border-2) transparent;
}
.tour-group { display: flex; flex-direction: column; flex: 0 0 auto; }
.tour-glabel { font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); padding: 12px 10px 0; }
.tour-row { display: flex; }
.tour-tab {
  background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted);
  font: inherit; font-size: .9rem; padding: 6px 10px 12px; cursor: pointer; white-space: nowrap;
}
.tour-tab:hover { color: var(--text); }
.tour-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.tour-tab:focus-visible, .tour-panel:focus-visible { outline: 2px solid var(--accent-light); outline-offset: -2px; }
.tour-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px 16px; align-items: center; }
.tour-panel + .tour-panel { border-top: 1px solid var(--border); }
.tour.js .tour-panel { border-top: 0; }
.tour.js .tour-panel[hidden] { display: none; }
.tour.js .tour-name { display: none; }
@media (min-width: 860px) { .tour-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); padding: 40px; } }
.tour-name { font-size: .8rem; font-weight: 600; color: var(--accent-light); margin-bottom: .5em; }
.tour-copy h3 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-weight: 800; }
.tour-copy ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.tour-copy li { color: var(--label); padding-left: 22px; position: relative; }
.tour-copy li::before { content: "▲"; position: absolute; left: 0; top: .2em; font-size: .65rem; color: var(--success); }

.tour-intro { color: var(--label); margin: 0; }

/* Summary panel: three of the app's summary cards, rebuilt */
.sum-grid { display: grid; gap: 12px; }
@media (min-width: 560px) { .sum-grid { grid-template-columns: 1fr 1fr; } .sum-card.form { grid-column: 1 / -1; } }
.sum-card { background: var(--backdrop); border: 1px solid var(--border-2); border-radius: 10px; padding: 12px 14px; font-size: .85rem; }
.sum-card.up { border-color: rgba(93,202,165,.6); }
.sum-card.down { border-color: rgba(226,75,74,.6); }
.sum-card.form { border-color: rgba(255,197,61,.55); }
.sum-head { margin-bottom: 6px; }
.sum-head b { display: block; font-weight: 600; }
.sum-head span { color: var(--dim); font-size: .75rem; }
.sum-row { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border); }
.sum-row em { font-style: normal; font-weight: 700; min-width: 2.6em; }
.sum-row strong { font-weight: 600; }
.sum-row small { color: var(--muted); font-size: .8rem; margin-left: auto; white-space: nowrap; }
.n-up { color: var(--success); }
.n-down { color: var(--danger); }
.gold { color: var(--warning); }
.sum-more { color: var(--dim); font-size: .78rem; padding-top: 6px; border-top: 1px solid var(--border); }

.tour-copy li b { color: var(--text); font-weight: 600; }

/* Player evolution panel: the screen's header, tabs and summary cards, rebuilt */
.pe-screen { background: var(--backdrop); border: 1px solid var(--border-2); border-radius: 12px; padding: 14px; }
.pe-head { margin-bottom: 10px; }
.pe-head > b { font-size: 1.05rem; margin-right: 8px; }
.pe-loan { display: inline-block; font-size: .75rem; font-weight: 600; color: var(--warning); background: rgba(255,197,61,.12); border: 1px solid rgba(255,197,61,.4); border-radius: 6px; padding: 1px 8px; }
.pe-meta { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.pe-tabs { display: flex; gap: 14px; overflow: hidden; white-space: nowrap; font-size: .8rem; color: var(--muted); border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.pe-tabs span { padding-bottom: 6px; }
.pe-tabs .on { color: var(--text); border-bottom: 2px solid var(--accent); }
.pe-screen .sum-card { background: var(--card); }
.sum-card.move { border-color: rgba(59,159,232,.6); grid-column: 1 / -1; }
.pe-big { display: flex; align-items: center; gap: 10px; margin: 4px 0 6px; }
.pe-big em { font-style: normal; font-size: 1.5rem; font-weight: 800; }
.pe-big span { font-weight: 600; line-height: 1.25; }
.pe-big small { display: block; font-weight: 400; color: var(--muted); font-size: .78rem; }
.pe-fig { padding: 6px 0; border-top: 1px solid var(--border); color: var(--label); font-size: .82rem; line-height: 1.45; }
.pe-fig b { color: var(--text); font-weight: 600; white-space: nowrap; }

/* Squad comparison panel: the shape radar, redrawn from the app's figures */
.sq-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8rem; color: var(--label); }
.sq-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: currentColor; }
.sq-legend .p1, .sq-radar .p1 { color: #3B82F6; }
.sq-legend .p2, .sq-radar .p2 { color: #7F77DD; }
.sq-legend .p3, .sq-radar .p3 { color: #22B07D; }
.sq-legend .p4, .sq-radar .p4 { color: #22B8D9; }
.sq-legend .p5, .sq-radar .p5 { color: #E8673A; }
.sq-radar { display: block; width: 100%; max-width: 400px; margin: 4px auto 0; }
.sq-grid polygon, .sq-grid path { fill: none; stroke: var(--border-2); stroke-width: 1; }
.sq-radar polygon[class^="p"] { fill: currentColor; fill-opacity: .07; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.sq-labels text { fill: var(--muted); font-size: 12px; font-family: inherit; }
.sq-note { margin: 0; font-size: .75rem; color: var(--dim); text-align: center; }

/* Youth intakes panel: the intake header, tiles and player list, rebuilt */
.yi-sprout { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; fill: none; stroke: var(--youth); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.yi-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 14px; }
.yi-tile { background: var(--card); border: 1px solid var(--border); border-top: 2px solid var(--border-2); border-radius: 8px; padding: 8px 10px; font-size: .72rem; color: var(--dim); line-height: 1.3; }
.yi-tile b { display: block; font-size: 1.15rem; color: var(--text); font-weight: 700; margin-bottom: 2px; }
.yi-tile.blue { border-top-color: var(--accent); }
.yi-tile.amber { border-top-color: var(--warning); }
.yi-row { display: grid; grid-template-columns: minmax(0, 1fr) 3.9rem 7.5rem; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); font-size: .82rem; }
.yi-row strong { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yi-row small { display: block; color: var(--muted); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yi-th { border-top: 0; color: var(--dim); font-size: .72rem; padding-top: 0; }
.yi-pill { font-size: .72rem; font-weight: 600; color: var(--accent-light); background: rgba(45,125,251,.15); border-radius: 999px; padding: 1px 8px; }
.yi-th span:nth-child(2) { padding: 0; }
.yi-pot { white-space: nowrap; }
.yi-pot i { font-style: normal; color: #E5C07B; }

/* Squad depth panel: the depth board, rebuilt */
.sd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; font-size: .75rem; }
.sd-toggle { display: inline-flex; background: var(--card); border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.sd-toggle span { padding: 3px 10px; border-radius: 6px; color: var(--dim); }
.sd-toggle .on { background: rgba(45,125,251,.18); color: var(--accent-light); font-weight: 600; }
.sd-progress { display: inline-flex; align-items: center; gap: 8px; color: var(--label); }
.sd-progress i { display: block; width: 60px; height: 4px; border-radius: 2px; background: var(--success); }
.sd-grid { display: grid; gap: 10px; }
@media (min-width: 560px) { .sd-grid { grid-template-columns: 1fr 1fr; } }
.sd-card { background: var(--card); border: 1px solid rgba(93,202,165,.5); border-radius: 10px; padding: 10px 12px; font-size: .78rem; }
.sd-card > b { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 4px; }
.sd-settled { color: var(--success); }
.sd-newer { color: var(--warning); margin-bottom: 8px; }
.sd-slot { display: flex; align-items: center; gap: 10px; background: var(--backdrop); border-radius: 8px; padding: 6px 10px; }
.sd-n { color: var(--dim); }
.sd-slot strong { display: block; font-weight: 600; font-size: .82rem; }
.sd-slot small { display: block; color: var(--muted); font-size: .72rem; }
.sd-more { color: var(--accent-light); margin-top: 6px; }

/* Player comparison panel: the ranked Order tab, rebuilt */
.pc-role { font-size: .78rem; font-weight: 600; background: var(--card); border: 1px solid var(--border-2); border-radius: 6px; padding: 3px 10px; }
.pc-row {
  display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) 2.6rem 3.4rem 2.8rem; gap: 8px; align-items: center;
  background: var(--card); border-radius: 8px; padding: 7px 10px; margin-top: 6px; font-size: .95rem; font-weight: 700; text-align: right;
}
.pc-row > span:nth-child(2) { text-align: left; font-weight: 400; }
.pc-row strong { display: block; font-weight: 600; font-size: .85rem; }
.pc-row small { display: block; font-size: .72rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-row small.n-down { color: var(--danger); }
.pc-rank { color: var(--dim); text-align: left; font-weight: 600; font-size: .85rem; }
.pc-score { color: var(--text); }
.pc-th { background: none; padding-top: 0; padding-bottom: 0; font-size: .7rem; font-weight: 400; color: var(--dim); }
.pc-unranked { margin-top: 10px; font-size: .72rem; color: var(--dim); }
.pc-unranked b { color: var(--danger); font-weight: 600; text-transform: uppercase; margin-right: 6px; }

/* Data capture panel: a capture session step, rebuilt */
.dc-step { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 10px; font-size: .85rem; }
.dc-n { color: var(--dim); font-size: .75rem; }
.dc-step b { font-weight: 600; }
.dc-step code { font: 600 .7rem/1.4 ui-monospace, Consolas, monospace; color: var(--warning); background: rgba(255,197,61,.1); border: 1px solid rgba(255,197,61,.35); border-radius: 5px; padding: 1px 6px; }
.dc-banner { display: flex; align-items: center; gap: 12px; justify-content: space-between; background: var(--card); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; font-size: .78rem; }
.dc-banner b { display: block; font-weight: 600; }
.dc-banner small { display: block; color: var(--muted); font-size: .72rem; }
.dc-btn { flex: 0 0 auto; font-size: .72rem; color: var(--label); border: 1px solid var(--border-2); border-radius: 6px; padding: 3px 10px; white-space: nowrap; }
.dc-btn.primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.dc-row { display: grid; grid-template-columns: minmax(0, 1fr) 1.8rem 6.6rem 3.1rem 3.9rem; gap: 8px; align-items: center; padding: 5px 2px; border-top: 1px solid var(--border); font-size: .78rem; }
.dc-row > span:nth-child(2), .dc-row > span:nth-child(4), .dc-row > span:nth-child(5) { text-align: right; }
.dc-row strong { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-row small { display: block; font-size: .7rem; }
.dc-row .dc-pos { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-th { border-top: 0; color: var(--dim); font-weight: 600; }
.dc-th .dc-pos { color: var(--dim); }
.loan-in { color: #3B9FE8; }
.dc-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
@media (max-width: 480px) { .dc-row { grid-template-columns: minmax(0, 1fr) 1.8rem 3.1rem 3.9rem; } .dc-row .dc-pos { display: none; } }

/* League comparison panel: a player's dials against the league, redrawn */
.lc-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.lc-chips span { font-size: .7rem; color: var(--label); background: var(--card); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; }
.lc-chips .on { color: var(--accent-light); border-color: var(--accent); background: rgba(45,125,251,.15); }
.lc-player { font-size: .75rem; color: var(--muted); margin-bottom: 10px; }
.lc-player b { color: var(--text); font-size: .9rem; margin-right: 4px; }
.lc-open-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.lc-open-head b { font-size: .95rem; font-weight: 600; }
.lc-sub { font-size: .72rem; color: var(--dim); }
.lc-best { font-size: .75rem; color: var(--label); margin: 6px 0 10px; }
.lc-open { display: grid; gap: 12px; align-items: center; }
@media (min-width: 560px) { .lc-open { grid-template-columns: 11rem minmax(0, 1fr); } }
.lc-open svg { display: block; width: 100%; max-width: 170px; margin: 0 auto; }
.lc-figs { background: var(--card); border-radius: 8px; padding: 6px 10px; }
.lc-fig { display: grid; grid-template-columns: .5rem minmax(0, 1fr) 2.4rem 2.6rem; gap: 8px; align-items: center; padding: 4px 0; font-size: .76rem; }
.lc-fig i { width: 8px; height: 8px; border-radius: 50%; }
.lc-fig i.d-g { background: #2E9E78; } .lc-fig i.d-y { background: #C9A13B; } .lc-fig i.d-o { background: #D2733A; }
.lc-fig span { color: var(--label); }
.lc-fig b { text-align: right; font: 600 .76rem/1 ui-monospace, Consolas, monospace; }
.lc-fh { color: var(--dim); font-size: .68rem; padding-top: 0; }
.lc-fh span, .lc-fh b, .lc-fh em { color: var(--dim); font: inherit; font-style: normal; }
.lc-group { font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); margin-top: 4px; }
.rk { font: 600 .66rem/1 ui-monospace, Consolas, monospace; font-style: normal; text-align: center; border-radius: 999px; padding: 3px 0; }
.r-g { color: #5DCAA5; background: rgba(46,158,120,.2); border: 1px solid rgba(46,158,120,.5); }
.r-y { color: #E5C07B; background: rgba(201,161,59,.18); border: 1px solid rgba(201,161,59,.5); }
.r-o { color: #F0996B; background: rgba(210,115,58,.18); border: 1px solid rgba(210,115,58,.5); }
.d-ring { fill: none; stroke: var(--border-2); stroke-width: 1.5; }
.d-guide { fill: none; stroke: var(--border); stroke-width: 1; stroke-dasharray: 2 4; }
.d-hole { fill: var(--backdrop); stroke: var(--border-2); stroke-width: 3; }
.d-g { fill: #2E9E78; }
.d-lg { fill: #6FA352; }
.d-y { fill: #C9A13B; }
.d-o { fill: #D2733A; }
.d-r { fill: #C2413A; }


.steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 20px; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { padding: 28px; }
.step p { color: var(--muted); margin: 0; }
.step-n {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: rgba(45,125,251,.15); color: var(--accent-light); font-weight: 700; margin-bottom: 16px;
}

/* FAQ */
#faq details { border-bottom: 1px solid var(--border); padding: 4px 0; }
#faq details:first-of-type { margin-top: 32px; border-top: 1px solid var(--border); }
#faq summary { cursor: pointer; list-style: none; padding: 18px 32px 18px 0; font-weight: 600; position: relative; }
#faq summary::-webkit-details-marker { display: none; }
#faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-size: 1.4rem; color: var(--accent-light); transition: transform .2s; }
#faq details[open] summary::after { transform: rotate(45deg); }
#faq details p { color: var(--muted); padding-right: 32px; }

/* Footer */
.footer { padding: 40px 0; border-top: 1px solid var(--border); }
.footer-inner { display: grid; gap: 12px; }
.footer .fine { max-width: 60em; margin: 0; }

/* Feature pages: one page per app screen (see issue #1).
   Every page is the same six parts: breadcrumb, question hero,
   one row per tab or view, Good to know, Works well with, previous/next. */
.tour-more { display: inline-block; margin-top: 18px; font-weight: 600; }

.page-hero {
  padding: 28px 0 64px;
  background: radial-gradient(640px 320px at 88% 0%, rgba(45,125,251,.16), transparent 70%);
}
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 28px; padding: 0; font-size: .82rem; color: var(--dim); }
.crumbs li + li::before { content: "›"; margin-right: 6px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--label); }
.page-hero h1 { font-size: clamp(2rem, 4.4vw, 3rem); max-width: 24ch; }
.page-hero .lede { margin-bottom: 32px; }
.shot-note { margin: 12px 0 0; font-size: .82rem; color: var(--dim); }

.feature-rows { padding-bottom: 16px; }
.feature-row { display: grid; gap: 24px 48px; align-items: center; padding: 48px 0; border-top: 1px solid var(--border); }
.feature-copy h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
.feature-copy p { color: var(--label); }
.feature-copy .feature-note { font-size: .92rem; color: var(--muted); border-left: 2px solid var(--border-2); padding-left: 14px; margin: 0; }
@media (min-width: 900px) {
  .feature-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .feature-row:nth-child(even) { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .feature-row:nth-child(even) .feature-visual { order: -1; }
}

.page-notes, .page-related { padding: 56px 0; border-top: 1px solid var(--border); }
.page-notes h2, .page-related h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); }
.note-grid, .related-grid { display: grid; gap: 16px; margin-top: 20px; }
@media (min-width: 820px) { .note-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 700px) { .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.note { margin: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; color: var(--label); }
.related-card { display: block; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; transition: border-color .15s, transform .15s; }
.related-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.related-card b { display: block; color: var(--accent-light); font-size: 1.05rem; font-weight: 700; }
.related-card span { display: block; color: var(--text); font-weight: 600; margin-top: 2px; }
.related-card p { color: var(--muted); margin: 6px 0 0; font-size: .92rem; }
.pager { border-top: 1px solid var(--border); }
.pager .wrap { display: flex; justify-content: space-between; gap: 16px; padding-top: 28px; padding-bottom: 56px; }
.pager a { display: flex; flex-direction: column; gap: 2px; font-weight: 600; }
.pager small { color: var(--dim); font-weight: 400; font-size: .78rem; }
.pager .next { margin-left: auto; text-align: right; }

/* Rebuilt app screens: cards drawn the way the app draws them.
   Each visual is a container, so its cards sit side by side only when
   there is room, wherever on the page it is. */
.app-screen { background: var(--backdrop); border: 1px solid var(--border-2); border-radius: 16px; padding: 18px; box-shadow: 0 30px 80px rgba(0,0,0,.4); }
.app-screen, .feature-visual { container-type: inline-size; }
.app-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 20px; margin-bottom: 16px; }
.app-title { margin: 0; font-size: 1.1rem; font-weight: 700; }
.app-sub { margin: 2px 0 0; font-size: .8rem; color: var(--muted); }
.app-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.app-chip { font-size: .78rem; padding: 3px 12px; border-radius: 999px; border: 1px solid var(--border-2); color: var(--label); background: var(--card); }
.app-chip.on { border-color: var(--accent); color: var(--accent-light); background: rgba(45,125,251,.15); }
.app-grid { display: grid; gap: 12px; }
@container (min-width: 520px) { .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 860px) { .app-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feature-visual .app-grid { align-items: start; }

.app-card {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--card); border: 1.5px solid var(--border-2); border-radius: 12px; padding: 12px 14px; font-size: .85rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
.app-card.up { border-color: rgba(93,202,165,.75); }
.app-card.down { border-color: rgba(226,75,74,.75); }
.app-card.new { border-color: rgba(45,125,251,.85); }
.app-card.either { border-color: rgba(255,197,61,.7); }
.app-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.app-card-head b { font-weight: 600; flex-shrink: 0; }
.app-card-head .chip { color: #0B2A20; }
.app-card-head .chip.blue { color: #fff; }
.app-card-head span { font-size: .72rem; color: var(--dim); text-align: right; }
.app-lead { margin: 0 0 4px; color: var(--label); font-size: .82rem; }
.app-section { margin: 10px 0 2px; font-size: .72rem; color: var(--dim); }
.app-row { display: grid; grid-template-columns: 3.1rem minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--border); font-size: .82rem; line-height: 1.45; }
.app-row .v { font-weight: 700; white-space: nowrap; }
.app-row .who { font-weight: 600; margin-right: 6px; }
.app-row .what { color: var(--label); }
.app-quiet { margin: 2px 0; color: var(--dim); font-style: italic; font-size: .82rem; }
.app-more { margin: 0; padding-top: 6px; border-top: 1px solid var(--border); color: var(--dim); font-size: .75rem; }
.app-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; font-size: .72rem; color: var(--dim); }
.app-foot .open { color: var(--accent-light); font-weight: 600; white-space: nowrap; }
.ico { width: 13px; height: 13px; vertical-align: -2px; fill: currentColor; }

/* Wide feature rows: copy above, the rebuilt screen full width below */
@media (min-width: 900px) {
  .feature-row.wide, .feature-row.wide:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .feature-row.wide .feature-visual, .feature-row.wide:nth-child(even) .feature-visual { order: 0; }
}
.feature-row.wide .feature-copy { max-width: 48rem; }
.view-notes { display: grid; gap: 6px 24px; margin: 0 0 18px; padding: 0; list-style: none; color: var(--label); }
@media (min-width: 700px) { .view-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.view-notes b { color: var(--text); font-weight: 600; }

/* View switchers (Timeline, Board, Grid, Shape and so on), drawn like the
   app's own. Without JS every view shows, one under another, with its name. */
.views-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; }
.views-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--backdrop); border: 1px solid var(--border-2); border-radius: 10px; }
.views-tab { background: none; border: 0; border-radius: 7px; padding: 4px 14px; font: inherit; font-size: .85rem; color: var(--muted); cursor: pointer; }
.views-tab:hover { color: var(--text); }
.views-tab[aria-selected="true"] { background: rgba(45,125,251,.2); color: var(--accent-light); font-weight: 600; }
.views-tab:focus-visible { outline: 2px solid var(--accent-light); outline-offset: 1px; }
.views-bar small { font-size: .78rem; color: var(--muted); }
.views:not(.js) .views-tabs { display: none; }
.views-label { display: none; }
.views:not(.js) .views-label { display: block; margin: 0 0 8px; font-weight: 600; }
.views:not(.js) .views-panel + .views-panel { margin-top: 28px; }
.views.js .views-panel[hidden] { display: none; }

/* Player screens: the player's header, the app's tabs, panels inside a screen */
.app-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.app-who b { font-size: 1.05rem; font-weight: 700; }
.app-meta { margin: 2px 0 0; font-size: .78rem; color: var(--muted); }
.loan-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 600; color: var(--warning); background: rgba(255,197,61,.12); border: 1px solid rgba(255,197,61,.4); border-radius: 6px; padding: 1px 8px; }
.app-tabs { display: flex; gap: 20px; overflow-x: auto; white-space: nowrap; margin: 12px 0 14px; border-bottom: 1px solid var(--border); font-size: .85rem; color: var(--muted); scrollbar-width: none; }
.app-tabs span { flex-shrink: 0; padding-bottom: 8px; }
.app-tabs .on { color: var(--text); border-bottom: 2px solid var(--accent); }
.app-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 16px; margin: 0 0 12px; font-size: .78rem; color: var(--muted); }
.app-panel { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.app-panel + .app-panel { margin-top: 12px; }
.app-panel-title { margin: 0; font-weight: 600; font-size: .92rem; }
.app-panel-title span { margin-left: 6px; font-weight: 400; font-size: .78rem; color: var(--dim); }
.app-panel-note { margin: 4px 0 12px; font-size: .75rem; color: var(--dim); }
.table-scroll { overflow-x: auto; }

/* Attribute values coloured by band, the way Settings sets attribute colours */
.b-r { color: #E5534B; }
.b-o { color: #F0A04B; }
.b-y { color: #E9C46A; }
.b-g { color: #5DCAA5; }

/* Chips, and the parts of the Summary tab's cards */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-a { display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 10px; border-radius: 999px; border: 1px solid rgba(93,202,165,.4); background: rgba(93,202,165,.06); color: var(--text); font-size: .76rem; white-space: nowrap; }
.chip-a::before { content: "▲"; color: var(--success); font-size: .7em; }
.chip-a b { font-weight: 700; }
.app-card .chip { font-size: .72rem; padding: .15em .7em; }
.chip.blue { background: var(--accent); color: #fff; }
.app-card-head .chips { gap: 4px; }
.big-net { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.big-net > b { font-size: 1.7rem; font-weight: 800; line-height: 1; }
.big-net span { font-weight: 600; line-height: 1.3; }
.big-net small { display: block; font-weight: 400; font-size: .8rem; color: var(--muted); }
.cat-rows { display: grid; gap: 6px; margin: 8px 0 4px; }
.cat-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 8px; align-items: start; font-size: .78rem; }
.cat-row > span:first-child { padding-top: 2px; color: var(--dim); }
.role-line { margin: 6px 0 0; font-size: .82rem; }
.role-line b { margin-right: 4px; }
.app-line-up { margin: 6px 0 0; font-size: .82rem; color: var(--label); }
.app-line-up::before { content: "▲ "; color: var(--success); font-size: .8em; }
.nothing-new { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.nn-chip { padding: 4px 12px; border: 1px solid var(--border-2); border-radius: 8px; font-size: .82rem; letter-spacing: 0; text-transform: none; color: var(--muted); }
.nn-chip b { margin-right: 8px; font-weight: 600; color: var(--text); }

/* Attributes: Timeline */
.tl-season { border: 1px solid var(--border-2); border-radius: 10px; padding: 0 14px; }
.tl-season + .tl-season { margin-top: 10px; }
.tl-row { display: grid; grid-template-columns: 8.5rem 2.5rem minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 12px 0; }
.tl-row + .tl-row { border-top: 1px solid var(--border); }
.tl-when b { display: block; font-size: .92rem; }
.tl-when small { display: block; font-size: .72rem; color: var(--dim); }
.tl-month .tl-when { padding-left: 14px; }
.tl-month .tl-when b { font-size: .82rem; }
.tl-net { font-weight: 700; }
.tl-cats { display: grid; gap: 6px; }
.tl-base { font-size: .8rem; color: var(--dim); }
@container (max-width: 560px) {
  .tl-row { grid-template-columns: minmax(0, 1fr) auto; }
  .tl-cats, .tl-base { grid-column: 1 / -1; }
}

/* Attributes: Board, and the capture pickers Board and Shape share */
.pickers { display: grid; gap: 10px; margin-bottom: 12px; }
@container (min-width: 700px) { .pickers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.picker { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.picker-head { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 3px 10px; border: 1px solid var(--accent); border-radius: 8px; font-size: .8rem; color: var(--label); }
.picker-head b { color: var(--text); }
.picker-head i { width: 16px; border-top: 2px dashed var(--muted); }
.picker-head i.solid { border-top: 2px solid var(--accent-light); }
.picker-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 4px; font-size: .72rem; }
.picker-row > b { width: 3rem; color: var(--label); }
.picker-row span { padding: 2px 8px; border: 1px solid transparent; border-radius: 6px; background: var(--card-2); color: var(--muted); }
.picker-row span.on { border-color: var(--accent); background: rgba(45,125,251,.15); color: var(--text); }
.picker-row span.off { opacity: .4; }
.bd-cols { display: grid; gap: 12px; }
@container (min-width: 620px) { .bd-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 900px) { .bd-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bd-col { background: var(--backdrop); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.bd-cat { margin: 0 0 6px; font-size: .85rem; font-weight: 600; }
.bd-cat span { font-weight: 400; color: var(--dim); }
.bd-row { display: grid; grid-template-columns: minmax(0, 1fr) 72px 1.6rem 2rem; gap: 8px; align-items: center; padding: 3px 0; font-size: .8rem; }
.bd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--dim); }
.bd-row.moved .bd-name { color: var(--text); }
.bd-row.moved .bd-name::before { content: "▸"; margin-right: 6px; font-size: .7em; color: var(--accent-light); }
.bd-row b { text-align: right; font-weight: 700; }
.bd-row:not(.moved) b { opacity: .55; }
.bd-chg { font-size: .75rem; font-weight: 600; color: var(--success); }
.spark { width: 72px; height: 14px; }
.spark polyline { fill: none; stroke: var(--dim); stroke-width: 1.5; stroke-linejoin: round; }
.spark circle { fill: var(--dim); }
.bd-row.moved .spark polyline { stroke: var(--accent-light); }
.bd-row.moved .spark circle { fill: var(--accent-light); }

/* Attributes: Grid */
.gr-cats { display: grid; gap: 12px; }
@container (min-width: 900px) { .gr-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.gr-cat { background: var(--backdrop); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.gr-head { display: flex; align-items: baseline; gap: 6px; margin: 0 0 8px; font-size: .85rem; }
.gr-head b::before { content: "▾"; margin-right: 6px; font-size: .75em; color: var(--accent-light); }
.gr-head span { color: var(--dim); }
.gr-moved { margin-left: auto; font-size: .72rem; }
.gr { border-collapse: separate; border-spacing: 4px 3px; font-size: .78rem; }
.gr th { padding: 0 6px 0 0; font-weight: 400; font-size: .72rem; color: var(--dim); text-align: center; white-space: nowrap; }
.gr th:first-child { text-align: left; }
.gr tbody th { font-size: .78rem; color: var(--label); }
.gr td { min-width: 2.5rem; padding: 2px 6px; border: 1px solid transparent; border-radius: 5px; background: var(--card-2); text-align: center; font-weight: 700; white-space: nowrap; }
.gr td:nth-of-type(1) { background: var(--card); }
.gr td.up { border-color: rgba(93,202,165,.75); }
.gr td.gr-since { background: none; font-size: .75rem; font-weight: 600; color: var(--success); }
.gr-season { display: block; padding: 2px 8px; border-radius: 5px; background: var(--card-2); color: var(--label); font-size: .72rem; }
.gr-season.open { color: var(--accent-light); }

/* Attributes: Shape */
.shape { display: grid; gap: 16px; align-items: center; }
@container (min-width: 760px) { .shape { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.shape-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 4px; font-size: .78rem; color: var(--label); }
.shape-legend i { display: inline-block; width: 16px; margin-right: 6px; vertical-align: middle; border-top: 2px dashed var(--muted); }
.shape-legend i.solid { border-top: 2px solid var(--accent-light); }
.radar { display: block; width: 100%; max-width: 380px; margin: 0 auto; }
.rd-grid { fill: none; stroke: var(--border-2); stroke-width: 1; }
.rd-from { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
.rd-to { fill: rgba(91,156,255,.14); stroke: var(--accent-light); stroke-width: 2; }
.rd-from-dot { fill: var(--muted); }
.rd-to-dot { fill: var(--accent-light); }
.rd-label { fill: var(--label); font-size: 12px; }
.rd-from-val { fill: var(--muted); }
.rd-to-val { fill: var(--accent-light); font-weight: 700; text-decoration: underline; }
.shape-table, .st-table { width: 100%; border-collapse: collapse; }
.shape-table { font-size: .82rem; }
.shape-table th { padding: 4px 0; font-weight: 400; font-size: .75rem; color: var(--dim); text-align: right; }
.shape-table td { padding: 5px 0; border-top: 1px solid var(--border); text-align: right; }
.shape-table th:first-child, .shape-table td:first-child { text-align: left; }
.shape-table td:last-child { font-weight: 600; color: var(--success); }

/* Statistics & metrics */
.st-table { min-width: 780px; font-size: .8rem; }
.st-table th { padding: 6px 8px; font-weight: 600; font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); text-align: right; white-space: nowrap; }
.st-table td { padding: 7px 8px; border-top: 1px solid var(--border); text-align: right; white-space: nowrap; }
.st-table th:nth-child(-n+2), .st-table td:nth-child(-n+2) { text-align: left; }
.st-table .season td:first-child { font-weight: 700; }
.st-table .month td:first-child { padding-left: 24px; color: var(--label); }
.st-table .pick td { background: rgba(45,125,251,.12); }
.st-table .pick td:first-child { box-shadow: inset 3px 0 var(--accent); }
.st-table .add { margin-left: 3px; font-size: .7rem; color: var(--success); }
.metric-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 10px; }
.metric-sum { margin: 0 0 12px; padding: 10px 12px; background: var(--backdrop); border: 1px solid var(--border); border-radius: 10px; font-size: .8rem; color: var(--label); }
.metric-sum b { color: var(--text); }
.metric-sum span { display: block; margin-top: 4px; font-size: .75rem; color: var(--dim); }
.fig { display: grid; gap: 16px; }
@container (min-width: 760px) { .fig { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); align-items: start; } }
.fig-row { display: grid; grid-template-columns: minmax(0, 1fr) 3.4rem 3.2rem; gap: 8px; padding: 5px 8px; border-radius: 6px; font-size: .8rem; }
.fig-row b { text-align: right; font-weight: 700; }
.fig-row span:last-child { text-align: right; font-size: .75rem; font-weight: 600; }
.fig-row.pick { background: rgba(45,125,251,.14); box-shadow: inset 3px 0 var(--accent); }
.fig-hint { margin: 8px 0 0 8px; font-size: .75rem; color: var(--dim); }
.fig-chart > b { display: block; font-size: .95rem; }
.fig-chart > small { display: block; font-size: .72rem; color: var(--dim); }
.fig-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; font-size: .75rem; color: var(--dim); }
.fig-foot b { display: block; font-size: .85rem; color: var(--text); }
.chg-up { color: var(--success); }
.chg-down { color: var(--danger); }
.chg-flat { color: var(--dim); }
.trend { display: block; width: 100%; }
.tr-pick { fill: rgba(93,202,165,.13); }
.tr-bar { fill: rgba(91,156,255,.22); }
.tr-ref { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 5 4; }
.tr-line { stroke: var(--accent-light); stroke-width: 2.5; }
.tr-dot { fill: var(--accent-light); }
.tr-axis { fill: var(--dim); font-size: 11px; }
.tr-axis.strong { fill: var(--label); font-weight: 600; }
.minis, .quads { display: grid; gap: 10px; }
@container (min-width: 560px) { .minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 880px) { .minis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 640px) { .quads { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 980px) { .quads { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mini, .quad-card { padding: 10px 12px; background: var(--backdrop); border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.mini.pick { border-color: var(--accent); }
.mini > b, .quad-card > b { display: block; font-size: .85rem; font-weight: 600; }
.mini > small { display: block; margin-bottom: 4px; font-size: .72rem; color: var(--muted); }
.quad-card > small { display: block; font-size: .72rem; color: var(--dim); }
.quad-card > p { margin: 6px 0 0; font-size: .75rem; color: var(--label); }
.quad { display: block; width: 100%; margin-top: 6px; }
.q-bg { fill: #121A2C; }
.q-grid { stroke: rgba(255,255,255,.04); }
.q-tick { fill: var(--dim); font-size: 10px; }
.q-axis { fill: var(--muted); font-size: 11px; }
.q-mid { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 3; opacity: .7; }
.q-corner { fill: var(--muted); font-size: 11px; font-weight: 600; }
.q-dot { fill: #4E5A78; }
.q-path { stroke: var(--accent-light); stroke-width: 1.5; }
.q-aug { fill: #3D5A99; }
.q-sep { fill: var(--accent-light); }
.q-lab { fill: var(--label); font-size: 11px; }
.q-lab.strong { fill: var(--text); font-weight: 700; }
.quad-explain { margin: 0 0 12px; font-size: .75rem; color: var(--dim); }

/* Evaluation */
.ev-row { display: grid; grid-template-columns: 4.5rem 9.5rem minmax(0, 1fr) minmax(0, 1fr); gap: 6px 16px; align-items: start; padding: 10px 8px; border-top: 1px solid var(--border); font-size: .82rem; }
.ev-th { border-top: 0; padding-top: 0; font-size: .66rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }
.ev-season b { font-size: .92rem; }
.ev-month > span:first-child { padding-left: 14px; color: var(--label); }
.ev-month.pick { background: rgba(45,125,251,.12); box-shadow: inset 3px 0 var(--accent); border-radius: 6px; }
.ev-moved > span:first-child { grid-column: 1 / 3; color: var(--dim); font-size: .78rem; }
.ev-role b { margin-right: 4px; font-weight: 700; }
.ev-role .chips { margin-top: 6px; }
.ev-role .new { color: var(--accent-light); }
.lvl { margin-left: 6px; padding: 0 6px; border: 1px solid var(--border-2); border-radius: 5px; font-size: .68rem; font-style: normal; color: var(--dim); }
@container (max-width: 640px) {
  .ev-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ev-th { display: none; }
  .ev-moved > span:first-child { grid-column: 1 / -1; }
  .ev-role { grid-column: 1 / -1; }
}
.ev-note { margin: 10px 0 12px; padding: 10px 12px; background: var(--backdrop); border: 1px solid var(--border); border-radius: 10px; font-size: .8rem; color: var(--label); }
.ev-note b { color: var(--text); }
.ev-lists { display: grid; gap: 16px; }
@container (min-width: 700px) { .ev-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ev-list-title { margin: 0 0 4px; font-weight: 600; font-size: .85rem; }
.ev-li { display: grid; grid-template-columns: minmax(0, 1fr) 2rem 2rem 5.2rem; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 6px; font-size: .8rem; }
.ev-li b { text-align: right; }
.ev-li small { text-align: right; font-size: .72rem; color: var(--dim); }
.ev-li.star { background: rgba(45,125,251,.12); box-shadow: inset 3px 0 var(--accent); }
.ev-li .star-mark { margin-right: 4px; color: var(--warning); }

/* History */
.hs-season { border: 1px solid var(--border-2); border-radius: 10px; padding: 0 14px; }
.hs-season + .hs-season { margin-top: 10px; }
.hs-head { display: flex; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: .78rem; color: var(--dim); }
.hs-head b { display: block; font-size: .95rem; color: var(--text); }
.hs-head b::before { content: "▾"; margin-right: 6px; font-size: .75em; color: var(--accent-light); }
.hs-sofar { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: .75rem; color: var(--dim); }
.hs-row { display: grid; grid-template-columns: 3.2rem 1.2rem minmax(0, 1fr); gap: 8px; padding: 10px 0; font-size: .82rem; }
.hs-row + .hs-row { border-top: 1px solid var(--border); }
.hs-when b { display: block; }
.hs-when small { display: block; font-size: .72rem; color: var(--dim); }
.hs-ico { color: var(--muted); text-align: center; }
.hs-what p { margin: 0; }
.hs-what p + p { margin-top: 4px; }
.hs-what .key { font-weight: 600; }
.hs-what .loan { font-weight: 600; color: var(--accent-light); }
.hs-what .quiet { font-style: italic; color: var(--dim); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}