/* /benchmark, the proof, set as data. Loaded after static/d.css and static/read.css by templates/benchmark.html.
   Colours carry one meaning each: poppy is albanisht, slate is Google Translate, cobalt is DeepL; a pass is green,
   a fail is poppy. Every bar repeats a number printed beside it (the bars are aria-hidden SVG whose widths the
   template writes as attributes from the published run). On a phone each table row becomes a card; the tables
   keep explicit roles so screen readers still read rows and headers. */

.bn-page { --ours: #B3122E; --google: #7C879C; --deepl: #1B4FA8; --pass: #0E6B4E; --pass-bg: #E6F3EC; --fail-bg: #FBE9EC; }
.bn-hero { background: radial-gradient(55% 80% at 92% 0%, #E8F0FB 0%, rgba(232,240,251,0) 70%), radial-gradient(40% 60% at 0% 0%, #FFF6E6 0%, rgba(255,246,230,0) 70%); }
.bn-hero .rd-lede { max-width: 44em; }
.bn-body { padding-bottom: 104px; }

/* ── The two scores ── */
.bn-score { display: grid; gap: 14px; }
@media (min-width: 760px) { .bn-score.is-pair { grid-template-columns: 1fr 1fr; gap: 20px; } }
.bn-side { position: relative; padding: 26px 24px 28px; border-radius: 26px; background: var(--mist); overflow: hidden; }
@media (min-width: 960px) { .bn-side { padding: 36px 40px 40px; } }
.bn-side.is-ours { background: linear-gradient(160deg, #FFF7F3 0%, #FBEEF0 100%); }
.bn-label { margin: 0; font: 600 16px/1.2 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--navy-2); }
.bn-num { margin: 10px 0 0; font: 400 clamp(112px, 17vw, 208px)/.82 var(--display); letter-spacing: -0.045em; font-variant-numeric: lining-nums tabular-nums; color: var(--navy); }
.is-ours .bn-num { color: var(--ours); }
.bn-den { margin: 14px 0 0; font: 500 18px/1.4 var(--ui); color: var(--navy); }
.bn-side .bn-bar { margin-top: 22px; height: 10px; }

/* the bars (SVG; width = the share already printed beside them) */
.bn-bar { display: block; width: 100%; height: 8px; border-radius: 999px; overflow: hidden; }
.bn-track { fill: rgba(11,21,48,.08); }
.bn-bar.is-ours .bn-fill { fill: var(--ours); }
.bn-bar.is-google .bn-fill { fill: var(--google); }
.bn-bar.is-deepl .bn-fill { fill: var(--deepl); }

/* ── How it was graded, where it came from, its limits ── */
.bn-notes { display: grid; gap: 14px; margin-top: 14px; }
@media (min-width: 960px) { .bn-notes { grid-template-columns: 1.15fr 1fr; gap: 20px; margin-top: 20px; } .bn-note.is-method { grid-row: span 2; } }
.bn-note { margin: 0; padding: 22px 24px; border-radius: 22px; border: 1px solid var(--line); font-size: 17px; line-height: 1.65; color: var(--navy-2); }
@media (min-width: 960px) { .bn-note { padding: 28px 32px; } }
.bn-note > p { margin: 0; }
.bn-prov { margin-top: 16px !important; padding-top: 16px; border-top: 1px solid var(--line); font-size: 16px; }
.bn-note strong { display: block; margin-bottom: 6px; font: 400 26px/1.15 var(--display); letter-spacing: -0.01em; color: var(--navy); }
.bn-note code { padding: 1px 6px; border-radius: 6px; background: var(--mist); font-size: .9em; color: var(--navy); }
.bn-note.is-caveat { border-color: #EBD9B4; background: #FFFAF0; }
.bn-note.is-caveat strong { color: #6E4B06; }
.bn-fine { margin: 16px 0 0; max-width: 68ch; font-size: 16px; line-height: 1.6; color: var(--navy-2); }
.bn-fine a, .bn-details a, .bn-empty a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; }
.bn-empty-h { margin: 0 0 6px; font: 400 32px/1.15 var(--display); color: var(--navy); }

/* ── By category ── */
.bn-sec { margin-top: 88px; }
.bn-h2 { margin: 0; font: 400 clamp(40px, 5.4vw, 72px)/.98 var(--display); letter-spacing: -0.03em; color: var(--navy); text-wrap: balance; }
.bn-sub { margin: 14px 0 0; max-width: 60ch; font-size: 18px; line-height: 1.6; color: var(--navy-2); }
.bn-cat, .bn-rows { width: 100%; margin-top: 28px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.bn-cat thead th, .bn-rows thead th { padding: 0 16px 12px 0; border-bottom: 1.5px solid var(--navy); font: 600 16px/1.3 var(--ui); color: var(--navy-2); text-align: left; vertical-align: bottom; }
.bn-key { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 50%; vertical-align: 0; }
.bn-key.is-ours { background: var(--ours); } .bn-key.is-google { background: var(--google); } .bn-key.is-deepl { background: var(--deepl); }
.bn-cat tbody th, .bn-cat td { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.bn-cat tbody th { font: 400 24px/1.15 var(--display); color: var(--navy); }
.bn-v { display: block; font: 600 17px/1.3 var(--ui); color: var(--navy); }
.bn-pct { font-weight: 500; color: var(--navy-2); }
.bn-rate .bn-bar { margin-top: 10px; max-width: 220px; }
.bn-delta .bn-v { font-weight: 700; }
.delta-win .bn-v { color: var(--pass); }
.delta-loss .bn-v { color: var(--navy-2); }
.bn-muted { color: var(--navy-2); font-weight: 500; }
.bn-k { display: none; }
@media (min-width: 760px) {
  .bn-cat tbody th { width: 34%; }
}
@media (max-width: 759px) {
  .bn-cat thead, .bn-rows thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bn-cat, .bn-cat tbody, .bn-rows, .bn-rows tbody { display: block; }
  .bn-cat tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 20px; padding: 20px 0; border-bottom: 1px solid var(--line); }
  .bn-cat tbody th, .bn-cat td { display: block; padding: 0; border: 0; }
  .bn-cat tbody th { grid-column: 1 / -1; }
  .bn-k { display: block; margin-bottom: 4px; font: 500 16px/1.3 var(--ui); color: var(--navy-2); }
}

/* ── The method, and every case ── */
.bn-details { margin-top: 20px; border-radius: 22px; background: var(--mist); }
.bn-sec + .bn-details { margin-top: 64px; }
.bn-details > summary { min-height: 64px; display: flex; align-items: center; gap: 12px; padding: 0 24px; border-radius: 22px; list-style: none; cursor: pointer;
  font: 400 clamp(24px, 2.6vw, 32px)/1.15 var(--display); color: var(--navy); }
.bn-details > summary::-webkit-details-marker { display: none; }
.bn-details > summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-left: auto; border: solid var(--navy-2); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-3px); transition: transform .25s var(--ease); }
.bn-details[open] > summary::after { transform: rotate(-135deg) translate(-2px, -1px); }
.bn-details-body { padding: 0 24px 24px; }
.bn-details-body > p { margin: 0; max-width: 68ch; font-size: 17px; line-height: 1.7; color: var(--navy-2); }
.bn-cases[open] { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
@media (min-width: 960px) { .bn-details > summary { padding: 0 32px; } .bn-details-body { padding: 0 32px 32px; } }

.bn-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.bn-page .bench-filter { min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 500 16px var(--ui); color: var(--navy); cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.bn-page .bench-filter:hover { border-color: var(--navy); }
.bn-page .bench-filter.is-active { border-color: var(--navy); background: var(--navy); color: #fff; }

.bn-rows tbody td { padding: 18px 20px 18px 0; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
.bn-rows thead th:first-child { width: 13%; }
.bn-rows thead th:nth-child(2) { width: 27%; }
.bn-cat-cell { font: 500 16px/1.35 var(--ui); color: var(--navy-2); }
.bn-src { font: 400 23px/1.25 var(--display); color: var(--navy); overflow-wrap: anywhere; }
.bn-ans { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
.bn-mark { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; font: 700 16px/1 var(--ui); }
.bn-mark.is-pass { background: var(--pass-bg); color: var(--pass); }
.bn-mark.is-fail { background: var(--fail-bg); color: var(--poppy); }
.bn-why { margin: 8px 0 0 34px; padding: 0; list-style: none; font-size: 16px; line-height: 1.55; color: var(--navy-2); }
.bn-why li + li { margin-top: 6px; }
@media (max-width: 759px) {
  .bn-rows tr { display: grid; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--line); }
  .bn-rows tbody td { display: block; padding: 0; border: 0; }
  .bn-cat-cell { letter-spacing: .06em; text-transform: uppercase; }
}

@media (prefers-reduced-motion: reduce) { .bn-details > summary::after, .bn-page .bench-filter { transition: none; } }