/* HexMod shared framework - report-print.css
 *
 * Screen styles for the progress report plus an @media print one-pager. On screen it
 * is dark neon (matching the site); on paper it is clean black-and-white a teacher can
 * hand out: title, date, save code, a blank "Name: ____" line, and per-game tier
 * tables with a "Practice next" column. No deficit language (the labels are warm).
 */

/* ===== screen ===== */

.rv-report {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(12px, 3vw, 28px);
  color: #f7fbff;
  font-family: "Bahnschrift", "Agency FB", "Arial Narrow", sans-serif;
}

.rv-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 2px solid rgba(39, 245, 255, 0.3);
  padding-bottom: 10px;
}
.rv-title {
  margin: 0;
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  color: #adff2f;
  letter-spacing: 0.02em;
}
.rv-sub { margin: 2px 0 0; color: #aab5d6; }

.rv-print {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 18px;
  font-weight: 800;
  font-size: 1rem;
  color: #05060f;
  background: #27f5ff;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}
.rv-print:hover { background: #5fe9ff; }
.rv-print:focus-visible { outline: 3px solid #ffe66d; outline-offset: 2px; }

.rv-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 14px 0 6px;
  font-size: 1.05rem;
}
.rv-meta strong { color: #ffe66d; }
.rv-name-line {
  display: inline-block;
  min-width: 220px;
  border-bottom: 2px solid #aab5d6;
}

.rv-token-note {
  margin: 6px 0 18px;
  font-size: 0.85rem;
  color: #8a96ba;
}

.rv-game { margin: 0 0 22px; }
.rv-game-name {
  margin: 0 0 8px;
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  color: #27f5ff;
}

.rv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.rv-table th, .rv-table td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(39, 245, 255, 0.18);
}
.rv-table th {
  color: #aab5d6;
  font-weight: 700;
  border-bottom: 2px solid rgba(39, 245, 255, 0.3);
}
.rv-acc, .rv-mastered, .rv-played, .rv-practice { text-align: center; }
.rv-practice { font-weight: 800; color: #ffe66d; }

.rv-table tr[data-status="passed"] .rv-status { color: #adff2f; }
.rv-table tr[data-status="practicing"] .rv-status { color: #ffe66d; }
.rv-table tr[data-status="not-started"] .rv-status { color: #8a96ba; }

.rv-empty { color: #aab5d6; font-style: italic; }

/* ===== print: clean B/W one-pager ===== */

@media print {
  /* Hide everything except the report container when printing. */
  body * { visibility: hidden; }
  .rv-report, .rv-report * { visibility: visible; }
  .rv-report {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    color: #000;
    background: #fff;
    font-size: 11pt;
  }

  /* No print button on paper. */
  .rv-print { display: none !important; }

  .rv-head {
    border-bottom: 2px solid #000;
  }
  .rv-title { color: #000; font-size: 18pt; }
  .rv-sub, .rv-meta, .rv-token-note { color: #000; }
  .rv-meta strong { color: #000; }
  .rv-name-line { border-bottom: 1px solid #000; min-width: 240px; }
  .rv-token-note { font-size: 8pt; color: #333; }

  .rv-game-name { color: #000; }
  .rv-table { font-size: 9.5pt; }
  .rv-table th, .rv-table td {
    border-bottom: 1px solid #999;
    color: #000;
  }
  .rv-table th { border-bottom: 2px solid #000; color: #000; }

  /* Status stays distinguishable in B/W via the glyph (check / dot / circle). */
  .rv-table tr[data-status] .rv-status { color: #000; }
  .rv-practice { color: #000; }

  /* Avoid breaking a game's table across pages where possible. */
  .rv-game { break-inside: avoid; }
}