/* Spetz Pegboard — the board's styles, shared by the standalone page
   (frontend/pegboard/, <body class="pegboard">) and the Creator Space's Pegboard tab
   (frontend/creator/, a <div class="pegboard" data-mode="embedded">). Every rule is
   scoped under .pegboard so nothing leaks into the host page. Mounted by js/pegboard.js. */
.pegboard {
  --paper: #faf6ec; --card: #f2eee3; --tile: #fdfbf6; --ink: #0b1426;
  --teal: #14b8a6; --teal-hover: #0d9488; --teal-deep: #0a7d72; --sand: #d4a574;
  --muted-fg: #6b6860; --divider: #e8e5dc; --line: rgba(11,20,38,.12);
  --space-xs: 4px; --space-sm: 8px; --space-tight: 12px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px;
  --r-card: 16px 4px 16px 4px; --r-btn: 8px 2px 8px 2px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --head-h: 56px; --bar-h: 64px;
  --f-title: "Host Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
  --f-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --f-mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pegboard { color: var(--ink); font-family: var(--f-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.pegboard * { box-sizing: border-box; }

.pegboard a { color: inherit; }
.pegboard button { font: inherit; color: inherit; }
.pegboard img { display: block; max-width: 100%; }
.pegboard .wrap { max-width: 1400px; margin: 0 auto; padding: 0 var(--space-md); }
@media (min-width: 640px) { .pegboard .wrap { padding: 0 var(--space-xl); } }
@media (min-width: 1024px) { .pegboard .wrap { padding: 0 var(--space-2xl); } }
.pegboard .mono { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.pegboard .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pegboard :focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.pegboard .seo-guide { display: none; }

/* ── Header ─────────────────────────────────────────── */
.pegboard .pb-head { position: sticky; top: 0; z-index: 30; height: var(--head-h); background: var(--paper); border-bottom: 1px solid var(--line); }
.pegboard .pb-head .wrap { height: 100%; display: flex; align-items: center; gap: var(--space-tight); }
.pegboard .pb-logo img { height: 22px; width: auto; }
.pegboard .pb-sep { width: 1px; height: 22px; background: var(--line); }
.pegboard .pb-who { display: none; align-items: center; gap: var(--space-sm); min-width: 0; text-decoration: none; font-weight: 600; font-size: 14px; }
.pegboard .pb-who:hover .pb-who-name { text-decoration: underline; }
.pegboard .pb-who-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pegboard .pb-sp { flex: 1; }
.pegboard .av { width: 28px; height: 28px; border-radius: 50%; flex: none; object-fit: cover; background: var(--teal); color: var(--paper);
      display: inline-flex; align-items: center; justify-content: center; font: 700 13px var(--f-title); }
.pegboard .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 40px; padding: 0 var(--space-md);
       border: 1px solid var(--line); border-radius: var(--r-btn); background: transparent; font-size: 14px; font-weight: 600;
       text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.pegboard .btn:hover { background: rgba(11,20,38,.05); }
.pegboard .btn--teal { background: var(--teal); border-color: var(--teal); color: var(--ink); }
.pegboard .btn--teal:hover { background: var(--teal-hover); border-color: var(--teal-hover); color: var(--paper); }
.pegboard .btn--ink { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pegboard .btn--ink:hover { background: var(--teal-hover); border-color: var(--teal-hover); }
.pegboard .btn .mdi { font-size: 18px; }
@media (max-width: 479px) { .pegboard .pb-share-label { display: none; } .pegboard .pb-share { padding: 0 10px; } }

/* ── Hero ───────────────────────────────────────────── */
.pegboard .pb-hero { background-image: linear-gradient(to bottom, rgba(20,184,166,.07) 0%, rgba(20,184,166,0) 78%); }
.pegboard .pb-hero .wrap { display: grid; gap: var(--space-lg); padding-top: var(--space-xl); padding-bottom: var(--space-lg); align-items: center; }
@media (min-width: 900px) { .pegboard .pb-hero .wrap { grid-template-columns: minmax(0, 1fr) 360px; padding-top: var(--space-2xl); } }
.pegboard .pb-h1 { font-family: var(--f-title); font-weight: 700; font-size: 2.5rem; line-height: 1.02; letter-spacing: -0.04em; margin: 0; max-width: 16ch; overflow-wrap: anywhere; }
@media (min-width: 640px) { .pegboard .pb-h1 { font-size: 3.5rem; } }
@media (min-width: 1024px) { .pegboard .pb-h1 { font-size: 4.25rem; } }
.pegboard .pb-h1 em { font-style: normal; background-image: linear-gradient(transparent 70%, rgba(20,184,166,.45) 70%, rgba(20,184,166,.45) 94%, transparent 94%); }
.pegboard .pb-sub { margin: var(--space-md) 0 0; font-size: 17px; color: var(--muted-fg); max-width: 52ch; }
.pegboard .pb-facts { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-lg) 0 0; padding: 0; list-style: none; }
.pegboard .pb-facts li { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 6px var(--space-tight); background: var(--card); border: 1px solid var(--divider);
               border-radius: var(--r-btn); font-size: 13.5px; font-weight: 500; }
.pegboard .pb-facts b { font-family: var(--f-mono); font-size: 13px; font-weight: 600; }
.pegboard .pb-facts .mdi { font-size: 17px; color: var(--teal-deep); }
.pegboard .pb-disclose { margin: var(--space-tight) 0 0; font-size: 12.5px; color: var(--muted-fg); display: flex; gap: var(--space-xs); align-items: flex-start; }
.pegboard .pb-disclose .mdi { font-size: 16px; margin-top: 2px; }

/* The pegboard: a perforated panel with three kit shapes hanging on it. */
@media (max-width: 639px) {
  .pegboard .pb-hero .wrap { padding-top: var(--space-lg); padding-bottom: var(--space-md); gap: var(--space-md); }
  .pegboard .pb-h1 { font-size: 2.25rem; }
  .pegboard .pb-sub { font-size: 15px; margin-top: var(--space-sm); }
  .pegboard .pb-facts { margin-top: var(--space-md); gap: var(--space-xs); }
  .pegboard .pb-facts li { padding: 3px var(--space-sm); font-size: 12.5px; }
  .pegboard .pb-facts .mdi { font-size: 15px; }
  .pegboard .pb-disclose { font-size: 11.5px; line-height: 1.45; }
}
.pegboard .pb-board { position: relative; height: 230px; border-radius: var(--r-card); background-color: #d9c3a3;
  background-image: radial-gradient(circle at center, rgba(11,20,38,.55) 0 3px, transparent 3.6px);
  background-size: 26px 26px; background-position: 13px 13px; border: 2px solid var(--ink); overflow: hidden; }
.pegboard .pb-board .peg { position: absolute; width: 4px; height: 18px; background: var(--ink); border-radius: 2px; }
.pegboard .pb-board .hang { position: absolute; transform-origin: 50% 0; }
.pegboard .pb-board .h1 { left: 34px; top: 40px; animation: pb-sway 5.2s ease-in-out infinite; }
.pegboard .pb-board .h2 { left: 150px; top: 66px; animation: pb-sway 6.4s ease-in-out infinite reverse; }
.pegboard .pb-board .h3 { left: 250px; top: 36px; animation: pb-sway 4.8s ease-in-out infinite; }
@keyframes pb-sway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@media (max-width: 899px) { .pegboard .pb-board { display: none; } }

/* ── Sticky toolbar ─────────────────────────────────── */
.pegboard .pb-bar { position: sticky; top: var(--head-h); z-index: 20; background: rgba(250,246,236,.96); border-bottom: 1px solid var(--line); }
.pegboard .pb-bar .wrap { min-height: var(--bar-h); display: flex; align-items: center; gap: var(--space-sm); padding-top: var(--space-tight); padding-bottom: var(--space-tight); }
.pegboard .pb-search { position: relative; flex: 1 1 280px; min-width: 0; max-width: 460px; }
.pegboard .pb-search .mdi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--muted-fg); pointer-events: none; }
.pegboard .pb-search input { width: 100%; height: 44px; padding: 0 40px 0 42px; border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--tile);
                   font: inherit; font-size: 15px; color: var(--ink); -webkit-appearance: none; appearance: none; }
.pegboard .pb-search input::placeholder { color: var(--muted-fg); }
.pegboard .pb-search input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(20,184,166,.2); }
.pegboard .pb-search input::-webkit-search-cancel-button { display: none; }
.pegboard .pb-clear-q { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: none; border-radius: var(--r-btn);
              cursor: pointer; display: none; align-items: center; justify-content: center; color: var(--muted-fg); }
.pegboard .pb-clear-q .mdi { position: static; transform: none; font-size: 18px; }
.pegboard .pb-search.has-q .pb-clear-q { display: inline-flex; }
.pegboard .pb-kbd { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font: 600 11px var(--f-mono); color: var(--muted-fg);
          border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }
.pegboard .pb-search.has-q .pb-kbd, .pegboard .pb-search:focus-within .pb-kbd { display: none; }
@media (hover: none) { .pegboard .pb-kbd { display: none; } }
.pegboard .seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--card); border: 1px solid var(--divider); border-radius: var(--r-btn); }
.pegboard .seg button { min-height: 36px; padding: 0 var(--space-tight); border: 0; background: none; border-radius: 6px 2px 6px 2px; font-size: 14px; font-weight: 600;
              color: var(--muted-fg); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; transition: background .2s var(--ease), color .2s var(--ease); }
.pegboard .seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.pegboard .seg button:not([aria-pressed="true"]):hover { color: var(--ink); }
.pegboard .seg .n { font: 600 11px var(--f-mono); opacity: .7; }
.pegboard .sel { position: relative; }
.pegboard .sel select { height: 44px; padding: 0 36px 0 var(--space-tight); border: 1px solid var(--line); border-radius: var(--r-btn); background: transparent;
              font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; -webkit-appearance: none; appearance: none; max-width: 210px; }
.pegboard .sel select:focus { outline: none; border-color: var(--teal); }
.pegboard .sel .mdi { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 20px; color: var(--muted-fg); }
.pegboard .pb-filters-btn { display: none; position: relative; }
.pegboard .pb-filters-btn .badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--teal);
                         color: var(--ink); font: 700 11px/18px var(--f-mono); text-align: center; }
.pegboard .pb-desk { display: contents; }
@media (max-width: 859px) {
  .pegboard .pb-desk { display: none; }
  .pegboard .pb-filters-btn { display: inline-flex; }
  .pegboard .pb-search { max-width: none; }
}

/* Active filters + result count */
.pegboard .pb-active { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); padding: var(--space-tight) 0 0; font-size: 13.5px; color: var(--muted-fg); }
.pegboard .pb-active:empty { display: none; }
.pegboard .chip { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 32px; padding: 0 6px 0 var(--space-tight); border: 1px solid var(--line);
        border-radius: var(--r-btn); background: var(--card); color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; }
.pegboard .chip .mdi { font-size: 16px; color: var(--muted-fg); }
.pegboard .chip:hover { border-color: var(--ink); }
.pegboard .linkbtn { border: 0; background: none; padding: 4px; color: var(--teal-deep); font-weight: 600; font-size: 13.5px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ── Sections ───────────────────────────────────────── */
.pegboard .pb-main { padding-bottom: var(--space-2xl); }
.pegboard .sec { margin-top: var(--space-xl); }
.pegboard .sec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xs) var(--space-md); margin-bottom: var(--space-tight); }
@media (max-width: 639px) { .pegboard .sec-head .sec-note { flex-basis: 100%; } .pegboard .sec { margin-top: var(--space-lg); } }
.pegboard .sec-title { font-family: var(--f-title); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; margin: 0; display: flex; align-items: baseline; gap: var(--space-sm); }
.pegboard .sec-title .n { font: 600 12px var(--f-mono); color: var(--muted-fg); letter-spacing: .05em; }
.pegboard .sec-note { font-size: 13.5px; color: var(--muted-fg); margin: 0; }

/* Shop by project: a scroll-snap shelf */
.pegboard .shelf { display: grid; grid-auto-flow: column; grid-auto-columns: 220px; gap: var(--space-tight); overflow-x: auto; scroll-snap-type: x mandatory;
         padding: 2px 2px var(--space-sm); margin: 0 -2px; scrollbar-width: thin; }
.pegboard .shelf > * { scroll-snap-align: start; }
@media (min-width: 1024px) { .pegboard .shelf { grid-auto-columns: 240px; } }
@media (max-width: 639px) { .pegboard .shelf { grid-auto-columns: 168px; } .pegboard .proj-title { font-size: 13px; } }
.pegboard .proj { position: relative; border: 1px solid var(--divider); border-radius: var(--r-card); background: var(--card);
        overflow: hidden; transition: border-color .2s var(--ease), transform .3s var(--ease); }
@media (hover: hover) { .pegboard .proj:hover { border-color: var(--ink); transform: translateY(-2px); } }
.pegboard .proj[data-on="true"] { border: 2px solid var(--teal); }
.pegboard .proj-pick { all: unset; display: block; width: 100%; text-align: left; cursor: pointer; }
.pegboard .proj-pick:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.pegboard .proj-go { position: absolute; top: var(--space-sm); left: var(--space-sm); z-index: 2; width: 32px; height: 32px; border-radius: 50%;
           background: rgba(250,246,236,.94); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
           display: inline-flex; align-items: center; justify-content: center; transition: background .2s var(--ease), color .2s var(--ease); }
.pegboard .proj-go:hover { background: var(--ink); color: var(--paper); }
.pegboard .proj-go .mdi { font-size: 18px; }
.pegboard .proj-img { aspect-ratio: 16 / 10; width: 100%; background: var(--divider); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pegboard .proj-img .mdi { font-size: 32px; color: rgba(11,20,38,.25); }
.pegboard .proj-img img { width: 100%; height: 100%; object-fit: cover; }
.pegboard .proj-body { display: block; padding: var(--space-sm) var(--space-tight) var(--space-tight); }
.pegboard .proj-title { font-size: 14px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.7em; }
.pegboard .proj-n { margin-top: var(--space-xs); font: 600 11px var(--f-mono); color: var(--muted-fg); letter-spacing: .08em; text-transform: uppercase; }
.pegboard .proj-check { position: absolute; top: var(--space-sm); right: var(--space-sm); width: 28px; height: 28px; border-radius: 50%; background: var(--teal); color: var(--ink);
              display: none; align-items: center; justify-content: center; }
.pegboard .proj[data-on="true"] .proj-check { display: inline-flex; }
.pegboard .proj-check .mdi { font-size: 18px; }

/* The project you're filtering by */
.pegboard .ctx { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-tight) var(--space-md); margin-top: var(--space-lg); padding: var(--space-tight) var(--space-md);
       background: var(--ink); color: var(--paper); border-radius: var(--r-card); }
.pegboard .ctx img { width: 56px; height: 40px; object-fit: cover; border-radius: 6px 2px 6px 2px; }
.pegboard .ctx-text { flex: 1; min-width: 200px; font-size: 14px; line-height: 1.4; }
.pegboard .ctx-text b { display: block; font-size: 15px; }
.pegboard .ctx .btn { border-color: rgba(250,246,236,.3); color: var(--paper); min-height: 36px; }
.pegboard .ctx .btn:hover { background: rgba(250,246,236,.1); }
@media (max-width: 639px) { .pegboard .ctx-text { flex-basis: 100%; } .pegboard .ctx .btn { font-size: 13px; padding: 0 var(--space-tight); } .pegboard .ctx .lbl-long { display: none; } }

/* Most used: the creator's go-to gear */
.pegboard .fav { background: var(--ink); color: var(--paper); border-radius: var(--r-card); padding: var(--space-lg) var(--space-md); }
@media (min-width: 640px) { .pegboard .fav { padding: var(--space-lg); } }
.pegboard .fav .sec-title { color: var(--paper); }
.pegboard .fav .sec-note { color: rgba(250,246,236,.7); }
.pegboard .fav-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: var(--space-tight); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-xs); }
.pegboard .fav-row > * { scroll-snap-align: start; }
.pegboard .fav-item { position: relative; display: grid; grid-template-columns: 72px 1fr; gap: var(--space-tight); align-items: center; padding: var(--space-tight);
            background: rgba(250,246,236,.06); border: 1px solid rgba(250,246,236,.14); border-radius: var(--r-card); text-align: left; cursor: pointer; color: var(--paper);
            transition: background .2s var(--ease), border-color .2s var(--ease); }
.pegboard .fav-item:hover { background: rgba(250,246,236,.1); border-color: var(--teal); }
.pegboard .fav-img { width: 72px; height: 72px; border-radius: 10px 3px 10px 3px; background: var(--tile); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pegboard .fav-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 4px; }
.pegboard .fav-img .mdi { color: var(--muted-fg); font-size: 28px; }
.pegboard .fav-name { font-weight: 600; font-size: 14.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pegboard .fav-meta { margin-top: var(--space-xs); font-size: 12.5px; color: rgba(250,246,236,.72); }
.pegboard .fav-meta b { color: var(--teal); font-weight: 600; }

/* ── The board ──────────────────────────────────────── */
.pegboard .grid { display: grid; gap: var(--space-tight); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .pegboard .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); } }
@media (min-width: 1024px) { .pegboard .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .pegboard .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.pegboard .pc { position: relative; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--divider); border-radius: var(--r-card);
      overflow: hidden; transition: border-color .2s var(--ease), transform .3s var(--ease); }
@media (hover: hover) { .pegboard .pc:hover { border-color: var(--ink); transform: translateY(-2px); } }
.pegboard .pc-open { all: unset; cursor: pointer; display: block; }
.pegboard .pc-open::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pegboard .pc-open:focus-visible::after { outline: 2px solid var(--teal); outline-offset: -2px; border-radius: inherit; }
.pegboard .pc-img { position: relative; aspect-ratio: 1 / 1; background: var(--tile); display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--divider); }
.pegboard .pc-img img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-md); mix-blend-mode: multiply; }
.pegboard .pc-img .ph { font-size: 44px; color: rgba(11,20,38,.25); }
.pegboard .pc-uses { position: absolute; left: var(--space-sm); bottom: var(--space-sm); display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px;
           background: var(--paper); border: 1px solid var(--line); border-radius: 8px 2px 8px 2px; font-size: 11.5px; font-weight: 600; }
.pegboard .pc-uses .stack { display: inline-flex; }
.pegboard .pc-uses .stack img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--paper); margin-left: -6px; padding: 0; mix-blend-mode: normal; }
.pegboard .pc-uses .stack img:first-child { margin-left: 0; }
.pegboard .pc-body { padding: var(--space-tight); display: flex; flex-direction: column; gap: 2px; flex: 1; }
.pegboard .pc-kicker { margin: 0; font: 600 10px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pegboard .pc-name { margin: 0; font-family: var(--f-title); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.pegboard .pc-title { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--muted-fg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pegboard .pc-meta { margin-top: auto; padding-top: var(--space-sm); display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.pegboard .price { font-family: var(--f-mono); font-weight: 600; font-size: 14px; letter-spacing: -0.02em; white-space: nowrap; }
.pegboard .price small { font-family: var(--f-sans); font-size: 11.5px; font-weight: 500; color: var(--muted-fg); letter-spacing: 0; margin-right: 3px; }
.pegboard .pc-stores { font-size: 12px; color: var(--muted-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pegboard .pc-cta { position: relative; z-index: 2; margin: 0 var(--space-tight) var(--space-tight); min-height: 40px; font-size: 13.5px; gap: 0; }
.pegboard .pc-cta .lbl-long { white-space: pre; }
.pegboard .pc-cta .mdi { margin-left: 2px; }
@media (max-width: 479px) { .pegboard .pc-cta .lbl-long { display: none; } .pegboard .pc-cta { padding: 0 var(--space-sm); } }
.pegboard mark { background: rgba(20,184,166,.28); color: inherit; border-radius: 2px; padding: 0 1px; }

.pegboard .group + .group { margin-top: var(--space-xl); }
.pegboard .more { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); margin-top: var(--space-lg); }
.pegboard .more-btn { min-width: 200px; background: var(--paper); }
.pegboard .more-n { font: 600 11px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-fg); }
.pegboard .empty { text-align: center; padding: var(--space-2xl) var(--space-md); border: 2px dashed var(--line); border-radius: var(--r-card); }
.pegboard .empty h3 { font-family: var(--f-title); font-weight: 700; font-size: 20px; margin: var(--space-sm) 0 var(--space-xs); }
.pegboard .empty p { margin: 0 0 var(--space-md); color: var(--muted-fg); }
.pegboard .empty .mdi { font-size: 36px; color: var(--teal-deep); }

/* Skeletons */
.pegboard .sk { background: linear-gradient(90deg, var(--divider) 0%, #efebe1 40%, var(--divider) 80%); background-size: 200% 100%; animation: pb-shimmer 1.4s linear infinite; border-radius: 6px; }
@keyframes pb-shimmer { to { background-position: -200% 0; } }
.pegboard .pc--sk .pc-img { border: 0; }

.pegboard .pb-foot-note { margin-top: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-sm); font-size: 13px; color: var(--muted-fg); }
.pegboard .market-switch { border: 0; background: none; padding: 0; font-size: 13px; color: var(--muted-fg); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; align-self: flex-start; }
.pegboard .market-switch:hover { color: var(--ink); }
.pegboard .made { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-xl); padding: var(--space-lg);
        border: 2px solid var(--ink); border-radius: var(--r-card); background: var(--paper); }
.pegboard .made p { margin: 0; max-width: 56ch; }
.pegboard .made b { font-family: var(--f-title); font-size: 18px; display: block; }

/* Full-page states */
.pegboard .state { max-width: 560px; margin: var(--space-2xl) auto; text-align: center; padding: 0 var(--space-md); }
.pegboard .state h1 { font-family: var(--f-title); font-weight: 700; font-size: 32px; letter-spacing: -0.03em; margin: var(--space-md) 0 var(--space-sm); }
.pegboard .state p { color: var(--muted-fg); margin: 0 0 var(--space-lg); }

/* ── Panel (detail) + sheet (mobile filters) ────────── */
.pegboard .scrim { position: fixed; inset: 0; z-index: 60; background: rgba(11,20,38,.45); opacity: 0; transition: opacity .3s var(--ease); }
.pegboard .scrim.on { opacity: 1; }
.pegboard .panel { position: fixed; z-index: 61; background: var(--paper); display: flex; flex-direction: column; outline: none;
         transition: transform .45s var(--ease); }
@media (min-width: 760px) {
  .pegboard .panel { top: 0; right: 0; bottom: 0; width: min(480px, 100vw); border-left: 2px solid var(--ink); transform: translateX(100%); }
  .pegboard .panel.on { transform: none; }
  .pegboard .panel .grip { display: none; }
}
@media (max-width: 759px) {
  .pegboard .panel { left: 0; right: 0; bottom: 0; max-height: 90dvh; border-radius: 18px 18px 0 0; border-top: 2px solid var(--ink); transform: translateY(100%); }
  .pegboard .panel.on { transform: none; }
}
.pegboard .grip { display: flex; justify-content: center; padding: var(--space-sm) 0 0; cursor: grab; touch-action: none; }
.pegboard .grip span { width: 40px; height: 5px; border-radius: 3px; background: rgba(11,20,38,.25); }
.pegboard .panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--line); }
.pegboard .panel-head .mono { color: var(--muted-fg); }
.pegboard .icon-btn { width: 40px; height: 40px; border: 1px solid var(--line); background: transparent; border-radius: var(--r-btn); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.pegboard .icon-btn:hover { background: rgba(11,20,38,.06); }
.pegboard .panel-body { overflow-y: auto; overscroll-behavior: contain; padding: var(--space-md) var(--space-md) calc(var(--space-lg) + env(safe-area-inset-bottom)); }
.pegboard .pd-img { aspect-ratio: 4 / 3; background: var(--tile); border: 1px solid var(--divider); border-radius: var(--r-card); display: flex; align-items: center; justify-content: center; }
.pegboard .pd-img img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-lg); mix-blend-mode: multiply; }
.pegboard .pd-img .ph { font-size: 64px; color: rgba(11,20,38,.2); }
@media (max-width: 759px) { .pegboard .pd-img { aspect-ratio: auto; height: 200px; } .pegboard .pd-name { font-size: 22px; } .pegboard .pd-title { font-size: 13px; } }
.pegboard .pd-kicker { margin: var(--space-md) 0 var(--space-xs); color: var(--muted-fg); }
.pegboard .pd-name { font-family: var(--f-title); font-weight: 700; font-size: 26px; line-height: 1.15; letter-spacing: -0.025em; margin: 0; }
.pegboard .pd-specs { margin: var(--space-sm) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.pegboard .pd-specs span { font: 600 11.5px var(--f-mono); padding: 3px 8px; border-radius: 4px; background: var(--card); border: 1px solid var(--divider); }
.pegboard .pd-title { margin: var(--space-sm) 0 0; font-size: 13.5px; color: var(--muted-fg); }
/* Three levels in the drawer: section (Where to buy / Used in these builds) > store > product. */
.pegboard .pd-h { margin: var(--space-lg) 0 var(--space-md); padding-top: var(--space-lg); border-top: 1px solid var(--line);
        font-family: var(--f-title); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;
        display: flex; align-items: baseline; gap: var(--space-sm); }
.pegboard .pd-h .n { font: 600 11px var(--f-mono); color: var(--muted-fg); letter-spacing: .05em; }
.pegboard .offers { display: flex; flex-direction: column; gap: var(--space-sm); }
.pegboard .offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs) var(--space-md); align-items: center; padding: var(--space-tight) var(--space-md);
         border: 1px solid var(--divider); border-radius: var(--r-card); background: var(--card); }
.pegboard .offer.best { border: 2px solid var(--teal); }
.pegboard .offer-store { font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.pegboard .tag { font: 600 9.5px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; background: var(--teal); color: var(--ink); }
.pegboard .tag--sand { background: var(--sand); }
.pegboard .offer-sub { font-size: 12.5px; color: var(--muted-fg); display: flex; gap: var(--space-sm); flex-wrap: wrap; align-items: center; }
.pegboard .offer-sub .mdi { font-size: 14px; vertical-align: -2px; color: var(--sand); }
.pegboard .offer .price { font-size: 16px; }
.pegboard .offer:has(.offer-img) { grid-template-columns: 52px minmax(0, 1fr) auto; }
.pegboard .offer-left { min-width: 0; }
.pegboard .offer-title { font-size: 13px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 2px; }
.pegboard .stores { display: flex; flex-direction: column; gap: var(--space-md); }
.pegboard .store-head { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; margin-bottom: var(--space-xs); }
.pegboard .store-name { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--f-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--teal-deep); }
.pegboard .store-name .mdi { font-size: 16px; }
.pegboard .store-n { font: 600 10.5px var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-fg); }
.pegboard .store .offer + .offer { margin-top: var(--space-sm); }
.pegboard .offer-img { width: 52px; height: 52px; border-radius: 8px 2px 8px 2px; background: var(--tile); border: 1px solid var(--divider); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pegboard .offer-img img { width: 100%; height: 100%; object-fit: contain; padding: 3px; mix-blend-mode: multiply; }
.pegboard .offer-img .mdi { font-size: 22px; color: rgba(11,20,38,.25); }
.pegboard .offer-from { font-size: 12px; color: var(--muted-fg); margin-top: 2px; }
@media (max-width: 479px) { .pegboard .offer-img { display: none; } .pegboard .offer:has(.offer-img) { grid-template-columns: minmax(0, 1fr) auto; } }
.pegboard .builds { display: flex; flex-direction: column; gap: var(--space-sm); }
.pegboard .build { display: grid; grid-template-columns: 72px 1fr; gap: var(--space-tight); padding: var(--space-sm); border: 1px solid var(--divider); border-radius: var(--r-card); }
.pegboard .build img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px 2px 8px 2px; background: var(--divider); }
.pegboard .build-ph { width: 72px; height: 54px; border-radius: 8px 2px 8px 2px; background: var(--divider); display: flex; align-items: center; justify-content: center; }
.pegboard .build-ph .mdi { font-size: 22px; color: rgba(11,20,38,.3); }
.pegboard .build-title { font-weight: 600; font-size: 14px; line-height: 1.3; margin: 0; }
.pegboard .build-need { font-size: 12.5px; color: var(--muted-fg); margin: 2px 0 0; }
.pegboard .build-acts { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-tight); margin-top: var(--space-xs); }
.pegboard .build-acts a { font-size: 13px; font-weight: 600; color: var(--teal-deep); text-decoration: none; display: inline-flex; align-items: center; gap: 3px; min-height: 28px;
                background: linear-gradient(currentColor, currentColor) 0 calc(100% - 2px) / 0 1.5px no-repeat; }
.pegboard .build-acts a:hover { background-size: 100% 1.5px; }
.pegboard .build-acts .mdi { font-size: 17px; }
.pegboard .pd-foot { margin-top: var(--space-lg); display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); flex-wrap: wrap; font-size: 12px; color: var(--muted-fg); }

.pegboard .sheet-sec { padding: var(--space-md) 0; border-bottom: 1px solid var(--line); }
.pegboard .sheet-sec:last-child { border-bottom: 0; }
.pegboard .sheet-sec h3 { margin: 0 0 var(--space-sm); }
.pegboard .opts { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.pegboard .opt { text-align: left; min-height: 40px; padding: 0 var(--space-tight); border: 1px solid var(--line); border-radius: var(--r-btn); background: transparent; font-size: 14px; font-weight: 600; cursor: pointer; }
.pegboard .opt[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pegboard .sheet-foot { position: sticky; bottom: 0; display: flex; gap: var(--space-sm); padding: var(--space-tight) var(--space-md) calc(var(--space-tight) + env(safe-area-inset-bottom));
              background: var(--paper); border-top: 1px solid var(--line); }
.pegboard .sheet-foot .btn { flex: 1; min-height: 48px; }

/* ── Footer ─────────────────────────────────────────── */
.pegboard .site-foot { border-top: 1px solid var(--divider); padding: var(--space-2xl) 0 var(--space-xl); }
.pegboard .site-foot .cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); margin-bottom: var(--space-xl); }
@media (min-width: 640px) { .pegboard .site-foot .cols { grid-template-columns: repeat(4, 1fr); } }
.pegboard .site-foot .brand { grid-column: span 2; }
@media (min-width: 640px) { .pegboard .site-foot .brand { grid-column: auto; } }
.pegboard .site-foot .brand img { height: 24px; width: auto; margin-bottom: var(--space-sm); }
.pegboard .site-foot p, .pegboard .site-foot nav a { font-size: 14px; color: var(--muted-fg); }
.pegboard .site-foot .brand p { margin: 0; max-width: 24ch; line-height: 1.6; }
.pegboard .site-foot .h { font: 400 10px var(--f-mono); color: var(--muted-fg); text-transform: uppercase; letter-spacing: .18em; margin: 0 0 var(--space-sm); }
.pegboard .site-foot nav { display: flex; flex-direction: column; gap: var(--space-sm); }
.pegboard .site-foot nav a { text-decoration: none; }
.pegboard .site-foot nav a:hover { color: var(--ink); }
.pegboard .site-foot .copy { font: 12px var(--f-mono); color: var(--muted-fg); letter-spacing: .02em; margin: 0; }

/* ── Motion ─────────────────────────────────────────── */
.pegboard .rise { animation: pb-rise .5s var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes pb-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pegboard *, .pegboard *::before, .pegboard *::after { animation: none !important; transition: none !important; }
}

/* ── Embedded (Creator Space tab) ───────────────────── */
.pegboard[data-mode="embedded"] .wrap { max-width: none; padding: 0; }
.pegboard[data-mode="embedded"] .pb-hero { background: none; }
.pegboard[data-mode="embedded"] .pb-hero .wrap { padding: var(--space-xl) 0 var(--space-lg); }
.pegboard[data-mode="embedded"] .pb-h1 { font-size: 1.75rem; max-width: none; }
@media (min-width: 640px) { .pegboard[data-mode="embedded"] .pb-h1 { font-size: 2.25rem; } }
.pegboard .pb-open-page { display: inline-flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-tight); font-size: 13.5px; font-weight: 600;
                          color: var(--teal-deep); text-decoration: none; }
.pegboard .pb-open-page span:first-child { text-decoration: underline; text-underline-offset: 3px; }
.pegboard .pb-open-page .mdi { font-size: 16px; }