@charset "UTF-8";
/* ==========================================================================
   UniSorted Student Money MOT
   Page-scoped styling for /tools/student-money-mot/ only. Loads alongside
   tg-tools.css (which supplies the .tg-calc wrapper, hero and .calc-btn).
   Everything here is prefixed .tg-mot so it cannot leak onto other tools.
   Built 2026-07-15, re-skinned 2026-07-16 to the locked publisher grammar:
   white ground, ink top-rule as the section motif, directory-style result
   rows.
   Mobile-first. box-sizing set explicitly.
   ========================================================================== */

.tg-mot,
.tg-mot *,
.tg-mot *::before,
.tg-mot *::after {
  box-sizing: border-box;
}

.tg-mot {
  --mot-ink: #1a1a1a;
  --mot-mute: #6b6864;
  --mot-border: #e5e5e5;
}

/* ---------- Answered counter (plain text, no bar) ---------- */
.tg-mot-count {
  margin: 0 0 1.25rem;
  font-size: 0.85rem;
  color: var(--mot-mute);
}

/* ---------- Question blocks ---------- */
.tg-mot-q {
  border: 1px solid var(--mot-border);
  padding: 1.15rem 1.25rem;
  margin: 0 0 0.85rem;
  min-width: 0;
}

.tg-mot-q .tg-mot-q-legend {
  display: block;
  width: 100%;
  padding: 0;
  font-family: 'Archivo', sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--mot-ink);
  margin: 0 0 0.85rem;
}

.tg-mot-q-num {
  color: var(--mot-mute);
  font-weight: 800;
  margin-right: 0.4rem;
}

.tg-mot-opts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tg-mot-opt {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--mot-border);
  background: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--mot-ink);
  cursor: pointer;
  border-radius: 0;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}

.tg-mot-opt:hover {
  border-color: var(--mot-ink);
}

.tg-mot-opt:focus-visible {
  outline: none;
  border-color: #ff5722;
  box-shadow: 0 0 0 3px #fff5f0;
}

.tg-mot-opt.selected {
  border-color: var(--mot-ink);
  background: var(--mot-ink);
  color: #fff;
  font-weight: 600;
}

/* ---------- Submit ---------- */
.tg-mot-submit-wrap {
  margin: 1.25rem 0 0;
}

.tg-mot-submit-wrap .tg-mot-submit[disabled] {
  background: #d9d5d0;
  cursor: not-allowed;
}

/* ---------- Results ---------- */
.tg-mot-results {
  margin-top: 2.5rem;
}

/* The score reads as a sentence, not a scorecard. */
.tg-mot-score {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--mot-ink);
  max-width: 62ch;
}

.tg-mot-score-num {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}

/* Directory-style rows: ink top-rule on the list, hairlines between rows. */
.tg-mot-list {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  border-top: 2px solid var(--mot-ink);
}

.tg-mot-row {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--mot-border);
  min-width: 0;
}

.tg-mot-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.tg-mot-row-area {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--mot-ink);
  min-width: 0;
}

.tg-mot-row-status {
  font-size: 0.85rem;
  color: var(--mot-mute);
  white-space: nowrap;
}

.tg-mot-row-note {
  margin: 0.4rem 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--mot-ink);
  max-width: 62ch;
}

.tg-mot-row-link {
  font-weight: 600;
  color: #c2410c;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.tg-mot-row-link:hover {
  color: #a8350a;
}

.tg-mot-clean {
  margin: 0 0 0.75rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--mot-ink);
}

.tg-mot-retake {
  margin-top: 1.25rem;
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.25rem;
  background: #fff;
  color: var(--mot-ink);
  border: 1px solid var(--mot-border);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  border-radius: 0;
}

.tg-mot-retake:hover {
  border-color: var(--mot-ink);
}

.tg-mot-noscript {
  padding: 1rem 1.25rem;
  border: 1px solid var(--mot-border);
  background: #fff;
  font-size: 0.9rem;
  color: var(--mot-mute);
}