/* FrostyBoost — TBC arena points calculator. Uses site tokens with neon fallbacks. */
.ap-tool { --ap-accent: var(--ah-neon, #3ec9ff); --ap-accent-soft: rgba(62, 201, 255, .12); --ap-line: var(--line, rgba(255,255,255,.08)); margin-block: 32px; display: grid; gap: 24px; }
.ap-card { background: var(--surface, #0f1420); border: 1px solid var(--ap-line); border-radius: var(--radius, 18px); padding: clamp(16px, 3vw, 28px); display: grid; gap: 24px; }
.ap-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.ap-head h2 { margin: 0; font-family: var(--display, sans-serif); font-size: clamp(20px, 2.4vw, 26px); }
.ap-region { display: inline-flex; border: 1px solid var(--ap-line); border-radius: 999px; padding: 3px; margin: 0; }
.ap-region label { position: relative; cursor: pointer; }
.ap-region input { position: absolute; opacity: 0; inset: 0; }
.ap-region span { display: block; padding: 6px 16px; border-radius: 999px; font-weight: 600; font-size: 13px; color: var(--text-2, #b9c1d0); }
.ap-region input:checked + span { background: var(--ap-accent); color: #04121c; }
.ap-region input:focus-visible + span { outline: 2px solid var(--ap-accent); outline-offset: 2px; }
.ap-tool .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ap-brackets { display: grid; gap: 10px; }
.ap-row { display: grid; grid-template-columns: 56px minmax(92px, 120px) 1fr minmax(92px, 130px) minmax(96px, 120px); gap: 14px; align-items: end; padding: 14px 16px; border: 1px solid var(--ap-line); border-radius: var(--radius-sm, 12px); background: var(--surface-2, #141a28); transition: border-color .2s; }
.ap-row.is-payer { border-color: var(--ap-accent); box-shadow: inset 0 0 0 1px var(--ap-accent-soft); }
.ap-row.is-idle .ap-row__pts { color: var(--text-3, #7d8699); font-weight: 500; }
.ap-row__name { font-family: var(--display, sans-serif); font-size: 20px; font-weight: 700; align-self: center; }
.ap-row__pts { justify-self: end; align-self: center; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 17px; }
.ap-row.is-payer .ap-row__pts { color: var(--ap-accent); }
.ap-field { min-width: 0; display: grid; gap: 6px; font-size: 12px; color: var(--text-2, #b9c1d0); }
.ap-field input, .ap-field select { box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-2, rgba(255,255,255,.15)); background: var(--bg-2, #0b0f18); color: var(--text, #eef2f8); font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; }
.ap-field input:focus-visible, .ap-field select:focus-visible { outline: 2px solid var(--ap-accent); outline-offset: 1px; }
.ap-range { width: 100%; height: 44px; accent-color: var(--ap-accent); align-self: center; }

.ap-result { display: grid; gap: 8px; padding: 18px 20px; border-radius: var(--radius-sm, 12px); background: var(--ap-accent-soft); }
.ap-result p { margin: 0; }
.ap-result__total { font-size: clamp(18px, 2.2vw, 22px); }
.ap-result__total strong { color: var(--text, #fff); }
.ap-result__others, .ap-note { color: var(--text-2, #b9c1d0); font-size: 14px; }
.ap-warn { margin: 0; padding: 10px 14px; border-radius: 10px; border: 1px solid rgba(255, 107, 122, .45); background: rgba(255, 107, 122, .1); color: var(--text, #fff); font-size: 14px; }
.ap-copy { justify-self: start; margin-top: 4px; min-height: 40px; border: 1px solid var(--ap-accent); background: transparent; color: var(--ap-accent); border-radius: 10px; padding: 8px 16px; font-weight: 600; cursor: pointer; }
.ap-copy:hover { background: var(--ap-accent); color: #04121c; }

.ap-plan { display: grid; gap: 14px; border-top: 1px solid var(--ap-line); padding-top: 22px; }
.ap-plan__controls { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
.ap-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ap-item { display: grid; grid-template-columns: 1fr auto 72px 96px; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 10px; background: var(--surface-2, #141a28); font-size: 14px; }
.ap-item label { display: flex; gap: 10px; align-items: center; cursor: pointer; min-height: 28px; }
.ap-item input { width: 18px; height: 18px; accent-color: var(--ap-accent); }
.ap-item__cost { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.ap-item__when { text-align: right; color: var(--ap-accent); font-weight: 600; }
.ap-item.is-owned { opacity: .55; }
.ap-item.is-owned .ap-item__slot { text-decoration: line-through; }
.ap-item.is-gated .ap-item__when { color: var(--text-3, #7d8699); }
.ap-badge { font-size: 12px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--ap-line); color: var(--text-2, #b9c1d0); white-space: nowrap; }
.ap-badge.is-locked { border-color: rgba(255, 107, 122, .5); color: #ff9aa5; }
.ap-badge.is-soft { border-style: dashed; }
.ap-plan__sum { font-weight: 600; }

.ap-table-wrap { overflow-x: auto; }
.ap-table-wrap table { width: 100%; min-width: 360px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ap-table-wrap caption { text-align: left; padding-bottom: 10px; color: var(--text-2, #b9c1d0); font-size: 14px; }
.ap-table-wrap th, .ap-table-wrap td { padding: 10px 14px; text-align: right; border-bottom: 1px solid var(--ap-line); }
.ap-table-wrap th:first-child, .ap-table-wrap td:first-child { text-align: left; }
.ap-table-wrap tr.is-near td { background: var(--ap-accent-soft); color: var(--text, #fff); font-weight: 600; }

@media (max-width: 720px) {
  .ap-row { grid-template-columns: 1fr 1fr; }
  .ap-row__name { grid-column: 1; }
  .ap-row__pts { grid-column: 2; grid-row: 1; }
  .ap-range { grid-column: 1 / -1; }
  .ap-plan__controls { grid-template-columns: minmax(0, 1fr); }
  .ap-item { grid-template-columns: 1fr auto auto; row-gap: 6px; }
  .ap-item label { grid-column: 1 / -1; }
  .ap-badge, .ap-item > span:empty { grid-column: 1; justify-self: start; }
}