/* ==================== MATCH REVIEW (.mr-*) ==================== */

/* ---- KPI strip ---- */
.mr-kpis {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .8rem; margin-bottom: 1rem;
}
.mr-kpi {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: .8rem .95rem;
    position: relative; overflow: hidden;
}
.mr-kpi::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); }
/* The accent bar carries the same green → yellow → orange → red ramp as the
   level chips, so a card and a chip for the same level are never different
   colours. Saturated rather than the chips' pale fills: this is a 3px sliver,
   and the chip tints disappear at that width. */
.mr-kpi.k-l3::before   { background: #04682F; }  /* 3 green  */
.mr-kpi.k-l2::before   { background: #D9AF08; }  /* 2 yellow */
.mr-kpi.k-l1::before   { background: #E07B18; }  /* 1 orange */
.mr-kpi.k-l0::before   { background: #C0392B; }  /* 0 red    */
.mr-kpi.k-high::before { background: var(--ok); }
.mr-kpi.k-mid::before  { background: var(--warn); }
.mr-kpi.k-low::before  { background: var(--text-dim); }
.mr-kpi.k-done::before { background: var(--c-messenger-ui); }
.mr-kpi-label { font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); }
.mr-kpi-value { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.mr-kpi-sub   { font-size: .7rem; color: var(--text-soft); }

/* ---- toolbar ---- */
.mr-toolbar {
    display: flex; flex-wrap: wrap; gap: .7rem; align-items: center;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius) var(--radius) 0 0; border-bottom: none;
    padding: .65rem 1rem;
}

/* ---- list ---- */
.mr-list {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow);
    overflow: hidden;
}
/* Five columns, not six: the score cell and the recommendation cell said the
   same thing — one as a misleading percentage, one as the level it actually was.
   They are now a single level column. */
.mr-head {
    display: grid; grid-template-columns: 150px 124px 1fr 1fr 124px;
    gap: .7rem; align-items: center;
    padding: .45rem 1rem; background: var(--surface-2); border-bottom: 1px solid var(--border);
    font-size: .62rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-dim);
}

/* ---- one candidate row: compact, whole row is clickable ---- */
.mr-row {
    display: grid; grid-template-columns: 150px 124px 1fr 1fr 124px;
    gap: .7rem; align-items: center;
    padding: .55rem 1rem; border-bottom: 1px solid var(--border-soft);
    cursor: pointer; transition: background .12s ease;
}
.mr-tier { min-width: 0; display: flex; }
.mr-row:last-child { border-bottom: none; }
.mr-row:hover { background: var(--surface-3); }
.mr-row.busy { opacity: .45; pointer-events: none; }

/* .mr-pct and .mr-rec are gone. The queue no longer shows a percentage for the
   pair, and the recommendation label became the level chip in base.css. The raw
   score survives only in the comparison modal, as .md-rawscore below. */

/* ---- the two sides, one line each ---- */
.mr-party { min-width: 0; }
.mr-party-name {
    font-weight: 600; font-size: .87rem; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    display: flex; align-items: center; gap: .35rem;
}
.mr-party-name .tick { width: 3px; height: 13px; border-radius: 2px; flex: 0 0 3px; }
.mr-party.p-messenger .tick { background: var(--c-messenger-ui); }
.mr-party.p-eff .tick       { background: var(--c-eff-ui); }
.mr-party-sub {
    font-size: .74rem; color: var(--text-soft); padding-left: .65rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mr-row-actions { display: flex; gap: .3rem; justify-content: flex-end; }
.mr-ico {
    width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--border);
    background: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: .9rem; color: var(--text-soft); transition: all .12s ease; padding: 0;
}
.mr-ico:hover.ok  { background: var(--ok); border-color: var(--ok); color: #fff; }
.mr-ico:hover.no  { background: var(--bad); border-color: var(--bad); color: #fff; }

/* ---- empty / loading ---- */
.mr-empty { text-align: center; padding: 3rem 1rem; color: var(--text-soft); }
.mr-empty i { font-size: 1.9rem; color: var(--ok); display: block; margin-bottom: .4rem; }

/* ==================== DETAIL MODAL ==================== */
.md-head { border-bottom: 1px solid var(--border); padding: 1rem 1.25rem; }
.md-head-top { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
/* The raw rules score. It was the 1.5rem headline of this modal, which is how a
   fixed evidence code came to be read as a likelihood. It now sits at the end of
   the field-agreement row, sized like the ticks it sums up — present for anyone
   who needs it, no longer the first thing the eye lands on. */
.md-rawscore {
    display: inline-flex; align-items: baseline; gap: .3rem; cursor: help;
    margin-left: .3rem; padding: .14rem .45rem; border-radius: 6px;
    border: 1px dashed var(--border); background: var(--surface-3);
    font-size: .72rem; font-weight: 600; color: var(--text-dim);
}
.md-rawscore b { font-weight: 800; font-size: .82rem; }
.md-rawscore .of { font-size: .64rem; opacity: .7; }
.md-rawscore.hi b  { color: #04682F; }
.md-rawscore.mid b { color: #8A5A08; }
.md-rawscore.lo b  { color: #4A5670; }

.md-rec {
    display: flex; gap: .6rem; align-items: flex-start;
    margin-top: .7rem; padding: .6rem .8rem; border-radius: 8px;
    background: #F5F8FF; border: 1px solid #DCE6FA;
}
.md-rec-icon {
    width: 26px; height: 26px; border-radius: 7px; flex: 0 0 26px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent); color: #fff; font-size: .8rem;
}
.md-rec-body b { font-size: .82rem; display: block; }
.md-rec-body span { font-size: .78rem; color: var(--text-soft); }
.md-rec-src {
    font-size: .6rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-dim); margin-left: auto; white-space: nowrap;
}

.md-evidence { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .7rem; align-items: center; }
.md-feat {
    font-size: .69rem; font-weight: 600; padding: .14rem .5rem; border-radius: 5px;
    background: #EEF2F9; color: #4E5D78;
}
.md-feat.match { background: #E3F7EB; color: #04682F; }
.md-feat.miss  { background: #FDE9E8; color: #96201B; }

/* side-by-side comparison */
.md-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.md-col { padding: 1rem 1.25rem; min-width: 0; }
.md-col + .md-col { border-left: 1px solid var(--border); }
.md-col-head {
    display: flex; align-items: center; gap: .5rem; padding-bottom: .7rem;
    margin-bottom: .8rem; border-bottom: 2px solid var(--border); min-height: 44px;
}
/* The column takes the brand's own class now (co-<code>) rather than a
   hand-picked c-eff / c-messenger, because the modal no longer knows which two
   companies it is showing — a pair can join any two of them. A company with no
   rule here simply gets the default border, which is the correct outcome for
   CemSites until it has a colour. */
.md-col.co-eff       .md-col-head { border-bottom-color: var(--c-eff); }
.md-col.co-messenger .md-col-head { border-bottom-color: var(--c-messenger); }
.md-col.co-thumbies  .md-col-head { border-bottom-color: var(--c-thumbies); }
.md-col-head img { height: 30px; width: auto; max-width: 210px; object-fit: contain; }
.md-col-head .src { font-size: .64rem; color: var(--text-dim); margin-left: auto; text-transform: uppercase; letter-spacing: .07em; }

.md-title { font-size: 1.02rem; font-weight: 650; line-height: 1.3; margin-bottom: .1rem; }
.md-sub   { font-size: .78rem; color: var(--text-soft); margin-bottom: .8rem; }

.md-group { margin-bottom: .9rem; }
.md-group-label {
    font-size: .6rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
    color: var(--text-dim); margin-bottom: .3rem;
}
.md-kv { display: grid; grid-template-columns: 108px 1fr; gap: .1rem .6rem; font-size: .8rem; }
.md-kv dt { color: var(--text-soft); font-weight: 400; }
.md-kv dd { margin: 0; font-weight: 500; word-break: break-word; }

.md-addr {
    border: 1px solid var(--border); border-radius: 7px; padding: .5rem .6rem;
    margin-bottom: .4rem; font-size: .8rem; background: var(--surface-2);
}
.md-addr-code {
    font-size: .6rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--text-dim); margin-bottom: .15rem;
}
.md-addr-code .def { color: var(--ok); }
.md-chip-row { display: flex; flex-wrap: wrap; gap: .25rem; }
.md-pill {
    font-size: .69rem; padding: .12rem .45rem; border-radius: 5px;
    background: #EEF2F9; color: #4E5D78; font-weight: 600;
}
.md-pill.on  { background: #E3F7EB; color: #04682F; }
.md-pill.off { background: #EEF1F7; color: #7A889F; }

.md-metric { display: flex; gap: 1.1rem; }
.md-metric div b { display: block; font-size: 1rem; font-weight: 700; line-height: 1.2; }
.md-metric div span { font-size: .68rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; }

@media (max-width: 1199.98px) {
    .mr-head, .mr-row { grid-template-columns: 132px 1fr 1fr 96px; }
}
@media (max-width: 991.98px) {
    .mr-head { display: none; }
    /* Stacked: the tier keeps the first cell and everything else lines up under
       the names. .mr-rec used to be pulled into column 2 here — that element no
       longer exists in the row, so the rule follows .mr-tier instead. */
    .mr-row  { grid-template-columns: auto 1fr; row-gap: .3rem; }
    .mr-row > .mr-tier { grid-column: 1; }
    .mr-row-actions { grid-column: 2; justify-content: flex-start; }
    .md-body { grid-template-columns: 1fr; }
    .md-col + .md-col { border-left: none; border-top: 1px solid var(--border); }
}

/* ---- primary confirm button (row + modal footer) ---- */
.btn-same { background: var(--ok); border-color: var(--ok); color: #fff; font-weight: 600; }
.btn-same:hover, .btn-same:focus { background: #008D45; border-color: #008D45; color: #fff; }

/* ==================== UNMATCHED (.um-*) ==================== */
.um-head, .um-row {
    /* 96px → 128px: the best-candidate cell holds a tier chip now, and "Likely
       link" ellipsised to something indistinguishable from "Link" at the old
       width — the one failure mode this whole change exists to avoid. */
    display: grid; grid-template-columns: 1fr 220px 130px 128px 110px;
    gap: .7rem; align-items: center; padding: .55rem 1rem;
}
.um-head {
    background: var(--surface-2); border: 1px solid var(--border); border-bottom: none;
    font-size: .62rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-dim);
}
.um-row { border-bottom: 1px solid var(--border-soft); }
.um-row:last-child { border-bottom: none; }
.um-row:hover { background: var(--surface-3); }
.um-loc { font-size: .8rem; color: var(--text-soft); }
.um-metric { text-align: right; font-weight: 650; font-size: .87rem; }
.um-metric .mr-party-sub { text-align: right; }

@media (max-width: 991.98px) {
    .um-head { display: none; }
    .um-row { grid-template-columns: 1fr auto; row-gap: .25rem; }
}

/* ---- record provenance: which system, which key, when last reviewed ---- */
.md-prov {
    background: var(--surface-3); border: 1px solid var(--border-soft);
    border-radius: var(--radius); padding: .6rem .75rem; margin-bottom: .9rem;
}
.md-prov dl {
    display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; margin: 0;
}
.md-prov dt {
    font-size: .7rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--text-dim); font-weight: 700; white-space: nowrap; align-self: center;
}
.md-prov dd {
    margin: 0; font-size: .8rem; color: var(--text); text-align: right;
    overflow: hidden; text-overflow: ellipsis; align-self: center;
}
.md-id {
    font-size: .76rem; background: var(--surface); border: 1px solid var(--border);
    border-radius: 5px; padding: .1rem .38rem; cursor: pointer; color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.md-id:hover { border-color: var(--accent); color: var(--accent); }

/* ---- competing candidates: the "Pick one" case ---- */
.md-alts {
    background: #FDF8EC; border-top: 1px solid #EFDCB4; border-bottom: 1px solid #EFDCB4;
    padding: .85rem 1.15rem;
}
.md-alts-head {
    display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-bottom: .7rem;
}
.md-alts-head i { color: #C98A16; font-size: 1.05rem; }
.md-alts-head b { font-size: .9rem; }
.md-alts-head span { font-size: .82rem; color: var(--text-soft); flex: 1 1 100%; }

.md-alt-row {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr);
    gap: .7rem; overflow-x: auto; padding-bottom: .2rem;
}
.md-alt-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .7rem .8rem; display: flex; flex-direction: column; min-width: 0;
    box-shadow: var(--shadow);
}
.md-alt-card.current { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(30,107,255,.12); }
.md-alt-card b {
    font-size: .88rem; font-weight: 700; line-height: 1.3; margin-bottom: .15rem;
    overflow: hidden; text-overflow: ellipsis;
}
.md-alt-card > span { font-size: .78rem; color: var(--text-soft); line-height: 1.45; }
/* .md-alt-pct is gone — rival candidates carry the same tier chip as everything
   else, so a comparison is between two levels rather than two percentages that
   were never on a common scale to begin with. */
.md-alt-top { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin-bottom: .35rem; }
.md-alt-tag {
    font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    padding: .12rem .4rem; border-radius: 4px; background: var(--surface-3); color: var(--text-dim);
}
/* Same move: the rival's tag is keyed by company code, not by one of two names. */
.md-alt-tag.co-eff       { background: #E3F2E9; color: #106030; }
.md-alt-tag.co-messenger { background: #E6EEFA; color: #1E5FBF; }
.md-alt-tag.co-thumbies  { background: #EDF0F4; color: #45566A; }
.md-alt-diff {
    margin-top: .5rem; font-size: .74rem; color: #8A5A08;
    background: #FDF3E1; border-radius: 6px; padding: .3rem .45rem;
}
.md-alt-diff.current { color: #1B4DB1; background: #EAF0FE; }




/* ---- the Arbiter's verdict, in its own column ----
   It lived inside .mr-rec, a fixed 104px cell with nowrap, and overflowed
   across the address beneath. A second fact needs a second column. */
.mr-agent {
    display: flex; align-items: center; gap: .3rem; min-width: 0;
    font-size: .7rem; font-weight: 700; cursor: help;
    padding: .2rem .45rem; border-radius: 6px; border: 1px solid transparent;
}
.mr-agent i { font-size: .78rem; flex: 0 0 auto; }
.mr-agent span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-agent b { font-weight: 800; }
.mr-agent.ok   { background: #EDF9F1; border-color: #C6E6D2; color: #1E7A45; }
.mr-agent.warn { background: #FDF6E9; border-color: #EFDCB4; color: #8A5A08; }
.mr-agent.bad  { background: #FDF0EF; border-color: #F2CFCB; color: #96201B; }
.mr-agent.none {
    background: transparent; border-color: var(--border-soft);
    color: var(--text-dim); font-weight: 500; justify-content: center;
}

/* rows the agent has already reasoned about are the cheap ones to decide */
.mr-row:has(.mr-agent.ok) { background: linear-gradient(90deg, rgba(0,166,81,.035), transparent 40%); }
.mr-row:has(.mr-agent.ok):hover { background: var(--surface-3); }

@media (max-width: 1399.98px) {
    .mr-head, .mr-row { grid-template-columns: 140px 110px 1fr 1fr 110px; }
}
@media (max-width: 1099.98px) {
    /* The Arbiter column is the one that drops — it is a second opinion, and the
       tier is the thing being reviewed. Column 2 is now the Arbiter, not the
       recommendation, so the nth-child target moved with it. Getting this wrong
       hides the wrong column and reads as data going missing. */
    .mr-head, .mr-row { grid-template-columns: 140px 1fr 1fr 110px; }
    .mr-head > div:nth-child(2), .mr-row > .mr-agent { display: none; }
}

/* ==================== REVIEW ROW: LEGIBILITY PASS ====================
   The queue is read top-to-bottom hundreds of times in a sitting, so the two
   business names are the only things that should carry weight. Everything else
   supports them. */
.mr-row { padding-top: .6rem; padding-bottom: .6rem; }
.mr-row + .mr-row { border-top: none; }

.mr-party-name { font-weight: 650; font-size: .885rem; letter-spacing: -.005em; }
.mr-party-name .tick { height: 15px; border-radius: 2px; }
.mr-party-sub { font-size: .745rem; color: var(--text-dim); padding-left: .68rem; margin-top: .1rem; }

/* The level is the first thing scanned; give it the full column so "Needs
   checking" does not ellipsis into something unreadable. */
.mr-tier .tier-chip { width: 100%; }

/* Decision buttons read as the commitment they are, not as icons in a toolbar. */
.mr-row-actions { gap: .35rem; }
.mr-ico { width: 32px; height: 32px; border-radius: 8px; }
.mr-ico.ok  { color: #1E7A45; border-color: #C6E6D2; background: #F6FCF8; }
.mr-ico.no  { color: #96201B; border-color: #F2CFCB; background: #FEF8F7; }
.mr-ico:hover { transform: translateY(-1px); }
.mr-ico:hover.ok { box-shadow: 0 3px 8px rgba(0,166,81,.28); }
.mr-ico:hover.no { box-shadow: 0 3px 8px rgba(192,57,43,.24); }

/* Column headings carry the brand marks; keep them from crowding the labels. */
.mr-head { padding-top: .55rem; padding-bottom: .55rem; }
.mr-head img { height: 15px; margin-right: .35rem; vertical-align: -2px; }

/* ---- where the queue came from ----
   A 9% patrol figure next to a 22,000-row queue reads as a fault. It is not
   one, but nothing on the page said so. Collapsed by default: it answers a
   question you ask once, and then want out of the way. */
.mr-explain {
    background: var(--surface-2); border: 1px solid var(--border-soft);
    border-radius: 10px; margin-bottom: .85rem; overflow: hidden;
}
.mr-explain > summary {
    display: flex; align-items: center; gap: .5rem; cursor: pointer;
    padding: .6rem .95rem; font-size: .8rem; font-weight: 600;
    color: var(--text); list-style: none; user-select: none;
}
.mr-explain > summary::-webkit-details-marker { display: none; }
.mr-explain > summary:hover { background: var(--surface-3); }
.mr-explain > summary > .bi-info-circle { color: var(--c-eff-ui); font-size: .95rem; }
.mr-explain-chev { margin-left: auto; font-size: .8rem; transition: transform .18s ease; color: var(--text-dim); }
.mr-explain[open] .mr-explain-chev { transform: rotate(180deg); }

.mr-explain-body { padding: 0 .95rem .95rem; }
.mr-ex-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.mr-ex-card {
    background: var(--surface); border: 1px solid var(--border-soft);
    border-radius: 8px; padding: .75rem .85rem;
}
.mr-ex-card h6 {
    font-size: .74rem; font-weight: 700; margin: 0 0 .45rem;
    display: flex; align-items: center; gap: .4rem; color: var(--text);
}
.mr-ex-card h6 .bi { font-size: .85rem; color: var(--c-eff-ui); }
/* The level legend: all four chips, in order, exactly as they appear in a row.
   Wraps rather than scrolls — this card narrows to half and then full width at
   the two breakpoints below, and a legend you have to scroll is not a legend. */
.mr-ex-legend {
    display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .5rem;
}
.mr-ex-card p { font-size: .74rem; line-height: 1.5; margin: 0 0 .4rem; color: var(--text); }
.mr-ex-card p:last-child { margin-bottom: 0; }
.mr-ex-card b { font-weight: 700; color: var(--text); }
.mr-ex-card em { font-style: italic; }
.mr-ex-note {
    border-top: 1px dashed var(--border-soft); padding-top: .4rem;
    color: var(--text-dim) !important;
}
@media (max-width: 1599.98px) { .mr-ex-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1099.98px) { .mr-ex-grid { grid-template-columns: 1fr; } }

/* ---- a side of the pair, whichever company it is ----
   .p-eff / .p-messenger were fixed classes on fixed columns. Orientation is now
   lexical on identity, so side A is not consistently one company and the brand
   has to be stated on the row itself. */
.mr-party-co {
    display: inline-flex; align-items: center; justify-content: center;
    height: 20px; padding: .06rem .34rem; border-radius: 4px; margin-right: .4rem;
    background: var(--surface-3); border: 1px solid var(--border-soft);
    vertical-align: -5px;
}
.mr-party-co .bchip img { max-height: 11px; width: auto; display: block; }
.mr-party.co-eff       .mr-party-co { background: #E7F5EE; color: #05683A; border-color: #BFE3D0; }
.mr-party.co-messenger .mr-party-co { background: #E9F0FD; color: #1B4FA8; border-color: #C6D8F5; }
.mr-party.co-thumbies  .mr-party-co { background: #FCE9F2; color: #A3196A; border-color: #F2C6DC; }
.mr-party.co-cemsites  .mr-party-co { background: #F1EBFD; color: #5B21B6; border-color: #DCCEF8; }

/* This record also belongs to another brand — approving links all of them. */
.mr-party-also {
    display: inline-block; margin-left: .4rem; cursor: help;
    font-size: .62rem; font-weight: 700; letter-spacing: .02em;
    padding: .05rem .34rem; border-radius: 4px;
    background: #FFF6E5; color: #8A5A08; border: 1px solid #F0DCB4;
}