/*
 * Post 232 Domestic Content Guidelines — embedded styles.
 *
 * Ported from the standalone HTML calculator. Every rule is scoped under
 * `.dc232` because the source styled bare `body`, `*`, `h1`, `h2`, `td`,
 * `label`, `input` and `footer` selectors — dropping those into a WP page
 * unscoped would restyle the whole theme.
 *
 * Isolation runs both ways: see the inbound boundary reset below for why no
 * rule here targets a bare element. Regression check for both directions:
 * `tests/theme-isolation/README.md`.
 *
 * Custom properties are namespaced (--dc232-*) so a theme that happens to
 * define --yellow or --line can't bleed into this component.
 */

.dc232.dc232 {
  --dc232-yellow: #ffcc43;
  --dc232-navy:   #0d1f2d;
  --dc232-navy-2: #14293a;
  --dc232-navy-3: #1b3448;
  --dc232-line:   rgba(255, 255, 255, 0.10);
  --dc232-text:   #f2f5f7;
  --dc232-muted:  #9fb0bd;
  --dc232-green:  #5ad19a;
  --dc232-red:    #f07a6a;

  font-family: 'Open Sans', Arial, sans-serif;
  /*
   * State the baseline explicitly rather than inheriting the host's. The live
   * host resolves to 19.2px, and while nothing breaks today — every element
   * that carries text declares its own size, and the file uses no em/rem — an
   * element added later without a font-size would silently pick up whatever
   * the theme happens to set.
   */
  font-size: 16px;
  background: var(--dc232-navy);
  color: var(--dc232-text);
  padding: 28px 20px 48px;
  /* Neutralize theme line-height so spacing matches the standalone design. */
  line-height: normal;
}

/* Scoped reset. The source relied on a global `* { margin:0; padding:0 }`. */
.dc232.dc232 *,
.dc232.dc232 *::before,
.dc232.dc232 *::after { box-sizing: border-box; }

/*
 * Inbound boundary reset.
 *
 * Scoping under `.dc232` stops this component leaking OUT into the theme. It
 * does nothing about the theme leaking IN. A WordPress theme styles post
 * content elements — `.entry-content h2`, `.entry-content label`,
 * `.entry-content td` — at specificity (0,1,1), which ties or beats a bare
 * `.dc232 h2` rule. That is how the headings, footer, labels and table came
 * out reskinned: 44px near-black "BLEND RATIO" instead of 13px muted caps.
 *
 * Repeating the class lifts this reset to (0,3,0), so it outranks not just
 * `.entry-content h2` (0,1,1) but also the `.page .entry-content h1` /
 * `.single .entry-content h2` shape (0,2,1) that themes use for content
 * headings. Every component rule below is `.dc232.dc232 .dc232-*` — also
 * (0,3,0) but later in the file, so component intent still wins over this
 * reset. No bare-element rules anywhere: they cannot survive the reset, and
 * they were the hole in the first place.
 *
 * This does not beat a theme rule marked `!important`. The live host has four
 * of those; they are handled separately at the bottom of this file.
 *
 * font-weight is deliberately NOT reset — `<b>` in the bar legend needs it.
 */
.dc232.dc232.dc232 * {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-transform: none;
  color: inherit;
}

.dc232.dc232 .wrap {
  max-width: 1100px;
  margin: 0 auto;
  /*
   * Breakpoints below are container queries, not media queries. This component
   * is embedded in post content, so its width is set by the theme's content
   * column (~800px on the live host), not by the viewport. Keying off the
   * viewport picked the 4-across layout at 1280px for a box only 758px wide,
   * squeezing the pickers to 39px and breaking their labels mid-word.
   */
  container-type: inline-size;
  container-name: dc232;
}

.dc232.dc232 .dc232-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}
.dc232.dc232 .logo svg { display: block; height: 46px; width: auto; }
.dc232.dc232 .logo .word { fill: #ffffff; }
.dc232.dc232 .dc232-h1 { font-size: 20px; font-weight: 800; letter-spacing: -0.2px; color: var(--dc232-text); }
.dc232.dc232 .sub { color: var(--dc232-muted); font-size: 13px; margin-bottom: 24px; }

.dc232.dc232 .card {
  background: var(--dc232-navy-2);
  border: 1px solid var(--dc232-line);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 16px;
}

.dc232.dc232 .inputs { display: grid; grid-template-columns: 1.1fr 1.3fr 1fr 1.1fr; gap: 16px; }
@container dc232 (max-width: 900px) { .dc232.dc232 .inputs { grid-template-columns: 1fr 1fr; } }
@container dc232 (max-width: 520px) { .dc232.dc232 .inputs { grid-template-columns: 1fr; } }

.dc232.dc232 .hint { font-size: 11px; color: var(--dc232-muted); margin-top: 6px; line-height: 1.4; min-height: 31px; }
.dc232.dc232 .dc232-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--dc232-muted);
  margin-bottom: 7px;
}

/*
 * Pickers fill their row and wrap to a second row rather than letting tiles get
 * too narrow: four across when there is room, 2x2 when there is not. This is
 * flex-wrap doing the work, so there is no breakpoint to keep in sync with the
 * surrounding grid.
 *
 * A `grid-template-columns: repeat(4, 1fr)` override used to sit on the year and
 * system-type pickers, forcing one row of four regardless of width, with
 * `min-width: 0` on the buttons so the tracks could collapse. Inside the theme's
 * ~800px content column that squeezed the tiles to 39px and broke their labels
 * mid-word ("MLP/E", "Strin/g").
 */
.dc232.dc232 .seg { display: flex; gap: 6px; flex-wrap: wrap; }
.dc232.dc232 .seg button {
  /*
   * `flex: 1` (basis 0) keeps every tile the same width whenever there is slack.
   * The floor is `max-content` rather than a px value: it says exactly what is
   * meant — never narrower than this button's own label — so it holds whatever
   * the label text, the font, or the host's zoom factor turn out to be. A fixed
   * 56px did not: the live theme scales narrow viewports, which resolved it to
   * 53.5px and clipped "String" at 320px.
   */
  flex: 1;
  min-width: max-content;
  background: var(--dc232-navy-3);
  color: var(--dc232-text);
  border: 1px solid var(--dc232-line);
  border-radius: 8px;
  padding: 9px 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: normal;
  text-transform: none;
  /* Labels are short and atomic — "2027+", "MLPE", "String". Breaking them
     mid-word ("MLP/E") is never the right answer; make the button wider. */
  white-space: nowrap;
  cursor: pointer;
  transition: all .15s;
}
.dc232.dc232 .seg button:hover { border-color: rgba(255, 204, 67, 0.5); }
.dc232.dc232 .seg button.active {
  background: var(--dc232-yellow);
  color: #14202b;
  border-color: var(--dc232-yellow);
}
.dc232.dc232 .seg button.disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }

.dc232.dc232 .dc232-num {
  width: 100%;
  background: var(--dc232-navy-3);
  color: var(--dc232-text);
  border: 1px solid var(--dc232-line);
  border-radius: 8px;
  padding: 9px 10px 9px 26px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
}
.dc232.dc232 .dc232-num:focus { outline: none; border-color: var(--dc232-yellow); }
.dc232.dc232 .money { position: relative; }
.dc232.dc232 .money::before {
  content: "$";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dc232-muted);
  font-size: 13px;
  font-weight: 700;
}

.dc232.dc232 .hero { display: grid; grid-template-columns: 1fr 1fr 1.25fr; gap: 14px; }
@container dc232 (max-width: 700px) { .dc232.dc232 .hero { grid-template-columns: 1fr; } }

.dc232.dc232 .callout {
  display: block;
  background: rgba(255, 204, 67, 0.15);
  color: var(--dc232-yellow);
  border: 1px solid rgba(255, 204, 67, 0.45);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 14px;
  min-height: 27px;
}
.dc232.dc232 .callout.neutral { background: rgba(255, 255, 255, 0.04); color: var(--dc232-muted); border-color: var(--dc232-line); }
.dc232.dc232 .callout.alert { background: rgba(240, 122, 106, 0.12); color: var(--dc232-red); border-color: rgba(240, 122, 106, 0.5); }
.dc232.dc232 .pill.alertpill { background: rgba(240, 122, 106, 0.15); color: var(--dc232-red); }

.dc232.dc232 .tile {
  background: var(--dc232-navy-3);
  border: 1px solid var(--dc232-line);
  border-radius: 12px;
  padding: 16px;
}
.dc232.dc232 .tile .k {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--dc232-muted);
  margin-bottom: 8px;
}
.dc232.dc232 .tile .v { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.05; }
.dc232.dc232 .tile .d { font-size: 12px; color: var(--dc232-muted); margin-top: 7px; line-height: 1.4; min-height: 50px; }
.dc232.dc232 .tile.primary {
  border-color: rgba(255, 204, 67, 0.55);
  background: linear-gradient(180deg, rgba(255, 204, 67, 0.10), rgba(255, 204, 67, 0.02));
}
.dc232.dc232 .pos { color: var(--dc232-green); }
.dc232.dc232 .neg { color: var(--dc232-red); }

/* Premium-vs-bonus comparison visual */
.dc232.dc232 .viz { margin-top: 20px; }
.dc232.dc232 .viz-title { font-size: 19px; font-weight: 800; letter-spacing: -0.2px; margin-bottom: 10px; min-height: 24px; }
.dc232.dc232 .vlabel {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--dc232-muted);
  margin: 10px 0 6px;
}
.dc232.dc232 .vrow { display: flex; align-items: center; gap: 12px; }
.dc232.dc232 .vtrack { flex: 1; position: relative; height: 26px; }
.dc232.dc232 .vbar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 7px;
  min-width: 2px;
  transition: width 0.55s ease 0.05s;
}
.dc232.dc232 .vbar.prem { background: #4dc9e2; }
.dc232.dc232 .vbar.bon { background: #2e8ba0; }
.dc232.dc232 .vmark {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 0;
  border-left: 2px dashed rgba(255, 255, 255, 0.55);
  transition: left 0.55s ease 0.05s, opacity 0.3s ease;
}
.dc232.dc232 .vval { width: 74px; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.dc232.dc232 .bracketrow { margin-top: 6px; }
.dc232.dc232 .bracketrow .vtrack { height: 50px; }
.dc232.dc232 .vbracket {
  position: absolute;
  top: 0;
  height: 12px;
  border: 3px solid var(--dc232-yellow);
  border-top: none;
  border-radius: 0 0 8px 8px;
  transition: left 0.55s ease 0.05s, width 0.55s ease 0.05s, opacity 0.3s ease;
}
.dc232.dc232 .vbracket.neg { border-color: var(--dc232-red); }
.dc232.dc232 .vbadge {
  position: absolute;
  top: 17px;
  transform: translateX(-50%);
  background: var(--dc232-yellow);
  color: #14202b;
  font-size: 13px;
  font-weight: 800;
  border-radius: 8px;
  padding: 4px 12px;
  white-space: nowrap;
  transition: left 0.55s ease 0.05s, opacity 0.3s ease;
}
.dc232.dc232 .vbadge.neg { background: var(--dc232-red); color: #fff; }

.dc232.dc232 .barwrap { margin-top: 4px; }
.dc232.dc232 .bar { display: flex; height: 26px; border-radius: 7px; overflow: hidden; border: 1px solid var(--dc232-line); }
.dc232.dc232 .bar .dom { background: var(--dc232-yellow); transition: width 0.55s ease 0.05s; }
.dc232.dc232 .bar .imp { background: #3d566b; transition: width 0.55s ease 0.05s; }
.dc232.dc232 .barlegend { display: flex; justify-content: space-between; font-size: 12px; color: var(--dc232-muted); margin-top: 7px; }
.dc232.dc232 .barlegend b { color: var(--dc232-text); }
.dc232.dc232 .swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: baseline; }

.dc232.dc232 .dc232-h2 {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.9px;
  color: var(--dc232-muted);
  margin-bottom: 12px;
  min-height: 24px;
}
.dc232.dc232 .dc232-h2 .pill { vertical-align: middle; }

/*
 * Themes commonly style bare `table`/`tr`/`td` (borders, zebra striping, cell
 * padding). Anything this component leaves unset is a hole the theme fills, and
 * inherited `color` loses to any direct `td` rule — so background, border and
 * color are all stated explicitly rather than left to inherit.
 */
.dc232.dc232 .dc232-table {
  width: 100%;
  border-collapse: collapse;
  border: none;
  font-size: 13.5px;
  background: none;
  color: var(--dc232-text);
}
.dc232.dc232 .dc232-table tr { background: none; border: none; }
.dc232.dc232 .dc232-table td {
  padding: 7px 4px;
  border: none;
  border-bottom: 1px solid var(--dc232-line);
  background: none;
  color: var(--dc232-text);
}
.dc232.dc232 .dc232-table tr:last-child td { border-bottom: none; }
.dc232.dc232 .dc232-table td:last-child { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.dc232.dc232 .dc232-table td:first-child { color: var(--dc232-muted); }

.dc232.dc232 .note { font-size: 12px; color: var(--dc232-muted); line-height: 1.55; }
.dc232.dc232 .warn {
  border: 1px solid rgba(240, 122, 106, 0.5);
  background: rgba(240, 122, 106, 0.08);
  border-radius: 12px;
  padding: 16px;
  font-size: 14px;
  line-height: 1.5;
}
.dc232.dc232 .pill {
  display: inline-block;
  background: rgba(90, 209, 154, 0.15);
  color: var(--dc232-green);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
}
.dc232.dc232 .dc232-foot { color: var(--dc232-muted); font-size: 11px; margin-top: 22px; line-height: 1.6; }

/*
 * Host theme overrides that specificity cannot win.
 *
 * Measured on the live host (v5.renewablescompany.dev, 2026-08-20). These rules
 * carry `!important`, so no selector weight beats them — only matching
 * `!important` does, and among important declarations the normal cascade
 * applies, which is why (0,3,0) here wins over the theme's (0,0,1):
 *
 *   h1, h2, h3  { font-family: ... !important }                      (0,0,3)
 *   h1          { font-size: 48px !important }                       (0,0,1)
 *   h2          { font-size: 42px !important }                       (0,0,1)
 *   input:not([type=button]):not([type=submit]) {
 *                 padding: 12px 15px !important;
 *                 color: #10697d !important;
 *                 margin-bottom: 25px !important }                   (0,3,2)
 *
 * Scoped to exactly the contested declarations, so everything else stays
 * overridable. The theme's `#top-navbar, header { height: 80px }` (1,0,1) is
 * handled in the template instead: the header is a <div>, not a <header>, so
 * that rule no longer matches. If this list grows, move the component into a
 * shadow root rather than extending it — that is the only permanent answer to
 * a host that forces element styles.
 */
.dc232.dc232 .dc232-h1,
.dc232.dc232 .dc232-h2 { font-family: inherit !important; }
.dc232.dc232 .dc232-h1 { font-size: 20px !important; }
.dc232.dc232 .dc232-h2 { font-size: 13px !important; }
.dc232.dc232 .dc232-num {
  padding: 9px 10px 9px 26px !important;
  margin: 0 !important;
  color: var(--dc232-text) !important;
}

/* Print: the dark fill wastes toner and renders poorly. */
@media print {
  .dc232.dc232 { background: #fff; color: #111; padding: 0; }
  .dc232.dc232 .card,
  .dc232.dc232 .tile { background: #fff; border-color: #ccc; }
  .dc232.dc232 .tile .k,
  .dc232.dc232 .tile .d,
  .dc232.dc232 .sub,
  .dc232.dc232 .dc232-label,
  .dc232.dc232 .dc232-foot,
  .dc232.dc232 .dc232-table td:first-child { color: #444; }
  .dc232.dc232 .dc232-h1,
  .dc232.dc232 .tile .v { color: #111; }
  .dc232.dc232 .logo .word { fill: #111; }
}