/* ── Listogics — Core Styles ───────────────────────────────────────────────── */
/* Design direction: a maker's workshop tool, not a generic dark SaaS
   dashboard. Warm, materials-grounded palette (linen canvas, espresso ink,
   ember accent) that suits handmade work of ANY craft — clay, silver,
   fibre, paper, wood — never one of them in particular.
   See .superpowers/sdd/ui-design-notes.md for the full brief. */

:root {
  /* Backgrounds — warm, layered, never stark white or pure black */
  --canvas:     #EDE7D9;  /* page background — raw linen */
  --panel:      #F7F3E9;  /* cards/panels sitting on canvas */
  --panel-2:    #FFFDF8;  /* raised panel (modals, popovers, inputs) */
  --canvas-dim: #E3DBC9;  /* sidebar / recessed areas */

  /* Borders */
  --border-1:   #DCD2BB;
  --border-2:   #C9BC9C;
  --border-3:   #B3A483;

  /* Accent — ember. Warm and handmade-feeling, which suits Etsy sellers
     of every kind; it is not tied to any one craft or material. */
  --ember:        #C1621F;
  --ember-dim:    #8F491A;
  --ember-bright: #DE7A34;
  --ember-glow:   rgba(193, 98, 31, 0.14);

  /* Accent — brick red (danger) */
  --red:        #9C4A3C;
  --red-dim:    #6E362C;
  --red-bright: #B85B4B;

  /* Accent — moss (success) */
  --green:        #566246;
  --green-dim:    #3D4531;
  --green-bright: #6C7A56;

  /* A muted warm plum, used sparingly for a third categorical accent
     (replaces a stray blue that didn't belong in this palette) */
  --plum:       #7A5C63;

  /* Text — warm espresso-charcoal, never pure black */
  --text-1:     #2B231C;
  --text-2:     #473C31;
  --text-3:     #6B5D4D;
  --text-4:     #8F8168;

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Work Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', 'Courier New', monospace;

  /* Layout */
  --sidebar-width: 224px;
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;

  /* Shadows — soft, warm-toned, the thing a flat dark theme can't do */
  --shadow-sm: 0 1px 2px rgba(43, 35, 28, 0.06), 0 1px 1px rgba(43, 35, 28, 0.04);
  --shadow-md: 0 4px 12px rgba(43, 35, 28, 0.08), 0 2px 4px rgba(43, 35, 28, 0.05);
  --shadow-lg: 0 12px 32px rgba(43, 35, 28, 0.12), 0 4px 8px rgba(43, 35, 28, 0.06);

  /* Transitions */
  --transition: 150ms ease;

  /* Semantic aliases — used by review_publish.html inline styles */
  --border:         #DCD2BB;   /* = --border-1 */
  --accent:         #C1621F;   /* = --ember */
  --surface:        #F7F3E9;   /* = --panel */
  --surface-raised: #FFFDF8;   /* = --panel-2 */
  --text-muted:     #8F8168;   /* = --text-4 */
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

html {
  font-size: 15px;
  scroll-behavior: smooth;
  /* overflow-x lives HERE, not on body. On body it forces the browser to
     compute body's overflow-y as `auto`, which makes BODY a scroll
     container instead of the viewport — and the page then stops scrolling
     even while its content is taller than the screen. Reported live on the
     sign-in page: content below the fold, unreachable. */
  overflow-x: hidden;
}

body {
  background: var(--canvas);
  color: var(--text-1);
  font-family: var(--font-body);
  line-height: 1.6;
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ──────────────────────────────────────────────────────────────── */

.sidebar {
  width: var(--sidebar-width);
  min-height: 100vh;
  background: var(--canvas-dim);
  border-right: 1px solid var(--border-1);
  display: flex;
  flex-direction: column;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
}

.sidebar-logo {
  padding: 30px 24px 4px;
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 9px;
}

/* Optical alignment: the mark's cap sits slightly above the wordmark's
   x-height, so nudge it down a hair rather than centring mathematically. */
.logo-mark {
  width: 26px;
  height: 26px;
  flex: none;
  margin-top: 1px;
}

.logo-insta {
  color: var(--text-1);
}

.logo-list {
  color: var(--ember);
}

.sidebar-tagline {
  padding: 0 24px 22px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-4);
  border-bottom: 1px solid var(--border-1);
  margin-bottom: 16px;
}

.nav-links {
  list-style: none;
  flex: 1;
  /* min-height:0 lets this flex child shrink below its content height so it can
     SCROLL, instead of pushing the pinned bottom section (Plans & Pricing,
     Settings, Sign out) off the bottom of a short viewport — the bug where the
     Pricing tab was clipped out of view. */
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-1) transparent;
}

.nav-links::-webkit-scrollbar {
  width: 6px;
}
.nav-links::-webkit-scrollbar-thumb {
  background: var(--border-1);
  border-radius: 3px;
}
.nav-links::-webkit-scrollbar-track {
  background: transparent;
}

.nav-item {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: var(--text-3);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: color var(--transition), background var(--transition);
}

.nav-link:hover {
  color: var(--text-1);
  background: var(--panel);
}

.nav-item.active .nav-link,
.nav-link.active {
  color: var(--ember);
  background: var(--ember-glow);
  font-weight: 600;
}

.nav-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  stroke: currentColor;
}

.sidebar-bottom {
  padding: 12px;
  border-top: 1px solid var(--border-1);
}

/* The sign-out control has to be a <form method="post"> (the route it
   hits, POST /api/oauth/logout, is not a GET), so its trigger is a real
   <button>, not an <a>. This resets the button chrome back to nothing so
   it reads as just another sidebar row, matching .nav-link exactly. */
.sidebar-logout-form {
  margin: 0;
}

.nav-link-button {
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mobile-topbar {
  display: none; /* shown only under the mobile breakpoint, defined at
                     the end of this file so it wins the cascade over
                     the unconditional rules it overrides */
}

.sidebar-scrim {
  display: none;
}

/* ── Main Content ─────────────────────────────────────────────────────────── */

.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-height: 100vh;
  padding: 36px 40px;
  max-width: calc(100vw - var(--sidebar-width));
}

/* ── Page Header ──────────────────────────────────────────────────────────── */

.page-header {
  margin-bottom: 30px;
}

.page-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: -0.01em;
  line-height: 1.1;
  position: relative;
  display: inline-block;
}

/* The signature moment: a thin ember line sweeps under the page title once
   on load, like a pen underlining it. Restrained — happens once, only
   here, nowhere else. */
.page-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--ember) 0%, var(--ember-bright) 60%, transparent 100%);
  transform-origin: left center;
  animation: burn-reveal 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.1s both;
}

@keyframes burn-reveal {
  from { transform: scaleX(0); opacity: 0.4; }
  to   { transform: scaleX(1); opacity: 1; }
}

.page-subtitle {
  font-size: 14px;
  color: var(--text-3);
  margin-top: 10px;
}

/* ── Page Intro ───────────────────────────────────────────────────────────── */
/* One shared "what this page is for" sentence or two, reused at the top of
   every seller-facing page (Dashboard, New Listing, Drafts, Published,
   Optimize, Keywords, Concepts, Competitors, Review & Publish, Shop
   Profile, Scheduler, Settings, Pricing). Deliberately plain text with no
   border or background — thirteen bordered callouts would read as thirteen
   separate warnings, not one calm sentence under the title. */
.page-intro {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-3);
  max-width: 70ch;
  margin: -16px 0 24px;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */

.card {
  background: var(--panel);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.card-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: 0.01em;
}

/* ── Grid ─────────────────────────────────────────────────────────────────── */

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--ember);
  color: #FFFBF3;
  border-color: var(--ember);
  box-shadow: 0 2px 8px rgba(193, 98, 31, 0.25);
}

.btn-primary:hover:not(:disabled) {
  background: var(--ember-bright);
  border-color: var(--ember-bright);
  box-shadow: 0 4px 14px rgba(193, 98, 31, 0.32);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--panel-2);
  color: var(--text-2);
  border-color: var(--border-2);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--panel);
  color: var(--text-1);
  border-color: var(--border-3);
}

.btn-danger {
  background: transparent;
  color: var(--red);
  border-color: var(--red-dim);
}

.btn-danger:hover:not(:disabled) {
  background: rgba(156, 74, 60, 0.08);
  border-color: var(--red);
}

.btn-ghost {
  background: transparent;
  color: var(--text-3);
  border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
  color: var(--text-1);
  background: var(--panel);
}

.btn-sm {
  padding: 6px 14px;
  font-size: 13px;
}

.btn-lg {
  padding: 14px 30px;
  font-size: 15px;
  font-weight: 600;
}

/* ── Forms ────────────────────────────────────────────────────────────────── */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.form-input,
.form-textarea,
.form-select {
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 14px;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--ember-dim);
  box-shadow: 0 0 0 3px var(--ember-glow);
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-4);
}

.form-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.form-hint {
  font-size: 12px;
  color: var(--text-4);
}

/* Radio rows — a whole-row target, not a bare radio with a label beside it.
   Added for the Etsy attestation questions on the Profile page, which are
   the first radios in the product; there was no radio styling at all before
   (#106). The row is the click target so a small circle is never the only
   thing to hit. */
.radio-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-md);
  color: var(--text-1);
  cursor: pointer;
  font-size: 14px;
  transition: border-color var(--transition), background var(--transition);
}

.radio-row:hover {
  border-color: var(--ember-dim);
}

.radio-row input[type="radio"] {
  accent-color: var(--ember-dim);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin: 0;
  cursor: pointer;
}

/* The chosen answer stays visible at a glance — these questions block
   publishing, so "have I answered this?" must be readable without
   hunting for a filled dot. */
.radio-row:has(input[type="radio"]:checked) {
  border-color: var(--ember-dim);
  background: var(--ember-glow);
}

.char-counter {
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--text-4);
  text-align: right;
}

.char-counter.warning { color: var(--ember); }
.char-counter.over    { color: var(--red); }

/* Visible keyboard focus everywhere, not just form inputs */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

/* ── Tables ───────────────────────────────────────────────────────────────── */

.table-wrap {
  overflow-x: auto;
}

/* Caps a long, filterable table's page footprint (e.g. Keywords, which can
   run to 100+ rows) without hiding rows — filter/search JS still operates
   on the full row set, this just makes the viewport scroll instead of the
   page. The sticky header needs an opaque background matching whatever
   sits behind the table (--panel, same as .card) or content scrolling
   underneath would show through. */
.table-wrap-scroll {
  overflow-x: auto;
  max-height: 640px;
  overflow-y: auto;
}

.table-wrap-scroll thead th {
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 1;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-4);
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border-1);
}

td {
  padding: 12px 14px;
  color: var(--text-2);
  border-bottom: 1px solid var(--border-1);
  vertical-align: middle;
}

tr:last-child td { border-bottom: none; }

tr:hover td {
  background: var(--panel-2);
  color: var(--text-1);
}

/* ── Flash messages ───────────────────────────────────────────────────────── */

.flash-messages {
  margin-bottom: 20px;
}

.flash {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  margin-bottom: 8px;
  border: 1px solid;
}

.flash-success { background: rgba(86, 98, 70, 0.1);   border-color: var(--green-dim); color: var(--green); }
.flash-error   { background: rgba(156, 74, 60, 0.1);  border-color: var(--red-dim);   color: var(--red); }
.flash-info    { background: var(--ember-glow);        border-color: var(--ember-dim); color: var(--ember-dim); }

/* ── Status Badges ────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge-gold      { background: var(--ember-glow);            color: var(--ember-dim); }
.badge-red       { background: rgba(156, 74, 60, 0.14);      color: var(--red); }
.badge-green     { background: rgba(86, 98, 70, 0.16);       color: var(--green); }
.badge-gray      { background: var(--border-1);              color: var(--text-3); }
.badge-published { background: rgba(86, 98, 70, 0.16);       color: var(--green); }
.badge-review    { background: var(--ember-glow);            color: var(--ember-dim); }
.badge-failed    { background: rgba(156, 74, 60, 0.14);      color: var(--red); }

/* ── Keyword tier badges ─────────────────────────────────────────────────── */
.badge-tier0 { background: rgba(86, 98, 70, 0.22);   color: #3D4531; font-weight: 700; }
.badge-tier1 { background: rgba(86, 98, 70, 0.16);   color: var(--green); }
.badge-tier2 { background: var(--ember-glow);         color: var(--ember-dim); }
.badge-tier3 { background: rgba(193, 98, 31, 0.22);   color: var(--ember-dim); }
.badge-tier4 { background: rgba(156, 74, 60, 0.14);   color: var(--red); }

/* ── Keyword filter buttons ──────────────────────────────────────────────── */
.filter-btn {
  padding: 4px 12px;
  border: 1px solid var(--border-2);
  border-radius: 20px;
  background: var(--panel-2);
  color: var(--text-3);
  font-size: .75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
}
.filter-btn:hover { border-color: var(--ember); color: var(--ember-dim); }
.filter-btn.active { background: var(--ember); border-color: var(--ember); color: #FFFBF3; }

/* ── eRank suggestion chips ──────────────────────────────────────────────── */
.suggest-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border-2);
  border-radius: 20px;
  font-size: .75rem;
  color: var(--text-2);
  cursor: default;
}
.suggest-chip .chip-meta { color: var(--text-4); font-size: .7rem; }
.suggest-chip .chip-research { color: var(--text-4); font-size: .7rem; cursor: pointer; margin-left: 2px; }
.suggest-chip .chip-research:hover { color: var(--green); }
.suggest-chip .chip-research.chip-research-busy { pointer-events: none; opacity: .55; cursor: default; }
.suggest-chip .chip-remove { color: var(--text-4); cursor: pointer; margin-left: 2px; }
.suggest-chip .chip-remove:hover { color: var(--red); }

/* ── Empty state ──────────────────────────────────────────────────────────── */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
  text-align: center;
  gap: 12px;
}

.empty-state-icon {
  width: 48px;
  height: 48px;
  color: var(--text-4);
  margin-bottom: 4px;
}

.empty-state-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-2);
}

.empty-state-body {
  font-size: 13px;
  color: var(--text-4);
  max-width: 320px;
  line-height: 1.6;
}

/* ── Card-internal scroll (keeps side-by-side dashboard cards a matched,
   sane height instead of one growing to fit an unbounded list) ───────────── */

.card-scroll {
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px; /* room for the scrollbar so content doesn't hug it */
}

/* ── Section divider ──────────────────────────────────────────────────────── */

.section-divider {
  height: 1px;
  background: var(--border-1);
  margin: 24px 0;
}

/* ── Scrollbar ────────────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-4); }

/* ── Utility ──────────────────────────────────────────────────────────────── */

.text-gold   { color: var(--ember); }
.text-red    { color: var(--red); }
.text-green  { color: var(--green); }
.text-muted  { color: var(--text-3); }
.text-mono   { font-family: var(--font-mono); }
.text-sm     { font-size: 13px; }
.text-xs     { font-size: 11px; }

.flex        { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8       { gap: 8px; }
.gap-12      { gap: 12px; }
.gap-16      { gap: 16px; }
.gap-24      { gap: 24px; }

.mt-4  { margin-top: 4px; }
.mt-8  { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }

.w-full { width: 100%; }

/* ── Mobile top bar + drawer sidebar ─────────────────────────────────────── */
/* Deliberately placed at the end of the file — it overrides several
   unconditional rules defined earlier (.grid-*, .page-title, .btn-lg,
   .main-content), and equal-specificity CSS resolves by source order,
   not by which media query "sounds" more specific. Placing this block
   earlier caused the override to silently lose the cascade (found via
   an actual scrollWidth measurement showing overflow even after the
   rules were written — not caught by reading the CSS alone). */

@media (max-width: 860px) {
  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    padding: 0 16px;
    background: var(--canvas-dim);
    border-bottom: 1px solid var(--border-1);
    z-index: 200;
  }

  .mobile-menu-btn {
    background: none;
    border: none;
    color: var(--text-1);
    padding: 6px;
    margin: -6px;
    cursor: pointer;
    display: flex;
  }

  .mobile-topbar-logo {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
  }

  .sidebar {
    transform: translateX(-100%);
    transition: transform 220ms ease;
    z-index: 300;
    box-shadow: var(--shadow-lg);
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .sidebar-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(43, 35, 28, 0.4);
    z-index: 250;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
  }

  body.sidebar-open .sidebar-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .main-content {
    margin-left: 0;
    max-width: 100vw;
    padding: 76px 20px 32px; /* top padding clears the fixed mobile topbar */
  }

  body.sidebar-open {
    overflow: hidden; /* lock page scroll while the drawer is open */
  }

  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* Button rows (e.g. Settings' "Save Keys / Connect / Disconnect") are the
     other common overflow source alongside grids — same fix, wrap instead
     of forcing a single line. */
  .flex {
    flex-wrap: wrap;
  }

  .page-header.flex {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .page-title {
    font-size: 26px;
  }

  .btn-lg, .page-header .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .grid-2, .grid-3, .grid-4 {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
  .sidebar-scrim { transition: none; }
}