/* /acidente/o-que-fazer/ on the new design: only what the accident guide adds to /design/novo.css. Ported from the
   approved mock (briefs acidente.css + acidente2.css, 2026-10-28) with the chosen variants baked in — SP2 picker,
   HW1 hero, PZ3 agenda, DW1 download cards — and without the toggles, the schematic form, the demo and the goal labels.
   Rendered by src/acidente/pagina.ts. */

/* mock base (home-carro/heroi.css): the download buttons' height */
.acid .cta { display: flex; justify-content: center; align-items: center; gap: 8px; height: 56px; border: 0; border-radius: var(--r-pill); font: 600 16px/1 var(--font-ui); text-decoration: none; }

/* ── 1 · hero (HW1: the tool full width under the title) ── */
.acid .g2hi { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 40px; }
.acid .g2t h1 { max-width: 20ch; }
.tool.sit { grid-template-columns: minmax(0, 1fr); }
/* SP2: photo tiles, one to pick (a radio group) */
.sp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 8px 0 16px; }
.sp button { position: relative; display: grid; justify-items: start; align-content: start; gap: 10px; padding: 0 0 14px; overflow: hidden; border-radius: 18px; background: #fff; border: 1.5px solid var(--tint-20); font: inherit; cursor: pointer; text-align: left; color: var(--ink-deep); }
.sp button img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.sp button b { padding: 0 14px; font-size: 15.5px; line-height: 1.25; }
.sp .ok { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--azul-ink); color: #fff; font-style: normal; font-size: 13px; display: none; place-items: center; box-shadow: 0 0 0 3px #fff; }
.sp button[aria-checked="true"] { border-color: var(--azul-ink); background: var(--azul); }
.sp button[aria-checked="true"] .ok { display: grid; }
.sp button:focus-visible { outline: 3px solid var(--peach-ink); outline-offset: 3px; }
/* the checklist, two columns in row order */
.chk { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; gap: 8px; }
.chk li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border-radius: 16px; background: var(--cream); }
.chk input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--band-barato); }
.chk input:focus-visible { outline: 3px solid var(--peach-ink); outline-offset: 2px; }
.chk label { display: grid; gap: 2px; cursor: pointer; } .chk b { font-size: 15.5px; color: var(--ink-deep); } .chk span { font-size: 14px; color: var(--ink-60); line-height: 1.4; }
.chk input:checked + label b { text-decoration: line-through; color: var(--ink-50); }
.chk.ligar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sit__k { margin-top: 4px !important; }
.ligar small { display: block; margin-top: 4px; font: 500 11.5px/1.3 var(--font-doc); color: var(--ink-50); letter-spacing: .02em; }
.doc { margin-top: 10px; } .doc b { font-size: 19px !important; }
.verd__a { justify-self: start; margin-top: 4px; font: 600 15px/1.2 var(--font-ui); color: var(--ink-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--peach); }
@media (max-width: 960px) { .sp { grid-template-columns: 1fr 1fr; } .chk.ligar { grid-template-columns: 1fr; } }

/* ── 2 · #declaracao: the real form, numbers on top ── */
.b2 .lead2 { max-width: 62ch; }
.fmw { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: start; margin-top: 8px; }
.fmp { position: relative; margin: 0; background: #fff; border: 1px solid var(--tint-20); border-radius: 18px; padding: 10px; }
.fmp img { display: block; width: 100%; height: auto; border-radius: 8px; }
.fmp__s { position: relative; }
.hs { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--azul); color: var(--azul-ink); font: 700 14px/1 var(--disp); cursor: pointer; box-shadow: 0 0 0 2px var(--azul-ink) inset; }
.hs.on, .hs:hover { background: var(--azul-ink); color: #fff; }
.fmp .hs, .fmp__hl { position: absolute; }
.fmp .hs { transform: translate(-50%, -50%); box-shadow: 0 0 0 2px var(--azul-ink) inset, 0 2px 8px rgba(29,79,145,.35); z-index: 2; padding: 0; }
.fmp .hs:focus-visible { outline: 3px solid var(--peach); outline-offset: 2px; }
.fmp__hl { border: 2.5px solid var(--azul-ink); background: rgba(29,79,145,.08); border-radius: 6px; transition: all .25s ease; pointer-events: none; z-index: 1; }
.fmp figcaption { margin: 10px 4px 2px; font-size: 13.5px; color: var(--ink-60); }
.fp2 { position: sticky; top: 96px; background: #fff; border-radius: 24px; padding: 24px; box-shadow: 0 30px 70px rgba(41,18,16,.10); display: grid; gap: 10px; }
.fp2 h3 { margin: 0; font: 700 24px/1.15 var(--disp); color: var(--ink-deep); } .fp2 p { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--ink); }
.fp2 .tip { background: var(--azul); border-radius: 16px 16px 4px 16px; padding: 12px 14px; display: grid; gap: 4px; } .fp2 .tip b { font: 600 12px/1 var(--font-doc); letter-spacing: .05em; text-transform: uppercase; color: var(--azul-ink); } .fp2 .tip span { font-size: 15.5px; line-height: 1.45; color: var(--ink-deep); }
.fp2 small { font: 500 11.5px/1.3 var(--font-doc); color: var(--ink-50); }
.fp2__nav { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; } .fp2__nav button { border: 1px solid var(--tint-20); background: transparent; border-radius: var(--r-pill); padding: 9px 14px; font: 500 14px/1 var(--font-ui); cursor: pointer; color: var(--ink-deep); }
.fp2__nav button:focus-visible { outline: 3px solid var(--peach-ink); outline-offset: 2px; }
/* the 17 circumstances */
.circw { display: grid; gap: 10px; margin-top: 20px; } /* the accordion, the download cards and the page-2 note, close together (as in the mock) */
.circ ol { margin: 0 0 18px; padding-left: 26px; display: grid; gap: 6px; font-size: 15.5px; line-height: 1.4; color: var(--ink); }
.gfaq summary:focus-visible { outline: 3px solid var(--peach-ink); outline-offset: 2px; border-radius: 8px; }
/* DW1: download cards, the form itself and a phone */
.dwc { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.dwc a { display: grid; grid-template-rows: auto 1fr auto; gap: 12px; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--tint-20); text-decoration: none; color: var(--ink-deep); }
.dwc a:hover { border-color: var(--azul-ink); }
.dwc a:focus-visible { outline: 3px solid var(--peach-ink); outline-offset: 3px; }
.dwc .vis { height: 170px; border-radius: 12px; background: var(--cream); display: grid; place-items: start center; overflow: hidden; }
.dwc .vis img { height: auto; width: 62%; margin-top: 22px; box-shadow: 0 8px 24px rgba(41,18,16,.18); transform: rotate(-3deg); }
.dwc .vis svg { height: 128px; width: auto; margin-top: 30px; }
.dwc b { display: block; font-size: 17px; } .dwc small { display: block; margin-top: 4px; font-size: 14.5px; line-height: 1.45; color: var(--ink-60); }
.dwc .cta { justify-self: start; width: max-content; padding: 10px 16px; border-radius: var(--r-pill); font: 600 14.5px/1 var(--font-ui); background: var(--ink-deep); color: #fff; }
.dwc a + a .cta { background: transparent; color: var(--ink-deep); box-shadow: 0 0 0 1.5px var(--ink-deep) inset; }
.fnote { margin: 14px 0 0; font-size: 14.5px; color: var(--ink-60); max-width: 70ch; }
@media (max-width: 960px) {
  .fmw { grid-template-columns: 1fr; }
  .fmp .hs { width: 24px; height: 24px; font-size: 12px; }
  /* on phones the panel stays at the bottom of the screen, compact */
  .fmw .fp2 { position: sticky; top: auto; bottom: 10px; z-index: 5; padding: 14px 16px; gap: 6px; box-shadow: 0 -8px 40px rgba(41,18,16,.18); max-height: 46vh; overflow: auto; overscroll-behavior: contain; }
  .fmw .fp2 h3 { font-size: 19px; } .fmw .fp2 p { font-size: 15px; } .fmw .fp2 .tip { padding: 10px 12px; } .fmw .fp2 .tip span { font-size: 14px; }
  .fmw .fp2 small { display: none; }
  .fmw .fp2__nav button { padding: 8px 12px; }
}
@media (max-width: 700px) { .dwc { grid-template-columns: 1fr; } }

/* ── 3 · #provas: the photos to take ── */
.phs { display: grid; gap: 12px; } .phg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ph { margin: 0; background: #fff; border: 1px solid var(--tint-10); border-radius: 18px; padding: 10px; display: grid; gap: 8px; }
.ph img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; }
.ph figcaption { display: grid; gap: 2px; padding: 0 4px 4px; align-content: start; } .ph b { font-size: 14.5px; color: var(--ink-deep); } .ph span { font-size: 13px; line-height: 1.35; color: var(--ink-60); }
.steps li a { color: var(--azul-ink); }
@media (max-width: 700px) { .phg { grid-template-columns: 1fr 1fr; } }

/* ── 4 · the policy, on the dark band ── */
.evq.dark { background: rgba(255,255,255,.06); border: 1px solid var(--on-dark-20); }
.evq.dark .gb p { background: var(--cream); color: var(--ink-deep); } .evq.dark .door { color: #fff; }
.polq { align-self: start; } .b4 .polq .f1q { background: rgba(255,255,255,.06); border-color: var(--on-dark-20); } .b4 .polq summary { color: #fff; } .b4 .polq details p { color: var(--on-dark-75); }

/* ── 5 · #prazos: PZ3, the dated agenda on the blue line ── */
.b5pz { padding: 0; }
.pz { padding: clamp(64px, 7vw, 104px) 0; background: var(--cream); }
.agenda { list-style: none; margin: 0; padding: 0; display: grid; }
.agenda li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; padding-bottom: 22px; position: relative; }
.agenda li:not(:last-child)::after { content: ""; position: absolute; left: 31px; top: 66px; bottom: 0; width: 2px; background: var(--azul-ink); opacity: .35; }
.cal { width: 64px; height: 64px; border-radius: 16px; background: #fff; border: 2px solid var(--azul-ink); display: grid; place-items: center; align-content: center; gap: 2px; }
.cal b { font: 700 26px/1 var(--disp); color: var(--azul-ink); } .cal small { font: 600 11px/1 var(--font-doc); text-transform: uppercase; letter-spacing: .06em; color: var(--azul-ink); }
.agenda li > div { display: grid; gap: 4px; align-content: start; padding-top: 4px; } .agenda li > div > b { font-size: 17px; color: var(--ink-deep); } .agenda li > div > span:not(.who) { font-size: 15px; color: var(--ink-60); line-height: 1.45; } .agenda small { font: 500 11.5px/1 var(--font-doc); color: var(--ink-50); }
.who { justify-self: start; font: 600 11.5px/1 var(--font-doc); letter-spacing: .04em; text-transform: uppercase; padding: 5px 8px; border-radius: var(--r-pill); } .who.w1 { background: var(--azul); color: var(--azul-ink); } .who.w2 { background: var(--peach-pale); color: var(--peach-ink); }

/* ── related ── */
.rel h2, .relg { max-width: 1100px; }

@media (prefers-reduced-motion: reduce) {
  .fmp__hl { transition: none; }
  .f1q summary span { transition: none; }
}