/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   RADIANT — Enclave Feasibility Tool
   inyourbrains.com

   radiant.html was pointing at ./style.css, which is the desk
   page's stylesheet and defines none of these classes — the page
   was rendering completely unstyled.

   Tokens and the .tab / .card / .pill / .sub / .actions rules are
   lifted from gradient.html so the two tools match. The remaining
   classes (wrap, top, panel, grid2, kpi, kpiLabel, kpiValue, hint,
   row, foot, raw, plain) are built in that same language.

   In radiant.html, change:
     <link rel="stylesheet" href="./style.css">
   to:
     <link rel="stylesheet" href="./radiant.css">
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

:root {
  --bg:     #0b0f14;
  --panel:  #111823;
  --panel2: #0f1620;
  --text:   #e7eef7;
  --muted:  #9fb2c7;
  --line:   #223043;
  --accent: #7aa2ff;
  --good:   #76e3a1;
  --warn:   #ffd27a;
  --bad:    #ff7a7a;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); }

/* ── shell ─────────────────────────────────── */
.wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 18px 64px;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 28px 0 4px;
}
.top h1 {
  margin: 0;
  font-size: 26px;
  letter-spacing: -0.01em;
}

/* ── tabs (from gradient.html) ─────────────── */
.tabs {
  display: flex;
  gap: 8px;
  padding: 12px 0 0;
  flex-wrap: wrap;
}
.tab {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.tab:hover { color: var(--text); border-color: var(--accent); }
.tab.active {
  color: var(--text);
  border-color: var(--accent);
  background: rgba(122,162,255,.12);
}

/* ── panels: only the active one shows ─────── */
.panel { display: none; padding-top: 18px; }
.panel.active { display: block; }
.panel h2 { margin: 0 0 4px; font-size: 20px; }
.panel h3 { margin: 0 0 12px; font-size: 15px; color: var(--muted);
            text-transform: uppercase; letter-spacing: .08em; }

/* ── cards (from gradient.html) ────────────── */
.card {
  background: linear-gradient(180deg, rgba(17,24,35,.95), rgba(15,22,32,.95));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  margin-bottom: 16px;
}

.pill {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
  padding: 8px 10px;
  border-radius: 12px;
  user-select: none;
  font-size: 13px;
  color: var(--muted);
}
.pill code { color: var(--accent); font-size: 12px; }

.sub  { margin-top: 6px; margin-bottom: 16px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.hint { margin-top: 5px; color: var(--muted); font-size: 11.5px; line-height: 1.4; opacity: .85; }

/* ── layout helpers ────────────────────────── */
.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* ── forms ─────────────────────────────────── */
label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
}
input, select, textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 11px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 400;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(122,162,255,.15);
}
input::placeholder { color: var(--muted); opacity: .6; }

.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.actions button, button[type="submit"] {
  border: 1px solid var(--accent);
  background: rgba(122,162,255,.14);
  color: var(--text);
  padding: 9px 16px;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  transition: background 140ms ease;
}
.actions button:hover { background: rgba(122,162,255,.26); }
.actions button.plain, button.plain {
  border-color: var(--line);
  background: transparent;
  color: var(--muted);
}
.actions button.plain:hover { color: var(--text); border-color: var(--muted); }

/* ── KPI readouts ──────────────────────────── */
.kpi {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 14px;
}
.kpiLabel {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted);
  margin-bottom: 6px;
}
.kpiValue {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* ── raw output ────────────────────────────── */
.raw {
  background: #070b10;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 340px;
  overflow: auto;
}

.foot {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}
.foot a { color: var(--accent); }

/* site nav sits above the tool */
.site-nav {
  display: flex; flex-wrap: wrap; gap: 18px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  padding: 16px 0 0;
}
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--text); }

@media (max-width: 640px) {
  .grid2 { grid-template-columns: 1fr; }
  .top   { padding-top: 20px; }
  .top h1 { font-size: 21px; }
  .kpiValue { font-size: 22px; }
}