/**
 * @file
 * Shared question-content styles (20261004) — loaded everywhere question
 * text is shown (same library as KaTeX: accredify_math_render/math_render).
 *
 * .sat-data-table is the reusable SAT data-table component produced by
 * accredify_question_maintenance's QuestionContentRenderer from
 * pipe-delimited question text. Style it here only — never per question.
 * Inherits the question's own font family, size and colour.
 */

/* Scroll container: the table never squeezes, clips or overlaps — on a
   narrow screen it scrolls sideways inside this box instead. */
.sat-data-table-wrap {
  display: block;
  max-width: 100%;
  /* The table's width must never widen the page/panel around it — in the
     SAT runtime's phone layout (.apers-exam-body is a flex column with
     align-items:flex-start) the question panel otherwise grows to the
     table's natural width and the whole page scrolls sideways. With
     inline-size containment the box takes its container's width and the
     table scrolls inside it instead. */
  container-type: inline-size;  /* = inline-size containment + lets the caption use cqw */
  width: 100%;
  /* Scroll cue: a soft shadow appears on whichever side has more table to
     scroll to (pure CSS — the two white "covers" scroll with the content,
     the shadows stay put). Invisible when the table fits. */
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) 0 0,
    linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.18), rgba(0,0,0,0)) 0 0,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.18), rgba(0,0,0,0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 16px 0 18px;
}
.sat-data-table-wrap:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

.sat-data-table {
  border-collapse: collapse;
  width: auto;
  min-width: min(100%, 320px);
  margin: 0;
  font: inherit;
  font-size: 0.94em;          /* ≈16px in the SAT runtime — never tiny */
  line-height: 1.4;
  font-weight: 400;
  color: inherit;
  background: transparent;    /* lets the wrapper's scroll cue show */
  font-variant-numeric: tabular-nums;
}

.sat-data-table caption {
  caption-side: top;
  text-align: center;
  font-weight: 700;
  padding: 0 4px 8px;
  line-height: 1.35;
}
/* On a table wider than the screen the caption stays in view and wraps to
   the visible width instead of scrolling off with the columns. */
.sat-data-table caption > .sat-caption-text {
  display: block;
  position: sticky;
  left: 0;
  max-width: calc(100cqw - 8px);  /* minus the caption's own side padding */
}

.sat-data-table th,
.sat-data-table td {
  border: 1px solid #8a8f98;
  padding: 7px 12px;
  vertical-align: top;
  text-align: left;
  min-width: 3.5em;
  overflow-wrap: normal;
  word-break: normal;
}

.sat-data-table thead th {
  background: #f1f3f5;
  font-weight: 700;
  vertical-align: bottom;
}

/* Two-way tables: first column holds row labels. */
.sat-data-table tbody th[scope="row"] {
  font-weight: 700;
  background: #fafbfc;
}
.sat-data-table .sat-corner {
  background: #fff;
}

.sat-data-table .sat-al-left   { text-align: left; }
.sat-data-table .sat-al-right  { text-align: right; }
.sat-data-table .sat-al-center { text-align: center; }

/* Math inside cells keeps its own size and doesn't wrap mid-expression. */
.sat-data-table .katex { font-size: 1.05em; white-space: nowrap; }

@media (max-width: 640px) {
  .sat-data-table th,
  .sat-data-table td { padding: 6px 9px; }
}

/* Print: no scroll box, keep the table together. */
@media print {
  .sat-data-table-wrap { overflow: visible; }
  .sat-data-table { page-break-inside: avoid; }
}