:root {
    /* Scheme-overridable core (SchemeBranding.razor injects these three per tenant) */
    --lc-navy: #17324a;
    --lc-teal: #2f7d8a;
    --lc-ink: #1f2933;

    /* Fixed neutrals */
    --lc-sand: #f6f3ec;
    --lc-muted: #5b6875;
    --lc-line: #e5e0d6;
    --lc-white: #ffffff;

    /* Derived from the core tokens — tints, shades and translucent scrims.
       color-mix keeps them in step when a scheme swaps its palette. */
    --lc-navy-dark: color-mix(in srgb, var(--lc-navy) 78%, #000);
    --lc-navy-tint: color-mix(in srgb, var(--lc-navy) 6%, var(--lc-white));
    --lc-teal-dark: color-mix(in srgb, var(--lc-teal) 82%, #000);
    --lc-teal-tint: color-mix(in srgb, var(--lc-teal) 10%, var(--lc-white));
    --lc-scrim: color-mix(in srgb, var(--lc-navy) 88%, #000);

    /* Scale */
    --lc-container: 1180px;
    --lc-radius: 12px;
    --lc-radius-sm: 8px;
    --lc-shadow: 0 1px 2px rgba(20, 30, 40, .06), 0 8px 24px -8px rgba(20, 30, 40, .18);
    --lc-shadow-lg: 0 2px 6px rgba(20, 30, 40, .08), 0 24px 48px -16px rgba(20, 30, 40, .28);
    --lc-step: 1.5rem;

    --lc-font-brand: "Kaushan Script", "Segoe Script", "Brush Script MT", cursive;
    --lc-font-head: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Type scale — role mapping (applied so far only to the portal/public layout shells;
       H1 36px/tight/semibold, H2 30px/tight/semibold, H3 24px/snug/semibold, H4 20px/snug/medium,
       lead 18px/relaxed/regular, body 16px/normal/regular, caption 14px/normal/regular,
       eyebrow/label 12px/normal/bold). */
    --lc-text-xs: .75rem;
    --lc-text-sm: .875rem;
    --lc-text-base: 1rem;
    --lc-text-md: 1.125rem;
    --lc-text-lg: 1.25rem;
    --lc-text-xl: 1.5rem;
    --lc-text-2xl: 1.875rem;
    --lc-text-3xl: 2.25rem;
    --lc-leading-tight: 1.15;
    --lc-leading-snug: 1.35;
    --lc-leading-normal: 1.65;
    --lc-leading-relaxed: 1.75;
    --lc-weight-regular: 400;
    --lc-weight-medium: 500;
    --lc-weight-semibold: 600;
    --lc-weight-bold: 700;

    /* Spacing scale — 4px base. --lc-space-6 equals the existing --lc-step (kept, not replaced). */
    --lc-space-1: .25rem;
    --lc-space-2: .5rem;
    --lc-space-3: .75rem;
    --lc-space-4: 1rem;
    --lc-space-5: 1.25rem;
    --lc-space-6: 1.5rem;
    --lc-space-8: 2rem;
    --lc-space-10: 2.5rem;
    --lc-space-12: 3rem;
    --lc-space-16: 4rem;

    /* Elevation + radius — extend the existing --lc-shadow/--lc-shadow-lg/--lc-radius/--lc-radius-sm
       (unchanged) with a step either side, plus a named focus ring and pill radius. */
    --lc-shadow-xs: 0 1px 2px rgba(20, 30, 40, .05);
    --lc-shadow-xl: 0 4px 12px rgba(20, 30, 40, .12), 0 32px 64px -20px rgba(20, 30, 40, .35);
    --lc-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--lc-teal) 30%, transparent);
    --lc-radius-xs: 4px;
    --lc-radius-lg: 16px;
    --lc-radius-pill: 999px;

    /* Motion — zeroed under prefers-reduced-motion below. */
    --lc-ease-standard: cubic-bezier(.2, .8, .2, 1);
    --lc-ease-out: cubic-bezier(0, 0, .2, 1);
    --lc-ease-in: cubic-bezier(.4, 0, 1, 1);
    --lc-duration-fast: 120ms;
    --lc-duration-base: 180ms;
    --lc-duration-slow: 280ms;

    /* Semantic status tokens — derived from the core palette so a tenant's SchemeBranding
       override still flows through; dark-mode mirror lives in the [data-bs-theme="dark"] block
       below, copied from the existing .badge-pill--* dark values so old and new match exactly. */
    --lc-success: var(--lc-teal-dark);
    --lc-success-bg: #e6f2ef;
    --lc-warning: #8a5a00;
    --lc-warning-bg: #fbedd4;
    --lc-danger: #a13b3b;
    --lc-danger-bg: #f3e0e0;
    --lc-info: var(--lc-navy);
    --lc-info-bg: #e4ecf5;
}

/* Breakpoint scale — documented literals, not CSS vars (custom properties can't appear inside
   @media feature conditions). Use these five pixel values verbatim in any new @media rule.
     600px   sm   compact phones
     800px   md   phone -> tablet (the existing sidebar/nav-flyout breakpoint below, unchanged)
     1024px  lg   tablet -> small laptop
     1280px  xl   desktop
     1440px  2xl  wide desktop                                                                */

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--lc-ink);
    background: var(--lc-white);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a, .btn-link { color: var(--lc-teal-dark); }

.container { max-width: var(--lc-container); margin-inline: auto; padding-inline: 1.25rem; }

/* Icons — see Components/Shared/Icon.razor and wwwroot/lib/lucide/README.md */
.lc-icon { display: inline-block; flex-shrink: 0; stroke: currentColor; fill: none; vertical-align: -.125em; width: 1.25rem; height: 1.25rem; }
.lc-icon--sm { width: 1rem; height: 1rem; }
.lc-icon--lg { width: 1.5rem; height: 1.5rem; }

/* The public site is a deliberately light-only design. It pins Bootstrap components to
   data-bs-theme="light", but the <html> that theme.js stamps is still "dark" on a dark OS,
   which paints <body> dark (see the dark-mode block near the end of this file) — so the
   site must own an opaque light surface of its own that spans the viewport, or that dark
   body shows through anywhere the page is transparent (e.g. the sparse auth pages below
   the header band). color-scheme keeps form controls and scrollbars light to match. */
.site {
    min-height: 100vh;
    background: var(--lc-white);
    color: var(--lc-ink);
    color-scheme: light;
}

/* Public-site type scale + buttons (scoped to .site so the portal is untouched) */
.site :where(h1, h2, h3) { font-family: var(--lc-font-head); color: var(--lc-navy); line-height: 1.15; letter-spacing: -.01em; }
.site h2 { font-size: clamp(1.55rem, 3.4vw, 2.2rem); margin: 0 0 1rem; }
.site h3 { font-size: 1.2rem; }
.site .lead, .site p.lead { font-size: 1.12rem; color: var(--lc-muted); }

.site .btn-primary,
.site .btn-primary:visited {
    background: var(--lc-teal); border-color: var(--lc-teal); color: #fff;
    border-radius: 999px; padding-inline: 1.4rem; font-weight: 600;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--lc-teal) 70%, transparent);
    transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.site .btn-primary:hover { background: var(--lc-teal-dark); border-color: var(--lc-teal-dark); transform: translateY(-1px); }
.site .btn-outline-primary { color: var(--lc-teal-dark); border-color: var(--lc-teal); border-radius: 999px; padding-inline: 1.4rem; font-weight: 600; }
.site .btn-outline-primary:hover { background: var(--lc-teal); border-color: var(--lc-teal); }
.site .btn-lg { padding-block: .7rem; }

/* Header */
.site-header {
    border-bottom: 1px solid var(--lc-line);
    position: sticky; top: 0; z-index: 20;
    background: color-mix(in srgb, var(--lc-white) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(8px);
    box-shadow: var(--lc-shadow-xs);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--lc-space-4); min-height: 76px; flex-wrap: wrap; }
.site-brand { display: inline-flex; align-items: center; gap: var(--lc-space-3); text-decoration: none; }
.site-brand__mark { display: block; }
.site-brand__name { font-family: var(--lc-font-brand); font-size: 2rem; color: var(--lc-navy); line-height: 1; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lc-space-6); }
.site-nav__link { color: var(--lc-ink); text-decoration: none; font-size: .95rem; padding-block: .2rem; border-bottom: 2px solid transparent; }
.site-nav__link:hover, .site-nav__link.active { color: var(--lc-teal-dark); border-bottom-color: var(--lc-teal); }
.site-nav__link--portal { font-weight: 600; color: var(--lc-teal-dark); border-bottom: 0; }
.site-nav__cta {
    background: var(--lc-teal); color: #fff; text-decoration: none;
    padding: .55rem 1.15rem; border-radius: 999px; font-size: .9rem; font-weight: 600;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--lc-teal) 70%, transparent);
    transition: background-color .12s ease, transform .12s ease;
}
.site-nav__cta:hover { background: var(--lc-teal-dark); transform: translateY(-1px); }

/* Nav — inline on desktop; a tap-to-open panel on mobile (CSS-only checkbox toggle) */
.site-nav-checkbox, .site-nav-toggle, .site-nav-scrim { display: none; }

/* Hero */
.hero {
    position: relative;
    background: linear-gradient(155deg, var(--lc-navy), var(--lc-teal-dark));
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: clamp(5rem, 13vw, 9rem) 0 clamp(3.5rem, 9vw, 6rem);
    overflow: hidden;
}
/* Photo heroes: a light top wash for the sticky header, a stronger foot so the copy sits on
   deep tone, and a gentle left bias — the image still reads as a photo, the text stays AA. */
.hero--image::before {
    content: "";
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--lc-scrim) 40%, transparent) 0%,
            color-mix(in srgb, var(--lc-scrim) 12%, transparent) 30%,
            color-mix(in srgb, var(--lc-scrim) 34%, transparent) 62%,
            color-mix(in srgb, var(--lc-scrim) 80%, transparent) 100%),
        linear-gradient(95deg,
            color-mix(in srgb, var(--lc-scrim) 52%, transparent) 0%,
            color-mix(in srgb, var(--lc-scrim) 14%, transparent) 45%,
            transparent 70%);
}
@media (max-width: 700px) {
    .hero--image::before {
        background: linear-gradient(180deg,
            color-mix(in srgb, var(--lc-scrim) 34%, transparent) 0%,
            color-mix(in srgb, var(--lc-scrim) 34%, transparent) 30%,
            color-mix(in srgb, var(--lc-scrim) 66%, transparent) 100%);
    }
}
.hero .container { position: relative; max-width: 940px; }
.hero__eyebrow {
    display: inline-flex; align-items: center; gap: .7rem;
    text-transform: uppercase; letter-spacing: .24em; font-size: .74rem; font-weight: 700;
    color: #fff; margin: 0 0 .15rem; text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
.hero__eyebrow::before { content: ""; width: 2.1rem; height: 2px; border-radius: 2px; background: var(--lc-teal); }
.site .hero__title {
    color: #fff;
    font-family: var(--lc-font-brand);
    font-weight: 400;
    font-size: clamp(3rem, 8.5vw, 5.5rem);
    line-height: 1.05;
    margin: .3rem 0 1rem;
    text-shadow: 0 2px 30px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3);
}
.hero__lead {
    max-width: 38rem; font-size: clamp(1.05rem, 2.1vw, 1.22rem);
    margin-bottom: 2rem; color: rgba(255, 255, 255, .95);
    text-shadow: 0 1px 12px rgba(0, 0, 0, .4);
}
.hero .btn-primary { box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .5); }
.hero .btn-outline-secondary,
.hero .btn-outline-secondary:visited {
    color: #fff; border-color: rgba(255, 255, 255, .65); border-radius: 999px;
    padding-inline: 1.4rem; font-weight: 600; background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(2px);
}
.hero .btn-outline-secondary:hover { background: #fff; color: var(--lc-navy); border-color: #fff; }

/* Platform marketing hero — copy on the left, an illustrative rotating product preview on the right
   (see ProductShowcase.razor). A faint ledger grid and a teal glow give the dark field some depth. */
.hero--split { padding-bottom: clamp(6.5rem, 12vw, 9rem); }
.hero--split::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(ellipse 80% 90% at 70% 40%, #000 20%, transparent 75%);
}
.hero--split::after {
    content: ""; position: absolute; pointer-events: none;
    width: 46rem; aspect-ratio: 1; right: -8rem; top: -6rem; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--lc-teal) 45%, transparent), transparent 65%);
}
.hero--split .container { max-width: var(--lc-container); z-index: 1; }
.hero--split .hero__grid {
    display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--lc-space-10);
    align-items: center;
}
/* The script face is the holiday-letting sites' voice — a B2B platform's headline wants the sans
   display face, so the split hero opts out of it. */
.site .hero--split .hero__title {
    font-family: var(--lc-font-head); font-weight: var(--lc-weight-bold);
    font-size: clamp(2.3rem, 4.2vw, 3.4rem); line-height: var(--lc-leading-tight);
    letter-spacing: -.028em; margin: var(--lc-space-3) 0 var(--lc-space-5);
    text-shadow: none;
}
.hero__title-accent {
    background: linear-gradient(90deg, #7fdbe6, #b6f0d0); -webkit-background-clip: text; background-clip: text;
    color: transparent;
}
.hero--split .hero__lead { margin-bottom: var(--lc-space-8); text-shadow: none; color: rgba(255, 255, 255, .86); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--lc-space-3); }
@media (max-width: 1024px) {
    .hero--split .hero__grid { grid-template-columns: 1fr; gap: var(--lc-space-8); }
}

/* Proof strip — the four verifiable facts, overlapping the hero's foot. A container holds each icon:
   padding on the <svg> itself collapses the glyph under global border-box. */
.proof-strip {
    position: relative; z-index: 2; margin-top: calc(-1 * var(--lc-space-12));
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    background: #fff; border: 1px solid var(--lc-line); border-radius: var(--lc-radius-lg);
    box-shadow: var(--lc-shadow-lg); padding: var(--lc-space-2);
}
.proof-strip__item { display: flex; align-items: flex-start; gap: var(--lc-space-3); padding: var(--lc-space-4) var(--lc-space-5); }
.proof-strip__item + .proof-strip__item { border-left: 1px solid var(--lc-line); }
.proof-strip__icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; border-radius: var(--lc-radius-sm);
    background: var(--lc-teal-tint); color: var(--lc-teal-dark);
}
.proof-strip__item strong { display: block; color: var(--lc-navy); font-size: var(--lc-text-base); line-height: var(--lc-leading-snug); }
.proof-strip__item span.proof-strip__text { display: block; color: var(--lc-muted); font-size: var(--lc-text-sm); line-height: var(--lc-leading-snug); margin-top: .15rem; }
@media (max-width: 1024px) {
    .proof-strip { grid-template-columns: repeat(2, 1fr); }
    .proof-strip__item:nth-child(3) { border-left: 0; }
    .proof-strip__item:nth-child(n+3) { border-top: 1px solid var(--lc-line); }
}
@media (max-width: 600px) {
    .proof-strip { grid-template-columns: 1fr; }
    .proof-strip__item + .proof-strip__item { border-left: 0; border-top: 1px solid var(--lc-line); }
}

/* Sections */
.section { padding: clamp(3rem, 7vw, 5.5rem) 0; }
/* Full-bleed tint even though the section is itself the max-width container */
.section--tint {
    background: var(--lc-sand);
    box-shadow: 0 0 0 100vmax var(--lc-sand);
    clip-path: inset(0 -100vmax);
}
.section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.section__title {
    font-size: clamp(1.5rem, 3.4vw, 2.1rem); color: var(--lc-navy); margin-bottom: 1.6rem;
    position: relative; padding-bottom: .7rem;
}
.section__title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3rem; height: 3px; border-radius: 3px; background: var(--lc-teal); }
.page-header {
    position: relative; isolation: isolate; overflow: hidden;
    background: linear-gradient(150deg, var(--lc-navy) 0%, var(--lc-navy-dark) 68%, color-mix(in srgb, var(--lc-teal-dark) 55%, var(--lc-navy-dark)) 100%);
    color: #fff;
    padding: clamp(2.4rem, 5.5vw, 4rem) 0 clamp(2rem, 4.5vw, 3rem);
    border-bottom: 3px solid var(--lc-teal);
}
.page-header::before {
    content: ""; position: absolute; z-index: -1; right: -12%; top: -60%;
    width: min(42rem, 60vw); aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--lc-teal) 42%, transparent), transparent 68%);
}
.page-header::after {
    content: ""; position: absolute; z-index: -1; inset: 0;
    background-image: radial-gradient(color-mix(in srgb, #fff 8%, transparent) 1px, transparent 1px);
    background-size: 26px 26px; opacity: .5; mask-image: linear-gradient(105deg, #000, transparent 55%);
}
.page-header--compact { padding-block: clamp(1.8rem, 4vw, 2.6rem) clamp(1.4rem, 3vw, 2rem); }
.page-header h1 { color: #fff; margin: 0; font-size: clamp(1.9rem, 4.6vw, 3rem); letter-spacing: -.015em; }
.page-header__eyebrow {
    display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 .55rem;
    text-transform: uppercase; letter-spacing: .22em; font-size: .72rem; font-weight: 700;
    color: color-mix(in srgb, var(--lc-teal) 55%, #fff);
}
.page-header__eyebrow::before { content: ""; width: 1.8rem; height: 2px; border-radius: 2px; background: var(--lc-teal); }
.page-header__sub,
.page-header > .container > p { color: rgba(255, 255, 255, .82); margin: .7rem 0 0; max-width: 46rem; font-size: 1.02rem; }
.page-header > .container > p.lead { color: #fff; }
.page-header__meta { color: rgba(255, 255, 255, .78); margin: .7rem 0 0; font-size: .92rem; }
.page-header__dot { margin: 0 .5rem; opacity: .5; }
.page-header__price { margin: .95rem 0 0; font-size: 1.1rem; font-weight: 700; color: #fff; }
.page-header__price :where(.cur, small) { font-weight: 400; color: rgba(255, 255, 255, .7); }
.page-header__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .55rem; font-size: .82rem; margin-bottom: 1rem; color: rgba(255, 255, 255, .6); }
.page-header__crumbs a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.page-header__crumbs a:hover { color: #fff; text-decoration: underline; }
.page-header__crumbs [aria-current] { color: #fff; }
.page-header__crumb-sep { opacity: .4; }

.prose :where(p, ul, ol) { margin-bottom: 1rem; }
.prose :where(h2, h3) { margin-top: 2rem; }
.prose--page { max-width: 46rem; }
.prose--page :where(h2, h3) { color: var(--lc-navy); }

/* Cards */
.site .card {
    border: 1px solid var(--lc-line); border-radius: var(--lc-radius); overflow: hidden;
    box-shadow: var(--lc-shadow); transition: transform .16s ease, box-shadow .16s ease;
    background: #fff;
}
.site .card:hover { transform: translateY(-3px); box-shadow: var(--lc-shadow-lg); }
.site .card-body { padding: 1.25rem 1.35rem 1.35rem; }
.unit-card__img, .special-card__img, .facility-card__img {
    aspect-ratio: 3 / 2; object-fit: cover; width: 100%; display: block;
    transition: transform .4s ease;
}
.site .card:hover .unit-card__img, .site .card:hover .special-card__img, .site .card:hover .facility-card__img { transform: scale(1.04); }
.unit-card__price { font-weight: 700; color: var(--lc-teal-dark); }

/* Module card grid — Centriva's own marketing site (Home featured + /modules full grid). A sibling
   to .card rather than reusing it: .card/.card-body assume a 3:2 photo-first layout, which fights
   an icon+text card. */
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--lc-space-6); }
.site .module-card {
    border: 1px solid var(--lc-line); border-radius: var(--lc-radius); background: #fff;
    box-shadow: var(--lc-shadow); padding: var(--lc-space-6);
    transition: transform var(--lc-duration-base) var(--lc-ease-standard), box-shadow var(--lc-duration-base) var(--lc-ease-standard);
}
.site .module-card:hover { transform: translateY(-3px); box-shadow: var(--lc-shadow-lg); }
.module-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; border-radius: var(--lc-radius-sm);
    background: var(--lc-teal-tint); color: var(--lc-teal-dark); margin-bottom: var(--lc-space-4);
}
.module-card__name { font-size: var(--lc-text-lg); color: var(--lc-navy); margin: 0 0 var(--lc-space-2); }
.module-card__blurb { color: var(--lc-muted); font-size: var(--lc-text-sm); line-height: var(--lc-leading-normal); margin: 0; }

/* "How it works" — 3 numbered steps with a connecting line (desktop only). */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lc-space-8); }
.step { position: relative; text-align: left; }
.step__num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    background: var(--lc-navy); color: #fff; font-weight: var(--lc-weight-bold);
    font-size: var(--lc-text-lg); margin-bottom: var(--lc-space-4);
}
.step h3 { color: var(--lc-navy); font-size: var(--lc-text-lg); margin: 0 0 var(--lc-space-2); }
.step p { color: var(--lc-muted); margin: 0; }
/* Runs from the right edge of this step's circle (2.75rem + .75rem gap) to .75rem short of the next
   step's circle: the next circle sits one column + one grid gap (--lc-space-8 = 2rem) along. */
.steps .step:not(:last-child)::after {
    content: ""; position: absolute; top: 1.375rem; left: 3.5rem;
    width: calc(100% - 2.25rem); height: 2px; background: var(--lc-line);
}
@media (max-width: 800px) {
    .steps { grid-template-columns: 1fr; gap: var(--lc-space-6); }
    .steps .step::after { display: none; }
}

/* Trust / differentiation grid — honest, verifiable claims only (see docs/DECISIONS.md). */
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--lc-space-8); }
.trust-item__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; border-radius: var(--lc-radius-sm);
    background: var(--lc-teal-tint); color: var(--lc-teal-dark); margin-bottom: var(--lc-space-3);
}
.trust-item h3 { color: var(--lc-navy); font-size: var(--lc-text-md); margin: 0 0 var(--lc-space-2); }
.trust-item p { color: var(--lc-muted); font-size: var(--lc-text-sm); margin: 0; line-height: var(--lc-leading-normal); }

/* Closing call-to-action band — centred; the section title's accent rule is centred with it. */
.cta-band { text-align: center; }
.cta-band .section__title { display: inline-block; }
.cta-band .section__title::after { left: 50%; transform: translateX(-50%); }
.cta-band .lead { max-width: 36rem; margin-inline: auto; }

/* Demo-request page — a small reassurance list beside the form (mirrors .contact-list's icon-row idiom). */
.trust-mini-list { list-style: none; margin: var(--lc-space-6) 0 0; padding: 0; display: grid; gap: var(--lc-space-3); }
.trust-mini-list li { display: flex; align-items: center; gap: var(--lc-space-2); color: var(--lc-ink); font-size: var(--lc-text-sm); }
.trust-mini-list .lc-icon { color: var(--lc-teal-dark); }

/* Detail */
.detail-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem; margin-bottom: 1.75rem; }
.detail-gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--lc-radius-sm); box-shadow: var(--lc-shadow); }
.amenity-list {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: .55rem 1.25rem; padding: 0; margin: 0; list-style: none;
}
.amenity-list li { display: flex; align-items: flex-start; gap: .5rem; color: var(--lc-ink); }
.amenity-list__icon { flex: none; margin-top: .1rem; color: var(--lc-teal-dark); }

/* Public-site data tables (e.g. seasonal rates) — lighter than the portal grid style */
.site .section table.table {
    width: 100%; font-size: .9rem; border: 1px solid var(--lc-line); border-radius: var(--lc-radius-sm);
    overflow: hidden; border-collapse: separate; border-spacing: 0;
}
.site .section table.table thead th {
    background: var(--lc-navy); color: #fff; font-size: .72rem; letter-spacing: .06em;
    text-transform: uppercase; padding: .6rem .8rem; position: static;
}
.site .section table.table tbody td { padding: .6rem .8rem; border-bottom: 1px solid var(--lc-line); }
.site .section table.table tbody tr:last-child td { border-bottom: 0; }
.site .section table.table tbody tr:nth-child(even) { background: var(--lc-navy-tint); }
.site .section table.table tbody tr:hover { background: color-mix(in srgb, var(--lc-teal) 8%, var(--lc-white)); }

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.gallery-grid figure { margin: 0; overflow: hidden; border-radius: var(--lc-radius-sm); }
.gallery-grid img {
    width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
    box-shadow: var(--lc-shadow); transition: transform .4s ease;
}
.gallery-grid figure:hover img { transform: scale(1.05); }
.gallery-grid figcaption { font-size: .85rem; color: var(--lc-muted); margin-top: .4rem; }

/* Availability calendar */
.availability { border: 1px solid var(--lc-line); border-radius: 6px; padding: 1rem; }
.availability__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: .8rem; }
.availability__month { font-weight: 600; }
.availability__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.availability__dow { text-align: center; font-size: .7rem; text-transform: uppercase; color: var(--lc-muted); }
.availability__cell { text-align: center; padding: .4rem 0; font-size: .85rem; border-radius: 3px; }
.availability__cell--empty { background: transparent; }
.availability__cell.is-available { background: #e6f2ef; color: var(--lc-teal); }
.availability__cell.is-blocked { background: #f3e0e0; color: #a13b3b; text-decoration: line-through; }
.availability__legend .dot { display: inline-block; width: .8rem; height: .8rem; border-radius: 2px; margin: 0 .3rem 0 .8rem; vertical-align: middle; }
.availability__legend .dot.is-available { background: #e6f2ef; }
.availability__legend .dot.is-blocked { background: #f3e0e0; }

/* Footer */
.site-footer { background: var(--lc-navy-dark); color: color-mix(in srgb, #fff 78%, var(--lc-navy)); padding: 0 0 1.75rem; margin-top: clamp(3rem, 8vw, 5rem); }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--lc-white); }
.site-footer__portal {
    padding: 1.1rem 1.25rem; border-bottom: 1px solid rgba(255,255,255,.14);
    background: color-mix(in srgb, #000 12%, transparent);
}
.site-footer__portal a { font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .82rem; }
.site-footer__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2.25rem; padding-top: 2.75rem; }
.site-footer__brand { font-family: var(--lc-font-brand); font-size: 1.9rem; color: #fff; display: block; margin-bottom: .8rem; }
.site-footer__label { text-transform: uppercase; letter-spacing: .12em; font-size: .75rem; color: #8ea6bd; margin: 0 0 .5rem; }
.site-footer__col ul { list-style: none; padding: 0; margin: 0; }
.site-footer__col li { margin-bottom: .3rem; }
.site-footer__col address { font-style: normal; }
.site-footer__coords { font-size: .8rem; color: #8ea6bd; margin-top: .5rem; }
.site-footer__legal {
    border-top: 1px solid rgba(255,255,255,.15); margin-top: 1.5rem; padding-top: 1rem; font-size: .85rem;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem;
}
.site-footer__powered { color: #8ea6bd; }
.site-footer__powered a { color: #fff; font-weight: 600; }
.site-footer__inner { padding-bottom: .5rem; }
.site-footer__col ul li { margin-bottom: .4rem; }
.site-footer__col a { transition: color .12s ease; }

/* Location map */
.location-map__canvas { height: 360px; width: 100%; border-radius: 6px; border: 1px solid var(--lc-line); background: #dde3e0; }
.location-map__address { margin-top: .6rem; color: var(--lc-muted); font-size: .9rem; }
.leaflet-container { font: inherit; }

/* Home — "why choose" accordion, FAQ, reviews */
.feature-list { display: grid; gap: .6rem; }
.feature-list details { border: 1px solid var(--lc-line); border-radius: var(--lc-radius-sm); background: #fff; box-shadow: var(--lc-shadow); }
.feature-list summary { cursor: pointer; padding: 1rem 1.15rem; font-weight: 600; color: var(--lc-navy); list-style: none; }
.feature-list summary::-webkit-details-marker { display: none; }
.feature-list summary::after { content: "+"; float: right; color: var(--lc-teal-dark); font-weight: 400; }
.feature-list details[open] summary::after { content: "–"; }
.feature-list details[open] summary { border-bottom: 1px solid var(--lc-line); }
.feature-list .feature-list__body { padding: 1rem 1.15rem 1.15rem; color: var(--lc-ink); }

.reviews { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.35rem; }
.review {
    position: relative; background: #fff; border: 1px solid var(--lc-line); border-radius: var(--lc-radius);
    padding: 1.5rem 1.5rem 1.35rem; box-shadow: var(--lc-shadow);
}
.review__stars { color: #e0a100; letter-spacing: 2px; position: relative; }
/* Decorative quote mark — scoped to the blockquote (not the whole card) so it sits
   beside the quoted text instead of floating over the star rating above it. */
.review blockquote { position: relative; margin: .5rem 0 0; padding-left: 1.4rem; }
.review blockquote::before {
    content: "\201C"; position: absolute; top: -.4rem; left: -.3rem;
    font-family: Georgia, "Times New Roman", serif; font-size: 2.5rem; line-height: 1;
    color: color-mix(in srgb, var(--lc-teal) 20%, var(--lc-white));
    pointer-events: none;
}
.review__who { margin-top: .9rem; font-size: .85rem; color: var(--lc-muted); }

/* Forms — public site (scoped to .site so the portal keeps Bootstrap defaults) */
.site .form-card {
    background: #fff; border: 1px solid var(--lc-line); border-radius: var(--lc-radius);
    box-shadow: var(--lc-shadow); padding: clamp(1.35rem, 3vw, 2rem);
}
.site .form-label { font-weight: 600; font-size: .85rem; color: var(--lc-ink); margin-bottom: .3rem; }
.site .form-control,
.site .form-select {
    border: 1px solid var(--lc-line); border-radius: var(--lc-radius-sm);
    padding: .6rem .8rem; font-size: .95rem; background-color: #fff; color: var(--lc-ink);
    transition: border-color .12s ease, box-shadow .12s ease;
}
.site .form-control::placeholder { color: color-mix(in srgb, var(--lc-muted) 70%, transparent); }
.site .form-control:hover, .site .form-select:hover { border-color: color-mix(in srgb, var(--lc-teal) 45%, var(--lc-line)); }
.site .form-control:focus,
.site .form-select:focus {
    border-color: var(--lc-teal); outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--lc-teal) 22%, transparent);
}
.site textarea.form-control { min-height: 6.5rem; resize: vertical; }
.site .form-check { padding-left: 1.7rem; }
.site .form-check-input { width: 1.05rem; height: 1.05rem; margin-left: -1.7rem; margin-top: .2rem; border-color: var(--lc-muted); }
.site .form-check-input:checked { background-color: var(--lc-teal); border-color: var(--lc-teal); }
.site .form-check-input:focus { border-color: var(--lc-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lc-teal) 22%, transparent); }
.site .form-check-label { font-size: .88rem; color: var(--lc-muted); }
.site .validation-message, .site .invalid-feedback { color: #b3261e; font-size: .82rem; margin-top: .2rem; display: block; }
.site .form-control.invalid, .site .form-control.modified.invalid { border-color: #b3261e; }
.site .enquiry-form .btn-primary, .site .form-card .btn-primary { padding-block: .6rem; }
.site .alert { border-radius: var(--lc-radius-sm); border: 1px solid transparent; }
.site .alert-success { background: #e6f2ef; border-color: color-mix(in srgb, var(--lc-teal) 30%, transparent); color: var(--lc-teal-dark); }
.site .alert-danger { background: #fdecea; border-color: #f3c9c4; color: #8a2b22; }

/* Contact details card */
.contact-card {
    background: #fff; border: 1px solid var(--lc-line); border-radius: var(--lc-radius);
    box-shadow: var(--lc-shadow); padding: clamp(1.35rem, 3vw, 1.8rem);
}
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.contact-list li { display: grid; grid-template-columns: 5.5rem 1fr; gap: .25rem 1rem; align-items: start; }
.contact-list__label {
    display: inline-flex; align-items: center; gap: .4rem;
    text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; font-weight: 700; color: var(--lc-muted); padding-top: .15rem;
}
.contact-list a { color: var(--lc-teal-dark); text-decoration: none; font-weight: 500; }
.contact-list a:hover { text-decoration: underline; }

/* Breadcrumbs */
.breadcrumbs { font-size: .85rem; color: var(--lc-muted); padding: .75rem 0 0; }
.breadcrumbs a { color: var(--lc-teal); text-decoration: none; }
.breadcrumbs span[aria-current] { color: var(--lc-ink); }

/* Lightbox */
.lc-lightbox { position: fixed; inset: 0; background: rgba(8,12,16,.92); display: none; align-items: center; justify-content: center; z-index: 1000; }
.lc-lightbox.is-open { display: flex; }
.lc-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 4px; }
.lc-lightbox__close, .lc-lightbox__nav { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; font-size: 2rem; width: 3rem; height: 3rem; border-radius: 50%; cursor: pointer; }
.lc-lightbox__close { top: 1rem; right: 1rem; }
.lc-lightbox__prev { left: 1rem; }
.lc-lightbox__next { right: 1rem; }
.lc-lightbox__nav { top: 50%; transform: translateY(-50%); }

/* Portal */
.portal { display: flex; min-height: 100vh; }
.portal-sidebar { width: 240px; background: var(--lc-navy); color: var(--lc-white); padding: var(--lc-space-5); display: flex; flex-direction: column; gap: var(--lc-space-2); }
.portal-brand {
    color: var(--lc-white); text-decoration: none;
    font-family: var(--lc-font-brand); font-size: 1.7rem; line-height: 1;
}
.portal-sidebar__label { text-transform: uppercase; font-size: .7rem; letter-spacing: .15em; opacity: .6; margin-top: 1rem; }
.portal-nav { display: flex; flex-direction: column; gap: .15rem; }

.nav-section { margin-top: .5rem; }
.nav-section__toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    background: none; border: 0; color: var(--lc-white); cursor: pointer;
    padding: .35rem .5rem; border-radius: 4px;
    text-transform: uppercase; font-size: .7rem; letter-spacing: .15em; opacity: .65;
}
.nav-section__toggle:hover { opacity: 1; background: rgba(255,255,255,.06); }
.nav-section.is-open .nav-section__toggle { opacity: .9; }
.nav-section__chev {
    width: 0; height: 0; border-left: 4px solid currentColor; border-top: 4px solid transparent;
    border-bottom: 4px solid transparent; transition: transform .12s ease;
}
.nav-section.is-open .nav-section__chev { transform: rotate(90deg); }
.nav-section__body { margin-top: .2rem; padding-left: .25rem; }
.portal-nav__link { color: #cdd7e2; text-decoration: none; padding: .4rem .5rem; border-radius: 4px; font-size: .95rem; }
.portal-nav__link:hover { background: rgba(255,255,255,.08); color: var(--lc-white); }
.portal-nav__link.active { background: var(--lc-teal); color: var(--lc-white); }
.portal-logout { margin-top: auto; }
.portal-content { flex: 1; min-width: 0; background: var(--lc-sand); }
.portal-topbar {
    background: var(--lc-white); border-bottom: 1px solid var(--lc-line);
    padding: var(--lc-space-3) var(--lc-space-6); font-size: .9rem;
    box-shadow: var(--lc-shadow-xs); position: relative; z-index: 10;
}
.portal-main { padding: var(--lc-space-8); }

/* The persistent "which scheme am I in" strip — chrome, sits between the topbar and the page. */
.scheme-context {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem;
    padding: .55rem 1.5rem; background: var(--lc-navy); color: #fff;
}
.scheme-context__id { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem .7rem; }
.scheme-context__label { text-transform: uppercase; letter-spacing: .14em; font-size: .66rem; opacity: .6; }
.scheme-context__name { font-size: 1.05rem; font-weight: 700; }
.scheme-context .scheme-switcher .form-select { min-width: 12rem; }
.scheme-context--none { background: #8a5a00; }
.scheme-context--none a { color: #fff; font-weight: 600; text-decoration: underline; }

.portal-search { position: relative; flex: 1; max-width: 26rem; }
.portal-search__icon { position: absolute; left: .65rem; top: 50%; transform: translateY(-50%); color: var(--lc-muted); pointer-events: none; }
.portal-search__input { border-radius: var(--lc-radius-pill); padding-left: 1.9rem; }
.portal-search__panel {
    position: absolute; left: 0; right: 0; top: calc(100% + .3rem); z-index: 40;
    max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid var(--lc-line);
    border-radius: 8px; box-shadow: 0 8px 28px rgba(0,0,0,.14); padding: .3rem;
}
.portal-search__group {
    padding: .45rem .6rem .2rem; font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; color: var(--lc-muted);
}
.portal-search__hit {
    display: flex; flex-direction: column; align-items: flex-start; width: 100%;
    background: none; border: 0; text-align: left; padding: .4rem .6rem; border-radius: 5px; cursor: pointer;
}
.portal-search__hit:hover { background: var(--lc-sand); }
.portal-search__hit-title { font-size: .9rem; color: var(--lc-ink); }
.portal-search__hit-sub { font-size: .75rem; color: var(--lc-muted); }
.portal-search__empty { padding: .6rem; color: var(--lc-muted); font-size: .85rem; }

.export-menu { position: relative; }
.export-menu__panel {
    position: absolute; right: 0; top: calc(100% + .25rem); z-index: 30; min-width: 16rem;
    max-height: 60vh; overflow-y: auto; background: #fff; border: 1px solid var(--lc-line);
    border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.12); padding: .35rem;
}
.export-menu__panel a { display: block; padding: .5rem .6rem; border-radius: 4px; color: var(--lc-ink); text-decoration: none; }
.export-menu__panel a:hover { background: var(--lc-sand); }
.export-menu__label {
    padding: .5rem .6rem .25rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--lc-muted);
}

.asset-photo { margin: 0; width: 140px; }
.asset-photo img { display: block; width: 140px; height: 100px; object-fit: cover; border-radius: 4px; border: 1px solid var(--lc-line); margin-bottom: .3rem; }

.stat-tile { background: var(--lc-white); border: 1px solid var(--lc-line); border-radius: 6px; padding: 1.2rem; display: flex; flex-direction: column; }
.stat-tile__value { font-size: 2rem; font-weight: 700; color: var(--lc-teal); }
.stat-tile__label { color: var(--lc-muted); font-size: .9rem; }

.audit-json { white-space: pre-wrap; word-break: break-word; font-size: .75rem; display: block; max-width: 32rem; }

/* Data tables — applied app-wide via Bootstrap's own .table/.table-responsive classes */
.table-responsive { border: 1px solid var(--lc-line); border-radius: 8px; }
/* Size to content, not a forced 100% — kills the dead space a full-width table spreads between columns.
   Wide grids (e.g. the 10-year plan) still overflow and scroll inside their .table-responsive wrapper. */
table.table { margin-bottom: 0; font-size: .82rem; line-height: 1.4; width: auto; }
table.table.w-100 { width: 100%; }
table.table thead th {
    background: var(--lc-sand); color: var(--lc-navy); font-weight: 600;
    font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid var(--lc-line) !important; white-space: nowrap;
    position: sticky; top: 0; z-index: 1;
    padding: .45rem .6rem;
}
table.table tbody td { vertical-align: middle; border-bottom-color: var(--lc-line); padding: .45rem .6rem; }
table.table tbody tr:nth-child(even) { background: #fbfaf7; }
table.table tbody tr:hover { background: #f3efe6; }

/* Right-aligned, tabular-figure numeric/currency cells */
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Visually separates a "forecast" column band (e.g. Year 1…Year N) from a row's detail columns */
table.table tbody .col-forecast { background: #eef3f1; }
table.table tbody tr:nth-child(even) .col-forecast { background: #e7edea; }
table.table thead .col-forecast { background: #e2e9e5; }
.cell-empty { color: #c4c1b8; }

/* The current financial year — highlighted as the pivot between historical and forecast columns */
table.table tbody .col-now,
table.table tbody tr:nth-child(even) .col-now { background: #d7e8e3 !important; }
table.table thead .col-now { background: #cfe3dd !important; }

/* Reserve Fund plan grid — a frozen detail pane beside an independently scrolling year band.
   The year pane owns both scrollbars: its horizontal bar sits at the bottom of the visible box
   (68vh) — always in view — and spans only the year columns, not the frozen detail columns. The
   frozen pane has no scrollbar of its own; it follows the year pane via centriva.syncPlanGrid. */
.plan-split { display: flex; align-items: stretch; width: 100%; max-height: 68vh; overflow: hidden;
    border: 1px solid var(--lc-line); border-radius: 8px; background: #fff; }
.plan-split__frozen-wrap { flex: 0 0 auto; overflow: hidden; border-right: 2px solid var(--lc-line); }
.plan-split__years-wrap { flex: 1 1 0; min-width: 0; overflow: auto; }
/* "Show fewer years": the few columns always fit, so no horizontal scrollbar — they just divide the space. */
.plan-split__years-wrap--noscroll { overflow-x: hidden; }
.plan-split table.table { margin-bottom: 0; }
.plan-split__frozen { table-layout: fixed; }
.plan-split__frozen th, .plan-split__frozen td { white-space: normal; overflow-wrap: anywhere; }
.plan-split table.plan-split__years--fill { width: 100%; table-layout: fixed; }
.plan-split table.plan-split__years--fill th,
.plan-split table.plan-split__years--fill td { white-space: normal; }
.plan-split table.plan-split__years--scroll { width: max-content; }
.plan-split table.table thead th { position: sticky; top: 0; z-index: 3; }
.plan-split__frozen tbody td { background: #fff; }
.plan-split__frozen tbody tr:nth-child(even) td { background: #fbfaf7; }

/* Prettier, quieter scrollbars on the plan grid's scroll surfaces */
.plan-split__years-wrap { scrollbar-width: thin; scrollbar-color: #b7c5c0 transparent; }
.plan-split__years-wrap::-webkit-scrollbar { width: 12px; height: 12px; }
.plan-split__years-wrap::-webkit-scrollbar-track { background: transparent; }
.plan-split__years-wrap::-webkit-scrollbar-thumb {
    background: #c3cfca; border-radius: 999px; border: 3px solid #fff; background-clip: padding-box; }
.plan-split__years-wrap::-webkit-scrollbar-thumb:hover { background: #a4b4ae; }
.plan-split__years-wrap::-webkit-scrollbar-corner { background: transparent; }

/* Compact, low-chrome row actions — a lighter alternative to a row of outlined buttons */
.row-actions { display: flex; gap: .15rem; justify-content: flex-end; white-space: nowrap; }
.btn-ghost {
    border: 0; background: transparent; color: var(--lc-muted);
    padding: .15rem .4rem; border-radius: 4px; font-size: .72rem; line-height: 1.4; cursor: pointer;
}
.btn-ghost:hover { background: var(--lc-sand); color: var(--lc-teal); }
.btn-ghost.danger { color: #a13b3b; }
.btn-ghost.danger:hover { background: #f3e0e0; color: #8a2b2b; }
.btn-ghost.accent { color: var(--lc-teal); }
.btn-ghost.accent:hover { background: #e6f2ef; color: var(--lc-navy); }
.btn-ghost.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; padding: 0;
}
.btn-ghost.icon-btn svg { width: 14px; height: 14px; }
.btn-ghost:disabled { opacity: .4; cursor: default; }
.btn-ghost:disabled:hover { background: transparent; color: var(--lc-muted); }

/* Account-setup gate — the stripped portal shown until a temp password is changed / 2FA is enrolled */
.portal-gate { min-height: 100vh; background: var(--lc-sand); display: flex; flex-direction: column; }
.portal-gate__bar {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem;
    padding: .9rem 1.5rem; background: var(--lc-navy); color: #fff;
}
.portal-gate__brand { color: #fff; text-decoration: none; font-family: var(--lc-font-brand); font-size: 1.6rem; line-height: 1; }
.portal-gate__user { font-size: .9rem; color: #cdd7e2; }
.portal-gate__user .btn-link { color: #fff; text-decoration: underline; }
.portal-gate__main { flex: 1; width: 100%; max-width: 900px; margin-inline: auto; padding: clamp(1.5rem, 5vw, 3rem) 1.25rem; }

/* Account security — authenticator QR + recovery codes */
.qr-frame {
    display: inline-block; padding: .6rem; background: #fff;
    border: 1px solid var(--lc-line); border-radius: 8px; max-width: 100%;
}
.qr-frame svg {
    display: block; width: min(240px, 100%); height: auto; aspect-ratio: 1 / 1;
}
.recovery-codes {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: .4rem .75rem; max-width: 32rem;
}
.recovery-codes code {
    background: var(--lc-sand); border: 1px solid var(--lc-line); border-radius: 4px;
    padding: .3rem .5rem; font-size: .95rem; letter-spacing: .04em; text-align: center;
    color: var(--lc-ink);
}

/* Empty state — see Components/Shared/EmptyState.razor */
.lc-empty-state {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: var(--lc-space-2); padding: var(--lc-space-12) var(--lc-space-4); color: var(--lc-muted);
}
.lc-empty-state__icon { color: var(--lc-muted); opacity: .6; }
.lc-empty-state__title { font-size: var(--lc-text-md); font-weight: var(--lc-weight-medium); color: var(--lc-ink); margin: 0; }
.lc-empty-state__desc { margin: 0; max-width: 30rem; font-size: var(--lc-text-sm); }
.lc-empty-state__actions { margin-top: var(--lc-space-2); }

/* Toast — see Components/Shared/Toast.razor, ToastHost.razor, ToastService.cs */
.lc-toast-host {
    position: fixed; top: var(--lc-space-4); right: var(--lc-space-4); z-index: 1080;   /* above Bootstrap modals (1055) and the portal drawer (1045) */
    display: flex; flex-direction: column; gap: var(--lc-space-2); width: min(22rem, 90vw);
}
.lc-toast {
    display: flex; align-items: flex-start; gap: var(--lc-space-2);
    background: var(--lc-white); border-radius: var(--lc-radius-sm); box-shadow: var(--lc-shadow-xl);
    padding: var(--lc-space-3) var(--lc-space-3); border-left: 4px solid var(--lc-info);
    animation: lc-toast-in var(--lc-duration-base) var(--lc-ease-out);
}
.lc-toast--success { border-left-color: var(--lc-success); }
.lc-toast--warning { border-left-color: var(--lc-warning); }
.lc-toast--danger { border-left-color: var(--lc-danger); }
.lc-toast__icon { flex-shrink: 0; margin-top: .1rem; color: var(--lc-info); }
.lc-toast--success .lc-toast__icon { color: var(--lc-success); }
.lc-toast--warning .lc-toast__icon { color: var(--lc-warning); }
.lc-toast--danger .lc-toast__icon { color: var(--lc-danger); }
.lc-toast__body { flex: 1; min-width: 0; }
.lc-toast__title { margin: 0; font-weight: var(--lc-weight-semibold); font-size: var(--lc-text-sm); color: var(--lc-ink); }
.lc-toast__message { margin: 0; font-size: var(--lc-text-sm); color: var(--lc-muted); }
.lc-toast__close {
    flex-shrink: 0; border: 0; background: none; padding: .1rem; color: var(--lc-muted); cursor: pointer;
    border-radius: var(--lc-radius-xs);
}
.lc-toast__close:hover { background: var(--lc-sand); color: var(--lc-ink); }
@keyframes lc-toast-in { from { opacity: 0; transform: translateY(-.5rem); } to { opacity: 1; transform: translateY(0); } }

/* Skeleton loading — see Components/Shared/Skeleton.razor */
.lc-skeleton {
    display: inline-block; background: linear-gradient(90deg, var(--lc-line) 25%, var(--lc-sand) 50%, var(--lc-line) 75%);
    background-size: 200% 100%; animation: lc-skeleton-shimmer 1.4s ease-in-out infinite;
}
.lc-skeleton--text { display: block; width: 100%; height: 1em; border-radius: var(--lc-radius-xs); }
.lc-skeleton--block { display: block; width: 100%; height: 4rem; border-radius: var(--lc-radius-sm); }
.lc-skeleton--circle { border-radius: 50%; width: 2.5rem; height: 2.5rem; }
@keyframes lc-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Status / condition pills */
.badge-pill { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .66rem; font-weight: 600; white-space: nowrap; }
.badge-pill--muted { background: #eceae3; color: var(--lc-muted); }
.badge-pill--ok { background: #e6f2ef; color: var(--lc-teal); }
.badge-pill--warn { background: #fbedd4; color: #8a5a00; }
.badge-pill--danger { background: #f3e0e0; color: #a13b3b; }
.badge-pill--info { background: #e4ecf5; color: var(--lc-navy); }

/* ---------------------------------------------------------------------------
 * Bootstrap contextual accents → the scheme palette (both themes).
 * The stock Bootstrap primary is a template blue and .text-bg-info is a loud
 * cyan; neither is in the navy/teal palette. Point them (and inline <code>) at
 * the brand tokens, and soften the .text-bg-* chips to match .badge-pill.
 * ------------------------------------------------------------------------- */
:root {
    --bs-code-color: var(--lc-teal-dark);
}

/* "Selected" states — align with the portal sidebar's teal, not template blue */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link,
.list-group-item.active {
    background-color: var(--lc-teal);
    border-color: var(--lc-teal);
    color: #fff;
}
.nav-tabs .nav-link.active { color: var(--lc-teal-dark); border-bottom-color: var(--lc-teal); }

/* Solid contextual chips → the app's soft-pill look (matches .badge-pill--*),
   so every status chip reads the same regardless of which class a page used. */
.badge.text-bg-secondary { background-color: #eceae3 !important; color: var(--lc-muted) !important; }
.badge.text-bg-info { background-color: #e4ecf5 !important; color: var(--lc-navy) !important; }
.badge.text-bg-primary { background-color: var(--lc-teal-tint) !important; color: var(--lc-teal-dark) !important; }
.badge.text-bg-success { background-color: #e6f2ef !important; color: var(--lc-teal-dark) !important; }
.badge.text-bg-warning { background-color: #fbedd4 !important; color: #8a5a00 !important; }
.badge.text-bg-danger { background-color: #f3e0e0 !important; color: #a13b3b !important; }
.badge.text-bg-dark { background-color: var(--lc-navy) !important; color: #fff !important; }

/* Primary + outline-primary buttons → brand teal (the public .site already themes
   its own; the portal previously inherited the Blazor template's blue). */
.btn-primary {
    --bs-btn-bg: var(--lc-teal);
    --bs-btn-border-color: var(--lc-teal);
    --bs-btn-hover-bg: var(--lc-teal-dark);
    --bs-btn-hover-border-color: var(--lc-teal-dark);
    --bs-btn-active-bg: var(--lc-teal-dark);
    --bs-btn-active-border-color: var(--lc-teal-dark);
    --bs-btn-disabled-bg: var(--lc-teal);
    --bs-btn-disabled-border-color: var(--lc-teal);
    --bs-btn-focus-shadow-rgb: 47, 125, 138;
}
.btn-outline-primary {
    --bs-btn-color: var(--lc-teal-dark);
    --bs-btn-border-color: var(--lc-teal);
    --bs-btn-hover-bg: var(--lc-teal);
    --bs-btn-hover-border-color: var(--lc-teal);
    --bs-btn-active-bg: var(--lc-teal);
    --bs-btn-active-border-color: var(--lc-teal);
    --bs-btn-focus-shadow-rgb: 47, 125, 138;
}
[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-color: #7fc9c0; --bs-btn-hover-color: #fff; }

@media (max-width: 800px) {
    .portal { flex-direction: column; }
    .portal-sidebar { width: auto; }
    .hero .container { max-width: none; }

    .site-header__inner { min-height: 62px; position: relative; }

    .site-nav-toggle {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; margin-right: -.35rem;
        border-radius: 10px; cursor: pointer; color: var(--lc-navy); z-index: 40;
    }
    .site-nav-toggle:hover { background: var(--lc-navy-tint); }
    .site-nav-toggle__bars, .site-nav-toggle__bars::before, .site-nav-toggle__bars::after {
        content: ""; display: block; width: 22px; height: 2px; border-radius: 2px; background: currentColor;
        transition: transform .18s ease, opacity .12s ease;
    }
    .site-nav-toggle__bars { position: relative; }
    .site-nav-toggle__bars::before { position: absolute; left: 0; top: -7px; }
    .site-nav-toggle__bars::after  { position: absolute; left: 0; top: 7px; }

    .site-nav-scrim {
        display: block; position: fixed; inset: 0; z-index: 25;
        background: rgba(10, 20, 30, .35); opacity: 0; pointer-events: none; transition: opacity .18s ease;
    }
    .site-nav {
        display: flex; flex-direction: column; align-items: stretch; gap: .1rem;
        position: absolute; right: 0; top: calc(100% + .5rem); z-index: 30;
        width: min(80vw, 19rem); padding: .5rem;
        background: #fff; border: 1px solid var(--lc-line); border-radius: 14px; box-shadow: var(--lc-shadow-lg);
        transform-origin: top right; transform: scale(.96); opacity: 0; pointer-events: none;
        transition: transform .16s ease, opacity .16s ease;
    }
    .site-nav__link { padding: .72rem .8rem; border-radius: 8px; border-bottom: 0; }
    .site-nav__link:hover, .site-nav__link.active { background: var(--lc-navy-tint); border-bottom: 0; color: var(--lc-teal-dark); }
    .site-nav__cta { text-align: center; margin-top: .4rem; }
    .site-nav__link--portal { margin-top: .1rem; border-top: 1px solid var(--lc-line); border-radius: 0; padding-top: .85rem; }

    .site-nav-checkbox:checked ~ .site-nav { transform: scale(1); opacity: 1; pointer-events: auto; }
    .site-nav-checkbox:checked ~ .site-nav-scrim { opacity: 1; pointer-events: auto; }
    .site-nav-checkbox:checked ~ .site-nav-toggle .site-nav-toggle__bars { background: transparent; }
    .site-nav-checkbox:checked ~ .site-nav-toggle .site-nav-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
    .site-nav-checkbox:checked ~ .site-nav-toggle .site-nav-toggle__bars::after  { transform: translateY(-7px) rotate(-45deg); }
}

@media (prefers-reduced-motion: reduce) {
    :root { --lc-duration-fast: 0ms; --lc-duration-base: 0ms; --lc-duration-slow: 0ms; }
    .site .btn-primary, .site-nav__cta,
    .site .card, .unit-card__img, .special-card__img, .facility-card__img, .gallery-grid img { transition: none; }
    .site .card:hover { transform: none; }
    .site .card:hover :where(.unit-card__img, .special-card__img, .facility-card__img),
    .gallery-grid figure:hover img { transform: none; }
    .lc-skeleton { animation: none; }
}

/* ---------------------------------------------------------------------------
 * Dark mode (portal / admin only — the public marketing site stays light).
 * Bootstrap 5.3 [data-bs-theme=dark] flips the cards, tables, forms, text and
 * --bs-* tokens; this block re-points the handful of hard-coded portal-chrome
 * surfaces (which use --lc-* light neutrals) at the Bootstrap dark tokens.
 * ------------------------------------------------------------------------- */
[data-bs-theme="dark"] .portal-content { background: var(--bs-body-bg); }
[data-bs-theme="dark"] .portal-topbar {
    background: var(--bs-tertiary-bg);
    border-bottom-color: var(--bs-border-color);
    color: var(--bs-body-color);
}
[data-bs-theme="dark"] .portal-gate { background: var(--bs-body-bg); }
[data-bs-theme="dark"] .portal-search__panel {
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
}
[data-bs-theme="dark"] .portal-search__hit:hover { background: var(--bs-secondary-bg); }
[data-bs-theme="dark"] .portal-search__hit-title { color: var(--bs-body-color); }
[data-bs-theme="dark"] .portal-search__hit-sub,
[data-bs-theme="dark"] .portal-search__group,
[data-bs-theme="dark"] .portal-search__empty { color: var(--bs-secondary-color); }

/* Re-point the --lc-* neutral tokens at the Bootstrap dark equivalents so every
   --lc-ink / --lc-muted / --lc-line / --lc-sand consumer flips with the theme —
   this is what makes page headings (which inherit the body colour) readable.
   --lc-navy / --lc-teal / --lc-white are deliberately left alone: they paint the
   portal chrome (sidebar, top bands, active nav) and must stay as they are. */
[data-bs-theme="dark"] {
    --lc-ink: var(--bs-body-color);
    --lc-muted: var(--bs-secondary-color);
    --lc-line: var(--bs-border-color);
    --lc-sand: var(--bs-tertiary-bg);

    /* Mirrors the existing .badge-pill--* dark values below, so the new semantic tokens
       and the old badge pills read identically. */
    --lc-success: #74d9ad;
    --lc-success-bg: rgba(80, 190, 150, .18);
    --lc-warning: #e6b45c;
    --lc-warning-bg: rgba(220, 165, 45, .18);
    --lc-danger: #eb9090;
    --lc-danger-bg: rgba(222, 95, 95, .18);
    --lc-info: #93b8f0;
    --lc-info-bg: rgba(95, 150, 230, .18);
}
/* The public marketing site pins itself to data-bs-theme="light" but still sits
   inside the dark <html>, so it inherits the re-point above. Restore the light
   --lc-* values on any explicitly-light subtree (mirrors the :root defaults). */
[data-bs-theme="light"] {
    --lc-ink: #1f2933;
    --lc-muted: #5b6875;
    --lc-line: #e5e0d6;
    --lc-sand: #f6f3ec;
    --bs-code-color: var(--lc-teal-dark);

    /* Mirrors the :root defaults — without this, the public site (pinned to data-bs-theme="light")
       would inherit the dark-mode semantic tokens above on a dark-OS visitor. */
    --lc-success: var(--lc-teal-dark);
    --lc-success-bg: #e6f2ef;
    --lc-warning: #8a5a00;
    --lc-warning-bg: #fbedd4;
    --lc-danger: #a13b3b;
    --lc-danger-bg: #f3e0e0;
    --lc-info: var(--lc-navy);
    --lc-info-bg: #e4ecf5;
}
[data-bs-theme="dark"] body { color: var(--bs-body-color); background: var(--bs-body-bg); }
[data-bs-theme="dark"] .portal-content :where(h1, h2, h3, h4, h5, h6) { color: var(--bs-emphasis-color); }

/* Data tables — the zebra / hover / forecast-band / current-year fills are all
   hard-coded pale tints; recast them as low-alpha overlays on the dark surface. */
[data-bs-theme="dark"] table.table thead th { background: var(--bs-tertiary-bg); color: var(--bs-emphasis-color); }
[data-bs-theme="dark"] table.table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .03); }
[data-bs-theme="dark"] table.table tbody tr:hover { background: rgba(255, 255, 255, .07); }
[data-bs-theme="dark"] table.table tbody .col-forecast { background: rgba(95, 175, 165, .10); }
[data-bs-theme="dark"] table.table tbody tr:nth-child(even) .col-forecast { background: rgba(95, 175, 165, .15); }
[data-bs-theme="dark"] table.table thead .col-forecast { background: rgba(95, 175, 165, .20); }
[data-bs-theme="dark"] table.table tbody .col-now,
[data-bs-theme="dark"] table.table tbody tr:nth-child(even) .col-now { background: rgba(80, 200, 175, .22) !important; }
[data-bs-theme="dark"] table.table thead .col-now { background: rgba(80, 200, 175, .30) !important; }
[data-bs-theme="dark"] .cell-empty { color: var(--bs-secondary-color); }

/* Reserve-fund plan split grid — its panes hard-code white */
[data-bs-theme="dark"] .plan-split { background: var(--bs-body-bg); }
[data-bs-theme="dark"] .plan-split__frozen tbody td { background: var(--bs-body-bg); }
[data-bs-theme="dark"] .plan-split__frozen tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .03); }
[data-bs-theme="dark"] .plan-split__years-wrap { scrollbar-color: #566670 transparent; }
[data-bs-theme="dark"] .plan-split__years-wrap::-webkit-scrollbar-thumb {
    background: #46555e; border-color: var(--bs-body-bg); }
[data-bs-theme="dark"] .plan-split__years-wrap::-webkit-scrollbar-thumb:hover { background: #5a6b74; }

/* New shared components — toast / skeleton hard-code light-mode surfaces */
[data-bs-theme="dark"] .lc-toast { background: var(--bs-tertiary-bg); box-shadow: 0 4px 12px rgba(0, 0, 0, .3), 0 32px 64px -20px rgba(0, 0, 0, .6); }
[data-bs-theme="dark"] .lc-toast__title { color: var(--bs-emphasis-color); }
[data-bs-theme="dark"] .lc-toast__close:hover { background: var(--bs-secondary-bg); color: var(--bs-emphasis-color); }
[data-bs-theme="dark"] .lc-skeleton { background: linear-gradient(90deg, var(--bs-secondary-bg) 25%, var(--bs-tertiary-bg) 50%, var(--bs-secondary-bg) 75%); background-size: 200% 100%; }
[data-bs-theme="dark"] .lc-empty-state__title { color: var(--bs-emphasis-color); }

/* Cards / chips / framed boxes that hard-code white or pale fills */
[data-bs-theme="dark"] .stat-tile { background: var(--bs-secondary-bg); }
[data-bs-theme="dark"] .qr-frame,
[data-bs-theme="dark"] .recovery-codes code { background: var(--bs-secondary-bg); color: var(--bs-body-color); }
[data-bs-theme="dark"] .badge-pill--muted { background: rgba(255, 255, 255, .09); color: var(--bs-secondary-color); }
[data-bs-theme="dark"] .badge-pill--ok { background: rgba(80, 190, 150, .18); color: #74d9ad; }
[data-bs-theme="dark"] .badge-pill--warn { background: rgba(220, 165, 45, .18); color: #e6b45c; }
[data-bs-theme="dark"] .badge-pill--danger { background: rgba(222, 95, 95, .18); color: #eb9090; }
[data-bs-theme="dark"] .badge-pill--info { background: rgba(95, 150, 230, .18); color: #93b8f0; }

/* Floating panels that hard-code white (the search panel is handled above) */
[data-bs-theme="dark"] .export-menu__panel { background: var(--bs-body-bg); border-color: var(--bs-border-color); }

/* Ghost row-action buttons — the tinted hover fills for danger / accent */
[data-bs-theme="dark"] .btn-ghost.danger:hover { background: rgba(222, 95, 95, .16); color: #eb9090; }
[data-bs-theme="dark"] .btn-ghost.accent:hover { background: rgba(95, 175, 165, .16); color: var(--bs-emphasis-color); }

/* Bootstrap contextual utilities that are NOT theme-aware in 5.3 — used for table
   group-header rows (.table-light) and small count chips (.text-bg-light / .bg-light). */
[data-bs-theme="dark"] .table-light {
    --bs-table-color: var(--bs-emphasis-color);
    --bs-table-bg: var(--bs-tertiary-bg);
    --bs-table-border-color: var(--bs-border-color);
    color: var(--bs-emphasis-color);
}
[data-bs-theme="dark"] .bg-light { background-color: var(--bs-tertiary-bg) !important; }

/* Contextual chips + inline <code> on the dark surface — same soft-pill palette
   as light mode, recast as low-alpha overlays. */
[data-bs-theme="dark"] { --bs-code-color: #7fc9c0; }
[data-bs-theme="dark"] .nav-tabs .nav-link.active { color: #7fc9c0; }
/* The bare `a { color: var(--lc-teal-dark) }` is too dark on the dark surface
   (~2.5:1). Lighten links in the content area; the navy sidebar keeps its own. */
[data-bs-theme="dark"] .portal-content a:not(.btn):not(.nav-link) { color: #7fc9c0; }
[data-bs-theme="dark"] .badge.text-bg-light,
[data-bs-theme="dark"] .badge.text-bg-secondary { background-color: rgba(255, 255, 255, .09) !important; color: var(--bs-secondary-color) !important; }
[data-bs-theme="dark"] .badge.text-bg-info { background-color: rgba(95, 150, 230, .18) !important; color: #93b8f0 !important; }
[data-bs-theme="dark"] .badge.text-bg-primary { background-color: rgba(95, 175, 165, .18) !important; color: #7fc9c0 !important; }
[data-bs-theme="dark"] .badge.text-bg-success { background-color: rgba(80, 190, 150, .18) !important; color: #74d9ad !important; }
[data-bs-theme="dark"] .badge.text-bg-warning { background-color: rgba(220, 165, 45, .18) !important; color: #e6b45c !important; }
[data-bs-theme="dark"] .badge.text-bg-danger { background-color: rgba(222, 95, 95, .18) !important; color: #eb9090 !important; }
[data-bs-theme="dark"] .badge.text-bg-dark { background-color: rgba(255, 255, 255, .14) !important; color: var(--bs-emphasis-color) !important; }

/* ---------------------------------------------------------------------------
 * Product showcase (ProductShowcase.razor) — an illustrative browser window that cycles four
 * screens. Pure CSS. Everything inside is sized in em off one font-size so the whole window scales
 * with its column (container query units); hover pauses; reduced-motion shows one static slide.
 * ------------------------------------------------------------------------- */
.showcase { margin: 0; container-type: inline-size; position: relative; }
.showcase__frame {
    font-size: clamp(8px, 2.05cqw, 13px); font-family: var(--lc-font-head);
    background: #f4f6f8; border-radius: 1.1em; overflow: hidden; color: #1f2933;
    box-shadow: 0 2.2em 4.5em -1.2em rgba(4, 14, 24, .65), 0 0 0 1px rgba(255, 255, 255, .14);
    transform: perspective(1500px) rotateY(-5deg) rotateX(1.5deg);
    transform-origin: 30% 50%; transition: transform .5s var(--lc-ease-standard);
}
.showcase:hover .showcase__frame { transform: perspective(1500px) rotateY(-1deg) rotateX(0); }
.showcase__chrome { display: flex; align-items: center; gap: .9em; padding: .8em 1em; background: #e6eaee; border-bottom: 1px solid #d5dbe1; }
.showcase__dots { display: inline-flex; gap: .4em; }
.showcase__dots i { width: .75em; height: .75em; border-radius: 50%; background: #c3cad2; }
.showcase__url { flex: 1; text-align: center; font-size: .85em; color: #5b6875; background: #f7f9fa; border-radius: 2em; padding: .3em 1em; max-width: 60%; margin-inline: auto; }
.showcase__sample { font-size: .72em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8a5a00; background: #fbedd4; border-radius: 2em; padding: .3em .8em; }
.showcase__screen { display: grid; grid-template-columns: 11.5em 1fr; height: 25em; }
.sc-side { background: #17324a; color: #cdd7e2; padding: 1.1em .9em; display: flex; flex-direction: column; gap: .35em; font-size: .9em; }
.sc-side__brand { color: #fff; font-weight: 700; font-size: 1.1em; margin-bottom: .8em; }
.sc-side__item { padding: .45em .6em; border-radius: .4em; }
.sc-side__item:first-of-type { background: #2f7d8a; color: #fff; }
.sc-main { position: relative; overflow: hidden; }
.sc-track { display: flex; height: 100%; transform: translateX(calc(var(--i, 0) * -100%)); transition: transform .6s cubic-bezier(.65, 0, .35, 1); }
.showcase__slide { flex: 0 0 100%; min-width: 0; padding: 1.3em 1.5em; overflow: hidden; }
.sc-main { touch-action: pan-y; }
.showcase__arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: none; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, .92); color: #17324a; box-shadow: 0 2px 10px rgba(4, 14, 24, .3);
    opacity: 0; transition: opacity .2s ease, background-color .15s ease;
}
.showcase__arrow--prev { left: .6rem; }
.showcase__arrow--next { right: .6rem; }
.showcase.is-enhanced .showcase__arrow { display: inline-flex; }
.showcase.is-enhanced:hover .showcase__arrow, .showcase__arrow:focus-visible { opacity: 1; }
.showcase__arrow:hover { background: #fff; }.sc-title { font-size: 1.45em; font-weight: 700; color: #17324a; margin: 0 0 .8em; letter-spacing: -.01em; }
.sc-title em { font-style: normal; font-weight: 500; color: #5b6875; font-size: .75em; }
.sc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; margin-bottom: 1em; }
.sc-tile { background: #fff; border: 1px solid #e5e0d6; border-radius: .7em; padding: .9em 1em; display: flex; flex-direction: column; }
.sc-tile b { font-size: 1.9em; color: #2f7d8a; line-height: 1.1; }
.sc-tile span { font-size: .85em; color: #5b6875; margin-top: .3em; }
.sc-card { background: #fff; border: 1px solid #e5e0d6; border-radius: .7em; padding: .9em 1em; }
.sc-card__head { font-weight: 700; color: #17324a; margin-bottom: .5em; display: flex; justify-content: space-between; }
.sc-card__head em { font-style: normal; font-weight: 500; color: #5b6875; }
.sc-line { display: flex; justify-content: space-between; align-items: center; padding: .5em 0; border-top: 1px solid #eef0f2; font-size: .95em; }
.sc-line--ok span:last-child { color: #1c7a5e; font-weight: 600; }
.sc-line--muted { color: #5b6875; }
.sc-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e5e0d6; border-radius: .7em; overflow: hidden; font-size: .92em; font-variant-numeric: tabular-nums; }
.sc-table th { background: #f6f3ec; color: #17324a; font-size: .8em; text-transform: uppercase; letter-spacing: .04em; text-align: right; padding: .55em .7em; }
.sc-table th:first-child, .sc-table td:first-child { text-align: left; }
.sc-table td { text-align: right; padding: .55em .7em; border-top: 1px solid #eef0f2; }
.sc-table--wide th, .sc-table--wide td { text-align: left; }
.sc-table--wide th:last-child, .sc-table--wide td:last-child { text-align: right; }
.sc-warn td { background: #fdf6e6; }
.sc-bad td { background: #f9e7e7; }
.sc-total td { font-weight: 700; background: #f6f3ec; color: #17324a; }
.sc-foot { display: flex; justify-content: space-between; align-items: center; margin-top: .8em; font-size: .9em; color: #5b6875; }
.sc-pill { display: inline-block; font-style: normal; font-weight: 600; font-size: .78em; border-radius: 2em; padding: .2em .8em; white-space: nowrap; }
.sc-pill--ok { background: #e6f2ef; color: #1c7a5e; }
.sc-pill--warn { background: #fbedd4; color: #8a5a00; }
.sc-pill--bad { background: #f3e0e0; color: #a13b3b; }
.sc-pill--info { background: #e4ecf5; color: #17324a; }
.sc-pill--muted { background: #eceae3; color: #5b6875; }
.sc-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7em; height: calc(100% - 3em); }
.sc-col { background: #eaeef2; border-radius: .7em; padding: .7em; display: flex; flex-direction: column; gap: .6em; }
.sc-col h5 { margin: 0; font-size: .8em; text-transform: uppercase; letter-spacing: .06em; color: #5b6875; }
.sc-job { background: #fff; border: 1px solid #e0e5ea; border-radius: .55em; padding: .65em .7em; display: flex; flex-direction: column; gap: .25em; font-size: .9em; }
.sc-job b { color: #17324a; }
.sc-job span { color: #5b6875; font-size: .9em; }
.sc-job i { align-self: flex-start; margin-top: .25em; }
.sc-job--done { opacity: .75; }

.showcase__controls { display: none; align-items: flex-start; gap: .8rem; margin-top: 1rem; }
.showcase.is-enhanced .showcase__controls { display: flex; }
.showcase__tabs { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.showcase__tab {
    position: relative; display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
    font: inherit; font-size: var(--lc-text-xs); font-weight: var(--lc-weight-semibold); letter-spacing: .04em;
    color: rgba(255, 255, 255, .6); padding: .7rem 0 .2rem; transition: color .2s ease;
}
.showcase__tab:hover, .showcase__tab.is-active { color: #fff; }
.showcase__tab::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .2); }
.showcase__bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px; background: #7fdbe6; transform: scaleX(0); transform-origin: left; }
.showcase__tab.is-active .showcase__bar { animation: sc-progress var(--sc-interval, 6s) linear forwards; }
.showcase[data-paused] .showcase__bar { animation-play-state: paused; }
@keyframes sc-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.showcase__tab:focus-visible, .showcase__toggle:focus-visible, .showcase__arrow:focus-visible { outline: 2px solid #7fdbe6; outline-offset: 2px; }
.showcase__toggle {
    flex: none; margin-top: .35rem; display: inline-flex; align-items: center; justify-content: center;
    width: 2rem; height: 2rem; padding: 0; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .3); color: #fff;
}
.showcase__toggle:hover { background: rgba(255, 255, 255, .22); }
.showcase__toggle-pause, .showcase__toggle-play { align-items: center; justify-content: center; }
.showcase__toggle-pause { display: inline-flex; }
.showcase__toggle-play { display: none; }
.showcase__toggle.is-paused .showcase__toggle-pause { display: none; }
.showcase__toggle.is-paused .showcase__toggle-play { display: inline-flex; }

@media (max-width: 1024px) {
    .showcase { max-width: 40rem; }
    .showcase__frame { transform: none; }
}
@media (max-width: 600px) {
    .showcase__screen { grid-template-columns: 1fr; height: 27em; }
    .sc-side { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .showcase__frame { transform: none; }
    .sc-track { transition: none; }
    /* The bar is also the autoplay timer, so keep it running (Play must work) but invisible: no motion shown. */
    .showcase__bar { opacity: 0; }
}

/* Centriva's own wordmark — the script face belongs to the holiday-letting tenant sites; the platform
   speaks in the sans display face, paired with the new mark. */
.site--platform .site-brand__name, .site--platform .site-footer__brand {
    font-family: var(--lc-font-head); font-weight: var(--lc-weight-bold); letter-spacing: -.03em; line-height: 1;
}
.site--platform .site-brand__name { font-size: 1.6rem; }
.site--platform .site-footer__brand { display: inline-flex; align-items: center; gap: .6rem; font-size: 1.5rem; }
.sc-actions { display: flex; align-items: center; gap: .6em; margin-top: 1.2em; }
.sc-btn { font-size: .9em; font-weight: 600; padding: .5em 1.1em; border-radius: .5em; background: #2f7d8a; color: #fff; }
.sc-btn--off { background: #dfe4e8; color: #8b96a1; }
.sc-btn:not(.sc-btn--off) { background: #fff; color: #17324a; border: 1px solid #cdd5dc; }
.sc-note { font-size: .82em; color: #5b6875; margin-left: auto; }

/* ---------------------------------------------------------------------------
 * Centriva marketing site - bento module grid, dark bands, eyebrow labels.
 * Varied tile sizes/surfaces give the page a rhythm the uniform card grid didn't; the big tiles carry
 * small CSS visuals (a balanced ledger, a 10-year bar chart) instead of stock imagery.
 * ------------------------------------------------------------------------- */
.eyebrow { text-transform: uppercase; letter-spacing: .2em; font-size: var(--lc-text-xs); font-weight: var(--lc-weight-bold); color: var(--lc-teal-dark); margin: 0 0 var(--lc-space-2); }
.eyebrow--light { color: #7fdbe6; }

.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(13.5rem, auto)); gap: var(--lc-space-4); }
.bento__tile {
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    background: #fff; border: 1px solid var(--lc-line); border-radius: var(--lc-radius-lg); padding: var(--lc-space-6);
    transition: transform var(--lc-duration-base) var(--lc-ease-standard), box-shadow var(--lc-duration-base) var(--lc-ease-standard);
}
.bento__tile:hover { transform: translateY(-3px); box-shadow: var(--lc-shadow-lg); }
.bento__tile--financials { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.bento__tile--owner-portal { grid-column: 3 / span 2; grid-row: 1; }
.bento__tile--website { grid-column: 3; grid-row: 2; }
.bento__tile--ten-year-plan { grid-column: 4; grid-row: 2 / span 2; }
.bento__tile--documents { grid-column: 1; grid-row: 3; }
.bento__tile--maintenance { grid-column: 2; grid-row: 3; }
.bento__tile--budgets { grid-column: 3; grid-row: 3; }

.bento__icon {
    display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
    width: 2.75rem; height: 2.75rem; border-radius: var(--lc-radius-sm);
    background: var(--lc-teal-tint); color: var(--lc-teal-dark); margin-bottom: var(--lc-space-4);
}
.bento__name { font-size: var(--lc-text-lg); color: var(--lc-navy); margin: 0 0 var(--lc-space-2); letter-spacing: -.01em; }
.bento__blurb { color: var(--lc-muted); font-size: var(--lc-text-sm); line-height: var(--lc-leading-normal); margin: 0; }
.bento__viz { margin-top: auto; padding-top: var(--lc-space-5); }

/* The lead tile: dark, with a glow, carrying the ledger visual. */
.bento__tile--financials {
    color: #fff; border-color: transparent;
    background: radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--lc-teal) 55%, transparent), transparent 55%), linear-gradient(160deg, var(--lc-navy), var(--lc-navy-dark));
}
.bento__tile--financials .bento__name { color: #fff; font-size: var(--lc-text-2xl); }
.bento__tile--financials .bento__blurb { color: rgba(255, 255, 255, .78); font-size: var(--lc-text-base); max-width: 30rem; }
.bento__tile--financials .bento__icon { background: rgba(79, 195, 209, .18); color: #7fdbe6; }
.bento__tile--owner-portal { background: linear-gradient(135deg, var(--lc-teal-tint), #fff 70%); }
.bento__tile--ten-year-plan { background: linear-gradient(180deg, #fff, var(--lc-navy-tint)); }

.bv-ledger { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--lc-radius); font-variant-numeric: tabular-nums; font-size: var(--lc-text-sm); overflow: hidden; }
.bv-ledger__row { display: grid; grid-template-columns: 1.7fr 1fr 1fr; padding: .55rem .9rem; border-top: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .9); }
.bv-ledger__row > span:not(:first-child) { text-align: right; }
.bv-ledger__head { border-top: 0; font-size: var(--lc-text-xs); text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .55); }
.bv-ledger__sum { background: rgba(79, 195, 209, .16); font-weight: var(--lc-weight-bold); color: #fff; }
.bv-ledger__ok { color: #7fdbe6; }
.bv-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lc-space-2); }
.bv-tiles span { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--lc-line); border-radius: var(--lc-radius-sm); padding: .6rem .75rem; font-size: var(--lc-text-xs); color: var(--lc-muted); }
.bv-tiles b { font-size: var(--lc-text-lg); color: var(--lc-teal-dark); line-height: 1.2; }
.bv-bars { display: flex; align-items: flex-end; gap: .3rem; height: 7.5rem; }
.bv-bars i { flex: 1; border-radius: .25rem .25rem 0 0; background: linear-gradient(180deg, #4fc3d1, var(--lc-teal)); }
.bv-site { display: grid; gap: .4rem; }
.bv-site i { display: block; height: .5rem; border-radius: 1rem; background: var(--lc-line); }
.bv-site i:nth-child(1) { width: 80%; background: color-mix(in srgb, var(--lc-teal) 35%, var(--lc-line)); }
.bv-site i:nth-child(2) { width: 100%; }
.bv-site i:nth-child(3) { width: 60%; }

@media (max-width: 1024px) {
    .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(12rem, auto); }
    .bento__tile { grid-column: auto !important; grid-row: auto !important; }
    .bento__tile--financials, .bento__tile--owner-portal { grid-column: 1 / -1 !important; }
}
@media (max-width: 600px) {
    .bento { grid-template-columns: 1fr; }
    .bento__tile--financials, .bento__tile--owner-portal { grid-column: auto !important; }
}

/* Dark bands - the same faint ledger grid as the hero, so the page alternates light/dark with intent. */
.band-dark { position: relative; overflow: hidden; color: #fff; padding: clamp(3.5rem, 8vw, 6rem) 0; background: linear-gradient(160deg, var(--lc-navy), var(--lc-navy-dark)); }
.band-dark::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 48px 48px; mask-image: radial-gradient(ellipse 70% 100% at 80% 20%, #000 10%, transparent 70%);
}
.band-dark > .container { position: relative; }
.band-dark .section__title { color: #fff; }
.band-dark .section__title::after { background: #4fc3d1; }
.band-dark .trust-item h3 { color: #fff; }
.band-dark .trust-item p { color: rgba(255, 255, 255, .74); }
.band-dark .trust-item__icon { background: rgba(79, 195, 209, .16); color: #7fdbe6; }
.band-dark--cta::after { content: ""; position: absolute; right: -5rem; top: 50%; width: 24rem; aspect-ratio: 1; transform: translateY(-50%); background: url("/img/centriva-mark.svg") no-repeat center / contain; opacity: .07; pointer-events: none; }
.band-dark--cta .lead { color: rgba(255, 255, 255, .82); }
.site--platform .site-footer { margin-top: 0; }
/* Financials tile: the module's real capabilities as chips; a caption under the 10-year bars. */
.bv-chips { list-style: none; margin: var(--lc-space-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--lc-space-2); }
.bv-chips li { font-size: var(--lc-text-xs); font-weight: var(--lc-weight-semibold); letter-spacing: .02em; color: #d6f4f8; background: rgba(79, 195, 209, .14); border: 1px solid rgba(79, 195, 209, .3); border-radius: var(--lc-radius-pill); padding: .3rem .8rem; }
.bv-caption { margin: var(--lc-space-2) 0 0; font-size: var(--lc-text-xs); color: var(--lc-muted); letter-spacing: .04em; }

/* Sections on the platform site: `.section`'s padding shorthand zeroes `.container`'s side padding, which
   pushes section content 20px outside the header/hero edge. Restore it here (tenant sites are unchanged). */
.site--platform .container.section { padding-inline: 1.25rem; }
/* Closing CTA: a brand-teal band so trust (navy) -> CTA (teal) -> footer (navy) reads as three moments,
   not one dark slab. `.site p.lead` out-specifies a bare class, so the lead colour is set with `.site`. */
.site .band-dark--cta { background: linear-gradient(135deg, #1d5c68, var(--lc-teal) 55%, #3c95a3); }
.site .band-dark--cta .lead { color: rgba(255, 255, 255, .92); }
.site .band-dark--cta .section__title::after { background: #fff; }
.site .band-dark--cta .btn-primary, .site .band-dark--cta .btn-primary:visited { background: #fff; border-color: #fff; color: var(--lc-navy); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .45); }
.site .band-dark--cta .btn-primary:hover { background: var(--lc-navy); border-color: var(--lc-navy); color: #fff; }
.band-dark--cta::after { opacity: .12; }
/* Touch devices have no hover, so the arrows stay visible. */
@media (hover: none) { .showcase.is-enhanced .showcase__arrow { opacity: .92; } }

/* ---------------------------------------------------------------------------
 * Portal building blocks (Phase 4): StatusPill accent tone, PortalPageHeader, skeletons, PortalModal,
 * clickable rows, and named replacements for the inline styles the portal repeated.
 * ------------------------------------------------------------------------- */
.badge-pill--accent { background: var(--lc-teal-tint); color: var(--lc-teal-dark); }
[data-bs-theme="dark"] .badge-pill--accent { background: rgba(95, 175, 165, .18); color: #7fc9c0; }

.portal-page-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--lc-space-3) var(--lc-space-6); margin-bottom: var(--lc-space-5); }
.portal-page-header__text { min-width: 0; }
.portal-page-header h1 { margin: 0; }
.portal-page-header__sub { margin: var(--lc-space-1) 0 0; color: var(--lc-muted); font-size: var(--lc-text-sm); }
.portal-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lc-space-2); }

.lc-table-skeleton { display: grid; gap: var(--lc-space-3); border: 1px solid var(--lc-line); border-radius: var(--lc-radius-sm); padding: var(--lc-space-4); }
.lc-table-skeleton__row { display: grid; grid-template-columns: repeat(var(--sk-cols, 5), 1fr); gap: var(--lc-space-4); }
.lc-stat-skeleton { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--lc-space-4); }
.lc-stat-skeleton .stat-tile { gap: var(--lc-space-2); }

/* PortalModal: Bootstrap's .modal + .d-block with a scrim, replacing the 16 hand-written inline backgrounds. */
.portal-modal-scrim { background: rgba(0, 0, 0, .5); overflow-y: auto; }
.portal-modal-scrim .modal-dialog:focus { outline: none; }
/* A confirmation can be raised from inside another dialog (e.g. removing a photo in the asset editor): it must sit above it. */
.portal-modal-scrim--alert { z-index: 1070; }

/* Clickable table rows must be reachable and visibly focused for keyboard users (see RowActivation). */
.table-clickable { cursor: pointer; }
.table-clickable:focus-visible { outline: 2px solid var(--lc-teal); outline-offset: -2px; background: var(--lc-teal-tint); }

/* Named widths - replace repeated inline max-width / width styles. */
.form-narrow { max-width: 22rem; }
.form-medium { max-width: 35rem; }
.form-wide { max-width: 51rem; }
.col-w-5 { width: 5rem; }
.col-w-9 { width: 9rem; }
.mw-12 { max-width: 12rem; }
.mw-14 { max-width: 14rem; }
.mw-20 { max-width: 20rem; }
.mw-24 { max-width: 24rem; }
.mw-33 { max-width: 33rem; }
.mw-40 { max-width: 40rem; }
/* Thumbnails: a fixed-ratio photo that never distorts (unit gallery, review queue, media library). */
.media-thumb { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.media-thumb--sm { width: 5.25rem; height: 3.5rem; aspect-ratio: auto; border-radius: 4px; }
.media-thumb--preview { width: auto; max-width: 20rem; }

/* Portal shell (Phase 4 PR 1) */
.skip-link {
    position: absolute; left: .75rem; top: -4rem; z-index: 2000;
    background: var(--lc-white); color: var(--lc-navy); padding: .5rem .9rem; border-radius: 6px;
    font-weight: 600; text-decoration: none; box-shadow: var(--lc-shadow-md, 0 4px 12px rgba(0,0,0,.25));
}
.skip-link:focus { top: .75rem; }
.portal-main:focus { outline: none; }
.nav-section__title { display: inline-flex; align-items: center; gap: .5rem; }
.portal-nav__group {
    margin: .7rem 0 .15rem; padding: 0 .5rem;
    text-transform: uppercase; font-size: .65rem; letter-spacing: .14em; color: #9fb0c2;
}
/* A group label with no visible links after it (all hidden by policy) would dangle — collapse it. */
.portal-nav__group:last-child, .portal-nav__group:has(+ .portal-nav__group) { display: none; }
.portal-nav__link:focus-visible, .nav-section__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.nav-section__title .lc-icon { flex-shrink: 0; }
/* Desktop: keep the sidebar in view with its own scroll — the Financial section alone is ~30 rows tall. */
@media (min-width: 801px) {
    .portal-sidebar { position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; flex-shrink: 0; overscroll-behavior: contain; }
}

/* Portal mobile drawer (Phase 4 PR 1b). Drawer behaviour applies only once the circuit is up (.portal--drawer),
   so prerendered / no-circuit mobile keeps the stacked sidebar and the navigation is never unreachable. */
.portal-menubar { display: none; }
.portal-scrim { display: none; }
.portal-drawer__close { display: none; }
@media (max-width: 800px) {
    .portal--drawer .portal-menubar { display: flex; align-items: center; gap: .6rem; min-width: 0; }
    .portal-menu-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 44px; height: 44px; margin-left: -.5rem; border: 0; border-radius: 10px;
        background: none; color: inherit; cursor: pointer;
    }
    .portal-menu-btn:hover { background: rgba(127,127,127,.15); }
    .portal-menubar__brand { font-family: var(--lc-font-brand); font-size: 1.35rem; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .portal--drawer .portal-sidebar {
        position: fixed; inset: 0 auto 0 0; z-index: 1045;   /* below toasts (1050) and modals (1055) */
        width: min(85vw, 320px); height: 100dvh; overflow-y: auto; overscroll-behavior: contain;
        transform: translateX(-100%); visibility: hidden;
        transition: transform .22s ease, visibility 0s linear .22s;
    }
    .portal--drawer .portal-sidebar.is-open { transform: none; visibility: visible; transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.45); }
    .portal--drawer .portal-drawer__close { display: inline-flex; }
    .portal--drawer .portal-scrim { display: block; position: fixed; inset: 0; z-index: 1035; background: rgba(8,12,16,.55); }
    body:has(.portal-sidebar.is-open) { overflow: hidden; }   /* no page scroll behind the scrim */
    .portal-drawer__close {
        position: absolute; top: .5rem; right: .5rem; width: 44px; height: 44px; border: 0; border-radius: 10px;
        display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); color: #fff; cursor: pointer;
    }
    .portal-drawer__close:hover { background: rgba(255,255,255,.16); }
    .portal-drawer__close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
    .portal--drawer .portal-sidebar:focus { outline: none; }
    .portal--drawer .portal-sidebar .portal-brand { padding-right: 3.25rem; }   /* clear of the close button */
}
@media (max-width: 800px) and (prefers-reduced-motion: reduce) {
    .portal--drawer .portal-sidebar, .portal--drawer .portal-sidebar.is-open { transition: none; }
}

/* Phase 4 PR 2: whole-row navigation done with a real link (stretched-link) instead of a click handler on <tr>. */
.table-row-link tbody tr { position: relative; }
/* Bootstrap paints an opaque background on every cell, so the tint has to go through its own state variable. */
.table-row-link tbody tr:hover > *, .table-row-link tbody tr:focus-within > * { --bs-table-bg-state: var(--lc-teal-tint); }
.table-row-link .stretched-link:focus-visible::after { outline: 2px solid var(--lc-teal); outline-offset: -2px; }
.table-row-link .stretched-link { text-decoration: none; font-weight: 600; }
.unit-photo { aspect-ratio: 4 / 3; object-fit: cover; }
.form-reply { max-width: 32rem; }
.lc-empty-state--compact { padding-block: var(--lc-space-4); }
.select-inline { max-width: 18rem; }
.input-inline { max-width: 14rem; }
.logo-preview { max-height: 56px; max-width: 100%; background: #fff; padding: 4px; border: 1px solid var(--bs-border-color); }

/* Phase 4 PR 3 (Ledger): named classes for what used to be repeated inline styles. */
.col-w-6 { width: 6rem; }
.col-w-14p { width: 14%; }
.col-w-38p { width: 38%; }
.max-w-42 { max-width: 42rem; }
.max-w-46 { max-width: 46rem; }
.select-auto { width: auto; }
.list-scroll { max-height: 16rem; overflow: auto; }
/* Money and other right-aligned numeric columns line up digit-for-digit. */
.portal-main td.text-end, .portal-main th.text-end { font-variant-numeric: tabular-nums; }

/* Phase 4 PR 4 (Payables + Scheme Planning) */
.max-h-300 { max-height: 300px; overflow-y: auto; }
.input-w-160 { max-width: 160px; }.max-w-140 { max-width: 140px; }
.max-w-560 { max-width: 560px; }
.max-w-640 { max-width: 640px; }
.max-w-720 { max-width: 720px; }
.max-w-8rem { max-width: 8rem; }
.w-240 { width: 240px; } .w-96 { width: 96px; } .w-74 { width: 74px; } .w-92 { width: 92px; } .w-180 { width: 180px; }
.plan-frozen--wide { width: 682px; }
.plan-frozen--narrow { width: 502px; }
.plan-year-col--scroll { min-width: 92px; }
.plan-year-total { font-size: .64rem; letter-spacing: 0; text-transform: none; }
.fs-xs { font-size: .72rem; }
.row-actions--start { justify-content: flex-start; }
.col-w-2 { width: 2rem; }
/* A row that is a stretched link still needs its own buttons clickable. */
.table-row-link .row-interactive button { position: relative; z-index: 2; }
.pre-wrap { white-space: pre-wrap; }
.max-h-220 { max-height: 220px; overflow: auto; }