/* ============================================================
   PyFu - Askar Terminal theme (GitHub Pages port)
   Based on the askar.so design language.
   ============================================================ */

:root {
  /* Askar Terminal v2 - refreshed dark palette, cooler ink, warmer signal green */
  --bg-primary: #0b0d0c;
  --bg-secondary: #101413;
  --bg-tertiary: #19201d;
  --bg-card: #0e1211;
  --green: #2bff88;
  --green-dim: #1fbf66;
  --green-glow: rgba(43, 255, 136, 0.18);
  --green-subtle: rgba(43, 255, 136, 0.08);
  --text-primary: #cdd4cf;
  --text-secondary: #8a938c;
  --text-muted: #5a635c;
  --border-color: #1d2421;
  --border-hover: #2c3631;
  --red: #ff5c5c;
  --yellow: #ffcc00;
  --blue: #4cc2ff;
  /* Syntax highlighting palette (Rouge tokens) */
  --hl-comment: #6b7d6b;
  --hl-keyword: #00ff41;
  --hl-string: #e5c07b;
  --hl-number: #d19a66;
  --hl-func: #61afef;
  --hl-class: #e5c07b;
  --hl-builtin: #56b6c2;
  --hl-const: #d19a66;
  --hl-decorator: #c678dd;
  --hl-variable: #e06c75;
  --hl-operator: #9aa0a6;
  --font-text: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Courier New', monospace;
  --sidebar-w: 324px;
  --topbar-h: 48px;
}

* { box-sizing: border-box; border-radius: 0 !important; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-text);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--green); color: var(--bg-primary); }

a { color: var(--green); text-decoration: none; transition: color .2s ease; }
a:hover { color: #fff; text-shadow: 0 0 8px var(--green-glow); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-hover); }
::-webkit-scrollbar-thumb:hover { background: #505050; }

/* ── Top bar (mobile only by default) ── */
.topbar {
  display: none;
  align-items: center;
  gap: .75rem;
  height: var(--topbar-h);
  padding: 0 1rem;
  background: rgba(10, 10, 10, .96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-color);
  position: sticky;
  top: 0;
  z-index: 40;
}
.hamburger {
  background: none; border: 1px solid var(--border-color);
  color: var(--text-secondary); font-size: 1rem; padding: .2rem .5rem; cursor: pointer;
}
.hamburger:hover { color: var(--green); border-color: var(--green-dim); }
.topbar-brand { font-family: var(--font-mono); font-weight: 700; color: var(--green); letter-spacing: 1px; }
.topbar-gh { margin-left: auto; color: var(--text-secondary); }
.topbar-gh:hover { color: var(--green); }

/* ── Shell layout ── */
.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

/* ── Sidebar ── */
.sidebar {
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
  height: 100vh;
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sidebar-head { padding: 1.25rem 1rem .75rem; border-bottom: 1px solid var(--border-color); }
.brand {
  font-family: var(--font-mono); font-weight: 700; font-size: 1.25rem;
  color: var(--green); letter-spacing: 1px; display: block;
}
.brand:hover { color: var(--green); text-shadow: 0 0 12px var(--green-glow); }
.brand-prompt { color: var(--green-dim); }
.brand-caret { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.brand-tag {
  font-family: var(--font-mono); font-size: .72rem; color: var(--text-muted);
  letter-spacing: .5px; margin-top: .35rem;
}

.sidebar-search { padding: .75rem 1rem .25rem; }
#nav-filter {
  width: 100%; font-family: var(--font-mono); font-size: .8rem;
  background: var(--bg-tertiary); border: 1px solid var(--border-color);
  color: var(--text-primary); padding: .45rem .6rem; outline: none;
}
#nav-filter:focus { border-color: var(--green-dim); box-shadow: 0 0 0 1px var(--green-subtle); }
#nav-filter::placeholder { color: var(--text-muted); }

.nav { flex: 1; overflow-y: auto; padding: .5rem .4rem 1.5rem; }
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list-top > li.nav-branch { margin-bottom: .35rem; }

/* Collapsible branch header (sections and nested folder groups) */
.nav-toggle {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: .5rem .6rem .5rem .55rem; margin: 0;
}
.nav-label {
  font-family: var(--font-mono); color: var(--text-secondary);
  transition: color .15s ease;
}
.nav-toggle:hover .nav-label { color: var(--green); }

/* Top-level sections: uppercase, prominent */
.nav-list-top > .nav-branch > .nav-toggle .nav-label {
  font-size: .82rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .8px;
}
/* Nested folder groups: smaller, mixed case */
.nav-children .nav-branch > .nav-toggle {
  padding-top: .35rem; padding-bottom: .35rem;
}
.nav-children .nav-branch > .nav-toggle .nav-label {
  font-size: .82rem; font-weight: 600; color: var(--text-muted);
  letter-spacing: .3px;
}

.nav-caret {
  width: 0; height: 0; flex: none;
  border-left: 5px solid var(--text-muted);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transform: rotate(90deg); transition: transform .18s ease, border-left-color .15s ease;
}
.nav-toggle:hover .nav-caret { border-left-color: var(--green); }
.nav-branch.collapsed > .nav-toggle .nav-caret { transform: rotate(0deg); }

/* Collapse / expand */
.nav-children { overflow: hidden; }
.nav-branch.collapsed > .nav-children { display: none; }
.nav.filtering .nav-children { display: block; }   /* search reveals everything */

/* Indent each nesting level a little further */
.nav-children .nav-toggle { padding-left: 1.1rem; }
.nav-children .nav-children .nav-toggle { padding-left: 1.7rem; }

.nav-leaf a {
  display: block; font-family: var(--font-mono); font-size: .92rem;
  color: var(--text-secondary); padding: .42rem .65rem .42rem 1.15rem; line-height: 1.4;
  border-left: 2px solid transparent; transition: all .15s ease;
}
.nav-children .nav-leaf a { padding-left: 1.7rem; }
.nav-children .nav-children .nav-leaf a { padding-left: 2.3rem; }
.nav-children .nav-children .nav-children .nav-leaf a { padding-left: 2.9rem; }
.nav-leaf a:hover { background: var(--green-subtle); color: var(--green); text-shadow: none; }
.nav-leaf a.active {
  background: var(--green-subtle); color: var(--green); border-left-color: var(--green); font-weight: 600;
}
.nav-leaf.nav-hidden, .nav-branch.nav-hidden { display: none; }

.sidebar-foot {
  border-top: 1px solid var(--border-color); padding: .75rem 1rem;
  display: flex; gap: 1.1rem; font-family: var(--font-mono); font-size: .75rem;
}
.sidebar-foot a { color: var(--text-muted); }
.sidebar-foot a:hover { color: var(--green); text-shadow: none; }

.backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .6); z-index: 25;
}

/* ── Content ── */
.content {
  min-width: 0;
  padding: 2.75rem clamp(1.5rem, 4vw, 4.5rem) 1.5rem;
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
}
.note { min-width: 0; }

.note-title {
  font-family: var(--font-mono); font-weight: 700; font-size: 1.85rem;
  color: #e0e0e0; letter-spacing: .5px; line-height: 1.3; margin: 0 0 .25rem;
}
.note-meta { margin-bottom: 1.75rem; }
.note-section {
  font-family: var(--font-mono); font-size: .72rem; color: var(--green-dim);
  text-transform: uppercase; letter-spacing: 1px;
}

/* ── Markdown body ── */
.note-body { font-size: 1.02rem; line-height: 1.85; }
.note-body > *:first-child { margin-top: 0; }

.note-body h1, .note-body h2, .note-body h3,
.note-body h4, .note-body h5, .note-body h6 {
  font-family: var(--font-mono); color: #e0e0e0; line-height: 1.4; letter-spacing: .5px;
}
.note-body h1 { font-size: 1.5rem; font-weight: 700; border-bottom: 1px solid var(--border-color); padding-bottom: .3rem; margin: 2.25rem 0 1rem; }
.note-body h2 { font-size: 1.2rem; font-weight: 600; border-bottom: 1px solid var(--border-color); padding-bottom: .3rem; margin: 2.5rem 0 1rem; }
.note-body h3 { font-size: 1.02rem; font-weight: 600; color: #d0d0d0; margin: 2rem 0 .75rem; }
.note-body h4 { font-size: .95rem; font-weight: 600; color: #d0d0d0; margin: 1.5rem 0 .5rem; }
.note-body h5 { font-size: .9rem; font-weight: 500; }
.note-body h6 { font-size: .85rem; font-weight: 500; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; }

.note-body p { margin: 0 0 1.3rem; }
.note-body strong { color: #e0e0e0; font-weight: 600; }
.note-body mark { background: rgba(0, 255, 65, .2); color: var(--text-primary); padding: 1px 4px; }
.note-body del { color: var(--text-muted); }

.note-body a { border-bottom: 1px solid var(--green-dim); }
.note-body a:hover { border-bottom-color: var(--green); }

/* Lists */
.note-body ul, .note-body ol { margin: .9rem 0 1.3rem; padding-left: 1.6rem; }
.note-body li { margin-bottom: .5rem; }
.note-body li::marker { color: var(--green-dim); }

/* Inline code */
.note-body :not(pre) > code {
  font-family: var(--font-mono); font-size: .85em;
  background: var(--bg-tertiary); color: var(--green);
  padding: .15em .4em; border: 1px solid var(--border-color);
}

/* Code blocks */
.note-body pre {
  position: relative;
  font-family: var(--font-mono);
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color);
  padding: 1.25rem 1.4rem;
  font-size: .875rem; line-height: 1.7;
  overflow-x: auto; margin: 1.4rem 0;
}
.note-body pre code { background: none !important; color: var(--text-primary); padding: 0; border: none; font-size: inherit; }
.highlight { margin: 1.2rem 0; }
.highlight pre { margin: 0; }

/* Copy button */
.copy-btn {
  position: absolute; top: .5rem; right: .5rem;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .5px;
  background: var(--bg-tertiary); color: var(--text-muted);
  border: 1px solid var(--border-color); padding: .2rem .55rem; cursor: pointer;
  opacity: 0; transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}
.note-body pre:hover .copy-btn { opacity: 1; }
.copy-btn:hover { color: var(--green); border-color: var(--green-dim); }
.copy-btn.copied { color: var(--green); border-color: var(--green-dim); }

/* Blockquotes */
.note-body blockquote {
  border-left: 2px solid var(--green-dim);
  padding: .5rem 1.2rem; margin: 1.5rem 0;
  color: var(--text-secondary); background: var(--green-subtle);
}
.note-body blockquote p:last-child { margin-bottom: 0; }

/* Callouts (rendered by sync.py) */
.callout {
  border: 1px solid var(--border-color); border-left: 2px solid var(--green-dim);
  background: var(--bg-card); margin: 1.5rem 0; padding: .9rem 1.1rem;
}
.callout-title {
  font-family: var(--font-mono); font-size: .82rem; font-weight: 600;
  letter-spacing: .3px; color: #d0d0d0; margin-bottom: .35rem;
}
.callout-body > *:last-child { margin-bottom: 0; }
.callout-warning, .callout-caution { border-left-color: var(--yellow); }
.callout-warning .callout-title, .callout-caution .callout-title { color: var(--yellow); }
.callout-danger, .callout-error, .callout-bug { border-left-color: var(--red); }
.callout-danger .callout-title, .callout-error .callout-title, .callout-bug .callout-title { color: var(--red); }
.callout-tip, .callout-hint, .callout-success { border-left-color: var(--green); }
.callout-tip .callout-title, .callout-hint .callout-title, .callout-success .callout-title { color: var(--green); }
.callout-info, .callout-note, .callout-example { border-left-color: var(--blue); }
.callout-info .callout-title, .callout-note .callout-title, .callout-example .callout-title { color: var(--blue); }

/* Tables */
.note-body table { border-collapse: collapse; width: 100%; font-size: .9rem; margin: 1.2rem 0; display: block; overflow-x: auto; }
.note-body th {
  font-family: var(--font-mono); font-size: .78rem; text-transform: uppercase; letter-spacing: 1px;
  color: var(--text-secondary); background: var(--bg-secondary);
  border: 1px solid var(--border-color); padding: .55rem .9rem; text-align: left; white-space: nowrap;
}
.note-body td { border: 1px solid var(--border-color); padding: .45rem .9rem; }
.note-body tr:nth-child(even) { background: var(--bg-card); }
.note-body tr:hover { background: var(--green-subtle); }

/* Misc */
.note-body hr { border: none; border-top: 1px solid var(--border-color); margin: 2rem 0; }
.note-body img { max-width: 100%; border: 1px solid var(--border-color); }

/* ── Note footer ── */
.note-footer {
  margin: 4rem 0 1rem; padding: 2rem 0 1rem;
  border-top: 1px solid var(--border-color);
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  font-family: var(--font-mono); text-align: center;
}
.note-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.75rem; }
.note-footer-links a { color: var(--text-muted); font-size: .88rem; font-weight: 600; }
.note-footer-links a:hover { color: var(--green); text-shadow: none; }
.note-footer-meta { color: var(--text-muted); font-size: .76rem; opacity: .85; }
.note-footer-meta a { color: var(--green-dim); }

/* ── Responsive ── */
@media (max-width: 900px) {
  .topbar { display: flex; }
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; top: 0; left: 0; width: var(--sidebar-w); max-width: 85vw;
    z-index: 30; transform: translateX(-100%); transition: transform .2s ease;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar.open ~ .backdrop { display: block; }
  .content { padding-top: 1.5rem; }
}

/* ============================================================
   Syntax highlighting (Rouge tokens)
   ============================================================ */
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm,
.highlight .cpf, .highlight .c1, .highlight .cs {
  color: var(--hl-comment); font-style: italic;
}
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp,
.highlight .kr, .highlight .kt, .highlight .kv {
  color: var(--hl-keyword); font-weight: 600;
}
.highlight .kc { color: var(--hl-const); font-weight: 600; }   /* True/False/None */
.highlight .o, .highlight .ow { color: var(--hl-operator); }
.highlight .p, .highlight .pi { color: var(--text-secondary); }
.highlight .s, .highlight .s1, .highlight .s2, .highlight .sb,
.highlight .sc, .highlight .sd, .highlight .se, .highlight .sh,
.highlight .si, .highlight .sx, .highlight .sr, .highlight .ss,
.highlight .dl, .highlight .sa { color: var(--hl-string); }
.highlight .m, .highlight .mi, .highlight .mf, .highlight .mh,
.highlight .mo, .highlight .mb, .highlight .il { color: var(--hl-number); }
.highlight .nf, .highlight .fm, .highlight .na { color: var(--hl-func); }
.highlight .nc, .highlight .nn { color: var(--hl-class); }
.highlight .nb, .highlight .bp { color: var(--hl-builtin); }
.highlight .no { color: var(--hl-const); }
.highlight .nd { color: var(--hl-decorator); }
.highlight .ni, .highlight .nl, .highlight .nt { color: var(--hl-decorator); }
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi { color: var(--hl-variable); }
.highlight .gp { color: var(--green-dim); font-weight: 600; }   /* >>> / $ prompts */
.highlight .gi { color: var(--green); }
.highlight .gd { color: var(--red); }
.highlight .gh, .highlight .gu { color: var(--hl-func); font-weight: 600; }
.highlight .err { color: var(--red); }
/* Console/REPL output lines stay neutral */
.highlight .go { color: var(--text-secondary); }