/* ==========================================================================
   Point system (stars)
   Scoped under .pts so these tokens never leak into the rest of the app.
   Palette keeps the madrasah green; amber is reserved for star figures only.
   ========================================================================== */

.pts {
  --p-ink:      #14231d;
  --p-ink-soft: #5b6b64;
  --p-ink-mute: #8a9791;
  --p-paper:    #fbfaf7;
  --p-card:     #ffffff;
  --p-rule:     #e6e8e4;
  --p-green:    #1a5c47;
  --p-green-dk: #10402f;
  --p-green-lt: #eaf2ee;
  --p-amber:    #d98a1f;
  --p-amber-lt: #fdf2dd;

  --p-ease:      cubic-bezier(.23, 1, .32, 1);
  --p-ease-back: cubic-bezier(.34, 1.56, .64, 1);

  font-family: Figtree, ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--p-ink);
  background: var(--p-paper);
}

.pts h1, .pts h2, .pts h3, .pts .pts-display {
  font-family: "Bricolage Grotesque", Figtree, sans-serif;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}

.pts :focus-visible {
  outline: 2.5px solid var(--p-green);
  outline-offset: 3px;
  border-radius: 6px;
}

.pts-num { font-variant-numeric: tabular-nums; }

/* ── header ─────────────────────────────────────────────────────────────── */
.pts-top { padding: 1.1rem 1.1rem .9rem; background: var(--p-card); border-bottom: 1px solid var(--p-rule); }
.pts-eyebrow { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.pts-cls { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.35rem; letter-spacing: -.02em; }
.pts-sub { color: var(--p-ink-mute); font-size: .82rem; font-weight: 600; margin-top: .1rem; }
.pts-chip {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  background: var(--p-green-lt); color: var(--p-green);
  font-weight: 700; font-size: .78rem; padding: .35rem .65rem; border-radius: 9px;
  text-decoration: none;
}
.pts-chip:hover { background: #dceae3; }
.pts-todaybar { display: flex; align-items: center; gap: .55rem; margin-top: .9rem; font-size: .82rem; font-weight: 600; color: var(--p-ink-soft); }
.pts-todaybar b { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; color: var(--p-amber); font-size: 1rem; }
.pts-prog { flex: 1; height: 5px; border-radius: 99px; background: var(--p-rule); overflow: hidden; }
.pts-prog i { display: block; height: 100%; background: var(--p-green); border-radius: 99px; transition: width .4s var(--p-ease); }


/* ── header: switcher + segmented control ──────────────────────────────── */
.pts-head { padding: 1rem 1.1rem .85rem; background: var(--p-card); border-bottom: 1px solid var(--p-rule); }
.pts-head-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.pts-head-meta { font-size: .8rem; font-weight: 600; color: var(--p-ink-mute); white-space: nowrap; }

.pts-switch { position: relative; }
.pts-switch-btn {
  display: flex; align-items: center; gap: .4rem; cursor: pointer;
  background: none; border: 0; padding: .15rem .1rem; color: inherit; font: inherit;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.35rem;
  letter-spacing: -.02em; border-radius: 9px;
  transition: opacity .15s var(--p-ease);
}
.pts-switch-btn:active { opacity: .6; }
.pts-switch-caret { width: 20px; height: 20px; color: var(--p-green); transition: transform .25s var(--p-ease); }
.pts-switch.is-open .pts-switch-caret { transform: rotate(180deg); }
.pts-switch-menu {
  position: absolute; top: calc(100% + .5rem); left: -.35rem; z-index: 40; min-width: 200px;
  background: var(--p-card); border: 1px solid var(--p-rule); border-radius: 14px;
  box-shadow: 0 14px 34px -14px rgba(10, 26, 20, .34); padding: .3rem; overflow: hidden;
  animation: ptsMenu .18s var(--p-ease);
}
@keyframes ptsMenu { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.pts-switch-item {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem .7rem; border-radius: 10px; text-decoration: none; color: inherit;
  font-weight: 600; font-size: .9rem; transition: background .14s var(--p-ease);
}
.pts-switch-item:hover { background: var(--p-green-lt); }
.pts-switch-item.is-current { background: var(--p-green); color: #fff; }
.pts-switch-count { font-size: .74rem; font-weight: 700; opacity: .6; font-variant-numeric: tabular-nums; }

.pts-seg {
  position: relative; display: flex; margin-top: .9rem;
  background: oklch(95.5% 0.008 150); border-radius: 12px; padding: 3px;
  box-shadow: inset 0 1px 2px rgba(20, 35, 29, .06);
}
.pts-seg-pill {
  position: absolute; top: 3px; bottom: 3px; left: 0; border-radius: 9px;
  background: var(--p-card);
  box-shadow: 0 1px 2px rgba(20, 35, 29, .1), 0 2px 6px -2px rgba(20, 35, 29, .14);
  transition: transform .32s var(--p-ease), width .32s var(--p-ease);
  pointer-events: none;
}
.pts-seg-btn {
  position: relative; z-index: 1; flex: 1;
  display: flex; align-items: center; justify-content: center; gap: .38rem;
  padding: .55rem .5rem; border-radius: 9px; text-decoration: none;
  font-family: Figtree, sans-serif; font-weight: 600; font-size: .89rem;
  color: var(--p-ink-mute); letter-spacing: -.005em;
  transition: color .22s var(--p-ease);
}
.pts-seg-btn svg { width: 16px; height: 16px; opacity: .75; transition: opacity .22s var(--p-ease); }
.pts-seg-btn.is-on { color: var(--p-ink); font-weight: 700; }
.pts-seg-btn.is-on svg { opacity: 1; color: var(--p-green); }
.pts-seg-btn:active { transform: scale(.97); }


/* ── day bar ───────────────────────────────────────────────────────────── */
.pts-daybar {
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem 1.1rem; background: var(--p-card);
  border-bottom: 1px solid var(--p-rule); flex-wrap: wrap;
}
.pts-day-nav {
  display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto;
  border-radius: 9px; background: var(--p-green-lt); color: var(--p-green);
  transition: background .15s var(--p-ease), transform .14s var(--p-ease);
}
.pts-day-nav svg { width: 17px; height: 17px; }
.pts-day-nav:hover { background: #dceae3; }
.pts-day-nav:active { transform: scale(.92); }
.pts-day { font-weight: 700; font-size: .88rem; white-space: nowrap; }
.pts-daybar-stats {
  display: flex; align-items: center; gap: .5rem; margin-left: auto;
  font-size: .82rem; font-weight: 600; color: var(--p-ink-soft); min-width: 165px;
}
.pts-daybar-stats b {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800;
  color: var(--p-amber); font-size: 1rem;
}
.pts-hallbtn {
  display: inline-flex; align-items: center; gap: .4rem; margin-left: auto;
  background: var(--p-green-lt); color: var(--p-green); text-decoration: none;
  font-weight: 700; font-size: .8rem; padding: .4rem .7rem; border-radius: 10px;
  transition: background .15s var(--p-ease), transform .14s var(--p-ease);
}
.pts-hallbtn svg { width: 15px; height: 15px; }
.pts-hallbtn:hover { background: #dceae3; }
.pts-hallbtn:active { transform: scale(.96); }

/* ── roster ─────────────────────────────────────────────────────────────── */
.pts-roster {
  display: grid; gap: .3rem .1rem; padding: 1rem .8rem 6rem;
  grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 640px)  { .pts-roster { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 1024px) { .pts-roster { grid-template-columns: repeat(7, 1fr); } }

.pts-kid {
  background: none; border: 0; padding: .6rem .2rem .55rem; font: inherit; color: inherit;
  display: flex; flex-direction: column; align-items: center; gap: .45rem;
  cursor: pointer; border-radius: 15px;
  transition: background .16s var(--p-ease), transform .16s var(--p-ease);
}
.pts-kid:hover { background: var(--p-green-lt); }
.pts-kid:active { transform: scale(.96); }
.pts-face {
  width: 66px; height: 66px; border-radius: 50%; position: relative;
  background: var(--p-green); color: #fff; display: grid; place-items: center;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.15rem;
  box-shadow: 0 0 0 1px rgba(20, 35, 29, .06);
}
.pts-face img, .pts-row-f img, .pts-who-face img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: 50%;
}
.face-i { line-height: 1; }
.pts-kid-name {
  font-size: .78rem; font-weight: 600; text-align: center; line-height: 1.2;
  max-width: 10ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pts-kid-pts {
  position: absolute; top: -4px; right: -8px;
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: 99px;
  background: var(--p-amber); color: #fff;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: .7rem;
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2.5px var(--p-paper);
}
.pts-kid.is-done .pts-face { box-shadow: 0 0 0 2.5px var(--p-green); }

/* ── sticker badge ──────────────────────────────────────────────────────── */
.pts-stk {
  --d: 64px;
  width: var(--d); height: var(--d); border-radius: 50%;
  position: relative; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--stk-bg, #2b7cc4);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .16), inset 0 0 0 7px var(--stk-ring, #f5c518);
  overflow: visible;
  /* the emblem picks up the ring colour; each shape carries its own dark outline */
  color: var(--stk-ring, #f5c518);
}
.pts-stk.has-art { background: none; box-shadow: none; }
/* the artwork already carries its own point value, so drop the chip */
.pts-stk.has-art .pts-stk-n { display: none; }
.pts-stk img { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.pts-stk svg { width: 46%; height: 46%; display: block; }
.pts-stk-n {
  position: absolute; left: -3px; bottom: -3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--stk-ring, #f5c518); color: #14231d;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: .7rem;
  display: grid; place-items: center; box-shadow: 0 0 0 2.5px rgba(0, 0, 0, .16);
}
.pts-stk-sm { --d: 34px; }
.pts-stk-sm .pts-stk-n { display: none; }
.pts-stk-lg { --d: 104px; }
.pts-stk-lg .pts-stk-n { width: 30px; height: 30px; font-size: .9rem; }

/* ── sheet ──────────────────────────────────────────────────────────────── */
.pts-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  max-width: 520px; margin: 0 auto;
  background: var(--p-card);
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -1px 0 var(--p-rule), 0 -18px 44px -20px rgba(10, 26, 20, .38);
  padding: .7rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom));
  transform: translateY(101%);
  transition: transform .4s var(--p-ease);
}
.pts-sheet.is-open { transform: translateY(0); }
.pts-scrim {
  position: fixed; inset: 0; z-index: 55; background: rgba(10, 26, 20, .38);
  opacity: 0; pointer-events: none; transition: opacity .3s var(--p-ease);
}
.pts-scrim.is-open { opacity: 1; pointer-events: auto; }
.pts-grab { width: 38px; height: 4px; border-radius: 99px; background: var(--p-rule); margin: 0 auto .85rem; }
.pts-who { display: flex; align-items: center; gap: .65rem; margin-bottom: .9rem; }
.pts-who-face {
  position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--p-green); color: #fff;
  display: grid; place-items: center; font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700; font-size: .85rem; overflow: hidden; flex: 0 0 auto;
}
.pts-who-name { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; line-height: 1.15; }
.pts-who-meta { font-size: .78rem; color: var(--p-ink-mute); font-weight: 600; }

.pts-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem .3rem; }
.pts-pick {
  background: none; border: 0; font: inherit; color: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: .55rem .2rem; border-radius: 14px;
  transition: background .15s var(--p-ease), transform .18s var(--p-ease-back);
}
.pts-pick .pts-stk { transition: transform .22s var(--p-ease-back); }
.pts-pick:hover:not(:disabled) { background: var(--p-green-lt); }
.pts-pick:active:not(:disabled) { transform: scale(.94); }
.pts-pick.is-sel { background: var(--p-green-lt); }
.pts-pick.is-sel .pts-stk { transform: scale(1.07); }
.pts-pick:disabled { opacity: .32; cursor: not-allowed; }
.pts-pick:disabled .pts-stk { filter: grayscale(1); }
.pts-pick-t { font-size: .7rem; font-weight: 700; text-align: center; line-height: 1.15; }
.pts-pick-done { font-size: .63rem; font-weight: 700; color: var(--p-ink-mute); }

.pts-give {
  margin-top: .9rem; width: 100%; border: 0; cursor: pointer;
  background: var(--p-green); color: #fff;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1rem;
  padding: .95rem 1rem; border-radius: 15px;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  transition: transform .14s var(--p-ease), background .2s;
}
.pts-give:active { transform: scale(.975); }
.pts-give:disabled { background: var(--p-rule); color: var(--p-ink-mute); cursor: not-allowed; }
.pts-hint { display: block; text-align: center; font-size: .72rem; color: var(--p-ink-mute); margin-top: .55rem; font-weight: 600; }

/* ── celebration ────────────────────────────────────────────────────────── */
.pts-stamp {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center;
  background: rgba(251, 250, 247, .84); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.pts-stamp.is-on { opacity: 1; }
.pts-stamp-in { display: flex; flex-direction: column; align-items: center; gap: .9rem; transform: scale(.6); opacity: 0; }
.pts-stamp.is-on .pts-stamp-in { animation: ptsStampIn .52s var(--p-ease-back) forwards; }
@keyframes ptsStampIn { to { transform: scale(1); opacity: 1; } }
.pts-ring { position: absolute; width: 104px; height: 104px; border-radius: 50%; border: 3px solid var(--p-green); opacity: 0; }
.pts-stamp.is-on .pts-ring { animation: ptsRipple .8s var(--p-ease) forwards; }
@keyframes ptsRipple { from { transform: scale(1); opacity: .85; } to { transform: scale(2.5); opacity: 0; } }
.pts-stamp-t { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.15rem; text-align: center; letter-spacing: -.02em; }
.pts-stamp-s { font-size: .85rem; color: var(--p-ink-soft); font-weight: 600; text-align: center; margin-top: .15rem; }

/* ── toast + undo ───────────────────────────────────────────────────────── */
.pts-toast {
  position: fixed; left: .75rem; right: .75rem; bottom: calc(.75rem + env(safe-area-inset-bottom));
  max-width: 480px; margin: 0 auto; z-index: 80;
  background: var(--p-ink); color: #fff; border-radius: 16px;
  padding: .75rem .8rem; display: flex; align-items: center; gap: .65rem;
  transform: translateY(160%); transition: transform .38s var(--p-ease); overflow: hidden;
}
.pts-toast.is-on { transform: translateY(0); }
.pts-toast-txt { flex: 1; font-size: .82rem; font-weight: 600; line-height: 1.3; }
.pts-toast-txt b { font-weight: 800; }
.pts-undo {
  background: rgba(255, 255, 255, .15); border: 0; color: #fff; font: inherit;
  font-size: .78rem; font-weight: 700; padding: .45rem .75rem; border-radius: 10px; cursor: pointer;
}
.pts-undo:hover { background: rgba(255, 255, 255, .26); }
.pts-toast-bar { position: absolute; left: 0; bottom: 0; height: 2.5px; background: var(--p-amber); width: 100%; }
.pts-toast.is-on .pts-toast-bar { animation: ptsDrain 10s linear forwards; }
@keyframes ptsDrain { to { width: 0; } }

/* ── board ──────────────────────────────────────────────────────────────── */
.pts-board { padding: 1rem 1.1rem 3rem; max-width: 780px; margin: 0 auto; }
.pts-goal { background: var(--p-green); color: #fff; border-radius: 18px; padding: 1.1rem 1.2rem; }
.pts-goal-t { font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; opacity: .72; }
.pts-goal-n { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 2.2rem; letter-spacing: -.03em; line-height: 1; margin-top: .35rem; font-variant-numeric: tabular-nums; }
.pts-goal-n small { font-size: 1rem; font-weight: 600; opacity: .6; letter-spacing: 0; }
.pts-goal-bar { height: 7px; border-radius: 99px; background: rgba(255, 255, 255, .22); margin-top: .8rem; overflow: hidden; }
.pts-goal-bar i { display: block; height: 100%; background: #f5c518; border-radius: 99px; }
.pts-goal-c { font-size: .78rem; font-weight: 600; opacity: .82; margin-top: .55rem; }

.pts-sec { margin-top: 1.6rem; }
.pts-sec-h { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--p-ink-mute); margin-bottom: .6rem; }
.pts-today { display: flex; gap: .35rem; flex-wrap: wrap; }
.pts-today-i { display: flex; align-items: center; gap: .35rem; background: var(--p-green-lt); border-radius: 99px; padding: .22rem .6rem .22rem .22rem; }
.pts-today-i span { font-size: .74rem; font-weight: 700; color: var(--p-green); }

.pts-row { display: flex; align-items: center; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--p-rule); }
.pts-row:last-child { border-bottom: 0; }
.pts-rank { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: .85rem; color: var(--p-ink-mute); width: 20px; text-align: right; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.pts-row-f { position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--p-green); color: #fff; display: grid; place-items: center; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: .8rem; overflow: hidden; flex: 0 0 auto; }
.pts-row-b { flex: 1; min-width: 0; display: block; }
.pts-row-n { display: block; font-weight: 700; font-size: .9rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pts-row-s { display: block; height: 4px; border-radius: 99px; background: var(--p-rule); margin-top: .35rem; overflow: hidden; max-width: 190px; }
.pts-row-s i { display: block; height: 100%; background: var(--p-amber); border-radius: 99px; }
.pts-row-m { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; font-size: .7rem; color: var(--p-ink-mute); font-weight: 600; margin-top: .25rem; }
.pts-row-p { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.2rem; color: var(--p-amber); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.pts-pill { display: inline-flex; align-items: center; gap: .25rem; background: var(--p-amber-lt); color: #8a5a10; font-size: .66rem; font-weight: 800; padding: .15rem .45rem; border-radius: 6px; }

/* ── redemptions / settings ─────────────────────────────────────────────── */
.pts-wrap { padding: 1.1rem 1.1rem 3rem; max-width: 780px; margin: 0 auto; }
.pts-card { border: 1px solid var(--p-rule); border-radius: 17px; overflow: hidden; margin-bottom: 1rem; background: var(--p-card); }
.pts-card-h { padding: .9rem 1rem; display: flex; align-items: center; gap: .6rem; background: var(--p-green-lt); }
.pts-card-t { font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em; color: var(--p-green-dk); }
.pts-card-s { font-size: .72rem; color: var(--p-green); font-weight: 600; }
.pts-card-c { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; font-size: 1.35rem; color: var(--p-green); margin-left: auto; font-variant-numeric: tabular-nums; }
.pts-rd { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-top: 1px solid var(--p-rule); }
.pts-btn {
  background: var(--p-green); color: #fff; border: 0; font: inherit; font-weight: 700; font-size: .8rem;
  font-family: "Bricolage Grotesque", sans-serif; padding: .5rem .85rem; border-radius: 10px;
  cursor: pointer; flex: 0 0 auto; transition: transform .14s var(--p-ease);
}
.pts-btn:active { transform: scale(.95); }
.pts-btn-ghost { background: var(--p-green-lt); color: var(--p-green); }

.pts-field { margin-bottom: 1.4rem; }
.pts-label { display: block; font-size: .85rem; font-weight: 700; margin-bottom: .1rem; }
.pts-help { display: block; font-size: .74rem; color: var(--p-ink-mute); font-weight: 500; margin-bottom: .45rem; line-height: 1.4; }
.pts-input {
  width: 100%; font: inherit; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1rem;
  padding: .65rem .8rem; border: 1.5px solid var(--p-rule); border-radius: 12px;
  background: var(--p-card); color: var(--p-ink); font-variant-numeric: tabular-nums;
  transition: border-color .16s;
}
.pts-input:focus { border-color: var(--p-green); outline: none; }
.pts-switchrow { display: flex; align-items: center; gap: .75rem; padding: .8rem 0; border-bottom: 1px solid var(--p-rule); }
.pts-note { background: var(--p-amber-lt); border-radius: 12px; padding: .8rem .9rem; font-size: .76rem; color: #7a5210; font-weight: 600; line-height: 1.45; margin-top: 1rem; }
.pts-empty { text-align: center; padding: 3rem 1rem; color: var(--p-ink-mute); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .pts *, .pts *::before, .pts *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ── treasure day entry ─────────────────────────────────────────────────── */
/* Shown on the board only when someone in the class has banked a pull, so it
   is absent for eleven months and unmissable on the day. */
.pts-ready {
  display: flex; align-items: center; gap: .8rem; margin: 1rem 1.1rem 0;
  padding: .85rem 1rem; border-radius: 15px; text-decoration: none; color: inherit;
  background: var(--p-amber-lt); border: 1px solid oklch(88% 0.07 80);
  transition: transform .14s var(--p-ease), border-color .16s var(--p-ease);
}
.pts-ready:hover { border-color: oklch(78% 0.11 80); }
.pts-ready:active { transform: scale(.99); }
.pts-ready-icon { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: #fff; color: #a4670f; }
.pts-ready-icon svg { width: 22px; height: 22px; }
.pts-ready-b { flex: 1; min-width: 0; display: block; }
.pts-ready-t { display: block; font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1rem; color: #7a5210; letter-spacing: -.01em; }
.pts-ready-s { display: block; font-size: .76rem; font-weight: 600; color: #96702c; margin-top: .1rem; }
.pts-ready-go { width: 20px; height: 20px; color: #a4670f; flex: 0 0 auto; }

/* ── earned today: tap to arm, tap again to remove ──────────────────────── */
.pts-sec-h { display: flex; align-items: baseline; gap: .5rem; }
.pts-sec-hint { font-size: .62rem; font-weight: 700; letter-spacing: .04em; color: var(--p-ink-mute); text-transform: none; opacity: .8; }

.pts-today-i {
  position: relative; display: flex; align-items: center; gap: .35rem;
  background: var(--p-green-lt); border: 1px solid transparent; border-radius: 99px;
  padding: .22rem .6rem .22rem .22rem; cursor: pointer; font: inherit;
  transition: background .16s var(--p-ease), border-color .16s var(--p-ease),
              transform .16s var(--p-ease), opacity .2s var(--p-ease);
}
.pts-today-i span { font-size: .74rem; font-weight: 700; color: var(--p-green); }
.pts-today-i:hover { background: #dceae3; }
.pts-today-i:active { transform: scale(.96); }

.pts-today-x {
  display: none; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  background: #b3261e; color: #fff; margin-left: .1rem;
}
.pts-today-x svg { width: 10px; height: 10px; }

/* armed: the cross appears, so the next tap is unambiguous */
.pts-today-i.is-armed {
  background: #fdecea; border-color: #b3261e; padding-right: .4rem;
}
.pts-today-i.is-armed span { color: #8c1d18; }
.pts-today-i.is-armed .pts-today-x { display: grid; }
.pts-today-i.is-going { opacity: .4; pointer-events: none; }

.pts-today-msg { margin-top: .5rem; font-size: .74rem; font-weight: 600; color: var(--p-ink-soft); }
.pts-today-msg.is-error { color: #b3261e; }

/* ── master switch ──────────────────────────────────────────────────────── */
.pts-master {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.1rem; margin-bottom: 1.6rem;
  border-radius: 15px; background: var(--p-green-lt);
  border: 1px solid oklch(88% 0.05 165);
}
.pts-master.is-off { background: #fdecea; border-color: oklch(88% 0.06 25); }
.pts-master-b { flex: 1; min-width: 0; }
.pts-master-t {
  display: flex; align-items: center; gap: .5rem;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 1.05rem;
  color: var(--p-green-dk); letter-spacing: -.01em;
}
.pts-master.is-off .pts-master-t { color: #8c1d18; }
.pts-master-state {
  font-family: Figtree, sans-serif; font-size: .68rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  background: var(--p-green); color: #fff; padding: .12rem .5rem; border-radius: 99px;
}
.pts-master.is-off .pts-master-state { background: #b3261e; }

/* the "Off" flag beside the sidebar section header */
.pts-nav-off {
  font-size: .6rem; font-weight: 800; letter-spacing: .06em;
  background: #b3261e; color: #fff; padding: .05rem .35rem; border-radius: 5px;
}

/* ── star emails ────────────────────────────────────────────────────────── */
.pts-tally { display: flex; gap: .5rem; margin-top: .9rem; flex-wrap: wrap; }
.pts-tally-i {
  font-size: .78rem; font-weight: 600; color: var(--p-ink-soft);
  background: var(--p-paper); border: 1px solid var(--p-rule);
  border-radius: 99px; padding: .28rem .7rem;
}
.pts-tally-i b { font-family: "Bricolage Grotesque", sans-serif; font-weight: 800; margin-right: .15rem; }
.pts-tally-i.is-sent b { color: var(--p-green); }
.pts-tally-i.is-queued b { color: var(--p-amber); }
.pts-tally-i.is-failed b { color: #b3261e; }

.pts-filters { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; margin-left: auto; }
.pts-filters::-webkit-scrollbar { display: none; }
.pts-filter {
  flex: 0 0 auto; text-decoration: none; white-space: nowrap;
  font-size: .76rem; font-weight: 700; color: var(--p-ink-mute);
  padding: .32rem .6rem; border-radius: 8px;
  transition: background .15s var(--p-ease), color .15s var(--p-ease);
}
.pts-filter:hover { background: var(--p-green-lt); color: var(--p-green); }
.pts-filter.is-on { background: var(--p-green); color: #fff; }

.pts-mailrow { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border-top: 1px solid var(--p-rule); }
.pts-mailrow:first-child { border-top: 0; }
.pts-mail-b { flex: 1; min-width: 0; display: block; }
.pts-mail-n { display: block; font-weight: 700; font-size: .9rem; line-height: 1.2; }
.pts-mail-m { display: block; font-size: .72rem; color: var(--p-ink-mute); font-weight: 600; margin-top: .12rem; }
.pts-mail-warn { color: #96702c; }
.pts-mail-err { display: block; font-size: .72rem; color: #b3261e; font-weight: 600; margin-top: .2rem; }

.pts-status {
  flex: 0 0 auto; font-size: .68rem; font-weight: 800; letter-spacing: .04em;
  padding: .22rem .55rem; border-radius: 7px; white-space: nowrap;
}
.pts-status.is-sent { background: var(--p-green-lt); color: var(--p-green); }
.pts-status.is-queued { background: var(--p-amber-lt); color: #8a5a10; }
.pts-status.is-failed { background: #fdecea; color: #b3261e; }

.pts-pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.2rem; }
.pts-pager-n { font-size: .76rem; font-weight: 600; color: var(--p-ink-mute); }

.pts-note {
  background: var(--p-amber-lt); border: 1px solid oklch(88% 0.06 80); border-radius: 12px;
  padding: .8rem .95rem; font-size: .78rem; font-weight: 600; color: #7a5210;
  line-height: 1.45; margin-bottom: 1rem;
}
.pts-mailframe {
  width: 100%; height: 78vh; border: 1px solid var(--p-rule); border-radius: 14px;
  background: #fff;
}