/* Bytes & Miles — dark mode (dark-green palette).
   Overrides are keyed on html.dark, which theme.js sets synchronously before
   paint (no flash). The toggle button is injected into the header by theme.js. */

/* ---- Mobile hamburger nav (base; dark overrides below) ---- */
.bm-hamburger { display: none; background: none; border: none; cursor: pointer; padding: .4rem .5rem; color: #555; border-radius: 5px; transition: color .15s, background .15s; flex-shrink: 0; }
.bm-hamburger:hover { color: #16a34a; background: #e8f5e9; }
.bm-hamburger svg { display: block; }
@media (max-width: 600px) {
  header { position: relative; }
  header nav { flex-wrap: nowrap; }
  header:not(.bm-searching) .bm-inline-search { display: none; }
  .bm-hamburger { display: inline-flex; align-items: center; }
  header nav .bm-navlinks {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 950;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid #e8e8e8; box-shadow: 0 10px 24px rgba(0,0,0,.10);
    padding: .4rem 0;
  }
  header.nav-open nav .bm-navlinks { display: flex; }
  header.nav-open nav .bm-navlinks a { padding: .8rem 1.5rem; border-radius: 0; font-size: .95rem; }
}

html.dark {
  --bg: #0d1512;
  --surface: #131e18;
  --surface-2: #16231b;
  --text: #e9f1ec;
  --head: #f3f8f4;
  --p: #c4d3c9;
  --muted: #8ba093;
  --border: #1f2e26;
  --accent: #34d399;
  --accent-dim: #7ee0a0;
  --pill-bg: #16231b;
  --pill-bd: #2a3d31;
  --pill-tx: #7ee0a0;
  color-scheme: dark;
}

html.dark body { background: var(--bg); color: var(--text); }
html.dark header { border-bottom-color: var(--border); }
html.dark .logo { color: var(--text); }
html.dark nav a { color: var(--muted); }
html.dark nav a:hover { color: var(--text); background: var(--surface-2); }
html.dark nav a.active { color: var(--accent); }

html.dark h1 { color: var(--head); }
html.dark h2 { color: var(--accent); }
html.dark h3 { color: var(--text); }
html.dark p { color: var(--p); }
html.dark li { color: var(--p); }
html.dark .subtitle, html.dark .post-meta, html.dark .section-title { color: var(--muted); }
html.dark .hero-eyebrow { color: var(--accent); }
html.dark em { color: var(--muted); border-left-color: var(--pill-bd); }
html.dark .divider, html.dark hr { border-top-color: var(--border); }

/* tags / pills */
html.dark .tag, html.dark .skill-pill { background: var(--pill-bg); border-color: var(--pill-bd); color: var(--pill-tx); }

/* buttons */
html.dark .btn-secondary { border-color: var(--pill-bd); color: var(--muted); }
html.dark .btn-secondary:hover { color: var(--text); border-color: var(--muted); }

/* homepage cards */
html.dark .card { background: var(--surface); border-color: var(--border); }
html.dark .card:hover { border-color: var(--pill-bd); box-shadow: 0 14px 30px rgba(0,0,0,.45); }
html.dark .card-title { color: var(--head); }
html.dark .card:hover .card-title { color: var(--accent); }
html.dark .card-excerpt { color: var(--p); }
html.dark .card-meta { color: var(--muted); }
html.dark .card-cover { background: var(--surface-2); }

/* listing post-cards */
html.dark .post-card { border-bottom-color: var(--border); }
html.dark .post-card:hover { background: var(--surface-2); }
html.dark .post-card-title { color: var(--head); }
html.dark .post-card:hover .post-card-title { color: var(--accent); }
html.dark .post-card-meta, html.dark .article-date { color: var(--muted); }
html.dark .post-card-excerpt { color: var(--p); }

/* article extras */
html.dark .img-caption { color: var(--muted); }

/* work page */
html.dark .career-table td { border-bottom-color: var(--border); color: var(--p); }
html.dark .career-table td:first-child { color: var(--muted); }
html.dark .career-table td:nth-child(2) { color: var(--head); }
html.dark .career-table td:last-child { color: var(--muted); }
html.dark .project { background: var(--surface); border-color: var(--border); }
html.dark .project-title { color: var(--head); }
html.dark .project-title span { color: var(--muted); }
html.dark .project-tech { color: var(--muted); border-top-color: var(--border); }
html.dark .project ul li { color: var(--p); }
html.dark .project ul li strong { color: var(--head); }
html.dark .article-list li { border-bottom-color: var(--border); }
html.dark .article-list a { color: var(--text); }
html.dark .article-list a:hover { color: var(--accent); }
html.dark .linkedin-table th { color: var(--muted); border-bottom-color: var(--border); }
html.dark .linkedin-table td { border-bottom-color: var(--border); color: var(--p); }
html.dark .linkedin-table td:first-child { color: var(--head); }
html.dark .linkedin-link { color: var(--accent); }

/* footer */
html.dark footer { color: var(--muted); border-top-color: var(--border); }

/* search page + inline search */
html.dark .search-field input { background: var(--surface); border-color: var(--pill-bd); color: var(--text); }
html.dark .result { border-bottom-color: var(--border); }
html.dark .result-title { color: var(--head); }
html.dark .result:hover .result-title { color: var(--accent); }
html.dark .result-meta { color: var(--accent); }
html.dark .result-excerpt { color: var(--p); }
html.dark .result mark { background: #1c3326; color: var(--accent-dim); }
html.dark .count, html.dark .empty { color: var(--muted); }
html.dark .empty strong { color: var(--text); }
html.dark .bm-search-icon { color: var(--muted); }
html.dark .bm-search-icon:hover { color: var(--accent); background: var(--surface-2); }
html.dark .bm-inline-search input { color: var(--text); }
html.dark .bm-hamburger { color: var(--muted); }
html.dark .bm-hamburger:hover { color: var(--accent); background: var(--surface-2); }
@media (max-width: 600px) { html.dark header nav .bm-navlinks { background: var(--surface); border-bottom-color: var(--border); } }
html.dark .progress-bar { background: var(--accent); }

/* In-post diagram & callout boxes — dark (agent-sql post diagrams, oahu tribute) */
html.dark .flow-step, html.dark .fanout, html.dark .dgm-q { background: var(--surface); border-color: var(--pill-bd); color: var(--text); }
html.dark .flow-step--final, html.dark .fo-node, html.dark .dgm-ans, html.dark .next-up, html.dark .kanak-tribute { background: var(--surface-2); border-color: var(--pill-bd); }
html.dark .fo-node { color: var(--accent-dim); }
html.dark .fo-sub, html.dark .fo-join, html.dark .fo-note, html.dark .dgm-who { color: var(--muted); }
html.dark .fanout-total { border-top-color: var(--border); color: var(--text); }
html.dark .fo-bad { color: var(--text); }
html.dark .flow-label, html.dark .next-up .next-label { color: var(--accent); }
html.dark .kanak-quote { background: var(--surface); color: var(--text); border-left-color: var(--accent); }

/* post reading extras — dark */
html.dark .post-nav { border-top-color: var(--border); }
html.dark .post-nav-title { color: var(--head); }
html.dark .post-nav-link:hover .post-nav-title { color: var(--accent); }
html.dark .post-nav-label { color: var(--accent); }
html.dark .back-to-top { background: var(--surface); border-color: var(--pill-bd); color: var(--accent); }
html.dark .back-to-top:hover { background: var(--surface-2); }

/* listen / TTS bar — dark */
html.dark .tts-stop { border-color: var(--pill-bd); color: var(--muted); }
html.dark .tts-stop:hover { color: var(--text); border-color: var(--muted); }
html.dark .tts-status { color: var(--muted); }
html.dark .tts-reading { background: var(--surface-2); box-shadow: -4px 0 0 var(--accent); }
html.dark .tts-sel { background: var(--surface); border-color: var(--pill-bd); color: var(--text); }
html.dark .tts-sel:focus { border-color: var(--accent); }

/* theme toggle button (light + dark) */
.bm-theme-toggle { background: none; border: none; cursor: pointer; padding: .4rem .5rem; display: inline-flex; align-items: center; color: #555; border-radius: 5px; transition: color .15s, background .15s; flex-shrink: 0; }
.bm-theme-toggle:hover { color: #16a34a; background: #e8f5e9; }
html.dark .bm-theme-toggle { color: var(--muted); }
html.dark .bm-theme-toggle:hover { color: var(--accent); background: var(--surface-2); }
.bm-theme-toggle svg { display: block; }
.bm-theme-toggle .bm-sun { display: none; }
.bm-theme-toggle .bm-moon { display: block; }
html.dark .bm-theme-toggle .bm-sun { display: block; }
html.dark .bm-theme-toggle .bm-moon { display: none; }