/* Palette lifted verbatim from the FlatNine design system (css/tokens.css),
   token names included, so this page reads as part of the same family and the
   values can be swapped for the hosted stylesheet without renaming anything.
   Light is the default and the OS preference is deliberately not consulted:
   only an explicit choice, which is what [data-theme] carries. */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f8f8f8;
  --bg-tertiary: #f0f0f0;
  --text-primary: #1a1a1a;
  --text-secondary: #666666;
  --text-muted: #999999;
  --border-color: #e5e5e5;
  --border-light: #f0f0f0;
  --accent: #9b111e;
  --accent-hover: #7d0e18;
  --accent-light: rgba(155, 17, 30, 0.1);
  --card-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
[data-theme="dark"] {
  --bg-primary: #1a1a1a;
  --bg-secondary: #242424;
  --bg-tertiary: #2d2d2d;
  --text-primary: #f5f5f5;
  --text-secondary: #b0b0b0;
  --text-muted: #808080;
  --border-color: #3d3d3d;
  --border-light: #333333;
  --accent: #c41e2e;
  --accent-hover: #9b111e;
  --accent-light: rgba(196, 30, 46, 0.15);
  --card-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg-secondary); color: var(--text-primary);
  font: 15px/1.5 ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1120px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
header h1 { font-size: 1.5rem; margin: 0 0 .25rem; letter-spacing: -.01em; }
header p { margin: 0; color: var(--text-secondary); font-size: .88rem; }
header a { color: inherit; }
.theme-btn {
  flex: none; font: inherit; font-size: .8rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem; border-radius: 999px;
  background: var(--bg-primary); color: var(--text-secondary);
  border: 1px solid var(--border-color);
}
.theme-btn:hover { border-color: var(--text-muted); color: var(--text-primary); }

.picker { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.5rem 0; }
.picker button {
  font: inherit; font-size: .84rem; padding: .4rem .7rem; cursor: pointer;
  background: var(--bg-primary); color: var(--text-primary);
  border: 1px solid var(--border-color); border-radius: 999px;
}
.picker button:hover { border-color: var(--text-muted); }
.picker button[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
}
.who { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-bottom: 1rem; }
.face-lg {
  width: 84px; height: 84px; border-radius: 10px; object-fit: cover; flex: none;
  border: 1px solid var(--border-color); background: var(--bg-tertiary);
}
.face-sm {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none;
  border: 1px solid var(--border-color); background: var(--bg-tertiary); display: block;
}
.face-blank { opacity: .4; }
.credit { margin: 1rem 0 0; color: var(--text-muted); font-size: .72rem; }
.credit a { color: inherit; }
.who h2 { margin: 0; font-size: 1.9rem; letter-spacing: -.02em; }
.who span { color: var(--text-secondary); font-size: .85rem; }

.grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 1rem; align-items: start; }
@media (max-width: 860px) { .grid { grid-template-columns: minmax(0,1fr); } }
.card {
  background: var(--bg-primary); border: 1px solid var(--border-color);
  border-radius: 12px; padding: 1.1rem 1.2rem; box-shadow: var(--card-shadow);
}
.card h3 { margin: 0 0 .2rem; font-size: 1rem; }
.card .sub { margin: 0 0 1rem; color: var(--text-secondary); font-size: .78rem; line-height: 1.45; }

.radar { display: block; width: 100%; height: auto; overflow: visible; }
table.axes { width: 100%; border-collapse: collapse; margin-top: .9rem; font-size: .8rem; }
table.axes th, table.axes td { text-align: left; padding: .3rem 0; border-bottom: 1px solid var(--border-light); }
table.axes th { font-weight: 600; color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
table.axes td:last-child, table.axes th:last-child { text-align: right; font-variant-numeric: tabular-nums; }

.tabs { display: flex; gap: .3rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tabs button {
  font: inherit; font-size: .82rem; padding: .35rem .7rem; cursor: pointer;
  background: transparent; color: var(--text-secondary);
  border: 1px solid var(--border-color); border-radius: 7px;
}
.tabs button:hover { border-color: var(--text-muted); }
.tabs button[aria-pressed="true"] {
  background: var(--accent-light); border-color: var(--accent);
  color: var(--text-primary); font-weight: 600;
}

.bars { display: grid; gap: .55rem; }
.bar-row { display: grid; grid-template-columns: 28px 8.5rem 1fr auto; gap: .55rem; align-items: center; font-size: .84rem; }
.bar-row .nm { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { background: var(--accent-light); border-radius: 4px; height: 1.15rem; overflow: hidden; }
/* display:block is load-bearing. These are spans, and an inline box ignores
   both width and height, so the fill rendered at zero while the track (a grid
   item, and therefore blockified) looked fine. Every bar was empty. */
.bar-fill { display: block; background: var(--accent); height: 100%; border-radius: 4px; }
.bar-row .v { color: var(--text-secondary); font-variant-numeric: tabular-nums; font-size: .78rem; }

ol.ivs { margin: 0; padding-left: 1.3rem; display: grid; gap: .5rem; }
ol.ivs code { font-size: .85rem; background: var(--bg-tertiary); padding: .12rem .4rem; border-radius: 4px; }
ol.ivs .meta { color: var(--text-secondary); font-size: .78rem; }

.rel { display: grid; gap: .7rem; }
.rel-row { border-left: 3px solid var(--border-color); padding-left: .7rem; }
.rel-row.sig { border-left-color: var(--accent); }
.rel-row .lab { font-size: .84rem; }
.rel-row .val { color: var(--text-secondary); font-size: .78rem; }
.tag {
  display: inline-block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  padding: .1rem .4rem; border-radius: 4px;
  background: var(--bg-tertiary); color: var(--text-secondary);
}
.tag.on { background: var(--accent); color: #fff; }
footer { margin-top: 2.5rem; color: var(--text-secondary); font-size: .78rem; line-height: 1.6; }
footer code { font-size: .76rem; background: var(--bg-tertiary); padding: .08rem .3rem; border-radius: 3px; }