/* ============================================================
   PhyCircuit — Stackup Builder tool styles
   Pairs with: prototype/css/calc.css (for .field / .iu shared input chrome).
   ============================================================ */

/* ----- form selects (extend the .iu pattern from calc.css) ----- */
.iu-select {
  background: var(--bg-1); color: var(--fg-0);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 0.55rem 0.7rem;
  width: 100%;
  font: inherit;
}
.iu-select:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }

/* ----- layout grid ----- */
.stackup-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--space-6);
  align-items: start;
}
.stackup-grid > .stackup-meta { grid-column: 1 / -1; }
@media (max-width: 920px) {
  .stackup-grid { grid-template-columns: 1fr; }
}

.stackup-controls .field { margin-bottom: var(--space-3); }

.stackup-out {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-5);
}
@media (max-width: 720px) {
  .stackup-out { grid-template-columns: 1fr; }
}

.stackup-xs {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--space-3);
}
.stackup-xs svg { display: block; width: 100%; height: auto; }

/* ----- stackup table ----- */
.stack-table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.stack-table th, .stack-table td {
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.stack-table th { color: var(--fg-2); font-weight: 500; font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.stack-table tr.row-diel { background: rgba(255,255,255,0.015); }
.stack-table .diel { color: var(--fg-2); font-size: 0.92em; }

.role {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: 0.85em;
  letter-spacing: 0.04em;
}
.role--sig { background: rgba(232,168,107,0.18); color: #E8A86B; }
.role--gnd { background: rgba(91,228,155,0.15); color: #5BE49B; }
.role--pwr { background: rgba(255,107,107,0.15); color: #FF6B6B; }
.role--mixed { background: rgba(116,158,255,0.18); color: #749EFF; }

.stackup-total { margin: var(--space-3) 0 0; color: var(--fg-1); font-size: var(--fs-14); }

/* ----- meta cards ----- */
.stackup-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-5);
}
@media (max-width: 720px) { .stackup-meta { grid-template-columns: 1fr; } }
.stackup-meta .card h4 { margin: 0 0 var(--space-2); font-size: var(--fs-16); }
.stackup-meta .card ul { margin: 0; padding-left: 1.1rem; color: var(--fg-1); font-size: var(--fs-14); }
.stackup-rationale p { margin: 0; color: var(--fg-1); font-size: var(--fs-14); line-height: 1.55; }

/* ----- AI escalation section ----- */
.stackup-ai__form {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-3);
}
.stackup-ai__form label { color: var(--fg-2); font-size: var(--fs-14); }
.stackup-ai__form textarea {
  background: var(--bg-1); color: var(--fg-0);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 0.7rem;
  font: inherit;
  width: 100%;
  resize: vertical;
}
.stackup-ai__form textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }

.ai-status { color: var(--fg-2); font-size: var(--fs-14); margin: 0; }
.ai-status--ok { color: #5BE49B; }
.ai-status--warn { color: #F0BE5B; }
.ai-status--err { color: #FF6B6B; }

.stackup-ai__results { display: grid; gap: var(--space-5); margin-top: var(--space-5); }
.ai-opt { padding: var(--space-4); }
.ai-opt__head {
  display: flex; align-items: baseline; gap: var(--space-3);
  margin-bottom: var(--space-3); flex-wrap: wrap;
}
.ai-opt__head h3 { margin: 0; flex: 1; }
.ai-opt__head .mono { color: var(--fg-2); font-size: var(--fs-14); }
.ai-opt .stack-table { margin: 0; }
.ai-opt__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-3);
}
@media (max-width: 720px) { .ai-opt__grid { grid-template-columns: 1fr; } }
.ai-opt__grid h4 { margin: 0 0 var(--space-1); font-size: var(--fs-14); color: var(--fg-2); }
.ai-opt__grid ul { margin: 0; padding-left: 1.05rem; font-size: var(--fs-14); color: var(--fg-1); }
.ai-notes { color: var(--fg-2); font-size: var(--fs-14); font-style: italic; margin: 0; }