/* ==========================================================================================
   Everstock Read mode: the page layer for /privacy, /terms, /support, /docs and /docs/<slug>.
   Loaded after /site.css, which carries the tokens, type, buttons, nav and footer.

   One template: a forest header band (breadcrumb, h1, lede or meta line), then a two-column read
   grid that starts on the nav's left edge. Left, a sticky aside (the legal "On this page" list, or the docs category rail). Right,
   one white sheet whose text runs at a 68 to 72 character measure. On desktop the sheet crosses
   the band edge by 48px, the same crossing the landing's hero card makes. Every h2 in the sheet
   is a scan event on the thread (12px dot + 2px rule).
   ========================================================================================== */

.read{
  --rail:15rem;
  --sheet-pad:var(--s-7);
  --measure:32.5em;
  --sheet:calc(var(--measure) + 2 * var(--sheet-pad) + 2px);
  --cross:var(--s-7);
}
@media (max-width:767.98px){ .read{ --sheet-pad:20px } }

/* ---------- header band ---------- */
.page-head{padding-block:var(--s-8) var(--s-8)}
.read:has(.read-layout) .page-head{padding-bottom:calc(var(--s-8) + var(--cross))}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-2);font-size:15px;color:var(--on-brand-2)}
.crumb li{display:inline-flex;align-items:center;gap:var(--s-2)}
.crumb li + li::before{content:"/";color:var(--on-brand-2)}
.crumb a{color:#fff;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.45)}
.crumb a:hover{text-decoration-color:#fff}
.page-head h1{margin-top:var(--s-4);font-family:var(--display);font-weight:700;font-size:clamp(2.25rem,4vw,3.5rem);line-height:1.04;letter-spacing:-.01em;color:#fff;max-width:24ch}
.page-head .lede{margin-top:var(--s-4);font-size:17px;line-height:1.5;color:var(--on-brand-2);max-width:60ch}
@media (min-width:768px){ .page-head .lede{font-size:19px} }
.page-meta{margin-top:var(--s-4);font-size:15px;color:var(--on-brand-2)}

/* ---------- the read grid: aside + sheet, shared by the band text and the asides after main ---------- */
.read-layout,.read-after,.read:has(.read-layout) .page-head-inner{
  display:grid;grid-template-columns:var(--rail) minmax(0,var(--sheet));column-gap:var(--s-7);justify-content:start}
.read:has(.read-layout) .page-head-inner > *,.read-after > *{grid-column:2}
.read-layout{align-items:start;margin-top:calc(-1 * var(--cross));padding-bottom:var(--s-8)}
.read-sheet{grid-column:2;grid-row:1;min-width:0;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:var(--sheet-pad)}
.read-aside{grid-column:1;grid-row:1;position:sticky;top:88px;margin-top:calc(var(--cross) + var(--s-6));
  max-height:calc(100vh - 112px);overflow-y:auto;overscroll-behavior:contain;padding-right:var(--s-2);padding-bottom:var(--s-6);
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - var(--s-6)),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - var(--s-6)),transparent)}
.read-aside-head{font-size:13px;font-weight:600;line-height:1.3;color:var(--ink);margin-bottom:var(--s-2)}
.read-aside a{display:block;padding:6px 0;font-size:15px;line-height:1.35;color:var(--ink-2);transition:color .16s var(--ease)}
.read-aside a:hover{color:var(--brand)}

/* legal table of contents */
.read-toc ol{border-top:1px solid var(--rule)}
.read-toc li{border-bottom:1px solid var(--rule)}
.read-toc a{padding:8px 0}

/* docs category rail: the current guide carries the event dot */
.docs-rail-group + .docs-rail-group{margin-top:var(--s-5)}
.docs-rail a{position:relative;padding-left:20px}
.docs-rail a::before{content:"";position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;box-shadow:inset 0 0 0 1px #AEB5B0}
.docs-rail a[aria-current="page"]{color:var(--ink);font-weight:600}
.docs-rail a[aria-current="page"]::before{background:var(--brand);box-shadow:none}

@media (max-width:1023.98px){
  .read-layout,.read-after,.read:has(.read-layout) .page-head-inner{grid-template-columns:minmax(0,1fr)}
  .read:has(.read-layout) .page-head-inner > *,.read-after > *,.read-sheet,.read-aside{grid-column:1}
  .read:has(.read-layout) .page-head{padding-bottom:var(--s-7)}
  .read-layout{margin-top:0;padding-top:var(--s-6);row-gap:var(--s-6)}
  .read-aside{position:static;max-height:none;overflow:visible;margin-top:0;padding-right:0;padding-bottom:0;grid-row:auto;-webkit-mask-image:none;mask-image:none}
  .read-sheet{grid-row:auto}
  .read-toc{order:-1}
  .docs-rail{order:2;padding-top:var(--s-5);border-top:1px solid var(--rule)}
}
@media (max-width:767.98px){
  .page-head{padding-block:var(--s-6)}
  .read:has(.read-layout) .page-head{padding-bottom:var(--s-6)}
  .read-layout{padding-top:var(--s-5);row-gap:var(--s-5)}
}

/* ==========================================================================================
   Prose: legal sections and rendered docs markdown
   ========================================================================================== */
.prose{font-size:17px;line-height:1.65;color:var(--ink)}
.prose > :first-child,.prose .read-intro > :first-child,.read-sec > :first-child{margin-top:0}
.prose p,.prose ul,.prose ol,.prose pre,.prose .table-wrap,.prose table{margin-top:var(--s-4)}
.prose p,.prose li{max-width:var(--measure)}
.prose strong,.prose b{font-weight:600}
.prose em{font-style:italic}
.prose a:not(.btn),.prose-link{color:var(--brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.prose a:not(.btn):hover{color:var(--brand-deep);text-decoration-thickness:2px}

/* h2: a scan event on the thread */
.prose h2{position:relative;margin-top:var(--s-8);padding-top:var(--s-6);
  font-family:var(--display);font-weight:600;font-size:clamp(1.625rem,2.2vw,1.875rem);line-height:1.15;letter-spacing:-.005em;color:var(--ink)}
.prose h2::before{content:"";position:absolute;left:0;top:0;width:var(--dot);height:var(--dot);border-radius:50%;background:var(--ink)}
.prose h2::after{content:"";position:absolute;left:var(--dot);right:0;top:5px;height:var(--thread);background:var(--ink)}
.read-sec{margin-top:var(--s-8)}
.read-sec > h2{margin-top:0}
.prose h3{margin-top:var(--s-6);font-family:var(--sans);font-weight:600;font-size:1.25rem;line-height:1.3;color:var(--ink)}
.prose h4{margin-top:var(--s-5);font-weight:600;font-size:17px}
.prose :is(h2,h3,h4) + :is(p,ul,ol,pre,table,.table-wrap,blockquote){margin-top:var(--s-3)}
@media (min-width:768px){ .read-intro p:first-child{font-size:19px;line-height:1.55} }

.prose ul > li,.prose ol > li{position:relative;padding-left:24px}
.prose li + li{margin-top:var(--s-2)}
.prose li > ul,.prose li > ol{margin-top:var(--s-2)}
.prose ul > li::before{content:"";position:absolute;left:4px;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.prose ol{counter-reset:item}
.prose ol > li{counter-increment:item}
.prose ol > li::before{content:counter(item) ".";position:absolute;left:0;top:0;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink-2)}

.prose code{font-family:var(--mono);font-size:.88em;font-weight:500;background:var(--ground);border:1px solid var(--rule);border-radius:var(--radius-pill);padding:.05em .35em;overflow-wrap:anywhere}
.prose pre{background:var(--ground);border:1px solid var(--rule);border-radius:var(--radius);padding:var(--s-4) 20px;overflow-x:auto;font-family:var(--mono);font-size:15px;line-height:1.55}
.prose pre code{background:none;border:0;padding:0;font-size:inherit;overflow-wrap:normal}

/* callout: a markdown blockquote reads as a tinted note */
.prose blockquote{margin-top:var(--s-5);padding:var(--s-4) 20px;background:var(--brand-tint);border-radius:var(--radius);color:var(--ink)}
.prose blockquote > :first-child{margin-top:0}
.prose hr{border:0;border-top:1px solid var(--rule);margin-block:var(--s-7)}
.prose img{max-width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--rule)}

/* tables: the legal renderer wraps them; markdown tables scroll on their own */
.prose .table-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--radius)}
.prose .table-wrap table{min-width:560px}
.docs-prose table{display:block;overflow-x:auto;border:1px solid var(--rule);border-radius:var(--radius)}
.prose th{font-size:13px;font-weight:600;line-height:1.35;color:var(--ink-2);text-align:left;vertical-align:bottom;background:var(--ground);padding:10px 12px;border-bottom:1px solid var(--rule)}
.prose td{font-size:15px;line-height:1.5;vertical-align:top;padding:12px;border-bottom:1px solid var(--rule)}
.prose tr:last-child td{border-bottom:0}
.prose th + th,.prose td + td{border-left:1px solid var(--rule)}
/* Phones: a legal table's rows become stacked records, each cell labelled with its column header
   (data-label from the legal renderer), so nothing is cut off behind a sideways scroll. */
@media (max-width:767.98px){
  .prose .table-wrap{overflow:visible}
  .prose .table-wrap table{min-width:0;width:100%;border-collapse:collapse}
  .prose .table-wrap thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .prose .table-wrap tr{display:block;padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--rule)}
  .prose .table-wrap tr:last-child{border-bottom:0}
  .prose .table-wrap td{display:block;padding:var(--s-1) 0;border:0}
  .prose .table-wrap td + td{border-left:0}
  .prose .table-wrap td::before{content:attr(data-label);display:block;font-size:13px;font-weight:600;line-height:1.35;color:var(--ink-2);margin-bottom:2px}
}

mark.todo{background:var(--rev-bg);color:var(--rev-fg);padding:0 .2em;border-radius:2px}

/* ---------- docs guide: on-page contents at the top of the sheet ---------- */
.docs-toc{margin-bottom:var(--s-7)}
.docs-toc-head{font-size:13px;font-weight:600;line-height:1.3;color:var(--ink);margin-bottom:var(--s-2)}
.docs-toc ul{border-top:1px solid var(--rule)}
.docs-toc li{border-bottom:1px solid var(--rule)}
.docs-toc li[data-depth="3"] a{padding-left:var(--s-4)}
.docs-toc a{display:block;padding:8px 0;font-size:15px;line-height:1.35;color:var(--ink-2);transition:color .16s var(--ease)}
.docs-toc a:hover{color:var(--brand)}

/* ---------- docs guide: pager + closing line ---------- */
.docs-pager-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gutter)}
.docs-pager-link{display:grid;row-gap:var(--s-1);align-content:start;height:100%;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);padding:var(--s-4) 20px;transition:border-color .16s var(--ease)}
.docs-pager-link:hover{border-color:var(--brand)}
.docs-pager-next{text-align:right}
.docs-pager-dir{font-size:13px;font-weight:600;color:var(--ink-2)}
.docs-pager-title{font-weight:600;line-height:1.3;color:var(--ink)}
.docs-pager-link:hover .docs-pager-title{color:var(--brand)}
.docs-foot-cta{padding-top:var(--s-6);padding-bottom:var(--s-9)}
.docs-foot-cta p{font-size:15px;color:var(--ink-2)}
@media (max-width:767.98px){
  .docs-pager-inner{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
  .docs-pager-inner > span:empty{display:none}
  .docs-pager-next{text-align:left}
  .docs-foot-cta{padding-bottom:var(--s-7)}
}

/* ---------- docs hub: one thread row per category ---------- */
.docs-hub{padding-top:var(--s-8);padding-bottom:var(--s-2)}
.docs-hub-group{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s-4);padding-top:var(--s-6)}
.docs-hub-group + .docs-hub-group{margin-top:var(--s-7)}
.docs-hub-group::before{content:"";position:absolute;left:0;top:0;width:var(--dot);height:var(--dot);border-radius:50%;background:var(--ink)}
.docs-hub-group::after{content:"";position:absolute;left:var(--dot);right:0;top:5px;height:var(--thread);background:var(--ink)}
.docs-hub-head{grid-column:1 / span 4}
.docs-hub-head h2{font-size:clamp(1.625rem,2.2vw,1.875rem);line-height:1.15}
.docs-hub-head .secondary{margin-top:var(--s-1)}
.docs-hub-list{grid-column:5 / span 8;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden}
.docs-hub-list li + li{border-top:1px solid var(--rule)}
.docs-hub-list a{display:grid;row-gap:2px;padding:var(--s-4) var(--s-5);transition:background-color .16s var(--ease)}
.docs-hub-list a:hover{background:var(--ground)}
.docs-hub-title{font-weight:600;line-height:1.35;color:var(--ink)}
.docs-hub-list a:hover .docs-hub-title{color:var(--brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.docs-hub-desc{font-size:15px;line-height:1.5;color:var(--ink-2);max-width:68ch}
.docs-hub-list a:focus-visible{outline-offset:-2px}
@media (max-width:1023.98px){
  .docs-hub-head,.docs-hub-list{grid-column:1 / -1}
}
@media (max-width:767.98px){
  .docs-hub{padding-top:var(--s-7)}
  .docs-hub-list a{padding:var(--s-4) 20px}
}