/* Imagination — Proxima design system, as applied in the Atlas Proxima mockup
   (AtlasDocumentIntelligence/dev-docs/ATLAS_PROXIMA_MOCKUP.html) and the style guide
   (VBI/STYLE_GUIDE.md). Use the tokens; never raw hex except status colours. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── Proxima design tokens ─── */
:root {
    --draft:      #7c3aed;
    --draft-soft: rgba(124, 58, 237, 0.10);
    --bg-primary:    #f8f9fc;
    --bg-primary-rgb: 248, 249, 252;
    --bg-secondary:  #ffffff;
    --bg-tertiary:   #f0f1f5;
    --bg-elevated:   #ffffff;
    --bg-glass:       rgba(0, 0, 0, 0.02);
    --bg-glass-hover: rgba(0, 0, 0, 0.04);

    --text-primary:   #1a1a2e;
    --text-secondary: #6b7084;
    --text-muted:     #9ca3b4;

    --accent:          #2fb383;
    --accent-glow:     rgba(47, 179, 131, 0.15);
    --accent-soft:     rgba(47, 179, 131, 0.08);
    --accent-gradient: linear-gradient(135deg, #2fb383, #34d399);
    --accent-wash:     radial-gradient(120% 100% at 0% 0%, rgba(47, 179, 131, 0.10) 0%, rgba(47, 179, 131, 0.00) 60%);

    --border:        rgba(0, 0, 0, 0.08);
    --border-subtle: rgba(0, 0, 0, 0.04);

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

    --shadow-sm:   0 1px 2px  rgba(0, 0, 0, 0.05);
    --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.06);
    --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.08);
    --shadow-glow: 0 0 30px var(--accent-glow);

    --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);

    --scrollbar-thumb:       rgba(0, 0, 0, 0.18);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.32);

    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

    /* Camera points in the plan: a second hue, so they never read as building (accent) or openings. */
    --camera:        #8b5cf6;
    --camera-strong: #7c3aed;
    --camera-soft:   rgba(139, 92, 246, 0.10);
    --camera-wash:   rgba(139, 92, 246, 0.18);
    --camera-line:   rgba(139, 92, 246, 0.45);

    /* Land cover on a landscape site, as the 3D scene tints it: data colours, kept together here. */
    --cover-woodland: #5f7a52;
    --cover-orchard:  #7f9a64;
    --cover-meadow:   #a9b77f;
    --cover-lawn:     #8fba72;
    --cover-field:    #c9b98a;
    --cover-garden:   #93ad7a;
    --cover-heath:    #b3a584;
    --cover-water:    #86aac2;
    --cover-wetland:  #8ea894;
    --cover-sand:     #e2d6b3;
    --cover-rock:     #a9a7a2;
    --cover-paved:    #c7c7c3;
    --cover-building: #bdb6ad;
    --cover-relief:   #ffffff;
    --cover-path:     #dccfae;
    --cover-road:     #8a8a87;
    --cover-wall:     #a39d93;
    --cover-fence:    #b3ada2;

    /* The lightbox is dark in both themes: a photograph is judged best against black. */
    --lightbox-bg:    rgba(10, 12, 16, 0.94);
    --lightbox-text:  #e6edf3;
    --lightbox-muted: rgba(230, 237, 243, 0.65);
    --lightbox-glass: rgba(255, 255, 255, 0.08);
    --lightbox-line:  rgba(255, 255, 255, 0.14);

    /* ─── App background: the brand teal, lit from within ───
       A deep teal with a few large, soft glows in the brand's mint and emerald (a "mesh"
       gradient: radial glows over the base gradient), and a very fine grain on top so the large
       flat areas do not band. No repeated motif: the wand lives in the logo only
       (BrandMark.razor, favicon.svg, images/logo-blanc.svg).

       Content is never written on the teal. It sits on a light sheet (.main), so no screen
       has to recolour its text. The app bar and the sidebar are the only things on the teal,
       and they rewrite the ink tokens for their subtree (see .appbar, .sidebar).

       The base starts DARKER than the logo's teal (#2fb383 → #0d9488): on the same teal the logo
       would vanish and white text would lack contrast. The glows stay low (≤ 30 %) for the same
       reason, and sit away from the top-left corner, where the logo and the menu are. */
    --fond-haut:    #04302a;
    --fond-bas:     #0a5f52;
    --fond-degrade:
        radial-gradient(60vmax 50vmax at 85% 10%, rgba(94, 234, 212, 0.26), transparent 70%),
        radial-gradient(55vmax 45vmax at 10% 95%, rgba(47, 179, 131, 0.30), transparent 70%),
        radial-gradient(45vmax 40vmax at 55% 55%, rgba(13, 148, 136, 0.22), transparent 70%),
        linear-gradient(160deg, var(--fond-haut) 0%, var(--fond-bas) 100%);
    /* Thin lines: a bundle sweeping up from the bottom left across the window,
       1 px white at 5-14 % (images/swirl.svg, drawn by hand-tuned curves; it covers the window). */
    --fond-lignes:  url("images/swirl.svg");
    /* Grain: fractal noise at 5 %, a 160 px tile that never reads as a pattern. */
    --fond-motif:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");

    /* Ink for what is written straight on the teal (app bar, sidebar). */
    --fond-encre:   #ffffff;
    --fond-encre-2: rgba(255, 255, 255, 0.78);
    --fond-encre-3: rgba(255, 255, 255, 0.60);
}
[data-theme="dark"] {
    --draft:      #a78bfa;
    --draft-soft: rgba(167, 139, 250, 0.16);
    --bg-primary:    #0f1419;
    --bg-primary-rgb: 15, 20, 25;
    --bg-secondary:  #161b22;
    --bg-tertiary:   #1e242c;
    --bg-elevated:   #1a2028;
    --bg-glass:       rgba(255, 255, 255, 0.03);
    --bg-glass-hover: rgba(255, 255, 255, 0.06);

    --text-primary:   #e6edf3;
    --text-secondary: #9aa4b1;
    --text-muted:     #6b7280;

    --accent-glow: rgba(47, 179, 131, 0.28);
    --accent-soft: rgba(47, 179, 131, 0.14);

    --border:        rgba(255, 255, 255, 0.08);
    --border-subtle: rgba(255, 255, 255, 0.04);

    --shadow-sm: 0 1px 2px  rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.55);

    --scrollbar-thumb:       rgba(255, 255, 255, 0.18);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.32);

    color-scheme: dark;
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
    height: 100%;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.2s ease, color 0.2s ease;
}
/* The brand background goes on `body` ONLY: while <html> has none, body's propagates to the
   canvas and covers the whole window. The grain and the lines are listed first so they paint
   ABOVE the glows;
   `fixed` pins both to the window, so nothing moves behind the sheet as pages scroll. */
body {
    background-color: var(--fond-haut);
    /* Grain, then the lines, then the glows and the base (four layers in --fond-degrade). */
    background-image: var(--fond-motif), var(--fond-lignes), var(--fond-degrade);
    background-size: auto, cover;
    background-repeat: repeat, no-repeat;
    background-position: 0 0, center;
    background-attachment: fixed;
}
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 8px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1:focus, h1:focus-visible { outline: none; }
button { font-family: inherit; }
code, .mono { font-family: var(--font-mono); font-size: 12.5px; }

/* ─── App shell ─── */
.app-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    min-height: 0;
}

/* ─── App bar ─── */
.appbar {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 56px;
    padding: 0 20px;
    /* On the teal, not on a white bar. Its ink is rewritten as TOKENS for the whole subtree,
       rather than recolouring the title, the user button and the icons one by one. */
    background: none;
    /* No rule under the bar: the sheet below it is edge enough. */
    flex-shrink: 0;
    z-index: 50;

    --text-primary:   var(--fond-encre);
    --text-secondary: var(--fond-encre-2);
    --text-muted:     var(--fond-encre-3);
    --accent:         var(--fond-encre);
    --accent-soft:    rgba(255, 255, 255, 0.18);
    --border:         rgba(255, 255, 255, 0.26);
    --bg-glass-hover: rgba(255, 255, 255, 0.14);
}
/* The logo's teal badge would melt into the teal bar: a faint white ring sets it apart. */
.appbar .app-icon { border-radius: 8px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); }
/* "Sign out" is a white button elsewhere; on the teal it turns to glass so its white ink reads. */
.appbar .btn-secondary { background: rgba(255, 255, 255, 0.10); }
.appbar .btn-secondary:hover { background: rgba(255, 255, 255, 0.18); }
.appbar-leading, .appbar-trailing { display: flex; align-items: center; gap: 12px; }
.appbar-leading { color: inherit; }
.appbar-leading:hover { text-decoration: none; }
.appbar-center { flex: 1; display: flex; justify-content: center; }
.appbar-title  { font-weight: 600; font-size: 17px; letter-spacing: -0.015em; color: var(--text-primary); }
.app-icon { display: inline-block; flex-shrink: 0; }
.app-icon-sm { width: 28px; height: 28px; }
.app-icon-md { width: 36px; height: 36px; }
.app-icon-lg { width: 64px; height: 64px; }

@keyframes status-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Icon buttons */
.btn-icon {
    width: 36px; height: 36px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    flex-shrink: 0;
}
.btn-icon:hover { color: var(--accent); background: var(--accent-soft); }
.btn-icon.danger:hover { color: #ef4444; background: rgba(239, 68, 68, 0.10); }

/* ─── Body layout ─── */
.app-body {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
}

/* ─── Sidebar ─── */
.sidebar {
    width: 240px;
    flex-shrink: 0;
    /* On the teal, like the app bar, with the same rewritten ink. */
    background: none;

    --text-primary:   var(--fond-encre);
    --text-secondary: var(--fond-encre-2);
    --text-muted:     var(--fond-encre-3);
    --accent:         var(--fond-encre);
    --accent-soft:    rgba(255, 255, 255, 0.16);
    --bg-glass-hover: rgba(255, 255, 255, 0.10);
    --bg-tertiary:    rgba(255, 255, 255, 0.12);
    overflow-y: auto;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
}
.sidebar nav { flex: 1; }
.sidebar-section { margin-bottom: 22px; }
.sidebar-section-label {
    font-weight: 500;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 12px 8px;
}
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 13.5px;
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    position: relative;
    min-width: 0;
}
.nav-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover {
    color: var(--text-primary);
    background: var(--bg-glass-hover);
    text-decoration: none;
}
.nav-item.active {
    color: var(--accent);
    background: var(--accent-soft);
}
.nav-item svg { color: var(--text-muted); flex-shrink: 0; transition: color 0.12s ease; }
.nav-item:hover svg { color: var(--text-primary); }
.nav-item.active svg { color: var(--accent); }
.nav-item-count {
    margin-left: auto;
    font: 600 11px 'Inter', system-ui, sans-serif;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    padding: 1px 7px;
    border-radius: var(--radius-full);
    font-variant-numeric: tabular-nums;
}
.nav-item.active .nav-item-count {
    color: var(--accent);
    background: rgba(255, 255, 255, 0.20);
}

/* ─── Main content ─── */
.main {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 28px 32px 40px;
    /* THE SHEET. Every screen sits on it, which is what lets the background be teal without a
       single text colour changing. The margins are what make it float; full-canvas screens
       (picker, workspace) fill it and are clipped to its corners. */
    margin: 0 16px 16px 0;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.24);
    background-color: var(--bg-primary);
    background-image: var(--accent-wash);
    background-repeat: no-repeat;
    background-size: 600px 400px;
}

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}
.page-head-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
/* A head that stays put over a body with its own scrollbar (Projects): the page fills the sheet,
   as the full-canvas screens do, so the sheet itself never scrolls. */
.page-split { position: absolute; inset: 0; display: flex; flex-direction: column; }
.page-split > .page-head { flex-shrink: 0; margin: 0; padding: 28px 32px 18px; }
.page-split-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 32px 24px; }
/* Under the scrolling body: the view buttons, on the right. */
.page-split-foot { flex-shrink: 0; display: flex; justify-content: flex-end; align-items: center; gap: 8px; padding: 10px 32px 14px; border-top: 1px solid var(--border); }
.segmented-option.icon-only { padding: 5px 9px; line-height: 0; }
/* Projects: the kind filter and the search beside "New project"; a count beside a label (also Assumptions). */
.segmented-count { margin-left: 4px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.projects-search { min-width: 220px; }
@media (max-width: 900px) { .page-split > .page-head { flex-wrap: wrap; } .projects-search { min-width: 0; flex: 1; } }
.page-title { font-weight: 600; font-size: 26px; line-height: 1.3; letter-spacing: -0.02em; color: var(--text-primary); }
.page-sub   { font-size: 13.5px; color: var(--text-secondary); margin-top: 2px; }

/* ─── Breadcrumbs ─── */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.breadcrumbs a { color: var(--text-secondary); }
.breadcrumbs a:hover { color: var(--accent); text-decoration: none; }

/* ─── Buttons ─── */
/* The kit's screens use .btn-primary / .btn-secondary / .btn-danger alone; Imagination's add .btn. */
.btn, .btn-primary, .btn-secondary, .btn-danger {
    padding: 8px 14px;
    border-radius: var(--radius-sm);
    font: 500 13px/1 'Inter', system-ui, sans-serif;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    white-space: nowrap;
    text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary {
    background: var(--accent-gradient);
    color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px var(--accent-glow), 0 2px 4px rgba(0, 0, 0, 0.06);
}
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.btn-secondary:hover { border-color: var(--text-secondary); color: var(--text-primary); }
.btn-danger {
    background: #ef4444;
    color: #fff;
}
.btn-danger:hover { box-shadow: 0 6px 14px rgba(239, 68, 68, 0.25); transform: translateY(-1px); }
.btn-sm { padding: 6px 10px; font-size: 12.5px; }

.btn:disabled,
.btn-icon:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
    transform: none;
}
.btn-primary:disabled {
    background: var(--bg-tertiary);
    color: var(--text-muted);
    box-shadow: none;
    opacity: 1;
}
.btn-secondary:disabled {
    color: var(--text-muted);
    border-color: var(--border-subtle);
    background: var(--bg-glass);
}
.btn .spinner {
    width: 14px;
    height: 14px;
    border-color: rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-width: 2px;
}
.btn-secondary .spinner { border-color: var(--accent-soft); border-top-color: var(--accent); }

/* ─── Cards ─── */
.panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
}
.panel + .panel { margin-top: 14px; }
.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.panel-title { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.panel-sub   { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
}
/* Side by side, cards line up top and bottom: the stacking gap between panels is the grid's here. */
.grid-2 > .panel + .panel { margin-top: 0; }
@media (max-width: 1100px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } }

/* Project cards */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}
.project-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.project-card:hover {
    text-decoration: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.project-thumb {
    aspect-ratio: 16 / 10;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    overflow: hidden;
}
.project-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project-thumb.plan img { object-fit: contain; background: #fff; padding: 8px; }
/* Small tiles: more to a row, a tighter caption. */
.project-grid.small { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.project-grid.small .project-body { padding: 10px 12px; gap: 4px; }
.project-grid.small .project-name { font-size: 13px; }
.project-grid.small .project-meta { font-size: 11.5px; }
/* List: one table in one panel. Columns: the project (picture, name, kind), created, status,
   renders, and an arrow that shows on hover. */
.project-table {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    /* Not clipped: a row's menu may reach past the table's bottom. The corners are the head's and last row's. */
}
.project-table-head, .project-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 170px 130px 170px 28px;
    align-items: center;
    gap: 16px;
    padding: 0 16px;
}
.project-table-head {
    height: 38px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
}
.project-row {
    min-height: 60px;
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: background 0.12s ease;
}
.project-row:last-child { border-bottom: none; }
.project-row:hover { background: var(--accent-soft); text-decoration: none; }
.project-row-main { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 0; }
.project-row-main .project-thumb { width: 64px; flex-shrink: 0; border-radius: 6px; overflow: hidden; }
.project-row-main .project-thumb.plan img { padding: 2px; }
.project-row-main .project-thumb svg { width: 18px; height: 18px; }
.project-row-name { display: flex; flex-direction: column; min-width: 0; }
.project-row-name .project-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-row-kind { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-muted); }
.project-row-cell { font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-row-wrap { position: relative; }
.project-row-wrap:last-child > .project-row { border-bottom: none; }
.project-row-wrap:last-child > .project-row { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.project-table-head { border-radius: var(--radius-md) var(--radius-md) 0 0; }

/* ─── Project menu ───
   A round button in the corner of every tile and list row (shown on hover, always on touch) and
   its small menu: Rename, Clone, Delete. The button is the card link's sibling, not inside it. */
.project-tile { position: relative; display: flex; min-width: 0; }
.project-tile > .project-card { flex: 1; min-width: 0; }
.project-tile:hover > .project-card {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}
.project-menu { position: absolute; top: 10px; right: 10px; z-index: 2; }
.project-menu.open { z-index: 60; }
.project-row-wrap .project-menu { top: 50%; right: 12px; margin-top: -15px; }
.project-menu-button {
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.project-tile:hover .project-menu-button,
.project-row-wrap:hover .project-menu-button,
.project-menu.open .project-menu-button,
.project-menu-button:focus-visible { opacity: 1; }
.project-menu-button:hover, .project-menu.open .project-menu-button { color: var(--accent); border-color: var(--accent); }
@media (hover: none) { .project-menu-button { opacity: 1; } }
.card-menu-scrim { position: fixed; inset: 0; z-index: 0; }
.card-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1;
    min-width: 168px;
    padding: 5px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    animation: account-pop 0.14s ease-out;
}
.card-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font: 500 13px 'Inter', system-ui, sans-serif;
    text-align: left;
    cursor: pointer;
}
.card-menu-item svg { color: var(--text-muted); flex-shrink: 0; }
.card-menu-item:hover:not(:disabled), .card-menu-item:focus-visible { background: var(--accent-soft); color: var(--accent); outline: none; }
.card-menu-item:hover:not(:disabled) svg { color: var(--accent); }
.card-menu-item:disabled { opacity: 0.45; cursor: default; }
.card-menu-item.danger:hover, .card-menu-item.danger:focus-visible { background: rgba(239, 68, 68, 0.10); color: #ef4444; }
.card-menu-item.danger:hover svg { color: #ef4444; }
.card-menu-sep { height: 1px; margin: 4px 6px; background: var(--border); }
@media (max-width: 900px) {
    .project-table-head { display: none; }
    .project-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; padding: 8px 14px; }
    .project-row-main { grid-column: 1 / -1; padding: 0; }
    .project-row-cell:nth-child(2), .project-row-go { display: none; }
}
.project-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.project-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.project-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Stat tiles */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}
@media (max-width: 1200px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 18px;
}
.stat-value {
    font-weight: 600;
    font-size: 22px;
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
}
.stat-label { font-size: 12.5px; color: var(--text-secondary); margin-top: 2px; }

/* ─── Segmented control (used as tabs) ─── */
.segmented {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.segmented-option {
    padding: 5px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font: 500 12.5px 'Inter', system-ui, sans-serif;
    cursor: pointer;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.segmented-option:hover:not(.selected):not(:disabled) { color: var(--text-primary); background: var(--bg-glass-hover); }
.segmented-option.selected {
    background: var(--bg-elevated);
    color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.segmented-option:disabled { opacity: 0.45; cursor: not-allowed; }

/* ─── Wizard / stepper ─── */
.wizard {
    list-style: none;
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin-bottom: 22px;
}
.wizard-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    color: var(--text-muted);
    font: 500 12.5px 'Inter', system-ui, sans-serif;
    text-align: center;
}
.wizard-step + .wizard-step::before {
    content: "";
    position: absolute;
    top: 13px;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--border);
    z-index: 0;
}
.wizard-step.done + .wizard-step::before,
.wizard-step.active::before { background: var(--accent); }
.wizard-marker {
    position: relative;
    z-index: 1;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border: 2px solid var(--border);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 12px;
    transition: var(--transition);
}
.wizard-step.done   .wizard-marker { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.wizard-step.active .wizard-marker {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}
.wizard-step.done   { color: var(--text-secondary); }
.wizard-step.active { color: var(--accent); font-weight: 600; }

/* ─── Inputs ─── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field + .field { margin-top: 14px; }
.field-label { font-size: 12.5px; font-weight: 500; color: var(--text-secondary); }
.field-hint  { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}
.field-row .field + .field { margin-top: 0; }
@media (max-width: 800px) { .field-row { grid-template-columns: minmax(0, 1fr); } }

.input,
.textarea,
select.input {
    width: 100%;
    padding: 9px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font: 400 14px/1.5 'Inter', system-ui, sans-serif;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input:focus,
.textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); }
.textarea { resize: vertical; min-height: 84px; }

/* ─── Project type chooser ─── */
.type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    max-width: 920px;
}
.type-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.type-card:hover { text-decoration: none; border-color: var(--accent); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.type-card:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.type-card-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--accent-soft);
    color: var(--accent);
}
.type-card-title { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.type-card-body { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.type-card-steps { list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-muted); }
.type-card-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font-weight: 500; font-size: 13.5px; color: var(--accent); }

/* ─── Dropzone ─── */
.dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 32px 24px;
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-glass);
    color: var(--text-secondary);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.dropzone:hover,
.dropzone:focus-within {
    border-color: var(--text-secondary);
    background: var(--bg-glass-hover);
}
.dropzone.dragover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    transform: scale(1.01);
}
.dropzone.has-file { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
/* The file input covers the whole zone at zero opacity, so the browser handles click and drop. */
.dropzone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.dropzone-icon  { color: var(--text-muted); margin-bottom: 6px; }
.dropzone.dragover .dropzone-icon,
.dropzone.has-file .dropzone-icon { color: var(--accent); }
.dropzone-title { font-weight: 600; font-size: 14px; color: var(--text-primary); }
.dropzone.dragover .dropzone-title { color: var(--accent); }
.dropzone-hint  { font-size: 12.5px; color: var(--text-muted); }

/* ─── Tables ─── */
.table-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
}
.table thead th {
    text-align: left;
    padding: 10px 14px;
    font: 500 11px 'Inter', system-ui, sans-serif;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.table tbody td {
    padding: 10px 14px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background-color 0.12s ease; }
.table tbody tr:hover { background: var(--bg-glass-hover); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .muted { color: var(--text-muted); }

/* ─── Status tags ─── */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    font-weight: 500;
    font-size: 11px;
    border-radius: var(--radius-full);
    letter-spacing: 0.02em;
    line-height: 1.6;
    white-space: nowrap;
}
.tag.success { color: #15803d; background: rgba(34, 197, 94, 0.14); }
.tag.warn    { color: #b45309; background: rgba(245, 158, 11, 0.18); }
.tag.error   { color: #b91c1c; background: rgba(239, 68, 68, 0.16); }
.tag.info    { color: var(--accent); background: var(--accent-soft); }
.tag.neutral { color: var(--text-secondary); background: var(--bg-tertiary); }
/* A feature still in preview: it works, but may change. */
.tag.preview { color: #7c3aed; background: rgba(124, 58, 237, 0.12); font-size: 10.5px; letter-spacing: 0.02em; vertical-align: middle; }
[data-theme="dark"] .tag.success { color: #86efac; }
[data-theme="dark"] .tag.warn    { color: #fbbf24; }
[data-theme="dark"] .tag.error   { color: #fca5a5; }
.tag .tag-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag.pulse .tag-dot { animation: status-pulse 2s ease-in-out infinite; }

/* ─── Banner / inline alert ─── */
.banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    border-left: 3px solid var(--accent);
    margin-bottom: 14px;
}
.banner-icon  { color: var(--accent); flex-shrink: 0; padding-top: 1px; }
.banner-body  { flex: 1; min-width: 0; }
.banner-title { font-weight: 600; font-size: 13.5px; color: var(--text-primary); margin-bottom: 2px; }
.banner-text  { font-size: 12.5px; color: var(--text-secondary); line-height: 1.55; }
.banner-info    { border-left-color: var(--accent); }   .banner-info    .banner-icon { color: var(--accent); }
.banner-success { border-left-color: #22c55e; }         .banner-success .banner-icon { color: #22c55e; }
.banner-warn    { border-left-color: #f59e0b; }         .banner-warn    .banner-icon { color: #f59e0b; }
.banner-error   { border-left-color: #ef4444; }         .banner-error   .banner-icon { color: #ef4444; }

/* ─── Snackbar / toast ─── */
.snackbar-stack {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 2000;
    pointer-events: none;
}
.snackbar {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
    max-width: min(560px, calc(100vw - 32px));
    padding: 10px 14px;
    background: var(--text-primary);
    color: var(--bg-elevated);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
    animation: snackbar-in 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.snackbar-icon { flex-shrink: 0; display: inline-flex; }
.snackbar.success .snackbar-icon { color: #22c55e; }
.snackbar.info    .snackbar-icon { color: var(--accent); }
.snackbar.warn    .snackbar-icon { color: #f59e0b; }
.snackbar.error   .snackbar-icon { color: #ef4444; }
.snackbar-msg { flex: 1; font-weight: 500; font-size: 13px; line-height: 1.45; }
@keyframes snackbar-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Progress ─── */
.progress {
    position: relative;
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    width: 0;
    background: var(--accent-gradient);
    border-radius: var(--radius-full);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-indeterminate .progress-bar {
    width: 35%;
    animation: progress-slide 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes progress-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(286%); }
}
.spinner {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 2px solid var(--accent-soft);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spinner-rotate 0.9s linear infinite;
    display: inline-block;
    vertical-align: middle;
}
.spinner-lg { width: 28px; height: 28px; border-width: 3px; }
@keyframes spinner-rotate { to { transform: rotate(360deg); } }

/* Working state: the long wait while Claude reads a plan */
.working {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 48px 24px;
}
.working .progress { max-width: 360px; }
.working-title { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.working-body  { font-size: 13.5px; color: var(--text-muted); max-width: 440px; }

/* ─── Empty state ─── */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 48px 24px;
    color: var(--text-secondary);
}
.empty-state-icon {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    margin-bottom: 4px;
}
.empty-state-title { font-weight: 600; font-size: 17px; color: var(--text-primary); letter-spacing: -0.01em; }
.empty-state-body {
    font-size: 13.5px;
    line-height: 1.55;
    max-width: 380px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

/* ─── Modals ─── */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    animation: modal-backdrop-in 0.18s ease-out;
}
@keyframes modal-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
    width: 460px;
    max-width: calc(100vw - 32px);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 22px 24px 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.08);
    animation: modal-card-in 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes modal-card-in {
    from { opacity: 0; transform: scale(0.96) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-title   { margin: 0 0 10px; font-weight: 600; font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; }
.modal-body    { margin: 0 0 22px; font-size: 14px; line-height: 1.55; color: var(--text-secondary); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* Buttons under a form field keep the same distance as under the text. */
.modal-card > .field + .modal-actions { margin-top: 22px; }

/* ─── Plan & model ─── */
.plan-frame {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
}
.plan-frame img { max-width: 100%; max-height: 560px; display: block; }
.plan-frame iframe { width: 100%; height: 560px; border: none; }
/* An image plan zooms and pans in place (imagination.zoomPan in app.js). */
.plan-frame.zoomable { position: relative; touch-action: none; }
.plan-frame.zoomable img { user-select: none; will-change: transform; cursor: zoom-in; }
.plan-frame.zoomed img { cursor: grab; }
.plan-frame.panning img { cursor: grabbing; }
.zoom-controls {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
.zoom-controls .btn-icon { width: 28px; height: 28px; }
.zoom-level { min-width: 40px; text-align: center; font-size: 11.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

.top-view {
    width: 100%;
    max-height: 560px;
    display: block;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.top-view .room      { fill: var(--accent-soft); stroke: none; }
.top-view .room-label { paint-order: stroke; stroke: var(--bg-primary); stroke-width: 0.08; stroke-linejoin: round;
                        fill: var(--text-secondary); font: 500 0.32px 'Inter', system-ui, sans-serif; text-anchor: middle; }
.top-view .room-area  { fill: var(--text-muted); font: 400 0.24px 'Inter', system-ui, sans-serif; text-anchor: middle; }
.top-view .wall      { stroke: var(--text-primary); stroke-linecap: square; }
.top-view .wall.interior { stroke: var(--text-secondary); }
.top-view .opening   { stroke-linecap: butt; }
.top-view .opening.window { stroke: #38bdf8; }
.top-view .opening.door   { stroke: #f59e0b; }
.top-view .camera .cone { fill: var(--camera-soft); stroke: var(--camera-line); stroke-width: 0.02; }
.top-view .camera .body { fill: var(--camera); stroke: var(--bg-elevated); stroke-width: 0.04; }
.top-view .camera.selected .cone { fill: var(--camera-wash); stroke: var(--camera); stroke-width: 0.04; }
.top-view .furniture rect { fill: var(--bg-elevated); stroke: var(--text-muted); stroke-width: 0.02; }
.top-view .furniture line { stroke: var(--text-secondary); stroke-width: 0.05; stroke-linecap: round; }
.top-view .furniture.rug rect { fill: var(--bg-tertiary); }

.furniture-panel { padding: 14px 20px; }
.furniture-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.furniture-status { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-secondary); }

/* ─── Toggle switch (style guide §5.11) ─── */
.toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
}
.toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.toggle-track {
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.toggle-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.toggle:hover .toggle-track                  { border-color: var(--text-secondary); }
.toggle input:checked + .toggle-track        { background: var(--accent); border-color: var(--accent); }
.toggle input:checked + .toggle-track::after { transform: translateX(16px); }
.toggle input:focus-visible + .toggle-track  { box-shadow: 0 0 0 3px var(--accent-soft); }
.toggle input:disabled ~ *                   { opacity: 0.5; cursor: not-allowed; }
.toggle-label { font-size: 14px; color: var(--text-primary); }
.toggle.toggle-row { display: flex; justify-content: space-between; width: 100%; }

.assumption-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.assumption-list li {
    display: flex;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.assumption-list li svg { color: var(--text-muted); flex-shrink: 0; margin-top: 3px; }

/* ─── 3D scene ─── */
.scene-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 14px;
    align-items: start;
}
@media (max-width: 1100px) { .scene-layout { grid-template-columns: minmax(0, 1fr); } }
.viewer {
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.viewer-canvas { position: absolute; inset: 0; }
.viewer-canvas canvas { width: 100%; height: 100%; display: block; }
.viewer-hint {
    position: absolute;
    left: 12px;
    bottom: 10px;
    font-size: 11.5px;
    color: var(--text-muted);
    background: rgba(var(--bg-primary-rgb), 0.75);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    pointer-events: none;
}
.viewer-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
}

.viewer-switch { position: absolute; top: 10px; right: 10px; }

/* ─── Landscape site ─── */
.site-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
    gap: 14px;
    align-items: start;
}
.site-layout .panel { margin-top: 0; }
.site-layout > div > .panel + .panel { margin-top: 14px; }
@media (max-width: 1100px) { .site-layout { grid-template-columns: minmax(0, 1fr); } }

.site-view {
    width: 100%;
    max-height: 640px;
    display: block;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.site-view .no-image { fill: var(--bg-tertiary); }
.site-view .feature, .editor-svg .feature, .editor-svg .draft {
    fill-opacity: 0.45;
    stroke: rgba(255, 255, 255, 0.75);
    stroke-linejoin: round;
    stroke-linecap: round;
}
.site-view .feature.line, .editor-svg .feature.line, .editor-svg .draft.line { fill: none; stroke-opacity: 0.85; }
.site-view .feature.designed, .editor-svg .feature.designed { fill-opacity: 0.7; stroke: var(--bg-elevated); }
.site-view .feature.line.designed, .editor-svg .feature.line.designed { stroke-opacity: 1; }
.site-view .feature-label, .editor-svg .feature-label {
    fill: #ffffff; font-family: 'Inter', system-ui, sans-serif; font-weight: 600; text-anchor: middle; pointer-events: none;
    paint-order: stroke; stroke: rgba(0, 0, 0, 0.55); stroke-width: 0.35em; stroke-linejoin: round;
}
.site-view .camera .cone { fill: var(--camera-soft); stroke: var(--camera-line); }
.site-view .camera .body { fill: var(--camera); stroke: var(--bg-elevated); }
.site-view .camera.selected .cone { fill: var(--camera-wash); stroke: var(--camera); }
.site-view .camera-label {
    fill: #ffffff; font-family: 'Inter', system-ui, sans-serif; font-weight: 600; text-anchor: middle; pointer-events: none;
    paint-order: stroke; stroke: var(--camera-strong); stroke-width: 0.3em; stroke-linejoin: round;
}

/* Feature tints, shared by the site plan and the site editor. Lines take the tint as their stroke. */
.ft-woodland, .ft-tree_line, .ft-tree { fill: var(--cover-woodland); }
.ft-orchard  { fill: var(--cover-orchard); }
.ft-meadow   { fill: var(--cover-meadow); }
.ft-lawn     { fill: var(--cover-lawn); }
.ft-field    { fill: var(--cover-field); }
.ft-garden   { fill: var(--cover-garden); }
.ft-heath    { fill: var(--cover-heath); }
.ft-water, .ft-stream { fill: var(--cover-water); }
.ft-wetland  { fill: var(--cover-wetland); }
.ft-sand     { fill: var(--cover-sand); }
.ft-rock     { fill: var(--cover-rock); }
.ft-paved    { fill: var(--cover-paved); }
.ft-building { fill: var(--cover-building); }
.ft-mound, .ft-hollow { fill: var(--cover-relief); }
.ft-hedge    { fill: var(--cover-woodland); }
.ft-path     { fill: var(--cover-path); }
.ft-road     { fill: var(--cover-road); }
.ft-wall     { fill: var(--cover-wall); }
.ft-fence    { fill: var(--cover-fence); }
.line.ft-tree_line, .line.ft-hedge { stroke: var(--cover-woodland); }
.line.ft-stream { stroke: var(--cover-water); }
.line.ft-path { stroke: var(--cover-path); }
.line.ft-road { stroke: var(--cover-road); }
.line.ft-wall { stroke: var(--cover-wall); }
.line.ft-fence { stroke: var(--cover-fence); }
.ft-mound { stroke-dasharray: 0.6% 0.4%; }
.ft-hollow { stroke-dasharray: 0.2% 0.3%; }

/* The map a site is chosen on. */
.picker-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
    gap: 14px;
    align-items: start;
}
@media (max-width: 1100px) { .picker-layout { grid-template-columns: minmax(0, 1fr); } }
.picker-search { margin-bottom: 10px; min-height: 20px; font-size: 12.5px; color: var(--text-muted); }
/* Google's place search is a sealed component: only its box and the named parts can be styled.
   Dressed as a Proxima input (style guide §5.7). */
.picker-search gmp-place-autocomplete {
    display: block;
    width: 100%;
    color-scheme: light;
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 14px;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.picker-search gmp-place-autocomplete:hover { border-color: var(--text-muted); }
.picker-search gmp-place-autocomplete:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.picker-search gmp-place-autocomplete::part(focus-ring) { display: none; }
.picker-search gmp-place-autocomplete::part(prediction-list) {
    margin-top: 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
}
.picker-search gmp-place-autocomplete::part(prediction-item) { font-family: 'Inter', system-ui, sans-serif; font-size: 13.5px; color: var(--text-primary); }
.picker-search gmp-place-autocomplete::part(prediction-item-selected) { background: var(--accent-soft); }
.picker-search gmp-place-autocomplete::part(prediction-item-match) { color: var(--accent); font-weight: 600; }
.picker-search gmp-place-autocomplete::part(prediction-item-icon) { color: var(--text-muted); }
.picker-map {
    position: relative;
    height: 520px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.picker-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.picker-readout { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; margin-left: auto; }

.view-list { display: flex; flex-direction: column; gap: 6px; }
.view-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
    font: 500 13px 'Inter', system-ui, sans-serif;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}
.view-item:hover { border-color: var(--accent); }
.view-item.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.view-item svg { color: var(--text-muted); flex-shrink: 0; }
.view-item.selected svg { color: var(--accent); }
.view-item .view-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ─── Render gallery ─── */
.render-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px;
}
.render-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.render-image {
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 12.5px;
    gap: 8px;
}
.render-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.render-image .render-switch {
    position: absolute;
    top: 10px;
    right: 10px;
}
/* Download sits on the photo, top-left, opposite the Render/Massing switch. */
.render-download {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    box-shadow: var(--shadow-sm);
    transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.render-download:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
.render-download:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
/* Edit sits beside download, top left of the photo. */
.render-edit { left: 48px; }
.render-video { left: 86px; }
/* A photo that has a video: a small play tag, bottom left; it opens the video. */
.album-video {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.55);
    color: #ffffff;
    font: 600 11.5px 'Inter', system-ui, sans-serif;
    cursor: pointer;
    backdrop-filter: blur(6px);
}
.album-video:hover { background: rgba(0, 0, 0, 0.72); }

/* The living photo dialog (an experiment with FLUX 3 Video). */
.video-dialog { width: 720px; position: relative; }
.video-close { position: absolute; top: 14px; right: 14px; }
.video-stage { position: relative; margin: 4px 0 14px; border-radius: var(--radius-md); overflow: hidden; background: #000; line-height: 0; }
.video-stage img, .video-stage video { width: 100%; max-height: 52vh; object-fit: contain; display: block; }
.video-stage.working img { filter: saturate(0.8) brightness(0.8); }
.video-stage .lightbox-note { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); line-height: 1.4; }
.video-facts { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; }
.video-motion { font-size: 13px; line-height: 1.55; color: var(--text-secondary); margin: 0 0 16px; }
.video-options { align-items: flex-end; gap: 24px; margin-bottom: 8px; }
.video-options .segmented { align-self: flex-start; }
.render-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.render-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.render-title { font-weight: 600; font-size: 13.5px; }
.render-prompt {
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.render-prompt.expanded { -webkit-line-clamp: unset; }
.render-prompt { cursor: pointer; border-radius: 4px; transition: color 0.12s ease; }
.render-prompt:hover { color: var(--text-primary); }
.render-prompt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.render-prompt-edit { font-size: 12.5px; line-height: 1.55; min-height: 180px; }
.render-meta { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.render-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.render-error { font-size: 12px; color: #ef4444; }

.render-links { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.render-links span { display: inline-flex; align-items: center; gap: 5px; }
.render-links svg { flex-shrink: 0; }

/* Room looks: one row per room — its reference photo, then the agreed description. */
.look-list { display: flex; flex-direction: column; }
.look-row {
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--border-subtle);
}
.look-row:last-child { padding-bottom: 0; }
.look-photo {
    position: relative;
    aspect-ratio: 3 / 2;
    align-self: start;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    overflow: hidden;
}
.look-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.look-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.look-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.look-text { font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.look-text.empty { color: var(--text-muted); }
@media (max-width: 700px) { .look-row { grid-template-columns: minmax(0, 1fr); } .look-photo { max-width: 220px; } }

/* The picture on a card is a button that opens the lightbox. */
.render-open {
    position: absolute;
    inset: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: zoom-in;
}
.render-open img { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.render-open:hover img { transform: scale(1.02); }
.render-open:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--accent); }
.render-image { overflow: hidden; }

/* ─── Lightbox ─── */
/* Colours come from the --lightbox-* tokens, which do not change with the theme. */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    flex-direction: column;
    background: var(--lightbox-bg);
    color: var(--lightbox-text);
    animation: modal-backdrop-in 0.18s ease-out;
    outline: none;
}
.lightbox-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    flex-shrink: 0;
}
.lightbox-title { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.lightbox-count { font-size: 12.5px; color: var(--lightbox-muted); font-variant-numeric: tabular-nums; }
.lightbox .btn-icon { color: var(--lightbox-muted); }
.lightbox .btn-icon:hover { color: var(--lightbox-text); background: var(--lightbox-glass); }
.lightbox .segmented { background: var(--lightbox-glass); border-color: var(--lightbox-line); }
.lightbox .segmented-option { color: var(--lightbox-muted); }
.lightbox .segmented-option:hover:not(.selected) { color: var(--lightbox-text); background: var(--lightbox-glass); }
.lightbox .segmented-option.selected { background: var(--lightbox-line); color: var(--lightbox-text); border-color: transparent; box-shadow: none; }
.lightbox-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 16px 24px;
}
.lightbox-image {
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    animation: modal-card-in 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.lightbox-reading { position: relative; display: inline-block; line-height: 0; min-width: 0; }
.lightbox-reading .lightbox-image { max-width: calc(100vw - 160px); max-height: calc(100vh - 110px); display: block; }
.lightbox-note { line-height: 1.4; }
.lightbox-note {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    background: var(--lightbox-bg);
    color: var(--lightbox-text);
    font-size: 12.5px;
    white-space: nowrap;
}
/* The photo with depth: a canvas three.js sizes to fit this box. */
.lightbox-parallax { flex: 1; align-self: stretch; min-width: 0; display: flex; align-items: center; justify-content: center; }
.parallax-canvas { border-radius: var(--radius-sm); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); display: block; }
/* Before and after: the after photo with the before photo over it, cut off at the divider. */
.compare { position: relative; display: inline-block; line-height: 0; min-width: 0; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); }
.compare .lightbox-image { max-width: calc(100vw - 160px); max-height: calc(100vh - 110px); box-shadow: none; border-radius: 0; display: block; }
.compare-before { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.compare-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--split);
    width: 2px;
    margin-left: -1px;
    background: var(--lightbox-text);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.compare-handle::before {
    content: "";
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--lightbox-text);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}
.compare-handle svg { position: relative; flex-shrink: 0; color: var(--lightbox-bg); margin: 0 -1px; }
.compare-label {
    position: absolute;
    top: 12px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--lightbox-bg);
    color: var(--lightbox-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    pointer-events: none;
}
.compare-label.before { left: 12px; }
.compare-label.after { right: 12px; }
.compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.lightbox-nav {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--lightbox-line);
    background: var(--lightbox-glass);
    color: var(--lightbox-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.lightbox-nav:hover { background: var(--lightbox-line); border-color: var(--lightbox-muted); }
.lightbox-nav:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }

/* ─── Render editor ─── */
/* Editing a finished photo part by part: the photo on the lightbox's dark stage, the boxes over it,
   and a Proxima side panel with what should change in each. */
.render-editor-body {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: 16px;
    padding: 0 20px 20px;
}
.render-editor-stage {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.edit-photo { position: relative; display: inline-block; line-height: 0; min-width: 0; user-select: none; -webkit-user-select: none; }
.edit-photo-image {
    display: block;
    max-width: calc(100vw - 420px);
    max-height: calc(100vh - 100px);
    border-radius: var(--radius-sm);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    -webkit-user-drag: none;
}
.edit-photo.compare .edit-photo-image { border-radius: 0; box-shadow: none; }
.edit-surface { cursor: crosshair; touch-action: none; }
.edit-box {
    position: absolute;
    border: 2px solid var(--accent);
    border-radius: 2px;
    background: var(--accent-soft);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
    cursor: move;
    line-height: normal;
}
.edit-box.empty { border-style: dashed; }
.edit-box.selected { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 0 4px var(--accent-glow); }
.edit-box.draft { border-style: dashed; pointer-events: none; }
.edit-box.still { cursor: default; background: transparent; }
.edit-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.edit-box .edit-badge { position: absolute; top: 4px; left: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); pointer-events: none; }
.edit-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--lightbox-text);
    border: 2px solid var(--accent);
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.edit-box:hover .edit-handle, .edit-box.selected .edit-handle { opacity: 1; }
.edit-handle.nw { top: -7px; left: -7px; cursor: nwse-resize; }
.edit-handle.ne { top: -7px; right: -7px; cursor: nesw-resize; }
.edit-handle.sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.edit-handle.se { bottom: -7px; right: -7px; cursor: nwse-resize; }
@media (pointer: coarse) {
    .edit-handle { width: 20px; height: 20px; }
    .edit-handle.nw { top: -11px; left: -11px; }
    .edit-handle.ne { top: -11px; right: -11px; }
    .edit-handle.sw { bottom: -11px; left: -11px; }
    .edit-handle.se { bottom: -11px; right: -11px; }
}
.render-editor-side {
    width: 360px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
}
.render-editor-side .btn-icon { color: var(--text-muted); }
.render-editor-side .btn-icon:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.render-editor-head { display: flex; flex-direction: column; gap: 6px; }
.render-editor-head .field-hint { display: flex; gap: 6px; align-items: baseline; }
.render-editor-head .field-hint svg { flex-shrink: 0; position: relative; top: 2px; }
.edit-warning { color: #b45309; font-weight: 600; }
.edit-note {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--text-secondary);
    font-size: 12.5px;
}
.edit-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 13px;
}
.edit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.edit-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.edit-item.selected { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.edit-item.still { flex-direction: row; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.edit-item-head { display: flex; align-items: center; gap: 8px; }
.edit-item-head .field-label { flex: 1; margin: 0; }
/* The instruction reads as part of its box: no field border inside the card, whose ring shows focus. */
.edit-item .textarea {
    min-height: 44px;
    padding: 2px 0 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 13.5px;
    resize: none;
    field-sizing: content;
}
.edit-item .textarea:focus { outline: none; box-shadow: none; }
/* A box's reference photo: a link-like button to add one, a thumbnail once it is there. */
.edit-attach {
    position: relative;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--accent);
    cursor: pointer;
}
.edit-attach:hover { text-decoration: underline; }
.edit-attach input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.edit-attach.busy { color: var(--text-muted); cursor: default; }
.edit-reference { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); }
.edit-reference img { width: 44px; height: 44px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.edit-reference span { flex: 1; min-width: 0; }
.edit-reference-thumb { width: 32px; height: 32px; object-fit: cover; border-radius: var(--radius-sm); margin-left: auto; flex-shrink: 0; }
.edit-actions { margin-top: auto; padding-top: 4px; flex-wrap: nowrap; }
/* Keep, keep, edit again: one row, sharing the width. */
.edit-actions .btn { flex: 1 1 auto; min-width: 0; justify-content: center; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
/* In the camera panel: an edit under way or waiting to be kept. */
.edit-waiting { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 900px) {
    .render-editor-body { flex-direction: column; gap: 12px; padding: 0 16px 16px; }
    .render-editor-stage { flex: 0 0 auto; }
    .edit-photo-image { max-width: calc(100vw - 32px); max-height: 42vh; }
    .render-editor-side { width: auto; flex: 1 1 auto; min-height: 0; }
    .render-editor .lightbox-note { white-space: normal; width: max-content; max-width: calc(100% - 24px); }
}

/* ─── Plan editor (full screen) ─── */
.editor-screen {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    flex-direction: column;
    background: var(--bg-primary);
    animation: modal-backdrop-in 0.18s ease-out;
}
.editor-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 8px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.editor-bar-title { display: flex; align-items: center; gap: 12px; margin-right: 10px; min-width: 0; }
.editor-bar-sub {
    font-size: 13px;
    color: var(--text-muted);
    max-width: 220px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.btn-secondary.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.editor-hint {
    font-size: 12.5px;
    color: var(--text-muted);
    padding: 8px 20px;
    line-height: 1.5;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
    flex-shrink: 0;
}
.editor-body { flex: 1; min-height: 0; display: flex; }
.editor-reference {
    width: min(32vw, 600px);
    flex-shrink: 0;
    padding: 16px;
    border-left: 1px solid var(--border);
    background: var(--bg-secondary);
    overflow: auto;
}
.editor-reference .plan-frame { min-height: 0; }
.editor-reference .plan-frame.zoomable { height: calc(100vh - 190px); }
.editor-reference .plan-frame img { max-height: 100%; }
.editor-reference .plan-frame iframe { height: calc(100vh - 190px); }
.editor-section-title {
    margin: 20px 0 8px;
    font-weight: 500;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.editor-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}
.editor-check input { accent-color: var(--accent); width: 15px; height: 15px; }
.editor-surface {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    background: var(--bg-primary);
}
.editor-surface:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent-soft); }
.editor-svg {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    user-select: none;
}
.editor-svg.tool-wall, .editor-svg.tool-room, .editor-svg.tool-camera { cursor: crosshair; }
.editor-svg.tool-furniture { cursor: copy; }
.editor-svg.tool-door, .editor-svg.tool-window { cursor: copy; }
.editor-svg .grid-line { stroke: var(--border); }
.editor-svg .room { fill: var(--accent-soft); cursor: pointer; transition: fill 0.12s ease; }
.editor-svg .room:hover { fill: rgba(47, 179, 131, 0.14); }
.editor-svg .room.selected { fill: rgba(47, 179, 131, 0.22); }
.editor-svg .wall { stroke: var(--text-primary); stroke-linecap: square; pointer-events: none; }
.editor-svg .wall.interior { stroke: var(--text-secondary); }
.editor-svg .wall.selected { stroke: var(--accent); }
.editor-svg .hit { stroke: transparent; cursor: pointer; }
.editor-svg .hit:hover { stroke: var(--accent-glow); }
.editor-svg .opening { stroke-linecap: butt; cursor: grab; }
.editor-svg .opening.window { stroke: #38bdf8; }
.editor-svg .opening.door { stroke: #f59e0b; }
.editor-svg .opening.selected { stroke: var(--accent); }
.editor-svg .room-label   { fill: var(--text-secondary); font-family: 'Inter', system-ui, sans-serif; font-weight: 500; text-anchor: middle; pointer-events: none; }
.editor-svg .room-area    { fill: var(--text-muted); font-family: 'Inter', system-ui, sans-serif; text-anchor: middle; pointer-events: none; }
.editor-svg .preview-label { fill: var(--accent); font-family: 'Inter', system-ui, sans-serif; font-weight: 600; text-anchor: middle; pointer-events: none; }
.editor-svg .handle { fill: var(--bg-elevated); stroke: var(--accent); stroke-width: 0.04; cursor: move; }
.editor-svg .handle:hover { fill: var(--accent); }
.editor-svg .handle.vertex { stroke: var(--camera); }
.editor-svg .furniture { cursor: grab; }
.editor-svg .furniture rect { fill: var(--bg-elevated); stroke: var(--text-muted); stroke-width: 0.02; }
.editor-svg .furniture .front { stroke: var(--text-secondary); stroke-linecap: round; }
.editor-svg .furniture.rug rect { fill: var(--bg-tertiary); stroke-dasharray: 0.08 0.06; }
.editor-svg .furniture:hover rect { stroke: var(--accent); }
.editor-svg .furniture.selected rect { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 0.04; }
.editor-svg .furniture.selected .front { stroke: var(--accent); }
/* Camera points. Violet, so they never read as part of the building (accent) or its openings. */
.editor-svg .camera .cone { fill: var(--camera-soft); stroke: var(--camera-line); stroke-width: 0.02; pointer-events: none; }
.editor-svg .camera.selected .cone { fill: var(--camera-wash); stroke: var(--camera); stroke-width: 0.03; }
.editor-svg .camera .body { fill: var(--camera); stroke: var(--bg-elevated); cursor: move; }
.editor-svg .camera .body:hover { fill: var(--camera-strong); }
.editor-svg .camera .lens { stroke: var(--camera); stroke-linecap: round; pointer-events: none; }
.editor-svg .camera .aim-line { stroke: var(--camera); stroke-dasharray: 0.1 0.08; pointer-events: none; }
.editor-svg .camera .handle.aim { stroke: var(--camera); cursor: crosshair; }
.editor-svg .camera .handle.aim:hover { fill: var(--camera); }
.editor-svg .camera-label {
    fill: var(--camera-strong); font-family: 'Inter', system-ui, sans-serif; font-weight: 600; text-anchor: middle; pointer-events: none;
    paint-order: stroke; stroke: var(--bg-primary); stroke-width: 0.06; stroke-linejoin: round;
}
[data-theme="dark"] .editor-svg .camera-label { fill: var(--camera); }
.editor-svg .preview { stroke: var(--accent); opacity: 0.6; stroke-linecap: square; pointer-events: none; }
.editor-svg .preview-room { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 0.03; stroke-dasharray: 0.15 0.1; pointer-events: none; }
.editor-svg .cursor { fill: var(--accent); pointer-events: none; }
/* Site editor, isometric mode: three.js owns the canvas. */
.editor-surface { position: relative; }
.editor-surface .hidden { display: none; }
.editor-iso { position: absolute; inset: 0; background: var(--bg-tertiary); }
.editor-iso canvas { touch-action: none; cursor: grab; }
.editor-iso-tools {
    position: absolute;
    left: 14px;
    bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
/* The area picker fills the whole canvas: the map is the page, and cards float over it. */
.picker-screen { position: absolute; inset: 0; overflow: hidden; }
.picker-screen .picker-stage { position: absolute; inset: 0; }
.picker-screen .picker-map { height: 100%; border: none; border-radius: 0; }
.picker-screen .picker-3d { border-radius: 0; }
.picker-screen .picker-stage .viewer-overlay { z-index: 3; pointer-events: none; }
.picker-card {
    position: absolute;
    z-index: 5;
    padding: 14px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}
.picker-card.hidden, .picker-top .hidden { display: none; }
/* Progress of the fetch and the reading, shown over the map or plan it is happening on. Compact:
   every step is one line, and only the step under way shows its detail (and its own bar). */
.picker-progress {
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    width: min(440px, calc(100% - 32px));
    padding: 14px 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.picker-steps { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; }
.picker-steps li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.picker-step-mark {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    color: var(--text-muted);
}
.picker-step-mark svg { width: 11px; height: 11px; }
.picker-step-mark .spinner { width: 16px; height: 16px; }
.picker-steps li.done .picker-step-mark { background: var(--accent); border-color: var(--accent); color: var(--bg-elevated); }
.picker-steps li.active .picker-step-mark { border-color: transparent; }
.picker-step-title { display: block; font-weight: 500; font-size: 13px; line-height: 1.45; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-steps li.done .picker-step-title { color: var(--text-secondary); font-weight: 400; }
.picker-steps li.todo .picker-step-title { color: var(--text-muted); font-weight: 400; }
.picker-step-sub { display: block; font-size: 12px; line-height: 1.45; color: var(--text-muted); margin-top: 1px; }
.picker-steps li:not(.active) .picker-step-sub:not(:has(.render-error)) { display: none; }
/* How many of the rooms are read: a small determinate bar under the step. */
.picker-step-progress { display: block; height: 4px; max-width: 240px; margin-top: 6px; }
.picker-step-progress .progress-bar { display: block; }
.picker-progress-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
.picker-progress .progress { height: 3px; }
.picker-top { top: 16px; left: 16px; width: min(420px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 8px; }
.picker-top .breadcrumbs { margin-bottom: 0; }
.picker-top .picker-search { margin-bottom: 0; }
.picker-title { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.picker-side { top: 16px; right: 16px; width: 330px; max-height: calc(100% - 120px); overflow-y: auto; }
.picker-dock {
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    /* Its own width, not half the screen's: centred from the middle, it would otherwise wrap early. */
    width: max-content;
    max-width: calc(100% - 32px);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
}
.picker-group { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.picker-group + .picker-group { padding-left: 16px; border-left: 1px solid var(--border); }
.picker-group-label { font-weight: 500; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 4px; }
.picker-chip {
    display: inline-flex;
    align-items: center;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-elevated);
    overflow: hidden;
}
.picker-chip button { height: 100%; padding: 0 8px; border: none; background: none; color: var(--text-secondary); font: 500 12.5px 'Inter', system-ui, sans-serif; cursor: pointer; display: inline-flex; align-items: center; }
.picker-chip button + button { padding: 0 7px 0 4px; color: var(--text-muted); }
.picker-chip button:hover { color: var(--accent); }
.picker-chip.selected { border-color: var(--accent); background: var(--accent-soft); }
.picker-chip.selected button:first-child { color: var(--accent); }
.picker-size { width: 84px; height: 32px; padding: 4px 8px; }
.picker-times { font-size: 13px; color: var(--text-muted); }
.picker-dock .picker-readout { margin-left: 0; }
/* Residential / Office at the top of the new interior's project card. */
.use-switch { display: flex; margin-bottom: 12px; }
.use-switch .segmented-option { flex: 1; justify-content: center; display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 1100px) { .picker-side { top: auto; bottom: 120px; } }
/* The landscape workspace: the same full canvas, with our own isometric view of the site under the cards. */
.workspace-stage { position: absolute; inset: 0; background: var(--bg-tertiary); }
.workspace-stage canvas { touch-action: none; }
.workspace-stage .viewer-overlay { pointer-events: none; }
.workspace-top { top: 16px; left: 16px; width: min(400px, calc(100% - 32px)); display: flex; flex-direction: column; gap: 8px; }
.workspace-top .breadcrumbs { margin-bottom: 0; }
.workspace-top .segmented { align-self: flex-start; }
/* In the side panel's columns too: a segmented control is as wide as its options, not the card. */
.workspace-side .segmented { align-self: flex-start; }
.workspace-title-row { display: flex; align-items: center; gap: 4px; }
.workspace-title-row .picker-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The name, renamed in place: a quiet button until hovered, then a text box of the same size. */
.project-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: -6px;
    padding: 3px 6px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: text;
}
.project-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-title svg { flex-shrink: 0; color: var(--text-muted); opacity: 0; transition: opacity 0.15s ease; }
.project-title:hover, .project-title:focus-visible { border-color: var(--border); outline: none; }
.project-title:hover svg, .project-title:focus-visible svg { opacity: 1; }
.picker-title-input {
    flex: 1;
    min-width: 0;
    margin-left: -6px;
    padding: 3px 6px;
    height: auto;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
}
.workspace-side {
    top: 16px;
    right: 16px;
    bottom: 16px;
    width: min(400px, calc(100% - 32px));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.workspace-side .camera-preview { margin-top: 0; }
.workspace-side .field-row { margin-top: 0; }
.workspace-pair { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.workspace-side { overflow-x: hidden; }
.workspace-dock { left: 16px; transform: none; max-width: calc(100% - 448px); }
.workspace-centre {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(420px, calc(100% - 32px));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 24px;
}
.workspace-centre .progress { width: 100%; }
.workspace-block { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border-subtle); }
.workspace-block-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.workspace-block-title { font-weight: 600; font-size: 13.5px; color: var(--text-primary); }
.workspace-features { display: flex; flex-direction: column; }
.workspace-feature { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; border-top: 1px solid var(--border-subtle); }
.workspace-feature:first-child { border-top: none; }
.workspace-feature-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-swatch { width: 12px; height: 12px; flex-shrink: 0; border-radius: 3px; border: 1px solid var(--border); background-color: currentColor; }
/* The swatch takes its colour from the same land-cover classes the site plan uses, which set `fill`. */
.workspace-swatch.ft-woodland, .workspace-swatch.ft-tree_line, .workspace-swatch.ft-tree, .workspace-swatch.ft-hedge { color: var(--cover-woodland); }
.workspace-swatch.ft-orchard { color: var(--cover-orchard); }
.workspace-swatch.ft-meadow { color: var(--cover-meadow); }
.workspace-swatch.ft-lawn { color: var(--cover-lawn); }
.workspace-swatch.ft-field { color: var(--cover-field); }
.workspace-swatch.ft-garden { color: var(--cover-garden); }
.workspace-swatch.ft-heath { color: var(--cover-heath); }
.workspace-swatch.ft-water, .workspace-swatch.ft-stream { color: var(--cover-water); }
.workspace-swatch.ft-wetland { color: var(--cover-wetland); }
.workspace-swatch.ft-sand { color: var(--cover-sand); }
.workspace-swatch.ft-rock { color: var(--cover-rock); }
.workspace-swatch.ft-paved { color: var(--cover-paved); }
.workspace-swatch.ft-building { color: var(--cover-building); }
.workspace-swatch.ft-mound, .workspace-swatch.ft-hollow { color: var(--cover-relief); }
.workspace-swatch.ft-path { color: var(--cover-path); }
.workspace-swatch.ft-road { color: var(--cover-road); }
.workspace-swatch.ft-wall { color: var(--cover-wall); }
.workspace-swatch.ft-fence { color: var(--cover-fence); }
.workspace-palette { display: flex; flex-wrap: wrap; gap: 6px; }
.workspace-selected { background: var(--accent-soft); margin: 0 -16px; padding: 14px 16px; border-top: 1px solid var(--accent-glow); border-bottom: 1px solid var(--accent-glow); }
.workspace-selected .workspace-block-title { display: flex; align-items: center; gap: 8px; }
.workspace-remove:hover { color: #ef4444; border-color: #ef4444; }
.workspace-feature.selected { background: var(--accent-soft); box-shadow: -16px 0 0 var(--accent-soft), 16px 0 0 var(--accent-soft); }
.workspace-feature.removed .workspace-feature-name { text-decoration: line-through; color: var(--text-muted); cursor: default; }
.workspace-feature.removed .workspace-swatch { opacity: 0.4; }
.workspace-row-remove { width: 26px; height: 26px; opacity: 0; transition: opacity 0.12s ease; }
.workspace-feature:hover .workspace-row-remove, .workspace-row-remove:focus-visible { opacity: 1; }
.workspace-row-remove:hover { color: #ef4444; }
/* Renders as a photo album: the panel opens over the whole canvas, beside the title card. */
.album-backdrop { position: absolute; inset: 0; z-index: 4; background: var(--bg-primary); }
.workspace-side.album { left: 432px; width: auto; }
.album-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.album-head .render-actions { margin: 0; }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.album-photo { margin: 0; }
.album-photo .render-image { color: var(--text-muted); flex-direction: column; }
.album-compare {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.album-compare:hover { color: var(--accent); border-color: var(--accent); }
.album-busy {
    position: absolute;
    left: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 12px;
}
@media (max-width: 1100px) { .workspace-side.album { left: 16px; top: 190px; height: auto; } }
.camera-name-row { display: flex; align-items: center; gap: 6px; }
.camera-name-row .input { flex: 1; min-width: 0; }
/* The EN / FR switch in the app bar. */
.language-switch { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-sm); background: var(--bg-glass-hover); margin-right: 8px; }
.language-option {
    padding: 2px 8px;
    border-radius: calc(var(--radius-sm) - 2px);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    text-decoration: none;
}
.language-option:hover { color: var(--text-primary); text-decoration: none; }
.language-option.selected { background: var(--accent-soft); color: var(--text-primary); }
/* AI assist: a dialog with what was asked and answered, and a box for the next request. */
.assist-dialog { width: 520px; display: flex; flex-direction: column; gap: 12px; }
.assist-dialog .modal-title { display: flex; align-items: center; gap: 8px; margin: 0; }
.assist-dialog .assist-intro { margin: 0; }
.assist-dialog .assist-log { max-height: 320px; overflow-y: auto; padding-right: 4px; }
.assist-dialog .assist-form { flex-direction: column; align-items: stretch; }
.assist-dialog .modal-actions { align-items: center; }
.assist-undo { margin-right: auto; }
.assist-log { display: flex; flex-direction: column; gap: 6px; }
.assist-ask {
    align-self: flex-end;
    max-width: 88%;
    padding: 6px 10px;
    border-radius: var(--radius-md) var(--radius-md) 2px var(--radius-md);
    background: var(--accent-soft);
    color: var(--text-primary);
    font-size: 12.5px;
    line-height: 1.45;
}
.assist-reply { max-width: 94%; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); display: flex; gap: 8px; align-items: baseline; }
.assist-form { display: flex; gap: 10px; }
/* Auto design: a card that folds; the numbers are sliders. */
.design-card { gap: 0; }
.design-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-secondary);
    text-align: left;
    cursor: pointer;
}
.design-card-head:hover .workspace-block-title { color: var(--accent); }
.design-card-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.design-card-title .panel-sub { display: inline-flex; align-items: center; gap: 6px; }
.design-card-body { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.design-rationale {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-secondary);
    white-space: pre-line;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
}
.slider-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-tertiary);
}
.slider-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; }
.slider-row .field-label { margin: 0; }
.slider-value {
    min-width: 42px;
    padding: 1px 8px;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
.slider-note { grid-column: 1 / -1; font-size: 11.5px; color: var(--text-muted); }
.slider {
    grid-column: 1 / -1;
    width: 100%;
    height: 18px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.slider:disabled { cursor: default; opacity: 0.55; }
.slider:focus-visible { outline: none; }
/* The track fills with the accent up to the value (Firefox draws that part itself). */
.slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, var(--accent) 0 var(--fill, 0%), var(--border) var(--fill, 0%) 100%);
}
.slider::-moz-range-track { height: 6px; border-radius: 3px; background: var(--border); }
.slider::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }
.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -6px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 2px solid var(--accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    transition: transform 0.12s ease;
}
.slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bg-elevated);
    border: 2px solid var(--accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.slider:hover::-webkit-slider-thumb, .slider:focus-visible::-webkit-slider-thumb { transform: scale(1.12); }
.slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--accent-soft); }
/* A camera's prompt, read and tuned before the photo is made. */
.camera-prompt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.camera-prompt .render-actions { margin-top: 8px; }
.picker-picked { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--camera-strong); font-weight: 500; }
.workspace-link { padding: 0; border: none; background: none; color: inherit; cursor: pointer; text-align: left; font-family: inherit; }
.workspace-link:hover { color: var(--accent); }
@media (max-width: 1100px) { .workspace-side { top: auto; height: 46%; } .workspace-dock { bottom: calc(46% + 28px); max-width: calc(100% - 32px); } }

/* ─── Interior workspace ─── */
/* The landscape workspace's cards over the building; only what an interior adds is here. */
.workspace-facts { grid-template-columns: 110px minmax(0, 1fr); gap: 6px 12px; font-size: 13px; margin-top: 12px; }
/* The original plan, small in the panel: the whole of it is a button that opens it larger. */
.plan-thumb { position: relative; }
.plan-thumb .plan-frame { min-height: 0; height: 180px; }
.plan-thumb .plan-frame img { max-height: 100%; }
.plan-thumb .plan-frame iframe { height: 100%; pointer-events: none; }
.plan-thumb-open { position: absolute; inset: 0; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; cursor: zoom-in; }
.plan-thumb-open:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.plan-thumb-open:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--accent); }
.plan-dialog { width: min(1100px, calc(100vw - 48px)); max-width: none; display: flex; flex-direction: column; gap: 14px; }
.plan-dialog .modal-title { margin: 0; }
.plan-dialog .plan-frame img { max-height: calc(100vh - 200px); }
.plan-dialog .plan-frame iframe { height: calc(100vh - 200px); }
/* Room looks in the narrow panel: a smaller photo; in the selected room's card, no rule above. */
.workspace-side .look-row { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
.workspace-selected .look-row { border-top: none; padding: 0; }
.workspace-look { padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.workspace-look .look-row { border-top: none; padding-top: 8px; }
.workspace-look + .workspace-look { margin-top: 12px; }
/* The area picker's 3D view lies over the map; the map stays laid out underneath. */
.picker-stage { position: relative; }
.picker-3d { position: absolute; inset: 0; z-index: 2; border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-tertiary); }
.picker-3d.hidden { display: none; }
.picker-3d gmp-map-3d { width: 100%; height: 100%; display: block; }
/* Site editor: features over the satellite image. */
.editor-svg.site-editor { background: var(--bg-tertiary); }
.editor-svg.site-editor.tool-select { cursor: grab; }
.editor-svg.site-editor.panning { cursor: grabbing; }
.editor-svg.site-editor.tool-area, .editor-svg.site-editor.tool-line, .editor-svg.site-editor.tool-tree { cursor: crosshair; }
.editor-svg .site-edge { fill: none; stroke: var(--bg-elevated); stroke-dasharray: 1% 0.6%; pointer-events: none; }
.editor-svg .feature { cursor: grab; transition: fill-opacity 0.12s ease; }
.editor-svg .feature:hover { fill-opacity: 0.6; }
.editor-svg .feature.line:hover { fill: none; }
.editor-svg .feature.selected { stroke: var(--accent) !important; stroke-width: 0.35% !important; fill-opacity: 0.75; }
.editor-svg .feature.line.selected { fill: none; fill-opacity: 1; stroke-width: inherit; }
.editor-svg .hit { fill: none; stroke: transparent; cursor: grab; }
.editor-svg .hit:hover { stroke: var(--accent-glow); }
.editor-svg .draft { pointer-events: none; fill-opacity: 0.35; stroke: var(--accent); stroke-dasharray: 0.5% 0.3%; }
.editor-svg .draft.line { stroke-opacity: 0.8; }
.editor-svg .draft-start { fill: var(--bg-elevated); stroke: var(--accent); pointer-events: none; }
.editor-svg .handle.mid { fill: var(--bg-elevated); stroke: var(--accent); cursor: copy; }
.editor-svg .handle.mid:hover { fill: var(--accent); }
.editor-svg .camera .handle.aim { stroke: var(--camera); }

.editor-properties {
    width: 340px;
    flex-shrink: 0;
    padding: 18px 20px;
    border-left: 1px solid var(--border);
    background: var(--bg-secondary);
    overflow-y: auto;
}
.editor-properties .field-row { margin-top: 12px; }
.editor-properties .segmented { align-self: flex-start; }
/* Reference photos on a building: small squares in a row, the last one adds. */
.photo-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-thumb, .photo-add {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    overflow: hidden;
    background: var(--bg-tertiary);
}
.photo-thumb a { display: block; width: 100%; height: 100%; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    cursor: pointer;
}
.photo-remove:hover { color: #ef4444; border-color: #ef4444; }
.photo-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-style: dashed;
    color: var(--text-muted);
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.photo-add:hover, .photo-add:focus-within { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.photo-add.busy { pointer-events: none; }
.photo-add input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.camera-preview { margin-top: 18px; }
.camera-preview.hidden { display: none; }
.camera-preview { outline: none; }
.camera-preview-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; min-height: 30px; }
.camera-preview-head .field-label { margin: 0; white-space: nowrap; }
.camera-preview-busy { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.camera-preview-render { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camera-preview-tag { position: absolute; top: 10px; left: 10px; }
.camera-preview-open { position: absolute; inset: 0; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.camera-preview-open:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--accent); }
.camera-preview-frame .render-switch { position: absolute; top: 10px; right: 10px; }
/* Opened larger: the same panel over the whole window, in the lightbox's colours. */
.workspace-side:has(.camera-preview.large) { z-index: 400; }
.camera-preview.large { margin: 0; padding: 12px 20px 24px; align-items: center; }
.camera-preview.large .camera-preview-head { width: 100%; gap: 12px; margin-bottom: 12px; flex-shrink: 0; }
.camera-preview.large .camera-preview-head .field-label { color: var(--lightbox-text); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.camera-preview.large .camera-preview-busy { color: var(--lightbox-muted); }
.camera-preview-keys { order: 3; margin-top: 10px; font-size: 12px; color: var(--lightbox-muted); flex-shrink: 0; }
.camera-preview.large .camera-preview-frame {
    width: min(100%, calc((100vh - 124px) * 1.5));
    margin: auto 0;
    border-color: var(--lightbox-line);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.camera-preview-frame {
    position: relative;
    aspect-ratio: 3 / 2;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.editor-properties .field + .field { margin-top: 12px; }
.editor-delete { margin-top: 16px; }
.editor-delete:hover { color: #ef4444; border-color: #ef4444; }
.editor-checks {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.5;
}
.editor-ok { display: flex; align-items: center; gap: 8px; color: #16a34a; }
.editor-problem { display: flex; gap: 8px; color: var(--text-secondary); }
.editor-problem svg { color: #f59e0b; flex-shrink: 0; margin-top: 2px; }
.toolbar-grow { flex: 1; }

/* Number inputs: no native spinners (style guide §5.7). */
.input-number { -moz-appearance: textfield; appearance: textfield; font-variant-numeric: tabular-nums; }
.input-number::-webkit-outer-spin-button,
.input-number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input:disabled { color: var(--text-muted); background: var(--bg-glass); cursor: not-allowed; }

/* ─── Plan picker ─── */
/* A new interior's floor plan fills the canvas (planpicker.js draws it), with the same floating cards as the area picker. */
.plan-host { position: absolute; inset: 0; background: var(--bg-tertiary); transition: box-shadow var(--transition); }
.plan-host canvas { display: block; width: 100%; height: 100%; touch-action: none; }
/* A file dragged over the screen: the canvas edge lights up. */
.plan-host.dragover { box-shadow: inset 0 0 0 3px var(--accent); }
/* Before a plan is open: one large drop target. Drops go to the screen underneath; only the button takes the pointer. */
.plan-drop {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 140px 380px 120px 40px;
    pointer-events: none;
}
.plan-drop-zone {
    width: min(560px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 48px 32px;
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-glass);
    color: var(--text-secondary);
    text-align: center;
    transition: border-color var(--transition), background-color var(--transition), transform var(--transition);
}
.plan-drop-zone .btn { margin-top: 12px; pointer-events: auto; }
.plan-drop-icon { color: var(--text-muted); margin-bottom: 6px; }
.plan-drop-title { font-weight: 600; font-size: 16px; color: var(--text-primary); }
.plan-drop-hint { font-size: 12.5px; color: var(--text-muted); max-width: 380px; }
.plan-host.dragover ~ .plan-drop .plan-drop-zone { border-color: var(--accent); background: var(--accent-soft); transform: scale(1.01); }
.plan-host.dragover ~ .plan-drop .plan-drop-icon,
.plan-host.dragover ~ .plan-drop .plan-drop-title { color: var(--accent); }
@media (max-width: 1100px) { .plan-drop { padding: 140px 16px 220px; } }

/* ─── Definition list (settings, model facts) ─── */
.facts { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 8px 16px; font-size: 13.5px; }
.facts dt { color: var(--text-muted); }
.facts dd { color: var(--text-primary); min-width: 0; overflow-wrap: anywhere; }

/* ─── Section ─── */
.section { margin-top: 22px; }
.section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.section-title { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--text-primary); }

/* ─── Blazor chrome ─── */
#blazor-error-ui {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 3000;
    padding: 10px 14px;
    gap: 12px;
    align-items: center;
    background: #ef4444;
    color: #fff;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: 13px;
}
#blazor-error-ui a { color: #fff; font-weight: 600; text-decoration: underline; }
#blazor-error-ui .dismiss { cursor: pointer; }

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

/* ─── Session (app bar) ─── */
.btn-link {
    border: none;
    background: none;
    padding: 0;
    font-weight: 500; font-size: 12px; font-family: inherit;
    color: var(--accent);
    cursor: pointer;
    white-space: nowrap;
}
.btn-link:hover { text-decoration: underline; }

/* ─── Sign-in stage ───
   The sign-in and account pages (static, the kit's) leave the sheet: the teal and its lines fill
   the window (the app's own background, nothing covers it), a soft light sits behind the form,
   and the kit's form card (.page) becomes frosted glass. The
   app bar keeps only the language: the brand is on the stage itself. */
.main.auth-stage {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px 56px;
}
.auth-stage::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(42vmax 32vmax at 50% 52%, rgba(94, 234, 212, 0.20), transparent 70%);
}
.app-shell:has(.auth-stage) .appbar-leading { visibility: hidden; }
.auth-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; color: var(--fond-encre); }
.auth-brand .app-icon { width: 52px; height: 52px; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 10px 30px rgba(0, 0, 0, 0.25); }
.auth-brand-name { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.auth-brand-tag { font-size: 14px; color: var(--fond-encre-2); margin-top: 2px; }
.auth-stage > .page {
    width: 100%;
    margin: 0 !important; /* the kit's pages centre themselves with an inline margin; the stage does it here */
    padding: 32px 32px 28px;
    border-radius: 20px;
    background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.45);
}
.auth-stage > .page .page-head { flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; }
.auth-stage > .page .page-title { font-size: 24px; }
.auth-stage > .page .page-subtitle { font-size: 13.5px; color: var(--text-secondary); margin: 0; }
/* The kit's sections are cards of their own: on the glass card they lose their frame, not their spacing. */
.auth-stage > .page > .card { background: transparent; border: none; box-shadow: none; padding: 0; }
@media (max-width: 600px) {
    .auth-stage > .page { padding: 24px 20px 20px; border-radius: 16px; }
    .auth-brand-name { font-size: 24px; }
    .auth-brand-tag { display: none; }
}

/* ─── Account menu ───
   One avatar in the app bar's right corner. Its menu is part of the chrome, not of the page: a
   dark glass panel in the bar's teal with white ink, so it never reads as a card lying on the
   content. Preferences open as a dialog (.prefs-dialog). */
.account-menu { position: relative; }
.account-menu > summary { list-style: none; }
.account-menu > summary::-webkit-details-marker { display: none; }
@keyframes account-pop { from { opacity: 0; transform: translateY(-6px); } }
.account-avatar {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.30);
    color: var(--fond-encre);
    font: 600 13px 'Inter', system-ui, sans-serif;
    letter-spacing: 0.02em;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.account-avatar:hover, .account-menu[open] > .account-avatar { background: rgba(255, 255, 255, 0.26); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
.account-avatar:focus-visible { outline: 2px solid var(--fond-encre); outline-offset: 2px; }
.account-avatar.large { width: 38px; height: 38px; font-size: 14px; background: var(--accent-gradient); box-shadow: none; cursor: default; }
.account-panel {
    position: absolute;
    top: calc(100% + 10px);
    /* Its right edge on the sheet's (.main): the app bar's 20 px padding against the sheet's 16 px margin. */
    right: -4px;
    z-index: 300;
    width: 240px;
    padding: 6px;
    border-radius: 14px;
    background: rgba(4, 38, 33, 0.86);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 20px 44px rgba(0, 0, 0, 0.35);
    color: var(--fond-encre);
    animation: account-pop 0.16s ease-out;
}
.account-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.10); }
.account-who { min-width: 0; }
.account-name { font-weight: 600; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.account-sub { font-size: 12px; color: var(--fond-encre-3); }
.account-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--fond-encre);
    font: 500 13.5px 'Inter', system-ui, sans-serif;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.account-item:hover, .account-item:focus-visible { background: rgba(255, 255, 255, 0.10); text-decoration: none; outline: none; }
.account-item svg { color: var(--fond-encre-2); flex-shrink: 0; }
.account-sep { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.10); }

/* The preferences dialog: a native <dialog> over a blurred page. It sits in the app bar's markup,
   which gives its subtree white ink, so it takes the page's own tokens back (--page-*, set on the
   root before anything overrides them); and the global margin reset is undone, or it would not centre. */
:root, [data-theme="dark"] {
    --page-text-primary:   var(--text-primary);
    --page-text-secondary: var(--text-secondary);
    --page-text-muted:     var(--text-muted);
    --page-border:         var(--border);
    --page-hover:          var(--bg-glass-hover);
    --page-accent:         var(--accent);
    --page-accent-soft:    var(--accent-soft);
}
.prefs-dialog {
    --text-primary:   var(--page-text-primary);
    --text-secondary: var(--page-text-secondary);
    --text-muted:     var(--page-text-muted);
    --border:         var(--page-border);
    --bg-glass-hover: var(--page-hover);
    --accent:         var(--page-accent);
    --accent-soft:    var(--page-accent-soft);
    position: fixed;
    inset: 0;
    margin: auto;
    height: fit-content;
    width: 440px;
    max-width: calc(100vw - 32px);
    padding: 24px 24px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    color: var(--text-primary);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22), 0 4px 12px rgba(0, 0, 0, 0.08);
}
.prefs-dialog[open] { animation: modal-card-in 0.22s cubic-bezier(0.4, 0, 0.2, 1); }
.prefs-dialog::backdrop { background: rgba(2, 24, 21, 0.40); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.prefs-close { position: absolute; top: 14px; right: 14px; }
.prefs-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.prefs-section .language-switch.full .language-option { border: none; background: transparent; cursor: pointer; font-family: inherit; font-weight: 600; }
.prefs-title { margin: 0 0 18px; font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.prefs-section { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--border); }
.prefs-label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.prefs-label svg { color: var(--accent); }
.prefs-hint { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.prefs-section .language-switch.full { align-self: flex-start; margin: 4px 0 0; padding: 3px; background: var(--bg-tertiary); border-radius: var(--radius-sm); }
.prefs-section .language-switch.full .language-option { padding: 6px 16px; font-size: 13px; letter-spacing: 0; color: var(--text-secondary); }
.prefs-section .language-switch.full .language-option.selected { background: var(--bg-elevated); color: var(--text-primary); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.prefs-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color 0.12s ease, background 0.12s ease;
}
.prefs-row:hover { border-color: var(--accent); background: var(--accent-soft); text-decoration: none; }
.prefs-row > svg { color: var(--text-muted); flex-shrink: 0; }
.prefs-row-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); flex-shrink: 0; }
.prefs-row-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.prefs-row-title { font-weight: 500; font-size: 14px; }

/* ─── Print and high contrast ───
   The tapestry is DECORATIVE: it carries no information, so it is the first thing to go when
   the page has to be read another way. */
@media print {
    body  { background: #fff; }
    .main { margin: 0; box-shadow: none; border-radius: 0; }
}
@media (prefers-contrast: more) {
    body { background-image: none; }
}

/* ─── Starter kit: sign-in, account, Usagers, Rôles, Configuration ─── */
/* The rules of ClientApp-StarterKit/wwwroot/app.css for the screens copied from the kit
   (Connexion, Activation, Compte, Configuration, GestionUsagers, Tiroir, DataTable…), as they are. */
.appbar-badge {
    font-weight: 500; font-size: 9.5px; font-family: inherit;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.6;
}
.appbar-badge.badge-dev { color: #b45309; background: rgba(245, 158, 11, 0.16); }
[data-theme="dark"] .appbar-badge.badge-dev { color: #fbbf24; }
.status-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500; font-size: 11px; font-family: inherit;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
}
.page { display: flex; flex-direction: column; gap: 20px; }
.page-subtitle { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.search-field { position: relative; min-width: 280px; }
.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    display: inline-flex;
    pointer-events: none;
}
.input.search-input { padding-left: 36px; }
.data-table td select.input,
.entry-table tbody td select.input { padding-right: 28px; }
.table-scroll {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: auto;              
    max-height: 640px;
}
.table thead th .th-sort,
.data-table thead th .th-sort {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
}
.table thead th .th-sort:hover,
.data-table thead th .th-sort:hover { color: var(--text-primary); }
.table thead th .th-sort:focus-visible,
.data-table thead th .th-sort:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}
.table thead th:not([aria-sort="none"]) .th-sort,
.data-table thead th:not([aria-sort="none"]) .th-sort { color: var(--text-primary); }
.sort-arrow {
    font-size: 10px;
    line-height: 1;
    opacity: 0.4;
    transition: opacity 0.15s ease, color 0.15s ease;
}
.sort-arrow.is-active {
    opacity: 1;
    color: var(--accent);
}
.tag.tag-success { color: #22c55e; background: rgba(34, 197, 94, 0.14); }
.tag.tag-info { color: #6b7084; background: var(--bg-tertiary); }
.card {
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 18px 20px;
}
@media (max-width: 600px) {
  .search-field { min-width: 0; width: 100%; }
}
.kpi-sub { font-size: 12px; color: var(--text-muted); }
.data-scroll {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: auto;
}
.data-scroll.tall { max-height: calc(100vh - 240px); min-height: 360px; }
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    white-space: nowrap;
}
.data-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-tertiary);
    text-align: center;
    padding: 10px 14px;
    font-weight: 600; font-size: 11px; font-family: inherit;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.data-table tbody td {
    padding: 9px 14px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    text-align: center;
}
.data-table td.cell-action { text-align: right; }
.data-table thead th .th-sort { justify-content: center; }
.data-table tbody tr:hover { background: var(--bg-glass-hover); }
.data-table tfoot td {
    position: sticky;
    bottom: 0;
    background: var(--bg-tertiary);
    padding: 10px 14px;
    font-weight: 600;
    color: var(--text-primary);
    border-top: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.data-table .num { text-align: center; font-variant-numeric: tabular-nums; }
.data-table td.num { font-size: 15px; font-weight: 600; }
.data-table td.cell-comment {
    max-width: 380px;
    white-space: normal;
    overflow-wrap: anywhere;
}
.data-table td .input {
    padding: 5px 8px;
    font-size: 13px;
    color: var(--text-primary);
    width: 100%;
    min-width: 0;
}
.data-table tbody td:has(.input):focus-within,
.entry-table tbody td:has(.input):focus-within {
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 2px var(--accent);
}
.data-table td .input:focus,
.entry-table td .input:focus {
    box-shadow: none;
}
.data-table td.cell-comment .cell-comment-input {
    min-width: 300px;
    field-sizing: content;
    min-height: 2.4em;
    max-height: 16em;
    line-height: 1.45;
    resize: vertical;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    vertical-align: top;
}
.data-table .mono { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 12px; color: var(--text-secondary); }
.data-table .neg { color: #dc2626; }
[data-theme="dark"] .data-table .neg { color: #f87171; }
.data-table td.num.neg, .data-table .kpi-value.neg { color: #dc2626; }
.data-table .pos { color: #16a34a; }
[data-theme="dark"] .data-table .pos { color: #4ade80; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 2px 4px 2px 0;
    padding: 2px 9px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.chip strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.data-table tbody tr.avenant-sub-head td {
    background: var(--bg-tertiary);
    padding-left: 32px;
    font-weight: 600; font-size: 10px; font-family: inherit;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.data-table tbody tr.avenant-sub td { background: var(--bg-glass); }
.data-table tbody tr.avenant-sub td:first-child { padding-left: 32px; }
.data-table tbody tr.avenant-sub:hover { background: transparent; }
.detail-card + .data-scroll { margin-top: 0; }
.data-table-wrap { display: flex; flex-direction: column; gap: 12px; }
.table-filter { min-width: 0; width: 100%; max-width: 380px; }
.table-filter .search-input { padding-right: 70px; }
.table-filter-count {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.data-table .empty-row { text-align: center; color: var(--text-muted); padding: 22px; }
.chip-toggle {
    padding: 4px 12px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-weight: 500; font-size: 12.5px; font-family: inherit;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.chip-toggle:hover { border-color: var(--accent); color: var(--text-primary); }
.chip-toggle.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 4px;
}
.form-grid.tight { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 10px; }
.form-field { display: flex; flex-direction: column; gap: 5px; }
.form-field.span-2 { grid-column: span 2; }
.form-field label { font-weight: 500; font-size: 12px; font-family: inherit; color: var(--text-secondary); }
.form-field .req { color: #dc2626; }
[data-theme="dark"] .form-field .req { color: #f87171; }
.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}
.form-subhead { font-weight: 600; font-size: 12px; font-family: inherit; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin: 18px 0 10px; }
.form-banner {
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    margin-bottom: 14px;
}
.form-banner.success { background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent); }
.form-banner.draft { background: var(--draft-soft); color: var(--draft); border: 1px solid var(--draft); }
.form-banner.error {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.4);
}
[data-theme="dark"] .form-banner.error { color: #f87171; }
.form-hint { color: var(--text-muted); font-size: 13px; margin-bottom: 12px; }
.entry-table .empty-row { text-align: center; color: var(--text-muted); padding: 20px; }
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--radius-full, 999px);
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600; font-size: 12px; font-family: inherit;
}
.pill-ok { background: rgba(34, 197, 94, 0.14);  color: #15803d; }
.pill-warn { background: rgba(234, 179, 8, 0.16);  color: #a16207; }
.config-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
.config-nav {
    display: grid;
    gap: 18px;
    position: sticky;
    top: 76px;                      
}
.config-nav-group { display: grid; gap: 2px; }
.config-nav-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 10px 6px;
}
.config-nav-item {
    appearance: none;
    background: none;
    border: none;
    border-left: 2px solid transparent;
    padding: 8px 12px;
    font: inherit;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--text-secondary);
    text-align: left;
    cursor: pointer;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    transition: color 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}
.config-nav-item:hover { color: var(--text-primary); background: var(--bg-glass-hover); }
.config-nav-item.is-active {
    color: var(--accent);
    border-left-color: var(--accent);
    background: var(--bg-glass-hover);
}
.config-panel { min-width: 0; }
@media (max-width: 900px) {
  .config-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .config-nav {
        position: static;
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        gap: 20px;
        overflow-x: auto;
        padding-bottom: 6px;
        border-bottom: 1px solid var(--border);
    }
  .config-nav-group { grid-auto-flow: column; grid-auto-columns: max-content; gap: 4px; align-items: center; }
  .config-nav-title { padding: 0 6px 0 0; }
  .config-nav-item { border-left: none; border-bottom: 2px solid transparent; border-radius: var(--radius-sm); white-space: nowrap; }
  .config-nav-item.is-active { border-left-color: transparent; border-bottom-color: var(--accent); }
}
.config-check { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.config-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
.acces-ecran .field-label {
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.acces-ecran .text-muted { color: var(--text-muted); font-size: 12.5px; }
.acces-ecran .champ + .champ { margin-top: 12px; }
.acces-ecran .actions-ligne { display: flex; flex-wrap: wrap; gap: 6px; }
.etat-compte { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tiroir-fond {
    position: fixed; inset: 0;
    background: rgba(20, 22, 30, 0.45);
    z-index: 900;
    animation: modal-backdrop-in 0.18s ease-out;
}
.tiroir {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(560px, 100vw);
    display: flex; flex-direction: column;
    background: var(--bg-elevated);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg), -12px 0 40px rgba(0, 0, 0, 0.12);
    z-index: 910;
    animation: tiroir-entree 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.tiroir:focus { outline: none; }
.tiroir-tete {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 20px 24px 14px;
    border-bottom: 1px solid var(--border-subtle);
}
.tiroir-titre { margin: 0; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--text-primary); }
.tiroir-sous-titre { margin: 4px 0 0; font-size: 13px; color: var(--text-muted); }
.tiroir-fermer {
    border: 0; background: none; cursor: pointer;
    color: var(--text-muted); font-size: 16px; line-height: 1;
    padding: 6px; border-radius: var(--radius-sm);
}
.tiroir-fermer:hover { color: var(--text-primary); background: var(--bg-tertiary); }
.tiroir-corps { flex: 1; overflow-y: auto; padding: 18px 24px; }
.tiroir-pied {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 24px;
    border-top: 1px solid var(--border-subtle);
}
@media (prefers-reduced-motion: reduce) {
  .tiroir, .tiroir-fond, .modal-card, .modal-backdrop { animation: none; }
}
.revelation-secret { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; scroll-margin-top: 80px; }
.revelation-secret:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.revelation-tete { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.revelation-tete .text-muted { color: var(--text-muted); font-size: 12px; }
.revelation-valeur { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.revelation-code {
    display: inline-block;
    padding: 6px 10px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 15px;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    user-select: all;
    overflow-wrap: anywhere;
}
.revelation-consigne { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
a.config-nav-item { display: block; text-decoration: none; }
.data-table tbody tr.ligne-cliquable { cursor: pointer; }
.data-table tbody tr.ligne-selectionnee td { background: var(--accent-soft); }
.filtres-acces { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 12px; }
.lien-compte { font-size: 13.5px; font-weight: 600; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.fiche-section + .fiche-section { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-subtle); }
.fiche-titre {
    margin: 0 0 10px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--text-muted);
}
.fiche-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 12px; font-size: 13.5px; }
.fiche-dl dt { color: var(--text-muted); }
.fiche-dl dd { margin: 0; color: var(--text-primary); overflow-wrap: anywhere; }
.fiche-dl code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; }
.fiche-etat { margin-bottom: 10px; }
.fiche-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fiche-actions a.btn-secondary { text-decoration: none; }
.fiche-historique { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 12.5px; color: var(--text-secondary); }
.fiche-historique li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.fiche-historique .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--text-muted); }
@media (max-width: 480px) {
  .fiche-dl { grid-template-columns: 1fr; gap: 2px; }
  .fiche-dl dd { margin-bottom: 8px; }
}
.choix-sorte { display: grid; gap: 8px; }
.choix-sorte-carte {
    display: flex; flex-direction: column; gap: 4px; text-align: left;
    padding: 12px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font: inherit; font-size: 13.5px; color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease;
}
.choix-sorte-carte:hover, .choix-sorte-carte:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.choix-sorte-carte .text-muted { font-size: 12.5px; }
.data-table td.cellule-compte { text-align: left; white-space: normal; min-width: 180px; max-width: 320px; }
.data-table td.cellule-compte .description-compte {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
    font-size: 12.5px;
}
.data-table td.cellule-roles { white-space: normal; max-width: 240px; }
.data-table td.cellule-texte { text-align: left; white-space: normal; min-width: 280px; }
.droit .text-muted { font-size: 12px; }
.usagers-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.lien-compte { padding: 0; border: none; background: none; cursor: pointer; text-align: left; }
.lien-compte code { color: var(--accent); }

/* ─── Fly-through ───
   The dialog reuses the video dialog's stage; the rooms are chips, the route a line under them, and
   the stops a strip of small frames that fill in with photos as they are rendered. In the album the
   flight is the first card, wide, its video playing muted. */
.flight-rooms {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 2px 12px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    max-height: 196px;
    overflow-y: auto;
}
.flight-room {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}
.flight-room:hover { background: var(--accent-soft); }
.flight-room input { width: 15px; height: 15px; margin: 0; accent-color: var(--accent); flex-shrink: 0; }
.flight-room-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flight-room.on-route .flight-room-name { color: var(--text-primary); }
.flight-stop {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.flight-route { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 6px; font-size: 13px; line-height: 1.5; color: var(--text-primary); }
.flight-route svg { flex-shrink: 0; margin-top: 2px; color: var(--accent); }
.flight-dialog .video-options { margin-top: 14px; }
.flight-dialog .field-hint + .modal-actions, .flight-dialog .render-error + .modal-actions { margin-top: 18px; }
.flight-strip { list-style: none; display: flex; gap: 6px; margin: 0 0 14px; padding: 0 0 4px; overflow-x: auto; }
.flight-strip li { flex: 0 0 92px; display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-secondary); }
.flight-strip img { width: 92px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; background: var(--bg-tertiary); display: block; }
.flight-strip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flight-strip li.waiting img { filter: grayscale(1) opacity(0.55); }
.album-flight { grid-column: 1 / -1; }
.album-flight .render-image { aspect-ratio: 21 / 9; max-height: 44vh; width: 100%; }
.album-flight .render-image video, .album-flight .render-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-flight .render-open { position: absolute; inset: 0; background: transparent; border: none; cursor: pointer; }