/* ============================================================
   Stash — styles
   Built from the Stash design guidelines (v1.0).
   All the colours, sizes and spacing come straight from the
   brand's "design tokens", set up here as CSS variables so you
   only ever change a value in one place.
   ============================================================ */

/* ---------- Design tokens: light mode ---------- */
:root {
  /* Colour */
  --ink: #16151a; /* primary text, tally uprights */
  --slate: #6b6a75; /* secondary / helper text */
  --mist: #e8e6e1; /* dividers, borders, disabled */
  --paper: #fbf9f4; /* app background */
  --surface: #ffffff; /* cards */
  --strike: #6a4df4; /* the strike, points, primary action */
  --strike-deep: #4a32c4; /* pressed / active */
  --strike-tint: #ede9fe; /* point badges, selected rows */

  /* Status (task state only — never brand surfaces) */
  --verified: #17a673;
  --pending: #f0a02a;
  --declined: #e0523c;

  /* Radius */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* One shadow, used only on cards */
  --shadow: 0 2px 12px rgba(22, 21, 26, 0.07);

  --screen-gutter: 20px;
}

/* ---------- Design tokens: dark mode ----------
   Violet lifts so it holds contrast on a dark surface.
   Status colours stay the same. We honour both the system
   setting and the manual toggle (data-theme). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #fbf9f4;
    --paper: #111015;
    --surface: #1c1b22;
    --mist: #2e2c36;
    --slate: #9a98a6;
    --strike: #8a72ff;
    --shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
  }
}

:root[data-theme="dark"] {
  --ink: #fbf9f4;
  --paper: #111015;
  --surface: #1c1b22;
  --mist: #2e2c36;
  --slate: #9a98a6;
  --strike: #8a72ff;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* ---------- Base ---------- */
* {
  box-sizing: border-box;
}

/* ---------- Login / family-setup screens ----------
   Which of login / family / app shows is driven by JavaScript
   (setGate) via inline display, so no gating rules are needed here. */
.auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: var(--paper);
}
.auth__card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 32px 24px;
  text-align: center;
}
.auth__logo {
  display: block;
  margin: 0 auto 20px;
  height: 30px;
  width: auto;
}
.auth__logo--dark {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .auth__logo--light {
    display: none;
  }
  :root:not([data-theme="light"]) .auth__logo--dark {
    display: block;
  }
}
:root[data-theme="dark"] .auth__logo--light {
  display: none;
}
:root[data-theme="dark"] .auth__logo--dark {
  display: block;
}
.auth__title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 4px;
}
.auth__sub {
  color: var(--slate);
  font-size: 14px;
  margin: 0 0 22px;
}
.auth__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}
.auth__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth__field[hidden] {
  display: none;
}
.auth__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--slate);
}
.auth__field input {
  min-height: 46px;
  padding: 0 14px;
  font-size: 15px;
  font-family: inherit;
  border: 1.5px solid var(--mist);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
}
.auth__field input:focus {
  outline: none;
  border-color: var(--strike);
}
.auth__submit {
  min-height: 48px;
  margin-top: 4px;
  width: 100%;
}
.auth__error {
  color: var(--declined);
  font-size: 13px;
  margin: 2px 0 0;
}
.auth__error[hidden] {
  display: none;
}
.auth__toggle {
  margin-top: 16px;
}

/* Family setup */
.family-or {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--slate);
  font-size: 12px;
  margin: 18px 0;
}
.family-or::before,
.family-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--mist);
}
.family-join {
  display: flex;
  gap: 8px;
}
.family-join__input {
  flex: 1;
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  font-size: 15px;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: 1.5px solid var(--mist);
  border-radius: var(--r-md);
  background: var(--paper);
  color: var(--ink);
}
.family-join__input:focus {
  outline: none;
  border-color: var(--strike);
}
.family-join .btn {
  flex: 0 0 auto;
  min-height: 46px;
}

/* Account footer inside the drawer */
.drawer__account {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--mist);
}
.drawer__family {
  font-size: 12px;
  color: var(--slate);
  margin: 0 0 6px;
}
.drawer__family[hidden] {
  display: none;
}
.drawer__family strong {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 1px;
}
.drawer__email {
  font-size: 12px;
  color: var(--slate);
  margin: 0 0 6px;
  word-break: break-all;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px; /* never below 15 — half the users are children */
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* The app is phone-shaped; centre it on wider screens. */
.screen {
  max-width: 460px;
  margin: 0 auto;
  min-height: 100vh;
  padding: 12px var(--screen-gutter) 32px;
  display: flex;
  flex-direction: column;
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0 4px;
}

.topbar__logo {
  height: 28px;
  width: auto;
}

/* Show the right logo for the current theme */
.topbar__logo--dark {
  display: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topbar__logo--light {
    display: none;
  }
  :root:not([data-theme="light"]) .topbar__logo--dark {
    display: block;
  }
}
:root[data-theme="dark"] .topbar__logo--light {
  display: none;
}
:root[data-theme="dark"] .topbar__logo--dark {
  display: block;
}

.icon-button {
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--mist);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.15s ease;
}
.icon-button:hover {
  border-color: var(--slate);
}

/* Sun / moon drawn from a CSS circle */
.theme-toggle__icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: inset -5px -5px 0 0 var(--surface);
}
:root[data-theme="dark"] .theme-toggle__icon,
:root:not([data-theme="light"]) .theme-toggle__icon {
  /* handled below in dark media too */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle__icon {
    box-shadow: none;
    background: var(--ink);
  }
}
:root[data-theme="dark"] .theme-toggle__icon {
  box-shadow: none;
}
:root[data-theme="light"] .theme-toggle__icon {
  box-shadow: inset -5px -5px 0 0 var(--surface);
}

/* ---------- Hamburger + dropdown menu ---------- */
.screen {
  position: relative;
}

.hamburger,
.hamburger::before,
.hamburger::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.hamburger {
  position: relative;
}
.hamburger::before,
.hamburger::after {
  content: "";
  position: absolute;
  left: 0;
}
.hamburger::before {
  top: -6px;
}
.hamburger::after {
  top: 6px;
}

/* A small dot on the hamburger when chores are waiting for a parent */
#menu-toggle {
  position: relative;
}
.menu-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 9px;
  height: 9px;
  background: var(--pending);
  border-radius: 50%;
  border: 2px solid var(--paper);
}
.menu-dot[hidden] {
  display: none;
}

/* The slide-in drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 40;
}
.drawer[hidden] {
  display: none;
}
.drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(22, 21, 26, 0.45);
}
.drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(80%, 280px);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  animation: drawer-in 0.2s ease-out;
}
@keyframes drawer-in {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .drawer__panel {
    animation: none;
  }
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.drawer__title {
  font-size: 16px;
  font-weight: 700;
}
.drawer__group {
  margin-top: 10px;
}
.drawer__group-name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 2px;
  padding: 8px 8px 4px;
  font-size: 14px;
  font-weight: 700;
}
.drawer__item {
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  padding: 12px 14px;
  min-height: 48px;
  border-radius: var(--r-md);
  cursor: pointer;
}
.drawer__item:hover {
  background: var(--paper);
}
.drawer__item.is-active {
  background: var(--strike-tint);
  color: var(--strike);
}
/* Chores / Shop indented under each person */
.drawer__item--sub {
  padding-left: 42px;
  min-height: 44px;
  font-size: 14px;
}
.drawer__emoji {
  font-size: 18px;
  line-height: 1;
}

/* ---------- Child switcher ---------- */
.child-switcher {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 6px 0 10px;
}
.child-switcher[hidden] {
  display: none;
}
.child-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  border: 1.5px solid var(--mist);
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 14px;
  min-height: 40px;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.child-tab.is-active {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.child-tab__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* ---------- Colour picker ---------- */
.color-picker {
  text-align: center;
  margin-bottom: 20px;
}
.color-picker__label {
  margin: 0 0 8px;
  color: var(--slate);
  font-size: 12px;
  font-weight: 500;
}
.color-swatches {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 2px var(--paper);
}
.swatch.is-selected {
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px currentColor;
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---------- Menu bar (Child / Parent tabs) ---------- */
.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 6px 0 4px;
  background: var(--mist);
  border-radius: var(--r-pill);
}
.tab {
  flex: 1;
  position: relative;
  border: none;
  background: transparent;
  color: var(--slate);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 12px;
  min-height: 44px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.tab.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.tab__badge[hidden] {
  display: none;
}
.tab__badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: var(--r-pill);
  background: var(--pending);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}

/* ---------- Pages ---------- */
.page[hidden] {
  display: none;
}

/* ---------- Parent summary ---------- */
/* Per-child point totals on the parent's chores page */
.parent-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 18px;
}
.child-total {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  border-left: 5px solid var(--accent, var(--mist));
}
.child-total__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.child-total__name {
  flex: 1;
  font-weight: 500;
}
.child-total__pts {
  font-weight: 700;
}

/* ---------- Verification row (parent picks the points) ---------- */
.queue-row {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.verify-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.verify-controls__label {
  font-size: 12px;
  color: var(--slate);
  margin-right: 2px;
}
.award-chip {
  min-width: 38px;
  height: 38px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--mist);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.award-chip:hover {
  border-color: var(--strike);
  color: var(--strike);
  background: var(--strike-tint);
}
/* The full-value award is highlighted as the default */
.award-chip.is-full {
  border-color: var(--strike);
  color: var(--strike);
}
.verify-controls .pbtn--decline {
  margin-left: auto;
}

/* ---------- Shop (child kiosk) ---------- */
.shop-head {
  padding: 4px 0 12px;
}
.shop-note {
  margin: 4px 0 0;
  color: var(--slate);
  font-size: 13px;
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.shop-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 16px 12px;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.shop-card--short {
  opacity: 0.85;
}
.shop-card__emoji {
  font-size: 40px;
  line-height: 1;
}
.shop-card__name {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}
.shop-card__cost {
  margin: 0;
  color: var(--strike);
  font-weight: 700;
  font-size: 15px;
}
.shop-card__btn {
  color: #fff;
  margin-top: 4px;
  width: 100%;
}
.shop-card__need {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--slate);
}

/* ---------- Shop (parent management) ---------- */
.section-sub {
  color: var(--slate);
  font-size: 13px;
  margin: -6px 0 14px;
}
.reward-form {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.reward-form__emoji {
  width: 48px;
  text-align: center;
  flex: 0 0 auto;
}
.reward-form__name {
  flex: 1;
  min-width: 0;
}
.reward-form__cost {
  width: 60px;
  flex: 0 0 auto;
}
.reward-form__for {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 8px;
  font-size: 13px;
  font-family: inherit;
  border: 1.5px solid var(--mist);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
}
.reward-form {
  flex-wrap: wrap;
}
/* Who a reward is for, in the parent's reward list */
.reward__for {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--mist);
  color: var(--slate);
  white-space: nowrap;
}
.child-total__age {
  color: var(--slate);
  font-weight: 400;
}
.reward-form input {
  padding: 0 12px;
  min-height: 44px;
  font-size: 14px;
  font-family: inherit;
  border: 1.5px solid var(--mist);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
}
.reward-form input:focus {
  outline: none;
  border-color: var(--strike);
}
.reward-form .btn {
  min-height: 44px;
}

.reward-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reward {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.reward__emoji {
  font-size: 22px;
}
.reward__name {
  flex: 1;
  font-size: 14px;
}
.reward__del {
  width: 36px;
  height: 36px;
  font-size: 20px;
}

.redemptions {
  margin-top: 22px;
}
.redemptions__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--slate);
  margin: 0 0 8px;
}
.redemptions__row {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--slate);
}

/* ---------- Parent · Manage ---------- */
.manage-block {
  margin-bottom: 26px;
}
.manage-block__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 10px;
}
.manage-hint {
  color: var(--slate);
  font-size: 12px;
  margin: 8px 2px 0;
  line-height: 1.5;
}

/* Family name row */
.manage-inline {
  display: flex;
  gap: 8px;
}
.manage-inline input {
  flex: 1;
  min-width: 0;
  padding: 0 12px;
  min-height: 44px;
  font-size: 14px;
  font-family: inherit;
  border: 1.5px solid var(--mist);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
}
.manage-inline input:focus {
  outline: none;
  border-color: var(--strike);
}
.manage-inline .btn {
  min-height: 44px;
  flex: 0 0 auto;
}

/* Add-child / add-chore forms */
.manage-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.manage-form input,
.manage-form select {
  padding: 0 12px;
  min-height: 44px;
  font-size: 14px;
  font-family: inherit;
  border: 1.5px solid var(--mist);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
}
.manage-form input:focus,
.manage-form select:focus {
  outline: none;
  border-color: var(--strike);
}
.manage-form input[type="text"] {
  flex: 1;
  min-width: 120px;
}
.manage-form__age {
  width: 72px;
  flex: 0 0 auto;
}
.manage-form__child {
  flex: 0 0 auto;
}
.manage-form__awards {
  flex: 1;
  min-width: 120px;
}
.manage-form .btn {
  min-height: 44px;
  flex: 0 0 auto;
}

/* Lists of children / chores */
.manage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.manage-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.manage-item__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.manage-item__name {
  flex: 1;
  font-size: 14px;
  min-width: 0;
}
.manage-item__meta {
  color: var(--slate);
  font-weight: 400;
}
.manage-item__del {
  width: 36px;
  height: 36px;
  font-size: 20px;
  flex: 0 0 auto;
}
.manage-list:empty {
  display: none;
}

/* ---------- Hero ---------- */
.hero {
  text-align: center;
  padding: 28px 0 24px;
}

.hero__label {
  margin: 0;
  color: var(--slate);
  font-size: 12px;
  font-weight: 500;
}

.hero__balance {
  margin: 2px 0 0;
  font-size: 56px; /* Display, exaggerated — the number that matters */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.hero__unit {
  font-size: 16px;
  font-weight: 500;
  color: var(--slate);
  margin-left: 6px;
}

.hero__hint {
  margin: 8px 0 0;
  color: var(--slate);
  font-size: 12px;
  min-height: 1.4em;
}

/* ---------- Tally counter ---------- */
.tally {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  margin-top: 18px;
}

.tally__bundle {
  height: 52px;
  width: auto;
  overflow: visible;
}

/* The strokes. Uprights use ink (which flips to paper in dark
   mode automatically), the strike is always violet. */
.tally-upright {
  fill: var(--ink);
}
.tally-strike {
  stroke: var(--strike);
}

/* The faint "next stroke" that hints a pending task */
.tally-upright--ghost {
  opacity: 0.2;
}

.tally__numeral {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

/* Draw-on animations (only when strokes are newly earned) */
.tally-upright.is-drawing {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: draw-up 180ms ease-out both;
}
.tally-strike.is-drawing {
  stroke-dasharray: 80;
  animation: draw-strike 260ms ease-out both;
}
.tally__bundle.is-complete {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: bundle-pulse 320ms ease-out;
}

@keyframes draw-up {
  from {
    opacity: 0;
    transform: scaleY(0.15);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}
@keyframes draw-strike {
  from {
    stroke-dashoffset: 80;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes bundle-pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

/* Respect people who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .tally-upright.is-drawing,
  .tally-strike.is-drawing,
  .tally__bundle.is-complete {
    animation: none;
  }
}

/* ---------- Section heading ---------- */
.section-heading {
  font-size: 16px;
  font-weight: 500;
  margin: 8px 0 12px;
}

/* ---------- Task list ---------- */
.task-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 12px 16px;
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  /* A coloured stripe down the left in the owning child's colour */
  border-left: 5px solid var(--accent, var(--mist));
}

.task--verified {
  opacity: 0.6;
}

.task__main {
  flex: 1;
  min-width: 0;
}

.task__name {
  font-size: 15px;
  margin: 0 0 6px;
  word-break: break-word;
}

/* Badge + child chip sit together under the name */
.task__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.child-chip {
  display: inline-flex;
  align-items: center;
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: var(--r-pill);
}

.task--verified .task__name {
  text-decoration: line-through;
}

/* Point badge: strike-tint pill with strike-coloured text */
.badge {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  background: var(--strike-tint);
  color: var(--strike);
  font-weight: 500;
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: 13px;
}
.badge__unit {
  font-size: 11px;
}
/* Keep the tint readable in dark mode */
:root[data-theme="dark"] .badge,
:root:not([data-theme="light"]) .badge {
  background: rgba(138, 114, 255, 0.18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .badge {
    background: rgba(138, 114, 255, 0.18);
  }
}

/* ---------- Task actions ---------- */
.task__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Primary pill button (child's "Done") */
.btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--r-pill);
  cursor: pointer;
  min-height: 44px; /* tap target never below 44 */
  padding: 0 18px;
  border: 1.5px solid transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn--primary {
  background: var(--strike);
  color: var(--paper);
  border-color: var(--strike);
}
.btn--primary:hover {
  background: var(--strike-deep);
  border-color: var(--strike-deep);
}
.btn--secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

/* Parent verify / decline — small round controls */
.pbtn {
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--mist);
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pbtn--verify {
  color: var(--verified);
}
.pbtn--verify:hover {
  background: rgba(23, 166, 115, 0.12);
  border-color: var(--verified);
}
.pbtn--decline {
  color: var(--declined);
}
.pbtn--decline:hover {
  background: rgba(224, 82, 60, 0.12);
  border-color: var(--declined);
}

/* ---------- Status pill ---------- */
.status {
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--r-pill);
  padding: 5px 11px;
  white-space: nowrap;
}
.status--pending {
  color: var(--pending);
  background: rgba(240, 160, 42, 0.12);
}
.status--verified {
  color: var(--verified);
  background: rgba(23, 166, 115, 0.12);
}
.status--declined {
  color: var(--declined);
  background: rgba(224, 82, 60, 0.12);
}

/* ---------- Empty state ---------- */
.empty-state {
  color: var(--slate);
  font-size: 15px;
  padding: 8px 0;
}

/* ---------- Footer ---------- */
.footer {
  margin-top: auto;
  padding-top: 24px;
  text-align: center;
}
.footer__note {
  color: var(--slate);
  font-size: 11px;
  line-height: 1.4;
  margin: 0 0 10px;
}
.footer__note strong {
  color: var(--ink);
  font-weight: 500;
}
.text-button {
  background: none;
  border: none;
  color: var(--strike);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px;
}
.text-button:hover {
  text-decoration: underline;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(8px);
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  font-weight: 500;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .toast {
    transition: opacity 0.2s ease;
  }
}