/* ARBA · board-qol.css — quality-of-life layer for the Streakboard and the
   You hub. Kept in its own file (not css/styles.css) because two other
   passes own that file concurrently; wire it into index.html + sw.js
   separately.

   Everything here follows arba-mom-friendly-ux-sop.md: type in rem only
   (root stays at the browser's own 100%, so a member who already turned her
   phone text size up gets that multiplied through), nothing below the
   15px-equivalent floor (0.9375rem — and nothing here actually goes under
   1.1581rem / ~18.5px), and every control at least 44px tall. */

/* ---------- Undo-on-delete bar ------------------------------------------
   A delete on the Streakboard is now optimistic-with-a-window rather than a
   confirm() dialog: the row leaves immediately and the real server call is
   held for five seconds behind this bar. That is deliberately the *bigger,
   simpler* option — one tired-thumb tap to undo beats a modal she has to
   read at 5am to avoid a mistake she has not made yet.

   Fixed-position collision check (all fixed elements in css/styles.css:
   .tabbar bottom:0 z-index:40, .toast bottom:110px z-index:80,
   .sheet-overlay/.celebrate-overlay inset:0 z-index:90/110, .ember-burst
   z-index:120, .install-coach bottom:14px):
   - .tabbar — cleared: this bar's bottom edge sits at 110px, above the
     tab bar's ~88px height including safe-area padding.
   - .toast — same bottom offset ON PURPOSE, and this bar takes over the
     toast's job for a delete, so the two are never raised together by the
     delete path. z-index 85 keeps this bar on top if an unrelated poll
     error toast does fire underneath it.
   - .install-coach — bottom:14px, only ever shown pre-install on the
     Hearth; the 110px offset clears its ~60px height.
   - sheets/celebrations/bursts sit above at 90+, which is correct: a sheet
     is modal and should cover this.

   Namespaced `.sb-undo-*` rather than `.undo-*` on purpose: a concurrent
   pass landed its own Hearth undo bar using `.undo-bar`/`.undo-btn`/
   `.undo-text` in css/styles.css at a different bottom offset, and two
   stylesheets defining the same class would have made the winner depend on
   load order. Flagged for reconciliation into one shared helper (ui.js) —
   neither file is mine to merge into. */
.sb-undo-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(1rem);
  bottom: 110px;
  width: calc(100% - 1.5rem);
  max-width: var(--maxw);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0.75rem 0.75rem 1.125rem;
  background: #2a1530;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(5, 2, 12, 0.55);
  opacity: 0;
  z-index: 85;
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.sb-undo-bar.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.sb-undo-msg {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.1581rem;   /* ~18.5px — same as .small, above the 15px floor */
  line-height: 1.25;
  color: var(--text);
}

.sb-undo-btn {
  flex: 0 0 auto;
  min-height: 44px;       /* mom-friendly SOP rule 2 — hard floor, no exceptions */
  min-width: 7rem;
  padding: 0 1.25rem;
  border: 1px solid rgba(255, 206, 110, 0.5);
  border-radius: 999px;
  background: rgba(255, 126, 46, 0.16);
  color: var(--amber);
  font-family: var(--label);
  font-size: 1.2353rem;   /* the one thing she taps — bigger than the message */
  font-weight: 600;
  cursor: pointer;
}
.sb-undo-btn:active { background: rgba(255, 126, 46, 0.3); }

/* The window closing, shown rather than counted down in numbers — a
   shrinking line reads at a glance; "4… 3… 2…" makes her hurry. */
.sb-undo-track {
  position: absolute;
  left: 1.125rem;
  right: 1.125rem;
  bottom: 0.375rem;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 206, 110, 0.16);
  overflow: hidden;
}
.sb-undo-fill {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  background: var(--grad);
  animation: undoDrain 5s linear forwards;
}
@keyframes undoDrain { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .sb-undo-bar { transition: none; }
  .sb-undo-fill { animation-duration: 5s; animation-timing-function: linear; }
}

/* ---------- Fire Rank, expressed as time ---------------------------------
   "0/40 sessions" is a number with no meaning attached until you already
   know the economy. This line is the translation into something a person
   can feel — weeks of showing up — and it is deliberately the largest text
   in the Fire Rank panel, because it is the sentence she is actually asking
   the panel for. */
.rank-eta {
  margin: 0.75rem 0 0;
  font-size: 1.3125rem;   /* 21px base per the SOP — this is body-primary, not a caption */
  line-height: 1.3;
  color: #e6d8f7;
}
.rank-eta b {
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--amber);
}
.rank-eta-why {
  margin: 0.375rem 0 0;
  font-size: 1.1581rem;
  color: var(--muted);
}