/* ===================================================================
   Fayda Docs — GitHub-docs-style technical documentation
   Light theme · copper accent · system sans
   =================================================================== */

:root{
  --ink:        #1f2733;
  --ink-2:      #3a4554;
  --muted:      #5f6b7a;
  --muted-2:    #8995a6;
  --canvas:     #fbfcfd;
  --subtle:     #f4f7fa;
  --subtle-2:   #eaeff5;
  --border:     #e3e8ef;
  --border-2:   #d2dae4;
  --copper:     #2f6feb;   /* accent (cool blue) */
  --copper-deep:#1f56c4;   /* link / text contrast */
  --copper-soft:#eaf1fd;
  --slate:      #2f6feb;
  --slate-soft: #eef3fd;
  --warn:       #d6485f;
  --warn-deep:  #b8324a;
  --warn-soft:  #fceef0;
  --ok:         #2f7d4f;
  --danger:     #b23b3b;

  --maxw: 1320px;
  --sidebar-w: 280px;
  --toc-w: 232px;
  --header-h: 60px;

  --radius: 8px;
  --radius-sm: 6px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "SFMono-Regular", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;

  --shadow-sm: 0 1px 2px rgba(22,22,26,.06), 0 1px 1px rgba(22,22,26,.04);
  --shadow-md: 0 4px 18px rgba(22,22,26,.10), 0 1px 3px rgba(22,22,26,.06);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{ color:var(--copper-deep); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:2px; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  height:var(--header-h);
  background:rgba(251,252,253,.85);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:18px;
  padding:0 22px;
}
.brand{ display:flex; align-items:center; gap:11px; flex-shrink:0; }
.brand img.mark{ width:30px; height:30px; display:block; }
.brand .titles{ display:flex; flex-direction:column; line-height:1.05; }
.brand .product{ display:flex; align-items:baseline; gap:7px; }
.brand .product b{ font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.brand .product span{
  font-size:15px; font-weight:600; color:var(--muted-2);
}
.brand .pub{ font-size:11px; color:var(--muted-2); letter-spacing:.02em; }
.brand:hover{ text-decoration:none; }

.header-spacer{ flex:1; }

.header-nav{ display:flex; align-items:center; gap:4px; }
.header-nav a{
  color:var(--ink-2); font-size:14px; font-weight:500;
  padding:7px 11px; border-radius:var(--radius-sm);
}
.header-nav a:hover{ background:var(--subtle-2); text-decoration:none; color:var(--ink); }

.ver-badge{
  font-size:12px; font-weight:600; color:var(--copper-deep);
  background:var(--copper-soft); border:1px solid #ecd9c4;
  padding:3px 9px; border-radius:99px;
}

/* ---------- Search ---------- */
.search{ position:relative; width:320px; max-width:38vw; }
.search input{
  width:100%; height:38px; border:1px solid var(--border-2);
  background:var(--subtle); border-radius:var(--radius);
  padding:0 12px 0 36px; font-family:var(--font); font-size:14px; color:var(--ink);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.search input:focus{
  outline:none; border-color:var(--copper); background:#fff;
  box-shadow:0 0 0 3px rgba(47,109,235,.16);
}
.search .icon{
  position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--muted-2); pointer-events:none;
}
.search .kbd{
  position:absolute; right:9px; top:50%; transform:translateY(-50%);
  font-family:var(--mono); font-size:11px; color:var(--muted-2);
  border:1px solid var(--border-2); border-radius:5px; padding:1px 6px; background:#fff;
}
.search-results{
  position:absolute; top:46px; left:0; right:0;
  background:#fff; border:1px solid var(--border-2); border-radius:var(--radius);
  box-shadow:var(--shadow-md); overflow:hidden; display:none; max-height:60vh; overflow-y:auto;
}
.search-results.open{ display:block; }
.sr-item{ display:block; padding:10px 14px; border-bottom:1px solid var(--subtle-2); cursor:pointer; }
.sr-item:last-child{ border-bottom:none; }
.sr-item:hover, .sr-item.active{ background:var(--copper-soft); text-decoration:none; }
.sr-item .sr-title{ font-size:14px; font-weight:600; color:var(--ink); }
.sr-item .sr-crumb{ font-size:12px; color:var(--muted); margin-top:1px; }
.sr-item mark{ background:#d9e7ff; color:var(--ink); border-radius:2px; }
.sr-empty{ padding:16px; color:var(--muted); font-size:14px; }

/* ---------- Layout ---------- */
.shell{
  display:grid; grid-template-columns:var(--sidebar-w) minmax(0,1fr) var(--toc-w);
  max-width:var(--maxw); margin:0 auto; align-items:start;
}
body[data-view="landing"] .shell{ display:none; }
body[data-view="doc"] .landing{ display:none; }

/* ---------- Sidebar ---------- */
.sidebar{
  position:sticky; top:var(--header-h);
  height:calc(100vh - var(--header-h));
  overflow-y:auto; padding:26px 14px 60px 22px;
  border-right:1px solid var(--border);
}
.nav-group{ margin-bottom:22px; }
.nav-group h4{
  margin:0 0 6px; padding:0 10px;
  font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted-2);
}
.nav-group a{
  display:block; padding:6px 10px; border-radius:var(--radius-sm);
  font-size:14px; color:var(--ink-2); line-height:1.35;
}
.nav-group a:hover{ background:var(--subtle-2); color:var(--ink); text-decoration:none; }
.nav-group a.active{
  background:var(--copper-soft); color:var(--copper-deep); font-weight:600;
  box-shadow:inset 2px 0 0 var(--copper);
}

/* ---------- Content ---------- */
.content{ padding:34px 52px 90px; min-width:0; }
.content-inner{ max-width:760px; }

.breadcrumb{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--muted); margin-bottom:14px; flex-wrap:wrap; }
.breadcrumb a{ color:var(--muted); }
.breadcrumb a:hover{ color:var(--copper-deep); }
.breadcrumb .sep{ color:var(--border-2); }
.breadcrumb .current{ color:var(--ink-2); font-weight:500; }

.page-title{ font-size:34px; line-height:1.15; font-weight:800; letter-spacing:-.02em; margin:2px 0 8px; }
.page-lede{ font-size:18px; color:var(--muted); margin:0 0 26px; line-height:1.55; }
.title-rule{ height:1px; background:linear-gradient(90deg,var(--border-2),transparent); border:0; margin:0 0 28px; }

/* prose */
.prose{ font-size:16px; }
.prose h2{ font-size:24px; font-weight:700; letter-spacing:-.01em; margin:42px 0 14px; padding-top:8px; }
.prose h3{ font-size:19px; font-weight:700; margin:30px 0 10px; }
.prose h4{ font-size:16px; font-weight:700; margin:22px 0 8px; color:var(--ink-2); }
.prose p{ margin:0 0 16px; }
.prose ul, .prose ol{ margin:0 0 16px; padding-left:24px; }
.prose li{ margin:5px 0; }
.prose li > ul, .prose li > ol{ margin:6px 0 4px; }
.prose strong{ font-weight:700; color:var(--ink); }
.prose a.ext::after{ content:"↗"; font-size:.82em; margin-left:2px; color:var(--muted-2); }
.prose hr{ border:0; border-top:1px solid var(--border); margin:34px 0; }

/* heading anchors */
.anchored{ position:relative; scroll-margin-top:calc(var(--header-h) + 18px); }
.anchor-link{
  position:absolute; left:-22px; top:0; width:20px;
  color:var(--copper); opacity:0; font-weight:400; text-align:center;
  transition:opacity .12s;
}
.anchored:hover .anchor-link{ opacity:.7; }
.anchor-link:hover{ opacity:1 !important; text-decoration:none; }

/* inline code */
.prose code{
  font-family:var(--mono); font-size:.86em;
  background:var(--subtle-2); border:1px solid var(--border);
  padding:.1em .38em; border-radius:5px; color:var(--copper-deep); white-space:nowrap;
}

/* code blocks (dark, branded) */
.code-block{ position:relative; margin:0 0 20px; }
.code-block pre{
  margin:0; background:#1e2531; color:#e7ebf1;
  border:1px solid #2d3644; border-radius:var(--radius);
  padding:16px 18px; overflow-x:auto; line-height:1.5;
}
.code-block code{
  font-family:var(--mono); font-size:13.5px; background:none; border:none;
  padding:0; color:inherit; white-space:pre;
}
.code-block .copy-btn{
  position:absolute; top:9px; right:9px; z-index:2;
  font-family:var(--font); font-size:12px; font-weight:600; color:#c4ccd8;
  background:#2d3644; border:1px solid #3a4556; border-radius:5px;
  padding:4px 10px; cursor:pointer; opacity:0; transition:opacity .14s, background .14s, color .14s;
}
.code-block:hover .copy-btn{ opacity:1; }
.code-block .copy-btn:hover{ background:#3a4556; color:#fff; }
.code-block .copy-btn.copied{ color:#7ee0a3; border-color:#2f6d49; background:#1f3a2a; opacity:1; }

/* tables */
.table-wrap{ margin:0 0 22px; overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); }
.prose table{ border-collapse:collapse; width:100%; font-size:14.5px; }
.prose thead th{
  background:var(--subtle-2); text-align:left; font-weight:700; color:var(--ink);
  padding:10px 14px; border-bottom:1px solid var(--border-2); white-space:nowrap;
}
.prose tbody td{ padding:10px 14px; border-bottom:1px solid var(--subtle-2); vertical-align:top; }
.prose tbody tr:last-child td{ border-bottom:none; }
.prose tbody tr:hover{ background:var(--subtle); }
.prose td code{ white-space:nowrap; }

/* callouts */
.callout{
  display:flex; gap:13px; margin:0 0 22px; padding:14px 16px;
  border:1px solid var(--border); border-left-width:4px; border-radius:var(--radius);
  background:var(--subtle);
}
.callout-note{ border-left-color:var(--slate); background:var(--slate-soft); }
.callout-warning{ border-left-color:var(--warn); background:var(--warn-soft); }
.callout-icon{ flex-shrink:0; width:20px; height:20px; margin-top:2px; }
.callout-note .callout-icon{ background:var(--slate); -webkit-mask:var(--icon-info) center/contain no-repeat; mask:var(--icon-info) center/contain no-repeat; }
.callout-warning .callout-icon{ background:var(--warn-deep); -webkit-mask:var(--icon-warn) center/contain no-repeat; mask:var(--icon-warn) center/contain no-repeat; }
.callout-body{ min-width:0; }
.callout-body > *:last-child{ margin-bottom:0; }
.callout-label{ font-weight:700; font-size:13px; letter-spacing:.02em; margin:0 0 4px; text-transform:uppercase; }
.callout-note .callout-label{ color:var(--slate); }
.callout-warning .callout-label{ color:var(--warn-deep); }
.callout p{ font-size:15px; }

/* prev / next */
.pager{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:50px; }
.pager a{
  display:flex; flex-direction:column; gap:3px; padding:16px 18px;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--canvas);
  transition:border-color .14s, box-shadow .14s, transform .14s;
}
.pager a:hover{ border-color:var(--copper); box-shadow:var(--shadow-sm); text-decoration:none; transform:translateY(-1px); }
.pager .dir{ font-size:12px; color:var(--muted-2); font-weight:600; letter-spacing:.03em; text-transform:uppercase; }
.pager .pg-title{ font-size:16px; font-weight:600; color:var(--ink); }
.pager .next{ text-align:right; }
.pager .empty{ visibility:hidden; }

/* feedback line */
.page-foot{ margin-top:40px; padding-top:18px; border-top:1px solid var(--border); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:13px; color:var(--muted); }
.page-foot a{ color:var(--muted); }
.page-foot a:hover{ color:var(--copper-deep); }

/* ---------- TOC ---------- */
.toc{
  position:sticky; top:var(--header-h);
  height:calc(100vh - var(--header-h));
  overflow-y:auto; padding:34px 22px 60px 8px;
}
.toc h5{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin:0 0 10px; }
.toc ul{ list-style:none; margin:0; padding:0; border-left:1px solid var(--border); }
.toc li a{
  display:block; padding:4px 0 4px 14px; margin-left:-1px;
  font-size:13px; color:var(--muted); line-height:1.4; border-left:2px solid transparent;
}
.toc li.lvl3 a{ padding-left:26px; font-size:12.5px; }
.toc li a:hover{ color:var(--ink); text-decoration:none; }
.toc li a.active{ color:var(--copper-deep); border-left-color:var(--copper); font-weight:600; }

/* ---------- Landing ---------- */
.landing{ max-width:var(--maxw); margin:0 auto; padding:0 22px; }
.hero{
  padding:78px 8px 58px; border-bottom:1px solid var(--border);
  max-width:1000px;
  display:flex; align-items:center; gap:54px;
}
.hero-text{ flex:1 1 0; min-width:0; max-width:600px; }
.hero-mark{ flex:0 0 auto; }
.hero-mark img{ width:268px; max-width:34vw; height:auto; display:block; }
.hero h1{ font-size:54px; line-height:1.06; font-weight:800; letter-spacing:-.03em; margin:0 0 20px; }
.hero h1 .hl{ color:var(--copper); }
.hero p{ font-size:19px; color:var(--muted); line-height:1.55; margin:0 0 28px; max-width:46ch; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:600;
  padding:11px 20px; border-radius:var(--radius); cursor:pointer; transition:.15s;
}
.btn-primary{ background:var(--ink); color:#fff; border:1px solid var(--ink); }
.btn-primary:hover{ background:#000; text-decoration:none; }
.btn-ghost{ background:#fff; color:var(--ink); border:1px solid var(--border-2); }
.btn-ghost:hover{ border-color:var(--copper); color:var(--copper-deep); text-decoration:none; }

.hero-card{
  background:#1b1b20; border:1px solid #2a2a31; border-radius:12px; overflow:hidden;
  box-shadow:var(--shadow-md); font-family:var(--mono); font-size:13px; color:#e9e6dd;
}
.hero-card .bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; border-bottom:1px solid #2a2a31; background:#202026; }
.hero-card .bar i{ width:11px; height:11px; border-radius:50%; display:block; }
.hero-card .bar .t{ margin-left:8px; font-family:var(--font); font-size:12px; color:#9b978c; }
.hero-card pre{ margin:0; padding:16px 18px; line-height:1.6; overflow-x:auto; }
.hero-card .c-dim{ color:#7d7a70; }
.hero-card .c-cop{ color:#e0a06a; }
.hero-card .c-grn{ color:#7ee0a3; }
.hero-card .c-red{ color:#e88; }

.section-head{ margin:54px 0 22px; }
.section-head h2{ font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin:0; }

.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.doc-card{
  display:flex; flex-direction:column; gap:7px; padding:20px;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--canvas);
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.doc-card:hover{ border-color:var(--copper); box-shadow:var(--shadow-md); transform:translateY(-2px); text-decoration:none; }
.doc-card .num{ font-family:var(--mono); font-size:12px; color:var(--copper); font-weight:600; }
.doc-card h3{ font-size:17px; font-weight:700; color:var(--ink); margin:0; }
.doc-card p{ font-size:14px; color:var(--muted); margin:0; line-height:1.5; }

.conventions{ margin:58px 0 30px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.conv{ padding:18px 20px; border:1px solid var(--border); border-radius:var(--radius); background:var(--subtle); }
.conv h4{ margin:0 0 6px; font-size:15px; }
.conv p{ margin:0; font-size:13.5px; color:var(--muted); line-height:1.5; }

.landing-foot{ border-top:1px solid var(--border); margin-top:60px; padding:30px 8px 60px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px; color:var(--muted); font-size:13px; }
.landing-foot .lf-brand{ display:flex; align-items:center; gap:10px; }
.landing-foot img{ width:24px; height:24px; }

/* ---------- Mobile ---------- */
.menu-toggle{ display:none; }
@media (max-width:1180px){
  :root{ --toc-w:0px; }
  .shell{ grid-template-columns:var(--sidebar-w) minmax(0,1fr); }
  .toc{ display:none; }
}
@media (max-width:920px){
  .hero{ flex-direction:column; align-items:flex-start; gap:30px; padding-top:44px; }
  .hero-mark img{ width:220px; max-width:62vw; }
  .hero h1{ font-size:40px; }
  .card-grid, .conventions{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .search{ display:none; }
  .header-nav{ display:none; }
  .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--border-2); border-radius:var(--radius-sm); background:var(--subtle); cursor:pointer; }
  .shell{ grid-template-columns:1fr; }
  .sidebar{
    position:fixed; left:0; top:var(--header-h); bottom:0; width:84vw; max-width:320px; z-index:55;
    background:#fff; border-right:1px solid var(--border); transform:translateX(-104%); transition:transform .22s ease;
    box-shadow:var(--shadow-md);
  }
  body.nav-open .sidebar{ transform:translateX(0); }
  .nav-scrim{ position:fixed; inset:var(--header-h) 0 0; background:rgba(22,22,26,.32); z-index:54; opacity:0; pointer-events:none; transition:opacity .2s; }
  body.nav-open .nav-scrim{ opacity:1; pointer-events:auto; }
  .content{ padding:26px 20px 70px; }
  .page-title{ font-size:28px; }
  .pager{ grid-template-columns:1fr; }
  .card-grid, .conventions{ grid-template-columns:1fr; }
  .hero h1{ font-size:34px; }
  .hero-mark img{ width:178px; }
}
@media (min-width:761px){ .nav-scrim{ display:none; } }