/* IAQNet Dashboard — "Mosaic Grid Architecture" (Technical Minimalist).
   Flat, bordered, blueprint-inspired, two-tone: a dark sidebar rail
   (--side-bg) against the original light-paper main content area
   (--paper), white cards, and a fresh "clean-air" sky blue (--brand) as
   the one accent hue. Panels use a crisp, no-blur offset shadow
   (drafting-table style) rather than a soft Material lift. Revised
   2026-08-04, iteratively: panels got a shadow/glow so they'd stop
   flowing into the page; the accent hue moved from forest green to sky
   blue; the page went through dark-charcoal and mid-gray main-area phases
   before landing on the original light paper for the main area, paired
   with a dark sidebar rail for contrast between the nav and the work
   area. Deliberately single-theme — this identity IS the design, not a
   light-mode default awaiting a dark counterpart. */
:root{
  /* Two zones, two tones: the main content area is the original light
     paper (--paper) with dark text. The sidebar is its own darker pocket
     (--side-bg) with light text, giving it real contrast against the
     lighter main area instead of just a hairline border. .side{} below
     re-scopes --ink/--line/--accent-text locally to light-on-dark for
     everything inside it; .card/.inset need no special casing since white
     panels already contrast fine against the root's dark-text/light-paper
     defaults. */
  --paper:#F7F7F5; --side-bg:#201F1D; --panel:#FFFFFF; --panel-hover:#E3F6FC; --brand:#1C7FB0; --grid:#3A3A38;
  --sky:#0FA8D6;
  --line:rgba(58,58,56,.18); --line-faint:rgba(58,58,56,.1);
  --ink:#1A2420; --ink-soft:#5B6660; --ink-faint:#8A928C;
  --accent-text:var(--brand);
  --coral:#FF8C69; --mint:#9EFFBF; --gold:#F4D35E;
  /* Semantic status — darker/more saturated than the decorative accent
     swatches above so a 8px dot and short text stay legible on paper. */
  --good:#1F7A4D; --moderate:#B8860E; --unhealthy:#D9622E; --hazardous:#B23A2E;
  --danger:#B23A2E;
  --accent:var(--brand);
  --r:2px; /* the only corner radius this system uses, per spec: 0 or 2px */

  --font-display:"Space Grotesk",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --font-body:"General Sans",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background-color:var(--paper); color:var(--ink);
  font-family:var(--font-body); line-height:1.55; -webkit-font-smoothing:antialiased;
  /* Mosaic background: seamless tile of interlocking panels divided by hairlines.
     Dark stroke on the light paper main area (the dark sidebar has its own
     opaque background and never shows this pattern). */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%233A3A38' stroke-opacity='0.14' stroke-width='0.75'%3E%3Crect x='0' y='0' width='140' height='140'/%3E%3Crect x='140' y='0' width='100' height='90'/%3E%3Crect x='140' y='90' width='100' height='60'/%3E%3Crect x='0' y='140' width='90' height='100'/%3E%3Crect x='90' y='140' width='80' height='55'/%3E%3Crect x='90' y='195' width='80' height='45'/%3E%3Crect x='170' y='150' width='70' height='90'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat;
}
h1,h2,h3,.disp{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;line-height:.98;text-wrap:balance}
a{color:var(--accent-text);text-decoration:none}
.muted{color:var(--ink-soft)}.accent{color:var(--accent-text)}.tiny{font-size:.8rem}
.row{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.grow{flex:1}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}

/* eyebrow / mono label convention used throughout for technical metadata */
.eyebrow,.mono-label{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}

/* surfaces — panels are plain white (--panel) against the light-paper main
   area (--paper), shifting to a fresh pale-blue wash (--panel-hover, --sky)
   on hover. Depth comes from two stacked shadows: a crisp no-blur offset
   (drafting-table style, keeps the flat/technical personality) plus a soft
   ambient glow underneath (real lift, not just an outline) — together they
   make panels pop off the page instead of reading as a bordered rectangle. */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem;
  box-shadow:4px 4px 0 rgba(0,0,0,.14), 0 14px 32px -10px rgba(0,0,0,.35)}
.card.sm{padding:1rem}
.inset{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:2px 2px 0 rgba(0,0,0,.10), 0 8px 20px -9px rgba(0,0,0,.28)}

/* buttons — ghost + solid brand blue, sharp corners, no shadow */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font-family:var(--font-mono);font-weight:600;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  min-height:38px;padding:.5rem 1rem;cursor:pointer;border-radius:var(--r);
  background:transparent;color:var(--ink);border:1px solid var(--grid);
  transition:background-color .15s linear,color .15s linear,border-color .15s linear}
.btn:hover{border-color:var(--brand);color:var(--brand)}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.primary:hover{background:#125E82;color:#fff}
.btn.sm{min-height:30px;padding:.3rem .7rem;font-size:.66rem}
.btn.active{background:var(--brand);color:#fff;border-color:var(--brand)}

/* inputs */
label{display:block;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin:.6rem 0 .3rem}
input,select{width:100%;font-family:var(--font-body);font-size:.92rem;color:var(--ink);background:var(--panel);
  border:1px solid var(--grid);border-radius:var(--r);padding:.6rem .85rem}
input:focus,select:focus{outline:none;border-color:var(--brand)}

/* layout */
.app{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
/* The sidebar is its own dark pocket, contrasting against the lighter
   main content area — re-scopes ink/line/accent back to light-on-dark
   locally, same pattern the surfaces used to use for panels. */
.side{background:var(--side-bg);padding:1.5rem 1rem;display:flex;flex-direction:column;gap:.3rem;
  border-right:1px solid rgba(255,255,255,.08);box-shadow:2px 0 16px rgba(0,0,0,.25);
  --ink:#ECEDEA; --ink-soft:#A9ACA8; --ink-faint:#84867F; --accent-text:#5DC8EC;
  color:var(--ink)}
.brandmark{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:700;font-size:1.05rem;padding:.5rem .6rem 1.1rem}
.brandmark .dot{width:32px;height:32px;display:grid;place-items:center;border-radius:var(--r);background:var(--brand);color:#fff;font-size:1rem}
.nav a{display:block;padding:.6rem .7rem;border-radius:var(--r);color:var(--ink-soft);
  font-family:var(--font-mono);font-weight:700;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}
.nav a:hover{color:var(--accent-text);background:rgba(255,255,255,.07)}
.main{padding:2rem;max-width:1200px}
.crumbs{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:1rem}
.crumbs a:hover{color:var(--accent-text)}
h1.page{font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:.3rem;color:var(--brand)}
.sub{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-soft);margin-bottom:1.5rem}
@media(max-width:820px){.app{grid-template-columns:1fr}.side{position:sticky;top:0;z-index:5;border-right:none;border-bottom:1px solid rgba(255,255,255,.08)}}

/* site / EP grid — real gap (not a 1px hairline) so each card's own shadow
   and glow is visible on all sides instead of being cancelled out by a
   shared bento background. .tile (EP detail's small metric readout grid)
   stays flat/bordered — a unified instrument cluster, not independent
   navigable panels, so it keeps the tighter old bento treatment. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.1rem}
.tile{border:none}
.site-card,.ep-card{padding:1.25rem;cursor:pointer;transition:background-color .15s linear,border-color .15s linear,box-shadow .15s linear;border-left:3px solid transparent}
.site-card:hover,.ep-card:hover{background:var(--panel-hover);border-left-color:var(--sky);
  box-shadow:4px 4px 0 rgba(58,58,56,.10), 0 14px 32px -8px rgba(44,95,138,.35)}
.site-card .name,.ep-card .name{font-family:var(--font-display);font-weight:700;font-size:1.05rem;margin-bottom:.15rem;color:var(--ink)}
.site-card .loc,.ep-card .loc{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.75rem}

/* status badge — square dot + mono uppercase, per spec (no pill/shadow) */
.status{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-mono);font-size:.66rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:.25rem .6rem;border-radius:var(--r);border:1px solid currentColor}
.status .dot{width:8px;height:8px;border-radius:0;background:currentColor}
.status.good{color:var(--good)}
.status.moderate{color:var(--moderate)}
.status.unhealthy{color:var(--unhealthy)}
.status.hazardous{color:var(--hazardous)}
.status.stale{color:var(--ink-faint)}

/* dense metric readout */
.metrics-mini{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.6rem;font-family:var(--font-mono);font-size:.72rem;color:var(--ink-soft)}
.metrics-mini b{color:var(--ink);font-weight:700}
.spark{display:block;margin-top:.6rem}
.spark path.fill{fill:var(--brand);opacity:.1}
.spark path.line{fill:none;stroke:var(--brand);stroke-width:1.4}
.spark circle{fill:var(--brand)}

/* full metric tiles (EP detail) — numbers in mono (instrument-readout feel) */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;background:var(--line);margin-bottom:1.5rem}
.tile{background:var(--panel);padding:1.1rem;text-align:left}
.tile .n{font-family:var(--font-mono);font-weight:700;font-size:1.5rem;color:var(--ink)}
.tile .n.good{color:var(--good)}.tile .n.moderate{color:var(--moderate)}
.tile .n.unhealthy{color:var(--unhealthy)}.tile .n.hazardous{color:var(--hazardous)}
.tile .l{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-top:.2rem}

/* chart card — the one place this system spends its "blueprint annotation"
   boldness: L-shaped corner markers, like a schematic frame. */
.chart-card{position:relative;padding:1.5rem}
.chart-card::before,.chart-card::after,.chart-card .corner-tl,.chart-card .corner-br{content:"";position:absolute;width:10px;height:10px;pointer-events:none}
.chart-card::before{top:-1px;left:-1px;border-top:2px solid var(--brand);border-left:2px solid var(--brand)}
.chart-card::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--brand);border-right:2px solid var(--brand)}
.range-picker{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:1rem}
.range-select{width:auto;min-width:170px;font-family:var(--font-mono);font-size:.72rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;padding:.5rem .7rem;min-height:38px}
.custom-range{display:inline-flex;gap:.5rem;align-items:center}
.custom-range input[type="date"]{width:auto;min-height:38px;padding:.4rem .6rem;font-size:.82rem}
.chart-wrap{position:relative;height:340px}
canvas{max-width:100%}

.center{min-height:100vh;display:grid;place-items:center;padding:1.5rem}
.hide{display:none}

/* health-context callout — sourced reference info, distinct from a plain
   .card so it reads as "annotation," not another data panel */
.callout{background:var(--panel);border-left:3px solid var(--brand);border-radius:var(--r);
  padding:1rem 1.1rem;margin-bottom:1.5rem;box-shadow:2px 2px 0 rgba(0,0,0,.08)}
.callout .label{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand);margin-bottom:.5rem;font-weight:700}
.callout p{font-size:.88rem;line-height:1.6}

/* report tables — hairline rows, mono tabular numbers so columns line up */
.rtable{width:100%;border-collapse:collapse;font-size:.86rem}
.rtable th{text-align:left;font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);padding:.7rem .9rem;border-bottom:1px solid var(--line)}
.rtable td{padding:.65rem .9rem;border-bottom:1px solid var(--line-faint)}
.rtable tr:last-child td{border-bottom:none}
.rtable td.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right}
.rtable td.num.good{color:var(--good)}.rtable td.num.moderate{color:var(--moderate)}
.rtable td.num.unhealthy{color:var(--unhealthy)}.rtable td.num.hazardous{color:var(--hazardous)}