/*
  Shared styling for every embeddable Planomy widget under /embed/.
  Extracted verbatim from the original compound-growth widget so the three
  calculators look like one product instead of three one-offs.

  Loaded as a same-origin stylesheet: verified that a sandboxed (opaque-origin)
  iframe still resolves `style-src 'self'` against the document URL, so the
  embed CSP in public/_headers allows this file even when the host page
  sandboxes the frame.

  Sizing is driven by the container width (the iframe), not the viewport, so
  the widget works at any embed size.
*/
:root {
  --bg: #ffffff;
  --surface: #f4f6fb;
  --border: #e5eaf3;
  --text: #172033;
  --text-muted: #526070;
  --brand: #2563eb;
  --brand-strong: #1d4ed8;
  --brand-contrast: #ffffff;
  --positive: #047857;
  --alt: #9333ea;
  --radius: 12px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1120;
    --surface: #12203a;
    --border: rgba(157, 184, 240, 0.22);
    --text: #e8edf6;
    --text-muted: #9db8f0;
    --brand: #4f8cff;
    --brand-strong: #6aa0ff;
    --brand-contrast: #0b1120;
    --positive: #34d399;
    --alt: #c084fc;
    color-scheme: dark;
  }
}

/* Explicit theme wins over the OS preference (?theme=light|dark). */
:root[data-theme="light"] {
  --bg: #ffffff;
  --surface: #f4f6fb;
  --border: #e5eaf3;
  --text: #172033;
  --text-muted: #526070;
  --brand: #2563eb;
  --brand-strong: #1d4ed8;
  --brand-contrast: #ffffff;
  --positive: #047857;
  --alt: #9333ea;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0b1120;
  --surface: #12203a;
  --border: rgba(157, 184, 240, 0.22);
  --text: #e8edf6;
  --text-muted: #9db8f0;
  --brand: #4f8cff;
  --brand-strong: #6aa0ff;
  --brand-contrast: #0b1120;
  --positive: #34d399;
  --alt: #c084fc;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.widget {
  container-type: inline-size;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  padding: 16px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Two columns once the embed itself is wide enough — not the page. */
@container (min-width: 560px) {
  .grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

legend {
  padding: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.field + .field {
  margin-top: 14px;
}

label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.affix {
  position: absolute;
  font-size: 0.95rem;
  color: var(--text-muted);
  pointer-events: none;
}

.affix.pre {
  left: 12px;
}

.affix.post {
  right: 12px;
}

input[type="number"] {
  width: 100%;
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 44px;
}

input.has-pre {
  padding-left: 26px;
}

input.has-post {
  padding-right: 46px;
}

input[type="range"] {
  width: 100%;
  margin: 10px 0 0;
  accent-color: var(--brand);
}

:is(input, a, button):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.hint {
  display: block;
  margin-top: 5px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.result {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}

.result .label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.result .big {
  font-size: clamp(1.5rem, 7cqw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

.result .sub {
  margin-top: 4px;
  font-size: 0.86rem;
  color: var(--text-muted);
}

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.stat {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
}

.stat .value {
  font-size: 1.05rem;
  font-weight: 700;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.stat .value.growth {
  color: var(--positive);
}

.stat .label {
  font-size: 0.72rem;
}

.track {
  display: flex;
  height: 10px;
  margin-top: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--border);
}

/* display: flex above beats the UA's [hidden] rule, so restate it. */
.track[hidden] {
  display: none;
}

.track span {
  display: block;
  height: 100%;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 6px;
}

.chart {
  display: block;
  width: 100%;
  height: 110px;
  margin-top: 14px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.foot a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}

.foot a:hover,
.foot a:focus-visible {
  text-decoration: underline;
  color: var(--brand-strong);
}