/* Easy Group brand system — light EasyGroup kit.
   Values come from tokens.css (GENERATED from design-manifest.json →
   unifiedTheme); this file only maps them onto the legacy variable names the
   host templates and console layers already consume, and styles the shared
   component classes. Ground is Cloud #F7FAFC, canvas is white, the four brand
   blues are Beam #6BD6FF / Signal #159EFF / Core #2468D8 / Deep #103A85.
   Type: Space Grotesk (display) + Inter (body) + IBM Plex Mono (data).
   Sub-brands keep identical geometry and change only their accent.

   tokens.css is loaded by brand_head() before this file. */

:root {
  /* Legacy names → unified tokens. Names are frozen (host templates and
     console.css reference them); only the values moved to the light system. */
  --beam:   var(--eg-beam);
  --signal: var(--eg-signal);
  --core:   var(--eg-core);
  --deep:   var(--eg-deep);
  /* --void was the dark ground; it survives as "the darkest value in the
     kit" = Ink, so `color: var(--void)` on a Beam chip still reads. */
  --void:   var(--eg-ink);

  --bg:        var(--eg-bg);
  --bg-raised: var(--eg-canvas);
  --bg-sunken: var(--eg-well);
  --line:      var(--eg-border);
  --line-soft: var(--eg-border-soft);

  --text:      var(--eg-ink);
  --text-dim:  var(--eg-slate);
  --text-mute: var(--eg-muted);

  --ok:   var(--eg-ok);
  --warn: var(--eg-warn);
  --bad:  var(--eg-bad);

  /* Sub-brand accents — one accent per product, all four brand blues on the
     light ground (variable names frozen):
       material  Signal #159EFF — the live/scanning tool, brightest workable blue
       proposal  Core   #2468D8 — the primary-action blue, the "do work" tool
       crm       Deep   #103A85 — the flagship system of record, heaviest blue
       supply    Beam   #6BD6FF — wash/gradient accent only; supply's mark ramp
                                  pairs Beam with Deep so the mark keeps contrast
                                  (Beam alone is too light for text on white). */
  --tool-material: var(--eg-signal);
  --tool-proposal: var(--eg-core);
  --tool-crm:      var(--eg-deep);
  --tool-supply:   var(--eg-beam);

  --radius:    var(--eg-r-lg);   /* 12px — default card */
  --radius-sm: var(--eg-r-md);   /* 8px  — controls */
  --mono:    var(--eg-font-mono);
  --sans:    var(--eg-font-ui);
  --display: var(--eg-font-display);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  /* Subtle sky washes on Cloud — the light ground's version of the old glow. */
  background:
    radial-gradient(900px 480px at 12% -8%, rgba(107,214,255,.14), transparent 60%),
    radial-gradient(760px 420px at 96% 4%, rgba(21,158,255,.07), transparent 58%),
    var(--bg);
}

h1, h2, h3 { font-family: var(--display); letter-spacing: -.02em; }

a { color: var(--core); text-decoration: none; }
a:hover { color: var(--deep); text-decoration: underline; }

::selection { background: var(--eg-soft); }

.mono, code, kbd {
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: -.01em;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--core);
}

/* ---------------------------------------------------------------- mark */

.mark { display: block; flex: 0 0 auto; }

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

.lockup .wordmark {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--text);
}

.lockup .wordmark .tld { color: var(--signal); }

.lockup .tagline {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-top: 5px;
}

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

.shell { max-width: 1440px; margin: 0 auto; padding: 28px 24px 64px; }

/* Sticky translucent white nav — blur + border-bottom, per the marketing
   canvas ("Installer Home"). */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 14px;
  padding-bottom: 14px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}

.topbar nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.card {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--eg-shadow-card);
}

.card h2 { margin: 0 0 4px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.card p  { margin: 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.6; }

.grid { display: grid; gap: 16px; }
.grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }
  .topbar { position: static; flex-direction: column; align-items: flex-start; }
}

/* Deep CTA / footer band — solid Deep #103A85 with white text (marketing
   surfaces only; additive class, not used by app chrome). */
.band {
  background: var(--deep);
  color: #FFFFFF;
  border-radius: var(--eg-r-hero);
  padding: 40px 36px;
  box-shadow: var(--eg-shadow-hero);
}
.band h2, .band h3 { color: #FFFFFF; }
.band p { color: rgba(255,255,255,.72); }
.band a { color: #FFFFFF; text-decoration: underline; }
.band .eyebrow { color: var(--beam); }
.band .btn { background: #FFFFFF; color: var(--deep); }
.band .btn:hover { background: var(--eg-ice); }
footer.band, .band.flush { border-radius: 0; box-shadow: none; }

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

.btn {
  appearance: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--core);
  color: #fff;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  min-height: 38px;
  padding: 0 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 8px 20px -12px rgba(36,104,216,.8);
  transition: background .16s ease, border-color .16s ease, transform .12s ease;
}

.btn:hover { background: var(--eg-core-hover); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }

.btn.ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text-dim);
  box-shadow: none;
}
.btn.ghost:hover { border-color: var(--signal); color: var(--text); background: var(--eg-ice); }

.btn.quiet { background: var(--eg-soft); color: var(--core); box-shadow: none; }
.btn.quiet:hover { background: #DCEDFF; }

label.field { display: block; margin-bottom: 14px; }

label.field > span {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 6px;
}

input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], select, textarea {
  width: 100%;
  min-height: 40px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0 12px;
  font-family: var(--sans);
  font-size: 14px;
}

input::placeholder, textarea::placeholder { color: var(--eg-placeholder); }

textarea { padding: 10px 12px; min-height: 84px; resize: vertical; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--signal);
  box-shadow: var(--eg-focus-ring);
}

/* ---------------------------------------------------------------- tags, tables */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--eg-r-pill);
  border: 1px solid var(--line);
  color: var(--text-dim);
}

.tag.on   { border-color: rgba(18,131,107,.35); color: var(--ok);   background: var(--eg-ok-wash); }
.tag.warn { border-color: rgba(224,138,46,.40); color: var(--warn); background: var(--eg-warn-wash); }
.tag.bad  { border-color: rgba(195,58,58,.35);  color: var(--bad);  background: var(--eg-bad-wash); }

/* Data provenance markers — contract §6 requires the frontend to show these. */
.prov { font-family: var(--mono); font-size: 10px; letter-spacing: .10em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; }
.prov.measured  { color: var(--eg-ok);   background: var(--eg-ok-wash); }
.prov.modelled  { color: var(--eg-core); background: var(--eg-soft); }
.prov.estimated { color: var(--eg-warn); background: var(--eg-warn-wash); }

table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }

th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--eg-well);
}

td { padding: 10px; border-bottom: 1px solid var(--line-soft); color: var(--text-dim); }
tbody tr:hover td { background: var(--eg-ice); color: var(--text); }

.num { font-family: var(--mono); font-weight: 400; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- stats */

.stat { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised); box-shadow: var(--eg-shadow-card); }
.stat .k { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-mute); }
.stat .v { font-family: var(--display); font-size: 28px; font-weight: 600; letter-spacing: -.02em; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.stat .d { font-size: 12px; color: var(--text-dim); }

.notice {
  border-left: 3px solid var(--signal);
  background: var(--eg-ice);
  padding: 12px 14px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
}

.notice.bad  { border-left-color: var(--bad);  background: var(--eg-bad-wash); }
.notice.warn { border-left-color: var(--eg-warn-accent); background: var(--eg-warn-wash); }

.hidden { display: none !important; }