/* NanoRhino admin console — shared shell (tokens + drawer + hamburger button).
   Loaded by:
     - self-evolution:    launcher.html (/), overview.html (/overview)
     - diagnosis-platform: index.html (/diagnosis/) via absolute /static/theme.css

   Design goal: only supply the drawer glue. The hamburger button lives inside
   each page's existing nav row — no extra topbar is added, so page layouts stay
   intact. */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* ─── design tokens (matching overview.html) ──────────────────────── */
:root {
  --nn-ink:#f5f5f7; --nn-ink-2:#ffffff; --nn-panel:#ffffff; --nn-panel-2:#f2f2f7;
  --nn-side:#f2f2f7; --nn-side-2:#e5e5ea;
  --nn-line:#d1d1d6; --nn-line-soft:#e5e5ea;
  --nn-txt:#1d1d1f; --nn-txt-dim:#86868b; --nn-txt-faint:#aeaeb2;
  --nn-amber:#b26a1f; --nn-amber-soft:#cf9450;
  --nn-green:#3d925f; --nn-red:#c2452f; --nn-blue:#3f7cad; --nn-violet:#7b5fbf;
  --nn-sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'SF Pro Text','PingFang SC','Microsoft YaHei',system-ui,sans-serif;
  --nn-mono:'IBM Plex Sans',SFMono-Regular,ui-monospace,Menlo,monospace;
  --nn-serif:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'SF Pro Display',system-ui,sans-serif;
}

/* ─── hamburger button (in-flow, sits inside host nav) ───────────── */
.nn-ham {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px;
  background:transparent; border:0; padding:0; cursor:pointer;
  color:var(--nn-txt-dim);
  transition:background .12s, color .12s;
  flex:0 0 auto;
}
.nn-ham:hover { background:rgba(0,0,0,0.05); color:var(--nn-txt); }
.nn-ham:focus-visible { outline:2px solid var(--nn-amber-soft); outline-offset:2px; }
.nn-ham svg { display:block; }

/* launcher: no host nav — float in top-left corner. */
.nn-ham-floating {
  position:fixed; top:14px; left:14px; z-index:1000;
  width:38px; height:38px;
  background:rgba(255,255,255,0.72);
  backdrop-filter:saturate(1.4) blur(8px);
  -webkit-backdrop-filter:saturate(1.4) blur(8px);
  border:1px solid var(--nn-line-soft);
  color:var(--nn-txt);
}
.nn-ham-floating:hover { background:var(--nn-ink-2); border-color:var(--nn-line); }

/* ─── drawer (slide-in from left) ────────────────────────────────── */
.nn-scrim {
  position:fixed; inset:0; background:rgba(15,15,20,0.28);
  opacity:0; pointer-events:none; transition:opacity .2s; z-index:1010;
}
.nn-scrim.on { opacity:1; pointer-events:auto; }

.nn-drawer {
  position:fixed; left:0; top:0; bottom:0; width:280px;
  background:var(--nn-ink-2); border-right:1px solid var(--nn-line);
  transform:translateX(-100%);
  transition:transform .22s cubic-bezier(0.2,0.7,0.2,1); z-index:1020;
  display:flex; flex-direction:column;
  box-shadow:2px 0 24px rgba(0,0,0,0.06);
  font-family:var(--nn-sans);
}
.nn-drawer.on { transform:translateX(0); }

.nn-drawer .nn-dh {
  padding:20px 22px 14px; border-bottom:1px solid var(--nn-line-soft);
}
.nn-drawer .nn-dh .nn-dh-brand {
  display:block; color:inherit; text-decoration:none;
}
.nn-drawer .nn-dh .nn-dh-n {
  font-family:var(--nn-mono); font-size:11px; letter-spacing:2px;
  color:var(--nn-amber); text-transform:uppercase; font-weight:600;
}
.nn-drawer .nn-dh .nn-dh-t {
  font-family:var(--nn-serif); font-style:italic; font-size:12.5px;
  color:var(--nn-txt-faint); margin-top:6px;
}
.nn-drawer .nn-dlist { padding:0; display:flex; flex-direction:column; }
.nn-drawer .nn-di {
  display:flex; align-items:baseline; gap:16px; padding:14px 24px;
  cursor:pointer; text-decoration:none; color:var(--nn-txt);
  border-left:2px solid transparent;
  transition:background .12s, border-color .12s;
}
.nn-drawer .nn-di:hover { background:var(--nn-panel-2); }
.nn-drawer .nn-di.on {
  background:rgba(178,106,31,0.06);
  border-left-color:var(--nn-amber);
}
.nn-drawer .nn-di .nn-di-nm {
  flex:1; min-width:0; font-size:14.5px; font-weight:500;
  color:var(--nn-txt); letter-spacing:-0.002em;
}
.nn-drawer .nn-di.on .nn-di-nm { color:var(--nn-amber); font-weight:600; }
.nn-drawer .nn-di .nn-di-pt {
  font-family:var(--nn-mono); font-size:11px; color:var(--nn-txt-faint); letter-spacing:0.5px;
}
.nn-drawer .nn-df {
  margin-top:auto; padding:14px 22px 18px; border-top:1px solid var(--nn-line-soft);
  font-family:var(--nn-serif); font-style:italic; font-size:11.5px;
  color:var(--nn-txt-faint); line-height:1.55;
}