/* Docs-style desktop layout for the reading sections (assets/study-docs.js). Phones keep the plain page. */
.docs-toc,.docs-side{ display:none; }
.docs-grid{ display:block; }

/* Previous / next at the end of an article (all screen sizes): arrow badge + category + title; "Next" is tinted. */
.docs-pn{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:56px; padding-top:28px; border-top:1px solid var(--panel-border); }
.docs-pn-link{ display:flex; align-items:center; gap:14px; min-width:0; border:1px solid var(--panel-border); background:var(--panel); border-radius:14px;
  padding:16px 18px; text-decoration:none; transition:border-color .15s, background-color .15s, transform .15s; }
.docs-pn-link.next{ flex-direction:row-reverse; text-align:right;
  border-color:color-mix(in srgb, var(--accent) 35%, var(--panel-border)); background:color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.docs-pn-link:hover{ border-color:var(--accent); transform:translateY(-2px); }
.docs-pn-arrow{ flex-shrink:0; display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--accent) 45%, var(--panel-border)); color:var(--accent); transition:background-color .15s, color .15s, transform .15s; }
.docs-pn-arrow svg{ width:18px; height:18px; }
.docs-pn-link:hover .docs-pn-arrow{ background:var(--accent); color:var(--bg); }
.docs-pn-link.prev:hover .docs-pn-arrow{ transform:translateX(-3px); }
.docs-pn-link.next:hover .docs-pn-arrow{ transform:translateX(3px); }
.docs-pn-text{ min-width:0; }
.docs-pn-link small{ display:block; font-family:var(--font-mono); font-size:11px; color:var(--text-dim); margin-bottom:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.docs-pn-link small b{ color:var(--accent); font-weight:600; }
.docs-pn-link span.docs-pn-title{ display:block; font-family:var(--font-display); font-weight:600; color:var(--text); font-size:15px; line-height:1.35; }
@media (max-width:560px){ .docs-pn{ grid-template-columns:1fr; } .docs-pn > span:empty{ display:none; } }
@media (prefers-reduced-motion:reduce){ .docs-pn-link,.docs-pn-arrow{ transition:none; } .docs-pn-link:hover,.docs-pn-link:hover .docs-pn-arrow{ transform:none; } }

/* Topic pages: the article, with "On this page" docked on the right. */
@media (min-width:900px){
  .docs-grid{ display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:44px; max-width:1100px; margin:0 auto; padding:0 28px; align-items:start; }
  .docs-grid > .wrap{ max-width:760px; width:100%; margin:0 auto; padding-left:0; padding-right:0; }
  /* Never captures the mouse wheel (the page always scrolls); when the list is taller than the window,
     study-docs.js moves it to keep the section being read in view. */
  .docs-toc{ display:block; position:sticky; top:0; max-height:100vh; overflow:hidden; padding:72px 8px 32px 0; }
  .docs-toc[hidden]{ display:none; }
}
@media (min-width:1200px){
  .docs-grid{ grid-template-columns:minmax(0,1fr) 250px; gap:56px; max-width:1180px; }
}
.docs-toc-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:0 0 8px; }
.docs-toc-title{ font-family:var(--font-mono); font-size:12px; color:var(--text-dim); }
.docs-progress-pct{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim); }
.docs-progress{ height:3px; border-radius:2px; background:color-mix(in srgb, var(--text-dim) 25%, transparent); overflow:hidden; margin-bottom:12px; }
.docs-progress i{ display:block; height:100%; width:0; background:var(--accent); }
.docs-toc-list{ list-style:none; margin:0; padding:0; border-left:1px solid var(--panel-border); }
.docs-toc-list a{ display:block; padding:5px 0 5px 12px; margin-left:-1px; border-left:2px solid transparent; font-size:13px; line-height:1.4;
  color:var(--text-muted); text-decoration:none; }
.docs-toc-list a:hover{ color:var(--text); }
.docs-toc-list a.on{ color:var(--text); border-left-color:var(--accent); font-weight:600; }
.docs-toc-list a:focus-visible,.docs-pn-link:focus-visible,.docs-side-link:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
@media (min-width:900px) and (prefers-reduced-motion:no-preference){ html{ scroll-behavior:smooth; } }
.wrap h2{ scroll-margin-top:24px; }

/* Index page: category sidebar + two-column topic cards. */
.docs-cat + .docs-cat .category{ margin-top:32px; }
.docs-tier{ display:none; }
@media (min-width:1100px){
  /* Compact header (same spacing as the DSA list) so the topics start in the first screen. */
  body > .wrap:has(.docs-index){ max-width:1240px; padding-top:30px; }
  body > .wrap:has(.docs-index) > .back{ margin-bottom:14px; }
  body > .wrap:has(.docs-index) > h1{ font-size:36px; line-height:1.15; margin:0; }
  body > .wrap:has(.docs-index) > .sub{ margin:4px 0 20px; }
  body > .wrap:has(.docs-index) > .docs-priority{ padding:16px 20px; margin-bottom:24px; }
  body > .wrap:has(.docs-index) > .note{ margin-bottom:24px; }
  .docs-index{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:36px; align-items:start; margin-top:8px; }
  .docs-side{ display:block; position:sticky; top:24px; max-height:calc(100vh - 48px); overflow:auto; }
  .docs-side-title{ font-family:var(--font-mono); font-size:12px; color:var(--text-dim); margin:0 10px 8px; }
  .docs-side-link{ display:flex; justify-content:space-between; gap:8px; padding:8px 10px; border-radius:8px; border:1px solid transparent;
    color:var(--text-muted); font-size:13.5px; line-height:1.3; text-decoration:none; }
  .docs-side-link:hover{ background:var(--panel); color:var(--text); }
  .docs-side-link.on{ background:var(--panel); border-color:var(--panel-border); color:var(--text); font-weight:600; }
  .docs-side-count{ font-family:var(--font-mono); font-size:11.5px; color:var(--text-dim); font-weight:400; }
  .docs-cat{ scroll-margin-top:24px; }
  .docs-cat .category{ margin:0 0 12px; }
  .docs-cat + .docs-cat .category{ margin-top:32px; }
  .docs-grid-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .docs-grid-cards .topic-row{ margin:0; display:flex; align-items:center; justify-content:space-between; gap:12px; }
  /* Cards with a description (DSA Fundamentals): title above the description. */
  .docs-grid-cards .topic-row:has(.t-desc){ flex-direction:column; align-items:stretch; justify-content:flex-start; gap:6px; }
  .docs-grid-cards .topic-row:has(.t-desc) .t-title{ margin:0; }
  .docs-tier{ display:inline-block; flex-shrink:0; font-family:var(--font-mono); font-size:10.5px; border-radius:5px; padding:3px 7px; border:1px solid var(--panel-border); color:var(--text-dim); }
  .docs-tier.t1{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 45%, var(--panel-border)); }
  .docs-tier.t2{ color:var(--gold, #F0B429); border-color:color-mix(in srgb, var(--gold, #F0B429) 40%, var(--panel-border)); }
}

/* Index page: textured background (soft accent glow + fading dot grid + fine grain) and entrance motion.
   study-docs.js adds .docs-index-page to <body>, --i to each card, and .in to each category as it scrolls in. */
.docs-index-page::before,.docs-index-page::after{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; }
.docs-index-page::before{
  background:
    radial-gradient(900px 520px at 12% -12%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    radial-gradient(760px 460px at 105% 8%, color-mix(in srgb, var(--gold, #F0B429) 7%, transparent), transparent 70%);
}
.docs-index-page::after{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E"),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text-dim) 40%, transparent) 1px, transparent 1.5px) 0 0 / 22px 22px;
  -webkit-mask-image:linear-gradient(to bottom, #000 0, rgba(0,0,0,.55) 45%, rgba(0,0,0,.25) 100%);
          mask-image:linear-gradient(to bottom, #000 0, rgba(0,0,0,.55) 45%, rgba(0,0,0,.25) 100%);
}
.docs-index-page .topic-row{ position:relative; overflow:hidden; transition:border-color .2s, transform .2s, box-shadow .2s; }
.docs-index-page .topic-row::after{ content:""; position:absolute; inset:0; pointer-events:none; transform:translateX(-120%);
  background:linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--accent) 12%, transparent) 50%, transparent 70%); }
.docs-index-page .topic-row:hover{ transform:translateY(-2px);
  box-shadow:0 8px 24px -12px color-mix(in srgb, var(--accent) 45%, transparent); }
.docs-index-page .docs-priority{ background:color-mix(in srgb, var(--panel) 88%, transparent); backdrop-filter:blur(3px); }

@keyframes docs-up{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes docs-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes docs-shine{ to{ transform:translateX(120%); } }
@media (prefers-reduced-motion:no-preference){
  .docs-anim > .back,.docs-anim > h1,.docs-anim > .sub,.docs-anim > .docs-priority{ animation:docs-up .55s cubic-bezier(.2,.7,.2,1) backwards; }
  .docs-anim > h1{ animation-delay:.06s; }
  .docs-anim > .sub{ animation-delay:.12s; }
  .docs-anim > .docs-priority{ animation-delay:.18s; }
  .docs-anim .docs-side{ animation:docs-fade .6s .25s backwards; }
  .docs-anim .docs-cat:not(.in) .category,.docs-anim .docs-cat:not(.in) .topic-row{ opacity:0; }
  .docs-anim .docs-cat.in .category{ animation:docs-up .5s cubic-bezier(.2,.7,.2,1) backwards; }
  .docs-anim .docs-cat.in .topic-row{ animation:docs-up .5s cubic-bezier(.2,.7,.2,1) backwards; animation-delay:calc(var(--i, 0) * 55ms + 60ms); }
  .docs-index-page .topic-row:hover::after{ animation:docs-shine .7s ease; }
}
@media (prefers-reduced-motion:reduce){ .docs-index-page .topic-row:hover{ transform:none; } }