/*
  LII Claims Platform — Shared Design System
  ============================================
  This file is the single stylesheet for all 14 portal pages.
  Every page in platform/pages/ links to this file with: <link rel="stylesheet" href="../../shared.css">

  It contains:
    - Brand colors and CSS variables (day and night mode)
    - Typography (Playfair Display + Raleway + JetBrains Mono)
    - Layout utilities (wrap, grid, flex)
    - Portal navigation header (top bar with logo and page links)
    - Card components (stat cards, list cards, form cards)
    - Tab navigation system
    - Form components (inputs, selects, textareas, checkboxes, file upload)
    - Data tables
    - Status badges
    - Buttons
    - Case lifecycle pipeline
    - FAB (floating action button — back to dashboard)
    - Atmospheric background effects
    - Animations

  Companion files:
    - platform/pages/*/index.html — the actual portal pages
    - coming-soon/index.html — the dashboard this links back to
    - coming-soon/logo-day.png — day logo · coming-soon/logo-night.png — night logo
    - coming-soon/logo-flat-day.png / logo-flat-night.png — horizontal lockups

  Jacob: if you need to change a color or font size, change it in the :root block
  at the top. Don't change values in individual rules — the variable system
  means one change here updates the entire platform automatically.
*/


/* ═══════════════════════════════════════════════════════════════
   PROTOTYPE BANNER — static mockup pages only (platform/pages/*)
   ═══════════════════════════════════════════════════════════════ */
.prototype-banner {
  position: relative;
  z-index: 2;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .5rem .65rem;
  padding: .55rem 1rem;
  background: linear-gradient(90deg, rgba(200,40,65,.95), rgba(209,32,60,.9));
  color: #fff;
  font: 600 var(--fs-label)/1.4 var(--f-sans);
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,.3);
}
[data-theme="day"] .prototype-banner {
  background: linear-gradient(90deg, #B6243A 0%, #C82841 50%, #D1203C 100%);
  color: #fff;
  box-shadow: 0 4px 18px rgba(182,45,63,.22);
  border-bottom: 1px solid rgba(255,255,255,.22);
}
.prototype-banner a {
  display: inline-flex; align-items: center;
  color: #fff !important;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 6px;
  padding: .28rem .65rem;
  font: 700 var(--fs-label)/1 var(--f-sans);
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, border-color .2s;
}
[data-theme="day"] .prototype-banner a {
  color: #fff !important;
  background: rgba(255,255,255,.28);
  border-color: rgba(255,255,255,.65);
}
.prototype-banner a:hover {
  background: rgba(255,255,255,.34);
  border-color: #fff;
}
body.has-prototype-banner:not(.has-lii-shell) { padding-top: 2.5rem; }
body.has-prototype-banner .page-main { padding-top: 0; }

/* ═══════════════════════════════════════════════════════════════
   RESET + BOX MODEL
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
::selection { background: rgba(182,45,63,.3); color: var(--text); }

/* ═══════════════════════════════════════════════════════════════
   BRAND LOGO — day + night assets (logo-day / logo-night; logo-flat-* for wide lockups)
   ═══════════════════════════════════════════════════════════════ */
.brand-logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-logo img {
  width: 100%;
  height: auto;
  display: block;
}
.brand-logo img.brand-logo__night { display: none; }
[data-theme="night"] .brand-logo img.brand-logo__day { display: none; }
[data-theme="night"] .brand-logo img.brand-logo__night { display: block; }
[data-theme="night"] .brand-logo--flat img.brand-logo__night,
[data-theme="night"] .brand-logo--hero img.brand-logo__night {
  filter: drop-shadow(0 0 14px rgba(209,32,60,.28)) drop-shadow(0 4px 12px rgba(0,0,0,.25));
}
[data-theme="day"] .brand-logo--flat img.brand-logo__day,
[data-theme="day"] .brand-logo--hero img.brand-logo__day {
  filter: drop-shadow(0 4px 14px rgba(182,45,63,.16));
}
.brand-logo--hero {
  width: clamp(200px, 28vw, 300px);
  margin: 0;
}
.brand-logo--hero::before {
  content: "";
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow), transparent 68%);
  z-index: -1;
  pointer-events: none;
}
.brand-logo--nav {
  width: auto;
}
.brand-logo--nav img {
  height: clamp(160px, 22vw, 216px);
  width: auto;
}
.brand-logo--flat {
  width: auto;
  max-width: min(100%, 300px);
}
.brand-logo--flat img {
  width: auto;
  height: auto;
  max-height: clamp(44px, 8vw, 56px);
  max-width: 100%;
}

/* Logo lens intro — zoom from magnifying glass → page logo (≤1s) */
html.logo-intro-active { overflow: hidden; }
html:not(.logo-intro-ready) body > main,
html:not(.logo-intro-ready) .page-main,
html:not(.logo-intro-ready) .portal-nav,
html:not(.logo-intro-ready) .nav,
html:not(.logo-intro-ready) .preview-gate {
  opacity: 0;
}
html.logo-intro-ready body > main,
html.logo-intro-ready .page-main,
html.logo-intro-ready .portal-nav,
html.logo-intro-ready .nav,
html.logo-intro-ready .preview-gate {
  opacity: 1;
  transition: opacity 0.28s ease;
}
.logo-intro-target-hidden { visibility: hidden !important; }
.logo-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg);
  pointer-events: none;
}
.logo-intro-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0%, var(--bg) 72%);
  opacity: 0.55;
  pointer-events: none;
}
.logo-intro-flyer {
  position: fixed;
  z-index: 10001;
  pointer-events: none;
  will-change: transform, opacity;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-intro-flyer img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Auth / login shell */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 3rem);
}
.auth-shell {
  width: 100%;
  max-width: 960px;
  position: relative;
  display: flex;
  justify-content: center;
}
.auth-card { padding: clamp(1.5rem, 3.5vw, 2.25rem); width: 100%; }
.auth-layout {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(1.75rem, 5vw, 3rem);
  min-height: clamp(320px, 48vh, 440px);
}
.auth-logo-col {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}
.auth-logo-col .brand-logo--hero {
  height: 100%;
  width: auto;
  max-width: min(44vw, 400px);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-logo-col .brand-logo--hero img {
  height: 100%;
  width: auto;
  max-height: min(52vh, 420px);
  object-fit: contain;
}
.auth-content-col {
  flex: 1 1 340px;
  max-width: 400px;
  min-width: min(100%, 260px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.35rem;
}
.auth-copy { text-align: left; }
.auth-brand-eyebrow {
  margin: 0;
  font: 600 var(--fs-label)/1.35 var(--f-sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.auth-brand-title {
  margin: .5rem 0 0;
  font: 600 clamp(1.35rem, 3.2vw, 1.85rem)/1.15 var(--f-serif);
  color: var(--text);
}
.auth-brand-sub {
  margin: .4rem 0 0;
  font-size: var(--fs-body);
  color: var(--text-2);
  line-height: 1.45;
}
.auth-form-block { width: 100%; }
.auth-submit { width: 100%; margin-top: 1rem; }
.auth-footnote {
  margin-top: 1.1rem;
  font-size: var(--fs-label);
  color: var(--text-2);
}
.auth-theme {
  position: fixed;
  top: 16px;
  left: 16px;
}
@media (max-width: 760px) {
  .auth-layout {
    flex-direction: column;
    align-items: center;
    min-height: 0;
    gap: 1rem;
  }
  .auth-logo-col {
    align-self: auto;
    width: 100%;
  }
  .auth-logo-col .brand-logo--hero {
    height: auto;
    max-width: 100%;
  }
  .auth-logo-col .brand-logo--hero img {
    height: auto;
    width: clamp(168px, 52vw, 220px);
    max-height: none;
  }
  .auth-content-col {
    max-width: 100%;
    gap: .85rem;
  }
  .auth-copy { text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   CSS VARIABLES — NIGHT MODE (DEFAULT)
   Brand colors sampled from the actual LII logo pixels.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Brand palette */
  --red-deep:    #92182F;
  --red:         #B6243A;
  --red-mid:     #C82841;
  --red-bright:  #D1203C;
  --charcoal:    #282828;
  --warm-white:  #F5F0EC;

  /* Night mode surfaces */
  --bg:          #0A0608;
  --bg-2:        #120C0E;
  --bg-3:        #1A1015;
  --text:        #F0EAE6;
  --text-2:      #B8A8A0;
  --gray:        #6A5A55;
  --line:        rgba(182,45,63,.12);
  --line-strong: rgba(182,45,63,.24);
  --accent:      var(--red-mid);
  --accent-glow: rgba(200,40,65,.35);
  --accent-glow-2: rgba(209,32,60,.22);
  --card-bg:     rgba(18,12,14,.7);
  --card-border: rgba(200,40,65,.2);
  --icon-fill:   var(--red-bright);

  /* Status colors */
  --status-open:      #4488DD;
  --status-scheduled: #8866CC;
  --status-inspected: #44AAEE;
  --status-reported:  #EE8833;
  --status-invoiced:  #EE6633;
  --status-paid:      #44BB77;
  --status-closed:    #44BB77;
  --status-cancelled: #6A5A55;

  /* Fonts */
  --f-sans:  "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono:  "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --f-serif: "Barlow Condensed", "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Fluid type scale */
  --fs-micro: clamp(10px, 2.6vw, 12px);
  --fs-label: clamp(11px, 2.8vw, 13px);
  --fs-body:  clamp(15px, 4vw, 17px);
  --fs-lead:  clamp(16px, 4.2vw, 24px);
  --fs-h3:    clamp(18px, 5vw, 30px);
  --fs-h2:    clamp(24px, 7vw, 48px);

  /* Spacing — layout-edge grows on ultra-wide so content never hugs the viewport */
  --layout-content-max: 1760px;
  --layout-form-max: 1120px;
  --layout-rail-w: 272px;
  --layout-edge-min: clamp(1.25rem, 5vw, 3.5rem);
  --layout-edge: var(--layout-edge-min);
  --gutter: var(--layout-edge);
  --section-gap: clamp(2rem, 5vh, 4rem);

  /* Portal nav — bar height + centered 4× logo clearance */
  --nav-h: 60px;
  --nav-logo-h: clamp(160px, 22vw, 216px);
  --nav-logo-drop: 10px;
  --nav-logo-lift: 15px;
  --nav-clearance: calc((var(--nav-h) / 2) + (var(--nav-logo-h) / 2) + var(--nav-logo-drop));
  --subnav-h: 0px;
  --shell-clearance: var(--nav-clearance);
}

/* ═══════════════════════════════════════════════════════════════
   DAY MODE OVERRIDES
   When <html data-theme="day">, these values replace the night defaults.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="day"] {
  --bg:          #FAF7F4;
  --bg-2:        #F0EBE6;
  --bg-3:        #E8E0DA;
  --text:        #2A2226;
  --text-2:      #6A5A55;
  --gray:        #9A8A82;
  --line:        rgba(182,45,63,.08);
  --line-strong: rgba(182,45,63,.14);
  --accent-glow: rgba(200,40,65,.14);
  --accent-glow-2: rgba(209,32,60,.09);
  --card-bg:     rgba(255,255,255,.8);
  --card-border: rgba(200,40,65,.12);
  --icon-fill:   var(--red);
}

/* ═══════════════════════════════════════════════════════════════
   LII UNIFIED SHELL — imported after design tokens
   ═══════════════════════════════════════════════════════════════ */
.lii-shell {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  max-width: 100%;
}
.lii-shell__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  height: var(--nav-h);
  padding: 0 var(--layout-edge);
  background: var(--bg-2);
  border-bottom: 1px solid var(--card-border);
  position: relative;
  z-index: 2;
}
.lii-shell__leading,
.lii-shell__trailing {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex: 1 1 0;
  min-width: 0;
  z-index: 4;
  overflow: visible;
}
.lii-shell__trailing { justify-content: flex-start; }
.lii-shell__leading { justify-content: flex-start; }

.lii-shell__welcome {
  display: none;
  flex-shrink: 0;
  font: 600 var(--fs-micro)/1 var(--f-sans);
  letter-spacing: .02em;
  color: var(--text-2);
  white-space: nowrap;
  padding-right: .35rem;
}
.lii-shell__welcome [data-lii-username] { color: var(--text); font-weight: 700; }

.lii-shell__logo {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--nav-logo-drop));
  transform: translate(-50%, calc(-50% - var(--nav-logo-lift, 0px)));
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.lii-shell__logo a {
  display: flex;
  align-items: center;
  pointer-events: auto;
}
.lii-shell__logo .brand-logo--nav {
  position: relative;
}
.lii-shell__logo .brand-logo--nav::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  width: 128%;
  height: 72%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(209,32,60,.48) 0%, rgba(200,40,65,.22) 40%, transparent 72%);
  z-index: -1;
  pointer-events: none;
  filter: blur(10px);
  opacity: .88;
}
[data-theme="day"] .lii-shell__logo .brand-logo--nav::before {
  width: 148%;
  height: 86%;
  background: radial-gradient(ellipse at center, rgba(255,255,252,.98) 0%, rgba(250,247,244,.78) 30%, rgba(245,240,232,.52) 50%, rgba(240,235,228,.28) 66%, transparent 84%);
  filter: blur(14px);
  opacity: 1;
}
[data-theme="night"] .lii-shell__logo .brand-logo--nav img.brand-logo__night {
  filter:
    drop-shadow(0 0 30px rgba(209,32,60,.55))
    drop-shadow(0 0 60px rgba(200,40,65,.28))
    drop-shadow(0 10px 26px rgba(0,0,0,.45));
}
[data-theme="day"] .lii-shell__logo .brand-logo--nav img.brand-logo__day {
  filter:
    drop-shadow(0 0 22px rgba(255,255,252,1))
    drop-shadow(0 0 44px rgba(255,252,248,.95))
    drop-shadow(0 0 68px rgba(250,247,244,.78))
    drop-shadow(0 0 96px rgba(250,247,244,.55))
    drop-shadow(0 0 128px rgba(240,235,230,.32))
    drop-shadow(0 8px 26px rgba(190,178,165,.26));
}

.lii-shell__menu-btn {
  display: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text-2);
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, color .15s ease;
}
.lii-shell__menu-btn:hover { border-color: var(--red-mid); color: var(--red-mid); }
.lii-shell__menu-btn svg { width: 18px; height: 18px; }

.lii-shell__user {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 8px;
  font: 500 var(--fs-micro)/1 var(--f-sans);
  color: var(--text-2);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}
.lii-shell__user-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #44BB77;
  flex-shrink: 0;
}
.lii-shell__status {
  font: 600 var(--fs-micro)/1 var(--f-sans);
  letter-spacing: .05em;
  color: #44BB77;
  background: rgba(68,187,119,.12);
  border: 1px solid rgba(68,187,119,.35);
  border-radius: 999px;
  padding: .38rem .62rem;
  white-space: nowrap;
}

/* Shared link styles */
.lii-shell__nav-link,
.lii-shell__subnav-link,
.lii-shell__nav .nav-dropdown > .nav-dropdown-trigger,
.lii-shell__subnav .nav-dropdown > .nav-dropdown-trigger {
  font: 600 var(--fs-label)/1 var(--f-sans);
  letter-spacing: .04em;
  color: var(--text-2);
  padding: .45rem .55rem;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* Header bar nav — unified GPU-friendly hover (color + scaleX underline) */
.lii-shell__nav .lii-shell__nav-link,
.lii-shell__nav .nav-dropdown > .nav-dropdown-trigger {
  position: relative;
  transition: color .15s ease;
}
.lii-shell__nav .lii-shell__nav-link:not(.lii-shell__nav-cta)::after,
.lii-shell__nav .nav-dropdown > .nav-dropdown-trigger::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: .18rem;
  width: calc(100% - .35rem);
  max-width: 4.25rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transform: translate3d(-50%, 0, 0) scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .lii-shell__nav .lii-shell__nav-link:not(.lii-shell__nav-cta):hover,
  .lii-shell__nav .nav-dropdown:hover > .nav-dropdown-trigger,
  .lii-shell__nav .nav-dropdown:focus-within > .nav-dropdown-trigger {
    color: var(--red-mid);
    background: none;
  }
  .lii-shell__nav .lii-shell__nav-link:not(.lii-shell__nav-cta):hover::after,
  .lii-shell__nav .nav-dropdown:hover > .nav-dropdown-trigger::after,
  .lii-shell__nav .nav-dropdown:focus-within > .nav-dropdown-trigger::after {
    transform: translate3d(-50%, 0, 0) scaleX(1);
  }
}
.lii-shell__nav .lii-shell__nav-link.active,
.lii-shell__nav .lii-shell__nav-link[aria-current="page"] {
  color: var(--red-mid);
  background: none;
  border: none;
}
.lii-shell__nav .lii-shell__nav-link.active:not(.lii-shell__nav-cta)::after,
.lii-shell__nav .lii-shell__nav-link[aria-current="page"]:not(.lii-shell__nav-cta)::after {
  transform: translate3d(-50%, 0, 0) scaleX(1);
}

/* Role subnav — lightweight border hover (no underline) */
.lii-shell__subnav-link {
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.lii-shell__subnav-link:hover {
  color: var(--red-mid);
}
.lii-shell__subnav-link.active,
.lii-shell__subnav-link[aria-current="page"] {
  color: var(--red-mid);
}
.lii-shell__nav-cta,
.lii-shell__subnav-cta {
  color: #fff !important;
  background: var(--red-mid) !important;
  border: 1px solid var(--red-bright) !important;
}
.lii-shell__nav-cta:hover,
.lii-shell__subnav-cta:hover { background: var(--red-bright) !important; }

/* In-bar nav — split left/right of logo on desktop (no horizontal scroll) */
.lii-shell__nav {
  display: none;
  align-items: center;
  gap: .1rem;
  min-width: 0;
  flex: 1 1 auto;
}
.lii-shell__nav--left {
  justify-content: center;
  padding-inline: clamp(.25rem, 1vw, .75rem);
}
.lii-shell__nav--right {
  justify-content: center;
  padding-inline: clamp(.25rem, 1vw, .75rem);
}
.lii-shell__bar-end {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-shrink: 0;
}

/* Far-right account menu — login, portal, app/user actions */
.lii-shell__user-menu { position: relative; flex-shrink: 0; }
.lii-shell__user-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 8px;
  font: 600 var(--fs-micro)/1 var(--f-sans);
  color: var(--text-2);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  cursor: pointer;
  white-space: nowrap;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, color .15s ease;
}
.lii-shell__user-menu-trigger:hover {
  border-color: var(--red-mid);
  color: var(--red-mid);
}
.lii-shell__user-menu-chevron {
  width: 14px;
  height: 14px;
  opacity: .7;
  flex-shrink: 0;
}
.lii-shell__user-menu .nav-dropdown-menu,
.lii-shell__user-menu-panel {
  position: absolute;
  top: calc(100% + .35rem);
  right: 0;
  left: auto;
  min-width: 200px;
  padding: .4rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
  z-index: 300;
  transform: translateY(-4px);
}
.lii-shell__user-menu.nav-dropdown.open .nav-dropdown-menu,
.lii-shell__user-menu.nav-dropdown.open .lii-shell__user-menu-panel,
.lii-shell__user-menu:hover .nav-dropdown-menu,
.lii-shell__user-menu:hover .lii-shell__user-menu-panel,
.lii-shell__user-menu:focus-within .nav-dropdown-menu,
.lii-shell__user-menu:focus-within .lii-shell__user-menu-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.lii-shell__user-menu-panel a,
.lii-shell__user-menu-panel button.lii-shell__user-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: .55rem .75rem;
  border-radius: 6px;
  font: 600 var(--fs-label)/1.3 var(--f-sans);
  color: var(--text-2);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.lii-shell__user-menu-panel a:hover,
.lii-shell__user-menu-panel button.lii-shell__user-menu-item:hover {
  color: var(--red-mid);
  background: rgba(200,40,65,.08);
}
.lii-shell__user-menu-panel a.lii-shell__nav-cta {
  color: #fff !important;
  background: var(--red-mid) !important;
  border: 1px solid var(--red-bright) !important;
  margin: .15rem 0;
}
.lii-shell__user-menu-panel .lii-shell__menu-divider {
  height: 1px;
  background: var(--line);
  margin: .35rem 0;
}
.lii-shell__user-menu-panel .lii-shell__menu-badge {
  display: block;
  padding: .45rem .75rem;
  font: 600 var(--fs-micro)/1 var(--f-sans);
  color: #44BB77;
}

.lii-shell__nav .nav-dropdown,
.lii-shell__subnav .nav-dropdown { position: relative; }
.lii-shell__nav .nav-dropdown-menu,
.lii-shell__subnav .nav-dropdown-menu {
  position: absolute;
  top: calc(100% + .35rem);
  left: 0;
  min-width: 220px;
  padding: .4rem;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
  z-index: 300;
  transform: translateY(-4px);
}
.lii-shell__nav .nav-dropdown.open .nav-dropdown-menu,
.lii-shell__subnav .nav-dropdown.open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
@media (min-width: 901px) {
  .lii-shell__user-menu:hover .nav-dropdown-menu,
  .lii-shell__user-menu:hover .lii-shell__user-menu-panel,
  .lii-shell__user-menu:focus-within .nav-dropdown-menu,
  .lii-shell__user-menu:focus-within .lii-shell__user-menu-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  .lii-shell__nav .nav-dropdown:hover .nav-dropdown-menu,
  .lii-shell__nav .nav-dropdown:focus-within .nav-dropdown-menu,
  .lii-shell__subnav .nav-dropdown:hover .nav-dropdown-menu,
  .lii-shell__subnav .nav-dropdown:focus-within .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  .lii-shell__nav .nav-dropdown-menu::before,
  .lii-shell__subnav .nav-dropdown-menu::before,
  .lii-shell__user-menu .nav-dropdown-menu::before,
  .lii-shell__user-menu-panel::before {
    content: "";
    position: absolute;
    top: -.45rem;
    left: 0;
    right: 0;
    height: .45rem;
  }
}
.lii-shell__nav .nav-dropdown-menu a,
.lii-shell__subnav .nav-dropdown-menu a {
  display: block;
  padding: .55rem .75rem;
  border-radius: 6px;
  font: 500 var(--fs-label)/1.3 var(--f-sans);
  color: var(--text-2);
}
.lii-shell__nav .nav-dropdown-menu a:hover,
.lii-shell__subnav .nav-dropdown-menu a:hover { color: var(--red-mid); background: rgba(200,40,65,.08); }

/* App subnav — live app role links; flush under header bar on desktop */
.lii-shell__subnav {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .4rem var(--layout-edge);
  background: rgba(18,12,14,.96);
  border-bottom: 1px solid var(--line-strong);
  margin-top: 0;
  position: relative;
  z-index: 5;
}
[data-theme="day"] .lii-shell__subnav {
  background: rgba(250,247,244,.94);
}
.lii-shell__subnav-links {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex: 1 1 auto;
  justify-content: flex-start;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.lii-shell__subnav-links::-webkit-scrollbar { display: none; }
.lii-shell__subnav-stats {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-shrink: 0;
  margin-left: auto;
  font: 600 var(--fs-micro)/1 var(--f-sans);
  color: var(--text-2);
  white-space: nowrap;
}
.lii-shell__subnav-role {
  color: var(--red-mid);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: clamp(9px, 1.8vw, 11px);
}
.lii-shell__subnav-stat strong {
  color: var(--text);
  font-weight: 700;
}
/* Bar must stack above subnav so logo drop + user menu dropdown paint on top */
.lii-shell--app .lii-shell__bar,
.lii-shell--mockup .lii-shell__bar {
  z-index: 10;
}
.lii-shell--app .lii-shell__logo {
  z-index: 6;
}
.lii-shell--app .lii-shell__subnav,
.lii-shell--mockup .lii-shell__subnav {
  z-index: 1;
  display: flex;
}
.lii-shell--app .lii-shell__subnav-link,
.lii-shell--mockup .lii-shell__subnav-link {
  padding: .5rem .85rem;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
}
.lii-shell--app .lii-shell__subnav-link:hover,
.lii-shell--mockup .lii-shell__subnav-link:hover {
  border-color: rgba(200,40,65,.35);
}
.lii-shell--app .lii-shell__subnav-link.active,
.lii-shell--app .lii-shell__subnav-link[aria-current="page"],
.lii-shell--mockup .lii-shell__subnav-link.active,
.lii-shell--mockup .lii-shell__subnav-link[aria-current="page"] {
  border-color: rgba(200,40,65,.35);
  background: rgba(200,40,65,.12);
  color: var(--red-mid);
}

@media (min-width: 901px) {
  body.has-lii-shell:not(.has-lii-shell--no-subnav) {
    --subnav-h: 42px;
    --shell-clearance: calc(var(--nav-clearance) + var(--subnav-h));
  }
  .lii-shell--site .lii-shell__nav,
  .lii-shell--mockup .lii-shell__nav,
  .lii-shell--app .lii-shell__nav {
    display: flex;
  }
  .lii-shell--hub .lii-shell__welcome,
  .lii-shell--mockup .lii-shell__welcome,
  .lii-shell--app .lii-shell__welcome {
    display: block;
  }
  .lii-shell--site:not(.lii-shell--hub) .lii-shell__nav--left {
    justify-content: center;
  }
  .lii-shell--mockup .lii-shell__nav-link {
    padding: .4rem .42rem;
    font-size: clamp(10px, 1.05vw, 12px);
  }
}
body.has-lii-shell { padding-top: var(--shell-clearance); }
body.has-lii-shell.has-lii-shell--no-subnav { padding-top: var(--nav-clearance); }
body.has-lii-shell.has-prototype-banner { padding-top: var(--shell-clearance); }
body.has-lii-shell.has-lii-shell--no-subnav.has-prototype-banner { padding-top: var(--nav-clearance); }

/* Mobile drawer — show instantly; slide panel only (no visibility transition lag) */
.lii-drawer {
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 0.22s;
}
.lii-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
  z-index: 10002;
  transition: visibility 0s;
}
.lii-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,6,8,.55);
  opacity: 0;
  transition: opacity .22s ease;
}
.lii-drawer.is-open .lii-drawer__backdrop { opacity: 1; }
.lii-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(320px, 88vw);
  height: 100%;
  background: var(--bg-2);
  border-left: 1px solid var(--card-border);
  box-shadow: -12px 0 40px rgba(0,0,0,.35);
  display: flex;
  flex-direction: column;
  transform: translate3d(100%, 0, 0);
  transition: transform .18s cubic-bezier(.22,1,.36,1);
  padding: calc(var(--nav-h) + .75rem) 1.25rem 1.25rem;
}
.lii-drawer.is-open .lii-drawer__panel {
  transform: translate3d(0, 0, 0);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .lii-drawer,
  .lii-drawer__backdrop,
  .lii-drawer__panel {
    transition: none;
  }
  .lii-drawer.is-open .lii-drawer__panel { transform: none; }
}
.lii-drawer__welcome {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.lii-drawer__welcome-label {
  display: block;
  font: 600 var(--fs-micro)/1 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: .35rem;
}
.lii-drawer__welcome-name {
  font: 600 var(--fs-h3)/1.1 var(--f-serif);
  color: var(--text);
}
.lii-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  flex: 1 1 auto;
  overflow-y: auto;
}
.lii-drawer__nav a,
.lii-drawer__nav button.lii-drawer__link {
  display: block;
  width: 100%;
  text-align: left;
  padding: .7rem .65rem;
  border-radius: 8px;
  font: 600 var(--fs-label)/1.2 var(--f-sans);
  color: var(--text-2);
  background: none;
  border: none;
  cursor: pointer;
}
.lii-drawer__nav a:hover,
.lii-drawer__nav a.active,
.lii-drawer__nav a[aria-current="page"] {
  color: var(--red-mid);
  background: rgba(200,40,65,.08);
}
.lii-drawer__section-label {
  font: 600 var(--fs-micro)/1 var(--f-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray);
  margin: 1rem 0 .35rem;
  padding: 0 .65rem;
}
.lii-drawer__footer {
  padding-top: 1rem;
  margin-top: auto;
  border-top: 1px solid var(--line);
}
.lii-drawer__footer .btn,
.lii-drawer__footer .lii-shell__action--block { width: 100%; }

.lii-shell__action {
  font: 600 var(--fs-micro)/1 var(--f-sans);
  color: var(--text-2);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  padding: .42rem .62rem;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .2s, color .2s, background .2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.lii-shell__action:hover {
  border-color: var(--red-mid);
  color: var(--red-mid);
}
.lii-shell__action--block { width: 100%; justify-content: center; }

@media (max-width: 900px) {
  .lii-shell__nav { display: none !important; }
  .lii-shell--app .lii-shell__subnav { display: none; }
  .lii-shell__menu-btn {
    display: inline-flex;
    position: relative;
    z-index: 7;
  }
  .lii-shell__trailing--desktop { display: none !important; }
  .lii-shell__leading .theme-toggle { display: inline-flex; }
  /* Logo is absolute-center; trailing must pin controls to the far edge */
  .lii-shell__trailing {
    justify-content: flex-end;
  }
  .lii-shell__bar-end {
    margin-left: auto;
  }
}
@media (min-width: 901px) {
  .lii-shell__leading .theme-toggle { display: none; }
  .lii-shell__trailing--desktop .theme-toggle { display: inline-flex; }
  .lii-drawer { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   BASE BODY
   ═══════════════════════════════════════════════════════════════ */
body {
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--fs-body)/1.6 var(--f-sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  min-height: 100dvh;
  transition: background-color .8s;
}

/* ═══════════════════════════════════════════════════════════════
   GRID TEXTURE OVERLAY
   Subtle grid lines that add depth to the background.
   ═══════════════════════════════════════════════════════════════ */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: .4;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 10%, transparent 75%);
}

/* ═══════════════════════════════════════════════════════════════
   ATMOSPHERIC ORBS
   Soft glowing backgrounds that add warmth and depth.
   ═══════════════════════════════════════════════════════════════ */
.atmos { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.atmos-orb { position: absolute; border-radius: 50%; filter: blur(100px); transition: opacity 1.2s; }
.orb-a {
  top: -15%; left: -10%; width: 55%; height: 55%;
  background: radial-gradient(circle, var(--accent-glow), transparent 65%);
  opacity: .6;
}
.orb-b {
  bottom: -20%; right: -8%; width: 50%; height: 50%;
  background: radial-gradient(circle, var(--accent-glow-2), transparent 65%);
  opacity: .5;
}
.orb-c {
  top: 40%; right: -18%; width: 40%; height: 40%;
  background: radial-gradient(circle, rgba(182,45,63,.12), transparent 65%);
  opacity: .4;
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════ */
main { position: relative; z-index: 2; }
.wrap {
  width: 100%; max-width: none; margin: 0 auto;
  padding-inline: var(--layout-edge);
}
.wrap--wide { max-width: none; }
/* Form / workflow pages — centered work surface; dashboards use plain .wrap */
.wrap--form,
.wrap--narrow,
.wrap--workspace {
  max-width: var(--layout-form-max);
  margin-inline: auto;
  padding-inline: var(--layout-edge-min);
}
.center { text-align: center; }

/* ═══════════════════════════════════════════════════════════════
   WORKSPACE — unified shell for field workflow & forms
   One surface: masthead + body + footer. No floating disconnected blocks.
   ═══════════════════════════════════════════════════════════════ */
.page-main--workspace {
  padding-top: 1.25rem;
  padding-bottom: 5rem;
}
.workspace {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 24px 48px -28px rgba(0,0,0,.45);
  overflow: hidden;
}
[data-theme="day"] .workspace {
  box-shadow:
    0 1px 0 rgba(255,255,255,.65) inset,
    0 20px 50px -24px rgba(182,45,63,.14);
}
.workspace__masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  padding: 1.35rem 1.5rem 1.15rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(200,40,65,.04) 0%, transparent 100%);
}
.workspace__intro { min-width: 0; flex: 1 1 220px; }
.workspace__status,
.workspace__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .65rem;
  flex-shrink: 0;
}
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  font: 600 var(--fs-micro)/1 var(--f-mono);
  letter-spacing: .04em;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--line);
}
.status-chip[data-state="ok"] { color: #3d9a5c; border-color: rgba(61,154,92,.35); }
.status-chip[data-state="error"] { color: var(--red-mid); border-color: rgba(200,40,65,.35); }
.status-chip[data-state="dirty"] { color: #c9a227; border-color: rgba(201,162,39,.35); }
.status-chip[data-state="saving"] { opacity: .85; }

.workspace__tabs {
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.workspace__tabs .tab-nav-inner {
  max-width: none;
  padding: .75rem 1rem 1rem;
}
.workspace__body {
  padding: 1.25rem 1.5rem 1.5rem;
}
.workspace__footer {
  padding: 1rem 1.5rem 1.25rem;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}
.workspace--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .workspace--split {
    grid-template-columns: var(--layout-rail-w) minmax(0, 1fr);
  }
}
.workspace__rail {
  padding: 1.35rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-2) 0%, transparent 100%);
}
@media (min-width: 900px) {
  .workspace__rail {
    border-bottom: none;
    border-right: 1px solid var(--line);
    position: sticky;
    top: calc(var(--shell-clearance) + .75rem);
    align-self: start;
    min-height: 100%;
  }
}
.workspace__rail .page-title {
  font-size: clamp(18px, 2.8vw, 26px);
  margin-bottom: .35rem;
}
.workspace__rail .page-subtitle {
  font-size: var(--fs-micro);
  line-height: 1.45;
  margin-bottom: 1rem;
}
.workspace__rail-actions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: 1.25rem;
}
.workspace__main {
  min-width: 0;
  padding: 1.25rem 1.5rem 1.5rem;
}
@media (min-width: 900px) {
  .workspace__main { padding: 1.35rem 1.5rem 1.5rem; }
}

/* Panel stack — replaces ad-hoc form-card + inline margins */
.panel-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.panel,
.form-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  padding: .9rem 1.15rem;
  border-bottom: 1px solid var(--line);
  background: rgba(200,40,65,.03);
}
.panel__title {
  font: 600 var(--fs-label)/1.2 var(--f-serif);
  letter-spacing: .02em;
  color: var(--text);
  margin: 0;
}
.panel__body { padding: 1.15rem; }
.panel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  padding: .9rem 1.15rem;
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,.12);
}
[data-theme="day"] .panel__foot { background: rgba(182,45,63,.03); }
.panel__foot--end { justify-content: flex-end; }
details.panel > summary { list-style: none; cursor: pointer; }
details.panel > summary::-webkit-details-marker { display: none; }
details.panel[open] > summary { border-bottom: 1px solid var(--line); }

/* Read-only field grids inside panels */
.field-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .85rem 1.25rem;
}
@media (min-width: 520px) {
  .field-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 720px) {
  .field-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.field__label {
  display: block;
  font: 600 var(--fs-micro)/1 var(--f-sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: .2rem;
}
.field__value {
  font: 500 var(--fs-body)/1.45 var(--f-sans);
  color: var(--text);
  margin: 0;
}
.field__value--muted {
  font-size: var(--fs-label);
  color: var(--text-2);
  line-height: 1.5;
}

/* Action groups — buttons stay together, never screen-edge sprawl */
.action-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .65rem;
}
.action-bar--split {
  justify-content: space-between;
}
.action-bar__cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .65rem;
}

/* Compact vertical pipeline for workspace rail */
.pipeline--rail {
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  gap: 0;
}
.pipeline--rail .pipeline-stage {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: .65rem;
  min-width: 0;
  flex: none;
  padding: .45rem 0;
}
.pipeline--rail .pipeline-stage:not(:last-child)::after {
  display: none;
}
.pipeline--rail .pipeline-dot {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  font-size: 10px;
}
.pipeline--rail .pipeline-label {
  text-align: left;
  font-size: 10px;
  letter-spacing: .05em;
}

/* Dashboard page frame — intro + sections */
.page-intro {
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.page-intro .page-title { margin-bottom: .35rem; }
.section-block { margin-bottom: var(--section-gap); }
.section-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1rem;
}

/* Large desktops — full content width up to --layout-content-max, centered with growing side insets */
@media (min-width: 900px) {
  :root {
    --layout-edge: max(var(--layout-edge-min), calc((100vw - var(--layout-content-max)) / 2));
  }
  .portal-nav-inner,
  .tab-nav-inner {
    max-width: none;
    width: 100%;
    padding-left: var(--layout-edge);
    padding-right: var(--layout-edge);
  }
}

/* Two-column layout for pages with a sidebar */
.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  padding-bottom: var(--section-gap);
}
@media (min-width: 860px) {
  .page-layout--sidebar { grid-template-columns: 260px minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   PORTAL NAVIGATION HEADER
   The fixed top bar that appears on every platform page.
   Contains the LII logo, portal links, and theme toggle.
   ═══════════════════════════════════════════════════════════════ */
.portal-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  height: var(--nav-h);
  background: var(--bg-2);
  border-bottom: 1px solid var(--card-border);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  max-width: 100%; overflow: visible;
}
.portal-nav-inner {
  display: flex; align-items: center; gap: 8px;
  height: var(--nav-h); max-width: none; margin: 0 auto;
  padding: 0 var(--layout-edge);
  overflow: visible; width: 100%;
  position: relative;
}
.portal-nav-logo {
  position: absolute;
  left: 50%;
  top: calc(50% + var(--nav-logo-drop));
  transform: translate(-50%, calc(-50% - var(--nav-logo-lift, 0px)));
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.portal-nav-logo a {
  display: flex;
  align-items: center;
  pointer-events: auto;
}

.portal-nav-divider { display: none; }

/* Nav links — far left; logo centered; account controls far right */
.portal-nav-links {
  display: flex; align-items: center; justify-content: flex-start; gap: 2px;
  overflow-x: auto; flex: 0 1 auto; min-width: 0; max-width: 42%;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  position: relative;
  z-index: 4;
}
.portal-nav-user {
  margin-left: auto;
  position: relative;
  z-index: 4;
}
.portal-nav-inner > form,
.portal-nav-inner > .theme-toggle {
  position: relative;
  z-index: 4;
  flex-shrink: 0;
}
.portal-nav-links::-webkit-scrollbar { display: none; }

.portal-nav-link {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 7px;
  font: 500 var(--fs-micro)/1 var(--f-sans);
  letter-spacing: .03em; white-space: nowrap;
  color: var(--text-2);
  transition: background .2s, color .2s;
  flex-shrink: 0;
}
.portal-nav-link svg { width: 14px; height: 14px; flex-shrink: 0; }
.portal-nav-link:hover { background: var(--card-bg); color: var(--text); }
.portal-nav-link.active {
  background: rgba(200,40,65,.15);
  color: var(--red-mid);
  border: 1px solid rgba(200,40,65,.25);
}
[data-theme="day"] .portal-nav-link.active { background: rgba(182,45,63,.08); }

.portal-nav-user {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; border-radius: 8px;
  font: 500 var(--fs-micro)/1 var(--f-sans);
  color: var(--text-2);
  background: var(--card-bg); border: 1px solid var(--card-border);
}
.portal-nav-user-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #44BB77; flex-shrink: 0;
}

/* Theme toggle in the portal nav */
.theme-toggle {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border: 1px solid var(--card-border); border-radius: 50%;
  background: var(--card-bg);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--text-2); transition: all .3s;
}
.theme-toggle:hover {
  border-color: var(--red-mid); color: var(--red-mid);
  box-shadow: 0 0 24px var(--accent-glow);
}
.theme-toggle svg { width: 14px; height: 14px; }
.theme-toggle .sun { display: none; }
[data-theme="day"] .theme-toggle .moon { display: none; }
[data-theme="day"] .theme-toggle .sun { display: block; }

/* ═══════════════════════════════════════════════════════════════
   PAGE HEADER
   The section just below the fixed nav that names the page
   and shows breadcrumb and status badge.
   ═══════════════════════════════════════════════════════════════ */
.page-header {
  position: relative; z-index: 2;
  padding-top: calc(var(--nav-clearance) + 2rem);
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
body.has-lii-shell .page-header {
  padding-top: 1.25rem;
}
body.has-lii-shell.has-prototype-banner .page-header {
  padding-top: 1rem;
}
.page-header-inner {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
}
.page-breadcrumb {
  font: 500 var(--fs-micro)/1 var(--f-sans);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--gray); margin-bottom: .5rem;
  display: flex; align-items: center; gap: 6px;
}
.page-breadcrumb::before {
  content: ''; width: 20px; height: 1px; background: var(--red-mid);
}
.page-title {
  font: 700 var(--fs-h3)/1.1 var(--f-serif);
  letter-spacing: -.01em; color: var(--text);
  margin-bottom: .25rem;
}
.page-subtitle {
  font: 400 var(--fs-label)/1.5 var(--f-sans);
  color: var(--text-2);
}
.page-header-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════
   EYEBROW — Section label with decorative line
   ═══════════════════════════════════════════════════════════════ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font: 700 var(--fs-label)/1 var(--f-serif);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--red-mid); margin-bottom: 1.25rem;
}
[data-theme="day"] .eyebrow { color: var(--red); }
.eyebrow::before { content: ''; width: 24px; height: 2px; background: var(--red-mid); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   TAB NAVIGATION
   Horizontal tabs under the page header for switching sections.
   ═══════════════════════════════════════════════════════════════ */
.tab-nav {
  position: relative; z-index: 2;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  max-width: 100%;
}
.tab-nav-inner {
  display: flex; align-items: stretch;
  max-width: none; margin: 0 auto;
  padding: 0 var(--layout-edge);
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tab-nav-inner::-webkit-scrollbar { display: none; }
.tab-btn {
  display: flex; align-items: center; gap: 7px;
  padding: 12px 16px; border: none; background: none;
  font: 500 var(--fs-label)/1 var(--f-sans);
  letter-spacing: .02em; white-space: nowrap;
  color: var(--text-2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; /* sits on top of tab-nav border */
  transition: color .2s, border-color .2s;
  cursor: pointer;
}
.tab-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
  color: var(--red-mid);
  border-bottom-color: var(--red-mid);
}
[data-theme="day"] .tab-btn.active { color: var(--red); border-bottom-color: var(--red); }

/* RAF 10-section step grid — centered with content, no horizontal scroll */
.tab-nav--raf {
  overflow: visible;
  border-bottom: 1px solid var(--line);
}
.tab-nav--raf .tab-nav-inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-width: var(--layout-form-max);
  width: 100%;
  margin: 0 auto;
  padding: 10px var(--layout-edge-min) 14px;
  overflow: visible;
  box-sizing: border-box;
}
.workspace__tabs.tab-nav--raf .tab-nav-inner {
  max-width: none;
  margin: 0;
  padding: .75rem 1rem 1rem;
}
@media (min-width: 520px) {
  .tab-nav--raf .tab-nav-inner {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.tab-nav--raf .tab-btn {
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 6px;
  min-height: 54px;
  border-radius: 8px;
  border: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 0;
  background: var(--bg-2);
  white-space: normal;
  text-align: center;
  line-height: 1.2;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.tab-nav--raf .tab-btn:hover {
  border-color: var(--line-strong);
  background: rgba(200,40,65,.04);
}
.tab-nav--raf .tab-btn.active {
  color: var(--text);
  background: rgba(200,40,65,.1);
  border-color: rgba(200,40,65,.35);
  box-shadow: inset 0 -2px 0 var(--red-mid);
}
.tab-nav--raf .tab-btn__num {
  font: 700 10px/1 var(--f-mono);
  color: var(--gray);
  letter-spacing: .04em;
}
.tab-nav--raf .tab-btn.active .tab-btn__num { color: var(--red-mid); }
.tab-nav--raf .tab-btn__name {
  font: 600 11px/1.25 var(--f-sans);
  color: var(--text-2);
}
@media (min-width: 640px) {
  .tab-nav--raf .tab-btn__name { font-size: var(--fs-micro); }
}
.tab-nav--raf .tab-btn.active .tab-btn__name {
  color: var(--text);
  font-weight: 700;
}
.tab-nav--raf .tab-btn--optional .tab-btn__name { opacity: .75; }
.tab-nav--raf .tab-req {
  position: absolute;
  top: 5px;
  right: 7px;
  margin: 0;
  font-size: 9px;
  line-height: 1;
}

/* Tab panels — only the active panel is visible */
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-req { color: var(--red-mid); margin-left: 2px; font-weight: 700; }

/* RAF conditional reveals — default collapsed (all gates start "no") */
.raf-reveal {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  transition: max-height .35s ease, opacity .25s ease, margin-top .25s ease;
}
.raf-reveal--open {
  max-height: 2400px;
  opacity: 1;
  margin-top: .75rem;
}
.raf-gate-row + .raf-gate-row { margin-top: .35rem; }

/* Yes/No choice chips — No is default; selected option is a filled pill, other is ghost */
.yn-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.yn-toggle--compact .yn-toggle__opt span {
  padding: 5px 11px;
  font-size: 11px;
  min-width: 2.5rem;
  text-align: center;
}
.yn-toggle__opt {
  margin: 0;
  cursor: pointer;
  user-select: none;
}
.yn-toggle__opt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.yn-toggle__opt span {
  display: block;
  padding: 6px 14px;
  min-width: 2.75rem;
  text-align: center;
  border-radius: 6px;
  border: 1.5px solid var(--line-strong);
  font: 700 var(--fs-micro)/1 var(--f-sans);
  letter-spacing: .02em;
  color: var(--gray);
  background: transparent;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, opacity .15s;
  white-space: nowrap;
}
/* Inactive chip — clearly not chosen */
.yn-toggle--state-no .yn-toggle__opt--yes span,
.yn-toggle--state-yes .yn-toggle__opt--no span {
  border-color: var(--line);
  color: var(--gray);
  background: transparent;
  opacity: .55;
  box-shadow: none;
}
/* Active No (default) — solid neutral pill */
.yn-toggle--state-no .yn-toggle__opt--no span {
  background: var(--text-2);
  border-color: var(--text-2);
  color: var(--bg, #0a0608);
  opacity: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
}
[data-theme="day"] .yn-toggle--state-no .yn-toggle__opt--no span {
  background: #4a4340;
  border-color: #4a4340;
  color: #fff;
}
/* Active Yes — solid affirmative */
.yn-toggle--state-yes .yn-toggle__opt--yes span {
  background: var(--red-mid);
  border-color: var(--red-mid);
  color: #fff;
  opacity: 1;
  box-shadow: 0 1px 4px rgba(200,40,65,.45);
}
.yn-toggle__opt:not(:has(input:checked)):hover span {
  opacity: .85;
  border-color: var(--text-2);
  color: var(--text-2);
}
.yn-toggle--state-no .yn-toggle__opt--no:hover span {
  opacity: 1;
  border-color: var(--text-2);
  color: var(--bg, #0a0608);
}
[data-theme="day"] .yn-toggle--state-no .yn-toggle__opt--no:hover span { color: #fff; }
.yn-toggle--state-yes .yn-toggle__opt--yes:hover span {
  opacity: 1;
  background: var(--red-mid);
  color: #fff;
}

/* Gate row: label + toggle grouped — toggle hugs label, not screen edge */
.raf-gate-field {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  flex: 1;
  min-width: 0;
}
.raf-gate-field .yn-toggle {
  flex-shrink: 0;
  margin-left: auto;
}
.raf-gate-field--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: .4rem;
}
.raf-gate-field__label {
  font: 500 var(--fs-label)/1.3 var(--f-sans);
  color: var(--text);
  flex: 1;
  min-width: 0;
}
.raf-gate-field--stack .raf-gate-field__label {
  font: 600 var(--fs-label)/1.3 var(--f-sans);
}
#raf-save-status[data-state="saving"] { color: var(--text-2); }
#raf-save-status[data-state="ok"] { color: var(--green, #3d9a5c); }
#raf-save-status[data-state="error"] { color: var(--red-mid); }
#raf-save-status[data-state="dirty"] { color: var(--amber, #c9a227); }

/* ═══════════════════════════════════════════════════════════════
   PAGE MAIN CONTENT AREA
   ═══════════════════════════════════════════════════════════════ */
.page-main {
  position: relative; z-index: 2;
  padding-top: 2rem;
  padding-bottom: 6rem; /* space for FAB */
}
.section { margin-bottom: var(--section-gap); }

/* ═══════════════════════════════════════════════════════════════
   CARDS
   The glassmorphism card is the main UI surface across all pages.
   ═══════════════════════════════════════════════════════════════ */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 1.5rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.card-sm { padding: 1rem 1.25rem; border-radius: 10px; }
.card-title {
  font: 600 var(--fs-label)/1 var(--f-sans);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--red-mid); margin-bottom: 1rem;
  display: flex; align-items: center; gap: 8px;
}
.card-title::before { content: ''; width: 16px; height: 2px; background: var(--red-mid); flex-shrink: 0; }
[data-theme="day"] .card-title { color: var(--red); }
[data-theme="day"] .card-title::before { background: var(--red); }

/* Stat card — large number with label */
.stat-card {
  display: flex; flex-direction: column;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 14px; padding: 1.25rem 1.5rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.stat-card-num {
  font: 700 clamp(26px,6vw,42px)/1 var(--f-serif);
  background: linear-gradient(135deg, var(--red-mid), var(--red-bright));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: .02em;
  margin-bottom: .4rem;
}
.stat-card-label {
  font: 500 var(--fs-micro)/1 var(--f-sans);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gray);
}
.stat-card-sub {
  margin-top: .5rem;
  font: 400 var(--fs-micro)/1.4 var(--f-sans);
  color: var(--text-2);
}

/* Stats row — horizontal row of stat cards */
.stats-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: var(--section-gap);
}
@media (min-width: 600px) { .stats-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) { .stats-row--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* Card grid — equal-width card layout */
.card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}
@media (min-width: 600px) { .card-grid--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 860px) { .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ═══════════════════════════════════════════════════════════════
   STATUS BADGES
   Color-coded chips that show case status at a glance.
   ═══════════════════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 4px;
  font: 600 var(--fs-micro)/1 var(--f-mono);
  letter-spacing: .06em; text-transform: uppercase;
}
.badge svg { width: 10px; height: 10px; flex-shrink: 0; }
.badge-open      { background: rgba(68,136,221,.15); color: var(--status-open);      border: 1px solid rgba(68,136,221,.3); }
.badge-scheduled { background: rgba(136,102,204,.15); color: var(--status-scheduled); border: 1px solid rgba(136,102,204,.3); }
.badge-inspected { background: rgba(68,170,238,.15); color: var(--status-inspected);  border: 1px solid rgba(68,170,238,.3); }
.badge-reported  { background: rgba(238,136,51,.15);  color: var(--status-reported);  border: 1px solid rgba(238,136,51,.3); }
.badge-invoiced  { background: rgba(238,102,51,.15);  color: var(--status-invoiced);  border: 1px solid rgba(238,102,51,.3); }
.badge-paid      { background: rgba(68,187,119,.15);  color: var(--status-paid);      border: 1px solid rgba(68,187,119,.3); }
.badge-closed    { background: rgba(68,187,119,.15);  color: var(--status-closed);    border: 1px solid rgba(68,187,119,.3); }
.badge-cancelled { background: rgba(106,90,85,.15);   color: var(--status-cancelled); border: 1px solid var(--line-strong); }
.badge-primary   { background: rgba(200,40,65,.15); color: var(--red-mid); border: 1px solid rgba(200,40,65,.3); }
.badge-info      { background: rgba(68,136,221,.12); color: #6699EE; border: 1px solid rgba(68,136,221,.2); }

/* Condition rating badges */
.badge-good      { background: rgba(68,187,119,.15); color: #44BB77; border: 1px solid rgba(68,187,119,.3); }
.badge-fair      { background: rgba(238,187,51,.15); color: #EEBB33; border: 1px solid rgba(238,187,51,.3); }
.badge-poor      { background: rgba(238,102,51,.15); color: #EE6633; border: 1px solid rgba(238,102,51,.3); }
.badge-damaged   { background: rgba(204,44,44,.15);  color: #CC2C2C; border: 1px solid rgba(204,44,44,.3); }
.badge-high      { background: rgba(238,187,51,.15); color: #EEBB33; border: 1px solid rgba(238,187,51,.3); }
.badge-urgent    { background: rgba(204,44,44,.15);  color: #EE5555; border: 1px solid rgba(204,44,44,.35); }
.badge-normal    { background: rgba(106,90,85,.12); color: var(--text-2); border: 1px solid var(--line-strong); }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 8px;
  font: 600 var(--fs-label)/1 var(--f-sans);
  letter-spacing: .02em; cursor: pointer;
  transition: all .3s; border: none;
  white-space: nowrap;
}
.btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.btn-primary {
  background: linear-gradient(135deg, var(--red), var(--red-bright));
  color: #fff;
}
.btn-primary:hover { box-shadow: 0 8px 24px -4px var(--accent-glow); transform: translateY(-1px); }
.btn-secondary {
  background: transparent; color: var(--text-2);
  border: 1px solid var(--card-border);
}
.btn-secondary:hover { border-color: var(--red-mid); color: var(--red-mid); }
.btn-ghost {
  background: transparent; color: var(--red-mid);
  border: 1px solid var(--red-mid);
}
.btn-ghost:hover { background: rgba(200,40,65,.1); }
.btn-sm { padding: 7px 13px; font-size: var(--fs-micro); }
.btn-lg { padding: 14px 22px; font-size: var(--fs-body); min-height: 48px; }
.btn-icon {
  width: 34px; height: 34px; padding: 0;
  border-radius: 8px;
  background: var(--card-bg); color: var(--text-2);
  border: 1px solid var(--card-border);
  justify-content: center;
}
.btn-icon:hover { border-color: var(--red-mid); color: var(--red-mid); }
.btn-icon svg { width: 16px; height: 16px; }

/* ═══════════════════════════════════════════════════════════════
   DATA TABLE
   Used for claims lists, case logs, invoice history, etc.
   ═══════════════════════════════════════════════════════════════ */
.table-wrap {
  overflow-x: auto; border-radius: 14px;
  border: 1px solid var(--card-border);
  background: var(--card-bg);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  max-width: 100%;
}
table {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-label);
}
thead { border-bottom: 1px solid var(--line-strong); }
th {
  padding: 12px 16px;
  font: 700 var(--fs-micro)/1 var(--f-sans);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--gray); text-align: left;
  background: var(--bg-2);
  white-space: nowrap;
}
th:first-child { border-radius: 14px 0 0 0; }
th:last-child  { border-radius: 0 14px 0 0; }
td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tbody tr { transition: background .2s; }
tbody tr:hover { background: rgba(182,45,63,.05); }
.td-mono {
  font: 500 var(--fs-micro)/1 var(--f-mono);
  color: var(--text-2); letter-spacing: .05em;
}
.td-actions { display: flex; align-items: center; gap: 6px; }

/* ═══════════════════════════════════════════════════════════════
   FORM COMPONENTS
   ═══════════════════════════════════════════════════════════════ */
.form-section {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 14px; padding: 1.5rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  margin-bottom: 1.5rem;
}
.form-section-title {
  display: flex; align-items: center; gap: 10px;
  font: 600 var(--fs-label)/1 var(--f-serif);
  letter-spacing: .02em; color: var(--text);
  margin-bottom: 1.25rem; padding-bottom: .75rem;
  border-bottom: 1px solid var(--line);
}
.form-section-title svg { width: 18px; height: 18px; color: var(--red-mid); flex-shrink: 0; }
.form-section-title .form-section-num {
  font: 700 var(--fs-micro)/1 var(--f-mono);
  color: var(--red-mid); letter-spacing: .1em;
}

/* Two or three column form grid */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 560px) { .form-grid--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 860px) { .form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.form-grid--full { grid-column: 1 / -1; }

.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-label {
  font: 600 var(--fs-micro)/1 var(--f-sans);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-2);
}
.form-label .required { color: var(--red-mid); margin-left: 3px; }
.form-input,
.form-select,
.form-textarea {
  width: 100%; padding: 10px 14px;
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--card-border); border-radius: 8px;
  font: 400 var(--fs-body)/1 var(--f-sans);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
  -webkit-appearance: none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--red-mid);
  box-shadow: 0 0 0 2px rgba(200,40,65,.15);
}
.form-textarea {
  resize: vertical; min-height: 80px; line-height: 1.5;
}
.form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236A5A55' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}
.form-hint {
  font: 400 var(--fs-micro)/1.4 var(--f-sans);
  color: var(--gray);
}

/* Checkbox row */
.form-check {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  font: 400 var(--fs-label)/1.4 var(--f-sans);
  color: var(--text-2);
}
.form-check input[type="checkbox"] {
  width: 16px; height: 16px; border-radius: 3px;
  border: 1px solid var(--card-border);
  background: var(--bg-2); cursor: pointer;
  flex-shrink: 0; accent-color: var(--red-mid);
}

/* Radio row */
.radio-group { display: flex; flex-wrap: wrap; gap: 8px; }
.radio-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 7px;
  font: 500 var(--fs-label)/1 var(--f-sans);
  color: var(--text-2);
  border: 1px solid var(--card-border);
  background: var(--bg-2); cursor: pointer;
  transition: all .2s;
}
.radio-btn:has(input:checked) {
  background: rgba(200,40,65,.12);
  color: var(--red-mid);
  border-color: rgba(200,40,65,.35);
}
.radio-btn input { display: none; }

/* Photo upload zone */
.photo-zone {
  border: 2px dashed var(--line-strong); border-radius: 12px;
  padding: 2rem; text-align: center;
  cursor: pointer; transition: all .3s;
  background: var(--bg-2);
}
.photo-zone:hover {
  border-color: var(--red-mid);
  background: rgba(200,40,65,.05);
}
.photo-zone svg { width: 40px; height: 40px; color: var(--gray); margin: 0 auto .75rem; }
.photo-zone p {
  font: 500 var(--fs-label)/1.5 var(--f-sans);
  color: var(--text-2);
}
.photo-zone span {
  font: 400 var(--fs-micro)/1 var(--f-sans);
  color: var(--gray);
}
/* Grid of photo thumbnails */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
@media (min-width: 600px) { .photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.photo-thumb {
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--bg-2);
  border: 1px solid var(--card-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--gray); overflow: hidden;
  position: relative;
}
.photo-thumb svg { width: 24px; height: 24px; }
.photo-thumb .photo-thumb-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(10,6,8,.7);
  font: 400 var(--fs-micro)/1 var(--f-mono);
  color: var(--text-2); padding: 4px 6px;
  text-align: center;
}
.photo-thumb--filled { cursor: zoom-in; }
.photo-thumb--filled img { width: 100%; height: 100%; object-fit: cover; }
.photo-thumb__remove { cursor: pointer; }

/* Photo lightbox — Stage 6 gallery zoom */
body.photo-lightbox-open { overflow: hidden; }
.photo-lightbox {
  position: fixed; inset: 0; z-index: 500;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
}
.photo-lightbox[hidden] { display: none !important; }
.photo-lightbox__backdrop {
  position: absolute; inset: 0;
  background: rgba(6, 4, 5, .88);
  backdrop-filter: blur(8px);
}
.photo-lightbox__panel {
  position: relative; z-index: 1;
  width: min(96vw, 920px);
  max-height: 92vh;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem;
}
.photo-lightbox__figure { margin: 0; min-width: 0; }
.photo-lightbox__img {
  display: block; width: 100%; max-height: 78vh;
  object-fit: contain; border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.photo-lightbox__caption {
  margin-top: .65rem;
  font: 500 var(--fs-label)/1.4 var(--f-sans);
  color: var(--text-2);
  text-align: center;
}
.photo-lightbox__close {
  position: absolute; top: -.25rem; right: 0;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg-2); color: var(--text);
  font-size: 22px; line-height: 1;
  cursor: pointer;
}
.photo-lightbox__nav {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg-2); color: var(--text);
  font-size: 24px; line-height: 1;
  cursor: pointer; flex-shrink: 0;
}
.photo-lightbox__nav:hover,
.photo-lightbox__close:hover {
  border-color: var(--red-mid);
  color: var(--red-mid);
}
.photo-thumb__remove {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  border: none; background: rgba(10,6,8,.75); color: #fff;
  font-size: 14px; line-height: 1; cursor: pointer;
}

/* Inline RAF photo slots — compact row per field */
.photo-slot {
  margin: .5rem 0;
  padding: .5rem .65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-2);
}
.photo-slot--inline {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  flex: 1;
  min-width: 0;
}
.photo-slot--missing { border-color: var(--red-mid); box-shadow: 0 0 0 1px rgba(200,40,65,.25); }
.photo-slot--inline.photo-slot--missing {
  border: 1px solid var(--red-mid);
  border-radius: 8px;
  padding: .35rem .5rem;
}
.photo-slot__row {
  display: flex; align-items: center; gap: .5rem;
  flex-wrap: nowrap; min-width: 0;
}
.photo-slot--inline .photo-slot__row { gap: .4rem; }
.photo-slot__header {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .75rem; flex-wrap: wrap;
}
.photo-slot--inline .photo-slot__header { display: none; }
.photo-slot__label {
  font: 600 var(--fs-label)/1.3 var(--f-sans);
  flex-shrink: 0;
  max-width: 140px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.photo-slot--inline .photo-slot__label {
  font: 500 var(--fs-micro)/1.2 var(--f-sans);
  color: var(--text-2);
  max-width: 100px;
}
.photo-slot__pr {
  font: 700 10px/1 var(--f-mono);
  color: var(--red-mid); background: rgba(200,40,65,.12);
  padding: 2px 6px; border-radius: 4px;
  flex-shrink: 0;
}
.photo-slot__count {
  font: 500 var(--fs-micro)/1 var(--f-mono);
  color: var(--text-2);
  flex-shrink: 0;
  min-width: 1.25rem;
  text-align: center;
}
.photo-slot__strip {
  display: flex; align-items: center; gap: 4px;
  flex: 1; min-width: 0; overflow-x: auto;
  scrollbar-width: thin;
}
.photo-slot__grid {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
.photo-slot--inline .photo-slot__grid .photo-thumb {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 6px;
}
.photo-slot--inline .photo-slot__grid .photo-thumb-label { display: none; }
.photo-slot__add {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border: 1.5px dashed var(--line-strong); border-radius: 6px;
  cursor: pointer; transition: border-color .2s, background .2s;
  background: var(--bg-2); color: var(--gray);
}
.photo-slot__add:hover {
  border-color: var(--red-mid);
  background: rgba(200,40,65,.05);
  color: var(--red-mid);
}
.photo-slot__add svg { width: 18px; height: 18px; }
.photo-slot__add span {
  font: 600 9px/1 var(--f-mono);
  margin-top: 1px;
}
.photo-slot__drop { margin-top: .5rem; padding: 1.25rem; }
.photo-slot--inline .photo-slot__drop { display: none; }
.photo-slot__grid:empty + .photo-slot__drop { margin-top: 0; }
/* Photo column left — icons stay vertically aligned across rows */
.raf-gate-row--with-photo,
.raf-photo-line {
  display: grid;
  grid-template-columns: 100px 1fr;
  column-gap: .75rem;
  row-gap: .35rem;
  align-items: center;
}
.raf-gate-row--with-photo > .photo-slot,
.raf-photo-line > .photo-slot {
  grid-column: 1;
  justify-self: start;
  width: 100%;
  max-width: 100px;
}
.raf-gate-row--with-photo > .raf-gate-field,
.raf-gate-row--with-photo > .form-group,
.raf-photo-line > .raf-gate-field,
.raf-photo-line__content {
  grid-column: 2;
  min-width: 0;
  margin: 0;
}
.raf-gate-row--with-photo > .raf-gate-field {
  grid-row: 1 / -1;
  align-self: center;
}
.raf-gate-row--with-photo .photo-slot--inline .photo-slot__label,
.raf-gate-row--with-photo .photo-slot--inline .photo-slot__count,
.raf-photo-line .photo-slot--inline .photo-slot__label,
.raf-photo-line .photo-slot--inline .photo-slot__count {
  display: none;
}
.raf-gate-row--with-photo .photo-slot--inline .photo-slot__row,
.raf-photo-line .photo-slot--inline .photo-slot__row {
  width: 100%;
}
.raf-gate-row--with-photo .photo-slot--inline .photo-slot__strip,
.raf-photo-line .photo-slot--inline .photo-slot__strip {
  max-width: 100%;
  overflow-x: auto;
}
.raf-photo-line { margin: .35rem 0; }
.raf-photo-line__content .raf-gate-field--stack { gap: .35rem; }
.raf-gate-row.mb-md,
.raf-gate-row.mb-sm { margin-bottom: .35rem !important; }
.raf-photo-stack { display: flex; flex-direction: column; gap: .5rem; }
.raf-room-card { margin-bottom: 1rem; }
.raf-room-card__head {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end;
  margin-bottom: 1rem;
}
.raf-room-card__head .form-group { flex: 1; min-width: 180px; margin: 0; }
.raf-dir-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.raf-comp-block { padding: .75rem 0; border-bottom: 1px solid var(--line); }
.raf-comp-block:last-child { border-bottom: none; }

/* ═══════════════════════════════════════════════════════════════
   DATA ROW (key:value pairs in cards)
   ═══════════════════════════════════════════════════════════════ */
.data-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .5rem 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-label);
}
.data-row:last-child { border-bottom: none; }
.data-label { color: var(--text-2); }
.data-value {
  font: 500 var(--fs-label)/1 var(--f-mono);
  color: var(--text); text-align: right;
}
.data-value.accent { color: var(--red-mid); }
.data-value.green { color: #44BB77; }

/* ═══════════════════════════════════════════════════════════════
   CASE LIFECYCLE PIPELINE
   Visual 8-stage progress indicator.
   The active stage lights up, completed stages are solid.
   ═══════════════════════════════════════════════════════════════ */
.pipeline {
  display: flex; align-items: flex-start;
  overflow-x: auto; gap: 0;
  padding: 1rem 0 1.5rem;
  scrollbar-width: none;
}
.pipeline::-webkit-scrollbar { display: none; }
.pipeline-stage {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; flex: 1; min-width: 70px;
  position: relative;
}
/* Connecting line between stages */
.pipeline-stage:not(:last-child)::after {
  content: '';
  position: absolute; top: 20px; left: calc(50% + 20px);
  right: calc(-50% + 20px);
  height: 2px; background: var(--line-strong);
  z-index: 0;
}
.pipeline-stage.done:not(:last-child)::after,
.pipeline-stage.active:not(:last-child)::after {
  background: linear-gradient(90deg, var(--red-mid), var(--line-strong));
}
.pipeline-dot {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--line-strong);
  background: var(--bg-2); color: var(--gray);
  position: relative; z-index: 1;
  transition: all .3s;
}
.pipeline-dot svg { width: 18px; height: 18px; }
.pipeline-stage.done .pipeline-dot {
  border-color: var(--red-mid);
  background: rgba(200,40,65,.15);
  color: var(--red-mid);
}
.pipeline-stage.active .pipeline-dot {
  border-color: var(--red-mid);
  background: var(--red-mid);
  color: #fff;
  box-shadow: 0 0 20px var(--accent-glow);
}
.pipeline-label {
  font: 500 var(--fs-micro)/1.3 var(--f-sans);
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--gray); text-align: center;
}
.pipeline-stage.active .pipeline-label { color: var(--red-mid); font-weight: 700; }
.pipeline-stage.done .pipeline-label { color: var(--text-2); }

/* ═══════════════════════════════════════════════════════════════
   TIMELINE — vertical event list
   ═══════════════════════════════════════════════════════════════ */
.timeline { display: flex; flex-direction: column; gap: 0; }
.timeline-item {
  display: flex; gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.timeline-item:last-child { border-bottom: none; }
.timeline-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--red-mid); flex-shrink: 0;
  margin-top: .45rem;
  box-shadow: 0 0 8px var(--accent-glow);
}
.timeline-dot.gray { background: var(--gray); box-shadow: none; }
.timeline-content { flex: 1; }
.timeline-title {
  font: 600 var(--fs-label)/1.3 var(--f-sans);
  color: var(--text); margin-bottom: 2px;
}
.timeline-meta {
  font: 400 var(--fs-micro)/1.4 var(--f-mono);
  color: var(--gray);
}

/* ═══════════════════════════════════════════════════════════════
   INSPECTION COMPONENT CARD
   Used in elevation, roof, and interior inspection pages.
   ═══════════════════════════════════════════════════════════════ */
.component-card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 12px; padding: 1.25rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color .3s;
}
.component-card:hover { border-color: rgba(200,40,65,.35); }
.component-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
.component-card-name {
  display: flex; align-items: center; gap: 8px;
  font: 600 var(--fs-label)/1 var(--f-sans);
  color: var(--text);
}
.component-card-name svg {
  width: 20px; height: 20px; color: var(--red-mid);
}
.component-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (min-width: 600px) { .component-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 860px) { .component-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ═══════════════════════════════════════════════════════════════
   CALENDAR / SCHEDULE GRID
   For the scheduler and scheduling pages.
   ═══════════════════════════════════════════════════════════════ */
.calendar-grid {
  display: grid;
  grid-template-columns: 60px repeat(7, minmax(0, 1fr)); /* minmax(0) lets cols shrink below content */
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--card-border);
  border-radius: 12px; overflow: hidden;
}
.cal-header {
  background: var(--bg-2); padding: 10px 8px;
  font: 700 var(--fs-micro)/1 var(--f-sans);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--gray); text-align: center;
}
.cal-time {
  background: var(--bg-2); padding: 8px 6px;
  font: 400 var(--fs-micro)/1 var(--f-mono);
  color: var(--gray); text-align: right;
}
.cal-cell {
  background: var(--card-bg); padding: 6px;
  min-height: 48px;
  overflow: hidden; /* clip content when column shrinks on mobile */
}
.cal-cell.has-event { background: rgba(200,40,65,.06); }
.cal-event {
  background: rgba(200,40,65,.2);
  border-left: 3px solid var(--red-mid);
  border-radius: 4px; padding: 4px 6px;
  font: 500 var(--fs-micro)/1.3 var(--f-sans);
  color: var(--red-mid);
  margin-bottom: 2px;
}
.cal-event-blue {
  background: rgba(68,136,221,.15);
  border-left-color: var(--status-open);
  color: var(--status-open);
}
.cal-event-green {
  background: rgba(68,187,119,.15);
  border-left-color: var(--status-paid);
  color: var(--status-paid);
}

/* ═══════════════════════════════════════════════════════════════
   ALERT / NOTICE BANNERS
   ═══════════════════════════════════════════════════════════════ */
.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; border-radius: 10px;
  font: 400 var(--fs-label)/1.5 var(--f-sans);
  margin-bottom: 1rem;
}
.alert svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert-info {
  background: rgba(68,136,221,.1);
  border: 1px solid rgba(68,136,221,.25);
  color: #88AADD;
}
.alert-warning {
  background: rgba(238,187,51,.1);
  border: 1px solid rgba(238,187,51,.25);
  color: #CCAA44;
}
.alert-success {
  background: rgba(68,187,119,.1);
  border: 1px solid rgba(68,187,119,.25);
  color: #55AA77;
}
.alert-danger {
  background: rgba(204,44,44,.1);
  border: 1px solid rgba(204,44,44,.25);
  color: #CC5555;
}

/* ═══════════════════════════════════════════════════════════════
   LIST ITEMS — case/inspection list rows
   ═══════════════════════════════════════════════════════════════ */
.list-item {
  display: flex; align-items: center; gap: 12px;
  padding: .875rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--card-bg); cursor: pointer;
  transition: background .2s;
}
.list-item:last-child { border-bottom: none; }
.list-item:hover { background: rgba(182,45,63,.05); }

/* Assignment cards — technician dashboard (Stage 4, mobile-first) */
.list-card {
  padding: 1rem 1.125rem;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.list-card:hover {
  border-color: var(--red-mid);
  box-shadow: 0 10px 28px -8px var(--accent-glow);
  transform: translateY(-2px);
}
.list-card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; margin-bottom: .5rem;
}
.list-card-title { font-weight: 600; margin-bottom: .25rem; }
.list-card-meta { font-size: var(--fs-label); color: var(--text-2); line-height: 1.5; }

/* Empty states — Stage 2 */
.empty-state {
  padding: 2rem 1.5rem;
  text-align: center;
  border-radius: 12px;
  background: var(--card-bg);
  border: 1px dashed var(--card-border);
  color: var(--text-2);
  line-height: 1.6;
}
.empty-state a { color: var(--red-mid); text-decoration: underline; }
.list-item-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(200,40,65,.1);
  border: 1px solid rgba(200,40,65,.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; color: var(--red-mid);
}
.list-item-icon svg { width: 18px; height: 18px; }
.list-item-body { flex: 1; min-width: 0; }
.list-item-title {
  font: 600 var(--fs-label)/1.3 var(--f-sans);
  color: var(--text); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.list-item-sub {
  font: 400 var(--fs-micro)/1.3 var(--f-mono);
  color: var(--gray);
}
.list-item-meta {
  flex-shrink: 0; display: flex; flex-direction: column;
  align-items: flex-end; gap: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   FAB — Floating Action Button (back to dashboard)
   ═══════════════════════════════════════════════════════════════ */
.fab {
  display: none;
  position: fixed; bottom: 24px; right: 24px; z-index: 200;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--card-bg); border: 1px solid var(--red-mid);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px -8px var(--accent-glow), 0 0 0 1px var(--red-mid) inset;
  cursor: pointer; align-items: center; justify-content: center;
  color: var(--red-mid); transition: transform .3s, box-shadow .3s;
}
[data-show-fab] .fab { display: flex; }
.fab:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 40px -4px var(--accent-glow);
}
.fab svg { width: 26px; height: 26px; filter: drop-shadow(0 0 8px var(--accent-glow)); }

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR (used in admin page)
   ═══════════════════════════════════════════════════════════════ */
.sidebar {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 14px; padding: 1.25rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  position: sticky; top: calc(var(--nav-h) + 1rem);
}
.sidebar-section { margin-bottom: 1.5rem; }
.sidebar-section:last-child { margin-bottom: 0; }
.sidebar-label {
  font: 700 var(--fs-micro)/1 var(--f-sans);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gray); margin-bottom: .75rem;
}
.sidebar-link {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 8px;
  font: 500 var(--fs-label)/1 var(--f-sans);
  color: var(--text-2); margin-bottom: 2px;
  transition: all .2s;
}
.sidebar-link svg { width: 16px; height: 16px; flex-shrink: 0; }
.sidebar-link:hover { background: var(--bg-2); color: var(--text); }
.sidebar-link.active {
  background: rgba(200,40,65,.12);
  color: var(--red-mid);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION DIVIDER
   ═══════════════════════════════════════════════════════════════ */
.divider {
  border: none; border-top: 1px solid var(--line);
  margin: 1.5rem 0;
}

/* ═══════════════════════════════════════════════════════════════
   PROGRESS BAR (used in financials, stages, etc.)
   ═══════════════════════════════════════════════════════════════ */
.progress { height: 6px; background: var(--line-strong); border-radius: 3px; overflow: hidden; }
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--red), var(--red-bright));
  border-radius: 3px;
}

/* ═══════════════════════════════════════════════════════════════
   DAMAGE TYPE CARD
   ═══════════════════════════════════════════════════════════════ */
.damage-card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 12px; padding: 1.25rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: border-color .3s, box-shadow .3s;
  cursor: pointer;
}
.damage-card:hover {
  border-color: var(--red-mid);
  box-shadow: 0 8px 32px -8px var(--accent-glow);
}
.damage-card.selected {
  border-color: var(--red-mid);
  background: rgba(200,40,65,.1);
}
.damage-card-icon {
  width: 48px; height: 48px; color: var(--icon-fill);
  filter: drop-shadow(0 0 8px var(--accent-glow));
  margin-bottom: .75rem;
}
.damage-card-name {
  font: 600 var(--fs-label)/1 var(--f-sans);
  color: var(--text); margin-bottom: .25rem;
}
.damage-card-desc {
  font: 400 var(--fs-micro)/1.4 var(--f-sans);
  color: var(--text-2);
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes logoGlow {
  0%, 100% { opacity: .6; }
  50%       { opacity: 1; }
}
.fade-in { animation: fadeIn .4s ease both; }
.fade-in-delay-1 { animation-delay: .06s; }
.fade-in-delay-2 { animation-delay: .12s; }
.fade-in-delay-3 { animation-delay: .18s; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (< 640px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 639px) {
  :root {
    --nav-logo-h: clamp(120px, 38vw, 160px);
  }
  .page-header {
    padding-top: calc(var(--nav-clearance) + 1.25rem);
  }
  body.has-lii-shell .page-header {
    padding-top: 1.25rem;
  }
  .portal-nav-links {
    max-width: 46%;
  }
  .portal-nav-user {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet+ (640px)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 640px) {
  .tab-btn { padding: 14px 20px; font-size: var(--fs-label); }
  .portal-nav-link { padding: 7px 12px; font-size: var(--fs-label); }
}

/* ═══════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════ */
.text-red   { color: var(--red-mid); }
.text-muted { color: var(--text-2); }
.text-gray  { color: var(--gray); }
.text-mono  { font-family: var(--f-mono); }
.text-serif { font-family: var(--f-serif); }
.text-sm    { font-size: var(--fs-label); }
.text-xs    { font-size: var(--fs-micro); }
.text-right { text-align: right; }
.flex       { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center  { display: flex; align-items: center; }
.flex-wrap  { flex-wrap: wrap; }
.gap-sm     { gap: .5rem; }
.gap-md     { gap: 1rem; }
.gap-lg     { gap: 1.5rem; }
.mb-sm      { margin-bottom: .75rem; }
.mb-md      { margin-bottom: 1.25rem; }
.mb-lg      { margin-bottom: 2rem; }
.mt-sm      { margin-top: .75rem; }
.w-full     { width: 100%; }
.hidden     { display: none !important; }

/* Font-size variable aliases (--t-* mirrors --fs-* for inline style use) */
:root {
  --t-micro: var(--fs-micro);
  --t-label: var(--fs-label);
  --t-body:  var(--fs-body);
  --border:  var(--card-border);
}
/* Color shorthand for template use */
.red   { color: var(--red-mid); }
.green { color: #44BB77; }
.accent { color: var(--red-mid); }

/* ═══════════════════════════════════════════════════════════════
   CHECKLIST GRID — for multi-column checkbox lists
   ═══════════════════════════════════════════════════════════════ */
.checklist-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem 1.5rem;
}
@media (min-width: 600px) { .checklist-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Badge row — horizontal grouping of badges */
.badge-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: .5rem; }

/* ═══════════════════════════════════════════════════════════════
   DAMAGE CONFIRM GRID (roof-inspection — hail / not hail / inconclusive)
   ═══════════════════════════════════════════════════════════════ */
.damage-confirm-grid {
  display: flex; gap: .75rem; flex-wrap: wrap;
}
.damage-confirm-grid .radio-btn {
  flex: 1; min-width: 140px;
  justify-content: center;
  padding: 1rem; border-radius: 12px;
}
.radio-btn-content { display: flex; align-items: center; gap: 8px; }
.damage-confirm-grid .radio-btn:has(input:checked) {
  background: rgba(200,40,65,.15);
  border-color: var(--red-mid);
  color: var(--red-mid);
}

/* ═══════════════════════════════════════════════════════════════
   SLOPE RESULT DISPLAY (roof-inspection)
   ═══════════════════════════════════════════════════════════════ */
.slope-result {
  padding: .875rem 1rem;
  background: rgba(200,40,65,.08);
  border: 1px solid rgba(200,40,65,.2);
  border-radius: 8px;
  font: 500 var(--fs-label)/1.4 var(--f-mono);
  color: var(--text-2);
  margin-top: .75rem;
}
.slope-result strong { color: var(--red-mid); }

/* ═══════════════════════════════════════════════════════════════
   DAMAGE TYPE GRID (damage-assessment overview)
   ═══════════════════════════════════════════════════════════════ */
.damage-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 2rem;
}
@media (min-width: 600px) { .damage-type-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .damage-type-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.damage-type-card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 14px; padding: 1.25rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  cursor: pointer; transition: border-color .3s, box-shadow .3s;
  display: flex; flex-direction: column; gap: 6px;
}
.damage-type-card:hover {
  border-color: rgba(200,40,65,.4);
  box-shadow: 0 6px 24px -6px var(--accent-glow);
}
.damage-type-card.confirmed { border-color: rgba(204,44,44,.35); }
.damage-type-card.active   { border-color: rgba(238,187,51,.35); }
.damage-type-icon { color: var(--red-mid); margin-bottom: .5rem; }
.damage-type-name {
  font: 700 var(--fs-label)/1 var(--f-sans);
  color: var(--text);
}
.damage-type-severity {
  font: 400 var(--fs-micro)/1 var(--f-sans);
  color: var(--text-2);
}
/* Banner when a damage type is not present */
.no-damage-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 1.25rem 1.5rem; border-radius: 12px;
  background: rgba(68,187,119,.08);
  border: 1px solid rgba(68,187,119,.2);
  color: #44BB77;
  font: 500 var(--fs-label)/1.5 var(--f-sans);
  margin-bottom: 1.5rem;
}
.no-damage-banner svg { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   ROOM SELECTOR (interior-inspection)
   ═══════════════════════════════════════════════════════════════ */
.room-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin-bottom: 1.5rem;
}
@media (min-width: 600px) { .room-selector { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 860px) { .room-selector { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.room-card {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 12px; padding: 1rem 1.25rem;
  cursor: pointer; transition: border-color .3s, background .3s;
}
.room-card:hover { border-color: rgba(200,40,65,.4); }
.room-card.active {
  border-color: var(--red-mid);
  background: rgba(200,40,65,.1);
}
.room-card-name {
  font: 600 var(--fs-label)/1 var(--f-sans);
  color: var(--text); margin-bottom: .5rem;
  display: flex; align-items: center; gap: 8px;
}
.room-card-status { font-size: var(--fs-micro); }
.room-card-add {
  border-style: dashed;
  align-items: center; justify-content: center;
}
.room-card-add .room-card-name { margin: 0; color: var(--text-2); justify-content: center; }
/* Banner showing which room is currently being edited */
.active-room-banner {
  padding: .875rem 1.25rem; border-radius: 10px;
  background: rgba(200,40,65,.08); border: 1px solid rgba(200,40,65,.2);
  font: 400 var(--fs-label)/1.4 var(--f-sans); color: var(--text-2);
  margin-bottom: 2rem;
}
.active-room-banner strong { color: var(--red-mid); }

/* ═══════════════════════════════════════════════════════════════
   STAIN MAP (interior ceiling — visual dot overlay)
   ═══════════════════════════════════════════════════════════════ */
.stain-map-area {
  background: var(--bg-2); border: 1px solid var(--card-border);
  border-radius: 12px; padding: 1.5rem; position: relative;
  min-height: 180px;
}
.stain-map-grid { position: absolute; inset: 0; }
.stain-dot {
  position: absolute;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(238,187,51,.5); border: 2px solid #EEBB33;
  cursor: pointer; transform: translate(-50%, -50%);
  transition: transform .2s;
}
.stain-dot:hover { transform: translate(-50%,-50%) scale(1.3); }
.stain-dot.active { background: rgba(204,44,44,.5); border-color: #CC2C2C; }
.stain-map-hint {
  position: absolute; bottom: .75rem; left: 0; right: 0;
  text-align: center;
  font: 400 var(--fs-micro)/1 var(--f-sans); color: var(--gray);
}
/* Moisture scale reference bar */
.moisture-scale-bar {
  display: flex; border-radius: 8px; overflow: hidden; height: 28px;
}
.moisture-scale-seg {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font: 600 var(--fs-micro)/1 var(--f-sans);
}
.moisture-scale-seg.good    { background: rgba(68,187,119,.2); color: #44BB77; }
.moisture-scale-seg.warning { background: rgba(238,187,51,.2); color: #EEBB33; }
.moisture-scale-seg.danger  { background: rgba(204,44,44,.2);  color: #CC2C2C; }

/* ═══════════════════════════════════════════════════════════════
   REPORT PAGE PREVIEW SIMULATION (reports)
   ═══════════════════════════════════════════════════════════════ */
.report-preview-toolbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 1rem; flex-wrap: wrap;
}
.report-page-sim {
  background: #fff; color: #1A1A1A;
  border-radius: 12px; padding: 2.5rem;
  border: 1px solid var(--card-border);
  max-width: 800px; margin: 0 auto;
  font-family: Georgia, "Times New Roman", serif;
  box-shadow: 0 8px 32px -8px rgba(0,0,0,.3);
}
[data-theme="day"] .report-page-sim { background: #fff; }
.report-page-sim-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 1.5rem; padding-bottom: 1rem;
  border-bottom: 2px solid #C82841;
}
.report-logo-area {
  font: 700 22px/1 "Playfair Display", Georgia, serif;
  color: #C82841; letter-spacing: .03em;
}
.report-meta { text-align: right; }
.report-meta-line { font-size: 11px; color: #444; margin-bottom: 2px; }
.report-page-title {
  font: 700 26px/1.2 "Playfair Display", Georgia, serif;
  color: #1A1A1A; margin-bottom: .25rem;
}
.report-page-sub { font-size: 13px; color: #666; margin-bottom: 1.5rem; }
.report-section-head {
  font: 700 13px/1 Georgia, serif;
  letter-spacing: .06em; text-transform: uppercase;
  color: #C82841; margin: 1.25rem 0 .5rem;
  padding-bottom: .4rem; border-bottom: 1px solid rgba(200,40,65,.2);
}
.report-body-text { font-size: 13px; line-height: 1.6; color: #333; margin-bottom: .75rem; }
.report-estimate-callout {
  background: rgba(200,40,65,.08); border: 2px solid rgba(200,40,65,.3);
  border-radius: 8px; padding: 1rem 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  margin: 1rem 0;
}
.report-estimate-label { font: 600 12px/1 Georgia, serif; color: #C82841; letter-spacing: .04em; text-transform: uppercase; }
.report-estimate-value { font: 700 22px/1 Georgia, serif; color: #C82841; }
.report-prop-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem 2rem;
  margin: .75rem 0;
}
.report-prop-label { font: 600 11px/1 Georgia, serif; color: #888; text-transform: uppercase; letter-spacing: .04em; }
.report-prop-val { font: 400 13px/1.4 Georgia, serif; color: #333; }
.report-page-footer {
  margin-top: 2rem; padding-top: 1rem;
  border-top: 1px solid rgba(200,40,65,.15);
  font: 400 10px/1 Georgia, serif; color: #999; text-align: center;
}
/* Attachments list in delivery tab */
.attachment-list { display: flex; flex-direction: column; gap: 6px; margin-top: .5rem; }
.attachment-item {
  display: flex; align-items: center; gap: 10px;
  padding: .75rem 1rem; border-radius: 8px;
  background: var(--bg-2); border: 1px solid var(--card-border);
  font: 400 var(--fs-label)/1 var(--f-sans); color: var(--text-2);
}
.attachment-item svg { color: var(--red-mid); flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   INVOICE TOTAL BLOCK (invoicing — subtotal/grand total)
   ═══════════════════════════════════════════════════════════════ */
.invoice-total-block {
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: 12px; padding: 1rem 1.25rem; min-width: 240px;
}
.invoice-total-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .4rem 0; border-bottom: 1px solid var(--line);
  font: 400 var(--fs-label)/1 var(--f-sans); color: var(--text-2);
}
.invoice-total-row:last-child { border-bottom: none; }
.invoice-total-grand {
  padding-top: .75rem; margin-top: .25rem;
  font-weight: 700; color: var(--text); font-size: var(--fs-lead);
}
/* Card selectable state — used in report templates */
.card--selectable { cursor: pointer; transition: border-color .3s, box-shadow .3s; }
.card--selectable:hover { border-color: rgba(200,40,65,.4); }
.card--selectable.active {
  border-color: var(--red-mid);
  background: rgba(200,40,65,.07);
}

/* ═══════════════════════════════════════════════════════════════
   MONTH CALENDAR (scheduling page)
   ═══════════════════════════════════════════════════════════════ */
.cal-month-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem;
}
.cal-month-title {
  font: 600 var(--fs-h3)/1 var(--f-serif);
  color: var(--text);
}
.cal-month-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px; background: var(--line);
  border: 1px solid var(--card-border);
  border-radius: 14px; overflow: hidden;
  margin-bottom: 1rem;
}
.cal-month-dow {
  background: var(--bg-2);
  padding: 10px 6px;
  text-align: center;
  font: 700 var(--fs-micro)/1 var(--f-sans);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--gray);
}
.cal-month-cell {
  background: var(--card-bg); padding: 8px;
  min-height: 90px; vertical-align: top;
  transition: background .2s; cursor: default;
  overflow: hidden; /* clip long event text on mobile */
}
.cal-month-cell:hover { background: rgba(182,45,63,.06); }
.cal-month-cell.empty { background: var(--bg-2); cursor: default; }
.cal-month-cell.today { background: rgba(200,40,65,.06); border: 1px solid rgba(200,40,65,.25); }
.cal-month-day {
  font: 700 var(--fs-micro)/1 var(--f-mono);
  color: var(--text-2); margin-bottom: 4px;
}
.cal-month-cell.today .cal-month-day {
  color: var(--red-mid);
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(200,40,65,.2);
  display: flex; align-items: center; justify-content: center;
}
/* Event chip inside a month cell */
.cal-ev {
  border-radius: 4px; padding: 2px 5px;
  font: 500 10px/1.4 var(--f-sans);
  color: #fff; margin-bottom: 2px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.cal-ev.red   { background: var(--red-mid); }
.cal-ev.blue  { background: var(--status-open); }
.cal-ev.green { background: var(--status-paid); }
/* Calendar legend */
.cal-legend {
  display: flex; gap: 1.5rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.cal-legend-item {
  display: flex; align-items: center; gap: 8px;
  font: 400 var(--fs-label)/1 var(--f-sans); color: var(--text-2);
}
.cal-legend-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.cal-legend-dot.red   { background: var(--red-mid); }
.cal-legend-dot.blue  { background: var(--status-open); }
.cal-legend-dot.green { background: var(--status-paid); }

/* ═══════════════════════════════════════════════════════════════
   WEEK VIEW GRID (scheduling)
   ═══════════════════════════════════════════════════════════════ */
.sched-week-grid {
  overflow-x: auto; border: 1px solid var(--card-border);
  border-radius: 14px; margin-bottom: 1.5rem;
}
.sched-week-header {
  display: grid; grid-template-columns: 60px repeat(7, minmax(0, 1fr));
  background: var(--bg-2); border-bottom: 1px solid var(--line-strong);
}
.sched-week-day-head {
  padding: 10px 8px; text-align: center;
  font: 700 var(--fs-micro)/1 var(--f-sans);
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--gray); border-left: 1px solid var(--line);
}
.sched-week-day-head.today { color: var(--red-mid); }
.sched-week-day-head.weekend { color: var(--gray); opacity: .5; }
.sched-week-time-col { border-right: 1px solid var(--line-strong); }
.sched-week-row {
  display: grid; grid-template-columns: 60px repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}
.sched-week-row:last-child { border-bottom: none; }
.sched-week-time {
  padding: 12px 8px;
  font: 400 var(--fs-micro)/1 var(--f-mono);
  color: var(--gray); text-align: right;
  background: var(--bg-2); border-right: 1px solid var(--line-strong);
  white-space: nowrap;
}
.sched-week-cell {
  padding: 6px; min-height: 80px;
  background: var(--card-bg); border-left: 1px solid var(--line);
  overflow: hidden;
}
.sched-week-cell.weekend { background: rgba(106,90,85,.05); }
/* Event pill in week view */
.sched-ev {
  border-radius: 6px; padding: 5px 7px;
  font: 600 var(--fs-micro)/1.4 var(--f-sans);
}
.sched-ev.red   { background: rgba(200,40,65,.25); color: var(--red-mid); border-left: 3px solid var(--red-mid); }
.sched-ev.blue  { background: rgba(68,136,221,.2); color: var(--status-open); border-left: 3px solid var(--status-open); }
.sched-ev.green { background: rgba(68,187,119,.2); color: var(--status-paid); border-left: 3px solid var(--status-paid); }

/* ═══════════════════════════════════════════════════════════════
   DAY SCHEDULE (scheduling — day view)
   ═══════════════════════════════════════════════════════════════ */
.day-schedule { display: flex; flex-direction: column; gap: 0; }
.day-schedule-row {
  display: grid; grid-template-columns: 90px minmax(0, 1fr);
  gap: 1rem; align-items: flex-start;
  padding: 1rem 0; border-bottom: 1px solid var(--line);
}
.day-schedule-row:last-child { border-bottom: none; }
.day-schedule-time {
  font: 700 var(--fs-micro)/1 var(--f-mono);
  color: var(--gray); padding-top: .25rem;
  text-align: right;
}
.day-schedule-jobs { display: flex; flex-direction: column; gap: 8px; }
.day-job-card {
  border-radius: 12px; padding: 1rem 1.25rem;
  backdrop-filter: blur(8px);
}
.day-job-card.red   { background: rgba(200,40,65,.1); border: 1px solid rgba(200,40,65,.3); }
.day-job-card.blue  { background: rgba(68,136,221,.1); border: 1px solid rgba(68,136,221,.3); }
.day-job-card.green { background: rgba(68,187,119,.1); border: 1px solid rgba(68,187,119,.3); }
.day-job-title { font: 700 var(--fs-label)/1 var(--f-sans); color: var(--text); margin-bottom: 4px; }
.day-job-addr  { font: 400 var(--fs-micro)/1.4 var(--f-mono); color: var(--text-2); margin-bottom: 4px; }
.day-job-services { font: 400 var(--fs-micro)/1.3 var(--f-sans); color: var(--text-2); margin-bottom: 4px; }
.day-job-est { font: 500 var(--fs-micro)/1 var(--f-mono); color: var(--gray); margin-bottom: 6px; }
.day-schedule-placeholder {
  padding: .875rem 1rem; border-radius: 8px;
  background: var(--bg-2); border: 1px dashed var(--card-border);
  font: 500 var(--fs-label)/1 var(--f-sans); color: var(--text-2);
}

/* ═══════════════════════════════════════════════════════════════
   TECHNICIAN LOAD BAR (scheduling)
   ═══════════════════════════════════════════════════════════════ */
.load-bar {
  height: 6px; background: var(--line-strong);
  border-radius: 3px; overflow: hidden; margin-top: .75rem;
}
.load-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--red), var(--red-bright));
  border-radius: 3px; transition: width .5s ease;
}

/* ═══════════════════════════════════════════════════════════════
   CLUSTER JOB LIST (scheduling)
   ═══════════════════════════════════════════════════════════════ */
.cluster-job-list { margin-top: 1rem; }
.cluster-job {
  padding: .4rem 0; border-bottom: 1px solid var(--line);
  font: 400 var(--fs-micro)/1.3 var(--f-mono); color: var(--text-2);
}
.cluster-job:last-child { border-bottom: none; }

/* Site marketing header — nav button distribution (layout only) */
@media (min-width: 901px) {
  .lii-shell--site .lii-shell__nav .lii-shell__nav-link,
  .lii-shell--site .lii-shell__nav .nav-dropdown > .nav-dropdown-trigger {
    font-size: clamp(14px, 1.15vw, 17px);
    letter-spacing: .045em;
  }
  .lii-shell--site .lii-shell__nav--left,
  .lii-shell--site .lii-shell__nav--right {
    flex: 1 1 auto;
    width: 100%;
    gap: clamp(.9rem, 2vw, 1.7rem);
    justify-content: center;
    padding-inline: 32%;
  }
  .lii-shell--site .lii-shell__nav--left .lii-shell__nav-link,
  .lii-shell--site .lii-shell__nav--right .lii-shell__nav-link,
  .lii-shell--site .lii-shell__nav--left .nav-dropdown,
  .lii-shell--site .lii-shell__nav--right .nav-dropdown {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 0;
  }
  .lii-shell--site .lii-shell__nav .nav-dropdown > .nav-dropdown-trigger {
    width: auto;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lii-shell__nav .lii-shell__nav-link::after,
  .lii-shell__nav .nav-dropdown > .nav-dropdown-trigger::after {
    transition: none;
  }
}