/* PCG Market — PC builder. */

.pcg-builder {
  max-width: var(--pcg-maxw);
  margin: 0 auto;
  font-family: var(--pcg-font);
  color: var(--pcg-text);
}
.pcg-builder *, .pcg-builder a { text-decoration: none; }
.pcg-builder a:not(.pcg-btn):hover { text-decoration: underline; }

.pcg-builder__head { margin-bottom: var(--pcg-space-4); }
.pcg-builder__head h1 { margin: 0 0 var(--pcg-space-2); font-size: var(--pcg-fs-2xl); letter-spacing: -0.02em; }
.pcg-builder__head p { margin: 0; max-width: 68ch; color: var(--pcg-text-muted); }
.pcg-builder__step {
  margin: 0 0 var(--pcg-space-1);
  font-size: var(--pcg-fs-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--pcg-text-faint);
}

/* ── Running totals ────────────────────────────────────────────────────────
   Sticky because the total is the thing people keep glancing at, and losing it
   on scroll means guessing. */

.pcg-bstat {
  position: sticky; top: 0; z-index: 20;
  margin-bottom: var(--pcg-space-4);
  padding: var(--pcg-space-3) var(--pcg-space-4);
  background: var(--pcg-bg);
  border: 1px solid var(--pcg-border);
  border-radius: var(--pcg-radius);
  box-shadow: var(--pcg-shadow-sm);
}
.pcg-bstat__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--pcg-space-5); }
.pcg-bstat__figure { min-width: 0; }
.pcg-bstat__label {
  display: block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--pcg-text-faint);
}
.pcg-bstat__value { display: block; font-size: var(--pcg-fs-xl); line-height: 1.2; font-variant-numeric: tabular-nums; }
.pcg-bstat__note { display: block; font-size: var(--pcg-fs-xs); color: var(--pcg-text-muted); max-width: 34ch; }
.pcg-bstat__actions { margin-left: auto; display: flex; gap: var(--pcg-space-2); }

/* ── Findings ────────────────────────────────────────────────────────────── */

.pcg-bissues { margin: var(--pcg-space-3) 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pcg-bissues--inline { margin-top: var(--pcg-space-2); }
.pcg-bissue {
  padding: 8px var(--pcg-space-3);
  border-radius: var(--pcg-radius-sm);
  font-size: var(--pcg-fs-sm); line-height: 1.4;
  border-left: 3px solid transparent;
}
.pcg-bissue--block { background: #fdf0f0; border-left-color: var(--pcg-danger); }
.pcg-bissue--warn  { background: #fdf7e8; border-left-color: var(--pcg-warn); }
.pcg-bissue--info  { background: var(--pcg-surface); border-left-color: var(--pcg-border-strong); }
.pcg-bissue__tag {
  display: inline-block; margin-right: 6px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.pcg-bissue--block .pcg-bissue__tag { color: var(--pcg-danger); }
.pcg-bissue--warn  .pcg-bissue__tag { color: #8a6100; }

/* ── Step list ───────────────────────────────────────────────────────────── */

.pcg-bsteps { margin: 0; padding: 0; list-style: none; counter-reset: none; display: grid; gap: var(--pcg-space-2); }
.pcg-bstep {
  display: flex; gap: var(--pcg-space-3); align-items: flex-start;
  padding: var(--pcg-space-4);
  background: var(--pcg-bg);
  border: 1px solid var(--pcg-border);
  border-radius: var(--pcg-radius);
}
.pcg-bstep.is-done { border-color: var(--pcg-success); background: #fbfefc; }
.pcg-bstep__num {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; flex: 0 0 auto;
  border-radius: 50%; background: var(--pcg-surface-alt);
  font-size: var(--pcg-fs-sm); font-weight: 700; color: var(--pcg-text-muted);
}
.pcg-bstep.is-done .pcg-bstep__num { background: var(--pcg-success); color: #fff; }
.pcg-bstep__body { flex: 1; min-width: 0; }
.pcg-bstep__head { display: flex; align-items: baseline; gap: var(--pcg-space-2); }
.pcg-bstep__head h2 { margin: 0; font-size: var(--pcg-fs-base); }
.pcg-bstep__req, .pcg-bstep__opt {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
}
.pcg-bstep__req { color: var(--pcg-text-muted); }
.pcg-bstep__opt { color: var(--pcg-text-faint); }
.pcg-bstep__cta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.pcg-bstep__count { font-size: var(--pcg-fs-xs); color: var(--pcg-text-faint); }

.pcg-bchosen { margin: var(--pcg-space-2) 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pcg-bchosen li { display: flex; align-items: center; gap: var(--pcg-space-3); }
.pcg-bchosen img { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
.pcg-bchosen li > div { flex: 1; min-width: 0; }
.pcg-bchosen li span { display: block; font-size: var(--pcg-fs-xs); color: var(--pcg-text-muted); }
.pcg-bchosen__remove {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--pcg-fs-xs); color: var(--pcg-danger);
}
.pcg-bchosen__remove:hover { text-decoration: underline; }

.pcg-builder__reset { margin-top: var(--pcg-space-4); }

/* ── Candidate cards ───────────────────────────────────────────────────────
   Blocked parts are dimmed, never removed. A part that vanishes reads as "out
   of stock"; a part marked with its reason teaches how the machine fits
   together, which is the whole point of a builder. */

.pcg-builder__body { display: block; }
.pcg-builder__body--summary { grid-template-columns: minmax(0, 1fr) 320px; }

.pcg-bcards { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--pcg-space-2); }
.pcg-bcard {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: var(--pcg-space-3); align-items: center;
  padding: var(--pcg-space-3);
  background: var(--pcg-bg);
  border: 1px solid var(--pcg-border);
  border-radius: var(--pcg-radius);
}
.pcg-bcard--warn { border-left: 3px solid var(--pcg-warn); }
.pcg-bcard--blocked { opacity: .62; border-left: 3px solid var(--pcg-danger); background: var(--pcg-surface); }
.pcg-bcard--blocked:hover { opacity: 1; }
.pcg-bcard.is-chosen { border-color: var(--pcg-success); background: #fbfefc; }

.pcg-bcard__media { display: flex; align-items: center; justify-content: center; height: 62px; }
.pcg-bcard__media img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pcg-bcard__brand {
  margin: 0; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--pcg-text-faint);
}
.pcg-bcard__body h3 { margin: 1px 0 3px; font-size: var(--pcg-fs-base); line-height: 1.3; }
.pcg-bcard__body h3 a { color: var(--pcg-text); }
.pcg-bcard__specs { margin: 0; font-size: var(--pcg-fs-xs); color: var(--pcg-text-muted); }
.pcg-bcard__reasons { margin: 6px 0 0; padding: 0; list-style: none; font-size: var(--pcg-fs-xs); }
.pcg-bcard__reasons li { padding: 4px 8px; border-radius: var(--pcg-radius-sm); margin-bottom: 3px; line-height: 1.4; }

.pcg-bcard__foot { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.pcg-bcard__shops, .pcg-bcard__noprice { font-size: 11px; color: var(--pcg-text-faint); }

.pcg-bnav {
  display: flex; flex-wrap: wrap; gap: var(--pcg-space-2);
  margin-top: var(--pcg-space-4); padding-top: var(--pcg-space-4);
  border-top: 1px solid var(--pcg-border);
}
.pcg-bnav .pcg-btn--primary { margin-left: auto; }

/* ── Summary ─────────────────────────────────────────────────────────────── */

.pcg-btable { width: 100%; border-collapse: collapse; font-size: var(--pcg-fs-sm); }
.pcg-btable th, .pcg-btable td {
  padding: var(--pcg-space-3); text-align: left;
  border-bottom: 1px solid var(--pcg-border); vertical-align: top;
}
.pcg-btable thead th {
  font-size: var(--pcg-fs-xs); text-transform: uppercase; letter-spacing: .05em;
  color: var(--pcg-text-faint); font-weight: 700;
}

.pcg-bpsu {
  margin-top: var(--pcg-space-4); padding: var(--pcg-space-4);
  background: var(--pcg-primary-soft); border-radius: var(--pcg-radius);
}
.pcg-bpsu h2 { margin: 0 0 var(--pcg-space-2); font-size: var(--pcg-fs-base); }
.pcg-bpsu p { margin: 0 0 var(--pcg-space-3); font-size: var(--pcg-fs-sm); }
.pcg-bpsu ul { margin: 0 0 var(--pcg-space-3); padding: 0; list-style: none; font-size: var(--pcg-fs-sm); }
.pcg-bpsu li { padding: 4px 0; }
.pcg-bpsu li span { display: block; font-size: var(--pcg-fs-xs); color: var(--pcg-text-muted); }

.pcg-bsave {
  align-self: start; padding: var(--pcg-space-4);
  background: var(--pcg-surface); border-radius: var(--pcg-radius);
}
.pcg-bsave h2 { margin: 0 0 var(--pcg-space-3); font-size: var(--pcg-fs-base); }
.pcg-bshare { margin-top: var(--pcg-space-4); padding-top: var(--pcg-space-3); border-top: 1px solid var(--pcg-border); }
.pcg-bshare label {
  display: block; margin-bottom: 4px;
  font-size: var(--pcg-fs-xs); font-weight: 600; color: var(--pcg-text-muted);
}
.pcg-bshare .pcg-input {
  width: 100%; min-height: 38px; padding: 0 var(--pcg-space-2);
  border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius-sm);
  font: inherit; font-size: var(--pcg-fs-xs); background: var(--pcg-bg); box-sizing: border-box;
}

.pcg-blist { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--pcg-space-2); }
.pcg-blist li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pcg-space-3);
  padding: var(--pcg-space-3);
  background: var(--pcg-bg); border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius);
}
.pcg-blist span { display: block; font-size: var(--pcg-fs-xs); color: var(--pcg-text-muted); }

@media (max-width: 900px) {
  .pcg-builder__body, .pcg-builder__body--summary { grid-template-columns: 1fr; }
  .pcg-bstat { position: static; }
  .pcg-bcard { grid-template-columns: 56px minmax(0, 1fr); }
  .pcg-bcard__foot { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
}

/* The capability line answers "what is this good for", which a spec row never
   does for someone who does not already know hardware. */
.pcg-bcard__capability {
  margin: 5px 0 0;
  padding: 4px 8px;
  background: var(--pcg-primary-soft);
  border-radius: var(--pcg-radius-sm);
  font-size: var(--pcg-fs-xs);
  line-height: 1.4;
}

/* Quantity: two of the same memory kit is a normal thing to want, and two
   identical rows to scroll past is not a good way to express it. */
.pcg-qty { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.pcg-qty__label { font-size: var(--pcg-fs-xs); color: var(--pcg-text-faint); }
.pcg-qty__input {
  width: 52px; min-height: 30px; padding: 0 6px;
  border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius-sm);
  font: inherit; font-size: var(--pcg-fs-xs); text-align: right;
  font-variant-numeric: tabular-nums; background: var(--pcg-bg);
}
.pcg-qty__save {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--pcg-fs-xs); color: var(--pcg-primary);
}
.pcg-qty__save:hover { text-decoration: underline; }

/* ── Showcase ──────────────────────────────────────────────────────────── */

.pcg-showcase { max-width: var(--pcg-maxw); margin: 0 auto; font-family: var(--pcg-font); color: var(--pcg-text); }
.pcg-showcase *, .pcg-showcase a { text-decoration: none; }
.pcg-showcase a:not(.pcg-btn):hover { text-decoration: underline; }
.pcg-showcase__back { font-size: var(--pcg-fs-sm); margin: 0 0 var(--pcg-space-3); }

.pcg-showcase__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pcg-space-4);
  padding: var(--pcg-space-3) var(--pcg-space-4);
  margin-bottom: var(--pcg-space-4);
  background: var(--pcg-surface); border-radius: var(--pcg-radius);
}
.pcg-showcase__bar > .pcg-btn { margin-left: auto; }
.pcg-showcase__filters { display: flex; flex-wrap: wrap; gap: var(--pcg-space-1); }
.pcg-showcase__filters a {
  padding: 5px var(--pcg-space-3); border-radius: 999px;
  font-size: var(--pcg-fs-sm); color: var(--pcg-text-muted);
}
.pcg-showcase__filters a.is-active { background: var(--pcg-bg); color: var(--pcg-text); font-weight: 600; box-shadow: var(--pcg-shadow-sm); }

.pcg-showcase__heading {
  margin: var(--pcg-space-5) 0 var(--pcg-space-3);
  font-size: var(--pcg-fs-lg);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pcg-space-3);
}
/* Shop builds sit under their own heading with the reason stated. A shop can
   publish a build it profits from; mixing those into the community list would
   be advertising without the label. */
.pcg-showcase__note { font-size: var(--pcg-fs-xs); font-weight: 400; color: var(--pcg-text-faint); }

.pcg-scards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--pcg-space-3); margin: 0; padding: 0; list-style: none;
}
.pcg-scards > li { list-style: none; margin: 0; }
.pcg-scard {
  display: flex; flex-direction: column;
  background: var(--pcg-bg); border: 1px solid var(--pcg-border);
  border-radius: var(--pcg-radius); overflow: hidden;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.pcg-scard:hover { box-shadow: var(--pcg-shadow); border-color: var(--pcg-border-strong); }
.pcg-scard__body { flex: 1; padding: var(--pcg-space-4); color: var(--pcg-text); }
.pcg-scard__body h3 { margin: 0 0 4px; font-size: var(--pcg-fs-base); line-height: 1.3; }
.pcg-scard__parts { margin: 0; font-size: var(--pcg-fs-xs); color: var(--pcg-text-muted); line-height: 1.45; }
.pcg-scard__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pcg-space-2);
  padding: var(--pcg-space-3) var(--pcg-space-4);
  border-top: 1px solid var(--pcg-border);
}
.pcg-scard__meta { display: block; font-size: 11px; color: var(--pcg-text-faint); }
.pcg-scard__votes {
  padding: 3px 10px; border-radius: 999px; background: var(--pcg-surface-alt);
  font-size: var(--pcg-fs-sm); font-weight: 700; font-variant-numeric: tabular-nums;
}

.pcg-vote { display: inline-flex; align-items: center; gap: 4px; }
.pcg-vote__btn {
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  background: var(--pcg-bg); border: 1px solid var(--pcg-border);
  border-radius: var(--pcg-radius-sm);
  font-size: 11px; line-height: 1; color: var(--pcg-text-muted);
}
.pcg-vote__btn:hover { border-color: var(--pcg-primary); color: var(--pcg-primary); }
.pcg-vote__btn.is-on { background: var(--pcg-primary); border-color: var(--pcg-primary); color: #fff; }
.pcg-vote__score { min-width: 30px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
  .pcg-showcase__bar { flex-direction: column; align-items: stretch; }
  .pcg-showcase__bar > .pcg-btn { margin-left: 0; }
}

/* ── Multi-slot steps ──────────────────────────────────────────────────────
   Adding a drive and being thrown to the next step means navigating back for
   the second one. Ask instead. */

.pcg-added {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pcg-space-3);
  padding: var(--pcg-space-3) var(--pcg-space-4);
  margin-bottom: var(--pcg-space-3);
  background: #ecf7ef; border-left: 3px solid var(--pcg-success);
  border-radius: var(--pcg-radius);
}
.pcg-added__msg { margin: 0; font-size: var(--pcg-fs-sm); flex: 1; min-width: 220px; }
.pcg-added__actions { display: flex; gap: var(--pcg-space-2); }

.pcg-instep {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pcg-space-3);
  padding: var(--pcg-space-2) var(--pcg-space-4);
  margin-bottom: var(--pcg-space-3);
  background: var(--pcg-surface); border-radius: var(--pcg-radius);
  font-size: var(--pcg-fs-sm);
}
.pcg-instep__label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--pcg-text-faint);
}
.pcg-instep ul { display: flex; flex-wrap: wrap; gap: var(--pcg-space-3); margin: 0; padding: 0; list-style: none; }
.pcg-instep li { display: inline-flex; align-items: center; gap: 6px; }
.pcg-instep form { display: inline; }
.pcg-instep button {
  background: none; border: 0; padding: 0 2px; cursor: pointer;
  font-size: 15px; line-height: 1; color: var(--pcg-text-faint);
}
.pcg-instep button:hover { color: var(--pcg-danger); }

.pcg-bcard__add { display: flex; align-items: center; gap: 6px; }
.pcg-bcard__qty { display: inline-flex; align-items: center; gap: 4px; }
.pcg-bcard__qty span { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--pcg-text-faint); }
.pcg-bcard__qty input {
  width: 46px; min-height: 32px; padding: 0 6px;
  border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius-sm);
  font: inherit; font-size: var(--pcg-fs-xs); text-align: right;
  font-variant-numeric: tabular-nums; background: var(--pcg-bg);
}

/* ── Where to buy ──────────────────────────────────────────────────────────
   Both totals get equal visual weight. The cheapest split is not automatically
   the right answer, and presenting it as the headline would push people into
   four separate transactions to save a few thousand rupees. */

.pcg-buycta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pcg-space-4);
  padding: var(--pcg-space-4);
  margin-bottom: var(--pcg-space-4);
  background: var(--pcg-primary-soft); border-radius: var(--pcg-radius);
}
.pcg-buycta h2 { margin: 0 0 2px; font-size: var(--pcg-fs-lg); }
.pcg-buycta p { margin: 0; font-size: var(--pcg-fs-sm); color: var(--pcg-text-muted); }
.pcg-buycta .pcg-btn { margin-left: auto; }

.pcg-buyopts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--pcg-space-3); margin-bottom: var(--pcg-space-3); }
.pcg-buyopt {
  padding: var(--pcg-space-4);
  background: var(--pcg-bg); border: 1px solid var(--pcg-border);
  border-radius: var(--pcg-radius);
}
.pcg-buyopt--recommended { border-color: var(--pcg-primary); }
.pcg-buyopt__label {
  display: block; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--pcg-text-faint);
}
.pcg-buyopt__value { display: block; font-size: var(--pcg-fs-2xl); line-height: 1.15; font-variant-numeric: tabular-nums; }
.pcg-buyopt__note { display: block; font-size: var(--pcg-fs-sm); color: var(--pcg-text-muted); }

.pcg-buy__advice {
  margin: 0 0 var(--pcg-space-4); padding: var(--pcg-space-3) var(--pcg-space-4);
  background: var(--pcg-surface); border-radius: var(--pcg-radius);
  font-size: var(--pcg-fs-sm); max-width: 74ch;
}
.pcg-buy__heading { margin: var(--pcg-space-5) 0 var(--pcg-space-3); font-size: var(--pcg-fs-lg); }

.pcg-buyshops { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--pcg-space-2); }
.pcg-buyshop {
  padding: var(--pcg-space-4);
  background: var(--pcg-bg); border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius);
}
.pcg-buyshop.is-complete { border-color: var(--pcg-success); }
.pcg-buyshop__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--pcg-space-3); }
.pcg-buyshop__name { font-weight: 650; color: var(--pcg-text); }
.pcg-buyshop__loc { display: block; font-size: var(--pcg-fs-xs); color: var(--pcg-text-muted); }
.pcg-buyshop__figure { text-align: right; }
.pcg-buyshop__figure strong { display: block; font-size: var(--pcg-fs-lg); font-variant-numeric: tabular-nums; }
.pcg-buyshop__figure span { font-size: var(--pcg-fs-xs); color: var(--pcg-text-muted); }
.pcg-buyshop__missing { margin: var(--pcg-space-2) 0; font-size: var(--pcg-fs-xs); color: var(--pcg-text-muted); }
.pcg-buyshop .pcg-btn { margin-top: var(--pcg-space-3); }

.pcg-buyalt { display: block; font-size: var(--pcg-fs-xs); color: var(--pcg-text-muted); }
.pcg-buy__actions { display: flex; flex-wrap: wrap; gap: var(--pcg-space-2); margin-top: var(--pcg-space-4); }

@media print {
  .pcg-bstat, .pcg-buycta, .pcg-buy__actions, .pcg-buyshop .pcg-btn { display: none !important; }
  .pcg-buy { max-width: none; }
}

/* ── Where to buy, inline on the summary ───────────────────────────────────
   Sending someone to another page after they have assembled nine parts invites
   "did that save?", and some of them do not come back. */

.pcg-wtb { margin-top: var(--pcg-space-5); }
.pcg-wtb h2 { margin: 0 0 var(--pcg-space-3); font-size: var(--pcg-fs-lg); }

.pcg-wtb__shops { margin: var(--pcg-space-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--pcg-space-2); }
.pcg-wtb__shop {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pcg-space-3);
  padding: var(--pcg-space-3) var(--pcg-space-4);
  background: var(--pcg-bg); border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius);
}
.pcg-wtb__shop.is-complete { border-color: var(--pcg-success); }
.pcg-wtb__main { flex: 1; min-width: 190px; }
.pcg-wtb__loc { display: block; font-size: var(--pcg-fs-xs); color: var(--pcg-text-muted); }
.pcg-wtb__figure { text-align: right; }
.pcg-wtb__figure strong { display: block; font-variant-numeric: tabular-nums; }
.pcg-wtb__figure span { font-size: var(--pcg-fs-xs); color: var(--pcg-text-muted); }
.pcg-wtb__more { margin-top: var(--pcg-space-3); font-size: var(--pcg-fs-sm); }

/* ── Reliability signals ───────────────────────────────────────────────────
   Behaviour, not opinion. A shop that confirms prices weekly has done something
   a friend with an account cannot do for them. */

.pcg-signals { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.pcg-signal {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .03em;
  background: var(--pcg-surface-alt); color: var(--pcg-text-muted);
  cursor: help;
}
.pcg-signal--good { background: #e7f5ec; color: #16653a; }
.pcg-signal--ok { background: var(--pcg-primary-soft); color: var(--pcg-primary); }
.pcg-signal--warn { background: #fdf3e0; color: #8a6100; }

/* ── PSU calculator ───────────────────────────────────────────────────────
   Its own page rather than a panel in the builder: the person using it owns
   the machine already and is answering one question. */
.pcg-psu { max-width: 860px; margin: 0 auto; }
.pcg-psu__head { margin-bottom: var(--pcg-space-4, 20px); }
.pcg-psu__lede { color: var(--pcg-text-muted, #555); max-width: 60ch; }

.pcg-psu__pickers {
  display: grid; gap: var(--pcg-space-3, 14px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.pcg-psu__counts {
  display: grid; gap: var(--pcg-space-3, 14px);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.pcg-psu__counts .pcg-input { width: 100%; }
.pcg-psu__go { margin-top: var(--pcg-space-4, 20px); }

/* The answer is the page. Big enough to read from across a counter, because
   half these are being checked on a phone in a shop. */
.pcg-psu__answer {
  margin: var(--pcg-space-5, 28px) 0 0;
  padding: var(--pcg-space-4, 22px);
  border: 2px solid var(--pcg-primary, #2271b1);
  border-radius: var(--pcg-radius, 8px);
  background: var(--pcg-surface-alt, #f5f9fd);
  text-align: center;
}
.pcg-psu__answerlabel {
  margin: 0; text-transform: uppercase; letter-spacing: .05em;
  font-size: 12px; font-weight: 700; color: var(--pcg-text-muted, #5a6b7c);
}
.pcg-psu__watts {
  margin: 4px 0 8px; font-size: 56px; line-height: 1; font-weight: 800;
  color: var(--pcg-primary, #2271b1);
}
.pcg-psu__watts span { font-size: 26px; margin-left: 2px; }
.pcg-psu__sub { margin: 0; color: var(--pcg-text, #333); }
.pcg-psu__flag {
  margin: 10px 0 0; font-weight: 600;
  color: var(--pcg-warn-text, #8a5a00);
}
.pcg-psu__why { margin-top: var(--pcg-space-3, 16px); }
.pcg-psu__why p { max-width: 68ch; }

.pcg-psu__h2 { margin-top: var(--pcg-space-5, 28px); }
.pcg-psu__table { width: 100%; border-collapse: collapse; }
.pcg-psu__table td {
  padding: 9px 4px; border-bottom: 1px solid var(--pcg-border, #e3e6ea);
  vertical-align: top;
}
.pcg-psu__w { text-align: right; white-space: nowrap; }
.pcg-psu__total td { border-top: 2px solid var(--pcg-border-strong, #c3c9d0); border-bottom: none; }
.pcg-psu__spike td { color: var(--pcg-warn-text, #8a5a00); border-bottom: none; }

.pcg-psu__list { list-style: none; padding: 0; margin: 0; }
.pcg-psu__list li {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--pcg-border, #e3e6ea);
}
.pcg-psu__price { margin-left: auto; font-weight: 700; }
.pcg-psu__ups { margin-top: var(--pcg-space-5, 28px); }
.pcg-psu__foot {
  margin-top: var(--pcg-space-5, 28px); padding-top: var(--pcg-space-3, 14px);
  border-top: 1px solid var(--pcg-border, #e3e6ea);
  font-size: var(--pcg-fs-sm, 13px); color: var(--pcg-text-muted, #555);
}

@media (max-width: 480px) {
  .pcg-psu__watts { font-size: 44px; }
}

/* ── 4.3.1: account bar, top step nav, sharing, saved list ──────────────── */

.pcg-bacct {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--pcg-space-3);
  margin-bottom: var(--pcg-space-4); padding: var(--pcg-space-3) var(--pcg-space-4);
  background: var(--pcg-surface); border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius);
}
.pcg-bacct.is-out { border-color: var(--pcg-primary); background: var(--pcg-primary-soft); }
.pcg-bacct__text { display: flex; align-items: center; gap: var(--pcg-space-3); min-width: 0; flex: 1 1 260px; }
.pcg-bacct__text strong { display: block; font-size: var(--pcg-fs-sm); color: var(--pcg-text); }
.pcg-bacct__text span { display: block; font-size: var(--pcg-fs-xs); color: var(--pcg-text-muted); }
.pcg-bacct__icon { width: 22px; height: 22px; flex: 0 0 auto; color: var(--pcg-primary); }
.pcg-bacct__avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--pcg-primary); color: #fff; font-weight: 700; font-size: var(--pcg-fs-sm);
}
.pcg-bacct__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pcg-space-2); }
.pcg-bacct__actions form { margin: 0; }
.pcg-bacct__count {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px;
  border-radius: 9px; background: var(--pcg-primary); color: #fff;
  font-size: 11px; line-height: 18px; text-align: center;
}
.pcg-bacct .pcg-google { width: auto; min-height: 34px; font-size: var(--pcg-fs-sm); padding: 0 var(--pcg-space-3); }

.pcg-bnav--top {
  margin: 0 0 var(--pcg-space-3); padding-top: 0; border-top: 0;
  align-items: center;
}
.pcg-bnav--top > :last-child { margin-left: auto; }
.pcg-bnav__skip { border-style: dashed; }

.pcg-bstaff { margin-bottom: var(--pcg-space-3); }
.pcg-bstaff p { margin: 0; font-size: var(--pcg-fs-xs); }

.pcg-bsave__lead { margin: 0 0 var(--pcg-space-3); font-size: var(--pcg-fs-sm); color: var(--pcg-text-muted); }
.pcg-bsave__signin .pcg-google { min-height: 48px; font-size: var(--pcg-fs-base); }
.pcg-bsave__signin .pcg-btn--block { justify-content: center; align-items: center; gap: var(--pcg-space-2); }
.pcg-bsave__fine { margin: var(--pcg-space-3) 0 0; font-size: var(--pcg-fs-xs); color: var(--pcg-text-muted); }

.pcg-bshare__row { display: flex; gap: var(--pcg-space-2); margin-bottom: var(--pcg-space-2); }
.pcg-bshare__row .pcg-input { flex: 1; min-width: 0; }
.pcg-bshare .pcg-btn--whatsapp { justify-content: center; }
.pcg-bshare__warn { margin: 0 0 var(--pcg-space-2); font-size: var(--pcg-fs-xs); color: var(--pcg-warn); }
.pcg-bshare .pcg-hint { margin: var(--pcg-space-2) 0 0; font-size: var(--pcg-fs-xs); color: var(--pcg-text-faint); }

.pcg-bsignin {
  max-width: 420px; padding: var(--pcg-space-5);
  background: var(--pcg-surface); border: 1px solid var(--pcg-border); border-radius: var(--pcg-radius);
}
.pcg-bsignin h2 { margin: 0 0 var(--pcg-space-2); font-size: var(--pcg-fs-lg, 18px); }
.pcg-bsignin > p { margin: 0 0 var(--pcg-space-4); font-size: var(--pcg-fs-sm); color: var(--pcg-text-muted); }
.pcg-bsignin .pcg-btn--block { justify-content: center; }

.pcg-blist li.is-open { border-color: var(--pcg-success); }
.pcg-blist__main { min-width: 0; }
.pcg-blist__main strong a { color: var(--pcg-text); }
.pcg-blist__open {
  display: inline-block !important; margin-left: 6px; padding: 1px 7px; border-radius: 9px;
  background: var(--pcg-success-soft); color: var(--pcg-success) !important; font-size: 11px !important; font-weight: 600;
}
.pcg-blist__state { margin-top: 3px; font-weight: 600; }
.pcg-blist__state--private { color: var(--pcg-text-faint) !important; }
.pcg-blist__state--link    { color: var(--pcg-primary) !important; }
.pcg-blist__state--public  { color: var(--pcg-success) !important; }
.pcg-blist__state--draft   { color: var(--pcg-warn) !important; }
.pcg-blist__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--pcg-space-2); }
.pcg-blist__actions form { margin: 0; }
.pcg-blist__link { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pcg-blist__delete {
  background: none; border: 0; padding: 4px; cursor: pointer;
  font: inherit; font-size: var(--pcg-fs-xs); color: var(--pcg-danger);
}
.pcg-blist__delete:hover { text-decoration: underline; }

.pcg-bshared .pcg-wtb { margin-top: var(--pcg-space-5); }
.pcg-bshared__cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pcg-space-3);
  margin-top: var(--pcg-space-5); padding: var(--pcg-space-4);
  background: var(--pcg-primary-soft); border-radius: var(--pcg-radius);
}
.pcg-bshared__cta strong { display: block; }
.pcg-bshared__cta span { display: block; font-size: var(--pcg-fs-sm); color: var(--pcg-text-muted); }

@media (max-width: 600px) {
  .pcg-bacct__actions { width: 100%; }
  .pcg-bacct__actions > * { flex: 1 1 auto; }
  .pcg-bacct .pcg-google { width: 100%; }
  .pcg-blist li { flex-direction: column; align-items: stretch; }
  .pcg-blist__actions { justify-content: flex-start; }
}
@media print { .pcg-bacct, .pcg-bnav--top { display: none !important; } }
.pcg-bsave .pcg-btn--block, .pcg-bsave .pcg-google, .pcg-bsignin .pcg-btn--block, .pcg-bsignin .pcg-google { box-sizing: border-box; max-width: 100%; }

/* ── 4.3.2: unfit parts read clearly in both themes; staff data notes ───── */

/* Translucent tints instead of fixed pastel fills: the old #fdf0f0 boxes
   turned into pale grey slabs with dark text on the dark theme. */
.pcg-bcard__reasons li.pcg-bissue--block,
.pcg-bcard__reasons li.pcg-bissue--warn {
  background: rgba(214, 54, 56, .12); color: inherit;
  border-left: 2px solid var(--pcg-danger);
}
.pcg-bcard__reasons li.pcg-bissue--warn {
  background: rgba(219, 166, 23, .14); border-left-color: var(--pcg-warn);
}
.pcg-bcard--blocked { opacity: .78; border-left: 4px solid var(--pcg-danger); }
.pcg-bcard--blocked .pcg-bcard__reasons li { opacity: 1; }

.pcg-bcard__dq {
  margin: 6px 0 0; padding: 4px 8px;
  font-size: var(--pcg-fs-xs); line-height: 1.4;
  border: 1px dashed var(--pcg-warn); border-radius: var(--pcg-radius-sm);
  color: var(--pcg-text-muted);
}
.pcg-bcard__dq span { font-weight: 700; color: var(--pcg-warn); }
.pcg-bcard__dq a { margin-left: 4px; font-weight: 600; }

.pcg-bline { display: block; font-size: var(--pcg-fs-xs); color: var(--pcg-text-muted); }