/* Completion Tables — app chrome (colours via tokens only) */

:root {
  --cg-given-bg: var(--sm-indigo-light);
  --cg-given-text: var(--sm-text);
  --cg-hidden-bg: var(--sm-canvas-bg);
  --cg-revealed-bg: var(--sm-canvas-bg);
  --cg-header-bg: var(--sm-indigo);
  --cg-header-text: var(--sm-surface);
  --cg-row-header-bg: var(--sm-bg);
  --cg-row-header-text: var(--sm-text-muted);
  --cg-cell-border: var(--sm-border);
  --cg-sidebar-width: 220px;
  /* Clears fixed .sm-help-btn (top: canvas + 8px, ~34px tall) + gap */
  --cg-below-help-spacer: calc(8px + 2.125rem + 10px);
  /* Inset only on the rightmost column so the table can use full canvas width */
  --cg-help-col-inset: clamp(3.25rem, 6vw, 4.75rem);
}

[data-theme="dark"] {
  --cg-given-bg: #334155;
  --cg-given-text: var(--sm-text);
  --cg-hidden-bg: var(--sm-canvas-bg);
  --cg-revealed-bg: var(--sm-canvas-bg);
  --cg-header-bg: color-mix(in srgb, var(--sm-indigo) 42%, var(--sm-text));
  --cg-header-text: var(--sm-indigo-light);
  --cg-row-header-bg: #1e293b;
  --cg-row-header-text: #94a3b8;
  --cg-cell-border: #475569;
}

.cg-select {
  padding: 24px 20px 40px;
  max-width: 960px;
  margin: 0 auto;
}

.cg-select-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--sm-text);
  margin: 0 0 24px;
}

.cg-strand-heading {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sm-text-muted);
  margin: 20px 0 10px;
}

.cg-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.cg-card {
  display: block;
  box-sizing: border-box;
  padding: 12px 16px;
  background: var(--sm-surface);
  border: 1px solid var(--sm-border);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  font-weight: 600;
  font-family: var(--sm-font);
  font-size: 0.95rem;
  color: var(--sm-text);
  min-height: 44px;
}

.cg-card:hover {
  border-color: var(--sm-indigo);
  color: var(--sm-indigo);
}

/* Fill framework canvas; children share vertical space */
#app.sm-app-canvas {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#app.sm-app-canvas > #cg-select,
#app.sm-app-canvas > #cg-grid-view {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

#cg-grid-view.sm-layout {
  --sm-sidebar-width: 220px;
  min-height: 0;
}

.cg-sidebar {
  padding: 10px 12px 60px;
  gap: 6px;
  min-height: 0;
}

.cg-grid-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  width: 100%;
  align-self: stretch;
  padding-top: var(--cg-below-help-spacer);
  padding-right: max(10px, env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

/* When a header note is present it sits alongside the help button,
   so only a small top gap is needed rather than the full clearance */
.cg-grid-main.cg-has-note {
  padding-top: 8px;
}

.cg-grid-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  /* Help button is fixed top-right; inset on this edge keeps table columns equal */
  padding: 0 max(10px, env(safe-area-inset-right, 0px), var(--cg-help-col-inset))
    calc(16px + 52px) max(10px, env(safe-area-inset-left, 0px));
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  container-type: size;
  container-name: cg-grid;
}


.cg-table {
  border-collapse: collapse;
  font-family: var(--sm-font);
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  height: 100%;
  align-self: stretch;
  /* Base size; data cells use larger classroom scale below */
  font-size: 1rem;
  line-height: 1.35;
  /* Set in JS from visible column count — scales column header type */
  --cg-col-count: 1;
}

.cg-table tbody {
  height: 100%;
}

/* Equal row stretch when table is taller than content (common engine quirk) */
.cg-table tbody tr {
  height: 1%;
}

.cg-grid-area > .cg-empty-msg {
  flex: 1 1 auto;
  align-self: center;
  margin: auto 0;
}

.cg-table th,
.cg-table td {
  border: 1px solid var(--cg-cell-border);
  /* Tighter vertical padding so more rows fit; horizontal unchanged for readability */
  padding-block: clamp(2px, 0.35vmin + 1px, 8px);
  padding-inline: clamp(8px, 1.2vmin + 6px, 18px);
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;
}

.cg-table th.cg-corner,
.cg-table th.cg-row-header {
  width: clamp(2.6rem, 0.35rem + 5.5vmin, 4.25rem);
  min-width: clamp(2.6rem, 0.35rem + 5.5vmin, 4.25rem);
  max-width: clamp(2.75rem, 0.5rem + 6.5vmin, 4.75rem);
}

/* Classroom-readable body cells (separate from scaled column headers) */
.cg-table th.cg-row-header,
.cg-table td.cg-cell {
  font-size: clamp(1.05rem, 0.55rem + 2.4vmin, 2rem);
}

/* Tighter header row than data cells (overridden again inside @supports for CQ layouts) */
.cg-table thead th.cg-corner,
.cg-table thead th.cg-col-header {
  padding: clamp(2px, 0.25vmin + 2px, 6px) clamp(3px, 0.4vmin + 3px, 9px);
}

@supports (font-size: 1cqmin) {
  .cg-table th.cg-row-header,
  .cg-table td.cg-cell {
    font-size: clamp(1.05rem, 0.45rem + 3.2cqmin, 2.15rem);
  }

  .cg-table th,
  .cg-table td {
    padding-block: clamp(2px, 0.06rem + 0.42cqmin, 8px);
    padding-inline: clamp(8px, 0.4rem + 1.8cqmin, 20px);
  }

  .cg-table th.cg-corner,
  .cg-table th.cg-row-header {
    width: clamp(2.6rem, 0.3rem + 7cqmin, 4.5rem);
    min-width: clamp(2.6rem, 0.3rem + 7cqmin, 4.5rem);
    max-width: clamp(2.75rem, 0.45rem + 8.5cqmin, 5rem);
  }

  .cg-header-note {
    font-size: clamp(0.95rem, 0.45rem + 2.2cqmin, 1.4rem);
  }

  .cg-header-note.cg-header-title {
    font-size: clamp(1.05rem, 0.5rem + 2.2cqmin, 1.45rem);
  }

  /* Width-aware header type (tracks grid area, not viewport alone) */
  .cg-col-header {
    font-size: clamp(0.55rem, calc(15cqw / var(--cg-col-count, 1)), 1.22rem);
  }

  .cg-table thead th.cg-corner,
  .cg-table thead th.cg-col-header {
    padding: clamp(2px, 0.1rem + 0.38cqmin, 7px)
      clamp(3px, 0.14rem + 0.55cqmin, 10px);
  }
}

.cg-table th.cg-col-header,
.cg-table td.cg-cell {
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
}

.cg-table td.cg-cell {
  word-wrap: break-word;
}

.cg-col-header {
  background: var(--cg-header-bg);
  color: var(--cg-header-text);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  /* Allow intentional line breaks in topic labels (e.g. circles: "Area of" / "Semicircle") */
  white-space: pre-line;
  text-wrap: balance;
  line-height: 1.2;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
  /* Shrink with many columns so row height stays compact (vmin fallback if no CQ units) */
  font-size: clamp(0.55rem, calc(14vmin / var(--cg-col-count, 1)), 1.22rem);
  max-width: 100%;
  box-sizing: border-box;
}

/* KaTeX cells: centred wrapper; JS scales .katex to fit width and height */
.cg-table td.cg-cell.cg-cell-math {
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  word-wrap: normal;
  overflow-wrap: normal;
}

.cg-table td.cg-cell.cg-cell-math .cg-katex-wrap {
  display: inline-block;
  vertical-align: middle;
}

.cg-table td.cg-cell.cg-cell-svg {
  text-align: center;
  vertical-align: middle;
  padding: 6px 4px;
  max-height: 68px;
}

.cg-table td.cg-cell.cg-cell-svg svg {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 56px;
}

.cg-table td.cg-cell.cg-cell-math .cg-katex-wrap .katex {
  line-height: 1.2;
}

.cg-row-header {
  background: var(--cg-row-header-bg);
  color: var(--cg-row-header-text);
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  position: sticky;
  left: 0;
  z-index: 1;
}

.cg-cell.cg-given {
  background: var(--cg-given-bg);
  color: var(--cg-given-text);
  font-weight: 600;
}

.cg-cell.cg-hidden {
  background: var(--cg-hidden-bg);
  cursor: pointer;
  min-height: 0;
}

.cg-cell.cg-revealed {
  background: var(--cg-revealed-bg);
  color: var(--sm-text);
}

.cg-corner {
  background: var(--cg-header-bg);
}

.cg-header-note {
  flex-shrink: 0;
  text-align: center;
  margin: 0 0 10px;
  font-size: clamp(0.95rem, 0.5rem + 1.8vmin, 1.35rem);
  color: var(--sm-text);
  padding: 0 8px;
  padding-inline-end: max(8px, var(--cg-help-col-inset));
  width: 100%;
  box-sizing: border-box;
}

/* Topic title above grid when topic has no headerNote (see quadratics for headerNote-only). */
.cg-header-note.cg-header-title {
  font-weight: 800;
  font-size: clamp(1.05rem, 0.55rem + 2vmin, 1.45rem);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.cg-header-note .katex {
  font-size: 1em;
}

.cg-cell .katex {
  font-size: 1em;
}

.cg-empty-msg {
  padding: 24px;
  text-align: center;
  color: var(--sm-text-muted);
  font-size: 0.95rem;
  width: 100%;
  box-sizing: border-box;
}

.cg-sb-group {
  margin-bottom: 6px;
}

.cg-sb-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sm-text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.cg-sb-divider {
  height: 1px;
  background: var(--sm-border);
  margin: 6px 0;
}

.cg-sb-btn {
  display: block;
  width: 100%;
  padding: 6px 8px;
  margin-bottom: 4px;
  border: 1px solid var(--sm-border);
  border-radius: 4px;
  background: var(--sm-surface);
  color: var(--sm-text);
  cursor: pointer;
  font-size: 0.85rem;
  font-family: var(--sm-font);
  text-align: center;
  min-height: 36px;
}

.cg-sb-btn:hover {
  border-color: var(--sm-indigo);
  color: var(--sm-indigo);
}

.cg-sb-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0;
  font-size: 0.85rem;
  color: var(--sm-text);
  cursor: pointer;
  min-height: 30px;
}

.cg-sb-checkbox span {
  white-space: pre-line;
}

.cg-sb-checkbox input {
  width: 18px;
  height: 18px;
}

.cg-sb-spinner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.cg-sb-spinner input[type="number"] {
  width: 56px;
  padding: 6px;
  border: 1px solid var(--sm-border);
  border-radius: 4px;
  text-align: center;
  font-size: 0.85rem;
  font-family: var(--sm-font);
  background: var(--sm-canvas-bg);
  color: var(--sm-text);
}

.cg-sb-radio-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.cg-sb-radio-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--sm-text);
  cursor: pointer;
  min-height: 30px;
}

@media (max-width: 640px) {
  .cg-table th.cg-corner,
  .cg-table th.cg-row-header {
    width: 2.25rem;
    min-width: 2.25rem;
    max-width: 2.75rem;
  }
}

/* ── Pupil mode ──────────────────────────────────────────────────────────── */

/* Cells need a positioning context for the attempt badge */
.cg-table td.cg-cell {
  position: relative;
}

.cg-pupil-input-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-width: 0;
}

/* Text input rendered inside hidden cells */
.cg-pupil-input {
  display: block;
  width: 100%;
  border: none;
  border-bottom: 2px solid var(--sm-border);
  background: transparent;
  text-align: center;
  font-family: var(--sm-font);
  font-size: inherit;
  color: var(--sm-text);
  outline: none;
  padding: 4px 2px;
  min-width: 0;
  box-sizing: border-box;
  caret-color: var(--sm-indigo);
}

/* Live KaTeX hint: rem clamp so it stays legible and does not inherit the cell’s huge type */
.cg-pupil-katex-preview {
  min-height: 0;
  text-align: center;
  font-size: clamp(0.76rem, 0.64rem + 0.45vmin, 0.95rem);
  color: var(--sm-text-muted);
  line-height: 1.08;
  overflow: hidden;
  padding: 0 2px;
}

.cg-pupil-katex-preview:empty {
  display: none;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.cg-pupil-katex-preview:not(:empty) {
  display: block;
  margin-top: 3px;
}

.cg-pupil-katex-preview .katex {
  font-size: 1em;
  line-height: 1;
  color: var(--sm-text-muted);
}

.cg-pupil-katex-preview .katex-html {
  line-height: 1;
}

.cg-pupil-katex-preview .katex .base {
  padding-top: 0;
  padding-bottom: 0;
}

.cg-pupil-input:focus {
  border-bottom-color: var(--sm-indigo);
  background: color-mix(in srgb, var(--sm-indigo-light) 50%, transparent);
}

/* Feedback colours after Check Answers */
.cg-cell.cg-pupil-correct {
  background: var(--sm-correct-bg);
  color: var(--sm-correct);
  font-weight: 600;
}

.cg-cell.cg-pupil-incorrect {
  background: var(--sm-incorrect-bg);
}

.cg-cell.cg-pupil-incorrect .cg-pupil-input {
  border-bottom-color: var(--sm-incorrect);
}

/* Attempt count badge — top-right corner of cell */
.cg-attempt-badge {
  position: absolute;
  top: 2px;
  right: 3px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--sm-text-muted);
  color: var(--sm-surface);
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 15px;
  text-align: center;
  pointer-events: none;
  font-family: var(--sm-font);
}

.cg-cell.cg-pupil-correct .cg-attempt-badge {
  background: var(--sm-correct);
}

.cg-cell.cg-pupil-incorrect .cg-attempt-badge {
  background: var(--sm-incorrect);
}

/* Check Answers bar below the grid table */
.cg-pupil-controls {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 0 4px;
  flex-wrap: wrap;
}

.cg-check-btn {
  padding: 0 20px;
  background: var(--sm-indigo);
  color: var(--sm-surface);
  border: none;
  border-radius: 6px;
  font-family: var(--sm-font);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}

.cg-check-btn:hover {
  background: var(--sm-indigo-hover);
}

.cg-math-keys-btn {
  padding: 0 16px;
  min-height: 44px;
  border: 1.5px solid var(--sm-border);
  border-radius: 6px;
  background: var(--sm-surface);
  color: var(--sm-text);
  font-family: var(--sm-font);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--sm-transition-fast),
    border-color var(--sm-transition-fast),
    color var(--sm-transition-fast);
}

.cg-math-keys-btn:hover {
  border-color: var(--sm-indigo);
  background: var(--sm-indigo-light);
  color: var(--sm-indigo);
}

.cg-math-keys-btn-active {
  border-color: var(--sm-indigo);
  background: color-mix(in srgb, var(--sm-indigo-light) 70%, var(--sm-surface));
  color: var(--sm-indigo);
}

.cg-score {
  font-size: 1rem;
  font-weight: 600;
  color: var(--sm-text);
}

/* Name-prompt modal (reuses sm-notes-overlay/modal shell from sm-drawer.css) */
.cg-name-input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--sm-border);
  border-radius: 6px;
  font-family: var(--sm-font);
  font-size: 1rem;
  background: var(--sm-canvas-bg);
  color: var(--sm-text);
  box-sizing: border-box;
  margin-bottom: 14px;
  outline: none;
}

.cg-name-input:focus {
  border-color: var(--sm-indigo);
}

.cg-name-btns {
  display: flex;
  justify-content: flex-end;
}

.cg-name-btn {
  padding: 0 24px;
  border: none;
  border-radius: 6px;
  font-family: var(--sm-font);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}

.cg-name-ok {
  background: var(--sm-indigo);
  color: var(--sm-surface);
}

.cg-name-ok:hover {
  background: var(--sm-indigo-hover);
}

/* Export header — injected above the grid during PNG capture */
.cg-export-header {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px 9px;
  border-bottom: 2px solid var(--sm-border);
  margin-bottom: 10px;
  flex-shrink: 0;
  background: var(--sm-canvas-bg);
}

.cg-export-topic {
  font-size: 1rem;
  font-weight: 700;
  color: var(--sm-text);
}

.cg-export-meta {
  font-size: 0.82rem;
  color: var(--sm-text-muted);
  font-weight: 500;
}

/* Static text substituted for <input> elements during capture */
.cg-export-answer {
  display: block;
  width: 100%;
  text-align: center;
  font-family: var(--sm-font);
  font-size: inherit;
  color: inherit;
  line-height: 1.35;
}

.cg-export-answer .katex {
  font-size: inherit;
  color: inherit;
}

/* ── Pupil shared mode: denser grid (smaller type + padding, tighter input stack) ── */

#app.cg-pupil-mode .cg-header-note {
  font-size: clamp(0.82rem, 0.38rem + 1.6vmin, 1.15rem);
  padding: 12px 16px 8px;
  line-height: 1.2;
}

#app.cg-pupil-mode .cg-header-note.cg-header-title {
  font-size: clamp(0.88rem, 0.42rem + 1.65vmin, 1.22rem);
}

#app.cg-pupil-mode .cg-table {
  font-size: 0.9rem;
  line-height: 1.2;
}

#app.cg-pupil-mode .cg-table th,
#app.cg-pupil-mode .cg-table td {
  padding-block: clamp(1px, 0.22vmin + 0px, 5px);
  padding-inline: clamp(5px, 0.9vmin + 4px, 14px);
}

#app.cg-pupil-mode .cg-table th.cg-row-header,
#app.cg-pupil-mode .cg-table td.cg-cell {
  font-size: clamp(0.88rem, 0.42rem + 1.65vmin, 1.42rem);
}

#app.cg-pupil-mode .cg-col-header {
  font-size: clamp(0.48rem, calc(11vmin / var(--cg-col-count, 1)), 1.02rem);
  line-height: 1.12;
}

#app.cg-pupil-mode .cg-table thead th.cg-corner,
#app.cg-pupil-mode .cg-table thead th.cg-col-header {
  padding: clamp(1px, 0.18vmin + 1px, 4px) clamp(2px, 0.3vmin + 2px, 7px);
}

#app.cg-pupil-mode .cg-pupil-input-wrap {
  gap: 0;
}

#app.cg-pupil-mode .cg-pupil-input {
  padding: 0 1px 1px;
  /* Slightly below cell clamp so the answer line does not dominate the row */
  font-size: clamp(0.78rem, 0.34rem + 1.35vmin, 1.05rem);
  line-height: 1.12;
}

/* Slightly under the input line (~0.78–1.05rem) but still easy to read */
#app.cg-pupil-mode .cg-pupil-katex-preview:not(:empty) {
  font-size: clamp(0.72rem, 0.58rem + 0.55vmin, 0.9rem);
  line-height: 1.1;
}

#app.cg-pupil-mode .cg-pupil-katex-preview .katex {
  font-size: 1em;
}

#app.cg-pupil-mode .cg-table td.cg-cell.cg-cell-math .cg-katex-wrap .katex {
  line-height: 1.1;
}

#app.cg-pupil-mode .cg-pupil-controls {
  padding: 6px 0 2px;
  gap: 10px;
}

#app.cg-pupil-mode .cg-check-btn {
  font-size: 0.88rem;
  min-height: 40px;
  padding: 0 16px;
}

#app.cg-pupil-mode .cg-math-keys-btn {
  font-size: 0.82rem;
  min-height: 40px;
  padding: 0 12px;
}

#app.cg-pupil-mode .cg-score {
  font-size: 0.9rem;
}

@supports (font-size: 1cqmin) {
  #app.cg-pupil-mode .cg-header-note {
    font-size: clamp(0.82rem, 0.35rem + 1.85cqmin, 1.18rem);
  }

  #app.cg-pupil-mode .cg-header-note.cg-header-title {
    font-size: clamp(0.88rem, 0.38rem + 1.9cqmin, 1.25rem);
  }

  #app.cg-pupil-mode .cg-table th.cg-row-header,
  #app.cg-pupil-mode .cg-table td.cg-cell {
    font-size: clamp(0.88rem, 0.38rem + 2.35cqmin, 1.48rem);
  }

  #app.cg-pupil-mode .cg-table th,
  #app.cg-pupil-mode .cg-table td {
    padding-block: clamp(1px, 0.04rem + 0.28cqmin, 5px);
    padding-inline: clamp(5px, 0.32rem + 1.35cqmin, 15px);
  }

  #app.cg-pupil-mode .cg-col-header {
    font-size: clamp(0.48rem, calc(12cqw / var(--cg-col-count, 1)), 1.05rem);
  }

  #app.cg-pupil-mode .cg-table thead th.cg-corner,
  #app.cg-pupil-mode .cg-table thead th.cg-col-header {
    padding: clamp(1px, 0.08rem + 0.28cqmin, 5px)
      clamp(2px, 0.1rem + 0.42cqmin, 8px);
  }
}