/* car.smooker.org — shared styling for index.php and drive.php.
   Split out so the two pages can't drift on the parts that must look
   identical (header, sidebar tree, base tokens) — smooker: "prегледай
   тия неща за подобност". Page-specific rules (tables/panels for
   index.php, canvas/tooltip for drive.php) stay inline in each file. */

:root {
  --bg: #0c0e14;
  --panel: #14181f;
  --panel-hi: #1c222e;
  --cyan: #00f0ff;
  --cyan-dim: #00788c;
  --green: #50ff8c;
  --green-dim: #2c8246;
  --amber: #ffb428;
  --red: #ff5050;
  --grey: #788296;
  --white: #dce6f0;
  --border: #3c506e;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--white);
  font-family: "Terminus", "Courier New", monospace;
  font-size: 14px;
  line-height: 1.55;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--green); text-decoration: underline; }

#wrap { display: flex; align-items: flex-start; }
aside {
  width: 250px; flex: none; background: var(--panel); border-right: 1px solid var(--border);
  position: sticky; top: 0; height: 100vh; overflow: auto; padding: 14px 0;
}
main { flex: 1; min-width: 0; }

.tree { font-size: 13px; }
.tree .lvl0, .tree .lvl1, .tree .lvl2 {
  display: flex; justify-content: space-between; gap: 8px;
  text-decoration: none; border-left: 3px solid transparent;
}
.tree .lvl0 { padding: 6px 14px; font-weight: bold; color: var(--white); margin-top: 6px; }
.tree .lvl1 { padding: 4px 14px 4px 26px; color: var(--grey); font-size: 12px; }
.tree .lvl2 { padding: 5px 14px 5px 38px; color: var(--cyan); font-size: 12px; }
.tree .lvl0:hover, .tree .lvl1:hover, .tree .lvl2:hover { background: var(--panel-hi); color: var(--cyan); }
.tree .lvl0.on, .tree .lvl1.on, .tree .lvl2.on {
  background: var(--panel-hi); border-left-color: var(--cyan); color: var(--white); font-weight: bold;
}
.tree .lvl0 span, .tree .lvl1 span, .tree .lvl2 span { color: var(--grey); font-weight: normal; }

header {
  padding: 12px 0; background: var(--panel); border-bottom: 1px solid var(--cyan-dim);
  position: sticky; top: 0; z-index: 3;
}
header .inner { padding: 0 20px; }
header h1 { margin: 0 0 4px; font-size: 16px; color: var(--cyan); font-weight: normal; }
header h1 a { color: var(--cyan); }
header .sub { margin: 0; font-size: 12px; color: var(--grey); }
kbd {
  background: var(--panel-hi); border: 1px solid var(--border); border-radius: 3px; padding: 0 4px;
  font-family: "Terminus", "Courier New", monospace; font-size: 11px;
}

/* ── Mobile (2026-08-07, smooker: "izglezhda uzhasno na android") ────────
   Sidebar becomes an off-canvas drawer, toggled by .menu-toggle (only
   visible below the breakpoint) + a tap-outside .backdrop to close it. */
.menu-toggle {
  display: none; background: none; border: 1px solid var(--border); color: var(--cyan);
  font-size: 16px; line-height: 1; padding: 4px 10px; border-radius: 3px; cursor: pointer;
  margin-right: 10px; vertical-align: middle;
}
.backdrop { display: none; }
@media (max-width: 768px) {
  #wrap { display: block; }
  aside {
    position: fixed; left: 0; top: 0; width: 250px; z-index: 20;
    transform: translateX(-100%); transition: transform .2s ease;
    box-shadow: 2px 0 16px rgba(0,0,0,.6);
  }
  aside.open { transform: translateX(0); }
  main { width: 100%; }
  .menu-toggle { display: inline-block; }
  .backdrop {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5);
    z-index: 19; opacity: 0; pointer-events: none; transition: opacity .2s ease;
  }
  .backdrop.open { opacity: 1; pointer-events: auto; }
}