/* ============================================================
   py-Rizmi docs — "Paper & Sage"
   Light (paper page) default · dark study via [data-theme=dark]
   ============================================================ */

:root {
  color-scheme: light;
  /* paper page */
  --bg: #faf7f2;
  --bg-alt: #ffffff;
  --bg-inset: #f3efe8;
  --fg: #2d3138;
  --muted: #6b7078;
  --border: #e6e1d8;

  /* sage + sienna accents */
  --accent: #5f8575;
  --accent-strong: #46695b;
  --highlight: #9c6b4f;

  /* code panels stay dark in both themes */
  --code-bg: #282c34;
  --code-fg: #dcdfe4;

  --shadow: 0 1px 3px rgba(45, 49, 56, .06), 0 8px 24px rgba(45, 49, 56, .05);
  --sidebar-w: 260px;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1e2126;
  --bg-alt: #262a30;
  --bg-inset: #22262b;
  --fg: #dde1e6;
  --muted: #9aa1ab;
  --border: #33383f;
  --accent: #7ea899;
  --accent-strong: #93bdb0;
  --highlight: #c49a82;
  --shadow: none;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* smooth, uniform theme switch: every element transitions together */
body,
body * {
  transition:
    background-color .25s ease,
    border-color .25s ease,
    color .12s ease;
}
/* keep interactive snappiness; exclude layout-affecting props */
pre, .card, .note { transition: background-color .25s ease, box-shadow .25s ease; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.75;
}

a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── shell layout ─────────────────────────────────────────── */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed; inset: 0 auto 0 0;
  width: var(--sidebar-w);
  background: var(--bg-inset);
  border-right: 1px solid var(--border);
  padding: 22px 18px;
  overflow-y: auto;
}

.content {
  flex: 1;
  margin-left: var(--sidebar-w);
  padding: 34px 44px 80px;
}
.content-inner { max-width: 860px; margin: 0 auto; }

/* ── sidebar ──────────────────────────────────────────────── */
.brand {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 18px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.brand img { width: 40px; height: 40px; object-fit: contain; }
.brand .name { font-weight: 700; font-size: 17px; letter-spacing: -.02em; }
.brand .name span { color: var(--accent); }

.nav-group { margin-top: 20px; }
.nav-group h4 {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); font-weight: 600; margin: 0 10px 6px;
}
.nav-group a {
  display: block; padding: 7px 12px; border-radius: 4px;
  font-size: 14.5px; color: var(--fg); margin-bottom: 1px;
  border-left: 2px solid transparent;
}
.nav-group a:hover { background: var(--bg-alt); text-decoration: none; }
.nav-group a.active {
  background: var(--bg-alt);
  border-left-color: var(--accent);
  color: var(--accent-strong); font-weight: 600;
}
.sidebar-foot {
  margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--muted);
}
.sidebar-foot a { color: var(--muted); }

/* ── topbar ───────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 30px;
}
.topbar a.tb, button.tb {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-alt); border: 1px solid var(--border);
  border-radius: 4px; padding: 6px 13px;
  font-size: 13.5px; color: var(--fg); cursor: pointer;
}
.topbar a.tb:hover, button.tb:hover { background: var(--bg-inset); text-decoration: none; }
.topbar .spacer { flex: 1; }

/* ── typography & content ─────────────────────────────────── */
h1 { font-size: 36px; letter-spacing: -.02em; line-height: 1.2; margin-bottom: 12px; }
h2 {
  font-size: 25px; letter-spacing: -.01em; margin: 42px 0 12px;
  padding-top: 18px; border-top: 1px solid var(--border);
}
h2:first-of-type { border-top: none; padding-top: 0; }
h3 { font-size: 17.5px; margin: 24px 0 8px; }
p.lead { font-size: 17.5px; color: var(--muted); max-width: 720px; margin-bottom: 26px; }
p { margin-bottom: 12px; }

.kicker {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--highlight); margin-bottom: 4px;
}

ul.plain { margin: 10px 0 14px 22px; color: var(--muted); }
ul.plain li { margin-bottom: 6px; }

/* hero (index) */
.hero { padding: 46px 0 10px; }
.hero .flourish {
  width: 64px; height: 3px; background: var(--accent);
  border-radius: 2px; margin: 18px 0 22px;
}
.hero .sub { font-size: 18px; color: var(--muted); max-width: 700px; }
.badges { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 26px; }
.badge {
  border: 1px solid var(--border); background: var(--bg-alt);
  border-radius: 999px; padding: 4px 14px; font-size: 12.5px; color: var(--muted);
}
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.btn {
  border-radius: 4px; padding: 11px 21px; font-weight: 600; font-size: 15px;
}
.btn.primary { background: var(--accent-strong); color: #fff; }
.btn.primary:hover { background: var(--accent); text-decoration: none; }
.btn.ghost { border: 1px solid var(--border); color: var(--fg); }
.btn.ghost:hover { background: var(--bg-inset); text-decoration: none; }

/* cards */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 16px; margin-top: 22px; }
.card {
  background: var(--bg-alt); border-radius: 5px; box-shadow: var(--shadow);
  padding: 20px 22px; border-left: 3px solid var(--accent);
}
.card h3 { margin: 0 0 7px; font-size: 15.5px; }
.card p { color: var(--muted); font-size: 13.5px; margin: 0; }

/* code blocks — dark terminal panel in BOTH themes */
pre {
  position: relative;
  background: var(--code-bg); color: var(--code-fg);
  border-radius: 4px; padding: 17px 19px; overflow-x: auto;
  margin: 15px 0; font-size: 13.5px; line-height: 1.55;
  box-shadow: var(--shadow);
}
pre code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
}
p code, li code, td code {
  background: var(--bg-inset); color: var(--highlight);
  border-radius: 5px; padding: 1.5px 6px;
}

/* tables */
table.doc { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
table.doc th, table.doc td { border: 1px solid var(--border); padding: 9px 13px; text-align: left; vertical-align: top; }
table.doc th { background: var(--bg-inset); }

/* callouts */
.note {
  background: var(--bg-alt); box-shadow: var(--shadow);
  border-left: 3px solid var(--accent); border-radius: 0 5px 5px 0;
  padding: 14px 18px; margin: 18px 0; font-size: 14.5px;
}
.note.warn { border-left-color: var(--highlight); }

footer.site {
  margin-top: 70px; padding: 24px 0 8px; border-top: 1px solid var(--border);
  color: var(--muted); font-size: 13px;
}

/* theme toggle icon */
#theme-toggle .sun { display: inline; }
#theme-toggle .moon { display: none; }
[data-theme="dark"] #theme-toggle .sun { display: none; }
[data-theme="dark"] #theme-toggle .moon { display: inline; }

.hamburger { display: none; }

/* ── responsive drawer ────────────────────────────────────── */
.scrim {
  display: none;
  position: fixed; inset: 0;
  background: rgba(20, 24, 30, .45);
  z-index: 25;
}
body.nav-open .scrim { display: block; }

@media (max-width: 900px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 30; box-shadow: 0 0 40px rgba(0,0,0,.15);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  .content { margin-left: 0; padding: 22px 20px 70px; }
  .hamburger {
    display: inline-flex; cursor: pointer;
    background: var(--bg-alt); border: 1px solid var(--border);
    border-radius: 4px; padding: 6px 11px; font-size: 15px;
  }
  .topbar { position: sticky; top: 0; z-index: 20; background: var(--bg); padding: 10px 0; }
  h1 { font-size: 29px; }
}

@media print {
  .sidebar, .topbar, footer.site { display: none; }
  .content { margin: 0; padding: 0; }
  body { background: #fff; }
}