/* picodl — shared styles */

@property --paper { syntax: '<color>'; inherits: true; initial-value: #14171A; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #ECEEEA; }
@property --graphite { syntax: '<color>'; inherits: true; initial-value: #9AA3A0; }
@property --line { syntax: '<color>'; inherits: true; initial-value: #2A2F30; }
@property --panel { syntax: '<color>'; inherits: true; initial-value: #1D2224; }
@property --forest { syntax: '<color>'; inherits: true; initial-value: #6FBFA8; }
@property --forest-dim { syntax: '<color>'; inherits: true; initial-value: #1B3733; }
@property --amber { syntax: '<color>'; inherits: true; initial-value: #D9A24E; }
@property --code-bg { syntax: '<color>'; inherits: true; initial-value: #0D0F10; }

:root{
  --paper:#14171A;
  --ink:#ECEEEA;
  --graphite:#9AA3A0;
  --line:#2A2F30;
  --panel:#1D2224;
  --forest:#6FBFA8;
  --forest-dim:#1B3733;
  --amber:#D9A24E;
  --code-bg:#0D0F10;
  --code-ink:#E7E9E5;
  --code-dim:#8A9490;
  --radius:3px;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:"IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body:has(#theme-toggle:checked){
  --paper:#FAFAF8;
  --ink:#161A1B;
  --graphite:#565E63;
  --line:#DEDCD4;
  --panel:#F1EFE8;
  --forest:#2B6357;
  --forest-dim:#DDE9E4;
  --amber:#B9822E;
  --code-bg:#14181A;
  --code-ink:#E7E9E5;
  --code-dim:#8A9490;
}

body{ transition:background-color 0.25s ease, color 0.25s ease; overflow-x:hidden; }
body, body *{ transition:background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--forest); text-decoration:none; }
a:hover{ text-decoration:underline; }
a:focus-visible, button:focus-visible, summary:focus-visible{
  outline:2px solid var(--forest);
  outline-offset:2px;
}

::selection{ background:var(--forest-dim); }

img,svg{ display:block; max-width:100%; }

/* ---------- layout shell ---------- */

.wrap{
  max-width:1080px;
  margin:0 auto;
  padding:0 28px;
}

header.site{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--paper);
  border-bottom:1px solid var(--line);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 28px;
  max-width:1080px;
  margin:0 auto;
}

.brand{
  font-family:var(--mono);
  font-weight:600;
  font-size:1.05rem;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:8px;
  letter-spacing:-0.01em;
}
.brand:hover{ text-decoration:none; }
.brand .dot{ color:var(--forest); }

.navlinks{
  display:flex;
  gap:28px;
  font-family:var(--mono);
  font-size:0.86rem;
}
.navlinks a{ color:var(--graphite); }
.navlinks a.active, .navlinks a:hover{ color:var(--ink); }

/* ---------- hero ---------- */

.hero{
  padding:88px 0 64px;
  border-bottom:1px solid var(--line);
}

.hero-grid{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:48px;
  align-items:center;
}

.eyebrow{
  font-family:var(--mono);
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--forest);
  margin:0 0 18px;
}

h1{
  font-family:var(--mono);
  font-size:clamp(2.1rem, 4.4vw, 3.4rem);
  line-height:1.08;
  letter-spacing:-0.015em;
  margin:0 0 20px;
  font-weight:600;
}

.lede{
  font-size:1.08rem;
  color:var(--graphite);
  max-width:46ch;
  margin:0 0 32px;
}

.cta-row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.btn{
  font-family:var(--mono);
  font-size:0.88rem;
  padding:11px 20px;
  border-radius:var(--radius);
  border:1px solid var(--ink);
  display:inline-block;
}
.btn.primary{ background:var(--ink); color:var(--paper); }
.btn.primary:hover{ background:var(--forest); border-color:var(--forest); text-decoration:none; }
.btn.ghost{ color:var(--ink); border-color:var(--line); }
.btn.ghost:hover{ border-color:var(--ink); text-decoration:none; }

/* graph signature */
.graph-card{
  background:var(--code-bg);
  border-radius:var(--radius);
  padding:22px;
}
.graph-card svg{ width:100%; height:auto; }
.graph-caption{
  font-family:var(--mono);
  font-size:0.74rem;
  color:var(--code-dim);
  margin-top:14px;
  letter-spacing:0.02em;
}

/* ---------- sections ---------- */

section{ padding:64px 0; border-bottom:1px solid var(--line); }
section:last-of-type{ border-bottom:none; }

.section-head{ margin-bottom:36px; max-width:60ch; }
.section-head .eyebrow{ margin-bottom:10px; }
h2{
  font-family:var(--mono);
  font-size:1.6rem;
  font-weight:600;
  margin:0 0 10px;
  letter-spacing:-0.01em;
}
.section-head p{ color:var(--graphite); margin:0; }

/* feature grid */
.grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.card{
  background:var(--paper);
  padding:26px 24px;
}
.card .idx{
  font-family:var(--mono);
  font-size:0.74rem;
  color:var(--forest);
  margin:0 0 12px;
}
.card h3{
  font-family:var(--mono);
  font-size:1.02rem;
  margin:0 0 8px;
  font-weight:600;
}
.card p{ color:var(--graphite); margin:0; font-size:0.93rem; }

/* code block */
pre{
  background:var(--code-bg);
  color:var(--code-ink);
  padding:22px 24px;
  border-radius:var(--radius);
  overflow-x:auto;
  font-family:var(--mono);
  font-size:0.86rem;
  line-height:1.6;
  margin:0;
}
code{ font-family:var(--mono); }
:not(pre) > code{
  background:var(--panel);
  padding:0.1em 0.4em;
  border-radius:2px;
  font-size:0.88em;
}

.tok-kw{ color:#7FB0A0; }
.tok-str{ color:#D8B36B; }
.tok-com{ color:#6E7875; }
.tok-fn{ color:#9FB8E8; }

/* footer */
footer{
  padding:40px 0 60px;
}
.foot-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  font-family:var(--mono);
  font-size:0.8rem;
  color:var(--graphite);
}

/* ---------- docs layout ---------- */

.docs-shell{
  display:grid;
  grid-template-columns:230px 1fr;
  gap:48px;
  max-width:1080px;
  margin:0 auto;
  padding:40px 28px 100px;
  align-items:start;
  min-width:0;
}

.sidebar{ min-width:0; }
.docs-content{ min-width:0; max-width:100%; }
.docs-content pre{ max-width:100%; }
.docs-content table{ max-width:100%; }

.sidebar{
  position:sticky;
  top:80px;
  font-family:var(--mono);
  font-size:0.85rem;
}
.sidebar h4{
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--forest);
  margin:22px 0 10px;
}
.sidebar h4:first-child{ margin-top:0; }
.sidebar a{
  display:block;
  color:var(--graphite);
  padding:5px 0;
  border-left:2px solid transparent;
  padding-left:10px;
  margin-left:-10px;
}
.sidebar a:hover, .sidebar a.active{
  color:var(--ink);
  border-left-color:var(--forest);
  text-decoration:none;
}

.docs-content h2{
  scroll-margin-top:90px;
  padding-top:8px;
  margin-top:52px;
}
.docs-content h2:first-child{ margin-top:0; }

.docs-content h3{
  font-family:var(--mono);
  font-size:1.12rem;
  margin:30px 0 10px;
}

.docs-content p{ color:var(--graphite); margin:0 0 16px; }

.docs-content table{
  border-collapse:collapse;
  width:100%;
  margin:18px 0 24px;
  font-size:0.88rem;
}
.docs-content th, .docs-content td{
  border:1px solid var(--line);
  padding:8px 12px;
  text-align:left;
}
.docs-content th{
  font-family:var(--mono);
  background:var(--panel);
  font-weight:600;
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
}

.docs-content pre{ margin:14px 0 22px; }

.note{
  border-left:3px solid var(--amber);
  background:var(--panel);
  padding:14px 18px;
  font-size:0.9rem;
  color:var(--graphite);
  margin:0 0 24px;
  border-radius:0 var(--radius) var(--radius) 0;
}

/* mobile nav toggle */
.nav-toggle{ display:none; }

/* theme toggle */
.theme-switch{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--mono);
  font-size:0.74rem;
  color:var(--graphite);
  cursor:pointer;
  user-select:none;
}
#theme-toggle{
  position:absolute;
  opacity:0;
  width:1px; height:1px;
}
.switch-track{
  position:relative;
  width:34px;
  height:18px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel);
  transition:background-color 0.2s ease;
}
.switch-track::after{
  content:"";
  position:absolute;
  top:2px; left:2px;
  width:12px; height:12px;
  border-radius:50%;
  background:var(--forest);
  transition:transform 0.2s ease;
}
#theme-toggle:checked ~ .theme-switch .switch-track::after{
  transform:translateX(16px);
}
#theme-toggle:focus-visible ~ .theme-switch .switch-track{
  outline:2px solid var(--forest);
  outline-offset:2px;
}

@media (max-width: 860px){
  .hero-grid{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:1fr; }
  .docs-shell{ grid-template-columns:1fr; padding:24px 20px 80px; gap:24px; min-width:0; }
  .sidebar{
    position:static;
    display:flex;
    flex-wrap:wrap;
    gap:6px 18px;
    padding-bottom:24px;
    border-bottom:1px solid var(--line);
    margin-bottom:12px;
  }
  .sidebar h4{ width:100%; margin:14px 0 4px; }
  .nav{ flex-wrap:wrap; row-gap:10px; padding:14px 20px; }
  .navlinks{ gap:16px; flex-wrap:wrap; row-gap:8px; }
  .wrap{ padding:0 20px; }
  section{ padding:44px 0; }
  table{ display:block; overflow-x:auto; white-space:nowrap; }
  pre{ padding:16px 18px; font-size:0.8rem; }
}

@media (max-width: 480px){
  .wrap{ padding:0 16px; }
  .docs-shell{ padding:20px 16px 60px; }
  .nav{ padding:12px 16px; }
  h1{ font-size:1.85rem; }
  h2{ font-size:1.3rem; }
  .card{ padding:20px 18px; }
  pre{ padding:14px 14px; font-size:0.76rem; }
  .navlinks{ gap:12px; font-size:0.8rem; }
  .cta-row{ flex-direction:column; align-items:flex-start; }
  .btn{ width:100%; text-align:center; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
}