/* ==========================================================================
   TAFS — Teach and Feel STEM
   Shared visual language for the student-facing mobile screens.
   Pure CSS, no JS. Loaded from layout.erb.
   ========================================================================== */

:root {
  /* Brand */
  --tafs-ink:        #22263a;
  --tafs-ink-soft:   #616a80;
  --tafs-ink-faint:  #9aa1b3;

  --tafs-primary:    #5566cc;
  --tafs-primary-dk: #44529f;
  --tafs-accent:     #e8785c;
  --tafs-mint:       #3aab97;
  --tafs-sun:        #e8b64a;

  --tafs-surface:    #ffffff;
  --tafs-surface-2:  #f6f7fa;
  --tafs-line:       #e4e6ee;

  /* Shape & depth */
  --tafs-radius:     10px;
  --tafs-radius-sm:  8px;
  --tafs-radius-pill: 999px;

  --tafs-shadow-sm:  0 1px 2px rgba(34, 38, 58, .05);
  --tafs-shadow-md:  0 1px 2px rgba(34, 38, 58, .04),
                     0 6px 18px rgba(34, 38, 58, .07);

  --tafs-gap:        18px;
}


/*ALTERNATIVE COLORS 1*/
:root {
  /* Brand — Notebook */
  --tafs-ink:        #1f2a2e;
  --tafs-ink-soft:   #56656b;
  --tafs-ink-faint:  #95a2a6;

  --tafs-primary:    #1f7a78;
  --tafs-primary-dk: #175e5c;
  --tafs-accent:     #d9573b;
  --tafs-mint:       #4c9f5a;
  --tafs-sun:        #e3a93b;

  --tafs-surface:    #fffdf8;
  --tafs-surface-2:  #f7f3ea;
  --tafs-line:       #e8e1d2;
}

:zroot {
  /* Brand — Plum and chalk */
  --tafs-ink:        #1e1b2e;
  --tafs-ink-soft:   #5f5a75;
  --tafs-ink-faint:  #a09bb3;

  --tafs-primary:    #6b4fd8;
  --tafs-primary-dk: #5439b8;
  --tafs-accent:     #f06b8a;
  --tafs-mint:       #2fa88a;
  --tafs-sun:        #f2b53d;

  --tafs-surface:    #ffffff;
  --tafs-surface-2:  #f7f5fc;
  --tafs-line:       #e6e2f1;
}

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Rubik",
               "Helvetica Neue", Arial, sans-serif;
  color: var(--tafs-ink);
  background: #f3f4f7;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* The phone-sized card every student screen lives in. */
.tafs_mobile,
.mobile_tafs {
  box-sizing: border-box;
  position: relative;
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 22px 20px 32px;
  font-size: 17px;
  line-height: 1.5;
  background: #ffffff;
  border: 0;
  box-shadow: var(--tafs-shadow-md);
}

@media (min-width: 520px) {
  .tafs_mobile,
  .mobile_tafs {
    margin-top: 24px;
    margin-bottom: 24px;
    min-height: calc(100vh - 48px);
    border-radius: 10px;
  }
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.tafs_mobile h1 {
  margin: 0 0 6px;
  font-size: 26px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.02em;
}

.tafs_mobile h2 {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 700;
}

.tafs-sub {
  margin: 0;
  color: var(--tafs-ink-soft);
  font-size: 15px;
}

.tafs-eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  padding: 5px 12px;
  border-radius: var(--tafs-radius-pill);
  background: rgba(85, 102, 204, .10);
  color: var(--tafs-primary-dk);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.tafs-name {
  color: var(--tafs-primary);
}

/* --------------------------------------------------------------------------
   Header / logo
   -------------------------------------------------------------------------- */

.tafs-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
}

.tafs-brand-mark {
  width: 54px;
  flex: 0 0 54px;
  height: auto;
}

.tafs-brand-name {
  font-weight: 800;
  letter-spacing: .04em;
  font-size: 15px;
}

.tafs-brand-tag {
  display: block;
  color: var(--tafs-ink-faint);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.tafs-card {
  margin-bottom: var(--tafs-gap);
  padding: 18px;
  border: 1px solid var(--tafs-line);
  border-radius: var(--tafs-radius);
  background: var(--tafs-surface);
  box-shadow: var(--tafs-shadow-sm);
}

.tafs-card-hero {
  border: 0;
  background: var(--tafs-primary);
  color: #fff;
  box-shadow: var(--tafs-shadow-sm);
}

.tafs-card-hero h1 { color: #fff; }
.tafs-card-hero .tafs-sub,
.tafs-card-hero .tafs-name { color: rgba(255, 255, 255, .85); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.tafs-btn,
.tafs_mobile button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 14px 22px;
  border: 0;
  border-radius: var(--tafs-radius-pill);
  background: var(--tafs-primary);
  color: #fff;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.tafs-btn:hover,
.tafs_mobile button:hover {
  background: var(--tafs-primary-dk);
  box-shadow: none;
}

.tafs-btn:active,
.tafs_mobile button:active {
  transform: translateY(1px);
  box-shadow: none;
}

.tafs-btn-block {
  display: flex;
  width: 100%;
}

/* Variants are written as .tafs-btn.<variant> so they outrank the
   base `.tafs_mobile button` rule above. */
.tafs-btn.tafs-btn-ghost {
  background: var(--tafs-surface);
  color: var(--tafs-primary-dk);
  border: 1.5px solid var(--tafs-line);
  box-shadow: none;
  background: transparent;
  border: none;
}

.tafs-btn.tafs-btn-ghost:hover {
  background: var(--tafs-surface-2);
  border-color: #d6d9e4;
  box-shadow: none;
}

.tafs-btn.tafs-btn-on-hero {
  background: #fff;
  color: var(--tafs-primary-dk);
  box-shadow: none;
}

.tafs-btn.tafs-btn-on-hero:hover {
  background: #f4f4ff;
  color: var(--tafs-primary-dk);
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.tafs-field {
  display: block;
  margin-bottom: 16px;
}

.tafs-field:last-child { margin-bottom: 0; }

.tafs-field-label {
  display: block;
  margin-bottom: 7px;
  color: var(--tafs-ink-soft);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .01em;
}

.tafs-field-icon {
  margin-inline-start: 5px;
  font-size: 13px;
}

.tafs-field-hint {
  display: block;
  margin-top: 6px;
  color: var(--tafs-ink-faint);
  font-size: 12px;
  line-height: 1.4;
}

.tafs-field-narrow input { max-width: 110px; }

/* Big choice buttons (grade, gender) ---------------------------------------- */

.tafs-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tafs-choice-opt {
  flex: 1 1 auto;
  min-width: 74px;
}

.tafs-choice-opt input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.tafs-choice-opt span {
  display: block;
  padding: 14px 12px;
  border: 1.5px solid var(--tafs-line);
  border-radius: var(--tafs-radius-sm);
  background: var(--tafs-surface-2);
  color: var(--tafs-ink-soft);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}

.tafs-choice-opt input:checked + span {
  border-color: var(--tafs-primary);
  background: #fff;
  color: var(--tafs-primary-dk);
  box-shadow: 0 0 0 3px rgba(85, 102, 204, .14);
}

.tafs-choice-opt input:focus-visible + span { border-color: var(--tafs-primary); }

.tafs_mobile input[type="text"],
.tafs_mobile input:not([type]),
.tafs_mobile input[type="email"],
.tafs_mobile input[type="number"],
.tafs_mobile input[type="date"],
.tafs_mobile select,
.tafs_mobile textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--tafs-line);
  border-radius: var(--tafs-radius-sm);
  background: var(--tafs-surface-2);
  color: var(--tafs-ink);
  font: inherit;
  font-size: 16px; /* keeps iOS from zooming on focus */
  transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}

.tafs_mobile input:focus,
.tafs_mobile select:focus,
.tafs_mobile textarea:focus {
  outline: 0;
  border-color: var(--tafs-primary);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(85, 102, 204, .14);
}

.tafs_mobile input::placeholder { color: var(--tafs-ink-faint); }

/* Inherently LTR data stays LTR even on an RTL page. */
.tafs_mobile input[type="email"],
.tafs_mobile input[type="number"],
.tafs_mobile input[type="tel"],
.tafs_mobile input[type="date"] {
  direction: ltr;
  text-align: start;
}

/* Feelings sliders — "thermometer" style ------------------------------------ */

.tafs-scale {
  margin-bottom: 20px;
  padding: 16px;
  zborder: 1px solid var(--tafs-line);
  border-radius: var(--tafs-radius);
  zbackground: var(--tafs-surface-2);
}

.tafs-scale:last-child { margin-bottom: 0; }

.tafs-scale-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  font-size: 15.5px;
  font-weight: 700;
}

.tafs-scale-emoji { font-size: 21px; line-height: 1; }

.tafs-scale-note {
  display: block;
  margin-top: 3px;
  color: var(--tafs-ink-faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}

.tafs-scale input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 12px;
  margin: 0;
  border-radius: var(--tafs-radius-pill);
  background: linear-gradient(90deg, #e4e6ee, var(--tafs-sun) 55%, var(--tafs-mint));
  cursor: pointer;
}

/* For questions where "more" is the uncomfortable end (fear, stress). */
.tafs-scale-warm input[type="range"] {
  background: linear-gradient(90deg, #e4e6ee, var(--tafs-sun) 55%, var(--tafs-accent));
}

.tafs-scale input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--tafs-primary);
  box-shadow: 0 2px 8px rgba(29, 36, 64, .28);
}

.tafs-scale input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--tafs-primary);
  box-shadow: 0 2px 8px rgba(29, 36, 64, .28);
}

.tafs-scale input[type="range"]:focus {
  outline: 0;
  box-shadow: 0 0 0 4px rgba(85, 102, 204, .16);
}

.tafs-scale input[type="range"].tafs-untouched {
  background: #e4e6ee;
}

.tafs-scale input[type="range"].tafs-untouched::-webkit-slider-thumb {
  background: #c7cad8;
  box-shadow: none;
}

.tafs-scale input[type="range"].tafs-untouched::-moz-range-thumb {
  background: #c7cad8;
  box-shadow: none;
}

.tafs-scale-missing {
  border-color: var(--tafs-accent);
}

.tafs-scale-missing::after {
  content: 'צריך לבחור ערך';
  display: block;
  margin-top: 8px;
  color: var(--tafs-accent);
  font-size: 12.5px;
  font-weight: 700;
}

.tafs-scale-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  padding: 0 2px;
  color: var(--tafs-ink-faint);
  font-size: 12px;
  font-weight: 700;
}

.tafs-scale-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 9px;
  color: var(--tafs-ink-faint);
  font-size: 12.5px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Bits & pieces
   -------------------------------------------------------------------------- */

.tafs-steps {
  display: flex;
  gap: 6px;
  margin-bottom: 22px;
}

.tafs-step {
  height: 5px;
  flex: 1;
  border-radius: var(--tafs-radius-pill);
  background: var(--tafs-line);
}

.tafs-step-on { background: var(--tafs-primary); }

.tafs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.tafs-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid var(--tafs-line);
  font-size: 15.5px;
  color: var(--tafs-ink-soft);
}

.tafs-list li:last-child { border-bottom: 0; }

.tafs-list-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 8px;
  background: var(--tafs-surface-2);
  font-size: 17px;
}

.tafs-footnote {
  margin: 16px 0 0;
  color: var(--tafs-ink-faint);
  font-size: 13px;
  text-align: center;
}

.tafs-actions {
  margin-top: 22px;
}

/* --------------------------------------------------------------------------
   Teacher view — desktop dashboard
   -------------------------------------------------------------------------- */

/* One knob for text size on the teacher screens: every .t-/.ts-/.s1-/.s2-
   font-size is multiplied by it. */
:root { --teacher-fs: 1.15; }

.teacher-page {
  padding: 24px 22px 60px;
  color: var(--tafs-ink);
}

.t-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.t-head h1 {
  margin: 0 0 4px;
  font-size: calc(30px * var(--teacher-fs));
  font-weight: 800;
  letter-spacing: -.02em;
}

.t-summary {
  display: flex;
  gap: 10px;
}

.t-summary-item {
  min-width: 92px;
  padding: 12px 16px;
  border: 1px solid var(--tafs-line);
  border-radius: var(--tafs-radius-sm);
  background: var(--tafs-surface);
  text-align: center;
  box-shadow: var(--tafs-shadow-sm);
}

.t-summary-value {
  display: block;
  font-size: calc(24px * var(--teacher-fs));
  font-weight: 800;
  letter-spacing: -.02em;
}

.t-summary-label {
  display: block;
  margin-top: 2px;
  color: var(--tafs-ink-faint);
  font-size: calc(11px * var(--teacher-fs));
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* AI tips box ---------------------------------------------------------------- */

.t-tips {
  margin-bottom: 22px;
  padding: 20px 22px 8px;
  border: 1px solid #e4e6ee;
  border-radius: var(--tafs-radius);
  background: var(--tafs-surface);
  box-shadow: var(--tafs-shadow-sm);
}

.t-tips-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--tafs-line);
}

.t-tips-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 8px;
  background: var(--tafs-primary);
  font-size: calc(18px * var(--teacher-fs));
  box-shadow: none;
}

.t-tips-head > div { flex: 1; min-width: 0; }

.t-tips h2 {
  margin: 1px 0 2px;
  font-size: calc(19px * var(--teacher-fs));
  font-weight: 800;
}

.t-tips-sub {
  margin: 0;
  color: var(--tafs-ink-soft);
  font-size: calc(14px * var(--teacher-fs));
}

.t-tips-badge {
  flex: 0 0 auto;
  padding: 5px 11px;
  border-radius: var(--tafs-radius-pill);
  background: rgba(85, 102, 204, .11);
  color: var(--tafs-primary-dk);
  font-size: calc(11px * var(--teacher-fs));
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.t-tips-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 4px 26px;
}

.t-tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
}

.t-tip-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 10px;
  background: var(--tafs-surface-2);
  font-size: calc(15px * var(--teacher-fs));
}

.t-tip-body { flex: 1; min-width: 0; }

.t-tip-kind {
  display: inline-block;
  margin-bottom: 4px;
  color: var(--tafs-ink-faint);
  font-size: calc(10.5px * var(--teacher-fs));
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.t-tip-title {
  margin-bottom: 3px;
  font-size: calc(15.5px * var(--teacher-fs));
  font-weight: 800;
  line-height: 1.3;
}

.t-tip-text {
  margin: 0;
  color: var(--tafs-ink-soft);
  font-size: calc(14px * var(--teacher-fs));
  line-height: 1.5;
}

.t-pairs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 11px;
}

.t-pair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--tafs-line);
  border-radius: var(--tafs-radius-pill);
  background: var(--tafs-surface-2);
  font-size: calc(13px * var(--teacher-fs));
  font-weight: 700;
}

.t-pair-plus { color: var(--tafs-ink-faint); font-weight: 600; }

/* --------------------------------------------------------------------------
   Teacher — the student list. One student per row; the row is a <details>,
   so clicking it expands to the full answer log, questionnaire and controls.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Teacher — the recommendations strip above the table. One line per thing the
   teacher could do now; each one is dismissed with the x on its end.
   -------------------------------------------------------------------------- */

.ts-recs {
  margin-bottom: 14px;
  border: 1px solid var(--tafs-line);
  border-radius: var(--tafs-radius);
  background: var(--tafs-surface);
  box-shadow: var(--tafs-shadow-sm);
  overflow: hidden;
}

/* The header is the toggle: closed, it is the whole strip. */
.ts-recs-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--tafs-surface-2);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.ts-recs-head::-webkit-details-marker { display: none; }
.ts-recs-head:hover { background: #eceef7; }
.ts-recs[open] .ts-recs-head { border-bottom: 1px solid var(--tafs-line); }

.ts-recs-badge { margin-inline-start: auto; }

.ts-recs-caret {
  flex: 0 0 auto;
  color: var(--tafs-ink-faint);
  font-size: calc(10px * var(--teacher-fs));
  transition: transform .14s ease;
}

.ts-recs-caret::after { content: '\25BE'; }
.ts-recs[open] .ts-recs-caret { transform: rotate(180deg); }

.ts-recs-title {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: calc(13.5px * var(--teacher-fs));
  font-weight: 800;
}

.ts-recs-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--tafs-radius-pill);
  background: var(--tafs-primary);
  color: #fff;
  font-size: calc(11px * var(--teacher-fs));
  font-weight: 800;
}

.ts-recs-badge {
  color: var(--tafs-ink-faint);
  font-size: calc(10.5px * var(--teacher-fs));
  font-weight: 700;
  letter-spacing: .02em;
}

.ts-recs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ts-rec {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--tafs-surface-2);
  font-size: calc(13px * var(--teacher-fs));
  line-height: 1.4;
}

.ts-rec:last-child { border-bottom: 0; }
.ts-rec:hover { background: #fbfbff; }

.ts-rec-emoji {
  flex: 0 0 auto;
  font-size: calc(15px * var(--teacher-fs));
}

.ts-rec-kind {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: var(--tafs-radius-pill);
  background: rgba(85, 102, 204, .10);
  color: var(--tafs-primary-dk);
  font-size: calc(10.5px * var(--teacher-fs));
  font-weight: 800;
  white-space: nowrap;
}

.ts-rec-text {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--tafs-ink);
  font-weight: 600;
}

/* Dismiss. Quiet until the line is hovered - the text is the point, not the x. */
.ts-rec-x {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--tafs-ink-faint);
  font: inherit;
  font-size: calc(17px * var(--teacher-fs));
  line-height: 1;
  opacity: .45;
  cursor: pointer;
}

.ts-rec:hover .ts-rec-x { opacity: 1; }
.ts-rec-x:hover { background: var(--tafs-surface-2); color: var(--tafs-ink); }

.ts-recs-empty {
  margin: 0;
  padding: 14px 16px;
  color: var(--tafs-ink-faint);
  font-size: calc(12.5px * var(--teacher-fs));
  font-weight: 600;
}

/* The table: a header row of sort buttons over flat student rows. The two
   share one column template, so the header lines up with the cells. */
.ts-table {
  /* --ts-cols and --ts-min are set inline by the view, off its column list, and
     rewritten in the browser when a column is hidden. */
  overflow-x: auto;
  border-block: 1px solid var(--tafs-line);
  background: var(--tafs-surface);
}

.ts-head,
.ts-summary {
  display: grid;
  grid-template-columns: var(--ts-cols);
  align-items: center;
  gap: 12px;
  min-width: var(--ts-min, 1020px);
  padding: 9px 16px;
}

/* A column the teacher took out of the view. The rule has to win over the cells'
   own display, which is why it is !important. */
.ts-table [hidden] { display: none !important; }

.ts-head {
  border-bottom: 1px solid var(--tafs-line);
  background: var(--tafs-surface-2);
}

/* A header cell: the label sorts, the x beside it hides the column. */
.ts-th {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.ts-th-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tafs-ink-faint);
  font: inherit;
  font-size: calc(11px * var(--teacher-fs));
  font-weight: 800;
  letter-spacing: .03em;
  text-align: start;
  cursor: pointer;
}

.ts-th-sort:hover { color: var(--tafs-primary); }
.ts-th-sort.is-sorted { color: var(--tafs-primary-dk); }

/* Always there, but faint - the column name is the point, not the x. */
.ts-th-x {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--tafs-ink-faint);
  font: inherit;
  font-size: calc(13px * var(--teacher-fs));
  line-height: 1;
  opacity: .3;
  cursor: pointer;
}

.ts-th:hover .ts-th-x { opacity: .7; }
.ts-th-x:hover { opacity: 1; background: #e2e5f4; color: var(--tafs-ink); }

.ts-arrow {
  display: inline-block;
  width: 9px;
  color: var(--tafs-primary);
  font-size: calc(10px * var(--teacher-fs));
}

.ts-th-sort.is-sorted.is-asc  .ts-arrow::after { content: '\25B2'; }
.ts-th-sort.is-sorted.is-desc .ts-arrow::after { content: '\25BC'; }

.ts-list {
  display: flex;
  flex-direction: column;
}

.ts-row {
  background: var(--tafs-surface);
  border-bottom: 1px solid var(--tafs-surface-2);
}

.ts-row:last-child { border-bottom: 0; }
.ts-row[open] { background: #fbfbff; }

.ts-row.is-idle .ts-summary { opacity: .74; }

/* Two rows to notice, and they must not be mistaken for each other: the AI read
   the latest answer as an emotional difficulty (rose), or the student raised a
   hand (amber). A hand is the more immediate of the two, so it wins the row. */
.ts-row.is-emotional .ts-summary { background: rgba(255, 122, 183, .13); }
.ts-row.is-summoned  .ts-summary { background: rgba(255, 197, 61, .16); }

.ts-summary {
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.ts-summary::-webkit-details-marker { display: none; }
.ts-summary:hover { background: #f6f7fd; }

/* Every cell keeps to its column - long text ellipses rather than pushing the
   grid out of line with the header. */
.ts-cell {
  min-width: 0;
  font-size: calc(13px * var(--teacher-fs));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ts-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tafs-primary);
  color: #fff;
  font-size: calc(16px * var(--teacher-fs));
  font-weight: 800;
}

.ts-row.is-done .ts-avatar { background: var(--tafs-mint); }
.ts-row.is-idle .ts-avatar { background: #c7cce0; }

/* the name columns, and the email beside them ------------------------------- */

.ts-first {
  font-size: calc(14px * var(--teacher-fs));
  font-weight: 800;
}

.ts-family-name {
  display: block;
  font-size: calc(14px * var(--teacher-fs));
  font-weight: 600;
  color: var(--tafs-ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The email is here to be read, not sorted on - it rides under the family name
   rather than taking a column of its own. */
.ts-email {
  display: block;
  color: var(--tafs-ink-faint);
  font-size: calc(11px * var(--teacher-fs));
  font-weight: 600;
  direction: ltr;
  text-align: start;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* where they are ----------------------------------------------------------- */

.ts-where { min-width: 0; }

.ts-problem-name {
  display: block;
  font-size: calc(12.5px * var(--teacher-fs));
  font-weight: 700;
  color: var(--tafs-ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ts-dots {
  display: inline-flex;
  gap: 4px;
  margin-top: 4px;
}

.ts-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e4e6ee;
}

.ts-dot.is-on  { background: var(--tafs-mint); }
.ts-dot.is-now {
  background: var(--tafs-primary);
  box-shadow: 0 0 0 3px rgba(85, 102, 204, .18);
}

/* minutes on the problem ---------------------------------------------------- */

.ts-mins-val {
  font-size: calc(16px * var(--teacher-fs));
  font-weight: 800;
}

.ts-mins-unit {
  margin-inline-start: 3px;
  color: var(--tafs-ink-faint);
  font-size: calc(11px * var(--teacher-fs));
  font-weight: 700;
}

/* Where this clock falls among the class's: the first quarter are the quickest,
   the fourth are the ones the teacher should walk over to. */
.ts-mins.is-q1 .ts-mins-val { 
  color: #10826f; 
  color: #0fbe25;
}
.ts-mins.is-q2 .ts-mins-val { color: var(--tafs-ink-soft); }
.ts-mins.is-q3 .ts-mins-val { color: #96660a; }
.ts-mins.is-q4 .ts-mins-val { color: #c0392b; }

.ts-mins.is-q3,
.ts-mins.is-q4 {
  border-radius: var(--tafs-radius-pill);
  padding: 2px 8px;
  margin-inline-start: -8px;
  justify-self: start;
}

.ts-mins.is-q3 { background: rgba(255, 197, 61, .20); }
.ts-mins.is-q4 { background: rgba(224, 82, 62, .14); }

/* The question clock: running on the question they are on, or - once that
   answer is in - how long the last one took them, which reads quieter. */
.ts-qmins .ts-mins-val { font-size: calc(14px * var(--teacher-fs)); }
.ts-qmins.is-past { opacity: .55; }
.ts-qmins.is-past .ts-mins-val { font-weight: 700; }

/* No quartile to show: the clock is from another lesson. */
.ts-row.is-done .ts-mins:not([class*='is-q']) .ts-mins-val { color: var(--tafs-ink-faint); }

/* Hours rather than minutes: the clock is from another day, not this lesson. */
.ts-mins.is-stale { opacity: .45; }
.ts-mins.is-stale .ts-mins-val { font-size: calc(13px * var(--teacher-fs)); font-weight: 700; }

/* issue tags (collapsed row) ------------------------------------------------ */

.ts-issues { min-width: 0; }

.ts-tag {
  padding: 3px 9px;
  border-radius: var(--tafs-radius-pill);
  font-size: calc(11px * var(--teacher-fs));
  font-weight: 700;
  white-space: nowrap;
}

.ts-tag-clean { background: rgba(35, 196, 168, .16); color: #10826f; }
.ts-tag-none  { background: var(--tafs-surface-2); color: var(--tafs-ink-faint); }

/* Error-kind colours, matching AI_ERROR_KINDS. */
.ts-tag-yellow { background: rgba(232, 182, 74, .24); color: #8a6206; }
.ts-tag-pink   { background: rgba(232, 120, 92, .18); color: #b0316d; }
.ts-tag-sky    { background: rgba(85, 102, 204, .14); color: #1f6f9e; }
.ts-tag-green  { background: rgba(58, 171, 151, .18); color: #10826f; }
.ts-tag-forest { background: rgba(16, 130, 111, .16); color: #0d5c3e; }
.ts-tag-red    { background: rgba(224, 82, 62, .16);  color: #c04a2b; }
.ts-tag-grey   { background: #e9ebf2;                 color: #55607a; }

/* chip + caret ------------------------------------------------------------- */

.ts-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  white-space: normal;
}

.ts-chip {
  flex: 0 0 auto;
  padding: 5px 12px;
  border-radius: var(--tafs-radius-pill);
  background: var(--tafs-surface-2);
  color: var(--tafs-ink-faint);
  font-size: calc(11.5px * var(--teacher-fs));
  font-weight: 700;
  white-space: nowrap;
}

.ts-row.is-live .ts-chip { background: rgba(85, 102, 204, .12);  color: var(--tafs-primary-dk); }
.ts-row.is-done .ts-chip { background: rgba(35, 196, 168, .16); color: #10826f; }

/* The student pressed "call the teacher" and nobody has cleared it yet. */
.ts-row .ts-chip-summon {
  background: rgba(255, 197, 61, .30);
  color: #8a6206;
}

.ts-caret {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tafs-surface-2);
  color: var(--tafs-ink-faint);
  font-size: calc(11px * var(--teacher-fs));
  line-height: 22px;
  text-align: center;
  transition: transform .16s ease, background-color .16s ease;
}

.ts-caret::after { content: "\25BE"; }
.ts-row[open] .ts-caret {
  transform: rotate(180deg);
  background: rgba(85, 102, 204, .12);
  color: var(--tafs-primary-dk);
}

/* expanded body ------------------------------------------------------------ */

.ts-body {
  display: flex;
  align-items: flex-start;
  gap: 0;
  border-top: 1px solid var(--tafs-line);
  background: var(--tafs-surface-2);
}

.ts-panel {
  flex: 0 0 270px;
  align-self: stretch;
  padding: 16px 18px;
}

.ts-panel-wide { flex: 1 1 auto; min-width: 0; }
.ts-panel + .ts-panel { border-inline-start: 1px solid var(--tafs-line); }

.ts-panel-title {
  margin: 0 0 10px;
  color: var(--tafs-ink-soft);
  font-size: calc(12px * var(--teacher-fs));
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.ts-panel-title + .ts-meters,
.ts-facts + .ts-panel-title,
.ts-meters + .ts-panel-title { margin-top: 18px; }

.ts-muted { color: var(--tafs-ink-faint); font-weight: 600; }

/* issue breakdown (expanded panel) */

.ts-panel-issues { flex: 0 0 250px; }

.ts-sample-badge {
  margin-inline-start: 6px;
  padding: 2px 7px;
  border-radius: var(--tafs-radius-pill);
  background: rgba(85, 102, 204, .10);
  color: var(--tafs-primary-dk);
  font-size: calc(9.5px * var(--teacher-fs));
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
}

.ts-issue {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 0;
}

.ts-issue.is-off { opacity: .45; }

.ts-issue-name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--tafs-ink-soft);
  font-size: calc(11.5px * var(--teacher-fs));
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ts-issue-emoji { margin-inline-end: 5px; }

/* One bar per error kind, as long as that kind's share of the student's worst
   one - the number beside it is the count itself. */
.ts-issue-track {
  flex: 0 0 auto;
  width: 62px;
  height: 6px;
  border-radius: var(--tafs-radius-pill);
  background: #e2e5f4;
  overflow: hidden;
}

.ts-issue-fill {
  display: block;
  height: 100%;
  border-radius: var(--tafs-radius-pill);
  background: var(--tafs-primary);
}

.ts-issue-fill.is-yellow { background: #e8b64a; }
.ts-issue-fill.is-pink   { background: #e8785c; }
.ts-issue-fill.is-sky    { background: #5566cc; }
.ts-issue-fill.is-green  { background: #3aab97; }
.ts-issue-fill.is-forest { background: #10826f; }
.ts-issue-fill.is-red    { background: #e0523e; }
.ts-issue-fill.is-grey   { background: #99a0b5; }

.ts-issue-count {
  flex: 0 0 16px;
  color: var(--tafs-ink-soft);
  font-size: calc(11.5px * var(--teacher-fs));
  font-weight: 800;
  text-align: center;
}

.ts-issue-note {
  display: flex;
  gap: 7px;
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px dashed #d8dcef;
  border-radius: var(--tafs-radius-sm);
  background: var(--tafs-surface);
  color: var(--tafs-ink-soft);
  font-size: calc(12px * var(--teacher-fs));
  line-height: 1.5;
}

.ts-issue-note-icon { flex: 0 0 auto; }

/* answer log */

.ts-answer-group + .ts-answer-group { margin-top: 16px; }

.ts-group-title {
  margin-bottom: 6px;
  color: var(--tafs-primary-dk);
  font-size: calc(12px * var(--teacher-fs));
  font-weight: 800;
}

.ts-answer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 3px solid var(--tafs-line);
}

.ts-answer:last-child { border-bottom: 0; }

.ts-answer-q {
  flex: 0 0 40%;
  min-width: 0;
  color: var(--tafs-ink-soft);
  font-size: calc(12.5px * var(--teacher-fs));
  font-weight: 600;
}

.ts-answer-num {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-inline-end: 6px;
  border-radius: 50%;
  background: #e6e8f8;
  color: var(--tafs-primary-dk);
  font-size: calc(10.5px * var(--teacher-fs));
  font-weight: 800;
}

.ts-answer-problem {
  display: block;
  margin-top: 3px;
  margin-inline-start: 24px;
  color: var(--tafs-ink-faint);
  font-size: calc(11px * var(--teacher-fs));
  font-weight: 700;
}

.ts-answer-a {
  flex: 1 1 auto;
  min-width: 0;
  font-size: calc(14px * var(--teacher-fs));
  font-weight: 600;
}

/* per-answer AI analysis */

/* Its own row under the answer - too many parameters for the answer column. */
.ts-ai {
  flex: 1 0 100%;
  margin-top: 2px;
  padding: 8px 10px;
  border: 1px solid var(--tafs-line);
  border-radius: var(--tafs-radius-sm);
  background: var(--tafs-surface-2);
}

.ts-ai-scores {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ts-ai-score {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 9px;
  border-radius: var(--tafs-radius-pill);
  background: var(--tafs-surface);
  color: var(--tafs-ink-soft);
  font-size: calc(11px * var(--teacher-fs));
  font-weight: 700;
}

.ts-ai-score-val { font-size: calc(13px * var(--teacher-fs)); font-weight: 800; }

.ts-ai-score.is-hi   { background: rgba(35, 196, 168, .16); color: #10826f; }
.ts-ai-score.is-mid  { background: rgba(255, 197, 61, .22); color: #96660a; }
.ts-ai-score.is-lo   { background: rgba(255, 122, 89, .18); color: #c04a2b; }
.ts-ai-score.is-none { color: var(--tafs-ink-faint); }

.ts-ai-note {
  display: flex;
  gap: 6px;
  margin: 7px 0 0;
  color: var(--tafs-ink-soft);
  font-size: calc(12px * var(--teacher-fs));
  font-weight: 600;
  line-height: 1.55;
}

.ts-ai-note-icon { flex: 0 0 auto; }

.ts-ai-pending {
  flex: 1 0 100%;
  margin-top: 2px;
  color: var(--tafs-ink-faint);
  font-size: calc(11px * var(--teacher-fs));
  font-weight: 700;
}

.ts-answer-when {
  flex: 0 0 auto;
  color: var(--tafs-ink-faint);
  font-size: calc(11px * var(--teacher-fs));
  font-weight: 700;
  white-space: nowrap;
}

/* questionnaire facts */

.ts-facts { margin: 0; }

.ts-fact {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--tafs-line);
}

.ts-fact:last-child { border-bottom: 0; }

.ts-fact dt {
  color: var(--tafs-ink-faint);
  font-size: calc(11.5px * var(--teacher-fs));
  font-weight: 700;
  white-space: nowrap;
}

.ts-fact dd {
  margin: 0;
  min-width: 0;
  font-size: calc(12.5px * var(--teacher-fs));
  font-weight: 600;
  text-align: end;
  overflow-wrap: anywhere;
}

/* feeling meters */

.ts-meter {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 3px 0;
}

.ts-meter-label {
  flex: 0 0 105px;
  color: var(--tafs-ink-soft);
  font-size: calc(11.5px * var(--teacher-fs));
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ts-meter-emoji { margin-inline-end: 4px; }

.ts-meter-track {
  flex: 1;
  height: 7px;
  border-radius: var(--tafs-radius-pill);
  background: #e2e5f4;
  overflow: hidden;
}

.ts-meter-fill {
  display: block;
  height: 100%;
  border-radius: var(--tafs-radius-pill);
  background: linear-gradient(90deg, var(--tafs-sun), var(--tafs-mint));
}

.ts-meter.is-warm .ts-meter-fill {
  background: linear-gradient(90deg, var(--tafs-sun), var(--tafs-accent));
}

.ts-meter-val {
  flex: 0 0 28px;
  direction: ltr;
  color: var(--tafs-ink-faint);
  font-size: calc(11px * var(--teacher-fs));
  font-weight: 700;
  text-align: end;
}

/* set-problem control */

.ts-set-problem {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ts-set-problem select {
  box-sizing: border-box;
  flex: 1 1 100%;
  padding: 9px 11px;
  border: 1.5px solid var(--tafs-line);
  border-radius: var(--tafs-radius-sm);
  background: var(--tafs-surface);
  color: var(--tafs-ink);
  font: inherit;
  font-size: calc(13px * var(--teacher-fs));
  font-weight: 600;
}

.ts-set-problem select:focus {
  outline: 0;
  border-color: var(--tafs-primary);
  box-shadow: 0 0 0 3px rgba(85, 102, 204, .14);
}

.ts-set-btn {
  padding: 8px 16px;
  border: 0;
  border-radius: var(--tafs-radius-pill);
  background: var(--tafs-primary);
  color: #fff;
  font: inherit;
  font-size: calc(13px * var(--teacher-fs));
  font-weight: 700;
  cursor: pointer;
}

.ts-set-btn:hover { background: var(--tafs-primary-dk); }

.ts-hint {
  margin: 10px 0 0;
  color: var(--tafs-ink-faint);
  font-size: calc(11.5px * var(--teacher-fs));
  line-height: 1.45;
}

/* Narrow screens: the row and its panels stack. */
@media (max-width: 1100px) {
  /* The columns keep their widths and the table scrolls sideways - a header
     that no longer lines up with its cells is worse than a scrollbar. */
  .ts-body  { flex-direction: column; }
  .ts-panel { flex: 1 1 auto; width: 100%; box-sizing: border-box; }
  .ts-panel + .ts-panel {
    border-inline-start: 0;
    border-top: 1px solid var(--tafs-line);
  }
}

.t-note {
  margin-top: 26px;
  color: var(--tafs-ink-faint);
  font-size: calc(13px * var(--teacher-fs));
}

/* --------------------------------------------------------------------------
   Landing page ("/") — centred
   -------------------------------------------------------------------------- */

.landing-page { text-align: center; }

.landing-hero { padding: 44px 0 8px; }

.landing-mark {
  display: block;
  width: 200px;
  max-width: 62%;
  height: auto;
  margin: 0 auto 16px;
}

.landing-page h1 {
  margin-bottom: 4px;
  font-size: 50px;
  letter-spacing: .04em;
}

.landing-tagline {
  margin: 0 0 20px;
  color: var(--tafs-ink-faint);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.landing-blurb {
  max-width: 28ch;
  margin: 0 auto;
  font-size: 17px;
}

.landing-points {
  margin: 30px 0 26px;
  padding: 8px 16px;
  border: 1px solid var(--tafs-line);
  border-radius: var(--tafs-radius);
  background: var(--tafs-surface);
  box-shadow: var(--tafs-shadow-sm);
}

.landing-point {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--tafs-line);
  text-align: start;
  justify-content: center;
}

.landing-point:last-child { border-bottom: 0; }

.landing-point-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 8px;
  background: var(--tafs-surface-2);
  font-size: 16px;
}

.landing-point-text {
  color: var(--tafs-ink-soft);
  font-size: 15.5px;
  line-height: 1.35;
}

.landing-note {
  padding: 18px;
  zborder: 1px dashed #cdd3ec;
  border-radius: var(--tafs-radius);
  background: rgba(255, 255, 255, .6);
}

.landing-note-title {
  margin: 0 0 4px;
  font-size: 16.5px;
}

.landing-note-sub {
  margin: 0;
  color: var(--tafs-ink-soft);
  font-size: 14.5px;
}

/* --------------------------------------------------------------------------
   Welcome screen — everything centred
   -------------------------------------------------------------------------- */

.welcome-page { text-align: center; }

.welcome-page .tafs-brand { justify-content: center; }

.welcome-page .tafs-list li {
  zjustify-content: center;
  ztext-align: start;
}

.welcome-help {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--tafs-line);
}

.welcome-help-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--tafs-ink-soft);
}

.welcome-help-sub {
  margin: 0;
  color: var(--tafs-ink-faint);
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   "Ready to start?" screen — between settings and work
   -------------------------------------------------------------------------- */

.ready-page { text-align: center; }

.ready-page .tafs-brand { justify-content: center; }

.ready-badge {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 4px auto 18px;
  border-radius: 50%;
  background: var(--tafs-surface);
  font-size: 34px;
  box-shadow: var(--tafs-shadow-sm), 0 0 0 10px rgba(85, 102, 204, .07);
}

.ready-lead {
  max-width: 30ch;
  margin: 0 auto 22px;
}

.ready-list li {
  text-align: start;
  align-items: flex-start;
}

.ready-list .tafs-list-icon { margin-top: 1px; }

.ready-note {
  background: var(--tafs-surface-2);
  border-style: dashed;
}

.ready-note h2 { margin-bottom: 6px; }

/* --------------------------------------------------------------------------
   "Checking your answer" screen — centred
   -------------------------------------------------------------------------- */

.checking-page {
  text-align: center;
  padding-top: 60px;
}

.checking-badge {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--tafs-surface);
  font-size: 34px;
  box-shadow: var(--tafs-shadow-sm), 0 0 0 10px rgba(85, 102, 204, .07);
  animation: checking-pulse 2s ease-in-out infinite;
}

@keyframes checking-pulse {
  0%, 100% { box-shadow: var(--tafs-shadow-sm), 0 0 0 10px rgba(85, 102, 204, .07); }
  50%      { box-shadow: var(--tafs-shadow-sm), 0 0 0 18px rgba(85, 102, 204, .04); }
}

@media (prefers-reduced-motion: reduce) {
  .checking-badge { animation: none; }
}

.checking-page .tafs-sub {
  max-width: 30ch;
  margin: 0 auto;
}

.checking-done {
  margin-top: 18px;
  color: var(--tafs-primary-dk);
  font-size: 22px;
}

.checking-page .debug-fields { text-align: start; }

/* --------------------------------------------------------------------------
   Work screen — status strip
   -------------------------------------------------------------------------- */

.work_top_btns {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.work-stat {
  flex: 1;
  min-width: 0;
  padding: 10px 6px 9px;
  border: 1px solid var(--tafs-line);
  border-radius: 10px;
  background: var(--tafs-surface);
  text-align: center;
  box-shadow: var(--tafs-shadow-sm);
}

a.work-stat {
  display: block;
  color: inherit;
  text-decoration: none;
}

a.work-stat:hover,
a.work-stat:focus-visible {
  border-color: var(--tafs-primary);
  box-shadow: var(--tafs-shadow-md, var(--tafs-shadow-sm));
}

/* merged heart + brain box */
.work-stat-state { flex: 1.6; }

.work-stat-pair {
  display: flex;
  align-items: flex-start;
}

.work-stat-half {
  flex: 1;
  min-width: 0;
}

.work-stat-half + .work-stat-half {
  border-inline-start: 1px solid var(--tafs-line);
}

.work-stat-icon {
  display: block;
  font-size: 17px;
  line-height: 1.1;
}

.work-stat-value {
  display: block;
  margin-top: 3px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.work-stat-label {
  display: block;
  margin-top: 1px;
  color: var(--tafs-ink-faint);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.work-stat-pair .work-stat-value {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "70/100" must not flip to "100/70" on an RTL page. */
.student_score .work-stat-value,
.class_score .work-stat-value {
  direction: ltr;
}

.work-stat-heart .work-stat-value { color: var(--tafs-accent); }
.work-stat-brain .work-stat-value { color: var(--tafs-primary); }

/* Work screen - feedback strip -------------------------------------------- */

/* The strip itself takes no room: with no feedback in it the problem title is
   the first thing on the screen, and the feedback pushes it down when it comes. */
.work-top-feedback { align-items: stretch; margin-bottom: 0; }

/* Menu, and the back button under it - pinned to the corner of the screen, out
   of the flow. Whatever sits first on the screen leaves them a gutter. */
.work-top-side {
  position: absolute;
  top: 22px;
  inset-inline-end: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.work-feedback,
.work-top-feedback:not(:has(.work-feedback)) + .problem { margin-inline-end: 44px; }

.work-stat.work-stat-mini {
  flex: 0 0 auto;
  padding: 6px 8px 5px;
  border-radius: 9px;
}

.work-stat-mini .work-stat-icon { font-size: 14px; }
.work-stat-mini .work-stat-label { font-size: 9px; letter-spacing: .03em; }

.work-feedback {
  flex: 1;
  min-width: 0;
  /* Tall enough that the two pinned buttons never hang below it. */
  min-height: 70px;
  box-sizing: border-box;
  margin-bottom: 20px;
  padding: 8px 9px;
  border: 1px solid #dfe3f6;
  border-radius: 10px;
  background: #f4f5ff;
  color: var(--tafs-ink-soft);
  font-size: 12.5px;
  line-height: 1.45;
  text-align: start;
}

.work-feedback-icon { flex: 0 0 auto; font-size: 13px; line-height: 1.4; }

/* Above the error type, the sentence the student actually reads: what to do with
   the error, rather than what it is called. White card, coloured edge, so it sits
   apart from the coloured type card under it without shouting over it. */
.work-feedback-message {
  flex: 1;
  min-width: 0;
  zpadding: 7px 9px;
  border-radius: 9px;
  border: 1px solid transparent;
  border-inline-start-width: 3px;
  background: #fff;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.5;
  animation: tafs-chip-in .25s ease-out both;
  border:none;
  color: var(--tafs-primary-dk);
  border-radius: 0;
  background: transparent;
}

.work-feedback-message.is-yellow { border-color: rgba(255, 197, 61, .55); color: #8a6206; }
.work-feedback-message.is-pink   { border-color: rgba(255, 122, 183, .52); color: #b0316d; }
.work-feedback-message.is-sky    { border-color: rgba(93, 188, 255, .55);  color: #1f6f9e; }
.work-feedback-message.is-green  { border-color: rgba(35, 196, 168, .52);  color: #10826f; }
.work-feedback-message.is-grey   { border-color: rgba(120, 130, 150, .45); color: #55607a; }
.work-feedback-message.is-red    { border-color: rgba(255, 90, 80, .50);   color: #c03a2b; }
.work-feedback-message.is-forest { border-color: rgba(20, 120, 80, .48);   color: #0d5c3e; }
.work-feedback-message.is-ok     { border-color: rgba(85, 102, 204, .50);  color: var(--tafs-primary-dk); }

/* The message with the three headline scores under it - together the part of
   the card that shows without opening it. */
.work-feedback-head {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.work-feedback-scores {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.work-feedback-scores:empty { display: none; }

/* The message is the summary of a <details>: it is all that shows until the
   caret next to it is tapped, which opens the error type and the chips. */
.work-feedback.is-waiting .work-feedback-details { display: none; }

.work-feedback-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.work-feedback-summary::-webkit-details-marker { display: none; }

.work-feedback-caret {
  flex: 0 0 auto;
  padding: 4px 6px;
  color: var(--tafs-primary-dk);
  font-size: 14px;
  line-height: 1;
}

.work-feedback-caret::after { content: "\25BE"; }
.work-feedback-details[open] .work-feedback-caret::after { content: "\25B4"; }

.work-feedback-more {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

/* The AI's own words to the student, in full - the first thing behind the caret. */
.work-feedback-text {
  margin: 0;
  color: var(--tafs-ink-soft);
  font-size: 12.5px;
  line-height: 1.55;
}

.work-feedback-text:empty { display: none; }

/* The error type gets a row of its own above the chips - it is the headline of
   the read, and the seven types are told apart by colour as much as by name. */
.work-feedback-card {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 9px;
  border: 1px solid transparent;
  animation: tafs-chip-in .25s ease-out both;
}

.work-feedback-card-emoji { flex: 0 0 auto; font-size: 14px; line-height: 1.25; }

.work-feedback-card-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.work-feedback-card-text b { font-size: 11.5px; font-weight: 800; }
.work-feedback-card-text i { font-size: 10.5px; font-style: normal; opacity: .82; }

.work-feedback-card.is-yellow { background: rgba(255, 197, 61, .20); border-color: rgba(255, 197, 61, .45); color: #8a6206; }
.work-feedback-card.is-pink   { background: rgba(255, 122, 183, .18); border-color: rgba(255, 122, 183, .42); color: #b0316d; }
.work-feedback-card.is-sky    { background: rgba(93, 188, 255, .18);  border-color: rgba(93, 188, 255, .45);  color: #1f6f9e; }
.work-feedback-card.is-green  { background: rgba(35, 196, 168, .16);  border-color: rgba(35, 196, 168, .42);  color: #10826f; }
.work-feedback-card.is-grey   { background: rgba(120, 130, 150, .14); border-color: rgba(120, 130, 150, .35); color: #55607a; }
.work-feedback-card.is-red    { background: rgba(255, 90, 80, .16);   border-color: rgba(255, 90, 80, .40);   color: #c03a2b; }
.work-feedback-card.is-forest { background: rgba(20, 120, 80, .15);   border-color: rgba(20, 120, 80, .38);   color: #0d5c3e; }
.work-feedback-card.is-ok     { background: rgba(85, 102, 204, .12);  border-color: rgba(85, 102, 204, .38);  color: var(--tafs-primary-dk); }

/* The analysed parameters, one chip each - same reading as the teacher's panel. */
.work-feedback-params {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.work-feedback-param {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 2px 6px;
  border-radius: var(--tafs-radius-pill);
  background: #fff;
  color: var(--tafs-ink-soft);
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
  animation: tafs-chip-in .25s ease-out both;
}

.work-feedback-param-val { font-size: 11px; font-weight: 800; }

.work-feedback-param.is-hi   { background: rgba(35, 196, 168, .16); color: #10826f; }
.work-feedback-param.is-mid  { background: rgba(255, 197, 61, .22); color: #96660a; }
.work-feedback-param.is-lo   { background: rgba(255, 122, 89, .18); color: #c04a2b; }
.work-feedback-param.is-none { color: var(--tafs-ink-faint); }

@keyframes tafs-chip-in {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

/* Three dots while we wait on the analysis; gone the moment text starts. */
.work-feedback-dots { display: none; gap: 4px; padding: 5px 0; }
.work-feedback.is-waiting .work-feedback-dots { display: inline-flex; }

.work-feedback-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tafs-primary);
  opacity: .3;
  animation: tafs-dot 1.1s ease-in-out infinite;
}

.work-feedback-dots i:nth-child(2) { animation-delay: .18s; }
.work-feedback-dots i:nth-child(3) { animation-delay: .36s; }

@keyframes tafs-dot {
  0%, 100% { opacity: .25; }
  50%      { opacity: .9; }
}

/* --------------------------------------------------------------------------
   Work screen — the problem (collapsible, no JS)
   -------------------------------------------------------------------------- */

.problem {
  margin-bottom: var(--tafs-gap);
  border: 1px solid var(--tafs-line);
  border-radius: var(--tafs-radius);
  background: var(--tafs-surface);
  box-shadow: var(--tafs-shadow-sm);
  overflow: hidden;
}

.problem-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 17px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.problem-summary::-webkit-details-marker { display: none; }

.problem-title {
  flex: 1;
  min-width: 0;
  font-size: 16.5px;
  font-weight: 800;
}

.problem-kicker {
  display: block;
  color: var(--tafs-ink-faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.problem-toggle {
  flex: 0 0 auto;
  padding: 6px 13px;
  border-radius: var(--tafs-radius-pill);
  zbackground: var(--tafs-surface-2);
  color: var(--tafs-primary-dk);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.problem-summary:hover .problem-toggle { background: #eceefb; }

.problem-toggle::after { content: " \25BE"; }
.problem[open] .problem-toggle::after { content: " \25B4"; }
.problem-toggle .when-open { display: none; }
.problem[open] .problem-toggle .when-open { display: inline; }
.problem[open] .problem-toggle .when-closed { display: none; }

.problem-text {
  padding: 0 17px 17px;
  margin: 0;
  color: var(--tafs-ink-soft);
  font-size: 16px;
  line-height: 1.6;
  white-space: pre-line;
}

.problem-text::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: 15px;
  background: var(--tafs-line);
}

/* --------------------------------------------------------------------------
   Work screen — question & answer
   -------------------------------------------------------------------------- */

.question-card {
  padding: 18px;
  border: 1px solid var(--tafs-line);
  border-radius: var(--tafs-radius);
  background: var(--tafs-surface);
  box-shadow: var(--tafs-shadow-sm);
}

.question-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--tafs-ink-faint);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.question-dots {
  display: flex;
  gap: 5px;
}

.question-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tafs-line);
}

.question-dot-on { background: var(--tafs-primary); }

.question-body {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.question-start {
  padding: 26px 20px;
  border: 1px dashed #cdd3ec;
  border-radius: var(--tafs-radius);
  background: var(--tafs-surface);
  text-align: center;
}

.question-start .tafs-sub { margin-bottom: 18px; }

/* Answer inputs supplied by the submit_* partials. */
.question-card label { display: block; }
.question-card br { display: none; }

.question-card > form > label,
.question-card label[for] {
  margin-bottom: 7px;
  color: var(--tafs-ink-soft);
  font-size: 13.5px;
  font-weight: 700;
}

.question-card input[type="file"] {
  box-sizing: border-box;
  width: 100%;
  padding: 13px 15px;
  border: 1.5px dashed #cdd3ec;
  border-radius: var(--tafs-radius-sm);
  background: var(--tafs-surface-2);
  font-size: 14px;
}

.question-card form { margin: 0; }

.question-card img#preview {
  margin-top: 12px;
  border-radius: var(--tafs-radius-sm);
}

/* Action bar ---------------------------------------------------------------- */

.action-bar {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 9px;
  margin: 20px -20px -32px;
  padding: 14px 20px 20px;
  background: linear-gradient(to top, #ffffff 72%, rgba(255, 255, 255, 0));
  background: transparent;
}

.action-bar .tafs-btn {
  flex: 1 1 0;
  min-width: 0;
  gap: 5px;
  padding-inline: 8px;
  font-size: 14.5px;
  white-space: nowrap;
}

.action-bar .action-send { flex: 1.5 1 0; }

/* Submitting: the send button swaps its label for a spinner. */
.action-bar .action-send.is-busy {
  background: var(--tafs-primary);
  opacity: .75;
  cursor: default;
}

.tafs-spinner {
  display: inline-block;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tafs-spin .7s linear infinite;
}

@keyframes tafs-spin {
  to { transform: rotate(360deg); }
}

/* Dev-only echo of the hidden form fields. */
.debug-fields {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px dashed #d8dcef;
  border-radius: var(--tafs-radius-sm);
  background: var(--tafs-surface-2);
  color: var(--tafs-ink-faint);
  font-size: 12px;
}

.debug-fields input {
  font-size: 12px !important;
  padding: 6px 9px !important;
}

/* RTL: mirror the few directional bits. */
[dir="rtl"] .tafs-eyebrow { letter-spacing: 0; }

/* The slider's low end sits on the right in RTL, so the ramp flips with it. */
[dir="rtl"] .tafs-scale input[type="range"] {
  background: linear-gradient(270deg, #e4e6ee, var(--tafs-sun) 55%, var(--tafs-mint));
}

[dir="rtl"] .tafs-scale-warm input[type="range"] {
  background: linear-gradient(270deg, #e4e6ee, var(--tafs-sun) 55%, var(--tafs-accent));
}

/* Until the copy is translated, let each block pick its own direction from its
   own text, so leftover English keeps its punctuation in the right place. */
.tafs_mobile h1,
.tafs_mobile h2,
.tafs-sub,
.tafs-name,
.tafs-field-label,
.tafs-field-hint,
.tafs-footnote,
.tafs-scale-head,
.tafs-list li,
.problem-text,
.question-body,
.tafs_mobile button,
.tafs-btn {
  unicode-bidi: plaintext;
}

/* Teacher meters fill from the right in RTL, so the ramp follows. */
[dir="rtl"] .ts-meter-fill {
  background: linear-gradient(270deg, var(--tafs-sun), var(--tafs-mint));
}

[dir="rtl"] .ts-meter.is-warm .ts-meter-fill {
  background: linear-gradient(270deg, var(--tafs-sun), var(--tafs-accent));
}

/* --- Answer inputs: range + finger-drawn canvas --- */

.range-val {
  font-weight: 700;
  color: var(--tafs-ink);
}

.draw-canvas {
  width: 100%;
  height: 220px;
  border: 1px dashed #b9c0e0;
  border-radius: var(--tafs-radius-sm);
  background: #fff;
  touch-action: none; /* keep a finger stroke from scrolling the page */
}

.draw-clear {
  margin-top: 8px;
  font-size: 13px;
  padding: 6px 14px;
}

/* Drawn and photographed answers in the teacher view. */
.ts-answer-img {
  max-width: 220px;
  border: 1px solid #e2e6f5;
  border-radius: var(--tafs-radius-sm);
  background: #fff;
}

/* A photo opens full size in a new tab. */
.ts-answer-pic {
  display: inline-block;
  line-height: 0;
}

.ts-answer-pic:hover .ts-answer-img {
  border-color: var(--tafs-primary);
}

/* Landing page's "email me a login link" form. */
.landing-login {
  display: grid;
  gap: 10px;
}

/* --------------------------------------------------------------------------
   Teacher — /teacher/simple1. The at-a-glance class board: one card per
   student, big numbers, everything actionable without opening anything.
   -------------------------------------------------------------------------- */

.s1 { margin-bottom: 26px; }

.s1-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

.s1-title {
  margin: 0;
  font-size: calc(22px * var(--teacher-fs));
  font-weight: 800;
  letter-spacing: -.02em;
}

.s1-badge {
  padding: 5px 11px;
  border-radius: var(--tafs-radius-pill);
  background: rgba(85, 102, 204, .11);
  color: var(--tafs-primary-dk);
  font-size: calc(11px * var(--teacher-fs));
  font-weight: 700;
  letter-spacing: .05em;
}

.s1-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 16px;
}

/* The card ------------------------------------------------------------------ */

.s1-card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 16px 17px 15px;
  border: 1px solid var(--tafs-line);
  border-top: 4px solid #d3d7e8;
  border-radius: var(--tafs-radius);
  background: var(--tafs-surface);
  box-shadow: var(--tafs-shadow-sm);
  transition: box-shadow .15s, transform .15s;
}

.s1-card:hover {
  box-shadow: var(--tafs-shadow-md);
  transform: translateY(-2px);
}

.s1-card.is-live { border-top-color: var(--tafs-primary); }
.s1-card.is-done { border-top-color: var(--tafs-mint); }
.s1-card.is-idle { opacity: .88; }

/* Head: avatar, name, state pill -------------------------------------------- */

.s1-card-head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.s1-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 8px;
  background: var(--tafs-primary);
  color: #fff;
  font-size: calc(19px * var(--teacher-fs));
  font-weight: 800;
}

.s1-card.is-done .s1-avatar { background: var(--tafs-mint); }
.s1-card.is-idle .s1-avatar { background: #c7cce0; }

.s1-who { flex: 1; min-width: 0; }

.s1-name {
  display: block;
  font-size: calc(20px * var(--teacher-fs));
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.2;
}

.s1-sub {
  display: block;
  margin-top: 3px;
  color: var(--tafs-ink-faint);
  font-size: calc(12.5px * var(--teacher-fs));
  font-weight: 600;
}

.s1-state {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--tafs-radius-pill);
  background: var(--tafs-surface-2);
  color: var(--tafs-ink-soft);
  font-size: calc(11px * var(--teacher-fs));
  font-weight: 800;
  white-space: nowrap;
}

.s1-card.is-live .s1-state { background: rgba(85, 102, 204, .12); color: var(--tafs-primary-dk); }
.s1-card.is-done .s1-state { background: rgba(35, 196, 168, .16); color: #12886f; }

/* Scores -------------------------------------------------------------------- */

.s1-scores {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.s1-score {
  padding: 9px 6px 7px;
  border: 1px solid var(--tafs-line);
  border-radius: var(--tafs-radius-sm);
  background: var(--tafs-surface-2);
  text-align: center;
}

.s1-score-val {
  display: block;
  font-size: calc(30px * var(--teacher-fs));
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.s1-score-label {
  display: block;
  margin-top: 4px;
  color: var(--tafs-ink-faint);
  font-size: calc(11px * var(--teacher-fs));
  font-weight: 700;
  white-space: nowrap;
}

.s1-score.is-good { background: rgba(35, 196, 168, .12); border-color: rgba(35, 196, 168, .35); }
.s1-score.is-good .s1-score-val { color: #12886f; }
.s1-score.is-mid  { background: rgba(255, 197, 61, .16); border-color: rgba(255, 197, 61, .45); }
.s1-score.is-mid  .s1-score-val { color: #9a6a00; }
.s1-score.is-low  { background: rgba(255, 122, 89, .13); border-color: rgba(255, 122, 89, .36); }
.s1-score.is-low  .s1-score-val { color: #c0492a; }
.s1-score.is-na   .s1-score-val { color: var(--tafs-ink-faint); }

/* Feedback line, then the labelled blocks ----------------------------------- */

.s1-feed {
  margin: 0;
  font-size: calc(15.5px * var(--teacher-fs));
  line-height: 1.45;
  color: var(--tafs-ink);
}

.s1-block,
.s1-card-foot {
  padding-top: 12px;
  border-top: 1px solid var(--tafs-line);
}

.s1-label {
  display: block;
  margin-bottom: 6px;
  color: var(--tafs-ink-faint);
  font-size: calc(10.5px * var(--teacher-fs));
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.s1-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.s1-chip {
  padding: 5px 11px;
  border-radius: var(--tafs-radius-pill);
  font-size: calc(13px * var(--teacher-fs));
  font-weight: 700;
  line-height: 1.3;
}

.s1-chip-math { background: rgba(85, 102, 204, .12); color: var(--tafs-primary-dk); }
.s1-chip-emo  { background: rgba(255, 122, 89, .14); color: #b8452a; }

.s1-partner {
  display: block;
  font-size: calc(16.5px * var(--teacher-fs));
  font-weight: 800;
}

.s1-why {
  display: block;
  margin-top: 4px;
  color: var(--tafs-ink-faint);
  font-size: calc(12px * var(--teacher-fs));
  line-height: 1.35;
}

/* Assign next problem — pinned to the bottom of every card ------------------ */

.s1-card-foot { margin-top: auto; }

.s1-form {
  display: flex;
  gap: 6px;
  margin: 0;
}

.s1-select {
  flex: 1;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--tafs-line);
  border-radius: var(--tafs-radius-sm);
  background: var(--tafs-surface);
  color: var(--tafs-ink);
  font-family: inherit;
  font-size: calc(13.5px * var(--teacher-fs));
  font-weight: 600;
}

.s1-btn {
  flex: 0 0 auto;
  padding: 9px 17px;
  border: 0;
  border-radius: var(--tafs-radius-sm);
  background: var(--tafs-primary);
  color: #fff;
  font-family: inherit;
  font-size: calc(13.5px * var(--teacher-fs));
  font-weight: 800;
  cursor: pointer;
}

.s1-btn:hover { background: var(--tafs-primary-dk); }

.s1-empty {
  grid-column: 1 / -1;
  padding: 30px;
  border: 1px dashed var(--tafs-line);
  border-radius: var(--tafs-radius);
  color: var(--tafs-ink-faint);
  text-align: center;
  font-size: calc(15px * var(--teacher-fs));
}

@media (max-width: 560px) {
  .s1-cards { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   /teacher — simple2: the plain student list
   A table, not cards: names, one line of status, and a strip of icon flags.
   -------------------------------------------------------------------------- */

.s2 {
  margin-bottom: 26px;
  padding: 18px 18px 6px;
  border: 1px solid var(--tafs-line);
  border-radius: var(--tafs-radius);
  background: var(--tafs-surface);
  box-shadow: var(--tafs-shadow-sm);
}

.s2-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

.s2-title {
  margin: 0;
  font-size: calc(18px * var(--teacher-fs));
  font-weight: 800;
  color: var(--tafs-ink);
}

.s2-count {
  font-size: calc(12.5px * var(--teacher-fs));
  font-weight: 700;
  color: var(--tafs-ink-faint);
}

.s2-table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(14px * var(--teacher-fs));
}

.s2-table th {
  padding: 8px 10px;
  border-bottom: 1px solid var(--tafs-line);
  color: var(--tafs-ink-soft);
  font-size: calc(12.5px * var(--teacher-fs));
  font-weight: 700;
  text-align: start;
  white-space: nowrap;
}

/* The two sortable headers. The arrow only shows on the sorted one. */
.s2-th-sort {
  cursor: pointer;
  user-select: none;
}

.s2-th-sort:hover { color: var(--tafs-primary); }

.s2-arrow {
  display: inline-block;
  width: 9px;
  color: var(--tafs-primary);
  font-size: calc(10px * var(--teacher-fs));
}

.s2-th-sort.is-sorted { color: var(--tafs-primary); }
.s2-th-sort.is-sorted.is-asc  .s2-arrow::after { content: '\25B2'; }
.s2-th-sort.is-sorted.is-desc .s2-arrow::after { content: '\25BC'; }

.s2-table td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--tafs-surface-2);
  vertical-align: middle;
}

.s2-row:hover { background: #fbfbff; }
.s2-row.is-idle { opacity: .72; }

/* A colored spine on the start edge tells the three states apart, the same
   way the expanded rows below the table do. */
.s2-row td:first-child { border-inline-start: 3px solid transparent; }
.s2-row.is-live td:first-child { border-inline-start-color: var(--tafs-primary); }
.s2-row.is-done td:first-child { border-inline-start-color: var(--tafs-mint); }

.s2-td-avatar { width: 34px; }

.s2-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tafs-primary);
  color: #fff;
  font-size: calc(12px * var(--teacher-fs));
  font-weight: 800;
}

.s2-row.is-done .s2-avatar { background: var(--tafs-mint); }
.s2-row.is-idle .s2-avatar { background: #c7cce0; }

.s2-name {
  font-weight: 700;
  color: var(--tafs-ink);
  white-space: nowrap;
}

.s2-family { font-weight: 600; }

.s2-status {
  width: 100%;
  color: var(--tafs-ink-soft);
  font-size: calc(13px * var(--teacher-fs));
}

.s2-row.is-done .s2-status { color: #10826f; }

.s2-th-flags,
.s2-flags { white-space: nowrap; }

.s2-flags { text-align: start; }

/* One indicator. The background says how urgent, the emoji says what. */
.s2-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  margin-inline-end: 4px;
  border-radius: 50%;
  background: var(--tafs-surface-2);
  font-size: calc(13px * var(--teacher-fs));
  cursor: help;
}

.s2-ico-warn   { background: rgba(255, 122, 89, .18); }
.s2-ico-ok     { background: rgba(35, 196, 168, .16); }
.s2-ico-mute   { background: var(--tafs-surface-2); opacity: .7; }

/* Error-kind colours, matching AI_ERROR_KINDS. */
.s2-ico-yellow { background: rgba(232, 182, 74, .24); }
.s2-ico-pink   { background: rgba(232, 120, 92, .18); }
.s2-ico-sky    { background: rgba(85, 102, 204, .14); }
.s2-ico-green  { background: rgba(58, 171, 151, .18); }
.s2-ico-forest { background: rgba(16, 130, 111, .16); }
.s2-ico-red    { background: rgba(224, 82, 62, .16); }
.s2-ico-grey   { background: #e9ebf2; }

.s2-muted { color: var(--tafs-ink-faint); }

.s2-empty {
  padding: 26px;
  color: var(--tafs-ink-faint);
  text-align: center;
}

@media (max-width: 640px) {
  .s2 { padding: 14px 10px 4px; }
  .s2-table { font-size: calc(13px * var(--teacher-fs)); }
  .s2-status { font-size: calc(12px * var(--teacher-fs)); }
}


:root {
  --grid-color: rgba(80, 170, 220, 0.08); /* light blue */
  /* --grid-color: rgba(20, 70, 130, 0.12); */ /* dark blue */
}

/* background:; math grid */

.tafs_mobile {
  background-color: #fff;

  background-image:
    linear-gradient(var(--grid-color) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);

  background-size:
    24px 24px,
    24px 24px,
    120px 120px,
    120px 120px;  
}

.problem, .question-start, .question-card, .tafs-card:not(.tafs-card-hero) {
  background: none;
  border: none;
}

/* --------------------------------------------------------------------------
   Menu (views/tafs/menu.erb)
   -------------------------------------------------------------------------- */

.menu-saved {
  margin-inline-start: 6px;
  color: var(--tafs-mint);
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  transition: opacity .2s ease;
}

.menu-saved.is-on { opacity: 1; }

.menu-problems {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-problems li + li { margin-top: 8px; }

/* Written as .tafs_mobile button.<x> to outrank the base `.tafs_mobile button`. */
.tafs_mobile button.menu-problem {
  display: flex;
  justify-content: flex-start;
  gap: 11px;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--tafs-line);
  border-radius: var(--tafs-radius);
  background: var(--tafs-surface);
  color: var(--tafs-ink);
  font-size: 15.5px;
  font-weight: 600;
  text-align: start;
}

.tafs_mobile button.menu-problem:hover { background: var(--tafs-surface-2); }

.tafs_mobile button.menu-problem.is-current {
  border-color: var(--tafs-primary);
  background: var(--tafs-surface-2);
}

.menu-problem-num {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 8px;
  background: var(--tafs-surface-2);
  color: var(--tafs-primary-dk);
  font-size: 14px;
  font-weight: 700;
}

.menu-problem.is-current .menu-problem-num {
  background: var(--tafs-primary);
  color: #fff;
}

.menu-problem-title { flex: 1; }

.menu-problem-meta {
  color: var(--tafs-ink-faint);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}