/* PS3 World - "Which PS3 Should I Buy?" (loaded after style.css). Base styles shared with the jailbreak checker, renamed wp-. */

.wp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: start;
  margin: 8px 0 48px;
}

.wp-form {
  display: grid;
  gap: 22px;
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--card);
}

.wp-field { display: grid; gap: 8px; }
.wp-field[hidden] { display: none; }

.wp-field label,
.wp-label {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
}

.wp-opt { color: var(--text-3); font-weight: 500; }

.wp-field input,
.wp-field select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-2);
  color: var(--text);
  font: inherit;
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.wp-field input:focus,
.wp-field select:focus { border-color: var(--ps-blue-2); box-shadow: var(--ring); }


.wp-help { margin: 0; color: var(--text-3); font-size: 13px; line-height: 1.5; }

.wp-looks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.wp-look {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}

.wp-look:hover { border-color: color-mix(in srgb, var(--ps-sky) 50%, transparent); color: var(--text); }
.wp-look:focus-visible { outline: none; box-shadow: var(--ring); }
.wp-look[aria-checked="true"] {
  border-color: var(--ps-sky);
  background: color-mix(in srgb, var(--ps-sky) 14%, transparent);
  color: #fff;
}

.wp-look-name { font-size: 14px; font-weight: 700; }
.wp-look-desc { color: var(--text-3); font-size: 12px; line-height: 1.4; }
.wp-look[aria-checked="true"] .wp-look-desc { color: var(--text-2); }

/* ---- Result ---- */
.wp-result:empty::before {
  content: 'Pick what matters to you and your best match appears here.';
  display: grid;
  place-items: center;
  min-height: 220px;
  padding: 26px;
  border: 1px dashed var(--border);
  border-radius: 18px;
  color: var(--text-3);
  font-size: 15px;
}

.wp-model {
  margin: 0 0 10px;
  color: var(--text-3);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}

.wp-card {
  --hc: var(--ps-sky);
  padding: 26px;
  border: 1px solid color-mix(in srgb, var(--hc) 45%, var(--border));
  border-radius: 18px;
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--hc) 14%, transparent), transparent 60%),
    var(--card);
}

.wp-card--yes   { --hc: #3ddc84; }
.wp-card--hen   { --hc: #f5a524; }
.wp-card--maybe { --hc: #4a9eff; }

.wp-verdict { margin: 0 0 10px; }

.wp-badge {
  display: inline-block;
  padding: 3px 11px;
  border-radius: var(--pill);
  background: color-mix(in srgb, var(--hc) 20%, transparent);
  color: color-mix(in srgb, var(--hc) 75%, #fff);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.wp-title { margin: 0 0 12px; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; }

.wp-card p,
.wp-card li { color: var(--text-2); font-size: 15px; line-height: 1.6; }
.wp-card p { margin: 0 0 12px; }
.wp-card strong { color: var(--text); }
.wp-card ul { margin: 0 0 12px; padding-left: 20px; }

.wp-next {
  margin: 18px 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  letter-spacing: 0.3px;
}

.wp-steps { margin: 0; padding-left: 22px; }
.wp-steps li { margin: 0 0 8px; }
.wp-steps li::marker { color: var(--hc); font-weight: 800; }

.wp-good, .wp-warn {
  padding: 10px 14px;
  border-radius: 10px;
}
.wp-good { background: rgba(61, 220, 132, 0.1); }
.wp-warn { background: rgba(255, 107, 107, 0.12); }
.wp-card .wp-muted { color: var(--text-3); font-size: 14px; }

/* ---- Reference table ---- */
.wp-facts { margin: 0 0 56px; }
.wp-facts h2 { margin-bottom: 16px; }

.wp-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; }
.wp-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; }
.wp-table th, .wp-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); text-align: left; }
.wp-table th { background: var(--card-2); color: var(--text); font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase; }
.wp-table td { color: var(--text-2); }
.wp-table tr:last-child td { border-bottom: 0; }
.wp-table .yes   { color: #3ddc84; font-weight: 700; }
.wp-table .no    { color: #ff8a8a; font-weight: 700; }
.wp-table .maybe { color: #f5a524; font-weight: 700; }

.wp-note { margin: 14px 0 0; color: var(--text-3); font-size: 14px; line-height: 1.6; }
.wp-note strong { color: var(--text-2); }

@media (max-width: 860px) {
  .wp { grid-template-columns: minmax(0, 1fr); }
  .wp-form, .wp-card { padding: 20px; }
  .wp-looks { grid-template-columns: minmax(0, 1fr); }
  .wp-look { grid-template-columns: auto 1fr; align-items: baseline; gap: 10px; }
}

@media (max-width: 600px) {
  .wp-table { min-width: 0; font-size: 13px; }
  .wp-table th, .wp-table td { padding: 10px; }
  .wp-table th { font-size: 12px; letter-spacing: 0.4px; }
}


/* ---- Priority chips ---- */
.wp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wp-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--border); border-radius: var(--pill);
  background: var(--surface); color: var(--text-2);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.wp-chip::before {
  content: ''; width: 14px; height: 14px; flex: none;
  border: 2px solid var(--text-3); border-radius: 4px;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.wp-chip[aria-pressed="true"] { border-color: var(--ps-sky); background: color-mix(in srgb, var(--ps-sky) 14%, transparent); color: #fff; }
.wp-chip[aria-pressed="true"]::before {
  border-color: var(--ps-sky);
  background: var(--ps-sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}
.wp-chip:focus-visible { outline: none; box-shadow: var(--ring); }
@media (hover: hover) { .wp-chip:hover { border-color: color-mix(in srgb, var(--ps-sky) 50%, transparent); color: var(--text); } }
.wp-looks { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---- Results ---- */
.wp-card--best { --hc: #3ddc84; }
.wp-models { margin: -4px 0 14px; color: var(--text-3); font-size: 14px; }
.wp-models code { color: var(--text-2); }
.wp-why { margin: 0 0 14px; padding: 0; list-style: none; }
.wp-card .wp-why li { position: relative; margin: 0 0 6px; padding-left: 24px; }
.wp-why li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.wp-why .pro::before { content: '+'; color: #3ddc84; }
.wp-why .con::before { content: '\2212'; color: #ff8a8a; }
.wp-why .tip::before { content: '!'; color: #f5a524; }

.wp-rest { margin: 16px 0 0; display: grid; gap: 8px; }
.wp-rest h3 { margin: 6px 0 2px; font-size: 15px; }
.wp-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 6px 14px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--card);
}
.wp-row-name { margin: 0; color: var(--text); font-size: 15px; font-weight: 700; }
.wp-row-note { grid-column: 1 / -1; margin: 0; color: var(--text-3); font-size: 13px; line-height: 1.5; }
.wp-bar { height: 8px; border-radius: 99px; background: var(--bg-2); overflow: hidden; }
.wp-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ps-blue-2), var(--ps-sky)); }

.wp-table { min-width: 760px; }
.wp-table td:first-child { color: var(--text); font-weight: 700; }
.wp-checks { margin: 0 0 56px; }
.wp-checks ol { margin: 0; padding-left: 22px; color: var(--text-2); line-height: 1.7; }
.wp-checks li { margin: 0 0 8px; }
.wp-checks strong { color: var(--text); }
@media (max-width: 600px) { .wp-table { min-width: 640px; } .wp-looks { grid-template-columns: minmax(0, 1fr); } }
.wp-row .wp-muted { color: var(--text-3); font-weight: 500; font-size: 13px; }