/* Student result-check + result sheet */

.check-wrap {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(135deg, var(--sky-blue) 0%, var(--sky-blue-light) 100%);
}
.check-card {
  width: 100%; max-width: 440px; background: var(--surface);
  border-radius: 14px; box-shadow: var(--shadow-md); padding: 32px 28px;
}
.check-card .logo { justify-content: center; margin-bottom: 6px; }
.check-card .logo .monogram { background: var(--white); }
.check-card h1 { text-align: center; font-size: 1.3rem; margin-bottom: 4px; }
/* base .auth-subtitle lives in global.css; only the margin differs here */
.check-card .auth-subtitle { margin-bottom: 22px; }

/* ----- Result sheet ----- */
.sheet-wrap { max-width: 860px; margin: 24px auto; padding: 0 16px; }
.sheet {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.sheet-header {
  background: var(--royal-blue); color: var(--white);
  padding: 22px 24px; text-align: center;
}
.sheet-header .monogram-lg {
  width: 6rem; height: 6rem; border-radius: 50%; background: var(--white);
  object-fit: cover; display: block; margin: 0 auto 12px;
}
.sheet-header h1 { color: var(--white); font-size: 1.35rem; }
.sheet-header p { font-size: 0.88rem; opacity: 0.9; }

.sheet-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 24px; padding: 20px 24px; border-bottom: 1px solid var(--border);
}
.sheet-meta div { font-size: 0.92rem; min-width: 0; }
.sheet-meta span { color: var(--text-muted); display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.4px; }
/* A long student name (or other meta value) must wrap within its column rather
   than spill past it and overlap the neighbouring cell. */
.sheet-meta strong { color: var(--text-dark); overflow-wrap: anywhere; }

.sheet-body { padding: 20px 24px; }

/* Result table: shrink the content to fit the sheet width (smaller font, tighter
   padding, wrapping text columns) before falling back to horizontal scroll, so
   the table is never clipped or split when the sheet is printed. */
.sheet table { font-size: 0.82rem; }
.sheet thead th { padding: 8px 9px; white-space: normal; }
.sheet tbody td { padding: 7px 9px; }
.sheet td.num, .sheet th.num { text-align: right; white-space: nowrap; }
/* Subject (first) and Remark (last) are the wide text columns — let them wrap. */
.sheet tbody td:first-child, .sheet tbody td:last-child { white-space: normal; }

.sheet-legend {
  margin-top: 8px; font-size: 0.78rem; color: var(--text-muted); font-style: italic;
}

/* ----- Grading key ----- */
.grading-key { margin-top: 18px; }
.grading-key-title {
  font-family: var(--font-heading); font-weight: 600; color: var(--royal-blue);
  font-size: 0.86rem; margin-bottom: 8px;
}
.grade-key-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px 14px;
}
.grade-key-item {
  display: flex; align-items: baseline; gap: 7px;
  font-size: 0.78rem; padding: 5px 9px;
  background: var(--sky-blue-light); border-radius: var(--radius);
}
.grade-key-item .gk-range { color: var(--text-muted); min-width: 52px; }
.grade-key-item .gk-grade { font-weight: 700; color: var(--royal-blue); min-width: 22px; }
.grade-key-item .gk-remark { color: var(--text-dark); }

/* ----- Sign-off (principal signature + date issued) ----- */
.sheet-signoff {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap; margin-top: 34px;
}
.signoff-sign { min-width: 220px; text-align: center; }
.signoff-line {
  border-bottom: 1px solid var(--text-dark); height: 34px; margin-bottom: 6px;
}
.signoff-name { font-weight: 600; color: var(--text-dark); font-size: 0.9rem; }
.signoff-date { text-align: right; font-size: 0.9rem; }
.signoff-date span {
  display: block; color: var(--text-muted); font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px;
}
.signoff-date strong { color: var(--text-dark); }

.summary-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px; margin-top: 18px;
}
.summary-box {
  background: var(--sky-blue-light); border-radius: var(--radius);
  padding: 14px; text-align: center;
}
/* The numeric summary values are short, but coerce any unexpectedly long value
   (e.g. a malformed payload) to wrap inside its box rather than overflow it. */
.summary-box .v {
  font-family: var(--font-heading); font-size: 1.4rem; color: var(--royal-blue);
  font-weight: 700; overflow-wrap: anywhere;
}
.summary-box .l { font-size: 0.8rem; color: var(--text-muted); }

/* ----- Overall remark (full-width band) ----- */
/* The remark is free-form prose (up to 500 chars), so it gets its own band that
   spans the whole sheet instead of a single narrow summary column. The font
   steps down by length tier (set in result-sheet.js from the text length) so a
   short remark reads large and a long one still fits without overflowing — on
   screen and in the printed PDF. Text wraps and breaks long words as a backstop. */
.sheet-remark {
  margin-top: 16px; padding: 14px 16px;
  background: var(--sky-blue-light); border-radius: var(--radius);
  border-left: 4px solid var(--royal-blue);
}
.sheet-remark .rk-label {
  display: block; color: var(--text-muted); font-size: 0.74rem;
  text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px;
}
.sheet-remark .rk-value {
  display: block; color: var(--text-dark); font-weight: 600;
  line-height: 1.4; overflow-wrap: anywhere; word-break: break-word;
}
.sheet-remark .rk-value.len-1 { font-size: 1.15rem; }
.sheet-remark .rk-value.len-2 { font-size: 1rem; }
.sheet-remark .rk-value.len-3 { font-size: 0.9rem; }
.sheet-remark .rk-value.len-4 { font-size: 0.82rem; }

.sheet-footer {
  text-align: center; padding: 16px 24px; border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: 0.82rem; font-style: italic;
}

@media (max-width: 480px) {
  .check-wrap { padding: 16px; }
  .check-card { padding: 26px 20px; }
  .sheet-wrap { padding: 0 10px; margin: 14px auto; }
  .sheet-header { padding: 18px 16px; }
  .sheet-meta, .sheet-body { padding: 16px; }
  /* On a phone the 9-column table overflows; drop the secondary class-stat
     columns (CLH/CLL/CAV) from the on-screen view so the core columns fit. They
     stay in the print/PDF output (re-shown in @media print below). */
  .sheet .hide-mobile { display: none; }
}

@media print {
  @page { size: A4; margin: 10mm; }
  body { background: var(--white); }
  /* Keep the colored header band (white text on royal blue would otherwise turn
     invisible when browsers drop backgrounds) and the thead/summary fills. */
  .sheet { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* Re-show the stat columns hidden on small screens — the full sheet prints. */
  .sheet .hide-mobile { display: table-cell; }
  .no-print { display: none !important; }
  .sheet { box-shadow: none; }
  .sheet-wrap { margin: 0; max-width: 100%; }
  /* When a result sheet is printed from a staff dashboard (principal/admin), it
     sits inside .content, whose padding + overflow-x:hidden would otherwise add
     margins and clip the wide table's right edge. Neutralise that wrapper for
     print, mirroring the scratch-card page. (Harmless on the student page, which
     has no .content/.layout.) */
  .layout { display: block; min-height: 0; }
  .content { padding: 0; overflow: visible; }
  /* Never scroll/clip the table on paper — always fit it to the page width. */
  .sheet .table-wrap { overflow: visible !important; }
  .sheet table { font-size: 0.74rem; width: 100%; }
  /* Let the text columns wrap so a long subject/remark can't push the 9-column
     table past the page width (the short numeric columns keep their natural,
     compact width under the default auto table layout). */
  .sheet td, .sheet th { word-break: break-word; overflow-wrap: anywhere; }
  .sheet thead th { padding: 6px 7px; }
  .sheet tbody td { padding: 5px 7px; }
  .grading-key { break-inside: avoid; }
  .grade-key-item { background: transparent; padding: 2px 0; }
  /* Keep the remark band together on one page; the tier font-sizes already keep
     even a 500-char remark compact, so it won't run off the page width. */
  .sheet-remark { break-inside: avoid; }
  .sheet-signoff { break-inside: avoid; }
}