@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("/fonts/archivo-latin-wdth.woff2") format("woff2-variations"), url("/fonts/archivo-latin-wdth.woff2") format("woff2");
}

/* Condo Repair Radar — shared tokens and base styles.
   Concept: a field survey sheet. Cool concrete paper, blueprint-navy ink,
   one high-visibility orange used only for "Hot" and the radar sweep. */

:root {
  --paper: #EEF1F2;
  --surface: #FFFFFF;
  --surface-2: #F6F8F9;
  --ink: #0F1E2C;
  --ink-2: #3E4D5A;
  --muted: #5E6C78;
  --line: #CBD3D8;
  --line-strong: #96A3AD;
  --blueprint: #143B62;
  --blueprint-2: #1D5089;
  --grid: rgba(20, 59, 98, 0.08);
  --focus: #1D6FE0;

  --hot: #D8410B;       /* hi-vis orange, darkened for contrast on white */
  --hot-bg: #FCE6DC;
  --warm: #A86A00;
  --warm-bg: #FBEFD3;
  --watch: #1B6A86;
  --watch-bg: #DDEEF4;
  --low: #5E6C78;
  --low-bg: #E7EBEE;
  --ok: #1E7A4C;
  --ok-bg: #DDF2E6;
  --bad: #B3261E;
  --bad-bg: #FBE3E1;

  --radius-s: 4px;
  --radius-m: 8px;
  --shadow-pop: 0 18px 50px rgba(15, 30, 44, 0.22);

  --font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --step--1: 0.8125rem;
  --step-0: 1rem;
  --step-1: 1.1875rem;
  --step-2: 1.5rem;
  --step-3: 2rem;
  --step-4: clamp(2.25rem, 1.4rem + 3.6vw, 3.75rem);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0B141C;
    --surface: #111D28;
    --surface-2: #162533;
    --ink: #E5ECF0;
    --ink-2: #BAC6CF;
    --muted: #8D9BA6;
    --line: #253646;
    --line-strong: #3B5064;
    --blueprint: #0E2740;
    --blueprint-2: #6EA6E0;
    --grid: rgba(110, 166, 224, 0.07);
    --focus: #79B3FF;
    --hot: #FF7A3D; --hot-bg: #3A1E12;
    --warm: #E8B045; --warm-bg: #33280F;
    --watch: #5FB8D6; --watch-bg: #10303C;
    --low: #9AA7B1; --low-bg: #1D2A36;
    --ok: #5BCB8D; --ok-bg: #12301F;
    --bad: #FF8A80; --bad-bg: #3A1716;
    --shadow-pop: 0 18px 50px rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0B141C;
  --surface: #111D28;
  --surface-2: #162533;
  --ink: #E5ECF0;
  --ink-2: #BAC6CF;
  --muted: #8D9BA6;
  --line: #253646;
  --line-strong: #3B5064;
  --blueprint: #0E2740;
  --blueprint-2: #6EA6E0;
  --grid: rgba(110, 166, 224, 0.07);
  --focus: #79B3FF;
  --hot: #FF7A3D; --hot-bg: #3A1E12;
  --warm: #E8B045; --warm-bg: #33280F;
  --watch: #5FB8D6; --watch-bg: #10303C;
  --low: #9AA7B1; --low-bg: #1D2A36;
  --ok: #5BCB8D; --ok-bg: #12301F;
  --bad: #FF8A80; --bad-bg: #3A1716;
  --shadow-pop: 0 18px 50px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.55;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--blueprint-2); text-underline-offset: 0.18em; }
:root[data-theme="dark"] a, :root:not([data-theme="light"]) a { }
h1, h2, h3, h4 { line-height: 1.12; margin: 0 0 0.5em; font-weight: 700; }
p { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: var(--radius-s);
}
.skip:focus { top: 12px; }

.tnum { font-variant-numeric: tabular-nums; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 1.5px solid var(--ink); border-radius: var(--radius-s);
  background: var(--ink); color: var(--paper);
  font-weight: 600; text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--blueprint-2); border-color: var(--blueprint-2); color: #fff; }
.btn.secondary { background: transparent; color: var(--ink); }
.btn.secondary:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink); }
.btn.small { min-height: 36px; padding: 0 12px; font-size: var(--step--1); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.linkish { background: none; border: 0; padding: 0; color: var(--blueprint-2); text-decoration: underline; cursor: pointer; }

/* Tier badges */
.tier { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--step--1); }
.tier::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.tier-Hot { color: var(--hot); }
.tier-Warm { color: var(--warm); }
.tier-Watch { color: var(--watch); }
.tier-Low { color: var(--low); }

.score {
  display: inline-grid; place-items: center;
  width: 44px; height: 32px; border-radius: var(--radius-s);
  font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1rem;
  border: 1.5px solid currentColor;
}
.score.tier-Hot { background: var(--hot-bg); }
.score.tier-Warm { background: var(--warm-bg); }
.score.tier-Watch { background: var(--watch-bg); }
.score.tier-Low { background: var(--low-bg); }
.score::before { display: none; }

/* Form fields */
.field { display: grid; gap: 6px; }
.field > span, .field > label { font-size: var(--step--1); font-weight: 600; color: var(--ink-2); }
input[type=text], input[type=email], input[type=number], input[type=search], select, textarea {
  width: 100%; min-height: 44px; padding: 8px 12px;
  background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: var(--radius-s);
}
textarea { min-height: 80px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); }

.notice {
  border-left: 4px solid var(--warm); background: var(--warm-bg);
  padding: 10px 14px; border-radius: 0 var(--radius-s) var(--radius-s) 0; color: var(--ink);
}
.notice.info { border-color: var(--watch); background: var(--watch-bg); }
.notice.bad { border-color: var(--bad); background: var(--bad-bg); }
.notice.ok { border-color: var(--ok); background: var(--ok-bg); }

.theme-toggle {
  display: inline-grid; place-items: center; width: 40px; height: 40px;
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-s); background: transparent; cursor: pointer;
}
.theme-toggle svg { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}