/* ============================================================================
   doc.css — the design system for Yapr's document pages (legal, support).
   Loads AFTER styles.css and builds entirely on its tokens, so light/dark
   themes and the global reduced-motion kill switch apply for free.
   Signature: the voice-wave rule under each title (the Voice Ribbon, distilled)
   + outlined surfaces that warm to plum on hover.
   ========================================================================== */

/* ---------- Top bar: slim, sticky, borrowing .brand + .theme-toggle ------- */
.doc-nav{
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(20px,4vw,40px);
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid color-mix(in srgb, var(--hairline) 70%, transparent);
}
.doc-nav .brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none;}
.doc-nav .brand__mark img{width:34px; height:34px; display:block; border-radius:9px;}
.doc-nav .brand__word{
  font-size:19px; font-weight:600; letter-spacing:var(--track-tight); color:var(--ink);
}
.doc-nav__side{display:flex; align-items:center; gap:14px;}
.doc-nav__home{
  font-size:14px; font-weight:500; color:var(--ink-3); text-decoration:none;
  border:1px solid var(--hairline); border-radius:var(--r-pill); padding:7px 14px;
  transition:color .25s var(--ease-out), border-color .25s var(--ease-out),
             transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.doc-nav__home:hover{color:var(--plum); border-color:var(--plum-edge); transform:translateY(-1px); box-shadow:var(--shadow-1);}
.doc-nav__home:focus-visible{outline:none; box-shadow:0 0 0 4px var(--plum-soft);}

/* ---------- Hero ---------------------------------------------------------- */
.doc-hero{
  max-width:1120px; margin:0 auto;
  padding:clamp(36px,6vw,72px) 24px clamp(18px,3vw,28px);
}
.doc-hero .eyebrow{margin-bottom:12px;}
.doc-hero h1{
  font-size:clamp(34px,5.4vw,54px); font-weight:600; line-height:1.02;
  letter-spacing:var(--track-tighter); margin:0 0 12px; color:var(--ink);
}
.doc-hero__dek{
  font-size:clamp(16.5px,1.9vw,19px); line-height:1.55; color:var(--ink-3);
  max-width:56ch; margin:0 0 22px;
}

/* The voice-wave rule — a spoken line, drawn under the title. */
.doc-wave{display:block; width:min(340px,72%); height:26px; margin:2px 0 26px; overflow:visible;}
.doc-wave path{
  fill:none; stroke:var(--plum); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  opacity:.85;
  stroke-dasharray:640; stroke-dashoffset:640;
  animation:doc-wave-draw 1.1s var(--ease-out) .15s forwards;
}
@keyframes doc-wave-draw{to{stroke-dashoffset:0;}}
@media (prefers-reduced-motion:reduce){ .doc-wave path{stroke-dasharray:none; stroke-dashoffset:0;} }

/* Document facts strip — the meta lines, promoted to cards. */
.doc-facts{display:flex; flex-wrap:wrap; gap:10px; margin:0 0 6px;}
.doc-facts__item{
  border:1px solid var(--hairline); border-radius:var(--r-md);
  background:var(--paper); padding:9px 14px; min-width:0;
  transition:border-color .25s var(--ease-out), transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.doc-facts__item:hover{border-color:var(--plum-edge); transform:translateY(-1px); box-shadow:var(--shadow-1);}
.doc-facts__label{
  display:block; font-size:10.5px; font-weight:600; letter-spacing:var(--track-cap);
  text-transform:uppercase; color:var(--ink-4); margin-bottom:2px;
}
.doc-facts__value{font-size:13.5px; font-weight:500; color:var(--ink-2); line-height:1.4;}
.doc-facts__value a{color:var(--plum); font-weight:500; text-decoration:none;}
.doc-facts__value a:hover{text-decoration:underline;}

/* ---------- Shell: content + sticky "On this page" rail ------------------- */
.doc-shell{
  max-width:1120px; margin:0 auto;
  padding:0 24px clamp(48px,7vw,96px);
}
@media (min-width:1080px){
  .doc-shell{display:grid; grid-template-columns:minmax(0,1fr) 232px; gap:56px; align-items:start;}
}
.doc{max-width:740px; min-width:0;}
.doc-shell--wide .doc{max-width:900px;}

.doc-toc{display:none;}
@media (min-width:1080px){
  .doc-toc{
    display:block; position:sticky; top:86px;
    max-height:calc(100vh - 110px); overflow-y:auto;
    padding:4px 0 4px 18px; border-left:1px solid var(--hairline);
    scrollbar-width:thin;
  }
  .doc-toc[hidden]{display:none;}
  .doc-toc__label{
    font-size:11px; font-weight:600; letter-spacing:var(--track-cap); text-transform:uppercase;
    color:var(--ink-4); margin:0 0 10px;
  }
  .doc-toc a{
    display:block; position:relative; font-size:13.5px; line-height:1.35; color:var(--ink-3);
    text-decoration:none; padding:5px 0 5px 2px;
    transition:color .2s var(--ease-out);
  }
  .doc-toc a::before{
    content:""; position:absolute; left:-19px; top:6px; bottom:6px; width:2px; border-radius:2px;
    background:var(--plum); transform:scaleY(0); transition:transform .25s var(--ease-out);
  }
  .doc-toc a:hover{color:var(--ink);}
  .doc-toc a:focus-visible{outline:none; border-radius:6px; box-shadow:0 0 0 3px var(--plum-soft);}
  .doc-toc a.is-active{color:var(--plum); font-weight:500;}
  .doc-toc a.is-active::before{transform:scaleY(1);}
}

/* ---------- Long-form typography ------------------------------------------ */
.doc{font-size:16.5px; line-height:1.7;}
.doc h2{
  font-size:23px; font-weight:600; letter-spacing:var(--track-tight); color:var(--ink);
  margin:46px 0 14px; padding-bottom:10px; border-bottom:1px solid var(--hairline);
  position:relative; scroll-margin-top:92px;
}
.doc h2::after{
  content:""; position:absolute; left:0; bottom:-1px; height:2px; width:56px; border-radius:2px;
  background:var(--plum); transform:scaleX(.35); transform-origin:left;
  transition:transform .35s var(--ease-out);
}
.doc h2:hover::after{transform:scaleX(1);}
.doc h3{font-size:17px; font-weight:600; margin:24px 0 6px; color:var(--ink); scroll-margin-top:92px;}
.doc p{color:var(--ink-2); margin:0 0 15px;}
.doc ul,.doc ol{color:var(--ink-2); padding-left:22px; margin:0 0 15px;}
.doc li{margin:0 0 10px;}
.doc li::marker{color:var(--plum);}
.doc ::selection{background:var(--plum-soft);}
.doc .muted{color:var(--ink-4); font-size:14px;}
.doc .meta{color:var(--ink-3); font-size:14px; margin:0 0 4px;}
.doc a.inline{
  color:var(--plum); font-weight:500;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb, var(--plum) 30%, transparent);
  transition:text-decoration-color .25s var(--ease-out);
}
.doc a.inline:hover{text-decoration-color:var(--plum);}
.doc a.inline:focus-visible{outline:none; border-radius:4px; box-shadow:0 0 0 4px var(--plum-soft);}

/* ---------- Outlined surfaces: the hoverable-outline language ------------- */
.doc .callout,.doc .banner--draft,.doc .banner{
  --glow:var(--plum);
  position:relative; overflow:hidden;
  background:var(--paper-2); border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:20px 22px; margin:0 0 15px;
  transition:border-color .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.doc .callout::after,.doc .banner--draft::after,.doc .banner::after{
  content:""; position:absolute; right:-30%; top:-45%; width:64%; height:90%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, color-mix(in srgb, var(--glow) 12%, transparent), transparent 70%);
  opacity:0; transition:opacity .3s var(--ease-out);
}
.doc .callout:hover,.doc .banner--draft:hover,.doc .banner:hover{transform:translateY(-2px); box-shadow:var(--shadow-2);}
.doc .callout:hover::after,.doc .banner--draft:hover::after,.doc .banner:hover::after{opacity:1;}
.doc .callout:hover{border-color:var(--plum-edge);}
.doc .callout--pull{border-left:4px solid var(--plum);}
.doc .callout--pull p{margin:0; color:var(--ink); font-size:18px; font-weight:500; letter-spacing:var(--track-tight);}
.doc .callout--vault,.doc .callout--ok,.doc .banner--ok{--glow:var(--vault); background:var(--vault-soft); border-color:color-mix(in srgb, var(--vault) 28%, transparent);}
.doc .callout--vault:hover,.doc .callout--ok:hover,.doc .banner--ok:hover{border-color:color-mix(in srgb, var(--vault) 45%, transparent);}
.doc .callout--ok p{color:var(--ink-2); margin:0;}
.doc .banner--ok strong{color:var(--vault);}

/* Draft banner keeps its danger identity. */
.doc .banner--draft{
  --glow:var(--danger);
  display:flex; gap:14px; align-items:flex-start;
  background:color-mix(in srgb, var(--danger) 11%, var(--paper-2));
  border-color:color-mix(in srgb, var(--danger) 42%, transparent);
  border-left:4px solid var(--danger);
  padding:18px 20px; margin:0 0 30px; font-size:15px; line-height:1.55; color:var(--ink-2);
}
.doc .banner--draft:hover{border-color:color-mix(in srgb, var(--danger) 60%, transparent); border-left-color:var(--danger);}
.doc .banner--draft .tag{
  flex:none; font-size:11px; font-weight:700; letter-spacing:var(--track-cap); text-transform:uppercase;
  color:#fff; background:var(--danger); border-radius:var(--r-pill); padding:5px 12px; margin-top:1px;
}
.doc .banner--draft strong{color:var(--danger);}

/* Placeholders awaiting counsel/founder input. */
.ph{
  background:color-mix(in srgb, var(--plum) 13%, transparent);
  border:1px dashed color-mix(in srgb, var(--plum) 45%, transparent);
  border-radius:6px; padding:1px 8px; color:var(--plum-deep); font-weight:500;
  transition:border-color .25s var(--ease-out), background .25s var(--ease-out);
}
.ph:hover{border-color:var(--plum); background:color-mix(in srgb, var(--plum) 20%, transparent);}
[data-theme="dark"] .ph{color:var(--plum);}

/* ---------- Register tables ----------------------------------------------- */
.doc .tbl-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 18px;
  border:1px solid var(--hairline); border-radius:var(--r-lg); background:var(--paper);
  transition:border-color .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.doc .tbl-wrap:hover{border-color:var(--plum-edge); box-shadow:var(--shadow-2);}
table.reg{border-collapse:collapse; width:100%; min-width:560px; font-size:14px;}
table.reg th,table.reg td{text-align:left; vertical-align:top; padding:11px 12px; border-bottom:1px solid var(--hairline); color:var(--ink-2);}
table.reg th{color:var(--ink); font-weight:600; letter-spacing:var(--track-tight); background:var(--paper-2); position:sticky; top:0;}
table.reg td strong{color:var(--ink);}
table.reg tr:last-child td{border-bottom:none;}
table.reg td{transition:background .25s var(--ease-out), box-shadow .25s var(--ease-out);}
table.reg tbody tr:hover td{background:color-mix(in srgb, var(--plum) 6%, transparent);}
table.reg tbody tr:hover td:first-child{box-shadow:inset 2px 0 0 var(--plum);}

/* ---------- Footer strip --------------------------------------------------- */
.doc-footer{
  border-top:1px solid var(--hairline);
  padding:26px clamp(20px,4vw,40px) 40px;
  max-width:1120px; margin:0 auto;
  display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center;
  font-size:13.5px; color:var(--ink-4);
}
.doc-footer a{color:var(--ink-3); text-decoration:none; transition:color .2s var(--ease-out);}
.doc-footer a:hover{color:var(--plum);}
.doc-footer a:focus-visible{outline:none; border-radius:4px; box-shadow:0 0 0 3px var(--plum-soft);}
.doc-footer__spacer{flex:1 1 auto;}

/* ---------- Entrance ------------------------------------------------------- */
@keyframes doc-rise{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
.doc-hero .eyebrow{animation:doc-rise .5s var(--ease-out) backwards;}
.doc-hero h1{animation:doc-rise .5s var(--ease-out) .06s backwards;}
.doc-hero__dek{animation:doc-rise .5s var(--ease-out) .12s backwards;}
.doc-wave{animation:doc-rise .5s var(--ease-out) .16s backwards;}
.doc-facts{animation:doc-rise .5s var(--ease-out) .2s backwards;}
.doc-shell{animation:doc-rise .55s var(--ease-out) .26s backwards;}

/* ---------- Print ---------------------------------------------------------- */
@media print{
  .doc-nav,.doc-toc,.doc-wave,.doc-footer,.grain{display:none !important;}
  .doc-shell{display:block; padding:0;}
  .doc{max-width:none; font-size:12pt;}
  body{background:#fff;}
  .doc .callout,.doc .banner--draft,.doc .banner,.doc .tbl-wrap{box-shadow:none !important; transform:none !important;}
  .doc h2{break-after:avoid;}
  .doc .tbl-wrap{overflow:visible;}
  table.reg{min-width:0;}
}