/* snappy-skills polish — layered after the design handoff's app.css.
   Scope: perf tuning, sticky-offset alignment, and a unified plug-in
   rail (icon column that widens to reveal names instead of swapping
   between a strip and a panel). */

/* Single backdrop-blur intensity — the bundle stacks .nav (blur 12) on
   top of .rail (blur 12). On scroll that's two translucent passes per
   frame. Halve both without disabling them. */
.nav {
  backdrop-filter: saturate(120%) blur(8px);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
}
.rail {
  backdrop-filter: saturate(120%) blur(8px);
  -webkit-backdrop-filter: saturate(120%) blur(8px);
}

/* Specific-property transitions. `transition: all` repaints text
   rasterization on every hover — under scroll that reads as jitter. */
.rail-btn,
.rail-btn .count {
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.nav-tab {
  transition: background-color .15s ease, color .15s ease;
}

/* Lock rail-btn border to transparent when inactive so the active
   state only changes border-color, not its presence. */
.rail-btn { border-color: transparent; }

/* Bold-lens sidebar polish. Make the header sit flush with the section's
   top edge (no implicit row offset), and compress when its intrinsic
   height exceeds the viewport. */
.bold .cat-section { padding-top: 0; border-top: 1px solid var(--border); min-height: 0; }
.bold .cat-section + .cat-section { margin-top: 18px; }
.bold .cat-header {
  margin: 0;
  padding-top: 2px;
  max-height: calc(100vh - 140px);
  overflow: hidden;
}

/* Smooth in-page anchor scrolling. */
html { scroll-behavior: smooth; }

/* Scroll-margin alignment for anchor jumps — land the section title
   below the sticky stack. */
.cat-section { scroll-margin-top: 112px; }

/* ===== Unified plug-in rail =====
   Handoff rendered two separate trees (strip when closed, panel when
   open). The swap meant each integration item changed y-position the
   moment the drawer opened. We now render ONE list of 16 rows that
   animates width: collapsed = icon column (56px), open = full column
   (360px). Row y-positions never change. Icons stay leftmost; names
   and status chips fade in as space opens up.

   `.irail` becomes the visible column itself (it was a transparent
   wrapper in the handoff). `.irail-toggle` rides the right edge via
   translateX. `.irail-strip` / `.irail-panel` selectors in the handoff
   target elements we no longer render, so they quietly drop out. */

.irail {
  position: fixed;
  top: 64px; left: 0; bottom: 0;
  z-index: 60;
  width: 56px;
  background: var(--card);
  border-right: 1px solid var(--border);
  box-shadow: 12px 0 36px -24px rgba(0,0,0,0.28);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  transition: width .26s cubic-bezier(.2,.8,.2,1);
  overflow: hidden;
}
.irail.open { width: 360px; }
.irail.is-dragging { transition: none; }

/* Toggle chip — small pill that hangs off the right edge. */
.irail-toggle {
  position: absolute;
  top: 14px;
  right: -22px;
  left: auto;
  flex-direction: row;
  gap: 6px;
  padding: 7px 10px 7px 8px;
  border-radius: 0 999px 999px 0;
  border-left: 1px solid var(--border);
  transform: none;
  z-index: 3;
}
.irail.open .irail-toggle { transform: none; }
.irail-toggle-lbl {
  writing-mode: horizontal-tb;
  transform: none;
  font-size: 10px;
  letter-spacing: 0.08em;
}

/* Head + search + foot: collapse their horizontal padding so they
   look deliberate at the narrower width, and clip cleanly when the
   rail narrows (the whole elements are hidden by JSX, but keep
   overflow clean during the transition). */
.irail-head { padding: 14px 16px 12px; white-space: normal; overflow: hidden; }
.irail-title-hint { max-width: 300px; }
.irail-search-row { padding: 10px 12px; }

/* One list, always mounted. Fixed row heights so items hold their
   y-position as the rail widens. Icon column when narrow: 40px tile
   mark + 8px h-padding each side = 56px total. */
.irail-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 8px 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  scrollbar-width: thin;
}

.irail-tile {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.irail-tile.hidden { display: none; }

.irail-tile-main {
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  cursor: grab;
}
.irail-tile-main:active { cursor: grabbing; }

.irail-tile-mark {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: #fff !important;
  border: 1.5px solid color-mix(in oklch, var(--tile-accent) 35%, var(--border));
}

/* Body + related chip: visible when open, clipped to zero when
   collapsed. Using max-width transition keeps the tile width animating
   smoothly with the rail width. */
.irail-tile-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity .18s ease .04s, max-width .26s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.irail.open .irail-tile-body {
  opacity: 1;
  max-width: 260px;
  pointer-events: auto;
}

.irail-tile-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.irail-tile-lineage {
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.irail-tile-related {
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  transition: opacity .18s ease, max-width .26s cubic-bezier(.2,.8,.2,1);
  pointer-events: none;
}
.irail.open .irail-tile-related {
  opacity: 1;
  max-width: 60px;
  pointer-events: auto;
}

/* Expanded-detail panel only renders when open (JSX guard), but keep
   overflow handling sane. */
.irail-tile-details { padding: 2px 12px 12px; }

/* Collapsed-only: center the single visible mark in the row. */
.irail:not(.open) .irail-tile-main { justify-content: center; padding: 6px; gap: 0; }

/* Foot bar: only renders when open. Tighten padding to match. */
.irail-foot { padding: 8px 14px; }

/* Toast the tile on hover even when collapsed so users know each row
   is draggable, not just decorative. */
.irail:not(.open) .irail-tile:hover {
  border-color: var(--tile-accent, var(--primary));
  transform: translateX(2px);
  box-shadow: 3px 3px 14px -8px color-mix(in oklch, var(--tile-accent, var(--primary)) 40%, transparent);
}

/* Dragging state — dim the source tile so the drop target reads as
   the primary visual. */
.irail-tile.dragging { opacity: 0.5; transform: scale(0.96); }

/* Belt-and-suspenders: hide the full-page .md file overlay whenever a
   tile is mid-drag. (app.jsx already suppresses it via dataTransfer
   type check; :has() covers browsers that fire dragover first.) */
body:has(.irail-tile.dragging) .drop-overlay { display: none !important; }

/* Main content gets a consistent left margin so cards don't sit under
   the rail's collapsed width. */
main.skills-main, main { }

/* ===== Packages =====
   Home-page lane: curated views over the same catalog. A `.pkg-tile` is
   a link to /p/<id> — the server re-filters the skill list with the
   same canViewSkill() tier gate, then applies the package's match().

   On home (no hash, no /p), we stack:
     <InstallHero .../>      hero
     <Packages .../>          this row
   On /p/<id>, the grid renders with `<PackageHeader/>` above it and the
   standard ActionHub suppressed (you're already scoped). */

.packages-row {
  padding: 32px 0 40px;
  border-top: 1px solid var(--border);
  background:
    radial-gradient(circle at 20% 0%, color-mix(in oklch, var(--primary) 5%, transparent), transparent 55%),
    var(--background);
}
.packages-eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted-foreground);
  margin-bottom: 18px;
}
.packages-eyebrow .muted { text-transform: none; letter-spacing: 0.01em; }

.packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.pkg-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 16px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: inherit;
  text-decoration: none;
  min-height: 168px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.pkg-tile:hover {
  border-color: color-mix(in oklch, var(--primary) 50%, var(--border));
  transform: translateY(-1px);
  box-shadow: 0 10px 30px -18px color-mix(in oklch, var(--primary) 40%, transparent);
}
.pkg-tile-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.pkg-tile-label {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.pkg-tile-count {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--primary) 12%, transparent);
  color: var(--foreground);
  border: 1px solid color-mix(in oklch, var(--primary) 25%, var(--border));
}
.pkg-tile-tagline {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.pkg-tile-blurb {
  font-size: 13px;
  line-height: 1.45;
  color: color-mix(in oklch, var(--foreground) 75%, var(--muted-foreground));
  margin: 0;
  flex: 1;
}
.pkg-tile-install {
  font-size: 11.5px;
  padding: 6px 8px;
  border-radius: 7px;
  background: color-mix(in oklch, var(--foreground) 6%, transparent);
  color: var(--foreground);
  border: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pkg-tile-prompt { color: var(--muted-foreground); margin-right: 4px; }
.pkg-tile-foot {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--muted-foreground);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.pkg-tile:hover .pkg-tile-foot { color: var(--foreground); }

/* ===== Package detail header =====
   Sits above the filtered grid on /p/<id>. Shows the package name,
   crumb back to /skills, visible-count chip, and the canonical install
   command with a copy button. */

.pkg-header {
  padding: 26px 0 22px;
  border-bottom: 1px solid var(--border);
  background:
    radial-gradient(circle at 10% 0%, color-mix(in oklch, var(--primary) 7%, transparent), transparent 60%),
    var(--background);
}
.pkg-header-crumb {
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
  margin-bottom: 14px;
}
.pkg-header-crumb a {
  color: color-mix(in oklch, var(--foreground) 80%, transparent);
  text-decoration: none;
  border-bottom: 1px dotted color-mix(in oklch, var(--foreground) 40%, transparent);
}
.pkg-header-crumb a:hover { color: var(--foreground); border-bottom-color: var(--foreground); }
.pkg-header-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.pkg-header-lede { flex: 1 1 340px; min-width: 0; }
.pkg-header-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  flex: 0 0 auto;
  min-width: 280px;
}
.pkg-header-count {
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
}
.pkg-header-count-n {
  font-weight: 600;
  color: var(--foreground);
  font-size: 13px;
  margin-right: 2px;
}
.pkg-header-cmd {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px 8px 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: color-mix(in oklch, var(--foreground) 4%, var(--card));
  font-size: 12.5px;
  max-width: 100%;
}
.pkg-header-prompt { color: var(--muted-foreground); }
.pkg-header-cmd-body {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}
.pkg-header-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--background);
  color: var(--muted-foreground);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.pkg-header-copy:hover { color: var(--foreground); border-color: color-mix(in oklch, var(--primary) 40%, var(--border)); }

@media (max-width: 720px) {
  .pkg-header-side { align-items: flex-start; min-width: 0; width: 100%; }
  .pkg-header-cmd-body { max-width: 180px; }
}

/* =======================================================================
   Files tab — file-tree viewer
   ======================================================================= */
.files-toolbar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}
.files-toolbar .input { height: 32px; font-size: 13px; }

.files-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 28px;
  align-items: start;
}
@media (max-width: 960px) {
  .files-layout { grid-template-columns: 1fr; }
}

/* ---- tree ---- */
.files-tree {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 12px;
  padding: 14px 14px 14px 14px;
  min-width: 0;
  overflow-x: auto;
}
.ft-root {
  color: var(--foreground);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .02em;
  padding: 2px 0 8px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 6px;
}
.ft-dir {
  margin: 2px 0;
}
.ft-dir-head {
  all: unset; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  padding: 3px 4px; border-radius: 4px;
  width: 100%;
}
.ft-dir-head:hover { background: var(--muted); }
.ft-caret { width: 12px; color: var(--muted-foreground); font-size: 10px; }
.ft-dir-label { font-weight: 500; color: var(--foreground); letter-spacing: .01em; }
.ft-dir-body {
  padding-left: 18px;
  border-left: 1px dotted var(--border);
  margin-left: 5px;
}

.ft-leaf {
  display: grid;
  grid-template-columns: 14px auto auto 1fr;
  align-items: baseline;
  gap: 8px;
  padding: 3px 6px;
  border-radius: 4px;
  cursor: pointer;
  user-select: none;
}
.ft-leaf:hover { background: var(--muted); }
.ft-leaf.ft-active {
  background: color-mix(in oklch, var(--primary) 12%, transparent);
  outline: 1px solid color-mix(in oklch, var(--primary) 40%, transparent);
}
.ft-leaf.ft-muted .ft-name { color: var(--muted-foreground); }
.ft-icon { color: var(--muted-foreground); }

.ft-name { color: var(--foreground); font-size: 12.5px; }
.ft-leaf.ft-skill-md .ft-name { color: var(--foreground); }
.ft-leaf.ft-agents-md .ft-name { color: oklch(0.62 0.15 145); } /* loader — green */
.ft-leaf.ft-harness .ft-name,
.ft-leaf.ft-harness-log .ft-name { color: oklch(0.70 0.12 55); } /* harness — amber */
.ft-leaf.ft-schema .ft-name { color: oklch(0.66 0.16 260); font-weight: 600; }

.ft-tag {
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: oklch(0.66 0.16 260);
  border: 1px solid color-mix(in oklch, oklch(0.66 0.16 260) 45%, var(--border));
  padding: 0 5px;
  border-radius: 3px;
  background: color-mix(in oklch, oklch(0.66 0.16 260) 8%, transparent);
}
.ft-note {
  font-size: 11.5px;
  color: var(--muted-foreground);
  font-family: var(--font-sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ft-more, .ft-empty {
  padding: 3px 6px 3px 22px;
  font-size: 11.5px;
  font-family: var(--font-sans);
  color: var(--muted-foreground);
  font-style: italic;
}

/* ---- side panel (harness callouts / file detail) ---- */
.files-side {
  position: sticky;
  top: 80px;
  align-self: start;
  min-width: 0;
}
.files-harness {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 12px;
  padding: 16px 16px 14px;
}
.harness-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.harness-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: start;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--background);
}
.harness-tag {
  font-size: 10px;
  letter-spacing: .08em;
  color: oklch(0.66 0.16 260);
  padding: 3px 0;
  text-align: center;
  border: 1px solid color-mix(in oklch, oklch(0.66 0.16 260) 40%, var(--border));
  border-radius: 4px;
  background: color-mix(in oklch, oklch(0.66 0.16 260) 6%, transparent);
  height: fit-content;
}
.harness-body { min-width: 0; }
.harness-path {
  font-size: 12px;
  color: var(--foreground);
  word-break: break-all;
  line-height: 1.4;
}
.harness-note {
  font-size: 11.5px;
  margin-top: 3px;
  line-height: 1.5;
  font-family: var(--font-sans);
}
.files-drop-hint {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: color-mix(in oklch, var(--primary) 4%, transparent);
}

.files-panel {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 12px;
  padding: 14px 16px 16px;
}
.files-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px dashed var(--border);
  padding-bottom: 6px;
}