/* =====================================================================
   Ribbon Master (docs/04, docs/14, docs/16), on top of css/pkmn.css and
   css/living-dex.css (tokens, buttons, toggles, toast).

   Compact, after Ribbons.Guide (docs/16): one header line per Pokémon,
   ribbons as bare icons (no tiles, no captions; the name is the tooltip),
   one row per game. 07's rules hold: hairlines, mono labels, gold for this
   pillar, red only for warnings, radius ≤ 4px, no shadows or gradients.
   An earned ribbon is in full colour, one still to earn is greyed out.
   ===================================================================== */

.rm-main { max-width: 52rem; }
#rm-view:focus { outline: none; }

/* ---- shared ---- */
.rm-k { font-family: var(--mono); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--paper-dim); }
.rm-muted { color: var(--paper-dim); font-size: 0.84rem; }
.rm-empty { color: var(--paper-dim); font-size: 0.88rem; padding: 0.8rem 0; }
.rm-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.rm-section { border-top: 1px solid var(--rule); margin-top: 1rem; padding-top: 0.75rem; }
.rm-section > h2 { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--paper-dim); font-weight: 400; margin-bottom: 0.45rem; }
.rm-chip {
    display: inline-flex; align-items: center; padding: 0.08rem 0.45rem; max-width: 100%;
    border: 1px solid color-mix(in srgb, var(--game, var(--rule)) 70%, var(--ground));
    background: color-mix(in srgb, var(--game, var(--ground-2)) 16%, var(--ground));
    font-family: var(--mono); font-size: 0.66rem; color: var(--paper); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.rm-chip.is-dim { color: var(--paper-dim); }
.rm-btn-main { border-color: var(--gold-line); color: var(--gold-ink); }
.rm-btn-main:hover { border-color: var(--gold); }
.rm-btn-danger { border-color: color-mix(in srgb, var(--red) 60%, var(--ground)); color: #f08a78; }
.rm-btn-danger:hover { border-color: var(--red); }
.rm-linkbtn { display: inline-flex; align-items: center; text-decoration: none; }
.rm-badge {
    display: inline-block; padding: 0.06rem 0.5rem; border: 1px solid var(--gold-line); background: var(--gold-fill);
    font-family: var(--mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold-ink);
}
.rm-n { font-family: var(--mono); font-size: 0.7rem; color: var(--paper-dim); }
.rm-n b { color: var(--gold-ink); }
.rm-missed { color: #f2b2a6; }
.rm-meter { display: block; height: 2px; background: var(--rule); }
.rm-meter span { display: block; height: 100%; background: var(--gold); }
details.rm-fold > summary {
    cursor: pointer; list-style: none; min-height: 2.2rem; display: flex; align-items: center; gap: 0.45rem;
    font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--paper-dim);
}
details.rm-fold > summary::-webkit-details-marker { display: none; }
details.rm-fold > summary::before { content: "▸"; }
details.rm-fold[open] > summary::before { content: "▾"; }
details.rm-fold > summary b { color: var(--paper); }
details.rm-fold details.rm-fold { margin-top: 0.4rem; }

/* warnings: one line each, coloured edge */
.rm-warns { list-style: none; display: grid; gap: 0.3rem; margin-top: 0.7rem; }
.rm-warn { padding: 0.4rem 0.65rem; border-left: 3px solid var(--paper-dim); background: var(--ground-2); font-size: 0.82rem; line-height: 1.4; }
.rm-warn.is-red { border-left-color: var(--red); }
.rm-warn.is-warn { border-left-color: var(--gold); }
.rm-warn.is-info { border-left-color: var(--home); }
.rm-warn.is-muted { color: var(--paper-dim); }
.rm-warn a { color: inherit; text-decoration: none; }
.rm-warn a:hover { text-decoration: underline; }

/* ---- roster ---- */
.rm-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.1rem 0 0.4rem; }
.rm-h1 { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.01em; }
.rm-toolbar { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin-top: 0.4rem; }
.rm-toolbar > label { flex: 1 1 11rem; min-width: 0; }
.rm-toolbar > label .rm-select { width: 100%; }
.rm-select {
    min-height: var(--tap); max-width: 100%; background: var(--ground-2); color: var(--paper);
    border: 1px solid var(--rule); border-radius: 0; font-family: var(--mono); font-size: 0.76rem; padding: 0 0.55rem;
}
.rm-select:focus-visible, .rm-input:focus-visible { outline: 2px solid var(--red); outline-offset: -1px; }
.rm-cards { list-style: none; display: grid; gap: 0.45rem; margin-top: 0.8rem; }
@media (min-width: 640px) { .rm-cards { grid-template-columns: 1fr 1fr; } }
.rm-card {
    position: relative; display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 0.1rem 0.7rem; align-items: center;
    padding: 0.55rem 0.7rem; background: var(--ground-2); border: 1px solid var(--rule); color: var(--paper); text-decoration: none;
}
.rm-card::before { content: ""; position: absolute; left: -1px; top: -1px; width: 1.2rem; height: 3px; background: var(--game, var(--gold)); }
.rm-card:hover { border-color: var(--paper-dim); }
.rm-card.is-retired { opacity: 0.6; }
.rm-card.is-complete { border-color: var(--gold-line); }
.rm-card-art { display: flex; align-items: center; justify-content: center; }
.rm-card-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.rm-card-name { font-weight: 800; font-size: 0.98rem; line-height: 1.2; overflow-wrap: anywhere; }
.rm-card-sub { color: var(--paper-dim); font-size: 0.74rem; font-weight: 400; }
.rm-card-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.rm-card-need { font-family: var(--mono); font-size: 0.64rem; color: var(--gold-ink); }
.rm-card-need.is-red { color: #f08a78; }
.rm-sprite { image-rendering: pixelated; }
.rm-sprite.is-box { width: 80px; height: 60px; }
.rm-sprite.is-big { width: 72px; height: 72px; image-rendering: auto; }
.rm-gametab .rm-h2 { font-family: var(--mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--paper-dim); font-weight: 400; margin-top: 1rem; }
.rm-gametab .rm-tiles { list-style: none; display: flex; flex-wrap: wrap; gap: 0.15rem; margin-top: 0.4rem; }
.rm-gametab .rm-tile-btn { display: inline-flex; flex-direction: column; align-items: center; width: 4rem; font-family: var(--mono); font-size: 0.52rem; color: var(--paper-dim); text-align: center; }
.rm-gametab .rm-tile-btn img { width: 32px; height: 32px; }

.rm-blocked-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); gap: 0.25rem; margin-top: 0.5rem; }
.rm-blocked-grid li { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.3rem 0.15rem; border: 1px dashed var(--slot-rule); font-family: var(--mono); font-size: 0.58rem; color: var(--paper-dim); text-align: center; line-height: 1.2; }
.rm-blocked-grid li.is-never { opacity: 0.5; }
.rm-blocked-grid img { width: 40px; height: 30px; image-rendering: pixelated; }

/* ---- one Pokémon: header ---- */
.rm-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.8rem; align-items: center; padding: 1rem 0 0.2rem; }
.rm-top-art { width: 5.4rem; height: 5.4rem; display: flex; align-items: center; justify-content: center; background: var(--ground-2); border: 1px solid var(--rule); position: relative; }
.rm-top-art::before { content: ""; position: absolute; left: -1px; top: -1px; width: 1.2rem; height: 3px; background: var(--game, var(--gold)); }
.rm-top-main { min-width: 0; display: grid; gap: 0.3rem; }
.rm-name { font-size: 1.35rem; font-weight: 800; line-height: 1.1; overflow-wrap: anywhere; }
.rm-species { font-size: 0.82rem; font-weight: 400; color: var(--paper-dim); }
.rm-shiny { color: var(--gold-ink); }
.rm-edit { margin-left: 0.4rem; font-family: var(--mono); font-size: 0.62rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.12em; color: var(--paper-dim); vertical-align: middle; }
.rm-edit:hover { color: var(--paper); }
.rm-line { display: flex; flex-wrap: wrap; gap: 0.3rem 0.7rem; align-items: center; font-size: 0.8rem; }
.rm-from { font-family: var(--mono); font-size: 0.62rem; color: var(--paper-dim); margin-right: -0.4rem; }
.rm-fact { display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; }
.rm-fact img { width: 1.1rem; height: 1.1rem; }

/* size check: one sentence and a row of buttons */
.rm-size { margin-top: 0.8rem; padding: 0.55rem 0.7rem; border-left: 3px solid var(--gold); background: var(--ground-2); }
.rm-size p { font-size: 0.82rem; line-height: 1.45; }
.rm-size-groups { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.45rem; }
.rm-size-btn { min-width: 2.9rem; min-height: 2.2rem; background: transparent; border: 1px solid var(--rule); color: var(--paper-dim); font-family: var(--mono); font-size: 0.7rem; cursor: pointer; }
.rm-size-btn:hover { color: var(--paper); border-color: var(--paper-dim); }
.rm-size-btn.is-mark { border-color: var(--gold-line); }
.rm-size-fields { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.45rem; }

/* ---- the checklist: group → game rows → icon strips ---- */
.rm-route-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; justify-content: space-between; }
.rm-grp { margin-top: 0.7rem; border: 1px solid var(--rule); }
.rm-grp.is-dim { opacity: 0.55; }
.rm-grp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; padding: 0.35rem 0.65rem; background: var(--ground-2); font-weight: 800; font-size: 0.86rem; }
.rm-grp-tag { font-family: var(--mono); font-size: 0.6rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.12em; color: var(--paper-dim); white-space: nowrap; }
.rm-grp-tag.is-need { color: #f2b2a6; }
.rm-grp-tag.is-safe { color: #a9d2b1; }
.rm-row-game { padding: 0.4rem 0.65rem 0.5rem; border-top: 1px solid var(--rule); }
.rm-game-name { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 700; margin-bottom: 0.15rem; }
.rm-game-name::before { content: ""; width: 0.55rem; height: 3px; background: var(--game, var(--rule)); }
.rm-here { font-family: var(--mono); font-size: 0.58rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gold-ink); }
.rm-ics { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem; margin-top: 0.15rem; }
.rm-ics-k { font-family: var(--mono); font-size: 0.56rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--paper-dim); min-width: 5.6rem; }
.rm-ics-k.is-need { color: var(--gold-ink); }
.rm-ics > img { width: 28px; height: 28px; }
.rm-ic { width: 2.6rem; height: 2.6rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: 2px; cursor: pointer; -webkit-touch-callout: none; user-select: none; }
.rm-ic img { width: 36px; height: 36px; filter: grayscale(1) brightness(0.62); transition: filter 0.15s ease-out; }
.rm-ic.is-sm { width: 2.2rem; height: 2.2rem; }
.rm-ic.is-sm img { width: 28px; height: 28px; }
.rm-ic:hover { border-color: var(--rule); }
.rm-ic:hover img { filter: grayscale(0.4); }
.rm-ic.is-earned img { filter: none; }
.rm-ic.is-earned { background: color-mix(in srgb, var(--ribbon) 10%, transparent); }
.rm-ic:focus-visible { outline: 2px solid var(--red); outline-offset: 0; }
.rm-ic.is-blocked { opacity: 0.3; }      /* another catch mark is picked (docs/16) */

/* ribbon case */
.rm-case-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem; padding: 0.2rem 0; border-bottom: 1px solid var(--rule); }
.rm-medal { background: transparent; border: 0; padding: 0; cursor: pointer; }
.rm-medal img { width: 32px; height: 32px; display: block; }
.rm-medal.is-derived img { opacity: 0.85; }
.rm-medal.is-memory { position: relative; }
.rm-medal-n { position: absolute; right: -2px; bottom: -2px; min-width: 14px; padding: 0 2px; border-radius: 7px; background: var(--ground); color: var(--paper); font: 600 9px/14px var(--mono); text-align: center; box-shadow: 0 0 0 1px var(--rule); }

/* move */
.rm-move-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.rm-move-row .rm-select { flex: 1 1 12rem; min-width: 0; }
.rm-impact { margin-top: 0.5rem; padding: 0.45rem 0.65rem; border-left: 3px solid var(--red); background: var(--ground-2); font-size: 0.84rem; }
.rm-impact.is-ok { border-left-color: var(--games, #5f9e6e); }

/* ---- details sheet ---- */
.rm-sheet {
    position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; max-height: 80vh; overflow: auto;
    background: var(--ground-2); border-top: 1px solid var(--paper-dim);
    padding: 0.9rem var(--gutter) calc(1rem + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 720px) { .rm-sheet { left: 50%; transform: translateX(-50%); width: 34rem; border: 1px solid var(--paper-dim); bottom: 1.2rem; } }
.rm-sheet[hidden] { display: none; }
.rm-sheet-head { display: grid; grid-template-columns: auto 1fr auto; gap: 0.7rem; align-items: center; }
.rm-sheet-head img { width: 56px; height: 56px; }
.rm-sheet h3 { font-size: 1.05rem; font-weight: 800; }
.rm-sheet p { font-size: 0.88rem; line-height: 1.5; margin-top: 0.45rem; }
.rm-sheet .rm-desc { color: var(--paper-dim); font-style: italic; }
.rm-sheet-where { list-style: none; margin-top: 0.5rem; display: grid; gap: 0.35rem; }
.rm-sheet-where li { font-size: 0.84rem; line-height: 1.45; padding-left: 0.55rem; border-left: 2px solid var(--game, var(--rule)); }
.rm-sheet-where b { font-family: var(--mono); font-size: 0.64rem; font-weight: 400; color: var(--paper-dim); display: block; }
.rm-x { background: transparent; border: 1px solid var(--rule); color: var(--paper); min-width: var(--tap); min-height: var(--tap); cursor: pointer; font-family: var(--mono); }
.rm-scrim { position: fixed; inset: 0; z-index: 44; background: rgba(10, 11, 8, 0.6); }
.rm-scrim[hidden] { display: none; }

/* ---- form ---- */
.rm-form-k { padding-top: 1rem; }
.rm-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; margin-top: 0.5rem; }
@media (min-width: 560px) { .rm-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 820px) { .rm-form { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rm-form .is-wide { grid-column: 1 / -1; }
.rm-label { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.rm-label > span:first-child { font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--paper-dim); }
.rm-label .rm-select { width: 100%; }
.rm-input { min-height: 2.5rem; width: 100%; background: var(--ground-2); color: var(--paper); border: 1px solid var(--rule); border-radius: 0; padding: 0 0.6rem; font-family: var(--mono); font-size: 0.84rem; }
textarea.rm-input { min-height: 4rem; padding: 0.45rem 0.6rem; font-family: var(--sans); }
.rm-ball-row { display: flex; align-items: center; gap: 0.35rem; }
.rm-ball-row img { width: 1.6rem; height: 1.6rem; flex: none; }
.rm-ball-row .rm-select { flex: 1; min-width: 0; }
.rm-checks { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rm-checks:empty { display: none; }
.rm-form-preview { display: flex; align-items: center; gap: 0.6rem; }
.rm-form-preview:empty { display: none; }
.rm-form-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.rm-spacer { flex: 1; }
.rm-error { color: #f08a78; font-size: 0.84rem; }
.rm-error:empty { display: none; }
#rm-f-ribbons .rm-ics { border-bottom: 1px solid var(--rule); padding: 0.15rem 0; }

@media (prefers-reduced-motion: reduce) { .rm-ic img { transition: none; } }

/* ---- docs/17: the card over the roster ---- */
html.rm-locked { overflow: hidden; }
.rm-modal-scrim { position: fixed; inset: 0; z-index: 38; background: rgba(8, 9, 7, 0.68); }
.rm-modal-scrim[hidden], .rm-modal[hidden] { display: none; }
.rm-modal {
    position: fixed; z-index: 40; inset: 0; overflow-y: auto; overscroll-behavior: contain;
    background: var(--ground); padding: 0.4rem var(--gutter) 2rem;
}
.rm-modal:focus { outline: none; }
@media (min-width: 760px) {
    .rm-modal { inset: 4vh auto auto 50%; transform: translateX(-50%); width: min(50rem, 94vw); max-height: 92vh; border: 1px solid var(--paper-dim); padding: 0.4rem 1.4rem 1.6rem; }
}
.rm-modal-x {
    position: sticky; top: 0; float: right; z-index: 2; margin-right: -0.4rem;
    min-width: var(--tap); min-height: var(--tap); background: var(--ground); border: 1px solid var(--rule);
    color: var(--paper); font-size: 1.2rem; cursor: pointer;
}
.rm-modal-x:hover { border-color: var(--paper-dim); }

/* ---- docs/17: tags, language, roster tools and groups ---- */
.rm-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.rm-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; }
.rm-tag { display: inline-block; padding: 0.02rem 0.4rem; border: 1px solid var(--rule); font-family: var(--mono); font-size: 0.6rem; color: var(--paper-dim); white-space: nowrap; }
.rm-tag.is-auto { color: var(--paper); }
.rm-tag.is-ribbon-master { border-color: var(--gold-line); background: var(--gold-fill); color: var(--gold-ink); }
.rm-tag.is-completed { border-color: color-mix(in srgb, var(--ribbon) 50%, var(--rule)); color: var(--gold-ink); }
.rm-tag.is-cleared-for-moving { border-color: color-mix(in srgb, #5f9e6e 70%, var(--rule)); color: #a9d2b1; }
.rm-lang { display: inline-block; padding: 0 0.3rem; border: 1px solid var(--rule); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.06em; color: var(--paper-dim); }
.rm-tool { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }
.rm-tool > span { font-family: var(--mono); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--paper-dim); }
.rm-toolbar > .rm-tool { flex: 0 1 auto; }
.rm-rgroup { margin-top: 0.9rem; }
.rm-rgroup-h { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 800; border-bottom: 1px solid var(--rule); padding-bottom: 0.25rem; }
.rm-rgroup-h::before { content: ""; width: 0.6rem; height: 3px; background: var(--game, var(--gold)); }
.rm-rgroup-h a { color: var(--paper); text-decoration: none; }
.rm-rgroup-h a:hover { text-decoration: underline; }
.rm-rgroup-h span { font-family: var(--mono); font-size: 0.66rem; font-weight: 400; color: var(--paper-dim); }
.rm-rgroup .rm-cards { margin-top: 0.45rem; }
@media (min-width: 560px) { .rm-form .is-wide2 { grid-column: span 2; } }

/* ---- docs/19: species combobox ---- */
.rm-combo { position: relative; }
.rm-combo > label { display: flex; font-size: 0.6rem; line-height: 1.55; }
.rm-combo > label > span { font-family: var(--mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--paper-dim); }
.rm-combo-list {
    position: absolute; z-index: 5; top: 100%; left: 0; right: 0; margin-top: 2px;
    max-height: 16rem; overflow-y: auto; list-style: none;
    background: var(--ground-2); border: 1px solid var(--paper-dim);
}
.rm-combo-list[hidden] { display: none; }
.rm-combo-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0.5rem; cursor: pointer; font-size: 0.86rem; min-height: 2.4rem; }
.rm-combo-list li img { width: 40px; height: 30px; image-rendering: pixelated; flex: none; }
.rm-combo-list li[aria-selected="true"], .rm-combo-list li:hover { background: color-mix(in srgb, var(--ribbon) 14%, var(--ground-2)); }
.rm-combo-n { margin-left: auto; font-family: var(--mono); font-size: 0.68rem; color: var(--paper-dim); }

/* ---- docs/23: Shadow caught-level hint ---- */
.rm-hint { display: flex; flex-wrap: wrap; gap: 0.25rem; font-size: 0.72rem; color: var(--paper-dim); }
.rm-hint:empty { display: none; }
.rm-hint-btn { background: transparent; border: 1px solid var(--rule); color: var(--paper-dim); font-family: var(--mono); font-size: 0.64rem; padding: 0.2rem 0.4rem; cursor: pointer; text-align: left; }
.rm-hint-btn:hover { color: var(--paper); border-color: var(--paper-dim); }
.rm-hint-btn[aria-pressed="true"] { color: var(--gold-ink); border-color: var(--gold-line); background: var(--gold-fill); }