/* ═══════════════════════════════════════════════════════════════════════════
   SummitAgent — Alpine Skin (Hybrid)
   Final production skin: Alpine.
   Claude-inspired editorial typography, Summit's workspace structure,
   and mode-specific palettes for Moonlight, Glacial, and Sunlight.
   Clean + warm + functional.
   All selectors scoped under body[data-ui-skin="alpine"].
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Root Variable Overrides ────────────────────────────────────────────── */
body[data-ui-skin="alpine"] {
    --bg-primary: #FAFAF8;
    --bg-secondary: rgba(248, 247, 244, 0.92);
    --bg-surface: #FFFFFF;
    --bg-surface-hover: #F5F4F0;
    --bg-elevated: #F0EFEB;
    --bg-input: #FFFFFF;

    --text-primary: #2B2B28;
    --text-secondary: #4D4D47;
    --text-tertiary: #73736A;
    --text-dim: #8A8A80;
    --text-on-light: #2B2B28;

    --border: #E4E3DE;
    --border-subtle: #EDECE8;
    --border-hover: #D0CFC9;

    --accent: #3B7C5F;
    --accent-dim: rgba(59, 124, 95, 0.07);
    --accent-hover: #4A9673;
    --accent-glow: rgba(59, 124, 95, 0.12);

    --warning: #C4673A;
    --warning-dim: rgba(196, 103, 58, 0.07);
    --caution: #B59132;
    --caution-dim: rgba(181, 145, 50, 0.07);
    --positive: #3B7C5F;
    --positive-dim: rgba(59, 124, 95, 0.06);
    --info: #4A7FA3;
    --info-dim: rgba(74, 127, 163, 0.06);
    --red: #B84233;

    --font: 'Source Sans 3', system-ui, -apple-system, sans-serif;
    --font-serif: 'Source Serif 4', Georgia, serif;
    --font-mono: 'SF Mono', 'Monaco', 'Consolas', monospace;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-full: 9999px;

    --shadow-sm: 0 1px 4px rgba(40, 40, 30, 0.05);
    --shadow-md: 0 3px 12px rgba(40, 40, 30, 0.07);
    --shadow-lg: 0 10px 28px rgba(40, 40, 30, 0.10);
    --shadow-input: 0 1px 4px rgba(40, 40, 30, 0.04), 0 0 0 1px #E4E3DE;

    --mood-accent: #4A9673;
    --bg-glow-1: rgba(180, 200, 170, 0.15);
    --bg-glow-2: rgba(200, 210, 180, 0.12);
    --bg-top: #FAFAF8;
    --bg-bottom: #F2F1EC;
    --form-color-scheme: light;
    --field-bg: #FFFFFF;
    --field-bg-hover: #FAFAF8;
    --field-text: #2B2B28;

    --modal-backdrop: rgba(30, 30, 25, 0.28);
    --modal-dialog-bg: #FAFAF8;
    --modal-dialog-border: #E4E3DE;
    --modal-dialog-shadow: 0 18px 44px rgba(40, 40, 30, 0.14);

    --dynamic-bg-overlay: none;
    --dynamic-bg-opacity: 0;
    font-family: var(--font);
    font-synthesis-weight: none;
}

/* Glacial variant for Alpine:
   Claude typography + current glacial clarity + Perplexity restraint */
body[data-ui-skin="alpine"][data-display-mode="glacial"] {
    --bg-primary: #F7FCFF;
    --bg-secondary: rgba(243, 250, 255, 0.92);
    --bg-surface: rgba(255, 255, 255, 0.88);
    --bg-surface-hover: rgba(249, 253, 255, 0.98);
    --bg-elevated: rgba(238, 247, 252, 0.93);
    --bg-input: rgba(255, 255, 255, 0.97);

    --text-primary: #203743;
    --text-secondary: #4A6775;
    --text-tertiary: #72909D;
    --text-dim: #9AAFB9;
    --text-on-light: #203743;

    --border: rgba(130, 166, 185, 0.26);
    --border-subtle: rgba(176, 203, 217, 0.2);
    --border-hover: rgba(100, 146, 170, 0.38);

    --accent: #5A95B7;
    --accent-dim: rgba(90, 149, 183, 0.12);
    --accent-hover: #6DABC9;
    --accent-glow: rgba(90, 149, 183, 0.18);

    --warning: #C36A54;
    --warning-dim: rgba(195, 106, 84, 0.1);
    --caution: #B2944B;
    --caution-dim: rgba(178, 148, 75, 0.1);
    --positive: #497E74;
    --positive-dim: rgba(73, 126, 116, 0.08);
    --info: #5A95B7;
    --info-dim: rgba(90, 149, 183, 0.08);

    --shadow-sm: 0 6px 18px rgba(40, 79, 103, 0.05);
    --shadow-md: 0 14px 34px rgba(40, 79, 103, 0.08);
    --shadow-lg: 0 28px 58px rgba(40, 79, 103, 0.12);
    --shadow-input: 0 4px 14px rgba(40, 79, 103, 0.04), 0 0 0 1px rgba(130, 166, 185, 0.18);

    --mood-accent: #A8D9EA;
    --bg-glow-1: rgba(187, 226, 242, 0.50);
    --bg-glow-2: rgba(224, 243, 250, 0.62);
    --bg-top: #FBFEFF;
    --bg-bottom: #E2EFF7;
    --form-color-scheme: light;
    --field-bg: rgba(255, 255, 255, 0.98);
    --field-bg-hover: rgba(249, 253, 255, 1);
    --field-text: #203743;
    --dynamic-bg-overlay: linear-gradient(165deg, rgba(248, 252, 255, 0.62), rgba(221, 238, 247, 0.48) 42%, rgba(182, 211, 228, 0.34));
    --modal-backdrop: rgba(24, 51, 67, 0.24);
    --modal-dialog-bg: linear-gradient(180deg, rgba(252, 255, 255, 0.94), rgba(238, 248, 253, 0.92));
    --modal-dialog-border: rgba(140, 185, 205, 0.24);
    --modal-dialog-shadow: 0 28px 58px rgba(40, 79, 103, 0.18);
}

/* ─── Dark Mode Support ──────────────────────────────────────────────────── */
body[data-ui-skin="alpine"][data-display-mode="dark"] {
    --bg-primary: #1A1C18;
    --bg-secondary: rgba(26, 28, 24, 0.92);
    --bg-surface: rgba(36, 38, 33, 0.72);
    --bg-surface-hover: rgba(46, 48, 42, 0.88);
    --bg-elevated: rgba(32, 34, 29, 0.84);
    --bg-input: rgba(42, 44, 38, 0.90);

    --text-primary: #EEEEE6;
    --text-secondary: #D0D0C4;
    --text-tertiary: #A6A69C;
    --text-dim: #A09585;
    --text-on-light: #EEEEE6;

    --border: rgba(140, 150, 120, 0.24);
    --border-subtle: rgba(130, 140, 110, 0.14);
    --border-hover: rgba(160, 170, 130, 0.40);

    --accent: #5AAF7A;
    --accent-dim: rgba(90, 175, 122, 0.14);
    --accent-hover: #6CC48C;
    --accent-glow: rgba(90, 175, 122, 0.20);

    --warning: #D4845E;
    --warning-dim: rgba(212, 132, 94, 0.14);
    --caution: #CCAA58;
    --caution-dim: rgba(204, 170, 88, 0.14);
    --positive: #5AAF7A;
    --positive-dim: rgba(90, 175, 122, 0.14);
    --info: #7DB5A8;
    --info-dim: rgba(125, 181, 168, 0.14);

    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.40);
    --shadow-input: 0 2px 10px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(140, 150, 120, 0.20);

    --mood-accent: #5AAF7A;
    --bg-glow-1: rgba(50, 60, 40, 0.35);
    --bg-glow-2: rgba(65, 75, 50, 0.30);
    --bg-top: #161814;
    --bg-bottom: #222420;
    --form-color-scheme: dark;
    --field-bg: rgba(30, 32, 26, 0.94);
    --field-bg-hover: rgba(40, 42, 36, 0.96);
    --field-text: #EEEEE6;

    --modal-backdrop: rgba(8, 10, 6, 0.50);
    --modal-dialog-bg: linear-gradient(180deg, rgba(36, 38, 33, 0.94), rgba(26, 28, 24, 0.90));
    --modal-dialog-border: rgba(140, 150, 120, 0.28);
    --modal-dialog-shadow: 0 24px 52px rgba(0, 0, 0, 0.45);
}

/* Sunlight variant for Alpine */
body[data-ui-skin="alpine"][data-display-mode="sunlight"] {
    --bg-primary: #FFF5E8;
    --bg-secondary: rgba(255, 249, 241, 0.94);
    --bg-surface: rgba(255, 252, 246, 0.86);
    --bg-surface-hover: rgba(255, 247, 234, 0.96);
    --bg-elevated: rgba(255, 239, 216, 0.84);
    --bg-input: rgba(255, 252, 246, 0.94);

    --text-primary: #4A342A;
    --text-secondary: #69493B;
    --text-tertiary: #8C6A56;
    --text-dim: #8a6450;
    --text-on-light: #4A342A;

    --border: rgba(219, 159, 112, 0.28);
    --border-subtle: rgba(230, 176, 128, 0.18);
    --border-hover: rgba(205, 127, 73, 0.42);

    --accent: #C86A44;
    --accent-dim: rgba(200, 106, 68, 0.1);
    --accent-hover: #D67B56;
    --accent-glow: rgba(200, 106, 68, 0.16);

    --warning: #C95F4C;
    --warning-dim: rgba(201, 95, 76, 0.1);
    --caution: #C89A49;
    --caution-dim: rgba(200, 154, 73, 0.1);
    --positive: #4D8C67;
    --positive-dim: rgba(77, 140, 103, 0.08);
    --info: #5E8AAA;
    --info-dim: rgba(94, 138, 170, 0.08);

    --mood-accent: #E69263;
    --bg-glow-1: rgba(255, 214, 176, 0.34);
    --bg-glow-2: rgba(255, 228, 193, 0.28);
    --bg-top: #FFF9F1;
    --bg-bottom: #FCE9D4;
}

/* ─── Body & Background ──────────────────────────────────────────────────── */
body[data-ui-skin="alpine"],
body[data-ui-skin="alpine"] html {
    background: linear-gradient(170deg, var(--bg-top) 0%, var(--bg-primary) 58%, var(--bg-bottom) 100%);
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
body[data-ui-skin="alpine"] .header {
    background: color-mix(in srgb, var(--bg-primary) 88%, transparent);
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    backdrop-filter: blur(16px) saturate(120%);
}
body[data-ui-skin="alpine"] .header h1 {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.018em;
}
body[data-ui-skin="alpine"] .display-mode-switch {
    background: var(--bg-surface);
    border-color: var(--border);
}
body[data-ui-skin="alpine"] .display-mode-btn.active {
    background: linear-gradient(135deg, var(--mood-accent), var(--accent));
    box-shadow: 0 6px 16px var(--accent-glow);
}

/* ─── Welcome ────────────────────────────────────────────────────────────── */
body[data-ui-skin="alpine"] .welcome h2 {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 28px;
    line-height: 1.08;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}
body[data-ui-skin="alpine"] .welcome p {
    font-family: var(--font-serif);
    color: var(--text-tertiary);
    font-size: 17px;
    line-height: 1.58;
}
body[data-ui-skin="alpine"] .welcome-tile {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: all 0.18s cubic-bezier(0.25, 0.8, 0.25, 1);
}
body[data-ui-skin="alpine"] .welcome-tile:hover {
    border-color: var(--accent);
    background: var(--accent-dim);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px var(--accent-glow);
}
body[data-ui-skin="alpine"] .welcome-tile-label {
    font-family: var(--font);
    font-weight: 600;
}

/* ─── Planner Shell ──────────────────────────────────────────────────────── */
body[data-ui-skin="alpine"] .planner-shell {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(16px) saturate(120%);
}
body[data-ui-skin="alpine"] .planner-stage-copy {
    font-family: var(--font-serif);
    font-size: 14px;
    line-height: 1.58;
    color: var(--text-tertiary);
}

/* ─── Selector Inputs ────────────────────────────────────────────────────── */
body[data-ui-skin="alpine"] .selector-input {
    background: var(--field-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: var(--font);
    transition: all 0.18s ease;
}
body[data-ui-skin="alpine"] .selector-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
    background: var(--field-bg-hover);
}
body[data-ui-skin="alpine"] .selector-control--picker .selector-input {
    background: var(--field-bg);
    box-shadow: none;
    border-radius: 8px;
}
body[data-ui-skin="alpine"] .selector-label {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.03em;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
body[data-ui-skin="alpine"] .btn-accent,
body[data-ui-skin="alpine"] .btn-plan-hike {
    background: var(--accent);
    box-shadow: 0 4px 12px var(--accent-glow);
    border-radius: 12px;
    font-family: var(--font);
    font-weight: 600;
    letter-spacing: 0;
    transition: all 0.18s ease;
}
body[data-ui-skin="alpine"] .btn-accent:hover,
body[data-ui-skin="alpine"] .btn-plan-hike:hover {
    background: var(--accent-hover);
    box-shadow: 0 6px 18px var(--accent-glow);
    transform: translateY(-1px);
}
body[data-ui-skin="alpine"] .btn-primary {
    background: var(--accent);
    border-radius: 8px;
}
body[data-ui-skin="alpine"] .btn-ghost {
    border-radius: 8px;
}
body[data-ui-skin="alpine"] .btn-send {
    background: var(--accent);
    border-radius: 8px;
}

/* ─── Chat Input ─────────────────────────────────────────────────────────── */
body[data-ui-skin="alpine"] .input-wrapper {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    backdrop-filter: none;
}
body[data-ui-skin="alpine"] .input-wrapper:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
    transform: none;
}

/* ─── Messages ───────────────────────────────────────────────────────────── */
body[data-ui-skin="alpine"] .message-user .message-content {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    font-family: var(--font);
}
body[data-ui-skin="alpine"] .message-content {
    font-family: var(--font-serif);
    font-size: 17px;
    line-height: 1.72;
    letter-spacing: -0.008em;
    font-optical-sizing: auto;
}
body[data-ui-skin="alpine"] .message-content h1 {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: -0.03em;
}
body[data-ui-skin="alpine"] .message-content h2 {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -0.02em;
    border-bottom-color: var(--border-subtle);
}
body[data-ui-skin="alpine"] .message-content h3,
body[data-ui-skin="alpine"] .thinking-title,
body[data-ui-skin="alpine"] .workspace-tools-title,
body[data-ui-skin="alpine"] .card-title,
body[data-ui-skin="alpine"] .doc-pane-title,
body[data-ui-skin="alpine"] .auth-modal-card h3 {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: -0.02em;
}
body[data-ui-skin="alpine"] .message-content p,
body[data-ui-skin="alpine"] .message-content li,
body[data-ui-skin="alpine"] .evidence-card-body,
body[data-ui-skin="alpine"] .card-body,
body[data-ui-skin="alpine"] .tool-progress-copy {
    font-family: var(--font-serif);
    font-size: 16px;
    line-height: 1.72;
    letter-spacing: -0.006em;
}
body[data-ui-skin="alpine"] .message-content a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--accent-dim);
}
body[data-ui-skin="alpine"] .message-content a:hover {
    text-decoration-color: var(--accent);
}
body[data-ui-skin="alpine"] .message-content pre {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}
body[data-ui-skin="alpine"] .message-content blockquote {
    border-left: 3px solid var(--accent);
    padding-left: 14px;
    color: var(--text-secondary);
    font-style: italic;
}
body[data-ui-skin="alpine"] .tool-progress-title,
body[data-ui-skin="alpine"] .tool-progress-text,
body[data-ui-skin="alpine"] .message-user .message-content,
body[data-ui-skin="alpine"] .metric-pill,
body[data-ui-skin="alpine"] .source-chip,
body[data-ui-skin="alpine"] .planning-phase-pill,
body[data-ui-skin="alpine"] .workspace-heading-eyebrow,
body[data-ui-skin="alpine"] .dropdown-item-meta {
    font-family: var(--font);
}

/* ─── Verdict Card ───────────────────────────────────────────────────────── */
body[data-ui-skin="alpine"] .verdict-card {
    border-radius: 12px;
    border-left-width: 4px;
    box-shadow: var(--shadow-sm);
    padding: 18px 22px;
}
body[data-ui-skin="alpine"] .verdict-level {
    font-family: var(--font);
    font-weight: 700;
    letter-spacing: 0.03em;
}
body[data-ui-skin="alpine"] .verdict-mountain {
    font-family: var(--font-serif);
    font-weight: 400;
    font-style: italic;
}

/* ─── Metrics Row ────────────────────────────────────────────────────────── */
body[data-ui-skin="alpine"] .metric-pill {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: var(--font);
    font-size: 0.82em;
}

/* ─── Evidence Cards ─────────────────────────────────────────────────────── */
body[data-ui-skin="alpine"] .evidence-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    transition: all 0.18s ease;
}
body[data-ui-skin="alpine"] .evidence-card:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-md);
}
body[data-ui-skin="alpine"] .evidence-card-header {
    border-bottom: 1px solid var(--border-subtle);
}
body[data-ui-skin="alpine"] .evidence-card-title {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.012em;
}

/* ─── Source Chips ────────────────────────────────────────────────────────── */
body[data-ui-skin="alpine"] .source-chip {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: var(--font);
}

/* ─── Cards (generic) ────────────────────────────────────────────────────── */
body[data-ui-skin="alpine"] .card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}
body[data-ui-skin="alpine"] .card-header {
    background: var(--bg-elevated);
    border-bottom-color: var(--border-subtle);
}
body[data-ui-skin="alpine"] .card-title {
    font-family: var(--font-serif);
    font-weight: 600;
}

/* ─── Workspace ──────────────────────────────────────────────────────────── */
body[data-ui-skin="alpine"] .workspace-heading-title {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: -0.028em;
}
body[data-ui-skin="alpine"] .workspace-heading-eyebrow {
    font-family: var(--font);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--accent);
}

/* ─── Tools Drawer ───────────────────────────────────────────────────────── */
body[data-ui-skin="alpine"] .workspace-tools-drawer {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 12px;
}
body[data-ui-skin="alpine"] .workspace-tools-title {
    font-family: var(--font-serif);
}

/* ─── Action Bar ─────────────────────────────────────────────────────────── */
body[data-ui-skin="alpine"] .workspace-action-bar .btn-accent {
    background: var(--accent);
    border-radius: 10px;
}
body[data-ui-skin="alpine"] .workspace-action-bar .btn-action {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-surface);
}

/* ─── Thinking Indicator ─────────────────────────────────────────────────── */
body[data-ui-skin="alpine"] .thinking-indicator {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(12px);
}
body[data-ui-skin="alpine"] .thinking-title {
    font-family: var(--font-serif);
    font-weight: 600;
}

/* ─── Tool Progress ──────────────────────────────────────────────────────── */
body[data-ui-skin="alpine"] .tool-progress-current {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(12px);
}

/* ─── Alpine Loader: organic tones ────────────────────────────────────────── */
body[data-ui-skin="alpine"] .adventure-loader-halo {
    background: radial-gradient(circle, var(--accent-dim), transparent);
}
body[data-ui-skin="alpine"] .adventure-loader-ring {
    border-color: color-mix(in srgb, var(--accent) 20%, transparent);
}
body[data-ui-skin="alpine"] .adventure-loader-track {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--accent) 10%, transparent),
        color-mix(in srgb, var(--accent) 30%, transparent),
        color-mix(in srgb, var(--accent) 10%, transparent));
}
body[data-ui-skin="alpine"] .adventure-loader-dot {
    background: var(--accent);
    box-shadow: 0 0 0 2px var(--bg-primary);
}
body[data-ui-skin="alpine"] .adventure-loader-peak {
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--accent) 12%, transparent),
        color-mix(in srgb, var(--mood-accent) 08%, transparent));
}

/* ─── Alpine Pickers: clean + warm hybrid ────────────────────────────────── */
body[data-ui-skin="alpine"] .selector-control--picker .selector-input {
    border-radius: 10px;
    border-color: var(--border);
    background: var(--field-bg);
    box-shadow: var(--shadow-sm);
}
body[data-ui-skin="alpine"] .selector-control--picker .selector-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
    transform: none;
}
body[data-ui-skin="alpine"] .selector-picker-btn { border-radius: 8px; }
body[data-ui-skin="alpine"] .selector-control--picker:hover .selector-picker-btn {
    background: var(--accent-dim);
    color: var(--accent);
}
body[data-ui-skin="alpine"] .custom-date-picker,
body[data-ui-skin="alpine"] .custom-time-picker {
    background: var(--bg-surface);
    border-color: var(--border);
    box-shadow: var(--shadow-lg);
}
body[data-ui-skin="alpine"] .cdp-day--selected { background: var(--accent) !important; }
body[data-ui-skin="alpine"] .cdp-day--today { border-color: var(--accent); }
body[data-ui-skin="alpine"] .ctp-option--selected { color: var(--accent) !important; }

/* ─── Planning Phase Rail ────────────────────────────────────────────────── */
body[data-ui-skin="alpine"] .planning-phase-pill {
    border: 1px solid var(--border);
    background: var(--bg-surface);
    border-radius: 6px;
}
body[data-ui-skin="alpine"] .planning-phase-pill--active {
    background: var(--accent);
    border-color: var(--accent);
    color: #FFFFFF;
    box-shadow: 0 4px 12px var(--accent-glow);
}
body[data-ui-skin="alpine"] .planning-phase-pill--done {
    background: var(--positive-dim);
    border-color: color-mix(in srgb, var(--positive) 30%, transparent);
}

/* ─── Doc Pane ───────────────────────────────────────────────────────────── */
body[data-ui-skin="alpine"] .doc-pane {
    background: var(--bg-primary);
    border-left: 1px solid var(--border);
    box-shadow: -2px 0 12px rgba(40, 40, 30, 0.05);
}
body[data-ui-skin="alpine"] .doc-pane-header {
    border-bottom: 1px solid var(--border);
}
body[data-ui-skin="alpine"] .doc-pane-title {
    font-family: var(--font-serif);
    font-weight: 600;
}
body[data-ui-skin="alpine"] .doc-pane-body {
    font-family: var(--font-serif);
    font-size: 16px;
    line-height: 1.78;
    letter-spacing: -0.008em;
}

/* ─── Auth Modal ─────────────────────────────────────────────────────────── */
body[data-ui-skin="alpine"] .auth-modal-card {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 16px;
    backdrop-filter: blur(16px);
}
body[data-ui-skin="alpine"] .auth-modal-card h3 {
    font-family: var(--font-serif);
}
body[data-ui-skin="alpine"] .auth-mode-switch {
    background: var(--bg-surface);
    border-color: var(--border);
}
body[data-ui-skin="alpine"] .auth-mode-btn.active {
    background: linear-gradient(135deg, var(--mood-accent), var(--accent));
}

/* ─── Dropdown ───────────────────────────────────────────────────────────── */
body[data-ui-skin="alpine"] .dropdown-list {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}
body[data-ui-skin="alpine"] .dropdown-item:hover,
body[data-ui-skin="alpine"] .dropdown-item.active {
    background: var(--bg-surface-hover);
}

/* ─── Scroll Bottom ──────────────────────────────────────────────────────── */
body[data-ui-skin="alpine"] .scroll-bottom-btn {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--shadow-sm);
}

/* ─── Alpine Motion: Balanced, natural — like a steady ascent ─────────────── */
body[data-ui-skin="alpine"] .workspace-reveal-item {
    transition-duration: 240ms;
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 0;
    transform: translateY(8px) scale(0.995);
}
body[data-ui-skin="alpine"] .workspace-reveal-item.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
/* Balanced transition speed */
body[data-ui-skin="alpine"] .btn,
body[data-ui-skin="alpine"] .btn-accent,
body[data-ui-skin="alpine"] .btn-ghost,
body[data-ui-skin="alpine"] .evidence-card,
body[data-ui-skin="alpine"] .welcome-tile,
body[data-ui-skin="alpine"] .metric-pill,
body[data-ui-skin="alpine"] .source-chip,
body[data-ui-skin="alpine"] .selector-input,
body[data-ui-skin="alpine"] .dropdown-item {
    transition-duration: 180ms;
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
}
/* Subtle lift + glow on hover */
body[data-ui-skin="alpine"] .btn:active { transform: scale(0.97); }
body[data-ui-skin="alpine"] .evidence-card:hover { transform: translateY(-1px); }
body[data-ui-skin="alpine"] .welcome-tile:hover { transform: translateY(-2px); }
/* Balanced spacing */
body[data-ui-skin="alpine"] .chat-messages { gap: 18px; }
body[data-ui-skin="alpine"] .message-content { line-height: 1.72; }

/* ─── Progress Sweep Bar ─────────────────────────────────────────────────── */
body[data-ui-skin="alpine"] .tool-progress-current::after {
    background: linear-gradient(90deg, var(--accent), var(--mood-accent));
    height: 2px;
    border-radius: 0 0 14px 14px;
}

/* ─── Sunlight Alpine: Claude-led warmth with current Sunlight energy ───── */
body[data-ui-skin="alpine"][data-display-mode="sunlight"] .planner-shell,
body[data-ui-skin="alpine"][data-display-mode="sunlight"] .input-wrapper,
body[data-ui-skin="alpine"][data-display-mode="sunlight"] .tool-progress-current,
body[data-ui-skin="alpine"][data-display-mode="sunlight"] .thinking-indicator {
    background: linear-gradient(180deg, rgba(255, 253, 248, 0.95), rgba(255, 246, 232, 0.88));
    border-color: rgba(219, 159, 112, 0.22);
    box-shadow: 0 10px 28px rgba(154, 100, 61, 0.1);
}
body[data-ui-skin="alpine"][data-display-mode="sunlight"] .message-content a {
    color: #C86A44;
    text-decoration-color: rgba(200, 106, 68, 0.28);
}
body[data-ui-skin="alpine"][data-display-mode="sunlight"] .metric-pill,
body[data-ui-skin="alpine"][data-display-mode="sunlight"] .source-chip {
    background: rgba(255, 250, 243, 0.92);
    border-color: rgba(219, 159, 112, 0.18);
}
body[data-ui-skin="alpine"][data-display-mode="sunlight"] .btn-accent,
body[data-ui-skin="alpine"][data-display-mode="sunlight"] .btn-plan-hike {
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(200, 106, 68, 0.16);
}

/* ─── Glacial Alpine: Claude + Glacial + Perplexity ─────────────────────── */
body[data-ui-skin="alpine"][data-display-mode="glacial"] .header,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .planner-shell,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .input-wrapper,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .tool-progress-current,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .thinking-indicator,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .workspace-tools-drawer,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .card,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .evidence-card,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .route-map-container,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .doc-pane {
    position: relative;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(241, 249, 253, 0.80));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        inset 0 -1px 0 rgba(215, 236, 247, 0.34),
        0 14px 34px rgba(40, 79, 103, 0.10),
        0 0 0 1px rgba(185, 215, 231, 0.16);
    backdrop-filter: blur(20px) saturate(132%);
}
body[data-ui-skin="alpine"][data-display-mode="glacial"] .planner-shell,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .input-wrapper,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .card,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .evidence-card,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .workspace-tools-drawer,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .route-map-container {
    border-radius: 14px;
}
body[data-ui-skin="alpine"][data-display-mode="glacial"] .header::before,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .planner-shell::before,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .card::before,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .evidence-card::before,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .workspace-tools-drawer::before,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .route-map-container::before,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .doc-pane::before {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    top: 0;
    height: 12px;
    border-radius: 0 0 12px 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
    pointer-events: none;
}
body[data-ui-skin="alpine"][data-display-mode="glacial"]::before {
    filter: saturate(116%) contrast(110%) brightness(1.04);
    transform: scale(1.015);
}
body[data-ui-skin="alpine"][data-display-mode="glacial"]::after {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.04) 16%, transparent 30%),
        radial-gradient(780px 260px at 50% -2%, rgba(255, 255, 255, 0.22), transparent 62%),
        var(--dynamic-bg-overlay);
}
body[data-ui-skin="alpine"][data-display-mode="glacial"] .header::after {
    content: '';
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: -1px;
    height: 14px;
    pointer-events: none;
    opacity: 0.72;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.94), transparent 82%) 4% 0/2px 14px no-repeat,
        linear-gradient(180deg, rgba(212,237,248,0.84), transparent 78%) 12% 0/1px 9px no-repeat,
        linear-gradient(180deg, rgba(255,255,255,0.90), transparent 80%) 23% 0/2px 11px no-repeat,
        linear-gradient(180deg, rgba(212,237,248,0.76), transparent 82%) 34% 0/1px 8px no-repeat,
        linear-gradient(180deg, rgba(255,255,255,0.88), transparent 80%) 48% 0/2px 12px no-repeat,
        linear-gradient(180deg, rgba(212,237,248,0.76), transparent 78%) 60% 0/1px 9px no-repeat,
        linear-gradient(180deg, rgba(255,255,255,0.90), transparent 80%) 73% 0/2px 11px no-repeat,
        linear-gradient(180deg, rgba(212,237,248,0.78), transparent 78%) 84% 0/1px 9px no-repeat,
        linear-gradient(180deg, rgba(255,255,255,0.94), transparent 84%) 95% 0/2px 14px no-repeat;
}
body[data-ui-skin="alpine"][data-display-mode="glacial"] .planner-shell::after,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .card::after,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .evidence-card::after,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .workspace-tools-drawer::after,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .route-map-container::after,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .doc-pane::after {
    content: '';
    position: absolute;
    left: 22px;
    right: 22px;
    top: -1px;
    height: 18px;
    pointer-events: none;
    opacity: 0.54;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.97), transparent 86%) 5% 0/2px 15px no-repeat,
        linear-gradient(180deg, rgba(221,243,252,0.90), transparent 84%) 12% 0/1px 10px no-repeat,
        linear-gradient(180deg, rgba(255,255,255,0.93), transparent 84%) 21% 0/2px 15px no-repeat,
        linear-gradient(180deg, rgba(221,243,252,0.86), transparent 86%) 30% 0/1px 9px no-repeat,
        linear-gradient(180deg, rgba(255,255,255,0.95), transparent 84%) 45% 0/2px 16px no-repeat,
        linear-gradient(180deg, rgba(221,243,252,0.84), transparent 86%) 58% 0/1px 11px no-repeat,
        linear-gradient(180deg, rgba(255,255,255,0.93), transparent 84%) 72% 0/2px 14px no-repeat,
        linear-gradient(180deg, rgba(221,243,252,0.88), transparent 86%) 84% 0/1px 10px no-repeat,
        linear-gradient(180deg, rgba(255,255,255,0.97), transparent 84%) 94% 0/2px 15px no-repeat;
}
body[data-ui-skin="alpine"][data-display-mode="glacial"] .header {
    background: color-mix(in srgb, var(--bg-primary) 84%, rgba(255, 255, 255, 0.5));
}
body[data-ui-skin="alpine"][data-display-mode="glacial"] .planner-shell,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .input-wrapper,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .tool-progress-current,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .thinking-indicator {
    border-color: rgba(130, 166, 185, 0.28);
}
body[data-ui-skin="alpine"][data-display-mode="glacial"] .welcome h2,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .workspace-heading-title,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .evidence-card-title,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .doc-pane-title {
    color: #274A5A;
}
body[data-ui-skin="alpine"][data-display-mode="glacial"] .welcome p,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .planner-stage-copy,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .evidence-card-body,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .card-body,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .doc-pane-body,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .tool-progress-copy {
    color: #4D6978;
}
body[data-ui-skin="alpine"][data-display-mode="glacial"] .message-content a {
    color: #4E8EAE;
    text-decoration-color: rgba(90, 149, 183, 0.22);
}
body[data-ui-skin="alpine"][data-display-mode="glacial"] .display-mode-switch,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .dropdown-list,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .auth-mode-switch {
    background: rgba(250, 254, 255, 0.88);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}
body[data-ui-skin="alpine"][data-display-mode="glacial"] .metric-pill {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(236, 246, 251, 0.70));
    border-color: rgba(130, 166, 185, 0.30);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.82),
        0 8px 18px rgba(111, 161, 189, 0.10);
}
body[data-ui-skin="alpine"][data-display-mode="glacial"] .btn-accent,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .btn-plan-hike {
    border-radius: 14px;
    background: linear-gradient(135deg, #6AA8C8, #4F88A8);
    box-shadow: 0 10px 24px rgba(90, 149, 183, 0.18);
}
body[data-ui-skin="alpine"][data-display-mode="glacial"] .btn-accent:hover,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .btn-plan-hike:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(90, 149, 183, 0.24);
}
body[data-ui-skin="alpine"][data-display-mode="glacial"] .workspace-reveal-item {
    transition-duration: 200ms;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(5px);
}
body[data-ui-skin="alpine"][data-display-mode="glacial"] .chat-messages {
    gap: 18px;
}
body[data-ui-skin="alpine"][data-display-mode="glacial"] .source-chip,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .planning-phase-pill {
    border-radius: 8px;
    background: rgba(249, 253, 255, 0.96);
    border-color: rgba(130, 166, 185, 0.28);
}
body[data-ui-skin="alpine"][data-display-mode="glacial"] .map-label,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .gpx-sources-bar,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .map-toolbar,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .elevation-profile-wrap {
    background: linear-gradient(180deg, rgba(248, 252, 255, 0.92), rgba(237, 246, 251, 0.86));
    border-color: rgba(176, 203, 217, 0.18);
}
body[data-ui-skin="alpine"][data-display-mode="glacial"] .route-map {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
body[data-ui-skin="alpine"][data-display-mode="glacial"] .workspace-heading-eyebrow,
body[data-ui-skin="alpine"][data-display-mode="glacial"] .dropdown-item-meta {
    color: #5A8EA8;
}
body[data-ui-skin="alpine"][data-display-mode="glacial"] .message-content blockquote {
    border-left-color: #8DC1DA;
    background: linear-gradient(90deg, rgba(236, 247, 252, 0.82), transparent 72%);
    border-radius: 0 10px 10px 0;
    padding-top: 6px;
    padding-bottom: 6px;
}
body[data-ui-skin="alpine"][data-display-mode="glacial"] .map-gap-note {
    background: linear-gradient(180deg, rgba(244, 251, 255, 0.96), rgba(233, 245, 251, 0.9));
    border-top-color: rgba(140, 185, 205, 0.2);
    color: #456878;
}

/* ─── Alpine Scenic Background Overrides ────────────────────────────────── */
body[data-ui-skin="alpine"][data-display-mode="glacial"] {
    --scenic-sky-top: #a8d0e8;
    --scenic-sky-mid: #c8e2f0;
    --scenic-sky-low: #e4f0f8;
    --scenic-mountain-far: #7a9db8;
    --scenic-mountain-near: #5a7e98;
}
body[data-ui-skin="alpine"][data-display-mode="dark"] {
    --scenic-sky-top: #0a1a14;
    --scenic-sky-mid: #122820;
    --scenic-sky-low: #1a3428;
    --scenic-mountain-far: #0c1e16;
    --scenic-mountain-near: #06120c;
}
body[data-ui-skin="alpine"][data-display-mode="sunlight"] {
    --scenic-sky-top: #5a3520;
    --scenic-sky-mid: #c8884a;
    --scenic-sky-low: #e8c080;
    --scenic-mountain-far: #2a1a10;
    --scenic-mountain-near: #180e08;
}
/* Boost frost icicle opacity when scenic is also active */
body[data-ui-skin="alpine"][data-display-mode="glacial"][data-scenic-bg="on"] .planner-shell::after,
body[data-ui-skin="alpine"][data-display-mode="glacial"][data-scenic-bg="on"] .card::after,
body[data-ui-skin="alpine"][data-display-mode="glacial"][data-scenic-bg="on"] .evidence-card::after,
body[data-ui-skin="alpine"][data-display-mode="glacial"][data-scenic-bg="on"] .workspace-tools-drawer::after,
body[data-ui-skin="alpine"][data-display-mode="glacial"][data-scenic-bg="on"] .route-map-container::after,
body[data-ui-skin="alpine"][data-display-mode="glacial"][data-scenic-bg="on"] .doc-pane::after {
    opacity: 0.68;
}