/* ───────── App chrome ─────────
   Loaded on every page from base.html. Holds the navbar brand,
   login CTA, update pill, announcement modal, nav shell, settings
   dropdown, and connection/migration banners.

   Extracted from base.html's inline <style> block (2026-05-27) so the
   browser can cache it across page navigations instead of re-parsing
   ~14KB inline on every load. */

/* Navbar brand — matches the editorial typography on /auth/login */
.nav-brand{display:inline-flex;align-items:baseline;gap:2px;line-height:1;text-decoration:none}
.nav-brand__q{font-family:"Newsreader",ui-serif,Georgia,serif;font-style:italic;font-weight:500;font-size:24px;color:#0e1d3d;letter-spacing:-.01em}
.nav-brand__dot{font-family:"Newsreader",ui-serif,Georgia,serif;font-style:italic;font-weight:500;font-size:24px;color:#2563eb;margin:0 3px;transform:translateY(-2px);display:inline-block;line-height:1}
.nav-brand__a{font-family:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:#0e1d3d;padding-bottom:3px}
.dark .nav-brand__q,
.dark .nav-brand__a{color:#f0f0f8}
.dark .nav-brand__dot{color:#60a5fa}

/* Navbar login CTA — slab + offset block like the login page hero button */
.nav-login{position:relative;display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;background:#0e1d3d;color:#f5efe1;text-decoration:none;
  font-family:"Geist",ui-sans-serif,system-ui,sans-serif;font-weight:500;font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;border:0;
  box-shadow:4px 4px 0 #2563eb;
  transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s cubic-bezier(.2,.7,.2,1)}
.nav-login:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 #2563eb;color:#f5efe1}
.nav-login:active{transform:translate(0,0);box-shadow:2px 2px 0 #2563eb}
.nav-login__arrow{font-family:"Newsreader",ui-serif,Georgia,serif;font-style:italic;font-weight:500;font-size:16px;line-height:1}
.dark .nav-login{background:#f0f0f8;color:#0e1d3d;box-shadow:4px 4px 0 #60a5fa}
.dark .nav-login:hover{color:#0e1d3d;box-shadow:6px 6px 0 #60a5fa}
.dark .nav-login:active{box-shadow:2px 2px 0 #60a5fa}

/* ── Update pill ─────────────────────────────────────────────
   Shown when a new service worker is installed and waiting.
   User taps Apply → SW activates → page reloads with new code. */
.qa-update-pill{
  position:fixed;right:18px;top:80px;z-index:9999;
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 12px 10px 14px;
  background:#f5efe1;color:#0e1d3d;
  border:1px solid rgba(14,29,61,.12);
  box-shadow:4px 4px 0 #2563eb;
  font-family:"Geist",ui-sans-serif,system-ui,sans-serif;
  font-size:13.5px;font-weight:500;letter-spacing:.01em;
  opacity:0;transform:translateY(-8px);
  transition:opacity .24s ease, transform .24s cubic-bezier(.2,.7,.2,1);
  max-width:calc(100vw - 36px);
}
.qa-update-pill[hidden]{display:none}
.qa-update-pill.is-visible{opacity:1;transform:translateY(0)}
.qa-update-pill__dot{
  width:8px;height:8px;border-radius:50%;background:#2563eb;flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(37,99,235,.55);
  animation:qaPillPulse 1.8s ease-out infinite;
}
.qa-update-pill__text{white-space:nowrap}
.qa-update-pill__apply{
  appearance:none;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;background:#0e1d3d;color:#f5efe1;
  font-family:inherit;font-size:12.5px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  transition:transform .15s ease, background .15s ease;
}
.qa-update-pill__apply:hover{transform:translateY(-1px);background:#162a55}
.qa-update-pill__apply:active{transform:translateY(0)}
.qa-update-pill__arrow{font-family:"Newsreader",ui-serif,Georgia,serif;font-style:italic;font-weight:500;font-size:14px;line-height:1}
.qa-update-pill__close{
  appearance:none;border:0;background:transparent;cursor:pointer;
  color:#0e1d3d;opacity:.55;font-size:18px;line-height:1;
  padding:2px 4px;margin-left:-2px;
  transition:opacity .15s ease;
}
.qa-update-pill__close:hover{opacity:1}

.dark .qa-update-pill{background:#0e1d3d;color:#f0f0f8;border-color:rgba(240,240,248,.15);box-shadow:4px 4px 0 #60a5fa}
.dark .qa-update-pill__dot{background:#60a5fa;box-shadow:0 0 0 0 rgba(96,165,250,.55)}
.dark .qa-update-pill__apply{background:#f0f0f8;color:#0e1d3d}
.dark .qa-update-pill__apply:hover{background:#fff}
.dark .qa-update-pill__close{color:#f0f0f8}

@keyframes qaPillPulse{
  0%   {box-shadow:0 0 0 0   rgba(37,99,235,.55)}
  70%  {box-shadow:0 0 0 10px rgba(37,99,235,0)}
  100% {box-shadow:0 0 0 0   rgba(37,99,235,0)}
}

@media (max-width:480px){
  .qa-update-pill{right:12px;top:72px;left:12px;justify-content:space-between}
  .qa-update-pill__text{font-size:13px}
}
@media (prefers-reduced-motion: reduce){
  .qa-update-pill{transition:none}
  .qa-update-pill__dot{animation:none}
  .qa-update-pill__apply{transition:none}
}

/* ── Announcement modal ──────────────────────────────────────
   One-time popup using the editorial design vocabulary —
   cream surface, ink text, Newsreader italic headline,
   Geist Mono eyebrow tag, slab+offset CTA, paper grain. */
.qa-anc-backdrop{
  position:fixed;inset:0;z-index:10000;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(14,29,61,.42);
  backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity .28s ease;
}
.qa-anc-backdrop[hidden]{display:none}
.qa-anc-backdrop.is-visible{opacity:1}

.qa-anc-modal{
  position:relative;
  width:min(440px,100%);
  background:var(--ed-cream);color:var(--ed-ink);
  padding:30px 28px 26px;
  border:1px solid rgba(14,29,61,.14);
  box-shadow:6px 6px 0 var(--ed-hot), 0 24px 60px -24px rgba(0,0,0,.55);
  transform:translateY(12px) scale(.97);
  transition:transform .28s cubic-bezier(.2,.7,.2,1);
  overflow:hidden;
  isolation:isolate;
}
.qa-anc-backdrop.is-visible .qa-anc-modal{transform:translateY(0) scale(1)}

/* Paper grain overlay — matches /auth/login form side */
.qa-anc-modal__grain{
  position:absolute;inset:0;pointer-events:none;z-index:-1;
  opacity:.10;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

.qa-anc-modal__close{
  position:absolute;top:10px;right:12px;
  appearance:none;border:0;background:transparent;cursor:pointer;
  color:var(--ed-ink);opacity:.55;
  font-family:var(--ed-sans);font-size:22px;line-height:1;
  padding:6px 8px;
  transition:opacity .15s ease;
}
.qa-anc-modal__close:hover{opacity:1}

.qa-anc-modal__eyebrow{
  font-family:var(--ed-mono);font-size:12px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--ed-hot);
  display:flex;align-items:center;gap:10px;
  margin:0 0 16px;
}
.qa-anc-modal__eyebrow::before{
  content:"";display:block;width:24px;height:1px;background:var(--ed-hot);
}

.qa-anc-modal__title{
  font-family:var(--ed-serif);font-style:italic;font-weight:500;
  font-size:clamp(26px,5vw,32px);line-height:1.1;letter-spacing:-.015em;
  color:var(--ed-ink);
  margin:0 0 14px;
}

.qa-anc-modal__body{
  font-family:var(--ed-sans);font-size:14px;line-height:1.6;
  color:var(--ed-ink);opacity:.82;
  margin:0 0 24px;
  white-space:pre-line;
}

.qa-anc-modal__got-it{
  position:relative;
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 20px;
  background:var(--ed-ink);color:var(--ed-cream);
  appearance:none;border:0;cursor:pointer;
  font-family:var(--ed-sans);font-weight:500;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;
  transition:transform .18s cubic-bezier(.2,.7,.2,1);
}
.qa-anc-modal__got-it::after{
  content:"";position:absolute;inset:5px 5px -5px -5px;
  background:var(--ed-hot);z-index:-1;
  transition:inset .18s cubic-bezier(.2,.7,.2,1);
}
.qa-anc-modal__got-it:hover{transform:translate(-2px,-2px)}
.qa-anc-modal__got-it:hover::after{inset:7px 7px -7px -7px}
.qa-anc-modal__got-it:active{transform:translate(0,0)}
.qa-anc-modal__got-it:active::after{inset:3px 3px -3px -3px}
.qa-anc-modal__arrow{
  font-family:var(--ed-serif);font-style:italic;font-weight:500;
  font-size:16px;line-height:1;text-transform:none;letter-spacing:0;
}

/* Dark mode — flip surface to ink, text to cream, brighter blue */
.dark .qa-anc-backdrop{background:rgba(0,0,0,.55)}
.dark .qa-anc-modal{
  background:var(--ed-ink);color:var(--ed-cream);
  border-color:rgba(245,239,225,.14);
  box-shadow:6px 6px 0 var(--ed-hot-light), 0 24px 60px -24px rgba(0,0,0,.8);
}
.dark .qa-anc-modal__close{color:var(--ed-cream)}
.dark .qa-anc-modal__eyebrow{color:var(--ed-hot-light)}
.dark .qa-anc-modal__eyebrow::before{background:var(--ed-hot-light)}
.dark .qa-anc-modal__title{color:var(--ed-cream)}
.dark .qa-anc-modal__body{color:var(--ed-cream)}
.dark .qa-anc-modal__got-it{background:var(--ed-cream);color:var(--ed-ink)}
.dark .qa-anc-modal__got-it::after{background:var(--ed-hot-light)}

@media (max-width:480px){
  .qa-anc-backdrop{padding:16px}
  .qa-anc-modal{padding:26px 22px 22px}
  .qa-anc-modal__title{font-size:24px}
}
@media (prefers-reduced-motion: reduce){
  .qa-anc-backdrop,
  .qa-anc-modal,
  .qa-anc-modal__got-it,
  .qa-anc-modal__got-it::after{transition:none}
}

/* ── App chrome (Phase 4) — nav shell, settings dropdown, banners */
.qa-nav {
  background: var(--ed-cream);
  border-bottom: 1px solid rgba(14, 29, 61, 0.10);
  position: relative; z-index: 40;
}
.qa-nav__inner {
  max-width: 1200px; margin: 0 auto;
  padding: 0 16px;
  display: flex; justify-content: space-between; align-items: center;
  height: 60px;
}
.qa-nav__right { display: flex; align-items: center; gap: 14px; }

.qa-nav-avatar {
  appearance: none; border: 0; cursor: pointer; padding: 0;
  background: transparent;
  border-radius: 999px;
  outline: 2px solid transparent;
  outline-offset: 2px;
  transition: outline-color .15s;
}
.qa-nav-avatar:hover { outline-color: var(--ed-hot); }
.qa-nav-avatar:focus-visible { outline-color: var(--ed-hot); }

/* Settings dropdown */
.qa-nav-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 250px;
  background: var(--ed-cream);
  border: 1px solid var(--ed-ink);
  box-shadow: 4px 4px 0 var(--ed-hot);
  z-index: 50;
  font-family: var(--ed-sans);
  color: var(--ed-ink);
}
.qa-nav-dropdown.hidden { display: none; }
.qa-nav-dropdown__user {
  padding: 14px 16px;
  background: var(--ed-cream-2);
  border-bottom: 1px solid rgba(14, 29, 61, 0.10);
  display: flex; align-items: center; gap: 12px;
}
.qa-nav-dropdown__user-text { min-width: 0; flex: 1; }
.qa-nav-dropdown__eyebrow {
  font-family: var(--ed-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ed-ink); opacity: .58;
  margin: 0 0 3px;
}
.qa-nav-dropdown__name {
  font-family: var(--ed-serif);
  font-style: italic; font-weight: 500;
  font-size: 15px; line-height: 1.2;
  color: var(--ed-ink);
  margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.qa-nav-dropdown__row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(14, 29, 61, 0.08);
}
.qa-nav-dropdown__row-label {
  font-family: var(--ed-mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ed-ink);
}

/* Theme toggle — editorial sliding square */
#themeToggle {
  position: relative; width: 36px; height: 18px;
  appearance: none; border: 1px solid var(--ed-ink);
  background: var(--ed-cream-2) !important;
  cursor: pointer;
  border-radius: 0;
  padding: 0;
  transition: background-color .15s;
}
#themeToggle[aria-checked="true"] { background: var(--ed-ink) !important; }
#themeToggleKnob {
  position: absolute; left: 1px; top: 1px;
  width: 12px; height: 12px;
  background: var(--ed-ink) !important;
  border-radius: 0;
  box-shadow: none !important;
  transition: transform .18s cubic-bezier(.2,.7,.2,1), background-color .15s;
  display: block;
}
#themeToggle[aria-checked="true"] #themeToggleKnob {
  transform: translateX(18px) !important;
  background: var(--ed-cream) !important;
}

/* Action links */
.qa-nav-dropdown__link {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 11px 16px;
  font-family: var(--ed-mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ed-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(14, 29, 61, 0.08);
  transition: background-color .12s;
}
.qa-nav-dropdown__link:last-child { border-bottom: 0; }
.qa-nav-dropdown__link:hover { background: var(--ed-cream-2); }
.qa-nav-dropdown__link--admin { color: var(--ed-hot); }
.qa-nav-dropdown__link--logout { color: #b91c1c; }
.qa-nav-dropdown__link--logout:hover { background: rgba(185, 28, 28, 0.06); }
.qa-nav-dropdown__arrow {
  font-family: var(--ed-serif);
  font-style: italic; font-weight: 500;
  font-size: 14px;
  letter-spacing: 0; text-transform: none;
  opacity: .55;
  transition: opacity .15s, transform .15s;
}
.qa-nav-dropdown__link:hover .qa-nav-dropdown__arrow {
  opacity: 1; transform: translateX(2px);
}

/* Connection banner — editorial ink ground with pulsing red dot */
.qa-nav-conn-banner {
  background: var(--ed-ink); color: var(--ed-cream);
  font-family: var(--ed-mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 16px;
  text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.qa-nav-conn-banner.hidden { display: none; }
.qa-nav-conn-banner__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #f87171;
  animation: qaConnPulse 1.6s ease-out infinite;
}
@keyframes qaConnPulse {
  0%   { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(248, 113, 113, 0); }
  100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0); }
}

/* Migration banner — amber cream-2 with 3px left rule */
.qa-nav-mig-banner {
  background: var(--ed-cream-2);
  border-bottom: 1px solid rgba(217, 119, 6, 0.30);
  border-left: 3px solid #d97706;
}
.qa-nav-mig-banner__wrap {
  max-width: 1200px; margin: 0 auto;
  padding: 10px 16px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--ed-sans);
  font-size: 14px; line-height: 1.5;
  color: #92400e;
}
.qa-nav-mig-banner__label {
  flex-shrink: 0;
  font-family: var(--ed-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: #d97706;
}

/* Dark mode */
.dark .qa-nav {
  background: var(--ed-ink);
  border-bottom-color: rgba(245, 239, 225, 0.12);
}
.dark .qa-nav-avatar:hover,
.dark .qa-nav-avatar:focus-visible { outline-color: var(--ed-hot-light); }
.dark .qa-nav-dropdown {
  background: var(--ed-ink);
  border-color: var(--ed-cream);
  box-shadow: 4px 4px 0 var(--ed-hot-light);
  color: var(--ed-cream);
}
.dark .qa-nav-dropdown__user {
  background: rgba(245, 239, 225, 0.06);
  border-bottom-color: rgba(245, 239, 225, 0.12);
}
.dark .qa-nav-dropdown__eyebrow { color: var(--ed-cream); opacity: .62; }
.dark .qa-nav-dropdown__name { color: var(--ed-cream); }
.dark .qa-nav-dropdown__row {
  border-bottom-color: rgba(245, 239, 225, 0.10);
}
.dark .qa-nav-dropdown__row-label { color: var(--ed-cream); }
.dark #themeToggle {
  background: rgba(245, 239, 225, 0.08) !important;
  border-color: var(--ed-cream);
}
.dark #themeToggle[aria-checked="true"] { background: var(--ed-cream) !important; }
.dark #themeToggleKnob { background: var(--ed-cream) !important; }
.dark #themeToggle[aria-checked="true"] #themeToggleKnob { background: var(--ed-ink) !important; }
.dark .qa-nav-dropdown__link {
  color: var(--ed-cream);
  border-bottom-color: rgba(245, 239, 225, 0.10);
}
.dark .qa-nav-dropdown__link:hover { background: rgba(245, 239, 225, 0.06); }
.dark .qa-nav-dropdown__link--admin { color: var(--ed-hot-light); }
.dark .qa-nav-dropdown__link--logout { color: #fca5a5; }
.dark .qa-nav-dropdown__link--logout:hover { background: rgba(252, 165, 165, 0.10); }
.dark .qa-nav-conn-banner {
  background: #7f1d1d; color: var(--ed-cream);
}
.dark .qa-nav-mig-banner {
  background: rgba(217, 119, 6, 0.14);
  border-bottom-color: rgba(217, 119, 6, 0.40);
  border-left-color: #fbbf24;
}
.dark .qa-nav-mig-banner__wrap { color: #fde68a; }
.dark .qa-nav-mig-banner__label { color: #fbbf24; }

@media (prefers-reduced-motion: reduce) {
  .qa-nav-conn-banner__dot { animation: none; }
  .qa-nav-dropdown__link,
  .qa-nav-dropdown__arrow,
  #themeToggle,
  #themeToggleKnob { transition: none; }
}