/* ============================================
   Secret Tracker (/secret-tracker/) styles
   Loaded after global.css by includes/header.php on this page only.

   Built from the design workshop's Study E (og-workshop/secret-finder.html,
   picked by the owner 2026-10-27): who you're checking, then filters beside
   one list, missing secrets first, each row opening in place with the how-to,
   what Blizzard says, the player's own checklist and a written guide.
   Full width like the other tools: no max-widths here.

   Colors carry meaning: green is only ever Blizzard's collected status, WoW
   gold is what's still missing, and the site blue is the player's own ticks.
   ============================================ */

/* ---------- Shared: the label trim that keeps rows on one center line ---------- */
/* Each label is its own flex item, trimmed to its capitals, so flex centering
   centers the letters themselves (the dashboard game pills' fix,
   docs/design-rules.md). */
.st-lbl,
.st-n {
    display: block;
    line-height: 1;
    text-box: trim-both cap alphabetic;
}
.st-n { font-variant-numeric: tabular-nums; }

::selection { background: rgba(39, 170, 226, 0.35); color: #fff; }
html { scrollbar-color: #26303f transparent; }

.secret-tracker .st-tool {
    --st-stage: #181818;               /* = Blizzard's render background, as Mount Palette */
    --st-have: #80c342;                /* the site's success green */
    --st-have-text: #a6dc72;
    --st-miss: #ffd100;                /* WoW gold: what's still out there */
    --st-mine: #27aae2;                /* the player's own ticks: the site blue */
    --st-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --st-line: rgba(255, 255, 255, 0.07);
    --q-epic: #a335ee;
    --q-rare: #0070dd;
}

/* Retail only: any other game swaps the tool for .st-soon (Mount Palette's pattern) */
.secret-tracker .st-tool:not([data-game="retail"]) .st-retail-only { display: none !important; }
.secret-tracker .st-tool[data-game="retail"] .st-soon { display: none; }

/* Intro art: the three mounts' floor layout is in global.css (shared with the home tile) */

/* Signed in: a sentence in place of the sign-in button */
.st-intro-count { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--color-text-muted); }
.st-intro-count strong { color: var(--color-text-light); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- Not Retail (Mount Palette's .mp-soon, same look) ---------- */
.st-soon {
    --a: var(--game-color);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px 22px;
    padding: 24px 26px;
    border-color: color-mix(in srgb, var(--a) 30%, rgba(255, 255, 255, 0.06));
    background:
        radial-gradient(70% 160% at 0% 0%, color-mix(in srgb, var(--a) 12%, transparent), transparent 62%),
        var(--color-bg-panel);
}
.st-soon__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--a) 14%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--a) 30%, transparent);
    color: var(--a);
}
.st-soon__icon svg { width: 26px; height: 26px; }
.panel .st-soon__title { margin: 0; font-size: 1.2rem; font-weight: 800; text-align: left; }
.st-soon__text { margin: 6px 0 0; font-size: 0.92rem; line-height: 1.55; color: var(--color-text-muted); }
.st-soon__btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; font-size: 0.92rem; font-weight: 600; white-space: nowrap; }
.st-soon__btn .btn-label { top: 0; line-height: 1; text-box: trim-both cap alphabetic; }
.st-soon__btn-icon { display: inline-flex; color: var(--game-color); }
.st-soon__btn-icon svg { width: 17px; height: 17px; }
@media (max-width: 760px) {
    .st-soon { grid-template-columns: auto minmax(0, 1fr); padding: 20px; }
    .st-soon__btn { grid-column: 1 / -1; justify-content: center; width: 100%; }
}

/* ---------- Fields: the Filters panel scale ---------- */
.st-field { display: grid; gap: 7px; min-width: 0; }
.st-field > label,
.st-cap {
    display: block;
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.secret-tracker .st-input,
.secret-tracker .st-select {
    height: 44px;
    min-height: 0;
    padding: 0 13px;
    font-size: 0.92rem;
    font-weight: 500;
}
.secret-tracker .st-input::placeholder { font-weight: 400; color: var(--color-text-dark); }
.secret-tracker .st-select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    background-size: 15px 15px;
    text-overflow: ellipsis;
    cursor: pointer;
}
.secret-tracker .st-input.is-error { border-color: var(--color-error); }
.st-help { margin: 0; font-size: 0.8rem; line-height: 1.45; color: var(--color-text-dark); }
.st-help.is-error { color: #fca5a5; }

/* Search field with its icon inside (Price Check's) */

/* ---------- Buttons ---------- */
.st-btn {
    height: 44px;
    padding: 0 18px;
    gap: 8px;
    font-size: 0.92rem;
    font-weight: 600;
    white-space: nowrap;
}
.st-btn svg { flex: none; width: 17px; height: 17px; }
.st-btn .btn-label { top: 0; }
.st-btn--sm { height: 36px; padding: 0 14px; font-size: 0.86rem; }
.st-btn--sm svg { width: 15px; height: 15px; }
.st-btn--quiet { background: transparent; box-shadow: inset 0 0 0 1px var(--color-border-input); }
.st-btn--go { background: var(--color-primary); color: #04121b; }
.st-btn--go svg { stroke: currentColor; }
.st-btn--go:hover, .st-btn--go:focus { background: var(--color-primary-hover); box-shadow: none; }
.st-btn--go:hover svg, .st-btn--go:focus svg { stroke: currentColor; }
.st-btn .st-ext { width: 13px; height: 13px; opacity: 0.7; }
.st-btn[aria-pressed="true"] { background: rgba(128, 195, 66, 0.16); box-shadow: inset 0 0 0 1px rgba(128, 195, 66, 0.55); color: var(--st-have-text); }
.st-btn[aria-pressed="true"] svg { stroke: currentColor; }

/* ---------- Chips and the segmented switch ---------- */
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.st-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 13px;
    border: 1px solid var(--color-border-input);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.02);
    color: var(--color-text-light);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.st-chip:hover { border-color: rgba(39, 170, 226, 0.55); }
.st-chip[aria-pressed="true"] { border-color: var(--color-primary); background: rgba(39, 170, 226, 0.14); color: #fff; }
.st-chip .st-n { color: var(--color-text-dark); font-weight: 600; font-size: 0.8rem; }
.st-chip[aria-pressed="true"] .st-n { color: #9fd8f2; }
.st-chip:disabled { opacity: 0.45; cursor: default; }
.st-chip:disabled:hover { border-color: var(--color-border-input); }


/* ---------- Status tags ---------- */
.st-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 9px 0 7px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
}
.st-tag svg { flex: none; width: 12px; height: 12px; }
.st-tag--have { color: var(--st-have-text); background: rgba(128, 195, 66, 0.12); box-shadow: inset 0 0 0 1px rgba(128, 195, 66, 0.35); }
.st-tag--miss { color: var(--st-miss); background: rgba(255, 209, 0, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 209, 0, 0.3); }
.st-tag--unknown { color: #c3cedc; background: rgba(148, 163, 184, 0.08); box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.35); }
.st-tag--mine { color: #9fd8f2; background: rgba(39, 170, 226, 0.1); box-shadow: inset 0 0 0 1px rgba(39, 170, 226, 0.4); }
.st-tag--none { color: var(--color-text-muted); background: rgba(255, 255, 255, 0.04); }

/* Reward icons (Blizzard's and Wowhead's), framed in their quality color */
.st-icon {
    display: block;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 9px;
    border: 1px solid var(--q, var(--q-epic));
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.9);
    background: #0b111c;
    object-fit: cover;
}
.st-icon--rare { --q: var(--q-rare); }
.st-icon--sm { width: 36px; height: 36px; border-radius: 7px; }
.st-icon--xs { width: 28px; height: 28px; border-radius: 6px; }

/* Reward type glyphs from the site's own img/ui (fill=currentColor, so masks) */
.st-type { display: block; flex: none; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.st-type--mount { --m: url('/img/ui/mounts.svg'); }
.st-type--pet { --m: url('/img/ui/pets.svg'); }
.st-type--item { --m: url('/img/ui/toys.svg'); }
.st-type--ach { --m: url('/img/ui/achievements.svg'); }

/* Effort, in words */
.st-effort { font-weight: 600; color: var(--color-text-light); }
.st-effort--1 { color: #a6dc72; }
.st-effort--2 { color: #e6d27a; }
.st-effort--3 { color: #f2a36b; }
.st-effort--4 { color: #f28b8b; }

/* ---------- The detail block (inside an open row) ---------- */
.st-detail { display: grid; gap: 18px; }
.st-detail__how { margin: 0; font-size: 0.97rem; line-height: 1.6; color: var(--color-text); }
.st-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px 18px; margin: 0; }
.st-facts div { min-width: 0; }
.st-facts dt { margin: 0 0 6px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-dark); }
.st-facts dd { margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--color-text-light); }

/* What Blizzard told us: the one fact we can check */
.st-truth {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 4px 12px;
    align-items: center;
    padding: 13px 14px;
    border-radius: 10px;
    border: 1px solid var(--st-line);
    background: rgba(255, 255, 255, 0.025);
}
.st-truth__icon { grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
.st-truth__icon svg { width: 17px; height: 17px; }
.st-truth__title { margin: 0; font-size: 0.95rem; font-weight: 700; color: #fff; }
.st-truth__text { margin: 0; font-size: 0.84rem; line-height: 1.5; color: var(--color-text-muted); }
.st-truth--have { border-color: rgba(128, 195, 66, 0.3); background: rgba(128, 195, 66, 0.06); }
.st-truth--have .st-truth__icon { background: var(--st-have); color: #0b1508; }
.st-truth--miss { border-color: rgba(255, 209, 0, 0.22); background: rgba(255, 209, 0, 0.04); }
.st-truth--miss .st-truth__icon { background: rgba(255, 209, 0, 0.12); color: var(--st-miss); box-shadow: inset 0 0 0 1px rgba(255, 209, 0, 0.35); }
.st-truth--unknown .st-truth__icon,
.st-truth--none .st-truth__icon { background: rgba(148, 163, 184, 0.1); color: #c3cedc; box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.35); }
.st-truth--mine { border-color: rgba(39, 170, 226, 0.3); background: rgba(39, 170, 226, 0.06); }
.st-truth--mine .st-truth__icon { background: rgba(39, 170, 226, 0.14); color: var(--st-mine); box-shadow: inset 0 0 0 1px rgba(39, 170, 226, 0.45); }
.st-truth__act { grid-column: 2; justify-self: start; margin-top: 8px; }

/* The player's own checklist: blue and hollow, never the green of a checked fact */
.st-check { display: grid; gap: 10px; }
.st-check__head { display: flex; align-items: center; gap: 12px; }
.panel .st-check__title { margin: 0; font-size: 0.95rem; font-weight: 700; color: #fff; text-align: left; }
.st-check__count { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: rgba(39, 170, 226, 0.1); color: #9fd8f2; font-size: 0.75rem; font-weight: 700; }
.st-check__clear { margin-left: auto; padding: 0; border: 0; background: none; color: var(--color-text-muted); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.st-check__clear:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.st-check__clear:disabled { visibility: hidden; }
.st-check__note { display: flex; gap: 9px; margin: 0; font-size: 0.82rem; line-height: 1.5; color: var(--color-text-muted); }
.st-check__note svg { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--st-mine); }
.st-steps { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.secret-tracker .st-step {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    margin: 0;
    padding: 9px 10px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-text);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}
.secret-tracker .st-step:hover { background: rgba(255, 255, 255, 0.04); }
.st-step input {
    -webkit-appearance: none;
    appearance: none;
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    min-height: 0;
    margin: 1px 0 0;
    padding: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.32);
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}
.st-step input::after {
    content: '';
    width: 11px;
    height: 11px;
    background: #04121b;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0;
}
.st-step input:checked { border-color: var(--st-mine); background: var(--st-mine); }
.st-step input:checked::after { opacity: 1; }
.st-step input:checked + span { color: var(--color-text-muted); }
.st-step input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.st-steps--done .st-step { cursor: default; }

/* Achievement badge (Mind-Seeker): only done or not done */

/* ---------- Loading, empty, alerts ---------- */
.st-loading { display: grid; place-items: center; gap: 14px; padding: 46px 20px 30px; text-align: center; }
.st-loading img { width: 40px; height: 40px; }
@media (prefers-reduced-motion: no-preference) { .st-loading img { animation: st-spin 1.1s linear infinite; } }
@keyframes st-spin { to { transform: rotate(360deg); } }
.st-loading b { font-size: 1rem; color: #fff; }
.st-loading p { margin: -6px 0 0; font-size: 0.86rem; color: var(--color-text-muted); }
.st-skel { display: grid; gap: 10px; }
.st-skel span { display: block; height: 72px; border-radius: 12px; background: linear-gradient(90deg, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0.07) 50%, rgba(255,255,255,0.03) 100%) 0 0 / 200% 100%; }
@media (prefers-reduced-motion: no-preference) { .st-skel span { animation: st-shimmer 1.6s ease-in-out infinite; } }
@keyframes st-shimmer { to { background-position: -200% 0; } }

.st-empty { display: grid; justify-items: center; gap: 10px; padding: 44px 20px; text-align: center; }
.st-empty__icon { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: rgba(255, 255, 255, 0.04); color: var(--color-text-muted); box-shadow: inset 0 0 0 1px var(--st-line); }
.st-empty__icon svg { width: 24px; height: 24px; }
.st-empty--won .st-empty__icon { background: rgba(128, 195, 66, 0.14); color: var(--st-have-text); box-shadow: inset 0 0 0 1px rgba(128, 195, 66, 0.4); }
.panel .st-empty__title, .st-empty__title { margin: 4px 0 0; font-size: 1.1rem; font-weight: 700; color: #fff; text-align: center; }
.st-empty__text { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--color-text-muted); text-wrap: balance; }
.st-empty .st-btn { margin-top: 8px; }

.st-alert {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.08);
}
.st-alert__head { display: flex; align-items: center; gap: 10px; }
.st-alert__head svg { flex: none; width: 20px; height: 20px; color: #f87171; }
.st-alert__title { margin: 0; font-size: 0.95rem; font-weight: 700; color: #fff; }
.st-alert__text { margin: 0 0 0 30px; font-size: 0.86rem; line-height: 1.55; color: #e2c4c4; }

/* ---------- Character pickers ---------- */
.st-who__head { display: grid; gap: 4px; margin-bottom: 16px; }
.panel .st-who__title { margin: 0; font-size: 1.15rem; font-weight: 700; text-align: left; }
.st-who__note { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--color-text-muted); }

.st-lookup { display: grid; grid-template-columns: minmax(170px, 0.8fr) minmax(200px, 1fr) auto; gap: 12px; align-items: end; }
.st-lookup__hint { grid-column: 1 / -1; }
.st-account {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.st-account__mark { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(20, 142, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(20, 142, 255, 0.4); }
.st-account__text { display: grid; gap: 6px; min-width: 0; }
.st-account__name { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; color: #fff; }
.st-region { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.08); color: var(--color-text-muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; }
/* "Your account" is mostly lowercase, so its ink sits lower than its cap-trimmed box. Box-centered,
   the region pill read 0.4 to 1.8px high against the label's ink (2026-10-27, the owner saw it).
   1px down centers it on the ink: docs/secret-tracker.md, build notes. */
.st-account__name .st-region { position: relative; top: 1px; }
.st-account__note { margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--color-text-muted); }

/* ---------- The region, in place (2026-10-27, workshop direction A) ----------
   The account pill and the lookup's Region field each open the header's own region menu
   (WarcraftTools.region.menuHTML, wired by utils.js). .region-switch brings the menu's code
   colors and the site blue; these undo its header spacing and keep the menu floating at every
   width (the header's drops into the page below 960px). utils.js nudges it back on screen. */
.st-region-switch { position: relative; display: inline-flex; margin-left: 0; }
.st-region-switch .game-switch__menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    z-index: 60;
    width: 290px;
    max-width: calc(100vw - 32px);
    margin-top: 0;
    background: #0b111b;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
    /* The header's type, not the bold account line's it sits in */
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    color: var(--color-text);
    animation: st-region-open 0.18s var(--st-ease) both;
}
@keyframes st-region-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* The account pill: today's US pill as a button, with a chevron. Its ::before spreads the tap
   area to 44px tall without moving anything. */
.st-region--btn {
    position: relative;
    gap: 3px;
    padding: 0 4px 0 6px;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}
.st-region--btn::before { content: ""; position: absolute; inset: -12px -8px; }
.st-region__chev { flex: none; width: 10px; height: 10px; transition: transform 0.2s ease; }
.st-region--btn:hover,
.st-region--btn[aria-expanded="true"] { background: rgba(39, 170, 226, 0.14); box-shadow: inset 0 0 0 1px rgba(39, 170, 226, 0.55); color: #fff; }
.st-region--btn:hover .st-region__chev,
.st-region--btn[aria-expanded="true"] .st-region__chev { color: var(--color-primary); }
.st-region--btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
[aria-expanded="true"] > .st-region__chev,
[aria-expanded="true"] > .st-region-field__chev { transform: rotate(180deg); }

/* The lookup's Region field: looks like the selects beside it (the Filters panel scale) */
.st-region-switch--lookup { display: flex; }
.st-region-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    height: 44px;
    padding: 0 13px 0 12px;             /* the U's side bearing: its ink starts 14px in, like the Realm's C */
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    background: var(--color-bg-input);
    color: #fff;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}
.st-region-field:hover { border-color: rgba(255, 255, 255, 0.3); }
.st-region-field[aria-expanded="true"],
.st-region-field:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(39, 170, 226, 0.15); }
.st-region-field__label { line-height: 1; text-box: trim-both cap alphabetic; }
.st-region-field__chev { flex: none; width: 15px; height: 15px; color: #94a3b8; transition: transform 0.2s ease; }
.st-lookup { grid-template-columns: 104px minmax(170px, 0.8fr) minmax(200px, 1fr) auto; }

/* The realm wasn't in the new region: it's cleared, and the note says so in WoW gold */
.st-help.is-note { display: flex; align-items: flex-start; gap: 7px; color: #f5d76e; }
.st-help.is-note svg { flex: none; width: 15px; height: 15px; margin-top: 1px; }
.secret-tracker .st-select.is-cleared { border-color: rgba(255, 209, 0, 0.55); }

@media (prefers-reduced-motion: reduce) {
    .st-region-switch .game-switch__menu { animation: none; }
    .st-region__chev, .st-region-field__chev, .st-region--btn { transition: none; }
}

/* =====================================================================
   The checklist: filters on the left, missing secrets first, rows that open in place
   ===================================================================== */
.st-tool .st-filters { position: sticky; top: 16px; display: grid; gap: 22px; margin: 0; padding: 20px; }
.st-filters__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel .st-filters__title { margin: 0; font-size: 1.05rem; font-weight: 700; text-align: left; }
.st-filters__group { display: grid; gap: 10px; }
.st-show { display: grid; gap: 4px; }
.st-show button {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 9px;
    background: none;
    color: var(--color-text-muted);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.st-show button:hover { background: rgba(255, 255, 255, 0.04); color: var(--color-text-light); }
.st-show button[aria-pressed="true"] { border-color: rgba(39, 170, 226, 0.55); background: rgba(39, 170, 226, 0.12); color: #fff; }
.st-show__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.st-show__dot--miss { box-shadow: inset 0 0 0 2px var(--st-miss); }
.st-show__dot--have { background: var(--st-have); }
.st-show__dot--unknown { box-shadow: inset 0 0 0 1.5px #94a3b8; }
.st-show__dot--all { background: linear-gradient(90deg, var(--st-have) 50%, var(--st-miss) 50%); }
.st-show .st-n { margin-left: auto; color: var(--color-text-dark); font-size: 0.82rem; }


.st-group { display: grid; gap: 10px; }
.st-group__head { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; }
.st-group__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.panel .st-group__title, .st-group__title { margin: 0; font-size: 1.05rem; font-weight: 700; color: #fff; }
.st-group__head .st-n { color: var(--color-text-dark); font-size: 0.86rem; font-weight: 600; }
.st-group__hint { margin: 0 0 0 auto; font-size: 0.82rem; color: var(--color-text-dark); }

.st-rows { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.st-row { margin: 0; padding: 0; overflow: hidden; }
.st-row.is-open { border-color: rgba(39, 170, 226, 0.45); }
.st-row--miss { border-color: rgba(255, 209, 0, 0.16); }
.st-row__main {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 180px 112px 20px;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 14px 18px 14px 14px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.st-row__main:hover { background: rgba(255, 255, 255, 0.025); }
.st-row__text { display: grid; gap: 7px; min-width: 0; }
.st-row__name { font-size: 1.02rem; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-row__meta { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 0.82rem; color: var(--color-text-muted); }
.st-row__meta .st-type { width: 14px; height: 14px; color: var(--color-text-dark); }
.st-row__meta .st-sep { width: 3px; height: 3px; flex: none; border-radius: 50%; background: var(--color-text-dark); }
.st-row__effort { display: grid; gap: 6px; font-size: 0.86rem; }
.st-row__time { color: var(--color-text-muted); font-size: 0.8rem; }
.st-row__mine { justify-self: start; }
.st-row__chev { width: 20px; height: 20px; color: var(--color-text-dark); transition: transform 0.25s var(--st-ease); }
.st-row.is-open .st-row__chev { transform: rotate(180deg); color: var(--color-primary); }
.st-row__body { padding: 4px 20px 22px 78px; border-top: 1px solid var(--st-line); padding-top: 18px; }
.st-row__body .st-detail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 28px; align-items: start; }
.st-row__body .st-detail__left { display: grid; gap: 16px; }

.st-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.st-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--st-line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.st-tile:hover { border-color: rgba(39, 170, 226, 0.45); }
.st-tile__name { min-width: 0; flex: 1; font-size: 0.9rem; font-weight: 600; color: var(--color-text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-tile__check { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--st-have); color: #0b1508; }
.st-tile__check svg { width: 13px; height: 13px; }

@media (max-width: 1100px) {
    .st-tool .st-filters { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-tool .st-filters__head { grid-column: 1 / -1; }
    .st-show { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-row__main { grid-template-columns: 48px minmax(0, 1fr) 160px 20px; }
    .st-row__mine { display: none; }
}
@media (max-width: 760px) {
    .st-tool .st-filters { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .st-row__main { grid-template-columns: 48px minmax(0, 1fr) 20px; gap: 12px; padding: 12px 14px 12px 12px; }
    .st-row__effort { grid-column: 2; grid-row: 2; display: flex; align-items: center; gap: 10px; margin-top: -4px; }
    .st-row__chev { grid-column: 3; grid-row: 1; }
    .st-row__body { padding: 16px 14px 18px; }
    .st-row__body .st-detail { grid-template-columns: minmax(0, 1fr); }
    .st-lookup { grid-template-columns: minmax(0, 1fr); }
    .st-lookup .st-btn { width: 100%; justify-content: center; }
    .st-tiles { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
    .st-show { grid-template-columns: minmax(0, 1fr); }
}



/* Phones: every panel heading in the tool stays left (the site centers .panel h2 at 959px and below) */
@media (max-width: 959px) {
    .secret-tracker .st-tool .panel h2:not(.st-empty__title) { text-align: left; }
    .secret-tracker .st-tool .st-who__note { text-align: left; }
}


/* =====================================================================
   Optical tuning (measured by ink at 1x and 2x in Chromium, Inter loaded,
   at 1400, 1200, 1050, 980, 390 and 360px; numbers in docs/secret-tracker.md)
   ===================================================================== */
/* Headings that share a row with a pill or button: trimmed to their capitals
   so flex centering lines up the letters, not the line box */
.panel .st-filters__title,
.panel .st-check__title,
.st-alert__title,
.panel .st-side-title h2,
.st-effort {
    line-height: 1;
    text-box: trim-both cap alphabetic;
}
.st-effort { display: block; }
.st-q__meta .st-lbl, .st-row__meta .st-lbl, .st-card__meta .st-lbl { white-space: nowrap; }
/* Button labels: trimmed to cap height, so flex centers the letters (untrimmed,
   their letter body read 0.7 to 0.9px high). Nudges below use position/top,
   not transforms: a transform skips pixel snapping and moved ink ~1.2px. */
.st-btn .btn-label { line-height: 1; text-box: trim-both cap alphabetic; }
.st-btn svg { position: relative; }
/* The search glyph's lens carries its weight low (measured +0.66 on average) */
.st-btn svg.i-search { top: -0.5px; }
/* The small external-link arrow read 0.6 to 0.9px high */
.st-btn .st-ext { top: 0.5px; }
/* Mind-Seeker's shield glyph read 0.66px low */

/* Alert: the icon sits on the title's first line when the title wraps */
.st-alert__head { align-items: flex-start; }
.st-alert__head svg { margin-top: calc((0.95rem * 0.7275 - 20px) / 2); }
.st-alert__title { line-height: 1.25; text-box: trim-both cap alphabetic; text-wrap: balance; }
@media (max-width: 760px) {
    .st-row__main > .st-icon { grid-row: 1 / span 2; }
    .st-row__chev { grid-row: 1 / span 2 !important; }
    .st-row__effort { margin-top: 0; }
}

/* =====================================================================
   Layout: who you're checking, the count, then filters beside the list
   ===================================================================== */
.st-who { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; }
.st-who--look { display: block; }
.st-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; align-items: start; }
.st-tool .st-filters { position: sticky; top: 16px; display: grid; gap: 22px; margin: 0; padding: 20px; }
.st-view { display: grid; gap: 18px; min-width: 0; }



/* Character-scoped step (data: scope "character"), the one place we'd ask for a character */
.st-scope { display: grid; gap: 8px; padding: 14px 15px; border-radius: 10px; border: 1px dashed rgba(39, 170, 226, 0.45); background: rgba(39, 170, 226, 0.05); }
.st-scope__title { margin: 0; font-size: 0.92rem; font-weight: 700; color: #fff; }
.st-scope__text { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.84rem; line-height: 1.5; color: var(--color-text-muted); }
.st-scope__text strong { color: var(--color-text-light); }

/* Optical fixes: every one of these sets a font size whose capitals are a
   whole number of pixels (Inter's cap height is 0.7275em) inside a box whose
   leftover height is even, so the text and its box snap to the same pixel row */
.st-tool .st-btn svg { width: 18px; height: 18px; top: 0; }            /* 44px button: 13px above and below */
.st-tool .st-btn--sm svg { width: 16px; height: 16px; }                /* 36px button: 10px */
.st-tool .st-btn svg.st-ext { width: 14px; height: 14px; top: 0; }      /* was 13px at a half-pixel offset */
.st-tool .st-check__head { min-height: 23px; }
.panel .st-tool .st-check__title, .st-tool .st-check__title { font-size: 15.12px; }   /* caps 11px in 23 */
.st-tool .st-check__count { height: 23px; }
.st-tool .st-check__count .st-n { font-size: 12.37px; }                /* caps 9px in 23 */
.st-tool .st-tag { font-size: 11px; }                                   /* caps 8px in 24 */

@media (max-width: 1100px) {
    .st-layout { grid-template-columns: minmax(0, 1fr); }
    .st-tool .st-filters { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .st-tool .st-filters__head { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .st-tool .st-filters { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .st-who .st-btn { width: 100%; justify-content: center; }
}

/* ---------- FAQ: the shared .faq component (global.css); this is only the secrets list inside it ---------- */
.st-faq-list { margin: 10px 0 0; padding-left: 20px; columns: 2 260px; column-gap: 32px; color: var(--color-text-muted); line-height: 1.75; font-size: 0.95rem; }
.st-faq-list a { color: var(--color-text-light); }
.st-faq-list span { color: var(--color-text-dark); }

/* ---------- Bits the page script uses ---------- */
.st-group__dot--miss { box-shadow: inset 0 0 0 2px var(--st-miss); }
.st-group__dot--have { background: var(--st-have); }
.st-group__dot--unknown { box-shadow: inset 0 0 0 1.5px #94a3b8; }
.st-gap { height: 16px; }
.st-back { margin-top: 14px; }
.secret-tracker .st-step--plain { grid-template-columns: minmax(0, 1fr); color: var(--color-text-muted); cursor: default; }
.secret-tracker .st-step--plain:hover { background: none; }
.st-intro-count a { color: var(--color-primary); }
.st-view { display: grid; gap: 18px; min-width: 0; }
.st-view > .panel { margin: 0; }

/* The search glyph's lens carries its weight low: up half a pixel (measured +0.32 to +0.51
   without it in Find secrets and Look up a character) */
.st-tool .st-btn svg.i-search { top: -0.5px; }

/* ---------- The summary pane: first in the right column, so its top lines up with the
   filters' top in every state (results, nothing missing, loading, before a lookup) ---------- */
.st-pane {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px 16px;
    margin: 0;
    padding: 16px 20px 16px 16px;
}
.st-pane__mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.05); color: var(--color-text-muted); box-shadow: inset 0 0 0 1px var(--st-line); }
.st-pane__mark svg { display: block; }
.st-pane__mark img { display: block; width: 24px; height: 24px; }
@media (prefers-reduced-motion: no-preference) { .st-pane--loading .st-pane__mark img { animation: st-spin 1.1s linear infinite; } }
.st-pane--miss { border-color: rgba(255, 209, 0, 0.22); }
.st-pane--miss .st-pane__mark { background: rgba(255, 209, 0, 0.1); color: var(--st-miss); box-shadow: inset 0 0 0 1px rgba(255, 209, 0, 0.3); }
.st-pane--won { border-color: rgba(128, 195, 66, 0.3); }
.st-pane--won .st-pane__mark { background: rgba(128, 195, 66, 0.14); color: var(--st-have-text); box-shadow: inset 0 0 0 1px rgba(128, 195, 66, 0.4); }
.st-pane__text { display: grid; gap: 6px; min-width: 0; }
.st-pane__title { margin: 0; font-size: 1.02rem; font-weight: 600; line-height: 1.4; color: var(--color-text-light); text-wrap: pretty; }
.st-pane__title strong { color: #fff; font-weight: 700; }
.st-pane__note { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--color-text-muted); }
@media (max-width: 760px) {
    .st-pane { grid-template-columns: 40px minmax(0, 1fr); padding: 14px 16px 14px 14px; }
    .st-pane__mark { width: 40px; height: 40px; }
    .st-pane__act { grid-column: 1 / -1; width: 100%; justify-content: center; }
}

/* Rewards with no icon art (the can't-check transmog, weapons and achievements): a drawn glyph
   in the same 48px quality frame */
.st-icon--glyph { display: grid; place-items: center; color: #c3cedc; background: radial-gradient(closest-side, rgba(148, 163, 184, 0.16), rgba(11, 17, 28, 1)); }
.st-icon--glyph.st-icon--sm svg { width: 18px; height: 18px; }
.st-type--achievement { --m: url('/img/ui/achievements.svg'); }

.secret-tracker .st-tool + .faq { margin-top: 20px; }

/* ---------- Hero line-up (2026-10-27): Incognitro front and center, Thrayir hovering beside it,
   seven more secret rewards around them. A 600 x 300 unit floor like the other tool heroes'
   (global.css .intro-mounts), with each figure placed by its center x, its height off the floor
   and its height, in --u (1px at 600px wide, smaller below). ---------- */
.st-lineup {
    container-type: inline-size;
    position: relative;
    width: 100%;
    aspect-ratio: 600 / 300;
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 10%);
    mask-image: linear-gradient(to top, transparent 0, #000 10%);
}
.st-fig {
    --u: calc(100cqi / 600);
    --tint: var(--color-primary);
    position: absolute;
    left: calc(var(--x) * var(--u));
    bottom: calc(var(--b, 0) * var(--u));
    height: calc(var(--h) * var(--u));
    margin: 0;
    transform: translateX(-50%);
    z-index: var(--z, 2);
}
.st-fig img { position: relative; display: block; width: auto; height: 100%; }
/* A pool of the reward's own color on the floor under it (flyers cast theirs far below) */
.st-fig::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc((var(--b, 0) * -1 - 12) * var(--u));
    width: 120%;
    height: calc(56 * var(--u));
    transform: translateX(-50%);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--tint) 32%, transparent), transparent);
}
.st-fig--hippo      { --x: 112; --h: 196; --b: 8;   --z: 2; --tint: #c875e0; }
.st-fig--lucid      { --x: 210; --h: 236; --b: 6;   --z: 3; --tint: #6d5cff; }
.st-fig--jumpjets   { --x: 150; --h: 58;  --b: 212; --z: 1; --tint: #6fc3ff; }
.st-fig--thrayir    { --x: 432; --h: 150; --b: 118; --z: 2; --tint: #4f7dff; }
.st-fig--incognitro { --x: 302; --h: 240; --b: 0;   --z: 6; --tint: #6ddc3a; }
.st-fig--slime      { --x: 432; --h: 104; --b: 0;   --z: 7; --tint: #9ccf45; }
.st-fig--baal       { --x: 522; --h: 108; --b: 0;   --z: 4; --tint: #d4433b; }
.st-fig--gortham    { --x: 572; --h: 72;  --b: 0;   --z: 5; --tint: #e07bd8; }
.st-fig--jenafur    { --x: 52;  --h: 66;  --b: 0;   --z: 5; --tint: #c9b27a; }
/* Incognitro gets the strongest pool: the fel glow it rides on */
.st-fig--incognitro::before { width: 150%; height: calc(80 * var(--u)); background: radial-gradient(closest-side, color-mix(in srgb, var(--tint) 42%, transparent), transparent); }
@media (prefers-reduced-motion: no-preference) {
    .st-fig { animation: st-fig-rise 900ms cubic-bezier(0.16, 1, 0.3, 1) both; }
    .st-fig--incognitro { animation-delay: 80ms; }
    .st-fig--thrayir, .st-fig--lucid { animation-delay: 180ms; }
    .st-fig--hippo, .st-fig--slime, .st-fig--baal { animation-delay: 260ms; }
    .st-fig--jumpjets, .st-fig--gortham, .st-fig--jenafur { animation-delay: 340ms; }
    .st-fig--thrayir img, .st-fig--jumpjets img { animation: st-fig-hover 5.5s ease-in-out 1.2s infinite alternate; }
    .st-fig--jumpjets img { animation-duration: 6.5s; }
}
@keyframes st-fig-rise { from { opacity: 0; transform: translate(-50%, calc(14 * var(--u))); } }
@keyframes st-fig-hover { to { transform: translateY(calc(-8 * var(--u))); } }

/* Phones: Region and Realm share the first row of the lookup, so the form gets no taller */
@media (max-width: 760px) {
    .st-lookup { grid-template-columns: 96px minmax(0, 1fr); }
    .st-lookup .st-field--name,
    .st-lookup .st-btn,
    .st-lookup .st-lookup__hint { grid-column: 1 / -1; }
}