/* GearChamber PC Builder: "Upgrade my PC" (/pc-builder/upgrade/ only, fx 144).
   Loads after builder.css and reuses its pcb- classes (rows, buttons, picker
   dialog, store links); only what the upgrade page adds is here. Palette vars
   only, square corners, no glow, hover only for fine pointers. */

/* the three steps */
.gc-pcb .pcb-up-step { margin-bottom: 20px; }
.pcb-up-intro { margin: 0; padding: 12px 16px 0; font: 400 14.5px/1.5 var( --pcb-sans ); color: var( --pcb-muted ); max-width: 760px; }
.pcb-up-intro-in { padding: 0 0 10px; }
.pcb-up-intro + .pcb-pl { margin-top: 12px; border-top: 1px solid var( --pcb-line ); }
.pcb-up-body { padding: 14px 16px 16px; }
.pcb-up-row .pcb-part { gap: 8px; }
.pcb-up-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pcb-up-msg { margin: 10px 0 0; font: 600 14.5px/1.5 var( --pcb-sans ); color: var( --pcb-err ); }
.gc-pcb .pcb-up-step .pcb-wiz-acts { margin-top: 14px; }
.pcb-up-res:focus { outline: none; }

/* step 2: what to upgrade (toggle chips) */
.pcb-up-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gc-pcb .pcb-up-chip { min-height: 44px; padding: 0 16px; border: 1px solid var( --pcb-line-2 ); background: var( --pcb-bg ); color: var( --pcb-text ); font: 700 12.5px/1.2 var( --pcb-head ); letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.gc-pcb .pcb-up-chip[aria-pressed="true"] { background: var( --pcb-fill ); border-color: var( --pcb-fill ); color: #fff; }

/* step 3: results */
.pcb-up-top { margin: 0 0 4px; }
.gc-pcb a.pcb-btn { text-decoration: none; }
.pcb-up-sec { margin-top: 26px; }
.pcb-up-top + .pcb-up-sec, .pcb-needs + .pcb-up-top + .pcb-up-sec { margin-top: 18px; }
.gc-pcb .pcb-up-sec h3 { font: 700 18px/1.3 var( --pcb-head ); }
.pcb-up-sec .pcb-fine-t { margin: 4px 0 0; }
.pcb-up-sec .pcb-dlg-tools { padding: 10px 0 0; }
.pcb-up-sec .pcb-pk-n { margin: 8px 0; }
.pcb-up-list { list-style: none; margin: 0; padding: 0; }
.pcb-up-r { display: grid; grid-template-columns: minmax( 0, 1fr ) 236px; gap: 12px 16px; padding: 14px; margin-bottom: 8px; border: 1px solid var( --pcb-line ); background: var( --pcb-bg ); align-items: start; }
.pcb-up-m { min-width: 0; }
.pcb-up-why { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.pcb-up-why-i { display: grid; grid-template-columns: 18px minmax( 0, 1fr ); gap: 8px; font: 400 13.5px/1.5 var( --pcb-sans ); overflow-wrap: anywhere; }
.pcb-up-why-i .pcb-fit-ic { margin-top: 2px; }
.pcb-up-why-i.is-ok .pcb-fit-ic { color: var( --pcb-ok ); }
.pcb-up-why-i.is-warning .pcb-fit-ic { color: var( --pcb-warn ); }
.pcb-up-why-i.is-unknown .pcb-fit-ic { color: var( --pcb-muted ); }
.pcb-up-why-i.is-note .pcb-fit-ic { color: var( --pcb-accent-text ); }
.pcb-up-why-i.is-unknown { color: var( --pcb-muted ); }
.pcb-up-a { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pcb-up-a .pcb-stores { flex-direction: column; }
.pcb-up-a .pcb-store { flex: 0 0 auto; }
.gc-pcb .pcb-up-open { width: 100%; }
.pcb-up-more { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 8px; }
.pcb-up-shown { font: 500 12px var( --pcb-mono ); color: var( --pcb-muted ); }

@media ( max-width: 700px ) {
	.pcb-up-r { grid-template-columns: minmax( 0, 1fr ); padding: 12px; }
	.pcb-up-a .pcb-stores { flex-direction: row; }
	.pcb-up-a .pcb-store { flex: 1 1 100px; }
}
@media ( max-width: 600px ) {
	.pcb-up-intro { padding: 12px 14px 0; }
	.pcb-up-intro-in { padding: 0 0 10px; }
	.pcb-up-body { padding: 14px; }
	.gc-pcb .pcb-up-chip { flex: 1 1 calc( 50% - 4px ); padding: 0 10px; }
	.pcb-up-acts .pcb-btn { flex: 1 1 100%; }
	.pcb-up-more .pcb-btn, .pcb-up-top .pcb-btn { width: 100%; }
	/* 16px stops phones zooming into the form fields */
	.gc-pcb .pcb-up-row select { font-size: 16px; }
}
@media ( hover: hover ) and ( pointer: fine ) {
	.gc-pcb .pcb-up-chip[aria-pressed="false"]:hover { border-color: var( --pcb-accent ); color: var( --pcb-accent-text ); }
}