/* Docs — deliberately a different surface from the dashboard.
   The front page is panels and stat tiles; this is an editorial reading page:
   a sticky contents rail, big numbered sections, a ruled left margin. */

.docs{
  background:
    linear-gradient(180deg,rgba(124,140,69,.07),transparent 380px),
    var(--paper);
}

.doc-shell{
  display:grid;
  grid-template-columns:216px minmax(0,1fr);
  gap:56px;
  align-items:start;
  padding-top:44px;
  padding-bottom:80px;
}

/* ---------- contents rail ---------- */
.doc-nav{
  position:sticky;top:110px;
  padding-left:2px;
}
.doc-nav-title{
  margin:0 0 14px;
  font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brand-soft);
}
.doc-nav ol{
  list-style:none;margin:0;padding:0;
  counter-reset:toc;
  border-left:2px solid rgba(70,128,31,.18);
}
.doc-nav li{counter-increment:toc}
.doc-nav a{
  display:block;padding:7px 0 7px 16px;margin-left:-2px;
  border-left:2px solid transparent;
  font-size:.92rem;color:var(--ink-soft);
  transition:color .15s ease,border-color .15s ease;
}
.doc-nav a::before{
  content:counter(toc,decimal-leading-zero);
  margin-right:9px;font-size:.74rem;color:var(--brand-soft);font-variant-numeric:tabular-nums;
}
.doc-nav a:hover{color:var(--brand-deep);border-left-color:var(--brand-soft)}
.doc-nav a.is-current{color:var(--brand-deep);font-weight:600;border-left-color:var(--brand)}

/* ---------- body ---------- */
.doc-body{max-width:760px}
.doc-hero{padding-bottom:26px;border-bottom:1px solid rgba(70,128,31,.16)}
.doc-eyebrow{
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-soft);
}
.doc-hero h1{
  margin:12px 0 0;
  font-size:clamp(2.1rem,4.2vw,3.1rem);letter-spacing:-.038em;
}
.doc-lede{
  margin:18px 0 0;
  font-size:1.24rem;line-height:1.55;color:var(--ink);
  border-left:3px solid var(--brand);padding-left:18px;
}
.doc-sub{margin:14px 0 0;color:var(--ink-soft);font-size:.98rem}

.doc-sec{padding:46px 0 8px;scroll-margin-top:110px}
.doc-sec + .doc-sec{border-top:1px solid rgba(70,128,31,.12)}
.doc-sec h2{
  display:flex;align-items:baseline;gap:14px;
  font-size:clamp(1.4rem,2.5vw,1.95rem);letter-spacing:-.03em;
  margin-bottom:18px;
}
.doc-sec h2 .num{
  font-size:.8rem;font-weight:600;letter-spacing:.06em;
  color:var(--brand-soft);font-variant-numeric:tabular-nums;
}
.doc-sec h3{margin:30px 0 10px;font-size:1.12rem;letter-spacing:-.02em}
.doc-sec p{margin:0 0 14px;line-height:1.68;color:var(--ink-soft)}
.doc-sec p b,.doc-sec li b{color:var(--ink);font-weight:600}
.pull{font-size:1.08rem;color:var(--ink) !important}
.aside{
  margin-top:18px;padding:14px 18px;border-radius:14px;
  background:rgba(124,140,69,.08);
  font-size:.95rem;
}
.chip{
  display:inline-block;padding:5px 13px;border-radius:999px;
  background:rgba(70,128,31,.12);color:var(--brand-deep);
  font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
}

.doc-list{margin:0 0 14px;padding-left:20px}
.doc-list li{margin-bottom:10px;line-height:1.65;color:var(--ink-soft)}
.warn-list li{padding-left:6px}
.doc-steps{margin:0 0 14px;padding-left:22px}
.doc-steps li{margin-bottom:8px;color:var(--ink-soft)}

/* ---------- flow diagram ---------- */
.flow{display:flex;flex-direction:column;align-items:center;gap:0;margin:8px 0 6px}
.flow-node{
  width:100%;max-width:420px;text-align:center;
  padding:14px 20px;border-radius:16px;
  background:#fff;
  border:1px solid rgba(70,128,31,.20);
  box-shadow:0 4px 12px -8px rgba(48,78,46,.4);
}
.flow-node b{display:block;font-size:.98rem;font-weight:600;color:var(--ink)}
.flow-node span{display:block;margin-top:3px;font-size:.84rem;color:var(--ink-soft)}
.flow-node.accent{
  background:linear-gradient(180deg,#F4FBEA,#E4F3D2);
  border-color:rgba(70,128,31,.42);
}
.flow-node.muted-node{background:var(--paper-2);color:var(--ink-soft)}
.flow-node.small{padding:11px 16px}
.flow-split{display:flex;gap:14px;width:100%;max-width:420px}
.flow-split .flow-node{flex:1;max-width:none}
.flow-arrow{width:2px;height:22px;background:rgba(70,128,31,.28);position:relative}
.flow-arrow::after{
  content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:7px solid rgba(70,128,31,.45);
}

/* ---------- decay chart ---------- */
.decay-card{
  margin:6px 0 22px;padding:18px 18px 12px;
  border-radius:20px;background:#fff;
  border:1px solid rgba(70,128,31,.18);
  box-shadow:0 10px 26px -18px rgba(48,78,46,.5);
}
.decay-card svg{width:100%;height:auto;display:block;overflow:visible}
.decay-card .grid line{stroke:rgba(60,90,50,.14);stroke-width:1}
.decay-card .grid text{fill:var(--ink-soft);font-size:11px;text-anchor:end}
.decay-card figcaption{
  display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;
  padding-top:12px;font-size:.86rem;color:var(--ink-soft);
}

/* ---------- callouts / metrics ---------- */
.call-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0 22px}
.call{
  padding:16px 18px;border-radius:16px;
  background:#fff;border:1px solid rgba(70,128,31,.16);
  border-top:3px solid var(--brand);
}
.call b{display:block;font-size:.98rem;color:var(--ink)}
.call p{margin:7px 0 0;font-size:.92rem;line-height:1.6}

.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:18px 0 8px}
.metric{
  padding:18px 16px;border-radius:16px;
  background:linear-gradient(180deg,#FBFEF7,#EFF7E5);
  border:1px solid rgba(70,128,31,.2);
}
.metric b{
  display:block;font-size:1.35rem;font-weight:600;letter-spacing:-.03em;
  color:var(--brand-deep);font-variant-numeric:tabular-nums;
}
.metric span{display:block;margin-top:6px;font-size:.85rem;line-height:1.5;color:var(--ink-soft)}

/* ---------- tables ---------- */
.doc-table{width:100%;border-collapse:collapse;font-size:.95rem;margin:6px 0 20px}
.doc-table th{
  text-align:left;padding:10px 14px;
  font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--brand-soft);border-bottom:1px solid rgba(70,128,31,.22);
}
.doc-table td{padding:12px 14px;border-bottom:1px solid rgba(70,128,31,.10);color:var(--ink-soft)}
.doc-table tr:last-child td{border-bottom:0}
.doc-table tr.hl td{background:rgba(124,140,69,.10);color:var(--ink);font-weight:600}

/* ---------- faq ---------- */
.doc-sec details{
  border-radius:14px;background:#fff;
  border:1px solid rgba(70,128,31,.16);
  margin-bottom:10px;overflow:hidden;
}
.doc-sec summary{
  cursor:pointer;list-style:none;
  padding:15px 46px 15px 18px;position:relative;
  font-weight:600;color:var(--ink);
}
.doc-sec summary::-webkit-details-marker{display:none}
.doc-sec summary::after{
  content:"";position:absolute;right:20px;top:50%;
  width:9px;height:9px;margin-top:-6px;
  border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:rotate(45deg);transition:transform .2s ease;
}
.doc-sec details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.doc-sec details p{margin:0;padding:0 18px 16px;font-size:.95rem}

.doc-end{padding:44px 0 8px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .doc-shell{grid-template-columns:1fr;gap:26px;padding-top:28px}
  .doc-nav{position:static;order:2}
  .doc-body{order:1;max-width:none}
  .call-grid{grid-template-columns:1fr}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .metric-grid{grid-template-columns:1fr}
  .flow-split{flex-direction:column}
}