/* mobile.css — phone capture shell (mobile mode screens + mode-toggle visibility) */

/* ---- Mode toggle: the desktop header's "Mobile" button only makes sense on a
   phone-sized viewport (a phone user who overrode to desktop mode). ---- */
#btn-mode-mobile { display: none; }
@media (max-width: 700px) {
  #btn-mode-mobile { display: inline-block; }
}

/* ---- Shell ---- */

.m-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  padding-top: calc(0.6rem + env(safe-area-inset-top));
  background: var(--primary);
  color: #fff;
}

.m-header img { height: 28px; }

.m-header h1 {
  flex: 1;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-header .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, 0.35); }

.m-header-right { display: flex; gap: 0.4rem; }

.m-body {
  flex: 1;
  padding: 0.9rem;
  padding-bottom: calc(0.9rem + env(safe-area-inset-bottom));
  max-width: 640px;
  width: 100%;
  margin: 0 auto;
}

.m-section-title {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 1.1rem 0 0.5rem;
}
.m-section-title:first-child { margin-top: 0; }
.m-section-title .teacher-name { font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ---- Lists (big tap targets) ---- */

.m-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.m-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(27, 58, 107, 0.08);
}
.m-row:last-child { border-bottom: none; }
.m-row:active { background: var(--bg); }

.m-row-name { font-size: 1.05rem; font-weight: 500; }
.m-row-sub  { font-size: 0.85rem; color: var(--muted); }

.m-row-disabled { cursor: default; color: var(--muted); }
.m-row-past     { opacity: 0.55; }

.m-empty {
  padding: 1rem;
  color: var(--muted);
  font-size: 0.9rem;
  text-align: center;
}

.m-search {
  width: 100%;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.5rem;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

/* ---- Capture menu ---- */

.m-capture-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.m-capture-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 120px;
  padding: 1rem 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.m-capture-btn:active { background: var(--bg); }

.m-capture-icon { font-size: 2rem; }

.m-coming-soon {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
}

.m-coming-soon.m-status-error { color: var(--danger); border-color: var(--danger); }

.m-success {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  color: var(--success);
  background: var(--surface);
  border: 1px solid var(--success);
  border-radius: var(--radius);
  text-align: center;
}

/* ---- Camera screen ---- */

.m-cam-hint {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.m-cam-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.m-cam-strip:empty { display: none; }

.m-cam-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.m-cam-tile img { width: 100%; height: 100%; object-fit: cover; }

.m-cam-tile-pending {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.m-cam-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.9rem;
  cursor: pointer;
}

.m-cam-take {
  display: block;
  width: 100%;
  padding: 1.1rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  background: var(--primary);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
}
.m-cam-take:active { background: var(--primary-dark); }

.m-cam-library {
  display: block;
  margin: 0.5rem auto 1rem;
}

.m-cam-save {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.9rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  background: var(--success);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}
.m-cam-save:disabled { background: var(--muted); opacity: 0.6; cursor: default; }

/* ---- Scan adjust screen ---- */

.m-scan-count {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--muted);
}

/* touch-action: none is load-bearing — without it a corner drag scrolls the
   page instead of moving the handle. */
.m-scan-stage {
  position: relative;
  margin: 0 auto 0.5rem;
  touch-action: none;
}

#m-scan-canvas {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.m-scan-handle {
  position: absolute;
  width: 44px;                 /* full-size touch target… */
  height: 44px;
  margin: -22px 0 0 -22px;     /* …centred on the corner point */
  touch-action: none;
  cursor: grab;
}
.m-scan-handle::after {        /* the visible dot */
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--primary);
  border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.m-scan-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.m-scan-actions .m-scan-done {
  flex: 1;
  width: auto;
  margin-top: 0;
}

/* ---- Session Notes hub (swipe cards + capture entry point) ---- */

.m-notes-add {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.m-notes-add-btn {
  padding: 0.8rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--surface);
  border: 1px dashed var(--primary);
  border-radius: var(--radius);
  cursor: pointer;
}
.m-notes-add-btn:active { background: var(--bg); }

/* Note card (one full-width swipe page each; header reuses .m-lpc-head) */

.m-sn-card {
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.m-sn-body {
  margin-top: 0.6rem;
  font-size: 0.95rem;
  line-height: 1.45;
  word-break: break-word;
}
.m-sn-body p { margin: 0 0 0.4em; }
.m-sn-body p:last-child { margin-bottom: 0; }
.m-sn-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.4rem 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* ---- Typed note screen ----
   The editor + toolbar reuse the desktop .sn-* styles (layout.css); these
   rules only size them for a phone. */

.m-note-tmpl {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.m-note-tmpl select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.m-note-tmpl-row {
  display: flex;
  gap: 0.5rem;
}
.m-note-tmpl-row select { flex: 1; min-width: 0; }
.m-note-tmpl-row .btn { flex-shrink: 0; }

#m-note-editor {
  min-height: 40vh;
  margin-bottom: 0.75rem;
  font-size: 1rem;   /* ≥16px stops iOS zooming in when the editor is focused */
  background: var(--surface);
}

/* ---- Shared pager (GBL programs, LPC entries) ----
   ‹ label + pips/counter › nav above a scroll-snap page strip (buildPager). */

.m-pager-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.m-pager-nav-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.m-pager-nav-btn:disabled { opacity: 0.35; }

.m-pager-nav-center { flex: 1; min-width: 0; text-align: center; }

.m-pager-nav-name {
  font-size: 1rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.m-pager-pips {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 0.3rem;
}
.m-pager-pip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
}
.m-pager-pip-active { background: var(--primary); }

.m-pager-counter {
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.m-pager {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.m-pager::-webkit-scrollbar { display: none; }

.m-pager-page {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}

/* ---- Goodbye List tap-logger ---- */

/* New skill (bottom of each program page) */

.m-gbl-add { margin-top: 0.75rem; }

.m-gbl-add-btn {
  display: block;
  width: 100%;
  padding: 0.8rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--surface);
  border: 1px dashed var(--primary);
  border-radius: var(--radius);
  cursor: pointer;
}

.m-gbl-add-form {
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.m-gbl-add-form .m-search { margin-bottom: 0.6rem; }

.m-gbl-add-req {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  font-size: 0.9rem;
  color: var(--muted);
}
.m-gbl-add-req input {
  width: 64px;
  padding: 0.45rem;
  font-size: 1rem;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.m-gbl-add-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.m-gbl-add-error { margin-top: 0.6rem; }

.m-gbl-card {
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.m-gbl-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.m-gbl-name { font-size: 1.1rem; font-weight: 600; }

.m-gbl-streak { font-size: 0.95rem; color: var(--muted); white-space: nowrap; }
.m-gbl-streak-done { color: var(--success); font-weight: 600; }

.m-gbl-dots { display: flex; gap: 4px; margin-top: 0.45rem; }

.m-gbl-prompt {
  margin-top: 0.45rem;
  font-size: 0.85rem;
  color: var(--warning);
}

.m-gbl-btns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.7rem;
}

.m-gbl-btn {
  padding: 0.85rem 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  background: var(--surface);
  border: 2px solid;
  border-radius: var(--radius);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-gbl-btn:disabled { opacity: 0.5; }
.m-gbl-correct  { border-color: #22c55e; color: #16a34a; }
.m-gbl-prompted { border-color: #f59e0b; color: #d97706; }
.m-gbl-error    { border-color: #ef4444; color: #dc2626; }
.m-gbl-correct:active  { background: #22c55e; color: #fff; }
.m-gbl-prompted:active { background: #f59e0b; color: #fff; }
.m-gbl-error:active    { background: #ef4444; color: #fff; }

.m-gbl-undo-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.6rem;
  font-size: 0.9rem;
  color: var(--muted);
}
/* The undo button sits on a white card, not the navy header. */
.m-gbl-undo-line .btn-ghost { color: var(--primary); border-color: var(--border); }

/* ---- Fluency timer + number pad ---- */

/* Chart-type segmented control */

.m-fl-types {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.m-fl-type {
  flex: 1;
  padding: 0.7rem 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-fl-type:last-child { border-right: none; }
.m-fl-type.active { background: var(--primary); color: #fff; }

/* Timer card */

.m-fl-timer-card {
  margin-top: 0.75rem;
  padding: 0.85rem 1rem;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.m-fl-durations {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.m-fl-dur {
  padding: 0.4rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
}
.m-fl-dur.active {
  color: var(--primary);
  border-color: var(--primary);
  background: rgba(27, 58, 107, 0.06);
}

.m-fl-custom-secs {
  width: 76px;
  padding: 0.4rem 0.5rem;
  font-size: 0.95rem;
  text-align: center;
  border: 1px solid var(--primary);
  border-radius: 999px;
  background: var(--surface);
}

.m-fl-clock {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.m-fl-clock.m-fl-warn { color: var(--danger); }
.m-fl-clock.m-fl-done { color: var(--danger); animation: m-fl-flash 0.4s 4; }
@keyframes m-fl-flash { 50% { opacity: 0.25; } }

.m-fl-timer-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 0.4rem;
}

.m-fl-start {
  min-width: 130px;
  padding: 0.8rem 1rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  background: var(--success);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.m-fl-start.m-fl-running { background: var(--warning); }

/* The reset button sits on the white timer card, not the navy header. */
.m-fl-timer-btns .btn-ghost { color: var(--primary); border-color: var(--border); }

/* Value chips (pad targets) */

.m-fl-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.m-fl-chip {
  padding: 0.5rem 0.75rem;
  text-align: left;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.m-fl-chip.active { border-color: var(--primary); }

/* Read-only calculated chip (WPM derived from Words + timer/Time) */
.m-fl-chip-calc { border-style: dashed; background: var(--bg); cursor: default; }

.m-fl-chip-label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.m-fl-chip-value {
  display: block;
  min-height: 1.3em;
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.m-fl-chip-value:empty::before { content: '—'; color: var(--border); }

/* Number pad */

.m-fl-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.m-fl-key {
  padding: 0.75rem;
  font-size: 1.4rem;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;   /* no double-tap zoom during rapid entry */
}
.m-fl-key:active { background: var(--bg); }
.m-fl-key-del { color: var(--danger); }

/* Program + details fields */

.m-fl-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.m-fl-field select,
.m-fl-field input {
  padding: 0.6rem 0.7rem;
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.m-fl-field input:disabled {
  background: var(--bg);
  color: var(--muted);
  cursor: not-allowed;
}

.m-fl-details { margin-top: 0.9rem; }
.m-fl-details summary {
  padding: 0.25rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
}

/* Save + logged/undo line */

.m-fl-save {
  display: block;
  width: 100%;
  margin-top: 1rem;
  padding: 0.9rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  background: var(--success);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}
.m-fl-save:disabled { background: var(--muted); opacity: 0.6; cursor: default; }

.m-fl-logged {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.95rem;
  color: var(--success);
  background: var(--surface);
  border: 1px solid var(--success);
  border-radius: var(--radius);
}
.m-fl-logged .btn-ghost { color: var(--primary); border-color: var(--border); }

/* ---- Lesson Progress cards ---- */

/* Latest binder review pinned above the pager (amber br-* styles in layout.css) */
.m-lpc-review-card { margin-bottom: 0.75rem; }

.m-lpc-new {
  display: block;
  width: 100%;
  margin-bottom: 0.75rem;
  padding: 0.8rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--surface);
  border: 1px dashed var(--primary);
  border-radius: var(--radius);
  cursor: pointer;
}

/* Entry card (one full-width swipe page each) */

.m-lpc-card {
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.m-lpc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.m-lpc-date    { font-size: 1.05rem; font-weight: 600; }
.m-lpc-teacher { font-size: 0.85rem; color: var(--muted); }

.m-lpc-rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.45rem 0.9rem;
  margin-top: 0.6rem;
}

.m-lpc-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  align-self: baseline;
  white-space: nowrap;
}

.m-lpc-value {
  font-size: 0.98rem;
  word-break: break-word;
}

.m-lpc-comments {
  margin-top: 0.6rem;
  padding: 0.55rem 0.7rem;
  font-size: 0.9rem;
  background: var(--bg);
  border-radius: var(--radius);
  white-space: pre-wrap;
  word-break: break-word;
}

.m-lpc-edit {
  display: block;
  width: 100%;
  margin-top: 0.7rem;
  padding: 0.7rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
}
.m-lpc-edit:active { background: var(--bg); }

/* New / Edit form */

.m-lpc-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.m-fl-field textarea {
  padding: 0.6rem 0.7rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  resize: vertical;
}

.m-lpc-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  font-size: 0.95rem;
}
.m-lpc-check input {
  width: 20px;
  height: 20px;
  accent-color: var(--primary);
}

.m-lpc-cancel {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.7rem;
  color: var(--primary);
  border-color: var(--border);
}

/* ---- Progress charts (kid-facing fluency view) ---- */

.m-prog-title {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
}

/* One card per chart type; the top border takes the series color in JS. */
.m-prog-card {
  padding: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 6px solid var(--primary);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.m-prog-head {
  font-size: 1.3rem;
  font-weight: 700;
  text-align: center;
}

.m-prog-sub {
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
}

.m-prog-stats {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.m-prog-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.25rem;
  background: var(--bg);
  border-radius: 12px;
}

.m-prog-stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.m-prog-stat-label {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
}

.m-prog-cheer {
  margin-top: 0.6rem;
  padding: 0.55rem 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  background: #fef9c3;                /* soft sunshine banner */
  border-radius: 12px;
}

/* Chart.js needs a sized, positioned box with maintainAspectRatio: false. */
.m-prog-chartwrap {
  position: relative;
  height: 260px;
  margin-top: 0.75rem;
}

.m-prog-hint {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
}

/* ---- Point Bank (kid-facing; LPC points) ---- */

.m-pb-balance-card {
  padding: 1.1rem 1rem 1rem;
  text-align: center;
  background: linear-gradient(135deg, #fef3c7, #fde68a);   /* warm gold */
  border: 1px solid #f59e0b;
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.m-pb-balance-star { font-size: 2.2rem; line-height: 1; }

.m-pb-balance {
  font-size: 3.2rem;
  font-weight: 800;
  line-height: 1.15;
  color: #92400e;                     /* amber-900 on the gold card */
  font-variant-numeric: tabular-nums;
}
.m-pb-balance.m-pb-pop { animation: m-pb-pop 0.45s ease-out; }
@keyframes m-pb-pop {
  40% { transform: scale(1.25); }
}

.m-pb-balance-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #92400e;
}

/* Add / Spend / Adjust segmented control (same shape as the fluency type switch) */

.m-pb-mode {
  display: flex;
  margin-top: 0.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.m-pb-mode-btn {
  flex: 1;
  padding: 0.7rem 0.25rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  border-right: 1px solid var(--border);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.m-pb-mode-btn:last-child { border-right: none; }
.m-pb-mode-btn.active { background: var(--primary); color: #fff; }

.m-pb-amount-card {
  margin-top: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.m-pb-amount {
  font-size: 2.6rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.m-pb-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin: 0.5rem 0 0.75rem;
}

.m-pb-key {
  padding: 0.75rem;
  font-size: 1.4rem;
  font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;         /* no double-tap zoom during rapid taps */
}
.m-pb-key:active { background: var(--bg); }
.m-pb-key-clear { color: var(--danger); }
.m-pb-key-del   { color: var(--danger); }

.m-pb-confirm { margin-top: 0.5rem; }

.m-pb-hint { margin: 0.6rem 0 0; text-align: center; color: var(--danger); }

/* History rows: date + signed points, spend reason as the sub line. */

.m-pb-row { cursor: default; }

.m-pb-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}

.m-pb-row-pts {
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.m-pb-row-earn  { color: var(--success); }
.m-pb-row-spend { color: var(--danger); }