/* =============================================================================
   mma.css — EZ Score's fight desk (labs.llc/ezscore/mma/), labs 546
   -----------------------------------------------------------------------------
   The six pages that were mma.com.im, in labs.llc's chrome. Loaded after EZ Score's own site.css / micro.css /
   dark.css; every class here carries the mm- prefix, and every colour reads a labs.llc token or one of the four
   desk tokens below, answered for both editions in this file (html[data-dark]).

   THE CLASS CONTRACT. The source ran on the 544 house kit, whose classes (chips, note, tablewrap, t, n, mono, tag,
   link, live, prose, label, input, select, status, src, grid, card …) do not exist in labs.llc's sheets. They are
   either labs.llc's own now (seg/seg__b for the promotion chips, lbl for labels, field for the filter, hint for
   notes, eyebrow/d1/lede/btn/band for the page) or re-expressed here under mm-. ezscore/tools/test.py gates both
   directions: every class the pages and mma-site.js use has a rule, and every rule here is used — including the
   ones the script builds by concatenation (mm-f--a/b, mm-bout--pre/in/post, mm-ev--next/last, is-won, is-lost,
   is-stale), which a static scan cannot see and the gate lists by name.

   CONTRAST (WCAG relative luminance, measured 2026-09-28): --mm-accent-ink #9A3412 is 7.31:1 on white and 7.00:1
   on #FAFAFA; #FDBA74 is 10.50:1 on the dark card #121920. --mm-won #166534 is 7.13:1 on white and 6.83:1 on
   #FAFAFA; #4ADE80 is 10.16:1 on #121920. --mm-bad is the house --taken: #B91C1C 6.47:1 on white, #F87171 6.40:1
   on #121920. The test measures the rendered text of both editions again.
   ========================================================================== */

:root {
    --mm-card:       var(--paper);
    --mm-radius:     12px;
    --mm-mono:       ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --mm-accent-ink: #9A3412;
    --mm-won:        #166534;
    --mm-bad:        var(--taken);
}
html[data-dark] {
    --mm-card:       #121920;
    --mm-accent-ink: #FDBA74;
    --mm-won:        #4ADE80;
}

.mm-mono { font-family: var(--mm-mono); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ the desk's own row of pages */
.mm-desk { border-bottom: 1px solid var(--line); background: var(--paper); }
.mm-desk__in { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; padding-block: 2px; }
.mm-desk a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
    font-size: .84rem; font-weight: 600; letter-spacing: -.005em; color: var(--ink-77); text-decoration: none;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.mm-desk a:hover { color: var(--ink); }
.mm-desk a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.mm-desk a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mm-desk__ez { margin-left: auto; }
@media (max-width: 620px) { .mm-desk a { padding: 0 9px; font-size: .8rem; } .mm-desk__ez { margin-left: 0; } }

/* ------------------------------------------------------------------ hero */
.mm-hero { position: relative; overflow: hidden; }
.mm-hero__oct {
    position: absolute; right: var(--gutter); top: 50%; width: 240px; height: auto;
    transform: translateY(-50%); color: var(--accent); opacity: .9; pointer-events: none; display: none;
}
.mm-hero__oct .mm-oct__faint { stroke: var(--line); }
@media (min-width: 1400px) { .mm-hero__oct { display: block; } }

/* ------------------------------------------------------------------ the instrument */
.mm-tool .eyebrow { margin-bottom: 1.1rem; }
.mm-bar { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: end; justify-content: space-between; }
.mm-bar__l { display: grid; gap: 2px; min-width: 0; }
.mm-bar__l .lbl { margin-bottom: .35rem; }
.mm-bar__r { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; justify-content: flex-end; flex: 1 1 380px; min-width: 0; }
.mm-field { display: grid; flex: 1 1 240px; max-width: 520px; min-width: 0; }
.mm-field .lbl { margin-bottom: .4rem; }
@media (max-width: 680px) { .mm-bar__r { justify-content: flex-start; } .mm-field { max-width: none; flex-basis: 100%; } }
.mm-tool .seg__b { min-height: 44px; min-width: 64px; padding-inline: 18px; font-size: .86rem; }
.mm-tool .btn { min-height: 44px; }
.mm-input, .mm-select { width: 100%; min-height: 46px; font-size: 1rem; box-sizing: border-box; }
.mm-select { -webkit-appearance: menulist; appearance: auto; padding-right: .6rem; cursor: pointer; }
.mm-select[disabled] { opacity: .6; cursor: not-allowed; }
html[data-dark] .mm-select { color-scheme: dark; }

.mm-status { margin: 18px 0 0; min-height: 1.6em; font-size: .9rem; color: var(--ink-55); }
.mm-status[data-state="ok"] { color: var(--mm-won); }
.mm-status[data-state="error"] { color: var(--mm-bad); }
.mm-tool .mm-notes { margin: 4px 0 0; min-height: 1.6em; max-width: 80ch; font-size: .82rem; }
.mm-out { margin-top: 22px; min-height: 920px; }
.mm-out--short { min-height: 560px; }
.mm-out.is-stale { opacity: .55; }
.mm-more { margin: 20px 0 0; }
.mm-desknote { margin-top: 1.2rem; max-width: 80ch; }

.mm-msg { border: 1px solid var(--line); border-radius: var(--mm-radius); background: var(--mm-card); padding: 22px 24px; margin: 0 0 18px; max-width: 72ch; }
.mm-msg p { margin: 0; color: var(--ink-77); }
.mm-msg .mm-msg__h { font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.mm-none { color: var(--ink-77); margin: 14px 0; }
.mm-off { color: var(--ink-55); }

/* ------------------------------------------------------------------ an event */
.mm-ev { border: 1px solid var(--line); border-radius: var(--mm-radius); background: var(--mm-card); padding: clamp(18px, 3vw, 32px); margin: 0 0 22px; }
.mm-ev--next { border-top: 3px solid var(--accent); }
.mm-ev--last { border-top: 1px solid var(--line); }
.mm-ev__h { min-width: 0; }
.mm-ev__eye { margin-bottom: 10px; }
.mm-tool .mm-ev__name { font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 300; letter-spacing: -.03em; line-height: 1.14; margin: 0; overflow-wrap: anywhere; }
.mm-ev__meta { margin: 8px 0 0; color: var(--ink-77); font-size: .95rem; }
.mm-ev__sub { margin: 6px 0 0; color: var(--ink-55); font-size: .86rem; display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; }
.mm-ev__sub a { display: inline-flex; align-items: center; min-height: 44px; }
.mm-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-55); text-underline-offset: 3px; }
.mm-link:hover { text-decoration-color: var(--accent); }
.mm-linesbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 14px 0 0; }
.mm-linesbtn { flex: 0 0 auto; }
/* the credit's place is kept at its ordinary length, so the card below never moves */
.mm-credit { margin: 0; flex: 1 1 320px; min-height: 3.3em; font-size: .82rem; }
@media (max-width: 680px) { .mm-credit { min-height: 5em; } }

.mm-bill { margin-top: 18px; }
.mm-bill__t { margin: 22px 0 0; padding: 0 0 8px; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-55); border-bottom: 1px solid var(--line); }
.mm-bill__t:first-child { margin-top: 0; }
.mm-bouts { list-style: none; margin: 0; padding: 0; }

/* ------------------------------------------------------------------ a bout: two corners and what happened between them */
.mm-bout { padding: 14px 0 16px; border-bottom: 1px solid var(--line-soft); }
.mm-bouts:last-child .mm-bout:last-child { border-bottom: 0; padding-bottom: 0; }
.mm-bout--pre, .mm-bout--in, .mm-bout--post { min-width: 0; }
.mm-bout--in { box-shadow: inset 3px 0 0 var(--accent); padding-left: 10px; }
.mm-bout__top { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 8px; }
.mm-bout__cls { font: 500 .72rem/1.2 var(--mm-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-55); }
.mm-tag {
    display: inline-flex; align-items: center; font: 500 .7rem/1 var(--mm-mono); letter-spacing: .06em; text-transform: uppercase;
    padding: 5px 8px; border-radius: 6px; border: 1px solid currentColor; color: var(--mm-accent-ink);
}
.mm-bout__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, auto) minmax(0, 1fr); gap: 6px 20px; align-items: center; }
.mm-f { display: grid; gap: 2px; min-width: 0; padding-left: 12px; border-left: 2px solid transparent; }
.mm-f--a { text-align: left; }
.mm-f--b { text-align: right; padding-left: 0; padding-right: 12px; border-left: 0; border-right: 2px solid transparent; }
.mm-f__name { font-size: 1.06rem; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.mm-f__meta { font-size: .84rem; color: var(--ink-55); }
.mm-f__line { font-size: .92rem; font-weight: 600; color: var(--ink); }
.mm-f__line:empty { display: none; }
/* on the next card the price has its place kept, so nothing moves when the lines arrive */
.mm-ev--next .mm-f__line, .mm-ev--next .mm-f__line:empty { display: block; min-height: 1.6em; }
.mm-f__line .mm-was { display: inline; margin: 0 0 0 10px; font-weight: 400; }
.mm-f__win {
    display: inline-block; margin: 0 0 0 8px; padding: 2px 6px; border-radius: 4px; vertical-align: 2px;
    font: 600 .66rem/1.2 var(--mm-mono); letter-spacing: .08em; text-transform: uppercase;
    color: var(--mm-won); border: 1px solid currentColor;
}
.mm-f.is-won { border-color: var(--mm-won); }
.mm-f.is-won .mm-f__name { font-weight: 700; }
.mm-f.is-lost .mm-f__name { color: var(--ink-77); font-weight: 400; }
.mm-bout__mid { display: grid; gap: 2px; justify-items: center; text-align: center; min-width: 0; }
.mm-mid__vs { font: 500 .78rem/1 var(--mm-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55); }
.mm-mid__how { font-size: .9rem; font-weight: 600; color: var(--ink); }
.mm-live { display: inline-flex; align-items: center; gap: 7px; color: var(--mm-accent-ink); }
.mm-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.mm-mid__when { font-size: .8rem; color: var(--ink-77); }
.mm-was { display: block; font: 400 .74rem/1.4 var(--mm-mono); color: var(--ink-55); }

.mm-cards { margin: 10px 0 0 14px; max-width: 100%; overflow-x: auto; }
.mm-cards table { border-collapse: collapse; font-size: .82rem; }
.mm-cards caption { caption-side: top; text-align: left; font: 500 .68rem/1.4 var(--mm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-55); padding: 0 0 4px; white-space: nowrap; }
.mm-cards th { text-align: left; font-weight: 400; color: var(--ink-77); padding: 3px 16px 3px 0; white-space: nowrap; }
.mm-cards td { padding: 3px 10px; text-align: right; color: var(--ink); border-left: 1px solid var(--line-soft); }

@media (max-width: 680px) {
    .mm-bout__grid { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .mm-f--b { text-align: left; padding-right: 0; padding-left: 12px; border-right: 0; border-left: 2px solid transparent; }
    .mm-f.is-won { border-color: var(--mm-won); }
    .mm-bout__mid { justify-items: start; text-align: left; padding-left: 14px; grid-auto-flow: column; justify-content: start; gap: 10px; align-items: baseline; }
    .mm-cards { margin-left: 14px; }
}

/* ------------------------------------------------------------------ schedule and results: one row per event */
.mm-tool .mm-month { font: 500 .78rem/1.2 var(--mm-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-55); margin: 30px 0 10px; }
.mm-tool .mm-month:first-child { margin-top: 0; }
.mm-rows { border: 1px solid var(--line); border-radius: var(--mm-radius); background: var(--mm-card); overflow: hidden; }
.mm-row { border-bottom: 1px solid var(--line-soft); }
.mm-row:last-child { border-bottom: 0; }
.mm-row__s { display: grid; grid-template-columns: 58px minmax(0, 1fr) 24px; gap: 16px; align-items: center; padding: 14px 18px; cursor: pointer; list-style: none; min-height: 44px; }
.mm-row__s::-webkit-details-marker { display: none; }
.mm-row__s:hover { background: var(--line-soft); }
/* the hover wash costs the quiet ink its margin: paper --ink-55 on --line-soft over the card measured 4.48:1 (review,
   2026-09-28), so under the pointer the row's small print steps up to --ink-77. Dark passes either way. */
.mm-row__s:hover .mm-row__wk, .mm-row__s:hover .mm-row__mon, .mm-row__s:hover .mm-row__meta { color: var(--ink-77); }
.mm-row__s:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.mm-row__d { display: grid; justify-items: center; line-height: 1.1; }
.mm-row__wk, .mm-row__mon { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-55); }
.mm-row__day { font-size: 1.7rem; font-weight: 300; letter-spacing: -.03em; color: var(--ink); }
.mm-row__m { display: grid; gap: 2px; min-width: 0; }
.mm-row__name { font-weight: 600; letter-spacing: -.01em; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
.mm-row__top { font-size: .9rem; color: var(--ink-77); overflow-wrap: anywhere; }
.mm-row__meta { font-size: .82rem; color: var(--ink-55); overflow-wrap: anywhere; }
.mm-row__x { width: 10px; height: 10px; border-right: 2px solid var(--ink-55); border-bottom: 2px solid var(--ink-55); transform: rotate(45deg); justify-self: center; margin-top: -4px; }
.mm-row[open] > .mm-row__s .mm-row__x { transform: rotate(-135deg); margin-top: 4px; }
.mm-row[open] > .mm-row__s { border-bottom: 1px solid var(--line-soft); }
.mm-row__b { padding: 8px 18px 20px; }
@media (max-width: 520px) {
    .mm-row__s { grid-template-columns: 46px minmax(0, 1fr) 18px; gap: 12px; padding: 12px 14px; }
    .mm-row__b { padding: 6px 14px 18px; }
}

/* ------------------------------------------------------------------ tables (odds, weight classes) */
.mm-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--mm-radius); background: var(--mm-card); }
table.mm-t { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.mm-t th, table.mm-t td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--ink-77); }
table.mm-t thead th { font: 500 .72rem/1.3 var(--mm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-55); white-space: nowrap; background: var(--tint); }
table.mm-t tr:last-child td, table.mm-t tr:last-child th { border-bottom: 0; }
table.mm-t td.mm-n, table.mm-t th.mm-n { text-align: right; font-variant-numeric: tabular-nums; }
table.mm-t td b { color: var(--ink); }

.mm-o { margin-top: 18px; }
.mm-o table.mm-t { min-width: 720px; }
.mm-o table.mm-t th[scope="row"] { color: var(--ink); white-space: normal; min-width: 220px; }
.mm-o__bout { font-weight: 400; }
.mm-o__names { display: block; font-weight: 600; color: var(--ink); }
.mm-o__cls { display: block; font: 500 .68rem/1.5 var(--mm-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-55); }
.mm-o__wait { color: var(--ink-55); }
.mm-o__err { color: var(--mm-bad); }
.mm-o table.mm-t td { height: 62px; vertical-align: middle; }

.mm-wc { margin-top: .4rem; }
.mm-wc td.mm-n, .mm-wc th.mm-n { white-space: nowrap; }
.mm-wc table.mm-t tbody th { font-weight: 500; color: var(--ink); white-space: normal; }
.mm-wc .mm-nw { white-space: nowrap; }
.mm-wc .mm-yes { color: var(--mm-won); font-weight: 600; }
/* on a phone both tables fit their box: headers and the limit words wrap, the numbers do not */
@media (max-width: 520px) {
    .mm-wc table.mm-t th, .mm-wc table.mm-t td { padding: 10px 8px; }
    .mm-wc table.mm-t { font-size: .86rem; }
    .mm-wc table.mm-t thead th { white-space: normal; letter-spacing: .04em; vertical-align: bottom; }
    .mm-wc .mm-nw { white-space: normal; }
}
@media (max-width: 360px) {
    .mm-wc table.mm-t th, .mm-wc table.mm-t td { padding: 9px 5px; }
    .mm-wc table.mm-t { font-size: .8rem; }
    .mm-wc table.mm-t thead th { font-size: .6rem; letter-spacing: 0; }
}
.mm-scale { display: grid; gap: 6px; margin: 22px 0 0; padding: 0; list-style: none; max-width: 980px; }
.mm-scale li { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 12px; align-items: center; font-size: .86rem; }
.mm-scale__bar { height: 14px; border-radius: 3px; background: var(--line-soft); position: relative; overflow: hidden; }
.mm-scale__fill { position: absolute; top: 0; bottom: 0; background: var(--accent); border-radius: 3px; }
.mm-scale__name { color: var(--ink-77); }
@media (max-width: 520px) { .mm-scale li { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ------------------------------------------------------------------ prose, sources, method, the desk's pages */
.mm-two { display: grid; gap: clamp(24px, 4vw, 56px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.mm-prose { max-width: 64ch; color: var(--ink-77); line-height: 1.7; min-width: 0; }
.mm-prose h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; margin: 0 0 .7em; color: var(--ink); }
.mm-prose h2 + p, .mm-prose h2 + ul { margin-top: 0; }
.mm-prose * + h2 { margin-top: 1.5em; }
.mm-prose h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; margin: 1.5em 0 .4em; color: var(--ink); }
.mm-prose p { margin: 0 0 1em; }
.mm-prose ul { padding-left: 1.2em; margin: 0 0 1em; }
.mm-prose li { margin: 0 0 .45em; }
.mm-prose b { color: var(--ink); font-weight: 600; }
.mm-prose a, .mm-srcs a, .mm-note a, .mm-src a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-55); text-underline-offset: 3px; overflow-wrap: anywhere; }
.mm-prose a:hover, .mm-srcs a:hover, .mm-note a:hover, .mm-src a:hover { text-decoration-color: var(--accent); }
.mm-note { font-size: .88rem; line-height: 1.6; color: var(--ink-55); max-width: 80ch; margin: 1rem 0 0; }
.mm-src { font: 400 .78rem/1.55 var(--mm-mono); color: var(--ink-55); overflow-wrap: anywhere; margin: 14px 0 0; max-width: 100ch; }
.mm-h2 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; margin: 0 0 1rem; color: var(--ink); }
.mm-srcs { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 86ch; }
.mm-srcs li { border-left: 2px solid var(--accent); padding: 2px 0 2px 14px; color: var(--ink-77); }
.mm-srcs b { display: block; font-weight: 600; color: var(--ink); }
.mm-srcs .mm-src { display: block; margin: 2px 0 0; }

.mm-method { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.6rem 2rem; margin-top: 1.4rem; }
.mm-method__h { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); margin: 0 0 .45rem; }
.mm-method__d { margin: 0; font-size: .92rem; line-height: 1.65; color: var(--ink-77); overflow-wrap: anywhere; }
.mm-method__d + .mm-method__d { margin-top: .6rem; }
.mm-method__d a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-55); text-underline-offset: 3px; }
.mm-method__d code { font-family: var(--mm-mono); font-size: .84em; overflow-wrap: anywhere; }

.mm-pages { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin-top: 1.2rem; }
.mm-card { display: block; background: var(--mm-card); border: 1px solid var(--line); border-radius: var(--mm-radius); padding: 18px 20px; min-width: 0; text-decoration: none; transition: border-color .15s var(--ease); }
.mm-card:hover { border-color: var(--accent); }
.mm-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mm-card h3 { margin: 0 0 6px; font-size: 1.05rem; color: var(--ink); }
.mm-card p { margin: 0; font-size: .92rem; color: var(--ink-77); line-height: 1.55; }

@media print { .mm-bar, .mm-linesbar, .mm-more, .mm-desk { display: none !important; } }
