/*
 * TenancyHub stylesheet.
 *
 * COLOUR PALETTE
 * --------------
 * Every colour is a CSS custom property below. To reskin the whole site,
 * change these values only. (Mirror these tokens in the React frontend's
 * Sass/CSS variables when it arrives.)
 */
:root {
  --color-primary: #1E40AF;   /* buttons, links */
  --color-accent:  #7C3AED;   /* highlights, success, CTAs */
  --color-text:    #0F172A;   /* body text */
  --color-muted:   #475569;   /* secondary text, labels */
  --color-border:  #E0E7FF;   /* dividers, subtle lines */
  --color-bg:      #F1F5F9;   /* page background */

  /* Gradient for the "Digitally sign" bar only (red → magenta). Deliberately
     separate from the brand blue/purple so it doesn't recolour the rest of the UI. */
  --color-sign-1:  #E11D48;   /* ruby */
  --color-sign-2:  #C026D3;   /* fuchsia */

  /* Derived shades (hover/gradient/state) */
  --color-primary-dark: #16308a;
  --color-primary-light: #3563d6;  /* lighter blue for button hover */
  --color-accent-dark:  #6528c9;
  --color-surface: #ffffff;
  --color-field-bg: #f8fafc;
  --color-border-input: #CBD5E1;   /* outlined input/select resting border */
  --color-success: #16a34a;
  --color-danger:  #be123c;
  --color-caution:     #b45309;  /* adverse-record emphasis (amber) */
  --color-caution-bg:  #fff7ed;
  --color-caution-border: #fed7aa;
  --color-coral:   #F87171;   /* coral accent */
  /* Inverted ground for follow-up offer cards, so they read as a distinct
     offer rather than as one more white card on the page. */
  --color-slab:       #31394A;
  --color-slab-btn-hover: #E8ECF4;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: 14px;
  line-height: 1.6;
  /* Sticky footer: fill the viewport so the footer sits at the bottom. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1 0 auto; }

a { color: var(--color-primary); }

/* Media never forces horizontal overflow on small screens. */
img, svg, video { max-width: 100%; }

/* ===== Warning Alert cards (Tenant Rating) ===== */
.wa-cards { display: flex; flex-direction: column; gap: 10px; }
.wa-card {
  position: relative; display: flex; align-items: center; gap: 13px;
  padding: 14px 16px; border: 1.5px solid var(--color-border); border-radius: 12px;
  background: var(--color-surface); cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.wa-card:hover { border-color: var(--color-border-strong, #c7d0e8); }
.wa-card input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.wa-ico {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: #fdecec; color: var(--color-danger);
  display: grid; place-items: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.wa-ico svg { width: 24px; height: 24px; display: block; }
.wa-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wa-title { font-weight: 700; font-size: 0.95rem; color: var(--color-text); }
.wa-desc { font-size: 0.85rem; color: var(--color-muted); line-height: 1.4; }
.wa-tick {
  margin-left: auto; flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--color-border-input, #CBD5E1); color: #fff;
  display: grid; place-items: center; align-self: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.wa-tick svg { width: 13px; height: 13px; opacity: 0; }
/* Flagged state */
.wa-card:has(input:checked) { border-color: var(--color-danger); background: #fdecec; }
.wa-card:has(input:checked) .wa-ico { background: var(--color-danger); color: #fff; }
.wa-card:has(input:checked) .wa-tick { background: var(--color-danger); border-color: var(--color-danger); }
.wa-card:has(input:checked) .wa-tick svg { opacity: 1; }
.wa-card:focus-within { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ===== Header ===== */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 40px;
  background-color: var(--color-surface);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
}
.brand {
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.brand .brand-logo { height: 50px; width: auto; display: block; }
.nav > ul { list-style: none; display: flex; gap: 32px; align-items: center; flex-wrap: wrap; }
.nav a {
  text-decoration: none;
  color: #475569;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.4px;
  transition: color 0.2s ease-in-out;
}
.nav a:hover { color: var(--color-accent); }

/* Login / Logout / Sign Up buttons.
   Note: selectors are scoped as `.nav a.nav-btn...` so they beat the base
   `.nav a` / `.nav a:hover` colour rules (specificity). */
.nav a.nav-btn {
  display: inline-block;
  padding: 9px 20px;
  border-radius: 8px;
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  will-change: transform;
}
.nav a.nav-btn:hover { transform: translateY(-2px); }
.nav a.nav-btn:active { transform: translateY(0); }
/* Login / Logout — filled gradient, white text always */
.nav a.nav-btn-login {
  color: #fff;
  background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
  background-size: 160% 160%;
  background-position: 0% 50%;
  border: 2px solid transparent;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.28);
}
.nav a.nav-btn-login:hover,
.nav a.nav-btn-login:focus {
  color: #fff;
  background-position: 100% 50%;
  box-shadow: 0 8px 20px rgba(124, 58, 237, 0.45);
}
/* Sign Up — outline; text turns white on hover/focus */
.nav a.nav-btn-signup {
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  background: transparent;
}
.nav a.nav-btn-signup:hover,
.nav a.nav-btn-signup:focus {
  color: #fff;
  background: var(--color-primary);
  box-shadow: 0 6px 16px rgba(30, 64, 175, 0.30);
}

/* Burger toggle — hidden on desktop, shown below the nav breakpoint. */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 9px;
}
.nav-toggle span {
  display: block;
  height: 3px;
  width: 26px;
  border-radius: 2px;
  background: var(--color-primary);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Dropdown (Lodge ▾) */
.has-dropdown { position: relative; }
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.15);
  padding: 8px 0;
  min-width: 190px;
  list-style: none;
  z-index: 30;
}
/* Invisible bridge over the gap so the menu doesn't close when the cursor
   crosses from the toggle down to the menu. */
.dropdown-menu::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
}
.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu { display: block; }
.dropdown-menu li { display: block; }
.dropdown-menu a { display: block; padding: 9px 18px; white-space: nowrap; font-weight: 500; }
.dropdown-menu a:hover { background: var(--color-bg); }

/* ===== Member left sidebar (Option 03) =====
   One markup, three responsive forms:
     desktop  > 1024px  full rail, labels, click-to-expand groups
     tablet   768–1024  slim icon rail, hover tooltips + group flyouts
     mobile   < 768px   off-canvas drawer opened by the ☰ top bar
   The active link is set in JS (longest-prefix match on the path). */
:root {
  --side-w: 258px; --rail-w: 68px; --topbar-h: 56px;
  /* Shared content widths: every page's main column caps at --page-max; forms
     stay narrower (--form-max) for readability. Change here to reflow the app. */
  --page-max: 1500px;
  --form-max: 1100px;
}

body.has-sidebar { padding-left: var(--side-w); }

.app-side {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--side-w); z-index: 60;
  background: var(--color-surface); border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column; gap: 3px; padding: 14px 12px; overflow-y: auto;
}
.app-side-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; text-decoration: none; }
.app-side-brand .side-logo { width: 35px; height: 36px; flex: none; }
.app-side-brand .side-word { font-weight: 800; color: var(--color-primary); font-size: 1.29rem; letter-spacing: -0.01em; }
.side-nav { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; }

.snav {
  position: relative; display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: 9px; font: inherit; font-size: 0.92rem; font-weight: 600;
  color: var(--color-muted); background: none; border: 0; cursor: pointer; text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.snav .snav-ic { width: 23px; height: 23px; flex: none; color: #64748b; transition: color 0.15s ease; }
.snav-label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.snav:hover { background: var(--color-field-bg); color: var(--color-text); }
.snav:hover .snav-ic { color: var(--color-primary); }
.snav.active { background: rgba(30, 64, 175, 0.10); color: var(--color-primary); font-weight: 700; box-shadow: inset 3px 0 0 var(--color-primary); }
.snav.active .snav-ic { color: var(--color-primary); }
/* On the active row, shift each icon's duotone accent to primary so the glyph
   reads as a single clean blue; --color-accent inherits into the <use> tree. */
.snav.active .snav-ic { --color-accent: var(--color-primary); }
.snav .snav-chev { width: 15px; height: 15px; flex: none; opacity: 0.55; transition: transform 0.18s ease; }

.snav-group { display: flex; flex-direction: column; }
.snav-group.open > .snav-toggle .snav-chev { transform: rotate(90deg); }
.snav-subs { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.2s ease; }
.snav-group.open > .snav-subs { grid-template-rows: 1fr; }
.snav-subs-inner { overflow: hidden; min-height: 0; }
.snav-subs-head { display: none; }
.snav-subs a {
  display: block; padding: 7px 11px 7px 41px; border-radius: 8px; font-size: 0.86rem;
  color: var(--color-muted); text-decoration: none; font-weight: 500;
}
.snav-subs a:hover { color: var(--color-primary); background: rgba(30, 64, 175, 0.08); }
.snav-subs a.active { color: var(--color-primary); background: rgba(30, 64, 175, 0.10); font-weight: 650; }

.side-divider { height: 1px; background: var(--color-border); margin: 8px 6px; }
.side-grow { flex: 1 1 auto; }
.snav-tip { display: none; }

/* Compact Member ID chip pinned near the bottom of the member sidebar. */
.side-memberid {
  margin: 2px 10px 6px; padding: 4px 10px; border-radius: 7px;
  background: rgba(30, 64, 175, 0.06); border: 1px solid var(--color-border);
  display: flex; align-items: baseline; gap: 6px; line-height: 1.15;
}
.side-memberid-k {
  font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 700; color: var(--color-muted);
}
.side-memberid-v {
  font-size: 0.84rem; font-weight: 800; color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

/* Read-only Member ID row on the Account Details page. */
.member-id-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 20px; padding: 12px 16px; border-radius: 10px;
  background: rgba(30, 64, 175, 0.05); border: 1px solid var(--color-border);
}
.member-id-label {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 700; color: var(--color-muted);
}
.member-id-value {
  font-size: 1.2rem; font-weight: 800; color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.member-id-hint { font-size: 0.8rem; color: var(--color-muted); flex: 1 1 220px; }

/* Mobile-only chrome (top bar + scrim) — hidden until the drawer breakpoint. */
.app-topbar { display: none; }
.app-scrim { display: none; }

/* ---- Tablet: slim icon rail (768–1024px) ---- */
@media (min-width: 768px) and (max-width: 1024px) {
  body.has-sidebar { padding-left: var(--rail-w); }
  .app-side { width: var(--rail-w); padding: 12px 0; align-items: center; overflow: visible; }
  .app-side-brand { padding: 4px 0 12px; justify-content: center; }
  .app-side-brand .side-word { display: none; }
  .side-nav { width: 100%; align-items: center; }
  .snav { width: 46px; height: 46px; padding: 0; gap: 0; justify-content: center; border-radius: 12px; }
  .snav.active { box-shadow: none; }
  .snav-label, .snav .snav-chev { display: none; }
  .side-memberid { display: none; }  /* no room for the ID text on the icon rail */
  .side-divider { width: 40px; margin: 8px auto; }

  /* Single-link items get a hover tooltip. */
  .snav-tip {
    display: block; position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%);
    background: var(--color-text); color: #fff; font-size: 0.78rem; font-weight: 600; white-space: nowrap;
    padding: 5px 10px; border-radius: 7px; opacity: 0; visibility: hidden; transition: opacity 0.13s ease;
    pointer-events: none; z-index: 70; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.22);
  }
  .snav:hover .snav-tip { opacity: 1; visibility: visible; }

  /* Group items open their sub-items in a hover flyout to the right instead. */
  .snav-group { position: relative; }
  .snav-group .snav-tip { display: none; }
  .snav-subs {
    position: absolute; left: calc(100% + 10px); top: 0; min-width: 200px;
    grid-template-rows: none; background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: 11px; box-shadow: 0 12px 34px rgba(15, 23, 42, 0.18); padding: 7px;
    opacity: 0; visibility: hidden; transform: translateX(-4px);
    transition: opacity 0.14s ease, transform 0.14s ease; z-index: 70;
  }
  .snav-group:hover > .snav-subs { opacity: 1; visibility: visible; transform: none; }
  .snav-subs-inner { overflow: visible; }
  .snav-subs a { padding: 8px 11px; }
  .snav-subs-head {
    display: block; padding: 4px 11px 6px; font-size: 0.68rem; font-weight: 800;
    letter-spacing: 0.09em; text-transform: uppercase; color: var(--color-primary);
  }
}

/* ---- Mobile: off-canvas drawer (< 768px) ---- */
@media (max-width: 767px) {
  body.has-sidebar { padding-left: 0; }
  .app-topbar {
    display: flex; align-items: center; gap: 10px; height: var(--topbar-h); padding: 0 12px;
    background: var(--color-surface); border-bottom: 1px solid var(--color-border);
    position: sticky; top: 0; z-index: 55;
  }
  .app-burger {
    width: 40px; height: 40px; flex: none; border: 0; background: none; border-radius: 9px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; color: var(--color-primary);
  }
  .app-burger:hover { background: var(--color-field-bg); }
  .app-burger svg { width: 24px; height: 24px; }
  .app-topbrand { display: inline-flex; align-items: center; text-decoration: none; }
  .app-topbrand .brand-logo { height: 38px; width: auto; display: block; }

  .app-side {
    width: var(--side-w); transform: translateX(-102%); transition: transform 0.24s ease;
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.28);
  }
  body.has-sidebar.side-open .app-side { transform: none; }
  .app-scrim {
    display: block; position: fixed; inset: 0; z-index: 59; background: rgba(15, 23, 42, 0.46);
    opacity: 0; visibility: hidden; transition: opacity 0.2s ease;
  }
  body.has-sidebar.side-open .app-scrim { opacity: 1; visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .app-side, .app-scrim, .snav-subs, .snav-chev, .snav-tip { transition: none !important; }
}

/* ===== Gradient Banner ===== */
.gradient-banner {
  width: 100%;
  min-height: 96px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  display: flex;
  align-items: center;
  padding: 24px 8%;
  margin-bottom: 16px;
  /* 45-degree angled bottom corners with softly rounded points (matches the
     home page hero). Fallback polygon = sharp chamfer where shape() is
     unsupported; geometry driven by custom properties. */
  --gb-c: 60px;
  --gb-t: 12px;
  --gb-td: calc(var(--gb-t) * 0.7071);
  --gb-fr: calc(var(--gb-t) * 2.4142);
  --gb-clip: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--gb-c)),
    calc(100% - var(--gb-c)) 100%,
    var(--gb-c) 100%,
    0 calc(100% - var(--gb-c))
  );
  clip-path: var(--gb-clip);
}
@supports (clip-path: shape(from 0 0, line to 1px 1px, close)) {
  .gradient-banner {
    --gb-clip: shape(
      from 0 0,
      line to 100% 0,
      line to 100% calc(100% - var(--gb-c) - var(--gb-t)),
      arc to calc(100% - var(--gb-td)) calc(100% - var(--gb-c) + var(--gb-td)) of var(--gb-fr) var(--gb-fr) cw,
      line to calc(100% - var(--gb-c) + var(--gb-td)) calc(100% - var(--gb-td)),
      arc to calc(100% - var(--gb-c) - var(--gb-t)) 100% of var(--gb-fr) var(--gb-fr) cw,
      line to calc(var(--gb-c) + var(--gb-t)) 100%,
      arc to calc(var(--gb-c) - var(--gb-td)) calc(100% - var(--gb-td)) of var(--gb-fr) var(--gb-fr) cw,
      line to var(--gb-td) calc(100% - var(--gb-c) + var(--gb-td)),
      arc to 0 calc(100% - var(--gb-c) - var(--gb-t)) of var(--gb-fr) var(--gb-fr) cw,
      close
    );
  }
}
.gradient-banner h1 { color: #fff; font-size: 1.8rem; font-weight: 700; letter-spacing: 0.05em; }
.gradient-banner .banner-subtitle { margin: 4px 0 0; color: rgba(255, 255, 255, 0.9); font-size: 1.05rem; font-weight: 600; }
.banner-badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.banner-switch { margin: 10px 0 0; color: rgba(255, 255, 255, 0.9); font-size: .95rem; font-weight: 500; }
.banner-switch a { color: #fff; font-weight: 700; text-decoration: underline; }
.banner-switch a:hover { text-decoration: none; }

/* ===== Floating banner decorations =====
   Decorative line-art SVGs (static/img/*.svg) that drift slowly around both
   halves of every gradient banner. Two layers are injected by
   static/js/banner-float.js into each .hero / .gradient-banner (a right layer
   and a mirrored left one), so it applies site-wide without touching
   individual templates. Purely decorative: pointer-events off, aria-hidden,
   and it sits behind the banner content. */
.hero, .gradient-banner { position: relative; overflow: hidden; }
/* Keep real banner content above the floating layer. */
.hero > *:not(.banner-float-layer),
.gradient-banner > *:not(.banner-float-layer) { position: relative; z-index: 1; }

.banner-float-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;              /* right half of the banner */
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
/* Left half: the same shapes in the same orientation (not mirrored), reusing
   the identical shape coordinates within the left half of the banner. */
.banner-float-layer--left {
  left: 0;
  right: 50%;
}
.banner-floaty {
  position: absolute;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.18;
  /* Render the slate line-art as white so it reads on the gradient. */
  filter: brightness(0) invert(1);
  will-change: transform;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
.banner-floaty.house    { background-image: url("../img/house.fb441c95e396.svg"); }
.banner-floaty.people   { background-image: url("../img/people.896dd799a83a.svg"); }
.banner-floaty.building { background-image: url("../img/building.761e1e503e91.svg"); }
.banner-floaty.key      { background-image: url("../img/key.e7dfaccae023.svg"); }

/* Very slow, gentle drift — a few variants so the shapes don't move in sync. */
@keyframes bannerFloatA {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(-14px, -18px) rotate(4deg); }
}
@keyframes bannerFloatB {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(16px, -12px) rotate(-5deg); }
}
@keyframes bannerFloatC {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(-12px, 14px) rotate(-3deg); }
}
@keyframes bannerFloatD {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(10px, 16px) rotate(3deg); }
}

/* Respect users who prefer reduced motion — show the shapes, don't animate. */
@media (prefers-reduced-motion: reduce) {
  .banner-floaty { animation: none !important; }
}
/* On small screens the banners are compact; hide the decorations. */
@media (max-width: 700px) {
  .banner-float-layer { display: none; }
}

/* Debt Collection page */
.dc-hero { flex-direction: column; align-items: flex-start; gap: 12px; }
.dc-hero p { color: #fff; opacity: 0.95; font-size: 1.05rem; max-width: 700px; margin: 0; }
/* Section heading + step timeline ("How debt recovery works"). */
.dc-h2 { color: var(--color-primary); font-size: 1.4rem; margin: 4px 0 4px; }
.dc-steps {
  list-style: none; margin: 20px 0 28px; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.dc-step { position: relative; text-align: center; padding: 0 10px; }
.dc-step-n {
  width: 46px; height: 46px; border-radius: 999px; margin: 0 auto 12px;
  display: grid; place-items: center; font-weight: 800; font-size: 1.05rem;
  background: var(--color-surface); border: 2px solid var(--color-accent);
  color: var(--color-accent); position: relative; z-index: 1;
}
.dc-step:not(:last-child)::after {
  content: ""; position: absolute; top: 23px; left: 62%; right: -38%; height: 2px;
  background: var(--color-border);
}
.dc-step b { display: block; font-size: 0.98rem; color: var(--color-text); }
.dc-step p { margin: 5px 0 0; font-size: 0.86rem; color: var(--color-muted); }
@media (max-width: 768px) {
  .dc-steps { grid-template-columns: 1fr; gap: 6px; }
  .dc-step { display: flex; gap: 14px; align-items: flex-start; text-align: left; padding: 8px 0; }
  .dc-step-n { margin: 0; flex: none; }
  .dc-step:not(:last-child)::after { display: none; }
}

.dc-panels {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px;
}
@media (max-width: 768px) { .dc-panels { grid-template-columns: 1fr; } }

/* "Prefer to go direct?" callout with the CIA upload button. */
.dc-direct {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  background: rgba(30, 64, 175, 0.05); border: 1px solid var(--color-border);
  border-radius: 14px; padding: 20px 24px;
}
.dc-direct-copy strong { color: var(--color-text); font-size: 1.05rem; }
.dc-direct-copy p { margin: 4px 0 0; color: var(--color-muted); font-size: 0.9rem; }
.dc-direct-btn {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  padding: 11px 20px; border-radius: 10px; text-decoration: none; font-weight: 700;
  color: var(--color-primary); background: var(--color-surface);
  border: 1.5px solid var(--color-primary); transition: background 0.15s, color 0.15s;
}
.dc-direct-btn:hover { background: var(--color-primary); color: #fff; }
@media (max-width: 560px) { .dc-direct { flex-direction: column; align-items: flex-start; } }
.dc-card {
  background: #fff; border: 1px solid var(--color-border);
  border-radius: 14px; padding: 24px 26px;
  box-shadow: 0 4px 14px rgba(30, 64, 175, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.dc-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(30, 64, 175, 0.12); }
.dc-card h3 { color: var(--color-primary); font-size: 1.15rem; margin: 0 0 14px; }
.dc-card ul { list-style: disc; margin: 0; padding-left: 20px; }
.dc-card li { margin-bottom: 10px; color: var(--color-text); }
.dc-card li:last-child { margin-bottom: 0; }
.dc-card a { color: var(--color-accent); font-weight: 600; }
.dc-cta {
  display: block; width: max-content; margin: 34px auto 8px;
  padding: 14px 26px; border-radius: 10px; text-decoration: none; font-weight: 700;
  color: #fff; background: linear-gradient(180deg, var(--color-accent), var(--color-primary-dark));
}
.dc-cta:hover { filter: brightness(1.08); }

/* ===== Hero (public pages) ===== */
.hero {
  background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
  color: #fff;
  padding: 4rem 1.5rem;
  text-align: center;
}
.hero h1 { font-size: 2.5rem; margin-bottom: 1rem; }
.hero p { font-size: 1.2rem; opacity: 0.94; }

/* ===== Auth (login) banner + card ===== */
.auth-banner {
  width: 100%;
  min-height: 60vh;
  background: var(--color-bg); /* solid #F1F5F9 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.auth-cards {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  width: 100%;
}
.login-card {
  background-color: var(--color-surface);
  border-radius: 10px;
  width: 100%;
  max-width: 380px;
  padding: 30px;
  position: relative;
  z-index: 1;
  box-shadow: 0 12px 34px rgba(124, 58, 237, 0.22);
  overflow: hidden;
}
.login-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(to right, var(--color-accent), var(--color-primary));
}
.login-card h2 { text-align: center; margin-bottom: 5px; color: var(--color-primary); font-size: 1.875rem; }
.login-card .subheader { text-align: center; color: var(--color-muted); margin-bottom: 30px; font-weight: 400; }
.forgot-link { display: inline-block; font-size: 14px; color: var(--color-accent); text-decoration: none; margin-bottom: 15px; }
.forgot-link:hover { text-decoration: underline; }
.login-button {
  width: 100%;
  padding: 14px;
  background: linear-gradient(0deg, var(--color-accent), var(--color-primary));
  color: #fff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
}
.login-button:hover { filter: brightness(1.08); }
.signup-button {
  width: 100%;
  padding: 12px;
  background-color: #fff;
  color: var(--color-accent);
  border: 2px solid var(--color-accent);
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  margin-top: 15px;
  text-align: center;
  display: block;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}
.signup-button:hover { background-color: var(--color-accent); color: #fff; }

/* ===== Audience-split auth (tenant vs landlord / property manager) ===== */
/* One centred card per audience, each with its own accent + badge so the two
   sign-in paths read as clearly distinct. */
.auth-single {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.auth-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin: 0 auto 14px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
}
.auth-badge svg { width: 18px; height: 18px; }
.auth-badge--pm { color: var(--color-primary); background: rgba(30, 64, 175, .10); }
.auth-badge--tenant { color: var(--color-accent); background: rgba(124, 58, 237, .10); }

/* Landlord / property-manager card — blue accent. */
.login-card--pm::before { background: var(--color-primary); }
.login-card--pm { box-shadow: 0 12px 34px rgba(30, 64, 175, .20); }
.login-card--pm h2 { color: var(--color-primary); }
.login-card--pm .forgot-link { color: var(--color-primary); }
.login-card--pm .login-button {
  background: linear-gradient(0deg, var(--color-primary-light), var(--color-primary));
}
.login-card--pm .signup-button { color: var(--color-primary); border-color: var(--color-primary); }
.login-card--pm .signup-button:hover { background: var(--color-primary); color: #fff; }

/* Tenant card — violet accent. */
.login-card--tenant::before { background: var(--color-accent); }
.login-card--tenant { box-shadow: 0 12px 34px rgba(124, 58, 237, .22); }
.login-card--tenant h2 { color: var(--color-accent); }
.login-card--tenant .forgot-link { color: var(--color-accent); }
.login-card--tenant .login-button {
  background: linear-gradient(0deg, #9061f0, var(--color-accent));
}
.login-card--tenant .signup-button { color: var(--color-accent); border-color: var(--color-accent); }
.login-card--tenant .signup-button:hover { background: var(--color-accent); color: #fff; }

.auth-switch {
  text-align: center;
  color: var(--color-muted);
  font-size: 14px;
  margin: 2px 0 0;
}
.auth-switch a { font-weight: 700; text-decoration: none; white-space: nowrap; }
.auth-switch a:hover { text-decoration: underline; }

/* Tenant hand-off card on the (single-screen) landlord/PM login. The left card
   is a real login form; this right card guides tenants to their own login.
   It gets a soft violet-tinted panel so the two cards read as distinct. */
.auth-cta {
  display: flex;
  flex-direction: column;
  background: linear-gradient(165deg, #faf8ff 0%, #f1e9ff 100%);
  border: 1px solid #e7dbff;
}
.auth-benefits {
  list-style: none;
  margin: 8px 0 22px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.auth-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-muted);
}
.auth-check { width: 22px; height: 22px; flex: none; margin-top: 0; color: #fff; fill: var(--color-accent); }
.auth-cta-btn {
  display: block;
  margin-top: auto;
  text-align: center;
  text-decoration: none;
}
.auth-cta-alt { text-align: center; color: var(--color-muted); font-size: 14px; margin: 12px 0 0; }
.auth-cta-alt a { font-weight: 700; color: var(--color-accent); text-decoration: none; }
.auth-cta-alt a:hover { text-decoration: underline; }

.auth-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 18px 0 40px;
  color: var(--color-muted);
  font-size: 14px;
  font-weight: 600;
}
.auth-secure svg { width: 17px; height: 17px; }

/* ===== Split-canvas login (brand story panel + form) =====
   Two columns: a gradient brand panel on the left and the sign-in form on the
   right. Used by both the member (/login/) and tenant (/tenant/login/) pages,
   themed blue and violet respectively. */
/* The login pages fill the viewport, but are NOT hard-locked to it: if the
   content is taller than the screen (small viewport, or the user has zoomed in
   / enlarged text), the whole page scrolls normally so every control stays
   reachable. */
body.auth-page { min-height: 100vh; min-height: 100dvh; }
/* main is a flex column so the split can flex to FILL the viewport (a percentage
   height wouldn't resolve here — main has no explicit height) and still grow past
   it, scrolling the page, when its content is taller. */
body.auth-page main { display: flex; flex-direction: column; flex: 1 0 auto; min-height: 0; }
.auth-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-rows: 1fr;
  flex: 1 0 auto;
  background: var(--color-surface);
}
/* Panels grow with their content and let the page scroll as one, rather than
   trapping the form behind a non-obvious inner scrollbar. */
.auth-hero, .auth-formside { min-height: 0; }
/* The split login pages carry their own brand link in the hero, so the public
   marketing header is redundant (a "Login" button on the login page) and clutters
   the immersive layout — hide it. Scoped with :has() to the hero pages only, so
   the single-panel password-reset pages keep their header. */
body.auth-page:has(.auth-hero) .site-header { display: none; }
.auth-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 46px 52px;
  color: #fff;
  /* Softer gradient: eases to a mid tone (not near-black) so the colour meeting
     the form side isn't a harsh jump. */
  background: radial-gradient(125% 130% at 0% 0%, #3b1e8f 0%, #244bc4 52%, #1b2f7a 100%);
}
.auth-hero--tenant {
  background: radial-gradient(120% 135% at 0% 0%, #8b5cf6 0%, #6f42dd 48%, #4a2aa0 100%);
}
/* Feathered seam: the hero lightens toward the right edge so it dissolves into
   the form side instead of ending on a hard line. Sits above the gradient but
   below the copy (which lives in the transparent left ~60%). */
.auth-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 58%, rgba(255, 255, 255, 0.15) 100%);
}
.auth-hero-copy, .auth-hero-brand { position: relative; z-index: 1; }
.auth-hero-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -.02em;
}
.auth-hero-brand .side-logo { width: 32px; height: 33px; }
.auth-hero-brand .hero-lockup { height: 42.5px; width: auto; display: block; }
.auth-hero-copy { margin-top: auto; padding-top: 40px; }
/* Marketing headline in the hero. Not a real heading element (see the templates)
   so the form's <h1> stays first in the document outline; styled to read as a
   display heading regardless. */
.auth-hero-lead {
  margin: 0 0 14px;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  font-weight: 800;
  max-width: 17ch;
  text-wrap: balance;
}
.auth-hero-copy > p { margin: 0 0 28px; color: rgba(255, 255, 255, .82); font-size: 1.02rem; max-width: 42ch; }
.auth-hero-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.auth-hero-points > li { display: flex; align-items: flex-start; gap: 13px; }
.auth-hero-ic {
  width: 40px; height: 40px; flex: none;
  border-radius: 11px;
  background: rgba(255, 255, 255, .13);
  display: grid; place-items: center;
}
.auth-hero-ic svg { width: 21px; height: 21px; color: #fff; }
.auth-hero-points b { display: block; font-size: .96rem; font-weight: 700; }
.auth-hero-points span span, .auth-hero-points > li > span > span { font-size: .84rem; color: rgba(255, 255, 255, .68); }

.auth-formside {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  /* Feathered seam: a faint tint of the hero's colour bleeds in from the left
     edge and fades to the plain surface, so the two panels blend. */
  background: linear-gradient(90deg, rgba(30, 64, 175, 0.06), var(--color-surface) 40%);
  box-shadow: inset 26px 0 34px -26px rgba(30, 64, 175, 0.38);
}
.auth-split--tenant .auth-formside {
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.07), var(--color-surface) 40%);
  box-shadow: inset 26px 0 34px -26px rgba(124, 58, 237, 0.42);
}
/* Company logo shown only on mobile, centered in the brand gradient above the
   login card. Hidden on desktop where the hero panel already carries the logo. */
.auth-mobile-logo { display: none; }
.auth-form { width: 100%; max-width: 380px; }
.auth-form h1 { margin: 14px 0 4px; font-size: 1.65rem; letter-spacing: -.02em; color: var(--color-text); }
/* Inline login messages (errors, lockouts, the "account created" notice), shown
   in the form rather than as a toast that would float detached in the top-right
   with the navbar hidden on auth pages. */
.auth-messages { margin: 12px 0 22px; }
.auth-message {
  margin: 0 0 8px; padding: 10px 12px; border-radius: 9px;
  font-size: .88rem; font-weight: 500; line-height: 1.45;
  border-left: 4px solid var(--color-accent); background: #f5f3ff; color: #5b21b6;
}
.auth-message:last-child { margin-bottom: 0; }
.auth-message--error { border-left-color: var(--color-danger, #DC2626); background: #fff1f2; color: #9f1239; }
.auth-message--success { border-left-color: var(--color-success, #16A34A); background: #f0fdf4; color: #166534; }
.auth-form-sub { margin: 0 0 26px; color: var(--color-muted); font-size: .93rem; }
.auth-form .forgot-link { color: var(--color-primary); }
.auth-form .login-button { background: linear-gradient(0deg, var(--color-primary-light), var(--color-primary)); }
.auth-form .signup-button { color: var(--color-primary); border-color: var(--color-primary); }
.auth-form .signup-button:hover { background: var(--color-primary); color: #fff; }
.auth-form-alt { margin: 20px 0 0; text-align: center; color: var(--color-muted); font-size: .9rem; }
.auth-form-alt a { color: var(--color-accent); font-weight: 700; text-decoration: none; }
.auth-form-alt a:hover { text-decoration: underline; }

/* Role switch (segmented) at the top of the auth form. Lets people pick
   Managers vs Tenants before filling in the form. The active segment carries
   the current side's colour (blue for managers, violet for tenants); the other
   segment hovers to the colour of the side it leads to. */
.auth-roles {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px; width: 100%;
  padding: 4px; margin: 0 0 22px;
  background: #f1f5f9; border: 1px solid #e6e9f1; border-radius: 12px;
}
.auth-role {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 8px; border-radius: 9px; text-decoration: none;
  font-size: .85rem; font-weight: 700; color: var(--color-muted);
  transition: color .12s ease, background .12s ease;
}
.auth-role svg { width: 15px; height: 15px; }
.auth-role:hover { color: var(--color-accent); }
.auth-role--active, .auth-role--active:hover {
  background: var(--color-surface); color: var(--color-primary); cursor: default;
  box-shadow: 0 2px 8px -4px rgba(15, 23, 42, .28);
}
.auth-split--tenant .auth-role:hover { color: var(--color-primary); }
.auth-split--tenant .auth-role--active,
.auth-split--tenant .auth-role--active:hover { color: var(--color-accent); }

/* Quiet fallback chip on the bottom "other role" line. Defaults to violet
   (tenant-bound); the --member modifier runs blue (manager-bound). */
.auth-form-alt .auth-alt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 11px 3px 5px; border-radius: 999px;
  border: 1px solid transparent; color: var(--color-accent); font-weight: 700;
  transition: border-color .12s ease, background .12s ease;
}
.auth-form-alt .auth-alt-chip:hover {
  border-color: rgba(124, 58, 237, .28); background: rgba(124, 58, 237, .06);
  text-decoration: none;
}
.auth-alt-ic {
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  border-radius: 999px; background: rgba(124, 58, 237, .12);
}
.auth-alt-ic svg { width: 12px; height: 12px; color: var(--color-accent); }
.auth-alt-arrow { display: inline-block; transition: transform .15s ease; }
.auth-form-alt .auth-alt-chip:hover .auth-alt-arrow { transform: translateX(3px); }
.auth-form-alt .auth-alt-chip--member { color: var(--color-primary); }
.auth-form-alt .auth-alt-chip--member:hover {
  border-color: rgba(30, 64, 175, .28); background: rgba(30, 64, 175, .06);
}
.auth-alt-chip--member .auth-alt-ic { background: rgba(30, 64, 175, .12); }
.auth-alt-chip--member .auth-alt-ic svg { color: var(--color-primary); }

/* The login password field has no complexity rule, so any non-empty value is
   technically ":valid" — which would light up the green success border, label
   and tick and wrongly imply the password has been checked/accepted. Suppress
   that success affordance on the hero login pages only; the password-reset /
   signup fields (which DO validate strength) keep their green feedback. */
.auth-split:not(.auth-split--single) .auth-form input[type="password"]:not(:placeholder-shown):valid:not(:focus) {
  border-color: var(--color-border-input);
}
.auth-split:not(.auth-split--single) .auth-form input[type="password"]:not(:placeholder-shown):valid:not(:focus) + .label-text {
  color: var(--color-muted);
}
.auth-split:not(.auth-split--single) .auth-form input[type="password"]:not(:placeholder-shown):valid ~ .tick {
  display: none;
}

/* Tenant side runs violet */
.auth-split--tenant .auth-form .forgot-link { color: var(--color-accent); }
.auth-split--tenant .auth-form .login-button { background: linear-gradient(0deg, #9061f0, var(--color-accent)); }
.auth-split--tenant .auth-form .signup-button { color: var(--color-accent); border-color: var(--color-accent); }
.auth-split--tenant .auth-form .signup-button:hover { background: var(--color-accent); color: #fff; }

/* Password-reset pages: one panel, no brand hero. Same form styling, centred
   on a plain surface — there is no seam to feather without a hero beside it. */
.auth-split--single { grid-template-columns: 1fr; }
.auth-split--single .auth-formside {
  background: var(--color-surface);
  box-shadow: none;
}
.auth-form-errors {
  margin: 0 0 16px;
  padding: 12px 14px 12px 32px;
  list-style: none;
  border: 1px solid rgba(217, 52, 43, .28);
  border-left: 3px solid #d9342b;
  border-radius: 8px;
  background: rgba(217, 52, 43, .06);
  color: #8f231d;
  font-size: 14px;
  line-height: 1.5;
}
.auth-form-errors li { position: relative; }
.auth-form-errors li + li { margin-top: 6px; }

@media (max-width: 860px) {
  /* Single column, brand panel hidden. The form side carries the hero's brand
     gradient and the form itself floats on top as a white card, so the mobile
     login keeps the immersive blue (violet for tenants) backdrop behind a clean
     card instead of sitting on a plain surface. */
  .auth-split { grid-template-columns: 1fr; grid-template-rows: 1fr; }
  .auth-hero { display: none; }
  .auth-formside {
    flex-direction: column;
    padding: 32px 20px;
    background: radial-gradient(125% 130% at 0% 0%, #3b1e8f 0%, #244bc4 52%, #1b2f7a 100%);
    box-shadow: none;
  }
  /* Centered company logo sitting in the gradient above the login card. */
  .auth-mobile-logo {
    display: block;
    margin: 0 auto 26px;
  }
  .auth-mobile-logo img { height: 40px; width: auto; display: block; }
  /* Hide the role badge pill (Landlords & Property Managers / Tenants) on
     mobile — it duplicates the role switcher above and clutters the card. */
  .auth-badge { display: none; }
  .auth-split--tenant .auth-formside {
    background: radial-gradient(120% 135% at 0% 0%, #8b5cf6 0%, #6f42dd 48%, #4a2aa0 100%);
    box-shadow: none;
  }
  .auth-form {
    background: var(--color-surface);
    padding: 28px 24px;
    border-radius: 18px;
    box-shadow: 0 20px 50px -20px rgba(15, 23, 42, .45);
  }
  /* Single-panel auth pages (password reset/signup) have no hero gradient to
     evoke, so keep them on the plain surface without the card treatment. */
  .auth-split--single .auth-formside {
    background: var(--color-surface);
  }
  .auth-split--single .auth-form {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ===== Add Another Defaulter card (tribunal order) ===== */
.add-defaulter-card {
  width: 100%;
  max-width: 70%;
  border: 2px dashed var(--color-accent);
  background: #f5f3ff;
  border-radius: 10px;
  padding: 22px;
  text-align: center;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s ease;
}
.add-defaulter-card:hover { background: #ede9fe; }

/* ===== Lodgements / Checks list: search + table ===== */
.lodgement-search-card { padding: 20px 24px; }
.lodgement-search {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-end;
}
.ls-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 160px; }
.ls-field.ls-search { flex: 2 1 260px; }
.ls-field label { font-size: 12px; font-weight: 700; color: var(--color-accent); }
.ls-field input, .ls-field select {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-field-bg);
  font: inherit;
}
.ls-field input:focus, .ls-field select:focus { outline: none; border-color: var(--color-primary); }
.ls-submit { flex: 0 0 auto; }

.total-records { text-align: right; font-weight: 700; color: var(--color-muted); margin: 18px 0 8px; }

.lodgement-table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow-x: auto;
}

/* Admin area */
.admin-search { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.admin-search input[type="text"] {
  flex: 1 1 240px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
.admin-search select {
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.muted-sub { color: var(--color-muted); font-size: 0.88rem; }

/* Over-18 indicator on the application's date-of-birth field. */
.age-indicator { margin: -4px 0 10px; font-size: 0.9rem; font-weight: 600; }
.age-indicator .age-ind-over,
.age-indicator .age-ind-under {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px;
}
.age-indicator .age-ind-over { color: #166534; background: rgba(22, 101, 52, 0.1); }
.age-indicator .age-ind-under { color: #92400e; background: rgba(146, 64, 14, 0.12); }
.age-indicator svg { width: 16px; height: 16px; flex: none; }

/* Current living-situation selector (application step 4). */
.living-select { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 4px; }
.living-card { display: block; cursor: pointer; }
.living-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.living-card-inner {
  display: flex; flex-direction: column; position: relative;
  padding: 14px 44px 14px 16px;
  border: 1px solid var(--color-border); border-radius: 10px;
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
.living-card .living-title { font-weight: 600; color: var(--color-text); }
.living-card .living-sub { font-size: 0.86rem; color: var(--color-muted); margin-top: 2px; }
.living-card .living-badge {
  position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--color-border);
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s;
}
.living-card .living-badge svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.living-card input:focus-visible + .living-card-inner { box-shadow: 0 0 0 3px rgba(30,64,175,.18); }
.living-card input:checked + .living-card-inner { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.living-card input:checked + .living-card-inner .living-badge { opacity: 1; background: var(--color-primary); border-color: var(--color-primary); }

.admin-status { flex: 0 0 auto; min-width: 130px; max-width: 160px; }
.check-col { width: 34px; text-align: center; }
.check-col input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--color-accent); cursor: pointer; }
.bulk-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  background: #F5F8FF;
  border: 1px solid var(--color-border);
  border-radius: 12px;
}
.bulk-label { font-weight: 700; color: var(--color-text); }
.bulk-tier {
  flex: 0 0 auto;
  /* Size to the content (e.g. "Tenancy Database only (free)") rather than a
     fixed width that truncated the longer plan label. */
  width: auto;
  min-width: 240px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.admin-note {
  background: #F5F8FF;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 12px 16px;
  color: var(--color-muted);
  margin-bottom: 16px;
}
.admin-export-grid { display: flex; flex-wrap: wrap; gap: 12px; }

/* ===== GST / Sales Report — "Clean Ledger" layout ===== */
/* Intro line with the GST number pulled to the right of the lede. */
.gst-report .gst-intro {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px;
  margin-bottom: 20px;
}
.gst-report .gst-number {
  color: var(--color-muted); font-size: 0.9rem;
  padding: 4px 12px; border: 1px solid var(--color-border);
  border-radius: 999px; background: var(--color-surface);
}
/* Grouped horizontal filter bar replacing the narrow vertical stack. */
.gst-filter-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr)) auto;
  gap: 14px 16px;
  align-items: end;
  padding: 16px;
  background: var(--color-field-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  margin-bottom: 18px;
}
.gst-filter-bar .gfb-field { display: flex; flex-direction: column; gap: 6px; }
.gst-filter-bar label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--color-muted);
}
.gst-filter-bar input,
.gst-filter-bar select {
  padding: 9px 11px; border: 1px solid var(--color-border-input);
  border-radius: 9px; background: var(--color-surface);
  color: var(--color-text); font: inherit; width: 100%;
}
.gst-filter-bar .gfb-apply { height: 40px; align-self: end; }
@media (max-width: 640px) {
  .gst-filter-bar { grid-template-columns: 1fr 1fr; }
  .gst-filter-bar .gfb-apply { grid-column: 1 / -1; width: 100%; text-align: center; }
}
/* The "Showing …" caption below the filter bar. */
.gst-note { color: var(--color-muted); font-size: 0.9rem; margin: 0 2px 18px; }
/* Outlined download pills with a leading icon. */
.gst-export-grid .btn-download {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--color-surface); color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}
.gst-export-grid .btn-download:hover {
  background: #eef2ff; color: var(--color-primary-dark);
}
.gst-export-grid .dl-ico { flex: none; }

.member-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.gen-invoice-form { display: inline-flex; gap: 6px; align-items: center; }
.gen-invoice-ref { padding: 6px 10px; border: 1px solid var(--color-border-input); border-radius: 6px; font-size: 13px; min-width: 180px; }
.member-grid { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; margin: 6px 0 0; }
.member-meta-line { color: var(--color-muted); font-size: 14px; margin: 0 0 18px; }

/* Collapsible member activity log on the profile page. */
/* ===== Member status badge (admin member list) ===== */
.member-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.member-badge-new { color: #92400e; background: #fef3c7; }
.member-badge-terminated { color: #991b1b; background: #fee2e2; }
/* Inline Member Status dropdown on the members list */
.row-status {
  padding: 5px 8px; border-radius: 7px; font: inherit; font-size: 13px; font-weight: 600;
  border: 1.5px solid var(--color-border-input); background: var(--color-surface); cursor: pointer;
}
.row-status:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.16); }
.row-status-new { border-color: #f59e0b; color: #92400e; background: #fffbeb; }
.row-status-active { border-color: #10b981; color: #065f46; background: #ecfdf5; }
.row-status-terminated { border-color: #ef4444; color: #991b1b; background: #fef2f2; }
.row-status:disabled { opacity: .6; cursor: not-allowed; }

/* ===== Internal Admin Memo (member profile) ===== */
.memo-form textarea {
  width: 100%;
  border: 1.5px solid var(--color-border-input);
  border-radius: 10px;
  padding: 12px 13px;
  font: inherit;
  resize: vertical;
  margin-bottom: 12px;
}
.memo-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.16);
}
.memo-list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.memo-item {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: 6px;
  padding: 6px 10px;
  background: var(--color-surface);
}
.memo-item-system { border-left-color: var(--color-accent); background: rgba(124, 58, 237, 0.035); }
/* Compact single-line note: date · text · author · actions */
.memo-view { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.memo-date { font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.memo-body { flex: 1 1 auto; min-width: 0; color: var(--color-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.memo-author { color: var(--color-muted); font-size: 12px; white-space: nowrap; }
.memo-actions { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.memo-del-form { display: inline; }
/* Edit/Delete are plain text links — override the filled .form-card button style. */
.memo-actions .memo-link {
  border: none; background: none; padding: 0; margin: 0; cursor: pointer; box-shadow: none;
  font: inherit; font-size: 12px; font-weight: 700; color: var(--color-primary); width: auto;
}
.memo-actions .memo-link:hover { background: none; text-decoration: underline; }
.memo-actions .memo-link-danger { color: #b91c1c; }
/* Compact single-row edit form */
.memo-edit[hidden] { display: none; }
.memo-edit { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.memo-edit input {
  border: 1.5px solid var(--color-border-input); border-radius: 6px; padding: 6px 9px; font: inherit; font-size: 13px;
}
.memo-edit .memo-date-input { width: 210px; flex: none; }
.memo-edit .memo-body-input { width: auto; flex: 1 1 220px; min-width: 0; }
.memo-edit input:focus {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.16);
}
.memo-edit .btn-sm { padding: 6px 12px; font-size: 12.5px; flex: none; }

.activity-log { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; }
.activity-log > summary {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  padding: 16px 20px; list-style: none; font-weight: 700; color: var(--color-primary);
}
.activity-log > summary::-webkit-details-marker { display: none; }
.activity-log-title { font-size: 1.05rem; }
.activity-log-count { color: var(--color-muted); font-weight: 600; font-size: 13px; }
.activity-log-chevron { margin-left: auto; transition: transform .2s ease; color: var(--color-muted); }
.activity-log[open] > summary .activity-log-chevron { transform: rotate(180deg); }
.activity-log-body { padding: 0 20px 20px; }
.activity-log-table td.nowrap, .activity-log-table th { white-space: nowrap; }
.activity-log-note { color: var(--color-muted); font-size: 13px; margin: 12px 0 0; }
.activity-actor { color: var(--color-muted); }
.activity-tag {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; background: #eef1fb; color: var(--color-primary);
}
.activity-tag-login { background: #e7f6ee; color: #14804a; }
.activity-tag-logout { background: #f1f2f6; color: #5a6785; }
.activity-tag-impersonated { background: #f3e9fd; color: #7C3AED; }
.activity-tag-account_change { background: #fdf3e5; color: #b26a00; }
.toggle-line { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; color: var(--color-text); cursor: pointer; }
.toggle-line input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-accent); cursor: pointer; flex: none; }
.member-grid dt { font-weight: 700; color: var(--color-text); }
.member-grid dd { margin: 0; color: var(--color-muted); }
.admin-import { display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
.admin-import .ai-row { display: flex; flex-direction: column; gap: 6px; }
.admin-import label { font-weight: 700; color: var(--color-text); }
.admin-import select, .admin-import input[type="file"] {
  padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 8px; background: #fff;
}
.admin-import button { align-self: flex-start; }
.import-help { margin-top: 18px; color: var(--color-muted); font-size: 0.9rem; }
.import-help summary { cursor: pointer; color: var(--color-primary); font-weight: 700; }
.import-help code { background: #EEF2FF; padding: 1px 5px; border-radius: 4px; }
.manage-ui-list { color: var(--color-muted); line-height: 1.8; margin: 0; padding-left: 20px; }
.content-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.content-field label { font-weight: 700; color: var(--color-text); }
.content-field input[type="text"], .content-field textarea {
  padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 8px;
  font-family: inherit; font-size: 0.95rem; width: 100%; resize: vertical;
}
.manage-ui-save { margin-top: 8px; }
/* Inline "$ [amount]" price/fee editor used in the Product Pricing tables. */
.fee-input { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.fee-input input[type="number"] {
  width: 100px; display: inline-block;
  padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px;
}
.cms-group {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  margin-bottom: 6px;
  overflow: hidden;
}
.cms-group > summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 14px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 10px;
}
.cms-group > summary::-webkit-details-marker { display: none; }
.cms-group > summary::after {
  content: "\002B";
  margin-left: auto;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--color-primary);
}
.cms-group[open] > summary::after { content: "\2212"; }
.cms-group[open] > summary { border-bottom: 1px solid var(--color-border); }
.cms-count {
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--color-border);
  color: var(--color-primary);
  border-radius: 999px;
  padding: 1px 8px;
}
.cms-group-body { padding: 16px 18px; }
.lodgement-table { width: 100%; border-collapse: collapse; min-width: 900px; }
/* Solid slate header row (not per cell). */
.lodgement-table thead tr {
  background: var(--color-slab);
}
.lodgement-table thead th {
  background: transparent;
  color: #fff;
  text-align: left;
  padding: 12px 14px;
  font-size: 13px;
}
/* Sortable column headers: the whole header is a click target that toggles the
   sort direction, with an arrow marking the active column. */
.lodgement-table thead th.sortable-col { padding: 0; }
.lodgement-table thead th.sortable-col .sort-link {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 14px; color: #fff; text-decoration: none;
  white-space: nowrap; cursor: pointer;
}
.lodgement-table thead th.sortable-col .sort-link:hover { background: rgba(255, 255, 255, .12); }
.lodgement-table thead th.sortable-col.sorted .sort-link { font-weight: 700; }
.lodgement-table thead th.sortable-col .sort-arrow { font-size: 11px; line-height: 1; }
.lodgement-table tbody td { padding: 14px; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.lodgement-table tbody tr:nth-child(even) { background: #faf9ff; }
.lodgement-table .empty-row { text-align: center; color: var(--color-muted); padding: 30px; }
/* Listing thumbnail column (Applications Received) */
.app-thumb-head { width: 76px; }
.app-thumb-cell { width: 76px; }
.app-thumb {
  width: 60px; height: 46px; border-radius: 8px; object-fit: cover; display: block;
  border: 1px solid var(--color-border); background: var(--color-field-bg);
}
.app-thumb-empty { display: grid; place-items: center; color: var(--color-border-input); }
.app-thumb-empty svg { width: 24px; height: 24px; }
/* App-wide page-load overlay (page-loader.js). A TenancyHub house draws
   itself while the browser fetches the next page. */
.page-loader {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .18s ease, visibility .18s ease;
}
.page-loader.is-active { opacity: 1; visibility: visible; }
.page-loader-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.page-loader-house { width: 68px; height: 68px; color: var(--color-primary); }
.page-loader-house .pl-roof { stroke-dasharray: 60; stroke-dashoffset: 60; animation: pl-draw 1.8s ease-in-out infinite; }
.page-loader-house .pl-body { stroke-dasharray: 96; stroke-dashoffset: 96; animation: pl-draw 1.8s ease-in-out infinite .25s; }
.page-loader-text {
  font-size: 14px; font-weight: 700; letter-spacing: .04em;
  color: var(--color-primary);
}
@keyframes pl-draw {
  0%   { stroke-dashoffset: 96; opacity: .35; }
  45%  { stroke-dashoffset: 0;  opacity: 1; }
  75%  { stroke-dashoffset: 0;  opacity: 1; }
  100% { stroke-dashoffset: 0;  opacity: .15; }
}
@media (prefers-reduced-motion: reduce) {
  .page-loader-house .pl-roof,
  .page-loader-house .pl-body { animation: none; stroke-dashoffset: 0; }
  .page-loader-text { animation: pl-fade 1s ease-in-out infinite; }
  @keyframes pl-fade { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
}

/* Inline form error banner (e.g. duplicate tenant rating). */
.form-error-banner {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 18px 0 4px; padding: 14px 16px;
  background: #fdecec; border: 1px solid var(--color-danger);
  border-radius: 10px; color: #7f1d2b;
}
.form-error-banner .feb-icon { width: 22px; height: 22px; color: var(--color-danger); flex: none; margin-top: 1px; }
.form-error-banner .feb-body { display: flex; flex-direction: column; gap: 3px; font-size: 14px; line-height: 1.5; }
.form-error-banner strong { color: var(--color-danger); font-size: 15px; }
.form-error-banner a { font-weight: 700; text-decoration: underline; }
.form-error-banner .feb-list { margin: 4px 0 0; padding-left: 18px; }
.form-error-banner .feb-list li { margin: 2px 0; }

/* Distinct variant for the admin "Login as" (impersonate) action. */
.btn-sm.btn-sm-alt { background: var(--color-accent); }
.btn-sm.btn-sm-alt:hover { background: var(--color-accent-dark); }

/* Small solid-red button for destructive row actions (e.g. delete member). */
.btn-sm.btn-sm-danger { background: var(--color-danger); color: #fff; }
.btn-sm.btn-sm-danger:hover { background: #9f0f2e; }

/* Access pills (Team page). */
.status-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.status-pill.status-active { background: #e7f6ee; color: #14804a; }
.status-pill.status-terminated { background: #fdecec; color: var(--color-danger); }

/* Sign-up fee paid / unpaid badge in the members list Paid? column. */
.paid-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.paid-badge.paid-yes { background: #e7f6ee; color: #14804a; }
.paid-badge.paid-no { background: #fff7e6; color: #92400e; }

/* Check-type badges (admin Recent Checks table). Soft-tinted pills in the
   house style: brand blue for Tenancy, Centrix green, public-check purple;
   any other check type falls back to a neutral slate pill. */
.check-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.check-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  background: #eef1f7; color: var(--color-muted);
}
.check-badge-tenancy { background: #e8edfb; color: var(--color-primary); }
.check-badge-centrix { background: #e6f6ed; color: #0a8f45; }
.check-badge-public  { background: #f3e9fd; color: var(--color-accent); }

/* Selectable reason cards (14-Day Notice / Tenant Declined). Icon + label rows
   that highlight with a tick when chosen; multi-select. */
.reason-cards { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; max-width: 520px; }
.reason-card {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border: 1.5px solid var(--color-border); border-radius: 12px;
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.reason-card input { position: absolute; opacity: 0; pointer-events: none; }
.reason-card .rc-ico {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: var(--color-surface-2, #f6f8fd); color: var(--color-primary);
  display: grid; place-items: center; transition: background .15s ease, color .15s ease;
}
.reason-card .rc-ico svg { width: 24px; height: 24px; }
.reason-card .rc-title { font-weight: 600; font-size: 14px; color: var(--color-text); }
.reason-card .rc-check {
  margin-left: auto; width: 22px; height: 22px; border-radius: 50%; flex: none;
  border: 2px solid var(--color-border-input, #CBD5E1); color: #fff;
  display: grid; place-items: center; transition: background .15s ease, border-color .15s ease;
}
.reason-card .rc-check svg { width: 13px; height: 13px; opacity: 0; }
.reason-card:hover { border-color: var(--color-primary-light); }
.reason-card input:checked ~ .rc-ico { background: var(--color-primary); color: #fff; }
.reason-card:has(input:checked) { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface)); }
.reason-card input:checked ~ .rc-check { background: var(--color-primary); border-color: var(--color-primary); }
.reason-card input:checked ~ .rc-check svg { opacity: 1; }
.reason-card input:focus-visible ~ .rc-ico { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Sitewide bar shown while a superuser is impersonating a member. */
.impersonation-bar {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px 16px; padding: 9px 16px;
  background: var(--color-accent); color: #fff;
  font-size: 14px; font-weight: 600; text-align: center;
}
.impersonation-bar form { margin: 0; }
.impersonation-exit {
  border: 1px solid rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .12);
  color: #fff; font: inherit; font-weight: 700; cursor: pointer;
  padding: 5px 14px; border-radius: 999px; line-height: 1.2;
}
.impersonation-exit:hover { background: rgba(255, 255, 255, .22); }

/* Actions cell: a normal table cell (NOT a flex container) so its bottom
   border lines up with the rest of the row. A display:flex <td> no longer
   stretches to the row height, so the taller action buttons overflowed past
   the row's separator line. The inline-block buttons flow and wrap on their
   own; the margin gives the spacing the flex gap used to, and spaces wrapped
   rows vertically. vertical-align keeps mixed links/buttons/forms level. */
.options-cell > a,
.options-cell > button,
.options-cell > form,
.options-cell > .btn-sm { margin: 3px 6px 3px 0; vertical-align: middle; }
/* Floating row-action menu (row-menu.js). The list is position:fixed and
   placed at the button on open, so it overlays and is never clipped by the
   table's overflow container. */
.rowmenu { position: relative; display: inline-block; }
.rowmenu-btn { background: #F87171; }
.rowmenu-btn:hover { background: #ef4444; }
.rowmenu-list {
  position: fixed; z-index: 1000; min-width: 190px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 10px; box-shadow: 0 12px 30px rgba(15, 23, 42, 0.20);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.rowmenu-list[hidden] { display: none; }
.rowmenu-list a {
  padding: 9px 12px; border-radius: 7px; text-decoration: none; white-space: nowrap;
  color: var(--color-text); font-size: 0.88rem; font-weight: 600;
}
.rowmenu-list a:hover, .rowmenu-list a:focus { background: var(--color-bg); color: var(--color-primary); }
/* Button menu items (actions that open a dialog rather than navigate). */
.rowmenu-list button {
  width: 100%; text-align: left; border: none; background: none; cursor: pointer;
  padding: 9px 12px; border-radius: 7px; white-space: nowrap;
  color: var(--color-text); font-family: inherit; font-size: 0.88rem; font-weight: 600;
}
.rowmenu-list button.rowmenu-item-danger { color: var(--color-danger); }
.rowmenu-list button:hover, .rowmenu-list button:focus { background: #fdecec; }
/* Neutral cog (settings) trigger — overrides the red .rowmenu-btn default. */
.rowmenu-btn.cog-btn {
  background: var(--color-surface); color: var(--color-muted);
  border: 1px solid var(--color-border); padding: 7px;
  display: inline-grid; place-items: center;
}
.rowmenu-btn.cog-btn:hover {
  background: var(--color-bg); color: var(--color-primary); border-color: var(--color-primary);
}
.cog-btn svg { width: 18px; height: 18px; display: block; }
/* Password field inside the delete-confirm modal. */
.modal-pw {
  width: 100%; box-sizing: border-box; margin: 4px 0 18px;
  padding: 11px 13px; border: 1px solid var(--color-border); border-radius: 8px;
  font-size: 0.95rem; font-family: inherit;
}
.modal-pw:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15); }

/* Application status badges (tenant "My Applications" + PM applications). */
.status-badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: #eef2f7; color: #475569;
}
.status-badge.status-new { background: #e0edff; color: #1d4ed8; }
.status-badge.status-reviewing { background: #fef3c7; color: #92400e; }
.status-badge.status-shortlisted { background: #ede9fe; color: #6d28d9; }
.status-badge.status-approved { background: #dcfce7; color: #15803d; }
.status-badge.status-declined { background: #fee2e2; color: #b91c1c; }
.status-badge.status-withdrawn { background: #f1f5f9; color: #475569; }
/* Listing lifecycle: an expired listing has aged out of search and can be
   relisted free. */
.status-badge.status-expired { background: #f1f5f9; color: #475569; }
/* Rental listing lifecycle statuses. */
.status-badge.status-draft     { background: #fef3c7; color: #92400e; }
.status-badge.status-available { background: #dcfce7; color: #15803d; }
.status-badge.status-tenanted  { background: #e0edff; color: #1d4ed8; }

/* PM application detail — header row + inline status form. */
/* Thin gradient top line on the application header card (like the Tenant
   Check page sections). */
.pm-app-card { position: relative; overflow: hidden; }
.pm-app-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
  background: linear-gradient(to right, var(--color-accent), var(--color-primary));
}
/* These cards borrow .recent-card for its look, but its 8px/20px padding is
   tuned for dashboard *list* cards and leaves content crowding the accent bar.
   Set the padding these cards actually want. */
.pm-app-card.recent-card { padding: 20px 24px; }
.pm-app-topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.app-topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.app-topbar-actions form { display: inline-flex; }
.pm-app-head { display: flex; justify-content: space-between; align-items: stretch; gap: 20px; flex-wrap: wrap; }
.pm-app-headmain { min-width: 0; flex: 1 1 300px; }
/* .dash-heading carries a 32px top margin for use as a page section heading;
   as a card title it sits at the top of the card. */
.pm-app-card .dash-heading { margin: 0 0 4px; }
.pm-app-name { margin: 8px 0 0; }
.pm-app-applied { margin: 4px 0 0; }
.pm-app-message { margin-top: 16px; }
/* Muted explainer under a card's action buttons. */
.pm-card-note { margin: 12px 0 0; }
/* Label/value pairs align in two columns so the values can be read down the
   page, matching the report cards' .k/.v treatment. */
.pm-app-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 18px;
  align-items: baseline;
  margin-top: 14px;
  font-size: 0.9rem;
}
.pm-app-facts .k {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--color-muted); font-weight: 700;
}
.pm-app-facts .v { font-weight: 700; color: var(--color-text); }
@media (max-width: 460px) {
  .pm-app-facts { grid-template-columns: 1fr; gap: 2px; }
  .pm-app-facts .v { margin-bottom: 6px; }
}
.pm-app-avatar {
  flex-shrink: 0; height: 92px; width: auto; min-width: 92px; max-width: 200px;
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--color-border); background: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
}
/* Show the whole photo (no crop), scaled to fit within the fixed height. */
.pm-app-avatar img { max-width: 100%; max-height: 100%; width: auto; height: auto; }
/* The ID thumbnail is too small to verify anything at, so it opens in the
   photo lightbox (see photo-lightbox.js). */
a.pm-app-avatar { cursor: zoom-in; }
a.pm-app-avatar:hover, a.pm-app-avatar:focus-visible { border-color: var(--color-primary-light); }
.pm-app-avatar-ph { color: var(--color-muted); }
.pm-app-avatar-ph svg { width: 52px; height: 52px; }

/* Compact, two-column layout for the application detail sections.
   Multi-column (not grid) so blocks pack tightly top-to-bottom without the
   row-height gaps a grid leaves when the two columns differ in height. */
.pm-app-details {
  column-count: 2;
  column-gap: 24px;
  margin-top: 10px;
}
.pm-detail-block {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  display: block;
  margin-bottom: 14px;
}
.pm-detail-block .dash-heading { margin: 0 0 6px; font-size: 1rem; }
.lodgement-table.compact { min-width: 0; }
.lodgement-table.compact tbody td,
.lodgement-table.compact thead th { padding: 6px 12px; font-size: 13px; }
@media (max-width: 720px) {
  .pm-app-details { column-count: 1; }
}
.pm-app-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.pm-action-form { display: contents; }
/* "or" divider between the combined run and the two single checks. */
.run-both-rule {
  display: flex; align-items: center; gap: 10px;
  color: var(--color-muted); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.run-both-rule::before,
.run-both-rule::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

/* Application detail: applicant summary card, with the two action cards
   stacked in a narrower column beside it. An explicit grid keeps the action
   cards from being sized by the natural length of their own explanatory
   sentence, and `align-items: start` lets each card end where its content
   does instead of stretching to the summary's height. */
/* Profile-split (CRM) layout: a sticky left profile column holds the applicant
   summary and every action, while the detail sections read as a scrollable
   "file" on the right. */
.pm-app-split {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  align-items: start;
  gap: 24px;
  margin-bottom: 24px;
}
.pm-app-profile {
  display: flex; flex-direction: column; gap: 20px;
  position: sticky; top: 20px;
}
.pm-app-profile .card { margin-bottom: 0; }
/* The right column is already narrow enough; keep its sections in one column
   instead of the two-column pack used when details ran full width. */
.pm-app-file { column-count: 1; margin-top: 0; display: flex; flex-direction: column; gap: 16px; }
.pm-app-file .pm-detail-block { margin: 0; break-inside: auto; }
/* Centre the summary head in the narrow profile column: photo on top, then
   the name and facts beneath it. */
.pm-app-profile-card .pm-app-head { flex-direction: column-reverse; align-items: center; text-align: center; gap: 14px; }
.pm-app-profile-card .pm-app-headmain { flex: 0 0 auto; }
.pm-app-profile-card .pm-app-facts { justify-content: center; text-align: left; }
.pm-app-profile-card .pm-status-form { justify-content: center; }
@media (max-width: 900px) {
  .pm-app-split { grid-template-columns: 1fr; }
  .pm-app-profile { position: static; }
}
/* Buttons stacked vertically inside the checks card. */
.pm-app-actions-v { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 4px; }
.pm-app-actions-v .btn { width: 100%; }
.tc-both-note { color: var(--color-accent); font-weight: 600; margin: 0 0 12px; }
.pm-status-form { display: flex; align-items: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

.btn-sm {
  display: inline-block;
  box-sizing: border-box;
  padding: 8px 14px;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  /* Transparent border keeps solid buttons the same size as .btn-sm-outline,
     which adds a 1px border (auto height counts the border either way). */
  border: 1px solid transparent;
  background: var(--color-primary);
  color: #fff;
  white-space: nowrap;
  transition: background 0.2s ease;
}
.btn-sm:hover { background: var(--color-primary-light); }
.btn-sm-outline {
  background: var(--color-surface);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}
.btn-sm-outline[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 22px 0; }
.pagination .page-link {
  padding: 8px 14px; border-radius: 6px; text-decoration: none; font-weight: 700;
  border: 1px solid var(--color-primary); color: var(--color-primary); background: var(--color-surface);
}
.pagination .page-link:hover { background: var(--color-border); }
.pagination .page-link.disabled { opacity: 0.45; pointer-events: none; }
.pagination .page-current { color: var(--color-muted); font-weight: 600; }

/* ===== Stepper (Tenancy Application) ===== */
.stepper .step { display: none; }
.stepper .step.active { display: block; }
/* Cards inside page-wrap fill its width and are centred, with a gap between. */
.page-wrap .card-section { padding: 0; margin-bottom: 24px; }
.page-wrap .form-card { width: 100%; max-width: var(--form-max); margin: 0 auto; }
/* Help page contact form: align left with the FAQ/accordion items (full width). */
.page-wrap .card-section.help-form { justify-content: flex-start; }
.page-wrap .card-section.help-form .form-card { max-width: none; margin: 0; }
/* Message box: fixed height (non-resizable) with scroll for long content. */
.help-form .field-textarea { resize: none; overflow-y: auto; }

/* Help page top: contact cards (left 1/3) beside the message form (right 2/3). */
/* Message form on the wide left column, contact cards on the narrow right. */
/* Matches the marketing ledes (.lp-lede) — .dash-sub alone inherits the 14px
   body size, which read smaller than the rest of the site's intros. */
.help-lede { font-size: 1rem; }
.help-top { display: grid; grid-template-columns: 2fr 1fr; gap: 1.5rem; align-items: stretch; margin-bottom: 2.5rem; }
.help-msg { order: -1; }
.help-contact { display: flex; flex-direction: column; gap: 1rem; height: 100%; }
.help-contact .card { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.help-msg .card-section { margin-bottom: 0; }
@media (max-width: 860px) {
  .help-top { grid-template-columns: 1fr; }
  .help-contact .card { flex: none; }
  /* Stacked: keep the contact cards above the form, as before. */
  .help-msg { order: 0; }
}

/* Help page contact-method cards: gradient fill (like the /tenant-checking/ cards). */
.help-methods .card {
  background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
  border: 0; color: #fff; box-shadow: 0 18px 34px -22px rgba(124, 58, 237, 0.5);
}
.help-methods .card h3 { color: #fff; }
.help-methods .card p { color: rgba(255, 255, 255, 0.92); }
.help-methods .card p strong { color: #fff; }
.help-methods .card .card-icon { background: rgba(255, 255, 255, 0.18); color: #fff; }
.help-methods .card a.hyperlink { color: #fff; text-decoration: underline; }
.help-methods .card a.hyperlink:hover { color: #fff; }

/* Collapsible privacy statement */
.privacy-details { margin-bottom: 6px; }
/* Report-specific privacy blocks are toggled by report_type (see
   personal_check_request.html). An explicit rule is required because the
   bare [hidden] attribute is overridden elsewhere in this stylesheet. */
[data-privacy][hidden] { display: none; }
.privacy-details summary {
  cursor: pointer;
  color: var(--color-primary);
  font-weight: 700;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.privacy-details summary::-webkit-details-marker { display: none; }
.privacy-details summary::before { content: "\25B8"; transition: transform 0.2s ease; }
.privacy-details[open] summary::before { transform: rotate(90deg); }

.step-indicator {
  display: flex;
  align-items: center;
  /* Auto margins on the end children centre the row while it fits and collapse
     when it doesn't — unlike `justify-content: center`, which pushes the
     overflow off the left edge where scrolling can never reach it (the 7-step
     application/agreement flows lose their first steps on narrow screens). */
  justify-content: flex-start;
  flex-wrap: nowrap;         /* keep all steps on one row */
  overflow-x: auto;          /* scroll instead of wrapping on narrow screens */
  gap: 4px;
  margin-bottom: 40px;
  padding-bottom: 6px;
}
/* Auto-numbered variant: dots number themselves via a counter so a hidden step
   (e.g. a landlord who turned off Occupancy or Income on the tenant form)
   renumbers the rest without gaps. Scoped to this variant so the fixed-step
   flows (agreement, personal check, book viewing) keep their literal numbers. */
.step-indicator--auto { counter-reset: stepnum; }
.step-indicator--auto .step-dot { counter-increment: stepnum; }
.step-indicator--auto .step-dot .num::before { content: counter(stepnum); }
.step-indicator > :first-child { margin-left: auto; }
.step-indicator > :last-child { margin-right: auto; }
.step-dot {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  color: var(--color-muted);
  font-weight: 700;
  font-size: 12.5px;
  white-space: nowrap;
  border-radius: 8px;
  flex-shrink: 0;
}
.step-dot.clickable { cursor: pointer; }
.step-dot.clickable:hover { background: var(--color-bg); }
.step-dot .num {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #EEF2FF; color: var(--color-muted);
  border: 2px solid transparent;
  font-size: 15px;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
/* Completed: brand gradient, matching the signup wizard stepper. */
.step-dot.done .num {
  background: linear-gradient(120deg, var(--color-accent), var(--color-primary));
  color: #fff; box-shadow: 0 6px 14px -6px rgba(124, 58, 237, 0.6);
}
.step-dot.done { color: var(--color-accent); }
/* Current step: white dot ringed in the accent so it stands out. */
.step-dot.active .num {
  background: var(--color-surface);
  color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 14%, transparent);
}
.step-dot.active { color: var(--color-primary); }
.step-connector { width: 28px; height: 2px; background: var(--color-border); flex-shrink: 0;
  transition: background 0.2s ease; }
.step-connector.done { background: var(--color-accent); }

/* Chevron-pipeline variant for the tenancy application stepper: connected
   arrow segments reading left-to-right. Scoped to the `--chevron` modifier so
   every other flow sharing `.step-indicator` / `.step-dot` keeps its dots. The
   `--auto` counter still numbers the steps; completed segments swap the number
   for a tick. */
/* Styling mirrors the sign-up wizard ribbon (.signup-flow .wz-seg): a rounded
   container of equal-width arrow segments that point right, with a white idle
   segment, a light-lavender completed segment, and the brand gradient on the
   current step. */
.step-indicator--chevron { align-items: stretch; gap: 0; border-radius: 12px; overflow: hidden; padding-bottom: 0; }
.step-indicator--chevron .step-connector { display: none; }
.step-indicator--chevron .step-dot {
  position: relative; flex: 1; justify-content: center;
  gap: 8px; padding: 12px 10px 12px 22px; margin-right: -12px;
  border-radius: 0; font-size: .85rem;
  color: var(--color-muted);
  background: var(--color-surface);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
}
.step-indicator--chevron .step-dot:first-child {
  margin-left: 0; padding-left: 16px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}
/* Flat trailing edge so the ribbon ends inside the rounded container corner. */
.step-indicator--chevron .step-dot:last-child {
  margin-right: 0; padding-right: 10px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%);
}
.step-indicator--chevron .step-dot .num {
  width: 20px; height: 20px;
  background: var(--color-border); color: var(--color-muted);
  border: 0; box-shadow: none; font-size: .72rem;
}
.step-indicator--chevron .step-dot.done {
  background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
  color: var(--color-accent);
}
.step-indicator--chevron .step-dot.done .num {
  background: linear-gradient(120deg, var(--color-accent), var(--color-primary));
  color: #fff; box-shadow: none;
}
.step-indicator--chevron .step-dot.done .num::before { content: "\2713"; }  /* tick on completed steps */
.step-indicator--chevron .step-dot.done.clickable:hover {
  background: color-mix(in srgb, var(--color-accent) 20%, var(--color-surface));
  color: var(--color-accent);
}
.step-indicator--chevron .step-dot.active {
  background: linear-gradient(120deg, var(--color-accent), var(--color-primary));
  color: #fff;
}
.step-indicator--chevron .step-dot.active .num {
  background: rgba(255, 255, 255, 0.25); color: #fff; border: 0; box-shadow: none;
}
.step-indicator--chevron .step-dot.clickable:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
/* Mobile: let the ribbon scroll instead of clipping when the steps don't fit. */
@media (max-width: 600px) {
  .step-indicator--chevron { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .step-indicator--chevron .step-dot { flex: 1 0 auto; }
}

.step-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 24px; }
.step-nav-actions { display: inline-flex; align-items: center; gap: 10px; }
.stepper textarea { border: 1px solid var(--color-border); border-radius: 8px; padding: 10px 12px; background: var(--color-surface); width: 100%; resize: none; overflow-y: auto; }

/* Financial Support (Income step) — required Yes/No question in a bordered box */
.fin-support { border: 1px solid var(--color-border-input); border-radius: 10px; padding: 16px 18px; margin: 4px 0; }
.fin-support legend { padding: 0; margin-bottom: 10px; font-size: 0.98rem; color: var(--color-text); }
.fin-support-options { display: flex; gap: 28px; }
.fin-radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; color: var(--color-text); }
.fin-radio input { width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; }

/* Back link — compact arrow + label at the top of a sub-page (no surrounding
   card). The arrow is drawn in via ::before, so templates pass just the
   destination label. Used app-wide in place of an .admin-note / .admin-crumb
   wrapped link. */
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 16px;
  font-size: 0.85rem; font-weight: 600;
  color: var(--color-accent); text-decoration: none;
}
.back-link::before { content: "\2190"; font-size: 1rem; line-height: 1; }
.back-link:hover { text-decoration: underline; }

/* ===== Tenant self-report: pricing comparison ===== */
.report-choose { text-align: center; margin-bottom: 18px; }
.report-choose-title { margin: 0; font-size: 1.35rem; font-weight: 800; color: var(--color-text); }
.report-choose-sub { margin: 4px 0 0; color: var(--color-muted); font-size: 0.9rem; }

.price-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
  margin-bottom: 28px;
}
.price-option { display: flex; }
.price-option input { position: absolute; opacity: 0; width: 0; height: 0; }

.pcard {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  border-radius: 14px;
  padding: 22px 22px 24px;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.pcard:hover { border-color: var(--color-primary-light); }
.pcard.feature { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary) inset, 0 10px 26px rgba(15, 23, 42, 0.08); }

/* Selected state (radio drives it) */
.price-option input:checked + .pcard {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.22);
}
.price-option input:focus-visible + .pcard { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.pc-badge {
  position: absolute; top: -11px; right: 18px;
  background: var(--color-accent); color: #fff;
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px;
}
.pc-name { font-size: 1.02rem; font-weight: 750; color: var(--color-text); }
.pc-price { display: block; margin: 8px 0 0; font-size: 1.9rem; font-weight: 850; letter-spacing: -0.02em; color: var(--color-primary); }
.pc-price small { font-size: 0.7rem; font-weight: 600; color: var(--color-muted); }
.pc-price.free { color: var(--color-success); }

.pc-feat-intro { display: block; margin: 16px 0 0; font-size: 0.82rem; font-weight: 700; color: var(--color-text); }
.pc-feat-intro + .pc-feat { margin-top: 10px; }
.pc-feat { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pc-feat li { position: relative; padding-left: 26px; font-size: 0.88rem; color: var(--color-muted); line-height: 1.35; }
.pc-feat li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--color-success); font-weight: 800; font-size: 0.95rem;
}

/* "Choose" pill — visual only; clicking anywhere on the card selects the radio */
.pcard .pc-choose {
  display: block;
  margin-top: auto;
  text-align: center;
  padding: 11px 18px;
  border-radius: 10px;
  font-weight: 750;
  font-size: 0.9rem;
  border: 1.5px solid var(--color-border-input);
  color: var(--color-muted);
  background: var(--color-surface);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.pcard:hover .pc-choose { border-color: var(--color-primary); color: var(--color-primary); }
/* Only the selected card's button is filled — makes the current choice unambiguous. */
.price-option input:checked + .pcard .pc-choose {
  background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
  color: #fff; border-color: transparent;
}

@media (max-width: 620px) {
  .price-cards { grid-template-columns: 1fr; }
}

/* Confirm step: chosen-report summary line */
.report-summary {
  margin: 4px 0 0; padding: 12px 14px;
  background: var(--color-field-bg); border: 1px solid var(--color-border);
  border-radius: 10px; color: var(--color-muted); font-size: 0.92rem;
}
.report-summary strong { color: var(--color-text); }

/* Legacy report-option classes kept for any cached markup */
.rc-header { display: block; background: var(--color-primary); color: #fff; padding: 14px; font-weight: 700; text-align: center; }
.rc-body { display: block; padding: 18px; color: var(--color-muted); font-size: 14px; }
.rc-price { display: block; font-weight: 800; color: var(--color-primary); margin-top: 12px; font-size: 1.1rem; }

/* Privacy statement scroll box */
.privacy-scroll {
  max-height: 260px; overflow-y: auto; padding: 14px; margin-bottom: 8px;
  border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-field-bg);
}
.privacy-scroll p { margin-bottom: 12px; line-height: 1.6; }
.privacy-accept { display: flex; align-items: center; gap: 10px; margin: 16px 0; font-weight: 700; color: var(--color-text); }
.privacy-accept input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-accent); cursor: pointer; }

/* ===== FAQ accordion ===== */
.faq-item {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.faq-item[open] {
  border-color: var(--color-primary-light);
  box-shadow: 0 4px 14px rgba(30, 64, 175, 0.08);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "\002B";
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--color-primary);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.faq-item[open] summary::after {
  content: "\2212";
  transform: rotate(180deg);
}
.faq-item summary:hover { color: var(--color-primary); }
.faq-body {
  padding: 0 20px 18px;
  color: var(--color-muted);
  line-height: 1.6;
}

/* ===== Dashboard ===== */
.dash-welcome { font-size: 1.7rem; margin-bottom: 4px; color: var(--color-text); }
.dash-sub { color: var(--color-muted); margin-bottom: 26px; }
/* Nudge prompting new tenants to complete their Account Details. */
.profile-nudge {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 20px; margin: 0 0 26px;
  background: #EEF2FF; border: 1px solid #C7D2FE;
  border-left: 4px solid var(--color-accent); border-radius: 10px;
}
.profile-nudge-ic { color: var(--color-accent); flex: none; }
.profile-nudge-ic svg { width: 26px; height: 26px; display: block; }
.profile-nudge-body { flex: 1 1 auto; }
.profile-nudge-body strong { display: block; color: var(--color-primary-dark); margin-bottom: 2px; }
.profile-nudge-body p { margin: 0; color: var(--color-muted); font-size: 0.88rem; line-height: 1.45; }
.profile-nudge .btn { flex: none; white-space: nowrap; }
@media (max-width: 620px) {
  .profile-nudge { flex-direction: column; align-items: flex-start; }
  .profile-nudge .btn { width: 100%; text-align: center; }
}
.dash-heading { margin: 32px 0 14px; color: var(--color-primary); font-size: 1.2rem; }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.stat-tile {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.stat-icon {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.stat-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-primary { background: #e6ecfb; color: var(--color-primary); }
.icon-accent { background: #ede9fe; color: var(--color-accent); }
.stat-num { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.1; }
.stat-label { display: block; color: var(--color-muted); font-size: 13px; }

/* Action cards with icons */
.action-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.action-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.action-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10); }
.action-card h4 { font-size: 1.05rem; margin-bottom: 6px; color: var(--color-text); }
.action-card p { color: var(--color-muted); font-size: 13px; flex: 1 0 auto; margin-bottom: 14px; }
.action-card .btn { align-self: flex-start; }
.card-icon {
  width: 48px; height: 48px; border-radius: 12px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ede9fe, #e6ecfb); color: var(--color-primary);
}
.card-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Recent checks */
.recent-card { padding: 8px 20px; }
.recent-list { list-style: none; }
.recent-list li { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--color-border); }
.recent-list li:last-child { border-bottom: none; }
.recent-icon { width: 40px; height: 40px; border-radius: 10px; background: #e6ecfb; color: var(--color-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.recent-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.recent-name { flex: 1; display: flex; flex-direction: column; }
.recent-meta { color: var(--color-muted); font-size: 12px; }

/* ===== Public Check: learn-more link ===== */
.info-link { margin-bottom: 20px; padding-bottom: 10px; }
.info-link a { color: var(--color-accent); text-decoration: none; }
.info-link a:hover { text-decoration: underline; }

/* ===== Sitewide select base: consistent outline + custom chevron ===== */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  padding: 12px 40px 12px 13px;
  border: 1.5px solid var(--color-border-input);
  border-radius: 10px;
  background-color: var(--color-surface);
  color: var(--color-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
select:hover { border-color: var(--color-primary); }
select:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.16);
}
select:disabled { cursor: default; opacity: 0.65; }

/* ===== Outlined floating-label select: custom chevron =====
   No tinted plate — a clean chevron so selects match the rounded text
   inputs exactly (the plate's square edges clashed with the field border). */
.floating-label select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 44px;
  text-overflow: ellipsis;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
}
.floating-label select:hover { border-color: var(--color-primary); }
.floating-label select:focus {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E40AF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
/* Muted colour while the placeholder option is showing. */
.floating-label select:has(option[value=""]:checked) { color: var(--color-muted); }

/* Plain (non-floating) selects — admin filters, bulk actions — matched styling. */
.admin-search select, .admin-status, .bulk-tier {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding: 10px 40px 10px 13px;
  border: 1.5px solid var(--color-border-input);
  border-radius: 10px;
  background-color: var(--color-surface);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 16px 16px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.admin-search select:hover, .admin-status:hover, .bulk-tier:hover { border-color: var(--color-primary); }
.admin-search select:focus, .admin-status:focus, .bulk-tier:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.16);
}

/* ===== Pretty select (custom dropdown menu for <select data-pretty>) ===== */
.pretty-select { position: relative; display: inline-block; vertical-align: middle; }
/* Native select kept for value/submit, visually hidden. */
.pretty-select > select {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
  margin: 0; padding: 0; border: 0;
}
.pretty-select-trigger {
  appearance: none; -webkit-appearance: none;
  cursor: pointer; text-align: left; width: 100%; min-width: 180px;
  padding: 11px 42px 11px 14px;
  border: 1.5px solid var(--color-border-input); border-radius: 10px;
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px;
  color: var(--color-text); font: inherit; font-weight: 600;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.pretty-select-trigger:hover { border-color: var(--color-primary); }
.pretty-select.open .pretty-select-trigger,
.pretty-select-trigger:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.16);
}
.pretty-select-menu {
  /* Fixed positioning (coordinates set by pretty-select.js from the trigger)
     so the menu escapes any ancestor with overflow:hidden, e.g. cards. */
  position: fixed; z-index: 1000; min-width: 100%;
  list-style: none; margin: 0; padding: 6px;
  background: #fff; border: 1px solid var(--color-border); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
  max-height: 300px; overflow-y: auto;
  animation: prettyMenuIn 0.14s ease;
}
@keyframes prettyMenuIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pretty-select-option {
  /* Text aligns with the trigger's left padding; the right pad reserves room
     for the selected-item checkmark so the text doesn't shift when chosen. */
  position: relative; padding: 9px 32px 9px 14px; border-radius: 8px;
  cursor: pointer; font-size: 14px; color: var(--color-text); white-space: nowrap;
}
.pretty-select-option:hover,
/* Keyboard highlight (arrow keys / type-ahead), mirrors the hover look. */
.pretty-select-option.active { background: rgba(124, 58, 237, .08); color: var(--color-accent); }
.pretty-select-option.selected { color: var(--color-primary); font-weight: 700; }
.pretty-select-option.selected::before {
  content: ""; position: absolute; right: 14px; top: 50%;
  width: 6px; height: 10px; margin-top: -6px;
  border: solid var(--color-primary); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.pretty-select-option[aria-disabled="true"] { color: var(--color-muted); cursor: default; }
.pretty-select-option[aria-disabled="true"]:hover { background: none; }
/* Resting hint colour while no real option is chosen yet. */
.pretty-select-trigger.pretty-select-placeholder { color: var(--color-muted); font-weight: 400; }

/* Disabled trigger mirrors native `select:disabled`. */
.pretty-select-trigger:disabled { cursor: default; opacity: 0.65; }
.pretty-select-trigger:disabled:hover { border-color: var(--color-border-input); }

/* ===== pretty-select in filter bars / compact toolbars =====
   Outside a floating-label the trigger would otherwise take its default
   180px form-field min-width, which is too wide for these bars. Size it to the
   bar instead; the outlined look stays consistent with the other dropdowns. */
.admin-search .pretty-select-trigger,
.ta-search .pretty-select-trigger { min-width: 130px; }
.bulk-bar .pretty-select-trigger { min-width: 240px; }
.rental-field .pretty-select { display: inline-block; }
.rental-field .pretty-select-trigger { min-width: 150px; width: auto; }
.rental-field-location .pretty-select-trigger { min-width: 220px; }
.inv-admin-bar .pretty-select-trigger { min-width: 0; width: auto; font-size: 13px; padding: 8px 32px 8px 11px; }
/* Full-width filter fields: let the trigger fill its column and shrink freely. */
.ls-field .pretty-select,
.gst-filter-bar .pretty-select,
.rh-field .pretty-select,
.pd-field .pretty-select,
.invite-form .pretty-select,
.ta-insul-table .pretty-select { display: block; width: 100%; }
.ls-field .pretty-select-trigger,
.gst-filter-bar .pretty-select-trigger,
.rh-field .pretty-select-trigger,
.pd-field .pretty-select-trigger,
.invite-form .pretty-select-trigger,
.ta-insul-table .pretty-select-trigger { min-width: 0; width: 100%; }

/* ===== pretty-select inside an outlined floating-label field =====
   Make the styled trigger sit exactly like the text inputs (same metrics and
   border radius) and keep the floating notch label visible, so an enhanced
   <select> is indistinguishable from the other modern fields. */
.floating-label .pretty-select { display: block; width: 100%; vertical-align: baseline; }
/* Scoped high enough to beat the filled `.form-card button` style, which would
   otherwise paint the trigger solid blue and strip its chevron. */
.form-card .pretty-select-trigger,
.floating-label .pretty-select-trigger {
  display: block; min-width: 0;
  padding: 14px 40px 14px 13px;
  background-color: var(--color-surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px 16px;
  color: var(--color-text);
  border: 1.5px solid var(--color-border-input);
  font-weight: 400; letter-spacing: normal;
}
.form-card .pretty-select-trigger:hover,
.floating-label .pretty-select-trigger:hover {
  background-color: var(--color-surface);
  border-color: var(--color-primary);
}
.form-card .pretty-select-trigger.pretty-select-placeholder,
.floating-label .pretty-select-trigger.pretty-select-placeholder { color: var(--color-muted); }
/* A select always has a value, so its notch label stays shown (as with the
   native .floating-label select + .label-text rule). */
.floating-label .pretty-select + .label-text { opacity: 1; }
.floating-label .pretty-select.open + .label-text { color: var(--color-primary); }
/* Mirror the invalid styling onto the visible trigger (the real <select> that
   inline-errors.js flags is hidden). */
.floating-label .pretty-select:has(select.is-invalid) .pretty-select-trigger { border-color: var(--color-danger); }
.floating-label .pretty-select:has(select.is-invalid) + .label-text { color: var(--color-danger); }

/* ===== Application form settings (toggle rows) ===== */
.cfg-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--color-border);
}
.cfg-row:last-child { border-bottom: none; }
.cfg-row > span { color: var(--color-text); font-weight: 500; }
.cfg-sub { margin: 0 0 4px 6px; padding-left: 16px; border-left: 2px solid var(--color-border); }
.cfg-sub .cfg-row { padding: 9px 0; }
.cfg-sub .cfg-row > span { font-weight: 400; color: var(--color-muted); }

/* ===== Application settings: status-stripe section cards =====
   Each section is a card with a colour bar down the left edge — accent means
   the section is included in your view, grey means it's hidden. The Yes/No
   toggle component (.switch/.slider) is reused unchanged. */
.cfg-card {
  display: grid; grid-template-columns: 6px 1fr;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px; overflow: hidden;
  margin-bottom: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.cfg-card:last-of-type { margin-bottom: 0; }
.cfg-stripe { background: var(--color-accent); transition: background .25s ease; }
.cfg-card.is-hidden .cfg-stripe { background: var(--color-border-input); }
.cfg-card.is-locked .cfg-stripe { background: var(--color-primary); }
.cfg-card-body { padding: 2px 18px; }
.cfg-card-head { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.cfg-card-name { font-weight: 700; font-size: 15px; color: var(--color-text); }
.cfg-card-head .switch { margin-left: auto; flex: none; }
.cfg-pill, .cfg-req {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
}
.cfg-pill { background: #ece5fd; color: var(--color-accent-dark); }
.cfg-card.is-hidden .cfg-pill { background: #eef2f7; color: var(--color-muted); }
.cfg-req { margin-left: auto; background: #e2ebff; color: var(--color-primary); }
.cfg-card-note { color: var(--color-muted); font-size: 13px; margin: 0 0 8px; }
/* Sub-questions divide from the header; dim + lock when the section is hidden
   (inputs stay enabled so their saved state still posts). */
.cfg-card .cfg-sub {
  margin: 0; padding: 0 0 6px; border-left: none;
  border-top: 1px solid var(--color-border);
  transition: opacity .2s ease;
}
.cfg-card.is-hidden .cfg-sub { opacity: .45; pointer-events: none; }

/* Align the intro banner, the settings card and the enquiry callout to the
   same (form) width so their left/right edges line up down the page. */
.app-settings-wrap .intro-banner,
.app-settings-wrap .onboard-steps,
.app-settings-wrap .info-callout { max-width: var(--form-max); margin-left: auto; margin-right: auto; }

/* Onboarding strip: three numbered steps across the top of the settings page
   so a member sees the whole journey (customise -> add button -> applications
   arrive) at a glance. */
.onboard-steps {
  list-style: none; margin: 0 auto 16px; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.onboard-step {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 12px; padding: 16px 18px;
}
.onboard-step-num {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  background: var(--color-primary); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.onboard-step-body { display: flex; flex-direction: column; gap: 3px; }
.onboard-step-body strong { color: var(--color-text); }
.onboard-step-body span { color: var(--color-muted); font-size: 13px; line-height: 1.5; }
@media (max-width: 760px) {
  .onboard-steps { grid-template-columns: 1fr; }
}

/* Intro banner: white card, icon chip on the left, explanation in the middle
   and the always-included checklist boxed off on the right. */
.intro-banner {
  display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: start;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 12px; padding: 18px 20px; margin-bottom: 16px;
}
.intro-ic {
  width: 36px; height: 36px; border-radius: 9px; flex: none;
  background: var(--color-primary); color: #fff; display: grid; place-items: center;
}
.intro-ic svg { width: 19px; height: 19px; }
.intro-body > strong { display: block; color: var(--color-text); margin-bottom: 3px; }
.intro-body p { margin: 0; color: var(--color-muted); line-height: 1.55; }
.intro-body p strong { color: var(--color-text); }
.intro-always { border-left: 1px solid var(--color-border); padding-left: 18px; min-width: 178px; }
.intro-always-lbl {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--color-muted); margin-bottom: 7px;
}
.intro-always ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.intro-always li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text); }
.intro-always li svg { width: 13px; height: 13px; color: var(--color-primary); flex: none; }
@media (max-width: 760px) {
  .intro-banner { grid-template-columns: auto 1fr; }
  .intro-always { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--color-border); padding: 12px 0 0; }
}
/* "Preview application" button in the intro banner — opens the read-only form. */
.intro-preview-btn { margin-top: 12px; display: inline-flex; align-items: center; gap: 7px; }
.intro-preview-btn svg { width: 15px; height: 15px; }

/* Large preview modal: an iframe of the read-only application form.
   Use .modal-box.modal-box-preview so these win over the base .modal-box
   rules (max-width: 460px; padding) that are defined later in this file. */
.modal-box.modal-box-preview {
  max-width: min(1100px, 96vw); width: 100%; height: 90vh;
  padding: 0; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.modal-preview-head {
  display: flex; align-items: center; gap: 12px; flex: none;
  padding: 13px 18px; border-bottom: 1px solid var(--color-border);
}
.modal-preview-head h2 { margin: 0; font-size: 1rem; color: var(--color-primary); }
.modal-preview-head .mp-sub { font-size: 12.5px; color: var(--color-muted); }
.modal-box-preview .modal-close { position: static; margin-left: auto; }
.modal-preview-frame { flex: 1 1 auto; width: 100%; border: 0; background: var(--color-bg); }

/* Embedded preview (in the iframe above): drop the member chrome and the page's
   own banners so it reads as the applicant's own form view. */
body.app-preview-embed .app-side,
body.app-preview-embed .impersonation-bar,
body.app-preview-embed .gradient-banner,
body.app-preview-embed .preview-bar { display: none !important; }
body.app-preview-embed.has-sidebar { padding-left: 0; }

/* Read-only preview bar shown at the top of the application form when a member
   previews it (pages/tenancy_application.html with preview=True). */
.preview-bar {
  display: flex; align-items: flex-start; gap: 12px;
  background: #F5F8FF; border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 20px;
}
.preview-bar-ic {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: var(--color-primary); color: #fff; display: grid; place-items: center;
}
.preview-bar-ic svg { width: 17px; height: 17px; }
.preview-bar-body strong { display: block; color: var(--color-text); }
.preview-bar-body span { color: var(--color-muted); font-size: 13px; }
.preview-bar-body a { color: var(--color-primary); font-weight: 600; }

/* ===== Signature pad ===== */
.signature-pad { display: inline-block; }
.signature-pad canvas {
  display: block;
  width: 100%;
  max-width: 600px;
  height: 180px;
  border: 1.5px dashed var(--color-border-input);
  border-radius: 10px;
  background: var(--color-surface);
  touch-action: none;
  cursor: crosshair;
}
.signature-pad .sig-clear { margin-top: 10px; }

/* Type-vs-draw signature chooser, shared by the agreement signing page and the
   tenancy application authorisation step (driven by signature-pad.js). */
.sig-mode { border: 0; padding: 0; margin: 0 0 6px; }
.sig-mode-opt { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; cursor: pointer; }
.sig-mode-opt input { margin-top: 3px; }
.sig-panel[hidden] { display: none; }
.sig-typed-preview {
  min-height: 64px; margin: 6px 0 0; padding: 10px 16px;
  border: 1px solid #d1d5db; border-radius: 8px; background: #fff;
  font-family: 'Segoe Script', 'Brush Script MT', cursive; font-size: 40px;
  line-height: 1.3; color: #111827; overflow-wrap: anywhere;
}
.sig-typed-preview:empty::before {
  content: 'Your signature will appear here once you enter your name above.';
  font-family: system-ui, sans-serif; font-size: 14px; color: #9ca3af;
  font-style: italic;
}

/* ===== Branded "Digitally sign" card (tenancy application authorisation) ===== */
.esign-card {
  max-width: 600px; margin-top: 8px;
  border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden;
  background: var(--color-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 26px rgba(15, 23, 42, .06);
}
.esign-card-bar {
  display: flex; align-items: center; gap: 9px; padding: 13px 18px;
  color: #fff; font-weight: 700;
  background: linear-gradient(100deg, var(--color-sign-1), var(--color-sign-2));
}
.esign-card-bar svg { width: 18px; height: 18px; flex: none; }
.esign-req {
  margin-left: auto; font-size: .68rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, .22);
  padding: 3px 9px; border-radius: 999px;
}
.esign-card-body { padding: 18px; }
.esign-card-body .sig-mode { margin: 14px 0 6px; }
.esign-card-body .floating-label { margin-bottom: 4px; }
/* Typed-signature preview as a centred, dashed inset within the card. */
.esign-card .sig-typed-preview {
  min-height: 92px; margin: 8px 0 0;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1.5px dashed var(--color-border-input); border-radius: 12px;
  background: var(--color-field-bg); font-size: 44px;
}
.esign-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 14px; color: var(--color-muted); font-size: .82rem;
}
.esign-foot b { color: var(--color-text); font-weight: 600; }

/* ===== Subscribe: subscriber-type radios ===== */
.radio-group .radio-option { display: flex; align-items: center; cursor: pointer; color: var(--color-text); }
.radio-option input[type="radio"] { margin-right: 10px; accent-color: var(--color-accent); transform: scale(1.4); }

/* ===== Subscriber-type selection cards ===== */
.type-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
/* Two-card variant fills the full row (e.g. Company vs Individual). */
.type-cards--pair { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .type-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .type-cards, .type-cards--pair { grid-template-columns: 1fr; } }
.type-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.type-opt label,
.type-opt-link a {
  display: flex; flex-direction: column; gap: 12px; height: 100%;
  padding: 18px; border: 2px solid var(--color-border-input); border-radius: 14px;
  background: var(--color-surface); cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.type-opt label:hover,
.type-opt-link a:hover { border-color: var(--color-primary); }
.type-opt-link a { text-decoration: none; }
.type-opt-link a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.type-opt input:checked + label {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.type-opt input:focus-visible + label { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.type-icobox {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
  color: var(--color-primary); transition: background 0.15s, color 0.15s;
}
.type-icobox svg { width: 24px; height: 24px; }
.type-opt input:checked + label .type-icobox { background: var(--color-primary); color: #fff; }
.type-title { display: block; font-weight: 700; font-size: 0.98rem; color: var(--color-text); }
.type-desc { display: block; font-size: 0.84rem; color: var(--color-muted); margin-top: 3px; line-height: 1.4; }

/* ===== Invoice ===== */
.inv-page { max-width: 820px; margin: 0 auto; padding: 24px 16px 48px; }
.inv-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-bottom: 16px; }
button.btn-pay { background: var(--color-success); color: #fff; border: none; }
button.btn-pay:hover { filter: brightness(1.06); background: var(--color-success); }
.inv-paid-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(22, 163, 74, .12); color: #15803d;
  font-weight: 700; font-size: 14px; padding: 8px 14px; border-radius: 999px;
}
.inv-admin-bar {
  display: flex; justify-content: flex-end; margin-bottom: 16px;
}
.inv-admin-bar form {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
  border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 14px;
  font-size: 13px; color: var(--color-muted);
}
.inv-admin-bar select { width: auto; padding: 6px 9px; border: 1.5px solid var(--color-border-input); border-radius: 8px; font: inherit; font-size: 13px; }
.inv-ref-edit input { width: auto; padding: 6px 9px; border: 1.5px solid var(--color-border-input); border-radius: 8px; font: inherit; font-size: 13px; min-width: 200px; }
/* Consolidated superuser admin panel on the invoice detail page: one bordered
   card, full width (matching the invoice sheet below), with aligned rows. */
.inv-admin-panel {
  background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface));
  border: 1px solid var(--color-border); border-radius: 12px;
  padding: 14px 18px; margin-bottom: 16px;
}
.inv-admin-panel-head {
  margin: 0 0 10px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px;
  font-weight: 800; color: var(--color-primary);
}
/* Compact single toolbar: all admin actions share one wrapping row. Each
   action's old descriptive sentence now lives on the button's title (hover),
   and the confirm dialog still spells out exactly what it does. */
.inv-admin-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.inv-admin-toolbar form { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
/* The reference editor keeps its input + Save together and sits to the right
   when the row has room; wraps underneath on narrow screens. */
.inv-admin-toolbar .inv-ref-edit { margin-left: auto; }
.inv-admin-toolbar .inv-ref-edit input { min-width: 200px; }
.inv-admin-label { font-size: 13px; color: var(--color-muted); }
.aged-bad { color: #b91c1c; font-weight: 700; }
.pill-paid, .pill-due { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; }
.pill-paid { color: #15803d; background: rgba(22, 163, 74, .12); }
.pill-due { color: #b45309; background: rgba(245, 158, 11, .15); }
.inv-sheet {
  background: #fff; border: 1px solid var(--color-border); border-radius: 14px;
  padding: 40px 44px; box-shadow: 0 6px 22px rgba(15, 23, 42, 0.08);
}
.inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  border-bottom: 3px solid var(--color-primary); padding-bottom: 20px; margin-bottom: 24px; }
.inv-brand .brand-logo { height: 54px; width: auto; }
.inv-meta { text-align: right; }
.inv-meta h1 { margin: 0 0 10px; font-size: 1.5rem; letter-spacing: 1px; text-transform: uppercase;
  color: var(--color-primary-dark); }
.inv-meta dl { margin: 0; display: grid; gap: 3px; }
.inv-meta dl > div { display: flex; justify-content: flex-end; gap: 10px; font-size: 0.85rem; }
.inv-meta dt { color: var(--color-muted); font-weight: 600; }
.inv-meta dd { margin: 0; font-weight: 700; color: var(--color-text); min-width: 92px; text-align: right;
  font-variant-numeric: tabular-nums; }
.inv-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
  color: var(--color-primary); margin-bottom: 6px; }
.inv-cust-name { font-weight: 800; font-size: 1.05rem; color: var(--color-text); }
.inv-cust-addr { color: var(--color-muted); font-size: 0.9rem; margin-top: 2px; line-height: 1.5; }
.inv-cust-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 12px; font-size: 0.85rem; color: var(--color-text); }
.inv-parties { margin-bottom: 26px; }

.inv-table { width: 100%; border-collapse: collapse; margin-bottom: 6px; }
.inv-table thead th {
  background: var(--color-primary); color: #fff; text-align: left; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 12px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.inv-table th.c-qty, .inv-table th.c-unit, .inv-table th.c-amt,
.inv-table td.c-qty, .inv-table td.c-unit, .inv-table td.c-amt { text-align: right; }
.inv-table td { padding: 11px 12px; border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem; color: var(--color-text); font-variant-numeric: tabular-nums; }
.inv-table td.c-desc { font-weight: 600; }
.inv-table tr.inv-discount td { color: #15803d; }
.inv-subject { font-size: 0.85rem; color: var(--color-muted); margin: 12px 0 20px; }

.inv-totals { display: flex; justify-content: flex-end; margin-bottom: 26px; }
.inv-totals-box { width: 280px; }
.inv-totals-box > div { display: flex; justify-content: space-between; padding: 7px 0;
  font-size: 0.92rem; color: var(--color-text); font-variant-numeric: tabular-nums; }
.inv-totals-box .inv-grand { border-top: 2px solid var(--color-primary); margin-top: 4px; padding-top: 10px;
  font-weight: 800; font-size: 1.12rem; color: var(--color-primary-dark); }

.inv-terms { margin-bottom: 22px; }
.inv-terms h2 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 1px;
  color: var(--color-primary); border-bottom: 1px solid var(--color-border); padding-bottom: 6px; margin: 0 0 10px; }
.inv-terms p { font-size: 0.88rem; color: var(--color-text); margin: 0 0 8px; line-height: 1.5; }
.inv-due { display: flex; justify-content: space-between; font-weight: 800; font-size: 1rem;
  background: var(--color-bg); border-radius: 8px; padding: 10px 14px; }
.inv-note { color: var(--color-muted); }
.inv-bank > div { display: flex; gap: 14px; font-size: 0.88rem; padding: 3px 0; }
.inv-bank span:first-child { color: var(--color-muted); min-width: 130px; }
.inv-bank span:last-child { font-weight: 700; }
.inv-foot { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--color-border);
  font-size: 0.76rem; color: var(--color-muted); text-align: center; }

/* ===== Invoice sheet — mirrors the emailed PDF (pages/invoice_pdf.html) =====
   Scoped under .inv-sheet--doc so the shared .inv-* rules above keep serving
   the statement page unchanged. Palette comes from the design-system tokens,
   which already match the PDF's brand colours exactly. */
.inv-sheet--doc .inv-head { align-items: center; border-bottom: 2px solid var(--color-primary);
  padding-bottom: 18px; margin-bottom: 26px; }
.inv-sheet--doc .inv-brand .brand-logo { height: 46px; }
.inv-sheet--doc .inv-head-right { text-align: right; }
.inv-sheet--doc .inv-doc-word { font-size: 1.9rem; font-weight: 900; color: var(--color-primary);
  letter-spacing: 2px; line-height: 1; }
.inv-sheet--doc .inv-gst-line { font-size: 0.72rem; color: var(--color-muted); margin-top: 8px;
  letter-spacing: .3px; font-variant-numeric: tabular-nums; }
.inv-sheet--doc .inv-gst-line b { color: var(--color-text); font-weight: 700; }
.inv-sheet--doc .inv-paid-stamp { display: inline-block; border: 2px solid #16A34A; color: #16A34A;
  font-weight: 900; text-transform: uppercase; letter-spacing: 2px; padding: 4px 16px;
  border-radius: 6px; font-size: 1.3rem; }

/* Billed to + meta */
.inv-sheet--doc .inv-parties { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; margin-bottom: 26px; }
.inv-sheet--doc .inv-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 1px;
  color: var(--color-accent); text-transform: uppercase; margin-bottom: 6px; }
.inv-sheet--doc .inv-cust-name { font-size: 1.1rem; font-weight: 700; color: var(--color-text); }
.inv-sheet--doc .inv-cust-detail { font-size: 0.9rem; color: var(--color-muted); margin-top: 2px; line-height: 1.5; }
.inv-sheet--doc .inv-docmeta { width: 260px; border-collapse: collapse; }
.inv-sheet--doc .inv-docmeta td { padding: 6px 0; font-size: 0.9rem; }
.inv-sheet--doc .inv-m-doc { font-size: 1.05rem; font-weight: 900; color: var(--color-primary); padding-bottom: 10px; }
.inv-sheet--doc .inv-m-lbl { color: var(--color-muted); }
.inv-sheet--doc .inv-m-val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.inv-sheet--doc .inv-m-rule td { border-bottom: 1px solid var(--color-border); }

/* Agent line (above the line items) */
.inv-sheet--doc .inv-agent-line { margin-bottom: 8px; font-size: 0.9rem; }
.inv-sheet--doc .inv-agent-lbl { font-size: 0.7rem; font-weight: 700; letter-spacing: 1px;
  color: var(--color-accent); text-transform: uppercase; }
.inv-sheet--doc .inv-agent-val { font-weight: 700; color: var(--color-text); }

/* Line items */
.inv-sheet--doc .inv-items { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: 26px;
  border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; }
.inv-sheet--doc .inv-items thead th { background: var(--color-primary); color: #fff; text-transform: uppercase;
  letter-spacing: 0.6px; font-size: 0.72rem; padding: 10px 16px; text-align: left; font-weight: 700;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.inv-sheet--doc .inv-items thead th.c-amt { text-align: right; width: 130px; }
.inv-sheet--doc .inv-items tbody td { padding: 13px 16px; font-size: 0.9rem; color: var(--color-text);
  font-variant-numeric: tabular-nums; }
.inv-sheet--doc .inv-items tbody td.c-amt { text-align: right; font-weight: 600; }
.inv-sheet--doc .inv-items tbody tr:nth-child(even) td { background: #F5F8FF; }
.inv-sheet--doc .inv-qty { color: #94A3B8; }
.inv-sheet--doc .inv-items .inv-discount { color: #16A34A; }
.inv-sheet--doc .inv-subject-row td { background: #F5F8FF; border-top: 1px solid var(--color-border);
  font-size: 0.78rem; color: #64748B; letter-spacing: 0.4px; padding: 9px 16px; }

/* Payment + totals */
.inv-sheet--doc .inv-lower { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; }
.inv-sheet--doc .inv-pay { flex: 1 1 58%; }
.inv-sheet--doc .inv-note { font-size: 0.9rem; color: var(--color-muted); line-height: 1.65; margin: 8px 0 0; }
.inv-sheet--doc .inv-bankbox { margin-top: 12px; background: #F8FAFC; border: 1px solid var(--color-border);
  border-radius: 10px; padding: 12px 14px; font-size: 0.9rem; }
.inv-sheet--doc .inv-bankbox > div { display: flex; justify-content: space-between; gap: 14px; padding: 2px 0; }
.inv-sheet--doc .inv-bank-k { color: var(--color-muted); }
.inv-sheet--doc .inv-bank-v { font-weight: 700; text-align: right; }
.inv-sheet--doc .inv-tot { flex: 0 0 auto; min-width: 240px; }
.inv-sheet--doc .inv-t-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 0.92rem;
  color: var(--color-text); font-variant-numeric: tabular-nums; }
.inv-sheet--doc .inv-t-lbl { color: var(--color-muted); }
.inv-sheet--doc .inv-t-rule { border-bottom: 1px solid var(--color-border); }
.inv-sheet--doc .inv-t-grand { align-items: baseline; border-top: 2px solid var(--color-primary);
  margin-top: 5px; padding-top: 12px; }
.inv-sheet--doc .inv-t-glbl { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.5px; color: var(--color-text); }
.inv-sheet--doc .inv-t-gval { font-size: 1.5rem; font-weight: 900; color: var(--color-primary); }

/* Footer */
.inv-sheet--doc .inv-foot { margin-top: 30px; text-align: center; border-top: 1px solid var(--color-border);
  padding-top: 20px; }
.inv-sheet--doc .inv-thanks { font-size: 1.05rem; font-weight: 700; color: var(--color-primary); }
.inv-sheet--doc .inv-contact { font-size: 0.78rem; color: var(--color-muted); margin-top: 5px; }

@media (max-width: 640px) {
  .inv-sheet--doc .inv-parties, .inv-sheet--doc .inv-lower { flex-direction: column; gap: 18px; }
  .inv-sheet--doc .inv-docmeta, .inv-sheet--doc .inv-tot { width: 100%; }
}

@media print {
  .site-header, .site-footer, .inv-actions, .inv-admin-panel, .messages, .confirm-pop-overlay,
  .app-side, .app-topbar, .app-scrim { display: none !important; }
  body { background: #fff; }
  body.has-sidebar { padding-left: 0; }
  .inv-sheet { border: none; box-shadow: none; padding: 0; }
  .inv-page { padding: 0; max-width: 100%; }
  .inv-sheet--doc .inv-items thead th,
  .inv-sheet--doc .inv-items tbody tr:nth-child(even) td,
  .inv-sheet--doc .inv-subject-row td,
  .inv-sheet--doc .inv-bankbox,
  .inv-sheet--doc .inv-paid-stamp { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===== Sign-up wizard ===== */
.wizard-step[hidden] { display: none; }
/* Wizard stepper: numbered dot above a short step label, with the brand
   gradient marking completed steps. Steps are a column (dot + label), so the
   connecting lines align to the dot with a margin rather than align-items. */
.wizard-progress { display: flex; align-items: flex-start; justify-content: center; flex-wrap: wrap;
  gap: 0; margin: 26px auto 4px; padding: 0 20px; }
.wp-step { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 92px; flex: 0 0 auto; }
.wp-dot {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 0.85rem; flex: 0 0 auto;
  background: #EEF2FF; color: var(--color-muted);
  border: 2px solid transparent; transition: 0.15s;
}
/* Completed steps are clickable — the wizard jumps back to them. */
.wp-step.done { cursor: pointer; }
.wp-step.done .wp-dot {
  background: linear-gradient(120deg, var(--color-accent), var(--color-primary));
  color: #fff; box-shadow: 0 6px 14px -6px rgba(124, 58, 237, 0.6);
}
.wp-step.active .wp-dot { background: var(--color-surface); color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 14%, transparent); }
.wp-label { font-size: 11.5px; font-weight: 600; color: var(--color-muted); text-align: center; line-height: 1.25; }
.wp-step.done .wp-label { color: var(--color-accent); }
.wp-step.active .wp-label { color: var(--color-primary); }
.wp-line { height: 2px; background: var(--color-border-input); flex: 1 1 auto;
  min-width: 12px; max-width: 46px; margin-top: 18px; }
.wp-line.done { background: var(--color-accent); }
@media (max-width: 560px) {
  .wp-step { width: 60px; }
  .wp-label { font-size: 10px; }
  .wp-line { max-width: 20px; }
}
.wizard-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }
.wizard-nav-end { justify-content: flex-end; }
.wizard-nav .btn { min-width: 130px; width: auto; }

/* ===== Sign-up: boarding-pass treatment =====
   The wizard is dressed as a boarding pass: a gradient "stub" header with a
   seat-style step counter, a tear line (perforation with edge notches) above
   the navigation, and each wizard step reading as the body of the one pass.
   Purely presentational — the wizard markup and logic are unchanged. */
.signup-pass {
  width: min(94%, var(--form-max)); margin: 24px auto 40px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 20px; overflow: hidden;
  box-shadow: 0 18px 44px -20px rgba(30, 42, 120, 0.38);
}
.pass-stub {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 26px; color: #fff;
  background: linear-gradient(120deg, var(--color-primary), var(--color-accent));
}
.pass-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pass-logo {
  width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.18);
}
.pass-logo svg { width: 20px; height: 20px; }
.pass-brand-text b { display: block; font-size: 13px; letter-spacing: .06em; }
.pass-brand-text small { display: block; font-size: 11px; opacity: .82; }
@media (max-width: 560px) { .pass-brand-text small { display: none; } }

/* The step indicator lives inside the gradient stub header, sitting to the
   right of the brand. On the gradient its marks are drawn in white rather
   than the on-white navy used elsewhere. The wizard JS still builds it, so
   completed steps stay clickable to jump back. */
.pass-stub-stepper { flex-wrap: wrap; row-gap: 12px; }
.signup-pass .wizard-progress {
  margin: 0; padding: 0; background: none; border: 0;
  align-items: center; justify-content: flex-end; flex: 1 1 auto;
}
.signup-pass .wp-step { width: auto; flex-direction: row; gap: 8px; }
.signup-pass .wp-dot {
  width: 26px; height: 26px; font-size: 0.78rem; border-color: transparent;
  background: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.85);
}
.signup-pass .wp-step.active .wp-dot {
  background: #fff; color: var(--color-primary); border-color: transparent;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.22);
}
.signup-pass .wp-step.done .wp-dot {
  background: rgba(255, 255, 255, 0.9); color: var(--color-primary); box-shadow: none;
}
.signup-pass .wp-label { font-size: 12px; color: rgba(255, 255, 255, 0.7); }
.signup-pass .wp-step.active .wp-label { color: #fff; }
.signup-pass .wp-step.done .wp-label { color: rgba(255, 255, 255, 0.92); }
.signup-pass .wp-line {
  margin-top: 0; min-width: 14px; max-width: 26px; background: rgba(255, 255, 255, 0.28);
}
.signup-pass .wp-line.done { background: rgba(255, 255, 255, 0.7); }
@media (max-width: 640px) {
  .signup-pass .wp-label { display: none; }
  .signup-pass .wp-line { max-width: 16px; }
}
@media (max-width: 400px) {
  .signup-pass .wizard-progress { justify-content: flex-start; }
}

/* Each step reads as the body of the one pass — drop the inner card chrome. */
.signup-pass .card-section { padding: 0; }
.signup-pass .form-card {
  box-shadow: none; border-radius: 0; max-width: none; padding: 26px; overflow: visible;
}
.signup-pass .form-card::before { display: none; } /* stub already carries the gradient */

/* Perforated tear line above the nav, with a notch punched at each edge. */
.signup-pass .wizard-nav {
  position: relative; margin: 26px -26px 0; padding: 22px 26px 0;
  border-top: 2px dashed var(--color-border);
}
.signup-pass .wizard-nav::before,
.signup-pass .wizard-nav::after {
  content: ""; position: absolute; top: -11px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--color-bg);
}
.signup-pass .wizard-nav::before { left: -11px; }
.signup-pass .wizard-nav::after { right: -11px; }

/* ===== Subscribe: toggle switch ===== */
.toggle-group { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.toggle-label { color: var(--color-text); }
.switch { position: relative; display: inline-block; width: 60px; height: 28px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; cursor: pointer; inset: 0;
  background-color: #cbd5e1; transition: .3s; border-radius: 10px;
  font-size: 13px; font-weight: 700; color: #fff;
}
.slider::before {
  position: absolute; content: ""; height: 22px; width: 22px; left: 3px; bottom: 3px;
  background-color: #fff; transition: .3s; border-radius: 7px;
}
.switch input:checked + .slider { background-color: var(--color-accent); }
.switch input:checked + .slider::after {
  content: "Yes"; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
}
.switch input:checked + .slider::before { transform: translateX(32px); }

/* ===== Yes/No toggle switch (radius matched to input fields) ===== */
.yn-toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; user-select: none; margin-top: 8px; }
.yn-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.yn-track {
  position: relative; width: 84px; height: 36px; border-radius: 10px;
  background: #cbd5e1; transition: background .25s ease;
}
.yn-track .yn-knob {
  position: absolute; top: 3px; left: 3px; width: 39px; height: 30px;
  background: #fff; border-radius: 8px; transition: transform .25s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.yn-track .yn-label {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-size: 13px; font-weight: 700; color: #fff; transition: opacity .2s ease;
}
.yn-track .yn-no { right: 13px; }
.yn-track .yn-yes { left: 13px; opacity: 0; }
.yn-toggle input:checked + .yn-track { background: var(--color-accent); }
/* 39px not 42px: the knob is 39px wide and rests 3px from the left, so shifting
   by 39 leaves a matching 3px gap on the right instead of sitting flush. */
.yn-toggle input:checked + .yn-track .yn-knob { transform: translateX(39px); }
.yn-toggle input:checked + .yn-track .yn-no { opacity: 0; }
.yn-toggle input:checked + .yn-track .yn-yes { opacity: 1; }

/* ===== Subscribe: file upload ===== */
.file-upload-container { margin-top: 20px; display: flex; flex-direction: column; gap: 12px; }
.upload-button {
  position: relative; display: inline-block; width: fit-content; text-align: center;
  padding: 14px 20px; background: var(--color-primary);
  color: #fff; border: none; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 14px;
  transition: background 0.2s ease;
}
.upload-button:hover { background: var(--color-primary-light); }
.upload-button input[type="file"] { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-preview { display: flex; flex-direction: column; gap: 8px; max-width: 650px; }
.file-preview img { max-width: 100%; max-height: 180px; border-radius: 6px; object-fit: cover; box-shadow: 0 2px 6px rgba(15,23,42,0.2); }
.file-preview .file-name { color: var(--color-muted); font-style: italic; }

/* ===== Drag & drop upload zone (dropzone.js) =====
   Before JS runs, .dz is a plain wrapper around a native (styled) file
   input. Once enhanced it gains .is-ready and becomes the dashed zone; the
   input is clipped but kept focusable so validation still works. */
.dz { max-width: 650px; }
.dz.is-ready {
  position: relative;
  border: 2px dashed #c7d0e8;
  border-radius: 12px;
  background: #f8faff;
  padding: 22px 20px;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.dz.is-ready:hover { border-color: var(--color-primary); }
.dz.is-ready:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.16);
}
.dz.drag { border-color: var(--color-primary); background: #eef2ff; }
/* Uploaded: turn the zone green (solid border + light tint) like a valid field. */
.dz.is-ready.has-file { border: 2px solid var(--color-success); background: #f0fdf4; }
.dz.is-ready.has-file:hover { border-color: var(--color-success); }
.dz.is-ready .dz-input {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0;
}
.dz-prompt { display: flex; flex-direction: column; align-items: center; text-align: center; }
.dz-cloud { width: 32px; height: 32px; color: var(--color-primary); }
.dz-title { font-weight: 600; font-size: 14.5px; color: var(--color-text); margin-top: 6px; }
.dz-title b { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.dz-sub { font-size: 12px; color: var(--color-muted); margin-top: 3px; }
.dz.has-file .dz-prompt { display: none; }
.dz-selected { display: none; align-items: center; gap: 14px; text-align: left; }
.dz.has-file .dz-selected { display: flex; }
.dz-thumb {
  width: 56px; height: 56px; border-radius: 10px; flex: none; overflow: hidden;
  background: #fff; border: 1px solid var(--color-border); display: grid;
  place-items: center; color: var(--color-primary);
}
.dz-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* "Fit" dropzones (IDs, documents, logos, profile photos): show the whole image
   rather than a cropped square — a larger landscape preview fitted with
   object-fit: contain. */
.dz-fit .dz-thumb { width: 132px; height: 84px; border-radius: 8px; background: #f8fafc; }
.dz-fit .dz-thumb img { object-fit: contain; }
.dz-meta { flex: 1; min-width: 0; }
.dz-name { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; color: var(--color-text); }
.dz-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dz-name svg { color: #16a34a; flex: none; }
.dz-size { font-size: 12px; color: var(--color-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.dz-remove { flex: none; border: none; background: none; color: var(--color-muted); cursor: pointer; padding: 6px; border-radius: 8px; line-height: 0; }
.dz-remove:hover { color: #dc2626; background: #fef2f2; }
/* Two-up file fields (criminal record check) */
.dz-col { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.dz-label { font-weight: 700; font-size: 14px; color: var(--color-text); }
/* Multiple-file selection (listing photos) */
.dz-multi { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.dz-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.dz-thumb-sm { width: 46px; height: 46px; border-radius: 8px; }
.dz-multi-foot { display: flex; align-items: center; gap: 14px; }

/* ===== Native file inputs =====
   Style the browser's default "Choose File(s)" button so every bare
   <input type="file"> reads as an on-brand button. The .upload-button
   overlay inputs are opacity:0, so this never shows through there. */
input[type="file"] {
  font-size: 14px;
  color: var(--color-muted);
  max-width: 100%;
  cursor: pointer;
}
input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 10px 20px;
  background: var(--color-primary);
  color: #fff;
  border: 2px solid transparent;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
input[type="file"]::file-selector-button:hover {
  background: var(--color-primary-light);
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.28);
}
input[type="file"]:focus-visible { outline: none; }
input[type="file"]:focus-visible::file-selector-button {
  outline: 2px solid var(--color-primary-light);
  outline-offset: 2px;
}

/* ===== Subscribe: subscription tier cards ===== */
.subscription-cards { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.subscription-card {
  background: var(--color-surface); border-radius: 10px; width: 260px;
  box-shadow: 0 4px 15px rgba(15,23,42,0.12); display: flex; flex-direction: column;
  overflow: hidden; border: 1px solid var(--color-border); transition: transform 0.15s ease;
}
.subscription-card:hover { transform: translateY(-5px); }
.card-header { color: #fff; text-align: center; font-weight: 600; padding: 12px 0; font-size: 16px; }
.card-body { padding: 15px; display: flex; flex-direction: column; align-items: center; }
.annual-subscription { font-weight: 700; margin: 10px 0; text-align: center; }
.subscription-card table { width: 100%; border-collapse: collapse; margin-bottom: 15px; }
.subscription-card td { padding: 6px 8px; border-bottom: 1px solid var(--color-border); }
.subscription-card td:first-child { text-align: left; }
.subscription-card td:last-child { font-weight: 700; text-align: right; }
.subscription-card table tr:nth-child(3) td { border-bottom: 2px solid var(--color-text); }

/* Tier select radio styled as a button */
.select-button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 24px; border-radius: 8px; cursor: pointer; font-weight: 700;
  background: var(--color-bg); color: var(--color-primary);
  border: 2px solid var(--color-primary); transition: all 0.15s ease;
}
.select-button input[type="radio"] { display: none; }
.select-button:hover { background: var(--color-border); }
.subscription-card:has(input[type="radio"]:checked) { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(124,58,237,0.25); }
.subscription-card:has(input[type="radio"]:checked) .select-button {
  background: var(--color-primary); color: #fff; border-color: transparent;
}

/* ===== Subscribe: agreement ===== */
.agreement-frame iframe { width: 100%; height: 150px; border: 1px solid var(--color-border); border-radius: 6px; margin-bottom: 20px; }
.agreement-checkbox { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; }

/* ===== Notice reason / single input row (declined) ===== */
.notice-reason-text { color: var(--color-primary); font-weight: 700; margin-bottom: 10px; }
.single-input-row { flex-wrap: nowrap; }
.single-input-row .floating-label { max-width: 295px; flex: 0 1 295px; }

/* ===== Advisory banner ===== */
.advisory-banner {
  background-color: #ede9fe;
  border-left: 4px solid var(--color-accent);
  padding: 15px;
  margin: 0 15% 8px 15%;
  border-radius: 5px;
  color: var(--color-text);
}
.advisory-banner p { margin: 0; }

/* Informational notice card — same lilac treatment as .advisory-banner, but
   sized to its container (no page-margin) so it fits admin and form pages. */
.notice-card {
  background-color: #ede9fe;
  border-left: 4px solid var(--color-accent);
  padding: 15px;
  border-radius: 5px;
  color: var(--color-text);
  margin-bottom: 18px;
}
.notice-card p { margin: 0; }
.notice-card-title {
  margin: 0 0 6px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
}


/* ===== Messages (Django flash messages) ===== */
.messages { list-style: none; margin: 0 15% 20px 15%; }
.messages-inline { margin: 0 0 20px 0; }
.messages li {
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 10px;
  font-weight: 500;
}
.messages li.success { background: #dcfce7; color: #166534; border-left: 4px solid var(--color-success); }
.messages li.error   { background: #ffe4e6; color: #9f1239; border-left: 4px solid var(--color-danger); }
.messages li.info,
.messages li.warning { background: #ede9fe; color: #5b21b6; border-left: 4px solid var(--color-accent); }

/* ===== Toast notifications (floating, auto-dismissing) ===== */
/* ===== Post-action confirmation popup =====
   Replaces the old corner toast. A small centred modal with the app's
   brand-gradient cap; the cap, title and button accent follow the message
   level (success / info by default, danger for errors, amber for warnings). */
.confirm-pop-overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  background: rgba(15, 23, 42, 0.5);
  opacity: 0;
  transition: opacity 0.22s ease;
}
.confirm-pop-overlay.show { opacity: 1; }
.confirm-pop-overlay[hidden] { display: none; }

.confirm-pop-box {
  margin: auto;
  width: 100%;
  max-width: 400px;
  background: var(--color-surface);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.32);
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.25), opacity 0.2s ease;
}
.confirm-pop-overlay.show .confirm-pop-box { opacity: 1; transform: none; }

/* Gradient cap — the brand header, carried into the popup. */
.cp-cap {
  padding: 20px 24px 16px;
  text-align: center;
  background: linear-gradient(120deg, var(--color-primary), var(--color-accent));
}
/* Success reads as success: a green cap with a green tick on a white disc. */
.confirm-pop-box[data-level="success"] .cp-cap {
  background: linear-gradient(120deg, var(--color-success-dark, #15803d), var(--color-success, #16a34a));
}
.confirm-pop-box[data-level="error"] .cp-cap {
  background: linear-gradient(120deg, #9f1239, var(--color-danger));
}
.confirm-pop-box[data-level="warning"] .cp-cap {
  background: linear-gradient(120deg, var(--color-caution), #f6a609);
}
.cp-halo {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.confirm-pop-box[data-level="success"] .cp-halo {
  background: rgba(255, 255, 255, 0.92);
  border-color: #fff;
}
.cp-halo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
}
.confirm-pop-overlay.show .cp-halo::after { animation: cpRing 0.7s 0.1s ease-out forwards; }
.cp-icon { color: #fff; display: inline-grid; place-items: center; }
.confirm-pop-box[data-level="success"] .cp-icon { color: var(--color-success-dark, #15803d); }
.cp-icon svg { width: 24px; height: 24px; display: block; }
.confirm-pop-overlay.show .cp-icon svg path { stroke-dasharray: 28; stroke-dashoffset: 28; animation: cpDraw 0.45s 0.15s ease forwards; }

.cp-body { padding: 22px 26px 24px; text-align: center; }
.cp-title { margin: 0 0 7px; font-size: 1.2rem; font-weight: 700; color: var(--color-text); }
.confirm-pop-box[data-level="error"] .cp-title { color: var(--color-danger); }
/* Listing thumbnail shown in the confirmation popup when a listing action
   (relist, carousel renew) passes one via extra_tags. */
.cp-listing-thumb {
  display: block; width: 100%; max-height: 160px; object-fit: cover;
  border-radius: 8px; margin: 0 auto 14px;
}
.cp-text { margin: 0 0 20px; color: var(--color-muted); line-height: 1.55; font-size: 0.95rem; }
.cp-text ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.cp-text li { position: relative; padding-left: 16px; }
.cp-text li::before { content: "\2022"; position: absolute; left: 2px; color: var(--color-accent); }

/* Dismiss button — solid, matching the app's primary buttons (.btn). The
   popup's level is already shown by the coloured cap, icon and title, so the
   button is solid blue by default; error/warning popups use a solid severity
   colour rather than a washed-out tint. */
.cp-ok {
  appearance: none;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  color: #fff;
  background: var(--color-primary);
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 12px 28px;
  transition: background 0.15s, border-color 0.15s;
}
.cp-ok:hover { background: var(--color-primary-light); }
.cp-ok:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.confirm-pop-box[data-level="error"] .cp-ok {
  color: #fff;
  background: var(--color-danger);
}
.confirm-pop-box[data-level="error"] .cp-ok:hover { background: #9f0f2e; }
.confirm-pop-box[data-level="warning"] .cp-ok {
  color: #fff;
  background: var(--color-caution);
}
.confirm-pop-box[data-level="warning"] .cp-ok:hover { background: #8a3f07; }

@keyframes cpRing {
  from { transform: scale(0.4); opacity: 0.55; }
  to   { transform: scale(1.5); opacity: 0; }
}
@keyframes cpDraw {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .confirm-pop-overlay, .confirm-pop-box { transition: none; }
  .cp-halo::after { animation: none; }
  .confirm-pop-overlay.show .cp-icon svg path { animation: none; stroke-dashoffset: 0; }
}
@media (max-width: 640px) {
  .confirm-pop-box { max-width: 420px; }
}

/* ===== Links ===== */
.hyperlink { color: var(--color-accent); text-decoration: none; }
.hyperlink:hover { text-decoration: underline; }

/* ===== Container / Cards (public pages) ===== */
.container { max-width: var(--page-max); margin: 0 auto; padding: 2.5rem 1.5rem; }
/* Matches the form/banner content width (middle 70%) so list pages line up
   with the form pages. */
/* Every page's main column: proportional gutters, capped at --page-max so all
   pages share one consistent max width. */
.page-wrap { width: min(92%, var(--page-max)); margin: 0 auto; padding: 8px 0 40px; }
/* Get My Report keeps a narrower column than the rest of the app. */
.page-wrap.report-page-narrow { --page-max: 1200px; }
/* Commercial Credit Check report card caps at the shared report width (1200px)
   like the Tenant/Public Check reports, instead of the narrower form width. */
.commercial-report-section { --form-max: 1200px; }
/* Tenant report toolbar (Download PDF / back). */
.report-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.report-toolbar-note { margin: 0; color: var(--color-muted); font-size: 0.92rem; }
.report-toolbar-actions { display: inline-flex; flex-wrap: wrap; gap: 10px; }
.page-wrap-topgap { padding-top: 16px; }
/* Lodge forms put a one-line intro in a .page-wrap directly above the form
   card. The wrap's 40px bottom padding then stacks with the card-section's
   20px top padding, leaving a ~60px void between the intro and the card's
   gradient accent. Trim the wrap's bottom padding on these pages so the intro
   sits closer to the card. */
.page-wrap:has(> .lodge-intro) { padding-bottom: 8px; }
@media (max-width: 992px) { .page-wrap { width: 94%; } }

/* Long-form legal / policy prose (Privacy Policy, and future Terms etc.). */
.legal { max-width: 760px; margin: 8px auto 0; color: var(--color-text); line-height: 1.65; }
.legal .legal-updated { color: var(--color-muted); font-size: 0.88rem; margin: 0 0 1.75rem; }
.legal h2 { font-size: 1.2rem; letter-spacing: -0.01em; margin: 2rem 0 0.6rem; padding-top: 1.2rem;
  border-top: 1px solid var(--color-border); }
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0.5rem; }
.legal h2[id] { scroll-margin-top: 80px; }
.legal p { margin: 0 0 1rem; }
.legal ul, .legal ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.legal li { margin: 0.3rem 0; }
.legal ol.legal-alpha { list-style: lower-alpha; }
.legal .legal-contact { list-style: none; padding-left: 0; }
.legal .legal-address { font-style: normal; margin: 0 0 1rem; color: var(--color-text); }
.legal a.hyperlink { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.legal a.hyperlink:hover { text-decoration: underline; }

.card-section { display: flex; justify-content: center; padding: 20px; }
.grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 2rem;
}
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 1.5rem;
}

/* ===== Form Card ===== */
.form-card {
  background-color: var(--color-surface);
  border-radius: 10px;
  width: 100%;
  max-width: var(--form-max);
  padding: 30px;
  position: relative;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

/* Inline preview of an uploaded photo ID on the member profile. */
.id-document-preview { margin: 6px 0 14px; }
.id-document-image {
  display: block;
  max-width: 100%;
  max-height: 420px;
  width: auto;
  border: 1px solid var(--color-border, #d5dae2);
  border-radius: 8px;
}
.id-document-embed {
  display: block;
  width: 100%;
  height: 520px;
  border: 1px solid var(--color-border, #d5dae2);
  border-radius: 8px;
}
/* Manual crop tool for the subscriber photo ID. */
.id-crop-stage {
  max-width: 560px;
  margin-bottom: 10px;
}
/* Cropper.js needs the image shown as a block with a bounded size to size its
   own canvas; keep the same framing as the static preview. */
.id-crop-stage .id-document-image {
  max-height: 460px;
  margin: 0;
}
.id-crop-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 10px 0 2px;
}
.id-crop-controls .btn-sm { margin: 0; }
.form-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(to right, var(--color-accent), var(--color-primary));
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.form-card h2 {
  text-align: left;
  margin-bottom: 20px;
  color: var(--color-primary);
  font-size: 1.5rem;
}
.subheader {
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: 30px;
}

.subheader-note {
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-top: -18px;
  margin-bottom: 16px;
}
/* The −18px top tucks the note under a preceding heading. When it instead
   follows a form field (e.g. the email-notification note), that pull makes it
   collide with the field above and the row below — give it real breathing room
   on both sides in that case. */
.floating-label:has(+ .subheader-note) { margin-bottom: 6px; }
.floating-label + .subheader-note { margin-top: 6px; }
/* When the note follows a row of fields, the −18px pull tucks it too close to
   the fields above — give it a little breathing room instead. */
.input-row + .subheader-note { margin-top: 10px; }
.subheader-note--strong { font-weight: 700; color: var(--color-muted); }

/* Inline page messages (tenant photos upload feedback) */
.inline-messages { margin: 0 0 20px; display: flex; flex-direction: column; gap: 10px; }
.inline-message {
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 4px solid var(--color-muted);
  font-size: 0.92rem;
}
.inline-message-success { border-left-color: var(--color-success); background: #f0fdf4; color: #166534; }
.inline-message-error   { border-left-color: var(--color-danger);  background: #fff1f2; color: #9f1239; }

/* Tenant photo upload preview (whole image; server crops to the face) */
.photo-preview-area { margin-top: 18px; }
.photo-preview-wrap {
  display: inline-block;
  max-width: 100%;
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-field-bg);
}
.photo-preview {
  display: block;
  max-width: 100%;
  max-height: 320px;
  border-radius: 6px;
}
.photo-preview-area .subheader-note { margin-top: 8px; }
.note-warn { color: var(--color-danger); }

/* Tenant Check outcome badge (Accepted / Declined) */
.outcome-badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
  vertical-align: middle; white-space: nowrap;
}
.outcome-accepted { background: #dcfce7; color: #166534; }
.outcome-declined_credit, .outcome-declined_other { background: #ffe4e6; color: #9f1239; }

/* Verified Applicant badge (shown on applications where the tenant purchased it) */
.verified-badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: .72rem; font-weight: 800; letter-spacing: .02em;
  background: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe;
  vertical-align: middle; white-space: nowrap;
}

/* ===== Floating Label Inputs ===== */
/* ===== Outlined notched-label fields (Style 2) ===== */
.floating-label { position: relative; display: block; margin-bottom: 16px; }
.floating-label[hidden] { display: none; }
/* Inline field validation error, shown beneath the offending input. */
.field-error { display: block; margin-top: 6px; color: var(--color-danger); font-size: 0.85rem; }
.floating-label.has-error input,
.floating-label.has-error select,
.floating-label.has-error textarea { border-color: var(--color-danger); }
.floating-label input,
.floating-label select,
.floating-label textarea {
  width: 100%;
  padding: 14px 40px 14px 13px;
  border: 1.5px solid var(--color-border-input);
  border-radius: 10px;
  background-color: var(--color-surface);
  font-size: 14px;
  color: var(--color-text);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"], input[type="date"],
select, textarea {
  width: 100%;
  display: block;
  box-sizing: border-box;
  font: inherit;
}

/* Modern standalone textarea (used with a .field-label above it) — matches
   the outlined look of the floating-label inputs. */
.field-textarea {
  padding: 12px 14px;
  border: 1.5px solid var(--color-border-input);
  border-radius: 10px;
  background-color: var(--color-surface);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text);
  resize: vertical;
  min-height: 96px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.field-textarea::placeholder { color: #64748b; }
.field-textarea:hover { border-color: var(--color-primary); }
.field-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.16);
}
/* Placeholder colour meets WCAG AA (≈4.6:1 on white) so the resting hint stays
   legible for low-vision users, while remaining lighter than a filled value. */
.floating-label input::placeholder { color: #64748b; }
/* Hide the placeholder once the field is focused so it doesn't sit under the floated label. */
.floating-label input:focus::placeholder { color: transparent; }
.floating-label input:hover,
.floating-label select:hover,
.floating-label textarea:hover { border-color: var(--color-primary); }
.floating-label input:focus,
.floating-label select:focus,
.floating-label textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.16);
}
/* The notched label: hidden until the field is focused or has a value. */
.floating-label .label-text {
  position: absolute;
  left: 10px; top: -8px;
  background: var(--color-surface);
  padding: 0 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-muted);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, color 0.18s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 20px);
}
.floating-label input:focus + .label-text,
.floating-label input:not(:placeholder-shown) + .label-text,
.floating-label select + .label-text,
.floating-label textarea:focus + .label-text,
.floating-label textarea:not(:placeholder-shown) + .label-text { opacity: 1; }
.floating-label input:focus + .label-text,
.floating-label select:focus + .label-text,
.floating-label textarea:focus + .label-text { color: var(--color-primary); }
/* Valid (completed) state — only when the value is actually valid, not just filled */
.floating-label input:not(:placeholder-shown):valid:not(:focus) { border-color: var(--color-success); }
.floating-label input:not(:placeholder-shown):valid:not(:focus) + .label-text { color: var(--color-success); }
.floating-label .tick {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--color-success);
  font-size: 18px;
  display: none;
}
.floating-label input:not(:placeholder-shown):valid ~ .tick { display: block; }
/* Error: a required field the user has left blank (after interaction/submit) */
.floating-label input:user-invalid,
.floating-label select:user-invalid,
.floating-label textarea:user-invalid { border-color: var(--color-danger); box-shadow: 0 0 0 3px rgba(190, 18, 60, 0.14); }
.floating-label input:user-invalid + .label-text,
.floating-label select:user-invalid + .label-text,
.floating-label textarea:user-invalid + .label-text { color: var(--color-danger); }
/* Inline field warning (e.g. licence-number format hint) shown under the input. */
.field-warn {
  display: block; margin-top: 6px; font-size: 12px; line-height: 1.35;
  color: var(--color-danger);
}
.field-warn[hidden] { display: none; }

/* ===== Input rows ===== */
.input-row { display: flex; gap: 20px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
/* display:flex above beats the UA [hidden] rule, so hiding a row needs this. */
.input-row[hidden] { display: none; }
.input-row .floating-label { flex: 1 0; margin-bottom: 0; min-width: 180px; }
/* Narrow field (e.g. Title) inside an input-row. */
.input-row .floating-label.fl-narrow { flex: 0 1 120px; min-width: 96px; }

/* ===== Household selector — Soft cards + check badge =====
   (card radios: Just Me / Couple / Family / Group) */
.household-select { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 26px; }
.hh-card { position: relative; cursor: pointer; }
.hh-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.hh-card-inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; width: 120px; padding: 20px 14px 16px;
  border: 1.5px solid var(--color-border-input); border-radius: 16px;
  background: var(--color-surface); color: var(--color-muted);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.hh-card:hover .hh-card-inner { border-color: var(--color-primary); transform: translateY(-2px); }
/* Tinted disc holding the people icon. */
.hh-disc {
  width: 54px; height: 54px; border-radius: 50%;
  background: #e6ecfb; color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  transition: background .18s ease, color .18s ease;
}
.hh-ic { width: 32px; height: 32px; display: block; fill: currentColor; }
.hh-label { font-size: .9rem; font-weight: 600; }
/* Corner check badge, revealed on select. */
.hh-badge {
  position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--color-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.5); transition: opacity .18s ease, transform .18s ease;
}
.hh-badge svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hh-card input:checked + .hh-card-inner {
  border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(124, 58, 237, .15);
}
.hh-card input:checked + .hh-card-inner .hh-disc { background: #ede9fe; color: var(--color-accent); }
.hh-card input:checked + .hh-card-inner .hh-label { color: var(--color-accent); }
.hh-card input:checked + .hh-card-inner .hh-badge { opacity: 1; transform: scale(1); }
.hh-card input:focus-visible + .hh-card-inner { box-shadow: 0 0 0 3px rgba(30, 64, 175, .28); }
@media (prefers-reduced-motion: reduce) {
  .hh-card .hh-card-inner, .hh-disc, .hh-badge { transition: none; }
}

/* ===== Extra applicants / dependants (repeatable member cards) ===== */
.member-block { margin: 6px 0 10px; }
.member-row {
  border: 1px solid var(--color-border); border-radius: 12px;
  padding: 18px 18px 14px; margin-bottom: 14px; background: var(--color-surface);
}
.member-row .input-row { margin-bottom: 18px; align-items: flex-start; }
/* Mobile field + its "no mobile" checkbox stacked in one column. */
.input-row .mobile-col { flex: 1 0; min-width: 180px; display: flex; flex-direction: column; }
.input-row .mobile-col .floating-label { flex: none; margin-bottom: 0; min-width: 0; }
.mobile-col .checkbox-inline { margin-top: 8px; }
.member-foot {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 14px; flex-wrap: wrap; padding-top: 4px;
}
.checkbox-inline {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--color-muted); font-size: .88rem; cursor: pointer;
}
.checkbox-inline input { width: 16px; height: 16px; flex: none; }
/* "Remove" link-button (override the filled .form-card button styling). */
.form-card button.member-remove {
  background: none; border: none; padding: 0; width: auto;
  color: #dc2626; font-weight: 600; font-size: .85rem; cursor: pointer;
}
.form-card button.member-remove:hover { background: none; text-decoration: underline; }
/* Card-style "+ Add" button matching the household cards. */
.form-card button.member-add {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px; width: 132px; padding: 20px 12px; margin-top: 2px;
  background: var(--color-surface); border: 1.5px solid var(--color-border-input);
  border-radius: 14px; color: var(--color-muted); font-weight: 600; font-size: .84rem;
  transition: border-color .18s ease, color .18s ease;
}
.form-card button.member-add:hover {
  background: var(--color-surface); border-color: var(--color-primary); color: var(--color-primary);
}
.member-add-plus {
  width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1; font-weight: 400;
}

/* ===== Pet rows (repeatable) ===== */
.input-row.pet-row { margin-bottom: 16px; }
/* Override the default filled .form-card button styling for the small icon-only
   remove control (needs the extra selector specificity to win). */
.form-card button.pet-remove {
  flex: none; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--color-border-input); background: var(--color-surface);
  color: var(--color-muted); font-size: 18px; font-weight: 400; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.form-card button.pet-remove:hover {
  border-color: #dc2626; color: #dc2626; background: #fef2f2;
}

/* ===== Alias rows ===== */
.alias-row { display: flex; align-items: center; gap: 20px; margin-bottom: 30px; flex-wrap: wrap; }
.alias-text { font-weight: 700; color: var(--color-muted); flex-shrink: 0; }

.extra-name-btn {
  padding: 12px 20px;
  background-color: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.extra-name-btn:hover { background-color: var(--color-primary-light); }

/* ===== Buttons ===== */
.button-price-wrapper { display: flex; align-items: center; gap: 20px; margin-top: 10px; }
.btn, .form-card button, .nested-button-wrapper button {
  padding: 14px 28px;
  /* Explicit line-height so <a class="btn"> (inherits body's 1.6) matches the
     <button> elements (UA line-height: normal) — otherwise anchors render
     taller. */
  line-height: 1.2;
  background: var(--color-primary);
  color: #fff;
  /* Transparent 2px border so solid and bordered (.btn-secondary) buttons keep
     identical dimensions — the border still adds height on auto-sized elements
     even with box-sizing: border-box. */
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s ease;
}
.btn:hover, .form-card button:hover, .nested-button-wrapper button:hover {
  background: var(--color-primary-light);
}
.btn-outline {
  background: transparent;
  border: 2px solid #fff;
  color: #fff;
}
/* White-filled button with blue text + blue border, for use on light
   backgrounds where .btn-outline (white on white) would be invisible. */
.btn-white {
  background: #fff;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}
.btn-white:hover {
  background: var(--color-primary);
  color: #fff;
}
.btn-secondary,
.form-card .btn-secondary {
  background: var(--color-surface);
  color: var(--color-primary);
  border: 2px solid var(--color-border);
}
.btn-secondary:hover,
.btn-secondary:focus,
.form-card .btn-secondary:hover,
.form-card .btn-secondary:focus {
  background: var(--color-primary-light);
  color: #fff;
  border-color: var(--color-primary-light);
}
/* Public Check button — same purple as the Tenant Check page's Run Public
   Check button (.co-panel-pub .co-panel-action button). */
.btn-public,
.form-card .btn-public {
  background: var(--color-accent);
  color: #fff;
  border: 2px solid transparent;
}
.btn-public:hover,
.btn-public:focus,
.form-card .btn-public:hover,
.form-card .btn-public:focus {
  background: #9d5be0;
  color: #fff;
}
.btn-public[disabled],
.btn-public:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
/* Outline form of the Public Check button, for places where it is an
   alternative to the primary action rather than the primary action itself. */
.btn-secondary.btn-secondary-pub { color: var(--color-accent); }
.btn-secondary.btn-secondary-pub:hover,
.btn-secondary.btn-secondary-pub:focus {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
/* Criminal Record Check — set apart from the tenancy/public checks because it
   is the heavier, authorisation-gated action that opens the MOJ CCH form
   rather than running in one click. Its own amber-red hue marks that weight. */
.pm-check-sep {
  display: flex; align-items: center; gap: 10px;
  margin: 4px 0 0; color: var(--color-muted);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.pm-check-sep::before, .pm-check-sep::after {
  content: ""; flex: 1; height: 1px; background: var(--color-border);
}
.btn-criminal {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--color-surface); color: #b4531a;
  border: 2px solid rgba(180, 83, 26, 0.45);
}
.btn-criminal:hover, .btn-criminal:focus {
  background: #b4531a; border-color: #b4531a; color: #fff;
}
.pm-criminal-ico { width: 16px; height: 16px; flex: none; }
/* "Run Both Checks" — shared gradient, identical on the Tenant Check page and
   the application detail page. The gradient alone marks this as the primary
   action; the glow answers the pointer rather than pulsing forever, which read
   as ambient noise once the eye stopped registering it as emphasis. */
.btn-run-both {
  /* Solid colour under the gradient so a transparent frame never flashes
     through during hover; transition filter only (never `background`, whose
     gradient image swaps discretely and would flash). */
  background-color: var(--color-primary);
  background-image: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: #fff;
  border: 2px solid transparent;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.28);
  transition: filter 0.18s ease, box-shadow 0.18s ease;
}
.btn-run-both:hover,
.btn-run-both:focus {
  background-color: var(--color-primary);
  background-image: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.45), 0 0 16px 3px rgba(124, 58, 237, 0.55);
  filter: brightness(1.07);
}

/* ===== Star Ratings ===== */
.rating-item { display: flex; align-items: center; gap: 40px; margin-bottom: 12px; flex-wrap: wrap; }
.rating-label { width: 220px; font-weight: 700; color: var(--color-text); }
.star-required-wrapper { display: flex; align-items: center; gap: 12px; }
.required-text { color: var(--color-accent); font-size: 13px; }

/* Radio-based stars (single value per category, 1-5).
   Markup order is 5..1; row-reverse shows them 1..5 left-to-right. */
.star-rating { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.star-rating input[type="radio"] { display: none; }
.star-rating label {
  font-size: 26px;
  color: #cbd5e1;
  cursor: pointer;
  transition: color 0.15s;
  line-height: 1;
}
/* Score ramp (poor → excellent). forms.js sets data-score on the wrapper; the
   selected stars and the value chip take --fill / --tint from it so a low
   rating reads red and a high one green at a glance. */
.star-required-wrapper[data-score="1"] { --fill: #ef4444; --tint: #fef2f2; }
.star-required-wrapper[data-score="2"] { --fill: #f97316; --tint: #fff7ed; }
.star-required-wrapper[data-score="3"] { --fill: #f59e0b; --tint: #fffbeb; }
.star-required-wrapper[data-score="4"] { --fill: #84cc16; --tint: #f7fee7; }
.star-required-wrapper[data-score="5"] { --fill: #22c55e; --tint: #f0fdf4; }

/* Filled stars take the ramp colour (falling back to gold). Markup is
   reverse-ordered (5→1), so `input:checked ~ label` fills the selected star and
   all lower ones. */
.star-rating input:checked ~ label { color: var(--fill, #f59e0b); }
/* Hover preview stays neutral gold up to the hovered star. */
.star-rating label:hover, .star-rating label:hover ~ label { color: #f59e0b; }
/* Plain-English value beside the stars (populated by forms.js), shown as a
   pill tinted to the score. Hidden until a rating is chosen. */
.star-value {
  display: inline-flex; align-items: center;
  padding: 3px 11px; border-radius: 999px; border: 1.5px solid transparent;
  font-size: 12.5px; font-weight: 700; color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.star-value:empty { display: none; }
.star-value b { color: inherit; }
.star-required-wrapper[data-score]:not([data-score="0"]) .star-value {
  color: var(--fill); border-color: var(--fill); background: var(--tint);
}

/* ===== Checkbox groups ===== */
.checkbox-group { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; color: var(--color-text); }
/* display:flex above beats the UA [hidden] rule, so hiding a group needs this
   (e.g. the Full-Access-only recurring-billing acknowledgement on sign-up). */
.checkbox-group[hidden] { display: none; }
.checkbox-group label { display: flex; align-items: flex-start; gap: 10px; position: relative; cursor: pointer; }
.checkbox-group .checkbox-text { line-height: 1.4; }
.checkbox-group input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px; min-width: 20px;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  background-color: #fff;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.checkbox-group input[type="checkbox"]:checked { background-color: var(--color-accent); border-color: var(--color-accent); }
.checkbox-group input[type="checkbox"]:checked::after {
  content: "\2714";
  position: absolute;
  top: -1px; left: 3px;
  font-size: 14px;
  color: #fff;
}

/* Inline consent confirmation (Commercial Credit Check): a highlight tile.
   The whole row is a bordered tile that tints purple and takes an accent
   border when ticked, with the app's custom purple-fill checkbox inside it —
   hard to miss for a required confirmation. */
.checkbox-line {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 6px 0 18px;
  color: var(--color-text);
  line-height: 1.4;
  cursor: pointer;
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color 0.18s ease, background-color 0.18s ease;
}
.checkbox-line:has(input[type="checkbox"]:checked) {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 9%, var(--color-surface));
}
.checkbox-line input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px; min-width: 20px;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  background-color: #fff;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.checkbox-line input[type="checkbox"]:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.checkbox-line input[type="checkbox"]:checked::after {
  content: "\2714";
  position: absolute;
  top: -1px; left: 3px;
  font-size: 14px;
  color: #fff;
}
.checkbox-line input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ===== Radio groups (reason for check) ===== */
.radio-group { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
.radio-group > label { display: flex; align-items: center; gap: 10px; color: var(--color-text); cursor: pointer; }
.radio-group input[type="radio"] { accent-color: var(--color-accent); width: 18px; height: 18px; cursor: pointer; }

/* ===== Nested cards (checking options) ===== */
.nested-card {
  background-color: #eef2ff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  margin: 30px 0;
  overflow: hidden;
  border: 2px solid var(--color-primary);
}
.nested-card-header {
  background-color: var(--color-primary);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 700;
  padding: 12px 20px;
}
.nested-card-content { padding: 30px; }

.tag-container { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.tag {
  display: inline-block;
  background-color: #fff;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 5px 12px;
  font-size: 0.9rem;
  color: var(--color-muted);
}

/* ===== Tenant check table ===== */
.tenant-check-row {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  gap: 15px;
  flex-wrap: wrap;
}
.tenant-check-row.subtotal, .tenant-check-row.total {
  border-top: 3px solid var(--color-text);
  border-bottom: 3px solid var(--color-text);
  font-weight: 700;
}
/* A check the applicant declined: the option stays visible but unselectable,
   with the reason next to it rather than only on submit. */
.tc-noconsent {
  display: block;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--color-muted);
  margin-top: 2px;
}
.tenant-check-row input:disabled + span,
.tenant-check-row label:has(input:disabled) { color: var(--color-muted); }
.tc-noconsent-note {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-size: 0.9rem;
  color: var(--color-muted);
}
.checkbox-col { flex: 0 0 320px; }
.checkbox-col label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.checkbox-col input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-accent); cursor: pointer; }
.description-col { flex: 1; color: var(--color-muted); min-width: 200px; }
.price-col { flex: 0 0 120px; text-align: right; font-weight: 700; color: var(--color-primary); }

.nested-input { margin-top: 15px; }
.nested-input input { width: 100%; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--color-border); }
.nested-button-wrapper { text-align: center; margin-top: 20px; }
.nested-button-wrapper button { width: 100%; max-width: 240px; }

/* ===== Checking options — two-panel layout (Tenant Check + Public Check) ===== */
.co-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: stretch;
  margin: 22px 0;
}

/* Cleaner Tenant Check option rows (scoped to the panel) */
.co-panel .tenant-check-table { display: flex; flex-direction: column; gap: 2px; }
.co-panel .tenant-check-row {
  padding: 11px 12px;
  border-bottom: 1px solid var(--color-border);
  border-radius: 8px;
  gap: 10px;
  flex-wrap: nowrap;
  align-items: center;
  transition: background 0.12s ease;
}
.co-panel .tenant-check-row:hover { background: #F6F8FF; }
.co-panel .tc-opt { font-weight: 600; min-width: 0; }
.co-panel .tc-opt input[type="checkbox"] { width: 19px; height: 19px; }
.co-panel .price-col { flex: 0 0 auto; color: var(--color-primary); font-size: 0.92rem; }
.co-panel .tenant-check-row.total {
  border-top: 2px solid var(--color-border);
  border-bottom: none;
  margin-top: 8px;
  padding-top: 14px;
  background: transparent;
}
.co-panel .tenant-check-row.total:hover { background: transparent; }
.co-panel .tenant-check-row.total .tc-opt {
  font-size: 0.8rem;
  letter-spacing: 0.6px;
  color: var(--color-muted);
}
.co-panel .tenant-check-row.total .price-col { font-size: 1.05rem; }
.co-panel {
  border: 2px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
}
.co-panel-pub { border-color: #e4d6fb; }
.co-panel-head {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
  color: #fff;
  padding: 14px 18px;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.co-panel-head.pub {
  background: linear-gradient(135deg, var(--color-accent), #9d5be0);
}
.co-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.22);
  padding: 3px 10px;
  border-radius: 999px;
}
.co-panel-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.co-panel-action { margin-top: auto; padding-top: 18px; }
.co-panel-action button { width: 100%; }
/* Inline action row: "Save as default" checkbox (left) + Run button (right) */
.co-panel-action-inline { display: flex; align-items: center; gap: 14px; }
.co-panel-action-inline button { width: auto; flex: 1; }
.co-save-default {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.86rem; color: var(--color-text); cursor: pointer;
  border: 3px dashed #1E40AF; border-radius: 8px; padding: 8px 12px;
}
.co-save-default input[type="checkbox"] { width: 15px; height: 15px; }
@media (max-width: 480px) {
  .co-panel-action-inline { flex-direction: column; align-items: stretch; }
  .co-panel-action-inline button { width: 100%; }
}
.co-panel-pub .co-panel-action button {
  background: var(--color-accent);
}
.co-panel-pub .co-panel-action button:hover { background: #9d5be0; }

/* Public Check hero (right panel) */
.pub-hero { text-align: center; padding: 8px 4px 2px; }
.pub-ico {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #F3ECFF;
  color: var(--color-accent);
  margin-bottom: 12px;
}
.pub-ico svg { width: 30px; height: 30px; }
.pub-price { font-size: 1.6rem; font-weight: 800; color: var(--color-accent); margin-bottom: 8px; }
.pub-price small { font-size: 0.78rem; color: var(--color-muted); font-weight: 600; }
.pub-desc { color: var(--color-muted); font-size: 0.9rem; line-height: 1.55; margin: 0; }
.pub-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 14px; }
.pub-logo {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-primary);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 4px 9px;
  white-space: nowrap;
}

/* Check-option row: label + info icon on the left, price on the right */
.tc-opt { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 200px; }
.tc-opt label { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.tc-opt input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-accent); cursor: pointer; }

/* Info tooltip (light-background variant) */
.info-help { position: relative; flex-shrink: 0; cursor: help; outline: none; display: inline-flex; }
.info-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: #1E40AF; color: #fff;
  font-size: 0.72rem; font-weight: 800; font-style: italic; line-height: 1;
}
.info-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%) translateY(4px);
  z-index: 30;
  width: 240px;
  max-width: 70vw;
  background: #fff;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.18);
  padding: 10px 12px;
  font-size: 0.85rem;
  line-height: 1.45;
  font-weight: 400;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.info-help:hover .info-tip,
.info-help:focus .info-tip,
.info-help:focus-within .info-tip {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.info-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  margin-top: -6px;
  width: 11px; height: 11px;
  background: #fff;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

/* Combined "Run Both" action */
.co-combined {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: #F5F8FF;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
/* Gradient + hover are provided by .btn-run-both on this button. */
.co-combined button { flex-shrink: 0; }
.co-combined-note { color: var(--color-muted); font-size: 0.9rem; }
.co-combined-total { color: var(--color-primary); font-weight: 700; white-space: nowrap; }
.co-combined-total:empty { display: none; }
/* Shared invoice reference inside the combined bar (design #6) */
.co-combined-ref { flex: 1 1 240px; min-width: 220px; display: flex; flex-direction: column; gap: 5px; }
.co-combined-ref label {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--color-muted);
}
.co-combined-ref input {
  border: 1px solid var(--color-border); background: #fff; color: var(--color-text);
  border-radius: 8px; padding: 9px 11px; font-size: 0.86rem; width: 100%;
}

/* Collapsible "Add invoice reference / PO" link inside each check card (design #3) */
.co-ref { margin-top: 8px; }
.co-panel .co-ref-toggle {
  background: none; border: none; box-shadow: none; padding: 4px 0; cursor: pointer;
  color: var(--color-primary); font-weight: 700; font-size: 0.84rem;
  display: inline-flex; align-items: center; gap: 6px; width: auto; text-align: left;
}
.co-panel .co-ref-toggle:hover { background: none; text-decoration: underline; filter: none; }
.co-ref-toggle::before { content: "+"; font-weight: 800; }
.co-ref-toggle[hidden], .co-ref-field[hidden] { display: none; }
.co-ref-field input {
  width: 100%; border: 1px solid var(--color-border); background: #fff;
  color: var(--color-text); border-radius: 8px; padding: 9px 11px; font-size: 0.86rem;
}

/* Shared consents */
.co-consents { display: flex; flex-direction: column; gap: 12px; }
.co-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  color: var(--color-text);
  line-height: 1.4;
}
/* Admin test-mode checkbox inside the Tenant Check card */
.co-testmode { margin: 12px 0 2px; font-size: 0.86rem; }
.co-consent-row input[type="checkbox"] {
  width: 18px; height: 18px; min-width: 18px;
  margin-top: 2px;
  accent-color: var(--color-accent);
  cursor: pointer;
}

/* Running-checks overlay — a "document scan" loader shown after submit. */
.check-loading {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(3px);
}
.check-loading[hidden] { display: none; }
.check-loading-box {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
  padding: 34px 32px 30px;
  max-width: 400px; width: 100%;
  text-align: center;
}
.check-loading-title {
  margin: 22px 0 6px; font-weight: 700; font-size: 1.12rem;
  color: var(--color-text);
}
.check-loading-sub {
  margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--color-muted);
}

/* The scanned "document" */
.scan-doc {
  width: 76px; height: 96px; margin: 0 auto;
  border: 2.5px solid var(--color-border-input);
  border-radius: 10px;
  position: relative; overflow: hidden;
  background: var(--color-field-bg);
}
.scan-doc .scan-text {
  position: absolute; left: 12px; height: 5px; border-radius: 3px;
  background: var(--color-border-input); opacity: 0.8;
}
.scan-doc .scan-text:nth-child(2) { top: 18px; width: 44px; }
.scan-doc .scan-text:nth-child(3) { top: 34px; width: 52px; }
.scan-doc .scan-text:nth-child(4) { top: 50px; width: 38px; }
.scan-doc .scan-text:nth-child(5) { top: 66px; width: 48px; }
.scan-doc .scan-line {
  position: absolute; left: 6px; right: 6px; top: 8px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-primary));
  box-shadow: 0 0 8px rgba(124, 58, 237, 0.55);
  animation: scanMove 1.6s ease-in-out infinite;
}
@keyframes scanMove {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(72px); }
}
@media (prefers-reduced-motion: reduce) {
  .scan-doc .scan-line { animation: none; top: 50%; }
}

/* Agreement builder spacing fixes: give stacked checkboxes more breathing
   room, and stop the following field's floating label from overlapping the
   checkbox above it. Scoped to .ta-builder so other forms are unaffected. */
.ta-builder .co-consent-row + .co-consent-row { margin-top: 12px; }
.ta-builder .co-consent-row + .floating-label,
.ta-builder .co-consent-row + .field-label,
.ta-builder textarea + .floating-label { margin-top: 22px; }

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

/* ===== Check results — report cards + follow-up ===== */
/* All reports share the Commercial Credit Check card chrome so they read
   uniformly: no border, 10px radius, and a soft drop shadow. */
.report-result-card {
  background: var(--color-surface);
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 22px;
  /* Anchors the header's stacked logo + action button (see .rr-headright). */
  position: relative;
  box-shadow: 0 4px 15px rgba(15, 23, 42, 0.12);
}
/* The Public Check card shares the borderless card chrome above (it carries
   both classes); only its accent title differs — see .rr-head h2 below. */
/* Indent report content in from the card edge, while the blue filled
   section bars (.tcr-sectionbar) stay full-width at the card edge. */
.report-inset { padding-left: 20px; padding-right: 20px; }
.rr-topline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.rr-topleft { flex: 1 1 260px; min-width: 0; }
.rr-topleft .rr-head { margin-bottom: 14px; }
.rr-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.rr-head h2 { margin: 0; font-size: 1.2rem; }
/* Title matches the card's accent bar: primary blue on the Tenant Check card,
   the accent on the Public Check card. */
.report-result-card .rr-head h2 { color: var(--color-primary); }
.report-result-card-pub .rr-head h2 { color: var(--color-accent); }
/* Thin separator under the report header, above the Search Details / scoring
   section. */
.report-result-card .rr-head { border-bottom: 1px solid var(--color-border); padding-bottom: 22px; margin-bottom: 22px; }
/* Download PDF sits beside the title (out of the cramped top-right corner,
   away from the score bars). */
.rr-action-inline { margin-left: 16px; }
/* A stacked logo + Download PDF button is taller than the title beside it. Lift
   it out of the flow and pin it to the card's top-right corner, so the header
   row keeps the height of its title and the subject details below start where
   they always did. Space is reserved on the right so long titles cannot run
   underneath it. */
.rr-head:has(.rr-action) { padding-right: 216px; }
.rr-head:has(.rr-action) .rr-headright {
  position: absolute;
  top: 20px;
  right: 24px;
}
@media (max-width: 900px) {
  /* Too narrow to overlay: put the stack back in the flow. */
  .rr-head:has(.rr-action) { padding-right: 0; }
  .rr-head:has(.rr-action) .rr-headright { position: static; }
}
.rr-ico {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #EEF3FF;
  color: var(--color-primary);
}
.rr-ico.pub { background: #F3ECFF; color: var(--color-accent); }
.rr-ico svg { width: 22px; height: 22px; }

.followup-card {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  background: var(--color-slab);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 18px;
}
.followup-ico {
  width: 52px; height: 52px;
  flex-shrink: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.followup-ico svg { width: 28px; height: 28px; }
.followup-text { flex: 1; min-width: 220px; }
.followup-text h3 { margin: 0 0 4px; font-size: 1.1rem; color: #fff; }
.followup-text p { margin: 0; color: rgba(255, 255, 255, 0.68); font-size: 0.9rem; line-height: 1.5; }
.followup-card form { margin: 0; }
/* White action on the dark ground. Also matches `.followup-card .btn` so the
   anchor-based Tenant Check CTA inverts alongside the <button> ones. */
.followup-card button,
.followup-card .btn {
  padding: 14px 28px;
  line-height: 1.2;
  background: #fff;
  color: var(--color-slab);
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s ease;
}
.followup-card button:hover,
.followup-card .btn:hover { background: var(--color-slab-btn-hover); }
.followup-card button:focus-visible,
.followup-card .btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

/* ===== Public Check report (sectioned) ===== */
.pcr { margin-top: 8px; }

/* Header row: subject left, caution top-right */
/* Underlined heading header (Option D) */
/* Online Public Check report: the Download PDF button sits top-right (the
   title/logo header is hidden there), matching the Tenant Check report — same
   vertical rhythm (4px/28px) and the same 20px horizontal inset as the Tenant
   Check report's heading row. */
/* Inset the subject header (name / meta / caution) to match the Tenant Check
   report's inset content — online only, so the PDF header is unchanged. */
body:not(.pdf-report) .report-result-card-pub .rr-topline { padding-left: 20px; padding-right: 20px; }
.pcr-header { margin-bottom: 6px; }
.pcr-name {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--color-primary);
  padding-bottom: 8px;
  border-bottom: 3px solid var(--color-primary);
  display: inline-block;
}
/* Tenant Check report: the applicant name reuses the Public Check .pcr-name
   heading; this adds the spacing before the detail rows below it. */
.tcr-subject-name { margin-bottom: 16px; }
/* Commercial Check: give the company-name heading the same blue underline as
   the Tenant/Public check subject names (it's already blue via .rr-head h2). */
.cc-name { padding-bottom: 8px; border-bottom: 3px solid var(--color-primary); }
.pcr-meta { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 12px; }
.pcr-meta-item .k {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-muted);
  font-weight: 700;
}
.pcr-meta-item .v { font-weight: 700; color: var(--color-text); }
/* Online Public Check report: stack the subject meta (Date of Birth / Issued)
   as label-left/value-right rows, matching the Tenant Check report's Search
   Details. The PDF keeps the side-by-side layout. */
body:not(.pdf-report) .report-result-card-pub .pcr-meta { flex-direction: column; gap: 3px; margin-top: 16px; }
body:not(.pdf-report) .report-result-card-pub .pcr-meta-item { display: flex; gap: 12px; font-size: 0.9rem; }
body:not(.pdf-report) .report-result-card-pub .pcr-meta-item .k {
  flex: 0 0 150px; font-size: 0.9rem; text-transform: none; letter-spacing: normal;
  font-weight: 700; color: var(--color-text);
}
body:not(.pdf-report) .report-result-card-pub .pcr-meta-item .v { font-weight: 400; color: var(--color-muted); }

.pcr-caution-box {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex: 0 1 300px;
  max-width: 320px;
  background: #FDF2F8;
  border: 1px solid #fbcfe8;
  border-radius: 10px;
  padding: 12px 14px;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* Both the online Public Check report and its PDF keep the caution in the
   top-right (base .rr-topline layout), beside the subject details and under the
   logo, so the two versions match. */
.pcr-caution-mark { font-weight: 800; color: #be185d; font-size: 1.1rem; line-height: 1.1; flex-shrink: 0; }
.pcr-caution-text { font-size: 0.88rem; color: #9d174d; }
.pcr-caution-text strong { color: #be185d; text-transform: uppercase; letter-spacing: 0.4px; font-size: 0.84rem; margin-right: 4px; }

.pcr-section-head {
  background: var(--color-primary);
  color: #fff;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-size: 0.85rem;
  padding: 11px 16px;
  border-radius: 8px;
  margin: 22px 0 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* The first section head sits directly under the subject/caution block, so
   the inter-section top margin just leaves a large gap — drop it there. */
.pcr .pcr-section-head:first-child { margin-top: 0; }

/* Section help tooltip */
.pcr-help {
  position: relative;
  flex-shrink: 0;
  cursor: help;
  outline: none;
}
.pcr-help-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
  color: var(--color-primary);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: background 0.15s ease;
}
.pcr-help:hover .pcr-help-mark,
.pcr-help:focus .pcr-help-mark { background: #eef2ff; }
.pcr-tooltip {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 30;
  width: 300px;
  max-width: 78vw;
  background: #fff;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  padding: 14px 16px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.5;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.pcr-help:hover .pcr-tooltip,
.pcr-help:focus .pcr-tooltip,
.pcr-help:focus-within .pcr-tooltip,
.pcr-badge-wrap:hover .pcr-tooltip,
.pcr-badge-wrap:focus .pcr-tooltip,
.pcr-badge-wrap:focus-within .pcr-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.pcr-tooltip strong { display: block; color: var(--color-primary); margin-bottom: 5px; font-size: 0.9rem; }
.pcr-tooltip .pcr-tt-body { display: block; color: var(--color-text); }
.pcr-tooltip .pcr-tt-tip { display: block; margin-top: 8px; color: var(--color-muted); }
.pcr-tooltip .pcr-tt-tip strong { display: inline; color: var(--color-accent); margin: 0; font-size: 0.85rem; }
/* Arrow */
.pcr-tooltip::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 6px;
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  transform: rotate(45deg);
}

/* Status-badge tooltip (Review / Clear / Manual). Wraps the badge so the
   badge itself keeps its own colours; the wrapper only carries the popup. */
.pcr-badge-wrap {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  cursor: help;
  outline: none;
}
.pcr-badge-tip { width: 260px; }
.pcr-badge-wrap:focus-visible .pcr-badge {
  box-shadow: 0 0 0 2px var(--color-primary);
}
/* Tooltips are hover-only affordances — never render them in the PDF. */
@media print {
  .pcr-badge-tip { display: none !important; }
}

/* ===== Tenancy (database) check report — Experian-style ===== */
.tcr-block { margin: 6px 0 4px; }
.tcr-heading {
  margin: 4px 0 8px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-primary);
}
/* On the Tenant Check Report card the "Search Details" heading matches the
   field labels (body text) rather than the brand blue. */
.report-result-card .tcr-heading { color: var(--color-text); margin-top: 22px; }
/* Interactive member view: no "Search Details" heading — the subject's name
   heads the band with the Download PDF button inline beside it, so the details
   sit higher. (The PDF and the tenant's own report keep the heading.) */
.tcr-subject-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.tcr-subject-row .tcr-subject-name { margin-bottom: 0; }
.tcr-search { margin-bottom: 20px; }

/* Scoring placeholders (Risk Score / Percentile Rank) */
.score-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 6px 0 22px;
}
.score-card {
  background: #F7F8FA;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  padding: 16px;
  text-align: center;
}
.score-card h4 { margin: 0 0 12px; color: var(--color-primary); font-size: 1rem; }
.score-ph {
  border: 2px dashed #cbd5e1;
  border-radius: 10px;
  padding: 34px 12px;
  color: var(--color-muted);
  font-size: 0.9rem;
  font-weight: 600;
}
.score-note { color: var(--color-muted); font-size: 0.82rem; margin: 4px 0 20px; }

/* Top bands: identity/search left, summary/score-bars right */
.tcr-topband { display: flex; gap: 26px; align-items: flex-start; margin-bottom: 14px; flex-wrap: wrap; }
.tcr-topband-b { margin-bottom: 4px; }
.tcr-identity { flex: 0 0 260px; }
/* Credit block: let the Known Names / Known Addresses column grow to fill the
   available width so addresses aren't squeezed into a narrow strip. */
.tcr-identity-credit { flex: 1 1 360px; min-width: 300px; }
.tcr-identity > div { display: flex; flex-direction: column; margin-bottom: 8px; }
.tcr-identity .k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-muted); font-weight: 700; }
.tcr-identity .v { font-weight: 700; color: var(--color-text); }
.tcr-summary-panel { flex: 0 1 520px; min-width: 340px; max-width: 540px; margin-left: auto;
  border: 1px solid var(--color-border); border-radius: 12px; }
/* No overflow clip on screen, so a row's info popup can overlay the table
   below instead of being cut off at the panel edge. The PDF has no popups. */
.tcr-summary-panel { overflow: visible; }
@media print { .tcr-summary-panel { overflow: hidden; } }
.report-brand-row { text-align: right; margin-bottom: 6px; }
.report-brand { margin-left: auto; display: inline-flex; align-items: center; }
.rr-headright .report-brand { margin-left: 0; }
/* Report actions (Download PDF) live in the card's header rather than in a row
   of their own above the card, so each button sits with the report it belongs
   to. The logo and the button stack at the right-hand end of the header row. */
.rr-headright {
  margin-left: auto;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
.rr-action { flex: none; }
.btn.btn-compact { padding: 9px 16px; font-size: 0.85rem; border-radius: 9px; }
.report-brand .brand-logo,
.report-brand-row .brand-logo { height: 48px; width: auto; display: block; }
.tcr-search { flex: 1 1 340px; min-width: 280px; }

/* Score gradient bars (R3 style), stacked on the right */
.score-bars { flex: 0 0 300px; display: flex; flex-direction: column; gap: 18px; }
.scorebar-top { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 0.85rem; color: var(--color-text); margin-bottom: 8px; }
.scorebar-val { font-weight: 800; font-size: 1.05rem; }
.scorebar-val small { font-weight: 600; color: var(--color-muted); font-size: 0.72rem; }
.scorebar-track {
  position: relative; height: 14px; border-radius: 8px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.scorebar-track.risk { background: linear-gradient(90deg, #d9342b, #f0b323, #2ea84f); }
.scorebar-track.pct { background: linear-gradient(90deg, #ede9fe, #7C3AED); }
.scorebar-marker {
  position: absolute; top: -5px; width: 4px; height: 24px;
  background: #0F172A; border-radius: 2px; transform: translateX(-50%);
}
.scorebar-scale { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--color-muted); margin-top: 5px; }
.scorebar-band { font-weight: 700; font-size: 0.82rem; margin-top: 4px; }
.scorebar-sub { font-size: 0.74rem; color: var(--color-muted); margin: -4px 0 8px; }
@media (max-width: 700px) { .score-bars { flex-basis: 100%; } }

/* "What does this mean?" hover hint under each score bar (on-screen only;
   hidden in the PDF). A text link reveals a popup on hover/focus. The popup
   text is editable at Admin > Manage Page/UI. */
.scorebar-hint { position: relative; display: inline-block; margin-top: 10px; outline: none; }
.scorebar-hint-link {
  display: inline-flex; align-items: center; gap: 6px; cursor: help;
  color: var(--color-primary); font-weight: 700; font-size: 0.82rem;
}
.scorebar-hint:hover .scorebar-hint-link,
.scorebar-hint:focus-within .scorebar-hint-link { text-decoration: underline; }
.scorebar-hint:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }
.scorebar-hint-link svg { width: 15px; height: 15px; flex: none; }
.scorebar-hint-pop {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 30;
  width: 320px; max-width: 80vw;
  background: #fff; color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  padding: 13px 15px; font-size: 0.84rem; line-height: 1.55; font-weight: 400;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.scorebar-hint:hover .scorebar-hint-pop,
.scorebar-hint:focus-within .scorebar-hint-pop { opacity: 1; visibility: visible; transform: translateY(0); }
.scorebar-hint-pop::before {
  content: ""; position: absolute; top: -7px; left: 14px; width: 12px; height: 12px;
  background: #fff; border-left: 1px solid var(--color-border); border-top: 1px solid var(--color-border);
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) { .scorebar-hint-pop { transition: visibility 0.15s; } }
/* On the report card, lift the score bars up toward the header rule (desktop
   only — on mobile the columns stack, so keep the default spacing). */
@media (min-width: 701px) {
  .report-result-card .tcr-topband-b .score-bars { margin-top: -46px; }
}
/* On-screen report only (the PDF keeps the stacked layout): place both score
   bars beside the search details with the two bars side by side, and enlarge
   them for readability. */
@media (min-width: 701px) {
  body:not(.pdf-report) .report-result-card .tcr-topband-b .tcr-search { flex: 1 1 auto; min-width: 0; }
  body:not(.pdf-report) .report-result-card .tcr-topband-b .score-bars {
    flex: 0 0 50%; max-width: 50%; flex-direction: row; gap: 56px;
    /* Nudge the bars down so the block sits lower, nearer the section bar below
       (it's still shorter than the search-details column, so the card doesn't grow). */
    margin-top: 28px;
  }
  body:not(.pdf-report) .report-result-card .tcr-topband-b .scorebar { flex: 1 1 0; min-width: 0; }
  body:not(.pdf-report) .report-result-card .tcr-topband-b .scorebar-top { font-size: 0.98rem; margin-bottom: 10px; }
  body:not(.pdf-report) .report-result-card .tcr-topband-b .scorebar-val { font-size: 1.35rem; }
  body:not(.pdf-report) .report-result-card .tcr-topband-b .scorebar-val small { font-size: 0.8rem; }
  body:not(.pdf-report) .report-result-card .tcr-topband-b .scorebar-sub { font-size: 0.72rem; margin: -2px 0 12px; }
  body:not(.pdf-report) .report-result-card .tcr-topband-b .scorebar-track { height: 20px; border-radius: 11px; }
  body:not(.pdf-report) .report-result-card .tcr-topband-b .scorebar-marker { top: -7px; width: 5px; height: 34px; border-radius: 3px; }
  body:not(.pdf-report) .report-result-card .tcr-topband-b .scorebar-scale { font-size: 0.74rem; margin-top: 7px; }
  body:not(.pdf-report) .report-result-card .tcr-topband-b .scorebar-band { font-size: 0.92rem; margin-top: 7px; }
  /* Give the online Commercial Credit Check's Equifax gauge the same enlarged
     styling as the Tenant Check report's risk-score bar. PDF keeps base size. */
  body:not(.pdf-report) .commercial-report-section .scorebar-top { font-size: 0.98rem; margin-bottom: 10px; }
  body:not(.pdf-report) .commercial-report-section .scorebar-val { font-size: 1.35rem; }
  body:not(.pdf-report) .commercial-report-section .scorebar-val small { font-size: 0.8rem; }
  body:not(.pdf-report) .commercial-report-section .scorebar-sub { font-size: 0.72rem; margin: -2px 0 12px; }
  body:not(.pdf-report) .commercial-report-section .scorebar-track { height: 20px; border-radius: 11px; }
  body:not(.pdf-report) .commercial-report-section .scorebar-marker { top: -7px; width: 5px; height: 34px; border-radius: 3px; }
  body:not(.pdf-report) .commercial-report-section .scorebar-scale { font-size: 0.74rem; margin-top: 7px; }
  body:not(.pdf-report) .commercial-report-section .scorebar-band { font-size: 0.92rem; margin-top: 7px; }
}
.tcr-summary { border-radius: 8px; padding: 12px 16px; font-weight: 700; margin-bottom: 16px; }
.tcr-clear { background: #ECFDF5; border: 1px solid #A7F3D0; color: #065F46; }
.tcr-flag  { background: #FEF2F2; border: 1px solid #FECACA; color: #991B1B; }

/* Summary counts — two-column compact (Option F) */
.tcr-sumhead {
  background: #F3F6FD;
  border-radius: 12px 12px 0 0;
  color: var(--color-primary-dark);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  font-size: 0.75rem;
  padding: 10px 15px;
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 0;
}
/* Full-width section bar (e.g. "Tenancy Check" above Band A) */
.tcr-sectionbar {
  background: var(--color-primary);
  color: #fff;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  font-size: 0.9rem;
  padding: 10px 16px;
  border-radius: 8px;
  margin: 18px 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pcr-tt-list { margin: 6px 0 0; padding-left: 18px; }
.pcr-tt-list li { margin-bottom: 6px; color: var(--color-text); }

/* Photo lightbox — tenant photos and listing galleries (see photo-lightbox.js) */
.photo-modal-box { position: relative; max-width: 90vw; max-height: 90vh; }
.photo-modal-box img { max-width: 90vw; max-height: 85vh; border-radius: 10px; display: block; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
.photo-modal-close {
  position: absolute;
  top: -14px; right: -14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: var(--color-text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
/* Prev/next arrows sit over the image's left and right edges; hidden when the
   lightbox is showing a single photo. */
.photo-modal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.photo-modal-nav.prev { left: 12px; }
.photo-modal-nav.next { right: 12px; }
.photo-modal-nav[hidden] { display: none; }
.tcr-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; padding: 4px 15px 10px; margin-bottom: 0; }
.tcr-frow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid #EEF1F8;
  font-size: 0.86rem;
  color: var(--color-muted);
}
.tcr-frow > span:first-child { white-space: nowrap; }
/* A row with an adverse (warn) badge is emphasised; clear rows stay quiet. */
.tcr-frow:has(.tcr-fbadge.warn) { color: var(--color-text); }
.tcr-fbadge {
  min-width: 28px; text-align: center; font-weight: 700;
  border-radius: 6px; padding: 1px 8px;
  font-variant-numeric: tabular-nums;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* Clear / non-adverse values get a soft green square; adverse hits a pink one.
   Shown unconditionally — the app is light-themed throughout, so this no longer
   hides behind a prefers-color-scheme gate (which a dark-set browser would miss).
   Applies to both the Tenancy Summary and the Credit Summary (same classes). */
.tcr-fbadge.good { background: #bbf7d0; color: #166534; padding: 1px 8px; }
.tcr-fbadge.warn { background: #f4b6d2; color: #831843; }
@media (max-width: 560px) { .tcr-fgrid { grid-template-columns: 1fr; } }

/* "Click each for info" hint that replaces the Review/Clear badge on screen. */
.tcr-clickinfo { font-size: 0.72rem; font-weight: 600; color: var(--color-muted);
  text-transform: none; letter-spacing: normal; }

/* Summary rows that open a definition popup on click. */
.tcr-frow--info { cursor: pointer; position: relative; }
.tcr-frow--info > span:first-child { text-decoration: underline dotted; text-underline-offset: 3px;
  text-decoration-color: #c3ccdd; }
.tcr-frow--info:hover > span:first-child { text-decoration-color: var(--color-accent); }
.tcr-frow--info:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }
.tcr-pop {
  display: none; position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0;
  background: #fff; color: var(--color-text); border: 1px solid var(--color-border);
  /* Pointy top-right corner that "points" back up at the item. */
  border-radius: 10px 0 10px 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  padding: 10px 12px; font-size: 0.82rem; line-height: 1.45; font-weight: 400;
  text-transform: none; letter-spacing: normal; white-space: normal; cursor: auto;
}
/* Arrow at the top-right, pointing up toward the clicked row. */
.tcr-pop::after {
  content: ""; position: absolute; top: -6px; right: 10px;
  width: 11px; height: 11px; background: #fff;
  border-top: 1px solid var(--color-border); border-right: 1px solid var(--color-border);
  transform: rotate(-45deg);
}
.tcr-frow--info.open { z-index: 31; }
.tcr-frow--info.open .tcr-pop { display: block; }
.tcr-pop strong { display: block; color: var(--color-primary); margin-bottom: 3px; font-size: 0.84rem; }

/* Section headings — standalone blue text (no bar) */
.tcr-banner {
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  font-size: 0.9rem;
  padding: 12px 0 0;
  margin: 18px 0 8px;
  border-top: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.tcr-entry {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 9px 12px;
  margin-bottom: 6px;
}
.tcr-subhead { font-weight: 700; color: var(--color-text); font-size: 0.95rem; margin-bottom: 8px; }
.tcr-by { font-weight: 400; color: var(--color-muted); font-size: 0.82rem; }
.tcr-none { color: var(--color-muted); font-size: 0.9rem; margin: 0 0 4px 2px; }

/* Previous Checks table */
.tcr-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: 10px; margin-bottom: 6px; }
.tcr-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.tcr-table thead th {
  background: #eef2ff; color: var(--color-primary);
  text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.4px;
  padding: 6px 11px;
}
.tcr-table tbody td { padding: 6px 11px; border-top: 1px solid var(--color-border); font-size: 0.86rem; color: var(--color-text); vertical-align: top; }
.tcr-table tbody tr:nth-child(even) { background: #faf9ff; }

/* Detail rows (label / value) */
.tcr-rows { display: flex; flex-direction: column; gap: 3px; }
.tcr-rows > div { display: flex; gap: 12px; font-size: 0.9rem; }
.tcr-rows .k { flex: 0 0 150px; font-weight: 700; color: var(--color-text); }
.tcr-rows .v { color: var(--color-muted); min-width: 0; overflow-wrap: anywhere; }
/* Full-width row inside a .tcr-rows list (long notes, addresses, descriptions):
   stack the label above the value so it can wrap across the whole width. The
   label's `flex: 0 0 150px` is a width in a normal (row) entry, but would become
   a 150px height here in column flow, so reset it to auto. */
.tcr-rows > .tcr-wide { flex-direction: column; gap: 2px; }
.tcr-rows > .tcr-wide .k { flex: none; }
/* Prominent business score on the commercial (Equifax) report summary panel. */
.cx-score {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
  margin: 2px 0 12px;
  font-variant-numeric: tabular-nums;
}
/* Tenant Check "Search Details" as a compact four-column table — two key/value
   pairs per row for the short fields, with long fields (addresses, ID, issue
   date) spanning the full width. A fixed-layout table renders identically in
   WeasyPrint and browsers (flex/grid multi-column does not). */
.tcr-stbl { border-collapse: collapse; table-layout: fixed; width: 100%; }
.tcr-stbl col.c-k { width: 30%; }
.tcr-stbl col.c-v { width: 20%; }
.tcr-stbl td { font-size: 0.9rem; padding: 2px 0; vertical-align: top; line-height: 1.25; }
.tcr-stbl td.k { font-weight: 700; color: var(--color-text); padding-right: 6px; }
.tcr-stbl td.v { color: var(--color-muted); padding-right: 12px; }
/* PDF-only "stacked" variant of Search Details: a small uppercase label with
   the value bold underneath, two fields per row. Rendered only when pdf_mode is
   set, so it never appears on the web report. */
.tcr-stbl2 { border-collapse: collapse; table-layout: fixed; width: 100%; }
.tcr-stbl2 col { width: 50%; }
.tcr-stbl2 td.cell { vertical-align: top; padding: 2px 14px 5px 0; }
.tcr-stbl2 .k { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.4px;
                font-weight: 700; color: var(--color-muted); margin-bottom: 1px; }
.tcr-stbl2 .v { display: block; font-size: 0.9rem; font-weight: 600; color: var(--color-text); line-height: 1.2; }

/* Star ratings */
.tcr-stars-list { display: flex; flex-direction: column; gap: 4px; }
.tcr-star-row { display: flex; align-items: center; gap: 12px; }
.tcr-star-label { flex: 0 0 210px; font-size: 0.9rem; color: var(--color-text); }
.tcr-stars .star { color: #cbd5e1; font-size: 1.05rem; line-height: 1; }
.tcr-stars .star.on { color: var(--color-accent); }
.tcr-warn { color: #be185d; font-weight: 700; font-size: 0.88rem; margin: 8px 0 2px; }
/* Warnings shown inline in a table cell (Ratings table) — same colour, no block margin. */
.tcr-warn-cell { color: #be185d; font-weight: 700; }
.tcr-ok { color: #065F46; font-weight: 700; }

/* Tenant photos */
.tenant-photos { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 4px; }
.tenant-photo {
  width: 140px;
  height: 180px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: #f7f8fa;
  display: block;
}
.tenant-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tenant-photo-item { display: flex; flex-direction: column; gap: 8px; width: 140px; }
.tenant-photo-item .tenant-photo { width: 100%; }
.tenant-photo-item form { margin: 0; }
.tenant-photo-delete { width: 100%; text-align: center; }

/* Modal / popup */
/* Info callout (e.g. "request new questions" on the Application Form page) */
.info-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 22px;
  padding: 18px 20px;
  background: var(--color-surface, #f8f7ff);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: 12px;
}
.info-callout-icon { font-size: 1.5rem; line-height: 1.2; }
.info-callout-body { flex: 1; }
.info-callout-body strong { display: block; margin-bottom: 4px; color: var(--color-text); }
.info-callout-body p { margin: 0 0 12px; color: var(--color-muted); line-height: 1.55; }

/* Enquiry modal: right-align the action buttons and give them breathing room */
#enquiry-modal .modal-actions { justify-content: flex-end; margin-top: 20px; }

/* API enquiry modal: lighter intro so it reads as description rather than
   competing with the heading (.subheader is 600 for in-page use). */
#api-enquiry-modal .subheader { font-weight: 400; margin-bottom: 22px; }
#api-enquiry-modal .modal-actions { justify-content: flex-end; margin-top: 20px; }

/* Fixed-height, scrollable textarea (no click-drag resize) */
.textarea-scroll { resize: none; overflow-y: auto; }

/* Honeypot: kept off-screen rather than display:none, which bots detect and
   skip. Real users never see or tab into it, so a filled value means a bot. */
.hp-field {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden; opacity: 0; pointer-events: none;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 20px;
  /* Tall modals (long forms on short windows) must stay reachable: the overlay
     scrolls, and `margin: auto` on the box centres it while short without
     clipping it when it outgrows the viewport — which `align-items: center`
     alone would do, putting the submit button beyond the fold. */
  overflow-y: auto;
}
.modal-overlay > .modal-box { margin: auto; }
.modal-overlay[hidden] { display: none; }
.modal-box {
  background: #fff;
  border-radius: 14px;
  padding: 26px 28px;
  max-width: 460px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.3);
}
.modal-box h3 { margin: 0 0 10px; color: var(--color-primary); font-size: 1.2rem; }
.modal-box p { margin: 0 0 20px; color: var(--color-text); line-height: 1.55; }
.modal-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ===== Consent confirmation popup (Tenant Check) =====
   An "important" amber treatment — deliberately distinct from the plain
   primary modal — to signal that confirming carries real weight. */
:root {
  --consent-amber: #f6a609;
  --consent-amber-dark: #d68f00;
  --consent-amber-tint: #fff7e6;
}
.consent-box {
  position: relative;
  overflow: hidden;
  padding-top: 30px;   /* room below the accent bar */
  max-width: 480px;
}
.consent-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--consent-amber);
}
.consent-heading { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.consent-icon {
  flex: none;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--consent-amber-tint);
  color: var(--consent-amber-dark);
}
.consent-icon svg { width: 24px; height: 24px; }
.consent-kicker {
  display: block;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--consent-amber-dark);
  margin-bottom: 2px;
}
.consent-box .consent-title { margin: 0; color: var(--color-text); font-size: 1.2rem; }
.consent-box .consent-message { margin: 0 0 16px; color: var(--color-text); line-height: 1.55; }

/* Blue-accented "how do I get consent?" guidance callout */
.consent-guidance {
  border-left: 3px solid var(--color-primary);
  background: rgba(30, 64, 175, 0.06);
  border-radius: 0 10px 10px 0;
  padding: 12px 14px;
  margin: 0 0 16px;
}
.consent-guidance-label {
  display: block;
  font-size: 0.85rem; font-weight: 700; color: var(--color-primary);
  margin-bottom: 4px;
}
.consent-guidance-text { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--color-muted); }
.consent-guidance-link { font-weight: 600; }

/* Audit note */
.consent-note {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.85rem; color: var(--color-muted);
  margin: 0 0 20px;
}
.consent-note-icon { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--consent-amber-dark); }

/* Stacked, full-width footer buttons (proceed on top) */
.consent-actions { flex-direction: column; align-items: stretch; gap: 10px; }
.consent-actions .btn { width: 100%; text-align: center; }
.consent-proceed {
  background: var(--color-success);
  color: #fff;
  border-color: transparent;
}
.consent-proceed:hover, .consent-proceed:focus { background: #15803d; color: #fff; }
/* Tenant-check outcome options (12-month reminder modal) */
.cf-option {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; margin: 0 0 10px;
  border: 1px solid var(--color-border-input); border-radius: 10px;
  cursor: pointer; font-size: .95rem; line-height: 1.5; color: var(--color-text);
}
.cf-option:hover { border-color: var(--color-primary); background: var(--color-field-bg); }
.cf-option input[type="radio"] { margin-top: 3px; flex: none; }
.cf-option:has(input:checked) { border-color: var(--color-primary); background: var(--color-field-bg); }
/* Segmented outcome (Accepted / Declined) + reason reveal */
.cf-seg {
  display: flex; gap: 8px; margin: 4px 0 0; padding: 5px;
  background: var(--color-field-bg); border: 1px solid var(--color-border-input); border-radius: 12px;
}
.cf-seg-btn {
  flex: 1; padding: 10px; border: 0; border-radius: 9px; background: none;
  font: inherit; font-size: 0.95rem; font-weight: 700; color: var(--color-muted); cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.cf-seg-btn:hover { color: var(--color-text); }
.cf-seg-btn.is-on[data-mode="accepted"] { background: var(--color-success); color: #fff; }
.cf-seg-btn.is-on[data-mode="declined"] { background: var(--color-danger); color: #fff; }
.cf-reasons { margin-top: 14px; }
.cf-reasons[hidden] { display: none; }
.cf-reasons-label { font-size: 0.9rem; font-weight: 600; color: var(--color-muted); margin: 0 2px 10px; }
.cf-error { color: var(--color-danger); font-weight: 600; font-size: 0.9rem; margin: 12px 0 0; }
.cf-error[hidden] { display: none; }
/* Larger modal with a scrollable body (Subscriber Agreement) */
.modal-box-lg { max-width: 680px; position: relative; }
.modal-close {
  position: absolute; top: 12px; right: 14px;
  border: none; background: none; font-size: 1.6rem; line-height: 1;
  color: var(--color-muted); cursor: pointer;
}
.modal-close:hover { color: var(--color-text); }
/* Authority for Lodgement — mobile-first "sheet" layout.
   Scoped to .authority-sheet so the shared modal primitives are untouched. */
.modal-box.authority-sheet {
  position: relative;
  max-width: 380px;
  padding: 24px 24px 22px;
  border-radius: 18px;
  text-align: center;
}
/* The modal renders inside a .form-card, so the filled `.form-card button`
   style (and the mobile `width:100%` rule) would otherwise turn the close
   button into a full-width blue bar. Reset it back to a plain icon button. */
.modal-box.authority-sheet .modal-close {
  width: auto;
  min-width: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--color-muted);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  top: 14px;
  right: 16px;
}
.modal-box.authority-sheet .modal-close:hover {
  background: none;
  color: var(--color-text);
}
.authority-sheet .authority-grip {
  display: block; width: 40px; height: 4px; margin: 0 auto 18px;
  border-radius: 99px; background: var(--color-border);
}
.authority-sheet .authority-icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; margin: 0 auto 14px;
  border-radius: 13px;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.authority-sheet h3 { font-size: 1.16rem; margin: 0 0 10px; }
.authority-sheet p { margin: 0 0 20px; }
.authority-sheet .authority-actions {
  flex-direction: column;
  gap: 10px;
}
.authority-sheet .authority-actions .btn {
  width: 100%;
  text-align: center;
}
.agreement-scroll {
  max-height: 55vh; overflow-y: auto; margin: 4px 0 20px; padding-right: 8px;
  color: var(--color-text); line-height: 1.6;
}
.agreement-scroll p { margin: 0 0 12px; }

/* "Same as my Email" / small inline checkbox under a field row */
.mini-check {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.85rem; color: var(--color-muted); cursor: pointer;
  margin: -12px 0 8px;
}
.mini-check input { width: 15px; height: 15px; accent-color: var(--color-primary); }
input.is-mirrored { background: var(--color-field-bg); color: var(--color-muted); }

/* Password strength meter */
.pw-strength { margin: -12px 0 10px; max-width: 360px; }
.pw-strength[hidden] { display: none; }
.pw-strength-track { height: 7px; border-radius: 5px; background: var(--color-border); overflow: hidden; }
.pw-strength-fill { display: block; height: 100%; width: 0; border-radius: 5px; transition: width 0.2s, background 0.2s; }
.pw-strength-fill.s0 { width: 20%;  background: #dc2626; }
.pw-strength-fill.s1 { width: 40%;  background: #f97316; }
.pw-strength-fill.s2 { width: 60%;  background: #f59e0b; }
.pw-strength-fill.s3 { width: 80%;  background: #65a30d; }
.pw-strength-fill.s4 { width: 100%; background: #16a34a; }
.pw-strength-label { font-size: 0.78rem; color: var(--color-muted); margin-top: 5px; display: inline-block; }
.pw-strength-label b { color: var(--color-text); }
.field-error { display: block; color: var(--color-danger); font-size: 0.8rem; margin: -6px 0 10px; }
.field-error[hidden] { display: none; }

/* Form-wide inline validation (added by static/js/inline-errors.js) */
.field-error.auto-error {
  margin: 6px 0 0; font-weight: 600; display: flex; align-items: center; gap: 5px;
}
.field-error.auto-error::before {
  content: "!"; flex: none; width: 15px; height: 15px; border-radius: 50%;
  background: var(--color-danger); color: #fff; font-size: 10px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
/* Group validation message (radio/checkbox card groups): sits below the whole
   set of option cards, with enough room to clear the selected card's shadow. */
.field-error.auto-error.field-error--group { margin-top: 10px; }
input.is-invalid, select.is-invalid, textarea.is-invalid {
  border-color: var(--color-danger) !important;
  box-shadow: 0 0 0 1px var(--color-danger);
}
/* A grouped question (e.g. a Yes/No fieldset) turns its box red. */
fieldset.is-invalid {
  border-color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 6%, transparent);
}

/* Show/hide password toggle (added by static/js/password-toggle.js) */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { padding-right: 44px; }
/* Scoped under the parent so these beat form button styling
   (.form-card button / .side-form button) that would otherwise give the eye a
   blue background. */
.pw-wrap .pw-toggle,
.floating-label .pw-toggle {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; min-width: 0; padding: 0; margin: 0;
  border: none; background: none; box-shadow: none; color: var(--color-muted);
  cursor: pointer; border-radius: 6px; line-height: 1;
}
.pw-wrap .pw-toggle:hover,
.floating-label .pw-toggle:hover { background: none; color: var(--color-primary); }
.pw-wrap .pw-toggle:focus,
.floating-label .pw-toggle:focus { outline: none; box-shadow: none; }
.pw-toggle svg { width: 20px; height: 20px; display: block; }
.pw-toggle .pw-eye-off { display: none; }
.pw-toggle.is-visible .pw-eye { display: none; }
.pw-toggle.is-visible .pw-eye-off { display: block; }
/* Floating-label variant: room for the eye, and nudge the tick left of it. */
.floating-label.has-pw-toggle input { padding-right: 66px; }
.floating-label.has-pw-toggle .tick { right: 42px; }
.floating-label.has-pw-toggle .pw-toggle { right: 10px; }

/* Addy address autocomplete */
.addy-wrap { position: relative; }
.addy-suggestions {
  position: fixed;
  z-index: 2000;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
  margin-top: 4px;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
}
.addy-suggestions .addy-item {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: left;
  background: #fff;
  border: none;
  padding: 9px 12px;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--color-text);
  border-radius: 7px;
  cursor: pointer;
  font-family: inherit;
  transition: none;
}
.addy-suggestions .addy-item:hover { background: #F1F5F9; color: var(--color-primary); transform: none; }
/* Confirmation line shown once a company is matched to an NZBN from the lookup. */
.nzbn-picked { margin: 2px 0 8px; font-size: 0.82rem; color: #15803d; font-weight: 600; }

/* Photo cropper */
.cropper-area { margin-top: 16px; }
.cropper-canvas-wrap {
  max-width: 460px;
  height: 380px;
  background: #f7f8fa;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
}
.cropper-canvas-wrap img { display: block; max-width: 100%; }
.cropper-controls { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }

/* "View Tenant Photo" button (photo already on file) */
.btn-photo-view {
  background: #F87171;
  color: #fff;
  border: none;
}
.btn-photo-view:hover { background: #ef5a5a; }

.pcr-source { padding: 14px 2px; border-bottom: 1px solid var(--color-border); }
/* Drop the trailing separator after a section's last source (and at the end of
   the report), so there's no stray line below e.g. the Google Search source. */
.pcr-source:last-child,
.pcr-source:has(+ .pcr-section-head) { border-bottom: none; }
.pcr-source-title {
  margin: 0 0 6px;
  color: var(--color-accent);
  font-size: 0.98rem;
  font-weight: 700;
}
.pcr-source-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.pcr-source-head .pcr-source-title { margin: 0; }
.pcr-badge {
  flex: 0 0 auto; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 20px;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.ta-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ta-actions form { margin: 0; }

/* ===== Tenancy agreement signing panel ===== */
.ta-sign-panel {
  margin: 16px 0 20px; padding: 18px 20px;
  border: 1px solid #e2e6ee; border-radius: 12px; background: #fbfcfe;
}
.ta-sign-banner { font-size: 15px; color: #33405c; }
.ta-sign-banner.ta-sign-done {
  padding: 12px 14px; border-radius: 8px;
  background: #e9f7ef; border: 1px solid #bfe6cd; color: #1c6b3f;
}
.ta-sign-status { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ta-sign-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: #eef1f7; border: 1px solid #dde2ec;
  font-size: 13px; font-weight: 600; color: #55607a;
}
.ta-sign-chip.is-signed { background: #e9f7ef; border-color: #bfe6cd; color: #1c6b3f; }
.ta-sign-chip.is-signed::before { content: "\2713"; font-weight: 800; }
.ta-sign-form { margin-top: 6px; }
.ta-sign-form .signature-pad { max-width: 620px; }
.ta-sign-thanks { margin: 6px 0 0; color: #1c6b3f; font-weight: 600; }

/* ===== Clause-type badges (Mandatory / Recommended / Optional / choice) ===== */
.ta-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 5px;
  border: 1.5px solid transparent;
  color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1;
  margin-right: 8px; vertical-align: middle; flex: none;
}
.ta-badge.m { background: #be185d; }
.ta-badge.r { background: #0f766e; }
.ta-badge.o { background: #64748b; }
.ta-badge.tick { color: #16a34a; background: transparent; border-color: transparent; font-size: 15px; }
/* Trailing badge (sits after a row value / sub-item, not before a heading). */
.ta-badge.after { margin-right: 0; margin-left: 8px; width: 17px; height: 17px; font-size: 10px; }

/* Clause-selection step (builder). */
.ta-clause-legend { display: flex; gap: 20px; flex-wrap: wrap; margin: 4px 0 2px; font-size: 0.85rem; color: var(--color-muted); }
.ta-clause-legend span { display: inline-flex; align-items: center; }
.ta-clause-opt .ta-badge { vertical-align: -3px; }
.ta-clause-opt.is-locked { opacity: 0.65; cursor: default; }

/* Persistent legend at the top of the agreement builder explaining M/R/O.
   "Solid tiles" — a filled letter square + a two-line label per type. */
.ta-wizard-legend {
  display: flex; flex-wrap: wrap; gap: 10px;
  /* Match the wizard card: same max width, centred. */
  width: 100%; max-width: var(--form-max); margin: 0 auto 18px;
}
.ta-legend-tile {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 9px 10px; border-radius: 10px;
  border: 1px solid var(--color-border); background: var(--color-surface);
}
.ta-legend-tile .k {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  color: #fff; font-size: 13px; font-weight: 800;
}
.ta-legend-tile.m .k { background: #be185d; }
.ta-legend-tile.r .k { background: #0f766e; }
.ta-legend-tile.o .k { background: #64748b; }
.ta-legend-tile .stack { display: flex; flex-direction: column; line-height: 1.25; }
.ta-legend-tile .tt { font-weight: 700; color: var(--color-text); font-size: 0.9rem; }
.ta-legend-tile .ts { color: var(--color-muted); font-size: 0.78rem; }
@media (max-width: 560px) { .ta-legend-tile { flex: 1 1 100%; } }
/* Section/sub-heading badges sit inline before the heading text. */
.ta-builder h2 .ta-badge, .ta-builder h3 .ta-badge { vertical-align: 2px; }
.ta-builder .field-label .ta-badge, .ta-builder .co-consent-row .ta-badge { vertical-align: -2px; }
/* An optional floating-label field tagged with a trailing badge. */
.ta-optfield { display: flex; align-items: flex-start; gap: 10px; }
.ta-optfield > .ta-badge { margin-top: 13px; }

/* Insurance-policy input table on the builder's Statements step. */
.ta-policy-wrap { overflow-x: auto; margin: 4px 0 16px; }
.ta-policy-table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 460px; }
.ta-policy-table th {
  text-align: left; font-size: 0.78rem; font-weight: 700; color: var(--color-muted);
  padding: 4px 6px 6px;
}
.ta-policy-table th:last-child { width: 120px; }
.ta-policy-table td { padding: 3px 6px; }
.ta-policy-table input, .ta-policy-table select { width: 100%; padding: 9px 10px; border: 1.5px solid var(--color-border-input); border-radius: 8px; font-size: 14px; background: var(--color-surface); }
.ta-policy-table input:focus, .ta-policy-table select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.16); }
.ta-insul-table th:first-child, .ta-insul-area { width: 96px; font-weight: 700; color: var(--color-text); }
.ta-insul-table th:nth-child(2) { width: 190px; }

/* Read-only document: insurance-policy table (web view). */
.ta-readonly .ta-doc-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 8px 0 10px; font-size: 0.88rem; }
.ta-readonly .ta-doc-table th, .ta-readonly .ta-doc-table td { text-align: left; padding: 6px 10px; border: 1px solid var(--color-border); }
.ta-readonly .ta-doc-table th { background: var(--color-bg); font-weight: 700; color: var(--color-text); }
.ta-readonly .ta-doc-table td { color: var(--color-muted); }

/* Live RTA cap hints under the bond / rent-in-advance fields. */
.cap-hint { margin: -14px 0 14px; font-size: 0.82rem; color: var(--color-muted); }
.cap-hint:empty { display: none; }
.cap-hint.over { color: #b91c1c; font-weight: 600; }

/* Legend explaining the clause types on the read-only agreement view. */
.ta-legend {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 12px; padding: 16px 18px; margin: 6px 0 18px;
}
.ta-legend-title { font-weight: 700; margin: 0 0 12px; color: var(--color-text); }
.ta-legend-items { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.ta-legend-item {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 0.9rem; color: var(--color-muted); line-height: 1.42;
}
.ta-legend-item b { color: var(--color-text); }
.ta-legend .ta-badge { width: 26px; height: 26px; border-radius: 6px; font-size: 13px; margin-top: 1px; }
.ta-legend .ta-badge.tick { font-size: 20px; }
@media (max-width: 700px) { .ta-legend-items { grid-template-columns: 1fr; } }

/* ===== Read-only online agreement document ===== */
.ta-readonly {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 14px; padding: 30px 34px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.ta-readonly .ta-title { font-size: 1.5rem; font-weight: 800; color: var(--color-primary); margin: 0 0 2px; }
.ta-readonly .ta-sub { color: var(--color-muted); font-size: 0.9rem; margin: 0 0 20px; }
.ta-readonly .ta-sec { margin: 0 0 20px; }
.ta-readonly .ta-sec h2 {
  font-size: 0.95rem; color: var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 5px; margin: 22px 0 12px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.ta-readonly .ta-grid { display: block; }
.ta-readonly .ta-row { display: flex; gap: 12px; padding: 4px 0; align-items: baseline; }
.ta-readonly .ta-row .k { font-weight: 700; flex: 0 0 170px; color: var(--color-text); }
.ta-readonly .ta-row .v { color: var(--color-muted); }
.ta-readonly .ta-clause { margin: 0 0 14px; }
.ta-readonly .ta-clause h3 { font-size: 0.95rem; font-weight: 700; margin: 0 0 5px; color: var(--color-text); }
.ta-readonly .ta-clause p { margin: 0; white-space: pre-line; color: var(--color-muted); line-height: 1.5; }
.ta-readonly .ta-clause .ta-cp { margin: 7px 0; white-space: normal; }
.ta-readonly .ta-clause .ta-li { padding-left: 17px; text-indent: -14px; margin: 3px 0; color: var(--color-muted); line-height: 1.5; }
.ta-readonly .ta-sign { display: flex; gap: 44px; margin-top: 26px; }
.ta-readonly .ta-sign .box { flex: 1; }
.ta-readonly .ta-sign .line { border-bottom: 1px solid var(--color-text); height: 40px; margin-bottom: 5px; }
.ta-readonly .ta-sign .lbl { font-size: 0.78rem; color: var(--color-muted); }
.ta-readonly .ta-sign .sig-img { max-height: 70px; max-width: 100%; display: block; margin-bottom: 4px; }
.ta-readonly .ta-note { color: var(--color-muted); font-size: 0.8rem; margin-top: 6px; }
@media (max-width: 640px) {
  .ta-readonly { padding: 22px 18px; }
  .ta-readonly .ta-row { flex-direction: column; gap: 0; }
  .ta-readonly .ta-row .k { flex-basis: auto; }
}

/* "More information — tips & common mistakes" guidance card shown on each
   builder step (Tenancy Services style). Solid colours + borders only so the
   same markup could render in a WeasyPrint PDF if ever needed. */
.ta-more {
  --ta-tip: #0f766e; --ta-miss: #b45309;
  border: 1px solid #d6deec; border-radius: 11px; overflow: hidden;
  margin: 20px 0 6px; break-inside: avoid;
}
.ta-more-hd {
  background: var(--color-primary); color: #fff;
  padding: 10px 15px; font-size: 0.86rem; font-weight: 700;
  display: flex; align-items: center; gap: 9px;
}
.ta-more-hd .ta-more-i { flex: none; opacity: 0.9; transform: scale(1.3); transform-origin: center; }
.ta-more-bd { padding: 13px 16px; background: #fbfcfe; }
.ta-more-sub {
  font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase;
  font-weight: 800; margin: 0 0 7px;
}
.ta-more-sub.tip { color: var(--ta-tip); }
.ta-more-sub.miss { color: var(--ta-miss); margin-top: 14px; }
.ta-more ul { margin: 0; padding: 0; list-style: none; }
.ta-more li {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 0.87rem; color: #31405a; line-height: 1.42; margin: 6px 0;
}
.ta-more li .ta-more-b { flex: none; font-weight: 800; margin-top: -1px; }
.ta-more li .ta-more-b.tip { color: var(--ta-tip); }
.ta-more li .ta-more-b.miss { color: var(--ta-miss); }
.pcr-badge.review { color: var(--color-caution); background: var(--color-caution-bg); }
.pcr-badge.clear  { color: #15803d; background: #e7f6ec; }
.pcr-badge.manual { color: var(--color-muted); background: var(--color-bg); border: 1px solid var(--color-border); }
/* "Unavailable" — a configured check that could not be completed. Deliberately
   distinct from "clear" (green): a failed check must never read as no records. */
.pcr-badge.unavailable { color: #b91c1c; background: #fdecea; border: 1px solid #f3c0bb; }
/* "Searching…" — a slow source still being fetched; results arrive via polling. */
.pcr-badge.pending { color: var(--color-primary, #3730a3); background: #eef0ff; border: 1px solid #d5d9fb; }
/* Placeholder shown in a deferred section while its search is still running. */
.pcr-pending { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; color: var(--color-muted); font-size: 0.92rem; }
.pcr-pending-spinner {
  width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%;
  border: 2px solid var(--color-border, #d5d9fb); border-top-color: var(--color-primary, #3730a3);
  animation: pcr-spin 0.8s linear infinite;
}
@keyframes pcr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pcr-pending-spinner { animation: none; } }
.pcr-note { margin: 0 0 6px; font-weight: 700; color: var(--color-text); font-size: 0.9rem; }
.pcr-empty { margin: 0; color: var(--color-muted); font-size: 0.92rem; }
.pcr-empty.pcr-unavailable { color: #b91c1c; font-weight: 600; }
.pcr-links p { margin: 2px 0; font-size: 0.92rem; color: var(--color-text); }

/* "Retry auto-search" — offered on a deferred source (Court/Parole/Police) that
   fell back to a manual link after the unblocker flaked. An outline pill: clearly
   a button, but secondary to the manual link above it. Hidden in the PDF. */
.pcr-retry-row { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pcr-retry {
  appearance: none; font: inherit; font-size: 0.85rem; font-weight: 700;
  color: var(--color-primary, #3730a3); background: var(--surface, #fff);
  border: 1.5px solid var(--color-primary, #3730a3); padding: 6px 14px;
  border-radius: 20px; cursor: pointer; display: inline-flex; align-items: center;
  gap: 7px; transition: background 0.15s, color 0.15s;
}
.pcr-retry:hover { background: var(--color-primary, #3730a3); color: #fff; }
.pcr-retry:disabled { opacity: 0.6; cursor: default; }
.pcr-retry:focus-visible { outline: 2px solid var(--color-primary, #3730a3); outline-offset: 2px; }
.pcr-retry-icon { width: 13px; height: 13px; flex: 0 0 auto; transition: transform 0.4s; }
.pcr-retry:hover .pcr-retry-icon { transform: rotate(-90deg); }
@media print { .pcr-retry-row { display: none !important; } }

/* Option 07 — a caution "count" banner leading a compact list of matches.
   Kept to plain flex + solid colours so it renders identically in WeasyPrint
   PDFs; break-inside:avoid keeps a row from splitting across pages. */
.pcr-summary {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; margin-bottom: 12px;
  background: var(--color-caution-bg);
  border: 1px solid var(--color-caution-border);
  border-radius: 10px;
  break-inside: avoid;
}
.pcr-summary-count {
  font-weight: 800; font-size: 1.25rem; line-height: 1;
  color: var(--color-caution);
  font-variant-numeric: tabular-nums;
}
.pcr-summary-text { font-size: 0.9rem; color: var(--color-text); }

.pcr-results { display: flex; flex-direction: column; }
.pcr-result-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 9px 0;
  border-top: 1px solid var(--color-border);
  break-inside: avoid;
}
.pcr-result-row:first-child { border-top: 0; }
.pcr-result-main { min-width: 0; }
.pcr-result-cite {
  font-weight: 600; color: var(--color-text);
  font-variant-numeric: tabular-nums; margin-right: 8px;
}
.pcr-result-parties { color: var(--color-muted); font-size: 0.92rem; }
.pcr-result-side {
  display: flex; align-items: baseline; gap: 12px; flex: none; white-space: nowrap;
}
.pcr-result-date { color: var(--color-muted); font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.pcr-pdf { color: var(--color-primary); font-weight: 600; text-decoration: none; }
.pcr-pdf:hover { text-decoration: underline; }

/* Rich result rows (Interpol notices): photo + identity fields. */
.pcr-result-rich { align-items: flex-start; }
.pcr-result-photo {
  flex: none; width: 72px; height: 90px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--color-border);
  background: var(--color-field-bg);
}
.pcr-result-details { margin: 8px 0 0; font-size: 0.88rem; }
.pcr-result-details .pcr-detail { display: flex; gap: 10px; padding: 1px 0; break-inside: avoid; }
.pcr-result-details dt { flex: none; min-width: 130px; color: var(--color-muted); }
.pcr-result-details dd { margin: 0; color: var(--color-text); min-width: 0; }

/* Always-visible limitations notice (e.g. Tenancy Tribunal suppression /
   coverage gaps). Neutral info tone, PDF-safe. */
.pcr-caveats {
  margin-top: 14px; padding: 12px 14px;
  background: var(--color-field-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  break-inside: avoid;
}
.pcr-caveats-lead { margin: 0 0 8px; font-size: 0.85rem; font-weight: 600; color: var(--color-text); }
.pcr-caveats-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.pcr-caveats-list li { font-size: 0.82rem; color: var(--color-muted); line-height: 1.45; }
.pcr-caveats-list strong { color: var(--color-text); font-weight: 600; }

/* ===== Footer ===== */
/* Dark gradient footer (echoes the login hero: indigo → deep navy). */
.site-footer {
  position: relative;
  background: linear-gradient(120deg, #211a4d, #0d1330);
  padding: 24px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: auto; /* sit at the very bottom via the sticky-footer layout */
}
.footer-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.footer-logo { width: 28px; height: 29px; flex: none; }
.footer-lockup { height: 30px; width: auto; flex: none; display: block; }
.footer-brand span { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; color: #fff; }
.footer-links { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; }
.footer-links a { text-decoration: none; color: #c7cde6; font-size: 0.9rem; transition: color 0.2s; }
.footer-links a:hover { color: #fff; }
.footer-copy { font-size: 0.82rem; color: #8892b8; }
@media (max-width: 640px) {
  .site-footer { flex-direction: column; text-align: center; gap: 12px; padding: 22px; }
}

/* Slim utility footer for the logged-in app (sits below content, right of the
   sidebar). Light and quiet — legal links without the marketing weight. */
.app-footer {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 13px 32px;
  background: var(--color-surface); border-top: 1px solid var(--color-border);
  color: var(--color-muted); font-size: 0.82rem;
}
.app-footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.app-footer a { color: var(--color-muted); text-decoration: none; transition: color 0.2s; }
.app-footer a:hover { color: var(--color-accent); }
@media (max-width: 640px) { .app-footer { justify-content: center; text-align: center; } }

/* ===== Forms (generic) ===== */
form label.field-label { display: block; margin: 0.75rem 0 0.25rem; font-weight: 600; }

/* ===== Responsive ===== */
/* Burger navigation: below this width the nav collapses behind the toggle. */
@media (max-width: 1024px) {
  .site-header { position: relative; padding: 12px 20px; }
  .brand .brand-logo { height: 40px; }
  .nav-toggle { display: flex; }
  .nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 40;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
    max-height: calc(100vh - 76px);
    overflow-y: auto;
  }
  .nav.open { display: block; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; flex-wrap: nowrap; }
  .nav > ul > li { border-bottom: 1px solid var(--color-border); }
  .nav a { display: block; padding: 14px 22px; font-size: 1.02rem; }
  .nav a.nav-btn { display: block; margin: 12px 22px; text-align: center; }
  .dropdown-toggle { display: flex; justify-content: space-between; align-items: center; }
  /* Submenus: collapsed until the heading is tapped (.open), no hover-open. */
  .nav .dropdown-menu {
    position: static;
    display: none;
    min-width: 0;
    padding: 0;
    border: none;
    box-shadow: none;
    background: var(--color-bg);
  }
  .nav .dropdown-menu::before { display: none; }
  .nav .dropdown-menu a { padding: 12px 22px 12px 40px; }
  .has-dropdown.open > .dropdown-menu { display: block; }
}

@media (max-width: 992px) {
  /* Centre banner text on mobile (site-wide). */
  .gradient-banner { padding: 16px 20px; justify-content: center; text-align: center; }
  .gradient-banner h1 { font-size: 1.4rem; }
  .advisory-banner, .messages { margin-left: 5%; margin-right: 5%; }
  .form-card { max-width: 100%; padding: 20px; }
  .rating-item { flex-direction: column; align-items: flex-start; gap: 10px; }
  .rating-label { width: auto; }
  .checkbox-col, .description-col, .price-col { flex: 1 0 100%; text-align: left; }
  .price-col { text-align: left; }
}

@media (max-width: 600px) {
  .input-row, .alias-row { flex-direction: column; align-items: stretch; gap: 15px; }
  .alias-text { margin-right: 0; }
  .form-card button, .btn { width: 100%; text-align: center; }
}

/* ===== Rental Listings ===== */
.listings-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; margin-bottom: 8px;
}
.toolbar-actions { display: inline-flex; gap: 10px; flex-wrap: wrap; }

/* Trade Me export connection card */
.tm-connect-card {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap; margin: 6px 0 18px; padding: 14px 18px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 12px;
}
.tm-connect-main { display: flex; align-items: center; gap: 14px; }
.tm-logo {
  flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 10px; background: #0064d2; color: #fff; font-weight: 800;
  font-size: 15px; letter-spacing: .02em;
}
.tm-connect-card strong { font-size: 15px; }
.tm-connect-sub { margin: 2px 0 0; color: var(--color-muted); font-size: 13.5px; max-width: 60ch; }
.tm-connect-action { display: inline-flex; align-items: center; gap: 12px; }
.tm-status-pill {
  font-size: 12px; font-weight: 800; color: var(--ok, #0f8a5f);
  background: color-mix(in srgb, var(--ok, #0f8a5f) 12%, transparent);
  padding: 3px 11px; border-radius: 999px; white-space: nowrap;
}

/* Bond Hub (Tenancy Bond API) connect card — Tenancy Services green with a
   white logo tile; the copy stretches almost the full width of the card. */
.bh-connect-card {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap; margin: 6px 0 18px; padding: 16px 20px;
  background: #0f8a5f; border: 1px solid #0c7a52;
  border-radius: 12px;
}
/* Grows to fill the row so the text runs nearly full width up to the action. */
.bh-connect-main { display: flex; align-items: center; gap: 16px; flex: 1 1 420px; }
.bh-logo {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 10px; padding: 8px 12px;
}
.bh-logo img { display: block; height: 40px; width: auto; }
.bh-connect-card strong { font-size: 15px; color: #fff; }
.bh-connect-sub { margin: 3px 0 0; color: rgba(255, 255, 255, .92); font-size: 13.5px; max-width: none; }
.bh-connect-action { display: inline-flex; align-items: center; gap: 12px; }
.bh-status-pill {
  font-size: 12px; font-weight: 800; color: #fff;
  background: rgba(255, 255, 255, .18);
  padding: 3px 11px; border-radius: 999px; white-space: nowrap;
}

/* Book a viewing (public) */
.book-viewing-wrap { max-width: 680px; }
.book-viewing-summary {
  display: flex; gap: 14px; align-items: center; margin: 4px 0 18px;
  padding: 12px 14px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: 12px;
}
.book-viewing-summary img { width: 84px; height: 64px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; }
.book-viewing-summary strong { font-size: 15px; }
.book-viewing-summary p { margin: 2px 0 0; color: var(--color-muted); font-size: 13.5px; }
.book-viewing-summary .bv-rent { color: var(--color-primary); font-weight: 700; }
.bv-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.bv-slot { position: relative; display: block; cursor: pointer; }
.bv-slot input { position: absolute; opacity: 0; pointer-events: none; }
.bv-slot-body {
  display: block; padding: 12px 14px; border: 1.5px solid var(--color-border-input);
  border-radius: 10px; transition: border-color .15s ease, box-shadow .15s ease;
}
.bv-slot:hover .bv-slot-body { border-color: var(--color-primary); }
.bv-slot input:checked + .bv-slot-body {
  border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.16);
}
.bv-slot-when { display: block; font-weight: 700; }
.bv-slot-time { display: block; color: var(--color-muted); font-size: 13px; margin-top: 2px; }
.bv-slot-spots { display: block; color: var(--color-primary); font-size: 12px; font-weight: 600; margin-top: 4px; }
.bv-slot-request .bv-slot-body { border-style: dashed; }

/* Wizard step indicator + nav */
.bv-steps {
  display: flex; gap: 8px; list-style: none; margin: 0 0 14px; padding: 0; flex-wrap: wrap;
}
.bv-step-dot {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  color: var(--color-muted); flex: 1 1 auto;
}
.bv-step-dot span {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px;
  background: #EEF2FF; color: var(--color-muted); font-size: 12px; font-weight: 800;
  border: 2px solid transparent; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
/* Completed steps take the brand gradient; the current one is ringed — same
   language as the signup wizard and the tenancy-application stepper. */
.bv-step-dot.is-done { color: var(--color-accent); }
.bv-step-dot.is-done span {
  background: linear-gradient(120deg, var(--color-accent), var(--color-primary));
  color: #fff; box-shadow: 0 4px 10px -5px rgba(124, 58, 237, 0.6);
}
.bv-step-dot.is-active { color: var(--color-primary); }
.bv-step-dot.is-active span {
  background: var(--color-surface); color: var(--color-primary); border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 14%, transparent);
}
.bv-nav { display: flex; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
/* Progressive enhancement: without the .has-js flag (JavaScript off) every step
   and the final submit stay visible, so the booking works as one plain form.
   With JS, only the active step shows and the step progress indicator appears. */
.has-js .bv-step { display: none; }
.has-js .bv-step.bv-step--visible { display: block; }
.bv-steps { display: none; }
.has-js .bv-steps { display: flex; }
.bv-step [data-bv-next], .bv-step [data-bv-back] { display: none; }
.has-js .bv-step [data-bv-next], .has-js .bv-step [data-bv-back] { display: inline-block; }
.bv-review { margin: 4px 0 0; }
.bv-review > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--color-border); }
.bv-review dt { color: var(--color-muted); font-weight: 600; }
.bv-review dd { margin: 0; font-weight: 600; text-align: right; }

/* Viewings management (owner) */
.viewing-card { margin-bottom: 12px; }
.viewing-card.viewing-past { opacity: .62; }
.viewing-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.viewing-meta { display: block; color: var(--color-muted); font-size: 13px; margin-top: 2px; }
.listing-grid {
  display: grid; gap: 1.5rem; margin: 1.5rem 0;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1100px) { .listing-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .listing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .listing-grid { grid-template-columns: 1fr; } }

/* Home page featured rentals — single-row, auto-scrolling marquee. The track
   holds two identical sets of cards; translateX(-50%) loops seamlessly because
   each card (incl. the last) carries an equal right margin. Pauses on hover;
   falls back to a manual horizontal scroll when reduced motion is preferred. */
.listing-carousel { overflow: hidden; margin: 1.5rem 0;
  -webkit-mask: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.listing-track { display: flex; width: max-content; animation: listing-marquee 45s linear infinite; }
.listing-carousel:hover .listing-track,
.listing-carousel:focus-within .listing-track { animation-play-state: paused; }
.listing-track .listing-card { flex: 0 0 300px; width: 300px; margin-right: 1.5rem; }
@keyframes listing-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .listing-track { animation: none; }
  .listing-carousel { overflow-x: auto; }
}
.listing-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 12px; overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 4px 14px rgba(30, 64, 175, 0.06);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.listing-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(30, 64, 175, 0.12); }
.listing-thumb {
  position: relative; display: block; height: 170px; background: var(--color-field-bg);
}
.listing-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listing-thumb-empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--color-muted); font-size: 0.9rem;
}
.listing-status { position: absolute; top: 10px; left: 10px; }
.listing-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.listing-price { font-size: 1.25rem; font-weight: 800; color: var(--color-primary); }
.listing-price span { font-size: 0.85rem; font-weight: 600; color: var(--color-muted); }
.listing-title { font-size: 1rem; margin: 0; }
.listing-title a { color: var(--color-text); text-decoration: none; }
.listing-title a:hover { color: var(--color-accent); }
.listing-loc { color: var(--color-muted); font-size: 0.9rem; margin: 0; }
.listing-specs { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px 0 0; margin: 0; }
.listing-specs li { display: inline-flex; align-items: center; gap: 5px; font-size: 0.9rem; color: var(--color-muted); }
.listing-specs li svg { width: 18px; height: 18px; flex: none; }
.listing-specs li span { font-weight: 700; color: var(--color-text); }
/* Visually-hidden label kept available to screen readers. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Status filter chips with per-status portfolio counts. */
.status-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.status-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px; text-decoration: none;
  font-size: 0.85rem; font-weight: 700; color: var(--color-muted);
  background: var(--color-surface); border: 1px solid var(--color-border);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.status-chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.status-chip.is-active {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}
.status-chip .chip-count {
  font-size: 0.78rem; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 1px 7px; border-radius: 999px;
  background: var(--color-field-bg); color: var(--color-muted);
}
.status-chip.is-active .chip-count { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* Availability line + "finish setup" nudge on cards. */
.listing-avail { margin: 0; font-size: 0.85rem; font-weight: 700; color: #047857; }
.listing-nudge {
  display: inline-block; margin-top: 4px; font-size: 0.82rem; font-weight: 700;
  color: var(--color-accent); text-decoration: none;
}
.listing-nudge:hover { text-decoration: underline; }

/* Inline status change on each card. */
.listing-status-form { margin: 0; }
.listing-status-select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  font-size: 0.82rem; font-weight: 600; color: var(--color-text);
  padding: 6px 30px 6px 11px; border-radius: 8px;
  border: 1px solid var(--color-border-input);
  background-color: var(--color-surface);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center; background-size: 14px 14px;
}
.listing-status-select:hover { border-color: var(--color-primary); }
.listing-status-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.16); }

/* Action badges: applications received / viewings awaiting the member. Amber
   "needs attention" so they read as a worklist, not decoration. */
.listing-alerts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.listing-alert {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.78rem; font-weight: 700; line-height: 1.2;
  padding: 4px 10px; border-radius: 999px; text-decoration: none;
  background: #fffbeb; color: #92400e; border: 1px solid #fde68a;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.listing-alert::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #f59e0b; flex: none;
}
.listing-alert:hover { background: #fef3c7; border-color: #fcd34d; }
.listing-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.listing-empty, .listing-gallery-empty {
  grid-column: 1 / -1; text-align: center; padding: 2.5rem 1rem;
  background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: 12px;
}
.listing-gallery-empty { margin: 1.25rem 0; }
.listing-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin: 1.25rem 0; }
.listing-gallery img { width: 100%; height: 150px; object-fit: cover; border-radius: 10px; display: block; }
.listing-photo-item { position: relative; }
.listing-photo-item form { position: absolute; top: 8px; right: 8px; margin: 0; }
.detail-table { width: 100%; border-collapse: collapse; }
.detail-table th { text-align: left; color: var(--color-muted); font-weight: 600; padding: 6px 12px 6px 0; white-space: nowrap; vertical-align: top; }
.detail-table td { padding: 6px 0; }
.feature-list { margin: 0.25rem 0 0 1.1rem; }

/* ===== Public listing detail (Trade Me Classic) ===== */
.ld-body { display: grid; grid-template-columns: 1fr 300px; gap: 24px; align-items: start; margin-top: 20px; }
.ld-main {
  min-width: 0; grid-column: 1;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 14px; padding: 26px 28px;
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 10px 30px rgba(30,64,175,.05);
}
.ld-sidebar { display: flex; flex-direction: column; gap: 16px; grid-column: 2; grid-row: 1; margin-top: -80px; position: relative; z-index: 2; }
.ld-sidebar .agent-card { box-shadow: 0 18px 46px rgba(15,23,42,.34); padding: 22px 20px 20px; }
.ld-sidebar .agent-avatar { width: 78px; height: 78px; margin-bottom: 10px; }
.ld-sidebar .side-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 14px; padding: 20px; font-size: .9rem;
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
}
.ld-sidebar .side-card h3 { margin: 0 0 10px; font-size: .85rem; font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: .03em; }

/* Full-width photo stage */
.ld-stage { margin: 1.25rem 0 0; }
.ld-hero {
  display: block; border-radius: 14px 14px 0 0; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 12px 34px rgba(30,64,175,.08);
}
.ld-hero img { width: 100%; height: 500px; object-fit: cover; display: block; }
.ld-hero-empty {
  height: 320px; display: grid; place-items: center; background: var(--color-surface-2, #f6f8fd);
  border: 1px dashed var(--color-border-strong, #c7d0e8); color: var(--color-muted);
}
.ld-thumbs-strip {
  background: var(--color-surface); border: 1px solid var(--color-border); border-top: 0;
  border-radius: 0 0 14px 14px; padding: 10px 12px;
}
.ld-thumbs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.ld-thumb {
  flex: none; width: 96px; height: 66px; border-radius: 8px; overflow: hidden;
  border: none; padding: 0; cursor: pointer; background: none; opacity: .7;
  outline: 2px solid transparent; transition: opacity .15s ease, outline-color .15s ease;
}
.ld-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-thumb:hover { opacity: 1; }
.ld-thumb.active { opacity: 1; outline-color: var(--color-primary); }
.ld-thumb:focus-visible { outline-color: var(--color-primary); }

/* Listed date + title block */
.ld-listed-date { color: var(--color-primary); font-size: .82rem; font-weight: 600; margin: 0 0 6px; }
.ld-title { font-size: 1.5rem; font-weight: 800; line-height: 1.2; margin: 0 0 2px; color: var(--color-text); }
.ld-price-line { font-size: 1.15rem; font-weight: 700; color: var(--color-text); margin: 0 0 14px; }

/* Pill badges for beds / baths / parking */
.ld-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.ld-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px;
  border: 1px solid var(--color-border); border-radius: 999px;
  font-size: .85rem; font-weight: 600; background: var(--color-surface);
}
.ld-pill svg { width: 18px; height: 18px; color: var(--color-primary); flex: none; }

/* Section headings */
.ld-section-head {
  font-size: .85rem; font-weight: 700; color: var(--color-primary);
  margin: 24px 0 10px; text-transform: uppercase; letter-spacing: .03em;
}

/* Striped detail table */
.ld-detail-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ld-detail-table tr:nth-child(even) td { background: var(--color-field-bg); }
.ld-detail-table td { padding: 8px 12px; }
.ld-dt-label { width: 40%; color: var(--color-muted); font-weight: 600; white-space: nowrap; }
.ld-dt-value { color: var(--color-text); }

/* Features checklist */
.ld-features {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 20px;
}
.ld-features li { display: flex; align-items: center; gap: 9px; color: var(--color-text); font-size: .95rem; }
.ld-features li svg { width: 20px; height: 20px; color: var(--color-primary); flex: none; }

/* Description with read-more */
.ld-description { color: var(--color-text); line-height: 1.6; }
.ld-description p { margin: 0 0 .9rem; }
.ld-description p:last-child { margin-bottom: 0; }
.ld-description.is-clamped {
  max-height: 11.2em; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 68%, transparent);
  mask-image: linear-gradient(#000 68%, transparent);
}
.ld-readmore {
  margin-top: 10px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .95rem; font-weight: 700; color: var(--color-primary);
}
.ld-readmore:hover { text-decoration: underline; }
.ld-firstlisted { color: var(--color-muted); font-size: .9rem; margin: 0; }

/* Back link */
.ld-back {
  display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 14px;
  font-size: .95rem; font-weight: 600; color: var(--color-primary); text-decoration: none;
}
.ld-back:hover { text-decoration: underline; }
.ld-back svg { width: 18px; height: 18px; }

/* Location map */
.ld-map-head { display: flex; align-items: center; gap: 8px; }
.ld-map-head svg { width: 22px; height: 22px; color: var(--color-primary); flex: none; }
.ld-map-address { color: var(--color-muted); margin: 6px 0 12px; font-size: .95rem; }
.ld-map-wrap { position: relative; }
.ld-map {
  height: 340px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--color-border); background: var(--color-field-bg); z-index: 0;
}
.ld-map-wrap.is-failed .ld-map { display: none; }
.ld-map-note {
  margin: 0; padding: 22px; text-align: center; color: var(--color-muted); font-size: .92rem;
  border: 1px dashed var(--color-border-strong, #c7d0e8); border-radius: 12px; background: var(--color-field-bg);
}
.ld-house-pin-inner {
  display: grid; place-items: center; width: 40px; height: 40px;
  background: var(--color-primary); color: #fff; border: 2px solid #fff;
  border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.45);
}
.ld-house-pin-inner svg { width: 20px; height: 20px; transform: rotate(45deg); }

/* Responsive: stack to single column on narrow screens */
@media (max-width: 820px) {
  .ld-body { grid-template-columns: 1fr; }
  .ld-main { grid-column: 1; }
  .ld-sidebar { grid-column: 1; grid-row: auto; order: 2; margin-top: 0; }
  .ld-hero img { height: 380px; }
}
@media (max-width: 600px) { .ld-hero img { height: 260px; } }

/* Advertiser / agent card */
.agent-card {
  background: var(--color-primary); color: #fff; border-radius: 14px;
  padding: 26px 20px 22px; text-align: center; box-shadow: var(--shadow, 0 10px 30px rgba(30,64,175,.18));
}
.agent-avatar {
  width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 12px; overflow: hidden;
  background: #fff; border: 3px solid rgba(255,255,255,.7); display: grid; place-items: center;
}
.agent-avatar img { width: 100%; height: 100%; object-fit: cover; }
.agent-avatar span { color: var(--color-primary); font-weight: 800; font-size: 30px; letter-spacing: .5px; }
.agent-name { font-weight: 700; font-size: 1.1rem; }
.agent-role { color: rgba(255,255,255,.82); font-size: .85rem; margin-top: 3px; }
.agent-contact-btn {
  margin-top: 14px; width: 100%; border: 1.5px solid rgba(255,255,255,.6); background: transparent;
  color: #fff; font: inherit; font-weight: 700; font-size: 14px; padding: 10px 16px;
  border-radius: 10px; cursor: pointer; transition: background .18s ease, border-color .18s ease;
}
.agent-contact-btn:hover { background: rgba(255,255,255,.14); border-color: #fff; }
/* Revealed phone numbers */
.agent-phones { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.agent-phones[hidden] { display: none; }
.agent-phone {
  display: flex; align-items: center; gap: 10px; text-align: left;
  background: rgba(255,255,255,.12); border-radius: 10px; padding: 9px 12px;
  color: #fff; text-decoration: none; font-weight: 700; font-size: 15px;
}
.agent-phone:hover { background: rgba(255,255,255,.2); }
.agent-phone svg { width: 20px; height: 20px; flex: none; opacity: .9; }
.agent-phone span { display: flex; flex-direction: column; line-height: 1.2; }
.agent-phone small { font-weight: 500; font-size: 11px; opacity: .75; text-transform: uppercase; letter-spacing: .04em; }
/* Enquire button inside the agent card (solid white on the navy card) */
.agent-enquire-btn {
  margin-top: 10px; width: 100%; border: none; background: #fff; color: var(--color-primary);
  font: inherit; font-weight: 700; font-size: 14px; padding: 11px 16px; border-radius: 10px;
  cursor: pointer; transition: filter .18s ease;
}
.agent-enquire-btn:hover { filter: brightness(0.94); }
/* "View more from this office" / office website links under the agent card */
.agent-office {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.16);
  display: flex; flex-direction: column; gap: 8px;
}
.agent-office-link {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  color: #fff; font-size: 13px; font-weight: 600; text-decoration: none;
  padding: 9px 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 9px;
  transition: background .18s ease, border-color .18s ease;
}
.agent-office-link:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.agent-office-count {
  background: rgba(255,255,255,.18); color: #fff; font-size: 12px; font-weight: 700;
  min-width: 22px; text-align: center; padding: 1px 7px; border-radius: 999px;
}

/* Apply button — violet with a glow */
.btn-apply {
  background: #7C3AED; color: #fff; border: 2px solid transparent;
  box-shadow: 0 0 0 rgba(124,58,237,.5), 0 6px 18px rgba(124,58,237,.45);
  transition: box-shadow .2s ease, background .2s ease, transform .1s ease;
}
.btn-apply:hover {
  background: #6d28d9; color: #fff;
  box-shadow: 0 0 22px rgba(124,58,237,.7), 0 6px 22px rgba(124,58,237,.55);
}
.btn-apply:active { transform: translateY(1px); }

/* Apply flow (auth / verify / consent) */
.apply-auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 720px) { .apply-auth-grid { grid-template-columns: 1fr; } }
.verify-wrap { max-width: 460px; }
/* Email graphic above the "Enter your login code" heading. Centred, with a
   little breathing room between it and the card's gradient top bar. */
.verify-graphic {
  display: flex; justify-content: center; margin: 4px 0 2px;
}
/* Nudge right so the envelope (the visual centre of mass) reads as centred —
   the paper plane adds weight to the right, which otherwise looks off-centre. */
.verify-graphic svg { display: block; height: auto; margin-left: 12px; }
/* Centre the heading, intro copy and the "Resend it" line within the card.
   (The code field is already centred; the "Remember this device" row stays a
   left-aligned checkbox.) The zeroed heading top margin keeps the heading
   close to the graphic above it. */
.verify-wrap .form-card h2,
.verify-wrap .form-card .subheader { text-align: center; }
.verify-wrap .form-card h2 { margin-top: 0; }
.code-input {
  text-align: center; letter-spacing: .5em; font-size: 1.6rem; font-weight: 700;
  font-variant-numeric: tabular-nums; padding: 12px 10px 12px 16px;
}
/* "Remember this device" checkbox on the login-code page. The attribute
   selector outranks the generic ".side-form input" field styling so the
   checkbox stays a checkbox rather than a full-width box. */
.remember-device {
  display: flex; align-items: center; gap: 8px; margin: 12px 0 4px;
  font-size: 0.88rem; color: var(--color-muted); cursor: pointer;
}
.remember-device input[type="checkbox"] {
  width: 16px; height: 16px; min-width: 16px; margin: 0; padding: 0;
  accent-color: var(--color-primary); flex: none;
}
.remember-device span { flex: 1; }
/* Render as a plain inline text link, even inside .form-card (which otherwise
   styles every <button> as a solid button). */
.linklike,
.form-card button.linklike {
  display: inline; width: auto; border: none; background: none;
  color: var(--color-primary); font: inherit; font-weight: 700;
  cursor: pointer; padding: 0; text-decoration: underline;
}
.form-card button.linklike:hover { background: none; color: var(--color-primary-light); }
.linklike-danger { color: var(--color-danger, #B91C1C); }
.linklike-danger:hover { color: var(--color-danger, #B91C1C); opacity: .8; }
.inv-row-actions { white-space: nowrap; }
.inv-row-actions form { display: inline; margin-left: 14px; }
/* Inline "link button" (e.g. Email an invoice) styled to match .hyperlink. */
.row-actions { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.inline-action { display: inline; margin: 0; }
button.link-btn {
  display: inline; width: auto; border: none; background: none; padding: 0;
  font: inherit; cursor: pointer; color: var(--color-accent); text-decoration: none;
}
button.link-btn:hover { text-decoration: underline; }
.consent-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
/* Agent column on the right: logo on top (raised), advertiser below it. */
.consent-agent { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; margin-top: 6px; flex: none; }
.consent-agent-role { margin: 0; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); }

/* Verified Mover add-on step */
.addon-note {
  display: flex; align-items: flex-start; gap: 12px;
  background: #fef9c3; border-radius: 10px; padding: 14px 18px; margin: 4px 0 22px;
}
.addon-note p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--color-text); }
.addon-star { color: #eab308; font-size: 1.2rem; line-height: 1.3; flex: none; }
.addon-note-active { background: #dcfce7; }
.addon-note-active .addon-star { color: #16a34a; }
.addon-card { border: 1px solid var(--color-border); border-radius: 14px; padding: 22px 24px; }
.addon-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.addon-title { margin: 0; font-size: 1.3rem; color: var(--color-text); }
.addon-term { margin: 6px 0 0; font-weight: 700; color: var(--color-text); }
.addon-price-col { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.addon-price { font-size: 1.7rem; font-weight: 700; color: var(--color-text); line-height: 1; }
.addon-price sup { font-size: .9rem; font-weight: 700; }
.addon-inline-form { margin: 0; }
.addon-sub { margin: 0 0 12px; font-size: 1.05rem; color: var(--color-text); }
.addon-perks { list-style: none; padding: 0; margin: 0 0 20px; }
.addon-perks li { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-weight: 600; color: var(--color-text); }
.addon-check { color: var(--color-success); font-weight: 700; flex: none; }
.addon-soon {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--color-muted); background: var(--color-field-bg);
  border: 1px solid var(--color-border-input); border-radius: 999px; padding: 1px 8px;
}
.addon-fine { font-size: .85rem; line-height: 1.55; color: var(--color-muted); margin: 0 0 12px; }
.addon-fine-center { text-align: center; margin-top: 20px; }
.addon-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; }
.addon-back { font-weight: 700; }

/* Verified Applicant: Standard vs Verified comparison */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.compare-col { border: 1px solid var(--color-border); border-radius: 14px; padding: 22px 24px; display: flex; flex-direction: column; }
.compare-col-featured { border: 2px solid var(--color-accent); position: relative; background: linear-gradient(160deg, #faf5ff, #ffffff); }
.compare-badge {
  position: absolute; top: -11px; right: 18px;
  background: var(--color-accent); color: #fff;
  font-size: .7rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
}
.compare-title { margin: 0; font-size: 1.15rem; color: var(--color-text); }
.compare-price { margin: 4px 0 16px; color: var(--color-muted); }
.compare-price strong { color: var(--color-text); font-size: 1.15rem; }
.compare-list { list-style: none; padding: 0; margin: 0 0 20px; }
.compare-list li { padding: 6px 0; line-height: 1.5; color: var(--color-text); }
.compare-list li.yes::before { content: "\2713"; color: var(--color-success); font-weight: 800; margin-right: 8px; }
.compare-list li.no { color: var(--color-muted); }
.compare-list li.no::before { content: "\2013"; margin-right: 8px; }
.compare-cta { margin: auto 0 0; }
.compare-cta .btn { width: 100%; }
.compare-gst { font-size: .8rem; color: var(--color-muted); font-weight: 600; }
.compare-terms { margin: 10px 0 0; font-size: .76rem; color: var(--color-muted); line-height: 1.4; text-align: center; }
.form-card .btn-plain { background: var(--color-field-bg); color: var(--color-text); border: 2px solid var(--color-border-input); }
.form-card .btn-plain:hover { background: #eef2f7; }
@media (max-width: 700px) { .compare-grid { grid-template-columns: 1fr; } }
/* Flexible logo sizing: bound by a box and scaled to fit while keeping aspect,
   so wide logos display at full width instead of being shrunk into a square. */
.consent-logo { max-width: 196px; max-height: 109px; width: auto; height: auto; border-radius: 12px; }
@media (max-width: 700px) {
  .consent-header { flex-direction: column-reverse; align-items: flex-start; gap: 14px; }
  .consent-agent { align-items: flex-start; text-align: left; margin-top: 0; }
  .consent-logo { max-width: 140px; max-height: 98px; }
  .consent-propmain { gap: 12px; }
  .consent-cover { width: 60px; height: 60px; }
  .consent-address { font-size: 1.08rem; }
}
.consent-property { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; text-align: left; min-width: 0; }
.consent-propmain { display: flex; align-items: center; gap: 16px; min-width: 0; }
.consent-cover { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; flex: none; border: 1px solid var(--color-border); }
.consent-eyebrow { color: var(--color-muted); font-size: .85rem; margin: 0 0 2px; text-transform: uppercase; letter-spacing: .06em; }
.consent-address { margin: 0 0 8px; font-size: 1.2rem; color: var(--color-text); }
.consent-agency { margin: 0; font-weight: 700; color: var(--color-text); }
.consent-agency span { font-weight: 500; color: var(--color-muted); font-size: .9rem; }
.consent-body { max-height: 46vh; }
.consent-agree { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-weight: 600; color: var(--color-text); cursor: pointer; }
.consent-agree input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--color-primary); }

.side-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 14px; padding: 20px;
  box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 10px 30px rgba(30,64,175,.05);
}
.side-card h2 { margin: 0 0 6px; font-size: 1.15rem; color: var(--color-text); }
.side-sub { color: var(--color-muted); font-size: .9rem; margin: 0 0 14px; line-height: 1.5; }
.side-form { display: flex; flex-direction: column; gap: 10px; }
.side-form input, .side-form textarea {
  width: 100%; border: 1px solid var(--color-border-input); border-radius: 9px;
  padding: 11px 13px; font: inherit; font-size: .95rem; color: var(--color-text); background: #fff;
}
.side-form input:focus, .side-form textarea:focus {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(30,64,175,.14);
}
.side-form textarea { resize: none; }
.side-btn { width: 100%; text-align: center; margin-top: 2px; }
.side-links { margin: 0; }
.feature-list li { margin-bottom: 4px; }
.checkbox-row { display: flex; gap: 22px; flex-wrap: wrap; margin: 6px 0 14px; }
.checkbox-row .checkbox { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text); }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 18px; margin: 6px 0 4px; }
.checkbox-grid .checkbox { display: inline-flex; align-items: center; gap: 8px; color: var(--color-text); }
.btn-sm.btn-danger { color: var(--color-danger); border-color: var(--color-danger); }
button.btn-danger { background: var(--color-danger); color: #fff; border: none; }

/* ===== Listing photo manager (drag-to-reorder + cover) ===== */
.card-divider {
  border: none; border-top: 1px solid var(--color-border);
  margin: 24px 0; height: 0;
}
.card-subhead {
  font-size: 1.05rem; font-weight: 700; color: var(--color-text);
  margin: 0 0 12px;
}
.photo-tip {
  color: var(--color-muted); font-size: 0.9rem; margin: 0 0 12px;
  background: var(--color-field-bg); border: 1px solid var(--color-border);
  border-radius: 8px; padding: 10px 12px;
}
.photo-manage-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px; margin-bottom: 1.5rem;
}
.photo-item {
  position: relative; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--color-border); background: var(--color-field-bg);
  user-select: none; cursor: grab;
}
.photo-item img { width: 100%; height: 150px; object-fit: cover; display: block; pointer-events: none; }

/* SortableJS drag states: the chosen tile lifts, the placeholder gap fades. */
.photo-chosen { cursor: grabbing; }
.photo-dragging {
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.28);
  transform: scale(1.03); opacity: 0.97;
}
.photo-ghost { opacity: 0.35; }
.photo-ghost img { filter: grayscale(0.3); }

/* Cover badge + hiding "Set as cover" apply only to the first photo. */
.photo-cover-badge {
  display: none; position: absolute; top: 8px; left: 8px; z-index: 2;
  background: var(--color-primary); color: #fff; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.4px; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.25);
}
.photo-item:first-child .photo-cover-badge { display: block; }
.photo-item:first-child .photo-btn-cover { display: none; }

.photo-item-actions {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: 6px; justify-content: flex-end; padding: 8px;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0));
}
.photo-item-actions form { margin: 0; }
/* Scoped under .photo-item-actions so these keep their compact styling even
   when the grid sits inside a .form-card (whose generic button rule would
   otherwise win on specificity). */
.photo-item-actions .photo-btn {
  border: none; border-radius: 6px; padding: 6px 10px; font-size: 0.78rem;
  font-weight: 700; cursor: pointer; line-height: 1.1;
}
.photo-item-actions .photo-btn-cover { background: #fff; color: var(--color-primary); }
.photo-item-actions .photo-btn-cover:hover { background: var(--color-primary); color: #fff; }
/* Always-visible white text (fixes the invisible red-on-red Remove button). */
.photo-item-actions .photo-btn-remove { background: var(--color-danger); color: #fff; }
.photo-item-actions .photo-btn-remove:hover { filter: brightness(1.1); }

/* Public browse filter bar */
.rental-filters {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; justify-content: center;
  width: fit-content; max-width: 100%; margin: 1.25rem auto;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 12px; padding: 16px;
  box-shadow: 0 4px 14px rgba(30, 64, 175, 0.05);
}
/* Each control is a labelled field (label stacked above the input). */
.rental-field { display: flex; flex-direction: column; gap: 4px; }
.rental-field-label {
  font-size: 0.72rem; font-weight: 800; color: var(--color-muted);
  text-transform: uppercase; letter-spacing: 0.4px;
}
/* Override the global `select { width:100%; display:block }`. */
.rental-field input, .rental-field select {
  width: auto; display: block; margin: 0; font-size: 0.95rem; color: var(--color-text);
}
.rental-field input {
  padding: 10px 12px; border: 1px solid var(--color-border-input);
  border-radius: 8px; background: var(--color-field-bg);
}
.rental-field select { min-width: 150px; }
.rental-field-location select { min-width: 220px; }
.rental-filter-num { width: 120px; }
.rental-search-btn, .rental-refine-btn { align-self: flex-end; }

/* The advanced "Refine search" panel: a full-width row that toggles open. */
.rental-refine {
  flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--color-border);
}
/* Progressive enhancement: the panel only collapses when JS (.has-js) can
   toggle it back open; without JS it stays open and the toggle button — which
   would do nothing — is hidden instead. */
.has-js .rental-refine[data-collapsed] { display: none; }
.rental-refine-btn { display: none; }
.has-js .rental-refine-btn { display: inline-block; }
/* No-JS fallback submit for the inline listing-status form (hidden when the
   select can auto-submit via JS). */
.has-js .listing-status-go { display: none; }

/* Toggle switch */
.toggle-switch { position: relative; display: inline-block; cursor: pointer; }
.toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-track {
  display: block; width: 44px; height: 24px; border-radius: 12px;
  background: #CBD5E1; transition: background 0.2s;
}
.toggle-track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-track { background: var(--color-primary); }
.toggle-switch input:checked + .toggle-track::after { transform: translateX(20px); }
.toggle-switch input:focus-visible + .toggle-track { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.rental-toggle-field { flex-direction: row; align-items: center; gap: 8px; }

.toggle-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0; margin-bottom: 4px;
}
.toggle-row-label { font-weight: 500; font-size: 0.95rem; color: var(--color-fg); }

@media (max-width: 700px) {
  .rental-filters { align-items: stretch; width: auto; }
  .rental-field { flex: 1 1 100%; }
  .rental-field input, .rental-field select,
  .rental-field-location select, .rental-filter-num { width: 100%; min-width: 0; }
  .rental-search-btn, .rental-refine-btn { width: 100%; }
}

/* City facet chips */
.city-facets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.city-facet {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px; text-decoration: none;
  font-size: 0.88rem; font-weight: 600;
  color: var(--color-muted); background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.city-facet:hover { border-color: var(--color-primary); color: var(--color-primary); }
.city-facet.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.city-facet span {
  font-size: 0.78rem; background: rgba(15, 23, 42, 0.08); color: inherit;
  border-radius: 999px; padding: 1px 7px; font-weight: 700;
}
.city-facet.active span { background: rgba(255, 255, 255, 0.25); }

/* Home "Featured rentals" section header */
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 0.5rem; }
.section-head h2 { font-size: 1.6rem; }

/* ===================================================================== */
/*  Landing page (home)                                                  */
/*  All classes are `lp-`-prefixed and scoped so they never collide with */
/*  the global .hero / .card / .container components used elsewhere.      */
/*  Colours come from the existing brand tokens (:root).                 */
/* ===================================================================== */
.lp-wrap { width: min(1120px, 92%); margin: 0 auto; }
/* Homepage uses the shared app-wide page width (min(92%, --page-max)) so it
   lines up with /properties/, /tenant-checking/ and /tenancy-database/. Scoped
   to the home page via the body class; other .lp-wrap pages keep 1120px. */
@media (min-width: 821px) { .page-home .lp-wrap { width: min(92%, var(--page-max)); } }
/* White page ground on the home page so the curved purple hero sits on white
   rather than the light-grey app background showing at its rounded corners.
   Sections that intentionally use the soft-grey ground (.lp-panels, .lp-alt)
   set their own background, so they are unaffected. */
.page-home main { background: var(--color-surface); }

/* --- Hero (brand gradient) --- */
.lp-hero { color: #fff; }
.lp-hero .lp-wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 2.5rem; align-items: center; padding: 4.25rem 0; }
.lp-hero h1 { font-size: 2.6rem; line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 0.9rem; color: #fff; }
/* Keep "before you hand over the keys." on one line, but only on wide screens
   where the hero column has room; below that it wraps to avoid overflow. */
@media (min-width: 1220px) { .lp-h1-l2 { white-space: nowrap; } }
.lp-sub { font-size: 1.15rem; color: rgba(255,255,255,0.9); max-width: 44ch; margin: 0 0 1.5rem; }
.lp-cta-row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.lp-tagline { margin: 1rem 0 0; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em; color: rgba(255,255,255,0.85); }
.lp-seehow { color: #fff; font-weight: 700; text-decoration: none; font-size: 0.9rem; }
.lp-seehow:hover { text-decoration: underline; }
.lp-microtrust { margin: 1.25rem 0 0; font-size: 0.8rem; color: rgba(255,255,255,0.82); display: flex; align-items: center; gap: 0.5rem; }

/* Audience toggle */
.lp-toggle { display: inline-flex; background: rgba(255,255,255,0.16); border-radius: 24px; padding: 4px; margin-bottom: 1.25rem; }
.lp-seg { border: 0; background: transparent; font: inherit; font-size: 0.78rem; font-weight: 600; color: rgba(255,255,255,0.85); padding: 0.45rem 0.85rem; border-radius: 20px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.lp-seg.on { background: #fff; color: var(--color-primary); }
.lp-seg:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Hero sample-report visual */
.lp-report { background: #fff; border-radius: 14px; box-shadow: 0 22px 44px -22px rgba(6,16,46,0.55); overflow: hidden; color: var(--color-text); }
.lp-rhead { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--color-border); }
.lp-rhead b { font-size: 0.9rem; } .lp-rhead span { font-size: 0.75rem; color: var(--color-muted); }
.lp-srow { display: flex; align-items: center; gap: 0.7rem; padding: 0.75rem 1rem; border-top: 1px solid var(--color-border); position: relative; }
.lp-srow:first-of-type { border-top: 0; }
.lp-stripe { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.lp-nm { flex: 1; font-size: 0.85rem; } .lp-mt { color: var(--color-muted); font-size: 0.74rem; }
.lp-pill { font-size: 0.68rem; font-weight: 700; padding: 0.15rem 0.6rem; border-radius: 20px; }
.lp-pill.ok { color: var(--color-success); background: #e7f6ec; }
.lp-pill.warn { color: var(--color-caution); background: var(--color-caution-bg); }
.lp-pill.bad { color: var(--color-danger); background: #fceaee; }

/* --- Trust strip --- */
.lp-strip { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.lp-strip .lp-wrap { display: flex; gap: 1.5rem 2rem; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; padding: 1.75rem 0; }
.lp-item {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0.65rem; font-size: 0.9rem; font-weight: 600; color: var(--color-text);
  text-decoration: none; flex: 1 1 140px; min-width: 120px; transition: transform 0.3s ease;
}
a.lp-item:hover .label, a.lp-item:hover { color: var(--color-primary); }
.lp-item-tile {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  box-shadow: 0 10px 24px -12px rgba(30, 64, 175, 0.55);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.lp-item-tile svg { width: 25px; height: 25px; color: #fff; overflow: visible; }
/* Self-drawing white strokes, staggered left to right */
.lp-item-tile svg > * {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: lp-strip-draw 3.6s ease-in-out infinite;
}
.lp-item:nth-child(1) .lp-item-tile svg > * { animation-delay: 0s; }
.lp-item:nth-child(2) .lp-item-tile svg > * { animation-delay: 0.3s; }
.lp-item:nth-child(3) .lp-item-tile svg > * { animation-delay: 0.6s; }
.lp-item:nth-child(4) .lp-item-tile svg > * { animation-delay: 0.9s; }
.lp-item:nth-child(5) .lp-item-tile svg > * { animation-delay: 1.2s; }
@keyframes lp-strip-draw {
  0%   { stroke-dashoffset: 1; opacity: 0.2; }
  20%  { opacity: 1; }
  38%  { stroke-dashoffset: 0; }
  84%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 1; opacity: 0.2; }
}
/* Hover lift only for items that are still links; de-linked .lp-item spans
   stay static so they don't read as clickable. */
a.lp-item:hover { transform: translateY(-4px); }
a.lp-item:hover .lp-item-tile { transform: scale(1.06) rotate(-3deg); box-shadow: 0 18px 34px -12px rgba(124, 58, 237, 0.6); }

/* --- Section scaffolding --- */
.lp-section { padding: 4rem 0; }
.lp-section.lp-alt { background: var(--color-bg); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.lp-kicker { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; font-weight: 700; color: var(--color-accent); margin: 0 0 0.7rem; }
.lp-h2 { font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.02em; margin: 0; color: var(--color-text); max-width: 20ch; }
.lp-lede { font-size: 1rem; color: var(--color-muted); max-width: 58ch; margin: 0.6rem 0 0; }
.lp-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.25rem; flex-wrap: wrap; }
.lp-arrow { color: var(--color-primary); font-weight: 700; text-decoration: none; font-size: 0.9rem; white-space: nowrap; }
.lp-arrow:hover { text-decoration: underline; }

/* --- Home: API hero (advertises the Tenancy Check / Public Check APIs) --- */
.lp-api-hero {
  background: linear-gradient(120deg, #8b3be6, #3b2fae 55%, #142a86); color: #fff;
  border-radius: 20px; padding: 2.75rem; display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: 2.25rem; align-items: center;
  box-shadow: 0 26px 48px -28px rgba(124, 58, 237, 0.45);
}
.lp-api-kicker { color: #e9deff; }
.lp-api-hero h2 { font-size: 1.85rem; line-height: 1.15; letter-spacing: -0.02em; margin: 0.4rem 0 0.7rem; color: #fff; max-width: 26ch; }
.lp-api-lede { color: rgba(255, 255, 255, 0.88); max-width: 58ch; margin: 0 0 1.3rem; }
.lp-api-chips { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.lp-api-chip {
  display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px; padding: 0.5rem 0.9rem;
}
.lp-api-peek {
  background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px; padding: 1.2rem 1.35rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem; line-height: 1.7; color: #e5e9f5; overflow-x: auto;
}
.lp-api-peek-line { display: block; margin-bottom: 0.6rem; color: #cbd5e1; }
.lp-api-peek-line-2 { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.lp-api-method { color: #8be9c0; font-weight: 700; }
.lp-api-peek pre { margin: 0; }
.lp-api-k { color: #8be9c0; }
.lp-api-s { color: #c9b8ff; }
@media (max-width: 860px) {
  .lp-api-hero { grid-template-columns: 1fr; padding: 2rem; }
}

/* --- How it works --- */
/* Give this heading a little more room than the default 20ch cap so it settles
   onto two lines instead of three. */
#how-it-works .lp-h2 { max-width: 26ch; }
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1.75rem; }
.lp-step .lp-n { width: 34px; height: 34px; border-radius: 10px; background: var(--color-accent); color: #fff; display: grid; place-items: center; font-weight: 800; margin-bottom: 0.75rem; }
.lp-step h3 { font-size: 1rem; margin: 0 0 0.3rem; }
.lp-step p { font-size: 0.88rem; color: var(--color-muted); margin: 0; }

/* --- Card grids (checks + audiences) --- */
.lp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.75rem; }
.lp-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 1.15rem; box-shadow: 0 10px 26px -18px rgba(30,64,175,0.28); }
a.lp-card-link { text-decoration: none; color: inherit; display: block; transition: transform 0.15s ease, box-shadow 0.15s ease; }
a.lp-card-link:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -18px rgba(30,64,175,0.4); }
.lp-ic { width: 38px; height: 38px; border-radius: 10px; background: #EEF2FF; color: var(--color-primary); display: grid; place-items: center; margin-bottom: 0.8rem; }
/* Larger icon tile variant (~50% up), used on the applications feature cards. */
.lp-ic.lp-ic--lg { width: 56px; height: 56px; border-radius: 14px; }
.lp-card h3 { font-size: 1rem; margin: 0; display: flex; align-items: center; gap: 0.5rem; }
.lp-card p { font-size: 0.86rem; color: var(--color-muted); margin: 0.4rem 0 0; }
.lp-badge { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.45rem; border-radius: 6px; background: #EEF2FF; color: var(--color-muted); }
.lp-badge.inc { color: var(--color-primary); }

/* --- Trust & support --- */
.lp-reassure { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.75rem; }
.lp-reassure > div { display: flex; gap: 0.9rem; align-items: center; }
.lp-reassure .lp-ic { margin-bottom: 0; flex: 0 0 auto;
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(135deg, #F1EEFF, #E9F0FF); }
.lp-reassure .lp-ic svg { width: 30px; height: 30px; }
/* Image icon that already bakes in its own tile + shadow: drop the CSS tile. */
.lp-reassure .lp-ic--img { background: none; border-radius: 0; width: auto; height: auto; }
.lp-reassure .lp-ic--img img { display: block; width: 62px; height: 62px; object-fit: contain; }
.lp-reassure b { display: block; font-size: 0.95rem; } .lp-reassure p { font-size: 0.84rem; color: var(--color-muted); margin: 0.2rem 0 0; }

/* --- Final CTA (brand gradient) --- */
.lp-final { color: #fff; text-align: center; }
.lp-final .lp-wrap { padding: 4.5rem 0; }
.lp-final h2 { font-size: 1.95rem; letter-spacing: -0.02em; margin: 0 auto; max-width: 24ch; color: #fff; }
.lp-final .lp-cta-row { justify-content: center; margin-top: 1.4rem; }

/* --- Responsive --- */
@media (max-width: 860px) {
  .lp-hero .lp-wrap { grid-template-columns: 1fr; }
  .lp-hero h1 { font-size: 2.1rem; }
  .lp-steps, .lp-cards, .lp-reassure { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .lp-steps, .lp-cards, .lp-reassure { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  a.lp-card-link { transition: none; }
  a.lp-card-link:hover { transform: none; }
  .lp-item, .lp-item-tile { transition: none; }
  .lp-item:hover { transform: none; }
  .lp-item:hover .lp-item-tile { transform: none; }
  .lp-item-tile svg > * { animation: none; stroke-dashoffset: 0; opacity: 1; }
}

/* ---- Landing page: section treatments (shaped sections) ---- */

/* 05 · Angled-bottom banner (hero) + curved-top (final CTA) — reuses the
   app's gradient-banner corner motif. */
.lp-hero { position: relative; overflow: hidden;
  /* 45-degree angled bottom corners with softly rounded points. Painted on a
     background layer (::before) so the report cluster can still hang below the
     hero edge on desktop without being clipped.
       --lp-c  : chamfer leg length along each edge (responsive)
       --lp-t  : how far the fillet backs off from each sharp point (tangent)
       --lp-td : that backoff projected onto a 45-degree diagonal (t / sqrt2)
       --lp-fr : fillet radius; for the 135-degree corners here, t * tan(67.5deg) */
  --lp-c: clamp(28px, 5vw, 56px);
  --lp-t: 12px;
  --lp-td: calc(var(--lp-t) * 0.7071);
  --lp-fr: calc(var(--lp-t) * 2.4142);
  /* Fallback: sharp chamfer for browsers without clip-path: shape(). */
  --lp-clip: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--lp-c)),
    calc(100% - var(--lp-c)) 100%,
    var(--lp-c) 100%,
    0 calc(100% - var(--lp-c))
  ); }
/* Rounded points where shape() is available (arc segments round each corner). */
@supports (clip-path: shape(from 0 0, line to 1px 1px, close)) {
  .lp-hero {
    --lp-clip: shape(
      from 0 0,
      line to 100% 0,
      line to 100% calc(100% - var(--lp-c) - var(--lp-t)),
      arc to calc(100% - var(--lp-td)) calc(100% - var(--lp-c) + var(--lp-td)) of var(--lp-fr) var(--lp-fr) cw,
      line to calc(100% - var(--lp-c) + var(--lp-td)) calc(100% - var(--lp-td)),
      arc to calc(100% - var(--lp-c) - var(--lp-t)) 100% of var(--lp-fr) var(--lp-fr) cw,
      line to calc(var(--lp-c) + var(--lp-t)) 100%,
      arc to calc(var(--lp-c) - var(--lp-td)) calc(100% - var(--lp-td)) of var(--lp-fr) var(--lp-fr) cw,
      line to var(--lp-td) calc(100% - var(--lp-c) + var(--lp-td)),
      arc to 0 calc(100% - var(--lp-c) - var(--lp-t)) of var(--lp-fr) var(--lp-fr) cw,
      close
    );
  }
}
.lp-hero::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  clip-path: var(--lp-clip); }
.lp-hero .lp-wrap { position: relative; z-index: 1; }
.lp-final { position: relative; overflow: hidden;
  /* 45-degree angled TOP corners with softly rounded points — mirror of the
     hero's bottom edge. Same geometry vars; painted on a ::before layer so the
     angled shape shows through and the line-art clips to it. */
  --lp-c: clamp(28px, 5vw, 56px);
  --lp-t: 12px;
  --lp-td: calc(var(--lp-t) * 0.7071);
  --lp-fr: calc(var(--lp-t) * 2.4142);
  /* Fallback: sharp chamfer for browsers without clip-path: shape(). */
  --lp-clip: polygon(
    0 var(--lp-c),
    var(--lp-c) 0,
    calc(100% - var(--lp-c)) 0,
    100% var(--lp-c),
    100% 100%,
    0 100%
  ); }
/* Rounded points where shape() is available (arc segments round each corner). */
@supports (clip-path: shape(from 0 0, line to 1px 1px, close)) {
  .lp-final {
    --lp-clip: shape(
      from 0 100%,
      line to 0 calc(var(--lp-c) + var(--lp-t)),
      arc to var(--lp-td) calc(var(--lp-c) - var(--lp-td)) of var(--lp-fr) var(--lp-fr) cw,
      line to calc(var(--lp-c) - var(--lp-td)) var(--lp-td),
      arc to calc(var(--lp-c) + var(--lp-t)) 0 of var(--lp-fr) var(--lp-fr) cw,
      line to calc(100% - var(--lp-c) - var(--lp-t)) 0,
      arc to calc(100% - var(--lp-c) + var(--lp-td)) var(--lp-td) of var(--lp-fr) var(--lp-fr) cw,
      line to calc(100% - var(--lp-td)) calc(var(--lp-c) - var(--lp-td)),
      arc to 100% calc(var(--lp-c) + var(--lp-t)) of var(--lp-fr) var(--lp-fr) cw,
      line to 100% 100%,
      line to 0 100%,
      close
    );
  }
}
.lp-final::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
  clip-path: var(--lp-clip); }
.lp-final .lp-wrap { position: relative; z-index: 1; }

/* 08 · Drifting line-art — faint house / shield / key outlines behind the
   gradient bands (the app's decorative layer, done statically). */
.lp-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lp-deco svg { position: absolute; stroke: #fff; fill: none; }
.lp-deco .d1 { top: -22px; right: 7%; width: 140px; height: 140px; opacity: 0.09; transform: rotate(-8deg); }
.lp-deco .d2 { bottom: -34px; left: 4%; width: 122px; height: 122px; opacity: 0.07; transform: rotate(7deg); }
.lp-deco .d3 { top: 42%; right: 31%; width: 88px; height: 88px; opacity: 0.06; }

/* 07 · Step connector — a line links the numbered nodes across the sequence
   (three-column desktop only; hidden once the steps stack). */
.lp-steps { position: relative; }
.lp-step { position: relative; }
.lp-step .lp-n { position: relative; z-index: 1; }
.lp-step:not(:last-child)::after {
  content: ""; position: absolute; top: 16px; left: 17px;
  width: calc(100% + 1.5rem); height: 2px; background: var(--color-border); z-index: 0;
}

/* 04 · Floating panels — sections sit as rounded cards on a soft grey ground;
   inner feature cards become borderless tiles so they read on the panel. */
.lp-section.lp-panels { background: var(--color-bg); }
.lp-panels > .lp-wrap {
  background: transparent; border: 0; border-radius: 0;
  padding: 0; box-shadow: none;
}
.lp-panels .lp-card { background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 10px 26px -18px rgba(30, 64, 175, 0.28); }
.lp-panels .lp-ic { background: #EEF2FF; }
.lp-panels a.lp-card-link:hover { box-shadow: 0 12px 24px -14px rgba(30, 64, 175, 0.32); }

/* Dark variant — same gradient + glow treatment as the .tc-promo-band banner.
   Extra bottom padding so the cards don't crowd the foot of the gradient. */
.lp-section.lp-panels--dark { position: relative; overflow: hidden; background: linear-gradient(120deg, #211a4d, #0d1330); padding-bottom: 6rem; }
.lp-panels--dark::before {
  content: ""; position: absolute; top: -30%; left: 6%; width: 30%; height: 160%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.5), transparent 60%); pointer-events: none;
}
.lp-panels--dark::after {
  content: ""; position: absolute; bottom: -40%; right: 6%; width: 30%; height: 160%;
  background: radial-gradient(circle, rgba(59, 86, 208, 0.42), transparent 62%); pointer-events: none;
}
.lp-panels--dark > .lp-wrap { position: relative; z-index: 1; }
.lp-panels--dark .lp-kicker { color: #c9b8ff; }
.lp-panels--dark .lp-h2 { color: #fff; }

@media (max-width: 860px) {
  .lp-step:not(:last-child)::after { display: none; }
}
@media (max-width: 560px) {
  .lp-panels > .lp-wrap { padding: 0; }
}

/* 06 · Straddling report card — on desktop the hero's sample report hangs
   below the curved hero edge, overlapping the trust strip for depth. Clips
   the line-art to the hero's rounded shape (hero can no longer clip it), and
   gives the strip top room so nothing collides. Mobile keeps normal flow. */
.lp-deco { clip-path: var(--lp-clip); }
@media (min-width: 861px) {
  .lp-hero { overflow: visible; }
  .lp-hero .lp-wrap { padding-bottom: 2rem; }
  .lp-cluster { align-self: end; margin-bottom: -3.5rem; position: relative; z-index: 3; }
  .lp-strip .lp-wrap { padding-top: 3.75rem; }
}

/* Hero card cluster — a Tenancy Check (risk score) card staggered in front of
   the Public Check card; together they hang over the trust strip on desktop
   and stack cleanly on mobile. */
.lp-cluster { position: relative; }
.lp-rfoot { padding: 9px 16px; font-size: 0.72rem; color: var(--color-muted);
  border-top: 1px solid var(--color-border); }
.lp-score { background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 14px; padding: 15px 16px; box-shadow: 0 26px 46px -22px rgba(6, 16, 46, 0.55); }
.lp-score-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 13px; }
.lp-score-head b { font-size: 0.9rem; color: var(--color-text); }
.lp-xtag { font-size: 0.56rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-accent); background: #F1EBFF; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
/* The score bars themselves reuse the report's own .score-bars / .scorebar
   components (defined above) so the hero shows a true replica. Compact them
   slightly for the smaller hero card. */
.lp-score .score-bars { gap: 14px; }
.lp-score .scorebar-top { font-size: 0.78rem; margin-bottom: 6px; }
.lp-score .scorebar-val { font-size: 0.95rem; }
.lp-score .scorebar-band { font-size: 0.74rem; }

/* Desktop: stagger the two cards into a deck. Mobile: plain stack. */
@media (min-width: 861px) {
  .lp-card-pub { width: 84%; margin-left: auto; position: relative; z-index: 1; }
  .lp-card-score { width: 82%; margin-top: -2.25rem; position: relative; z-index: 2; }
}
@media (max-width: 860px) {
  .lp-card-score { margin-top: 1rem; }
}

/* ===== Tribunal order: Reason For Judgement multi-select ===== */
.tj-reasons { margin: 4px 0 26px; }
.tj-reasons-label { display: block; font-size: 12px; font-weight: 700; color: var(--color-accent); }
.tj-req { color: var(--color-danger); }
.tj-reasons-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 16px;
}
.tj-reason {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px; border: 1px solid var(--color-border); border-radius: 9px;
  background: #fff; cursor: pointer; font-size: 0.92rem; color: var(--color-text);
  transition: border-color .15s, background .15s;
}
.tj-reason:hover { border-color: var(--color-accent); }
.tj-reason input { width: 17px; height: 17px; accent-color: var(--color-accent); cursor: pointer; flex: none; }
.tj-reason:has(input:checked) { border-color: var(--color-accent); background: #f5f2fe; }
.tj-reasons-error .tj-reasons-grid { outline: 2px solid var(--color-danger); outline-offset: 4px; border-radius: 10px; }
.tj-other { max-width: 420px; }

/* ===== Admin usage-stats dashboard ===== */
.stats-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 6px 0 18px; }
.stats-range-label { color: var(--color-muted); font-size: 0.9rem; font-weight: 600; }
.stats-range { display: inline-flex; gap: 4px; background: var(--color-field-bg); border: 1px solid var(--color-border); border-radius: 10px; padding: 4px; }
.stats-range-opt { padding: 5px 12px; border-radius: 7px; text-decoration: none; font-size: 0.85rem; font-weight: 600; color: var(--color-muted); }
.stats-range-opt:hover { color: var(--color-text); }
.stats-range-opt.is-active { background: #fff; color: var(--color-primary); box-shadow: 0 1px 3px rgba(17,24,39,0.08); }

.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 24px; }
.stat-tiles-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); max-width: 520px; }
.stat-tile { background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 15px 17px; box-shadow: 0 1px 2px rgba(17,24,39,0.04); display: flex; flex-direction: column; gap: 3px; }
.stat-k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--color-muted); }
.stat-v { font-size: 1.7rem; font-weight: 800; color: var(--color-text); line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: 0.78rem; color: var(--color-muted); }

.chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 720px) { .chart-grid { grid-template-columns: 1fr; } }
.chart-card { margin: 0; background: #fff; border: 1px solid var(--color-border); border-radius: 14px; padding: 16px 18px; box-shadow: 0 2px 10px rgba(17,24,39,0.05); }
.chart-title { font-size: 0.98rem; font-weight: 700; color: var(--color-text); margin-bottom: 10px; }
/* Chart header with an inline split toggle (e.g. Checks run: member/kind). */
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.chart-head .chart-title { margin-bottom: 0; }
.chart-toggle { display: inline-flex; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.chart-toggle-btn { border: none; background: var(--color-surface); color: var(--color-muted); font: inherit; font-size: 12px; font-weight: 600; padding: 5px 11px; cursor: pointer; }
.chart-toggle-btn + .chart-toggle-btn { border-left: 1px solid var(--color-border); }
.chart-toggle-btn:hover { color: var(--color-primary); }
.chart-toggle-btn.is-active { background: var(--color-primary); color: #fff; }
.chart { position: relative; min-height: 240px; }
.chart-plot { position: relative; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; }
.chart-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--color-muted); font-weight: 600; }
.chart-legend-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }
.chart-legend-total { color: var(--color-text); font-weight: 800; font-variant-numeric: tabular-nums; }
.chart-legend-grand { color: var(--color-text); font-weight: 700; padding-left: 12px; border-left: 1px solid var(--color-border); }
.chart-tooltip .tt-total { display: inline-block; margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,.25); }
.chart-svg-el { display: block; overflow: visible; }
.chart-gridline { stroke: var(--color-border); stroke-width: 1; shape-rendering: crispEdges; }
.chart-axis { fill: var(--color-muted); font-size: 11px; font-family: inherit; }
.chart-hit { cursor: pointer; }
.chart-hit:hover { fill: rgba(30,64,175,0.05); }
.chart-tooltip { position: absolute; transform: translate(-50%, calc(-100% - 12px)); background: #10152a; color: #eef1f8; font-size: 0.8rem; line-height: 1.5; padding: 8px 11px; border-radius: 8px; pointer-events: none; white-space: nowrap; z-index: 5; box-shadow: 0 6px 18px rgba(0,0,0,0.28); }
.chart-tooltip .tt-head { font-weight: 700; margin-bottom: 3px; }
.chart-tooltip .tt-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; }

.stats-actions { display: inline-flex; gap: 8px; }

/* ===== Billing: credits ===== */
.credit-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.credit-balance { text-align: right; background: #f5f2fe; border: 1px solid #e0d8fb; border-radius: 10px; padding: 8px 14px; }
.credit-balance-k { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--color-accent); }
.credit-balance-v { display: block; font-size: 1.5rem; font-weight: 800; color: var(--color-accent); line-height: 1.1; font-variant-numeric: tabular-nums; }
.credit-note { margin-top: 10px; font-size: 0.82rem; color: var(--color-muted); }

/* Apply-credits panel on the invoice / statement pages. */
.credit-apply { max-width: 820px; margin: 0 auto 18px; background: var(--color-surface, #fff);
  border: 1px solid #e0d8fb; border-radius: 12px; padding: 16px 18px; }
.credit-apply h2 { margin: 0 0 10px; font-size: 1.05rem; color: var(--color-accent); }
.credit-apply-hint { margin: 12px 0 8px; font-size: 0.85rem; color: var(--color-muted); }
.credit-apply-admin { margin: 0 0 10px; font-size: 0.82rem; font-weight: 600; color: var(--color-accent);
  background: #f5f2fe; border: 1px solid #e0d8fb; border-radius: 8px; padding: 6px 10px; }
.credit-apply-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.credit-apply-list li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid #eee; border-radius: 8px; background: #faf9ff; }
.credit-apply-available li { background: #f5f2fe; }
.credit-apply-list .ca-desc { flex: 1 1 auto; font-size: 0.88rem; }
.credit-apply-list .ca-amt { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-accent); }
.credit-apply-list form { margin: 0; display: flex; gap: 8px; align-items: center; }
.credit-apply-list select { padding: 5px 8px; border: 1px solid #ccc; border-radius: 6px; font-size: 0.82rem; }
.inv-credit { color: var(--color-accent); }
.inv-totals-box .inv-sub { opacity: 0.75; }

/* Inline billing-email edit on the Billing page */
.bill-hint { color: var(--color-muted); font-size: .85em; }
.bill-email-edit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bill-email-edit[hidden] { display: none; }
.bill-email-edit input {
  width: auto; flex: 1 1 220px; min-width: 0;
  border: 1.5px solid var(--color-border-input); border-radius: 8px; padding: 8px 10px; font: inherit;
}
.bill-email-edit input:focus {
  outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.16);
}
.bill-email-edit .btn-sm { padding: 7px 13px; font-size: 13px; flex: none; }

/* ---------------------------------------------------------------------------
   Feature carousel (pages/_feature_carousel.html)
   Click a step card to cross-fade its paired visual. Media pane is
   desktop-only; enhanced by static/js/feature-carousel.js.
--------------------------------------------------------------------------- */
.feature-carousel { display: grid; grid-template-columns: 1fr; gap: 26px; }
@media (min-width: 1024px) {
  .feature-carousel { grid-template-columns: 5fr 7fr; align-items: center; }
}
.fc-cards { display: flex; flex-direction: column; gap: 14px; }
.fc-card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start;
  text-align: left; font: inherit; color: var(--color-text); cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px;
  padding: 15px 18px 15px 20px; box-shadow: 0 8px 30px rgba(15, 23, 42, 0.10);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
/* Accent rail down the left edge, filled when the step is selected. */
.fc-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: transparent; transition: background 0.2s ease;
}
.fc-card:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(15, 23, 42, 0.08); }
.fc-card:focus-visible { outline: 3px solid var(--color-primary-light); outline-offset: 2px; }
.fc-card[aria-selected="true"] { border-color: var(--color-primary); }
.fc-card[aria-selected="true"]::before { background: var(--color-primary); }
.fc-tile {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 11%, transparent);
  transition: background 0.2s ease, color 0.2s ease;
}
.fc-tile svg { width: 21px; height: 21px; }
.fc-card[aria-selected="true"] .fc-tile { background: var(--color-primary); color: #fff; }
.fc-eyebrow {
  display: block; font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
  font-weight: 700; color: var(--color-muted); margin-bottom: 2px;
  transition: color 0.2s ease;
}
.fc-card[aria-selected="true"] .fc-eyebrow { color: var(--color-primary); }
.fc-card .fc-step {
  display: block; color: var(--color-primary); font-weight: 700; font-size: 15px;
}
.fc-desc { display: block; margin: 4px 0 0; font-size: 13.5px; color: var(--color-muted); line-height: 1.5; }
.fc-media { display: none; position: relative; min-height: 340px; }
@media (min-width: 1024px) { .fc-media { display: block; } }
.fc-image {
  position: absolute; inset: 0; display: grid; place-items: center;
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease;
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-primary) 9%, var(--color-field-bg)), var(--color-field-bg));
  border: 1px solid var(--color-border); border-radius: 20px; padding: 28px;
}
.fc-image[data-active="true"] { opacity: 1; visibility: visible; }
.fc-image > svg { width: min(78%, 360px); height: auto; color: var(--color-primary); }
@media (prefers-reduced-motion: reduce) {
  .fc-card, .fc-image { transition: none; }
}

/* On-brand UI mockups shown inside each carousel panel (crafted replicas of
   the real screens, styled like the landing hero's Public Check / Tenancy
   Check cards). Prefixed .fcm-* so they don't collide with app components. */
.fc-mock {
  width: min(100%, 420px); text-align: left; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 16px; box-shadow: 0 14px 36px rgba(15, 23, 42, 0.16);
  padding: 16px 18px; font-size: 13px; line-height: 1.4;
}
.fc-mock .fcm-head { font-weight: 700; margin-bottom: 10px; }
.fc-mock .fcm-head span { color: var(--color-muted); font-weight: 600; font-size: 12px; }
.fcm-pill { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.fcm-pill.new { background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); }
.fcm-pill.rev { background: var(--color-caution-bg); color: var(--color-caution); }
.fcm-pill.sl  { background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent); }
.fcm-pill.ok  { background: color-mix(in srgb, var(--color-success) 16%, transparent); color: var(--color-success); }

/* 1 — Listing */
.fcm-photo {
  position: relative; height: 104px; border-radius: 11px; margin-bottom: 12px;
  display: grid; place-items: center; color: var(--color-primary);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 20%, var(--color-field-bg)), var(--color-field-bg));
}
.fcm-photo svg { width: 40px; height: 40px; }
.fcm-status {
  position: absolute; top: 8px; left: 8px; background: var(--color-surface);
  color: var(--color-success); font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 3px 9px; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
}
.fcm-price { font-size: 20px; font-weight: 800; }
.fcm-price span { font-size: 12px; color: var(--color-muted); font-weight: 600; }
.fcm-title { font-weight: 700; margin-top: 2px; }
.fcm-loc { color: var(--color-muted); font-size: 12px; margin-bottom: 8px; }
.fcm-specs { display: flex; gap: 6px; }
.fcm-specs span { background: var(--color-field-bg); border: 1px solid var(--color-border); border-radius: 7px; padding: 3px 8px; font-size: 11px; color: var(--color-muted); }

/* 2 — Applications inbox */
.fcm-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--color-border); }
.fcm-av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); }
.fcm-nm { flex: 1; font-weight: 600; font-size: 12.5px; }

/* 3 — Tenancy check score */
.fcm-x { float: right; background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent); font-size: 10px; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.fcm-bar-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--color-muted); margin: 4px 0 6px; }
.fcm-bar-top b { color: #f0b323; font-size: 14px; }
.fcm-bar-top small { color: var(--color-muted); font-weight: 400; }
.fcm-track { position: relative; height: 8px; border-radius: 999px; margin-bottom: 6px; background: linear-gradient(90deg, var(--color-success), #f0b323, var(--color-danger)); }
.fcm-marker { position: absolute; top: -3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid #f0b323; transform: translateX(-50%); }
.fcm-band { font-size: 11px; font-weight: 700; color: #f0b323; margin-bottom: 10px; }
.fcm-srow { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; border-top: 1px solid var(--color-border); }

/* 4 — Tenancy agreement */
.fcm-doc-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--color-border); padding-bottom: 10px; margin-bottom: 8px; }
.fcm-doc-head b { font-size: 13px; }
.fcm-doc-head span { font-size: 10px; font-weight: 700; color: var(--color-success); background: color-mix(in srgb, var(--color-success) 14%, transparent); border-radius: 999px; padding: 2px 8px; }
.fcm-kv { display: flex; justify-content: space-between; font-size: 12.5px; padding: 5px 0; }
.fcm-kv span:first-child { color: var(--color-muted); }
.fcm-kv span:last-child { font-weight: 600; }
.fcm-sign { margin-top: 8px; display: flex; align-items: center; gap: 8px; color: var(--color-success); font-weight: 700; font-size: 12px; border-top: 1px dashed var(--color-border); padding-top: 10px; }
.fcm-sign svg { width: 34px; height: 16px; }

/* 5 — Shared database record */
.fcm-stars { color: #f0b323; font-size: 20px; letter-spacing: 2px; }
.fcm-stars span { font-size: 13px; color: var(--color-text); font-weight: 700; margin-left: 8px; letter-spacing: 0; }
.fcm-chips { display: flex; gap: 6px; margin: 10px 0; flex-wrap: wrap; }
.fcm-chip { font-size: 11px; font-weight: 600; border-radius: 7px; padding: 3px 8px; background: var(--color-field-bg); border: 1px solid var(--color-border); color: var(--color-muted); }
.fcm-chip.ok { background: color-mix(in srgb, var(--color-success) 16%, transparent); color: var(--color-success); border-color: transparent; }

/* --------------------------------------------------------------------------
 * Listing tiers (Standard / Premium)
 *
 * Premium listings rank above Standard in search and get a bigger, highlighted
 * card plus a slot in the featured carousel. Amber is used deliberately as the
 * "featured" signal, distinct from the blue/violet brand palette.
 * ----------------------------------------------------------------------- */
.tier-badge {
  display: inline-flex; align-items: center; padding: 3px 10px;
  border-radius: 999px; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.tier-badge-premium {
  background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
  color: #fff; border: none;
}
.listing-tier { position: absolute; top: 10px; right: 10px; z-index: 2; }

/* Premium card wrapper: gradient frame with rotating silver sweep. The wrapper
 * provides the visible gradient border; the card sits inside it. */
.premium-card-wrap {
  position: relative;
  border-radius: 14px;
  padding: 2.5px;
  background: linear-gradient(135deg, var(--color-accent), #4F46E5, var(--color-primary));
  overflow: hidden;
  grid-column: span 2;
}
.premium-card-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 140deg,
    rgba(255,255,255,0.7) 170deg,
    rgba(255,255,255,0.9) 180deg,
    rgba(255,255,255,0.7) 190deg,
    transparent 220deg,
    transparent 360deg
  );
  animation: premium-sweep 4s linear infinite;
  z-index: 1;
  pointer-events: none;
}
@keyframes premium-sweep {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .premium-card-wrap::before { animation: none; opacity: 0; }
}

/* The card itself resets the outer glow styling and sits above the sweep. */
.listing-card-premium {
  position: relative;
  z-index: 2;
  border-color: transparent;
  background: var(--color-surface);
  box-shadow: none;
  border-radius: 11px;
}
.listing-card-premium:hover { transform: none; box-shadow: none; }
.listing-card-premium .listing-thumb { height: 240px; }
@media (max-width: 520px) {
  .premium-card-wrap { grid-column: span 1; }
  .listing-card-premium .listing-thumb { height: 190px; }
}

/* Tier picker on the listing form */
.tier-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 700px) { .tier-picker { grid-template-columns: 1fr; } }
.tier-option { display: block; cursor: pointer; }
.tier-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.tier-card {
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  padding: 16px; border-radius: 12px; background: var(--color-surface);
  border: 2px solid var(--color-border);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.tier-option input:checked + .tier-card {
  border-color: var(--color-primary);
  box-shadow: 0 6px 18px rgba(30, 64, 175, 0.14);
}
.tier-option-premium input:checked + .tier-card {
  border-color: var(--color-accent); box-shadow: 0 6px 18px rgba(124, 58, 237, 0.18);
}
.tier-option input:focus-visible + .tier-card { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tier-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tier-name { font-size: 1.05rem; font-weight: 800; }
.tier-price { font-size: 1.05rem; font-weight: 800; color: var(--color-primary); }
.tier-blurb { color: var(--color-muted); font-size: 0.9rem; }
.tier-features { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 5px; }
.tier-features li { position: relative; padding-left: 20px; font-size: 0.88rem; }
.tier-features li::before {
  content: "✓"; position: absolute; left: 0; color: var(--color-success); font-weight: 800;
}

/* Run / views line on the member's own listing cards */
.listing-run { margin: 0; font-size: 0.82rem; color: var(--color-muted); }
.listing-views::before { content: "·"; margin: 0 6px; }
.listing-relist-form { margin: 0; }
.listing-nudge-btn {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--color-primary); text-align: left;
}

/* Advertising panel on the member's listing detail page */
.advert-panel .advert-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 10px 0 14px;
}
@media (max-width: 700px) { .advert-panel .advert-stats { grid-template-columns: repeat(2, 1fr); } }
.advert-stat { display: flex; flex-direction: column; gap: 2px; }
.advert-stat-label { font-size: 0.78rem; color: var(--color-muted); font-weight: 600; }
.advert-stat-value { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Featured carousel above the public search results */
.tm-carousel {
  position: relative; margin: 1.5rem 0; border-radius: 14px; overflow: hidden;
  background: var(--color-surface); border: 1px solid var(--color-caution-border);
  box-shadow: 0 8px 24px rgba(180, 83, 9, 0.10);
}
.tm-carousel-track { display: block; }
.tm-slide { display: none; grid-template-columns: 1.35fr 1fr; gap: 0; }
.tm-slide.is-active { display: grid; }
.tm-slide-photos { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; min-height: 300px; }
.tm-slide-photo { display: block; overflow: hidden; background: var(--color-field-bg); }
.tm-slide-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The lead photo fills the left half; the other two stack beside it. */
.tm-slide-photo-lead { grid-row: span 2; }
.tm-slide-photo-lead:only-child { grid-column: span 2; }
.tm-slide-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.tm-slide-title { margin: 0; font-size: 1.2rem; }
.tm-slide-title a { color: var(--color-text); text-decoration: none; }
.tm-slide-title a:hover { color: var(--color-accent); }
.tm-slide-loc { margin: 0; color: var(--color-muted); }
.tm-slide-price { margin: 0; font-size: 1.4rem; font-weight: 800; color: var(--color-primary); }
.tm-slide-price span { font-size: 0.85rem; font-weight: 600; color: var(--color-muted); }
.tm-slide-cta { margin-top: auto; }
.tm-carousel-dots { position: absolute; right: 16px; bottom: 14px; display: flex; gap: 7px; }
.tm-dot {
  width: 10px; height: 10px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--color-border-input); background: var(--color-surface);
}
.tm-dot.is-active { background: var(--color-caution); border-color: var(--color-caution); }
/* Prev/next arrows, centred over the photo half. */
.tm-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; line-height: 1; padding: 0;
  border: 1px solid var(--color-border-input);
  background: var(--color-surface); color: var(--color-text);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); opacity: 0.9;
}
.tm-carousel-arrow:hover { opacity: 1; border-color: var(--color-caution); }
.tm-carousel-prev { left: 12px; }
.tm-carousel-next { right: 12px; }
/* Pause/play button + dots sit together bottom-right. */
.tm-carousel-controls {
  position: absolute; right: 16px; bottom: 14px; z-index: 2;
  display: flex; align-items: center; gap: 10px;
}
.tm-carousel-controls .tm-carousel-dots { position: static; }
.tm-carousel-play {
  width: 26px; height: 26px; border-radius: 50%; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border-input); background: var(--color-surface);
}
/* Pause glyph (two bars) by default; a right-pointing triangle when paused. */
.tm-play-icon {
  width: 8px; height: 9px; box-sizing: border-box;
  border-left: 3px solid var(--color-text); border-right: 3px solid var(--color-text);
}
.tm-carousel-play.is-paused .tm-play-icon {
  width: 0; height: 0; border: none;
  border-left: 9px solid var(--color-text);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}
@media (max-width: 800px) {
  .tm-slide.is-active { grid-template-columns: 1fr; }
  .tm-slide-photos { min-height: 200px; grid-template-rows: 1fr; }
  /* Only the lead photo is worth the space on a narrow screen. */
  .tm-slide-photo:not(.tm-slide-photo-lead) { display: none; }
  .tm-slide-photo-lead { grid-column: span 2; grid-row: span 1; }
  .tm-carousel-controls { position: static; padding: 0 24px 16px; justify-content: flex-end; }
}

/* ---------------------------------------------------------------------------
   Feature journey (pages/_feature_journey.html) — "How it works"
   Transit-map serpentine (desktop) + vertical list (mobile); each step opens a
   lightbox with its mockup. Reuses the .fc-mock / .fcm-* card styles above.
   Enhanced by static/js/feature-journey.js.
--------------------------------------------------------------------------- */
.fj-eyebrow { display: block; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--color-primary); }
.fj-title { display: block; font-weight: 750; font-size: 16px; color: var(--color-text); margin: 2px 0 4px; }
.fj-desc { display: block; margin: 0; font-size: 13px; color: var(--color-muted); line-height: 1.45; }

/* --- Desktop serpentine (shown >= 960px) --- */
.fj-serp { display: none; }
.fj-list { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 960px) {
  .fj-serp {
    display: block; position: relative; width: 100%; max-width: 1320px;
    aspect-ratio: 1000 / 1200; margin: 0 auto; container-type: inline-size;
  }
  /* Keep the step nodes a sensible size on the wider map (they scale with
     container width via cqw, which would otherwise grow them too large). */
  .fj-serp .fj-node { width: 9.2cqw; height: 9.2cqw; }
  .fj-serp .fj-node > svg { width: 3.6cqw; height: 3.6cqw; }
  .fj-list { display: none; }
  /* Larger, more legible copy on the desktop serpentine. */
  .fj-serp .fj-eyebrow { font-size: 12px; }
  .fj-serp .fj-title { font-size: 19px; margin: 3px 0 6px; }
  .fj-serp .fj-desc { font-size: 14.5px; }
}
.fj-track { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Animated flow: evenly spaced dots march along each connector toward the next
   step (all four segments are drawn top-to-bottom, i.e. downstream, so a single
   negative dashoffset animation moves every dot in the flow direction). */
.fj-flow path {
  stroke: rgba(255, 255, 255, 0.9); stroke-width: 4.5;
  stroke-dasharray: 0.1 30; stroke-dashoffset: 0;
  animation: fj-flow 1s linear infinite;
}
@keyframes fj-flow { to { stroke-dashoffset: -30; } }
/* Static chevrons are the reduced-motion fallback; normally the moving arrows
   (SVG animateMotion) convey direction instead. */
.fj-chevrons-static { display: none; }
@media (prefers-reduced-motion: reduce) {
  .fj-flow, .fj-arrows { display: none; }
  .fj-chevrons-static { display: block; }
}
.fj-node {
  position: absolute; width: 11cqw; height: 11cqw; min-width: 92px; min-height: 92px;
  transform: translate(-50%, -50%);
  border-radius: 32%; background: var(--color-surface); border: 4px solid var(--color-primary);
  display: grid; place-items: center; padding: 0; cursor: pointer; color: var(--color-primary);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.16);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.fj-node:hover { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 16px 34px rgba(15, 23, 42, 0.22); }
.fj-node:focus-visible { outline: 3px solid var(--color-primary-light); outline-offset: 3px; }
.fj-node > svg { width: 4.2cqw; height: 4.2cqw; min-width: 34px; min-height: 34px; }
.fj-node.fj-ac { border-color: var(--color-accent); color: var(--color-accent); }
.fj-view {
  position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%);
  background: var(--color-primary); color: #fff; font-size: 9px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 2px 8px;
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.25); white-space: nowrap;
}
.fj-node.fj-ac .fj-view { background: var(--color-accent); }
.fj-txt { position: absolute; width: 40%; }
.fj-txt.fj-r { text-align: right; }
.fj-txt.fj-ac .fj-eyebrow { color: var(--color-accent); }

/* --- Mobile list --- */
.fj-row {
  display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; text-align: left;
  font: inherit; cursor: pointer; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 14px; padding: 15px 18px; box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.fj-row:hover { transform: translateY(-1px); border-color: var(--color-primary); }
.fj-row:focus-visible { outline: 3px solid var(--color-primary-light); outline-offset: 2px; }
.fj-tile {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 11%, transparent);
}
.fj-tile svg { width: 22px; height: 22px; }
.fj-row.fj-ac .fj-tile { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 11%, transparent); }
.fj-row.fj-ac .fj-eyebrow { color: var(--color-accent); }
.fj-row-body { display: block; }

/* --- Lightbox --- */
.fj-lb {
  position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center;
  padding: 20px; background: rgba(15, 23, 42, 0.55);
}
.fj-lb[data-open="true"] { display: flex; }
.fj-lb-box {
  position: relative; background: var(--color-surface); border-radius: 18px; width: 100%; max-width: 460px;
  padding: 22px 22px 24px; box-shadow: 0 30px 80px rgba(15, 23, 42, 0.4);
}
.fj-lb-close {
  position: absolute; top: 12px; right: 14px; border: none; background: none; font-size: 1.5rem;
  line-height: 1; color: var(--color-muted); cursor: pointer;
}
.fj-lb-close:hover { color: var(--color-text); }
.fj-lb-panel { display: none; }
.fj-lb-panel[data-on="true"] { display: block; }
.fj-lb-media {
  border-radius: 14px; padding: 22px; display: grid; place-items: center; min-height: 220px;
  border: 1px solid var(--color-border);
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-primary) 9%, var(--color-field-bg)), var(--color-field-bg));
}
.fj-lb-cap { margin-top: 16px; }
.fj-lb-title { display: block; font-weight: 750; font-size: 18px; color: var(--color-text); margin: 2px 0 4px; }
.fj-lb-desc { margin: 0; font-size: 13px; color: var(--color-muted); line-height: 1.5; }
.fj-lb-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; gap: 12px; }
.fj-lb-nav button {
  font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; border-radius: 10px; padding: 9px 14px;
  border: 2px solid var(--color-border); background: var(--color-surface); color: var(--color-primary);
}
.fj-lb-nav button:hover:not(:disabled) { background: var(--color-primary-light); color: #fff; border-color: var(--color-primary-light); }
.fj-lb-nav button:disabled { opacity: 0.4; cursor: default; }
.fj-lb-dots { display: flex; gap: 6px; }
.fj-lb-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--color-border); transition: width 0.2s ease, background 0.2s ease; }
.fj-lb-dots i.is-on { background: var(--color-primary); width: 20px; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) {
  .fj-node, .fj-row, .fj-lb-dots i { transition: none; }
}

/* Credit bureau mini-tiles inside the Credit Checks lp-card (tenant-checking page).
   Each tile shows the bureau logo; if the image is missing it falls back to a
   lettered monogram + name (JS adds .no-logo on the img's onerror). */
.lp-bureaus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 0.9rem; }
.lp-bureau {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px;
  padding: 12px 8px; text-align: center; display: flex; flex-direction: column;
  align-items: center; justify-content: center; min-height: 84px;
}
.lp-bureau .lp-blogo {
  display: block; width: auto; height: auto; max-width: 86%; max-height: 24px;
  object-fit: contain; margin: 2px auto 8px;
}
.lp-bureau .lp-bfallback { display: none; }
.lp-bureau.no-logo .lp-blogo { display: none; }
.lp-bureau.no-logo .lp-bfallback { display: block; }
.lp-bureau .lp-bmono {
  width: 32px; height: 32px; border-radius: 9px; margin: 0 auto 6px; display: grid; place-items: center;
  font-weight: 800; font-size: 13px;
  background: color-mix(in srgb, var(--color-primary) 11%, transparent); color: var(--color-primary);
}
.lp-bureau .lp-bn { font-size: 12.5px; font-weight: 700; color: var(--color-text); }
.lp-bureau .lp-bs { font-size: 10.5px; color: var(--color-muted); margin-top: 0; }

/* Tenant-checking page: 2-column, larger cards (bigger bureau logos follow). */
.lp-panels .lp-cards { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; max-width: 920px; margin-left: auto; margin-right: auto; }
/* "Who it's for" — three cards on a single row (full section width). */
.lp-panels .lp-cards-3 { grid-template-columns: repeat(3, 1fr); max-width: none; }
.lp-panels .lp-card { padding: 1.75rem 1.9rem; border-radius: 16px; }
.lp-panels .lp-card .lp-ic { width: 44px; height: 44px; border-radius: 12px; margin-bottom: 1rem; }
.lp-panels .lp-card .lp-ic svg { width: 22px; height: 22px; }
.lp-panels .lp-card h3 { font-size: 1.12rem; }
.lp-panels .lp-card p { font-size: 0.94rem; }
/* "Property managers" card: photo cut-out replaces the icon and rises above
   the card's top edge, floating into the dark gradient behind it. */
.lp-panels .lp-card--person { position: relative; padding-top: 5.75rem; text-align: center; }
.lp-card--person .lp-card-photo {
  position: absolute; left: 50%; top: -46px; transform: translateX(-50%);
  width: auto; height: 132px; pointer-events: none; user-select: none;
  filter: drop-shadow(0 14px 22px rgba(13, 19, 48, 0.5)); }
.lp-card--person h3 { justify-content: center; }
.lp-panels .lp-bureaus { gap: 10px; margin-top: 1.1rem; }
.lp-panels .lp-bureau { min-height: 108px; padding: 16px 10px; border-radius: 14px; }
.lp-panels .lp-bureau .lp-blogo { max-width: 90%; max-height: 38px; margin: 2px auto 10px; }
.lp-panels .lp-bureau .lp-bmono { width: 40px; height: 40px; border-radius: 11px; font-size: 16px; }
.lp-panels .lp-bureau .lp-bn { font-size: 13.5px; }
.lp-panels .lp-bureau .lp-bs { font-size: 11.5px; }
@media (max-width: 560px) {
  .lp-panels .lp-cards { grid-template-columns: 1fr; }
}

/* Watermark check cards ("One form, every check you need"): oversized faded
   icon behind the text, per-card accent via --ac, badge below the copy. */
.lp-checks .lp-card { position: relative; overflow: hidden; }
.lp-checks .lp-card > :not(.lp-wm) { position: relative; z-index: 1; }
.lp-checks .lp-card .lp-ic { background: transparent; width: auto; height: auto; border-radius: 0; margin-bottom: 0.5rem; color: var(--ac, var(--color-primary)); justify-items: start; }
.lp-checks .lp-card .lp-ic svg { width: 24px; height: 24px; }
.lp-checks .lp-badge { display: inline-block; margin-top: 0.8rem; }
.lp-wm { position: absolute; right: -14px; bottom: -18px; z-index: 0; color: var(--ac, var(--color-primary)); opacity: 0.08; pointer-events: none; }
.lp-wm svg { width: 104px; height: 104px; }

/* Tenant-checking page: pentagon "check" cards (gradient roof + logo/icon circle).
   Six equal-size cards; bureau logos sit inside the top circle. Corners are
   softened. Content editable via /manage/page-ui/. */
/* Promo banner above the check cards — full-bleed, uses the site footer's gradient. */
.tc-promo-band {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, #211a4d, #0d1330);
  padding: 4.6rem 24px; text-align: center;
}
.tc-promo-band::before {
  content: ""; position: absolute; top: -40%; left: 8%; width: 34%; height: 180%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.5), transparent 60%); pointer-events: none;
}
.tc-promo-band::after {
  content: ""; position: absolute; bottom: -50%; right: 8%; width: 32%; height: 170%;
  background: radial-gradient(circle, rgba(59, 86, 208, 0.42), transparent 62%); pointer-events: none;
}
.tc-promo-inner { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; }
.tc-promo-kick {
  display: inline-block; color: #c9b8ff; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; font-size: 0.7rem; margin: 0 0 1rem;
  padding: 0.4rem 0.9rem; border: 1px solid rgba(201, 184, 255, 0.35); border-radius: 999px;
}
.tc-promo-h2 { color: #fff; font-size: 3.1rem; line-height: 1.05; letter-spacing: -0.03em; margin: 0 auto; max-width: 16ch; font-weight: 800; }
.tc-promo-p { color: #c7cde6; font-size: 1rem; line-height: 1.55; margin: 1.2rem auto 0; max-width: 52ch; }
@media (max-width: 640px) {
  .tc-promo { padding: 3rem 1.5rem; }
  .tc-promo-h2 { font-size: 2.2rem; }
  .tc-promo-p { font-size: 1rem; }
}
/* ---- Applications feature page: product-split hero + inbox mock + pipeline ---- */
.af-hero { background: linear-gradient(180deg, #F6F8FE, var(--color-surface)); border-bottom: 1px solid var(--color-border); }
.af-hero-wrap { width: min(1120px, 92%); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center; padding: 4rem 0; }
.af-kick { display: inline-block; color: var(--color-accent); font-weight: 800; letter-spacing: 0.15em; text-transform: uppercase; font-size: 0.72rem; margin: 0 0 0.9rem; }
.af-h1 { font-size: 2.9rem; line-height: 1.05; letter-spacing: -0.03em; margin: 0; color: var(--color-text); max-width: 14ch; }
.af-sub { font-size: 1.05rem; line-height: 1.55; color: var(--color-muted); margin: 1rem 0 1.6rem; max-width: 44ch; }

/* Dark gradient banner variant (listings hero) — matches the .tc-promo-band treatment. */
.af-hero-dark { position: relative; overflow: hidden; background: linear-gradient(120deg, #211a4d, #0d1330); border-bottom: none; }
.af-hero-dark::before {
  content: ""; position: absolute; top: -40%; left: 8%; width: 34%; height: 180%;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.5), transparent 60%); pointer-events: none;
}
.af-hero-dark::after {
  content: ""; position: absolute; bottom: -50%; right: 8%; width: 32%; height: 170%;
  background: radial-gradient(circle, rgba(59, 86, 208, 0.42), transparent 62%); pointer-events: none;
}
.af-hero-dark .af-hero-wrap { position: relative; z-index: 1; }
.af-hero-dark .af-kick { color: #c9b8ff; }
.af-hero-dark .af-h1 { color: #fff; }
.af-hero-dark .af-sub { color: #c7cde6; }
.af-cta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; }
.af-cta-row .btn svg { width: 16px; height: 16px; }

/* Inbox mockup */
.af-inbox { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: 0 26px 50px -28px rgba(30, 41, 90, 0.5); overflow: hidden; }
.af-inbox-head { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; border-bottom: 1px solid var(--color-border); font-weight: 700; font-size: 0.9rem; }
.af-inbox-head span { color: var(--color-accent); font-weight: 700; font-size: 0.8rem; }
.af-irow { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid #F1F3F9; }
.af-irow:last-child { border-bottom: 0; }
.af-av { width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-weight: 700; font-size: 0.8rem; color: #fff; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); }
.af-iname { flex: 1; font-weight: 600; font-size: 0.9rem; display: flex; flex-direction: column; line-height: 1.25; }
.af-iname small { font-weight: 500; color: var(--color-muted); font-size: 0.76rem; }
.af-pill { font-size: 0.7rem; font-weight: 700; padding: 0.25rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.af-pill.new { background: #EEF2FF; color: var(--color-primary); }
.af-pill.rev { background: #FDF2E6; color: #B45309; }
.af-pill.sl { background: #F3EEFF; color: var(--color-accent); }
.af-pill.ok { background: #E7F8EE; color: #16A34A; }

/* Pipeline */
.af-pipe { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; position: relative; }
.af-stage { text-align: center; position: relative; }
/* Connector: each stage draws a segment from its own dot centre to the next
   dot's centre (cell width + column gap), so the line always meets the dots
   cleanly and never overshoots the first/last stage. */
.af-stage::after { content: ""; position: absolute; top: 27px; left: 50%; width: calc(100% + 1rem); height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); opacity: 0.35; transform: translateY(-50%); z-index: 0; }
.af-stage:last-child::after { display: none; }
.af-dot { width: 54px; height: 54px; border-radius: 16px; margin: 0 auto 0.75rem; display: grid; place-items: center; background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: 0 12px 26px -14px rgba(30, 41, 90, 0.5); color: var(--color-accent); position: relative; z-index: 1; }
.af-dot svg { width: 24px; height: 24px; }
.af-stage b { display: block; font-size: 0.92rem; color: var(--color-text); }
/* Scope the caption to the span that follows the label, so this rule never
   matches the .af-dot span (which is also a direct child). A bare
   `.af-stage span` outweighs `.af-dot` and was forcing the dot to
   display:block — killing its place-items centering (icon rode to the top)
   and adding a stray 0.15rem margin-top that dropped it off the connector. */
.af-stage b + span { display: block; font-size: 0.8rem; color: var(--color-muted); margin-top: 0.15rem; }

@media (max-width: 820px) {
  .af-hero-wrap { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 0; }
  .af-h1 { font-size: 2.3rem; max-width: none; }
  .af-pipe { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; }
  .af-stage::after { display: none; }
}
@media (max-width: 440px) { .af-pipe { grid-template-columns: 1fr; } }
.af-pipe.af-pipe--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 820px) { .af-pipe.af-pipe--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .af-pipe.af-pipe--4 { grid-template-columns: 1fr; } }

/* Timeline variant (applications page): round filled nodes on a continuous
   line, so the pipeline reads as a flowing progression rather than a second
   row of the feature-card tiles above it. */
.af-pipe--timeline .af-dot { width: 44px; height: 44px; border-radius: 50%; margin-bottom: 0.7rem; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); border: none; color: #fff; box-shadow: 0 8px 16px -8px rgba(124, 58, 237, 0.7); }
.af-pipe--timeline .af-dot svg { width: 20px; height: 20px; }
.af-pipe--timeline .af-stage::after { top: 22px; height: 2px; border-radius: 2px; background: var(--color-accent); opacity: 0.28; }

/* Listing card mockup (listings hero) */
.af-listing { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; box-shadow: 0 26px 50px -28px rgba(30, 41, 90, 0.5); }
.af-listing-photo { position: relative; height: 172px; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); display: grid; place-items: center; }
.af-listing-photo > svg { width: 54px; height: 54px; color: rgba(255, 255, 255, 0.9); }
.af-listing-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.af-listing-photo .af-pill { position: absolute; top: 12px; left: 12px; }
.af-listing-price { position: absolute; bottom: 12px; right: 12px; background: rgba(255, 255, 255, 0.96); color: var(--color-text); font-weight: 800; font-size: 1.05rem; padding: 0.3rem 0.7rem; border-radius: 10px; box-shadow: 0 8px 18px -10px rgba(0, 0, 0, 0.4); }
.af-listing-price small { font-weight: 600; color: var(--color-muted); font-size: 0.72rem; }
.af-listing-body { padding: 1rem 1.15rem 1.2rem; }
.af-listing-body h3 { margin: 0; font-size: 1.05rem; }
.af-listing-loc { color: var(--color-muted); font-size: 0.85rem; margin: 0.25rem 0 0.8rem; display: flex; align-items: center; gap: 0.35rem; }
.af-listing-loc svg { width: 15px; height: 15px; flex: 0 0 auto; }
.af-listing-specs { display: flex; gap: 1.1rem; font-size: 0.83rem; color: var(--color-text); font-weight: 600; border-top: 1px solid var(--color-border); padding-top: 0.8rem; }
.af-listing-specs span { display: flex; align-items: center; gap: 0.35rem; }
.af-listing-specs svg { width: 16px; height: 16px; color: var(--color-primary); }
.af-hh { margin-top: 0.85rem; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.76rem; font-weight: 700; color: #16A34A; background: #E7F8EE; padding: 0.32rem 0.65rem; border-radius: 999px; }
.af-hh svg { width: 14px; height: 14px; }

/* Centred section lead (no accent bar) + numbered guided-form steps,
   used on the listings and applications feature pages. */
.af-needs-lead { text-align: center; max-width: 640px; margin: 0 auto; }
.af-needs-lead .lp-h2 { max-width: none; margin: 0 auto; }
.af-needs-lead .lp-lede { max-width: 52ch; margin: 0.6rem auto 0; }
.af-steps { list-style: none; padding: 0; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin: 2rem 0 0; }
.af-steps::before { content: ""; position: absolute; top: 34px; left: 16%; right: 16%; height: 2px; z-index: 0; background: repeating-linear-gradient(90deg, var(--color-border) 0 10px, transparent 10px 18px); }
.af-step { position: relative; z-index: 1; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 1.5rem 1.4rem; box-shadow: 0 10px 26px -18px rgba(30, 64, 175, 0.28); }
.af-step-top { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.af-step-num { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.05rem; background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); }
.af-step-ic { display: grid; place-items: center; color: var(--color-accent); }
.af-step-ic svg { width: 22px; height: 22px; }
.af-step-kick { margin: 0 0 0.3rem; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); }
.af-step h3 { margin: 0; font-size: 1.05rem; color: var(--color-text); }
.af-step p { margin: 0.45rem 0 0; font-size: 0.88rem; color: var(--color-muted); }
@media (max-width: 860px) {
  .af-steps { grid-template-columns: 1fr; }
  .af-steps::before { display: none; }
}

/* Agreement document mockup (agreements hero) */
.af-doc { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; box-shadow: 0 26px 50px -28px rgba(30, 41, 90, 0.5); }
.af-doc-head { padding: 1.05rem 1.2rem; border-bottom: 1px solid var(--color-border); background: #FAFBFF; }
.af-doc-head b { display: block; font-size: 1rem; }
.af-doc-head span { font-size: 0.77rem; color: var(--color-muted); }
.af-doc-body { padding: 0.35rem 1.2rem; }
.af-kv { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid #F1F3F9; font-size: 0.86rem; }
.af-kv:last-child { border-bottom: 0; }
.af-kv span { color: var(--color-muted); }
.af-kv b { font-weight: 600; }
.af-doc-sign { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1.2rem 1.05rem; border-top: 1px solid var(--color-border); }
.af-doc-sign .af-sig { color: var(--color-accent); }
.af-doc-sign .af-sig svg { width: 84px; height: 26px; }

/* Tenancy Database hero: let the box fit its content so both lines centre
   cleanly (the default 16ch cap makes the "peer-to-peer" line overflow). */
.tdb-hero-title { max-width: none; }
.tdb-hero-nowrap { white-space: nowrap; }
/* On very small screens, allow the phrase to wrap so it never overflows. */
@media (max-width: 430px) {
  .tdb-hero-nowrap { white-space: normal; }
}
/* Widen the diagram intro so it settles onto two lines instead of three
   (overrides the narrower .tcb-lead .lp-lede cap). */
.tcb-lead .lp-lede.tdb-lede-wide { max-width: 92ch; }

/* Bundles (Option D): pentagon-matched package cards. */
.tcb-head { text-align: center; margin-top: 3.5rem; }
/* Bundles section heading — left-aligned with a gradient accent bar. */
.tcb-lead { display: flex; gap: 1rem; align-items: flex-start; text-align: left; }
.tcb-lead > div { min-width: 0; }
.tcb-lead .lp-lede { max-width: 60ch; }
.tcb-bar { flex: none; width: 5px; align-self: stretch; min-height: 52px; border-radius: 3px; background: linear-gradient(120deg, var(--color-accent), var(--color-primary)); }
.tcb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; margin-top: 2rem; align-items: stretch; }
/* Gradient frame wrapper (treatment 4): a thin accent→primary rim around the pentagon. */
.tcb-fr {
  height: 520px; padding: 3px;
  background: linear-gradient(120deg, var(--color-accent), var(--color-primary));
  clip-path: polygon(45.19% 2.5%, 46.79% 1.81%, 48.4% 1.39%, 50.0% 1.25%, 51.6% 1.39%, 53.21% 1.81%, 54.81% 2.5%, 95.19% 23.5%, 96.66% 24.4%, 97.86% 25.43%, 98.8% 26.58%, 99.47% 27.87%, 99.87% 29.29%, 100.0% 30.84%, 100.0% 95.16%, 99.84% 96.64%, 99.38% 97.85%, 98.59% 98.79%, 97.5% 99.46%, 96.09% 99.87%, 94.38% 100.0%, 5.62% 100.0%, 3.91% 99.87%, 2.5% 99.46%, 1.41% 98.79%, 0.63% 97.85%, 0.16% 96.64%, 0.0% 95.16%, 0.0% 30.84%, 0.13% 29.29%, 0.53% 27.87%, 1.2% 26.58%, 2.14% 25.43%, 3.34% 24.4%, 4.81% 23.5%);
  filter: drop-shadow(0 26px 44px rgba(124, 58, 237, 0.42));
}
.tcb-pent {
  position: relative; display: flex; flex-direction: column; height: 100%;
  /* Deeper 3-stop gradient (treatment 5). */
  background: linear-gradient(120deg, #8b3be6, #3b2fae 55%, #142a86);
  clip-path: polygon(45.19% 2.5%, 46.79% 1.81%, 48.4% 1.39%, 50.0% 1.25%, 51.6% 1.39%, 53.21% 1.81%, 54.81% 2.5%, 95.19% 23.5%, 96.66% 24.4%, 97.86% 25.43%, 98.8% 26.58%, 99.47% 27.87%, 99.87% 29.29%, 100.0% 30.84%, 100.0% 95.16%, 99.84% 96.64%, 99.38% 97.85%, 98.59% 98.79%, 97.5% 99.46%, 96.09% 99.87%, 94.38% 100.0%, 5.62% 100.0%, 3.91% 99.87%, 2.5% 99.46%, 1.41% 98.79%, 0.63% 97.85%, 0.16% 96.64%, 0.0% 95.16%, 0.0% 30.84%, 0.13% 29.29%, 0.53% 27.87%, 1.2% 26.58%, 2.14% 25.43%, 3.34% 24.4%, 4.81% 23.5%);
}
.tcb-notch {
  position: absolute; left: 50%; top: 118px; transform: translateX(-50%);
  width: 84px; height: 84px; border-radius: 50%; background: #fff; z-index: 2; line-height: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.28), 0 6px 14px -6px rgba(30, 64, 175, 0.4);
}
.tcb-notch b { color: var(--color-primary); font-size: 1.12rem; font-weight: 800; letter-spacing: -0.02em; }
.tcb-notch b.tbc { font-size: 1rem; }
.tcb-notch i { font-style: normal; font-size: 0.5rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); margin-top: 2px; }
.tcb-sheet { position: relative; flex: 1; margin-top: 160px; background: #fff; padding: 52px 1.5rem 2rem; text-align: center; }
.tcb-name { font-weight: 800; font-size: 1.25rem; color: var(--color-text); margin-bottom: 0.9rem; }
.tcb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.9rem; text-align: left; }
.tcb-list li { display: flex; align-items: flex-start; gap: 0.55rem; }
.tcb-list svg { width: 17px; height: 17px; flex: none; color: var(--color-success); margin-top: 2px; }
.tcb-list b { display: block; font-size: 0.9rem; font-weight: 700; color: var(--color-text); }
.tcb-list span { display: block; font-size: 0.9rem; color: var(--color-muted); line-height: 1.4; margin-top: 2px; }

/* Add-on checks (Public, Criminal) — medallion cards, side by side. The icon
   breaks the top edge so these echo the pentagon bundle cards above without
   repeating their shape. */
.tc-addons-head { margin-top: 3.5rem; }
.aw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; margin-top: 3.2rem; align-items: start; }
.aw {
  position: relative; background: var(--color-surface); border-radius: 18px;
  padding: 2.9rem 1.6rem 1.8rem; text-align: center;
  box-shadow: 0 26px 48px -28px rgba(124, 58, 237, 0.5), 0 8px 20px -14px rgba(30, 64, 175, 0.35);
}
/* Gradient rim, drawn as a masked border so the radius stays crisp. */
.aw::before {
  content: ""; position: absolute; inset: 0; border-radius: 18px; padding: 2px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 3;
}
.aw-ic {
  /* Above the gradient rim (z-index 3) — the rim would otherwise paint a line
     straight across the disc. The ring matches the page ground so the rim is
     masked where the two overlap. */
  position: absolute; top: -30px; left: 50%; transform: translateX(-50%); z-index: 4;
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(140deg, #8b3be6, #3b2fae 55%, #142a86); color: #fff;
  box-shadow: 0 0 0 6px var(--color-bg), 0 8px 18px -10px rgba(30, 64, 175, 0.6);
}
.aw-title { font-size: 1.25rem; font-weight: 800; color: var(--color-text); }
.aw-price { display: inline-block; margin: 0.3rem 0 1.1rem; font-weight: 800; color: var(--color-primary); }
.aw-price i { font-style: normal; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); }
.aw-price .tbc { color: var(--color-muted); }
.aw-body { border-top: 1px solid var(--color-border); padding-top: 1.3rem; text-align: left; }
.aw-lead { color: var(--color-muted); font-size: 0.9rem; margin: 0 0 1rem; }
.aw-srclist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.4rem; }
.aw-srclist li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.9rem; color: var(--color-text); }
.aw-srclist svg { width: 16px; height: 16px; flex: none; color: var(--color-success); margin-top: 2px; }
.aw-desc { color: var(--color-muted); font-size: 0.9rem; line-height: 1.6; margin: 0; }
@media (max-width: 900px) {
  .aw-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 640px) {
  .aw-srclist { grid-template-columns: 1fr; }
}
@media (max-width: 860px) { .tcb-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } }

/* Per-tier bundle colours (Set 2: Teal -> Blue -> Purple). Cool-to-rich climb
   across the three cards. .tcb-fr is the gradient rim; .tcb-pent is the fill. */
.tc-section .tcb-grid > .tcb-fr:nth-child(1) { background: linear-gradient(120deg, #2dd4bf, #0d9488); }
.tc-section .tcb-grid > .tcb-fr:nth-child(1) .tcb-pent { background: linear-gradient(120deg, #14b8a6, #0f766e 55%, #134e4a); }
.tc-section .tcb-grid > .tcb-fr:nth-child(2) { background: linear-gradient(120deg, #38bdf8, #1E40AF); }
.tc-section .tcb-grid > .tcb-fr:nth-child(2) .tcb-pent { background: linear-gradient(120deg, #0ea5e9, #1d4ed8 55%, #0c2f8a); }
.tc-section .tcb-grid > .tcb-fr:nth-child(3) { background: linear-gradient(120deg, #a855f7, #4f46e5); }
.tc-section .tcb-grid > .tcb-fr:nth-child(3) .tcb-pent { background: linear-gradient(120deg, #9333ea, #4338ca 55%, #2e1065); }

/* Two-bundle layout (Standard / Comprehensive). Wider cards than the old
   three-up, set further apart, and the frame grows with the list —
   Comprehensive carries five checks to Standard's three. */
.tcb-grid-2 { grid-template-columns: repeat(2, 1fr); gap: 2rem 3.5rem; max-width: 1000px; margin-left: auto; margin-right: auto; }
.tcb-grid-2 .tcb-fr { height: auto; min-height: 520px; }
/* Wider cards carry a bigger price disc — the price is the reason for the card. */
.tcb-grid-2 .tcb-notch { width: 104px; height: 104px; top: 108px; }
.tcb-grid-2 .tcb-notch b { font-size: 1.5rem; }
.tcb-grid-2 .tcb-notch b.tbc { font-size: 1.25rem; }
.tcb-grid-2 .tcb-notch i { font-size: 0.7rem; margin-top: 3px; }
.tcb-grid-2 .tcb-sheet { margin-top: 172px; padding-top: 60px; }
/* Teal -> purple across the pair, so the climb still reads with two cards. */
.tc-section .tcb-grid-2 > .tcb-fr:nth-child(2) { background: linear-gradient(120deg, #a855f7, #4f46e5); }
.tc-section .tcb-grid-2 > .tcb-fr:nth-child(2) .tcb-pent { background: linear-gradient(120deg, #9333ea, #4338ca 55%, #2e1065); }
/* Buttons on the marketing sections use the rem scale, so they track the
   reader's font size like the rest of the page. The global .btn stays px. */
.tc-section .btn, .tdb-section .btn, .td-cta .btn { font-size: 0.875rem; }

.tc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 1.75rem; margin-top: 2rem; }
.tc-pent {
  position: relative;
  background: linear-gradient(120deg, var(--color-accent), var(--color-primary));
  clip-path: polygon(45.19% 2.5%, 46.79% 1.81%, 48.4% 1.39%, 50.0% 1.25%, 51.6% 1.39%, 53.21% 1.81%, 54.81% 2.5%, 95.19% 23.5%, 96.66% 24.4%, 97.86% 25.43%, 98.8% 26.58%, 99.47% 27.87%, 99.87% 29.29%, 100.0% 30.84%, 100.0% 95.16%, 99.84% 96.64%, 99.38% 97.85%, 98.59% 98.79%, 97.5% 99.46%, 96.09% 99.87%, 94.38% 100.0%, 5.62% 100.0%, 3.91% 99.87%, 2.5% 99.46%, 1.41% 98.79%, 0.63% 97.85%, 0.16% 96.64%, 0.0% 95.16%, 0.0% 30.84%, 0.13% 29.29%, 0.53% 27.87%, 1.2% 26.58%, 2.14% 25.43%, 3.34% 24.4%, 4.81% 23.5%);
  filter: drop-shadow(0 18px 24px rgba(30, 64, 175, 0.24));
  height: 372px;
}
.tc-notch {
  position: absolute; left: 50%; top: 52px; transform: translateX(-50%);
  width: 108px; height: 108px; border-radius: 50%; background: #fff;
  display: grid; place-items: center; color: var(--color-primary); z-index: 2;
  box-shadow: 0 6px 14px -6px rgba(30, 64, 175, 0.35);
}
.tc-notch svg { width: 32px; height: 32px; }
.tc-notch img { max-width: 84%; max-height: 55px; object-fit: contain; }
.tc-sheet {
  position: relative; margin-top: 150px; height: 222px; box-sizing: border-box;
  background: #fff; padding: 32px 1.4rem 2rem; text-align: center;
}
.tc-sheet h3 { font-size: 1.08rem; margin: 0; color: var(--color-text); }
.tc-badge {
  display: inline-block; margin-top: 0.4rem; font-size: 0.58rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em; padding: 0.12rem 0.5rem;
  border-radius: 6px; background: #EEF2FF; color: var(--color-muted);
}
.tc-badge.inc { color: var(--color-primary); }
.tc-sheet p { color: var(--color-muted); font-size: 0.88rem; margin: 0.6rem auto 0; max-width: 26ch; }
@media (max-width: 860px) {
  .tc-grid { grid-template-columns: repeat(2, 1fr); }
  .tc-pent { height: auto; }
  .tc-sheet { height: auto; min-height: 200px; }
}
@media (max-width: 560px) {
  .tc-grid { grid-template-columns: 1fr; }
}

/* ===== Tenancy Database page ===== */
/* Join CTA (split card — message left, buttons right). Shared by the Tenancy
   Database and Tenant Checking pages, so keep these selectors page-agnostic. */
.td-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  margin-top: 3rem; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 18px; padding: 1.8rem 2rem; box-shadow: 0 16px 34px -24px rgba(30, 64, 175, 0.4);
}
.td-cta-msg h3 { margin: 0; font-size: 1.25rem; color: var(--color-text); }
.td-cta-msg p { margin: 0.35rem 0 0; color: var(--color-muted); max-width: 52ch; }
.td-cta-btns { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.td-cta-btns .btn { white-space: nowrap; }
/* Gradient pill Join button (scoped to this CTA). */
.td-cta-join {
  display: inline-flex; align-items: center; gap: 0.45rem; border: 0;
  background: linear-gradient(120deg, var(--color-accent), var(--color-primary));
  color: #fff; box-shadow: 0 12px 24px -12px rgba(124, 58, 237, 0.6);
}
/* Keep the gradient on hover — the base .btn:hover swaps to a solid colour,
   which the browser can't animate from a gradient (causes a white flash). */
.td-cta-join:hover { background: linear-gradient(120deg, var(--color-accent), var(--color-primary)); filter: brightness(1.06); }
.td-cta-join svg { width: 16px; height: 16px; }

.tdb-nowrap { white-space: nowrap; }
@media (max-width: 560px) { .tdb-nowrap { white-space: normal; } }
.tdb-head { text-align: center; }
.tdb-head .lp-h2, .tdb-head .lp-lede { margin-left: auto; margin-right: auto; }

/* --- Context diagram: sources -> database -> Tenancy Check ("Conveyor") ---
   One line of travel, left to right: a 2x2 set of source tiles merges into the
   database, which feeds a single Tenancy Check card. Connector curves are drawn
   by static/js/tdb-flow.js from the live tile positions so they always meet the
   tile centres; below 821px the diagram stacks and the overlay is hidden. */
.tdb-flow {
  position: relative;
  display: grid; grid-template-columns: 1.15fr 72px 0.8fr 72px 1fr;
  align-items: center; gap: 0; margin-top: 2.2rem;
}
.tdb-flow-col { position: relative; z-index: 1; min-width: 0; }
.tdb-flow-cap {
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--color-muted); margin: 0 0 1rem;
}
.tdb-flow-col--core .tdb-flow-cap { text-align: center; }
.tdb-flow-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; display: none; }
.tdb-flow-links path { fill: none; stroke-linecap: round; }
.tdb-link-src { stroke: #c7d2fe; stroke-width: 2; }
.tdb-link-check { stroke: var(--color-primary); stroke-width: 2.6; }
.tdb-dot-core { fill: #94a3c8; }
.tdb-dot-check { fill: var(--color-primary); }
@media (min-width: 821px) { .tdb-flow-links { display: block; } }

/* Source tiles: 2x2, tinted fill, solid icon chip. */
.tdb-src-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tdb-src {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--tdb-tint, var(--color-field-bg)); border-radius: 14px; padding: 16px; min-height: 110px;
}
.tdb-chip-ic {
  width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: var(--tdb-sw, var(--color-primary)); color: #fff;
}
.tdb-chip-ic svg { width: 21px; height: 21px; }
.tdb-src h4 { margin: 0; font-size: 0.95rem; line-height: 1.2; color: var(--color-text); }
.tdb-src p { margin: 2px 0 0; font-size: 0.82rem; color: var(--color-muted); }

/* Central database — the promo band's gradient with a soft purple glow. */
.tdb-core {
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, #211a4d, #0d1330);
  border-radius: 20px; padding: 34px 22px; text-align: center; color: #fff;
  box-shadow: 0 24px 40px -24px rgba(13, 19, 48, 0.7);
}
.tdb-core::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 0%, rgba(124, 58, 237, 0.45), transparent 70%);
}
.tdb-core > * { position: relative; }
.tdb-core-ic {
  display: inline-grid; place-items: center; width: 50px; height: 50px; margin-bottom: 0.7rem;
  border-radius: 50%; background: rgba(201, 184, 255, 0.16); border: 1px solid rgba(201, 184, 255, 0.3); color: #dcd2ff;
}
.tdb-core-ic svg { width: 23px; height: 23px; }
.tdb-core-kick {
  display: block; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: #c9b8ff;
}
.tdb-core h3 { margin: 0.3rem 0 0; font-size: 1.25rem; line-height: 1.1; color: #fff; }
.tdb-core p { margin: 0.7rem auto 0; font-size: 0.86rem; color: #c7cde6; max-width: 20ch; }

/* Tenancy Check card — the one outcome, framed in brand blue. */
.tdb-out {
  display: flex; flex-direction: column; border-radius: 18px; padding: 26px;
  text-decoration: none; color: inherit; background: var(--color-surface);
  border: 2px solid var(--color-primary); box-shadow: 0 20px 40px -26px rgba(30, 64, 175, 0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
a.tdb-out:hover { transform: translateY(-2px); box-shadow: 0 26px 44px -24px rgba(30, 64, 175, 0.6); }
.tdb-out-cap { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary); }
.tdb-out h4 { margin: 0.35rem 0 0; font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; color: var(--color-text); }
.tdb-out p { margin: 0.4rem 0 0; font-size: 0.92rem; color: var(--color-muted); }
.tdb-out-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 7px; }
.tdb-out-list li { display: flex; gap: 8px; align-items: center; font-size: 0.85rem; color: var(--color-text); }
.tdb-out-list svg { width: 15px; height: 15px; flex: none; color: var(--color-success); }
.tdb-out-cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; margin-top: 1.2rem;
  padding: 0.7rem 1.1rem; border-radius: 10px; background: var(--color-primary); color: #fff;
  font-weight: 700; font-size: 0.85rem; letter-spacing: 0.03em;
}
.tdb-out-cta svg { width: 14px; height: 14px; transition: transform 0.15s ease; }
a.tdb-out:hover .tdb-out-cta svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  a.tdb-out, .tdb-out-cta svg { transition: none; }
  a.tdb-out:hover, a.tdb-out:hover .tdb-out-cta svg { transform: none; }
}

/* Stack to a single column on narrow screens. */
@media (max-width: 820px) {
  .tdb-flow { grid-template-columns: 1fr; gap: 18px; max-width: 520px; margin-left: auto; margin-right: auto; }
  .tdb-flow-rail { display: none; }
  .tdb-flow-col--core .tdb-flow-cap { text-align: left; }
}
@media (max-width: 440px) { .tdb-src-grid { grid-template-columns: 1fr; } }

/* Tenancy Database + Tenant Checking share the app-wide page width (min(92%,
   --page-max)) so they line up uniformly with .page-wrap pages like /properties/.
   Scoped to these pages (.lp-wrap / .lp-section are shared by other landing pages). */
@media (min-width: 821px) {
  .tdb-section .lp-wrap { width: min(92%, var(--page-max)); }
  .tc-section .lp-wrap { width: min(92%, var(--page-max)); }
  .tdb-section.lp-section { padding: 6rem 0; }
  .tdb-section .tdb-flow { margin-top: 3.5rem; }
  .tdb-section .td-cta { margin-top: 5rem; padding: 2.6rem 2.8rem; }
}

/* My Applications: the tenant's own withdraw action, kept quiet next to the
   status badge so it doesn't read as the primary action on the row. */
.app-action-cell { text-align: right; white-space: nowrap; }
.app-withdraw { color: var(--color-muted); font-size: 0.88rem; }
.app-withdraw:hover { color: #b91c1c; }
/* Application detail: status area notes. */
.pm-status-note { margin: 8px 0 0; font-size: 0.84rem; color: var(--color-muted); }
.pm-status-withdrawn {
  margin: 0; padding: 12px 14px; border-radius: 8px;
  background: var(--color-bg); border: 1px solid var(--color-border);
  font-size: 0.9rem; color: var(--color-muted);
}

/* ============================================================================
   Dashboard — "Aurora" concept
   Luminous gradient stat cards over frosted-glass panels. Scoped under
   .au-dash so nothing here affects other pages. Brand tokens reused from :root.
   ========================================================================== */
.au-dash { position: relative; }
.au-dash > * { position: relative; z-index: 1; }

.au-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.au-welcome { margin: 0; font-size: 1.5rem; font-weight: 700; color: #1e1b4b; }
.au-sub { margin: 4px 0 0; color: var(--color-muted); font-size: 0.98rem; }
.au-who { font-size: 0.8rem; font-weight: 600; color: var(--color-primary); background: rgba(30,64,175,0.10); padding: 7px 14px; border-radius: 20px; white-space: nowrap; }

/* ---- Gradient stat cards ---- */
.au-cards { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 18px; }
.au-g {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 2px;
  border-radius: 16px; padding: 16px; min-height: 116px; text-decoration: none; color: #fff;
  box-shadow: 0 14px 26px -16px rgba(30,27,75,0.55);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.au-g:hover { transform: translateY(-4px); box-shadow: 0 20px 34px -16px rgba(30,27,75,0.6); }
.au-g:focus-visible { outline: 3px solid rgba(255,255,255,0.85); outline-offset: 2px; }
.au-g--a { background: linear-gradient(135deg, #1E40AF, #3563d6); }
.au-g--b { background: linear-gradient(135deg, #7C3AED, #6528c9); }
.au-g--c { background: linear-gradient(135deg, #be123c, #e11d48); }
.au-g--d { background: linear-gradient(135deg, #b45309, #d97706); }
.au-g--e { background: linear-gradient(135deg, #0f766e, #0d9488); }
.au-g--f { background: linear-gradient(135deg, #4338ca, #6d28d9); }
.au-g__icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.18); margin-bottom: 8px; }
.au-g__icon svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.au-g__v { font-size: 1.85rem; font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; }
.au-g__k { font-size: 0.82rem; font-weight: 500; opacity: 0.92; }

/* ---- Frosted-glass panels ---- */
.au-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.au-glass {
  background: rgba(255,255,255,0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.9); border-radius: 18px; padding: 18px 20px;
  box-shadow: 0 10px 24px -14px rgba(30,27,75,0.3);
}
.au-glass__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.au-glass__head h3 { margin: 0; font-size: 1.05rem; font-weight: 700; color: #1e1b4b; }
.au-glass__note { margin: 0 0 12px; font-size: 0.85rem; color: var(--color-muted); }
.au-pill { font-size: 0.72rem; font-weight: 700; background: #ede9fe; color: var(--color-accent); padding: 3px 10px; border-radius: 12px; white-space: nowrap; }
.au-pill--warn { background: var(--color-caution-bg); color: var(--color-caution); }

.au-list { list-style: none; margin: 0; padding: 0; }
.au-list li { border-bottom: 1px solid rgba(124,58,237,0.12); }
.au-list li:last-child { border-bottom: 0; }
.au-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; text-decoration: none; color: inherit; }
.au-item:hover .au-item__nm { color: var(--color-primary); }
.au-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #7C3AED, #1E40AF); }
.au-av--cal { background: linear-gradient(135deg, #1E40AF, #0f766e); font-size: 0.95rem; }
.au-av--doc { background: linear-gradient(135deg, #4338ca, #6d28d9); font-size: 0.95rem; }
.au-item__nm { display: flex; flex-direction: column; font-size: 0.9rem; font-weight: 600; color: var(--color-text); line-height: 1.3; }
.au-item__nm small { font-weight: 400; color: var(--color-muted); font-size: 0.78rem; }
.au-item__when { margin-left: auto; text-align: right; font-size: 0.8rem; color: var(--color-primary); display: flex; flex-direction: column; white-space: nowrap; }
.au-item__when small { color: var(--color-muted); font-weight: 400; }
.au-more { margin: 12px 0 0; font-size: 0.88rem; }
.au-empty { margin: 6px 0 0; color: var(--color-muted); font-size: 0.9rem; }

@media (max-width: 1180px) { .au-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .au-cards { grid-template-columns: repeat(2, 1fr); } .au-band { grid-template-columns: 1fr; } }

/* ---- Promo: Tribunal Order enforcement (CIA Debt Recovery) ---- */
.au-promo {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  border-radius: 18px; padding: 20px 24px; margin-top: 20px; text-decoration: none;
  color: #fff; background: linear-gradient(120deg, #0f172a 0%, #1e293b 70%, #334155 100%);
  box-shadow: 0 16px 30px -18px rgba(15,23,42,0.7);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.au-promo:hover { transform: translateY(-3px); box-shadow: 0 22px 38px -18px rgba(15,23,42,0.75); }
.au-promo:focus-visible { outline: 3px solid rgba(255,255,255,0.85); outline-offset: 2px; }
.au-promo__glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 120% at 100% 0%, rgba(255,255,255,0.28), transparent 55%); }
.au-promo__body { position: relative; flex: 1 1 320px; display: flex; flex-direction: column; gap: 4px; }
.au-promo__eyebrow { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #fbbf24; }
.au-promo__title { font-size: 1.12rem; font-weight: 800; line-height: 1.2; }
.au-promo__text { font-size: 0.86rem; color: rgba(255,255,255,0.9); max-width: 62ch; }
.au-promo__cta { position: relative; flex: none; align-self: center; font-size: 0.9rem; font-weight: 700;
  color: #0f172a; background: #f59e0b; padding: 11px 18px; border-radius: 12px; white-space: nowrap;
  box-shadow: 0 6px 14px -6px rgba(0,0,0,0.35); }

@media (prefers-reduced-motion: reduce) {
  .au-g, .au-promo { transition: none; }
  .au-g:hover, .au-promo:hover { transform: none; }
}

/* --- Centrix credit report detail tables ------------------------------- */
.cx-details { margin-top: 10px; }
.cx-details details { border: 1px solid #e3e7ee; border-radius: 8px; margin-bottom: 8px; background: #fff; }
.cx-details summary { cursor: pointer; padding: 10px 14px; font-weight: 600; color: #1f3b7a; list-style: none; }
.cx-details summary::-webkit-details-marker { display: none; }
.cx-details summary::before { content: "\25B8"; display: inline-block; margin-right: 8px; transition: transform .15s ease; }
.cx-details details[open] > summary::before { transform: rotate(90deg); }
.cx-note { padding: 0 14px 12px; margin: 0; color: #444; }
.cx-scroll { overflow: visible; border-top: 1px solid #eef1f6; }
.cx-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cx-table th, .cx-table td { text-align: left; padding: 7px 14px; border-bottom: 1px solid #f0f2f6; vertical-align: top; }
.cx-table thead th { background: #f6f8fb; color: #33415c; font-weight: 600; }
.cx-table td.num, .cx-table th.num { text-align: right; white-space: nowrap; }
.cx-table .cx-none { color: #777; text-align: center; padding: 14px; }

/* Centrix adverse-record cards (defaults / judgments / insolvencies) */
.cx-record { padding: 10px 14px; border-bottom: 1px solid #f0f2f6; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 18px; }
.cx-record:last-child { border-bottom: 0; }
.cx-kv { display: flex; flex-direction: column; font-size: 13px; }
.cx-kv .k { color: #6b7280; font-size: 11px; text-transform: uppercase; letter-spacing: .02em; }
.cx-kv .v { color: #1f2733; }

/* Right-align the Amount column in the Centrix Previous Enquiries table */
.tcr-table td.num, .tcr-table th.num { text-align: right; white-space: nowrap; }
/* Clickable Property Manager name on a lodged record (opens the enquiry modal). */
.tcr-pm-link { color: var(--color-accent); text-decoration: none; font-weight: 600; cursor: pointer; }
.tcr-pm-link:hover, .tcr-pm-link:focus-visible { text-decoration: underline; }

/* Centrix Known Names / Known Addresses — plain text in the left column */
.cx-plain { margin-top: 14px; }
.cx-plain-head { font-size: 11px; text-transform: uppercase; letter-spacing: .02em; color: var(--color-text); font-weight: 600; margin-bottom: 4px; }
.cx-plain-line { font-size: 0.9rem; color: var(--color-muted); padding: 2px 0; line-height: 1.4; }
.cx-plain-line.cx-none { color: var(--color-muted); }
/* Enquiry / File number values in the Credit Summary grid */
.cx-refval { font-variant-numeric: tabular-nums; color: #33415c; font-weight: 600; }

/* Borderless table variant — no box around the data, black column headers.
   Used by the Centrix Previous Enquiries list. */
.tcr-table-wrap.tcr-table-plain { border: none; border-radius: 0; }
.tcr-table-plain .tcr-table thead th { color: var(--color-text); background: transparent; border-bottom: none; }
.tcr-table-plain .tcr-table tbody tr:nth-child(even) { background: transparent; }

/* --- Embeddable "Apply Now" button (member's listing detail page) --------- */
/* Scoped to .page-wrap so it beats `.page-wrap .form-card { margin: 0 auto }`,
   whose margin shorthand would otherwise reset margin-top to 0 and leave this
   card touching the one above it. */
.page-wrap .embed-apply-card { margin-top: 1.5rem; }
.embed-preview {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px; margin: 12px 0 18px;
  background: var(--color-field-bg); border: 1px dashed var(--color-border-input);
  border-radius: 10px;
}
.embed-preview-label {
  font-size: 0.78rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-muted);
}
/* Scoped to .form-card and with explicit border/letter-spacing/width so the
   <button> keeps the exact embedded-button look, beating the filled
   `.form-card button` style (and its mobile width:100% rule). */
.form-card .embed-preview-btn {
  display: inline-block; width: auto; padding: 12px 24px;
  background: var(--color-primary); color: #fff; font-size: 15px;
  font-weight: 600; letter-spacing: normal; text-decoration: none;
  border: 0; border-radius: 8px; cursor: pointer;
}
.form-card .embed-preview-btn:hover { background: var(--color-primary-light); color: #fff; }
textarea.embed-code {
  width: 100%; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular,
  Menlo, Consolas, monospace; font-size: 0.82rem; line-height: 1.5;
  padding: 12px 14px; border: 1px solid var(--color-border-input);
  border-radius: 8px; background: var(--color-surface); color: var(--color-text);
  resize: vertical;
}

/* ===========================================================================
   Admin member edit — per-card saves + focused success ticks
   (apps/pages/templates/pages/admin/member_profile.html)
   =========================================================================== */

/* "Send password reset email" block beneath the password fields — set off
   from the credential inputs by a hairline divider. */
.credential-reset {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid var(--color-border);
}
.credential-reset .subheader-note { margin-top: 0; margin-bottom: 14px; max-width: 60ch; }

/* Company/organisation block within the combined "Member Details" card — set
   off from the personal fields by a hairline divider and a small subheading. */
.details-company {
  margin-top: 26px; padding-top: 22px;
  border-top: 1px solid var(--color-border);
}
/* On the admin member profile the company block sits at the TOP of the card
   (right under the "Member Details" heading), so the separating line belongs
   BELOW it — above the first name / personal fields — not above it. Drop the
   top border (no line under the heading) and add a bottom one instead. */
.member-edit-page .details-company {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  margin-bottom: 26px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--color-border);
}
.form-subheading {
  margin: 0 0 16px; font-size: 1rem; font-weight: 700;
  color: var(--color-text);
}

/* Success confirmation (green border/label/tick) only on required fields.
   Optional fields no longer light up green just for holding a value, so
   editing a fully-populated member isn't met with a wall of ticks. */
.member-edit-page .floating-label input:not([required]):not(:placeholder-shown):valid:not(:focus) {
  border-color: var(--color-border-input);
}
.member-edit-page .floating-label input:not([required]):not(:placeholder-shown):valid:not(:focus) + .label-text {
  color: var(--color-muted);
}
.member-edit-page .floating-label input:not([required]):not(:placeholder-shown):valid ~ .tick {
  display: none;
}

/* Company/organisation sub-section is the exception: it's only filled in for
   members flagged as a company, so a green border/label/tick there is a wanted
   confirmation that the details are captured, not part of the "wall of ticks"
   the rule above avoids. Re-enable the success styling for its fields. */
.member-edit-page .details-company .floating-label input:not(:placeholder-shown):valid:not(:focus) {
  border-color: var(--color-success);
}
.member-edit-page .details-company .floating-label input:not(:placeholder-shown):valid:not(:focus) + .label-text {
  color: var(--color-success);
}
.member-edit-page .details-company .floating-label input:not(:placeholder-shown):valid ~ .tick {
  display: block;
}

/* ===== "Help with this report" — floating button, menu & modal (Option C) =====
   Shown on the Tenant, Public and Commercial Check reports. Posts to
   pages:report_enquiry (see apps/pages/templates/pages/_report_help.html). */
.rh-root {
  position: fixed;
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.rh-fab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(30, 64, 175, 0.34);
  transition: background 0.2s ease;
}
.rh-fab:hover { background: var(--color-primary-light); }
.rh-fab svg { width: 17px; height: 17px; }
.rh-menu {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 7px;
  width: 248px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
}
.rh-mi {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 11px;
  border-radius: 8px;
  font-family: inherit;
}
.rh-mi:hover { background: var(--color-field-bg); }
.rh-mi-ico { flex: none; display: grid; place-items: center; }
.rh-mi-ico svg { width: 18px; height: 18px; }
.rh-mi-ico.rh-q { color: var(--color-primary); }
.rh-mi-ico.rh-e { color: var(--color-danger); }
.rh-mi-txt {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
}
.rh-mi-txt small {
  display: block;
  font-weight: 400;
  color: var(--color-muted);
  font-size: 12px;
}

/* Modal */
.rh-ov {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  z-index: 70;
  /* Hidden by default; the [hidden] attribute (toggled in JS) controls
     visibility. A bare `display: flex` here would override [hidden] and leave
     the modal permanently open (Cancel/Close/Escape then do nothing), so only
     show it when not hidden. */
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-left, 0px));
}
.rh-ov:not([hidden]) { display: flex; }
.rh-modal {
  background: var(--color-surface);
  color: var(--color-text);
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.4);
}
.rh-cap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(120deg, var(--color-primary), var(--color-accent));
  color: #fff;
}
.rh-halo {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  display: grid;
  place-items: center;
}
.rh-halo svg { width: 19px; height: 19px; }
.rh-cap-title { margin: 0; font-size: 1.05rem; }
.rh-x {
  margin-left: auto;
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
}
.rh-x:hover { opacity: 1; }
.rh-body { padding: 18px 20px; overflow-y: auto; }

.rh-seg {
  display: flex;
  gap: 4px;
  background: var(--color-field-bg);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 16px;
}
.rh-seg-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  padding: 8px;
  border-radius: 7px;
  color: var(--color-muted);
}
.rh-seg-btn svg { width: 15px; height: 15px; }
.rh-seg-btn.on { background: var(--color-surface); color: var(--color-primary); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }
.rh-seg-btn.on[data-pane="error"] { color: var(--color-danger); }

.rh-ctx {
  background: var(--color-field-bg);
  border: 1px dashed var(--color-border);
  border-radius: 10px;
  padding: 11px 13px;
  margin-bottom: 15px;
  font-size: 12.5px;
}
.rh-ctx-h {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 5px;
}
.rh-ctx-h svg { width: 13px; height: 13px; }
.rh-ctx-row { display: flex; justify-content: space-between; gap: 12px; }
.rh-ctx-row span:first-child { color: var(--color-muted); }
.rh-ctx-row span:last-child { font-weight: 600; text-align: right; }

.rh-field { margin-bottom: 14px; }
.rh-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rh-lbl {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-muted);
  margin-bottom: 5px;
}
.rh-inp {
  width: 100%;
  font-family: inherit;
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-field-bg);
  border: 1.5px solid var(--color-border-input);
  border-radius: 9px;
  padding: 10px 12px;
}
.rh-inp:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.14);
}
.rh-area { min-height: 96px; resize: vertical; }
.rh-foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}

@media (max-width: 440px) {
  .rh-two { grid-template-columns: 1fr; }
  .rh-fab span { display: none; }
  .rh-fab { padding: 13px; }
}
/* --- Tenant Check package cards (/checks/new/) --- */
/* Colour-headed cards, each showing its contents inline. Scoped under
   .pkg-pick so they beat the filled `.form-card button` rule (which sets
   both a blue background and display:inline-block). */
.pkg-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 6px 0 16px; align-items: stretch; }
.pkg-pick .pkg-opt {
  position: relative; display: flex; flex-direction: column; text-align: left;
  border: 2px solid var(--color-border-input, #e2e8f0); background: #fff;
  border-radius: 14px; padding: 0; overflow: hidden; cursor: pointer; color: #0f172a;
  letter-spacing: 0; transition: border-color .12s, box-shadow .12s, transform .12s;
}
.pkg-pick .pkg-opt:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(2,6,23,.08); }
/* Cards are role="button" divs (they hold the Public Check add-on checkbox),
   so give keyboard focus a visible ring. */
.pkg-pick .pkg-opt:focus-visible { outline: 3px solid rgba(30,64,175,.4); outline-offset: 2px; }
/* The global `.form-card button:hover/:focus` rule would paint the whole card
   solid blue; keep the card's own background white in every state (the header
   and body set their own fills, so selection shows via the border/shadow). */
.pkg-pick .pkg-opt,
.pkg-pick .pkg-opt:hover,
.pkg-pick .pkg-opt:focus,
.pkg-pick .pkg-opt:active { background: #fff; }
.pkg-pick .pkg-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 14px 16px; }
.pkg-pick .pkg-opt[data-pkg="public"] .pkg-hd { background: linear-gradient(135deg, #7C3AED, #6d28d9); }
.pkg-pick .pkg-opt[data-pkg="standard"] .pkg-hd { background: #1E40AF; }
.pkg-pick .pkg-opt[data-pkg="advanced"] .pkg-hd { background: linear-gradient(135deg, #1E40AF, #7C3AED); }
.pkg-pick .pkg-hd .pkg-n { font-weight: 800; font-size: 1.02rem; color: #fff; }
.pkg-pick .pkg-hd .pkg-p { font-weight: 800; font-size: 1.02rem; color: #fff; white-space: nowrap; }
.pkg-pick .pkg-hd .pkg-p small { font-weight: 600; font-size: 0.6rem; color: rgba(255,255,255,.82); }
.pkg-pick .pkg-bd { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; background: #fff; }
.pkg-pick .pkg-bd .pkg-sub { color: #475569; font-size: 0.82rem; margin: 0 0 11px; }
.pkg-pick .pkg-bd .pkg-inc-list { gap: 7px; flex: 1; }
.pkg-pick .pkg-bd .pkg-inc-list li { font-size: 0.82rem; }
.pkg-pick .pkg-bd .pub-logos { margin: 0 0 auto; justify-content: flex-start; }
/* In-card "Add Public Check" add-on (Standard / Advanced cards). */
.pkg-addon { margin-top: 12px; display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1.5px solid var(--color-border-input, #e2e8f0); border-radius: 10px; padding: 9px 11px;
  background: #fff; transition: border-color .12s, background .12s; }
.pkg-addon:hover { border-color: #cbd5e1; }
.pkg-addon input[type="checkbox"] { width: 18px; height: 18px; flex: none; accent-color: #1E40AF; cursor: pointer; }
.pkg-addon .pkg-addon-t { flex: 1 1 auto; min-width: 0; font-size: 0.8rem; font-weight: 600; color: #0f172a; }
.pkg-addon .pkg-addon-t small { display: block; font-weight: 500; color: #475569; font-size: 0.72rem; }
.pkg-addon .pkg-addon-p { font-size: 0.78rem; font-weight: 700; color: #1E40AF; white-space: nowrap; }
.pkg-addon.is-on { border-color: #1E40AF; background: #eef2ff; }
/* Select / Selected control — a rounded "check chip" that fills green with a
   tick when its card is chosen. */
.pkg-radio { margin-top: 13px; align-self: flex-start; display: inline-flex; align-items: center; gap: 9px;
  border: 2px solid var(--color-border-input, #e2e8f0); border-radius: 999px; padding: 7px 14px 7px 9px;
  font-size: 0.84rem; font-weight: 700; color: #475569; background: #fff; }
.pkg-radio .pkg-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-border-input, #e2e8f0);
  display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pkg-radio .pkg-dot svg { width: 13px; height: 13px; stroke: #fff; opacity: 0; }
.pkg-pick .pkg-opt[aria-pressed="true"] { border-color: #1E40AF; box-shadow: 0 6px 20px rgba(30,64,175,.16); }
.pkg-pick .pkg-opt[data-pkg="public"][aria-pressed="true"] { border-color: #7C3AED; box-shadow: 0 6px 20px rgba(124,58,237,.18); }
.pkg-pick .pkg-opt[aria-pressed="true"] .pkg-radio { border-color: #16a34a; color: #15803d; background: #f0fdf4; }
.pkg-pick .pkg-opt[aria-pressed="true"] .pkg-dot { background: #16a34a; border-color: #16a34a; }
.pkg-pick .pkg-opt[aria-pressed="true"] .pkg-dot svg { opacity: 1; }
@media (max-width: 680px) { .pkg-pick { grid-template-columns: 1fr; } }

/* `.form-card button { display:inline-block }` would override the hidden
   attribute, so force hidden to win for the toggled Run buttons. */
.form-card .pkg-actions .btn-run[hidden] { display: none !important; }
#pkg-addons[hidden] { display: none; }

.pkg-sub { color: #475569; font-size: 0.92rem; margin: 0 0 12px; }
.pkg-addons { margin: 2px 0 6px; }
.pkg-inc-h { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #64748b; margin-bottom: 8px; }
.pkg-inc-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pkg-inc-list li { font-size: 0.88rem; padding-left: 21px; position: relative; color: #0f172a; }
.pkg-inc-list li::before { content: "\2713"; position: absolute; left: 0; color: #16a34a; font-weight: 800; }
.pkg-add { display: flex; align-items: center; gap: 10px; border: 1px solid var(--color-border-input, #e2e8f0);
  border-radius: 10px; padding: 10px 13px; margin-bottom: 8px; cursor: pointer; }
.pkg-add input[type="checkbox"] { width: 17px; height: 17px; flex: none; }
.pkg-add .pkg-add-t { flex: 1 1 auto; font-weight: 600; font-size: 0.9rem; }
.pkg-add .pkg-add-p { color: #1E40AF; font-weight: 700; font-size: 0.86rem; white-space: nowrap; }

/* The "Add invoice reference" toggle is a text link, not a filled button. */
.form-card button.co-ref-toggle {
  background: none; border: none; padding: 0; width: auto; color: var(--color-primary);
  font-weight: 600; font-size: 0.9rem; letter-spacing: 0; cursor: pointer;
}
.form-card button.co-ref-toggle::before { content: "+ "; font-weight: 800; }
.form-card button.co-ref-toggle:hover { background: none; text-decoration: underline; filter: none; }

.pkg-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 18px 0 14px; }
.pkg-total { font-size: 1.2rem; font-weight: 800; color: #0f172a; }
.pkg-footer .co-save-default { margin: 0; }
.pkg-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pkg-actions .btn-run { background: #1E40AF; color: #fff; border: 2px solid transparent; border-radius: 10px;
  padding: 13px 24px; font-weight: 700; font-size: 14px; letter-spacing: 0.05em; cursor: pointer; }
.pkg-actions .btn-run-pub { background: #7C3AED; }
.pkg-actions .btn-run:hover { filter: brightness(1.06); }