/* ============================================================
   LIPIKA — docs.css
   Documentation portal: 3-column manuscript layout
   ============================================================ */

.docs-hero{padding:calc(var(--nav-h) + 56px) 0 36px;background:var(--grad-soft);border-bottom:1px solid var(--border)}
.docs-hero h1{font-size:clamp(2rem,4vw,2.9rem)}
.docs-hero p{max-width:560px;margin-top:12px}

.docs-layout{
  display:grid;grid-template-columns:264px minmax(0,1fr) 232px;
  gap:48px;align-items:start;padding:48px 0 96px;
}

/* ---- Left sidebar ---- */
.docs-side{
  position:sticky;top:calc(var(--nav-h) + 20px);
  max-height:calc(100vh - var(--nav-h) - 40px);overflow-y:auto;
  padding-right:18px;border-right:1px solid var(--border);
  background:var(--surface-2);
  border-radius:14px;padding:18px;
  /* faint palm-leaf ruling */
  background-image:repeating-linear-gradient(180deg,transparent 0 30px,var(--line-faint) 30px 31px);
}
.docs-side-toggle{display:none;align-items:center;gap:8px;margin-bottom:18px;font-weight:600;font-size:.9rem;padding:10px 16px;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.docs-side-toggle svg{width:16px;height:16px}
.sidebar-search{position:relative;margin-bottom:18px}
.sidebar-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--text-faint)}
.sidebar-search input{
  width:100%;padding:9px 12px 9px 36px;border-radius:10px;font-size:.87rem;
  background:var(--surface);border:1px solid var(--border);color:var(--text);
  transition:border-color .25s,box-shadow .25s;
}
.sidebar-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.docs-group{margin-bottom:6px}
.docs-group-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:9px 10px;border-radius:9px;
  font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);
  transition:color .2s;
}
.docs-group-toggle:hover{color:var(--text)}
.docs-group-toggle svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.docs-group.collapsed .docs-group-toggle svg{transform:rotate(-90deg)}
.docs-links{display:flex;flex-direction:column;gap:1px;overflow:hidden;max-height:400px;transition:max-height .4s var(--ease),opacity .3s}
.docs-group.collapsed .docs-links{max-height:0;opacity:0}
.docs-links a{
  position:relative;display:block;padding:8px 12px;border-radius:8px;
  font-size:.89rem;color:var(--text-muted);
  border-left:2px solid transparent;
  transition:all .2s;
}
.docs-links a:hover{color:var(--text);background:var(--accent-soft)}
.docs-links a.active{color:var(--accent);font-weight:600;border-left-color:var(--accent);background:var(--accent-soft)}
.docs-links a.hidden-by-filter{display:none}
.docs-no-results{display:none;padding:12px;font-size:.85rem;color:var(--text-faint)}

/* ---- Center content: modern palm-leaf manuscript ---- */
.docs-main{min-width:0}
.docs-main .doc-section{
  padding:34px 0 42px;border-bottom:1px solid var(--border);
}
.docs-main .doc-section:first-child{padding-top:0}
.docs-main h2{font-size:1.7rem;margin-bottom:16px;display:flex;align-items:center;gap:12px}
.docs-main h2::before{ /* small Konark tick */
  content:"";flex:none;width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--gold);
  background:
    repeating-conic-gradient(var(--gold) 0deg 8deg,transparent 8deg 45deg);
  -webkit-mask:radial-gradient(circle,transparent 0 30%,#000 32%);
          mask:radial-gradient(circle,transparent 0 30%,#000 32%);
  opacity:.8;
}
.docs-main h3{font-size:1.18rem;margin:26px 0 10px}
.docs-main p{margin-bottom:14px;font-size:.96rem}
.docs-main ul.doc-list{margin:0 0 16px 4px;display:flex;flex-direction:column;gap:8px}
.docs-main ul.doc-list li{position:relative;padding-left:24px;font-size:.95rem;color:var(--text-muted)}
.docs-main ul.doc-list li::before{
  content:"";position:absolute;left:2px;top:9px;width:8px;height:8px;
  border-radius:50%;border:2px dotted var(--gold);
}
.docs-main .code-block{margin:16px 0}
.docs-main .callout{margin:18px 0}
.docs-main .doc-table{margin:16px 0}

/* Numbered steps */
.steps{display:flex;flex-direction:column;gap:14px;margin:18px 0}
.step{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px}
.step-num{
  flex:none;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.9rem;
  background:var(--grad-accent);color:#FFF8F0;
}
.step p{margin:0;font-size:.92rem}
.step p strong{display:block;margin-bottom:3px}

/* ---- Right TOC ---- */
.docs-toc{position:sticky;top:calc(var(--nav-h) + 20px);font-size:.85rem}
.docs-meta{
  border:1px solid var(--border);border-radius:14px;background:var(--surface);
  padding:16px 18px;margin-bottom:22px;display:flex;flex-direction:column;gap:9px;
}
.docs-meta .row{display:flex;justify-content:space-between;color:var(--text-faint)}
.docs-meta .row b{color:var(--text-muted);font-weight:600}
.toc-title{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:10px}
.toc-list{display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--border)}
.toc-list a{
  display:block;padding:5px 0 5px 14px;margin-left:-1px;
  border-left:2px solid transparent;color:var(--text-faint);
  transition:all .2s;font-size:.84rem;
}
.toc-list a:hover{color:var(--text)}
.toc-list a.active{color:var(--accent);border-left-color:var(--accent);font-weight:600}
.feedback{margin-top:26px;border:1px dashed var(--border-strong);border-radius:14px;padding:16px;text-align:center}
.feedback p{font-size:.85rem;font-weight:600;color:var(--text-muted);margin-bottom:12px}
.feedback .fb-btns{display:flex;gap:10px;justify-content:center}
.feedback button{
  width:42px;height:42px;border-radius:12px;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;background:var(--surface);
  color:var(--text-muted);transition:all .25s var(--ease);
}
.feedback button svg{width:18px;height:18px}
.feedback button:hover{transform:translateY(-2px);border-color:var(--gold);color:var(--gold)}
.feedback .fb-thanks{display:none;font-size:.87rem;color:var(--success);font-weight:600}
.feedback.done .fb-btns,.feedback.done p{display:none}
.feedback.done .fb-thanks{display:block}