/* Request page (/pedido, /en/request), W-0084. Layout, section rail and step art. The flow card itself (tiles, fields, review, nav) is in form.css.
   Phone first (360 px): heading, then rail and a small art cell side by side, then the card. From 960 px: side column (heading, vertical rail, art) next to the card. */
body.page-req { background: var(--color-paper); padding-bottom: 0; } /* W-0121: no bottom bar on this page, so no empty band under the footer */
.req-top { background: var(--color-night); color: var(--color-paper); }
.req-top .topbar { padding-block: var(--space-2); }
/* W-0164 (review c36 C2): the request page keeps its distraction-free bar (W-0121 D1: brand, language, close) but with the site header's height,
   ground and container, so the brand sits at the same x and y as on every other page */
.req-top { background: #050c18; }
.req-top .topbar { min-height: var(--nav-h); padding-block: 0; }
.page-req main { background: linear-gradient(165deg, #D3E5F1 0%, #F5EAD8 55%, #FFE0AE 100%); padding-block: var(--space-4) var(--space-12); }
.req-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.req-side, .req-main { min-width: 0; }

/* phone: heading and art cell share the first row, the rail spans the full width below (four labels need the room) */
.req-side { display: grid; grid-template-columns: minmax(0, 1fr) 84px; column-gap: var(--space-3); row-gap: var(--space-3); align-items: center; }
.req-intro { grid-column: 1; grid-row: 1; }
.req-prog { display: contents; }
.rail { grid-column: 1 / -1; grid-row: 2; }
.sart { grid-column: 2; grid-row: 1; align-self: center; }
.req-intro { display: grid; gap: var(--space-1); }
/* W-0121 (D4): exit is a small close button in the header row, next to a compact language toggle */
.req-tools { display: inline-flex; align-items: center; gap: var(--space-2); flex: none; }
.req-x { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: var(--color-sky-on-night); border: 2px solid rgb(159 201 227 / .6); }
.on-night a.req-x { color: var(--color-sky-on-night); }
.req-x svg { width: 18px; height: 18px; }
.req-x:hover { background: rgb(159 201 227 / .15); }
.req-x:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.req-intro h1 { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.125rem); max-width: 18ch; text-wrap: balance; }
.req-intro .form-sub { margin: var(--space-1) 0 0; font-size: 1rem; max-width: 36ch; }

/* rail: four sections. Phone: four segments with a label each. */
.rail { min-width: 0; }
.rail-count { margin: 0 0 var(--space-1); font-size: var(--fs-small); font-weight: 600; color: var(--color-ink-muted); }
.rail-count[hidden] { display: none; }
.rail-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.rail-i { flex: 1 1 0; min-width: 0; }
.rail-b {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; min-height: 44px; padding: 0; margin: 0;
  background: none; border: 0; font: inherit; text-align: left; color: var(--color-ink-muted); cursor: default;
}
.rail-b::before { content: ""; display: block; width: 100%; height: 8px; box-sizing: border-box; border: 2px solid #8497A5; border-radius: var(--radius-pill); background: transparent; transition: background-color 200ms, border-color 200ms; }
.rail-b[aria-disabled="false"] { cursor: pointer; color: var(--color-ink); }
.rail-i.is-done .rail-b::before { background: var(--color-link); border-color: var(--color-link); }
.rail-i.is-cur .rail-b::before { background: var(--color-sun); border-color: var(--color-ink); }
.rail-i.is-cur .rail-b { color: var(--color-ink); }
.rail-n { display: none; }
.rail-l { font-size: .75rem; line-height: 1.2; font-weight: 600; overflow-wrap: anywhere; }
.rail-i.is-cur .rail-l { font-weight: 800; }
.rail-b:focus-visible { outline: var(--focus-ring); outline-offset: 3px; border-radius: 6px; }
.rail.is-done .rail-l { color: var(--color-ink); }

/* W-0108 phone intro: one-line title, slim progress (bars + "Passo N de 8", labels read by screen readers only), no step art, no intro sentence */
@media (max-width: 959px) {
  .req-side { display: block; }
  .sart, .req-intro .form-sub { display: none; }
  .req-intro { gap: 0; }
  .req-top .lang a, .req-top .lang span { min-width: 36px; min-height: 32px; padding: 0 var(--space-2); font-size: .8125rem; }
  .req-top .lang { border-width: 1.5px; }
  .req-x { width: 36px; height: 36px; border-width: 1.5px; }
  .req-top .brand .mark { width: 30px; height: 30px; }
  .req-top .brand-name { font-size: 1.125rem; }
  .req-intro h1 { font-size: 1.375rem; max-width: none; line-height: 1.2; margin-bottom: var(--space-2); }
  .rail-count { margin-bottom: 4px; }
  .rail-b { min-height: 24px; gap: 0; }
  .rail-l { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .rail-i { position: relative; }
  .page-req main { padding-block: var(--space-2) var(--space-8); }
  .req-grid { gap: var(--space-3); }
}
/* success: no rail, no step art, no intro line (any width) */
.req-side.is-ok .req-prog, .req-side.is-ok .form-sub { display: none; }

/* review (W-0108): one compact entry per group, label + answers + Alterar */
.rcard { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); }
.rcard h3 { grid-column: 1; margin: 0; font-size: .875rem; color: var(--color-ink-muted); }
.rcard .rsum { grid-column: 1; grid-row: 2; margin: 0; font-weight: 600; font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* one line per group; the full answers stay in the DOM and in Alterar */
.rcard .link { grid-column: 2; grid-row: 1 / span 2; min-height: 44px; min-width: 44px; padding: 0 var(--space-2); margin-right: calc(var(--space-2) * -1); background: none; border: 0; font: inherit; font-weight: 700; color: var(--color-link); text-decoration: underline; cursor: pointer; }
#sum { gap: var(--space-2); }

/* consents (W-0108): one short line next to the box; full legal text in an expander, one tap away */
.q-consent .tile.consent { padding: var(--space-3); }
.q-consent .tile.consent .tl { font-size: var(--fs-small); line-height: 1.35; }
.q-consent .tile.consent { margin-top: var(--space-2); }
.consent-more { margin: 0 0 0 var(--space-2); }
.consent-more summary { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-2); cursor: pointer; font-size: var(--fs-small); font-weight: 600; color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
.consent-more summary:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: 6px; }
.consent-full { margin: 0 0 var(--space-2); padding: var(--space-3); background: var(--color-paper); border-radius: 10px; font-size: var(--fs-small); }
.consent-full.consent-inline { margin: 0; padding: 0; background: none; border-radius: 0; font-size: inherit; } /* W-0148: B1 full text sits next to its box (no expander) */
.ok-contact a { font-weight: 600; }
#sum + .q { margin-top: var(--space-4); }
.consents { margin-top: var(--space-2); }

/* step art: one illustration per step, swapped by request.js; decorative */
.sa[hidden] { display: none; }
.sa svg { display: block; width: 100%; height: auto; }
html:not(.js) .sart, html:not(.js) .rail { display: none; }

.req-side .bullets { display: none; }

/* resume offer */
.resume { background: var(--color-surface); border: 2px solid var(--color-sun); border-radius: 16px; padding: var(--space-4); margin: 0 0 var(--space-4); }
.resume[hidden] { display: none; }
.resume-t { margin: 0 0 var(--space-1); font-size: 1.125rem; }
.resume p { margin: 0 0 var(--space-3); font-size: var(--fs-small); color: var(--color-ink-muted); }
.resume .resume-act { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.resume .btn { padding-inline: var(--space-4); }
/* local save opt-in (F-30, W-0103): own checkbox, unticked by default, separate from the survey consent F-15; needs JS (no storage without it).
   W-0121 (D2): it sits in the "Continuar mais tarde" sheet; the card shows only a small link under the nav. */
.later-row { margin: 0; padding: 0 0 var(--space-4); text-align: center; }
.later-link { min-height: 40px; padding: 0 var(--space-2); background: none; border: 0; font: inherit; font-size: var(--fs-small); font-weight: 600; color: var(--color-ink-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.later-link:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: 6px; }
html:not(.js) .later-row, #req[hidden] + .sheet { display: none; }
.sheet { padding: 0; border: 0; border-radius: 20px; width: min(100% - 2 * var(--gutter, 16px), 480px); max-width: 480px; background: var(--color-surface); color: var(--color-ink); box-shadow: 0 20px 60px -20px rgb(15 42 61 / .6); }
.sheet::backdrop { background: rgb(15 42 61 / .5); }
.sheet-in { padding: var(--space-6) var(--space-4) var(--space-4); }
.sheet-t { font-size: 1.25rem; margin: 0 0 var(--space-3); }
.save-opt .tile.consent { margin-top: 0; padding: var(--space-3) var(--space-4); }
.save-opt .tl { font-size: var(--fs-small); }
.save-opt-h { margin: var(--space-2) 0 0; }
.sheet-act { margin: var(--space-4) 0 0; display: flex; justify-content: flex-end; }
@media (max-width: 639px) {
  .sheet { margin: auto 0 0; width: 100%; max-width: none; border-radius: 20px 20px 0 0; }
  .sheet-in { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }
  .sheet-act .btn { width: 100%; }
}

/* W-0121 (D5): "(opcional)" tag on the optional block; the one-tap block skip takes its own row under Back/Next */
.opt { font-weight: 500; font-size: .875em; color: var(--color-ink-muted); white-space: nowrap; }
.nav.has-skipblock { flex-wrap: wrap; }
.nav .skipblock { order: 5; flex: 1 0 100%; min-height: 44px; margin-top: var(--space-1); }
.nav .skipblock span { margin-left: .35em; }

/* W-0121 (D1): one-line footer; the privacy notice opens in place under it */
.footer.fm { padding-block: var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom)); }
.fm-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-3); margin: 0; font-size: .8125rem; }
@media (min-width: 640px) { .fm-line { gap: 0 var(--space-6); font-size: var(--fs-small); } }
.fm-brand { font-family: var(--font-heading); font-weight: 800; color: #e6eff6; }
.fm-l { display: inline-flex; align-items: center; min-height: 40px; font-weight: 600; text-underline-offset: 3px; }
.fm-aviso { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid rgb(255 255 255 / .14); color: #a9c0d1; outline: none; }
.fm-aviso[hidden] { display: none; }
.fm-aviso p { margin: 0; }

@media (min-width: 640px) {
  .req-side { grid-template-columns: minmax(0, 1fr) 120px; column-gap: var(--space-6); }
  .rail-l { font-size: .875rem; }
  .req-grid { gap: var(--space-6); }
}

/* desktop: side column with the vertical rail and the larger art, card on the right */
@media (min-width: 960px) {
  .page-req main { padding-block: var(--space-8) var(--space-16); }
  .req-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-16); align-items: start; }
  .req-side { display: block; grid-column: 1 / span 4; position: sticky; top: var(--space-4); }
  .rail { grid-column: auto; grid-row: auto; }
  .sart { grid-column: auto; grid-row: auto; }
  .req-main { grid-column: 5 / -1; }
  .req-intro h1 { font-size: clamp(2rem, 1.3rem + 1.6vw, 2.75rem); }
  .req-intro .form-sub { margin-bottom: var(--space-4); font-size: var(--fs-lead); }
  .req-prog { display: block; margin-top: var(--space-4); }
  .req-prog > .rail, .req-prog > .sart { min-width: 0; }
  .rail-count { margin-bottom: var(--space-3); }
  .rail-list { flex-direction: column; gap: 0; }
  .rail-i { flex: none; position: relative; }
  .rail-i:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 40px; bottom: -8px; width: 2px; background: #8497A5; opacity: .5; }
  .rail-i.is-done:not(:last-child)::after { background: var(--color-link); opacity: 1; }
  .rail-b { flex-direction: row; align-items: center; gap: var(--space-3); min-height: 48px; }
  .rail-b::before { display: none; }
  .rail-n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; box-sizing: border-box; border: 2px solid #8497A5; border-radius: 50%; background: var(--color-surface); font-weight: 800; font-size: .875rem; color: var(--color-ink-muted); transition: background-color 200ms, border-color 200ms; }
  .rail-n .rc { display: none; width: 16px; height: 16px; }
  .rail-i.is-cur .rail-n { background: var(--color-sun); border-color: var(--color-ink); color: var(--color-ink); }
  .rail-i.is-done .rail-n { background: var(--color-link); border-color: var(--color-link); color: #fff; }
  .rail-i.is-done .rail-n .rn { display: none; }
  .rail-i.is-done .rail-n .rc { display: block; }
  .rail-l { font-size: 1.0625rem; }
  .sart { width: min(100%, 280px); margin-top: var(--space-6); padding: var(--space-4); background: rgb(255 255 255 / .6); border-radius: 20px; box-sizing: border-box; }
  .req-side .bullets { display: grid; margin-top: var(--space-6); }
}

/* W-0154 (GT-0013 A, audit-c31 s3 Pedido): no-panels message on step 2, the note behind a one-line expander on step 3,
   the optional survey after the send (thank-you head above, its own progress row, a short "why" line per screen) */
.panel.nopanels { margin-top: var(--space-4); border-color: var(--color-sun); background: var(--color-sun-soft); font-weight: 600; }
.panel.nopanels[hidden], .sv-head[hidden], .sv-thanks[hidden], .ok-more[hidden] { display: none; }
.q-fold { margin-top: var(--space-6); }
.q-fold .fold-s { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--color-link); text-decoration: underline; text-underline-offset: 3px; }
.q-fold .fold-s:focus-visible { outline: var(--focus-ring); outline-offset: 2px; border-radius: 6px; }
.q-fold[open] .fold-s { margin-bottom: var(--space-1); }
.q-text + .q-seg { margin-top: var(--space-6); }
#success { margin-top: 0; margin-bottom: var(--space-4); }
#success p { margin: 0 0 var(--space-2); }
#success p:last-child { margin-bottom: 0; }
#ok-ref { font-size: var(--fs-small); color: var(--color-ink-muted); }
.sv-head { margin: 0 0 var(--space-6); padding-bottom: var(--space-4); border-bottom: 1px solid #e8dcc3; }
.sv-t { margin: 0; font-family: var(--font-heading); font-weight: 800; font-size: 1.25rem; line-height: 1.25; text-wrap: balance; }
.sv-sub { margin: var(--space-1) 0 var(--space-3); font-size: var(--fs-small); color: var(--color-ink-muted); }
.sv-label { margin: 0 0 6px; font-size: var(--fs-small); font-weight: 600; color: var(--color-ink-muted); }
.sv-bars { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.sv-bars li { flex: 1 1 0; height: 8px; box-sizing: border-box; border: 2px solid #8497A5; border-radius: var(--radius-pill); transition: background-color 200ms, border-color 200ms; }
.sv-bars li.is-done { background: var(--color-link); border-color: var(--color-link); }
.sv-bars li.is-cur { background: var(--color-sun); border-color: var(--color-ink); }
.hint.why { font-weight: 600; color: var(--color-ink); }
.sv-step .consents { margin-top: var(--space-6); }
.sv-thanks { margin-top: 0; font-weight: 700; border-color: var(--color-ok); background: var(--color-surface); outline: none; }
.ok-more { margin-top: var(--space-4); }
.ok-more h3 { margin-top: 0; }
.f15-nudge { margin-top: var(--space-3); color: var(--color-warn); font-weight: 600; }
.f15-nudge[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rail-b::before, .rail-n, .sv-bars li { transition: none; }
}