/* =================================================================
   STYLE — Family chore app
   Mobile-first: designed for a phone screen first.
   Design: colorful, big buttons, simple for kids.
   ================================================================= */

/* ----- Colors and base settings ----- */
:root {
  --bg: #eef3fb;            /* soft background */
  --card: #ffffff;
  --text: #24303d;
  --text-soft: #6b7a8a;
  --shadow: 0 6px 20px rgba(30, 50, 80, .10);
  --radius: 22px;          /* nicely rounded corners = softer, more kid-friendly */

  /* One color per person */
  --angel: #e94f9c;        /* pink */
  --william: #2f9ed0;      /* blue */
  --parent: #f5a623;       /* amber */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: 'Nunito Sans', sans-serif;
  color: var(--text);
  background: var(--bg);
  /* Fill the whole screen, even under the iPhone notch */
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

h1, h2, h3 { font-family: 'Fredoka', sans-serif; }

/* ----- Screen system: only one visible at a time ----- */
.screen {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.hidden { display: none !important; }

.wrap {
  width: 100%;
  max-width: 440px;
  padding: 40px 24px 32px;
}
.wrap--center { text-align: center; padding-top: 80px; }

/* ----- Titles ----- */
.app-title {
  font-size: 30px;
  margin: 0 0 6px;
  text-align: center;
}
.app-subtitle {
  text-align: center;
  color: var(--text-soft);
  margin: 0 0 28px;
  font-size: 16px;
}

/* ============================================================
   SCREEN 1 — Profile cards
   ============================================================ */
.profile-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.profile-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--card);
  border: none;
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow);
  cursor: pointer;
  /* Colored left edge per person (filled in by JS) */
  border-left: 8px solid var(--person, #ccc);
  transition: transform .12s ease;
  font-family: inherit;
  text-align: left;
  width: 100%;
}
.profile-card:active { transform: scale(.97); }

.profile-card__avatar {
  width: 60px; height: 60px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
  background: var(--person-pale, #eee);
  flex-shrink: 0;
}
.profile-card__name {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--text);
}
.profile-card__role {
  font-size: 14px;
  color: var(--text-soft);
}

/* ============================================================
   SCREEN 2 — PIN entry
   ============================================================ */
.btn-back {
  background: none; border: none;
  color: var(--text-soft);
  font-family: inherit; font-size: 16px; font-weight: 600;
  padding: 4px 0; margin-bottom: 10px;
  cursor: pointer;
}

.pin-avatar {
  width: 76px; height: 76px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
  background: var(--person-pale, #e6ecf5);
  margin: 6px auto 12px;
}
.pin-name {
  text-align: center;
  font-size: 26px;
  margin: 0 0 4px;
}

/* The 4 dots */
.pin-dots {
  display: flex; justify-content: center; gap: 18px;
  margin: 22px 0 10px;
}
.pin-dot {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--text-soft);
  transition: background .1s, border-color .1s;
}
.pin-dot.filled {
  background: var(--person, var(--text));
  border-color: var(--person, var(--text));
}

.pin-error {
  text-align: center;
  color: #d14343;
  font-weight: 600;
  margin: 6px 0;
  min-height: 20px;
}

/* Shake animation when the code is wrong */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
.shake { animation: shake .3s; }

/* The number pad: a 3-column grid */
.pin-pad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 300px;
  margin: 20px auto 0;
}
.pin-key {
  aspect-ratio: 1 / 1;         /* square buttons */
  border: none;
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--shadow);
  font-family: 'Fredoka', sans-serif;
  font-size: 26px;
  color: var(--text);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .1s ease, background .1s;
}
.pin-key:active { transform: scale(.92); background: #f0f4fa; }
.pin-key--empty { background: none; box-shadow: none; cursor: default; }
.pin-key--del { font-size: 22px; color: var(--text-soft); box-shadow: none; background: none; }

/* ============================================================
   KID VIEW — today's chores
   ============================================================ */
.kid-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.kid-header__avatar {
  width: 54px; height: 54px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  background: var(--person-pale, #e6ecf5);
  flex-shrink: 0;
}
.kid-header__text { flex: 1; }
.kid-header__title { font-size: 24px; margin: 0; }
.kid-header__date { margin: 0; color: var(--text-soft); font-size: 14px; }

/* Progress bar */
.progress { margin-bottom: 22px; }
.progress__track {
  height: 16px;
  background: #dde5ef;
  border-radius: 999px;
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  width: 0%;                       /* set by JS */
  background: var(--person, #2f9ed0);
  border-radius: 999px;
  transition: width .3s ease;
}
.progress__label {
  margin: 8px 0 0;
  text-align: center;
  color: var(--text-soft);
  font-weight: 600;
  font-size: 14px;
}

/* The list */
.chore-list { display: flex; flex-direction: column; gap: 12px; }

.chore {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: var(--card);
  border: 2px solid transparent;
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
  cursor: pointer;
  font-family: inherit;
  transition: transform .1s ease;
}
.chore:active { transform: scale(.98); }

/* The round check on the left */
.chore__check {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid #c3ccd8;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff;
  flex-shrink: 0;
}
.chore__title {
  flex: 1;
  font-size: 18px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  color: var(--text);
}
.chore__state { font-size: 13px; font-weight: 700; }

/* State: not started */
.chore--todo .chore__state { color: var(--text-soft); font-weight: 400; }

/* State: waiting for parent confirmation */
.chore--waiting {
  border-color: var(--person, #2f9ed0);
}
.chore--waiting .chore__check {
  background: var(--person, #2f9ed0);
  border-color: var(--person, #2f9ed0);
}
.chore--waiting .chore__state { color: var(--person, #2f9ed0); }

/* State: confirmed by parent (locked) */
.chore--confirmed { cursor: default; opacity: .85; }
.chore--confirmed .chore__check {
  background: #1f9d6b;
  border-color: #1f9d6b;
}
.chore--confirmed .chore__title { text-decoration: line-through; color: var(--text-soft); }
.chore--confirmed .chore__state { color: #1f9d6b; }

/* ============================================================
   PARENT DASHBOARD — both kids side by side
   ============================================================ */
.wrap--wide { max-width: 760px; }

.parent-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* two columns, side by side */
  gap: 14px;
}
/* On a narrow phone, stack the two columns so they stay readable */
@media (max-width: 520px) {
  .parent-columns { grid-template-columns: 1fr; }
}

.kid-col {
  background: var(--card);
  border-radius: 18px;
  border-top: 5px solid var(--person, #ccc);
  box-shadow: var(--shadow);
  padding: 16px 14px;
}
.kid-col__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.kid-col__avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; background: var(--person-pale, #eee); flex-shrink: 0;
}
.kid-col__name { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 18px; margin: 0; }

.kid-col .progress__track { height: 10px; }
.kid-col .progress__label { font-size: 12px; margin-top: 6px; }

/* "Confirm all" button */
.btn-confirm-all {
  width: 100%;
  margin: 12px 0;
  border: none;
  border-radius: 999px;
  padding: 9px;
  background: var(--person, #2f9ed0);
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  cursor: pointer;
}
.btn-confirm-all:disabled { background: #cbd5e1; cursor: default; }

/* One chore line in the parent view */
.pchore {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 0;
  border-top: 1px solid #eef2f7;
  font-size: 14px;
}
.pchore__icon { width: 20px; text-align: center; flex-shrink: 0; font-size: 16px; }
.pchore__title { flex: 1; }
.pchore--todo .pchore__title { color: var(--text-soft); }
.pchore--confirmed .pchore__title { text-decoration: line-through; color: var(--text-soft); }

/* Per-chore "Confirm" button (only shown when waiting) */
.btn-confirm {
  border: none;
  border-radius: 999px;
  padding: 5px 12px;
  background: #1f9d6b;
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
}
.btn-confirm:active { transform: scale(.94); }

/* ============================================================
   HISTORY — last 30 days heatmap
   ============================================================ */
.history-kid { margin-bottom: 28px; }
.history-kid__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.history-kid__avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; background: var(--person-pale, #eee); flex-shrink: 0;
}
.history-kid__name { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 18px; margin: 0; }

.heat-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.heat-cell {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: #e5e9ef;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
}
.heat-legend {
  display: flex; align-items: center; gap: 6px;
  margin-top: 14px; font-size: 12px; color: var(--text-soft);
}
.heat-legend__cell { width: 16px; height: 16px; border-radius: 4px; }