/* ================================================================
   MATCHA FLAVOR TOKENS
   ================================================================ */
:root {
  --fl-bg:      var(--c-matcha-bg);
  --fl-border:  var(--c-matcha-border);
  --fl-text:    var(--c-matcha-text);
  --fl-icon-bg: var(--c-matcha-icon-bg);
}

/* ================================================================
   HERO
   ================================================================ */
.app-hero { border-bottom: 1px solid var(--color-border); padding: 1.25rem 1.5rem 1.1rem; }
.app-hero--matcha { background: var(--fl-bg); border-bottom-color: var(--fl-border); }
.app-hero__inner { margin: 0 auto; }
.app-hero__title { font-size: clamp(1.4rem,3vw,2rem); font-weight: 800; color: var(--fl-text); letter-spacing: -.02em; margin: 0 0 .5rem; line-height: 1.2; }
.app-hero__desc { font-size: .9rem; color: var(--color-text-secondary); max-width: 660px; line-height: 1.6; margin: 0 0 .85rem; }
.app-hero__chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.hero-chip { display: inline-flex; align-items: center; padding: .22rem .65rem; font-size: .72rem; font-weight: 700; background: var(--color-surface); border: 1.5px solid var(--fl-border); border-radius: var(--radius-full); color: var(--fl-text); white-space: nowrap; }

/* ================================================================
   LAYOUT
   ================================================================ */
.app-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 1.25rem;
  margin-top: 1.25rem;
}

@media (max-width: 760px) {
  .app-layout { grid-template-columns: 1fr; }
}

/* ================================================================
   CARDS
   ================================================================ */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}

.card-title {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  margin: 0 0 .75rem;
}

/* ================================================================
   FORM ELEMENTS
   ================================================================ */
.field { margin-bottom: .75rem; }
.field:last-child { margin-bottom: 0; }

.lbl {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: .25rem;
}

.field input[type=number],
.field input[type=text],
.field select {
  width: 100%;
  box-sizing: border-box;
  padding: .4rem .6rem;
  font-size: .85rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text-primary);
  transition: border-color .15s;
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--fl-border);
}

/* Unit toggle */
.unit-toggle {
  display: flex;
  border: 1.5px solid var(--fl-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: .85rem;
}
.unit-btn {
  flex: 1;
  padding: .35rem;
  font-size: .78rem;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: background .15s, color .15s;
}
.unit-btn.active { background: var(--fl-bg); color: var(--fl-text); }

/* Inline row for area + unit */
.area-row { display: flex; gap: .5rem; align-items: center; }
.area-row input { flex: 1; }
.area-row span { font-size: .82rem; color: var(--color-text-muted); white-space: nowrap; min-width: 24px; }

/* Runoff display */
.runoff-row { display: flex; justify-content: space-between; align-items: center; margin-top: .25rem; }
.runoff-note { font-size: .72rem; color: var(--color-text-muted); }
.runoff-badge {
  font-size: .8rem;
  font-weight: 700;
  color: var(--fl-text);
  background: var(--fl-bg);
  border: 1px solid var(--fl-border);
  border-radius: var(--radius-md);
  padding: .15rem .5rem;
}

/* Demand checkboxes */
.demand-item {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  margin-bottom: .5rem;
}
.demand-item input[type=checkbox] {
  margin-top: .18rem;
  accent-color: var(--fl-text);
  flex-shrink: 0;
}
.demand-item label { font-size: .82rem; color: var(--color-text-secondary); cursor: pointer; line-height: 1.4; }

.demand-sub { margin-top: .4rem; margin-left: 1.4rem; }
.demand-sub .field { margin-bottom: .4rem; }

/* ================================================================
   RESULTS
   ================================================================ */
.result-hero {
  background: var(--fl-bg);
  border: 1.5px solid var(--fl-border);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}

.result-hero-title {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--fl-text);
  margin: 0 0 .75rem;
}

.tank-display {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  margin-bottom: .4rem;
}

.tank-litres {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--fl-text);
  line-height: 1;
}

.tank-gal {
  font-size: .9rem;
  color: var(--color-text-muted);
  padding-bottom: .3rem;
}

/* Stats grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
  margin-bottom: 1rem;
}

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: .75rem 1rem;
}

.stat-label {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  margin-bottom: .25rem;
}

.stat-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--fl-text);
  line-height: 1.2;
}

.stat-sub {
  font-size: .7rem;
  color: var(--color-text-muted);
  margin-top: .1rem;
}

/* Chart card */
.chart-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}

.chart-card .card-title { margin-bottom: .5rem; }

#chart-wrap { padding-top: 1rem; overflow-x: auto; }

/* Savings card */
.savings-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .3rem 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: .85rem;
}
.savings-row:last-child { border-bottom: none; }
.savings-key { color: var(--color-text-muted); }
.savings-val { font-weight: 700; color: var(--fl-text); }

/* First flush note */
.flush-note {
  font-size: .76rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-top: .4rem;
  padding: .5rem .75rem;
  background: var(--fl-bg);
  border-left: 3px solid var(--fl-border);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}