/* Layout: faixa de topo, cartão de título roxo, índice em colunas que acompanham a largura e o texto em uma coluna de leitura. */
:root {
  --bg: #F4F3FA; --surface: #FFFFFF; --line: #E1DDF4; --soft: #EEEBFA;
  --ink: #382B73; --ink2: #43406F; --ink3: #7C79A3; --brand: #5546C1;
  --hero: linear-gradient(140deg, #5546C1 0%, #7B67E6 100%); --vine: url(/legal-vine-light.png); --vine-op: .12;
  --warn: #FFF4D6; --warn-ink: #6B4E00;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111125; --surface: #1A1A36; --line: #4B4673; --soft: #2B234B;
    --ink: #FFFFFF; --ink2: #ABA0D2; --ink3: #8C84B5; --brand: #938BFA;
    --hero: linear-gradient(140deg, #3B2F9A 0%, #5C4CD0 100%); --vine: url(/legal-vine-dark.png); --vine-op: .06;
    --warn: #3B3115; --warn-ink: #F3DC9A; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111125; --surface: #1A1A36; --line: #4B4673; --soft: #2B234B;
  --ink: #FFFFFF; --ink2: #ABA0D2; --ink3: #8C84B5; --brand: #938BFA;
  --hero: linear-gradient(140deg, #3B2F9A 0%, #5C4CD0 100%); --vine: url(/legal-vine-dark.png); --vine-op: .06;
  --warn: #3B3115; --warn-ink: #F3DC9A; color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink2); font: 15px/1.65 var(--font); -webkit-text-size-adjust: 100%; }
a { color: var(--brand); text-underline-offset: 2px; }
strong { color: var(--ink); font-weight: 700; }
p, li, td, th, h1, h2, h3 { overflow-wrap: anywhere; }
mark { background: var(--warn); color: var(--warn-ink); border-radius: 4px; padding: 0 3px; }

.top { background: var(--surface); border-bottom: .5px solid var(--line); }
.bar { max-width: 1184px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.bar { align-items: center; display: flex; gap: 12px; justify-content: space-between; min-height: 56px; }
.brand { align-items: center; color: var(--ink); display: flex; font-size: 17px; font-weight: 700; gap: 10px; text-decoration: none; }
.mark { align-items: center; background: var(--soft); border-radius: 10px; display: inline-flex; height: 30px; justify-content: center; width: 30px; }
.mark img { height: auto; width: 18px; }
.lang a { font-size: 13px; font-weight: 500; text-decoration: none; }

.shell { max-width: 880px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 24px; padding-block: 20px 48px; }
.hero { background: var(--hero); border-radius: 16px; color: #fff; overflow: hidden; padding: 22px 20px; position: relative; }
.hero::before { background: var(--vine) 100% -140px / 80% auto no-repeat; content: ""; inset: 0; opacity: var(--vine-op); pointer-events: none; position: absolute; }
.hero::after { background: rgba(255,255,255,.08); border-radius: 50%; content: ""; height: 200px; pointer-events: none; position: absolute; right: -50px; top: -64px; width: 200px; }
.hero > * { position: relative; z-index: 1; }
h1 { font-size: clamp(24px, 4vw, 32px); font-weight: 700; letter-spacing: -.3px; line-height: 1.2; margin: 0; text-wrap: balance; }
.meta a { color: #fff; }
.meta { color: rgba(255,255,255,.82); font-size: 13px; line-height: 1.45; margin: 8px 0 0; }

.layout { display: flex; flex-direction: column; gap: 24px; }
main { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.toc-card { background: var(--surface); border: .5px solid var(--line); border-radius: 16px; padding: 16px 12px 10px; }
.toc-card h2 { color: var(--ink); font-size: 15px; line-height: 20px; margin: 0; padding: 0 8px 8px; }
.toc-card ol { column-gap: 16px; columns: 240px; counter-reset: toc; list-style: none; margin: 0; padding: 0; }
.toc-card li { break-inside: avoid; counter-increment: toc; line-height: 19px; }
.toc-card a { align-items: baseline; display: flex; gap: 10px; border-radius: 8px; color: var(--ink2); font-size: 14px; font-weight: 400; line-height: 19px; padding: 6px 8px; text-decoration: none; }
.toc-card a::before { color: var(--ink3); content: counter(toc) "."; flex: none; font-variant-numeric: tabular-nums; min-width: 1.6em; }
.toc-card a:hover, .toc-card a:focus-visible { background: var(--soft); color: var(--brand); outline: none; }

.summary { background: var(--soft); border-radius: 16px; display: flex; flex-direction: column; gap: 12px; padding: 20px; }
.sum-head { align-items: center; display: flex; gap: 12px; justify-content: space-between; }
.summary h2 { color: var(--ink); font-size: 16px; line-height: 22px; margin: 0; }
.ico { color: var(--brand); flex: none; height: 20px; width: 20px; }
.sec { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 16px; }
.sec h2 { color: var(--ink); font-size: 19px; letter-spacing: -.1px; line-height: 26px; margin: 0; }
.card { background: var(--surface); border: .5px solid var(--line); border-radius: 16px; display: flex; flex-direction: column; gap: 12px; padding: 20px; }
h3 { color: var(--ink); font-size: 16px; line-height: 22px; margin: 10px 0 0; }
.card > h3:first-child { margin-top: 0; }
.txt, .draft { line-height: 1.7; margin: 0; }
.draft { background: var(--warn); border-radius: 14px; color: var(--warn-ink); font-size: 14px; padding: 12px 16px; }
ul.dots, ol.nums { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; }
ul.dots { list-style: none; }
ul.dots li { padding-left: 18px; position: relative; }
ul.dots li::before { background: var(--ink2); border-radius: 50%; content: ""; height: 6px; left: 2px; opacity: .7; position: absolute; top: .65em; width: 6px; }
ol.nums { padding-left: 24px; }
li { line-height: 1.7; }

.tw { margin: 0 -4px; overflow-x: auto; padding: 0 4px; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; font-size: 13.5px; line-height: 20px; min-width: 560px; width: 100%; }
th, td { padding: 10px 14px 10px 0; text-align: left; vertical-align: top; }
th { border-bottom: 1px solid var(--line); color: var(--ink3); font-size: 12.5px; font-weight: 600; line-height: 17px; padding-top: 0; vertical-align: bottom; }
td { border-bottom: 1px solid var(--line); }
tbody tr:last-child td { border-bottom: 0; padding-bottom: 0; }
td:first-child { color: var(--ink); font-weight: 600; }

.pages { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.pages a { background: var(--surface); border: .5px solid var(--line); border-radius: 10px; font-size: 13px; font-weight: 500; line-height: 18px; padding: 7px 12px; text-decoration: none; }
footer { color: var(--ink3); font-size: 12.5px; }

@media (min-width: 720px) {
  .bar, .shell { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
  .toc-card { padding: 18px 16px 12px; }
  .hero { padding: 28px 32px; }
  .card, .summary { padding: 24px 28px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }