/*
 * my-ratings-theme.css: the My Ratings scales panel in the shared look (restyle stage 6, 13-10-2026).
 *
 * Loaded by the two pages that load my-ratings-ui.js (racecard-popup.html, after
 * mycard-theme.css; my-ratings.html, after rm-theme.css). Covers everything that
 * script draws: the pick-a-scale pop-up, the scales panel (a modal on the racecard,
 * the page itself on /my-ratings), the editor and its coverage picker, the
 * Scorecard, Review Winners, the import manager and Rate the winners.
 *
 * The same rules as the theme sheet: EVERY selector sits under html[data-restyle],
 * so a page that has not opted in is untouched; colours come only from the --rm-*
 * tokens, so light and dark both follow.
 *
 * The script keeps its Tailwind classes and inline colours (an un-opted page renders
 * exactly as before) and adds an mrx- marker beside them:
 *   mrx-ov          an overlay (the scrim)            mrx-box / mrx-box-inline  a panel
 *   mrx-card        a bordered card / row             -dash, -gold              its dashed / chosen border
 *   mrx-btn-gold    a gold button or tag              mrx-input                 a text / number box
 *   mrx-note-warn   the amber notice boxes            mrx-warn-text             amber words
 *   mrx-ok / mrx-err / mrx-even / mrx-faint           good / bad / level / no-figure words
 *   mrx-busy        "rating your history" progress    mrx-top                   "your No.1"
 *   mrx-line / mrx-rule / mrx-line-top                table and card rules
 *   mrx-recess      the preview boxes
 * The marker rules carry !important only where an inline style has to be beaten.
 * The Tailwind colour classes inside a panel (text-gray-*, text-red-600, bg-white,
 * accent-blue-600, ...) are re-pointed by scope, so every word the script writes
 * follows without a marker on each one.
 */

/* =====================================================================
 * OVERLAY AND PANELS
 * ===================================================================== */
html[data-restyle] .mrx-ov { background: var(--rm-scrim) !important; }

html[data-restyle] .mrx-box {
    background-color: var(--rm-surface);
    color: var(--rm-text);
    border: 1px solid var(--rm-line);
    box-shadow: var(--rm-pop-shadow);
}
/* on /my-ratings the panel IS the page: a card, not a pop-up */
html[data-restyle] .mrx-box.mrx-box-inline { box-shadow: var(--rm-shadow); }

/* =====================================================================
 * THE TAILWIND COLOUR CLASSES INSIDE A PANEL
 * ===================================================================== */
html[data-restyle] :is(.mrx-ov, .mrx-box) .bg-white { background-color: var(--rm-surface); }
html[data-restyle] :is(.mrx-ov, .mrx-box) .bg-gray-100 { background-color: var(--rm-line); }   /* the import progress track */
html[data-restyle] :is(.mrx-ov, .mrx-box) .text-gray-700 { color: var(--rm-text); }
html[data-restyle] :is(.mrx-ov, .mrx-box) :is(.text-gray-600, .text-gray-500) { color: var(--rm-text-dim); }
html[data-restyle] :is(.mrx-ov, .mrx-box) .text-gray-400 { color: var(--rm-text-faint); }
html[data-restyle] :is(.mrx-ov, .mrx-box) .text-red-600 { color: var(--rm-neg); }
html[data-restyle] :is(.mrx-ov, .mrx-box) .hover\:text-gray-700:hover { color: var(--rm-text); }
html[data-restyle] :is(.mrx-ov, .mrx-box) .hover\:text-red-600:hover { color: var(--rm-neg); }
html[data-restyle] :is(.mrx-ov, .mrx-box) .hover\:shadow-lg:hover { box-shadow: var(--rm-pop-shadow); }
html[data-restyle] :is(.mrx-ov, .mrx-box) :is(.border, .border-b, .border-gray-200) { border-color: var(--rm-line); }
html[data-restyle] :is(.mrx-ov, .mrx-box) .accent-blue-600 { accent-color: var(--rm-check); }

/* =====================================================================
 * CARDS, RULES, BOXES
 * ===================================================================== */
html[data-restyle] .mrx-card { border-color: var(--rm-line) !important; }
html[data-restyle] .mrx-card.mrx-card-dash { border-color: var(--rm-ctl-line) !important; }
html[data-restyle] .mrx-card.mrx-card-gold { border-color: var(--rm-gold) !important; }

html[data-restyle] .mrx-line { border-color: var(--rm-line) !important; }
html[data-restyle] tr.mrx-line { border-color: var(--rm-th-rule) !important; }
html[data-restyle] .mrx-rule { border-color: var(--rm-line) !important; }
html[data-restyle] .mrx-line-top { border-top-color: var(--rm-line) !important; }

html[data-restyle] .mrx-recess {
    background: var(--rm-recess) !important;
    border-color: var(--rm-line) !important;
    color: var(--rm-text);
}

/* the amber notices: "none of your sets are switched on", the import report's problem groups */
html[data-restyle] .mrx-note-warn {
    background: var(--rm-warn-bg) !important;
    border-color: var(--rm-warn-line) !important;
    color: var(--rm-warn-text) !important;
}

/* =====================================================================
 * BUTTONS AND BOXES
 * ===================================================================== */
/* gold: Create / Save / Apply / Import, the Recommended tag (the page aliases --brand to
   the TEXT colour, which is white in dark, so the inline colour must be beaten) */
html[data-restyle] .mrx-btn-gold {
    background: var(--rm-gold) !important;
    color: var(--rm-on-gold) !important;
}

/* text and number boxes, like .rmx-input; after the scoped .border rule so the edge wins */
html[data-restyle] :is(.mrx-ov, .mrx-box) .mrx-input {
    color: var(--rm-text);
    background-color: var(--rm-field);
    border-color: var(--rm-ctl-line);
}
html[data-restyle] :is(.mrx-ov, .mrx-box) .mrx-input::placeholder { color: var(--rm-placeholder); }
html[data-restyle] :is(.mrx-ov, .mrx-box) .mrx-input:focus { border-color: var(--rm-primary-75); outline: none; }
html[data-restyle] :is(.mrx-ov, .mrx-box) .mrx-input:disabled { color: var(--rm-text-faint); }

/* =====================================================================
 * WORDS
 * ===================================================================== */
html[data-restyle] .mrx-ok { color: var(--rm-pos) !important; }
html[data-restyle] .mrx-err { color: var(--rm-neg) !important; }
html[data-restyle] .mrx-even { color: var(--rm-text-dim) !important; }
html[data-restyle] .mrx-faint { color: var(--rm-text-faint) !important; }
html[data-restyle] .mrx-warn-text { color: var(--rm-warn-text) !important; }
html[data-restyle] .mrx-busy { color: var(--rm-text) !important; }
/* "your No.1" on Review Winners: the gold top figure */
html[data-restyle] .mrx-top {
    color: var(--rm-top-text) !important;
    background: var(--rm-top-bg);
    padding: 0 5px;
    border-radius: 3px;
}