/*
Theme Name: Colosseum Reference
Theme URI: https://thecodingcolosseum.com
Author: The Coding Colosseum
Author URI: https://thecodingcolosseum.com
Description: A technical reference theme for engineers building with AI. Mono-by-default UI, dark/light toggle, ⌘K palette, faceted sidebars, task matrix, leaderboards. v5.7 fixes the review scorecard (track + fill were inline <span>s that never drew), tints scores/tracks by tier (accent / danger), and colourises .art tables (zebra rows, +/- delta cells, best-in-row highlight).
Version: 6.2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: colosseum-reference
*/

/* ============ Tokens ============ */
:root[data-theme="dark"], :root {
    --bg:         oklch(0.16 0.008 250);
    --bg-raised:  oklch(0.19 0.008 250);
    --bg-sunken:  oklch(0.13 0.008 250);
    --fg:         oklch(0.94 0.008 90);
    --fg-soft:    oklch(0.78 0.008 90);
    --muted:      oklch(0.58 0.008 90);
    --muted-2:    oklch(0.40 0.008 90);
    --border:     oklch(0.26 0.008 250);
    --border-soft:oklch(0.22 0.008 250);
    --accent:     oklch(0.78 0.15 65);
    --accent-soft:oklch(0.78 0.15 65 / 0.1);
    --success:    oklch(0.72 0.14 155);
    --warn:       oklch(0.78 0.15 80);
    --danger:     oklch(0.70 0.18 25);
}
:root[data-theme="light"] {
    --bg:         oklch(0.985 0.003 90);
    --bg-raised:  oklch(1 0 0);
    --bg-sunken:  oklch(0.96 0.004 90);
    --fg:         oklch(0.22 0.01 250);
    --fg-soft:    oklch(0.38 0.01 250);
    --muted:      oklch(0.52 0.008 250);
    --muted-2:    oklch(0.72 0.005 250);
    --border:     oklch(0.88 0.005 250);
    --border-soft:oklch(0.93 0.003 250);
    --accent:     oklch(0.58 0.15 55);
    --accent-soft:oklch(0.58 0.15 55 / 0.08);
    --success:    oklch(0.55 0.14 155);
    --warn:       oklch(0.65 0.15 75);
    --danger:     oklch(0.58 0.20 25);
}

/* ============ Reset / base ============ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
    background: var(--bg);
    color: var(--fg);
    font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
img, svg { max-width: 100%; display: block; }
::selection { background: color-mix(in oklab, var(--accent), transparent 70%); color: var(--fg); }
.sans { font-family: "Inter", ui-sans-serif, system-ui, sans-serif; }
.mut { color: var(--muted); }
.screen-reader-text { position: absolute; left: -9999px; }

/* ============ Top nav ============ */
.nav {
    position: sticky; top: 0; z-index: 10;
    display: grid; grid-template-columns: 260px 1fr auto;
    align-items: center; height: 52px; padding: 0 24px;
    background: color-mix(in oklab, var(--bg), transparent 8%);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fg); }
.brand .mark {
    width: 22px; height: 22px; border: 1px solid var(--fg);
    display: grid; place-items: center; font-size: 11px; font-weight: 600;
}
.brand .tld { color: var(--muted); }

.nav .search {
    display: flex; align-items: center; gap: 10px;
    height: 32px; padding: 0 10px; max-width: 520px; width: 100%; margin: 0 auto;
    border: 1px solid var(--border); background: var(--bg-raised);
    color: var(--muted); font-size: 12px; cursor: pointer;
}
.nav .search .kbd {
    margin-left: auto; border: 1px solid var(--border);
    padding: 1px 6px; font-size: 10px; color: var(--muted-2);
}

.nav .right { display: flex; align-items: center; gap: 4px; }
.nav .right a, .nav .right button {
    height: 32px; padding: 0 10px;
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--fg-soft);
    border: 1px solid transparent;
}
.nav .right a:hover, .nav .right button:hover { border-color: var(--border); color: var(--fg); }
.nav .right a.active, .nav .right .current-menu-item a {
    color: var(--fg); border-color: var(--border); background: var(--bg-raised);
}
.nav .right .cta { border: 1px solid var(--border); padding: 0 12px; margin-left: 6px; }
.nav .right .cta:hover { border-color: var(--accent); color: var(--accent); }

/* ============ Subnav ============ */
.subnav {
    display: flex; align-items: center;
    height: 40px; padding: 0 24px;
    border-bottom: 1px solid var(--border);
    font-size: 12px; color: var(--muted); overflow-x: auto;
}
.subnav a {
    height: 100%; display: inline-flex; align-items: center;
    padding: 0 14px; border-right: 1px solid var(--border-soft);
    white-space: nowrap;
}
.subnav a:first-child { border-left: 1px solid var(--border-soft); }
.subnav a.active {
    color: var(--fg); background: var(--bg-raised);
    box-shadow: inset 0 -2px 0 var(--accent);
}
.subnav a:hover { color: var(--fg); }
.subnav .meta {
    margin-left: auto; color: var(--muted-2);
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0 8px;
}

/* ============ Shared bits ============ */
.eyebrow {
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted);
}
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    height: 22px; padding: 0 8px; font-size: 11px;
    color: var(--fg-soft); border: 1px solid var(--border);
}
.chip.accent {
    color: var(--accent); border-color: color-mix(in oklab, var(--accent), transparent 60%);
    background: var(--accent-soft);
}
.tag { font-size: 11px; color: var(--muted); }
.tag::before { content: "#"; color: var(--muted-2); }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

.sec-head {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 48px 24px 16px; max-width: 1280px; margin: 0 auto;
}
.sec-head h2 { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--fg); }
.sec-head .eyebrow { margin-bottom: 8px; display: block; }
.sec-head .right { color: var(--muted); font-size: 12px; display: flex; gap: 12px; align-items: center; }
.sec-head .right a:hover { color: var(--accent); }

.crumbs {
    display: flex; align-items: center; gap: 8px;
    color: var(--muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 18px 24px 0; max-width: 1280px; margin: 0 auto;
}
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { color: var(--muted-2); }

.page-head {
    padding: 28px 24px 36px; max-width: 1280px; margin: 0 auto;
    border-bottom: 1px solid var(--border);
    display: grid; grid-template-columns: 1fr auto;
    align-items: end; gap: 40px;
}
.page-head h1 {
    font-size: 36px; font-weight: 500;
    letter-spacing: -0.02em; line-height: 1.1;
    margin-top: 10px; color: var(--fg);
}
.page-head p {
    margin-top: 14px; color: var(--fg-soft);
    font-size: 14px; max-width: 600px; line-height: 1.6;
}
.page-head .meta {
    color: var(--muted); font-size: 11px;
    letter-spacing: 0.08em; text-transform: uppercase;
    line-height: 1.8; text-align: right;
}
.page-head .meta strong { color: var(--fg); font-weight: 500; font-size: 13px; display: block; }

/* ============ Cmdk palette ============ */
.cmdk {
    position: fixed; inset: 0; background: rgba(0,0,0,.55);
    display: none; align-items: flex-start; justify-content: center;
    padding-top: 10vh; z-index: 100;
}
.cmdk.open { display: flex; }
.cmdk-box {
    width: min(620px, 94vw);
    background: var(--bg-raised); border: 1px solid var(--border);
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.cmdk-input {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.cmdk-input input {
    flex: 1; background: none; border: none; outline: none;
    color: var(--fg); font: inherit; font-size: 14px;
}
.cmdk-list { max-height: 50vh; overflow-y: auto; }
.cmdk-group h6 {
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted); padding: 10px 16px 6px;
}
.cmdk-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 16px; font-size: 13px; color: var(--fg-soft); cursor: pointer;
}
.cmdk-item .k {
    font-size: 10px; color: var(--muted-2);
    border: 1px solid var(--border); padding: 0 6px; margin-left: auto;
}
.cmdk-item:hover { background: var(--bg-sunken); color: var(--fg); }
.cmdk-item .pref { color: var(--muted); min-width: 64px; font-size: 11px; }

/* ============ HOME: hero ============ */
.hero {
    padding: 48px 24px 40px;
    max-width: 1280px; margin: 0 auto;
    border-bottom: 1px solid var(--border);
    display: grid; grid-template-columns: 1.35fr 1fr;
    gap: 56px; align-items: center;
}
.hero .eyebrow { margin-bottom: 16px; display: block; }
.hero h1 {
    font-size: 40px; font-weight: 500;
    letter-spacing: -0.024em; line-height: 1.08;
    color: var(--fg); max-width: 18ch;
}
.hero h1 em { font-style: normal; color: var(--accent); font-family: inherit; font-weight: 600; }
.hero .lede {
    margin-top: 18px; color: var(--fg-soft);
    font-size: 15px; line-height: 1.55; max-width: 58ch;
}
.hero .trust {
    margin-top: 20px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--muted);
    display: flex; flex-wrap: wrap; gap: 8px 10px;
}
.hero .trust .sep { color: var(--muted-2); }
.hero .trust .trust-link {
    color: var(--muted);
    border-bottom: 1px dotted color-mix(in oklab, var(--muted), transparent 60%);
    padding-bottom: 1px;
}
.hero .trust .trust-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.hero .trust .dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 999px;
    background: var(--accent); margin-right: 8px; vertical-align: middle;
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 80%);
}
.hero .cta {
    margin-top: 26px;
    display: flex; flex-wrap: wrap; gap: 10px;
}
.hero .btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 36px; padding: 0 16px;
    font: 500 13px/1 "JetBrains Mono", ui-monospace, monospace;
    letter-spacing: 0.02em;
    border: 1px solid var(--border);
    color: var(--fg); background: transparent;
    transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.hero .btn .ar { font-size: 15px; transform: translateY(-1px); }
.hero .btn:hover { border-color: var(--accent); color: var(--accent); }
.hero .btn-primary {
    border-color: var(--accent);
    background: var(--accent);
    color: #141414;
}
.hero .btn-primary:hover { filter: brightness(1.08); color: #141414; }
.hero .finder {
    border: 1px solid var(--border); background: var(--bg-raised);
    padding: 18px 20px; font-size: 13px;
}
.hero .finder .prompt {
    color: var(--muted); margin-bottom: 12px;
    display: flex; gap: 8px; align-items: center;
}
.hero .finder .prompt::before { content: ">"; color: var(--accent); }
.hero .finder input {
    width: 100%; background: none; border: none;
    color: var(--fg); font: inherit; font-size: 16px;
    outline: none; padding: 6px 0;
}
.hero .finder .hints {
    display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px;
}
.hero .finder .hints span {
    padding: 4px 8px; border: 1px solid var(--border-soft);
    font-size: 11px; color: var(--muted); cursor: pointer;
}
.hero .finder .hints span:hover { color: var(--accent); border-color: var(--accent); }

/* ============ HOME: stats bar ============ */
.stats-bar {
    max-width: 1280px; margin: 0 auto; padding: 18px 24px;
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 32px; border-bottom: 1px solid var(--border);
    font-size: 12px; color: var(--muted);
}
.stats-bar .s strong {
    color: var(--fg); font-size: 18px; font-weight: 500;
    display: block; margin-bottom: 4px;
}

/* ============ HOME: task matrix ============ */
.matrix {
    display: grid; grid-template-columns: repeat(4, 1fr);
    max-width: 1280px; margin: 0 auto; padding: 0 24px;
    border: 1px solid var(--border); border-right: none; border-bottom: none;
}
.matrix .cell {
    padding: 22px;
    border-right: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
    display: flex; flex-direction: column; gap: 8px;
    color: var(--fg);
}
.matrix .cell:nth-child(4n) { border-right: 1px solid var(--border); }
.matrix .cell:hover { background: var(--bg-raised); }
.matrix .cell .k { color: var(--accent); font-size: 11px; letter-spacing: 0.08em; }
.matrix .cell .t { font-size: 14px; color: var(--fg); font-weight: 500; margin-top: 4px; }
.matrix .cell .d { color: var(--muted); font-size: 11px; line-height: 1.5; font-family: Inter, sans-serif; }
.matrix .cell .n {
    color: var(--muted-2); font-size: 10px; letter-spacing: 0.08em;
    margin-top: auto; padding-top: 8px; border-top: 1px dashed var(--border-soft);
}

/* ============ HOME: latest + aside ============ */
.home-grid {
    display: grid; grid-template-columns: 2fr 1fr;
    max-width: 1280px; margin: 0 auto; padding: 0 24px;
    gap: 48px;
}
.latest { display: flex; flex-direction: column; }
.post {
    display: grid; grid-template-columns: 80px 1fr auto;
    gap: 24px; padding: 20px 0;
    border-top: 1px solid var(--border-soft);
    align-items: baseline; cursor: pointer; color: var(--fg);
}
.post:hover .pt { color: var(--accent); }
.post .pd { color: var(--muted-2); font-size: 11px; font-family: "JetBrains Mono"; }
.post .pt { font-size: 16px; font-weight: 500; color: var(--fg); letter-spacing: -0.01em; line-height: 1.35; }
.post .pd2 { color: var(--muted); font-size: 12px; margin-top: 6px; font-family: Inter, sans-serif; line-height: 1.55; }
.post .pm { color: var(--muted); font-size: 11px; text-align: right; line-height: 1.8; }
.post .pm strong { display: block; color: var(--fg-soft); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }

aside .card {
    border: 1px solid var(--border); padding: 20px;
    margin-bottom: 20px; background: var(--bg);
}
aside .card h4 {
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 14px; font-weight: 500;
}
aside .trend {
    display: flex; justify-content: space-between;
    padding: 10px 0; border-top: 1px solid var(--border-soft);
    font-size: 12px; cursor: pointer; color: var(--fg);
}
aside .trend:hover { color: var(--accent); }
aside .trend:first-of-type { border-top: none; }
aside .trend .r { color: var(--muted-2); font-family: "JetBrains Mono"; min-width: 20px; }
aside .trend .nm { flex: 1; padding: 0 10px; color: var(--fg-soft); }
aside .trend .v { color: var(--success); font-size: 11px; }
aside .trend .v.down { color: var(--danger); }
aside .trend .v.flat { color: var(--muted); }

/* ============ GUIDES archive ============ */
.g-layout {
    display: grid; grid-template-columns: 240px 1fr;
    max-width: 1280px; margin: 0 auto; padding: 0 24px; gap: 36px;
}
.g-side {
    padding: 32px 0; border-right: 1px solid var(--border);
    padding-right: 24px; position: sticky; top: 92px; align-self: start;
}
.g-side h5 {
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted); margin: 22px 0 8px; font-weight: 500;
}
.g-side h5:first-child { margin-top: 0; }
.g-side ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.g-side li {
    display: flex; justify-content: space-between;
    padding: 6px 10px; cursor: pointer; font-size: 13px;
    color: var(--fg-soft); border: 1px solid transparent;
}
.g-side li:hover { border-color: var(--border-soft); background: var(--bg-raised); color: var(--fg); }
.g-side li.on, .g-side li.current-cat {
    color: var(--accent);
    border-color: color-mix(in oklab, var(--accent), transparent 60%);
    background: var(--accent-soft);
}
.g-side li .n { color: var(--muted-2); font-size: 11px; }

.g-main { padding: 32px 0; }
.g-toolbar {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; color: var(--muted);
    padding-bottom: 16px; border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.g-toolbar select {
    background: var(--bg-raised); border: 1px solid var(--border);
    color: var(--fg); padding: 6px 10px; font: inherit; font-size: 12px;
}
.g-pills { display: flex; gap: 0; margin-left: auto; }
.g-pills a, .g-pills span {
    padding: 6px 10px; border: 1px solid var(--border);
    border-right: none; cursor: pointer; color: var(--fg-soft);
}
.g-pills a:last-child, .g-pills span:last-child { border-right: 1px solid var(--border); }
.g-pills .on, .g-pills a.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

.g-list {
    display: flex; flex-direction: column; margin-top: 16px;
    border-top: 1px solid var(--border-soft);
}
.g-item {
    display: grid; grid-template-columns: 92px 1fr 120px 100px;
    gap: 24px; padding: 22px 0;
    border-bottom: 1px solid var(--border-soft);
    align-items: center; cursor: pointer; color: var(--fg);
}
.g-item:hover .g-t { color: var(--accent); }
.g-item .g-d { color: var(--muted-2); font-size: 11px; line-height: 1.8; }
.g-item .g-d strong { display: block; color: var(--fg-soft); font-size: 13px; font-weight: 500; }
.g-item .g-t { font-size: 17px; font-weight: 500; color: var(--fg); letter-spacing: -0.01em; line-height: 1.3; }
.g-item .g-desc { color: var(--muted); font-size: 12px; margin-top: 6px; line-height: 1.55; font-family: Inter, sans-serif; }
.g-item .g-tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.g-item .g-score { text-align: right; font-family: "JetBrains Mono"; }
.g-item .g-score .v { color: var(--accent); font-size: 18px; display: block; }
.g-item .g-score .l { color: var(--muted-2); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.g-item .g-read { text-align: right; color: var(--muted); font-size: 11px; }
.g-item .g-read strong { color: var(--fg); display: block; font-size: 13px; font-weight: 500; }

.g-paging {
    display: flex; justify-content: space-between;
    padding: 24px 0; color: var(--muted); font-size: 12px;
    flex-wrap: wrap; gap: 12px;
}
.g-paging .pg { display: flex; gap: 4px; flex-wrap: wrap; }
.g-paging .pg .page-numbers {
    padding: 6px 10px; border: 1px solid var(--border);
    cursor: pointer; color: var(--fg-soft); line-height: 1;
}
.g-paging .pg .page-numbers.current { color: var(--accent); border-color: var(--accent); }
.g-paging .pg .page-numbers:hover { color: var(--accent); }

/* ============ PROMPTS archive ============ */
.pr-layout {
    display: grid; grid-template-columns: 240px 1fr;
    max-width: 1280px; margin: 0 auto; padding: 0 24px; gap: 36px;
}
.pr-side {
    padding: 32px 0; border-right: 1px solid var(--border);
    padding-right: 24px; position: sticky; top: 92px; align-self: start;
}
.pr-side h5 {
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted); margin: 22px 0 8px; font-weight: 500;
}
.pr-side h5:first-child { margin-top: 0; }
.pr-side ul { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.pr-side li {
    display: flex; justify-content: space-between;
    padding: 6px 10px; cursor: pointer; font-size: 13px;
    color: var(--fg-soft); border: 1px solid transparent;
}
.pr-side li:hover { border-color: var(--border-soft); background: var(--bg-raised); color: var(--fg); }
.pr-side li.on { color: var(--accent); border-color: color-mix(in oklab, var(--accent), transparent 60%); background: var(--accent-soft); }
.pr-side li .n { color: var(--muted-2); font-size: 11px; }

.pr-main { padding: 32px 0; }
.pr-toolbar {
    display: flex; align-items: center; gap: 10px;
    font-size: 12px; color: var(--muted);
    padding-bottom: 16px; border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.pr-toolbar select {
    background: var(--bg-raised); border: 1px solid var(--border);
    color: var(--fg); padding: 6px 10px; font: inherit; font-size: 12px;
}
.pr-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 0; margin-top: 16px;
    border-top: 1px solid var(--border-soft);
}
.pr-card {
    border: 1px solid var(--border-soft); border-top: none; border-right: none;
    padding: 20px 22px; display: flex; flex-direction: column; gap: 10px;
    cursor: pointer; color: var(--fg);
}
.pr-grid .pr-card:nth-child(2n) { border-right: 1px solid var(--border-soft); }
.pr-card:hover { background: var(--bg-raised); }
.pr-card:hover .pr-t { color: var(--accent); }
.pr-card .hd {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; color: var(--muted);
}
.pr-card .score { color: var(--accent); font-family: "JetBrains Mono"; }
.pr-t { font-size: 16px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; color: var(--fg); }
.pr-desc { color: var(--muted); font-size: 12px; font-family: Inter, sans-serif; line-height: 1.55; }
.pr-snippet {
    background: var(--bg-sunken); border: 1px solid var(--border-soft);
    padding: 12px 14px; font-size: 12px; color: var(--fg-soft);
    font-family: "JetBrains Mono"; line-height: 1.6;
    white-space: pre-wrap; max-height: 100px; overflow: hidden; position: relative;
}
.pr-snippet::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 30px;
    background: linear-gradient(to top, var(--bg-sunken), transparent);
}
.pr-meta {
    display: flex; justify-content: space-between;
    font-size: 11px; color: var(--muted);
}
.pr-meta .tags { display: flex; gap: 6px; }
.pr-meta .cp { color: var(--accent); }

/* ============ REVIEWS archive ============ */
.rev-hero {
    padding: 60px 24px 40px; max-width: 1280px; margin: 0 auto;
    border-bottom: 1px solid var(--border);
}
.rev-hero h1 {
    font-size: 36px; font-weight: 500; letter-spacing: -0.02em;
    line-height: 1.1; margin-top: 10px; color: var(--fg);
}
.rev-hero p { margin-top: 14px; color: var(--fg-soft); max-width: 700px; line-height: 1.6; font-size: 14px; }

.rev-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0; max-width: 1280px; margin: 0 auto; padding: 0 24px;
}
.rev-card {
    border: 1px solid var(--border); border-right: none; border-top: none;
    padding: 24px; display: flex; flex-direction: column; gap: 12px;
    cursor: pointer; color: var(--fg);
}
.rev-grid .rev-card:nth-child(3n) { border-right: 1px solid var(--border); }
.rev-grid .rev-card:nth-child(-n+3) { border-top: 1px solid var(--border); }
.rev-card:hover { background: var(--bg-raised); }
.rev-card:hover .rt { color: var(--accent); }
.rev-card .hd { display: flex; align-items: center; justify-content: space-between; }
.rev-card .logo {
    width: 34px; height: 34px; border: 1px solid var(--border);
    display: grid; place-items: center; font-weight: 600; font-size: 13px; color: var(--accent);
}
.rev-card .ver { color: var(--muted-2); font-size: 11px; letter-spacing: 0.08em; }
.rev-card .rt { font-size: 18px; font-weight: 500; letter-spacing: -0.01em; margin-top: 6px; }
.rev-card .rm { color: var(--muted); font-size: 12px; line-height: 1.55; font-family: Inter, sans-serif; }
.rev-card .score-row {
    display: flex; gap: 12px; margin-top: 8px;
    font-size: 11px; color: var(--muted);
    padding-top: 14px; border-top: 1px solid var(--border-soft);
}
.rev-card .score-row .s { flex: 1; }
.rev-card .score-row .s span:first-child { display: block; color: var(--muted); }
.rev-card .score-row .s .v { color: var(--fg); font-size: 15px; font-family: "JetBrains Mono"; display: block; }
.rev-card .score-row .s .v.top { color: var(--accent); }
.rev-card .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

/* ============ Leaderboard table ============ */
.lb { max-width: 1280px; margin: 60px auto 0; padding: 0 24px; }
.lb-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 12px; }
.lb-head h2 { font-size: 22px; font-weight: 500; color: var(--fg); }
.lb table {
    width: 100%; border-collapse: collapse;
    font-size: 13px; border: 1px solid var(--border);
}
.lb th, .lb td {
    padding: 14px 18px; text-align: left;
    border-bottom: 1px solid var(--border-soft);
    color: var(--fg-soft);
}
.lb thead th {
    background: var(--bg-sunken); color: var(--muted); font-weight: 500;
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
}
.lb tbody tr { cursor: pointer; }
.lb tbody tr:hover { background: var(--bg-raised); }
.lb .tool { display: flex; align-items: center; gap: 10px; color: var(--fg); }
.lb .tool .logo {
    width: 26px; height: 26px; border: 1px solid var(--border);
    display: grid; place-items: center; font-size: 11px; font-weight: 600; color: var(--accent);
}
.lb .rank { width: 40px; color: var(--muted-2); font-size: 11px; }
.lb .delta { font-size: 11px; }
.lb .delta.up { color: var(--success); }
.lb .delta.down { color: var(--danger); }
.lb .stars { color: var(--accent); }

/* ============ ARTICLE (single) ============ */
.art-head {
    max-width: 1280px; margin: 0 auto;
    padding: 28px 24px 32px; border-bottom: 1px solid var(--border);
}
.art-head .row {
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap;
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--muted);
}
.art-head .row .dif {
    color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent), transparent 60%);
    background: var(--accent-soft); padding: 2px 8px;
}
.art-head h1 {
    font-size: 42px; font-weight: 500; letter-spacing: -0.025em;
    line-height: 1.05; margin-top: 12px; color: var(--fg);
    max-width: 24ch;
}
.art-head .dek {
    margin-top: 14px; color: var(--fg-soft);
    font-family: Inter, sans-serif; font-size: 16px;
    line-height: 1.65; max-width: 700px;
}
.art-head .byline {
    display: flex; gap: 32px; margin-top: 26px;
    color: var(--muted); font-size: 12px;
    padding-top: 20px; border-top: 1px solid var(--border-soft);
    flex-wrap: wrap;
}
.art-head .byline strong { color: var(--fg); display: block; font-size: 13px; font-weight: 500; }

.art-layout {
    display: grid; grid-template-columns: 220px minmax(0, 720px) 240px;
    max-width: 1280px; margin: 0 auto; padding: 40px 24px; gap: 56px;
}
.toc {
    position: sticky; top: 112px; align-self: start;
    font-size: 12px; color: var(--muted);
    border-right: 1px solid var(--border-soft); padding-right: 24px;
}
.toc h5 {
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 14px; font-weight: 500;
}
.toc ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.toc a { color: var(--fg-soft); padding-left: 10px; border-left: 2px solid transparent; display: block; }
.toc a.on { color: var(--accent); border-left-color: var(--accent); }
.toc a:hover { color: var(--fg); }

.art {
    color: var(--fg-soft); font-family: Inter, sans-serif;
    font-size: 16px; line-height: 1.75;
}
.art h2 {
    font-family: "JetBrains Mono"; font-size: 22px; font-weight: 500;
    color: var(--fg); margin: 48px 0 16px;
    letter-spacing: -0.01em;
    padding-top: 20px; border-top: 1px solid var(--border-soft);
}
.art h2::before { content: "§ "; color: var(--accent); }
.art h3 {
    font-family: "JetBrains Mono"; font-size: 15px; font-weight: 500;
    color: var(--fg); margin: 28px 0 10px;
}
.art p { margin-bottom: 18px; }
.art strong { color: var(--fg); }
.art a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.art a:hover { color: var(--fg); }
.art code {
    font-family: "JetBrains Mono"; font-size: 13px;
    background: var(--bg-sunken); padding: 2px 6px;
    border: 1px solid var(--border-soft); color: var(--accent);
}
.art pre {
    font-family: "JetBrains Mono"; font-size: 13px;
    background: var(--bg-sunken); border: 1px solid var(--border);
    padding: 18px 20px; margin: 20px 0; overflow-x: auto;
    line-height: 1.6; color: var(--fg-soft);
}
.art pre code { background: transparent; border: 0; padding: 0; color: var(--fg-soft); }
.art blockquote {
    border-left: 2px solid var(--accent);
    padding: 12px 0 12px 22px; color: var(--fg);
    margin: 24px 0; font-style: normal;
}
.art blockquote::before { content: "⏵ "; color: var(--accent); }
.art ul, .art ol { margin: 0 0 20px 22px; color: var(--fg-soft); }
.art ul li, .art ol li { margin-bottom: 8px; }
.art img { border: 1px solid var(--border); margin: 20px 0; }
.art hr { border: 0; border-top: 1px solid var(--border-soft); margin: 40px 0; }
.art table {
    width: 100%; border-collapse: collapse;
    font-size: 13px; margin: 22px 0;
    font-family: "JetBrains Mono";
}
.art th, .art td {
    padding: 10px 14px; border: 1px solid var(--border-soft);
    text-align: left; color: var(--fg-soft);
}
.art th {
    background: var(--bg-sunken); color: var(--muted);
    font-weight: 500; font-size: 11px;
    letter-spacing: 0.08em; text-transform: uppercase;
}

.art .callout {
    border: 1px solid var(--border); background: var(--bg-raised);
    padding: 18px 22px; margin: 24px 0;
    font-family: "JetBrains Mono"; font-size: 13px; color: var(--fg-soft);
}
.art .callout .lb {
    color: var(--accent); font-size: 11px;
    letter-spacing: 0.12em; text-transform: uppercase;
    margin-bottom: 6px; display: block;
    max-width: none; margin-left: 0; margin-right: 0; padding: 0;
}

.meta-side {
    position: sticky; top: 112px; align-self: start;
    font-size: 12px; color: var(--muted);
    padding-left: 24px; border-left: 1px solid var(--border-soft);
}
.meta-side h5 {
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted); margin: 22px 0 10px; font-weight: 500;
}
.meta-side h5:first-child { margin-top: 0; }
.meta-side .kv {
    display: flex; justify-content: space-between;
    padding: 6px 0; border-bottom: 1px solid var(--border-soft); font-size: 11px;
}
.meta-side .kv .k { color: var(--fg-soft); }
.meta-side .kv .v { color: var(--fg); font-family: "JetBrains Mono"; }
.meta-side .related { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.meta-side .related a {
    display: block; color: var(--fg-soft); font-size: 12px;
    line-height: 1.45; padding: 8px 10px;
    border: 1px solid var(--border-soft); background: var(--bg);
}
.meta-side .related a:hover { border-color: var(--accent); color: var(--fg); }
.meta-side .related a .l {
    color: var(--muted-2); font-size: 10px;
    letter-spacing: 0.08em; text-transform: uppercase;
    display: block; margin-bottom: 4px;
}

.next {
    max-width: 1280px; margin: 48px auto 0;
    padding: 40px 24px; border-top: 1px solid var(--border);
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
.next a {
    padding: 24px; border: 1px solid var(--border-soft);
    display: flex; flex-direction: column; gap: 8px;
    color: var(--fg);
}
.next a:first-child { border-right: none; }
.next a:hover { border-color: var(--accent); }
.next .l { color: var(--muted); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.next .t { color: var(--fg); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.next a:last-child { text-align: right; }

/* Prompt block (copyable, tuned to palette) */
.prompt-block {
    max-width: 1280px; margin: 24px auto 0; padding: 0 24px;
}
.prompt-block-inner {
    background: var(--bg-sunken); border: 1px solid var(--border);
    padding: 0;
}
.prompt-block .hd {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px; border-bottom: 1px solid var(--border);
    color: var(--muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
}
.prompt-block pre {
    font-family: "JetBrains Mono"; font-size: 13px;
    color: var(--fg-soft); padding: 18px 20px;
    white-space: pre-wrap; word-break: break-word;
    line-height: 1.7;
    background: transparent; border: 0;
}
.prompt-block .copy {
    color: var(--accent); border: 1px solid color-mix(in oklab, var(--accent), transparent 60%);
    background: var(--accent-soft);
    padding: 4px 10px; font: inherit; font-size: 11px;
    letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.prompt-block .copy:hover { background: var(--accent); color: var(--bg); }

/* Scorecard block for reviews */
.scorecard {
    max-width: 1280px; margin: 24px auto 0; padding: 0 24px;
}
.scorecard-inner {
    display: grid; grid-template-columns: auto 1fr;
    gap: 48px; padding: 24px;
    border: 1px solid var(--border); background: var(--bg-raised);
}
.scorecard .big {
    font-family: "JetBrains Mono";
    font-size: 54px; color: var(--accent);
    line-height: 1; letter-spacing: -0.02em;
    display: flex; align-items: baseline; gap: 6px;
}
.scorecard .big .out { color: var(--muted); font-size: 20px; }
.scorecard .label { color: var(--muted); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 8px; }
.scorecard .bars { display: grid; gap: 10px; align-content: center; font-size: 12px; color: var(--muted); }
.scorecard .bar { display: grid; grid-template-columns: 110px 1fr 40px; gap: 14px; align-items: center; }
.scorecard .bar > span:first-child { color: var(--muted); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.scorecard .bar > span:last-child  { color: var(--fg); font-family: "JetBrains Mono"; text-align: right; }
.scorecard .bar .track {
    display: block; height: 8px;
    background: var(--border-soft);
    border: 1px solid var(--border-soft);
    overflow: hidden; position: relative;
}
.scorecard .bar .track .fill {
    display: block; height: 100%;
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--accent), transparent 35%) 0%,
        var(--accent) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent), transparent 70%);
    transition: width .5s cubic-bezier(.2,.7,.25,1);
}
/* Score tint: thresholds keep colour on-brand but hint at weakness. */
.scorecard .bar[data-tier="high"] > span:last-child { color: var(--accent); }
.scorecard .bar[data-tier="low"]  > span:last-child { color: var(--danger); }
.scorecard .bar[data-tier="low"] .track .fill {
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--danger), transparent 40%) 0%,
        var(--danger) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--danger), transparent 70%);
}

/* ============ Footer ============ */
.foot {
    border-top: 1px solid var(--border);
    padding: 48px 32px 40px; margin-top: 80px;
    color: var(--muted); font-size: 12px;
}
.foot .inner {
    max-width: 1280px; margin: 0 auto;
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px;
}
.foot h5 {
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--fg); margin-bottom: 12px; font-weight: 500;
}
.foot ul { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.foot ul a:hover { color: var(--accent); }
.foot .bottom {
    max-width: 1280px; margin: 28px auto 0;
    padding-top: 20px; border-top: 1px solid var(--border-soft);
    display: flex; justify-content: space-between;
    color: var(--muted-2); font-size: 11px; flex-wrap: wrap; gap: 8px;
}

/* ============ Search form ============ */
.search-form {
    display: flex; gap: 8px; max-width: 560px;
    margin: 14px 0 0;
}
.search-form input[type=search] {
    flex: 1; padding: 10px 12px;
    border: 1px solid var(--border); background: var(--bg-raised);
    color: var(--fg); font: inherit;
}
.search-form button {
    padding: 10px 14px; border: 1px solid var(--border);
    color: var(--fg); background: var(--bg-raised);
}
.search-form button:hover { border-color: var(--accent); color: var(--accent); }

/* ============ FAQ block (appended to post content) ============ */
.cr-faq {
    margin: 56px 0 0;
    border-top: 1px solid var(--border);
    padding-top: 32px;
}
.cr-faq__eyebrow {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted); margin-bottom: 8px;
}
.cr-faq__title {
    font-size: 22px; font-weight: 500; letter-spacing: -0.01em;
    color: var(--fg); margin: 0 0 18px;
}
.cr-faq__list { display: flex; flex-direction: column; }
.cr-faq__item {
    border-top: 1px solid var(--border-soft);
    padding: 16px 0;
}
.cr-faq__item:last-child { border-bottom: 1px solid var(--border-soft); }
.cr-faq__item summary {
    list-style: none;
    cursor: pointer;
    font-size: 15px; font-weight: 500;
    color: var(--fg);
    display: flex; align-items: center; gap: 14px;
    padding: 4px 0;
}
.cr-faq__item summary::-webkit-details-marker { display: none; }
.cr-faq__item summary::before {
    content: "+"; color: var(--accent);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 16px; width: 14px; text-align: center;
    transition: transform .15s ease;
}
.cr-faq__item[open] summary::before { content: "−"; }
.cr-faq__item summary:hover { color: var(--accent); }
.cr-faq__a {
    color: var(--fg-soft);
    font-size: 14.5px; line-height: 1.65;
    padding: 8px 0 4px 28px;
    max-width: 70ch;
}
.cr-faq__a p { margin: 0 0 10px; }
.cr-faq__a p:last-child { margin-bottom: 0; }
.cr-faq__a a { color: var(--accent); border-bottom: 1px dotted color-mix(in oklab, var(--accent), transparent 60%); }
.cr-faq__a code {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    background: var(--bg-raised); border: 1px solid var(--border-soft);
    padding: 1px 5px; font-size: 12.5px; color: var(--fg);
}

/* ============ Author archive (author.php) ============ */
.ah-hero {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 40px 24px 28px;
    border-bottom: 1px solid var(--border-soft);
}
.ah-hero__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 56px;
    align-items: start;
}
.ah-hero__meta .eyebrow {
    display: block;
    margin-bottom: 14px;
    color: var(--accent);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11.5px;
    letter-spacing: 0.08em;
}
.ah-hero__name {
    margin: 0;
    font-size: 42px;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--fg);
}
.ah-hero__role {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 13px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
}
.ah-hero__role .dot {
    margin: 0 8px;
    color: var(--muted-2);
}
.ah-hero__bio {
    margin-top: 18px;
    color: var(--fg-soft);
    font-size: 15.5px;
    line-height: 1.65;
    max-width: 62ch;
}
.ah-hero__bio p { margin: 0 0 12px; }
.ah-hero__bio p:last-child { margin-bottom: 0; }

.ah-links {
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
}
.ah-links li {}
.ah-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 12px;
    border: 1px solid var(--border);
    color: var(--fg-soft);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.ah-links a:hover {
    color: var(--fg);
    border-color: var(--accent);
    background: color-mix(in oklab, var(--accent), transparent 90%);
}
.ah-links a .ar { color: var(--accent); }

.ah-hero__card {
    border: 1px solid var(--border);
    background: var(--bg-raised);
    padding: 20px;
}
.ah-avatar {
    width: 128px; height: 128px;
    border: 1px solid var(--border);
    overflow: hidden;
    background: var(--bg-sunken);
    margin-bottom: 16px;
}
.ah-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ah-facts {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 8px;
    column-gap: 18px;
    margin: 0;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
}
.ah-facts dt {
    color: var(--muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ah-facts dd {
    margin: 0;
    color: var(--fg);
    text-align: right;
}
.ah-facts dd a { color: var(--accent); text-decoration: none; }
.ah-facts dd a:hover { text-decoration: underline; }

.ah-posts {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 36px 24px 72px;
}
.ah-posts__head { margin-bottom: 18px; }
.ah-posts__head .eyebrow {
    display: block;
    color: var(--accent);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11.5px;
    letter-spacing: 0.08em;
    margin-bottom: 6px;
}
.ah-posts__head h2 {
    margin: 0;
    font-size: 22px;
    letter-spacing: -0.01em;
}
.ah-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}
.ah-item {
    padding: 22px 0;
    border-top: 1px solid var(--border-soft);
}
.ah-item:last-child { border-bottom: 1px solid var(--border-soft); }
.ah-item__head {
    display: flex; align-items: center; gap: 12px;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11.5px; letter-spacing: 0.06em;
    margin-bottom: 6px;
    color: var(--muted);
}
.ah-item__cat { color: var(--accent); text-decoration: none; }
.ah-item__cat:hover { text-decoration: underline; }
.ah-item__title {
    margin: 0 0 6px;
    font-size: 19px;
    letter-spacing: -0.005em;
    line-height: 1.25;
}
.ah-item__title a { color: var(--fg); text-decoration: none; }
.ah-item__title a:hover { color: var(--accent); }
.ah-item__dek {
    margin: 0;
    color: var(--fg-soft);
    font-size: 14.5px;
    line-height: 1.55;
    max-width: 75ch;
}
.ah-empty {
    padding: 60px 0;
    color: var(--muted);
    text-align: center;
    font-family: "JetBrains Mono", ui-monospace, monospace;
}

/* ============ About-page author block ============ */
.about-author {
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    margin: 28px 0 36px;
    padding: 24px;
    border: 1px solid var(--border);
    background: var(--bg-raised);
}
.about-author__avatar {
    width: 128px; height: 128px;
    border: 1px solid var(--border);
    background: var(--bg-sunken);
    overflow: hidden;
}
.about-author__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-author__name {
    margin: 0 0 4px;
    font-size: 22px;
    letter-spacing: -0.01em;
}
.about-author__role {
    margin: 0 0 10px;
    color: var(--muted);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
}
.about-author__bio {
    color: var(--fg-soft);
    font-size: 15px;
    line-height: 1.6;
    max-width: 62ch;
}
.about-author__bio p { margin: 0 0 10px; }
.about-author__links {
    list-style: none; padding: 0; margin: 14px 0 0;
    display: flex; flex-wrap: wrap; gap: 6px 8px;
}
.about-author__links a {
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px; padding: 0 10px;
    border: 1px solid var(--border);
    color: var(--fg-soft);
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 11.5px;
    text-decoration: none;
}
.about-author__links a:hover { color: var(--fg); border-color: var(--accent); }

/* ============ Responsive ============ */
@media (max-width: 1100px) {
    .art-layout { grid-template-columns: 1fr; }
    .toc, .meta-side { position: static; border: none; padding: 0; }
    .meta-side { margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--border-soft); }
}
@media (max-width: 960px) {
    .nav { grid-template-columns: auto 1fr auto; }
    .nav .search { max-width: 280px; }
    .hero { grid-template-columns: 1fr; gap: 28px; padding: 36px 24px 32px; }
    .hero h1 { font-size: 30px; max-width: none; }
    .hero .lede { font-size: 14px; }
    .hero .cta .btn { height: 34px; padding: 0 12px; font-size: 12px; }
    .ah-hero__head { grid-template-columns: 1fr; gap: 24px; }
    .ah-hero__name { font-size: 30px; }
    .ah-hero__card { order: -1; }
    .about-author { grid-template-columns: 96px minmax(0, 1fr); gap: 18px; padding: 18px; }
    .about-author__avatar { width: 96px; height: 96px; }
    .home-grid { grid-template-columns: 1fr; }
    .matrix { grid-template-columns: repeat(2, 1fr); }
    .matrix .cell:nth-child(4n) { border-right: 1px solid var(--border-soft); }
    .matrix .cell:nth-child(2n) { border-right: 1px solid var(--border); }
    .stats-bar { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .g-layout, .pr-layout { grid-template-columns: 1fr; }
    .g-side, .pr-side { position: static; border-right: none; padding-right: 0; }
    .g-item { grid-template-columns: 1fr; gap: 10px; }
    .g-item .g-score, .g-item .g-read { text-align: left; }
    .pr-grid { grid-template-columns: 1fr; }
    .pr-grid .pr-card:nth-child(2n) { border-right: none; }
    .rev-grid { grid-template-columns: 1fr; }
    .rev-grid .rev-card:nth-child(3n) { border-right: none; }
    .art-head h1 { font-size: 30px; }
    .scorecard-inner { grid-template-columns: 1fr; gap: 24px; }
    .foot .inner { grid-template-columns: 1fr 1fr; }
    .page-head { grid-template-columns: 1fr; gap: 16px; }
    .page-head .meta { text-align: left; }
}
@media (max-width: 640px) {
    .nav .search { display: none; }
    .nav .right a:not(.cta) { display: none; }
    .next { grid-template-columns: 1fr; }
    .next a:last-child { text-align: left; }
    .foot .inner { grid-template-columns: 1fr; }
}

/* ============ Table polish (v5.7) ============
   Adds zebra striping, hover feedback, delta cell colouring and best-in-row
   emphasis. Cells are classified client-side in app.js (.is-positive,
   .is-negative, .is-best). */
.art table tbody tr:nth-child(odd) td {
    background: color-mix(in oklab, var(--bg-sunken), transparent 55%);
}
.art table tbody tr:hover td {
    background: color-mix(in oklab, var(--accent), transparent 92%);
}
.art table td.is-label {
    color: var(--fg); font-family: "JetBrains Mono";
}
.art table td.is-positive {
    color: var(--success); font-variant-numeric: tabular-nums;
}
.art table td.is-negative {
    color: var(--danger); font-variant-numeric: tabular-nums;
}
.art table td.is-best {
    color: var(--accent); font-weight: 500;
    background-image: linear-gradient(180deg, transparent 0%, color-mix(in oklab, var(--accent), transparent 88%) 100%);
}
.art table td.is-worst {
    color: var(--muted-2);
}
.art table tbody tr:nth-child(odd) td.is-best {
    background: color-mix(in oklab, var(--accent), transparent 88%);
}
.art table th {
    background: var(--bg);
    border-bottom: 2px solid var(--accent) !important;
    border-top: 1px solid var(--border) !important;
}
@media (max-width: 640px) {
    .art table td.is-best { background-image: linear-gradient(180deg, transparent 0%, color-mix(in oklab, var(--accent), transparent 92%) 100%); }
}

/* ============ Code block (figure wrapper, v5.6) ============ */
.code-block {
    margin: 22px 0;
    background: var(--bg-sunken);
    border: 1px solid var(--border);
    font-family: "JetBrains Mono", monospace;
    position: relative;
}
.code-block__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 8px 12px 8px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.code-block__lang {
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted-2); font-weight: 500;
}
.code-block[data-lang="bash"]       .code-block__lang::before,
.code-block[data-lang="typescript"] .code-block__lang::before,
.code-block[data-lang="python"]     .code-block__lang::before,
.code-block[data-lang="sql"]        .code-block__lang::before,
.code-block[data-lang="json"]       .code-block__lang::before,
.code-block[data-lang="html"]       .code-block__lang::before,
.code-block[data-lang="prompt"]     .code-block__lang::before {
    content: "◧ "; color: var(--accent); margin-right: 2px;
}
.code-block__copy {
    display: inline-flex; align-items: center; gap: 6px;
    height: 26px; padding: 0 10px;
    font-family: inherit; font-size: 11px;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--muted); background: transparent;
    border: 1px solid var(--border);
    cursor: pointer;
    transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.code-block__copy:hover { color: var(--accent); border-color: var(--accent); }
.code-block__copy:active { transform: translateY(1px); }
.code-block__copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.code-block__copy .code-block__icon { flex: 0 0 auto; }
.code-block__copy .code-block__icon--check { display: none; }
.code-block__copy.is-copied {
    color: var(--accent); border-color: var(--accent);
    background: var(--accent-soft);
}
.code-block__copy.is-copied .code-block__icon--copy  { display: none; }
.code-block__copy.is-copied .code-block__icon--check { display: inline-block; }
.code-block__copy-label { line-height: 1; }

/* Pre inside the wrapper: flatten borders, soft-wrap, no horizontal scroll. */
.art .code-block pre {
    margin: 0;
    padding: 16px 18px;
    background: transparent;
    border: 0;
    overflow-x: visible;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
    tab-size: 2;
    font-size: 13px;
    line-height: 1.6;
    color: var(--fg-soft);
}
.art .code-block pre code {
    background: transparent;
    border: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}

@media (max-width: 640px) {
    .code-block { margin: 18px 0; }
    .code-block__head { padding: 6px 10px 6px 12px; }
    .code-block__copy { height: 24px; padding: 0 8px; font-size: 10.5px; }
    .code-block__copy-label { display: none; } /* icon-only on phones */
    .art .code-block pre { padding: 12px 14px; font-size: 12px; line-height: 1.55; }
}

/* ============ Mobile overflow safety (v5.5) ============
   Grid tracks default to minmax(auto, 1fr) which lets children blow up the
   container when their min-content (long code tokens, wide tables) exceeds the
   viewport. Below we enforce minmax(0, …) on every collapsed grid and make
   tables / inline code shrink to fit. */
@media (max-width: 1100px) {
    .art-layout { grid-template-columns: minmax(0, 1fr); }
    .toc, .meta-side, .art { min-width: 0; }
}
@media (max-width: 960px) {
    .hero,
    .home-grid,
    .g-layout, .pr-layout,
    .pr-grid, .rev-grid,
    .matrix, .stats-bar,
    .scorecard-inner,
    .page-head,
    .ah-hero__head,
    .next { grid-template-columns: minmax(0, 1fr); }

    .art code,
    .scorecard code,
    .meta-side .kv .v,
    .about-author__bio code { overflow-wrap: anywhere; word-break: break-word; }

    .art pre,
    .prompt-block pre { max-width: 100%; }

    .art table { table-layout: fixed; width: 100%; max-width: 100%; font-size: 12px; }
    .art th, .art td { word-break: break-word; overflow-wrap: anywhere; padding: 8px 10px; }
    .art th { font-size: 10px; letter-spacing: 0.06em; }
}
@media (max-width: 640px) {
    .hero h1 { font-size: 26px; }
    .art-head h1 { font-size: 26px; line-height: 1.2; }
    .art h2 { font-size: 19px; margin-top: 36px; }
    .art h3 { font-size: 16px; }
    .art { font-size: 15px; line-height: 1.65; }
    .art p, .art ul, .art ol { margin-bottom: 14px; }
    .art pre { padding: 14px 14px; font-size: 12px; }
    .art table { font-size: 11px; }
    .art th, .art td { padding: 6px 8px; }
    .rev-hero { padding: 40px 20px 28px; }
    .rev-hero h1, .ah-hero__name { font-size: 24px; }
    .wrap, .subnav { padding-left: 16px; padding-right: 16px; }
    .art-layout { padding: 28px 16px; gap: 28px; }
}

/* ── Verdict / Quick-decision block (v6 — clean, no grid hacks) ─────────── */
.art .verdict {
    border: 1px solid color-mix(in oklab, var(--accent), transparent 70%);
    border-left: 3px solid var(--accent);
    background: color-mix(in oklab, var(--accent), transparent 94%);
    margin: 28px 0 32px;
    padding: 0;
}
.art .verdict .vd-label {
    display: block;
    padding: 12px 20px 11px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--accent); font-weight: 600;
    border-bottom: 1px solid color-mix(in oklab, var(--accent), transparent 70%);
}
.art .verdict .vd-rows { display: block; padding: 4px 0; }
.art .verdict .vd-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    padding: 9px 20px;
    font-family: "JetBrains Mono", monospace;
    font-size: 13px; line-height: 1.6;
    border-left: 3px solid transparent;
    margin-left: -3px;
}
.art .verdict .vd-row.vd-pos  { border-left-color: var(--success); }
.art .verdict .vd-row.vd-neg  { border-left-color: var(--danger); }
.art .verdict .vd-row.vd-warn { border-left-color: var(--accent); }
.art .verdict .vd-row.vd-tip  { border-left-color: color-mix(in oklab, var(--muted), transparent 30%); }

.art .verdict .vd-badge {
    flex: 0 0 auto;
    min-width: 110px;
    font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase;
    font-weight: 600;
}
.art .verdict .vd-pos  .vd-badge { color: var(--success); }
.art .verdict .vd-neg  .vd-badge { color: var(--danger); }
.art .verdict .vd-warn .vd-badge { color: var(--accent); }
.art .verdict .vd-tip  .vd-badge { color: var(--muted); }

.art .verdict .vd-val {
    flex: 1 1 280px;
    color: var(--fg-soft);
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
}
@media (max-width: 600px) {
    .art .verdict .vd-row { padding: 10px 16px; gap: 2px 12px; }
    .art .verdict .vd-badge { min-width: 100%; flex-basis: 100%; }
    .art .verdict .vd-val { flex-basis: 100%; font-size: 12.5px; }
}
/* ─────────────────────────────────────────────────────────────────────────── */