/* ═══════════════════════════════════════════════════════════════
   DIGITAL RUST — Heretica Wiki Theme
   Warm, tech-dystopian. Corrupted hardware as aesthetic.
   Failing systems as beauty. Non-negotiable rust warmth.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Digital Rust Main Palette (dark-first) ─────────────────── */

/*
   CRITICAL: Dark-first token architecture.

   :root defines DARK theme tokens (the primary/default).
   [data-theme="light"] overrides with Gruvbox Light Soft values.
   The previous :root:not([data-theme="dark"]) pattern caused
   theme-flash because it made light the CSS default.

   This is the ONLY correct approach for a dark-first system.
*/

:root {
    --dr-ghost-pixel: #f7eae8;
    --dr-phosphor-smoke: #efd5d1;
    --dr-phantom-current: #e7c0ba;
    --dr-corrupted-cache: #dfaba3;
    --dr-copper-trace: #d7968c;
    --dr-fatal-error: #cf8175;
    --dr-rouge-signal: #c76c5e;
    --dr-amber-alert: #bf5747;
    --dr-firewall-breach: #b74230;
    --dr-rust: #af2e1a;
    --dr-kernel-panic: #9d2917;
    --dr-data-rot: #8c2414;
    --dr-bricked-board: #7a2012;
    --dr-dark-packet: #691b0f;
    --dr-daemon-blood: #57170d;
    --dr-bad-sector: #46120a;
    --dr-core-meltdown: #340d07;
    --dr-null-pointer: #230905;
    --dr-horizon: #110402;

    /* ─── Surface Hierarchy (dark-first) ─────────────────────── */

    --dr-surface-base: var(--dr-horizon);
    --dr-surface-secondary: var(--dr-null-pointer);
    --dr-surface-elevated: var(--dr-core-meltdown);
    --dr-surface-highlight: var(--dr-bad-sector);
    --dr-surface-active: #5a1810;

    /* ─── Text ───────────────────────────────────────────────── */

    --dr-text-primary: var(--dr-ghost-pixel);
    --dr-text-secondary: var(--dr-phosphor-smoke);
    --dr-text-tertiary: #c9a39c;
    --dr-text-link: var(--dr-phantom-current);
    --dr-text-link-hover: var(--dr-fatal-error);
    --dr-text-link-visited: var(--dr-corrupted-cache);
    --dr-text-on-accent: var(--dr-ghost-pixel);
    --dr-text-muted: rgba(239, 213, 209, 0.5);

    /* ─── Accent ─────────────────────────────────────────────── */

    --dr-accent: var(--dr-rust);
    --dr-accent-secondary: var(--dr-fatal-error);
    --dr-accent-tertiary: var(--dr-copper-trace);
    --dr-focus-ring: var(--dr-stack-overglow);

    /* ─── Borders ────────────────────────────────────────────── */

    --dr-border: 2px solid var(--dr-dark-packet);
    --dr-border-thick: 4px solid var(--dr-dark-packet);
    --dr-border-subtle: 1px solid var(--dr-bad-sector);
    --dr-border-strong: 2px solid var(--dr-data-rot);
    --dr-border-focus: 2px solid var(--dr-stack-overglow);
    --dr-border-error: 2px solid var(--dr-amber-alert);
    --dr-border-success: 2px solid var(--dr-memory-leek);
    --dr-border-warning: 2px solid var(--dr-stack-overglow);

    /* ─── Semantic State Colors ──────────────────────────────── */

    --dr-success: var(--dr-memory-leek);
    --dr-warning: var(--dr-stack-overglow);
    --dr-error: var(--dr-amber-alert);
    --dr-critical: var(--dr-rust);
    --dr-info: var(--dr-dead-thread);

    /* ─── ANSI / Extended Palette ────────────────────────────── */

    --dr-memory-leek: #8fa667;
    --dr-memory-leek-dim: #627247;
    --dr-memory-leek-bright: #94a577;

    --dr-stack-overglow: #D4a759;
    --dr-stack-overglow-dim: #a07e43;
    --dr-stack-overglow-bright: #d3ae6e;

    --dr-blue-screen: #8791b0;
    --dr-blue-screen-dim: #60677c;
    --dr-blue-screen-bright: #999eaf;

    --dr-fractured-shell: #Ba5a7d;
    --dr-fractured-shell-dim: #87405a;
    --dr-fractured-shell-bright: #ba6b88;

    --dr-dead-thread: #6fa5a0;
    --dr-dead-thread-dim: #4c726e;
    --dr-dead-thread-bright: #7fa5a1;

    --dr-thermal-throttle: #d78556;
    --dr-thermal-throttle-dim: #ac6d4a;
    --dr-thermal-throttle-bright: #d6926b;

    /* ─── RGB Variants ───────────────────────────────────────── */

    --dr-bg-rgb: 17, 4, 2;
    --dr-accent-rgb: 175, 46, 26;
    --dr-border-rgb: 105, 27, 15;
    --dr-success-rgb: 143, 166, 103;
    --dr-error-rgb: 191, 87, 71;
    --dr-warning-rgb: 212, 167, 89;

    /* ─── Compositions ────────────────────────────────────────── */

    --dr-accent-glow: rgba(var(--dr-accent-rgb), 0.4);
    --dr-shadow: rgba(var(--dr-bg-rgb), 0.5);
    --dr-shadow-heavy: rgba(var(--dr-bg-rgb), 0.8);
    --dr-overlay: rgba(var(--dr-bg-rgb), 0.85);
    --dr-scanline: rgba(var(--dr-accent-rgb), 0.02);
    --dr-highlight: rgba(255, 255, 255, 0.1);

    /* ─── Offset Shadows (warm — NEVER pure black) ────────────── */

    --dr-shadow-offset-sm: 2px 2px 0 0 var(--dr-surface-highlight);
    --dr-shadow-offset-md: 3px 3px 0 0 var(--dr-surface-highlight);
    --dr-shadow-offset-lg: 4px 4px 0 0 var(--dr-surface-highlight);
    --dr-shadow-offset-xl: 6px 6px 0 0 var(--dr-surface-highlight);
    --dr-shadow-hover-sm: 3px 3px 0 0 var(--dr-surface-highlight);
    --dr-shadow-hover-md: 4px 4px 0 0 var(--dr-surface-highlight);
    --dr-shadow-hover-lg: 6px 6px 0 0 var(--dr-surface-highlight);
    --dr-shadow-active: 0 0 0 0 var(--dr-surface-highlight);
    --dr-shadow-blunt-sm: 3px 3px 0 var(--dr-horizon);
    --dr-shadow-blunt: 5px 5px 0 var(--dr-horizon);
    --dr-shadow-blunt-lg: 8px 8px 0 var(--dr-horizon);
    --dr-shadow-accent: 5px 5px 0 var(--dr-rust);
    --dr-shadow-glow-sm: 0 0 10px var(--dr-accent-glow);
    --dr-shadow-glow-md: 0 0 20px var(--dr-accent-glow);
    --dr-shadow-glow-lg: 0 0 30px var(--dr-accent-glow);
    --dr-shadow-inner-highlight: inset 0 1px 0 var(--dr-highlight);

    /* Ambient depth shadows */
    --dr-shadow-ambient-sm: 0 4px 0 0 var(--dr-shadow);
    --dr-shadow-ambient-md: 0 8px 32px var(--dr-shadow);
    --dr-shadow-ambient-lg: 0 -8px 32px var(--dr-shadow);

    /* Directional layer shadows (for panels/drawers) */
    --dr-shadow-layer: -8px 0 32px var(--dr-shadow);
    --dr-shadow-layer-reverse: 8px 0 32px var(--dr-shadow);

    /* ─── Border Radius ──────────────────────────────────────── */

    --dr-radius-sm: 2px;
    --dr-radius: 4px;
    --dr-radius-lg: 6px;

    /* ─── Typography ──────────────────────────────────────────── */

    --dr-text-xs: 0.75rem;
    --dr-text-sm: 0.875rem;
    --dr-text-base: 1rem;
    --dr-text-lg: 1.25rem;
    --dr-text-xl: 1.75rem;
    --dr-text-2xl: 2.5rem;
    --dr-text-3xl: 4rem;
    --dr-text-display: clamp(4rem, 15vw, 8rem);

    --dr-font-heading: "Cairo Play", system-ui, sans-serif;
    --dr-font-body: "Atkinson Hyperlegible Next", system-ui, -apple-system, sans-serif;
    --dr-font-mono: "Fira Code", Consolas, Monaco, monospace;

    --dr-font-weight: 700;
    --dr-font-weight-body: 400;
    --dr-font-weight-light: 400;
    --dr-letter-spacing: -0.02em;

    /* ─── Duration Tokens ─────────────────────────────────────── */

    --dr-duration-instant: 0.01ms;
    --dr-duration-dramatic: 600ms;

    /* ─── Spacing Scale ──────────────────────────────────────── */

    --dr-space-xs: 0.25rem;
    --dr-space-sm: 0.5rem;
    --dr-space-md: 1rem;
    --dr-space-lg: 1.5rem;
    --dr-space-xl: 2.5rem;
    --dr-space-2xl: 4rem;

    /* ─── Z-Index Layers ─────────────────────────────────────── */

    --dr-z-content: 10;
    --dr-z-sidebar: 100;
    --dr-z-drawer: 200;
    --dr-z-modal: 300;
    --dr-z-noise: 1000;

    /* ─── Transitions ────────────────────────────────────────── */

    --dr-duration-fast: 150ms;
    --dr-duration-normal: 250ms;
    --dr-duration-slow: 400ms;
    --dr-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
    --dr-ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
    --dr-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --dr-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --dr-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --dr-transition-slow: 400ms cubic-bezier(0.25, 1, 0.5, 1);

    /* ─── Syntax Highlighting ──────────────────────────────────── */

    --dr-syntax-keyword: var(--dr-fatal-error);
    --dr-syntax-function: var(--dr-stack-overglow);
    --dr-syntax-class: var(--dr-dead-thread);
    --dr-syntax-string: var(--dr-memory-leek);
    --dr-syntax-number: var(--dr-thermal-throttle);
    --dr-syntax-constant: var(--dr-stack-overglow-bright);
    --dr-syntax-comment: var(--dr-thermal-throttle-dim);
    --dr-syntax-variable: var(--dr-ghost-pixel);
    --dr-syntax-operator: var(--dr-copper-trace);
    --dr-syntax-punctuation: var(--dr-copper-trace);
    --dr-syntax-attribute: var(--dr-dead-thread);
    --dr-syntax-tag: var(--dr-dead-thread);
    --dr-syntax-attribute-name: var(--dr-stack-overglow-dim);
    --dr-syntax-error: var(--dr-amber-alert);
    --dr-syntax-warning: var(--dr-stack-overglow);

    /* ═════════════════════════════════════════════════════════════
       LEGACY VARIABLE MAPPING — existing CSS files use these
       ═════════════════════════════════════════════════════════════ */

    --primary-color: var(--dr-rust);
    --primary-hover: var(--dr-amber-alert);
    --primary-rgb: 175, 46, 26;
    --text-color: var(--dr-text-primary);
    --text-muted: var(--dr-text-tertiary);
    --accent-color: var(--dr-accent-secondary);
    --accent-hover-color: var(--dr-fatal-error);
    --border-color: var(--dr-dark-packet);
    --hover-bg: var(--dr-surface-highlight);
    --sidebar-bg: var(--dr-surface-secondary);
    --breadcrumb-color: var(--dr-text-tertiary);
    --sidebar-width: 280px;
    --bg-color: var(--dr-surface-base);
    --blockquote-bg: var(--dr-surface-elevated);
    --code-bg: var(--dr-surface-elevated);
    --theme-toggle-bg: var(--dr-surface-highlight);
    --theme-toggle-color: var(--dr-text-primary);
    --danger-color: var(--dr-amber-alert);
    --danger-bg: rgba(191, 87, 71, 0.1);
    --success-color: var(--dr-memory-leek);
    --success-bg: rgba(143, 166, 103, 0.1);
    --warning-color: var(--dr-stack-overglow);
    --warning-bg: rgba(212, 167, 89, 0.1);
    --content-max-width: 900px;
    --shadow: var(--dr-shadow-offset-md);
    --split-width: 50%;

    --bg-color-secondary: var(--dr-surface-elevated);
    --bg-tertiary: var(--dr-surface-highlight);
    --text-primary: var(--dr-text-primary);
    --text-secondary: var(--dr-text-secondary);
    --heading-color: var(--dr-text-primary);
    --box-bg: var(--dr-surface-elevated);
    --input-bg: var(--dr-surface-secondary);
    --error-color: var(--dr-amber-alert);
    --error-bg: rgba(191, 87, 71, 0.1);
}


/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME — Gruvbox Light Soft
   Secondary variant. Dark-first: light overrides FROM dark.
   ═══════════════════════════════════════════════════════════════ */

[data-theme="light"] {
    /* Surfaces */
    --dr-surface-base: #f2e5bc;
    --dr-surface-secondary: #ebdbb2;
    --dr-surface-elevated: #d5c4a1;
    --dr-surface-highlight: #bdae93;
    --dr-surface-active: #a89984;

    /* Text */
    --dr-text-primary: #3c3836;
    --dr-text-secondary: #504945;
    --dr-text-tertiary: #585249;
    --dr-text-link: #076678;
    --dr-text-link-hover: #458588;
    --dr-text-link-visited: #8f3f71;
    --dr-text-on-accent: #f2e5bc;
    --dr-text-muted: rgba(60, 56, 54, 0.5);

    /* Accents */
    --dr-accent: #9d0006;
    --dr-accent-secondary: #8f3f71;
    --dr-accent-tertiary: #af3a03;
    --dr-focus-ring: #076678;

    /* Borders */
    --dr-border: 2px solid #7c6f64;
    --dr-border-thick: 4px solid #7c6f64;
    --dr-border-subtle: 1px solid #bdae93;
    --dr-border-strong: 2px solid #504945;
    --dr-border-focus: 2px solid #076678;

    /* Semantic */
    --dr-success: #79740e;
    --dr-warning: #b57614;
    --dr-error: #9d0006;
    --dr-critical: #af3a03;
    --dr-info: #427b58;

    /* ANSI (light) */
    --dr-memory-leek: #79740e;
    --dr-memory-leek-dim: #5d580a;
    --dr-memory-leek-bright: #98971a;
    --dr-stack-overglow: #b57614;
    --dr-stack-overglow-dim: #8a5a0f;
    --dr-stack-overglow-bright: #d79921;
    --dr-blue-screen: #076678;
    --dr-blue-screen-dim: #054d5a;
    --dr-blue-screen-bright: #458588;
    --dr-fractured-shell: #8f3f71;
    --dr-fractured-shell-dim: #6b2f55;
    --dr-fractured-shell-bright: #b16286;
    --dr-dead-thread: #427b58;
    --dr-dead-thread-dim: #325d43;
    --dr-dead-thread-bright: #689d6a;
    --dr-thermal-throttle: #af3a03;
    --dr-thermal-throttle-dim: #842c02;
    --dr-thermal-throttle-bright: #d65d0e;

    /* RGB */
    --dr-bg-rgb: 242, 229, 188;
    --dr-accent-rgb: 157, 0, 6;
    --dr-border-rgb: 124, 111, 100;
    --dr-success-rgb: 121, 116, 14;
    --dr-error-rgb: 157, 0, 6;
    --dr-warning-rgb: 181, 118, 20;

    /* Compositions */
    --dr-accent-glow: rgba(157, 0, 6, 0.25);
    --dr-shadow: rgba(40, 40, 40, 0.12);
    --dr-shadow-heavy: rgba(40, 40, 40, 0.2);
    --dr-overlay: rgba(242, 229, 188, 0.85);
    --dr-scanline: rgba(157, 0, 6, 0.015);
    --dr-highlight: rgba(0, 0, 0, 0.05);

    /* Offset Shadows */
    --dr-shadow-offset-sm: 2px 2px 0 0 #bdae93;
    --dr-shadow-offset-md: 3px 3px 0 0 #bdae93;
    --dr-shadow-offset-lg: 4px 4px 0 0 #bdae93;
    --dr-shadow-offset-xl: 6px 6px 0 0 #bdae93;
    --dr-shadow-hover-sm: 3px 3px 0 0 #bdae93;
    --dr-shadow-hover-md: 4px 4px 0 0 #bdae93;
    --dr-shadow-hover-lg: 6px 6px 0 0 #bdae93;
    --dr-shadow-active: 0 0 0 0 #bdae93;
    --dr-shadow-blunt-sm: 3px 3px 0 #3c3836;
    --dr-shadow-blunt: 5px 5px 0 #3c3836;
    --dr-shadow-blunt-lg: 8px 8px 0 #3c3836;
    --dr-shadow-accent: 5px 5px 0 #9d0006;
    --dr-shadow-inner-highlight: inset 0 -1px 0 rgba(0, 0, 0, 0.06);

    /* Syntax Highlighting (Gruvbox Light) */
    --dr-syntax-keyword: #9d0006;
    --dr-syntax-function: #79740e;
    --dr-syntax-class: #b57614;
    --dr-syntax-string: #79740e;
    --dr-syntax-number: #8f3f71;
    --dr-syntax-constant: #8f3f71;
    --dr-syntax-comment: #928374;
    --dr-syntax-variable: #3c3836;
    --dr-syntax-operator: #3c3836;
    --dr-syntax-punctuation: #7c6f64;
    --dr-syntax-attribute: #427b58;
    --dr-syntax-tag: #af3a03;
    --dr-syntax-attribute-name: #427b58;
    --dr-syntax-error: #9d0006;
    --dr-syntax-warning: #b57614;

    /* Legacy mappings (light) */
    --primary-color: #9d0006;
    --primary-hover: #b91c1c;
    --primary-rgb: 157, 0, 6;
    --text-color: #3c3836;
    --text-muted: #665c54;
    --accent-color: #8f3f71;
    --accent-hover-color: #b16286;
    --border-color: #7c6f64;
    --hover-bg: #d5c4a1;
    --sidebar-bg: #ebdbb2;
    --breadcrumb-color: #665c54;
    --bg-color: #f2e5bc;
    --blockquote-bg: #ebdbb2;
    --code-bg: #ebdbb2;
    --theme-toggle-bg: #bdae93;
    --theme-toggle-color: #3c3836;
    --danger-color: #9d0006;
    --danger-bg: rgba(157, 0, 6, 0.1);
    --success-color: #79740e;
    --success-bg: rgba(121, 116, 14, 0.1);
    --warning-color: #b57614;
    --warning-bg: rgba(181, 118, 20, 0.1);
    --shadow: 3px 3px 0 0 #bdae93;
    --bg-color-secondary: #d5c4a1;
    --bg-tertiary: #bdae93;
    --text-primary: #3c3836;
    --text-secondary: #504945;
    --heading-color: #3c3836;
    --box-bg: #ebdbb2;
    --input-bg: #f2e5bc;
    --error-color: #9d0006;
    --error-bg: rgba(157, 0, 6, 0.1);
}


/* ═══════════════════════════════════════════════════════════════
   SKIP LINK — keyboard bypass for sidebar navigation
   ═══════════════════════════════════════════════════════════════ */

.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 9999;
    padding: var(--dr-space-sm) var(--dr-space-md);
    background: var(--dr-accent);
    color: var(--dr-text-on-accent);
    font-family: var(--dr-font-body);
    font-weight: var(--dr-font-weight);
    font-size: var(--dr-text-sm);
    text-decoration: none;
    border: none;
    border-radius: 0 0 var(--dr-radius) 0;
    box-shadow: var(--dr-shadow-offset-sm);
    transition: top 0.15s ease;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--dr-focus-ring);
    outline-offset: 2px;
}



/* ═══════════════════════════════════════════════════════════════
   BASE STYLES
   ═══════════════════════════════════════════════════════════════ */

/* Scrollbars — rusted chrome, scoped to containers where the visual
   integration matters. The global selector was overriding OS-level
   scrollbar preferences for all users. Scoping preserves the Digital
   Rust aesthetic where it counts while respecting user choice elsewhere. */
.sidebar,
.nav-items,
.dialog-container,
.search-results,
.editor-preview,
.code-editor-wrapper,
.kanban-board,
.users-list,
.version-list-container,
.version-preview-container,
.import-results-content,
.folder-picker-container,
.path-autocomplete,
.emoji-picker {
    scrollbar-width: thin;
    scrollbar-color: var(--dr-dark-packet) transparent;
}

.sidebar::-webkit-scrollbar,
.nav-items::-webkit-scrollbar,
.dialog-container::-webkit-scrollbar,
.search-results::-webkit-scrollbar,
.editor-preview::-webkit-scrollbar,
.kanban-board::-webkit-scrollbar,
.users-list::-webkit-scrollbar,
.version-list-container::-webkit-scrollbar,
.version-preview-container::-webkit-scrollbar { width: 8px; height: 8px; }

::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--dr-dark-packet);
    border-radius: var(--dr-radius);
    border: 2px solid var(--dr-surface-secondary);
}
::-webkit-scrollbar-thumb:hover { background: var(--dr-accent); }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    padding: 0;
    font-family: var(--dr-font-body);
    font-weight: var(--dr-font-weight-body);
    display: flex;
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--bg-color);
    min-height: 100vh;
    width: 100%;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-ligatures: common-ligatures discretionary-ligatures no-historical-ligatures contextual;
    font-variant-numeric: oldstyle-nums proportional-nums slashed-zero;
    hyphens: auto;
    hyphenate-character: "‐";
    font-kerning: normal;
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
}

/* Noise texture overlay — non-negotiable lived-in quality */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.02;
    pointer-events: none;
    z-index: var(--dr-z-noise);
}

/* Vignette overlay — non-negotiable depth, warmth, focus
   z-index sits between drawer (200) and modal (300) so dialogs
   render above the vignette rather than beneath it.
   Edge opacity tuned to 28% (from 40%) and transparent center expanded
   to 72% (from 60%) to preserve readability at content edges on wider
   viewports while maintaining atmospheric focus. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(
        ellipse at center,
        transparent 72%,
        rgba(var(--dr-bg-rgb), 0.28) 100%
    );
    pointer-events: none;
    z-index: calc(var(--dr-z-drawer) + 1);
}

/* Word breaking */
.markdown-content *, main *, table *, pre, code, kbd,
.content-wrapper *, h1, h2, h3, h4, p,
.markdown-content ul li, .markdown-content ol li, td {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.markdown-content code, .markdown-content pre,
.markdown-content .path, .markdown-content .filepath, td {
    word-break: break-all;
}

/* Bidirectional text */
h1, h2, h3, h4, h5, h6, p, th, td, div, input {
    unicode-bidi: plaintext;
}

input:-moz-placeholder, input:-ms-input-placeholder,
input::-webkit-input-placeholder {
    unicode-bidi: plaintext;
    text-align: start;
}

.markdown-content { direction: auto; }
.markdown-content * { text-align: start; }
pre, code { direction: auto; text-align: start; white-space: pre-wrap; unicode-bidi: plaintext; }
pre > code { display: block; }

/* Theme transitions — scoped to elements that carry theme tokens,
   not the universal selector which forces the browser to compute
   transitions on every DOM node during a theme switch. */
body,
h1, h2, h3, h4, h5, h6,
a, a:visited,
p, span, li, dt, dd,
input, textarea, select,
button,
label,
hr,
code, pre,
blockquote,
table, th, td,
[role="dialog"],
.sidebar,
.content-area,
.breadcrumbs,
.nav-items a,
.custom-toolbar,
.toast,
.card,
.status-message,
.btn-primary, .btn-secondary, .btn-ghost,
.page-actions-dropdown {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Selection — rust-tinted */
::selection { background: var(--dr-accent); color: var(--dr-text-on-accent); }

/* Focus ring — gold, mandatory */
:focus-visible { outline: 2px solid var(--dr-focus-ring); outline-offset: 2px; }

/* Re-assert focus ring on elements that suppress native outline.
   These inputs set `outline: none` to remove the default browser ring,
   so they must explicitly restore it via :focus-visible. */
.form-group input:focus-visible,
.form-group textarea:focus-visible,
.comment-form textarea:focus-visible,
.search-box:focus-visible,
.language-selector:focus-visible,
.timezone-selector-wrapper select:focus-visible,
.add-link-dialog .category-selector:focus-visible,
.add-link-dialog .new-category-wrapper input:focus-visible,
.search-input:focus-visible,
.task-rename-input:focus-visible,
.new-task-input:focus-visible,
.column-rename-input:focus-visible,
.task-checkbox:focus-visible {
    outline: 2px solid var(--dr-focus-ring);
    outline-offset: 2px;
}

/* Headings use Cairo Play heading font */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--dr-font-heading);
    font-variation-settings: "slnt" 0;
    font-weight: var(--dr-font-weight);
    letter-spacing: var(--dr-letter-spacing);
    color: var(--dr-text-primary);
}

/* Links — Digital Rust style
   Underline mandatory — colour alone must never be the only
   distinguishing way to identify links (WCAG / Digital Rust).
   --dr-phantom-current is used for the underline so the visual
   cue is present even when link and body colours are similar. */
a {
    color: var(--dr-text-link);
    text-decoration: underline;
    text-decoration-color: var(--dr-phantom-current);
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--dr-transition-fast);
}
a:hover { color: var(--dr-text-link-hover); text-decoration-thickness: 2px; }
a:visited { color: var(--dr-text-link-visited); }
a:active { color: var(--dr-accent); }

/* Inline code — Memory Leek green on dark, warm border */
code {
    font-family: var(--dr-font-mono);
    font-size: 0.9em;
    background: var(--dr-surface-elevated);
    color: var(--dr-memory-leek);
    padding: 0.15em 0.4em;
    border-radius: var(--dr-radius-sm);
    border: 1px solid var(--dr-surface-highlight);
}

[data-theme="light"] code { color: var(--dr-success); }

/* Code blocks */
pre {
    background: var(--dr-surface-elevated);
    border: 2px solid var(--dr-surface-highlight);
    border-radius: var(--dr-radius);
    padding: var(--dr-space-md);
    overflow-x: auto;
    line-height: 1.5;
    box-shadow: inset 0 2px 8px var(--dr-shadow);
}

pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    border: none;
    font-size: var(--dr-text-sm);
}


/* ═══════════════════════════════════════════════════════════════
   PASSWORD WARNING BANNER
   ═══════════════════════════════════════════════════════════════ */

.password-warning-banner {
    background-color: var(--dr-amber-alert);
    color: var(--dr-text-on-accent);
    text-align: center;
    padding: 10px;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2000;
    pointer-events: none;
    font-family: var(--dr-font-body);
    font-weight: var(--dr-font-weight);
}

body.has-password-warning { padding-top: 40px; }

body.has-password-warning .sidebar,
body.has-password-warning .hamburger {
    height: calc(100vh - 40px);
    top: 40px;
}


/* ═══════════════════════════════════════════════════════════════
   BANNER & GLOBAL STYLES
   ═══════════════════════════════════════════════════════════════ */

.global-banner { width: 100%; margin-bottom: 0; overflow: hidden; }

.responsive-banner {
    width: 100%; height: auto; max-height: 250px;
    object-fit: cover; border-radius: var(--dr-radius);
}

.sidebar-footer-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--dr-space-sm);
    margin-top: var(--dr-space-sm);
    padding-top: var(--dr-space-sm);
    border-top: var(--dr-border-subtle);
}

.sidebar-footer-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 2px solid var(--dr-dark-packet);
    border-radius: var(--dr-radius);
    background: var(--dr-surface-highlight);
    color: var(--dr-text-primary);
    cursor: pointer;
    transition: transform var(--dr-transition-fast),
                box-shadow var(--dr-transition-fast),
                color var(--dr-transition-fast);
    box-shadow: var(--dr-shadow-offset-sm);
    /* Touch target: invisible hit area extends beyond visible bounds,
       meeting 44px minimum without changing sidebar footer layout. */
    position: relative;
}

.sidebar-footer-btn::before {
    content: '';
    position: absolute;
    inset: -4px;
}

.sidebar-footer-btn:hover {
    background: var(--dr-surface-elevated);
    color: var(--dr-accent);
    transform: translate(-2px, -2px);
    box-shadow: var(--dr-shadow-hover-sm);
}

.sidebar-footer-btn:active {
    transform: translate(1px, 1px);
    box-shadow: var(--dr-shadow-active);
}

.sidebar-footer-btn svg { width: 20px; height: 20px; fill: currentColor; }


/* ═══════════════════════════════════════════════════════════════
   MOBILE TOUCH OPTIMIZATIONS
   ═══════════════════════════════════════════════════════════════ */

@media (hover: none) {
    body .editor-button:not(.active):not(.primary):hover,
    body .custom-toolbar button:not(.active):hover {
        background-color: transparent !important;
        border-color: var(--border-color) !important;
        color: var(--text-color) !important;
    }
    body .editor-button.primary:hover { opacity: 1 !important; }
}

body .editor-button, body .custom-toolbar button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

body .editor-button:active, body .custom-toolbar button:active {
    transform: translateY(2px) !important;
    transition: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   BRACKET NOTATION — terminal-style [title] for panels/sections
   Non-negotiable Digital Rust visual motif
   ═══════════════════════════════════════════════════════════════ */

.title-bracket {
    font-family: var(--dr-font-heading);
    font-variation-settings: "slnt" 0;
    font-size: var(--dr-text-lg);
    color: var(--dr-dark-packet);
    opacity: 0.5;
}


/* ═══════════════════════════════════════════════════════════════
   REDUCED MOTION — mandatory, not optional
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}