/* Legal pages (Termos de uso, Política de privacidade, Exclusão de dados), on top of /site/site.css.
   Desktop from 960 px: a side index that stays in view (the three documents, then this page's
   sections) next to a text column of up to 720 px. Below 960 px: one column, with the index as a
   disclosure under the title. Every color comes from the kit's tokens, so the dark theme just works. */

.lg{padding-top:144px}
.lg-in{display:grid;grid-template-columns:248px minmax(0,720px);grid-template-rows:auto 1fr;column-gap:min(112px,8vw)}
.lg-head{grid-column:2;grid-row:1}
.lg-ax{grid-column:1;grid-row:1 / span 2;align-self:start;position:sticky;top:104px;max-height:calc(100vh - 128px);overflow-y:auto;padding:4px 0 24px;scrollbar-width:thin}
.lg-tx{grid-column:2;grid-row:2;min-width:0}

/* page head */
.lg-head h1{font:500 56px/1.05 var(--display);letter-spacing:-.02em;text-wrap:balance}
.lg-head .lead{margin-top:20px;max-width:680px}
.lg-meta{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px;line-height:22px;color:var(--faint)}
.lg-meta i{width:3px;height:3px;border-radius:9px;background:currentColor}
.lg-meta a{color:var(--signal);text-decoration:none}
.lg-meta a:hover{text-decoration:underline;text-underline-offset:3px}
/* What is still to be decided before publishing (the date the version takes effect). */
.lg-tbd{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font:500 12px/1 var(--sans);color:var(--warning);background:var(--warning-soft);white-space:nowrap}

/* side index */
.lg-lbl{font:500 13px/20px var(--sans);color:var(--faint);margin-bottom:10px}
.lg-ax ul,.lg-ax ol{list-style:none;padding:0;border-left:1px solid var(--border)}
.lg-docs ul{margin-bottom:36px}
.lg-ax li a{display:block;margin-left:-1px;padding:6px 0 6px 16px;border-left:2px solid transparent;font-size:14px;line-height:20px;color:var(--muted-fg);text-decoration:none;transition:color .2s var(--ease),border-color .2s var(--ease)}
.lg-docs li a{font-size:15px}
.lg-ax li a:hover{color:var(--fg)}
.lg-ax li a[aria-current]{border-left-color:var(--primary);color:var(--fg);font-weight:500}
.lg-idx summary{display:none}

/* text */
/* The kit's html scroll-padding-top already clears the bar (72 px, 60 on the phone); headings add a gap. */
.lg-tx h2{margin-top:56px;font:500 28px/1.2 var(--display);letter-spacing:-.012em;scroll-margin-top:32px;text-wrap:balance}
.lg-tx h2 b{font-weight:500;color:var(--faint);margin-right:8px}
.lg-tx h2:focus{outline:0}
.lg-tx h2:focus-visible{outline:2px solid color-mix(in srgb,var(--signal) 45%,transparent);outline-offset:6px;border-radius:6px}
.lg-tx h3{margin-top:28px;font:600 17px/1.4 var(--sans)}
.lg-tx p,.lg-tx ul,.lg-tx ol{margin-top:14px}
.lg-tx h2+p,.lg-tx h2+ul,.lg-tx h2+ol{margin-top:16px}
.lg-tx h3+p{margin-top:8px}
.lg-tx p,.lg-tx li,.lg-tx dd{text-wrap:pretty}
.lg-tx b,.lg-tx strong{font-weight:600}
.lg-tx a:not([class]){color:var(--signal);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--signal) 40%,transparent);text-underline-offset:3px;transition:text-decoration-color .2s var(--ease)}
.lg-tx a:not([class]):hover{text-decoration-color:currentColor}
.nw{white-space:nowrap}
.lg-ul{list-style:none;padding:0;display:grid;gap:10px}
.lg-ul>li{position:relative;padding-left:22px}
.lg-ul>li::before{content:"";position:absolute;left:5px;top:calc(.775em - 2.5px);width:5px;height:5px;border-radius:9px;background:var(--faint)}

/* "Em resumo" */
.lg-tx .lg-sum{margin-top:40px;background:var(--card);border-radius:18px;box-shadow:var(--raised);padding:24px 28px}
.lg-tx .lg-sum h2{margin:0;font:600 16px/1.3 var(--sans);letter-spacing:0}
.lg-sum ul{list-style:none;padding:0;margin-top:16px;display:grid;gap:12px}
.lg-sum li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;font-size:16px;line-height:1.5}
.lg-ck{width:22px;height:22px;border-radius:99px;background:var(--signal-soft);color:var(--signal);display:grid;place-items:center;margin-top:1px}
.lg-ck svg{width:12px;height:12px}
.lg-tx .lg-sum>p{margin-top:18px;padding-top:14px;border-top:1px solid var(--border);font-size:13px;color:var(--faint)}

/* tables, written as description lists: the left column names the row */
.lg-tb{margin-top:20px;background:var(--card);border-radius:18px;box-shadow:var(--raised);overflow:hidden}
.lg-tx .lg-tb+p{margin-top:20px}
.lg-tb dl{margin:0}
.lg-th,.lg-tr{display:grid;grid-template-columns:168px minmax(0,1fr);gap:24px;padding:14px 24px;font-size:15px;line-height:1.5}
.lg-th{padding-top:12px;padding-bottom:12px;font:500 13px/20px var(--sans);color:var(--faint)}
.lg-tr{border-top:1px solid var(--border)}
.lg-tr dt{font-weight:600}
.lg-tr dd{margin:0}
.lg-tr small{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:var(--faint)}
/* the legal bases: the purpose leads, the base sits in a narrower column on the right */
.lg-tb.bases .lg-th,.lg-tb.bases .lg-tr{grid-template-columns:minmax(0,1fr) 232px}
.lg-tb.bases dt{font-weight:400}
.lg-tb.bases dd{color:var(--muted-fg)}
/* the version history: version, then date and what changed */
.lg-tb.hist .lg-th{grid-template-columns:132px 184px minmax(0,1fr)}
.lg-tb.hist .lg-tr{grid-template-columns:132px minmax(0,1fr)}
.lg-tb.hist dd{display:grid;grid-template-columns:184px minmax(0,1fr);gap:24px}
.lg-chip{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:6px;font:500 12px/1 var(--sans);background:var(--muted);color:var(--fg);margin-left:8px;vertical-align:1px}

/* numbered steps */
.lg-st{list-style:none;padding:0;display:grid;gap:12px;counter-reset:passo}
.lg-st>li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:start}
.lg-st>li::before{counter-increment:passo;content:counter(passo);width:28px;height:28px;border-radius:99px;background:var(--card);box-shadow:var(--raised);display:grid;place-items:center;font:600 13px/1 var(--sans);margin-top:-1px}

/* Exclusão de dados: "O que você quer fazer?" */
.lg-tx .lg-esc{margin-top:40px;background:var(--card);border-radius:18px;box-shadow:var(--raised);padding:8px 0}
.lg-tx .lg-esc h2{margin:0;padding:16px 28px 4px;font:600 16px/1.3 var(--sans);letter-spacing:0}
.lg-tx .lg-esc ul{list-style:none;padding:0;margin:0}
.lg-op{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:16px;align-items:start;padding:16px 28px;border-top:1px solid var(--border)}
.lg-op:first-child{border-top:0}
.lg-op b{display:block;font:600 16px/1.4 var(--sans)}
.lg-tx .lg-op p{margin:2px 0 0;font-size:15px;line-height:1.5;color:var(--muted-fg)}
.lg-op>a{align-self:center;display:inline-flex;align-items:center;gap:4px;font:500 14px/1 var(--sans);color:var(--signal);text-decoration:none;white-space:nowrap;padding:8px 0}
.lg-op>a svg{width:14px;height:14px}

/* the deletion e-mail template */
.lg-mail{margin-top:20px;background:var(--card);border-radius:18px;box-shadow:var(--raised);overflow:hidden}
.lg-tx .lg-mail-h{margin:0;padding:14px 24px;border-bottom:1px solid var(--border);font:500 13px/20px var(--sans);color:var(--faint)}
.lg-mail dl{margin:0}
.lg-mail dl div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;padding:10px 24px;border-bottom:1px solid var(--border);font-size:15px;line-height:1.5}
.lg-mail dt{color:var(--faint)}
.lg-mail dd{margin:0;overflow-wrap:anywhere}
.lg-tx .lg-mail-b{margin:0;padding:16px 24px 4px;font-size:15px;line-height:1.7}
.lg-mail-b i{font-style:normal;color:var(--faint)}
.lg-mail-a{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:16px 24px 20px}
.lg-mail-a .btn svg{width:16px;height:16px}
.lg-mail-a .btn .i{width:14px;height:14px}
.lg-mail-a output{font-size:13px;color:var(--success);margin-left:4px}

/* Exclusão de dados: what we delete, side by side */
.lg-two{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lg-cd{background:var(--card);border-radius:18px;box-shadow:var(--raised);padding:20px 24px}
.lg-tx .lg-cd h3{margin:0;font:600 16px/1.35 var(--sans)}
.lg-tx .lg-cd ul{margin-top:12px;gap:8px}
.lg-cd li{font-size:15px;line-height:1.5}

/* the end of the text: the company, then the other two documents */
.lg-tx .lg-id{margin-top:40px;padding-top:20px;border-top:1px solid var(--border);font-size:13px;line-height:1.6;color:var(--faint)}
.lg-out{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lg-oc{display:block;background:var(--card);border-radius:18px;box-shadow:var(--raised);padding:20px 24px;text-decoration:none;color:var(--fg);transition:box-shadow .2s var(--ease)}
.lg-oc:hover{box-shadow:var(--floating)}
.lg-oc b{display:flex;align-items:center;justify-content:space-between;gap:12px;font:500 20px/1.25 var(--display);letter-spacing:-.01em}
.lg-oc svg{width:18px;height:18px;flex:none;color:var(--faint);transition:color .2s var(--ease),transform .2s var(--ease)}
.lg-oc:hover svg{color:var(--fg)}
.lg-oc p{margin-top:6px;font-size:15px;line-height:1.5;color:var(--muted-fg)}
@media (prefers-reduced-motion:no-preference){.lg-oc:hover svg{transform:translateX(2px)}}

/* The page ends on the text: no closing call, so a hairline opens the footer. */
.lg-pg .rd{margin-top:112px;border-top:1px solid var(--border)}

/* phones and narrow windows: one column, the index under the title */
@media (max-width:959px){
  .lg{padding-top:92px}
  .lg-in{display:block}
  .lg-head h1{font-size:36px}
  .lg-head .lead{margin-top:14px}
  .lg-meta{margin-top:16px}
  /* As drawn for the phone: the history link stays in the index, not in this line. */
  .lg-meta i:nth-of-type(2),.lg-meta a{display:none}
  .lg-ax{position:static;max-height:none;overflow:visible;padding:0;margin-top:24px}
  .lg-docs,.lg-idx .lg-lbl{display:none}
  .lg-idx{background:var(--card);border-radius:14px;box-shadow:var(--raised)}
  .lg-idx summary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;padding:0 16px;font:600 15px/1.2 var(--sans);cursor:pointer;list-style:none;border-radius:14px}
  .lg-idx summary::-webkit-details-marker{display:none}
  .lg-idx summary small{font:400 13px/1 var(--sans);color:var(--faint);margin-left:8px}
  .lg-idx summary svg{width:18px;height:18px;flex:none;color:var(--faint);transition:transform .25s var(--ease),color .25s var(--ease)}
  .lg-idx[open] summary svg{transform:rotate(180deg);color:var(--signal)}
  .lg-ax .lg-idx ol{border-left:0;border-top:1px solid var(--border);padding:4px 16px 10px}
  .lg-ax .lg-idx li a{margin:0;padding:9px 0;border-left:0;font-size:15px}
  .lg-tx .lg-sum{margin-top:16px;padding:20px}
  .lg-sum ul{margin-top:14px}
  .lg-sum li{font-size:15px}
  .lg-tx .lg-sum>p{margin-top:16px;padding-top:12px}
  .lg-tx h2{margin-top:44px;font-size:24px;letter-spacing:-.01em;scroll-margin-top:16px}
  .lg-tx h2 b{margin-right:6px}
  .lg-tx p,.lg-tx ul,.lg-tx ol{margin-top:12px}
  .lg-tx h2+p,.lg-tx h2+ul,.lg-tx h2+ol{margin-top:14px}
  .lg-ul>li{padding-left:20px}
  .lg-ul>li::before{top:calc(.775em - 2.5px)}
  .lg-tb{margin-top:16px}
  .lg-th{display:none}
  .lg-tr,.lg-tb.bases .lg-tr,.lg-tb.hist .lg-tr{display:block;padding:14px 16px}
  .lg-tr dt{margin-bottom:2px}
  .lg-tb.bases dt{font-weight:500}
  .lg-tb.hist dd{display:block}
  .lg-tb.hist dd span{display:block}
  .lg-tb.hist dd span:first-child{font-size:13px;color:var(--faint);margin-bottom:4px}
  .lg-tx .lg-esc{margin-top:16px;padding:6px 0}
  .lg-tx .lg-esc h2{padding:14px 16px 2px;font-size:16px}
  .lg-op{grid-template-columns:36px minmax(0,1fr);gap:14px;padding:14px 16px}
  .lg-op b{font-size:15px}
  .lg-op>a{grid-column:2;justify-self:start;margin-top:-10px;padding:6px 0}
  .lg-mail{margin-top:16px}
  .lg-tx .lg-mail-h{padding:12px 16px}
  .lg-mail dl div{grid-template-columns:64px minmax(0,1fr);gap:12px;padding:10px 16px}
  .lg-tx .lg-mail-b{padding:14px 16px 2px}
  .lg-mail-a{display:grid;padding:14px 16px 16px}
  .lg-mail-a output{margin:2px 0 0;text-align:center}
  .lg-two,.lg-out{grid-template-columns:1fr;gap:12px}
  .lg-cd{padding:18px 16px}
  .lg-tx .lg-id{margin-top:28px;padding-top:16px}
  .lg-out{margin-top:40px}
  .lg-oc{padding:18px 20px}
  .lg-pg .rd{margin-top:72px}
}