/* ==========================================================================
   KRYO Training Range — styles for /range/. Tokens only: no color literals.
   ========================================================================== */

.range-hero {
  padding: calc(var(--nav-h) + var(--space-9)) 0 var(--space-7);
}

.range-hero h1 {
  margin-bottom: var(--space-4);
}

.game {
  margin-bottom: var(--space-7);
  padding: var(--space-6);
  background: var(--brackets), var(--ink-850);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-2);
}

.game h2 {
  margin-bottom: var(--space-2);
  font-size: var(--step-3);
}

.game-lead {
  margin-bottom: var(--space-5);
  color: var(--text-mid);
}

.game-bar {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  font-size: 0.8rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-low);
}

.game-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.game-feedback {
  min-height: 3.2em;
  margin-top: var(--space-4);
  color: var(--text-mid);
}

.game-feedback.is-ok { color: var(--ok); }
.game-feedback.is-bad { color: var(--warn); }

.btn[hidden] {
  display: none;
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --- phishing mail card -------------------------------------------------- */
.mail {
  padding: var(--space-5);
  background: var(--ink-900);
  border: 1px solid var(--ink-600);
}

.mail-from {
  margin-bottom: var(--space-1);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-low);
  overflow-wrap: anywhere;
}

.mail-subject {
  margin-bottom: var(--space-3);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text-hi);
}

.mail-body {
  color: var(--text-mid);
  overflow-wrap: anywhere;
}

/* --- password ------------------------------------------------------------ */
.pw-field {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--text-hi);
  background: var(--ink-900);
  border: 1px solid var(--ink-600);
  border-radius: 0;
}

.pw-field:focus-visible {
  outline: none;
  border-color: var(--phos-400);
  box-shadow: var(--focus-ring);
}

.pw-result {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--step-3);
  color: var(--phos-400);
}

.meter {
  display: block;
  width: 100%;
  height: 10px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--ink-600);
  background: var(--ink-900);
}

.meter::-webkit-meter-bar { background: var(--ink-900); border: 0; }
.meter--0::-webkit-meter-optimum-value, .meter--0::-webkit-meter-suboptimum-value, .meter--0::-webkit-meter-even-less-good-value { background: var(--danger); }
.meter--1::-webkit-meter-optimum-value, .meter--1::-webkit-meter-suboptimum-value, .meter--1::-webkit-meter-even-less-good-value { background: var(--warn); }
.meter--2::-webkit-meter-optimum-value, .meter--2::-webkit-meter-suboptimum-value, .meter--2::-webkit-meter-even-less-good-value { background: var(--phos-600); }
.meter--3::-webkit-meter-optimum-value, .meter--3::-webkit-meter-suboptimum-value, .meter--3::-webkit-meter-even-less-good-value { background: var(--phos-400); }
.meter--0::-moz-meter-bar { background: var(--danger); }
.meter--1::-moz-meter-bar { background: var(--warn); }
.meter--2::-moz-meter-bar { background: var(--phos-600); }
.meter--3::-moz-meter-bar { background: var(--phos-400); }

/* --- terminal ------------------------------------------------------------ */
.term {
  background: var(--ink-950);
  border: 1px solid var(--ink-600);
  font-family: var(--font-mono);
  font-size: 0.9rem;
}

.term-out {
  height: 320px;
  padding: var(--space-4);
  overflow-y: auto;
  color: var(--text-mid);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.term-hi { color: var(--phos-400); }
.term-ok { color: var(--ok); }
.term-err { color: var(--danger); }
.term-cmd { color: var(--text-hi); }

.term-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--ink-600);
}

.term-prompt {
  flex: none;
  color: var(--phos-400);
}

.term-input {
  flex: 1;
  min-width: 0;
  padding: 6px 0;
  font: inherit;
  color: var(--text-hi);
  background: transparent;
  border: 0;
  outline: none;
}

/* --- level tabs ---------------------------------------------------------- */
.tablist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--ink-600);
}

.tablist[hidden] {
  display: none;
}

.tab {
  min-height: 48px;
  padding: 10px 18px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-mid);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.tab:hover {
  color: var(--text-hi);
  background: var(--wash-1);
}

.tab[aria-selected="true"] {
  color: var(--phos-400);
  border-bottom-color: var(--phos-400);
}

.tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

[role="tabpanel"][hidden] {
  display: none;
}

/* range-boot.js sets .tabs-js and data-tab before first paint, so the bar and
   the active panel are laid out once, with no shift when range.js takes over. */
.tabs-js .tablist[hidden] {
  display: flex;
}

.tabs-js [role="tabpanel"] {
  display: none;
}

html[data-tab="beginner"] #beginner,
html[data-tab="intermediate"] #intermediate,
html[data-tab="advanced"] #advanced {
  display: block;
}

.tier-lead {
  margin-bottom: var(--space-5);
  color: var(--text-mid);
}

/* --- fake-link game ------------------------------------------------------ */
.url-list {
  display: grid;
  gap: var(--space-3);
}

.url-opt {
  justify-content: flex-start;
  height: auto;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-mono);
  font-weight: 400;
  overflow-wrap: anywhere;
}

.url-opt.is-right {
  border-color: var(--ok);
  color: var(--ok);
}

/* --- SQL injection lab --------------------------------------------------- */
.sql-fields {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.sql-field {
  display: grid;
  gap: var(--space-1);
}

.sql-field-name {
  font-size: 0.75rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-low);
}

.sql-query {
  margin: 0;
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--phos-300);
  background: var(--ink-950);
  border: 1px solid var(--ink-600);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.sql-safe {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 48px;
  color: var(--text-mid);
  cursor: pointer;
}

.sql-out {
  margin-top: var(--space-4);
}

.sql-out-head {
  color: var(--text-low);
  font-size: 0.8rem;
}

.sql-row {
  padding: var(--space-2) 0;
  font-family: var(--font-mono);
  border-bottom: 1px dashed var(--ink-600);
  overflow-wrap: anywhere;
}

/* --- prompt injection chat ---------------------------------------------- */
.chat-log {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  white-space: normal;
}

.chat-line {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--space-3);
}

.chat-who {
  color: var(--text-low);
  font-size: 0.75rem;
}

.chat-you .chat-text { color: var(--text-hi); }
.chat-bot .chat-text { color: var(--phos-300); }

/* Space reserved for content that range.js fills in after first paint, sized from
   measured heights, so games appearing does not push the page around (CLS).
   Desktop values first, phone values below. */
.mail { min-height: 10.5rem; }
.url-list { min-height: 10.25rem; }
[data-url-ask], [data-sql-goal] { min-height: 1.75rem; }
[data-pi-goal] { min-height: 3.5rem; }
[data-pi-defense] { min-height: 1.75rem; }
.sql-fields { min-height: 9.5rem; }
.sql-query { min-height: 3.4rem; }

@media (max-width: 600px) {
  .mail { min-height: 14.75rem; }
  .url-list { min-height: 13.5rem; }
  [data-url-ask], [data-sql-goal] { min-height: 3.25rem; }
  [data-pi-goal] { min-height: 4.75rem; }
  [data-pi-defense] { min-height: 3.25rem; }
  .sql-query { min-height: 4.8rem; }
}

.range-cta {
  padding: var(--space-7) 0 var(--space-9);
  text-align: center;
}

@media (max-width: 480px) {
  .game { padding: var(--space-4); }
  .term-out { height: 260px; }
}