/* Bankroll Monte Carlo Simulator — structural styles.
 * ---------------------------------------------------------------------
 * EVERY visual decision routes through an --mc-* custom property with a
 * neutral fallback. Sites MUST override these (footprint rule — see
 * ADAPT.md). Never edit this file per site; skin via variables only.
 * --------------------------------------------------------------------- */

mc-sim {
  display: block;
  font-family: var(--mc-font, inherit);
  color: var(--mc-ink, #222833);
}

/* SEO fallback: visible until JS upgrades, then sr-only for crawlers. */
mc-sim.mc-enhanced .mc-fallback {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.mc-stage {
  position: relative;
  border: var(--mc-border, 1px solid #d9dde4);
  border-radius: var(--mc-radius, 10px);
  background: var(--mc-bg, #fbfbfc);
  padding: var(--mc-pad, 1.1rem);
}

/* --- presets ----------------------------------------------------------- */
.mc-presets {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin: 0 0 .9rem;
}
.mc-preset {
  font: inherit; font-size: .8rem;
  padding: .32rem .7rem;
  color: var(--mc-ink, #222833);
  background: var(--mc-chip-bg, #eef0f4);
  border: var(--mc-chip-border, 1px solid transparent);
  border-radius: 99px;
  cursor: pointer;
}
.mc-preset:hover { background: var(--mc-chip-bg-hover, #e2e6ec); }
.mc-preset:focus-visible { outline: 2px solid var(--mc-focus, #1a1a1a); outline-offset: 1px; }

/* --- form -------------------------------------------------------------- */
.mc-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: .6rem .7rem;
  align-items: end;
  margin: 0 0 1rem;
}
.mc-field { display: flex; flex-direction: column; gap: .22rem; min-width: 0; }
.mc-field-label {
  font-size: .72rem;
  letter-spacing: .02em;
  color: var(--mc-muted, #6a7280);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mc-input {
  font: inherit; font-size: .92rem;
  width: 100%;
  padding: .42rem .55rem;
  color: var(--mc-ink, #222833);
  background: var(--mc-input-bg, #fff);
  border: var(--mc-input-border, 1px solid #cfd4dc);
  border-radius: var(--mc-input-radius, 7px);
}
.mc-input:focus { outline: 2px solid var(--mc-focus, #1a1a1a); outline-offset: 1px; }

.mc-actions { display: flex; gap: .5rem; align-items: end; }
.mc-btn {
  font: inherit; font-size: .9rem; font-weight: 600;
  padding: .48rem .95rem;
  color: var(--mc-ink, #222833);
  background: var(--mc-btn-bg, #eef0f4);
  border: var(--mc-btn-border, 1px solid transparent);
  border-radius: var(--mc-btn-radius, 7px);
  cursor: pointer;
  white-space: nowrap;
}
.mc-btn:hover { background: var(--mc-btn-bg-hover, #e2e6ec); }
.mc-btn:focus-visible { outline: 2px solid var(--mc-focus, #1a1a1a); outline-offset: 1px; }
.mc-btn-primary {
  color: var(--mc-btn-primary-ink, #fff);
  background: var(--mc-btn-primary-bg, #2c4a6e);
}
.mc-btn-primary:hover { background: var(--mc-btn-primary-bg-hover, #24405f); }

/* --- chart ------------------------------------------------------------- */
.mc-chart {
  height: var(--mc-chart-height, 340px);
  background: var(--mc-chart-bg, transparent);
  border-radius: var(--mc-input-radius, 7px);
}
.mc-canvas { width: 100%; height: 100%; display: block; }

/* --- verdict ------------------------------------------------------------ */
.mc-verdict {
  margin: .85rem 0;
  font-size: .95rem;
  line-height: 1.5;
  padding: .65rem .85rem;
  color: var(--mc-verdict-ink, var(--mc-ink, #222833));
  background: var(--mc-verdict-bg, #f1f3f6);
  border-radius: var(--mc-input-radius, 7px);
}

/* --- stat tiles ---------------------------------------------------------- */
.mc-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .55rem;
  margin: 0;
}
.mc-tile {
  padding: .6rem .75rem;
  background: var(--mc-tile-bg, #fff);
  border: var(--mc-tile-border, 1px solid #e2e5ea);
  border-radius: var(--mc-input-radius, 7px);
}
.mc-tile-label {
  font-size: .7rem;
  letter-spacing: .03em;
  color: var(--mc-muted, #6a7280);
}
.mc-tile-value {
  margin: .18rem 0 0;
  font-size: 1.18rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.mc-tile-danger .mc-tile-value { color: var(--mc-danger, #a03030); }
.mc-tile-value.mc-neg { color: var(--mc-danger, #a03030); }
.mc-tile-value.mc-pos { color: var(--mc-positive, #1e7d4f); }

@media (max-width: 640px) {
  .mc-chart { height: var(--mc-chart-height-mobile, 260px); }
  .mc-actions { grid-column: 1 / -1; }
  .mc-btn { flex: 1; }
}