/* ============================================================
   Brake Trace FOV Calculator — css/fov-calculator.css v2.0
   ============================================================ */

.fovc-wrap {
  width: 100%;
  font-family: 'Public Sans', system-ui, sans-serif;
}

/* ── SECTION LABELS ───────────────────────────────────────── */
.fovc-section-label {
  background: var(--bt-ink, #0c0c0d);
  color: #ff7066;
  font-family: 'Space Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-bottom: 1px solid #2a2b2f;
}

/* ── INPUT GRIDS ──────────────────────────────────────────── */
.fovc-inputs {
  display: grid;
  gap: 1px;
  background: var(--bt-hair, #e3e1dc);
  border: 1px solid var(--bt-hair, #e3e1dc);
  border-top: none;
  margin-bottom: 2px;
}

.fovc-inputs--monitor { grid-template-columns: repeat(3, 1fr); }
.fovc-inputs--setup   { grid-template-columns: repeat(4, 1fr); }

.fovc-field {
  background: var(--bt-ink, #0c0c0d);
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── LABELS + HINTS ───────────────────────────────────────── */
.fovc-label {
  font-family: 'Space Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #ff7066;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.fovc-hint {
  font-size: 9px;
  letter-spacing: .06em;
  color: #5a5856;
  text-transform: none;
  font-style: normal;
  line-height: 1.4;
}

/* ── NUMBER INPUTS ────────────────────────────────────────── */
.fovc-input-row {
  display: flex;
}

.fovc-input {
  flex: 1;
  min-width: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .03em;
  background: #1a1b1e;
  border: 1px solid #2a2b2f;
  color: #fff;
  padding: 10px 12px;
  border-radius: 0;
  outline: none;
  box-sizing: border-box;
  appearance: none;
  -moz-appearance: textfield;
}

.fovc-input::-webkit-inner-spin-button,
.fovc-input::-webkit-outer-spin-button { -webkit-appearance: none; }

.fovc-input:focus { border-color: #ff2d20; }

.fovc-unit-tag {
  font-family: 'Space Mono', monospace;
  font-size: 12px;
  background: #2a2b2f;
  border: 1px solid #2a2b2f;
  border-left: none;
  color: #8d8c88;
  padding: 10px 10px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── SELECT INPUTS ────────────────────────────────────────── */
.fovc-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .03em;
  text-transform: uppercase;
  background-color: #1a1b1e;
  border: 1px solid #2a2b2f;
  color: #cdccc8;
  padding: 10px 28px 10px 12px;
  border-radius: 0;
  cursor: pointer;
  outline: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23ff2d20' stroke-width='2'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  box-sizing: border-box;
}

/* ── RESULT BAND ──────────────────────────────────────────── */
.fovc-result {
  display: flex;
  align-items: stretch;
  background: var(--bt-ink, #0c0c0d);
  color: #fff;
  border-left: 5px solid var(--bt-mute, #8a8884);
  margin-bottom: 2px;
  transition: border-color .2s;
}

.fovc-result--ok   { border-left-color: var(--bt-go, #17a44c); }
.fovc-result--warn { border-left-color: #d97b00; }

.fovc-result__col {
  padding: 28px 28px;
  border-right: 1px solid #2a2b2f;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.fovc-result__col:last-child { border-right: none; }
.fovc-result__main { flex: 2; }
.fovc-result__col:not(.fovc-result__main) { flex: 1; }

.fovc-result__eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #ff7066;
  display: block;
  margin-bottom: 4px;
}

.fovc-result__number {
  font-family: 'Anton', sans-serif;
  font-size: clamp(46px, 6vw, 76px);
  line-height: .9;
  color: #fff;
  margin-bottom: 8px;
}

.fovc-result--warn .fovc-result__number { color: #ffb347; }

.fovc-result__sub {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: .06em;
  color: #5a5856;
  line-height: 1.5;
}

.fovc-result__stat {
  font-family: 'Anton', sans-serif;
  font-size: 26px;
  line-height: .95;
  color: #fff;
  margin-bottom: 2px;
}

.fovc-result__note {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  letter-spacing: .06em;
  color: #5a5856;
  line-height: 1.4;
}

/* ── PER-SIM TABLE ────────────────────────────────────────── */
.fovc-sims {
  border: 1px solid var(--bt-hair, #e3e1dc);
  border-top: none;
  margin-bottom: 12px;
}

.fovc-sims__header {
  display: grid;
  grid-template-columns: 240px 100px 1fr;
  gap: 16px;
  background: var(--bt-ink, #0c0c0d);
  color: #fff;
  padding: 10px 16px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.fovc-sim-row {
  display: grid;
  grid-template-columns: 240px 100px 1fr;
  gap: 16px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bt-hair, #e3e1dc);
  background: var(--bt-card, #fff);
  align-items: center;
}

.fovc-sim-row:last-child { border-bottom: none; }
.fovc-sim-row:nth-child(even) { background: var(--bt-paper, #f5f4f1); }

.fovc-sim-row__name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 17px;
  text-transform: uppercase;
  color: var(--bt-ink-soft, #0e0e0f);
}

.fovc-sim-row__val {
  font-family: 'Anton', sans-serif;
  font-size: 20px;
  color: var(--bt-red, #ff2d20);
}

.fovc-sim-row__note {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--bt-mute, #8a8884);
  line-height: 1.5;
}

/* ── DISCLAIMER ───────────────────────────────────────────── */
.fovc-disclaimer {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  letter-spacing: .05em;
  color: var(--bt-mute, #8a8884);
  margin: 8px 0 0;
  line-height: 1.6;
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .fovc-inputs--monitor { grid-template-columns: 1fr 1fr; }
  .fovc-inputs--setup   { grid-template-columns: 1fr 1fr; }
  .fovc-result { flex-wrap: wrap; }
  .fovc-result__col { flex: 1 1 45%; border-bottom: 1px solid #2a2b2f; }
  .fovc-sims__header,
  .fovc-sim-row { grid-template-columns: 1fr 80px; }
  .fovc-sim-row__note,
  .fovc-sims__header span:last-child { display: none; }
}

@media (max-width: 550px) {
  .fovc-inputs--monitor,
  .fovc-inputs--setup { grid-template-columns: 1fr; }
  .fovc-result__col { flex: 1 1 100%; }
}