/* ===========================================================
   G1 Practice Test — page styles
   Brand primary is var(--primary) (#ce252a). Greens/reds below
   are dedicated quiz-feedback colours, not brand colours.
   =========================================================== */

.g1-quiz {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ---- Intro / start card ---- */
.g1-intro {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  padding: 2.5rem;
  text-align: center;
}
.g1-intro h2 {
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.g1-intro p {
  color: #5a5a5a;
  max-width: 620px;
  margin: 0 auto 1.5rem;
}
.g1-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin: 1.75rem 0;
}
.g1-stat {
  flex: 1 1 150px;
  max-width: 200px;
  background: #f6f7f9;
  border-radius: 14px;
  padding: 1.1rem 0.75rem;
}
.g1-stat .num {
  display: block;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.1;
}
.g1-stat .lbl {
  font-size: 0.82rem;
  color: #6b6b6b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---- Category chooser ---- */
/* Segmented toggle — three equal segments on one line */
.g1-categories {
  display: flex;
  gap: 4px;
  background: #f1f1f3;
  border-radius: 50px;
  padding: 4px;
  margin-bottom: 1.75rem;
}
.g1-cat-btn {
  flex: 1 1 0;
  border: none;
  background: transparent;
  color: #555;
  border-radius: 50px;
  padding: 0.5rem 0.4rem;
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.18s ease;
}
.g1-cat-btn:not(.active):hover {
  color: var(--primary);
  background: rgba(0, 0, 0, 0.04);
}
.g1-cat-btn.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 6px rgba(206, 37, 42, 0.35);
}

/* ---- Quiz top bar (progress + score) ---- */
.g1-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.g1-counter {
  font-weight: 600;
  color: #555;
  font-size: 0.95rem;
}
.g1-score {
  font-weight: 600;
  font-size: 0.95rem;
  color: #2e7d32;
}
.g1-score .wrong {
  color: var(--primary);
  margin-left: 0.6rem;
}
.g1-progress {
  height: 8px;
  background: #ececec;
  border-radius: 50px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.g1-progress-bar {
  height: 100%;
  width: 0;
  background: var(--primary);
  border-radius: 50px;
  transition: width 0.3s ease;
}

/* ---- Question card ---- */
.g1-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
  padding: 2rem;
}
.g1-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary);
  background: rgba(206, 37, 42, 0.08);
  padding: 0.25rem 0.7rem;
  border-radius: 50px;
  margin-bottom: 1rem;
}
.g1-sign-wrap {
  text-align: center;
  margin-bottom: 1.25rem;
}
.g1-sign-wrap img {
  width: 150px;
  height: 150px;
  object-fit: contain;
}
.g1-question {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 1.5rem;
  color: #1f1f1f;
}

/* ---- Options ---- */
.g1-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.g1-option {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  text-align: left;
  border: 2px solid #e3e3e3;
  background: #fff;
  border-radius: 14px;
  padding: 0.95rem 1.1rem;
  font-size: 1rem;
  color: #2b2b2b;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.g1-option:hover:not(:disabled) {
  border-color: var(--primary);
  background: #fff8f8;
}
.g1-option:hover:not(:disabled) .key {
  background: rgba(206, 37, 42, 0.12);
  color: var(--primary);
}
.g1-option:disabled {
  cursor: default;
}
.g1-option .key {
  flex: 0 0 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f0f0f0;
  font-weight: 700;
  font-size: 0.9rem;
  color: #555;
  transition: all 0.15s ease;
}
.g1-option .txt {
  flex: 1;
}
.g1-option .mark {
  flex: 0 0 auto;
  font-size: 1.15rem;
  opacity: 0;
  background: none; /* override Bootstrap's .mark yellow highlight (#fcf8e3) */
  padding: 0;
}

/* feedback states */
.g1-option.correct {
  border-color: #2e7d32;
  background: #eaf6ea;
  color: #1b5e20;
}
.g1-option.correct .key {
  background: #2e7d32;
  color: #fff;
}
.g1-option.correct .mark {
  opacity: 1;
  color: #2e7d32;
}
.g1-option.wrong {
  border-color: var(--primary);
  background: #fdecec;
  color: #8e1418;
}
.g1-option.wrong .key {
  background: var(--primary);
  color: #fff;
}
.g1-option.wrong .mark {
  opacity: 1;
  color: var(--primary);
}

/* ---- Explanation ---- */
.g1-explain {
  margin-top: 1.4rem;
  border-left: 4px solid var(--primary);
  background: #faf7f7;
  border-radius: 0 12px 12px 0;
  padding: 1rem 1.2rem;
  display: none;
}
.g1-explain.show {
  display: block;
  animation: g1fade 0.25s ease;
}
/* accent line matches the verdict: green when right, red when wrong */
.g1-explain.right { border-left-color: #2e7d32; }
.g1-explain.wrong { border-left-color: var(--primary); }
.g1-explain .verdict {
  font-weight: 700;
  display: block;
  margin-bottom: 0.3rem;
}
.g1-explain .verdict.right {
  color: #2e7d32;
}
.g1-explain .verdict.no {
  color: var(--primary);
}
.g1-explain p {
  margin: 0;
  color: #444;
  font-size: 0.96rem;
  line-height: 1.55;
}
@keyframes g1fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Footer controls ---- */
.g1-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.g1-skip {
  background: none;
  border: none;
  color: #888;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}
.g1-skip:hover { color: var(--primary); }
.g1-next {
  margin-left: auto;
}
.g1-next:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---- Results ---- */
.g1-results {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  padding: 2.5rem;
  text-align: center;
}
.g1-results .ring {
  width: 150px;
  height: 150px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.g1-results .ring.pass { background: linear-gradient(135deg, #2e7d32, #43a047); }
.g1-results .ring.fail { background: linear-gradient(135deg, var(--primary), #a01e22); }
.g1-results .ring .pct {
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
}
.g1-results .ring .of {
  font-size: 0.85rem;
  opacity: 0.9;
}
.g1-results h2 { font-weight: 700; }
.g1-results .summary {
  color: #5a5a5a;
  margin-bottom: 1.5rem;
}
/* Score-branched BDE course CTA on the results screen */
.g1-results-cta {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid #ededed;
}
.g1-results-cta p {
  color: #555;
  font-size: 0.98rem;
  line-height: 1.5;
  max-width: 520px;
  margin: 0 auto 1rem;
}

/* ---- Mode chooser (intro) ---- */
.g1-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1.75rem;
  text-align: left;
}
.g1-mode-card {
  border: 2px solid #ececec;
  border-radius: 18px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
}
.g1-mode-card.test {
  border-color: rgba(206, 37, 42, 0.30);
  background: #fffafa;
}
.g1-mode-card .mode-icon {
  font-size: 1.6rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
}
.g1-mode-card h3 {
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.g1-mode-card p {
  color: #5a5a5a;
  font-size: 0.95rem;
  margin-bottom: 0.75rem;
}
.g1-mode-card .g1-categories {
  justify-content: flex-start;
  margin: 0 0 1rem;
}
.g1-mode-card .fmt {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}
.g1-mode-card .fmt li {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.9rem;
  color: #444;
  padding: 0.18rem 0;
}
.g1-mode-card .fmt li i {
  color: var(--primary);
  flex: 0 0 auto;
  margin-top: 0.2rem;
}
.g1-mode-card .grow { flex: 1; }
.g1-mode-card .btn { margin-top: auto; }

/* ---- Selected option (test mode, no feedback) ---- */
.g1-option.selected {
  border-color: var(--primary);
  background: #fff5f5;
}
.g1-option.selected .key {
  background: var(--primary);
  color: #fff;
}

/* ---- Test timer ---- */
.g1-timer {
  font-weight: 600;
  font-size: 0.95rem;
  color: #555;
}
.g1-timer i { color: var(--primary); margin-right: 0.4rem; }

/* ---- Test results: section breakdown ---- */
.g1-sections {
  max-width: 440px;
  margin: 0 auto 1.25rem;
}
.g1-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.1rem;
  border: 1px solid #ececec;
  border-radius: 12px;
  margin-bottom: 0.6rem;
}
.g1-section-row .label { font-weight: 600; }
.g1-section-row .res { font-weight: 700; }
.g1-section-row .res.pass { color: #2e7d32; }
.g1-section-row .res.fail { color: var(--primary); }
.g1-verdict {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 1.25rem;
}
.g1-verdict.pass { color: #2e7d32; }
.g1-verdict.fail { color: var(--primary); }

/* ---- Test results: answer review ---- */
.g1-review {
  text-align: left;
  margin-top: 1.75rem;
}
.g1-review h3 {
  font-weight: 700;
  margin-bottom: 1rem;
  text-align: center;
}
.g1-review-item {
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
}
.g1-review-item .rq {
  font-weight: 600;
  margin-bottom: 0.55rem;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}
.g1-review-item .rq img {
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  object-fit: contain;
}
.g1-review-line {
  font-size: 0.92rem;
  padding: 0.15rem 0;
}
.g1-review-line.yours { color: var(--primary); }
.g1-review-line.correct { color: #2e7d32; }
.g1-review-item .rexp {
  font-size: 0.9rem;
  color: #555;
  margin-top: 0.5rem;
  border-left: 3px solid #e3e3e3;
  padding-left: 0.75rem;
}

/* ---- Responsive ---- */
@media (max-width: 700px) {
  .g1-modes { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .g1-card, .g1-intro, .g1-results { padding: 1.5rem 1.25rem; }
  .g1-question { font-size: 1.1rem; }
  .g1-option { padding: 0.8rem 0.9rem; font-size: 0.95rem; }
  .g1-option .key { flex-basis: 26px; height: 26px; }
  .g1-sign-wrap img { width: 120px; height: 120px; }
  .g1-next { width: 100%; }
}

/* ---- Compact BDE benefits strip (bottom of page) ---- */
.g1-bde { background: var(--primary); }
.g1-bde-title { font-weight: 700; margin-bottom: 0.5rem; color: #fff; }
.g1-bde-sub {
  color: rgba(255, 255, 255, 0.92);
  max-width: 640px;
  margin: 0 auto 1.6rem;
}
.g1-bde-more-wrap { margin-top: 1.1rem; }
.g1-bde-more {
  font-weight: 600;
  color: #fff;
  text-decoration: none;
}
.g1-bde-more:hover { text-decoration: underline; }

/* ---- Personal-best note on the test results screen ---- */
.g1-best-note {
  font-size: 0.95rem;
  font-weight: 600;
  color: #777;
  margin: -0.3rem 0 1.2rem;
}
.g1-best-note strong { color: var(--primary); }
.g1-best-note.new .pill {
  display: inline-block;
  background: #fbeaea;
  color: var(--primary);
  font-weight: 700;
  padding: 0.32rem 0.95rem;
  border-radius: 50px;
}
.g1-best-note.new .pill i { margin-right: 0.4rem; }
.g1-back-link {
  background: none;
  border: none;
  color: #888;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 1.3rem;
}
.g1-back-link:hover { color: var(--primary); }

/* ============================== CHEAT SHEET ==============================
   g1-cheat-sheet.html — full question bank with answers, rendered by
   js/g1-cheatsheet.js into #g1-cheat. Reuses .g1-categories/.g1-cat-btn. */

.g1-cheat { max-width: 860px; margin: 0 auto; }

.g1-cs-toolbar { text-align: center; margin-bottom: 2rem; }
.g1-cs-counts { font-size: 1.05rem; color: #555; margin-bottom: 1.2rem; }
.g1-cs-counts strong { color: var(--primary); }

.g1-cs-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
}
.g1-cs-controls .g1-categories { margin: 0; }
.g1-cs-controls #g1-cs-search {
  flex: 1 1 260px;
  max-width: 420px;
  border-radius: 50px;
  padding: 0.55rem 1.2rem;
  border: 2px solid #e3e3e3;
}
.g1-cs-controls #g1-cs-search:focus {
  border-color: var(--primary);
  box-shadow: none;
}
.g1-cs-controls #g1-cs-print { border-radius: 50px; padding: 0.55rem 1.4rem; }

.g1-cs-section {
  font-size: 1.45rem;
  margin: 2.6rem 0 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 3px solid var(--primary);
}
.g1-cs-section .cnt { font-size: 1rem; font-weight: 500; color: #888; }

.g1-cs-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 1.3rem 1.5rem;
  margin-bottom: 1.1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.g1-cs-head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.8rem;
}
.g1-cs-head img {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  object-fit: contain;
}
.g1-cs-head h3 {
  font-size: 1.08rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.45;
}
.g1-cs-head .qnum { color: var(--primary); margin-right: 0.2rem; }

.g1-cs-opts {
  list-style: none;
  margin: 0 0 0.8rem;
  padding: 0;
}
.g1-cs-opts li {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.32rem 0.6rem;
  border-radius: 8px;
  color: #666;
}
.g1-cs-opts li .key { font-weight: 700; color: #aaa; }
.g1-cs-opts li.right {
  background: #eaf6ea;
  color: #1d5e22;
  font-weight: 600;
}
.g1-cs-opts li.right .key { color: #2e7d32; }
.g1-cs-opts li.right i { color: #2e7d32; margin-left: auto; align-self: center; }

.g1-cs-why {
  font-size: 0.95rem;
  color: #555;
  background: #f8f8f8;
  border-left: 4px solid var(--primary);
  border-radius: 0 8px 8px 0;
  padding: 0.7rem 1rem;
  margin: 0;
}

.g1-cs-empty { text-align: center; color: #888; padding: 2rem 0; }

@media (max-width: 575px) {
  .g1-cs-head { flex-direction: column; align-items: center; text-align: center; }
  .g1-cs-controls #g1-cs-search { max-width: 100%; }
}

/* Print: clean study sheet — page chrome hidden, one card per block */
/* Print-only branding blocks (cheat sheet): hidden on screen, shown in print */
.g1-print-only { display: none; }

@media print {
  @page { margin: 1.4cm 1.2cm 1.7cm; }
  .navbar, .container-fluid.bg-dark, .page-header, .g1-bde, .footer,
  .copyright, .g1-cs-controls, #chatbase-bubble-button, .mobile-cta-wrapper {
    display: none !important;
  }
  body { opacity: 1 !important; background: #fff; }
  .g1-cs-card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
  .g1-cs-opts li.right { background: #fff; outline: 2px solid #2e7d32; }
  .container-fluid.py-6 { padding: 0 !important; }

  /* Branded print header / footer — turns every printed cheat sheet into marketing */
  .g1-print-only { display: block !important; }
  .g1-print-header {
    border-bottom: 2px solid var(--primary, #e10000);
    padding-bottom: 6px;
    margin-bottom: 14px;
    font-size: 11pt;
    color: #111;
  }
  .g1-print-header .g1-print-url { display: block; font-size: 9pt; color: #666; margin-top: 2px; }
  .g1-print-footer {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 2px solid var(--primary, #e10000);
    break-inside: avoid;
  }
  .g1-print-cta { font-size: 10.5pt; font-weight: 600; color: #111; margin: 0 0 6px; }
  .g1-print-copy { font-size: 8pt; color: #777; margin: 0; line-height: 1.4; }
  .g1-print-running {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    text-align: center;
    font-size: 8pt;
    color: #999;
    padding-bottom: 3px;
  }
}

/* Intro-screen link to the cheat sheet */
.g1-intro p.g1-intro-cheat {
  text-align: center;
  font-size: 0.95rem;
  color: #777;
  margin: 2.75rem auto 0;
}
.g1-intro-cheat a { color: var(--primary); font-weight: 600; }

/* ---- Study sets (intro screen): chunked progress through the bank ---- */
.g1-sets {
  max-width: 760px;
  margin: 3rem auto 0;
  text-align: center;
}
.g1-sets h3 { font-size: 1.35rem; margin-bottom: 0.4rem; }
.g1-sets-sub { color: #777; font-size: 0.95rem; margin-bottom: 1.2rem; }

.g1-sets-progress {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.4rem;
}
.g1-sets-progress .bar {
  flex: 1;
  height: 10px;
  background: #eee;
  border-radius: 50px;
  overflow: hidden;
}
.g1-sets-progress .fill {
  height: 100%;
  background: #2e7d32;
  border-radius: 50px;
  transition: width 0.4s ease;
}
.g1-sets-progress .txt {
  font-size: 0.9rem;
  font-weight: 600;
  color: #555;
  white-space: nowrap;
}

/* ---- Study-set grid: 16 cards, only ever 2 or 4 columns ----
   16 = 8x2 = 4x4, so every row is full at both counts — no orphaned card
   at any width (3 columns would always strand the 16th, which is the bug
   the old auto-fill produced on iPad). The 2->4 switch is pinned at 768px:
   that's where Bootstrap's .container jumps from 540px to 720px, giving the
   nested grid genuine room for comfortable 4-up cards. Below 768 (incl. the
   576-767 band, where .container is only 540px) we stay 2-up. */
.g1-set-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}
@media (max-width: 767.98px) {
  .g1-set-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
}

.g1-set {
  background: #fff;
  border: 2px solid #e6e3e0;
  border-radius: 14px;
  padding: 0.95rem 0.8rem;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 104px;            /* uniform rows: "Not started" & "Best 92%" cards match height */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
/* Set names are short and bounded ("Rules · Set 10") — never let them wrap */
.g1-set-name {
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: #1f1f1f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  margin-bottom: 0.18rem;
}
.g1-set-meta {
  font-size: 0.8rem;
  color: #6e6e6e;               /* AA contrast on white (was #999, ~2.8:1 — fails) */
  line-height: 1.25;
  margin-bottom: 0.45rem;
  font-variant-numeric: tabular-nums;
}
.g1-set-best {
  font-size: 0.84rem;
  font-weight: 600;
  color: #2e7d32;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.g1-set-best.todo { color: #7a7a7a; font-weight: 500; }   /* AA contrast (was #bbb) */
.g1-set:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(206, 37, 42, 0.10);
}
.g1-set:active { transform: translateY(0); border-color: var(--primary); }
.g1-set:focus { outline: none; }                          /* no double ring on mouse press */
.g1-set:focus-visible {                                    /* visible keyboard ring (was missing) */
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-color: var(--primary);
}
.g1-set.done {
  border-color: #2e7d32;
  background: #f4faf4;
  box-shadow: 0 2px 6px rgba(46, 125, 50, 0.08);
}
.g1-set.done .g1-set-name { color: #1d5e22; }

.g1-sets-left {
  font-size: 0.95rem;
  color: #777;
  margin: -0.4rem 0 1rem;
}

/* Tablet 4-up (768-991): the grid is nested inside .g1-intro's roomy side
   padding, so trim that padding here and shrink the name a touch — keeps four
   cards across genuinely roomy on iPad portrait instead of squashed. */
@media (min-width: 768px) and (max-width: 991.98px) {
  .g1-intro { padding: 2.5rem 1.25rem; }
  .g1-set-name { font-size: 0.92rem; }
}

/* Phone 2-up (<=575): tighter type, stacked progress row. */
@media (max-width: 575px) {
  .g1-set { min-height: 94px; padding: 0.8rem 0.55rem; }
  .g1-set-name { font-size: 0.88rem; }
  .g1-set-meta { font-size: 0.74rem; margin-bottom: 0.35rem; }
  .g1-set-best { font-size: 0.78rem; }
  .g1-sets-progress { flex-direction: column; gap: 0.4rem; align-items: stretch; }
  .g1-sets-progress .txt { text-align: center; }
}

/* Respect reduced-motion: keep the colour affordance, drop the lift. */
@media (prefers-reduced-motion: reduce) {
  .g1-set:hover, .g1-set:active { transform: none; }
}