/* ============================================================================
   WORKSHOP SKIN — Owner Canvas (page 5), holder mode only.
   Pure re-skin: every rule scoped under `.archive-part-canvas.is-holder-mode`
   (already on the panel). No markup / data-* / wiring changed. Remove the
   <link> in index.html to fall back to the classic UI.

   Refined pass: restrained accent (mint = interaction, gold = primary),
   tighter type scale, calmer surfaces, more breathing room.
   Palette + fonts inherited from archive.css :root tokens.
   ============================================================================ */

.archive-part-canvas.is-holder-mode {
  --ws-line: rgba(246,201,91,.16);
  --ws-line-2: rgba(246,201,91,.28);
  --ws-cyan: rgba(85,234,212,.32);
  --ws-panel: rgba(7,13,11,.66);
  --ws-cell: linear-gradient(180deg, rgba(32,28,22,.5), rgba(12,10,8,.5));
}

/* ---------------------------------------------------------------------------
   1) CATEGORY TABS  ->  chips
   --------------------------------------------------------------------------- */
.archive-part-canvas.is-holder-mode .archive-part-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 5px;
  border-radius: 13px;
  background: var(--ws-panel);
  border: 1px solid var(--ws-line);
}
.archive-part-canvas.is-holder-mode .archive-part-category {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 0;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  box-shadow: none;
  transition: color .16s, background .16s, border-color .16s;
}
.archive-part-canvas.is-holder-mode .archive-part-category:hover { color: var(--text); background: rgba(255,255,255,.03); }
.archive-part-canvas.is-holder-mode .archive-part-category__icon { font-size: 14px; line-height: 1; opacity: .9; }
.archive-part-canvas.is-holder-mode .archive-part-category b { font-weight: 600; }
.archive-part-canvas.is-holder-mode .archive-part-category.is-active {
  background: color-mix(in srgb, var(--mint), transparent 88%);
  border-color: color-mix(in srgb, var(--mint), transparent 45%);
  color: var(--mint);
}

/* ---------------------------------------------------------------------------
   2) THEME / COLLAB SUB-TABS  ->  quieter chips
   --------------------------------------------------------------------------- */
.archive-part-canvas.is-holder-mode .archive-part-themes,
.archive-part-canvas.is-holder-mode .archive-collab__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.archive-part-canvas.is-holder-mode .archive-part-theme,
.archive-part-canvas.is-holder-mode .archive-collab__tab {
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--ws-line);
  background: rgba(6,11,10,.45);
  color: var(--muted);
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: .11em;
  text-transform: uppercase;
  min-height: 0;
  transition: border-color .16s, color .16s;
}
.archive-part-canvas.is-holder-mode .archive-part-theme:hover,
.archive-part-canvas.is-holder-mode .archive-collab__tab:hover { border-color: var(--ws-cyan); color: var(--text); }
.archive-part-canvas.is-holder-mode .archive-part-theme.is-active,
.archive-part-canvas.is-holder-mode .archive-collab__tab.is-active {
  background: color-mix(in srgb, var(--mint), transparent 84%);
  border-color: color-mix(in srgb, var(--mint), transparent 40%);
  color: var(--mint);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
   3) ITEM CATALOG  ->  pegboard grid of cells
   --------------------------------------------------------------------------- */
.archive-part-canvas.is-holder-mode .archive-part-menu--catalog,
.archive-part-canvas.is-holder-mode .archive-part-menu--theme-stickers {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* NFT Collections: no box-in-a-box */
.archive-part-canvas.is-holder-mode .archive-collab { background: transparent; border: 0; padding: 0; }
/* Effects tab: stacked sections (Effects over Backgrounds), consistent cards, no helper text */
.archive-part-canvas.is-holder-mode [data-part-canvas-list="active"]:has(.archive-canvas-effects) { display: block; }
.archive-part-canvas.is-holder-mode .archive-canvas-effects {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 9px;
  padding: 0;
  margin: 0 0 18px;
}
.archive-part-canvas.is-holder-mode .archive-canvas-effects__label {
  grid-column: 1 / -1;
  margin: 0 0 3px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
}
.archive-part-canvas.is-holder-mode .archive-canvas-effects__note,
.archive-part-canvas.is-holder-mode .archive-canvas-equip { display: none; }
.archive-part-canvas.is-holder-mode .archive-canvas-effect {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 0;
  padding: 9px 11px;
  background: var(--ws-cell);
  border: 1px solid var(--ws-line);
  border-radius: 11px;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.archive-part-canvas.is-holder-mode .archive-canvas-effect__swatch { width: 22px; height: 22px; border-radius: 6px; flex: 0 0 auto; }
.archive-part-canvas.is-holder-mode .archive-canvas-effect.is-active { border-color: var(--mint); box-shadow: 0 0 0 1px var(--mint) inset; }
.archive-part-canvas.is-holder-mode .archive-canvas-effect.is-locked { opacity: .5; }

/* ---------------------------------------------------------------------------
   8) Thin, subtle scrollbars (the transparent panels exposed bright green bars)
   --------------------------------------------------------------------------- */
.archive-part-canvas.is-holder-mode [data-part-canvas-list],
.archive-part-canvas.is-holder-mode .archive-collab__col,
.archive-part-canvas.is-holder-mode .archive-part-menu > div {
  scrollbar-width: thin;
  scrollbar-color: rgba(246,201,91,.22) transparent;
}
.archive-part-canvas.is-holder-mode [data-part-canvas-list]::-webkit-scrollbar,
.archive-part-canvas.is-holder-mode .archive-collab__col::-webkit-scrollbar,
.archive-part-canvas.is-holder-mode .archive-part-menu > div::-webkit-scrollbar { width: 6px; height: 6px; }
.archive-part-canvas.is-holder-mode [data-part-canvas-list]::-webkit-scrollbar-track,
.archive-part-canvas.is-holder-mode .archive-collab__col::-webkit-scrollbar-track,
.archive-part-canvas.is-holder-mode .archive-part-menu > div::-webkit-scrollbar-track { background: transparent; }
.archive-part-canvas.is-holder-mode [data-part-canvas-list]::-webkit-scrollbar-thumb,
.archive-part-canvas.is-holder-mode .archive-collab__col::-webkit-scrollbar-thumb,
.archive-part-canvas.is-holder-mode .archive-part-menu > div::-webkit-scrollbar-thumb { background: rgba(246,201,91,.20); border-radius: 6px; }

/* ---------------------------------------------------------------------------
   9) NFT Collections header: breathing room + tidy sub-tabs / labels
   --------------------------------------------------------------------------- */
.archive-part-canvas.is-holder-mode .archive-collab { gap: 11px; }
.archive-part-canvas.is-holder-mode .archive-collab__head span {
  display: block;
  margin-top: 4px;
  font-family: var(--font-data);
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
}
.archive-part-canvas.is-holder-mode .archive-collab__tabs { margin: 2px 0 5px; }
.archive-part-canvas.is-holder-mode .archive-collab__soon {
  font-family: var(--font-data);
  font-size: 9px;
  letter-spacing: .05em;
  color: var(--dim);
  opacity: .7;
  margin-left: 5px;
}
.archive-part-canvas.is-holder-mode .archive-collab__coltitle { margin: 3px 0 3px; }
/* section name = a clean title at the top of the catalog, with a hairline rule.
   Include the Stickers column title so both sides match (was mint + unstyled). */
.archive-part-canvas.is-holder-mode .archive-part-menu--catalog > h3,
.archive-part-canvas.is-holder-mode .archive-part-menu--theme-stickers > h3,
.archive-part-canvas.is-holder-mode [data-part-canvas-list-title] {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(246,201,91,.16);
}
/* NFT Collections: demote the "NFT COLLECTIONS" line to an eyebrow so the collection name leads */
.archive-part-canvas.is-holder-mode .archive-part-menu--catalog:has(.archive-collab) > h3,
.archive-part-canvas.is-holder-mode .archive-part-menu--catalog:has(.archive-collab) [data-part-canvas-list-title] {
  font-family: var(--font-data);
  font-size: 9.5px;
  letter-spacing: .18em;
  color: var(--dim);
  border-bottom: 0;
  padding-bottom: 0;
  margin: 0 0 6px;
}

/* the scrolling list containers become responsive grids */
.archive-part-canvas.is-holder-mode [data-part-canvas-list="active"],
.archive-part-canvas.is-holder-mode [data-part-canvas-list="theme-stickers"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
  align-content: start;
}
/* collab view: Traits | Stickers columns, each auto-flowing its own cells */
.archive-part-canvas.is-holder-mode .archive-collab__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.archive-part-canvas.is-holder-mode .archive-collab__col {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 9px;
  align-content: start;
}
.archive-part-canvas.is-holder-mode .archive-collab__coltitle {
  grid-column: 1 / -1;
  font-family: var(--font-data);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: .85;
}

/* the card: a clean vertical pegboard cell */
.archive-part-canvas.is-holder-mode .archive-holder-catalog-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  width: auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--ws-line);
  border-radius: 12px;
  background: var(--ws-cell);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
  transition: transform .15s ease, border-color .15s, box-shadow .15s;
}
.archive-part-canvas.is-holder-mode .archive-holder-catalog-item::before {
  /* soft cool spotlight so dark part previews stay legible */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(85% 65% at 50% 32%, rgba(162,150,120,.14), transparent 72%);
  pointer-events: none;
}
.archive-part-canvas.is-holder-mode .archive-holder-catalog-item:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--mint), transparent 40%);
  box-shadow: 0 10px 20px rgba(0,0,0,.4);
}
.archive-part-canvas.is-holder-mode .archive-holder-catalog-item > img,
.archive-part-canvas.is-holder-mode .archive-holder-catalog-item > canvas {
  position: relative;
  width: 100%;
  height: 100px;          /* fixed thumbnail height -> every cell is identical */
  flex: 0 0 auto;
  object-fit: contain;
  padding: 11px 11px 2px;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.35));
}
.archive-part-canvas.is-holder-mode .archive-holder-catalog-item > span {
  position: relative;
  flex: 0 0 auto;
  padding: 2px 7px 8px;
  text-align: center;
  min-width: 0;
}
.archive-part-canvas.is-holder-mode .archive-holder-catalog-item > span b {
  display: block;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* state label: hidden by default (Add is implied); only meaningful states show */
.archive-part-canvas.is-holder-mode .archive-holder-catalog-item > em {
  position: absolute;
  top: 6px;
  left: 6px;
  font-family: var(--font-data);
  font-size: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-style: normal;
  border-radius: 999px;
  padding: 2px 6px;
  opacity: 0;
}
.archive-part-canvas.is-holder-mode .archive-holder-catalog-item.is-selected {
  border-color: var(--mint);
  box-shadow: 0 0 0 1px var(--mint) inset;
}
.archive-part-canvas.is-holder-mode .archive-holder-catalog-item.is-mounted { border-color: var(--ws-line-2); }
.archive-part-canvas.is-holder-mode .archive-holder-catalog-item.is-mounted > em {
  opacity: 1;
  color: #06100d;
  background: var(--gold);
  font-weight: 700;
}
.archive-part-canvas.is-holder-mode .archive-holder-catalog-item.is-unavailable { opacity: .48; }
.archive-part-canvas.is-holder-mode .archive-holder-catalog-item.is-unavailable > em {
  opacity: 1;
  color: var(--orange);
  background: rgba(3,6,5,.7);
  border: 1px solid color-mix(in srgb, var(--orange), transparent 55%);
}

/* ---------------------------------------------------------------------------
   4) FOOTER CONTROL BAR  ->  a machined console
   --------------------------------------------------------------------------- */
.archive-part-canvas.is-holder-mode .archive-holder-quick-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding: 9px 11px;
  border: 1px solid var(--ws-line);
  border-radius: 13px;
  background: var(--ws-panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.archive-part-canvas.is-holder-mode .archive-holder-quick-actions > button,
.archive-part-canvas.is-holder-mode .archive-holder-color-control {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 0;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid var(--ws-line);
  background: rgba(6,11,10,.5);
  color: var(--muted);
  font-family: var(--font-data);
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: border-color .16s, color .16s, background .16s;
}
.archive-part-canvas.is-holder-mode .archive-holder-quick-actions > button:hover,
.archive-part-canvas.is-holder-mode .archive-holder-color-control:hover {
  border-color: var(--ws-cyan);
  color: var(--text);
}
.archive-part-canvas.is-holder-mode .archive-holder-transparency {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid var(--ws-line);
  background: rgba(6,11,10,.5);
  color: var(--dim);
  font-family: var(--font-data);
  font-size: 9.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.archive-part-canvas.is-holder-mode .archive-holder-transparency input[type="range"] { accent-color: var(--mint); max-width: 108px; }
.archive-part-canvas.is-holder-mode .archive-holder-transparency output { color: var(--mint); }
.archive-part-canvas.is-holder-mode .archive-holder-color-control [data-holder-color-value],
.archive-part-canvas.is-holder-mode .archive-holder-color-control output { color: var(--gold); }
/* primary action reads as primary — gold, but calm */
.archive-part-canvas.is-holder-mode .archive-holder-save--equip {
  border-color: color-mix(in srgb, var(--gold), transparent 25%) !important;
  background: color-mix(in srgb, var(--gold), transparent 20%) !important;
  color: var(--text) !important;
  font-weight: 700;
  letter-spacing: .05em;
}
.archive-part-canvas.is-holder-mode .archive-holder-save--equip:hover {
  background: color-mix(in srgb, var(--gold), transparent 6%) !important;
  color: #20160a !important;
}
.archive-part-canvas.is-holder-mode .archive-holder-summary {
  font-family: var(--font-data);
  font-size: 10.5px;
  letter-spacing: .04em;
  color: var(--muted);
}

/* holder's token picker -> tucked to the bottom-left corner so it never
   collides with the left-hand catalog (was fixed at left / vertical-center) */
.mh-owned { top: auto !important; bottom: 22px !important; transform: translate(-10px, 0) !important; max-height: 34vh !important; width: 118px !important; }
.mh-owned.is-in { transform: translate(0, 0) !important; }

/* ---------------------------------------------------------------------------
   5) NFT Collections: collection name first (name at the top), tabs beneath
   --------------------------------------------------------------------------- */
.archive-part-canvas.is-holder-mode .archive-collab { display: flex; flex-direction: column; gap: 9px; }
.archive-part-canvas.is-holder-mode .archive-collab__head { order: -1; margin: 0; }
.archive-part-canvas.is-holder-mode .archive-collab__head b {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--gold);
}
.archive-part-canvas.is-holder-mode .archive-collab__tabs { order: 0; }
.archive-part-canvas.is-holder-mode .archive-collab__cols { order: 1; margin-top: 2px; }

/* ---------------------------------------------------------------------------
   6) Top bar: drop the empty sub-rails that render as hollow bars
   --------------------------------------------------------------------------- */
.archive-part-canvas.is-holder-mode .archive-part-themes:empty,
.archive-part-canvas.is-holder-mode .archive-holder-geometry:empty,
.archive-part-canvas.is-holder-mode .archive-holder-zone-step:empty { display: none; }

/* ---------------------------------------------------------------------------
   7) Console: narrow the whole footer (its own bg is the wide panel) to a single
      column so it sits under the machine and clears the Themes / Stickers catalogs
   --------------------------------------------------------------------------- */
.archive-part-canvas.is-holder-mode .archive-part-canvas__footer {
  width: min(560px, calc(100vw - 2rem));
  grid-template-columns: 1fr;
}
.archive-part-canvas.is-holder-mode .archive-holder-summary { text-align: center; }
.archive-part-canvas.is-holder-mode .archive-holder-quick-actions { justify-content: center; }

/* ---------------------------------------------------------------------------
   8) Fill tall viewports. The panel, the machine (capped 430px) and the catalog
      lists (capped 500px) ALL size off --part-canvas-h. Raise the height var AND
      those two caps together so everything grows in proportion — bigger hero
      machine, taller catalogs, console riding toward the nav — instead of a
      fixed-size machine floating in a taller, emptier box.
   --------------------------------------------------------------------------- */
.archive-part-canvas.is-holder-mode { --part-canvas-h: min(880px, max(min(560px, calc(100vh - 14rem)), calc(100vh - 22rem))); --part-canvas-y: 51%; }
.archive-part-canvas.is-holder-mode .archive-part-display {
  width: min(100%, 540px, calc(var(--part-canvas-h) - 6rem));
}
.archive-part-canvas.is-holder-mode .archive-part-menu--catalog > div,
.archive-part-canvas.is-holder-mode .archive-part-menu--theme-stickers > div {
  max-height: min(700px, calc(var(--part-canvas-h) - 3.4rem));
}
/* Stickers column: top-align it with the Themes column (base centered it vertically) */
.archive-part-canvas.is-holder-mode .archive-part-menu--theme-stickers { top: 0; transform: none; }

/* ---------------------------------------------------------------------------
   9) TALL screens only: top-align the machine with the catalog items and ride
      the console up right beneath it (compact, aligned composition). Gated to
      tall viewports — on short laptops the machine + console stack would run past
      the page nav, so those keep the safe centered layout from section 8.
   --------------------------------------------------------------------------- */
@media (min-height: 1040px) {
  .archive-part-canvas.is-holder-mode { --part-canvas-y: 53%; }
  .archive-part-canvas.is-holder-mode .archive-part-display { top: 2.8rem; transform: translate(-50%, 0); }
  .archive-part-canvas.is-holder-mode .archive-part-canvas__footer {
    top: calc(min(540px, calc(var(--part-canvas-h) - 6rem)) + 6.2rem);
    bottom: auto;
  }
}