/* =========================================================
DNUV Design System — Legal / DSAR pages (R389 · C0 Foundation)
---------------------------------------------------------
Public, ANPD-crawlable legal surfaces (Termos, Privacidade,
ApiDocs, Status footer) and the LGPD DSAR centre (Dsar.js) all
reference a `legal-*` / `dsar-*` class family that had NO CSS
definition anywhere in the repo — so every one of those screens
rendered with user-agent defaults (no max-width, collapsed grids,
unreadable line length). This stylesheet defines the whole family
on design-system tokens (never hardcoded hex) so the pages read
well in both light and dark mode.
Loaded in BOTH index.html shells AFTER pages.css (see the
in ).
Token contract: --fg-1/2/3, --space-*, --border-1, --radius-*,
--lh-relaxed, max readable measure 72ch.
========================================================= */
/* ---------- Page wrapper ----------
Centres the legal column and caps the measure at a readable 72ch.
`.legal-page` is layered on `.page-shell`, so it only needs the
max-width + centring + vertical rhythm. */
.legal-page {
max-width: 72ch;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: var(--space-6);
}
/* ApiDocs uses the legal footer inside a wider page — don't force the
narrow measure there; only constrain when `.legal-page` is present. */
.legal-page .card { width: 100%; }
/* ---------- Document body (the long-form rendered markdown) ---------- */
.legal-doc {
padding: var(--space-6);
}
.legal-doc-body {
color: var(--fg-2);
line-height: var(--lh-relaxed);
font-size: var(--fs-base);
max-width: 72ch;
}
.legal-doc-body h1,
.legal-doc-body h2,
.legal-doc-body h3,
.legal-doc-body h4 {
color: var(--fg-1);
line-height: var(--lh-tight);
margin: var(--space-6) 0 var(--space-2);
}
.legal-doc-body h1:first-child,
.legal-doc-body h2:first-child,
.legal-doc-body h3:first-child { margin-top: 0; }
.legal-doc-body p { margin: 0 0 var(--space-3); }
.legal-doc-body ul,
.legal-doc-body ol {
margin: 0 0 var(--space-3);
padding-left: var(--space-5);
}
.legal-doc-body li { margin: var(--space-1) 0; }
.legal-doc-body a {
color: var(--fg-accent);
text-underline-offset: 2px;
}
.legal-doc-body code {
font-family: var(--font-mono);
font-size: var(--fs-xs);
background: var(--bg-sunken);
color: var(--fg-2);
padding: 2px 6px;
border-radius: 4px;
}
/* ---------- Table of contents (Privacidade sumário) ---------- */
.legal-toc {
padding: var(--space-4) var(--space-5);
}
.legal-toc ol,
.legal-toc ul {
margin: var(--space-2) 0 0;
padding-left: var(--space-5);
display: grid;
gap: var(--space-1);
}
.legal-toc li { color: var(--fg-2); }
.legal-toc a {
color: var(--fg-accent);
text-decoration: none;
}
.legal-toc a:hover { text-decoration: underline; }
/* ---------- DPO / data-controller card + key-value grid ----------
Termos uses `.legal-controller`; Privacidade/Dsar use `.legal-dpo`.
Both render a definition list inside `.legal-dpo-grid`. */
.legal-dpo,
.legal-controller {
padding: var(--space-5) var(--space-6);
}
.legal-dpo h2,
.legal-controller h2 {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin: 0 0 var(--space-3);
}
.legal-dpo h2 i,
.legal-controller h2 i { width: 18px; height: 18px; color: var(--fg-3); }
.legal-dpo-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3) var(--space-5);
margin: 0;
}
.legal-dpo-grid > div { min-width: 0; }
.legal-dpo-grid dt {
font-size: var(--fs-xs);
font-weight: var(--fw-600);
color: var(--fg-3);
text-transform: uppercase;
letter-spacing: .04em;
margin: 0 0 2px;
}
.legal-dpo-grid dd {
margin: 0;
font-size: var(--fs-sm);
color: var(--fg-1);
}
.legal-dpo-grid dd a { color: var(--fg-accent); }
@media (max-width: 600px) {
.legal-dpo-grid { grid-template-columns: 1fr; }
}
/* ---------- Footer (ANPD / contact line) ---------- */
.legal-foot {
padding: var(--space-4) var(--space-5);
}
.legal-foot p {
margin: 0;
font-size: var(--fs-sm);
color: var(--fg-3);
line-height: var(--lh-relaxed);
}
.legal-foot a { color: var(--fg-accent); }
/* ---------- Legal data table (markdown-rendered tables) ----------
`_markdown-safe.js` emits `` for any GFM
table inside the legal markdown. */
.legal-table {
width: 100%;
border-collapse: collapse;
margin: var(--space-3) 0;
font-size: var(--fs-sm);
}
.legal-table th,
.legal-table td {
padding: var(--space-2) var(--space-3);
border: 1px solid var(--border-1);
text-align: left;
vertical-align: top;
color: var(--fg-2);
}
.legal-table th {
background: var(--bg-sunken);
color: var(--fg-1);
font-weight: var(--fw-600);
}
/* =========================================================
DSAR centre (Dsar.js) — rights grid + lookup form
Co-located here (single source for the legal/LGPD surface).
========================================================= */
/* Rights grid — six "your rights" cards (LGPD art. 18). */
.dsar-rights-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--space-3);
}
.dsar-right-card {
padding: var(--space-4);
background: var(--bg-sunken);
border: 1px solid var(--border-1);
border-radius: var(--radius-sm);
}
.dsar-right-card h3 {
margin: 0 0 var(--space-1);
font-size: var(--fs-base);
font-weight: var(--fw-700);
color: var(--fg-1);
}
.dsar-right-card p {
margin: 0;
font-size: var(--fs-sm);
color: var(--fg-3);
line-height: var(--lh-relaxed);
}
/* Section headings used across the DSAR card stack — the markup carries
them as `#dsar-*-heading` ids with a leading lucide glyph. */
.dsar-rights-heading,
.dsar-cta-heading,
.dsar-dpo-heading,
.dsar-lookup-heading,
#dsar-rights-heading,
#dsar-cta-heading,
#dsar-dpo-heading,
#dsar-lookup-heading {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
/* Protocol lookup form. The live markup uses ids (#dsar-lookup-form /
-input / -result); class hooks are provided too for parity with the
audit naming. */
.dsar-lookup-form,
#dsar-lookup-form {
display: flex;
flex-direction: column;
gap: var(--space-2);
max-width: 420px;
}
.dsar-lookup-input,
#dsar-lookup-input { width: 100%; }
.dsar-lookup-result,
#dsar-lookup-result {
font-size: var(--fs-sm);
color: var(--fg-2);
}
/* DSAR history rows (rendered in Settings → Privacy). Base layout only;
the Settings cluster owns the inline-style→class migration of the row
internals. */
.dsar-history-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
border: 1px solid var(--border-1);
border-radius: var(--radius-sm);
margin-bottom: var(--space-2);
font-size: var(--fs-sm);
color: var(--fg-2);
}
/* ---------- `.required` field marker ----------
Used by Dsar (and other forms) as `*`.
Defined in the kit shell's inline