@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

@font-face {
    font-family: 'BrandMark Sans';
    src: url('/static/fonts/BrandMarkSans.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ── Tokens ──
   Raw brand palette (locked, see Guides/Styles.md §1.3) plus the Kaempferi
   raw colors from DesignDoc §8. Components only reference semantic aliases. */
:root {
    /* Raw brand palette — locked */
    --carbon-black: #1e2019;
    --space-indigo: #2c2754;
    --white-smoke: #f2f4f3;
    --blue-energy: #3f8efc;
    --electric-sapphire: #2667ff;

    /* Kaempferi raw colors.
       rust is the sidebar surface and the start of the header wash.
       crab-orange is the accent, bright enough to lift off rust;
       molten-amber is its hover/link lift. */
    --rust: #5a2412;
    --crab-orange: #e8622c;
    --molten-amber: #ff8a4d;

    /* Retailer brand colors (Styles.md §2.5 exception) — only used via [data-site] */
    --site-onepiece-cardgame: #d7000f;
    --site-pokemon-center-us: #ffcb05;

    /* Semantic: surfaces */
    --bg-primary: var(--carbon-black);
    /* Cards sit on the page colour and are defined by an orange edge rather
       than a lighter fill, so rows and entries separate by their dividers
       instead of competing with a saturated surface. Only the sidebar is rust. */
    --bg-card: var(--bg-primary);
    --bg-sidebar: var(--rust);
    --bg-input: #2a2420;
    --bg-input-border: #5a3a2a;
    --border-card: rgba(232, 98, 44, 0.35);
    --divider: rgba(232, 98, 44, 0.20);
    /* Header wash: starts on the sidebar colour and darkens toward the right,
       but never reaches the page colour, so the bottom rule always has
       something to separate. */
    --bg-header: linear-gradient(90deg, var(--rust) 0%, #3d1c0f 55%, #2a1a14 100%);

    /* Semantic: text */
    --text-primary: var(--white-smoke);
    --text-secondary: rgba(242, 244, 243, 0.55);
    --text-muted: rgba(242, 244, 243, 0.35);
    /* carbon-black on #e8622c is 4.9:1 (AA); white-smoke on it is only 3.4:1. */
    --text-on-accent: var(--carbon-black);

    /* Semantic: accent */
    --accent-primary: var(--crab-orange);
    --accent-hover: var(--molten-amber);
    --accent-tint-soft: rgba(232, 98, 44, 0.12);
    --accent-tint: rgba(232, 98, 44, 0.20);
    --accent-tint-strong: rgba(232, 98, 44, 0.45);
    --accent-glow: rgba(232, 98, 44, 0.42);

    /* Semantic: feedback states */
    --success-bg: #0f3d1a;   --success-text: #4ade80;
    --warn-bg:    #3d2e0f;   --warn-text:    #facc15;
    --error-bg:   #3d0f0f;   --error-text:   #f87171;

    /* Radii */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    /* Fonts */
    --font-brand: 'BrandMark Sans', system-ui, sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
}

/* ── Reset ── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%;
    /* No scrollbar-gutter: stable here — on short pages it leaves a bare strip
       down the right edge that the header can't paint into. openModal() in
       shell.js pads <body> by the scrollbar width instead, so locking scroll
       for a modal still doesn't reflow the page. */
    scrollbar-width: thin;
    scrollbar-color: rgba(242, 244, 243, 0.25) transparent;
}

/* ── Custom scrollbar (Chromium / WebKit) ── */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background-color: rgba(242, 244, 243, 0.2);
    border-radius: var(--radius-full);
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(242, 244, 243, 0.38); }
::-webkit-scrollbar-corner { background: transparent; }

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
}

img, svg { display: block; max-width: 100%; }

/* ── Typography ── */

h1 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1.25rem; }
h2 { font-size: 1.1rem; font-weight: 500; margin-bottom: 0.75rem; color: var(--text-secondary); }
p { margin-bottom: 0.5rem; }

a {
    color: var(--accent-hover);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover { color: var(--accent-primary); text-decoration: underline; }

code {
    font-family: var(--font-mono);
    font-size: 0.85em;
    background: rgba(242, 244, 243, 0.06);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-xs);
}

/* Uppercase micro-label idiom for titling a group inside a card. */
.section-title {
    margin: 0.75rem 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

/* ── App shell (header + sidebar) ── */

:root {
    --header-height: 72px;
    --sidebar-width: 220px;
    --sidebar-width-collapsed: 56px;
    --shell-gutter: 1rem;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--header-height);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    background: var(--bg-header);
    border-bottom: 1px solid var(--accent-tint-strong);
}
.app-header-left { display: flex; align-items: center; min-width: 0; }
.app-header-center { display: flex; align-items: center; justify-content: center; min-width: 0; }
.app-header-right { display: flex; justify-content: flex-end; }

.app-header-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--text-primary);
}
.app-header-brand:hover { text-decoration: none; color: var(--text-primary); }

.app-header-logo {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    object-fit: contain;
    flex-shrink: 0;
}

.app-header-wordmark {
    font-family: var(--font-brand);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    gap: var(--shell-gutter);
    padding: var(--shell-gutter);
    min-height: calc(100vh - var(--header-height));
    transition: grid-template-columns 0.18s ease;
}

body.sidebar-collapsed .app-shell {
    grid-template-columns: var(--sidebar-width-collapsed) 1fr;
}

.sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--shell-gutter));
    align-self: start;
    height: calc(100vh - var(--header-height) - 2 * var(--shell-gutter));
    background: var(--bg-sidebar);
    border: 1px solid rgba(242, 244, 243, 0.06);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1rem;
    overflow: hidden;
    transition: padding 0.18s ease;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0.85rem;
}

.sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-full);
    padding: 0;
    /* 2px nudge lines the toggle's center up with the 32px nav-icon
       ovals below it (in both expanded and collapsed states). */
    margin-left: 2px;
    transition: color 0.15s ease, background 0.15s ease;
}
.sidebar-toggle:hover { color: var(--text-primary); background: rgba(242, 244, 243, 0.06); }
.sidebar-toggle:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}
.sidebar-toggle-icon { display: block; }

.sidebar-nav { list-style: none; }
.sidebar-nav ul { list-style: none; }

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.sidebar-nav-link {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.3rem 0.25rem;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    min-width: 0;
    transition: gap 0.18s ease, padding 0.18s ease;
}
.sidebar-nav-link:hover { color: var(--text-primary); text-decoration: none; }
.sidebar-nav-link:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.sidebar-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease;
}
.sidebar-nav-icon svg { width: 18px; height: 18px; }
.sidebar-nav-link:hover .sidebar-nav-icon {
    background: rgba(242, 244, 243, 0.06);
}

.sidebar-nav-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 1;
    /* Just above the label's real rendered width so the max-width
       animation has no dead time, and the same 0.18s as the grid-column
       / padding transitions so everything lands together. */
    max-width: 140px;
    transition:
        opacity 0.18s ease,
        max-width 0.18s ease;
}

.app-shell[data-active="watches"] .nav-watches .sidebar-nav-link,
.app-shell[data-active="events"] .nav-events .sidebar-nav-link,
.app-shell[data-active="settings"] .nav-settings .sidebar-nav-link {
    font-weight: 700;
}
.app-shell[data-active="watches"] .nav-watches .sidebar-nav-label,
.app-shell[data-active="events"] .nav-events .sidebar-nav-label,
.app-shell[data-active="settings"] .nav-settings .sidebar-nav-label {
    color: var(--accent-hover);
}
/* Active item: filled accent oval in both expanded and collapsed states.
   Also pinned on hover so the collapsed hover style can't wash it out. */
.app-shell[data-active="watches"] .nav-watches .sidebar-nav-icon,
.app-shell[data-active="events"] .nav-events .sidebar-nav-icon,
.app-shell[data-active="settings"] .nav-settings .sidebar-nav-icon,
.app-shell[data-active="watches"] .nav-watches .sidebar-nav-link:hover .sidebar-nav-icon,
.app-shell[data-active="events"] .nav-events .sidebar-nav-link:hover .sidebar-nav-icon,
.app-shell[data-active="settings"] .nav-settings .sidebar-nav-link:hover .sidebar-nav-icon {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-on-accent);
}

.sidebar-spacer { flex: 1; }

.sidebar-bottom {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.55rem;
    background: var(--bg-input);
    border: 1px solid var(--bg-input-border);
    border-radius: var(--radius-full);
    overflow: hidden;
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    text-decoration: none;
    transition:
        background 0.15s ease,
        border-color 0.15s ease,
        gap 0.18s ease,
        padding 0.18s ease;
}
.sidebar-user:hover {
    background: rgba(242, 244, 243, 0.06);
    border-color: rgba(242, 244, 243, 0.2);
    text-decoration: none;
    color: inherit;
}
.sidebar-user:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}
.sidebar-user-avatar {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(242, 244, 243, 0.1);
}
.sidebar-user-name {
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.18s ease, flex-grow 0.18s ease;
}

/* ── Collapsed state: nav labels collapse, icons become ovals ── */
body.sidebar-collapsed .sidebar { padding: 1.25rem 0.5rem; }
body.sidebar-collapsed .sidebar-nav-item { justify-content: center; }
body.sidebar-collapsed .sidebar-nav-link { justify-content: center; gap: 0; padding: 0.2rem 0; }
body.sidebar-collapsed .sidebar-nav-label {
    opacity: 0;
    max-width: 0;
    margin: 0;
    pointer-events: none;
    text-decoration: none;
}
body.sidebar-collapsed .sidebar-nav-icon {
    background: var(--bg-input);
    border-color: var(--bg-input-border);
}
body.sidebar-collapsed .sidebar-nav-link:hover .sidebar-nav-icon {
    background: var(--bg-sidebar);
    border-color: var(--accent-primary);
}

/* Profile / user button */
body.sidebar-collapsed .sidebar-user { justify-content: center; gap: 0; padding: 0.3rem; }
/* flex-grow: 0 (animatable) hands the name's leftover width back so
   justify-content can truly center the avatar. */
body.sidebar-collapsed .sidebar-user-name { opacity: 0; flex-grow: 0; }

.app-content {
    min-width: 0;
}

/* ── Layout ── */

.page-container {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem;
}

.page-container--narrow { max-width: 520px; }
.page-container--wide { max-width: 1200px; }
.page-container--full { max-width: none; }

/* ── Page header (in-content row: title + actions + status) ── */

.page-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.page-header h1 { margin: 0; }
.page-header-spacer { flex: 1; }

.page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    flex-wrap: wrap;
}

.page-header-status {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    min-height: 1.5rem;
}
.page-header-status .msg { margin: 0; }
.page-header-status:empty { display: none; }

/* ── Cards ── */

.card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--border-card);
}

.card-title {
    font-size: 1.05rem;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.card-title + .meta { margin-bottom: 0.85rem; }

/* Tinted "card within a card" surface. */
.subcard {
    background: rgba(242, 244, 243, 0.03);
    border: 1px solid rgba(242, 244, 243, 0.08);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.85rem;
}

.empty-state {
    text-align: center;
    color: var(--text-secondary);
    padding: 2.5rem 1rem;
}
.empty-state p { margin-bottom: 1rem; }

/* ── Buttons ── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.5rem 1.15rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: var(--font-body);
    font-weight: 500;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    text-decoration: none;
    line-height: 1.4;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}
/* ``display: inline-flex`` above outranks the UA sheet's low-specificity
   ``[hidden] { display: none }``, so every button toggled via the
   ``hidden`` attribute would stay visible without this. */
.btn[hidden] { display: none; }

.btn-primary {
    background: var(--accent-primary);
    color: var(--text-on-accent);
}
.btn-primary:hover { background: var(--accent-hover); color: var(--text-on-accent); }

.btn-secondary {
    background: rgba(242, 244, 243, 0.08);
    color: var(--text-primary);
    border: 1px solid rgba(242, 244, 243, 0.12);
}
.btn-secondary:hover { background: rgba(242, 244, 243, 0.14); color: var(--text-primary); }

.btn-danger {
    background: #c03030;
    color: var(--white-smoke);
}
.btn-danger:hover { background: #e04040; color: var(--white-smoke); }

.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--accent-primary);
}
.btn-outline:hover { background: var(--accent-tint-soft); color: var(--text-primary); }

.btn-lg {
    padding: 0.75rem 2rem;
    font-size: 1.05rem;
    border-radius: var(--radius-md);
}

.btn-sm {
    padding: 0.25rem 0.65rem;
    font-size: 0.78rem;
}

.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-full);
}
.btn-icon svg { width: 16px; height: 16px; }

/* ── Avatars ── */

.avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid rgba(242, 244, 243, 0.12);
    flex-shrink: 0;
    background: rgba(242, 244, 243, 0.1);
}
.avatar--sm { width: 28px; height: 28px; }
.avatar--lg { width: 56px; height: 56px; }

/* ── Status badges ── */

.status {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: var(--radius-xs);
    font-size: 0.8rem;
    font-weight: 500;
}
.status-ok { background: var(--success-bg); color: var(--success-text); }
.status-warn { background: var(--warn-bg); color: var(--warn-text); }
.status-off { background: var(--error-bg); color: var(--error-text); }
.status-err { background: var(--error-bg); color: var(--error-text); }

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    background: rgba(242, 244, 243, 0.05);
    border: 1px solid rgba(242, 244, 243, 0.08);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.status-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--text-muted);
    flex-shrink: 0;
}
.status-chip--ok .status-chip-dot { background: var(--success-text); }
.status-chip--warn .status-chip-dot { background: var(--warn-text); }
.status-chip--err .status-chip-dot { background: var(--error-text); }
.status-chip--err { color: var(--error-text); }

/* ── Chips (toggle + read-only tags) ── */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(242, 244, 243, 0.06);
    border: 1px solid transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-full);
    padding: 0.3rem 0.75rem;
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.chip:hover { color: var(--text-primary); }
.chip.is-active,
.chip[aria-pressed="true"] {
    background: var(--accent-tint);
    color: var(--accent-hover);
    border-color: var(--accent-tint-strong);
}

/* Read-only retailer tag; brand color via data-site (Styles.md §2.5). */
.site-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem 0.2rem 0.45rem;
    background: rgba(242, 244, 243, 0.06);
    border: 1px solid rgba(242, 244, 243, 0.08);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
}
.site-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--text-muted);
    flex-shrink: 0;
}
.site-badge[data-site="onepiece_cardgame"] .site-badge-dot { background: var(--site-onepiece-cardgame); }
.site-badge[data-site="pokemon_center_us"] .site-badge-dot { background: var(--site-pokemon-center-us); }

/* Event type tag on the feed and watch rows. */
.event-type {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-xs);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.event-type--new_listing { background: var(--accent-tint); color: var(--accent-hover); }
.event-type--restock { background: var(--success-bg); color: var(--success-text); }

/* ── Inputs ── */

input, textarea, select {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--bg-input-border);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    width: 100%;
    font-size: 0.9rem;
    font-family: var(--font-body);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-glow);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }

textarea {
    min-height: 80px;
    resize: vertical;
    font-family: var(--font-mono);
}

input[type="checkbox"] {
    width: auto;
    accent-color: var(--accent-primary);
}

label {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.field { margin-bottom: 0.75rem; }
.field-hint { margin-top: 0.3rem; font-size: 0.78rem; color: var(--text-muted); }

.row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.row > .field { flex: 1; min-width: 140px; }

.check-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.check-row label { margin: 0; color: var(--text-primary); font-size: 0.9rem; cursor: pointer; }

.form-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

/* ── Toggle switch (styled checkbox) ── */
.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
}
.toggle-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-switch-track {
    display: inline-flex;
    align-items: center;
    width: 40px;
    height: 22px;
    border-radius: var(--radius-full);
    background: rgba(242, 244, 243, 0.12);
    transition: background 0.18s ease;
    padding: 2px;
}
.toggle-switch-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text-primary);
    transition: transform 0.18s ease, background 0.18s ease;
}
.toggle-switch input[type="checkbox"]:checked + .toggle-switch-track {
    background: var(--accent-primary);
}
.toggle-switch input[type="checkbox"]:checked + .toggle-switch-track .toggle-switch-thumb {
    transform: translateX(18px);
    background: var(--text-on-accent);
}
.toggle-switch input[type="checkbox"]:focus-visible + .toggle-switch-track {
    box-shadow: 0 0 0 2px var(--accent-glow);
}
.toggle-switch input[type="checkbox"]:disabled + .toggle-switch-track { opacity: 0.45; }

.toggle-row {
    padding: 0.75rem 0.85rem;
    background: rgba(242, 244, 243, 0.03);
    border: 1px solid rgba(242, 244, 243, 0.08);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0 1rem; /* no row-gap: the folded body sits in flow at zero height */
    flex-wrap: wrap;
}
.toggle-row + .toggle-row { margin-top: 0.75rem; }
/* The row's title area is a button that folds the setup body open and shut. */
.toggle-row-head {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: -0.75rem -0.5rem -0.75rem -0.85rem; /* stretch the hit area to the row edges */
    padding: 0.75rem 0.5rem 0.75rem 0.85rem;
    background: none;
    border: 0;
    border-radius: var(--radius-md);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.toggle-row-head:hover .toggle-row-chevron { color: var(--accent-hover); }
.toggle-row-head:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-glow); }
.toggle-row-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text-muted);
    transition: transform 0.18s ease, color 0.18s ease;
}
.toggle-row[data-expanded="true"] .toggle-row-chevron { transform: rotate(90deg); }
.toggle-row-text { min-width: 0; flex: 1; }
.toggle-row-text strong { display: block; font-size: 0.95rem; font-weight: 600; }
.toggle-row-text .meta { display: block; }
.toggle-row > .msg { flex-basis: 100%; margin-top: 0.6rem; }
/* Slide-open body: a one-row grid animating 0fr → 1fr lets the content expand to
   its natural height without JS measuring it. The inner wrapper clips the overflow
   and fades in just behind the slide. */
.toggle-row-body {
    flex-basis: 100%;
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    padding-top: 0;
    border-top: 1px solid transparent;
    transition:
        grid-template-rows 0.22s ease,
        margin-top 0.22s ease,
        padding-top 0.22s ease,
        border-color 0.22s ease;
}
.toggle-row[data-expanded="true"] .toggle-row-body {
    grid-template-rows: 1fr;
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-color: rgba(242, 244, 243, 0.06);
}
/* No padding here: anything that adds to the inner box's min size keeps the track from
   collapsing to zero. Spacing lives on the container above. */
.toggle-row-body-inner {
    min-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.toggle-row[data-expanded="true"] .toggle-row-body-inner {
    opacity: 1;
    transition: opacity 0.18s ease 0.08s;
}
.toggle-row-body-inner > .btn { margin-top: 0.5rem; }
.toggle-row-body-inner > .btn + .field-hint { margin-top: 0.5rem; }
@media (prefers-reduced-motion: reduce) {
    .toggle-row-body, .toggle-row-body-inner, .toggle-row-chevron { transition: none; }
}

/* ── Messages ── */

.msg {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    margin-top: 0.5rem;
    font-size: 0.85rem;
}
.msg-ok { background: var(--success-bg); color: var(--success-text); }
.msg-err { background: var(--error-bg); color: var(--error-text); }
.msg-warn { background: var(--warn-bg); color: var(--warn-text); }
.msg:empty { display: none; }

/* ── Tables ── */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}
th, td {
    text-align: left;
    padding: 0.5rem;
    border-bottom: 1px solid var(--divider);
    vertical-align: middle;
}
th {
    color: var(--accent-hover);
    font-weight: 500;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
tbody tr { transition: background 0.12s ease; }
tbody tr:hover { background: var(--accent-tint-soft); }
td.is-numeric { text-align: right; font-variant-numeric: tabular-nums; }

.table-wrap { overflow-x: auto; }

/* ── Meta / secondary text ── */

.meta { color: var(--text-secondary); font-size: 0.85rem; }
.muted { color: var(--text-muted); }

/* ── Watch list ── */

.watch-term {
    font-weight: 600;
    color: var(--text-primary);
    /* overflow-wrap (unlike word-break: break-word) leaves the column's
       min-content width alone, so terms wrap at spaces instead of the table
       squeezing the column down to one letter per line. */
    overflow-wrap: break-word;
}
.watch-types { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.watch-row-actions {
    display: flex;
    gap: 0.35rem;
    justify-content: flex-end;
    align-items: center;
}
.watch-row.is-disabled .watch-term,
.watch-row.is-disabled .watch-types { opacity: 0.5; }

/* ── Event feed ── */

.event-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.event-card {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 1rem;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    transition: border-color 0.15s ease;
}
.event-card:hover { border-color: var(--accent-tint-strong); }
.event-thumb {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--bg-input);
}
.event-thumb--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 1.5rem;
    background: linear-gradient(135deg, var(--accent-tint), var(--accent-tint-soft));
}
.event-body { min-width: 0; }
.event-title {
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.event-title a { color: inherit; }
.event-title a:hover { color: var(--accent-hover); }
.event-tags {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.35rem;
}
.event-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    text-align: right;
    white-space: nowrap;
}
.event-price { font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Skeleton / loading ── */

.skeleton {
    height: 72px;
    margin-bottom: 0.75rem;
    background: linear-gradient(90deg, rgba(242,244,243,0.04), rgba(242,244,243,0.10), rgba(242,244,243,0.04));
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s linear infinite;
    border-radius: var(--radius-md);
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.load-more-row {
    display: flex;
    justify-content: center;
    margin: 1.25rem 0;
}
.load-more-row[hidden] { display: none; }
.feed-end {
    margin: 1.5rem 0;
    text-align: center;
    color: var(--text-muted);
}
@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
}

/* ── Modal ── */

/* Modals use opacity/visibility transitions instead of display toggling so
   that closing animates symmetrically with opening. Visibility is delayed
   on close so the fade-out can complete before the element becomes
   non-interactive and hidden from AT. */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 11, 8, 0);
    z-index: 200;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4rem 1.25rem;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        background-color 0.18s ease-out,
        opacity 0.18s ease-out,
        visibility 0s linear 0.18s;
}
.modal-backdrop.is-open {
    background: rgba(10, 11, 8, 0.7);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        background-color 0.18s ease-out,
        opacity 0.18s ease-out,
        visibility 0s linear 0s;
}

.modal {
    position: relative;
    width: 100%;
    max-width: 720px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: scale(0.96) translateY(-4px);
    transition:
        opacity 0.18s ease-out,
        transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal--narrow { max-width: 380px; }
.modal--medium { max-width: 520px; }
.modal-backdrop.is-open > .modal {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.modal h2 { color: var(--text-primary); padding-right: 2.5rem; }

/* Profile modal (sidebar user chip): avatar + name + id, then Settings / Sign out. */
.profile-identity {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    padding-right: 2.5rem; /* keep clear of .modal-close */
}
.profile-identity-text { min-width: 0; }
.modal h2.profile-name {
    margin: 0;
    padding-right: 0;
    font-size: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.profile-identity .meta { margin-top: 0.15rem; }

.modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: rgba(242, 244, 243, 0.08);
    border: none;
    color: var(--text-primary);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}
.modal-close:hover { background: rgba(242, 244, 243, 0.16); }
.modal-close:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .modal-backdrop, .modal { transition: none; }
}

/* ── Page transitions ──
   Every page is its own document, so this uses cross-document view
   transitions rather than a client-side router: the browser snapshots the
   outgoing page and crossfades the incoming one. Header and sidebar get
   their own names so they hold still while only the content fades.
   Browsers without support simply navigate as before. */
@view-transition { navigation: auto; }

.app-header { view-transition-name: app-header; }
.sidebar { view-transition-name: sidebar; }

::view-transition-old(root),
::view-transition-new(root),
::view-transition-group(app-header),
::view-transition-group(sidebar) {
    animation-duration: 0.15s;
    animation-timing-function: ease-out;
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none; }
}

/* ── Public pages (landing, 403) ── */

.public-page {
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.public-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--bg-header);
    border-bottom: 1px solid var(--accent-tint-strong);
}

.public-header-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-primary);
    text-decoration: none;
}
.public-header-brand:hover { color: var(--text-primary); text-decoration: none; }

.public-header-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    object-fit: contain;
    flex-shrink: 0;
}

.public-header-wordmark {
    font-family: var(--font-brand);
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}

.public-header-nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: 0.95rem;
}
.public-header-nav a { color: var(--text-secondary); text-decoration: none; }
.public-header-nav a:hover { color: var(--text-primary); text-decoration: none; }

/* ── Landing page ── */

.landing-main {
    flex: 1;
    width: 100%;
}

.landing-hero {
    padding: 4rem 1.5rem 3rem;
    text-align: center;
    background: linear-gradient(
        180deg,
        rgba(90, 36, 18, 0.45) 0%,
        rgba(30, 32, 25, 0) 100%
    );
}

.landing-hero-content {
    max-width: 720px;
    margin: 0 auto;
}

.landing-hero-logo {
    margin: 0 auto 1.25rem;
    border-radius: var(--radius-md);
    width: 96px;
    height: 96px;
    object-fit: contain;
}

.landing-hero-title {
    font-family: var(--font-brand);
    font-size: 2.5rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}

.landing-hero-tagline {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.landing-hero-sub {
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto 1.75rem;
    font-size: 1rem;
}

.landing-hero-actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.landing-hero-note {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
}

.landing-section {
    max-width: 1080px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
}

.landing-section-title {
    font-family: var(--font-brand);
    font-size: 1.6rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    text-align: center;
}

.landing-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.landing-feature {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--radius-md);
    padding: 1.25rem;
}

.landing-feature h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0.75rem 0 0.5rem;
}

.landing-feature p {
    color: var(--text-secondary);
    font-size: 0.92rem;
    margin: 0;
}

.landing-feature-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--accent-tint);
    color: var(--accent-hover);
}
.landing-feature-icon svg { width: 20px; height: 20px; }

/* ── Public footer ── */

.public-footer {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 1.5rem 1.5rem 2rem;
    border-top: 1px solid rgba(242, 244, 243, 0.06);
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.public-footer a {
    color: var(--text-primary);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.public-footer a:hover { color: var(--accent-hover); text-decoration: none; }
.public-footer span[aria-hidden="true"] { color: var(--text-muted); user-select: none; }
.public-footer-brand { font-weight: 600; color: var(--text-primary); }

/* ── Error page (403) ── */

.error-page {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
}
.error-page h1 {
    font-size: 5rem;
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: 0.5rem;
    line-height: 1;
}
.error-page p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    max-width: 480px;
}

/* ── Responsive ── */

@media (max-width: 800px) {
    .app-shell { grid-template-columns: var(--sidebar-width-collapsed) 1fr; }
    body:not(.sidebar-collapsed) .sidebar { padding: 1.25rem 0.5rem; }
    body:not(.sidebar-collapsed) .sidebar-nav-item { justify-content: center; }
    body:not(.sidebar-collapsed) .sidebar-nav-link { justify-content: center; gap: 0; padding: 0.2rem 0; }
    body:not(.sidebar-collapsed) .sidebar-nav-label {
        opacity: 0;
        max-width: 0;
        margin: 0;
        pointer-events: none;
        text-decoration: none;
    }
    body:not(.sidebar-collapsed) .sidebar-nav-icon {
        background: var(--bg-input);
        border-color: var(--bg-input-border);
    }
    body:not(.sidebar-collapsed) .app-shell[data-active="watches"] .nav-watches .sidebar-nav-icon,
    body:not(.sidebar-collapsed) .app-shell[data-active="events"] .nav-events .sidebar-nav-icon,
    body:not(.sidebar-collapsed) .app-shell[data-active="settings"] .nav-settings .sidebar-nav-icon {
        background: var(--accent-primary);
        border-color: var(--accent-primary);
        color: var(--text-on-accent);
    }
    body:not(.sidebar-collapsed) .sidebar-user { justify-content: center; gap: 0; padding: 0.3rem; }
    body:not(.sidebar-collapsed) .sidebar-user-name { opacity: 0; flex-grow: 0; }
    .sidebar-toggle { display: none; }
}

@media (max-width: 600px) {
    .app-header { padding: 0 1rem; grid-template-columns: auto 1fr; }
    .app-header-right { display: none; }
    .page-container { padding: 1.25rem; }

    .event-card { grid-template-columns: 56px 1fr; }
    .event-thumb { width: 56px; height: 56px; }
    .event-side { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }

    .modal-backdrop { padding: 0; align-items: flex-end; }
    .modal--sheet {
        max-width: none;
        width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        max-height: 92vh;
        overflow-y: auto;
        transform: translateY(100%);
        transition:
            opacity 0.22s ease,
            transform 0.22s ease;
    }
    .modal-backdrop.is-open > .modal--sheet { transform: translateY(0); }

    .public-header { flex-direction: column; gap: 0.5rem; text-align: center; }
    .landing-hero { padding: 2.5rem 1rem 2rem; }
    .landing-hero-title { font-size: 2rem; }
    .landing-section { padding: 2rem 1rem; }
}