/* RoofIntel — interface styles.
   Dark by default: this gets used at 6am in a truck and on a shop monitor,
   and hail maps read better on a dark ground. */

:root {
  /* Surfaces run from deepest to lightest, each a real step apart. The old
     palette had raised and sunken within a few points of each other, which
     reads as flat no matter how much else you do. */
  --bg:            #0b0e14;
  --bg-raised:     #121722;
  --bg-sunken:     #0d1119;
  --bg-float:      #171d2a;
  --line:          #242c3a;
  --line-soft:     #1a202b;
  --line-bright:   #303a4c;

  --ink:           #edf1f7;
  --ink-muted:     #9aa6b8;
  --ink-faint:     #6c778a;

  /* Teal-cyan reads technical and current, and leaves blue free to mean
     "selected" rather than "everything". The hail ramp below stays warm, so
     severity never competes with the interface for attention. */
  --accent:        #17b6cc;
  --accent-bright: #45d7e8;
  --accent-deep:   #0b8ba1;
  --accent-ink:    #04141a;
  --accent-glow:   rgba(34, 199, 224, .26);

  /* A second hue, used only in gradients and on the marketing page, so the
     product has a colour identity rather than one blue and a lot of grey. */
  --violet:        #7c5cff;
  --violet-deep:   #5b3fd6;

  --ok:            #3fb950;
  --warn:          #d29922;
  --bad:           #f85149;

  --hail-1:        #ffd166;
  --hail-2:        #f4a261;
  --hail-3:        #e76f51;
  --hail-4:        #c1121f;

  --radius:        12px;
  --radius-sm:     8px;

  /* Two shadows per surface: a tight one for definition, a wide soft one for
     lift. A single shadow always looks like a sticker. */
  --shadow-sm:     0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.22);
  --shadow-md:     0 2px 4px rgba(0,0,0,.35), 0 10px 28px rgba(0,0,0,.35);
  --shadow-lg:     0 4px 10px rgba(0,0,0,.4), 0 24px 60px rgba(0,0,0,.45);
  --hairline:      inset 0 1px 0 rgba(255,255,255,.045);
  --panel-w:       clamp(320px, 30vw, 430px);

  /* Inter if it loads, the system stack if it doesn't. Nothing depends on it. */
  --font: "Inter var", Inter, ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* `hidden` must win over any display rule set below. Without this, an element
   with the hidden attribute still shows if its class sets display. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }

/* ---------------- top bar ---------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand .mark {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: linear-gradient(140deg, var(--accent), #7b5cff 70%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

.brand h1 { font-size: 17px; }
.brand .sub { margin: 0; font-size: 12px; color: var(--ink-faint); }

.status-strip { display: flex; gap: 6px; flex-wrap: wrap; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 550;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  color: var(--ink-muted);
  white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
.pill.ok::before      { background: var(--ok); }
.pill.needs::before   { background: var(--warn); }
.pill.off::before     { background: var(--ink-faint); }
.pill.bad::before     { background: var(--bad); }

/* ---------------- layout ---------------- */

.layout {
  display: grid;
  grid-template-columns: var(--panel-w) 1fr;
  height: calc(100% - 52px);
  min-height: 0;
}

.panel {
  background: var(--bg-raised);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.map-wrap { position: relative; min-height: 0; }
#map { position: absolute; inset: 0; background: var(--bg-sunken); }

/* ---------------- tabs ---------------- */

.tabs {
  display: flex;
  gap: 2px;
  padding: 8px 8px 0;
  border-bottom: 1px solid var(--line);
  flex: none;
}

.tab {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-faint);
  font: inherit;
  font-size: 13.5px;
  font-weight: 550;
  padding: 8px 12px 9px;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
}
.tab:hover { color: var(--ink); background: rgba(255,255,255,.03); }
.tab.is-active { color: var(--ink); border-bottom-color: var(--accent); }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.tabpanel { display: none; padding: 16px; overflow-y: auto; min-height: 0; }
.tabpanel.is-active { display: block; }

.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ---------------- forms ---------------- */

.field-group { display: flex; flex-direction: column; gap: 7px; }

.label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-faint);
}

.row { display: flex; gap: 8px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }

.input {
  flex: 1; min-width: 0;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  font: inherit;
  font-size: 14px;
}
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(76,141,255,.16); }
.input::placeholder { color: var(--ink-faint); }

.btn {
  appearance: none;
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  font: inherit; font-size: 13.5px; font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: #333d4d; background: #10151c; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 650; }
.btn-primary:hover:not(:disabled) { background: #5f9aff; border-color: #5f9aff; }

.btn-small { padding: 5px 10px; font-size: 12.5px; }
.btn-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.hint { font-size: 12.5px; color: var(--ink-faint); margin: 6px 0 0; }
.mt { margin-top: 22px; }

/* ---------------- cards & lists ---------------- */

.result-area { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }

.card {
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 14px;
}
.card.is-hidden { display: none; }
.card-title { font-size: 14px; }
.card-note { font-size: 12.5px; color: var(--ink-muted); margin: 4px 0 10px; overflow-wrap: anywhere; }
.alert, .item-sub, .source-detail, .source-provider { overflow-wrap: anywhere; }

.list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.item {
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color .12s, transform .12s;
}
.item:hover { border-color: #333d4d; transform: translateX(1px); }
.item.is-selected { border-color: var(--accent); border-left-color: var(--accent); }
.item[data-sev="severe"]      { border-left-color: var(--hail-1); }
.item[data-sev="moderate"]    { border-left-color: var(--hail-2); }
.item[data-sev="significant"] { border-left-color: var(--hail-3); }
.item[data-sev="major"],
.item[data-sev="destructive"] { border-left-color: var(--hail-4); }

.item-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.item-title { font-size: 13.5px; font-weight: 600; }
.item-metric { font-family: var(--mono); font-size: 13px; font-weight: 650; color: var(--hail-1); white-space: nowrap; }
.item-sub { font-size: 12px; color: var(--ink-faint); margin-top: 3px; }

.tagline { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }
.tag {
  font-size: 10.5px; font-weight: 600; letter-spacing: .03em;
  padding: 2px 7px; border-radius: 4px;
  background: #1b2330; color: var(--ink-muted); border: 1px solid var(--line);
}
.tag.observed { background: rgba(63,185,80,.12); color: #7ee787; border-color: rgba(63,185,80,.3); }
.tag.radar    { background: rgba(210,153,34,.12); color: #e3b341; border-color: rgba(210,153,34,.3); }

/* measurement readout */

.readout { display: flex; flex-direction: column; gap: 1px; margin-top: 12px; }
.readout-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 11px; background: #11161e; border: 1px solid var(--line-soft);
}
.readout-row:first-child { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.readout-row:last-child  { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.readout-row.primary { background: rgba(76,141,255,.09); border-color: rgba(76,141,255,.3); }
.readout-label { font-size: 12.5px; color: var(--ink-muted); }
.readout-value { font-family: var(--mono); font-size: 14px; font-weight: 650; }
.readout-row.primary .readout-value { color: #8ab4ff; font-size: 16px; }

.alert {
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12.5px;
  border: 1px solid;
  margin-top: 10px;
}
.alert-warn { background: rgba(210,153,34,.09); border-color: rgba(210,153,34,.35); color: #e3b341; }
.alert-bad  { background: rgba(248,81,73,.09);  border-color: rgba(248,81,73,.35);  color: #ff8b82; }
.alert-info { background: rgba(76,141,255,.08); border-color: rgba(76,141,255,.3);  color: #8ab4ff; }

.empty { color: var(--ink-faint); font-size: 13px; padding: 20px 4px; text-align: center; }

/* ---------------- the report ---------------- */

.report { display: flex; flex-direction: column; gap: 12px; }

.verdict { border-width: 1px; border-style: solid; }
.verdict-pursue        { border-color: rgba(63,185,80,.45);  background: linear-gradient(180deg, rgba(63,185,80,.10), transparent 60%); }
.verdict-investigate,
.verdict-monitor       { border-color: rgba(210,153,34,.45); background: linear-gradient(180deg, rgba(210,153,34,.10), transparent 60%); }
.verdict-pass,
.verdict-insufficient-data,
.verdict-unknown       { border-color: var(--line); }

.verdict-head { display: flex; align-items: center; gap: 15px; }

.verdict-score { display: flex; align-items: baseline; gap: 2px; flex: none; }
.verdict-number { font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-family: var(--mono); }
.verdict-outof  { font-size: 13px; color: var(--ink-faint); }

.verdict-pursue .verdict-number { color: #56d364; }
.verdict-investigate .verdict-number,
.verdict-monitor .verdict-number { color: #e3b341; }
.verdict-pass .verdict-number,
.verdict-insufficient-data .verdict-number,
.verdict-unknown .verdict-number { color: var(--ink-faint); }

.verdict-text { min-width: 0; }
.verdict-label { font-size: 16px; font-weight: 650; letter-spacing: -.01em; }
.verdict-reason { font-size: 12.5px; color: var(--ink-muted); margin-top: 3px; }

.confidence {
  display: flex; align-items: center; gap: 7px;
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px; color: var(--ink-faint);
}
.confidence-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--ink-faint); }
.confidence-high .confidence-dot     { background: var(--ok); }
.confidence-moderate .confidence-dot { background: var(--warn); }
.confidence-low .confidence-dot      { background: var(--bad); }

/* factors */

.factor { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.factor:last-child { border-bottom: 0; padding-bottom: 0; }
.factor-unknown { opacity: .55; }

.factor-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.factor-label { font-size: 13px; font-weight: 600; }
.factor-points { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }

.factor-bar { height: 4px; background: var(--bg-raised); border-radius: 2px; margin: 7px 0 7px; overflow: hidden; }
.factor-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #7b5cff); border-radius: 2px; }
.factor-unknown .factor-bar { background: repeating-linear-gradient(90deg, var(--bg-raised) 0 4px, transparent 4px 8px); }

.factor-detail { font-size: 12.5px; color: var(--ink-muted); overflow-wrap: anywhere; }
.factor-source { font-size: 11px; color: var(--ink-faint); margin-top: 4px; font-style: italic; }

.big-stat { font-size: 30px; font-weight: 700; letter-spacing: -.02em; font-family: var(--mono); margin: 4px 0 2px; }
.big-stat.muted { color: var(--ink-faint); font-size: 22px; }

/* sources */

.source-row { padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
.source-row:last-of-type { border-bottom: 0; }
.source-label { font-size: 12.5px; font-weight: 600; }
.source-provider { font-size: 12px; color: var(--ink-muted); margin-top: 2px; }
.source-detail { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }

/* ---------------- alerts ---------------- */

.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px; margin-left: 6px;
  border-radius: 9px; background: var(--bad); color: #fff;
  font-size: 10.5px; font-weight: 700; font-family: var(--mono);
}

.item.is-read { opacity: .5; }

.tag-btn {
  cursor: pointer; font-family: inherit;
  background: var(--bg-raised); color: var(--ink-muted);
}
.tag-btn:hover { background: #222a36; color: var(--ink); border-color: #333d4d; }

/* ---------------- layer toggles ---------------- */

.layer-toggles { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; margin: 14px 0 4px; }
.layer-toggles legend { padding: 0 5px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; cursor: pointer; color: var(--ink-muted); }
.check input { accent-color: var(--accent); }
.swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.swatch-swath   { background: var(--hail-3); }
.swatch-warning { background: #a371f7; }
.swatch-report  { background: var(--ok); }
.swatch-sat     { background: #6b7687; }

/* ---------------- map furniture ---------------- */

.legend {
  position: absolute; left: 12px; bottom: 12px; z-index: 5;
  background: rgba(14,17,22,.93);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 11.5px;
  backdrop-filter: blur(8px);
}
.legend-title { font-weight: 650; margin-bottom: 6px; color: var(--ink-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.legend-row { display: flex; align-items: center; gap: 7px; color: var(--ink-muted); padding: 1px 0; }
.chip { width: 16px; height: 9px; border-radius: 2px; }
.chip-1 { background: var(--hail-1); }
.chip-2 { background: var(--hail-2); }
.chip-3 { background: var(--hail-3); }
.chip-4 { background: var(--hail-4); }

/* A notice over the map: "using your location", "tiles are not loading",
   the drawing hint. Top-centre, because the legend owns the bottom-left
   and the scale bar the bottom-right. Sized to its text, capped so it
   never runs off a narrow map.

   This is the ONLY rule that positions .map-note. A second one was once
   added lower in this file — bottom: 12px, left and right: 12px — meant to
   replace this one, and the two merged in the cascade: `top` from here plus
   `bottom` from there stretched it to the full height of the map, and the
   centring transform from here, applied to the wide box from there, hung
   half of it over the sidebar. A single 12px notice became a dark curtain
   over two thirds of the screen. test/frontend.test.js now fails if any
   selector is given both `top` and `bottom` across the stylesheet. */
.map-note {
  position: absolute;
  top: 12px; left: 50%; transform: translateX(-50%);
  z-index: 6;
  width: max-content;
  max-width: min(520px, calc(100% - 24px));
  margin: 0;
  padding: 10px 13px;
  display: flex; align-items: center; gap: 12px;
  font-size: 12.5px; line-height: 1.5;
  color: #e3b341;
  background: rgba(20, 16, 6, .92);
  border: 1px solid rgba(210,153,34,.4);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px);
  cursor: pointer;
}
.map-note:hover { border-color: rgba(210,153,34,.7); }

.map-fallback {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-items: center; text-align: center;
  background: var(--bg-sunken); padding: 30px;
}
.map-fallback.is-hidden { display: none; }
.map-fallback h2 { font-size: 16px; margin-bottom: 8px; }
.map-fallback p { color: var(--ink-muted); font-size: 13.5px; max-width: 46ch; margin: 0 auto; }

.maplibregl-popup-content {
  background: var(--bg-raised) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm) !important;
  font-family: var(--font);
  font-size: 13px;
  padding: 11px 13px !important;
}
.maplibregl-popup-tip { border-top-color: var(--bg-raised) !important; border-bottom-color: var(--bg-raised) !important; }
.maplibregl-popup-close-button { color: var(--ink-faint) !important; font-size: 17px; }

/* ---------------- sign in ---------------- */

.gate {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: var(--bg);
  padding: 24px 16px;
  overflow-y: auto;
}

.gate-card {
  width: 100%; max-width: 380px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 26px 24px;
}

.gate-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.gate-mark {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  background: linear-gradient(140deg, var(--accent), #7b5cff 70%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.gate-name { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.gate-sub { font-size: 11.5px; color: var(--ink-faint); }

.gate-title { font-size: 19px; font-weight: 650; letter-spacing: -.02em; margin: 0 0 6px; }
.gate-note { font-size: 13px; color: var(--ink-muted); margin: 0 0 18px; }
.gate-hint { font-size: 12px; color: var(--ink-faint); margin: 10px 0 0; }

.gate-fields { display: flex; flex-direction: column; gap: 13px; }
.gate-field { display: flex; flex-direction: column; gap: 6px; }
.gate-field .input { width: 100%; }

.gate-error {
  margin-top: 13px; padding: 10px 12px; font-size: 12.5px;
  background: rgba(248,81,73,.1); border: 1px solid rgba(248,81,73,.36);
  color: #ff8b82; border-radius: var(--radius-sm);
}

.gate-btn {
  width: 100%; margin-top: 18px;
  appearance: none; border: 0; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--accent-ink);
  font: inherit; font-size: 14px; font-weight: 650;
  padding: 11px; cursor: pointer;
}
.gate-btn:hover:not(:disabled) { background: #5f9aff; }
.gate-btn:disabled { opacity: .6; cursor: default; }
.gate-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* account chip in the top bar */

.account { display: inline-flex; align-items: center; gap: 8px; margin-left: 4px; }
.account-who { font-size: 11.5px; color: var(--ink-faint); }
.account-out {
  appearance: none; background: var(--bg-sunken);
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink-muted); font: inherit; font-size: 11px; font-weight: 550;
  padding: 3px 10px; cursor: pointer;
}
.account-out:hover { color: var(--ink); border-color: #333d4d; }

/* ---------------- responsive ---------------- */

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; grid-template-rows: minmax(0, 45vh) minmax(0, 55vh); height: auto; }
  .panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .map-wrap { min-height: 55vh; }
  body { overflow-y: auto; }
  .status-strip { width: 100%; }
}

/* ==================================================================
   Refinement layer — 22 Sep 2026

   Everything above is the working interface. This is the pass that makes
   it look like something worth paying for, which is a real requirement
   and not decoration: a tool that looks provisional gets used
   provisionally, and this one is asking people to drive somewhere on
   what it says.

   Source order does the work — these override by position, not by
   specificity wars.
   ================================================================== */

/* ---- type ---- */

body {
  font-size: 14.5px;
  letter-spacing: -0.003em;
  font-variant-numeric: tabular-nums;
}

h1, h2 { letter-spacing: -0.022em; font-weight: 640; }

/* Numbers should look measured, not typed. */
.item-metric, .readout-value, .verdict-number, .big-stat {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

/* ---- top bar ---- */

.topbar {
  padding: 11px 20px;
  background:
    radial-gradient(1200px 120px at 12% -40px, rgba(76,141,255,.14), transparent 70%),
    linear-gradient(180deg, #161c28, var(--bg-raised));
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  position: relative;
  z-index: 5;
}

.brand .mark {
  width: 32px; height: 32px; border-radius: 9px;
  background: linear-gradient(145deg, var(--accent-bright), var(--accent-deep) 55%, #6d4bff);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 2px 10px var(--accent-glow);
  position: relative;
}
/* A roofline over a flat building. Two crossed CSS gradients drew an X, not
   a roof — so this is the actual shape, inlined rather than fetched. */
.brand .mark::after {
  content: "";
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M12 36 L32 19 L52 36' fill='none' stroke='white' stroke-width='6.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='21.5' y='39.5' width='21' height='10' rx='2.5' fill='white' opacity='0.93'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  border-radius: inherit;
}

.brand h1 { font-size: 17.5px; letter-spacing: -0.02em; }
.brand .sub { font-size: 11.5px; color: var(--ink-faint); letter-spacing: .01em; }

.pill {
  padding: 4px 10px;
  background: rgba(255,255,255,.035);
  border-color: var(--line-soft);
  box-shadow: var(--hairline);
  font-weight: 500;
  color: var(--ink-muted);
}
.pill.ok    { color: #8ee79c; border-color: rgba(63,185,80,.28);  background: rgba(63,185,80,.09); }
.pill.bad   { color: #ff9b93; border-color: rgba(248,81,73,.30);  background: rgba(248,81,73,.10); }
.pill.needs { color: #e3b341; border-color: rgba(210,153,34,.28); background: rgba(210,153,34,.09); }

/* ---- panel & tabs ---- */

.panel {
  background: linear-gradient(180deg, var(--bg-raised), #0f141d 340px);
  border-right: 1px solid var(--line);
}

.tabs { padding: 10px 10px 0; gap: 3px; }

.tab {
  font-size: 13px;
  letter-spacing: .005em;
  border-bottom: 0;
  border-radius: 8px;
  padding: 7px 12px 8px;
  transition: background .14s ease, color .14s ease;
}
.tab:hover { background: rgba(255,255,255,.05); }
.tab.is-active {
  color: var(--ink);
  background: linear-gradient(180deg, rgba(76,141,255,.20), rgba(76,141,255,.08));
  box-shadow: inset 0 0 0 1px rgba(76,141,255,.32), var(--hairline);
}

.tabpanel { padding: 18px; }

/* Scrollbars, because default ones on dark UI look like a bug. */
.tabpanel { scrollbar-width: thin; scrollbar-color: #2b3444 transparent; }
.tabpanel::-webkit-scrollbar { width: 10px; }
.tabpanel::-webkit-scrollbar-thumb {
  background: #2b3444; border-radius: 99px; border: 3px solid transparent; background-clip: content-box;
}
.tabpanel::-webkit-scrollbar-thumb:hover { background: #3a4558; background-clip: content-box; }

/* ---- controls ---- */

.input {
  background: rgba(0,0,0,.28);
  border-color: var(--line);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.input:hover { border-color: var(--line-bright); }
.input:focus {
  background: rgba(0,0,0,.36);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.btn {
  background: linear-gradient(180deg, #1a2130, #141a26);
  border-color: var(--line-bright);
  border-radius: var(--radius-sm);
  padding: 9px 15px;
  box-shadow: var(--shadow-sm), var(--hairline);
  transition: transform .1s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}
.btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #202838, #171e2c);
  border-color: #3c4759;
  box-shadow: var(--shadow-md), var(--hairline);
}
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: var(--shadow-sm); }

.btn-primary {
  background: linear-gradient(180deg, var(--accent-bright), var(--accent-deep));
  border-color: var(--accent-deep);
  color: #fff;
  font-weight: 620;
  text-shadow: 0 1px 1px rgba(0,0,0,.28);
  box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 6px 18px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.28);
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(180deg, #7fb0ff, #3d7cec);
  border-color: #3d7cec;
  box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 26px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.34);
}

.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-muted);
  box-shadow: none;
}
.btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,.04); color: var(--ink); box-shadow: none; }
.btn.is-active {
  background: linear-gradient(180deg, rgba(76,141,255,.26), rgba(76,141,255,.12));
  border-color: rgba(76,141,255,.55);
  color: #cfe0ff;
}

.label { font-size: 11px; letter-spacing: .06em; color: var(--ink-faint); }
.mt-sm { margin-top: 10px; }

/* ---- cards ---- */

.card {
  background: linear-gradient(180deg, var(--bg-float), var(--bg-sunken) 120px);
  border-color: var(--line-soft);
  border-radius: var(--radius);
  padding: 15px 16px;
  box-shadow: var(--shadow-sm), var(--hairline);
}
.card-title { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-muted); font-weight: 650; }
.card-note { font-size: 13px; color: var(--ink-muted); line-height: 1.55; }

.item {
  background: linear-gradient(180deg, rgba(255,255,255,.028), transparent);
  border-color: var(--line-soft);
  border-left-width: 3px;
  padding: 11px 13px;
  box-shadow: var(--hairline);
  transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.item:hover {
  border-color: var(--line-bright);
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  transform: translateX(2px);
  box-shadow: var(--shadow-sm), var(--hairline);
}

.tag {
  background: rgba(255,255,255,.05);
  border-color: var(--line-soft);
  border-radius: 999px;
  padding: 2.5px 9px;
  letter-spacing: .02em;
}

/* ---- the verdict, which is the thing people look at first ---- */

.verdict {
  padding: 20px 18px 18px;
  border-radius: 14px;
  box-shadow: var(--shadow-md), var(--hairline);
}
.verdict-head { gap: 18px; }
.verdict-number { font-size: 52px; font-weight: 720; letter-spacing: -.045em; }
.verdict-label { font-size: 17px; font-weight: 640; letter-spacing: -.015em; }
.verdict-reason { color: var(--ink-muted); font-size: 13px; line-height: 1.5; }

.verdict-pursue {
  background:
    radial-gradient(520px 160px at 8% -30px, rgba(63,185,80,.20), transparent 70%),
    linear-gradient(180deg, rgba(63,185,80,.07), transparent 55%);
  border-color: rgba(63,185,80,.40);
}
.verdict-investigate, .verdict-monitor {
  background:
    radial-gradient(520px 160px at 8% -30px, rgba(210,153,34,.20), transparent 70%),
    linear-gradient(180deg, rgba(210,153,34,.07), transparent 55%);
  border-color: rgba(210,153,34,.40);
}

.big-stat {
  font-size: 34px; font-weight: 700; letter-spacing: -.035em; line-height: 1.05;
  margin: 2px 0 4px;
  background: linear-gradient(180deg, var(--ink), #a9b6c9);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.big-stat.muted { background: none; color: var(--ink-faint); -webkit-text-fill-color: currentColor; }

/* ---- coverage: what was checked, and what wasn't ---- */

.coverage-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.coverage-list .source-row {
  display: grid;
  grid-template-columns: minmax(96px, auto) auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 9px 11px;
  background: rgba(0,0,0,.22);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}
.coverage-list .source-label { font-weight: 600; color: var(--ink); }
.coverage-list .source-detail { color: var(--ink-faint); line-height: 1.45; }

/* ---- empty states ---- */

.empty {
  padding: 30px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: rgba(255,255,255,.015);
  color: var(--ink-faint);
  line-height: 1.55;
}

/* ---- map ---- */

#map { background: #070a10; }
.map-wrap::after {
  /* A soft inner edge so the map reads as inset rather than pasted on. */
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), inset 0 20px 40px -30px rgba(0,0,0,.9);
}

/* ---- motion, for people who would rather not ---- */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .item:hover { transform: none; }
}

/* ---- sign-in ---- */
/* The first screen anyone sees. It was serviceable; it is now the first
   impression of something people are being asked to trust with their
   prospecting list. */

.gate {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 520px at 50% -10%, rgba(76,141,255,.16), transparent 65%),
    radial-gradient(700px 500px at 85% 110%, rgba(109,75,255,.13), transparent 60%),
    var(--bg);
}

.gate-card {
  width: min(420px, 100%);
  background: linear-gradient(180deg, var(--bg-float), var(--bg-sunken));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 26px 24px;
  box-shadow: var(--shadow-lg), var(--hairline);
}

.gate-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.gate-mark {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: linear-gradient(145deg, var(--accent-bright), var(--accent-deep) 55%, #6d4bff);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 4px 16px var(--accent-glow);
  position: relative;
}
.gate-mark::after {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M12 36 L32 19 L52 36' fill='none' stroke='white' stroke-width='6.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Crect x='21.5' y='39.5' width='21' height='10' rx='2.5' fill='white' opacity='0.93'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.gate-name { font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.gate-sub { font-size: 11.5px; color: var(--ink-faint); }

.gate-title { font-size: 22px; font-weight: 660; letter-spacing: -.025em; margin: 0 0 6px; }
.gate-note { font-size: 13px; color: var(--ink-muted); margin: 0 0 20px; line-height: 1.55; }
.gate-hint { font-size: 12px; color: var(--ink-faint); margin: 12px 0 0; line-height: 1.5; }

.gate-fields { display: flex; flex-direction: column; gap: 13px; }
.gate-fields label {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 6px;
}
.gate-fields input {
  width: 100%;
  background: rgba(0,0,0,.30);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font: inherit; font-size: 14.5px;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.gate-fields input:hover { border-color: var(--line-bright); }
.gate-fields input:focus {
  outline: none;
  background: rgba(0,0,0,.38);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.gate-error {
  margin-top: 14px; padding: 10px 12px;
  font-size: 12.5px; line-height: 1.45;
  border-radius: var(--radius-sm);
  background: rgba(248,81,73,.10);
  border: 1px solid rgba(248,81,73,.34);
  color: #ff9b93;
}

.gate-btn {
  width: 100%; margin-top: 20px;
  appearance: none; cursor: pointer;
  border: 1px solid var(--accent-deep);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font: inherit; font-size: 14.5px; font-weight: 640;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.28);
  background: linear-gradient(180deg, var(--accent-bright), var(--accent-deep));
  box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .1s ease, box-shadow .14s ease, background .14s ease;
}
.gate-btn:hover:not(:disabled) { background: linear-gradient(180deg, #7fb0ff, #3d7cec); }
.gate-btn:active:not(:disabled) { transform: translateY(1px); }
.gate-btn:disabled { opacity: .6; cursor: progress; }

/* ==================================================================
   Home — a page, not a panel

   The app used to open directly into a tool, which is fine once you know
   what the tool is and hostile before that. This is the page that says
   what it does, shows whether anything is happening right now, and points
   at the two things worth doing first.
   ================================================================== */

body.on-home { overflow-y: auto; }

.mainnav {
  display: flex;
  gap: 4px;
  flex: 1 1 auto;
  justify-content: center;
  flex-wrap: wrap;
}
.mainnav .tab { font-size: 13.5px; padding: 8px 14px; }

/* The brand links home. */
.brand {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 10px;
}
.brand:hover .mark { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 18px var(--accent-glow); }
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.homeview {
  overflow-y: auto;
  height: calc(100% - 58px);
  background:
    radial-gradient(1100px 560px at 50% -180px, rgba(76,141,255,.13), transparent 62%),
    radial-gradient(900px 600px at 92% 40%, rgba(109,75,255,.07), transparent 60%),
    var(--bg);
}
.homeview[hidden] { display: none; }

.home-inner { max-width: 1040px; margin: 0 auto; padding: 46px 28px 72px; }

.eyebrow {
  margin: 0 0 12px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-bright);
}

/* .hero-title is defined once, in the home-page section below. An earlier
   gradient-text version lived here (background clipped to the letters,
   colour transparent); the later block set colour to white without undoing
   the clip, and only looked right because white paints over the gradient.
   One definition, on purpose. */

.hero-lede {
  max-width: 62ch;
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-muted);
}

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-lg { padding: 12px 22px; font-size: 15px; border-radius: 10px; }

.hero-foot { margin: 16px 0 0; font-size: 13px; color: var(--ink-faint); }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 40px 0 8px;
}
.stat {
  background: linear-gradient(180deg, var(--bg-float), var(--bg-sunken));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-sm), var(--hairline);
}
.stat-value { font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.stat-label { font-size: 12px; color: var(--ink-faint); margin-top: 5px; line-height: 1.4; }
.stat-hot  { border-color: rgba(248,81,73,.32); }
.stat-hot .stat-value  { color: #ff9b93; }
.stat-calm .stat-value { color: #8ee79c; }

.home-h {
  margin: 52px 0 18px;
  font-size: 13px; font-weight: 650; letter-spacing: .10em; text-transform: uppercase;
  color: var(--ink-faint);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.feature {
  background: linear-gradient(180deg, rgba(255,255,255,.028), transparent);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--hairline);
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.feature:hover {
  border-color: var(--line-bright);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), var(--hairline);
}
.feature h4 { margin: 0 0 8px; font-size: 15px; font-weight: 640; letter-spacing: -.015em; }
.feature p  { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-muted); }

.source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.src {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px;
  background: rgba(0,0,0,.24);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.src span { font-size: 13px; font-weight: 640; }
.src em { font-style: normal; font-size: 12.5px; color: var(--ink-faint); line-height: 1.45; }

.home-note {
  margin: 18px 0 0;
  padding: 14px 16px;
  font-size: 13.5px; line-height: 1.6;
  color: var(--ink-muted);
  background: rgba(76,141,255,.055);
  border: 1px solid rgba(76,141,255,.22);
  border-radius: var(--radius-sm);
}

.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; }
.steps li { font-size: 14px; line-height: 1.6; color: var(--ink-muted); }
.steps strong { color: var(--ink); font-weight: 620; }

@media (max-width: 860px) {
  .topbar { gap: 10px; }
  .mainnav { justify-content: flex-start; order: 3; width: 100%; }
  .home-inner { padding: 32px 18px 56px; }
}

/* ---- page frame ----
   The banner now carries the navigation, so its height changes with the
   window. Hard-coding "100% minus 52px" underneath it was always a guess;
   a flex column means the two views take whatever is left, whatever that is. */

body { display: flex; flex-direction: column; overflow: hidden; }
.topbar { flex: 0 0 auto; }
.layout, .homeview { flex: 1 1 auto; min-height: 0; height: auto; }
body.on-home { overflow: hidden; }

/* ---- drawing a roof ---- */

.draw-modes {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 14px 0 0;
  background: rgba(0,0,0,.2);
}
.draw-modes legend { padding: 0 6px; }
.draw-modes .check { display: flex; align-items: flex-start; gap: 9px; margin-top: 8px; font-size: 13px; line-height: 1.45; }
.draw-modes .check:first-of-type { margin-top: 4px; }
.draw-modes input { margin-top: 2px; accent-color: var(--accent); }

.rect-editor { margin-top: 14px; }
.rect-editor .row { align-items: center; gap: 10px; }
.rect-editor .input { max-width: 120px; text-align: right; }
.rect-by { color: var(--ink-faint); font-size: 14px; }

/* .map-note is styled once, near the legend it shares the map with. The
   second definition that used to live here is what stretched the notice
   into a full-height curtain; see the comment on the surviving rule. */

/* The basemap picker is a <select>; make it match the inputs around it. */
select.input {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%),
    linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
  background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
  cursor: pointer;
}
select.input option { background: var(--bg-float); color: var(--ink); }


/* ==================================================================
   Home page, second pass — 23 Sep 2026

   The brief was "closer to a million-dollar website". What actually
   separates one of those from this is not gradients: it is a real
   photograph, generous space, a type scale with genuine contrast, and
   colour used to mean something rather than to decorate.

   The photograph here is not stock. It is live USGS aerial imagery of
   Elizabethtown — the same imagery the measuring tool traces roofs on.
   If it fails to load, the gradient underneath is still handsome.
   ================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  isolation: isolate;
}

/* The backdrop is a drone photograph of a real commercial roof — the
   owner's own job — served from this server, so the browser fetches it
   from the same place it fetched the page. Underneath it, still, is the
   drawn survey-grid texture: CSS paints background layers bottom-up, so
   if the photo ever fails to arrive the grid shows and the hero is still
   a designed thing rather than an empty one. (A live third-party aerial
   export was tried first and removed: see decision 15.) */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: #0a1420;
  background-image:
    url("/img/hero.jpg"),
    radial-gradient(900px 420px at 78% 12%, rgba(34,199,224,.16), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.055'%3E%3Cpath d='M0 40H200M0 80H200M0 120H200M0 160H200M40 0V200M80 0V200M120 0V200M160 0V200'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.038'%3E%3Crect x='14' y='18' width='46' height='30' rx='2'/%3E%3Crect x='96' y='30' width='62' height='38' rx='2'/%3E%3Crect x='24' y='108' width='70' height='44' rx='2'/%3E%3Crect x='128' y='128' width='40' height='52' rx='2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover, auto, 200px 200px;
  background-position: 58% 42%, center, 0 0;
  background-repeat: no-repeat, no-repeat, repeat;
  /* Pull the sun-glare down and lean the whites toward the palette. */
  filter: saturate(.82) contrast(1.04) brightness(.92);
}
@media (max-width: 860px) {
  .hero-media { background-image:
    url("/img/hero-phone.jpg"),
    radial-gradient(900px 420px at 78% 12%, rgba(34,199,224,.16), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.055'%3E%3Cpath d='M0 40H200M0 80H200M0 120H200M0 160H200M40 0V200M80 0V200M120 0V200M160 0V200'/%3E%3C/g%3E%3C/svg%3E");
    background-position: 62% 50%, center, 0 0;
  }
}

/* The scrim buys legibility: near-solid on the left under the headline,
   thinning to the right so the roof reads as a roof, and darkening again
   along the bottom so the photo blends into the page instead of stopping
   at a hard edge. Tuned to THIS photograph — a bright white membrane with
   sun glare in the top-left — which is why the left side is heavier than
   a generic scrim would be. */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(8,12,20,.22) 0%, transparent 30%, transparent 62%, rgba(11,14,20,.92) 100%),
    linear-gradient(
      100deg,
      rgba(8,12,20,.94) 0%,
      rgba(8,12,20,.84) 34%,
      rgba(8,12,20,.42) 62%,
      rgba(8,12,20,.18) 100%
    );
}
@media (max-width: 860px) {
  /* On a phone the text sits over the whole photo, so the scrim is even. */
  .hero::before {
    background:
      linear-gradient(180deg, rgba(8,12,20,.60) 0%, rgba(8,12,20,.72) 55%, rgba(11,14,20,.96) 100%);
  }
}

.hero-inner {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(56px, 9vw, 120px) 28px clamp(64px, 8vw, 110px);
  min-height: min(680px, 78vh);
  display: flex; flex-direction: column; justify-content: center;
  /* Children keep their own width: without this the eyebrow pill, a flex
     item now, stretches to the column's full width. */
  align-items: flex-start;
}
.hero-inner > * { max-width: 640px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 16px;
  padding: 5px 13px 5px 9px;
  border-radius: 999px;
  background: rgba(34,199,224,.12);
  border: 1px solid rgba(34,199,224,.34);
  font-size: 11.5px; font-weight: 650; letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent-bright);
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 0 4px rgba(34,199,224,.2);
}

.hero-title {
  font-size: clamp(32px, 5.2vw, 58px);
  line-height: 1.04;
  letter-spacing: -.04em;
  font-weight: 700;
  margin: 0 0 20px;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0,0,0,.6);
  text-wrap: balance;
}

/* The headline carries a hard break, which is what you want on a wide
   screen: it splits the sentence at the clause. Narrow the column and that
   same break strands one word on a line of its own. Below this width the
   break is dropped and the text is left to wrap where it fits. */
@media (max-width: 720px) {
  .hero-title br { display: none; }
}

.hero-lede {
  max-width: 58ch;
  margin: 0 0 30px;
  font-size: clamp(15px, 1.35vw, 17.5px);
  line-height: 1.65;
  color: #c7d3e2;
}

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.btn-lg { padding: 13px 24px; font-size: 15px; border-radius: 11px; }
.btn-onphoto {
  background: rgba(10,16,26,.62);
  border-color: rgba(255,255,255,.26);
  color: #fff;
  backdrop-filter: blur(8px);
}
.btn-onphoto:hover:not(:disabled) {
  background: rgba(16,24,38,.82);
  border-color: rgba(255,255,255,.4);
}

.hero-foot { margin: 20px 0 0; font-size: 13px; color: #94a5ba; }

/* ---- the body of the page ---- */

.home-inner { max-width: 1120px; margin: 0 auto; padding: 0 28px 88px; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px;
  margin: -34px 0 0;   /* lift the stats up to overlap the hero edge */
  position: relative;
  z-index: 2;
}
.stat {
  background: linear-gradient(180deg, var(--bg-float), var(--bg-sunken));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 17px;
  box-shadow: var(--shadow-md), var(--hairline);
}
.stat-value { font-size: 27px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.stat-label { font-size: 12px; color: var(--ink-faint); margin-top: 5px; line-height: 1.4; }
.stat-hot  { border-color: rgba(248,81,73,.34); background: linear-gradient(180deg, rgba(248,81,73,.10), var(--bg-sunken)); }
.stat-hot .stat-value  { color: #ff9b93; }
.stat-calm .stat-value { color: #7fe6a3; }

/* Section headings with a rule running off to the right. */
.home-h {
  display: flex; align-items: center; gap: 16px;
  margin: 58px 0 20px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint);
}
.home-h::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(292px, 1fr));
  gap: 16px;
}
.feature {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,.032), transparent 60%);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px 20px 20px;
  box-shadow: var(--hairline);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  overflow: hidden;
}
.feature::before {
  /* A coloured hairline along the top edge, per feature. */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 70%);
  opacity: .8;
}
.feature:hover {
  border-color: var(--line-bright);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md), var(--hairline);
}

.feature-ic {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  margin-bottom: 14px;
  border-radius: 11px;
  background: rgba(34,199,224,.12);
  border: 1px solid rgba(34,199,224,.26);
  color: var(--accent-bright);
}
.feature-ic .ic { width: 20px; height: 20px; }
.feature-ic[data-tone="age"]       { background: rgba(124,92,255,.13); border-color: rgba(124,92,255,.3);  color: #b4a0ff; }
.feature-ic[data-tone="verdict"]   { background: rgba(63,185,80,.12);  border-color: rgba(63,185,80,.3);   color: #7fe6a3; }
.feature-ic[data-tone="alert"]     { background: rgba(210,153,34,.13); border-color: rgba(210,153,34,.32); color: #e8c15c; }
.feature-ic[data-tone="storm"]     { background: rgba(231,111,81,.13); border-color: rgba(231,111,81,.32); color: #f0917a; }

.feature h4 { margin: 0 0 9px; font-size: 16px; font-weight: 640; letter-spacing: -.018em; }
.feature p  { margin: 0; font-size: 13.5px; line-height: 1.62; color: var(--ink-muted); }

/* ---- how a report comes together ---- */

.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.flow li {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px 20px;
  background: rgba(0,0,0,.2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.flow-n {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  font-size: 16px; font-weight: 700;
  color: var(--accent-ink);
  background: linear-gradient(160deg, var(--accent-bright), var(--accent-deep));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 3px 12px var(--accent-glow);
}
.flow h4 { margin: 2px 0 6px; font-size: 15.5px; font-weight: 630; letter-spacing: -.015em; }
.flow p  { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-muted); }
.flow strong { color: var(--ink); font-weight: 620; }

.source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 10px;
}
.src {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 15px;
  background: rgba(0,0,0,.24);
  border: 1px solid var(--line-soft);
  border-left: 2px solid rgba(34,199,224,.5);
  border-radius: var(--radius-sm);
}
.src span { font-size: 13px; font-weight: 640; }
.src em { font-style: normal; font-size: 12.5px; color: var(--ink-faint); line-height: 1.45; }

.home-note {
  margin: 20px 0 0;
  padding: 16px 18px;
  font-size: 13.5px; line-height: 1.62;
  color: var(--ink-muted);
  background: rgba(34,199,224,.055);
  border: 1px solid rgba(34,199,224,.22);
  border-radius: var(--radius-sm);
}

.steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 13px; }
.steps li { font-size: 14.5px; line-height: 1.6; color: var(--ink-muted); }
.steps strong { color: var(--ink); font-weight: 620; }

.home-foot {
  margin: 56px 0 0; padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--ink-faint);
}


/* ==================================================================
   The phone

   The banner navigation wrapped onto three rows on a phone and ate
   half the screen — on a tool whose whole job is showing you a roof.
   Below 860px the navigation moves to a bar at the bottom, where a
   thumb already is, and the header shrinks to a name and a status.
   ================================================================== */

.mainnav .tab .ic { display: none; }

@media (max-width: 860px) {
  .topbar {
    padding: 8px 14px;
    gap: 10px;
    flex-wrap: nowrap;
  }
  .brand .sub { display: none; }
  .brand h1 { font-size: 16px; }
  .brand .mark { width: 28px; height: 28px; border-radius: 8px; }

  /* One pill only; a row of them is not worth a third of a phone. */
  .status-strip { gap: 6px; overflow: hidden; justify-content: flex-end; }
  .status-strip .pill { font-size: 11px; padding: 3px 9px; }
  .status-strip .pill:nth-child(n+2) { display: none; }

  /* Navigation becomes a bottom bar. */
  .mainnav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, rgba(18,23,34,.97), rgba(11,14,20,.99));
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(0,0,0,.45);
    backdrop-filter: blur(12px);
  }

  .mainnav .tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 7px 2px 5px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0;
    background: none;
    box-shadow: none;
    color: var(--ink-faint);
    min-height: 52px;
  }
  .mainnav .tab .ic {
    display: block;
    width: 21px; height: 21px;
    background: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center;  mask-position: center;
    -webkit-mask-size: contain;     mask-size: contain;
  }
  .mainnav .tab.is-active {
    color: var(--accent-bright);
    background: none;
    box-shadow: none;
  }

  /* The badge cannot sit inline in a stacked button. */
  .mainnav .tab .badge {
    position: absolute;
    transform: translate(14px, -6px);
  }
  .mainnav .tab { position: relative; }

  /* Keep the bar from covering the last line of anything. */
  .tabpanel { padding-bottom: 86px; }
  .home-inner { padding-bottom: 104px; }

  /* One column: the map on top, where it is the point, then the tools. */
  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: 44vh 1fr;
  }
  .panel { border-right: 0; border-top: 1px solid var(--line); order: 2; }
  .map-wrap { order: 1; }

  .homeview { padding-bottom: 0; }
  .hero-inner { padding-left: 20px; padding-right: 20px; }
  .home-inner { padding-left: 20px; padding-right: 20px; }
  .stat-row { margin-top: -24px; }
  .flow li { grid-template-columns: 38px 1fr; gap: 12px; padding: 15px 16px; }
}

@media (max-width: 520px) {
  .hero-title { font-size: clamp(27px, 8.4vw, 36px); }
  .hero-actions .btn-lg { width: 100%; justify-content: center; text-align: center; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .mainnav .tab { font-size: 9.5px; }
}

/* Bottom-bar icons, keyed off the tab each button already declares. */
.mainnav .tab[data-tab="home"] .ic { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2010.5%2012%203l9%207.5'/%3E%3Cpath%20d='M5%209.5V21h14V9.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2010.5%2012%203l9%207.5'/%3E%3Cpath%20d='M5%209.5V21h14V9.5'/%3E%3C/svg%3E"); }
.mainnav .tab[data-tab="lookup"] .ic { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2021s7-6.2%207-11a7%207%200%201%200-14%200c0%204.8%207%2011%207%2011z'/%3E%3Ccircle%20cx='12'%20cy='10'%20r='2.5'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%2021s7-6.2%207-11a7%207%200%201%200-14%200c0%204.8%207%2011%207%2011z'/%3E%3Ccircle%20cx='12'%20cy='10'%20r='2.5'/%3E%3C/svg%3E"); }
.mainnav .tab[data-tab="alerts"] .ic { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%208a6%206%200%201%200-12%200c0%207-3%208-3%208h18s-3-1-3-8'/%3E%3Cpath%20d='M13.7%2021a2%202%200%200%201-3.4%200'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M18%208a6%206%200%201%200-12%200c0%207-3%208-3%208h18s-3-1-3-8'/%3E%3Cpath%20d='M13.7%2021a2%202%200%200%201-3.4%200'/%3E%3C/svg%3E"); }
.mainnav .tab[data-tab="targets"] .ic { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='8'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3Cpath%20d='M12%201v3M12%2020v3M1%2012h3M20%2012h3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='8'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3Cpath%20d='M12%201v3M12%2020v3M1%2012h3M20%2012h3'/%3E%3C/svg%3E"); }
.mainnav .tab[data-tab="pipeline"] .ic { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='5'%20height='16'%20rx='1'/%3E%3Crect%20x='9.5'%20y='4'%20width='5'%20height='11'%20rx='1'/%3E%3Crect%20x='16'%20y='4'%20width='5'%20height='7'%20rx='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='5'%20height='16'%20rx='1'/%3E%3Crect%20x='9.5'%20y='4'%20width='5'%20height='11'%20rx='1'/%3E%3Crect%20x='16'%20y='4'%20width='5'%20height='7'%20rx='1'/%3E%3C/svg%3E"); }
.mainnav .tab[data-tab="storms"] .ic { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M17%2017a4%204%200%200%200%200-8%206%206%200%200%200-11.5-1.5A3.5%203.5%200%200%200%206%2017'/%3E%3Cpath%20d='m12%2013-2%204h3l-2%204'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M17%2017a4%204%200%200%200%200-8%206%206%200%200%200-11.5-1.5A3.5%203.5%200%200%200%206%2017'/%3E%3Cpath%20d='m12%2013-2%204h3l-2%204'/%3E%3C/svg%3E"); }
.mainnav .tab[data-tab="setup"] .ic { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3Cpath%20d='M19.4%2015a1.7%201.7%200%200%200%20.3%201.9l.1.1a2%202%200%201%201-2.8%202.8l-.1-.1a1.7%201.7%200%200%200-2.9%201.2V21a2%202%200%201%201-4%200v-.1A1.7%201.7%200%200%200%207%2019.4a1.7%201.7%200%200%200-1.9.3l-.1.1a2%202%200%201%201-2.8-2.8l.1-.1a1.7%201.7%200%200%200-1.2-2.9H1a2%202%200%201%201%200-4h.1A1.7%201.7%200%200%200%202.6%207a1.7%201.7%200%200%200-.3-1.9l-.1-.1a2%202%200%201%201%202.8-2.8l.1.1a1.7%201.7%200%200%200%201.9.3H7a1.7%201.7%200%200%200%201-1.5V1a2%202%200%201%201%204%200v.1a1.7%201.7%200%200%200%201%201.5%201.7%201.7%200%200%200%201.9-.3l.1-.1a2%202%200%201%201%202.8%202.8l-.1.1a1.7%201.7%200%200%200-.3%201.9V7a1.7%201.7%200%200%200%201.5%201H21a2%202%200%201%201%200%204h-.1a1.7%201.7%200%200%200-1.5%201z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3Cpath%20d='M19.4%2015a1.7%201.7%200%200%200%20.3%201.9l.1.1a2%202%200%201%201-2.8%202.8l-.1-.1a1.7%201.7%200%200%200-2.9%201.2V21a2%202%200%201%201-4%200v-.1A1.7%201.7%200%200%200%207%2019.4a1.7%201.7%200%200%200-1.9.3l-.1.1a2%202%200%201%201-2.8-2.8l.1-.1a1.7%201.7%200%200%200-1.2-2.9H1a2%202%200%201%201%200-4h.1A1.7%201.7%200%200%200%202.6%207a1.7%201.7%200%200%200-.3-1.9l-.1-.1a2%202%200%201%201%202.8-2.8l.1.1a1.7%201.7%200%200%200%201.9.3H7a1.7%201.7%200%200%200%201-1.5V1a2%202%200%201%201%204%200v.1a1.7%201.7%200%200%200%201%201.5%201.7%201.7%200%200%200%201.9-.3l.1-.1a2%202%200%201%201%202.8%202.8l-.1.1a1.7%201.7%200%200%200-.3%201.9V7a1.7%201.7%200%200%200%201.5%201H21a2%202%200%201%201%200%204h-.1a1.7%201.7%200%200%200-1.5%201z'/%3E%3C/svg%3E"); }

/* ==================================================================
   Setup: connecting an outside service from the page
   ================================================================== */
.setup-box { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft, var(--line)); }
.setup-steps {
  margin: 0 0 12px; padding-left: 22px;
  font-size: 13px; line-height: 1.55; color: var(--ink-muted);
}
.setup-steps li { margin: 0 0 6px; }
.setup-steps li::marker { color: var(--accent); font-weight: 650; }
.setup-status { margin: 10px 0 0; }
.setup-status.is-ok   { color: #7fe6a3; }
.setup-status.is-bad  { color: #ff8b82; }
.setup-status.is-busy { color: var(--ink-muted); }

/* ==================================================================
   Home: what a report looks like
   The right-hand column holds real report cards (built by the same code
   as a live report) with sample numbers. Same classes, same look.
   ================================================================== */
.sample {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 32px;
  align-items: start;
}
.sample-copy { padding-top: 6px; }
.sample-kicker {
  margin: 0 0 12px;
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--ink);
}
.sample-copy > p:not(.sample-kicker) { color: var(--ink-muted); line-height: 1.6; margin: 0 0 16px; }
.sample-points {
  list-style: none;
  margin: 0 0 20px; padding: 0;
  display: grid; gap: 10px;
}
.sample-points li {
  position: relative;
  padding-left: 26px;
  color: var(--ink-muted);
  line-height: 1.55;
  font-size: 14px;
}
.sample-points li strong { color: var(--ink); }
.sample-points li::before {
  content: "";
  position: absolute; left: 0; top: 7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: rgba(34,199,224,.16);
  border: 1px solid rgba(34,199,224,.5);
}
.sample-points li::after {
  content: "";
  position: absolute; left: 4px; top: 10px;
  width: 6px; height: 4px;
  border-left: 2px solid var(--accent-bright);
  border-bottom: 2px solid var(--accent-bright);
  transform: rotate(-45deg);
}

.sample-report {
  position: relative;
  padding: 34px 14px 14px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 40%),
    var(--bg-sunken);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md), var(--hairline);
  font-size: 14px;
  /* Room for the ribbon. */
  overflow: hidden;
}
.sample-report .card { margin: 0 0 10px; }
.sample-report .card:last-child { margin-bottom: 0; }
.sample-ribbon {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 7px 14px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-bright);
  background: rgba(34,199,224,.10);
  border-bottom: 1px solid rgba(34,199,224,.28);
}

@media (max-width: 860px) {
  .sample { grid-template-columns: 1fr; gap: 20px; }
  .sample-report { padding: 34px 10px 10px; }
}

/* The day-range buttons for hail paths: the one in use is marked. */
#hailPathsButtons .btn.is-active { border-color: var(--accent); color: var(--accent-bright); box-shadow: 0 0 0 1px var(--accent) inset; }


/* EagleView: the order form on a building's report, and the Setup box. */
.ev-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
}
.ev-form .span-2 { grid-column: 1 / -1; }
.ev-form .narrow { min-width: 0; }
.ev-form .check { grid-column: 1 / -1; }
/* Product names are long ("Commercial Report (commercial) — $79.00–$89.50"): one per row. */
.ev-form select { grid-column: 1 / -1; }
.ev-form-box { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft, var(--line)); }
.ev-connection { margin-top: 12px; }
.ev-order.ev-completed { border-left: 3px solid #3fb950; }
.ev-order.ev-in-progress, .ev-order.ev-placed { border-left: 3px solid var(--accent); }
.ev-order.ev-cancelled, .ev-order.ev-failed { border-left: 3px solid #f85149; opacity: .85; }
.ev-order .big-stat { font-size: 24px; margin: 6px 0 2px; }
code.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--accent-bright); word-break: break-all; }
@media (max-width: 480px) { .ev-form { grid-template-columns: 1fr; } }


/* ==================================================================
   Phone: one page that scrolls, the map at the top of it — 26 Sep 2026

   Before this, a phone got the desktop arrangement squeezed: the map
   pinned in the top pane and the report scrolling inside the sliver
   underneath. Worse, the map's pane was told to be 44vh and the map
   itself 55vh, so the map spilled over the top of the panel and sat on
   the Look up button. Eli's words: it "takes up three quarters of the
   page" and does not get out of the way.

   Now, up to tablet width, the page is one column that scrolls as a
   whole: the map on top at about half the screen, the tools and the
   report below it. Scroll and the map goes up out of the way; scroll
   back and it returns. A desktop keeps its two panes (the rules above).
   Source order does the work — this block comes last on purpose.
   ================================================================== */
@media (max-width: 900px) {
  body:not(.on-home) { overflow-y: auto; overflow-x: hidden; }
  /* A column, not a grid: the map first (the markup has the panel first), then the tools. */
  .layout {
    display: flex;
    flex-direction: column;
    height: auto;
    min-height: 0;
    flex: 0 0 auto;
  }
  .map-wrap {
    order: 1;
    flex: 0 0 auto;
    position: relative;
    height: 50vh;
    height: 50svh;      /* phone browsers whose toolbars come and go */
    min-height: 260px;
    max-height: 480px;
  }
  .panel {
    order: 2;
    flex: 0 0 auto;
    display: block;
    height: auto;
    overflow: visible;
    border-top: 1px solid var(--line);
    border-bottom: 0;
  }
  .tabpanel { overflow: visible; }
}

/* Second opinion on hail: which source saw what. */
.item.so-xweather-only { border-left: 3px solid var(--accent); }
.item.so-noaa-only { border-left: 3px solid var(--ink-faint); }
.item.so-unknown { opacity: .7; }

/* Confirmed on the ground: photos and the form. */
.obs-photo { display: block; margin: 8px 0 4px; max-width: 220px; }
.obs-photo img { display: block; width: 100%; border-radius: 8px; border: 1px solid var(--line); }
.obs-preview { max-width: 220px; border-radius: 8px; border: 1px solid var(--line); grid-column: 1 / -1; }
.obs-photo-btn { text-align: center; cursor: pointer; }
.obs-item { border-left: 3px solid #ffffff; }

/* The estimator hand-off: the paragraph that teaches it, and the numbers as they travel. */
.teach-box { margin-top: 10px; }
.teach-text { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; line-height: 1.45; color: var(--ink-muted); background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 8px 0; overflow-wrap: anywhere; }

/* Leads: status pills, the note, the week strip. */
.lead-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; }
.tag.lead-new { color: var(--ink-muted); }
.tag.lead-pursue { background: rgba(47,208,216,.16); color: var(--accent-bright); }
.tag.lead-contacted { background: rgba(124,92,255,.18); color: #c7b8ff; }
.tag.lead-quoted { background: rgba(255,209,102,.18); color: #ffd166; }
.tag.lead-won { background: rgba(63,185,80,.2); color: #6ee28a; }
.tag.lead-monitor { background: rgba(255,255,255,.06); color: var(--ink-muted); }
.tag.lead-pass { background: rgba(248,81,73,.14); color: #ff8a84; opacity: .9; }
.tag-btn.is-current { outline: 2px solid currentColor; outline-offset: 1px; }
.lead-note { width: 100%; min-height: 56px; resize: vertical; font: inherit; margin-top: 6px; }
.lead-history { margin-top: 10px; }
.lead-row-note { font-style: italic; }
.week-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 10px; }
.week-cell { background: var(--bg-raised); border: 1px solid var(--line); border-radius: 10px; padding: 10px 10px 8px; text-align: center; }
.week-cell.is-zero { opacity: .55; }
.week-n { font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.week-label { font-size: 11.5px; color: var(--ink-muted); margin-top: 2px; }
.week-feed .item { cursor: pointer; }
.pipeline-chips { margin: 4px 0 10px; }
@media (max-width: 480px) { .week-strip { grid-template-columns: repeat(3, 1fr); } }

/* Canvass: the buildings under a storm. */
.canvass-controls { margin: 8px 0 4px; }
.canvass-row { cursor: default; }

/* ---------------- the Pipeline board ----------------
   A page of its own, like Home: columns per status, a card per building.
   Dragging works with a mouse; the Move list on each card does the same
   with a thumb. */

.boardview {
  overflow-y: auto;
  height: calc(100% - 58px);
  background:
    radial-gradient(900px 420px at 50% -160px, rgba(23,182,204,.08), transparent 62%),
    var(--bg);
}
.boardview[hidden] { display: none; }
.board-inner { max-width: 1600px; margin: 0 auto; padding: 22px 20px 40px; }
.board-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.board-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.board-hint { margin: 4px 0 0; max-width: 640px; }
.board-tools { display: flex; gap: 8px; align-items: center; min-width: 260px; }
.board-tools .input { padding: 8px 11px; }

.week-strip--board { grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 16px 0 6px; }
.week-details { margin: 0 0 14px; }
.week-details > summary { cursor: pointer; font-size: 12.5px; color: var(--ink-faint); list-style: none; user-select: none; }
.week-details > summary::before { content: "▸ "; }
.week-details[open] > summary::before { content: "▾ "; }
.week-details .week-feed { margin-top: 8px; max-width: 760px; }

.board {
  display: grid;
  grid-template-columns: repeat(7, minmax(186px, 1fr));
  gap: 10px;
  align-items: start;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x proximity;
}
.board-none { grid-column: 1 / -1; }
.board.is-dragging .board-card:not(.is-dragging) { pointer-events: none; }

.board-col {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line-bright);
  border-radius: var(--radius);
  min-height: 160px;
  display: flex; flex-direction: column;
  scroll-snap-align: start;
  transition: background .12s, border-color .12s;
}
.board-col.is-over { background: var(--bg-float); border-color: var(--accent); }
.board-col.lead-pursue   { border-top-color: var(--accent); }
.board-col.lead-contacted{ border-top-color: var(--violet); }
.board-col.lead-quoted   { border-top-color: var(--hail-1); }
.board-col.lead-won      { border-top-color: var(--ok); }
.board-col.lead-pass     { border-top-color: rgba(248,81,73,.55); }
.board-col-head { padding: 10px 11px 8px; border-bottom: 1px solid var(--line-soft); }
.board-col-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.board-col-title .tag { font-size: 11.5px; padding: 3px 9px; }
.board-col-count { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--ink); }
.board-col-sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 5px; min-height: 14px; }
.board-cards { display: flex; flex-direction: column; gap: 8px; padding: 9px; min-height: 90px; flex: 1 1 auto; }
.board-empty { font-size: 12px; color: var(--ink-faint); padding: 14px 6px; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius-sm); }

.board-card {
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 11px 8px;
  cursor: pointer;
  user-select: none;
  transition: transform .1s, border-color .12s, opacity .12s;
}
.board-card:hover, .board-card:focus-visible { border-color: var(--line-bright); transform: translateY(-1px); outline: none; }
.board-card.is-dragging { opacity: .45; }
.board-card.is-moving { opacity: .5; pointer-events: none; }
.board-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.board-card-title { font-size: 13.5px; font-weight: 650; line-height: 1.25; overflow-wrap: anywhere; }
.board-card-head .tag { flex: 0 0 auto; font-family: var(--mono); }
.tag.hail-1 { color: var(--hail-1); border-color: rgba(255,209,102,.35); background: rgba(255,209,102,.1); }
.tag.hail-2 { color: var(--hail-2); border-color: rgba(244,162,97,.35); background: rgba(244,162,97,.1); }
.tag.hail-3 { color: var(--hail-3); border-color: rgba(231,111,81,.4); background: rgba(231,111,81,.12); }
.tag.hail-4 { color: #ff8a84; border-color: rgba(193,18,31,.5); background: rgba(193,18,31,.18); }
.board-card-sub { font-size: 12px; color: var(--ink-muted); margin-top: 4px; }
.board-card-note {
  font-size: 12px; color: var(--ink); margin-top: 6px; font-style: italic;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.board-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line-soft); }
.board-days { font-size: 11px; color: var(--ink-faint); flex: 1 1 auto; }
.initials {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; letter-spacing: .02em;
  background: var(--violet-deep); color: #fff;
}
.board-move {
  font: inherit; font-size: 11.5px; color: var(--ink-muted);
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 6px;
  padding: 3px 6px; cursor: pointer; max-width: 108px;
}
.board-move:focus { outline: none; border-color: var(--accent); }

@media (max-width: 900px) {
  .boardview { height: auto; overflow: visible; }
  .board-inner { padding: 14px 16px 32px; }
  .board-tools { min-width: 0; width: 100%; }
  .week-strip--board { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .board {
    display: flex;
    gap: 10px;
    scroll-snap-type: x mandatory;
    margin: 0 -16px; padding: 0 16px 12px;
  }
  .board-col { flex: 0 0 82vw; max-width: 340px; }
  .board-none { flex: 1 1 auto; }
  .board-card { cursor: default; }
}

/* A tracked building under another name, right here. */
.nearby-tracked .btn-row { margin-top: 8px; flex-wrap: wrap; }

/* Company details on Setup; who is here on a report. */
.company-form { gap: 10px; margin: 8px 0 10px; }
.company-form .label { display: block; margin-bottom: 4px; }
.company-form .input { width: 100%; box-sizing: border-box; }
.company-form textarea.input { min-height: 84px; resize: vertical; font: inherit; }
.business-line { margin-top: 6px; }

/* The roof over the years: a strip of flights. */
.roof-history { margin-top: 12px; }
.subhead { font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); margin: 10px 0 6px; }
.history-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.history-cell { margin: 0; flex: 0 0 auto; width: 96px; scroll-snap-align: start; }
.history-img, .history-blank { display: block; width: 96px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: var(--bg-sunken); }
.history-blank { display: flex; align-items: center; justify-content: center; font-size: 10.5px; color: var(--ink-faint); }
.history-cell.is-change .history-img { outline: 2px solid var(--hail-1); outline-offset: 1px; }
.history-year { font-size: 11px; color: var(--ink-muted); margin-top: 3px; text-align: center; }
.history-cell.is-change .history-year { color: var(--hail-1); font-weight: 650; }
.history-mark { margin-top: 8px; }
.history-mark .input { max-width: 200px; }

/* The map's caption: what it is showing, on the map view. */
.map-mode {
  position: absolute; top: 12px; left: 12px; z-index: 6;
  font-size: 11.5px; color: var(--ink-muted);
  background: rgba(14,17,22,.82); border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 10px; backdrop-filter: blur(4px); pointer-events: none;
  max-width: calc(100% - 90px);
}
.map-mode[hidden] { display: none; }

/* ---------------- one building as a page ---------------- */
.building-inner { max-width: 1240px; margin: 0 auto; padding: 18px 20px 40px; }
.building-inner[hidden] { display: none; }
.board-inner[hidden] { display: none; }
.building-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.building-actions { margin: 0; }
.building-head { margin: 14px 0 16px; }
.building-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.building-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.building-title-row .tag { font-size: 11.5px; padding: 3px 9px; }
.building-sub { margin: 4px 0 0; font-size: 13px; color: var(--ink-muted); }
.building-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.building-col { display: grid; gap: 14px; }
.building-col .card { margin: 0; }
.aerial { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--bg-sunken); aspect-ratio: 3 / 2; }
.aerial-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.aerial-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.contact-name { font-size: 15px; font-weight: 650; margin-bottom: 6px; }
.contact-links { display: flex; gap: 8px; flex-wrap: wrap; }
.contact-form { gap: 8px; margin-bottom: 8px; }
.contact-form .label { display: block; margin-bottom: 4px; }
.contact-form .input { width: 100%; box-sizing: border-box; }
.board-card-contact { color: var(--ink); }
@media (max-width: 900px) {
  .building-inner { padding: 14px 16px 32px; }
  .building-grid { grid-template-columns: 1fr; }
  .building-col--side { order: -1; }
}


/* ==================================================================
   Each working tab as a page — 9 Oct 2026

   Reports, Alerts, Targets and Storms used to be one screen with a
   different sidebar. Each is now a page: a hero that says what it is for,
   the tab's tools at full width under it, then how it helps, how it
   works and where the numbers come from. The map is not on the page; it
   opens as the familiar two panes when something wants it, and the page
   comes back with Back or the tab. Where each page's identity lives is
   its hero backdrop — everything under it shares the one quiet system.
   ================================================================== */

/* ---- the page frame ---- */
body.page-mode .layout {
  display: block;
  overflow-y: auto;
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--bg);
}
body.page-mode .map-wrap { display: none; }
body.page-mode .panel {
  display: block;
  height: auto;
  overflow: visible;
  border-right: 0;
  border-top: 0;
  background: transparent;
}
body.page-mode .tabpanel { overflow: visible; }
body.page-mode .tabpanel.is-active {
  display: block;
  max-width: 1120px;
  margin: 0 auto;
  padding: 34px 28px 8px;
  box-sizing: border-box;
}
body.page-mode .tabpanel[data-panel="targets"],
body.page-mode .tabpanel[data-panel="storms"],
body.page-mode .tabpanel[data-panel="setup"] { max-width: 920px; }

/* Reports: the search is in the hero; the panel has nothing to say until there is a report, and a report opens the map view. */
body.page-mode.tab-lookup .panel { display: none; }

/* Alerts: two columns — the territory on the left, what has fired on the right. */
body.page-mode .tabpanel.is-active[data-panel="alerts"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: 32px;
  align-items: start;
}
.pane { min-width: 0; }
.pane-main > .panel-head:first-child { margin-top: 0; }
body.page-mode .pane-side { position: sticky; top: 18px; }
body.page-mode .tabpanel[data-panel="alerts"] .panel-head { margin-top: 0; }

/* Storms: the map controls belong beside the map; the page's hero already offers the map. */
body.page-mode #stormMapControls { display: none; }
body.page-mode #openStormMapBtn,
body.page-mode #showTargetsMapBtn { display: none; }
.map-controls { margin-bottom: 4px; }

/* The map view's own header: the way back. */
.work-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
  flex: none;
}
.work-bar[hidden] { display: none; }
.work-back {
  font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--accent-bright);
  background: rgba(23,182,204,.1);
  border: 1px solid rgba(23,182,204,.3);
  border-radius: 999px;
  padding: 4px 11px;
  cursor: pointer; white-space: nowrap;
}
.work-back:hover { background: rgba(23,182,204,.18); }
.work-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.work-bar-note { font-size: 12px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.btn-row--tight { margin: 0; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ---- the hero ---- */
.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
}
.page-hero[hidden] { display: none; }
.page-hero-art { position: absolute; inset: 0; z-index: -2; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; }
.page-hero-inner {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) 28px clamp(36px, 5vw, 60px);
}
.page-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 14px;
  font-size: 13.5px; font-weight: 650; letter-spacing: -.005em;
  color: var(--page-tone, var(--accent-bright));
}
.page-kicker::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 18%, transparent); }
.page-headline {
  margin: 0 0 16px;
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 700;
  color: #fff;
  max-width: 24ch;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.page-lede {
  margin: 0;
  max-width: 64ch;
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.62;
  color: #c7d3e2;
}
.page-hero-tools { margin-top: 26px; max-width: 780px; }
.page-hero-tools[hidden] { display: none; }
.page-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.page-hero-actions[hidden] { display: none; }
.page-hero-actions .btn:not(.btn-primary) {
  background: rgba(10,16,26,.62);
  border-color: rgba(255,255,255,.22);
  color: #fff;
}
.page-hero-actions .btn:not(.btn-primary):hover:not(:disabled) { background: rgba(16,24,38,.82); border-color: rgba(255,255,255,.4); }

/* The search, in the hero: one big box, its label implied by the hero. */
.page-hero-tools .lookup-tools .label { display: none; }
.page-hero-tools .lookup-tools .row .input {
  font-size: 16px; padding: 14px 16px;
  background: rgba(10,16,26,.72);
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.page-hero-tools .lookup-tools .row .input:focus { border-color: var(--accent); }
.page-hero-tools .lookup-tools .row .btn { padding: 14px 22px; font-size: 15px; }
.page-hero-tools .lookup-tools .hint { color: #a9b7c9; margin-top: 10px; }
.page-hero-tools .lookup-tools .btn-row { margin-top: 12px; }
.page-hero-tools .lookup-tools #inspectBtn { background: rgba(10,16,26,.62); border-color: rgba(255,255,255,.22); color: #fff; }

/* ---- each page's backdrop: where its identity lives ---- */

/* Reports: the roof itself — the owner's own job — and the search over it. */
.page-hero[data-tone="reports"] { --page-tone: var(--accent-bright); }
.page-hero[data-tone="reports"] .page-hero-art {
  background: #0a1420 url("/img/hero.jpg") 60% 38% / cover no-repeat;
  filter: saturate(.8) contrast(1.04) brightness(.88);
}
.page-hero[data-tone="reports"]::before {
  background:
    linear-gradient(180deg, rgba(8,12,20,.2) 0%, transparent 35%, rgba(11,14,20,.92) 100%),
    linear-gradient(100deg, rgba(8,12,20,.95) 0%, rgba(8,12,20,.86) 38%, rgba(8,12,20,.48) 70%, rgba(8,12,20,.22) 100%);
}

/* Alerts: a watch area — rings round a point — with a hail path crossing it. */
.page-hero[data-tone="alerts"] { --page-tone: #ffd166; }
.page-hero[data-tone="alerts"] .page-hero-art {
  background:
    radial-gradient(circle at 78% 58%, rgba(255,209,102,.9) 0 4px, transparent 5px),
    radial-gradient(circle at 78% 58%, transparent 0 96px, rgba(255,209,102,.34) 97px 99px, transparent 100px 168px, rgba(255,209,102,.22) 169px 171px, transparent 172px 240px, rgba(255,209,102,.13) 241px 243px, transparent 244px 312px, rgba(255,209,102,.07) 313px 315px, transparent 316px),
    linear-gradient(118deg, transparent 50%, rgba(231,111,81,.0) 54%, rgba(231,111,81,.22) 60%, rgba(231,111,81,.22) 66%, rgba(231,111,81,0) 72%),
    radial-gradient(900px 360px at 85% 10%, rgba(255,209,102,.1), transparent 70%),
    var(--bg-raised);
}
.page-hero[data-tone="alerts"]::before {
  background: linear-gradient(90deg, rgba(18,23,34,.92) 0%, rgba(18,23,34,.7) 45%, rgba(18,23,34,0) 75%);
}

/* Targets: a block of building footprints, a few of them lit by the hail that landed. */
.page-hero[data-tone="targets"] { --page-tone: #c7b8ff; }
.page-hero[data-tone="targets"] .page-hero-art {
  background-color: var(--bg-raised);
  background-image:
    radial-gradient(800px 340px at 85% 30%, rgba(124,92,255,.14), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='270'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.045'%3E%3Cpath d='M0 68H320M0 136H320M0 204H320M80 0V270M160 0V270M240 0V270'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.035'%3E%3Crect x='14' y='16' width='48' height='32' rx='2'/%3E%3Crect x='96' y='24' width='46' height='26' rx='2'/%3E%3Crect x='178' y='14' width='44' height='36' rx='2'/%3E%3Crect x='16' y='88' width='42' height='30' rx='2'/%3E%3Crect x='256' y='86' width='50' height='34' rx='2'/%3E%3Crect x='98' y='156' width='46' height='30' rx='2'/%3E%3Crect x='180' y='154' width='42' height='34' rx='2'/%3E%3Crect x='14' y='222' width='54' height='32' rx='2'/%3E%3Crect x='258' y='220' width='46' height='30' rx='2'/%3E%3C/g%3E%3Cg%3E%3Crect x='256' y='18' width='48' height='32' rx='2' fill='%23c1121f' fill-opacity='.28'/%3E%3Crect x='178' y='86' width='48' height='32' rx='2' fill='%23e76f51' fill-opacity='.24'/%3E%3Crect x='14' y='154' width='54' height='34' rx='2' fill='%23f4a261' fill-opacity='.18'/%3E%3Crect x='258' y='156' width='42' height='30' rx='2' fill='%23ffd166' fill-opacity='.14'/%3E%3C/g%3E%3C/svg%3E");
  background-size: auto, 320px 270px;
  background-position: center, 30px 14px;
  background-repeat: no-repeat, repeat;
}
.page-hero[data-tone="targets"]::before {
  background:
    linear-gradient(180deg, transparent 55%, rgba(18,23,34,.9) 100%),
    linear-gradient(90deg, rgba(18,23,34,.97) 0%, rgba(18,23,34,.88) 45%, rgba(18,23,34,.3) 100%);
}

/* Storms: a radar sweep and the swath it is painting. */
.page-hero[data-tone="storms"] { --page-tone: #f0917a; }
.page-hero[data-tone="storms"] .page-hero-art {
  background:
    conic-gradient(from 210deg at 80% 55%, rgba(231,111,81,0) 0deg, rgba(231,111,81,.05) 40deg, rgba(231,111,81,.3) 78deg, rgba(231,111,81,0) 80deg),
    radial-gradient(circle at 80% 55%, rgba(240,145,122,.9) 0 3px, transparent 4px),
    radial-gradient(circle at 80% 55%, transparent 0 70px, rgba(231,111,81,.22) 71px 72px, transparent 73px 140px, rgba(231,111,81,.16) 141px 142px, transparent 143px 210px, rgba(231,111,81,.1) 211px 212px, transparent 213px 280px, rgba(231,111,81,.06) 281px 282px, transparent 283px),
    radial-gradient(220px 120px at 64% 40%, rgba(193,18,31,.35), transparent 70%),
    radial-gradient(300px 160px at 70% 46%, rgba(244,162,97,.22), transparent 70%),
    var(--bg-raised);
}
.page-hero[data-tone="storms"]::before {
  background: linear-gradient(90deg, rgba(18,23,34,.94) 0%, rgba(18,23,34,.72) 44%, rgba(18,23,34,0) 72%);
}

/* Setup: quiet. Settings do not need a picture. */
.page-hero[data-tone="setup"] { --page-tone: #7fe6a3; }
.page-hero[data-tone="setup"] .page-hero-art {
  background:
    radial-gradient(700px 280px at 90% 0%, rgba(63,185,80,.1), transparent 70%),
    var(--bg-raised);
}
.page-hero[data-tone="setup"] .page-hero-inner { padding-top: clamp(32px, 4vw, 48px); padding-bottom: clamp(28px, 3.5vw, 40px); }

/* ---- under the tools: how it helps, how it works, the sources ---- */
.page-more { margin-top: 28px; }
.page-more[hidden] { display: none; }
.page-more-inner { max-width: 1120px; margin: 0 auto; padding: 0 28px 84px; }
.page-more .home-h:first-child { margin-top: 24px; }
.page-more .feature-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.feature-ic[data-tone="measure"]   { background: rgba(23,182,204,.13);  border-color: rgba(23,182,204,.3);  color: #6fdcea; }
.feature-ic[data-tone="territory"] { background: rgba(110,168,255,.12); border-color: rgba(110,168,255,.3); color: #9cc4ff; }

/* ---- on a phone ---- */
@media (max-width: 900px) {
  body.page-mode .layout { display: block; overflow: visible; height: auto; flex: 0 0 auto; }
  body.page-mode .panel { border-top: 0; }
  .page-hero-inner { padding: 30px 20px 28px; }
  .page-headline { max-width: none; }
  body.page-mode .tabpanel.is-active { padding: 22px 16px 8px; }
  body.page-mode .tabpanel.is-active[data-panel="alerts"] { display: block; }
  body.page-mode .pane-side { position: static; margin-top: 22px; }
  .page-more-inner { padding: 0 16px 110px; }
  .page-hero-tools .lookup-tools .row { flex-direction: column; align-items: stretch; }
  .page-hero-tools .lookup-tools .row .btn { width: 100%; }
  .page-hero-actions .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
  .work-bar { position: sticky; top: 0; z-index: 5; }
}