@import url('/tokens.css');

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.page {
  max-width: 880px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5) var(--space-8);
}

/* ─────────── Header / logo lockup ─────────── */
.lockup {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-7);
}
.lockup__mark { width: 36px; height: 36px; }
.lockup__word {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.8px;
  color: var(--color-fg);
  position: relative;
  line-height: 1;
}

.lockup__meta {
  margin-left: auto;
  font-size: 13px;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
}
.lockup__meta a { color: var(--color-fg-muted); }

/* ─────────── Hero ─────────── */
.hero h1 {
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1.5px;
  margin: 0 0 var(--space-4);
  color: var(--color-fg);
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(180deg, transparent 65%, var(--color-accent) 65%);
  padding: 0 4px;
}
.hero p.lede {
  font-size: 18px;
  color: var(--color-fg-muted);
  max-width: 580px;
  margin: 0 0 var(--space-7);
}

/* ─────────── Card / calculator ─────────── */
.card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-7);
}
.card__title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--color-primary);
  margin: 0 0 var(--space-4);
}

.calc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.calc__field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--color-fg-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.calc__field input,
.calc__field select {
  width: 100%;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-fg);
  -webkit-appearance: none;
}
.calc__field input:focus,
.calc__field select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}
.calc__status {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--color-fg-muted);
  margin-top: 6px;
  letter-spacing: 0.2px;
  min-height: 14px;
}
.calc__status.ok    { color: var(--color-primary); }
.calc__status.err   { color: var(--color-alert); }

.result {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border);
}
.result__metric { text-align: left; }
.result__metric .label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  color: var(--color-fg-muted);
  text-transform: uppercase;
}
.result__metric .value {
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 700;
  color: var(--color-fg);
  margin-top: 4px;
  letter-spacing: -1px;
}
.result__metric .unit { font-size: 14px; color: var(--color-fg-muted); margin-left: 4px; }
.result__metric.alert .value { color: var(--color-alert); }

/* ─────────── Plan list ─────────── */
.plan-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.plan-item {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-4);
  align-items: center;
}
.plan-item:first-child {
  border-color: var(--color-primary);
  background: var(--basil-emerald-100);
}
.plan-item__rank {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  width: 28px;
}
.plan-item__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plan-item__name {
  font-weight: 600;
  font-size: 15px;
  color: var(--color-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plan-item__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-fg-muted);
}
.plan-item__breakdown {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-fg-muted);
  margin-top: 2px;
}
/* Small Bazil mark in the corner for chargers near an interstate onramp */
.plan-item__badge {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 20px;
  height: 20px;
  opacity: 0.85;
  pointer-events: none;
}
/* Stall-availability flag (coral when low/none, neutral when info-only) */
.plan-item__flag {
  display: inline-block;
  padding: 3px 9px;
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-family: var(--font-sans);
  border-radius: var(--radius-pill);
  background: var(--basil-cream-300);
  color: var(--color-fg);
}
.plan-item__flag--alert {
  background: var(--color-alert);
  color: #fff;
}
.plan-item__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.btn-map {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  font-family: var(--font-sans);
  text-decoration: none;
  color: var(--color-fg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}
.btn-map:hover {
  background: var(--basil-cream-300);
  border-color: var(--color-primary);
  color: var(--color-fg);
  text-decoration: none;
}
.plan-item:first-child .btn-map {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.plan-item:first-child .btn-map:hover {
  background: var(--color-fg);
  border-color: var(--color-fg);
  color: var(--color-accent);
}
.plan-item__note {
  font-size: 11px;
  color: var(--color-primary);
  margin-top: 2px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.plan-item__time {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-fg);
  text-align: right;
  line-height: 1;
}
.plan-item__time .unit {
  font-size: 11px;
  color: var(--color-fg-muted);
  display: block;
  margin-top: 4px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.plan-empty {
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: var(--space-3) 0;
  list-style: none;
}

/* ─────────── Trip planner ─────────── */
.calc__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  font-family: var(--font-sans);
  color: #fff;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.btn-primary:hover {
  background: var(--color-fg);
  color: var(--color-accent);
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.trip-result {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px dashed var(--color-border);
}
.trip-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.trip-summary__item .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-fg-muted);
  font-weight: 600;
}
.trip-summary__item .value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  margin-top: 2px;
}

.trip-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.trip-segment {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.trip-segment--drive {
  border-left: 3px solid var(--color-fg-muted);
}
.trip-segment--stop {
  border-left: 3px solid var(--color-primary);
  background: var(--basil-emerald-100);
}
.trip-segment__heading {
  font-weight: 600;
  font-size: 14px;
  color: var(--color-fg);
  margin: 0 0 4px;
}
.trip-segment__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-fg-muted);
}
.trip-pois {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--color-border);
}
.trip-pois__title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-primary);
  margin: 0 0 6px;
}
.trip-poi {
  font-size: 13px;
  color: var(--color-fg);
  display: flex;
  gap: var(--space-2);
  padding: 2px 0;
}
.trip-poi__rating {
  font-family: var(--font-mono);
  color: var(--color-primary);
  font-weight: 600;
  min-width: 32px;
}
.trip-poi__name { font-weight: 500; }
.trip-poi__cat { color: var(--color-fg-muted); font-size: 11px; }

.trip-export {
  margin-top: var(--space-5);
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.trip-infeasible {
  color: var(--color-alert);
  background: rgba(255, 107, 91, 0.08);
  border: 1px solid rgba(255, 107, 91, 0.3);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: 13px;
}

/* ─────────── Chart ─────────── */
.chart {
  width: 100%;
  height: 240px;
  display: block;
}
.chart__caption {
  font-size: 13px;
  color: var(--color-fg-muted);
  margin-top: var(--space-3);
  font-family: var(--font-mono);
}

/* ─────────── Specs grid ─────────── */
.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}
.specs__item .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-fg-muted);
  font-weight: 600;
}
.specs__item .value {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
  margin-top: 2px;
}

/* ─────────── Palette strip ─────────── */
.palette {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.swatch {
  border-radius: var(--radius-md);
  height: 72px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.swatch span {
  position: absolute;
  bottom: 6px;
  left: 8px;
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.4px;
}
.swatch.lemon    { background: var(--basil-lemon); }    .swatch.lemon span    { color: #1a1a1a; }
.swatch.emerald  { background: var(--basil-emerald); }  .swatch.emerald span  { color: #fff; }
.swatch.charcoal { background: var(--basil-charcoal); } .swatch.charcoal span { color: #fff; }
.swatch.cream    { background: var(--basil-cream); }    .swatch.cream span    { color: #1a1a1a; }
.swatch.coral    { background: var(--basil-coral); }    .swatch.coral span    { color: #1a1a1a; }

/* ─────────── Footer ─────────── */
footer {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: 13px;
  color: var(--color-fg-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
}

section { margin-top: var(--space-7); }
h2 {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--color-primary);
  margin: 0 0 var(--space-4);
}