/* ═══════════════════════════════════════════════════════════════════════
   NOIR — the app's look (user choice, 23 Sep 2026, from the redesign
   concepts). Loaded AFTER style.css and only restyles: every id/class the
   app's JavaScript and the tests rely on is unchanged, so behaviour is
   identical. Delete the <link> to noir.css to roll back to the old look.
   Fonts are the self-hosted ones the reports already use: Fraunces
   (headings, figures), Hanken Grotesk (text), JetBrains Mono (labels).
   ═══════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(fonts/HankenGrotesk.ttf) format('truetype');
}

:root, [data-theme="dark"] {
  --bg:        #07080B;
  --bg-2:      #0B0D11;
  --surface:   rgba(18, 20, 26, 0.80);
  --surface-2: rgba(26, 29, 37, 0.72);
  --line:      rgba(214, 179, 106, 0.20);
  --line-2:    rgba(255, 255, 255, 0.07);
  --line-3: rgba(255, 255, 255, 0.13);
  --text:      #EEE9DF;
  --text-2:    #B9B2A5;
  --muted:     #8C8579;
  --input-bg:  #0B0D12;
  --input-bg-focus: #0F1117;
  --header-bg: rgba(7, 8, 11, 0.74);
  --footer-bg: rgba(0, 0, 0, 0.30);
  --table-bg:  rgba(0, 0, 0, 0.22);
  --gold:      #D6B36A;
  --gold-2:    #F6E3AE;
  --gold-deep: #8C6A2E;
  --accent:      #D6B36A;
  --accent-2:    #F6E3AE;
  --accent-deep: #8C6A2E;
  --on-accent:   #1B1406;
  --glow:      rgba(214, 179, 106, 0.22);
  --noir-dust: 214, 179, 106;
  --shadow-2:  0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 50px 100px -50px rgba(0, 0, 0, 0.9);
  --serif: "Fraunces", "Playfair Display", Georgia, serif;
  --sans:  "Hanken Grotesk", "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --r-lg: 26px; --r-md: 18px; --r-sm: 12px;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}
html[data-theme="light"] {
  --bg:        #F2F1ED;
  --bg-2:      #E9E7E1;
  --surface:   rgba(255, 255, 255, 0.86);
  --surface-2: #FAF8F3;
  --line:      rgba(140, 106, 46, 0.26);
  --line-2:    rgba(23, 21, 15, 0.09);
  --line-3: rgba(23, 21, 15, 0.16);
  --text:      #17150F;
  --text-2:    #4A453C;
  --muted:     #6B655B;
  --input-bg:  #FAF9F6;
  --input-bg-focus: #FFFFFF;
  --header-bg: rgba(242, 241, 237, 0.86);
  --footer-bg: #ECEAE4;
  --table-bg:  #FFFFFF;
  --gold:      #9B7730;
  --gold-2:    #CDA955;
  --gold-deep: #6B501D;
  --accent:      #9B7730;
  --accent-2:    #CDA955;
  --accent-deep: #6B501D;
  --on-accent:   #FFF9EA;
  --glow:      rgba(155, 119, 48, 0.18);
  --noir-dust: 155, 119, 48;
  --shadow-2:  0 40px 80px -50px rgba(60, 45, 15, 0.40);
}

/* ── ground: warm light, drifting gold dust (canvas #noir-dust) ─────── */
body {
  font-family: var(--sans);
  font-size: 15.5px;
  background:
    radial-gradient(1100px 620px at 82% -8%, color-mix(in srgb, var(--gold) 16%, transparent), transparent 62%),
    radial-gradient(900px 640px at -12% 42%, color-mix(in srgb, var(--gold-deep) 18%, transparent), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
.bg-mesh, html[data-theme="light"] .bg-mesh { background: transparent; }
.orb { display: none; }
.grain { opacity: 0.35; }
#noir-dust { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }

/* ── header: logo left, nav, tools right ────────────────────────────── */
.site-header { background: var(--header-bg); border-bottom: 1px solid var(--line-2); }
.header-inner { display: flex; align-items: center; gap: 26px; max-width: 1180px; padding: 12px 24px; }
.brand-link { order: -1; justify-self: auto; }
.header-nav { order: 0; display: flex; gap: 26px; margin-left: 6px; }
.header-left { order: 1; margin-left: auto; }
.header-nav a {
  position: relative; font-family: var(--sans); font-weight: 600; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-2); padding: 10px 0;
}
.header-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px;
  background: var(--gold); transform: scaleX(0); transition: transform .35s var(--ease);
}
.header-nav a:hover { color: var(--text); }
.header-nav a:hover::after { transform: scaleX(1); }
.phone {
  border-color: var(--line); color: var(--gold-2); font-family: var(--mono);
  border-radius: 999px; white-space: nowrap;
}
html[data-theme="light"] .phone { color: var(--gold-deep); background: transparent; }
html[data-theme="light"] .phone:hover { border-color: var(--gold); background: transparent; }
.icon-btn { border-radius: 50%; }
.icon-btn:hover { color: var(--gold); border-color: var(--line); }

/* ── hero: big editorial headline, gold-leaf "in minutes." ─────────── */
.hero-inner {
  max-width: 1180px; height: auto; padding: 58px 24px 40px;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center; gap: 40px; justify-content: stretch;
}
.hero-text { text-align: left; }
.eyebrow {
  border-color: var(--line); color: var(--gold-2);
  background: color-mix(in srgb, var(--gold) 6%, transparent);
  letter-spacing: 0.24em;
}
html[data-theme="light"] .eyebrow { color: var(--gold-deep); border-color: var(--line); background: color-mix(in srgb, var(--gold) 6%, transparent); }
html[data-theme="light"] .eyebrow-dot, .eyebrow-dot { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.hero-title {
  font-family: var(--serif); font-weight: 500; white-space: normal;
  font-size: clamp(44px, 6vw, 84px); line-height: 0.98; letter-spacing: -0.02em;
  margin: 22px 0 16px; text-wrap: balance;
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--text); filter: none;
}
.hero-title em {
  position: relative; display: inline-block; font-style: italic; font-weight: 400; white-space: nowrap;
  background: linear-gradient(100deg, var(--gold-deep) 0%, var(--gold) 18%, var(--gold-2) 30%, var(--gold) 42%,
              var(--gold-deep) 54%, var(--gold) 70%, var(--gold-2) 82%, var(--gold) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: noirLeaf 7s ease-in-out 1.2s infinite;
}
.hero-title em::after {
  content: ""; position: absolute; left: 2%; top: 100%; width: 96%; height: 0.22em; margin-top: -0.06em;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'><path d='M4 13 C 70 3, 150 3, 296 10' fill='none' stroke='%23D6B36A' stroke-width='3' stroke-linecap='round'/></svg>") no-repeat 0 0 / 100% 100%;
  clip-path: inset(0 100% 0 0); animation: noirSwash 1.3s var(--ease) .8s forwards;
}
/* The old light theme drew a shimmer box here; the swash replaces it in both themes. */
html[data-theme="light"] .hero-title em::after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 20' preserveAspectRatio='none'><path d='M4 13 C 70 3, 150 3, 296 10' fill='none' stroke='%239B7730' stroke-width='3' stroke-linecap='round'/></svg>") no-repeat 0 0 / 100% 100%;
}
.hero-title em::after, html[data-theme="light"] .hero-title em::after { mix-blend-mode: normal; -webkit-mask-image: none; }
.hero-sub { font-size: 18px; color: var(--text-2); max-width: 44ch; text-align: left; margin-left: 0; margin-right: 0; }
.hero-title em { line-height: 1.1; padding-bottom: 0.08em; }
.card.form .file-drop .lbl { display: block; letter-spacing: 0.16em; line-height: 1.5; }
.hero-art {
  position: relative; left: auto; top: auto; justify-self: center; display: block;
  width: min(100%, 500px); height: 380px; margin-bottom: 34px; opacity: 1;
  perspective: 1300px; text-decoration: none; border-radius: 0;
}
.hero-art:hover, .hero-art:focus-visible { transform: none; }
.stack-in {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 4deg)) rotateY(var(--ry, -12deg)); transition: transform .7s var(--ease);
}
.sheet {
  position: absolute; width: 218px; aspect-ratio: 1 / 1.414; border-radius: 6px; overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
  animation: noirFloat 7s ease-in-out infinite;
}
html[data-theme="light"] .sheet { box-shadow: 0 30px 60px -24px rgba(60, 45, 15, 0.45), 0 0 0 1px rgba(23, 21, 15, 0.08); }
.sheet.s1 { left: 30%; top: 6%; transform: translateZ(60px) rotate(-4deg); background: #0D0E12; animation-delay: -1s; }
.sheet.s2 { left: 6%; top: 14%; transform: rotate(-11deg); background: #F4F1EA; animation-delay: -3s; }
.sheet.s3 { left: 54%; top: 22%; transform: translateZ(-40px) rotate(7deg); background: #16181D; animation-delay: -5s; }
.sheet .pic { position: absolute; left: 0; right: 0; top: 0; height: 46%; background: radial-gradient(120% 90% at 30% 20%, #6b5a3c, #2a241b 55%, #121212); }
.sheet .pic::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0 2px, transparent 2px 18px); }
.s1 .lg { position: absolute; top: 10px; left: 12px; width: 58px; opacity: .9; }
.s1 .cv { position: absolute; left: 14px; right: 14px; bottom: 16px; }
.s1 .cv small { display: block; font: 500 6.5px/1.2 var(--mono); letter-spacing: .2em; color: #C9A961; }
.s1 .cv b { display: block; margin: 6px 0 10px; font: 500 17px/1.08 var(--serif); color: #F3E4B8; overflow-wrap: anywhere; }
.s1 .cv span { display: inline-block; padding: 4px 7px; border: 1px solid rgba(201, 169, 97, 0.5); font: 500 7px/1 var(--mono); color: #EAD7A0; letter-spacing: .08em; }
.s2 .hd { position: absolute; left: 16px; top: 18px; width: 72%; font: 500 13px/1.1 var(--serif); color: #1a1a1a; }
.s2 .tag { position: absolute; left: 16px; top: 60px; font: 500 6px/1 var(--mono); letter-spacing: .2em; color: #8a6a2e; }
.s2 .ln { position: absolute; left: 16px; right: 16px; height: 4px; border-radius: 2px; background: #d9d3c5; }
.s2 .box { position: absolute; left: 16px; right: 16px; bottom: 18px; height: 54px; background: #101114; border-radius: 3px; }
.s2 .box b { position: absolute; left: 10px; top: 14px; font: 500 15px/1 var(--serif); color: #E7CF8F; }
.s3 .tag { position: absolute; left: 14px; top: calc(52% - 16px); font: 500 6px/1 var(--mono); letter-spacing: .22em; color: #C9A961; }
.s3 .hd { position: absolute; left: 14px; right: 14px; top: 52%; font: 500 15px/1.1 var(--serif); color: #EDE6D6; }
.s3 .ln { position: absolute; left: 14px; right: 30px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); }
.stack-cap {
  position: absolute; left: 0; right: 0; bottom: -34px; text-align: center;
  font: 500 10.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}

/* ── cards ──────────────────────────────────────────────────────────── */
.card { isolation: isolate; border-radius: 26px; padding: 40px 42px 38px; border-color: var(--line-2); overflow: visible; min-width: 0; }
.card::before {
  content: ""; position: absolute; left: 8%; right: 8%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .7;
}
.card::after, html[data-theme="light"] .card::after {
  content: ""; position: absolute; inset: 0; height: auto; border-radius: inherit; pointer-events: none; z-index: -1;
  opacity: 0; transition: opacity .4s;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0), color-mix(in srgb, var(--gold) 9%, transparent), transparent 60%);
}
.card:hover::after { opacity: 1; }
.card-head h2 { font-family: var(--serif); font-weight: 500; font-size: 40px; letter-spacing: -0.01em; }
.card-head .num, html[data-theme="light"] .card-head .num {
  color: var(--gold); border-color: var(--line); background: transparent; border-radius: 8px;
}

/* ── form: fields left, documents right ─────────────────────────────── */
.card.form .form-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 20px 26px; }
.card.form .form-grid > label.full:not(.file-drop) { grid-column: 1; }
.card.form .form-grid > .file-drop { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; }
/* Notes runs full width under the Working owners block (1 Oct 2026). */
.card.form .form-grid > label.full.notes-wide:not(.file-drop) { grid-column: 1 / -1; }
.lbl { letter-spacing: 0.2em; }

/* ── numbered sections (owner, 14 Oct 2026): every block runs full width, in
   order; the short fields sit in pairs. Beats the fields-left / documents-right
   rules above. ─────────────────────────────────────────────────────────── */
.card.form .form-grid.stepped > label.full:not(.file-drop),
.card.form .form-grid.stepped > label.full.file-drop,
.card.form .form-grid.stepped > .full { grid-column: 1 / -1; grid-row: auto; }
.card.form .form-grid.stepped > label.full.pair-l:not(.file-drop) { grid-column: 1; }
.card.form .form-grid.stepped > label.full.pair-r:not(.file-drop) { grid-column: 2; }
.form-step { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding-top: 22px;
  border-top: 1px solid var(--line); }
.form-step.first { border-top: 0; padding-top: 4px; margin-top: 0; }
.form-step .step-n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold); color: #14110c; font: 700 16px/1 var(--sans); }
.form-step h3 { margin: 0; font: 500 20px/1.2 var(--serif); color: var(--text); }
.form-step h3 small { display: block; margin-top: 3px; font: 400 13.5px/1.4 var(--sans); color: var(--muted); }
.need-list { margin: 0 0 4px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(214, 179, 106, 0.06); }
.need-list strong { display: block; margin-bottom: 8px; font: 600 12px/1.4 var(--sans); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold); }
.need-list ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px;
  font-size: 14.5px; color: var(--text); }
.need-list li::before { content: "\2713"; color: var(--gold); font-weight: 700; margin-right: 8px; }
.need-list li small { color: var(--muted); }

/* ── working owners (intake form) ───────────────────────────────────── */
.owners-block .lbl { display: block; }
.owners-q { font: 500 15px/1.4 var(--sans); color: var(--text); margin: 2px 0; }
.owners-help { font-size: 13px; color: var(--muted); margin: 0 0 12px; line-height: 1.5; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button {
  border: 1px solid var(--line-3); border-radius: 999px; padding: 9px 16px; background: transparent;
  font: 500 13.5px/1.2 var(--sans); color: var(--text); cursor: pointer; white-space: nowrap;
  transition: border-color .2s, background-color .2s, color .2s;
}
.seg button:hover { border-color: var(--gold); }
.seg button:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--glow); border-color: var(--gold); }
.seg button[aria-pressed="true"] {
  border-color: var(--gold); color: var(--gold-2); background: color-mix(in srgb, var(--gold) 10%, transparent);
}
html[data-theme="light"] .seg button[aria-pressed="true"] { color: var(--gold-deep); }
.owner-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.owner-card {
  border: 1px solid var(--line-2); border-radius: 14px; padding: 16px 18px 18px; margin-top: 12px;
  background: color-mix(in srgb, var(--gold) 3%, transparent);
}
.owner-card h4 { margin: 0; font: 500 14.5px/1.3 var(--sans); color: var(--gold-2); }
html[data-theme="light"] .owner-card h4 { color: var(--gold-deep); }
.owner-card .sub { font-size: 12.5px; color: var(--muted); margin: 3px 0 12px; }
.owner-card .f { display: block; font-size: 12.5px; color: var(--muted); margin: 0 0 6px; }
.owner-card input, .owner-card select { padding: 11px 12px; font-size: 14px; border-radius: 12px; }
.owner-card select { padding-right: 34px; border-color: var(--line-2); background-color: var(--input-bg); }
.owner-card .two { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 12px; }
.owner-card .two.main { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); }
.owner-card .rowgap { margin-top: 12px; }
.owner-card .pay { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: end; }
.owners-fine { font-size: 12.5px; color: var(--muted); margin: 10px 2px 0; line-height: 1.5; }
.owners-more {
  margin-top: 12px; background: none; border: 0; padding: 0; cursor: pointer;
  font: 500 13px/1.3 var(--sans); color: var(--gold); text-decoration: underline; text-underline-offset: 3px;
}
.owners-managed { max-width: 560px; }
.owners-note { font-size: 12.5px; color: var(--muted); margin: 6px 0 0; line-height: 1.5; }
@media (max-width: 820px) {
  .owner-cards, .owner-card .two, .owner-card .two.main, .owner-card .pay { grid-template-columns: minmax(0, 1fr); }
}
.form-grid input, .form-grid textarea, .industry-override select {
  border-radius: 14px; border-color: var(--line-2); background: var(--input-bg);
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.form-grid input:focus, .form-grid textarea:focus, .industry-override select:focus {
  border-color: var(--gold); background: var(--input-bg-focus); box-shadow: 0 0 0 4px var(--glow); outline: none;
}
.drop-hint {
  flex: 1; flex-direction: column; justify-content: center; text-align: center; gap: 12px; min-height: 200px;
  border: 0; border-radius: 18px;
  background:
    linear-gradient(90deg, var(--line) 50%, transparent 0) repeat-x 0 0 / 14px 1.5px,
    linear-gradient(90deg, var(--line) 50%, transparent 0) repeat-x 0 100% / 14px 1.5px,
    linear-gradient(0deg, var(--line) 50%, transparent 0) repeat-y 0 0 / 1.5px 14px,
    linear-gradient(0deg, var(--line) 50%, transparent 0) repeat-y 100% 0 / 1.5px 14px,
    var(--input-bg);
}
.file-drop:hover .drop-hint, .file-drop.drag .drop-hint {
  animation: noirAnts 1.2s linear infinite;
  background-color: color-mix(in srgb, var(--gold) 6%, var(--input-bg));
}
.drop-hint svg {
  width: 56px; height: 56px; padding: 14px; border-radius: 50%; box-sizing: border-box;
  background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--gold);
  transition: transform .45s var(--spring);
}
.file-drop:hover .drop-hint svg { transform: translateY(-4px) scale(1.06); }

/* ── buttons ────────────────────────────────────────────────────────── */
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger { border-radius: 14px; }
.btn-primary {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #EAD08F 0%, #CFA95D 52%, #A9843E 100%); color: #1B1406;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 14px 32px -14px rgba(214, 179, 106, 0.75);
}
.btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-18deg); transition: left .9s var(--ease); pointer-events: none;
}
.btn-primary:hover::after { left: 130%; }
.btn-secondary { background: color-mix(in srgb, var(--bg) 60%, #14161C); border-color: var(--line); color: var(--text); }
html[data-theme="light"] .btn-secondary { background: #FFFFFF; }
.btn-secondary:hover { border-color: var(--gold); }
.action-btn svg, .btn-secondary svg { color: var(--gold); }
.action-btn.is-set { background: color-mix(in srgb, var(--gold) 12%, transparent); border-color: var(--gold); }
.model-indicator { border-color: var(--line); border-radius: 999px; }
.model-indicator .mi-change { color: var(--gold-2); }
html[data-theme="light"] .model-indicator .mi-change { color: var(--gold-deep); }
.export-menu-panel { border-radius: 16px; border-color: var(--line); }

/* ── progress ───────────────────────────────────────────────────────── */
.progress { border: 1px solid var(--line); border-radius: 18px; padding: 22px 22px 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 6%, transparent), transparent); }
.stage-num { width: 34px; height: 34px; }
.stage.active .stage-num, html[data-theme="light"] .stage.active .stage-num {
  background: var(--input-bg); color: var(--gold-2); border-color: var(--gold);
  box-shadow: 0 0 0 6px var(--glow); animation: noirPulse 1.4s ease-in-out infinite;
}
html[data-theme="light"] .stage.active .stage-num { color: var(--gold-deep); }
.stage.done .stage-num, html[data-theme="light"] .stage.done .stage-num {
  background: var(--gold); border-color: var(--gold); color: var(--on-accent);
}
.stage.active .stage-label, html[data-theme="light"] .stage.active .stage-label { color: var(--text); }
.progress-fill, html[data-theme="light"] .progress-fill {
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-2)); box-shadow: 0 0 16px var(--gold);
}
html[data-theme="light"] .progress-status .ps-model { color: var(--gold-deep); border-color: var(--line); background: transparent; }

/* ── results ────────────────────────────────────────────────────────── */
#r-name {
  font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em;
  background: linear-gradient(100deg, #F5EBD2 0%, #FFFFFF 22%, #E9D8AE 40%, #F7EFD9 60%, #D9C290 80%, #F5EBD2 100%);
  background-size: 240% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: noirLeaf 9s ease-in-out infinite;
}
html[data-theme="light"] #r-name {
  background-image: linear-gradient(100deg, #17150F 0%, #3A3220 30%, #6B501D 50%, #17150F 70%, #17150F 100%);
}
.chip { border-radius: 999px; font-size: 11.5px; }
.chip.demand[data-demand="Poor"], .chip.demand[data-demand="Weak"] {
  color: #E7887C; border-color: rgba(231, 136, 124, 0.4); background: rgba(231, 136, 124, 0.08);
}
html[data-theme="light"] .chip.demand[data-demand="Poor"], html[data-theme="light"] .chip.demand[data-demand="Weak"] {
  color: #A33A2C; border-color: rgba(163, 58, 44, 0.35);
}
.notice-warning { border-radius: 16px; border-color: var(--line); background: color-mix(in srgb, var(--gold) 7%, var(--input-bg)); }
.valuation-block { margin-top: 24px; }
.val-card { border-radius: 20px; }
.val-card.primary, html[data-theme="light"] .val-card.primary {
  border-color: var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 9%, transparent), transparent 75%), var(--input-bg);
  box-shadow: 0 28px 60px -34px color-mix(in srgb, var(--gold) 55%, transparent);
}
.val-card.primary::after, html[data-theme="light"] .val-card.primary::after {
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.val-number { font-family: var(--serif); font-weight: 500; font-variant-numeric: tabular-nums; }
.val-number.big, html[data-theme="light"] .val-number.big {
  background: linear-gradient(180deg, var(--gold-2), var(--gold) 55%, var(--gold-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 8px 22px color-mix(in srgb, var(--gold) 30%, transparent));
}

/* the range bar: appraisal band, indicative mid, comparable asking prices */
.noir-range { position: relative; height: 92px; margin: 8px 22px 0; overflow-x: clip; overflow-clip-margin: 20px; }
.noir-range:empty { display: none; }
.nr-rail { position: absolute; left: 0; right: 0; top: 46px; height: 2px; border-radius: 2px; background: var(--line-2); }
.nr-tick { position: absolute; top: 40px; width: 1px; height: 14px; background: var(--line-2); }
.nr-tick.major { top: 34px; height: 26px; background: var(--text-2); opacity: .45; }
.nr-lbl { position: absolute; top: 70px; transform: translateX(-50%); font: 500 10.5px/1 var(--mono); color: var(--muted); white-space: nowrap; }
.nr-band {
  position: absolute; top: 40px; height: 14px; border-radius: 7px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-2), var(--gold-deep));
  box-shadow: 0 0 22px color-mix(in srgb, var(--gold) 55%, transparent);
  animation: noirBand 1.1s var(--ease) .2s both;
}
.nr-mid { position: absolute; top: 10px; width: 0; height: 70px; }
.nr-mid i { position: absolute; left: -1.5px; top: 0; width: 3px; height: 62px; border-radius: 3px; background: var(--gold-2); box-shadow: 0 0 14px var(--gold); }
html[data-theme="light"] .nr-mid i { background: var(--gold-deep); }
.nr-mid i::before { content: ""; position: absolute; left: -6px; top: -8px; width: 15px; height: 15px; border-radius: 50%; background: inherit; box-shadow: 0 0 0 4px var(--glow); }
.nr-comp {
  position: absolute; top: calc(22px - var(--row, 0) * 12px); width: 12px; height: 12px; margin-left: -6px; padding: 0;
  border-radius: 50%; border: 2px solid var(--gold); background: var(--bg); cursor: help;
  transition: transform .3s var(--spring), background-color .2s;
}
.nr-comp:hover, .nr-comp:focus-visible { transform: scale(1.5); background: var(--gold); }
.noir-range-cap { text-align: center; margin: 2px 0 6px; font-family: var(--mono); font-size: 10.5px; }
.noir-range-cap:empty { display: none; }

.section-h { color: var(--gold-2); letter-spacing: 0.24em; }
html[data-theme="light"] .section-h { color: var(--gold-deep); }
.section-h .dot, html[data-theme="light"] .section-h .dot { background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.bar-track { height: 8px; border-radius: 8px; background: var(--line-2); }
.bar-fill, html[data-theme="light"] .bar-fill {
  border-radius: 8px; background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-2));
  box-shadow: 0 0 12px color-mix(in srgb, var(--gold) 45%, transparent);
}
.bar-val, html[data-theme="light"] .bar-val { font-family: var(--serif); font-size: 20px; color: var(--text); }
.table-wrap { border-radius: 16px; }
thead, html[data-theme="light"] thead { background: color-mix(in srgb, var(--gold) 5%, transparent); }
th, html[data-theme="light"] th { color: var(--gold); border-bottom-color: var(--line); }
html[data-theme="light"] th { color: var(--gold-deep); }
tbody tr:hover td, html[data-theme="light"] tbody tr:hover td { background: color-mix(in srgb, var(--gold) 4%, transparent); }
html[data-theme="light"] td a { color: var(--gold-deep); border-bottom-color: var(--line); }
.insights { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.insights li { border-radius: 16px; }
.insights li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.insights li::before, html[data-theme="light"] .insights li::before {
  background: linear-gradient(135deg, var(--gold-2), var(--gold-deep)); box-shadow: none; border-radius: 4px;
}
html[data-theme="light"] .insights li:hover { border-color: var(--line); background: color-mix(in srgb, var(--gold) 4%, transparent); }
.site-footer { border-top: 1px solid var(--line-2); }

/* ── buttons & fields, finished to the concept (display only) ─────── */
/* Every text field in the app, Settings included. */
input[type=text], input[type=url], input[type=password], input[type=email], input[type=search], textarea, select {
  width: 100%; border: 1px solid var(--line-2); color: var(--text); font-family: inherit;
  border-radius: 14px; border-color: var(--line-2); background-color: var(--input-bg);
  padding: 15px 16px; font-size: 15.5px;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
select { padding-right: 40px; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:hover, textarea:hover, select:hover { border-color: var(--line-3); }
input:focus, textarea:focus, select:focus {
  border-color: var(--gold); background-color: var(--input-bg-focus); box-shadow: 0 0 0 4px var(--glow); outline: none;
}
/* The PIN boxes are three to a row: keep them compact so the hint text fits. */
.pin-field input { padding: 11px 12px; font-size: 13.5px; border-radius: 12px; }
.archive-actions .btn-ghost { flex: none; white-space: nowrap; min-height: 40px; padding: 0 14px; font-size: 13px; border-radius: 12px; }
.archive-actions { align-items: center; flex-wrap: nowrap; max-width: 100%; }
#archive-search { flex: 0 1 220px; width: auto; min-width: 120px; padding: 10px 14px; font-size: 14px; border-radius: 12px; }
.lbl em { color: var(--muted); }
.lbl .lbl-req { color: var(--gold); }
.lbl .lbl-note { color: var(--muted); }

/* Buttons: one height, one weight. Gold = the main action, gold outline = the
   buyer report, dark = other actions, ghost = start again. */
.btn-primary, .btn-secondary, .btn-ghost, .btn-danger {
  min-height: 48px; padding: 0 20px; border-radius: 14px;
  font-family: var(--sans); font-weight: 700; font-size: 14.5px; letter-spacing: .005em;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
}
.btn-primary:hover, .btn-secondary:hover, .btn-ghost:hover { transform: translateY(-1px); }
.btn-primary:active, .btn-secondary:active, .btn-ghost:active { transform: translateY(1px) scale(.99); }
.btn-primary svg { transition: transform .35s var(--ease); }
.btn-primary:hover svg:last-child { transform: translateX(4px); }
.btn-primary:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 18px 40px -12px rgba(214, 179, 106, 0.85); }
.export-menu-btn.btn-primary {
  background: color-mix(in srgb, var(--gold) 9%, transparent); border: 1px solid var(--gold);
  color: var(--gold-2); box-shadow: none;
}
.export-menu-btn.btn-primary::after { display: none; }
.export-menu-btn.btn-primary:hover { background: color-mix(in srgb, var(--gold) 16%, transparent); box-shadow: none; }
html[data-theme="light"] .export-menu-btn.btn-primary { color: var(--gold-deep); }
.btn-secondary:hover { background: color-mix(in srgb, var(--bg) 60%, #14161C); }
html[data-theme="light"] .btn-secondary:hover { background: #FFFFFF; }
.btn-ghost { background: transparent; border: 1px solid var(--line-2); color: var(--text-2); }
.btn-ghost:hover { border-color: var(--line-3); color: var(--text); background: transparent; }
.btn-danger {
  background: color-mix(in srgb, var(--bad) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--bad) 50%, transparent); color: var(--bad);
}
.export-menu-label { gap: 10px; }
/* A drawn chevron in place of the letter "v". */
.export-menu-btn .chev {
  font-size: 0; width: 7px; height: 7px; margin: -3px 0 0 4px; opacity: .75;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
}
.export-menu.open .chev { transform: translateY(3px) rotate(-135deg); }
.export-menu-panel { padding: 8px; background: var(--input-bg); }
.export-menu-item { border-radius: 10px; }

/* Light theme: the old navy buttons, drop box and card glow become gold. */
html[data-theme="light"] .btn-primary, html[data-theme="light"] .btn-primary:hover {
  background: linear-gradient(180deg, #EAD08F 0%, #CFA95D 52%, #A9843E 100%); color: #1B1406;
  border-color: transparent; text-shadow: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 14px 32px -14px rgba(155, 119, 48, 0.6);
}
html[data-theme="light"] .btn-primary svg { color: currentColor; }
html[data-theme="light"] .btn-secondary, html[data-theme="light"] .btn-secondary:hover {
  color: var(--text); background: #FFFFFF; box-shadow: none;
}
html[data-theme="light"] .btn-secondary { border-color: var(--line); }
html[data-theme="light"] .btn-secondary:hover { border-color: var(--gold); }
html[data-theme="light"] .btn-ghost, html[data-theme="light"] .form-cta .quick-clear {
  background: transparent; color: var(--text-2); border-color: var(--line-2);
}
html[data-theme="light"] .btn-ghost:hover, html[data-theme="light"] .form-cta .quick-clear:hover {
  background: transparent; color: var(--text); border-color: var(--line-3);
}
html[data-theme="light"] .export-menu-btn.btn-primary,
html[data-theme="light"] .export-menu-btn.btn-primary:hover {
  background: color-mix(in srgb, var(--gold) 9%, transparent); border: 1px solid var(--gold); color: var(--gold-deep); box-shadow: none;
}
html[data-theme="light"] .card { border-color: var(--line-2); }
html[data-theme="light"] .card:focus-within { box-shadow: var(--shadow-2), 0 0 0 1px var(--line), 0 0 36px -6px var(--glow); }
html[data-theme="light"] .drop-hint {
  border: 0;
  background:
    linear-gradient(90deg, var(--line) 50%, transparent 0) repeat-x 0 0 / 14px 1.5px,
    linear-gradient(90deg, var(--line) 50%, transparent 0) repeat-x 0 100% / 14px 1.5px,
    linear-gradient(0deg, var(--line) 50%, transparent 0) repeat-y 0 0 / 1.5px 14px,
    linear-gradient(0deg, var(--line) 50%, transparent 0) repeat-y 100% 0 / 1.5px 14px,
    var(--input-bg);
}
html[data-theme="light"] .file-drop:hover .drop-hint, html[data-theme="light"] .file-drop.drag .drop-hint,
html[data-theme="light"] body.page-dragging .file-drop .drop-hint {
  border: 0; box-shadow: none;
  background:
    linear-gradient(90deg, var(--gold) 50%, transparent 0) repeat-x 0 0 / 14px 1.5px,
    linear-gradient(90deg, var(--gold) 50%, transparent 0) repeat-x 0 100% / 14px 1.5px,
    linear-gradient(0deg, var(--gold) 50%, transparent 0) repeat-y 0 0 / 1.5px 14px,
    linear-gradient(0deg, var(--gold) 50%, transparent 0) repeat-y 100% 0 / 1.5px 14px,
    color-mix(in srgb, var(--gold) 6%, var(--input-bg));
  animation: noirAnts 1.2s linear infinite;
}
html[data-theme="light"] .drop-hint svg { color: var(--gold-deep); }

/* Icons on the results-screen actions (drawn by CSS so the JS that rewrites
   their text, e.g. "Photos (3)", keeps them). */
.action-btn::before {
  content: ""; flex: none; width: 16px; height: 16px; background: var(--gold);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
html[data-theme="light"] .action-btn::before { background: var(--gold-deep); }
#industry-change { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/><circle cx='7' cy='7' r='1.5'/></svg>"); }
#text-edit { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z'/></svg>"); }
#photo-edit { --ico: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='8.5' cy='8.5' r='1.5'/><path d='M21 15l-5-5L5 21'/></svg>"); }

/* Model pill: "Change" as a filled gold tab. */
.model-indicator { height: 40px; padding: 0 6px 0 14px; gap: 9px; background: var(--input-bg); }
.model-indicator .mi-change, html[data-theme="light"] .model-indicator .mi-change {
  border-left: 0; margin-left: 2px; padding: 6px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 14%, transparent); font-weight: 600; letter-spacing: .2em;
}

/* "Prepared by": one pill holding the name and the photo tick. */
.prepared-by {
  height: 40px; padding: 0 8px 0 4px; gap: 4px;
  border: 1px solid var(--line-2); border-radius: 999px; background: var(--input-bg);
  transition: border-color .25s, box-shadow .25s;
}
.prepared-by:hover { border-color: var(--line); }
.prepared-by.unset { border-color: var(--gold); box-shadow: 0 0 0 3px var(--glow); }
.prepared-by select, .prepared-by select:hover, .prepared-by select:focus, .prepared-by.unset select {
  border: 0; box-shadow: none; background-color: transparent; padding: 6px 28px 6px 10px;
  background-position: right 8px center; font-size: 13.5px; font-weight: 600; color: var(--text);
}
.prepared-by.unset select { color: var(--gold-2); }
html[data-theme="light"] .prepared-by.unset select { color: var(--gold-deep); }
.prepared-photo { width: 20px; height: 20px; }

/* Franchise label: gold when the business is a franchise. */
.chip.is-franchise { color: var(--gold-2); border-color: var(--line); background: color-mix(in srgb, var(--gold) 8%, transparent); }
html[data-theme="light"] .chip.is-franchise { color: var(--gold-deep); }

/* Chips: the confidence chip reads in gold rather than dim brown. */
.chip.conf[data-conf="medium"] {
  color: var(--gold-2); border-color: var(--line); background: color-mix(in srgb, var(--gold) 8%, transparent);
}
html[data-theme="light"] .chip.conf[data-conf="medium"] { color: var(--gold-deep); }

@keyframes noirLeaf { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }
@keyframes noirSwash { to { clip-path: inset(0 0 0 0); } }
@keyframes noirFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes noirAnts {
  to { background-position: 14px 0, -14px 100%, 0 -14px, 100% 14px, 0 0; }
}
@keyframes noirPulse { 50% { box-shadow: 0 0 0 12px transparent; } }
@keyframes noirBand { from { transform: scaleX(0); opacity: 0; } }

@media (max-width: 1060px) {
  .header-nav { display: none; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .insights { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .hero-art { display: none; }   /* as before Noir: no sample stack on phones */
  .card.form .form-grid { grid-template-columns: minmax(0, 1fr); }
  .card.form .form-grid > label.full:not(.file-drop), .card.form .form-grid > .file-drop { grid-column: 1; grid-row: auto; }
  .card.form .form-grid.stepped > label.full.pair-l:not(.file-drop),
  .card.form .form-grid.stepped > label.full.pair-r:not(.file-drop) { grid-column: 1; }
  .need-list ul { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 28px 20px 24px; }
  .card-head h2 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-title em, #r-name, .sheet, .nr-band { animation: none !important; }
  .hero-title em::after { animation: none; clip-path: none; }
}

/* Change category / Edit report text / Photos under the status line (27 Sep 2026),
   and room for the sticky header when the page scrolls to a card. */
.card.form .action-row { margin: 14px 0 0; }
.form-cta, .card.form, #results { scroll-margin-top: 96px; }

/* ─── phones (6 Oct 2026) ─────────────────────────────────────────────
   1. Fields at 16px: iPhone Safari zooms the page in when a field under 16px is
      tapped, and the customer had to pinch back out after every box. Desktop
      keeps 15.5px (pointer: coarse catches tablets too). :is() lends the selects and
      text boxes the inputs' weight, so the header picker and Change category obey too. */
@media (max-width: 820px), (pointer: coarse) {
  :root :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
            textarea, select) { font-size: 16px; }
  #archive-search { font-size: 16px; }        /* Settings' archive filter has its own (id) size */
}
/* 2. The results tables become one card per row: the financial table was 525px
      wide in a 290px card (the last columns were cut off) and the comparables
      squeezed each description to a word per line. app.js labelCells() gives
      every cell its column's name; empty cells ("—") are left out. */
@media (max-width: 640px) {
  .table-wrap:has(> #r-fin), .table-wrap:has(> #r-comp), .table-wrap:has(> #r-delisted) {
    overflow: visible; border: 0; border-radius: 0; background: none;
  }
  #r-fin, #r-comp, #r-delisted, #r-fin tbody, #r-comp tbody, #r-delisted tbody { display: block; }
  #r-fin thead, #r-comp thead, #r-delisted thead { display: none; }
  #r-fin tr, #r-comp tr, #r-delisted tr {
    display: block; position: relative; margin: 0 0 12px; padding: 14px 16px 10px;
    border: 1px solid var(--line-2); border-radius: 14px; background: var(--table-bg);
  }
  #r-fin td, #r-comp td, #r-delisted td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 7px 0; border: 0; text-align: right; overflow-wrap: anywhere;
  }
  #r-fin td::before, #r-comp td::before, #r-delisted td::before {
    content: attr(data-label); flex: none; max-width: 45%; text-align: left;
    font: 500 11.5px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold);
  }
  #r-fin td:first-child, #r-comp td:first-child, #r-delisted td:first-child {
    display: block; text-align: left; padding: 0 0 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line-2);
  }
  #r-fin td:first-child { font-weight: 600; }
  #r-fin td:first-child::before, #r-comp td:first-child::before, #r-delisted td:first-child::before { content: none; }
  #r-fin td.is-empty, #r-comp td.is-empty, #r-delisted td.is-empty { display: none; }
  #r-comp td.col-remove { position: absolute; top: 6px; right: 6px; padding: 0; }
  #r-comp td.col-remove::before { content: none; }
  #r-comp .comp-remove { width: 40px; height: 40px; }      /* 28px on a desktop: too small for a finger */
  #r-comp tr:has(td.col-remove) td:first-child { padding-right: 48px; }
  #r-fin tbody tr:hover td, #r-comp tbody tr:hover td, #r-delisted tbody tr:hover td { background: none; }
}
/* Hidden tooltips still widened the page: the staff chips' (category, band,
   multiple…) sat 30px past the right edge, so the studio scrolled sideways on a
   phone. There they take no room until tapped, and fit the screen when shown. */
@media (max-width: 820px) {
  [data-tooltip]:not(:hover):not(:focus-visible)::after { display: none; }
  [data-tooltip]::after { max-width: min(280px, calc(100vw - 32px)); }
}
/* The staff header on a phone: the Prepared-by picker read only "Select y…", so the
   logo, gaps and side padding give it room. */
@media (max-width: 480px) {
  .header-inner { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .header-left { gap: 6px; }
  .brand-logo { height: 44px; }
}
/* 3. The smallest labels a little larger, and the footer links tall enough to tap. */
@media (max-width: 640px) {
  .lbl { font-size: 12px; letter-spacing: 0.14em; }
  .val-label { font-size: 11.5px; letter-spacing: 0.22em; }
  .val-sav { font-size: 11.5px; }
  .nr-lbl, .noir-range-cap { font-size: 12px; }
  .footer-meta .micro { font-size: 11.5px; }
  .footer-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; }
}

/* A notice that asks staff to DO something ("Add the operating hours") stands out from the notes
   around it: gold frame and glow, a larger gold title, a solid gold button (owner, 22 Oct 2026). */
.notice-warning.notice-urgent {
  border: 1.5px solid var(--gold);
  border-left-width: 5px;
  background: color-mix(in srgb, var(--gold) 15%, var(--input-bg));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 12%, transparent), 0 14px 34px -18px rgba(214, 179, 106, 0.75);
  padding: 16px 18px;
}
.notice-warning.notice-urgent > svg { color: var(--gold); margin-top: 0; }
.notice-warning.notice-urgent > div > strong { font-size: 16px; color: var(--gold-2); margin-bottom: 4px; }
[data-theme="light"] .notice-warning.notice-urgent > div > strong { color: var(--gold-deep); }
.notice-warning.notice-urgent .muted { color: var(--text); font-size: 13px; }
.notice-warning.notice-urgent .notice-btn { margin-top: 14px; }