/* Design tokens, light/dark themes, reset, body base */

:root {
    --bg: #f5f5f4;
    --bg-elevated: #ffffff;
    --bg-subtle: #fafaf9;
    --border: #e4e4e3;
    --border-strong: #d0d0cf;
    --text: #18181a;
    --text-muted: #6b6b6e;
    --text-subtle: #8e8e91;
    --accent: #1a1a1a;
    --accent-hover: #000000;
    --accent-fg: #ffffff;
    --error-bg: #fef2f2;
    --error-border: #fca5a5;
    --error-text: #991b1b;
    --success-bg: #f0fdf4;
    --success-border: #86efac;
    --success-text: #15803d;
    --toggle-on: #16a34a;
    --focus-ring: rgba(26, 26, 26, 0.15);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.04);
    --shadow-dropdown: 0 4px 14px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.06);
    --grid-line: rgba(0, 0, 0, 0.035);
    --grid-dot: rgba(0, 0, 0, 0.08);
    --danger: #b91c1c;
    --danger-bg: #fef2f2;
    --warning: #b45309;
    --warning-bg: #fffbeb;
}

html[data-theme="dark"] {
    --bg: #0f0f10;
    --bg-elevated: #17171a;
    --bg-subtle: #1c1c20;
    --border: #2a2a2e;
    --border-strong: #3a3a3f;
    --text: #f4f4f5;
    --text-muted: #a1a1a6;
    --text-subtle: #6e6e73;
    --accent: #f4f4f5;
    --accent-hover: #ffffff;
    --accent-fg: #0f0f10;
    --error-bg: #2a1414;
    --error-border: #7f1d1d;
    --error-text: #fca5a5;
    --success-bg: #0f2a1a;
    --success-border: #166534;
    --success-text: #86efac;
    --toggle-on: #16a34a;
    --focus-ring: rgba(244, 244, 245, 0.15);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --grid-line: rgba(255, 255, 255, 0.03);
    --grid-dot: rgba(255, 255, 255, 0.06);
    --danger: #f87171;
    --danger-bg: #2a1414;
    --warning: #fbbf24;
    --warning-bg: #2a1e08;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* scrollbar-gutter: stable — reserve scrollbar space always so
   toggling body.no-scroll on modal open never shifts the layout.
   overflow-x: hidden is fallback for iOS Safari <16 which doesn't know `clip`. */
html { height: 100%; overflow-x: hidden; overflow-x: clip; scrollbar-gutter: stable; }

html[data-auth="pending"] body > * { visibility: hidden; }

body {
    font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background-image: radial-gradient(var(--grid-dot) 1px, transparent 1.2px);
    background-size: 28px 28px;
    background-position: 0 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

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

/* Scroll lock: body clips content, html lock prevents iOS rubber-band
   from scrolling the viewport, overscroll-behavior stops scroll chaining
   out of any nested scrollable areas (modal/drawer bodies). */
body.no-scroll { overflow: hidden; overscroll-behavior: contain; }
html:has(body.no-scroll) { overflow: hidden; }

[hidden] { display: none !important; }

@keyframes spin { to { transform: rotate(360deg); } }

/* Custom thin scrollbar — applied to scrolling UI surfaces (menus,
   modals, drawer, reader, pickers). The page body keeps the native
   bar so window-level scroll still reads as a system control. */
.combo-menu,
.admin-tagpicker-list,
.project-modal-body,
.drawer-body,
.reader-article,
.topic-picker {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
.combo-menu::-webkit-scrollbar,
.admin-tagpicker-list::-webkit-scrollbar,
.project-modal-body::-webkit-scrollbar,
.drawer-body::-webkit-scrollbar,
.reader-article::-webkit-scrollbar,
.topic-picker::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.combo-menu::-webkit-scrollbar-track,
.admin-tagpicker-list::-webkit-scrollbar-track,
.project-modal-body::-webkit-scrollbar-track,
.drawer-body::-webkit-scrollbar-track,
.reader-article::-webkit-scrollbar-track,
.topic-picker::-webkit-scrollbar-track {
    background: transparent;
}
/* 3px transparent border + padding-box clip shrinks the visible thumb
   to a thin pill inside the 10px lane — tunes the bar to look like a
   floating handle rather than a chunky system control. */
.combo-menu::-webkit-scrollbar-thumb,
.admin-tagpicker-list::-webkit-scrollbar-thumb,
.project-modal-body::-webkit-scrollbar-thumb,
.drawer-body::-webkit-scrollbar-thumb,
.reader-article::-webkit-scrollbar-thumb,
.topic-picker::-webkit-scrollbar-thumb {
    background-color: var(--border-strong);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: 999px;
}
.combo-menu::-webkit-scrollbar-thumb:hover,
.admin-tagpicker-list::-webkit-scrollbar-thumb:hover,
.project-modal-body::-webkit-scrollbar-thumb:hover,
.drawer-body::-webkit-scrollbar-thumb:hover,
.reader-article::-webkit-scrollbar-thumb:hover,
.topic-picker::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-subtle);
}
.combo-menu::-webkit-scrollbar-corner,
.admin-tagpicker-list::-webkit-scrollbar-corner,
.project-modal-body::-webkit-scrollbar-corner,
.drawer-body::-webkit-scrollbar-corner,
.reader-article::-webkit-scrollbar-corner,
.topic-picker::-webkit-scrollbar-corner {
    background: transparent;
}