:root {
            --app-bg: #faf7f4;
            --app-surface: #ffffff;
            --app-surface-soft: #f4f0ec;
            --app-border: #eae5e0;
            --app-text: #252120;
            --app-muted: #6b6460;
            --app-primary: #012169;
            --app-primary-2: #002395;
            --app-accent: #C8102E;
            --app-primary-rgb: 1, 33, 105;
            --app-primary-2-rgb: 0, 35, 149;
            --app-accent-rgb: 200, 16, 46;
            --app-header-a: #012169;
            --app-header-b: #1a1a5e;
            --app-header-c: #002395;
            --app-splash-mid: #001233;
        }
        :root[data-theme="soft"] {
            --app-bg: #fbf6f3;
            --app-surface: #fffdfb;
            --app-surface-soft: #f2ece7;
            --app-border: #e8ded7;
            --app-primary: #364152;
            --app-primary-2: #586174;
            --app-accent: #be5d58;
            --app-primary-rgb: 54, 65, 82;
            --app-primary-2-rgb: 88, 97, 116;
            --app-accent-rgb: 190, 93, 88;
            --app-header-a: #283142;
            --app-header-b: #475569;
            --app-header-c: #7b4e57;
            --app-splash-mid: #1f2937;
        }
        :root[data-theme="ocean"] {
            --app-bg: #f3fbfb;
            --app-surface: #ffffff;
            --app-surface-soft: #e8f5f5;
            --app-border: #d4e7e6;
            --app-primary: #006d77;
            --app-primary-2: #0a9396;
            --app-accent: #ee9b00;
            --app-primary-rgb: 0, 109, 119;
            --app-primary-2-rgb: 10, 147, 150;
            --app-accent-rgb: 238, 155, 0;
            --app-header-a: #005f73;
            --app-header-b: #0a4f60;
            --app-header-c: #0a9396;
            --app-splash-mid: #073b4c;
        }
        :root[data-theme="contrast"] {
            --app-bg: #ffffff;
            --app-surface: #ffffff;
            --app-surface-soft: #f3f4f6;
            --app-border: #d1d5db;
            --app-primary: #111827;
            --app-primary-2: #374151;
            --app-accent: #d00000;
            --app-primary-rgb: 17, 24, 39;
            --app-primary-2-rgb: 55, 65, 81;
            --app-accent-rgb: 208, 0, 0;
            --app-header-a: #111827;
            --app-header-b: #1f2937;
            --app-header-c: #374151;
            --app-splash-mid: #111827;
        }
        :root[data-theme="sunset"] {
            --app-bg: #fff7ed;
            --app-surface: #ffffff;
            --app-surface-soft: #ffedd5;
            --app-border: #fed7aa;
            --app-text: #431407;
            --app-muted: #7c2d12;
            --app-primary: #9a3412;
            --app-primary-2: #c2410c;
            --app-accent: #ea580c;
            --app-primary-rgb: 154, 52, 18;
            --app-primary-2-rgb: 194, 65, 12;
            --app-accent-rgb: 234, 88, 12;
            --app-header-a: #9a3412;
            --app-header-b: #c2410c;
            --app-header-c: #ea580c;
            --app-splash-mid: #431407;
        }
        :root[data-theme="forest"] {
            --app-bg: #f0fdf4;
            --app-surface: #ffffff;
            --app-surface-soft: #dcfce7;
            --app-border: #bbf7d0;
            --app-text: #14532d;
            --app-muted: #166534;
            --app-primary: #14532d;
            --app-primary-2: #15803d;
            --app-accent: #65a30d;
            --app-primary-rgb: 20, 83, 45;
            --app-primary-2-rgb: 21, 128, 61;
            --app-accent-rgb: 101, 163, 13;
            --app-header-a: #14532d;
            --app-header-b: #166534;
            --app-header-c: #15803d;
            --app-splash-mid: #052e16;
        }
        :root[data-theme="lavender"] {
            --app-bg: #faf5ff;
            --app-surface: #ffffff;
            --app-surface-soft: #f3e8ff;
            --app-border: #e9d5ff;
            --app-text: #3b0764;
            --app-muted: #6b21a8;
            --app-primary: #4c1d95;
            --app-primary-2: #7e22ce;
            --app-accent: #a855f7;
            --app-primary-rgb: 76, 29, 149;
            --app-primary-2-rgb: 126, 34, 206;
            --app-accent-rgb: 168, 85, 247;
            --app-header-a: #4c1d95;
            --app-header-b: #6b21a8;
            --app-header-c: #7e22ce;
            --app-splash-mid: #2e1065;
        }
        *, *::before, *::after { box-sizing: border-box; }
        body { font-family: 'Inter', sans-serif; background: var(--app-bg); color: var(--app-text); margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
        /* Single branded entry gate: starts as the loading splash, then
           reveals sign-in controls in-place only if authentication is needed. */
        #app-splash { position: fixed; inset: 0; z-index: 120000; display: flex; align-items: center; justify-content: center; padding: 28px; background: radial-gradient(circle at 50% 22%, rgba(24, 156, 166, 0.32) 0, rgba(24, 156, 166, 0.08) 24%, transparent 48%), radial-gradient(circle at 62% 58%, rgba(247, 141, 43, 0.18) 0, rgba(247, 141, 43, 0.05) 18%, transparent 42%), linear-gradient(145deg, var(--app-splash-mid) 0%, var(--app-header-a) 44%, #031326 100%); color: #eef7fb; transition: opacity 0.28s ease, visibility 0.28s ease; }
        #app-splash.splash-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
        .splash-inner { position: relative; overflow: hidden; width: min(470px, 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; background: linear-gradient(180deg, rgba(13,31,53,0.96) 0%, rgba(6,18,36,0.98) 100%); border: 1px solid rgba(255,255,255,0.14); border-radius: 18px; padding: 32px 34px 26px; box-shadow: 0 28px 78px rgba(0,0,0,0.48), 0 1px 0 rgba(255,255,255,0.14) inset; }
        .splash-inner::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #1aa6a8 0%, #0b5da8 48%, #f28a2e 100%); }
        .splash-logo-card { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
        .splash-logo { width: 260px; height: auto; display: block; border-radius: 22px; box-shadow: 0 20px 42px rgba(0,0,0,0.32); }
        .splash-copy { display: grid; gap: 10px; justify-items: center; width: 100%; }
        .splash-kicker { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: #ffb86b; }
        .splash-tagline { margin: -6px 0 0; color: #d5e3ee; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
        .splash-tagline::after { content: ""; display: block; width: 58px; height: 3px; border-radius: 999px; margin: 14px auto 0; background: linear-gradient(90deg, #1aa6a8, #f28a2e); }
        .splash-spinner { display: flex; gap: 6px; margin: 2px 0 4px; }
        .splash-spinner span { width: 7px; height: 7px; border-radius: 50%; background: #1aa6a8; animation: splash-bounce 1.1s ease-in-out infinite; }
        .splash-spinner span:nth-child(2) { animation-delay: 0.15s; }
        .splash-spinner span:nth-child(3) { animation-delay: 0.3s; }
        @keyframes splash-bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-6px); opacity: 1; } }
        .splash-status { margin: 0; font-size: 11px; font-weight: 700; color: #d5e3ee; }
        /* Per the user (2026-08-08): on a slow connection - especially an
           installed iPhone PWA, where openDocumentForView() shows nothing
           at all until the OneDrive/Graph fetch resolves - tapping "view"
           on a file gave zero feedback, so a slow load looked like a
           missed tap. Applied to the tapped button/icon itself so it works
           regardless of that element's size or content. */
        .view-file-loading { position: relative; opacity: 0.55; pointer-events: none; }
        .view-file-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 13px; margin: -7px 0 0 -7px; border: 2px solid rgba(0,0,0,0.22); border-top-color: #012169; border-radius: 50%; animation: view-file-spin 0.65s linear infinite; }
        @keyframes view-file-spin { to { transform: rotate(360deg); } }
        /* Per the user (2026-08-08): navigator.share() needs a live user
           gesture, but the file has to download first - on a slow
           connection that download can outlast the gesture window, so the
           eager share attempt gets rejected even once the file is ready.
           This marks the button as "tap again to actually open the share
           sheet" (files are already resolved by then, so the retry is
           instant) instead of just silently failing. */
        .share-btn-ready { animation: share-btn-pulse 1.1s ease-in-out infinite; }
        @keyframes share-btn-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(1,33,105,0.45); } 50% { box-shadow: 0 0 0 7px rgba(1,33,105,0); } }
        .splash-auth { display: none; width: 100%; margin-top: 10px; }
        #app-splash.splash-auth-required .splash-auth { display: block; }
        #app-splash.splash-auth-required .splash-spinner { display: none; }
        .splash-continue-btn { display: none; border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; background: #ff8a3d; color: #071a33; padding: 8px 18px; min-width: 110px; font-size: 10px; font-weight: 800; cursor: pointer; box-shadow: 0 10px 24px rgba(0,0,0,0.24); }
        #app-splash.splash-ready .splash-continue-btn { display: inline-flex; align-items: center; justify-content: center; }
        #app-splash.splash-ready .splash-spinner { display: none; }
        #app-splash.splash-auth-required .splash-continue-btn { display: none; }
        .splash-meta { margin: 8px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; font-size: 10px; font-weight: 600; color: #b8c8d8; }
        @media (max-width: 420px) {
            #app-splash { padding: 22px; }
            .splash-inner { padding: 28px 22px 24px; }
            .splash-logo { width: 210px; }
            .splash-kicker { font-size: 13px; }
            .splash-meta { font-size: 10px; }
        }
        .tab-content { display: none; }
        .tab-content.active { display: block; }
        .day-card-body { max-height: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease; opacity: 0; }
        .day-card-body.open { max-height: 8000px; opacity: 1; }
        .chevron-icon { transition: transform 0.3s ease; }
        .chevron-icon.rotated { transform: rotate(180deg); }
        @keyframes pulse-alert { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } }
        .alert-pulse { animation: pulse-alert 2s ease-in-out infinite; }
        @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
        .today-highlight { background: linear-gradient(90deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.3) 50%, rgba(255, 215, 0, 0.15) 100%); background-size: 200% 100%; animation: shimmer 3s ease-in-out infinite; border-left: 4px solid #FFD700; }
        @keyframes deep-link-flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(1, 33, 105, 0); } 15%, 60% { box-shadow: 0 0 0 3px rgba(1, 33, 105, 0.45); } }
        .deep-link-highlight { animation: deep-link-flash 2s ease-in-out; }
        .bottom-nav { position: relative; z-index: 1; background: rgba(255,255,255,0.94); color: var(--app-muted); border-top: 1px solid rgba(var(--app-primary-rgb),0.08) !important; border-bottom: 1px solid rgba(31,26,22,0.08); box-shadow: 0 6px 18px rgba(31,26,22,0.10) !important; backdrop-filter: blur(10px); }
        .bottom-nav::before { display: none; }
        /* Desktop shows every real tab at once; narrower screens switch to a swipe row. */
        .bottom-nav-row { max-width: min(1120px, calc(100vw - 48px)) !important; overflow: visible; justify-content: center; gap: 3px; padding: 6px 24px 7px; }
        .bottom-nav-row::-webkit-scrollbar { display: none; }
        .bottom-nav .nav-btn { flex: 1 1 0 !important; width: auto; min-width: 0; max-width: 92px; min-height: 52px !important; border-radius: 12px; color: #6f6863; padding-top: 4px !important; padding-bottom: 4px !important; transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease; }
        .bottom-nav .nav-btn i { color: #746d68; stroke-width: 2; }
        .bottom-nav .nav-btn span { color: currentColor; }
        .bottom-nav .nav-btn:hover { background: rgba(var(--app-primary-rgb),0.05); color: var(--app-text); }
        .bottom-nav .nav-btn.active { color: var(--app-primary); background: rgba(var(--app-primary-rgb),0.07); }
        .bottom-nav .nav-btn.active i { color: var(--app-accent); }
        .nav-btn.active .nav-indicator { width: 54%; }
        .nav-indicator { width: 0; height: 3px; transition: width 0.3s ease; border-radius: 2px; background: var(--app-primary) !important; }
        .tab-subnav-shell { display: none !important; position: fixed; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); z-index: 51; padding: 0 12px 8px; pointer-events: none; }
        .tab-subnav-shell.hidden { display: none; }
        .tab-subnav-row { max-width: 768px; margin: 0 auto; display: flex; align-items: center; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 6px; border: 1px solid var(--app-border); border-radius: 16px; background: rgba(254, 252, 250, 0.96); box-shadow: 0 12px 30px rgba(37, 33, 32, 0.14); pointer-events: auto; }
        .tab-subnav-row::-webkit-scrollbar { display: none; }
        .tab-subnav-chip { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 11px; border: 0; border-radius: 11px; background: transparent; color: #6b6460; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
        .tab-subnav-chip.active { background: var(--app-primary); color: #fff; box-shadow: 0 6px 14px rgba(var(--app-primary-rgb), 0.18); }
        .tab-subnav-chip:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
        @media (max-width: 900px) {
            .bottom-nav { padding-bottom: 0; }
            .bottom-nav-row {
                display: flex !important;
                justify-content: flex-start;
                overflow-x: auto;
                overflow-y: hidden;
                max-width: none;
                padding: 0 max(28px, env(safe-area-inset-left, 0px)) 0 max(28px, env(safe-area-inset-right, 0px));
                scroll-padding-inline: 28px;
                overscroll-behavior-x: contain;
                scroll-snap-type: x proximity;
            }
            .bottom-nav .nav-btn {
                flex: 0 0 auto !important;
                width: 82px;
                min-width: 76px;
                max-width: none;
                min-height: 50px;
                padding: 6px 4px 5px;
                scroll-snap-align: start;
            }
            .bottom-nav .nav-btn span {
                max-width: 100%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 9px;
            }
            .tab-subnav-shell { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); padding: 0 8px 7px; }
            .tab-subnav-row { max-width: none; border-radius: 14px; }
        }
        .pass-dot { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; }
        .copy-toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); background: #252120; color: #fefcfa; padding: 10px 20px; border-radius: 12px; font-size: 14px; z-index: 100; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
        .copy-toast.show { opacity: 1; }
        .sync-outbox-banner { position: fixed; left: 50%; transform: translateX(-50%); z-index: 9997; max-width: min(560px, calc(100vw - 24px)); padding: 8px 14px; border-radius: 0 0 12px 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); font-size: 12px; font-weight: 800; text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.2s ease, top 0.2s ease; }
        .sync-outbox-banner.show { opacity: 1; pointer-events: auto; cursor: pointer; }
        .sync-outbox-banner.syncing { background: #dbeafe; color: #1d4ed8; }
        .sync-outbox-banner.waiting { background: #fef3c7; color: #92400e; }
        .sync-outbox-banner.done { background: #dcfce7; color: #166534; }
        .sync-outbox-banner.denied { background: #fee2e2; color: #991b1b; }
        /* Real bug found via independent audit (2026-07-11): #undo-toast
           used to carry inline pointer-events:auto unconditionally (needed
           so its real Undo button is clickable while shown), which also
           left it clickable/hit-testable after fading back to opacity:0 -
           a tap in that spot could silently pop the undo stack or just eat
           a tap meant for content underneath, with zero visible feedback
           either way. Scoped to .show instead, so it's only interactive
           while actually visible - falls back to the base .copy-toast
           pointer-events:none otherwise, same as the plain copy-toast. */
        #undo-toast.show { pointer-events: auto; }
        .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 9999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
        .pass-day-badge { background: rgba(255,255,255,0.18); color: #fff; border: 1px solid rgba(255,255,255,0.34); box-shadow: 0 1px 2px rgba(0,0,0,0.12); }
        .pass-day-badge-light { background: #fff7d6; color: #5f4400; border-color: #f4d35e; box-shadow: none; }
        .pass-day-badge-final { background: #fee2e2; color: #991b1b; border-color: #fecaca; box-shadow: none; }
        .about-panel { background: var(--app-surface); border-radius: 20px; padding: 24px; max-width: 430px; width: 100%; max-height: 85vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
        .settings-panel { display: flex; flex-direction: column; overflow: hidden; }
        .settings-modal-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex: 0 0 auto; margin-bottom: 16px; }
        .settings-modal-header h2 { margin: 0; }
        .settings-modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
        .about-settings-stack { display: grid; gap: 8px; margin-top: 8px; }
        .about-settings-group { border: 1px solid #eae5e0; border-radius: 14px; background: #fff; overflow: hidden; }
        .about-settings-group[open] { background: #fefcfa; }
        .about-settings-group > summary { list-style: none; cursor: pointer; padding: 11px 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; font-weight: 800; color: #524c48; text-transform: uppercase; letter-spacing: 0.05em; }
        .about-settings-group > summary::-webkit-details-marker { display: none; }
        .about-settings-group > summary::after { content: '+'; width: 20px; height: 20px; border-radius: 999px; background: #f4f0ec; color: #6b6460; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; flex-shrink: 0; }
        .about-settings-group[open] > summary::after { content: '-'; }
        .about-settings-body { display: grid; gap: 12px; padding: 0 12px 12px; }
        .about-settings-body > div { margin-bottom: 0 !important; }
        .appearance-theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
        .appearance-theme-option { border: 1px solid var(--app-border); border-radius: 12px; background: var(--app-surface); color: var(--app-text); min-height: 50px; padding: 8px 10px; display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 800; cursor: pointer; text-align: left; }
        .appearance-theme-option.active { border-color: var(--app-primary); background: rgba(var(--app-primary-rgb), 0.07); box-shadow: 0 0 0 2px rgba(var(--app-primary-rgb), 0.1); }
        .appearance-theme-option:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
        .appearance-theme-swatches { display: flex; align-items: center; flex-shrink: 0; }
        .appearance-theme-swatches span { width: 15px; height: 24px; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
        .appearance-theme-swatches span:first-child { border-radius: 999px 0 0 999px; }
        .appearance-theme-swatches span:last-child { border-radius: 0 999px 999px 0; }
        #about-admin-section { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eae5e0; }
        .about-admin-note { font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #8a8380; margin: 0 0 2px; }
        .about-footer-actions { display: grid; gap: 8px; margin-top: 14px; }
        .timeline-item { position: relative; padding-left: 28px; padding-bottom: 14px; }
        .timeline-item::before { content: ''; position: absolute; left: 7px; top: 22px; bottom: 0; width: 2px; background: #eae5e0; }
        .timeline-item:last-child::before { display: none; }
        .timeline-dot { position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; border: 2.5px solid; background: #fefcfa; }
        .london-dot { border-color: #C8102E; }
        .paris-dot { border-color: #002395; }
        .travel-dot { border-color: #6b6460; }
        main { padding-bottom: 28px; }
        @media (max-width: 640px) {
            main { padding-bottom: 32px; }
        }
        .sticky-header { position: sticky; top: 0; z-index: 40; background: linear-gradient(to right, var(--app-header-a), var(--app-header-b), var(--app-header-c)) !important; }
        body::-webkit-scrollbar { width: 6px; }
        body::-webkit-scrollbar-thumb { background: #d8d2cc; border-radius: 3px; }

        .upload-zone { border: 2px dashed #d8d2cc; border-radius: 16px; background: #f4f0ec; transition: border-color 0.2s, background 0.2s; cursor: pointer; }
        .upload-zone:hover, .upload-zone.dragover { border-color: #002395; background: #e8ecf5; }
        .doc-item { animation: fadeInItem 0.3s ease forwards; }
        @keyframes fadeInItem { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
        .cat-badge-flights { background: #fee2e2; color: #991b1b; }
        .cat-badge-hotels { background: #dbeafe; color: #1e40af; }
        .cat-badge-transport { background: #fef3c7; color: #92400e; }
        .cat-badge-activities { background: #ede9fe; color: #5b21b6; }
        .cat-badge-food { background: #ffedd5; color: #9a3412; }
        .cat-badge-other { background: #f3f4f6; color: #374151; }
        .file-thumb { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: #eae5e0; }
        .doc-linked-bookings { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
        .doc-linked-booking-pill { display: inline-flex; align-items: center; gap: 4px; max-width: min(100%, 240px); min-height: 24px; padding: 3px 7px; border: 1px solid rgba(var(--app-primary-rgb), 0.12); border-radius: 999px; background: rgba(var(--app-primary-rgb), 0.06); color: var(--app-primary); font-size: 11px; line-height: 1.2; font-weight: 600; cursor: pointer; }
        .doc-linked-booking-pill:hover { background: rgba(var(--app-primary-rgb), 0.1); border-color: rgba(var(--app-primary-rgb), 0.22); }
        .doc-linked-booking-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .doc-linked-booking-meta { flex-shrink: 0; color: var(--app-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
        .doc-linked-activity-pill { background: #f7fbff; border-color: #cfe3f8; color: #164f8f; cursor: default; }
        .doc-standalone-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 7px; border-radius: 999px; background: #f4f0ec; color: #6b6460; font-size: 11px; font-weight: 600; }
        .weather-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
        .weather-location-tabs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
        .weather-location-tab { display: inline-flex; align-items: center; gap: 3px; min-height: 23px; border: 1px solid #eae5e0; border-radius: 999px; background: #f4f0ec; color: #524c48; padding: 3px 7px; font-size: 10px; font-weight: 700; cursor: pointer; }
        .weather-location-tab.active { border-color: rgba(var(--app-primary-rgb), 0.2); background: rgba(var(--app-primary-rgb), 0.08); color: var(--app-primary); }
        .weather-location-check { width: 12px; font-size: 10px; line-height: 1; text-align: center; }
        .weather-card-body { display: grid; gap: 7px; }
        .weather-destinations-list { display: grid; gap: 7px; }
        .weather-destination-card { border: 1px solid #eae5e0; border-radius: 12px; background: #fefcfa; padding: 9px 10px; display: grid; gap: 7px; }
        .weather-current-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
        .weather-current-emoji { font-size: 24px; line-height: 1; flex-shrink: 0; }
        .weather-current-copy { min-width: 92px; flex: 0 1 112px; }
        .weather-destination-name { margin: 0 0 1px; font-size: 12px; font-weight: 800; color: #524c48; }
        .weather-current-temp { margin: 0; font-size: 18px; font-weight: 800; color: #252120; line-height: 1.05; }
        .weather-current-detail { margin: 1px 0 0; font-size: 11px; color: #6b6460; }
        .weather-location-source { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: #8a8380; border-top: 1px solid #f0ebe7; padding-top: 8px; }
        .weather-location-edit { border: 1px solid #d8d2cc; border-radius: 999px; background: #fff; color: var(--app-primary); padding: 3px 7px; font-size: 10px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
        .weather-metrics { flex: 1 1 160px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; min-width: 0; }
        .weather-metric { display: inline-flex; align-items: baseline; gap: 3px; border: 1px solid #f0ebe7; border-radius: 999px; background: #fff; padding: 3px 6px; min-width: 0; }
        .weather-metric span { display: inline; font-size: 8px; color: #8a8380; text-transform: uppercase; font-weight: 800; letter-spacing: 0.03em; }
        .weather-metric strong { display: inline; font-size: 10px; color: #252120; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        /* 2026-07-28 weather enhancement: US AQI band tinting - matches the
           EPA's own color convention (green/yellow/orange/red/purple/maroon). */
        .weather-metric[data-aqi-level="good"] { border-color: #bfe6c9; background: #eafaf0; }
        .weather-metric[data-aqi-level="moderate"] { border-color: #f0e2a8; background: #fdf8e2; }
        .weather-metric[data-aqi-level="unhealthy-sensitive"] { border-color: #f3c99a; background: #fdf0e0; }
        .weather-metric[data-aqi-level="unhealthy"] { border-color: #f0b0ab; background: #fbe8e6; }
        .weather-metric[data-aqi-level="very-unhealthy"] { border-color: #d9b3e0; background: #f6e9f8; }
        .weather-metric[data-aqi-level="hazardous"] { border-color: #c79a9a; background: #f1e2e2; }
        /* Desktop/tablet weather strips should read as part of the whole card,
           while phones keep the compact sideways strip. */
        .weather-forecast-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 6px; width: 100%; overflow: visible; }
        .weather-forecast-day { min-width: 0; border: 1px solid #f0ebe7; border-radius: 8px; background: #fff; color: inherit; padding: 6px 4px; display: grid; gap: 1px; text-align: center; align-content: center; cursor: pointer; font: inherit; }
        .weather-forecast-day:hover { border-color: rgba(var(--app-primary-rgb), 0.24); background: rgba(var(--app-primary-rgb), 0.05); }
        .weather-forecast-day.typical { border-style: dashed; background: #faf7f4; }
        .weather-forecast-day.typical:hover { background: #f5efe8; }
        .weather-forecast-name { font-size: 9px; font-weight: 800; color: #524c48; }
        .weather-forecast-date { font-size: 8px; color: #a49d97; }
        .weather-forecast-icon { font-size: 14px; line-height: 1; }
        .weather-forecast-temp { font-size: 10px; font-weight: 800; color: #252120; }
        .weather-forecast-rain { font-size: 9px; color: #6b6460; }
        .weather-forecast-typical-tag { font-size: 8px; color: #8a8380; font-style: italic; }
        .weather-updated { margin: 0; font-size: 10px; color: #8a8380; }
        @media (max-width: 640px) {
            .weather-card-header { display: grid; }
            .weather-location-tabs { justify-content: flex-start; }
            .weather-current-row { align-items: flex-start; }
            .weather-metrics { flex: 1 1 150px; }
            .weather-forecast-strip { display: flex; gap: 4px; overflow-x: auto; }
            .weather-forecast-day { flex: 0 0 58px; min-width: 58px; padding: 5px 4px; gap: 0; }
        }

        .note-saved { color: #16a34a; font-size: 11px; opacity: 1; transition: opacity 0.6s ease; }
        .note-saved.fade { opacity: 0; }

        .od-section { margin-top: 10px; border-top: 1px solid #eae5e0; padding-top: 10px; }
        .od-section-title { font-size: 11px; font-weight: 600; color: #8a8380; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; display: flex; align-items: center; gap: 5px; }
        .od-note-area { width: 100%; min-height: 56px; border: 1px solid #eae5e0; border-radius: 10px; padding: 8px 12px; font-size: 12px; color: #3a3532; background: #fefcfa; resize: vertical; font-family: inherit; box-sizing: border-box; outline: none; }
        .od-note-area:focus { border-color: #002395; box-shadow: 0 0 0 2px rgba(0,35,149,0.1); }
        .od-note-area::placeholder { color: #d8d2cc; }
        .od-save-status { font-size: 10px; color: #16a34a; margin-top: 3px; min-height: 14px; transition: opacity 0.5s; }
        .od-file-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #f4f0ec; border-radius: 10px; margin-bottom: 5px; }
        .od-file-icon { font-size: 16px; flex-shrink: 0; }
        .od-file-name { font-size: 11px; font-weight: 600; color: #3a3532; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
        .od-file-desc { flex: 1; border: none; background: transparent; font-size: 11px; color: #6b6460; outline: none; min-width: 0; }
        .od-file-desc::placeholder { color: #d8d2cc; }
        .od-file-link { font-size: 10px; color: #002395; text-decoration: none; white-space: nowrap; }
        .od-file-del { background: none; border: none; cursor: pointer; font-size: 14px; color: #8a8380; padding: 0 2px; flex-shrink: 0; }
        .od-upload-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #002395; background: #e8ecf5; border: 1px dashed #002395; border-radius: 8px; padding: 5px 10px; cursor: pointer; margin-top: 4px; }
        .od-upload-btn:hover { background: #d0d8eb; }
        .od-link-item { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: #f4f0ec; border-radius: 8px; margin-bottom: 4px; }
        .od-link-text { flex: 1; font-size: 11px; color: #002395; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .od-link-del { background: none; border: none; cursor: pointer; font-size: 12px; color: #8a8380; padding: 0; }
        .od-add-link-row { display: flex; gap: 4px; margin-top: 4px; }
        .od-add-link-input { flex: 1; border: 1px solid #eae5e0; border-radius: 8px; padding: 5px 8px; font-size: 11px; outline: none; }
        .od-add-link-btn { background: #012169; color: white; border: none; border-radius: 8px; padding: 5px 10px; font-size: 11px; cursor: pointer; white-space: nowrap; }
        .od-uploading { font-size: 10px; color: #002395; margin-top: 3px; }

        .fp-tab { background: #f4f0ec; color: #6b6460; }
        .fp-tab.selected { background: var(--app-primary); color: white; }
        .fp-crumb { cursor: pointer; color: var(--app-primary-2); }

        .od-file-link,
        .od-link-text,
        .od-uploading,
        .ap-file-link,
        .ap-link-anchor,
        .search-result-location,
        .packing-quantity-badge,
        .packing-ai-status {
            color: var(--app-primary-2);
        }
        .od-upload-btn,
        #ap-linked-badges .linked-badge-inner,
        .traveller-chip,
        .packing-ai-suggest-btn {
            color: var(--app-primary-2);
            background: rgba(var(--app-primary-2-rgb), 0.10);
        }
        .od-upload-btn {
            border-color: var(--app-primary-2);
        }
        .od-add-link-btn,
        .journal-day-count,
        .journal-day-note-add,
        #ap-save-btn,
        .sp-promote-plan-btn,
        .sp-add-item button,
        .ai-chat-bubble-user,
        #packing-ai-add-selected,
        .packing-inline-transfer-confirm,
        .trip-health-fix-btn {
            background: var(--app-primary) !important;
        }
        #about-install-btn,
        #about-open-settings-btn,
        #about-access-add-btn,
        #debug-time-set-btn,
        #debug-loc-set-btn,
        #admin-ceilings-save-btn,
        #od-retry-btn,
        #od-sync-now-btn,
        #quick-expense-save {
            background: var(--app-primary-2) !important;
        }
        #about-manage-sync-btn,
        #about-notif-toggle-btn,
        #about-geo-toggle-btn,
        #about-flight-toggle-btn,
        #about-audit-load-btn,
        #debug-master-toggle-btn {
            color: var(--app-primary-2) !important;
        }
        input[type="checkbox"] {
            accent-color: var(--app-primary);
        }
        .fp-crumb:not(:last-child)::after { content: ' / '; color: #8a8380; }
        .fp-crumb:last-child { color: #3a3532; font-weight: 600; cursor: default; }
        .fp-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13px; color: #3a3532; }
        .fp-item:hover { background: #f4f0ec; }
        .fp-item.selected { background: #e8ecf5; }
        .fp-empty { font-size: 12px; color: #8a8380; text-align: center; padding: 24px 8px; }

        .reorder-tab-row { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #f4f0ec; border-radius: 10px; touch-action: none; }
        .reorder-tab-row.dragging { opacity: 0.6; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
        .reorder-drag-handle { cursor: grab; color: #8a8380; font-size: 16px; touch-action: none; user-select: none; }
        .reorder-arrow-btn { background: none; border: none; cursor: pointer; padding: 4px; color: #524c48; }
        .reorder-arrow-btn:disabled { opacity: 0.3; cursor: default; }

        .tl-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f4f0ec; cursor: pointer; border-radius: 8px; transition: background 0.15s; }
        .tl-row:last-child { border-bottom: none; }
        .tl-row:hover { background: #f4f0ec; margin: 0 -6px; padding-left: 6px; padding-right: 6px; }
        .tl-row[data-done="true"] { opacity: 0.68; }
        .tl-row[data-done="true"] .tl-desc { text-decoration: line-through; color: #8a8380; }
        .journey-restore-flash { outline: 2px solid rgba(0, 35, 149, 0.62); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(0, 35, 149, 0.12); }
        .tl-done-toggle { flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border-radius: 999px; border: 1px solid #d8d2cc; background: #fff; color: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
        .tl-done-toggle:hover { border-color: #012169; }
        .tl-done-toggle.done { background: #16a34a; border-color: #16a34a; color: #fff; }
        .tl-time { font-size: 11px; font-weight: 700; color: #8a8380; width: 92px; flex-shrink: 0; padding-top: 2px; letter-spacing: 0.03em; white-space: nowrap; }
        .tl-time.tl-time-range { width: 92px; }
        .tl-desc { flex: 1; font-size: 13px; color: #3a3532; line-height: 1.45; }
        .tl-desc.highlight { font-weight: 600; color: #252120; }
        .tl-icons { display: flex; gap: 3px; flex-shrink: 0; padding-top: 2px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
        .tl-icon { font-size: 11px; opacity: 0.3; filter: grayscale(1); transition: opacity 0.15s, filter 0.15s; }
        .tl-icon.active { opacity: 1; filter: none; }
        .tl-count-badge { display:inline-flex; align-items:center; gap:3px; height:18px; min-width:22px; padding:0 5px; border-radius:999px; background:#e8ecf5; color:#012169; border:1px solid rgba(1,33,105,0.12); font-size:10px; font-weight:800; line-height:1; }
        .journey-counts-toggle { display:inline-flex; align-items:center; gap:5px; min-height:32px; padding:6px 10px; border-radius:8px; background:#f4f0ec; color:#524c48; font-size:12px; font-weight:700; cursor:pointer; user-select:none; }
        .journey-counts-toggle input { width:14px; height:14px; margin:0; accent-color:#012169; }
        .tl-travel-connector { display: flex; align-items: center; justify-content: flex-start; gap: 6px; padding: 0 10px 0 124px; margin: -3px 0 1px; min-height: 24px; }
        .tl-travel-connector-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; max-width: 100%; border: 1px solid #e3ded8; border-radius: 999px; background: #faf7f4; color: #6b6460; padding: 2px 8px; cursor: pointer; }
        .tl-travel-connector-btn:hover { border-color: #cfc6bd; background: #f4f0ec; color: #3a3532; }
        .tl-travel-connector-text { font-size: 10px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; }
        .tl-travel-connector-pin { font-size: 10px; line-height: 1; }
        .tl-travel-connector-more { font-size: 9px; font-weight: 800; color: #8a8380; text-transform: uppercase; letter-spacing: 0.04em; }
        .tl-travel-connector-link { font-size: 12px; text-decoration: none; opacity: 0.6; transition: opacity 0.15s; flex-shrink: 0; }
        .tl-travel-connector-link:hover { opacity: 1; }
        .timeline-travel-connector { position: absolute; left: 8px; right: 8px; z-index: 4; transform: translateY(-50%); padding: 0; margin: 0; min-height: 0; justify-content: center; pointer-events: none; }
        .timeline-travel-connector .tl-travel-connector-btn, .timeline-travel-connector .tl-travel-connector-link { pointer-events: auto; }
        .timeline-travel-connector .tl-travel-connector-btn { box-shadow: 0 1px 4px rgba(0,0,0,0.12); }
        .timeline-travel-connector-tight { z-index: 6; }
        .timeline-travel-connector-tight .tl-travel-connector-btn { min-height: 18px; padding: 1px 6px; gap: 4px; background: rgba(250,247,244,0.96); }
        .timeline-travel-connector-tight .tl-travel-connector-text { font-size: 9px; }
        .timeline-travel-connector-tight .tl-travel-connector-more { display: none; }
        .timeline-travel-connector-tight .tl-travel-connector-link { font-size: 10px; }
        .tl-travel-details-popover { position: fixed; z-index: 9500; width: min(320px, calc(100vw - 24px)); border: 1px solid #ded8d2; border-radius: 10px; background: #fff; box-shadow: 0 14px 34px rgba(0,0,0,0.16); padding: 12px; color: #252120; }
        .tl-travel-details-close { position: absolute; top: 6px; right: 7px; width: 24px; height: 24px; border: 0; border-radius: 999px; background: #f4f0ec; color: #6b6460; cursor: pointer; font-size: 16px; line-height: 1; }
        .tl-travel-details-title { padding-right: 28px; font-size: 13px; font-weight: 800; margin-bottom: 9px; }
        .tl-travel-details-grid { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 6px 10px; font-size: 12px; line-height: 1.3; }
        .tl-travel-details-grid span { color: #8a8380; font-weight: 700; }
        .tl-travel-details-grid strong { min-width: 0; overflow-wrap: anywhere; font-weight: 700; color: #3a3532; }
        .tl-travel-details-note { margin: 10px 0 0; font-size: 11px; line-height: 1.4; color: #6b6460; }
        .tl-travel-details-link { display: inline-flex; margin-top: 10px; font-size: 12px; font-weight: 800; color: var(--app-primary); text-decoration: none; }
        .tl-travel-details-refresh-btn { display: block; width: 100%; margin-top: 10px; padding: 8px 10px; border: 1px solid #d8d2cc; border-radius: 8px; background: #f8f6f3; color: var(--app-primary); font-size: 11px; font-weight: 800; cursor: pointer; }
        .tl-travel-details-refresh-btn:hover { background: #eee9e3; }
        .tl-travel-details-hide-btn { display: block; width: 100%; margin-top: 10px; padding-top: 10px; border: none; border-top: 1px solid #eae5e0; background: none; font-size: 11px; font-weight: 700; color: #8a8380; text-align: left; cursor: pointer; }
        .tl-travel-details-hide-btn:hover { color: #dc2626; }
        .rich-note-editor { border: 1px solid #eae5e0; border-radius: 12px; overflow: hidden; background: #faf7f4; }
        /* Compact redesign (2026-07-19, per Pierre - "buttons seem too big"):
           icon buttons shrink to near-square pills instead of loosely-padded
           rectangles, and the Color/Font/Size dropdowns lose their spelled-out
           placeholder labels (the real source of the toolbar wrapping to two
           rows in a narrow activity panel) in favor of compact glyphs. */
        .rich-note-toolbar { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 5px 6px; border-bottom: 1px solid #eae5e0; background: #f4f0ec; scrollbar-width: thin; }
        .rich-note-toolbar button { min-width: 30px; height: 30px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d8d2cc; border-radius: 7px; background: #fff; color: #3a3532; font: 700 13px/1 inherit; padding: 0 7px; cursor: pointer; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
        .rich-note-toolbar select { height: 30px; flex: 0 0 auto; border: 1px solid #d8d2cc; border-radius: 7px; background: #fff; color: #3a3532; font: 600 13px/1 inherit; padding: 0 4px; cursor: pointer; max-width: 72px; touch-action: manipulation; }
        .rich-note-toolbar button:hover, .rich-note-toolbar select:hover { border-color: var(--app-primary); color: var(--app-primary); }
        /* Inline by default (2026-07-20, per the user - full-screen-by-
           default wasn't wanted, still want to see the note in the small
           editor in activity details): a bounded, independently-scrolling
           box. #note-editor.note-editor--expanded (set by
           toggleNoteEditorExpand() when the same node is reparented into
           #note-editor-fullscreen-mount) switches it to fill the available
           height instead. */
        #ap-note-area { color: #3a3532; font-size: 14px; line-height: 1.5; outline: none; padding: 10px 12px; min-height: 110px; max-height: 260px; overflow-y: auto; }
        #note-editor.note-editor--expanded { position: fixed; inset: 0; display: flex; flex-direction: column; border-radius: 0; border: none; }
        #note-editor.note-editor--expanded > div { flex: 1; min-height: 0; }
        #note-editor.note-editor--expanded #ap-note-area { flex: 1; max-height: none; }
        #note-fs-expand-btn.active { background: #012169; color: #fff; border-color: #012169; }
        #ap-note-area:empty::before { content: attr(data-placeholder); color: #9b9490; pointer-events: none; }
        #ap-note-area p, #ap-note-area h2, #ap-note-area h3 { margin: 0 0 7px; }
        #ap-note-area ul, #ap-note-area ol { margin: 0 0 7px 20px; padding: 0; }
        #ap-note-area a, .quick-note-body a { color: var(--app-primary); text-decoration: underline; }
        .quick-note-body p, .quick-note-body h2, .quick-note-body h3 { margin: 0 0 8px; }
        .quick-note-body ul, .quick-note-body ol { margin: 0 0 8px 20px; padding: 0; }
        .tl-segment { margin: 12px 0 6px; border: 1px solid #eee7df; border-radius: 10px; overflow: hidden; background: #fff; }
        .tl-segment.flat { margin-top: 0; border: none; border-radius: 0; background: transparent; }
        .tl-segment:first-child { margin-top: 2px; }
        .tl-segment-header { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; background: #f4f0ec; border: 0; border-bottom: 1px solid #eee7df; text-align: left; flex-wrap: wrap; }
        .tl-segment-main { flex: 1; min-width: 110px; display: flex; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
        .tl-segment-title { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 11px; font-weight: 800; color: #252120; text-transform: uppercase; letter-spacing: 0.04em; }
        .tl-segment-title span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .tl-segment-meta { display: flex; align-items: center; gap: 6px; flex-shrink: 0; color: #6b6460; }
        .tl-segment-time { flex-shrink: 0; font-size: 10px; font-weight: 800; color: #6b6460; font-family: 'Courier New', monospace; }
        .tl-segment-export-actions { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
        .tl-segment-recalculate-btn { border: 1px solid rgba(82,76,72,0.18); border-radius: 5px; background: rgba(255,255,255,0.7); color: #6b6460; cursor: pointer; font-size: 13px; font-weight: 800; line-height: 1; padding: 3px 5px; }
        .tl-segment-recalculate-btn:hover { border-color: var(--app-primary); background: #fff; color: var(--app-primary); }
        .tl-segment-export-btn { border: 1px solid rgba(82,76,72,0.18); border-radius: 5px; background: rgba(255,255,255,0.7); color: #6b6460; cursor: pointer; font-size: 9px; font-weight: 800; line-height: 1; padding: 4px 5px; }
        .tl-segment-export-btn:hover { border-color: var(--app-primary); background: #fff; color: var(--app-primary); }
        .tl-segment-weather-btn, .tl-segment-chevron { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid rgba(82,76,72,0.12); border-radius: 999px; background: rgba(255,255,255,0.62); color: #524c48; cursor: pointer; }
        .tl-segment-weather-btn:hover, .tl-segment-chevron:hover { background: #fff; color: var(--app-primary); }
        .tl-segment-body { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease; }
        .tl-segment-body.open { max-height: 3000px; opacity: 1; }
        .tl-segment-items { padding: 0 10px; }
        .tl-segment-empty { padding: 9px 10px; font-size: 11px; color: #8a8380; }
        .segment-weather-body { display: grid; gap: 10px; }
        .segment-weather-source { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #eae5e0; border-radius: 12px; background: #fff; padding: 10px 12px; font-size: 12px; color: #6b6460; }
        .segment-weather-source button { border: 1px solid #d8d2cc; border-radius: 8px; background: #fff; color: var(--app-primary); padding: 5px 9px; font-size: 12px; font-weight: 700; cursor: pointer; }
        .segment-weather-loading { border: 1px solid #eae5e0; border-radius: 12px; background: #fff; padding: 14px; font-size: 12px; color: #8a8380; }
        .segment-weather-days { display: grid; gap: 8px; }
        .segment-weather-day { border: 1px solid #eae5e0; border-radius: 12px; background: #fff; padding: 11px; display: grid; gap: 8px; }
        .segment-weather-day > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
        .segment-weather-day strong { font-size: 13px; color: #252120; }
        .segment-weather-day span { font-size: 11px; color: #6b6460; }
        .segment-weather-forecast { display: flex; align-items: center; gap: 10px; }
        .segment-weather-icon { font-size: 24px !important; line-height: 1; flex-shrink: 0; color: inherit !important; }
        .segment-weather-forecast b { display: block; font-size: 13px; color: #252120; }
        .segment-weather-forecast small { display: block; margin-top: 1px; font-size: 11px; color: #6b6460; }
        .segment-weather-unavailable { margin: 0; font-size: 12px; color: #8a8380; }
        /* 2026-07-28 weather enhancement */
        .segment-weather-day.typical { border-style: dashed; background: #faf7f4; }
        .segment-weather-typical-badge { display: inline-block; margin-left: 8px; border: 1px dashed #d8d2cc; border-radius: 999px; font-size: 10px; color: #8a8380; padding: 2px 7px; white-space: nowrap; }
        .segment-weather-aqi-badge { display: inline-block; margin-top: 3px; border-radius: 999px; font-size: 10px; font-weight: 700; padding: 2px 7px; }
        .segment-weather-aqi-badge[data-aqi-level="good"] { color: #1a7a3d; background: #eafaf0; }
        .segment-weather-aqi-badge[data-aqi-level="moderate"] { color: #8a6d1d; background: #fdf8e2; }
        .segment-weather-aqi-badge[data-aqi-level="unhealthy-sensitive"] { color: #a15b1f; background: #fdf0e0; }
        .segment-weather-aqi-badge[data-aqi-level="unhealthy"] { color: #b42318; background: #fbe8e6; }
        .segment-weather-aqi-badge[data-aqi-level="very-unhealthy"] { color: #7a2e8a; background: #f6e9f8; }
        .segment-weather-aqi-badge[data-aqi-level="hazardous"] { color: #6b1414; background: #f1e2e2; }
        .segment-weather-moon { display: inline-block; margin-top: 3px; margin-left: 6px; font-size: 11px; color: #6b6460; }
        .segment-weather-hourly-toggle { margin-top: 2px; border: 1px solid #d8d2cc; border-radius: 8px; background: #fff; color: var(--app-primary); padding: 4px 9px; font-size: 11px; font-weight: 700; cursor: pointer; align-self: start; }
        .segment-weather-hourly { display: flex; gap: 6px; overflow-x: auto; padding-top: 4px; }
        .segment-weather-hour { flex: 0 0 auto; min-width: 48px; border: 1px solid #f0ebe7; border-radius: 8px; background: #fff; padding: 5px 4px; display: grid; gap: 1px; text-align: center; }
        .segment-weather-hour span:first-child { font-size: 9px; font-weight: 700; color: #524c48; }
        .segment-weather-hour span:nth-child(2) { font-size: 13px; line-height: 1; }
        .segment-weather-hour span:nth-child(3) { font-size: 10px; font-weight: 800; color: #252120; }
        .segment-weather-hour span:last-child { font-size: 9px; color: #6b6460; }
        .chip-segment-jump { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; padding: 10px 12px; border: 1px solid #ded8d2; border-radius: 10px; background: #eeeae5; color: #5f5853; cursor: pointer; text-align: left; }
        .chip-segment-jump:hover { background: #e5dfd8; border-color: #cfc6bd; }
        .chip-segment-jump-main { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
        .chip-segment-jump-main span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .chip-segment-jump-time { flex-shrink: 0; font-size: 10px; font-weight: 800; font-family: 'Courier New', monospace; color: #6b6460; }
        .overview-segment-list { display: grid; gap: 2px; margin-top: 5px; }
        .overview-segment-line { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 10px; color: #6b6460; line-height: 1.25; }
        .overview-segment-dot { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
        .overview-segment-time { flex-shrink: 0; font-family: 'Courier New', monospace; font-weight: 800; color: #524c48; }
        .overview-segment-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .timeline-day-card { background:#fff; border:1px solid #eae5e0; border-radius:14px; overflow:hidden; margin-bottom:12px; box-shadow:0 1px 4px rgba(0,0,0,0.06); }
        .timeline-day-toggle { width:100%; border:0; background:#f4f0ec; padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; text-align:left; color:#252120; font-size:13px; }
        .timeline-day-body { display:grid; grid-template-columns:48px minmax(0,1fr); gap:10px; padding:12px; }
        /* Labels are now absolutely positioned by % (see timelineScaleLabelsHtml()
           in scripts/07-main-app.js) since they mark real hour lines, which
           don't necessarily reach 0%/100% evenly - plain flex space-between
           would misalign a label's text against its actual time position. */
        .timeline-scale { position:relative; height:640px; color:#8a8380; font-size:10px; font-family:'Courier New', monospace; font-weight:800; padding:2px 0; }
        /* BUG FOUND 2026-07-26 (independent review): every hour label was
           TOP-anchored at its own time's %, while everything it has to line up
           against - .timeline-activity below, and the track's hour stripes -
           is CENTER-anchored (translateY(-50%)). So each label's text sat
           ~5.5px BELOW the hour line it names, on every day, in both modes.
           Measured before/after against the real rules: 5.50px -> 0.01px. */
        .timeline-scale span { transform:translateY(-50%); }
        /* BUG FOUND 2026-07-26 (independent review): this used to say
           `min-height:640px`, which silently overrode the per-day pixel height
           renderJourneyTimeline() sets inline on BOTH this track and its
           .timeline-scale ruler. In Compact mode estimateTimelineDayHeight()
           deliberately caps at MAX_PX_PER_MIN (2.1px/min), so any day whose
           visible span is under ~5h05m (640/2.1 = 304.8 min) computes a height
           BELOW 640 - the ruler honoured it, this track did not, and the two
           columns rendered at different heights. Since segment blocks and
           activity cards are positioned in % OF THIS TRACK, every card then
           landed at the wrong time: measured on a 09:00-12:15 day, the 10:00
           activity rendered at y=214px while its own 10:00 hour label sat at
           y=132px - most of an hour out, in the default-on view. The inline
           height is always set by the renderer, so there is nothing left for a
           floor to protect; estimateTimelineDayHeight()'s own BASE_HEIGHT=640
           is the intended floor and it already applies wherever it should. */
        .timeline-track { --timeline-hour-height:26.67px; position:relative; min-height:0; border-left:1px solid #e0d8cf; background:repeating-linear-gradient(to bottom,#fff 0,#fff calc(var(--timeline-hour-height) - 1px),#faf7f4 var(--timeline-hour-height)); border-radius:10px; overflow:hidden; }
        .timeline-segment-block { position:absolute; left:8px; right:8px; border-left:5px solid #8a8380; border-radius:10px; background:rgba(244,240,236,0.92); box-shadow:0 1px 5px rgba(0,0,0,0.08); overflow:hidden; min-height:48px; }
        .timeline-segment-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 8px; background:rgba(255,255,255,0.72); color:#252120; font-size:10px; text-transform:uppercase; letter-spacing:0.04em; }
        .timeline-segment-head span { flex-shrink:0; font-family:'Courier New', monospace; font-weight:800; color:#6b6460; }
        .timeline-segment-head strong { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .timeline-add-btn { display:inline-flex; align-items:center; justify-content:center; width:20px; height:18px; flex-shrink:0; border:1px solid rgba(1,33,105,0.18); border-radius:999px; background:#eef1fb; color:#012169; cursor:pointer; padding:0; box-shadow:0 1px 2px rgba(0,0,0,0.05); }
        .timeline-add-btn:hover { border-color:#012169; background:#dce3fa; }
        .timeline-segment-head .timeline-segment-plan-btn { width:auto; min-height:20px; flex-shrink:0; gap:5px; border-radius:999px; padding:3px 7px; font-size:9px; }
        .timeline-segment-head .timeline-segment-plan-btn .tl-plan-count { padding:2px 5px; font-size:8px; }
        /* NOTE (2026-07-26): this box's height is NOT the basis for placing
           the activity cards inside it any more, and must not be used as one
           again. It used to be: cards were laid out as a % of this element,
           whose height is the segment's box MINUS the ~28px header - so a
           segment's whole time span got squeezed into a box shorter than the
           span it represents, and every card sat too low by 28*(1-pct)
           (measured +17.4px near a segment's top decaying to +4.4px near its
           bottom; near an hour of visual error in Full-day mode). Cards are
           now positioned in px against the day TRACK's single time scale, the
           same one the hour ruler uses - see the block comment above
           positionSegmentItems() in scripts/07-main-app.js. This element just
           needs to be a positioned ancestor that starts below the header;
           its exact height is only a paint box. */
        .timeline-segment-items { position:relative; height:calc(100% - 28px); min-height:24px; }
        .timeline-activity { position:absolute; left:8px; right:8px; transform:translateY(-50%); display:flex; align-items:flex-start; gap:7px; border:1px solid rgba(216,210,204,0.9); border-radius:8px; background:#fff; padding:5px 7px; color:#3a3532; text-align:left; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
        .timeline-activity[data-done="true"] { opacity: 0.68; }
        .timeline-activity[data-done="true"] .timeline-activity-text { text-decoration: line-through; color: #8a8380; }
        .timeline-activity-done { width: 18px; height: 18px; margin-top: 0; }
        .timeline-activity-time { width:38px; flex-shrink:0; font-size:10px; font-family:'Courier New', monospace; font-weight:800; color:#6b6460; }
        .timeline-activity-text { min-width:0; font-size:11px; line-height:1.25; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
        .timeline-activity-counts { margin-left:auto; display:flex; align-items:center; justify-content:flex-end; gap:3px; flex-wrap:wrap; flex-shrink:0; }
        .timeline-activity-counts .tl-icon { flex:0 0 auto; }
        .tl-icon.timeline-note-btn { border:0; background:transparent; box-shadow:none; width:auto; height:auto; padding:0; margin:0; color:inherit; }
        .timeline-note-btn { display:inline-flex; align-items:center; justify-content:center; width:20px; height:18px; border:1px solid rgba(1,33,105,0.14); border-radius:999px; background:#fff8dc; color:#7c5200; font-size:11px; line-height:1; cursor:pointer; padding:0; box-shadow:0 1px 2px rgba(0,0,0,0.05); }
        .timeline-note-btn:hover { border-color:#d4a017; background:#fff2b8; }
        .timeline-activity-block { min-height:28px; }
        .timeline-activity-block .timeline-activity-text { -webkit-line-clamp:6; }
        /* Concurrent items sharing a segment row get squeezed columns (see
           assignTimelineColumns() in 07-main-app.js). Keep checkbox/time on
           a compact first row, then give the title a full-width row so real
           duration activities do not look like blank cards. */
        .timeline-activity[data-col-count]:not([data-col-count="1"]) { display:grid; grid-template-columns:16px minmax(0,1fr); align-items:start; gap:2px 5px; padding:4px 5px; min-height:42px; }
        .timeline-activity[data-col-count]:not([data-col-count="1"]) .timeline-activity-done { width: 16px; height: 16px; }
        .timeline-activity[data-col-count]:not([data-col-count="1"]) .timeline-activity-time { width:auto; }
        .timeline-activity[data-col-count]:not([data-col-count="1"]) .timeline-activity-text { grid-column:1 / -1; }
        .timeline-empty { padding:8px; font-size:10px; color:#8a8380; }
        .quick-note-popover { position:fixed; inset:0; z-index:10040; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(37,33,32,0.24); }
        /* Resizable (2026-07-20, per the user) - a flex column with an
           explicit starting height (not just max-height) so the native CSS
           resize handle has a real box to grow/shrink from; .quick-note-body
           below switches from a fixed max-height to flex:1 so dragging the
           card taller actually gives the note content more visible room
           instead of leaving it capped at the old 340px. */
        .quick-note-card { display:flex; flex-direction:column; width:min(360px, calc(100vw - 48px)); height:min(420px, calc(100vh - 80px)); min-width:280px; min-height:200px; max-width:calc(100vw - 48px); max-height:calc(100vh - 48px); overflow:hidden; border-radius:14px; background:#fff; border:1px solid #eae5e0; box-shadow:0 18px 55px rgba(37,33,32,0.28); resize:both; }
        .quick-note-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid #f4f0ec; color:#252120; font-size:13px; flex-shrink:0; }
        .quick-note-head button { border:0; background:transparent; color:#8a8380; cursor:pointer; font-size:18px; line-height:1; padding:2px 4px; }
        .quick-note-body { padding:14px; color:#3a3532; font-size:13px; line-height:1.45; white-space:pre-wrap; overflow:auto; flex:1; min-height:0; }
        .timeline-booking-action-card { height:auto; min-height:0; resize:none; }

        .ap-file-row { display:flex;align-items:center;gap:8px;padding:6px 10px;background:#f4f0ec;border-radius:10px;margin-bottom:5px; }
        .ap-linked-file-row { background:#eef3ff; border:1px solid rgba(0,35,149,0.08); }
        .ap-file-name { font-size:11px;font-weight:600;color:#3a3532;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px; }
        .ap-linked-file-icon { flex:0 0 auto; font-size:15px; }
        .ap-linked-file-main { display:flex;flex-direction:column;gap:2px;min-width:0;flex:1; }
        .ap-linked-file-title { display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700;color:#252120; }
        .ap-linked-file-source { display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#164f8f; }
        .ap-file-desc-inp { flex:1;border:none;background:transparent;font-size:11px;color:#6b6460;outline:none;min-width:0; }
        .ap-file-link { font-size:10px;color:#002395;text-decoration:none;white-space:nowrap; }
        .ap-file-del { background:none;border:none;cursor:pointer;font-size:13px;color:#8a8380;padding:0 2px; }
        .ap-link-row { display:flex;align-items:center;gap:6px;padding:5px 8px;background:#f4f0ec;border-radius:8px;margin-bottom:4px; }
        .ap-link-anchor { flex:1;font-size:12px;color:#002395;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
        .ap-link-del { background:none;border:none;cursor:pointer;font-size:12px;color:#8a8380;padding:0; }
        .ap-journal-entry { position:relative;background:#f4f0ec;border-radius:10px;padding:8px 10px;margin-bottom:6px; }
        .ap-journal-entry-head { display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;font-weight:700;color:#8a8380;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:4px; }
        .ap-journal-entry-text { font-size:13px;line-height:1.45;color:#3a3532;white-space:pre-wrap;padding-right:48px; }
        .ap-journal-del { position:absolute;right:8px;bottom:7px;background:none;border:none;color:#8a8380;font-size:11px;font-weight:700;cursor:pointer;padding:0; }
        .ap-journal-del:hover { color:#b91c1c; }
        .ap-journal-section { margin: 14px 20px 0; }
        .ap-journal-section[open] .ap-section-summary { border-color: #d8d2cc; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
        .ap-journal-section #ap-journal-list { margin-top: 8px; }
        .journal-summary-card { display:flex;align-items:baseline;gap:8px;background:#fff;border:1px solid #eae5e0;border-radius:12px;padding:12px 14px;color:#524c48; }
        .journal-summary-card strong { font-size:22px;color:#252120;line-height:1; }
        .journal-summary-card span { font-size:12px;font-weight:700;color:#8a8380; }
        .journal-day-card { background:#fff;border:1px solid #eae5e0;border-radius:14px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,0.05); }
        .journal-day-empty { opacity:0.88; }
        .journal-day-head { display:flex;align-items:center;justify-content:space-between;gap:12px;background:#f4f0ec;padding:12px 14px;border-bottom:1px solid #eae5e0; }
        .journal-day-title { font-size:14px;font-weight:800;color:#252120; }
        .journal-day-meta { font-size:11px;color:#6b6460;margin-top:2px; }
        .journal-day-count { min-width:28px;height:28px;border-radius:999px;background:#012169;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800; }
        .journal-day-note-box { padding:12px 14px;border-bottom:1px solid #f4f0ec; }
        .journal-day-note-input { width:100%;box-sizing:border-box;border:1px solid #eae5e0;border-radius:10px;padding:9px 12px;background:#faf7f4;color:#3a3532;font-size:13px;font-family:inherit;resize:vertical;outline:none; }
        .journal-day-note-actions { display:flex;align-items:center;gap:8px;margin-top:8px; }
        .journal-day-note-add { background:#012169;color:white;border:none;border-radius:8px;padding:7px 11px;font-size:12px;font-weight:700;cursor:pointer; }
        .journal-day-note-status { font-size:11px;color:#8a8380; }
        .journal-day-notes, .journal-activity-block { padding:0 14px; }
        .journal-activity-block { border-top:1px solid #f4f0ec;padding-top:10px;padding-bottom:8px; }
        .journal-activity-jump { width:100%;display:flex;align-items:center;gap:8px;border:0;background:transparent;color:#252120;text-align:left;padding:0 0 8px;cursor:pointer; }
        .journal-activity-jump span { width:42px;flex-shrink:0;font-size:11px;font-family:'Courier New', monospace;font-weight:800;color:#8a8380; }
        .journal-activity-jump strong { min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
        .journal-entry { position:relative;background:#faf7f4;border:1px solid #eee7df;border-radius:10px;padding:9px 10px;margin:0 0 8px; }
        .journal-entry-head { display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;font-weight:800;color:#8a8380;text-transform:uppercase;letter-spacing:0.04em;margin-bottom:5px; }
        .journal-entry-text { font-size:13px;line-height:1.45;color:#3a3532;white-space:pre-wrap;padding-right:48px; }
        .journal-entry-del { position:absolute;right:9px;bottom:8px;background:none;border:none;color:#8a8380;font-size:11px;font-weight:700;cursor:pointer;padding:0; }
        .journal-entry-del:hover { color:#b91c1c; }
        .journal-photo-label { display:inline-flex;align-items:center;gap:5px;font-size:11px;color:#524c48;background:#f4f0ec;border:1px dashed #b8b0a8;border-radius:8px;padding:6px 10px;cursor:pointer;flex-shrink:0; }
        .journal-voice-btn { display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0;background:#f4f0ec;border:1px solid #eae5e0;border-radius:8px;color:#524c48;cursor:pointer;padding:0; }
        .journal-voice-btn:hover { background:#eae5e0; }
        .journal-voice-btn:disabled { opacity:0.5;cursor:default; }
        .journal-voice-btn.voice-recording { background:#dc2626;border-color:#dc2626;color:#fff;animation:pulse-alert 1.4s ease-in-out infinite; }
        .journal-day-note-status.voice-active { color:#dc2626;font-weight:700; }
        .journal-entry-photos, .ap-journal-entry .journal-entry-photos { display:flex;flex-wrap:wrap;gap:6px;margin-top:8px; }
        .journal-photo-thumb-wrap { position:relative;width:64px;height:64px;flex-shrink:0; }
        .journal-photo-thumb { width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid #eae5e0;display:block; }
        .journal-photo-del { position:absolute;top:-6px;right:-6px;width:18px;height:18px;line-height:16px;text-align:center;border-radius:50%;background:#fff;border:1px solid #d8d2cc;color:#8a8380;font-size:13px;font-weight:700;cursor:pointer;padding:0; }
        .journal-photo-del:hover { color:#b91c1c;border-color:#b91c1c; }
        #activity-panel { transition: transform 0.32s cubic-bezier(0.4,0,0.2,1); }

        /* FIX 2: Clocks row at bottom of banner */
        .banner-clocks-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 8px 0 7px; }
        .clock-pill { display: flex; align-items: center; gap: 7px; background: rgba(0,0,0,0.34); border-radius: 10px; padding: 7px 12px; min-height: 32px; }
        .clock-pill .cp-city { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.82); white-space: nowrap; }
        .clock-pill .cp-time { font-size: 15px; font-weight: 800; color: #fff; font-family: 'Courier New', monospace; letter-spacing: 0.03em; line-height: 1; }
        @media (max-width: 640px) {
            .banner-clocks-row {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 6px;
                padding: 7px 0 8px;
            }
            .clock-pill {
                justify-content: center;
                gap: 4px;
                min-width: 0;
                padding: 6px 4px;
            }
            .clock-pill .cp-city { font-size: 9px; }
            .clock-pill .cp-time { font-size: 13px; letter-spacing: 0.01em; }
        }

        #ap-name-input { width: 100%; min-height: 64px; border: 1px solid #eae5e0; background: #fff; font-size: 15px; font-weight: 700; color: #252120; line-height: 1.35; padding: 8px 10px; border-radius: 10px; font-family: inherit; outline: none; box-sizing: border-box; resize: vertical; overflow-wrap: anywhere; }
        #ap-name-input:focus { border-color: #002395; background: #faf7f4; }
        #ap-time-input { border: 1px solid #eae5e0; background: #fff; font-size: 11px; font-weight: 800; color: #524c48; text-transform: uppercase; letter-spacing: 0.08em; padding: 5px 7px; border-radius: 8px; font-family: inherit; outline: none; width: 100px; }
        #ap-time-input:focus { border-color: #002395; background: #faf7f4; }
        #ap-end-time-input { border: 1px solid #eae5e0; background: #fff; font-size: 11px; font-weight: 800; color: #524c48; text-transform: uppercase; letter-spacing: 0.08em; padding: 5px 7px; border-radius: 8px; font-family: inherit; outline: none; width: 100px; }
        #ap-end-time-input:focus { border-color: #002395; background: #faf7f4; }
        .military-time-input { font-family: 'Courier New', monospace !important; letter-spacing: 0.03em; }
        .military-time-input.time-invalid { border-color: #dc2626 !important; background: #fff7f7 !important; color: #991b1b !important; }
        .ap-action-row { margin-top: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
        .ap-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 38px; box-sizing: border-box; padding: 8px 12px; border-radius: 10px; font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; }
        .ap-btn-primary { border: 1px solid var(--app-primary); background: var(--app-primary); color: #fff; }
        .ap-btn-primary:hover { filter: brightness(0.94); }
        .ap-btn-secondary { border: 1px solid #d8d2cc; background: #fff; color: var(--app-primary); }
        .ap-btn-secondary:hover { background: #f4f0ec; }
        .ap-btn-danger { border: 1px solid #fecaca; background: #fee2e2; color: #dc2626; }
        .ap-btn-danger:hover { background: #fecaca; }
        .ap-btn-soft { border: 1px solid #cfe0fb; background: #e8f0fe; color: #1a5cc8; }
        .ap-btn-soft:hover { background: #dbe8fc; }
        .booking-section-toggle { flex: 1 1 auto; width: 100%; min-height: 32px; justify-content: flex-start; text-align: left; }
        #ap-delete-btn { display: none; }
        #ap-save-status { font-size: 11px; color: #16a34a; display: inline; transition: opacity 0.5s; }
        .ap-status-section { padding: 14px 20px 0; }
        .ap-done-row { gap: 8px; color: #524c48; font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.2; }
        .ap-done-row input { width: 16px; height: 16px; accent-color: #16a34a; }
        .ap-done-row span { display: inline-flex; align-items: center; gap: 6px; }
        .addr-autocomplete-compact { display:inline-flex; align-items:center; border:1px solid #d8d2cc; border-radius:999px; background:#fff; color:#012169; padding:3px 8px; font:600 10px/1.2 inherit; cursor:pointer; }

        .ap-section-summary { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none; border: 1px solid #eae5e0; border-radius: 12px; background: #fefcfa; padding: 9px 12px; font-size: 11px; font-weight: 800; color: #8a8380; text-transform: uppercase; letter-spacing: 0.05em; }
        .ap-section-summary::-webkit-details-marker { display: none; }
        .ap-section-summary span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
        .ap-section-summary strong { color: #252120; font-size: 12px; font-weight: 800; text-transform: none; letter-spacing: 0; white-space: nowrap; }
        .ap-link-booking-section { margin-top: 14px; position: relative; }
        .ap-link-booking-section[open] .ap-section-summary { border-color: #d8d2cc; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
        .ap-link-dropdown { max-height: 230px; overflow-y: auto; border: 1px solid #d8d2cc; border-radius: 10px; padding: 4px; background: #fff; margin-top: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.10); }
        .ap-link-check-row:hover { background: #f4f0ec; }
        #ap-linked-badges .linked-badge-inner { display: inline-flex; align-items: center; gap: 6px; background: #e8ecf5; color: #002395; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 20px; cursor: pointer; }
        #ap-linked-badges .linked-badge-inner:hover { background: #d0d8eb; }
        .ap-wiki-section { margin: 14px 20px 0; }
        .ap-wiki-section[open] .ap-section-summary { border-color: #d8d2cc; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
        .ap-money-section { margin: 14px 20px 0; }
        .ap-money-section[open] .ap-section-summary { border-color: #d8d2cc; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
        .ap-money-grid { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 8px; margin-top: 8px; }
        .ap-money-grid-full { grid-template-columns: minmax(0, 1fr); }
        @media (max-width: 420px) {
            .ap-money-grid { grid-template-columns: minmax(0, 1fr); }
            .ap-money-grid select { width: 100% !important; }
        }

        .traveller-card { background: white; border-radius: 12px; box-shadow: 0 1px 4px rgba(0,0,0,0.07); padding: 16px; cursor: pointer; display: flex; align-items: center; gap: 12px; transition: box-shadow 0.2s, transform 0.15s; border: 1px solid #eae5e0; }
        .traveller-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); transform: translateY(-1px); }
        .traveller-card .tc-icon { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #012169, #002395); color: white; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
        .traveller-card .tc-info { flex: 1; min-width: 0; }
        .traveller-card .tc-name { font-size: 14px; font-weight: 600; color: #252120; }
        .traveller-card .tc-age { font-size: 12px; color: #8a8380; }
        .traveller-card .traveller-doc-indicator { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 38px; padding: 5px 8px; border-radius: 999px; border: 1px solid #c8d7ff; background: #eef4ff; color: #002395; font-size: 12px; font-weight: 700; line-height: 1; flex-shrink: 0; }
        .traveller-card .traveller-doc-icon { font-size: 14px; line-height: 1; }
        .traveller-card .traveller-doc-count { line-height: 1; }
        .traveller-card .tc-arrow { color: #d8d2cc; font-size: 18px; }
        #traveller-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 9001; width: min(420px, 100vw); background: #fefcfa; box-shadow: -4px 0 32px rgba(0,0,0,0.15); overflow-y: auto; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.4,0,0.2,1); display: none; }
        #traveller-panel-overlay { display: none; position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0.25); }
        /* Booking/Ticket edit — same right-side sliding panel pattern as
           #activity-panel/#traveller-panel, replacing the old centered
           popup dialog so all three "edit" surfaces feel consistent. */
        #booking-edit-modal, #ticket-edit-modal, #add-day-modal, #day-map-modal, #segment-plans-modal, #segment-weather-modal, #destination-edit-modal, #nearby-restaurants-modal, #flight-status-modal, #ai-assistant-modal, #document-edit-modal, #help-modal, #travel-connector-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 9001; width: min(420px, 100vw); background: #fefcfa; box-shadow: -4px 0 32px rgba(0,0,0,0.15); overflow-y: auto; transform: translateX(100%); transition: transform 0.32s cubic-bezier(0.4,0,0.2,1); display: none; }
        .be-panel-header { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px; margin: -20px -20px 16px; padding: 20px; background: #fefcfa; border-bottom: 1px solid #eee8e3; }
        .be-panel-header h2 { flex: 0 0 100%; min-width: 0; }
        #be-save-btn, #be-delete-btn { white-space: nowrap; }
        #segment-plans-modal { width: min(760px, 100vw); }
        #help-modal { width: min(480px, 100vw); }
        #booking-edit-overlay, #add-day-overlay, #day-map-overlay, #segment-plans-overlay, #segment-weather-overlay, #destination-edit-overlay, #nearby-restaurants-overlay, #flight-status-overlay, #ai-assistant-overlay, #document-edit-overlay, #help-overlay, #travel-connector-overlay { display: none; position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0.25); }
        .tcp-mode-row { display: flex; flex-wrap: wrap; gap: 6px; }
        .tcp-mode-btn, .tcp-route-pref-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; font-weight: 600; color: #524c48; background: #f4f0ec; border: 1px solid #e8e2dc; border-radius: 10px; padding: 8px 6px; cursor: pointer; flex: 1 1 0; min-width: 52px; }
        .tcp-mode-btn.active, .tcp-route-pref-btn.active { background: #012169; color: #fff; border-color: #012169; }
        .tcp-mode-btn .tcp-mode-icon { font-size: 16px; }
        .tcp-route-option:hover { border-color: #012169; }
        .tcp-steps-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
        .tcp-steps-list li { font-size: 12px; color: #3a3532; padding: 8px 10px; background: #f4f0ec; border-radius: 8px; }
        #trip-story-view-readable-btn.active, #trip-story-view-slideshow-btn.active, #trip-story-arrange-photos-btn.active, #trip-story-slide-edit-btn.active { background: #012169; color: #fff; }
        .trip-story-depth-btn.active { background: #012169; color: #fff; }
        .trip-story-slide { border-radius: 16px; padding: 20px; min-height: 260px; display: flex; flex-direction: column; justify-content: center; }
        .trip-story-photo-pick { position: relative; aspect-ratio: 1 / 1; border-radius: 10px; border: 2px solid transparent; background-size: cover; background-position: center; cursor: pointer; padding: 0; opacity: 0.55; transition: opacity 0.15s, border-color 0.15s; }
        .trip-story-photo-pick.selected { opacity: 1; border-color: #012169; }
        .trip-story-photo-pick-check { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: #012169; color: #fff; font-size: 12px; line-height: 20px; text-align: center; opacity: 0; transform: scale(0.6); transition: opacity 0.15s, transform 0.15s; }
        .trip-story-photo-pick.selected .trip-story-photo-pick-check { opacity: 1; transform: scale(1); }
        .trip-story-photo-search-result { position: relative; width: 56px; height: 56px; border-radius: 8px; border: 2px dashed #012169; background-size: cover; background-position: center; cursor: pointer; padding: 0; color: #fff; font-size: 18px; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,0.6); opacity: 0.85; transition: opacity 0.15s; }
        .trip-story-photo-search-result:hover { opacity: 1; }
        .tcp-steps-list li .tcp-step-meta { display: block; font-size: 11px; color: #8a8380; margin-top: 2px; }

        /* Help center (scripts/20-help-module.js) - markdown-authored content
           rendered client-side, reusing the app's existing color tokens
           rather than introducing a new palette. */
        .help-header { display:flex; justify-content:space-between; align-items:center; padding:16px 18px 10px; position:sticky; top:0; background:#fefcfa; z-index:1; border-bottom:1px solid #eae5e0; }
        .help-title { font-size:16px; font-weight:700; color:#252120; margin:0; }
        .help-close-btn { background:#eae5e0; border:none; border-radius:50%; width:32px; height:32px; cursor:pointer; font-size:16px; color:#524c48; flex-shrink:0; }
        .help-filter-row { padding:10px 18px; border-bottom:1px solid #eae5e0; }
        .help-filter-input { width:100%; box-sizing:border-box; border:1px solid #eae5e0; border-radius:10px; padding:8px 12px; font-size:13px; color:#3a3532; background:#faf7f4; }
        .help-toc { padding:10px 12px; display:flex; flex-direction:column; gap:2px; border-bottom:1px solid #eae5e0; }
        .help-toc-item { display:flex; align-items:center; gap:8px; text-align:left; background:none; border:none; border-radius:8px; padding:8px 10px; font-size:13px; font-weight:600; color:#3a3532; cursor:pointer; }
        .help-toc-item:hover, .help-toc-item.is-active { background:#eef1ff; color:#012169; }
        .help-toc-empty { padding:14px 18px; font-size:12px; color:#8a8380; }
        .help-body { padding:6px 18px 28px; }
        .help-section { padding:18px 0; border-bottom:1px solid #f2ece5; }
        .help-section:last-child { border-bottom:none; }
        .help-section-title { display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:#252120; margin:0 0 8px; scroll-margin-top:12px; }
        .help-section.help-section-flash { background:#eef1ff; margin:0 -18px; padding:18px; border-radius:12px; transition:background 1.4s ease; }
        .help-back-to-top { display:inline-block; margin-top:10px; font-size:11px; font-weight:600; color:#012169; cursor:pointer; background:none; border:none; padding:0; }
        .help-content h2 { font-size:14px; font-weight:700; color:#252120; margin:14px 0 6px; }
        .help-content h3 { font-size:13px; font-weight:700; color:#3a3532; margin:12px 0 4px; }
        .help-content p { font-size:13px; line-height:1.55; color:#3a3532; margin:0 0 10px; }
        .help-content ul, .help-content ol { margin:0 0 10px; padding-left:20px; font-size:13px; line-height:1.55; color:#3a3532; }
        .help-content li { margin-bottom:4px; }
        .help-content a { color:#012169; text-decoration:underline; }
        .help-content strong { color:#252120; }
        .help-content code { background:#f2ece5; border-radius:4px; padding:1px 5px; font-size:12px; font-family:ui-monospace,monospace; }
        .help-content pre { background:#252120; color:#fefcfa; border-radius:8px; padding:10px 12px; overflow-x:auto; font-size:12px; margin:0 0 10px; }
        .help-content pre code { background:none; padding:0; color:inherit; }
        .help-content blockquote { border-left:3px solid #c9d4ff; margin:0 0 10px; padding:2px 12px; color:#6b6460; font-size:13px; }
        .help-content img { max-width:100%; border-radius:10px; margin:6px 0 10px; display:block; }
        .help-content hr { border:none; border-top:1px solid #eae5e0; margin:14px 0; }
        .help-status { padding:18px; text-align:center; font-size:12px; color:#8a8380; }
        /* Contextual "?" links from specific features straight to a Help
           section - any element with data-help-section is wired generically
           by scripts/20-help-module.js, no per-link JS needed. */
        .help-inline-link { background:none; border:none; padding:0; margin:0; font-size:11px; font-weight:600; color:#012169; cursor:pointer; text-transform:none; letter-spacing:normal; }
        .tl-plan-toolbar { padding: 8px 0 7px; border-bottom: 1px solid #f2ece5; margin-bottom: 3px; }
        .tl-plan-btn { width: 100%; min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #c9d4ff; background: #f8fbff; border-radius: 10px; padding: 7px 10px; font-size: 11px; font-weight: 800; color: #002395; cursor: pointer; text-align: left; box-shadow: 0 1px 2px rgba(0,35,149,0.06); }
        .tl-plan-btn-main { min-width: 0; }
        .tl-plan-count { flex-shrink: 0; border-radius: 999px; background: #e7edff; color: #35426a; padding: 3px 7px; font-size: 10px; font-weight: 800; }
        .sp-board-scroll { overflow-x: auto; padding-bottom: 4px; }
        .sp-board-grid { display: grid; grid-template-columns: repeat(3, minmax(190px, 1fr)); gap: 10px; min-width: 620px; }
        .sp-plan-col { background: #fff; border: 1px solid #eae5e0; border-radius: 12px; overflow: hidden; }
        .sp-plan-col-main { border-color: #ccd7ff; box-shadow: 0 0 0 1px rgba(0,35,149,0.08); }
        .sp-plan-head { min-height: 48px; display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 10px; background: #f4f0ec; }
        .sp-plan-head strong { display: block; font-size: 13px; color: #252120; }
        .sp-plan-head span { display: block; margin-top: 2px; font-size: 10px; color: #6b6460; font-family: 'Courier New', monospace; font-weight: 800; }
        .sp-delete-plan-btn, .sp-delete-item-btn { border: 0; background: transparent; color: #8a8380; cursor: pointer; font-size: 12px; padding: 2px; }
        .sp-items { padding: 8px; display: flex; flex-direction: column; gap: 6px; min-height: 118px; }
        .sp-item-card { border: 1px solid #eee7df; background: #faf7f4; border-radius: 9px; padding: 7px 8px; }
        .sp-item-card-main { background: #f8fbff; border-color: #dbeafe; }
        .sp-item-time { display: block; font-size: 10px; font-weight: 800; color: #6b6460; font-family: 'Courier New', monospace; margin-bottom: 2px; }
        .sp-item-text { font-size: 12px; color: #252120; line-height: 1.25; }
        .sp-empty { padding: 12px 8px; font-size: 11px; color: #8a8380; text-align: center; border: 1px dashed #eae5e0; border-radius: 9px; }
        .sp-copy-options { display: grid; gap: 6px; }
        .sp-copy-plan-btn { width: 100%; min-height: 32px; border: 1px solid #ccd7ff; border-radius: 8px; background: #f8fbff; color: #002395; padding: 7px 8px; font-size: 11px; font-weight: 800; cursor: pointer; text-align: left; }
        .sp-copy-plan-btn:hover { background: #e7edff; }
        .sp-plan-actions { border-top: 1px solid #eee7df; padding: 8px; }
        .sp-main-badge { display: flex; align-items: center; justify-content: center; min-height: 32px; border-radius: 8px; background: #e7edff; color: #002395; font-size: 12px; font-weight: 800; }
        .sp-promote-plan-btn { width: 100%; min-height: 36px; border: 0; border-radius: 8px; background: #012169; color: #fff; padding: 8px 10px; font-size: 12px; font-weight: 800; cursor: pointer; }
        .sp-add-item { border-top: 1px solid #eee7df; padding: 8px; display: grid; grid-template-columns: 76px 1fr; gap: 6px; }
        .sp-add-item input { min-width: 0; border: 1px solid #d8d2cc; border-radius: 8px; padding: 7px 8px; font-size: 12px; background: #fff; }
        .sp-add-item .sp-address-input { grid-column: 1 / -1; }
        .sp-add-item button { grid-column: 1 / -1; border: 0; border-radius: 8px; background: #012169; color: #fff; padding: 7px; font-size: 12px; font-weight: 700; cursor: pointer; }
        .documents-bulk-bar { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:10px; margin-bottom:12px; border:1px solid #e4ded8; border-radius:16px; background:#fff; box-shadow:0 1px 4px rgba(37,33,32,0.05); }
        .documents-bulk-select { display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 10px; border:1px solid #e4ded8; border-radius:12px; background:#fefcfa; color:#252120; font-size:12px; font-weight:800; cursor:pointer; }
        .documents-bulk-select input, .doc-bulk-checkbox { accent-color:#012169; }
        .documents-bulk-count { min-height:28px; display:inline-flex; align-items:center; padding:0 8px; border-radius:999px; background:#f4f0ec; color:#6b6460; font-size:11px; font-weight:800; }
        .documents-bulk-input, .documents-bulk-select-input { min-height:38px; border:1px solid #d8d2cc; border-radius:12px; background:#fff; color:#252120; font-size:13px; padding:7px 10px; }
        .documents-bulk-input { width:136px; }
        .documents-bulk-select-input { min-width:220px; flex:1 1 240px; }
        .documents-bulk-btn { min-height:38px; border:1px solid #d8d2cc; border-radius:12px; background:#fefcfa; color:#012169; padding:8px 12px; font-size:12px; font-weight:800; cursor:pointer; }
        .documents-bulk-btn.primary { border-color:#012169; background:#012169; color:#fff; }
        .documents-bulk-btn.ghost { color:#6b6460; }
        .documents-bulk-btn:disabled { opacity:.45; cursor:not-allowed; }
        .doc-bulk-check-wrap { grid-column:1; display:flex; align-items:center; justify-content:center; width:24px; min-height:40px; align-self:start; cursor:pointer; }
        .doc-bulk-checkbox { width:17px; height:17px; }
        .doc-library-row { display:flex; align-items:center; gap:12px; padding:12px 14px; border-bottom:1px solid #eae5e0; }
        .doc-library-row:last-child { border-bottom:none; }
        .doc-library-icon { width:40px; height:40px; border-radius:10px; background:#f4f0ec; display:flex; align-items:center; justify-content:center; color:#6b6460; flex-shrink:0; }
        .doc-library-item { display:grid; grid-template-columns:24px 40px minmax(0,1fr) auto; align-items:start; gap:10px; padding:12px 14px; }
        .doc-library-item > .file-thumb { grid-column:2; width:40px; height:40px; margin:0; }
        .doc-library-main { grid-column:3; min-width:0; }
        .doc-library-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; min-width:0; }
        .doc-library-title { min-width:0; margin:0; font-size:13px; line-height:1.25; font-weight:700; color:#252120; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
        .doc-library-date { flex-shrink:0; color:#6b6460; font-size:10px; line-height:1.25; text-align:right; white-space:nowrap; }
        .doc-library-meta { font-size:10px; color:#8a8380; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
        .doc-library-actions { grid-column:4; display:flex; align-items:center; gap:2px; flex-shrink:0; }
        .doc-library-actions button, .doc-library-actions a { width:30px; height:30px; padding:5px !important; box-sizing:border-box; display:inline-flex !important; align-items:center; justify-content:center; }
        .doc-row-datetime { width: 132px; min-height: 18px; }
        @media (max-width: 640px) {
            .doc-item { align-items: flex-start; }
            .doc-library-item { gap:9px; padding:12px 10px; }
            .doc-library-heading { display:block; }
            .doc-library-title { font-size:14px; }
            .doc-library-date { display:block; margin-top:3px; text-align:left; }
            .doc-library-meta { margin-top:4px; }
            .doc-library-actions { gap:0; }
            .doc-library-actions button, .doc-library-actions a { width:28px; height:28px; }
            .documents-bulk-bar { gap:7px; padding:8px; border-radius:14px; }
            .documents-bulk-select, .documents-bulk-btn, .documents-bulk-input, .documents-bulk-select-input { min-height:36px; font-size:12px; }
            .documents-bulk-input { width:calc(50% - 4px); flex:1 1 calc(50% - 4px); }
            .documents-bulk-select-input { flex-basis:100%; min-width:0; width:100%; }
            .documents-bulk-btn { flex:1 1 auto; }
            #segment-plans-modal { width: 100vw; }
            .tl-plan-toolbar { padding: 8px 0; }
            .tl-plan-btn { min-height: 40px; padding: 8px 10px; }
            .sp-board-scroll { overflow-x: visible; padding-bottom: 0; }
            .sp-board-grid { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
            .sp-plan-col { border-radius: 10px; }
            .sp-plan-head { min-height: 44px; }
            .sp-items { min-height: auto; }
            .sp-add-item { grid-template-columns: 82px minmax(0, 1fr); }
        }
        .doc-panel-section { border:1px solid #eae5e0; background:#fff; border-radius:12px; padding:12px; }
        .doc-booking-summary { margin: 0 0 8px; font-size: 12px; color: #6b6460; }
        .doc-booking-list { display: grid; gap: 6px; max-height: 270px; overflow-y: auto; }
        .doc-booking-check-row { display: flex; align-items: flex-start; gap: 9px; padding: 9px; border: 1px solid #eae5e0; border-radius: 10px; background: #fefcfa; cursor: pointer; color: #252120; }
        .doc-booking-check-row input { margin-top: 2px; accent-color: #012169; flex-shrink: 0; }
        .doc-booking-name { display: block; font-size: 13px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
        .doc-booking-meta { display: block; font-size: 11px; color: #6b6460; margin-top: 1px; overflow-wrap: anywhere; }
        .doc-booking-empty { margin: 0; font-size: 12px; color: #8a8380; }
        .doc-panel-row { display:grid; gap:8px; }
        .ai-chat-messages { display: flex; flex-direction: column; gap: 8px; min-height: 200px; max-height: 50vh; overflow-y: auto; padding: 4px 0; }
        .ai-chat-bubble { max-width: 85%; padding: 8px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4; white-space: pre-wrap; }
        .ai-chat-bubble-user { align-self: flex-end; background: #012169; color: #fff; border-bottom-right-radius: 4px; }
        .ai-chat-bubble-assistant { align-self: flex-start; background: #f4f0ec; color: #3a3532; border-bottom-left-radius: 4px; }
        /* AI agentic trip editing (2026-07-28) - a confirm card is still an
           assistant bubble (same alignment/max-width), just with an
           actions row appended. */
        .ai-agent-card { align-self: flex-start; max-width: 85%; padding: 10px 12px; border-radius: 14px; border-bottom-left-radius: 4px; font-size: 13px; line-height: 1.4; background: #eef1fb; color: #252120; border: 1px solid #d7dcf2; }
        .ai-agent-card-actions { display: flex; gap: 8px; margin-top: 8px; }
        .ai-agent-confirm-btn, .ai-agent-dismiss-btn { border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 700; cursor: pointer; border: none; }
        .ai-agent-confirm-btn { background: #012169; color: #fff; }
        .ai-agent-dismiss-btn { background: #fff; color: #524c48; border: 1px solid #d8d2cc; }
        .tp-field-group { margin-bottom: 16px; }
        .tp-field-group label { display: block; font-size: 11px; font-weight: 700; color: #8a8380; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
        .tp-field-group input, .tp-field-group textarea, .tp-field-group select { width: 100%; border: 1px solid #eae5e0; border-radius: 10px; padding: 10px 14px; font-size: 13px; color: #3a3532; background: #faf7f4; font-family: inherit; outline: none; box-sizing: border-box; }
        .tp-field-group input:focus, .tp-field-group textarea:focus, .tp-field-group select:focus { border-color: #002395; box-shadow: 0 0 0 2px rgba(0,35,149,0.1); }
        .pp-status-btn { flex: 1; padding: 10px 12px; border-radius: 10px; border: 1px solid #eae5e0; background: #faf7f4; font-size: 13px; font-weight: 600; color: #6b6460; cursor: pointer; transition: all 0.15s; }
        .pp-status-btn.active[data-status="buy"] { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
        .pp-status-btn.active[data-status="owned"] { background: #dcfce7; border-color: #16a34a; color: #15803d; }
        .tp-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
        .tp-field-group textarea { resize: vertical; min-height: 60px; }
        .tp-field-group .tp-inline { display: flex; align-items: center; gap: 10px; }
        .tp-field-group .tp-age-badge { font-size: 12px; font-weight: 600; color: #002395; background: #e8ecf5; padding: 4px 10px; border-radius: 20px; white-space: nowrap; }
        .tp-passport-warn { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: #dc2626; background: #fee2e2; padding: 3px 8px; border-radius: 12px; margin-top: 4px; }
        /* Traveller documents (2026-07-21, per the user - "a better view of
           what document is... and be able to name it here") - a row list
           with a bigger real thumbnail for images plus an inline-editable
           label, replacing the old 80x80 grid with an 8px, truncated-to-
           70px filename nobody could actually read. */
        .doc-thumbnail-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
        .tp-doc-row { display: flex; align-items: center; gap: 10px; background: #faf7f4; border: 1px solid #eae5e0; border-radius: 10px; padding: 8px; }
        .tp-doc-thumb { width: 48px; height: 48px; border-radius: 8px; overflow: hidden; background: #eae5e0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
        .tp-doc-thumb img { width: 100%; height: 100%; object-fit: cover; }
        .tp-doc-thumb .tp-doc-type-icon { font-size: 20px; }
        .tp-doc-info { flex: 1; min-width: 0; }
        .tp-doc-name-input { display: block; width: 100%; box-sizing: border-box; border: 1px solid transparent; background: none; font-size: 13px; font-weight: 600; color: #252120; padding: 3px 5px; border-radius: 6px; font-family: inherit; }
        .tp-doc-name-input:hover { border-color: #d8d2cc; }
        .tp-doc-name-input:focus { border-color: #002395; background: #fff; outline: none; }
        .tp-doc-meta { font-size: 10px; color: #8a8380; margin-top: 1px; padding: 0 5px; }
        .tp-doc-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
        .tp-doc-view-btn, .tp-doc-remove-btn { width: 26px; height: 26px; background: none; border: none; color: #8a8380; font-size: 13px; cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
        .tp-doc-view-btn:hover { background: #e8ecf5; color: #002395; }
        .tp-doc-remove-btn:hover { background: #fee2e2; color: #dc2626; }
        .upload-drop-zone { border: 2px dashed #d8d2cc; border-radius: 12px; padding: 24px; text-align: center; cursor: pointer; background: #f4f0ec; transition: border-color 0.2s, background 0.2s; }
        .upload-drop-zone:hover { border-color: #002395; background: #e8ecf5; }

        /* Overview traveller chips */
        .traveller-chip { display: inline-flex; align-items: center; gap: 6px; background: #e8ecf5; color: #002395; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 20px; }

    /* ── Login Gate ─────────────────────────────────── */
    #login-gate.hidden { display: none !important; }
    #app-root.hidden   { display: none !important; }
    .lg-btn {
      width: 100%; border-radius: 999px; border: 1px solid rgba(1,33,105,0.12); padding: 12px 14px;
      font-size: 12px; font-weight: 600; cursor: pointer;
      background: #fff; color: #012169;
      box-shadow: 0 14px 30px rgba(0,0,0,0.24);
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .lg-btn:hover { background: #f8fbff; border-color: rgba(26,166,168,0.35); transform: translateY(-1px); }
    .lg-err  { margin-top: 10px; font-size: 11px; color: #b42318; min-height: 16px; }
    .lg-signout { display: block; margin: 4px auto 0; background: none; border: none; color: #b8d7ff; font-size: 11px; text-decoration: underline; cursor: pointer; padding: 4px; }
    .lg-signout:hover { color: #ffffff; }
    .lg-meta { margin-top: 14px; font-size: 10px; color: #b8c8d8; }

    /* ── Trip Picker ────────────────────────────────── */
    #trip-picker { position: fixed; inset: 0; z-index: 9500; background: #faf7f4; overflow-y: auto; }
    #trip-picker.hidden { display: none !important; }
    .trip-tile { position: relative; }
    .trip-tile-delete-btn {
      position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,0.9);
      border: none; border-radius: 8px; width: 26px; height: 26px; color: #dc2626;
      cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center;
    }
    .at-type-chip {
      border: 1px solid #d8d2cc; border-radius: 999px; padding: 6px 14px; font-size: 12px;
      font-weight: 600; background: #f4f0ec; color: #524c48; cursor: pointer;
    }
    .at-type-chip.selected { background: #002395; border-color: #002395; color: white; }

    .search-input-wrap { display: flex; align-items: center; gap: 8px; border: 1px solid #eae5e0; border-radius: 12px; padding: 9px 12px; background: #faf7f4; }
    .search-input-wrap:focus-within { border-color: #002395; box-shadow: 0 0 0 2px rgba(0,35,149,0.1); }
    #trip-search-input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: inherit; font-size: 14px; color: #252120; }
    #trip-search-clear { display: none; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; border-radius: 8px; background: #eae5e0; color: #524c48; cursor: pointer; flex-shrink: 0; }
    #trip-search-clear.visible { display: inline-flex; }
    .search-filter-row { display: flex; gap: 6px; overflow-x: auto; padding-top: 12px; -webkit-overflow-scrolling: touch; }
    .search-filter-chip { flex: 0 0 auto; border: 1px solid #d8d2cc; border-radius: 999px; background: #f4f0ec; color: #524c48; padding: 6px 11px; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }
    .search-filter-chip span { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: rgba(255,255,255,0.7); color: inherit; font-size: 10px; }
    .search-filter-chip.active { background: #012169; border-color: #012169; color: white; }
    .search-recent-row { display: none; align-items: center; gap: 6px; overflow-x: auto; padding-top: 10px; -webkit-overflow-scrolling: touch; }
    .search-recent-row.visible { display: flex; }
    .search-recent-row > span { flex: 0 0 auto; font-size: 10px; font-weight: 800; text-transform: uppercase; color: #8a8380; letter-spacing: 0.05em; }
    .search-recent-chip { flex: 0 0 auto; border: 1px solid #eae5e0; border-radius: 999px; background: white; color: #524c48; padding: 5px 9px; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; }
    .search-result-card { width: 100%; text-align: left; display: flex; gap: 10px; background: white; border: 1px solid #eae5e0; border-radius: 12px; padding: 12px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
    .search-result-card:hover { border-color: #d8d2cc; box-shadow: 0 4px 14px rgba(0,0,0,0.07); transform: translateY(-1px); }
    .search-result-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #f4f0ec; flex-shrink: 0; font-size: 16px; }
    .search-result-body { min-width: 0; flex: 1; }
    .search-result-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
    .search-result-kind { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #8a8380; }
    .search-result-location { font-size: 11px; font-weight: 600; color: #002395; }
    .search-result-title { display: block; font-size: 14px; font-weight: 700; color: #252120; line-height: 1.35; overflow-wrap: anywhere; }
    .search-result-snippet { display: block; font-size: 12px; color: #6b6460; line-height: 1.45; margin-top: 3px; overflow-wrap: anywhere; }
    .search-result-snippet mark { background: #fef3c7; color: #92400e; border-radius: 3px; padding: 0 2px; }
    .search-result-card:focus-visible, .search-filter-chip:focus-visible, .search-recent-chip:focus-visible, #trip-search-clear:focus-visible { outline: 2px solid #002395; outline-offset: 2px; }

    /* Address autocomplete dropdown (scripts/19-address-autocomplete.js) -
       appended to document.body and positioned via getBoundingClientRect so
       it works regardless of the address input's own containing panel. */
    .addr-autocomplete-dropdown { position: absolute; z-index: 3000; background: white; border: 1px solid #d8d2cc; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); max-height: 220px; overflow-y: auto; }
    .addr-autocomplete-item { padding: 8px 12px; font-size: 13px; color: #3a3532; cursor: pointer; border-bottom: 1px solid #f4f0ec; }
    .addr-autocomplete-item:last-child { border-bottom: none; }
    .addr-autocomplete-item:hover, .addr-autocomplete-item.is-active { background: #f4f0ec; }

    .overview-header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
    .overview-trip-summary { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; padding: 9px 12px; border: 1px solid #eae5e0; border-radius: 12px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.06); color: #6b6460; font-size: 12px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .overview-trip-summary-label { color: #8a8380; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
    .overview-trip-summary strong { color: #252120; font-size: 14px; font-weight: 800; }
    /* Quick Expense + the Export/Nearby/Flight/Assistant tools card sit
       side by side (Pierre's request - Quick Expense was "too big", and
       the tools cards took up too much vertical space as separate
       full-width rows). Equal-width columns, stacks on mobile. */
    .overview-quick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
    .overview-tools-card { display: flex; flex-direction: column; }
    .overview-tools-icons { display: flex; gap: 8px; flex-wrap: wrap; }
    .overview-tool-icon-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; min-width: 64px; background: #faf7f4; border: 1px solid #eae5e0; border-radius: 10px; padding: 8px 6px; font-size: 10px; font-weight: 600; color: #524c48; cursor: pointer; }
    .overview-tool-icon-btn:hover { background: #f4f0ec; }
    .overview-tool-icon-btn:focus-visible { outline: 2px solid #002395; outline-offset: 2px; }
    .export-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-start; }
    .export-action-btn { border: none; border-radius: 10px; min-height: 34px; padding: 7px 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; }
    .export-print-btn { background: #252120; color: white; }
    .export-excel-btn { background: #e8f5ee; color: #166534; }
    .export-ics-btn { background: #eef2ff; color: #3730a3; }
    .export-action-btn:focus-visible { outline: 2px solid #002395; outline-offset: 2px; }
    .overview-actions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
    .overview-action-card { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .overview-action-card .overview-action-copy { min-width: 0; }
    .overview-action-card button { flex-shrink: 0; }
    .overview-actions-grid .trip-health-card { grid-column: 1 / -1; }
    .overview-actions-grid .trip-health-card:not(.collapsed) { align-items: stretch; }
    .overview-stay-travel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .overview-booking-panel { border: 1px solid #eae5e0; border-radius: 12px; background: #fff; padding: 10px; min-width: 0; }
    .overview-booking-panel-title { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; color: #252120; font-size: 12px; font-weight: 800; }
    .overview-booking-panel-list { display: grid; gap: 8px; }
    .overview-booking-link { width: 100%; display: flex; gap: 9px; align-items: flex-start; text-align: left; border: 1px solid #eee8e2; border-radius: 10px; background: #faf7f4; padding: 9px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
    .overview-booking-link:hover { border-color: #d8d2cc; box-shadow: 0 5px 14px rgba(0,0,0,0.06); transform: translateY(-1px); }
    .overview-booking-link:focus-visible { outline: 2px solid #002395; outline-offset: 2px; }
    .overview-booking-dot { width: 8px; height: 8px; border-radius: 999px; margin-top: 5px; flex-shrink: 0; background: #012169; }
    .overview-booking-copy { min-width: 0; }
    .overview-booking-title { display: block; color: #252120; font-size: 13px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
    .overview-booking-meta { display: block; margin-top: 2px; color: #6b6460; font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
    .overview-booking-empty { border: 1px dashed #e2dcd6; border-radius: 10px; padding: 10px; color: #8a8380; font-size: 12px; }
    .booking-jump-highlight { outline: 2px solid #012169; box-shadow: 0 0 0 4px rgba(1,33,105,0.12); }
    #trip-print-root { display: none; }

    @media (max-width: 640px) {
      .overview-quick-row { grid-template-columns: 1fr; }
      .overview-header-row { gap: 8px; }
      .overview-trip-summary { flex: 1 1 auto; justify-content: flex-end; }
      .overview-actions-grid { grid-template-columns: 1fr; }
      .overview-stay-travel-grid { grid-template-columns: 1fr; }
    }

    .overview-collapsible-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
    .overview-section-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
    .overview-collapse-toggle { border: none; border-radius: 10px; min-height: 32px; padding: 6px 9px; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; background: #f4f0ec; color: #524c48; }
    .overview-collapsible.collapsed .overview-collapsible-body { display: none; }
    .overview-collapse-toggle:focus-visible { outline: 2px solid #002395; outline-offset: 2px; }

    .quick-expense-cat-btn { border: 1px solid #eae5e0; border-radius: 10px; padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer; background: #faf7f4; color: #524c48; white-space: nowrap; }
    .quick-expense-cat-btn.active { background: #002395; border-color: #002395; color: #fff; }

    .personal-budget-cards { display: grid; gap: 8px; }
    .personal-budget-card { border: 1px solid #eae5e0; border-radius: 12px; padding: 11px 12px; background: #fefcfa; }
    .personal-budget-card-head, .personal-budget-values { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .personal-budget-name { margin: 0; color: #252120; font-size: 13px; font-weight: 800; }
    .personal-budget-plan { margin: 2px 0 0; color: #8a8380; font-size: 10px; }
    .personal-budget-edit { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d8d2cc; border-radius: 8px; padding: 6px; background: #fff; color: #002395; cursor: pointer; }
    .personal-budget-values { margin-top: 9px; color: #6b6460; font-size: 11px; }
    .personal-budget-spent { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .personal-budget-remaining { flex-shrink: 0; font-weight: 800; }
    .personal-budget-remaining.is-good { color: #16803c; }
    .personal-budget-remaining.is-over { color: #dc2626; }
    .personal-budget-bar { height: 6px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: #eae5e0; }
    .personal-budget-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: #16803c; transition: width .25s ease; }
    .personal-budget-bar span.is-over { background: #dc2626; }
    .personal-budget-expenses { margin-top: 9px; display: grid; gap: 5px; }
    .personal-budget-expense-title { color: #8a8380; font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
    .personal-budget-expense-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; width: 100%; padding: 6px 0; border: 0; border-top: 1px solid #eee8e2; background: transparent; font-family: inherit; cursor: pointer; text-align: left; }
    .personal-budget-expense-row:hover .personal-budget-expense-name { color: #002395; text-decoration: underline; }
    .personal-budget-expense-row:focus-visible { outline: 2px solid #002395; outline-offset: 2px; border-radius: 6px; }
    .personal-budget-expense-main { min-width: 0; display: grid; gap: 1px; }
    .personal-budget-expense-name { color: #252120; font-size: 11px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .personal-budget-expense-meta { color: #8a8380; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .personal-budget-expense-amount { flex-shrink: 0; display: grid; justify-items: end; gap: 1px; color: #252120; font-size: 11px; font-weight: 800; text-align: right; }
    .personal-budget-expense-converted { color: #8a8380; font-size: 10px; font-weight: 700; }
    .personal-expense-badge { display: inline-flex; align-items: center; margin-left: 5px; padding: 2px 6px; border-radius: 999px; background: #ede9fe; color: #5b21b6; font-size: 10px; font-weight: 700; }
    .ap-linked-expense-row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px solid #dbeafe; background: #eff6ff; border-radius: 10px; padding: 8px 10px; margin-top: 5px; font-family: inherit; text-align: left; cursor: pointer; color: #252120; }
    .ap-linked-expense-row:hover .ap-linked-expense-title { color: #002395; text-decoration: underline; }
    .ap-linked-expense-row:focus-visible { outline: 2px solid #002395; outline-offset: 2px; }
    .ap-linked-expense-main { min-width: 0; display: grid; gap: 1px; }
    .ap-linked-expense-title { font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ap-linked-expense-meta { font-size: 10px; color: #6b6460; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ap-linked-expense-amount { flex-shrink: 0; font-size: 12px; font-weight: 800; color: #002395; }

    body.viewer-readonly .edit-booking-btn,
    body.viewer-readonly .delete-booking-btn,
    body.viewer-readonly .booking-add-btn,
    body.viewer-readonly .expense-edit-btn,
    body.viewer-readonly .expense-delete-btn,
    body.viewer-readonly .budget-edit-btn,
    body.viewer-readonly .personal-budget-edit,
    body.viewer-readonly #quick-expense-card,
    body.viewer-readonly #expense-add-toggle,
    body.viewer-readonly #budget-add-toggle,
    body.viewer-readonly #personal-budget-add-btn,
    body.viewer-readonly #ap-save-btn,
    body.viewer-readonly #ap-delete-btn,
    body.viewer-readonly #ap-expense-add-btn,
    body.viewer-readonly #ap-expense-receipt-label,
    body.viewer-readonly #ap-file-label,
    body.viewer-readonly #ap-attach-existing-doc-btn,
    body.viewer-readonly #ap-link-add-btn,
    body.viewer-readonly #be-save-btn,
    body.viewer-readonly #be-delete-btn,
    body.viewer-readonly #be-doc-add-link-panel-btn,
    body.viewer-readonly #be-doc-attach-existing-btn,
    body.viewer-readonly .be-doc-remove-btn,
    body.viewer-readonly .be-doc-move-btn,
    body.viewer-readonly #documents-bulk-bar,
    body.viewer-readonly .doc-bulk-check-wrap,
    body.viewer-readonly .add-act-toggle-btn,
    body.viewer-readonly .save-act-btn,
    body.viewer-readonly .cancel-act-btn,
    body.viewer-readonly .edit-dest-btn,
    body.viewer-readonly .dest-weather-btn,
    body.viewer-readonly .day-edit-btn,
    body.viewer-readonly .day-delete-btn,
    body.viewer-readonly .packing-add-btn,
    body.viewer-readonly .packing-edit-btn,
    body.viewer-readonly .packing-delete-btn {
        display: none !important;
    }

    body.viewer-readonly input:not([type="search"]):not([readonly]),
    body.viewer-readonly textarea:not([readonly]),
    body.viewer-readonly select:not([disabled]) {
        background-color: #f8f6f3 !important;
    }

    .packing-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
    .packing-stat-card { border-radius: 12px; padding: 10px; border: 1px solid #eae5e0; background: #f4f0ec; }
    .packing-stat-card span { display: block; font-size: 18px; font-weight: 800; line-height: 1; color: #252120; }
    .packing-stat-card small { display: block; margin-top: 4px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #6b6460; }
    .packing-stat-card.warn { background: #fff7ed; border-color: #fed7aa; }
    .packing-stat-card.buy { background: #fffbeb; border-color: #fde68a; }
    .packing-stat-card.ok { background: #ecfdf5; border-color: #bbf7d0; }
    .packing-filter-row, .packing-owner-row { display: flex; gap: 6px; overflow-x: auto; padding-top: 8px; -webkit-overflow-scrolling: touch; }
    .packing-sort-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; padding-top: 10px; }
    .packing-sort-row label { font-size: 11px; font-weight: 800; color: #6b6460; text-transform: uppercase; letter-spacing: 0.04em; }
    .packing-sort-row select { border: 1px solid #d8d2cc; border-radius: 9px; background: #fefcfa; color: #252120; min-height: 32px; padding: 5px 30px 5px 10px; font-size: 12px; font-weight: 800; cursor: pointer; }
    #packing-categories-toggle, #packing-category-add { border: none; border-radius: 9px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; background: #eef4ff; color: #002395; padding: 6px 9px; font-size: 11px; font-weight: 800; cursor: pointer; }
    .packing-category-manager { margin-top: 10px; border: 1px solid #eae5e0; border-radius: 12px; background: #faf7f4; padding: 10px; }
    .packing-category-manager-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
    .packing-category-manager-head strong { font-size: 12px; color: #252120; }
    .packing-category-list { display: flex; flex-wrap: wrap; gap: 7px; }
    .packing-category-row { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #e3ded8; border-radius: 999px; background: #fefcfa; padding: 3px 5px 3px 6px; }
    .packing-category-row button { width: 24px; height: 24px; border: none; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #6b6460; background: transparent; cursor: pointer; }
    .packing-category-row button:hover { background: #f4f0ec; color: #252120; }
    .packing-filter-chip, .packing-owner-chip { flex: 0 0 auto; border: 1px solid #d8d2cc; border-radius: 999px; background: #f4f0ec; color: #524c48; padding: 6px 10px; font-size: 11px; font-weight: 800; cursor: pointer; white-space: nowrap; }
    .packing-filter-chip span { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: rgba(255,255,255,0.7); color: inherit; font-size: 10px; }
    .packing-filter-chip.active, .packing-owner-chip.active { background: #012169; border-color: #012169; color: white; }
    .packing-dashboard-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border-top: 1px solid #f1ede8; margin-top: 12px; padding-top: 12px; font-size: 11px; font-weight: 700; color: #6b6460; }
    .packing-dashboard-footer button, .packing-pack-card-btn, .packing-ai-suggest-btn { border: none; border-radius: 9px; min-height: 30px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 11px; font-weight: 800; cursor: pointer; background: #e8f5ee; color: #166534; padding: 6px 9px; }
    .packing-ai-suggest-btn { background: #eef4ff; color: #002395; }
    .packing-dashboard-footer button:disabled { opacity: 0.45; cursor: default; }
    .packing-filter-chip:focus-visible, .packing-owner-chip:focus-visible, .packing-dashboard-footer button:focus-visible, .packing-pack-card-btn:focus-visible, .packing-ai-suggest-btn:focus-visible { outline: 2px solid #002395; outline-offset: 2px; }
    .packing-row-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
    .packing-quantity-badge { display: inline-flex; align-items: center; min-height: 20px; padding: 3px 8px; border-radius: 999px; background: #eef4ff; color: #002395; font-size: 10px; font-weight: 800; }
    .packing-quantity-control { flex-shrink: 0; width: max-content; display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; border: 1px solid #d8d2cc; border-radius: 10px; background: #fefcfa; padding: 3px; }
    .packing-quantity-control button { width: 26px; height: 26px; border: none; border-radius: 7px; background: #f4f0ec; color: #252120; font-size: 14px; font-weight: 900; cursor: pointer; }
    .packing-quantity-control span { min-width: 36px; text-align: center; font-size: 11px; font-weight: 800; color: #524c48; }
    .packing-bag-wrap-nested { background: #f4f0ec; border: 1px solid #e4ded6; border-radius: 20px; padding: 10px; margin-bottom: 12px; }
    .packing-bag-wrap-nested > .bg-white { margin-bottom: 10px; }
    .packing-subbag-group { padding-left: 14px; margin-left: 8px; border-left: 3px solid var(--app-primary, #012169); }
    .packing-subbag-group > .bg-white:last-child { margin-bottom: 0; }
    .packing-subbag-group-label { display: flex; align-items: center; gap: 5px; margin: 0 0 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; color: #6b6460; }
    .packing-ai-panel { border-color: #c8d7ff; }
    .packing-ai-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
    .packing-ai-head h3 { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 800; color: #252120; }
    .packing-ai-head p { margin: 2px 0 0; font-size: 12px; color: #6b6460; }
    .packing-ai-head button { border: none; background: #f4f0ec; color: #6b6460; border-radius: 9px; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
    .packing-ai-status { border-radius: 10px; background: #eef4ff; color: #002395; padding: 10px 12px; font-size: 12px; font-weight: 700; }
    .packing-ai-status.error { background: #fff7ed; color: #9a3412; }
    .packing-ai-list { display: grid; gap: 8px; margin: 10px 0; }
    .packing-ai-row { display: flex; align-items: flex-start; gap: 10px; border: 1px solid #eae5e0; border-radius: 10px; padding: 10px; cursor: pointer; }
    .packing-ai-row input { margin-top: 2px; accent-color: #012169; flex-shrink: 0; }
    .packing-ai-row strong { display: block; font-size: 13px; color: #252120; }
    .packing-ai-row small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.35; color: #6b6460; }
    #packing-ai-add-selected { border: none; border-radius: 10px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: #012169; color: white; font-size: 12px; font-weight: 800; padding: 8px 12px; cursor: pointer; }
    .packing-item-row-transferring .packing-item-row { background: #f7f9ff; }
    .packing-item-row-transferring .packing-transfer-btn.active { color: #012169; }
    .packing-inline-transfer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 16px 12px; padding-top: 10px; border-top: 1px dashed #d8d2cc; }
    .packing-inline-transfer-empty { font-size: 12px; font-style: italic; color: #9a938d; }
    .packing-inline-transfer-select { flex: 1; min-width: 140px; border: 1px solid #d8d2cc; border-radius: 10px; background: #fefcfa; color: #252120; padding: 7px 9px; font-size: 12px; }
    .packing-inline-transfer-confirm { border: none; border-radius: 10px; min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; background: #012169; color: white; font-size: 11px; font-weight: 800; padding: 6px 10px; cursor: pointer; flex-shrink: 0; }
    .packing-inline-transfer-cancel { border: none; background: #f4f0ec; color: #6b6460; border-radius: 8px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }

    .trip-health-card { display: block; }
    .trip-health-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    .trip-health-header .overview-action-copy { flex: 1 1 auto; min-width: 0; }
    .trip-health-actions { display: flex; gap: 8px; flex-wrap: nowrap; justify-content: flex-end; align-items: flex-start; }
    .trip-health-refresh-btn { border: none; border-radius: 10px; min-height: 36px; padding: 8px 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; background: #f4f0ec; color: #524c48; }
    .trip-health-card.collapsed .trip-health-stats,
    .trip-health-card.collapsed .trip-health-results,
    .trip-health-card.collapsed #trip-health-refresh-btn { display: none; }
    .trip-health-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
    .trip-health-stat { border-radius: 12px; padding: 9px 10px; background: #f4f0ec; border: 1px solid #eae5e0; }
    .trip-health-stat span { display: block; font-size: 17px; line-height: 1; font-weight: 800; color: #252120; }
    .trip-health-stat small { display: block; margin-top: 4px; font-size: 10px; font-weight: 700; color: #6b6460; text-transform: uppercase; letter-spacing: 0.04em; }
    .trip-health-stat.warn { background: #fff7ed; border-color: #fed7aa; }
    .trip-health-stat.info { background: #eff6ff; border-color: #bfdbfe; }
    .trip-health-stat.ok { background: #ecfdf5; border-color: #bbf7d0; }
    .trip-health-results { display: grid; gap: 10px; }
    .trip-health-group { border: 1px solid #eae5e0; border-radius: 12px; overflow: hidden; background: #fff; }
    .trip-health-group-title { display: flex; align-items: center; gap: 7px; padding: 9px 11px; background: #faf7f4; color: #252120; font-size: 12px; font-weight: 800; }
    .trip-health-group-title span { flex: 1; }
    .trip-health-group-title em { font-style: normal; min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #eae5e0; color: #524c48; font-size: 11px; }
    .trip-health-issue-row { display: flex; align-items: stretch; border-top: 1px solid #f1ede8; }
    .trip-health-issue { flex: 1; min-width: 0; border: none; background: white; text-align: left; padding: 10px 11px; display: flex; gap: 9px; cursor: pointer; }
    .trip-health-issue:hover { background: #faf7f4; }
    .trip-health-dot { width: 8px; height: 8px; border-radius: 999px; background: #60a5fa; flex-shrink: 0; margin-top: 5px; }
    .trip-health-issue.warn .trip-health-dot { background: #f97316; }
    .trip-health-issue-body { min-width: 0; }
    .trip-health-issue-body strong { display: block; font-size: 12px; color: #252120; line-height: 1.35; overflow-wrap: anywhere; }
    .trip-health-issue-body small { display: block; margin-top: 2px; font-size: 11px; color: #6b6460; line-height: 1.35; overflow-wrap: anywhere; }
    /* Fix buttons (2026-07-10) - rule-based, one-click Trip Health fixes
       (see AGENTS.md's v2.5x entry) - deliberately only shown for the small
       set of issues that have a well-defined, deterministic, reversible
       mutation (add a specific packing item, delete a duplicate CUSTOM
       activity, shift an overlapping activity's start time). No fix button
       at all for issues that would need real user input (e.g. "missing
       address" - there's no one correct address to fill in). */
    .trip-health-fix-btn, .trip-health-verify-btn { flex-shrink: 0; align-self: center; margin-right: 10px; border: none; border-radius: 8px; padding: 6px 10px; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; }
    .trip-health-fix-btn { background: #012169; color: white; }
    .trip-health-verify-btn { background: #f4f0ec; color: #524c48; border: 1px solid #d8d2cc; }
    .trip-health-fix-btn:hover, .trip-health-verify-btn:hover { opacity: 0.9; }
    .trip-health-more { border-top: 1px solid #f1ede8; padding: 8px 11px; font-size: 11px; font-weight: 700; color: #8a8380; }
    .trip-health-empty { display: flex; align-items: center; gap: 8px; color: #166534; background: #ecfdf5; border: 1px solid #bbf7d0; border-radius: 12px; padding: 10px 12px; font-size: 12px; font-weight: 700; }
    .trip-health-refresh-btn:focus-visible, .trip-health-issue:focus-visible { outline: 2px solid #002395; outline-offset: 2px; }
    /* Independent review 2026-07-30, B7: archived-checks drawer */
    #trip-health-archived-toggle { background: none; border: none; padding: 0; color: #012169; font-size: 11px; font-weight: 700; text-decoration: underline; cursor: pointer; }
    .trip-health-archived { margin-top: 10px; border: 1px solid #eae5e0; border-radius: 12px; background: #faf7f4; overflow: hidden; }
    .trip-health-archived-empty { padding: 10px 12px; font-size: 12px; color: #8a8380; }
    .trip-health-archived-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; font-size: 12px; color: #252120; border-bottom: 1px solid #eae5e0; }
    .trip-health-archived-head button { background: none; border: none; padding: 0; color: #dc2626; font-size: 11px; font-weight: 700; cursor: pointer; }
    .trip-health-archived-row { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-top: 1px solid #f1ede8; }
    .trip-health-archived-row:first-of-type { border-top: none; }
    .trip-health-archived-body { flex: 1; min-width: 0; }
    .trip-health-archived-body strong { display: block; font-size: 12px; color: #252120; line-height: 1.35; overflow-wrap: anywhere; }
    .trip-health-archived-body small { display: block; margin-top: 2px; font-size: 11px; color: #6b6460; }
    .trip-health-archived-unarchive { flex-shrink: 0; border: 1px solid #d8d2cc; border-radius: 8px; padding: 6px 10px; font-size: 11px; font-weight: 600; background: #fff; color: #524c48; cursor: pointer; }
    .trip-health-archived-unarchive:hover { opacity: 0.9; }
    @media (max-width: 420px) {
      .trip-health-header { flex-wrap: wrap; gap: 10px; }
      .trip-health-actions { width: 100%; justify-content: flex-start; }
    }

    .search-filter-chip.active,
    .packing-filter-chip.active,
    .packing-owner-chip.active {
      background: var(--app-primary) !important;
      border-color: var(--app-primary) !important;
      color: white;
    }
    .quick-expense-cat-btn.active,
    .at-type-chip.selected {
      background: var(--app-primary-2) !important;
      border-color: var(--app-primary-2) !important;
      color: white;
    }
    .overview-booking-dot,
    .trip-health-fix-btn,
    #packing-ai-add-selected,
    .packing-inline-transfer-confirm {
      background: var(--app-primary) !important;
    }
    .tl-plan-btn,
    .sp-main-badge,
    .traveller-card .traveller-doc-indicator,
    .tp-field-group .tp-age-badge,
    .packing-quantity-badge,
    .packing-ai-status {
      color: var(--app-primary-2);
      background: rgba(var(--app-primary-2-rgb), 0.10);
    }
    .upload-zone:hover,
    .upload-zone.dragover,
    .upload-drop-zone:hover,
    .od-note-area:focus,
    #ap-name-input:focus,
    #ap-time-input:focus,
    #ap-end-time-input:focus,
    .tp-field-group input:focus,
    .tp-field-group textarea:focus,
    .tp-field-group select:focus,
    .search-input-wrap:focus-within {
      border-color: var(--app-primary-2);
      box-shadow: 0 0 0 2px rgba(var(--app-primary-2-rgb), 0.1);
    }
    .search-result-card:focus-visible,
    .search-filter-chip:focus-visible,
    .search-recent-chip:focus-visible,
    #trip-search-clear:focus-visible,
    .overview-tool-icon-btn:focus-visible,
    .export-action-btn:focus-visible,
    .overview-booking-link:focus-visible,
    .overview-collapse-toggle:focus-visible,
    .packing-filter-chip:focus-visible,
    .packing-owner-chip:focus-visible,
    .packing-dashboard-footer button:focus-visible,
    .packing-pack-card-btn:focus-visible,
    .packing-ai-suggest-btn:focus-visible,
    .trip-health-refresh-btn:focus-visible,
    .trip-health-issue:focus-visible {
      outline-color: var(--app-primary-2);
    }

    .journey-export-options-overlay {
      position: fixed;
      inset: 0;
      z-index: 1200;
      background: rgba(15, 23, 42, 0.42);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    .journey-export-options-card {
      position: relative;
      width: min(420px, 100%);
      background: #fffaf6;
      border: 1px solid #eadfd6;
      border-radius: 18px;
      box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
      padding: 18px;
      color: #171717;
    }
    .journey-export-options-card h2 {
      margin: 0;
      font-size: 18px;
      font-weight: 900;
    }
    .journey-export-options-subtitle {
      margin: 4px 0 14px;
      color: #756d68;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .journey-export-options-close {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 30px;
      height: 30px;
      border-radius: 999px;
      border: 1px solid #eadfd6;
      background: #fff;
      cursor: pointer;
      font-size: 18px;
      line-height: 1;
    }
    .journey-export-options-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
    .journey-export-options-grid label {
      display: flex;
      align-items: center;
      gap: 8px;
      min-height: 42px;
      padding: 10px;
      border: 1px solid #eadfd6;
      border-radius: 12px;
      background: #fff;
      font-size: 13px;
      font-weight: 800;
      cursor: pointer;
    }
    .journey-export-options-note {
      margin: 12px 0 0;
      color: #756d68;
      font-size: 12px;
      line-height: 1.4;
    }
    .journey-export-options-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 16px;
    }
    .journey-export-options-actions button {
      border: 1px solid #d8ccc1;
      border-radius: 10px;
      padding: 9px 13px;
      cursor: pointer;
      font-weight: 900;
    }
    .journey-export-options-cancel {
      background: #fff;
      color: #3f3a36;
    }
    .journey-export-options-confirm {
      background: #0f172a;
      color: #fff;
      border-color: #0f172a !important;
    }
    @media (max-width: 520px) {
      .journey-export-options-overlay { align-items: flex-end; padding: 10px; }
      .journey-export-options-grid { grid-template-columns: 1fr; }
    }

    /* ===== TRIP CANVAS (2026-07-28) - mind-map/CMDB-explorer-style
       structure view, scripts/28-trip-canvas.js. Real DOM nodes +
       absolute positioning (not Canvas) so nodes stay real, clickable,
       accessible elements - the layout math in JS just sets left/top. ===== */
    .tc-viewport { position: relative; overflow: hidden; touch-action: none; height: 70vh; min-height: 420px; background: #faf7f4; border: 1px solid #eae5e0; border-radius: 16px; cursor: grab; }
    .tc-inner { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
    .tc-edges { position: absolute; top: 0; left: 0; pointer-events: none; overflow: visible; }
    .tc-edge { fill: none; stroke: #d8d2cc; stroke-width: 2; }
    .tc-node { position: absolute; box-sizing: border-box; background: #fff; border: 1px solid #eae5e0; border-radius: 10px; padding: 8px 10px; box-shadow: 0 1px 3px rgba(31,26,22,0.06); cursor: pointer; user-select: none; -webkit-user-select: none; }
    .tc-node:hover { border-color: #b8b0a8; }
    .tc-node-caret { position: absolute; top: -8px; right: -8px; width: 18px; height: 18px; border-radius: 50%; background: #012169; color: #fff; font-size: 12px; font-weight: 800; line-height: 18px; text-align: center; }
    .tc-node-label { font-size: 12px; font-weight: 700; color: #252120; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tc-node-sub { font-size: 10px; color: #8a8380; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tc-node-trip { background: #012169; border-color: #012169; }
    .tc-node-trip .tc-node-label { color: #fff; }
    .tc-node-trip .tc-node-sub { color: rgba(255,255,255,0.7); }
    .tc-node-destination { background: #f4f0ec; border-color: #d8d2cc; }
    .tc-node-day { background: #fff; }
    .tc-node-segment { background: #fef9ec; border-color: #f0dfa8; }
    .tc-node-activity { background: #eef2ff; border-color: #c7d2fe; }
    .tc-node-activity.tc-node-dragging { opacity: 0.5; }
    .tc-drop-target { outline: 2px solid #16a34a; outline-offset: 2px; }
    .tc-drag-ghost { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; background: #012169; color: #fff; font-size: 12px; font-weight: 700; padding: 6px 10px; border-radius: 8px; box-shadow: 0 4px 12px rgba(31,26,22,0.25); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    @media print {
      @page { margin: 0.45in; }
      body.export-printing { background: white !important; color: #111827 !important; }
      body.export-printing .sticky-header,
      body.export-printing #alerts-banner,
      body.export-printing #today-banner,
      body.export-printing main,
      body.export-printing nav { display: none !important; }
      body.export-printing #trip-print-root { display: block !important; }
      .print-packet { font-family: Inter, Arial, sans-serif; font-size: 10.5pt; line-height: 1.35; color: #111827; }
      .print-cover { border-bottom: 2px solid #111827; padding-bottom: 12px; margin-bottom: 14px; }
      .print-title { font-size: 24pt; font-weight: 800; margin: 0 0 4px; }
      .print-subtitle { margin: 0; color: #4b5563; }
      .print-section { break-inside: avoid; page-break-inside: avoid; margin: 0 0 14px; }
      .print-section h2 { font-size: 15pt; border-bottom: 1px solid #d1d5db; padding-bottom: 4px; margin: 0 0 8px; }
      .print-day { break-inside: avoid; page-break-inside: avoid; margin: 0 0 12px; }
      .print-day h3 { font-size: 12pt; margin: 0 0 3px; }
      .print-day-meta { color: #4b5563; margin: 0 0 6px; }
      .print-items { width: 100%; border-collapse: collapse; }
      .print-items td { border-top: 1px solid #e5e7eb; padding: 5px 4px; vertical-align: top; }
      .print-time { width: 54px; font-weight: 700; color: #374151; white-space: nowrap; }
      .print-row-title { font-weight: 600; }
      .print-row-detail { color: #4b5563; font-size: 9pt; margin-top: 2px; }
      .print-connector-row td { color: #4b5563; font-size: 9pt; padding-top: 3px; padding-bottom: 3px; }
      .print-connector-detail { font-style: italic; }
      .print-address { color: #6b7280; font-size: 9pt; margin-top: 2px; }
      .print-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
      .print-card { border: 1px solid #d1d5db; border-radius: 6px; padding: 7px; break-inside: avoid; page-break-inside: avoid; }
      .print-card-title { font-weight: 800; margin-bottom: 2px; }
      .print-small { color: #4b5563; font-size: 9pt; }
    }