/* ===== Header (Sidebar + Topbar) minimal monochrome ===== */
:root { --fg:#333; --bg:#fff; --muted:#666; --line:#e6e6e6; --hover:#f7f7f7; }
body { color:var(--fg); background:var(--bg); }

/* screen reader only */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Layout: sidebar + content */
.layout{display:grid;grid-template-columns:260px 1fr;min-height:100vh;}
.content{min-width:0;}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:999}

/* Sidebar */
.sidebar{position:sticky;top:0;height:100dvh;overflow:auto;border-right:1px solid var(--line);background:#fff; z-index:100;}
.sidebar .side-inner{padding:16px;display:flex;flex-direction:column;gap:16px;}
.brand a{color:var(--fg);text-decoration:none;font-weight:700;font-size:1.05rem}
.brand small{color:var(--muted);}
.side-search input{width:100%;border:1px solid var(--line);border-radius:8px;padding:.45rem .6rem;}

/* Sidebar nav */
.side-menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}
.side-menu a{display:block;padding:.4rem .6rem;border-radius:8px;text-decoration:none;color:var(--fg)}
.side-menu a:hover{background:var(--hover)}
.side-heading{font-size:.9rem;color:var(--muted);margin:.25rem 0}
.chips,.platforms{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.chips a,.platforms a{border:1px solid var(--line);border-radius:9999px;padding:.25rem .6rem;text-decoration:none;color:var(--fg)}
.chips a:hover,.platforms a:hover{background:var(--hover)}
.side-foot{margin-top:auto;font-size:.9rem;color:var(--muted)}
.side-foot a{color:var(--fg);text-decoration:none}

/* Topbar (right column header) */
.topbar{display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--line);padding:8px 16px}
.drawer-toggle{display:none;border:1px solid var(--line);background:#fff;color:#333;border-radius:8px;padding:.35rem .6rem;cursor:pointer}
.topbar .site-title a{color:#333;text-decoration:none;font-weight:700}
.topbar .header-search{margin-left:auto;display:inline-flex;gap:.5rem}
.topbar .header-search input{border:1px solid var(--line);border-radius:8px;padding:.35rem .5rem;min-width:180px}
.topbar .header-search button{border:1px solid var(--line);background:#fff;color:#333;border-radius:8px;padding:.35rem .6rem;cursor:pointer}

/* Responsive: drawer */
@media (max-width:900px){
  .layout{grid-template-columns:1fr;}
  .drawer-toggle{display:inline-flex}
  .sidebar{position:fixed;inset:0 auto 0 0;width:80vw;max-width:320px;transform:translateX(-100%);transition:transform .2s ease;z-index:1000}
  .sidebar.is-open{transform:none}
  .sidebar-backdrop.is-open{display:block}
  .topbar .header-search{display:none}
}