:root {
  /* Brand palette (design-system tokens) — mirrors the report theme.
     Forest carries authority; lime is the single energising accent, used
     sparingly; NEVER tint backgrounds with saturated green. */
  --aw-forest: #14271a;   /* primary / ink */
  --aw-primary: #14271a;  /* solid primary FILL (buttons/badges/sidebar). Same
                             value as forest in light; in dark it stays a lifted
                             forest SURFACE while --aw-forest flips to a light
                             authority TEXT colour — the two roles diverge. */
  --aw-lime: #84bd2d;     /* single accent */
  --aw-green: #2f7a3c;    /* secondary green (links, focus rings) */
  --aw-forest-hover: #0d1a11;
  --aw-sage: #9aa099;
  --aw-sage-2: #6c726a;
  --aw-sage-3: #4a4f49;
  --aw-off-1: #f3f5f0;
  --aw-off-2: #eef0ec;
  --aw-off-3: #fbfdf7;
  --aw-amber: #e0902a;
  --aw-line: #e2e7de;         /* calm hairline (matches quote treatment) */
  --aw-line-strong: #d3dacd;

  /* Legacy tokens — kept so existing rules that reference them still resolve.
     --aw-green was formerly the saturated #009846 primary; it is now the calm
     secondary green above and is NO LONGER used for primary actions. */
  --aw-green-legacy: #009846;
  --aw-dark-green: #087a3d;
  --aw-text: #0f172a;
  --aw-muted: #64748b;
  --aw-danger: #b91c1c;
  --aw-border: #d7dee8;
  --aw-panel: #ffffff;
  --aw-page: #f6f8fb;
  /* Brand monospace for eyebrows / labels / code-like previews. Loaded from
     Google Fonts (JetBrains Mono) in index.html; falls back gracefully. */
  --aw-mono: "JetBrains Mono", Consolas, "Courier New", monospace;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--aw-text);
  background: var(--aw-page);
  font-family: Arial, Helvetica, sans-serif;
  /* Stop the browser's native pull-to-refresh from chaining off the top of the
     page (staff kept triggering an accidental full reload). In a browser tab this
     disables the native gesture entirely; in the installed PWA the app's own
     hold-to-refresh gesture (see initPullToRefresh in app.js) takes over. */
  overscroll-behavior-y: contain;
}

/* Page-level horizontal clamp — belt-and-braces safety net (phones only).
   Real overflow causes are fixed at the source elsewhere; this guarantees a
   stray/future offender can never turn into sideways PAGE scroll on a phone
   (operator reported text being cut off by a slight left/right page drag).
   `clip` is preferred: it prevents scrolling WITHOUT creating a scroll
   container, so descendant `position: sticky` keeps working. `hidden` is the
   fallback for older engines that don't support `overflow: clip` (declared
   first, so a supporting browser wins the cascade). Internal scrollers
   (.table-wrap, .lv-table-scroll, .quotex-table-wrap, .leads-tablewrap, the
   schedule board, etc.) set their OWN overflow-x:auto and are unaffected —
   this only clamps the html/body viewport axis. */
@media (max-width: 640px) {
  html, body {
    overflow-x: hidden; /* fallback */
    overflow-x: clip;   /* preferred: no scroll container, keeps sticky working */
  }
}

button,
input,
select,
textarea {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  min-height: 100vh;
}

.is-hidden {
  display: none !important;
}

.auth-screen {
  display: block;
  min-height: 100vh;
  background: var(--aw-panel);
  font-family: "Inter", Arial, Helvetica, sans-serif;
}

/* ── Split layout ─────────────────────────────────────────────────── */
.auth-screen .login-split {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

@media (min-width: 900px) {
  .auth-screen .login-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}

/* ── Left: forest brand panel ─────────────────────────────────────── */
.auth-screen .login-brand-panel {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Forest panel is full-bleed and reaches the top edge; letting it extend
     under the translucent status bar is intentional, so we only push the
     CONTENT down by the inset. env() = 0 elsewhere → 56px. */
  padding: calc(56px + env(safe-area-inset-top)) 48px 56px;
  background: var(--aw-primary);
  color: #ffffff;
}

.auth-screen .login-brand-inner {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: start;
  gap: 20px;
  max-width: 420px;
}

.auth-screen .login-brand-panel .brand-logo {
  width: 240px;
  max-width: 100%;
  padding: 14px 18px;
  border-radius: 10px;
  background: var(--aw-panel);
}

.auth-screen .login-eyebrow {
  margin: 4px 0 0;
  color: var(--aw-lime);
  font-family: var(--aw-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.auth-screen .login-rule {
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: var(--aw-lime);
}

.auth-screen .login-brand-title {
  margin: 0;
  color: #ffffff;
  font-family: "Sora", "Inter", Arial, sans-serif;
  font-size: clamp(38px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.01em;
}

/* Single decorative motif: quiet concentric sun rings + horizon arc. */
.auth-screen .login-motif {
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 420px;
  height: 420px;
  opacity: .5;
  pointer-events: none;
}

.auth-screen .login-motif circle {
  fill: none;
  stroke: rgba(255, 255, 255, .07);
  stroke-width: 1.4;
}

.auth-screen .login-motif-arc {
  fill: none;
  stroke: var(--aw-lime);
  stroke-width: 2;
  opacity: .55;
}

/* ── Right: white sign-in panel ───────────────────────────────────── */
.auth-screen .login-form-panel {
  display: grid;
  place-items: center;
  padding: 48px 24px;
  background: var(--aw-panel);
}

.auth-screen .login-card {
  display: grid;
  gap: 20px;
  width: min(100%, 360px);
  padding: 0;
  border: 0;
  background: transparent;
}

.auth-screen .aw-logo .brand-logo {
  animation: aw-auth-logo-in .8s cubic-bezier(.16, .84, .44, 1) both;
}

.auth-screen .login-form {
  display: grid;
  gap: 20px;
}

.auth-screen .aw-rise {
  animation: aw-auth-rise-in .55s ease-out both;
}

.auth-screen .aw-delay-1 { animation-delay: .10s; }
.auth-screen .aw-delay-2 { animation-delay: .18s; }
.auth-screen .aw-delay-3 { animation-delay: .26s; }
.auth-screen .aw-delay-4 { animation-delay: .34s; }

@keyframes aw-auth-logo-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes aw-auth-rise-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .auth-screen .aw-logo .brand-logo,
  .auth-screen .aw-rise {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.auth-screen .login-heading {
  display: grid;
  gap: 6px;
  text-align: left;
}

.auth-screen .login-heading h1 {
  margin: 0;
  color: var(--aw-forest);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.1;
}

.auth-screen .login-heading p {
  margin: 0;
  color: var(--aw-sage-2);
  font-size: 14px;
  font-weight: 400;
}

.auth-screen .field {
  display: grid;
  gap: 7px;
}

.auth-screen .field span {
  color: var(--aw-sage-3);
  font-size: 13px;
  font-weight: 600;
}

.auth-screen .field input {
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid var(--aw-line-strong);
  border-radius: 10px;
  background: var(--aw-panel);
  color: var(--aw-text);
  font-size: 16px;
  outline: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.auth-screen .field input:focus {
  border-color: var(--aw-green);
  box-shadow: 0 0 0 3px rgba(47, 122, 60, .18);
}

.auth-screen .primary-button {
  width: 100%;
  min-height: 48px;
  margin-top: 2px;
  border: 1px solid var(--aw-forest);
  border-radius: 10px;
  background: var(--aw-primary);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: none;
  transition: background .15s ease, border-color .15s ease;
}

.auth-screen .primary-button:hover {
  border-color: var(--aw-forest-hover);
  background: var(--aw-forest-hover);
}

.auth-screen .primary-button:disabled {
  opacity: .7;
  cursor: default;
}

.auth-screen .login-footer {
  margin: 0;
  color: var(--aw-sage);
  font-size: 12px;
  text-align: left;
}

/* ── Mobile: stacked (compact forest header band + card) ──────────── */
@media (max-width: 640px) {
  .auth-screen { background: var(--aw-off-1); }

  .auth-screen .login-brand-panel {
    align-items: flex-start;
    /* Stacked mobile: this forest band tops the layout and bleeds under the
       status bar (intended) — push the logo/eyebrow down by the inset only.
       env() = 0 on desktop, so 28px there. */
    padding: calc(28px + env(safe-area-inset-top)) 24px 24px;
  }

  .auth-screen .login-brand-inner { gap: 12px; }

  .auth-screen .login-brand-panel .brand-logo { width: 180px; }

  .auth-screen .login-rule,
  .auth-screen .login-brand-title { display: none; }

  .auth-screen .login-motif {
    width: 240px;
    height: 240px;
    right: -70px;
    bottom: -90px;
  }

  .auth-screen .login-form-panel {
    padding: 26px 20px 40px;
    background: var(--aw-off-1);
  }
}

.form-message {
  min-height: 18px;
  margin: 0;
  color: var(--aw-muted);
  font-size: 13px;
}

.form-message.error {
  color: var(--aw-danger);
}

.auth-screen .form-message {
  text-align: left;
  font-weight: 500;
}

/* Quiet "Forgot password?" / "Back to sign in" link inside the login card.
   Left-aligned to match the card's copy; sits just under the message line. */
.auth-screen .login-forgot {
  justify-self: start;
  margin-top: -6px;
  padding-left: 0;
}

.sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  min-height: 100vh;
  /* Forest rail reaches the top edge — push its brand/nav below the status bar
     in the installed PWA. env() = 0 elsewhere, so this is 18px on desktop. */
  padding: calc(18px + env(safe-area-inset-top)) 8px calc(18px + env(safe-area-inset-bottom));
  color: #ffffff;
  background: var(--aw-primary);
}

.brand-block {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--aw-panel);
}

.brand-logo {
  width: 36px;
  height: auto;
  display: block;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.brand-copy {
  display: none;
}

.brand-title {
  font-size: 20px;
  font-weight: 700;
}

.brand-subtitle {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

.module-nav {
  display: grid;
  /* Pin the single column to the container width. Without an explicit template
     the implicit `auto` column grows to the widest item's max-content (a long
     label like "Installation Schedule"), which exceeded the rail and made the
     active/hover highlight bleed past the sidebar into the work area. minmax(0,
     1fr) caps it at the rail width so over-long labels ellipsis-clip instead. */
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  justify-items: center;
}

.nav-item {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  color: var(--aw-sage);
  background: transparent;
  cursor: pointer;
  transition: color .14s ease, background .14s ease;
}

/* Role gating hides nav items via the `hidden` attribute; the explicit
   `display: grid` above would otherwise override the UA [hidden] rule. */
.nav-item[hidden] {
  display: none !important;
}

.nav-item::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 9px;
  width: 4px;
  height: 26px;
  border-radius: 0 999px 999px 0;
  background: transparent;
}

.nav-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.nav-label {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  z-index: 20;
  max-width: 220px;
  padding: 7px 10px;
  border-radius: 6px;
  color: #ffffff;
  background: var(--aw-forest-hover);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  opacity: 0;
  pointer-events: none;
  transform: translate(-4px, -50%);
  transition: opacity .14s ease, transform .14s ease;
  white-space: nowrap;
}

.nav-item.active {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
}

.nav-item.active::before {
  background: var(--aw-lime);
}

.nav-item:hover:not(:disabled),
.nav-item:focus-visible {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
}

.nav-item:hover .nav-label,
.nav-item:focus-visible .nav-label {
  opacity: 1;
  transform: translate(0, -50%);
}

.nav-item:focus-visible {
  outline: 2px solid rgba(132, 189, 45, 0.6);
  outline-offset: 2px;
}

.nav-item:disabled {
  color: rgba(255, 255, 255, 0.45);
  cursor: not-allowed;
}

.main-panel {
  min-width: 0;
  /* Top/bottom insets keep the topbar (and any bottom-of-panel content) clear
     of the iOS status bar / home indicator in the installed PWA
     (status-bar-style black-translucent + viewport-fit=cover draw under them).
     env() = 0 in normal browsers/desktop, so calc(28px + 0px) == 28px there. */
  padding: calc(28px + env(safe-area-inset-top)) 28px calc(28px + env(safe-area-inset-bottom));
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.back-home {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  min-height: 42px;
  border: 1px solid var(--aw-line-strong);
  border-radius: 10px;
  background: var(--aw-panel);
  color: var(--aw-forest);
  font: 600 14px/1 "Inter", Arial, sans-serif;
  cursor: pointer;
  flex: 0 0 auto;
}

/* Explicit display would otherwise override the UA [hidden] rule — same gotcha
   as .nav-item[hidden]. */
.back-home[hidden] {
  display: none !important;
}

.back-home svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Module-history Back control — steps back one entry in the app's own history
   (browser back / Android back gesture do the same). Icon-only 42px square,
   mirrors .theme-toggle-btn sizing; hidden at history depth 0 (nothing to go
   back to within the app). Tokened, so dark mode is covered automatically. */
.topbar-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid var(--aw-line-strong);
  border-radius: 10px;
  background: var(--aw-panel);
  color: var(--aw-forest);
  cursor: pointer;
}
.topbar-back-btn:hover { border-color: var(--aw-forest); background: var(--aw-off-1); }
/* Explicit display would otherwise override the UA [hidden] rule (same gotcha
   as .back-home / .nav-item). */
.topbar-back-btn[hidden] { display: none !important; }
.topbar-back-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Field-role section tabs — Schedule | Sign-Off. Replaces the sidebar for
   installer/pv_contractor, whose whole app is these two sections. */
.field-tabs {
  display: inline-flex;
  border: 1px solid var(--aw-line-strong);
  border-radius: 10px;
  overflow: hidden;
  flex: 0 0 auto;
}

.field-tabs[hidden] {
  display: none !important;
}

.field-tabs button {
  border: 0;
  background: var(--aw-panel);
  color: var(--aw-sage-2);
  font: 600 14px/1 "Inter", Arial, sans-serif;
  padding: 12px 16px;
  min-height: 44px;
  cursor: pointer;
}

.field-tabs button + button {
  border-left: 1px solid var(--aw-line-strong);
}

.field-tabs button.active {
  background: var(--aw-primary);
  color: #fff;
}

/* The inline SVG icon in each tab is a phones-only affordance for the bottom
   nav bar (see the ≤640px block); on desktop the tabs stay text-only. */
.field-tabs .ft-icon {
  display: none;
}

/* Any tab hidden per role ([hidden] set in app.js) must stay hidden even
   though the bottom-bar rule below gives visible tabs display:flex — house
   rule: an explicit display needs a [hidden] companion. */
#field-tabs [data-field-tab][hidden] {
  display: none !important;
}

/* Fullscreen module mode (Installation Sign-Off): the sidebar disappears so
   the whole viewport belongs to the form — it is used on phones on-site. */
.app-shell.is-fullscreen {
  grid-template-columns: minmax(0, 1fr);
}

.app-shell.is-fullscreen .sidebar {
  display: none;
}

.app-shell.is-fullscreen .main-panel {
  /* Fullscreen (no sidebar): this panel's top reaches the screen edge — keep
     the topbar below the status bar in the PWA. env() = 0 elsewhere → 18px. */
  padding: calc(18px + env(safe-area-inset-top)) 22px 0;
}

.app-shell.is-fullscreen .topbar {
  margin-bottom: 14px;
}

/* Keep the fullscreen topbar a single compact row on phones (the default
   mobile topbar stacks everything full-width, which eats half the screen). */
@media (max-width: 640px) {
  .app-shell.is-fullscreen .main-panel {
    /* Fullscreen phone header: the field-tabs row lives at the top of this
       panel with no sidebar, so this container's background reaches the screen
       top. Add the status-bar inset here (not on the tabs) so the strip clears
       the clock/wifi/battery. env() = 0 in normal browsers, so 10px there. */
    padding: calc(10px + env(safe-area-inset-top)) 12px 0;
  }

  .app-shell.is-fullscreen .topbar {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
  }

  .app-shell.is-fullscreen .topbar-actions {
    flex-direction: row;
    width: auto;
    flex: 0 0 auto;
  }

  .app-shell.is-fullscreen #session-pill {
    display: none; /* the signer knows who they are; saves a whole row */
  }

  .app-shell.is-fullscreen .eyebrow {
    display: none;
  }

  /* ...but a field-crew greeting stays — it's the phone's personal touch,
     sitting just above the section title (the pill it normally lives in is
     hidden on fullscreen phones). Clip long names rather than wrap. */
  .app-shell.is-fullscreen .eyebrow.is-greeting {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* The title block is a flex child of .topbar-left; flex items default to
     min-width:auto, so without this the nowrap h1's intrinsic width pushes
     .topbar-left past the viewport → whole-page horizontal overflow (the tabs
     no longer occupy this row, so the title track is what runs wide). Let it
     shrink and clip instead. */
  .app-shell.is-fullscreen .topbar-left > div {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .app-shell.is-fullscreen .topbar h1 {
    font-size: 17px;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* single compact line — header stays one row */
  }

  .app-shell.is-fullscreen .back-home span {
    display: none; /* icon-only back button on small screens */
  }

  /* The tabs move to a fixed bottom bar on phones (below), so the header row
     just holds Back + title + Sign out. Let the title track take the space. */
  .app-shell.is-fullscreen .topbar-left {
    min-width: 0;
    flex: 1 1 auto;
    gap: 8px;
  }

  /* === Phone bottom navigation bar ==================================
     On phones the field tabs become a native-app style bar pinned to the
     bottom of the viewport: one flex row, every VISIBLE tab sharing the width
     equally (flex:1), icon over label, ≥48px tap target. Hidden tabs ([hidden],
     set per role in app.js) are removed from the flow by the #field-tabs
     [data-field-tab][hidden] override above, so the remaining tabs redistribute
     — installer: Clock · Schedule · Field Docs · Call-Outs · Notes · Leave (6);
     pv_contractor: Clock · Schedule · Field Docs (3); clock_only: Clock · Leave
     (2). Sign-Off / Job Card / Inspection / Audit have no tab of their own —
     they open inside the Field Docs wrapper. The page (body) scrolls, so we pad
     .main-panel's bottom to clear the bar (below). */
  .app-shell.is-fullscreen .field-tabs:not([hidden]) {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 800; /* above content, below overlays (scrim 1000) + toast (9999) */
    border: 0;
    border-top: 1px solid var(--aw-line-strong);
    border-radius: 0;
    background: var(--aw-panel);
    box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.06);
    /* Clear the iOS home indicator in the standalone PWA (0 elsewhere). */
    padding-bottom: env(safe-area-inset-bottom);
  }

  .app-shell.is-fullscreen .field-tabs:not([hidden]) button {
    flex: 1 1 0; /* every visible tab shares the width equally */
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0; /* drop the desktop dividers between tabs */
    padding: 6px 2px 8px;
    min-height: 52px; /* tap target ≥48px */
    background: var(--aw-panel);
    color: var(--aw-sage-2);
    position: relative;
  }

  .app-shell.is-fullscreen .field-tabs:not([hidden]) .ft-icon {
    display: block;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .app-shell.is-fullscreen .field-tabs:not([hidden]) .ft-label {
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap; /* "Schedule"/"Call-Outs" fit at 10px in ~62px */
  }

  /* Active tab: forest icon + label with a short lime top-edge indicator —
     no saturated fill (house rule). Inactive stays sage grey. */
  .app-shell.is-fullscreen .field-tabs:not([hidden]) button.active {
    background: var(--aw-panel);
    color: var(--aw-forest);
  }

  .app-shell.is-fullscreen .field-tabs:not([hidden]) button.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--aw-lime);
  }

  /* Content must not hide behind the fixed bar. The page scrolls, so pad the
     panel bottom by bar height (~60px) + the home-indicator inset. */
  .app-shell.is-fullscreen .main-panel {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  /* Lift the undo toast above the bottom bar (default 24px would overlap it). */
  .undo-toast {
    bottom: calc(76px + env(safe-area-inset-bottom));
  }

  /* Keep Sign out tappable (44px hit target) but compact. */
  .app-shell.is-fullscreen .topbar-actions {
    flex: 0 0 auto;
  }

  .app-shell.is-fullscreen #sign-out-button {
    padding: 11px 12px;
    min-height: 44px;
    white-space: nowrap;
  }

  .app-shell.is-fullscreen .back-home {
    padding: 10px 12px;
    flex: 0 0 auto;
  }
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--aw-sage-2);
  font-family: var(--aw-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Field-crew "Welcome <first name>" greeting in the topbar eyebrow — forest for
   a touch of warmth over the default sage label grey. */
.eyebrow.is-greeting {
  color: var(--aw-forest);
  font-weight: 600;
}

h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
}

.status-pill {
  padding: 8px 12px;
  border: 1px solid var(--aw-line-strong);
  border-radius: 999px;
  color: var(--aw-sage-2);
  background: var(--aw-off-3);
  font-size: 13px;
}

.module-root {
  min-width: 0;
}

.home-screen {
  display: grid;
  gap: 12px;
}

.home-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 8px 16px;
  border-radius: 8px;
  color: #ffffff;
  background: var(--aw-primary);
  min-height: 48px;
}

.home-hero-chip {
  height: 24px;
  width: auto;
  padding: 4px;
  border-radius: 4px;
  background: var(--aw-panel);
}

.home-hero-greeting {
  font-weight: 600;
  font-size: 15px;
}



.home-accent {
  color: var(--aw-lime);
  font-family: var(--aw-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}





.home-tool-icon {
  width: 20px;
  height: 20px;
  color: var(--aw-forest);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.home-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.home-stat-card {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--aw-line);
  border-radius: 12px;
  background: var(--aw-panel);
}

.home-stat-value {
  color: var(--aw-forest);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}

.home-stat-label {
  color: var(--aw-sage-2);
  font-size: 13px;
  line-height: 1.35;
}

.home-alerts {
  overflow: hidden;
  border: 1px solid var(--aw-line);
  border-left: 4px solid var(--aw-danger);
  border-radius: 12px;
  background: var(--aw-panel);
}

.home-alerts-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--aw-line);
}

.home-alerts-header h3 {
  margin: 0;
  font-size: 18px;
}

.home-alerts-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 11px;
  background: var(--aw-danger);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

.home-alerts-list {
  display: grid;
}

.home-alert-row {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--aw-line);
}

.home-alert-row:last-child {
  border-bottom: 0;
}

.home-alert-row.is-ack {
  opacity: 0.6;
}

.home-alert-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--aw-sage-2);
}

.home-alert-row.severity-high .home-alert-dot {
  background: var(--aw-danger);
}

.home-alert-row.severity-medium .home-alert-dot {
  background: var(--aw-amber);
}

.home-alert-row.severity-low .home-alert-dot {
  background: var(--aw-green);
}

.home-alert-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.home-alert-title {
  font-weight: 600;
  color: var(--aw-forest);
}

.home-alert-body {
  font-size: 13px;
  color: var(--aw-sage-2);
}

/* Type + title on one line; the type pill wraps above the title on narrow rows. */
.home-alert-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Short type tag pill — mono, severity-tinted (high = danger, medium = amber). */
.home-alert-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-family: var(--aw-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--aw-sage-3);
  background: var(--aw-off-1);
  border: 1px solid var(--aw-line-strong);
}

.home-alert-tag.severity-high {
  color: var(--aw-danger);
  background: color-mix(in srgb, var(--aw-danger) 10%, var(--aw-panel));
  border-color: color-mix(in srgb, var(--aw-danger) 32%, var(--aw-line-strong));
}

.home-alert-tag.severity-medium {
  color: var(--aw-amber);
  background: color-mix(in srgb, var(--aw-amber) 12%, var(--aw-panel));
  border-color: color-mix(in srgb, var(--aw-amber) 34%, var(--aw-line-strong));
}

.home-alert-tag.severity-low {
  color: var(--aw-green);
  background: color-mix(in srgb, var(--aw-green) 10%, var(--aw-panel));
  border-color: color-mix(in srgb, var(--aw-green) 28%, var(--aw-line-strong));
}

.home-alert-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* "Ticket raised ✓" chip once an alert has spawned a ticket. */
.home-alert-raised {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--aw-green);
  white-space: nowrap;
}

/* Muted note for unlinked-device alerts (no subscriber to ticket against). */
.home-alert-unlinked {
  font-size: 12px;
  color: var(--aw-sage-2);
  font-style: italic;
  white-space: nowrap;
}

.home-alert-btn {
  padding: 6px 12px;
  border: 1px solid var(--aw-line-strong);
  border-radius: 6px;
  background: var(--aw-panel);
  color: var(--aw-forest);
  font-size: 13px;
  cursor: pointer;
}

.home-alert-btn:hover {
  background: var(--aw-off-1);
}

.home-alert-btn.primary {
  border-color: var(--aw-forest);
  background: var(--aw-primary);
  color: #ffffff;
}

.home-alert-btn.primary:hover {
  filter: brightness(0.95);
}

.home-alert-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Per-client issue history (register → Issues) */
.issue-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.issue-badge.sev-high,
.issue-badge.status-open {
  background: #fde8e8;
  color: #b91c1c;
}

.issue-badge.sev-medium,
.issue-badge.status-acknowledged {
  background: #fdf0e1;
  color: #b5730f;
}

.issue-badge.sev-low {
  background: #eef3ee;
  color: var(--aw-green);
}

.issue-badge.status-resolved {
  background: var(--aw-off-2);
  color: var(--aw-muted);
}

.issue-body {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--aw-muted);
}

.home-recent {
  overflow: hidden;
  border: 1px solid var(--aw-line);
  border-radius: 12px;
  background: var(--aw-panel);
}

.home-recent-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--aw-line);
}

.home-recent-header h3 {
  margin: 0;
  font-size: 18px;
}

.home-recent-list {
  display: grid;
}

.home-recent-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: 10px 18px;
  border: 0;
  border-bottom: 1px solid var(--aw-line);
  color: var(--aw-forest);
  background: var(--aw-panel);
  text-align: left;
  cursor: pointer;
}

.home-recent-row:last-child {
  border-bottom: 0;
}

.home-recent-row:hover,
.home-recent-row:focus-visible {
  background: var(--aw-off-1);
}

.home-recent-row:focus-visible {
  outline: 3px solid rgba(132, 189, 45, 0.35);
  outline-offset: -3px;
}

.home-recent-row .home-tool-icon {
  width: 24px;
  height: 24px;
  color: var(--aw-sage-2);
}

.home-recent-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.home-recent-label,
.home-recent-action {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-recent-label {
  font-weight: 700;
}

.home-recent-action,
.home-recent-time,
.home-recent-empty {
  color: var(--aw-sage-2);
  font-size: 12px;
}

.home-recent-time {
  white-space: nowrap;
}

.home-recent-empty {
  padding: 16px 18px;
}

.tool-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
  align-items: start;
}

.panel {
  border: 1px solid var(--aw-border);
  border-radius: 8px;
  background: var(--aw-panel);
}

.panel-header {
  padding: 16px 18px;
  border-bottom: 1px solid var(--aw-border);
}

.panel-header h2,
.panel-header h3 {
  margin: 0;
  font-size: 18px;
}

.panel-body {
  padding: 18px;
}

.documents-panel {
  overflow: hidden;
}

/* House panel head — forest title + muted sub (matches the quote builder). */
.documents-head { display: flex; flex-direction: column; gap: 3px; }
.documents-head h2 { margin: 0; }
.documents-sub { margin: 0; font-size: 13px; color: var(--aw-sage-2); line-height: 1.45; }

/* Filters live in a tidy .aw-card toolbar row (the primitive is column-flow, so
   restore a horizontal wrap here). Chrome only — the .docs-table is untouched. */
.documents-toolbar.aw-card {
  flex-direction: row;
  align-items: end;
  justify-content: flex-start;
  gap: 14px 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  padding: 16px;
}

.documents-search {
  width: min(100%, 340px);
}

.documents-search > span,
.documents-type > span { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--aw-sage-2); }

.documents-type {
  width: min(100%, 200px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.documents-search { display: flex; flex-direction: column; gap: 6px; }
.documents-toolbar .documents-search input,
.documents-toolbar .documents-type select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--aw-line-strong);
  border-radius: 10px;
  font: 400 15px/1.2 Arial, Helvetica, sans-serif;
  min-height: 44px;
  background: var(--aw-panel);
  color: var(--aw-text);
}
.documents-toolbar .documents-search input:focus,
.documents-toolbar .documents-type select:focus {
  outline: 0;
  border-color: var(--aw-green);
  box-shadow: 0 0 0 3px rgba(47, 122, 60, 0.14);
}

/* Quote pipeline strip (Documents) — silent-quote follow-up surface above the
   library table. Token-based so dark mode inherits automatically; reuses the
   .quote-delivery chips. Buckets wrap on narrow viewports; each list scrolls. */
.quote-pipeline { margin-bottom: 18px; }
.quote-pipeline[hidden] { display: none !important; }
.qp-section { margin: 0; }
.qp-buckets {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-top: 10px;
}
.qp-bucket {
  flex: 1 1 280px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qp-bucket-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.qp-bucket-title {
  font-family: var(--aw-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--aw-sage-2);
}
.qp-count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--aw-off-2);
  color: var(--aw-forest);
  border: 1px solid var(--aw-line);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.qp-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 340px;
  overflow-y: auto;
}
.qp-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--aw-line);
  border-radius: 12px;
  background: var(--aw-panel);
}
.qp-card.is-muted { opacity: 0.72; background: var(--aw-off-1); }
.qp-card-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.qp-client { font-weight: 700; font-size: 13px; color: var(--aw-text); }
.qp-title {
  font-size: 12px;
  color: var(--aw-sage-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qp-card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qp-amount { font-weight: 700; font-size: 13px; color: var(--aw-forest); }
.qp-silent { font-size: 11px; color: var(--aw-sage-2); }
.qp-card.is-muted .qp-silent { color: var(--aw-sage-3); }
.qp-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qp-reminder { font-size: 11px; font-weight: 600; color: var(--aw-green); }
.qp-reminder.qp-flagged { color: var(--aw-amber); }
.qp-won { font-size: 11px; font-weight: 600; color: var(--aw-green); }
.qp-expired {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--aw-off-2);
  color: var(--aw-sage-2);
  border: 1px solid var(--aw-line-strong);
}
.qp-mute {
  font-family: var(--aw-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 9px;
  border-radius: 999px;
  cursor: pointer;
  border: 1px solid var(--aw-line-strong);
  background: transparent;
}
.qp-mute.is-on { color: var(--aw-green); border-color: #bcd8a5; }
.qp-mute.is-off { color: var(--aw-sage-2); }
.qp-mute:hover { border-color: var(--aw-green); }

/* Sortable column headers */
.docs-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.docs-table th.sortable:hover { color: var(--aw-green); }
.docs-table th.sorted { color: var(--aw-green); }
.sort-ind { font-size: 10px; }

.documents-table {
  min-width: 960px;
}

.legacy-module-panel {
  overflow: hidden;
}

.legacy-module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.legacy-module-status {
  margin: 0;
  color: var(--aw-muted);
  font-size: 13px;
}

.legacy-module-status.error {
  color: var(--aw-danger);
}

.legacy-frame-wrap {
  background: var(--aw-panel);
}

.legacy-tool-frame {
  display: block;
  width: 100%;
  min-height: calc(100vh - 170px);
  border: 0;
  background: var(--aw-panel);
}

.form-section {
  display: grid;
  gap: 16px;
  padding-bottom: 18px;
}

.form-section + .form-section {
  padding-top: 18px;
  border-top: 1px solid var(--aw-border);
}

.section-title {
  margin: 0;
  color: var(--aw-dark-green);
  font-size: 15px;
  font-weight: 700;
}

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

.field {
  display: grid;
  gap: 6px;
}

.field.full {
  grid-column: 1 / -1;
}

.field label,
.check-field {
  color: var(--aw-text);
  font-size: 13px;
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 10px;
  border: 1px solid var(--aw-border);
  border-radius: 6px;
  color: var(--aw-text);
  background: var(--aw-panel);
}

.field textarea {
  min-height: 74px;
  resize: vertical;
}

.check-field {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
}

.check-field input {
  width: 16px;
  height: 16px;
}

.check-field.disabled {
  color: var(--aw-muted);
}

.totals-panel {
  position: sticky;
  top: 20px;
}

.totals-block {
  display: grid;
  gap: 10px;
}

.line-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid #eef2f7;
}

.line-row strong {
  font-size: 14px;
}

.line-row span:last-child {
  text-align: right;
  white-space: nowrap;
}

.line-row.discount span:last-child {
  color: var(--aw-danger);
}

.line-row.total {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 2px solid var(--aw-green);
  border-bottom: 0;
  font-size: 18px;
  font-weight: 700;
}

.breakdown-title {
  margin: 18px 0 6px;
  color: var(--aw-dark-green);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.action-row {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.primary-button {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--aw-forest);
  border-radius: 6px;
  color: #ffffff;
  background: var(--aw-primary);
  font-weight: 700;
  cursor: pointer;
}

.primary-button:hover {
  background: var(--aw-forest-hover);
  border-color: var(--aw-forest-hover);
}

.primary-button.compact {
  width: auto;
  min-height: 34px;
  padding: 7px 10px;
  font-size: 13px;
}

.secondary-button {
  min-height: 40px;
  padding: 9px 12px;
  border: 1px solid var(--aw-border);
  border-radius: 6px;
  color: var(--aw-text);
  background: var(--aw-panel);
  font-weight: 700;
  cursor: pointer;
}

.secondary-button:hover {
  border-color: var(--aw-green);
  color: var(--aw-green);
}

.secondary-button.compact {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 13px;
}

button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Quiet text button — GLOBAL. Previously only scoped to .jobcard, so other
   modules fell back to raw UA button chrome. Now every module shares this. */
.text-button {
  border: 0;
  background: none;
  color: var(--aw-green);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 2px;
  border-radius: 6px;
}

.text-button:hover {
  color: var(--aw-forest);
  text-decoration: underline;
}

.text-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  text-decoration: none;
}

.muted-note {
  color: var(--aw-muted);
  font-size: 12px;
  line-height: 1.45;
}

.register-panel {
  overflow: hidden;
}

.register-stack {
  display: grid;
  gap: 18px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.dashboard-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--aw-border);
  border-radius: 8px;
  background: var(--aw-panel);
}

.dashboard-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dashboard-card h2 {
  margin: 0;
  font-size: 15px;
}

.dashboard-card-header span {
  min-width: 34px;
  padding: 5px 8px;
  border-radius: 999px;
  color: #ffffff;
  background: var(--aw-green);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.dashboard-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dashboard-list li {
  display: grid;
  gap: 3px;
  padding-top: 10px;
  border-top: 1px solid #eef2f7;
  min-width: 0;
}

.dashboard-list strong,
.dashboard-list span,
.dashboard-list time {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-list strong {
  font-size: 13px;
}

.dashboard-list span,
.dashboard-list time,
.empty-dashboard-item {
  color: var(--aw-muted);
  font-size: 12px;
}

.register-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.register-header .muted-note {
  margin: 6px 0 0;
}

.register-count {
  color: var(--aw-muted);
  font-size: 13px;
  white-space: nowrap;
}

.register-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.toolbar-actions {
  display: flex;
  gap: 10px;
}

.register-search {
  width: min(100%, 420px);
}

.status-filter {
  width: 180px;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--aw-border);
  border-radius: 8px;
}

.register-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  background: var(--aw-panel);
}

.register-table th,
.register-table td {
  padding: 11px 12px;
  border-bottom: 1px solid #eef2f7;
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
}

.register-table th {
  background: #f8fafc;
  color: var(--aw-text);
  font-size: 12px;
  text-transform: uppercase;
}

.register-table th button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-height: 28px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  text-transform: uppercase;
}

.register-table th button span::before {
  content: "";
}

.register-table th button.active[data-direction="asc"] span::before {
  content: "^";
}

.register-table th button.active[data-direction="desc"] span::before {
  content: "v";
}

.clickable-row {
  cursor: pointer;
}

.clickable-row:hover,
.clickable-row:focus {
  background: #f8fafc;
  outline: none;
}

.credits-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  color: var(--aw-green);
  background: #e7f6ee;
  font-size: 12px;
  font-weight: 700;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.status-badge.proposed {
  color: #92400e;
  background: #fef3c7;
}

.status-badge.active {
  color: var(--aw-dark-green);
  background: #e5f7ee;
}

.status-badge.expired {
  color: var(--aw-danger);
  background: #fee2e2;
}

.pending-proposal-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  color: #92400e;
  background: #fffbeb;
  font-size: 11px;
  font-weight: 700;
}

.empty-cell {
  height: 74px;
  color: var(--aw-muted);
  text-align: center !important;
}

.empty-cell.error {
  color: var(--aw-danger);
}

.link-button {
  display: inline-flex;
  width: fit-content;
  min-height: 34px;
  align-items: center;
  padding: 0;
  border: 0;
  color: var(--aw-green);
  background: transparent;
  font-weight: 700;
  cursor: pointer;
}

.detail-view {
  display: grid;
  gap: 18px;
}

.detail-title-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}

.detail-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.detail-title-row h2 {
  margin: 0;
  font-size: 24px;
}

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

.detail-grid.one-column {
  grid-template-columns: 1fr;
}

.plans-stack {
  display: grid;
  gap: 14px;
}

.section-heading {
  margin: 0;
  color: var(--aw-forest);
  font-size: 18px;
}

.plan-card {
  overflow: hidden;
}

.plan-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.plan-card-header .muted-note {
  margin: 5px 0 0;
}

.plan-card-body {
  display: grid;
  gap: 16px;
}

.detail-panel,
.detail-section {
  min-width: 0;
}

.detail-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.detail-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--aw-line);
  border-radius: 6px;
  background: var(--aw-off-3);
}

.detail-field span {
  color: var(--aw-sage-2);
  font-size: 12px;
}

.detail-field strong {
  overflow-wrap: anywhere;
  font-size: 14px;
  color: var(--aw-forest);
}

.detail-table {
  min-width: 720px;
}

.edit-form .panel-body {
  padding: 18px;
}

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

.form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  grid-column: 1 / -1;
}

.edit-check-field {
  align-self: end;
  padding: 9px 10px;
  border: 1px solid var(--aw-border);
  border-radius: 6px;
  background: var(--aw-panel);
}

.readonly-field {
  min-height: 64px;
}

.new-subscriber-form {
  display: grid;
  gap: 22px;
}

.new-subscriber-form h4 {
  margin: 0 0 12px;
  color: var(--aw-forest);
  font-size: 15px;
}

.service-section-body {
  display: grid;
  gap: 16px;
}

.status-actions {
  display: grid;
  gap: 14px;
}

.danger-button {
  color: var(--aw-danger);
}

.danger-button:hover {
  border-color: var(--aw-danger);
  color: var(--aw-danger);
}

.inline-form {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 180px auto;
  gap: 14px;
  align-items: end;
}

.inline-form-actions {
  align-self: end;
}

.mark-done-form {
  display: grid;
  grid-template-columns: 140px auto;
  gap: 8px;
  align-items: center;
}

.mark-done-form input {
  min-height: 34px;
  padding: 7px 8px;
  border: 1px solid var(--aw-border);
  border-radius: 6px;
}

.mark-done-form .form-message {
  grid-column: 1 / -1;
}

.monitoring-stack {
  display: grid;
  gap: 18px;
}

.monitoring-client-picker {
  max-width: 520px;
  margin-top: 14px;
}

.monitoring-form .panel-body {
  display: grid;
  gap: 18px;
}

.monitoring-pv-grid {
  display: grid;
  gap: 12px;
}

.monitoring-pv-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--aw-border);
  border-radius: 6px;
}

.monitoring-pv-row legend {
  padding: 0 4px;
  color: var(--aw-dark-green);
  font-size: 13px;
  font-weight: 700;
}

.foxess-panel {
  padding: 14px;
  border: 1px solid #cfe9db;
  border-radius: 8px;
  background: #f7fcf9;
}

.repeatable-block {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.repeatable-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.repeatable-header h4 {
  margin: 0;
  color: var(--aw-dark-green);
  font-size: 14px;
}

.repeatable-rows {
  display: grid;
  gap: 10px;
}

.repeatable-row {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(120px, 180px) auto;
  gap: 10px;
  align-items: end;
  padding: 10px;
  border: 1px solid var(--aw-border);
  border-radius: 6px;
  background: var(--aw-panel);
}

.recommendation-row {
  grid-template-columns: minmax(240px, 1fr) minmax(120px, 160px) auto;
}

.health-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  .sidebar {
    position: sticky;
    top: 0;
  }

  .tool-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-grid,
  .home-stats,
  .detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .totals-panel {
    position: static;
  }
}

@media (max-width: 640px) {
  .main-panel {
    /* Preserve the PWA safe-area insets that the base .main-panel rule adds
       (this shorthand would otherwise reset them to 0). env() = 0 on desktop
       browsers, so this is a plain 18px there. */
    padding: calc(18px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
  }

  .field-grid {
    grid-template-columns: 1fr;
  }

  .home-hero {
    grid-template-columns: 1fr;
    padding: 14px 16px;
  }

  .home-hero-logo img {
    height: 40px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  /* Topbar action icons stay a compact wrapping ROW on phones (not the old
     full-width vertical stack). Option B: the To-Do + Support topbar shortcuts
     are redundant here (they live in the bottom tab bar / More sheet), so drop
     them — leaving bell, search, theme + account. */
  .topbar-actions {
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    gap: 8px;
  }
  .notes-topbar-btn,
  .support-topbar-btn { display: none !important; }

  /* Account menu replaces the wide email pill + inline Sign out, which forced
     .topbar-actions to wrap into a vertical stack. With the pill gone the row
     collapses to a clean icon strip: bell · search · theme · avatar. The reveal
     selectors are descendant-scoped (0,2,0) so they beat the base
     .account-avatar-btn/.account-menu { display:none } rules that sit LATER in
     the file — media queries add no specificity, so plain class selectors would
     lose on source order. */
  .topbar-actions { position: relative; }
  #session-pill,
  #sign-out-button { display: none; }
  .topbar-actions .account-avatar-btn { display: inline-flex; }
  .topbar-actions .account-menu { display: block; }
  .topbar-actions .account-menu[hidden] { display: none !important; }

  /* Welcome hero is dead space on phone — the title + account menu already
     carry identity. */
  .home-hero { display: none; }

  /* Dashboard stat cards (Active clients / Quotes / Plants / Reports) are
     glanceable office metrics — not useful on a phone; hide them on mobile. */
  .home-stats { display: none; }

  /* Attention cards: drop the actions to a full-width wrapping row BELOW the
     body instead of a cramped side column that overflowed / clipped the text. */
  .home-alert-row {
    grid-template-columns: 12px minmax(0, 1fr);
    align-items: start;
  }
  .home-alert-actions {
    grid-column: 1 / -1;
    flex-wrap: wrap;
  }
  .home-alert-actions .home-alert-btn {
    flex: 1 1 auto;
    min-width: 96px;
  }

  .register-header,
  .register-toolbar,
  .toolbar-actions,
  .detail-title-row,
  .detail-actions,
  .plan-card-header,
  .form-actions,
  .inline-form-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .register-search {
    width: 100%;
  }

  .status-filter {
    width: 100%;
  }

  .dashboard-grid,
  .home-stats,
  .detail-grid,
  .detail-fields,
  .form-grid,
  .inline-form,
  .mark-done-form,
  .monitoring-pv-row,
  .repeatable-row,
  .recommendation-row {
    grid-template-columns: 1fr;
  }

  .home-recent-row {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .home-recent-time {
    grid-column: 2;
    justify-self: start;
  }
}

/* ==========================================================================
   REFINE-PREMIUM RESKIN / REGISTER REDESIGN
   ========================================================================= */

/* KPI stat strip */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}

.kpi-strip.kpi-strip-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1200px) {
  .kpi-strip.kpi-strip-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .kpi-strip,
  .kpi-strip.kpi-strip-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Overdue KPI tiles — red accent only when there is something overdue.
   Scoped to .kpi-strip so the fill wins over the equally-specific .kpi-white. */
.kpi-strip .kpi-tile.kpi-danger {
  border-color: #f3c0c0;
  background: #fef4f4;
}

.kpi-strip .kpi-tile.kpi-danger:hover {
  border-color: var(--aw-danger);
}

.kpi-tile.kpi-danger .kpi-value {
  color: var(--aw-danger);
}

.kpi-tile.kpi-danger .kpi-icon-wrap {
  color: var(--aw-danger);
}

.kpi-tile.kpi-danger.active {
  outline-color: var(--aw-danger);
  border-color: var(--aw-danger);
}

.kpi-tile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid var(--aw-line);
  text-align: left;
  cursor: pointer;
  outline: none;
  background: var(--aw-panel);
  color: var(--aw-text);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  min-height: 84px;
}

.kpi-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
}

.kpi-tile:focus-visible {
  outline: 2px solid var(--aw-lime);
  outline-offset: 2px;
}

.kpi-tile.active {
  outline: 2px solid var(--aw-forest);
  border-color: var(--aw-forest);
}

/* Forest Hero KPI Tile (Tile 1) — deep forest carries authority, lime accents. */
.kpi-tile.kpi-hero {
  background: var(--aw-primary);
  color: #ffffff;
  border-color: var(--aw-forest);
}

.kpi-tile.kpi-hero:hover {
  background: var(--aw-forest-hover);
}

.kpi-tile.kpi-hero.active {
  outline: 2px solid var(--aw-lime);
  border-color: var(--aw-lime);
}

.kpi-tile.kpi-hero .kpi-label {
  color: var(--aw-off-2);
}

.kpi-tile.kpi-hero .kpi-value {
  color: #ffffff;
}

/* White KPI Tiles (Tiles 2, 3, 4) */
.kpi-tile.kpi-white {
  background: var(--aw-panel);
  color: var(--aw-text);
}

.kpi-tile.kpi-white:hover {
  border-color: var(--aw-forest);
}

.kpi-tile-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kpi-label {
  font-size: 13px;
  color: var(--aw-muted);
  font-weight: 500;
}

.kpi-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--aw-forest);
  line-height: 1;
}

.kpi-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--aw-off-1);
  color: var(--aw-green);
  flex-shrink: 0;
}

.kpi-icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Status Pills Filter */
.status-pills {
  display: flex;
  gap: 8px;
  background: var(--aw-off-1);
  padding: 4px;
  border-radius: 8px;
  width: fit-content;
}

.status-pill-btn {
  border: none;
  background: transparent;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--aw-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.status-pill-btn:hover {
  color: var(--aw-text);
  background: rgba(255, 255, 255, 0.5);
}

.status-pill-btn.active {
  color: var(--aw-forest);
  background: var(--aw-panel);
  box-shadow: 0 2px 6px rgba(20, 39, 26, 0.12);
}

/* Archived pill sits slightly apart from the plan-status pills */
.status-pill-archived { margin-left: 6px; }
.status-pill-archived.active { color: var(--aw-muted); }

.status-pill-btn:focus-visible {
  outline: 2px solid var(--aw-green);
}

/* Filter Status Bar */
.filter-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: var(--aw-off-1);
  border: 1px solid var(--aw-line);
  border-bottom: none;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  font-size: 13px;
  color: var(--aw-sage-2);
}

.clear-filter-btn {
  font-size: 12px;
  color: var(--aw-danger) !important;
  font-weight: 600;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.clear-filter-btn:hover {
  text-decoration: underline;
}

/* Register Table Reskin using Grid */
.register-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--aw-panel);
  display: block;
}

.register-table thead {
  display: block;
  border-bottom: 1px solid var(--aw-line);
  background: var(--aw-off-1);
}

.register-table tbody {
  display: block;
}

.register-table tr {
  display: grid;
  grid-template-columns: 48px 2.2fr 1fr 1.3fr 1.3fr 1.5fr 1.1fr;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--aw-line);
  text-align: left;
}

.register-table tr.clickable-row {
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.register-table tr.clickable-row:hover,
.register-table tr.clickable-row:focus-visible {
  background: var(--aw-off-1);
  transform: translateX(2px);
}

.register-table th,
.register-table td {
  padding: 0;
  border: none;
  font-size: 14px;
  background: transparent;
  min-width: 0;
}

.register-table th {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--aw-sage-2);
  font-weight: 600;
  font-size: 11px;
  font-family: var(--aw-mono);
  background: transparent;
}

.register-table th button {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--aw-sage-2);
  font-family: var(--aw-mono);
  min-height: auto;
  font-size: 11px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.register-table th button:hover {
  color: var(--aw-forest);
}

.register-table th button.active {
  color: var(--aw-forest);
}

/* Client Row Elements */
.client-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--aw-off-1);
  color: var(--aw-forest);
  font-weight: 700;
  font-size: 13px;
}

.client-identity {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.client-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--aw-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.client-suburb {
  font-size: 12px;
  color: var(--aw-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.client-tier-chip {
  display: inline-flex;
  padding: 4px 8px;
  background: var(--aw-off-1);
  color: var(--aw-forest);
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
}

.client-renewal {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.soon-flag {
  display: inline-flex;
  padding: 2px 6px;
  background: #fef3e2;
  color: #b45309;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  text-transform: uppercase;
}

/* Due / overdue row highlighting + flags */
.register-table tr.clickable-row.row-overdue {
  box-shadow: inset 3px 0 0 0 var(--aw-danger);
  background: #fdf5f5;
}

.register-table tr.clickable-row.row-due-soon {
  box-shadow: inset 3px 0 0 0 #d98a1f;
}

.register-table tr.clickable-row.row-overdue:hover,
.register-table tr.clickable-row.row-overdue:focus-visible {
  background: #fbebeb;
}

/* Compact flag shown next to the renewal date */
.due-flag {
  display: inline-flex;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  text-transform: uppercase;
}

/* "What's due/overdue" headline chip under the client name */
.client-flag {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flag-overdue,
.due-flag.flag-overdue,
.client-flag.flag-overdue {
  background: #fde2e2;
  color: var(--aw-danger);
}

.flag-due-soon,
.due-flag.flag-due-soon,
.client-flag.flag-due-soon {
  background: #fef3e2;
  color: #b45309;
}

/* Register list: "Next due" cell (date + relative timing pill) */
.client-next-due {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
}

.client-next-due > span:first-child {
  font-variant-numeric: tabular-nums;
}

.client-next-due .due-flag {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Register list: "What's due" type chip */
.due-type-chip {
  display: inline-block;
  max-width: 100%;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  background: var(--aw-off-1);
  color: var(--aw-sage-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.due-type-chip.due-type-overdue {
  background: #fde2e2;
  color: var(--aw-danger);
}

.due-type-chip.due-type-due-soon {
  background: #fef3e2;
  color: #b45309;
}

/* Stack multiple due chips ("What's due" column) with even spacing + wrapping. */
.due-type-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ----------------------------------------------------- Call-Out Job Card */
.jobcard {
  max-width: 860px;
  margin: 0 auto;
  padding: 4px 16px calc(120px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.jobcard-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.jobcard-title { margin: 2px 0 0; font-size: 22px; color: var(--aw-forest); }
.jobcard-ref { display: flex; gap: 10px; }
.jobcard-ref .field { min-width: 130px; }

.jobcard .field { display: flex; flex-direction: column; gap: 4px; }
.jobcard .field > span { font-size: 12px; font-weight: 600; color: var(--aw-muted); }
.jobcard .field input,
.jobcard .field select,
.jobcard .field textarea {
  padding: 10px 12px;
  border: 1px solid var(--aw-border);
  border-radius: 10px;
  font: 400 15px/1.35 "Inter", Arial, sans-serif;
  color: var(--aw-text);
  background: var(--aw-panel);
  min-height: 44px;      /* touch target on phones */
}
.jobcard .field textarea { min-height: 60px; resize: vertical; }
.jobcard .field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.jobcard-declaration {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--aw-muted);
  line-height: 1.5;
}
.signature-wrap { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.signature-pad {
  width: 100%;
  max-width: 420px;
  height: 150px;
  border: 1px dashed var(--aw-border);
  border-radius: 12px;
  background: var(--aw-panel);
  touch-action: none;
}

.jobcard-actions { gap: 12px; }
.jobcard .button-row { display: flex; gap: 12px; flex-wrap: wrap; }
.jobcard .checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--aw-text); }

.jobcard-saved { display: flex; flex-direction: column; }
.jobcard-saved-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--aw-border);
}
.jobcard-saved-row strong { display: block; color: var(--aw-text); font-size: 14px; }
.jobcard-saved-row .muted-note { font-size: 12px; }
.jobcard-saved-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }

/* Saved job cards — collapsible panel at the top of the module. Now the shared
   .aw-details primitive (14px radius, --aw-off-3 surface, styled summary/caret);
   only the module spacing + list layout remain here. Collapsed by default; when
   closed it must NOT push the form down (native <details>). */
.jobcard-saved-panel { margin: 0 0 16px; }
.jobcard-saved-panel > .aw-details-body { gap: 0; }

.jobcard-state {
  font: 600 11px "Inter", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.jobcard-state.draft { color: var(--aw-amber, #b4791f); background: #fbf3e3; }
.jobcard-state.signed { color: var(--aw-green); background: #eef7ea; }

/* .text-button uses the global 13px treatment (the jobcard-scoped 14px override
   was dropped so field-tool link buttons match the rest of the app). */
.jobcard .icon-button {
  border: 1px solid var(--aw-border);
  background: var(--aw-panel);
  border-radius: 8px;
  width: 32px;
  height: 42px;
  font-size: 18px;
  line-height: 1;
  color: var(--aw-muted);
  cursor: pointer;
}
.jobcard .icon-button:hover { color: var(--aw-danger); border-color: var(--aw-danger); }

@media (max-width: 560px) {
  .jobcard-ref { width: 100%; }
}

/* Quote acceptance chip (Documents library) */
.quote-status {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}
.quote-status-draft { background: #eef2f7; color: #5b6b62; }
.quote-status-sent { background: #e7f0fb; color: #1e5fae; }
.quote-status-accepted { background: #e7f6ee; color: #0a7a3d; }
.quote-status-declined { background: #fde2e2; color: var(--aw-danger); }
.quote-status-awaiting { background: #fef3e2; color: #b45309; }

/* Quote delivery-tracking chip — reflects what actually happened to the *email*
   (email_deliveries), distinct from the acceptance status chip above. Mono +
   uppercase so it reads as a system/telemetry label, not a status pill; mirrors
   the .quote-status geometry so the two chips sit together. */
.quote-delivery {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid var(--aw-line-strong);
  font-family: var(--aw-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.quote-delivery[hidden] { display: none !important; }
/* Quiet sage while we wait for the webhook. */
.quote-delivery-sent { background: var(--aw-off-1); color: var(--aw-sage-2); border-color: var(--aw-line-strong); }
/* Delivered: forest/green text on a very light off-white + green border — never a saturated fill. */
.quote-delivery-delivered { background: var(--aw-off-3); color: var(--aw-green); border-color: #bcd8a5; }
/* Delayed / spam-complaint: amber. */
.quote-delivery-delivery_delayed,
.quote-delivery-complained { background: #fef3e2; color: #b45309; border-color: #f2d29a; }
/* Bounced: the failure state that already cost a sale — loud on purpose. */
.quote-delivery-bounced { background: #fde2e2; color: var(--aw-danger); border-color: #f0b4b4; font-weight: 700; }

/* Job card: linked-quote reference panel (C2). Lives inside the .aw-card
   quoted-reference section, so it's a light inset grid (token off-white +
   hairline) rather than its own heavy box; the card supplies the outer surface. */
.jobcard-quoted {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px 16px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--aw-line);
  border-radius: 10px;
  background: var(--aw-off-3);
}
.jobcard-quoted > div { display: flex; flex-direction: column; gap: 2px; }
.jobcard-quoted span { font-size: 11px; color: var(--aw-sage-2); text-transform: uppercase; letter-spacing: 0.03em; }
.jobcard-quoted strong { font-size: 14px; color: var(--aw-forest); }

/* Reconciliation overlay (C3 — Quoted vs Actual hand-off to Sage) */
.recon-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* Full-screen fixed scrim — pad content clear of the PWA insets. 40px on
     desktop (env() = 0). */
  padding: calc(40px + env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom));
  overflow: auto;
  z-index: 1000;
}
.recon-card {
  width: 100%;
  max-width: 640px;
  background: var(--aw-panel);
  border-radius: 14px;
  padding: 20px 22px 18px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.3);
}
.recon-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.recon-head h3 { margin: 2px 0 0; font-size: 18px; color: var(--aw-text); }
.recon-head .icon-button {
  border: 1px solid var(--aw-border); background: var(--aw-panel); border-radius: 8px;
  width: 32px; height: 32px; font-size: 18px; line-height: 1; color: var(--aw-muted); cursor: pointer;
}
.recon-variance {
  margin: 12px 0 4px; padding: 8px 12px; border-radius: 9px;
  background: #fef3e2; color: #b45309; font-size: 13px; font-weight: 600;
}
.recon-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.recon-col { border: 1px solid var(--aw-border); border-radius: 10px; padding: 12px; }
.recon-col h4 {
  margin: 0 0 8px; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--aw-muted);
}
.recon-row { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; font-size: 13px; }
.recon-row span { color: var(--aw-muted); }
.recon-row strong { color: var(--aw-text); text-align: right; }
.recon-note { margin: 8px 0; }
.recon-note > span {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--aw-muted); margin-bottom: 2px;
}
.recon-note p { margin: 0; font-size: 13px; color: var(--aw-text); white-space: pre-wrap; }
.recon-extra { padding: 8px 12px; border-radius: 9px; background: #fef3e2; }
.recon-extra > span { color: #b45309; }
.recon-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
[data-recon-msg] { white-space: pre-wrap; }

/* Reconcile: cover-with-a-credit (C5) */
.recon-credit {
  margin: 12px 0; padding: 12px; border-radius: 10px;
  border: 1px dashed var(--aw-green); background: #f2fbf5;
}
.recon-credit > span { display: block; font-size: 13px; color: var(--aw-text); margin-bottom: 8px; }
.recon-credit-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.recon-credit-controls select,
.recon-credit-controls input {
  padding: 8px 10px; border: 1px solid var(--aw-border); border-radius: 8px; font-size: 13px; min-height: 38px;
}
.recon-credit-controls input { width: 80px; }
.recon-credit-done {
  margin: 12px 0; padding: 10px 12px; border-radius: 9px;
  background: #e7f6ee; color: #0a7a3d; font-size: 13px; font-weight: 600;
}

@media (max-width: 560px) {
  .recon-cols { grid-template-columns: 1fr; }
}

/* Call-out worklist (C4) — house design primitives (.aw-section / .aw-eyebrow /
   .aw-card). The panel header carries a forest title + muted sub like the quote
   builder's panel head. */
.callouts-head { display: flex; flex-direction: column; gap: 3px; }
.callouts-head h2 { margin: 0; }
.callouts-sub { margin: 0; font-size: 13px; color: var(--aw-sage-2); line-height: 1.45; }

.callout-section { margin-bottom: 24px; }
.callout-section:last-child { margin-bottom: 0; }
/* Eyebrow already sets mono-uppercase-green + lime rule; keep the count aligned. */
.callout-eyebrow { display: flex; align-items: center; gap: 8px; }
.callout-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px;
  background: var(--aw-off-1); color: var(--aw-sage-2); font-size: 11px; font-weight: 700;
  font-family: Arial, Helvetica, sans-serif; letter-spacing: 0;
}
.callout-list { display: flex; flex-direction: column; gap: 10px; }
.callout-empty { margin: 2px 0 0; }

/* Rows are light bordered cards; the .aw-card primitive is column-flow, so
   restore a horizontal layout (info left, action right) here. */
.callout-row.aw-card {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
}
.callout-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.callout-info strong { color: var(--aw-forest); font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.callout-meta { font-size: 12px; color: var(--aw-sage-2); line-height: 1.4; }
.callout-action { flex: 0 0 auto; align-self: center; }
.callout-chip {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
}
.chip-follow { background: #fef3e2; color: #b45309; }
.chip-quote { background: #e7f0fb; color: #1e5fae; }
.chip-extra { background: #fde2e2; color: var(--aw-danger); }

/* Call-Outs on a phone (Enrico, field installer): stack each card so the info and
   the action button never collide, and let the button run full width. */
@media (max-width: 560px) {
  .callout-row.aw-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .callout-action { width: 100%; align-self: stretch; }
  .callout-row .secondary-button { width: 100%; }
  /* Reconcile dialog inputs: 16px to stop iOS auto-zoom on focus. */
  .recon-credit-controls select,
  .recon-credit-controls input { font-size: 16px; min-height: 44px; }
  .recon-credit-controls input { width: 100%; }
  .recon-actions .secondary-button,
  .recon-actions .primary-button { flex: 1 1 auto; }
}

/* Sidebar icon groups — subtle dividers between clusters (icon-only rail) */
.nav-group {
  width: 100%;
  display: grid;
  /* Same column cap as .module-nav: without an explicit template the implicit
     `auto` column grows to the widest label's max-content (wider than the rail),
     so the active/hover highlight on a grouped item (e.g. "Support Quote
     Builder") bled past the sidebar into the work area. minmax(0, 1fr) pins the
     column to the rail width and long labels ellipsis-clip. */
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  justify-items: center;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.nav-group[hidden] { display: none; }

/* ── Collapsible group headers (injected by app.js — index.html is static) ──
   The header sits at the top of each group where the divider was: a compact,
   full-width chevron toggle. Collapsed → the group's module buttons fold away
   (shortening the rail); a dot appears if a folded item still carries a live
   badge. The rail is 60px, so the header is chevron-only — the section name
   rides in its title + aria-label. */
.nav-group-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 22px;
  padding: 2px 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: color .14s ease, background .14s ease;
}
.nav-group-header:hover,
.nav-group-header:focus-visible { color: #ffffff; background: rgba(255, 255, 255, 0.08); }
.nav-group-header:focus-visible { outline: 2px solid rgba(132, 189, 45, 0.6); outline-offset: 2px; }
.nav-group-caret {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Rotate the span, not the <svg> root — the icon-rail renderer drops CSS
     transforms applied directly to an <svg> element. */
  transition: transform .16s ease;
}
.nav-group-caret svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-group.is-collapsed .nav-group-caret { transform: rotate(-90deg); }
/* Collapsed: fold away the module buttons, keep the header. */
.nav-group.is-collapsed .nav-item { display: none !important; }
/* Aggregate badge: a folded group with at least one live child badge. */
.nav-group-dot {
  position: absolute;
  top: 3px;
  right: 9px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--aw-lime);
}
.nav-group-dot[hidden] { display: none !important; }

/* Compact density (desktop ≥641px): tighten the rail so the full expanded list
   clears a 1080p viewport without scrolling. Phones/tablets ≤640px keep the
   roomier tap targets unchanged. */
@media (min-width: 641px) {
  .module-nav { gap: 5px; }
  .nav-group { gap: 5px; padding-top: 6px; }
  .nav-item { min-height: 36px; }
  .nav-group-header { min-height: 18px; }
}

/* User Access grid — house design primitives. Header carries a forest title +
   muted sub; each staff member is an .aw-card with an .aw-eyebrow chip label. */
.ua-head { display: flex; flex-direction: column; gap: 3px; }
.ua-head h2 { margin: 0; }
.ua-sub { margin: 0; font-size: 13px; color: var(--aw-sage-2); line-height: 1.45; }

.ua-body { display: flex; flex-direction: column; gap: 14px; }

/* Admin has six section tabs (Users & access / Automations / Alert rules / App
   errors / Deleted items / Usage) — too many to fit or share the width on a phone.
   Make the segmented control a horizontally-scrollable strip: segments keep their
   natural (slightly tightened) size and the row swipes. */
@media (max-width: 640px) {
  .ua-tabseg {
    width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 12px;
  }
  .ua-tabseg::-webkit-scrollbar { display: none; }
  .ua-tabseg .aw-seg { flex: 0 0 auto; padding: 8px 12px; font-size: 12.5px; }
}
.ua-user-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ua-user-head strong { color: var(--aw-forest); font-size: 15px; font-weight: 700; }
.ua-email { font-size: 12px; color: var(--aw-sage-2); }
.ua-role-badge {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  padding: 1px 8px; border-radius: 999px; background: var(--aw-off-1); color: var(--aw-sage-2);
}
.ua-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ua-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--aw-line-strong); background: var(--aw-panel); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.ua-chip .ua-tick { font-weight: 700; font-size: 12px; }
/* Visible: forest fill + lime tick (matches the segmented active + accent look). */
.ua-chip.ua-on { background: var(--aw-primary); color: #fff; border-color: var(--aw-forest); }
.ua-chip.ua-on .ua-tick { color: var(--aw-lime); }
.ua-chip.ua-on:hover { background: var(--aw-forest-hover); }
/* Hidden: quiet dashed outline. */
.ua-chip.ua-off { background: var(--aw-panel); color: var(--aw-sage-2); border-color: var(--aw-line-strong); border-style: dashed; }
.ua-chip.ua-off:hover { color: var(--aw-forest); border-color: var(--aw-sage-2); }
.ua-chip.ua-off .ua-tick { color: var(--aw-sage); }
/* Not-available-to-role: greyed, dotted, non-interactive — kept visually distinct. */
.ua-chip.ua-role { cursor: default; color: var(--aw-sage); background: var(--aw-off-2); border-color: var(--aw-line); border-style: dotted; }

/* Admin screen: section eyebrow above the Users list. */
.ua-section-eyebrow { margin: 0 0 12px; }

/* Access master toggle — sits at the end of the user head row. Active = green
   chip; Blocked = danger-tinted; owner = locked (same greyed treatment as chips). */
.ua-user-head .ua-access { margin-left: auto; }
.ua-access {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  border: 1px solid var(--aw-line-strong); background: var(--aw-panel); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.ua-access .ua-dot { width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
.ua-access.ua-access-on { color: var(--aw-green); background: #e7f6ee; border-color: #bfe4cd; }
.ua-access.ua-access-on:hover { background: #d9f0e2; }
.ua-access.ua-access-off { color: var(--aw-danger); background: #fbeaea; border-color: #f0caca; }
.ua-access.ua-access-off:hover { background: #f7dede; }
.ua-access.ua-access-locked {
  cursor: default; color: var(--aw-sage); background: var(--aw-off-2);
  border-color: var(--aw-line); border-style: dotted;
}
.ua-access .ua-owner-note {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--aw-sage);
}

/* Deleted items (Recycle bin) tab. Rows are laid out inline in the module; this
   only trims the first row's divider and gives the list a little breathing room. */
.ua-deleted { margin-top: 22px; }
.ua-deleted-list .ua-del-item:first-child { border-top: 0; padding-top: 0; }

/* Automated emails panel. */
.ua-emails { margin-top: 22px; }
.ua-emails-card { gap: 18px; }
.ua-email-list { display: flex; flex-direction: column; }
.ua-email-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0; border-top: 1px solid var(--aw-line);
}
.ua-email-row:first-child { border-top: 0; padding-top: 0; }
.ua-email-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ua-email-info strong { color: var(--aw-forest); font-size: 14px; font-weight: 700; }
.ua-email-sched {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--aw-sage-2); font-family: var(--aw-mono);
}
.ua-email-purpose { font-size: 12.5px; color: var(--aw-sage-2); line-height: 1.4; }
.ua-email-toggle { margin-left: auto; flex-shrink: 0; }

.ua-sender .ua-hint { margin: 0; font-size: 12px; }
.ua-sender-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ua-sender-actions .form-message { margin: 0; }

.ua-tx-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ua-tx-row { display: flex; flex-direction: column; gap: 1px; }
.ua-tx-row strong { font-size: 13px; font-weight: 700; color: var(--aw-sage-3); }
.ua-tx-row span { font-size: 12px; color: var(--aw-sage-2); }

/* Blocked lock screen. */
.access-lock { display: flex; justify-content: center; padding: 48px 20px; }
.access-lock-card { max-width: 460px; text-align: center; align-items: center; gap: 16px; padding: 32px; }
.access-lock-title { margin: 0; color: var(--aw-forest); font-size: 22px; }
.access-lock-body { margin: 0; color: var(--aw-sage-2); line-height: 1.5; font-size: 14px; }

@media (max-width: 640px) {
  .ua-user-head .ua-access { margin-left: 0; }
  .ua-email-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ua-email-toggle { margin-left: 0; }
}

/* Premium badges — active on brand green, proposed amber, expired sage. */
.status-badge.active {
  color: var(--aw-green) !important;
  background: #e7f6ee !important;
}

.status-badge.proposed {
  color: #b45309 !important;
  background: #fef3e2 !important;
}

.status-badge.expired {
  color: var(--aw-sage-2) !important;
  background: var(--aw-off-1) !important;
}

/* Detail View Hero styling */
.detail-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.detail-top-bar .link-button {
  color: var(--aw-green);
  text-decoration: none;
}

.detail-top-bar .link-button:hover {
  text-decoration: underline;
}

.detail-hero {
  background: var(--aw-primary);
  color: #ffffff;
  padding: 24px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.detail-hero-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.detail-hero-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--aw-lime);
  color: var(--aw-forest);
  font-weight: 700;
  font-size: 18px;
}

.detail-hero-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-hero-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--aw-lime);
  font-weight: 500;
  font-family: var(--aw-mono);
}

.detail-hero-info h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
}

.detail-hero-subtext {
  margin: 0;
  font-size: 14px;
  color: var(--aw-off-2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-hero-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Detail Stat Strip */
.detail-stat-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.stat-cell {
  background: var(--aw-panel);
  border: 1px solid var(--aw-line);
  padding: 14px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stat-cell .stat-label {
  font-size: 11px;
  color: var(--aw-sage-2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-cell .stat-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--aw-forest);
}

/* Renewal stat cell flagged when due/overdue */
.stat-cell.stat-overdue {
  border-color: #f3c0c0;
  background: #fef4f4;
}

.stat-cell.stat-due-soon {
  border-color: #f4e2c4;
  background: #fffaf2;
}

.stat-flag {
  align-self: flex-start;
  margin-top: 2px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  text-transform: uppercase;
}

/* Detail status banner — "what's due / overdue" */
.detail-status-banner {
  border: 1px solid var(--aw-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
  background: var(--aw-panel);
}

.detail-status-banner.banner-overdue {
  border-color: #f3c0c0;
  background: #fdf5f5;
}

.detail-status-banner.banner-due-soon {
  border-color: #f4e2c4;
  background: #fffaf2;
}

.detail-status-banner.banner-ok {
  display: flex;
  align-items: center;
  gap: 10px;
}

.detail-status-banner .banner-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.banner-overdue .banner-dot { background: var(--aw-danger); }
.banner-due-soon .banner-dot { background: #d98a1f; }
.banner-ok .banner-dot { background: #0a7a3d; }

.banner-head-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.banner-head-text span {
  font-size: 13px;
  color: var(--aw-muted);
}

.banner-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 15px;
}

.banner-counts {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--aw-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.banner-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.banner-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.banner-item-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.banner-item.item-overdue .banner-item-dot { background: var(--aw-danger); }
.banner-item.item-due-soon .banner-item-dot { background: #d98a1f; }
.banner-item.item-overdue .banner-item-text { color: var(--aw-danger); font-weight: 600; }

.banner-item-date {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--aw-muted);
  font-variant-numeric: tabular-nums;
}

/* Service-schedule row highlighting */
.services-table tr.svc-overdue td {
  background: #fdf5f5;
}

/* Detail Side-by-Side Main Layout */
.detail-main-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
  margin-bottom: 22px;
}

.detail-column {
  display: grid;
  gap: 18px;
}

.detail-bottom-layout {
  display: grid;
  gap: 18px;
}

/* ==========================================================================
   REGISTER — Phase 3b chrome (scoped house treatment).
   Appended so it does not disturb the .solarsupport/.mapping (Phase 3a) or
   other module blocks. Purely surface/typography token-alignment — no
   structural change to the .register-table grid or the resize machinery.
   ========================================================================= */

/* House panel head: forest title + sage sub, matching the documents toolbar. */
.register-panel .panel-header h2,
.register-panel .panel-header h3,
.detail-section .panel-header h3,
.detail-panel .panel-header h3,
.plan-card .panel-header h3 {
  color: var(--aw-forest);
}
.register-header .muted-note { color: var(--aw-sage-2); }

/* Toolbar field labels → mono eyebrow feel (matches .documents-search span). */
.register-toolbar .field > span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--aw-sage-2);
  font-family: var(--aw-mono);
}

/* Search + inline/detail form inputs → the documents-toolbar input treatment. */
.register-search input,
.detail-section .inline-form input,
.detail-section .inline-form select,
.detail-view .form-grid input,
.detail-view .form-grid select,
.detail-view .form-grid textarea {
  border: 1px solid var(--aw-line-strong);
  border-radius: 10px;
  background: var(--aw-panel);
  color: var(--aw-text);
}
.register-search input:focus,
.detail-section .inline-form input:focus,
.detail-section .inline-form select:focus,
.detail-view .form-grid input:focus,
.detail-view .form-grid select:focus,
.detail-view .form-grid textarea:focus {
  outline: 0;
  border-color: var(--aw-green);
  box-shadow: 0 0 0 3px rgba(47, 122, 60, 0.14);
}

/* Overdue-without-report notice — semantic amber on the amber token. */
.reg-uncovered-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 1px solid var(--aw-amber);
  background: #fdf6ec;
  border-radius: 8px;
  font-size: 13px;
  color: #7a4d00;
}
.reg-uncovered-icon { font-size: 15px; line-height: 1.1; }
.reg-uncovered-list { margin: 4px 0 0; padding-left: 18px; }

/* Media Queries for responsiveness */
@media (max-width: 1024px) {
  .detail-main-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .detail-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .register-table tr {
    grid-template-columns: 48px 1fr;
    gap: 12px;
  }
  
  .register-table thead tr {
    display: none; /* Hide header rows on mobile */
  }
  
  .client-tier-cell,
  .client-renewal-cell {
    grid-column: 2;
  }
  
  .client-status-cell {
    grid-column: 2;
    justify-self: start !important;
  }

  /* Register LIST rows → mobile card (flex). The desktop table is min-width:900px
     inside a horizontally-scrolling .table-wrap; on phones drop that and lay each
     row out as a tap-target card: avatar + name/suburb + status on the top line
     (ident flex-grows so the meta always wraps below it), then tier · renewal ·
     what's-due flow on a second line. Bare <td>s are targeted by position; scoped
     :not(.detail-table) so the services / monitoring detail tables are untouched. */
  .register-table:not(.detail-table) { min-width: 0; }
  .register-table:not(.detail-table) tbody { display: flex; flex-direction: column; gap: 9px; padding: 4px 0 2px; }
  .register-table:not(.detail-table) tbody tr {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 5px 9px; padding: 11px 13px;
    border: 1px solid var(--aw-line); border-radius: 12px; background: var(--aw-panel);
  }
  .register-table:not(.detail-table) tbody tr.clickable-row:hover,
  .register-table:not(.detail-table) tbody tr.clickable-row:focus-visible { transform: none; border-color: var(--aw-line-strong); }
  .register-table:not(.detail-table) tbody td { padding: 0; }
  .register-table:not(.detail-table) tbody td:nth-child(1) { flex: 0 0 auto; order: 1; } /* avatar */
  .register-table:not(.detail-table) tbody td:nth-child(2) { flex: 1 1 55%; min-width: 0; order: 2; } /* name/suburb — grows to fill line 1 */
  .register-table:not(.detail-table) tbody td:nth-child(7) { flex: 0 0 auto; order: 3; } /* status badge, top-right */
  .register-table:not(.detail-table) tbody td:nth-child(3) { flex: 0 0 auto; order: 4; } /* tier */
  .register-table:not(.detail-table) tbody td:nth-child(4) { flex: 0 0 auto; order: 5; } /* renewal */
  .register-table:not(.detail-table) tbody td:nth-child(5) { display: none; }            /* next-due date — folded into the what's-due chip */
  .register-table:not(.detail-table) tbody td:nth-child(6) { flex: 0 0 auto; order: 6; } /* what's due */
  .register-table:not(.detail-table) tbody td:nth-child(2) .client-name {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* Empty-state row (single colspan cell) fills the card width. */
  .register-table:not(.detail-table) tbody td[colspan] { flex: 1 1 100%; display: block; }
}

@media (max-width: 640px) {
  /* The register list (.register-stack) and the client detail (.detail-view) are
     bare `display:grid` containers whose single implicit column is `auto` — so any
     child wider than the viewport (the 3 non-wrapping toolbar/detail buttons, a
     cramped 2-col KPI strip, the padded hero) blew the column out and dragged all
     the content off the right edge together. Pin the column to minmax(0,1fr) so
     children clip/wrap instead of widening the page. */
  .register-stack,
  .detail-view { grid-template-columns: minmax(0, 1fr); }
  /* KPI dashboards: one readable full-width card per row on phones (the ≤680px
     2-col layout cramped "Renewals Overdue" / "Inspections Overdue"). Needs the
     .kpi-strip-6 compound to beat the equally-specific ≤680 rule on source order. */
  .kpi-strip,
  .kpi-strip.kpi-strip-6 { grid-template-columns: minmax(0, 1fr); }
  /* Filter pills wrap instead of overflowing off the edge. */
  .register-toolbar .status-pills { flex-wrap: wrap; }
  /* Toolbar action buttons wrap onto their own full-width line and share it. */
  .register-toolbar .toolbar-actions { flex-wrap: wrap; width: 100%; }
  .register-toolbar .toolbar-actions > button { flex: 1 1 auto; }
}

@media (max-width: 480px) {
  .kpi-strip {
    grid-template-columns: 1fr;
  }
  
  .detail-stat-strip {
    grid-template-columns: 1fr;
  }
  
  .status-pills {
    flex-wrap: wrap;
  }
}

/* Table Resize & Docs Table Styles */
.docs-table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

.docs-link-select {
  padding: 7px 9px;
  border: 1px solid var(--aw-border);
  border-radius: 7px;
  font: inherit;
  max-width: 170px;
}

.docs-table th,
.docs-table td {
  padding: 6px 8px;
  vertical-align: middle;
  text-align: left;
  border-bottom: 0.5px solid var(--aw-border);
}

.docs-table th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--aw-muted);
}

.docs-table td {
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Compact action buttons inside the docs table — smaller than the shared
   .secondary-button.compact so a full action row fits without wrapping. */
.docs-table .docs-actions-cell .secondary-button.compact {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 12px;
}

/* Chips scale down to match the smaller body text. */
.docs-table .quote-status {
  font-size: 10px;
  padding: 1px 6px;
  margin-left: 5px;
}

/* Mobile: the fixed-width table overflows, so stack each row as a card with
   inline labels instead of a cramped, clipped table. */
@media (max-width: 640px) {
  .docs-table { display: block; width: 100%; }
  .docs-table thead { display: none; }
  .docs-table tbody, .docs-table tr, .docs-table td { display: block; }
  .docs-table tr {
    border: 1px solid var(--aw-border);
    border-radius: 10px;
    padding: 8px 14px;
    margin: 0 0 10px;
  }
  .docs-table td {
    border-bottom: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    padding: 5px 0;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    align-items: baseline;
  }
  .docs-table td::before {
    content: attr(data-label);
    flex: 0 0 34%;
    font-weight: 600;
    color: var(--aw-muted);
    text-align: left;
  }
  .docs-table td.docs-actions-cell {
    justify-content: flex-start;
    gap: 8px;
    padding-top: 10px;
  }
  .docs-table td.docs-actions-cell::before { content: none; }
  .docs-table .empty-cell { text-align: center; justify-content: center; }
  .docs-table .empty-cell::before { content: none; }
}

table[data-resizable] {
  table-layout: fixed;
}

table[data-resizable] th {
  position: relative;
}

.col-resizer {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 10;
  border-right: 2px solid rgba(15, 23, 42, 0.10);
}

.col-resizer:hover {
  border-right-color: #009846;
  background-color: rgba(0, 152, 70, 0.10);
}

/* Toast styles */
.undo-toast {
  position: fixed;
  /* Lift the toast above the iOS home indicator in the installed PWA.
     env() = 0 elsewhere, so this is a plain 24px on desktop. */
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  background: var(--aw-panel);
  border: 1px solid var(--aw-border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 12px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 9999;
  font-size: 14px;
  color: var(--aw-text);
}
.undo-toast-btn {
  background: transparent;
  border: none;
  color: var(--aw-green);
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.undo-toast-btn:hover {
  text-decoration: underline;
}

/* Pull-to-refresh pill (installed PWA only; see initPullToRefresh in app.js).
   z-index ~1100 sits above the bottom tab bar (800) and overlay scrims (1000),
   so it shows harmlessly over sheets too. */
.aw-ptr {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1100;
  background: var(--aw-panel);
  border: 1px solid var(--aw-line-strong);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--aw-forest);
  box-shadow: 0 4px 12px rgba(20, 39, 26, 0.12);
  white-space: nowrap;
  pointer-events: none;
}
.aw-ptr.is-past {
  background: var(--aw-primary);
  border-color: var(--aw-forest);
  color: #fff;
}
.aw-ptr[hidden] { display: none; }

/* Detail table grid templates */
.services-table tr { grid-template-columns: 1.5fr 1fr 1fr 0.9fr 1.8fr; }
.monitoring-reports-table tr { grid-template-columns: 1fr 1.4fr 1fr 1.9fr; }
[data-resizable="reg-documents"] tr { grid-template-columns: 2fr 1fr 1fr 1.5fr; }
[data-resizable="reg-global-docs"] tr { grid-template-columns: 1.5fr 2fr 1fr 1fr 1.5fr; }

/* Mobile: the two primary detail tables (Services schedule, Monitoring reports)
   become labelled cards instead of a 720px sideways-scrolling grid. Each row is a
   card; each cell is a "LABEL  value" line (label from the td's data-label, so no
   thead is needed — it's already hidden on mobile). The actions cell has no label
   and its buttons sit on their own full-width line. */
@media (max-width: 640px) {
  .services-table, .monitoring-reports-table { min-width: 0; }
  .services-table tbody, .monitoring-reports-table tbody { display: block; }
  .services-table tbody tr, .monitoring-reports-table tbody tr {
    display: block; grid-template-columns: none !important;
    border: 1px solid var(--aw-line); border-radius: 10px; background: var(--aw-panel);
    padding: 6px 12px; margin-bottom: 9px;
  }
  .services-table tbody td, .monitoring-reports-table tbody td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 6px 0; border: 0; border-bottom: 1px solid var(--aw-line); text-align: right;
  }
  .services-table tbody td:last-child, .monitoring-reports-table tbody td:last-child { border-bottom: 0; }
  .services-table tbody td[data-label]::before, .monitoring-reports-table tbody td[data-label]::before {
    content: attr(data-label); flex: 0 0 auto; text-align: left;
    font-family: var(--aw-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: var(--aw-sage-2);
  }
  /* Actions cell (no data-label) + inline-edit form (colspan) span full width. */
  .services-table tbody td:not([data-label]),
  .monitoring-reports-table tbody td:not([data-label]) { justify-content: flex-start; padding-top: 8px; }
  .services-table tbody td[colspan], .monitoring-reports-table tbody td[colspan] {
    display: block; text-align: left; border-bottom: 0; padding: 4px 0;
  }
}

/* Full-width cells (inline edit form + "No rows"/"Loading" placeholders) must
   span all grid tracks — CSS grid ignores the HTML colspan attribute. */
.register-table td[colspan] { grid-column: 1 / -1; }

[data-resizable="reg-jobs"] tr { grid-template-columns: 1.6fr 1fr 1fr 1.2fr 1.6fr; }
[data-resizable="reg-credits"] tr { grid-template-columns: 1.4fr 0.7fr 1fr 1.1fr 0.9fr 1.6fr; }

/* Subscriber profile section navigation */
.profile-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 0;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--aw-border);
}
.profile-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid var(--aw-border);
  background: var(--aw-panel);
  color: var(--aw-text);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.profile-nav-btn:hover { background: var(--aw-off-1); border-color: var(--aw-line-strong); }
.profile-nav-btn.active { background: var(--aw-primary); border-color: var(--aw-forest); color: #ffffff; }
.profile-nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--aw-off-1);
  color: var(--aw-sage-2);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--aw-mono);
}
.profile-nav-btn.active .profile-nav-count { background: var(--aw-lime); color: var(--aw-forest); }
.profile-nav-count[hidden] { display: none !important; }
.profile-sections { width: 100%; }

/* ── Register detail · Photos gallery ──────────────────────────────────────
   Aggregated evidence photos (job cards / sign-offs / inspections / audits),
   grouped per source document with a small header, shown as a responsive
   thumbnail grid. Token-driven, so it re-tints in dark with no override. */
.reg-photos { display: flex; flex-direction: column; gap: 22px; }
.reg-photos-status { margin: 0; padding: 10px 2px; font-size: 14px; color: var(--aw-muted); }
.reg-photos-status.error { color: var(--aw-danger); }

.reg-photo-group-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  padding-bottom: 8px; margin-bottom: 12px;
  border-bottom: 1px solid var(--aw-line);
}
.reg-photo-group-title { font-size: 14px; font-weight: 700; color: var(--aw-forest); }
.reg-photo-group-sub { font-size: 12.5px; color: var(--aw-muted); }
.reg-photo-group-count {
  margin-left: auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: var(--aw-off-1); color: var(--aw-sage-2);
  font-family: var(--aw-mono); font-size: 12px; font-weight: 600;
}

.reg-photo-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.reg-photo-thumb {
  position: relative; padding: 0; margin: 0; cursor: pointer;
  aspect-ratio: 1 / 1; overflow: hidden;
  border: 1px solid var(--aw-border); border-radius: 10px; background: var(--aw-off-1);
}
.reg-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reg-photo-thumb:hover { border-color: var(--aw-forest); }
.reg-photo-thumb:focus-visible { outline: 2px solid var(--aw-lime); outline-offset: 2px; }

/* Lightbox — fixed scrim mirroring the search/help overlay conventions. The
   dark scrim is intentional in both themes; the buttons/caption are legible on it. */
.reg-lightbox {
  position: fixed; inset: 0; z-index: 9200;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 56px; background: rgba(10, 18, 12, 0.86);
}
.reg-lightbox[hidden] { display: none !important; }
.reg-lb-figure {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-width: 100%; max-height: 100%;
}
.reg-lb-img {
  max-width: min(1100px, calc(100vw - 112px)); max-height: calc(100vh - 120px);
  object-fit: contain; border-radius: 8px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
}
.reg-lb-cap {
  font-family: var(--aw-mono); font-size: 12px; letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.82);
}
.reg-lb-btn {
  position: absolute; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; color: #ffffff; background: rgba(255, 255, 255, 0.12);
  border-radius: 999px; line-height: 1;
}
.reg-lb-btn:hover { background: rgba(255, 255, 255, 0.24); }
.reg-lb-btn[hidden] { display: none !important; }
.reg-lb-close { top: 18px; right: 20px; width: 40px; height: 40px; font-size: 26px; }
.reg-lb-prev, .reg-lb-next { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 30px; }
.reg-lb-prev { left: 14px; }
.reg-lb-next { right: 14px; }

@media (max-width: 640px) {
  .reg-lightbox { padding: 16px; }
  .reg-lb-img { max-width: calc(100vw - 32px); max-height: calc(100vh - 96px); }
  .reg-lb-prev { left: 6px; }
  .reg-lb-next { right: 6px; }
}

/* Inline edit form for a service row — each field is self-labelled so it
   doesn't rely on lining up with the table column headers. */
.inline-edit-form {
  background: var(--aw-off-3);
  border: 1px solid var(--aw-line-strong);
  border-radius: 8px;
  padding: 12px 14px;
}
.inline-edit-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--aw-forest);
  font-family: var(--aw-mono);
  margin-bottom: 10px;
}
.inline-edit-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.inline-edit-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 150px;
  min-width: 130px;
}
.inline-edit-field > span {
  font-size: 11px;
  font-weight: 600;
  color: var(--aw-muted, #64748b);
}
.inline-edit-field select,
.inline-edit-field input {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--aw-border);
  border-radius: 6px;
  font-size: 13px;
}
.inline-edit-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 0 0 auto;
}

/* ============================================================
   Shared design-system primitives (Phase 0 foundation).
   Extracted from the Support Quote Builder's look so later phases
   can restyle other modules by swapping in these classes. Each
   primitive is defined once here and shared with the wizard's
   existing .quotex-* markup (same selector list) so the quote
   wizard renders identically while the class becomes global.
   ============================================================ */

/* Eyebrow — mono-style letter-spaced uppercase green label + short lime rule. */
.aw-eyebrow,
.quotex-eyebrow {
  position: relative;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aw-green);
  font-family: var(--aw-mono);
  padding-bottom: 7px;
}
.aw-eyebrow::after,
.quotex-eyebrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--aw-lime);
}

/* Section — vertical rhythm for a labelled block. */
.aw-section,
.quotex-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 2-col field grid, collapses to 1 col on mobile. */
.aw-grid-2,
.quotex-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}
/* Global 1-col collapse for the shared primitive (the .quotex-grid variant is
   collapsed by its own scoped ≤640px rule below). */
@media (max-width: 640px) {
  .aw-grid-2 { grid-template-columns: 1fr; }
}

/* Light bordered card (travel/preview style). */
.aw-card,
.quotex-card {
  border: 1px solid var(--aw-line);
  border-radius: 14px;
  background: var(--aw-panel);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Stat card + forest/lime accent variant. */
.aw-stat-card,
.quotex-summary-card {
  border: 1px solid var(--aw-line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--aw-panel);
}
.aw-stat-card > span,
.quotex-summary-card span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--aw-sage-2);
}
.aw-stat-card > strong,
.quotex-summary-card strong {
  font-size: 20px;
  font-weight: 700;
  color: var(--aw-forest);
  line-height: 1.1;
}
.aw-stat-card.is-accent,
.quotex-summary-card.is-accent {
  background: var(--aw-primary);
  border-color: var(--aw-forest);
}
.aw-stat-card.is-accent > span,
.quotex-summary-card.is-accent span {
  color: var(--aw-lime);
}
.aw-stat-card.is-accent > strong,
.quotex-summary-card.is-accent strong {
  color: #fff;
}

/* Segmented pill group with forest active state. */
.aw-segmented,
.quotex-segmented {
  display: inline-flex;
  align-self: flex-start;
  border: 1px solid var(--aw-line-strong);
  border-radius: 999px;
  background: var(--aw-off-1);
  padding: 3px;
  gap: 3px;
}
.aw-seg,
.quotex-seg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--aw-sage-2);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 34px;
  white-space: nowrap;
  transition: background .12s, color .12s;
}
.aw-seg input,
.quotex-seg input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.aw-seg:hover,
.quotex-seg:hover {
  color: var(--aw-forest);
}
.aw-seg.is-active,
.quotex-seg.is-active {
  background: var(--aw-primary);
  color: #fff;
  box-shadow: 0 1px 2px rgba(20, 39, 26, 0.18);
}

/* Collapsible details — styled summary with a rotating caret. */
.aw-details,
.quotex-advanced {
  border: 1px solid var(--aw-line);
  border-radius: 14px;
  background: var(--aw-off-3);
}
.aw-details > summary,
.quotex-advanced > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  color: var(--aw-forest);
  padding: 15px 18px;
  list-style: none;
}
.aw-details > summary::-webkit-details-marker,
.quotex-advanced > summary::-webkit-details-marker {
  display: none;
}
.aw-details-caret,
.quotex-advanced-caret {
  color: var(--aw-sage-2);
  font-size: 15px;
  transition: transform .15s;
}
.aw-details[open] .aw-details-caret,
.quotex-advanced[open] .quotex-advanced-caret {
  transform: rotate(180deg);
}
.aw-details-body,
.quotex-advanced-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 18px 18px;
}

/* ============================================================
   Support Quote Builder (native rewrite) — scoped .quotex block.
   Consumes the shared primitives above; only wizard-specific
   layout/palette bindings remain here. A local forest/lime
   palette maps the --qx-* vars onto the shared brand tokens.
   ============================================================ */
.quotex {
  --qx-forest: var(--aw-forest);
  --qx-lime: var(--aw-lime);
  --qx-green: var(--aw-green);
  --qx-sage: var(--aw-sage-2);
  --qx-sage-2: var(--aw-sage);
  --qx-line: var(--aw-line);
  --qx-line-strong: var(--aw-line-strong);
  --qx-off: var(--aw-off-1);
  --qx-off-2: var(--aw-off-3);
  --qx-card: var(--aw-panel);

  max-width: 900px;
  margin: 0 auto;
  padding: 4px 8px 56px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  color: var(--qx-forest);
}

/* ---------------------------------------------------- Stepper */
.quotex-steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  padding: 4px 4px 0;
  list-style: none;
  counter-reset: qx;
}
.quotex-step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-width: 0;
}
/* Hairline connector between steps (drawn from each step's dot to the next). */
.quotex-step:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 50%;
  left: -50%;
  height: 2px;
  background: var(--qx-line-strong);
  z-index: 0;
}
.quotex-step.is-done::before,
.quotex-step.is-active::before { background: var(--qx-green); }
.quotex-step-btn {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0 4px;
  width: 100%;
}
.quotex-step-dot {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--qx-card);
  border: 2px solid var(--qx-line-strong);
  color: var(--qx-sage);
  font-size: 14px;
  font-weight: 700;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.quotex-step-check { display: none; font-size: 15px; line-height: 1; }
.quotex-step-num { display: block; }
.quotex-step-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--qx-sage);
  text-align: center;
  line-height: 1.25;
  max-width: 12ch;
}
/* Upcoming: sage outline (default above). Active: lime ring on forest dot. */
.quotex-step.is-active .quotex-step-dot {
  background: var(--qx-forest);
  border-color: var(--qx-lime);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(132, 189, 45, 0.22);
}
.quotex-step.is-active .quotex-step-label { color: var(--qx-forest); font-weight: 700; }
/* Completed: forest circle with a white check. */
.quotex-step.is-done .quotex-step-dot {
  background: var(--qx-green);
  border-color: var(--qx-green);
  color: #fff;
}
.quotex-step.is-done .quotex-step-num { display: none; }
.quotex-step.is-done .quotex-step-check { display: block; }
.quotex-step.is-done .quotex-step-label { color: var(--qx-forest); }
.quotex-step-btn:hover .quotex-step-dot { border-color: var(--qx-green); }

/* ---------------------------------------------------- Panels */
.quotex-panel { display: none; }
.quotex-panel.active { display: flex; flex-direction: column; gap: 22px; }
.quotex-panel-head { display: flex; flex-direction: column; gap: 2px; }
.quotex-panel h2 { margin: 0; font-size: 22px; font-weight: 700; color: var(--qx-forest); letter-spacing: -0.01em; }
.quotex-panel-sub { margin: 0; font-size: 13px; color: var(--qx-sage); }
.quotex-panel h3 { margin: 0; font-size: 14px; font-weight: 700; color: var(--qx-forest); }

/* Section + eyebrow + 2-col grid now come from the shared .aw-section /
   .aw-eyebrow / .aw-grid-2 primitives (selector-shared above). */

/* ---------------------------------------------------- Fields grid (max 2 col) */
.quotex-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.quotex-field.quotex-full { grid-column: 1 / -1; }
.quotex-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--qx-sage);
  letter-spacing: 0.01em;
}
.quotex-field input,
.quotex-field select,
.quotex-field textarea {
  padding: 0 13px;
  height: 42px;
  border: 1px solid var(--qx-line-strong);
  border-radius: 10px;
  font-size: 15px;
  color: var(--qx-forest);
  background: var(--qx-card);
  width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
.quotex-field textarea {
  height: auto;
  min-height: 72px;
  padding: 11px 13px;
  resize: vertical;
  line-height: 1.45;
}
.quotex-field input:focus,
.quotex-field select:focus,
.quotex-field textarea:focus {
  outline: none;
  border-color: var(--qx-green);
  box-shadow: 0 0 0 3px rgba(47, 122, 60, 0.12);
}
.quotex-field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236c726a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  padding-right: 34px;
}
.quotex-hint { font-size: 12px; color: var(--qx-sage); line-height: 1.4; }
.quotex-inline-btns { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 4px; }

/* .text-button is now GLOBAL (identical treatment) — module-local override removed. */

/* ---------------------------------------------------- Cards
   (.quotex-card now shares the global .aw-card primitive.) */
.quotex-card-head { display: flex; flex-direction: column; gap: 3px; }

/* Forest primary + secondary hover are now GLOBAL (see .primary-button /
   .secondary-button). All quotex primaries are .compact (width:auto), so the
   old module-local override is redundant and removed. */

/* ---------------------------------------------------- Segmented controls
   (.quotex-segmented / .quotex-seg share the global .aw-segmented / .aw-seg
   primitives above; only the wizard-specific "wide" layout remains here.) */
.quotex-segmented-wide { display: flex; align-self: stretch; max-width: 460px; }
.quotex-segmented-wide .quotex-seg { flex: 1; }

/* ---------------------------------------------------- Client source picker */
.quotex-source {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--qx-line);
  border-radius: 14px;
  background: var(--qx-off-2);
  padding: 16px 18px;
}
.quotex-source-picker { display: flex; flex-direction: column; gap: 8px; }
.quotex-source-picker[hidden] { display: none !important; }

/* ---------------------------------------------------- Template cards */
.quotex-templates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.quotex-template {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: left;
  border: 1px solid var(--qx-line-strong);
  border-radius: 12px;
  background: var(--qx-off-2);
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.quotex-template:hover {
  border-color: var(--qx-green);
  background: var(--aw-panel);
  box-shadow: 0 2px 8px rgba(20, 39, 26, 0.06);
}
.quotex-template-title { font-size: 14px; font-weight: 700; color: var(--qx-forest); }
.quotex-template-sub { font-size: 11px; color: var(--qx-sage); }

/* ---------------------------------------------------- Tables (items / legs) */
.quotex-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; }
.quotex-items,
.quotex-legs {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 620px;
  font-size: 14px;
  border: 1px solid var(--qx-line);
  border-radius: 10px;
  overflow: hidden;
}
.quotex-items th,
.quotex-legs th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--qx-sage);
  padding: 9px 10px;
  background: var(--qx-off);
  border-bottom: 1px solid var(--qx-line);
}
.quotex-items td,
.quotex-legs td { padding: 5px 8px; border-bottom: 1px solid var(--qx-line); vertical-align: middle; }
.quotex-items tbody tr:nth-child(even) td,
.quotex-legs tbody tr:nth-child(even) td { background: var(--qx-off-2); }
.quotex-items tbody tr:last-child td,
.quotex-legs tbody tr:last-child td { border-bottom: 0; }
.quotex-cell {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 14px;
  color: var(--qx-forest);
  background: var(--aw-panel);
  height: 36px;
  transition: border-color .12s, box-shadow .12s;
}
.quotex-cell:hover { border-color: var(--qx-line-strong); }
.quotex-cell:focus { outline: none; border-color: var(--qx-green); box-shadow: 0 0 0 2px rgba(47, 122, 60, 0.12); }
.quotex-leg-no { color: var(--qx-sage); font-size: 13px; font-weight: 600; }
.quotex-del-cell { width: 40px; text-align: center; }
.quotex-del {
  border: 0;
  background: transparent;
  color: var(--qx-sage-2);
  border-radius: 8px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: background .12s, color .12s;
}
.quotex-del:hover { background: #fde2e2; color: var(--aw-danger); }

/* Supplier / custom-leg conditional sections. */
.quotex-supplier-section,
.quotex-custom-legs { display: flex; flex-direction: column; gap: 12px; }
.quotex-supplier-section[hidden],
.quotex-custom-legs[hidden] { display: none !important; }

/* ---------------------------------------------------- Travel summary card */
.quotex-travel-card {
  border: 1px solid var(--qx-line);
  border-radius: 14px;
  background: var(--qx-off-2);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.quotex-travel-summary {
  width: 100%;
  border-collapse: collapse;
  min-width: 360px;
  font-size: 14px;
}
.quotex-travel-summary th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--qx-sage);
  padding: 6px 8px;
  border-bottom: 1px solid var(--qx-line);
}
.quotex-travel-summary td { padding: 7px 8px; border-bottom: 1px solid var(--qx-line); color: var(--qx-forest); }
.quotex-travel-summary tfoot td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--qx-line-strong); }

/* ---------------------------------------------------- Nav */
.quotex-nav { display: flex; justify-content: space-between; gap: 12px; padding-top: 4px; }

/* ---------------------------------------------------- Review: stat cards */
.quotex-summary-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
/* .quotex-summary-card shares the global .aw-stat-card primitive (incl. .is-accent). */

/* ---------------------------------------------------- Review: preview cards */
.quotex-previews {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.quotex-preview-card {
  border: 1px solid var(--qx-line);
  border-radius: 14px;
  background: var(--qx-card);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quotex-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.quotex-preview-head .quotex-eyebrow { padding-bottom: 6px; }
.quotex-preview {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--qx-line);
  border-radius: 10px;
  font: 400 12.5px/1.55 var(--aw-mono);
  color: var(--qx-forest);
  background: var(--qx-off-2);
  resize: vertical;
}

/* ---------------------------------------------------- Review: ranked actions */
.quotex-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.quotex-actions-primary,
.quotex-actions-secondary,
.quotex-actions-tertiary { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.quotex-actions .primary-button.compact,
.quotex-actions .secondary-button.compact { min-height: 40px; padding: 9px 16px; font-size: 14px; }
/* (Forest primary treatment inherited from the module-wide .quotex .primary-button rule.) */
.quotex-actions [data-start-jobcard][hidden] { display: none !important; }
.quotex-status-line { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.quotex-status-line[hidden] { display: none !important; }

/* ---------------------------------------------------- Advanced settings
   (.quotex-advanced shares the global .aw-details primitive: styled summary +
   rotating .quotex-advanced-caret.) */

/* ---------------------------------------------------- Save panel */
.quotex-save {
  border: 1px solid var(--qx-line);
  border-radius: 14px;
  background: var(--qx-card);
  padding: 18px;
}
.quotex-save-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.quotex-save-head h3 { margin: 0 0 4px; font-size: 16px; color: var(--qx-forest); }
.quotex-save-head .muted-note { color: var(--qx-sage); }
.quotex-checkbox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0; font-size: 14px; color: var(--qx-forest); }
.quotex-checkbox input { width: auto; }
.quotex-checkbox small { flex-basis: 100%; }
.quotex-sub-rows {
  max-height: 260px;
  overflow: auto;
  border: 1px solid var(--qx-line);
  border-radius: 10px;
  margin-top: 8px;
  background: var(--qx-card);
}
.quotex-sub-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "main pick" "loc pick";
  gap: 2px 12px;
  width: 100%;
  min-height: 58px;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--qx-line);
  background: var(--aw-panel);
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.quotex-sub-row:last-child { border-bottom: 0; }
.quotex-sub-row:hover { background: var(--qx-off-2); }
.quotex-sub-row.is-selected {
  background: #f2f8ec;
  box-shadow: inset 3px 0 0 var(--qx-lime);
}
.quotex-sub-main { grid-area: main; font-weight: 700; color: var(--qx-forest); }
.quotex-sub-loc { grid-area: loc; font-size: 12px; color: var(--qx-sage); }
.quotex-sub-pick { grid-area: pick; align-self: center; font-size: 12px; font-weight: 600; color: var(--qx-sage); }
.quotex-sub-row.is-selected .quotex-sub-pick { color: var(--qx-green); }
.quotex-save-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.quotex-save .empty-cell { padding: 14px; font-size: 13px; color: var(--qx-sage); }
.quotex-save .empty-cell.error,
.quotex-source .empty-cell.error { color: var(--aw-danger); }

/* form-message + error states (module-local) */
.quotex .form-message { font-size: 13px; color: var(--qx-sage); margin: 0; }
.quotex .form-message.error,
.quotex .quotex-hint.error,
.quotex [data-route-status].error,
.quotex [data-source-status].error { color: var(--aw-danger); }

/* ---------------------------------------------------- Mobile (≤640px) */
@media (max-width: 640px) {
  .quotex { padding: 4px 4px 44px; gap: 18px; }
  .quotex-grid,
  .quotex-summary-cards,
  .quotex-previews,
  .quotex-templates { grid-template-columns: 1fr; }
  .quotex-panel.active { gap: 18px; }

  /* Stepper compresses to numbered dots + only the active label. */
  .quotex-step-label { display: none; }
  .quotex-step.is-active .quotex-step-label { display: block; }
  .quotex-step:not(:first-child)::before { top: 15px; }
  .quotex-step-btn { gap: 6px; }

  .quotex-field input,
  .quotex-field select,
  .quotex-field textarea { font-size: 16px; } /* avoid iOS zoom-on-focus */
  .quotex-field input,
  .quotex-field select { height: 46px; }

  .quotex-segmented-wide { max-width: none; }
  .quotex-nav [data-nav-back],
  .quotex-nav [data-nav-next] { flex: 1; }

  .quotex-actions { flex-direction: column; align-items: stretch; }
  .quotex-actions-primary,
  .quotex-actions-secondary,
  .quotex-actions-tertiary { flex-direction: column; align-items: stretch; }
  .quotex-actions .primary-button.compact,
  .quotex-actions .secondary-button.compact { width: 100%; }

  /* Maps action rows: stack the buttons full-width (text buttons stay inline). */
  .quotex-inline-btns .primary-button.compact,
  .quotex-inline-btns .secondary-button.compact { width: 100%; flex: 1 1 100%; }
}

/* ============================================================
   SolarSupport configurator (Phase 3a) — house design system.
   The panel head carries a forest title + muted sub; each form
   block is an .aw-section labelled with an .aw-eyebrow; the live
   totals lead with an .aw-stat-card row (accent card = grand
   total). Field/pricing/logic markup is unchanged; this is chrome
   only. Consumes the shared .aw-* primitives.
   ============================================================ */
.solarsupport .ss-head { display: flex; flex-direction: column; gap: 3px; }
.solarsupport .ss-head h2,
.solarsupport .ss-head h3 { margin: 0; color: var(--aw-forest); }
.solarsupport .ss-sub { margin: 0; font-size: 13px; color: var(--aw-sage-2); line-height: 1.45; }

/* Space the labelled sections; the .aw-section primitive handles inner rhythm. */
.solarsupport .ss-section + .ss-section { margin-top: 24px; }

/* Live totals: a two-up stat-card row above the detailed breakdown. */
.solarsupport .ss-stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.solarsupport .ss-stat-row .aw-stat-card > strong { font-size: 18px; white-space: nowrap; }

/* Eyebrow breakdown headings inside the ledger inherit their own top spacing. */
.solarsupport .totals-block .aw-eyebrow { margin: 14px 0 2px; }
.solarsupport .totals-block .aw-eyebrow:first-child { margin-top: 0; }

/* Action stack under the totals — cover-style picker then buttons. */
.solarsupport .ss-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--aw-line);
}
.solarsupport .ss-actions .ss-cover { margin: 0; }
.solarsupport .ss-actions .form-message { margin: 2px 0 0; }
.solarsupport .ss-actions .form-message:empty { display: none; }

/* "Load client from register" picker at the top of the Client & site section. */
.solarsupport .ss-picker { margin-bottom: 18px; }
.solarsupport .ss-picker-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.solarsupport .ss-picker-body[hidden] { display: none !important; }
.solarsupport .ss-picker-rows {
  border: 1px solid var(--aw-line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--aw-off-3);
}
.solarsupport .ss-picker-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 12px;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--aw-line);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.solarsupport .ss-picker-row:last-child { border-bottom: 0; }
.solarsupport .ss-picker-row:hover { background: var(--aw-off-2); }
.solarsupport .ss-picker-main { font-weight: 700; color: var(--aw-forest); }
.solarsupport .ss-picker-loc { grid-column: 1; font-size: 12px; color: var(--aw-sage-2); }
.solarsupport .ss-picker-row .status-badge { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.solarsupport .ss-picker-rows .empty-cell { height: auto; padding: 14px; font-size: 13px; }

@media (max-width: 640px) {
  .solarsupport .ss-stat-row { grid-template-columns: 1fr; }
}

/* =========================================================================
   MONITORING — Phase 3c chrome (scoped house treatment).
   FINAL module of the design rollout. Appended so it does not disturb the
   Phase 3a (.solarsupport/.mapping) or 3b (.register) blocks. Purely
   surface/typography token-alignment: the report form's inputs, wiring
   (data-hooks, fetch/import buttons, detail + cover selectors) and the entire
   jsPDF generator (generateMonitoringPdf and everything it reads) are
   untouched. Health-verdict colour SEMANTICS are unchanged — health is a
   plain <select>; the PDF owns the green/amber/red rendering.
   ========================================================================= */

/* House panel heads — forest title + sage sub (matches documents / register). */
.monitoring-stack .panel-header h2,
.monitoring-stack .panel-header h3 {
  color: var(--aw-forest);
}
.monitoring-stack .documents-sub { color: var(--aw-sage-2); }

/* Section labels adopt the shared eyebrow language: mono, letter-spaced,
   uppercase green with the short lime underline. Selector-scoped so only the
   monitoring form re-fonts its .section-title — no markup/JS change. */
.monitoring-stack .section-title {
  position: relative;
  margin: 0 0 2px;
  font-family: var(--aw-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aw-green);
  padding-bottom: 7px;
}
.monitoring-stack .section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: var(--aw-lime);
}

/* Repeatable group sub-heads (Monthly production / Action items) sit a step
   below the eyebrow — quiet forest label, not a second eyebrow. */
.monitoring-stack .repeatable-header h4 { color: var(--aw-forest); }

/* Platform fetch panels (FoxESS / Deye / Solis) — retire the hardcoded
   saturated-green tint (#cfe9db border / #f7fcf9 fill), which broke the house
   rule "never tint backgrounds with saturated green". Now a calm off-white
   card with a hairline border, matching the .aw-card surface family. */
.monitoring-stack .foxess-panel {
  border: 1px solid var(--aw-line);
  border-radius: 14px;
  background: var(--aw-off-3);
  padding: 18px;
}

/* Field-group cards (PV rows / repeatable rows) → shared hairline + radius. */
.monitoring-stack .monitoring-pv-row,
.monitoring-stack .repeatable-row {
  border: 1px solid var(--aw-line);
  border-radius: 12px;
}

/* Email-template editor now uses the shared .aw-details primitive; keep its
   body single-column and inputs comfortable. */
.monitoring-template-details .aw-details-body .field { margin-bottom: 12px; }
.monitoring-template-details .aw-details-body .field:last-of-type { margin-bottom: 0; }

/* Ingestion health strip — "did last night's telemetry run?" at a glance.
   A slim .aw-card row of per-platform status chips under the first panel head.
   Chips are tinted status surfaces (never saturated fills), matching the app's
   other status-chip family. Non-green chips expand a compact detail list. */
.ingest-strip.aw-card {
  padding: 12px 16px;
  margin-bottom: 16px;
  gap: 10px;
}
.ingest-strip.is-unavailable { padding: 10px 16px; }
.ingest-unavailable {
  font-size: 13px;
  color: var(--aw-sage-2);
  font-style: italic;
}
.ingest-strip-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
}
.ingest-eyebrow {
  /* eyebrow already uses JetBrains Mono; drop the underline accent so it sits
     inline with the chips as a compact label. */
  padding-bottom: 0;
  flex: 0 0 auto;
}
.ingest-eyebrow::after { display: none; }
.ingest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.ingest-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--aw-line-strong);
  border-radius: 999px;
  background: var(--aw-off-1);
  color: var(--aw-forest);
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: default;
  line-height: 1.2;
}
.ingest-chip.is-clickable { cursor: pointer; }
.ingest-chip.is-clickable:hover { border-color: var(--aw-sage); }
.ingest-chip .ingest-name { white-space: nowrap; }
.ingest-chip .ingest-count {
  font-family: var(--aw-mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--aw-sage-2);
}
.ingest-chip .ingest-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--aw-sage-2);
  text-transform: none;
}
.ingest-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--aw-sage-2);
  flex: 0 0 auto;
}
/* Tinted status surfaces — subtle background wash + a dot in the state colour.
   color-mix keeps the tint calm (never a saturated fill). */
.ingest-chip.is-green {
  background: color-mix(in srgb, var(--aw-green) 10%, var(--aw-panel));
  border-color: color-mix(in srgb, var(--aw-green) 28%, var(--aw-line-strong));
}
.ingest-chip.is-green .ingest-dot { background: var(--aw-green); }
.ingest-chip.is-amber {
  background: color-mix(in srgb, var(--aw-amber) 12%, var(--aw-panel));
  border-color: color-mix(in srgb, var(--aw-amber) 34%, var(--aw-line-strong));
}
.ingest-chip.is-amber .ingest-dot { background: var(--aw-amber); }
.ingest-chip.is-amber .ingest-count { color: var(--aw-amber); }
.ingest-chip.is-red {
  background: color-mix(in srgb, var(--aw-danger) 9%, var(--aw-panel));
  border-color: color-mix(in srgb, var(--aw-danger) 32%, var(--aw-line-strong));
}
.ingest-chip.is-red .ingest-dot { background: var(--aw-danger); }
.ingest-chip.is-red .ingest-count { color: var(--aw-danger); }
.ingest-chip.is-manual { background: var(--aw-off-1); }
.ingest-chip.is-manual .ingest-dot { background: var(--aw-sage); }

/* Detail list revealed when a non-green chip is clicked. Oldest data first. */
.ingest-detail {
  list-style: none;
  margin: 0;
  padding: 10px 0 2px;
  border-top: 1px solid var(--aw-line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ingest-detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.ingest-detail-site { color: var(--aw-forest); font-weight: 500; min-width: 0; }
.ingest-detail-plant { color: var(--aw-sage-2); font-weight: 400; font-size: 12px; }
.ingest-detail-date {
  font-family: var(--aw-mono);
  font-size: 12px;
  color: var(--aw-sage-2);
  white-space: nowrap;
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .ingest-strip-row { align-items: flex-start; }
  .ingest-chips { width: 100%; }
  .ingest-detail-row { flex-direction: column; gap: 2px; }
}

/* ============================================================
   System Costing (modules/costing) — scoped .costing block.
   Consumes shared primitives (.aw-eyebrow/.aw-card/.aw-grid-2/
   .aw-segmented/.aw-stat-card); tokens only, lime as rule/edge
   accent only, never a fill. Any element given an explicit
   display carries a [hidden] companion.
   ============================================================ */
.costing { color: var(--aw-forest); }
.costing [hidden] { display: none !important; }
.costing .ta-r { text-align: right; }
.costing .muted { color: var(--aw-sage-2); }

.costing .panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.costing-sub { color: var(--aw-sage-2); font-size: 13px; margin: 4px 0 0; max-width: 60ch; }
.costing-body { display: block; }

/* ---- shared field (mirrors .quotex-field) ---- */
.cost-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cost-field.cost-field-full { grid-column: 1 / -1; }
.cost-field label {
  font-size: 12px; font-weight: 600; color: var(--aw-sage-2); letter-spacing: 0.01em;
}
.cost-field input,
.cost-field select {
  padding: 0 12px; height: 40px;
  border: 1px solid var(--aw-line-strong); border-radius: 10px;
  font-size: 14px; color: var(--aw-forest); background: var(--aw-panel); width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
.cost-field input:focus,
.cost-field select:focus {
  outline: none; border-color: var(--aw-green); box-shadow: 0 0 0 3px rgba(47, 122, 60, 0.12);
}

/* ---- estimate list ---- */
.cost-list-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.cost-list-actions { display: flex; gap: 8px; }
.cost-list { display: flex; flex-direction: column; }
.cost-list-headrow,
.cost-list-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) 96px 130px 110px 150px;
  gap: 12px; align-items: center; padding: 12px 14px;
}
.cost-list-headrow {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--aw-sage-2); font-family: var(--aw-mono); border-bottom: 1px solid var(--aw-line);
}
.cost-list-row {
  border: 1px solid var(--aw-line); border-radius: 12px; background: var(--aw-panel);
  margin-top: 8px; cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.cost-list-row:hover { border-color: var(--aw-line-strong); box-shadow: 0 1px 3px rgba(20,39,26,0.06); }
.cost-cell-project { font-weight: 600; color: var(--aw-forest); overflow: hidden; text-overflow: ellipsis; }
.cost-cell-updated { color: var(--aw-sage-2); font-size: 13px; }
.cost-row-actions { display: flex; gap: 10px; justify-content: flex-end; }
.cost-row-actions .text-button.danger { color: var(--aw-amber); }
.cost-status {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 9px;
  border-radius: 999px; border: 1px solid var(--aw-line-strong); color: var(--aw-sage-2);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.cost-status-sent { color: var(--aw-green); border-color: var(--aw-green); }
.cost-status-accepted { color: #fff; background: var(--aw-primary); border-color: var(--aw-forest); }
.cost-status-declined { color: var(--aw-amber); border-color: var(--aw-amber); }
.cost-empty { padding: 22px 4px; }

/* ---- editor ---- */
.cost-editor { display: flex; flex-direction: column; gap: 20px; padding-bottom: 90px; }
.cost-editor-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cost-save-indicator { font-size: 12px; color: var(--aw-sage-2); font-family: var(--aw-mono); }
.cost-save-indicator.is-error { color: var(--aw-amber); }
.cost-header-card { gap: 14px; }

.cost-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}

.cost-sections { display: flex; flex-direction: column; gap: 26px; }
.cost-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.cost-count {
  display: inline-block; min-width: 18px; padding: 0 6px; margin-left: 4px;
  font-size: 11px; font-weight: 700; text-align: center; border-radius: 999px;
  background: var(--aw-off-2); color: var(--aw-sage-2);
}
.cost-subtotal { font-weight: 700; color: var(--aw-forest); font-size: 14px; }

/* type-ahead search + results */
.cost-search { position: relative; }
.cost-search input {
  width: 100%; height: 40px; padding: 0 12px;
  border: 1px solid var(--aw-line-strong); border-radius: 10px;
  font-size: 14px; color: var(--aw-forest); background: var(--aw-panel);
}
.cost-search input:focus { outline: none; border-color: var(--aw-green); box-shadow: 0 0 0 3px rgba(47,122,60,0.12); }
.cost-results {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--aw-panel); border: 1px solid var(--aw-line-strong); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(20,39,26,0.12); overflow: hidden; max-height: 320px; overflow-y: auto;
}
.cost-result {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  padding: 9px 13px; border: 0; background: transparent; text-align: left; cursor: pointer;
  border-bottom: 1px solid var(--aw-line);
}
.cost-result:last-child { border-bottom: 0; }
.cost-result:hover { background: var(--aw-off-3); }
.cost-result-name { font-size: 14px; font-weight: 600; color: var(--aw-forest); }
.cost-result-meta { font-size: 12px; color: var(--aw-sage-2); }
.cost-result-empty { padding: 12px 13px; color: var(--aw-sage-2); font-size: 13px; }

/* line table */
.cost-table-wrap { overflow-x: auto; }
.cost-lines { width: 100%; border-collapse: collapse; font-size: 14px; }
.cost-lines thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--aw-sage-2); font-family: var(--aw-mono); font-weight: 500;
  text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--aw-line); white-space: nowrap;
}
.cost-lines thead th.ta-r { text-align: right; }
.cost-lines tbody td { padding: 8px 10px; border-bottom: 1px solid var(--aw-line); vertical-align: middle; }
.cost-lines .cl-name-main { display: block; font-weight: 600; color: var(--aw-forest); }
.cost-lines .cl-sub { display: block; font-size: 12px; color: var(--aw-sage-2); margin-top: 1px; }
.cost-lines .cl-qty input,
.cost-lines .cl-unit input {
  width: 84px; height: 34px; padding: 0 8px; text-align: right;
  border: 1px solid var(--aw-line-strong); border-radius: 8px; font-size: 14px; color: var(--aw-forest); background: var(--aw-panel);
}
.cost-lines .cl-qty input { width: 70px; }
.cost-lines .cl-qty input:focus,
.cost-lines .cl-unit input:focus { outline: none; border-color: var(--aw-green); box-shadow: 0 0 0 3px rgba(47,122,60,0.12); }
.cost-lines .cl-total { font-weight: 600; white-space: nowrap; }
.cost-margin-chip {
  display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--aw-line-strong); color: var(--aw-sage-2); white-space: nowrap;
}
.cost-margin-chip.is-override { border-color: var(--aw-amber); color: var(--aw-amber); }
.cost-lines tr.cl-derived td { background: var(--aw-off-3); color: var(--aw-sage-2); }
.cost-lines tr.cl-derived .cl-name-main { color: var(--aw-sage-3); font-weight: 600; }
.cost-stale {
  display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--aw-amber); color: var(--aw-amber); margin-left: 6px; white-space: nowrap;
}
.cost-del {
  width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--aw-line-strong);
  background: var(--aw-panel); color: var(--aw-sage-2); font-size: 16px; line-height: 1; cursor: pointer;
}
.cost-del:hover { border-color: var(--aw-amber); color: var(--aw-amber); }

/* internal columns hidden unless the toggle is on */
.cost-editor .cost-internal { display: none; }
.cost-editor.show-internal .cost-internal { display: table-cell; }
.cost-editor.show-internal .cost-total-line.cost-internal { display: flex; }

/* sticky totals bar */
.cost-totals-bar {
  position: sticky; bottom: 0; z-index: 10;
  background: var(--aw-panel); border: 1px solid var(--aw-line-strong); border-radius: 14px;
  box-shadow: 0 -2px 14px rgba(20,39,26,0.06); padding: 14px 18px;
}
.cost-totals-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.cost-internal-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--aw-sage-2); cursor: pointer; }
.cost-internal-toggle input { width: 16px; height: 16px; accent-color: var(--aw-forest); }
.cost-total-lines { display: flex; flex-direction: column; gap: 3px; min-width: 260px; }
.cost-total-line { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; font-size: 14px; color: var(--aw-sage-3); }
.cost-total-line span:last-child { font-variant-numeric: tabular-nums; }
.cost-total-line.cost-discount { color: var(--aw-amber); }
.cost-total-grand { font-size: 17px; font-weight: 700; color: var(--aw-forest); border-top: 1px solid var(--aw-line); padding-top: 6px; margin-top: 3px; }
.cost-total-line.cost-internal { color: var(--aw-sage-2); font-size: 13px; }

.cost-tools { }
.cost-tools-body { padding: 0 18px 16px; }

/* distance field: input + Recalc side by side, status note below */
.cost-distance-row { display: flex; align-items: center; gap: 10px; }
.cost-distance-row input { flex: 1 1 auto; min-width: 0; }
.cost-distance-note { font-size: 12px; color: var(--aw-sage-2); min-height: 15px; }
.cost-distance-note.error { color: var(--aw-amber); }

/* travel breakdown card */
.cost-travel-card { gap: 12px; }
.cost-travel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cost-travel-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cost-travel-cell span {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--aw-sage-2);
}
.cost-travel-cell strong { font-size: 17px; font-weight: 700; color: var(--aw-forest); line-height: 1.2; }
.cost-travel-cell em { font-style: normal; font-size: 12px; color: var(--aw-sage-2); }

/* delivery derived row: override input + amber flag (edge accent, never a fill) */
.cost-lines tr.cl-delivery .cl-unit input {
  width: 110px; height: 34px; padding: 0 8px; text-align: right;
  border: 1px solid var(--aw-line-strong); border-radius: 8px; font-size: 14px;
  color: var(--aw-forest); background: var(--aw-panel);
}
.cost-lines tr.cl-delivery.is-flagged td:first-child { box-shadow: inset 3px 0 0 var(--aw-amber); }
.cost-lines tr.cl-delivery.is-flagged .cl-sub { color: var(--aw-amber); }
.cost-lines tr.cl-delivery .cl-unit input:focus {
  outline: none; border-color: var(--aw-green); box-shadow: 0 0 0 3px rgba(47,122,60,0.12);
}

/* ---- catalogue admin ---- */
.cost-cat-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.cost-cat-toolbar select,
.cost-cat-toolbar input {
  height: 40px; padding: 0 12px; border: 1px solid var(--aw-line-strong); border-radius: 10px;
  font-size: 14px; color: var(--aw-forest); background: var(--aw-panel);
}
.cost-cat-toolbar input[type="search"] { flex: 1 1 220px; min-width: 180px; }
.cost-cat-toolbar select:focus,
.cost-cat-toolbar input:focus { outline: none; border-color: var(--aw-green); box-shadow: 0 0 0 3px rgba(47,122,60,0.12); }
.cost-cat-addform { border: 1px solid var(--aw-line); border-radius: 14px; background: var(--aw-off-3); padding: 16px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 14px; }
.cost-addform-actions { display: flex; align-items: center; gap: 12px; }
.cost-cat-tablewrap { overflow-x: auto; }
.cost-cat-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cost-cat-table thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--aw-sage-2);
  font-family: var(--aw-mono); font-weight: 500; text-align: left; padding: 8px 10px;
  border-bottom: 1px solid var(--aw-line); white-space: nowrap;
}
.cost-cat-table thead th.ta-r { text-align: right; }
.cost-cat-table tbody td { padding: 7px 10px; border-bottom: 1px solid var(--aw-line); vertical-align: middle; }
.cost-cat-table .cc-name .cl-name-main { font-weight: 600; color: var(--aw-forest); }
.cost-cat-table .cc-name .cl-sub { display: block; font-size: 12px; color: var(--aw-sage-2); }
.cost-cat-table .cc-input {
  width: 96px; height: 34px; padding: 0 8px; text-align: right;
  border: 1px solid var(--aw-line-strong); border-radius: 8px; font-size: 14px; color: var(--aw-forest); background: var(--aw-panel);
}
.cost-cat-table .cc-input:focus { outline: none; border-color: var(--aw-green); box-shadow: 0 0 0 3px rgba(47,122,60,0.12); }
.cost-cat-table .cc-sell { font-weight: 600; white-space: nowrap; }

@media (max-width: 760px) {
  .cost-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cost-travel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cost-list-headrow { display: none; }
  .cost-list-row { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; row-gap: 4px; }
  .cost-cell-updated, .cost-row-actions { grid-column: span 1; }
}

/* ---- proposal PDF / sending (Phase 2) ---- */
.cost-actions-card { display: flex; flex-direction: column; gap: 14px; }
.cost-actions-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cost-sent-badge {
  font-family: var(--aw-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--aw-green);
  border: 1px solid var(--aw-line-strong); border-radius: 999px; padding: 3px 10px;
}
.cost-actions-controls { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cost-cover-field { display: flex; flex-direction: column; gap: 6px; }
.cost-cover-field label { font-size: 12px; font-weight: 600; color: var(--aw-sage-2); }
.cost-actions-buttons { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* internal-copy download is gated behind the internal-view toggle being on */
.cost-editor .cost-internal-btn { display: none; }
.cost-editor.show-internal .cost-internal-btn { display: inline-flex; }

/* Phase 5 — client-PDF disclosure controls (own full-width block in the actions card) */
.cost-display-controls { flex: 1 1 100%; display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--aw-line); }
.cost-display-controls:empty { display: none; }
.cost-display-eyebrow { margin: 0; }
.cost-display-summary,
.cost-display-global { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--aw-sage-1); }
.cost-display-summary { font-weight: 600; }
.cost-display-summary input,
.cost-display-global input,
.cost-display-detail input { accent-color: var(--aw-forest); }
.cost-display-body { display: flex; flex-direction: column; gap: 10px; }
.cost-display-body.is-disabled { opacity: 0.45; pointer-events: none; }
.cost-display-hint { margin: 0; font-size: 12px; }
.cost-display-list { display: flex; flex-direction: column; gap: 6px; }
.cost-display-row { display: flex; align-items: center; gap: 10px; }
.cost-display-detail { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--aw-sage-2); white-space: nowrap; min-width: 62px; }
.cost-display-label { flex: 1 1 auto; min-width: 0; padding: 6px 9px; border: 1px solid var(--aw-line-strong); border-radius: 8px; font-size: 13px; background: var(--aw-off-1); color: var(--aw-text); }
.cost-display-label:focus { outline: none; border-color: var(--aw-forest); }
.cost-display-defaults { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cost-send-panel {
  border: 1px solid var(--aw-line); border-radius: 12px; background: var(--aw-off-3); padding: 14px;
}
.cost-send-inner { display: flex; flex-direction: column; gap: 10px; }
.cost-send-note, .cost-send-preview { font-size: 12px; color: var(--aw-sage-2); margin: 0; }
.cost-send-preview { font-family: var(--aw-mono); color: var(--aw-forest); }
.cost-send-actions { display: flex; gap: 8px; margin-top: 2px; }
.cost-actions-card .form-message { margin: 0; font-size: 13px; }
.cost-actions-card .form-message.error { color: var(--aw-amber); }

/* ---- lead / subscriber linkage (Phase 2B) ---- */
/* Link chip in the estimate header: shows the linked lead/client + unlink/change. */
.cost-link-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; min-height: 22px; }
.cost-link-add { font-size: 13px; }
.cost-link-chip {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--aw-line-strong); border-radius: 999px; background: var(--aw-off-2);
  padding: 2px 4px 2px 2px;
}
.cost-link-goto {
  display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; cursor: pointer;
  font-size: 13px; color: var(--aw-forest); padding: 3px 8px; border-radius: 999px;
}
.cost-link-goto:hover { background: var(--aw-off-3); }
.cost-link-label {
  font-family: var(--aw-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--aw-green);
}
.cost-link-chip.cost-link-lead .cost-link-label { color: var(--aw-amber); }
.cost-link-x {
  border: 0; background: transparent; cursor: pointer; color: var(--aw-sage-2);
  font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 999px;
}
.cost-link-x:hover { color: var(--aw-amber); background: var(--aw-off-3); }
.cost-link-change { font-size: 12px; }

/* Inline link picker (lead / subscriber tabs + search + rows). */
.cost-link-picker { margin: 0 0 12px; }
.cost-link-picker[hidden] { display: none !important; }
.cost-linkpick {
  border: 1px solid var(--aw-line); border-radius: 12px; background: var(--aw-off-3); padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.cost-linkpick-tabs { align-self: flex-start; }
.cost-linkpick-search {
  height: 36px; padding: 0 10px; border: 1px solid var(--aw-line-strong); border-radius: 8px;
  font-size: 14px; color: var(--aw-forest); background: var(--aw-panel);
}
.cost-linkpick-search:focus { outline: none; border-color: var(--aw-green); box-shadow: 0 0 0 3px rgba(47,122,60,0.12); }
.cost-linkpick-rows { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; border: 1px solid var(--aw-line); border-radius: 8px; background: var(--aw-panel); }
.cost-linkpick-row {
  display: flex; flex-direction: column; gap: 1px; text-align: left; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--aw-line); background: transparent; padding: 8px 12px;
}
.cost-linkpick-row:last-child { border-bottom: 0; }
.cost-linkpick-row:hover { background: var(--aw-off-2); }
.cost-linkpick-name { font-weight: 600; color: var(--aw-forest); font-size: 13px; }
.cost-linkpick-meta { font-size: 12px; color: var(--aw-sage-2); }

/* Convert CTA (shown while the estimate is Accepted). */
.cost-convert-row:empty { display: none; }
.cost-convert-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  border: 1px solid var(--aw-line-strong); border-left: 3px solid var(--aw-lime); border-radius: 12px;
  background: var(--aw-off-2); padding: 12px 14px; margin: 0 0 6px;
}
.cost-convert-note { font-size: 13px; color: var(--aw-forest); max-width: 62ch; }

/* Convert dialog (modal overlay). */
.cost-modal-overlay {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  background: rgba(20,39,26,0.42); padding: 20px;
}
.cost-modal {
  width: min(560px, 100%); max-height: calc(100vh - 40px); overflow-y: auto;
  background: var(--aw-panel); border-radius: 16px; border: 1px solid var(--aw-line-strong);
  box-shadow: 0 24px 60px rgba(20,39,26,0.28); display: flex; flex-direction: column;
}
.cost-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--aw-line);
}
.cost-modal-head h3 { margin: 0; font-size: 17px; color: var(--aw-forest); }
.cost-modal-x { border: 0; background: transparent; cursor: pointer; font-size: 22px; line-height: 1; color: var(--aw-sage-2); padding: 2px 8px; border-radius: 8px; }
.cost-modal-x:hover { color: var(--aw-forest); background: var(--aw-off-2); }
.cost-modal-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.cost-modal-note { margin: 0; font-size: 13px; color: var(--aw-sage-2); line-height: 1.5; }
.cost-modal-grid { gap: 12px; }
.cost-modal-extras { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--aw-line); padding-top: 14px; }
.cost-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--aw-forest); cursor: pointer; }
.cost-check input { margin-top: 2px; }
.cost-check em { color: var(--aw-sage-2); font-style: normal; }
.cost-modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 14px 18px; border-top: 1px solid var(--aw-line);
}
.cost-modal .form-message { margin: 0; font-size: 13px; }
.cost-modal .form-message.error { color: var(--aw-amber); }

/* Cost-estimate rows on the register subscriber detail (Quotes & documents). */
.docs-section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cost-estimates-block { margin-bottom: 14px; }
.cost-estimates-subhead {
  font-family: var(--aw-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--aw-green); margin: 0 0 8px;
}
.cost-estimates-rows { display: flex; flex-direction: column; gap: 6px; }
.cost-estimate-row {
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  border: 1px solid var(--aw-line); border-radius: 10px; background: var(--aw-off-2); padding: 8px 12px;
}
.cost-estimate-row:hover { border-color: var(--aw-line-strong); background: var(--aw-off-3); }
.cost-estimate-main { font-weight: 600; color: var(--aw-forest); font-size: 14px; }
.cost-estimate-meta { font-size: 12px; color: var(--aw-sage-2); }

@media (max-width: 620px) {
  .cost-convert-cta { flex-direction: column; align-items: flex-start; }
}

/* Cost-estimate rows on the lead detail (Leads module — its own styles are
   injected in JS; these linkage additions live here under the styles.css lock). */
.leads-estimates { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.leads-estimates-rows { display: flex; flex-direction: column; gap: 6px; }
.leads-estimate-row {
  display: flex; flex-direction: column; gap: 2px; text-align: left; cursor: pointer;
  border: 1px solid var(--aw-line); border-radius: 10px; background: var(--aw-off-2); padding: 8px 12px;
}
.leads-estimate-row:hover { border-color: var(--aw-line-strong); background: var(--aw-off-3); }
.leads-estimate-main { font-weight: 600; color: var(--aw-forest); font-size: 14px; }
.leads-estimate-meta { font-size: 12px; color: var(--aw-sage-2); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.leads-estimate-status {
  font-family: var(--aw-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--aw-green);
}
.leads-estimate-status.is-accepted { color: var(--aw-green); }
.leads-estimate-status.is-declined { color: var(--aw-amber); }

/* ---- price import + staleness ops (Phase 3) ---- */

/* Editor footer stale-lines note (amber edge, never a green/amber fill). */
.cost-stale-note {
  width: 100%; margin: 0 0 4px; font-size: 12.5px; color: var(--aw-sage-1);
  border-left: 3px solid var(--aw-amber); background: var(--aw-off-3);
  padding: 6px 10px; border-radius: 0 8px 8px 0;
}

/* Catalogue health strip: per-supplier freshness chips. */
.cost-health { margin: 0 0 14px; }
.cost-health-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cost-health-chip {
  display: inline-flex; flex-direction: column; gap: 1px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--aw-line-strong); border-radius: 10px; background: var(--aw-off-2);
  padding: 5px 11px; text-align: left;
}
.cost-health-chip:hover { border-color: var(--aw-green); background: var(--aw-off-3); }
.cost-health-chip.is-stale { border-left: 3px solid var(--aw-amber); }
.cost-health-chip.is-active { border-color: var(--aw-forest); box-shadow: 0 0 0 2px rgba(20,39,26,0.12); }
.cost-health-name { font-weight: 600; font-size: 13px; color: var(--aw-forest); }
.cost-health-meta { font-family: var(--aw-mono); font-size: 10.5px; color: var(--aw-sage-2); letter-spacing: 0.02em; }

.cost-cat-staletoggle {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--aw-sage-1);
  white-space: nowrap;
}
.cost-cat-staletoggle input { accent-color: var(--aw-forest); }

/* Catalogue "Client view" toggle + its nested "Show supplier" sub-toggle (only
   visible when Client view is on — see the [hidden] companion below). */
.cost-cat-clientview {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--aw-sage-2);
  white-space: nowrap;
}
.cost-cat-clientview input { accent-color: var(--aw-forest); }
.cost-cat-clientview-nested {
  padding-left: 10px; border-left: 1px solid var(--aw-line-strong);
}
/* Explicit display above would otherwise override the UA [hidden] rule — same
   gotcha as .nav-item[hidden] / .back-home[hidden] elsewhere in this file. */
.cost-cat-clientview-nested[hidden] { display: none !important; }

/* Calm, unmissable banner shown while Client view is on — forest-authored text,
   a single lime edge (never a fill) to mark the mode change. */
.cost-clientview-banner {
  display: flex; align-items: center;
  margin: 0 0 14px; padding: 9px 14px;
  border: 1px solid var(--aw-line-strong);
  border-left: 3px solid var(--aw-lime);
  border-radius: 10px;
  background: color-mix(in srgb, var(--aw-forest) 6%, var(--aw-panel));
  color: var(--aw-forest);
  font-size: 13px;
  font-weight: 500;
}

/* Import stepper (Source → Map → Review). */
.cost-import { display: flex; flex-direction: column; gap: 0; }
.cost-imp-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 1px solid var(--aw-line);
}
.cost-imp-steps { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; }
.cost-imp-step {
  font-family: var(--aw-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--aw-sage-2);
}
.cost-imp-step.is-active { color: var(--aw-forest); }
.cost-imp-step.is-done { color: var(--aw-green); }
.cost-imp-arrow { color: var(--aw-sage-3); font-size: 12px; }
.cost-imp-body { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; }
.cost-imp-modes { align-self: flex-start; }
.cost-imp-textarea {
  width: 100%; min-height: 220px; resize: vertical; font-family: var(--aw-mono); font-size: 13px;
  line-height: 1.5; padding: 12px; border: 1px solid var(--aw-line-strong); border-radius: 10px;
  color: var(--aw-forest); background: var(--aw-panel); white-space: pre;
}
.cost-imp-textarea:focus { outline: none; border-color: var(--aw-green); box-shadow: 0 0 0 3px rgba(47,122,60,0.12); }
.cost-imp-drop {
  border: 1px dashed var(--aw-line-strong); border-radius: 12px; background: var(--aw-off-2);
  padding: 20px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
.cost-imp-filename { margin: 0; font-size: 13px; color: var(--aw-sage-1); }
.cost-imp-sheet { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.cost-imp-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.cost-imp-hint, .cost-imp-maphint { font-size: 12.5px; color: var(--aw-sage-2); margin: 0; max-width: 620px; }
.cost-imp-body .form-message { margin: 0; font-size: 13px; }
.cost-imp-body .form-message.error { color: var(--aw-amber); }

.cost-imp-maptop { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.cost-imp-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--aw-sage-1); }
.cost-imp-check input { accent-color: var(--aw-forest); }
.cost-imp-previewwrap, .cost-imp-reviewwrap, .cost-imp-reviewwrap { overflow-x: auto; border: 1px solid var(--aw-line); border-radius: 10px; }
.cost-imp-preview, .cost-imp-review { width: 100%; border-collapse: collapse; font-size: 13px; }
.cost-imp-preview th { padding: 6px 8px; border-bottom: 1px solid var(--aw-line); background: var(--aw-off-2); }
.cost-imp-preview td { padding: 6px 8px; border-bottom: 1px solid var(--aw-line); color: var(--aw-sage-1); white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.cost-imp-preview tr.cost-imp-headrow td { font-weight: 600; color: var(--aw-forest); background: var(--aw-off-3); }
.cost-imp-rolesel { width: 100%; font-family: var(--aw-mono); font-size: 12px; }
.cost-imp-preview td.ci-role-name { color: var(--aw-forest); font-weight: 600; }
.cost-imp-preview td.ci-role-cost, .cost-imp-preview td.ci-role-margin { color: var(--aw-green); }
.cost-imp-preview td.ci-role-code { font-family: var(--aw-mono); }

/* Review table. */
.cost-imp-reviewbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cost-imp-tally { display: flex; gap: 6px; flex-wrap: wrap; }
.cost-imp-pill {
  font-family: var(--aw-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  border: 1px solid var(--aw-line-strong); border-radius: 999px; padding: 3px 10px; color: var(--aw-sage-1);
}
.cost-imp-pill.is-ok { border-color: var(--aw-green); color: var(--aw-green); }
.cost-imp-pill.is-new { border-color: var(--aw-forest); color: var(--aw-forest); }
.cost-imp-pill.is-warn { border-left: 3px solid var(--aw-amber); color: var(--aw-amber); }
.cost-imp-pill.is-muted { color: var(--aw-sage-2); }
.cost-imp-bulk { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--aw-sage-2); }
.cost-imp-bulk .text-button { font-size: 12.5px; }
.cost-imp-review th { padding: 7px 9px; border-bottom: 1px solid var(--aw-line); background: var(--aw-off-2); text-align: left; white-space: nowrap; font-size: 12px; color: var(--aw-sage-1); }
.cost-imp-review th.ta-r { text-align: right; }
.cost-imp-review td { padding: 7px 9px; border-bottom: 1px solid var(--aw-line); vertical-align: top; }
.cost-imp-review td.ta-r { text-align: right; white-space: nowrap; }
.cost-imp-review .ci-chk { width: 30px; text-align: center; }
.cost-imp-review .ci-chk input { accent-color: var(--aw-forest); }
.ci-imported { display: block; font-weight: 600; color: var(--aw-forest); }
.ci-imported .ci-sku, .ci-item .ci-sku { font-family: var(--aw-mono); font-weight: 400; font-size: 11px; color: var(--aw-sage-2); }
.ci-matched, .ci-ambig, .ci-unmatched { display: block; font-size: 12px; color: var(--aw-sage-2); margin-top: 2px; }
.ci-via { font-family: var(--aw-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--aw-sage-2); border: 1px solid var(--aw-line); border-radius: 4px; padding: 0 4px; }
.ci-via-sku { color: var(--aw-green); border-color: var(--aw-green); }
.ci-via-fuzzy { color: var(--aw-amber); border-color: var(--aw-amber); }
.ci-repick { font-size: 11px; }
.ci-delta-up { color: var(--aw-amber); }
.ci-delta-down { color: var(--aw-green); }
.cost-imp-r-ambiguous { background: rgba(224,144,42,0.05); }
.ci-warn-dot { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--aw-amber); color: #fff; font-weight: 700; font-size: 12px; }
.ci-new-dot { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--aw-primary); color: #fff; font-weight: 700; font-size: 13px; }
.ci-pick, .ci-action, .ci-cat, .ci-linksearch { font-size: 12.5px; margin-left: 4px; max-width: 340px; }
.ci-createcfg, .ci-linkbox { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ci-warn-inline { color: var(--aw-amber); font-size: 11px; }
.ci-linkresults { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.ci-linkopt { border: 1px solid var(--aw-line-strong); border-radius: 6px; background: var(--aw-off-2); font-size: 12px; padding: 2px 7px; cursor: pointer; color: var(--aw-forest); }
.ci-linkopt:hover { border-color: var(--aw-green); }
.ci-linknone { font-size: 11px; color: var(--aw-sage-2); }

@media (max-width: 760px) {
  .cost-imp-maptop { gap: 10px; }
  .cost-imp-reviewbar { align-items: flex-start; flex-direction: column; }
}

/* ---- performance & payback panel (Phase 4) ---- */
.cost-perf-card { display: flex; flex-direction: column; gap: 14px; }
.cost-perf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cost-perf-tag {
  font-family: var(--aw-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--aw-green); border: 1px solid var(--aw-line-strong); border-radius: 999px; padding: 1px 8px; margin-left: 6px;
}
.cost-perf-kwp { font-family: var(--aw-mono); font-size: 12px; color: var(--aw-sage-2); white-space: nowrap; }
.cost-perf-intro { font-size: 12.5px; color: var(--aw-sage-1); margin: 0; max-width: 74ch; }
.cost-perf-tariff-meta { margin: 4px 0 0; font-size: 11.5px; }
.cost-perf-inputs { align-items: end; }
.cost-perf-loc { display: flex; flex-direction: column; gap: 8px; }
.cost-perf-locrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cost-perf-locnote { font-size: 12.5px; color: var(--aw-sage-1); }
.cost-perf-custom summary { font-size: 13px; }
.cost-perf-custom-body { display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.cost-perf-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--aw-sage-1); }
.cost-perf-check input { accent-color: var(--aw-forest); }

/* energy assumptions block (Phase 4d) */
.cost-perf-energy { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--aw-line); }
.cost-perf-sc-row { display: flex; align-items: center; gap: 8px; }
.cost-perf-sc-row input { flex: 1 1 auto; min-width: 0; }
.cost-perf-sc-row .secondary-button { flex: 0 0 auto; }
.cost-perf-hint { margin: 4px 0 0; font-size: 11.5px; color: var(--aw-sage-2); }
.cost-perf-sc-note { color: var(--aw-green); font-weight: 600; }
.cost-perf-export-body { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.cost-perf-export-body[hidden] { display: none !important; }
.cost-perf-feedin { margin: 0; font-size: 11.5px; color: var(--aw-sage-2); }
.cost-perf-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cost-perf-actions .form-message { margin: 0; font-size: 12.5px; color: var(--aw-sage-2); }
.cost-perf-actions .form-message.error { color: var(--aw-amber); }

/* results */
.cost-perf-results:empty { display: none; }
.cost-perf-results { display: flex; flex-direction: column; gap: 16px; margin-top: 2px; }
.cost-perf-chartwrap {
  border: 1px solid var(--aw-line); border-radius: 12px; background: var(--aw-off-2); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.cost-perf-charthead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cost-perf-chart-title { font-weight: 600; color: var(--aw-forest); font-size: 13.5px; }
.cost-perf-chart-sub { font-family: var(--aw-mono); font-size: 11px; color: var(--aw-sage-2); }
.cost-perf-chart { width: 100%; height: auto; max-width: 560px; align-self: center; }
.cost-perf-chart-lbl { font-family: var(--aw-mono); font-size: 9px; fill: var(--aw-sage-2); }
.cost-perf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; }
.cost-perf-assump { font-size: 12px; color: var(--aw-sage-2); margin: 0; }
.cost-perf-opt { color: var(--aw-green); font-weight: 600; }
.cost-perf-note {
  font-size: 12px; color: var(--aw-sage-1); margin: 0;
  border-left: 3px solid var(--aw-lime); background: var(--aw-off-3); padding: 6px 10px; border-radius: 0 8px 8px 0;
}
.cost-perf-pdf-toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--aw-sage-1); }
.cost-perf-pdf-toggle input { accent-color: var(--aw-forest); }

/* PV layout (multi-orientation, Phase 4c) */
.cost-pvlayout { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--aw-line); border-radius: 12px; background: var(--aw-off-2); padding: 12px 14px; }
.cost-pvlayout-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cost-pvlayout-title { font-weight: 600; color: var(--aw-forest); font-size: 13.5px; }
.cost-pvlayout-meta { font-family: var(--aw-mono); font-size: 11px; color: var(--aw-sage-2); }
.cost-pvlayout-single { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--aw-sage-1); flex-wrap: wrap; }
.cost-pvl-rows { display: flex; flex-direction: column; gap: 6px; }
.cost-pvl-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cost-pvl-panels { width: 64px; }
.cost-pvl-x { color: var(--aw-sage-2); font-size: 12px; }
.cost-pvl-row select { width: auto; min-width: 120px; }
.cost-pvl-tiltdeg { width: 64px; }
.cost-pvlayout-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cost-pvl-validate { font-size: 12.5px; color: var(--aw-sage-1); }
.cost-pvl-validate.is-amber { color: var(--aw-amber); font-weight: 600; }

/* detailed workings (collapsible, default closed — shares .aw-details) */
.cost-perf-workings > summary { font-size: 13.5px; }
.cost-workings-caveat {
  margin: 0; font-size: 12px; color: var(--aw-amber);
  border-left: 3px solid var(--aw-amber); background: var(--aw-off-3); padding: 6px 10px; border-radius: 0 8px 8px 0;
}
.cost-workings-dl { display: flex; flex-direction: column; gap: 4px; }
.cost-workings-row { display: flex; gap: 12px; font-size: 12.5px; line-height: 1.5; }
.cost-workings-k { flex: 0 0 110px; font-family: var(--aw-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--aw-sage-2); padding-top: 1px; }
.cost-workings-v { color: var(--aw-sage-1); min-width: 0; }
.cost-workings-derivation { margin: 0; font-size: 12.5px; color: var(--aw-sage-1); line-height: 1.6; max-width: 84ch; }
.cost-workings-tablewrap { overflow-x: auto; }
.cost-workings-table { border-collapse: collapse; width: 100%; font-size: 12px; min-width: 640px; }
.cost-workings-table th {
  text-align: right; font-family: var(--aw-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--aw-sage-2); font-weight: 500; padding: 4px 8px; border-bottom: 1px solid var(--aw-line-strong);
}
.cost-workings-table th:first-child { text-align: left; }
.cost-workings-table td { text-align: right; padding: 3px 8px; border-bottom: 1px solid var(--aw-line); color: var(--aw-sage-1); font-variant-numeric: tabular-nums; }
.cost-workings-table td:first-child { text-align: left; color: var(--aw-forest); }
.cost-workings-table tr.is-winter td { background: var(--aw-off-3); }
.cost-workings-table tr.is-avg td { font-weight: 600; color: var(--aw-forest); border-top: 1px solid var(--aw-line-strong); }
.cost-workings-footnote { margin: 4px 0 0; font-size: 11.5px; color: var(--aw-sage-2); }

/* ---- tariff admin (catalogue tab) ---- */
.cost-tariffs { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.cost-tariffs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cost-tariffs-note { font-size: 12.5px; color: var(--aw-sage-2); margin: 0; max-width: 74ch; }
.cost-tariffs-list { display: flex; flex-direction: column; gap: 8px; }
.cost-tariff-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--aw-line); border-radius: 10px; background: var(--aw-off-2); padding: 8px 12px;
}
.cost-tariff-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 240px; min-width: 0; }
.cost-tariff-name { font-weight: 600; color: var(--aw-forest); font-size: 14px; }
.cost-tariff-sum { font-family: var(--aw-mono); font-size: 11px; color: var(--aw-sage-2); }
.cost-tariff-esc { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--aw-sage-1); white-space: nowrap; }
.cost-tariff-esc input { width: 74px; }
.cost-tariff-addform { display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--aw-line); border-radius: 12px; padding: 14px; background: var(--aw-off-2); }
.cost-tf-blocks { display: flex; flex-direction: column; gap: 8px; }
.cost-tf-block { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cost-tf-block input { width: 120px; }
.cost-tf-at { font-size: 12.5px; color: var(--aw-sage-2); }
.cost-tf-flatrow { max-width: 240px; }
.cost-tariffs-pointer { margin-top: 18px; font-size: 12.5px; color: var(--aw-sage-2); }
.cost-tariffs-pointer .text-button { font-size: inherit; }

/* ---- settings tab (Phase 4d) ---- */
.cost-settings { display: flex; flex-direction: column; gap: 18px; }
.cost-settings-card { display: flex; flex-direction: column; gap: 12px; }
.cost-settings-card .cost-tariffs { margin-top: 0; }
.cost-settings-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cost-settings-updated { font-size: 11.5px; }
.cost-settings-note { margin: 0; font-size: 12.5px; color: var(--aw-sage-1); max-width: 74ch; }
.cost-settings-grouplabel { margin: 8px 0 2px; }
.cost-setting-hint { font-size: 11px; color: var(--aw-sage-2); margin-top: 2px; }
.cost-settings-exporttoggle { margin-top: 4px; }
.cost-settings-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.cost-settings-actions .form-message { margin: 0; font-size: 12.5px; color: var(--aw-sage-2); }
.cost-settings-actions .form-message.error { color: var(--aw-amber); }

/* ---- how-to guide (shared .aw-details, default collapsed) ---- */
.cost-guide { margin-top: 20px; }
.cost-guide > summary { font-size: 13.5px; }
.cost-guide-body { display: flex; flex-direction: column; gap: 16px; }
.cost-guide-block { display: flex; flex-direction: column; gap: 6px; }
.cost-guide-block p { margin: 0; font-size: 13px; color: var(--aw-sage-1); line-height: 1.6; max-width: 84ch; }
.cost-guide-steps, .cost-guide-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.cost-guide-steps li, .cost-guide-list li { font-size: 13px; color: var(--aw-sage-1); line-height: 1.55; max-width: 84ch; }
.cost-guide-steps strong, .cost-guide-list strong { color: var(--aw-forest); }
.cost-guide-limits { border-left: 3px solid var(--aw-lime); background: var(--aw-off-3); padding: 10px 14px; border-radius: 0 10px 10px 0; }

@media (max-width: 760px) {
  .cost-perf-stats { grid-template-columns: repeat(2, 1fr); }
  .cost-tariff-row { align-items: flex-start; }
}

/* ---- Phase 6: editor UX (renames, custom sections, browse, margins, copy) ---- */

/* section heading: label + rename pencil + count (+ custom delete) */
.cost-section-title { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cost-section-rename,
.cost-line-rename {
  border: 0; background: transparent; cursor: pointer; padding: 2px 4px; border-radius: 6px;
  color: var(--aw-sage-2); font-size: 12px; line-height: 1; opacity: 0; transition: opacity .12s, color .12s;
}
.cost-section-head:hover .cost-section-rename,
.cost-section-rename:focus-visible,
.cl-name:hover .cost-line-rename,
.cost-line-rename:focus-visible { opacity: 1; }
.cost-section-rename:hover,
.cost-line-rename:hover { color: var(--aw-green); background: var(--aw-off-2); }
.cost-section-del {
  border: 0; background: transparent; cursor: pointer; padding: 0 4px; border-radius: 6px;
  color: var(--aw-sage-2); font-size: 15px; line-height: 1;
}
.cost-section-del:hover { color: var(--aw-amber); }
.cost-section-is-custom { border-left: 3px solid var(--aw-lime); padding-left: 12px; }

.cost-addsection { display: flex; justify-content: flex-start; }

/* search row now hosts Browse + Custom-line buttons */
.cost-search-row { display: flex; align-items: center; gap: 8px; }
.cost-search-row input[type="search"] { flex: 1 1 auto; min-width: 0; }
.cost-browse-btn, .cost-customline-btn { white-space: nowrap; flex: 0 0 auto; }
.cost-search-custom { display: flex; flex-wrap: wrap; }
.cost-search-custom .cost-customline-form { flex-basis: 100%; }

/* line name: display name + inline rename pencil */
.cl-name-line { display: inline-flex; align-items: center; gap: 4px; }
.cost-line-tag {
  display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0 5px; border-radius: 999px; border: 1px solid var(--aw-line-strong); color: var(--aw-sage-2);
}
.cost-line-savecat { font-size: 11px; }

/* editable margin % */
.cost-margin-edit {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px 6px; border-radius: 999px;
  border: 1px solid var(--aw-line-strong); white-space: nowrap;
}
.cost-margin-edit.is-override { border-color: var(--aw-amber); }
.cost-margin-input {
  width: 42px; border: 0; background: transparent; text-align: right; font-size: 12px; font-weight: 600;
  color: var(--aw-sage-2); padding: 0; -moz-appearance: textfield;
}
.cost-margin-input:focus { outline: none; color: var(--aw-forest); }
.cost-margin-edit.is-override .cost-margin-input,
.cost-margin-edit.is-override .cost-margin-pct { color: var(--aw-amber); }
.cost-margin-pct { font-size: 11px; font-weight: 600; color: var(--aw-sage-2); }

/* Browse the section catalogue */
.cost-browse {
  margin-top: 8px; border: 1px solid var(--aw-line-strong); border-radius: 12px; background: var(--aw-panel);
  box-shadow: 0 8px 24px rgba(20,39,26,0.10); overflow: hidden;
}
.cost-browse-inner { display: flex; flex-direction: column; }
.cost-browse-filter {
  height: 38px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--aw-line);
  font-size: 14px; color: var(--aw-forest); background: var(--aw-off-3);
}
.cost-browse-filter:focus { outline: none; box-shadow: inset 0 -2px 0 var(--aw-green); }
.cost-browse-list { max-height: 320px; overflow-y: auto; }
.cost-browse-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%;
  padding: 8px 13px; border: 0; background: transparent; text-align: left; cursor: pointer;
  border-bottom: 1px solid var(--aw-line);
}
.cost-browse-row:last-child { border-bottom: 0; }
.cost-browse-row:hover { background: var(--aw-off-3); }
.cost-browse-name { font-size: 13.5px; font-weight: 600; color: var(--aw-forest); }
.cost-browse-meta { font-size: 12px; color: var(--aw-sage-2); white-space: nowrap; }
.cost-stale-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 999px; margin-left: 5px;
  background: var(--aw-green); vertical-align: middle;
}
.cost-stale-dot.is-stale { background: var(--aw-amber); }

/* custom (free-form) line form — ONE compact inline row that reads like a line
   row being born (matches the table rhythm above it). The row lives inside
   .cost-search, whose `input { width:100% }` rule would otherwise stretch every
   field full-width and wrap them into stacked rows — so every sizing rule here is
   scoped `.cost-search .cost-custom-line …` (0,2,1) to WIN that rule, instead of
   fighting each input individually. */
.cost-customline-form { margin-top: 8px; }
.cost-custom-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cost-search .cost-custom-line input {
  width: auto; flex: 0 0 auto; height: 36px; padding: 0 10px;
  border: 1px solid var(--aw-line-strong); border-radius: 8px;
  font-size: 14px; color: var(--aw-forest); background: var(--aw-panel);
}
.cost-search .cost-custom-line input:focus { outline: none; border-color: var(--aw-green); box-shadow: 0 0 0 3px rgba(47,122,60,0.12); }
.cost-search .cost-custom-line .cost-cl-name { flex: 1 1 220px; width: auto; min-width: 160px; text-align: left; }
.cost-search .cost-custom-line .cost-cl-qty { width: 70px; text-align: right; }
.cost-search .cost-custom-line .cost-cl-cost { width: 110px; text-align: right; }
.cost-cl-marginwrap { display: inline-flex; align-items: center; gap: 4px; color: var(--aw-sage-2); font-size: 13px; flex: 0 0 auto; }
.cost-search .cost-custom-line .cost-cl-margin { width: 70px; text-align: right; }
.cost-custom-line .primary-button, .cost-custom-line .text-button { flex: 0 0 auto; }

/* inline editing surfaces that replaced native prompt() dialogs (which render
   nothing in the operator's environment). Token-based → theme-aware in dark mode. */
.cost-section-label.is-editable { cursor: text; }
.cost-section-label.is-editable:hover { text-decoration: underline dotted; text-underline-offset: 3px; }
.cost-inline-rename {
  font: inherit; height: 30px; padding: 0 8px; min-width: 150px; max-width: 100%;
  border: 1px solid var(--aw-line-strong); border-radius: 6px;
  color: var(--aw-forest); background: var(--aw-panel);
}
.cost-inline-rename:focus { outline: none; border-color: var(--aw-green); box-shadow: 0 0 0 3px rgba(47,122,60,0.12); }

/* inline add/name forms (add section · save as template · new supplier) — one
   compact row mirroring the cost-custom-line rhythm, but not inside .cost-search,
   so the input needs its own sizing here. */
.cost-inline-form { margin-top: 10px; }
.cost-inline-form .cost-if-input {
  flex: 1 1 220px; min-width: 160px; width: auto; height: 36px; padding: 0 10px;
  border: 1px solid var(--aw-line-strong); border-radius: 8px;
  font-size: 14px; color: var(--aw-forest); background: var(--aw-panel);
}
.cost-inline-form .cost-if-input:focus { outline: none; border-color: var(--aw-green); box-shadow: 0 0 0 3px rgba(47,122,60,0.12); }

/* template chooser (in-DOM replacement for the numbered-list prompt) */
.cost-modal-narrow { width: min(420px, 100%); }
.cost-tpl-list { display: flex; flex-direction: column; gap: 8px; }
.cost-tpl-pick {
  display: block; width: 100%; text-align: left; padding: 11px 13px;
  border: 1px solid var(--aw-line-strong); border-radius: 10px; cursor: pointer;
  background: var(--aw-panel); color: var(--aw-forest); font-size: 14px; font-weight: 600;
  transition: border-color .12s, background .12s;
}
.cost-tpl-pick:hover { border-color: var(--aw-green); background: var(--aw-off-3); }
.cost-tpl-pick:focus-visible { outline: none; border-color: var(--aw-green); box-shadow: 0 0 0 3px rgba(47,122,60,0.12); }

/* discount to target margin (internal view only) */
.cost-editor .cost-target-wrap { display: none; }
.cost-editor.show-internal .cost-target-wrap {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-top: 1px dashed var(--aw-line-strong); margin-top: 6px; padding-top: 8px; font-size: 13px; color: var(--aw-sage-2);
}
.cost-target-cur strong { color: var(--aw-forest); }
.cost-target-field { display: inline-flex; align-items: center; gap: 6px; color: var(--aw-sage-2); }
.cost-target-inputwrap { display: inline-flex; align-items: center; gap: 3px; }
.cost-target-inputwrap input {
  width: 54px; height: 32px; padding: 0 8px; text-align: right; border: 1px solid var(--aw-line-strong);
  border-radius: 8px; font-size: 13px; color: var(--aw-forest); background: var(--aw-panel);
}
.cost-target-inputwrap input:focus { outline: none; border-color: var(--aw-green); box-shadow: 0 0 0 3px rgba(47,122,60,0.12); }
.cost-target-preview { color: var(--aw-green); font-weight: 600; }
.cost-target-warn { color: var(--aw-amber); font-weight: 600; }

/* catalogue margin-as-percent + display-controls custom label */
.cc-marginwrap { display: inline-flex; align-items: center; gap: 3px; color: var(--aw-sage-2); }
.cc-marginwrap .cc-margin { width: 56px; text-align: right; }
.cost-display-customlabel { font-size: 13px; color: var(--aw-forest); font-weight: 600; padding: 0 6px; }

/* catalogue item edit dialog (Phase 6): pencil reveals on row hover, like the
   editor's rename affordances; the dialog reuses .cost-modal + .cost-field. */
.cost-cat-table tr:hover .cc-edit,
.cc-edit:focus-visible { opacity: 1; }
.cost-itemedit-modal { max-width: 640px; }
.cost-itemedit-modal .cost-field span { font-size: 12px; font-weight: 600; color: var(--aw-sage-2); }

/* copy summary modal */
.cost-copy-modal { max-width: 560px; }
.cost-copy-text {
  width: 100%; min-height: 300px; resize: vertical; padding: 12px; border: 1px solid var(--aw-line-strong);
  border-radius: 10px; background: var(--aw-off-3); color: var(--aw-forest);
  font-family: var(--aw-mono); font-size: 12.5px; line-height: 1.5; white-space: pre;
}
.cost-copy-text:focus { outline: none; border-color: var(--aw-green); box-shadow: 0 0 0 3px rgba(47,122,60,0.12); }

@media (max-width: 640px) {
  /* narrow screens: name takes its own line, then the numerics row wraps below */
  .cost-custom-line { gap: 6px; }
  .cost-search .cost-custom-line .cost-cl-name { flex-basis: 100%; }
}

/* price history dialog (read-only) — reuses .cost-modal/.cost-modal-head/-body/-foot;
   this block only adds the bits unique to it: the wider modal, the table, the
   up/down cost-delta chips, and the "inferred supplier" marker. */
/* .cost-modal sets `width: min(560px, 100%)`, so a bare max-width here does nothing —
   the width must be overridden (same as .cost-modal-narrow does in the other direction).
   This is a 7-column data table and needs the room. */
.cost-hist-modal { width: min(1100px, 100%); }
.cost-hist-modal .cost-modal-head { align-items: flex-start; }
.cost-hist-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--aw-sage-2); }
.cost-hist-tablewrap { overflow-x: auto; }
.cost-hist-table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 13.5px; }
.cost-hist-table thead th {
  text-align: left; font-family: var(--aw-mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--aw-sage-2); padding: 0 10px 8px; border-bottom: 1px solid var(--aw-line-strong);
}
.cost-hist-table thead th.ta-r { text-align: right; }
.cost-hist-table tbody td { padding: 8px 10px; border-bottom: 1px solid var(--aw-line); vertical-align: middle; color: var(--aw-forest); }
.cost-hist-table tbody td.ta-r { text-align: right; white-space: nowrap; }
/* Column governance. The money columns are nowrap and "Changed by" holds a full email
   address, so without this the text columns get squeezed to nothing and the table
   overflows: When/Supplier scroll off the left and Source collapses to one word per
   line. When is never sacrificed; the email is allowed to wrap rather than bully the
   table; Source keeps enough room to read as a sentence. min-width on the table keeps
   the horizontal scroll as a genuinely-narrow-viewport fallback, not the default state. */
.cost-hist-table th:first-child, .cost-hist-table td:first-child { white-space: nowrap; }
.cost-hist-table th:nth-child(2), .cost-hist-table td:nth-child(2) { min-width: 120px; }
.cost-hist-table th:nth-child(6), .cost-hist-table td:nth-child(6) { min-width: 150px; max-width: 190px; overflow-wrap: break-word; }
.cost-hist-table th:last-child, .cost-hist-table td:last-child { min-width: 200px; overflow-wrap: break-word; }
.cost-hist-chip { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 6px; border-radius: 999px; margin-left: 2px; }
.cost-hist-up { color: var(--aw-amber); background: color-mix(in srgb, var(--aw-amber) 12%, transparent); }
.cost-hist-down { color: var(--aw-green); background: color-mix(in srgb, var(--aw-green) 12%, transparent); }
.cost-hist-inferred {
  display: inline-block; font-size: 10.5px; font-weight: 700; color: var(--aw-sage-2);
  cursor: help; margin-left: 2px; vertical-align: super;
}
.cost-hist-kind {
  display: inline-block; font-family: var(--aw-mono); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 999px;
  margin-right: 6px;
}
.cost-hist-kind-manual { color: var(--aw-sage-2); background: color-mix(in srgb, var(--aw-sage) 15%, transparent); }
.cost-hist-kind-import { color: var(--aw-forest); background: color-mix(in srgb, var(--aw-forest) 10%, transparent); }

/* ===========================================================================
   ANNUAL INSPECTION (.inspection) — electronic Annual Inspection Document.
   Mirrors the installation sign-off's mobile-first field UI (fullscreen module,
   ≥44px touch targets, drawn signatures) and maps onto the house --aw-* tokens
   so it shares the forest/lime/sage language. Self-contained --* fallbacks keep
   it readable if the stylesheet ever loads late. Scoped entirely under
   .inspection / .insp-bar — touches nothing else. Any element given an explicit
   display has a [hidden]{display:none!important} companion.
   =========================================================================== */
.inspection, .insp-bar {
  --g: var(--aw-primary, #14271a);
  --gd: var(--aw-forest-hover, #0d1a11);
  --lime: var(--aw-lime, #84bd2d);
  --ink: var(--aw-forest, #15201a);
  --muted: var(--aw-sage-2, #6c726a);
  --line: var(--aw-line, #e2e7de);
  --warn: var(--aw-danger, #b4451f);
}
.inspection { max-width: 760px; margin: 0 auto; padding: 0 0 120px; color: var(--ink); font-size: 16px; line-height: 1.45; }
.inspection * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.insp-intro { background: var(--aw-off-1, #f3f5f0); border: 1px solid var(--aw-line, #e2e7de); border-radius: 10px; padding: 11px 14px; font-size: 13.5px; color: var(--aw-forest, #14271a); margin: 0 0 14px; }

/* Saved-inspections collapsible — the shared .aw-details treatment without
   changing the button+div markup or the JS toggle (flips [hidden] + .open). */
.insp-saved { margin: 0 0 14px; }
.insp-saved-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--aw-forest, #14271a); background: var(--aw-off-3, #fbfdf7); border: 1px solid var(--line); border-radius: 14px; padding: 15px 18px; cursor: pointer; }
.insp-saved-toggle .insp-saved-caret { transition: transform .15s; color: var(--muted); }
.insp-saved-toggle.open .insp-saved-caret { transform: rotate(180deg); }
.insp-saved-list { margin-top: 8px; display: grid; gap: 8px; }
.insp-saved-list[hidden] { display: none !important; }
.insp-saved-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--aw-panel); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; }
.insp-saved-meta { display: flex; flex-direction: column; min-width: 0; }
.insp-saved-meta strong { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insp-saved-meta span { font-size: 12px; color: var(--muted); }
.insp-saved-open { flex: 0 0 auto; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--g); background: var(--aw-off-1, #f3f5f0); border: 1px solid var(--aw-line, #e2e7de); border-radius: 8px; padding: 8px 14px; cursor: pointer; }
.insp-saved-empty { font-size: 13px; color: var(--muted); padding: 10px 4px; margin: 0; }

/* Success / immutable screen. */
.insp-success { background: var(--aw-panel); border: 1px solid var(--line); border-radius: 14px; max-width: 460px; margin: 24px auto; padding: 28px 24px; text-align: center; }
.insp-success-tick { width: 56px; height: 56px; border-radius: 50%; background: var(--g); color: #fff; font-size: 30px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.insp-success-tick.warn { background: var(--warn); }
.insp-success h2 { margin: 0 0 8px; font-size: 20px; }
.insp-success p { margin: 0 0 20px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.insp-success .insp-btn { width: 100%; margin: 0 0 10px; }
.insp-success .insp-new { flex: none; background: var(--aw-off-2, #eef0ec); }

/* Cards. */
.insp-card { background: var(--aw-panel); border: 1px solid var(--line); border-radius: 14px; margin: 0 0 14px; overflow: hidden; }
.insp-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fbfcfb; }
.insp-n { flex: 0 0 26px; height: 26px; background: var(--g); color: #fff; border-radius: 7px; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.insp-n-icon svg { width: 15px; height: 15px; }
.insp-head h3 { margin: 0; font-size: 12.5px; font-weight: 600; font-family: var(--aw-mono, "JetBrains Mono", Consolas, monospace); text-transform: uppercase; letter-spacing: .06em; color: var(--aw-green, #2f7a3c); }
.insp-body { padding: 14px 16px 18px; }
.insp-subhead { font-family: var(--aw-mono, "JetBrains Mono", Consolas, monospace); text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; font-weight: 600; color: var(--aw-green, #2f7a3c); margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--aw-off-2, #eef0ec); }
.insp-hint { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }

/* Fields. */
.inspection label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin: 0 0 5px; }
.insp-block-label { margin: 4px 0 8px; }
.insp-req { color: var(--warn); }
.insp-field { margin-bottom: 13px; }
.insp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.insp-field-wide { grid-column: 1 / -1; }
.insp-voc { grid-template-columns: repeat(3, 1fr); gap: 0 10px; }
.insp-row { display: flex; gap: 12px; }
.insp-row .insp-field { flex: 1; }
.inspection input, .inspection textarea, .inspection select { width: 100%; font-size: 16px; font-family: inherit; color: var(--ink); padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--aw-panel); min-height: 46px; }
.inspection textarea { min-height: 70px; resize: vertical; }
.inspection select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235b6b62' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px; }
.inspection input:focus, .inspection textarea:focus, .inspection select:focus { outline: none; border-color: var(--g); box-shadow: 0 0 0 3px rgba(33, 122, 46, .12); }
/* Checkbox label — must out-rank ".inspection label" (0,1,1) or the block/
   uppercase styling wins and the checkbox + text misalign. */
.inspection label.insp-copy { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; font-size: 14px; font-weight: 500; color: var(--ink); text-transform: none; letter-spacing: 0; cursor: pointer; }
.insp-copy input { flex: 0 0 20px; width: 20px; height: 20px; accent-color: var(--g); }
.insp-scope { display: grid; gap: 2px; }
.inspection label.insp-scope-item { display: flex; align-items: center; gap: 11px; padding: 9px 2px; margin: 0; text-transform: none; font-size: 14.5px; font-weight: 500; color: var(--ink); letter-spacing: 0; cursor: pointer; }
.insp-scope-item input { flex: 0 0 22px; width: 22px; height: 22px; margin: 0; accent-color: var(--g); }
.insp-scope-item span { flex: 1 1 auto; line-height: 1.35; }

/* Section show/hide companion — .insp-section is toggled via inline style.display
   by wireApplicable; nothing else needed, but keep a defensive [hidden] rule. */
.insp-section[hidden] { display: none !important; }

/* "Mark all Yes" + Yes/No/N-A check rows. */
.insp-allyes-row { display: flex; justify-content: flex-end; margin: 0 0 4px; }
.insp-allyes { font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--g); background: var(--aw-off-1, #f3f5f0); border: 1px solid var(--aw-line, #e2e7de); border-radius: 8px; padding: 7px 12px; cursor: pointer; }
.insp-items { margin: 2px 0 10px; border-top: 1px solid var(--aw-off-2, #eef0ec); }
.insp-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--aw-off-2, #eef0ec); }
.insp-item-label { font-size: 14px; font-weight: 500; flex: 1; }
.insp-toggle { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.insp-toggle button { font-family: inherit; font-size: 13px; font-weight: 600; color: var(--muted); background: var(--aw-panel); border: none; border-left: 1px solid var(--line); padding: 9px 12px; min-width: 46px; min-height: 42px; cursor: pointer; }
.insp-toggle button:first-child { border-left: none; }
.insp-toggle button.active { background: var(--g); color: #fff; }
.insp-toggle button[data-v="no"].active { background: var(--warn); }
.insp-toggle button[data-v="na"].active { background: var(--muted); }
/* Segmented single-select detail controls (phases / metering / N-E bond /
   weather) — wrapping chips, not the compact 3-pill group. */
.insp-seg { display: flex; flex-wrap: wrap; gap: 8px; border: none; overflow: visible; }
.insp-seg button { border: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: 9px; min-width: 0; flex: 0 1 auto; padding: 10px 16px; }
.insp-seg button.active { background: var(--g); color: #fff; border-color: var(--g); }

/* Dynamic rows (inverters / battery serials). */
.insp-repeat { margin: 0 0 12px; }
.insp-repeat-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 12px; }
.insp-repeat-row .insp-field { flex: 1 1 140px; min-width: 0; margin-bottom: 0; }
.insp-rm { flex: 0 0 40px; height: 46px; border: 1px solid var(--line); background: var(--aw-panel); border-radius: 9px; font-size: 22px; line-height: 1; color: var(--warn); cursor: pointer; }
.insp-add { font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--g); background: var(--aw-off-1, #f3f5f0); border: 1px solid var(--aw-line, #e2e7de); border-radius: 9px; padding: 9px 14px; cursor: pointer; }
.insp-add:disabled { opacity: .5; cursor: default; }

/* Certification / sign-off block. */
.insp-declare { background: var(--aw-off-1, #f3f5f0); border: 1px solid var(--aw-line, #e2e7de); border-radius: 10px; padding: 12px 14px; font-size: 13px; color: var(--aw-forest, #14271a); margin: 0 0 14px; }
.insp-party { border-top: 1px solid var(--aw-off-2, #eef0ec); padding-top: 14px; margin-top: 14px; }
.insp-party h4 { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.insp-sigwrap { min-width: 0; margin-top: 4px; }
.insp-sig-label { display: flex; justify-content: space-between; align-items: center; }
.insp-clear { font-size: 12px; font-weight: 600; color: var(--g); background: none; border: none; padding: 4px 6px; cursor: pointer; }
.insp-pad { width: 100%; height: 150px; border: 1.5px dashed var(--aw-line-strong, #b9c7bd); border-radius: 10px; background: var(--aw-panel); touch-action: none; display: block; }

/* Errors + fixed action bar. */
.insp-err { color: var(--warn); font-weight: 600; font-size: 14px; text-align: center; padding: 0 16px; margin: 10px 0 0; display: none; }
.insp-err.show { display: block; }
/* Bottom action bar is the shared .fd-bar (see FIELD DOCS at EOF). The .insp-btn
   classes below remain ONLY for the post-save success screen's stacked buttons. */
.insp-btn { font-family: inherit; font-size: 15px; font-weight: 700; padding: 14px 14px; border-radius: 11px; border: none; cursor: pointer; }
.insp-primary { flex: 1; background: var(--g); color: #fff; }
.insp-primary:active { background: var(--gd); }
.insp-primary:disabled { opacity: .6; }
.insp-ghost { flex: 0 0 auto; background: var(--aw-off-2, #eef0ec); color: var(--muted); border: 1px solid var(--line); }
.insp-ghost:disabled { opacity: .6; }

/* Field-wrap [hidden] companions (service picker, service wrap set display:none
   only via the [hidden] attribute — but .insp-field has no explicit display, so
   these are belt-and-braces). */
#insp-service-wrap[hidden] { display: none !important; }

@media (max-width: 560px) {
  .insp-fields { grid-template-columns: 1fr; }
  .insp-voc { grid-template-columns: repeat(2, 1fr); }
  .insp-item { flex-wrap: wrap; }
  .insp-toggle { margin-left: auto; }
  .insp-card { margin: 0 0 10px; border-radius: 12px; }
  .insp-head { padding: 11px 12px; }
  .insp-body { padding: 12px 12px 14px; }
  .insp-intro { padding: 10px 12px; margin: 0 0 10px; }
  .insp-row { flex-wrap: wrap; }
  .insp-row .insp-field { flex: 1 1 140px; }
  .insp-btn { font-size: 14px; padding: 13px 10px; }
}

/* Print fallback — renders the on-screen form as a plain document. */
@media print {
  .app-shell .sidebar, .topbar, .insp-bar, .no-print, .insp-clear, .insp-add, .insp-rm { display: none !important; }
  .main-panel, .module-root { margin: 0 !important; padding: 0 !important; }
  .inspection { max-width: none; padding: 0; font-size: 11pt; }
  .insp-card { border: none; border-radius: 0; margin: 0 0 8px; break-inside: avoid; }
  .insp-head { background: none; border-bottom: 1.5px solid var(--g); padding: 5px 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .insp-body { padding: 7px 0 3px; }
  .inspection input, .inspection textarea { border: none !important; box-shadow: none !important; padding: 1px 0 !important; min-height: 0 !important; font-size: 11pt !important; font-weight: 600; }
  .insp-toggle button { display: none; } .insp-toggle button.active { display: inline-block; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .insp-pad { border: 1px solid #ccc; height: 120px; break-inside: avoid; }
  .insp-section[style*="none"] { display: none !important; }
  @page { size: A4; margin: 14mm; }
}

/* Per-section evidence photos. Thumbnails ~76px; tap targets >=44px. The Add
   button disables + the hint hides at the 6-photo cap. [hidden] companions on
   the hint + file input. */
.insp-photos { margin: 10px 0 14px; padding-top: 12px; border-top: 1px solid var(--aw-off-2, #eef0ec); }
.insp-photo-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.insp-photo-strip:not(:empty) { margin: 6px 0 10px; }
.insp-thumb { position: relative; width: 76px; height: 76px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); background: var(--aw-off-1, #f3f5f0); }
.insp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.insp-thumb-missing { display: flex; align-items: center; justify-content: center; }
.insp-thumb-missing::after { content: "photo"; font-size: 10px; color: var(--muted); }
.insp-thumb-rm { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(20,39,26,.82); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.insp-photo-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.insp-photo-add { font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--g); background: var(--aw-off-1, #f3f5f0); border: 1px solid var(--aw-line, #e2e7de); border-radius: 9px; padding: 11px 16px; min-height: 44px; cursor: pointer; }
.insp-photo-add:disabled { opacity: .5; cursor: default; }
.insp-photo-hint { font-size: 12px; color: var(--muted); }
.insp-photo-hint[hidden] { display: none !important; }
.insp-photo-input[hidden] { display: none !important; }

/* Per-inverter MPPT × input Voc grid (Section 3.2). Derived live from the
   Section 1 inverters — one block per inverter, an MPPT-count selector (1–10),
   and up to 10 MPPTs × 2 inputs ("MPPT n-1"/"MPPT n-2") → up to 20 Voc readings.
   Mobile-first: the input grid is 2-up on phones, 4-up from 560px. */
.insp-mppt { display: grid; gap: 12px; margin: 4px 0 12px; }
.insp-mppt-block { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: #fbfcfb; }
.insp-mppt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 10px; }
.insp-mppt-title { font-size: 13px; font-weight: 700; color: var(--g); }
.inspection label.insp-mppt-count-lbl { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.inspection .insp-mppt-count-lbl select { width: auto; min-height: 40px; padding: 8px 30px 8px 10px; }
.insp-mppt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 10px; }
.insp-mppt-grid .insp-field { margin-bottom: 10px; }
@media (min-width: 560px) { .insp-mppt-grid { grid-template-columns: repeat(4, 1fr); } }

/* ===========================================================================
   SYSTEM AUDIT (.audit) — electronic Solar PV Systems Audit Scorecard.
   Mirrors the Annual Inspection field UI (fullscreen module, ≥44px targets,
   drawn signatures) and maps onto the house --aw-* tokens so it shares the
   forest/lime/sage language. Consumes the shared primitives .aw-segmented /
   .aw-seg (status controls), .aw-details (cost block). Status/risk colours are
   derived from the tokens (green Pass / amber Partial / red Fail / sage N-A) —
   never a saturated-green fill. Scoped entirely under .audit / .aud-bar; any
   element given an explicit display has a [hidden]{display:none!important}
   companion.
   =========================================================================== */
.audit, .aud-bar {
  --g: var(--aw-primary, #14271a);
  --gd: var(--aw-forest-hover, #0d1a11);
  --lime: var(--aw-lime, #84bd2d);
  --ink: var(--aw-forest, #15201a);
  --muted: var(--aw-sage-2, #6c726a);
  --line: var(--aw-line, #e2e7de);
  --warn: var(--aw-danger, #b4451f);
  --pass: var(--aw-green, #2f7a3c);
  --partial: var(--aw-amber, #e0902a);
}
.audit { max-width: 820px; margin: 0 auto; padding: 0 0 120px; color: var(--ink); font-size: 16px; line-height: 1.45; }
.audit * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.aud-intro { background: var(--aw-off-1, #f3f5f0); border: 1px solid var(--aw-line, #e2e7de); border-radius: 10px; padding: 11px 14px; font-size: 13.5px; color: var(--aw-forest, #14271a); margin: 0 0 14px; }

/* Saved-audits collapsible. */
.aud-saved { margin: 0 0 14px; }
.aud-saved-toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; font-family: inherit; font-size: 14px; font-weight: 700; color: var(--aw-forest, #14271a); background: var(--aw-off-3, #fbfdf7); border: 1px solid var(--line); border-radius: 14px; padding: 15px 18px; cursor: pointer; }
.aud-saved-toggle .aud-saved-caret { transition: transform .15s; color: var(--muted); }
.aud-saved-toggle.open .aud-saved-caret { transform: rotate(180deg); }
.aud-saved-list { margin-top: 8px; display: grid; gap: 8px; }
.aud-saved-list[hidden] { display: none !important; }
.aud-saved-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--aw-panel); border: 1px solid var(--line); border-radius: 10px; padding: 11px 14px; }
.aud-saved-meta { display: flex; flex-direction: column; min-width: 0; }
.aud-saved-meta strong { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aud-saved-meta span { font-size: 12px; color: var(--muted); }
.aud-saved-open { flex: 0 0 auto; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--g); background: var(--aw-off-1, #f3f5f0); border: 1px solid var(--aw-line, #e2e7de); border-radius: 8px; padding: 8px 14px; cursor: pointer; }
.aud-saved-empty { font-size: 13px; color: var(--muted); padding: 10px 4px; margin: 0; }

/* Success / immutable screen. */
.aud-success { background: var(--aw-panel); border: 1px solid var(--line); border-radius: 14px; max-width: 460px; margin: 24px auto; padding: 28px 24px; text-align: center; }
.aud-success-tick { width: 56px; height: 56px; border-radius: 50%; background: var(--g); color: #fff; font-size: 30px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.aud-success-tick.warn { background: var(--warn); }
.aud-success h2 { margin: 0 0 8px; font-size: 20px; }
.aud-success p { margin: 0 0 20px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.aud-success .aud-btn { width: 100%; margin: 0 0 10px; }
.aud-success .aud-new { flex: none; background: var(--aw-off-2, #eef0ec); }

/* Cards. NOTE: no overflow:hidden on the scorecard card — it would clip the
   sticky summary strip. Head corners are rounded explicitly instead. */
.aud-card { background: var(--aw-panel); border: 1px solid var(--line); border-radius: 14px; margin: 0 0 14px; }
.aud-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); background: #fbfcfb; border-radius: 13px 13px 0 0; }
.aud-n { flex: 0 0 26px; height: 26px; background: var(--g); color: #fff; border-radius: 7px; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.aud-n-icon svg { width: 15px; height: 15px; }
.aud-head h3 { margin: 0; font-size: 12.5px; font-weight: 600; font-family: var(--aw-mono, "JetBrains Mono", Consolas, monospace); text-transform: uppercase; letter-spacing: .06em; color: var(--aw-green, #2f7a3c); }
.aud-body { padding: 14px 16px 18px; }
.aud-subhead { font-family: var(--aw-mono, "JetBrains Mono", Consolas, monospace); text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; font-weight: 600; color: var(--aw-green, #2f7a3c); margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--aw-off-2, #eef0ec); }
.aud-hint { font-size: 12.5px; color: var(--muted); margin: 0 0 10px; }

/* Fields. */
.audit label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin: 0 0 5px; }
.aud-req { color: var(--warn); }
.aud-field { margin-bottom: 13px; }
.aud-row { display: flex; gap: 12px; }
.aud-row .aud-field { flex: 1; }
.audit input, .audit textarea, .audit select { width: 100%; font-size: 16px; font-family: inherit; color: var(--ink); padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--aw-panel); min-height: 46px; }
.audit textarea { min-height: 62px; resize: vertical; }
.audit select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235b6b62' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px; }
.audit input:focus, .audit textarea:focus, .audit select:focus { outline: none; border-color: var(--g); box-shadow: 0 0 0 3px rgba(33, 122, 46, .12); }
/* Checkbox labels must out-rank ".audit label" (0,1,1) or the uppercase styling wins. */
.audit label.aud-copy { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font-size: 14px; font-weight: 500; color: var(--ink); text-transform: none; letter-spacing: 0; cursor: pointer; }
.aud-copy input { flex: 0 0 20px; width: 20px; height: 20px; accent-color: var(--g); }

/* --- Sticky live summary strip --- */
.aud-summary { position: sticky; top: 0; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 10px 16px; background: var(--aw-panel); border-bottom: 1px solid var(--line); box-shadow: 0 4px 10px -8px rgba(20, 39, 26, .35); }
.aud-sum-stats { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.aud-sum-stat { display: inline-flex; align-items: baseline; gap: 5px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.aud-sum-stat b { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: 0; }
.aud-sum-score b { color: var(--g); }
.aud-sum-verdict { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
.aud-verdict-dot { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; background: var(--muted); }
.aud-summary[data-tone="good"] .aud-verdict-dot { background: var(--pass); }
.aud-summary[data-tone="ok"] .aud-verdict-dot { background: var(--lime); }
.aud-summary[data-tone="warn"] .aud-verdict-dot { background: var(--partial); }
.aud-summary[data-tone="bad"] .aud-verdict-dot { background: var(--warn); }
.aud-summary[data-tone="good"] .aud-sum-verdict { color: var(--pass); }
.aud-summary[data-tone="warn"] .aud-sum-verdict { color: #a9701f; }
.aud-summary[data-tone="bad"] .aud-sum-verdict { color: var(--warn); }

/* --- Scorecard --- */
.aud-cat { margin: 0 0 6px; }
.aud-cat-head { display: flex; align-items: center; gap: 9px; margin: 14px 0 4px; }
.aud-cat-letter { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; background: var(--g); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.aud-cat-head h4 { margin: 0; font-family: var(--aw-mono, "JetBrains Mono", Consolas, monospace); text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; font-weight: 600; color: var(--aw-green, #2f7a3c); }
.aud-item { padding: 11px 2px; border-bottom: 1px solid var(--aw-off-2, #eef0ec); }
.aud-item-top { display: flex; gap: 8px; align-items: baseline; }
.aud-item-ref { flex: 0 0 auto; min-width: 24px; font-family: var(--aw-mono, "JetBrains Mono", Consolas, monospace); font-size: 11px; font-weight: 600; color: var(--muted); }
.aud-item-text { flex: 1 1 auto; font-size: 14px; font-weight: 500; line-height: 1.35; }
.aud-risk { flex: 0 0 auto; font-family: var(--aw-mono, "JetBrains Mono", Consolas, monospace); font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.aud-risk-critical { color: var(--warn); background: rgba(180, 69, 31, .1); }
.aud-risk-high { color: #a9701f; background: rgba(224, 144, 42, .13); }
.aud-risk-medium { color: var(--pass); background: rgba(47, 122, 60, .1); }
.aud-risk-low { color: var(--muted); background: var(--aw-off-2, #eef0ec); }
.aud-item-bottom { display: flex; align-items: center; gap: 10px; margin-top: 9px; padding-left: 32px; }
/* The status control uses the shared .aw-segmented/.aw-seg primitive; here it
   stretches full width and the four options split it evenly on all widths. */
.audit .aud-status.aw-segmented { display: flex; flex: 1 1 auto; align-self: auto; }
.audit .aud-status .aud-seg { flex: 1 1 0; min-width: 0; padding: 8px 6px; min-height: 40px; }
.audit .aud-seg[data-v="pass"].is-active { background: var(--pass); color: #fff; }
.audit .aud-seg[data-v="partial"].is-active { background: var(--partial); color: #fff; }
.audit .aud-seg[data-v="fail"].is-active { background: var(--warn); color: #fff; }
.audit .aud-seg[data-v="na"].is-active { background: var(--muted); color: #fff; }
.aud-note-toggle { flex: 0 0 auto; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--g); background: var(--aw-off-1, #f3f5f0); border: 1px solid var(--aw-line, #e2e7de); border-radius: 8px; padding: 8px 11px; min-height: 40px; cursor: pointer; }
.aud-note-toggle.is-open { background: var(--g); color: #fff; border-color: var(--g); }
.aud-note { display: flex; flex-wrap: wrap; gap: 8px; margin: 9px 0 0; padding-left: 32px; }
.aud-note[hidden] { display: none !important; }
.aud-note-in { flex: 1 1 180px; min-width: 0; min-height: 40px !important; padding: 8px 11px !important; font-size: 14px !important; }

/* --- Cost block (shared .aw-details primitive) --- */
.aud-cost { margin: 0 0 14px; }
.audit label.aud-cost-enable { margin: 0 0 4px; }
.aud-cost-line { border-top: 1px solid var(--aw-off-2, #eef0ec); padding-top: 12px; }
.aud-cost-desc { display: grid; gap: 6px; margin-bottom: 8px; }
.aud-cost-desc input { font-weight: 600; }
.aud-cost-desc .aud-cost-note { font-weight: 400; font-size: 13px; color: var(--muted); min-height: 40px; }
.aud-cost-nums { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.audit label.aud-cost-num { flex: 0 1 110px; margin: 0; font-size: 11px; }
.aud-cost-num input { margin-top: 4px; }
.aud-cost-amt { flex: 1 1 90px; text-align: right; font-weight: 700; font-size: 15px; color: var(--ink); white-space: nowrap; }
.aud-cost-totals { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; display: grid; gap: 6px; }
.aud-cost-totals > div { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; color: var(--muted); }
.aud-cost-totals b { font-weight: 700; color: var(--ink); }
.aud-cost-grand { border-top: 1px solid var(--aw-off-2, #eef0ec); margin-top: 4px; padding-top: 8px; font-size: 15px !important; color: var(--ink) !important; }
.aud-cost-grand b { font-size: 17px; }

/* --- Findings --- */
.aud-findings { margin: 4px 0 0; }
.aud-finding-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; border-top: 1px solid var(--aw-off-2, #eef0ec); padding-top: 12px; margin-bottom: 12px; }
.aud-finding-row .aud-field { flex: 1 1 240px; min-width: 0; margin-bottom: 0; }
.aud-rm { flex: 0 0 40px; height: 46px; align-self: center; border: 1px solid var(--line); background: var(--aw-panel); border-radius: 9px; font-size: 22px; line-height: 1; color: var(--warn); cursor: pointer; }
.aud-add { font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--g); background: var(--aw-off-1, #f3f5f0); border: 1px solid var(--aw-line, #e2e7de); border-radius: 9px; padding: 9px 14px; cursor: pointer; }

/* --- Sign-off --- */
.aud-party { border-top: 1px solid var(--aw-off-2, #eef0ec); padding-top: 14px; margin-top: 14px; }
.aud-party h4 { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.aud-sigwrap { min-width: 0; margin-top: 4px; }
.aud-sig-label { display: flex; justify-content: space-between; align-items: center; }
.aud-clear { font-size: 12px; font-weight: 600; color: var(--g); background: none; border: none; padding: 4px 6px; cursor: pointer; }
.aud-pad { width: 100%; height: 150px; border: 1.5px dashed var(--aw-line-strong, #b9c7bd); border-radius: 10px; background: var(--aw-panel); touch-action: none; display: block; }

/* --- Errors + fixed action bar --- */
.aud-err { color: var(--warn); font-weight: 600; font-size: 14px; text-align: center; padding: 0 16px; margin: 10px 0 0; display: none; }
.aud-err.show { display: block; }
/* Bottom action bar is the shared .fd-bar (see FIELD DOCS at EOF). The .aud-btn
   classes below remain ONLY for the post-save success screen's stacked buttons. */
.aud-btn { font-family: inherit; font-size: 15px; font-weight: 700; padding: 14px 14px; border-radius: 11px; border: none; cursor: pointer; }
.aud-primary { flex: 1; background: var(--g); color: #fff; }
.aud-primary:active { background: var(--gd); }
.aud-primary:disabled { opacity: .6; }
.aud-ghost { flex: 0 0 auto; background: var(--aw-off-2, #eef0ec); color: var(--muted); border: 1px solid var(--line); }
.aud-ghost:disabled { opacity: .6; }

@media (max-width: 560px) {
  .aud-item-bottom { padding-left: 0; flex-wrap: wrap; }
  .aud-note { padding-left: 0; }
  .aud-sum-stats { gap: 6px 10px; }
  .aud-sum-stat { font-size: 10px; }
  .aud-card { margin: 0 0 10px; border-radius: 12px; }
  .aud-head { padding: 11px 12px; border-radius: 11px 11px 0 0; }
  .aud-body { padding: 12px 12px 14px; }
  .aud-intro { padding: 10px 12px; margin: 0 0 10px; }
  .aud-row { flex-wrap: wrap; }
  .aud-row .aud-field { flex: 1 1 140px; }
  .aud-btn { font-size: 14px; padding: 13px 10px; }
  .aud-cost-amt { flex-basis: 100%; text-align: left; }
}

/* Print fallback — renders the on-screen scorecard as a plain document. */
@media print {
  .app-shell .sidebar, .topbar, .aud-bar, .no-print, .aud-clear, .aud-add, .aud-rm { display: none !important; }
  .main-panel, .module-root { margin: 0 !important; padding: 0 !important; }
  .audit { max-width: none; padding: 0; font-size: 11pt; }
  .aud-summary { position: static; box-shadow: none; }
  .aud-card { border: none; border-radius: 0; margin: 0 0 8px; break-inside: avoid; }
  .aud-head { background: none; border-bottom: 1.5px solid var(--g); padding: 5px 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .aud-body { padding: 7px 0 3px; }
  .audit input, .audit textarea { border: none !important; box-shadow: none !important; padding: 1px 0 !important; min-height: 0 !important; font-size: 11pt !important; font-weight: 600; }
  .aud-item { break-inside: avoid; }
  .audit .aud-status .aud-seg { display: none; }
  .audit .aud-status .aud-seg.is-active { display: inline-flex; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .aud-pad { border: 1px solid #ccc; height: 120px; break-inside: avoid; }
  @page { size: A4; margin: 14mm; }
}

/* Per-category evidence photos (foot of each A–J scorecard block). Thumbnails
   ~76px carry their auto reference "{letter}-P{n}"; tap targets >=44px. Add
   button disables + hint hides at the 6-photo cap; [hidden] companions on the
   hint + file input. */
.aud-photos { margin: 12px 0 2px; padding-top: 10px; border-top: 1px solid var(--aw-off-2, #eef0ec); }
.aud-photo-strip { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.aud-photo-strip:not(:empty) { margin: 4px 0 10px; }
.aud-thumb { position: relative; width: 76px; height: 76px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); background: var(--aw-off-1, #f3f5f0); }
.aud-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aud-thumb-missing { display: flex; align-items: center; justify-content: center; }
.aud-thumb-missing::after { content: "photo"; font-size: 10px; color: var(--muted); }
.aud-thumb-ref { position: absolute; left: 0; bottom: 0; right: 0; padding: 2px 4px; font-family: var(--aw-mono); font-size: 9px; font-weight: 600; letter-spacing: .3px; color: #fff; background: rgba(20,39,26,.72); text-align: left; }
.aud-thumb-rm { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; border-radius: 50%; border: none; background: rgba(20,39,26,.82); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.aud-photo-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.aud-photo-add { font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--g); background: var(--aw-off-1, #f3f5f0); border: 1px solid var(--aw-line, #e2e7de); border-radius: 9px; padding: 11px 16px; min-height: 44px; cursor: pointer; }
.aud-photo-add:disabled { opacity: .5; cursor: default; }
.aud-photo-hint { font-size: 12px; color: var(--muted); }
.aud-photo-hint[hidden] { display: none !important; }
.aud-photo-input[hidden] { display: none !important; }

/* ============================================================
   Field Docs wrapper — slim toggle bar above the hosted field-
   document tool (Sign-Off / Job Card / Inspection / Audit). The
   segmented control itself is the shared .aw-segmented/.aw-seg
   primitive; this only spaces the bar and keeps the buttons on
   one line. The hosted sub-tool renders its own UI in .fielddocs-body.
   ============================================================ */
.fielddocs-bar { display: flex; justify-content: center; padding: 12px 16px; border-bottom: 1px solid var(--aw-line); }
.fielddocs-seg { max-width: 100%; flex-wrap: wrap; justify-content: center; }
.fielddocs-seg-btn { white-space: nowrap; }

/* ===========================================================================
   SIGN-OFF commissioning — per-inverter MPPT × input measurement grid.
   New selectors only (the rest of the .signoff CSS lives in signoff/index.js,
   which the task's fragile-zone rule keeps untouched). One block per inverter
   from the Inverter-section rows; each MPPT has 2 inputs and each input carries
   every stringMeasures field (Voc + operating current). Mobile-first: the two
   measures per input stack single-column on phones (inherited from .sg-fields),
   two-up from 560px. Consumes the shared --aw-* tokens.
   =========================================================================== */
.sg-mppt-block { border: 1px solid var(--aw-line, #e2e7de); border-radius: 10px; padding: 10px 12px; background: #fbfcfb; }
.sg-mppt-block + .sg-mppt-block { margin-top: 10px; }
.sg-mppt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; }
.sg-mppt-title { font-size: 13px; font-weight: 700; color: var(--aw-forest, #14271a); }
.signoff label.sg-mppt-count { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--aw-sage-2, #6c726a); }
.signoff .sg-mppt-count select { width: auto; min-height: 40px; padding: 8px 30px 8px 10px; }
.sg-mppt-grid { display: grid; gap: 4px; }
.sg-mppt-input { border-top: 1px dashed var(--aw-off-2, #eef0ec); padding-top: 8px; }
.sg-mppt-input:first-child { border-top: none; padding-top: 0; }
.sg-mppt-input-h { font-family: var(--aw-mono, "JetBrains Mono", Consolas, monospace); font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--aw-green, #2f7a3c); margin: 0 0 6px; }

/* ===========================================================================
   FIELD DOCS — shared action bar (.fd-bar)
   ONE footer for all four field-document tools (Installation Sign-Off, Call-Out
   Job Card, Annual Inspection, System Audit) so the bar is byte-identical across
   the Field Docs segmented switch — swapping tools no longer jumps the buttons.
   Fixed to the viewport bottom; works standalone (via #field-tabs) and nested in
   the Field Docs wrapper. Reset (+ optional Save draft) are ghost buttons that
   size to content on the left; the primary action fills the remaining width on
   the right. Replaces the old per-module .sg-bar / .insp-bar / .aud-bar rules.
   =========================================================================== */
.fd-bar { position: fixed; left: 0; right: 0; bottom: 0; box-sizing: border-box;
  background: var(--aw-panel); border-top: 1px solid var(--aw-line, #e2e7de);
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  display: flex; gap: 10px; z-index: 50; max-width: 100%; }
.fd-btn { font-family: inherit; font-size: 15px; font-weight: 700; padding: 14px 14px;
  border-radius: 11px; border: none; cursor: pointer; min-height: 48px; }
.fd-btn-primary { flex: 1; background: var(--aw-primary, #14271a); color: #fff; }
.fd-btn-primary:active { background: var(--aw-forest-hover, #0d1a11); }
.fd-btn-primary:disabled { opacity: .6; }
.fd-btn-ghost { flex: 0 0 auto; background: var(--aw-off-2, #eef0ec);
  color: var(--aw-sage-2, #6c726a); border: 1px solid var(--aw-line, #e2e7de); }
.fd-btn-ghost:disabled { opacity: .6; }
.fd-bar [hidden] { display: none !important; }
/* Narrow phones: shrink so Reset + Save draft + Complete all fit one row. */
@media (max-width: 560px) {
  .fd-bar { gap: 8px; padding-left: 10px; padding-right: 10px; }
  .fd-btn { font-size: 14px; padding: 13px 10px; }
}
@media print { .fd-bar { display: none !important; } }

/* ==========================================================================
   Notes — private per-user calendar notes (web + mobile). Uses the shared aw-*
   primitives (eyebrow / card / stat-card). Forest = authority, lime = accent on
   rules / ticks / dots only. Fragile-zone-free: entirely self-contained here.
   ========================================================================== */
/* Fill the module-root width (like register/schedule) — no fixed cap. */
.aw-notes { display: flex; flex-direction: column; gap: 20px; width: 100%; }
/* Companion for any explicit-display element that may carry [hidden]. */
.aw-notes [hidden] { display: none !important; }

.notes-head { display: flex; flex-direction: column; gap: 8px; }
.notes-head-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.notes-title { margin: 0; font-size: 24px; color: var(--aw-forest); }
.notes-lock-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--aw-sage-2);
  background: var(--aw-off-1); border: 1px solid var(--aw-line);
  border-radius: 999px; padding: 5px 12px;
}
.notes-lock-chip svg { width: 14px; height: 14px; fill: none; stroke: var(--aw-sage-2); stroke-width: 1.8; }

/* Due in-app reminder strip. */
.notes-strip {
  border: 1px solid var(--aw-line); border-left: 3px solid var(--aw-lime);
  border-radius: 12px; background: var(--aw-off-3); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.notes-strip-head { display: flex; align-items: center; gap: 8px; color: var(--aw-forest); }
.notes-strip-head strong { font-size: 14px; }
.notes-strip-bell { width: 18px; height: 18px; fill: none; stroke: var(--aw-forest); stroke-width: 1.8; }
.notes-strip-list { display: flex; flex-direction: column; gap: 6px; }
.notes-strip-row { display: flex; align-items: stretch; gap: 8px; }
.notes-strip-open {
  flex: 1 1 auto; text-align: left; border: 1px solid var(--aw-line);
  background: var(--aw-panel); border-radius: 10px; padding: 8px 12px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.notes-strip-open:hover { border-color: var(--aw-forest); }
.notes-strip-when { font-family: var(--aw-mono); font-size: 11px; color: var(--aw-green); text-transform: uppercase; letter-spacing: 0.04em; }
.notes-strip-body { color: var(--aw-forest); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notes-strip-dismiss {
  flex: 0 0 auto; width: 34px; border: 1px solid var(--aw-line); background: var(--aw-panel);
  border-radius: 10px; color: var(--aw-sage-2); cursor: pointer; font-size: 14px;
}
.notes-strip-dismiss:hover { color: var(--aw-forest); border-color: var(--aw-forest); }

/* 3-up summary. */
.notes-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

/* Main layout: calendar (web) beside the day panel; day-view (mobile) instead.
   Fluid ~58% / ~42% split (1.38 : 1) that expands to the container width. */
.notes-main { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(340px, 1fr); gap: 22px; align-items: start; }
.notes-dayview { display: none; }

/* Month calendar. */
.notes-calendar { gap: 12px; }
.notes-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.notes-cal-title { font-weight: 700; color: var(--aw-forest); font-size: 16px; }
.notes-cal-nav {
  border: 1px solid var(--aw-line-strong); background: var(--aw-panel); color: var(--aw-forest);
  border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-size: 18px; line-height: 1;
}
.notes-cal-nav:hover { border-color: var(--aw-forest); background: var(--aw-off-1); }
.notes-cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.notes-cal-weekdays span {
  text-align: center; font-family: var(--aw-mono); font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--aw-sage-2);
}
.notes-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.notes-cal-cell {
  position: relative; border: 1px solid var(--aw-line); background: var(--aw-panel); border-radius: 10px;
  min-height: 92px; padding: 8px 8px 6px; cursor: pointer; display: flex; flex-direction: column;
  justify-content: space-between; align-items: flex-start; transition: border-color .12s, background .12s;
}
.notes-cal-cell:hover { border-color: var(--aw-forest); }
.notes-cal-cell.is-out { opacity: 0.45; }
.notes-cal-num { font-size: 15px; font-weight: 600; color: var(--aw-forest); }
.notes-cal-cell.is-today .notes-cal-num {
  position: relative; color: var(--aw-forest);
}
.notes-cal-cell.is-today .notes-cal-num::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; border-radius: 2px; background: var(--aw-lime);
}
.notes-cal-cell.is-selected { background: var(--aw-primary); border-color: var(--aw-forest); }
.notes-cal-cell.is-selected .notes-cal-num { color: #fff; }
.notes-cal-cell.is-selected.is-today .notes-cal-num::after { background: var(--aw-lime); }
.notes-cal-marks { display: flex; align-items: center; gap: 4px; }
.notes-cal-dot {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--aw-lime); color: var(--aw-forest); font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.notes-cal-bell { width: 13px; height: 13px; fill: none; stroke: var(--aw-sage-2); stroke-width: 1.8; }
.notes-cal-cell.is-selected .notes-cal-bell { stroke: #fff; }

/* Mobile day view: day nav + week strip. */
.notes-day-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.notes-day-nav-title { font-weight: 700; color: var(--aw-forest); font-size: 16px; }
.notes-weekstrip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.notes-week-cell {
  border: 1px solid var(--aw-line); background: var(--aw-panel); border-radius: 10px; padding: 8px 2px 6px;
  cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.notes-week-cell:hover { border-color: var(--aw-forest); }
.notes-week-dow { font-family: var(--aw-mono); font-size: 9px; font-weight: 600; text-transform: uppercase; color: var(--aw-sage-2); }
.notes-week-num { font-size: 15px; font-weight: 700; color: var(--aw-forest); }
.notes-week-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--aw-lime); }
.notes-week-dot.is-empty { background: transparent; }
.notes-week-cell.is-today { border-color: var(--aw-lime); }
.notes-week-cell.is-selected { background: var(--aw-primary); border-color: var(--aw-forest); }
.notes-week-cell.is-selected .notes-week-dow { color: rgba(255,255,255,0.7); }
.notes-week-cell.is-selected .notes-week-num { color: #fff; }

/* Selected-day panel + list. */
.notes-day-panel { gap: 14px; }
.notes-list { display: flex; flex-direction: column; gap: 8px; }
.notes-empty { color: var(--aw-sage-2); font-size: 14px; margin: 0; }
.notes-item {
  display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--aw-line);
  border-radius: 10px; padding: 10px 12px; background: var(--aw-panel);
}
.notes-item.is-editing { border-color: var(--aw-forest); box-shadow: 0 0 0 1px var(--aw-forest); }
.notes-item-when {
  flex: 0 0 auto; min-width: 52px; font-family: var(--aw-mono); font-size: 11px; font-weight: 600;
  color: var(--aw-green); text-transform: uppercase; letter-spacing: 0.03em; padding-top: 2px;
}
.notes-item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.notes-item-body { color: var(--aw-forest); font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.notes-item-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.notes-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
  color: var(--aw-sage-2); background: var(--aw-off-1); border: 1px solid var(--aw-line); border-radius: 999px; padding: 3px 9px;
}
.notes-chip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.notes-item-actions { flex: 0 0 auto; display: flex; flex-direction: column; gap: 4px; }
.notes-icon-btn {
  border: 1px solid var(--aw-line-strong); background: var(--aw-panel); color: var(--aw-sage-2);
  border-radius: 8px; padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.notes-icon-btn:hover { color: var(--aw-forest); border-color: var(--aw-forest); }
.notes-icon-btn.danger:hover { color: var(--aw-danger); border-color: var(--aw-danger); }

/* Composer. */
.notes-composer {
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--aw-line); padding-top: 14px;
}
.notes-composer-eyebrow { margin: 0; font-family: var(--aw-mono); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--aw-green); }
.notes-body {
  width: 100%; border: 1px solid var(--aw-line-strong); border-radius: 10px; padding: 10px 12px;
  font: inherit; color: var(--aw-forest); resize: vertical; min-height: 64px; background: var(--aw-panel);
}
.notes-body:focus { outline: none; border-color: var(--aw-forest); }
/* Time field + "Now" button. flex-wrap + min-width:0 so the native (wide, on iOS)
   time control can shrink and, if space is tight, the Now button wraps below it —
   never overlapping. Both keep a ≥44px touch target. */
.notes-composer-fields { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.notes-time-field { flex: 1 1 150px; max-width: 200px; min-width: 0; }
.notes-time-field input { width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; }
/* "Now" quick-set button — compact secondary, aligned to the bottom of the field. */
.notes-now-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto;
  border: 1px solid var(--aw-line-strong); background: var(--aw-panel); color: var(--aw-forest);
  border-radius: 10px; padding: 9px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  min-height: 44px;
}
.notes-now-btn:hover { border-color: var(--aw-forest); background: var(--aw-off-1); }
.notes-now-btn svg { width: 15px; height: 15px; fill: none; stroke: var(--aw-green); stroke-width: 1.9; }
/* Dictation fallback message (Edge/other failures) — brief, understated. */
.notes-dictate-msg { margin: -2px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--aw-sage-2); }
.notes-remind-toggle, .notes-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--aw-forest); cursor: pointer; }
.notes-remind-opts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; padding: 12px 14px; background: var(--aw-off-1); border: 1px solid var(--aw-line); border-radius: 10px; }
.notes-remind-at-field { min-width: 220px; }
.notes-link { position: relative; display: flex; flex-direction: column; gap: 6px; }
.notes-link-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 5; margin-top: 4px;
  background: var(--aw-panel); border: 1px solid var(--aw-line-strong); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20,39,26,0.12); max-height: 240px; overflow-y: auto; padding: 4px;
}
.notes-link-option { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--aw-forest); font-size: 14px; }
.notes-link-option:hover { background: var(--aw-off-1); }
.notes-link-none { padding: 8px 10px; color: var(--aw-sage-2); font-size: 13px; }
.notes-link-chip { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; background: var(--aw-off-1); border: 1px solid var(--aw-line); border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 13px; color: var(--aw-forest); }
.notes-link-chip button { border: 0; background: var(--aw-off-2); color: var(--aw-sage-2); width: 22px; height: 22px; border-radius: 50%; cursor: pointer; }
.notes-link-chip button:hover { color: var(--aw-forest); }
.notes-composer-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Dictate button — shown only when the Web Speech API exists (JS unhides it). */
.notes-dictate {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--aw-forest); background: var(--aw-primary); color: #fff;
  border-radius: 999px; padding: 10px 20px; cursor: pointer; font-size: 14px; font-weight: 600;
}
.notes-dictate svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.notes-dictate:hover { background: var(--aw-forest-hover); }
.notes-dictate.is-listening { background: var(--aw-panel); color: var(--aw-forest); border-color: var(--aw-lime); box-shadow: 0 0 0 3px rgba(132,189,45,0.28); }
.notes-dictate.is-listening svg { stroke: var(--aw-green); }

/* Nav-entry badge (Notes due-reminder count). */
.nav-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--aw-lime); color: var(--aw-forest); font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.nav-badge[hidden] { display: none !important; }
.nav-item .nav-badge { margin-left: auto; }
.nav-item[hidden] { display: none !important; }

/* Persistent topbar Notes button — matches .back-home (understated white pill,
   forest text, green icon accent — no loud fill). Sits in .topbar-actions. */
.notes-topbar-btn {
  display: inline-flex; align-items: center; gap: 6px; position: relative;
  padding: 10px 14px; min-height: 42px; flex: 0 0 auto;
  border: 1px solid var(--aw-line-strong); border-radius: 10px; background: var(--aw-panel);
  color: var(--aw-forest); font: 600 14px/1 "Inter", Arial, sans-serif; cursor: pointer;
}
.notes-topbar-btn:hover { border-color: var(--aw-forest); background: var(--aw-off-1); }
.notes-topbar-btn[hidden] { display: none !important; }
.notes-topbar-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--aw-green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.notes-topbar-btn .nav-badge { margin-left: 2px; }
/* The topbar-actions row stacks to full-width column at ≤640px (existing shell
   rule), so the labelled button always has room — inline with space above 640px,
   or full-width stacked below it (reads like the Sign-out button). Drop the label
   ONLY in the fullscreen mobile topbar, where actions stay in a tight row. */
@media (max-width: 640px) {
  .app-shell.is-fullscreen .notes-topbar-label { display: none; }
  .app-shell.is-fullscreen .notes-topbar-btn { padding: 10px; }
}

/* Persistent topbar Support-tickets button — same understated pill as the Notes
   button (white, forest text, green icon accent, no loud fill). Sits alongside it
   in .topbar-actions. Its badge shows the OPEN-ticket count and takes an SLA-
   urgency colour (see below). */
.support-topbar-btn {
  display: inline-flex; align-items: center; gap: 6px; position: relative;
  padding: 10px 14px; min-height: 42px; flex: 0 0 auto;
  border: 1px solid var(--aw-line-strong); border-radius: 10px; background: var(--aw-panel);
  color: var(--aw-forest); font: 600 14px/1 "Inter", Arial, sans-serif; cursor: pointer;
}
.support-topbar-btn:hover { border-color: var(--aw-forest); background: var(--aw-off-1); }
.support-topbar-btn[hidden] { display: none !important; }
.support-topbar-btn svg { width: 16px; height: 16px; fill: none; stroke: var(--aw-green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.support-topbar-btn .nav-badge { margin-left: 2px; }

/* Support badge SLA-urgency colours. The colour PRECEDENCE (breached > soon >
   neutral) is decided in app.js and applied as a class here, deliberately
   mirroring ticketRow()'s row-accent order so the topbar and the queue can never
   disagree. The base .nav-badge (lime/forest) stays for the ordinary case.
   .is-breached = an SLA is past due → red danger (white text for contrast on the
   dark-red fill). .is-soon = a subscriber ticket is <60m from its first-response
   deadline → amber (dark forest text for contrast on the light-amber fill).
   Never a saturated-green fill; lime stays edges/ticks only. */
.nav-badge.is-breached { background: var(--aw-danger); color: #fff; }
.nav-badge.is-soon { background: var(--aw-amber); color: var(--aw-forest); }

/* Mobile: mirror the Notes-label rule. The topbar-actions row stacks full-width
   at ≤640px so the label has room in the normal topbar; drop it ONLY in the
   fullscreen tight-row topbar, keeping icon + badge. */
@media (max-width: 640px) {
  .app-shell.is-fullscreen .support-topbar-label { display: none; }
  .app-shell.is-fullscreen .support-topbar-btn { padding: 10px; }
}

/* Per-user theme toggle — a compact icon-only cycle button (system → light →
   dark) sharing the understated topbar-pill look of the Notes/Support buttons.
   A single square keeps it narrow enough for the fullscreen mobile tight row;
   align-self:flex-start stops it stretching when .topbar-actions stacks to a
   full-width column at ≤640px. All colours are tokens, so it re-tints itself in
   dark via :root[data-theme="dark"] with no dedicated override. */
.theme-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start; flex: 0 0 auto;
  width: 42px; height: 42px; min-height: 42px; padding: 0;
  border: 1px solid var(--aw-line-strong); border-radius: 10px; background: var(--aw-panel);
  color: var(--aw-forest); font-size: 18px; line-height: 1; cursor: pointer;
}
.theme-toggle-btn:hover { border-color: var(--aw-forest); background: var(--aw-off-1); }
.theme-toggle-btn[hidden] { display: none !important; }
.theme-toggle-glyph { display: block; pointer-events: none; }

/* ── Account avatar + dropdown — MOBILE ONLY (revealed in the ≤640px block) ──
   Base state is display:none so the desktop topbar is byte-for-byte unchanged
   (it keeps the email pill + inline Sign out). At ≤640px the wide pill/Sign out
   hide and their content moves behind this round avatar button; the menu is
   position:absolute against .topbar-actions (which gets position:relative only
   inside the media query). */
.account-avatar-btn {
  display: none;
  align-self: flex-start; flex: 0 0 auto;
  width: 42px; height: 42px; min-height: 42px; padding: 0;
  border: 0; border-radius: 999px; background: var(--aw-green);
  color: #fff; font-family: var(--aw-mono); font-weight: 700; font-size: 13px;
  letter-spacing: 0.02em; line-height: 1; cursor: pointer;
  align-items: center; justify-content: center;
}
.account-avatar-btn[hidden] { display: none !important; }
.account-menu {
  display: none; position: absolute; top: 100%; right: 0; margin-top: 8px;
  width: 220px; z-index: 60; overflow: hidden;
  background: var(--aw-panel); border: 1px solid var(--aw-line-strong);
  border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}
.account-menu[hidden] { display: none !important; }
.account-menu-who {
  padding: 10px 12px; border-bottom: 1px solid var(--aw-line);
  font-size: 13px; color: var(--aw-forest); word-break: break-word;
}
.account-menu-who small {
  display: block; margin-bottom: 3px;
  font-family: var(--aw-mono); font-size: 9px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--aw-sage-2);
}
.account-menu-item {
  display: block; width: 100%; padding: 11px 12px; border: 0;
  background: transparent; color: var(--aw-text); font: inherit; font-size: 14px;
  text-align: left; cursor: pointer;
}
.account-menu-item:hover { background: var(--aw-off-1); }
.account-menu-item.danger { color: var(--aw-danger); }

/* ── Phone topbar slimming (operator request) ─────────────────────────────
   ≤640px only: the theme toggle and Sign out earn a topbar slot ONLY on the
   Home screen; inside any module they hide, keeping the section topbar to
   back / title / support / notes / bell (/search for office roles). app.js
   stamps data-active-module on the shell at script eval (before the shell is
   ever un-hidden) and re-stamps it synchronously in loadModule, so this can't
   flash. Keyed on the module stamp — NOT on [hidden] — so it can never fight
   the buttons' own hidden logic (neither control has any today; if one gains
   a [hidden] companion later, its !important still wins over this rule).
   Web (>640px) is untouched: both controls stay visible everywhere.
   EXCEPTION — restricted field roles (installer / pv_contractor / clock_only):
   they have NO Home screen (they land in a fullscreen module and never leave
   it), so keying the hide on "not Home" would strand them with no way to sign
   out or toggle theme. app.js stamps data-restricted="true" for those roles;
   the :not([data-restricted="true"]) guard keeps both controls in their topbar
   on every screen. */
@media (max-width: 640px) {
  .app-shell:not([data-active-module="home"]):not([data-restricted="true"]) #theme-toggle-button,
  .app-shell:not([data-active-module="home"]):not([data-restricted="true"]) #sign-out-button {
    display: none;
  }
}

/* Register client-detail Notes section (team-readable, author-only edit). */
.reg-notes-intro { margin: 0 0 12px; }
.reg-notes-list { display: flex; flex-direction: column; gap: 8px; }
.reg-note-row { border: 1px solid var(--aw-line); border-radius: 10px; padding: 10px 12px; background: var(--aw-panel); display: flex; flex-direction: column; gap: 6px; }
.reg-note-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reg-note-author { font-weight: 700; color: var(--aw-forest); font-size: 13px; }
.reg-note-when { font-family: var(--aw-mono); font-size: 11px; color: var(--aw-sage-2); text-transform: uppercase; letter-spacing: 0.03em; }
.reg-note-bell { font-size: 10px; font-weight: 700; color: var(--aw-green); background: var(--aw-off-1); border: 1px solid var(--aw-line); border-radius: 999px; padding: 2px 8px; text-transform: uppercase; letter-spacing: 0.03em; }
.reg-note-body { color: var(--aw-forest); font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.reg-note-add { margin-top: 16px; border-top: 1px solid var(--aw-line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.reg-note-add-body { width: 100%; border: 1px solid var(--aw-line-strong); border-radius: 10px; padding: 10px 12px; font: inherit; color: var(--aw-forest); resize: vertical; min-height: 52px; }
.reg-note-add-body:focus { outline: none; border-color: var(--aw-forest); }
.reg-note-add-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.reg-note-add [hidden] { display: none !important; }

/* ==========================================================================
   Tasks (the Tasks view inside the Notes & Tasks module). Reuses the aw-* +
   notes primitives; status colours from the palette (grey / amber / green).
   ========================================================================== */
.notes-viewswitch { align-self: flex-start; }
.tasks-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tasks-stats { margin-top: 4px; }

/* List beside composer on wide screens; stacks on mobile (media query below). */
.tasks-main { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: 22px; align-items: start; }
.tasks-list { gap: 8px; }
.tasks-list, .tasks-composer { padding: 16px; }

.task-item { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--aw-line); border-radius: 10px; padding: 10px 12px; background: var(--aw-panel); }
.task-item + .task-item { margin-top: 8px; }
.task-item.is-editing { border-color: var(--aw-forest); box-shadow: 0 0 0 1px var(--aw-forest); }
.task-item.is-done { background: var(--aw-off-3); }

/* Status stepper — a round button that cycles open → in progress → done. */
.task-status-btn {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px;
  border: 2px solid var(--aw-sage); background: var(--aw-panel); cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; position: relative;
}
.task-status-btn:disabled { cursor: default; opacity: 0.7; }
.task-status-btn svg { width: 15px; height: 15px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.task-status-btn.status-in_progress { border-color: var(--aw-amber); }
.task-status-btn.status-in_progress::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--aw-amber); }
.task-status-btn.status-done { border-color: var(--aw-green); background: var(--aw-green); }
.task-status-btn.status-done svg { opacity: 1; }

.task-item-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.task-item-title { color: var(--aw-forest); font-size: 14px; font-weight: 600; line-height: 1.4; word-break: break-word; }
.task-item.is-done .task-item-title { text-decoration: line-through; color: var(--aw-sage-2); font-weight: 500; }
.task-item-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.task-badge { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 10px; text-transform: uppercase; letter-spacing: 0.03em; }
.task-badge.status-open { color: var(--aw-sage-3); background: var(--aw-off-1); border: 1px solid var(--aw-line-strong); }
.task-badge.status-in_progress { color: #8a5a12; background: #fbf1de; border: 1px solid #f0dcb4; }
.task-badge.status-done { color: #226b30; background: #e7f2e4; border: 1px solid #cfe6cb; }
.notes-chip.task-chip-done { color: var(--aw-green); }
/* "New" flag on a freshly-assigned task — understated forest text + lime edge. */
.task-new-chip { font-size: 10px; font-weight: 700; border-radius: 999px; padding: 3px 9px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--aw-forest); background: #f2f8e6; border: 1px solid var(--aw-lime); }

/* Per-task Notes & history thread (append-only). */
.task-group { display: flex; flex-direction: column; }
.task-hist-btn { display: inline-flex; align-items: center; gap: 4px; }
.task-hist-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.task-hist-btn.is-open { color: var(--aw-forest); border-color: var(--aw-forest); background: var(--aw-off-1); }
.task-hist-count { font-weight: 700; }
.task-thread {
  margin: 6px 0 0 14px; border-left: 2px solid var(--aw-line-strong); background: var(--aw-off-3);
  border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
}
.task-thread > .notes-composer-eyebrow { margin: 0; }
.task-thread-list { display: flex; flex-direction: column; gap: 10px; }
.task-thread-note { display: flex; gap: 10px; align-items: flex-start; }
.task-thread-avatar { width: 26px; height: 26px; font-size: 10px; margin-top: 1px; }
.task-thread-note-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.task-thread-note-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.task-thread-note-head strong { color: var(--aw-forest); font-size: 13px; }
.task-thread-when { font-family: var(--aw-mono); font-size: 10px; color: var(--aw-sage-2); text-transform: uppercase; letter-spacing: 0.03em; }
.task-thread-note-body { color: var(--aw-forest); font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.task-thread-add { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--aw-line); padding-top: 10px; }
.task-thread-input { min-height: 46px; }
.task-thread-actions { display: flex; align-items: center; gap: 10px; }
.task-item-right { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.task-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--aw-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex: 0 0 auto;
}

/* Task composer — reuses .notes-body / .field / .notes-remind-* / .notes-link. */
.tasks-composer { display: flex; flex-direction: column; gap: 12px; }
.tasks-title { min-height: 0; resize: none; }
.tasks-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.tasks-fields select, .tasks-fields input { width: 100%; }

/* Register client-detail Notes section (team-readable, author-only edit). */
.reg-notes-intro { margin: 0 0 12px; }
.reg-notes-list { display: flex; flex-direction: column; gap: 8px; }
.reg-note-row { border: 1px solid var(--aw-line); border-radius: 10px; padding: 10px 12px; background: var(--aw-panel); display: flex; flex-direction: column; gap: 6px; }
.reg-note-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reg-note-author { font-weight: 700; color: var(--aw-forest); font-size: 13px; }
.reg-note-when { font-family: var(--aw-mono); font-size: 11px; color: var(--aw-sage-2); text-transform: uppercase; letter-spacing: 0.03em; }
.reg-note-bell { font-size: 10px; font-weight: 700; color: var(--aw-green); background: var(--aw-off-1); border: 1px solid var(--aw-line); border-radius: 999px; padding: 2px 8px; text-transform: uppercase; letter-spacing: 0.03em; }
.reg-note-body { color: var(--aw-forest); font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.reg-note-add { margin-top: 16px; border-top: 1px solid var(--aw-line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.reg-note-add-body { width: 100%; border: 1px solid var(--aw-line-strong); border-radius: 10px; padding: 10px 12px; font: inherit; color: var(--aw-forest); resize: vertical; min-height: 52px; }
.reg-note-add-body:focus { outline: none; border-color: var(--aw-forest); }
.reg-note-add-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.reg-note-add [hidden] { display: none !important; }
/* Register client Tasks rows. */
.reg-task-row.is-done .reg-task-title { text-decoration: line-through; color: var(--aw-sage-2); }
.reg-task-title { font-weight: 600; }
.reg-task-badge { font-size: 10px; font-weight: 700; border-radius: 999px; padding: 2px 8px; text-transform: uppercase; letter-spacing: 0.03em; }
.reg-task-badge.status-open { color: var(--aw-sage-3); background: var(--aw-off-1); border: 1px solid var(--aw-line-strong); }
.reg-task-badge.status-in_progress { color: #8a5a12; background: #fbf1de; border: 1px solid #f0dcb4; }
.reg-task-badge.status-done { color: #226b30; background: #e7f2e4; border: 1px solid #cfe6cb; }

/* Responsive: switch to the mobile day view; stack the panel under it. */
@media (max-width: 760px) {
  .notes-main { grid-template-columns: 1fr; }
  .notes-calendar { display: none; }
  .notes-dayview { display: block; }
  .notes-stats { grid-template-columns: 1fr; }
  .notes-dictate { align-self: stretch; justify-content: center; padding: 14px 20px; font-size: 15px; }
  .notes-item { flex-wrap: wrap; }
  .notes-item-actions { flex-direction: row; }
  .tasks-main { grid-template-columns: 1fr; }
}
/* Narrow phones (iPhone): time field takes its own row, Now button sits below it
   at a comfortable width — guarantees no overlap regardless of the native time
   control's intrinsic width. */
@media (max-width: 420px) {
  .notes-time-field { flex: 1 1 100%; max-width: none; }
  .notes-now-btn { align-self: flex-start; }
}

/* ==========================================================================
   Global search palette (Ctrl+K) — a command-palette overlay. Mirrors the
   help-overlay pattern: fixed scrim + centred panel, Esc / scrim-click closes.
   All colours are design tokens, so dark mode re-tints itself with no override.
   Full-width sheet on phones (≤640px). Sits at z-index 9100, above the help
   overlay (9000) and every module surface.
   ========================================================================== */
.global-search-btn {
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start; flex: 0 0 auto;
  width: 42px; height: 42px; min-height: 42px; padding: 0;
  border: 1px solid var(--aw-line-strong); border-radius: 10px; background: var(--aw-panel);
  color: var(--aw-forest); cursor: pointer;
}
.global-search-btn:hover { border-color: var(--aw-forest); background: var(--aw-off-1); }
.global-search-btn[hidden] { display: none !important; }
.global-search-btn svg { width: 18px; height: 18px; fill: none; stroke: var(--aw-green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.aw-search-scrim {
  position: fixed; inset: 0; z-index: 9100;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 72px 24px 24px; background: rgba(20, 39, 26, 0.55);
}
.aw-search-scrim[hidden] { display: none !important; }

.aw-search-panel {
  width: 100%; max-width: 560px; max-height: 70vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--aw-panel); border: 1px solid var(--aw-line-strong);
  border-radius: 14px; box-shadow: 0 18px 48px -20px rgba(20, 39, 26, 0.45);
}

.aw-search-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--aw-line);
}
.aw-search-icon { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--aw-sage-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aw-search-input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent;
  font: 500 16px/1.3 Arial, Helvetica, sans-serif; color: var(--aw-text);
}
.aw-search-input:focus { outline: none; }
.aw-search-input::placeholder { color: var(--aw-muted); }
.aw-search-esc {
  flex: 0 0 auto; font-family: var(--aw-mono); font-size: 11px; color: var(--aw-sage-2);
  border: 1px solid var(--aw-line-strong); border-radius: 6px; padding: 3px 6px; line-height: 1;
}
/* Real tappable close (✕) — always in the DOM; the desktop "Esc" chip hides it
   on mobile where the chip is not reachable and this becomes a 42px hit target. */
.aw-search-close {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; margin: -4px -4px -4px 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--aw-sage-2); cursor: pointer;
}
.aw-search-close:hover { background: var(--aw-off-1); color: var(--aw-forest); }
.aw-search-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.aw-search-results { overflow-y: auto; padding: 8px; }
.aw-search-group + .aw-search-group { margin-top: 6px; }
.aw-search-group-label {
  margin: 8px 8px 4px; font-family: var(--aw-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--aw-green);
}

.aw-search-row {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
}
.aw-search-row.is-active { background: var(--aw-off-1); }
.aw-search-row-title { font-size: 14px; font-weight: 600; color: var(--aw-forest); }
.aw-search-row-sub { font-size: 12px; color: var(--aw-muted); }

.aw-search-state { margin: 0; padding: 14px 10px; font-size: 13px; color: var(--aw-muted); }

@media (max-width: 640px) {
  .aw-search-scrim { padding: 0; align-items: stretch; }
  /* viewport-fit=cover PWA: pad the sheet head clear of the phone status bar. */
  .aw-search-panel {
    max-width: none; max-height: 100vh; border: 0; border-radius: 0;
    padding-top: calc(env(safe-area-inset-top, 0px) + 6px);
  }
  .aw-search-esc { display: none; }
  .aw-search-close { width: 42px; height: 42px; }
}

/* ── Keyboard-shortcuts help overlay ───────────────────────────────────────
   Mirrors the search scrim's display mechanics: the scrim's show/hide is driven
   PURELY by the [hidden] attribute (the JS never sets inline display), so the
   companion rule below actually wins and Escape / scrim-click / "?"-again close
   it. This is the house rule the old inline `display:flex` cssText violated. */
.aw-help-scrim {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(20, 39, 26, 0.55);
}
.aw-help-scrim[hidden] { display: none !important; }

/* ── In-DOM confirm dialog (core/confirm.js) ───────────────────────────────
   Replaces window.confirm(), which the operator's environment intermittently
   suppresses. Same display mechanics as the search/help scrims: show/hide is
   driven PURELY by the [hidden] attribute (JS never touches inline display),
   so the companion rule below actually wins. All house tokens → re-tints in
   dark with no dedicated override. z-index above search/notif so a confirm
   fired from within any overlay still lands on top. */
.aw-confirm-scrim {
  position: fixed; inset: 0; z-index: 9200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: rgba(20, 39, 26, 0.55);
}
.aw-confirm-scrim[hidden] { display: none !important; }

.aw-confirm-card {
  width: 100%; max-width: 420px; max-height: 85vh; overflow: auto;
  padding: 22px; background: var(--aw-panel);
  border: 1px solid var(--aw-line-strong); border-radius: 14px;
  box-shadow: 0 18px 48px -20px rgba(20, 39, 26, 0.45);
}
.aw-confirm-title { margin: 0; }
.aw-confirm-message {
  margin: 10px 0 0; color: var(--aw-text); font-size: 14px; line-height: 1.5;
  /* Preserve any intentional \n line breaks carried over from the old confirm
     messages, but wrap long lines. */
  white-space: pre-line; overflow-wrap: anywhere;
}
.aw-confirm-actions {
  display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px;
}
.aw-confirm-btn {
  min-height: 42px; padding: 10px 18px; border-radius: 8px;
  font-weight: 700; font-size: 14px; cursor: pointer;
  border: 1px solid var(--aw-border);
}
.aw-confirm-btn:focus-visible { outline: 2px solid var(--aw-green); outline-offset: 2px; }
.aw-confirm-cancel { background: var(--aw-panel); color: var(--aw-text); border-color: var(--aw-border); }
.aw-confirm-cancel:hover { border-color: var(--aw-forest); background: var(--aw-off-1); }
.aw-confirm-ok {
  background: var(--aw-primary); color: #ffffff; border-color: var(--aw-forest);
}
.aw-confirm-ok:hover { background: var(--aw-forest-hover); border-color: var(--aw-forest-hover); }
.aw-confirm-ok.is-danger { background: var(--aw-danger); border-color: var(--aw-danger); color: #ffffff; }
.aw-confirm-ok.is-danger:hover { filter: brightness(0.93); }

@media (max-width: 640px) {
  .aw-confirm-actions { flex-direction: column-reverse; }
  .aw-confirm-btn { width: 100%; }
}

/* ── Notification bell + dropdown ──────────────────────────────────────────
   The topbar bell shares the understated icon-pill of the theme toggle / search
   button (white, forest text, green icon accent, 42px square). Its badge reuses
   .nav-badge (lime/forest) — capped at "9+" by app-side JS. The dropdown mirrors
   the search palette: a full-screen transparent scrim (outside-click closes) with
   a panel anchored under the bell on desktop and a full-width top sheet on mobile.
   All tokens — re-tints itself in dark with no dedicated override. */
.notif-bell-btn {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  align-self: flex-start; flex: 0 0 auto;
  width: 42px; height: 42px; min-height: 42px; padding: 0;
  border: 1px solid var(--aw-line-strong); border-radius: 10px; background: var(--aw-panel);
  color: var(--aw-forest); cursor: pointer;
}
.notif-bell-btn:hover { border-color: var(--aw-forest); background: var(--aw-off-1); }
.notif-bell-btn[hidden] { display: none !important; }
.notif-bell-btn svg { width: 18px; height: 18px; fill: none; stroke: var(--aw-green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Badge floats top-right of the square bell rather than sitting inline. */
.notif-bell-btn .nav-badge { position: absolute; top: -5px; right: -5px; margin: 0; }

.aw-notif-scrim { position: fixed; inset: 0; z-index: 9100; background: transparent; }
.aw-notif-scrim[hidden] { display: none !important; }

.aw-notif-panel {
  position: fixed; top: 64px; right: 24px; width: min(380px, calc(100vw - 24px));
  max-height: min(70vh, 560px); display: flex; flex-direction: column; overflow: hidden;
  background: var(--aw-panel); border: 1px solid var(--aw-line-strong);
  border-radius: 14px; box-shadow: 0 18px 48px -20px rgba(20, 39, 26, 0.45);
}
.aw-notif-head-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--aw-line);
}
.aw-notif-heading { margin: 0; font: 700 14px/1 "Inter", Arial, sans-serif; color: var(--aw-forest); }
.aw-notif-markall {
  border: 0; background: transparent; cursor: pointer; padding: 4px 6px;
  font-family: var(--aw-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--aw-green);
}
.aw-notif-markall:hover { text-decoration: underline; }
.aw-notif-markall[hidden] { display: none !important; }
.aw-notif-head-actions { display: flex; align-items: center; gap: 6px; }
/* Real tappable close (✕) — always rendered; a 42px hit target on mobile. */
.aw-notif-close {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; margin: -4px -4px -4px 0;
  border: 0; border-radius: 8px; background: transparent; color: var(--aw-sage-2); cursor: pointer;
}
.aw-notif-close:hover { background: var(--aw-off-1); color: var(--aw-forest); }
.aw-notif-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.aw-notif-list { overflow-y: auto; padding: 6px; }
.aw-notif-empty { margin: 0; padding: 22px 12px; text-align: center; font-size: 13px; color: var(--aw-muted); }

.aw-notif-row {
  display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left;
  padding: 10px; border: 0; border-radius: 10px; background: transparent; cursor: pointer;
}
.aw-notif-row:hover { background: var(--aw-off-1); }
.aw-notif-row.is-unread { background: color-mix(in srgb, var(--aw-lime) 8%, var(--aw-panel)); }
.aw-notif-row.is-unread:hover { background: color-mix(in srgb, var(--aw-lime) 14%, var(--aw-panel)); }
.aw-notif-dot {
  flex: 0 0 auto; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%;
  background: var(--aw-lime);
}
.aw-notif-dot.is-empty { background: transparent; }
.aw-notif-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.aw-notif-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.aw-notif-tag {
  flex: 0 0 auto; font-family: var(--aw-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--aw-sage-2);
  border: 1px solid var(--aw-line-strong); border-radius: 5px; padding: 1px 5px; line-height: 1.4;
}
.aw-notif-tag.kind-alert, .aw-notif-tag.kind-bounce { color: var(--aw-amber); border-color: color-mix(in srgb, var(--aw-amber) 45%, var(--aw-line-strong)); }
.aw-notif-tag.kind-clock { color: var(--aw-green); border-color: color-mix(in srgb, var(--aw-green) 45%, var(--aw-line-strong)); }
.aw-notif-title {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13.5px; color: var(--aw-forest);
}
.aw-notif-row.is-unread .aw-notif-title { font-weight: 700; }
.aw-notif-body {
  font-size: 12px; color: var(--aw-muted); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.aw-notif-time { flex: 0 0 auto; font-size: 11px; color: var(--aw-sage-2); white-space: nowrap; margin-top: 2px; }

@media (max-width: 640px) {
  .aw-notif-panel {
    top: 0 !important; right: 0 !important; left: 0; width: 100%;
    max-height: 100vh; border: 0; border-radius: 0;
    border-bottom: 1px solid var(--aw-line-strong);
    /* viewport-fit=cover PWA: clear the phone status bar (top-anchored sheet). */
    padding-top: calc(env(safe-area-inset-top, 0px) + 6px);
  }
  .aw-notif-close { width: 42px; height: 42px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   LOADING ANIMATIONS — boot/login splash + in-app module loader
   ───────────────────────────────────────────────────────────────────────
   Both are the operator-approved designs. The splash is committed-dark (its
   own forest ground, hard-coded brand colours) regardless of theme; it paints
   from index.html before app.js runs. The module loader theming rides the
   design tokens so it works light/dark; app.js swaps the logo variant.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Boot / login splash ─────────────────────────────────────────────── */
.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Matches the mockup .stage ground — deep forest, lifted at top-left. */
  background: radial-gradient(120% 130% at 20% 0%, #1b2c20 0%, #0f1613 62%);
  opacity: 1;
  transition: opacity 0.25s ease;
}
.boot-splash.is-leaving { opacity: 0; }
.boot-splash[hidden] { display: none !important; }

/* ── In-app module loader — logo charge line ─────────────────────────── */
/* Shared by the module loader (#module-root) AND the boot splash (index.html),
   so every loading state in the app is the same logo + green charge bar. */
/* The loader is a normal-flow flex child of #module-root (not an overlay), so it
   needs no positioning context — it simply centres itself in the emptied area. */
.mload {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(58vh, 420px);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.mload.is-in { opacity: 1; }
.mload.is-out { opacity: 0; }
.mload-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.mload-logo { width: 200px; height: auto; animation: awMlLogo 2.8s ease-in-out infinite; }
.mload-track { position: relative; width: 200px; height: 4px; border-radius: 99px; background: #2a3a2e; }
.mload-bar { position: absolute; left: 0; top: 0; height: 4px; border-radius: 99px; background: linear-gradient(90deg, var(--aw-green), var(--aw-lime)); animation: awMlSweep 2.8s ease-in-out infinite; }
.mload-spark { position: absolute; top: -3px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--aw-lime); box-shadow: 0 0 12px 3px rgba(132, 189, 45, .65); animation: awMlSpark 2.8s ease-in-out infinite; }

@keyframes awMlSweep { 0% { width: 0; } 70% { width: 200px; } 82%, 100% { width: 200px; } }
@keyframes awMlSpark { 0% { transform: translateX(0); opacity: 0; } 12% { opacity: 1; } 70% { transform: translateX(200px); opacity: 1; } 80%, 100% { transform: translateX(200px); opacity: 0; } }
@keyframes awMlLogo { 0%, 8% { opacity: .45; } 70%, 100% { opacity: 1; } }

/* Reduced motion: freeze both loaders to their rest state (bar filled, logo
   lit) and drop the fades. The boot splash's minimum-display also shortens to 0
   in app.js, so reduced-motion users get the fastest possible path. */
@media (prefers-reduced-motion: reduce) {
  .boot-splash * { animation-duration: .01s !important; animation-iteration-count: 1 !important; }
  .boot-splash { transition: none; }
  .mload, .mload.is-in, .mload.is-out { transition: none; }
  .mload-logo { animation: none; opacity: 1; }
  .mload-bar { animation: none; width: 200px; }
  .mload-spark { animation: none; opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   DARK COLOUR SCHEME
   ───────────────────────────────────────────────────────────────────────
   Driven by the data-theme attribute on <html>: the pre-paint script in
   index.html stamps it before first paint (localStorage pref, OS fallback) and
   core/theme.js owns it after that (topbar toggle + staff.theme_pref sync).
   Light mode is untouched — every rule below is scoped to
   :root[data-theme="dark"]. The bulk of the
   flip is done by re-pointing the design-system TOKENS to a dark palette; the
   targeted rules that follow only exist because the source hard-codes a few
   status-chip / surface literals outside var(). House rule still holds: deep
   desaturated forest carries authority, lime is the single accent, and we
   NEVER tint a background with a saturated green.

   Key divergence: --aw-forest is used ~157× as an authority TEXT colour and
   only ~21× as a solid FILL. In dark it therefore flips to a light off-white
   text colour, while the fills (buttons/badges/sidebar/login panel) were moved
   onto the dedicated --aw-primary token, which stays a lifted forest SURFACE.
   ═══════════════════════════════════════════════════════════════════════ */
  :root[data-theme="dark"] {
    /* Tell the UA to render native controls (checkboxes, radios, unstyled
       selects, scrollbars, date pickers) with a dark canvas — otherwise they
       paint white on the dark page. This is the correct fix for the native
       checkboxes/inputs the author CSS never backgrounds. */
    color-scheme: dark;

    /* Surfaces — very dark desaturated forest, never pure black. page is the
       app backdrop; panel/off-3 are cards; off-1/off-2 are lifted insets. */
    --aw-page:          #0f1613;
    --aw-panel:         #161f1a;
    --aw-off-3:         #161f1a;
    --aw-off-1:         #1c2620;
    --aw-off-2:         #212c25;
    /* Phantom token: leads/support source use var(--aw-off-white,#f3f5f0) but
       --aw-off-white is declared NOWHERE, so it always fell back to the light
       literal even in dark. Declaring it here (light leaves it undefined →
       unchanged) flips ~15 thead/inset/hover surfaces in one shot. */
    --aw-off-white:     #1c2620;

    /* Primary FILL + its hover (buttons, sidebar, badges, login panel). */
    --aw-primary:       #223528;
    --aw-forest-hover:  #2c4132;

    /* Authority + body TEXT become the off-whites; muted text = lifted sages. */
    --aw-forest:        #e8ede6;
    --aw-text:          #e4eae1;
    --aw-muted:         #9aa49b;
    --aw-sage:          #aab0a6;
    --aw-sage-2:        #99a094;
    --aw-sage-3:        #838a80;

    /* Hairlines — low-contrast dark greys. */
    --aw-line:          #2a352d;
    --aw-line-strong:   #384539;
    --aw-border:        #313c36;

    /* Accents — lime essentially as-is; greens/amber/red lifted so status
       stays legible on dark. --aw-danger is a compromise: bright enough as
       text on dark, still solid enough to carry white text as a fill. */
    --aw-lime:          #92cf3a;
    --aw-green:         #52a866;
    --aw-dark-green:    #4bb26f;
    --aw-amber:         #eaa64a;
    --aw-danger:        #e0645d;
    --aw-green-legacy:  #16b45c;
  }

  /* ── Logo chips ────────────────────────────────────────────────────────
     The AWPower mark is a dark/colour asset that lives on a white chip. Those
     chip backgrounds flipped to the dark panel token above, which would hide
     the logo — pin them back to a light chip (asset unchanged). The login-form
     mark had no chip (it relied on the white form panel), so give it one. */
  :root[data-theme="dark"] .brand-block,
  :root[data-theme="dark"] .auth-screen .login-brand-panel .brand-logo {
    background: #eef0ec;
  }
  :root[data-theme="dark"] .auth-screen .aw-logo .brand-logo {
    background: #eef0ec;
    padding: 10px 14px;
    border-radius: 10px;
  }

  /* ── Off-white TEXT that sits on the (still-dark) primary fills ──────────
     A handful of labels use an off-white token as their COLOUR on a forest
     tile; those tokens are now dark surfaces, so restore a light text here. */
  :root[data-theme="dark"] .kpi-tile.kpi-hero .kpi-label,
  :root[data-theme="dark"] .detail-hero-subtext {
    color: rgba(255, 255, 255, 0.72);
  }

  /* ── Bright white hover overlay → subtle light film ────────────────────── */
  :root[data-theme="dark"] .status-pill-btn:hover {
    background: rgba(255, 255, 255, 0.06);
  }

  /* ── Register table neutral surfaces + hairlines (colours only) ────────── */
  :root[data-theme="dark"] .register-table th,
  :root[data-theme="dark"] .register-table td {
    border-bottom-color: var(--aw-line);
  }
  :root[data-theme="dark"] .register-table th,
  :root[data-theme="dark"] .clickable-row:hover,
  :root[data-theme="dark"] .clickable-row:focus {
    background: #1b2721;
  }

  /* ── Neutral inset panels (were #fbfcfb) ───────────────────────────────── */
  :root[data-theme="dark"] .insp-head,
  :root[data-theme="dark"] .insp-mppt-block,
  :root[data-theme="dark"] .aud-head,
  :root[data-theme="dark"] .sg-mppt-block {
    background: #1a231d;
  }

  /* ── Quotex selected sub-row (was a pale lime tint) ────────────────────── */
  :root[data-theme="dark"] .quotex-sub-row.is-selected {
    background: #1d2b1a;
  }

  /* ══ STATUS CHIPS — each family gets a dark tint + a lifted text colour ══
     so green / amber / red / blue remain clearly distinguishable on dark. */

  /* Amber / warning */
  :root[data-theme="dark"] .status-badge.proposed,
  :root[data-theme="dark"] .pending-proposal-badge,
  :root[data-theme="dark"] .soon-flag,
  :root[data-theme="dark"] .flag-due-soon,
  :root[data-theme="dark"] .due-flag.flag-due-soon,
  :root[data-theme="dark"] .client-flag.flag-due-soon,
  :root[data-theme="dark"] .due-type-chip.due-type-due-soon,
  :root[data-theme="dark"] .quote-status-awaiting,
  :root[data-theme="dark"] .quote-delivery-complained,
  :root[data-theme="dark"] .chip-follow,
  :root[data-theme="dark"] .recon-variance,
  :root[data-theme="dark"] .recon-extra,
  :root[data-theme="dark"] .recon-extra > span,
  :root[data-theme="dark"] .jobcard-state.draft,
  :root[data-theme="dark"] .stat-cell.stat-due-soon,
  :root[data-theme="dark"] .detail-status-banner.banner-due-soon,
  :root[data-theme="dark"] .task-badge.status-in_progress,
  :root[data-theme="dark"] .reg-task-badge.status-in_progress,
  :root[data-theme="dark"] .issue-badge.sev-medium,
  :root[data-theme="dark"] .issue-badge.status-acknowledged,
  :root[data-theme="dark"] .reg-uncovered-banner,
  :root[data-theme="dark"] .leads-status-chip.status-needs_quote,
  :root[data-theme="dark"] .leads-status-chip.status-quoted,
  :root[data-theme="dark"] .leads-status-chip.status-on_hold,
  :root[data-theme="dark"] .leads-urgency-badge,
  :root[data-theme="dark"] .leads-turn-tag.is-us,
  :root[data-theme="dark"] .leads-move-chip,
  :root[data-theme="dark"] .leads-count.is-stale,
  :root[data-theme="dark"] .leads-flag-chip.is-stale,
  :root[data-theme="dark"] .leads-flag-chip.is-wait,
  :root[data-theme="dark"] .support-pri-chip.is-high,
  :root[data-theme="dark"] .support-reply-chip.is-us,
  :root[data-theme="dark"] .support-row.is-soon {
    background: #372a14 !important;
    color: #e8b466 !important;
    border-color: #54411f;
  }
  /* status-quoted carries only amber TEXT (transparent bg in source) — keep it
     transparent, just lift the hard-coded #8a5410 so it reads on dark. */
  :root[data-theme="dark"] .leads-status-chip.status-quoted {
    background: transparent !important;
    color: #e8b466 !important;
  }
  /* .support-row.is-soon is a container: surface tint only, text untouched. */
  :root[data-theme="dark"] .support-row.is-soon {
    background: #241d10 !important;
    color: inherit !important;
  }
  /* recon-extra is a container whose coloured text lives on a child span */
  :root[data-theme="dark"] .recon-extra { color: inherit !important; }

  /* Danger / red */
  :root[data-theme="dark"] .kpi-strip .kpi-tile.kpi-danger,
  :root[data-theme="dark"] .register-table tr.clickable-row.row-overdue,
  :root[data-theme="dark"] .register-table tr.clickable-row.row-overdue:hover,
  :root[data-theme="dark"] .register-table tr.clickable-row.row-overdue:focus-visible,
  :root[data-theme="dark"] .flag-overdue,
  :root[data-theme="dark"] .due-flag.flag-overdue,
  :root[data-theme="dark"] .client-flag.flag-overdue,
  :root[data-theme="dark"] .due-type-chip.due-type-overdue,
  :root[data-theme="dark"] .quote-status-declined,
  :root[data-theme="dark"] .quote-delivery-bounced,
  :root[data-theme="dark"] .chip-extra,
  :root[data-theme="dark"] .quotex-del:hover,
  :root[data-theme="dark"] .stat-cell.stat-overdue,
  :root[data-theme="dark"] .detail-status-banner.banner-overdue,
  :root[data-theme="dark"] .services-table tr.svc-overdue td,
  :root[data-theme="dark"] .issue-badge.sev-high,
  :root[data-theme="dark"] .issue-badge.status-open,
  :root[data-theme="dark"] .ua-access.ua-access-off,
  :root[data-theme="dark"] .ua-access.ua-access-off:hover,
  :root[data-theme="dark"] .support-form-error,
  :root[data-theme="dark"] .leads-flag-chip.is-overdue,
  :root[data-theme="dark"] .leads-count.is-overdue {
    background: #3a1e1e;
    color: #ef9992;
    border-color: #582d2d;
  }
  /* Danger CONTAINERS (rows/cards/stat) — tint the surface only, never the
     text, so the row's own content colours stay intact. */
  :root[data-theme="dark"] .leads-row.is-overdue,
  :root[data-theme="dark"] .leads-card.is-overdue,
  :root[data-theme="dark"] .support-row.is-overdue,
  :root[data-theme="dark"] .support-dash-panel .aw-stat-card.is-danger {
    background: #241717;
    border-color: #582d2d;
  }

  /* Green / success */
  :root[data-theme="dark"] .credits-badge,
  :root[data-theme="dark"] .status-badge.active,
  :root[data-theme="dark"] .quote-status-accepted,
  :root[data-theme="dark"] .foxess-panel,
  :root[data-theme="dark"] .ua-access.ua-access-on,
  :root[data-theme="dark"] .task-badge.status-done,
  :root[data-theme="dark"] .reg-task-badge.status-done,
  :root[data-theme="dark"] .recon-credit,
  :root[data-theme="dark"] .recon-credit-done,
  :root[data-theme="dark"] .jobcard-state.signed,
  :root[data-theme="dark"] .issue-badge.sev-low,
  :root[data-theme="dark"] .leads-flag-chip.is-due,
  :root[data-theme="dark"] .leads-flag-chip.is-new,
  :root[data-theme="dark"] .leads-closed-banner.is-sold,
  :root[data-theme="dark"] .sched-daychip,
  :root[data-theme="dark"] .timesheet .lv-chip-approved {
    background: #153021 !important;
    color: #6cc187 !important;
    border-color: #284935;
  }
  :root[data-theme="dark"] .quote-delivery-delivered { border-color: #284935; }
  /* keep the recon credit's dashed edge on the (lifted) green token */
  :root[data-theme="dark"] .recon-credit { border-style: dashed; border-color: var(--aw-green) !important; }

  /* Blue / info */
  :root[data-theme="dark"] .quote-status-draft,
  :root[data-theme="dark"] .quote-status-sent,
  :root[data-theme="dark"] .chip-quote {
    background: #182a40;
    color: #84b6e8;
  }

  /* Small solid status DOTS — lift the saturated literals for dark. */
  :root[data-theme="dark"] .banner-due-soon .banner-dot,
  :root[data-theme="dark"] .banner-item.item-due-soon .banner-item-dot { background: #eaa64a; }
  :root[data-theme="dark"] .banner-ok .banner-dot { background: #52a866; }

  /* ═══════════════════════════════════════════════════════════════════════
     MODULE STYLE-BLOCK GAPS — leads / support / schedule / timesheet / signoff
     ship their CSS as JS-injected <style> blocks (per-module index.js), so
     the styles.css sweep never touched them. Three light forms leaked through:
       (1) hard-coded neutral surfaces (#fff / #fbfcfb / #f6f8f3 / #f3f5f0);
       (2) var(--aw-forest) used as a FILL — dark flips it to a light TEXT
           colour, so those fills rendered near-white with white text;
       (3) status tints (handled above by extending the chip groups).
     All fixed here by attribute-scoped overrides that win on specificity.
     ═══════════════════════════════════════════════════════════════════════ */

  /* ── Native form controls (selects/inputs/textarea) — monitoring, mapping,
     fielddocs and the module tables leave many native controls unstyled, so
     they paint the browser's white default on a dark page. Give every text
     control a dark surface; class rules below (0,3,0) still win where set. */
  :root[data-theme="dark"] select,
  :root[data-theme="dark"] textarea,
  :root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="image"]) {
    background-color: var(--aw-panel);
    color: var(--aw-text);
  }

  /* ── Leads & Support detail/form controls — the bare `select` selector above
     ties `.leads .leads-inline-field select` / `.support .support-inline-field
     select` (0,2,1) and loses to the later JS-injected module <style>, so those
     inline-field selects (leads: Assign-to / Status / Urgency + the Add/Edit form's
     Source/Urgency/Owner; support: its inline-field selects) painted near-white
     text on the hard-coded #fff surface → ~1.2:1, invisible on dark. (The input
     variants dodge this because the :not() chain above inflates their specificity
     to (0,9,1).) Re-specify at (0,4,1) so the dark surface + light text win. */
  :root[data-theme="dark"] .leads .leads-inline-field select,
  :root[data-theme="dark"] .leads .leads-inline-field input,
  :root[data-theme="dark"] .leads .leads-inline-field textarea,
  :root[data-theme="dark"] .support .support-inline-field select,
  :root[data-theme="dark"] .support .support-inline-field input,
  :root[data-theme="dark"] .support .support-inline-field textarea {
    background-color: var(--aw-panel);
    color: var(--aw-text);
  }

  /* ── Primary FILLS (source used var(--aw-forest)/--g/--qx-forest as a bg) →
     move onto the dark primary surface, white text already set in source. */
  :root[data-theme="dark"] .leads-help-q,
  :root[data-theme="dark"] .support-help-q,
  :root[data-theme="dark"] .leads-help-flow .leads-help-step:last-child,
  :root[data-theme="dark"] .leads-settings-btn.is-active,
  :root[data-theme="dark"] .leads-owner,
  :root[data-theme="dark"] .leads-chip.is-active,
  :root[data-theme="dark"] .leads-status-chip.status-won,
  :root[data-theme="dark"] .leads-avatar.is-forest,
  :root[data-theme="dark"] .support-chip.is-active,
  :root[data-theme="dark"] .support-avatar.is-forest,
  :root[data-theme="dark"] .sched-who,
  :root[data-theme="dark"] .sched-chip.is-active,
  :root[data-theme="dark"] .sched-toggle.is-active,
  :root[data-theme="dark"] .timesheet .ts-person.is-active,
  :root[data-theme="dark"] .quotex-step.is-active .quotex-step-dot,
  :root[data-theme="dark"] .sg-n,
  :root[data-theme="dark"] .sg-success-tick,
  :root[data-theme="dark"] .sg-toggle button.active,
  :root[data-theme="dark"] .sg-chip.active,
  :root[data-theme="dark"] .sg-primary {
    background: var(--aw-primary) !important;
    border-color: var(--aw-primary) !important;
    color: #fff !important;
  }
  /* the active quote-step keeps its lime ring (border) — restore it. */
  :root[data-theme="dark"] .quotex-step.is-active .quotex-step-dot {
    border-color: var(--aw-lime) !important;
  }

  /* ── Neutral CARD / BUTTON / TABLE surfaces (were #fff) → panel. Plain
     (0,3,0) selectors beat the source bases (0,2,0) yet leave source :hover
     rules (0,4,0) intact, so button hover feedback still works. */
  :root[data-theme="dark"] .leads-help,
  :root[data-theme="dark"] .leads-settings-btn,
  :root[data-theme="dark"] .leads-settings-card,
  :root[data-theme="dark"] .leads-dash-kpis .aw-stat-card,
  :root[data-theme="dark"] .leads-strip-bar,
  :root[data-theme="dark"] .leads-strip-toggle,
  :root[data-theme="dark"] .leads-dash-panel,
  :root[data-theme="dark"] .leads-table,
  :root[data-theme="dark"] .leads-act,
  :root[data-theme="dark"] .leads-detail-row,
  :root[data-theme="dark"] .leads-chip,
  :root[data-theme="dark"] .leads-linkbtn,
  :root[data-theme="dark"] .leads-picker-row,
  :root[data-theme="dark"] .leads-review-menu,
  :root[data-theme="dark"] .leads-turn-tag.is-client,
  :root[data-theme="dark"] .leads-board-row,
  :root[data-theme="dark"] .support-strip-bar,
  :root[data-theme="dark"] .support-strip-toggle,
  :root[data-theme="dark"] .support-dash-panel,
  :root[data-theme="dark"] .support-dash-panel .aw-stat-card,
  :root[data-theme="dark"] .support-chip,
  :root[data-theme="dark"] .support-table,
  :root[data-theme="dark"] .support-act,
  :root[data-theme="dark"] .support-detail-row,
  :root[data-theme="dark"] .support-reply-chip.is-client,
  :root[data-theme="dark"] .support-help,
  :root[data-theme="dark"] .support-form-card,
  :root[data-theme="dark"] .support-form-x,
  :root[data-theme="dark"] .sched-chip,
  :root[data-theme="dark"] .sched-toggle,
  :root[data-theme="dark"] .sched-card,
  :root[data-theme="dark"] .sched-go,
  :root[data-theme="dark"] .sched-modal,
  :root[data-theme="dark"] .timesheet .ts-person,
  :root[data-theme="dark"] .timesheet .ts-shift,
  :root[data-theme="dark"] .timesheet .ts-edit-btn,
  :root[data-theme="dark"] .timesheet .ts-editor-cancel,
  :root[data-theme="dark"] .timesheet .ts-selfie-btn,
  :root[data-theme="dark"] .timesheet .lv-btn,
  :root[data-theme="dark"] .timesheet .lv-mini-btn,
  :root[data-theme="dark"] .timesheet .lv-req-row,
  :root[data-theme="dark"] .timesheet .lv-hist-row,
  :root[data-theme="dark"] .sg-saved-item,
  :root[data-theme="dark"] .sg-success,
  :root[data-theme="dark"] .sg-card,
  :root[data-theme="dark"] .sg-chip,
  :root[data-theme="dark"] .sg-rm {
    background: var(--aw-panel);
  }
  /* segmented toggle segments (were #fff) — inactive uses a lifted inset. */
  :root[data-theme="dark"] .sg-toggle button {
    background: var(--aw-off-1);
  }
  /* signoff checkboxes: the module's .signoff input{background:#fff} also paints
     the native scope/ack checkboxes white; the global control rule skips
     checkboxes, so dark them here (accent-color still draws the tick). */
  :root[data-theme="dark"] .signoff input[type="checkbox"],
  :root[data-theme="dark"] .signoff input[type="radio"] {
    background-color: var(--aw-panel);
  }

  /* ── Subtle insets / hovers / neutral chips (#fbfcfb / #fbfdf7 / #f6f8f3 /
     literal #f3f5f0) → the off-1 inset surface. */
  :root[data-theme="dark"] .leads-help-summary:hover,
  :root[data-theme="dark"] .support-help-summary:hover,
  :root[data-theme="dark"] .leads-help-step,
  :root[data-theme="dark"] .leads-closed-banner.is-settled,
  :root[data-theme="dark"] .leads-flag-chip.is-soon,
  :root[data-theme="dark"] .leads-flag-chip.is-grab,
  :root[data-theme="dark"] .leads-today-n,
  :root[data-theme="dark"] .leads-today-clear,
  :root[data-theme="dark"] .sg-head,
  :root[data-theme="dark"] .sg-strmeas-row {
    background: var(--aw-off-1);
  }

  /* Softer, darker elevation — the forest/slate box-shadows in the source are
     already near-invisible on a dark page; nudge the most prominent surfaces
     to a deeper, softer shadow rather than the light-mode lift. */
  :root[data-theme="dark"] .aw-card,
  :root[data-theme="dark"] .kpi-tile,
  :root[data-theme="dark"] .detail-status-banner {
    box-shadow: 0 2px 10px -6px rgba(0, 0, 0, 0.55);
  }

  /* ── Clock + Leave (field modules; CSS injected from their JS) ──────────
     Both modules append their own <style> at mount (data-clock-styles /
     data-leave-styles) with hard-coded light literals, so the token flip above
     never reaches them — they were the two modules the earlier dark sweep
     missed. Every literal is re-pointed here. NOTE the forest FILL trap: the
     source fills the Clock-in hero, the confirm-yes button, the IN chip and the
     Leave submit with var(--aw-forest); in dark that token is a near-white TEXT
     colour, so those controls painted light-with-white-text (the invisible
     "Clock in" button from the screenshot). Re-point the fill + border to the
     dedicated --aw-primary surface. White card surfaces → --aw-panel; amber
     notices/chips → a dark amber tint (color-mix on the amber token, so the
     print guard reverts them cleanly). The persons segmented control needs
     nothing: it consumes the shared .aw-segmented / .aw-seg primitive, already
     token-driven and dark-safe. */

  /* Forest-FILL controls → --aw-primary (fill + border). */
  :root[data-theme="dark"] .clock-button,
  :root[data-theme="dark"] .clock-confirm-yes,
  :root[data-theme="dark"] .clock-chip.in,
  :root[data-theme="dark"] .leave-submit {
    background: var(--aw-primary);
    border-color: var(--aw-primary);
  }

  /* White card SURFACES (#fff) → dark panel. */
  :root[data-theme="dark"] .clock-button.is-out,
  :root[data-theme="dark"] .clock-confirm-yes.is-out,
  :root[data-theme="dark"] .clock-confirm-no,
  :root[data-theme="dark"] .clock-entry,
  :root[data-theme="dark"] .clock-day,
  :root[data-theme="dark"] .leave-input,
  :root[data-theme="dark"] .leave-req,
  :root[data-theme="dark"] .leave-cancel {
    /* background-COLOR, not the `background` shorthand: the shorthand resets
       background-repeat/-size/-position to their initial values, which made the
       select caret (an SVG background-image) tile across the whole <select> in
       dark mode. Setting only the colour leaves the caret's positioning intact. */
    background-color: var(--aw-panel);
  }

  /* Clock-OUT amber text (source #8a5410) → the lifted amber token. */
  :root[data-theme="dark"] .clock-button.is-out .clock-button-main,
  :root[data-theme="dark"] .clock-confirm-yes.is-out {
    color: var(--aw-amber);
  }

  /* Amber active-press surfaces (source #fdf4e6) → a lifted dark inset. */
  :root[data-theme="dark"] .clock-button.is-out:not(:disabled):active,
  :root[data-theme="dark"] .clock-confirm-yes.is-out:not(:disabled):active {
    background: var(--aw-off-2);
  }

  /* Amber notices + OUT / pending chips → dark amber tint + lifted amber text. */
  :root[data-theme="dark"] .clock-banner,
  :root[data-theme="dark"] .clock-geo-warn,
  :root[data-theme="dark"] .clock-chip.out,
  :root[data-theme="dark"] .leave-warn,
  :root[data-theme="dark"] .leave-chip-pending {
    background: color-mix(in srgb, var(--aw-amber) 15%, var(--aw-panel));
    color: var(--aw-amber);
  }
  :root[data-theme="dark"] .clock-banner strong { color: var(--aw-amber); }

  /* Approved leave chip: source is a white outline chip (green text + border) →
     a subtle green tint so it stays distinct on the (now dark) request card. */
  :root[data-theme="dark"] .leave-chip-approved {
    background: color-mix(in srgb, var(--aw-green) 15%, var(--aw-panel));
  }
  /* Declined leave chip (source #fdeceb) → a dark danger tint. */
  :root[data-theme="dark"] .leave-chip-declined {
    background: color-mix(in srgb, var(--aw-danger) 15%, var(--aw-panel));
  }

  /* Leave select-caret SVG is stroked in dark forest (%2314271a) → near-invisible
     on the dark input; re-issue it with a light stroke. Repeat/position/size are
     restated so the caret stays a single glyph even if a `background` shorthand
     elsewhere resets them (see the background-color note above). */
  :root[data-theme="dark"] select.leave-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8ede6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
  }

  /* ── PRINT GUARD ────────────────────────────────────────────────────────
     Printing from a dark page must never lay down dark ink-heavy surfaces.
     Re-point the palette TOKENS back to their light values while printing;
     this is a token re-set only (no layout/geometry), so every var()-driven
     surface reverts to light and the targeted dark overrides above (which use
     the same tokens or dark literals) fall back to a printable light sheet. */
  @media print {
    :root[data-theme="dark"] {
      --aw-page:          #ffffff;
      --aw-panel:         #ffffff;
      --aw-off-3:         #fbfdf7;
      --aw-off-1:         #f3f5f0;
      --aw-off-2:         #eef0ec;
      --aw-off-white:     #f3f5f0;
      --aw-primary:       #14271a;
      --aw-forest-hover:  #0d1a11;
      --aw-forest:        #14271a;
      --aw-text:          #14271a;
      --aw-muted:         #6c726a;
      --aw-sage:          #9aa099;
      --aw-sage-2:        #6c726a;
      --aw-sage-3:        #4a4f49;
      --aw-line:          #e2e7de;
      --aw-line-strong:   #c2ccbf;
      --aw-border:        #d8e0da;
      --aw-lime:          #84bd2d;
      --aw-green:         #2f7a3c;
      --aw-dark-green:    #2f7a3c;
      --aw-amber:         #e0902a;
      --aw-danger:        #b4451f;
      --aw-green-legacy:  #009846;
    }
    /* dark overrides that used dark literals (not tokens) — re-assert light. */
    :root[data-theme="dark"] .leads-help-q,
    :root[data-theme="dark"] .leads-owner,
    :root[data-theme="dark"] .leads-chip.is-active,
    :root[data-theme="dark"] .leads-status-chip.status-won,
    :root[data-theme="dark"] .support-chip.is-active,
    :root[data-theme="dark"] .sched-who,
    :root[data-theme="dark"] .sg-n,
    :root[data-theme="dark"] .sg-success-tick {
      background: #14271a !important;
      border-color: #14271a !important;
    }
    :root[data-theme="dark"] .leads-row.is-overdue,
    :root[data-theme="dark"] .leads-card.is-overdue,
    :root[data-theme="dark"] .support-row.is-overdue,
    :root[data-theme="dark"] .support-dash-panel .aw-stat-card.is-danger,
    :root[data-theme="dark"] .support-row.is-soon {
      background: #ffffff !important;
    }
  }


/* --------------------------------------------------------- Home: Business Pulse */
/* No own margins — .home-screen's 12px grid gap owns the vertical rhythm, and
   extra margins here made the pulse band sit wider from its neighbours than
   every other section boundary. */
.home-pulse {
  margin: 0;
}

/* minmax(0,1fr) everywhere: the one-line cards contain nowrap text, and bare
   1fr tracks refuse to shrink below that min-content — on phones that blew the
   page canvas out to ~600px and broke the whole layout horizontally. */
.home-pulse-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

/* Pulse cards run as ONE compact line each (label · value · sub) — a strip of
   glanceable numbers, not full stat tiles. Scoped here so the .aw-stat-card
   primitive keeps its stacked layout everywhere else. */
.home-pulse-grid .aw-stat-card {
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
  padding: 6px 12px;
  display: flex;
  flex-direction: row; /* the primitive stacks (column); the pulse strip runs inline */
  align-items: baseline;
  gap: 8px;
  min-height: 0;
}
.home-pulse-grid .aw-stat-card > span {
  flex: 1 1 auto;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-pulse-grid .aw-stat-card > strong {
  font-size: 14px;
  white-space: nowrap;
}
.home-pulse-grid .aw-stat-card > em {
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 45%;
}

.home-pulse-grid .aw-stat-card:hover {
  border-color: var(--aw-sage);
}

.home-pulse-grid .aw-stat-card.is-accent:hover {
  border-color: var(--aw-lime);
}

.home-pulse-grid .aw-stat-card.is-danger {
  border-color: var(--aw-danger);
}

.home-pulse-grid .aw-stat-card.is-danger > strong {
  color: var(--aw-danger);
}

@media (max-width: 640px) {
  /* Single column on phones: five slim one-line rows (~29px each) read cleanly;
     two nowrap columns can't fit a 375px screen without truncating both. */
  .home-pulse-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
}

/* ── Desktop Navigation Labels ───────────────────────────────────────────── */
.app-shell {
  transition: grid-template-columns 0.15s ease;
}
/* :not(.is-fullscreen) — the fullscreen shell (quote builder, field jobs…)
   collapses to ONE column at line ~673; this later, equal-specificity rule was
   re-inserting a 190px phantom column and breaking every fullscreen module. */
.app-shell[data-nav-labels="on"]:not(.is-fullscreen) {
  grid-template-columns: 190px minmax(0, 1fr);
}
.app-shell[data-nav-labels="on"] .nav-item {
  display: flex;
  justify-content: flex-start;
  padding: 0 16px;
  gap: 12px;
}
.app-shell[data-nav-labels="on"] .nav-label {
  position: static;
  opacity: 1;
  transform: none;
  background: transparent;
  padding: 0;
  pointer-events: auto;
  flex: 1;
  text-align: left;
  font-weight: 500;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--aw-sage-2);
}
.app-shell[data-nav-labels="on"] .nav-item:hover .nav-label,
.app-shell[data-nav-labels="on"] .nav-item:focus-visible .nav-label {
  color: #fff;
}
.app-shell[data-nav-labels="on"] .nav-item.active .nav-label {
  color: #fff;
}
.app-shell[data-nav-labels="on"] .nav-group-header {
  justify-content: space-between;
  padding: 4px 16px;
}
.nav-group-label {
  display: none;
  font-family: var(--aw-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--aw-sage-2);
}
.app-shell[data-nav-labels="on"] .nav-group-label {
  display: block;
}
.app-shell[data-nav-labels="on"] .nav-size-toggle .nav-group-caret {
  transform: rotate(180deg);
}


/* ── Mobile Bottom Tabs ──────────────────────────────────────────────────── */
/* The bar + scrim are injected into <body> for every non-restricted role, on
   every viewport — they are PHONE-ONLY UI, so they must be dead outside the
   media query below (without this base rule a desktop admin gets an unstyled
   button pile at the bottom of the page). */
.mobile-bottom-tabs,
.mobile-more-scrim {
  display: none;
}
@media (max-width: 640px) {
  .app-shell .sidebar {
    display: none !important;
  }
  /* The sidebar is hidden on phones (replaced by .mobile-bottom-tabs), but the
     base .app-shell grid still declares `60px minmax(0,1fr)`. With the sidebar
     gone, the lone .main-panel auto-places into the empty 60px column and the
     whole content area collapses (topbar icons stack, row titles vanish). Drop
     to a single full-width column so main-panel fills the viewport. Tablet
     (≤980px) keeps its 60px rail and is unaffected. */
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .mobile-bottom-tabs {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 9000;
    display: flex;
    justify-content: space-around;
    background: var(--aw-panel);
    border-top: 1px solid var(--aw-line-strong);
    padding-bottom: env(safe-area-inset-bottom);
    /* iOS Safari repaints position:fixed elements at a stale position during
       momentum ("flick") page-scroll, so the bar appears to detach and drift into
       the content. Promoting it to its own GPU compositor layer keeps it pinned
       through the scroll. (transform on the fixed element itself doesn't affect its
       own viewport-fixed positioning — only descendants' containing block.) */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .mobile-tab {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 52px;
    padding: 6px 0;
    border: none;
    background: transparent;
    color: var(--aw-sage);
    cursor: pointer;
  }
  .mobile-tab-label {
    font-size: 10px;
    font-weight: 600;
  }
  .mobile-tab .nav-icon {
    width: 20px; height: 20px;
    fill: none; stroke: currentColor; stroke-width: 2;
  }
  .mobile-tab.active {
    color: var(--aw-lime);
    border-top: 2px solid var(--aw-lime);
    margin-top: -1px;
  }
  .mobile-tab .nav-badge {
    position: absolute;
    top: 4px; right: calc(50% - 18px);
    background: var(--aw-lime);
    color: #fff;
    font-size: 10px;
    padding: 2px 4px;
    border-radius: 999px;
  }
  .mobile-tab .nav-group-dot {
    position: absolute;
    top: 6px; right: calc(50% - 14px);
    width: 8px; height: 8px;
    background: var(--aw-lime);
    border-radius: 50%;
  }

  .mobile-more-scrim {
    position: fixed; inset: 0; z-index: 9100;
    display: flex; align-items: flex-start; justify-content: center;
    padding: env(safe-area-inset-top, 48px) 0 0;
    background: rgba(20, 39, 26, 0.55);
  }
  .mobile-more-scrim[hidden] { display: none !important; }
  .mobile-more-sheet {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    background: var(--aw-panel);
    border-radius: 20px 20px 0 0;
    overflow: hidden;
  }
  .mobile-more-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px 12px 20px; border-bottom: 1px solid var(--aw-line);
  }
  .mobile-more-head h2 { margin: 0; font-size: 18px; color: var(--aw-forest); }
  .mobile-more-close {
    width: 42px; height: 42px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: transparent; cursor: pointer; color: var(--aw-sage);
  }
  .mobile-more-close svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; }
  .mobile-more-body {
    flex: 1; overflow-y: auto; padding: 16px;
    display: flex; flex-direction: column; gap: 24px;
  }
  .mobile-more-group { display: flex; flex-direction: column; gap: 8px; }
  .mobile-more-label {
    margin: 0 0 4px; font-family: var(--aw-mono); font-size: 11px;
    font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--aw-sage-2);
  }
  .mobile-more-item {
    display: flex; align-items: center; gap: 12px;
    min-height: 44px; padding: 0 12px; border: 1px solid var(--aw-line);
    border-radius: 8px; color: var(--aw-forest); background: transparent; cursor: pointer;
  }
  .mobile-more-item .nav-icon { width: 18px; height: 18px; stroke: currentColor; }
  .mobile-more-item .nav-label {
    position: static; opacity: 1; transform: none; background: transparent;
    padding: 0; color: inherit; font-size: 14px; font-weight: 500; pointer-events: auto;
  }
  
  body:has(.mobile-bottom-tabs) .app-shell {
    padding-bottom: calc(52px + env(safe-area-inset-bottom));
  }
}

/* ===== roofplan ===== */
.roofplan {
  width: 100%;
  color: var(--aw-forest);
}
.roofplan [hidden] { display: none !important; }
.roofplan-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}
.roofplan-head h2 {
  margin: 9px 0 4px;
  font-size: 25px;
  letter-spacing: -0.02em;
}
.roofplan-head p:not(.aw-eyebrow) {
  margin: 0;
  max-width: 68ch;
  color: var(--aw-sage-2);
  font-size: 13px;
}
.roofplan-phase {
  flex: none;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--aw-amber) 45%, var(--aw-line));
  border-radius: 999px;
  color: var(--aw-amber);
  font-family: var(--aw-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.roofplan-search {
  margin-bottom: 14px;
  padding: 12px 14px;
}
.roofplan-search > label,
.roofplan-card label {
  display: block;
  color: var(--aw-sage-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.roofplan-search-row {
  display: flex;
  gap: 8px;
  margin-top: 5px;
}
.roofplan-search-row input,
.roofplan-card input,
.roofplan-card select {
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid var(--aw-line);
  border-radius: 7px;
  background: var(--aw-off-2);
  color: var(--aw-forest);
  font: inherit;
  font-size: 13px;
}
.roofplan-search-row input:focus,
.roofplan-card input:focus,
.roofplan-card select:focus {
  border-color: var(--aw-green);
  outline: 2px solid color-mix(in srgb, var(--aw-green) 20%, transparent);
  outline-offset: 1px;
}
.roofplan-status {
  min-height: 18px;
  margin: 6px 0 0;
  color: var(--aw-sage-2);
  font-size: 12px;
}
.roofplan-status.is-error { color: var(--aw-danger); }
.roofplan-work {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 332px;
  gap: 16px;
  align-items: start;
}
.roofplan-stage-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--aw-line);
  border-radius: 12px;
  background: var(--aw-panel);
  box-shadow: 0 1px 2px rgba(20, 39, 26, 0.06), 0 4px 14px rgba(20, 39, 26, 0.05);
}
.roofplan-stage-bar,
.roofplan-toolbar,
.roofplan-stage-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--aw-line);
}
.roofplan-site-label {
  display: flex;
  flex: 1 1 240px;
  align-items: center;
  min-width: 0;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--aw-line);
  border-radius: 8px;
  background: var(--aw-off-2);
  font-size: 12px;
}
.roofplan-site-label svg {
  width: 14px;
  height: 14px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}
.roofplan-site-label strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.roofplan-map-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.roofplan-map-controls button,
.roofplan-toolbar button {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--aw-line);
  border-radius: 7px;
  background: var(--aw-off-2);
  color: var(--aw-sage-3);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.roofplan-map-controls button {
  width: 30px;
  padding: 0;
  font-family: var(--aw-mono);
}
.roofplan-map-controls output {
  min-width: 34px;
  color: var(--aw-sage-2);
  font-family: var(--aw-mono);
  font-size: 11px;
  text-align: center;
}
.roofplan-divider {
  width: 1px;
  height: 22px;
  margin: 0 3px;
  background: var(--aw-line-strong);
}
.roofplan-toolbar {
  flex-wrap: wrap;
  background: color-mix(in srgb, var(--aw-off-1) 70%, var(--aw-panel));
}
.roofplan-toolbar button:hover,
.roofplan-map-controls button:hover {
  border-color: var(--aw-line-strong);
  color: var(--aw-forest);
}
.roofplan-toolbar button.is-active {
  border-color: var(--aw-primary);
  background: var(--aw-primary);
  color: var(--aw-off-1);
  box-shadow: inset 0 2px 0 var(--aw-lime);
}
.roofplan-toolbar button.is-danger { color: var(--aw-danger); }
.roofplan-toolbar button:disabled,
.roofplan-map-controls button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
.roofplan-toolbar-spacer { flex: 1; }
.roofplan-pan-hint {
  margin-left: 6px;
  color: var(--aw-sage-2);
  font-family: var(--aw-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.roofplan-compass {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin: 6px 0 2px;
}
.roofplan-compass button {
  min-height: 26px;
  padding: 3px 0;
  border: 1px solid var(--aw-line);
  border-radius: 6px;
  background: var(--aw-off-2);
  color: var(--aw-sage-3);
  font-family: var(--aw-mono);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
}
.roofplan-compass button:hover {
  border-color: var(--aw-line-strong);
  color: var(--aw-forest);
}
.roofplan-compass button.is-active {
  border-color: var(--aw-primary);
  background: var(--aw-primary);
  color: var(--aw-off-1);
  box-shadow: inset 0 2px 0 var(--aw-lime);
}
.roofplan-panel-bar {
  margin-bottom: 10px;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--aw-lime) 45%, var(--aw-line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--aw-lime) 8%, var(--aw-panel));
}
.roofplan-panel-bar-label {
  display: block;
  color: var(--aw-forest);
  font-family: var(--aw-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.roofplan-panel-bar-hint {
  display: block;
  margin: 3px 0 7px;
  color: var(--aw-sage-2);
  font-size: 11px;
}
.roofplan-stage-wrap {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  background: #28362c;
}
.roofplan-stage-wrap canvas {
  display: block;
  width: 100%;
  height: auto;
  touch-action: none;
}
.roofplan-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(20, 39, 26, 0.68);
  color: #fff;
  font-weight: 700;
}
.roofplan-canvas-hint {
  position: absolute;
  right: 9px;
  bottom: 8px;
  max-width: min(72%, 420px);
  padding: 4px 8px;
  border-radius: 5px;
  background: rgba(20, 39, 26, 0.68);
  color: #fff;
  font-size: 11px;
  pointer-events: none;
}
.roofplan-stage-foot {
  justify-content: space-between;
  flex-wrap: wrap;
  border-top: 1px solid var(--aw-line);
  border-bottom: 0;
  color: var(--aw-sage-2);
  font-family: var(--aw-mono);
  font-size: 10px;
}
.roofplan-rail {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 12px;
}
.roofplan-card { padding: 14px; }
.roofplan-card h3 {
  margin: 0 0 11px;
  color: var(--aw-green);
  font-family: var(--aw-mono);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.roofplan-card h3::after {
  display: block;
  width: 27px;
  height: 2px;
  margin-top: 4px;
  background: var(--aw-lime);
  content: "";
}
.roofplan-card label + label,
.roofplan-card label + .roofplan-fields-2,
.roofplan-fields-2 + .roofplan-orientation,
.roofplan-orientation + button { margin-top: 9px; }
.roofplan-card label input,
.roofplan-card label select { margin-top: 4px; }
.roofplan-stepper {
  display: flex;
  align-items: center;
  margin-top: 4px;
  overflow: hidden;
  border: 1px solid var(--aw-line);
  border-radius: 7px;
  background: var(--aw-off-2);
}
.roofplan-stepper button {
  width: 31px;
  min-height: 32px;
  border: 0;
  background: transparent;
  color: var(--aw-sage-3);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
.roofplan-stepper output {
  flex: 1;
  color: var(--aw-forest);
  font-family: var(--aw-mono);
  font-size: 12px;
  text-align: center;
}
.roofplan-fields-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.roofplan-orientation {
  display: flex;
  overflow: hidden;
  border: 1px solid var(--aw-line-strong);
  border-radius: 8px;
}
.roofplan-orientation button {
  flex: 1;
  padding: 7px;
  border: 0;
  background: transparent;
  color: var(--aw-sage-2);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.roofplan-orientation button + button { border-left: 1px solid var(--aw-line); }
.roofplan-orientation button.active {
  background: var(--aw-primary);
  color: var(--aw-off-1);
}
.roofplan-steps {
  margin: 0;
  padding-left: 20px;
  color: var(--aw-sage-2);
  font-size: 12px;
  line-height: 1.65;
}
.roofplan-note {
  margin: 10px 0 0;
  color: var(--aw-sage-2);
  font-size: 11px;
  line-height: 1.5;
}
.roofplan-note strong { color: var(--aw-forest); }
.roofplan-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.roofplan-swatches {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 10px;
}
.roofplan-swatches button {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 5px 3px;
  border: 1px solid var(--aw-line);
  border-radius: 7px;
  background: var(--aw-off-2);
  color: var(--aw-sage-2);
  font: inherit;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}
.roofplan-swatches button.is-active { border-color: var(--aw-lime); color: var(--aw-forest); }
.roofplan-swatches i {
  display: block;
  width: 26px;
  height: 16px;
  border-radius: 3px;
  background: #151a20;
}
.roofplan-swatches i.is-blue { background: #1f3f74; }
.roofplan-swatches i.is-silver { border: 2px solid #b9bfc4; background: #1a2027; }
.roofplan-note-first { margin-top: 0; }
.roofplan-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.roofplan-kpis .aw-stat-card {
  min-height: 78px;
  padding: 10px;
}
.roofplan-kpis .aw-stat-card strong {
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}
.roofplan-kpis .aw-stat-card span { font-size: 10px; }
.roofplan-array-summary {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}
.roofplan-array-summary li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--aw-line);
  color: var(--aw-sage-2);
  font-size: 11px;
}
.roofplan-array-summary strong {
  color: var(--aw-forest);
  font-family: var(--aw-mono);
  font-weight: 600;
}
.roofplan-field-label {
  display: block;
  margin: 10px 0 4px;
  color: var(--aw-sage-2);
  font-size: 11px;
  font-weight: 700;
}
.roofplan-tilt-mode { margin-top: 0; }
.roofplan-tilt-fixed { display: block; margin-top: 8px; }
.roofplan-refill { margin-top: 9px; }
.roofplan-yield-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 64px;
  margin-top: 12px;
}
.roofplan-yield-bars i {
  display: block;
  flex: 1;
  min-height: 4px;
  border-radius: 2px 2px 0 0;
  background: var(--aw-green);
}
.roofplan-yield-bars i.is-max { background: var(--aw-lime); }
.roofplan-yield-labels {
  display: flex;
  gap: 3px;
  margin-top: 3px;
}
.roofplan-yield-labels span {
  flex: 1;
  color: var(--aw-sage-2);
  font-family: var(--aw-mono);
  font-size: 8px;
  text-align: center;
}
.roofplan-yield-table {
  margin-top: 10px;
  overflow-x: auto;
}
.roofplan-yield-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}
.roofplan-yield-table th,
.roofplan-yield-table td {
  padding: 3px 5px;
  border-bottom: 1px solid var(--aw-line);
  color: var(--aw-sage-2);
  font-family: var(--aw-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.roofplan-yield-table th:first-child,
.roofplan-yield-table td:first-child { text-align: left; }
.roofplan-yield-table thead th {
  color: var(--aw-forest);
  font-weight: 700;
}
.roofplan-yield-table tfoot th {
  border-bottom: 0;
  border-top: 2px solid var(--aw-line-strong);
  color: var(--aw-forest);
  font-weight: 700;
}
.roofplan-yield-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.roofplan-note.is-error { color: var(--aw-danger); }
.roofplan-note.is-amber { color: var(--aw-amber); }
@media (max-width: 1060px) {
  .roofplan-work { grid-template-columns: 1fr; }
  .roofplan-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .roofplan-head { align-items: flex-start; flex-direction: column; }
  .roofplan-search-row { align-items: stretch; flex-direction: column; }
  .roofplan-stage-bar { align-items: stretch; flex-direction: column; }
  .roofplan-map-controls { justify-content: center; }
  .roofplan-toolbar-spacer { display: none; }
  .roofplan-stage-wrap { min-height: 240px; }
  .roofplan-rail { display: flex; }
}

/* Phase 3 — save & export card + saved-layouts list */
.roofplan-save-card [data-layout-name] { width: 100%; }
.roofplan-layouts-toggle { margin-top: 8px; width: 100%; }
.roofplan-layouts { margin-top: 8px; }
.roofplan-layouts[hidden] { display: none !important; }
.roofplan-layouts-ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.roofplan-layouts-ul li { display: flex; align-items: center; gap: 6px; }
.roofplan-layout-open {
  flex: 1;
  min-width: 0;
  text-align: left;
  background: transparent;
  border: 1px solid var(--aw-line);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roofplan-layout-open:hover { border-color: var(--aw-lime); }
.roofplan-layout-del {
  flex: 0 0 auto;
  border: 1px solid var(--aw-line);
  border-radius: 6px;
  background: transparent;
  color: var(--aw-danger);
  cursor: pointer;
  padding: 5px 9px;
  line-height: 1;
}
.roofplan-layout-del:hover { border-color: var(--aw-danger); }

/* Phase 4 — equipment wall tab */
.roofplan-tabs {
  display: inline-flex;
  overflow: hidden;
  margin-bottom: 14px;
  border: 1px solid var(--aw-line-strong);
  border-radius: 9px;
  background: var(--aw-panel);
}
.roofplan-tab {
  padding: 8px 18px;
  border: 0;
  background: transparent;
  color: var(--aw-sage-2);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.roofplan-tab + .roofplan-tab { border-left: 1px solid var(--aw-line); }
.roofplan-tab.is-active {
  background: var(--aw-primary);
  color: var(--aw-off-1);
}
.roofplan-wall-bar { flex-wrap: wrap; }
.roofplan-wall-dim {
  display: block;
  color: var(--aw-sage-2);
  font-size: 11px;
  font-weight: 700;
}
.roofplan-wall-dim input {
  width: 108px;
  margin-top: 4px;
  padding: 7px 8px;
  border: 1px solid var(--aw-line);
  border-radius: 7px;
  background: var(--aw-off-2);
  color: var(--aw-forest);
  font: inherit;
  font-size: 13px;
}
.roofplan-wall-location {
  margin-left: auto;
  min-width: 0;
  max-width: 210px;
  padding: 7px 10px;
  border: 1px solid var(--aw-line);
  border-radius: 8px;
  background: var(--aw-off-2);
  color: var(--aw-forest);
  font: inherit;
  font-size: 12.5px;
}
.roofplan-wall-toolbar select {
  min-width: 0;
  max-width: 210px;
  padding: 5px 9px;
  border: 1px solid var(--aw-line);
  border-radius: 7px;
  background: var(--aw-off-2);
  color: var(--aw-forest);
  font: inherit;
  font-size: 12px;
}
.roofplan-wall-warn { color: var(--aw-amber); }
.roofplan-comp-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.roofplan-comp {
  border: 1px solid var(--aw-line);
  border-radius: 9px;
  background: var(--aw-off-2);
}
.roofplan-comp.is-selected { border-color: var(--aw-lime); }
.roofplan-comp-main {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.roofplan-comp-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.roofplan-comp-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--aw-forest);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.roofplan-comp-dim {
  flex: none;
  color: var(--aw-sage-2);
  font-family: var(--aw-mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.roofplan-comp-editor {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--aw-line);
}
.roofplan-comp-editor label + .roofplan-fields-2,
.roofplan-comp-editor .roofplan-fields-2 + .roofplan-field-label { margin-top: 9px; }
.roofplan-fields-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 4px;
}
.roofplan-fields-4 input {
  width: 100%;
  min-width: 0;
  padding: 7px 6px;
  border: 1px solid var(--aw-line);
  border-radius: 7px;
  background: var(--aw-off-2);
  color: var(--aw-forest);
  font: inherit;
  font-size: 12px;
  text-align: center;
}
.roofplan-clr-note {
  margin: 12px 0 0;
  color: var(--aw-sage-2);
  font-size: 11px;
  line-height: 1.5;
}
.roofplan-clr-note b { color: var(--aw-amber); font-weight: 600; }

/* Phase 6 — link to a costing estimate (RoofPlan save card). */
.roofplan-link {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.roofplan-link:empty { display: none; }
.roofplan-link-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 5px 10px;
  border: 1px solid var(--aw-line-strong);
  border-left: 3px solid var(--aw-lime);
  border-radius: 8px;
  background: var(--aw-off-2);
}
.roofplan-link-tick {
  flex: none;
  font-family: var(--aw-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--aw-green);
}
.roofplan-link-name {
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--aw-forest);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roofplan-link-unlink { flex: none; font-size: 11px; }
.roofplan-link-picker { margin-top: 8px; }
.roofplan-link-picker[hidden] { display: none !important; }
.roofplan-link-search {
  width: 100%;
  padding: 8px 9px;
  border: 1px solid var(--aw-line);
  border-radius: 7px;
  background: var(--aw-off-2);
  color: var(--aw-forest);
  font: inherit;
  font-size: 12px;
}
.roofplan-link-results { margin-top: 6px; max-height: 220px; overflow-y: auto; }
.roofplan-link-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.roofplan-link-pick {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
  background: transparent;
  border: 1px solid var(--aw-line);
  border-radius: 6px;
  padding: 6px 9px;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.roofplan-link-pick:hover { border-color: var(--aw-lime); background: var(--aw-off-2); }
.roofplan-link-pick-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--aw-forest);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roofplan-link-pick-sub { font-size: 10.5px; color: var(--aw-sage-2); }

/* Costing-scoped (Phase 6): the "recalculation needed" banner + the linked-layout
   summary next to the editor's roof-layout button. Placed here (not the costing
   zone) to keep this feature's CSS in one block; selectors are costing-namespaced. */
.cost-perf-recalc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 12px;
  padding: 8px 12px;
  border-left: 3px solid var(--aw-amber);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--aw-amber) 12%, var(--aw-panel));
}
.cost-perf-recalc[hidden] { display: none !important; }
.cost-perf-recalc-text { flex: 1; min-width: 0; font-size: 12.5px; color: var(--aw-forest); }
.cost-roof-summary {
  font-size: 11.5px;
  color: var(--aw-sage-2);
  font-variant-numeric: tabular-nums;
}
.cost-roof-summary[hidden] { display: none !important; }

/* Costing-scoped (Phase 6 follow-up): the editor-top layout chooser popover —
   "New layout" or pick a saved layout to link. Mirrors the RoofPlan link picker. */
.cost-roof-chooser {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--aw-line-strong);
  border-radius: 10px;
  background: var(--aw-panel);
}
.cost-roof-chooser[hidden] { display: none !important; }
.cost-roof-chooser-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.cost-roof-chooser-hint { font-size: 11.5px; color: var(--aw-sage-2); }
.cost-roof-chooser-search {
  flex: 1;
  min-width: 160px;
  padding: 7px 9px;
  border: 1px solid var(--aw-line);
  border-radius: 7px;
  background: var(--aw-off-2);
  color: var(--aw-forest);
  font: inherit;
  font-size: 12px;
}
.cost-roof-chooser-search[hidden] { display: none !important; }
.cost-roof-chooser-results { margin-top: 8px; max-height: 240px; overflow-y: auto; }
.cost-roof-chooser-note { margin: 4px 0 0; font-size: 11.5px; color: var(--aw-sage-2); }
.cost-roof-chooser-note.error { color: var(--aw-amber); }
.cost-roof-chooser-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cost-roof-chooser-pick {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
  background: transparent;
  border: 1px solid var(--aw-line);
  border-radius: 6px;
  padding: 6px 9px;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.cost-roof-chooser-pick:hover { border-color: var(--aw-lime); background: var(--aw-off-2); }
.cost-roof-chooser-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--aw-forest);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cost-roof-chooser-flag {
  font-style: normal;
  font-family: var(--aw-mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--aw-green);
  border: 1px solid color-mix(in srgb, var(--aw-lime) 55%, var(--aw-line));
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: 1px;
}
.cost-roof-chooser-sub { font-size: 10.5px; color: var(--aw-sage-2); }

/* Phase 7 — standalone RoofPlan "Download PDF" page chooser (inline popover in the
   Save & export card, mirrors the link picker). */
.roofplan-pdf-picker {
  margin-top: 8px;
  padding: 10px 11px;
  border: 1px solid var(--aw-line);
  border-radius: 8px;
  background: var(--aw-off-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.roofplan-pdf-picker[hidden] { display: none !important; }
.roofplan-pdf-picker-title {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--aw-sage-2);
}
.roofplan-pdf-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--aw-forest);
  cursor: pointer;
}
.roofplan-pdf-opt input { accent-color: var(--aw-forest); }

/* Phase 7 — costing-scoped: the two opt-in "Include roof/equipment layout page"
   checkboxes in the Proposal PDF actions row (placed here to keep the feature's
   CSS in one block; selectors are costing-namespaced). */
.cost-roof-pdf-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cost-roof-pdf-opts[hidden] { display: none !important; }
.cost-pdf-opt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--aw-sage-1);
  cursor: pointer;
}
.cost-pdf-opt input { accent-color: var(--aw-forest); }
/* ===== /roofplan ===== */

/* ============================================================
   Monitoring — Attention tab (modules/monitoring). Live alerts as
   rich detail cards + a per-alert value/timestamp/phase readout and
   inline min–max voltage band chart. Tokens only; severity colours
   reuse the app's severity-high/medium/low convention (danger/amber/
   green). SVG strokes are token-driven so the charts theme in dark
   mode automatically. Any element given an explicit display carries a
   [hidden] companion.
   ============================================================ */
.monitoring-tabs-bar { margin-bottom: 16px; }
.monitoring-tabpanel[hidden] { display: none !important; }

.attention-list { display: grid; gap: 14px; }

.attention-card {
  position: relative;
  display: flex;
  gap: 0;
  border: 1px solid var(--aw-line);
  border-radius: 14px;
  background: var(--aw-panel);
  overflow: hidden;
}
.attention-card.is-ack { opacity: 0.62; }
.attention-card.is-focused {
  outline: 2px solid var(--aw-lime);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--aw-lime) 24%, transparent);
  transition: box-shadow .3s, outline-color .3s;
}
/* Left severity accent rail. */
.attention-accent { flex: 0 0 4px; background: var(--aw-sage-2); }
.attention-card.severity-high .attention-accent { background: var(--aw-danger); }
.attention-card.severity-medium .attention-accent { background: var(--aw-amber); }
.attention-card.severity-low .attention-accent { background: var(--aw-green); }

.attention-main {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 14px 16px;
}

.attention-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Type pill — mono, severity-tinted (mirrors .home-alert-tag). */
.attention-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 999px;
  font-family: var(--aw-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--aw-sage-2);
  background: var(--aw-off-1);
  border: 1px solid var(--aw-line-strong);
}
.attention-tag.severity-high {
  color: var(--aw-danger);
  background: color-mix(in srgb, var(--aw-danger) 10%, var(--aw-panel));
  border-color: color-mix(in srgb, var(--aw-danger) 32%, var(--aw-line-strong));
}
.attention-tag.severity-medium {
  color: var(--aw-amber);
  background: color-mix(in srgb, var(--aw-amber) 12%, var(--aw-panel));
  border-color: color-mix(in srgb, var(--aw-amber) 34%, var(--aw-line-strong));
}
.attention-tag.severity-low {
  color: var(--aw-green);
  background: color-mix(in srgb, var(--aw-green) 10%, var(--aw-panel));
  border-color: color-mix(in srgb, var(--aw-green) 28%, var(--aw-line-strong));
}

.attention-title-link,
.attention-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--aw-forest);
  min-width: 0;
}
.attention-title-link {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--aw-line-strong);
  text-underline-offset: 3px;
}
.attention-title-link:hover { text-decoration-color: var(--aw-lime); }

.attention-ackflag {
  font-family: var(--aw-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--aw-sage-2);
}

.attention-body { margin: 0; font-size: 13px; color: var(--aw-sage-2); line-height: 1.45; }

/* Derived-detail block: value chips + optional chart. */
.attention-detail {
  display: grid;
  gap: 10px;
  padding: 10px 0 2px;
  border-top: 1px dashed var(--aw-line);
}
.attention-detail-rows { display: flex; flex-wrap: wrap; gap: 8px; }

.attention-metric {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 2px 8px;
  padding: 7px 11px;
  border: 1px solid var(--aw-line-strong);
  border-radius: 10px;
  background: var(--aw-off-3);
}
.attention-metric.is-warn {
  border-color: color-mix(in srgb, var(--aw-amber) 40%, var(--aw-line-strong));
  background: color-mix(in srgb, var(--aw-amber) 8%, var(--aw-panel));
}
.attention-metric-label {
  grid-column: 1 / -1;
  font-family: var(--aw-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--aw-muted);
}
.attention-metric-value {
  font-family: var(--aw-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--aw-forest);
  white-space: nowrap;
}
.attention-metric-meta {
  font-family: var(--aw-mono);
  font-size: 11px;
  color: var(--aw-sage-2);
  white-space: nowrap;
}

/* Fallback payload key→value chips. */
.attention-detail-kv { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.attention-kv {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
}
.attention-kv-k { color: var(--aw-muted); }
.attention-kv-v { font-family: var(--aw-mono); font-weight: 600; color: var(--aw-forest); }

/* Inline SVG charts — token strokes so they theme in dark mode. */
.attention-chartwrap { display: grid; gap: 4px; }
.attention-chart { width: 100%; height: auto; max-height: 108px; display: block; }
.attention-chart-cap {
  font-family: var(--aw-mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--aw-muted);
}
.attn-band { fill: color-mix(in srgb, var(--aw-sage-2) 14%, transparent); }
.attn-bandline {
  stroke: var(--aw-line-strong);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}
.attn-axislabel {
  fill: var(--aw-muted);
  font-family: var(--aw-mono);
  font-size: 9px;
  font-weight: 600;
}
.attn-whisker { stroke: var(--aw-green); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.attn-cap { stroke: var(--aw-green); stroke-width: 2; vector-effect: non-scaling-stroke; }
.attn-warn { stroke: var(--aw-amber); stroke-width: 3.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.attn-danger { stroke: var(--aw-danger); stroke-width: 3.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.attn-spark { fill: none; stroke: var(--aw-green); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.attention-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.attention-btn {
  padding: 6px 12px;
  border: 1px solid var(--aw-line-strong);
  border-radius: 6px;
  background: var(--aw-panel);
  color: var(--aw-forest);
  font-size: 13px;
  cursor: pointer;
}
.attention-btn:hover { background: var(--aw-off-1); }
.attention-btn.primary { border-color: var(--aw-forest); background: var(--aw-primary); color: #fff; }
.attention-btn.primary:hover { filter: brightness(0.95); }
.attention-btn:disabled { opacity: 0.5; cursor: default; }

.attention-raised {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--aw-green);
  white-space: nowrap;
}
.attention-unlinked {
  font-size: 12px;
  color: var(--aw-sage-2);
  font-style: italic;
  white-space: nowrap;
}

.attention-empty {
  padding: 22px 4px;
  text-align: center;
  color: var(--aw-sage-2);
  font-size: 14px;
}

/* Recently-resolved collapsible (uses the shared .aw-details primitive). */
.attention-resolved { margin-top: 16px; }
.attention-resolved-body { padding: 4px 16px 14px; }
.attention-resolved-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.attention-resolved-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--aw-line);
}
.attention-resolved-item:last-child { border-bottom: 0; }
.attention-resolved-title { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--aw-forest); }
.attention-resolved-when {
  font-family: var(--aw-mono);
  font-size: 11px;
  color: var(--aw-muted);
  white-space: nowrap;
}
/* ===== /Monitoring — Attention tab ===== */

/* ===== Home — unified To-Do list ===== */
/* One worklist merging leads + tickets + tasks. Header row = eyebrow + count pill
   + Sort/Group segmented toggles + "Open To-Do" link; list rows share a grid of
   tick | type-chip | title(+ctx) | due | priority. Tasks complete in one click;
   leads/tickets get a dashed inert tick. All tokens — dark-safe via the token flip. */
.home-todo { margin: 0 0 4px; }
.home-todo[hidden] { display: none !important; }

.home-todo-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.home-todo-head .aw-eyebrow { margin-bottom: 0; }
.home-todo-count {
  font-family: var(--aw-mono); font-size: 11px; font-weight: 700; color: var(--aw-sage-2);
  background: var(--aw-off-1); border: 1px solid var(--aw-line-strong); border-radius: 999px; padding: 1px 9px;
}
.home-todo-controls { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.home-todo-ctl-label {
  font-family: var(--aw-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--aw-muted);
}
.home-todo-seg { display: inline-flex; border: 1px solid var(--aw-line-strong); border-radius: 9px; overflow: hidden; }
.home-todo-seg button {
  padding: 5px 12px; border: 0; background: var(--aw-panel); color: var(--aw-sage-2);
  font: inherit; font-size: 12px; cursor: pointer;
}
.home-todo-seg button + button { border-left: 1px solid var(--aw-line-strong); }
.home-todo-seg button.is-on { background: var(--aw-primary); color: #fff; }
.home-todo-open {
  font-size: 12.5px; color: var(--aw-green); background: none; border: none; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}

.home-todo-list {
  background: var(--aw-panel); border: 1px solid var(--aw-line); border-radius: 14px; overflow: hidden;
}
.home-todo-loading { font-size: 13px; color: var(--aw-muted); padding: 14px 16px; }
.home-todo-empty { margin: 0; padding: 18px 16px; font-size: 14px; color: var(--aw-forest); }

.home-todo-row {
  display: grid; grid-template-columns: 26px 70px minmax(0, 1fr) 118px 74px; gap: 12px; align-items: center;
  width: 100%; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--aw-line);
  background: var(--aw-panel); text-align: left; cursor: pointer; font: inherit; color: inherit;
}
.home-todo-row:last-child { border-bottom: 0; }
.home-todo-row:hover { background: var(--aw-off-1); }
.home-todo-row:focus-visible { outline: 2px solid var(--aw-lime); outline-offset: -2px; }
.home-todo-title {
  min-width: 0; font-weight: 600; color: var(--aw-forest);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-todo-title small { display: block; font-weight: 400; font-size: 11.5px; color: var(--aw-sage-2); }
.home-todo-due { font-family: var(--aw-mono); font-size: 11px; color: var(--aw-sage-2); white-space: nowrap; }
.home-todo-due.is-over { color: var(--aw-danger); font-weight: 700; }
.home-todo-due.is-today { color: var(--aw-amber); font-weight: 700; }

/* Tick cell — real button for tasks, dashed inert marker for leads/tickets. */
.home-todo-tick {
  width: 17px; height: 17px; padding: 0; border: 1.5px solid var(--aw-line-strong); border-radius: 5px;
  background: var(--aw-panel); cursor: pointer; display: inline-block;
}
.home-todo-tick:hover { border-color: var(--aw-green); }
.home-todo-tick.is-na { border-style: dashed; opacity: 0.45; cursor: default; }

.home-todo-chip, .home-todo-chip-slot { justify-self: start; }
.home-todo-chip {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--aw-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 6px; padding: 2px 7px; border: 1px solid var(--aw-line-strong); color: var(--aw-sage-2); white-space: nowrap;
}
.home-todo-chip.is-lead { color: var(--aw-green); border-color: color-mix(in srgb, var(--aw-green) 45%, var(--aw-line-strong)); }
.home-todo-chip.is-ticket { color: var(--aw-amber); border-color: color-mix(in srgb, var(--aw-amber) 45%, var(--aw-line-strong)); }
.home-todo-chip.is-task { color: var(--aw-forest); }

.home-todo-prio {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--aw-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.home-todo-prio i { width: 8px; height: 8px; border-radius: 50%; }
.home-todo-prio.is-hi { color: var(--aw-danger); } .home-todo-prio.is-hi i { background: var(--aw-danger); }
.home-todo-prio.is-med { color: var(--aw-amber); } .home-todo-prio.is-med i { background: var(--aw-amber); }
.home-todo-prio.is-lo { color: var(--aw-sage-2); } .home-todo-prio.is-lo i { background: var(--aw-sage-2); }

.home-todo-recur {
  font-family: var(--aw-mono); font-size: 9px; color: var(--aw-green);
  border: 1px solid color-mix(in srgb, var(--aw-green) 40%, var(--aw-line-strong));
  border-radius: 5px; padding: 0 4px;
}

.home-todo-group-head {
  display: flex; align-items: center; gap: 8px; padding: 9px 16px 7px;
  background: var(--aw-off-1); border-bottom: 1px solid var(--aw-line);
  font-family: var(--aw-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aw-sage-2);
}
.home-todo-group-head b { color: var(--aw-forest); }

.home-todo-viewall {
  display: block; width: 100%; text-align: center; padding: 10px 8px;
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--aw-green);
  background: transparent; border: 0; border-top: 1px solid var(--aw-line); cursor: pointer;
}
.home-todo-viewall:hover { background: var(--aw-off-1); }

/* Mobile: a fixed 5-col grid crushed the title to ~70px ("Pier…", "And…").
   Switch to a two-line layout — tick spans both lines; the type chip sits beside
   the name (which now gets a full readable line); due + priority drop to a second
   line underneath (due left, priority right). */
@media (max-width: 640px) {
  .home-todo-controls { width: 100%; margin-left: 0; }
  .home-todo-row {
    grid-template-columns: 20px auto minmax(0, 1fr);
    grid-template-areas:
      "tick chip title"
      "tick meta meta";
    column-gap: 9px; row-gap: 3px; padding: 10px 12px; align-items: center;
  }
  .home-todo-tick { grid-area: tick; }
  .home-todo-chip, .home-todo-chip-slot { grid-area: chip; }
  .home-todo-title { grid-area: title; }
  .home-todo-due { grid-area: meta; justify-self: start; }
  .home-todo-prio { grid-area: meta; justify-self: end; }
  .home-todo-title small { display: none; }
  .home-todo-viewall { padding: 12px 8px; }
}
/* ===== /Home — unified To-Do list ===== */

/* ===== To-Do module (was Notes & Tasks) ===== */
/* The module's To-Do tab reuses the Home worklist's visual language (tick | type
   chip | title+ctx | due | priority | trailing action) but lives inside the module
   card + composer. All tokens → dark-safe via the token flip. Classes are `todo-*`
   (module worklist) and `notes-done-*` (note completion), distinct from `home-todo-*`. */
.todo-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 14px; }
.todo-filters-spacer { flex: 1 1 auto; }
.todo-typechips { display: flex; gap: 8px; flex-wrap: wrap; }
.todo-fchip {
  padding: 4px 12px; border: 1px solid var(--aw-line-strong); border-radius: 999px;
  background: var(--aw-panel); color: var(--aw-sage-2); font: inherit; font-size: 12px; cursor: pointer;
}
.todo-fchip:hover { color: var(--aw-forest); border-color: var(--aw-forest); }
.todo-fchip.is-on { border-color: var(--aw-forest); color: var(--aw-forest); font-weight: 700; background: var(--aw-off-1); }
.todo-fchip[hidden] { display: none !important; }

/* Wide worklist rows read better full-width; composer drops below. */
.todo-main { grid-template-columns: 1fr; }
.todo-list { padding: 0; gap: 0; overflow: hidden; }

.todo-row {
  display: grid; grid-template-columns: 26px 64px minmax(0, 1fr) 118px 74px auto; gap: 12px; align-items: center;
  width: 100%; padding: 10px 16px; border-bottom: 1px solid var(--aw-line); background: var(--aw-panel);
  cursor: pointer;   /* whole row is tappable: task → edit, lead/ticket → own module */
}
.todo-row:last-child { border-bottom: 0; }
.todo-row:hover { background: var(--aw-off-1); }
.todo-title { min-width: 0; font-weight: 600; color: var(--aw-forest); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.todo-title small { display: block; font-weight: 400; font-size: 11.5px; color: var(--aw-sage-2); }
.todo-due { font-family: var(--aw-mono); font-size: 11px; color: var(--aw-sage-2); white-space: nowrap; }
.todo-due.is-over { color: var(--aw-danger); font-weight: 700; }
.todo-due.is-today { color: var(--aw-amber); font-weight: 700; }

/* Tick — live button for tasks (complete / reopen), dashed inert marker otherwise. */
.todo-tick {
  width: 17px; height: 17px; padding: 0; border: 1.5px solid var(--aw-line-strong); border-radius: 5px;
  background: var(--aw-panel); cursor: pointer; display: inline-block; position: relative;
}
.todo-tick:hover { border-color: var(--aw-green); }
.todo-tick.is-na { border-style: dashed; opacity: 0.45; cursor: default; }
.todo-tick.is-done { background: var(--aw-green); border-color: var(--aw-green); }
.todo-tick.is-done::after {
  content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 800;
}

.todo-chip {
  justify-self: start; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--aw-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 6px; padding: 2px 7px; border: 1px solid var(--aw-line-strong); color: var(--aw-sage-2); white-space: nowrap;
}
.todo-chip.is-lead { color: var(--aw-green); border-color: color-mix(in srgb, var(--aw-green) 45%, var(--aw-line-strong)); }
.todo-chip.is-ticket { color: var(--aw-amber); border-color: color-mix(in srgb, var(--aw-amber) 45%, var(--aw-line-strong)); }
.todo-chip.is-task { color: var(--aw-forest); }

.todo-prio { display: inline-flex; align-items: center; gap: 5px; font-family: var(--aw-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.todo-prio i { width: 8px; height: 8px; border-radius: 50%; }
.todo-prio.is-hi { color: var(--aw-danger); } .todo-prio.is-hi i { background: var(--aw-danger); }
.todo-prio.is-med { color: var(--aw-amber); } .todo-prio.is-med i { background: var(--aw-amber); }
.todo-prio.is-lo { color: var(--aw-sage-2); } .todo-prio.is-lo i { background: var(--aw-sage-2); }

.todo-recur {
  font-family: var(--aw-mono); font-size: 9px; color: var(--aw-green);
  border: 1px solid color-mix(in srgb, var(--aw-green) 40%, var(--aw-line-strong));
  border-radius: 5px; padding: 0 4px;
}
.todo-act {
  justify-self: end; font: inherit; font-size: 11.5px; color: var(--aw-green); background: none; border: 0;
  cursor: pointer; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap;
}
.todo-act:hover { color: var(--aw-forest); }

/* Task trailing controls: Notes & history chip + Edit, side by side. */
.todo-acts { justify-self: end; display: inline-flex; align-items: center; gap: 8px; }
.todo-acts[hidden] { display: none !important; }
.todo-acts .todo-act { justify-self: auto; }
.todo-thread-btn {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px;
  border: 1px solid var(--aw-line-strong); border-radius: 8px; background: var(--aw-panel);
  color: var(--aw-sage-2); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
}
.todo-thread-btn[hidden] { display: none !important; }
.todo-thread-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.todo-thread-btn:hover, .todo-thread-btn.is-open { color: var(--aw-forest); border-color: var(--aw-forest); background: var(--aw-off-1); }
.todo-thread-count { font-family: var(--aw-mono); font-size: 10px; }

/* Expanded thread panel inside the flush list: full-width band under its row
   (existing .task-thread rules still style the inner thread content). */
.todo-list .task-thread {
  margin: 0; border-left: 0; border-radius: 0; border-bottom: 1px solid var(--aw-line);
  padding: 12px 16px 14px 54px;
}

.todo-row.is-done { opacity: 0.55; }
.todo-row.is-done .todo-title { text-decoration: line-through; color: var(--aw-sage-2); }

.todo-completed { border-top: 1px solid var(--aw-line); }
.todo-completed > summary {
  padding: 10px 16px; font-family: var(--aw-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--aw-sage-2); cursor: pointer; background: var(--aw-off-1); list-style-position: inside;
}
.todo-completed[open] > summary { border-bottom: 1px solid var(--aw-line); }

/* Notes tab — per-row ✓ complete toggle (Delete already sits in the row actions). */
.notes-done-tick {
  flex: 0 0 auto; width: 18px; height: 18px; padding: 0; margin-top: 1px; position: relative;
  border: 1.5px solid var(--aw-line-strong); border-radius: 5px; background: var(--aw-panel); cursor: pointer;
}
.notes-done-tick:hover { border-color: var(--aw-green); }
.notes-done-tick.is-done { background: var(--aw-green); border-color: var(--aw-green); }
.notes-done-tick.is-done::after {
  content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 800;
}
.notes-item.is-done { opacity: 0.6; }
.notes-item.is-done .notes-item-body { text-decoration: line-through; color: var(--aw-sage-2); }

@media (max-width: 640px) {
  .todo-filters-spacer { display: none; }
  /* Two-line row (matches the Home worklist): name gets its own full line beside
     the type chip; due + priority sit on a second line; task controls (Notes &
     history) drop to a full-width third line. Fixes the crushed "Pier…" titles. */
  .todo-row {
    grid-template-columns: 20px auto minmax(0, 1fr);
    grid-template-areas:
      "tick chip title"
      "tick meta meta"
      "acts acts acts";
    column-gap: 9px; row-gap: 4px; padding: 10px 12px;
  }
  .todo-row > .todo-tick { grid-area: tick; align-self: center; }
  .todo-row > .todo-chip { grid-area: chip; align-self: center; }
  .todo-row > .todo-title { grid-area: title; align-self: center; }
  .todo-row > .todo-due { grid-area: meta; justify-self: start; }
  .todo-row > .todo-prio { grid-area: meta; justify-self: end; }
  /* Edit / Open text stay desktop-only, but the Notes & history toggle must remain
     reachable on phones: it lives in .todo-acts, mapped to the full-width third row. */
  .todo-row .todo-act { display: none; }
  .todo-row .todo-acts { grid-area: acts; justify-content: flex-start; margin-top: 2px; }
  .todo-title small { display: none; }
  .todo-list .task-thread { padding-left: 16px; }
  /* Ownership toggle (Assigned to me / by me / Everyone) is three long labels that
     overflowed the viewport and clipped "Everyone" off the right edge. On phones
     make it a full-width, equal-segment control with tighter padding so all three
     fit. The narrow Priority/Due sort toggle is left as-is. */
  .todo-filters .tasks-filter { width: 100%; }
  .todo-filters .tasks-filter .aw-seg {
    flex: 1 1 0; min-width: 0; padding: 8px 6px; font-size: 12px;
  }
}
/* ===== /To-Do module (was Notes & Tasks) ===== */

/* ===== Task Notes & history — surfaced (labelled toggle + edit-form panel) ===== */
/* The row toggle is now labelled "Notes & history" (was an icon-only button); the
   text sits beside the doc icon and the count badge. */
.todo-thread-label { white-space: nowrap; }

/* System / auto-logged entries (assignment + status changes) share the user-note
   avatar layout but read muted + italic with a system-styled avatar. */
.task-avatar.is-system { background: var(--aw-sage-2); color: #fff; }
.task-thread-note.is-system .task-thread-note-body { color: var(--aw-sage-2); font-style: italic; }

/* Notes & history embedded in the task Edit form — front-and-centre when editing. */
.tasks-edit-thread { margin-top: 4px; }
.tasks-edit-thread[hidden] { display: none !important; }
.tasks-edit-thread .task-thread { margin: 0; }
/* ===== /Task Notes & history ===== */

/* ===== Task Edit — two-column layout (compact form left, notes/history right) =====
   The left form keeps its old vertical flow inside .tasks-form-col. The composer only
   becomes a 2-col grid while EDITING (renderEditThread toggles .is-editing exactly when
   the notes host is shown), so the New-task composer — and the edit form while a row
   thread is open — stay single-column full width with no empty right column. */
.tasks-form-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tasks-composer.is-editing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);   /* notes slightly wider */
  gap: 22px;
  align-items: start;
}
/* Right column: fill the row, scrollable history, a taller add-note box. */
.tasks-composer.is-editing .tasks-edit-thread { margin-top: 0; align-self: stretch; }
.tasks-composer.is-editing .tasks-edit-thread .task-thread { height: 100%; }
.tasks-edit-thread .task-thread-list { max-height: 300px; overflow-y: auto; }
.tasks-edit-thread .task-thread-input { min-height: 88px; }

/* Tablet / narrow: single column — form stacked above the notes panel. */
@media (max-width: 820px) {
  .tasks-composer.is-editing { grid-template-columns: 1fr; }
  .tasks-composer.is-editing .tasks-edit-thread .task-thread { height: auto; }
}
/* Phone: the 2-up field grid collapses so every field is full-width and tappable. */
@media (max-width: 560px) {
  .tasks-fields { grid-template-columns: 1fr; }
}
/* ===== /Task Edit — two-column layout ===== */

/* ===== Task description — composer field + row preview ===== */
/* Description textarea in the composer/edit form: full-width, distinguished from the
   Notes thread with a faint lime edge + green label. Sits under the Title input. */
.tasks-desc-field > span { color: var(--aw-green); }
.tasks-desc-field textarea {
  min-height: 68px; resize: vertical;
  border-color: color-mix(in srgb, var(--aw-lime) 45%, var(--aw-line-strong));
}
/* One-line description preview under a task's title, between title and the meta
   sub-line. Truncates with an ellipsis; toggled per-account via aw_todo_desc_preview. */
.todo-desc {
  display: block; margin-top: 1px; font-weight: 400; font-size: 12.5px; color: var(--aw-sage-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ===== /Task description ===== */

/* ===== Costing — line edit + re-sync ===== */
/* Bulk banner above the sections when any line's frozen cost has drifted from the
   live catalogue price. Amber outline + faint wash (edge accent, never a fill). */
.cost-resync-banner {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  padding: 9px 14px; font-size: 13px; color: var(--aw-forest);
  border: 1px solid color-mix(in srgb, var(--aw-amber) 40%, var(--aw-line-strong));
  border-radius: 10px; background: color-mix(in srgb, var(--aw-amber) 10%, var(--aw-panel));
}
.cost-resync-banner[hidden] { display: none !important; }
.cost-resync-ic { color: var(--aw-amber); font-size: 15px; line-height: 1; }
.cost-resync-text { flex: 1 1 auto; min-width: 0; }
.cost-resync-all {
  flex: 0 0 auto; padding: 6px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  color: var(--aw-amber); border: 1px solid var(--aw-amber); border-radius: 8px;
  background: color-mix(in srgb, var(--aw-amber) 14%, var(--aw-panel));
}
.cost-resync-all:hover { background: color-mix(in srgb, var(--aw-amber) 22%, var(--aw-panel)); }

/* line row whose catalogue price has drifted — faint amber edge, no saturated fill */
.cost-lines tr.cl-resync td { background: color-mix(in srgb, var(--aw-amber) 6%, var(--aw-panel)); }
.cost-lines tr.cl-resync td:first-child { box-shadow: inset 3px 0 0 var(--aw-amber); }

/* actions cluster in the last cell: re-sync ↻ · edit ✎ · remove × */
.cost-line-actions { display: flex; gap: 4px; align-items: center; justify-content: flex-end; }
.cost-line-actions[hidden] { display: none !important; }
.cost-line-edit {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--aw-line-strong); border-radius: 8px; background: var(--aw-panel);
  color: var(--aw-sage-2); cursor: pointer;
}
.cost-line-edit:hover { color: var(--aw-forest); border-color: var(--aw-green); }
.cost-line-edit svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.cost-line-resync {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; font-size: 15px; line-height: 1; cursor: pointer;
  color: var(--aw-amber); border: 1px solid color-mix(in srgb, var(--aw-amber) 40%, var(--aw-line-strong));
  background: color-mix(in srgb, var(--aw-amber) 12%, var(--aw-panel));
}
.cost-line-resync:hover { background: color-mix(in srgb, var(--aw-amber) 22%, var(--aw-panel)); }

/* inline unit-cost editor (mirrors the margin inline edit) */
.cost-ucost-edit { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.cost-ucost-input {
  width: 88px; height: 30px; padding: 0 8px; text-align: right;
  border: 1px solid var(--aw-green); border-radius: 8px; font-size: 13px;
  color: var(--aw-forest); background: var(--aw-panel); -moz-appearance: textfield;
}
.cost-ucost-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(47,122,60,0.12); }
.cost-ucost-ok { border: 0; background: transparent; color: var(--aw-green); font-weight: 700; cursor: pointer; padding: 0 2px; }
.cost-ucost-x { border: 0; background: transparent; color: var(--aw-sage-2); cursor: pointer; padding: 0 2px; }
.cost-ucost-x:hover { color: var(--aw-amber); }

/* old → new preview in the cost cell when a line is drifted */
.cost-ucost-resync { display: inline-flex; align-items: baseline; gap: 5px; justify-content: flex-end; white-space: nowrap; }
.cost-ucost-old { color: var(--aw-sage-2); text-decoration: line-through; font-size: 12px; }
.cost-ucost-new { color: var(--aw-amber); font-weight: 600; }

/* per-line edit popover (body-anchored, fixed) */
.cost-line-menu {
  position: fixed; z-index: 60; min-width: 250px; max-width: 300px; overflow: hidden;
  background: var(--aw-panel); border: 1px solid var(--aw-line-strong); border-radius: 11px;
  box-shadow: 0 12px 30px rgba(20,39,26,0.22);
}
.cost-line-menu[hidden] { display: none !important; }
.cost-line-menu button {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  padding: 11px 14px; border: 0; border-bottom: 1px solid var(--aw-line);
  background: transparent; color: var(--aw-forest); cursor: pointer;
}
.cost-line-menu button:last-child { border-bottom: 0; }
.cost-line-menu button:hover { background: var(--aw-off-3); }
.cost-line-menu b { font-size: 13.5px; font-weight: 600; }
.cost-line-menu small { color: var(--aw-sage-2); font-size: 11.5px; }
.cost-line-menu .cost-lm-stale { color: var(--aw-amber); }

/* "also update this line" box inside the catalogue-item dialog */
.cost-ie-alsoupdate {
  margin-top: 12px; padding: 10px 12px; font-size: 12.5px; color: var(--aw-forest);
  border: 1px solid color-mix(in srgb, var(--aw-amber) 40%, var(--aw-line-strong));
  border-radius: 9px; background: color-mix(in srgb, var(--aw-amber) 8%, var(--aw-panel));
}
.cost-ie-alsoupdate label {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  margin-top: 8px; font-size: 12.5px; color: var(--aw-forest); cursor: pointer;
}
.cost-ie-alsoupdate input { width: auto; accent-color: var(--aw-forest); }
/* ===== /Costing — line edit + re-sync ===== */

/* ===== To-Do — filter strip (inline controls) ===== */
/* Sort toggle, Person picker and New task all sit on one baseline in the filter row,
   matching the ownership .aw-segmented toggle's height/shape. (.todo-filters is already
   display:flex; align-items:center; flex-wrap:wrap.) The segmented primitive forces
   align-self:flex-start, so re-centre it here for a clean single line. */
.todo-filters .aw-segmented { align-self: center; }
/* Person picker — a pill matching the segmented controls, not a raw native select. */
.todo-person-select {
  min-height: 40px; padding: 6px 14px; border: 1px solid var(--aw-line-strong);
  border-radius: 999px; background: var(--aw-off-1); color: var(--aw-sage-2);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.todo-person-select:hover { color: var(--aw-forest); border-color: var(--aw-forest); }
/* New task stays a filled primary action, sized to line up with the segmented pills. */
.todo-newtask { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
/* ===== /To-Do — filter strip ===== */