/* Mock E · riced tiling WM. Every section is a window with a titlebar; windows tile
   with 8px gaps on the mantle; the focused window border (lavender) follows the
   scroll-spy; a WM status bar strip sits on top. Unicode glyph icons, █░ bars. */
body { background: var(--mantle); line-height: 1.5; }
.layout { max-width: none; gap: var(--gap); padding: var(--gap); }
/* Launcher line above the WM bar: keeps the route back to the hub. */
.topbar { height: var(--topbar-h); background: var(--crust); border-bottom: 1px solid var(--surface0); font-size: var(--text-small); padding: 0 var(--s-3); }
.topbar .brand { color: var(--green); font-weight: 700; }
.topbar .brand::before { content: "⌂ " / ""; }

/* WM bar: always visible on this style, replaces the top bar. */
.stickybar { display: flex; position: sticky; height: var(--stickybar-h); background: var(--crust); border-bottom: 0; font-size: var(--text-small); gap: 0; padding: 0; margin: 0; }
body.page-compare.scrolled .stickybar, body.page-entity .stickybar { display: flex; }
.stickybar > * { display: inline-flex; align-items: center; height: 100%; padding: 0 var(--s-3); }
.stickybar .sb-name { color: var(--base); background: var(--blue); font-weight: 700; }
.stickybar .sb-name::before { content: "  " / ""; }
.stickybar .sb-score { color: var(--text); background: var(--surface1); font-family: var(--font-mono); font-size: var(--text-small); font-weight: 700; }
.stickybar .sb-section { color: var(--text); background: var(--surface0); margin-left: auto; }
.stickybar .sb-section::before { content: "◫ " / ""; }
.stickybar .sb-chip { gap: var(--s-2); }
.stickybar .sb-chip.a { background: var(--blue); color: var(--base); }
.stickybar .sb-chip.b { background: var(--peach); color: var(--base); }
.stickybar .sb-chip .sb-name, .stickybar .sb-chip .sb-score { background: transparent; color: inherit; padding: 0; }
.stickybar .sb-chip .sb-name::before { content: ""; }
.stickybar .sb-vs { color: var(--subtext); }
.stickybar .swatch { display: none; }

/* Windows. */
.section { border: var(--border) solid var(--surface0); background: var(--base); padding: 0; margin-bottom: var(--gap); scroll-margin-top: calc(var(--stickybar-h) + var(--gap)); }
.section.focused { border-color: var(--lavender); }
.section-head { margin: 0; background: var(--surface0); padding: var(--s-1) var(--s-3); display: flex; align-items: baseline; gap: var(--s-3); }
.section.focused .section-head { background: var(--lavender); color: var(--base); }
.section.focused .section-head .num { color: var(--base); }
.section-head h2 { font-size: var(--text-h2); font-weight: 700; }
.section-head h2::before { content: "● ● ● " / ""; font-size: 9px; letter-spacing: 0.15em; opacity: 0.7; vertical-align: middle; flex: none; white-space: nowrap; }
.section-head h2 .num { font-size: var(--text-small); color: inherit; opacity: 0.8; }
.section-head h2 .num::before { content: "[" / ""; } .section-head h2 .num::after { content: "]" / ""; }
.section-body { padding: var(--s-4); }
.section.hero .section-head h2 { color: inherit; font-size: var(--text-h2); text-transform: none; letter-spacing: 0; }
.section.hero { padding: 0; }

/* Master-stack tiling inside the hero window: identity and score (with its sub-scores)
   as the master column, picker and neighbours stacked beside, spec row below.
   Rows pair tiles of similar natural height so no tile is stretched around dead space. */
.section.hero .section-body { padding: var(--gap); background: var(--mantle); }
.hero-grid { gap: var(--gap); }
.hero-grid > * { background: var(--base); border: 1px solid var(--surface0); padding: var(--s-3); margin: 0; }
.hero-grid > *:hover { border-color: var(--surface1); }
.hero-grid > *:focus-within { border-color: var(--lavender); }
.identity, .score-block, .relperf, .picker-block { position: relative; }
.score-block .subs { padding-top: var(--s-1); }
.relperf h3 { display: none; }
.meta { font-size: var(--text-small); }
.meta .tag { border-color: var(--surface1); color: var(--mauve); }
.meta .vendor { color: var(--blue); }
h1 { font-size: var(--text-h1); letter-spacing: -0.03em; }
.verdict { font-size: var(--text-body); color: var(--subtext); }
.hero-price { margin: var(--s-3) 0 0; font-size: var(--text-h3); font-weight: 700; color: var(--green); }
.note legend { color: var(--subtext); background: var(--base); margin-left: calc(-1 * var(--s-1)); }
.note legend::before { content: "▣ " / ""; }
.note .source, .bar-row .source { color: var(--mauve); text-decoration: none; }
.note .source:hover, .bar-row .source:hover { text-decoration: underline; }
.bar-row .basis { color: var(--subtext); }
.price.note { font-size: var(--text-body); color: var(--text); max-width: var(--measure); }
.verdict::before { content: "$ " / ""; color: var(--green); }
.score-num { font-size: var(--text-score); line-height: 0.85; }
.score-unit .rank { font-size: var(--text-small); }
.score-unit .rank-pos { color: var(--yellow); }

/* Block-glyph bars. */
.bar { height: auto; background: transparent; overflow: visible; white-space: nowrap; letter-spacing: 0.02em; }
.bar::before { content: attr(data-blocks); color: var(--fg); }
.bar[data-band="high"]::before { color: var(--green); }
.bar[data-band="mid"]::before { color: var(--yellow); }
.bar[data-band="low"]::before { color: var(--red); }
.bar.a::before { color: var(--blue); }
.bar.b::before { color: var(--peach); }
.bar .fill { display: none; }
.bar-row { grid-template-columns: minmax(7em, max-content) 4.5em auto minmax(0, 1fr); padding: 2px 0; }
.bar-row .rank-link { text-align: right; }
.score-block .subs .bar-row { grid-template-columns: minmax(6em, max-content) 3em auto; }
.bench .bar-row, .subs .bar-row { border-bottom: 1px solid var(--surface0); }
.rel-row a, .rel-row.self { grid-template-columns: minmax(0, 1.6fr) 3.2em auto 2.5em; padding: 2px 0; }
.rel-row.self { background: var(--surface0); }
.rel-row.self .name::before { content: "▶ " / ""; color: var(--lavender); }
.rel-row a:hover { background: var(--surface0); }
.rel-row .bar::before { letter-spacing: 0; }

/* Toggles as keycaps. */
.chip-toggle span { border: 1px solid var(--surface1); border-radius: 0; padding: 2px var(--s-2); background: var(--surface0); font-size: var(--text-small); }
.chip-toggle:hover span { border-color: var(--lavender); }
.chip-toggle input:checked + span { background: var(--lavender); color: var(--base); border-color: var(--lavender); }

/* Picker as a prompt. */
.picker label::before { content: "❯ " / ""; color: var(--green); }
.picker select { background: var(--surface0); border-color: var(--surface1); border-radius: 0; }
.picker button { background: var(--blue); color: var(--base); border-color: var(--blue); border-radius: 0; font-weight: 700; }
.picker button:hover { background: var(--lavender); border-color: var(--lavender); color: var(--base); }
.picker .quick a { border: 1px solid var(--surface1); background: var(--surface0); border-radius: 0; }
.picker .quick a:hover { border-color: var(--peach); color: var(--peach); }

/* Key specs: a strip of tiles. */
.keyspecs { border-top: 0; padding: var(--s-3); gap: var(--gap); }
.keyspecs li { background: var(--surface0); padding: var(--s-2); }
.keyspecs .k { font-size: 11px; }
.keyspecs .v { font-size: 16px; }
.price .price-num { font-size: 32px; color: var(--green); }

/* Left rail = workspace list, a window itself. */
/* The workspaces window is always open on a WM desktop. */
.secnav, body.scrolled .secnav { opacity: 1; clip-path: none; }
.secnav { background: var(--base); border: var(--border) solid var(--surface0); height: auto; max-height: calc(100vh - var(--stickybar-h) - var(--gap) * 2); top: calc(var(--stickybar-h) + var(--gap)); padding: 0; }
.secnav::before { content: "● ● ● workspaces" / ""; display: block; background: var(--surface0); padding: var(--s-1) var(--s-3); font-size: var(--text-small); }
.secnav ol { padding: var(--s-2); gap: 2px; }
.secnav a { border: 0; border-radius: 0; padding: var(--s-1) var(--s-2); font-size: var(--text-small); }
.secnav a[aria-current="true"] { background: var(--lavender); color: var(--base); }
.secnav a .num::before { content: "[" / ""; } .secnav a .num::after { content: "]" / ""; }
.secnav a[aria-current="true"] .num { color: var(--base); }

/* Tables. */
.spec-table caption { font-size: var(--text-body); color: var(--mauve); }
.spec-table caption::before { content: "# " / ""; }
.spec-table tbody tr:nth-child(even) { background: var(--surface0); }
.spec-table td { color: var(--text); }
.compare-table tr.diff { box-shadow: inset 3px 0 0 var(--peach); }
.compare-table tr.group th { color: var(--mauve); }
.compare-table thead th { border-bottom-color: var(--surface1); }
.devices li, .compare-links li { border-bottom: 1px solid var(--surface0); }
.compare-links a::before { content: "❯ " / ""; color: var(--green); }
.devices .dev-price { color: var(--yellow); }

/* Compare: two tiled chip windows; winner border green. */
.page-compare .section.hero .section-body { background: var(--mantle); }
.compare-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a b" "versus versus"; gap: var(--gap); }
.chip-card { background: var(--base); border: var(--border) solid var(--surface1); padding: var(--s-3); position: relative; }
.chip-card::before { content: "● ● ● " attr(data-chip); display: block; margin: calc(-1 * var(--s-3)) calc(-1 * var(--s-3)) var(--s-3); padding: var(--s-1) var(--s-3); background: var(--surface0); font-size: 11px; color: var(--subtext); }
.chip-card.a::before { content: "● ● ● chip a" / ""; } .chip-card.b::before { content: "● ● ● chip b" / ""; }
.chip-card.win { border-color: var(--green); }
.chip-card.win::before { background: var(--green); color: var(--base); }
.chip-card .win-badge, .chip-card.a .win-badge, .chip-card.b .win-badge { position: absolute; top: 0; right: var(--s-3); font-size: 11px; line-height: 22px; color: var(--base); letter-spacing: 0.1em; }
.chip-card .win-badge::before { content: "✓ " / ""; }
.chip-card .chip-name { font-size: 32px; }
.chip-card .score-num { font-size: 96px; }
.chip-card.lose .score-num { opacity: 1; color: var(--subtext); }
.versus { background: var(--base); border: 1px solid var(--surface0); padding: var(--s-2) var(--s-3); max-width: none; }
.versus { flex-direction: row; justify-content: center; align-items: baseline; gap: var(--s-4); }
.versus .vs { font-size: 20px; color: var(--mauve); }
.winner { font-size: var(--text-body); }
.winner .winner-name { color: var(--green); }
.winner.win-a .winner-name, .winner.win-b .winner-name { color: var(--green); }
.diff-cols { gap: var(--gap); }
.diff-col { background: var(--base); border: 1px solid var(--surface0); padding: var(--s-3); }
.diff-col::before { display: block; margin: calc(-1 * var(--s-3)) calc(-1 * var(--s-3)) var(--s-3); padding: var(--s-1) var(--s-3); background: var(--surface0); font-size: 11px; color: var(--subtext); }
.diff-col.a::before { content: "● ● ● chip a · advantages" / ""; } .diff-col.b::before { content: "● ● ● chip b · advantages" / ""; }
.diff-col.a { border-color: var(--blue); } .diff-col.b { border-color: var(--peach); }
.diff-col h3 { font-size: var(--text-body); }
.diff-col li { border-bottom: 1px solid var(--surface0); }
.paired-row { border-bottom: 1px solid var(--surface0); }
.paired-row .pair.win .value { color: var(--green); }
.paired-row .pair .delta { color: var(--green); }
.paired-row.total { border-top: 1px solid var(--lavender); }
.section.section.focused .diff-col, .section.focused .paired-row.total { border-color: inherit; }
.swatch { border-radius: 0; }

@media (max-width: 899px) {
  .layout { padding: var(--gap) var(--gap) 0; }
  .secnav { position: fixed; border: 0; border-bottom: var(--border) solid var(--surface0); height: var(--mobile-nav-h); max-height: none; top: 0; }
  .secnav::before { display: none; }
  .secnav ol { padding: 0 var(--s-2); }
  .secnav a[aria-current="true"] { border-bottom-color: transparent; background: var(--lavender); }
  .section-head { flex-wrap: wrap; gap: 0 var(--s-2); }
  .stickybar { position: fixed; top: var(--mobile-nav-h); }
  body.page-compare.scrolled .stickybar { top: var(--mobile-nav-h); }
  body { padding-top: calc(var(--mobile-nav-h) + var(--stickybar-h)); }
  .stickybar .sb-section { display: inline-flex; }
  .section { scroll-margin-top: calc(var(--mobile-nav-h) + var(--stickybar-h) + var(--gap)); }
  .section-body { padding: var(--s-3); }
  .hero-grid > * { padding: var(--s-2); }
  .hero-grid > *::before { display: none; } /* titlebar labels are desktop chrome */
  .keyspecs::before { display: none; }
  h1 { font-size: 24px; }
  .verdict { font-size: var(--text-small); }
  .score-num { font-size: 64px; }
  .chip-card { padding: var(--s-2); }
  .chip-card::before { margin: calc(-1 * var(--s-2)) calc(-1 * var(--s-2)) var(--s-2); }
  .keyspecs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chip-card .chip-name { font-size: 20px; }
  .chip-card .score-num { font-size: 64px; }
  .versus { flex-direction: column; gap: var(--s-1); }
  .bar-row { grid-template-columns: minmax(6em, 1fr) 3.5em auto; }
  .bar-row .rank-link { grid-column: 1 / -1; text-align: left; }
}
.competitors a::before { content: none; }
.competitors .h2h-rival .b::before { content: none; } /* the verdict glyph leads the row */
.h2h-bars .bar { height: auto; }

/* Index page: one window per segment. */
.page-index .layout, .page-method .layout { grid-template-columns: minmax(0, 1fr); }
.index-list li { display: grid; grid-template-columns: 3em minmax(0, 1fr) minmax(0, 2fr) 3em auto; gap: var(--s-3); align-items: baseline; padding: var(--s-2) 0; border-bottom: 1px solid var(--surface0); }
.index-list .rank { color: var(--subtext); font-size: var(--text-small); }
.index-list .name { text-decoration: none; font-weight: 700; }
.index-list .name::before { content: "❯ " / ""; color: var(--green); }
.index-list .name:hover { text-decoration: underline; }
.index-list .verdict { color: var(--subtext); font-size: var(--text-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.index-list .score { color: var(--yellow); font-weight: 700; text-align: right; }
.index-list .vs { color: var(--blue); font-size: var(--text-small); text-decoration: none; white-space: nowrap; }
.index-list .vs:hover { text-decoration: underline; }
@media (max-width: 899px) {
  body.page-index, body.page-method { padding-top: 0; }
  .index-list li { grid-template-columns: 3em minmax(0, 1fr) 3em; }
  .index-list .verdict, .index-list .vs { grid-column: 2 / -1; }
}

/* ---------- entity Review / Benchmarks / Specs (chosen mock B + pip bars) ----------
   One shared grid per list via subgrid so values, bars and "best" links align across rows.
   Review: four tiles (same surface0 tiles as the hero key specs). Specs: stacked sub-windows.
   Scoped to the entity page; compare uses .paired and its own spec table. */
/* Full-width pip bars (▌▌▌▌ on a 9px pitch) replace the 10-glyph string in these sections. */
.page-entity #review .bar::before, .page-entity #benchmarks .bar::before { content: none; }
.page-entity #review .bar .fill, .page-entity #benchmarks .bar .fill { display: block; }
.page-entity #review .bar[data-band="high"], .page-entity #benchmarks .bar[data-band="high"] { color: var(--green); }
.page-entity #review .bar[data-band="mid"],  .page-entity #benchmarks .bar[data-band="mid"]  { color: var(--yellow); }
.page-entity #review .bar[data-band="low"],  .page-entity #benchmarks .bar[data-band="low"]  { color: var(--red); }
.page-entity #review .bar, .page-entity #benchmarks .bar {
  height: 12px;
  /* Empty pips are the band colour at low alpha: one bar with a dimmed tail, not a grey second bar. */
  --bar-track: color-mix(in srgb, currentColor 22%, transparent);
  background: repeating-linear-gradient(90deg, var(--bar-track) 0 3px, transparent 3px 9px);
}
.page-entity #review .bar .fill, .page-entity #benchmarks .bar .fill { background: repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 9px); }

/* Benchmark rows sit on the same surface0 tiles as the Review cards. */
.page-entity #benchmarks .bench .bar-row { background: var(--surface0); padding: var(--s-2) var(--s-3); border-bottom: 2px solid var(--base); }

/* Review tiles. */
.page-entity #review .subs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.page-entity #review .subs .bar-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "metric value" "bar ." "explain explain";
  gap: var(--s-2) var(--s-3); align-items: baseline; padding: var(--s-3); background: var(--surface0); border-bottom: 0;
}
.page-entity #review .bar-row .metric { grid-area: metric; font-size: var(--text-body); font-weight: 500; }
.page-entity #review .bar-row .value { grid-area: value; font-size: 24px; line-height: 1; }
.page-entity #review .bar-row .value[data-band="high"] { color: var(--green); }
.page-entity #review .bar-row .value[data-band="mid"]  { color: var(--yellow); }
.page-entity #review .bar-row .value[data-band="low"]  { color: var(--red); }
.page-entity #review .bar-row .bar { grid-area: bar; }
.page-entity #review .bar-row .explain { grid-area: explain; color: var(--subtext); font-size: var(--text-small); line-height: 1.35; }

/* Benchmarks table. */
.page-entity #benchmarks .bench { display: grid; grid-template-columns: minmax(14em, auto) 7ch minmax(0, 1fr) auto; column-gap: var(--s-4); }
.page-entity #benchmarks .bench .bar-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; gap: 0 var(--s-4); align-items: center; padding: var(--s-2) 0; }
.page-entity #benchmarks .bench .bar-row:last-child { border-bottom: 0; }
.page-entity #benchmarks .bar-row .metric { font-size: var(--text-body); }
.page-entity #benchmarks .bar-row .value { font-size: var(--text-body); }
.page-entity #benchmarks .bar-row .value[data-band="high"] { color: var(--green); }
.page-entity #benchmarks .bar-row .value[data-band="mid"]  { color: var(--yellow); }
.page-entity #benchmarks .bar-row .value[data-band="low"]  { color: var(--red); }
.page-entity #benchmarks .bar-row .rank-link { justify-self: end; min-height: 0; color: var(--subtext); text-decoration-color: var(--surface1); }
.page-entity #benchmarks .bar-row .rank-link:hover { color: var(--text); text-decoration-color: var(--lavender); }
.page-entity #benchmarks .bar-row a.rank-link { font-size: var(--text-small); }

/* Specs: one column of sub-windows. */
.page-entity #specs .spec-grid { grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.page-entity #specs .spec-table { border: 1px solid var(--surface0); }
.page-entity #specs .spec-table caption { background: var(--surface0); padding: var(--s-1) var(--s-3); font-size: var(--text-small); color: var(--mauve); }
.page-entity #specs .spec-table tbody tr:nth-child(even) { background: transparent; }
.page-entity #specs .spec-table th, .page-entity #specs .spec-table td { padding: 6px var(--s-3); font-size: var(--text-body); border-bottom: 1px solid var(--surface0); }
.page-entity #specs .spec-table tr:last-child th, .page-entity #specs .spec-table tr:last-child td { border-bottom: 0; }
.page-entity #specs .spec-table th[scope="row"] { width: 16em; color: var(--subtext); }
.page-entity #specs .spec-table td { font-weight: 500; }

@media (max-width: 899px) {
  .page-entity #review .subs { grid-template-columns: minmax(0, 1fr); }
  .page-entity #benchmarks .bench { grid-template-columns: minmax(0, 1fr) 7ch; }
  .page-entity #benchmarks .bench .bar-row { row-gap: var(--s-1); }
  .page-entity #benchmarks .bar-row .bar { grid-column: 1 / -1; }
  .page-entity #benchmarks .bar-row .rank-link { grid-column: 1 / -1; justify-self: start; }
  .page-entity #specs .spec-table th[scope="row"] { width: 45%; }
}

/* Entity page, windows 02 onward: one flat surface0 pane per window, no per-item tiles. Bar one step lighter. */
.page-entity .section:not(.hero) .section-head { background: var(--surface1); }
.page-entity .section:not(.hero) .section-body { background: var(--surface0); }
.page-entity #review .subs .bar-row, .page-entity #benchmarks .bench .bar-row { background: transparent; }
.page-entity #benchmarks .bench .bar-row { border-bottom-color: var(--surface1); }
.page-entity #specs .spec-table, .page-entity #specs .spec-table th, .page-entity #specs .spec-table td { border-color: var(--surface1); }