/* IUC simulator on the new shell (2026-10-29, group D): only what the page adds to /design/novo.css.
   Rendered by src/iuc/render.ts; the calculator's output is drawn by iuc.js (src/iuc/browser.ts) with the same
   class names as before (.iuc__total, .pcard__label/big/sub, .iuc__lines, .iuc__note, .iuc__aviso). */
.giuc { font: 400 16px/1.5 var(--font-ui); color: var(--ink); --ink-60: rgba(41, 18, 16, 0.72); }
.giuc .dek { max-width: 60ch; } .giuc .dek b { color: var(--ink-deep); }
.giuc .g2hi { align-items: start; }
.giuc__s { display: grid; gap: 20px; }
.giuc__s > * { margin: 0; }
.giuc .fq6 { max-width: 1180px; } .giuc .fq6 > * { max-width: 820px; width: 100%; } /* one left edge, as the G3 pages (g3.css) */
.giuc .b .lead2 { max-width: 65ch; }
.giuc a:focus-visible, .giuc button:focus-visible, .giuc select:focus-visible, .giuc input:focus-visible, .giuc summary:focus-visible { outline: 2px solid var(--peach-ink); outline-offset: 2px; }

/* ── the calculator, as the hero's tool card ── */
.giuc__tool { gap: 16px; }
.iuc { display: grid; gap: 14px; }
.iuc__f { display: grid; gap: 6px; }
.iuc__f > span { font: 500 14px/1.3 var(--font-ui); color: var(--ink-deep); display: flex; justify-content: space-between; gap: 12px; }
.iuc__f > span small { font: 400 12.5px/1.3 var(--font-doc); color: var(--ink-50); }
.iuc__f select, .iuc__f input { width: 100%; min-width: 0; min-height: 44px; box-sizing: border-box; background-color: #fff; border: 1px solid var(--tint-20); border-radius: 12px; padding: 0 14px; font: 400 15px/1.2 var(--font-ui); color: var(--ink); text-align: left; }
.iuc__f select { padding-right: 36px; }
.iuc__f select:disabled { color: var(--ink-50); background-color: var(--cream); }
.iuc__f input::placeholder { color: var(--ink-50); font-style: italic; } /* an example, not a value (QA B1) */
.iuc__f input[aria-invalid="true"] { border-color: var(--peach-ink); box-shadow: 0 0 0 1px var(--peach-ink); }
.iuc__err { margin: -6px 0 0; font: 500 13.5px/1.45 var(--font-ui); color: var(--peach-ink); }
.iuc__row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.iuc__hint { font-size: 14px; color: var(--ink-60); line-height: 1.5; margin: 0; }
.giuc .pill--primary { justify-self: start; min-height: 52px; padding: 0 28px; border: 0; border-radius: var(--r-pill); background: var(--ink-deep); color: #fff; font: 600 16px/1.2 var(--font-ui); cursor: pointer; }
.iuc .pill--primary { width: 100%; }

.iuc__out { display: grid; gap: 10px; }
.iuc__total { background: var(--ink-deep); color: #fff; border-radius: 20px; padding: 20px 22px; display: grid; gap: 6px; }
.iuc__total .pcard__label { font: 500 12px/1 var(--font-doc); letter-spacing: .07em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.iuc__total .pcard__big { margin: 0; font: 700 44px/1 var(--disp); color: var(--peach); }
.iuc__total .pcard__big small { font: 400 15px/1 var(--font-ui); color: rgba(255,255,255,.7); margin-left: 6px; }
.iuc__total .pcard__sub { margin: 0; font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,.8); }
/* Every line names the article it comes from. A total is unverifiable; a breakdown with citations is the product. */
.iuc__lines { background: var(--cream); border-radius: 18px; padding: 4px 18px; }
.iuc__line { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--tint-10); }
.iuc__line:last-child { border-bottom: 0; }
.iuc__lab { display: grid; gap: 2px; font-size: 15px; color: var(--ink-deep); }
.iuc__lab small { font: 400 12.5px/1.4 var(--font-doc); color: var(--ink-50); }
.iuc__val { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 15px; font-weight: 600; color: var(--ink-deep); }
.iuc__note, .iuc__aviso { font: 400 13px/1.5 var(--font-doc); color: var(--ink-60); margin: 0; }

/* ── «Quando é que se paga»: the two years as cards ── */
.achados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } /* one right edge: the shared .wrap (QA S8) */
.achado { background: #fff; border-radius: 22px; padding: 22px 24px; display: grid; gap: 8px; align-content: start; }
.achado > b { font: 700 32px/1 var(--disp); color: var(--ink-deep); }
.achado > span { font-size: 16px; line-height: 1.55; color: var(--ink-60); } .achado > span b { color: var(--ink-deep); }

/* ── the alert band: the same watch form ── */
.giuc__form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; background: #fff; border-radius: 28px; padding: 24px; box-shadow: 0 30px 70px rgba(41,18,16,.10); }
.calert__field { flex: 1 1 100%; display: grid; gap: 6px; }
.calert__field label { font: 500 14px/1.3 var(--font-ui); color: var(--ink-deep); }
.calert__field select, .giuc__form input[type=email] { width: 100%; min-height: 52px; box-sizing: border-box; border: 0; border-radius: var(--r-pill); padding: 0 20px; background: var(--cream); font: 400 16px/1.2 var(--font-ui); color: var(--ink); }
.giuc__form input[type=email] { flex: 1 1 220px; width: auto; min-width: 0; }
.giuc__form .pill--primary { flex: none; }
.calert__consent { flex: 1 1 100%; display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--ink-60); cursor: pointer; }
.calert__consent input { margin-top: 2px; flex: none; width: 20px; height: 20px; accent-color: var(--ink-deep); }
.calert__priv { flex: 1 1 100%; display: inline-flex; align-items: center; min-height: 40px; font-size: 13.5px; color: var(--ink-60); text-decoration: underline; text-underline-offset: 3px; }
.calert__status { flex: 1 1 100%; margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-60); }
.calert__status:empty { display: none; }
.calert__status[data-state='ok'] { color: var(--ink-deep); }
.calert__status[data-state='erro'] { color: var(--peach-ink); }

/* ── the rate tables: real HTML tables, crawlable and citable ── */
.tab { display: grid; gap: 10px; }
.tab + .tab { margin-top: 28px; }
.tab h3 { margin: 0; font: 700 24px/1.2 var(--disp); color: var(--ink-deep); }
.tab__lead { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink-60); max-width: 65ch; }
.tab__src { margin: 0; font: 400 12.5px/1.5 var(--font-doc); color: var(--ink-50); max-width: 70ch; }
.tabela { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--tint-10); border-radius: 18px; overflow: hidden; font-size: 15px; }
.b3 .tabela { border-color: transparent; }
.tabela th { text-align: left; font: 500 12px/1.3 var(--font-doc); letter-spacing: .04em; color: var(--ink-50); padding: 12px 16px; border-bottom: 1px solid var(--tint-10); }
.tabela td { padding: 12px 16px; border-bottom: 1px solid var(--tint-10); color: var(--ink-deep); }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.giuc a:not(.rc):not(.marca) { color: var(--ink-deep); text-underline-offset: 3px; }

/* the source line (as the G3 pages' .hfonte) */
.giuc .hfonte { padding-top: 40px; padding-bottom: 56px; }
.giuc .hfonte .src { display: block; max-width: 80ch; border-top: 0; padding-top: 0; margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-60); }
.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; }

@media (max-width: 960px) {
  .giuc .g2hi { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .iuc__row, .achados { grid-template-columns: 1fr; }
  .giuc__form { padding: 18px 16px; border-radius: 22px; }
  .giuc__form .pill--primary { width: 100%; }
  .giuc .crumbs { align-items: center; } .giuc .crumbs a, .giuc .hfonte a, .giuc .lead2 a { padding-block: 12px; } /* tap targets ≥ 40 px, as the G3 pages */
  .tabela { font-size: 14px; }
  .tabela th, .tabela td { padding: 10px 12px; }
  /* A wide table (CO₂, categoria A): each row stacks as a card, every cell under its column name, so nothing
     scrolls sideways at 390 px. Still a real table for crawlers and screen readers. */
  .tabela--x thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela--x, .tabela--x tbody, .tabela--x tr, .tabela--x td { display: block; }
  .tabela--x tr { padding: 8px 0; border-bottom: 1px solid var(--tint-10); }
  .tabela--x tr:last-child { border-bottom: 0; }
  .tabela--x td { display: flex; justify-content: space-between; gap: 12px; padding: 4px 14px; border: 0; text-align: right; white-space: normal; }
  .tabela--x td::before { content: attr(data-l); text-align: left; font: 500 12px/1.4 var(--font-doc); color: var(--ink-50); }
}