/* Maivas docs. Structure emulates a GitBook docs shell (left nav, content, on-this-page).
   Design tokens and fonts are taken verbatim from the Maivas marketing site so the docs
   read as the same product. Fonts are referenced from the site's own /assets/fonts. */

@font-face{font-family:Fraunces;font-style:normal;font-weight:300 900;font-display:swap;src:url('../../assets/fonts/fraunces-variable.woff2') format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:300 900;font-display:swap;src:url('../../assets/fonts/inter-variable.woff2') format('woff2')}
@font-face{font-family:'Inter-fallback';src:local('Arial'),local('Helvetica'),local('sans-serif');size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%}

:root{
  --lime-wash:#E8DDC9; --lime-wash-soft:#EDE4D3; --lime-wash-deep:#DCD0B7;
  --travertine:#D4C5A9; --sage:#C9D1BC; --sage-mid:#A8B89C; --sage-deep:#6E8770;
  --plum:#6B4C8C; --plum-bright:#7C5295; --plum-deep:#3F2647;
  --ink:#2A2530; --ink-soft:#4A4248; --ink-mute:#847A75; --brass:#A8884F;
  --font-serif:"Fraunces","Times New Roman",serif;
  --font-sans:"Inter","Inter-fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --canvas:#F2EDE4;             /* page background, matched to the Maivas app canvas */
  --surface:#FCFAF5;            /* warm near-white content surface for long-form reading */
  --line:rgba(42,37,48,.12);
  --line-soft:rgba(42,37,48,.08);
  --sidebar-w:280px; --toc-w:220px; --header-h:64px; --container:1400px;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0; background:var(--canvas); color:var(--ink-soft);
  font-family:var(--font-sans); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:var(--plum); text-decoration:none}
a:hover{color:var(--plum-bright); text-decoration:underline; text-underline-offset:3px}

/* ---------- Header ---------- */
.doc-header{
  position:sticky; top:0; z-index:40; height:var(--header-h);
  display:flex; align-items:center; gap:1rem;
  padding:0 clamp(1rem,3vw,2rem);
  background:rgba(242,237,228,.85); backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line);
}
.doc-header .brand{display:flex; align-items:center; flex-shrink:0}
.doc-header .brand img{height:28px; width:auto; display:block}
.doc-header .doc-tag{
  font-family:var(--font-serif); font-weight:500; color:var(--plum-deep);
  font-size:1.02rem; letter-spacing:.01em; padding-left:.7rem; margin-left:.5rem;
  border-left:1px solid var(--line); flex-shrink:0;
}
.doc-header .doc-tag:hover{color:var(--plum); text-decoration:none}
.doc-header .spacer{flex:1}
.doc-header .to-app{
  font-size:.86rem; font-weight:600; color:#fff; background:var(--plum);
  padding:.5rem .9rem; border-radius:999px; white-space:nowrap;
}
.doc-header .to-app:hover{background:var(--plum-bright); text-decoration:none}
.doc-search{
  flex:1; max-width:420px; position:relative;
}
.doc-search input{
  width:100%; font-family:var(--font-sans); font-size:.9rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:.5rem .8rem .5rem 2rem;
}
.doc-search input:focus{outline:none; border-color:var(--sage-mid); box-shadow:0 0 0 3px rgba(110,135,112,.15)}
.doc-search::before{content:""; position:absolute; left:.7rem; top:50%; width:14px; height:14px; transform:translateY(-50%);
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23847A75' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); opacity:.8}
.search-results{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 20px 50px -20px rgba(42,37,48,.35); overflow:hidden; display:none;
}
.search-results.open{display:block}
.search-results a{display:block; padding:.6rem .85rem; color:var(--ink); border-bottom:1px solid var(--line-soft); font-size:.9rem}
.search-results a:hover{background:var(--lime-wash-soft); text-decoration:none}
.search-results a small{display:block; color:var(--ink-mute); font-size:.75rem; margin-top:.1rem}
.search-results .empty{padding:.7rem .85rem; color:var(--ink-mute); font-size:.85rem}

/* ---------- Layout ---------- */
.doc-shell{
  display:grid; grid-template-columns:var(--sidebar-w) minmax(0,1fr) var(--toc-w);
  gap:0; max-width:var(--container); margin:0 auto;
}
.doc-sidebar{
  position:sticky; top:var(--header-h); align-self:start;
  height:calc(100vh - var(--header-h)); overflow-y:auto;
  padding:1.6rem 1rem 3rem 0; border-right:1px solid var(--line);
}
.doc-sidebar .nav-group{margin-bottom:1.4rem}
.doc-sidebar .nav-group > h4{
  font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.09em;
  font-size:.72rem; font-weight:700; color:var(--ink-mute);
  margin:0 0 .5rem .9rem;
}
.doc-sidebar a{
  display:block; padding:.4rem .9rem; margin:1px 0; border-radius:8px;
  color:var(--ink-soft); font-size:.9rem; font-weight:500; line-height:1.35;
}
.doc-sidebar a:hover{background:var(--lime-wash-soft); color:var(--ink); text-decoration:none}
.doc-sidebar a.active{background:rgba(107,76,140,.12); color:var(--plum-deep); font-weight:600}

.doc-main{min-width:0; padding:2.4rem clamp(1.5rem,4vw,3.5rem) 4rem}
.doc-article{max-width:760px}
.breadcrumb{font-size:.8rem; color:var(--ink-mute); margin-bottom:1rem}
.breadcrumb a{color:var(--ink-mute)}
.breadcrumb span{color:var(--ink-soft)}

/* ---------- Content typography ---------- */
.doc-article h1{
  font-family:var(--font-serif); font-weight:500; color:var(--ink);
  font-size:clamp(2rem,4vw,2.6rem); line-height:1.12; letter-spacing:-.01em;
  margin:0 0 1rem;
}
.doc-article h2{
  font-family:var(--font-serif); font-weight:500; color:var(--plum-deep);
  font-size:1.5rem; line-height:1.2; margin:2.6rem 0 .8rem;
  padding-top:.6rem; scroll-margin-top:calc(var(--header-h) + 1rem);
}
.doc-article h3{
  font-family:var(--font-sans); font-weight:700; color:var(--ink);
  font-size:1.1rem; margin:1.8rem 0 .6rem; scroll-margin-top:calc(var(--header-h) + 1rem);
}
.doc-article p{margin:0 0 1.05rem}
.doc-article ul,.doc-article ol{margin:0 0 1.15rem; padding-left:1.3rem}
.doc-article li{margin:.35rem 0}
.doc-article li::marker{color:var(--sage-deep)}
.doc-article strong{color:var(--ink); font-weight:700}
.doc-article a{font-weight:500; text-decoration:underline; text-decoration-color:rgba(107,76,140,.35); text-underline-offset:2px}
.doc-article a:hover{text-decoration-color:var(--plum-bright)}
.doc-article hr{border:none; border-top:1px solid var(--line); margin:2.4rem 0}
.doc-article blockquote{
  margin:0 0 1.15rem; padding:.2rem 0 .2rem 1.1rem;
  border-left:3px solid var(--sage-mid); color:var(--ink-soft); font-style:italic;
}
.doc-article code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.86em;
  background:var(--lime-wash-deep); color:var(--plum-deep);
  padding:.12em .38em; border-radius:5px;
}
.doc-article pre{
  background:var(--ink); color:#EFE9DF; padding:1rem 1.15rem; border-radius:12px;
  overflow-x:auto; margin:0 0 1.2rem; font-size:.85rem; line-height:1.6;
}
.doc-article pre code{background:none; color:inherit; padding:0}

/* Tables */
.doc-article .table-wrap{overflow-x:auto; margin:0 0 1.4rem; border:1px solid var(--line); border-radius:12px}
.doc-article table{border-collapse:collapse; width:100%; font-size:.88rem; background:var(--surface)}
.doc-article th,.doc-article td{text-align:left; padding:.6rem .8rem; border-bottom:1px solid var(--line-soft); vertical-align:top}
.doc-article thead th{background:var(--sage);/**/ color:var(--plum-deep); font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em}
.doc-article tbody tr:last-child td{border-bottom:none}
.doc-article tbody tr:hover{background:var(--lime-wash-soft)}

/* Meta line under H1 (version / updated) */
.doc-meta{font-size:.82rem; color:var(--ink-mute); margin:-.4rem 0 1.8rem; padding-bottom:1.4rem; border-bottom:1px solid var(--line)}

/* Prev / next */
.doc-nav-footer{display:flex; gap:1rem; margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--line)}
.doc-nav-footer a{
  flex:1; padding:.9rem 1.1rem; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); text-decoration:none; transition:border-color .2s var(--ease-out)}
.doc-nav-footer a:hover{border-color:var(--sage-mid); text-decoration:none}
.doc-nav-footer a.next{text-align:right}
.doc-nav-footer .dir{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-mute)}
.doc-nav-footer .ttl{display:block; font-weight:600; color:var(--plum-deep); margin-top:.15rem}

/* ---------- On this page ---------- */
.doc-toc{position:sticky; top:var(--header-h); align-self:start; height:calc(100vh - var(--header-h));
  overflow-y:auto; padding:2.4rem 1rem 3rem; font-size:.82rem}
.doc-toc h5{text-transform:uppercase; letter-spacing:.09em; font-size:.7rem; color:var(--ink-mute); margin:0 0 .7rem}
.doc-toc a{display:block; padding:.25rem 0; color:var(--ink-mute); border-left:2px solid transparent; padding-left:.7rem}
.doc-toc a.sub{padding-left:1.4rem; font-size:.78rem}
.doc-toc a:hover{color:var(--ink); text-decoration:none}
.doc-toc a.active{color:var(--plum); border-left-color:var(--plum)}

/* ---------- Docs landing ---------- */
.doc-hero{max-width:760px; margin:0 0 2.4rem}
.doc-hero .eyebrow{font-size:.78rem; text-transform:uppercase; letter-spacing:.12em; color:var(--sage-deep); font-weight:700}
.doc-hero h1{font-family:var(--font-serif); font-weight:500; color:var(--ink); font-size:clamp(2.2rem,5vw,3rem); line-height:1.1; margin:.6rem 0 .8rem}
.doc-hero p{font-size:1.1rem; color:var(--ink-soft); margin:0}
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin-top:1.5rem}
.doc-card{display:block; padding:1.2rem 1.3rem; background:var(--surface); border:1px solid var(--line); border-radius:16px; transition:border-color .2s var(--ease-out),transform .2s var(--ease-out)}
.doc-card:hover{border-color:var(--sage-mid); transform:translateY(-2px); text-decoration:none}
.doc-card h3{font-family:var(--font-serif); font-weight:600; color:var(--plum-deep); margin:0 0 .3rem; font-size:1.15rem}
.doc-card p{margin:0; font-size:.88rem; color:var(--ink-mute)}
.doc-card ul{margin:.6rem 0 0; padding:0; list-style:none}
.doc-card li{font-size:.85rem; padding:.15rem 0; color:var(--ink-soft)}

/* ---------- Mobile ---------- */
.menu-toggle{display:none; background:none; border:1px solid var(--line); border-radius:9px; padding:.4rem .55rem; cursor:pointer}
.menu-toggle svg{display:block; width:20px; height:20px; stroke:var(--ink)}
.sidebar-scrim{display:none; position:fixed; inset:var(--header-h) 0 0; background:rgba(42,37,48,.4); z-index:35}

@media(max-width:1080px){
  .doc-shell{grid-template-columns:var(--sidebar-w) minmax(0,1fr)}
  .doc-toc{display:none}
}
@media(max-width:820px){
  .doc-shell{grid-template-columns:1fr}
  .menu-toggle{display:inline-flex}
  .doc-search{display:none}
  .doc-sidebar{position:fixed; top:var(--header-h); left:0; bottom:0; width:var(--sidebar-w); max-width:84vw;
    background:var(--canvas); z-index:38; transform:translateX(-100%); transition:transform .25s var(--ease-out);
    padding:1.4rem 1rem; border-right:1px solid var(--line)}
  .doc-sidebar.open{transform:translateX(0)}
  body.nav-open .sidebar-scrim{display:block}
  .doc-main{padding:1.8rem 1.3rem 3rem}
}