/* Site stylesheet, extracted from base.html so it is downloaded once and
   cached rather than shipped inline on every page. Loads after tailwind.css
   because the html.light overrides rely on source order and !important. */
/* Alpine.js cloak - hide x-show elements until Alpine initialises */
        [x-cloak] { display: none !important; }

        /* ── CSS Custom Properties for theming ── */
        :root {
            --bg-base: #071020;
            --bg-primary: #0C1830;
            --bg-secondary: #10203C;
            --bg-card: rgba(16,32,60,0.7);
            --bg-elevated: rgba(22,40,72,0.55);
            --text-primary: #F2F6FC;
            --text-secondary: #A8BDD6;
            --text-muted: #607A9A;
            --border-color: rgba(123,184,224,0.08);
            --border-hover: rgba(123,184,224,0.18);
            --nav-bg: rgba(10,21,40,0.92);
            --card-shadow: 0 4px 24px -4px rgba(0,0,0,0.5);
            --glass-bg: rgba(10,21,40,0.88);
            --glass-border: rgba(123,184,224,0.14);
            --glass-shine: inset 0 1px 0 rgba(255,255,255,0.05);
            --input-bg: rgba(16,32,60,0.6);
            --input-border: rgba(123,184,224,0.12);
            --accent-sky: #7BB8E0;
            --accent-gold: #E8BC40;
            --accent-danger: #FF5A5A;
            --accent-success: #4ADE80;
            --accent-purple: #C084FC;
        }
        html.light {
            --bg-base: #F6F9FE;
            --bg-primary: #EFF4FB;
            --bg-secondary: #FFFFFF;
            --bg-card: rgba(255,255,255,0.9);
            --bg-elevated: rgba(239,244,251,0.85);
            --text-primary: #0A1628;
            --text-secondary: #2D4A6F;
            --text-muted: #5A7394;
            --border-color: rgba(27,58,107,0.12);
            --border-hover: rgba(27,58,107,0.22);
            --nav-bg: rgba(255,255,255,0.95);
            --card-shadow: 0 4px 24px -4px rgba(27,58,107,0.12), 0 1px 3px rgba(27,58,107,0.06);
            --glass-bg: rgba(255,255,255,0.82);
            --glass-border: rgba(27,58,107,0.12);
            --glass-shine: inset 0 1px 0 rgba(255,255,255,0.9);
            --input-bg: rgba(255,255,255,0.7);
            --input-border: rgba(27,58,107,0.15);
            --accent-sky: #1B6DB5;
            --accent-gold: #B08614;
            --accent-danger: #DC2626;
            --accent-success: #16A34A;
            --accent-purple: #7C3AED;
        }

        html {
            overflow-x: hidden;
        }
        body {
            overflow-x: hidden;
            width: 100%;
            max-width: 100%;
            background: var(--bg-base);
            color: var(--text-primary);
        }
        /* Force all content to respect viewport width */
        main {
            width: 100%;
            max-width: 100%;
        }
        main > * {
            max-width: 100%;
        }
        /* Tables scroll horizontally inside their overflow-x-auto wrapper */
        table {
            word-wrap: break-word;
        }

        /* ── Atmospheric mesh background ── */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            z-index: -2;
            background:
                radial-gradient(ellipse 80% 50% at 20% 20%, rgba(27,58,107,0.3) 0%, transparent 70%),
                radial-gradient(ellipse 60% 40% at 80% 80%, rgba(123,184,224,0.15) 0%, transparent 60%),
                radial-gradient(ellipse 50% 50% at 50% 50%, rgba(42,80,144,0.1) 0%, transparent 50%);
            pointer-events: none;
        }
        html.light body::before {
            background:
                radial-gradient(ellipse 80% 50% at 20% 20%, rgba(123,184,224,0.12) 0%, transparent 70%),
                radial-gradient(ellipse 60% 40% at 80% 80%, rgba(27,58,107,0.06) 0%, transparent 60%);
        }

        /* ── Floating orbs ── */
        .orb { position: fixed; border-radius: 50%; pointer-events: none; z-index: -1; }
        .orb-1 { width: 300px; height: 300px; top: 10%; left: 5%; background: rgba(27,58,107,0.2); filter: blur(80px); animation: float-1 20s ease-in-out infinite; }
        .orb-2 { width: 200px; height: 200px; top: 60%; right: 10%; background: rgba(123,184,224,0.12); filter: blur(80px); animation: float-2 25s ease-in-out infinite; }
        .orb-3 { width: 250px; height: 250px; bottom: 20%; left: 40%; background: rgba(42,80,144,0.1); filter: blur(80px); animation: float-3 18s ease-in-out infinite; }
        html.light .orb-1 { background: rgba(123,184,224,0.1); }
        html.light .orb-2 { background: rgba(27,58,107,0.06); }
        html.light .orb-3 { background: rgba(123,184,224,0.08); }

        /* ── Light mode text contrast fixes ── */
        /* Near-white text classes → dark for light backgrounds */
        html.light .text-white { color: #0A1628 !important; }
        html.light .text-gray-100 { color: #1F2937 !important; }
        html.light .text-gray-200 { color: #374151 !important; }
        html.light .text-gray-300 { color: #4B5563 !important; }
        html.light .text-gray-400 { color: #4B5563 !important; }
        html.light .text-gray-500 { color: #374151 !important; }
        html.light .text-slate-100 { color: #1E293B !important; }
        html.light .text-slate-200 { color: #334155 !important; }
        html.light .text-slate-300 { color: #475569 !important; }
        html.light .text-slate-400 { color: #475569 !important; }
        html.light .text-slate-500 { color: #334155 !important; }
        /* Accent colors: bump 400→600 for light mode contrast */
        html.light .text-green-400 { color: #15803D !important; }
        html.light .text-emerald-400 { color: #059669 !important; }
        html.light .text-blue-400 { color: #2563EB !important; }
        html.light .text-sky-400 { color: #0284C7 !important; }
        html.light .text-amber-400 { color: #D97706 !important; }
        html.light .text-yellow-400 { color: #CA8A04 !important; }
        html.light .text-red-400 { color: #DC2626 !important; }
        html.light .text-purple-400 { color: #9333EA !important; }
        html.light .text-purple-300 { color: #7C3AED !important; }
        html.light .text-pink-400 { color: #DB2777 !important; }
        html.light .text-orange-400 { color: #EA580C !important; }
        html.light .text-indigo-400 { color: #4F46E5 !important; }
        html.light .text-cyan-400 { color: #0891B2 !important; }
        html.light .text-teal-400 { color: #0D9488 !important; }
        /* Preserve white text inside buttons, badges, and gradient backgrounds */
        html.light .btn-primary,
        html.light .btn-gold,
        html.light .btn-danger,
        html.light .btn-success,
        html.light [class*="bg-red-5"],
        html.light [class*="bg-emerald-5"],
        html.light [class*="bg-blue-5"],
        html.light [class*="bg-green-5"],
        html.light [class*="bg-purple-5"],
        html.light [class*="bg-amber-5"],
        html.light .logo-icon,
        html.light .notif-badge,
        html.light [class*="card-grad-"] { color: #FFFFFF !important; }
        html.light .btn-primary .text-white,
        html.light .btn-gold .text-white,
        html.light .btn-danger .text-white,
        html.light [class*="bg-red-5"] .text-white,
        html.light [class*="bg-emerald-5"] .text-white,
        html.light [class*="bg-green-5"] .text-white,
        html.light [class*="bg-blue-5"] .text-white,
        html.light [class*="bg-purple-5"] .text-white { color: #FFFFFF !important; }

        /* An EXPLICIT text-* class always beats the white-on-coloured-background
           rules above. Those use [class*="bg-amber-5"] to catch solid badges, but
           the same substring also matches low-opacity tints like `bg-amber-500/10`,
           which turned "Next available ..." into white text on a near-white tint.
           Same specificity, so these must come last to win. (green/emerald already
           worked only because they happened to be redeclared further down.) */
        html.light .text-green-400 { color: #15803D !important; }
        html.light .text-emerald-400 { color: #059669 !important; }
        html.light .text-blue-400 { color: #2563EB !important; }
        html.light .text-sky-400 { color: #0284C7 !important; }
        html.light .text-amber-400 { color: #B45309 !important; }
        html.light .text-yellow-400 { color: #A16207 !important; }
        html.light .text-red-400 { color: #DC2626 !important; }
        html.light .text-purple-400 { color: #9333EA !important; }
        html.light .text-orange-400 { color: #EA580C !important; }
        html.light .text-cyan-400 { color: #0891B2 !important; }
        html.light .text-teal-400 { color: #0D9488 !important; }

        /* Hardcoded inline color overrides */
        html.light [style*="color: #9ca3af"] { color: #4B5563 !important; }
        html.light [style*="color:#9ca3af"] { color: #4B5563 !important; }
        /* White/light text on glass backgrounds in light mode */
        html.light .text-white\/70 { color: rgba(10,22,40,0.6) !important; }
        html.light .text-white\/50 { color: rgba(10,22,40,0.5) !important; }
        /* Border opacity classes - slightly more visible in light mode */
        html.light .border-white\/5 { border-color: rgba(27,58,107,0.06) !important; }
        html.light .border-white\/10 { border-color: rgba(27,58,107,0.1) !important; }
        html.light .border-white\/\[0\.06\] { border-color: rgba(27,58,107,0.08) !important; }
        /* Background opacity classes in light mode */
        html.light .bg-white\/5 { background-color: rgba(27,58,107,0.03) !important; }
        html.light .bg-white\/10 { background-color: rgba(27,58,107,0.05) !important; }
        /* Dark surface colors → light equivalents */
        html.light .bg-surface-50 { background-color: #F0F4FA !important; }
        html.light .bg-surface-100 { background-color: #E8EEF6 !important; }
        html.light .bg-surface-200 { background-color: #E1E9F3 !important; }
        html.light .bg-surface-300 { background-color: #D4DFF0 !important; }
        html.light .bg-surface-400 { background-color: #C2D4EA !important; }
        html.light .bg-navy-800,
        html.light .bg-navy-900 { background-color: #EDF2F9 !important; }
        html.light .bg-navy-700 { background-color: #E1E9F3 !important; }
        /* rgba white text in inline styles */
        html.light [style*="rgba(255,255,255,0.2)"] { color: var(--text-muted) !important; }
        html.light [style*="rgba(255,255,255,0.04)"] { background: rgba(27,58,107,0.04) !important; }
        html.light [style*="rgba(255,255,255,0.05)"] { background-color: rgba(27,58,107,0.04) !important; }
        html.light [style*="rgba(255,255,255,0.06)"] { border-color: rgba(27,58,107,0.06) !important; }
        html.light [style*="rgba(255,255,255,0.08)"] { border-color: rgba(27,58,107,0.08) !important; }
        html.light [style*="rgba(255,255,255,0.1)"] { border-color: rgba(27,58,107,0.1) !important; }
        /* Nav sidebar & mobile bottom bar: keep white text in dark-bg areas */
        html.light aside.glass .text-white,
        html.light aside .text-white { color: #FFFFFF !important; }
        html.light nav.glass .text-white { color: #FFFFFF !important; }

        /* ── Light mode: deeper accent text colors for readability ── */
        html.light .text-emerald-400 { color: #059669 !important; }
        html.light .text-emerald-300 { color: #059669 !important; }
        html.light .text-green-400 { color: #15803D !important; }
        html.light .text-green-300 { color: #16A34A !important; }
        html.light .text-red-300 { color: #DC2626 !important; }
        html.light .text-amber-300 { color: #D97706 !important; }
        html.light .text-purple-300 { color: #7C3AED !important; }
        html.light .text-blue-300 { color: #2563EB !important; }
        html.light .text-sky-300 { color: #0284C7 !important; }
        html.light .text-cyan-300 { color: #0891B2 !important; }
        /* Light mode badge/pill backgrounds - more visible tints */
        html.light [class*="bg-emerald-500\/10"] { background-color: rgba(5,150,105,0.1) !important; }
        html.light [class*="bg-emerald-500\/15"] { background-color: rgba(5,150,105,0.12) !important; }
        html.light [class*="bg-emerald-500\/20"] { background-color: rgba(5,150,105,0.12) !important; }
        html.light [class*="bg-green-500\/10"] { background-color: rgba(22,163,74,0.1) !important; }
        html.light [class*="bg-green-500\/20"] { background-color: rgba(22,163,74,0.12) !important; }
        html.light [class*="bg-red-500\/10"] { background-color: rgba(220,38,38,0.1) !important; }
        html.light [class*="bg-red-500\/15"] { background-color: rgba(220,38,38,0.12) !important; }
        html.light [class*="bg-amber-500\/10"] { background-color: rgba(217,119,6,0.1) !important; }
        html.light [class*="bg-purple-500\/10"] { background-color: rgba(124,58,237,0.1) !important; }
        html.light [class*="bg-dublin-sky\/10"] { background-color: rgba(27,109,181,0.08) !important; }
        html.light [class*="bg-dublin-sky\/15"] { background-color: rgba(27,109,181,0.1) !important; }
        /* Light mode border colors for badge outlines */
        html.light [class*="border-emerald-500\/20"] { border-color: rgba(5,150,105,0.2) !important; }
        html.light [class*="border-green-500\/20"] { border-color: rgba(22,163,74,0.2) !important; }
        html.light [class*="border-red-500\/20"] { border-color: rgba(220,38,38,0.2) !important; }
        html.light [class*="border-amber-500\/20"] { border-color: rgba(217,119,6,0.2) !important; }

        /* ── Muted button hover (theme-aware) ── */
        .hover-muted-btn { transition: background-color .15s, color .15s; }
        .hover-muted-btn:hover { background-color: rgba(27,42,74,0.15); color: var(--text-primary) !important; }
        html.light .hover-muted-btn:hover { background-color: rgba(27,58,107,0.06); }

        /* ── Glass panels (iOS 26 style) ── */
        .glass {
            background: var(--glass-bg);
            backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
            -webkit-backdrop-filter: blur(40px) saturate(180%) brightness(1.05);
            border: 1px solid var(--glass-border);
            box-shadow: var(--glass-shine);
        }
        .glass-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            box-shadow: var(--card-shadow), var(--glass-shine);
            backdrop-filter: blur(20px) saturate(150%);
            -webkit-backdrop-filter: blur(20px) saturate(150%);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .glass-card:hover {
            border-color: var(--border-hover);
            box-shadow: 0 8px 32px -8px rgba(0,0,0,0.3), 0 0 0 1px rgba(123,184,224,0.06);
        }
        html.light .glass-card:hover {
            box-shadow: 0 8px 32px -8px rgba(27,58,107,0.15), 0 1px 3px rgba(27,58,107,0.08);
        }

        /* ── Hover lift ──
           Layered shadow (a tight contact shadow + a wide soft one) instead of a
           single hard drop, and a smaller rise. Transitioning transform/box-shadow
           rather than `all` also keeps the card off the layout path on hover. */
        .hover-lift { transition: transform 0.35s cubic-bezier(0.2,0.7,0.3,1), box-shadow 0.35s cubic-bezier(0.2,0.7,0.3,1), border-color 0.35s ease; }
        .hover-lift:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.30), 0 14px 34px -8px rgba(0,0,0,0.38); }
        html.light .hover-lift:hover { box-shadow: 0 2px 6px rgba(16,34,64,0.08), 0 16px 38px -10px rgba(16,34,64,0.16); }
        @media (prefers-reduced-motion: reduce) {
            .hover-lift:hover { transform: none; }
        }

        /* ── Card image zoom ── */
        .img-zoom { transition: transform 0.6s cubic-bezier(0.2,0.7,0.3,1); }
        .group:hover .img-zoom { transform: scale(1.05); }
        @media (prefers-reduced-motion: reduce) {
            .group:hover .img-zoom { transform: none; }
        }

        /* ══ Listing card ══════════════════════════════════════════════════
           Solid surface + hairline + two-layer shadow instead of glass/blur, so
           photo edges stay crisp. Price sits on a gradient scrim rather than a
           black pill. NOTE: every colour on the photo is hard-coded white with
           !important because the light-mode ".text-white -> #0A1628" rule above
           would otherwise turn text on the scrim near-black on near-black. */
        .pcard {
            display: flex; flex-direction: column; overflow: hidden;
            border-radius: 18px;
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            box-shadow: 0 1px 2px rgba(0,0,0,0.22), 0 8px 20px -6px rgba(0,0,0,0.30);
            transition: transform .45s cubic-bezier(.2,.7,.3,1),
                        box-shadow .45s cubic-bezier(.2,.7,.3,1),
                        border-color .45s ease;
        }
        html.light .pcard {
            background: #FFFFFF;
            box-shadow: 0 1px 2px rgba(16,34,64,0.04), 0 8px 24px -6px rgba(16,34,64,0.08);
        }
        .pcard:hover {
            transform: translateY(-4px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.24), 0 24px 48px -12px rgba(0,0,0,0.45);
            border-color: var(--border-hover);
        }
        html.light .pcard:hover {
            box-shadow: 0 4px 8px rgba(16,34,64,0.06), 0 24px 48px -12px rgba(16,34,64,0.15);
        }
        .pcard-ph { position: relative; overflow: hidden; aspect-ratio: 4/3; background: #0b1526; }
        .pcard-ph img { width: 100%; height: 100%; object-fit: cover; display: block;
            transition: transform .5s cubic-bezier(.2,.7,.3,1); }
        .pcard:hover .pcard-ph img { transform: scale(1.05); }
        .pcard-scrim {
            position: absolute; inset: auto 0 0 0; height: 64%; pointer-events: none;
            background: linear-gradient(to top, rgba(4,10,22,0.92) 0%, rgba(4,10,22,0.62) 30%, rgba(4,10,22,0.18) 62%, rgba(4,10,22,0) 100%);
        }
        /* Awaiting-photo state. Quiet and honest - the previous fallback rendered
           the app's own launcher icon at full bleed, so every un-photographed
           property looked like a listing whose photo had failed to load. The
           price still sits on the scrim, so the card keeps its shape. */
        .pcard-noimg {
            position: absolute; inset: 0;
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
            /* A brand-navy panel, not a grey box. The scrim that carries the price
               darkens the lower half of this tile either way, and a grey-to-black
               fade read as a broken image; a deliberate navy surface reads as a
               design choice. Content sits above the scrim's midpoint. */
            background: linear-gradient(155deg, #1B3A6B 0%, #24497F 55%, #1B3A6B 100%);
            color: rgba(255,255,255,0.72);
            font-size: 12px; letter-spacing: .02em;
            padding-bottom: 34px;
        }
        html.light .pcard-noimg {
            background: linear-gradient(155deg, #E8EFF9 0%, #DCE7F5 55%, #E8EFF9 100%);
            color: #6B7C96;
        }
        .pcard-noimg svg { opacity: .6; }
        .pcard-noimg::before { content: ""; position: absolute; inset: 0;
            background: radial-gradient(120% 80% at 80% 0%, rgba(123,184,224,0.28), transparent 60%); }
        .pcard-noimg-type { position: relative; font-family: var(--font-display, inherit); font-weight: 700;
            font-size: 22px; letter-spacing: -0.01em; color: rgba(255,255,255,0.92); }
        .pcard-noimg-sub { position: relative; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
            color: rgba(255,255,255,0.55); }
        html.light .pcard-noimg-type { color: #1B3A6B; }
        html.light .pcard-noimg-sub { color: #6B7C96; }

        /* Explore page: the facts line under the heading and the "available now" chip. */
        /* Pills, not dot-separated text: separators break at a line wrap and a
           wrapped second line then opens with a stray dot on a phone. */
        .xp-facts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none;
            font-size: 12.5px; color: var(--text-secondary); }
        .xp-facts li { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px;
            background: var(--bg-elevated); border: 1px solid var(--border-color); }
        .xp-facts strong { color: var(--text-primary); font-weight: 600; }
        .xp-facts .xp-now { border-color: rgba(34,197,94,0.35); background: rgba(34,197,94,0.08); }
        .xp-facts .xp-now strong { color: #16A34A; }
        html:not(.light) .xp-facts .xp-now strong { color: #4ADE80; }
        .xp-filter-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%;
            padding: 12px 16px; border-radius: 14px; font-size: 13px; font-weight: 600;
            color: var(--text-primary); background: var(--bg-secondary); border: 1px solid var(--border-color); }
        /* Phone only. This rule loads after Tailwind, so its display:flex beat
           sm:hidden and the toggle showed on desktop above an open search bar. */
        @media (min-width: 640px) { .xp-filter-toggle { display: none; } }

        /* ── Explore hero ──
           Dark is the default and is designed first; every colour that is not a
           token gets an explicit html.light override below, because the
           attribute-selector overrides further up can and have turned text
           white on white. */
        .xp-hero { display: grid; gap: 26px; align-items: center; margin: 4px 0 30px; }
        @media (min-width: 1024px) { .xp-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 44px; margin-bottom: 34px; } }
        .xp-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
            font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-sky); }
        .xp-kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--accent-gold); }
        .xp-h1 { font-family: var(--font-display, 'Outfit', sans-serif); font-weight: 800; letter-spacing: -0.028em;
            line-height: 1.02; font-size: clamp(34px, 4.7vw, 60px); color: var(--text-primary); text-wrap: balance; margin: 0; }
        .xp-lede { margin-top: 16px; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; color: var(--text-secondary); max-width: 50ch; }
        .xp-lede-link { color: var(--accent-sky, #7BB8E0); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
        .xp-lede-link:hover { color: var(--text-primary); }
        .xp-hero .xp-facts { margin-top: 22px; }

        .xp-collage-wrap { position: relative; }
        .xp-collage-wrap::before { content: ""; position: absolute; inset: -6% -4%; z-index: -1; border-radius: 40px;
            background: radial-gradient(55% 55% at 55% 45%, rgba(123,184,224,0.22), transparent 72%); filter: blur(28px); }
        html.light .xp-collage-wrap::before { background: radial-gradient(55% 55% at 55% 45%, rgba(27,58,107,0.10), transparent 72%); }
        .xp-collage { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
            gap: 10px; aspect-ratio: 5 / 4; }
        /* Cells are min-size 0 and the image is absolutely positioned, or the
           photo's intrinsic height sizes the row and the other tiles collapse
           to slivers. Grid children default to min-height:auto. */
        .xp-collage a { position: relative; display: block; overflow: hidden; border-radius: 18px; min-width: 0; min-height: 0;
            background: var(--bg-elevated); border: 1px solid var(--border-color);
            box-shadow: 0 10px 30px -12px rgba(0,0,0,0.55); }
        html.light .xp-collage a { box-shadow: 0 10px 30px -14px rgba(16,34,64,0.25); }
        .xp-collage a:first-child { grid-row: 1 / span 2; }
        .xp-collage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
            transform: scale(1.01); transition: transform .9s cubic-bezier(.2,.7,.3,1); }
        .xp-collage a:hover img { transform: scale(1.06); }
        .xp-collage .cap { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px);
            padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis;
            background: rgba(8,16,32,0.58); border: 1px solid rgba(255,255,255,0.14);
            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
        /* Text on a photo scrim is white in BOTH themes. */
        .xp-collage .cap, html.light .xp-collage .cap { color: #FFFFFF; }
        @media (max-width: 1023px) {
            .xp-collage { aspect-ratio: 16 / 7; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: 1fr; gap: 8px; }
            .xp-collage a:first-child { grid-row: auto; }
            .xp-collage a:nth-child(n+4) { display: none; }
            .xp-collage a { border-radius: 14px; }
            .xp-collage .cap { display: none; }
            .xp-collage a:first-child .cap { display: block; }
        }

        /* ── Joined search bar, lg and up. Doubled class beats Tailwind's
           lg:grid-cols-5 on specificity without an !important. ── */
        @media (min-width: 1024px) {
            .xp-search-card.xp-search-card { padding: 7px; border-radius: 999px; }
            .xp-search.xp-search { display: grid; grid-template-columns: 1.2fr 1fr 1fr .8fr auto; gap: 0; align-items: stretch; }
            .xp-search input.ds-input { background: transparent; border: 0; padding: 0; border-radius: 0;
                font-size: 14.5px; font-weight: 600; box-shadow: none; }
            .xp-search input.ds-input:focus { box-shadow: none; }
            .xp-search > div { padding: 8px 18px; border-right: 1px solid var(--border-color);
                display: flex; flex-direction: column; justify-content: center; }
            .xp-search > div:nth-last-child(2) { border-right: 0; }
            .xp-search > div:last-child { padding: 0; border: 0; }
            .xp-search label { margin-bottom: 1px; }
            .xp-search select.ds-input { background: transparent; border: 0; padding: 0 22px 0 0; border-radius: 0;
                font-size: 14.5px; font-weight: 600; box-shadow: none; }
            .xp-search select.ds-input:focus { box-shadow: none; }
            .xp-search button { height: 100%; border-radius: 999px; padding-left: 26px; padding-right: 26px; }
        }

        /* ── Why strip ── */
        .xp-why { margin-top: 56px; padding-top: 36px; border-top: 1px solid var(--border-color); }
        .xp-why-head h2 { font-family: var(--font-display, 'Outfit', sans-serif); font-weight: 700; font-size: 22px;
            letter-spacing: -0.015em; color: var(--text-primary); margin: 0 0 8px; }
        .xp-why-head p { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); max-width: 62ch; margin: 0; }
        .xp-why-grid { display: grid; gap: 14px; margin-top: 22px; }
        @media (min-width: 768px) { .xp-why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
        .xp-why-item { position: relative; padding: 20px 20px 22px; border-radius: 18px;
            background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: var(--glass-shine); }
        .xp-why-item::before { content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 2px; border-radius: 2px;
            background: linear-gradient(90deg, var(--accent-gold), transparent); opacity: .8; }
        .xp-why-icon { display: inline-flex; width: 36px; height: 36px; border-radius: 12px; align-items: center; justify-content: center;
            color: var(--accent-sky); background: rgba(123,184,224,0.12); border: 1px solid rgba(123,184,224,0.18); margin-bottom: 12px; }
        html.light .xp-why-icon { background: rgba(27,109,181,0.08); border-color: rgba(27,109,181,0.16); }
        .xp-why-item h3 { font-weight: 700; font-size: 15px; color: var(--text-primary); margin: 0 0 6px; letter-spacing: -0.01em; }
        .xp-why-item p { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); margin: 0; }

        /* ── Legal pages ── */
        .legal { max-width: 46rem; margin: 0 auto; padding: 28px 16px 56px; color: var(--text-secondary); font-size: 15px; line-height: 1.7; }
        /* Rich text typed into the property description box. */
        .rich p { margin: 0 0 10px; }
        .rich p:last-child { margin-bottom: 0; }
        .rich ul { list-style: disc; padding-left: 20px; margin: 0 0 10px; }
        .rich li { margin: 2px 0; }
        .rich strong { color: var(--text-primary); font-weight: 600; }
        .legal-crumbs { font-size: 12px; color: var(--text-muted); margin-bottom: 14px; }
        .legal-crumbs a { color: var(--accent-sky); }
        .legal-crumbs span { margin: 0 6px; }
        .legal h1 { font-family: var(--font-display, 'Outfit', sans-serif); font-weight: 800; font-size: clamp(28px, 4vw, 38px);
            letter-spacing: -0.02em; color: var(--text-primary); margin: 0 0 6px; line-height: 1.1; }
        .legal-meta { font-size: 13px; color: var(--text-muted); margin: 0 0 22px; }
        .legal-lede { font-size: 16.5px; color: var(--text-primary); padding: 16px 18px; border-radius: 14px;
            background: var(--bg-card); border: 1px solid var(--border-color); margin: 0 0 26px; }
        .legal h2 { font-family: var(--font-display, 'Outfit', sans-serif); font-weight: 700; font-size: 20px; color: var(--text-primary);
            margin: 30px 0 8px; letter-spacing: -0.01em; }
        .legal h3 { font-weight: 600; font-size: 15px; color: var(--text-primary); margin: 18px 0 4px; }
        .legal p { margin: 0 0 12px; }
        .legal ul { margin: 0 0 14px 1.2em; padding: 0; }
        .legal li { margin: 0 0 6px; }
        .legal a { color: var(--accent-sky); text-decoration: underline; text-underline-offset: 2px; }
        .legal strong { color: var(--text-primary); font-weight: 600; }
        .legal code { font-size: 13px; padding: 1px 6px; border-radius: 6px; background: var(--bg-elevated); border: 1px solid var(--border-color); color: var(--text-primary); }
        /* display:block + overflow-x lets a wide table scroll inside its own box
           on a phone instead of pushing the whole page sideways. */
        .legal-table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 14px; margin: 8px 0 14px; }
        .legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 9px 10px; border-top: 1px solid var(--border-color); }
        .legal-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); border-top: 0; }
        .legal-foot { margin-top: 34px; padding-top: 16px; border-top: 1px solid var(--border-color); font-size: 13px; color: var(--text-muted); }

        /* ── Public footer ── */
        .site-foot { margin-top: 56px; border-top: 1px solid var(--border-color); background: var(--bg-primary); }
        html.light .site-foot { background: #EAF1FA; }
        .site-foot-in { max-width: 80rem; margin: 0 auto; padding: 36px 16px 20px; display: grid; gap: 26px 32px;
            grid-template-columns: 1fr; }
        /* Two columns from the smallest phone: stacked, the footer was a
           screen and a half of links (Nils, 2026-09-30). */
        .site-foot-in { grid-template-columns: 1fr 1fr; }
        .site-foot-brand { grid-column: 1 / -1; }
        @media (min-width: 640px) { .site-foot-in { grid-template-columns: 1fr 1fr; padding-left: 24px; padding-right: 24px; } }
        @media (min-width: 1024px) { .site-foot-brand { grid-column: auto; } }
        @media (min-width: 1024px) { .site-foot-in { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; } }
        @media (min-width: 1024px) { .site-foot-in { padding-left: 32px; padding-right: 32px; } }
        .site-foot-logo { font-family: var(--font-display, 'Outfit', sans-serif); font-weight: 800; font-size: 20px; color: var(--text-primary); letter-spacing: -0.02em; }
        .site-foot-logo span { color: var(--accent-sky); }
        .site-foot-brand p { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-secondary); max-width: 34ch; }
        .site-foot-col { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; }
        .site-foot-col h4 { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
        .site-foot-col a, .site-foot-col span { color: var(--text-secondary); }
        .site-foot-col a:hover { color: var(--text-primary); }
        .site-foot-line { max-width: 80rem; margin: 0 auto; padding: 14px 16px 22px; font-size: 12px; color: var(--text-muted);
            border-top: 1px solid var(--border-color); }
        @media (min-width: 640px) { .site-foot-line { padding-left: 24px; padding-right: 24px; } }
        @media (min-width: 1024px) { .site-foot-line { padding-left: 32px; padding-right: 32px; } }
        /* AuraicPulse credit: the footer's last line, same size and colour. */
        .site-foot-line:has(+ .credit) { padding-bottom: 6px; }
        .site-foot .credit { max-width: 80rem; margin: 0 auto; padding: 0 16px 22px; font-size: 12px; color: var(--text-muted); }
        .site-foot .credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
        .site-foot .credit a:hover { color: var(--text-secondary); }
        @media (min-width: 640px) { .site-foot .credit { padding-left: 24px; padding-right: 24px; } }
        @media (min-width: 1024px) { .site-foot .credit { padding-left: 32px; padding-right: 32px; } }

        /* ── Landing pages ── */
        .lp-hero { max-width: 56rem; margin: 4px 0 8px; }
        .lp-lede { max-width: 62ch; }
        .lp-h2 { font-family: var(--font-display, 'Outfit', sans-serif); font-weight: 700; font-size: 20px; letter-spacing: -0.015em; color: var(--text-primary); margin: 0; }
        .lp-faq { margin-top: 48px; max-width: 46rem; }
        .key-takeaways { margin-top: 22px; }
        .kt-h { font-family: var(--font-display, 'Outfit', sans-serif); font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 10px; }
        .lp-byline { margin: 26px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-muted); }
        .xp-guide { margin-top: 44px; }
        .xp-guide-area { margin-top: 22px; }
        .xp-guide-area h3, .xp-guide-h3 { font-family: var(--font-display, 'Outfit', sans-serif); font-weight: 700; font-size: 17px; color: var(--text-primary); margin: 0 0 8px; }
        .xp-guide-h3 { margin-top: 22px; }
        .xp-guide-count { font-family: var(--font-body, 'DM Sans', sans-serif); font-weight: 500; font-size: 12px; color: var(--text-muted); margin-left: 6px; }
        .xp-guide-area p, .xp-guide-p { font-size: 14.5px; line-height: 1.7; color: var(--text-secondary); margin: 0 0 10px; max-width: 78ch; }
        .lp-others { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--border-color); }
        .lp-others-list { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 14px 0 0; padding: 0; list-style: none; }
        .lp-others-list a { display: inline-block; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 500;
            color: var(--text-secondary); background: var(--bg-elevated); border: 1px solid var(--border-color); }
        .lp-others-list a:hover { color: var(--text-primary); border-color: var(--border-hover); }
        /* Server-rendered cards have no button element; the CTA is a span inside the link. */
        .pcard span.pcard-cta { display: flex; }

        /* ── Who stays with us ── */
        .xp-who { margin-top: 44px; }
        .xp-who-grid { display: grid; gap: 12px; margin-top: 20px; }
        @media (min-width: 640px) { .xp-who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
        @media (min-width: 1024px) { .xp-who-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
        .xp-who-item { display: block; padding: 18px 18px 20px; border-radius: 16px; background: var(--bg-card);
            border: 1px solid var(--border-color); transition: border-color .2s ease, transform .3s cubic-bezier(.2,.7,.3,1); }
        .xp-who-item:hover { border-color: var(--border-hover); transform: translateY(-2px); }
        .xp-who-item { position: relative; }
        .xp-who-item h3 { font-weight: 700; font-size: 15px; color: var(--text-primary); margin: 0 0 6px; letter-spacing: -0.01em; }
        /* The link is the heading; the pseudo-element makes the whole card its hit area. */
        .xp-who-item h3 a { color: inherit; text-decoration: none; }
        .xp-who-item h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
        .xp-who-item p { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); margin: 0; }
        .xp-who-areas { margin: 16px 0 0; font-size: 12.5px; color: var(--text-muted); }

        /* Mailing list card: one gold rule, so the last block on the page has a reason to be looked at. */
        .xp-notify { position: relative; overflow: hidden; }
        .xp-notify::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
            background: linear-gradient(90deg, transparent, var(--accent-gold), transparent); }

        /* Card hover in the dark: a sky hairline rather than a bigger drop shadow, which vanishes on navy. */
        html:not(.light) .pcard:hover { box-shadow: 0 2px 4px rgba(0,0,0,0.24), 0 24px 48px -12px rgba(0,0,0,0.5), 0 0 0 1px rgba(123,184,224,0.22); }
        .xp-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
            font-size: 12px; font-weight: 600; cursor: pointer; user-select: none;
            color: var(--text-secondary); background: var(--bg-elevated); border: 1px solid var(--border-color);
            transition: background .2s ease, color .2s ease, border-color .2s ease; }
        .xp-chip:hover { border-color: var(--border-hover); color: var(--text-primary); }
        .xp-chip.is-on, html.light .xp-chip.is-on { background: rgba(34,197,94,0.14); border-color: rgba(34,197,94,0.45);
            color: #15803D; }
        html:not(.light) .xp-chip.is-on { color: #4ADE80; }
        /* Date-first overview (_date_panel.html) */
        .xp-dp { border: 1px solid var(--border-color); }
        .xp-dp-col { min-width: 0; }
        .xp-dp-h { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--text-primary); margin-bottom: 8px; }
        .xp-dp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; margin-bottom: 6px;
                     border-radius: 12px; border: 1px solid var(--border-color); color: var(--text-primary); font-size: 13px;
                     min-height: 44px; transition: border-color .15s, background .15s; }
        .xp-dp-row:hover { border-color: var(--border-hover); background: var(--bg-elevated); }
        .xp-dp-alert { padding: 12px; border-radius: 14px; background: rgba(212,160,23,0.08); border: 1px solid rgba(212,160,23,0.22); }
        html.light .xp-dp-alert { background: rgba(212,160,23,0.08); }
        .pcard-onphoto {
            position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2;
            display: flex; align-items: flex-end; justify-content: space-between; gap: 10px;
        }
        /* The amount carries the weight; only the "/mo" suffix is demoted. Styling
           every child span shrank the number itself and left a giant lone €. */
        .pcard-price, html.light .pcard-price {
            color: #FFFFFF !important; font-size: 19px; font-weight: 700; line-height: 1.1;
            letter-spacing: -0.02em; text-shadow: 0 1px 16px rgba(0,0,0,0.6), 0 1px 3px rgba(0,0,0,0.4);
            display: flex; align-items: baseline; gap: 1px;
        }
        .pcard-per, html.light .pcard-per {
            color: #FFFFFF !important; font-weight: 400; font-size: 12px; opacity: .82;
        }
        .pcard-count, html.light .pcard-count {
            color: #FFFFFF !important; font-size: 11px; font-weight: 600;
            display: flex; align-items: center; gap: 5px;
            padding: 5px 9px; border-radius: 6px; margin-bottom: 1px;
            background: rgba(0,0,0,0.45); backdrop-filter: blur(8px);
        }
        .pcard-verified, html.light .pcard-verified {
            position: absolute; top: 12px; left: 12px; z-index: 3;
            display: flex; align-items: center; gap: 5px;
            font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
            padding: 6px 10px; border-radius: 7px; color: #FFFFFF !important;
            /* Dark fill, not white glass. This badge sits at the TOP of the photo,
               outside the scrim, so a light-glass chip disappeared entirely
               (1.0:1) over a bright interior shot - invisible the day real
               photos replace the dark placeholder. */
            background: rgba(8,16,32,0.55); backdrop-filter: blur(10px) saturate(160%);
            border: 1px solid rgba(255,255,255,0.22);
        }
        .pcard-fav {
            position: absolute; top: 12px; right: 12px; z-index: 3;
            width: 34px; height: 34px; border-radius: 999px;
            display: grid; place-items: center; border: 0; cursor: pointer;
            background: rgba(8,16,32,0.42); backdrop-filter: blur(10px);
            color: rgba(255,255,255,0.92); transition: .25s cubic-bezier(.2,.7,.3,1);
        }
        .pcard-fav:hover { background: rgba(8,16,32,0.62); transform: scale(1.08); }
        .pcard-fav.is-fav, html.light .pcard-fav.is-fav { background: #E5484D; color: #fff !important; }
        .pcard-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
        /* Two lines before clamping, not one. Real titles ("Apt 3 2 Bedroom
           Apartment") were being cut to "Apt 3 2 Bedroom Apart…" on a single
           line, which hid the part that distinguishes one unit from another.
           A fixed min-height keeps the cards' facts and buttons aligned across
           the row whether a title runs to one line or two. */
        .pcard-title { font-size: 15.5px; font-weight: 600; letter-spacing: -0.015em; margin: 0;
            color: var(--text-primary); overflow: hidden;
            display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
            line-height: 1.35; min-height: calc(2 * 1.35em); }
        /* --text-secondary, not --text-muted: muted measured 3.67:1 on the card
           surface in dark mode, under the 4.5:1 needed at 13px. */
        .pcard-facts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
            font-size: 13px; color: var(--text-secondary); }
        .pcard-facts i { font-style: normal; opacity: .45; }
        /* Availability as an outlined chip - states the date plainly without the
           tinted admin-panel block. Dot carries the colour, text stays neutral. */
        .pcard-avail {
            display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
            font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: 999px;
            border: 1px solid var(--border-hover); background: var(--bg-elevated);
            color: var(--text-secondary);
        }
        .pcard-dot { width: 7px; height: 7px; border-radius: 999px; flex: none; position: relative; }
        .pcard-dot.now { background: #22C55E; }
        .pcard-dot.soon { background: #E8BC40; }
        /* Fully booked: no gap long enough to let. Red, not amber, because
           "next available in three weeks" and "you cannot have it" are
           different answers and should not look the same. */
        .pcard-dot.full { background: #DC5B5B; }
        .pcard-dot.now::after {
            content: ''; position: absolute; inset: -4px; border-radius: 999px;
            background: #22C55E; opacity: .28; animation: pcardPulse 2.4s ease-in-out infinite;
        }
        @keyframes pcardPulse { 0%,100% { transform: scale(.8); opacity: .28 } 50% { transform: scale(1.35); opacity: 0 } }
        /* Solid navy fill, no gradient. Effort goes into the hover instead. */
        .pcard-cta, html.light .pcard-cta {
            margin-top: auto; width: 100%; border: 0; cursor: pointer;
            padding: 11px; border-radius: 12px;
            font-size: 14px; font-weight: 600; color: #FFFFFF !important;
            background: #1B3A6B; box-shadow: 0 1px 2px rgba(0,0,0,0.2);
            display: flex; align-items: center; justify-content: center; gap: 8px;
            transition: .25s cubic-bezier(.2,.7,.3,1);
        }
        .pcard-cta:hover, html.light .pcard-cta:hover {
            background: #14295A; transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(20,41,90,0.42);
        }
        @media (prefers-reduced-motion: reduce) {
            .pcard:hover { transform: none }
            .pcard:hover .pcard-ph img { transform: none }
            .pcard-cta:hover { transform: none }
            .pcard-dot.now::after { animation: none }
        }


        /* ── Light-mode sidebar ──
           The sidebar keeps its dark navy background in BOTH themes, but its nav
           links use var(--text-secondary), which flips to #2D4A6F in light mode:
           dark ink on a dark panel, measured 1.47:1. Re-assert the dark token set
           inside the sidebar so it stays legible. */
        /* ── Desktop sidebar, light mode ──
           It used to keep its dark navy panel in BOTH themes, which meant a
           near-black column beside a near-white page, light-mode borders drawn
           on top of it, and a stack of `!important` overrides forcing pale ink
           back over Tailwind's dark utility classes. That combination is what
           read as "weird grey blue with shitty borders", and those overrides
           have caused white-on-white three separate times.

           Light mode now gets a genuinely light sidebar, so the default token
           set is already correct and almost none of the forcing is needed. */
        html.light #desktop-sidebar {
            --sidebar-bg: #FFFFFF;
            --sidebar-border: #E3EAF4;
            --sidebar-hover: rgba(27,58,107,0.055);
        }
        html.dark #desktop-sidebar, :root #desktop-sidebar {
            --sidebar-bg: rgba(15,20,35,0.88);
            --sidebar-border: rgba(255,255,255,0.07);
            --sidebar-hover: rgba(255,255,255,0.05);
        }
        /* Internal rules (brand bar, footer) use --border-color; inside the
           sidebar that must follow the sidebar's own border, not the page's. */
        html.light #desktop-sidebar [style*="border-color: var(--border-color)"],
        html.light #desktop-sidebar .border-b,
        html.light #desktop-sidebar .border-t { border-color: var(--sidebar-border) !important; }

        /* Tailwind colour utilities on the links (text-gray-*, navy) still win
           over the token, so ink is asserted once - but dark ink now, matching
           the light panel underneath it. */
        html.light #desktop-sidebar,
        html.light #desktop-sidebar a,
        html.light #desktop-sidebar a span,
        html.light #desktop-sidebar p,
        html.light #desktop-sidebar h1,
        html.light #desktop-sidebar h2,
        html.light #desktop-sidebar h3,
        html.light #desktop-sidebar label,
        html.light #desktop-sidebar button { color: #2C3E58 !important; }
        html.light #desktop-sidebar .text-xs,
        html.light #desktop-sidebar [class*="text-[10px]"] { color: #7C8CA5 !important; }
        /* Brand: #7BB8E0 is a 1.9:1 whisper on white. */
        html.light #desktop-sidebar .text-dublin-sky { color: #1B6DB5 !important; }
        html.light #desktop-sidebar .nav-link-active,
        html.light #desktop-sidebar .nav-link-active span { color: #14355F !important; }
        /* Badges keep their own white-on-colour treatment - but ONLY where the
           colour is actually painted. `[class*="bg-red-5"]` also matches the
           utility name `hover:bg-red-500/10`, so Sign Out (which is transparent
           until hovered) was forced to white text and vanished into the white
           panel. Excluding hover/focus variants is the whole fix; this is the
           same trap `[class*="bg-amber-5"]` caused before. */
        html.light #desktop-sidebar .notif-badge,
        html.light #desktop-sidebar [class*="bg-red-5"]:not([class*="hover:"]):not([class*="focus:"]),
        html.light #desktop-sidebar [class*="bg-emerald-5"]:not([class*="hover:"]):not([class*="focus:"]) { color: #FFFFFF !important; }
        /* Sign Out reads as a quiet destructive action, not a filled button. */
        html.light #desktop-sidebar a[href="/logout"] { color: #B4232A !important; }
        /* hover:bg-white/5 is invisible on a white panel. */
        html.light #desktop-sidebar a:hover:not(.nav-link-active) { background: var(--sidebar-hover) !important; }
        html.light #desktop-sidebar a[href="/logout"]:hover { background: rgba(220,38,38,0.07) !important; }

        /* ── F2: arbitrary-value chips ──
           bg-[#1B2A4A] matches none of the [class*="bg-*-5"] preserve selectors
           above, so active filter pills rendered #0A1628 on #1B2A4A = 1.27:1. */
        html.light [class*="bg-[#1B2A4A]"],
        html.light [class*="bg-[#1B2A4A]"] .text-white { color: #FFFFFF !important; }
        /* Navy buttons and tabs (bg-dublin-navy) keep white text in light mode. */
        html.light .bg-dublin-navy.text-white,
        html.light .bg-dublin-navy .text-white { color: #FFFFFF !important; }

        /* The same dark fills are also applied as INLINE styles on ~90 elements
           across 40 templates, which the class selector above cannot see. An
           attribute selector does reach them, because it matches the style
           attribute's text. Without this, "Send Offer" on the dashboard and
           "Send Test Email" in the console rendered #0A1628 on #1B2A4A - a dark
           smudge on a dark button at 1.27:1. */
        /* Chained attribute selectors: BOTH must match the same style attribute,
           so this only fires when the hex is used as a BACKGROUND. Matching the
           hex alone also hit elements using these colours as their TEXT colour
           (stat figures, icons) and forced them white-on-white. */
        html.light [style*="background"][style*="#1B2A4A"]:not([style*="background-color: rgba"]):not([style*="background: rgba"]):not([style*="background-color:rgba"]):not([style*="background:rgba"]),
        html.light [style*="background"][style*="#1b2a4a"]:not([style*="background-color: rgba"]):not([style*="background: rgba"]):not([style*="background-color:rgba"]):not([style*="background:rgba"]),
        html.light [style*="background"][style*="#1B3A6B"]:not([style*="background-color: rgba"]):not([style*="background: rgba"]):not([style*="background-color:rgba"]):not([style*="background:rgba"]),
        html.light [style*="background"][style*="#1b3a6b"]:not([style*="background-color: rgba"]):not([style*="background: rgba"]):not([style*="background-color:rgba"]):not([style*="background:rgba"]),
        html.light [style*="background"][style*="#2E7D5B"]:not([style*="background-color: rgba"]):not([style*="background: rgba"]):not([style*="background-color:rgba"]):not([style*="background:rgba"]),
        html.light [style*="background"][style*="#2e7d5b"]:not([style*="background-color: rgba"]):not([style*="background: rgba"]):not([style*="background-color:rgba"]):not([style*="background:rgba"]),
        html.light [style*="background"][style*="#14295A"]:not([style*="background-color: rgba"]):not([style*="background: rgba"]):not([style*="background-color:rgba"]):not([style*="background:rgba"]),
        html.light [style*="background"][style*="#1B2A4A"] .text-white,
        html.light [style*="background"][style*="#1B3A6B"] .text-white,
        html.light [style*="background"][style*="#2E7D5B"] .text-white { color: #FFFFFF !important; }

        /* .text-emerald is aliased to #7BB8E0 in the Tailwind config and had no
           light-mode override, unlike .text-dublin-sky. 77 instances across 20
           pages, including the headline price on property detail at 2.04:1. */
        html.light .text-emerald,
        html.light .text-emerald-DEFAULT { color: #1B6DB5 !important; }

        /* A selected tab must not read as the disabled one. #7BB8E0 on the pale
           active pill measured 1.74:1 - fainter than its inactive siblings. */
        html.light .tab-active,
        html.light [class*="tab"][class*="active"] { color: #1B4F82 !important; }

        /* Dark-mode readability floor for muted labels and sky-filled buttons. */
        html.dark .text-gray-600 { color: #8FA3BE !important; }

        /* Grid/flex children default to min-width:auto, so any wide child (a
           600px chart, a long unbroken string) can blow the track out past the
           viewport and clip its siblings. */
        .grid > * { min-width: 0; }
        /* Long unbroken tokens (a pasted URL, a 100-char title) must wrap
           rather than overrun the column beside them. */
        .break-anywhere { overflow-wrap: anywhere; word-break: break-word; }
        html.dark [style*="background: #7BB8E0"],
        html.dark [style*="background-color: #7BB8E0"] { color: #0A1628 !important; }

        /* ── F6: brand sky on white ──
           #7BB8E0 on white is 2.13:1. Hits the brand wordmark, prices, booking
           refs and the grid availability pills on ~17 pages. */
        html.light .text-dublin-sky { color: #1B6DB5 !important; }

        /* ── Text-on-photo pills ──
           These are inline-styled dark pills (price, photo count) sitting on top of
           a photo, so the light-mode `.text-white -> #0A1628` rule above turns them
           near-black on near-black and the price becomes unreadable. Keep them white
           in both themes, and give them a hairline so they read as a considered chip
           rather than a flat black box. */
        [style*="rgba(0,0,0,0.65)"].text-white,
        [style*="rgba(0,0,0,0.6)"].text-white,
        html.light [style*="rgba(0,0,0,0.65)"].text-white,
        html.light [style*="rgba(0,0,0,0.6)"].text-white { color: #FFFFFF !important; }
        [style*="rgba(0,0,0,0.65)"].text-white,
        [style*="rgba(0,0,0,0.6)"].text-white {
            border: 1px solid rgba(255,255,255,0.14);
            box-shadow: 0 1px 6px rgba(0,0,0,0.30);
        }

        /* ── Theme toggle switch ── */
        .theme-toggle-track {
            width: 52px; height: 28px; border-radius: 14px;
            background: #1E3458; position: relative; cursor: pointer; transition: background 0.3s ease;
        }
        html.light .theme-toggle-track { background: #D4E2F4; }
        .theme-toggle-thumb {
            width: 22px; height: 22px; border-radius: 50%;
            background: linear-gradient(135deg, #7BB8E0, #5A9CC8);
            position: absolute; top: 3px; left: 3px;
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: flex; align-items: center; justify-content: center;
            box-shadow: 0 2px 8px rgba(123,184,224,0.3);
        }
        html.light .theme-toggle-thumb {
            transform: translateX(24px);
            background: linear-gradient(135deg, #1B3A6B, #2A5090);
            box-shadow: 0 2px 8px rgba(27,58,107,0.3);
        }
        .theme-toggle-thumb svg { width: 14px; height: 14px; }
        .dark .theme-toggle-thumb svg.icon-sun { display: none; }
        .dark .theme-toggle-thumb svg.icon-moon { display: block; color: #0C1830; }
        html.light .theme-toggle-thumb svg.icon-sun { display: block; color: #F6F9FE; }
        html.light .theme-toggle-thumb svg.icon-moon { display: none; }

        /* ── Focus ring ── */
        .focus-ring:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(123,184,224,0.3), 0 0 0 1px rgba(123,184,224,0.5);
        }

        /* ── Input styling ── */
        .ds-input {
            background: var(--input-bg); border: 1px solid var(--input-border);
            color: var(--text-primary); transition: all 0.2s ease;
        }
        .ds-input:focus {
            outline: none; border-color: #7BB8E0;
            box-shadow: 0 0 0 3px rgba(123,184,224,0.15);
        }
        .ds-input::placeholder { color: var(--text-muted); opacity: 0.7; }
        input::placeholder, textarea::placeholder { opacity: 0.7; }

        /* ── Calendar (flatpickr) ── shared by the property enquiry form and the
           explore move-in filter. Disabled days are the ones with nothing free. */
        .flatpickr-calendar { font-family: 'DM Sans', sans-serif !important; border-radius: 16px !important; border: 1px solid rgba(255,255,255,0.08) !important; }
        .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover { color: rgba(255,255,255,0.15) !important; text-decoration: line-through; background: rgba(239,68,68,0.08) !important; }
        .flatpickr-day.selected { background: #2E7D5B !important; border-color: #2E7D5B !important; }
        .flatpickr-day.today { border-color: #7BB8E0 !important; }
        .flatpickr-months .flatpickr-month { color: var(--text-primary, #fff) !important; }
        .flatpickr-current-month .flatpickr-monthDropdown-months, .flatpickr-current-month input.cur-year { color: var(--text-primary, #fff) !important; }
        html.light .flatpickr-day.flatpickr-disabled, html.light .flatpickr-day.flatpickr-disabled:hover { color: rgba(0,0,0,0.25) !important; background: rgba(239,68,68,0.10) !important; }
        /* Explore move-in calendar: how many homes are free from each day. */
        .flatpickr-day { position: relative; }
        .flatpickr-day .fp-free { position: absolute; right: 3px; bottom: 2px; font-size: 9px; line-height: 1; font-weight: 700; color: #7BB8E0; }
        .flatpickr-day.selected .fp-free { color: rgba(255,255,255,0.85); }
        html.light .flatpickr-day .fp-free { color: #1B6DB5; }
        .fp-note { padding: 6px 10px 8px; font-size: 10.5px; line-height: 1.35; color: var(--text-muted, #9CA3AF); text-align: center; border-top: 1px solid rgba(255,255,255,0.06); }
        html.light .fp-note { border-top-color: rgba(0,0,0,0.06); }
        html.light .flatpickr-calendar { border-color: rgba(0,0,0,0.08) !important; }
        /* Native popups (select menus, date pickers) are drawn by the OS, not by
           the page. In dark mode the menu came up white with our light option
           text on it, unreadable. color-scheme tells the browser which palette
           to draw them in, and the option colours are set explicitly for the
           browsers that ignore it. */
        html:not(.light) { color-scheme: dark; }
        html.light { color-scheme: light; }
        html:not(.light) select option { color: #E5E7EB; background-color: #10203C; }
        html.light select option { color: #111827; background-color: #FFFFFF; }
        html:not(.light) input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); }

        /* ── Gradient buttons ── */
        .btn-primary {
            background: linear-gradient(135deg, #2A5090 0%, #1B3A6B 50%, #14295A 100%);
            color: white; font-weight: 600; transition: all 0.2s ease;
            box-shadow: 0 4px 15px -3px rgba(27,58,107,0.4);
        }
        .btn-primary:hover { box-shadow: 0 6px 20px -3px rgba(27,58,107,0.5); filter: brightness(1.1); }
        .btn-gold {
            background: linear-gradient(135deg, #E8BC40, #D4A017, #B08614);
            color: #0A1628; font-weight: 600; transition: all 0.2s ease;
            box-shadow: 0 4px 15px -3px rgba(212,160,23,0.3);
        }
        .btn-gold:hover { box-shadow: 0 6px 20px -3px rgba(212,160,23,0.4); filter: brightness(1.05); }
        .btn-danger {
            background: linear-gradient(135deg, #FF5A5A, #E53E3E);
            color: white; font-weight: 600; transition: all 0.2s ease;
            box-shadow: 0 4px 15px -3px rgba(255,90,90,0.3);
        }
        .btn-danger:hover { box-shadow: 0 6px 20px -3px rgba(255,90,90,0.4); filter: brightness(1.05); }
        .btn-success {
            background: linear-gradient(135deg, #16A34A 0%, #15803D 50%, #166534 100%);
            color: white; font-weight: 600; transition: all 0.2s ease;
            box-shadow: 0 4px 15px -3px rgba(22,163,74,0.3);
        }
        .btn-success:hover { box-shadow: 0 6px 20px -3px rgba(22,163,74,0.4); filter: brightness(1.08); }
        .btn-press:active { transform: scale(0.97); }
        html.light .btn-primary {
            background: linear-gradient(135deg, #1B3A6B 0%, #14295A 50%, #0E1C44 100%);
            box-shadow: 0 4px 15px -3px rgba(27,58,107,0.5);
        }
        html.light .btn-primary:hover { box-shadow: 0 6px 20px -3px rgba(27,58,107,0.6); }
        html.light .btn-gold {
            background: linear-gradient(135deg, #D4A017, #B08614, #8C6B10);
            color: #FFFFFF;
            box-shadow: 0 4px 15px -3px rgba(176,134,20,0.4);
        }
        html.light .btn-danger {
            background: linear-gradient(135deg, #DC2626, #B91C1C);
            box-shadow: 0 4px 15px -3px rgba(220,38,38,0.4);
        }

        /* ── Logo icon ── */
        .logo-icon {
            background: linear-gradient(135deg, #1B3A6B 0%, #1B3A6B 45%, #3A7BC8 55%, #5EB5E8 70%, #5EB5E8 100%);
            box-shadow: 0 2px 10px -2px rgba(27,58,107,0.45);
        }

        /* ── Avatar styles ── */
        .avatar-sky { background: linear-gradient(135deg, rgba(123,184,224,0.2), rgba(90,156,200,0.3)); color: #7BB8E0; }
        .avatar-gold { background: linear-gradient(135deg, rgba(232,188,64,0.2), rgba(212,160,23,0.3)); color: #E8BC40; }
        .avatar-danger { background: linear-gradient(135deg, rgba(255,90,90,0.2), rgba(229,62,62,0.3)); color: #FF5A5A; }
        html.light .avatar-sky { background: linear-gradient(135deg, rgba(27,109,181,0.12), rgba(27,109,181,0.18)); color: #1B6DB5; }
        html.light .avatar-gold { background: linear-gradient(135deg, rgba(176,134,20,0.12), rgba(176,134,20,0.18)); color: #8C6B10; }
        html.light .avatar-danger { background: linear-gradient(135deg, rgba(220,38,38,0.12), rgba(220,38,38,0.18)); color: #DC2626; }

        /* ── Notification badge ── */
        .notif-badge {
            background: linear-gradient(135deg, #FF5A5A, #E53E3E);
            box-shadow: 0 2px 8px rgba(255,90,90,0.4);
        }

        /* ── Semantic colors ── */
        .c-sky { color: var(--accent-sky); }
        .c-gold { color: var(--accent-gold); }
        .c-danger { color: var(--accent-danger); }
        .c-success { color: var(--accent-success); }
        .c-purple { color: var(--accent-purple); }

        /* ── Soft backgrounds ── */
        .bg-soft-sky { background: rgba(123,184,224,0.1); }
        .bg-soft-gold { background: rgba(232,188,64,0.1); }
        .bg-soft-danger { background: rgba(255,90,90,0.1); }
        .bg-soft-success { background: rgba(74,222,128,0.1); }
        .bg-soft-purple { background: rgba(192,132,252,0.1); }
        html.light .bg-soft-sky { background: rgba(27,109,181,0.08); }
        html.light .bg-soft-gold { background: rgba(176,134,20,0.08); }
        html.light .bg-soft-danger { background: rgba(220,38,38,0.08); }
        html.light .bg-soft-success { background: rgba(22,163,74,0.08); }
        html.light .bg-soft-purple { background: rgba(124,58,237,0.08); }

        /* ── Card gradients ── */
        .card-grad-sky { background: linear-gradient(135deg, rgba(123,184,224,0.12) 0%, rgba(90,156,200,0.06) 100%); }
        .card-grad-gold { background: linear-gradient(135deg, rgba(232,188,64,0.12) 0%, rgba(212,160,23,0.06) 100%); }
        .card-grad-navy { background: linear-gradient(135deg, rgba(27,58,107,0.2) 0%, rgba(42,80,144,0.1) 100%); }
        .card-grad-danger { background: linear-gradient(135deg, rgba(255,90,90,0.12) 0%, rgba(229,62,62,0.06) 100%); }
        html.light .card-grad-sky { background: linear-gradient(135deg, rgba(27,109,181,0.08) 0%, rgba(27,109,181,0.03) 100%); }
        html.light .card-grad-gold { background: linear-gradient(135deg, rgba(176,134,20,0.08) 0%, rgba(176,134,20,0.03) 100%); }
        html.light .card-grad-navy { background: linear-gradient(135deg, rgba(27,58,107,0.08) 0%, rgba(27,58,107,0.03) 100%); }
        html.light .card-grad-danger { background: linear-gradient(135deg, rgba(220,38,38,0.08) 0%, rgba(220,38,38,0.03) 100%); }

        /* ── Gradient text ── */
        .text-gradient {
            background: linear-gradient(135deg, #7BB8E0 0%, #9DD0F0 40%, #E8BC40 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .text-gradient-sky {
            background: linear-gradient(135deg, #5A9CC8, #7BB8E0, #9DD0F0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* ── Nav active (sidebar) ── */
        .nav-link-active {
            background: linear-gradient(90deg, rgba(123,184,224,0.12) 0%, rgba(123,184,224,0.04) 100%);
            border-left: 3px solid #7BB8E0;
            color: #7BB8E0;
        }
        /* On the light sidebar the sky tint all but disappears and the sky rule
           is too pale to read as "you are here". Navy on a navy wash instead. */
        html.light .nav-link-active {
            background: linear-gradient(90deg, rgba(27,58,107,0.10) 0%, rgba(27,58,107,0.03) 100%);
            border-left-color: #1B3A6B;
            color: #14355F;
        }
        html.light .nav-link-active {
            background: linear-gradient(90deg, rgba(27,58,107,0.1) 0%, rgba(27,58,107,0.03) 100%);
            border-left-color: #1B3A6B;
            color: #1B3A6B;
        }

        /* ── Scrollbar ── */
        ::-webkit-scrollbar { width: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #264068; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #354F78; }
        html.light ::-webkit-scrollbar-thumb { background: #C2D4EA; }
        html.light ::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

        /* ── Selection ── */
        ::selection { background: rgba(123,184,224,0.3); color: #fff; }
        html.light ::selection { background: rgba(27,58,107,0.2); color: #0A1628; }

        /* ── Bottom nav safe area ── */
        .safe-area-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }

        /* ── iPhone home-screen app (standalone, black-translucent status bar) ──
           The page is drawn under the status bar: the top bar needs the
           status bar's height as padding, or the logo sits under the clock.
           iOS also starts the viewport that far down, which left a gap of the
           same height under the fixed bottom menu; stretching the root by the
           top inset brings the menu back to the bottom edge. In a browser tab
           both insets are 0, so nothing changes there. */
        .sd-topbar { padding-top: env(safe-area-inset-top, 0); }
        @media (display-mode: standalone) {
            html { min-height: calc(100% + env(safe-area-inset-top, 0px)); }
        }

        /* ── Reduced motion ── */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                transition-duration: 0.01ms !important;
            }
        }

        /* ── Nav active indicator (mobile bottom) ── */
        .nav-active { color: #7BB8E0; }
        .nav-active .nav-dot { opacity: 1; transform: scale(1); }

        /* ── Global Print Styles ── */
        @media print {
            /* Hide all chrome: sidebar, top bar, bottom nav, modals, prompts, orbs */
            aside,
            nav,
            .lg\:ml-\[260px\] > header,
            .safe-area-bottom,
            [x-data="pwaInstall()"],
            [x-data*="adminMenu"],
            [x-data*="maintMode"],
            [x-data*="pushPrompt"],
            .floating-orb,
            .mesh-gradient,
            #toast-container,
            button:not(.print-keep),
            .no-print,
            a[href="/dashboard"] { display: none !important; }

            /* Remove sidebar offset */
            .lg\:ml-\[260px\] { margin-left: 0 !important; }

            /* Remove bottom padding (was for mobile nav) */
            main { padding-bottom: 0 !important; }

            /* White background, black text for clean printing */
            body, html {
                background: white !important;
                color: black !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            /* Remove dark UI surfaces */
            .glass, .glass-card, [class*="bg-surface"] {
                background: white !important;
                border: 1px solid #ddd !important;
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                box-shadow: none !important;
            }

            /* Make all text readable */
            * { color: black !important; }
            .text-gray-100, .text-gray-200, .text-gray-300 { color: #222 !important; }
            .text-gray-400, .text-gray-500, .text-gray-600 { color: #555 !important; }

            /* Preserve brand colors for emphasis */
            [style*="color: #2E7D5B"], .text-emerald-400, .text-emerald-500, .text-green-400 { color: #2E7D5B !important; }
            [style*="color: #D4A843"], [style*="color: #D4A017"], .text-amber-400 { color: #b8860b !important; }
            .text-red-400, .text-red-500 { color: #dc2626 !important; }

            /* Clean table borders */
            table { border-collapse: collapse !important; }
            th, td { border-bottom: 1px solid #ddd !important; }

            /* Ensure bars/charts print with color */
            [style*="background: linear-gradient"] {
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
            }

            /* Status badges - keep colored backgrounds */
            [class*="bg-green-500"], [class*="bg-emerald-500"] {
                background-color: #dcfce7 !important;
                color: #166534 !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
            [class*="bg-yellow-500"], [class*="bg-amber-500"] {
                background-color: #fef3c7 !important;
                color: #92400e !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
            [class*="bg-red-500"] {
                background-color: #fee2e2 !important;
                color: #991b1b !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            /* Page settings */
            @page {
                margin: 1.5cm;
                size: A4;
            }

            /* Add brand header to printed pages */
            body::before {
                content: "StayDublin";
                display: block;
                font-size: 20px;
                font-weight: bold;
                color: #1B3A6B !important;
                margin-bottom: 8px;
                padding-bottom: 8px;
                border-bottom: 2px solid #2E7D5B;
            }

            /* Page title from h2 */
            h2 { margin-top: 0 !important; }

            /* Avoid page breaks inside cards/rows */
            .glass, tr, .rounded-xl { break-inside: avoid; }

            /* Links: show URL for external, hide decoration */
            a { text-decoration: none !important; }
        }

/* Explore: long reading in closed cards (areas, letting, inclusions). */
.xp-acc-grid { display: grid; gap: 10px; }
@media (min-width: 768px) { .xp-acc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.xp-acc { border-radius: 16px; background: var(--bg-card); border: 1px solid var(--border-color); }
.xp-acc summary { list-style: none; cursor: pointer; padding: 14px 44px 14px 16px; position: relative; display: flex; flex-direction: column; gap: 3px; }
.xp-acc summary::-webkit-details-marker { display: none; }
.xp-acc summary::after { content: ""; position: absolute; right: 18px; top: 20px; width: 8px; height: 8px;
    border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform .2s; }
.xp-acc[open] summary::after { transform: rotate(-135deg); top: 24px; }
.xp-acc-t { font-weight: 700; font-size: 14.5px; color: var(--text-primary); }
.xp-acc-s { font-size: 13px; color: var(--text-secondary); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xp-acc[open] .xp-acc-s { display: none; }
.xp-acc p { padding: 0 16px 14px; margin: 0; font-size: 14px; line-height: 1.65; color: var(--text-secondary); }
.xp-acc.key-takeaways { margin-top: 0; }
.xp-acc .xp-facts { display: block; list-style: disc; padding: 0 16px 14px 34px; margin: 0; }
.xp-acc .xp-facts li { display: list-item; padding: 2px 0; border: 0; background: none; border-radius: 0;
    font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.xp-acc-h { padding: 4px 16px 6px; margin: 0; font-weight: 700; font-size: 14px; color: var(--text-primary); }

/* ── Explore: quick links under the listings ── */
.xp-quick { margin-top: 40px; }
.xp-quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
@media (min-width: 1024px) { .xp-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.xp-quick-item { display: flex; flex-direction: column; gap: 3px; padding: 14px 14px 15px; border-radius: 14px;
    background: var(--bg-card); border: 1px solid var(--border-color); text-decoration: none;
    transition: border-color .2s ease, transform .3s cubic-bezier(.2,.7,.3,1); }
.xp-quick-item:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.xp-quick-t { font-weight: 700; font-size: 14.5px; color: var(--text-primary); }
.xp-quick-t::after { content: " \2192"; color: var(--accent-gold, #D4A017); }
.xp-quick-s { font-size: 12.5px; line-height: 1.4; color: var(--text-secondary); }

/* ── Messages (chat) ── */
@media (max-width: 1023px) {
    .sd-msg-panel { background: var(--bg-primary) !important; -webkit-backdrop-filter: none; backdrop-filter: none; top: calc(58px + env(safe-area-inset-top, 0px)) !important; }
    .sd-msg-backdrop { top: calc(58px + env(safe-area-inset-top, 0px)) !important; }
    /* The iPhone app adds the status bar to the top bar and the home bar to
       the bottom menu; without taking both off, the composer and its Send
       button sat under the bottom menu. Browser tabs: both are 0. */
    .sd-msg-shell { height: calc(100dvh - 116px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important; }
}
.sd-tabs { scrollbar-width: none; }
.sd-tabs::-webkit-scrollbar { display: none; }
.sd-role { font-size: 10px; font-weight: 600; letter-spacing: .02em; padding: 2px 7px; border-radius: 999px; background: rgba(148,163,184,.14); color: var(--text-secondary); white-space: nowrap; }
.sd-role-team, .sd-role-admin, .sd-role-staff { background: rgba(123,184,224,.15); color: #7BB8E0; }
.sd-role-maintenance { background: rgba(251,146,60,.15); color: #FB923C; }
.sd-role-landlord { background: rgba(212,160,23,.15); color: #D4A017; }
html.light .sd-role-team, html.light .sd-role-admin, html.light .sd-role-staff { color: #1B6DB5; background: rgba(27,109,181,.10); }
html.light .sd-role-landlord { color: #9A7412; }
.sd-avatar, html.light .sd-avatar { background: linear-gradient(135deg, #1B6DB5, #1B3A6B); color: #fff !important; }
.sd-avatar span { color: #fff !important; }
.sd-thread { background-image: radial-gradient(rgba(123,184,224,.05) 1px, transparent 1px); background-size: 22px 22px; }
.sd-day { font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 999px; background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border-color); }
.sd-bubble { padding: 8px 12px 6px; border-radius: 18px; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.sd-mine { background: linear-gradient(135deg, #2B7FC9, #1B5FA0); color: #fff; }
.sd-theirs { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-color); }
html.light .sd-theirs { background: #fff; }
.sd-tail-mine { border-bottom-right-radius: 6px; }
.sd-tail-theirs { border-bottom-left-radius: 6px; }
.sd-meta { display: flex; justify-content: flex-end; align-items: center; gap: 4px; font-size: 10.5px; margin-top: 2px; opacity: .72; }
.sd-mine .sd-meta { color: rgba(255,255,255,.85); }
.sd-theirs .sd-meta { color: var(--text-muted); }
.sd-seen { color: #BFE3FF; }
.sd-composer { border-radius: 22px; background: var(--bg-elevated); border: 1px solid var(--border-color); color: var(--text-primary); min-height: 44px; }
.sd-composer:focus { border-color: #7BB8E0; }
.sd-send { background: linear-gradient(135deg, #2B7FC9, #1B5FA0); color: #fff; transition: opacity .15s, transform .15s; }
.sd-send:disabled { background: var(--bg-elevated); color: var(--text-muted); border: 1px solid var(--border-color); }

/* ── Messages inbox (redesign 2026-09-25) ──
   One list in sections, one plain line per row, every message labelled with
   its sender. Colours carry meaning: gold = their turn / waiting on you,
   purple = automatic, sky = you, teal = a colleague, grey = later / done. */
.ib-title { font-family: var(--font-display, 'Outfit', sans-serif); font-weight: 700; font-size: 19px; letter-spacing: -.01em; color: var(--text-primary); }
.ib-pill-turn { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(212,160,23,.16); color: #E8BC40; white-space: nowrap; }
html.light .ib-pill-turn { color: #8A6A0E; background: rgba(212,160,23,.18); }
.ib-new { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; padding: 7px 12px; border-radius: 10px;
    color: #fff; background: linear-gradient(135deg, #2B7FC9, #1B5FA0); box-shadow: 0 4px 14px -6px rgba(27,95,160,.7); }
.ib-new:active { transform: scale(.97); }
.ib-icon-btn { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); }
.ib-icon-btn:hover { background: var(--bg-elevated); color: var(--text-primary); }
.ib-search { width: 100%; padding: 9px 12px 9px 32px; border-radius: 12px; font-size: 13px; color: var(--text-primary);
    background: var(--input-bg); border: 1px solid var(--input-border); outline: none; }
.ib-search:focus { border-color: #7BB8E0; box-shadow: 0 0 0 3px rgba(123,184,224,.15); }
.ib-search::placeholder { color: var(--text-muted); }
.ib-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--bg-elevated); border: 1px solid var(--border-color); }
.ib-seg button { font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 8px; color: var(--text-muted); }
.ib-seg button.ib-seg-on { background: var(--bg-secondary); color: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
html.light .ib-seg button.ib-seg-on { background: #fff; }
/* Views: Your turn, All mail, Archive, Trash (2026-10-01) */
.ib-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-color); overflow-x: auto; scrollbar-width: none; }
.ib-tabs::-webkit-scrollbar { display: none; }
.ib-tabs button { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600;
    padding: 7px 10px 8px; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ib-tabs button:hover { color: var(--text-secondary); }
.ib-tabs button.ib-tab-on { color: var(--text-primary); border-bottom-color: var(--accent-sky, #7BB8E0); }
.ib-tab-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; background: #D4A017; color: #111; }
.ib-tag-where { color: var(--text-secondary); background: var(--bg-elevated); }
.ib-hit { align-items: flex-start; }
.ib-hit-snip { font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); margin-top: 2px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ib-hit-snip mark { background: rgba(212,160,23,.28); color: var(--text-primary); border-radius: 3px; padding: 0 1px; }
.ib-filter-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 10px;
    color: var(--text-secondary); border: 1px solid var(--border-color); }
.ib-filter-btn:hover, .ib-filter-on { background: var(--bg-elevated); color: var(--text-primary); }
.ib-filter-n { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; font-size: 10px; line-height: 16px; text-align: center; background: #1B6DB5; color: #fff; }
.ib-filters { padding: 12px; border-radius: 14px; background: var(--bg-elevated); border: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 12px; }
.ib-flabel { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.ib-chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; color: var(--text-secondary); border: 1px solid var(--border-color); background: transparent; }
.ib-chip:hover { color: var(--text-primary); }
.ib-chip.ib-chip-on { background: #1B6DB5; border-color: #1B6DB5; color: #fff; }
.ib-select { font-size: 12px; padding: 4px 8px; border-radius: 8px; background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-primary); }
.ib-menu { position: absolute; top: calc(100% + 6px); z-index: 60; padding: 6px; border-radius: 14px; background: var(--bg-secondary);
    border: 1px solid var(--border-hover); box-shadow: 0 18px 40px -12px rgba(0,0,0,.5); }
.ib-menu.bottom-full { top: auto; }
.ib-menu-item { display: flex; width: 100%; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; border-radius: 10px; color: var(--text-primary); }
.ib-menu-item:hover { background: var(--bg-elevated); }
.ib-menu-item b { display: block; font-size: 13px; font-weight: 600; }
.ib-menu-item small { display: block; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.ib-menu-ic { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; background: var(--bg-elevated); color: var(--text-secondary); }
.ib-menu-sub { display: block; width: 100%; text-align: left; font-size: 12.5px; padding: 6px 10px; border-radius: 8px; color: var(--text-secondary); }
.ib-menu-sub:hover { background: var(--bg-elevated); color: var(--text-primary); }

.ib-sec { display: flex; align-items: center; gap: 8px; width: 100%; padding: 14px 16px 6px; font-size: 11px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ib-sec:hover { color: var(--text-secondary); }
.ib-sec-dot { width: 7px; height: 7px; border-radius: 999px; }
.ib-sec-n { font-weight: 600; letter-spacing: 0; color: var(--text-muted); opacity: .8; }
.ib-row { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px 10px 16px; margin: 1px 8px; border-radius: 14px; cursor: pointer; transition: background .12s; }
.ib-row:hover { background: var(--bg-elevated); }
.ib-row:focus-visible { outline: 2px solid #7BB8E0; outline-offset: -2px; }
.ib-row.ib-row-on { background: rgba(123,184,224,.12); box-shadow: inset 3px 0 0 #7BB8E0; }
html.light .ib-row.ib-row-on { background: rgba(27,109,181,.08); box-shadow: inset 3px 0 0 #1B6DB5; }
.ib-av { position: relative; flex-shrink: 0; width: 42px; height: 42px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; }
.ib-av-sm { width: 36px; height: 36px; font-size: 13px; }
.ib-av-enq, html.light .ib-av-enq { background: linear-gradient(135deg, #E8BC40, #C9960F); color: #1A1204; }
.ib-av-enq span { color: #1A1204 !important; }
.ib-urgent { position: absolute; right: -1px; top: -1px; width: 12px; height: 12px; border-radius: 999px; background: #EF4444; border: 2px solid var(--bg-primary); }
.ib-name { font-size: 14px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ib-name-unread { font-weight: 700; }
.ib-tag { flex-shrink: 0; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 6px; color: var(--text-muted); border: 1px solid var(--border-color); }
.ib-time { margin-left: auto; flex-shrink: 0; font-size: 11px; color: var(--text-muted); }
.ib-line { font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.ib-line-unread { color: var(--text-primary); }
.ib-actor { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 11.5px; color: var(--text-muted); min-width: 0; }
.ib-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 999px; background: #94A3B8; }
.ib-dot-them { background: #E8BC40; box-shadow: 0 0 0 3px rgba(232,188,64,.18); }
.ib-dot-auto { background: #A78BFA; }
.ib-dot-due { background: transparent; border: 2px solid #A78BFA; width: 8px; height: 8px; }
.ib-dot-me { background: #7BB8E0; }
.ib-dot-staff { background: #2DD4BF; }
.ib-dot-later, .ib-dot-done { background: #94A3B8; }
html.light .ib-dot-me { background: #1B6DB5; }
html.light .ib-dot-staff { background: #0F9D8A; }
html.light .ib-dot-auto { background: #7C3AED; }
.ib-badge { margin-left: auto; flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; background: #1B6DB5; color: #fff; }
.ib-row-actions { position: absolute; right: 10px; top: 10px; display: none; gap: 4px; }
.ib-row:hover .ib-row-actions { display: flex; }
.ib-row-actions button { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); background: var(--bg-secondary); border: 1px solid var(--border-color); }
.ib-row-actions button:hover { color: var(--text-primary); }
@media (pointer: coarse) { .ib-row-actions { display: none !important; } }
.ib-caught-up { margin: 4px 16px 6px; padding: 12px 14px; border-radius: 12px; font-size: 13px; color: var(--text-secondary); background: var(--bg-elevated); display: flex; align-items: center; gap: 8px; }
.ib-check { width: 20px; height: 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; background: rgba(74,222,128,.18); color: #4ADE80; }
html.light .ib-check { color: #16A34A; }
.ib-empty { padding: 32px 16px; text-align: center; font-size: 13px; color: var(--text-muted); }

.ib-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
.ib-head-name { font-size: 15px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-head-sub { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); min-width: 0; }
.ib-done { flex-shrink: 0; font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 10px; color: #1A1204; background: linear-gradient(135deg, #E8BC40, #C9960F); }
.ib-done.ib-done-off { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-hover); }

.ib-msg { max-width: 88%; border-radius: 16px; padding: 10px 14px 11px; border: 1px solid var(--border-color); background: var(--bg-elevated); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
@media (min-width: 640px) { .ib-msg { max-width: 76%; } }
html.light .ib-msg { background: #fff; }
.ib-msg-auto { background: rgba(167,139,250,.10); border-color: rgba(167,139,250,.28); }
.ib-msg-me { background: rgba(123,184,224,.13); border-color: rgba(123,184,224,.30); }
.ib-msg-staff { background: rgba(45,212,191,.10); border-color: rgba(45,212,191,.28); }
html.light .ib-msg-auto { background: #F5F1FF; }
html.light .ib-msg-me { background: #EEF5FC; }
html.light .ib-msg-staff { background: #ECFBF8; }
.ib-msg-from { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--text-primary); margin-bottom: 4px; }
.ib-msg-from b { font-weight: 700; }
.ib-msg-via { color: var(--text-muted); }
.ib-msg-at { margin-left: auto; font-size: 11px; color: var(--text-muted); }
.ib-msg-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.ib-msg-tags span.ib-tag-warn { background: rgba(212,160,23,.18); color: #E9C46A; font-weight: 700; }
html.light .ib-msg-tags span.ib-tag-warn { color: #8a6500; }
.ib-msg-tags span { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: rgba(148,163,184,.14); color: var(--text-secondary); }
.ib-msg-subject { font-size: 12.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.ib-msg-copies { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; word-break: break-all; }
.ib-msg-body { font-size: 14px; line-height: 1.55; color: var(--text-primary); white-space: pre-wrap; word-break: break-word; }
.ib-msg-empty { font-size: 13px; font-style: italic; color: var(--text-muted); }
.ib-msg-foot { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border-color); }
.ib-note { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px auto 0; max-width: 34rem; padding: 8px 12px; border-radius: 12px; font-size: 12.5px;
    color: var(--text-secondary); background: var(--bg-elevated); border: 1px dashed var(--border-hover); }
.ib-note-auto { border-color: rgba(167,139,250,.45); }
.ib-note-them { border-color: rgba(232,188,64,.5); background: rgba(232,188,64,.08); }
.ib-note-fail { border-color: rgba(248,113,113,.5); color: #F87171; }
html.light .ib-note-fail { color: #DC2626; }
.ib-note-btn { margin-left: auto; font-weight: 700; font-size: 12.5px; text-decoration: underline; color: #7BB8E0; padding: 4px 6px; margin-right: -6px; }
html.light .ib-note-btn { color: #1B6DB5; }

.ib-reply { padding: 10px 14px 12px; border-top: 1px solid var(--border-color); flex-shrink: 0; }
.ib-reply-label { flex-shrink: 0; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ib-tool { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 999px;
    color: var(--text-secondary); background: var(--bg-elevated); border: 1px solid var(--border-color); }
.ib-tool:hover { color: var(--text-primary); border-color: var(--border-hover); }
.ib-tool:disabled { opacity: .5; }
.ib-tool-accent { color: #7BB8E0; background: rgba(123,184,224,.12); border-color: rgba(123,184,224,.25); }
html.light .ib-tool-accent { color: #1B6DB5; }
.ib-tool-rec { color: #EF4444 !important; background: rgba(239,68,68,.14) !important; border-color: rgba(239,68,68,.35) !important; }
.ib-link { font-size: 12px; padding: 4px 8px; border-radius: 8px; color: var(--text-muted); }
.ib-link:hover, .ib-link.ib-link-on { color: var(--text-primary); background: var(--bg-elevated); }
.ib-panel { padding: 10px 12px; border-radius: 12px; background: var(--bg-elevated); border: 1px solid var(--border-color); }
.ib-textarea { display: block; width: 100%; padding: 10px 40px 10px 12px; border-radius: 14px; font-size: 14px; line-height: 1.55; resize: none; outline: none;
    color: var(--text-primary); background: var(--input-bg); border: 1px solid var(--input-border); }
.ib-textarea:focus { border-color: #7BB8E0; box-shadow: 0 0 0 3px rgba(123,184,224,.15); }
.ib-textarea::placeholder { color: var(--text-muted); }

/* Component display rules above would beat Tailwind's responsive hiding
   (this file loads later), so the responsive helpers are restated here. */
@media (min-width: 1024px) { .ib-icon-btn.lg\:hidden { display: none; } }
@media (max-width: 1023.98px) { .ib-menu-item.lg\:flex { display: none; } }

/* Occupancy grid: a date that opens the Change dates window. Looks like the
   date it is, with a dotted line so it reads as something to press. */
.grid-date { color: var(--text-secondary); background: none; border: 0; padding: 2px 0; font: inherit; cursor: pointer;
  border-bottom: 1px dotted currentColor; border-bottom-color: rgba(123,184,224,.45); white-space: nowrap; text-align: left; }
.grid-date:hover, .grid-date:focus-visible { color: #7BB8E0; border-bottom-style: solid; outline: none; }
html.light .grid-date { border-bottom-color: rgba(27,109,181,.45); }
html.light .grid-date:hover, html.light .grid-date:focus-visible { color: #1B6DB5; }
@media (pointer: coarse) { .grid-date { padding: 6px 0; } }

/* Attachments in an enquiry email (Messages): photo thumbnails and downloads. */
.ib-atts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.08)); }
.ib-att { max-width: 220px; min-width: 0; }
.ib-att-img { display: block; border-radius: 10px; overflow: hidden; background: var(--surface-2, rgba(255,255,255,0.04)); }
.ib-att-img img { display: block; width: 100%; max-height: 180px; object-fit: cover; }
.ib-att-img.ib-att-failed { display: none; }
.ib-att-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 12px; }
.ib-att-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); min-width: 0; }
.ib-att-dl { flex-shrink: 0; color: var(--accent-sky, #7BB8E0); text-decoration: underline; }
.ib-att-del, .ib-att-undo { flex-shrink: 0; background: none; border: 0; padding: 0; font: inherit; color: #F87171; text-decoration: underline; cursor: pointer; }
.ib-att-undo { color: var(--accent-sky, #7BB8E0); margin-left: 4px; }
.ib-att-danger { color: #F87171; font-weight: 600; }
.ib-att-note { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.ib-att-gone { opacity: 0.7; }
.ib-warn { margin-top: 8px; padding: 8px 10px; border-radius: 10px; font-size: 12px; line-height: 1.4;
  background: rgba(248,113,113,0.10); border: 1px solid rgba(248,113,113,0.35); color: var(--text-primary); }
.ib-warn b { display: block; color: #F87171; margin-bottom: 2px; }

/* Pull down to refresh (home-screen app only, app.js). */
.sd-ptr { position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 8px); z-index: 9999; width: 36px; height: 36px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0;
  transform: translate(-50%, -44px); color: var(--text-muted, #94A3B8); background: var(--bg-card, #13223F);
  border: 1px solid var(--border-color, rgba(255,255,255,.1)); box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.sd-ptr.sd-ptr-ready { color: #7BB8E0; }
html.light .sd-ptr { background: #fff; }
html.light .sd-ptr.sd-ptr-ready { color: #1B6DB5; }
.sd-ptr.sd-ptr-spin svg { animation: sd-ptr-spin .7s linear infinite; }
@keyframes sd-ptr-spin { to { transform: rotate(360deg); } }

/* ── Bed tracker (/tracker, 2026-10-07) ─────────────────────────────── */
.tk-root { --tk-booked: #4C8DD6; --tk-booked2: #2E5FA8; --tk-free: #34D399; --tk-pending: #F2B84B;
  --tk-hold: #7A8BA3; --tk-reno: #F08A4B; --tk-in: #34D399; --tk-out: #F2876B; --tk-card: var(--bg-card);
  --tk-track: rgba(123,184,224,0.07); }
html.light .tk-root { --tk-booked: #2F74C8; --tk-booked2: #1B4F96; --tk-free: #12A15F; --tk-pending: #D99A1E;
  --tk-hold: #94A3B8; --tk-reno: #E0702F; --tk-in: #12A15F; --tk-out: #D9563A; --tk-track: rgba(27,58,107,0.06); }
.tk-head { margin-bottom: 1.25rem; }
.tk-eyebrow { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-sky); font-weight: 600; }
.tk-title { font-family: 'Outfit', sans-serif; font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 700; letter-spacing: -.02em; color: var(--text-primary); line-height: 1.15; margin-top: .15rem; }
.tk-sub { color: var(--text-secondary); font-size: .92rem; margin-top: .3rem; }
.tk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1.25rem; }
@media (max-width: 640px) { .tk-stat { padding: .8rem .85rem; } .tk-stat-num { font-size: 1.55rem; } .tk-stat-label { font-size: .7rem; }
  .tk-tabs { display: flex; width: 100%; } .tk-tabs button, .tk-tabs a { flex: 1; padding: .5rem .5rem; font-size: .8rem; text-align: center; } }
@media (min-width: 900px) { .tk-stats { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.tk-stat { background: var(--tk-card); border: 1px solid var(--glass-border); box-shadow: var(--card-shadow), var(--glass-shine);
  border-radius: 1.1rem; padding: 1rem 1.1rem; text-align: left; min-width: 0; }
.tk-stat-btn { cursor: pointer; transition: border-color .2s, transform .2s; }
.tk-stat-btn:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.tk-stat-ring { display: flex; align-items: center; gap: .9rem; grid-column: 1 / -1; }
@media (min-width: 900px) { .tk-stat-ring { grid-column: auto; } }
.tk-ring { width: 3.4rem; height: 3.4rem; flex: none; transform: rotate(-90deg); }
.tk-ring-bg { fill: none; stroke: var(--tk-track); stroke-width: 5; }
.tk-ring-fg { fill: none; stroke: var(--tk-booked); stroke-width: 5; stroke-linecap: round; transition: stroke-dasharray .8s cubic-bezier(.2,.8,.2,1); }
.tk-stat-num { font-family: 'Outfit', sans-serif; font-size: 1.9rem; font-weight: 700; color: var(--text-primary); line-height: 1.05; font-variant-numeric: tabular-nums; }
.tk-stat-of { font-size: 1.1rem; color: var(--text-muted); font-weight: 600; }
.tk-stat-label { font-size: .78rem; color: var(--text-muted); margin-top: .25rem; }
.tk-stat-hint { color: var(--tk-free); }
.tk-c-free { color: var(--tk-free); } .tk-c-soon { color: var(--accent-sky); }
.tk-c-in { color: var(--tk-in); } .tk-c-out { color: var(--tk-out); }
.tk-tabs { display: inline-flex; gap: .25rem; padding: .3rem; border-radius: 999px; background: var(--bg-elevated); border: 1px solid var(--glass-border); margin-bottom: 1rem; max-width: 100%; overflow-x: auto; }
.tk-tabs button { padding: .5rem 1rem; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; transition: background .2s, color .2s; }
.tk-tabs button.is-on { background: var(--tk-booked); color: #fff; box-shadow: 0 4px 14px -4px var(--tk-booked); }
.tk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; justify-content: space-between; margin-bottom: .9rem; }
.tk-input { background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-primary); border-radius: .75rem; padding: .55rem .8rem; font-size: .9rem; min-width: 0; }
.tk-toolbar .tk-input { flex: 1 1 220px; max-width: 320px; }
.tk-legend { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .72rem; color: var(--text-muted); }
.tk-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.tk-sw { width: .8rem; height: .55rem; border-radius: .2rem; display: inline-block; }
.tk-k-booked { background: linear-gradient(90deg, var(--tk-booked), var(--tk-booked2)); }
.tk-k-free { background: var(--tk-free); }
.tk-k-pending { background: repeating-linear-gradient(135deg, var(--tk-pending) 0 5px, transparent 5px 9px); box-shadow: inset 0 0 0 1px var(--tk-pending); }
.tk-k-hold { background: repeating-linear-gradient(135deg, var(--tk-hold) 0 4px, transparent 4px 8px); box-shadow: inset 0 0 0 1px var(--tk-hold); opacity: .8; }
.tk-k-renovation { background: repeating-linear-gradient(45deg, var(--tk-reno) 0 6px, rgba(240,138,75,.45) 6px 12px); }
.tk-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: .85rem; }
@media (min-width: 760px) { .tk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .tk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tk-card { background: var(--tk-card); border: 1px solid var(--glass-border); box-shadow: var(--card-shadow), var(--glass-shine); border-radius: 1.2rem; overflow: hidden; min-width: 0; transition: border-color .2s; }
.tk-card:hover { border-color: var(--border-hover); }
.tk-card.is-open { grid-column: 1 / -1; }
.tk-card-top { display: flex; align-items: center; gap: .9rem; width: 100%; padding: 1rem 1.1rem .7rem; text-align: left; }
.tk-card-ring { position: relative; width: 3.1rem; height: 3.1rem; flex: none; }
.tk-card-ring svg { width: 100% !important; height: 100% !important; transform: rotate(-90deg); }
.tk-card-ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.tk-s-free .tk-ring-fg { stroke: var(--tk-booked); }
.tk-s-renovation .tk-ring-bg { stroke: rgba(240,138,75,.35); stroke-dasharray: 3 4; }
.tk-card-main { min-width: 0; flex: 1; }
.tk-card-title { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1.02rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-card-area { font-size: .74rem; color: var(--text-muted); margin-top: .05rem; }
.tk-card-head { display: flex; align-items: center; gap: .45rem; font-size: .84rem; font-weight: 600; margin-top: .3rem; color: var(--text-secondary); }
.tk-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--tk-booked); flex: none; }
.tk-s-free .tk-dot { background: var(--tk-free); box-shadow: 0 0 0 4px rgba(52,211,153,.18); }
.tk-s-free .tk-card-head { color: var(--tk-free); }
.tk-s-renovation .tk-dot { background: var(--tk-reno); }
.tk-s-renovation .tk-card-head { color: var(--tk-reno); }
.tk-chev { width: 1.1rem; height: 1.1rem; color: var(--text-muted); flex: none; transition: transform .25s; }
.tk-card.is-open .tk-chev { transform: rotate(180deg); }
.tk-beds { display: flex; flex-wrap: wrap; gap: .3rem; padding: 0 1.1rem 1rem 5.1rem; }
.tk-bed { width: .7rem; height: .7rem; border-radius: .22rem; display: inline-block; }
.tk-tl { padding: .2rem 1.1rem 1rem; }
.tk-axis { position: relative; height: 1.3rem; margin-left: var(--tk-name-w, 9.5rem); font-size: .74rem; font-weight: 600; color: var(--text-secondary); border-bottom: 1px solid var(--border-color); }
.tk-axis span { position: absolute; top: 0; padding-left: .25rem; border-left: 1px solid var(--border-hover, rgba(255,255,255,.25)); line-height: 1.3rem; white-space: nowrap; }
.tk-row { display: flex; align-items: center; gap: .6rem; padding: .3rem 0; border-bottom: 1px solid var(--border-color); }
.tk-row:last-of-type { border-bottom: 0; }
.tk-row.is-warn .tk-row-room { color: var(--tk-pending); }
.tk-row-name { width: var(--tk-name-w, 9.5rem); flex: none; min-width: 0; margin-right: -.6rem; padding-right: .6rem; }
.tk-row-room { display: block; font-size: .8rem; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-row-now { display: block; font-size: .68rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-bar { position: relative; flex: 1; height: 1.6rem; border-radius: .45rem; background: var(--tk-track); overflow: hidden; min-width: 0; }
.tk-seg { position: absolute; top: .15rem; bottom: .15rem; border-radius: .35rem; display: flex; align-items: center; overflow: hidden; }
.tk-seg span { font-size: .64rem; font-weight: 600; color: #fff; padding: 0 .4rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.tk-seg.tk-k-free { background: rgba(52,211,153,.22); box-shadow: inset 0 0 0 1px rgba(52,211,153,.55); }
.tk-seg.tk-k-free span, .tk-seg.tk-k-pending span, .tk-seg.tk-k-hold span { color: var(--text-primary); text-shadow: none; }
html.light .tk-seg.tk-k-free { background: rgba(18,161,95,.14); box-shadow: inset 0 0 0 1px rgba(18,161,95,.5); }
.tk-card-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding-top: .7rem; font-size: .78rem; color: var(--text-secondary); }
.tk-link { color: var(--accent-sky); font-weight: 600; }
@media (max-width: 640px) {
  /* Phones (Brian, 2026-10-08): the room name and its status line ("Booked
     until 30 Jun") sit above a full-width bar, instead of the status being
     hidden to make room. */
  .tk-root { --tk-name-w: 0rem; }
  .tk-beds { padding-left: 1.1rem; }
  .tk-row { flex-wrap: wrap; align-items: center; row-gap: .25rem; }
  .tk-row-name { width: 100%; margin-right: 0; padding-right: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; }
  .tk-row-room { flex: none; }
  .tk-row-now { display: inline; white-space: normal; font-size: .72rem; color: var(--text-secondary); flex: 1 1 8rem; }
  .tk-bar { flex-basis: 100%; height: 1.9rem; }
  .tk-axis { margin-left: 0; }
  .tk-axis span:nth-child(even) { display: none; }
}
.tk-seg.is-click { cursor: pointer; }
.tk-pop-back { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.45); display: flex; align-items: flex-end; justify-content: center; padding: 1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
@media (min-width: 641px) { .tk-pop-back { align-items: center; } }
.tk-pop { width: 100%; max-width: 24rem; border-radius: 1rem; padding: 1rem 1.1rem; background: var(--bg-primary); border: 1px solid var(--border-color); box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.tk-pop-where { font-size: .75rem; color: var(--text-muted); margin: 0 0 .25rem; }
.tk-pop-what { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0; }
.tk-pop-dates { font-size: .85rem; color: var(--text-secondary); margin: .25rem 0 0; }
.tk-pop-actions { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: .9rem; }
.tk-pop-close { margin-left: auto; font-size: .8rem; font-weight: 600; padding: .45rem .9rem; border-radius: .6rem; border: 1px solid var(--border-color); color: var(--text-primary); background: transparent; }
.tk-months { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(6.2rem, 1fr); gap: .5rem; overflow-x: auto; padding-bottom: .4rem; margin-bottom: 1rem; scroll-snap-type: x mandatory; }
.tk-month { scroll-snap-align: start; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding: .8rem 1.3rem .9rem .8rem; border-radius: 1rem;
  background: var(--tk-card); border: 1px solid var(--glass-border); text-align: left; overflow: hidden; transition: border-color .2s, transform .2s; }
.tk-month:hover { transform: translateY(-1px); border-color: var(--border-hover); }
.tk-month.is-on { border-color: var(--tk-booked); box-shadow: 0 0 0 1px var(--tk-booked), 0 8px 24px -10px var(--tk-booked); }
.tk-month-name { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.tk-month-big { font-family: 'Outfit', sans-serif; font-size: 1.7rem; font-weight: 700; color: var(--text-primary); line-height: 1.1; z-index: 1; }
.tk-month-cap { font-size: .66rem; color: var(--text-muted); z-index: 1; }
.tk-month-io { font-size: .66rem; color: var(--text-secondary); margin-top: .35rem; z-index: 1; white-space: nowrap; }
.tk-month-bar { position: absolute; right: .55rem; top: .8rem; bottom: .9rem; width: .3rem; border-radius: 999px; background: var(--tk-track); display: flex; align-items: flex-end; overflow: hidden; }
.tk-month-bar i { display: block; width: 100%; background: var(--tk-free); border-radius: 999px; }
.tk-month-detail { animation: tkIn .25s ease; }
@keyframes tkIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tk-h2 { font-family: 'Outfit', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--text-primary); }
.tk-h3 { font-size: .85rem; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: .45rem; margin-bottom: .5rem; }
.tk-mt { margin-top: 1.2rem; }
.tk-count { font-size: .72rem; padding: .05rem .5rem; border-radius: 999px; background: var(--bg-elevated); color: var(--text-secondary); }
.tk-muted { color: var(--text-secondary); font-size: .86rem; margin: .2rem 0 .9rem; }
.tk-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; }
@media (min-width: 900px) { .tk-cols { grid-template-columns: 1.3fr 1fr 1fr; } }
.tk-panel { background: var(--tk-card); border: 1px solid var(--glass-border); box-shadow: var(--card-shadow), var(--glass-shine); border-radius: 1.1rem; padding: 1rem; min-width: 0; }
.tk-list { display: flex; flex-direction: column; }
.tk-list li { display: flex; align-items: baseline; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--border-color); font-size: .82rem; color: var(--text-secondary); min-width: 0; }
.tk-list li:last-child { border-bottom: 0; }
.tk-list b { color: var(--text-primary); font-weight: 600; }
.tk-date { flex: none; width: 3.3rem; font-weight: 700; font-size: .75rem; color: var(--accent-sky); font-variant-numeric: tabular-nums; }
.tk-li-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tk-li-side { flex: none; font-size: .72rem; color: var(--text-muted); }
.tk-empty { font-size: .82rem; color: var(--text-muted); padding: .4rem 0; }
.tk-find-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: .8rem; align-items: end; }
@media (min-width: 900px) { .tk-find-form { grid-template-columns: 11rem minmax(0, 1fr) 11rem 11rem auto; } }
.tk-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.tk-field > span { font-size: .72rem; font-weight: 600; color: var(--text-muted); }
.tk-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.tk-chip { padding: .4rem .65rem; border-radius: 999px; font-size: .78rem; font-weight: 600; border: 1px solid var(--input-border); color: var(--text-secondary); background: var(--input-bg); }
.tk-chip.is-on { background: var(--tk-booked); border-color: var(--tk-booked); color: #fff; }
.tk-go { padding: .65rem 1.3rem; border-radius: .8rem; font-weight: 700; font-size: .9rem; color: #fff; background: linear-gradient(135deg, var(--tk-booked), var(--tk-booked2)); box-shadow: 0 8px 20px -8px var(--tk-booked); }
.tk-go:disabled { opacity: .6; }
.tk-error { color: var(--accent-danger); font-size: .85rem; margin-top: .6rem; }
.tk-res-head { margin-top: 1rem; }
.tk-results { display: grid; grid-template-columns: minmax(0, 1fr); gap: .65rem; }
@media (min-width: 760px) { .tk-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .tk-results { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tk-result { display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1rem; border-radius: 1rem; background: var(--tk-card); border: 1px solid var(--glass-border); transition: border-color .2s, transform .2s; min-width: 0; }
.tk-result:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.tk-result.is-best { border-color: var(--tk-free); box-shadow: 0 0 0 1px var(--tk-free), 0 10px 26px -14px var(--tk-free); }
.tk-fit { align-self: flex-start; font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .15rem .5rem; border-radius: 999px; background: rgba(52,211,153,.15); color: var(--tk-free); margin-bottom: .2rem; }
.tk-fit.is-warn { background: rgba(242,184,75,.16); color: var(--tk-pending); }
.tk-fit.is-soon { background: rgba(123,184,224,.15); color: var(--accent-sky); }
.tk-result-home { color: var(--text-primary); font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-result-room { font-size: .8rem; color: var(--text-secondary); }
.tk-result-when { font-size: .76rem; color: var(--text-muted); }
.tk-result-price { font-size: .8rem; font-weight: 700; color: var(--text-primary); margin-top: .2rem; }
/* Owner financials and property search (2026-10-07) */
.of-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .of-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.of-stats .tk-stat { grid-column: auto; }
.of-stats .tk-stat-label { margin: 0 0 .3rem; }
.of-late { color: var(--accent-danger) !important; }
.of-chart-panel { margin-bottom: 1.25rem; }
.of-chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3rem 1rem; margin-bottom: .8rem; }
.of-proj { font-size: .8rem; color: var(--text-muted); }
.of-proj b { color: var(--text-primary); }
.of-chart { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .35rem; height: 12rem; align-items: end; }
.of-col { display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.of-val { font-size: .62rem; color: var(--text-muted); height: 1rem; font-variant-numeric: tabular-nums; }
.of-bar { flex: 1; width: 100%; max-width: 2.4rem; display: flex; align-items: flex-end; border-radius: .5rem; background: var(--tk-track); overflow: hidden; }
.of-bar i { display: block; width: 100%; border-radius: .5rem; background: linear-gradient(180deg, var(--tk-booked), var(--tk-booked2)); transition: height .8s cubic-bezier(.2,.8,.2,1); }
.of-col.is-now .of-bar i { background: linear-gradient(180deg, var(--tk-free), #0E8A55); }
.of-col.is-now .of-mon { color: var(--text-primary); font-weight: 700; }
.of-mon { font-size: .66rem; color: var(--text-muted); margin-top: .3rem; }
.of-homes .tk-h3 { margin-bottom: .6rem; }
.of-table { background: var(--tk-card); border: 1px solid var(--glass-border); border-radius: 1.1rem; box-shadow: var(--card-shadow), var(--glass-shine); overflow: hidden; }
.of-tr { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr)); gap: .5rem; padding: .7rem 1rem; border-bottom: 1px solid var(--border-color); font-size: .85rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; align-items: center; }
.of-tr:last-child { border-bottom: 0; }
.of-th { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); background: var(--bg-elevated); }
.of-home { color: var(--text-primary); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-note { font-size: .74rem; color: var(--text-muted); margin-top: .6rem; }
@media (max-width: 640px) {
  .of-chart { height: 9rem; gap: .2rem; }
  .of-val { display: none; }
  .of-th { display: none; }
  .of-tr { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem .8rem; }
  .of-home { grid-column: 1 / -1; font-size: .95rem; }
  .of-tr span[data-l]::before { content: attr(data-l); display: block; font-size: .64rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
}
.tk-tabs a.is-on { background: var(--tk-booked); color: #fff; }
.tk-tabs a:not(.is-on) { color: var(--text-secondary); }
.os-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.os-new { font-size: .66rem; font-weight: 700; color: var(--accent-gold); }
.os-card.is-new { border-color: rgba(232,188,64,.45); }
.os-st.os-new, .os-st.os-shortlisted { background: rgba(123,184,224,.15); color: var(--accent-sky); }
.os-st.os-viewing, .os-st.os-offer { background: rgba(232,188,64,.16); color: var(--accent-gold); }
.os-st.os-rejected, .os-st.os-gone { background: rgba(122,139,163,.15); color: var(--text-muted); }
.os-facts { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .78rem; color: var(--text-secondary); margin-top: .35rem; }
.os-price { font-weight: 700; color: var(--text-primary); }
.os-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .5rem; font-size: .78rem; }
/* Bed holds (2026-10-07) */
.tk-root { --tk-held: #A78BFA; }
html.light .tk-root { --tk-held: #7C3AED; }
.tk-k-held { background: repeating-linear-gradient(135deg, var(--tk-held) 0 6px, rgba(167,139,250,.55) 6px 12px); }
.tk-seg.tk-k-held span { color: #fff; }
.tk-seg.is-click { cursor: pointer; }
.tk-seg.is-click:hover { filter: brightness(1.12); }
.tk-hold-btn { margin-top: .2rem; font-size: .66rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; color: var(--tk-held); border: 1px solid var(--tk-held); background: transparent; }
.tk-hold-btn:hover { background: var(--tk-held); color: #fff; }
.tk-hold-res { align-self: flex-start; margin-top: .45rem; font-size: .72rem; padding: .25rem .7rem; }
.tk-holds { margin-top: .6rem; padding-top: .5rem; border-top: 1px dashed var(--border-color); display: flex; flex-direction: column; gap: .2rem; }
.tk-holds li { display: flex; align-items: baseline; gap: .5rem; font-size: .78rem; color: var(--text-secondary); min-width: 0; }
.tk-holds b { color: var(--tk-held); font-weight: 700; }
.tk-held-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--tk-held); flex: none; align-self: center; }
.tk-sheet-wrap { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 640px) { .tk-sheet-wrap { align-items: center; } }
.tk-sheet-bg { position: absolute; inset: 0; background: rgba(4,10,22,.55); backdrop-filter: blur(4px); }
.tk-sheet { position: relative; width: 100%; max-width: 28rem; max-height: 92vh; overflow-y: auto; background: var(--bg-secondary); border: 1px solid var(--glass-border);
  border-radius: 1.3rem 1.3rem 0 0; padding: 1.2rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: .7rem; box-shadow: 0 -20px 60px -20px rgba(0,0,0,.5); }
@media (min-width: 640px) { .tk-sheet { border-radius: 1.3rem; } }
.tk-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.tk-sheet-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .3rem; }
/* Beds that fit an enquirer's dates (Messages, 2026-10-07) */
.ib-fit { margin-top: .6rem; padding-top: .55rem; border-top: 1px dashed var(--border-color); display: flex; flex-direction: column; gap: .3rem; font-size: 12px; color: var(--text-secondary); }
.ib-fit-head { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; font-weight: 600; color: var(--text-primary); }
.ib-fit-note { color: var(--text-muted); font-weight: 400; }
.ib-fit-sub { font-weight: 600; color: var(--text-primary); margin-top: .2rem; }
.ib-fit-row { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.ib-fit-row b, .ib-fit-held b { color: var(--text-primary); font-weight: 600; }
.ib-fit-held { color: #8B5CF6; }
.ib-fit-held b { color: #8B5CF6; }
.ib-fit-err { color: var(--accent-danger); }
.ib-hold { flex: none; font-size: 11px; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; border: 1px solid #8B5CF6; color: #8B5CF6; background: transparent; }
.ib-hold:hover:not(:disabled) { background: #8B5CF6; color: #fff; }
.ib-hold:disabled { opacity: .7; }
/* Website widget setup (/admin/embed, 2026-10-07) */
.em-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 960px) { .em-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.em-form { display: flex; flex-direction: column; gap: .7rem; }
.em-hint { font-size: .74rem; color: var(--text-muted); }
.em-code { border: 1px solid var(--border-color); border-radius: .8rem; overflow: hidden; }
.em-code-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .45rem .7rem; font-size: .76rem; color: var(--text-primary); background: var(--bg-elevated); }
.em-code pre { margin: 0; padding: .7rem; font-size: .72rem; line-height: 1.5; white-space: pre-wrap; word-break: break-all; color: var(--text-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.em-preview { min-width: 0; }
.em-stats .tk-h3 { margin-bottom: .4rem; }
/* Tracker states added after the pre-demo audit (2026-10-07) */
.tk-k-gap { background: repeating-linear-gradient(90deg, rgba(122,139,163,.35) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px rgba(122,139,163,.45); }
.tk-k-noroom { background: repeating-linear-gradient(135deg, #E25555 0 4px, rgba(226,85,85,.35) 4px 8px); }
.tk-seg.tk-k-noroom span { color: #fff; }
.tk-notice { font-size: .88rem; color: var(--text-secondary); margin-bottom: 1rem; border-left: 3px solid var(--accent-sky); }
/* What the owner sees (/admin/owner-view, 2026-10-07) */
.ov-card { margin-bottom: 1rem; }
.ov-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.ov-sub { margin: .1rem 0 0; }
.ov-list { display: flex; flex-direction: column; }
.ov-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--border-color); }
.ov-label { font-weight: 700; color: var(--text-primary); font-size: .95rem; }
.ov-desc { font-size: .8rem; color: var(--text-muted); margin-top: .1rem; }
.ov-switch { position: relative; flex: none; width: 3.1rem; height: 1.8rem; border-radius: 999px; background: var(--tk-track, rgba(123,184,224,.15)); border: 1px solid var(--border-hover); transition: background .2s; }
.ov-switch span { position: absolute; top: .15rem; left: .15rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .2s; }
.ov-switch.is-on { background: var(--accent-success); border-color: var(--accent-success); }
.ov-switch.is-on span { transform: translateX(1.3rem); }
.ov-switch:disabled { opacity: .6; }
.ov-warn { margin-top: .8rem; }

/* Font stacks with the metric-matched fallbacks from static/fonts/fonts.css.
   Here rather than in tailwind.config.js so no rebuild is needed; app.css
   loads after tailwind.css, so these win. */
:root { --font-display: 'Outfit', 'Outfit Fallback', system-ui, sans-serif; }
.font-sans { font-family: 'DM Sans', 'DM Sans Fallback', system-ui, sans-serif; }
.font-display { font-family: 'Outfit', 'Outfit Fallback', system-ui, sans-serif; }

/* Tracker month lists: every row opens its home (Brian, 2026-10-07: "coming
   beds available make clickable"). */
.tk-li-btn { display: flex; align-items: baseline; gap: .6rem; flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; border-radius: .4rem; }
.tk-li-btn:hover .tk-li-main b, .tk-li-btn:focus-visible .tk-li-main b { text-decoration: underline; color: var(--text-primary); }
.tk-li-act { flex-shrink: 0; font-size: .72rem; font-weight: 600; padding: .2rem .55rem; border-radius: .5rem; border: 1px solid var(--border-color); color: var(--text-secondary); background: none; cursor: pointer; }
.tk-li-act:hover { color: var(--text-primary); border-color: var(--text-muted); }
.tk-card { scroll-margin-top: 5rem; }

/* Partners (vacancies only) on What the owner sees */
.pa-link { background: none; border: 0; padding: 0; font: inherit; font-size: .78rem; font-weight: 600; color: var(--accent, #1B6DB5); cursor: pointer; }
.pa-link:hover { text-decoration: underline; }
.pa-form { display: grid; grid-template-columns: 1fr; gap: .5rem; margin-top: .9rem; }
@media (min-width: 640px) { .pa-form { grid-template-columns: 1fr 1fr 1fr auto; } }
.pa-made { margin-top: .8rem; padding: .75rem .9rem; border-radius: .8rem; border: 1px solid var(--border-color); background: var(--bg-elevated); }
.pa-made code { font-size: .78rem; padding: .05rem .3rem; border-radius: .3rem; background: var(--bg-base); color: var(--text-primary); }

/* Partner request to book (Spotahome) */
.prq-form { display: grid; gap: .75rem; margin-bottom: 1rem; }
.prq-hint { color: var(--danger, #DC2626); }
.prq-actions { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; align-items: center; }
.prq-done { margin-bottom: 1rem; }
.prq-status { font-weight: 600; white-space: nowrap; }
.prq-status.is-booked { color: #16A34A; }
.prq-status.is-brian { color: var(--accent, #1B6DB5); }
.prq-status.is-closed { color: var(--text-muted); }

/* Room photos on "Rooms in this house" (Brian, 2026-10-08) */
.rp-thumb { position: relative; width: 64px; height: 48px; border-radius: 0.5rem; overflow: hidden; border: 1px solid var(--border-color); padding: 0; background: var(--bg-elevated); cursor: zoom-in; }
.rp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rp-thumb span { position: absolute; right: 3px; bottom: 3px; font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 5px; border-radius: 999px; background: rgba(0,0,0,0.65); color: #fff; }
.rp-dialog { width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--border-color); border-radius: 1rem; background: var(--bg-primary, #0C1830); color: var(--text-primary); }
.rp-dialog::backdrop { background: rgba(0,0,0,0.7); }
.rp-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; background: var(--bg-elevated); border-bottom: 1px solid var(--border-color); }
.rp-head p { font-weight: 600; margin: 0; }
.rp-head button { font-size: 0.8125rem; font-weight: 600; padding: 0.375rem 0.75rem; border-radius: 0.5rem; border: 1px solid var(--border-color); color: var(--text-secondary); background: transparent; }
.rp-list { display: grid; gap: 0.75rem; padding: 0.75rem; }
.rp-list img { width: 100%; height: auto; border-radius: 0.75rem; display: block; }
.rp-edit { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.rp-edit-item { position: relative; width: 64px; height: 48px; }
.rp-edit-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 0.375rem; display: block; }
.rp-edit-item button { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 999px; font-size: 14px; line-height: 18px; text-align: center; background: #DC2626; color: #fff; border: 0; }
.rp-edit-add { display: inline-flex; align-items: center; height: 48px; padding: 0 0.75rem; border-radius: 0.375rem; border: 1px dashed var(--border-color); font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.room-list-tall { max-height: 32rem; }

/* Spotahome reference list on /admin/backups (2026-10-08) */
.sr-row { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.25rem 0.75rem; align-items: center; padding: 0.5rem 0.625rem; border-radius: 0.625rem; background: var(--bg-elevated); border: 1px solid var(--border-color); }
.sr-ref { font-size: 0.75rem; font-weight: 600; color: var(--text-primary); }
.sr-name { font-size: 0.75rem; color: var(--text-secondary); min-width: 0; overflow-wrap: anywhere; }
.sr-pick { grid-column: 1 / -1; width: 100%; }
.sr-miss { border-color: #D97706 !important; }
@media (min-width: 768px) { .sr-row { grid-template-columns: 6.5rem 1fr 22rem; } .sr-pick { grid-column: auto; } }

/* Bed tracker Leaving list: who comes into the room next (Brian, 2026-10-20, #58). */
.tk-li-btn:has(.tk-li-next) { flex-wrap: wrap; }
.tk-li-next { display: block; flex-basis: 100%; padding-left: 3.4rem; font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; }

/* Bed tracker: leaving vs arriving banner, monthly balance, summer panel (Brian, 2026-10-23). */
.tk-flow { display: block; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; font-size: .85rem; line-height: 1.4; text-decoration: none; color: var(--text-primary); border: 1px solid var(--border-color); background: var(--bg-elevated); }
.tk-flow.is-warn { border-color: rgba(239, 68, 68, .45); background: rgba(239, 68, 68, .08); }
.tk-flow.is-ok { border-color: rgba(34, 197, 94, .4); background: rgba(34, 197, 94, .07); }
.tk-flow strong { display: block; margin-top: 2px; }
.tk-month-net { display: block; font-size: .72rem; font-weight: 700; }
.tk-flow-line { margin: 2px 0 6px; font-size: .85rem; color: var(--text-secondary); }
.tk-summer-by { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: .85rem; color: var(--text-secondary); }

/* Phone top bar: six icons and the avatar did not fit at 390px (audit 2026-10-22). */
@media (max-width: 639px) {
  .sd-top-right { gap: 0 !important; min-width: 0; }
  .sd-top-right > * { flex-shrink: 0; }
  .sd-top-me { padding-left: 4px !important; padding-right: 4px !important; }
}

/* Computer: the open reply tools (Check dates, beds list) left ~110px for their
   email; cap them and scroll inside (audit 2026-10-22). */
@media (min-width: 1024px) {
  .sd-reply-tools { max-height: 42vh !important; overflow-y: auto !important; }
}

/* Design audit 2026-10-28 */
/* The footer's last line sat under the phone bottom bar. */
@media (max-width: 1023px) { .site-foot { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } }
/* "€795per month": the flex row dropped the leading space. */
.pcard-per { margin-left: .25em; }
/* Room rows on a home's page: Enquire was 29px tall. */
.rl-enq, .room-list button, .room-list a.btn { min-height: 44px; }

/* Reach banner for owners and partners on the bed tracker (2026-10-28) */
.tk-reach { margin: 0 0 16px; padding: 16px; border-radius: 20px; color: #fff;
  background: radial-gradient(600px 300px at 90% 0%, rgba(168,85,247,.35), transparent 60%), linear-gradient(135deg, #1B3A6B, #0C1830);
  box-shadow: 0 16px 40px -20px rgba(27,58,107,.8); }
.tk-reach-k { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.7); margin: 0 0 10px; }
.tk-reach-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .tk-reach-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tk-reach-row div { display: flex; flex-direction: column; }
.tk-reach-row b { font-family: var(--font-display, 'Outfit'), sans-serif; font-size: 34px; line-height: 1; font-weight: 800; letter-spacing: -.02em; }
.tk-reach-row span { font-size: 13px; color: rgba(255,255,255,.75); margin-top: 4px; }
.tk-reach-row i { font-style: normal; font-size: 12px; font-weight: 700; color: #4ADE80; margin-top: 2px; }
.tk-reach-row .is-ai b { background: linear-gradient(90deg, #C4B5FD, #7BB8E0); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Bed tracker command centre for big screens (2026-10-28). Phones and small
   laptops keep the stacked layout; from 1280px the board replaces the banner,
   reach panel and stat tiles. Animations play once; nothing loops. */
.cc { display: none; }
@media (min-width: 1280px) {
  .cc { display: block; margin: -4px 0 20px; animation: cc-in .45s cubic-bezier(.2,.8,.2,1) both; }
  .tk-root:has(.cc) .tk-flow, .tk-root:has(.cc) .tk-stats, .tk-root:has(.cc) .tk-reach { display: none; }
  .tk-root:has(.cc) { max-width: 1840px; }
}
@keyframes cc-in { from { opacity: 0; transform: translateY(6px); } }
.cc-live { display: flex; justify-content: flex-end; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); margin: -36px 0 12px; }
.cc-dot { width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 4px rgba(52,211,153,.15); }
.cc-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; padding: 10px 18px; border-radius: 14px; margin-bottom: 12px; font-size: 13px;
  color: var(--text-secondary); border: 1px solid var(--border-color); background: linear-gradient(90deg, rgba(27,58,107,.55), rgba(167,139,250,.16)); }
html.light .cc-strip { background: linear-gradient(90deg, rgba(27,58,107,.08), rgba(167,139,250,.12)); }
.cc-strip b { font-family: var(--font-display, 'Outfit'), sans-serif; font-size: 18px; font-weight: 800; color: var(--text-primary); margin-right: 6px; }
.cc-strip i { font-style: normal; font-weight: 700; color: #22C55E; }
.cc-strip .is-ai b { background: linear-gradient(90deg, #A78BFA, #7BB8E0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cc-lbl { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.cc-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.cc-kpi { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; border-radius: 16px; min-width: 0;
  background: var(--bg-card); border: 1px solid var(--border-color); }
.cc-kpi > span { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; }
.cc-kpi b { font-family: var(--font-display, 'Outfit'), sans-serif; font-size: 28px; line-height: 1; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; color: var(--text-primary); }
.cc-kpi b small { font-size: 15px; color: var(--text-muted); font-weight: 700; }
.cc-kpi em { font-style: normal; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cc-kpi.is-free b { color: #22C55E; } .cc-kpi.is-warn b { color: #F59E0B; }
.cc-grid { display: grid; grid-template-columns: 1.15fr 1fr 0.85fr; gap: 12px; align-items: start; }
@media (min-width: 1700px) { .cc-grid { grid-template-columns: 1.1fr 0.95fr 0.8fr 1.7fr; } }
.cc-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 18px; padding: 14px 16px; min-width: 0;
  max-height: calc(100vh - 290px); min-height: 320px; overflow-y: auto; }
.cc-card h3 { font-family: var(--font-display, 'Outfit'), sans-serif; font-size: 15px; font-weight: 700; margin: 0 0 6px; display: flex; justify-content: space-between; gap: 8px; color: var(--text-primary); }
.cc-card h3 em { font-family: inherit; font-style: normal; font-weight: 500; font-size: 12px; color: var(--text-muted); }
.cc-mt { margin-top: 16px !important; }
.cc-sub, .cc-empty { font-size: 12.5px; color: var(--text-muted); margin: 0 0 6px; }
.cc-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border-color); }
.cc-row-t { flex: 1; min-width: 0; }
.cc-row-t b { display: block; font-size: 13.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-row-t small { display: block; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-pill { font-size: 11.5px; font-weight: 700; padding: 5px 9px; border-radius: 99px; white-space: nowrap; }
.p-green { background: rgba(52,211,153,.15); color: #22C55E; } .p-sky { background: rgba(123,184,224,.16); color: var(--accent-sky, #7BB8E0); }
.p-amber { background: rgba(251,191,36,.15); color: #F59E0B; }
.cc-price { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; min-width: 48px; text-align: right; }
.cc-btn { font-size: 12px; font-weight: 700; padding: 7px 11px; border-radius: 10px; color: #fff !important; text-decoration: none; border: 0; cursor: pointer;
  background: linear-gradient(135deg, #2F6FB5, #5B9BD5); white-space: nowrap; }
.cc-tl { grid-column: 1 / -1; max-height: none; }
@media (min-width: 1700px) { .cc-tl { grid-column: auto; max-height: calc(100vh - 290px); } }
.cc-tl-axis { position: relative; height: 16px; margin: 6px 0 4px 132px; font-size: 10.5px; color: var(--text-muted); }
.cc-tl-axis span { position: absolute; top: 0; }
.cc-tl-home { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); margin: 8px 0 2px; }
.cc-tl-row { display: grid; grid-template-columns: 124px 1fr; gap: 8px; align-items: center; height: 18px; margin: 3px 0; }
.cc-tl-name { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-tl-bar { position: relative; height: 14px; border-radius: 5px; background: rgba(127,127,127,.08); overflow: hidden; }
.cc-tl-bar i { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.cc-tl-bar i.tk-k-free { background: rgba(52,211,153,.25); box-shadow: inset 0 0 0 1px rgba(52,211,153,.55); }
.cc-today { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #F59E0B; z-index: 2; }
.cc-more { font-size: 12px; color: var(--text-muted); margin: 10px 2px 0; }
/* command centre: gauges, mini charts, pop out (2026-10-28) */
.cc-kpi { align-items: center; justify-content: space-between; gap: 12px; }
.cc-kpi-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cc-kpi-t b { margin: 3px 0 2px; }
.cc-gauge { flex: 0 0 auto; transform: rotate(-90deg); }
.cc-gauge .g-bg { fill: none; stroke: rgba(127,127,127,.18); stroke-width: 4; }
.cc-gauge .g-fg { fill: none; stroke: #7BB8E0; stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray .8s cubic-bezier(.2,.8,.2,1); }
.cc-gauge .g-green { stroke: #34D399; }
.cc-meter { width: 64px; height: 6px; border-radius: 6px; background: rgba(127,127,127,.18); overflow: hidden; flex: 0 0 auto; }
.cc-meter i { display: block; height: 100%; background: #34D399; border-radius: 6px; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.cc-spark { display: flex; align-items: flex-end; gap: 2px; width: 64px; height: 26px; flex: 0 0 auto; }
.cc-spark i { flex: 1; border-radius: 2px; min-height: 2px; transition: height .8s cubic-bezier(.2,.8,.2,1); }
.cc-spark.is-wide { gap: 3px; }
.b-sky { background: #7BB8E0; } .b-amber { background: #F59E0B; }
.cc-chart { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 10px 16px 8px; margin-bottom: 12px; }
.cc-chart-h { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--text-muted); }
.cc-chart-h b { font-family: var(--font-display, 'Outfit'), sans-serif; font-size: 14px; color: var(--text-primary); }
.cc-chart-h span { display: flex; align-items: center; gap: 6px; flex: 1; }
.cc-chart-h span i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-left: 8px; }
.lg-in { background: #34D399; } .lg-out { background: #F87171; } .lg-free { background: #7BB8E0; }
.cc-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 10px; height: 64px; margin-top: 6px; }
.cc-mcol { display: flex; flex-direction: column; align-items: center; gap: 3px; background: none; border: 0; padding: 0; cursor: pointer; min-width: 0; }
.cc-mbars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.cc-mbars i { width: 26%; max-width: 9px; border-radius: 3px 3px 1px 1px; transition: height .8s cubic-bezier(.2,.8,.2,1); }
.cc-mcol:hover .cc-mbars i { filter: brightness(1.2); }
.cc-mlab { font-size: 10.5px; color: var(--text-muted); }
.cc-mnum { font-size: 11px; color: var(--text-secondary); }
.cc-x { margin-left: auto; font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 8px; border: 1px solid var(--border-color);
  background: transparent; color: var(--text-secondary); cursor: pointer; font-family: 'DM Sans', sans-serif; }
.cc-x:hover { color: var(--text-primary); border-color: var(--accent-sky, #7BB8E0); }
.cc-card h3 { align-items: center; } .cc-card h3 em { margin-left: auto; }
/* Pop out: the panel grows to the middle of the screen; Close or Esc puts it back. */
.cc-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(4,10,22,.6); backdrop-filter: blur(4px); }
.cc-card.is-pop, .cc-bars.is-pop { position: fixed; z-index: 61; inset: 6vh 8vw; max-height: none; animation: cc-pop .3s cubic-bezier(.2,.8,.2,1) both;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,.6); }
.cc-bars.is-pop { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 18px; padding: 28px; height: auto; }
@keyframes cc-pop { from { opacity: 0; transform: scale(.97); } }
.cc-card.is-pop .cc-tl-row { height: 22px; } .cc-card.is-pop .cc-tl-bar { height: 18px; }
.cc-card h3 { white-space: nowrap; } .cc-card h3 em { white-space: nowrap; }
@media (min-width: 1700px) { .cc-card.cc-tl:not(.is-pop) { max-height: calc(100vh - 380px); } }
.cc-kpi-t > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; color: var(--text-secondary); }
@media (max-width: 1599px) { .cc-kpi .cc-spark, .cc-kpi .cc-meter { width: 44px; } .cc-kpi { padding: 12px; gap: 8px; } }

/* Command centre: one type scale and a screen-height fit (2026-10-28).
   Labels 12px, rows 13px, panel titles 14px, figures 26px; nothing else. */
.cc { --cc-lbl: 12px; --cc-txt: 13px; --cc-ttl: 14px; --cc-num: 26px; --cc-gap: 12px; }
.cc-strip, .cc-strip span, .cc-chart-h, .cc-chart-h span, .cc-row-t small, .cc-kpi-t > span, .cc-kpi em,
.cc-card h3 em, .cc-sub, .cc-empty, .cc-pill, .cc-price, .cc-btn, .cc-x, .cc-live, .cc-lbl, .cc-mlab, .cc-mnum,
.cc-tl-name, .cc-tl-axis, .cc-more { font-size: var(--cc-lbl) !important; }
.cc-row-t b, .cc-tl-home { font-size: var(--cc-txt) !important; }
.cc-card h3, .cc-chart-h b { font-size: var(--cc-ttl) !important; }
.cc-kpi b, .cc-strip b { font-size: var(--cc-num) !important; line-height: 1; }
.cc-strip b { font-size: 20px !important; }
.cc-kpi b small { font-size: 14px !important; }
.cc-lbl { letter-spacing: .08em; }
.cc-kpis, .cc-grid { gap: var(--cc-gap); }
.cc-kpi, .cc-card, .cc-chart, .cc-strip { border-radius: 16px; }
.cc-kpi { padding: 12px 14px; min-height: 76px; }
.cc-card { padding: 14px 16px; }
.cc-row { padding: 7px 0; min-height: 44px; }
.cc-pill { padding: 4px 9px; } .cc-btn { padding: 6px 11px; } .cc-x { padding: 3px 9px; }
/* Every panel in a row is the same height and the whole board fits the
   screen; long lists scroll inside their panel. */
@media (min-width: 1280px) {
  .cc-grid { align-items: stretch; }
  .cc-card:not(.is-pop) { height: calc(100vh - 420px); min-height: 300px; max-height: none; }
  .cc-tl:not(.is-pop) { height: 340px; }
}
@media (min-width: 1700px) { .cc-tl:not(.is-pop) { height: calc(100vh - 420px); } }
.cc-card h3 { margin-bottom: 8px; }
.cc-chart { padding: 10px 16px; } .cc-bars { height: 56px; }
@media (min-width: 1280px) {
  .cc-card:not(.is-pop), .cc-tl:not(.is-pop) { height: max(300px, calc(100vh - 500px)); }
}
@media (min-width: 1280px) and (max-width: 1699px) { .cc-tl:not(.is-pop) { height: 340px; } }

/* Command centre on phones and small screens (2026-10-28): same board,
   stacked for one hand. Replaces the old banner, reach panel and tiles. */
@media (max-width: 1279px) {
  .cc { display: block; margin: 0 0 18px; animation: cc-in .45s cubic-bezier(.2,.8,.2,1) both; }
  .tk-root:has(.cc) .tk-flow, .tk-root:has(.cc) .tk-stats, .tk-root:has(.cc) .tk-reach { display: none; }
  .cc-live { margin: -6px 0 10px; justify-content: flex-start; }
  .cc-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 12px 14px; }
  .cc-strip .cc-lbl { grid-column: 1 / -1; }
  .cc-strip span { display: flex; flex-direction: column; line-height: 1.25; }
  .cc-strip b { margin: 0 0 2px; }
  .cc-kpis { grid-template-columns: 1fr 1fr; }
  .cc-kpis .cc-kpi:last-child { grid-column: 1 / -1; }
  .cc-kpi { min-height: 70px; }
  .cc-bars { gap: 4px; height: 52px; } .cc-mlab { font-size: 10px !important; }
  .cc-chart-h span { display: none; }
  .cc-grid { grid-template-columns: 1fr !important; }
  .cc-card:not(.is-pop) { height: auto !important; min-height: 0; max-height: none; overflow: visible; }
  .cc-card:not(.is-pop) .cc-row:nth-of-type(n+6) { display: none; }
  .cc-tl:not(.is-pop) { display: none; }
  .cc-card.is-pop, .cc-bars.is-pop { inset: auto 0 0 0; max-height: 86vh; border-radius: 22px 22px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; }
  .cc-row { min-height: 48px; }
  .cc-btn { padding: 9px 12px; }
  .cc-x { padding: 6px 11px; }
  .cc-more { display: none; }
}
@media (max-width: 420px) { .cc-price { display: none; } }
@media (max-width: 1279px) {
  .cc-kpi-t > span { white-space: normal; line-height: 1.25; }
  .cc-kpi .cc-spark, .cc-kpi .cc-meter { width: 40px; }
  .cc-strip span { justify-content: flex-start; }
  .cc-scrim { z-index: 200; }
  .cc-card.is-pop, .cc-bars.is-pop { z-index: 201; }
}
/* A transform on .cc would make the popped-out panel position inside the
   board instead of the screen: fade only. */
@keyframes cc-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1279px) {
  .cc-card.is-pop, .cc-bars.is-pop { background: var(--bg-primary, #0C1830); bottom: calc(76px + env(safe-area-inset-bottom)); max-height: 72vh;
    border-radius: 22px; left: 8px; right: 8px; padding-bottom: 16px; z-index: 301; }
  html.light .cc-card.is-pop, html.light .cc-bars.is-pop { background: #fff; }
  .cc-scrim { z-index: 300; }
}
@media (max-width: 1279px) { .cc-card.is-pop, .cc-bars.is-pop { top: auto; height: auto !important; } }

/* Phones: compact, no big boxes for one number (Nils, 2026-10-28). */
@media (max-width: 767px) {
  .tk-root:has(.cc) .tk-head .tk-sub { display: none; }
  .tk-root:has(.cc) .tk-title { font-size: 26px; }
  .tk-root:has(.cc) .tk-head { margin-bottom: 6px; }
  .cc-live { margin: 0 0 8px; }
  .cc-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 10px 12px; margin-bottom: 8px; }
  .cc-strip .cc-lbl { grid-column: 1 / -1; margin-bottom: -2px; }
  .cc-strip span { font-size: 10.5px !important; line-height: 1.2; color: var(--text-muted); }
  .cc-strip b { font-size: 17px !important; }
  .cc-strip .is-ai { font-size: 10.5px !important; }
  .cc-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 8px; }
  .cc-kpis .cc-kpi:last-child { grid-column: auto; }
  .cc-kpis .cc-kpi:nth-child(4), .cc-kpis .cc-kpi:nth-child(5) { grid-column: span 1; }
  .cc-kpi { min-height: 0; padding: 8px 10px; gap: 6px; border-radius: 12px; flex-direction: row; }
  .cc-kpi .cc-gauge { width: 26px; height: 26px; }
  .cc-kpi .cc-spark, .cc-kpi .cc-meter, .cc-kpi em { display: none !important; }
  .cc-kpi-t > span { font-size: 10.5px !important; line-height: 1.2; white-space: normal; order: 2; color: var(--text-muted); }
  .cc-kpi-t b { font-size: 20px !important; margin: 0; order: 1; }
  .cc-kpi b small { font-size: 11px !important; }
  .cc-chart { padding: 8px 12px; margin-bottom: 8px; border-radius: 12px; }
  .cc-bars { height: 40px; }
  .cc-card:not(.is-pop) { padding: 10px 12px; border-radius: 14px; }
  .cc-card h3 { margin-bottom: 4px; }
  .cc-row { min-height: 44px; padding: 5px 0; }
  .cc-card:not(.is-pop) .cc-row:nth-of-type(n+4) { display: none; }
  .cc-grid { gap: 8px; }
}
.cc-short { display: none; font-style: normal; }
.cc-strip em { font-style: normal; }
@media (max-width: 767px) {
  .cc-strip .cc-long, .cc-kpi-t > span { display: none !important; }
  .cc-short { display: block; font-size: 10.5px; color: var(--text-muted); line-height: 1.2; order: 2; }
  .cc-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .cc-kpi { padding: 8px 4px; justify-content: center; text-align: center; }
  .cc-kpi .cc-gauge { display: none; }
  .cc-kpi-t { align-items: center; }
  .cc-kpi-t b { font-size: 19px !important; }
}

/* Staff pages on big screens (2026-10-28, Nils: "same principles everywhere"):
   use the width of a 24-inch screen instead of a narrow centre column. Narrow
   form pages (max-w-3xl/4xl) stay narrow on purpose. */
@media (min-width: 1600px) {
  main[data-user-logged-in] > .max-w-7xl, main[data-user-logged-in] > .max-w-6xl,
  main[data-user-logged-in] > .max-w-5xl { max-width: 1680px; }
}
/* Bookings: a photo strip, not half the card (cards were mostly picture). */
.bk-thumb { aspect-ratio: auto !important; height: 88px; }
@media (min-width: 1600px) { .bk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 639px) { .bk-thumb { height: 72px; } }
/* Dashboard on phones: small figures, not big boxes (2026-10-28). */
@media (max-width: 767px) {
  .dash-reach { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; }
  .dash-reach > div { padding: 8px 6px !important; text-align: center; }
  .dash-reach > div p:first-child { font-size: 10px !important; line-height: 1.2; min-height: 2.4em; }
  .dash-reach > div p:nth-child(2) { font-size: 18px !important; }
  .dash-reach > div p:nth-child(2) span, .dash-reach > div p:nth-child(3) { display: none; }
  .dash-stats { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
  .dash-stats > a, .dash-stats > div { padding: 8px 10px !important; }
  .dash-stats svg { display: none; }
  .dash-stats p.text-2xl { font-size: 18px !important; line-height: 1.2; }
}
/* Homes list: a taller strip than bookings (it is the home's picture). */
.pr-thumb { height: 120px; }
/* Small figure boxes across staff pages: one number does not need a big box. */
.pg-figs > * { padding: 10px 14px !important; }
.pg-figs p.text-2xl, .pg-figs p.text-3xl { font-size: 22px !important; line-height: 1.15; }
/* Occupancy: the big ring panel is a compact row (2026-10-28). */
.occ-hero { padding: 14px 18px !important; }
.occ-hero > div { flex-direction: row !important; gap: 18px !important; text-align: left; }
.occ-hero svg { width: 84px; height: 84px; }
.occ-hero .text-3xl { font-size: 20px !important; }
.occ-hero .text-\[10px\] { display: none; }
@media (max-width: 639px) { .occ-hero h3 { font-size: 15px; } .occ-hero p.text-sm { font-size: 12.5px; } }
@media (min-width: 1600px) {
  main[data-user-logged-in] > .max-w-7xl, main[data-user-logged-in] > .max-w-6xl,
  main[data-user-logged-in] > .max-w-5xl { padding-left: 32px !important; padding-right: 32px !important; }
}
.occ-hero svg[width="140"], .occ-hero svg { width: 84px !important; height: 84px !important; }
/* Staff pages whose outer box had no side padding touched the screen edge. */
main[data-user-logged-in] > div[class*="max-w-"]:not([class*="px-"]) { padding-left: 16px; padding-right: 16px; }
@media (min-width: 1024px) { main[data-user-logged-in] > div[class*="max-w-"]:not([class*="px-"]) { padding-left: 24px; padding-right: 24px; padding-top: 16px; } }
.occ-hero .text-center { text-align: left !important; }
@media (max-width: 639px) {
  .bk-thumb { height: 34px !important; } .bk-thumb img { display: none; }
  .dash-stats > a, .dash-stats > div { min-height: 0 !important; }
  .dash-stats .text-\[10px\] { font-size: 9.5px !important; }
}
@media (min-width: 768px) {
  .dash-reach > div { padding: 10px 14px !important; }
  .dash-reach > div p.text-2xl { font-size: 22px !important; }
  .dash-stats > a, .dash-stats > div { padding: 12px 14px !important; }
  .dash-stats p.text-2xl { font-size: 22px !important; }
}
@media (max-width: 639px) {
  .pg-figs { gap: 6px !important; }
  .pg-figs > * { padding: 8px 10px !important; }
  .pg-figs p { font-size: 10px !important; } .pg-figs p.text-2xl, .pg-figs p.text-3xl, .pg-figs p.text-xl { font-size: 18px !important; }
}
/* Dashboard on a computer (Nils, 2026-10-28: oversized cards): short figure cards,
   and the vacancy/arrival lists flow into columns instead of one long thin row each. */
@media (min-width: 1024px) {
  .dash-stats { gap: 10px !important; margin-bottom: 16px !important; }
  .dash-stats > a, .dash-stats > div { padding: 10px 14px !important; }
  .dash-stats > a > div:first-child, .dash-stats > div > div:first-child { margin-bottom: 2px !important; }
  .dash-stats p.text-2xl { font-size: 20px !important; line-height: 1.15; }
  .dash-stats p.text-\[10px\]:not(:first-child), .dash-stats p.text-\[11px\] { margin-top: 0 !important; }
  .dash-move-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 18px; max-height: 13rem !important; }
  .dash-move-list > * + * { margin-top: 0 !important; }
  .dash-move-list > div { justify-content: flex-start !important; gap: 10px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
  .dash-move-list > div > div:last-child { margin-left: auto !important; }
}
/* Bed tracker board at 90% on computers (Nils, 2026-10-28: it fits better at Ctrl - 90%). */
/* (zoom removed: it shifted the fixed Expand pop-outs) */
/* Dashboard charts: scroll sideways on small screens, fit their half on a computer. */
@media (max-width: 1023px) { .dash-chart { min-width: 600px; } }
.dash-comm > div { padding: 8px 10px !important; }
.dash-comm p { margin: 0; }
.dash-comm p:last-child { font-size: 17px !important; }
/* Compact staff page headers (Nils, 2026-10-28: headers wasted four lines). One rule for the
   shared "text-2xl sm:text-3xl" page titles, plus the bed tracker's own header. */
main[data-user-logged-in] :is(h1, h2)[class*="sm:text-3xl"][class*="tracking-tight"] { font-size: 22px !important; line-height: 1.2 !important; }
main[data-user-logged-in] :is(h1, h2)[class*="sm:text-3xl"][class*="tracking-tight"] + p { margin-top: 2px !important; font-size: 12.5px !important; }
.tk-head-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }
.tk-head-row .tk-title { font-size: 22px !important; margin: 0; }
.tk-head-row .tk-eyebrow { font-size: 11px; }
.tk-head-link { margin-left: auto; font-size: 12.5px; }
.tk-head .tk-sub { font-size: 12.5px; margin-top: 2px; }
.tk-head { margin-bottom: 10px; }
/* Payments on a computer: each payment is a short row, two columns on wide screens (Nils, 2026-10-28). */
@media (min-width: 1024px) {
  .pay-list { display: grid; grid-template-columns: 1fr; gap: 6px; }
  .pay-list > * + * { margin-top: 0 !important; }
  .pay-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 14px; padding: 8px 12px !important; }
  .pay-row > div:nth-last-child(2) { margin-bottom: 0 !important; }
  .pay-row > div:last-child { align-items: center !important; }
  .pay-row > div:last-child > .space-y-1\.5 { display: flex; flex-wrap: wrap; gap: 2px 14px; }
  .pay-row > div:last-child > .space-y-1\.5 > * { margin-top: 0 !important; }
  .pay-row p.text-lg { font-size: 15px !important; }
  .pay-row > div:last-child > .text-right { display: flex; align-items: center; gap: 10px; }
  .pay-row > div:last-child > .text-right button { margin-top: 0 !important; }
}
.pay-row code { white-space: nowrap; }
/* Dashboard quick actions on one line on a computer. */
@media (min-width: 1024px) {
  main[data-user-logged-in] .qa { padding: 6px 11px !important; font-size: 12.5px !important; gap: 6px !important; }
  main[data-user-logged-in] .qa svg { width: 14px; height: 14px; }
}
@media (max-width: 639px) {
  .qa-row { flex-wrap: nowrap !important; overflow-x: auto; scrollbar-width: none; margin-bottom: 14px !important; padding-bottom: 2px; }
  .qa-row::-webkit-scrollbar { display: none; }
  .qa-row .qa { flex-shrink: 0; white-space: nowrap; }
}
.tr-figs > div { padding: 8px 12px !important; }
.tr-figs p.text-2xl { font-size: 20px !important; margin-top: 0 !important; }
@media (max-width: 639px) {
  .tr-chart { height: 150px !important; }
  .tr-figs p { font-size: 9.5px !important; letter-spacing: .02em !important; }
  .tr-figs p.text-2xl { font-size: 18px !important; }
  .tr-figs > div { padding: 6px 8px !important; }
}

/* ── Density pass 2 (Nils, 2026-10-28: "still too large on desktop and mobile").
   One layer for every signed-in page: smaller gaps, card padding, headings and
   big numbers. Public pages are untouched (they are not inside the
   logged-in main). Page-specific rules above still win where they are more specific. */
main[data-user-logged-in] .space-y-8 > * + * { margin-top: 1rem !important; }
main[data-user-logged-in] .space-y-6 > * + * { margin-top: .75rem !important; }
main[data-user-logged-in] .space-y-5 > * + * { margin-top: .7rem !important; }
main[data-user-logged-in] .mb-8 { margin-bottom: 1rem !important; }
main[data-user-logged-in] .mb-6 { margin-bottom: .75rem !important; }
main[data-user-logged-in] .gap-6 { gap: .75rem !important; }
main[data-user-logged-in] .gap-4 { gap: .6rem !important; }
main[data-user-logged-in] .py-8 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
main[data-user-logged-in] .py-6 { padding-top: .75rem !important; padding-bottom: .75rem !important; }
main[data-user-logged-in] .glass.p-6, main[data-user-logged-in] .glass-card.p-6 { padding: 1rem !important; }
main[data-user-logged-in] .glass.p-5, main[data-user-logged-in] .glass-card.p-5 { padding: .85rem !important; }
main[data-user-logged-in] .glass.p-4, main[data-user-logged-in] .glass-card.p-4 { padding: .75rem !important; }
main[data-user-logged-in] h1.text-3xl, main[data-user-logged-in] h1.text-4xl, main[data-user-logged-in] h1.text-2xl { font-size: 1.35rem !important; line-height: 1.2 !important; }
main[data-user-logged-in] h2.text-2xl, main[data-user-logged-in] h2.text-xl { font-size: 1.05rem !important; }
main[data-user-logged-in] .glass .text-3xl, main[data-user-logged-in] .glass .text-4xl { font-size: 1.45rem !important; line-height: 1.15 !important; }
main[data-user-logged-in] .glass .text-2xl { font-size: 1.25rem !important; line-height: 1.2 !important; }
main[data-user-logged-in] .rounded-2xl.glass { border-radius: .9rem; }
@media (max-width: 639px) {
  main[data-user-logged-in] .glass.p-6, main[data-user-logged-in] .glass.p-5, main[data-user-logged-in] .glass.p-4 { padding: .65rem !important; }
  main[data-user-logged-in] h1.text-3xl, main[data-user-logged-in] h1.text-4xl, main[data-user-logged-in] h1.text-2xl, main[data-user-logged-in] h1.text-xl { font-size: 1.2rem !important; }
  main[data-user-logged-in] .glass .text-2xl, main[data-user-logged-in] .glass .text-3xl { font-size: 1.1rem !important; }
  main[data-user-logged-in] > div[class*="max-w-"] { padding-left: 12px !important; padding-right: 12px !important; }
}
/* Smaller type everywhere once signed in (Nils, 2026-10-28: "font sizes etc,
   if someone wants larger they can scale the browser"). Tailwind sizes are rem,
   so this one line scales text, spacing and icons of every staff screen together.
   Public pages keep the 16px base. */
html:has(main[data-user-logged-in]) { font-size: 14.5px; }
@media (max-width: 639px) { html:has(main[data-user-logged-in]) { font-size: 14px; } }
/* Sidebar links: shorter rows so the whole menu fits. */
aside nav a { padding-top: .4rem !important; padding-bottom: .4rem !important; }
/* Brighter secondary text in dark mode (Nils, 2026-10-28): with smaller type the
   muted greys were hard to read. Light mode keeps its own darker values. */
html:not(.light) { --text-secondary: #C3D3E6; --text-muted: #8BA2BF; --text-tertiary: #8BA2BF; }
html:not(.light) main[data-user-logged-in] .text-gray-500 { color: #93A6BE !important; }
html:not(.light) main[data-user-logged-in] .text-gray-600 { color: #7F93AD !important; }
html:not(.light) main[data-user-logged-in] .text-gray-400 { color: #B3C2D4 !important; }
html:not(.light) aside .text-gray-400, html:not(.light) aside .text-gray-500 { color: #B3C2D4 !important; }
table.sd-sort th[data-sort] { cursor: pointer; user-select: none; }
table.sd-sort th[data-sort]:hover { color: var(--text-primary) !important; }
table.sd-sort th[data-sort]::after { content: " \2195"; opacity: .35; font-size: .85em; }
table.sd-sort th.sd-sorted[data-dir="desc"]::after { content: " \2193"; opacity: .9; }
table.sd-sort th.sd-sorted[data-dir="asc"]::after { content: " \2191"; opacity: .9; }
/* Maintenance list: cards side by side on a computer instead of one tall full-width column. */
.mt-list > div > div { padding: .65rem .8rem !important; }
.mt-list > * + * { margin-top: 0 !important; }
.mt-list { display: grid; grid-template-columns: 1fr; gap: .5rem; align-items: start; }
@media (min-width: 1024px) { .mt-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1536px) { .mt-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Owner and partner pages share the tracker's title style: same compact size as every staff page. */
.tk-title { font-size: 1.35rem !important; }
.tk-lede { font-size: 13px; }
.ov-grid { display: grid; gap: .75rem; align-items: start; }
@media (min-width: 1100px) { .ov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ov-grid > * { margin: 0 !important; }
/* Bed tracker home cards, compact (Nils, 2026-10-28): four across on wide
   screens, smaller ring, beds in line under the name, less padding. */
.tk-grid { gap: .5rem; }
@media (min-width: 1400px) { .tk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tk-card { border-radius: .85rem; }
.tk-card-top { gap: .6rem; padding: .55rem .7rem .3rem; }
.tk-card-ring { width: 2.3rem; height: 2.3rem; }
.tk-card-ring span { font-size: .62rem; }
.tk-card-title { font-size: .9rem; }
.tk-card-area { font-size: .68rem; }
.tk-card-head { font-size: .76rem; margin-top: .1rem; }
.tk-beds { gap: .2rem; padding: 0 .7rem .55rem 3.6rem; }
.tk-bed { width: .55rem; height: .55rem; border-radius: .15rem; }
/* Dashboard status rings beside revenue: one per row on a computer, title left. */
@media (min-width: 1024px) {
  .dash-status { grid-template-columns: 1fr !important; }
  .dash-status > div { display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; padding: .4rem .75rem !important; }
  .dash-status > div > a { margin: 0 !important; }
}
/* Messages: swipe a row left for Archive / Delete (Brian, 2026-10-28). */
.ib-swipe { overflow: hidden; touch-action: pan-y; }
.ib-sw-front { transition: transform .18s ease; will-change: transform; }
.ib-swiping .ib-sw-front { transition: none; }
.ib-sw-acts { position: absolute; top: 0; right: 0; bottom: 0; display: flex; z-index: 2; border-radius: 0 14px 14px 0; overflow: hidden; }
.ib-sw-btn { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: #fff; padding: 0 6px; }
.ib-sw-archive { background: #3B6EA8; }
.ib-sw-delete { background: #C2413A; }
.ib-sw-restore { background: #2E7D5B; }
.ib-undo { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 90;
  display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 12px; font-size: 13px;
  background: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-hover); box-shadow: 0 12px 30px -10px rgba(0,0,0,.6); }
.ib-undo button { font-weight: 700; color: var(--accent-sky, #7BB8E0); }
@media (min-width: 1024px) { .ib-undo { bottom: 24px; } }
/* The thread's ⋯ menu could run below a short phone screen (Android with the
   browser bars showing), hiding the last items, Delete among them. It now
   scrolls inside the screen. */
.ib-menu { max-height: min(70vh, calc(100dvh - 150px)); overflow-y: auto; overscroll-behavior: contain; }
.cc-people { margin: 0 0 .35rem .6rem; padding-left: .5rem; border-left: 2px solid var(--border-color); }
.ib-tag.ib-tag-short { background: rgba(212,160,23,.16) !important; color: #E3B341 !important; }
/* Studio enquiry: how many people (Brian, 2026-10-28). */
.enq-occ { display: grid; gap: .35rem; border: 0; padding: 0; margin: 0; }
.enq-occ-opt { display: flex; align-items: flex-start; gap: .5rem; padding: .5rem .65rem; border-radius: .75rem; border: 1px solid var(--border-color); font-size: .85rem; color: var(--text-secondary); cursor: pointer; }
.enq-occ-opt:has(input:checked) { border-color: var(--accent-sky, #7BB8E0); background: rgba(123,184,224,.08); color: var(--text-primary); }
.enq-occ-opt input { margin-top: .2rem; accent-color: #7BB8E0; }
.xt-f-legend { font-size: .72rem; font-weight: 600; letter-spacing: .04em; color: var(--text-muted); margin-bottom: .3rem; }
/* Bed tracker board, computers (Nils, 2026-10-28: "Every bed, next 12 months"
   big and on the right): the timeline takes a tall right column; the three lists
   sit side by side on the left with Short gaps below them. */
@media (min-width: 1280px) {
  .cc-grid { grid-template-columns: 1.2fr 1fr 0.95fr 1.85fr !important; grid-auto-flow: row dense; }
  .cc-grid > .cc-tl { grid-column: 4; grid-row: 1 / span 2; max-height: calc(100vh - 250px); min-height: 520px; }
  .cc-grid > .cc-gaps { grid-column: 1 / span 3; grid-row: 2; max-height: calc((100vh - 270px) * 0.45); min-height: 220px; }
  .cc-grid > .cc-card:not(.cc-tl):not(.cc-gaps) { max-height: calc((100vh - 270px) * 0.55); min-height: 260px; }
  .cc-grid.no-gaps > .cc-card:not(.cc-tl):not(.cc-gaps) { grid-row: 1 / span 2; max-height: calc(100vh - 270px); }
}
/* Expand pop-outs win over the board layout above. */
.cc-grid > .cc-card.is-pop { grid-column: auto !important; grid-row: auto !important; max-height: none !important; min-height: 0 !important; }
/* Expand pop-outs: solid, above the sidebar, clear of it on a computer (Nils, 2026-10-28: "expand is broken", "too transparent"). */
.cc-card.is-pop, .cc-bars.is-pop { background: #0F1D36 !important; backdrop-filter: none !important; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7); }
html.light .cc-card.is-pop, html.light .cc-bars.is-pop { background: #FFFFFF !important; }
@media (min-width: 1024px) { .cc-card.is-pop, .cc-bars.is-pop { z-index: 90 !important; inset: 5vh 3vw 5vh calc(260px + 2vw) !important; } .cc-scrim { z-index: 85; background: rgba(4,10,22,.8); } }
/* Bed tracker search dock: fixed at the bottom, above the phone menu. */
.tk-dock { position: fixed; z-index: 55; left: 50%; transform: translateX(-50%); bottom: 14px; display: flex; align-items: center; gap: 8px;
  width: min(940px, calc(100vw - 24px)); padding: 8px 10px; border-radius: 16px; background: #0F1D36; border: 1px solid var(--border-hover, rgba(255,255,255,.18));
  box-shadow: 0 18px 50px -12px rgba(0,0,0,.65); }
html.light .tk-dock { background: #fff; }
@media (min-width: 1024px) { .tk-dock { left: calc(50% + 130px); } }
.tk-dock .tk-input { padding: 8px 10px; font-size: 14px; }
.tk-dock-q { flex: 1 1 220px; min-width: 0; max-width: none !important; }
.tk-dock-sep { width: 1px; align-self: stretch; background: var(--border-color); }
.tk-dock-l { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.tk-dock-go { white-space: nowrap; padding: 9px 16px !important; }
main[data-user-logged-in] .tk-wrap, main[data-user-logged-in] .cc ~ * { }
body:has(.tk-dock) main { padding-bottom: 90px; }
@media (max-width: 1023px) {
  .tk-dock { bottom: calc(72px + env(safe-area-inset-bottom)); flex-wrap: wrap; gap: 6px; }
  .tk-dock-q { flex-basis: 100%; }
  .tk-dock-sep { display: none; }
  .tk-dock-l span { display: none; }
  .tk-dock-l { flex: 1; } .tk-dock-l input { width: 100%; }
  body:has(.tk-dock) main { padding-bottom: 170px; }
}
@media (max-width: 1023px) {
  .tk-dock { padding: 6px; border-radius: 14px; }
  .tk-dock .tk-input { padding: 7px 8px; font-size: 13.5px; }
  .tk-dock-l { flex: 1 1 0; min-width: 0; }
  .tk-dock-m { flex: 0 0 92px; width: 92px; }
  .tk-dock-go { flex: 0 0 auto; padding: 8px 12px !important; font-size: 13.5px; }
  body:has(.tk-dock) main { padding-bottom: 150px; }
}
/* Summer lives in its top tile (tap to open), freeing the board (Nils, 2026-10-28). */
.cc-kpi-btn { cursor: pointer; } .cc-kpi-btn:hover { border-color: var(--border-hover); }
@media (min-width: 1280px) {
  .cc-grid > .cc-summer:not(.is-pop) { display: none; }
  .cc-grid { grid-template-columns: 1.15fr 1fr 1.05fr 1.9fr !important; }
  .cc-grid > .cc-gaps { grid-column: auto !important; grid-row: auto !important; max-height: calc(100vh - 290px) !important; min-height: 320px; }
  .cc-grid > .cc-tl { grid-row: auto !important; max-height: calc(100vh - 290px) !important; }
  .cc-grid > .cc-card:not(.cc-tl):not(.cc-gaps):not(.is-pop) { max-height: calc(100vh - 290px) !important; }
  .cc-gaps .cc-row b { font-size: 13px; }
}
/* Slim side menu (Nils, 2026-10-28): icons only, 72px; the button in the brand bar switches it, remembered per device. */
:root { --sb-w: 260px; }
.sd-mini-btn { display: none; }
@media (min-width: 1024px) {
  .sd-brand { position: relative; }
  .sd-mini-btn { display: flex; position: absolute; right: -13px; top: 20px; width: 26px; height: 26px; border-radius: 50%; align-items: center; justify-content: center;
    background: var(--bg-elevated, #15264A); border: 1px solid var(--border-hover, rgba(255,255,255,.2)); color: var(--text-secondary); z-index: 45; cursor: pointer; }
  .sd-mini-btn:hover { color: var(--text-primary); }
  html.sd-mini { --sb-w: 72px; }
  html.sd-mini .sd-mini-btn svg { transform: rotate(180deg); }
  html.sd-mini #desktop-sidebar { width: 72px !important; }
  html.sd-mini .lg\:ml-\[260px\] { margin-left: 72px !important; width: calc(100% - 72px) !important; }
  html.sd-mini #desktop-sidebar .sd-brand { padding: 0; justify-content: center; }
  html.sd-mini #desktop-sidebar .sd-brand a > span, html.sd-mini #desktop-sidebar nav p,
  html.sd-mini #desktop-sidebar nav h3, html.sd-mini #desktop-sidebar nav .text-\[10px\],
  html.sd-mini #desktop-sidebar > div:last-child .flex-1, html.sd-mini #desktop-sidebar > div:last-child > div:first-child > span,
  html.sd-mini #desktop-sidebar > div:last-child > div:first-child > p { display: none !important; }
  html.sd-mini #desktop-sidebar nav { padding-left: 10px; padding-right: 10px; }
  html.sd-mini #desktop-sidebar nav a, html.sd-mini #desktop-sidebar > div:last-child a { font-size: 0 !important; justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
  html.sd-mini #desktop-sidebar nav a svg, html.sd-mini #desktop-sidebar > div:last-child a svg { width: 20px; height: 20px; flex: none; }
  html.sd-mini #desktop-sidebar nav a span { display: none; }
  html.sd-mini #desktop-sidebar nav a { position: relative; }
  .tk-dock { left: calc(50% + var(--sb-w) / 2) !important; }
  .cc-card.is-pop, .cc-bars.is-pop { inset: 5vh 3vw 5vh calc(var(--sb-w) + 2vw) !important; }
}

/* Short gaps in a compact card: home and dates on one line, buttons beside. */
@media (min-width: 1280px) {
  .cc-gaps:not(.is-pop) h3 em, .cc-gaps:not(.is-pop) .cc-sub { display: none; }
  .cc-gaps:not(.is-pop) .cc-row { flex-wrap: wrap; row-gap: 4px; }
  .cc-gaps:not(.is-pop) .cc-row-t { flex: 1 1 100%; }
  .cc-gaps:not(.is-pop) .cc-price { margin-left: 0; margin-right: auto; }
}
/* The search sits in the header row now, beside the title. */
.tk-dock { position: static !important; transform: none !important; left: auto !important; bottom: auto !important; z-index: auto;
  flex: 1 1 520px; width: auto !important; max-width: 760px; margin: 0 8px; padding: 4px 6px; box-shadow: none; background: var(--bg-card) !important; border-radius: 12px; }
body:has(.tk-dock) main { padding-bottom: 0 !important; }
.tk-head-row { align-items: center; }
@media (max-width: 1023px) { .tk-dock { flex-basis: 100%; margin: 6px 0 0; max-width: none; } body:has(.tk-dock) main { padding-bottom: 0 !important; } }
/* Every top tile opens its list (Nils, 2026-10-28): an obvious "View" chip in the corner. */
.cc-kpi-btn { position: relative; transition: border-color .15s, transform .15s; }
.cc-kpi-btn:hover { transform: translateY(-1px); border-color: var(--accent-sky, #7BB8E0) !important; }
.cc-kpi-btn::after { content: "View \203A"; position: absolute; right: 10px; top: 8px; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  color: #CFE6F7; background: rgba(123,184,224,.16); border: 1px solid rgba(123,184,224,.35); }
.cc-kpi-btn:hover::after { background: rgba(123,184,224,.3); color: #fff; }
html.light .cc-kpi-btn::after { color: #1B6DB5; background: rgba(27,109,181,.08); border-color: rgba(27,109,181,.3); }
@media (max-width: 1023px) { .cc-kpi-btn::after { content: "\203A"; right: 6px; bottom: auto; top: 6px; padding: 0 6px; } }
/* Board fills the screen and the lists match the timeline's height (Nils, 2026-10-28). */
@media (min-width: 1280px) {
  .cc-grid { align-items: stretch !important; }
  .cc-grid > .cc-card:not(.is-pop) { height: calc(100vh - 420px) !important; min-height: 360px !important; max-height: none !important; }
}
.cc-more-btn { display: flex; align-items: center; gap: 8px; margin: 14px auto 6px; padding: 9px 18px; border-radius: 999px; font-size: 13px; font-weight: 600;
  color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-hover, rgba(255,255,255,.2)); }
.cc-more-btn:hover { border-color: var(--accent-sky, #7BB8E0); }
.tk-up { position: fixed; z-index: 70; left: calc(50% + var(--sb-w, 0px) / 2); transform: translateX(-50%); bottom: 22px; padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #fff;
  background: linear-gradient(135deg, #1B3A6B, #2E6FB0); box-shadow: 0 10px 30px -8px rgba(0,0,0,.6); }
.tk-up[hidden] { display: none; }
@media (max-width: 1023px) { .tk-up { left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); } }
@media (max-width: 639px) {
  .cc-kpi-btn::after { content: ""; width: 6px; height: 6px; padding: 0; border: 0; top: 6px; right: 6px; background: var(--accent-sky, #7BB8E0); }
  .tk-dock-m { flex: 0 0 104px !important; width: 104px !important; }
}
/* Staff pages use the width they have (Nils, 2026-10-28: closing the menu only moved the page over):
   the main column fills the space beside the menu, full or slim, up to 1800px. */
@media (min-width: 1024px) {
  main[data-user-logged-in] > .max-w-7xl, main[data-user-logged-in] > .max-w-6xl,
  main[data-user-logged-in] > .max-w-5xl { max-width: 1800px !important; }
}
/* Uniform rows (Nils, 2026-10-28: "keep containers uniform in width and height").
   Dashboard: the revenue card is as tall as the column beside it, its chart fills it. */
@media (min-width: 1024px) {
  .dash-rev { display: flex; flex-direction: column; }
  .dash-rev #revenueChartScroll { flex: 1; display: flex; }
  .dash-rev .dash-chart { flex: 1; height: auto !important; min-height: 200px; }
}
/* Any grid of cards on a staff page: cards in one row share a height. */
main[data-user-logged-in] .grid > .glass, main[data-user-logged-in] .grid > .glass-card { height: auto; }
main[data-user-logged-in] .grid:not([class*="items-"]) { align-items: stretch; }
/* Phones: page header actions (Print, CSV, + New) sit in one row under the title instead of
   full-width bars stacked down the screen. */
@media (max-width: 639px) {
  main[data-user-logged-in] .flex-col.sm\:flex-row:has(> div > h1, > div > h2) { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 6px !important; }
  main[data-user-logged-in] .flex-col.sm\:flex-row:has(> div > h1, > div > h2) > div:first-child { flex: 1 1 100%; }
  main[data-user-logged-in] .flex-col.sm\:flex-row:has(> div > h1, > div > h2) > :not(:first-child) { width: auto !important; }
}
/* Desktop: a row of repeated tiles (stat cards, owner and partner cards) shares one height. */
@media (min-width: 1024px) {
  main[data-user-logged-in] .grid > .glass, main[data-user-logged-in] .grid > div > .glass:only-child { min-height: 100%; }
}
@media (max-width: 639px) {
  main[data-user-logged-in] .flex-col.sm\:flex-row:has(> div > h1, > div > h2) > :not(:first-child) a,
  main[data-user-logged-in] .flex-col.sm\:flex-row:has(> div > h1, > div > h2) > :not(:first-child) button,
  main[data-user-logged-in] .flex-col.sm\:flex-row:has(> div > h1, > div > h2) > a:not(:first-child),
  main[data-user-logged-in] .flex-col.sm\:flex-row:has(> div > h1, > div > h2) > button:not(:first-child) { font-size: 12.5px !important; padding: 6px 10px !important; min-height: 32px; }
}
/* Bed tracker header, slimmer (Nils, 2026-10-28: "the box big and ugly"): no box round the search,
   32px fields, the subtitle dropped on a computer so the header is one line. */
@media (min-width: 1024px) {
  .tk-dock { background: transparent !important; border: 0 !important; padding: 0 !important; gap: 6px; flex: 0 1 640px; }
  .tk-dock .tk-input, .tk-dock-go { height: 32px; padding: 0 10px !important; font-size: 13px; border-radius: 9px; }
  .tk-dock-go { padding: 0 14px !important; }
  .tk-dock-sep { display: none; }
  .tk-dock-l span { font-size: 11.5px; }
  .tk-head .tk-sub { display: none; }
  .tk-head { margin-bottom: 8px !important; }
}
/* Tabs and the jump button share one row. */
.tk-tabs { vertical-align: middle; }
.tk-jump { float: right; margin-top: 4px; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-primary);
  background: var(--bg-card); border: 1px solid var(--border-hover, rgba(255,255,255,.2)); }
.tk-jump:hover { border-color: var(--accent-sky, #7BB8E0); }
.tk-jump { display: none; }
.tk-up .tk-up-back { display: none; }
.tk-up[data-down="1"] .tk-up-back { display: inline; }
.tk-up[data-down="1"] .tk-up-down { display: none; }
/* Rows on the bed tracker board open their home or booking (Nils, 2026-10-28: "never dead to use"). */
.cc-go { display: block; text-align: left; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-decoration: none; }
.cc-go:hover b, .cc-tl-home.cc-go:hover { color: var(--accent-sky, #7BB8E0) !important; }
.cc-go:hover b::after, .cc-tl-home.cc-go:hover::after { content: " \203A"; }
button.cc-tl-home { width: 100%; }
/* Bed tracker on phones and narrow windows (Nils, 2026-10-28): the timeline shows at every width
   (compact here, Expand for full), and every section folds to a one-line bar when its title is tapped. */
.tk-fold-tabs { display: none; }
@media (max-width: 1279px) {
  .cc-tl:not(.is-pop) { display: block !important; max-height: 380px !important; overflow-y: auto !important; }
  .cc-tl:not(.is-pop) .cc-tl-row { grid-template-columns: 82px 1fr; height: 15px; margin: 2px 0; }
  .cc-tl:not(.is-pop) .cc-tl-name { font-size: 11px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cc-tl:not(.is-pop) .cc-tl-axis { margin-left: 90px; font-size: 10px; }
  .cc-fold-h { cursor: pointer; user-select: none; }
  .cc-fold-h > span:first-child, .cc-chart-h > .cc-fold-h { display: inline-flex; align-items: center; gap: 6px; }
  .cc-count { display: inline-block; font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
    background: rgba(123,184,224,.16); color: #CFE6F7; }
  .cc-chev { display: inline-block; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: rotate(45deg); margin: -3px 2px 0 4px; opacity: .7; transition: transform .2s; }
  .is-fold .cc-chev { transform: rotate(-45deg); margin-top: 0; }
  .tk-fold-tabs { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 12px 14px; margin: 4px 0 8px; border-radius: 14px;
    font-size: 14px; font-weight: 700; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-color); }
  .fold-tabs .tk-fold-tabs .cc-chev { transform: rotate(-45deg); }
  .tk-root.fold-tabs #tk-tabs, .tk-root.fold-tabs #tk-tabs ~ * { display: none !important; }
  .tk-root.fold-tabs .tk-up { display: none !important; }
  .tk-up { font-size: 12px; padding: 8px 14px; white-space: nowrap; }
}
/* Folded sections, any width: only the title bar shows. */
.cc-fold-h { cursor: pointer; }
.cc-fold-h > span:first-child, .cc-chart-h > .cc-fold-h { display: inline-flex; align-items: center; gap: 6px; }
.cc-chev, .cc-count { display: inline-block !important; }
.cc-count { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(123,184,224,.16); color: #CFE6F7; }
.cc-chev { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -3px 2px 0 4px; opacity: .7; }
.is-fold .cc-chev { transform: rotate(-45deg); margin-top: 0; }
.cc-card.is-fold:not(.is-pop) > *:not(:first-child) { display: none !important; }
.cc-grid > .cc-card.is-fold:not(.is-pop) { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; padding-top: 10px; padding-bottom: 10px; align-self: start; }
.cc-card.is-fold:not(.is-pop) h3 { margin: 0; }
.cc-chart.is-fold .cc-bars:not(.is-pop) { display: none; }
html.light .cc-count { background: rgba(27,109,181,.1); color: #1B6DB5; }
/* The Minimal / Compact / Full switch: small and quiet. */
.tk-views { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--bg-elevated, rgba(255,255,255,.05)); border: 1px solid var(--border-color); }
.tk-views button { height: 20px; padding: 0 8px; font-size: 11px; font-weight: 600; border-radius: 6px; color: var(--text-muted); }
.tk-views button.is-on { background: var(--accent-sky, #7BB8E0); color: #0C1830; }

.cc-card.is-fold h3 em { display: none; }
@media (max-width: 1279px) { .cc-card h3 em { display: none; } }
/* The jump lands with the tabs flush at the top (under the phone top bar). */
#tk-tabs { scroll-margin-top: 8px; }
@media (max-width: 1023px) { #tk-tabs { scroll-margin-top: calc(8px + env(safe-area-inset-top)); } }

/* Bed tracker pop-outs, redone (Nils, 2026-10-28: "the small versions are more usable"):
   one panel, same size and place for every list so Close never moves; the same rows as the
   small card, one column, a little roomier; above everything, solid, scrolling inside. */
.cc-scrim { z-index: 999 !important; background: rgba(4,10,22,.82) !important; }
.cc-card.is-pop, .cc-bars.is-pop { z-index: 1000 !important; }
.cc-card.is-pop:not(.cc-tl) { position: fixed; inset: auto !important; top: 9vh !important; left: calc(50% + var(--sb-w, 0px) / 2) !important; transform: translateX(-50%);
  width: min(900px, 94vw); height: 82vh !important; max-height: 82vh !important; overflow-y: auto; padding: 0 20px 16px !important; animation: none;
  background: #0F1D36 !important; border-radius: 18px; columns: auto; }
html.light .cc-card.is-pop:not(.cc-tl) { background: #fff !important; }
.cc-card.is-pop > h3 { position: sticky; top: 0; z-index: 2; margin: 0 -20px 6px; padding: 16px 20px 12px; background: inherit;
  border-bottom: 1px solid var(--border-color); align-items: center; font-size: 17px; }
.cc-card.is-pop h3 em { display: inline !important; }
.cc-card.is-pop .cc-count { font-size: 12px; }
.cc-card.is-pop .cc-row { display: flex !important; flex-wrap: nowrap !important; align-items: center; min-height: 56px; gap: 10px; }
.cc-card.is-pop .cc-row-t b { font-size: 15px !important; }
.cc-card.is-pop .cc-row-t small { font-size: 13px !important; white-space: normal; }
.cc-card.is-pop .cc-row-t { flex: 1 1 auto !important; }
.cc-card.is-pop .cc-price { margin: 0 !important; }
.cc-card.is-pop .cc-row .cc-btn { padding: 8px 14px; }
.cc-popq { height: 30px; width: 180px; padding: 0 10px; border-radius: 8px; font-size: 13px; font-weight: 500; margin-left: auto;
  background: var(--input-bg, rgba(255,255,255,.06)); border: 1px solid var(--input-border, rgba(255,255,255,.15)); color: var(--text-primary); }
.cc-card.is-pop > h3 .cc-x { margin-left: 8px; }
@media (max-width: 1023px) {
  .cc-card.is-pop:not(.cc-tl) { top: 0 !important; left: 0 !important; transform: none; width: 100vw; height: 100dvh !important; max-height: 100dvh !important;
    border-radius: 0; padding-top: env(safe-area-inset-top) !important; bottom: auto !important; }
  .cc-popq { width: 120px; }
  .cc-card.is-pop h3 em { display: none !important; }
}
.tk-root.has-pop .tk-up { display: none !important; }
/* Room below the tabs so the jump can land them flush at the top. */
.tk-root::after { content: ""; display: block; height: 60vh; }
/* An opacity animation on .cc made it a stacking context, trapping pop-outs under the Homes grid,
   the top bar and the phone menu. No animation on the board itself. */
.cc { animation: none !important; }
.cc-card.is-pop .cc-chev { display: none !important; }
@media (max-width: 1023px) {
  .cc-card.is-pop > h3 { font-size: 15px; gap: 6px; }
  .cc-card.is-pop .cc-popq { flex: 1 1 60px; width: auto; min-width: 0; }
  .cc-card.is-pop > h3 .cc-x { flex: none; margin-left: 4px; }
}
/* Dashboard arrivals and departures open the booking. */
a.dash-mv { border-radius: 8px; padding: 3px 6px; margin: 0 -6px; text-decoration: none; color: inherit; }
a.dash-mv:hover { background: rgba(123,184,224,.08); }
/* Bed tracker header, final (Nils, 2026-10-28: "looks worse and the text on the right sloppy"):
   title and date left, the search as one joined control, owner link above the live line on the right. */
.tk-head { margin-bottom: 14px !important; }
.tk-head .tk-sub { display: none !important; }
.tk-head-row { display: flex !important; align-items: center !important; gap: 14px !important; flex-wrap: nowrap !important; }
.tk-head-l { display: flex; align-items: center; gap: 10px; flex: none; }
.tk-head-l .tk-title { margin: 0; }
.tk-dock { display: flex !important; align-items: stretch !important; gap: 0 !important; height: 34px; padding: 0 !important; margin: 0 !important;
  flex: 1 1 auto !important; max-width: 620px !important; border: 1px solid var(--border-color) !important; border-radius: 10px !important;
  background: var(--bg-card) !important; overflow: hidden; box-shadow: none !important; }
.tk-dock .tk-input, .tk-dock .tk-dock-l input { height: 32px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important;
  padding: 0 10px !important; font-size: 13px !important; box-shadow: none !important; }
.tk-dock .tk-dock-q { flex: 1 1 200px !important; min-width: 0; }
.tk-dock .tk-dock-l { display: flex !important; align-items: center; gap: 0; border-left: 1px solid var(--border-color); flex: 0 0 auto !important; }
.tk-dock .tk-dock-l span { display: inline !important; padding-left: 10px; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.tk-dock .tk-dock-l input { width: 132px; }
.tk-dock .tk-dock-m { flex: 0 0 auto !important; width: 108px !important; border-left: 1px solid var(--border-color) !important; }
.tk-dock .tk-dock-sep { display: none !important; }
.tk-dock .tk-dock-go { height: 32px !important; border-radius: 0 !important; padding: 0 16px !important; font-size: 13px !important; flex: none; margin: 0 !important; }
.tk-head-r { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.tk-head-r .tk-head-link { margin: 0 !important; font-size: 12.5px; line-height: 1.2; }
.tk-live { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.2; color: var(--text-muted); }
.cc-live { display: none !important; }
@media (max-width: 1023px) {
  .tk-head-row { flex-wrap: wrap !important; gap: 8px !important; }
  .tk-head-l { width: 100%; flex-wrap: wrap; row-gap: 6px; }
  .tk-dock { flex: 1 1 100% !important; max-width: none !important; height: auto; flex-wrap: wrap !important; }
  .tk-dock .tk-dock-q { flex: 1 1 100% !important; border-bottom: 1px solid var(--border-color) !important; }
  .tk-dock .tk-dock-l { flex: 1 1 0 !important; border-left: 0; }
  .tk-dock .tk-dock-l span { display: none !important; }
  .tk-dock .tk-dock-l input { width: 100%; }
  .tk-head-r { width: 100%; flex-direction: row-reverse; justify-content: space-between; margin: 0; }
}
.tk-dock { min-width: 0; }
.tk-dock .tk-dock-q { flex: 1 1 140px !important; min-width: 100px !important; }
@media (max-width: 1439px) and (min-width: 1024px) {
  .tk-head-l .tk-eyebrow { display: none; }
  .tk-dock .tk-dock-l span { display: none !important; }
  .tk-dock .tk-dock-l input { width: 124px; }
  .tk-dock .tk-dock-m { width: 96px !important; }
}
@media (max-width: 1023px) {
  .tk-dock .tk-dock-l { flex: 1 1 130px !important; }
  .tk-dock .tk-dock-m { width: 104px !important; }
}
@media (max-width: 1023px) { .tk-dock .tk-dock-q { flex: 1 1 100% !important; } }
/* Agent-split lists open in the standard pop-out panel. */
.cc-via:not(.is-pop) { display: none !important; }
.tk-chip-go { opacity: .6; margin-left: 2px; }
/* One look for every Back link: top-left, small, same size everywhere. */
main a.sd-back { display: inline-flex !important; align-items: center; gap: 6px; font-size: 13px !important; font-weight: 500;
  color: var(--text-secondary) !important; padding: 4px 10px 4px 6px; border-radius: 8px; margin: 0 0 10px !important; float: none !important; }
main a.sd-back:hover { color: var(--text-primary) !important; background: rgba(255,255,255,.05); }
main a.sd-back svg { width: 16px; height: 16px; }
/* Tenancy Sheet and the Bricks import/export live under Admin console and Ctrl+K only (Nils, 2026-10-28). */
#desktop-sidebar a[href="/bookings/sheet"], #desktop-sidebar a[href^="/admin/import"],
nav a[href="/bookings/sheet"], nav a[href^="/admin/import"], nav a[href="/admin/export/bricks"],
a.qa[href="/bookings/sheet"], a.qa[href^="/admin/import"], a.qa[href="/admin/export/bricks"],
a.sd-nav-hide { display: none !important; }
/* Booking page (Nils, 2026-10-28): small photo, Transfer a normal small action below the facts,
   Delete in a danger zone at the bottom of the side column, header actions one neat row. */
.bd-photo img { max-height: 120px !important; height: 120px !important; }
@media (min-width: 640px) { .bd-photo { width: 140px !important; } .bd-photo img { height: 100% !important; max-height: 150px !important; } }
.bd-side { display: flex; flex-direction: column; }
.bd-side > * + * { margin-top: 12px !important; }
.bd-side > .bd-transfer { order: 50; padding: 10px !important; }
.bd-side > .bd-transfer button { width: auto !important; padding: 6px 14px !important; font-size: 13px; }
.bd-side > .bd-danger { order: 99; padding: 10px 12px !important; }
.bd-danger-h { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #f87171; margin: 0 0 6px; }
.bd-side > .bd-danger > button { width: auto !important; padding: 6px 14px !important; font-size: 13px; }
.bd-actions > a, .bd-actions > button, .bd-actions > form > button { height: 30px; padding: 0 11px !important; font-size: 12px !important; font-weight: 600 !important;
  border: 1px solid var(--border-hover, rgba(255,255,255,.18)) !important; color: var(--text-secondary) !important; background: transparent !important; border-radius: 9px !important; }
.bd-actions > a:hover, .bd-actions > button:hover, .bd-actions > form > button:hover { color: var(--text-primary) !important; border-color: var(--accent-sky, #7BB8E0) !important; }
/* The shared Close (top-right of every pop-up), same size and style everywhere. */
.sd-x { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1; color: var(--text-secondary); background: var(--bg-elevated, rgba(255,255,255,.06)); border: 1px solid var(--border-color); z-index: 5; }
.sd-x:hover { color: var(--text-primary); border-color: var(--border-hover, rgba(255,255,255,.25)); }
/* Long staff forms use the width (Nils, 2026-10-28): the home edit form and Emails and
   reminders flow their cards into two columns on a computer instead of one narrow strip. */
@media (min-width: 1280px) {
  main[data-user-logged-in] .pf-wide, main[data-user-logged-in] .rs-wide { max-width: 1400px !important; }
  .pf-wide #property-form { columns: 2 560px; column-gap: 24px; }
  .pf-wide #property-form > * { break-inside: avoid; margin: 0 0 24px !important; }
  .rs-wide { columns: 2 560px; column-gap: 24px; }
  .rs-wide > * { break-inside: avoid; margin: 0 0 24px !important; display: block; }
  .rs-wide > a:first-child, .rs-wide > :nth-child(2) { column-span: all; }
}
/* Staff view of a home's page: tools in one row of small buttons. */
.pd-staffbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -8px 0 14px; }
.pd-staffbar-l { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-right: 4px; }
.pd-staffbar a { font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 9px; border: 1px solid var(--border-hover, rgba(255,255,255,.2)); color: var(--text-primary); background: var(--bg-card); }
.pd-staffbar a:hover { border-color: var(--accent-sky, #7BB8E0); }

/* Explore tabs: the homes fade up as the page glides to them (2026-10-28). */
@keyframes xtArrive { from { opacity: .35; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.xt-arrive { animation: xtArrive .45s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .xt-arrive { animation: none; } }

/* Files attached to a reply or new email (2026-10-29). */
.ib-out-files { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.ib-out-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 6px 4px 10px; border-radius: 999px;
  background: var(--glass-bg, rgba(255,255,255,.06)); border: 1px solid rgba(123,184,224,.35); font-size: 12px; }
.ib-out-file > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.ib-out-file small { opacity: .6; }
.ib-out-file button { width: 20px; height: 20px; border-radius: 999px; line-height: 1; font-size: 15px; opacity: .75; }
.ib-out-file button:hover { opacity: 1; background: rgba(255,255,255,.08); }
.ib-agree { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 10px; border-radius: 12px;
  border: 1px solid rgba(34,197,94,.35); background: rgba(34,197,94,.08); font-size: 12px; }
.ib-agree > span { flex: 1 1 200px; }
.ib-stage { flex: none; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  color: #c4b5fd; background: rgba(139,92,246,.16); border: 1px solid rgba(139,92,246,.35); }
html.light .ib-stage { color: #6d28d9; }