.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
  align-items: stretch;
  position: relative;
  /* Warm cream→tan gradient veil over the forest, behind everything.
     Stronger near the bottom-right to give the page that warm sun-on-paper feel. */
  background:
    radial-gradient(ellipse 90% 70% at 100% 100%, color-mix(in srgb, color-mix(in srgb, var(--nav-active) 95%, var(--mix-light)) 18%, transparent), transparent 60%),
    radial-gradient(ellipse 80% 60% at 0% 0%, color-mix(in srgb, var(--cream-10) 10%, transparent), transparent 55%);
}
/* Sidebar extension veil — paints the sidebar's dark drawer color from its
   right edge further into the canvas with a smooth fade to transparent, so
   the sidebar visually melts into the forest backdrop instead of ending at a
   hard line. Sits BELOW the sidebar (z-index 0) and the main content.
   Slides in sync with sidebar collapse via :has() — same easing as the sidebar
   width transition. */
/* 1px top highlight line that spans the whole viewport. Static — never moves,
   no transitions. Gradient fades from full opacity at the left to transparent
   somewhere past the gradient extension, so it lights up the dark drawer zone
   and fades cleanly into the rest of the page. */
.app-shell::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--hi) 22%, transparent) 0%,
    color-mix(in srgb, var(--hi) 18%, transparent) 8%,
    color-mix(in srgb, var(--hi) 10%, transparent) 25%,
    color-mix(in srgb, var(--hi) 4%, transparent) 50%,
    transparent 75%);
  pointer-events: none;
  z-index: var(--z-sticky);
}

/* v05j — Sidebar gradient extension.
   Previously animated via `transform: translate3d` which runs on the
   GPU compositor thread, free of main-thread blocking. That made it
   look smoother on its own, but it then ran AHEAD of the sidebar's
   `width` transition (which is main-thread bound). The visual desync
   was the "shape moving first in the background" Hugo saw across
   every collapse / expand.
   Switching to `left` makes the gradient layout-paint-bound too — so
   it shares the same frame budget as the sidebar's width. They stop
   on the same frame, drop the same frames, and stay together. */
.app-shell::after {
  content: "";
  /* Follow the main panel's shell, including tablet document scrolling. A fixed,
     square veil showed through beyond its rounded corners as a dark rectangle. */
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--sidebar-w);
  width: 1200px;
  border-top-left-radius: var(--r-shell);
  border-bottom-left-radius: var(--r-shell);
  background: linear-gradient(to right,
    var(--sidebar-bg-trans) 0%,
    color-mix(in srgb, var(--sidebar-bg) 55%, transparent) 30%,
    color-mix(in srgb, var(--sidebar-bg) 28%, transparent) 60%,
    color-mix(in srgb, var(--sidebar-bg) 10%, transparent) 85%,
    transparent 100%);
  pointer-events: none;
  z-index: 0;
  transition: left var(--dur-4) var(--ease-glide);
}
body.sb-collapsed .app-shell::after { left: var(--sidebar-w-collapsed); }

/* The Maya material's rounded shell must cut into the rail, not expose a pale
   triangle of scenery. Back only the two OUTSIDE corners; the rounded veil and
   every panel remain unchanged. Keep this opt-in separate from existing skins. */
@container style(--sk-tex-matte: on) {
  body:not([data-ui-tier="s"]) .app-shell { --shell-corner-left: var(--sidebar-w); }
  body.sb-collapsed:not([data-ui-tier="s"]) .app-shell { --shell-corner-left: var(--sidebar-w-collapsed); }
  body[data-skin-family="paper"] .app-shell {
    --shell-corner-topline: linear-gradient(to right, color-mix(in srgb, var(--hi) 22%, transparent) 0%, color-mix(in srgb, var(--hi) 18%, transparent) 8%, color-mix(in srgb, var(--hi) 10%, transparent) 25%, color-mix(in srgb, var(--hi) 4%, transparent) 50%, transparent 75%);
  }
  body[data-skin-family]:not([data-ui-tier="s"]) .app-shell::before {
    position: absolute;
    bottom: 0;
    height: auto;
    z-index: 0;
    background:
      radial-gradient(circle at 100% 100%, transparent calc(var(--r-shell) - var(--shell-corner-aa)), var(--sk-rail-surface-1, var(--sk-sidebar-fill-2, var(--sk-rail))) calc(var(--r-shell) + var(--shell-corner-aa))) var(--shell-corner-left) 0 / var(--r-shell) var(--r-shell) no-repeat,
      radial-gradient(circle at 100% 0%, transparent calc(var(--r-shell) - var(--shell-corner-aa)), var(--sk-rail-surface-1, var(--sk-sidebar-fill-3, var(--sk-rail))) calc(var(--r-shell) + var(--shell-corner-aa))) var(--shell-corner-left) 100% / var(--r-shell) var(--r-shell) no-repeat,
      var(--shell-corner-topline, linear-gradient(transparent, transparent)) 0 0 / 100% 1px no-repeat;
    transition: background-position var(--dur-4) var(--ease-glide);
  }
}

/* 24 Sep 2026 - Hugo, in the night-blue slate skin: "why do we still have that little corner top left of the main
   panel?" In the glass family the main column paints nothing (skin-glass.css: no fill and, since today, no rim), so
   there is no rounded panel for the veil to follow. The rounded veil above left its two outer corners bare - a notch
   of un-veiled photo beside the rail - and the stone seal painted the same notch in the rail's colour. In glass the
   veil is square again (a skin's --sk-shell-corner pieces show once more) and the seal paints nothing. Paper and
   forest keep both: their main column is a painted, rounded panel. */
body[data-skin-family="glass"] .app-shell::after { border-top-left-radius: 0; border-bottom-left-radius: 0; }
@container style(--sk-tex-matte: on) {
  body[data-skin-family="glass"]:not([data-ui-tier="s"]) .app-shell::before { background: none; }
}

.main-area {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 2;
}


.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  height: 100vh;
  /* generous right padding so all sidebar content stops well clear of the
     main panel's left edge — gives the content room to breathe. */
  padding: 18px 38px 16px 14px;
  /* Solid drawer bg across full width — glass blur on top of the forest backdrop.
     The transition to cream is handled by the main-content's left-edge gradient. */
  background: var(--sidebar-bg-trans);
  color: var(--ink-on-dark);
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--card-border) 35%, transparent) transparent;
  backdrop-filter: blur(24px) saturate(1.15);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
  position: relative;
  z-index: 1;
  transition: width var(--dur-4) var(--ease-glide),
              flex-basis var(--dur-4) var(--ease-glide),
              padding var(--dur-4) var(--ease-glide);
}

/* Collapsed state — icons only, ~64px wide */
.sidebar.is-collapsed {
  width: var(--sidebar-w-collapsed);
  flex: 0 0 var(--sidebar-w-collapsed);
  padding: 18px 8px 16px;
}
.sidebar.is-collapsed .sb-wordmark,
.sidebar.is-collapsed .nav-label,
.sidebar.is-collapsed .sb-collapse-btn { display: none; }
/* v05j — Keep nav labels on one line. Two-word labels like "Help & Docs"
   were briefly wrapping to two lines while the sidebar was still narrow
   in the middle of the expand transition, then snapping back to one
   line at full width — an awkward visual jitter. Overflow is clipped
   by the sidebar's overflow-x:hidden so this is safe. */
.nav-label { white-space: nowrap; }
.sidebar.is-collapsed .sidebar-logo {
  justify-content: center;
  padding: 6px 0 14px;
  gap: 0;
}
.sidebar.is-collapsed .nav-item {
  justify-content: center;
  padding: 10px 0;
  gap: 0;
}
.sidebar.is-collapsed .nav-list { padding: 0; }
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--card-border) 30%, transparent); border-radius: 3px; }
.sidebar-spacer { flex: 1; min-height: 8px; position: relative; }
.sidebar-spacer::before,
.sidebar-spacer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* logo */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 14%, transparent);
}
.sb-glyph {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--leaf) 18%, transparent);
  color: color-mix(in srgb, var(--leaf-bright) 59%, var(--mix-light));
  border: 1px solid color-mix(in srgb, var(--card-border) 25%, transparent);
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
  font: inherit;
  transition: background var(--dur-1) ease, transform var(--dur-1) ease, border-color var(--dur-1) ease;
}
.sb-glyph:hover {
  background: color-mix(in srgb, var(--leaf) 28%, transparent);
  border-color: color-mix(in srgb, var(--card-border) 45%, transparent);
  transform: scale(1.04);
}
.sb-glyph:active { transform: scale(0.96); }
.sb-glyph svg { width: 20px; height: 20px; }
/* v05j — Keep the sidebar logo a constant 32×32 across collapsed and
   expanded states. Previously the collapsed state grew the glyph to
   36×36 instantly (no transition on width/height), which made the
   .sidebar-logo box 4 px taller and shoved the nav rows down on
   collapse + snapped them back up on expand — that's the "icons jump
   up then come back down" Hugo could see. Same height always = no
   shove. The optical hierarchy of "smaller icon among icons-only nav"
   stays intact since the glyph was already 32 px (bigger than the
   20 px nav icons). */
.sb-wordmark { display: flex; align-items: center; flex: 1; min-width: 0; }
.sb-collapse-btn {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--card-border) 20%, transparent);
  border-radius: var(--r-xs);
  color: var(--ink-on-dark-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.sb-collapse-btn:hover {
  background: color-mix(in srgb, var(--mix-light) 6%, transparent);
  color: var(--ink-on-dark);
  border-color: color-mix(in srgb, var(--card-border) 40%, transparent);
}
.sb-title {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  letter-spacing: var(--track-01);
  color: var(--ink-on-dark);
  line-height: 1;
}
/* (18 Sep 2026) The brand ORNAMENT slot: a small box right after the wordmark (an absolutely positioned
   box with no offsets sits where the word ends). No paint of its own: the paper family paints it
   through a mask (skin-paper.css, --sk-orn-brand-*) only when a skin gives it a colour and an image.
   Out of flow, so it moves nothing; the collapsed rail hides the wordmark and the box with it. Its size
   (tokens.css --orn-brand-*) fits the 22.8 px between the word and the collapse button. The box exists
   only while the skin paints it (the family gives it its content): an empty one still changed how Chrome
   rasterises a blurred, scrolling rail (measured on neon, 18 Sep 2026). */
.sb-title::after {
  position: absolute;
  width: var(--orn-brand-w);
  height: var(--orn-brand-h);
  margin-left: var(--orn-brand-gap);
  margin-top: var(--orn-brand-dy);
  pointer-events: none;
}

/* nav */
.nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-list { padding: 0 4px; position: relative; }

/* 16 Sep 2026 — Hugo: "the animation im talking about is when we click on a new one,
   the Selected button should slide to the new one."
   ONE highlight for the whole menu, moved to wherever the active item is, instead of
   each item painting and un-painting its own. It carries the pill, its ring and its
   sheen, so the whole look travels rather than a colour fading in one place and out of
   another. Sidebar.jsx measures the active button's own box and drives translateY and
   height, so it lands exactly on it whatever the preset or the drag order.
   The paint below is byte-for-byte the .nav-item.active paint that was here before, so
   every skin keeps the look it had — only the movement is new. */
.nav-slider {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: var(--r-panel);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--nav-active) 30%, transparent) 0%,
    color-mix(in srgb, var(--gold-deep) 14%, transparent) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--hi-2) 45%, transparent),
    inset 0 -1px 0 color-mix(in srgb, color-mix(in srgb, var(--shadow-ink-2) 94%, var(--mix-dark)) 18%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 6px 16px rgba(0, 0, 0, 0.32);
  transition:
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    height 280ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 160ms ease;
}
/* the ring and the specular travel with it */
.nav-slider::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(95deg,
    color-mix(in srgb, var(--hi-3) 95%, transparent) 0%,
    color-mix(in srgb, var(--nav-active) 75%, transparent) 18%,
    color-mix(in srgb, var(--foil) 40%, transparent) 38%,
    color-mix(in srgb, var(--foil) 10%, transparent) 60%,
    color-mix(in srgb, color-mix(in srgb, var(--hi) 71%, var(--mix-light)) 18%, transparent) 86%,
    color-mix(in srgb, var(--mix-light) 32%, transparent) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.nav-slider::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--hi-3) 20%, transparent) 0%,
    color-mix(in srgb, var(--hi-3) 0%, transparent) 45%);
}
/* the item itself keeps only its INK — the slider is the pill now, so there is never
   more than one highlight on screen */
.nav-list .nav-item.active {
  background: none;
  box-shadow: none;
}
.nav-list .nav-item.active::before,
.nav-list .nav-item.active::after { content: none; }
.nav-item-wrap { z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .nav-slider { transition: none; }
}

/* v07zw — Drag-reorderable nav items. Each item is wrapped in a
   draggable .nav-item-wrap so the user can rearrange the menu
   order. The inner <button> stays the click target — drag and
   click are different gestures so navigation isn't broken. */
.nav-item-wrap {
  position: relative;
}
.nav-item-wrap.is-dragging { opacity: 0.45; }
.nav-item-wrap.is-drop-target::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 4px;
  right: 4px;
  height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--gold-2) 95%, transparent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--gold-2) 55%, transparent);
  pointer-events: none;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 0 2px;
  border-radius: var(--r-panel);
  background: transparent;
  border: 1px solid transparent;
  color: color-mix(in srgb, var(--ink-nav) 78%, transparent);
  font-family: var(--font-body);
  font-size: var(--fs-13);
  font-weight: var(--fw-med);
  cursor: pointer;
  text-align: left;
  width: calc(100% - 4px);
  transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.nav-item:hover {
  background: color-mix(in srgb, var(--mix-light) 5%, transparent);
  color: var(--ink-nav);
}
.nav-item { position: relative; }
.nav-item.active {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--nav-active) 30%, transparent) 0%,
    color-mix(in srgb, var(--gold-deep) 14%, transparent) 100%);
  border-color: transparent;
  color: var(--ink-nav);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--hi-2) 45%, transparent),
    inset 0 -1px 0 color-mix(in srgb, color-mix(in srgb, var(--shadow-ink-2) 94%, var(--mix-dark)) 18%, transparent),
    0 1px 2px rgba(0, 0, 0, 0.18),
    0 6px 16px rgba(0, 0, 0, 0.32);
}
.nav-item.active .nav-icon { color: var(--ink-nav); }
/* Gold ring that fades horizontally — bright gold on the LEFT, fades through
   the middle, and lands on a faint glass-cream highlight on the RIGHT edge. */
.nav-item.active::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(95deg,
    color-mix(in srgb, var(--hi-3) 95%, transparent) 0%,
    color-mix(in srgb, var(--nav-active) 75%, transparent) 18%,
    color-mix(in srgb, var(--foil) 40%, transparent) 38%,
    color-mix(in srgb, var(--foil) 10%, transparent) 60%,
    color-mix(in srgb, color-mix(in srgb, var(--hi) 71%, var(--mix-light)) 18%, transparent) 86%,
    color-mix(in srgb, var(--mix-light) 32%, transparent) 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
/* Top specular sheen — gives the gold its metallic catch-light. */
.nav-item.active::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--hi-3) 20%, transparent) 0%,
    color-mix(in srgb, var(--hi-3) 0%, transparent) 45%);
}
.nav-icon {
  display: inline-flex;
  width: 20px;
}

/* footer cards */
.sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Project Day — cream glass card matching the main panels */
.project-day {
  background: color-mix(in srgb, var(--card-bg-solid) 92%, transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.20);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.20);
  border: none;
  border-radius: var(--r-md);
  padding: 12px 14px;
  color: var(--ink);
  position: relative;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--hi) 65%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--hi-2) 35%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 6%, transparent),
    0 2px 6px color-mix(in srgb, var(--shadow-ink) 10%, transparent),
    0 12px 24px color-mix(in srgb, var(--shade) 28%, transparent);
  overflow: hidden;
}
/* Pipeline Stage — dark glass card matching the footer panels */
.pipeline-stage {
  background: color-mix(in srgb, var(--shade-2) 18%, transparent);
  backdrop-filter: blur(20px) saturate(1.20);
  -webkit-backdrop-filter: blur(20px) saturate(1.20);
  border: none;
  border-radius: var(--r-md);
  padding: 12px 14px;
  color: var(--ink-cream-8);
  position: relative;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--hi) 28%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--hi-2) 14%, transparent),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16),
    0 2px 6px rgba(0, 0, 0, 0.18),
    0 12px 24px rgba(0, 0, 0, 0.30);
  overflow: hidden;
  text-shadow: 0 1px 1px var(--panel-text-shadow-color);
}
/* gold-foil ring on both — fades on bottom-right */
.project-day::before, .pipeline-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--hi-3) 72%, transparent) 0%,
    color-mix(in srgb, var(--foil) 34%, transparent) 22%,
    color-mix(in srgb, var(--foil) 8%, transparent) 45%,
    transparent 65%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
/* Project Day — light-card token overrides */
.project-day .pd-label {
  color: var(--ink-muted);
}
.project-day .pd-num {
  color: var(--ink);
}
.project-day .pd-date {
  color: var(--ink-muted);
}
.pd-label, .ps-label {
  font-size: var(--fs-10);
  letter-spacing: var(--track-14);
  font-weight: var(--fw-semi);
  color: color-mix(in srgb, var(--ink-cream-8) 62%, transparent);
  text-transform: uppercase;
}
.pd-num {
  font-family: var(--font-display);
  font-size: var(--fs-36);
  line-height: 1;
  letter-spacing: var(--track-01);
  margin: 4px 0 4px;
  color: var(--ink-nav);
}
.pd-date {
  font-size: var(--fs-11);
  color: color-mix(in srgb, var(--ink-cream-8) 70%, transparent);
}
.ps-text {
  font-size: var(--fs-12);
  margin: 6px 0 4px;
  color: var(--ink-cream-8);
}
/* v03c — "Next: <stage>" line below the current stage name. */
.ps-next {
  font-size: var(--fs-10-5);
  font-style: italic;
  color: color-mix(in srgb, var(--ink-paper-2) 74%, var(--mix-dark));
  margin-bottom: 8px;
}
.ps-dots {
  display: flex;
  gap: 4px;
}
.ps-dots .dot {
  width: 18px; height: 4px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--card-border) 18%, transparent);
}
.ps-dots .dot.done { background: var(--ok); }
.ps-dots .dot.current { background: var(--warn); box-shadow: 0 0 0 var(--ring-w) color-mix(in srgb, var(--warn) 30%, transparent); }
/* v07zz366 — admin-settable pipeline stage. */
.pipeline-stage.is-settable { cursor: pointer; }
.pipeline-stage.is-settable:hover { background: color-mix(in srgb, var(--mix-light) 3%, transparent); }
.ps-manual {
  margin-left: 6px;
  font-size: var(--fs-8-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-04);
  color: var(--amber);
  opacity: 0.9;
}
.ps-picker {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--card-border) 18%, transparent);
}
.ps-pick {
  text-align: left;
  background: none;
  border: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--fs-12);
  padding: 5px 8px;
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: background 110ms ease, color 110ms ease;
}
.ps-pick:hover { background: color-mix(in srgb, var(--mix-light) 6%, transparent); color: var(--white); }
.ps-pick.is-on { background: color-mix(in srgb, var(--amber) 18%, transparent); color: var(--amber); font-weight: var(--fw-bold); }
.ps-pick-auto { margin-top: 4px; font-size: var(--fs-11); opacity: 0.85; border-top: 1px dashed color-mix(in srgb, var(--card-border) 18%, transparent); padding-top: 7px; }

/* Sidebar Shot Queue (compact, dark glass) */
.sb-queue {
  background: color-mix(in srgb, var(--shade-2) 18%, transparent);
  backdrop-filter: blur(20px) saturate(1.20);
  -webkit-backdrop-filter: blur(20px) saturate(1.20);
  border: none;
  border-radius: var(--r-md);
  padding: 11px 12px 10px;
  color: var(--ink-cream-8);
  display: flex; flex-direction: column; gap: 10px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--hi) 28%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--hi-2) 14%, transparent),
    inset 0 -1px 0 rgba(0, 0, 0, 0.16),
    0 2px 6px rgba(0, 0, 0, 0.18),
    0 12px 24px rgba(0, 0, 0, 0.30);
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 1px var(--panel-text-shadow-color);
}
.sb-queue::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--hi-3) 65%, transparent) 0%,
    color-mix(in srgb, var(--foil) 30%, transparent) 22%,
    color-mix(in srgb, var(--foil) 8%, transparent) 45%,
    transparent 65%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.sb-queue-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 22%, transparent);
}
.sb-queue-title {
  font-size: var(--fs-9-5); letter-spacing: var(--track-16); font-weight: var(--fw-semi);
  color: var(--ink-cream-8);
}
.sb-queue-meta {
  font-size: var(--fs-9-5); color: color-mix(in srgb, var(--ink-cream-8) 60%, transparent);
  font-feature-settings: var(--tnum);
}

/* v815 — up to 10 rows per queue (was 2 image / 1 video). The section scrolls inside
   itself so the card gets much taller but can never run past the sidebar. */
.sb-q-section { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; }
.sb-q-sub {
  font-size: var(--fs-8-5); letter-spacing: var(--track-14); font-weight: var(--fw-semi);
  color: color-mix(in srgb, var(--ink-cream-8) 55%, transparent);
}
.sb-q-row { display: flex; flex-direction: column; gap: 3px; }
.sb-q-line1 {
  display: flex; align-items: baseline; gap: 6px;
  font-feature-settings: var(--tnum);
}
/* v815 — Hugo: "make the shot numbers on the panel much bigger, and remove the
   sequence tag". The shot id is the thing he scans this card for; the S## chip is gone
   from the markup, so its rule went with it rather than sitting here unused. */
.sb-q-id { font-family: var(--font-display); font-size: var(--fs-18); line-height: 1.05; color: color-mix(in srgb, var(--foil) 33%, var(--mix-light)); letter-spacing: var(--track-01); }
.sb-q-eta { margin-left: auto; font-size: var(--fs-10); color: color-mix(in srgb, var(--ink-cream-8) 60%, transparent); }
.sb-q-line2 { display: flex; align-items: center; gap: 6px; }
.sb-q-track {
  flex: 1; height: 3px; border-radius: 2px;
  background: color-mix(in srgb, var(--card-border) 15%, transparent); overflow: hidden;
}
.sb-q-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--amber));
}
.sb-q-stage { font-size: var(--fs-9-5); color: color-mix(in srgb, var(--ink-cream-8) 55%, transparent); }
.sb-q-model { font-family: var(--font-mono); font-size: var(--fs-9-5); color: color-mix(in srgb, var(--ink-cream-8) 85%, transparent); }
.sb-q-badge {
  font-size: 8px; letter-spacing: var(--track-08); font-weight: var(--fw-semi);
  padding: 1px 5px; border-radius: var(--r-pill);
  border: 1px solid;
}
.sb-q-badge.relax { background: color-mix(in srgb, var(--warn) 18%, transparent); border-color: color-mix(in srgb, var(--warn) 50%, transparent); color: var(--warn); }
.sb-q-badge.standard { background: color-mix(in srgb, var(--ok) 18%, transparent); border-color: color-mix(in srgb, var(--ok) 50%, transparent); color: color-mix(in srgb, var(--leaf-bright) 59%, var(--mix-light)); }

.sb-q-more {
  background: none; border: none;
  font-size: var(--fs-9-5); letter-spacing: var(--track-10);
  color: color-mix(in srgb, var(--ink-cream-8) 60%, transparent);
  text-align: left; padding: 2px 0; cursor: pointer;
  text-transform: uppercase; font-weight: var(--fw-semi);
}
.sb-q-more:hover { color: var(--ink-cream-8); }
.sb-q-hint {
  font-size: var(--fs-9-5);
  letter-spacing: var(--track-10);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-cream-8) 55%, transparent);
  font-weight: var(--fw-semi);
  text-align: center;
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px dashed color-mix(in srgb, var(--card-border) 20%, transparent);
}
.sb-queue--clickable {
  cursor: pointer;
  transition: transform var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
.sb-queue--clickable:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--hi) 40%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--hi-2) 20%, transparent),
    0 4px 12px rgba(0, 0, 0, 0.30),
    0 18px 36px rgba(0, 0, 0, 0.42);
}
.sb-queue--clickable:focus-visible {
  outline: var(--ring-w) solid var(--leaf);
  outline-offset: 4px;
}