/* ==========================================================================
   IRA AEROSPACE — COMPONENTS
   Instrument-panel vocabulary shared by every section: hairline panels with
   corner brackets, square edges, no drop shadows. Elevation is line weight,
   never blur. Every colour resolves through --accent, so one component set
   serves all four section themes.
   ========================================================================== */

/* --------------------------------------------------------------- Panel -- */

.panel {
  position: relative;
  background: var(--strata-01);
  border: 1px solid var(--rule-neutral);
  padding: var(--s-5);
}
.panel--flush { background: transparent; }

.panel--bracket::before,
.panel--bracket::after {
  content: "";
  position: absolute;
  width: 11px; height: 11px;
  border-color: var(--rule-strong);
  border-style: solid;
  pointer-events: none;
  transition: border-color var(--dur-2) var(--ease);
}
.panel--bracket::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.panel--bracket::after  { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
.panel--bracket:hover::before,
.panel--bracket:hover::after { border-color: var(--accent); }

/* ------------------------------------------------------------- Buttons -- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.85rem 1.35rem;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--platinum);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform var(--dur-2) var(--ease-sharp);
  z-index: 0;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover { color: var(--void); border-color: var(--accent); }
.btn:hover::before { transform: translateY(0); }
.btn__arrow { color: var(--accent); transition: color var(--dur-1) var(--ease); }
.btn:hover .btn__arrow { color: var(--void); }

.btn--primary { border-color: var(--accent-2); color: var(--accent-2); }
.btn--primary::before { background: var(--accent-2); }
.btn--primary .btn__arrow { color: var(--accent-2); }
.btn--primary:hover { color: var(--void); border-color: var(--accent-2); }

.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn[disabled]:hover::before { transform: translateY(101%); }
.btn[disabled]:hover { color: var(--platinum); border-color: var(--rule); }

/* ---------------------------------------------------------- Chip/toggle -- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 0.34rem 0.6rem;
  border: 1px solid var(--rule-neutral);
  color: var(--platinum-3);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
}
.chip--accent { color: var(--accent); border-color: rgba(var(--accent-rgb), 0.4); }

.toggle {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--rule-neutral);
  background: var(--strata-00);
  color: var(--platinum-3);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.09em;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.toggle:hover { background: var(--strata-02); color: var(--platinum-2); }

.toggle__led {
  flex: none;
  width: 8px; height: 8px;
  border: 1px solid currentColor;
  background: transparent;
  transition: background var(--dur-1) var(--ease);
}
.toggle__note {
  margin-left: auto;
  font-size: var(--t-micro);
  color: var(--platinum-4);
  letter-spacing: 0.06em;
  text-transform: none;
}
.toggle[aria-pressed="true"] { color: var(--platinum); border-color: currentColor; }
.toggle[aria-pressed="true"] .toggle__led { background: currentColor; }

.toggle[data-color="accent"][aria-pressed="true"] { color: var(--accent);   background: var(--accent-wash); }
.toggle[data-color="alt"][aria-pressed="true"]    { color: var(--accent-2); background: rgba(var(--accent-2-rgb), 0.10); }
.toggle[data-color="alert"][aria-pressed="true"]  { color: var(--alert);    background: rgba(var(--alert-rgb), 0.10); }
.toggle[data-color="plat"][aria-pressed="true"]   { color: var(--platinum); background: rgba(220,230,234,0.06); }

/* ------------------------------------------------------------ Readouts -- */

.readout {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block: var(--s-2);
  border-top: 1px solid var(--rule-faint);
}
.readout__label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--platinum-4);
}
.readout__value {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--platinum);
}
/* When a value changes the figure jumps and settles, the way a needle does.
   The class is set by the runtime's readout observer for 600 ms. */
.readout__value { transition: transform 600ms var(--ease-out-expo), color 600ms var(--ease); }
.readout__value.is-fresh { transform: translateY(-3px); color: var(--accent); transition: none; }
/* spec rows: the key brightens and the rule draws under the row you read */
.spec__row { position: relative; }
.spec__row::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 500ms var(--ease-out-expo);
}
.spec__row:hover::after { transform: scaleX(1); }
.chip { transition: border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), transform 400ms var(--ease-out-expo); }
.card:hover .chip, .door:hover .chip { border-color: rgba(var(--accent-rgb), 0.5); }

.readout__unit {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--platinum-3);
  margin-left: 4px;
  letter-spacing: 0.08em;
}
.readout--accent .readout__value { color: var(--accent); }
.readout--alt    .readout__value { color: var(--accent-2); }
.readout--alert  .readout__value { color: var(--alert); }

/* --------------------------------------------------------- Spec lists -- */

.spec { display: grid; gap: 0; margin: 0; }

.spec__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: 0.55rem;
  border-top: 1px solid var(--rule-faint);
}
.spec__k {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--platinum-4);
  white-space: nowrap;
}
.spec__v {
  font-size: var(--t-small);
  color: var(--platinum-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.spec__v--left { text-align: left; flex: 1; }

/* ----------------------------------------------------------- Bullets --- */

.bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.bullets li {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding-block: 0.55rem;
  border-top: 1px solid var(--rule-faint);
  font-size: var(--t-small);
  color: var(--platinum-2);
  line-height: 1.55;
}
.bullets li::before {
  content: "";
  flex: none;
  width: 5px; height: 5px;
  background: var(--accent);
  transform: translateY(-2px);
}
.bullets--numbered li::before {
  content: attr(data-i);
  width: auto; height: auto;
  background: none;
  transform: none;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: rgba(var(--accent-rgb), 0.7);
  padding-top: 3px;
}

/* ---------------------------------------------------------------- Pill -- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1px solid currentColor;
}
.pill--accent { color: var(--accent); }
.pill--alt    { color: var(--accent-2); }
.pill--muted  { color: var(--platinum-3); }
.pill--alert  { color: var(--alert); }

/* --------------------------------------------------------------- Forms -- */

.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field__label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--platinum-3);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.72rem 0.85rem;
  background: var(--strata-00);
  border: 1px solid var(--rule-neutral);
  color: var(--platinum);
  font-family: var(--font-body);
  font-size: var(--t-small);
  border-radius: 0;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.field textarea { resize: vertical; min-height: 108px; }
.field input::placeholder, .field textarea::placeholder { color: var(--platinum-4); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--strata-01);
}

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px;
  background: transparent;
  cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(to right,
    var(--accent) 0%, var(--accent) var(--fill, 40%),
    var(--rule-neutral) var(--fill, 40%), var(--rule-neutral) 100%);
}
input[type="range"]::-moz-range-track { height: 2px; background: var(--rule-neutral); }
input[type="range"]::-moz-range-progress { height: 2px; background: var(--accent); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 4px; height: 20px; margin-top: -9px;
  background: var(--accent); border: 0;
  box-shadow: 0 0 12px var(--accent-glow);
}
input[type="range"]::-moz-range-thumb {
  width: 4px; height: 20px; border: 0; border-radius: 0; background: var(--accent);
}

/* ----------------------------------------------- Segmented option list -- */

.seg { display: flex; flex-direction: column; border: 1px solid var(--rule-neutral); }

.seg__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 0.8rem var(--s-4);
  border: 0;
  border-bottom: 1px solid var(--rule-neutral);
  background: var(--strata-00);
  color: var(--platinum-3);
  font-family: var(--font-mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.seg .seg__opt:last-child { border-bottom: 0; }
.seg__opt:hover { background: var(--strata-02); color: var(--platinum-2); }
.seg__opt[aria-pressed="true"] { background: var(--accent-wash); color: var(--accent); }
.seg__opt-note { font-size: var(--t-micro); color: var(--platinum-4); }
.seg__opt[aria-pressed="true"] .seg__opt-note { color: rgba(var(--accent-rgb), 0.7); }

/* -------------------------------------------------------- Canvas frame -- */

.canvas-frame {
  position: relative;
  background: var(--strata-00);
  border: 1px solid var(--rule-neutral);
  overflow: hidden;
}
.canvas-frame canvas { width: 100%; height: 100%; display: block; }

.canvas-frame__tag {
  position: absolute;
  top: 10px; left: 12px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--platinum-3);
  pointer-events: none;
}
.canvas-frame__corner {
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--rule-strong);
  pointer-events: none;
  z-index: 2;
}
.canvas-frame__corner--tl { top: 6px;    left: 6px;  border-width: 1px 0 0 1px; }
.canvas-frame__corner--tr { top: 6px;    right: 6px; border-width: 1px 1px 0 0; }
.canvas-frame__corner--bl { bottom: 6px; left: 6px;  border-width: 0 0 1px 1px; }
.canvas-frame__corner--br { bottom: 6px; right: 6px; border-width: 0 1px 1px 0; }

/* -------------------------------------------------------------- Notice -- */

.notice {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-left: 2px solid var(--accent-2);
  background: rgba(var(--accent-2-rgb), 0.08);
  font-size: var(--t-small);
  color: var(--platinum-2);
  line-height: 1.55;
}
.notice__tag {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
  padding-top: 3px;
}
.notice--alert { border-left-color: var(--alert); background: rgba(var(--alert-rgb), 0.08); }
.notice--alert .notice__tag { color: var(--alert); }

/* ---------------------------------------------------- Comparison bars --- */

.bars { display: flex; flex-direction: column; gap: var(--s-4); }
.bar { display: flex; flex-direction: column; gap: 6px; }
.bar__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.bar__k { color: var(--platinum-3); }
.bar__v { color: var(--platinum); font-variant-numeric: tabular-nums; }
.bar__track {
  height: 10px;
  background: var(--strata-02);
  border: 1px solid var(--rule-faint);
  overflow: hidden;
}
.bar__fill {
  height: 100%; width: 0;
  transition: width var(--dur-3) var(--ease);
  background-image: repeating-linear-gradient(-45deg, currentColor 0 6px, transparent 6px 12px);
  background-color: rgba(255,255,255,0.04);
}
.bar--base .bar__fill { color: var(--platinum-4); }
.bar--ira  .bar__fill { color: var(--accent); }

/* ---------------------------------------------------------- Data table -- */

.table-wrap { overflow-x: auto; min-width: 0; max-width: 100%; }
.dtable { width: 100%; border-collapse: collapse; }
.dtable th, .dtable td {
  padding: 0.55rem var(--s-3) 0.55rem 0;
  text-align: left;
  border-top: 1px solid var(--rule-faint);
  font-size: var(--t-small);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.dtable th {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--platinum-4);
}
.dtable td { color: var(--platinum-2); }
.dtable td:first-child {
  color: var(--platinum-3);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dtable .is-ira { color: var(--accent); }

/* ---------------------------------------------------------- Big output -- */

.outs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border-top: 1px solid var(--rule);
}
.out {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-4) var(--s-4) var(--s-4) 0;
  border-right: 1px solid var(--rule-faint);
}
.outs .out:last-child { border-right: 0; }
.out__k {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--platinum-4);
}
.out__v {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  font-weight: 800;
  font-stretch: 112%;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  line-height: 1;
}
.out__sub {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--platinum-3);
  letter-spacing: 0.06em;
}
.out--accent .out__v { color: var(--accent); }
.out--alt    .out__v { color: var(--accent-2); }
.out--plat   .out__v { color: var(--platinum); }