/* Scoped to the resistance planner; other resource calculators retain their layouts. */
body[data-page="resource-calculators"] .vr-panel { padding: clamp(16px, 2.2vw, 28px); }
.vr-panel [hidden] { display: none !important; }
.vr-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.vr-heading h1 { margin: 3px 0 8px; font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.15; }
.vr-heading p { margin: 0; }
.vr-heading img { object-fit: contain; filter: drop-shadow(0 6px 12px #0004); }
.vr-config { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 16px; padding: 18px; border: 1px solid var(--panel-border); border-radius: 12px; background: var(--bg-elev); }
.vr-panel label { display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: .82rem; font-weight: 600; }
.vr-panel input, .vr-panel select { width: 100%; min-width: 0; min-height: 44px; margin: 0; font-variant-numeric: tabular-nums; }
.vr-resistance-field { display: flex; flex-direction: column; gap: 8px; }
.vr-config small { font-weight: 400; font-size: .72rem; line-height: 1.45; }
.vr-stepper { display: flex; border: 1px solid var(--panel-border-strong); border-radius: 8px; overflow: hidden; background: var(--panel); }
.vr-stepper input { text-align: center; border: 0; border-radius: 0; font-size: 1.1rem; font-weight: 750; background: transparent; appearance: textfield; }
.vr-stepper input::-webkit-inner-spin-button, .vr-stepper input::-webkit-outer-spin-button { appearance: none; }
.vr-stepper button { flex: 0 0 36px; border: 0; background: transparent; color: var(--text); font-size: 1.2rem; cursor: pointer; }
.vr-stepper button:hover { background: color-mix(in srgb, var(--accent) 15%, transparent); }
.vr-panel .vr-night { flex-direction: row; align-items: center; margin: 12px 0; }
.vr-night input { width: 18px; min-height: 18px; }
.vr-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; padding: 16px 2px 24px; color: var(--muted); font-size: .83rem; }
.vr-total strong { color: var(--accent); font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.vr-total small { margin-left: auto; font-size: .74rem; }
.vr-summary-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.vr-summary-heading h2 { font-size: .98rem; margin: 0; }
.vr-summary-heading > span { font-size: .74rem; color: var(--muted); white-space: nowrap; }
.vr-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vr-panel .vr-summary-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; padding: 16px; border: 1px solid var(--panel-border); border-radius: 10px; background: var(--bg-elev); color: var(--text); text-align: left; cursor: pointer; min-width: 0; }
.vr-panel .vr-summary-card.is-selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--bg-elev)); box-shadow: inset 0 2px 0 var(--accent); }
.vr-summary-card:hover { border-color: var(--panel-border-strong); }
.vr-card-label { color: var(--muted); font-size: .8rem; font-weight: 650; }
.vr-summary-card strong { font-size: 1.55rem; letter-spacing: -.025em; }
.vr-card-requirement, .vr-card-next { font-size: .72rem; line-height: 1.4; }
.vr-card-requirement { color: var(--muted); }
.vr-card-next { color: var(--accent); }
.vr-summary-card progress { width: 100%; height: 4px; margin: 8px 0 4px; border: 0; border-radius: 4px; background: var(--panel-soft); accent-color: var(--accent); }
.vr-summary-card progress::-webkit-progress-bar { background: var(--panel-soft); border-radius: 4px; }
.vr-summary-card progress::-webkit-progress-value { background: var(--accent); border-radius: 4px; }
.vr-combat-note { color: var(--muted); font-size: .75rem; margin: 12px 0 24px; line-height: 1.5; }
.vr-workspace { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.5fr); gap: 20px; border-top: 1px solid var(--panel-border); padding-top: 24px; }
.vr-workspace h2 { font-size: 1.03rem; margin: 4px 0 18px; }
.vr-target { border: 1px solid var(--panel-border); border-radius: 12px; padding: 18px; background: var(--bg-elev); align-self: start; }
.vr-target .eyebrow, .vr-levels .eyebrow { font-size: .65rem; margin: 0; }
.vr-damage-stat { display: flex; flex-direction: column; gap: 6px; margin: 22px 0 14px; }
.vr-damage-stat strong { color: var(--text); font-size: 2.9rem; font-weight: 750; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.vr-damage-stat strong small { font-size: 1.15rem; margin-left: 3px; color: var(--muted); letter-spacing: 0; }
.vr-damage-stat > span { font-size: .78rem; color: var(--muted); }
.vr-target-result meter { width: 100%; height: 8px; margin: 0 0 8px; }
.vr-target-result meter::-webkit-meter-bar { background: var(--panel-soft); border: 0; }
.vr-target-result meter::-webkit-meter-optimum-value { background: var(--accent); }
.vr-target-status { font-size: .8rem; font-weight: 650; line-height: 1.4; }
.vr-panel .needs-resistance { color: #f6b879; }
.vr-panel .threshold-met, .vr-panel .vr-met { color: #60c5a4; }
html.theme-light .vr-panel .needs-resistance { color: #a34809; }
html.theme-light .vr-panel .threshold-met, html.theme-light .vr-panel .vr-met { color: #157557; }
.vr-target dl { margin: 16px 0 20px; }
.vr-target dl > div { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: .78rem; border-bottom: 1px solid var(--panel-border); }
.vr-target dt { color: var(--muted); }
.vr-target dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.vr-target > button { width: 100%; min-height: 44px; font-size: .78rem; }
.vr-target > button:not(:disabled) { background: var(--accent); color: #11161a; border-color: var(--accent); font-weight: 750; }
.vr-target > button:disabled { opacity: .6; }
.vr-levels-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vr-levels-heading h2 { margin-bottom: 14px; }
.vr-panel .vr-filter { display: flex; flex-direction: row; align-items: center; gap: 7px; font-size: .72rem; }
.vr-filter input { width: 16px; min-height: 16px; accent-color: var(--accent); }
.vr-table-scroll { max-height: 370px; overflow: auto; border: 1px solid var(--panel-border); border-radius: 10px; scrollbar-width: thin; }
body[data-page="resource-calculators"] .vr-panel .vr-enemy-table { min-width: 0; width: 100%; table-layout: auto; margin: 0; font-size: .77rem; }
body[data-page="resource-calculators"] .vr-enemy-table th { position: sticky; top: 0; z-index: 1; background: var(--panel-strong); padding: 10px 8px; font-size: .6rem; letter-spacing: .04em; white-space: normal; text-align: right; }
body[data-page="resource-calculators"] .vr-enemy-table td { padding: 8px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.vr-enemy-table th:first-child, .vr-enemy-table td:first-child { text-align: left !important; }
.vr-enemy-table td button { border: 0; border-radius: 4px; background: transparent; color: var(--accent); font: inherit; font-weight: 750; padding: 4px 7px; min-height: 32px; cursor: pointer; }
.vr-row-target { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.vr-row-target td:first-child { box-shadow: inset 3px 0 var(--accent); }
.vr-row-missing td:last-child { color: #f6b879; }
html.theme-light .vr-row-missing td:last-child { color: #a34809; }
.vr-empty { text-align: center !important; white-space: normal !important; padding: 24px !important; color: var(--muted); }
.vr-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 18px; margin-top: 22px; border-top: 1px solid var(--panel-border); font-size: .7rem; color: var(--muted); line-height: 1.5; }
.vr-panel :is(button, input, select, .vr-table-scroll):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 1100px) { .vr-config { grid-template-columns: 1fr 1fr; } .vr-config > label:last-child { grid-column: 1/-1; } .vr-workspace { grid-template-columns: 1fr; } .vr-target { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } .vr-target > :is(.eyebrow, h2) { grid-column: 1/-1; } .vr-target-result { grid-column: 2; grid-row: 3/6; } .vr-target > button { align-self: end; margin-top: 16px; } .vr-damage-stat { margin-top: 0; } }
@media (max-width: 600px) { .vr-heading { gap: 10px; margin-bottom: 18px; } .vr-heading img { width: 44px; height: 44px; } .vr-config { padding: 12px; gap: 12px; } .vr-summary-grid { gap: 7px; } .vr-panel .vr-summary-card { padding: 12px 9px; } .vr-summary-card strong { font-size: 1.15rem; } .vr-card-requirement, .vr-card-next { font-size: .65rem; } .vr-total small { width: 100%; margin-left: 0; } .vr-summary-heading { align-items: flex-start; } .vr-summary-heading h2 { font-size: .85rem; } .vr-target { display: block; padding: 16px; } .vr-damage-stat { margin-top: 20px; } .vr-levels-heading { align-items: flex-start; } body[data-page="resource-calculators"] .vr-enemy-table :is(th, td) { padding: 8px 5px; } body[data-page="resource-calculators"] .vr-panel .vr-enemy-table { font-size: .7rem; } .vr-summary-heading > span { display: none; } }