.ui-icon {
    width: 16px;
    height: 16px;
    flex: none;
}

.banner[hidden] {
    display: none;
}

.banner button {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: 10px 16px;
    background: var(--red);
    color: #fff;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    float: right;
}

.validation-message,
.text-danger {
    color: var(--red) !important;
}

.account-panel {
    max-width: 520px;
    margin: 32px auto;
}

.account-panel .form-control,
.account-panel .form-check-input {
    background: var(--steel);
    border-color: var(--steel);
    color: var(--text);
}

.account-panel .form-floating > label {
    color: var(--muted);
}

.project-tabs {
    height: 34px;
    background: var(--panel);
    border-bottom: 1px solid var(--steel);
    display: flex;
    padding-left: 16px;
}

.project-tabs a {
    border-bottom: 2px solid transparent;
    color: var(--muted);
    padding: 8px 15px 0;
    font-size: 12px;
}

.project-tabs a.active {
    border-color: var(--brass);
    color: var(--brass);
}

.metric-list {
    display: grid;
    gap: 8px;
}

.empty-state {
    padding: 28px;
    text-align: center;
    color: var(--muted);
}

/* Unified FlashFix theme layer: one token system for Blazor pages and Bootstrap-backed forms. */
:root {
    color-scheme: dark;
    /* Make Bootstrap components (e.g. .card sets color:var(--bs-body-color)) follow the FlashFix
       theme instead of Bootstrap's default near-black #212529, which was invisible in dark mode. */
    --bs-body-color: var(--text);
    --bs-body-bg: var(--bg);
    --surface-page: var(--bg);
    --surface-panel: var(--panel);
    --surface-raised: rgba(30, 42, 56, .35);
    --surface-control: var(--steel);
    --surface-hover: color-mix(in srgb, var(--steel), var(--blue) 14%);
    --border: var(--steel);
    --border-soft: color-mix(in srgb, var(--steel), transparent 35%);
    --accent: var(--brass);
    /* Two different jobs, and they were sharing one token. --accent-ink is accent-COLOURED text on a
       normal surface, which is why the light theme darkens it to a readable brass. --on-accent is the
       ink that sits ON a filled brass control; brass is the same colour in both themes, so this stays
       a dark neutral in both. Using --accent-ink for a filled button left brass text on a brass fill
       in light mode (2.2:1) - the button read as one solid blob. */
    --accent-ink: #10151c;
    --on-accent: #10151c;
    --chart-grid: color-mix(in srgb, var(--steel), transparent 8%);
    --chart-primary: var(--blue);
    --score-good: var(--green);
    --score-danger: var(--red);
    --focus-ring: color-mix(in srgb, var(--brass), transparent 82%);
}

:root.light {
    --surface-page: #f4f6f8;
    --surface-panel: #ffffff;
    --surface-raised: #ffffff;
    --surface-control: #f0f4f7;
    --surface-hover: #e9eff4;
    --border: #d6dfe7;
    --border-soft: #e5ebf0;
    --accent-ink: color-mix(in srgb, var(--brass), #000 34%);
    --chart-grid: #dce4eb;
    --chart-primary: #496b8c;
    --focus-ring: color-mix(in srgb, var(--brass), #ffffff 86%);
    /* The accent colours are tuned for the dark theme; darken them for legible text on white. */
    --green: #15803d;
    --orange: #b45309;
    --purple: #7c3aed;
}

/* Light-theme contrast: status badge / accent text on white was too pale. */
.light .status-quoted { color: #0369a1; }
.light .status-progress { color: #a86a12; }
.light .status-survey { color: #6d28d9; }
.light .status-ordered { color: #047857; }
.light .status-lead { color: #1d4ed8; }
.light .status-pending { color: #b45309; }
.light .gold { color: #8a6212; }
.light .tabs button.active,
.light .settings-tabs button.active { color: #8a6212; }
.light .link-button { color: #8a6212; }

/* The TopBar subtitle badge inherited white (invisible on a light background) — make it theme-aware. */
.topbar .sub .badge { color: var(--muted); }

/* Secondary <small> text inside table cells must drop to its own line, not run into the value
   before it (e.g. Reminders "14 Jun 2026" + "14 days overdue" were joining on one line). */
.data-table td small { display: block; margin-top: 2px; }
/* Keep dense action columns from being clipped at the panel edge — let buttons wrap if needed. */
.data-table td.row-actions { flex-wrap: wrap; justify-content: flex-start; gap: 6px; }

html,
body,
#app {
    background: var(--surface-page);
    color: var(--text);
}

body,
.shell,
.main,
.sidebar,
.topbar,
.body,
.card,
.panel,
.rail,
.quote-main,
.quote-side,
.project-list,
.customer-head,
.tabs,
.project-tabs,
.field,
.btn,
.side-action,
.side-user,
.unit-row,
.toggle-row,
.choice,
.finance-option,
.data-table tr,
.account-panel .form-control,
.account-panel .form-check-input {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

.main,
.body,
.quote-main,
.preview,
.tab-body {
    background: var(--surface-page);
}

.card,
.chart-card,
.table-wrap,
.lead-card,
.task {
    background: var(--surface-panel);
    border-color: var(--border);
}

.panel {
    background: var(--surface-raised);
    border-color: var(--border);
}

.field,
.account-panel .form-control,
.account-panel .form-check-input {
    background: var(--surface-control);
    border-color: var(--border);
    color: var(--text);
}

.field:focus,
.account-panel .form-control:focus {
    border-color: var(--brass);
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.account-panel .form-floating > label,
.account-panel .form-check-label,
.account-panel .form-text {
    color: var(--muted);
}

.account-panel .form-floating > .form-control:focus ~ label,
.account-panel .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--muted);
}

.light .account-panel .form-floating > label::after {
    background: transparent;
}

.theme-icon-moon {
    display: none;
}

.light .theme-icon-sun {
    display: none;
}

.light .theme-icon-moon {
    display: block;
}

.accent-preset.active {
    border-color: var(--brass);
    background: color-mix(in srgb, var(--brass), transparent 92%);
}

.light .accent-preset.active {
    background: color-mix(in srgb, var(--brass), #fff 90%);
}

.data-table td,
.data-table th,
.quote-line,
.spec-line,
.timeline-item,
.comm-row {
    border-color: var(--border-soft);
}

.opportunity,
.unit-row,
.toggle-row,
.choice,
.finance-option,
.attachment-row,
.lead-meta > span:last-child,
.comm-badge {
    background: var(--surface-control);
    border-color: var(--border);
}

.opportunity:hover,
.unit-row:hover,
.choice:hover,
.finance-option:hover,
.attachment-row:hover {
    background: var(--surface-hover);
}

.score-bar {
    background: var(--surface-control);
}

.chart text {
    fill: var(--muted);
}

::selection {
    background: color-mix(in srgb, var(--brass), transparent 62%);
    color: var(--text);
}

/* FlashFix Pro authentication template - direct match for the supplied v5 login screen. */
.auth-page-shell {
    min-height: 100vh;
    background: #0f1b3d;
    overflow: hidden;
}

.ff-auth-root {
    display: flex;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    background: #0f1b3d;
    color: #0f1b3d;
    font-family: 'DM Sans', sans-serif;
    overflow: hidden;
}

.ff-auth-left {
    position: relative;
    z-index: 10;
    width: 40%;
    min-width: 340px;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.ff-auth-utility {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px 16px;
    border-bottom: 1px solid #f1f5f9;
}

/* Support alone sits at the left, as it always has. On the steps after the password a back link joins it,
   and the two take opposite ends of the bar. */
.ff-auth-support-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ff-auth-link {
    color: #3b6fa0;
    font-family: 'DM Sans', sans-serif;
    font-size: .72rem;
    letter-spacing: .03em;
    text-decoration: none;
    transition: color .15s ease;
}

.ff-auth-link:hover {
    color: #0f1b3d;
    text-decoration: underline;
}

.ff-auth-support {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.ff-auth-support i {
    font-size: .65rem;
}

.ff-auth-form-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 56px;
    overflow-y: auto;
    scrollbar-width: none;
}

.ff-auth-form-wrapper::-webkit-scrollbar,
.ff-auth-root::-webkit-scrollbar {
    display: none;
}

.ff-auth-logo-block {
    margin-bottom: 32px;
}

.ff-auth-logo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.ff-auth-logo-mark {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ff-auth-logo-mark i {
    font-size: 1.1rem;
}

.ff-auth-logo-mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* The brand mark is the real logo image — kill the letter-block chrome behind it. */
img.logo,
.presentation-brand img.logo {
    background: none;
    border-radius: 0;
    object-fit: contain;
    padding: 1px;
}

.ff-auth-product {
    color: #0f1b3d;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1;
}

.ff-auth-version {
    margin-top: 2px;
    color: #3b6fa0;
    font-family: 'DM Sans', sans-serif;
    font-size: .6rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ff-auth-rhythm {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.ff-auth-rhythm span {
    display: block;
    height: 2px;
    border-radius: 999px;
    background: #3b6fa0;
}

.ff-auth-rhythm span:first-child {
    width: 32px;
    background: #1e3a5f;
}

.ff-auth-rhythm span:nth-child(2) {
    width: 12px;
    opacity: .5;
}

.ff-auth-rhythm span:nth-child(3) {
    width: 6px;
    opacity: .25;
}

.ff-auth-form {
    display: grid;
    gap: 16px;
}

.ff-auth-field-group {
    display: grid;
    gap: 6px;
}

.ff-auth-label {
    display: block;
    margin: 0;
    color: #4a5f7a;
    font-family: 'DM Sans', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ff-auth-label span {
    margin-left: 4px;
    color: #94a3b8;
    font-family: 'DM Sans', sans-serif;
    font-size: .65rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.ff-auth-password-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
}

.ff-auth-forgot {
    font-size: .68rem;
}

.ff-auth-input-wrap {
    position: relative;
}

.ff-auth-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    color: #94a3b8;
    font-size: .75rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.ff-auth-input {
    width: 100%;
    min-height: 41px;
    padding: 10px 12px 10px 32px;
    border: 1.5px solid #c5cfe0;
    border-radius: 4px;
    outline: 0;
    background: #f5f7fb;
    color: #0f1b3d;
    font-family: 'DM Sans', sans-serif;
    font-size: .875rem;
    line-height: 1.25;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.ff-auth-input::placeholder {
    color: #94a3b8;
}

.ff-auth-input:focus {
    border-color: #1e3a5f;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(30, 58, 95, .10);
}

.ff-auth-password-input {
    padding-right: 36px;
}

.ff-auth-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    padding: 0;
    border: 0;
    background: none;
    color: #8a99b0;
    font-size: .75rem;
    cursor: pointer;
    transform: translateY(-50%);
    transition: color .15s ease;
}

.ff-auth-password-toggle:hover {
    color: #1e3a5f;
}

.ff-auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 4px;
}

.ff-auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #475569;
    font-family: 'DM Sans', sans-serif;
    font-size: .75rem;
    cursor: pointer;
}

.ff-auth-checkbox {
    width: 14px;
    height: 14px;
    margin: 0;
    border-radius: 2px;
    accent-color: #1e3a5f;
}

.ff-auth-submit {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    padding: 12px 16px;
    border: 0;
    border-radius: 4px;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f1b3d 100%);
    color: #fff;
    font-family: 'Space Grotesk', sans-serif;
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .04em;
    transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
}

.ff-auth-submit:hover {
    background: linear-gradient(135deg, #3b6fa0 0%, #1e3a5f 100%);
    box-shadow: 0 4px 18px rgba(30, 58, 95, .28);
    transform: translateY(-1px);
}

.ff-auth-submit:active {
    transform: translateY(0);
}

.ff-auth-validation {
    margin: 0;
    color: #dc2626;
    font-family: 'DM Sans', sans-serif;
    font-size: .72rem;
}

.ff-auth-compliance {
    padding: 16px 32px 20px;
    border-top: 1px solid #f1f5f9;
    background: #fff;
}

.ff-auth-compliance-inner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.ff-auth-compliance-icon {
    flex: none;
    margin-top: 2px;
    color: #1e3a5f;
    font-size: .85rem;
}

.ff-auth-compliance-title {
    margin-bottom: 2px;
    color: #0f1b3d;
    font-family: 'Space Grotesk', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ff-auth-compliance p {
    margin: 0;
    color: #8a99b0;
    font-family: 'DM Sans', sans-serif;
    font-size: .68rem;
    line-height: 1.55;
    letter-spacing: .01em;
}

.ff-auth-right {
    position: relative;
    flex: 1;
    width: 60%;
    overflow: hidden;
}

.ff-auth-bg-zoom {
    position: absolute;
    inset: 0;
    animation: ff-auth-zoom-in 8s ease-out forwards;
    will-change: transform;
}

.ff-auth-bg-zoom img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.ff-auth-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(15, 27, 61, .62) 0%, rgba(30, 58, 95, .38) 50%, rgba(10, 18, 40, .72) 100%);
}

.ff-auth-right-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 56px;
}

/* ---- Sign-in: steps after the password, and the passkey route ---- */

/* The second and third screens (authenticator code, recovery code) say what they are asking for. */
.ff-auth-step {
    margin-bottom: 20px;
}

.ff-auth-step-title {
    margin: 0;
    color: #0f1b3d;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

.ff-auth-step-text {
    max-width: 44ch;
    margin: 6px 0 0;
    color: #4a5f7a;
    font-family: 'DM Sans', sans-serif;
    font-size: .82rem;
    line-height: 1.6;
}

.ff-auth-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .72rem;
}

.ff-auth-back i {
    font-size: .6rem;
}

.ff-auth-aside {
    margin: 18px 0 0;
    color: #8a99b0;
    font-family: 'DM Sans', sans-serif;
    font-size: .74rem;
    line-height: 1.6;
}

/* The screens that only have something to tell you - check your email, that link has expired, you are
   locked out. The pane is fixed-light like the rest of the sign-in shell, so these carry their own colours. */
.ff-auth-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid #c5dbf0;
    border-radius: 4px;
    background: #f2f7fc;
    font-family: 'DM Sans', sans-serif;
    font-size: .78rem;
    line-height: 1.55;
}

.ff-auth-note > i {
    margin-top: 2px;
    color: #1e3a5f;
    font-size: .95rem;
}

.ff-auth-note b {
    display: block;
    color: #0f1b3d;
    font-weight: 600;
}

.ff-auth-note span {
    color: #4a5f7a;
}

.ff-auth-note.is-warn {
    border-color: #e8cfa3;
    background: #fdf7ec;
}

.ff-auth-note.is-warn > i {
    color: #a16207;
}

/* A link that has to read as the page's one action (Go to sign in, Send a new link). */
a.ff-auth-submit {
    margin-top: 18px;
    text-decoration: none;
}

/* ---- Organisation signup ---- */
/* Twelve fields will not sit in the 40% pane the sign-in form uses, so that pane widens for this one
   page and the fields pair up inside it. Everything else about the shell is unchanged. */
.ff-auth-left.is-wide {
    width: 56%;
    min-width: 380px;
}

.ff-signup {
    gap: 22px;
}

.ff-signup-section {
    display: grid;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid #eef2f7;
}

.ff-signup-section:first-of-type {
    padding-top: 0;
    border-top: 0;
}

.ff-signup-legend {
    margin: 0;
    color: #0f1b3d;
    font-family: 'Space Grotesk', sans-serif;
    font-size: .95rem;
    font-weight: 600;
}

.ff-signup-hint {
    max-width: 62ch;
    margin: -4px 0 0;
    color: #8a99b0;
    font-family: 'DM Sans', sans-serif;
    font-size: .74rem;
    line-height: 1.55;
}

.ff-signup-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}

.ff-signup-span {
    grid-column: 1 / -1;
}

/* The three coordinate fields and the status. Off-screen rather than display:none so a value written by
   script is still submitted, and never focusable. */
.ff-signup-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.ff-signup-geo {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.ff-signup-geo-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 40px;
    padding: 9px 16px;
    border: 1.5px solid #c5cfe0;
    border-radius: 4px;
    background: #fff;
    color: #1e3a5f;
    font-family: 'Space Grotesk', sans-serif;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}

.ff-signup-geo-btn:hover:not(:disabled) {
    border-color: #1e3a5f;
    background: #f5f7fb;
}

.ff-signup-geo-btn:disabled {
    opacity: .6;
    cursor: progress;
}

.ff-signup-geo-skip {
    border: 0;
    background: none;
    font-size: .74rem;
    cursor: pointer;
}

.ff-signup-geo-state {
    flex-basis: 100%;
    margin: 0;
    color: #8a99b0;
    font-family: 'DM Sans', sans-serif;
    font-size: .74rem;
}

.ff-signup-geo-state.is-ok { color: #15803d; }
.ff-signup-geo-state.is-warn { color: #a16207; }

.ff-signup-terms {
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}

.ff-signup-terms .ff-auth-checkbox {
    margin-top: 2px;
}

.ff-auth-submit:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* The signup form is long; its pane scrolls rather than centring and pushing the fields off screen. */
.ff-auth-left.is-wide .ff-auth-form-wrapper {
    justify-content: flex-start;
    padding-top: 28px;
    padding-bottom: 28px;
}

@media (max-width: 980px) {
    .ff-signup-grid { grid-template-columns: minmax(0, 1fr); }
    .ff-auth-left.is-wide { width: 100%; }
}

/* One code, spaced out and centred: it is copied off a phone screen digit by digit. */
.ff-auth-otp {
    padding-left: 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.3rem;
    letter-spacing: .34em;
    text-align: center;
}

.ff-auth-otp::placeholder {
    letter-spacing: .24em;
}

.ff-auth-mono {
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: .04em;
}

/* "or", with a rule running through it. */
.ff-auth-alt {
    display: grid;
    gap: 12px;
    justify-items: center;
    margin-top: 4px;
}

.ff-auth-alt-rule {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    color: #94a3b8;
    font-family: 'DM Sans', sans-serif;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.ff-auth-alt-rule::before,
.ff-auth-alt-rule::after {
    content: "";
    height: 1px;
    background: #e2e8f0;
}

.ff-auth-passkey {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    border: 1.5px solid #c5cfe0;
    border-radius: 4px;
    background: #fff;
    color: #1e3a5f;
    font-family: 'Space Grotesk', sans-serif;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.ff-auth-passkey i {
    font-size: 1rem;
}

.ff-auth-passkey:hover {
    border-color: #1e3a5f;
    background: #f5f7fb;
    box-shadow: 0 2px 12px rgba(30, 58, 95, .12);
}

/* While the Face ID / Hello sheet is up the page can do nothing else, and saying so beats a dead button. */
.ff-auth-passkey[data-busy] {
    opacity: .7;
    cursor: progress;
}

.ff-auth-alt-hint {
    color: #8a99b0;
    font-family: 'DM Sans', sans-serif;
    font-size: .7rem;
}

@keyframes ff-auth-zoom-in {
    from { transform: scale(1.08); }
    to { transform: scale(1); }
}

@media (max-width: 1280px) {
    .ff-auth-form-wrapper {
        padding-right: 40px;
        padding-left: 40px;
    }
}

@media (max-width: 768px) {
    .ff-auth-right {
        display: none;
    }

    .ff-auth-left {
        width: 100%;
        min-width: 0;
    }

    .ff-auth-root {
        min-height: 100vh;
        overflow-y: auto;
    }

    .ff-auth-form-wrapper {
        padding: 32px 28px;
    }

    .ff-auth-utility,
    .ff-auth-compliance {
        padding-right: 28px;
        padding-left: 28px;
    }
}

/* Working CRM, Projects, Calendar and Settings refinements. */
.crm-register-grid { grid-template-columns: 1.2fr .8fr; }
.small-copy { font-size: 9px; }
.calendar-booking-panel { margin-bottom: 12px; }
.calendar-header-row { min-height: 40px; }
.schedule-title { border: 0; }
.calendar-day-number { text-align: right; }
.calendar-appt-meta { margin-top: 5px; }
/* Several slots in the same hour wrap rather than run off the row. */
.appt-space { flex-wrap: wrap; }
/* Appointment card: time + status on top, title, details, then who is going and the one main action. Everything
   else (reschedule, open lead/order, cancel) lives in the ⋯ menu so the card is not a wall of buttons. */
.appt { position: relative; border-radius: 6px; }
.appt-compact { width: auto; margin-top: 8px; padding: 6px; border-left-width: 3px; }
.appt-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding-right: 26px; min-height: 22px; }
.appt-time { font-weight: 700; color: var(--text); letter-spacing: .01em; }
.appt-title { display: block; margin-top: 6px; font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
.appt-compact .appt-title { margin-top: 4px; font-size: 11px; }
/* Solid backing: the badges' 8% tints vanish on the tinted type colours. */
.appt-top .badge { background: var(--panel); }
.appt-top .badge.status-lead { color: #93b4d6; }
.appt-top .badge.status-closed { color: var(--text); }
.light .appt-top .badge { background: #fff; }
.light .appt-top .badge.status-lead { color: #2f5578; }
.light .appt-top .badge.status-closed { color: #475569; }
.appt-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--text), transparent 88%); display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.appt-compact .appt-foot { margin-top: 6px; padding-top: 5px; min-height: 0; }
.appt-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.appt-who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appt-initials { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 9px; font-weight: 700; letter-spacing: .02em; color: var(--text); background: color-mix(in srgb, var(--appt-edge, var(--brass)), transparent 55%); }
.appt-compact .appt-initials { width: 16px; height: 16px; font-size: 8px; }
.appt-complete { flex: none; height: 26px; padding: 0 10px 0 8px; display: inline-flex; align-items: center; gap: 5px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--appt-edge, var(--brass)), transparent 35%); background: var(--panel); color: var(--text); font-size: 11px; font-weight: 600; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.appt-complete .ui-icon { width: 13px; height: 13px; color: var(--green); }
.appt-complete:hover:not(:disabled) { background: color-mix(in srgb, var(--appt-edge, var(--brass)), var(--panel) 78%); border-color: var(--appt-edge, var(--brass)); }
.appt-complete:disabled { opacity: .55; cursor: default; }
.light .appt-complete { background: #fff; }
.light .appt-complete .ui-icon { color: #047857; }
.appt-more-wrap { position: absolute; top: 6px; right: 6px; }
.appt-compact .appt-more-wrap { top: 4px; right: 3px; }
.appt-more { width: 24px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--text); opacity: .75; cursor: pointer; }
.appt-more .ui-icon { width: 16px; height: 16px; }
.appt-more .ui-icon circle { fill: currentColor; }
.appt-more:hover:not(:disabled), .appt-more[aria-expanded="true"] { opacity: 1; background: color-mix(in srgb, var(--text), transparent 86%); }
.appt-complete:focus-visible, .appt-more:focus-visible, .appt-menu > :focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.appt-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 2; min-width: 184px; padding: 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); box-shadow: 0 12px 30px rgba(0, 0, 0, .38); animation: appt-menu-in .12s ease-out; }
.light .appt-menu { background: #fff; box-shadow: 0 12px 30px rgba(30, 42, 56, .18); }
.appt-menu > button, .appt-menu > a { width: 100%; height: 32px; padding: 0 10px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font-size: 12px; text-align: left; text-decoration: none; white-space: nowrap; cursor: pointer; }
.appt-menu .ui-icon { width: 14px; height: 14px; color: var(--muted); flex: none; }
.appt-menu > button:hover, .appt-menu > a:hover { background: var(--surface-hover); }
.appt-menu .appt-menu-danger, .appt-menu .appt-menu-danger .ui-icon { color: var(--red); }
.appt-menu .appt-menu-danger:hover { background: color-mix(in srgb, var(--red), transparent 88%); }
.appt-menu-sep { height: 1px; margin: 4px 6px; background: var(--border); }
/* The open card rises above its neighbours; the scrim behind it catches the click that closes the menu. */
.appt.appt-menu-open { z-index: 31; }
.appt-menu-scrim { position: fixed; inset: 0; z-index: 30; }
@keyframes appt-menu-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .appt-menu { animation: none; } }
/* Status never relies on colour alone: the badge says it, completed cards add the outcome line, cancelled cards
   strike the title through. */
.calendar-appt-outcome { margin-top: 5px; display: flex; align-items: center; gap: 4px; font-weight: 600; color: var(--green); overflow-wrap: anywhere; }
.calendar-appt-outcome .ui-icon { width: 12px; height: 12px; flex: none; }
.light .calendar-appt-outcome { color: #047857; }
.appt-cancelled .appt-title { text-decoration: line-through; }
.appt.appt-cancelled { border-left-style: dashed; }
/* Appointment type colours. Each type tints its card and colours its edge so a busy diary reads at a glance;
   the type is still written on the card, so colour is never the only cue. Unrecognised types keep the plain
   steel card with the brass edge. Hues follow the status badges (survey violet, sales sky, install green). */
.appt-tone-sales { --appt-tone: #38bdf8; }
.appt-tone-survey { --appt-tone: #a78bfa; }
.appt-tone-install { --appt-tone: #34d399; }
.appt-tone-remedial { --appt-tone: #fb7185; }
.appt-tone-service { --appt-tone: #f59e0b; }
.appt-tone-planning { --appt-tone: #a3e635; }
.appt-tone { --appt-fill: color-mix(in srgb, var(--appt-tone) 22%, var(--steel)); --appt-edge: var(--appt-tone); }
/* The bright hues wash out on white: a lighter tint keeps the cards calm and a darkened edge keeps them apart. */
.light .appt-tone { --appt-fill: color-mix(in srgb, var(--appt-tone) 18%, #ffffff); --appt-edge: color-mix(in srgb, var(--appt-tone), #000 35%); }
.appt.appt-tone { background: var(--appt-fill); border-left-color: var(--appt-edge); }
/* A tinted card drops the grey meta line under 4.5:1, so toned cards soften the body text instead. */
.appt.appt-tone .muted { color: color-mix(in srgb, var(--text) 85%, transparent); }
.appt-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 10px; color: var(--muted); font-size: calc(11px * var(--text-scale, 1)); }
.appt-key-item { display: inline-flex; align-items: center; gap: 6px; }
.appt-key-swatch { width: 14px; height: 10px; background: var(--appt-fill); border-left: 3px solid var(--appt-edge); }
.project-item-status, .project-item-activity { float: right; }
.project-product-card, .project-edit-panel { margin-top: 12px; }
.project-next-action { border-color: color-mix(in srgb, var(--brass), transparent 65%); background: color-mix(in srgb, var(--brass), transparent 90%); }
.project-action-row { margin-top: 8px; }
.event-main { min-width: 0; padding: 6px 0; }
.event-detail { color: var(--muted); font-size: 11px; margin-top: 1px; overflow-wrap: anywhere; }
/* A row carrying a map is far taller than a text one; centring would float its dot and time against
   the middle of the thumbnail instead of lining them up with the label they belong to. */
.event-row.has-map { align-items: start; }
.event-row.has-map .event-dot, .event-row.has-map .event-time { margin-top: 6px; }
.event-time { text-align: right; padding-right: 2px; }
.proj-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 14px; margin-top: 5px; }
.proj-meta-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 400; min-width: 0; }
.proj-meta-item .ui-icon { width: 13px; height: 13px; color: var(--brass); }
.proj-meta-item > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-meta-link { text-decoration: none; }
.proj-meta-link:hover { color: var(--text); }
.proj-postcode { margin-left: 2px; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .4px; color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 88%); border: 1px solid color-mix(in srgb, var(--brass), transparent 65%); border-radius: 5px; padding: 1px 6px; }.settings-locked { max-width: 620px; }
.settings-tabs button.active { border-color: var(--brass); color: var(--brass); }
@media(max-width:720px){.crm-register-grid{grid-template-columns:1fr}.calendar-head{gap:8px;flex-wrap:wrap}.calendar-grid{overflow:auto}.project-layout{display:block}.project-list{display:block;width:auto;max-height:260px}.customer-stats{display:grid;grid-template-columns:repeat(2,1fr)}}

/* CRUD drawers, confirmation modals and operational page refinements. */
.drawer-backdrop,
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, #000, transparent 42%);
    backdrop-filter: blur(8px);
    z-index: 80;
}

.app-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(520px, calc(100vw - 18px));
    z-index: 90;
    background: var(--surface-panel);
    border-left: 1px solid var(--border);
    box-shadow: -22px 0 48px rgba(0,0,0,.28);
    padding: 20px;
    overflow: auto;
}

.drawer-head,
.drawer-actions,
.row-actions,
.inline-actions,
.calendar-toolbar,
.lead-footer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.drawer-head,
.drawer-actions {
    justify-content: space-between;
}

.drawer-head {
    margin-bottom: 18px;
}

.drawer-head small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
}

.drawer-actions {
    margin-top: 18px;
    justify-content: flex-end;
}

.icon-button,
.link-button {
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
}

.icon-button {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.link-button {
    color: var(--brass);
    font-weight: 700;
}

.form-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-wide {
    grid-column: 1 / -1;
}

/* The page's animated .main creates a stacking context, trapping any drawer/modal z-index
   beneath the floating mobile nav toggle (z-index 75). While an overlay is open the toggle is
   pointless — the backdrop already covers the sidebar — so hide it to stop it painting over the
   overlay header on mobile. Fixes every drawer/modal on the page. */
body:has(.drawer-backdrop, .modal-backdrop) .mobile-nav-toggle {
    display: none;
}

.lead-head-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.lead-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: color .18s, border-color .18s, background-color .18s;
}

.lead-view-btn:hover {
    color: var(--brass);
    border-color: var(--brass);
    background: color-mix(in srgb, var(--brass), transparent 92%);
}

.lead-view-btn .ui-icon {
    width: 13px;
    height: 13px;
}

.detail-drawer {
    width: min(560px, calc(100vw - 18px));
    display: flex;
    flex-direction: column;
}

.detail-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.detail-tabs button {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.detail-tabs button.active {
    color: var(--brass);
    border-bottom-color: var(--brass);
}

.detail-readonly {
    margin: 16px 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-raised);
    display: grid;
    gap: 8px;
}

.detail-timeline {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-left: 4px;
}

.dt-row {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    gap: 12px;
    position: relative;
    padding-bottom: 16px;
}

.dt-row:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 14px;
    bottom: 0;
    width: 1px;
    background: var(--border);
}

.dt-dot {
    width: 11px;
    height: 11px;
    margin-top: 3px;
    border-radius: 50%;
    border: 2px solid var(--brass);
    background: var(--surface-panel);
    z-index: 1;
}

.dt-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

.dt-detail {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}

.dt-when {
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--brass);
    margin-top: 4px;
    font-family: 'JetBrains Mono', monospace;
}

.detail-appointments {
    margin-top: 14px;
}

.detail-drawer .form-section + .form-section,
.detail-drawer .detail-readonly {
    margin-top: 18px;
}

.detail-lead-meta {
    margin-top: 14px;
}

.detail-recorded-interest {
    margin: 10px 0 0;
}

.detail-recorded-interest span {
    opacity: .7;
}

.detail-appointments .unit-row > span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.detail-appointments .unit-row small {
    color: var(--muted);
}

.confirm-modal {
    width: min(420px, calc(100vw - 28px));
    margin: 16vh auto 0;
    background: var(--surface-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 18px 45px rgba(0,0,0,.32);
}

/* A confirmation that has to show a list rather than ask a single question. Capped and scrollable: an
   account with two years behind it can name a dozen kinds of record, and the buttons must stay reachable. */
.confirm-modal.is-wide {
    width: min(560px, calc(100vw - 28px));
    max-height: 78vh;
    margin-top: 10vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.delete-links {
    margin: 14px 0 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-control), transparent 55%);
}
.delete-links .section-title { margin: 0 0 8px; }
.delete-links ul { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.delete-links li { display: flex; align-items: baseline; gap: 10px; color: var(--text); font-size: 12.5px; line-height: 1.45; }
/* Tabular numerals in a fixed gutter so the counts line up as a column and read as a total. */
.delete-links li b { min-width: 3.5ch; color: var(--brass); text-align: right; font-variant-numeric: tabular-nums; }
.delete-links .form-group { margin: 12px 0 0; }
.delete-links small { display: block; margin-top: 8px; }
.light .delete-links { background: #f8fafb; }

.btn.danger {
    border-color: color-mix(in srgb, #ef4444, transparent 45%);
    background: #ef4444;
    color: #fff;
}

.support-ticket-button {
    width: 100%;
    border: 0;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.calendar-toolbar {
    justify-content: flex-end;
    flex-wrap: wrap;
    padding-right: 8px;
    border-right: 1px solid var(--border);
}

.calendar-current-date {
    min-width: 92px;
    text-align: center;
}

.lead-footer-actions {
    justify-content: space-between;
}

.lead-footer-actions .btn {
    min-height: 32px;
}

.tenant-admin-grid,
.inventory-admin-grid {
    grid-template-columns: 1.25fr .75fr;
}

@media(max-width: 820px) {
    .tenant-admin-grid,
    .inventory-admin-grid,
    .form-grid.two {
        grid-template-columns: 1fr;
    }

    .calendar-toolbar {
        width: 100%;
        justify-content: flex-start;
        border-right: 0;
        padding-right: 0;
    }

    .lead-footer-actions {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Dark table readability and loading states. */
.data-table,
.data-table td,
.data-table th {
    color: var(--text);
}

.data-table tbody tr {
    background: color-mix(in srgb, var(--surface-panel), transparent 6%);
}

.data-table tbody tr:hover {
    background: color-mix(in srgb, var(--brass), transparent 90%);
}

.light .data-table,
.light .data-table td,
.light .data-table th {
    color: var(--ink);
}

button:disabled,
.btn:disabled {
    opacity: .62;
    cursor: not-allowed;
}

.loading-dot {
    width: 14px;
    height: 14px;
    display: inline-block;
    margin-right: 8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    vertical-align: -2px;
}

@keyframes spin { to { transform: rotate(360deg); } }

.service-catalogue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.service-item-card {
    overflow: hidden;
    padding: 0;
}

.service-photo {
    height: 150px;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid var(--border);
}

.service-card-body {
    padding: 14px;
}

.service-taxonomy-grid {
    grid-template-columns: 1fr 1fr;
}

.status-panel {
    margin-bottom: 12px;
    border-color: color-mix(in srgb, var(--brass), transparent 64%);
}

/* Settings > Compliance > Cooling-off period: the number, then the exact words the customer gets. */
.settings-grid .field.cooling-off-days { width: 120px; }
.cooling-off-summary { margin: 0 0 12px; color: var(--text); font-size: 13px; font-weight: 600; }
.cooling-off-quote { margin: 0; padding: 9px 12px; border-left: 3px solid var(--brass); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--brass), transparent 92%); color: var(--text); font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.cooling-off-pointer { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.cooling-off-pointer b { font-size: 13px; }

@media(max-width: 820px) {
    .service-taxonomy-grid { grid-template-columns: 1fr; }
}

/* Service Catalogue drill-down: Category › Subcategory › Items */
.catalogue-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 12px;
    margin-bottom: 16px;
    align-items: start;
}

.catalogue-col {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 68vh;
    overflow: hidden;
}

.catalogue-col-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.catalogue-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, padding .18s ease;
}

.catalogue-row:hover { background: var(--surface-hover); }

.catalogue-row.active {
    background: var(--surface-control);
    border-left: 3px solid var(--brass);
    padding-left: 10px;
}

.catalogue-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.catalogue-row-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.catalogue-row-main small { font-size: 9px; }

.catalogue-row-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
    gap: 6px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .2s ease, opacity .18s ease;
}

.catalogue-row:hover .catalogue-row-actions,
.catalogue-row.active .catalogue-row-actions {
    max-height: 40px;
    opacity: 1;
}

.btn-mini { height: 24px; padding: 0 9px; font-size: 11px; }

.tenant-console-columns {
    grid-template-columns: minmax(300px, .85fr) minmax(0, 1.65fr);
}

.tenant-list-col,
.tenant-workspace-col {
    max-height: calc(100vh - 150px);
}

.tenant-filters,
.tenant-panel-toolbar {
    display: grid;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid var(--border-soft);
}

.tenant-panel-toolbar {
    grid-template-columns: minmax(180px, 1fr) auto;
    align-items: center;
}

.tenant-user-toolbar {
    grid-template-columns: minmax(180px, 1fr) minmax(130px, .55fr) minmax(130px, .55fr) auto;
}

.tenant-subscription-toolbar {
    grid-template-columns: minmax(130px, .35fr) minmax(160px, .55fr) auto;
}

.tenant-row-actions {
    flex-wrap: wrap;
}

.tenant-workspace-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-soft);
}

.tenant-active-subscription {
    min-width: 180px;
    display: grid;
    gap: 2px;
    text-align: right;
}

.tenant-workspace-actions {
    display: flex;
    gap: 8px;
    flex: none;
}

.tenant-row-end {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
}

.tenant-row-chevron {
    display: inline-flex;
    color: var(--muted);
    opacity: .45;
    transition: transform .16s ease, opacity .16s ease, color .16s ease;
}

.tenant-row-chevron svg {
    width: 16px;
    height: 16px;
}

.tenant-row:hover .tenant-row-chevron,
.tenant-row.active .tenant-row-chevron {
    opacity: 1;
    color: var(--brass);
    transform: translateX(2px);
}

.tenant-usage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-soft);
}

.usage-metric {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-raised);
}

.usage-metric-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.usage-metric-head span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--muted);
}

.usage-metric-head span svg {
    width: 13px;
    height: 13px;
}

.usage-metric-head b {
    font-size: 15px;
    font-family: 'JetBrains Mono', monospace;
}

.usage-bar {
    height: 5px;
    border-radius: 3px;
    background: var(--surface-control);
    overflow: hidden;
}

.usage-bar span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--brass);
    transition: width .3s ease;
}

.usage-foot {
    font-size: 9px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.usage-metric.over {
    border-color: var(--red);
}

.usage-metric.over .usage-bar span {
    background: var(--red);
}

.usage-metric.over .usage-foot {
    color: var(--red);
}

.tenant-panel-tabs {
    margin: 0;
    height: auto;
    padding: 0 12px;
    border-bottom: 1px solid var(--border-soft);
}

.tenant-panel-tabs button {
    padding: 11px 13px;
}

.tenant-detail-list {
    display: grid;
    gap: 0;
    max-height: calc(100vh - 330px);
    overflow: auto;
}

.tenant-detail-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 13px 16px;
    border-bottom: 1px solid var(--border-soft);
}

.tenant-detail-row:hover {
    background: var(--surface-hover);
}

.tenant-detail-row small {
    display: block;
    margin-top: 3px;
}

.tenant-subscription-summary {
    padding: 12px;
    border-bottom: 1px solid var(--border-soft);
}

.tenant-history-title {
    padding: 12px 16px;
    margin: 0;
}

.catalogue-item-row {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 12px;
    padding: 12px 13px;
    border-bottom: 1px solid var(--border-soft);
}

.catalogue-item-photo {
    width: 64px;
    height: 64px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--border);
}

.catalogue-item-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.catalogue-item-desc { margin: 2px 0; font-size: 11px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.catalogue-item-meta { font-size: 9px; }
.catalogue-item-body .row-actions { margin-top: 4px; gap: 6px; }

.catalogue-empty { padding: 18px 14px; font-size: 12px; line-height: 1.5; }

.tenant-picker { display: inline-flex; align-items: center; gap: 8px; }
.tenant-picker .label { margin-bottom: 0; white-space: nowrap; }
.tenant-picker .field { min-width: 180px; }
.settings-tenant-picker { margin-bottom: 0; }
/* Sits above both the home screen and a category, because which organisation is being edited applies
   to everything below it. */
.settings-tenant-bar { padding: 12px 20px 0; display: flex; justify-content: flex-end; }

@media(max-width: 980px) {
    .catalogue-columns { grid-template-columns: 1fr; }
    .catalogue-col { max-height: none; }
    .catalogue-col-list { max-height: 340px; }
    .tenant-console-columns { grid-template-columns: 1fr; }
    .tenant-list-col,
    .tenant-workspace-col,
    .tenant-detail-list { max-height: none; }
    .tenant-panel-toolbar,
    .tenant-user-toolbar,
    .tenant-subscription-toolbar { grid-template-columns: 1fr; }
    .tenant-workspace-head { flex-direction: column; }
    .tenant-active-subscription { text-align: left; }
    .tenant-detail-row { grid-template-columns: 1fr; }
}

/* ============================================================
   Customer Service & Operations Desk (Support module)
   ============================================================ */

/* Shared atoms */
.ta-right { text-align: right; }
.red-text { color: var(--red); }
.status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 7px; vertical-align: middle; background: var(--muted); }
.status-dot.dot-open { background: var(--orange); }
.status-dot.dot-customer { background: var(--blue); }
.status-dot.dot-internal { background: var(--purple); }
.status-dot.dot-resolved { background: var(--green); }
.status-dot.dot-closed { background: var(--muted); }

.badge.prio-urgent { color: var(--red); background: color-mix(in srgb, var(--red), transparent 88%); }
.badge.prio-high { color: var(--orange); background: color-mix(in srgb, var(--orange), transparent 88%); }
.badge.prio-normal { color: var(--blue); background: color-mix(in srgb, var(--blue), transparent 86%); }
.badge.prio-low { color: var(--muted); background: color-mix(in srgb, var(--muted), transparent 88%); }

.case-avatar { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-control); color: var(--text); font: 700 10px 'JetBrains Mono', monospace; margin-right: 7px; flex: none; }
.case-avatar.lg { width: 32px; height: 32px; font-size: 13px; margin: 0; }
.case-avatar.xl { width: 44px; height: 44px; font-size: 16px; margin: 0; border-radius: 12px; }

/* Main queue: KPI + filter tray + table */
.support-kpi { margin-bottom: 14px; }
.support-filter-tray { display: flex; align-items: center; gap: 12px; padding: 8px; margin-bottom: 14px; }
.support-filter-tray .support-search { flex: 1; }
.support-filter-tray .support-search .field { width: 100%; }
.support-filter-controls { display: flex; align-items: center; gap: 8px; }
.support-filter-controls .field { height: 30px; }
.support-toggle-stagnant { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.support-table td { vertical-align: middle; }
.support-stagnant { border-left: 3px solid var(--red); animation: support-pulse 2s infinite; }
@keyframes support-pulse { 0%,100% { border-left-color: var(--red); } 50% { border-left-color: color-mix(in srgb, var(--red), transparent 60%); } }

/* Generate Ticket modal */
.form-modal {
    position: fixed;
    left: 50%; top: 8vh;
    transform: translateX(-50%);
    width: min(680px, calc(100vw - 28px));
    max-height: 84vh;
    overflow: auto;
    z-index: 90;
    background: var(--surface-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 24px 60px rgba(0,0,0,.34);
}

/* ---------- Case details workspace ---------- */
.case-header { height: 64px; flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 20px; background: var(--surface-panel); border-bottom: 1px solid var(--border); }
.case-header-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.case-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.case-title-row h1 { margin: 0; font-size: calc(16px * var(--text-scale, 1)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-id-badge { font-size: 12px; font-weight: 700; color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 86%); padding: 2px 8px; border-radius: 4px; }
.case-breadcrumb { display: flex; align-items: center; gap: 7px; margin-top: 4px; font: 700 9px 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.case-breadcrumb i { font-style: normal; opacity: .5; }
.case-header-right { display: flex; align-items: center; gap: 14px; }
.case-status-pill { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: 9999px; font-size: 11px; font-weight: 700; border: 1px solid currentColor; }
.case-status-pill.pill-amber { color: var(--orange); background: color-mix(in srgb, var(--orange), transparent 90%); }
.case-status-pill.pill-green { color: var(--green); background: color-mix(in srgb, var(--green), transparent 90%); }
.case-status-pill.pill-purple { color: var(--purple); background: color-mix(in srgb, var(--purple), transparent 90%); }
.case-status-pill.pill-blue { color: var(--blue); background: color-mix(in srgb, var(--blue), transparent 88%); }
.case-status-pill.pill-grey { color: var(--muted); background: color-mix(in srgb, var(--muted), transparent 90%); }

.case-workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: 280px minmax(0, 1fr) 320px; overflow: hidden; }
.case-dossier, .case-controls { background: var(--surface-panel); overflow-y: auto; }
.case-dossier { border-right: 1px solid var(--border); }
.case-controls { border-left: 1px solid var(--border); }
.case-section { padding: 18px; border-bottom: 1px solid var(--border-soft); }
.dossier-customer { display: flex; align-items: center; gap: 12px; margin: 10px 0 14px; }
.dossier-customer b { display: block; font-size: 14px; }
.dossier-contact { display: flex; flex-direction: column; gap: 9px; }
.dossier-contact > div { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.dossier-contact svg { width: 14px; height: 14px; flex: none; }
.dossier-head { display: flex; align-items: center; justify-content: space-between; }
.dossier-record { display: flex; align-items: center; gap: 8px; padding: 10px; margin-top: 8px; border: 1px solid var(--border); border-radius: 8px; transition: border-color .18s ease, background-color .18s ease; }
.dossier-record:hover { border-color: var(--brass); background: var(--surface-hover); }
.dossier-record > div { flex: 1; min-width: 0; }
.dossier-record b { display: block; font-size: 12px; }
.dossier-record small { display: block; }
.dossier-record svg { width: 14px; height: 14px; color: var(--muted); flex: none; }

/* Center thread */
.case-thread { display: flex; flex-direction: column; min-height: 0; background: var(--surface-page); }
.case-thread-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 26px 28px; }
.thread-empty { padding: 40px; text-align: center; }
.thread-system { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 auto 22px; width: fit-content; max-width: 90%; text-align: center; font-size: 11px; color: var(--muted); background: var(--surface-control); border-radius: 9999px; padding: 5px 14px; }
.thread-system svg { width: 13px; height: 13px; flex: none; }
.thread-row { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 22px; }
.thread-row.mine { flex-direction: row-reverse; }
.thread-row .case-avatar { margin: 0; }
.message-bubble { max-width: 78%; border-radius: 12px; padding: 12px 14px; transition: transform .2s ease; }
.message-bubble:hover { transform: translateY(-1px); }
.message-bubble p { margin: 6px 0 0; font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
.bubble-head { display: flex; align-items: center; gap: 8px; }
.bubble-author { font-size: 12px; font-weight: 700; }
.bubble-time { margin-left: auto; font-size: 10px; }
.message-bubble.customer-msg { background: var(--surface-panel); border: 1px solid var(--border); }
.message-bubble.agent-reply { background: linear-gradient(135deg, var(--brass), color-mix(in srgb, var(--brass), #000 22%)); color: var(--on-accent); }
.message-bubble.agent-reply .bubble-time { color: color-mix(in srgb, var(--on-accent), transparent 30%); }
.message-bubble.internal-note { background: color-mix(in srgb, var(--orange), transparent 86%); border: 1px dashed color-mix(in srgb, var(--orange), transparent 40%); }
.badge.internal-tag { color: var(--orange); border-color: currentColor; font-size: 8px; padding: 1px 5px; }

/* Reply zone */
.case-reply { flex: none; padding: 16px 28px; background: var(--surface-panel); border-top: 1px solid var(--border); }
.reply-toggle-row { display: flex; gap: 16px; margin-bottom: 10px; }
.reply-toggle { border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; padding: 0 0 5px; border-bottom: 2px solid transparent; }
.reply-toggle.active { color: var(--brass); border-color: var(--brass); }
.reply-input { width: 100%; resize: vertical; }
.reply-input.internal { background: color-mix(in srgb, var(--orange), transparent 90%); border-color: color-mix(in srgb, var(--orange), transparent 55%); }
.reply-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 12px; }

/* Right controls */
.control-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.control-card { padding: 12px; }
.control-card b { display: block; font: 700 14px 'JetBrains Mono', monospace; margin-top: 4px; }
.sla-bar { width: 100%; height: 4px; border-radius: 4px; background: var(--surface-control); margin-top: 8px; overflow: hidden; }
.sla-bar i { display: block; height: 100%; border-radius: 4px; }
.sla-bar i.bar-green { background: var(--green); }
.sla-bar i.bar-red { background: var(--red); }
.control-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 9px 0; font-size: 12px; }
.control-row > span { color: var(--muted); }
.field.compact { height: 28px; padding: 0 8px; max-width: 160px; }
.case-actions { display: flex; flex-direction: column; gap: 10px; border-bottom: 0; }
.case-actions .btn { width: 100%; }

/* File attachments */
.attachments { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.attachment-row { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; transition: border-color .18s ease, background-color .18s ease; }
.attachment-row:hover { border-color: var(--brass); background: var(--surface-hover); }
.attachment-thumb { width: 38px; height: 38px; flex: none; border-radius: 6px; background-size: cover; background-position: center; border: 1px solid var(--border); }
.attachment-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 6px; background: var(--surface-control); color: var(--muted); }
.attachment-icon svg { width: 16px; height: 16px; }
.attachment-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.attachment-name { font-size: 12px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-name:hover { color: var(--brass); }
.attachment-delete { width: 26px; height: 26px; flex: none; border-radius: 6px; }
.attachment-upload { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px dashed var(--border); border-radius: 8px; color: var(--brass); font-size: 12px; font-weight: 700; cursor: pointer; transition: border-color .18s ease, background-color .18s ease; }
.attachment-upload:hover { border-color: var(--brass); background: var(--surface-hover); }
.attachment-upload.busy { opacity: .7; cursor: progress; }
.attachment-upload input[type="file"] { display: none; }
.attachment-error { font-size: 11px; color: var(--red); }
.project-files-panel { max-width: 560px; }

/* Beautified "Add New Lead" form: branded hero image panel beside a sectioned form */
.lead-form-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; max-width: 1060px; margin: 0 auto; align-items: stretch; }
.lead-form-hero { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); min-height: 100%; }
.lead-form-hero-media { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.03); }
.lead-form-hero-overlay { position: absolute; inset: 0; background: linear-gradient(165deg, rgba(10,14,20,.82), rgba(10,14,20,.5) 45%, color-mix(in srgb, var(--brass) 60%, rgba(10,14,20,.72))); }
.lead-form-hero-content { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 22px; }
.lead-form-hero-content h2 { margin: 0; font-size: 22px; color: #fff; }
.lead-form-hero-content p { margin: 0; font-size: 12px; line-height: 1.55; color: rgba(255,255,255,.82); }
.lead-form-hero-content .hero-chip { align-self: flex-start; color: var(--brass); border-color: color-mix(in srgb, var(--brass), transparent 45%); background: color-mix(in srgb, var(--brass), transparent 84%); }
.lead-form-points { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.lead-form-points li { display: flex; align-items: center; gap: 8px; font-size: 11px; color: rgba(255,255,255,.9); }
.lead-form-points svg { width: 14px; height: 14px; color: var(--brass); flex: none; }
.lead-form-panel { padding: 22px; }
.lead-form-hint { margin: 0 0 16px; }
.form-section + .form-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.form-section .section-title { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; }
.form-section .section-title svg { width: 13px; height: 13px; }
.lead-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-soft); }
.lead-owner-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--surface-raised); border: 1px solid var(--border-soft); line-height: 1.5; }
.lead-owner-note svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--brass); }

/* Products Required picker: icon tiles with a check on the selected ones */
.product-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.product-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-control); color: var(--text); transition: border-color .18s ease, background-color .18s ease, transform .16s ease; }
.product-tile:hover { border-color: var(--brass); transform: translateY(-1px); }
.product-tile.active { border-color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 88%); }
.product-tile-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--brass), transparent 86%); color: var(--brass); }
.product-tile-icon svg { width: 22px; height: 22px; }
.product-tile-label { font-size: 11px; font-weight: 600; }
.product-tile.active .product-tile-label { color: var(--brass); }
.product-tile-check { position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; background: var(--brass); color: var(--on-accent); }
.product-tile-check svg { width: 10px; height: 10px; }
@media (max-width: 860px) {
    .lead-form-layout { grid-template-columns: 1fr; max-width: 640px; }
    .lead-form-hero { min-height: 168px; }
}

/* Upload progress */
.upload-progress { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--surface-raised); }
.upload-progress-head { display: flex; justify-content: space-between; align-items: center; font-size: 11px; margin-bottom: 7px; }
.upload-progress-head .mono:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70%; }
.upload-bar { height: 6px; border-radius: 6px; background: var(--surface-control); overflow: hidden; }
.upload-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--brass), color-mix(in srgb, var(--brass), #fff 20%)); transition: width .15s ease; }
.upload-progress-foot { font-size: 9px; margin-top: 6px; }

/* CRM grid/list toggle */
.crm-view-toggle { margin-left: auto; }
.crm-view-toggle button { display: inline-flex; align-items: center; gap: 6px; }
.crm-view-toggle svg { width: 14px; height: 14px; }
.crm-entity-select { max-width: 200px; }

/* CRM sections. One page, five lists, each with a plain rule for who belongs in it: a lead is not yet
   presented, a prospect has been shown a price, a customer has a signed contract in progress. */
.crm-sections { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.crm-section { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--border-soft); background: var(--surface-control); color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none; transition: color .18s ease, border-color .18s ease, background-color .18s ease; }
.crm-section svg { width: 14px; height: 14px; }
.crm-section b { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--muted), transparent 84%); color: var(--text); }
.crm-section:hover { color: var(--text); border-color: color-mix(in srgb, var(--brass), transparent 70%); }
.crm-section.active { color: var(--brass); border-color: color-mix(in srgb, var(--brass), transparent 55%); background: color-mix(in srgb, var(--brass), transparent 90%); }
.crm-section.active b { background: var(--brass); color: var(--bg); }
.crm-section-rule { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.crm-section-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.crm-section-bar .search { flex: 1 1 260px; }
.crm-contract { background: color-mix(in srgb, var(--green), transparent 94%); }
.crm-contract .crm-visit-line svg { color: var(--green); }
.crm-visit-line.is-cooling, .crm-visit-line.is-cooling svg { color: var(--orange); font-weight: 600; }
.crm-visit-line.is-closed, .crm-visit-line.is-closed svg { color: var(--muted); }
.project-filters { margin: 0 12px 10px; }
.project-filters button { display: inline-flex; align-items: center; gap: 5px; }
.project-filters button .mono { font-size: 10px; opacity: .75; }
.order-confirmed.is-cancelled { color: var(--red); }
@media (max-width: 720px) {
    .crm-sections { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
    .crm-section { flex: none; }
}
.crm-stacked-table { margin-top: 14px; }

/* Lead page (/leads/{id}). Header strip, then a main column with the four-tile summary and tabs, and a
   rail of cards for actions, contact, enquiry, team and preferences. Mirrors the case workspace so the
   two record pages feel like one product. */
.lead-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; background: var(--surface-panel); border-bottom: 1px solid var(--border); }
.lead-head-left { display: flex; align-items: center; gap: 14px; min-width: 0; }
.lead-head-id { min-width: 0; }
.lead-head-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.lead-head-title h1 { margin: 0; font-size: calc(18px * var(--text-scale, 1)); }
.lead-head .case-breadcrumb a { color: inherit; text-decoration: none; }
.lead-head .case-breadcrumb a:hover { color: var(--brass); }
.lead-head-right { display: flex; align-items: center; gap: 18px; flex: none; }
.lead-head-value { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.lead-head-value b { font-size: 18px; }
.lead-head-value small { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
/* .main is a fixed-height flex column that hides overflow (the shell never scrolls as a whole), so the
   workspace is the part that scrolls - without this the page was clipped at the fold. */
.lead-workspace { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 18px; padding: 18px 20px 28px; align-items: start; }
.lead-enquiries { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lead-enquiry { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border-soft); background: var(--surface-control); color: var(--muted); font-size: 11px; font-weight: 600; text-decoration: none; transition: color .18s ease, border-color .18s ease; }
.lead-enquiry .mono { color: var(--text); }
.lead-enquiry:hover { color: var(--text); border-color: color-mix(in srgb, var(--brass), transparent 60%); }
.lead-enquiry.active { color: var(--brass); border-color: color-mix(in srgb, var(--brass), transparent 50%); background: color-mix(in srgb, var(--brass), transparent 90%); }
.lead-enquiry.active .mono { color: var(--brass); }
.lead-enquiries .btn-mini { margin-left: auto; }
.lead-session-map { margin-top: 2px; }
/* The main column is a size container: the overview lays out by the width it actually gets (the rail takes
   360px beside it), not by the viewport. */
.lead-main { min-width: 0; display: flex; flex-direction: column; gap: 14px; container-type: inline-size; }
.lead-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 12px; }
.lead-tabs { margin: 2px 0 0; display: flex; overflow-x: auto; scrollbar-width: none; }
.lead-tabs::-webkit-scrollbar { display: none; }
.lead-tabs > button { flex: none; white-space: nowrap; }
.lead-tab-count { margin-left: 5px; font-size: 10px; opacity: .7; }
.lead-tab-body { display: flex; flex-direction: column; gap: 14px; }

/* Record overview: answers, not lists. The journey runs across the top; next step, money, what the customer
   told us and engagement sit below. Every list lives in its own tab, so nothing here repeats one. */
.rec-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.rec-wide { grid-column: 1 / -1; }
.rec-overview .section-title small { font-size: 11px; }
.rec-subhead { margin-top: 2px; font-size: 9px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.rec-link { flex: none; border: 0; background: transparent; padding: 0; color: var(--brass); font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.rec-link:hover { text-decoration: underline; }
.rec-link:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 3px; }

.rec-journey { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); }
.rec-step { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-right: 8px; }
.rec-step::after { content: ''; position: absolute; top: 11px; left: 30px; right: 6px; height: 2px; border-radius: 2px; background: var(--border); }
.rec-step:last-child::after { display: none; }
.rec-step.done::after { background: var(--brass); }
.rec-step-dot { position: relative; z-index: 1; flex: none; width: 24px; height: 24px; margin-bottom: 6px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--border); background: var(--surface-panel); color: var(--bg); }
.rec-step-dot svg { width: 12px; height: 12px; stroke-width: 3; }
.rec-step.done .rec-step-dot { background: var(--brass); border-color: var(--brass); }
.rec-step.current .rec-step-dot { border-color: var(--brass); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brass), transparent 80%); }
.rec-step.stopped .rec-step-dot { background: var(--red); border-color: var(--red); color: #fff; }
.rec-step b { font-size: 12px; line-height: 1.25; }
.rec-step small { font-size: 10.5px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-step.current b { color: var(--brass); }
.rec-step.todo b { color: var(--muted); font-weight: 600; }
.rec-step.todo small.mono { opacity: .6; }
.rec-step.skipped { opacity: .4; }
.rec-step.skipped b { font-weight: 600; }
.rec-step.stopped b, .rec-step.stopped .rec-step-detail { color: var(--red); }

.rec-next.is-overdue { border-color: color-mix(in srgb, var(--red), transparent 55%); box-shadow: inset 3px 0 0 var(--red); }
.rec-next-action { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.rec-next.is-overdue .rec-next-action { color: var(--red); }
.rec-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.rec-facts li { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 12px; color: var(--muted); }
.rec-facts li > svg { width: 14px; height: 14px; flex: none; color: var(--brass); }
.rec-facts li > span { flex: 1; min-width: 0; }
.rec-facts li b { color: var(--text); font-weight: 600; white-space: nowrap; }
.rec-facts li.warn > svg, .rec-facts li.warn b { color: var(--orange); }

.rec-money { margin: 0; display: grid; }
.rec-money > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--border-soft); }
.rec-money > div:first-child { padding-top: 0; }
.rec-money > div:last-child { padding-bottom: 0; border-bottom: 0; }
.rec-money dt { padding-top: 1px; font-size: 12px; color: var(--muted); }
.rec-money dd { margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.rec-money dd b { font-size: 14px; }
.rec-money dd small { font-size: 10.5px; color: var(--muted); }
.rec-money .is-empty dd b { color: var(--muted); font-weight: 400; }
.rec-money .is-struck dd b { color: var(--muted); text-decoration: line-through; }
.rec-paid { display: block; width: 120px; max-width: 100%; height: 5px; margin-top: 5px; border-radius: 5px; background: var(--surface-control); overflow: hidden; }
.rec-paid i { display: block; height: 100%; border-radius: 5px; background: var(--green); }
.rec-foot { padding-top: 10px; border-top: 1px solid var(--border-soft); font-size: 11px; color: var(--muted); }

.rec-visit-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
.rec-quote { margin: 0; padding: 9px 12px; border-left: 3px solid var(--brass); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--brass), transparent 93%); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.rec-quote.is-bad { border-left-color: var(--red); background: color-mix(in srgb, var(--red), transparent 93%); }
.rec-quote small { display: block; margin-top: 3px; font-size: 10.5px; color: var(--muted); }
.rec-concerns { display: flex; flex-wrap: wrap; gap: 6px; }
.rec-concern { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); font-size: 11px; font-weight: 600; }
.rec-concern svg { width: 11px; height: 11px; }
.rec-concern.is-addressed { color: var(--green); border-color: color-mix(in srgb, var(--green), transparent 55%); background: color-mix(in srgb, var(--green), transparent 92%); }

.rec-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.rec-stat { min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border-soft); background: var(--surface-raised); }
.rec-stat span { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.rec-stat b { display: block; margin-top: 4px; font: 700 18px/1.1 'JetBrains Mono', monospace; }
.rec-stat small { display: block; margin-top: 3px; font-size: 10.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-stat.good b { color: var(--green); }
.rec-stat.warn b { color: var(--orange); }
.rec-stat.bad b { color: var(--red); }
.rec-stat.bad { border-color: color-mix(in srgb, var(--red), transparent 60%); }

@container (max-width: 900px) {
    .rec-journey { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 18px; }
    .rec-step:nth-child(4n)::after { display: none; }
    .rec-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (max-width: 640px) {
    .rec-overview { grid-template-columns: 1fr; }
    .rec-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 460px) {
    .rec-journey { grid-template-columns: 1fr; row-gap: 0; }
    .rec-step { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; padding: 0 0 14px; }
    .rec-step-dot { grid-row: 1 / span 3; margin: 0; }
    .rec-step::after, .rec-step:nth-child(4n)::after { display: block; top: 28px; bottom: 2px; left: 11px; right: auto; width: 2px; height: auto; }
    .rec-step:last-child::after { display: none; }
}
.lead-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.lead-card .section-title { margin: 0; }
.lead-card .section-title > span:first-child { display: inline-flex; align-items: center; gap: 7px; }
.lead-card .section-title > span:first-child svg { width: 15px; height: 15px; color: var(--brass); }
.lead-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 6px 16px; margin: 0; }
.lead-kv > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lead-kv dt { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.lead-kv dd { margin: 0; font-size: 12px; overflow-wrap: anywhere; }
.lead-session { padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-raised); display: flex; flex-direction: column; gap: 10px; }
.lead-session-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
.lead-unit { text-decoration: none; color: inherit; }
.lead-unit > span { min-width: 0; }
.lead-unit small { display: block; }
.lead-actions { display: grid; gap: 8px; }
.lead-actions .btn { width: 100%; justify-content: flex-start; }
.btn.danger.ghost { background: transparent; border-color: color-mix(in srgb, var(--red), transparent 50%); color: var(--red); }
.lead-lost-note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--red), transparent 92%); border: 1px solid color-mix(in srgb, var(--red), transparent 60%); font-size: 12px; }
.lead-lost-note svg { width: 15px; height: 15px; color: var(--red); flex: none; margin-top: 1px; }
.lead-lost-note small { display: block; }
.lead-contact > div span { min-width: 0; overflow-wrap: anywhere; }
.lead-contact a { color: var(--text); text-decoration: none; }
.lead-contact a:hover { color: var(--brass); }
.lead-products { display: flex; flex-wrap: wrap; gap: 6px; }
.lead-card .control-row .field.compact { max-width: 190px; }
.empty-state.compact { padding: 18px 12px; }
@media (max-width: 1180px) {
    .lead-workspace { grid-template-columns: 1fr; }
    .lead-rail { position: static; }
    .lead-enquiries .btn-mini { margin-left: 0; }
}
@media (max-width: 720px) {
    .lead-head { flex-direction: column; align-items: flex-start; padding: 12px 16px 12px 54px; }
    .lead-workspace { padding: 14px 12px 24px; }
}

/* Required-field marker, inline validation and form error banner */
.req { color: var(--red); font-weight: 700; }
.form-group .validation-message { display: block; margin-top: 4px; font-size: 10px; color: var(--red); }
.form-error-banner { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 10px 12px; border-radius: 8px; font-size: 12px; color: var(--red); background: color-mix(in srgb, var(--red), transparent 90%); border: 1px solid color-mix(in srgb, var(--red), transparent 60%); }
.form-error-banner svg { width: 16px; height: 16px; flex: none; }
.field.input-validation-error, .input-validation-error .field { border-color: var(--red); }

/* Loading skeletons */
.skeleton-wrap { display: flex; flex-direction: column; gap: 12px; }
.sk { display: block; border-radius: 4px; background: linear-gradient(90deg, var(--surface-control) 25%, color-mix(in srgb, var(--surface-control), var(--text) 8%) 37%, var(--surface-control) 63%); background-size: 400% 100%; animation: sk-shimmer 1.3s ease-in-out infinite; }
@keyframes sk-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.sk-line { height: 10px; margin: 5px 0; }
.sk-line.lg { height: 16px; }
.sk-line.w20 { width: 20%; } .sk-line.w30 { width: 30%; } .sk-line.w40 { width: 40%; } .sk-line.w50 { width: 50%; } .sk-line.w60 { width: 60%; } .sk-line.w70 { width: 70%; } .sk-line.w80 { width: 80%; }
.sk-circle { width: 38px; height: 38px; border-radius: 8px; flex: none; }
.sk-block { height: 70px; margin-top: 8px; border-radius: 6px; }
.sk-pill { display: inline-block; width: 96px; height: 26px; border-radius: 4px; margin-right: 8px; }
.sk-kpi { padding: 14px; display: flex; gap: 12px; align-items: center; }
.sk-kpi > div { flex: 1; }
.sk-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.sk-card { padding: 16px; }
.sk-card.sm { padding: 12px; margin-bottom: 11px; }
.sk-table { padding: 0; }
.sk-table-head { display: flex; gap: 16px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.sk-table-head .sk-line { flex: 1; }
.sk-table-row { display: flex; gap: 16px; padding: 13px 14px; border-bottom: 1px solid var(--border-soft); }
.sk-table-row .sk-line { flex: 1; margin: 0; }
.sk-board { display: flex; gap: 24px; }
.sk-board .sk-col { width: 300px; }
.sk-split { display: flex; gap: 0; height: 100%; }
.sk-split .sk-side { width: 256px; flex: none; border-right: 1px solid var(--border); padding: 12px; }
.sk-split .sk-side-row { padding: 11px 4px; border-bottom: 1px solid var(--border-soft); }
.sk-split .sk-main { flex: 1; padding: 16px; }
.sk-calendar { padding: 0; }
.sk-cal-row { display: flex; gap: 14px; align-items: center; padding: 16px 14px; border-bottom: 1px solid var(--border); }
.sk-cal-row .sk-line { flex: none; }
.sk-cal-slots { display: flex; flex: 1; }

/* Reminders / Compliance: header filters + spacing, theme-consistent and responsive */
.reminder-kpis { margin-bottom: 14px; }
.kpi-icon svg { width: 18px; height: 18px; }
.reminder-queue { margin-top: 4px; }
/* Inline label+field pairs placed in the TopBar actions (Compliance From/To window) */
.hdr-field { display: inline-flex; align-items: center; gap: 6px; }
.hdr-field .label { margin-bottom: 0; white-space: nowrap; }
.hdr-field .field { width: auto; }
.topbar .actions .segmented { flex: none; }
@media (max-width: 720px) {
    .topbar .actions .segmented { width: 100%; }
    .topbar .actions .segmented button { flex: 1; }
    .hdr-field { flex: 1; }
    .hdr-field .field { flex: 1; min-width: 0; }
}

/* Indeterminate progress bar shown during filter reloads (data already on screen) */
.reload-bar { height: 3px; border-radius: 3px; margin-bottom: 10px; overflow: hidden; background: var(--surface-control); position: relative; }
.reload-bar::after { content: ''; position: absolute; inset: 0; width: 40%; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--brass), transparent); animation: reload-slide 1s ease-in-out infinite; }
@keyframes reload-slide { 0% { left: -40%; } 100% { left: 100%; } }

/* CRM workflow */
.product-picker { justify-content: flex-start; flex-wrap: wrap; gap: 8px; background: transparent; border: 0; padding: 0; }
.product-picker button { flex: 0 1 auto; min-height: 34px; border: 1px solid var(--border); background: var(--surface-control); }
.product-picker button.active { border-color: var(--brass); color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 88%); }
.lead-tools { margin-top: 14px; }
.lead-card .lead-meta { gap: 8px; flex-wrap: wrap; }
.lead-footer-actions { gap: 8px; }
@media(max-width: 720px) {
    .product-picker button { flex: 1 1 calc(50% - 8px); }
    .lead-tools { align-items: stretch; }
    .crm-entity-select { max-width: none; width: 100%; }
}

/* Connection / error screen (ErrorBoundary fallback) */
.conn-error { height: 100%; display: grid; place-items: center; padding: 28px; overflow: auto; }
.conn-error-card { width: min(520px, 100%); text-align: center; background: var(--surface-panel); border: 1px solid var(--border); border-radius: 12px; padding: 32px 28px; box-shadow: 0 18px 48px rgba(0,0,0,.22); }
.conn-error-icon { width: 56px; height: 56px; margin: 0 auto 16px; display: grid; place-items: center; font-size: 26px; border-radius: 50%; color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 86%); }
.conn-error-card h2 { margin: 0 0 8px; font-size: calc(19px * var(--text-scale, 1)); }
.conn-error-card p { margin: 0 auto 20px; max-width: 42ch; line-height: 1.55; }
.conn-error-actions { display: flex; gap: 10px; justify-content: center; }
.conn-error-detail { margin-top: 18px; text-align: left; }
.conn-error-detail summary { cursor: pointer; font-size: 11px; color: var(--muted); }
.conn-error-detail pre { margin-top: 8px; padding: 10px; border-radius: 6px; background: var(--surface-control); font-size: 10px; white-space: pre-wrap; word-break: break-word; max-height: 160px; overflow: auto; }

@media(max-width: 1100px) {
    .case-workspace { grid-template-columns: 1fr; overflow-y: auto; }
    .case-dossier, .case-controls { border: 0; border-bottom: 1px solid var(--border); }
    .case-thread { min-height: 70vh; }
}
@media(max-width: 820px) {
    .support-filter-tray { flex-direction: column; align-items: stretch; }
    .support-filter-controls { flex-wrap: wrap; }
    .case-header { height: auto; padding: 12px 16px 12px 54px; }
    .case-title-row h1 { white-space: normal; }
}

/* ============================================================
   On-site sales presentation (full-screen, customer-facing)
   ============================================================ */
.lead-present-btn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin: 0 17px 12px; width: calc(100% - 34px); height: 36px; }
.lead-present-btn svg { width: 15px; height: 15px; }
.row-actions .btn-mini.primary svg { width: 12px; height: 12px; }

.presentation-root { position: fixed; inset: 0; z-index: 200; background: var(--surface-page); color: var(--text); overflow: auto; }

/* --- Gate screens (arrival + declaration) --- */
.presentation-gate { min-height: 100vh; display: grid; place-items: center; padding: 28px 18px; background:
    radial-gradient(900px 500px at 80% -10%, color-mix(in srgb, var(--brass), transparent 88%), transparent),
    var(--surface-page); }
.presentation-gate-card { width: min(560px, 100%); background: var(--surface-panel); border: 1px solid var(--border); border-radius: 16px; padding: 30px; box-shadow: 0 30px 70px rgba(0,0,0,.35); animation: rise-in .4s cubic-bezier(.22,1,.36,1) both; }
.presentation-gate-card.wide { width: min(760px, 100%); }
.presentation-gate-card.center { text-align: center; }
.presentation-gate-card h2 { margin: 14px 0 8px; font-size: 22px; }
.presentation-gate-card p { color: var(--muted); line-height: 1.5; }
.gate-customer { display: flex; align-items: center; gap: 14px; margin: 18px 0; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-raised); }
.gate-avatar { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--brass), transparent 84%); color: var(--brass); font-weight: 700; }
.gate-customer b { display: block; }
.gate-customer small { display: block; color: var(--muted); margin-top: 2px; }
.gate-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.gate-note { display: flex; align-items: center; gap: 7px; margin-top: 16px; font-size: 11px; }
.gate-note svg { width: 14px; height: 14px; flex: none; }
.declaration-mission { margin: 16px 0; padding-left: 18px; color: var(--muted); display: grid; gap: 6px; font-size: 13px; }
.declaration-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 18px 0; }
.declaration-card { border: 1px solid var(--border); border-radius: 12px; padding: 16px; background: var(--surface-raised); }
.declaration-card h3 { margin: 0 0 8px; font-size: 14px; }
.declaration-card p { font-size: 12.5px; line-height: 1.5; }
.declaration-switch { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); font-weight: 600; font-size: 13px; }

/* --- Presentation shell --- */
.presentation-page { height: 100vh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }
.presentation-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--surface-panel); }
.presentation-brand { display: flex; align-items: center; gap: 12px; }
.presentation-brand .logo { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--brass); color: #10151c; font-weight: 800; }
.presentation-brand b { display: block; font-size: 15px; }
.presentation-brand small { display: block; color: var(--muted); font-size: 11px; }
.presentation-progress { flex: 1; max-width: 460px; }
.presentation-progress > div { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.presentation-progress b { color: var(--text); }
.p-progress { height: 6px; border-radius: 4px; background: var(--surface-control); overflow: hidden; }
.p-progress i { display: block; height: 100%; background: var(--brass); border-radius: 4px; transition: width .35s cubic-bezier(.22,1,.36,1); }
.presentation-controls { display: flex; align-items: center; gap: 8px; }
.presentation-controls .btn.icon { width: 34px; padding: 0; justify-content: center; }

.presentation-main { display: grid; grid-template-columns: 248px 1fr; min-height: 0; overflow: hidden; }
.presentation-page.customer-view .presentation-main { grid-template-columns: 1fr; }
.presentation-journey { border-right: 1px solid var(--border); padding: 16px 12px; background: var(--surface-panel); overflow: auto; }
.journey-block { margin-bottom: 4px; }
.journey-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; text-align: left; }
.journey-head span { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--surface-control); font-size: 12px; font-weight: 700; }
.journey-head.active { color: var(--text); }
.journey-head.active span { background: var(--brass); color: #10151c; }
.journey-steps { display: grid; gap: 2px; margin: 2px 0 8px 34px; }
.journey-steps button { text-align: left; border: 0; background: transparent; color: var(--muted); font-size: 12px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.journey-steps button:hover { background: var(--surface-hover); color: var(--text); }
.journey-steps button.active { color: var(--brass); font-weight: 600; }

.presentation-canvas { padding: 32px; overflow-y: auto; min-height: 0; }
.presentation-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface-panel); }
.chapter-dots { display: flex; gap: 8px; }
.chapter-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--surface-control); transition: background-color .2s ease; }
.chapter-dots i.active { background: var(--brass); }

/* --- Stages / chapter content --- */
.presentation-stage { max-width: 980px; margin: 0 auto; animation: rise-in .4s cubic-bezier(.22,1,.36,1) both; }
.presentation-stage.narrow { max-width: 680px; }
.presentation-stage.center { text-align: center; display: grid; place-items: center; gap: 8px; min-height: 50vh; }
.presentation-stage.split { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }
.presentation-heading { margin-bottom: 22px; }
.presentation-heading.left { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.presentation-heading h2 { font-size: 26px; margin: 0 0 6px; }
.presentation-heading p { color: var(--muted); margin: 0; }
.presentation-stage h2 { font-size: 26px; }
.lead-copy { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 12px 0 18px; }
.tick-list { display: grid; gap: 10px; padding: 0; list-style: none; }
.tick-list li { position: relative; padding-left: 28px; color: var(--text); }
.tick-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--green), transparent 82%); color: var(--green); font-size: 11px; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 20px; color: var(--muted); font-size: 13px; }
.hero-photo { border-radius: 16px; overflow: hidden; border: 1px solid var(--border); aspect-ratio: 4/3; background: var(--surface-control); }
.hero-photo.tall { aspect-ratio: 3/4; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.presentation-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.presentation-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.presentation-card { border: 1px solid var(--border); border-radius: 14px; padding: 20px; background: var(--surface-panel); }
.presentation-card-title { font-size: 13px; font-weight: 700; margin-bottom: 10px; }
.presentation-card p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; }
.presentation-note { margin-top: 18px; padding: 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--brass), transparent 70%); background: color-mix(in srgb, var(--brass), transparent 92%); }
.presentation-note b { color: var(--brass); }
.presentation-note p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
/* Notes from belling on the first page: the beller's words, newest first, each with who wrote it and when. */
.pres-belling { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-panel); }
.pres-belling-head { display: flex; align-items: center; gap: 8px; }
.pres-belling-head b { font-size: 13px; }
.pres-belling-head .pres-edit-btn { float: none; margin-left: auto; }
.pres-belling-icon { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 7px; background: color-mix(in srgb, var(--brass), transparent 85%); color: var(--brass); }
.pres-belling-icon svg { width: 13px; height: 13px; }
.pres-belling-count { min-width: 20px; height: 18px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--surface-control); color: var(--muted); font-size: 11px; font-weight: 700; }
.pres-belling-list { display: grid; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.pres-belling-list li { padding: 10px 12px; border-left: 3px solid var(--brass); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--brass), transparent 93%); }
.pres-belling-list p { margin: 0 0 4px; color: var(--text); font-size: 14px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.pres-belling-list small { color: var(--muted); font-size: 11px; }
.pres-belling.empty { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.p-info { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: center; }
.p-info span { color: var(--muted); font-size: 12px; }
.p-info b { text-align: right; }
.big-symbol { font-size: 46px; color: var(--brass); }
.big-symbol.small { font-size: 26px; }

.concern-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.concern { display: grid; place-items: center; gap: 10px; padding: 22px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-panel); color: var(--text); cursor: pointer; transition: border-color .18s ease, transform .16s ease, background-color .18s ease; }
.concern:hover { transform: translateY(-2px); border-color: var(--brass); }
.concern.active { border-color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 88%); }
.concern span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--brass), transparent 86%); color: var(--brass); }
.concern span svg { width: 20px; height: 20px; }
.tag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 8px 0 18px; }
.check-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-panel); font-size: 13px; cursor: pointer; }
.check-card input { accent-color: var(--brass); flex: none; width: 17px; height: 17px; }
.check-card.confirm { margin-top: 16px; border-color: color-mix(in srgb, var(--brass), transparent 55%); background: color-mix(in srgb, var(--brass), transparent 92%); font-weight: 600; }

/* ===== Chapter 4 (Build Value) + Chapter 5 (Decide & Complete) ===== */
/* Expectations tracker: the customer's own concerns ticked off in front of them. The bar is the point -
   it fills as the rep demonstrates each one, so the close is the customer watching a promise complete. */
.expectations { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border); }
.expectations-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.expectations-head b { font-size: 16px; }
.expectations-head .mono { color: var(--muted); font-size: 13px; }
.expectations-bar { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--border), transparent 30%); overflow: hidden; }
.expectations-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--score-good), transparent 30%), var(--score-good)); transition: width .45s cubic-bezier(.4, 0, .2, 1); }
.expectations-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 16px; }
.expectation { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-panel); color: var(--text); font-size: 14px; text-align: left; cursor: pointer; transition: border-color .18s ease, background-color .18s ease, transform .16s ease; }
.expectation:hover { transform: translateY(-1px); border-color: var(--brass); }
.expectation span { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--brass), transparent 86%); color: var(--brass); transition: background-color .18s ease, color .18s ease; }
.expectation span svg { width: 16px; height: 16px; }
.expectation.met { border-color: var(--score-good); background: color-mix(in srgb, var(--score-good), transparent 92%); }
.expectation.met span { background: var(--score-good); color: #fff; }
.expectations-done { display: flex; align-items: center; gap: 8px; margin: 14px 0 0; color: var(--score-good); font-weight: 600; font-size: 14px; }
.expectations-done svg { width: 17px; height: 17px; }
@media (prefers-reduced-motion: reduce) { .expectations-bar i { transition: none; } .expectation:hover { transform: none; } }

.pres-saving-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; }
.pres-saving-line span { color: var(--muted); }
.pres-saving-line b { font-size: 18px; color: var(--brass); }
.pres-saving-line.green b { color: var(--green); }
.pres-mini-progress { height: 6px; border-radius: 999px; background: var(--surface-control); margin-top: 10px; overflow: hidden; }
.pres-mini-progress i { display: block; height: 100%; background: var(--brass); }
.pres-inc-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--brass), transparent 86%); color: var(--brass); margin-bottom: 12px; }
.pres-inc-icon svg { width: 21px; height: 21px; }

/* promotions (multi-select) */
.promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.promo-card { position: relative; text-align: left; border: 1px solid var(--border); border-radius: 14px; padding: 18px; background: var(--surface-panel); color: var(--text); cursor: pointer; transition: border-color .18s ease, transform .16s ease, background-color .18s ease; }
.promo-card:hover { transform: translateY(-2px); border-color: var(--brass); }
.promo-card.active { border-color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 90%); }
.promo-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.promo-card-head b { font-size: 15px; }
.promo-value { flex: none; font-weight: 700; color: var(--green); font-family: var(--mono, monospace); }
.promo-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.promo-check { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; display: none; align-items: center; justify-content: center; border-radius: 50%; background: var(--brass); color: #1a1a1a; }
.promo-check svg { width: 13px; height: 13px; }
.promo-card.active .promo-check { display: flex; }
.promo-card.active .promo-card-head { padding-right: 26px; }

/* funding options */
.finance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.finance-card { text-align: left; border: 1px solid var(--border); border-radius: 14px; padding: 20px; background: var(--surface-panel); color: var(--text); cursor: pointer; transition: border-color .18s ease, transform .16s ease; }
.finance-card:hover { transform: translateY(-2px); border-color: var(--brass); }
.finance-card.active { border-color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 90%); }
.finance-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--brass), transparent 86%); color: var(--brass); margin-bottom: 12px; }
.finance-icon svg { width: 19px; height: 19px; }
.finance-card b { display: block; font-size: 15px; }
.finance-card p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.finance-detail { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.finance-detail strong { font-size: 22px; color: var(--brass); }
.finance-detail strong small { font-size: 12px; color: var(--muted); }

/* proposal summary */
.proposal { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface-panel); }
.proposal > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px; background: color-mix(in srgb, var(--brass), transparent 92%); border-bottom: 1px solid var(--border); }
.proposal > header span { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; display: block; }
.proposal > header b { font-size: 16px; }
.proposal-total { text-align: right; }
.proposal-total strong { display: block; font-size: 26px; color: var(--brass); }
.proposal-total small { color: var(--muted); font-size: 11px; }
.proposal-total.big { margin: 18px auto; }
.proposal-total.big strong { font-size: 34px; }
.proposal-lines { padding: 8px 20px 18px; }
.proposal-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 40%); font-size: 14px; }
.proposal-line:last-child { border-bottom: 0; }
.proposal-line small { display: block; color: var(--muted); font-size: 12px; }
.proposal-line.green b { color: var(--green); }
.proposal-line.vat span { color: var(--muted); }

/* compliance + finish */
.compliance-list { display: flex; flex-direction: column; gap: 10px; }
.done-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; margin: 20px 0; }
.done-grid > div { border: 1px solid var(--border); border-radius: 12px; padding: 14px; background: var(--surface-panel); }
.done-grid span { display: block; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.done-grid b { font-size: 17px; }
.success-mark { width: 76px; height: 76px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--green), transparent 84%); color: var(--green); }
.success-mark svg { width: 38px; height: 38px; }
.presentation-stage.center { text-align: center; }
.presentation-heading.center { text-align: center; }
.btn.btn-lg { height: 46px; padding: 0 26px; font-size: 15px; margin-top: 8px; }
.footer-spacer { width: 120px; }
.promo-value-edit { display: flex; align-items: center; gap: 3px; color: var(--muted); font-size: 13px; }

.presentation-config { display: grid; grid-template-columns: 280px 1fr 280px; gap: 18px; align-items: start; }
.presentation-config aside h3, .presentation-config main h3 { font-size: 14px; margin: 0 0 12px; }
.swatch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.swatch-grid .choice { display: flex; align-items: center; gap: 8px; }
.swatch { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--border); display: inline-block; }
.swatch.white { background: #e8ecf0; } .swatch.anthracite { background: #3d4147; } .swatch.black { background: #1a1d22; }
.swatch.oak { background: #b5854b; } .swatch.cream { background: #e8dcc8; } .swatch.green { background: #5a9c72; }
.technical-preview { position: relative; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; aspect-ratio: 4/3; background: var(--surface-control); }
.technical-preview img { width: 100%; height: 100%; object-fit: cover; }
.technical-preview span { position: absolute; top: 12px; left: 12px; font-size: 10px; letter-spacing: .08em; padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; }

/* the package review's product cards are the shared ProductCard (wwwroot/product-card.css) */
.package-total { display: flex; align-items: center; gap: 16px; margin-top: 18px; padding: 18px; border-radius: 14px; background: color-mix(in srgb, var(--brass), transparent 90%); border: 1px solid color-mix(in srgb, var(--brass), transparent 70%); }
.package-total span { color: var(--muted); }
.package-total b { font-size: 24px; color: var(--brass); margin-left: auto; }

/* confirm order from a finalised quote */
.order-action-row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.order-action-row .muted svg { width: 13px; height: 13px; vertical-align: -2px; color: var(--brass); }
.order-confirmed { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 14px; border-radius: 4px; font-size: 13px; color: var(--text); background: color-mix(in srgb, var(--green), transparent 90%); border: 1px solid color-mix(in srgb, var(--green), transparent 72%); }
.order-confirmed svg { width: 15px; height: 15px; color: var(--green); }
.confirm-order-modal { width: min(480px, calc(100vw - 28px)); margin: 12vh auto 0; max-height: 80vh; overflow: auto; background: var(--surface-panel); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 18px 45px rgba(0,0,0,.32); }
.confirm-order-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 14px; }
.co-total { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 4px; background: color-mix(in srgb, var(--brass), transparent 90%); border: 1px solid color-mix(in srgb, var(--brass), transparent 72%); }
.co-total b { font-size: 20px; }
.co-seg { display: flex; gap: 8px; }
.co-seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-control); color: var(--text); cursor: pointer; font-size: 13px; font-weight: 600; }
.co-seg button svg { width: 15px; height: 15px; }
.co-seg button.on { border-color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 86%); color: var(--brass); }
.co-quick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.co-quick .small-copy { margin-left: auto; }

.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--surface-control); border-top-color: var(--brass); animation: spin .8s linear infinite; margin: 0 auto 4px; }
.presentation-fatal { min-height: 100vh; display: grid; place-items: center; text-align: center; gap: 10px; padding: 30px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Rep/Customer mode switch (header) */
.pres-mode-switch { display: inline-flex; align-items: center; gap: 8px; padding: 4px 6px 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-raised); }
.pres-mode-switch span { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.pres-mode-switch span.on { color: var(--brass); }

/* Review edit button */
.pres-edit-btn { float: right; display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--brass); font-size: 11px; font-weight: 600; cursor: pointer; transition: border-color .16s ease, background-color .16s ease; }
.pres-edit-btn:hover { border-color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 92%); }
.pres-edit-btn svg { width: 12px; height: 12px; }
.presentation-card .form-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
.presentation-card .form-group { margin-bottom: 10px; }

/* Marketing assessment — private rep-only panel */
.marketing-stage { max-width: 920px; }
.marketing-head { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 16px; margin-bottom: 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--brass), transparent 90%), color-mix(in srgb, var(--brass), transparent 96%));
    border: 1px solid color-mix(in srgb, var(--brass), transparent 72%); }
.marketing-lock { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--brass), transparent 82%); color: var(--brass); }
.marketing-lock svg { width: 22px; height: 22px; }
.marketing-head-copy { flex: 1; }
.marketing-head-copy h2 { margin: 0 0 3px; font-size: 21px; }
.marketing-head-copy p { margin: 0; color: var(--muted); font-size: 12.5px; }
.marketing-pill { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 12px; border-radius: 999px; background: var(--brass); color: #10151c; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.marketing-pill svg { width: 13px; height: 13px; }
.marketing-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 14px; }
.marketing-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-panel); transition: border-color .16s ease, transform .14s ease; cursor: pointer; }
.marketing-card:hover, .marketing-card:focus-within { border-color: var(--brass); transform: translateY(-1px); }
.mk-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--brass), transparent 86%); color: var(--brass); }
.mk-icon svg { width: 18px; height: 18px; }
.mk-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mk-label { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.marketing-card .field { height: 30px; }
.marketing-notes-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-panel); padding: 14px; }
.mk-notes-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mk-notes-head .mk-icon { width: 32px; height: 32px; }
.marketing-notes-card .field { width: 100%; }

/* ---- Redesigned declaration ---- */
.presentation-gate.declaration { padding: 24px; }
.declaration-shell { width: min(960px, 100%); display: grid; grid-template-columns: 0.85fr 1.15fr; border-radius: 18px; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 30px 70px rgba(0,0,0,.4); animation: rise-in .4s cubic-bezier(.22,1,.36,1) both; }
.declaration-hero { padding: 32px; color: #fff; background:
    linear-gradient(160deg, color-mix(in srgb, var(--brass), #000 8%), color-mix(in srgb, var(--brass), #000 45%)); }
.declaration-hero .badge { background: rgba(255,255,255,.18); color: #fff; }
.declaration-hero h2 { font-size: 26px; margin: 14px 0 10px; color: #fff; }
.declaration-hero > p { color: rgba(255,255,255,.85); line-height: 1.5; }
.declaration-mission { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 14px; }
.declaration-mission li { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: rgba(255,255,255,.95); }
.declaration-mission li span { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.16); }
.declaration-mission li span svg { width: 16px; height: 16px; }
.declaration-progress { display: flex; gap: 10px; margin-top: 26px; }
.declaration-progress span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.14); color: rgba(255,255,255,.7); }
.declaration-progress span svg { width: 13px; height: 13px; }
.declaration-progress span.done { background: #fff; color: color-mix(in srgb, var(--brass), #000 30%); }
.declaration-body { padding: 28px; background: var(--surface-panel); display: flex; flex-direction: column; gap: 16px; }
.declaration-card { border: 1px solid var(--border); border-radius: 14px; padding: 18px; background: var(--surface-raised); transition: border-color .18s ease, background-color .18s ease; }
.declaration-card.confirmed { border-color: color-mix(in srgb, var(--green), transparent 50%); background: color-mix(in srgb, var(--green), transparent 92%); }
.declaration-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.declaration-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--brass), transparent 84%); color: var(--brass); }
.declaration-icon svg { width: 19px; height: 19px; }
.declaration-card-head h3 { margin: 0; font-size: 15px; }
.declaration-card p { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin: 0 0 14px; }
.declaration-toggle { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-control); color: var(--text); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .18s ease; }
.declaration-toggle-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--muted); display: inline-grid; place-items: center; transition: all .18s ease; }
.declaration-toggle.on { border-color: var(--green); background: color-mix(in srgb, var(--green), transparent 86%); color: var(--green); }
.declaration-toggle.on .declaration-toggle-dot { border-color: var(--green); background: var(--green); box-shadow: inset 0 0 0 3px var(--surface-panel); }

/* ---- Accreditations (Why Choose Us) ---- */
.accreditation-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.accreditation-card { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-panel); color: var(--text); cursor: pointer; text-align: left; transition: border-color .18s ease, transform .16s ease, box-shadow .18s ease; }
.accreditation-card:hover { border-color: var(--brass); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,0,0,.2); }
.accreditation-card b { font-size: 13px; line-height: 1.3; }
.accreditation-badge { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--brass), transparent 86%); color: var(--brass); font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; letter-spacing: .02em; overflow: hidden; text-align: center; line-height: 1.1; padding: 4px; }
.accreditation-badge.has-logo { background: #fff; padding: 7px; }
.accreditation-badge img { width: 100%; height: 100%; object-fit: contain; }
.accreditation-badge.lg { width: 64px; height: 64px; font-size: 14px; }

/* Presentation modal (accreditation detail) */
.pres-modal-backdrop { position: fixed; inset: 0; z-index: 240; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, #000, transparent 40%); backdrop-filter: blur(6px); }
.pres-modal { width: min(520px, 100%); background: var(--surface-panel); border: 1px solid var(--border); border-radius: 16px; padding: 24px; box-shadow: 0 30px 70px rgba(0,0,0,.4); animation: rise-in .3s cubic-bezier(.22,1,.36,1) both; }
.pres-modal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.pres-modal-head h3 { margin: 0; flex: 1; font-size: 17px; }
.pres-modal-head .icon-button { width: 32px; height: 32px; }
.pres-modal p { color: var(--muted); line-height: 1.6; font-size: 13.5px; }
.pres-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

@media(max-width: 900px) {
    .presentation-main { grid-template-columns: 1fr; }
    .presentation-journey { display: none; }
    .presentation-stage.split { grid-template-columns: 1fr; }
    .presentation-config { grid-template-columns: 1fr; }
    .presentation-two, .presentation-three, .feature-grid, .marketing-grid, .declaration-shell { grid-template-columns: 1fr; }
    .presentation-top { flex-wrap: wrap; }
    .presentation-canvas { padding: 20px; }
}

/* ============================================================
   Window Designer — studio interface shell around the imported
   FFPuk drawing engine (wwwroot/js/WinDesignScript.js).
   Icon sidebar + slide-in panels + price pill/drawer + toasts,
   themed with FlashFix tokens and set in Inter.
   ============================================================ */
.wd2d-overlay { position: fixed; inset: 0; z-index: 260; background: var(--surface-page); }
.wd2d-shell {
    --wd-accent: var(--brass);
    --wd-accent-soft: color-mix(in srgb, var(--brass), transparent 88%);
    --wd-panel-w: 320px;
    --wd-side-w: 84px;
    --wd-shadow: 0 10px 30px rgba(0, 0, 0, .16);
    position: absolute; inset: 0; display: flex; flex-direction: column;
    background: var(--surface-page); color: var(--text);
    font-family: 'Inter', 'DM Sans', sans-serif;
}
.wd2d-shell .btn, .wd2d-shell .field, .wd2d-shell input, .wd2d-shell select, .wd2d-shell button { font-family: inherit; }

/* ── Titlebar ── */
.wd2d-titlebar { position: relative; z-index: 90; display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 18px; border-bottom: 1px solid var(--border); background: var(--surface-panel); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); flex: none; }
.wd2d-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wd2d-logo { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 9px; background: linear-gradient(135deg, var(--brass), color-mix(in srgb, var(--brass), #000 25%)); color: #10151c; }
.wd2d-logo svg { width: 18px; height: 18px; }
.wd2d-brand-text { min-width: 0; line-height: 1.2; }
.wd2d-brand-text b { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd2d-brand-text small { display: block; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }
.wd2d-brand-text small.ready { color: color-mix(in srgb, var(--muted), var(--green) 35%); }
.wd2d-tb-spacer { flex: 1; }

/* Price pill — centred in the titlebar */
.wd2d-price-pill {
    position: absolute; left: 50%; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px; height: 42px;
    background: var(--surface-panel); border: 1px solid var(--border); border-radius: 12px;
    padding: 5px 14px 5px 6px; cursor: pointer; user-select: none;
    transition: all .2s cubic-bezier(.4, 0, .2, 1); box-shadow: 0 2px 4px rgba(0, 0, 0, .04);
}
.wd2d-price-pill:hover { border-color: var(--brass); transform: translateX(-50%) translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, .08); }
.wd2d-price-eye { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: none; border-radius: 8px; background: var(--surface-control); color: var(--muted); cursor: pointer; transition: all .2s ease; }
.wd2d-price-eye:hover { background: var(--surface-hover); color: var(--text); }
.wd2d-price-eye svg { width: 14px; height: 14px; }
.wd2d-price-main { display: flex; flex-direction: column; justify-content: center; line-height: 1.15; min-width: 84px; }
.wd2d-price-label { font-size: 8.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.wd2d-price-value { font-size: 17px; font-weight: 800; color: var(--green); letter-spacing: -.02em; font-variant-numeric: tabular-nums; transition: filter .2s ease, opacity .2s ease; }
.wd2d-price-value.hidden-price { filter: blur(5px); opacity: .5; }
.wd2d-price-chev { display: grid; place-items: center; color: var(--muted); transition: transform .2s ease; }
.wd2d-price-chev svg { width: 13px; height: 13px; }
.wd2d-price-pill.open .wd2d-price-chev { transform: rotate(180deg); }

/* Location input */
.wd2d-location-wrap { display: flex; align-items: center; gap: 8px; height: 32px; padding-right: 14px; border-right: 1px solid var(--border); }
.wd2d-location-label { font-size: 9px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.wd2d-location-input { width: 150px; font-size: 12px; font-weight: 600; color: var(--text); background: var(--surface-control); border: 1px solid var(--border); border-radius: 7px; padding: 6px 10px; outline: none; transition: all .2s ease; }
.wd2d-location-input:focus { border-color: var(--brass); background: var(--surface-panel); box-shadow: 0 0 0 3px var(--wd-accent-soft); }

/* Titlebar actions */
.wd2d-tb-actions { display: flex; align-items: center; gap: 8px; }
.wd2d-tb-icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 10px; cursor: pointer; transition: all .2s ease; }
.wd2d-tb-icon svg { width: 15px; height: 15px; }
.wd2d-tb-close:hover { background: color-mix(in srgb, var(--red), transparent 88%); border-color: color-mix(in srgb, var(--red), transparent 55%); color: var(--red); }
.wd2d-commit svg { width: 14px; height: 14px; }

/* ── Main area ── */
.wd2d-main { position: relative; flex: 1; display: flex; min-height: 0; overflow: hidden; }

/* Icon sidebar */
.wd2d-side { width: var(--wd-side-w); flex: none; display: flex; flex-direction: column; padding: 12px 0; background: var(--surface-panel); border-right: 1px solid var(--border); z-index: 60; overflow-y: auto; }
.wd2d-side-tools { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: 1 1 auto; min-height: 0; }
.wd2d-side-tools .wd2d-tool-btn { flex: 1 1 0; min-height: 54px; max-height: 88px; }
.wd2d-side-divider { width: 40px; height: 1px; background: var(--border); margin: 8px auto; flex: none; }
.wd2d-side-utils { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }

.wd2d-tool-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 68px; padding: 8px 4px; border: 2px solid transparent; border-radius: 14px; background: transparent; color: var(--muted); cursor: pointer; user-select: none; transition: all .2s ease; }
.wd2d-tool-btn:hover { background: var(--surface-hover); color: var(--text); }
.wd2d-tool-btn.active { background: var(--wd-accent-soft); border-color: var(--wd-accent-soft); color: var(--brass); }
.wd2d-tool-btn.on { color: var(--green); }
.wd2d-tool-icon { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--surface-control); transition: all .2s ease; }
.wd2d-tool-btn.active .wd2d-tool-icon { background: var(--surface-panel); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.wd2d-tool-btn.on .wd2d-tool-icon { background: color-mix(in srgb, var(--green), transparent 86%); }
.wd2d-tool-icon svg { width: 17px; height: 17px; }
.wd2d-tool-label { font-size: 10px; font-weight: 700; line-height: 1.15; letter-spacing: .01em; text-align: center; }

/* Section status dot, docked on the icon tile's corner */
.wd2d-dot { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--surface-panel); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.wd2d-dot.pending { background: var(--orange); }
.wd2d-dot.done { background: var(--green); }

/* Sidebar colour-split icon: outside | inside on top, sash below */
.wd2d-colour-split { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; }
.wd2d-cs-top { height: 50%; display: flex; }
.wd2d-cs-outside { width: 50%; height: 100%; border-right: .5px solid rgba(0, 0, 0, .12); }
.wd2d-cs-inside { width: 50%; height: 100%; }
.wd2d-cs-sash { height: 50%; width: 100%; border-top: .5px solid rgba(0, 0, 0, .12); }
/* Door variant: frame band on the left, leaf outside/inside stacked on the right */
.wd2d-colour-split.door { flex-direction: row; }
.wd2d-colour-split.door .wd2d-cs-frame { width: 40%; height: 100%; border-right: .5px solid rgba(0, 0, 0, .12); }
.wd2d-colour-split.door .wd2d-cs-leafwrap { width: 60%; height: 100%; display: flex; flex-direction: column; }
.wd2d-colour-split.door .wd2d-cs-leafout { height: 50%; }
.wd2d-colour-split.door .wd2d-cs-leafin { height: 50%; border-top: .5px solid rgba(0, 0, 0, .12); }

/* 3D door designers: the engine mounts its WebGL canvas into this host (inset below the
   toolbar via .wd2d-canvas-frame, same as the 2D drawing) */
.wd2d-door-host { width: 100%; height: 100%; }
.wd2d-door-host canvas { display: block; width: 100%; height: 100%; border-radius: 12px; }
.wd2d-door-loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 9px; padding: 12px 20px; border-radius: 12px; background: color-mix(in srgb, var(--surface-panel), transparent 8%); border: 1px solid var(--border); color: var(--muted); font-size: 13px; z-index: 5; }

/* Solidor style cards: the manufacturer's own door thumbnails inside a wd2d swatch tile */
.wd2d-style-thumb { display: block; width: 100%; aspect-ratio: 64 / 99; object-fit: contain; border-radius: 6px; background: var(--surface-control); }

/* Composite side panel tiles (composite + arched door Sidelights): tall narrow photos rendered from the door engine,
   five across; the picked one ringed in brass (the grid rule outweighs .wd2d-swatch-grid's own columns) */
.wd2d-swatch-grid.wd2d-sidepanel-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
/* the photos are white panels: a tile a shade off the control surface (either theme) and a hairline frame let them read */
.wd2d-sidepanel-thumb { display: block; width: 100%; aspect-ratio: 1 / 2.8; object-fit: contain; padding: 6px 0; box-sizing: border-box; border-radius: 6px; background: color-mix(in srgb, var(--surface-control), var(--text) 8%); box-shadow: inset 0 0 0 1px var(--border-soft); transition: box-shadow .15s ease; }
.wd2d-swatch:hover .wd2d-sidepanel-thumb { box-shadow: inset 0 0 0 1px var(--border), 0 0 0 1px var(--border); }
.wd2d-swatch.selected .wd2d-sidepanel-thumb { box-shadow: 0 0 0 2px var(--brass); }
.wd2d-sidepanel-grid .wd2d-swatch small { -webkit-line-clamp: 3; }

/* Designer Configuration page (option catalogue + per-designer visibility).
   .catalogue-row is a two-column grid (main | badge) with the action strip on a collapsed
   second row — option rows keep that contract by wrapping swatch + text in ONE cell. */
.dcfg-columns { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr) minmax(0, 1fr); }
.dcfg-option-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dcfg-option-main .catalogue-row-main { flex: 1 1 auto; min-width: 0; }
.dcfg-preview { width: 30px; height: 30px; flex: none; border-radius: 8px; border: 1px solid var(--border); }
/* status badges sit centred in a fixed-width column regardless of Active/Off label length */
.dcfg-columns .catalogue-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.dcfg-columns .catalogue-row .badge { width: 54px; display: inline-flex; align-items: center; justify-content: center; text-align: center; padding-left: 0; padding-right: 0; }
/* one tidy meta line under the name — long codes truncate instead of wrapping ragged */
.dcfg-columns .catalogue-row-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* visibility column: checkbox rows with the default buttons in an aligned right-hand column */
.dcfg-designer-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 8px; }
.dcfg-designer-row:hover { background: var(--surface-hover); }
.dcfg-designer-name { display: flex; align-items: center; gap: 9px; font-size: 13px; cursor: pointer; min-width: 0; }
.dcfg-designer-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dcfg-designer-name input { width: 15px; height: 15px; flex: none; accent-color: var(--brass); }
.dcfg-designer-row .btn-mini { flex: none; min-width: 96px; justify-content: center; }
.dcfg-columns .section-title { margin: 10px 6px 4px; }
.dcfg-columns .section-title:first-child { margin-top: 4px; }

/* Backdrop behind panels/drawer */
.wd2d-backdrop { position: absolute; inset: 0; z-index: 40; background: rgba(0, 0, 0, .4); opacity: 0; pointer-events: none; transition: opacity .26s ease; }
.wd2d-backdrop.visible { opacity: 1; pointer-events: all; }

/* ── Canvas area ── */
.wd2d-canvas-area { flex: 1; min-width: 0; position: relative; overflow: hidden; }
.wd2d-canvas-area.bg-grid { background-color: #f6f8fa; background-image: radial-gradient(rgba(20, 26, 36, .10) 1px, transparent 1px); background-size: 28px 28px; }
.wd2d-canvas-area.bg-clouds { background: url('/img/designer/clouds.jpg') center/cover; }
.wd2d-canvas-area.bg-plain { background: #eef1f4; }
/* The engine sizes the drawing canvas / 3D host to this frame. The preview owns the whole upper
   canvas: the only chrome over it is the view dock along the bottom-left (and the opening card
   bottom-right). 3D scenes are framed by their camera, so they run full-bleed; the 2D window
   drawing paints mm labels to its frame's edge, so it alone keeps a reserve along the bottom. */
.wd2d-canvas-frame { position: absolute; inset: 12px; }
.wd2d-canvas-frame.wd2d-canvas-frame-2d { inset: 12px 12px 64px; }
.wd2d-canvas {
    width: 100%; height: 100%; display: block;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path d="M3 21l1.2-4.2L16.5 4.5a2.12 2.12 0 0 1 3 3L7.2 19.8z" fill="white" stroke="%23222831" stroke-width="1.7" stroke-linejoin="round"/><path d="M14.5 6.5l3 3" stroke="%23222831" stroke-width="1.4"/></svg>') 2 20, crosshair;
}

/* ── View dock (DesignerViewDock.razor) ── the one floating control for how you LOOK at the product.
   Bottom-left, so the preview keeps the whole upper canvas; idles at half strength and wakes on
   hover, keyboard focus or while its menu is open. */
.wd2d-viewdock { position: absolute; left: 16px; bottom: 16px; z-index: 30; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); padding: 6px 8px; border-radius: 14px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface-panel), transparent 8%); backdrop-filter: blur(8px); box-shadow: 0 4px 20px rgba(0, 0, 0, .08); opacity: .5; transition: opacity .18s ease; }
.wd2d-viewdock:hover, .wd2d-viewdock:focus-within, .wd2d-viewdock.is-open { opacity: 1; }
/* the primary button: a switch (two viewpoints) or the camera menu trigger (more) */
.wd2d-vd-btn { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 11px 0 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-control); color: var(--text); font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.wd2d-vd-btn:hover, .wd2d-viewdock.is-open .wd2d-vd-btn[aria-expanded="true"] { border-color: var(--brass); }
.wd2d-vd-label { font-weight: 700; }
/* switch: both states stay visible, the live one lifted in brass (sun = outside, bulb = inside) */
.wd2d-vd-track { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: color-mix(in srgb, var(--text), transparent 92%); }
.wd2d-vd-cell { width: 26px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: var(--muted); transition: all .2s ease; }
.wd2d-vd-cell svg { width: 15px; height: 15px; }
.wd2d-vd-cell.active { background: var(--surface-panel); color: var(--brass); box-shadow: 0 1px 4px rgba(0, 0, 0, .14); }
/* camera trigger: the camera in a brass-soft badge, the current preset's name, a chevron pointing the way the menu opens */
.wd2d-vd-cam { position: relative; }
.wd2d-vd-badge { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px; background: var(--wd-accent-soft); color: var(--brass); }
.wd2d-vd-badge svg { width: 15px; height: 15px; }
.wd2d-vd-chev { display: grid; place-items: center; color: var(--muted); transition: transform .2s ease; }
.wd2d-vd-chev svg { width: 12px; height: 12px; transform: rotate(180deg); }
.wd2d-vd-down .wd2d-vd-chev svg { transform: none; }
.wd2d-viewdock.is-open .wd2d-vd-chev svg { transform: rotate(0deg); }
.wd2d-viewdock.is-open.wd2d-vd-down .wd2d-vd-chev svg { transform: rotate(180deg); }
/* the menu rises from the trigger (or drops from it on a top-pinned dock) */
.wd2d-vd-menu { position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 2; width: 212px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-panel); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); display: flex; flex-direction: column; gap: 2px; opacity: 0; pointer-events: none; transform: translateY(6px); transition: all .2s cubic-bezier(.4, 0, .2, 1); }
.wd2d-viewdock.is-open .wd2d-vd-menu { opacity: 1; pointer-events: all; transform: translateY(0); }
.wd2d-vd-down .wd2d-vd-menu { bottom: auto; top: calc(100% + 10px); left: auto; right: 0; transform: translateY(-6px); }
.wd2d-vd-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; transition: all .15s ease; }
.wd2d-vd-item:hover:not(:disabled) { background: var(--surface-hover); color: var(--brass); }
.wd2d-vd-item.active { color: var(--brass); background: var(--wd-accent-soft); }
.wd2d-vd-item:disabled { opacity: .45; cursor: not-allowed; }
.wd2d-vd-item svg { width: 22px; height: 22px; flex: none; }
.wd2d-vd-item .ui-icon { width: 16px; height: 16px; margin: 0 3px; opacity: .7; }
.wd2d-vd-glyph .g-bar { stroke: none; fill: currentColor; opacity: .5; }
.wd2d-vd-glyph .g-cam { fill: currentColor; stroke: none; }
.wd2d-vd-reset { width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-control); }
.wd2d-vd-reset:hover { border-color: var(--brass); color: var(--brass); background: var(--surface-control); }
/* a click on the canvas closes the menu; the rail and panels stay reachable */
.wd2d-vd-scrim { position: absolute; inset: 0; z-index: 29; }
.wd2d-view-seg { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-control); }
.wd2d-view-seg button { padding: 5px 14px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .2s ease; }
.wd2d-view-seg button.active { background: var(--surface-panel); color: var(--brass); box-shadow: 0 2px 6px rgba(0, 0, 0, .1); }
.wd2d-ct-divider { width: 1px; height: 20px; background: var(--border); }
.wd2d-ct-icon { width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; transition: all .2s ease; }
.wd2d-ct-icon:hover { background: var(--surface-hover); color: var(--text); }
.wd2d-ct-icon.active { color: var(--brass); background: var(--wd-accent-soft); }
.wd2d-ct-icon svg { width: 15px; height: 15px; }

/* Adjust dropdown (rises from the view dock along the bottom of the canvas) */
.wd2d-adjust-wrap { position: relative; }
.wd2d-adjust-dropdown { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px); width: 250px; background: var(--surface-panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); padding: 8px; display: flex; flex-direction: column; gap: 2px; opacity: 0; pointer-events: none; transition: all .2s cubic-bezier(.4, 0, .2, 1); }
.wd2d-adjust-dropdown.open { opacity: 1; pointer-events: all; transform: translateX(-50%) translateY(0); }
.wd2d-adjust-cap { font-size: 9px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding: 7px 10px 3px; }
.wd2d-adjust-item { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-size: 12px; font-weight: 600; text-align: left; cursor: pointer; transition: all .2s ease; }
.wd2d-adjust-item:hover { background: var(--surface-hover); color: var(--brass); }
.wd2d-adjust-item svg { width: 14px; height: 14px; flex: none; opacity: .6; }

/* Opener card — opens beside the clicked pane; the engine (anchorPaneOverlay) sets its left/top,
   data-side (right | left | below | above | dock) and --oc-caret (caret offset along the facing
   edge), and sizes the ring to the pane's glass. Only opening + handle position live here. */
.wd2d-pane-ring { position: absolute; z-index: 34; display: none; pointer-events: none; border-radius: 3px; box-shadow: 0 0 0 2px var(--brass), 0 0 0 6px color-mix(in srgb, var(--brass), transparent 76%); }
.wd2d-pane-ring.is-open { display: block; animation: wd2d-ring-in .2s ease-out; }
.wd2d-opener-card { position: absolute; left: 12px; top: 74px; z-index: 36; display: none; width: 336px; max-width: calc(100% - 24px); padding: 12px 14px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-panel); color: var(--text); box-shadow: 0 18px 44px rgba(0, 0, 0, .26), 0 2px 8px rgba(0, 0, 0, .1); }
.wd2d-opener-card.is-open { display: block; animation: wd2d-oc-in .18s ease-out; }
.wd2d-opener-card:not([data-side]) { visibility: hidden; }   /* until the engine has placed it once */
.wd2d-opener-card[data-side="right"] { transform-origin: left center; }
.wd2d-opener-card[data-side="left"] { transform-origin: right center; }
.wd2d-opener-card[data-side="below"] { transform-origin: center top; }
.wd2d-opener-card[data-side="above"] { transform-origin: center bottom; }
/* caret: a rotated square showing only its two outward edges, pointing at the pane's centre */
.wd2d-opener-card::before { content: ""; position: absolute; display: none; width: 12px; height: 12px; background: var(--surface-panel); border: 1px solid var(--border); transform: rotate(45deg); }
.wd2d-opener-card[data-side="right"]::before { display: block; left: -7px; top: calc(var(--oc-caret, 50%) - 6px); border-top-color: transparent; border-right-color: transparent; }
.wd2d-opener-card[data-side="left"]::before { display: block; right: -7px; top: calc(var(--oc-caret, 50%) - 6px); border-bottom-color: transparent; border-left-color: transparent; }
.wd2d-opener-card[data-side="below"]::before { display: block; top: -7px; left: calc(var(--oc-caret, 50%) - 6px); border-right-color: transparent; border-bottom-color: transparent; }
.wd2d-opener-card[data-side="above"]::before { display: block; bottom: -7px; left: calc(var(--oc-caret, 50%) - 6px); border-top-color: transparent; border-left-color: transparent; }

.wd2d-oc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.wd2d-oc-badge { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--wd-accent-soft); color: var(--brass); }
.wd2d-oc-badge .wd2d-oc-glyph { width: 30px; height: 30px; }
.wd2d-oc-heading { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wd2d-oc-heading b { font-size: 14px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd2d-oc-heading small { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wd2d-oc-section + .wd2d-oc-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.wd2d-oc-label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.wd2d-oc-label span { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.wd2d-oc-label em { font-size: 10.5px; font-style: normal; color: var(--muted); }

/* opening tiles: the openings, a divider, then Fixed / Dummy */
.wd2d-oc-tiles { display: flex; gap: 6px; }
.wd2d-oc-tile { position: relative; flex: 1 1 0; min-width: 0; height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 2px 5px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-control); color: var(--text); font-size: 10.5px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.wd2d-oc-tile .wd2d-oc-glyph { width: 30px; height: 30px; }
.wd2d-oc-tile:hover { border-color: color-mix(in srgb, var(--brass), transparent 35%); }
.wd2d-oc-tile.active { border-color: var(--brass); background: var(--wd-accent-soft); color: var(--brass); }
.wd2d-oc-tile.group-start { margin-left: 9px; }
.wd2d-oc-tile.group-start::before { content: ""; position: absolute; left: -9px; top: 12px; bottom: 12px; width: 1px; background: var(--border); }
.wd2d-oc-tile.unavailable { cursor: not-allowed; border-style: dashed; background: transparent; color: var(--muted); }
.wd2d-oc-tile.unavailable:hover { border-color: var(--border); }
.wd2d-oc-tile.unavailable .wd2d-oc-glyph { opacity: .4; }
/* why an opening is unavailable: shown on hover / keyboard focus, no delay */
.wd2d-oc-tile[data-reason]:hover::after, .wd2d-oc-tile[data-reason]:focus-visible::after { content: attr(data-reason); position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 2; transform: translateX(-50%); width: max-content; max-width: 220px; padding: 7px 9px; border-radius: 8px; background: var(--text); color: var(--surface-panel); font-size: 11px; font-weight: 500; line-height: 1.4; text-align: left; white-space: normal; box-shadow: 0 6px 18px rgba(0, 0, 0, .22); pointer-events: none; }
.wd2d-oc-tile:first-child[data-reason]:hover::after, .wd2d-oc-tile:first-child[data-reason]:focus-visible::after { left: 0; transform: none; }
.wd2d-oc-tile:last-child[data-reason]:hover::after, .wd2d-oc-tile:last-child[data-reason]:focus-visible::after { left: auto; right: 0; transform: none; }
.wd2d-oc-notice { display: flex; align-items: flex-start; gap: 6px; margin: 9px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--orange); }
.wd2d-oc-notice svg { width: 13px; height: 13px; flex: none; margin-top: 1px; }
/* a neutral note under the tiles (what a choice will also do) — the notice above is for problems */
.wd2d-oc-hint { margin: 9px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--muted); }

/* Mullion card — the opener card's shell beside a clicked mullion (anchorMullionOverlay): fixed or
   flying (French casement), and for a flying one the sash it is fixed to */
.wd2d-mullion-card { width: 300px; }
.wd2d-oc-glyph .g-bar { fill: color-mix(in srgb, var(--text), transparent 72%); stroke: color-mix(in srgb, var(--text), transparent 38%); stroke-width: 1; }
.wd2d-oc-glyph .g-fly { fill: currentColor; stroke: none; }
.wd2d-oc-glyph .g-sash.g-carrier { stroke: currentColor; stroke-width: 2; }

/* handle position: standard or reversed lever, drawn as seen from inside */
.wd2d-oc-handles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wd2d-oc-handle { display: flex; align-items: center; gap: 9px; min-width: 0; height: 52px; padding: 0 10px 0 8px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-control); color: var(--text); text-align: left; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.wd2d-oc-handle:hover { border-color: color-mix(in srgb, var(--brass), transparent 35%); }
.wd2d-oc-handle.active { border-color: var(--brass); background: var(--wd-accent-soft); color: var(--brass); }
.wd2d-oc-handle .wd2d-oc-glyph { width: 32px; height: 32px; flex: none; }
.wd2d-oc-handle span { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 12px; font-weight: 700; }
.wd2d-oc-handle small { font-size: 10.5px; font-weight: 500; color: var(--muted); }

/* glyphs: stroke drawings; the tile's colour runs through the opening V and the lever */
.wd2d-oc-glyph { display: block; fill: none; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.wd2d-oc-glyph .g-glass { fill: color-mix(in srgb, #6d93c0, transparent 78%); stroke: none; }
.wd2d-oc-glyph .g-frame { stroke: color-mix(in srgb, var(--text), transparent 50%); stroke-width: 1.5; }
.wd2d-oc-glyph .g-sash { stroke: color-mix(in srgb, var(--text), transparent 12%); stroke-width: 1.6; }
.wd2d-oc-glyph .g-glare { stroke: color-mix(in srgb, var(--text), transparent 62%); stroke-width: 1.2; }
.wd2d-oc-glyph .g-open { stroke: currentColor; stroke-width: 1.4; stroke-dasharray: 2.4 2; }
.wd2d-oc-glyph .g-tilt { stroke: currentColor; stroke-width: 1.2; opacity: .7; }
.wd2d-oc-glyph .g-member { fill: color-mix(in srgb, var(--text), transparent 91%); stroke: color-mix(in srgb, var(--text), transparent 55%); stroke-width: 1.2; }
.wd2d-oc-glyph .g-plate { fill: none; stroke: color-mix(in srgb, var(--text), transparent 35%); stroke-width: 1.2; }
.wd2d-oc-glyph .g-lever { stroke: currentColor; stroke-width: 3.4; }
.wd2d-oc-glyph .g-spindle { fill: currentColor; stroke: none; }
/* the door Sidelights panel's window rows (SidelightWindowPicker) reuse the opener card's tiles and glyphs,
   four to a 274px row: labels stay on one line */
.wd2d-oc-tiles + .slw-row, .slw-hinge + .slw-row, .wd2d-hint + .slw-row { margin-top: 12px; }
.slw-row span, .slw-row em { white-space: nowrap; }
.slw-tiles .wd2d-oc-tile span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

@keyframes wd2d-oc-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes wd2d-ring-in { from { opacity: 0; } to { opacity: 1; } }

.wd2d-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.wd2d-chip { min-width: 38px; height: 34px; padding: 0 12px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-control); color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; transition: all .15s ease; }
.wd2d-chip:hover { border-color: var(--brass); }
.wd2d-chip.active { border-color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 86%); color: var(--brass); }
.wd2d-texture-row { display: flex; flex-wrap: wrap; gap: 6px; }
.wd2d-texture { width: 52px; height: 52px; flex: none; padding: 0; overflow: hidden; border: 2px solid var(--border); border-radius: 8px; background: var(--surface-control); cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.wd2d-texture:hover { border-color: var(--brass); transform: scale(1.06); }
.wd2d-texture.active { border-color: var(--brass); }
/* Obscure swatches are the real glass photos (textures/obscure/photos), shown untouched — no backing or
   filter. The normal maps the engines render from are never shown as swatches. */
.wd2d-texture img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wd2d-texture-clear { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #fff 0%, #e6edf2 100%); }


/* ── Slide-in option panels ── */
.wd2d-panel {
    position: absolute; left: calc(var(--wd-side-w) + 8px); top: 16px; bottom: 16px;
    width: var(--wd-panel-w); z-index: 50;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface-panel); border: 1px solid var(--border); border-radius: 20px;
    box-shadow: var(--wd-shadow);
    transform: translateX(-120%) scale(.95); opacity: 0; pointer-events: none;
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
.wd2d-panel.open { transform: translateX(0) scale(1); opacity: 1; pointer-events: all; }

/* Sub-panels attach to the parent panel's right edge */
.wd2d-subpanel {
    position: absolute; left: calc(var(--wd-side-w) + 8px + var(--wd-panel-w) + 8px); top: 16px; bottom: 16px;
    width: 280px; z-index: 51;
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surface-panel); border: 1px solid var(--border); border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
    transform: translateX(-12px) scale(.97); opacity: 0; pointer-events: none;
    transition: all .24s cubic-bezier(.4, 0, .2, 1);
}
.wd2d-subpanel.open { transform: translateX(0) scale(1); opacity: 1; pointer-events: all; }

.wd2d-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 16px 16px 22px; border-bottom: 1px solid var(--border); flex: none; transition: padding .2s ease; }
.wd2d-panel-head.has-submenu { padding-right: 12px; }
.wd2d-panel-head.has-submenu .wd2d-panel-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.wd2d-panel-title { display: flex; align-items: center; gap: 9px; flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; }
.wd2d-panel-title svg { width: 16px; height: 16px; color: var(--brass); flex: none; }
.wd2d-panel-close { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 0; border-radius: 8px; background: var(--surface-control); color: var(--muted); cursor: pointer; transition: all .2s ease; }
.wd2d-panel-close:hover { background: color-mix(in srgb, var(--red), transparent 86%); color: var(--red); }
.wd2d-panel-close svg { width: 13px; height: 13px; }
.wd2d-panel-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 18px 22px; scroll-behavior: smooth; }
.wd2d-panel-body::-webkit-scrollbar { width: 4px; }
.wd2d-panel-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.wd2d-panel-apply { margin: 0 14px 14px; padding: 11px; flex: none; display: flex; align-items: center; justify-content: center; gap: 7px; background: var(--brass); color: var(--on-accent); border: 0; border-radius: 10px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all .18s ease; }
.wd2d-panel-apply:hover { background: color-mix(in srgb, var(--brass), #fff 14%); transform: translateY(-1px); }
.wd2d-panel-apply svg { width: 14px; height: 14px; }

.wd2d-section-label { display: block; font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin: 2px 0 8px; }
.wd2d-hint { font-size: 11px; color: var(--muted); line-height: 1.55; margin: 10px 0 0; display: flex; align-items: flex-start; gap: 6px; }
.wd2d-hint svg { width: 13px; height: 13px; color: var(--brass); flex: none; margin-top: 1px; }

/* Style cards (frame type) */
.wd2d-style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wd2d-style-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface-control); color: var(--text); cursor: pointer; transition: all .2s ease; }
.wd2d-style-card:hover { border-color: var(--brass); background: var(--wd-accent-soft); }
.wd2d-style-card.selected { border-color: var(--brass); background: var(--wd-accent-soft); }
.wd2d-style-card svg { width: 46px; height: 46px; color: color-mix(in srgb, var(--text), var(--muted) 30%); }
.wd2d-style-card.selected svg { color: var(--brass); }
.wd2d-style-card span { font-size: 11px; font-weight: 700; }

/* Option rows (glass / glazing / hardware / extras) */
.wd2d-option-list { display: flex; flex-direction: column; gap: 6px; }
.wd2d-option-row { position: relative; display: flex; align-items: center; gap: 11px; padding: 11px 13px; border: 2px solid transparent; border-radius: 10px; background: var(--surface-control); color: var(--text); text-align: left; cursor: pointer; transition: all .18s ease; }
.wd2d-option-row:hover { border-color: var(--brass); background: var(--surface-hover); }
.wd2d-option-row.selected { border-color: var(--brass); background: var(--wd-accent-soft); }
.wd2d-or-icon { width: 30px; flex: none; display: grid; place-items: center; color: var(--muted); }
/* handle rows: the 290×150 handle image, shown on a light chip so a chrome handle reads on dark themes */
.wd2d-or-thumb { width: 58px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 6px; background: #f3f4f5; overflow: hidden; }
.wd2d-or-thumb img { width: 56px; height: 29px; object-fit: contain; display: block; }
.handle-thumb-col { width: 64px; }
/* handle colour swatches (Hardware panel) */
.wd2d-finish-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 4px 0 10px; }
.wd2d-finish { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 6px 7px; border-radius: 8px; border: 1px solid var(--line, rgba(127,127,127,.25)); background: transparent; color: inherit; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.wd2d-finish:hover { border-color: var(--brass); }
.wd2d-finish.selected { border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); }
.wd2d-finish-chip { width: 18px; height: 18px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.wd2d-finish-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.handle-thumb { width: 58px; height: 30px; object-fit: contain; display: block; border-radius: 4px; background: #f3f4f5; }
/* uPVC door Hardware panel: the handle set switch, then photo tiles from the shared door handle
   library (photos are transparent — the light chip keeps white and chrome handles readable on dark themes) */
.door-hw-sets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.door-hw-set { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 8px 10px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface-control); color: var(--text); text-align: center; cursor: pointer; transition: border-color .18s ease, background-color .18s ease; }
.door-hw-set:hover { border-color: var(--brass); }
.door-hw-set.selected { border-color: var(--brass); background: var(--wd-accent-soft); }
.door-hw-set svg { width: 54px; height: 36px; color: color-mix(in srgb, var(--text), var(--muted) 30%); }
.door-hw-set.selected svg { color: var(--brass); }
.door-hw-set-label { font-size: 12px; font-weight: 800; }
.door-hw-set-sub { font-size: 10px; line-height: 1.3; color: var(--muted); }
/* after .wd2d-swatch-grid in weight (it is declared later in this sheet) */
.wd2d-swatch-grid.door-hw-finishes { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 16px; }
.door-hw-finishes .wd2d-swatch-chip { border-radius: 50%; }
.door-hw-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.door-hw-tile { position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0; padding: 5px 5px 7px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface-control); color: var(--text); text-align: center; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.door-hw-tile:hover { border-color: var(--brass); }
.door-hw-tile.selected { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass); }
.door-hw-tile.selected::after { content: ""; position: absolute; top: 9px; left: 9px; width: 16px; height: 16px; border-radius: 50%; background: var(--brass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.door-hw-tile img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: contain; border-radius: 7px; background: linear-gradient(180deg, #f6f7f8, #e4e7e9); }
.door-hw-name { margin-top: 5px; font-size: 11px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.door-hw-brand { font-size: 9.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.door-hw-price { position: absolute; top: 8px; right: 8px; padding: 1px 5px; border-radius: 5px; background: var(--surface-panel); color: var(--brass); font-size: 9.5px; font-weight: 800; }
/* Composite door: decorative glass and door furniture tiles — the handle tiles with a few variants
   (four across for knockers, landscape photos for letterplates and weather bars, a dashed "None", and
   a greyed piece the door's style has no room for). */
.door-hw-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* the patio pull handles: four photos two by two */
.door-hw-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.door-hw-tile.wide img { aspect-ratio: 16 / 9; }
.door-hw-none { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4; border: 1.5px dashed var(--border); border-radius: 7px; color: var(--muted); }
.door-hw-tile.wide .door-hw-none { aspect-ratio: 16 / 9; }
/* cat flaps: square product photos, two by two with a dashed "None"; the colour chips carry a swatch */
.door-hw-tile.square img, .door-hw-tile.square .door-hw-none { aspect-ratio: 1 / 1; }
.door-flap-colours .wd2d-chip { grid-auto-flow: column; gap: 6px; height: 30px; padding: 0 10px; font-size: 12.5px; }
.door-flap-colours .wd2d-mini-swatch { width: 14px; height: 14px; }
.door-hw-none svg { width: 18px; height: 18px; }
.door-hw-tile:disabled { opacity: .42; cursor: not-allowed; filter: grayscale(.7); }
.door-hw-tile:disabled:hover { border-color: var(--border); }
.door-furn-head { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 8px; }
.door-furn-head .wd2d-section-label { margin: 0; }
.door-furn-current { margin-left: auto; max-width: 62%; overflow: hidden; font-size: 11px; font-weight: 700; color: var(--brass); white-space: nowrap; text-overflow: ellipsis; }
.door-furn-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 4px; }
.door-furn-card { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 6px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface-control); }
.door-furn-card img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; border-radius: 7px; background: linear-gradient(180deg, #f6f7f8, #e4e7e9); }
.door-furn-card-body { display: flex; flex-direction: column; gap: 4px; padding: 0 2px 2px; }
.door-furn-card .wd2d-toggle-row { padding: 2px 0; border-bottom: 0; }
.door-furn-number { height: 32px; text-align: center; font-weight: 800; letter-spacing: .12em; }
.door-furn-note { font-size: 10px; line-height: 1.3; color: var(--muted); }
.door-hw-closeups { display: flex; align-items: center; gap: 6px; margin: 2px 0 4px; font-size: 11px; font-weight: 700; color: var(--muted); }
.door-hw-closeups span { margin-right: auto; }
.door-hw-closeups .wd2d-chip { height: 28px; font-size: 12px; }
.wd2d-or-icon svg { width: 17px; height: 17px; }
.wd2d-option-row.selected .wd2d-or-icon { color: var(--brass); }
.wd2d-or-info { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.wd2d-or-label { font-size: 12px; font-weight: 700; }
.wd2d-or-sub { font-size: 10px; color: var(--muted); margin-top: 1px; }
.wd2d-or-price { flex: none; font-size: 11px; font-weight: 700; color: var(--brass); white-space: nowrap; }

/* Colour swatch grid */
.wd2d-swatch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.wd2d-swatch { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: var(--text); cursor: pointer; min-width: 0; }
.wd2d-swatch-chip { display: block; width: 100%; aspect-ratio: 1; border-radius: 9px; border: 3px solid transparent; box-shadow: inset 0 0 0 1px var(--border); transition: all .15s ease; }
.wd2d-swatch:hover .wd2d-swatch-chip { transform: scale(1.07); }
.wd2d-swatch.selected .wd2d-swatch-chip { border-color: var(--surface-panel); box-shadow: 0 0 0 2px var(--brass); }
.wd2d-swatch small { font-size: 9px; color: var(--muted); font-weight: 600; line-height: 1.15; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wd2d-swatch-pct { font-size: 8.5px; font-style: normal; color: var(--brass); background: var(--wd-accent-soft); border-radius: 5px; padding: 1px 4px; }

/* Inside / sash sub-panel launch rows */
.wd2d-subrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.wd2d-subrow .wd2d-section-label { margin: 0; }
.wd2d-sub-open { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-control); color: var(--muted); font-size: 10px; font-weight: 700; cursor: pointer; transition: all .2s ease; }
.wd2d-sub-open:hover, .wd2d-sub-open.active { border-color: var(--brass); color: var(--brass); background: var(--wd-accent-soft); }
.wd2d-sub-open svg { width: 11px; height: 11px; }

/* Dimensions panel */
.wd2d-size-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.wd2d-size-label { font-size: 10.5px; font-weight: 700; color: color-mix(in srgb, var(--text), var(--muted) 35%); text-transform: uppercase; letter-spacing: .05em; }
.wd2d-size-input-wrap { display: flex; align-items: stretch; }
.wd2d-size-input { flex: 1; min-width: 0; background: var(--surface-control); border: 1.5px solid var(--border); border-right: 0; color: var(--text); padding: 9px 13px; font-size: 16px; font-weight: 600; border-radius: 8px 0 0 8px; outline: none; transition: border-color .15s ease; }
.wd2d-size-input:focus { border-color: var(--brass); }
.wd2d-size-unit { display: grid; place-items: center; background: var(--surface-hover); border: 1.5px solid var(--border); color: var(--muted); padding: 0 12px; font-size: 12px; font-weight: 600; border-radius: 0 8px 8px 0; }
.wd2d-size-steps { display: flex; gap: 6px; }
.wd2d-size-steps button { flex: 1; background: var(--surface-control); border: 1.5px solid var(--border); color: var(--muted); padding: 6px; border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 600; transition: all .15s ease; }
.wd2d-size-steps button:hover { background: var(--surface-hover); color: var(--text); }
.wd2d-size-steps button:active { background: var(--wd-accent-soft); color: var(--brass); }

/* Toggle + misc rows */
.wd2d-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px; border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 40%); font-size: 12px; font-weight: 600; }
.wd2d-field-row { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.wd2d-field-static { display: flex; align-items: center; opacity: .75; cursor: default; }
.wd2d-inline-actions { display: flex; gap: 8px; margin-top: 12px; }
.wd2d-inline-actions .btn { flex: 1; justify-content: center; }
.wd2d-bar-swatches { display: flex; gap: 8px; }
.wd2d-bar-swatch { width: 30px; height: 30px; border-radius: 7px; border: 2px solid var(--border); cursor: pointer; transition: all .15s ease; padding: 0; }
.wd2d-bar-swatch:hover { transform: scale(1.08); }
.wd2d-bar-swatch.active { border-color: var(--brass); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brass), transparent 70%); }

/* ── Price breakdown drawer (slides in from the right) ── */
.wd2d-drawer { position: absolute; right: 0; top: 0; bottom: 0; width: 320px; z-index: 55; display: flex; flex-direction: column; background: var(--surface-panel); border-left: 1px solid var(--border); transform: translateX(100%); transition: transform .26s cubic-bezier(.4, 0, .2, 1); }
.wd2d-drawer.open { transform: translateX(0); }
.wd2d-drawer-head { padding: 20px 20px 14px; border-bottom: 1px solid var(--border); flex: none; }
.wd2d-drawer-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.wd2d-drawer-title svg { width: 16px; height: 16px; color: var(--green); }
.wd2d-drawer-sub { font-size: 11px; color: var(--muted); margin-top: 3px; }
.wd2d-drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; }
.wd2d-breakdown-meta { font-size: 10px; margin-bottom: 8px; }
.wd2d-breakdown-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 40%); }
.wd2d-breakdown-row span:first-child { color: var(--muted); font-weight: 600; }
.wd2d-breakdown-row.subtotal { border-bottom: 0; margin-top: 4px; border-top: 2px solid var(--brass); padding-top: 10px; font-weight: 700; }
.wd2d-breakdown-row.subtotal span:first-child { color: var(--text); }
/* building-work rows in the drawer carry their own remove button */
.wd2d-breakdown-row.removable { justify-content: flex-start; }
.wd2d-breakdown-row.removable span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd2d-breakdown-row.removable .wd2d-panel-close { width: 22px; height: 22px; flex: none; }
.wd2d-breakdown-row.removable .wd2d-panel-close svg { width: 10px; height: 10px; }
.wd2d-total-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 14px 16px; border-radius: 10px; background: var(--surface-control); }
.wd2d-total-card span { font-size: 13px; font-weight: 700; }
.wd2d-total-card b { font-size: 21px; font-weight: 800; color: var(--green); font-variant-numeric: tabular-nums; }
.wd2d-drawer-close { margin: 0 20px 20px; padding: 11px; flex: none; display: flex; align-items: center; justify-content: center; gap: 7px; background: transparent; border: 1.5px solid var(--border); color: var(--muted); border-radius: 10px; cursor: pointer; font-size: 12px; font-weight: 600; transition: all .15s ease; }
.wd2d-drawer-close:hover { border-color: var(--red); color: var(--red); }
.wd2d-drawer-close svg { width: 13px; height: 13px; }

/* Building work (extras panel add row — the added lines live in the price drawer) */
.wd2d-bwork-add { display: flex; gap: 6px; align-items: center; }
.wd2d-bwork-add .field { padding: 7px 8px; font-size: 12px; min-width: 0; }
.wd2d-bwork-qty { width: 52px; flex: none; text-align: center; }
.wd2d-bwork-add .btn { flex: none; padding: 8px 12px; }

/* ── Toasts ── */
.wd2d-toast-stack { position: fixed; bottom: 56px; left: 50%; transform: translateX(-50%); z-index: 400; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.wd2d-toast { display: flex; align-items: center; gap: 10px; max-width: 380px; padding: 11px 17px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-panel); color: var(--text); font-size: 12px; font-weight: 500; box-shadow: 0 8px 32px rgba(0, 0, 0, .3); backdrop-filter: blur(12px); animation: wd2d-toast-in .3s ease both; transition: opacity .3s ease; }
.wd2d-toast svg { width: 15px; height: 15px; flex: none; }
.wd2d-toast.success { border-color: color-mix(in srgb, var(--green), transparent 40%); }
.wd2d-toast.success svg { color: var(--green); }
.wd2d-toast.info { border-color: color-mix(in srgb, var(--brass), transparent 40%); }
.wd2d-toast.info svg { color: var(--brass); }
@keyframes wd2d-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

/* ── 3D preview overlay — covers just the canvas area; the sidebar stays live and the same
      "3D view" button (now reading "2D view") toggles back. Sits under the backdrop/panels so
      option panels still slide over it and the live-rebuild watcher shows changes in 3D. ── */
.wd2d-3d-overlay { position: absolute; inset: 0; z-index: 38; display: flex; flex-direction: column; background:
    radial-gradient(1200px 600px at 50% 20%, color-mix(in srgb, var(--brass), transparent 94%), transparent 60%),
    linear-gradient(180deg, var(--surface-page) 0%, color-mix(in srgb, var(--surface-page), #46648c 14%) 100%); }
.wd2d-3d-badge { position: absolute; top: 16px; right: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; background: linear-gradient(135deg, color-mix(in srgb, var(--brass), transparent 10%), color-mix(in srgb, var(--brass), #000 25%)); color: #10151c; font-size: 11px; font-weight: 700; z-index: 2; }
.wd2d-3d-badge svg { width: 13px; height: 13px; }
.wd2d-3d-host { flex: 1; min-height: 0; }
.wd2d-3d-host canvas { display: block; width: 100%; height: 100%; }
.wd2d-3d-loading { display: flex; align-items: center; gap: 9px; justify-content: center; padding: 12px; color: var(--muted); font-size: 13px; }
.wd2d-3d-error { margin: 12px 16px; }

/* Opening amount card (casement/tilt-turn only — flush leaves are fixed-built) */
/* ── Opening dock (DesignerOpeningDock / DesignerOpeningSlider) ── the view dock's twin, bottom-right,
   for how the product MOVES. Same line height, pill, blur and half-strength idle; wraps onto a
   second line on a narrow canvas instead of growing taller. */
.wd2d-opendock { position: absolute; right: 16px; bottom: 16px; z-index: 30; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; max-width: calc(100% - 32px); padding: 6px 8px; border-radius: 14px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface-panel), transparent 8%); backdrop-filter: blur(8px); box-shadow: 0 4px 20px rgba(0, 0, 0, .08); opacity: .5; transition: opacity .18s ease; }
.wd2d-opendock:hover, .wd2d-opendock:focus-within { opacity: 1; }
.wd2d-od-group { display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-control); color: var(--text); white-space: nowrap; transition: border-color .15s ease; }
.wd2d-od-group:hover:not(.disabled) { border-color: var(--brass); }
.wd2d-od-group.disabled { opacity: .45; }
.wd2d-od-badge { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--wd-accent-soft); color: var(--brass); }
.wd2d-od-badge svg { width: 15px; height: 15px; }
/* the label folds away with the dock's idle fade and unfolds as the dock wakes */
.wd2d-od-label { font-size: 12px; font-weight: 700; max-width: 0; margin-right: -6px; opacity: 0; overflow: hidden; transition: max-width .22s ease, opacity .18s ease, margin .22s ease; }
.wd2d-opendock:hover .wd2d-od-label, .wd2d-opendock:focus-within .wd2d-od-label { max-width: 140px; margin-right: 2px; opacity: 1; }
/* the slider's end icons: shut on the left, the motion on the right; each an instant set, lit when the value sits at that end */
.wd2d-od-end { width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; transition: all .15s ease; }
.wd2d-od-end svg { width: 15px; height: 15px; }
.wd2d-od-end:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); }
.wd2d-od-end.active { color: var(--brass); background: var(--wd-accent-soft); }
.wd2d-od-end:disabled { cursor: default; }
.wd2d-od-value { min-width: 34px; text-align: right; font-size: 11.5px; font-weight: 800; color: var(--brass); font-variant-numeric: tabular-nums; }
.wd2d-od-slider { -webkit-appearance: none; appearance: none; width: 112px; height: 5px; margin: 0; background: color-mix(in srgb, var(--text), transparent 85%); border-radius: 3px; outline: none; cursor: pointer; }
.wd2d-od-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; background: var(--brass); border: 2.5px solid var(--surface-panel); border-radius: 50%; box-shadow: 0 2px 5px rgba(0, 0, 0, .2); transition: transform .1s ease; }
.wd2d-od-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.wd2d-od-slider::-moz-range-thumb { width: 13px; height: 13px; background: var(--brass); border: 2.5px solid var(--surface-panel); border-radius: 50%; }
.wd2d-od-slider:focus-visible { box-shadow: 0 0 0 3px var(--wd-accent-soft); }
.wd2d-od-slider:disabled { cursor: default; }
.wd2d-od-btns { display: flex; gap: 4px; }
.wd2d-od-chip { height: 34px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-control); color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: all .15s ease; }
.wd2d-od-chip:hover:not(:disabled) { border-color: var(--brass); color: var(--text); }
.wd2d-od-chip:disabled { opacity: .45; cursor: default; }
.wd2d-od-switch { display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 6px 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-control); color: var(--text); font-size: 12px; font-weight: 700; white-space: nowrap; }
.wd2d-bay-pane-3d .wd2d-opendock { right: 12px; bottom: 12px; }
/* two or more motions (stable door leaves, tilt & turn, the sashes): the groups stack as aligned rows —
   one grid per row with the same columns (label | shut | slider | open | value), so the sliders start
   and end on the same lines and the values sit in one column; a switch takes a row of its own */
.wd2d-opendock:has(.wd2d-od-group ~ .wd2d-od-group) { flex-direction: column; align-items: stretch; gap: 6px; }
.wd2d-opendock:has(.wd2d-od-group ~ .wd2d-od-group) .wd2d-od-group { display: grid; grid-template-columns: auto 24px minmax(112px, 1fr) 24px 40px; gap: 6px; }
.wd2d-opendock:has(.wd2d-od-group ~ .wd2d-od-group) .wd2d-od-slider { width: 100%; }
.wd2d-opendock:has(.wd2d-od-group ~ .wd2d-od-group):is(:hover, :focus-within) .wd2d-od-label { width: 88px; }
.wd2d-opendock:has(.wd2d-od-group ~ .wd2d-od-group) .wd2d-od-switch { justify-content: space-between; }

/* ── touch and small screens ── no hover to wake a dock, so both sit nearer full strength and the labels
   stay unfolded; the end icons grow to finger size; under 640px the two docks can no longer share one
   line, so the opening dock stacks above the view dock, spans the canvas and lets its slider stretch */
@media (hover: none) {
    .wd2d-viewdock, .wd2d-opendock { opacity: .85; }
    .wd2d-od-label { max-width: 140px; margin-right: 2px; opacity: 1; }
    .wd2d-opendock:has(.wd2d-od-group ~ .wd2d-od-group) .wd2d-od-label { width: 88px; }
    .wd2d-od-end { width: 30px; height: 30px; }
}
/* tablets: both docks still share the bottom line, but each keeps to its own lane — the view dock to
   roughly 300px on the left (its own tools wrap inside it), the opening dock to what is left on the
   right, so a two-slider dock (stable door, tilt & turn) wraps onto a second line there instead of
   running into the view dock */
@media (max-width: 1024px) and (min-width: 641px) {
    .wd2d-viewdock { flex-wrap: wrap; max-width: 300px; }
    .wd2d-vd-label { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
    .wd2d-opendock { max-width: calc(100% - 332px); }
    .wd2d-od-slider { width: 96px; }
    .wd2d-bay-pane-3d .wd2d-opendock { max-width: calc(100% - 24px); }
}
@media (max-width: 640px) {
    .wd2d-viewdock { left: 10px; bottom: 10px; max-width: calc(100% - 20px); }
    .wd2d-opendock { left: 10px; right: 10px; bottom: 64px; max-width: none; justify-content: stretch; }
    .wd2d-opendock .wd2d-od-group { flex: 1 1 100%; }
    .wd2d-od-slider { flex: 1; width: auto; min-width: 60px; }
    .wd2d-vd-menu { width: min(212px, calc(100vw - 40px)); }
    .wd2d-canvas-frame { inset: 8px; }
    .wd2d-canvas-frame.wd2d-canvas-frame-2d { inset: 8px 8px 58px; }
}

/* panel slider (the sash designer's meeting-rail split); the canvas docks use .wd2d-od-slider */
.wd2d-3d-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--surface-control); border-radius: 3px; outline: none; cursor: pointer; }
.wd2d-3d-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background: var(--brass); border: 3px solid var(--surface-panel); border-radius: 50%; box-shadow: 0 2px 5px rgba(0, 0, 0, .2); transition: transform .1s ease; }
.wd2d-3d-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.wd2d-3d-slider::-moz-range-thumb { width: 15px; height: 15px; background: var(--brass); border: 3px solid var(--surface-panel); border-radius: 50%; }

/* ── Setup modal ── */
.wd2d-setup-backdrop { position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, #000, transparent 45%); backdrop-filter: blur(6px); }
.wd2d-setup { width: min(440px, 100%); background: var(--surface-panel); border: 1px solid var(--border); border-radius: 20px; padding: 24px; box-shadow: 0 30px 70px rgba(0, 0, 0, .4); animation: rise-in .3s cubic-bezier(.22, 1, .36, 1) both; }
.wd2d-setup h3 { margin: 0 0 4px; font-size: 19px; font-weight: 800; }
.wd2d-setup > p { margin: 0 0 16px; }
.wd2d-setup-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* ── Designer dialogs (built by WinDesignScript.js: sizing + design-rule warnings) ──
   These used to be raw Bootstrap modals, so they ignored the theme and were unreadable in light
   mode. One token-driven language now covers both, matching the setup modal above. */
.wd2d-modal { position: fixed; inset: 0; z-index: 90; display: none; place-items: center; padding: 20px; overflow-y: auto; background: color-mix(in srgb, #000, transparent 45%); backdrop-filter: blur(6px); }
.wd2d-modal.is-open { display: grid; }
/* a warning raised while a sizing dialog is open must land ON TOP of it, not behind its scrim */
.wd2d-modal--warn { z-index: 95; }
.wd2d-modal-card { width: min(420px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; background: var(--surface-panel); color: var(--text); border: 1px solid var(--border); border-radius: 20px; padding: 22px 24px 18px; box-shadow: 0 30px 70px rgba(0, 0, 0, .4); animation: rise-in .3s cubic-bezier(.22, 1, .36, 1) both; }
.wd2d-modal-head { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; }
.wd2d-modal-icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; background: color-mix(in srgb, var(--brass), transparent 86%); border: 1px solid color-mix(in srgb, var(--brass), transparent 62%); color: var(--brass); }
/* on the pale light-theme badge, brass-on-cream is too soft — darken the glyph instead. Scoped to
   the SIZE variant: unscoped it would outrank .wd2d-modal--warn and repaint the orange glyph. */
:root.light .wd2d-modal--size .wd2d-modal-icon { color: var(--accent-ink); }
.wd2d-modal--warn .wd2d-modal-icon { background: color-mix(in srgb, var(--orange), transparent 86%); border-color: color-mix(in srgb, var(--orange), transparent 62%); color: var(--orange); }
.wd2d-modal-title { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.wd2d-modal-sub { margin: 0 0 16px; font-size: 12px; color: var(--muted); }
.wd2d-modal-text { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--text); }
.wd2d-modal-fields { display: grid; gap: 12px; }
.wd2d-modal-field { display: grid; gap: 6px; }
.wd2d-modal-field > span { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.wd2d-modal-input { position: relative; display: flex; align-items: center; }
.wd2d-modal-input input { width: 100%; height: 38px; padding: 0 44px 0 12px; background: var(--surface-control); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; transition: border-color .18s ease, box-shadow .18s ease; }
.wd2d-modal-input input:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass), transparent 70%); }
/* spinners crowd a 4-digit mm field and look nothing like the rest of the studio */
.wd2d-modal-input input::-webkit-outer-spin-button,
.wd2d-modal-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wd2d-modal-input input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.wd2d-modal-unit { position: absolute; right: 12px; font-size: 11px; font-weight: 700; color: color-mix(in srgb, var(--muted), var(--text) 45%); pointer-events: none; }
.wd2d-modal-message { margin-top: 12px; font-size: 12px; line-height: 1.45; color: var(--red); }
/* --red is tuned for the dark theme (#ef4444 is only 3.3:1 on white), so the light theme darkens
   the inline error rather than leaving it the palest text in the dialog. */
:root.light .wd2d-modal-message { color: color-mix(in srgb, var(--red), #000 32%); }
/* keep the empty message in the tree (display:none would drop the live region, so a validation
   error that appears later is never announced); an empty div has no height anyway. */
.wd2d-modal-message:empty { margin-top: 0; }
/* the sizing dialog's Equalise rows (one per divided axis): a button applies at once and closes */
.wd2d-modal-equalise { display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.wd2d-modal-equalise[hidden] { display: none; }
.wd2d-modal-eq-cap { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.wd2d-modal-eq-rows { display: grid; gap: 8px; }
.wd2d-modal-eq-row { display: flex; align-items: center; gap: 10px; }
.wd2d-modal-eq-row > span { flex: 0 0 58px; font-size: 12px; font-weight: 700; color: var(--text); }
.wd2d-modal-eq-btns { flex: 1; display: flex; gap: 8px; }
.wd2d-modal-eq-btns .wd2d-modal-eq-btn { flex: 1 1 0; min-width: 0; height: 34px; padding: 0 10px; justify-content: center; font-size: 12.5px; }
.wd2d-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.wd2d-modal-actions .btn { flex: 0 0 auto; min-width: 88px; }

/* ── Glass / Glazing / Extras panels ──
   Every choice applies live to the "Apply to" scope, so the scrim behind these panels stays light
   enough to watch the drawing change. Controls are compact to fit the 320px (270px) panel. */
.wd2d-backdrop.visible.wd2d-backdrop-live { background: rgba(0, 0, 0, .12); }
.wd2d-section-gap { margin-top: 18px; }
.wd2d-option-list-tight { gap: 5px; }
.wd2d-option-list-tight .wd2d-option-row { padding: 9px 11px; }
.wd2d-or-price.muted { color: var(--muted); font-weight: 600; }

/* Glazing unit: two side-by-side cards */
.wd2d-unit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wd2d-unit-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 10px 11px; border: 2px solid transparent; border-radius: 10px; background: var(--surface-control); color: var(--text); text-align: left; cursor: pointer; transition: all .18s ease; }
.wd2d-unit-card:hover { border-color: var(--brass); background: var(--surface-hover); }
.wd2d-unit-card.selected { border-color: var(--brass); background: var(--wd-accent-soft); }
.wd2d-unit-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; }
.wd2d-unit-top b { font-size: 12px; font-weight: 700; line-height: 1.25; }
.wd2d-unit-rating { flex: none; padding: 1px 5px; border-radius: 5px; background: color-mix(in srgb, var(--green), transparent 84%); color: var(--green); font-size: 9px; font-style: normal; font-weight: 800; }
.wd2d-unit-card small { font-size: 9.5px; line-height: 1.35; color: var(--muted); }
.wd2d-unit-price { margin-top: auto; padding-top: 2px; font-size: 11px; font-weight: 700; color: var(--brass); }

/* Label + control rows, compact segmented controls, −/value/+ steppers */
.wd2d-ctl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.wd2d-ctl-label { display: flex; flex-direction: column; min-width: 0; font-size: 11px; font-weight: 700; line-height: 1.2; color: color-mix(in srgb, var(--text), var(--muted) 30%); }
.wd2d-ctl-label small { margin-top: 1px; font-size: 9.5px; font-weight: 600; color: var(--muted); }
.wd2d-ctl-label-block { margin: 12px 0 6px; }
.wd2d-ctl-desc { margin: 6px 0 0; font-size: 10.5px; line-height: 1.45; color: var(--muted); }
.wd2d-seg { display: inline-flex; flex: none; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-control); }
.wd2d-seg button { padding: 4px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: all .15s ease; }
.wd2d-seg button:hover { color: var(--text); }
.wd2d-seg button.active { background: var(--surface-panel); color: var(--brass); box-shadow: 0 1px 4px rgba(0, 0, 0, .12); }
.wd2d-seg-wrap { display: flex; flex-wrap: wrap; width: 100%; }
.wd2d-seg-wrap button { flex: 1 1 auto; }
.wd2d-stepper { display: inline-flex; flex: none; align-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-control); overflow: hidden; }
.wd2d-stepper button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; color: var(--text); font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer; transition: all .15s ease; }
.wd2d-stepper button:hover:not(:disabled) { background: var(--surface-hover); color: var(--brass); }
.wd2d-stepper button:disabled { opacity: .35; cursor: default; }
.wd2d-stepper b { min-width: 26px; text-align: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wd2d-stepper-sm button { width: 24px; height: 24px; font-size: 13px; }
.wd2d-stepper-sm b { min-width: 20px; font-size: 12px; }

/* Texture | Feature tabs */
.wd2d-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-control); }
.wd2d-tabs button { padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s ease; }
.wd2d-tabs button:hover { color: var(--text); }
.wd2d-tabs button.active { background: var(--surface-panel); color: var(--brass); box-shadow: 0 2px 6px rgba(0, 0, 0, .1); }

/* Apply-to scope + pane mini-map. The panes are drawn as glass on the frame colour, so they read
   the same in both themes; the tags are dark pills with light text like the drawing's own. */
.wd2d-scope { margin-top: 14px; padding: 4px 10px 10px; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--surface-control), transparent 45%); }
.wd2d-scope .wd2d-scope-head { margin: 6px 0 10px; }
.wd2d-minimap { display: flex; justify-content: center; padding: 12px 10px; border-radius: 9px; background: var(--surface-panel); border: 1px solid color-mix(in srgb, var(--border), transparent 30%); }
.wd2d-mm-stage { position: relative; max-width: calc(100% - 10px); background: var(--wd2d-mm-frame, #e9ecef); box-shadow: 0 0 0 5px var(--wd2d-mm-frame, #e9ecef), 0 0 0 6px rgba(0, 0, 0, .2); }
.wd2d-mm-pane { position: absolute; display: flex; align-items: flex-end; justify-content: flex-start; padding: 2px; border: 1.5px solid transparent; border-radius: 1px; background: linear-gradient(160deg, #d6e6f3 0%, #a6c0d8 100%); overflow: hidden; cursor: pointer; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.wd2d-mm-pane:hover { border-color: var(--brass); }
.wd2d-mm-pane:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.wd2d-mm-pane.textured { background: repeating-linear-gradient(135deg, #eef3f7 0 2px, #cfdbe6 2px 4px); }
.wd2d-mm-pane.opener::after { content: ""; position: absolute; inset: 3px; border: 1px dashed rgba(20, 30, 45, .35); pointer-events: none; }
.wd2d-mm-pane.picked { border-color: var(--brass); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--brass), transparent 40%); background: linear-gradient(160deg, color-mix(in srgb, var(--brass), #d6e6f3 62%) 0%, color-mix(in srgb, var(--brass), #a6c0d8 66%) 100%); }
.wd2d-mm-pane.picked.textured { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--brass), #eef3f7 70%) 0 2px, color-mix(in srgb, var(--brass), #cfdbe6 62%) 2px 4px); }
.wd2d-mm-badges { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.wd2d-mm-tag { padding: 0 3px; border-radius: 3px; background: rgba(16, 21, 28, .84); color: #fff; font-size: 7.5px; font-weight: 800; line-height: 12px; letter-spacing: .03em; }
.wd2d-mm-dot { width: 9px; height: 9px; border-radius: 50%; background: #f7f9fb radial-gradient(rgba(16, 21, 28, .4) .8px, transparent 1.1px) 0 0 / 3px 3px; box-shadow: 0 0 0 1px rgba(16, 21, 28, .5); }
.wd2d-mm-glyph { display: grid; place-items: center; width: 13px; height: 13px; border-radius: 3px; background: rgba(16, 21, 28, .84); color: #fff; }
.wd2d-mm-glyph svg { width: 10px; height: 10px; }
/* A slim area (a sidelight beside a door, a narrow side pane) is too narrow for a tag laid across it:
   there the badges stack and the glass-type tag reads down the pane. A shallow one (a toplight over
   a door) gets smaller badges in one row. The panes are sized by their inline style, so size
   containment changes nothing about their own layout. */
.wd2d-mm-pane { container-type: size; }
@container (max-width: 24px) {
    .wd2d-mm-badges { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; margin-left: -1px; }
    .wd2d-mm-tag { padding: 3px 0; line-height: 10px; letter-spacing: 0; writing-mode: vertical-rl; text-orientation: upright; }
    .wd2d-mm-glyph { width: 10px; height: 10px; }
    .wd2d-mm-glyph svg { width: 8px; height: 8px; }
}
@container (max-height: 20px) and (min-width: 25px) {
    .wd2d-mm-badges { flex-wrap: nowrap; }
    .wd2d-mm-tag { padding: 0 2px; line-height: 10px; }
    .wd2d-mm-dot { width: 8px; height: 8px; }
    .wd2d-mm-glyph { width: 10px; height: 10px; }
    .wd2d-mm-glyph svg { width: 8px; height: 8px; }
}
.wd2d-mm-caption { margin: 6px 0 0; font-size: 10px; line-height: 1.4; color: var(--muted); text-align: center; }

/* Texture tiles (4 across) — thumbnails are the engine's hydrated frosted previews */
.wd2d-tex-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; }
.wd2d-tex-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--text); cursor: pointer; }
.wd2d-texture.wd2d-tex-thumb { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.wd2d-tex-tile:hover .wd2d-tex-thumb { border-color: var(--brass); }
.wd2d-tex-tile.active .wd2d-tex-thumb { border-color: var(--brass); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brass), transparent 65%); }
.wd2d-tex-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9.5px; font-weight: 600; color: var(--muted); }
.wd2d-tex-tile.active .wd2d-tex-name { color: var(--brass); }

/* Feature type tiles (5 across) + editor */
.wd2d-feat-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.wd2d-feat-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 8px 2px 6px; border: 1.5px solid transparent; border-radius: 9px; background: var(--surface-control); color: var(--muted); cursor: pointer; transition: all .15s ease; }
.wd2d-feat-tile:hover { border-color: var(--brass); color: var(--text); }
.wd2d-feat-tile.active { border-color: var(--brass); background: var(--wd-accent-soft); color: var(--brass); }
.wd2d-feat-tile .wd2d-feat-icon { width: 24px; height: 24px; flex: none; }
.wd2d-feat-tile span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; max-width: 100%; font-size: 9px; font-weight: 700; line-height: 1.15; text-align: center; color: var(--text); }
.wd2d-feat-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--surface-control); font-size: 10.5px; line-height: 1.4; color: var(--muted); }
.wd2d-feat-summary b { flex: none; font-size: 11px; color: var(--brass); }

/* Bar colours: "Match frame" chip + frame-colour swatches */
.wd2d-colour-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.wd2d-match-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px 0 4px; border: 1.5px solid var(--border); border-radius: 13px; background: var(--surface-control); color: var(--text); font-size: 10.5px; font-weight: 700; cursor: pointer; transition: all .15s ease; }
.wd2d-match-chip:hover { border-color: var(--brass); }
.wd2d-match-chip.active { border-color: var(--brass); background: var(--wd-accent-soft); color: var(--brass); }
.wd2d-mini-swatch { display: block; width: 18px; height: 18px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22); }
.wd2d-mini-swatch-btn { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1.5px solid transparent; border-radius: 50%; background: transparent; cursor: pointer; transition: border-color .15s ease; }
.wd2d-mini-swatch-btn:hover { border-color: color-mix(in srgb, var(--brass), transparent 40%); }
.wd2d-mini-swatch-btn.active { border-color: var(--brass); }
.wd2d-more-btn { height: 26px; padding: 0 9px; border: 1px dashed var(--border); border-radius: 13px; background: transparent; color: var(--muted); font-size: 10.5px; font-weight: 700; cursor: pointer; }
.wd2d-more-btn:hover { border-color: var(--brass); color: var(--brass); }

/* Inline warning (bars dropped on small panes) */
.wd2d-note { display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 0; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--orange), transparent 60%); border-radius: 8px; background: color-mix(in srgb, var(--orange), transparent 90%); color: var(--text); font-size: 11px; line-height: 1.45; }
.wd2d-note svg { width: 13px; height: 13px; flex: none; margin-top: 1px; color: var(--orange); }

/* Extras: grouped rows, one-click "+", the added row becomes its own editor */
.wd2d-extras-filter { display: flex; align-items: center; gap: 7px; height: 34px; margin-bottom: 12px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-control); color: var(--muted); }
.wd2d-extras-filter:focus-within { border-color: var(--brass); box-shadow: 0 0 0 3px var(--wd-accent-soft); }
.wd2d-extras-filter svg { width: 14px; height: 14px; flex: none; }
.wd2d-extras-filter input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--text); font-size: 12px; }
.wd2d-extra-group { margin-top: 16px; }
.wd2d-extra-group:first-child, .wd2d-extras-filter + .wd2d-extra-group { margin-top: 2px; }
.wd2d-extra-list { display: flex; flex-direction: column; gap: 4px; }
.wd2d-extra-section { display: block; margin: 8px 0 2px; font-size: 10px; font-weight: 700; color: color-mix(in srgb, var(--text), var(--muted) 45%); }
.wd2d-extra-list > .wd2d-extra-section:first-child { margin-top: 0; }
.wd2d-extra-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 8px 8px 11px; border: 1.5px solid transparent; border-radius: 9px; background: var(--surface-control); transition: border-color .15s ease, background .15s ease; }
.wd2d-extra-row.added { border-color: var(--brass); background: var(--wd-accent-soft); }
.wd2d-extra-info { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.wd2d-extra-name { font-size: 11.5px; font-weight: 700; }
.wd2d-extra-price { font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wd2d-extra-add { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-panel); color: var(--brass); cursor: pointer; transition: all .15s ease; }
.wd2d-extra-add:hover { border-color: var(--brass); background: var(--brass); color: var(--on-accent); }
.wd2d-extra-add svg { width: 14px; height: 14px; }
.wd2d-extra-edit { flex: 1 0 100%; display: flex; align-items: center; gap: 8px; }
.wd2d-extra-edit .wd2d-stepper { background: var(--surface-panel); }
.wd2d-extra-total { margin-left: auto; font-size: 12px; font-weight: 800; color: var(--brass); font-variant-numeric: tabular-nums; }
.wd2d-extra-measure { display: inline-flex; align-items: stretch; height: 26px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-panel); overflow: hidden; }
.wd2d-extra-measure:focus-within { border-color: var(--brass); }
.wd2d-extra-measure input { width: 62px; padding: 0 8px; border: 0; outline: none; background: transparent; color: var(--text); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.wd2d-extra-measure input::-webkit-outer-spin-button,
.wd2d-extra-measure input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wd2d-extra-measure em { display: grid; place-items: center; padding: 0 8px; background: var(--surface-hover); color: var(--muted); font-size: 10.5px; font-style: normal; font-weight: 700; }
.wd2d-extra-remove { width: 24px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; }
.wd2d-extra-remove:hover { background: color-mix(in srgb, var(--red), transparent 88%); color: var(--red); }
.wd2d-extra-remove svg { width: 11px; height: 11px; }

/* brass text on the light theme's pale surfaces is too soft — darken it like the rest of the app */
:root.light .wd2d-seg button.active, :root.light .wd2d-tabs button.active, :root.light .wd2d-feat-tile.active,
:root.light .wd2d-match-chip.active, :root.light .wd2d-tex-tile.active .wd2d-tex-name, :root.light .wd2d-unit-price,
:root.light .wd2d-feat-summary b, :root.light .wd2d-extra-total, :root.light .wd2d-extra-add,
:root.light .wd2d-or-price, :root.light .wd2d-oc-badge, :root.light .wd2d-oc-tile.active,
:root.light .wd2d-oc-handle.active { color: var(--accent-ink); }
/* ...but a muted price ("Not priced") stays muted: this light rule would otherwise out-rank .wd2d-or-price.muted */
:root.light .wd2d-or-price.muted { color: var(--muted); }
:root.light .wd2d-extra-add:hover { color: var(--on-accent); }

/* ── Responsive ── */
@media (max-width: 1300px) {
    /* Keep the centred price pill clear of the location input on narrower screens */
    .wd2d-location-label { display: none; }
    .wd2d-location-input { width: 120px; }
}
@media (max-width: 900px) {
    .wd2d-shell { --wd-side-w: 60px; --wd-panel-w: 270px; }
    .wd2d-tool-btn { width: 50px; }
    .wd2d-tool-label { font-size: 8px; }
    .wd2d-subpanel { width: 230px; }
    .wd2d-drawer { width: 270px; }
    .wd2d-location-wrap { display: none; }
    .wd2d-brand-text small { max-width: 130px; }
    /* 270px panels: tighter glazing controls */
    .wd2d-seg button { padding: 4px 7px; }
    .wd2d-feat-grid { gap: 4px; }
    .wd2d-feat-tile span { font-size: 8.5px; }
    .wd2d-unit-card { padding: 9px; }
}

/* ============================================================
   Interactive dashboard charts (bar / line / donut)
   ============================================================ */
.dashboard-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.dashboard-charts .chart-wide { grid-column: 1 / -1; }

.chart-bars-svg, .chart-line-svg { width: 100%; height: auto; display: block; margin-top: 12px; }
.chart-bar { transition: filter .14s ease, opacity .14s ease; cursor: default; }
.chart-bar.hot { filter: brightness(1.18); }
.chart-bar-label, .chart-line-label { font-size: 11px; fill: var(--muted); }
.chart-bar-value, .chart-line-value { font-size: 11px; font-weight: 700; fill: var(--text); font-family: 'JetBrains Mono', monospace; }
.chart-line-dot { transition: r .12s ease; cursor: default; }
.chart-line-dot.hot { filter: brightness(1.15); }

.chart-donut { display: flex; align-items: center; gap: 20px; margin-top: 12px; flex-wrap: wrap; }
.chart-donut-svg { width: 158px; height: 158px; flex: none; }
.chart-donut-seg { transition: stroke-width .14s ease, opacity .14s ease; cursor: default; }
.chart-donut-seg.hot { stroke-width: 32; }
.chart-donut-total { font-size: 30px; font-weight: 700; fill: var(--text); text-anchor: middle; font-family: 'JetBrains Mono', monospace; }
.chart-donut-cap { font-size: 11px; fill: var(--muted); text-anchor: middle; text-transform: uppercase; letter-spacing: .04em; }
.chart-donut-legend { flex: 1; min-width: 150px; display: grid; gap: 4px; }
.chart-legend-row { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border-radius: 7px; font-size: 12px; cursor: default; transition: background-color .14s ease; }
.chart-legend-row.hot { background: var(--surface-hover); }
.chart-legend-row i { width: 11px; height: 11px; flex: none; border-radius: 3px; }
.chart-legend-row span { flex: 1; color: var(--muted); }
.chart-legend-row b { font-family: 'JetBrains Mono', monospace; }

/* Funnel */
.chart-funnel-svg { width: 100%; height: auto; display: block; margin-top: 12px; }
.chart-funnel-bar { transition: filter .14s ease; cursor: default; }
.chart-funnel-bar.hot { filter: brightness(1.15); }
.chart-funnel-label { font-size: 12px; font-weight: 600; fill: #fff; font-family: 'JetBrains Mono', monospace; }
.chart-funnel-step { font-size: 11px; font-weight: 700; fill: var(--muted); font-family: 'JetBrains Mono', monospace; }

/* Heatmap */
.heatmap-wrap { overflow-x: auto; margin-top: 12px; }
.heatmap { border-collapse: separate; border-spacing: 3px; width: 100%; }
.heatmap th { font-size: 11px; font-weight: 600; color: var(--muted); padding: 4px 6px; }
.heatmap .heatmap-col { text-align: center; }
.heatmap .heatmap-row { text-align: right; white-space: nowrap; }
.heatmap .heatmap-corner { text-align: left; }
.heatmap-cell { text-align: center; min-width: 44px; height: 32px; border-radius: 6px; font: 700 11px 'JetBrains Mono', monospace; transition: transform .12s ease; }
.heatmap-cell:hover { transform: scale(1.06); }

/* Report filter presets + small buttons */
.filter-presets { display: inline-flex; gap: 6px; align-items: center; }
.filter-presets .chip { min-width: 40px; height: 32px; padding: 0 10px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-control); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.filter-presets .chip:hover:not(:disabled) { border-color: var(--brass); color: var(--brass); }
.btn.xs { height: 28px; padding: 0 10px; font-size: 11px; }

/* Attainment / KPI progress */
.attain-bar { height: 7px; border-radius: 999px; background: var(--surface-control); overflow: hidden; margin-top: 6px; }
.attain-bar > i { display: block; height: 100%; border-radius: 999px; }
.lead-rank { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 700 11px 'JetBrains Mono', monospace; background: var(--surface-control); color: var(--muted); }
.lead-rank.gold { background: #f2c14e; color: #4a3800; }
.lead-rank.silver { background: #c9d1d9; color: #333; }
.lead-rank.bronze { background: #d8a06a; color: #3a1e00; }
.trend-up { color: var(--good, #2e9e5b); } .trend-down { color: var(--bad, #d05b5b); }

@media(max-width: 900px) {
    .dashboard-charts { grid-template-columns: 1fr; }
}

/* Visualiser: styles live in wwwroot/visualizer.css (vz-*), loaded by the page itself. */

/* ===== Window Pricing page ===== */
.pricing-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.pricing-tab { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface-raised); color:var(--muted); cursor:pointer; font-size:12px; font-weight:600; transition:all .15s ease; }
.pricing-tab:hover { color:var(--text); border-color:color-mix(in srgb, var(--brass), transparent 50%); }
.pricing-tab.active { color:var(--brass); border-color:var(--brass); background:color-mix(in srgb, var(--brass), transparent 92%); }
.pricing-tab .count { font-size:10px; padding:1px 6px; border-radius:999px; background:var(--surface-control); color:var(--muted); }
.pricing-tab.active .count { background:color-mix(in srgb, var(--brass), transparent 80%); color:var(--brass); }
.pricing-tab svg { width:14px; height:14px; }

.save-flash { position:fixed; bottom:18px; right:18px; z-index:60; display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:10px; background:color-mix(in srgb, var(--green), #000 10%); color:#fff; font-size:12px; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.3); animation:fadein .15s ease; }
.save-flash svg { width:14px; height:14px; }
@keyframes fadein { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

.matrix-controls { display:flex; align-items:center; gap:14px; margin-left:auto; flex-wrap:wrap; }
.seg { display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.seg-btn { padding:5px 12px; background:var(--surface-raised); color:var(--muted); border:0; cursor:pointer; font-size:11px; font-weight:600; }
.seg-btn.active { background:var(--brass); color:#1a1206; }
.small { font-size:11px; }

.price-matrix-wrap { overflow:auto; max-height:64vh; border:1px solid var(--border); border-radius:10px; }
.price-matrix { border-collapse:separate; border-spacing:0; font-size:11px; }
.price-matrix th, .price-matrix td { padding:5px 8px; text-align:right; white-space:nowrap; border-bottom:1px solid color-mix(in srgb, var(--border), transparent 40%); border-right:1px solid color-mix(in srgb, var(--border), transparent 40%); }
.price-matrix thead th { position:sticky; top:0; z-index:2; background:var(--surface-control); color:var(--muted); font-weight:600; }
.price-matrix th.row-head { position:sticky; left:0; z-index:1; background:var(--surface-control); color:var(--muted); text-align:right; }
.price-matrix th.corner { position:sticky; left:0; top:0; z-index:3; background:var(--surface-control); color:var(--brass); text-align:center; }
.price-matrix tbody td { color:var(--text); cursor:pointer; font-variant-numeric:tabular-nums; }
.price-matrix tbody td:hover { background:color-mix(in srgb, var(--brass), transparent 86%); color:var(--brass); }
.price-matrix tbody td.empty { color:var(--muted); cursor:default; }
.price-matrix tbody td.poa { color:var(--muted); font-size:10px; letter-spacing:.06em; background:color-mix(in srgb, var(--muted), transparent 90%); }
.price-matrix tbody td.editing { padding:1px; }
.price-matrix .cell-edit { width:64px; padding:3px 5px; text-align:right; border:1px solid var(--brass); border-radius:5px; background:var(--surface-panel); color:var(--text); font-size:11px; }

.price-list td, .price-list th { vertical-align:middle; }
.price-list th.num, .price-list td.num { text-align:right; }
.price-list th.status-col, .price-list td.status-col { text-align:center; width:64px; }
.price-list tr.row-off td { opacity:.5; }
.field.inline { padding:5px 8px; font-size:12px; min-width:120px; }
.field.inline.num { min-width:90px; max-width:120px; text-align:right; font-variant-numeric:tabular-nums; }
.field.inline.narrow { min-width:90px; max-width:130px; }

.pricing-settings .form-grid { max-width:760px; }
.pricing-calc { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:14px; align-items:start; }
@media (max-width:900px){ .pricing-calc { grid-template-columns:1fr; } }
.check-row { display:flex; align-items:center; gap:10px; }
.extras-pick { display:flex; flex-wrap:wrap; gap:8px; }
.extra-chip { display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:var(--surface-raised); cursor:pointer; font-size:11px; }
.extra-chip.on { border-color:var(--brass); background:color-mix(in srgb, var(--brass), transparent 90%); color:var(--brass); }
.extra-chip input { accent-color:var(--brass); }
.calc-result .breakdown td { padding:7px 8px; }
.calc-result .breakdown tfoot tr.unit td { border-top:2px solid var(--brass); font-size:14px; }
.calc-result .breakdown tfoot tr.total td { color:var(--muted); }
.breakdown td.num { text-align:right; }

/* breakdown table fit + gold amounts */
.calc-result { overflow:hidden; }
.calc-result .breakdown { width:100%; table-layout:fixed; }
.calc-result .breakdown td { white-space:normal; word-break:break-word; }
.calc-result .breakdown td.num { width:96px; white-space:nowrap; color:var(--brass); }

.calc-result .breakdown { min-width:0; }

.price-list { min-width:0; width:100%; }
.price-list .field.inline { min-width:90px; }

/* presentation: save-as-quote */
.quote-save-row { display:flex; align-items:center; gap:14px; margin-top:16px; flex-wrap:wrap; }
.quote-saved { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px; background:color-mix(in srgb, var(--green), #000 8%); color:#fff; font-size:14px; }
.quote-saved svg { width:16px; height:16px; }
.form-error-inline { display:inline-flex; align-items:center; gap:6px; color:var(--red); font-size:12px; }
.form-error-inline svg { width:14px; height:14px; }


/* quote view document */
.quote-doc { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.quote-doc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px; }
.quote-doc-head h2 { margin: 0 0 4px; }
.quote-doc-status { text-align: right; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.quote-doc-total { display: flex; flex-direction: column; }
.quote-doc-total span { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.quote-doc-total b { font-size: 20px; }
.quote-lines { display: flex; flex-direction: column; gap: 10px; }
.quote-line { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 14px 16px; }
.quote-line-imgs { display: flex; gap: 8px; }
.quote-line-imgs figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.quote-line-imgs img { width: 96px; height: 96px; object-fit: contain; background: #f4f6f8; border: 1px solid var(--border); border-radius: 8px; }
.quote-line-imgs figcaption { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.quote-line-noimg { width: 96px; height: 96px; display: grid; place-items: center; background: var(--surface-raised); border-radius: 8px; }
.quote-line-noimg svg { width: 28px; height: 28px; }
.quote-line-body h3 { margin: 0 0 8px; font-size: 15px; }
.quote-line-specs { display: flex; flex-wrap: wrap; gap: 14px; }
.quote-line-specs span { display: flex; flex-direction: column; }
.quote-line-specs small { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.quote-line-price { text-align: right; }
.quote-line-price b { font-size: 16px; display: block; }
.quote-line-works { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.quote-line-works-cap { display: flex; align-items: center; gap: 6px; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 4px; }
.quote-line-works-cap svg { width: 12px; height: 12px; color: var(--brass); }
.quote-line-work-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; padding: 2px 0; color: var(--text); }
.quote-doc-totals { padding: 14px 20px; display: flex; flex-direction: column; gap: 6px; }
.quote-total-row { display: flex; justify-content: space-between; font-size: 13px; }
.quote-total-row.grand { border-top: 2px solid var(--brass); margin-top: 6px; padding-top: 8px; font-size: 16px; font-weight: 700; }
.quote-saved-link { margin-left: 10px; color: #fff; text-decoration: underline; font-size: 12px; }

/* project spec — designed products gallery */
.project-designs-panel { margin-top: 14px; }
.project-design-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.project-design-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px; background: var(--surface-raised); }
.project-design-imgs { display: flex; gap: 6px; margin-bottom: 8px; }
.project-design-imgs figure { margin: 0; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.project-design-imgs img { width: 100%; height: 78px; object-fit: contain; background: #f4f6f8; border: 1px solid var(--border); border-radius: 6px; }
.project-design-imgs figcaption { font-size: 8px; text-transform: uppercase; color: var(--muted); }
.project-design-info { display: flex; flex-direction: column; gap: 2px; }
.project-design-info small { font-size: 10px; }
.btn.danger-text { color: var(--red); }
.btn.danger-text:hover { border-color: var(--red); color: var(--red); }

/* ===== Specifications tab (redesigned): version bar + product cards ===== */
.spec2 { display: flex; flex-direction: column; gap: 12px; max-width: 1080px; }

/* version bar */
.spec2-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.spec2-bar-actions { display: flex; align-items: center; gap: 8px; }
.spec2-verpick { display: flex; align-items: center; gap: 10px; }
.spec2-verlabel { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
/* The base .field fixes height at 30px with no vertical padding; adding 8px padding inside that
   fixed box cropped the text, so this select sizes to its own content instead. */
.spec2-verselect { width: auto; min-width: 220px; height: auto; padding: 8px 30px 8px 10px; font-size: 13px; }

/* draft / history status bars */
.spec2-draftbar, .spec2-histbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-radius: 3px; padding: 10px 14px; }
.spec2-draftbar { background: color-mix(in srgb, var(--orange), transparent 88%); border: 1px solid color-mix(in srgb, var(--orange), transparent 62%); }
.spec2-draftmsg, .spec2-histmsg { display: flex; align-items: center; gap: 10px; }
.spec2-draftmsg svg { width: 18px; height: 18px; color: var(--orange); flex: none; }
.spec2-draftmsg b, .spec2-histmsg b { display: block; font-size: 13px; }
.spec2-draftmsg small, .spec2-histmsg small { display: block; font-size: 11px; }
.spec2-draftacts { display: flex; align-items: center; gap: 8px; }
/* saved = quiet inline line, not a loud banner */
.spec2-savedbar { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); padding: 2px 2px; }
.spec2-savedbar svg { width: 14px; height: 14px; color: var(--green); }
.spec2-histbar { background: var(--surface-raised); border: 1px solid var(--border); }
.spec2-histmsg svg { width: 16px; height: 16px; color: var(--brass); flex: none; }
.spec2-histmeta { display: flex; align-items: center; gap: 12px; }

/* product cards — media | body, one price rail */
.spec2-list { display: flex; flex-direction: column; gap: 10px; container-type: inline-size; }
.spec-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-raised); }
.spec-card-media { display: flex; gap: 8px; align-self: start; }
.spec-card-media figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.spec-card-media img { width: 94px; height: 94px; object-fit: contain; background: #f4f6f8; border: 1px solid var(--border); border-radius: 3px; }
.spec-card-media figcaption { font-size: 8px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.spec-card-noimg { width: 94px; height: 94px; display: flex; align-items: center; justify-content: center; background: var(--surface-control); border: 1px solid var(--border); border-radius: 3px; }
.spec-card-noimg svg { width: 28px; height: 28px; color: var(--muted); }
.spec-card-body { min-width: 0; display: flex; flex-direction: column; }
.spec-card-head { display: flex; align-items: center; gap: 9px; }
.spec-card-idx { flex: none; min-width: 20px; height: 20px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; background: var(--surface-control); border: 1px solid var(--border); font-size: 11px; font-weight: 700; color: var(--muted); }
.spec-card-head h4 { margin: 0; font-size: 15px; }
/* quantity stepper */
.spec-qty-wrap { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; flex: none; }
.spec-qty-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.spec-qty { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
.spec-qty-btn { width: 30px; height: 28px; border: 0; background: var(--surface-control); color: var(--text); cursor: pointer; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; }
.spec-qty-btn:hover:not(:disabled) { background: var(--surface-hover); color: var(--brass); }
.spec-qty-btn:disabled { opacity: .35; cursor: default; }
.spec-qty-val { min-width: 34px; text-align: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; border-left: 1px solid var(--border); border-right: 1px solid var(--border); align-self: stretch; display: flex; align-items: center; justify-content: center; }
.spec-card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.spec-chip { font-size: 11px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 3px; background: var(--surface-control); color: var(--muted); }
/* single itemised price rail */
.spec-lines { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 8px; max-width: 460px; }
.spec-line { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; font-size: 13px; padding: 3px 0; }
.spec-line > span:first-child { color: var(--muted); }
.spec-line.product > span:first-child { color: var(--text); }
.spec-line.work { font-size: 12px; }
.spec-line.work > span:first-child { color: var(--text); padding-left: 14px; }
.spec-lines-cap { display: flex; align-items: center; gap: 5px; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 6px 0 2px; }
.spec-lines-cap svg { width: 12px; height: 12px; color: var(--brass); }
.spec-line.total { margin-top: 6px; border-top: 2px solid var(--brass); padding-top: 8px; font-size: 15px; }
.spec-line.total > span:first-child { color: var(--text); font-weight: 700; }
/* actions — own row, natural width (no cramming/overlap) */
.spec-card-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.spec-card-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--red), transparent 55%); border-radius: 3px; background: color-mix(in srgb, var(--red), transparent 92%); }
.spec-card-confirm > span { font-size: 12px; color: var(--text); }
.spec-card-confirm .spec-card-acts { margin: 0 0 0 auto; }
@container (max-width: 520px) {
  .spec-card { grid-template-columns: 1fr; }
}

@media print {
  .sidebar, .topbar .btn, #customer-mode-banner { display: none !important; }
}

/* presentation review header actions */
.review-head-actions { display: flex; gap: 8px; align-items: center; }

/* projects rework — designed product cards, revisions, embedded designer */
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.project-status-chip { font-size: 10px; vertical-align: middle; margin-left: 8px; }
.project-design-card .project-design-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; gap: 8px; }
.project-design-noimg { width: 100%; height: 78px; display: grid; place-items: center; background: var(--surface-raised); border: 1px solid var(--border); border-radius: 6px; }
.project-design-noimg svg { width: 26px; height: 26px; color: var(--muted); }
.revision-list { display: flex; flex-direction: column; gap: 10px; }
.revision-row { display: flex; gap: 10px; align-items: flex-start; }
.revision-badge { flex: none; min-width: 30px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 6px; background: color-mix(in srgb, var(--brass), transparent 86%); color: var(--brass); font-size: 11px; font-weight: 700; }
.revision-body { font-size: 12px; }
.revision-body small { display: block; margin-top: 2px; }
.designer-overlay { position: fixed; inset: 0; z-index: 300; background: var(--surface-page); }

.section-title .btn { white-space: nowrap; flex: none; }

/* settings — lead scoring tab */
.scoring-intro { max-width: 760px; margin: 0 0 14px; }
.scoring-grid { align-items: start; }
.scoring-tiers { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.scoring-tiers .tier { font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.scoring-tiers .tier.hot { background: color-mix(in srgb, var(--score-good), transparent 82%); color: var(--score-good); }
.scoring-tiers .tier.warm { background: color-mix(in srgb, var(--brass), transparent 82%); color: var(--brass); }
.scoring-tiers .tier.cold { background: color-mix(in srgb, var(--score-danger), transparent 82%); color: var(--score-danger); }
.scoring-grid .setting-card .form-group { margin-bottom: 8px; }
.scoring-grid .field { max-width: 120px; }

/* settings — lead scoring live preview */
.scoring-preview { display: flex; gap: 22px; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; }
.scoring-preview-inputs { flex: 1; min-width: 320px; }
.scoring-preview-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip-toggle { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-raised); color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 600; }
.chip-toggle.on { border-color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 88%); color: var(--brass); }
.scoring-preview-score { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 140px; }
.score-ring { width: 96px; height: 96px; border-radius: 50%; border: 4px solid; display: grid; place-items: center; font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; transition: color .15s ease, border-color .15s ease; }

/* ===== CRM grid cards — uniform, touch-friendly ===== */
.lead-grid { grid-auto-rows: 1fr; gap: 16px; }
.lead-card { display: flex; flex-direction: column; }
.lead-card-spacer { flex: 1 1 auto; min-height: 4px; }
.lead-contact > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lead-contact-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lead-assigned { color: var(--text); font-weight: 600; }
.lead-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lead-score-pill { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 11px; font-variant-numeric: tabular-nums; }
.lead-score-pill svg { width: 12px; height: 12px; }
.lead-score-pill.tier-hot { background: color-mix(in srgb, var(--score-good), transparent 84%); color: var(--score-good); }
.lead-score-pill.tier-warm { background: color-mix(in srgb, var(--brass), transparent 84%); color: var(--brass); }
.lead-score-pill.tier-cold { background: color-mix(in srgb, var(--score-danger), transparent 84%); color: var(--score-danger); }
/* bigger tap targets for tablet/touch */
.lead-footer-actions .btn, .lead-footer-actions > button { min-height: 44px; }
.lead-view-btn { min-height: 38px; padding: 0 12px; }
.lead-card-actions button { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
.lead-present-btn { min-height: 44px; }

/* ===== Settings — needs / why-choose-us / currencies ===== */
.catalogue-edit td, .catalogue-edit th { vertical-align: middle; }
/* An <input> defaults to about twenty characters wide and ignores how much room its cell has, so a
   Need or a Promotion description sat in a short box with acres of empty table beside it. Filling the
   cell is the point of an edit-in-place table; the capped variants below keep their own size. */
.catalogue-edit .field.inline { padding: 6px 9px; font-size: 12px; min-width: 130px; width: 100%; }
.catalogue-edit .field.inline.narrow { min-width: 70px; max-width: 90px; }
.catalogue-edit .field.inline.num { min-width: 0; max-width: 120px; }
/* A select sizes to its longest option, which is already the right width - stretching it to a wide
   cell just leaves a long gap before the chevron. */
.catalogue-edit select.field.inline { width: auto; min-width: 120px; }
/* Mark the column holding the longest free text. Without it the browser splits leftover width evenly
   and the description - the one field that actually needs room - ends up narrower than the name.
   Only for columns whose neighbours are inputs with their own min-width; on a table of plain text it
   would starve them, so Commission deliberately leaves its Notes column unmarked. */
.catalogue-edit th.col-grow { width: 100%; }

/* The actions column hugs the right edge. width:1% collapses it to its button, handing the slack back
   to the text columns, and right alignment puts Delete where the eye already expects the row to end.
   It is an explicit class rather than :last-child because Commission's last column is Notes - real
   data that must stay left-aligned. */
.catalogue-edit th.col-actions,
.catalogue-edit td.col-actions { width: 1%; white-space: nowrap; text-align: right; }
/* These tables scroll sideways on a narrow screen; pinning the column keeps Delete reachable instead
   of stranding it past the right edge. The background stops rows showing through as they pass under. */
.catalogue-edit th.col-actions,
.catalogue-edit td.col-actions { position: sticky; right: 0; z-index: 1; background: var(--surface-panel); }
.catalogue-edit tr:hover td.col-actions { background: var(--surface-hover); }
/* A hairline separates the pinned column from whatever slides beneath it. */
.catalogue-edit td.col-actions::before,
.catalogue-edit th.col-actions::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--border-soft); }
.catalogue-edit .status-col { text-align: center; width: 64px; }
.catalogue-edit tr.row-off td { opacity: .5; }
.icon-edit { display: flex; align-items: center; gap: 8px; }
.icon-edit svg { width: 18px; height: 18px; color: var(--brass); flex: none; }
tr.row-selected td { background: color-mix(in srgb, var(--brass), transparent 92%); }

/* settings catalogue-edit tables fit + nowrap add button */
.catalogue-edit { min-width: 0; width: 100%; }
.table-title .btn { white-space: nowrap; flex: none; }
.table-title { flex-wrap: wrap; }

/* ============================================================
   CRM lead/customer cards — redesigned (token-based, touch)
   ============================================================ */
.crm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); grid-auto-rows: 1fr; gap: 16px; }

.crm-card { display: flex; flex-direction: column; gap: 14px; background: var(--surface-panel); border: 1px solid var(--border); border-radius: 16px; padding: 18px; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.crm-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--brass), transparent 55%); box-shadow: 0 14px 34px rgba(0,0,0,.22); }
.crm-card.is-dnc { border-color: color-mix(in srgb, var(--score-danger), transparent 55%); }

.crm-card-top { display: flex; align-items: flex-start; gap: 12px; }
.crm-avatar { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--brass), transparent 86%); color: var(--brass); font-weight: 800; font-size: 16px; border: 1px solid color-mix(in srgb, var(--brass), transparent 70%); }
.crm-id { flex: 1; min-width: 0; }
.crm-id h3 { margin: 0 0 5px; font-size: 16px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-sub { display: flex; align-items: center; gap: 8px; min-width: 0; }
.crm-sub .mono { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.crm-score { flex: none; width: 52px; height: 52px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid; line-height: 1; }
.crm-score b { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.crm-score small { font-size: 8px; text-transform: uppercase; letter-spacing: .04em; opacity: .85; margin-top: 2px; }
.crm-score.tier-hot { border-color: var(--score-good); color: var(--score-good); background: color-mix(in srgb, var(--score-good), transparent 92%); }
.crm-score.tier-warm { border-color: var(--brass); color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 92%); }
.crm-score.tier-cold { border-color: var(--score-danger); color: var(--score-danger); background: color-mix(in srgb, var(--score-danger), transparent 92%); }

.crm-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--surface-control); color: var(--muted); border: 1px solid var(--border-soft); }
.crm-chip svg { width: 12px; height: 12px; }
.crm-chip.type { background: color-mix(in srgb, var(--brass), transparent 88%); color: var(--brass); border-color: transparent; }
.crm-chip.stage { background: color-mix(in srgb, var(--chart-primary), transparent 84%); color: var(--chart-primary); border-color: transparent; }
.crm-chip.outcome { background: color-mix(in srgb, var(--purple), transparent 85%); color: var(--purple); border-color: transparent; }
.crm-chip.warn { background: color-mix(in srgb, var(--score-danger), transparent 88%); color: var(--score-danger); border-color: transparent; }
/* --visit-ink is --chart-primary lifted toward the body text. Raw --chart-primary (#4a6c8f) sits at
   3.3:1 on the card, under the 4.5:1 minimum, and read as a disabled control rather than a live one. */
.crm-card { --visit-ink: color-mix(in srgb, var(--chart-primary), var(--text) 55%); }
.crm-chip.presented { background: color-mix(in srgb, var(--chart-primary), transparent 82%); color: var(--visit-ink); border-color: transparent; }

/* What happened on the visit and what is owed since. A pitched lead used to look identical on the
   card to one nobody had been out to - same badges, same "Start presentation" button. */
.crm-visit { display: grid; gap: 4px; margin-top: 8px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-soft); background: color-mix(in srgb, var(--chart-primary), transparent 94%); }
.crm-visit-line { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text); }
.crm-visit-line svg { width: 13px; height: 13px; flex: none; color: var(--visit-ink); }
.crm-visit-line span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Nobody has chased this since the visit - the one thing on the card worth interrupting for. Raw
   --score-danger only reaches 3.8:1 on the light card, so it is pulled toward the body ink; that
   darkens it on white and lightens it on the dark card, clearing 4.5:1 in both. */
.crm-visit-line.is-owed { color: color-mix(in srgb, var(--score-danger), var(--text) 22%); font-weight: 600; }
.crm-visit-line.is-owed svg { color: color-mix(in srgb, var(--score-danger), var(--text) 22%); }

/* A second visit is a different act from the first, so it must not wear the same primary CTA. */
.crm-btn.cta.repeat { background: color-mix(in srgb, var(--chart-primary), transparent 88%); color: var(--visit-ink); border-color: color-mix(in srgb, var(--chart-primary), transparent 45%); }
.crm-btn.cta.repeat:hover { background: color-mix(in srgb, var(--chart-primary), transparent 78%); }

.crm-details { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.crm-details li { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; min-width: 0; }
.crm-details li svg { width: 15px; height: 15px; color: var(--brass); flex: none; }
.crm-details li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.crm-assigned span { color: var(--text); font-weight: 600; }

.crm-transfer { background: var(--surface-raised); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.crm-transfer-title { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.crm-transfer-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.crm-transfer-list button { padding: 8px 12px; min-height: 40px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface-control); color: var(--text); cursor: pointer; font-size: 12px; }
.crm-transfer-list button:hover { border-color: var(--brass); color: var(--brass); }

.crm-spacer { flex: 1 1 auto; min-height: 2px; }

.crm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; padding: 0 16px; border-radius: 12px; font-size: 13px; font-weight: 600; border: 1px solid var(--border); cursor: pointer; text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.crm-btn svg { width: 16px; height: 16px; }
.crm-btn.primary { background: var(--brass); color: var(--on-accent); border-color: var(--brass); }
.crm-btn.primary:hover { background: color-mix(in srgb, var(--brass), #fff 12%); }
.crm-btn.ghost { background: var(--surface-control); color: var(--text); }
.crm-btn.ghost:hover { border-color: var(--brass); color: var(--brass); }
/* Raw --brass on the 12% brass wash is 1.9:1 in light mode - the label all but vanished. Pulled
   toward the body ink, which darkens it on white and barely moves it on the dark card. */
.crm-btn.cta { width: 100%; background: color-mix(in srgb, var(--brass), transparent 88%); color: color-mix(in srgb, var(--brass), var(--text) 55%); border-color: color-mix(in srgb, var(--brass), transparent 55%); }
.crm-btn.cta:hover { background: color-mix(in srgb, var(--brass), transparent 80%); }
.crm-btn:disabled { opacity: .55; cursor: default; }

.crm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.crm-actions .crm-btn { width: 100%; }

.crm-tools { display: flex; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.crm-tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; flex: 1; padding: 0 12px; border-radius: 11px; background: transparent; border: 1px solid var(--border); color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 600; transition: border-color .15s ease, color .15s ease; }
.crm-tool svg { width: 16px; height: 16px; }
.crm-tool:hover { border-color: var(--brass); color: var(--brass); }
.crm-tool.icon { flex: none; width: 44px; padding: 0; }
.crm-tool.active { color: var(--score-danger); border-color: color-mix(in srgb, var(--score-danger), transparent 55%); }

@media (max-width: 480px) { .crm-grid { grid-template-columns: 1fr; } }

/* ---- align CRM cards to the sharp (2px) design standard ---- */
.crm-card { border-radius: 4px; }
.crm-card:hover { transform: none; box-shadow: 0 6px 18px rgba(0,0,0,.16); }
.crm-avatar { border-radius: 4px; }
/* score: sharp rectangular badge, not a circle */
.crm-score { width: auto; min-width: 44px; height: auto; border-radius: 3px; border-width: 1px; padding: 5px 9px; gap: 0; }
.crm-score b { font-size: 17px; }
.crm-score small { font-size: 7.5px; margin-top: 1px; }
/* chips: small, sharp, uppercase badges */
.crm-chip { border-radius: 3px; padding: 3px 8px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.crm-chip svg { width: 11px; height: 11px; }
.crm-btn { border-radius: 3px; }
.crm-tool, .crm-tool.icon { border-radius: 3px; }

/* ---- transfer modal (searchable, scrolls, no card expansion) ---- */
.transfer-modal { width: min(440px, 92vw); max-height: 78vh; display: flex; flex-direction: column; background: var(--surface-panel); border: 1px solid var(--border); border-radius: 4px; box-shadow: 0 18px 50px rgba(0,0,0,.4); overflow: hidden; }
.transfer-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--border-soft); }
.transfer-modal-head b { display: block; font-size: 15px; }
.transfer-modal-head small { display: block; margin-top: 2px; font-size: 12px; }
.transfer-search { display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--border-soft); }
.transfer-search svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.transfer-search .field { flex: 1; min-height: 42px; }
.transfer-users { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.transfer-user { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 56px; padding: 8px 12px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--text); cursor: pointer; transition: background-color .12s ease, border-color .12s ease; }
.transfer-user:hover { background: var(--surface-hover); border-color: color-mix(in srgb, var(--brass), transparent 60%); }
.transfer-user:disabled { opacity: .55; cursor: default; }
.transfer-user-avatar { flex: none; width: 38px; height: 38px; border-radius: 3px; display: grid; place-items: center; background: color-mix(in srgb, var(--brass), transparent 86%); color: var(--brass); font-weight: 800; font-size: 13px; }
.transfer-user-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.transfer-user-info b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transfer-user-info small { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.transfer-user > svg:last-child { width: 16px; height: 16px; color: var(--muted); flex: none; }
.transfer-empty { padding: 24px 12px; text-align: center; }
.transfer-foot { padding: 10px 18px; border-top: 1px solid var(--border-soft); font-size: 11px; }

/* designer rail — product popover menu */

/* designer surface selector + pricing colour cell */
.colour-cell { display: flex; align-items: center; gap: 8px; }
.colour-swatch { width: 34px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 3px; background: none; cursor: pointer; flex: none; }
span.colour-swatch { display: inline-block; cursor: default; }

/* ============================================================
   Approved unification pass (Aug 2026)
   Scope: type-scale tokens, global focus ring, buttons w/ icons,
   form labels & touch targets, data tables, single empty-state,
   status badges with dot+text semantics.
   Loads after app.css so the #app-scoped rules below win over the
   legacy text-zoom calc() block (app.css:128-141).
   ============================================================ */
:root {
    --text-xs: 11px;
    --text-sm: 12.5px;
    --text-md: 14px;
    --text-lg: 16px;
    --text-xl: 20px;
    --text-2xl: 26px;
    --good: var(--green);
    --bad: var(--red);
}

/* Global visible keyboard focus. .field/.select-trigger keep their
   own border+ring treatment, so suppress the outline there. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--focus-ring);
}

.field:focus-visible,
.select-trigger:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Buttons: one system, icon-friendly. */
.btn { height: 32px; gap: 6px; }
.btn.danger { font-weight: 600; }

/* Type scale application — mirrors the zoom block so text zoom keeps working. */
#app .nav a, #app .side-action, #app .btn { font-size: calc(var(--text-sm) * var(--text-scale)); }
/* The page title now carries the header alone, so it steps up to --text-xl.
   16px left it level with card titles; 20px is the next rung on the scale and
   still clears the 50px bar comfortably on one line. */
#app .topbar h1 { font-size: calc(var(--text-xl) * var(--text-scale)); line-height: 1.25; }
#app .sub { font-size: calc(var(--text-xs) * var(--text-scale)); }
#app .label, #app .data-table th { font-size: calc(var(--text-xs) * var(--text-scale)); }
#app .data-table td, #app .opportunity { font-size: calc(var(--text-sm) * var(--text-scale)); }
#app .field, #app .select-trigger, #app .select-option { font-size: calc(var(--text-sm) * var(--text-scale)); }
#app .kpi small, #app .chart-sub { font-size: calc(var(--text-xs) * var(--text-scale)); }
#app .tabs button, #app .project-tabs a { font-size: calc(var(--text-sm) * var(--text-scale)); }
/* Status badges stay at 9px mono by explicit decision. */
#app .badge { font-size: calc(9px * var(--text-scale)); }

/* Status badges: dot + text so colour is never the only signal.
   Visual stays 9px JetBrains Mono, 1px currentColor border, 2px radius. */
.badge.status-survey::before, .badge.status-quoted::before,
.badge.status-progress::before, .badge.status-ordered::before,
.badge.status-lead::before, .badge.status-pending::before,
.badge.prio-urgent::before, .badge.prio-high::before,
.badge.prio-normal::before, .badge.prio-low::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

/* Touch targets: switch grows from 30x16 to 38x22 (WCAG 2.5.8). */
.switch { width: 38px; height: 22px; }
.switch:after { width: 16px; height: 16px; top: 3px; left: 19px; }
.switch.off:after { left: 3px; }

/* Single empty-state pattern: icon + sentence + optional action. */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 26px 16px;
    text-align: center;
    color: var(--muted);
    border: 1px dashed var(--border);
    border-radius: 6px;
    font-size: var(--text-sm);
}

.empty-state .ui-icon { width: 22px; height: 22px; color: var(--blue); }
.empty-state b { color: var(--text); font-size: var(--text-md); font-weight: 600; }
.empty-state .btn { margin-top: 8px; }
td .empty-state, .data-table .empty-state, .card .empty-state { border: 0; border-radius: 0; }

/* Badge status variants needed to consolidate ad-hoc pills (won/lost, support states). */
.status-won { color: var(--green); background: color-mix(in srgb, var(--green), transparent 92%); }
.status-lost { color: var(--red); background: color-mix(in srgb, var(--red), transparent 92%); }
.status-open { color: var(--orange); background: color-mix(in srgb, var(--orange), transparent 92%); }
.status-resolved { color: var(--green); background: color-mix(in srgb, var(--green), transparent 92%); }
.status-closed { color: var(--muted); background: color-mix(in srgb, var(--muted), transparent 92%); }
.badge.status-won::before, .badge.status-lost::before, .badge.status-open::before,
.badge.status-resolved::before, .badge.status-closed::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}
.light .status-won { color: #047857; }
.light .status-lost { color: #b91c1c; }
.light .status-open { color: #b45309; }
.light .status-resolved { color: #047857; }

/* ============================================================
   KPI card — Option A "stacked stat" (Aug 2026)
   Reading order is label -> value -> context. The icon drops from a
   38px decorative tile to a quiet 15px corner mark, the value moves to
   --text-2xl, and the supporting line is neutral grey: colour on a KPI
   is earned by a real delta, not applied by default.
   ============================================================ */
.kpi {
    padding: 14px 15px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.kpi-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.kpi-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    line-height: 1.35;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Reset the old icon tile. The first selector matches the specificity of
   app.css's `.kpi:first-child .kpi-icon` brass wash and wins on order,
   removing the arbitrary highlight on card one. */
.kpi:first-child .kpi-icon,
.kpi .kpi-icon,
.light .kpi .kpi-icon {
    width: auto;
    height: auto;
    padding: 0;
    border-radius: 0;
    background: none;
    color: var(--muted);
    opacity: .55;
    flex: none;
    display: block;
    font-size: 12px;
}

.kpi .kpi-icon svg { width: 15px; height: 15px; }

.kpi .kpi-value {
    display: block;
    margin-top: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.kpi .kpi-context {
    display: block;
    margin-top: 1px;
    color: var(--muted);
}

/* Type scale + text-zoom. Specificity must clear app.css's
   `#app .kpi strong` / `#app .kpi small` (1,1,1). */
#app .kpi .kpi-value { font-size: calc(var(--text-2xl) * var(--text-scale)); }
#app .kpi .kpi-label { font-size: calc(10px * var(--text-scale)); }
#app .kpi .kpi-context { font-size: calc(var(--text-xs) * var(--text-scale)); }

/* Loading skeleton mirrors the stacked layout instead of the old row. */
.sk-kpi {
    padding: 14px 15px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
}

.sk-kpi > div { flex: none; }

/* The KPI row had no bottom margin on Home and Reports (Compliance, Reminders
   and Support each carried their own modifier), so the cards butted straight
   into the chart row below. 14px matches the modifiers already in use. */
.grid4 { margin-bottom: 14px; }

/* The name says four, but the dashboard's Performance band now carries five tiles and a fifth card
   dropped onto a row of its own, shorter than the four above it. Fit as many equal columns as the
   width allows instead of hard-coding four, and make every row the same height so a card that does
   wrap still matches its neighbours. `min(180px, 100%)` keeps the track from overflowing a narrow
   viewport; the breakpoints below are restated because this rule loads after app.css and would
   otherwise win inside its media queries. */
.grid4 {
    grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
}

@media (max-width: 1000px) {
    .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .grid4 { grid-template-columns: 1fr; }
}

/* ============================================================================
   Orders board
   ----------------------------------------------------------------------------
   The order workflow has 20 stages. A kanban stays readable at 5-7 columns, so
   the board renders one phase at a time (see OrderStateLabels.Phases), lets any
   column collapse to a rail, and can hide stages that hold nothing. Column
   headers are pinned and only the card lists scroll, so stage names and their
   count/value totals never scroll out of view.
   ========================================================================== */

.orders-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    padding-bottom: 12px;
}

.orders-body > .reload-bar { margin-bottom: 0; }

.orders-body > .grid4,
.orders-body > .orders-phasebar,
.orders-body > .orders-filter-tray,
.orders-body > .reload-bar { flex: none; }

.orders-kpis { margin-bottom: 0; }

/* ---- phase switcher ---- */

/* Underline tabs: no boxes, no fills. The only active signal is a brass rule under the label,
   so the bar reads as navigation rather than a row of buttons competing with the board. */
.orders-phasebar {
    display: flex;
    gap: 2px;
    padding: 0 2px;
    /* Inset shadow rather than border-bottom, so the active underline can sit at bottom:0 and
       overlap the rule exactly instead of hanging 1px outside the scroll box. */
    box-shadow: inset 0 -1px 0 var(--border);
    overflow-x: auto;
    /* Must be explicit: leaving this `visible` makes it compute to `auto` (because overflow-x
       isn't visible), and any sub-pixel overflow then raises a stray vertical scrollbar. */
    overflow-y: hidden;
    scrollbar-width: thin;
}

.phase-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 1 auto;
    justify-content: center;
    white-space: nowrap;
    padding: 9px 16px 10px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: color .16s ease;
}

/* The rule is painted by a pseudo-element so it can sit flush on the bar's own bottom rule.
   Keep `bottom: 0` — a negative offset overflows the scrolling container and adds a scrollbar. */
.phase-tab::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: transparent;
    transition: background-color .16s ease;
}

.phase-tab:hover { color: var(--text); }
.phase-tab:hover::after { background: color-mix(in srgb, var(--brass), transparent 62%); }

.phase-tab:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: -3px;
    border-radius: 6px;
}

.phase-tab.active { color: var(--text); }
.phase-tab.active::after { background: var(--brass); }

.phase-tab .ui-icon { width: 14px; height: 14px; }
.phase-tab.active .ui-icon { color: var(--brass); }

.phase-count {
    min-width: 20px;
    padding: 1px 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--steel), transparent 25%);
    color: var(--muted);
    font-size: 10px;
    text-align: center;
}

.phase-tab.active .phase-count { background: color-mix(in srgb, var(--brass), transparent 80%); color: var(--brass); }

.phase-alert {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--red), transparent 82%);
}

/* ---- filter tray ---- */

.orders-filter-tray {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 0;
}

.orders-filter-tray .orders-search { flex: 1 1 260px; min-width: 180px; }
.orders-filter-tray .orders-search .field { width: 100%; }

.orders-filter-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.orders-filter-controls .field { min-width: 150px; }

.orders-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 10px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: 2px;
    background: var(--surface-control);
    color: var(--muted);
    font-size: 11px;
    white-space: nowrap;
    cursor: pointer;
}

.orders-toggle:hover { color: var(--text); border-color: var(--blue); }
.orders-toggle input { accent-color: var(--brass); margin: 0; }

.orders-result-count { flex: none; font-size: 11px; white-space: nowrap; }

/* ---- board shell ---- */

.orders-board-wrap {
    flex: 1;
    min-height: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 6px;
    scrollbar-width: thin;
}

.kanban.orders-board {
    display: flex;
    gap: 14px;
    height: 100%;
    min-width: max-content;
    align-items: stretch;
}

.orders-empty { padding: 40px; }

/* ---- column ---- */

.orders-column {
    width: 300px;
    flex: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-panel), transparent 35%);
    overflow: hidden;
    transition: width .18s cubic-bezier(.22, 1, .36, 1);
}

.orders-column::before {
    content: "";
    display: block;
    height: 3px;
    flex: none;
    background: var(--blue);
}

.orders-column.tone-exception::before { background: var(--orange); }
.orders-column.tone-done::before { background: var(--green); }

.orders-column .column-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 11px 12px;
    border-bottom: 1px solid var(--border-soft);
    background: var(--surface-raised);
}

.orders-column .column-heading { flex: 1; min-width: 0; }

.orders-column .column-heading b {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.orders-column .column-metrics {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    color: var(--muted);
}

.orders-column .column-collapse {
    flex: none;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}

.orders-column .column-collapse:hover { color: var(--text); background: var(--surface-hover); border-color: var(--border); }
.orders-column .column-collapse .ui-icon { width: 13px; height: 13px; }

.orders-column .column-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    scrollbar-width: thin;
}

.orders-column .column-empty {
    padding: 22px 12px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    text-align: center;
    color: var(--muted);
    font-size: 11px;
}

/* ---- collapsed rail ---- */

.orders-column.is-collapsed { width: 46px; }

.orders-column .column-rail {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border: 0;
    background: var(--surface-raised);
    color: var(--muted);
    cursor: pointer;
    transition: color .15s ease, background-color .15s ease;
}

.orders-column .column-rail:hover { color: var(--text); background: var(--surface-hover); }

.orders-column .rail-count {
    flex: none;
    min-width: 22px;
    padding: 2px 5px;
    border-radius: 999px;
    background: var(--surface-control);
    color: var(--text);
    font-size: 10px;
    text-align: center;
}

.orders-column .rail-label {
    writing-mode: vertical-rl;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- card ---- */

.order-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: none;
    padding: 12px 13px;
    border-radius: 10px;
    border-left: 3px solid transparent;
    background: var(--surface-panel);
    transition: transform .18s cubic-bezier(.22, 1, .36, 1), border-color .18s ease, box-shadow .18s ease;
}

.order-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--blue), transparent 40%);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}

.order-card.risk-blocked { border-left-color: var(--red); }
.order-card.risk-stale { border-left-color: var(--orange); }
.order-card.risk-watch { border-left-color: color-mix(in srgb, var(--brass), transparent 40%); }

.order-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.order-card .order-ref { font-size: 10px; color: var(--muted); letter-spacing: .04em; }

.stage-age {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--surface-control);
    color: var(--muted);
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    white-space: nowrap;
}

.stage-age .ui-icon { width: 10px; height: 10px; }
.stage-age.age-watch { color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 88%); }
.stage-age.age-stale { color: var(--orange); background: color-mix(in srgb, var(--orange), transparent 86%); }
.stage-age.age-blocked { color: color-mix(in srgb, var(--red), #ffffff 18%); background: color-mix(in srgb, var(--red), transparent 86%); }

.order-card .order-customer {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
}

.order-card .order-address {
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    color: var(--muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.order-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.order-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    white-space: nowrap;
}

.order-chip.chip-ok { color: var(--green); background: color-mix(in srgb, var(--green), transparent 90%); }
.order-chip.chip-warn { color: var(--orange); background: color-mix(in srgb, var(--orange), transparent 90%); }
/* Plain --red on its own 10% tint measures 4.47:1 — a hair under the 4.5:1 these 9px chips need. */
.order-chip.chip-danger { color: color-mix(in srgb, var(--red), #ffffff 18%); background: color-mix(in srgb, var(--red), transparent 90%); }
.order-chip.chip-muted { color: var(--muted); background: transparent; }

.order-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 9px;
    border-top: 1px solid var(--border-soft);
}

.order-card .order-value { font-size: 13px; font-weight: 700; }

.order-meta { display: inline-flex; align-items: center; gap: 7px; }

.order-meta .branch-tag {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--surface-control);
    color: var(--muted);
    font-size: 9px;
    letter-spacing: .05em;
}

.order-avatar {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--blue), transparent 55%);
    color: var(--text);
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    font-weight: 700;
}

.order-card-actions { display: flex; align-items: center; gap: 6px; }
/* Twenty cards each carrying a solid brass button turned the board into a wall of gold. The
   action rests as a brass outline and only fills in on hover/focus. */
.order-card-actions .btn-mini.primary {
    flex: 1;
    justify-content: center;
    background: color-mix(in srgb, var(--brass), transparent 88%);
    border: 1px solid color-mix(in srgb, var(--brass), transparent 62%);
    color: var(--brass);
    font-weight: 600;
}

.order-card-actions .btn-mini.primary:hover:not(:disabled),
.order-card-actions .btn-mini.primary:focus-visible:not(:disabled) {
    background: linear-gradient(135deg, #d9a441, #c4882a);
    border-color: transparent;
    color: #10151c;
}

.order-card-actions .btn-mini.primary:disabled { opacity: .55; }
.order-card-actions .order-raise-ticket { flex: none; width: 26px; padding: 0; justify-content: center; }
.order-card-actions .order-raise-ticket .ui-icon { width: 13px; height: 13px; }

/* ---- light theme ---- */

.light .orders-column { background: color-mix(in srgb, #ffffff, var(--surface-page) 55%); }
.light .orders-column .column-head,
.light .orders-column .column-rail { background: #ffffff; }
.light .order-card { background: #ffffff; box-shadow: 0 1px 2px rgba(30, 42, 56, .06); }
.light .order-card:hover { box-shadow: 0 8px 22px rgba(30, 42, 56, .12); }
/* The underline carries the active state in both themes, so light mode only needs a deeper
   brass to stay legible on white. */
.light .phase-tab.active::after { background: color-mix(in srgb, var(--brass), #000 22%); }

/* Brass-on-brass is legible on the dark board but washes out on white. */
.light .order-card-actions .btn-mini.primary {
    background: color-mix(in srgb, var(--brass), #ffffff 84%);
    border-color: color-mix(in srgb, var(--brass), #000 18%);
    /* --accent-ink (brass + 34% black) only reaches 4.3:1 on this tint; 11px text needs 4.5:1. */
    color: color-mix(in srgb, var(--brass), #000 46%);
}

.light .order-card-actions .btn-mini.primary:hover:not(:disabled),
.light .order-card-actions .btn-mini.primary:focus-visible:not(:disabled) { color: #10151c; }

/* The 9px chip and age-pill text sits on its own pale tint over white, which costs roughly a
   stop of contrast. Deepen the ink (the tints stay untouched) to clear 4.5:1. */
.light .order-chip.chip-ok { color: color-mix(in srgb, var(--green), #000 14%); }
.light .order-chip.chip-warn { color: color-mix(in srgb, var(--orange), #000 18%); }
.light .order-chip.chip-danger { color: color-mix(in srgb, var(--red), #000 34%); }
.light .stage-age.age-watch { color: color-mix(in srgb, var(--brass), #000 46%); }
.light .stage-age.age-stale { color: color-mix(in srgb, var(--orange), #000 18%); }
.light .stage-age.age-blocked { color: color-mix(in srgb, var(--red), #000 34%); }

/* ---- narrow screens: let the page scroll normally and snap between columns ---- */

@media (max-width: 900px) {
    .orders-body { overflow: auto; }
    .orders-board-wrap { flex: none; overflow-x: auto; overflow-y: visible; scroll-snap-type: x proximity; }
    /* Stretching columns to a common height leaves a screen of dead space under the short ones
       once the board is only one column wide, so let each size to its own cards instead. */
    .kanban.orders-board { height: auto; align-items: flex-start; }
    .orders-column { width: min(84vw, 300px); scroll-snap-align: start; max-height: 74vh; }
    .orders-column .column-body { overflow-y: auto; }
    .orders-filter-tray { flex-direction: column; align-items: stretch; }
    /* The tray turns into a column here, so the search's flex-basis would become a 260px HEIGHT. */
    .orders-filter-tray .orders-search { flex: none; }
    .orders-filter-controls .field { flex: 1 1 140px; min-width: 0; }
    .orders-result-count { text-align: right; }
    .phase-tab { flex: 0 0 auto; }
}


/* ---- KpiCard optional slots: sparkline, delta, severity rail, target bar ---- */
.kpi-mid {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

.kpi-mid .kpi-value { margin-top: 4px; }

.kpi-spark {
    width: 64px;
    height: 24px;
    flex: none;
    margin-bottom: 3px;
}

.kpi-foot {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    /* Cards in a row are stretched to a common height, so the foot is pushed to the bottom rather
       than left floating under a short value - otherwise a card with a sparkline sits its context
       line lower than the card beside it and the row reads ragged. The min-height is the delta
       chip's own height, so a card without a chip still lands its context text on the same line as
       the card beside it that has one. */
    margin-top: auto;
    padding-top: 6px;
    min-height: calc(22px + 6px);
}

.kpi-foot .kpi-context { margin-top: 0; }

.kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px;
    border: 1px solid currentColor;
    border-radius: 2px;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    white-space: nowrap;
}

/* Direction is carried by the glyph as well as the colour, so the chip still
   reads correctly without colour vision. */
.kpi-delta.delta-good { color: var(--green); background: color-mix(in srgb, var(--green), transparent 90%); }
.kpi-delta.delta-bad { color: var(--red); background: color-mix(in srgb, var(--red), transparent 90%); }
.kpi-delta.delta-flat { color: var(--muted); background: color-mix(in srgb, var(--muted), transparent 90%); }

/* Rail is an inset shadow so it never shifts layout or replaces the card border. */
.kpi-crit { box-shadow: inset 3px 0 0 var(--red); }
.kpi-warn { box-shadow: inset 3px 0 0 var(--orange); }
.kpi-ok { box-shadow: inset 3px 0 0 var(--green); }
.kpi-crit:hover { box-shadow: inset 3px 0 0 var(--red), 0 8px 24px #0002; }
.kpi-warn:hover { box-shadow: inset 3px 0 0 var(--orange), 0 8px 24px #0002; }
.kpi-ok:hover { box-shadow: inset 3px 0 0 var(--green), 0 8px 24px #0002; }
.kpi-crit .kpi-value { color: var(--red); }
.kpi-warn .kpi-value { color: var(--orange); }

.kpi-bar {
    height: 4px;
    border-radius: 2px;
    background: var(--surface-control);
    margin-top: 10px;
    overflow: hidden;
}

.kpi-bar i {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--brass);
    transition: width .35s cubic-bezier(.22,1,.36,1);
}

.kpi-bar i.bar-good { background: var(--green); }
.kpi-bar i.bar-bad { background: var(--red); }

#app .kpi .kpi-delta { font-size: calc(10.5px * var(--text-scale)); }

/* ---- Sidebar brand / topbar alignment ----
   The brand block was 53px (12px padding + 28px logo + 12px + 1px border) while the
   topbar was 50px, so the two horizontal rules missed each other by 3px across every
   page. Both now read one token, and the brand's vertical padding drops to 10px so the
   28px logo still fits inside the shorter box. The tablet and mobile rules re-assert
   `padding: 12px` at higher specificity, so they are matched selector-for-selector. */
:root { --header-h: 50px; }

/* A floor, not a ceiling. As a fixed height the bar kept its 50px box while the title, subtitle and
   wrapping filters inside it needed three times that on a phone - and a flex row centres content it
   cannot contain, so the overflow painted out of BOTH ends and sat on top of whatever was above. With
   the two-factor banner there, that was the banner. Desktop is unchanged: the content fits in 50px, so
   the bar still measures exactly --header-h and still lines up with the sidebar brand. */
.topbar { min-height: var(--header-h); }

.brand,
.sidebar .brand,
.sidebar:not(.collapsed) .brand {
    height: var(--header-h);
    padding-block: 10px;
}

/* ============================================================================
   Stage action buttons + stage notes
   ========================================================================== */

/* ---- transition picker ---- */
/* Replaces a dropdown of action names. Each option is a button carrying the icon of the stage it
   leads to, the action name, the destination stage, and the full description as its tooltip. */

.stage-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.stage-action {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-raised);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, transform .14s ease;
}

.stage-action:hover { border-color: color-mix(in srgb, var(--blue), transparent 30%); background: var(--surface-hover); }
.stage-action:active { transform: scale(.995); }
.stage-action:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }

.stage-action.active {
    border-color: var(--brass);
    background: color-mix(in srgb, var(--brass), transparent 90%);
}

.stage-action-icon {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--blue), transparent 60%);
    color: var(--text);
}

.stage-action-icon .ui-icon { width: 15px; height: 15px; }

.stage-action.tone-exception .stage-action-icon { background: color-mix(in srgb, var(--orange), transparent 76%); }
.stage-action.tone-done .stage-action-icon { background: color-mix(in srgb, var(--green), transparent 74%); }
.stage-action.active .stage-action-icon { background: var(--brass); color: #10151c; }

.stage-action-text { flex: 1; min-width: 0; }
.stage-action-text b { display: block; font-size: 12px; font-weight: 600; }
.stage-action-text small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }

.stage-action-req { flex: none; color: var(--orange); font-weight: 700; line-height: 1; }

/* ---- notes button on the card ---- */

.order-card-actions .order-note-button { flex: none; padding: 0 8px; gap: 5px; }
.order-card-actions .order-note-button .ui-icon { width: 13px; height: 13px; }
.order-card-actions .order-note-button span { font-size: 10px; }

.order-card-actions .order-note-button.has-notes {
    border-color: color-mix(in srgb, var(--brass), transparent 60%);
    color: var(--brass);
}

/* ---- notes drawer ---- */

.notes-drawer { display: flex; flex-direction: column; gap: 14px; }

.note-composer {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-raised);
}

.note-composer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.note-composer textarea.field { width: 100%; resize: vertical; }
.note-composer-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.note-stage-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue), transparent 72%);
    color: var(--text);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.note-stage-badge .ui-icon { width: 11px; height: 11px; }
.note-stage-badge.tone-exception { background: color-mix(in srgb, var(--orange), transparent 82%); color: var(--orange); }
.note-stage-badge.tone-done { background: color-mix(in srgb, var(--green), transparent 82%); color: var(--green); }

/* ---- timeline ---- */

.note-timeline {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 2px;
    scrollbar-width: thin;
}

.note-empty { padding: 28px 16px; }

.note-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 13px;
    border: 1px solid var(--border);
    border-left: 3px solid color-mix(in srgb, var(--blue), transparent 45%);
    border-radius: 10px;
    background: var(--surface-panel);
}

.note-item.is-editing { border-left-color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 95%); }

.note-item-head { display: flex; align-items: center; gap: 9px; }
.note-item-meta { flex: 1; min-width: 0; }
.note-item-meta b { display: block; font-size: 12px; font-weight: 600; }
.note-item-meta small { display: block; margin-top: 1px; font-size: 10px; }

.note-origin {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-start;
    padding: 2px 7px;
    border-radius: 999px;
    background: var(--surface-control);
    color: var(--muted);
    font-size: 9px;
    font-family: 'JetBrains Mono', monospace;
}

.note-origin .ui-icon { width: 10px; height: 10px; }

.note-body {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.note-item textarea.field { width: 100%; resize: vertical; }

.note-item-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; }

.note-item-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border-soft);
}

.note-edited {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 10px;
    cursor: pointer;
}

.note-edited:hover { color: var(--brass); }
.note-edited .ui-icon { width: 11px; height: 11px; }

.note-edit-button { flex: none; }
.note-edit-button .ui-icon { width: 12px; height: 12px; }

.note-history {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 11px;
    border-radius: 9px;
    background: var(--surface-control);
}

.note-revision {
    padding-left: 9px;
    border-left: 2px solid var(--border);
}

/* Plain --muted sits on --surface-control here and only reaches 4.07:1. Mixing toward --text
   lifts it in dark and deepens it in light, so one rule fixes both themes. */
.note-origin,
.note-revision .note-body { color: color-mix(in srgb, var(--muted), var(--text) 45%); }

.note-revision-head { margin-bottom: 3px; }

/* ---- light theme ---- */

.light .note-item { background: #ffffff; box-shadow: 0 1px 2px rgba(30, 42, 56, .06); }
.light .note-composer { background: #ffffff; }
.light .note-stage-badge { color: var(--text); }
.light .stage-action { background: #ffffff; }
.light .stage-action.active { background: color-mix(in srgb, var(--brass), #ffffff 86%); }

@media (max-width: 900px) {
    .note-composer-head { align-items: flex-start; flex-direction: column; gap: 6px; }
    .note-item-foot { flex-wrap: wrap; }
}


/* ---- Toggle / unit rows ----
   The description was a bare inline <small> inside the label <span>, so the two ran
   together as one string ("Company ActiveControls operational access for the business").
   Two pages had already worked around it locally — Design.razor with `display:block`
   on three toggles and a <br> on a unit row — so the fix belongs here instead.
   The text cell becomes a flex column: label over description. The row itself stays a
   single row with the switch (or value) pinned right and never squashed. */
.toggle-row,
.unit-row {
    gap: 14px;
    padding: 10px 12px;
    margin: 6px 0;
    border-radius: 2px;
    align-items: center;
}

.toggle-row > span,
.unit-row > span {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    /* Without this a long description forces the row wider than its drawer. */
    min-width: 0;
    font-weight: 600;
}

.toggle-row > span > small,
.unit-row > span > small {
    font-weight: 400;
    line-height: 1.45;
    color: var(--muted);
}

/* The switch / value column holds its size while the description wraps. */
.toggle-row > :not(span),
.unit-row > :not(span) {
    flex: none;
    text-align: right;
}

#app .toggle-row,
#app .unit-row { font-size: calc(var(--text-sm) * var(--text-scale)); }

#app .toggle-row > span > small,
#app .unit-row > span > small { font-size: calc(var(--text-xs) * var(--text-scale)); }

/* ============================================================================
   Clickable KPI tiles, focus chip and icon-only topbar buttons
   ========================================================================== */

/* A KPI card that carries an OnClick renders as a <button>, which resets the browser's
   default button styling — restore the card's own box model and left-align its contents. */
.kpi.kpi-clickable {
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    appearance: none;
    transition: border-color .16s ease, transform .14s ease, box-shadow .16s ease;
}

.kpi.kpi-clickable:hover {
    border-color: color-mix(in srgb, var(--brass), transparent 45%);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .22);
}

.kpi.kpi-clickable:active { transform: translateY(0); }
.kpi.kpi-clickable:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.kpi.kpi-clickable.is-active {
    border-color: var(--brass);
    box-shadow: inset 3px 0 0 var(--brass);
}

.kpi.kpi-clickable.is-active .kpi-label { color: var(--brass); }

/* ---- focus chip in the filter tray ---- */

.focus-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    height: 30px;
    padding: 0 8px 0 10px;
    border: 1px solid var(--brass);
    border-radius: 999px;
    background: color-mix(in srgb, var(--brass), transparent 88%);
    color: var(--brass);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease;
}

.focus-chip:hover { background: color-mix(in srgb, var(--brass), transparent 78%); }
.focus-chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.focus-chip .ui-icon { width: 12px; height: 12px; }

.focus-chip-x {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brass), transparent 72%);
    font-size: 12px;
    line-height: 1;
}

/* ---- icon-only buttons ---- */

.btn.btn-icon-only {
    width: 30px;
    padding: 0;
    justify-content: center;
    flex: none;
}

.btn.btn-icon-only .ui-icon { width: 15px; height: 15px; }
.btn.btn-icon-only:disabled { opacity: .45; cursor: not-allowed; }

/* While refreshing, the button is disabled but is *working* — the dimming that reads as
   "unavailable" would fight the spinner, so a busy button stays at full strength. */
.btn.btn-icon-only.is-busy:disabled { opacity: 1; cursor: progress; color: var(--brass); border-color: color-mix(in srgb, var(--brass), transparent 55%); }

@keyframes flash-spin { to { transform: rotate(360deg); } }

.ui-icon.is-spinning { transform-origin: 50% 50%; animation: flash-spin .8s linear infinite; }

@media (prefers-reduced-motion: reduce) {
    /* Keep the signal, drop the whirl. */
    .ui-icon.is-spinning { animation-duration: 2.4s; }
}

/* ---- light theme ---- */

.light .kpi.kpi-clickable:hover { box-shadow: 0 8px 22px rgba(30, 42, 56, .12); }
/* Brass on a pale brass wash is too weak on white; deepen the ink and the border. */
.light .focus-chip {
    background: color-mix(in srgb, var(--brass), #ffffff 84%);
    border-color: color-mix(in srgb, var(--brass), #000 18%);
    color: color-mix(in srgb, var(--brass), #000 46%);
}

.light .focus-chip-x { background: color-mix(in srgb, var(--brass), #ffffff 55%); }
.light .kpi.kpi-clickable.is-active .kpi-label { color: color-mix(in srgb, var(--brass), #000 40%); }

@media (max-width: 900px) {
    .focus-chip { align-self: flex-start; }
}

/* ============================================================================
   Presentation — Decide & Complete: deposit record, compliance, finish review
   ========================================================================== */

/* ---- deposit record (Payment slide) ---- */

.deposit-panel {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-panel);
}

.deposit-panel > p { margin: 4px 0 12px; font-size: 12px; }
.deposit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.deposit-summary {
    display: flex;
    gap: 24px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-soft);
    flex-wrap: wrap;
}

.deposit-summary > div { display: flex; flex-direction: column; gap: 2px; }
.deposit-summary span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.deposit-summary b { font-size: 16px; }
.deposit-summary .deposit-balance b { color: var(--brass); font-size: 18px; }

/* ---- compliance blocks (eligibility → planning → declarations) ---- */

.compliance-block > .muted { margin: 0 0 10px; font-size: 12px; }
.compliance-block .check-card { margin-top: 12px; }

/* One sub-step (Eligibility / Planning / Declarations) shows at a time so nothing scrolls. */
.compliance-steps { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }

.compliance-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-panel);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.compliance-step span {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--surface-control);
    font-size: 11px;
}

.compliance-step:hover { border-color: color-mix(in srgb, var(--brass), transparent 40%); color: var(--text); }
.compliance-step:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.compliance-step.active { border-color: var(--brass); color: var(--text); }
.compliance-step.active span { background: var(--brass); color: #10151c; }
.compliance-step.done:not(.active) { color: var(--green); }
.compliance-step.done span { background: color-mix(in srgb, var(--green), transparent 80%); color: var(--green); }

.eligibility-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-panel);
}

.eligibility-col b { display: block; margin-bottom: 8px; font-size: 13px; }
.eligibility-col ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; color: var(--muted); font-size: 12px; line-height: 1.5; }

/* Two columns halve the height of the ten-question list. */
.planning-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.planning-question {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 13px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-panel);
}

.planning-question > span { font-size: 12.5px; line-height: 1.4; }
.planning-answer { display: flex; gap: 6px; flex: none; }

.btn-yesno {
    min-width: 52px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-control);
    color: var(--muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.btn-yesno:hover { border-color: color-mix(in srgb, var(--brass), transparent 40%); color: var(--text); }
.btn-yesno:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.btn-yesno.yes.active { border-color: var(--brass); background: color-mix(in srgb, var(--brass), transparent 85%); color: var(--brass); }
.btn-yesno.no.active { border-color: color-mix(in srgb, var(--muted), transparent 20%); background: color-mix(in srgb, var(--muted), transparent 85%); color: var(--text); }

/* ---- finish review ---- */

.finish-review { display: grid; gap: 12px; margin: 0 auto 16px; max-width: 560px; text-align: left; }

.finish-review-card {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface-panel);
}

.finish-review-title { margin-bottom: 8px; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }

.finish-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 5px 0;
    font-size: 13px;
}

.finish-line span { color: var(--muted); }
.finish-line b { text-align: right; }
.finish-line.green b { color: var(--green); }
.finish-line.total { border-top: 1px solid var(--border-soft); margin-top: 4px; padding-top: 9px; }
.finish-line.total b { color: var(--brass); font-size: 16px; }

/* ---- light theme + narrow screens ---- */

.light .deposit-panel,
.light .eligibility-card,
.light .planning-question,
.light .finish-review-card { background: #ffffff; }

@media (max-width: 900px) {
    .deposit-grid { grid-template-columns: 1fr; }
    .eligibility-card { grid-template-columns: 1fr; }
    .planning-list { grid-template-columns: 1fr; }
}


/* ---- Phase 2: universal record header + unified timeline ---------------------------------- */
.record-header { display: grid; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-panel); margin-bottom: 12px; }
.record-header-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.record-header-title > b { font-size: 15px; }
.record-header-value { font-size: 14px; margin-left: auto; }
.record-header-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 6px 16px; margin: 0; }
.record-header-facts > div { display: grid; gap: 1px; min-width: 0; }
.record-header-facts dt { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-family: "JetBrains Mono", monospace; }
.record-header-facts dd { margin: 0; font-size: 12px; color: var(--text); overflow-wrap: anywhere; }
.record-header-facts dd a { color: var(--text); text-decoration: underline dotted; }
.record-header-facts .overdue dd b { color: var(--red, #e5484d); }
.record-header-facts .overdue dt { color: var(--red, #e5484d); }
.record-header-facts .reason dd { font-style: italic; }
.record-header-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.timeline { display: grid; gap: 14px; }
.timeline-day { display: grid; gap: 4px; }
.timeline-date { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); padding: 4px 0; border-bottom: 1px solid var(--border); }
.timeline-event { display: grid; grid-template-columns: 44px 22px minmax(0, 1fr); gap: 8px; align-items: start; padding: 5px 0; }
.timeline-event .event-time { font-size: 10px; color: var(--muted); padding-top: 3px; }
.timeline-event .event-icon { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--brass), transparent 85%); color: var(--brass); }
.timeline-event .event-icon .ui-icon { width: 11px; height: 11px; }
.timeline-event.highlight .event-icon { background: color-mix(in srgb, var(--red, #e5484d), transparent 85%); color: var(--red, #e5484d); }
.timeline-event .event-body { display: grid; gap: 2px; min-width: 0; }
.timeline-event .event-body b { font-size: 12px; font-weight: 600; }
.timeline-event .event-body b a { color: var(--text); text-decoration: none; border-bottom: 1px dotted var(--brass); }
.timeline-event .event-body small { font-size: 11px; color: var(--muted); overflow-wrap: anywhere; white-space: pre-line; }
.timeline-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.timeline-meta .tag { font-size: 9px; padding: 1px 6px; border-radius: 4px; background: var(--surface-control); border: 1px solid var(--border); }
/* A person's note on a timeline row (a beller's call note): their words in a quote, labelled with whose they are. */
.timeline-note { margin: 3px 0 2px; padding: 7px 10px; border-left: 3px solid var(--brass); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--brass), transparent 92%); color: var(--text); font-size: 12px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.timeline-note > span { display: block; margin-bottom: 2px; color: var(--brass); font-family: "JetBrains Mono", monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; white-space: normal; }
.light .timeline-note > span { color: var(--accent-ink); }

/* Mini map: a cropped tile with the pin drawn over it, in place of a pair of decimals. */
.minimap { position: relative; display: block; justify-self: start; margin: 4px 0 2px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: var(--surface-control); max-width: 100%; }
.minimap:hover { border-color: var(--accent); }
.minimap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.minimap-tile { position: absolute; max-width: none; /* the tile is cropped by the frame, not scaled to it */ }
/* Map tiles are printed artwork, not UI: they keep their own colours in dark mode but are dimmed so a
   bright square does not shout over the rest of the timeline. */
.minimap-tile { filter: brightness(.82) saturate(.9); }
.light .minimap-tile { filter: none; }
.minimap-pin { position: absolute; width: 22px; height: 22px; margin: -22px 0 0 -11px; display: grid; place-items: center; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .55)); pointer-events: none; }
.minimap-pin .ui-icon { width: 22px; height: 22px; }
/* FlashIcon draws outlines, which vanish against printed map artwork. CSS beats the svg's own
   fill="none", so the marker is filled here rather than adding a second icon just for this. */
.minimap-pin .ui-icon path { fill: var(--accent); stroke: #fff; stroke-width: 1.5; }
.minimap-pin .ui-icon circle { fill: #fff; stroke: none; }
.minimap-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 7px; font-size: 9.5px; color: #f2f5f8; background: linear-gradient(transparent, rgb(0 0 0 / .68)); pointer-events: none; }
/* No tile server configured: a plain chip that still opens the location, with nothing sent anywhere. */
.minimap-fallback { justify-self: start; width: fit-content; display: inline-flex; align-items: center; gap: 6px; margin: 3px 0 1px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-control); color: var(--muted); font-size: 10.5px; }
.minimap-fallback:hover { border-color: var(--accent); color: var(--accent); }
.minimap-fallback .ui-icon { width: 12px; height: 12px; }

.notif-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brass); color: #111; font-size: 10px; font-weight: 700; display: inline-grid; place-items: center; font-family: "JetBrains Mono", monospace; }
.notif-list { display: grid; gap: 8px; }
.notif-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-panel); }
.notif-item.unread { border-color: color-mix(in srgb, var(--brass), transparent 50%); }
.notif-item.critical { border-left: 3px solid var(--red, #e5484d); }
.notif-item.warning { border-left: 3px solid var(--orange, #e8a33d); }
.notif-item b { font-size: 12px; }
.notif-item small { display: block; color: var(--muted); font-size: 11px; }
.order-owner-line { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 11px; color: var(--muted); margin: 4px 0 0; }
.order-owner-line a { color: var(--muted); text-decoration: none; }
.order-owner-line a:hover { color: var(--brass); }
.order-owner-line .ui-icon { width: 11px; height: 11px; vertical-align: -1px; margin-right: 3px; }
.order-next-action { display: flex; gap: 6px; align-items: baseline; font-size: 11px; color: var(--text); margin: 6px 0 0; padding: 5px 7px; border-radius: 6px; background: color-mix(in srgb, var(--brass), transparent 92%); }
.order-next-action .ui-icon { width: 11px; height: 11px; color: var(--brass); flex: none; }
.order-next-action.overdue { background: color-mix(in srgb, var(--red, #e5484d), transparent 90%); }
.order-next-action.overdue .ui-icon { color: var(--red, #e5484d); }
/* One row: icon, the sentence, the two ways to fix it, and a way to put it away until next sign-in.
   The actions are grouped rather than pushed individually - "margin-left:auto" on each .btn was written
   when there was one, and with two it shoved them to opposite ends with the gap between them. */
.mfa-notice { display: flex; align-items: center; gap: 10px; margin: 10px 16px 0; flex-wrap: wrap; }
.mfa-notice-text { flex: 1 1 260px; min-width: 0; line-height: 1.45; }
.mfa-notice-actions { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.mfa-notice .btn { flex: none; }
.mfa-notice-dismiss {
    flex: none;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: inherit;
    opacity: .55;
    cursor: pointer;
    transition: opacity .15s ease, background-color .15s ease;
}
.mfa-notice-dismiss:hover { opacity: 1; background: color-mix(in srgb, currentColor, transparent 88%); }
.mfa-notice-dismiss:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; opacity: 1; }
.mfa-notice-dismiss .ui-icon { width: 14px; height: 14px; }

@media (max-width: 720px) {
    /* Stacked, the buttons read as the next thing to do rather than as a right-hand afterthought. */
    .mfa-notice-actions { margin-left: 0; width: 100%; }
    .mfa-notice-actions .btn { flex: 1; justify-content: center; }
    .mfa-notice-dismiss { position: absolute; top: 6px; right: 8px; }
    .mfa-notice { position: relative; padding-right: 34px; }
}

/* Settings > Reason Codes and Messages (Phase 2): each category and each message is one editable
   block, so the eye groups the wording with the switch that turns it on. */
.reason-group { margin-bottom: 18px; }
.reason-group:last-of-type { margin-bottom: 6px; }
.reason-group-head { padding-top: 4px; }
.template-editor { border-top: 1px solid var(--line); padding: 14px 0; }
.template-editor:first-of-type { border-top: 0; }
.template-editor .template-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.template-editor .template-head .btn-mini { margin-left: auto; }
.template-editor textarea.field { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; line-height: 1.55; }
.template-editor.row-off { opacity: .6; }

/* Projects: the state of the customer's quote link, next to the actions that created it. */
.quote-share-status { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2, transparent); }
.quote-share-status > div { flex: 1; min-width: 0; }
.quote-share-status .small-copy { display: block; }

/* Orders > Money: the ledger reads as a statement, with what is still owed carrying the weight. */
.ledger-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin: 12px 0 14px; }
.ledger-summary > div { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.ledger-summary span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.ledger-summary b { font-size: 18px; font-variant-numeric: tabular-nums; }
.ledger-summary .owing b { color: var(--danger, #d9534f); }
.ledger-summary .settled b { color: var(--good, #4caf50); }
.ledger-table td.num, .ledger-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ledger-table tr.row-received td { opacity: .85; }
.ledger-actions { margin-top: 12px; }

/* Designers: a door's price with its working shown, so the rep can answer "why that number?". */
.door-price { border: 1px solid var(--border, var(--line)); border-radius: 10px; padding: 12px 14px; margin-top: 8px; }
.door-price-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.door-price-total span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.door-price-total b { font-size: 22px; font-variant-numeric: tabular-nums; }
.door-price-parts { list-style: none; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px dashed var(--border, var(--line)); font-size: 12px; }
.door-price-parts li { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 3px 0; }
.door-price-parts li small { grid-column: 1; opacity: .6; }
.door-price-parts li b { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-variant-numeric: tabular-nums; }
.door-price-override { margin-top: 8px; font-size: 12px; opacity: .75; }
.door-price-poa { border: 1px solid var(--warn, #d9a441); border-radius: 10px; padding: 12px 14px; margin-top: 8px; }
.door-price-poa b { display: block; margin-bottom: 3px; }
.door-price-poa span { font-size: 12px; opacity: .8; }
.door-price-reason { width: 100%; margin-top: 8px; }

/* Roofline designer (RooflineDoorDesigner3d): the house-type and job-scope lists, and the measured takeoff */
.rlx-house-list { display: grid; gap: 6px; }
.rlx-house { display: grid; gap: 2px; padding: 9px 12px; text-align: left; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface-control); color: var(--text); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.rlx-house b { font-size: 13px; font-weight: 700; }
.rlx-house small { font-size: 11px; color: var(--muted); line-height: 1.3; }
.rlx-house:hover { border-color: var(--brass); }
.rlx-house.active { border-color: var(--brass); background: var(--wd-accent-soft); }
.rlx-takeoff summary { cursor: pointer; font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--text), var(--muted) 30%); }
.rlx-takeoff table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 12px; }
.rlx-takeoff td { padding: 3px 0; border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 50%); }
.rlx-takeoff td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 10px; }

/* Roofline designer menus: the rail (one button per roofline item, grouped under small section heads), the one
   slide-in panel, picture tiles (RooflineGlyph drawings) and feature switches. No backdrop: the 3D stays live. */
.rlx-rail { padding: 8px 0; }
.rlx-rail-tools { gap: 1px; }
.rlx-rail-group { width: 100%; flex: none; padding: 9px 0 3px; margin-top: 4px; border-top: 1px solid color-mix(in srgb, var(--border), transparent 30%); font-size: 8.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; }
.rlx-rail-group:first-child { border-top: 0; margin-top: 0; padding-top: 2px; }
.rlx-rail-tools .wd2d-tool-btn { min-height: 46px; max-height: 66px; padding: 5px 3px; gap: 3px; }
.rlx-rail-tools .wd2d-tool-icon { width: 30px; height: 30px; }
.rlx-rail-tools .wd2d-tool-label { font-size: 9.5px; }
.rlx-rail-btn.rlx-off .wd2d-tool-icon svg, .rlx-rail-btn.rlx-off .wd2d-tool-label { opacity: .45; }
.rlx-rail-btn .wd2d-dot.off { background: var(--border); box-shadow: none; }
.rlx-rail-btn:focus-visible, .rlx-tile:focus-visible, .rlx-feature .switch:focus-visible, .rlx-stepper button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.rlx-panel:focus { outline: none; }
.rlx-shell .wd2d-canvas-area.rlx-menu-open .wd2d-viewdock, .rlx-shell .wd2d-canvas-area.rlx-menu-open .wd2d-opendock { opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.rlx-title-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.rlx-title-text small { font-size: 10.5px; font-weight: 600; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rlx-blurb { font-size: 12px; line-height: 1.5; color: color-mix(in srgb, var(--text), var(--muted) 35%); margin: 0 0 2px; }
.rlx-note { display: flex; gap: 7px; align-items: flex-start; font-size: 11.5px; line-height: 1.45; padding: 8px 10px; margin: 10px 0 0; border-radius: 9px; background: color-mix(in srgb, var(--brass), transparent 90%); border: 1px solid color-mix(in srgb, var(--brass), transparent 70%); }
.rlx-note svg { width: 14px; height: 14px; flex: none; color: var(--brass); margin-top: 1px; }
.rlx-opt { padding-top: 14px; margin-top: 12px; border-top: 1px solid color-mix(in srgb, var(--border), transparent 40%); }
.rlx-opt-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rlx-opt-label { font-size: 12.5px; font-weight: 800; flex: none; }
.rlx-opt-value { font-size: 11px; font-weight: 700; color: var(--brass); text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rlx-opt-hint { font-size: 11px; color: var(--muted); line-height: 1.45; margin: 3px 0 9px; }
.rlx-rule-row { margin-bottom: 8px; }
.rlx-rule-row .wd2d-chip { height: 30px; font-size: 12px; }
.wd2d-swatch-grid.rlx-swatches { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; }
.wd2d-swatch-grid.rlx-swatches.six { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
/* every swatch keeps its name visible (two lines, never clipped to nothing) */
.rlx-swatches .wd2d-swatch small { min-height: 2.3em; font-size: 9px; }
.rlx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.rlx-tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rlx-tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rlx-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 7px 5px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface-control); color: var(--text); text-align: center; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.rlx-tile .rlx-glyph { max-width: 64px; }
.rlx-tile b { font-size: 10.5px; font-weight: 700; line-height: 1.2; }
.rlx-tile small { font-size: 9px; color: var(--muted); line-height: 1.2; }
.rlx-tile:hover { border-color: color-mix(in srgb, var(--brass), transparent 40%); transform: translateY(-1px); }
.rlx-tile.active { border-color: var(--brass); background: var(--wd-accent-soft); box-shadow: inset 0 0 0 1px var(--brass); }
.rlx-tile.active::after { content: ""; position: absolute; top: 5px; right: 5px; width: 14px; height: 14px; border-radius: 50%; background: var(--brass) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310151c' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 9px no-repeat; }
.rlx-feature { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px; margin-top: 12px; border: 1.5px solid var(--border); border-radius: 11px; background: var(--surface-control); }
.rlx-feature:not(:has(.rlx-feature-art)) { grid-template-columns: minmax(0, 1fr) auto; }
.rlx-feature.on { border-color: color-mix(in srgb, var(--brass), transparent 45%); background: var(--wd-accent-soft); }
.rlx-feature-art .rlx-glyph { width: 56px; }
.rlx-feature-text b { display: block; font-size: 12.5px; font-weight: 800; }
.rlx-feature-text small { display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.4; color: var(--muted); }
.rlx-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--border); border-radius: 9px; overflow: hidden; }
.rlx-stepper button { width: 34px; height: 32px; border: 0; background: var(--surface-control); color: var(--text); font-size: 16px; font-weight: 700; cursor: pointer; }
.rlx-stepper button:disabled { opacity: .4; cursor: default; }
.rlx-stepper b { min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }
.rlx-scope-cta { margin-top: 14px; padding: 12px; border: 1.5px dashed color-mix(in srgb, var(--border), var(--muted) 30%); border-radius: 11px; }
.rlx-scope-cta b { font-size: 12.5px; }
.rlx-scope-cta p { margin: 4px 0 9px; font-size: 11px; line-height: 1.45; color: var(--muted); }
.rlx-scope-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.rlx-scope-btns .wd2d-chip { height: auto; min-height: 30px; padding: 5px 10px; font-size: 12px; }
.rlx-gap { margin-top: 18px; }
.rlx-details { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--border); }
.rlx-details > summary { cursor: pointer; font-size: 12.5px; font-weight: 800; }
/* the drawings: currentColor outlines (theme text), the product in its own colour (--g-fill), the roof in --g-roof */
.rlx-glyph { display: block; width: 100%; height: auto; aspect-ratio: 64 / 44; overflow: visible; color: color-mix(in srgb, var(--text), transparent 22%); }
.rlx-glyph .g-p { fill: var(--g-fill); stroke: currentColor; stroke-width: 1.1; stroke-linejoin: round; }
.rlx-glyph .g-l { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.rlx-glyph .g-t { fill: none; stroke: currentColor; stroke-width: .9; stroke-linecap: round; opacity: .45; }
.rlx-glyph .g-w { fill: currentColor; opacity: .09; }
.rlx-glyph .g-b { fill: #a65a40; opacity: .55; }
.rlx-glyph .g-m { fill: #bdb6a6; stroke: currentColor; stroke-width: .6; }
.rlx-glyph .g-o { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-dasharray: 2.5 2; opacity: .6; }
.rlx-glyph .g-x { fill: none; stroke: var(--red); stroke-width: 1.6; stroke-linecap: round; }
.rlx-glyph .g-x2 { fill: color-mix(in srgb, var(--brass), transparent 35%); stroke: currentColor; stroke-width: .9; }
.rlx-glyph .g-a { fill: none; stroke: var(--brass); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.rlx-glyph .g-k { fill: #8c9196; stroke: currentColor; stroke-width: .7; }
.rlx-glyph .g-k2 { fill: #34383d; stroke: currentColor; stroke-width: .7; }
.rlx-glyph .g-r { fill: var(--g-roof); stroke: currentColor; stroke-width: .6; }
.rlx-glyph .g-r2 { fill: var(--g-roof); stroke: currentColor; stroke-width: .6; filter: brightness(.8); }
.rlx-glyph .g-rd { fill: #ece7da; stroke: currentColor; stroke-width: .6; }
.rlx-glyph .g-dots { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; opacity: .45; }
.rlx-glyph .g-sol { fill: #1f2d4a; stroke: currentColor; stroke-width: .7; }
.rlx-glyph .g-moss { fill: #6f8a3a; }

/* Conservatory designer (cvx-*): style tiles, the solve's facts, messages and regulation badges over the 3D */
.cvx-tiles { display: grid; gap: 6px; }
.cvx-tile { display: grid; gap: 2px; padding: 9px 12px; text-align: left; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface-control); color: var(--text); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.cvx-tile b { font-size: 13px; font-weight: 700; }
.cvx-tile small { font-size: 11px; color: var(--muted); line-height: 1.3; }
.cvx-tile:hover { border-color: var(--brass); }
.cvx-tile.active { border-color: var(--brass); background: var(--wd-accent-soft); }
.cvx-facts { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-control); font-size: 12px; }
.cvx-facts dt { color: var(--muted); }
.cvx-facts dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.cvx-messages { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 6; display: grid; gap: 6px; justify-items: start; pointer-events: none; }
.cvx-message { display: flex; align-items: flex-start; gap: 8px; max-width: min(560px, 100%); padding: 8px 12px; border-radius: 8px; font-size: 12px; line-height: 1.4; background: color-mix(in srgb, var(--surface-panel), transparent 6%); border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(0, 0, 0, .08); pointer-events: auto; }
.cvx-message svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.cvx-message.error { border-color: color-mix(in srgb, var(--red, #dc2626), transparent 45%); color: var(--red, #dc2626); }
.cvx-message.warning { border-color: color-mix(in srgb, var(--orange), transparent 45%); }
.cvx-message.warning svg { color: var(--orange); }
.cvx-badges { position: absolute; left: 12px; bottom: 12px; z-index: 6; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 24px); }
.cvx-badge { display: grid; grid-template-columns: auto 1fr; column-gap: 7px; align-items: center; padding: 6px 11px 7px; border-radius: 10px; border: 1px solid var(--border); background: color-mix(in srgb, var(--surface-panel), transparent 6%); color: var(--text); text-align: left; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.cvx-badge small { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cvx-badge b { grid-column: 2; font-size: 12px; }
.cvx-badge .cvx-badge-dot { grid-row: span 2; }
.cvx-badge-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.green .cvx-badge-dot, .cvx-badge.green .cvx-badge-dot { background: var(--green); }
.amber .cvx-badge-dot, .cvx-badge.amber .cvx-badge-dot { background: var(--orange); }
.red .cvx-badge-dot, .cvx-badge.red .cvx-badge-dot { background: var(--red, #dc2626); }
.cvx-badge-card { margin-top: 14px; padding: 12px; border-radius: 10px; border: 1px solid var(--border); border-left-width: 4px; background: var(--surface-control); font-size: 12px; line-height: 1.45; }
.cvx-badge-card.green { border-left-color: var(--green); }
.cvx-badge-card.amber { border-left-color: var(--orange); }
.cvx-badge-card.red { border-left-color: var(--red, #dc2626); }
.cvx-badge-head { display: flex; align-items: center; gap: 7px; margin-bottom: 4px; }
.cvx-badge-head small { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cvx-badge-card b { font-size: 13px; }
.cvx-badge-card p { margin: 4px 0 0; }
.cvx-badge-card ul { margin: 6px 0 0; padding-left: 18px; }
.cvx-badge-foot { color: var(--muted); font-size: 11px; }
.cvx-takeoff summary { cursor: pointer; font-size: 12px; font-weight: 700; color: color-mix(in srgb, var(--text), var(--muted) 30%); }
.cvx-takeoff table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 12px; }
.cvx-takeoff td { padding: 3px 0; border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 50%); }
.cvx-takeoff td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 10px; }
/* Sides & panes: the sides as chips, the picked side's elevation (click a frame), its frame and light sizes */
.cvx-zone-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; margin: 4px 0 12px; }
.cvx-zone-chip { display: grid; gap: 1px; padding: 7px 10px; text-align: left; border: 1.5px solid var(--border); border-radius: 9px; background: var(--surface-control); color: var(--text); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.cvx-zone-chip b { font-size: 12px; font-weight: 700; line-height: 1.25; }
.cvx-zone-chip small { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cvx-zone-chip:hover { border-color: var(--brass); }
.cvx-zone-chip.active { border-color: var(--brass); background: var(--wd-accent-soft); }
.cvx-elev { margin: 0 0 10px; padding: 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-control); }
.cvx-elev svg { display: block; width: 100%; height: 150px; }
.cvx-elev-frame { cursor: pointer; }
.cvx-elev-body { fill: var(--surface-panel); stroke: color-mix(in srgb, var(--text), transparent 50%); stroke-width: 1; }
.cvx-elev-glass { fill: color-mix(in srgb, #8ec5e6, transparent 40%); stroke: color-mix(in srgb, var(--text), transparent 70%); stroke-width: 1; }
.cvx-elev-vent { fill: none; stroke: color-mix(in srgb, var(--text), transparent 25%); stroke-width: 1; stroke-dasharray: 4 3; }
.cvx-elev-frame text { fill: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.cvx-elev-frame:hover .cvx-elev-body { stroke: var(--brass); }
.cvx-elev-frame.active .cvx-elev-body { fill: color-mix(in srgb, var(--brass), var(--surface-panel) 70%); stroke: var(--brass); stroke-width: 2; }
.cvx-elev-frame.active text { fill: var(--brass); font-weight: 800; }
.cvx-count-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; }
.cvx-count-row > span { display: grid; gap: 1px; font-size: 13px; font-weight: 600; color: var(--text); }
.cvx-count-row small { font-size: 11px; font-weight: 500; color: var(--muted); }
.cvx-width-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; margin: 0 0 8px; }
.cvx-width { display: grid; gap: 3px; margin: 0; }
.cvx-width small { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cvx-width span { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-control); overflow: hidden; transition: border-color .15s ease; }
.cvx-width span:focus-within { border-color: var(--brass); }
.cvx-width input { width: 100%; min-width: 0; padding: 6px 4px 6px 9px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; outline: none; -moz-appearance: textfield; }
.cvx-width input::-webkit-outer-spin-button, .cvx-width input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cvx-width em { padding: 0 8px 0 2px; font-size: 11px; font-style: normal; color: var(--muted); }
.cvx-row-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 6px; }
/* Glass / Glazing scope: quick groups, the side shown, and its glass map (each light a button) */
.cvx-scope-groups { margin: 8px 0 6px; }
.cvx-scope-groups .wd2d-chip { height: 30px; font-size: 12.5px; }
.cvx-side-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 6px 0 8px; }
.cvx-side-tabs .wd2d-ctl-label { margin-right: 4px; }
.cvx-side-tabs button { padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-control); color: var(--text); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.cvx-side-tabs button:hover { border-color: var(--brass); }
.cvx-side-tabs button.active { border-color: var(--brass); background: var(--wd-accent-soft); color: var(--text); }
.cvx-glass-map svg { height: 140px; }
.cvx-gm-frame { fill: var(--surface-panel); stroke: color-mix(in srgb, var(--text), transparent 50%); stroke-width: 1; }
.cvx-gm-light { cursor: pointer; }
.cvx-gm-light rect { fill: color-mix(in srgb, #8ec5e6, transparent 45%); stroke: color-mix(in srgb, var(--text), transparent 70%); stroke-width: 1; transition: fill .15s ease; }
.cvx-gm-light.textured rect { fill: color-mix(in srgb, #e9eef2, transparent 10%); }
.cvx-gm-light.in-scope rect { stroke: color-mix(in srgb, var(--brass), transparent 30%); stroke-width: 1.5; }
.cvx-gm-light.picked rect { fill: color-mix(in srgb, var(--brass), transparent 55%); stroke: var(--brass); stroke-width: 2; }
.cvx-gm-light:hover rect { stroke: var(--brass); }
.cvx-gm-light .cvx-gm-bar { fill: none; stroke: color-mix(in srgb, var(--text), transparent 25%); stroke-width: 1.5; }
.cvx-gm-light .cvx-gm-bar.lead { stroke: #3e3c3a; stroke-width: 1; }
.cvx-gm-light rect.cvx-gm-bar-border { fill: none; stroke: color-mix(in srgb, var(--text), transparent 25%); stroke-width: 1.5; }
.cvx-gm-light text { fill: var(--text); font-weight: 800; pointer-events: none; }
.cvx-gm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.cvx-gm-tile { display: grid; gap: 2px; padding: 10px 12px; text-align: left; border: 1.5px solid var(--border); border-radius: 9px; background: color-mix(in srgb, #8ec5e6, var(--surface-control) 70%); color: var(--text); cursor: pointer; }
.cvx-gm-tile b { font-size: 12px; }
.cvx-gm-tile small { font-size: 11px; color: var(--muted); }
.cvx-gm-tile.in-scope { border-color: color-mix(in srgb, var(--brass), transparent 30%); }
.cvx-gm-tile.picked { border-color: var(--brass); background: var(--wd-accent-soft); }
.cvx-gm-tile.textured { background: color-mix(in srgb, #e9eef2, var(--surface-control) 40%); }
.cvx-row-actions small { font-size: 11px; color: var(--muted); }

/* Command palette (Ctrl+K). Sits above everything and is the one place to start from. */
.palette-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 3000; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.palette { width: min(640px, 100%); background: var(--panel, #14202c); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.45); overflow: hidden; }
.palette-input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.palette-input input { flex: 1; background: transparent; border: 0; outline: none; font: inherit; font-size: 17px; color: inherit; }
.palette-input kbd, .palette-foot kbd { font: inherit; font-size: 11px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 5px; opacity: .7; }
.palette-note { padding: 22px 18px; font-size: 13px; opacity: .7; }
.palette-results { max-height: 52vh; overflow-y: auto; padding: 6px; }
.palette-group { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; opacity: .55; padding: 10px 12px 4px; }
.palette-hit { display: grid; grid-template-columns: 20px 1fr; gap: 2px 10px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 8px; padding: 8px 12px; font: inherit; color: inherit; cursor: pointer; }
.palette-hit svg, .palette-hit i { grid-row: 1 / span 2; align-self: center; opacity: .7; }
.palette-hit.active { background: var(--panel-2, rgba(255,255,255,.07)); }
.palette-hit-title { font-weight: 550; }
.palette-hit-sub { font-size: 12px; opacity: .65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-foot { display: flex; gap: 6px; align-items: center; padding: 9px 16px; border-top: 1px solid var(--line); font-size: 11px; opacity: .6; }

/* ============================================================================
   Settings: home screen of categories, then a rail of pages inside one
   ----------------------------------------------------------------------------
   Nineteen pages in a flat tab row meant reading all nineteen to find one. The
   two-level shape below is the one people already know from an operating
   system's settings, so nobody has to learn where things are a second time.
   ========================================================================= */

.settings-home { padding: 26px 20px 8px; max-width: 1080px; margin: 0 auto; width: 100%; }
.settings-hero { display: flex; justify-content: center; margin-bottom: 26px; }
.settings-search { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 480px; padding: 0 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-panel); transition: border-color .15s ease, box-shadow .15s ease; }
.settings-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.settings-search > svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.settings-search .field { flex: 1; height: 42px; border: 0; background: none; padding: 0; }
.settings-search .field:focus { outline: 0; }

/* Category tiles. Two columns keeps each subtitle on one or two lines - a single wide column made
   the list of pages inside run long enough to stop being scannable. */
.settings-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.settings-category { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 18px 18px; text-align: left; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-panel); color: var(--text); cursor: pointer; transition: border-color .16s ease, background-color .16s ease, transform .16s ease; }
.settings-category:hover { border-color: var(--accent); transform: translateY(-1px); }
.settings-category:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings-category-icon { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--accent), transparent 88%); color: var(--accent); }
.settings-category-icon svg { width: 21px; height: 21px; }
.settings-category-text { min-width: 0; display: grid; gap: 3px; }
.settings-category-text b { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
/* How many pages are inside, so the tile sets an expectation before it is opened. */
.settings-category-count { flex: none; min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 999px; background: color-mix(in srgb, var(--accent), transparent 86%); color: var(--accent); font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; }
/* The subtitle lists every page in the category, so it is allowed two lines and then clipped. */
.settings-category-text small { font-size: 12px; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.settings-category-go { color: var(--muted); display: grid; place-items: center; }
.settings-category-go svg { width: 16px; height: 16px; }
.settings-category:hover .settings-category-go { color: var(--accent); }

/* Search results replace the tiles entirely: the person asked for a page, not a place to look next. */
.settings-results { display: grid; gap: 8px; }
.settings-results-count { margin: 0 0 4px; font-size: 12px; color: var(--muted); }
.settings-result { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 12px 16px; text-align: left; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-panel); color: var(--text); cursor: pointer; transition: border-color .16s ease, background-color .16s ease; }
.settings-result:hover { border-color: var(--accent); background: var(--surface-hover); }
.settings-result:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings-result-icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--accent), transparent 90%); color: var(--accent); }
.settings-result-icon svg { width: 16px; height: 16px; }
.settings-result-text { min-width: 0; display: grid; gap: 2px; }
.settings-result-text b { font-size: 13px; font-weight: 600; }
.settings-result-text small { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-result-group { flex: none; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.settings-no-match { margin-top: 8px; }

/* Inside a category: a rail of that category's pages beside the page itself. The rail scrolls on its
   own so a long page never drags the navigation off-screen. */
.settings-body.is-home { display: none; }
.settings-body:not(.is-home) { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 22px; align-items: start; }
.settings-rail { position: sticky; top: 0; display: flex; flex-direction: column; gap: 4px; max-height: calc(100vh - 96px); overflow-y: auto; padding-right: 4px; }
.settings-back { display: flex; align-items: center; gap: 6px; padding: 7px 10px; margin-bottom: 4px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-size: 12px; font-weight: 600; cursor: pointer; align-self: flex-start; transition: background-color .15s ease, color .15s ease; }
.settings-back:hover { background: var(--surface-hover); color: var(--text); }
.settings-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.settings-back svg { width: 14px; height: 14px; }
.settings-rail-head { display: flex; align-items: center; gap: 10px; padding: 4px 10px 12px; }
.settings-rail-head b { font-size: 16px; font-weight: 600; }
.settings-rail-icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: color-mix(in srgb, var(--accent), transparent 88%); color: var(--accent); }
.settings-rail-icon svg { width: 16px; height: 16px; }
.settings-rail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.settings-rail-item { position: relative; width: 100%; display: grid; gap: 2px; padding: 9px 12px; text-align: left; border: 0; border-radius: 8px; background: none; color: var(--text); cursor: pointer; transition: background-color .15s ease; }
.settings-rail-item:hover { background: var(--surface-hover); }
.settings-rail-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.settings-rail-item b { font-size: 13px; font-weight: 500; }
.settings-rail-item small { font-size: 11px; color: var(--muted); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settings-rail-item.active { background: color-mix(in srgb, var(--accent), transparent 90%); }
.settings-rail-item.active b { font-weight: 600; color: var(--accent); }
/* The accent bar marks the current page for anyone who cannot separate the tint from the background. */
.settings-rail-item.active::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 62%; border-radius: 0 3px 3px 0; background: var(--accent); }

.settings-pane { min-width: 0; }

@media (max-width: 900px) {
    .settings-body:not(.is-home) { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    /* Stacked, the rail must not be tall enough to bury the page under its own navigation. 150px is
       chosen so two columns still fit a 375px phone - at 190px only one did, and Selling's nine pages
       pushed the settings themselves a full screen down. */
    .settings-rail { position: static; max-height: none; margin-bottom: 6px; }
    .settings-rail-list { grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); }
    .settings-rail-item { padding: 8px 10px; }
    .settings-rail-item small { display: none; }
    .settings-rail-item.active::before { display: none; }
    .settings-rail-item.active { box-shadow: inset 0 0 0 1px var(--accent); }
}

@media (prefers-reduced-motion: reduce) {
    .settings-category:hover { transform: none; }
}

.journey-resume { font-size: 12px; padding: 9px 12px; border: 1px dashed var(--line); border-radius: 8px; margin-bottom: 10px; display: flex; gap: 8px; align-items: center; }
.journey-time { margin-left: auto; font-size: 10px; opacity: .55; }

/* ============================================================================
   Dashboard
   ----------------------------------------------------------------------------
   The page is read top-down as three questions — what needs me, how are we
   doing, where is the work coming from — so it is built as named bands rather
   than a flat run of cards. Bands are separated by space and a quiet heading,
   not by more borders: a box inside a box inside a box is what made the old
   layout read as clutter. Every panel keeps the one control that belongs to it;
   anything that scopes the whole page lives in the page bar instead.
   ============================================================================ */

.dash-band { margin-bottom: 26px; }
.dash-band:last-child { margin-bottom: 8px; }

.dash-band-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 2px 10px; }
.dash-band-head h2 { font-size: 13px; font-weight: 600; letter-spacing: .02em; margin: 0; }
.dash-band-note { font-size: 11.5px; opacity: .6; }

.dash-grid { display: grid; gap: 16px; align-items: start; }
.dash-grid-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.dash-grid-1-1 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
@media (max-width: 1000px) {
    .dash-grid-2-1 { grid-template-columns: 1fr; }
}

/* A 640x200 SVG stretched across a full-width column rendered ~440px tall and pushed everything
   below it off the screen. Cap the drawing so the chart stays a chart, not a poster. The bar chart is
   deliberately left out: it draws with preserveAspectRatio="none", so capping its height would squash
   the labels inside it rather than just shortening the bars. */
.dash-band .chart-line-svg { max-height: 230px; }
.dash-band .chart-donut-svg { max-height: 210px; }

.chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chart-head .chart-title { margin-bottom: 1px; }

/* A compact segmented control for panel-level choices, quieter than the page-bar one. */
.segmented.mini button { padding: 3px 9px; font-size: 11px; }

/* Open pipeline: a stage list, not a chart — the value bar carries the comparison and the row is
   a link, so "18 quoted" is one click from the eighteen. */
.pipeline-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pipeline-list a {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "stage count" "bar value";
    gap: 3px 10px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
}
.pipeline-list a:hover { background: var(--panel-2, rgba(255, 255, 255, .05)); }
.pipeline-stage { grid-area: stage; font-size: 12.5px; }
.pipeline-count { grid-area: count; font-size: 12.5px; opacity: .7; font-variant-numeric: tabular-nums; }
.pipeline-bar { grid-area: bar; align-self: center; height: 5px; border-radius: 3px; background: rgba(128, 128, 128, .2); overflow: hidden; }
.pipeline-bar i { display: block; height: 100%; background: var(--chart-primary); }
.pipeline-value { grid-area: value; font-size: 12px; opacity: .8; font-variant-numeric: tabular-nums; }

.target-chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 2px 2px; }

/* The page bar carries the filters, so it needs room to wrap before it starts squeezing them. */
.topbar .actions { flex-wrap: wrap; row-gap: 8px; }

/* ============================================================================
   Sidebar navigation
   ----------------------------------------------------------------------------
   Eighteen links used to run in one flat list, with the set-up screens mixed
   in among the daily ones. They now sit under section headings in the order a
   person reaches for them; Services/AppNavigation.cs owns the list and who
   sees what. A heading folds its section away, but a folded section still
   shows the page you are on, so the sidebar never hides where you are. On the
   icon rail the headings become hairline dividers, so the grouping survives.

   The markup has its own snav-* names on purpose. Bootstrap's .nav and
   .collapse, and the legacy `.nav a` / `.side-action` rules in app.css, all
   reached into the old markup - the collapse button was invisible because
   Bootstrap hides every `.collapse:not(.show)`.
   ============================================================================ */

.sidebar {
    --snav-ink: color-mix(in srgb, var(--text), var(--muted) 45%);
    --snav-active-bg: color-mix(in srgb, var(--brass), transparent 89%);
    --snav-active-ink: var(--brass);
    --snav-radius: 4px;
}

/* Brass words on a pale brass wash are too faint on white, so in the light theme the label goes to ink and
   the icon and marker carry the accent. */
.light .sidebar {
    --snav-active-bg: color-mix(in srgb, var(--brass), #fff 86%);
    --snav-active-ink: var(--text);
}

@media (min-width: 721px) {
    .sidebar { width: 216px; }
    .sidebar.collapsed { width: 56px; }
}

/* ---- Brand row: mark, name and the rail toggle ---- */
/* The sidebar is a flex column. Without flex:none the brand row shrinks whenever the list overflows, and its
   rule stops lining up with the page bar's. */
.sidebar .brand { flex: none; }
.sidebar:not(.collapsed) .brand { gap: 10px; padding-inline: 14px 8px; }
.sidebar .brand-copy { flex: 1; min-width: 0; }
/* The mark is 606x762; forced into a 28px square it was visibly squashed. */
.sidebar .logo { width: 24px; height: 28px; object-fit: contain; }

.snav-rail-toggle {
    width: 28px;
    height: 28px;
    flex: none;
    display: grid;
    place-items: center;
    margin-left: auto;
    padding: 0;
    border: 0;
    border-radius: var(--snav-radius);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color .14s ease, background-color .14s ease, opacity .14s ease;
}
.snav-rail-toggle:hover { color: var(--text); background: var(--surface-hover); }

/* ---- Search: the palette was only reachable by people who already knew Ctrl+K ---- */
.snav-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 16px);
    height: 32px;
    flex: none;
    margin: 10px 8px 6px;
    padding: 0 6px 0 10px;
    border: 1px solid var(--border);
    border-radius: var(--snav-radius);
    background: color-mix(in srgb, var(--surface-control), transparent 55%);
    color: var(--muted);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .14s ease, color .14s ease;
}
.snav-search:hover { border-color: color-mix(in srgb, var(--blue), transparent 35%); color: var(--text); }
.snav-search .ui-icon { width: 15px; height: 15px; }
.snav-search .snav-label { flex: 1; }
.snav-search kbd {
    padding: 2px 5px;
    border: 1px solid var(--border);
    border-radius: 3px;
    background: var(--surface-panel);
    color: var(--muted);
    font: 500 10px/1.2 'JetBrains Mono', monospace;
    box-shadow: none;
}

/* ---- The scrolling list ---- */
.sidebar .snav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4px 8px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.snav-list { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; }
.snav-section + .snav-section { margin-top: 14px; }

.snav-head {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    height: 24px;
    margin-bottom: 2px;
    padding: 0 6px 0 10px;
    border: 0;
    border-radius: var(--snav-radius);
    background: transparent;
    color: var(--muted);
    font: 600 10px/1 'JetBrains Mono', monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
}
.snav-head:hover { color: var(--text); }

/* The chevron shows only when it has something to say: on hover, on focus, or when the section is folded. */
.snav-head-chevron { width: 12px; height: 12px; margin-left: auto; opacity: 0; transition: opacity .14s ease, transform .2s cubic-bezier(.22, 1, .36, 1); }
.snav-head:hover .snav-head-chevron,
.snav-head:focus-visible .snav-head-chevron,
.snav-section.is-folded .snav-head-chevron { opacity: 1; }
.snav-section.is-folded .snav-head-chevron { transform: rotate(-90deg); }
@media (hover: none) {
    .snav-head-chevron { opacity: .7; }
}

/* Folding a section never hides the page you are on. */
.snav-section.is-folded .snav-list > li:not(.is-current) { display: none; }

.snav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 32px;
    padding: 0 8px 0 10px;
    border: 0;
    border-radius: var(--snav-radius);
    background: transparent;
    color: var(--snav-ink);
    font: inherit;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .14s ease, color .14s ease;
}
.snav-link .ui-icon { opacity: .8; transition: opacity .14s ease; }
.snav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.snav-link:hover { background: var(--surface-hover); color: var(--text); }
.snav-link:hover .ui-icon { opacity: 1; }
.snav-link.active,
.snav-link.active:hover { background: var(--snav-active-bg); color: var(--snav-active-ink); font-weight: 600; }
.snav-link.active .ui-icon { color: var(--brass); opacity: 1; }
.light .snav-link.active .ui-icon { color: var(--accent-ink); }
/* Drawn, not a border, so the active row never nudges its label sideways. */
.snav-link.active::before {
    content: "";
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--brass);
}
.snav-link .notif-badge { margin-left: auto; }

.sidebar :is(.snav-link, .snav-head, .snav-search, .snav-rail-toggle, .snav-account-trigger, .snav-menu-item):focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: -2px;
    box-shadow: none;
}

/* ---- Pinned footer: settings, customer mode and the account menu ---- */
.snav-foot { flex: none; padding: 8px; border-top: 1px solid var(--border); }

.snav-account { position: relative; margin-top: 6px; }
.snav-account-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 0 6px;
    border-radius: var(--snav-radius);
    list-style: none;
    cursor: pointer;
    user-select: none;
    transition: background-color .14s ease;
}
.snav-account-trigger::-webkit-details-marker { display: none; }
.snav-account-trigger:hover,
.snav-account[open] > .snav-account-trigger,
.snav-account-trigger.active { background: var(--surface-hover); }

.snav-avatar {
    width: 28px;
    height: 28px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brass), transparent 84%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brass), transparent 62%);
    color: var(--brass);
    font: 700 12px/1 'JetBrains Mono', monospace;
}
.light .snav-avatar { color: var(--accent-ink); }

.snav-account-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
.snav-account-copy b,
.snav-account-copy small,
.snav-menu-head b,
.snav-menu-head small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snav-account-copy b,
.snav-menu-head b { color: var(--text); font-weight: 600; }
.snav-account-copy small,
.snav-menu-head small { color: var(--muted); }
.snav-account-chevron { width: 14px; height: 14px; color: var(--muted); }

.snav-menu {
    position: absolute;
    z-index: 90;
    left: 0;
    bottom: calc(100% + 6px);
    min-width: 100%;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--blue), transparent 62%);
    border-radius: 6px;
    background: var(--steel);
    box-shadow: 0 16px 36px #0009;
    transform-origin: bottom left;
}
.snav-account[open] > .snav-menu { animation: snav-menu-in .16s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes snav-menu-in {
    from { opacity: 0; transform: translateY(4px) scale(.98); }
    to { opacity: 1; transform: none; }
}

/* Only the rail needs the name repeated; expanded, it is already on the row that opened the menu. */
.snav-menu-head { display: none; gap: 2px; margin-bottom: 4px; padding: 6px 10px 8px; border-bottom: 1px solid color-mix(in srgb, var(--blue), transparent 70%); }

.snav-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.snav-menu-item:hover { background: color-mix(in srgb, var(--blue), transparent 78%); color: var(--text); }
.snav-menu-item .ui-icon { width: 15px; height: 15px; color: var(--muted); }
.snav-menu form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid color-mix(in srgb, var(--blue), transparent 70%); }

.light .snav-menu { background: #fff; border-color: #cbd6df; box-shadow: 0 16px 36px #25354729; }
.light .snav-menu-item:hover { background: #edf2f6; }
.light .snav-menu form,
.light .snav-menu-head { border-color: #e1e7ec; }

/* ---- Icon rail ---- */
@media (min-width: 721px) {
    .sidebar.collapsed .brand { position: relative; justify-content: center; padding-inline: 0; }
    .sidebar.collapsed .brand-copy { display: none; }
    /* On the rail the brand cell is the expand button: the mark shows until you point at it or tab to it. */
    .sidebar.collapsed .snav-rail-toggle { position: absolute; inset: 8px; width: auto; height: auto; margin: 0; opacity: 0; }
    .sidebar.collapsed .snav-rail-toggle:hover,
    .sidebar.collapsed .snav-rail-toggle:focus-visible { opacity: 1; background: var(--surface-hover); }

    .sidebar.collapsed .snav-search { width: 40px; margin-inline: 8px; padding: 0; justify-content: center; }
    .sidebar.collapsed .snav-search kbd { display: none; }

    /* Labels leave the screen but stay in the accessibility tree, so every icon keeps its name. */
    .sidebar.collapsed .snav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .sidebar.collapsed .snav-link { justify-content: center; padding: 0; }
    .sidebar.collapsed .snav-link .notif-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; margin: 0; padding: 0 4px; font-size: 9px; }

    .sidebar.collapsed .snav-head { display: none; }
    .sidebar.collapsed .snav-section + .snav-section { margin-top: 0; }
    .sidebar.collapsed .snav-section + .snav-section::before { content: ""; display: block; height: 1px; margin: 8px; background: var(--border); }
    .sidebar.collapsed .snav-section.is-folded .snav-list > li { display: block; }

    .sidebar.collapsed .snav-account-trigger { justify-content: center; padding: 0; }
    .sidebar.collapsed .snav-account-copy,
    .sidebar.collapsed .snav-account-chevron { display: none; }
    /* 100% is the account row, which sits 8px inside the rail; +18px leaves a clear 10px gap past its edge. */
    .sidebar.collapsed .snav-menu { left: calc(100% + 18px); bottom: 0; min-width: 232px; }
    .sidebar.collapsed .snav-menu-head { display: grid; }
}

@media (max-width: 720px) {
    .snav-rail-toggle { display: none; }
}

/* Text zoom (Settings > Appearance) scales the sidebar with everything else. */
#app .snav-link,
#app .snav-search,
#app .snav-menu-item { font-size: calc(var(--text-sm) * var(--text-scale)); }
#app .snav-head,
#app .snav-search kbd { font-size: calc(10px * var(--text-scale)); }
#app .snav-account-copy b,
#app .snav-menu-head b { font-size: calc(12px * var(--text-scale)); }
#app .snav-account-copy small,
#app .snav-menu-head small { font-size: calc(10.5px * var(--text-scale)); }

/* ============================================================================
   Account and security (Components/Account: ManageLayout and every Manage page)
   ----------------------------------------------------------------------------
   These pages were the Identity template's stock Bootstrap: floating labels,
   blue buttons, three headings stacked before any content, and a layout that
   did not scroll. They now take Settings' shape (a rail of sections beside the
   page) and the app's tokens, so they read in both themes and at any text zoom.
   Every class is acct-*, and nothing here reaches outside the account pages.
   ============================================================================ */

.acct-body {
    --acct-fs-xs: calc(11.5px * var(--text-scale, 1));
    --acct-fs-sm: calc(12.5px * var(--text-scale, 1));
    --acct-fs-md: calc(13.5px * var(--text-scale, 1));
    --acct-fs-base: calc(14px * var(--text-scale, 1));
    --acct-fs-lg: calc(15px * var(--text-scale, 1));
    --acct-fs-xl: calc(17px * var(--text-scale, 1));
    --acct-fs-2xl: calc(24px * var(--text-scale, 1));
    padding: 28px 28px 56px;
}

.acct-shell {
    display: grid;
    grid-template-columns: 252px minmax(0, 1fr);
    gap: 36px;
    align-items: start;
    /* Rail + gap + the pane's own 760px cap, so the pair is centred as one block. */
    max-width: 1060px;
    margin: 0 auto;
}

.acct-pane [hidden] { display: none !important; }
.acct-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---- Rail: who you are, then the sections ---- */
.acct-rail {
    position: sticky;
    top: 0;
    display: grid;
    gap: 16px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.acct-id { display: flex; align-items: center; gap: 12px; padding: 2px 10px 16px; border-bottom: 1px solid var(--border-soft); }
.acct-avatar {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brass), transparent 84%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brass), transparent 60%);
    color: var(--brass);
    font: 700 14px/1 'JetBrains Mono', monospace;
    letter-spacing: .02em;
}
.light .acct-avatar { color: var(--accent-ink); }
.acct-id-text { min-width: 0; display: grid; gap: 2px; }
.acct-id-text b,
.acct-id-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-id-text b { color: var(--text); font-size: var(--acct-fs-base); font-weight: 600; }
.acct-id-text small { color: var(--muted); font-size: var(--acct-fs-sm); }

.acct-nav { display: grid; gap: 16px; }
.acct-nav ul { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.acct-nav-heading {
    display: block;
    padding: 0 10px 6px;
    color: var(--muted);
    font: 600 10px/1 'JetBrains Mono', monospace;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.acct-nav-link {
    position: relative;
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--text);
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.acct-nav-link .ui-icon { color: var(--muted); transition: color .15s ease; }
.acct-nav-link:hover { background: var(--surface-hover); color: var(--text); }
.acct-nav-link:hover .ui-icon { color: var(--text); }
.acct-nav-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; box-shadow: none; }
.acct-nav-text { min-width: 0; display: grid; gap: 1px; }
.acct-nav-text b { font-size: var(--acct-fs-md); font-weight: 500; line-height: 1.3; }
.acct-nav-text small { color: var(--muted); font-size: var(--acct-fs-xs); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-nav-link.active { background: color-mix(in srgb, var(--accent), transparent 90%); }
.acct-nav-link.active b { color: var(--accent); font-weight: 600; }
.acct-nav-link.active .ui-icon { color: var(--accent); }
.light .acct-nav-link.active { background: color-mix(in srgb, var(--brass), #fff 86%); }
.light .acct-nav-link.active b,
.light .acct-nav-link.active .ui-icon { color: var(--accent-ink); }
/* Drawn, not a border, so the current section is marked for anyone who can't separate the tint from the page. */
.acct-nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
}

/* ---- The section beside it ---- */
.acct-pane { min-width: 0; max-width: 760px; display: grid; gap: 18px; align-content: start; }

.acct-head { display: grid; gap: 10px; margin-bottom: 4px; }
.acct-back {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: -6px;
    padding: 4px 10px 4px 4px;
    border-radius: 6px;
    color: var(--muted);
    font-size: var(--acct-fs-sm);
    font-weight: 500;
    text-decoration: none;
}
.acct-back:hover { background: var(--surface-hover); color: var(--text); }
.acct-back .ui-icon { width: 15px; height: 15px; }
.acct-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.acct-head-text { min-width: 0; max-width: 64ch; }
.acct-head h2 { margin: 0; color: var(--text); font-size: var(--acct-fs-2xl); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.acct-head p { margin: 6px 0 0; color: var(--muted); font-size: var(--acct-fs-base); line-height: 1.55; }

/* Status messages come from the shared StatusMessage component (Bootstrap alert classes); restyled here only. */
.acct-pane > .alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid;
    border-radius: 12px;
    color: var(--text);
    font-size: var(--acct-fs-md);
    line-height: 1.5;
}
.acct-pane > .alert::before {
    content: "";
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    background: var(--acct-alert-tone);
    -webkit-mask: var(--acct-alert-icon) center / contain no-repeat;
    mask: var(--acct-alert-icon) center / contain no-repeat;
}
.acct-pane > .alert-success {
    --acct-alert-tone: var(--green);
    --acct-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.8 2.8 5.7-5.8'/%3E%3C/svg%3E");
    border-color: color-mix(in srgb, var(--green), transparent 60%);
    background: color-mix(in srgb, var(--green), transparent 91%);
}
.acct-pane > .alert-danger {
    --acct-alert-tone: var(--red);
    --acct-alert-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5h.01'/%3E%3C/svg%3E");
    border-color: color-mix(in srgb, var(--red), transparent 55%);
    background: color-mix(in srgb, var(--red), transparent 91%);
}
.light .acct-pane > .alert-danger { --acct-alert-tone: #b91c1c; }

/* ---- Cards ---- */
.acct-card { position: relative; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-panel); }
.light .acct-card { box-shadow: 0 1px 2px #1e2a3808; }
.acct-card.is-danger { border-color: color-mix(in srgb, var(--red), transparent 58%); }
.acct-card > form { margin: 0; }

.acct-card-head { display: flex; align-items: flex-start; gap: 14px; padding: 18px 22px 0; }
.acct-card-title { flex: 1; min-width: 0; }
.acct-card-title h3 { margin: 0; color: var(--text); font-size: var(--acct-fs-lg); font-weight: 600; line-height: 1.35; }
.acct-card-title p { margin: 3px 0 0; color: var(--muted); font-size: var(--acct-fs-md); line-height: 1.5; }
.acct-card-aside { flex: none; margin: 0; }
.acct-card-body { padding: 16px 22px 20px; }
.acct-card-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 22px;
    border-top: 1px solid var(--border-soft);
    border-radius: 0 0 11px 11px;
    background: color-mix(in srgb, var(--surface-control), transparent 70%);
}
.acct-card-foot > .acct-hint:first-child,
.acct-card-foot > .acct-actions:first-child { margin-right: auto; }
.acct-card-foot form { margin: 0; }
.light .acct-card-foot { background: #f8fafb; }

.acct-icon {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: color-mix(in srgb, var(--blue), transparent 84%);
    color: color-mix(in srgb, var(--blue), var(--text) 40%);
}
.acct-icon .ui-icon { width: 18px; height: 18px; }
.acct-icon.is-accent { background: color-mix(in srgb, var(--brass), transparent 86%); color: var(--brass); }
.acct-icon.is-good { background: color-mix(in srgb, var(--green), transparent 86%); color: var(--green); }
.acct-icon.is-warn { background: color-mix(in srgb, var(--orange), transparent 86%); color: var(--orange); }
.acct-icon.is-bad { background: color-mix(in srgb, var(--red), transparent 86%); color: var(--red); }
.light .acct-icon { background: #e7edf2; color: #496b8c; }
.light .acct-icon.is-accent { background: color-mix(in srgb, var(--brass), #fff 84%); color: var(--accent-ink); }
.light .acct-icon.is-good { background: #e3f5ea; color: #15803d; }
.light .acct-icon.is-warn { background: #fdf0dc; color: #b45309; }
.light .acct-icon.is-bad { background: #fde8e8; color: #b91c1c; }

/* Buttons keep the app's colours; on these pages they are a touch taller and share the fields' corner radius. */
.acct-pane .btn { height: 36px; padding: 0 14px; border-radius: 8px; white-space: nowrap; }
.acct-pane .btn .ui-icon { width: 15px; height: 15px; }
/* The light theme's generic ".light .btn:not(.primary)" outranks .btn.danger, which turned a destructive button grey. */
.light .acct-pane .btn.danger:not(.ghost) { border-color: #dc2626; background: #dc2626; color: #fff; }
.light .acct-pane .btn.danger.ghost { border-color: color-mix(in srgb, #dc2626, transparent 50%); background: transparent; color: #b91c1c; }
.light .acct-pane .btn.danger-text { color: #b91c1c; }

.acct-link { color: var(--accent); font-weight: 600; text-decoration: none; }
.acct-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.light .acct-link { color: var(--accent-ink); }
.acct-break { overflow-wrap: anywhere; }

/* ---- Forms ---- */
.acct-form { display: grid; gap: 20px; }
.acct-field { min-width: 0; display: grid; gap: 7px; }
.acct-label { color: var(--text); font-size: var(--acct-fs-md); font-weight: 600; line-height: 1.3; }
.acct-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.acct-label-row .acct-link { font-size: var(--acct-fs-sm); }
.acct-optional { margin-left: 6px; color: var(--muted); font-size: var(--acct-fs-sm); font-weight: 400; }
.acct-hint { color: var(--muted); font-size: var(--acct-fs-sm); line-height: 1.5; }

#app .acct-input.field {
    width: 100%;
    height: 42px;
    padding: 0 13px;
    border-radius: 8px;
    font-family: 'Work Sans', sans-serif;
    font-size: calc(14px * var(--text-scale));
}
.acct-input.field::placeholder { color: color-mix(in srgb, var(--muted), transparent 30%); }
.acct-input.field.invalid { border-color: color-mix(in srgb, var(--red), transparent 20%); }
.acct-input.field.invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--red), transparent 82%); }
.acct-pane .validation-message { font-size: var(--acct-fs-sm); line-height: 1.45; }
.light .acct-pane .validation-message { color: #b91c1c !important; }

.acct-static {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 42px;
    padding: 0 4px 0 13px;
    border: 1px dashed var(--border);
    border-radius: 8px;
}
.acct-static-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: var(--acct-fs-base); }
.acct-static .acct-link { padding: 8px 10px; border-radius: 6px; font-size: var(--acct-fs-sm); }

.acct-secret { position: relative; }
#app .acct-secret .acct-input.field { padding-right: 46px; }
.acct-reveal {
    position: absolute;
    top: 50%;
    right: 5px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
    transform: translateY(-50%);
    cursor: pointer;
}
.acct-reveal:hover { background: var(--surface-hover); color: var(--text); }
.acct-reveal .ui-icon { width: 17px; height: 17px; }
.acct-reveal .acct-reveal-hide,
.acct-reveal[aria-pressed="true"] .acct-reveal-show { display: none; }
.acct-reveal[aria-pressed="true"] .acct-reveal-hide { display: block; }

/* Each rule is ticked off as the person types (flashfix-ui.js); unticked it still reads as a requirement. */
.acct-rules {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
    gap: 5px 16px;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
}
.acct-rules li { position: relative; padding-left: 22px; color: var(--muted); font-size: var(--acct-fs-sm); line-height: 1.5; }
.acct-rules li::before {
    content: "";
    position: absolute;
    left: 1px;
    top: .3em;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--muted), transparent 35%);
    transition: background-color .15s ease, box-shadow .15s ease;
}
.acct-rules li.is-met { color: var(--text); }
.acct-rules li.is-met::before {
    background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") center / 9px no-repeat;
    box-shadow: none;
}
.acct-match { color: var(--muted); font-size: var(--acct-fs-sm); }
.acct-match:empty { display: none; }
.acct-match.is-match { color: var(--green); }

.acct-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-control), transparent 60%);
    cursor: pointer;
}
.acct-option:hover { border-color: color-mix(in srgb, var(--blue), transparent 40%); }
.acct-option input { width: 18px; height: 18px; flex: none; margin: 1px 0 0; accent-color: var(--brass); cursor: pointer; }
.acct-option-text { display: grid; gap: 2px; }
.acct-option-text b { color: var(--text); font-size: var(--acct-fs-md); font-weight: 600; }
.acct-option-text small { color: var(--muted); font-size: var(--acct-fs-sm); line-height: 1.45; }
.light .acct-option { background: #f8fafb; }

/* ---- Profile: security checkup and work details ---- */
/* Two across at the pane's width: four tiles read as a 2 x 2 grid rather than a row of three and an orphan. */
.acct-checks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.acct-checks > li { display: flex; }
.acct-check {
    flex: 1;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-control), transparent 55%);
    color: var(--text);
    text-decoration: none;
    transition: border-color .15s ease, background-color .15s ease;
}
.acct-check:hover { border-color: color-mix(in srgb, var(--accent), transparent 35%); background: var(--surface-hover); color: var(--text); }
.acct-check.is-warn { border-color: color-mix(in srgb, var(--orange), transparent 62%); }
.acct-check-state { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; }
.acct-check-state .ui-icon { width: 15px; height: 15px; }
.acct-check.is-good .acct-check-state { background: color-mix(in srgb, var(--green), transparent 84%); color: var(--green); }
.acct-check.is-warn .acct-check-state { background: color-mix(in srgb, var(--orange), transparent 84%); color: var(--orange); }
.acct-check.is-neutral .acct-check-state { background: color-mix(in srgb, var(--blue), transparent 82%); color: color-mix(in srgb, var(--blue), var(--text) 40%); }
.acct-check-text { min-width: 0; display: grid; gap: 2px; padding-top: 1px; }
.acct-check-text b { font-size: var(--acct-fs-md); font-weight: 600; line-height: 1.35; }
.acct-check-text small { color: var(--muted); font-size: var(--acct-fs-sm); line-height: 1.4; }
.light .acct-check { background: #f8fafb; }
.light .acct-check:hover { background: #fff; }

.acct-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 16px 24px; margin: 0; }
.acct-facts > div { min-width: 0; }
.acct-facts dt { margin-bottom: 4px; color: var(--muted); font: 600 10px/1.2 'JetBrains Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.acct-facts dd { margin: 0; color: var(--text); font-size: var(--acct-fs-base); font-weight: 500; overflow-wrap: anywhere; }

/* ---- Rows: a thing, what it means, what you can do about it ---- */
.acct-rows { margin: 0; padding: 0; list-style: none; }
.acct-card-head + .acct-rows { margin-top: 16px; }
.acct-row { display: flex; align-items: center; gap: 14px; padding: 15px 22px; }
.acct-rows > .acct-row { border-top: 1px solid var(--border-soft); }
.acct-row.is-solo { padding: 18px 22px; }
.acct-row-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.acct-row-text b { display: block; color: var(--text); font-size: var(--acct-fs-base); font-weight: 600; line-height: 1.4; }
.acct-row-text b .badge { margin-left: 8px; vertical-align: 2px; }
.acct-row-text small { color: var(--muted); font-size: var(--acct-fs-sm); line-height: 1.5; }
.acct-row-aside { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.acct-row-aside form { margin: 0; }

.acct-meter { display: block; width: min(220px, 100%); height: 5px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-control); }
.acct-meter i { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.acct-meter.is-low i { background: var(--orange); }
.light .acct-meter { background: #e3e9ee; }

.acct-note { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid; border-radius: 12px; font-size: var(--acct-fs-md); line-height: 1.5; }
.acct-note > .ui-icon { width: 18px; height: 18px; margin-top: 1px; }
.acct-note-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.acct-note-text b { color: var(--text); font-weight: 600; }
.acct-note-text span { color: color-mix(in srgb, var(--text), var(--muted) 45%); }
.acct-note > .btn { flex: none; align-self: center; }
.acct-note.is-warn { border-color: color-mix(in srgb, var(--orange), transparent 60%); background: color-mix(in srgb, var(--orange), transparent 92%); color: var(--orange); }
.acct-note.is-bad { border-color: color-mix(in srgb, var(--red), transparent 58%); background: color-mix(in srgb, var(--red), transparent 92%); color: var(--red); }
.light .acct-note.is-bad { color: #b91c1c; }

/* ---- Two-factor: the state in words, first ---- */
.acct-hero { display: flex; align-items: center; gap: 18px; padding: 22px; }
.acct-hero-icon { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 14px; }
.acct-hero-icon .ui-icon { width: 26px; height: 26px; }
.acct-hero.is-on { border-color: color-mix(in srgb, var(--green), transparent 62%); background: linear-gradient(135deg, color-mix(in srgb, var(--green), transparent 92%), var(--surface-panel) 62%); }
.acct-hero.is-on .acct-hero-icon { background: color-mix(in srgb, var(--green), transparent 84%); color: var(--green); }
.acct-hero.is-off { border-color: color-mix(in srgb, var(--orange), transparent 62%); background: linear-gradient(135deg, color-mix(in srgb, var(--orange), transparent 92%), var(--surface-panel) 62%); }
.acct-hero.is-off .acct-hero-icon { background: color-mix(in srgb, var(--orange), transparent 84%); color: var(--orange); }
.acct-hero-text { flex: 1; min-width: 0; }
.acct-hero-text h3 { margin: 0; color: var(--text); font-size: var(--acct-fs-xl); font-weight: 600; line-height: 1.3; }
.acct-hero-text p { max-width: 58ch; margin: 4px 0 0; color: var(--muted); font-size: var(--acct-fs-md); line-height: 1.5; }
.acct-hero-aside { flex: none; }

/* ---- Authenticator setup ---- */
.acct-steps { margin: 0; padding: 0; list-style: none; counter-reset: acct-step; }
.acct-step { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 16px; padding: 22px; counter-increment: acct-step; }
.acct-step + .acct-step { border-top: 1px solid var(--border-soft); }
.acct-step::before {
    content: counter(acct-step);
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brass), transparent 86%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brass), transparent 60%);
    color: var(--brass);
    font: 700 13px/1 'JetBrains Mono', monospace;
}
.light .acct-step::before { color: var(--accent-ink); }
.acct-step-body { min-width: 0; }
.acct-step-body h3 { margin: 4px 0 0; color: var(--text); font-size: var(--acct-fs-lg); font-weight: 600; line-height: 1.35; }
.acct-step-body > p { margin: 4px 0 0; color: var(--muted); font-size: var(--acct-fs-md); line-height: 1.55; }

.acct-apps { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.acct-app { display: grid; gap: 3px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--surface-control), transparent 55%); }
.acct-app b { color: var(--text); font-size: var(--acct-fs-md); font-weight: 600; }
.acct-app span { color: var(--muted); font-size: var(--acct-fs-sm); }
.light .acct-app { background: #f8fafb; }

.acct-qr-wrap { display: flex; align-items: flex-start; gap: 24px; flex-wrap: wrap; margin-top: 16px; }
/* Black on white in both themes, with QRCoder's own quiet zone as the margin: what a phone camera reads best. */
.acct-qr { width: 184px; height: 184px; flex: none; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--border), 0 10px 26px #0000002e; }
.acct-qr svg { display: block; width: 100%; height: 100%; }
.acct-qr-alt { flex: 1; min-width: min(240px, 100%); display: grid; align-content: start; gap: 8px; padding-top: 4px; }
.acct-key-row { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.acct-key {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-control), transparent 40%);
    color: var(--text);
    /* Sized so the 32-character key (eight groups of four) sits on one line beside its Copy button. */
    font: 500 13.5px/1.5 'JetBrains Mono', monospace;
    letter-spacing: .01em;
    overflow-wrap: anywhere;
    user-select: all;
}
.light .acct-key { background: #f4f7f9; color: var(--text); }

.acct-verify { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.acct-verify .acct-field { flex: 0 1 240px; }
.acct-verify > .btn { margin-top: 30px; }
#app .acct-otp.field {
    height: 48px;
    font-family: 'JetBrains Mono', monospace;
    font-size: calc(22px * var(--text-scale));
    letter-spacing: .3em;
    text-align: center;
}

/* ---- Passkeys ---- */
/* The add button is in the hero's aside, above a hint that only appears on a browser that can't do it. */
.acct-hero-aside form { display: grid; gap: 6px; justify-items: end; margin: 0; }
.acct-hero-aside .acct-hint { max-width: 22ch; text-align: right; }
.acct-pane .btn[data-busy] { opacity: .65; cursor: progress; }
/* The four "what a passkey is" cards read as prose, not as the two-line app links they share a class with. */
.acct-apps .acct-app { flex: 1 1 260px; max-width: 340px; }
.acct-apps .acct-app span { line-height: 1.5; }

/* ---- Recovery codes ---- */
.acct-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: acct-code; }
.acct-codes li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface-control), transparent 40%);
    counter-increment: acct-code;
}
.acct-codes li::before { content: counter(acct-code, decimal-leading-zero); color: var(--muted); font: 500 11px/1 'JetBrains Mono', monospace; }
.acct-codes code { color: var(--text); font: 600 15px/1.2 'JetBrains Mono', monospace; letter-spacing: .06em; user-select: all; }
.light .acct-codes li { background: #f4f7f9; }
.acct-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- Confirmations: what will happen, then the choice ---- */
.acct-confirm { display: flex; align-items: flex-start; gap: 16px; padding: 22px; }
.acct-confirm-text { flex: 1; min-width: 0; }
.acct-confirm-text h3 { margin: 6px 0 0; color: var(--text); font-size: var(--acct-fs-xl); font-weight: 600; line-height: 1.35; }
.acct-bullets { display: grid; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.acct-bullets li { position: relative; padding-left: 18px; color: color-mix(in srgb, var(--text), var(--muted) 35%); font-size: var(--acct-fs-md); line-height: 1.55; }
.acct-bullets li::before { content: ""; position: absolute; left: 3px; top: .65em; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.acct-bullets b { color: var(--text); }

/* ---- Devices: sessions and recent activity ---- */
.acct-activity .acct-row { padding-block: 12px; }
.acct-activity .acct-row-text b { font-size: var(--acct-fs-md); }
.acct-dot {
    width: 9px;
    height: 9px;
    flex: none;
    margin: 0 4px 0 2px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--blue), var(--text) 25%);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue), transparent 85%);
}
.acct-dot.is-alert { background: var(--orange); box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange), transparent 80%); }
.acct-when { flex: none; color: var(--muted); font: 500 12px/1.3 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (max-width: 1100px) {
    .acct-body { padding-inline: 20px; }
    .acct-shell { grid-template-columns: 224px minmax(0, 1fr); gap: 24px; }
}

/* Narrow: the rail becomes a row of pills above the section, scrolled so the current one is in view. */
@media (max-width: 900px) {
    .acct-body { padding: 16px 16px 40px; }
    .acct-shell { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    .acct-rail { position: static; max-height: none; overflow: visible; gap: 0; }
    .acct-id { display: none; }
    .acct-nav {
        display: flex;
        gap: 6px;
        margin: 0 -16px;
        padding: 2px 16px 6px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .acct-nav::-webkit-scrollbar { display: none; }
    .acct-nav-group,
    .acct-nav ul { display: contents; }
    .acct-nav li { flex: none; scroll-snap-align: start; }
    .acct-nav-heading,
    .acct-nav-text small { display: none; }
    .acct-nav-link { grid-template-columns: 16px auto; gap: 8px; padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px; }
    .acct-nav-text b { white-space: nowrap; }
    .acct-nav-link.active { border-color: color-mix(in srgb, var(--accent), transparent 45%); }
    .acct-nav-link.active::before { display: none; }
    .acct-pane { max-width: none; }
}

@media (max-width: 600px) {
    .acct-body { --acct-fs-2xl: calc(20px * var(--text-scale, 1)); }
    .acct-card-head,
    .acct-card-body,
    .acct-card-foot,
    .acct-row,
    .acct-row.is-solo,
    .acct-confirm,
    .acct-step,
    .acct-hero { padding-inline: 16px; }
    .acct-row { flex-wrap: wrap; }
    .acct-row-aside { width: 100%; justify-content: flex-start; padding-left: 50px; }
    .acct-row-text:first-child ~ .acct-row-aside { padding-left: 0; }
    .acct-activity .acct-when { width: 100%; padding-left: 29px; }
    .acct-note { flex-wrap: wrap; }
    /* The text shrinks rather than wraps unless it claims the line, so the button drops below it instead. */
    .acct-note-text { flex-basis: calc(100% - 30px); }
    .acct-note > .btn { margin-left: 30px; }
    .acct-hero { flex-wrap: wrap; }
    .acct-hero-aside { width: 100%; }
    .acct-hero-aside .btn { width: 100%; }
    .acct-card-head { flex-wrap: wrap; }
    .acct-card-head > .acct-card-aside { width: 100%; }
    .acct-card-foot > .btn,
    .acct-card-foot > form { flex: 1 1 auto; }
    .acct-card-foot > form .btn { width: 100%; }
    .acct-codes { grid-template-columns: minmax(0, 1fr); }
    .acct-qr-wrap { justify-content: center; }
    .acct-step { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .acct-verify .acct-field { flex: 1 1 100%; }
    .acct-verify > .btn { width: 100%; margin-top: 0; }
}

/* Printing recovery codes prints the codes, not the app around them. Scoped with :has() to the page
   that shows them: unscoped, this blanked every other page's printing (the quotation printed empty). */
@media print {
    body:has(.acct-codes-card) * { visibility: hidden !important; }
    .acct-codes-card,
    .acct-codes-card * { visibility: visible !important; }
    .acct-codes-card { position: absolute; top: 0; left: 0; width: 100%; border: 0; background: #fff; box-shadow: none; }
    .acct-codes-card .acct-card-foot,
    .acct-codes-card .acct-icon { display: none; }
    .acct-codes-card h3,
    .acct-codes-card code { color: #000; }
    .acct-codes li { border-color: #999; background: #fff; }
}

/* ============================================================================
   Lead workflow dialog (Components/Shared/LeadWorkflowDialog.razor)
   Intent first, then only the fields that intent needs: chips for quick single
   choices, cards for the outcomes that change what happens next, and a footer
   sentence that says what the save will do. Header and footer stay put while
   the body scrolls; below 560px it becomes a bottom sheet. Nothing else uses
   lwf-*; grep before borrowing one of these names.
   ========================================================================== */
.lwf-backdrop {
    display: grid;
    place-items: center;
    padding: 24px 16px;
}

.lwf-dialog {
    --lwf-xs: calc(var(--text-xs) * var(--text-scale, 1));
    --lwf-sm: calc(var(--text-sm) * var(--text-scale, 1));
    --lwf-lg: calc(var(--text-lg) * var(--text-scale, 1));
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(580px, 100%);
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    background: var(--surface-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 28px 64px rgba(0, 0, 0, .4);
    color: var(--text);
    outline: 0;
    animation: lwf-rise .22s cubic-bezier(.22, 1, .36, 1) both;
}

/* The dialog takes focus when it opens so screen readers announce it; that is not a keyboard target to ring. */
.lwf-dialog:focus-visible {
    outline: 0;
    box-shadow: 0 28px 64px rgba(0, 0, 0, .4);
}

.lwf-sentinel {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.lwf-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px 14px;
}

.lwf-head-text {
    flex: 1;
    min-width: 0;
}

.lwf-head h2 {
    margin: 0;
    font-size: var(--lwf-lg);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
    color: var(--text);
}

.lwf-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    margin: 6px 0 0;
    font-size: var(--lwf-xs);
    color: var(--muted);
}

.lwf-meta b {
    font-weight: 600;
    color: var(--text);
}

.lwf-meta .mono {
    font-family: 'JetBrains Mono', monospace;
    letter-spacing: .02em;
}

.lwf-meta-fact {
    min-width: 0;
    overflow-wrap: anywhere;
}

.lwf-close {
    flex: none;
    width: 32px;
    height: 32px;
    margin: -4px -6px 0 0;
    color: var(--muted);
}

.lwf-close:hover:not(:disabled) {
    color: var(--text);
    background: var(--surface-hover);
}

.lwf-close .ui-icon {
    width: 16px;
    height: 16px;
}

.lwf-modes {
    margin: 0 20px 14px;
}

.lwf-modes button {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    height: 30px;
    padding: 0 10px;
    font-size: var(--lwf-sm);
    font-weight: 600;
    white-space: nowrap;
}

.lwf-modes .ui-icon {
    flex: none;
    width: 14px;
    height: 14px;
}

.lwf-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 16px 20px 6px;
    border-top: 1px solid var(--border-soft);
}

.lwf-section {
    min-width: 0;
    margin: 0 0 18px;
    padding: 0;
    border: 0;
}

.lwf-section > legend {
    padding: 0;
    margin-bottom: 8px;
}

.lwf-group-label {
    margin: 12px 0 6px;
    font-size: var(--lwf-xs);
    color: var(--muted);
}

.lwf-section > legend + .lwf-group-label {
    margin-top: 0;
}

.lwf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lwf-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-control);
    color: var(--muted);
    font-size: var(--lwf-sm);
    font-weight: 600;
    cursor: pointer;
    user-select: none;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.lwf-chip.sm {
    height: 30px;
    padding: 0 11px;
}

.lwf-chip .ui-icon {
    flex: none;
    width: 14px;
    height: 14px;
}

.lwf-chip .mono {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--lwf-xs);
    opacity: .8;
}

.lwf-chip:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--brass), transparent 50%);
}

.lwf-chip.is-on {
    color: var(--brass);
    border-color: var(--brass);
    background: color-mix(in srgb, var(--brass), transparent 86%);
}

.light .lwf-chip.is-on {
    color: var(--accent-ink);
}

/* The real radio covers its label, invisibly: clicks, arrow keys and screen readers all work natively. */
.lwf-radio {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.lwf-chip:has(.lwf-radio:focus-visible),
.lwf-choice:has(.lwf-radio:focus-visible) {
    outline: 2px solid var(--brass);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--focus-ring);
}

.lwf-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.lwf-choice {
    --lwf-tone: var(--brass);
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    min-height: 56px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-control);
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.lwf-choice.tone-good {
    --lwf-tone: var(--green);
}

.lwf-choice.tone-bad {
    --lwf-tone: var(--red);
}

.light .lwf-choice.tone-neutral {
    --lwf-tone: var(--accent-ink);
}

.lwf-choice:hover {
    border-color: color-mix(in srgb, var(--lwf-tone), transparent 50%);
    background: var(--surface-hover);
}

.lwf-choice-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--muted), transparent 84%);
    color: var(--muted);
    transition: background-color .15s ease, color .15s ease;
}

.lwf-choice-icon .ui-icon {
    width: 15px;
    height: 15px;
}

.lwf-choice-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.lwf-choice-text b {
    font-size: var(--lwf-sm);
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
}

.lwf-choice-text small {
    font-size: var(--lwf-xs);
    line-height: 1.35;
    color: var(--muted);
}

.lwf-choice.is-on {
    border-color: var(--lwf-tone);
    background: color-mix(in srgb, var(--lwf-tone), transparent 88%);
    box-shadow: inset 0 0 0 1px var(--lwf-tone);
}

.lwf-choice.is-on .lwf-choice-icon {
    background: var(--lwf-tone);
    color: var(--surface-panel);
}

.lwf-detail {
    min-width: 0;
    margin: -6px 0 18px;
    padding: 14px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--surface-raised);
    animation: lwf-reveal .18s ease both;
}

/* A fieldset draws its legend on the border; floated, it sits inside the panel like any other label. */
.lwf-detail > legend {
    float: left;
    width: 100%;
    padding: 0;
    margin-bottom: 8px;
}

.lwf-detail > legend + * {
    clear: left;
}

.lwf-detail .form-group {
    margin-bottom: 10px;
}

.lwf-when-input {
    margin-top: 10px;
    max-width: 260px;
}

.lwf-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .9fr);
    column-gap: 10px;
}

.lwf-span {
    grid-column: 1 / -1;
}

.lwf-grid > .form-group:last-child {
    margin-bottom: 0;
}

.lwf-toggle {
    margin: 12px 0 0;
}

.lwf-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: -6px 0 18px;
    font-size: var(--lwf-xs);
    line-height: 1.45;
    color: var(--muted);
}

.lwf-detail .lwf-hint {
    margin: 12px 0 0;
}

.lwf-hint .ui-icon {
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 1px;
}

.lwf-error {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    font-size: var(--lwf-xs);
    font-weight: 600;
    color: var(--red);
}

.light .lwf-error {
    color: #b91c1c;
}

.lwf-error .ui-icon {
    flex: none;
    width: 13px;
    height: 13px;
}

.lwf-section.has-error .lwf-chip:not(.is-on),
.lwf-section.has-error .lwf-choice:not(.is-on),
.lwf-detail.has-error .lwf-chip:not(.is-on) {
    border-color: color-mix(in srgb, var(--red), transparent 45%);
}

.lwf-dialog .field[aria-invalid="true"],
.lwf-reason.has-error .field {
    border-color: var(--red);
}

.lwf-context {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--surface-raised);
}

.lwf-context b {
    display: block;
    font-size: var(--lwf-sm);
    font-weight: 600;
}

.lwf-context small {
    display: block;
    margin-top: 2px;
    font-size: var(--lwf-xs);
    line-height: 1.45;
    color: var(--muted);
}

.lwf-context .lwf-choice-icon {
    background: color-mix(in srgb, var(--brass), transparent 84%);
    color: var(--brass);
}

.light .lwf-detail,
.light .lwf-context {
    background: var(--surface-page);
}

.light .lwf-context .lwf-choice-icon {
    color: var(--accent-ink);
}

.lwf-add {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    padding: 4px 2px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--muted);
    font-size: var(--lwf-sm);
    font-weight: 600;
    cursor: pointer;
}

.lwf-add:hover {
    color: var(--brass);
}

.light .lwf-add:hover {
    color: var(--accent-ink);
}

.lwf-add .ui-icon {
    width: 14px;
    height: 14px;
}

.lwf-body textarea.field {
    min-height: 76px;
}

.lwf-banner {
    margin: 0 20px 12px;
}

.lwf-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--border-soft);
}

.lwf-effect {
    flex: 1 1 auto;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    min-width: 0;
    margin: 0;
    font-size: var(--lwf-xs);
    line-height: 1.45;
    color: var(--muted);
}

.lwf-effect .ui-icon {
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    color: var(--brass);
}

.light .lwf-effect .ui-icon {
    color: var(--accent-ink);
}

.lwf-actions {
    display: flex;
    flex: none;
    gap: 8px;
}

.lwf-actions .btn {
    min-width: 84px;
}

.lwf-actions .btn .ui-icon {
    width: 14px;
    height: 14px;
}

/* app.css's `.light .btn:not(.primary)` (0,3,0) outranks `.btn.danger` (0,2,0) and turns destructive
   buttons neutral in the light theme. Closing a lead must still look like the one-way step it is. */
.light .lwf-actions .btn.danger {
    border-color: #dc2626;
    background: #dc2626;
    color: #fff;
}

.light .lwf-actions .btn.danger:hover:not(:disabled) {
    border-color: #b91c1c;
    background: #b91c1c;
}

@keyframes lwf-rise {
    from { opacity: 0; transform: translateY(10px) scale(.985); }
    to { opacity: 1; transform: none; }
}

@keyframes lwf-sheet {
    from { transform: translateY(100%); }
    to { transform: none; }
}

@keyframes lwf-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .lwf-dialog,
    .lwf-detail {
        animation: none;
    }
}

@media (max-width: 560px) {
    .lwf-backdrop {
        place-items: end stretch;
        padding: 12px 0 0;
    }

    .lwf-dialog {
        width: 100%;
        max-height: calc(100vh - 12px);
        max-height: calc(100dvh - 12px);
        border-bottom: 0;
        border-radius: 14px 14px 0 0;
        animation-name: lwf-sheet;
    }

    .lwf-head { padding: 16px 16px 12px; }
    .lwf-modes { margin: 0 16px 12px; }
    .lwf-modes .ui-icon { display: none; }
    .lwf-body { padding: 14px 16px 6px; }
    .lwf-banner { margin: 0 16px 12px; }
    .lwf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .lwf-foot {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
    }

    .lwf-effect { flex-basis: 100%; }
    .lwf-actions { flex: 1 1 100%; }
    .lwf-actions .btn { flex: 1; }
}

@media (max-width: 360px) {
    .lwf-choices { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Pricing › Glass & glazing + Extras note (admin pages, glazing-options restructure) ===== */
/* the glass tab stacks three price cards (Glass / Texture / Features) plus the retired disclosure */
.pricing-stack { display: grid; gap: 14px; }
.pricing-stack > p { margin: 0; }
/* one-line qualifier under a price-row name or select ("× area, no retail", duplicate-key warning) */
.price-list .row-note { display: block; margin-top: 3px; font-size: 10px; font-weight: 400; color: var(--muted); }
/* informational banner, the calm sibling of .form-error-banner */
.pricing-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 13px; padding: 10px 12px; border-radius: 8px; font-size: 12px; line-height: 1.45; color: var(--text); background: color-mix(in srgb, var(--brass), transparent 92%); border: 1px solid color-mix(in srgb, var(--brass), transparent 65%); }
.pricing-note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--brass); }
.pricing-note a { color: var(--brass); font-weight: 600; }
.light .pricing-note svg, .light .pricing-note a { color: #8a6212; }

/* ============================================================================================
   Shaped window designer (ShapedWindowDesigner3d.razor) — family tiles, the lettered diagram,
   the pane map and the fabrication notes. Everything else is the shared wd2d-* studio shell.
   ============================================================================================ */
.wd2d-shape-group { margin: 12px 0 6px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wd2d-shape-group:first-of-type { margin-top: 0; }
.wd2d-shape-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.wd2d-shape-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 8px 3px 6px; border: 1.5px solid transparent; border-radius: 9px; background: var(--surface-control); color: var(--muted); cursor: pointer; transition: all .15s ease; }
.wd2d-shape-tile:hover { border-color: var(--brass); color: var(--text); }
.wd2d-shape-tile.active { border-color: var(--brass); background: var(--wd-accent-soft); color: var(--brass); }
.wd2d-shape-tile svg { width: 38px; height: 38px; flex: none; }
.wd2d-shape-tile svg path { fill: color-mix(in srgb, currentColor, transparent 84%); stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.wd2d-shape-tile span { max-width: 100%; font-size: 9.5px; font-weight: 700; line-height: 1.15; text-align: center; color: var(--text); overflow-wrap: anywhere; }
.wd2d-shape-diagram { display: flex; justify-content: center; margin: 4px 0 12px; padding: 10px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--border), transparent 30%); background: var(--surface-panel); }
.wd2d-shape-diagram svg { width: 100%; max-height: 220px; }
.wd2d-shape-diagram .sd-frame { fill: color-mix(in srgb, var(--text), transparent 90%); stroke: var(--text); stroke-width: 1.6px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wd2d-shape-diagram .sd-light { fill: #bcd5e8; stroke: color-mix(in srgb, var(--text), transparent 40%); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.wd2d-shape-diagram .sd-dim { stroke: var(--brass); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.wd2d-shape-diagram .sd-dim-end { stroke: var(--brass); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.wd2d-shape-diagram .sd-letter { fill: var(--brass); font-family: Inter, system-ui, sans-serif; font-weight: 700; }
.wd2d-shape-params { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.wd2d-shape-param { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wd2d-shape-param.wide { grid-column: 1 / -1; }
.wd2d-shape-param label { display: flex; align-items: baseline; gap: 6px; font-size: 10.5px; font-weight: 600; color: var(--muted); }
.wd2d-shape-param label b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; background: var(--wd-accent-soft); color: var(--brass); font-size: 10.5px; }
.wd2d-shape-param .wd2d-size-input-wrap input:disabled { opacity: .6; }
.wd2d-shape-derived { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wd2d-shape-derived span { padding: 3px 8px; border-radius: 12px; background: var(--surface-control); font-size: 10.5px; color: var(--muted); }
.wd2d-shape-derived span b { color: var(--text); font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; }
.wd2d-shape-issues { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; }
.wd2d-shape-issue { display: flex; align-items: flex-start; gap: 6px; padding: 7px 9px; border-radius: 8px; font-size: 11px; line-height: 1.45; color: var(--text); background: var(--surface-control); }
.wd2d-shape-issue svg { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.wd2d-shape-issue.hard { background: color-mix(in srgb, var(--red), transparent 86%); border: 1px solid color-mix(in srgb, var(--red), transparent 60%); }
.wd2d-shape-issue.hard svg { color: var(--red); }
.wd2d-shape-issue.warn, .wd2d-shape-issue.note { background: color-mix(in srgb, var(--orange), transparent 90%); border: 1px solid color-mix(in srgb, var(--orange), transparent 65%); }
.wd2d-shape-issue.warn svg, .wd2d-shape-issue.note svg { color: var(--orange); }
.wd2d-shape-issue.info svg { color: var(--brass); }
.wd2d-shape-map { display: flex; justify-content: center; padding: 10px; border-radius: 9px; background: var(--surface-panel); border: 1px solid color-mix(in srgb, var(--border), transparent 30%); }
.wd2d-shape-map svg { width: 100%; max-height: 150px; }
.wd2d-shape-map .sm-frame { fill: var(--wd2d-mm-frame, #e9ecef); stroke: rgba(0, 0, 0, .25); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.wd2d-shape-map .sm-light { fill: #cfe0ee; stroke: rgba(20, 30, 45, .35); stroke-width: 1px; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .15s ease; }
.wd2d-shape-map .sm-light:hover { fill: color-mix(in srgb, var(--brass), #cfe0ee 70%); }
.wd2d-shape-map .sm-light.in-scope { fill: #a9c6de; }
.wd2d-shape-map .sm-light.picked { fill: color-mix(in srgb, var(--brass), #a9c6de 55%); stroke: var(--brass); stroke-width: 2px; }
.wd2d-shape-map .sm-light.textured { fill: url(#sm-texture); }
.wd2d-shape-map .sm-tag { fill: var(--text); font-family: Inter, system-ui, sans-serif; font-weight: 700; pointer-events: none; }
.wd2d-shape-openers { display: flex; flex-direction: column; gap: 10px; }
.wd2d-shape-opener { padding: 9px 10px; border-radius: 9px; background: var(--surface-control); }
.wd2d-shape-opener-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; font-size: 11.5px; font-weight: 700; color: var(--text); }
.wd2d-shape-opener-head small { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; font-weight: 500; color: var(--muted); }
.wd2d-shape-opener .wd2d-seg { flex-wrap: wrap; }
.wd2d-shape-opener .wd2d-seg button:disabled { opacity: .38; cursor: not-allowed; }
.wd2d-shape-opener p { margin: 6px 0 0; font-size: 10.5px; line-height: 1.4; color: var(--muted); }
/* Sunrise stays clickable where the light can't take it (the click explains why), but reads as off */
.wd2d-seg button[aria-disabled="true"] { opacity: .45; }
.wd2d-pattern-grid .wd2d-feat-tile[aria-disabled="true"] { opacity: .42; }
.wd2d-pattern-price { font-size: 9px; font-weight: 600; color: var(--muted); }
.wd2d-shell .wd2d-select { width: 100%; padding: 9px 11px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface-control); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; }

/* ── Arched composite door designer (ArchDoorDesigner3d): reuses the wd2d-* shell and the shaped window's
      tiles / diagram / pane map; its own additions are wd2d-arch-* ── */
.wd2d-shape-tile.wd2d-arch-tile svg { width: 26px; height: 52px; }
.wd2d-shape-tile.wd2d-arch-tile svg path { fill-rule: evenodd; stroke-width: 1.6; }
.wd2d-shape-tile.wd2d-arch-tile svg path.wd2d-arch-feature { fill: color-mix(in srgb, currentColor, transparent 72%); stroke-width: 1; }
.wd2d-shape-tile.wd2d-arch-tile svg path.wd2d-arch-feature.glazed { fill: #bcd5e8; }
.wd2d-shape-tile.wd2d-arch-tile svg path.wd2d-arch-lines { fill: none; stroke-width: .7; opacity: .7; }
.wd2d-shape-tile.wd2d-arch-tile:disabled { opacity: .45; cursor: not-allowed; }
.wd2d-shape-tile.wd2d-arch-tile:disabled:hover { border-color: transparent; color: var(--muted); }
.wd2d-arch-soon { font-size: 8.5px; font-weight: 600; color: var(--muted); }
.wd2d-shape-diagram .wd2d-arch-leafline { fill: none; stroke: color-mix(in srgb, var(--text), transparent 45%); stroke-width: 1px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.wd2d-arch-range { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; color: var(--muted); }
.wd2d-arch-cills { flex-wrap: wrap; }
.wd2d-arch-cills button:disabled { opacity: .38; cursor: not-allowed; }
.wd2d-arch-blocked { position: absolute; top: 72px; left: 50%; transform: translateX(-50%); z-index: 29; display: flex; align-items: flex-start; gap: 8px; max-width: min(560px, calc(100% - 32px)); padding: 9px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--red), transparent 55%); background: color-mix(in srgb, var(--red), var(--surface-panel) 88%); color: var(--text); font: inherit; font-size: 12px; line-height: 1.45; text-align: left; cursor: pointer; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.wd2d-arch-blocked svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--red); }
/* P2: a leaf / fanlight card the head or door set cannot take (gothic, elliptical and keyhole heads: no arched leaf,
   no D-top; a French pair: no D-top) reads as off, with its reason beside it */
.wd2d-unit-card.wd2d-arch-unit:disabled { opacity: .45; cursor: not-allowed; }
.wd2d-unit-card.wd2d-arch-unit:disabled:hover { border-color: transparent; background: var(--surface-control); }
/* P2: the French pair's "Open both leaves" switch inside the Opening card */

/* ============================================================================================
   Bay & bow window designer (BayWindowDesigner3d.razor + BayPlanDiagram / BayElevationStrip /
   BayOpenerCard) — the overview bar (plan + developed elevation), the split 2D facet editor | 3D
   bay, and the Bay / Layout / Poles panels. Everything else is the shared wd2d-* studio shell.
   Neither canvas is ever display:none (the 2D engine's ResizeObserver bails under 50 px): a view
   mode only lays the other pane out behind, hidden.
   ============================================================================================ */
/* the overview bar grows with the window: the elevation is height-bound, and its labels (sized in mm by BayDiagram)
   stay readable only above ~150 px */
.wd2d-bay-area { --bay-top: 12px; --bay-ov-h: clamp(150px, 24vh, 220px); }
/* the bay's dock also carries the Split / 2D / 3D modes and the facet navigation */
.wd2d-bay-dock { gap: 6px; }
.wd2d-bay-dock .wd2d-view-seg button { padding: 5px 12px; }
.wd2d-bay-dock .wd2d-ct-icon:disabled { opacity: .35; cursor: default; background: transparent; }
.wd2d-bay-facetnav { display: flex; align-items: center; gap: 2px; }
.wd2d-bay-facet-btn { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-control); color: var(--text); font-size: 12px; white-space: nowrap; cursor: pointer; transition: border-color .15s ease; }
.wd2d-bay-facet-btn:hover:not(:disabled), .wd2d-bay-facet-btn.open { border-color: var(--brass); }
.wd2d-bay-facet-btn:disabled { opacity: .5; cursor: default; }
.wd2d-bay-facet-btn b { font-weight: 800; }
.wd2d-bay-facet-btn span { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.wd2d-bay-facet-btn svg { width: 12px; height: 12px; color: var(--muted); transition: transform .2s ease; }
.wd2d-bay-facet-btn.open svg { transform: rotate(180deg); }
.wd2d-bay-facet-menu { width: 230px; }
.wd2d-bay-facet-menu .wd2d-adjust-item:disabled { opacity: .45; cursor: not-allowed; }
.wd2d-bay-facet-menu .wd2d-adjust-item:disabled:hover { background: transparent; color: var(--text); }

/* overview bar: the plan and the developed elevation half and half, not the spec's third / two thirds. The elevation
   (about 2 : 1) is bound by the bar's height from ~1024 px up and leaves the rest of a wider card empty, while the plan
   (2.5 : 1 and wider) runs out of width first */
.wd2d-bay-overview { position: absolute; top: var(--bay-top); left: 12px; right: 12px; height: var(--bay-ov-h); z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 10px; }
.wd2d-bay-ov { position: relative; min-width: 0; min-height: 0; display: flex; padding: 24px 10px 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-panel); box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }
.wd2d-bay-ov > svg { flex: 1 1 auto; min-width: 0; min-height: 0; }
.wd2d-bay-ov-cap { position: absolute; top: 7px; left: 12px; font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); pointer-events: none; }
.wd2d-bay-popover { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 14px; border: 1px solid var(--brass); border-radius: 12px; background: var(--surface-panel); box-shadow: 0 12px 30px rgba(0, 0, 0, .22); animation: wd2d-oc-in .15s ease-out; }
.wd2d-bay-popover label { font-size: 11px; font-weight: 700; white-space: nowrap; }
.wd2d-bay-popover .wd2d-size-input-wrap { width: 140px; }
.wd2d-bay-popover .wd2d-size-input { padding: 6px 10px; font-size: 14px; }

/* the split: 2D facet editor (58 %) | 3D bay (42 %) */
.wd2d-bay-stage { position: absolute; top: calc(var(--bay-top) + var(--bay-ov-h) + 10px); left: 12px; right: 12px; bottom: 12px; display: flex; gap: 10px; }
.wd2d-bay-area[data-view="3d"] .wd2d-bay-overview { display: none; }
.wd2d-bay-area[data-view="3d"] .wd2d-bay-stage { top: var(--bay-top); }
.wd2d-bay-pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid rgba(20, 26, 36, .12); border-radius: 14px; }
.wd2d-bay-pane-2d { flex: 58 1 0; background: #fff; }
.wd2d-bay-pane-3d { flex: 42 1 0; container-type: inline-size; background: radial-gradient(900px 480px at 50% 12%, color-mix(in srgb, var(--brass), transparent 93%), transparent 62%), linear-gradient(180deg, #f8fafc 0%, #e2e8ef 100%); }
/* a narrow 3D pane keeps the camera presets and drops its tag */
@container (max-width: 480px) { .wd2d-bay-pane-3d .wd2d-bay-pane-tag { display: none; } }
.wd2d-bay-area[data-view="2d"] .wd2d-bay-pane-2d, .wd2d-bay-area[data-view="3d"] .wd2d-bay-pane-3d { flex: 1 1 0; }
.wd2d-bay-area[data-view="2d"] .wd2d-bay-pane-3d, .wd2d-bay-area[data-view="3d"] .wd2d-bay-pane-2d { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
/* #preview-area: the engine sizes its canvas to this box, below the pane's tag and clear of the dock along the bottom */
.wd2d-bay-pane .wd2d-bay-editor { inset: 26px 6px 62px; }
.wd2d-bay-pane-tag { position: absolute; top: 6px; left: 10px; z-index: 3; padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, .78); color: #5b6773; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
/* the 3D pane's own camera dock, pinned top-right so it never meets the main dock in the 3D-only view */
.wd2d-viewdock.wd2d-bay-cams { left: auto; bottom: auto; top: 8px; right: 8px; z-index: 3; padding: 4px; }
/* centred at left 50 %, the loader may only use half the pane before it wraps */
.wd2d-bay-pane .wd2d-door-loading { white-space: nowrap; }
.wd2d-bay-error { position: absolute; top: 46px; left: 12px; right: 12px; z-index: 4; margin: 0; }
.wd2d-bay-error-main { top: var(--bay-top); left: 50%; right: auto; transform: translateX(-50%); max-width: min(560px, calc(100% - 32px)); }

/* Bay panel: shape tiles, fields, the compact plan, read-outs */
.wd2d-bay-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 4px; }
.wd2d-bay-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 9px 6px 8px; border: 1.5px solid var(--border); border-radius: 12px; background: var(--surface-control); color: var(--muted); cursor: pointer; transition: all .15s ease; }
.wd2d-bay-tile:hover { border-color: var(--brass); color: var(--text); }
.wd2d-bay-tile.active { border-color: var(--brass); background: var(--wd-accent-soft); color: var(--brass); }
.wd2d-bay-tile-name { font-size: 11.5px; font-weight: 700; color: var(--text); text-align: center; }
.wd2d-bay-tile small { font-size: 9.5px; color: var(--muted); }
.wd2d-bay-glyph { width: 58px; height: 34px; flex: none; }
.wd2d-bay-glyph .g-area { fill: color-mix(in srgb, currentColor, transparent 86%); stroke: none; }
.wd2d-bay-glyph .g-wall { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; opacity: .45; }
.wd2d-bay-glyph .g-line { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wd2d-bay-mode { margin: 10px 0 12px; }
.wd2d-bay-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wd2d-bay-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wd2d-bay-field.wide { grid-column: 1 / -1; }
.wd2d-bay-field label { display: flex; align-items: center; gap: 6px; min-height: 18px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: color-mix(in srgb, var(--text), var(--muted) 35%); }
.wd2d-bay-field label small { font-size: 10px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.wd2d-bay-field .wd2d-size-input { padding: 7px 10px; font-size: 14px; }
.wd2d-bay-field .wd2d-size-unit { padding: 0 9px; font-size: 11px; }
.wd2d-bay-field.derived .wd2d-size-input { color: var(--muted); }
.wd2d-bay-auto { margin-left: auto; padding: 1px 7px; border: 1px solid var(--border); border-radius: 6px; background: transparent; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: all .15s ease; }
.wd2d-bay-auto:hover, .wd2d-bay-auto.active { border-color: var(--brass); background: var(--wd-accent-soft); color: var(--brass); }
.wd2d-bay-stepper { align-self: flex-start; }
.wd2d-bay-stepper button { width: 34px; height: 34px; }
.wd2d-bay-stepper b { min-width: 30px; }
.wd2d-bay-angles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.wd2d-bay-chip { min-width: 48px; height: 34px; padding: 0 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-control); color: var(--text); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; transition: all .15s ease; }
.wd2d-bay-chip:hover { border-color: var(--brass); }
.wd2d-bay-chip.active { border-color: var(--brass); background: var(--wd-accent-soft); color: var(--brass); }
.wd2d-bay-angle-input { flex: 1 1 80px; min-width: 0; max-width: 120px; }
.wd2d-bay-angle-input .wd2d-size-input { width: 100%; padding: 6px 8px; font-size: 13px; }
.wd2d-bay-panel-plan { height: 132px; margin: 14px 0 8px; padding: 6px; border: 1px solid color-mix(in srgb, var(--border), transparent 30%); border-radius: 10px; background: var(--surface-panel); }
.wd2d-bay-readouts > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 40%); font-size: 11.5px; }
.wd2d-bay-readouts span { flex: none; font-weight: 600; color: var(--muted); }
.wd2d-bay-readouts b { min-width: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.wd2d-bay-issues { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; }
.wd2d-bay-issue { display: flex; align-items: flex-start; gap: 6px; padding: 7px 9px; border-radius: 8px; font-size: 11px; line-height: 1.45; color: var(--text); background: var(--surface-control); }
.wd2d-bay-issue svg { width: 13px; height: 13px; flex: none; margin-top: 1px; }
.wd2d-bay-issue.hard { background: color-mix(in srgb, var(--red), transparent 86%); border: 1px solid color-mix(in srgb, var(--red), transparent 60%); }
.wd2d-bay-issue.hard svg { color: var(--red); }
.wd2d-bay-issue.warn { background: color-mix(in srgb, var(--orange), transparent 90%); border: 1px solid color-mix(in srgb, var(--orange), transparent 65%); }
.wd2d-bay-issue.warn svg { color: var(--orange); }
.wd2d-bay-issue.note svg { color: var(--brass); }

/* Layout panel: construction cards, the layout chips with their mini elevations */
.wd2d-bay-constructions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wd2d-bay-constructions .wd2d-style-card { gap: 6px; padding: 10px 4px 9px; }
.wd2d-bay-constructions .wd2d-style-card svg { width: 34px; height: 34px; }
.wd2d-bay-constructions .wd2d-style-card span { font-size: 10.5px; text-align: center; }
.wd2d-bay-constructions .wd2d-style-card:disabled, .wd2d-bay-layout:disabled { opacity: .5; cursor: default; }
.wd2d-bay-layouts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wd2d-bay-layout { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 10px 6px 8px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface-control); color: color-mix(in srgb, var(--text), var(--muted) 30%); cursor: pointer; transition: all .15s ease; }
.wd2d-bay-layout:hover:not(:disabled) { border-color: var(--brass); }
.wd2d-bay-layout.active { border-color: var(--brass); background: var(--wd-accent-soft); color: var(--brass); }
.wd2d-bay-layout span { font-size: 10.5px; font-weight: 700; line-height: 1.2; text-align: center; color: var(--text); }
.wd2d-bay-lglyph { width: auto; max-width: 100%; height: 26px; overflow: visible; }
.wd2d-bay-lglyph .blg-frame { fill: color-mix(in srgb, #8fb3d3, transparent 55%); stroke: currentColor; stroke-width: 1.1; }
.wd2d-bay-lglyph .blg-bar { fill: none; stroke: currentColor; stroke-width: 1.1; }
.wd2d-bay-lglyph .blg-open { fill: none; stroke: currentColor; stroke-width: .9; stroke-dasharray: 1.6 1.2; }
.wd2d-bay-lglyph .blg-tilt { fill: none; stroke: currentColor; stroke-width: .8; opacity: .7; }
.wd2d-bay-inline-input { width: 124px; flex: none; }
.wd2d-bay-inline-input .wd2d-size-input { padding: 6px 10px; font-size: 14px; }
.wd2d-bay-toggle-gap { margin-top: 12px; }
.wd2d-bay-confirm { margin-top: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--orange), transparent 55%); background: color-mix(in srgb, var(--orange), transparent 90%); font-size: 11.5px; line-height: 1.45; }
.wd2d-bay-confirm > div { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.wd2d-bay-confirm .btn { padding: 6px 12px; font-size: 12px; }
.wd2d-bay-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 0; border: 0; background: none; color: var(--brass); font-size: 11.5px; font-weight: 700; cursor: pointer; }
.wd2d-bay-link svg { width: 13px; height: 13px; }
.wd2d-bay-link:disabled { opacity: .5; cursor: default; }
:root.light .wd2d-bay-link { color: var(--accent-ink); }

/* Poles & cill panel: one card per joint with the pole select */
.wd2d-bay-joints { display: flex; flex-direction: column; gap: 8px; }
.wd2d-bay-joint { padding: 9px 10px; border: 1px solid transparent; border-radius: 10px; background: var(--surface-control); }
.wd2d-bay-joint.invalid { border-color: color-mix(in srgb, var(--red), transparent 55%); background: color-mix(in srgb, var(--red), transparent 90%); }
.wd2d-bay-joint-head { display: flex; align-items: baseline; gap: 8px; }
.wd2d-bay-joint-head b { font-size: 12px; font-weight: 800; }
.wd2d-bay-joint-head small { margin-left: auto; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; color: var(--muted); }
.wd2d-bay-jack { padding: 1px 6px; border-radius: 5px; background: var(--wd-accent-soft); color: var(--brass); font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
:root.light .wd2d-bay-jack { color: var(--accent-ink); }
.wd2d-bay-joint p { margin: 3px 0 7px; font-size: 11px; line-height: 1.4; color: var(--muted); }
.wd2d-bay-select { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-panel); color: var(--text); font-size: 12px; outline: none; }
.wd2d-bay-select:focus { border-color: var(--brass); }

/* the plan (BayPlanDiagram) and the developed elevation (BayElevationStrip): drawn in mm, strokes in px */
.wd2d-bay-plan, .wd2d-bay-strip { display: block; width: 100%; height: 100%; overflow: visible; font-family: Inter, system-ui, sans-serif; user-select: none; }
/* a halo in the card colour keeps a label legible where a dimension or extension line runs under it */
.wd2d-bay-plan text, .wd2d-bay-strip text { fill: var(--text); font-weight: 600; paint-order: stroke; stroke: var(--surface-panel); stroke-width: .22em; stroke-linejoin: round; }
.wd2d-bay-plan .bpl-hatch { stroke: color-mix(in srgb, var(--text), transparent 72%); stroke-width: 10; }
.wd2d-bay-plan .bpl-wall { stroke: color-mix(in srgb, var(--text), transparent 55%); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.wd2d-bay-plan .bpl-inside { fill: none; stroke: color-mix(in srgb, var(--text), transparent 55%); stroke-width: 1px; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.wd2d-bay-plan .bpl-facet { cursor: pointer; }
.wd2d-bay-plan .bpl-facet polygon { fill: color-mix(in srgb, var(--bay-frame, #f4f4f0) 80%, var(--surface-panel)); stroke: color-mix(in srgb, var(--text), transparent 25%); stroke-width: 1.2px; vector-effect: non-scaling-stroke; transition: stroke .15s ease; }
.wd2d-bay-plan .bpl-facet:hover polygon { stroke: var(--brass); }
.wd2d-bay-plan .bpl-facet.active polygon { stroke: var(--brass); stroke-width: 2.6px; }
.wd2d-bay-plan .bpl-facet.invalid polygon { stroke: var(--red); stroke-width: 2.2px; }
.wd2d-bay-plan .bpl-body { fill: color-mix(in srgb, var(--text), transparent 45%); stroke: color-mix(in srgb, var(--text), transparent 20%); stroke-width: .8px; vector-effect: non-scaling-stroke; }
.wd2d-bay-plan .bpl-trim { fill: color-mix(in srgb, var(--text), transparent 62%); stroke: none; }
.wd2d-bay-plan .bpl-dim line { stroke: var(--brass); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.wd2d-bay-plan .bpl-dim .bpl-ext { stroke: color-mix(in srgb, var(--text), transparent 65%); }
.wd2d-bay-plan .bpl-dim.diagonal line { stroke: var(--muted); stroke-dasharray: 6 4; }
.wd2d-bay-plan .bpl-diag { fill: var(--muted); }
.wd2d-bay-plan .bpl-angle { fill: var(--brass); font-weight: 700; }
.wd2d-bay-plan .bpl-note { fill: var(--muted); font-weight: 600; }
.wd2d-bay-plan .bpl-edit { cursor: pointer; }
.wd2d-bay-plan .bpl-edit:hover text { text-decoration: underline; }
.wd2d-bay-plan .bpl-edit.editing text { fill: var(--brass); font-weight: 800; }
.wd2d-bay-strip .bel-gap { fill: color-mix(in srgb, var(--text), transparent 55%); }
.wd2d-bay-strip .bel-facet { cursor: pointer; }
.wd2d-bay-strip .bel-frame { fill: color-mix(in srgb, var(--bay-frame, #f4f4f0) 86%, var(--surface-panel)); }
.wd2d-bay-strip .bel-glass { fill: #bcd5e8; stroke: rgba(28, 40, 53, .45); stroke-width: .8px; vector-effect: non-scaling-stroke; }
.wd2d-bay-strip .bel-glass.obscure { fill: #d8e2eb; }
.wd2d-bay-strip .bel-sash { fill: none; stroke: rgba(28, 40, 53, .65); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.wd2d-bay-strip .bel-open { fill: none; stroke: #1c2835; stroke-width: .9px; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.wd2d-bay-strip .bel-tilt { fill: none; stroke: #1c2835; stroke-width: .8px; opacity: .6; vector-effect: non-scaling-stroke; }
.wd2d-bay-strip .bel-outline { fill: none; stroke: color-mix(in srgb, var(--text), transparent 25%); stroke-width: 1.2px; vector-effect: non-scaling-stroke; transition: stroke .15s ease; }
.wd2d-bay-strip .bel-facet:hover .bel-outline { stroke: var(--brass); }
.wd2d-bay-strip .bel-facet.active .bel-outline { stroke: var(--brass); stroke-width: 2.6px; }
.wd2d-bay-strip .bel-facet.invalid .bel-outline { stroke: var(--red); stroke-width: 2.2px; }
.wd2d-bay-strip .bel-letter { font-weight: 800; }
.wd2d-bay-strip .bel-angle { fill: var(--brass); font-weight: 700; }
.wd2d-bay-strip .bel-height { fill: var(--muted); }
/* brass text is too pale on the light theme's white cards */
:root.light .wd2d-bay-plan .bpl-angle, :root.light .wd2d-bay-plan .bpl-edit.editing text, :root.light .wd2d-bay-strip .bel-angle { fill: var(--accent-ink); }
/* ---- Sash arched heads (SashWindowDesigner3d) ---- */
/* a design an arched head rules out (its top sash is fixed): shown, but not selectable */
.svs-design-list .wd2d-option-row:disabled { opacity: .5; cursor: not-allowed; }
.svs-design-list .wd2d-option-row:disabled:hover { border-color: transparent; background: var(--surface-control); }

/* ============================================================================================
   CRM notices (1 Oct 2026 fixes): the calm, dismissible line after a save that did something worth
   saying - visits moved with a hand-over, an enquiry added to an existing person, a live contract note.
   ============================================================================================ */
.crm-notice { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; font-size: 12px; line-height: 1.45; color: var(--text); background: color-mix(in srgb, var(--brass), transparent 92%); border: 1px solid color-mix(in srgb, var(--brass), transparent 65%); }
.crm-notice > svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--brass); }
.crm-notice > span { flex: 1; min-width: 0; }
.crm-notice .icon-button { flex: none; margin: -4px -4px -4px 0; }
.light .crm-notice > svg { color: #8a6212; }

/* ---- Calendar (1 Oct 2026 fixes): dated headers, numbered out-of-month days, the linked slot, server-side customer search ---- */
.cal-head .cal-day-link { font-weight: 700; color: inherit; }
.cal-day-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: 4px; }
.cal-day-link:hover:not(:disabled) { color: var(--brass); text-decoration: underline; }
.cal-day-link:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.cal-day-link:disabled { cursor: default; }
.cal-head.cal-today, .cal-today .calendar-day-number { color: var(--brass); }
.day-col.cal-today, .month-cell.cal-today { background: color-mix(in srgb, var(--brass), transparent 94%); }
.month-cell.cal-other-month { background: color-mix(in srgb, var(--steel), transparent 55%); }
.month-cell.cal-other-month .calendar-day-number { opacity: .55; }
.light .month-cell.cal-other-month { background: #f6f8fa; }
.light .cal-head.cal-today, .light .cal-today .calendar-day-number { color: #8a6212; }
.appt.appt-focus { box-shadow: 0 0 0 2px var(--brass); }
.calendar-chosen-customer { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-control, var(--steel)); }
.calendar-chosen-customer > span { min-width: 0; overflow-wrap: anywhere; }
.calendar-customer-results { margin-top: 4px; max-height: 220px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--panel); }
.calendar-customer-results > button { width: 100%; display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.calendar-customer-results > button:last-child { border-bottom: 0; }
.calendar-customer-results > button:hover, .calendar-customer-results > button:focus-visible { background: var(--surface-hover); outline: none; }
.light .calendar-customer-results { background: #fff; }
.calendar-assignee-day { margin: 4px 0 10px; padding: 8px 10px; border-radius: 6px; font-size: 12px; background: color-mix(in srgb, var(--brass), transparent 92%); }
.calendar-assignee-day ul { margin: 4px 0 0; padding-left: 18px; }
.field-static { min-height: 36px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---- Lead form: "this looks like someone you already have" (same surname at the same postcode) ---- */
.crm-duplicate-check { display: grid; gap: 6px; margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; font-size: 12px; line-height: 1.45; color: var(--text); background: color-mix(in srgb, var(--brass), transparent 90%); border: 1px solid color-mix(in srgb, var(--brass), transparent 55%); }
.crm-duplicate-check > b { display: flex; align-items: center; gap: 6px; }
.crm-duplicate-check > b svg { width: 16px; height: 16px; color: var(--brass); }
.crm-duplicate-check ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.crm-duplicate-check li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 6px 8px; border-radius: 6px; background: var(--panel); }
.crm-duplicate-check li > span { min-width: 0; overflow-wrap: anywhere; }
.crm-duplicate-check .check-row { font-weight: 600; }
.light .crm-duplicate-check > b svg { color: #8a6212; }
.light .crm-duplicate-check li { background: #fff; }

/* ==========================================================================
   Product showroom picker (pshow-*) - Components/Shared/ProductShowroom.razor
   One component, two homes: Presentation > Design Together > "Choose your base
   product" (.pshow-stage) and Projects > "Add product" (.pshow-modal).

   One range is on show at a time behind a segmented control; its photographs
   fill ALL of the remaining height, so nothing scrolls:
   - each range is three siblings: a visually hidden radio, its <label> (the
     segment) and its panel. `radio:checked + label + panel` shows the panel, so
     switching is instant, needs no server round trip, works for any number of
     ranges and does not need :has();
   - the panel is a size container; its wall is a wrapping flex row whose lines
     share the height (align-content: stretch). The row count comes from the
     product count (--pshow-n, inline) and the panel's aspect band, and products
     are dealt out evenly (7 -> 4+3, 11 -> 4+4+3, 16 -> 6+5+5);
   - a description is shown only when the whole sentence fits the tile (estimated
     from the range's longest sentence, --pshow-dmax, inline) - never an ellipsis.
   Phones (<= 640px wide, or <= 500px tall) become one scroll region of cards.
   Prefix verified unused: grep -rn "pshow" wwwroot Components (all files).
   ========================================================================== */

/* Registered so the layout maths is computed once on .pshow-wall and inherited as plain values. */
@property --pshow-a          { syntax: '<number>';  inherits: true; initial-value: 1.1; }
@property --pshow-rows       { syntax: '<integer>'; inherits: true; initial-value: 2; }
@property --pshow-q          { syntax: '<integer>'; inherits: true; initial-value: 4; }
@property --pshow-r          { syntax: '<integer>'; inherits: true; initial-value: 0; }
@property --pshow-cols       { syntax: '<integer>'; inherits: true; initial-value: 4; }
@property --pshow-tw         { syntax: '<length>';  inherits: true; initial-value: 240px; }
@property --pshow-th         { syntax: '<length>';  inherits: true; initial-value: 220px; }
@property --pshow-name-size  { syntax: '<length>';  inherits: true; initial-value: 16px; }
@property --pshow-pad        { syntax: '<length>';  inherits: true; initial-value: 14px; }
@property --pshow-desc-h     { syntax: '<length>';  inherits: true; initial-value: 0px; }
@property --pshow-desc-hover { syntax: '<length>';  inherits: true; initial-value: 0px; }

.pshow {
    --pshow-gap: 14px;
    --pshow-radius: 16px;
    --pshow-tile-aspect: 1.3;       /* photos are 800x550; a little squarer crops better */
    --pshow-tab-h: 46px;
    --pshow-ink: var(--brass);      /* brass used as ink / ring on the page surface */
    --pshow-ring: var(--brass);
    --pshow-track: color-mix(in srgb, var(--surface-control), transparent 25%);
    --pshow-tab-on: color-mix(in srgb, var(--surface-control), #ffffff 7%);
    --pshow-tab-ring: color-mix(in srgb, var(--brass), transparent 62%);
    --pshow-chip: color-mix(in srgb, var(--text), transparent 91%);
    --pshow-chip-on: color-mix(in srgb, var(--brass), transparent 85%);
    --pshow-chip-on-ring: color-mix(in srgb, var(--brass), transparent 72%);
    --pshow-shadow: 0 14px 30px -18px rgba(0, 0, 0, .75);
    --pshow-edge: rgba(255, 255, 255, .08);
    /* description metrics: one size everywhere, so the fit estimate below has fixed constants */
    --pshow-desc-fs: 12.5px;
    --pshow-desc-lh: 17.75px;       /* 1.42 x 12.5px */
    --pshow-char: 6.6px;            /* fit estimate: width per character of an Inter 12.5px sentence */
    --pshow-wrap: 18px;             /* + width a line can lose to word wrap; 0 unsafe in 2,664 measured wraps (calib.html) */
    --pshow-flag-h: 24px;
    container: pshow / inline-size;
    height: 100%;
    min-height: 0;
    font-family: 'Inter', 'DM Sans', sans-serif;
    color: var(--text);
}

:root.light .pshow {
    --pshow-ink: var(--accent-ink);
    --pshow-ring: var(--accent-ink);   /* raw brass is 2.1:1 on the light page; the ink is 4.4:1 */
    --pshow-track: color-mix(in srgb, var(--border-soft), var(--surface-control) 40%);
    --pshow-tab-on: var(--surface-panel);
    --pshow-tab-ring: color-mix(in srgb, var(--brass), transparent 45%);
    --pshow-chip: color-mix(in srgb, var(--text), transparent 93%);
    --pshow-chip-on: color-mix(in srgb, var(--brass), transparent 80%);
    --pshow-chip-on-ring: color-mix(in srgb, var(--brass), transparent 55%);
    --pshow-shadow: 0 14px 28px -18px rgba(16, 24, 34, .5);
    --pshow-edge: rgba(16, 24, 34, .1);
}

/* --- Frame: head, segmented control, the open range ---------------------------------------- */
/* Default (narrow, or four+ ranges): head on its own row, then a full-width bar of equal segments.
   The wide layout (head left, control right) is switched on by the container query further down. */
.pshow-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--pshow-cats, 3), minmax(0, 1fr));
    grid-template-rows: auto auto minmax(0, 1fr);
    column-gap: 4px;
    row-gap: 14px;
    height: 100%;
    min-height: 0;
}

.pshow-head {
    grid-row: 1;
    grid-column: 1 / -1;
    align-self: end;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 14px;
}
.pshow--closable .pshow-head { padding-right: 56px; }

.pshow .pshow-eyebrow {
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0 0 8px;
    font: 600 11px/1.2 'DM Sans', 'Inter', sans-serif;
    letter-spacing: .15em;
    text-transform: uppercase;
    white-space: nowrap;
}
.pshow-eyebrow::before {
    content: "";
    flex: none;
    width: 26px;
    height: 1px;
    background: var(--pshow-ink);
}
.pshow-kicker { color: var(--pshow-ink); }
.pshow-meta { color: var(--muted); }
.pshow-meta::before { content: "\00b7"; margin-right: 10px; }

.pshow .pshow-h {
    margin: 0;
    color: var(--text);
    font: 500 clamp(22px, 1.5cqi + 10px, 32px)/1.1 'Space Grotesk', 'Inter', sans-serif;
    letter-spacing: -.022em;
}
.pshow .pshow-hint {
    margin: 0;
    color: var(--muted);
    font-size: 13.5px;
    line-height: 1.4;
}

/* Segmented control: the track is a decoration behind the labels; each label is a real
   <label for> of a native radio, so arrow keys move between ranges and readers say "1 of 3". */
.pshow-seg {
    grid-row: 2;
    grid-column: 1 / -1;
    align-self: end;
    height: calc(var(--pshow-tab-h) + 10px);
    border: 1px solid var(--border-soft);
    border-radius: 16px;
    background: var(--pshow-track);
}
.pshow-radio {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.pshow-tab {
    grid-row: 2;
    grid-column: var(--pshow-k);
    align-self: end;
    position: relative;
    z-index: 1;
    container: pshow-tab / inline-size;
    min-width: 0;
    height: var(--pshow-tab-h);
    margin: 0 0 5px;
    border-radius: 11px;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
    transition: background-color .22s ease, color .22s ease, box-shadow .22s ease;
}
label.pshow-tab:first-of-type { margin-left: 5px; }
label.pshow-tab:last-of-type { margin-right: 5px; }
.pshow-tab-in {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 100%;
    padding: 0 11px 0 7px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.005em;
    white-space: nowrap;
}
.pshow-tab-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--pshow-chip);
    transition: background-color .22s ease, color .22s ease, box-shadow .22s ease;
}
.pshow-tab-icon svg { width: 17px; height: 17px; }
.pshow-tab-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pshow-count {
    flex: none;
    min-width: 24px;
    height: 22px;
    padding: 0 7px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted), transparent 82%);
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background-color .22s ease, color .22s ease;
}
.pshow-tab:hover { color: var(--text); }
.pshow-radio:checked + .pshow-tab {
    background: var(--pshow-tab-on);
    color: var(--text);
    box-shadow: 0 0 0 1px var(--pshow-tab-ring), 0 6px 16px -10px rgba(0, 0, 0, .55);
}
.pshow-radio:checked + .pshow-tab .pshow-tab-icon {
    background: var(--pshow-chip-on);
    box-shadow: inset 0 0 0 1px var(--pshow-chip-on-ring);
    color: var(--pshow-ink);
}
.pshow-radio:checked + .pshow-tab .pshow-count { background: var(--brass); color: var(--on-accent); }
/* a range with nothing choosable never gets the brass count */
.pshow-radio:checked + .pshow-tab--off .pshow-count,
.pshow-tab--off .pshow-count { background: transparent; box-shadow: inset 0 0 0 1px var(--border); color: var(--muted); }
.pshow-radio:focus-visible + .pshow-tab { outline: 2px solid var(--pshow-ring); outline-offset: 2px; }

/* compact segments when many ranges share a narrow bar (five ranges on an iPad, phones) */
@container pshow-tab (max-width: 168px) {
    .pshow-count { display: none; }
}
@container pshow-tab (max-width: 150px) {
    /* icon over label: the label gets the whole segment width */
    .pshow-tab-in { flex-direction: column; gap: 3px; padding: 0 6px; font-size: 12.5px; line-height: 1.15; }
    .pshow-tab-icon { width: 18px; height: 18px; border-radius: 0; background: none !important; box-shadow: none !important; }
    .pshow-tab-icon svg { width: 17px; height: 17px; }
    .pshow-tab-name { max-width: 100%; }
}
/* a narrow head keeps the overview (counts) and drops the kicker */
@container pshow (max-width: 560px) {
    .pshow-kicker { display: none; }
    .pshow-meta { color: var(--pshow-ink); }
    .pshow-meta::before { content: none; }
}

.pshow-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease;
}
.pshow-close:hover { color: var(--text); border-color: color-mix(in srgb, var(--brass), transparent 40%); }
.pshow-close:focus-visible { outline: 2px solid var(--pshow-ring); outline-offset: 2px; }
.pshow-close svg { width: 18px; height: 18px; }

/* Wide: title left, control right, one shared row. Three ranges or fewer (Razor adds
   .pshow--many from four), so the segments always have room beside the title. */
@container pshow (min-width: 880px) {
    .pshow:not(.pshow--many) .pshow-grid {
        grid-template-columns: minmax(min(320px, 100%), 1fr) repeat(var(--pshow-cats, 3), minmax(0, auto));
        grid-template-rows: auto minmax(0, 1fr);
        row-gap: 20px;
    }
    .pshow--closable:not(.pshow--many) .pshow-grid {
        grid-template-columns: minmax(min(320px, 100%), 1fr) repeat(var(--pshow-cats, 3), minmax(0, auto)) auto;
    }
    .pshow:not(.pshow--many) .pshow-head { grid-column: 1; margin-right: 24px; padding-right: 0; display: block; }
    .pshow:not(.pshow--many) .pshow-hint { margin-top: 6px; }
    .pshow:not(.pshow--many) .pshow-seg { grid-row: 1; grid-column: 2 / span var(--pshow-cats, 3); }
    .pshow:not(.pshow--many) .pshow-tab { grid-row: 1; grid-column: calc(var(--pshow-k) + 1); container-type: normal; }
    .pshow:not(.pshow--many) .pshow-panel { grid-row: 2; }
    .pshow:not(.pshow--many) .pshow-close { position: relative; grid-row: 1; grid-column: -2 / -1; align-self: end; margin: 0 0 5px 10px; }
}

/* No products configured: the head stays, the message sits where the gallery would be. */
.pshow-empty { grid-row: 2 / -1; grid-column: 1 / -1; align-self: center; justify-self: center; }

/* --- The open range ------------------------------------------------------------------------ */
.pshow-panel {
    grid-row: 3;
    grid-column: 1 / -1;
    display: none;
    min-width: 0;
    min-height: 0;
    container: pshow-panel / size;
}
.pshow-radio:checked + .pshow-tab + .pshow-panel { display: block; }

/* Aspect bands of the panel -> --pshow-a (drives the row count). */
@container pshow-panel (max-aspect-ratio: 3/4)   { .pshow-wall { --pshow-a: .7; } }
@container pshow-panel (min-aspect-ratio: 3/4)   { .pshow-wall { --pshow-a: .9; } }
@container pshow-panel (min-aspect-ratio: 1/1)   { .pshow-wall { --pshow-a: 1.1; } }
@container pshow-panel (min-aspect-ratio: 5/4)   { .pshow-wall { --pshow-a: 1.35; } }
@container pshow-panel (min-aspect-ratio: 3/2)   { .pshow-wall { --pshow-a: 1.65; } }
@container pshow-panel (min-aspect-ratio: 9/5)   { .pshow-wall { --pshow-a: 2; } }
@container pshow-panel (min-aspect-ratio: 11/5)  { .pshow-wall { --pshow-a: 2.4; } }
@container pshow-panel (min-aspect-ratio: 13/5)  { .pshow-wall { --pshow-a: 2.9; } }
@container pshow-panel (min-aspect-ratio: 16/5)  { .pshow-wall { --pshow-a: 3.6; } }

.pshow-wall {
    /* Rows: start from x = sqrt(n * T / A) (T = target tile aspect, A = panel aspect), try floor(x)
       and floor(x)+1, keep the one whose worst tile strays least from T. At most 6 rows. */
    --pshow-r1: max(1, round(down, sqrt(var(--pshow-n) * var(--pshow-tile-aspect) / var(--pshow-a)), 1));
    --pshow-c1: round(up, var(--pshow-n) / var(--pshow-r1), 1);
    --pshow-f1: max(1, round(down, var(--pshow-n) / var(--pshow-r1), 1));
    --pshow-c2: round(up, var(--pshow-n) / (var(--pshow-r1) + 1), 1);
    --pshow-f2: max(1, round(down, var(--pshow-n) / (var(--pshow-r1) + 1), 1));
    --pshow-e1: max(var(--pshow-tile-aspect) * var(--pshow-c1) / (var(--pshow-a) * var(--pshow-r1)),
                    var(--pshow-a) * var(--pshow-r1) / (var(--pshow-f1) * var(--pshow-tile-aspect)));
    --pshow-e2: max(var(--pshow-tile-aspect) * var(--pshow-c2) / (var(--pshow-a) * (var(--pshow-r1) + 1)),
                    var(--pshow-a) * (var(--pshow-r1) + 1) / (var(--pshow-f2) * var(--pshow-tile-aspect)));
    --pshow-rows: min(6, var(--pshow-n), var(--pshow-r1) + clamp(0, (var(--pshow-e1) - var(--pshow-e2)) * 1000, 1));
    /* deal n tiles over the rows: q per row, the first r rows carry one more */
    --pshow-q: round(down, var(--pshow-n) / var(--pshow-rows), 1);
    --pshow-r: calc(var(--pshow-n) - var(--pshow-rows) * var(--pshow-q));
    --pshow-cols: calc(var(--pshow-q) + min(var(--pshow-r), 1));
    /* the narrowest tile (fullest row) and the shared row height */
    --pshow-tw: calc((100cqw - (var(--pshow-cols) - 1) * var(--pshow-gap)) / var(--pshow-cols));
    --pshow-th: calc((100cqh - (var(--pshow-rows) - 1) * var(--pshow-gap)) / var(--pshow-rows));
    /* one caption size per range */
    --pshow-name-size: clamp(14px, var(--pshow-tw) * .068, 19px);
    --pshow-pad: clamp(12px, var(--pshow-tw) * .06, 18px);
    --pshow-cap-fixed: calc(var(--pshow-pad) * .9 + var(--pshow-name-size) * 1.22 + 6px);
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
    gap: var(--pshow-gap);
    height: 100%;
}
/* a range with an unavailable product reserves the reason's height under every name, so the
   names of a row always share one baseline */
.pshow-panel--mixed .pshow-wall { --pshow-slot-min: var(--pshow-flag-h); }

/* --- Tile: the whole photograph is the button ---------------------------------------------- */
.pshow-tile {
    /* --pshow-i (0-based) is inline. Tiles before index r*(q+1) sit in the fuller rows. */
    --pshow-late: clamp(0, var(--pshow-i) - var(--pshow-r) * (var(--pshow-q) + 1) + 1, 1);
    --pshow-per: calc(var(--pshow-q) + 1 - var(--pshow-late));
    /* Description: the range's longest sentence (--pshow-dmax chars) is shown whole, or no sentence is.
       s_k / n_k are one line-height when that sentence fits k lines, else 0, so "4 lh minus the sum" is
       the fewest lines that hold it (4 lh = "does not fit"). The NARROWEST row decides for the whole
       range (sentences everywhere or nowhere, and only if they fit under ~42% of the tile); each row
       then gets the box its own width needs, so the names of a row always share a baseline.
       Hover / keyboard focus may reveal up to four lines on this tile if they fit under ~78%. */
    --pshow-dneed: calc(var(--pshow-dmax, 90) * var(--pshow-char));
    --pshow-nline: calc(var(--pshow-tw) - 2 * var(--pshow-pad) - var(--pshow-wrap));
    --pshow-n1: clamp(0px, (var(--pshow-nline) - var(--pshow-dneed)) * 1000, var(--pshow-desc-lh));
    --pshow-n2: clamp(0px, (var(--pshow-nline) * 2 - var(--pshow-dneed)) * 1000, var(--pshow-desc-lh));
    --pshow-n3: clamp(0px, (var(--pshow-nline) * 3 - var(--pshow-dneed)) * 1000, var(--pshow-desc-lh));
    --pshow-nbox: calc(var(--pshow-desc-lh) * 4 - var(--pshow-n1) - var(--pshow-n2) - var(--pshow-n3));
    --pshow-rw: calc((100cqw - (var(--pshow-per) - 1) * var(--pshow-gap)) / var(--pshow-per));   /* this row's tile width */
    --pshow-dline: calc(var(--pshow-rw) - 2 * var(--pshow-pad) - var(--pshow-wrap));
    --pshow-s1: clamp(0px, (var(--pshow-dline) - var(--pshow-dneed)) * 1000, var(--pshow-desc-lh));
    --pshow-s2: clamp(0px, (var(--pshow-dline) * 2 - var(--pshow-dneed)) * 1000, var(--pshow-desc-lh));
    --pshow-s3: clamp(0px, (var(--pshow-dline) * 3 - var(--pshow-dneed)) * 1000, var(--pshow-desc-lh));
    --pshow-s4: clamp(0px, (var(--pshow-dline) * 4 - var(--pshow-dneed)) * 1000, var(--pshow-desc-lh));
    --pshow-dbox: calc(var(--pshow-desc-lh) * 4 - var(--pshow-s1) - var(--pshow-s2) - var(--pshow-s3));
    --pshow-dbox4: calc(var(--pshow-desc-lh) * 5 - var(--pshow-s1) - var(--pshow-s2) - var(--pshow-s3) - var(--pshow-s4));
    --pshow-desc-h: clamp(0px, (min(var(--pshow-desc-lh) * 3, var(--pshow-th) * .42 - var(--pshow-cap-fixed)) - var(--pshow-nbox) + 1px) * 1000, var(--pshow-dbox));
    --pshow-desc-hover: clamp(0px, (min(var(--pshow-desc-lh) * 4, var(--pshow-th) * .78 - var(--pshow-cap-fixed) - 10px) - var(--pshow-dbox4) + 1px) * 1000, var(--pshow-dbox4));
    --pshow-caph: calc(var(--pshow-cap-fixed) + max(var(--pshow-desc-h), var(--pshow-slot-min, 0px)) + 6px);
    --pshow-caph-hover: calc(var(--pshow-cap-fixed) + max(var(--pshow-desc-h), var(--pshow-desc-hover), var(--pshow-slot-min, 0px)) + 6px);
    position: relative;
    isolation: isolate;
    flex: 1 1 calc((100% - (var(--pshow-per) - 1) * var(--pshow-gap)) / var(--pshow-per) - .5px);
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--pshow-radius);
    background: var(--surface-control);
    color: #fff;   /* captions sit on photographs in both themes */
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: var(--pshow-shadow);
    outline: 1px solid var(--pshow-edge);
    outline-offset: -1px;
    -webkit-tap-highlight-color: transparent;
    transform-origin: 50% 100%;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s cubic-bezier(.22, 1, .36, 1);
    /* backwards, not both: a forwards fill would pin transform and kill the hover lift */
    animation: pshow-in .5s cubic-bezier(.22, 1, .36, 1) backwards;
    animation-delay: calc(min(var(--pshow-i), 14) * 30ms);
}
/* the size container lives on an inner span, not on the <button> */
.pshow-frame {
    position: absolute;
    inset: 0;
    display: block;
    container: pshow-tile / size;
    overflow: hidden;
    border-radius: inherit;
    /* product renders shot on white (the bay window) multiply onto a warm studio backdrop instead
       of punching a white hole in the wall; photographs are barely touched */
    background: radial-gradient(125% 100% at 50% 34%, #ebe6de 0%, #d9d2c7 58%, #b8afa1 100%);
}
.pshow-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 42%;
    mix-blend-mode: multiply;
    transition: transform .8s cubic-bezier(.22, 1, .36, 1), filter .3s ease;
}
.pshow-ph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: radial-gradient(120% 90% at 50% 28%, color-mix(in srgb, var(--blue), transparent 50%), var(--surface-control) 70%);
    color: rgba(255, 255, 255, .3);
}
.pshow-ph svg { width: 30%; height: 30%; stroke-width: 1.2; }
/* scrims sized to the caption actually shown (rest / hover-focus) */
.pshow-frame::before,
.pshow-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.pshow-frame::before {
    background: linear-gradient(to top, rgba(6, 10, 16, .9) 0, rgba(6, 10, 16, .66) calc(var(--pshow-caph) * .62),
                rgba(6, 10, 16, .2) calc(var(--pshow-caph) + 30px), rgba(6, 10, 16, 0) calc(var(--pshow-caph) + 72px));
}
.pshow-frame::after {
    opacity: 0;
    background: linear-gradient(to top, rgba(6, 10, 16, .9) 0, rgba(6, 10, 16, .7) calc(var(--pshow-caph-hover) * .62),
                rgba(6, 10, 16, .22) calc(var(--pshow-caph-hover) + 30px), rgba(6, 10, 16, 0) calc(var(--pshow-caph-hover) + 72px));
    transition: opacity .3s ease;
}

.pshow-cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: block;
    min-width: 0;
    padding: 0 var(--pshow-pad) calc(var(--pshow-pad) * .9);
}
.pshow-name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: var(--pshow-name-size);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -.01em;
    text-wrap: balance;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
/* the slot under the name: the sentence (if it fits whole) or the unavailable reason */
.pshow-more {
    display: block;
    height: max(var(--pshow-desc-h), var(--pshow-slot-min, 0px));
    margin-top: clamp(0px, (var(--pshow-desc-h) + var(--pshow-slot-min, 0px)) * 1000, 6px);
    overflow: hidden;
}
.pshow-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    max-height: var(--pshow-desc-h);   /* the slot may be taller (a reason pill next door); the sentence is not */
    font-size: var(--pshow-desc-fs);
    line-height: var(--pshow-desc-lh);
    color: rgba(255, 255, 255, .86);
}
/* brass "go" chip: a hint for pointer and keyboard users (the whole tile is the button) */
.pshow-go {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--brass);
    color: var(--on-accent);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .2s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
}
.pshow-go svg { width: 16px; height: 16px; stroke-width: 2.6; }

/* A lone choosable product is one landscape feature, not a wall-to-wall slab. */
.pshow-tile:only-child { --pshow-rw: min(100cqw, 150cqh); --pshow-nline: calc(min(100cqw, 150cqh) - 2 * var(--pshow-pad) - var(--pshow-wrap)); flex: 0 1 auto; width: min(100%, 150cqh); margin-inline: auto; }

/* --- Hover / focus ------------------------------------------------------------------------- */
@media (hover: hover) {
    .pshow-tile:not(.pshow-tile--off):hover {
        transform: translateY(-3px);
        box-shadow: 0 22px 40px -20px rgba(0, 0, 0, .8), 0 0 0 1px color-mix(in srgb, var(--brass), transparent 35%);
    }
    .pshow-tile:not(.pshow-tile--off):hover .pshow-photo { transform: scale(1.05); }
    .pshow-tile:not(.pshow-tile--off):hover .pshow-go { opacity: 1; transform: none; }
    .pshow-tile:not(.pshow-tile--off):hover .pshow-frame::after { opacity: 1; }
    .pshow-tile:not(.pshow-tile--off):hover .pshow-more {
        height: max(var(--pshow-desc-h), var(--pshow-desc-hover), var(--pshow-slot-min, 0px));
        margin-top: 6px;
        transition: height .35s cubic-bezier(.22, 1, .36, 1);
    }
    .pshow-tile:not(.pshow-tile--off):hover .pshow-desc { max-height: max(var(--pshow-desc-h), var(--pshow-desc-hover)); }
}
.pshow-tile:focus { outline: 1px solid var(--pshow-edge); }
.pshow-tile:focus-visible {
    outline: 2px solid var(--pshow-ring);
    outline-offset: 3px;
    box-shadow: var(--pshow-shadow), 0 0 0 7px var(--focus-ring);
}
.pshow-tile:not(.pshow-tile--off):focus-visible .pshow-go { opacity: 1; transform: none; }
.pshow-tile:not(.pshow-tile--off):focus-visible .pshow-frame::after { opacity: 1; }
.pshow-tile:not(.pshow-tile--off):focus-visible .pshow-more {
    height: max(var(--pshow-desc-h), var(--pshow-desc-hover), var(--pshow-slot-min, 0px));
    margin-top: 6px;
}
.pshow-tile:not(.pshow-tile--off):focus-visible .pshow-desc { max-height: max(var(--pshow-desc-h), var(--pshow-desc-hover)); }
.pshow-tile:not(.pshow-tile--off):active { transform: scale(.985); transition-duration: .08s; }

/* --- Not choosable: stays in the range, plainly off, the reason beside the name ------------ */
.pshow-tile--off { cursor: not-allowed; }
.pshow-tile--off .pshow-photo { filter: grayscale(1) brightness(.6) contrast(.9); }
.pshow-tile--off .pshow-frame::before {
    background: linear-gradient(to top, rgba(6, 10, 16, .9) 0, rgba(6, 10, 16, .6) calc(var(--pshow-caph) + 20px), rgba(6, 10, 16, .38) 100%);
}
.pshow-tile--off .pshow-name { color: rgba(255, 255, 255, .7); }
.pshow-tile--off .pshow-more { height: max(var(--pshow-desc-h), var(--pshow-flag-h)); margin-top: 6px; }
.pshow-tile--off .pshow-desc { display: none; }
.pshow-flag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    height: var(--pshow-flag-h);
    padding: 0 10px 0 8px;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 999px;
    background: rgba(8, 12, 18, .4);
    color: rgba(255, 255, 255, .92);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}
.pshow-flag svg { width: 13px; height: 13px; flex: none; color: rgba(255, 255, 255, .72); }
.pshow-flag > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@container pshow-tile (max-width: 199px) {
    .pshow-flag { gap: 0; padding: 0 9px; }
    .pshow-flag svg { display: none; }
}

/* A range whose only product is unavailable (Roofline in the Presentation): a compact card the
   size of a tile, in theme colours - never a greyed slab bigger than a choosable product. */
.pshow-tile.pshow-tile--card {
    flex: 0 1 auto;
    align-self: center;
    width: min(100%, 380px);
    height: auto;
    max-height: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
    background: var(--surface-panel);
    color: var(--text);
    outline: 1px solid var(--border);
}
.pshow-tile--card .pshow-frame {
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    container-type: normal;
    background: none;
}
.pshow-tile--card .pshow-frame::before,
.pshow-tile--card .pshow-frame::after { content: none; }
.pshow-tile--card .pshow-photo {
    position: relative;
    inset: auto;
    flex: 0 1 auto;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
    mix-blend-mode: normal;
    filter: grayscale(1) contrast(.92);
    opacity: .72;
}
.pshow-tile--card .pshow-cap { position: static; padding: 16px 18px 18px; }
.pshow-tile--card .pshow-name { font-size: 18px; color: var(--text); text-shadow: none; }
.pshow-tile--card .pshow-more { height: auto; margin-top: 10px; overflow: visible; }
.pshow-tile--card .pshow-flag { border-color: var(--border); background: transparent; color: var(--text); }
.pshow-tile--card .pshow-flag svg { color: var(--muted); }
.pshow-tile--card .pshow-desc { display: block; max-height: none; margin-top: 12px; color: var(--muted); font-size: 13px; line-height: 1.5; -webkit-line-clamp: unset; }

@keyframes pshow-in {
    from { opacity: 0; transform: scale(.97); }
    to { opacity: 1; transform: none; }
}

/* Screen-reader-only text (the "styles" after each count). */
.pshow-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Homes --------------------------------------------------------------------------------- */
/* Presentation: the slide fills the canvas (wider than the 980px text slides). */
.presentation-stage.pshow-stage { max-width: 1320px; height: 100%; }

/* Projects > Add product: a fixed-size dialog inside the existing .modal-backdrop. A height, not a
   max-height, so the gallery has a definite height to share; dvh keeps iPad toolbars out. */
.pshow-modal {
    position: absolute;
    inset: 0;
    margin: auto;
    width: min(1180px, calc(100vw - 48px));
    height: min(800px, calc(100vh - 48px), calc(100dvh - 48px));
    padding: 22px 26px 26px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface-panel);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45);
}
:root.light .pshow-modal { box-shadow: 0 30px 80px rgba(16, 24, 34, .28); }

/* --- <= 900px: tighter rhythm (the presentation rail is gone, the canvas pads 20px) -------- */
@media (max-width: 900px) {
    .pshow { --pshow-gap: 12px; --pshow-radius: 14px; }
    .pshow-modal { width: calc(100vw - 32px); height: min(800px, calc(100vh - 32px), calc(100dvh - 32px)); padding: 18px 18px 20px; }
}

/* --- Phones / very short screens: one scroll region of cards ------------------------------- */
@media (max-width: 640px), (max-height: 500px) {
    .presentation-stage.pshow-stage { height: auto; }
    .pshow { height: auto; --pshow-tab-h: 44px; }
    .pshow-grid { height: auto; grid-template-rows: auto auto auto; }
    .pshow-head { display: block; }
    .pshow .pshow-h { font-size: 22px; }
    .pshow .pshow-hint { margin-top: 4px; font-size: 13px; }
    .pshow-panel { container-type: inline-size; }
    .pshow-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; height: auto; }
    .pshow-tile,
    .pshow-tile--card {
        width: auto;
        height: auto;
        max-height: none;
        margin: 0;
        display: flex;
        flex-direction: column;
        background: var(--surface-panel);
        color: var(--text);
        outline: 1px solid var(--border);
        box-shadow: none;
    }
    .pshow-frame { position: relative; inset: auto; display: flex; flex-direction: column; flex: 1 1 auto; container-type: normal; background: none; }
    .pshow-frame::before,
    .pshow-frame::after { content: none; }
    .pshow-photo { position: relative; inset: auto; flex: none; height: auto; aspect-ratio: 4 / 3; mix-blend-mode: normal; }
    .pshow-ph { position: relative; inset: auto; aspect-ratio: 4 / 3; }
    .pshow-cap { position: static; padding: 10px 12px 12px; }
    .pshow-name { font-size: 14px; color: var(--text); text-shadow: none; }
    .pshow-more,
    .pshow-tile--off .pshow-more,
    .pshow-tile--card .pshow-more { height: auto; margin-top: 4px; overflow: visible; }
    .pshow-desc { display: block; max-height: none; font-size: 12px; line-height: 1.45; color: var(--muted); -webkit-line-clamp: unset; }
    .pshow-tile--off .pshow-desc { display: none; }
    .pshow-tile--card .pshow-desc { display: block; margin-top: 8px; }
    .pshow-flag { height: auto; min-height: 22px; padding: 4px 9px 4px 7px; border-color: var(--border); border-radius: 9px; background: transparent; color: var(--text); white-space: normal; line-height: 1.25; }
    .pshow-flag svg { display: block; color: var(--muted); }
    .pshow-tile--off .pshow-photo,
    .pshow-tile--card .pshow-photo { filter: grayscale(1) contrast(.92); opacity: .6; }
    .pshow-go { display: none; }
    .pshow-modal { inset: 0; width: auto; height: auto; margin: 10px; padding: 16px 12px 0; border-radius: 18px; }
    .pshow-modal .pshow { height: 100%; }
    .pshow-modal .pshow-grid { height: 100%; grid-template-rows: auto auto minmax(0, 1fr); }
    /* the one scroll region; its padding keeps an edge tile's focus ring inside it */
    .pshow-modal .pshow-panel { overflow-y: auto; overscroll-behavior: contain; margin: 0 -12px; padding: 4px 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .pshow-tile, .pshow-photo, .pshow-go, .pshow-more, .pshow-tab, .pshow-tab-icon, .pshow-frame::after { transition: none !important; }
    .pshow-tile { animation: none; }
    .pshow-tile:hover, .pshow-tile:active, .pshow-tile:hover .pshow-photo { transform: none !important; }
}