/* ═══ THE BREWOS SHELL ═══════════════════════════════════════════════════════════════════════════
   The LMK-standard left drawer + breadcrumb (LMK-STANDARD §2), ported to brewos.biz.

   ## Why a port and not an import

   The canonical source is dashboard/nav.js `navbar()`, which returns markup WITH inline <script> and
   onclick= handlers. brewos.biz runs a strict CSP — `script-src 'self'` with no `unsafe-inline` — so
   that markup would render a drawer whose button does nothing. The standard anticipates this: it says
   port the same markup and the same `wr-` classes, swapping only the brand mark and the accent. That
   is what this is. Same shape, same class names, same Esc/backdrop behaviour; the handlers moved into
   shell.js so the browser will actually run them.

   ## Same ground as the Studio, on purpose

   The palette is the Studio's, not a second one. Moving from the site chrome into the workbench should
   feel like walking into another room of the same building, not opening a different app.

   Accent is amber rather than the War Room's teal or SAGE's green — the "only the brand mark and the
   accent change" clause. It is also, for a coffee company, the one warm colour that does not read as a
   warning state.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

:root {
  --bg:     #14110e;
  --panel:  #1a1510;
  --raise:  #241d17;
  --ink:    #f2ece3;
  --dim:    #9d9184;
  --faint:  #6b6055;
  --line:   #2b241d;
  --edge:   #4a3d31;
  --accent: #e8a04a;
  --ok:     #7bb661;
  --bad:    #d0574a;
}

html, body { overflow-x: hidden; max-width: 100vw; }

/* --- topbar ------------------------------------------------------------------------------------ */

.wr-topbar {
  position: sticky; top: 0; z-index: 300;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  font: 13px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--dim);
}
.wr-burger {
  background: none; border: 1px solid var(--line); color: var(--ink);
  border-radius: 9px; font-size: 15px; line-height: 1; padding: 7px 12px; cursor: pointer;
}
.wr-burger:hover { border-color: var(--accent); color: var(--accent); }
.wr-burger:focus-visible, .wr-drawer a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wr-crumb { display: flex; align-items: center; gap: 8px; font-weight: 600; flex: 1; min-width: 0; }
.wr-crumb a { color: var(--accent); text-decoration: none; }
.wr-crumb a:hover { text-decoration: underline; }
.wr-sep { color: var(--faint); }
.wr-here { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wr-quick { color: var(--dim); text-decoration: none; font-size: 12px; white-space: nowrap;
  padding: 4px 8px; border-radius: 7px; }
.wr-quick:hover { background: var(--raise); color: var(--ink); }

/* --- drawer ------------------------------------------------------------------------------------ */

.wr-backdrop {
  position: fixed; inset: 0; background: #000000aa; z-index: 399;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.wr-backdrop.open { opacity: 1; pointer-events: auto; }

.wr-drawer {
  position: fixed; top: 0; left: 0; bottom: 0; width: 250px; z-index: 400;
  background: var(--panel); border-right: 1px solid var(--line);
  padding: 14px 12px 30px; overflow-y: auto;
  transform: translateX(-105%); transition: transform .2s ease;
  font: 13.5px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.wr-drawer.open { transform: none; box-shadow: 0 0 40px #000a; }
.wr-drawer-head {
  font-weight: 800; font-size: 16px; color: var(--accent);
  padding: 4px 8px 8px; text-decoration: none; display: block;
}
.wr-grp {
  color: var(--faint); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.3px; margin: 13px 8px 5px;
}
.wr-drawer a { display: block; color: var(--dim); text-decoration: none; padding: 7px 9px; border-radius: 8px; margin-bottom: 1px; }
.wr-drawer a:hover { background: var(--raise); color: var(--ink); }
.wr-drawer a.on { background: var(--accent); color: #1a1208; font-weight: 700; }
.wr-drawer a .ext { color: var(--faint); font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  .wr-drawer, .wr-backdrop { transition: none; }
}
@media (max-width: 760px) {
  .wr-quick { display: none; }
  .wr-burger { padding: 10px 14px; font-size: 17px; }
  .wr-drawer { width: 82vw; max-width: 320px; font-size: 15px; }
  .wr-drawer a { padding: 11px 12px; }
}