/*
 * calc-shared.css — styles shared across calculator pages
 * (bwcalc.html, p9calc.html, spcalc.html)
 *
 * Loaded after shared.css and footer.css.
 */

/* ---- card containers ---- */
.card {
  background: #1e1e1e;
  border: 1px solid #2e2e2e;
  border-radius: 6px;
  padding: 18px;
  margin-bottom: 14px;
}
.card-title {
  font-size: 14px;
  color: #ccc;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 12px;
  font-weight: bold;
}

/* ---- input primitives ---- */
label.field-label {
  display: block;
  font-size: 13px;
  color: #ddd;
  margin-bottom: 4px;
}
.field-hint { font-size: 11px; color: #888; margin-top: 3px; }
.parse-ok  { font-size: 12px; color: #6ec66e; margin-top: 6px; }
.parse-err { font-size: 12px; color: #d06060; margin-top: 6px; }

/* ---- filled-input indicator (auto-filled from paste) ---- */
input.has-value {
  border-color: #4a9a4a !important;
  background: #0f1f0f !important;
}
input.has-value:focus {
  border-color: #5aba5a !important;
}

/* ---- calculate / run button row ---- */
.calc-btn-row {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; margin-bottom: 20px;
}
.calc-btn-row .btn.primary {
  padding: 10px 36px;
  font-size: 15px;
}
.calc-err { font-size: 13px; color: #d06060; text-align: center; }

/* ---- summary / result card (green tint) ---- */
.summary-card {
  background: #182018;
  border: 1px solid #2a3a2a;
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 18px;
}

/* ---- input/output section divider ---- */
.section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 8px 0 20px 0;
}
.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #2a2a2a;
}

/* ---- collapsible details sections ---- */
details.collapsible {
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  background: #191919;
  margin-bottom: 14px;
}
details.collapsible summary {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 13px;
  color: #bbb;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
}
details.collapsible summary::-webkit-details-marker { display: none; }
details.collapsible summary::before {
  content: '▶'; font-size: 9px; color: #888;
  transition: transform 0.15s; flex-shrink: 0;
}
details.collapsible[open] summary::before { transform: rotate(90deg); }
details.collapsible summary:hover { color: #eee; }
details.collapsible .det-body {
  padding: 12px 14px 14px 14px;
  font-size: 13px;
  color: #aaa;
  line-height: 1.7;
}
details.collapsible .det-body p { margin: 0 0 6px 0; }
details.collapsible .det-body p:last-child { margin-bottom: 0; }
details.collapsible .det-body strong { color: #ddd; }
details.collapsible .det-body code {
  background: #111; border: 1px solid #333; border-radius: 3px;
  padding: 1px 5px; font-size: 12px; color: #ccc;
}

/* ---- instructions box (blue-tinted how-to-use accordion) ---- */
.instructions-box {
  background: #141c28;
  border: 1px solid #2a4a7a;
  border-radius: 6px;
  margin-bottom: 20px;
  overflow: hidden;
}
.instructions-box summary {
  padding: 11px 16px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: bold;
  color: #88bbff;
}
.instructions-box summary::-webkit-details-marker { display: none; }
.instructions-box summary::before {
  content: '▶'; font-size: 9px; color: #4477bb;
  transition: transform 0.15s; flex-shrink: 0;
}
.instructions-box[open] summary::before { transform: rotate(90deg); }
.instructions-box summary:hover { color: #aacfff; }
.instructions-box summary .ib-icon { font-size: 15px; }
.instructions-box summary .ib-subtitle {
  font-size: 12px; font-weight: normal; color: #5588bb; margin-left: auto;
}
.instructions-body {
  padding: 4px 18px 18px 18px;
  border-top: 1px solid #1e3358;
}
.ib-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.ib-step {
  display: flex;
  gap: 13px;
  align-items: flex-start;
}
.ib-num {
  width: 22px; height: 22px;
  background: #1e3a6a;
  border: 1px solid #2a5090;
  border-radius: 50%;
  font-size: 12px; font-weight: bold; color: #88bbff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.ib-text {
  font-size: 13px; color: #aac0dd; line-height: 1.65;
}
.ib-text strong { color: #ccddf5; }
.ib-cmd {
  display: inline-block;
  font-family: monospace; font-size: 12px;
  background: #0e1a2e; border: 1px solid #2a4a7a;
  border-radius: 3px; padding: 1px 7px;
  color: #88bbff;
  user-select: all;
}
.ib-tip {
  margin-top: 12px;
  padding: 8px 12px;
  background: #111820;
  border-left: 3px solid #2a4a7a;
  border-radius: 0 4px 4px 0;
  font-size: 12px; color: #7799bb; line-height: 1.6;
}
.ib-tip strong { color: #99bbdd; }

/* ---- "how it works" step cards ---- */
.hiw-steps { display: flex; flex-direction: column; gap: 10px; }
.hiw-step {
  background: #1a1a1a; border: 1px solid #2e2e2e;
  border-radius: 5px; overflow: hidden;
}
.hiw-step-hdr {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 14px 8px; border-bottom: 1px solid #2a2a2a;
}
.hiw-num { font-size: 11px; color: #777; min-width: 16px; }
.hiw-title { font-size: 14px; color: #ddd; font-weight: bold; }
.hiw-sub { font-size: 12px; color: #777; margin-left: auto; }
.hiw-body {
  padding: 12px 14px 14px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; font-size: 13px;
}
@media (max-width: 600px) { .hiw-body { grid-template-columns: 1fr; } }
.hiw-text { color: #aaa; line-height: 1.7; }
.hiw-text p { margin: 0 0 7px 0; }
.hiw-text p:last-child { margin-bottom: 0; }
.hiw-text strong { color: #ddd; }
.hiw-formula {
  background: #111; border: 1px solid #2a2a2a; border-radius: 4px;
  padding: 10px 12px; font-family: monospace; font-size: 12px;
  color: #bbb; line-height: 1.75; align-self: start;
}

/* ---- formula syntax highlighting spans ---- */
.fh { font-size: 10px; color: #666; text-transform: uppercase; letter-spacing: 0.05em;
      display: block; margin-bottom: 4px; }
.fv { color: #7bbcff; }
.fo { color: #777; }
.fn { color: #7be07b; }
.fc { color: #555; font-style: italic; }

/* ---- "how it works" subsections (nested income sources) ---- */
.hiw-substeps {
  grid-column: 1 / -1; margin-top: 14px;
  display: flex; flex-direction: column; gap: 0;
}
.hiw-substep {
  border-top: 1px solid #222; padding: 8px 0;
}
.hiw-substep-hdr {
  display: flex; align-items: baseline; gap: 8px;
  cursor: pointer; list-style: none; padding: 2px 0;
  user-select: none;
}
.hiw-substep-hdr::-webkit-details-marker { display: none; }
.hiw-substep-hdr::before {
  content: '▶'; font-size: 8px; color: #555;
  transition: transform 0.15s; flex-shrink: 0;
}
.hiw-substep[open] > .hiw-substep-hdr::before { transform: rotate(90deg); }
.hiw-substep-num { font-size: 11px; color: #555; min-width: 28px; }
.hiw-substep-title { font-size: 13px; color: #ccc; font-weight: bold; }
.hiw-substep-sub { font-size: 11px; color: #666; margin-left: auto; }
.hiw-substep-body {
  padding: 10px 0 4px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; font-size: 13px;
}
@media (max-width: 600px) { .hiw-substep-body { grid-template-columns: 1fr; } }

/* ---- import / export panel (shared across calc pages) ---- */
.card-title-row {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.card-title-row .card-title { margin-bottom: 0; }
.io-btns { display: flex; gap: 6px; }
.io-btn {
  font-size: 11px; padding: 3px 9px; border-radius: 3px; cursor: pointer;
  border: 1px solid #444; background: #252525; color: #bbb; font-family: monospace;
}
.io-btn:hover { background: #333; color: #eee; }
.io-area {
  margin-top: 10px; padding: 10px; background: #111; border: 1px solid #333;
  border-radius: 4px;
}
.io-area textarea {
  width: 100%; height: 80px; font-size: 11px; resize: vertical; margin-bottom: 6px;
}
.io-area-btns { display: flex; gap: 8px; }
.io-err { font-size: 12px; color: #d06060; margin-top: 4px; }
.hidden { display: none !important; }