/* ---------- docs.css ----------
   Supplemental styles for app document pages (privacy, support).
   Loaded after style.css; reuses its tokens and .story-section layout. */

/* ---------- doc hero ---------- */
.doc-hero{ position:relative; padding:72px 0 28px; z-index:2; }
.doc-hero .eyebrow{
  color:var(--amber); font-family:var(--font-display); font-size:12px;
  letter-spacing:0.2em; text-transform:uppercase; margin-bottom:14px;
}
.doc-hero h1{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.1rem,5vw,3rem);
  letter-spacing:0.01em; margin:0 0 20px; text-wrap:balance;
}
.doc-hero .lede{
  font-size:17px; color:var(--ink-muted);
  max-width:62ch; margin:0 0 20px;
}
.doc-hero .meta{
  font-size:12.5px; color:var(--slate); letter-spacing:0.02em;
  margin:0 0 22px;
}
.doc-hero .meta a{ color:var(--slate); text-decoration:none; border-bottom:1px solid var(--panel-edge); }
.doc-hero .meta a:hover{ color:var(--amber); border-bottom-color:var(--amber); }

/* ---------- cross-link pill ---------- */
.cross-link{
  display:inline-block; text-decoration:none;
  font-size:13px; letter-spacing:0.03em;
  color:var(--amber);
  background:var(--amber-soft);
  border:1px solid rgba(245,165,33,0.22);
  border-radius:20px; padding:7px 16px;
  transition:background .15s ease, border-color .15s ease;
}
.cross-link:hover{ background:rgba(245,165,33,0.16); border-color:rgba(245,165,33,0.45); }

/* ---------- doc body ---------- */
main.doc{ padding:14px 0 100px; position:relative; z-index:2; }
main.doc .story-section:first-child{ border-top:1px solid var(--panel-edge); }
main.doc .body a{ color:var(--amber); text-decoration:none; border-bottom:1px solid rgba(245,165,33,0.3); }
main.doc .body a:hover{ border-bottom-color:var(--amber); }
main.doc .body ul{ margin:0 0 14px; padding-left:20px; color:var(--ink-muted); }
main.doc .body li{ margin-bottom:6px; }

/* ---------- inline code / UI path ---------- */
code.path{
  font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
  font-size:0.88em;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--panel-edge);
  border-radius:5px;
  padding:1.5px 6px;
  color:var(--paper);
  white-space:nowrap;
}

@media (max-width:560px){
  .doc-hero{ padding:52px 0 22px; }
  .doc-hero .lede{ font-size:16px; }
}