/* ── Hamburger button ── */
.hamburger{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;cursor:pointer;padding:0;flex-shrink:0}
.hamburger svg{width:22px;height:22px;stroke:var(--text);stroke-width:2;stroke-linecap:round;fill:none}
/* Hamburger icon always visible — never swap to X */
.hamburger .icon-close{display:none}

/* ── Search bar in ribbon ── */
.ribbon-search{display:flex;align-items:center;flex-shrink:0;position:relative;margin-left:auto}
.ribbon-search input{width:0;padding:0;border:1px solid transparent;border-radius:6px;font-size:.85rem;outline:none;transition:width .25s ease,padding .25s ease,border-color .25s ease;background:var(--soft)}
.ribbon-search.open input{width:170px;padding:.3rem .55rem;border-color:var(--ring)}
.ribbon-search input:focus{border-color:var(--accent);width:170px;padding:.3rem .55rem}
.ribbon-search-btn{border:none;background:none;cursor:pointer;padding:4px;display:flex;align-items:center}
.ribbon-search-btn svg{width:18px;height:18px;stroke:var(--muted);stroke-width:2;fill:none}

/* ── Search results dropdown ── */
.search-results{position:absolute;top:calc(100% + 6px);right:0;width:280px;max-height:50vh;overflow-y:auto;background:#fff;border:1px solid var(--ring);border-radius:10px;box-shadow:0 8px 28px rgba(20,30,60,.12);z-index:40;display:none;padding:6px 0}
.search-results.visible{display:block}
.search-results a{display:block;padding:.45rem .85rem;color:var(--text);text-decoration:none;font-size:.88rem;transition:background .1s}
.search-results a:hover{background:rgba(59,91,219,.07)}
.search-results a .sr-section{color:var(--muted);font-size:.75rem;margin-right:.35rem}
.search-results .sr-empty{padding:.85rem;color:var(--muted);font-size:.88rem;text-align:center}

/* ── Drawer overlay ── */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:18;opacity:0;pointer-events:none;transition:opacity .2s ease}
.drawer-overlay.visible{opacity:1;pointer-events:auto}

/* ── Drawer panel ── */
.drawer{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:80vw;background:#fff;z-index:20;transform:translateX(-100%);transition:transform .25s ease;overflow-y:auto;box-shadow:4px 0 24px rgba(20,30,60,.1);padding:0 0 24px}
.drawer.open{transform:translateX(0)}

/* ── Drawer header ── */
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--ring)}
.drawer-head .brand{font-weight:700;font-size:1rem;color:var(--text)}
.drawer-close{border:none;background:none;cursor:pointer;padding:4px;display:flex;align-items:center}
.drawer-close svg{width:20px;height:20px;stroke:var(--text);stroke-width:2;fill:none}

/* ── Drawer navigation links ── */
/* Match site font/colour — no blue, no underline */
.drawer-nav{list-style:none;margin:0;padding:8px 0}
.drawer-nav li{position:relative}
.drawer-nav a{
  display:block;padding:.5rem 16px;
  color:var(--text);text-decoration:none;
  font-family:inherit;font-size:.92rem;line-height:1.4;
  transition:background .1s;
}
.drawer-nav a:hover{background:rgba(59,91,219,.06)}
/* Tier-1 links (top-level tools) — normal weight */
.drawer-nav a.dn-tier1{font-weight:500}
/* Parent items with chevron children — BOLD */
.drawer-nav .has-children > a.dn-tier1{font-weight:700}
.drawer-nav .has-children > a{font-weight:700}
/* Tier-2 sub-links — slightly smaller, lighter */
.drawer-nav a.dn-tier2{
  font-size:.86rem;font-weight:400;color:var(--muted);
  padding:.38rem 16px .38rem 32px;
}
.drawer-nav a.dn-tier2:hover{color:var(--text)}
/* External link indicator */
.drawer-nav .dn-external{font-size:.8rem;color:var(--muted);margin-left:2px}

/* ── Collapsible sub-menus ── */
.drawer-nav .drawer-sub {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}
.drawer-nav .has-children.open > .drawer-sub {
  display: block;
}
.drawer-nav .drawer-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 8px;
  font-size: .9rem;
  line-height: 1;
  color: var(--muted);
}
.drawer-nav .has-children.open > .drawer-toggle {
  transform: rotate(90deg);
}

/* ── Responsive ── */
@media(max-width:640px){
  .ribbon nav{display:none}
  .ribbon-search input{width:0}
  .ribbon-search.open input,.ribbon-search input:focus{width:130px}
}
/* Always show hamburger; drawer works on all widths */
@media(min-width:641px){
  .hamburger{display:flex; align-items:center; justify-content:center; width:36px; height:36px; border:none; background:none; cursor:pointer; padding:0; flex-shrink:0;}
  /* keep drawer functionality on larger screens */
}