/* ==========================================================================
   policy.css — shared shell for the per-app privacy policies.
   Each page sets --accent / --bg / --card in an inline :root block so the
   document carries its app's colour without a separate stylesheet per app.
   Legal copy is never styled by meaning here — only by structure.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

:root{
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);
  --text:#eaf3ee;
  --dim:#a4b5ae;
  --measure:74ch;
  --rail:248px;
  --font:"Sora",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font);font-size:16px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
/* accent wash behind the masthead — depth without a hero image */
body::before{
  content:"";position:fixed;inset:0 0 auto;height:420px;pointer-events:none;z-index:0;
  background:
    radial-gradient(60% 100% at 18% 0%, color-mix(in srgb,var(--accent) 13%,transparent), transparent 70%),
    radial-gradient(45% 90% at 92% 4%, color-mix(in srgb,var(--accent) 8%,transparent), transparent 72%);
}
@supports not (background:color-mix(in srgb,red,blue)){
  body::before{background:radial-gradient(60% 100% at 18% 0%,rgba(255,255,255,.07),transparent 70%)}
}

a{color:var(--accent);text-decoration-color:color-mix(in srgb,var(--accent) 40%,transparent);text-underline-offset:3px}
a:hover{text-decoration-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* clip rather than left:-9999px so the link can't widen the scroll box */
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{
  position:fixed;width:auto;height:auto;clip-path:none;overflow:visible;
  left:12px;top:12px;z-index:99;background:var(--accent);color:#06110c;
  padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none;
}

/* ---------- reading progress ---------- */
#progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:60;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,transparent),var(--accent));
  transition:width .12s linear;
}

/* ---------- slim masthead ---------- */
.pol-nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line-soft);
}
@supports not (backdrop-filter:blur(1px)){ .pol-nav{background:var(--bg)} }
.pol-nav-in{
  max-width:1160px;margin:0 auto;padding:12px 22px;
  display:flex;align-items:center;gap:14px;
}
.pol-brand{display:flex;align-items:center;gap:9px;color:var(--text);text-decoration:none;font-weight:700;letter-spacing:-.01em}
.pol-brand img{width:22px;height:22px;border-radius:6px;display:block}
.pol-brand:hover{color:var(--accent)}
.pol-nav .spacer{flex:1}
.pol-nav a.up{
  color:var(--dim);text-decoration:none;font-size:13.5px;
  border:1px solid var(--line);border-radius:999px;padding:6px 13px;
  transition:color .18s ease,border-color .18s ease,background .18s ease;
}
.pol-nav a.up:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent)}

/* ---------- layout ---------- */
.pol-wrap{max-width:1160px;margin:0 auto;padding:44px 22px 96px;position:relative;z-index:1}
.pol-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
@media(min-width:1120px){
  .pol-grid{grid-template-columns:minmax(0,1fr) var(--rail);gap:56px;align-items:start}
}

/* ---------- document header ---------- */
.eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);display:block;margin-bottom:12px;
}
h1{
  font-family:"Unbounded",var(--font);
  font-size:clamp(28px,4.4vw,42px);line-height:1.1;letter-spacing:-.025em;
  margin:0 0 6px;font-weight:600;
}
.doc-sub{color:var(--dim);font-size:16px;margin:0 0 22px;max-width:60ch}

.factbar{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0;list-style:none;
}
.factbar li{
  display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  min-width:0;max-width:100%;
  border:1px solid var(--line);border-radius:10px;padding:7px 12px;
  background:color-mix(in srgb,var(--card) 60%,transparent);
  font-size:13.5px;color:var(--text);
}
/* the contact address is long enough to push past a 390px viewport */
.factbar li a{min-width:0;overflow-wrap:anywhere}
.factbar b{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);font-weight:400;
}
.factbar a{text-decoration:none;font-weight:600}

/* copy-email affordance */
.copy{
  border:0;background:none;padding:0 0 0 6px;cursor:pointer;color:var(--dim);
  font:inherit;font-size:12px;line-height:1;
}
.copy:hover{color:var(--accent)}
.copy[data-done="1"]{color:var(--accent)}

/* ---------- the short version ---------- */
.tldr{
  position:relative;overflow:hidden;
  background:color-mix(in srgb,var(--card) 88%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));
  border-left:3px solid var(--accent);
  border-radius:14px;padding:20px 22px;margin:0 0 8px;
  font-size:15.5px;
}
.tldr::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 60%);
}
.tldr > *{position:relative}
.tldr strong:first-child{color:var(--accent)}

/* ---------- body copy ---------- */
.doc{max-width:var(--measure)}
.doc h2{
  font-family:"Unbounded",var(--font);
  font-size:clamp(17px,2vw,20px);line-height:1.3;letter-spacing:-.015em;font-weight:600;
  color:var(--text);margin:44px 0 10px;padding-top:10px;
  scroll-margin-top:84px;
  display:flex;align-items:baseline;gap:11px;
}
.doc h2 .n{
  flex:none;font-family:var(--mono);font-size:11.5px;font-weight:400;letter-spacing:.06em;
  color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border-radius:7px;padding:3px 8px;transform:translateY(-2px);
}
.doc h2 .anchor{
  opacity:0;margin-left:2px;font-size:14px;text-decoration:none;color:var(--dim);
  transition:opacity .16s ease;
}
.doc h2:hover .anchor,.doc h2 .anchor:focus-visible{opacity:1}
.doc h2 .anchor:hover{color:var(--accent)}

.doc p,.doc li{font-size:15.75px;color:var(--text)}
.doc p{margin:0 0 14px}
/* :not(.factbar) — the fact pills are a <ul> inside .doc and would otherwise
   pick up a stray accent dot in each pill's corner. */
.doc ul:not(.factbar){margin:0 0 16px;padding-left:0;list-style:none}
.doc ul:not(.factbar) li{position:relative;padding-left:20px;margin:9px 0}
.doc ul:not(.factbar) li::before{
  content:"";position:absolute;left:2px;top:.68em;
  width:6px;height:6px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 70%,transparent);
}
.doc strong{color:#fff;font-weight:600}
.doc code{font-family:var(--mono);background:rgba(255,255,255,.07);padding:1px 6px;border-radius:6px;font-size:13.5px}
.doc hr{border:0;border-top:1px solid var(--line);margin:38px 0}

/* nested cards inside sections */
.doc .card{
  background:color-mix(in srgb,var(--card) 70%,transparent);
  border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin:14px 0;
}

/* ---------- data table ---------- */
.tablewrap{
  margin:16px 0 18px;border:1px solid var(--line);border-radius:12px;
  overflow:auto;-webkit-overflow-scrolling:touch;
  background:color-mix(in srgb,var(--card) 55%,transparent);
}
.doc table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.doc th,.doc td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.doc th{
  position:sticky;top:0;z-index:1;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);font-weight:400;
  background:color-mix(in srgb,var(--bg) 94%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 26%,var(--line));
}
.doc tbody tr:last-child td{border-bottom:0}
.doc tbody tr:nth-child(even){background:rgba(255,255,255,.018)}
.doc tbody tr:hover{background:color-mix(in srgb,var(--accent) 5%,transparent)}

/* ---------- section rail (TOC) ---------- */
.rail{display:none}
@media(min-width:1120px){
  .rail{
    display:block;position:sticky;top:78px;
    max-height:calc(100vh - 110px);overflow-y:auto;
    scrollbar-width:thin;
  }
}
.rail .rail-t{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin:0 0 12px;padding-left:13px;
}
.rail ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.rail li{margin:0}
.rail a{
  display:block;padding:6px 0 6px 13px;margin-left:-1px;
  border-left:1px solid transparent;
  color:var(--dim);text-decoration:none;font-size:13.25px;line-height:1.45;
  transition:color .18s ease,border-color .18s ease;
}
.rail a:hover{color:var(--text)}
.rail a[aria-current="true"]{color:var(--accent);border-left-color:var(--accent);font-weight:600}

/* mobile jump-to */
.jump{margin:0 0 26px;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--card) 60%,transparent)}
@media(min-width:1120px){.jump{display:none}}
.jump > summary{
  cursor:pointer;padding:12px 16px;font-size:14px;font-weight:600;color:var(--text);
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.jump > summary::-webkit-details-marker{display:none}
.jump > summary::after{content:"＋";color:var(--accent);font-size:15px}
.jump[open] > summary::after{content:"−"}
.jump ol{margin:0;padding:0 16px 14px 30px;columns:1}
.jump li{margin:5px 0;font-size:14px}
.jump a{text-decoration:none;color:var(--dim)}
.jump a:hover{color:var(--accent)}

/* ---------- footer ---------- */
.pol-foot{
  max-width:1160px;margin:0 auto;padding:26px 22px 60px;
  border-top:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;
  color:var(--dim);font-size:13.25px;position:relative;z-index:1;
}
.pol-foot .spacer{flex:1}
.pol-foot a{color:var(--dim);text-decoration:none}
.pol-foot a:hover{color:var(--accent)}

/* ---------- back to top ---------- */
#totop{
  position:fixed;right:20px;bottom:20px;z-index:55;
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--line);color:var(--text);text-decoration:none;
  background:color-mix(in srgb,var(--card) 92%,transparent);
  backdrop-filter:blur(8px);
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .22s ease,transform .22s ease,color .18s ease,border-color .18s ease;
}
#totop.on{opacity:1;transform:none;pointer-events:auto}
#totop:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}

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

/* ---------- print: legal pages get saved as PDF, so make that good ---------- */
@media print{
  body{background:#fff;color:#111}
  /* the base rules set colour on these directly, so restate them or the
     printed page comes out near-white text on white paper */
  .doc p,.doc li,.doc td,.doc th,.doc,.tldr,.doc-sub,.factbar li,h1{color:#111}
  .doc ul:not(.factbar) li::before{background:#555}
  body::before,#progress,.pol-nav,.rail,.jump,#totop,.copy{display:none !important}
  .pol-wrap{padding:0;max-width:none}
  .pol-grid{display:block}
  .doc{max-width:none}
  a{color:#111;text-decoration:underline}
  h1,.doc h2,.doc strong{color:#000}
  .doc h2{page-break-after:avoid;margin-top:22px}
  .doc h2 .n{color:#444;border-color:#bbb;background:none}
  .eyebrow{color:#444}
  .tldr{border:1px solid #999;border-left:3px solid #333;background:#f6f6f6;color:#111;page-break-inside:avoid}
  .tldr strong:first-child{color:#000}
  .factbar li{border:1px solid #ccc;background:none;color:#111}
  .factbar b{color:#555}
  .tablewrap{border:1px solid #999;background:none;overflow:visible}
  .doc table{min-width:0}
  .doc th{color:#000;background:#eee;position:static}
  .doc p,.doc li{font-size:11pt}
  .doc ul:not(.factbar) li::before{background:#555}
  .pol-foot{color:#444;border-top:1px solid #ccc}
  /* surface the canonical URL when printed */
  .pol-foot::after{content:"Canonical: https://dlonem.com/privacy/";display:block;width:100%;color:#666;font-size:9pt}
}