/* ============================================================================
   Friendship Hills HOA — Research Assistant
   Restyled to the iOR Style Design System (token contract from iOR_Style_DesignSystem.md).
   Plain HTML/CSS port — follows §22 (hand-rolled .cal-shell), §21.9 (default-dark),
   §8 (authority line + disclaimer + eyebrow). Class/ID hooks preserved for app.js.
   ============================================================================ */

/* ---------- Tokens (§2, §11) — light is the deviation, dark is the default ---------- */
:root{
  /* Brand gradients (§2) */
  --cal-appbar-gradient: linear-gradient(135deg,#1B4F72 0%,#154360 40%,#1A5276 100%);
  --cal-authority-gradient: linear-gradient(90deg,#0E2F4D 0%,#1B4F72 40%,#148F77 100%);
  --cal-disclaimer-gradient: linear-gradient(135deg,#0E2F4D 0%,#154360 60%,#1B4F72 100%);

  /* Primary / secondary */
  --cal-primary:#1B4F72; --cal-primary-dark:#154360; --cal-primary-darker:#0E2F4D;
  --cal-primary-light:#21618C; --cal-primary-lighter:#2471A3;
  --cal-primary-wash:rgba(27,79,114,0.08); --cal-primary-wash-2:rgba(27,79,114,0.12);
  --cal-secondary:#148F77; --cal-secondary-light:#1ABC9C; --cal-secondary-wash:rgba(20,143,119,0.08);

  /* Surfaces — warm parchment tiers */
  --cal-canvas:#EFEADF; --cal-background:#F4EFE4; --cal-surface:#FBF7EE;
  --cal-surface-bright:#FFFCF5; --cal-surface-soft:#F7F2E6; --cal-surface-hover:#EDE5D2;
  --cal-surface-sunk:#E7E0CC; --cal-stripe-bg:rgba(27,79,114,0.022);

  /* Ink */
  --cal-ink:#1C2833; --cal-ink-soft:#3E5060; --cal-ink-muted:#5D6D7E;
  --cal-ink-faint:#AEB6BF; --cal-ink-hint:#CAD1D7; --cal-ink-inverse:#FFFFFF;

  /* Borders — warm grey-brown in light */
  --cal-border-subtle:rgba(74,54,28,0.09); --cal-border-medium:rgba(74,54,28,0.14);
  --cal-border-strong:rgba(74,54,28,0.24);
  --cal-border:var(--cal-border-medium); --cal-border-soft:var(--cal-border-subtle);
  --cal-hairline:rgba(255,253,246,0.9);

  /* Status */
  --cal-success:#1E824C; --cal-success-wash:rgba(30,130,76,0.08);
  --cal-warning:#D35400; --cal-warning-wash:rgba(211,84,0,0.08);
  --cal-error:#B03A2E;   --cal-error-wash:rgba(176,58,46,0.08);
  --cal-info:#2471A3;    --cal-info-wash:rgba(36,113,163,0.08);

  /* Spacing (§4) — 4px unit */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-7:32px; --s-8:40px; --s-9:56px; --s-10:72px; --s-11:96px;

  /* Radii */
  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-full:999px;

  /* Fonts (§3) */
  --font-body:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-display:'Playfair Display',Georgia,serif;
  --font-mono:'JetBrains Mono','Cascadia Code',Menlo,monospace;

  /* Shadows (§5) — two-layer: cool teal bloom + warm sepia contact */
  --shadow-xs:0 1px 1px rgba(74,54,28,0.06),0 1px 2px rgba(27,79,114,0.04);
  --shadow-sm:0 1px 2px rgba(74,54,28,0.07),0 2px 6px rgba(27,79,114,0.05),0 1px 1px rgba(74,54,28,0.04);
  --shadow-md:0 2px 3px rgba(74,54,28,0.08),0 10px 28px rgba(27,79,114,0.08),0 4px 10px rgba(27,79,114,0.05);
  --shadow-lg:0 3px 6px rgba(74,54,28,0.10),0 24px 56px rgba(27,79,114,0.14),0 10px 20px rgba(27,79,114,0.07);
  --shadow-focus:0 0 0 3px rgba(20,143,119,0.22);
  --shadow-inset-top:inset 0 1px 0 0 var(--cal-hairline);

  /* Motion */
  --ease:cubic-bezier(0.4,0,0.2,1); --ease-out:cubic-bezier(0,0,0.2,1);
  --dur-fast:150ms; --dur-med:200ms; --dur-slow:350ms;

  /* Card flare gradient (§6) — reused on chat cards, thumbs, login */
  --cal-card-bg:
    radial-gradient(ellipse 260px 170px at 0% 0%, rgba(20,143,119,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 240px 160px at 100% 100%, rgba(217,155,46,0.055) 0%, transparent 72%),
    linear-gradient(180deg, var(--cal-surface-bright) 0%, var(--cal-surface) 60%);
}

[data-theme="dark"]{
  --cal-appbar-gradient: linear-gradient(135deg,#10243B 0%,#0E1D31 45%,#12273E 100%);
  --cal-canvas:#080E1A; --cal-background:#0B1120; --cal-surface:#131B2E;
  --cal-surface-bright:#17203A; --cal-surface-soft:#0E1628; --cal-surface-hover:#1A2340;
  --cal-surface-sunk:#07101F; --cal-stripe-bg:rgba(93,173,226,0.03);

  --cal-ink:#E8ECF1; --cal-ink-soft:#B4BEC9; --cal-ink-muted:#7B8CA3;
  --cal-ink-faint:#4A5568; --cal-ink-hint:#2D3748; --cal-ink-inverse:#0B1120;

  --cal-border-subtle:rgba(93,173,226,0.08); --cal-border-medium:rgba(93,173,226,0.14);
  --cal-border-strong:rgba(93,173,226,0.28); --cal-hairline:transparent;

  --cal-primary:#5DADE2; --cal-primary-dark:#2E86C1; --cal-primary-darker:#1F618C;
  --cal-primary-light:#85C1E9; --cal-primary-lighter:#AED6F1;
  --cal-primary-wash:rgba(93,173,226,0.10); --cal-primary-wash-2:rgba(93,173,226,0.16);
  --cal-secondary:#48C9B0; --cal-secondary-light:#76D7C4; --cal-secondary-wash:rgba(72,201,176,0.10);

  --cal-success:#58D68D; --cal-success-wash:rgba(88,214,141,0.10);
  --cal-warning:#F5B041; --cal-warning-wash:rgba(245,176,65,0.10);
  --cal-error:#EC7063;   --cal-error-wash:rgba(236,112,99,0.10);
  --cal-info:#85C1E9;

  --shadow-inset-top:none;
  --cal-card-bg:
    radial-gradient(ellipse 260px 170px at 0% 0%, rgba(72,201,176,0.10) 0%, transparent 70%),
    radial-gradient(ellipse 240px 160px at 100% 100%, rgba(93,173,226,0.07) 0%, transparent 72%),
    linear-gradient(180deg, var(--cal-surface-bright) 0%, var(--cal-surface) 60%);
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family:var(--font-body); font-size:15px; line-height:1.55; letter-spacing:-0.005em;
  color:var(--cal-ink); background:var(--cal-canvas); -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
/* Body-wide lens-flare bloom (§8) — the off-screen light source that justifies card glows */
body::after{
  content:""; position:fixed; top:-160px; right:-120px; width:480px; height:480px;
  pointer-events:none; z-index:0; border-radius:50%;
  background:radial-gradient(circle, rgba(255,247,225,0.55) 0%, rgba(255,247,225,0) 70%);
  filter:blur(20px);
}
[data-theme="dark"] body::after{
  background:radial-gradient(circle, rgba(93,173,226,0.10) 0%, rgba(93,173,226,0) 70%);
}
.hidden{ display:none !important; }
.muted{ color:var(--cal-ink-muted); }
button{ font:inherit; cursor:pointer; }

/* Focus (§5, §22.3) — visible ring for keyboard only */
*:focus-visible{ outline:none; box-shadow:var(--shadow-focus); }
:focus:not(:focus-visible){ outline:none; }

/* Themed scrollbars */
*{ scrollbar-width:thin; scrollbar-color:var(--cal-border-strong) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:var(--cal-border-strong); border-radius:var(--r-full);
  border:2px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:var(--cal-ink-faint); background-clip:content-box; }

.cal-eyebrow{ font-size:11px; font-weight:700; line-height:1.2; letter-spacing:0.10em;
  text-transform:uppercase; color:var(--cal-ink-muted); }

/* ---------- Login (§6 card) ---------- */
.login{ position:relative; z-index:1; min-height:100dvh; display:flex; align-items:center;
  justify-content:center; padding:20px; background:var(--cal-disclaimer-gradient); }
.login::before{ content:""; position:absolute; inset:0; background:var(--cal-authority-gradient);
  height:3px; }
.login-card{ position:relative; background:var(--cal-card-bg); border:1px solid var(--cal-border-subtle);
  border-radius:var(--r-md); padding:var(--s-8) var(--s-7); width:100%; max-width:400px;
  box-shadow:var(--shadow-inset-top),var(--shadow-lg); display:flex; flex-direction:column; gap:var(--s-3); }
.login-card .brand{ font-family:var(--font-body); text-transform:uppercase; letter-spacing:.10em;
  font-size:11px; color:var(--cal-secondary); font-weight:700; }
.login-card h1{ margin:0; font-size:28px; font-weight:700; line-height:1.15; letter-spacing:-0.022em;
  color:var(--cal-ink); text-shadow:0 1px 0 var(--cal-hairline); }
.login-card .muted{ font-size:13.5px; margin:0 0 var(--s-2); }
.login-card input{ padding:11px 14px; border:1px solid var(--cal-border); border-radius:var(--r-sm);
  font-size:16px; background:var(--cal-surface-bright); color:var(--cal-ink); }
.login-card input:focus{ outline:none; border-color:var(--cal-primary); box-shadow:var(--shadow-focus); }
.login-card button{ background:var(--cal-primary); color:var(--cal-ink-inverse); border:none;
  border-radius:var(--r-sm); padding:11px; font-size:15px; font-weight:600; letter-spacing:0.005em;
  transition:background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease); }
.login-card button:hover{ background:var(--cal-primary-dark); }
.login-card button:active{ transform:translateY(1px); }
.login-error{ color:var(--cal-error); font-size:13px; min-height:16px; }
.google-btn{ display:flex; align-items:center; justify-content:center; gap:10px; padding:11px;
  background:var(--cal-surface-bright); color:var(--cal-ink); border:1px solid var(--cal-border);
  border-radius:var(--r-sm); font-size:15px; font-weight:600; text-decoration:none;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease); }
.google-btn:hover{ border-color:var(--cal-primary); box-shadow:var(--shadow-sm); }
.login-divider{ display:flex; align-items:center; gap:10px; color:var(--cal-ink-faint); font-size:11.5px; }
.login-divider::before,.login-divider::after{ content:""; flex:1; border-top:1px solid var(--cal-border-soft); }
.password-row{ display:flex; flex-direction:column; gap:var(--s-3); }

/* ---------- App shell + locked chrome (§22.1) ---------- */
.app{ position:relative; z-index:1; display:flex; flex-direction:column; height:100dvh; }

/* Authority line + disclaimer stack — first flex children; shell doesn't scroll so they stay put */
.cal-authority-line{ flex:0 0 auto; height:3px; background:var(--cal-authority-gradient); }
.cal-disclaimer{ flex:0 0 auto; min-height:28px; display:flex; align-items:center; justify-content:center;
  padding:5px 16px; background:var(--cal-disclaimer-gradient); color:rgba(255,255,255,0.92);
  font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; text-align:center; }
.cal-disclaimer .sep{ opacity:0.5; margin:0 8px; }

/* App bar */
.topbar{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 var(--s-5); min-height:64px; background:var(--cal-appbar-gradient);
  box-shadow:var(--shadow-sm); }
.title{ display:flex; align-items:center; gap:10px; }
.title .dot{ width:9px; height:9px; border-radius:50%; background:#48C9B0;
  box-shadow:0 0 0 3px rgba(72,201,176,0.28); animation:cal-signal-pulse 2s var(--ease) infinite; }
.title strong{ color:#fff; display:block; line-height:1.15; font-weight:700; font-size:15px; letter-spacing:-0.01em; }
.title .sub{ font-size:11px; font-weight:700; letter-spacing:0.10em; text-transform:uppercase; color:rgba(255,255,255,0.7); }
.controls{ display:flex; align-items:center; gap:var(--s-2); }
.controls select{ padding:7px 10px; border:1px solid rgba(255,255,255,0.25); border-radius:var(--r-sm);
  background:rgba(255,255,255,0.10); color:#fff; font-size:13px; font-family:var(--font-body); }
.controls select option{ color:var(--cal-ink); background:var(--cal-surface); }
.controls select:focus{ outline:none; box-shadow:var(--shadow-focus); border-color:transparent; }

/* Buttons on the app bar (ghost = outlined-on-gradient) */
.ghost{ background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.25); border-radius:var(--r-sm);
  padding:7px 12px; color:#fff; font-size:13px; font-weight:500;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease); }
.ghost:hover{ background:rgba(255,255,255,0.20); border-color:rgba(255,255,255,0.45); }
.icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0;
  font-size:15px; line-height:1; }
.logout-icon{ display:none; font-size:15px; line-height:1; }

@keyframes cal-signal-pulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(72,201,176,0.28); }
  50%{ box-shadow:0 0 0 5px rgba(72,201,176,0.10); } }

/* ---------- Tabs as filter chips (§6 Tabs → chip row) ---------- */
.tabs{ display:flex; gap:var(--s-1); background:rgba(255,255,255,0.10); padding:4px; border-radius:var(--r-sm); }
.tab{ border:none; background:transparent; color:rgba(255,255,255,0.85); padding:6px 14px;
  border-radius:6px; font-size:13px; font-weight:600; letter-spacing:0.005em;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease); }
.tab.active{ background:#fff; color:var(--cal-primary-dark); box-shadow:var(--shadow-xs); }
.tab:hover:not(.active){ background:rgba(255,255,255,0.16); color:#fff; }

.view{ flex:1; min-height:0; display:flex; flex-direction:column; }

/* ---------- Messages ---------- */
.messages{ flex:1; overflow-y:auto; padding:var(--s-7) var(--s-4) var(--s-2); }
.welcome{ max-width:760px; margin:var(--s-5) auto; text-align:center; }
.welcome h2{ font-size:28px; font-weight:700; letter-spacing:-0.022em; color:var(--cal-ink);
  margin:0 0 var(--s-2); text-shadow:0 1px 0 var(--cal-hairline); }
.welcome .muted{ font-size:14px; line-height:1.55; }
.suggestions{ display:flex; flex-wrap:wrap; gap:var(--s-2); justify-content:center; margin-top:var(--s-5); }

.chip{ display:inline-flex; align-items:center; background:var(--cal-surface); border:1px solid var(--cal-border);
  border-radius:var(--r-full); padding:8px 14px; font-size:13px; font-weight:600; color:var(--cal-primary);
  box-shadow:var(--shadow-xs); transition:border-color var(--dur-fast) var(--ease),
  background var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease); }
.chip:hover{ border-color:var(--cal-primary); background:var(--cal-primary-wash); transform:translateY(-1px); }

.row{ max-width:820px; margin:0 auto var(--s-5); display:flex; gap:var(--s-3); }
.row.user{ justify-content:flex-end; }
.who{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.10em;
  color:var(--cal-ink-muted); margin-bottom:var(--s-1); }
.bubble{ padding:var(--s-3) var(--s-4); border-radius:var(--r-md); line-height:1.6; font-size:15px;
  word-wrap:break-word; max-width:84%; }
.row.user .bubble{ background:var(--cal-primary); color:var(--cal-ink-inverse); border-bottom-right-radius:var(--r-xs);
  box-shadow:var(--shadow-sm); white-space:pre-wrap; }
.row.assistant .bubble{ background:var(--cal-card-bg); border:1px solid var(--cal-border-subtle);
  border-bottom-left-radius:var(--r-xs); box-shadow:var(--shadow-inset-top),var(--shadow-sm); position:relative; }
.bubble.thinking{ color:var(--cal-ink-muted); font-style:italic; }
.row.user .who{ color:rgba(255,255,255,0.72); }

/* markdown rendered inside assistant bubbles (.body) */
.bubble .body > :first-child{ margin-top:0; }
.bubble .body > :last-child{ margin-bottom:0; }
.bubble strong{ color:var(--cal-ink); font-weight:700; }
.bubble code{ font-family:var(--font-mono); background:var(--cal-surface-soft); border:1px solid var(--cal-border-subtle);
  padding:1px 5px; border-radius:var(--r-xs); font-size:12.5px; }
.bubble pre{ background:var(--cal-surface-soft); border:1px solid var(--cal-border-subtle); border-radius:var(--r-sm);
  padding:var(--s-3); overflow-x:auto; }
.bubble pre code{ background:none; border:none; padding:0; }
.bubble ul,.bubble ol{ margin:var(--s-2) 0; padding-left:var(--s-5); }
.bubble li{ margin:2px 0; }
.bubble h3{ font-size:15px; font-weight:600; color:var(--cal-ink); margin:var(--s-3) 0 var(--s-1); letter-spacing:-0.008em; }
.bubble a{ color:var(--cal-primary); }
.row.user .bubble strong{ color:#fff; }
.row.user .bubble code{ color:#fff; background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.25); }
.row.user .bubble a{ color:#fff; text-decoration:underline; }

.tool-note{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600;
  color:var(--cal-warning); background:var(--cal-warning-wash); border:1px solid var(--cal-warning);
  border-radius:var(--r-sm); padding:4px 10px; margin-bottom:var(--s-2); }
.sources{ margin-top:var(--s-3); border-top:1px dashed var(--cal-border); padding-top:var(--s-2); }
.sources .lbl{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.10em;
  color:var(--cal-ink-muted); margin-bottom:var(--s-1); }
.sources a{ display:block; font-family:var(--font-mono); font-size:12.5px; color:var(--cal-primary);
  text-decoration:none; margin:2px 0; word-break:break-all; }
.sources a:hover{ text-decoration:underline; }

.disclaimer{ max-width:820px; margin:0 auto var(--s-4); font-size:11px; color:var(--cal-ink-muted); text-align:center; }

/* ---------- Composer ---------- */
.composer{ flex:0 0 auto; display:flex; gap:var(--s-3); padding:var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
  background:var(--cal-surface-soft); border-top:1px solid var(--cal-border-soft); }
.composer textarea{ flex:1; resize:none; max-height:180px; padding:11px 14px; border:1px solid var(--cal-border);
  border-radius:var(--r-sm); font-size:15px; line-height:1.4; font-family:var(--font-body);
  background:var(--cal-surface-bright); color:var(--cal-ink); }
.composer textarea::placeholder{ color:var(--cal-ink-faint); }
.composer textarea:focus{ outline:none; border-color:var(--cal-primary); box-shadow:var(--shadow-focus); }
.composer button{ background:var(--cal-primary); color:var(--cal-ink-inverse); border:none; border-radius:var(--r-sm);
  padding:0 22px; font-size:14px; font-weight:600; letter-spacing:0.005em;
  transition:background var(--dur-fast) var(--ease); }
.composer button:hover{ background:var(--cal-primary-dark); }
.composer button:disabled{ background:var(--cal-ink-faint); cursor:default; }

.spin{ display:inline-block; width:12px; height:12px; border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  border-radius:50%; animation:spin .7s linear infinite; vertical-align:-1px; }
.tool-note .spin{ border:2px solid var(--cal-warning); border-top-color:transparent; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ---------- Browse (§7 data-table vocabulary for prose tables) ---------- */
.browse-toolbar{ flex:0 0 auto; display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3) var(--s-4);
  background:var(--cal-surface-soft); border-bottom:1px solid var(--cal-border-soft); flex-wrap:wrap; }
.browse-toolbar #docSearch{ flex:1; min-width:180px; padding:9px 12px; border:1px solid var(--cal-border);
  border-radius:var(--r-sm); font-size:14px; font-family:var(--font-body); background:var(--cal-surface-bright); color:var(--cal-ink); }
.browse-toolbar #docSearch:focus{ outline:none; border-color:var(--cal-primary); box-shadow:var(--shadow-focus); }
.browse-toolbar .ghost{ background:var(--cal-surface); border:1px solid var(--cal-border); color:var(--cal-ink-soft); }
.browse-toolbar .ghost:hover{ border-color:var(--cal-primary); color:var(--cal-primary); background:var(--cal-primary-wash); }
#docSearchInfo{ font-size:12px; white-space:nowrap; }
#docMeta{ font-size:12px; }
#tocToggle{ display:none; }

.browse-body{ flex:1; min-height:0; display:flex; }
.toc-overlay{ display:none; }  /* only a drawer backdrop on mobile (see responsive) */
.toc{ width:300px; flex:0 0 auto; overflow-y:auto; border-right:1px solid var(--cal-border-soft);
  background:var(--cal-surface-soft); padding:var(--s-4) var(--s-2) var(--s-7); }
.toc a{ display:block; text-decoration:none; color:var(--cal-ink-soft); font-size:13px; line-height:1.35;
  padding:5px 8px; border-radius:var(--r-xs); border-left:3px solid transparent;
  transition:background var(--dur-fast) var(--ease); }
.toc a:hover{ background:var(--cal-surface-hover); color:var(--cal-ink); }
.toc a.active{ background:var(--cal-primary-wash); border-left-color:var(--cal-primary); color:var(--cal-primary); font-weight:600; }
.toc a.lvl1{ font-weight:700; color:var(--cal-ink); margin-top:var(--s-3); }
.toc a.lvl2{ padding-left:var(--s-4); }
.toc a.lvl3{ padding-left:26px; color:var(--cal-ink-muted); }

.doc{ flex:1; overflow-y:auto; padding:var(--s-6) var(--s-8) var(--s-11); max-width:900px; }
.doc h1{ font-size:28px; font-weight:700; letter-spacing:-0.022em; color:var(--cal-ink);
  border-bottom:2px solid var(--cal-primary); padding-bottom:var(--s-2); margin:var(--s-7) 0 var(--s-4);
  text-shadow:0 1px 0 var(--cal-hairline); }
.doc h1:first-child{ margin-top:0; }
.doc h2{ font-size:20px; font-weight:700; letter-spacing:-0.015em; color:var(--cal-ink); margin:var(--s-6) 0 var(--s-3); }
.doc h3{ font-size:16px; font-weight:600; letter-spacing:-0.008em; color:var(--cal-ink); margin:var(--s-5) 0 var(--s-2); }
.doc h4{ font-size:14px; font-weight:600; color:var(--cal-ink-soft); margin:var(--s-4) 0 var(--s-1); }
.doc p{ margin:var(--s-2) 0; line-height:1.65; color:var(--cal-ink-soft); }
.doc ul,.doc ol{ margin:var(--s-2) 0; padding-left:22px; line-height:1.65; color:var(--cal-ink-soft); }
.doc li{ margin:var(--s-1) 0; }
.doc strong{ color:var(--cal-ink); font-weight:700; }
.doc code{ font-family:var(--font-mono); background:var(--cal-surface-soft); border:1px solid var(--cal-border-subtle);
  padding:1px 6px; border-radius:var(--r-xs); font-size:13px; }
.doc a{ color:var(--cal-primary); }
.doc hr{ border:none; border-top:1px solid var(--cal-border); margin:var(--s-6) 0; }
.doc blockquote{ margin:var(--s-3) 0; padding:var(--s-3) var(--s-4); border-left:4px solid var(--cal-secondary);
  background:var(--cal-secondary-wash); border-radius:0 var(--r-sm) var(--r-sm) 0; color:var(--cal-ink-soft); }
/* prose tables → .cal-data-table treatment (§7) */
.doc table{ border-collapse:collapse; width:100%; margin:var(--s-4) 0; font-size:13.5px; }
.doc th,.doc td{ padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--cal-border-subtle);
  text-align:left; vertical-align:top; color:var(--cal-ink-soft); }
.doc th{ background:var(--cal-surface-soft); color:var(--cal-ink-muted); font-size:11px; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; border-bottom:2px solid var(--cal-border-medium); }
.doc tbody tr:nth-child(even) td{ background:var(--cal-stripe-bg); }
.doc tbody tr:hover td{ background:var(--cal-surface-hover); }
.doc :target{ scroll-margin-top:14px; }
.doc mark{ background:rgba(245,176,65,0.45); color:inherit; border-radius:2px; padding:0 1px; }
.doc mark.current{ background:var(--cal-warning); color:#fff; box-shadow:0 0 0 2px var(--cal-warning-wash); }

/* ---------- Lot Maps gallery (§6 cards) ---------- */
.maps-toolbar{ flex:0 0 auto; display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3) var(--s-4);
  background:var(--cal-surface-soft); border-bottom:1px solid var(--cal-border-soft); }
.maps-toolbar strong{ color:var(--cal-ink); }
.maps-toolbar #mapsInfo{ flex:1; font-size:12px; }
.maps-toolbar .ghost{ background:var(--cal-surface); border:1px solid var(--cal-border); color:var(--cal-ink-soft); }
.maps-toolbar .ghost:hover{ border-color:var(--cal-primary); color:var(--cal-primary); background:var(--cal-primary-wash); }
.gallery{ flex:1; min-height:0; overflow-y:auto; padding:var(--s-5); display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:var(--s-4); align-content:start; }
.gallery .empty{ grid-column:1/-1; text-align:center; color:var(--cal-ink-muted); margin-top:var(--s-8); }
.thumb{ background:var(--cal-card-bg); border:1px solid var(--cal-border-subtle); border-radius:var(--r-md);
  overflow:hidden; cursor:zoom-in; display:flex; flex-direction:column;
  box-shadow:var(--shadow-inset-top),var(--shadow-sm);
  transition:box-shadow var(--dur-med) var(--ease),border-color var(--dur-med) var(--ease),transform var(--dur-med) var(--ease); }
.thumb:hover{ box-shadow:var(--shadow-inset-top),var(--shadow-md); border-color:var(--cal-border-medium); transform:translateY(-2px); }
.thumb img{ width:100%; height:160px; object-fit:cover; display:block; background:var(--cal-surface-sunk); }
.thumb .cap{ padding:var(--s-2) var(--s-3); font-family:var(--font-mono); font-size:12px; color:var(--cal-ink-soft); word-break:break-word; }

/* ---------- Lightbox (§6 modal — overlay + blur) ---------- */
.lightbox{ position:fixed; inset:0; z-index:1030; background:rgba(15,37,48,.8); backdrop-filter:blur(6px);
  display:flex; flex-direction:column; }
.lb-bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); padding:var(--s-3) var(--s-4); color:#fff; }
.lb-name{ font-family:var(--font-mono); font-size:13px; opacity:.9; word-break:break-all; }
.lb-actions{ display:flex; gap:var(--s-2); }
.lb-actions button{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-sm); min-width:38px; height:34px; font-size:16px; line-height:1;
  transition:background var(--dur-fast) var(--ease); }
.lb-actions button:hover{ background:rgba(255,255,255,.24); }
.lb-stage{ flex:1; overflow:hidden; display:flex; align-items:center; justify-content:center; touch-action:none; }
.lb-stage img{ max-width:100%; max-height:100%; transform-origin:center center; user-select:none;
  -webkit-user-drag:none; will-change:transform; cursor:grab; border-radius:var(--r-xs); }
.lb-stage img.dragging{ cursor:grabbing; }
.lb-hint{ text-align:center; color:rgba(255,255,255,.67) !important; font-size:11px; padding:var(--s-2) 0 var(--s-3); }

/* ---------- Chat toolbar (Save / Export) ---------- */
.chat-toolbar{ flex:0 0 auto; display:flex; align-items:center; gap:var(--s-2); padding:var(--s-2) var(--s-4);
  background:var(--cal-surface-soft); border-bottom:1px solid var(--cal-border-soft); }
.chat-toolbar .spacer{ flex:1; }
.conv-title{ font-weight:600; font-size:13.5px; color:var(--cal-ink); letter-spacing:-0.005em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:55%; }
.save-status{ font-size:12px; white-space:nowrap; }
/* surface-variant ghost buttons used inside toolbars + cards */
.chat-toolbar .ghost,.saved-toolbar .ghost,.saved-card .ghost{ background:var(--cal-surface);
  border:1px solid var(--cal-border); color:var(--cal-ink-soft); }
.chat-toolbar .ghost:hover,.saved-toolbar .ghost:hover,.saved-card .ghost:hover{ border-color:var(--cal-primary);
  color:var(--cal-primary); background:var(--cal-primary-wash); }
.ghost.sm{ padding:5px 11px; font-size:12.5px; font-weight:600; }
.ghost.danger:hover{ border-color:var(--cal-error) !important; color:var(--cal-error) !important; background:var(--cal-error-wash) !important; }

/* ---------- Saved conversations ---------- */
.saved-toolbar{ flex:0 0 auto; display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3) var(--s-4);
  background:var(--cal-surface-soft); border-bottom:1px solid var(--cal-border-soft); }
.saved-toolbar strong{ color:var(--cal-ink); }
.saved-toolbar #savedInfo{ flex:1; font-size:12px; }
.saved-list{ flex:1; min-height:0; overflow-y:auto; padding:var(--s-5); display:flex; flex-direction:column;
  gap:var(--s-3); max-width:900px; width:100%; margin:0 auto; }
.saved-empty{ text-align:center; color:var(--cal-ink-muted); margin-top:var(--s-8); }
.saved-card{ display:flex; align-items:center; gap:var(--s-4); padding:var(--s-4) var(--s-5);
  background:var(--cal-card-bg); border:1px solid var(--cal-border-subtle); border-radius:var(--r-md);
  box-shadow:var(--shadow-inset-top),var(--shadow-sm);
  transition:box-shadow var(--dur-med) var(--ease),border-color var(--dur-med) var(--ease),transform var(--dur-med) var(--ease); }
.saved-card:hover{ box-shadow:var(--shadow-inset-top),var(--shadow-md); border-color:var(--cal-border-medium); transform:translateY(-1px); }
.sc-main{ flex:1; min-width:0; }
.sc-title{ font-size:15px; font-weight:600; color:var(--cal-ink); letter-spacing:-0.008em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sc-meta{ font-family:var(--font-mono); font-size:11.5px; color:var(--cal-ink-muted); margin-top:2px; }
.sc-actions{ display:flex; gap:var(--s-2); flex:0 0 auto; }

/* ---------- House Plans ---------- */
.plans-toolbar{ flex:0 0 auto; display:flex; align-items:center; gap:var(--s-2); padding:var(--s-3) var(--s-4);
  background:var(--cal-surface-soft); border-bottom:1px solid var(--cal-border-soft); flex-wrap:wrap; }
.plans-toolbar strong{ color:var(--cal-ink); }
.plans-toolbar #plansInfo{ font-size:12px; }
.plans-toolbar .spacer{ flex:1; }
.plans-toolbar .ghost,.plan-form .ghost{ background:var(--cal-surface); border:1px solid var(--cal-border); color:var(--cal-ink-soft); }
.plans-toolbar .ghost:hover,.plan-form .ghost:hover{ border-color:var(--cal-primary); color:var(--cal-primary); background:var(--cal-primary-wash); }
.plans-toolbar .ghost.accent,.plan-form .ghost.accent{ border-color:var(--cal-secondary); color:var(--cal-secondary); background:var(--cal-secondary-wash); }
.plans-toolbar .ghost.accent:hover,.plan-form .ghost.accent:hover{ background:var(--cal-secondary); color:#fff; }
.plan-form{ flex:0 0 auto; display:flex; gap:var(--s-2); padding:var(--s-3) var(--s-4); flex-wrap:wrap;
  background:var(--cal-surface-soft); border-bottom:1px solid var(--cal-border-soft); }
.plan-form input{ flex:1 1 180px; min-width:0; padding:9px 12px; border:1px solid var(--cal-border);
  border-radius:var(--r-sm); font-size:14px; font-family:var(--font-body); background:var(--cal-surface-bright); color:var(--cal-ink); }
.plan-form input:focus{ outline:none; border-color:var(--cal-primary); box-shadow:var(--shadow-focus); }
.plans-list{ flex:1; min-height:0; overflow-y:auto; padding:var(--s-5); display:grid;
  grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:var(--s-4); align-content:start; }
.plans-list .empty{ grid-column:1/-1; text-align:center; color:var(--cal-ink-muted); margin-top:var(--s-8); }
.plan-card{ background:var(--cal-card-bg); border:1px solid var(--cal-border-subtle); border-radius:var(--r-md);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-inset-top),var(--shadow-sm);
  transition:box-shadow var(--dur-med) var(--ease),border-color var(--dur-med) var(--ease),transform var(--dur-med) var(--ease); }
.plan-card:hover{ box-shadow:var(--shadow-inset-top),var(--shadow-md); border-color:var(--cal-border-medium); transform:translateY(-2px); }
.plan-card .pc-thumb{ height:130px; background:var(--cal-surface-sunk); display:flex; align-items:center;
  justify-content:center; overflow:hidden; cursor:pointer; }
.plan-card .pc-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.plan-card .pc-kind{ font-family:var(--font-mono); font-size:18px; font-weight:700; letter-spacing:0.2em;
  color:var(--cal-ink-faint); }
.plan-card .pc-body{ padding:var(--s-3) var(--s-3) var(--s-2); flex:1; }
.plan-card .pc-title{ font-size:14px; font-weight:600; color:var(--cal-ink); letter-spacing:-0.008em; word-break:break-word; }
.plan-card .pc-notes{ font-size:12px; color:var(--cal-ink-muted); margin-top:2px; word-break:break-word; }
.plan-card .pc-meta{ font-family:var(--font-mono); font-size:10.5px; color:var(--cal-ink-faint); margin-top:4px; }
.plan-card .pc-actions{ display:flex; gap:var(--s-2); padding:0 var(--s-3) var(--s-3); }
.plan-card .pc-actions .ghost{ flex:1; text-align:center; background:var(--cal-surface); border:1px solid var(--cal-border); color:var(--cal-ink-soft); }
.plan-card .pc-actions .ghost:hover{ border-color:var(--cal-primary); color:var(--cal-primary); }
@media (max-width:600px){
  .plans-list{ grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:var(--s-3); padding:var(--s-3); }
  .plan-form input{ font-size:16px; }
}

/* ---------- Reduced motion (§5) ---------- */
@media (prefers-reduced-motion: reduce){
  .title .dot{ animation:none; }
  *{ transition-duration:0.01ms !important; }
}

/* ---------- Responsive ---------- */

/* Tablet & down — app bar reflows: title + controls on row 1, tabs scroll on row 2 */
@media (max-width:900px){
  .topbar{ flex-wrap:wrap; row-gap:var(--s-2); padding:var(--s-2) var(--s-3); min-height:0; }
  .title{ order:1; min-width:0; }
  .title strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .controls{ order:2; flex:1 1 auto; justify-content:flex-end; min-width:0; }
  .controls select{ flex:0 1 auto; min-width:0; max-width:150px; }
  .tabs{ order:3; flex-basis:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    /* fade the right edge so it's obvious more tabs are off-screen */
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); }
  .tabs::-webkit-scrollbar{ display:none; }
  .tab{ flex:0 0 auto; white-space:nowrap; padding:8px 14px; }
  .title .sub{ display:none; }
  /* scroll-strip affordances inside the builder too */
  .palette, .status-strip{ -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent); }
  /* inspector bottom sheet: grab-handle cue + safe-area padding */
  .inspector::before{ content:""; display:block; flex:0 0 auto; width:36px; height:4px; border-radius:2px;
    background:var(--cal-border-strong); margin:0 auto var(--s-2); }
  .inspector{ padding-bottom:calc(var(--s-4) + env(safe-area-inset-bottom)); }
}
@media (max-width:768px){
  .lb-actions button{ height:44px; min-width:44px; }
}
/* iOS zooms any focused input under 16px — pin the editable fields */
@media (max-width:760px){
  .insp-row input[type="text"], .insp-row input[type="number"],
  .builder-toolbar #layoutName, .login-card input{ font-size:16px; }
}
@media (max-width:480px){
  .title strong{ display:none; }   /* dot alone identifies status; tabs name the app's views */
  .logout-label{ display:none; }
  .logout-icon{ display:inline; }
  #logout{ width:38px; padding:7px 0; text-align:center; }
}

/* Phones / narrow — TOC becomes an off-canvas drawer with a dimmed overlay */
@media (max-width:760px){
  #tocToggle{ display:inline-flex; }
  .toc{ position:fixed; top:0; left:0; bottom:0; width:84%; max-width:320px; height:auto;
    transform:translateX(-100%); transition:transform var(--dur-med) var(--ease);
    z-index:1041; box-shadow:var(--shadow-lg); border-right:1px solid var(--cal-border);
    padding-top:calc(var(--s-5) + env(safe-area-inset-top)); }
  .toc.open{ transform:translateX(0); }
  .toc-overlay{ display:block; position:fixed; inset:0; z-index:1040; background:rgba(8,14,26,0.5);
    opacity:0; pointer-events:none; transition:opacity var(--dur-med) var(--ease); }
  .toc-overlay.open{ opacity:1; pointer-events:auto; }
  .doc{ padding:var(--s-4) var(--s-4) var(--s-9); }
  /* wide prose tables scroll within themselves instead of overflowing the page */
  .doc table{ display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  .gallery{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:var(--s-3); padding:var(--s-3); }
  .thumb img{ height:120px; }
  /* keep form text >=16px so iOS doesn't zoom on focus */
  .composer textarea, .browse-toolbar #docSearch{ font-size:16px; }
}

@media (max-width:600px){
  .bubble{ max-width:92%; }
  .messages{ padding:var(--s-5) var(--s-3) var(--s-2); }
  .welcome h2{ font-size:23px; }
  .controls select{ max-width:130px; }
  .controls #newChat{ display:none; }
  .cal-disclaimer{ letter-spacing:0.04em; line-height:1.2; }
  .cal-disclaimer .full{ display:none; }
  .browse-toolbar #docSearch{ flex-basis:100%; min-width:0; }
  #docMeta,#docSearchInfo{ font-size:11px; }
  .composer textarea{ max-height:120px; }
  /* roomier tap targets */
  .ghost{ padding:9px 12px; }
  .ghost.sm{ padding:8px 12px; font-size:13px; }
  .icon-btn{ width:40px; height:40px; }
  .composer button{ padding:0 18px; }
  /* chat toolbar + saved cards stack cleanly */
  .chat-toolbar{ flex-wrap:wrap; row-gap:var(--s-2); }
  .conv-title{ max-width:100%; flex-basis:100%; }
  .saved-card{ flex-direction:column; align-items:stretch; gap:var(--s-3); }
  .sc-actions{ justify-content:stretch; }
  .sc-actions .ghost{ flex:1; text-align:center; }
  .lb-actions button{ height:40px; min-width:44px; }
}

/* ============================================================
   Home Layout Builder
   ============================================================ */
.builder-toolbar{ flex:0 0 auto; display:flex; align-items:center; gap:var(--s-2); padding:var(--s-2) var(--s-4);
  background:var(--cal-surface-soft); border-bottom:1px solid var(--cal-border-soft); flex-wrap:wrap; }
.builder-toolbar strong{ color:var(--cal-ink); margin-right:var(--s-2); }
.builder-toolbar .spacer{ flex:1; }
.builder-toolbar #layoutName{ width:200px; padding:7px 11px; border:1px solid var(--cal-border); border-radius:var(--r-sm);
  font-size:13px; font-family:var(--font-body); background:var(--cal-surface-bright); color:var(--cal-ink); }
.builder-toolbar #layoutName:focus{ outline:none; border-color:var(--cal-primary); box-shadow:var(--shadow-focus); }
.builder-toolbar #layoutPicker{ padding:7px 9px; border:1px solid var(--cal-border); border-radius:var(--r-sm);
  font-size:13px; background:var(--cal-surface-bright); color:var(--cal-ink); max-width:200px; }
.builder-toolbar .ghost,.inspector .ghost{ background:var(--cal-surface); border:1px solid var(--cal-border); color:var(--cal-ink-soft); }
.builder-toolbar .ghost:hover,.inspector .ghost:hover{ border-color:var(--cal-primary); color:var(--cal-primary); background:var(--cal-primary-wash); }
.builder-toolbar .ghost.accent{ border-color:var(--cal-secondary); color:var(--cal-secondary); background:var(--cal-secondary-wash); font-weight:600; }
.builder-toolbar .ghost.accent:hover{ background:var(--cal-secondary); color:#fff; }
#layoutStatus{ font-size:12px; white-space:nowrap; }

.builder-body{ flex:1; min-height:0; display:flex; }
.builder-map-wrap{ flex:1; min-width:0; position:relative; display:flex; flex-direction:column; }
#builderMap{ flex:1; min-height:0; z-index:0; }

.palette{ flex:0 0 auto; display:flex; gap:var(--s-2); padding:var(--s-2) var(--s-3); overflow-x:auto;
  background:var(--cal-surface-soft); border-bottom:1px solid var(--cal-border-soft); scrollbar-width:thin; }
.palette .chip{ flex:0 0 auto; font-size:12.5px; padding:6px 12px; }
.pal-dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:0; }
.pal-dim{ color:var(--cal-ink-faint); font-family:var(--font-mono); font-size:10.5px; margin-left:4px; }

.draw-controls{ position:absolute; top:var(--s-3); left:50%; transform:translateX(-50%); z-index:600;
  display:flex; align-items:center; gap:var(--s-2); background:var(--cal-card-bg);
  border:1px solid var(--cal-border-subtle); border-radius:var(--r-full);
  box-shadow:var(--shadow-inset-top),var(--shadow-md); padding:6px 8px 6px 14px; max-width:94%; }
.draw-controls .dc-hint{ font-size:12px; color:var(--cal-ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.draw-controls .ghost{ background:var(--cal-surface); border:1px solid var(--cal-border); color:var(--cal-ink-soft); white-space:nowrap; }
.draw-controls .ghost.accent{ border-color:var(--cal-secondary); color:var(--cal-secondary); background:var(--cal-secondary-wash); font-weight:600; }
.draw-controls .ghost.accent:hover{ background:var(--cal-secondary); color:#fff; }
@media (max-width:600px){ .draw-controls .dc-hint{ display:none; } }
.setback-controls{ position:absolute; left:var(--s-3); bottom:var(--s-6); z-index:500;
  background:var(--cal-card-bg); border:1px solid var(--cal-border-subtle); border-radius:var(--r-md);
  box-shadow:var(--shadow-inset-top),var(--shadow-md); padding:var(--s-3) var(--s-4); display:flex; flex-direction:column; gap:6px; }
.setback-controls label{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--cal-ink-soft); cursor:pointer; }
.setback-controls .cal-eyebrow{ cursor:pointer; user-select:none; }
.setback-controls .cal-eyebrow::after{ content:" ▾"; }
.setback-controls.collapsed .cal-eyebrow::after{ content:" ▸"; }
.setback-controls.collapsed label{ display:none; }
.setback-controls.collapsed{ padding:var(--s-2) var(--s-3); }
.setback-controls input{ accent-color:var(--cal-secondary); }
.sb-dot{ display:inline-block; width:14px; height:3px; border-radius:2px; }
.sb-fig{ font-family:var(--font-mono); font-size:10.5px; color:var(--cal-ink-faint); }

.inspector{ flex:0 0 280px; background:var(--cal-surface); border-left:1px solid var(--cal-border-soft);
  padding:var(--s-4); display:flex; flex-direction:column; gap:var(--s-3); overflow-y:auto; }
.insp-row{ display:flex; flex-direction:column; gap:5px; font-size:12px; font-weight:600; color:var(--cal-ink-muted); }
.insp-row input[type="text"],.insp-row input[type="number"]{ padding:8px 10px; border:1px solid var(--cal-border);
  border-radius:var(--r-sm); font-size:14px; font-family:var(--font-body); background:var(--cal-surface-bright); color:var(--cal-ink); }
.insp-row input:focus{ outline:none; border-color:var(--cal-primary); box-shadow:var(--shadow-focus); }
.insp-row input[type="range"]{ accent-color:var(--cal-secondary); }
.insp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-2); }
.insp-area{ font-family:var(--font-mono); font-size:12px; }

.status-strip{ flex:0 0 auto; display:flex; gap:var(--s-2); align-items:center; padding:var(--s-2) var(--s-4);
  background:var(--cal-surface-soft); border-top:1px solid var(--cal-border-soft); overflow-x:auto; white-space:nowrap;
  min-height:40px; scrollbar-width:thin; }
.pill{ flex:0 0 auto; display:inline-flex; align-items:center; padding:4px 11px; border-radius:var(--r-full);
  font-size:12px; font-weight:600; border:1px solid transparent; }
.pill.ok{ background:var(--cal-success-wash); color:var(--cal-success); border-color:var(--cal-success); }
.pill.warn{ background:var(--cal-warning-wash); color:var(--cal-warning); border-color:var(--cal-warning); }
.pill.bad{ background:var(--cal-error-wash); color:var(--cal-error); border-color:var(--cal-error); }
.pill.info{ background:var(--cal-primary-wash); color:var(--cal-primary); border-color:var(--cal-border); }

/* Leaflet chrome — token-driven so dark mode just works (tiles stay aerial) */
.leaflet-container{ background:var(--cal-surface-sunk); font-family:var(--font-body); }
.leaflet-control-zoom a{ background:var(--cal-surface) !important; color:var(--cal-ink) !important;
  border-color:var(--cal-border) !important; }
.leaflet-control-zoom a:hover{ background:var(--cal-surface-hover) !important; }
.leaflet-control-attribution{ background:var(--cal-surface) !important; color:var(--cal-ink-muted) !important; font-size:9px !important; }
.leaflet-control-attribution a{ color:var(--cal-primary) !important; }
.leaflet-tooltip.struct-tip{ background:var(--cal-surface); color:var(--cal-ink); border:1px solid var(--cal-border);
  border-radius:var(--r-xs); font-family:var(--font-body); font-size:11px; font-weight:600; box-shadow:var(--shadow-sm); }
/* dark halo behind structure strokes so they read on any aerial background */
.leaflet-overlay-pane path.struct{ filter:drop-shadow(0 1px 3px rgba(0,0,0,0.9)); }
/* survey-style outer-edge length labels — green to match the parcel lines */
.edge-len{ font-family:var(--font-mono); font-size:11px; font-weight:700; color:#7DFFB2;
  text-shadow:0 1px 3px rgba(0,0,0,.95), 0 0 2px rgba(0,0,0,.95); text-align:center;
  pointer-events:none; white-space:nowrap; }

/* 3D overlay */
.b3d-overlay{ position:fixed; inset:0; z-index:1100; background:#05080f; display:flex; flex-direction:column; }
.b3d-bar{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3); padding:var(--s-3) var(--s-4); color:#fff; }
.b3d-title{ font-size:14px; font-weight:600; }
.b3d-bar button{ background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-sm); padding:7px 14px; font-size:13px; }
.b3d-bar button:hover{ background:rgba(255,255,255,.24); }
#b3dCanvas{ flex:1; min-height:0; width:100%; display:block; touch-action:none; }
/* grade readout panel — what a builder asks: fall across each pad + driveway max grade */
.b3d-grades{ position:absolute; left:var(--s-3); bottom:calc(34px + var(--s-4) + env(safe-area-inset-bottom));
  max-width:300px; background:rgba(10,16,28,0.82); border:1px solid rgba(255,255,255,0.16);
  border-radius:var(--r-md); padding:var(--s-3) var(--s-4); color:#E8ECF1; font-size:12px; line-height:1.5;
  backdrop-filter:blur(4px); }
.b3d-grades .gtitle{ font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:rgba(255,255,255,0.55); margin-bottom:4px; }
.b3d-grades .grow{ display:flex; justify-content:space-between; gap:var(--s-3); }
.b3d-grades .grow b{ color:#7DFFB2; font-family:var(--font-mono); font-weight:600; white-space:nowrap; }
.b3d-grades .grow.warn b{ color:#F5B041; }
@media (max-width:600px){ .b3d-grades{ max-width:220px; font-size:11px; } }
.b3d-hint{ text-align:center; color:rgba(255,255,255,.6) !important; font-size:11px;
  padding:var(--s-2) 0 calc(var(--s-3) + env(safe-area-inset-bottom)); }

@media (max-width:900px){
  .builder-body{ flex-direction:column; }
  .inspector{ position:fixed; left:0; right:0; bottom:0; max-height:45dvh; z-index:1050; flex:none;
    border-left:none; border-top:1px solid var(--cal-border); box-shadow:var(--shadow-lg);
    border-radius:var(--r-lg) var(--r-lg) 0 0; }
}
@media (max-width:600px){
  .builder-toolbar{ row-gap:var(--s-2); }
  .builder-toolbar strong{ display:none; }
  .builder-toolbar #layoutName{ width:auto; flex:1 1 90px; min-width:0; font-size:16px; }
  .builder-toolbar #layoutPicker{ max-width:110px; font-size:13px; }
  #layoutStatus{ flex-basis:100%; order:9; font-size:11px; }
  .setback-controls{ left:var(--s-2); bottom:var(--s-2); padding:var(--s-2) var(--s-3); }
  .setback-controls label{ font-size:11.5px; }
}