/* D1 «Quanto me custa sair?» — visual-spec-v1. One 520 px conversation column (Greg asks, Greg
   answers), then the reference zone. On the new shell (2026-10-29, group E): the nav, crumbs and footer come
   from /design/novo.css; tokens and the bubble/pill/ui-notif components from /design/ (components.css).
   combustiveis.css no longer loads: the few rules the tool took from it (FAQ pills, consent line, sr-only,
   the law note) are ported below, under «§0b From combustiveis.css». */

/* Progressive enhancement toggles `hidden`; some reused classes set `display`. */
[hidden] { display: none !important; }

/* ─── §0 Foundations ──────────────────────────────────────────────────── */
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } }
.d1 .arrive { animation: arrive 240ms cubic-bezier(.2,.8,.3,1) both; animation-delay: calc(var(--i, 0) * 60ms); }
.pill:disabled { opacity: .45; cursor: not-allowed; }
.d1 [tabindex="-1"]:focus { outline: none; }
.d1 [tabindex="-1"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.d1 :is(#res-h, #carta-titulo, #lembrete-titulo, #lembrete-done, .option-row, .lfield input) { scroll-margin-top: var(--s-4); }

/* ─── §0b From combustiveis.css (the tool's FAQ, consent, notes) ───────── */
.gd1 { font: 400 16px/1.5 var(--font-ui); color: var(--ink); padding: clamp(28px, 4vw, 56px) 0 clamp(48px, 6vw, 80px); }
.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; }
.d1 .csec__note { font-size: var(--t-sm); color: var(--ink-60); margin: 0 0 var(--s-6); max-width: 58ch; }
.d1 .faq__list { display: grid; }
.d1 .faq__item { display: grid; gap: var(--s-3); }
.d1 .faq__q {
  align-items: center; gap: var(--s-4); max-width: 100%;
  background: var(--paper); border: 0; border-radius: var(--r-pill); box-shadow: var(--shadow-card);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-5); cursor: pointer; text-align: left;
  font: 400 var(--t-base)/1.3 var(--font-ui); color: var(--ink);
}
.d1 .faq__q i { width: 30px; height: 30px; border-radius: 50%; background: var(--cream); flex: none; position: relative; }
.d1 .faq__q i::before, .d1 .faq__q i::after {
  content: ''; position: absolute; inset: 50% 9px auto; height: 1.5px; background: var(--ink);
  transform: translateY(-50%); transition: transform 240ms cubic-bezier(.2,.8,.3,1);
}
.d1 .faq__q i::after { transform: translateY(-50%) rotate(90deg); }
.d1 .faq__q[aria-expanded='true'] i::before { transform: translateY(-50%) rotate(45deg); }
.d1 .faq__q[aria-expanded='true'] i::after { transform: translateY(-50%) rotate(-45deg); }
.d1 .faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 320ms cubic-bezier(.2,.8,.3,1); }
.d1 .faq__item[data-open='true'] .faq__a { grid-template-rows: 1fr; }
.d1 .faq__a > div { overflow: hidden; }
.d1 .faq__a > div > p {
  background: var(--tint-10); color: var(--ink); font-size: var(--t-base); line-height: 1.5;
  padding: var(--s-5); margin: 0; border-radius: var(--r-bubble-greg);
}
@media (prefers-reduced-motion: reduce) { .d1 .faq__a { transition: none; } }
.d1 .calert__consent { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-xs); color: var(--ink-60); line-height: 1.5; }
.d1 .calert__consent input { margin-top: 3px; flex: none; width: 20px; height: 20px; accent-color: var(--ink-deep); }
.d1 .achado { display: grid; gap: var(--s-3); align-content: start; background: var(--cream); border-radius: var(--r-card); padding: var(--s-5); }
.d1 .achado span { font-size: var(--t-sm); line-height: 1.5; }
/* Focus: one visible ring on every control the page draws (the chips and fields have their own). */
.gd1 :is(a, button, summary):focus-visible { outline: 2px solid var(--peach-ink); outline-offset: 2px; }
/* The source line under the page, as the G3 pages' .hfonte. */
.hfonte { padding-top: 8px; padding-bottom: 56px; }
.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); }

/* ─── §1 Column ───────────────────────────────────────────────────────── */
.convo { width: 100%; max-width: var(--chat-w); margin-inline: auto; display: flex; flex-direction: column; }
.d1 .crumbs { flex-wrap: wrap; align-items: center; margin-bottom: var(--s-5); }
.d1 .crumbs a { min-height: 40px; display: inline-flex; align-items: center; text-underline-offset: 2px; }
.convo__h1 {
  font: 700 clamp(34px, 6vw, 52px)/1.05 var(--disp); letter-spacing: -.02em; color: var(--ink-deep); max-width: 18ch;
  margin: 0 0 var(--s-5);
}
.convo > .msg { margin-bottom: var(--s-4); }
.reply { display: flex; flex-direction: column; margin-top: var(--s-5); }
.reply:not(:has(> :not([hidden]))) { margin-top: 0; }
.reply > * + * { margin-top: var(--s-4); }
.reply > .saidas { margin-top: var(--s-5); }
.reply > :is(#carta, #lembrete) { margin-top: var(--s-6); }
@media (min-width: 1040px) {
  .d1 .crumbs { margin-bottom: var(--s-6); }
  .reply { margin-top: var(--s-6); }
  .reply > .saidas { margin-top: var(--s-6); }
}

/* ─── §2.1 Greg's line ────────────────────────────────────────────────── */
.msg { display: grid; grid-template-columns: 28px 1fr; gap: var(--s-2); align-items: end; }
.msg__mark { border-radius: 8px; display: block; }
.msg > .bubble { justify-self: start; max-width: 100%; }
/* r2 M4: the error sits right after its question, inside the ask card. */
.exit-ask #exit-err, .refine #exit-err { margin-top: calc(-1 * var(--s-2)); }

/* ─── §2.2 The ask card ───────────────────────────────────────────────── */
.exit-ask { background: var(--cream); border-radius: var(--r-card); padding: var(--s-5); display: grid; gap: var(--s-5); }
.exit-ask__q { display: grid; gap: var(--s-3); border: 0; margin: 0; padding: 0; min-width: 0; }
.exit-ask__label { font: 400 var(--t-base)/1.3 var(--font-ui); color: var(--ink); padding: 0; }
.exit-ask__hint { font-size: var(--t-sm); line-height: 1.45; color: var(--ink-60); margin: 0; max-width: none; }
.exit-ask__go { width: 100%; min-height: 52px; font-size: var(--t-base); }
.exit-ask__switch {
  font-size: var(--t-sm); color: var(--ink-60); text-underline-offset: 3px;
  min-height: 44px; display: inline-flex; align-items: center; justify-self: start;
}
@media (min-width: 1040px) { .exit-ask { padding: var(--s-6); } }

/* ─── §2.3 Chips ──────────────────────────────────────────────────────── */
.chips { display: grid; gap: var(--s-2); }
.chips--3 { grid-template-columns: repeat(3, 1fr); }
.chips--4 { grid-template-columns: repeat(4, 1fr); }
.chips--stack { grid-template-columns: 1fr; }
.chip { position: relative; display: block; }
/* combustiveis.css sizes its own .chip (a station brand square) at ≤560 px; not ours. */
.d1 .chip { width: auto; height: auto; border-radius: 0; font-size: inherit; }
.chip__in { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; width: 100%; height: 100%; }
.chip__face {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  padding: var(--s-3) var(--s-2); background: var(--paper); border: 1px solid var(--tint-20);
  border-radius: var(--r-pill); font: 400 var(--t-sm)/1.2 var(--font-ui); color: var(--ink); text-align: center;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.chips--stack .chip__face { justify-content: flex-start; padding-inline: var(--s-5); min-height: 48px; text-align: left; }
.chip__in:hover + .chip__face { border-color: var(--ink); }
.chip__in:checked + .chip__face { background: var(--ink-deep); border-color: var(--ink-deep); color: var(--paper); }
.chip__in:focus-visible + .chip__face { outline: 2px solid var(--ink); outline-offset: 2px; }
fieldset[aria-invalid="true"] .chip__face { border-color: var(--peach-ink); }
/* r2 L1: operator chips (designer r1 §5.1). A logo only from an official file; otherwise the name alone. */
.chip--op .chip__face { flex-direction: column; gap: var(--s-1); min-height: 64px; padding: var(--s-2); }
.chip__logo { height: 20px; width: 56px; max-width: 56px; fill: currentColor; flex: none; }
.chip__name { font: 400 var(--t-xs)/1.2 var(--font-ui); color: inherit; }
.chip__face--noLogo .chip__name { font-size: var(--t-sm); }
/* r3 S1: with no official logo file at all, the operator chips are plain 44 px pills; one logo → all six stay 64 px. */
.chips:not(:has(.chip__logo)) .chip__face { min-height: 44px; }

/* Months «Outro»: no script needed. */
.meses__outro { display: none; gap: var(--s-2); }
.meses:has(input[value="outro"]:checked) .meses__outro { display: grid; }

/* ─── §2.4 Field ──────────────────────────────────────────────────────── */
.field {
  display: flex; align-items: center; min-height: 52px; background: var(--paper);
  border: 1px solid var(--tint-20); border-radius: var(--r-card); padding-inline: var(--s-4);
}
.field input {
  flex: 1; min-width: 0; border: 0; background: transparent; font: 400 var(--t-base)/1.2 var(--font-ui);
  color: var(--ink); padding-block: var(--s-3); outline: none; width: 100%;
}
.field input::placeholder { color: var(--ink-60); }
.field:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.field--suffix::after { content: attr(data-suffix); font-family: var(--font-doc); font-size: var(--t-base); color: var(--ink-60); padding-left: var(--s-2); }
.field[data-invalid] { border: 2px solid var(--peach-ink); }

/* ─── §3 Result card ──────────────────────────────────────────────────── */
.result-card {
  scroll-margin-top: var(--s-4);
  background: var(--ink-deep); color: var(--paper); border-radius: var(--r-bubble-greg);
  padding: var(--s-5); display: grid; gap: var(--s-3);
}
.result-card :focus-visible { outline-color: var(--paper); }
.result-card__h { display: grid; gap: var(--s-1); margin: 0; font: inherit; scroll-margin-top: var(--s-4); }
.result-card__h:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; border-radius: 6px; }
.result-card__eyebrow { font: 400 var(--t-xs)/1.4 var(--font-doc); letter-spacing: .04em; color: var(--on-dark-60); }
.result-card__num { font: 300 var(--t-xl)/1 var(--font-ui); font-variant-numeric: tabular-nums; color: var(--peach); }
.result-card__sub, .result-card__cliff, .result-card__rule, .result-card__end {
  font-size: var(--t-sm); line-height: 1.45; color: var(--on-dark-75); margin: 0; max-width: none;
}
.result-card__end { color: var(--paper); }
.result-card__end .doc-value { font-weight: 400; } /* r2 S1 */
.result-card a { color: inherit; text-underline-offset: 3px; }
.result-card__pair { margin: var(--s-2) 0 0; display: grid; }
.pair-row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: baseline;
  padding: var(--s-2) 0; border-top: 1px solid var(--on-dark-30);
}
.pair-row dt { font-size: var(--t-sm); color: var(--on-dark-75); }
.pair-row dd { margin: 0; font-size: var(--t-sm); color: var(--on-dark-60); display: inline-flex; align-items: center; }
.pair-row[data-applies="true"] dd { color: var(--peach); }
.pair-row__tick { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; margin-left: var(--s-1); }
@media (min-width: 1040px) { .result-card { padding: var(--s-6); } }

/* §3.3 «De onde vem este número» */
.result-card__why { display: grid; }
.why__sum {
  list-style: none; display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px;
  padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); background: var(--on-dark-20); color: var(--paper);
  font: 500 var(--t-sm)/1 var(--font-ui); cursor: pointer; justify-self: start; width: fit-content;
}
.why__sum::-webkit-details-marker, .refine__sum::-webkit-details-marker, .ref-details > summary::-webkit-details-marker { display: none; }
.why__chev, .refine__chev { transition: transform 160ms; flex: none; }
[open] > summary > .why__chev, [open] > summary > .refine__chev { transform: rotate(180deg); }
.why__rows { margin-top: var(--s-3); display: grid; }
.why-row {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); padding: var(--s-3) 0;
  border-top: 1px solid var(--on-dark-30); font-size: var(--t-sm); line-height: 1.4; color: var(--paper);
}
.why-row--plain { grid-template-columns: 1fr; }
.why-row cite { display: block; font: normal var(--t-xs)/1.5 var(--font-doc); color: var(--on-dark-60); margin-top: var(--s-1); }
/* r2 M2: MEO clause 18.5 as a row of «De onde vem este número». */
.why-row--meo .why-row__k { display: block; font: var(--t-xs) var(--font-doc); color: var(--on-dark-60); margin-bottom: var(--s-1); }
.why-row--meo span { font-size: var(--t-sm); color: var(--paper); }
.why-row--meo a { color: var(--on-dark-60); text-underline-offset: 3px; }
.why__note { font-size: var(--t-xs); color: var(--on-dark-60); padding-top: var(--s-2); margin: 0; max-width: none; }

/* ─── §4 cost-steps ───────────────────────────────────────────────────── */
@keyframes grow { from { transform: scaleY(0); } }
.cost-steps { display: grid; gap: var(--s-2); margin-top: var(--s-2); }
.cost-steps__readout { margin: 0; min-height: 1.45em; font-size: var(--t-sm); color: var(--on-dark-75); max-width: none; }
.cost-steps__readout b { font-family: var(--font-doc); font-weight: 400; color: var(--paper); }
.cost-steps__strip {
  display: flex; align-items: flex-end; gap: 2px; height: 72px; touch-action: pan-y; cursor: col-resize;
  border-bottom: 1px solid var(--on-dark-30);
}
.cost-steps__strip:focus-visible { outline: 2px solid var(--paper); outline-offset: 4px; border-radius: 4px; }
.cost-steps__bar {
  flex: 1; min-width: 0; height: max(2px, calc(var(--h) * 100%)); background: var(--on-dark-30);
  border-radius: 3px 3px 0 0; transform-origin: bottom;
}
.cost-steps[data-grow] .cost-steps__bar { animation: grow 320ms cubic-bezier(.2,.8,.3,1) both; animation-delay: calc(var(--k, 0) * 12ms); }
.cost-steps__bar[data-today] { background: var(--peach); }
.cost-steps__bar[data-sel] { background: var(--paper); }
.cost-steps__bar[data-zero] { height: 2px; background: var(--peach); }
.cost-steps__ticks { position: relative; height: 2.8em; min-height: 2.8em; /* r3 S5: two lines reserved, the strip never jumps */ font: var(--t-xs)/1.4 var(--font-doc); color: var(--on-dark-60); white-space: nowrap; }
/* r2 S2: the middle tick sits under its own bar; the first is left-aligned, the last right-aligned. */
.cost-steps__tick { position: absolute; top: 0; left: var(--at); transform: translateX(-50%); }
.cost-steps__tick--first { left: 0; transform: none; }
.cost-steps__tick--last { left: auto; right: 0; transform: none; text-align: right; } /* «0 €» over the end date, so the middle tick never collides */
@media (min-width: 1040px) { .cost-steps__strip { height: 88px; } }

/* ─── §5 Benefit refinement ───────────────────────────────────────────── */
.refine { background: var(--cream); border-radius: var(--r-card); }
.refine__sum {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  min-height: 52px; padding: var(--s-3) var(--s-5); font: 400 var(--t-sm)/1.35 var(--font-ui); color: var(--ink); cursor: pointer;
}
.refine__body { display: grid; gap: var(--s-3); padding: 0 var(--s-5) var(--s-5); }
.refine__label { font-size: var(--t-sm); color: var(--ink); }
.refine__label small { font: var(--t-xs) var(--font-doc); color: var(--ink-60); margin-left: var(--s-2); }
.refine__row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2); align-items: center; }
.refine__row .pill { min-height: 52px; background: var(--paper); border: 1px solid var(--tint-20); } /* r2 S3 */
.refine__row .pill:hover { border-color: var(--ink); }

/* ─── §6 Option rows ──────────────────────────────────────────────────── */
.saidas { display: grid; gap: var(--s-3); }
.option-rows { display: grid; gap: var(--s-2); }
.option-row {
  position: relative; display: grid; grid-template-columns: 1fr 20px; column-gap: var(--s-3); row-gap: var(--s-1);
  align-items: center; width: 100%; min-height: 64px; padding: var(--s-4) var(--s-5); text-align: left;
  background: var(--cream); color: var(--ink); border: 1px solid transparent; border-radius: var(--r-card);
  font: inherit; cursor: pointer; transition: border-color 160ms ease, background 160ms ease;
}
.option-row:hover { border-color: var(--tint-20); }
.option-row__title { grid-column: 1; font: 400 var(--t-base)/1.2 var(--font-ui); }
.option-row__line { grid-column: 1; font-size: var(--t-sm); line-height: 1.45; color: var(--ink-60); }
.option-row__chev { grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--ink-60); transition: transform 160ms ease; }
.option-row[aria-expanded="true"] { background: var(--paper); border-color: var(--ink); }
.option-row[aria-expanded="true"] .option-row__chev { transform: rotate(90deg); }

/* §7.2 radio variant */
.option-row--radio .option-row__line { line-height: 1.5; margin-top: var(--s-1); } /* r2 S10: --s-2 with the row gap */
.option-row--radio .option-row__dot {
  grid-column: 2; grid-row: 1 / span 2; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--ink-60);
}
.option-row--radio:has(input:checked) { background: var(--paper); border-color: var(--ink); }
.option-row--radio:has(input:checked) .option-row__dot { background: radial-gradient(var(--ink) 0 5px, transparent 6px); border-color: var(--ink); }
.option-row--radio:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }

/* ─── §7 Letter panel ─────────────────────────────────────────────────── */
.panel__h { font: 300 var(--t-lg)/1.1 var(--font-ui); margin: 0 0 var(--s-2); }
.panel__intro { font-size: var(--t-sm); line-height: 1.45; color: var(--ink-60); margin: 0 0 var(--s-5); max-width: none; }
.carta-panel__grid { display: grid; gap: var(--s-5); }
.carta-panel__side { display: contents; }
.carta-pick { order: 1; display: grid; gap: var(--s-3); }
.carta-notes { order: 2; display: grid; gap: var(--s-4); }
.carta-notes:not(:has(> :not([hidden]))) { display: none; }
.carta-panel__doc { display: contents; }
/* r2 M1 (< 1040): picker → notes → sheet → fields → when-line → actions bar → status → «Agora envie-a…». */
.doc-sheet { order: 3; }
.carta-fields { order: 4; display: grid; gap: var(--s-4); }
.carta-when { order: 5; }
.actions-bar { order: 6; }
#carta-estado { order: 7; }
#carta-after { order: 8; }
.ground-list { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--s-2); }
.ground-list__main, .ground-list__more { display: grid; gap: var(--s-2); }
.ground-sum {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-1) var(--s-3); align-items: center;
  padding: var(--s-4) var(--s-5); background: var(--cream); border-radius: var(--r-card);
}
.ground-sum__k { grid-column: 1; font: var(--t-xs) var(--font-doc); color: var(--ink-60); }
.ground-sum__v { grid-column: 1; font-size: var(--t-base); line-height: 1.25; }
.ground-sum__change { grid-column: 2; grid-row: 1 / span 2; }
.carta__lei { font-size: var(--t-sm); color: var(--ink-60); line-height: 1.5; }
.carta__lei summary {
  min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: var(--t-sm); color: var(--ink);
  text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 3px; list-style: none;
}
.carta__lei summary::-webkit-details-marker { display: none; }
.carta__lei a { color: var(--ink-60); text-underline-offset: 3px; }
.ground-more {
  font: inherit; font-size: var(--t-sm); color: var(--ink-60); text-decoration: underline; text-underline-offset: 3px;
  min-height: 44px; background: none; border: 0; padding: 0; cursor: pointer; justify-self: start;
}
#carta-condicao { font-size: var(--t-sm); line-height: 1.5; color: var(--ink-60); margin: 0; max-width: none; }
#carta-condicao a { color: inherit; text-underline-offset: 3px; }
.notes__h { font: var(--t-xs)/1.4 var(--font-doc); color: var(--ink-60); margin: 0 0 var(--s-2); max-width: none; }
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); }
.checklist li { display: grid; grid-template-columns: 18px 1fr; gap: var(--s-3); font-size: var(--t-sm); line-height: 1.45; color: var(--ink); }
.checklist li::before { content: ''; width: 6px; height: 6px; margin-top: .55em; background: var(--ink-60); } /* r2 S4: a bullet, not a checkbox */
.checklist--dash li::before { content: '–'; width: auto; height: auto; margin: 0; border: 0; color: var(--ink-60); }
.lfield { display: grid; gap: var(--s-2); }
.lfield label { font-size: var(--t-sm); color: var(--ink); display: flex; justify-content: space-between; gap: var(--s-2); }
.lfield label small { font: var(--t-xs) var(--font-doc); color: var(--ink-60); }
.lfield input { scroll-margin-bottom: 96px; }
.lfield-row { display: grid; gap: var(--s-4); }
@media (min-width: 400px) { .lfield-row { grid-template-columns: 1fr 1fr; gap: var(--s-3); } }
.carta-when {
  font-size: var(--t-sm); line-height: 1.5; color: var(--ink); padding: var(--s-4) var(--s-5);
  background: var(--cream); border-radius: var(--r-card); margin: 0; max-width: none;
}

/* ─── §8 doc-sheet ────────────────────────────────────────────────────── */
.doc-sheet { position: relative; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--r-card); box-shadow: var(--shadow-card); }
.doc-sheet__page { padding: var(--s-5); font: 400 var(--t-sm)/1.6 var(--font-ui); color: var(--ink); overflow-wrap: anywhere; }
.doc-sheet__page p { margin: 0 0 var(--s-3); max-width: none; }
.doc-sheet__page p:last-child { margin-bottom: 0; }
.doc-sheet__to, .doc-sheet__date { text-align: right; }
.doc-sheet__date { font-size: var(--t-xs); color: var(--ink-60); }
.doc-sheet__subj { font-weight: 500; }
.doc-sheet__empty { color: var(--ink-60); }
.doc-sheet[data-collapsed="true"] .doc-sheet__page { max-height: 30rem; overflow: hidden; mask-image: linear-gradient(to bottom, black 75%, transparent); -webkit-mask-image: linear-gradient(to bottom, black 75%, transparent); }
/* r2 M10: a taller collapsed preview, and the pill below it, never over the text. */
.doc-sheet__more { position: static; transform: none; display: flex; margin: var(--s-2) auto var(--s-4); }
.slot {
  /* Visual §8.2 asked --peach-ink text; on --peach-pale that is 3.57:1, under §11's 4.5:1. The dashed peach border keeps the look. */
  position: relative; display: inline; padding: 1px var(--s-1); font: inherit; color: var(--ink);
  background: var(--peach-pale); border: 1px dashed var(--peach-ink); border-radius: 6px; cursor: pointer;
}
button.slot::after { content: ''; position: absolute; inset: -12px -4px; }

/* §8.3 actions bar */
.actions-bar {
  position: sticky; bottom: 0; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: var(--s-2);
  margin-inline: calc(-1 * var(--s-4)); padding: var(--s-3) var(--s-4) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: var(--paper); border-top: 1px solid var(--hairline);
}
.actions-bar__note { grid-column: 1 / -1; margin: 0; font-size: var(--t-xs); color: var(--ink-60); max-width: none; }
.actions-bar .pill { min-height: 48px; white-space: nowrap; padding-inline: var(--s-4); }
.doc-sheet__more { white-space: nowrap; }
.actions-status { font-size: var(--t-sm); color: var(--ink); margin: var(--s-2) 0 0; max-width: none; }
.actions-status:empty { display: none; }
.actions-status[data-tone="erro"] { color: var(--peach-ink); }

@media (min-width: 1040px) {
  .carta-panel { margin-inline: calc((var(--chat-w) - 920px) / 2); }
  .carta-panel__grid { grid-template-columns: 0.8fr 1.2fr; gap: var(--s-8); align-items: start; }
  .carta-panel__side { display: grid; gap: var(--s-5); }
  .carta-panel__doc { display: block; position: sticky; top: var(--s-6); }
  /* r3 S3: before a ground is checked there is no sheet: the picker takes the whole width, capped at the column. */
  .carta-panel__grid:not(:has([name=ground]:checked)) .carta-panel__side { grid-column: 1 / -1; max-width: var(--chat-w); }
  .doc-sheet__page { padding: var(--s-6); }
  .doc-sheet[data-collapsed] .doc-sheet__page { max-height: calc(100vh - var(--s-10) - 9rem); overflow: auto; mask-image: none; -webkit-mask-image: none; }
  .doc-sheet__more { display: none !important; }
  .actions-bar { position: static; margin: var(--s-4) 0 0; padding: 0; border: 0; background: none; grid-template-columns: auto auto; justify-content: start; }
  .actions-bar__note { grid-column: 1 / -1; }
}

/* ─── §9 Reminder panel ───────────────────────────────────────────────── */
.lembrete-panel {
  grid-template-columns: minmax(0, 1fr);
  background: linear-gradient(160deg, var(--peach-pale), var(--blush)); border-radius: var(--r-card);
  padding: var(--s-5); display: grid; gap: var(--s-4);
}
.lembrete-panel .panel__h, .lembrete-panel .panel__intro { margin: 0; }
.notif-preview { margin: 0; }
.notif-preview .ui-notif { width: 100%; display: grid; grid-template-columns: 38px 1fr auto; column-gap: var(--s-3); align-items: start; }
.notif-preview .ui-notif__icon { grid-column: 1; grid-row: 1; }
/* The sender line is one word: the date sits at its right, and the body gets the full width under both. */
.notif-preview .ui-notif__text { grid-column: 2 / 4; grid-row: 1; min-width: 0; line-height: 1.4; }
.notif-preview .ui-notif__time { grid-column: 3; grid-row: 1; margin: 0; line-height: 1.6; }
.notif-preview .ui-notif__icon { background: var(--peach); padding: 0; overflow: hidden; }
.notif-preview .ui-notif__img { display: block; }
.notif-preview .ui-notif__time { color: var(--ink-60); white-space: nowrap; }
/* r3 M1: one column at every width; DOM order = visual order = tab order. */
#lembrete .calert__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin: 0; }
.rem-form__email { width: 100%; }
.rem-form__label { font-size: var(--t-sm); color: var(--ink); }
.rem-form__go { min-height: 52px; width: 100%; }
#lembrete .calert__form .field input[type=email] { font-size: var(--t-base); border-radius: 0; padding-inline: 0; }
.rem-form__consent {
  display: grid !important; grid-template-columns: 22px 1fr; gap: var(--s-3); align-items: start; min-height: 44px;
  font-size: var(--t-sm) !important; line-height: 1.45; color: var(--ink-60); cursor: pointer;
}
.rem-form__consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); }
.rem-form__priv { font-size: var(--t-sm); color: var(--ink-60); text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; justify-self: start; }
#lembrete .calert__status { font-size: var(--t-sm); }
@media (min-width: 640px) {
  .rem-form__go { justify-self: start; width: auto; min-width: 12rem; min-height: 52px; }
}
@media (min-width: 1040px) { .lembrete-panel { padding: var(--s-6); } }

/* ─── §10 Reference zone ──────────────────────────────────────────────── */
.ref { max-width: 720px; margin: var(--section-y) auto 0; display: grid; gap: var(--s-8); }
.ref__h { font: 700 clamp(28px, 2.6vw, 38px)/1.1 var(--disp); letter-spacing: -.015em; color: var(--ink-deep); margin: 0 0 var(--s-5); }
.d1 .faq__list { gap: var(--s-3); }
.d1 .faq__q { display: flex; width: 100%; justify-content: space-between; min-height: 56px; }
/* Visual §10 asked --ink-60; on the --tint-10 answer bubble that is 4.37:1, under §11's 4.5:1. */
.d1 .faq__a a { color: var(--ink); text-underline-offset: 3px; }
@media (max-width: 639px) { .d1 .faq__q { border-radius: var(--r-card); } }
.plus { width: 30px; height: 30px; border-radius: 50%; background: var(--cream); flex: none; position: relative; }
.ref-details > summary .plus::before, .ref-details > summary .plus::after {
  content: ''; position: absolute; inset: 50% 9px auto; height: 1.5px; background: var(--ink);
  transform: translateY(-50%); transition: transform 240ms cubic-bezier(.2,.8,.3,1);
}
.ref-details > summary .plus::after { transform: translateY(-50%) rotate(90deg); }
.ref-details[open] > summary .plus::before { transform: translateY(-50%) rotate(45deg); }
.ref-details[open] > summary .plus::after { transform: translateY(-50%) rotate(-45deg); }
.ref-details { border-top: 1px solid var(--hairline); }
.ref-details > summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); min-height: 56px;
  padding: var(--s-4) 0; font: 300 var(--t-md)/1.2 var(--font-ui); cursor: pointer;
}
.ref-details[open] > summary { margin-bottom: var(--s-4); }
.ref-details > .csec__note { margin-bottom: var(--s-4); }

/* The law and MEO's terms, quoted. */
.leis { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
.achado.lei > span, .achado.termo > span { color: var(--ink); }
.achado.lei blockquote, .achado.termo blockquote {
  margin: 0; padding: 0 0 0 var(--s-4); border-left: 1px solid var(--tint-20);
  font-size: var(--t-xs); line-height: 1.6; color: var(--ink-60); overflow-wrap: anywhere;
}
.lei__ref, .termo__ref, .termo__lido { font-family: var(--font-doc); font-size: var(--t-xs); color: var(--ink-60); }
.lei__ref, .termo__ref { text-decoration: underline; text-underline-offset: 3px; }
.lei__alineas { margin: var(--s-2) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-1); }
.lei__tab { width: 100%; border-collapse: collapse; margin-top: var(--s-2); }
.lei__tab th, .lei__tab td { text-align: left; vertical-align: top; padding: var(--s-2) var(--s-2) var(--s-2) 0; border-top: 1px solid var(--hairline); }
.lei__tab th { font-weight: 500; white-space: nowrap; color: var(--ink); }
/* .achado b is the big peach number elsewhere; here it is only an alínea's letter. */
.achado.lei b, .carta__lei b { font-size: inherit; font-weight: 500; line-height: inherit; color: var(--ink); }


/* Group E: tap targets ≥ 40 px on a phone for the law's article links. */
@media (max-width: 640px) { .lei__ref, .termo__ref { display: inline-flex; align-items: center; min-height: 40px; } }
/* Group E: one left edge — the crumbs, the conversation column, the reference zone and the source line all start on
   the same 720 px column (the reference zone's width), the conversation keeps its 520 px. */
.gd1 .convo { margin-inline: 0; }
/* QA 2026-10-29 · E13: the G3 layout — the form is the hero's tool card, the answer its own band, the FAQ G3 accordions */
.gd1 .g2hi { align-items: start; }
.gd1__tool { padding: 24px; }
.gd1__tool .convo { max-width: none; }
.gd1__tool .exit-ask { margin: 0; background: transparent; padding: 0; box-shadow: none; }

.gd1__res .convo { max-width: 720px; }
.gd1__res:not(:has(.msg:not([hidden]), section:not([hidden]))) { display: none; }
.gd1 .f1q .leis { margin-top: 12px; } .gd1 .f1q__b { padding-top: 4px; }
.gd1.g3b { padding: 0; }
.gd1__res:has(#exit-res:empty) { display: none; }
.gd1__res { padding-top: clamp(40px, 5vw, 64px); }
.gd1 .fq6 { max-width: 1180px; } .gd1 .fq6 > * { max-width: 820px; width: 100%; }