/* ==========================================================================
   Loom Forge — Server & Consumer Part Picker
   Builds on theme.css. Uses the .glass primitive but never .glass--blur:
   backdrop-filter is reserved for the nav, because eight blurred panes at
   1,531 kpx is what made the site lag the first time.
   ========================================================================== */

.pp { --pp-gap: 18px; }

/* ---------- page header ---------- */
.pp-head { padding-top: clamp(96px, 13vw, 150px); padding-bottom: 1.5rem; }
.pp-head__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 2rem; justify-content: space-between; }
.pp-head h1 { font-size: clamp(2.1rem, 4.6vw, 3.2rem); }
.pp-head .lede { max-width: 62ch; margin-top: .7rem; }

.pp-stats { display: flex; flex-wrap: wrap; gap: .5rem .6rem; margin-top: 1.1rem; }
.pp-stat {
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding: .42rem .9rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.06); border: 1px solid var(--glass-edge);
  font-size: .82rem; color: var(--ink-soft);
}
.pp-stat b { font-family: var(--font-display); color: var(--ink); font-size: .95rem; }

/* ---------- category tiles ---------- */
.pp-cats {
  display: grid; gap: var(--pp-gap);
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}
.pp-cat {
  display: block; padding: 1.25rem 1.3rem 1.15rem;
  border-radius: var(--r-md); text-decoration: none;
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.pp-cat:hover { transform: translateY(-3px); border-color: var(--glass-edge-up); }
.pp-cat__n { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; color: var(--brand-coral-lift); line-height: 1; }
.pp-cat__label { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-top: .35rem; }
.pp-cat__note { font-size: .84rem; color: var(--ink-mute); margin-top: .3rem; line-height: 1.45; }

/* ---------- toolbar ---------- */
.pp-toolbar {
  position: sticky; top: 84px; z-index: 30;
  padding: .9rem 1rem; border-radius: var(--r-md);
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
  /* Opaque rather than translucent: this pane has content scrolling under it,
     and a blur here is exactly the cost the theme is built to avoid. */
  background: rgba(9, 15, 28, .94);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-2);
}
.pp-search { flex: 1 1 260px; position: relative; display: flex; }
.pp-search input {
  width: 100%; padding: .72rem 1rem .72rem 2.4rem;
  border-radius: var(--r-pill); border: 1px solid var(--glass-edge);
  background: rgba(255,255,255,.06); color: var(--ink); font-size: .95rem;
}
.pp-search input::placeholder { color: var(--ink-mute); }
.pp-search svg { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--ink-mute); }

.pp-select {
  padding: .68rem 2rem .68rem .9rem; border-radius: var(--r-pill);
  border: 1px solid var(--glass-edge); background: rgba(255,255,255,.06);
  color: var(--ink); font-size: .88rem; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%239DAEC2' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center;
}
.pp-check { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--ink-soft); cursor: pointer; white-space: nowrap; }
.pp-check input { accent-color: var(--brand-coral); width: 1rem; height: 1rem; }

/* ---------- part list ---------- */
.pp-meta { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: baseline; margin: 1.2rem 0 .9rem; color: var(--ink-mute); font-size: .88rem; }

.pp-grid { display: grid; gap: var(--pp-gap); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.pp-part { display: flex; flex-direction: column; padding: 1.1rem 1.2rem; border-radius: var(--r-md); }
.pp-part__top { display: flex; gap: .8rem; justify-content: space-between; align-items: flex-start; }
.pp-part__name { font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; line-height: 1.3; }
.pp-part__name a { text-decoration: none; }
.pp-part__name a:hover { color: var(--brand-coral-lift); }
.pp-part__brand { font-size: .78rem; color: var(--ink-mute); letter-spacing: .06em; text-transform: uppercase; margin-bottom: .25rem; }
.pp-part__spec { font-size: .86rem; color: var(--ink-soft); margin-top: .5rem; line-height: 1.5; }
.pp-part__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem; margin-top: auto; padding-top: .9rem; }

.pp-price { text-align: right; white-space: nowrap; }
.pp-price__v { font-family: var(--font-display); font-weight: 700; font-size: 1.28rem; color: var(--ink); }
.pp-price__n { font-size: .74rem; color: var(--ink-mute); }
.pp-price--none .pp-price__v { color: var(--ink-mute); font-size: .95rem; font-weight: 500; }

.pp-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .6rem; }
.pp-chip {
  font-size: .7rem; letter-spacing: .07em; text-transform: uppercase;
  font-family: var(--font-display); font-weight: 600;
  padding: .22rem .55rem; border-radius: var(--r-pill);
  background: rgba(255,255,255,.07); border: 1px solid var(--glass-edge); color: var(--ink-mute);
}
.pp-chip--year { color: var(--ink-soft); }
.pp-chip--server { color: #7FE3D8; border-color: rgba(39,184,174,.4); background: rgba(39,184,174,.12); }
.pp-chip--consumer { color: #C3A9FF; border-color: rgba(124,92,255,.4); background: rgba(124,92,255,.12); }
.pp-chip--inferred { color: #F0B429; border-color: rgba(240,180,41,.38); background: rgba(240,180,41,.1); }

/* ---------- sparkline ---------- */
.pp-spark { display: block; width: 92px; height: 26px; overflow: visible; }
.pp-spark path { fill: none; stroke: var(--aurora-teal); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.pp-spark .area { fill: rgba(39,184,174,.16); stroke: none; }
.pp-spark--up path { stroke: var(--brand-coral-lift); }
.pp-spark--up .area { fill: rgba(255,138,110,.14); }

/* ---------- builder ---------- */
.pp-build { display: grid; gap: var(--pp-gap); grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
@media (max-width: 940px) { .pp-build { grid-template-columns: 1fr; } }

.pp-slots { border-radius: var(--r-md); overflow: hidden; }
.pp-slot {
  display: grid; grid-template-columns: 148px minmax(0,1fr) auto;
  gap: 1rem; align-items: center;
  padding: .95rem 1.15rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.pp-slot:last-child { border-bottom: 0; }
.pp-slot__cat { font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--ink-soft); }
.pp-slot__cat span { display: block; font-size: .72rem; color: var(--ink-mute); font-weight: 400; letter-spacing: .04em; }
.pp-slot__pick { min-width: 0; }
.pp-slot__empty { color: var(--ink-mute); font-size: .9rem; font-style: italic; }
.pp-slot__name { font-weight: 600; font-size: .95rem; line-height: 1.35; }
.pp-slot__spec { font-size: .8rem; color: var(--ink-mute); margin-top: .15rem; }
.pp-slot__act { display: flex; align-items: center; gap: .5rem; }
@media (max-width: 620px) {
  .pp-slot { grid-template-columns: 1fr; gap: .45rem; }
  .pp-slot__act { justify-content: flex-start; }
}

.pp-btn {
  padding: .48rem 1rem; border-radius: var(--r-pill); cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: .82rem;
  background: rgba(255,255,255,.07); border: 1px solid var(--glass-edge); color: var(--ink);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.pp-btn:hover { background: rgba(255,255,255,.14); border-color: var(--glass-edge-up); }
.pp-btn--x { padding: .4rem .6rem; color: var(--ink-mute); }
.pp-btn--x:hover { color: var(--brand-coral-lift); }

/* ---------- summary rail ---------- */
.pp-rail { position: sticky; top: 108px; padding: 1.25rem 1.3rem; border-radius: var(--r-md); }
.pp-rail h2 { font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-size: .78rem; }
.pp-total { font-family: var(--font-display); font-weight: 700; font-size: 2.1rem; margin-top: .5rem; }
.pp-total small { display: block; font-size: .76rem; font-weight: 400; color: var(--ink-mute); letter-spacing: .04em; margin-top: .2rem; }
.pp-rail dl { display: grid; grid-template-columns: 1fr auto; gap: .4rem .8rem; margin-top: 1rem; font-size: .87rem; }
.pp-rail dt { color: var(--ink-mute); }
.pp-rail dd { text-align: right; font-family: var(--font-display); font-weight: 600; }

/* ---------- compatibility ---------- */
.pp-issues { margin-top: 1rem; display: grid; gap: .5rem; }
.pp-issue {
  display: flex; gap: .6rem; padding: .65rem .8rem;
  border-radius: var(--r-sm); font-size: .84rem; line-height: 1.5;
  border: 1px solid transparent;
}
.pp-issue__i { flex: none; font-weight: 700; font-family: var(--font-display); }
.pp-issue--err  { background: rgba(201,62,37,.16); border-color: rgba(243,111,82,.42); color: #FFC7B8; }
.pp-issue--warn { background: rgba(240,180,41,.12); border-color: rgba(240,180,41,.34); color: #FBE0A8; }
.pp-issue--ok   { background: rgba(39,184,174,.12); border-color: rgba(39,184,174,.34); color: #A8EDE6; }
.pp-issue small { display: block; opacity: .78; margin-top: .15rem; }

/* ---------- offers table ---------- */
.pp-offers { width: 100%; border-collapse: collapse; margin-top: .8rem; font-size: .88rem; }
.pp-offers th {
  text-align: left; font-family: var(--font-display); font-weight: 600;
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute); padding: .5rem .7rem; border-bottom: 1px solid var(--glass-edge);
}
.pp-offers td { padding: .65rem .7rem; border-bottom: 1px solid rgba(255,255,255,.055); vertical-align: top; }
.pp-offers tr:last-child td { border-bottom: 0; }
.pp-offers a { color: var(--ink); text-decoration: none; }
.pp-offers a:hover { color: var(--brand-coral-lift); text-decoration: underline; }
.pp-offers .num { text-align: right; font-family: var(--font-display); font-weight: 600; white-space: nowrap; }
.pp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- merchant health ---------- */
.pp-merchants { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.pp-merchant { padding: .9rem 1rem; border-radius: var(--r-sm); background: rgba(255,255,255,.05); border: 1px solid var(--glass-edge); }
.pp-merchant__top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.pp-merchant__name { font-family: var(--font-display); font-weight: 600; font-size: .95rem; }
.pp-merchant__note { font-size: .78rem; color: var(--ink-mute); margin-top: .35rem; line-height: 1.45; }
.pp-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: 0 0 10px currentColor; }
.pp-dot--ok       { background: var(--aurora-teal); color: var(--aurora-teal); }
.pp-dot--blocked  { background: #F0B429; color: #F0B429; }
.pp-dot--error    { background: var(--brand-coral); color: var(--brand-coral); }
.pp-dot--idle,
.pp-dot--unknown,
.pp-dot--disabled { background: #6B7A90; color: #6B7A90; box-shadow: none; }

/* ---------- modal picker ---------- */
.pp-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 1rem; }
.pp-modal[hidden] { display: none; }
.pp-modal__veil { position: absolute; inset: 0; background: rgba(3,5,11,.78); }
.pp-modal__box {
  position: relative; width: min(100%, 880px); max-height: min(86vh, 780px);
  display: flex; flex-direction: column;
  background: rgba(9, 15, 28, .97); border: 1px solid var(--glass-edge-up);
  border-radius: var(--r-lg); box-shadow: var(--shadow-3); overflow: hidden;
}
.pp-modal__head { padding: 1.1rem 1.3rem .8rem; border-bottom: 1px solid var(--glass-edge); }
.pp-modal__body { overflow-y: auto; padding: .6rem 1.3rem 1.3rem; }
.pp-modal__row {
  display: flex; gap: 1rem; align-items: center; justify-content: space-between;
  width: 100%; text-align: left; padding: .75rem .6rem; border-radius: var(--r-sm);
  background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.06); cursor: pointer;
}
.pp-modal__row:hover { background: rgba(255,255,255,.06); }

/* ---------- misc ---------- */
.pp-empty { padding: 3rem 1rem; text-align: center; color: var(--ink-mute); }
.pp-note { font-size: .82rem; color: var(--ink-mute); line-height: 1.6; }
.pp-pager { display: flex; gap: .6rem; justify-content: center; align-items: center; margin-top: 2rem; }
.pp-skel { border-radius: var(--r-md); height: 148px; background: linear-gradient(100deg, rgba(255,255,255,.045) 30%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.045) 70%); background-size: 220% 100%; animation: ppshim 1.4s infinite; }
@keyframes ppshim { to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .pp-skel { animation: none; } }

.pp-banner {
  display: flex; gap: .7rem; padding: .8rem 1rem; border-radius: var(--r-sm);
  background: rgba(240,180,41,.1); border: 1px solid rgba(240,180,41,.3);
  color: #FBE0A8; font-size: .86rem; line-height: 1.55; margin-bottom: 1.2rem;
}
.pp-banner[hidden] { display: none; }