/* Planner extras: the gear upgrade finder in the planner, and the pages built on the planner engine
   (/planner-compare, /guides, the "Compare with the planner" box on a log). */
.q-Gray { color: #9d9d9d; } .q-Common { color: #ece6da; } .q-Green, .q-Uncommon { color: #4fd35b; } .q-Blue, .q-Rare { color: #5aa2ff; }
.q-Epic { color: #c07cff; } .q-Legendary { color: #ff9a3c; } .q-Vanity { color: #e6cc80; }

/* ---------- Rank by DPS (planner gear picker) ---------- */
.pt-rank { margin: 0 0 12px; padding: 10px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.pt-rankbar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 14px; }
.pt-rankbar label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.pt-rankbar select { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 5px; padding: 4px 6px; font: inherit; }
.pt-ranklist { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pt-row { display: grid; grid-template-columns: 96px 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 8px; border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--raised); }
.pt-row.cur { border-color: var(--ember); }
.pt-row img, .pt-row .pl-noicon { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; background: var(--surface); }
.pt-row b { display: block; font: 600 15.5px/1.25 var(--ui); }
.pt-row .d { display: block; color: var(--muted); font-size: 13px; line-height: 1.35; }
.pt-row .m { display: block; color: var(--faint); font: 500 12.5px/1.35 var(--ui); }
.pt-delta { font: 700 15.5px/1.2 var(--ui); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.pt-delta.up, .pt-up { color: #4fd35b; } .pt-delta.down, .pt-down { color: #ff8a7a; } .pt-delta.flat, .pt-flat { color: var(--muted); }
.pt-row.cur .pt-delta { color: var(--ember); }
.pt-links { margin: 10px 0 0; font-size: 14px; }
@media (max-width: 600px) { .pt-row { grid-template-columns: 78px minmax(0, 1fr) auto; } .pt-row img, .pt-row .pl-noicon { display: none; } }

/* ---------- shared by the compare and guide pages ---------- */
.pt-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px 14px; align-items: end; }
.pt-form label { display: flex; flex-direction: column; gap: 4px; font: 600 13px/1.2 var(--ui); color: var(--muted); min-width: 0; }
.pt-form input, .pt-form select, .pt-set select, .pt-set input { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; font: 14.5px/1.3 var(--body); min-width: 0; }
@media (max-width: 760px) { .pt-form { grid-template-columns: minmax(0, 1fr); } }
.pt-status { min-height: 1.4em; margin: 10px 0 0; font-size: 14.5px; color: var(--muted); }
.pt-status.err { color: #ff8a7a; }
.pt-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 700px) { .pt-two { grid-template-columns: minmax(0, 1fr); } }
.pt-card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 14px 16px; min-width: 0; }
.pt-card h3 { margin: 0 0 8px; font: 700 17px/1.2 var(--ui); }
.pt-head { display: flex; gap: 12px; align-items: center; }
.pt-head img { width: 56px; height: 56px; object-fit: contain; flex: none; }
.pt-head h2 { margin: 0; font-size: 22px; }
.pt-head p { margin: 2px 0 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
.pt-dps { font: 600 15px/1.3 var(--ui); color: var(--muted); margin: 12px 0 0; }
.pt-dps b { font: 800 40px/1 var(--ui); color: var(--ember); margin-right: 6px; }
.pt-dps.win b::after { content: " ▲"; font-size: 18px; color: #4fd35b; vertical-align: middle; }
.pt-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.pt-table th { text-align: right; font: 600 12.5px/1.3 var(--ui); color: var(--faint); padding: 5px 0 5px 12px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.pt-table td { text-align: right; padding: 5px 0 5px 12px; border-bottom: 1px solid var(--line-soft); font-variant-numeric: tabular-nums; vertical-align: top; }
.pt-table th:first-child, .pt-table td:first-child { text-align: left; padding-left: 0; }
.pt-table td.l, .pt-table th.l { text-align: left; }
.pt-table tr:last-child td { border-bottom: 0; }
.pt-table tr.diff td { background: rgba(233, 162, 59, .07); }
.pt-table tr.sec td { font: 700 12px/1.2 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--ember); padding-top: 14px; }
.pt-table .sub { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.pt-table .none { color: var(--faint); }
.pt-chip { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--raised); color: var(--muted); font: 600 12px/1.5 var(--ui); margin-left: 6px; white-space: nowrap; }
.pt-chip.new { background: #23391f; color: #7fe08a; }
.pt-note { margin: 14px 0 0; padding: 12px 16px; border: 1px solid var(--line); border-left: 3px solid var(--ember); border-radius: var(--radius); background: var(--surface); font-size: 14.5px; color: var(--muted); }
.pt-note b { color: var(--text); }
.pt-progress { height: 6px; border-radius: 3px; background: var(--raised); overflow: hidden; margin: 10px 0 0; }
.pt-progress i { display: block; height: 100%; width: 0; background: var(--ember); transition: width .15s; }
.pt-classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.pt-class { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); color: var(--text); font: 600 15px/1.2 var(--ui); cursor: pointer; }
.pt-class:hover { border-color: var(--line); background: var(--raised); }
.pt-class[aria-pressed="true"] { border-color: var(--ember); box-shadow: inset 0 0 0 1px var(--ember); }
.pt-class img { width: 28px; height: 28px; object-fit: contain; }
.pt-set { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 14px 0 0; font-size: 14.5px; color: var(--muted); }
.pt-set label { display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; }
.pt-set input[type=number] { width: 72px; }
.pt-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; margin-top: 18px; align-items: start; }
.pt-step h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 20px; }
.pt-step h4 { margin: 14px 0 4px; font: 700 12px/1.2 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.pt-step ul { list-style: none; margin: 0; padding: 0; font-size: 14.5px; }
.pt-step li { padding: 2px 0; }
.pt-step li small { color: var(--faint); font-size: 12.5px; }
.pt-step .pt-dps b { font-size: 34px; }
.pt-step.wait { color: var(--faint); border-style: dashed; }