/* Base + typography */
:root {
  --bg:        #fafafa;
  --fg:        #222;
  --muted:    #666;
  --accent:   #2563eb;
  --ok:       #16a34a;
  --warn:     #ca8a04;
  --bad:      #dc2626;
  --code-bg:  #f3f3f3;
  --side-bg:  #ffffff;
  --side-w:   320px;
  --border:   #e5e5e5;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: -apple-system, system-ui, "Segoe UI", sans-serif; line-height: 1.5; }

/* Main content area — leave space for sidebar */
main { max-width: 48rem; margin: 2rem auto; padding: 0 1.5rem 4rem; }
@media (min-width: 768px) {
  body { padding-right: var(--side-w); }
}
h1 { font-size: 1.6rem; margin: 0 0 0.5rem; }
h2 { font-size: 1.2rem; margin: 1.5rem 0 0.5rem; }
p { margin: 0.5rem 0; }
code { background: var(--code-bg); padding: 0.05rem 0.25rem; border-radius: 0.15rem; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.95em; }

/* Sidebar */
#sidebar {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: var(--side-w);
  background: var(--side-bg);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  font-size: 0.9rem;
  transition: transform 0.2s ease;
  z-index: 20;
}
#sidebar.collapsed { transform: translateX(calc(var(--side-w) - 32px)); }
#sidebar .collapse-btn {
  position: absolute; top: 0.5rem; left: 0.5rem;
  width: 24px; height: 24px; padding: 0;
  border: 1px solid var(--border); background: var(--side-bg);
  border-radius: 4px; cursor: pointer;
  font-family: inherit; font-size: 0.9rem;
  color: var(--muted);
}
#sidebar header { padding: 0.75rem 0.75rem 0.75rem 2.25rem; border-bottom: 1px solid var(--border); }
#sidebar header strong { font-size: 0.95rem; color: var(--fg); }

#sidebar .card { padding: 0.75rem; border-bottom: 1px solid var(--border); }
#sidebar .card h3 { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

/* Protocol banner grid */
.banner-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem 0.75rem; }
.banner-grid > div { display: flex; flex-direction: column; }
.banner-grid label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.banner-grid span { font-family: ui-monospace, monospace; font-size: 0.9rem; }
.banner-grid .muted { color: var(--muted); }
.banner-note { margin-top: 0.5rem; font-size: 0.8rem; color: var(--warn); font-style: italic; }

/* Mini qlog console */
.qlog-console { max-height: 220px; overflow-y: auto; font-family: ui-monospace, monospace; font-size: 0.78rem; line-height: 1.35; background: #fafafa; border-radius: 4px; padding: 0.4rem; }
.qlog-console .line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qlog-console .ts { color: var(--muted); }
.qlog-console .name { color: var(--accent); }
.qlog-console .see-all { display: block; margin-top: 0.5rem; text-align: right; font-size: 0.8rem; }

@media (max-width: 767px) {
  body { padding-right: 0; }
  #sidebar {
    /* Cap width on narrow screens so a strip of main content stays visible behind it. */
    width: min(var(--side-w), calc(100vw - 48px));
    /* Slide via `right` instead of `transform`: a transformed parent becomes
       a containing block for position:fixed descendants, which would pull the
       FAB button off-screen with the sidebar. Using `right` keeps the sidebar
       a non-containing-block ancestor, so the fixed FAB stays viewport-relative. */
    transform: none;
    right: calc(-1 * min(var(--side-w), calc(100vw - 48px)));
    transition: right 0.2s ease;
  }
  #sidebar.expanded { right: 0; }

  /* Floating "open" button — visible when the sidebar is closed.
     position:fixed inside #sidebar works only because #sidebar has no transform on mobile. */
  #sidebar .collapse-btn {
    position: fixed;
    top: auto; left: auto;
    bottom: 1rem; right: 1rem;
    width: 44px; height: 44px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    font-size: 1.1rem;
    z-index: 21;
  }
  /* When open: pull the button inside the sidebar's top-left as a small close affordance. */
  #sidebar.expanded .collapse-btn {
    position: absolute;
    top: 0.5rem; left: 0.5rem;
    bottom: auto; right: auto;
    width: 32px; height: 32px;
    background: var(--side-bg);
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: none;
    font-size: 0.9rem;
  }
}