/* ================================================================
   ARENA UNLOCK PAGE — in-page view swap (not an overlay)

   This stylesheet styles the unlock view that replaces .practice-container
   inside #page-practice when an ARENA exercise crosses its prereq
   thresholds. The header / tabs / footer stay visible because they live
   outside #page-practice. The unlock view IS the practice tab content
   for the moment — it is not a popup, modal, or overlay.

   Controller: practice/arena-unlock.js. Mount: <div id="arena-unlock-page">
   sibling of .practice-container inside #page-practice (see index.html).

   This file is intentionally separate from practice.css so the unlock
   view can be removed cleanly when the concept graph backend ships
   (delete this file + practice/arena-unlock.js + the index.html mount
   + the events.js call — no surgical edits to practice.css required).
   ================================================================ */

.arena-unlock-page {
  width: 100%;
  min-height: calc(100vh - 200px); /* roughly: viewport minus header + footer */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  box-sizing: border-box;
}

.arena-unlock-page.hidden {
  display: none;
}

.arena-unlock-card {
  width: min(880px, 100%);
  padding: 28px 32px 24px;
  border-radius: 16px;
  border: 1px solid rgb(var(--ok-rgb) / 0.55);
  background: linear-gradient(180deg, var(--panel), var(--panel-deep));
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--white);
}

.arena-unlock-banner {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ok);
}

.arena-unlock-title {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--white);
}

.arena-unlock-sub {
  font-size: 14px;
  color: var(--color-muted);
  line-height: 1.5;
}

.arena-unlock-why {
  font-size: 12px;
  color: var(--color-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  line-height: 1.45;
}

.arena-unlock-heading-block {
  background: rgb(var(--tint-rgb) / calc(0.04 * var(--tint-k)));
  border: 1px dashed rgb(var(--tint-rgb) / calc(0.18 * var(--tint-k)));
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.arena-unlock-heading-label {
  font-size: 11px;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.arena-unlock-heading-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.arena-unlock-heading {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  color: var(--white);
  word-break: break-word;
  flex: 1 1 auto;
}

.arena-unlock-copy-btn {
  flex: 0 0 auto;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 8px;
  white-space: nowrap;
}

.arena-unlock-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.arena-unlock-btn {
  padding: 10px 16px;
  font-size: 13px;
  border-radius: 8px;
}

.arena-unlock-colab-btn {
  text-decoration: none;
}

.arena-unlock-placeholder {
  font-size: 12px;
  color: var(--color-muted);
  padding: 10px 12px;
  border-left: 2px solid rgb(var(--tint-rgb) / calc(0.22 * var(--tint-k)));
  background: rgb(var(--tint-rgb) / calc(0.03 * var(--tint-k)));
  border-radius: 0 8px 8px 0;
}

.arena-unlock-placeholder.hidden {
  display: none;
}

.arena-unlock-continue-row {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
}

.arena-unlock-continue-btn {
  padding: 11px 22px;
  font-size: 14px;
  border-radius: 10px;
}

.arena-unlock-stuck-hint {
  font-size: 13px;
  font-weight: 600;
  color: var(--warn);
  padding: 10px 12px;
  border-radius: 8px;
  background: rgb(var(--warn-rgb) / 0.08);
  border: 1px solid rgb(var(--warn-rgb) / 0.45);
}

.arena-unlock-stuck-hint.hidden {
  display: none;
}

.arena-unlock-rating {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 4px;
}

.arena-unlock-rating-stage {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.arena-unlock-rating-stage.hidden {
  display: none;
}

.arena-unlock-rating-prompt {
  font-size: 14px;
  font-weight: 600;
  color: var(--white);
}

.arena-unlock-choice-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}

.arena-unlock-choice-btn {
  flex: 1 1 0;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
  line-height: 1.3;
  background: rgb(var(--tint-rgb) / calc(0.04 * var(--tint-k)));
  border: 1px solid rgb(var(--tint-rgb) / calc(0.18 * var(--tint-k)));
  color: var(--white);
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}

.arena-unlock-choice-btn:hover:not(:disabled) {
  background: rgb(var(--tint-rgb) / calc(0.08 * var(--tint-k)));
  transform: translateY(-1px);
}

.arena-unlock-choice-btn:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

.arena-unlock-choice-mark {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.arena-unlock-choice-main {
  font-size: 13px;
  font-weight: 600;
}

.arena-unlock-choice-sub {
  font-size: 12px;
  /* --text, not --muted: this sub-label sits on the choice button's GREEN
     tint, not on the card, and muted-on-tint measured 3.1:1 in the blue
     theme and 3.8:1 in dark. */
  color: var(--text);
}

/* Green tiers — three "correct" outcomes, brighter for higher boost. */
.arena-unlock-choice--best {
  background: rgb(var(--ok-rgb) / 0.22);
  border-color: rgb(var(--ok-rgb) / 0.70);
}
.arena-unlock-choice--best:hover:not(:disabled) { background: rgb(var(--ok-rgb) / 0.32); }

.arena-unlock-choice--good {
  background: rgb(var(--ok-rgb) / 0.14);
  border-color: rgb(var(--ok-rgb) / 0.50);
}
.arena-unlock-choice--good:hover:not(:disabled) { background: rgb(var(--ok-rgb) / 0.24); }

.arena-unlock-choice--okay {
  background: rgb(var(--ok-rgb) / 0.08);
  border-color: rgb(var(--ok-rgb) / 0.35);
}
.arena-unlock-choice--okay:hover:not(:disabled) { background: rgb(var(--ok-rgb) / 0.18); }

/* Red tier — looked up solution. */
.arena-unlock-choice--bad {
  background: rgb(var(--danger-rgb) / 0.16);
  border-color: rgb(var(--danger-rgb) / 0.55);
}
.arena-unlock-choice--bad:hover:not(:disabled) { background: rgb(var(--danger-rgb) / 0.28); }

.arena-unlock-result-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Per-subtopic animated bar. Re-uses .ewma-accuracy from practice/bars.css
   for the surface chrome (label / value row + track), so the visuals stay
   in lockstep with the singleton bar in the regular practice flow. */
.arena-unlock-bar-row {
  margin-bottom: 0; /* override .ewma-accuracy's 14px when stacked here */
}

@media (max-width: 720px) {
  /* On narrow viewports the four choice buttons can't fit one row; wrap
     to a 2×2 grid (each button grows to half-width via flex: 1 1 45%). */
  .arena-unlock-choice-btn {
    flex: 1 1 45%;
    min-width: 0;
  }
}

@media (max-width: 600px) {
  .arena-unlock-page {
    padding: 20px 12px;
  }
  .arena-unlock-card {
    padding: 22px 20px 18px;
    border-radius: 14px;
  }
  .arena-unlock-title {
    font-size: 22px;
  }
}