/* EraPin design tokens — teacher portal only.
 *
 * Source of truth for surface colors, ink, borders, radii, and type.
 * Every hardcoded hex in teacher-portal CSS should be a var() from here.
 *
 * Scope: teach.erapin.com only. The daily puzzle (erapin.com) and the
 * classroom projector (class.erapin.com) use their own game.css palette
 * and are explicitly out of scope for this file.
 */

:root {
  /* ── Ink (text on light surfaces) ──────────────────────────── */
  --erapin-ink: #1C1208;              /* near-black brown; primary text */
  --erapin-ink-soft: #5a4828;         /* secondary text, descriptions */
  --erapin-ink-muted: #7a7060;        /* tertiary text, metadata */
  --erapin-ink-faint: #a09484;        /* placeholder, disabled */

  /* ── Paper (surfaces) ──────────────────────────────────────── */
  --erapin-paper: #F5F0E8;            /* primary cream */
  --erapin-paper-aged: #EDE8DC;       /* secondary cream (nested cards) */
  --erapin-paper-white: #FFFFFF;      /* only for photo/map contexts */
  --erapin-paper-dark: #D9D1BE;       /* tag pill bg, subtle dividers */

  /* ── Ink on dark surfaces (not used in teacher portal; kept for
   *     consistency if a component ever appears on the projector) ── */
  --erapin-cream-light: #f0d890;
  --erapin-cream-dim: #a09060;

  /* ── Brand red (primary actions, create/commit flows) ────── */
  --erapin-red: #c44a2a;              /* default */
  --erapin-red-deep: #8B1A0E;         /* hover/pressed */
  --erapin-red-dark: #882810;         /* border on dark red surfaces */
  --erapin-red-soft: #a63c2a;         /* lighter variant */

  /* ── Brand green (share/launch, verified states) ─────────── */
  --erapin-green: #2e6018;            /* default forest green */
  --erapin-green-bright: #80cc58;     /* highlight/active */
  --erapin-green-soft: rgba(46, 96, 24, 0.12);    /* verified badge bg */
  --erapin-green-deep: #1a3810;       /* hover/pressed */

  /* ── Amber (pending, awaiting review) ───────────────────── */
  --erapin-amber: #8B6914;
  --erapin-amber-soft: rgba(139, 105, 20, 0.12);  /* pending badge bg */
  --erapin-amber-dim: #3e3014;

  /* ── Borders ────────────────────────────────────────────── */
  --erapin-border: rgba(28, 18, 8, 0.15);
  --erapin-border-strong: rgba(28, 18, 8, 0.30);
  --erapin-border-emphasis: #1C1208;  /* 2px accent, pressed */

  /* ── Radii ──────────────────────────────────────────────── */
  --erapin-radius-sm: 2px;            /* tag pills */
  --erapin-radius-md: 4px;            /* inputs, small buttons */
  --erapin-radius-lg: 6px;            /* cards, modals, primary buttons */

  /* ── Type families ──────────────────────────────────────── */
  --erapin-font-display: 'IM Fell English SC', 'Libre Caslon Display', serif;
  --erapin-font-serif: 'Playfair Display', Georgia, serif;
  --erapin-font-body: 'Courier Prime', 'Courier New', ui-monospace, monospace;
}

/* ═══════════════════════════════════════════════════════════
 * Shared component classes — reusable across teach.html
 * ═══════════════════════════════════════════════════════════ */

/* ── Primary button (red — commit/create actions) ───────── */
.erapin-btn-primary {
  background: var(--erapin-red);
  color: var(--erapin-paper);
  border: none;
  font-family: var(--erapin-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 12px 20px;
  border-radius: var(--erapin-radius-md);
  cursor: pointer;
  transition: background 0.15s;
}
.erapin-btn-primary:hover { background: var(--erapin-red-deep); }
.erapin-btn-primary:active { background: var(--erapin-red-dark); transform: translateY(1px); }
.erapin-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Share/launch button (green) ────────────────────────── */
.erapin-btn-share {
  background: var(--erapin-green);
  color: var(--erapin-paper);
  border: none;
  font-family: var(--erapin-font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 12px 20px;
  border-radius: var(--erapin-radius-md);
  cursor: pointer;
  transition: background 0.15s;
}
.erapin-btn-share:hover { background: var(--erapin-green-deep); }

/* ── Secondary button (outlined, transparent) ───────────── */
.erapin-btn-secondary {
  background: transparent;
  color: var(--erapin-ink);
  border: 1px solid var(--erapin-border-strong);
  font-family: var(--erapin-font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: var(--erapin-radius-md);
  cursor: pointer;
  transition: background 0.15s;
}
.erapin-btn-secondary:hover { background: var(--erapin-paper-aged); }

/* ── Structural label (small tracked caps) ──────────────── */
.erapin-label {
  font-family: var(--erapin-font-body);
  font-size: 10px;
  color: var(--erapin-ink-soft);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 400;
}

/* ── Status badges — verification states ────────────────── */
.erapin-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--erapin-font-body);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 400;
  padding: 3px 8px;
  border-radius: var(--erapin-radius-sm);
  border: 1px solid transparent;
}
.erapin-badge-verified {
  background: var(--erapin-green-soft);
  color: var(--erapin-green);
  border-color: rgba(46, 96, 24, 0.25);
}
.erapin-badge-pending {
  background: var(--erapin-amber-soft);
  color: var(--erapin-amber);
  border-color: rgba(139, 105, 20, 0.25);
}
.erapin-badge-flagged {
  background: rgba(196, 74, 42, 0.10);
  color: var(--erapin-red-deep);
  border-color: rgba(196, 74, 42, 0.25);
}
.erapin-badge-international {
  background: transparent;
  color: var(--erapin-ink-muted);
  border-color: var(--erapin-border);
}

/* ── Text link (inline, low-weight) ─────────────────────── */
.erapin-link {
  font-family: var(--erapin-font-body);
  font-size: 10px;
  color: var(--erapin-ink-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.erapin-link:hover { color: var(--erapin-red); }

/* ── Input ──────────────────────────────────────────────── */
.erapin-input {
  font-family: var(--erapin-font-body);
  font-size: 13px;
  color: var(--erapin-ink);
  background: var(--erapin-paper);
  border: 1px solid var(--erapin-border-strong);
  border-radius: var(--erapin-radius-md);
  padding: 10px 14px;
  letter-spacing: 0.5px;
  outline: none;
  transition: border-color 0.15s;
}
.erapin-input:focus { border-color: var(--erapin-red); }
.erapin-input::placeholder {
  color: var(--erapin-ink-faint);
  font-style: italic;
}

/* ── Modal scrim + card ─────────────────────────────────── */
.erapin-modal-scrim {
  position: fixed; inset: 0;
  background: rgba(28, 18, 8, 0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem 1rem;
  z-index: 1000;
}
.erapin-modal {
  background: var(--erapin-paper);
  border: 1px solid var(--erapin-ink);
  border-radius: var(--erapin-radius-lg);
  max-width: 520px;
  width: 100%;
  padding: 28px;
  box-shadow: 0 8px 32px rgba(28, 18, 8, 0.25);
}
.erapin-modal-title {
  font-family: var(--erapin-font-serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--erapin-ink);
  margin: 0 0 6px 0;
}
.erapin-modal-subtitle {
  font-family: var(--erapin-font-body);
  font-size: 12px;
  color: var(--erapin-ink-soft);
  line-height: 1.6;
  margin: 0 0 20px 0;
}
.erapin-modal-footer {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--erapin-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* ── Pack card (v2 pattern) ─────────────────────────────── */
.erapin-pack-card {
  background: var(--erapin-paper);
  border: 1px solid var(--erapin-border);
  border-radius: var(--erapin-radius-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  min-height: 124px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.erapin-pack-card:hover { border-color: var(--erapin-border-strong); }
.erapin-pack-card-active {
  border: 2px solid var(--erapin-red);
  padding: 13px 15px; /* compensate so layout doesn't shift vs 1px border */
  box-shadow: 0 0 0 3px rgba(196, 74, 42, 0.12);
  background: var(--erapin-paper);
  position: relative;
}
.erapin-pack-card-active::after {
  content: 'SELECTED';
  position: absolute;
  top: 6px; right: 8px;
  font-family: var(--erapin-font-body);
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--erapin-red);
  background: var(--erapin-paper);
  padding: 1px 4px;
  border-radius: var(--erapin-radius-sm);
}
.erapin-pack-icon {
  width: 32px; height: 32px;
  border-radius: var(--erapin-radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.erapin-pack-icon-wars     { background: rgba(196, 74, 42, 0.12); }
.erapin-pack-icon-politics { background: rgba(139, 105, 20, 0.12); }
.erapin-pack-icon-rights   { background: rgba(46, 96, 24, 0.12); }
.erapin-pack-icon-tech     { background: rgba(139, 105, 20, 0.15); }
.erapin-pack-icon-science  { background: rgba(46, 96, 24, 0.15); }
.erapin-pack-icon-global   { background: rgba(28, 18, 8, 0.08); }
.erapin-pack-name {
  font-family: var(--erapin-font-serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--erapin-ink);
  margin: 2px 0 4px 0;
  line-height: 1.3;
}
.erapin-pack-desc {
  font-family: var(--erapin-font-body);
  font-size: 11px;
  color: var(--erapin-ink-soft);
  line-height: 1.5;
  letter-spacing: 0.5px;
  margin: 0 0 10px 0;
}
.erapin-pack-attribution {
  font-family: var(--erapin-font-serif);
  font-style: italic;
  font-size: 10px;
  color: var(--erapin-amber);
  line-height: 1.45;
  margin: 0 0 10px 0;
}
.erapin-pack-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.erapin-pack-count {
  font-family: var(--erapin-font-body);
  font-size: 10px;
  color: var(--erapin-ink-muted);
  letter-spacing: 1.5px;
}

/* ── Event row (pack detail — selectable) ───────────────── */
.erapin-event-row {
  display: flex;
  gap: 10px;
  background: var(--erapin-paper);
  border: 1px solid var(--erapin-border);
  border-radius: var(--erapin-radius-lg);
  padding: 12px 14px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.erapin-event-row:hover { border-color: var(--erapin-border-strong); }
.erapin-event-selected {
  border: 2px solid var(--erapin-red);
  padding: 11px 13px;
}
.erapin-event-check {
  width: 22px; height: 22px;
  border-radius: var(--erapin-radius-sm);
  border: 1px solid var(--erapin-border-strong);
  background: transparent;
  color: transparent;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
  margin-top: 2px;
}
.erapin-event-selected .erapin-event-check {
  background: var(--erapin-red);
  color: var(--erapin-paper);
  border-color: var(--erapin-red);
}
/* Selected + verified (teacher has run Verify against this row and it
   came back clean or with applied corrections) — swap red for green so
   the teacher can see at a glance which picks are still unverified. */
.erapin-event-selected.erapin-event-verified-ok {
  border-color: var(--erapin-green);
}
.erapin-event-selected.erapin-event-verified-ok .erapin-event-check {
  background: var(--erapin-green);
  border-color: var(--erapin-green);
}
.erapin-event-body { flex: 1; min-width: 0; }
.erapin-event-title {
  font-family: var(--erapin-font-serif);
  font-size: 14px;
  font-weight: 700;
  font-style: italic;
  color: var(--erapin-ink);
  margin: 0;
  display: inline;
}
.erapin-event-meta {
  font-family: var(--erapin-font-body);
  font-size: 10px;
  color: var(--erapin-ink-muted);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-left: 6px;
}
.erapin-event-desc {
  font-family: var(--erapin-font-body);
  font-size: 11px;
  color: var(--erapin-ink-soft);
  line-height: 1.55;
  margin: 4px 0;
}