/**
 * Elden Ring mega-map instance styles — companion to rb-eldenring-mega-map-plugin.js.
 *
 * Everything here is scoped to the ER mount (.pkmega[data-game-slug="elden-ring"])
 * or to plugin-emitted rber- classes; zero effect on any other game. Enqueued by
 * map/RB-EldenRing-WorldMap.php with deps [rb-mega-map-engine].
 *
 * Tracker design = Option B of the 2026-09-01 canvas (reports/designs/er-tracker-panel):
 * neutral glass section headers, category color carried by a glowing dot + the
 * progress fill, labels always bright; group filter = the Pokemon rail segmented
 * control (dark inset track + glossy sliding indicator, rb-mega-map.css:962-967).
 *
 * Engine-owned (nothing to restate here): row / check / locate chrome, the rail
 * search field (.pkmega-rail-search), focus rings, the rail-tab hover neutralizer,
 * and the 44px bottom-sheet floors. Colours read the engine --mm-* tokens.
 */

/* ── Brand badge: Site of Grace glyph replaces the engine Pokeball tile ── */
.pkmega[data-game-slug="elden-ring"] .pkmega-brand-badge {
    background: #171207 url("../icons/Site-of-Grace-Icon.png") center / 18px auto no-repeat;
    border: 1px solid #6b5a24;
    box-sizing: border-box;
}
.pkmega[data-game-slug="elden-ring"] .pkmega-brand-badge::after { content: none; }

/* ── Organized completion tracker ──
   The plugin buildChecklistSections hook re-renders every trackable category
   as collapsible, filterable sections. The engine skips its own generic
   duplicates through the clGameOwnsSections payload flag (CACHE_VER 11); this
   scoped hide is the belt-and-braces for a still-cached pre-v11 payload and is
   gated on rber-cl-owned (set only after a successful decode) — if the plugin
   JS ever fails to load or decode, the class is absent and the stock sections
   stay visible. */
.pkmega.rber-cl-owned[data-game-slug="elden-ring"] .pkmega-cl-section { display: none; }

/* Filter bar (sticky over the scrolling checklist body) */
.rber-cl-chips {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
    padding: 8px 12px;
    position: sticky; top: 0; z-index: 2;
    background: var(--mm-panel-bg, rgba(16, 19, 26, 0.96));
    backdrop-filter: var(--mm-panel-blur);
    -webkit-backdrop-filter: var(--mm-panel-blur);
    border-bottom: 1px solid var(--mm-line, rgba(255, 255, 255, 0.08));
}

/* Group filter: Pokemon rail segmented control (engine .pkmega-rail-tabs twin).
   Semantics = toggle buttons in a group (aria-pressed), like the bag chips. */
.rber-seg {
    display: flex; position: relative; align-items: stretch; gap: 3px; padding: 3px;
    flex: 1 1 100%; min-width: 0;
    border-radius: 11px; background: rgba(6, 8, 13, 0.55);
    border: 1px solid var(--mm-line, rgba(255, 255, 255, 0.10));
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
}
.rber-seg-slider {
    position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; z-index: 0;
    border-radius: 8px; background: linear-gradient(180deg, #f3f7ff, #dde8fb);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transform: translateX(0);
    transition: transform 0.4s cubic-bezier(0.34, 1.28, 0.42, 1), width 0.4s cubic-bezier(0.34, 1.28, 0.42, 1);
}
.rber-seg-tab {
    all: unset; box-sizing: border-box; cursor: pointer; position: relative; z-index: 1;
    flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--mm-font, system-ui, sans-serif);
    font-size: 11px; font-weight: 700; letter-spacing: 0.01em;
    color: var(--mm-ink-2, rgba(255, 255, 255, 0.66));
    padding: 6px; min-height: 36px; min-width: 0; border-radius: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color 0.22s ease;
}
/* Explicit hover background: the RB2 theme ships a global
   button:hover { background: #48C9B0 } (style.css:1178) whose 0,1,1
   specificity beats the class-only unset background — declare ours. */
.rber-seg-tab:hover { color: var(--mm-ink, #fff); background: rgba(255, 255, 255, 0.07); }
/* outline !important counters the theme global :focus { outline: 0 !important } */
.rber-seg-tab:focus-visible { outline: 2px solid var(--mm-accent, #6aa9ff) !important; outline-offset: 2px; }
.rber-seg-tab[aria-pressed="true"] { color: #16243d; font-weight: 800; }
/* Never paint over the glossy slider under the active tab */
.rber-seg-tab[aria-pressed="true"]:hover { background: transparent; }

/* Hide-done toggle (rides row 2, right-aligned) */
.rber-chip {
    all: unset; box-sizing: border-box; cursor: pointer;
    display: inline-flex; align-items: center;
    min-height: 36px; padding: 0 12px; margin-left: auto;
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px;
    background: rgba(255, 255, 255, 0.05); color: var(--mm-ink-2, #cbd5e1);
    font: 600 11.5px/1 var(--mm-font, system-ui, sans-serif); letter-spacing: 0.03em;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.rber-chip:hover { background: rgba(255, 255, 255, 0.1); color: var(--mm-ink, #f1f5f9); }
.rber-chip:focus-visible { outline: 2px solid var(--mm-accent, #6aa9ff) !important; outline-offset: 2px; }
.rber-chip[aria-pressed="true"] { background: #166534; border-color: #22c55e; color: #fff; }

/* Filtered-empty message (JS toggles `hidden` after every filter change) */
.rber-cl-none { padding: 16px 12px; text-align: center; font-size: 12.5px; color: var(--mm-ink-2, rgba(255, 255, 255, 0.66)); }
.rber-cl-none[hidden] { display: none; }

/* Category sections — Option B: neutral glass head, color in the dot + fill */
.rber-cl-sec { padding: 0 12px; }
.rber-cl-sec .pkmega-cl-method--toggle.rber-cl-head {
    gap: 8px; margin: 10px 0 2px; padding: 7px 9px;
    border-radius: 9px; min-height: 36px;
}
.rber-dot {
    width: 8px; height: 8px; border-radius: 50%; flex: none;
    background: var(--mc, #a1a1aa); box-shadow: 0 0 8px var(--mc, #a1a1aa);
}
.rber-cl-name {
    flex: 1; min-width: 0; font-size: 11.5px; font-weight: 800; letter-spacing: 0.03em;
    text-transform: uppercase; color: var(--mm-ink, #e4e4e7);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rber-cl-head .pkmega-cl-progress-bar {
    flex: none; width: 64px; margin: 0;
    background: rgba(255, 255, 255, 0.09);
}
.rber-cl-head .pkmega-cl-progress-fill { background: var(--mc, #a1a1aa); }
.rber-cl-head .pkmega-cl-section-count {
    min-width: 38px; text-align: right;
    font-size: 11px; font-weight: 800; color: rgba(255, 255, 255, 0.62);
    font-variant-numeric: tabular-nums;
}
.rber-cl-head .pkmega-cl-method-arrow { font-size: 9px; color: rgba(255, 255, 255, 0.45); margin-left: 2px; }

/* ── Inventory rail tab (data-mega-inv) ── */
.rber-inv { padding: 10px 12px; }
.rber-inv-bar { margin-bottom: 10px; }
/* gold accent for the Inventory bar via one custom property (set inline on the wrapper) */
.rber-inv-bar .pkmega-cl-global-label,
.rber-inv-bar .pkmega-cl-global-pct { color: var(--mc, #c7a94c); }
.rber-inv-bar .pkmega-cl-global-fill { background: var(--mc, #c7a94c); }
/* Search field + row checkbox / locate button: engine-styled
   (rb-mega-map.css .pkmega-rail-search, .pkmega-cl-check[role=checkbox],
   .pkmega-cl-locate) — nothing instance-specific to add. */
/* Catalog-only rows (a category no progress bar counts) keep the column
   alignment with an inert spacer where the checkbox would be. */
.rber-inv-check--none { visibility: hidden; pointer-events: none; }
.rber-inv-seg { margin-bottom: 8px; }
.rber-inv-head { display: flex; align-items: center; gap: 8px; margin: 12px 0 2px; padding: 4px 2px; }
.rber-inv-head .rber-inv-match { flex: none; font-size: 11px; font-weight: 700; color: var(--mm-ink-2, rgba(255, 255, 255, 0.66)); }
.rber-inv-head .pkmega-cl-section-count { min-width: 38px; text-align: right; font-size: 11px; font-weight: 800; color: rgba(255, 255, 255, 0.62); font-variant-numeric: tabular-nums; }
/* "Show N more" — a real button (RB2 button reset + explicit hover background) */
.rber-inv-more {
    all: unset; box-sizing: border-box; cursor: pointer;
    display: block; width: 100%; min-height: 36px; margin: 2px 0 6px; padding: 0 8px;
    border-radius: 8px; text-align: left;
    font: 600 12px/1 var(--mm-font, system-ui, sans-serif); color: var(--mm-accent, #6aa9ff);
}
.rber-inv-more:hover { background: rgba(255, 255, 255, 0.06); }
.rber-inv-more:focus-visible { outline: 2px solid var(--mm-accent, #6aa9ff) !important; outline-offset: 2px; }
.rber-inv-empty { padding: 16px 2px; font-size: 13px; color: rgba(255, 255, 255, 0.5); }

/* Group filter: a selected group tab shows only that group of sections */
.rber-cl[data-f="Travel"] .rber-cl-sec:not([data-g="Travel"]),
.rber-cl[data-f="Enemies"] .rber-cl-sec:not([data-g="Enemies"]),
.rber-cl[data-f="NPCs"] .rber-cl-sec:not([data-g="NPCs"]),
.rber-cl[data-f="Items"] .rber-cl-sec:not([data-g="Items"]) { display: none; }

/* Hide-done: completed rows vanish; fully-completed sections vanish whole —
   except rows ticked since the last filter / area change (.rber-keep), which
   stay visible and struck through so the tick is seen landing. */
.rber-cl.rber-hd .pkmega-cl-row--done { display: none; }
.rber-cl.rber-hd .pkmega-cl-row--done.rber-keep { display: flex; }
.rber-cl.rber-hd .rber-cl-sec[data-done="1"] { display: none; }

/* Bottom-sheet band: the rail is a touch sheet from 768px down (engine
   rb-mega-map.css @media 768), so the filter controls take the 44px floor there. */
@media (max-width: 768px) {
    .rber-cl-chips { gap: 8px; }
    .rber-seg-tab { min-height: 44px; }
    .rber-chip { min-height: 44px; padding: 0 14px; }
    .rber-inv-more { min-height: 44px; }
    /* The 36px desktop head rule above (0,3,0) outranks the engine's 480px
       floor on .pkmega-cl-method--toggle (0,1,0) — restate the floor here. */
    .rber-cl-sec .pkmega-cl-method--toggle.rber-cl-head { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .rber-seg-slider { transition: none; }
    .rber-chip { transition: none; }
}

/* Payload-file load failure (plugin JS showFailure): a note with a retry button placed just above
   the unbooted map frame, in normal flow (never positioned over the mount: the engine owns its
   fullscreen positioning). */
.rber-load-fail {
    margin: 0 auto 12px; max-width: 520px; padding: 16px 18px; border-radius: 10px; text-align: center;
    background: #14141a; border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--mm-ink, #f1f5f9); font: 400 14px/1.5 var(--mm-font, system-ui, sans-serif);
}
.rber-load-fail[hidden] { display: none; }
.rber-load-fail p { margin: 0 0 12px; }
.rber-load-retry {
    min-height: 44px; padding: 0 20px; border-radius: 8px; cursor: pointer;
    background: #f1f5f9; color: #14141a; border: 0; font: 700 14px/1 var(--mm-font, system-ui, sans-serif);
}
.rber-load-retry:focus-visible { outline: 2px solid var(--mm-accent, #6aa9ff); outline-offset: 2px; }

/* R1-FIX C4: the card guide link ("View the ... guide") is a standalone link, not inline text, so a finger gets a 44 px
   tall tap box (an invisible ::before; the link keeps its look). Fine pointers keep the drawn 18.5 px line. */
.rber-dt-guide { position: relative; }
@media (pointer: coarse) {
    .rber-dt-guide::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; margin-top: -22px; }
}

/* W1-10: a bigger frame on the map pages (/elden-ring/map/, /elden-ring/map/underground/): 720px on desktop and
   min(68vh, 560px) on a phone, against the engine 550px / 400px. Scoped to the map-page mount: the location-single embed
   mount carries data-mega-src (this file loads there too), so the embed keeps its frame-sized canvas. The engine
   fullscreen rules (!important) still win in fullscreen. */
.pkmega[data-game-slug="elden-ring"]:not([data-mega-src]):not(.pkmega--fullscreen) > .pkmega-canvas {
    height: 720px;
    /* Fix r1 FE-5: the whole map, layer switch included, fits above the fold on a laptop screen. The map top sits 162px
       down the page for a visitor (194px under the 32px admin bar) at 1280-1440 wide, measured 2026-11-11; 8px spare.
       Floor 560px. */
    height: min(720px, max(560px, calc(100vh - 170px)));
}
body.admin-bar .pkmega[data-game-slug="elden-ring"]:not([data-mega-src]):not(.pkmega--fullscreen) > .pkmega-canvas {
    height: min(720px, max(560px, calc(100vh - 202px)));
}
@media (max-width: 480px) {
    /* Fix r1 FE-6: the engine fits the whole Lands Between to the canvas width (initial_bounds comes from the world
       layout), so a taller phone canvas only added empty ground above and below the art. */
    .pkmega[data-game-slug="elden-ring"]:not([data-mega-src]):not(.pkmega--fullscreen) > .pkmega-canvas,
    body.admin-bar .pkmega[data-game-slug="elden-ring"]:not([data-mega-src]):not(.pkmega--fullscreen) > .pkmega-canvas { height: min(60vh, 480px); }
    /* Never cover the bottom anchor ad. Fix r1 FE-2: the layer switch rises by --rber-lift (rb-eldenring-loc-map.js:
       0 while the map is mid-page, up to the live anchor height once the map bottom reaches the bottom anchor band),
       so a mid-page map keeps the engine position. Map page and embed mounts. */
    .pkmega[data-game-slug="elden-ring"]:not(.pkmega--fullscreen) .pkmega-layer-sw { bottom: calc(8px + var(--rber-lift, 0px)); }
}

/* M12(b) Mark found: the pin card tick (rb-eldenring-mega-map-plugin.js buildDetailHTML; map page, embeds, 3D card).
   Not found = an outline on the dark card glass; Found = a light gold fill with dark ink plus the engine tick glyph,
   so the state reads by lightness and the glyph, not by hue. Contrast on the card (about rgb 14,17,24): outline
   6.1:1, label 15:1, Found fill 7.7:1, Found label 8.2:1. A 44 px target, an even border (no edge stripe). */
.rber-found {
    display: flex; align-items: center; justify-content: center; gap: 7px; box-sizing: border-box;
    width: max-content; max-width: 100%; min-width: 44px; min-height: 44px; margin: 2px 0 8px; padding: 0 16px;
    border: 1px solid #8b93a7; border-radius: 8px; background: transparent; color: #e2e8f0;
    font: 600 13px/1.2 system-ui, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rber-found:hover { background: rgba(255, 255, 255, 0.07); }
.rber-found[aria-pressed="true"] { background: #c7a94c; border-color: #c7a94c; color: #14110a; }
.rber-found[aria-pressed="true"]:hover { background: #d6b95c; border-color: #d6b95c; }
.rber-found:focus-visible { outline: 2px solid #f8fafc; outline-offset: 2px; }
.rber-found-ico { display: inline-flex; }
.rber-found-ico svg { width: 14px; height: 14px; }
/* M12 fix (visual P3): the phone peek sheet ends 16 px (its bottom padding) under the button, the first block after the
   card header. An 18 px gap under the button puts the next row past that edge, so the peek never shows a row cut in
   half; expanded, the same gap separates the action from the facts. Phone sheet only; the desktop dock is unchanged. */
.pkmega .pkmega-dt--sheet .rber-found { margin-bottom: 18px; }