/* ============================================================
   V9 Workspace shell: top bar (brand + nav + search + actions) ·
   main · right workspace dock. Replaces the sidebar-era app frame.
   Spec: docs/superpowers/specs/2026-06-12-v9-workspace-master-detail-design.md
   ============================================================ */

/* ---------- frame ---------- */
.app-shell.v9-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: var(--topbar-height) minmax(0, 1fr);
  grid-template-areas:
    "topbar topbar"
    "main   dock";
  height: 100dvh;
  background: var(--v9-bg);
}
.v9-shell .main { grid-area: main; }
.v9-shell .topbar { grid-area: topbar; }
.v9-dock { grid-area: dock; }

/* Theme cohesion: the whole canvas follows the active V9 theme, not the legacy
   --bg. The shell paints --v9-bg; pin the page + main too so no legacy neutral
   leaks through (overscroll gutter, or a legacy .main background rule). */
html:has(.app-shell.v9-shell),
body:has(.app-shell.v9-shell) { background: var(--v9-bg); }
/* Graph-paper grid texture on the content canvas (borrowed from the public
   catalog page): faint 1px lines on a 44px grid over the obsidian base. The
   line colour is a var so it can be tinted per theme later — the default
   matches the catalog exactly (white at 2.5%). */
.v9-shell .main {
  background:
    linear-gradient(var(--v9-grid-line, rgba(255, 255, 255, 0.025)) 1px, transparent 1px),
    linear-gradient(90deg, var(--v9-grid-line, rgba(255, 255, 255, 0.025)) 1px, transparent 1px),
    var(--v9-bg);
  background-size: 44px 44px;
}
/* Let the canvas grid show through the page root. `.v9-page` paints a solid
   --v9-bg (redundant — the canvas behind it is already --v9-bg), which otherwise
   covers the grid on every page that uses it (e.g. Inventory). Transparent here
   reveals the grid in the header area + the gaps between tiles. */
.v9-shell .main .v9-page { background: transparent; }

/* ---------- topbar ---------- */
.v9-shell .topbar.v9-topbar {
  display: grid;
  /* Left cluster (brand+nav) and the search sit together on the left; the
     action icons are pushed to the far right by the flexible 3rd track. */
  grid-template-columns: auto minmax(11rem, 20rem) 1fr;
  align-items: center;
  gap: var(--v9-space-4);
  padding: 0 var(--v9-space-4);
  background: var(--v9-bg);
  border-bottom: 1px solid var(--v9-line);
  position: sticky;
  top: 0;
  z-index: 10;
}
/* Right cluster lives in the flexible 3rd track — pin it to the right edge. */
.v9-topbar .v9-topbar-right { justify-self: end; }
.v9-topbar-left {
  display: flex;
  align-items: center;
  gap: var(--v9-space-3);
  min-width: 0;
}
/* HARD RESET: legacy .brand-mark is a sidebar header block (fat padding +
   33.6px margin) — inside the topbar it displaced the whole grid row and
   knocked every sibling ~16px off center. Measured, not guessed. */
.v9-topbar .brand-mark {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0;
  margin: 0;
  border: 0;
  width: auto;
  height: auto;
  background: transparent;
}
.v9-topbar .brand-mark-logo { height: 1.7rem; width: auto; display: block; }
.v9-nav {
  display: flex;
  align-items: center;
  gap: var(--v9-space-1);
  min-width: 0;
  overflow: hidden;
}
.v9-nav-link {
  padding: 0.3rem 0.75rem;
  border-radius: var(--v9-r-pill);
  border: 1px solid transparent;
  color: var(--v9-text-mute);
  font: 500 var(--v9-text-sm) var(--v9-font-ui);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--v9-t-micro) var(--v9-ease),
    background-color var(--v9-t-micro) var(--v9-ease);
}
.v9-nav-link:hover { color: var(--v9-text); background: var(--v9-hover); }
.v9-nav-link[data-active="true"] {
  color: var(--v9-accent);
  background: var(--v9-raised);
}
.v9-topbar-right {
  display: flex;
  align-items: center;
  gap: var(--v9-space-2);
}
.v9-user-chip {
  display: inline-flex;
  border-radius: var(--v9-r-pill);
  border: 1px solid transparent;
  padding: 2px;
}
.v9-user-chip:hover { border-color: var(--v9-line-strong); }
.v9-user-chip.is-active { border-color: var(--v9-accent); }
.v9-user-chip .avatar { width: 1.8rem; height: 1.8rem; font-size: 0.8rem; }

/* ---------- search ---------- */
/* The topbar search reuses the legacy .search markup but must wear V9 and behave
   inside the grid. THE FIX: min-width:0 on the field AND the input so the grid
   item can shrink to its track instead of overflowing its min-content (~256px)
   into the action icons. max-width + margin auto keep it centered + capped. */
.v9-topbar .search {
  min-width: 0;
  width: 100%;
  max-width: 20rem;
  margin: 0; /* left-aligned within its track, hugging the nav */
  height: 2rem;
  display: flex;
  align-items: center;
  gap: var(--v9-space-2);
  padding: 0 var(--v9-space-3);
  background: var(--v9-surface);
  border: 1px solid var(--v9-line);
  border-radius: var(--v9-r-sm);
  transition:
    border-color var(--v9-t-micro) var(--v9-ease),
    box-shadow var(--v9-t-micro) var(--v9-ease);
}
.v9-topbar .search:focus-within {
  border-color: var(--v9-accent);
  box-shadow: var(--v9-focus-glow);
}
.v9-topbar .search svg { flex: 0 0 auto; color: var(--v9-text-faint); }
.v9-topbar .search input {
  min-width: 0;
  flex: 1 1 auto;
  background: none;
  border: 0;
  outline: none;
  color: var(--v9-text);
  font: 400 var(--v9-text-sm) var(--v9-font-ui);
}
.v9-topbar .search input::placeholder { color: var(--v9-text-faint); }

/* Nav sheet links (phone menu) */
.v9-navsheet-link {
  display: block;
  padding: var(--v9-space-3) var(--v9-space-4);
  border: 1px solid var(--v9-line);
  border-radius: var(--v9-r-sm);
  color: var(--v9-text);
  font: 500 var(--v9-text-md) var(--v9-font-ui);
  text-decoration: none;
}
.v9-navsheet-link[data-active="true"] {
  border-color: var(--v9-accent);
  color: var(--v9-accent);
}

/* ---------- workspace dock ---------- */
.v9-dock {
  display: flex;
  flex-direction: column;
  /* REMEMBER: 1rem = 22.4px at the 140% root. 17.5–20.5rem ≈ 392–459px. */
  width: clamp(17.5rem, 28vw, 20.5rem);
  min-width: 0;
  border-left: 1px solid var(--v9-line);
  background: var(--v9-surface);
  overflow: hidden;
  /* The push: dock width animates, the gallery's auto-fill grid reflows.
     Single-element width transition — the one sanctioned layout animation. */
  transition: width 300ms var(--v9-ease), border-color 300ms var(--v9-ease);
  will-change: width;
}
.v9-dock[data-mode="idle"] {
  width: 0;
  border-left-color: transparent;
}
/* Add mode carries a real form (lookup + ~16 fields), so it needs more room
   than the read/cart docks. ~21–23rem ≈ 470–515px at the 140% root. Scoped to
   >700px so the phone full-screen rule (max-width:700px) still wins below. */
@media (min-width: 701px) {
  /* Add mode + a card being EDITED both need the wider form footprint; the
     existing width transition animates the expand on Edit / narrow on Save. */
  .v9-dock[data-mode="add"],
  .v9-dock[data-mode="detail"][data-editing="true"] { width: clamp(21rem, 38vw, 23rem); }
}
.v9-dock-head {
  display: flex;
  align-items: center;
  gap: var(--v9-space-2);
  padding: var(--v9-space-2) var(--v9-space-3);
  border-bottom: 1px solid var(--v9-line);
  flex: 0 0 auto;
  min-width: 14rem; /* keeps head from crushing during the width transition */
}
.v9-dock-title { flex: 1; }
.v9-dock-back { display: none; }
.v9-dock-close, .v9-dock-back {
  background: transparent;
  border: 0;
  color: var(--v9-text-mute);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.3rem 0.55rem;
  border-radius: var(--v9-r-sm);
}
.v9-dock-close:hover, .v9-dock-back:hover { background: var(--v9-hover); color: var(--v9-text); }
.v9-dock-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 14rem; /* see head note */
  position: relative;
}
.v9-dock-missing {
  display: grid;
  gap: var(--v9-space-3);
  justify-items: center;
  padding: var(--v9-space-12) var(--v9-space-4);
  color: var(--v9-text-mute);
}

/* ---------- detail-in-dock ---------- */
/* The modal's two-column card-detail becomes a single stacked column. The
   ambient art layer + glass meta pane styles come along from components.css;
   here we only re-shape the layout for a ~24rem panel. */
.v9-dock-detail.card-detail {
  display: flex;
  flex-direction: column;
  gap: var(--v9-space-4);
  padding: var(--v9-space-4);
  position: relative;
  min-height: 100%;
  isolation: isolate;
}
.v9-dock-detail .card-detail-ambient { position: absolute; inset: 0; z-index: 0; }
.v9-dock-detail .card-detail-visual-stage {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: var(--v9-space-2) var(--v9-space-2) 0;
}
/* Legacy modal sizes the holo-card for a 420px column — in a ~15rem dock it
   overflows and clips. Hard-fit the hero to the stage, whatever element the
   visual renderer produced (holo-card div, plain img, generic fallback). */
.v9-dock-detail .card-detail-visual-stage > * {
  width: min(12.5rem, 82%) !important;
  max-width: 100% !important;
  height: auto !important;
}
.v9-dock-detail .card-detail-visual-stage img {
  width: 100%;
  height: auto;
  display: block;
}
.v9-dock-detail .card-detail-meta {
  position: relative;
  z-index: 1;
  min-width: 0;
}
/* Sticky action bar adapts: the dock body is the scroll container. */
.v9-dock-detail .card-detail-actions { position: sticky; bottom: 0; }
/* Overflow menu opens UPWARD if near the bottom of a scroll panel — cheap fix:
   anchor up always inside the dock; the action bar lives at the bottom. */
.v9-dock-detail .card-detail-overflow-menu {
  top: auto;
  bottom: calc(100% + 4px);
}

/* ---------- inventory sub-tabs ---------- */
.v9-inv-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--v9-space-2);
  align-items: center;
}
.v9-inv-subtab { text-decoration: none; display: inline-flex; align-items: center; gap: 0.45rem; }
.v9-inv-subtab-badge {
  background: var(--v9-accent);
  color: var(--v9-accent-ink);
  border-radius: var(--v9-r-pill);
  font: 600 0.65rem var(--v9-font-mono);
  padding: 0.05rem 0.4rem;
}

/* ---------- scrollbars (obsidian, not factory white) ---------- */
.v9-shell .main,
.v9-dock-body {
  scrollbar-width: thin;
  scrollbar-color: var(--v9-line-strong) transparent;
}
.v9-shell .main::-webkit-scrollbar,
.v9-dock-body::-webkit-scrollbar { width: 10px; }
.v9-shell .main::-webkit-scrollbar-track,
.v9-dock-body::-webkit-scrollbar-track { background: transparent; }
.v9-shell .main::-webkit-scrollbar-thumb,
.v9-dock-body::-webkit-scrollbar-thumb {
  background: var(--v9-line-strong);
  border-radius: 999px;
  border: 2px solid var(--v9-bg);
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  /* Mid widths: a pinned dock would starve the gallery — it overlays instead. */
  .v9-dock {
    position: fixed;
    inset: var(--topbar-height) 0 0 auto;
    z-index: 35;
    box-shadow: none;
    border-left: 1px solid var(--v9-line-strong);
  }
  .app-shell.v9-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "topbar" "main";
  }
}
@media (max-width: 900px) {
  /* Primary nav hides; the BB logo opens the nav sheet (no hamburger). The left
     column shrinks to just the brand so the freed space goes to the search. */
  .v9-nav { display: none; }
  .v9-shell .topbar.v9-topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
}
@media (max-width: 700px) {
  /* Phone: when the full-screen dock is open, lock the page behind it. Without
     this the page keeps its vertical scrollbar (2px) — which both shrinks the
     content area so the fixed dock overhangs by 2px (horizontal scroll) AND
     lets the gallery scroll behind the cart. The dock body keeps its own
     internal scroll (separate container). Desktop side-panel is unaffected. */
  html:has(.v9-dock:not([data-mode="idle"])),
  body:has(.v9-dock:not([data-mode="idle"])) { overflow: hidden; }

  /* Phone: dock is a full-screen panel sliding over the gallery. */
  .v9-dock {
    /* width:auto + inset:0 sizes to the CONTENT area (scrollbar-excluded).
       100vw would include the scrollbar gutter → a 2px horizontal scroll. */
    inset: 0;
    width: auto;
    border-left: 0;
    transform: translateX(100%);
    transition: transform 300ms var(--v9-ease);
  }
  .v9-dock:not([data-mode="idle"]) { transform: translateX(0); }
  .v9-dock[data-mode="idle"] { width: auto; }
  .v9-dock-back { display: inline-flex; }
  .v9-dock-close { display: none; }
  .v9-dock-head, .v9-dock-body { min-width: 0; }
  .v9-shell .topbar.v9-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--v9-space-2);
    padding: 0 var(--v9-space-2);
  }
  .v9-topbar .brand-mark-logo { height: 1.5rem; }
}