/* Additions for the long read about Claude Fable 5.2 (/p/claude-fable-5-2, resources/views/blog/fable-52).
   The page loads blog-anthropic-ipo.css first and uses its .ipo-* layout; this file only adds the
   benchmark charts and tables. Static, no Vite entry. */

.ipo-page {
    --f52-main: var(--accent);
    --f52-prev: #c9a58f;
    --f52-opus: #5d6b7e;
    --f52-rival: #8a8f98;
    --f52-ind: #1f7a72;
}
@media (prefers-color-scheme: dark) {
    .ipo-page { --f52-prev: #7d5a48; --f52-opus: #8794a8; --f52-rival: #6f757f; --f52-ind: #4fb3a9; }
}

/* who measured it */
.f52-src {
    flex: 0 0 auto;
    align-self: flex-start;
    padding: 3px 9px;
    border-radius: 999px;
    font-family: var(--font-ui);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    border: 1px solid currentColor;
}
.f52-src--a { color: var(--accent-2); }
.f52-src--i { color: var(--f52-ind); }
@media (prefers-color-scheme: dark) { .f52-src--a { color: var(--accent); } }
.f52-fig .ipo-fig__head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-start; justify-content: space-between; }

/* bars by tone */
.f52-bars li { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); }
.f52-tone--main .ipo-hbars__bar { background: var(--f52-main); }
.f52-tone--prev .ipo-hbars__bar { background: var(--f52-prev); }
.f52-tone--opus .ipo-hbars__bar { background: var(--f52-opus); }
.f52-tone--rival .ipo-hbars__bar { background: var(--f52-rival); }
.f52-tone--main .ipo-hbars__val { color: var(--accent-2); }
@media (prefers-color-scheme: dark) { .f52-tone--main .ipo-hbars__val { color: var(--accent); } }
@media (max-width: 560px) { .f52-bars li { grid-template-columns: minmax(0, 1fr); } }

/* paired bars: sandbox */
.f52-pair { display: grid; gap: 4px; min-width: 0; }
.f52-bars--pair .ipo-hbars__bar { height: 12px; }
.f52-bars--pair .f52-bar--reach { opacity: 0.45; }
.f52-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; list-style: none; padding: 0; font-family: var(--font-ui); font-size: 12.5px; color: var(--muted); }
.f52-legend li::before { content: ''; display: inline-block; width: 12px; height: 10px; margin-right: 6px; border-radius: 2px; background: var(--accent); }
.f52-legend__reach::before { opacity: 0.45; }

/* tables */
.f52-scroll { margin-top: 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.f52-table { width: 100%; min-width: 560px; border-collapse: collapse; font-family: var(--font-ui); font-size: 14.5px; }
.f52-table th, .f52-table td { padding: 9px 10px 9px 0; border-bottom: 1px dashed var(--line); text-align: left; vertical-align: baseline; }
.f52-table thead th { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); border-bottom: 1.5px solid var(--ink); white-space: nowrap; }
.f52-table tbody th { font-weight: 650; color: var(--ink); }
.f52-table tbody th span { display: block; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.f52-table td { font-family: var(--font-mono); font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-2); }
.f52-table--cmp thead th:nth-child(2), .f52-table--cmp td:nth-child(2) { color: var(--accent-2); }
@media (prefers-color-scheme: dark) { .f52-table--cmp thead th:nth-child(2), .f52-table--cmp td:nth-child(2) { color: var(--accent); } }
.f52-table td.is-best { font-weight: 800; color: var(--ink); }
.f52-table td.is-none { color: var(--muted); }
.f52-table--vals td:last-child { font-family: var(--font-ui); white-space: normal; color: var(--muted); }
.f52-vals--good td:nth-child(3) { color: var(--good); font-weight: 700; }
.f52-vals--bad td:nth-child(3) { color: var(--bad); font-weight: 700; }
.f52-table--effort { min-width: 440px; }
.f52-table--effort td { width: 30%; }
.f52-table--effort td:nth-child(2) { width: 14%; }
.f52-cellbar { display: block; height: 6px; width: var(--w); min-width: 3px; max-width: 100%; margin-bottom: 5px; border-radius: 3px; background: var(--f52-rival); }
.f52-tone--main .f52-cellbar { background: var(--f52-main); }
.f52-tone--opus .f52-cellbar { background: var(--f52-opus); }
.f52-tone--prev .f52-cellbar { background: var(--f52-prev); }
.f52-cellbar--cost { opacity: 0.6; }

/* claim against check */
.f52-checks { display: grid; gap: 14px; }
.f52-check { border: 1px solid var(--line); border-radius: var(--r); background: var(--paper-2); overflow: hidden; }
.f52-check > h3 { margin: 0 !important; padding: 14px 20px 0; font-size: 18px; }
.f52-check dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 12px 0 0; }
.f52-check dl > div { padding: 12px 20px 16px; border-top: 1px solid var(--line); }
.f52-check dl > div + div { border-left: 1px solid var(--line); background: color-mix(in srgb, var(--f52-ind) 7%, var(--paper-2)); }
.f52-check dt { font-family: var(--font-ui); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.f52-check dd { margin: 0; font-size: 16px; line-height: 1.55; }
@media (max-width: 640px) {
    .f52-check dl { grid-template-columns: minmax(0, 1fr); }
    .f52-check dl > div + div { border-left: 0; }
}

/* price table */
.f52-table--price td:last-child { font-family: var(--font-ui); white-space: normal; color: var(--muted); }
.f52-table--price { min-width: 480px; }