/* Design tokens ported from the "Design direction decisions" prototype (MSQ Tracker.dc.html). */

/* Height of the sticky top bar, kept in sync with its breakpoints below so `.sec-head`'s sticky
   offset never drifts out from under it. */
:root { --topbar-h: 56px; }

[data-theme="dark"] {
    --bg: oklch(0.16 0.004 260);
    --bg-elev: oklch(0.205 0.004 260);
    --bg-elev-2: oklch(0.26 0.004 260);
    --border: oklch(1 0 0 / 0.09);
    --border-strong: oklch(1 0 0 / 0.18);
    --text: oklch(0.93 0.003 260);
    --text-secondary: oklch(0.66 0.006 260);
    --text-muted: oklch(0.46 0.006 260);
    --accent: oklch(0.68 0.13 300);
    --accent-bg: oklch(0.68 0.13 300 / 0.16);
    --accent-text: oklch(0.14 0.01 300);
    --danger: oklch(0.66 0.14 25);
    --danger-bg: oklch(0.66 0.14 25 / 0.14);
}

[data-theme="light"] {
    --bg: oklch(0.985 0.002 260);
    --bg-elev: oklch(1 0 0);
    --bg-elev-2: oklch(0.955 0.002 260);
    --border: oklch(0.16 0 0 / 0.11);
    --border-strong: oklch(0.16 0 0 / 0.2);
    --text: oklch(0.22 0.004 260);
    --text-secondary: oklch(0.46 0.006 260);
    --text-muted: oklch(0.62 0.006 260);
    --accent: oklch(0.52 0.15 300);
    --accent-bg: oklch(0.52 0.15 300 / 0.1);
    --accent-text: oklch(0.99 0.002 300);
    --danger: oklch(0.55 0.16 25);
    --danger-bg: oklch(0.55 0.16 25 / 0.1);
}

@keyframes slideIn {
    from { transform: translateX(24px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes popCheck {
    0% { transform: scale(0.4); opacity: 0; }
    60% { transform: scale(1.12); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    font-family: "Inter", system-ui, sans-serif;
}

a { color: inherit; text-decoration: none; }

.app-root {
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    width: 100%;
}

/* --- Top bar --- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    min-height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 12px;
    padding: 0 32px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elev);
}

.topbar-left { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; row-gap: 6px; }
.topbar-right { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; row-gap: 6px; }

.brand { display: flex; align-items: center; gap: 8px; }
.brand-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.brand-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }

/* --- Buttons --- */

.btn {
    font-family: inherit;
    cursor: pointer;
    border-radius: 8px;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 13px;
    padding: 7px 14px;
}

.btn-outline { border: 1px solid var(--border); padding: 6px 12px; font-size: 12px; }

.btn-primary {
    background: var(--accent);
    color: var(--accent-text);
    font-weight: 600;
    font-size: 14px;
    padding: 12px 22px;
}

.btn-primary:disabled { opacity: 0.5; cursor: default; }

.btn-danger { background: var(--danger); color: var(--accent-text); font-weight: 600; font-size: 12px; padding: 6px 12px; }
.btn-danger-outline { background: var(--danger-bg); border: 1px solid var(--border); color: var(--danger); font-size: 12px; padding: 6px 12px; }
.btn-ghost { color: var(--text-muted); font-size: 12px; padding: 0; }
.btn-active { background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.btn-link { font-size: 11px; color: var(--accent); padding: 2px 4px; }

/* Segmented control (theme, recap length, device) */
.segmented { display: flex; gap: 2px; background: var(--bg-elev-2); border-radius: 8px; padding: 2px; }
.segmented .btn { font-size: 12px; padding: 5px 12px; border-radius: 6px; }
.segmented .seg-active { background: var(--bg-elev); color: var(--text); }

/* --- Page shell --- */

.page-shell { max-width: 1200px; margin: 0 auto; }
.page-body { padding: clamp(16px, 5vw, 32px) clamp(16px, 5vw, 32px) clamp(32px, 8vw, 64px); }

/* --- Dashboard hero --- */

.hero {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: clamp(16px, 4vw, 28px) clamp(16px, 4vw, 32px);
    background: var(--bg-elev);
    margin-bottom: 32px;
    min-height: 150px;
    display: flex;
    align-items: center;
}

.hero-row { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 32px; flex-wrap: wrap; }
.eyebrow { font-size: 13px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.hero-title { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
.hero-sub { font-size: 14px; color: var(--text-secondary); margin-top: 6px; }
.hero-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.hero-actions .btn-outline { font-size: 13px; padding: 12px 18px; }

.complete-flash { display: flex; align-items: center; gap: 16px; animation: popCheck 0.3s ease-out; }
.complete-check {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--accent); color: var(--accent-text);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; flex-shrink: 0;
}

/* --- Stats --- */

.stat-row { display: flex; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; }
.stat { flex: 1; min-width: 160px; border: 1px solid var(--border); border-radius: 12px; padding: 16px 20px; }
.stat-label { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.stat-value { font-size: 22px; font-weight: 700; }
.stat-note { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

/* --- Section headings --- */

.section-label {
    font-size: 13px; font-weight: 600; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px;
}

.section-label-sm {
    font-size: 12px; font-weight: 600; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px;
}

/* --- Expansion cards --- */

/* min(260px, 100%) instead of a bare 260px stops auto-fill forcing a column wider than the
   viewport itself — it degrades to a single column below ~260px without a breakpoint. */
.exp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.exp-card { border: 1px solid var(--border); border-radius: 12px; padding: 20px; cursor: pointer; background: var(--bg-elev); }
.exp-card.not-started { opacity: 0.6; }
.exp-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.exp-card-name { font-size: 15px; font-weight: 600; }
.pill { font-size: 11px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; }
.exp-card-foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); }

/* --- Progress bar --- */

.bar { height: 6px; background: var(--bg-elev-2); border-radius: 3px; overflow: hidden; margin-bottom: 10px; }
.bar-fill { height: 100%; background: var(--accent); }
.bar-sm { width: 70px; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin: 0; }

/* --- Expansion detail --- */

.detail-title { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.detail-meta { font-size: 13px; color: var(--text-secondary); margin-bottom: 24px; }

.compare-banner {
    display: flex; align-items: center; justify-content: space-between;
    border: 1px solid var(--border); border-radius: 8px;
    padding: 10px 16px; margin-bottom: 16px;
    font-size: 13px; color: var(--text-secondary);
}

.compare-banner.invite { border-style: dashed; color: var(--text-muted); }
.compare-banner input {
    flex: 1; background: var(--bg-elev-2); border: 1px solid var(--border);
    border-radius: 6px; padding: 8px 10px; color: var(--text);
    font-size: 13px; font-family: inherit;
}

.quest-list { border: 1px solid var(--border); border-radius: 12px; }

.sec-head {
    position: sticky; top: var(--topbar-h); z-index: 10;
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 16px;
    background: var(--bg-elev-2);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.sec-head.first { border-radius: 11px 11px 0 0; }
.sec-head-left { display: flex; align-items: center; gap: 10px; }
.sec-name { font-size: 13px; font-weight: 600; }
.sec-head-right { display: flex; align-items: center; gap: 10px; }
.sec-count { font-size: 12px; color: var(--text-muted); min-width: 52px; text-align: right; }

.chevron { display: inline-block; transition: transform 0.15s; font-size: 11px; color: var(--text-muted); }
.chevron.open { transform: rotate(90deg); }

/* Row grid gains a leading column when a compared player is active. */
.quest-grid { display: grid; grid-template-columns: 20px 26px 1fr 40px 46px; align-items: center; gap: 12px; }
.quest-grid.comparing { grid-template-columns: 20px 20px 26px 1fr 40px 46px; }

.quest-row { padding: 6px 16px; min-height: 36px; border-bottom: 1px solid var(--border); border-left: 3px solid transparent; }
.quest-row.current { background: var(--accent-bg); border-left-color: var(--accent); }
.quest-row.locked { opacity: 0.55; }
.quest-num { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.quest-name { font-size: 13.5px; }
.quest-row.completed .quest-name { color: var(--text-secondary); text-decoration: line-through; }
.quest-row.current .quest-name { font-weight: 600; }
.quest-level { font-size: 12px; color: var(--text-muted); text-align: right; }
/* Grid items default to a min-width driven by their content; without min-width:0 the 1fr name
   column refuses to shrink below the text's intrinsic width and forces the whole row wider than
   the viewport. Ellipsis then trims the overflowing text instead of the row growing. */
.quest-name-cell, .locked-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.quest-name { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ahead-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; display: inline-block; }

.quest-check { width: 15px; height: 15px; accent-color: var(--accent); flex-shrink: 0; }
.quest-check.other { accent-color: var(--text-muted); }
.quest-check.actionable { cursor: pointer; }

/* Coarse (touch) pointers get a bigger hit area without disturbing the grid track width: the
   checkbox grows past its 20px column via negative margin rather than pushing layout. */
@media (pointer: coarse) {
    .quest-check { width: 22px; height: 22px; margin: -3.5px; }
}

/* Locked rows show a padlock plus a skeleton where the title would be. */
.locked-cell { display: flex; align-items: center; gap: 8px; }
.lock { width: 9px; height: 7px; border: 1.5px solid var(--text-muted); border-radius: 1px; position: relative; margin-top: 5px; }
.lock::before {
    content: ""; position: absolute; top: -6px; left: 0.5px;
    width: 6px; height: 6px;
    border: 1.5px solid var(--text-muted); border-bottom: none;
    border-radius: 6px 6px 0 0;
}
.skeleton { height: 7px; background: var(--border-strong); border-radius: 4px; }

/* --- Settings --- */

.settings { max-width: 520px; }
.settings-title { font-size: 22px; font-weight: 700; margin-bottom: 24px; }
.setting { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--border); }
.setting.stacked { display: block; }
.setting.last { border-bottom: none; }
.setting-name { font-size: 14px; font-weight: 500; }
.setting-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; }
.inline-form { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.inline-form input {
    flex: 1; background: var(--bg-elev-2); border: 1px solid var(--border);
    border-radius: 6px; padding: 8px 10px; color: var(--text);
    font-size: 13px; font-family: inherit;
}

/* --- Recap drawer --- */

.scrim { position: fixed; inset: 0; background: oklch(0 0 0 / 0.45); z-index: 50; }

.drawer {
    position: fixed; top: 0; right: 0;
    height: 100vh; width: 420px; max-width: 100vw;
    background: var(--bg-elev);
    border-left: 1px solid var(--border);
    z-index: 51;
    display: flex; flex-direction: column;
    animation: slideIn 0.2s ease-out;
}

.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.drawer-title { font-size: 16px; font-weight: 700; }
.drawer-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.drawer-close { background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; line-height: 1; font-family: inherit; }
.drawer-body { flex: 1; overflow-y: auto; padding: 24px; }
.drawer-body p { font-size: 15px; line-height: 1.7; color: var(--text); margin: 0 0 16px; max-width: 340px; }
.drawer-foot { display: flex; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--border); }
.drawer-foot .btn { flex: 1; font-size: 13px; padding: 10px; }

.char-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
.char { display: flex; align-items: flex-start; gap: 10px; }
.char-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--bg-elev-2); color: var(--text-secondary);
    font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.char-name { font-size: 13px; font-weight: 600; }
.char-desc { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
.spoiler-note { font-size: 12px; color: var(--text-muted); font-style: italic; }

#blazor-error-ui {
    background: var(--danger-bg);
    color: var(--danger);
    bottom: 0;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* --- Player search, profiles, live indicator --- */

.compare-banner.stacked {
    flex-direction: column; align-items: stretch; gap: 10px;
}

.compare-banner .inline-form { display: flex; align-items: center; gap: 8px; }

.player-results { display: flex; flex-direction: column; gap: 2px; }

.player-result {
    display: flex; align-items: center; gap: 10px;
    background: transparent; border: 1px solid transparent; border-radius: 8px;
    padding: 7px 8px; cursor: pointer;
    font-family: inherit; font-size: 13px; color: var(--text); text-align: left;
}

.player-result:hover { background: var(--bg-elev-2); border-color: var(--border); }
.player-result-name { font-weight: 600; }
.player-result-world { color: var(--text-muted); font-size: 12px; margin-left: auto; }
.player-empty { font-size: 12px; color: var(--text-muted); padding: 4px 8px; }

.profile-identity { display: flex; align-items: center; gap: 14px; }

.profile-avatar {
    width: 48px; height: 48px; font-size: 18px;
    background: var(--accent-bg); color: var(--accent);
}

.topbar-avatar { width: 20px; height: 20px; font-size: 10px; margin-right: 6px; }

.topbar-right .btn { display: inline-flex; align-items: center; }

/* Pulses while a watched profile is streaming updates, so a still screen still reads as live. */
.live-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent); flex-shrink: 0;
    animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

.compare-banner.auth-error {
    border-color: var(--danger); background: var(--danger-bg); color: var(--text);
}

/* --- Responsive --- */

/* Phones and small tablets: top bar collapses to icon-only controls, hero/stat/setting rows
   stack, and the recap drawer goes full-bleed. Also raises --topbar-h so the sticky section
   header (`.sec-head`) still sits flush below the now-taller (wrapping) top bar. */
@media (max-width: 640px) {
    :root { --topbar-h: 96px; }

    .topbar { padding: 8px 16px; }
    .brand-name { font-size: 13px; }
    .theme-toggle-label { display: none; }
    .theme-toggle { padding: 8px 10px; }
    .topbar-account-name { display: none; }

    .page-body { padding-top: 16px; }

    .hero-actions { width: 100%; }
    .hero-actions .btn { flex: 1; }

    .stat { min-width: 140px; }

    .setting, .setting-row { flex-direction: column; align-items: flex-start; gap: 10px; }

    .compare-banner { flex-direction: column; align-items: stretch; gap: 8px; }
    .player-result { flex-wrap: wrap; }
    .player-result-world { margin-left: 0; flex-basis: 100%; }

    .drawer { width: 100%; }
    .drawer-body p { max-width: none; }

    .quest-row { padding: 6px 12px; }
    .quest-grid { gap: 8px; }

    .uncomplete-confirm { flex-direction: column; align-items: stretch; bottom: 12px; }
    .uncomplete-actions .btn { flex: 1; }
}

/* Narrow phones (iPhone SE / small Android widths and below): the quest number column is the
   least valuable thing on the row, so it's dropped to give the quest name breathing room. */
@media (max-width: 400px) {
    .quest-num { display: none; }
    .quest-grid { grid-template-columns: 20px 1fr 40px 40px; gap: 6px; }
    .quest-grid.comparing { grid-template-columns: 20px 20px 1fr 40px 40px; }
    .quest-row { padding: 6px 8px; }
}

/* --- Un-complete confirmation ---
   Pinned to the bottom of the viewport rather than dropped into the list: the click that opens it
   happens in a long scrolling list, and a prompt about deleting progress must not scroll away. */

.uncomplete-confirm {
    position: fixed; z-index: 52;
    left: 50%; transform: translateX(-50%);
    bottom: 24px; width: min(560px, calc(100vw - 32px));
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 18px;
    background: var(--bg-elev);
    border: 1px solid var(--danger); border-radius: 10px;
    box-shadow: 0 12px 32px rgb(0 0 0 / 0.28);
}

.uncomplete-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.uncomplete-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.uncomplete-actions { display: flex; gap: 8px; flex-shrink: 0; }