/* ================================================================
   QuizApp COMPONENTS — the building blocks of every screen.
   ----------------------------------------------------------------
   RULE: components use ONLY the variables from tokens.css — never
   a raw color value. That single rule is what makes both features
   below work "for free":
     * you can redesign the whole app by editing tokens.css
     * a QM company's BRAND is just a JSON set of token overrides
       applied at runtime (see brand.js) — no extra CSS per company.
   ================================================================ */

* { box-sizing: border-box; margin: 0; }
body {
  font-family: var(--font);
  background: var(--bg); color: var(--text);
  transition: background .25s, color .25s;
}

/* ---------------- cards & layout ---------------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px;
}

/* ---------------- brand logo slot ----------------
   Every screen reserves this slot; the default QuizApp logo is
   replaced by the company logo when a brand is applied. */
.brand-logo { height: 34px; display: flex; align-items: center; gap: 8px; }
.brand-logo img { max-height: 34px; max-width: 140px; }

/* ---------------- buttons (min 48px tall — thumbs, dark pub) ---- */
.btn {
  display: inline-block; padding: 13px 22px; border: 0; border-radius: 12px;
  font-size: 1rem; font-weight: 700; cursor: pointer; min-height: 48px;
  background: var(--accent); color: var(--accent-ink); font-family: var(--font);
}
.btn.secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.btn.danger { background: var(--bad); color: #fff; }
.btn.small { padding: 8px 14px; min-height: 36px; font-size: .85rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------------- form fields ---------------- */
label.field { display: block; font-size: .8rem; color: var(--text-dim); margin: 10px 0 4px; }
input.field, select.field {
  width: 100%; padding: 13px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font-size: 1rem; font-family: var(--font);
}
input.field:focus { outline: 2px solid var(--accent); border-color: transparent; }

/* ---------------- language switcher ----------------
   Small pill pair; the active language is filled with the accent.
   Lives in the top bar of every screen. */
.lang-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.lang-switch button {
  padding: 6px 14px; border: 0; background: transparent; color: var(--text-dim);
  font-size: .8rem; font-weight: 700; cursor: pointer; font-family: var(--font);
}
.lang-switch button.active { background: var(--accent); color: var(--accent-ink); }

/* ---------------- status pills ---------------- */
.pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.pill.open   { background: color-mix(in srgb, var(--ok) 18%, transparent);   color: var(--ok);   border: 1px solid var(--ok); }
.pill.closed { background: color-mix(in srgb, var(--bad) 15%, transparent);  color: var(--bad);  border: 1px solid var(--bad); }
.pill.review { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); border: 1px solid var(--warn); }

/* ---------------- phone frame (for mockups/preview only) -------- */
.phone {
  width: 300px; border: 10px solid #000; border-radius: 34px; overflow: hidden;
  background: var(--bg); box-shadow: 0 12px 30px rgba(0,0,0,.45); flex-shrink: 0;
}
.phone .screen { padding: 14px; }
.phone .topbar {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .8rem; color: var(--text-dim); padding-bottom: 10px;
}
.phone .topbar b { color: var(--text); }

/* ---------------- question card ---------------- */
.timer { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; margin: 10px 0 14px; }
.timer > div { height: 100%; width: 62%; background: var(--accent); border-radius: 3px; }

.qcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.qnum { font-size: .72rem; color: var(--text-dim); letter-spacing: .06em; text-transform: uppercase; }
.qtext { font-size: 1.02rem; font-weight: 600; line-height: 1.35; margin: 6px 0 2px; }

/* ---------------- ABCD answers — the most-tapped element -------- */
.answers { display: flex; flex-direction: column; gap: 9px; margin-top: 12px; }
.answer {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); font-size: .93rem;
  text-align: left; cursor: pointer; font-family: var(--font);
}
.answer .letter {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); font-weight: 800; font-size: .85rem;
}
.answer.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); }
.answer.selected .letter { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.answer.correct { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, var(--surface-2)); }
.answer.correct .letter { background: var(--ok); color: #06281a; border-color: var(--ok); }
.answer.wrong { border-color: var(--bad); opacity: .8; }
.answer.wrong .letter { background: var(--bad); color: #fff; border-color: var(--bad); }

/* ---------------- captain proposals (spec §2.1) ---------------- */
.proposals { margin-top: 12px; }
.proposals .plabel { font-size: .72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; }
.prop {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px; border-radius: 10px; background: var(--surface-2);
  border: 1px solid var(--border); margin-bottom: 6px; font-size: .85rem;
}
.prop .who { color: var(--text-dim); }
.prop.confirmed { border-color: var(--ok); }
.confirmbar { display: flex; gap: 8px; margin-top: 10px; }
.confirmbar .btn { flex: 1; padding: 11px; }

/* ---------------- protest (spec §2.6) ---------------- */
.protest { margin-top: 12px; text-align: center; color: var(--text-dim); font-size: .8rem; }
.protest button { background: none; border: none; font-size: 1.35rem; cursor: pointer; }

/* ---------------- scoreboard ---------------- */
.board { width: 100%; border-collapse: collapse; }
.board th { text-align: left; font-size: .72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .06em; padding: 8px 10px; }
.board td { padding: 11px 10px; border-top: 1px solid var(--border); font-size: .95rem; }
.board .rank { width: 40px; font-weight: 800; color: var(--text-dim); }
.board tr.first .rank  { color: var(--gold); }
.board tr.second .rank { color: #c0c7d8; }
.board tr.third .rank  { color: #cd8f5a; }
.board .pts { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.board .time { text-align: right; color: var(--text-dim); font-size: .8rem; font-variant-numeric: tabular-nums; }
.board tr.me { background: color-mix(in srgb, var(--accent) 10%, transparent); }

/* ---------------- badges ---------------- */
.badges { display: flex; flex-wrap: wrap; gap: 16px; }
.badge { width: 92px; text-align: center; }
.badge .hex {
  width: 64px; height: 72px; margin: 0 auto 6px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.badge .name { font-size: .72rem; color: var(--text-dim); line-height: 1.25; }
.hex.bronze { background: linear-gradient(160deg, #b3703c, #7a4a26); }
.hex.silver { background: linear-gradient(160deg, #c8d0dc, #8b95a5); }
.hex.goldt  { background: linear-gradient(160deg, var(--gold), #b07d12); }
.hex.locked { background: var(--surface-2); color: var(--text-dim); outline: 1px dashed var(--border); outline-offset: -1px; }

.streak { display: flex; align-items: center; gap: 6px; font-size: 1.1rem; }
.streak .n { font-weight: 800; font-size: 1.3rem; color: var(--gold); }
.streak .shield { margin-left: 10px; font-size: .75rem; color: var(--text-dim); }

/* ---------------- toasts / messages ---------------- */
.toast { padding: 12px 14px; border-radius: 10px; font-size: .9rem; margin-bottom: 8px; border: 1px solid; }
.toast.ok    { background: color-mix(in srgb, var(--ok) 12%, var(--surface));   border-color: var(--ok);   }
.toast.warn  { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); border-color: var(--warn); }
.toast.bad   { background: color-mix(in srgb, var(--bad) 12%, var(--surface));  border-color: var(--bad);  }