/* ═══════════════════════════════════════════════════════════════════════
   my-data.css — the data-rights page

   Deliberately plainer than the marketing pages. Someone arrives here
   worried, or annoyed, and wants to find one control and be sure it did
   what it said. Motion and ornament would read as evasion, so there is
   almost none: no scroll reveals, no gradients behind text, nothing that
   delays a control appearing.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --md-bg:#F7FAF8;
  --md-surface:#FFFFFF;
  --md-ink:#13211B;
  --md-ink-soft:#5A6B63;
  --md-line:rgba(8,92,58,.14);
  --md-green:#0E7C4A;
  --md-green-bright:#18C979;
  --md-red:#B3261E;
  --md-red-soft:rgba(179,38,30,.07);
  --md-amber:#8A5A00;
  --md-shadow:0 1px 2px rgba(8,40,28,.05), 0 8px 24px rgba(8,40,28,.05);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --md-bg:#0C1411;
    --md-surface:#131E19;
    --md-ink:#E8F0EB;
    --md-ink-soft:#9FB2A8;
    --md-line:rgba(24,201,121,.18);
    --md-green:#5FD9A0;
    --md-green-bright:#18C979;
    --md-red:#F0776B;
    --md-red-soft:rgba(240,119,107,.09);
    --md-amber:#E3B341;
    --md-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
  }
}
:root[data-theme="dark"]{
  --md-bg:#0C1411;
  --md-surface:#131E19;
  --md-ink:#E8F0EB;
  --md-ink-soft:#9FB2A8;
  --md-line:rgba(24,201,121,.18);
  --md-green:#5FD9A0;
  --md-green-bright:#18C979;
  --md-red:#F0776B;
  --md-red-soft:rgba(240,119,107,.09);
  --md-amber:#E3B341;
  --md-shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--md-bg);
  color:var(--md-ink);
  font-family:"Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--md-green); }

/* ── header ───────────────────────────────────────────────────────────── */
.md-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:16px 20px;
  border-bottom:1px solid var(--md-line);
  background:var(--md-surface);
  position:sticky; top:0; z-index:10;
}
.md-brand{
  display:flex; align-items:center; gap:9px;
  font-weight:900; font-size:19px; letter-spacing:-.5px;
  color:var(--md-ink); text-decoration:none;
}
.md-brand img{ border-radius:8px; }
.md-back{
  font-size:13px; font-weight:600; text-decoration:none;
  display:inline-flex; align-items:center; gap:7px;
}

/* ── layout ───────────────────────────────────────────────────────────── */
.md-wrap{
  max-width:720px;
  margin:0 auto;
  padding:36px 16px 60px;
}

.md-eyebrow{
  margin:0 0 8px;
  font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
  color:var(--md-green);
}
.md-title{
  margin:0 0 10px;
  font-size:clamp(28px, 6vw, 38px); font-weight:800; letter-spacing:-1px;
  text-wrap:balance;
}
.md-lede{
  margin:0 0 30px;
  font-size:16px; color:var(--md-ink-soft); max-width:60ch;
}

/* ── cards ────────────────────────────────────────────────────────────── */
.md-card{
  background:var(--md-surface);
  border:1px solid var(--md-line);
  border-radius:16px;
  padding:24px;
  margin-bottom:18px;
  box-shadow:var(--md-shadow);
}
.md-card--quiet{ text-align:center; padding:40px 24px; }
.md-card--danger{ border-color:rgba(179,38,30,.26); }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .md-card--danger{ border-color:rgba(240,119,107,.3); }
}
:root[data-theme="dark"] .md-card--danger{ border-color:rgba(240,119,107,.3); }

.md-card-icon{ font-size:26px; color:var(--md-green); margin-bottom:12px; display:block; }

.md-card h2{
  margin:0; font-size:18px; font-weight:800; letter-spacing:-.3px;
  display:flex; align-items:center; gap:10px;
}
.md-card-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:14px;
}
.md-num{
  flex:none;
  width:25px; height:25px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(24,201,121,.12); color:var(--md-green);
  font-size:12px; font-weight:800;
}
/* The statutory source for each control. It belongs on the page, not in a
   footnote — it is the reason the control exists, and a reader checking up
   on us should not have to hunt for it. */
.md-cite{
  font-size:11px; font-weight:700; letter-spacing:.3px;
  color:var(--md-ink-soft);
  font-variant-numeric:tabular-nums;
}
.md-card p{ margin:0 0 12px; }
.md-card p:last-child{ margin-bottom:0; }

.md-muted{ color:var(--md-ink-soft); }
.md-fine{ font-size:12.5px; color:var(--md-ink-soft); margin-top:14px; }

/* ── buttons ──────────────────────────────────────────────────────────── */
.md-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:0 18px; height:44px;
  border-radius:11px; border:1.5px solid var(--md-line);
  background:transparent; color:var(--md-ink);
  font-family:inherit; font-size:14px; font-weight:700;
  cursor:pointer; text-decoration:none;
  transition:border-color .18s ease, background .18s ease, filter .18s ease;
}
.md-btn:hover{ border-color:var(--md-green); }
.md-btn--primary{
  background:var(--md-green-bright); border-color:transparent; color:#fff;
}
.md-btn--primary:hover{ filter:brightness(1.05); }
.md-btn--danger{
  background:var(--md-red); border-color:transparent; color:#fff;
}
.md-btn--danger:hover{ filter:brightness(1.07); }
.md-btn:disabled{ opacity:.55; cursor:default; filter:none; }
.md-btn:focus-visible{ outline:2px solid var(--md-green-bright); outline-offset:2px; }

/* ── what we hold ─────────────────────────────────────────────────────── */
.md-hold-group{ margin-bottom:18px; }
.md-hold-group:last-child{ margin-bottom:0; }
.md-hold-h{
  font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  color:var(--md-ink-soft); margin-bottom:8px;
}
.md-dl{
  display:grid; grid-template-columns:minmax(120px,auto) 1fr;
  gap:6px 16px; margin:0;
  font-size:14px;
}
.md-dl dt{ color:var(--md-ink-soft); }
.md-dl dd{ margin:0; font-weight:600; overflow-wrap:anywhere; }

/* ── consent choices ──────────────────────────────────────────────────── */
.md-choices{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr));
  gap:12px; margin:16px 0 0;
}
.md-choice{
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  gap:2px 12px;
  text-align:left; padding:16px;
  border:1.5px solid var(--md-line); border-radius:13px;
  background:transparent; color:var(--md-ink);
  font-family:inherit; cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}
.md-choice--wide{ grid-column:1/-1; }
.md-choice:hover{ border-color:var(--md-green); background:rgba(24,201,121,.04); }
.md-choice:focus-visible{ outline:2px solid var(--md-green-bright); outline-offset:2px; }
.md-choice:disabled{ opacity:.5; cursor:default; }
.md-choice i{ grid-row:1/3; font-size:17px; color:var(--md-green); margin-top:3px; }
.md-choice-t{ font-size:14.5px; font-weight:700; }
.md-choice-d{ font-size:12.5px; color:var(--md-ink-soft); line-height:1.5; }

.md-log{ margin-top:16px; padding-top:14px; border-top:1px solid var(--md-line); }
.md-log-h{
  font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase;
  color:var(--md-ink-soft); margin-bottom:8px;
}
.md-log-row{
  display:flex; align-items:center; gap:9px;
  font-size:13.5px; padding:5px 0;
}
.md-log-row i{ color:var(--md-green); font-size:12px; }
.md-log-row time{ margin-left:auto; color:var(--md-ink-soft); font-size:12.5px; }

/* ── erasure split ────────────────────────────────────────────────────── */
.md-split{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:14px; margin:16px 0;
}
.md-split-col{
  padding:15px; border-radius:12px;
  background:rgba(8,92,58,.035); border:1px solid var(--md-line);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .md-split-col{ background:rgba(255,255,255,.025); }
}
:root[data-theme="dark"] .md-split-col{ background:rgba(255,255,255,.025); }
.md-split-h{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:800; margin-bottom:7px;
}
.md-split-h i{ color:var(--md-green); }
.md-split-col p{ font-size:13px; color:var(--md-ink-soft); margin:0; }

/* ── request state ────────────────────────────────────────────────────── */
.md-state{
  padding:16px; border-radius:12px; margin:4px 0 14px;
  border:1px solid var(--md-line);
}
.md-state--wait{ background:rgba(227,179,65,.08); border-color:rgba(227,179,65,.3); }
.md-state--ok{ background:rgba(24,201,121,.08); border-color:rgba(24,201,121,.3); }
.md-state--bad{ background:var(--md-red-soft); border-color:rgba(179,38,30,.3); }
.md-state-h{ font-size:15px; font-weight:800; margin-bottom:10px; }

/* ── retention table ──────────────────────────────────────────────────── */
.md-table-wrap{ overflow-x:auto; }
.md-table{
  width:100%; border-collapse:collapse; font-size:13.5px; margin-top:4px;
}
.md-table th{
  text-align:left; font-size:11px; letter-spacing:.8px; text-transform:uppercase;
  color:var(--md-ink-soft); font-weight:800;
  padding:0 12px 8px 0; border-bottom:1px solid var(--md-line);
}
.md-table td{
  padding:10px 12px 10px 0; border-bottom:1px solid var(--md-line);
  vertical-align:top;
}
.md-table tr:last-child td{ border-bottom:0; }

/* ── [hidden] has to actually hide ────────────────────────────────────────
   The same trap bottom-nav.css:288 documents for .more-item. `hidden` is
   only a user-agent style, so any author rule that sets `display` beats it:
   .md-overlay{display:flex} below made the confirmation dialog render over
   the page on first paint, before anyone had asked for it.

   Scoped to the two elements that set a display and are toggled by the
   attribute, rather than a blanket [hidden]{display:none !important}, so a
   future rule here is not silently overridden from a distance. */
.md-overlay[hidden],
.md-toast[hidden]{ display:none; }

/* ── dialog ───────────────────────────────────────────────────────────── */
.md-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(6,18,13,.55);
  display:flex; align-items:center; justify-content:center;
  padding:18px;
  backdrop-filter:blur(2px);
}
.md-dialog{
  background:var(--md-surface);
  border:1px solid var(--md-line); border-radius:17px;
  padding:24px; max-width:460px; width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.md-dialog h3{ margin:0 0 10px; font-size:18px; font-weight:800; }
.md-dialog p{ margin:0 0 16px; font-size:14px; color:var(--md-ink-soft); }
.md-check{
  display:flex; align-items:flex-start; gap:10px;
  font-size:13.5px; font-weight:600; cursor:pointer;
  padding:12px; border-radius:10px;
  background:rgba(8,92,58,.04); border:1px solid var(--md-line);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .md-check{ background:rgba(255,255,255,.03); }
}
:root[data-theme="dark"] .md-check{ background:rgba(255,255,255,.03); }
.md-check input{ margin-top:2px; width:16px; height:16px; accent-color:var(--md-green-bright); }
.md-dialog-btns{
  display:flex; gap:10px; justify-content:flex-end; margin-top:16px;
}

/* ── toast ────────────────────────────────────────────────────────────── */
.md-toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  z-index:200; max-width:min(520px, calc(100vw - 32px));
  padding:13px 18px; border-radius:12px;
  background:var(--md-ink); color:var(--md-bg);
  font-size:13.5px; font-weight:600; line-height:1.5;
  box-shadow:0 10px 36px rgba(0,0,0,.26);
}
.md-toast--ok{ background:var(--md-green); color:#fff; }
.md-toast--bad{ background:var(--md-red); color:#fff; }

/* ── footer ───────────────────────────────────────────────────────────── */
.md-foot{
  text-align:center; padding:26px 16px 36px;
  font-size:12.5px; color:var(--md-ink-soft);
  border-top:1px solid var(--md-line);
}
.md-foot a{ text-decoration:none; }

@media (max-width:480px){
  .md-wrap{ padding:26px 16px 48px; }
  .md-card{ padding:19px; }
  .md-dl{ grid-template-columns:1fr; gap:2px; }
  .md-dl dd{ margin-bottom:8px; }
  .md-card-head{ margin-bottom:12px; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.01ms !important; }
}