/* ============================================================
   CATCH-UP — the full-screen hand-off between one duty and the
   next.

   Deliberately a whole screen and not a card. The panel this
   replaces sat under a finished register, in the same weight as
   everything else around it, at the moment a teacher believes
   they are done — and it was scrolled past every day. A screen
   with one sentence and one button on it cannot be.
   ============================================================ */

.catchup-screen {
  position: fixed;
  inset: 0;
  /* Above sheets (7001) and the PWA install prompt: this screen is
     the one thing being asked, and anything that covers it is the
     whole reason the inline version was being missed. The toast
     layer (10000) deliberately stays on top, so a save confirmation
     still shows over it. */
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--navy-deep);
  opacity: 0;
  transition: opacity 200ms ease;
  /* Nothing behind it should be reachable: that is the point. */
  overscroll-behavior: contain;
}
.catchup-screen.open { opacity: 1; }

.catchup-screen__inner {
  width: 100%;
  max-width: 400px;
  text-align: center;
  transform: translateY(10px);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.catchup-screen.open .catchup-screen__inner { transform: none; }

.catchup-screen__mark {
  width: 68px; height: 68px;
  margin: 0 auto 22px;
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(212,160,23,0.16);
  color: var(--gold);
}
.catchup-screen--done .catchup-screen__mark {
  background: rgba(46,160,96,0.18);
  color: #46c47d;
}
.catchup-screen__mark svg { width: 32px; height: 32px; }

.catchup-screen__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.catchup-screen__title {
  font-size: 25px;
  font-weight: 900;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 12px;
}

.catchup-screen__body {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
  margin: 0 0 28px;
}

.catchup-screen__primary {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: var(--r-lg);
  background: var(--gold);
  color: var(--navy-deep);
  font-size: 15.5px;
  font-weight: 800;
  cursor: pointer;
  transition: transform var(--fast), filter var(--fast);
}
.catchup-screen__primary:active { transform: scale(0.98); }
.catchup-screen__primary svg { width: 18px; height: 18px; }

.catchup-screen__secondary {
  margin-top: 14px;
  padding: 10px;
  width: 100%;
  border: none;
  background: none;
  color: rgba(255,255,255,0.55);
  font-size: 14px;
  font-weight: var(--semibold);
  cursor: pointer;
}
.catchup-screen__secondary:hover { color: rgba(255,255,255,0.85); }

/* ── The dashboard card that counts what is owed ────────── */
.catchup-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  margin-bottom: 16px;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, #8a2f2f 0%, #b24343 100%);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}
/* Only today outstanding is a nudge, not an alarm — a teacher who
   has missed nothing should not be shouted at before lunch. */
.catchup-card--today {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid, #243875) 100%);
}
.catchup-card__icon {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: var(--r-lg);
  background: rgba(255,255,255,0.16);
  display: flex;
  align-items: center;
  justify-content: center;
}
.catchup-card__icon svg { width: 21px; height: 21px; stroke: #fff; }
.catchup-card__body { flex: 1; min-width: 0; }
.catchup-card__title {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 3px;
}
.catchup-card__meta {
  font-size: 12.5px;
  color: rgba(255,255,255,0.78);
  line-height: 1.35;
}
.catchup-card__cta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 800;
}
.catchup-card__cta svg { width: 16px; height: 16px; stroke: #fff; }

/* A break is good news, not an alert. Same card, calm colours. */
.catchup-card--break {
  background: linear-gradient(135deg, #15603f 0%, #1f8457 100%);
  cursor: default;
}

/* The third choice on a catch-up screen — "no, it was a holiday".
   Quieter than "not now": it is the rarer answer, and it changes
   the register, so it should take a moment's deliberate aim. */
.catchup-screen__tertiary {
  margin-top: 4px;
  padding: 10px;
  width: 100%;
  border: none;
  background: none;
  color: rgba(255,255,255,0.38);
  font-size: 13px;
  font-weight: var(--medium);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.catchup-screen__tertiary:hover:not(:disabled) { color: rgba(255,255,255,0.7); }
.catchup-screen__tertiary:disabled { opacity: .5; cursor: default; }

/* ============================================================
   ABSENCE CARD — "your child was marked absent today", with
   something to do about it.

   Red, because this is the one card in the app that is genuinely
   urgent to a parent, and it should not look like the rest. Two
   actions, both large enough to hit while walking.
   ============================================================ */
.absence-card {
  position: relative;
  padding: 16px 44px 16px 16px;
  margin-bottom: 16px;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid rgba(185, 28, 28, .22);
  border-left: 4px solid #b91c1c;
  box-shadow: var(--shadow-sm);
}
.absence-card__head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}
.absence-card__dot {
  width: 7px; height: 7px;
  border-radius: var(--r-full);
  background: #b91c1c;
  flex-shrink: 0;
}
.absence-card__kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #b91c1c;
}
.absence-card__title {
  font-size: 17px;
  font-weight: 800;
  color: var(--navy-deep);
  line-height: 1.2;
}
.absence-card__body {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.absence-card__actions {
  margin-top: 14px;
  display: flex;
  gap: 8px;
}
.absence-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--navy-deep);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.absence-btn svg { width: 17px; height: 17px; stroke: currentColor; flex-shrink: 0; }
.absence-btn:active { transform: scale(0.98); }
/* Calling is the thing most parents will want first, so it leads. */
.absence-btn--call {
  background: #128C7E;        /* WhatsApp's own green — it opens WhatsApp */
  border-color: #128C7E;
  color: #fff;
}
.absence-card__dismiss {
  position: absolute;
  top: 6px; right: 6px;
  width: 32px; height: 32px;
  border: none;
  background: none;
  border-radius: var(--r-full);
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.absence-card__dismiss:hover { background: var(--bg); color: var(--text-primary); }