/* Freezone Selector — shared chrome on top of Habitat design tokens.
   Monochrome ink, hairline rules, no boxes/shadows/gradients. */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  font-size: var(--size-body-sm);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
}

.page {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--page-margin-mobile);
}
@media (min-width: 900px) {
  .page { padding: 0 var(--page-margin); }
}

/* ---- Sample data banner ---- */
.sample-banner {
  display: none;
  background: var(--ink);
  color: var(--on-dark);
  font-family: var(--font-mono);
  font-size: var(--size-byline);
  letter-spacing: var(--tracking-byline);
  text-transform: uppercase;
  padding: var(--space-3) var(--page-margin-mobile);
  text-align: center;
}
.sample-banner.visible { display: block; }
.sample-banner .accent-dot { color: var(--accent); }

/* ---- Header / nav ---- */
.site-header {
  border-bottom: 1px solid var(--border);
  padding: var(--space-5) 0;
}
.site-header .inner {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-5);
  justify-content: space-between;
}
.site-title {
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--size-h4);
  text-decoration: none;
  color: var(--ink);
}
.site-title span {
  font-family: var(--font-mono); font-size: var(--size-byline);
  letter-spacing: var(--tracking-byline); text-transform: uppercase;
  color: var(--ink-50); margin-left: var(--space-3);
}
.site-nav { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.site-nav a {
  font-family: var(--font-mono); font-size: var(--size-byline);
  letter-spacing: var(--tracking-byline); text-transform: uppercase;
  color: var(--ink-70); text-decoration: none;
}
.site-nav a:hover, .site-nav a.active { color: var(--ink); border-bottom: 1px solid var(--accent); }

/* ---- Footer ---- */
.site-footer {
  border-top: 2px solid var(--ink);
  margin-top: var(--space-10);
  padding: var(--space-6) 0 var(--space-8);
  font-size: var(--size-caption);
  color: var(--ink-70);
}
.site-footer .links { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-bottom: var(--space-4); }
.site-footer a { color: var(--ink-70); }

/* ---- Typography helpers ---- */
.eyebrow {
  font-family: var(--font-mono); font-size: var(--size-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--ink-50);
}
h1, .h1 {
  font-family: var(--font-serif); font-weight: var(--weight-regular);
  font-size: clamp(32px, 5vw, var(--size-h1));
  line-height: var(--leading-display); letter-spacing: var(--tracking-display);
}
h2, .h2 {
  font-family: var(--font-serif); font-weight: var(--weight-regular);
  font-size: var(--size-h3); line-height: var(--leading-display);
}
h3, .h3 { font-size: var(--size-body); font-weight: var(--weight-semibold); }
.lead { font-family: var(--font-serif); font-size: var(--size-lead); line-height: var(--leading-snug); color: var(--ink-90); }
.muted { color: var(--ink-70); }
.small { font-size: var(--size-caption); }
.source-line {
  font-family: var(--font-mono); font-size: var(--size-source);
  color: var(--ink-50); letter-spacing: 0.04em;
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  font-family: var(--font-mono); font-size: var(--size-eyebrow);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  background: var(--ink); color: var(--on-dark);
  border: 1px solid var(--ink);
  padding: var(--space-3) var(--space-5);
  cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--ink-90); }
.btn.secondary { background: transparent; color: var(--ink); }
.btn.secondary:hover { background: var(--ink-04); }
.btn:disabled { background: var(--ink-25); border-color: var(--ink-25); cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }

/* ---- Forms ---- */
.field { margin-bottom: var(--space-5); }
.field > label, .field > .label {
  display: block; font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2); font-size: var(--size-body-sm);
}
.field .hint { font-size: var(--size-caption); color: var(--ink-70); margin-bottom: var(--space-2); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea {
  font-family: var(--font-body); font-size: var(--size-body-sm);
  color: var(--ink); background: var(--bg-sunken);
  border: 1px solid var(--border); border-radius: 0;
  padding: var(--space-3); width: 100%; max-width: 420px;
}
select { max-width: 440px; }
textarea { max-width: 560px; min-height: 90px; }
input:focus, select:focus, textarea:focus { outline: 1px solid var(--ink); }

.choice-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.choice {
  font-family: var(--font-mono); font-size: var(--size-eyebrow);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  border: 1px solid var(--border); background: transparent; color: var(--ink-70);
  padding: var(--space-2) var(--space-4); cursor: pointer;
}
.choice.selected { border-color: var(--ink); color: var(--ink); background: var(--accent-subtle); }
.choice:hover { border-color: var(--ink); color: var(--ink); }

/* ---- Steps ---- */
.step-indicator {
  display: flex; gap: var(--space-4); margin: var(--space-7) 0 var(--space-6);
  font-family: var(--font-mono); font-size: var(--size-byline);
  letter-spacing: var(--tracking-byline); text-transform: uppercase; color: var(--ink-25);
}
.step-indicator .step { padding-bottom: var(--space-2); border-bottom: 2px solid transparent; }
.step-indicator .step.done { color: var(--ink-50); }
.step-indicator .step.current { color: var(--ink); border-bottom-color: var(--accent); }

.question-group { border-top: 1px solid var(--border); padding: var(--space-6) 0; }
.question-group > .eyebrow { margin-bottom: var(--space-5); }

/* ---- Results ---- */
.result-card { border-top: 2px solid var(--ink); padding: var(--space-6) 0; }
.result-card .slot-label { margin-bottom: var(--space-2); }
.match-score { font-family: var(--font-serif); font-size: var(--size-h2); }
.cost-table { border-collapse: collapse; width: 100%; max-width: 480px; margin: var(--space-4) 0; }
.cost-table td, .cost-table th {
  text-align: left; padding: var(--space-2) var(--space-4) var(--space-2) 0;
  border-bottom: 1px solid var(--border-faint); font-size: var(--size-body-sm);
}
.cost-table td:last-child, .cost-table th:last-child { text-align: right; }
.cost-table tr.total td { border-top: 1px solid var(--ink); border-bottom: none; font-weight: var(--weight-semibold); }

.score-bar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.score-bar .bar-label { flex: 0 0 240px; font-size: var(--size-caption); color: var(--ink-70); }
.score-bar .bar-track { flex: 1; height: 8px; background: var(--ink-07); max-width: 300px; }
.score-bar .bar-fill { height: 100%; background: var(--ink); }
.score-bar .bar-value { font-family: var(--font-mono); font-size: var(--size-source); color: var(--ink-50); min-width: 72px; }

.warning-list { margin: var(--space-4) 0; padding-left: 1.2em; }
.warning-list li { margin-bottom: var(--space-2); font-size: var(--size-caption); color: var(--ink-90); }

.badge {
  font-family: var(--font-mono); font-size: var(--size-source);
  letter-spacing: 0.08em; text-transform: uppercase;
  border: 1px solid var(--border); color: var(--ink-70);
  padding: 1px var(--space-2); margin-left: var(--space-2);
}
.badge.sample { border-color: var(--accent-strong); color: var(--accent-strong); }

details { margin: var(--space-4) 0; }
details summary {
  cursor: pointer; font-family: var(--font-mono); font-size: var(--size-eyebrow);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-70);
}
details[open] summary { color: var(--ink); margin-bottom: var(--space-4); }

/* ---- Toggle rows (scenario controls) ---- */
.scenario-controls {
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: var(--space-4) 0; margin: var(--space-4) 0;
  align-items: center;
}
.scenario-controls .label {
  font-family: var(--font-mono); font-size: var(--size-source);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-50);
  margin-right: var(--space-2);
}

/* ---- Generic tables (directory, compare, profile) ---- */
.ledger { border-collapse: collapse; width: 100%; }
.ledger th {
  font-family: var(--font-mono); font-size: var(--size-source);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-50);
  text-align: left; padding: var(--space-2) var(--space-4) var(--space-2) 0;
  border-bottom: 1px solid var(--ink);
}
.ledger td {
  padding: var(--space-3) var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--border-faint);
  vertical-align: top; font-size: var(--size-caption);
}
.ledger tr:nth-child(even) td { background: var(--ink-04); }

.section { border-top: 2px solid var(--ink); padding: var(--space-6) 0; margin-top: var(--space-6); }
.section > .eyebrow { margin-bottom: var(--space-4); }

ul.plain { padding-left: 1.2em; }
ul.plain li { margin-bottom: var(--space-2); }

a { color: var(--ink); }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: var(--space-6); }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 2fr 1fr; } }
.grid-cards { display: grid; grid-template-columns: 1fr; gap: 0; }