/* Housestyle design tokens. Layout concept: an inspection sheet — navy ink on cool paper, findings read like a checklist. */
:root {
  --paper: #F3F5F9; --surface: #FFFFFF; --sunken: #EAEEF4; --line: #D8DFE9; --ink: #15233A; --muted: #56677F;
  --accent: #2563EB; --accent-ink: #FFFFFF; --navy: #1E3A5F; --accent-soft: #E3ECFD;
  --high: #C62828; --high-soft: #FBE9E9; --medium: #B45309; --medium-soft: #FDF1E3; --low: #52627A; --low-soft: #EBEFF5; --ok: #15803D; --ok-soft: #E4F4EA;
  --f-display: 'Archivo', 'Arial Narrow', Arial, sans-serif; --f-body: 'Archivo', Arial, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --r: 10px; --shadow: 0 1px 2px rgba(21, 35, 58, .06), 0 1px 1px rgba(21, 35, 58, .04);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #0D1522; --surface: #142033; --sunken: #0F192A; --line: #26354D; --ink: #E4EBF5; --muted: #93A4BC;
  --accent: #6FA2FF; --accent-ink: #0B1424; --navy: #A9C3E6; --accent-soft: #1A2C4C;
  --high: #FF8A80; --high-soft: #3A1D22; --medium: #F2B366; --medium-soft: #3A2A17; --low: #A7B4C7; --low-soft: #1E2B40; --ok: #6BD691; --ok-soft: #173325;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3); color-scheme: dark } }
:root[data-theme="dark"] {
  --paper: #0D1522; --surface: #142033; --sunken: #0F192A; --line: #26354D; --ink: #E4EBF5; --muted: #93A4BC;
  --accent: #6FA2FF; --accent-ink: #0B1424; --navy: #A9C3E6; --accent-soft: #1A2C4C;
  --high: #FF8A80; --high-soft: #3A1D22; --medium: #F2B366; --medium-soft: #3A2A17; --low: #A7B4C7; --low-soft: #1E2B40; --ok: #6BD691; --ok-soft: #173325;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3); color-scheme: dark }

* { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100% }
html, body { margin: 0 }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px) }
img, svg { max-width: 100% }
[hidden] { display: none !important }
a { color: var(--accent) }

body { background: var(--paper); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.5; font-variation-settings: 'wdth' 100 }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 20px; padding-block: 20px 48px }
h1, h2, h3 { font-family: var(--f-display); font-variation-settings: 'wdth' 82; letter-spacing: -.01em; text-wrap: balance; margin: 0 }
h1 { font-size: 1.35rem; font-weight: 750 }
h2 { font-size: 1.15rem; font-weight: 700 }
h3 { font-size: .98rem; font-weight: 700 }
p { margin: 0 }
.mono { font-family: var(--f-mono); font-size: .8rem }
.muted { color: var(--muted) }
.eyebrow { font-size: .72rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.num { font-variant-numeric: tabular-nums }
button, input, select, textarea { font: inherit; color: inherit }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

/* Generic */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow) }
.pad { padding: 18px }
.stack { display: flex; flex-direction: column; gap: 16px }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap }
.btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); padding: 8px 14px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: .9rem }
.btn:hover { border-color: var(--accent) }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent) }
.btn.small { padding: 4px 10px; font-size: .8rem }
.linkbtn { border: 0; background: none; color: var(--accent); font-weight: 600; cursor: pointer; padding: 0 }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; white-space: nowrap }
.pill.high { background: var(--high-soft); color: var(--high) }
.pill.medium { background: var(--medium-soft); color: var(--medium) }
.pill.low { background: var(--low-soft); color: var(--low) }
.pill.ok { background: var(--ok-soft); color: var(--ok) }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); vertical-align: -2px }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }