/* HeatAhead site theme (docs/design-language.md): one green brand color, a small
   set of bright tints for stat cards, bold ink outlines, hard-shadow hovers.
   The risk map keeps its own pale-blue to deep-blue scale (map.html). */
@font-face { font-family:"Bricolage Grotesque"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url(/static/fonts/bricolage-grotesque-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:"Bricolage Grotesque"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url(/static/fonts/bricolage-grotesque-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  --bg:#f4faf7; --panel:#ffffff; --well:#eef6f1; --line:#d5e6dd;
  --ink:#072a20; --muted:#4a675d; --on-accent:#ffffff;
  --accent:#0b7a51; --accent-dark:#075c3c; --accent-light:#2e9e72; --accent-soft:#ddf3e8;
  --sun:#ffd98f; --sun-soft:#fff4d9; --coral:#ff8a80; --coral-soft:#ffe4e0;
  --sky:#bdf3f7; --sky-soft:#e5fbfc; --mint:#b7ebd2;
  --ok:#0b7a51; --warn:#b7791f; --bad:#c2412d;
  --radius:18px; --radius-sm:12px; --bold:3px solid var(--ink);
  --shadow-card:0 4px 20px -4px rgb(7 42 32 / .15);
  --shadow-elevated:0 12px 32px -10px rgb(7 42 32 / .3);
  --font:"Bricolage Grotesque", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.55 var(--font);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
h1, h2, h3 { font-weight:800; letter-spacing:-.02em; line-height:1.15; color:var(--ink); }
h1 { font-size:clamp(2rem, 4vw, 2.9rem); margin:.2rem 0 .7rem; }
h2 { font-size:1.4rem; margin:.2rem 0 .8rem; }
h3 { font-size:1.08rem; margin:.9rem 0 .5rem; }
a { color:var(--accent); text-underline-offset:3px; }
a:hover { color:var(--accent-dark); }
::selection { background:var(--sun); color:var(--ink); }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.muted { color:var(--muted); } .accent { color:var(--accent); }
.big { font-size:2.6rem; font-weight:800; letter-spacing:-.03em; line-height:1.1; }

/* ---- header ---- */
.site-header { position:sticky; top:0; z-index:20; background:rgb(255 255 255 / .94);
  backdrop-filter:saturate(1.4) blur(10px); border-bottom:var(--bold); }
.site-header .bar { max-width:1240px; margin:0 auto; padding:.7rem 1.4rem;
  display:flex; align-items:center; gap:1rem; }
.brand { display:inline-flex; align-items:center; gap:.55rem; text-decoration:none;
  color:var(--ink); font-weight:800; font-size:1.25rem; letter-spacing:-.03em; flex:none; }
.brand:hover { color:var(--ink); }
.brand-mark { width:36px; height:36px; border-radius:11px; background:var(--accent);
  border:var(--bold); display:grid; place-items:center; transition:transform .2s ease-out; }
.brand:hover .brand-mark { transform:rotate(-8deg); }
.brand b { color:var(--accent); font-weight:800; }
.site-links { display:flex; align-items:center; gap:.15rem; min-width:0; }
.site-links a { color:var(--muted); text-decoration:none; font-weight:600; font-size:.92rem;
  padding:.42rem .7rem; border-radius:999px; border:2px solid transparent; white-space:nowrap;
  transition:color .15s, background-color .15s, border-color .15s; }
.site-links a:hover { color:var(--ink); background:var(--well); }
.site-links a.active { color:var(--ink); background:var(--accent-soft); border-color:var(--ink); }
.site-header .ha-search { margin-left:auto; flex:1 1 180px; max-width:300px; }
.site-header .ha-search input { min-height:40px; padding:.45rem .9rem .45rem 2.3rem; font-size:.88rem;
  background:var(--well) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a675d' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat .8rem center; }
.site-header .ha-search input:focus { background-color:#fff; }
.account-nav { display:flex; gap:.6rem; align-items:center; font-size:.85rem; flex:none; }
.account-nav form { margin:0; }
.account-nav span { max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
/* the signed-in name links to /account; a display name can be 80 characters long */
.account-nav > a:not(.btn) { display:inline-block; max-width:170px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; vertical-align:middle; font-weight:600; }
@media (min-width:1101px) { .site-links { flex:none; } .site-header .ha-search { min-width:150px; } }
@media (max-width:1440px) { .account-nav span { display:none; } }
@media (max-width:1100px) {
  .site-header .bar { flex-wrap:wrap; row-gap:.55rem; }
  .site-links { order:9; flex-basis:100%; overflow-x:auto; scrollbar-width:none; margin:0 -.3rem; padding:0 .3rem .1rem; }
  .site-links::-webkit-scrollbar { display:none; }
}
@media (max-width:640px) {
  .site-header .bar { padding:.6rem 1rem; }
  .site-header .ha-search { order:10; flex-basis:100%; max-width:none; }
  .account-nav { margin-left:auto; } .account-nav span { display:none; }
}

/* ---- layout ---- */
main { max-width:1180px; margin:0 auto; padding:2rem 1.4rem 3rem; }
@media (max-width:640px) { main { padding:1.3rem 1rem 2.4rem; } }
.page-head { margin:0 0 1.6rem; max-width:780px; }
.page-head p { color:var(--muted); font-size:1.08rem; margin:.2rem 0 0; }
.eyebrow { display:inline-flex; align-items:center; gap:.45rem; font-size:.75rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0 0 .7rem; }
.eyebrow.pill { color:var(--ink); background:var(--sun); border:2px solid var(--ink);
  border-radius:999px; padding:.3rem .8rem; letter-spacing:.08em; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
@media (max-width:820px) { .grid2 { grid-template-columns:1fr; } }

/* ---- cards ---- */
.card { position:relative; background:var(--panel); border:var(--bold); border-radius:var(--radius);
  box-shadow:var(--shadow-card); padding:1.5rem 1.6rem; margin-bottom:1.4rem; }
.card > h2:first-child, .card > h3:first-child { margin-top:0; }
.card.lift, .lift { transition:transform .2s ease-out, box-shadow .2s ease-out; }
.card.lift:hover, .lift:hover { transform:translateY(-4px); box-shadow:var(--shadow-elevated); }
.card.tint-green { background:var(--accent-soft); } .card.tint-sun { background:var(--sun-soft); }
.card.tint-sky { background:var(--sky-soft); } .card.tint-coral { background:var(--coral-soft); }
@media (max-width:640px) { .card { padding:1.2rem 1.15rem; border-radius:16px; } }

/* ---- buttons: bold ink outline, a hard diagonal shadow lifts out on hover ---- */
:where(button) { font:inherit; cursor:pointer; color:inherit; }
:where(button:not([class])), .btn, .btnlink {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:46px;
  padding:.62rem 1.25rem; border:var(--bold); border-radius:var(--radius-sm);
  background:var(--accent); color:var(--on-accent); font-family:var(--font); font-weight:800;
  font-size:.86rem; letter-spacing:.04em; text-transform:uppercase; text-decoration:none;
  line-height:1.1; white-space:nowrap;
  transition:transform .18s cubic-bezier(0,0,.2,1), box-shadow .18s cubic-bezier(0,0,.2,1), background-color .18s; }
:where(button:not([class])):where(:hover:not(:disabled)), .btn:hover, .btnlink:hover {
  transform:translate(-3px,-3px); box-shadow:5px 5px 0 var(--ink); color:var(--on-accent); }
:where(button:not([class])):where(:active:not(:disabled)), .btn:active, .btnlink:active { transform:translate(0,0); box-shadow:none; }
.btn.ghost, .btnlink.ghost, .btn.light { background:#fff; color:var(--ink); }
.btn.ghost:hover, .btnlink.ghost:hover, .btn.light:hover { color:var(--ink); background:var(--well); }
.btn.sun { background:var(--sun); color:var(--ink); } .btn.sun:hover { color:var(--ink); }
.btn.sm, .btnlink.sm, .account-nav button { min-height:38px; padding:.4rem .85rem; font-size:.76rem; }
.btnlink { margin:.3rem .5rem .3rem 0; }
button:disabled { opacity:.55; cursor:not-allowed; }
@media (prefers-reduced-motion:reduce) { * { transition:none !important; animation:none !important; } }

/* ---- forms ---- */
input, select, textarea { font:inherit; font-size:.95rem; color:var(--ink); background:#fff;
  border:2px solid #9fbdb0; border-radius:var(--radius-sm); padding:.62rem .95rem; min-height:46px;
  transition:border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color:#6f8a80; }
input:hover, select:hover, textarea:hover { border-color:var(--ink); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent);
  box-shadow:0 0 0 4px rgb(11 122 81 / .18); }
input[readonly] { background:var(--well); color:var(--muted); }
input[type=checkbox], input[type=radio] { min-height:0; width:1.05rem; height:1.05rem; padding:0;
  accent-color:var(--accent); box-shadow:none; }
input[type=range] { padding:0; min-height:0; border:0; box-shadow:none; background:transparent; }
select { cursor:pointer; }
label { cursor:pointer; }

/* ---- tables, chips, status dots ---- */
table { width:100%; border-collapse:collapse; font-size:.93rem; }
th, td { text-align:left; padding:.62rem .7rem; border-bottom:1.5px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-weight:700; font-size:.74rem; letter-spacing:.07em; text-transform:uppercase; }
tbody tr:hover td, table tr:hover td { background:#f7fcf9; }
td a { font-weight:600; }
.chips { display:flex; flex-wrap:wrap; gap:.5rem; margin:.8rem 0; }
.chip { background:var(--well); border:2px solid var(--ink); border-radius:999px;
  padding:.2rem .8rem; font-size:.84rem; font-weight:600; }
.chip:nth-child(4n+1) { background:var(--accent-soft); } .chip:nth-child(4n+2) { background:var(--sun-soft); }
.chip:nth-child(4n+3) { background:var(--sky-soft); } .chip:nth-child(4n+4) { background:var(--coral-soft); }
.dot { display:inline-block; width:.6rem; height:.6rem; border-radius:50%; background:var(--muted);
  margin-right:.4rem; vertical-align:middle; }
.dot.ok { background:#3ddc97; box-shadow:0 0 0 3px rgb(61 220 151 / .25); }
.dot.bad { background:var(--coral); } .dot.warn { background:var(--sun); }
details > summary { cursor:pointer; font-weight:700; }

/* ---- stat tiles ---- */
.stat-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1rem; }
@media (max-width:900px) { .stat-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.stat { background:var(--panel); border:var(--bold); border-radius:var(--radius); padding:1.15rem 1.2rem;
  box-shadow:var(--shadow-card); transition:transform .2s ease-out, box-shadow .2s ease-out; }
.stat:hover { transform:translateY(-4px); box-shadow:var(--shadow-elevated); }
.stat b { display:block; font-size:clamp(1.6rem, 3vw, 2.15rem); font-weight:800; letter-spacing:-.035em;
  line-height:1.1; font-variant-numeric:tabular-nums; margin-bottom:.3rem; }
.stat span, .stat .muted { font-size:.86rem; color:var(--muted); line-height:1.45; display:block; }
.stat.green { background:var(--accent-soft); } .stat.green b { color:var(--accent); }
.stat.sun { background:var(--sun-soft); } .stat.sun b { color:#9a5b00; }
.stat.sky { background:var(--sky-soft); } .stat.sky b { color:#0a6b78; }
.stat.coral { background:var(--coral-soft); } .stat.coral b { color:#b4372a; }

/* ---- history bars (building page) ---- */
.hbars { display:flex; gap:.5rem; align-items:flex-end; height:120px; padding:0 0 1.7rem; margin:.4rem 0 .2rem; }
.hbars:not(:has(.col)) { height:auto; padding:0; }
.hbars .col { flex:1; min-width:0; max-width:56px; height:100%; display:flex; flex-direction:column;
  justify-content:flex-end; align-items:stretch; position:relative; }
.hbars .bar { background:var(--mint); border:2px solid var(--ink); border-radius:7px 7px 3px 3px; min-height:4px; }
.hbars .cur .bar { background:var(--accent); }
.hbars .v { text-align:center; font-size:.78rem; font-weight:800; margin-bottom:.2rem; font-variant-numeric:tabular-nums; }
.hbars .s { position:absolute; bottom:-1.45rem; left:-4px; right:-4px; text-align:center;
  font-size:.68rem; color:var(--muted); white-space:nowrap; }

/* ---- T17: address search with autocomplete (web/static/search.js) ---- */
.ha-search { display:flex; gap:.6rem; align-items:center; }
.ha-search-box { position:relative; flex:1; min-width:0; }
.ha-search-box input { width:100%; }
.ha-search-list { position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:40;
  margin:0; padding:.35rem; list-style:none; background:#fff; border:var(--bold);
  border-radius:14px; box-shadow:var(--shadow-elevated); max-height:320px; overflow-y:auto; text-align:left; }
.ha-search-list[hidden] { display:none; }
.ha-search-list li { padding:.55rem .7rem; border-radius:9px; cursor:pointer; font-size:.9rem; color:var(--ink); }
.ha-search-list li b { font-weight:700; }
.ha-search-list li small { color:var(--muted); font-size:.78rem; }
.ha-search-list li.active, .ha-search-list li:hover { background:var(--accent-soft); }
.ha-search-status { font-size:.82rem; color:var(--muted); min-height:1.1rem; margin-top:.45rem; }

/* ---- footer ---- */
.site-footer { background:var(--ink); color:#cfe3da; margin-top:2rem; border-top:var(--bold); }
.site-footer .inner { max-width:1180px; margin:0 auto; padding:2.6rem 1.4rem 1.6rem;
  display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:2rem; }
.site-footer .brand { color:#fff; } .site-footer .brand b { color:#5fd4a4; }
.site-footer .brand-mark { border-color:#fff; }
.site-footer p { margin:.8rem 0 0; font-size:.9rem; line-height:1.6; max-width:42ch; color:#a9c7ba; }
.site-footer h4 { margin:.3rem 0 .8rem; color:#fff; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; }
.site-footer ul { list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.site-footer a { color:#cfe3da; text-decoration:none; font-size:.92rem; }
.site-footer a:hover { color:#fff; text-decoration:underline; }
.site-footer .base { max-width:1180px; margin:0 auto; padding:1rem 1.4rem 1.6rem; border-top:1px solid #1d4a3c;
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; font-size:.8rem; color:#93b5a7; }
.site-footer .status { display:inline-flex; align-items:center; color:#cfe3da; }
@media (max-width:760px) { .site-footer .inner { grid-template-columns:1fr 1fr; } .site-footer .about { grid-column:1 / -1; } }