/* "Tape Archive": a dark screening room. The archive is old broadcasts and tape transfers, so the video leads,
   fights are shelved as labelled tapes, and amber timecode colour marks what's playing or needs attention.
   One theme on purpose (dark); every colour is a token below. */
:root {
  --bg: #14171c; --surface: #1d2128; --surface-2: #252a32; --text: #e9e6dc; --muted: #959ba4; --line: #2d323b;
  --accent: #f0a43a; --accent-text: #1a1408; --red: #cf3436; --blue: #2c5fcc; --badge: #3a2d13; --badge-text: #f3c57f;
  --label: #ece3c9; --label-ink: #2a251b; --rec: #e2463f;
  --f-display: "Chakra Petch", "Sarabun", system-ui, sans-serif;
  --f-body: "Sarabun", system-ui, -apple-system, "Segoe UI", "Noto Sans Thai", "Noto Sans JP", sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--f-body); }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 1rem; }
main.wrap { padding-top: 1.25rem; padding-bottom: 2.5rem; min-height: 70vh; }
.site-header { background: var(--bg); border-bottom: 1px solid var(--line); }
.bar { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; padding-top: .7rem; padding-bottom: .7rem; }
.brand { font: 700 1.2rem var(--f-display); letter-spacing: .02em; color: var(--text); display: inline-flex; align-items: center; gap: .5rem; }
.brand::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--rec); box-shadow: 0 0 0 3px rgba(226, 70, 63, .25); }
.brand:hover { text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; } nav a { color: var(--muted); font: 500 .95rem var(--f-display); } nav a:hover { color: var(--text); text-decoration: none; }
.search { margin-left: auto; display: flex; gap: .4rem; flex: 1 1 280px; max-width: 420px; }
.search input { flex: 1; }
input, select, button { font: inherit; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); }
button { background: var(--accent); color: var(--accent-text); border-color: var(--accent); cursor: pointer; }
h1, h2, h3 { font-family: var(--f-display); text-wrap: balance; }
h1 { margin: .2rem 0 .3rem; font-size: 2rem; line-height: 1.1; font-weight: 700; }
h2 { margin: 1.8rem 0 .6rem; font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
h3 { margin: 0 0 .4rem; font-size: 1rem; }
.subtitle { margin: 0 0 1rem; font-size: 1.05rem; } .muted { color: var(--muted); } .small { font-size: .88rem; } .nowrap { white-space: nowrap; }
.th { font-family: var(--f-body); }
.hero { padding: 1.2rem 0 .6rem; } .crumbs { margin: 0 0 .5rem; font-size: .9rem; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2.5rem; }
.two-col.wide-left { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 760px) { .two-col, .two-col.wide-left { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.1rem; }
.card h3 { font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.card dl { margin: 0 0 1rem; } .card dt { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-top: .6rem; } .card dd { margin: 0; }
ul.plain { list-style: none; margin: 0; padding: 0; } ul.plain li { padding: .35rem 0; border-bottom: 1px solid var(--line); }
.count { display: inline-block; margin-left: .4rem; padding: 0 .5rem; border-radius: 999px; background: var(--line); font-size: .8rem; color: var(--muted); }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: .6rem 0 1rem; } .filters input[type=search] { flex: 1 1 220px; }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; } th, td { padding: .55rem .8rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 600 .74rem var(--f-display); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); } tr:last-child td { border-bottom: 0; } .num { text-align: right; }
.badge { margin-left: .4rem; padding: .05rem .45rem; border-radius: 3px; background: var(--badge); color: var(--badge-text); font: 600 .72rem var(--f-display); letter-spacing: .03em; white-space: nowrap; }
.notice { background: var(--badge); color: var(--badge-text); padding: .6rem .9rem; border-radius: 8px; }
.dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; margin-right: .4rem; background: var(--muted); } .dot.red { background: var(--red); } .dot.blue { background: var(--blue); }
.video { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; } .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.prose { margin: 1rem 0; } .pager { display: flex; gap: 1rem; justify-content: center; align-items: center; margin: 1.2rem 0; }
footer { padding-top: 1rem; padding-bottom: 2rem; border-top: 1px solid var(--line); }

.badge.num { background: var(--line); color: var(--muted); }

.account { display: flex; flex-wrap: wrap; gap: .3rem .9rem; align-items: center; } .account form { margin: 0; }
button.link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; } button.link:hover { text-decoration: underline; }
.edit-links { float: right; display: flex; gap: .8rem; margin-top: .5rem; }
.form-card { max-width: 26rem; margin: 1.5rem auto; } .form-card p { margin: 0 0 .8rem; }
.form-card label { display: block; font-size: .9rem; margin-bottom: .2rem; } .form-card input { width: 100%; }
.form-card .helptext, .form-card .helptext ul { font-size: .8rem; color: var(--muted); margin: .2rem 0 0; padding-left: 1rem; }
.errorlist { color: var(--red); font-size: .88rem; margin: .2rem 0; padding-left: 1rem; }

/* ───────────── accounts, editing, review ───────────── */
.count.hot { background: var(--accent); color: var(--accent-text); }
details.menu { position: relative; } details.menu summary { cursor: pointer; list-style: none; } details.menu summary::after { content: " ▾"; }
.menu-body { position: absolute; right: 0; top: 1.6rem; z-index: 10; background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
             padding: .5rem .8rem; display: grid; gap: .4rem; min-width: 10rem; box-shadow: 0 4px 16px rgba(0,0,0,.12); }
button.secondary, a.button.secondary { background: var(--surface); color: var(--text); border-color: var(--line); }
a.button { display: inline-block; padding: .4rem .6rem; border: 1px solid var(--accent); border-radius: 6px; background: var(--accent); color: var(--accent-text); }
a.button:hover { text-decoration: none; }
.notice.success, .notice.info { background: var(--line); color: var(--text); }
.edit-form { max-width: 44rem; } .edit-form.wide { max-width: none; }
.field { margin: 0 0 1rem; } .field > label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: .25rem; }
.field input:not([type=checkbox]):not([type=file]), .field textarea, .field select { width: 100%; }
.field.check label { font-weight: 400; display: flex; gap: .5rem; align-items: center; }
textarea { font: inherit; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); }
.helptext { font-size: .82rem; color: var(--muted); margin: .25rem 0 0; }
.has-error input, .has-error textarea { border-color: var(--red); }
.form-errors { color: var(--red); }
.actions { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin: 1.2rem 0; }
kbd { font: .85em ui-monospace, monospace; padding: 0 .3rem; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }

.picker .chips { list-style: none; margin: 0 0 .35rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .25rem .15rem .6rem; border-radius: 999px; background: var(--line); font-size: .9rem; }
.chip-x { background: none; border: 0; color: var(--muted); padding: 0 .35rem; font-size: 1rem; line-height: 1; }
.chip-x:hover { color: var(--red); }
.picker-search { position: relative; }
.suggestions { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; list-style: none; margin: .2rem 0 0; padding: .25rem 0;
               background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.15); max-height: 18rem; overflow-y: auto; }
.suggestion { padding: .4rem .7rem; cursor: pointer; } .suggestion.active, .suggestion:hover { background: var(--line); }

table.diff th[scope], table.diff tbody th { text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--text); white-space: nowrap; }
table.diff tr.same td { color: var(--muted); }
del { background: rgba(211, 47, 47, .14); text-decoration: line-through; } ins { background: rgba(46, 160, 67, .18); text-decoration: none; }
.review-inline { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; } .review-inline input { flex: 1 1 16rem; }
.review-photos { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.review-photos li { display: flex; gap: .8rem; align-items: center; } .review-photos label { display: flex; gap: .7rem; align-items: center; flex: 1; }
.review-photos img { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; }

/* ───────────── photos, articles, tags ───────────── */
.photo-grid { list-style: none; margin: .5rem 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.photo-grid a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: var(--line); }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; } .photo-grid a:hover img { transform: scale(1.04); }
.photo-grid .badge { position: absolute; left: .3rem; bottom: .3rem; margin: 0; }
.photo-full { margin: .5rem 0 1.2rem; text-align: center; }
.photo-full img { max-height: 78vh; width: auto; max-width: 100%; border-radius: 10px; background: #000; }
.photo-full figcaption { margin-top: .5rem; color: var(--muted); }
img.rounded { border-radius: 10px; }
.tag { display: inline-block; margin: 0 .3rem .3rem 0; padding: .05rem .55rem; border-radius: 999px; border: 1px solid var(--line); font-size: .85rem; }
.tag-cloud { margin: .4rem 0 1rem; }
.article-list { list-style: none; padding: 0; margin: .4rem 0 1rem; display: grid; gap: 1rem; }
.article-list li { display: flex; gap: 1rem; align-items: flex-start; }
.article-list .cover { flex: 0 0 120px; } .article-list .cover img { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; }
.article-list h3 { font-size: 1.1rem; margin: 0 0 .2rem; } .article-list p { margin: 0 0 .2rem; }
.article { max-width: 46rem; margin: 0 auto; } .lede { font-size: 1.15rem; }
.article-body { font-size: 1.05rem; line-height: 1.7; }
/* photos in an article: never taller than most of the screen nor tiny; click one to see it full size (lightbox.js) */
.article-body img { display: block; margin: 1.4rem auto; width: auto; height: auto; max-width: 100%;
  max-height: min(70vh, 32rem); min-width: min(14rem, 100%); object-fit: contain; border-radius: 8px; background: var(--surface); }
.article-body img.zoomable { cursor: zoom-in; }
.article-body figure { margin: 1.4rem auto; text-align: center; } .article-body figure img { margin: 0 auto; }
.article-body figcaption { color: var(--muted); font-size: .9rem; margin-top: .4rem; }
.article-body blockquote { margin: 1rem 0; padding: .2rem 1rem; border-left: 3px solid var(--accent); color: var(--muted); }
.article-body iframe { max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 8px; }
.article-body table { border: 1px solid var(--line); }
.article-meta { max-width: 46rem; margin: 2rem auto 0; }
@media (max-width: 520px) { .article-list .cover { flex-basis: 84px; } .article-list .cover img { width: 84px; height: 64px; } }
/* home page: two small cards side by side, so the fights and fighters stay the focus */
.article-list.compact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.article-list.compact .cover { flex-basis: 72px; } .article-list.compact .cover img { width: 72px; height: 54px; }
.article-list.compact h3 { font-size: .98rem; }
.article-list.compact li > div > p:not(.muted) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .92rem; }
.edit-links + .notice { clear: both; }

/* ───────────── fighter header photo, Wikipedia search, multi-part fights ───────────── */
.fighter-header { display: block; margin: .5rem 0 1rem; border-radius: 10px; overflow: hidden; background: var(--line); }
.fighter-header img { display: block; width: 100%; height: 22rem; max-height: 50vh; object-fit: cover; object-position: center 25%; }
.photo-choice { display: flex; flex-wrap: wrap; gap: .5rem; }
.photo-option { position: relative; cursor: pointer; }
.field .photo-option input[type=radio] { position: absolute; opacity: 0; width: auto; }
.photo-option img, .photo-option span { display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 96px; height: 72px; object-fit: cover; border-radius: 6px; border: 3px solid transparent; background: var(--line); color: var(--muted); }
.photo-option input:checked + img, .photo-option input:checked + span { border-color: var(--accent); }
.photo-option input:focus-visible + * { outline: 2px solid var(--accent); outline-offset: 2px; }
.wiki-search { margin-top: .35rem; }
.wiki-panel { margin-top: .4rem; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.wiki-query { display: flex; gap: .4rem; } .field .wiki-query input { flex: 1; width: auto; }
.wiki-results li { display: flex; justify-content: space-between; align-items: center; gap: .8rem; }
.part-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .5rem; }
.part-tabs a { padding: .2rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); }
.part-tabs a[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.part-tabs a[aria-current] .muted { color: inherit; opacity: .8; }

/* ───────────── Tape Archive pieces ───────────── */
.search input { background: var(--surface); }
/* fight page: a slim red-vs-blue title above the player */
.bout { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin: .3rem 0 .5rem; border-radius: 8px; overflow: hidden; }
.bout.attached { border-radius: 8px 8px 0 0; margin-bottom: 0; }
.bout .side { min-width: 0; padding: .55rem 2.2rem .6rem 1rem; display: grid; align-content: center; gap: .05rem; color: #fff; }
.bout .side.red { background: var(--red); }
.bout .side.blue { background: var(--blue); text-align: right; padding: .55rem 1rem .6rem 2.2rem; }
.bout .corner { font: 600 .66rem var(--f-display); letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.bout .names { font: 700 clamp(1.05rem, 2.4vw, 1.45rem)/1.15 var(--f-display); text-transform: uppercase; overflow-wrap: anywhere; }
.bout .names a { color: inherit; } .bout .names .half { font: 500 .7rem var(--f-display); opacity: .8; text-transform: none; }
.bout .other { font-size: .88rem; opacity: .88; }
.bout .vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--bg); color: var(--text);
  font: 700 .85rem var(--f-display); padding: .3rem .45rem; border-radius: 3px; }
.fight-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0 0 .9rem; }
.fight-meta > span { font: 600 .78rem var(--f-display); border: 1px solid var(--line); border-radius: 4px; padding: .12rem .5rem; color: var(--muted); }
.fight-meta .badge { margin: 0; padding: .15rem .5rem; }
@media (max-width: 520px) { .bout { grid-template-columns: 1fr; } .bout .side.blue { text-align: left; padding: .55rem 1rem .6rem; }
  .bout .side.red { padding-right: 1rem; } .bout .vs { left: auto; right: .6rem; top: 50%; } }
/* fights shelved as labelled tapes */
.shelf { list-style: none; margin: .4rem 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .7rem; }
.tape { display: grid; grid-template-rows: 1fr auto; background: var(--surface); border-radius: 6px; overflow: hidden; color: var(--text); min-width: 0; }
.tape:hover { text-decoration: none; background: var(--surface-2); }
.tape .label { margin: .5rem .5rem 0; padding: .45rem .6rem .5rem; border-radius: 2px; display: grid; gap: .1rem; align-content: start;
  background: var(--label) repeating-linear-gradient(0deg, transparent 0 15px, rgba(42, 37, 27, .12) 15px 16px); color: var(--label-ink); }
.tape .label b { font: 700 .92rem/1.25 var(--f-display); overflow-wrap: anywhere; }
.tape .label small { font-size: .8rem; opacity: .78; }
.tape .foot { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: space-between; align-items: center; padding: .45rem .65rem .55rem;
  font: 600 .76rem var(--f-display); color: var(--muted); }
.tape .foot .tc { color: var(--accent); font-variant-numeric: tabular-nums; margin-left: auto; }
.tape .foot .badge { margin: 0; }
.part-tabs a[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.notice.help-identify { border-left: 3px solid var(--accent); }
.hero h1 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bout.attached + .video { border-radius: 0 0 8px 8px; }
.part-tabs { margin: .6rem 0 .4rem; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* articles: categories, series */
.eyebrow { margin: 0 0 .3rem; font: 600 .78rem var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.eyebrow a { color: inherit; }
.article-nav a[aria-current] { color: var(--text); font-weight: 600; }
/* series and category photos: a random article cover each visit */
.nav-covers li { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.nav-thumb { width: 44px; height: 33px; object-fit: cover; border-radius: 4px; flex: none; }
.collection-cover { display: block; margin: .4rem 0 1rem; border-radius: 10px; overflow: hidden; background: var(--line); }
.collection-cover img { display: block; width: 100%; height: 14rem; max-height: 35vh; object-fit: cover; object-position: center 30%; }
.series-parts { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: .5rem; }
.series-parts li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .8rem; align-items: baseline; padding: .6rem .8rem; background: var(--surface); border-radius: 6px; }
.series-parts .part-no { font: 700 1.1rem var(--f-display); color: var(--accent); font-variant-numeric: tabular-nums; text-align: right; }
.series-parts p { margin: .15rem 0 0; }
.series-mini { margin: 0 0 1rem; padding-left: 1.4rem; display: grid; gap: .25rem; font-size: .92rem; }
.series-pager { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 2rem 0 0; }
.series-pager a { display: grid; gap: .1rem; padding: .7rem .9rem; background: var(--surface); border-radius: 6px; color: var(--text); }
.series-pager a:hover { background: var(--surface-2); text-decoration: none; }
.series-pager small { font: 600 .74rem var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.series-pager .next { text-align: right; grid-column: 2; }
@media (max-width: 520px) { .series-pager { grid-template-columns: 1fr; } .series-pager .next { grid-column: auto; } }
/* fighter pages: fights as a dated list of tapes, by year */
h3.year { margin: 1.1rem 0 .4rem; font: 700 1.05rem var(--f-display); color: var(--text); font-variant-numeric: tabular-nums; }
.tape-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.tape-row { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr) auto 4.2rem; gap: .8rem; align-items: center;
  padding: .45rem .7rem .45rem .5rem; background: var(--surface); border-radius: 6px; color: var(--text); }
.tape-row:hover { background: var(--surface-2); text-decoration: none; }
.tape-row .when { font: 600 .86rem var(--f-display); font-variant-numeric: tabular-nums; color: var(--text); padding-left: .3rem; }
.tape-row .when.unknown { color: var(--muted); font-style: italic; font-weight: 500; }
.tape-row .label { display: grid; gap: .05rem; min-width: 0; padding: .3rem .55rem; border-radius: 2px; background: var(--label); color: var(--label-ink); }
.tape-row .label b { font: 700 .92rem/1.25 var(--f-display); overflow-wrap: anywhere; }
.tape-row .label small { font-size: .78rem; opacity: .75; overflow-wrap: anywhere; }
.tape-row .flags { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; align-items: center; font: 600 .76rem var(--f-display); color: var(--muted); }
.tape-row .flags .badge { margin: 0; }
.tape-row .corner { display: inline-flex; align-items: center; white-space: nowrap; }
.tape-row .tc { font: 600 .8rem var(--f-display); color: var(--accent); font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 620px) {
  .tape-row { grid-template-columns: 1fr auto; gap: .35rem .6rem; }
  .tape-row .label { grid-column: 1 / -1; grid-row: 2; }
  .tape-row .flags { grid-column: 1 / -1; grid-row: 3; justify-content: flex-start; }
  .tape-row .when { padding-left: 0; }
}
/* fighter pages: nicknames and career record under the name */
.nicknames { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin: 0 0 .5rem; font-style: italic; color: var(--muted); }
.record-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.4rem; margin: 0 0 1rem; }
.record-line > span { display: inline-flex; align-items: baseline; gap: .4rem; }
.record-line small { font: 600 .74rem var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.record-line b { font: 700 1.25rem var(--f-display); color: var(--accent); font-variant-numeric: tabular-nums; }
.record-line > small.muted { text-transform: none; letter-spacing: 0; font-family: var(--f-body); }
.fighter-header-fig { margin: .5rem 0 1rem; } .fighter-header-fig .fighter-header { margin: 0; } .fighter-header-fig figcaption { margin-top: .3rem; text-align: right; }
/* article editor: grammar suggestions under the editor, preview page banner */
.grammar-panel { margin-top: .8rem; padding: .8rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.grammar-panel h3 { margin: 0 0 .6rem; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.grammar-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; max-height: 22rem; overflow-y: auto; }
.grammar-list li { padding: .5rem .7rem; border-radius: 6px; background: var(--surface-2); cursor: pointer; display: grid; gap: .3rem; }
.grammar-list li:hover { outline: 1px solid var(--line); }
.grammar-list li.stale { opacity: .55; }
.grammar-list .msg { margin: 0; font-weight: 600; }
.grammar-list .ctx { font-size: .9rem; color: var(--muted); overflow-wrap: anywhere; }
.grammar-list mark { background: var(--badge); color: var(--badge-text); padding: 0 .15rem; border-radius: 2px; }
.grammar-list .fixes { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.grammar-list .fixes button.secondary { padding: .15rem .55rem; font-size: .88rem; }
.preview-banner { border-left: 3px solid var(--accent); }

/* lightbox: one article photo, full size */
dialog.lightbox { max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  background: rgba(10, 12, 15, .94); color: var(--text); }
dialog.lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
dialog.lightbox::backdrop { background: transparent; }
dialog.lightbox img { justify-self: center; align-self: center; max-width: calc(100vw - 2rem); max-height: calc(100vh - 6rem);
  width: auto; height: auto; object-fit: contain; border-radius: 4px; }
dialog.lightbox .lb-caption { padding: .6rem max(16px, env(safe-area-inset-left, 0px)) calc(.9rem + env(safe-area-inset-bottom, 0px));
  text-align: center; font-size: .92rem; color: var(--muted); }
dialog.lightbox .lb-caption a { margin-left: .5rem; }
dialog.lightbox .lb-close { position: absolute; top: calc(.6rem + env(safe-area-inset-top, 0px)); right: calc(.8rem + env(safe-area-inset-right, 0px));
  width: 2.4rem; height: 2.4rem; border-radius: 50%; padding: 0; font-size: 1.4rem; line-height: 1;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
/* an article's header and footer (credit, "to be continued"): set apart from the text */
.article-note { margin: 1.2rem 0; padding: .6rem 1rem; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 6px 6px 0; font-size: .95rem; color: var(--muted); }
.article-note p { margin: .3rem 0; }

/* how to help */
.help-steps { padding-left: 1.3rem; display: grid; gap: .7rem; } .help-steps li::marker { color: var(--accent); font-weight: 700; }
.contributors { padding: 0; margin: 0; list-style: none; }
.contributors li { display: flex; justify-content: space-between; gap: .5rem; padding: .25rem 0; border-bottom: 1px solid var(--line); }

/* checking fights one at a time */
.check-actions form { display: grid; gap: .55rem; }
.check-actions .wide { width: 100%; text-align: center; padding: .6rem .8rem; }
.check-actions .secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--line); }
.check-actions .link { background: none; border: none; color: var(--muted); }
.not-fight summary { cursor: pointer; color: var(--muted); padding: .3rem 0; }
.not-fight[open] { display: grid; gap: .5rem; }

/* results are spoilers: censored until "Show results" (fighter page) or a click (fight page) */
.result-badge { display: inline-block; min-width: 1.7rem; padding: 0 .3rem; border-radius: 3px; text-align: center; font: 700 .74rem/1.5 var(--f-display); }
.r-w { background: #1f6b3a; color: #e6f4ea; } .r-l { background: #7a2526; color: #fbe9e9; } .r-d, .r-nc { background: var(--surface-2); color: var(--text); }
html:not(.show-results) .result-badge { background: var(--line); color: transparent; user-select: none; }
html:not(.show-results) .results-summary { display: none; }
.results-summary { margin: -.2rem 0 .6rem; }
h2.with-tool { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
h2.with-tool .results-toggle { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600; }
.result-spoiler summary { cursor: pointer; color: var(--accent); }
.result-spoiler[open] summary { display: none; }

/* merging duplicate fighters */
.merge-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; margin: 1rem 0; }
.merge-card { display: grid; gap: .3rem; cursor: pointer; } .merge-card:has(input:checked) { border-color: var(--accent); }
.merge-card .keep { font: 600 .85rem var(--f-display); color: var(--accent); }
textarea.wide { width: 100%; box-sizing: border-box; }

.photo-actions { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; margin: .2rem 0 1rem; }
nav a.nav-help { color: var(--accent); }