/*!
 * @sparky/sidecar — base styles
 * Additive only. Does not override host .sidecar layout — only inner nav rendering.
 */
.sidecar-nav[data-sidecar-v2] svg { color: var(--text-muted, #8b949e); transition: color .15s ease; }
.sidecar-nav[data-sidecar-v2] a:hover svg { color: var(--accent, #76b900); }

.sidecar-nav[data-sidecar-v2] a[aria-current="page"] {
  background: var(--surface2, #1c2333);
  color: var(--accent, #76b900);
  font-weight: 600;
}

.sidecar-badge {
  margin-left: auto;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.sidecar-badge-info  { background: rgba(118, 185, 0, .15); color: var(--accent, #76b900); }
.sidecar-badge-warn  { background: rgba(255, 170, 0, .15); color: #ffaa00; }
.sidecar-badge-alert { background: rgba(255, 64, 64, .15); color: #ff4040; }

.sidecar-edit-toggle {
  margin-left: 0;
  background: transparent;
  border: 1px solid var(--border, #30363d);
  color: var(--text-muted, #8b949e);
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s ease;
  flex: 0 0 auto;
}
.sidecar-edit-toggle:hover {
  color: var(--accent, #76b900);
  border-color: var(--accent, #76b900);
}
.sidecar-edit-toggle:focus-visible {
  outline: 2px solid var(--accent, #76b900);
  outline-offset: 2px;
}

/* ---- Header action bar (upper-right of drawer header) ---------------------
   Holds the promoted manifest items (QuickNote, Mission Control) plus the
   admin gear, all rendered as thumb-friendly 44×44 icon buttons.
   The host's .sidecar-header is forced to flex so the action bar can be
   pinned right via margin-left:auto. */
.sidecar-header.sidecar-header-has-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
}
.sidecar-header-actions {
  margin-left: auto;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex: 0 0 auto;
}
.sidecar-header-btn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border, #30363d);
  color: var(--text-muted, #8b949e);
  cursor: pointer;
  text-decoration: none;
  transition: all .15s ease;
  flex: 0 0 auto;
  padding: 0;
}
.sidecar-header-btn svg {
  width: 22px;
  height: 22px;
}
.sidecar-header-btn:hover {
  color: var(--accent, #76b900);
  border-color: var(--accent, #76b900);
}
.sidecar-header-btn:active {
  transform: scale(.96);
}
.sidecar-header-btn:focus-visible {
  outline: 2px solid var(--accent, #76b900);
  outline-offset: 2px;
}

/* FLIP animation hook — applied transiently when manifest re-renders */
.sidecar-nav[data-sidecar-v2] a,
.sidecar-nav[data-sidecar-v2] .sidecar-section,
.sidecar-nav[data-sidecar-v2] .sidecar-divider {
  transition: transform .25s ease, opacity .25s ease;
}

/* Section grouping + collapsible headers
   NOTE: host CSS in sparky-chat.py owns the caret (::after on .collapsible)
   and shows/hides via the `.expanded` class on the header. We provide grouping
   and `.collapsed` on the parent group to hide the body. */
.sidecar-nav[data-sidecar-v2] .sidecar-section-group { display: flex; flex-direction: column; }
.sidecar-nav[data-sidecar-v2] .sidecar-section-body { display: flex; flex-direction: column; gap: 2px; }

.sidecar-nav[data-sidecar-v2] button.sidecar-section.collapsible {
  appearance: none;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.sidecar-nav[data-sidecar-v2] button.sidecar-section.collapsible:focus-visible {
  outline: 2px solid var(--accent, #76b900);
  outline-offset: 2px;
  border-radius: 4px;
}

.sidecar-section-group.collapsed .sidecar-section-body { display: none; }

/* ---- Section accent colors (manifest field `color` on section) -----------
   When a section is themed, every item link inside gets a 2px accent border
   on the left edge. Hovered items show the full accent ramp. Tokens are an
   intentional closed list (validated in sidecar.js renderNav). */
.sidecar-section-group[data-color] .sidecar-section-body a {
  border-left: 2px solid transparent;
  padding-left: 10px;
}
.sidecar-section-group[data-color="green"]  .sidecar-section-body a { border-left-color: #76b900; }
.sidecar-section-group[data-color="blue"]   .sidecar-section-body a { border-left-color: #58a6ff; }
.sidecar-section-group[data-color="amber"]  .sidecar-section-body a { border-left-color: #ffaa00; }
.sidecar-section-group[data-color="red"]    .sidecar-section-body a { border-left-color: #ff6b6b; }
.sidecar-section-group[data-color="purple"] .sidecar-section-body a { border-left-color: #b392f0; }
.sidecar-section-group[data-color="gray"]   .sidecar-section-body a { border-left-color: #8b949e; }
.sidecar-section-group[data-color] .sidecar-section-body a:hover {
  background: rgba(118, 185, 0, .06);
}

/* Section icon prefix (manifest field `icon_prefix` on section). */
.sidecar-section .sidecar-section-icon {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 6px;
  color: var(--text-muted, #8b949e);
}

/* Gear button needs to sit nicely inside the host's clickable .sidecar-header.
   When inside the action bar, inherit the full thumb-friendly 44×44 sizing. */
.sidecar-header .sidecar-edit-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
}


/* ─── Self-mount drawer (when host page provides no .sidecar scaffolding) ───
   Renders a floating ☰ toggle + slide-out drawer + backdrop on the body.
   Scoped to `.sidecar-self-host` and friends so it can NEVER affect a host
   that already provides its own .sidecar (e.g. sparky-chat). */

.sidecar-self-toggle {
  position: fixed;
  /* iOS PWA standalone: status-bar overlaps content at top:0, so push the
     floating ☰ below the notch / Dynamic Island. env() falls back to 0 in
     non-iOS / non-standalone contexts so desktop spacing is unchanged. */
  top: calc(12px + env(safe-area-inset-top, 0px));
  left: calc(12px + env(safe-area-inset-left, 0px));
  z-index: 9998;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--border, #30363d);
  background: var(--bg, #0d1117);
  color: var(--text, #c9d1d9);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  transition: border-color .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.sidecar-self-toggle:hover { border-color: var(--accent, #76b900); color: var(--accent, #76b900); }
.sidecar-self-toggle:focus-visible { outline: 2px solid var(--accent, #76b900); outline-offset: 2px; }

.sidecar-self-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.sidecar-self-overlay.open { opacity: 1; pointer-events: auto; }

aside.sidecar.sidecar-self-host {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 280px;
  max-width: 86vw;
  background: var(--bg, #0d1117);
  border-right: 1px solid var(--border, #30363d);
  z-index: 9999;
  transform: translateX(-100%);
  transition: transform .25s cubic-bezier(.2, .8, .2, 1);
  display: flex;
  flex-direction: column;
  color: var(--text, #c9d1d9);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  box-shadow: 2px 0 16px rgba(0,0,0,.35);
  /* iOS PWA standalone: respect notch + home indicator so the drawer
     header isn't tucked under the status bar and the last nav row isn't
     sitting under the home-bar. */
  padding-top:    env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left:   env(safe-area-inset-left, 0px);
}
aside.sidecar.sidecar-self-host.open { transform: translateX(0); }

.sidecar-self-host .sidecar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, #30363d);
}
.sidecar-self-host .sidecar-self-brand { font-weight: 700; font-size: 15px; }
.sidecar-self-host .sidecar-self-close {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--text-muted, #8b949e);
  font-size: 24px;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  margin-left: 6px;
}
.sidecar-self-host .sidecar-self-close:hover { color: var(--text, #c9d1d9); background: var(--surface2, #1c2333); }

.sidecar-self-host .sidecar-nav { flex: 1; overflow-y: auto; padding: 8px 0; }

.sidecar-self-host nav#sparky-sidecar-nav .sidecar-section-group { margin-bottom: 4px; }
.sidecar-self-host nav#sparky-sidecar-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  color: var(--text, #c9d1d9);
  text-decoration: none;
  font-size: 14px;
}
.sidecar-self-host nav#sparky-sidecar-nav a:hover { background: var(--surface2, #1c2333); }
.sidecar-self-host nav#sparky-sidecar-nav a svg { width: 18px; height: 18px; flex-shrink: 0; }

.sidecar-self-host .sidecar-section {
  padding: 10px 16px 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted, #8b949e);
  font-weight: 700;
}
.sidecar-self-host button.sidecar-section.collapsible {
  display: flex; align-items: center; width: 100%; background: transparent;
  border: 0; cursor: pointer; text-align: left;
}
.sidecar-self-host button.sidecar-section.collapsible::after {
  content: '\25B8'; margin-left: auto; font-size: 10px; transition: transform .15s ease;
}
.sidecar-self-host button.sidecar-section.collapsible.expanded::after { content: '\25BE'; }
.sidecar-self-host .sidecar-divider {
  height: 1px; background: var(--border, #30363d); margin: 8px 14px;
}

/* lock page scroll when drawer open (self-mount only — host pages own their own scroll lock) */
body.sidecar-self-open { overflow: hidden; }

@media (max-width: 480px) {
  aside.sidecar.sidecar-self-host { width: 100%; max-width: 100%; }
  /* Keep the toggle on the left and safe-area-aware (right:8px in the
     previous rule was a typo — the toggle is left-anchored elsewhere). */
  .sidecar-self-toggle {
    top:  calc(8px + env(safe-area-inset-top, 0px));
    left: calc(8px + env(safe-area-inset-left, 0px));
    right: auto;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   QuickNote drawer (PR-2 shell — UX-0019 §4 Scene B)
   Right slide-over on desktop, full-screen on ≤480px.
   ────────────────────────────────────────────────────────────────────────── */
.qn-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, visibility 0s linear .15s;
}
.qn-overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity .15s ease, visibility 0s;
}
html.qn-drawer-open, html.qn-drawer-open body { overflow: hidden; }

.qn-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 480px;
  max-width: 100vw;
  /* Use 100dvh where supported (iOS Safari 17+, Android Chrome) so the drawer
     never exceeds the visible viewport on mobile. Fall back to 100vh for older
     browsers. Combined with padding-bottom: safe-area-inset, content stays
     clear of the iOS home-indicator on standalone PWAs. */
  height: 100vh;
  height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--bg, #0d1117);
  border-left: 1px solid var(--border, #30363d);
  box-shadow: -16px 0 40px rgba(0, 0, 0, .5);
  display: flex;
  flex-direction: column;
  color: var(--text, #c9d1d9);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  transform: translateX(100%);
  transition: transform .2s ease;
  z-index: 9999;
}
.qn-overlay.open .qn-drawer { transform: translateX(0); }
.qn-drawer:focus { outline: none; }

/* Sandy (2026-05-26): Fullscreen mode — drawer expands edge-to-edge for
   distraction-free editing. Toggled via the ⛶ button in the drawer header. */
.qn-drawer.is-fullscreen {
  width: 100vw;
  max-width: 100vw;
  border-left: 0;
}
.qn-drawer-fullscreen {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin-right: 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted, #8b949e);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qn-drawer-fullscreen:hover {
  background: var(--surface2, rgba(255,255,255,0.04));
  color: var(--text, #c9d1d9);
}
.qn-drawer-fullscreen:focus-visible {
  outline: 2px solid var(--accent, #2188ff);
  outline-offset: 2px;
}
.qn-drawer-fullscreen[aria-pressed="true"] {
  background: var(--surface2, rgba(33,136,255,0.12));
  border-color: var(--accent, #2188ff);
  color: var(--accent, #2188ff);
}
/* Sandy (2026-05-26) — Mobile is already fullscreen; toggle is redundant. */
@media (max-width: 600px) {
  .qn-drawer-fullscreen { display: none; }
}

/* ── Sandy (2026-05-26, Phase A) — Archive / Delete drawer buttons ─────
   Shown ONLY when the drawer is fullscreen (desktop or mobile).
   Side-panel mode (narrow non-fullscreen) keeps the header compact;
   users archive/delete via row swipe (mobile) or row ⋮ menu (desktop). */
.qn-drawer-archive,
.qn-drawer-delete {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin-right: 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted, #8b949e);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: none;  /* default — shown only via the .is-fullscreen rule below */
  align-items: center;
  justify-content: center;
}
.qn-drawer-archive:hover,
.qn-drawer-delete:hover {
  background: var(--surface2, rgba(255,255,255,0.04));
  color: var(--text, #c9d1d9);
}
.qn-drawer-delete:hover {
  color: #f85149;
  border-color: rgba(248, 81, 73, 0.35);
}
.qn-drawer-archive:focus-visible,
.qn-drawer-delete:focus-visible {
  outline: 2px solid var(--accent, #2188ff);
  outline-offset: 2px;
}
.qn-drawer-archive:disabled,
.qn-drawer-delete:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.qn-drawer.is-fullscreen .qn-drawer-archive,
.qn-drawer.is-fullscreen .qn-drawer-delete { display: inline-flex; }

/* ── Undo toast ──────────────────────────────────────────────────────── */
.qn-toast-undo {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #161b22;
  border: 1px solid var(--border, #30363d);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  color: var(--text, #c9d1d9);
  font-size: 13px;
  font-weight: 500;
  z-index: 10000;
  animation: qn-toast-in .15s ease-out;
}
@keyframes qn-toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
.qn-toast-msg { white-space: nowrap; }
.qn-toast-undo-btn {
  background: transparent;
  border: 1px solid var(--accent, #2188ff);
  color: var(--accent, #2188ff);
  border-radius: 6px;
  padding: 4px 10px;
  font-weight: 600;
  cursor: pointer;
  font-size: 12px;
}
.qn-toast-undo-btn:hover {
  background: rgba(33, 136, 255, 0.12);
}
.qn-toast-close-btn {
  background: transparent;
  border: 0;
  color: var(--text-muted, #8b949e);
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  line-height: 1;
}
.qn-toast-close-btn:hover { color: var(--text, #c9d1d9); }
@media (prefers-reduced-motion: reduce) {
  .qn-toast-undo { animation: none; }
}

.qn-drawer-header {
  height: 44px;
  border-bottom: 1px solid var(--border, #30363d);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px 0 16px;
  gap: 12px;
  flex-shrink: 0;
}
.qn-drawer-title-text {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #c9d1d9);
}
.qn-drawer-close {
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid var(--border, #30363d);
  color: var(--text-muted, #8b949e);
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
.qn-drawer-close:hover {
  color: var(--accent, #76b900);
  border-color: var(--accent, #76b900);
}
.qn-drawer-close:focus-visible {
  outline: 2px solid var(--accent, #76b900);
  outline-offset: 2px;
}

.qn-drawer-body {
  flex: 1;
  padding: 12px 16px 16px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0; /* allow inner textarea to shrink/scroll inside the flex column */
}
.qn-drawer-empty {
  color: var(--text-muted, #8b949e);
  font-style: italic;
  margin: 0;
}

/* ── PR-3: header title cluster (h2 + save pill) ──────────────────────── */
.qn-drawer-title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0; /* allow pill to wrap-shrink on narrow drawers */
  flex: 1 1 auto;
}

/* ── PR-3: save state pill (status / aria-live=polite) ────────────────── */
.qn-save-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--border, #30363d);
  color: var(--text-muted, #8b949e);
  background: transparent;
  text-transform: uppercase;
  letter-spacing: .5px;
  flex-shrink: 0;
  user-select: none;
}
/* 2026-05-26 — tap-to-save: clicking the pill in any non-final state forces
   an immediate save. Pointer affordance only when actionable. */
.qn-save-pill[data-state="draft"],
.qn-save-pill[data-state="dirty"],
.qn-save-pill[data-state="offline"] { cursor: pointer; }
.qn-save-pill[data-state="draft"]:hover,
.qn-save-pill[data-state="dirty"]:hover,
.qn-save-pill[data-state="offline"]:hover { background: rgba(255,255,255,.04); }
.qn-save-pill:focus-visible { outline: 2px solid var(--accent, #76b900); outline-offset: 2px; }
.qn-save-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}
.qn-save-pill[data-state="dirty"]   { color: #ffaa00; border-color: rgba(255, 170, 0, .5); }
.qn-save-pill[data-state="saving"]  { color: #58a6ff; border-color: rgba(88, 166, 255, .5); }
.qn-save-pill[data-state="saved"]   { color: var(--accent, #76b900); border-color: rgba(118, 185, 0, .5); }
.qn-save-pill[data-state="offline"] { color: #ffaa00; border-color: rgba(255, 170, 0, .5); }
.qn-save-pill[data-state="error"]   { color: #ff6b6b; border-color: rgba(255, 107, 107, .5); }
.qn-save-pill[data-state="saving"] .qn-save-dot { animation: qn-pulse 1s ease-in-out infinite; }
@keyframes qn-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
  .qn-save-pill[data-state="saving"] .qn-save-dot { animation: none; }
}

/* ── PR-4b: inline Retry button rendered inside the pill on `error` state ─ */
.qn-save-retry {
  margin-left: 4px;
  padding: 1px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: currentColor;
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  cursor: pointer;
  line-height: 1.4;
}
.qn-save-retry:hover { background: rgba(255, 107, 107, .12); }
.qn-save-retry:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.qn-save-retry[disabled] { opacity: 0; pointer-events: none; }

/* ── PR-3: title input (borderless, underlined on focus) ──────────────── */
.qn-title {
  width: 100%;
  font: 600 18px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--text, #c9d1d9);
  padding: 6px 0;
  outline: none;
}
.qn-title::placeholder { color: var(--text-muted, #8b949e); font-weight: 400; }
.qn-title:focus { border-bottom-color: var(--accent, #76b900); }

/* ── SPEC-0019 follow-up (2026-05-16, Sandy): Category dropdown row ──── */
.qn-category-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 6px 0;
}
.qn-category-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted, #8b949e);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}
.qn-category {
  flex: 1 1 auto;
  min-width: 0;
  appearance: none;
  background: var(--bg-elev, #161b22);
  color: var(--text, #c9d1d9);
  border: 1px solid var(--border, #30363d);
  border-radius: 6px;
  padding: 6px 28px 6px 10px;
  font: inherit;
  font-size: 14px;
  line-height: 1.4;
  cursor: pointer;
  /* Carat — keeps the native dropdown affordance with our color tokens. */
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted, #8b949e) 50%),
                    linear-gradient(135deg, var(--text-muted, #8b949e) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.qn-category:focus {
  outline: none;
  border-color: var(--accent, #76b900);
  box-shadow: 0 0 0 2px rgba(118, 185, 0, 0.25);
}

/* ── SPEC-0019 follow-up (2026-05-18): Category + Status on one row ── */
.qn-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 6px 0;
}
.qn-meta-row .qn-category-row {
  /* Override the standalone row padding when nested in the meta wrapper. */
  padding: 0;
  flex: 1 1 140px;
  min-width: 0;
}
.qn-meta-iconlabel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  color: var(--text-muted, #8b949e);
  cursor: pointer;
}
.qn-meta-iconlabel svg { width: 16px; height: 16px; display: block; }
.qn-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
@media (max-width: 600px) {
  .qn-meta-row { flex-wrap: nowrap; gap: 6px; }
  .qn-meta-row .qn-category-row { flex: 1 1 0; min-width: 0; }
  .qn-meta-row .qn-category { padding-left: 8px; padding-right: 22px; font-size: 13px; }
}
/* 2026-05-26 — iOS auto-zoom override moved to end-of-file (after the base
   `.qn-body { font: 14px/... }` shorthand) so it actually wins on mobile. */

/* ── PR-3: markdown toolbar ───────────────────────────────────────────── */
.qn-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px 0;
  border-top: 1px solid var(--border, #30363d);
  border-bottom: 1px solid var(--border, #30363d);
}
.qn-tb-btn {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted, #8b949e);
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  font: 600 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.qn-tb-btn:hover {
  color: var(--accent, #76b900);
  border-color: var(--border, #30363d);
  background: rgba(118, 185, 0, .06);
}
.qn-tb-btn:active { transform: scale(.96); }
.qn-tb-btn:focus-visible {
  outline: 2px solid var(--accent, #76b900);
  outline-offset: 2px;
}
.qn-tb-btn[data-md="italic"] { font-style: italic; font-weight: 500; }
.qn-tb-btn[data-md="code"]   { font-size: 11px; }

/* ── PR-3: markdown body textarea ─────────────────────────────────────── */
.qn-body {
  flex: 1;
  width: 100%;
  min-height: 280px;
  resize: vertical;
  background: var(--surface, #161b22);
  border: 1px solid var(--border, #30363d);
  border-radius: 6px;
  color: var(--text, #c9d1d9);
  padding: 10px 12px;
  font: 14px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  outline: none;
  box-sizing: border-box;
  transition: border-color .12s ease;
}
.qn-body:focus { border-color: var(--accent, #76b900); }
.qn-body::placeholder { color: var(--text-muted, #8b949e); }

/* ── PR-5b: attachments (paperclip + rail + chips + progress) ─────────── */
/* Spacer pushes the attach button to the right edge of the toolbar so it
   never collides with the markdown chips even when the toolbar wraps. */
.qn-toolbar-spacer { flex: 1 1 auto; min-width: 0; }
.qn-tb-btn.qn-tb-attach,
.qn-tb-btn.qn-tb-camera,
.qn-tb-btn.qn-tb-video {
  font-size: 16px;       /* emoji needs more room than the B/I/H glyphs */
  line-height: 1;
}
/* PR-6/7b: hide the camera + video buttons on desktop pointers. Mobile +
   touch-tablet keep them visible. We check for pointer:fine + hover:hover
   (true desktop mouse) rather than width because hybrid devices (iPad
   keyboard, Surface) should still surface the cameras. */
@media (pointer: fine) and (hover: hover) {
  .qn-tb-btn.qn-tb-camera,
  .qn-tb-btn.qn-tb-video { display: none; }
}
/* Hide the file input visually but keep it focusable (iOS Safari requires
   the input be in the DOM tree and not display:none for `change` to fire).
   PR-6/7b: `.qn-camera-input` and `.qn-video-input` inherit this. */
.qn-file-input {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}
.qn-attach-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 4px;
  margin-top: 4px;
  border-top: 1px dashed var(--border, #30363d);
}
.qn-attach-rail.qn-attach-rail-empty { display: none; }
.qn-attach-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 28px 6px 6px;
  background: var(--surface, #161b22);
  border: 1px solid var(--border, #30363d);
  border-radius: 8px;
  min-width: 0;
  max-width: 220px;
}
.qn-attach-chip.qn-attach-uploading { border-color: var(--accent, #76b900); }
.qn-attach-chip.qn-attach-error { border-color: #ff6b6b; }
.qn-attach-chip-previewable { cursor: zoom-in; position: relative; }
.qn-attach-chip-previewable .qn-attach-thumb { cursor: zoom-in; position: relative; }
/* SPEC-0025 follow-up (2026-05-16, Sandy mobile) — explicit zoom-in affordance
   on the image thumbnail. iOS WebKit doesn't paint cursor:zoom-in on touch, so
   surface a small magnifier badge plus a clearer touch target. The element is
   purely decorative (pointer-events:none) so the parent chip handler still
   wins the tap. */
.qn-attach-chip-previewable .qn-attach-thumb::after {
  content: "\1F50D"; /* 🔍 */
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 16px;
  height: 16px;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
@media (hover: none) and (pointer: coarse) {
  /* On touch devices, beef the chip's tap target so the iOS hit-test reliably
     dispatches the click to the chip (not a sibling). 44px = WCAG 2.5.5 min. */
  .qn-attach-chip-previewable { min-height: 44px; }
  .qn-attach-chip-previewable:active { background: rgba(255, 255, 255, 0.06); }
}
.qn-attach-thumb {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  object-fit: cover;
  background: var(--bg, #0d1117);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text-muted, #8b949e);
  overflow: hidden;
}
.qn-attach-thumb-placeholder {
  background: linear-gradient(110deg,
    rgba(255,255,255,.04) 0%, rgba(255,255,255,.10) 40%,
    rgba(255,255,255,.04) 80%);
  background-size: 200% 100%;
  animation: qn-attach-shimmer 1.2s linear infinite;
}
.qn-attach-thumb-doc { background: rgba(118, 185, 0, .12); color: var(--accent, #76b900); }
.qn-attach-thumb-error { background: rgba(255, 107, 107, .15); color: #ff6b6b; font-size: 16px; }
/* PR-7b: inline <video> player thumbnail. Wider than the 36px image thumb
   so the playback controls (scrub bar + play button) have room without
   overflowing the chip. Reserves a 16:9 box matching most phone clips. */
.qn-attach-thumb-video {
  flex: 0 0 120px;
  width: 120px;
  height: 68px;
  border-radius: 4px;
  background: #000;
  object-fit: cover;
}
/* Chips holding a video player need more room than image/doc chips. The
   240px cap keeps the rail from running off-screen on narrow mobile. */
.qn-attach-chip:has(.qn-attach-thumb-video) {
  max-width: 280px;
}
@keyframes qn-attach-shimmer {
  0%   { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}
.qn-attach-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}
.qn-attach-name {
  font-size: 12px;
  color: var(--text, #c9d1d9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.qn-attach-status {
  font-size: 10px;
  color: var(--text-muted, #8b949e);
  margin-top: 2px;
}
.qn-attach-chip.qn-attach-error .qn-attach-status { color: #ff6b6b; }
.qn-attach-progress {
  position: absolute;
  bottom: 0;
  left: 6px;
  right: 28px;
  height: 2px;
  background: var(--border, #30363d);
  overflow: hidden;
  border-radius: 1px;
}
.qn-attach-progress::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent, #76b900);
  transform: translateX(-100%);
  animation: qn-attach-bar 1.4s ease-in-out infinite;
}
@keyframes qn-attach-bar {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}
.qn-attach-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--text-muted, #8b949e);
  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  cursor: pointer;
  padding: 0;
}
.qn-attach-del:hover { background: rgba(255, 107, 107, .15); color: #ff6b6b; }
.qn-attach-del:focus-visible { outline: 2px solid var(--accent, #76b900); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  .qn-attach-thumb-placeholder { animation: none; }
  .qn-attach-progress::after   { animation: none; }
}

@media (max-width: 480px) {
  .qn-drawer {
    width: 100%;
    border-left: none;
  }
  .qn-toolbar { gap: 0; }
  .qn-tb-btn { width: 36px; height: 36px; }
  .qn-body { min-height: 50vh; resize: none; }
  .qn-title { font-size: 16px; }
  .qn-attach-chip { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .qn-overlay, .qn-drawer { transition: none; }
}

/* --- SPEC-0020: LIVE arrange mode -------------------------------------- */
/* Drawer-level affordance — dashed accent border + slight tinted bg so the
   admin can't mistake LIVE mode for a normal browse session. */
.sidecar.sidecar-live-mode,
.sidecar-overlay.sidecar-live-mode {
  outline: 2px dashed var(--accent, #76b900);
  outline-offset: -2px;
}
.sidecar-live-mode #sparky-sidecar-nav .sidecar-section-body > a {
  position: relative;
  user-select: none;
}

/* The per-item drag handle. 14×14 visual, 44×44 hit area on touch via
   padding. touch-action:none prevents iOS Safari from hijacking the gesture
   for context-menu / page-scroll while a drag is in progress. */
.sidecar-live-handle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  margin-right: 6px;
  border-radius: 4px;
  cursor: grab;
  color: var(--accent, #76b900);
  font-size: 14px; line-height: 1;
  background: rgba(118,185,0,0.08);
  border: 1px solid rgba(118,185,0,0.25);
  touch-action: none;
  vertical-align: middle;
  flex-shrink: 0;
}
.sidecar-live-handle:hover { background: rgba(118,185,0,0.18); }
.sidecar-live-handle:focus-visible { outline: 2px solid var(--accent, #76b900); outline-offset: 2px; }
.sidecar-live-handle:active { cursor: grabbing; }
.sidecar-live-dragging {
  opacity: 0.55;
  background: rgba(118,185,0,0.10);
}

/* Touch target: enlarge the handle's hit area without changing visuals on desktop. */
@media (pointer: coarse) {
  .sidecar-live-handle { width: 30px; height: 30px; font-size: 16px; }
}

/* Floating "LIVE arrange — Done" bar. Anchored bottom-right so it doesn't
   collide with the existing iOS safe-area indicators. */
.sidecar-live-bar {
  position: fixed;
  bottom: 16px; right: 16px;
  z-index: 9999;
  display: none;
  align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #0d1117;
  color: #fff;
  border: 1px solid var(--accent, #76b900);
  box-shadow: 0 6px 24px rgba(0,0,0,0.4);
  font-size: 14px; font-weight: 600;
}
.sidecar-live-bar.show { display: inline-flex; }
.sidecar-live-bar-text::before { content: '●'; color: var(--accent, #76b900); margin-right: 6px; }
.sidecar-live-done {
  appearance: none;
  background: var(--accent, #76b900); color: #0d1117;
  border: none; border-radius: 999px;
  padding: 6px 14px; font-weight: 700; cursor: pointer;
  min-width: 44px; min-height: 30px;
}
.sidecar-live-done:hover { filter: brightness(1.08); }
@media (max-width: 320px) {
  .sidecar-live-bar-text { display: none; }
  .sidecar-live-done { padding: 6px 10px; }
}

/* Save-status toast (top-right; auto-dismiss after ~2 s). */
.sidecar-live-toast {
  position: fixed;
  top: 16px; right: 16px;
  z-index: 10000;
  padding: 8px 14px;
  border-radius: 6px;
  background: #1c2333;
  color: #fff;
  font-size: 13px;
  border: 1px solid #30363d;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  opacity: 0; transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
  max-width: 80vw;
}
.sidecar-live-toast.show { opacity: 1; transform: translateY(0); }
.sidecar-live-toast[data-kind="ok"]    { border-color: var(--accent, #76b900); }
.sidecar-live-toast[data-kind="warn"]  { border-color: #ffaa00; }
.sidecar-live-toast[data-kind="error"] { border-color: #ff6b6b; }

@media (prefers-reduced-motion: reduce) {
  .sidecar-live-toast { transition: none; }
}

/* ── PR-8 desktop MediaRecorder ─────────────────────────────────────────
   Video chooser sheet (opens on 🎬 toolbar click when >1 source applies),
   live HUD during recording, post-record preview overlay, transient toast.
   ─────────────────────────────────────────────────────────────────────── */

/* Chooser overlay + sheet */
.qn-video-chooser-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 10010;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.qn-video-chooser {
  background: var(--bg, #0d1117);
  color: var(--text, #c9d1d9);
  border: 1px solid var(--border, #30363d);
  border-radius: 12px;
  width: 100%;
  max-width: 380px;
  padding: 20px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qn-video-chooser-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
}
.qn-video-chooser-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid var(--border, #30363d);
  border-radius: 8px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 56px;
  font-family: inherit;
  font-size: 14px;
}
.qn-video-chooser-row:hover,
.qn-video-chooser-row:focus {
  background: var(--surface2, #1c2333);
  outline: 2px solid var(--accent, #76b900);
  outline-offset: 0;
}
.qn-video-chooser-icon {
  font-size: 24px;
  flex: 0 0 auto;
  line-height: 1;
}
.qn-video-chooser-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.qn-video-chooser-text strong { font-weight: 600; font-size: 14px; }
.qn-video-chooser-text small  { color: var(--text-muted, #8b949e); font-size: 12px; }
.qn-video-chooser-cancel {
  background: transparent;
  border: 1px solid var(--border, #30363d);
  color: var(--text-muted, #8b949e);
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  min-height: 44px;
}
.qn-video-chooser-cancel:hover,
.qn-video-chooser-cancel:focus {
  color: var(--text, #c9d1d9);
  border-color: var(--accent, #76b900);
  outline: 2px solid var(--accent, #76b900);
  outline-offset: 0;
}

/* Recording HUD — top-right of viewport, anchored above all sparky chrome */
.qn-recording-hud {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 10015;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface2, #1c2333);
  color: var(--text, #c9d1d9);
  border: 1px solid var(--border, #30363d);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: ui-monospace, "SF Mono", monospace;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  min-width: 250px;
}
.qn-recording-hud[data-warn="1"] .qn-recording-time { color: #ffaa00; }
.qn-recording-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff4040;
  flex: 0 0 auto;
  animation: qn-rec-pulse 1s ease-in-out infinite;
}
@keyframes qn-rec-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.85); }
}
.qn-recording-time {
  font-size: 14px;
  font-weight: 600;
  min-width: 48px;
}
.qn-recording-progress {
  --qn-rec-pct: 0%;
  flex: 1 1 auto;
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.qn-recording-progress::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--qn-rec-pct);
  background: var(--accent, #76b900);
  transition: width 200ms linear;
}
.qn-recording-hud[data-warn="1"] .qn-recording-progress::before {
  background: #ffaa00;
}
.qn-recording-stop {
  background: transparent;
  border: 1px solid var(--border, #30363d);
  color: var(--text, #c9d1d9);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  min-height: 32px;
}
.qn-recording-stop:hover,
.qn-recording-stop:focus {
  background: var(--bg, #0d1117);
  border-color: var(--accent, #76b900);
  color: var(--accent, #76b900);
}
@media (prefers-reduced-motion: reduce) {
  .qn-recording-dot { animation: none; }
  .qn-recording-progress::before { transition: none; }
}

/* Post-record preview overlay */
.qn-recording-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 10020;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.qn-recording-preview {
  background: var(--bg, #0d1117);
  color: var(--text, #c9d1d9);
  border: 1px solid var(--border, #30363d);
  border-radius: 12px;
  width: 100%;
  max-width: 560px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7);
}
.qn-recording-preview-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.qn-recording-preview-video {
  width: 100%;
  max-height: 60vh;
  border-radius: 6px;
  background: #000;
}
.qn-recording-preview-note {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted, #8b949e);
}
.qn-recording-preview-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.qn-recording-preview-discard,
.qn-recording-preview-attach {
  border-radius: 8px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  min-height: 44px;
}
.qn-recording-preview-discard {
  background: transparent;
  border: 1px solid var(--border, #30363d);
  color: var(--text-muted, #8b949e);
}
.qn-recording-preview-discard:hover,
.qn-recording-preview-discard:focus {
  color: var(--text, #c9d1d9);
  border-color: var(--text-muted, #8b949e);
  outline: 2px solid var(--text-muted, #8b949e);
  outline-offset: 2px;
}
.qn-recording-preview-attach {
  background: var(--accent, #76b900);
  border: 1px solid var(--accent, #76b900);
  color: #0d1117;
  font-weight: 600;
}
.qn-recording-preview-attach:hover,
.qn-recording-preview-attach:focus {
  filter: brightness(1.1);
  outline: 2px solid var(--accent, #76b900);
  outline-offset: 2px;
}

/* Transient toast */
.qn-recording-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface2, #1c2333);
  color: var(--text, #c9d1d9);
  border: 1px solid var(--border, #30363d);
  border-radius: 8px;
  padding: 12px 18px;
  z-index: 10018;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  max-width: 90vw;
}

/* ── PR-9 @-mention autocomplete picker (shared across drawer + composers) ── */
.qn-mention-panel {
  position: fixed;
  z-index: 10025;
  min-width: 320px;
  max-width: 400px;
  max-height: 360px;
  background: var(--bg, #0d1117);
  border: 1px solid var(--border, #30363d);
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
  display: none;
  flex-direction: column;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
  color: var(--text, #c9d1d9);
}
.qn-mention-panel[data-state="open"] { display: flex; }

.qn-mention-rows {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  overflow-y: auto;
  flex: 1 1 auto;
}

.qn-mention-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 12px;
  min-height: 56px;
  cursor: pointer;
  border-left: 2px solid transparent;
  -webkit-user-select: none;
  user-select: none;
}
.qn-mention-row[data-selected="true"] {
  background: var(--surface2, #1c2333);
  border-left-color: var(--accent, #76b900);
}

.qn-mention-id {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  background: var(--surface2, #1c2333);
  color: var(--accent, #76b900);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  margin-top: 2px;
}

.qn-mention-body { min-width: 0; flex: 1 1 auto; }
.qn-mention-title {
  font-weight: 600;
  color: var(--text, #c9d1d9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.qn-mention-meta {
  color: var(--text-muted, #8b949e);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qn-mention-tags { color: var(--accent, #76b900); }
.qn-mention-preview {
  color: var(--text-muted, #8b949e);
  font-size: 12px;
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qn-mention-mark {
  background: transparent;
  color: var(--accent, #76b900);
  font-weight: 700;
}

.qn-mention-empty,
.qn-mention-error {
  color: var(--accent, #76b900);
  font-weight: 600;
  align-items: center;
  min-height: 44px;
}
.qn-mention-error {
  color: var(--text, #c9d1d9);
  cursor: default;
}
.qn-mention-retry {
  background: transparent;
  color: var(--accent, #76b900);
  border: 1px solid var(--accent, #76b900);
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  margin-left: 8px;
}
.qn-mention-retry:hover,
.qn-mention-retry:focus-visible {
  background: var(--surface2, #1c2333);
  outline: 2px solid var(--accent, #76b900);
  outline-offset: 1px;
}

.qn-mention-loading {
  cursor: default;
  align-items: center;
}
.qn-mention-skel {
  display: block;
  width: 100%;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg,
    var(--surface2, #1c2333) 0%,
    #2a3140 50%,
    var(--surface2, #1c2333) 100%);
  background-size: 200% 100%;
  animation: qn-mention-shimmer 1.4s linear infinite;
}
@keyframes qn-mention-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

.qn-mention-hint {
  border-top: 1px solid var(--border, #30363d);
  padding: 6px 12px;
  color: var(--text-muted, #8b949e);
  font-size: 11px;
  background: rgba(0, 0, 0, 0.18);
  flex: 0 0 auto;
}
.qn-mention-hint-key {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--border, #30363d);
  border-radius: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  margin: 0 2px;
}

@media (prefers-reduced-motion: reduce) {
  .qn-mention-skel { animation: none; }
}

/* ============================================================
   PR-9.5 — Notes list + Browse view
   ============================================================ */
/* Browse-mode header button (📂) sits between save pill and close X. */
.qn-drawer-browse {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin-right: 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted, #8b949e);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qn-drawer-browse:hover {
  background: var(--surface2, rgba(255,255,255,0.04));
  color: var(--text, #c9d1d9);
}
.qn-drawer-browse:focus-visible {
  outline: 2px solid var(--accent, #2188ff);
  outline-offset: 2px;
}
.qn-drawer-browse[aria-pressed="true"] {
  background: var(--surface2, rgba(33,136,255,0.12));
  border-color: var(--accent, #2188ff);
  color: var(--accent, #2188ff);
}

/* View-switching: only one body pane visible at a time. */
.qn-drawer[data-view="editor"]   .qn-drawer-body-list,
.qn-drawer[data-view="editor"]   .qn-drawer-body-settings,
.qn-drawer[data-view="list"]     .qn-drawer-body-editor,
.qn-drawer[data-view="list"]     .qn-drawer-body-settings,
.qn-drawer[data-view="settings"] .qn-drawer-body-editor,
.qn-drawer[data-view="settings"] .qn-drawer-body-list { display: none; }
.qn-drawer[data-view="list"]   .qn-drawer-body-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
}
.qn-drawer[data-view="settings"] .qn-drawer-body-settings {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  gap: 12px;
  overflow-y: auto;
}

/* SPEC-0025 follow-up (2026-05-16, Sandy) — settings gear in the QN drawer
   header. Mirrors .qn-drawer-browse styling so the two toggles read as a pair. */
.qn-drawer-settings {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin-right: 4px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted, #8b949e);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qn-drawer-settings:hover {
  background: var(--surface2, rgba(255,255,255,0.04));
  color: var(--text, #c9d1d9);
}
.qn-drawer-settings:focus-visible {
  outline: 2px solid var(--accent, #2188ff);
  outline-offset: 2px;
}
.qn-drawer-settings[aria-pressed="true"] {
  background: var(--surface2, rgba(33,136,255,0.12));
  border-color: var(--accent, #2188ff);
  color: var(--accent, #2188ff);
}

/* Sandy (2026-05-16) — "+ New note" header button. Sits between 📂 Browse and
   ⚙ Settings. Uses the accent fill (mirrors .qn-list-new) so the call-to-
   action stands out from the icon-only toggles. */
.qn-drawer-new {
  flex: 0 0 auto;
  height: 32px;
  min-width: 32px;
  padding: 0 10px;
  margin-right: 4px;
  background: var(--accent, #2188ff);
  border: 1px solid var(--accent, #2188ff);
  border-radius: 6px;
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qn-drawer-new:hover { filter: brightness(1.1); }
.qn-drawer-new:focus-visible {
  outline: 2px solid var(--accent, #2188ff);
  outline-offset: 2px;
}

/* Settings pane content. */
.qn-settings-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.qn-settings-card {
  background: var(--surface, rgba(255,255,255,0.02));
  border: 1px solid var(--border, #30363d);
  border-radius: 10px;
  padding: 14px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qn-settings-h {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text, #c9d1d9);
}
.qn-settings-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-muted, #8b949e);
}
.qn-settings-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 120px;
  padding: 8px 10px;
  background: var(--bg2, #0d1117);
  border: 1px solid var(--border, #30363d);
  border-radius: 6px;
  color: var(--text, #c9d1d9);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}
.qn-settings-textarea:focus {
  outline: 2px solid var(--accent, #2188ff);
  outline-offset: 1px;
}
.qn-settings-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.qn-settings-btn {
  min-height: 36px;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--border, #30363d);
  border-radius: 6px;
  color: var(--text, #c9d1d9);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qn-settings-btn:hover {
  border-color: var(--accent, #2188ff);
  color: var(--accent, #2188ff);
}
.qn-settings-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.qn-settings-btn-primary {
  background: var(--accent, #2188ff);
  border-color: var(--accent, #2188ff);
  color: #fff;
}
.qn-settings-btn-primary:hover {
  background: var(--accent-hover, #1f6feb);
  color: #fff;
}
.qn-settings-status {
  min-height: 16px;
  font-size: 12px;
  color: var(--text-muted, #8b949e);
}
.qn-settings-status-ok    { color: var(--accent, #76b900); }
.qn-settings-status-error { color: #ff6b6b; }
.qn-settings-foot {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
}

/* Layout B — Tabbed Manager (SPEC-0019 follow-up, 2026-05-18) */
.qn-settings-tabcard { gap: 12px; }
.qn-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border, #30363d);
  margin: -4px -2px 6px;
}
.qn-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--text-muted, #8b949e);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.qn-tab:hover { color: var(--text, #c9d1d9); }
.qn-tab.is-active {
  color: var(--accent, #76b900);
  border-bottom-color: var(--accent, #76b900);
}
.qn-tab svg { width: 14px; height: 14px; }
.qn-tab-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--bg2, #0d1117);
  color: var(--text-muted, #8b949e);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.qn-tab.is-active .qn-tab-count {
  background: rgba(118,185,0,0.18);
  color: var(--accent, #76b900);
}

.qn-settings-toolbar {
  display: flex;
  gap: 8px;
}
.qn-settings-addinput {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  background: var(--bg2, #0d1117);
  border: 1px solid var(--border, #30363d);
  border-radius: 6px;
  color: var(--text, #c9d1d9);
  font: inherit;
  font-size: 13px;
}
.qn-settings-addinput:focus {
  outline: 2px solid var(--accent, #76b900);
  outline-offset: 1px;
}
.qn-settings-add { gap: 6px; }
.qn-settings-add svg { width: 14px; height: 14px; }

.qn-settings-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qn-settings-empty {
  padding: 22px;
  text-align: center;
  color: var(--text-muted, #8b949e);
  font-style: italic;
  font-size: 13px;
  border: 1px dashed var(--border, #30363d);
  border-radius: 6px;
}
.qn-settings-row {
  display: grid;
  grid-template-columns: 24px 1fr auto 32px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg2, #0d1117);
  border: 1px solid var(--border, #30363d);
  border-radius: 6px;
}
.qn-settings-row.is-dragging { opacity: 0.4; }
.qn-settings-row.is-dropover { border-color: var(--accent, #76b900); }
.qn-settings-handle {
  cursor: grab;
  color: var(--text-muted, #8b949e);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qn-settings-handle:active { cursor: grabbing; }
.qn-settings-handle svg { width: 16px; height: 16px; }
.qn-settings-rowname {
  background: transparent;
  border: 1px solid transparent;
  padding: 5px 8px;
  color: var(--text, #c9d1d9);
  font: inherit;
  font-size: 13px;
  border-radius: 4px;
  min-width: 0;
  width: 100%;
}
.qn-settings-rowname:hover:not(:disabled),
.qn-settings-rowname:focus {
  background: var(--surface, rgba(255,255,255,0.04));
  border-color: var(--border, #30363d);
  outline: none;
}
.qn-settings-rowname:focus { border-color: var(--accent, #76b900); }
.qn-settings-rowname:disabled { color: var(--text-muted, #8b949e); cursor: not-allowed; }
.qn-settings-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent, #76b900);
  color: #0a0e0a;
}
.qn-settings-pill-blank { visibility: hidden; padding: 2px 0; }
.qn-settings-rowdel {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted, #8b949e);
  cursor: pointer;
}
.qn-settings-rowdel:hover:not(:disabled) {
  color: #ff6b6b;
  border-color: #ff6b6b;
  background: rgba(255,107,107,0.08);
}
.qn-settings-rowdel:disabled { opacity: 0.35; cursor: not-allowed; }
.qn-settings-rowdel svg { width: 16px; height: 16px; }

@media (max-width: 600px) {
  .qn-settings-row { grid-template-columns: 20px 1fr auto 30px; gap: 6px; padding: 5px 6px; }
  .qn-tab { padding: 7px 8px; font-size: 12px; }
}

/* Top-level list module. The same selectors apply on the standalone
   /quicknote/ page; data-mode="page" loosens padding for the wider viewport. */
.qn-list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--bg, #0d1117);
  color: var(--text, #c9d1d9);
}
.qn-list[data-mode="page"] {
  max-width: 880px;
  width: 100%;
  margin: 0 auto;
}

.qn-list-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border, #30363d);
  flex: 0 0 auto;
  background: var(--surface, #161b22);
  position: sticky;
  top: 0;
  z-index: 2;
}
.qn-list-search {
  /* Sandy (2026-06-01) — Browse search box owns its own row at every
     width so users get a full-width typing area. Filters/sort/select-all
     wrap to the next row beneath it. */
  flex: 1 1 100%;
  min-width: 0;
  max-width: none;
  height: 32px;
  padding: 0 10px;
  background: var(--bg, #0d1117);
  border: 1px solid var(--border, #30363d);
  border-radius: 6px;
  color: var(--text, #c9d1d9);
  font: inherit;
  font-size: 13px;
}
.qn-list-search:focus {
  outline: none;
  border-color: var(--accent, #2188ff);
  box-shadow: 0 0 0 2px rgba(33,136,255,0.25);
}
.qn-list-sort {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 8px;
  background: var(--bg, #0d1117);
  border: 1px solid var(--border, #30363d);
  border-radius: 6px;
  color: var(--text, #c9d1d9);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
/* Sandy (2026-05-16) — Browse-view category filter <select>. Mirrors
   .qn-list-sort so the two dropdowns read as a pair. */
.qn-list-category,
.qn-list-status-filter {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 8px;
  background: var(--bg, #0d1117);
  border: 1px solid var(--border, #30363d);
  border-radius: 6px;
  color: var(--text, #c9d1d9);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  max-width: 160px;
}
.qn-list-new {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 12px;
  background: var(--accent, #2188ff);
  border: 1px solid var(--accent, #2188ff);
  border-radius: 6px;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.qn-list-new:hover { filter: brightness(1.1); }
.qn-list-new:focus-visible {
  outline: 2px solid var(--accent, #2188ff);
  outline-offset: 2px;
}

.qn-list-status {
  flex: 0 0 auto;
  padding: 4px 14px;
  font-size: 11px;
  color: var(--text-muted, #8b949e);
  border-bottom: 1px solid var(--border, #30363d);
  background: var(--surface, #161b22);
}

.qn-list-rows {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
.qn-list-row {
  position: relative;
  display: block;
  min-height: 56px;
  cursor: pointer;
  border-left: 2px solid transparent;
  outline: none;
  overflow: hidden;  /* needed so swipe-revealed actions clip */
}
.qn-list-row-inner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  background: var(--bg, #0d1117);
  transition: transform 0.18s ease;
  position: relative;
  z-index: 2;
}
.qn-list-row.is-swiped .qn-list-row-inner {
  transform: translateX(-140px);
}
.qn-list-row:hover .qn-list-row-inner {
  background: var(--surface2, rgba(255,255,255,0.04));
}
.qn-list-row[data-selected="true"] .qn-list-row-inner,
.qn-list-row:focus-visible .qn-list-row-inner {
  background: var(--surface2, rgba(33,136,255,0.10));
}
.qn-list-row[data-selected="true"],
.qn-list-row:focus-visible {
  border-left-color: var(--accent, #2188ff);
}

/* Sandy (2026-05-26, Phase B) — state classes for archived/deleted rows. */
.qn-list-row.is-archived .qn-list-row-inner { opacity: 0.7; font-style: italic; }
.qn-list-row.is-deleted  .qn-list-row-inner { opacity: 0.55; text-decoration: line-through; }
.qn-pill-archived {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-style: normal;
  background: rgba(187, 128, 9, 0.18);
  color: #d29922;
  border: 1px solid rgba(187, 128, 9, 0.35);
  border-radius: 4px;
  vertical-align: middle;
}

/* Overflow ⋮ button on each row — desktop-only. Mobile relies on swipe. */
.qn-list-row-overflow {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--text-muted, #8b949e);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: none;  /* desktop only — shown by media query */
  align-items: center;
  justify-content: center;
  margin-left: auto;
  align-self: center;
}
.qn-list-row-overflow:hover {
  background: var(--surface2, rgba(255,255,255,0.06));
  color: var(--text, #c9d1d9);
  border-color: var(--border, #30363d);
}
.qn-list-row-overflow:focus-visible {
  outline: 2px solid var(--accent, #2188ff);
  outline-offset: 2px;
}
@media (min-width: 601px) and (hover: hover) and (pointer: fine) {
  .qn-list-row-overflow { display: inline-flex; }
}

/* Row-menu popup (desktop overflow) */
.qn-row-menu {
  min-width: 180px;
  background: #161b22;
  border: 1px solid var(--border, #30363d);
  border-radius: 8px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5);
  padding: 4px 0;
  z-index: 10001;
  display: flex;
  flex-direction: column;
}
.qn-row-menu-item {
  background: transparent;
  border: 0;
  padding: 8px 14px;
  text-align: left;
  font-size: 13px;
  color: var(--text, #c9d1d9);
  cursor: pointer;
  font-family: inherit;
}
.qn-row-menu-item:hover {
  background: var(--surface2, rgba(255,255,255,0.06));
}

/* Mobile swipe action drawer (lives BEHIND .qn-list-row-inner) */
.qn-list-row-actions {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 140px;
  display: flex;
  align-items: stretch;
  z-index: 1;
}
.qn-list-row-action {
  flex: 1 1 50%;
  border: 0;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qn-row-action-archive { background: #bb8009; }
.qn-row-action-delete  { background: #c93c37; }
.qn-row-action-archive:focus-visible,
.qn-row-action-delete:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -3px;
}
@media (prefers-reduced-motion: reduce) {
  .qn-list-row-inner { transition: none; }
}
.qn-list-id {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid var(--border, #30363d);
  border-radius: 4px;
  background: var(--surface, #161b22);
  color: var(--accent, #2188ff);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}
.qn-list-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.qn-list-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text, #c9d1d9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qn-list-meta {
  font-size: 11px;
  color: var(--text-muted, #8b949e);
}
.qn-list-preview {
  font-size: 12px;
  color: var(--text-muted, #8b949e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qn-list-mark {
  background: rgba(255, 223, 88, 0.28);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

.qn-list-empty,
.qn-list-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-direction: column;
  padding: 30px 16px;
  text-align: center;
  color: var(--text-muted, #8b949e);
  cursor: default;
  border-left: 2px solid transparent;
}
.qn-list-empty:hover,
.qn-list-error:hover { background: transparent; }
.qn-list-empty-create,
.qn-list-retry {
  height: 30px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--accent, #2188ff);
  border-radius: 6px;
  color: var(--accent, #2188ff);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.qn-list-empty-create:hover,
.qn-list-retry:hover {
  background: rgba(33,136,255,0.10);
}

.qn-list-more {
  list-style: none;
  padding: 8px 14px;
}
.qn-list-more-btn {
  width: 100%;
  height: 32px;
  background: transparent;
  border: 1px dashed var(--border, #30363d);
  border-radius: 6px;
  color: var(--text-muted, #8b949e);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.qn-list-more-btn:hover {
  background: var(--surface2, rgba(255,255,255,0.04));
  color: var(--text, #c9d1d9);
}

.qn-list-footer {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-top: 1px solid var(--border, #30363d);
  background: var(--surface, #161b22);
  text-align: right;
}
.qn-list-fullpage {
  display: inline-block;
  font-size: 11px;
  color: var(--text-muted, #8b949e);
  text-decoration: none;
}
.qn-list-fullpage:hover {
  color: var(--accent, #2188ff);
  text-decoration: underline;
}

/* Skeleton loader (only paints if fetch takes >250ms). */
.qn-list-skel {
  cursor: default;
  pointer-events: none;
}
.qn-list-skel:hover { background: transparent; }
.qn-list-skel-bar {
  display: inline-block;
  background: linear-gradient(90deg,
    var(--surface2, rgba(255,255,255,0.04)) 0%,
    var(--border, #30363d) 50%,
    var(--surface2, rgba(255,255,255,0.04)) 100%);
  background-size: 200% 100%;
  animation: qn-list-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  height: 12px;
}
.qn-list-skel-id   { width: 48px; height: 22px; }
.qn-list-skel-body { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.qn-list-skel-title { width: 65%; }
.qn-list-skel-meta  { width: 35%; height: 10px; }

@keyframes qn-list-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .qn-list-skel-bar { animation: none; }
}

/* Mobile: stack toolbar so the search bar stays full-width. */
@media (max-width: 480px) {
  .qn-list-toolbar { flex-wrap: wrap; }
  .qn-list-search  { width: 100%; max-width: none; order: 1; }
  .qn-list-category { order: 2; max-width: none; flex: 1 1 auto; }
  .qn-list-status-filter { order: 3; max-width: none; flex: 1 1 auto; }
  .qn-list-sort    { order: 4; }
  .qn-list-new     { order: 5; margin-left: auto; }
  .qn-list-row-inner { padding: 8px 12px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Sparky Bug Reporter (SPEC-0025 Phase-1 MVP)
   Centered modal — used everywhere the sidecar boots. Mirrors QuickNote
   drawer tokens so a fresh-eyed user knows it lives in the same product.
   ────────────────────────────────────────────────────────────────────────── */
.sbr-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* iOS PWA standalone: pad the centered modal away from the notch and the
     home-bar so the Send button is never tucked behind the home indicator. */
  padding: calc(16px + env(safe-area-inset-top, 0px))
           calc(16px + env(safe-area-inset-right, 0px))
           calc(16px + env(safe-area-inset-bottom, 0px))
           calc(16px + env(safe-area-inset-left, 0px));
  transition: opacity .15s ease, visibility 0s linear .15s;
}
.sbr-overlay.open { opacity: 1; visibility: visible; transition: opacity .15s ease, visibility 0s; }
html.sbr-open, html.sbr-open body { overflow: hidden; }

.sbr-modal {
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 32px);
  background: var(--bg, #0d1117);
  border: 1px solid var(--border, #30363d);
  border-radius: 10px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .6);
  color: var(--text, #c9d1d9);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  transform: translateY(8px);
  transition: transform .18s ease;
}
.sbr-overlay.open .sbr-modal { transform: translateY(0); }

.sbr-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border, #30363d);
  flex-shrink: 0;
}
.sbr-title { margin: 0; font-size: 16px; font-weight: 600; color: var(--text, #c9d1d9); }
.sbr-close {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  color: var(--muted, #8b949e); font-size: 24px; line-height: 1; padding: 4px 8px;
  border-radius: 6px;
}
.sbr-close:hover, .sbr-close:focus { background: rgba(255,255,255,.06); color: var(--text, #c9d1d9); outline: none; }

.sbr-body {
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
  min-height: 0;
}

.sbr-row { display: flex; flex-direction: column; gap: 6px; }
.sbr-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sbr-label { font-size: 12px; font-weight: 600; color: var(--muted, #8b949e); text-transform: uppercase; letter-spacing: .04em; }
.sbr-hint {
  font-size: 11px; font-weight: 600;
  color: #56d364; background: rgba(86, 211, 100, .12);
  border: 1px solid rgba(86, 211, 100, .35);
  border-radius: 999px; padding: 2px 8px; letter-spacing: 0; text-transform: none;
}

/* Item #4 fix — white-on-white dropdown. We pin BOTH the host bg/fg AND the
   native option list explicitly, and declare `color-scheme: dark` so browsers
   that honour it (Chromium, recent Firefox/Safari) paint the popup in dark mode
   regardless of the host page theme. */
.sbr-select, .sbr-textarea {
  width: 100%;
  background: #161b22;
  color: #e6edf3;
  border: 1px solid var(--border, #30363d);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
  box-sizing: border-box;
  color-scheme: dark;
}
.sbr-select option,
.sbr-select optgroup {
  background: #161b22;
  color: #e6edf3;
}
.sbr-textarea { resize: vertical; min-height: 120px; line-height: 1.45; }
.sbr-select:focus, .sbr-textarea:focus {
  outline: 2px solid var(--accent, #58a6ff);
  outline-offset: 1px;
  border-color: var(--accent, #58a6ff);
}

/* Screenshot capture row (item #2). */
.sbr-shot-row { gap: 8px; }
.sbr-shot-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sbr-shot-btn { background: rgba(88, 166, 255, .12); color: #58a6ff; border-color: rgba(88, 166, 255, .35); }
.sbr-shot-btn:hover:not(:disabled) { background: rgba(88, 166, 255, .2); }
.sbr-shot-remove { background: rgba(248, 81, 73, .1); color: #f85149; border-color: rgba(248, 81, 73, .35); }
.sbr-shot-remove:hover:not(:disabled) { background: rgba(248, 81, 73, .18); }
.sbr-shot-status { font-size: 12px; color: var(--muted, #8b949e); min-height: 16px; }
.sbr-shot-status-ok { color: #56d364; }
.sbr-shot-status-error { color: #ff7b72; }
.sbr-shot-preview {
  max-width: 100%;
  max-height: 200px;
  border-radius: 6px;
  border: 1px solid var(--border, #30363d);
  object-fit: contain;
  background: #0d1117;
  align-self: flex-start;
}

.sbr-counter {
  font-size: 11px; color: var(--muted, #8b949e); text-align: right;
}
.sbr-counter-warn { color: #d29922; }

.sbr-status {
  font-size: 13px; color: var(--muted, #8b949e); min-height: 18px;
  padding: 6px 10px; border-radius: 6px;
}
.sbr-status:empty { padding: 0; }
.sbr-status-error { color: #ff7b72; background: rgba(255, 123, 114, .08); border: 1px solid rgba(255, 123, 114, .3); }
.sbr-status-warn  { color: #d29922; background: rgba(210, 153, 34, .08); border: 1px solid rgba(210, 153, 34, .3); }

.sbr-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--border, #30363d);
  flex-shrink: 0;
}

.sbr-btn {
  appearance: none;
  background: rgba(255,255,255,.04);
  color: var(--text, #c9d1d9);
  border: 1px solid var(--border, #30363d);
  border-radius: 6px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  min-height: 36px;
}
.sbr-btn:hover { background: rgba(255,255,255,.08); }
.sbr-btn:disabled { opacity: .5; cursor: not-allowed; }
.sbr-btn-primary {
  background: #238636; color: #fff; border-color: #2ea043;
}
.sbr-btn-primary:hover:not(:disabled) { background: #2ea043; }
.sbr-btn-primary:disabled { background: #1f6f2e; border-color: #2ea043; opacity: .5; }

.sbr-toast {
  position: fixed; left: 50%;
  /* iOS PWA standalone: lift above the home-indicator so the "Saved to
     QuickNote" confirmation isn't covered by the system gesture bar.
     Sandy flagged 2026-05-16 he never saw confirmation on iOS standalone
     because the toast sat right under the home indicator. */
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 24px);
  background: var(--bg, #0d1117);
  color: var(--text, #c9d1d9);
  border: 1px solid var(--border, #30363d);
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 10001;
  pointer-events: none;
  max-width: 80vw;
  text-align: center;
}
.sbr-toast-show { opacity: 1; transform: translate(-50%, 0); }

.sbr-nav-link {
  /* Mirrors sidecar anchor look; uses same hover state as siblings via inheritance. */
  cursor: pointer;
}

/* Mobile — bottom-sheet feel under 480px. */
@media (max-width: 480px) {
  /* Sandy 2026-05-16: keep `env(safe-area-inset-bottom)` (and the matching
     left/right) so the Send-report button can't end up under the iOS
     home-indicator on PWA standalone — a previous fix added safe-area
     padding on .sbr-overlay but this mobile breakpoint was resetting it
     to 0, which is why "Report-a-bug on added home screen" still failed. */
  .sbr-overlay {
    padding: 0
             env(safe-area-inset-right, 0px)
             env(safe-area-inset-bottom, 0px)
             env(safe-area-inset-left, 0px);
    align-items: flex-end;
  }
  .sbr-modal { max-width: 100%; max-height: 90vh; border-radius: 14px 14px 0 0; }
}

/* ─── Attachment lightbox (SPEC-0025 follow-up #3, 2026-05-16) ─────────────── */
.qn-attach-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  padding: calc(16px + env(safe-area-inset-top, 0px))
           calc(16px + env(safe-area-inset-right, 0px))
           calc(16px + env(safe-area-inset-bottom, 0px))
           calc(16px + env(safe-area-inset-left, 0px));
}
.qn-attach-lightbox.qn-attach-lightbox-open { display: flex; }
.qn-attach-lightbox-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  touch-action: pinch-zoom;
  -webkit-user-select: none;
  user-select: none;
  background: #000;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.qn-attach-lightbox-close {
  position: absolute;
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.95);
  color: #111;
  border: 0;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qn-attach-lightbox-close:focus {
  outline: 2px solid var(--accent, #76b900);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────
   2026-05-26 — iOS Safari auto-zoom guard (must stay at END OF FILE).
   Safari WebKit zooms ANY form control whose COMPUTED font-size is < 16px
   when it gains focus. The base `.qn-body { font: 14px/... }` shorthand
   wins by source order on equal specificity, so this block has to come
   AFTER it (any earlier and the 14px shorthand re-wins on mobile). Hits
   every editable surface in the drawer/list at touch widths.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .qn-body,
  .qn-title,
  .qn-meta-row .qn-category,
  .qn-list-search,
  .qn-list-category,
  .qn-list-status-filter,
  input.qn-list-search,
  select.qn-list-category,
  select.qn-list-status-filter,
  textarea.qn-body { font-size: 16px !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   Sandy (2026-05-26, Phase C) — State tabs · per-row checkboxes · bulk bar
   ────────────────────────────────────────────────────────────────────── */

/* State tab bar (Active · Archived · Trash · All) */
.qn-state-tabs {
  display: flex;
  gap: 4px;
  padding: 0 12px 8px;
  border-bottom: 1px solid var(--border, #30363d);
  background: var(--bg, #0d1117);
  flex-shrink: 0;
  overflow-x: auto;
}
.qn-state-tab {
  background: transparent;
  border: 0;
  color: var(--text-muted, #8b949e);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 6px;
  position: relative;
  white-space: nowrap;
}
.qn-state-tab:hover {
  background: var(--surface2, rgba(255,255,255,0.04));
  color: var(--text, #c9d1d9);
}
.qn-state-tab[aria-selected="true"] {
  color: var(--accent, #2188ff);
  background: var(--surface2, rgba(33, 136, 255, 0.10));
}
.qn-state-tab:focus-visible {
  outline: 2px solid var(--accent, #2188ff);
  outline-offset: 1px;
}

/* Bulk action bar (hidden until ≥1 selected) */
.qn-bulk-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(33, 136, 255, 0.08);
  border-bottom: 1px solid var(--accent, #2188ff);
  flex-shrink: 0;
}
.qn-bulk-bar[hidden] { display: none; }
.qn-bulk-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--text, #c9d1d9);
  margin-right: 4px;
}
.qn-bulk-btn {
  background: transparent;
  border: 1px solid var(--border, #30363d);
  color: var(--text, #c9d1d9);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.qn-bulk-btn:hover {
  background: var(--surface2, rgba(255,255,255,0.06));
  border-color: var(--accent, #2188ff);
}
.qn-bulk-btn-danger { color: #f85149; }
.qn-bulk-btn-danger:hover {
  background: rgba(248, 81, 73, 0.12);
  border-color: #f85149;
}
.qn-bulk-clear {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--text-muted, #8b949e);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
}
.qn-bulk-clear:hover { color: var(--text, #c9d1d9); }

/* Per-row checkbox column */
.qn-list-row-check {
  flex: 0 0 auto;
  align-self: center;
  display: none;  /* shown when list has-selection OR on desktop hover */
  margin-right: 4px;
  cursor: pointer;
}
.qn-list-row-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent, #2188ff);
  cursor: pointer;
}
.qn-list.has-selection .qn-list-row-check { display: inline-flex; }
@media (min-width: 601px) and (hover: hover) {
  .qn-list-row:hover .qn-list-row-check { display: inline-flex; }
}
.qn-list-row.is-selected .qn-list-row-inner {
  background: rgba(33, 136, 255, 0.14);
}
.qn-list-row.is-selected { border-left-color: var(--accent, #2188ff); }

/* Select-all checkbox in toolbar (visible on desktop only) */
.qn-list-select-all {
  display: none;
  align-items: center;
  margin-left: 4px;
  cursor: pointer;
}
.qn-list-select-all input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent, #2188ff);
  cursor: pointer;
}
@media (min-width: 601px) {
  .qn-list-select-all { display: inline-flex; }
}