/* Klussenlijst — playful design system (synced from Claude Design).
   Bright multicolor on warm cream, big rounded shapes, Fredoka + Nunito. */

:root {
  /* surfaces */
  --paper: #fff7ed;
  --surface: #ffffff;
  --ink: #2b2150; /* deep grape — friendlier than black */
  --muted: #8a83a6;
  --line: #f0e3d4;

  /* playful palette */
  --pink: #ff5d8f;
  --amber: #ffb020;
  --teal: #27c4c4;
  --purple: #7b6cf6;
  --mint: #3fcf8e; /* good / done */
  --red: #ff6b6b; /* bad / dislike */

  /* soft tints */
  --pink-soft: #ffe1ec;
  --amber-soft: #ffeccb;
  --teal-soft: #d2f4f4;
  --purple-soft: #e7e3ff;
  --mint-soft: #d6f6e7;
  --red-soft: #ffe0e0;

  /* shape + depth */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-pill: 999px;
  --shadow: 0 16px 40px rgba(43, 33, 80, 0.12);
  --shadow-sm: 0 6px 16px rgba(43, 33, 80, 0.1);

  /* type */
  --font-display: "Fredoka", "Trebuchet MS", sans-serif;
  --font-body: "Nunito", "Segoe UI", sans-serif;

  color-scheme: light;
}

* {
  box-sizing: border-box;
}

/* The `hidden` attribute must win over component `display` rules (e.g. .button
   is display:inline-flex, .admin-gate is display:grid), which would otherwise
   override it and leave gated elements visible. */
[hidden] {
  display: none !important;
}

body {
  min-width: 320px;
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 6%, rgba(255, 176, 32, 0.22), transparent 34%),
    radial-gradient(circle at 90% 4%, rgba(123, 108, 246, 0.18), transparent 30%),
    radial-gradient(circle at 82% 94%, rgba(39, 196, 196, 0.2), transparent 34%),
    radial-gradient(circle at 6% 96%, rgba(255, 93, 143, 0.16), transparent 32%),
    var(--paper);
  -webkit-font-smoothing: antialiased;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid rgba(123, 108, 246, 0.45);
  outline-offset: 3px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

/* ---- layout ---- */

.app {
  width: min(620px, calc(100% - 28px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  margin: 0 auto;
  /* room for the sticky action bar; safe areas for the installed app (U9) */
  padding: calc(22px + env(safe-area-inset-top)) 0 calc(110px + env(safe-area-inset-bottom));
  display: grid;
  gap: 16px;
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.greet {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.eyebrow {
  color: var(--purple);
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 2.7rem);
  font-weight: 600;
  line-height: 0.95;
}

h2 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
}

h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
}

.topbar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.switch-person {
  gap: 7px;
}

.switch-person .who {
  font-weight: 800;
}

.week-field {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.week-field input {
  min-height: 42px;
  padding: 0 12px;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
}

/* ---- mascot (Plons) ---- */

.mascot {
  position: relative;
  width: 60px;
  height: 60px;
  flex: none;
  animation: bob 3s ease-in-out infinite;
}

.mascot .m-body {
  position: absolute;
  inset: 0;
  border-radius: 48% 52% 46% 54% / 58% 58% 42% 42%;
  background: linear-gradient(160deg, #3fd6d6, #1aa7a7);
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.08), var(--shadow-sm);
}

.mascot .m-eye {
  position: absolute;
  top: 19px;
  width: 14px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.mascot .m-eye.l {
  left: 13px;
}

.mascot .m-eye.r {
  right: 13px;
}

.mascot .m-eye i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform 160ms ease;
}

.mascot .m-cheek {
  position: absolute;
  top: 33px;
  width: 9px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 93, 143, 0.5);
}

.mascot .m-cheek.l {
  left: 11px;
}

.mascot .m-cheek.r {
  right: 11px;
}

.mascot .m-smile {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 9px;
  border: 3px solid var(--ink);
  border-top: 0;
  border-radius: 0 0 16px 16px;
}

/* a quick celebration when something gets ticked */
.mascot.cheer {
  animation: cheer 600ms ease;
}

.mascot.cheer .m-smile {
  height: 12px;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes cheer {
  0% { transform: translateY(0) scale(1); }
  30% { transform: translateY(-10px) scale(1.1) rotate(-4deg); }
  60% { transform: translateY(0) scale(1.05) rotate(3deg); }
  100% { transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .mascot,
  .mascot.cheer {
    animation: none;
  }
}

/* ---- summary band ---- */

.summary-band {
  display: flex;
  gap: 10px;
}

.summary-band article {
  flex: 1;
  min-width: 0;
  padding: 14px 13px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.summary-band span {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 5vw, 1.7rem);
  font-weight: 600;
  line-height: 1;
}

.summary-band .t-done span { color: var(--mint); }
.summary-band .t-bal span { color: var(--amber); }
.summary-band .t-tot span { color: var(--purple); }

.summary-band p {
  margin-top: 4px;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.74rem;
}

/* ---- filter strip ---- */

.filter-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.filter-strip::-webkit-scrollbar {
  display: none;
}

.filter-button {
  flex: none;
  min-height: 36px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--muted);
  padding: 0 15px;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
  transition: transform 140ms ease, background 140ms ease, color 140ms ease;
}

.filter-button:hover {
  transform: translateY(-1px);
}

.filter-button[aria-pressed="true"] {
  background: var(--teal);
  color: #fff;
}

/* ---- panels ---- */

.panel {
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.7);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.section-heading {
  padding: 18px 18px 6px;
}

.section-heading h2 {
  margin-bottom: 2px;
}

.section-heading p,
.summary-band p,
.schedule-meta,
.house-rules li {
  color: var(--muted);
}

.section-heading p {
  font-size: 0.88rem;
}

/* ---- buttons ---- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 500;
  color: #fff;
  background: var(--purple);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.button.primary {
  flex: 1;
  font-size: 1.02rem;
  box-shadow: 0 7px 0 #5f4fd6;
}

.button.primary:active {
  transform: translateY(4px);
  box-shadow: 0 3px 0 #5f4fd6;
}

.button.add {
  width: 52px;
  min-height: 52px;
  padding: 0;
  font-size: 1.7rem;
  background: var(--pink);
  box-shadow: 0 7px 0 #e23f73;
}

.button.add:active {
  transform: translateY(4px);
  box-shadow: 0 3px 0 #e23f73;
}

.button.ghost {
  min-height: 38px;
  padding: 0 13px;
  background: rgba(123, 108, 246, 0.12);
  color: var(--purple);
  font-weight: 600;
}

.button.ghost:hover {
  background: rgba(123, 108, 246, 0.2);
}

/* ---- sticky action bar ---- */

.actionbar {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: min(620px, calc(100% - 28px));
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: var(--r-pill);
  background: rgba(255, 247, 237, 0.86);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
  /* it lives inside the Schema panel: stay above the rows that follow it */
  z-index: 9;
}

/* ---- schedule ---- */

.schedule-list {
  display: grid;
  gap: 9px;
  padding: 10px 14px 16px;
}

.day-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 2px 2px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--ink);
}

.day-heading::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--pink);
}

.day-heading.week::before {
  background: var(--teal);
}

.day-heading:first-child {
  margin-top: 0;
}

.schedule-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: center;
  padding: 13px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  animation: item-in 240ms ease both;
}

.schedule-item.done {
  background: var(--mint-soft);
  box-shadow: none;
}

.schedule-item.done h3 {
  text-decoration: line-through;
  color: var(--muted);
}

.schedule-item h3 {
  margin-bottom: 4px;
}

.check-wrap {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
}

.check-wrap input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.check-wrap span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 3px solid var(--line);
  border-radius: 10px;
  background: #fff;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.check-wrap input:checked + span {
  background: var(--mint);
  border-color: var(--mint);
  transform: rotate(-6deg);
}

.check-wrap input:checked + span::after {
  content: "✓";
  color: #fff;
  font-weight: 900;
  font-size: 0.95rem;
}

.schedule-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.84rem;
}

.who {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-weight: 800;
}

.av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 600;
}

.av.purple { background: var(--purple); }
.av.pink { background: var(--pink); }
.av.amber { background: var(--amber); }
.av.teal { background: var(--teal); }
.av.mint { background: var(--mint); }
.av.grape { background: var(--ink); }
.av.pool { background: var(--muted); }

.minutes-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  padding: 3px 9px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 500;
}

.minutes-chip::before {
  content: "⏱";
}

.schedule-note {
  flex-basis: 100%;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 1.3;
}

.empty-state {
  padding: 24px 14px;
  color: var(--muted);
  text-align: center;
  font-weight: 700;
}

/* ---- backlog + house rules ---- */

.backlog,
.house-rules {
  border-top: 2px dashed var(--line);
  padding: 16px 18px 18px;
}

.backlog h3,
.house-rules h3 {
  margin-bottom: 4px;
}

.backlog-hint {
  margin-bottom: 12px;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.82rem;
}

.backlog-list {
  display: grid;
  gap: 9px;
}

.house-rules ul {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding-left: 18px;
}

.house-rules li {
  font-size: 0.9rem;
  font-weight: 700;
}

/* ---- new-chore form ---- */

.new-chore-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: 6px 18px 16px;
}

.new-chore-form label {
  display: grid;
  flex: 1;
  gap: 6px;
  min-width: 120px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
}

.new-chore-form input,
.new-chore-form select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  text-transform: none;
}

.frequency-select {
  max-width: 160px;
}

.minutes-select {
  max-width: 110px;
}

.new-chore-form .button {
  background: var(--teal);
}

/* ---- preferences: one card per chore (no wide table) ---- */

.prefs-list {
  display: grid;
  gap: 12px;
  padding: 6px 14px 16px;
}

.chore-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.chore-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.chore-card-title {
  display: grid;
  gap: 5px;
  flex: 1;
  min-width: 0;
}

.chore-card .minutes-field {
  justify-self: start;
}

.chore-note {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
}

.pref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 8px;
}

.pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  background: var(--paper);
}

.pref-person {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.85rem;
}

.frequency-chip {
  width: fit-content;
  border-radius: var(--r-pill);
  background: var(--teal-soft);
  color: #1aa7a7;
  padding: 2px 9px;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
}

.chore-name-input {
  width: 100%;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink);
  padding: 4px 6px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
}

.chore-name-input:hover {
  border-color: var(--line);
}

.chore-name-input:focus {
  border-color: var(--purple);
  background: #fff;
}

.minutes-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
}

.minutes-input {
  width: 54px;
  min-height: 30px;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  padding: 0 8px;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: none;
}

.minutes-unit {
  font-weight: 700;
}

.prefs-empty {
  padding: 22px;
  color: var(--muted);
  text-align: center;
  font-weight: 700;
}

.delete-chore {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
}

.delete-chore:hover {
  background: var(--red-soft);
  color: var(--red);
}

/* ---- preference control ---- */

.preference-control {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: 120px;
  padding: 3px;
  border-radius: var(--r-sm);
  background: var(--paper);
}

.preference-control button {
  min-height: 32px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 500;
}

.preference-control button[aria-pressed="true"][data-value="like"] {
  background: var(--mint-soft);
  color: #1f9b66;
}

.preference-control button[aria-pressed="true"][data-value="neutral"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.preference-control button[aria-pressed="true"][data-value="dislike"] {
  background: var(--red-soft);
  color: var(--red);
}

/* ---- admin gate (soft lock on the management area) ---- */

.admin-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.admin-gate {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 18px 18px 28px;
  text-align: center;
}

.lock-icon {
  font-size: 2.1rem;
  line-height: 1;
}

.lock-text {
  max-width: 360px;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.4;
}

.unlock-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.unlock-form input {
  width: 140px;
  min-height: 44px;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  padding: 0 14px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  letter-spacing: 0.22em;
  text-align: center;
}

.unlock-error {
  color: var(--red);
  font-weight: 800;
  font-size: 0.84rem;
}

.shake {
  animation: shake 360ms ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-7px); }
  40%, 80% { transform: translateX(7px); }
}

@keyframes item-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- pairing screen (unpaired devices, R12) ---- */

.pair-screen {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding:
    calc(24px + env(safe-area-inset-top))
    calc(16px + env(safe-area-inset-right))
    calc(24px + env(safe-area-inset-bottom))
    calc(16px + env(safe-area-inset-left));
}

.pair-card {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(420px, 100%);
  padding: 28px 22px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow);
  text-align: center;
}

.pair-card #pairBody,
.bootstrap-form {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
}

.pair-text {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.4;
}

.pair-form input {
  width: 150px;
}

.pair-revoked {
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--red-soft);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.9rem;
}

.install-hint {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--amber-soft);
  font-size: 0.92rem;
  line-height: 1.45;
}

.install-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}

.link-button {
  padding: 4px 6px;
  border: 0;
  background: none;
  color: var(--purple);
  font-weight: 700;
  font-size: 0.86rem;
  text-decoration: underline;
}

.bootstrap-form input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
}

/* ---- sync markers (KTD6, R20) ---- */

.offline-marker {
  justify-self: start;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: var(--amber-soft);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.84rem;
}

.offline-marker::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--amber);
  vertical-align: 1px;
}

.pending-marker {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--amber-soft);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.72rem;
}

.schedule-item.pending {
  outline: 2px dashed var(--amber);
  outline-offset: -2px;
}

/* Rows animate in when the week or filter changes, not on every sync re-render. */
.no-intro .schedule-item {
  animation: none;
}

.notice {
  position: fixed;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom));
  z-index: 10;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: var(--shadow);
}

/* A new version took over (U9): stays until "Verversen". */
.update-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 18px;
  z-index: 11;
}

.update-toast .button {
  padding: 8px 14px;
  font-size: 0.86rem;
}

/* The install hint inside the app (U9); the pairing screen has its own. */
.app-install p {
  margin: 0;
}

.app-install-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* ---- devices (Voorkeuren > Apparaten, R13) ---- */

.devices {
  display: grid;
  gap: 6px;
  padding: 14px 0 18px;
  border-top: 2px dashed var(--line);
}

.devices h3,
.devices-hint,
.devices-error {
  margin: 0 18px;
}

.devices-hint {
  color: var(--muted);
  font-size: 0.88rem;
}

.pair-code-form {
  padding-bottom: 6px;
}

.pair-code-result {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin: 0 14px;
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--purple-soft);
  text-align: center;
}

.pair-code-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.2rem;
  letter-spacing: 0.24em;
  color: var(--purple);
}

.pair-code-countdown {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.84rem;
}

.devices-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 6px 14px 0;
  list-style: none;
}

.device-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.device-info {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.device-info strong {
  overflow-wrap: anywhere;
}

.device-info small {
  color: var(--muted);
  font-weight: 700;
}

.device-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.button.ghost.danger {
  background: var(--red-soft);
  color: var(--red);
}

@media (max-width: 560px) {
  .topbar {
    align-items: flex-start;
  }

  .topbar-actions {
    width: 100%;
    justify-content: space-between;
  }

  .frequency-select,
  .minutes-select {
    max-width: none;
  }
}

/* ---- per-device person (U4) ---- */

.person-choices {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  width: 100%;
}

.person-choice {
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 6px;
  padding: 14px 8px;
  border: 3px solid transparent;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
}

.person-choice[aria-pressed="true"] {
  border-color: var(--teal);
}

.person-choice .av {
  width: 44px;
  height: 44px;
  font-size: 1rem;
}

.person-choice small {
  color: var(--muted);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.74rem;
}

.my-panel .schedule-list {
  padding-top: 4px;
}

/* ---- open tasks (U5) ---- */

.claim-tally {
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--amber-soft);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.86rem;
}

.claim-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.claim-button {
  min-height: 36px;
}

.claim-lost {
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--red-soft);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.78rem;
}

.claim-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.claim-avatar {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
}

.claim-avatar .av {
  width: 36px;
  height: 36px;
  font-size: 0.85rem;
}

.open-toggle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.88rem;
}

.open-toggle input {
  width: 20px;
  height: 20px;
  accent-color: var(--teal);
}

.open-toggle small {
  color: var(--muted);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.76rem;
}

.prefs-warning {
  margin: 0 18px 8px;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: var(--amber-soft);
  font-weight: 800;
  font-size: 0.86rem;
}

/* ---- calendar (U7, R15-R17) ---- */

.calendar-list {
  display: grid;
  gap: 6px;
  padding: 6px 14px 16px;
}

.calendar-stale {
  justify-self: start;
  margin: 4px 18px 0;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--amber-soft);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.8rem;
}

.calendar-day {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.calendar-event {
  display: grid;
  grid-template-columns: 4.6rem auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.calendar-event.all-day {
  background: var(--purple-soft);
  box-shadow: none;
}

.calendar-time {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--purple);
}

.calendar-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--line);
}

.calendar-body {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.calendar-title {
  font-weight: 800;
  overflow-wrap: anywhere;
}

.calendar-source {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

/* ---- meals (U4, R7): tonight's meal and the week's meals ---- */

.meal-tonight {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 12px 16px;
  border-radius: var(--r-lg);
  background: var(--amber-soft);
  box-shadow: var(--shadow-sm);
}

.meal-tonight.tomorrow {
  background: var(--purple-soft);
}

.meal-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface);
  font-size: 1.1rem;
}

.meal-label {
  flex: none;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}

.meal-title {
  min-width: 0;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.calendar-meals {
  display: grid;
  gap: 6px;
  margin: 8px 14px 0;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--amber-soft);
}

.calendar-meals h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
}

.meal-week {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.meal-day {
  display: grid;
  grid-template-columns: 5.6rem minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.meal-day-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--purple);
}

.meal-day.today .meal-day-name {
  color: var(--pink);
}

.meal-day-title {
  font-weight: 700;
  overflow-wrap: anywhere;
}

/* ---- marking and moving dinners (meal plan U5) ---- */

.meal-tonight .meal-eaten-button {
  flex: none;
  margin-left: auto;
  min-height: 36px;
  background: var(--surface);
  color: var(--mint);
  font-weight: 700;
}

.meal-status {
  margin: 8px 14px 0;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: var(--mint-soft);
  font-weight: 800;
}

.meal-status.error {
  background: var(--red-soft);
}

.calendar-leftovers {
  background: var(--pink-soft);
}

.calendar-leftovers + .calendar-meals {
  margin-top: 8px;
}

.meal-row {
  row-gap: 6px;
  padding: 6px 0;
}

.meal-row + .meal-row {
  border-top: 2px dashed rgba(43, 33, 80, 0.08);
}

.meal-row.done .meal-day-title {
  color: var(--muted);
  text-decoration: line-through;
}

.meal-actions,
.meal-move-picker {
  grid-column: 1 / -1;
}

.meal-note {
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--purple);
}

.meal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.button.meal-button {
  min-height: 36px;
  background: var(--surface);
}

.button.meal-button.eaten {
  color: var(--mint);
}

.button.meal-button:disabled {
  opacity: 0.5;
}

.meal-move-picker {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding: 8px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.meal-move-days {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: 6px;
  width: 100%;
}

.meal-move-day {
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 44px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--amber-soft);
  color: var(--ink);
  text-align: left;
}

.meal-move-day.free {
  background: var(--mint-soft);
}

.meal-move-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.86rem;
}

.meal-move-dinner {
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--muted);
  overflow-wrap: anywhere;
}

/* ---- shopping list (U6, R9-R10) ---- */

.shop-form {
  display: flex;
  gap: 8px;
  padding: 6px 14px 4px;
}

.shop-form input {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}

.shop-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 10px 14px 6px;
  list-style: none;
}

.shop-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.shop-item.done {
  background: var(--mint-soft);
  box-shadow: none;
}

.shop-item.pending {
  outline: 2px dashed var(--amber);
  outline-offset: -2px;
}

.shop-check {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
  cursor: pointer;
}

.shop-check input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.shop-box {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 3px solid var(--line);
  border-radius: 9px;
  background: #fff;
  transition: background 160ms ease, border-color 160ms ease;
}

.shop-check input:checked + .shop-box {
  background: var(--mint);
  border-color: var(--mint);
}

.shop-check input:checked + .shop-box::after {
  content: "✓";
  color: #fff;
  font-weight: 900;
  font-size: 0.9rem;
}

.shop-check input:focus-visible + .shop-box {
  outline: 3px solid var(--purple);
  outline-offset: 2px;
}

.shop-name {
  font-weight: 800;
  overflow-wrap: anywhere;
}

.shop-item.done .shop-name {
  text-decoration: line-through;
  color: var(--muted);
}

.shop-undo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 14px 0;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: var(--purple-soft);
  font-weight: 800;
}

.shop-clear {
  margin: 8px 14px 16px;
}

/* ---- Siri link and calendar feeds (Voorkeuren) ---- */

.siri-link {
  display: grid;
  gap: 6px;
  padding-top: 8px;
}

.siri-link h4,
.siri-link .devices-hint {
  margin: 0 18px;
}

.siri-token {
  width: 100%;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85rem;
  text-align: center;
}

.siri-actions {
  display: flex;
  gap: 8px;
}

.feeds {
  display: grid;
  gap: 6px;
  padding: 14px 0 18px;
  border-top: 2px dashed var(--line);
}

.feeds h3,
.feeds .devices-hint,
.feeds .devices-error {
  margin: 0 18px;
}

.feed-url {
  flex: 1 1 16rem;
}

.feed-url input {
  width: 100%;
}

.feed-row.editing {
  padding: 4px 0;
}

.feed-edit-form {
  width: 100%;
  padding: 6px 10px 10px;
}

.device-info .feed-error {
  color: var(--red);
}

/* iCloud calendars (U4, R2, R5-R6) */
.feed-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.feed-badge {
  padding: 1px 9px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.72rem;
  line-height: 1.5;
}

.feed-badge.icloud {
  background: var(--teal-soft);
  color: var(--ink);
}

.feed-badge.new {
  background: var(--pink);
  color: var(--surface);
}

.feed-row.is-new {
  box-shadow: var(--shadow-sm), inset 0 0 0 2px var(--pink-soft);
}

.feed-row.gone {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--line);
  opacity: 0.7;
}

.feed-row.gone .feed-name {
  color: var(--muted);
}

.feed-row.gone .feed-label {
  text-decoration: line-through;
}

.meal-choice,
.meal-none {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  min-height: 36px;
  margin-top: 2px;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
}

.meal-none {
  margin: 4px 18px 0;
}

.meal-choice input,
.meal-none input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--amber);
}

.icloud-status {
  display: grid;
  justify-items: start;
  gap: 8px;
  margin: 4px 14px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--red-soft);
}

.feeds .icloud-status .devices-hint {
  margin: 0;
  color: var(--ink);
}

.icloud-status .button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.icloud-message {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--red);
}

.feeds-empty {
  padding: 6px 4px;
  color: var(--muted);
  font-weight: 700;
}

@media (max-width: 560px) {
  .calendar-event {
    grid-template-columns: 4rem auto 1fr;
  }
}

/* ---- dashboard layout (phone app on wider screens) ----
   Under 760px everything stays one column: .dash-agenda is display:contents,
   so the panels keep their phone order. 760-1099px: two columns (Mijn
   klusjes, Agenda and Boodschappen left, Schema right). From 1100px: three
   columns (Mijn klusjes + Boodschappen, Schema, Agenda). The page scrolls as
   one; no column scrolls on its own. */

.dashboard-view,
.dashboard {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.dash-agenda {
  display: contents;
}

@media (min-width: 760px) {
  .app {
    width: min(1560px, calc(100% - 48px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  }

  .dashboard {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* the last row is flexible, so the tall Schema column never stretches
       the rows the left column stacks in */
    grid-template-rows: auto auto 1fr;
    align-items: start;
  }

  .dashboard > * {
    min-width: 0;
  }

  .dash-agenda {
    display: grid;
    gap: 16px;
    align-content: start;
  }

  /* columns can be narrow: let tonight's meal wrap instead of squeezing */
  .dash-agenda .meal-tonight {
    flex-wrap: wrap;
  }

  .dash-agenda .meal-title {
    flex: 1 1 8rem;
  }

  #mySection { grid-column: 1; grid-row: 1; }
  .dash-agenda { grid-column: 1; grid-row: 2; }
  #shopSection { grid-column: 1; grid-row: 3; }
  .schedule-panel { grid-column: 2; grid-row: 1 / -1; }

  /* An "Iedereen" device has no Mijn klusjes: no empty row on top. */
  .dashboard:has(> #mySection[hidden]) .dash-agenda { grid-row: 1; }
  .dashboard:has(> #mySection[hidden]) #shopSection { grid-row: 2 / -1; }

  /* no floating bar: "Opnieuw verdelen" and "+" sit in the Schema heading,
     so nothing covers the bottom of the columns */
  .app {
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }

  .schedule-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
  }

  .schedule-heading-text {
    flex: 1 1 12rem;
    min-width: 0;
  }

  .actionbar {
    position: static;
    transform: none;
    width: auto;
    flex: none;
    align-items: center;
    gap: 8px;
    padding: 0 0 7px;
    border-radius: 0;
    background: none;
    backdrop-filter: none;
    box-shadow: none;
  }

  .actionbar .button.primary {
    flex: none;
    padding: 0 20px;
  }

  .actionbar .button.add {
    width: 44px;
    min-height: 44px;
    font-size: 1.5rem;
  }

  /* the phone app's notices follow it (the board keeps its own) */
  .ds-page .notice {
    left: auto;
    right: max(24px, env(safe-area-inset-right));
    bottom: calc(24px + env(safe-area-inset-bottom));
    transform: none;
  }
}

@media (min-width: 1100px) {
  .dashboard {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 20px;
  }

  #mySection { grid-column: 1; grid-row: 1; }
  #shopSection { grid-column: 1; grid-row: 2; }
  .schedule-panel { grid-column: 2; grid-row: 1 / -1; }
  .dash-agenda { grid-column: 3; grid-row: 1 / -1; }

  .dashboard:has(> #mySection[hidden]) .dash-agenda { grid-row: 1 / -1; }
  .dashboard:has(> #mySection[hidden]) #shopSection { grid-row: 1 / -1; }
}

/* ---- Voorkeuren: its own screen with tabs (parent devices) ---- */

.prefs-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
  min-width: 0;
}

.prefs-view-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.prefs-view-head h2 {
  flex: 1 1 auto;
  font-size: 1.6rem;
}

/* On a phone the header's Voorkeuren button is just the gear; the label
   stays for screen readers. */
@media (max-width: 560px) {
  .prefs-open {
    width: 38px;
    padding: 0;
  }

  .prefs-open .prefs-open-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .prefs-view-head h2 {
    font-size: 1.35rem;
  }
}

.prefs-view-head h2:focus {
  outline: none;
}

.prefs-body {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.prefs-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 4px;
  scrollbar-width: none;
}

.prefs-tabs::-webkit-scrollbar {
  display: none;
}

.prefs-tab {
  flex: none;
  min-height: 42px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--muted);
  padding: 0 18px;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}

.prefs-tab[aria-selected="true"] {
  background: var(--purple);
  color: #fff;
}

.prefs-tabpanel {
  display: grid;
  gap: 8px;
  align-content: start;
  padding-bottom: 18px;
}

.prefs-tabpanel.devices,
.prefs-tabpanel.feeds {
  padding: 0 0 18px;
  border-top: 0;
}

.prefs-tabpanel .section-heading .prefs-tabpanel-title {
  margin: 0 0 2px;
  font-size: 1.15rem;
  font-weight: 600;
}

.prefs-tabpanel .section-heading p {
  margin: 0;
}

.prefs-add {
  margin: 0 18px;
}

.prefs-add-toggle[aria-expanded="true"] {
  background: rgba(123, 108, 246, 0.22);
}

.prefs-add-body {
  display: grid;
  gap: 6px;
}

.prefs-add-body > .devices-hint {
  margin: 0 18px;
}

.pair-code-block {
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 2px dashed var(--line);
}

.pair-code-block h4,
.pair-code-block .devices-hint {
  margin: 0 18px;
}

.pair-code-block h4,
.feeds-heading h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
}

.feeds-heading {
  padding: 6px 4px 0;
}

.feeds-heading h4 {
  margin: 0;
  color: var(--muted);
}

.pair-code-block h4 {
  margin-block: 0;
}

/* Voorkeuren > Klusjes: compact rows per rhythm, one card open at a time */

.chore-group {
  display: grid;
  gap: 6px;
}

.chore-group + .chore-group {
  margin-top: 8px;
}

.chore-group-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 4px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
}

.chore-group-count {
  min-width: 24px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  background: var(--teal-soft);
  color: var(--ink);
  font-size: 0.76rem;
  line-height: 1.6;
  text-align: center;
}

.chore-rows {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chore-item {
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.chore-item.is-open {
  box-shadow: var(--shadow-sm), inset 0 0 0 2px var(--purple-soft);
}

.chore-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.chore-row-name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.chore-row-meta {
  flex: none;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.chore-row-chevron {
  flex: none;
  color: var(--purple);
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1;
  transition: transform 140ms ease;
}

.chore-row[aria-expanded="true"] .chore-row-chevron {
  transform: rotate(90deg);
}

.chore-item .chore-card {
  padding-top: 4px;
  background: transparent;
  box-shadow: none;
}

/* ---- family board (U8): landscape wall tablet, board.html only ----
   Everything is scoped to body.board so the phone layout is unaffected.
   Body text is at least 20px and touch targets at least 56px, for reading
   and tapping from about two meters. No region scrolls on its own: board.js
   shows what fits and adds "+n meer". */

/* rem is 20px on the board, so shared components scale up with it. */
html.board-root {
  font-size: 20px;
}

body.board {
  min-width: 0;
  font-size: 1rem;
  overflow: hidden;
}

.board-app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(380px, 35vw, 540px);
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  height: 100vh;
  height: 100dvh;
  padding:
    max(10px, env(safe-area-inset-top))
    max(14px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(14px, env(safe-area-inset-left));
}

.board-top {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.board-greet {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.board .mascot {
  width: 52px;
  height: 52px;
}

.board .mascot .m-eye {
  top: 16px;
}

.board .mascot .m-cheek,
.board .mascot .m-smile {
  top: 30px;
}

.board .eyebrow {
  font-size: 0.8rem;
}

.board-top h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.1;
  white-space: nowrap;
}

.board-heading {
  min-width: 0;
}

/* The date with tonight's meal next to it; a long meal is cut, never the date. */
.board-date-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.board-meal.meal-tonight {
  flex: 0 1 auto;
  gap: 8px;
  padding: 4px 14px 4px 4px;
  border-radius: var(--r-pill);
  font-size: 0.95rem;
  white-space: nowrap;
}

.board-meal .meal-icon {
  width: 32px;
  height: 32px;
  font-size: 0.95rem;
}

.board-meal .meal-title {
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.board .offline-marker {
  font-size: 0.9rem;
}

.board-wake {
  padding: 4px 12px;
  border-radius: var(--r-pill);
  background: var(--line);
  color: var(--muted);
  font-weight: 800;
  font-size: 0.75rem;
}

.board-weeknum {
  padding: 6px 16px;
  border-radius: var(--r-pill);
  background: var(--purple-soft);
  color: var(--purple);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
}

/* ---- cards: the five people and the open tasks, in a 3x2 grid ---- */

.board-people {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  min-height: 0;
}

/* The person cards are rendered into this wrapper; it takes no box so they
   sit in the grid next to the open-task card. */
.board-people-cards {
  display: contents;
}

.board-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 0;
  padding: 8px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.6);
  box-shadow: var(--shadow-sm);
}

/* Avatar, name and the claimed tally on one line; the tally wraps below
   when the card is narrow. */
.board-col-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
  min-height: 52px;
  padding: 8px 10px;
  border-radius: var(--r-md);
  background: var(--paper);
}

.board-col-head.purple { background: var(--purple-soft); }
.board-col-head.pink { background: var(--pink-soft); }
.board-col-head.amber { background: var(--amber-soft); }
.board-col-head.teal { background: var(--teal-soft); }
.board-col-head.mint { background: var(--mint-soft); }

.board-col-head .av {
  width: 36px;
  height: 36px;
  font-size: 0.7rem;
}

.board-col-head h2 {
  flex: 1 0 auto;
  max-width: calc(100% - 44px);
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-tally {
  flex: none;
  padding: 2px 10px;
  border-radius: var(--r-pill);
  background: var(--surface);
  font-weight: 800;
  font-size: 0.75rem;
}

/* A region: a heading plus a list that takes the space left. */
.board-region {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}

.board-today {
  flex: 1 1 0;
}

.board-week {
  flex: 0 0 auto;
}

.board-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 2px;
  overflow: hidden;
  list-style: none;
}

.board-region.expanded {
  flex: 1 1 0;
}

/* An expanded block may be scrolled by hand; nothing scrolls on its own. */
.board-region.expanded .board-list {
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Collapsed "Deze week nog": only the toggle shows. */
.board-week:not(.expanded) .board-list {
  display: none;
}

/* While one block is expanded, the others in its column or rail show only
   their heading. */
.has-expanded > .board-region:not(.expanded) {
  flex: 0 0 auto;
}

.has-expanded > .board-region:not(.expanded) .board-list,
.has-expanded > .board-region:not(.expanded) .calendar-stale,
.has-expanded > .board-region:not(.expanded) .board-shop-undo {
  display: none;
}

.board-region-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
}

.board-region-title::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pink);
}

.board-week-toggle {
  min-height: 56px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--teal-soft);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: left;
}

.board-week.expanded .board-week-toggle {
  background: var(--teal);
  color: #fff;
}

.board-more {
  flex: none;
  min-width: 56px;
  min-height: 56px;
  padding: 0 14px;
  border: 2px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--purple);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
}

.board-empty,
.board-loading,
.board-feed-error {
  flex: none;
  padding: 10px 6px;
  color: var(--muted);
  font-weight: 800;
  font-size: 1rem;
}

.board-loading {
  font-weight: 700;
}

.board-feed-error {
  padding: 4px 12px;
  border-radius: var(--r-md);
  background: var(--red-soft);
  color: var(--ink);
  font-size: 0.8rem;
}

/* Task rows: the whole row is the tap target for the checkbox. */
.board .schedule-item {
  position: relative;
  flex: none;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  min-height: 56px;
  padding: 10px;
  animation: none;
}

.board .schedule-item h3 {
  margin-bottom: 2px;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.board .schedule-meta {
  gap: 6px;
  font-size: 0.8rem;
}

.board .minutes-chip {
  font-size: 0.75rem;
  white-space: nowrap;
}

.board .schedule-item .av {
  width: 26px;
  height: 26px;
  font-size: 0.7rem;
}

.board-task .check-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: auto;
  height: auto;
  border-radius: var(--r-md);
  cursor: pointer;
}

/* The name gets the full row width; the box sits on the minutes line. */
.board-task.schedule-item {
  grid-template-columns: minmax(0, 1fr);
}

.board-task .check-wrap span {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

.board-task .schedule-meta {
  min-height: 28px;
  padding-left: 38px;
}

/* The open-task card: a neutral head and a short hint above the list. */
.board-pool .board-col-head {
  background: var(--line);
}

.board-pool-hint {
  flex: none;
  margin: 0;
  padding: 0 4px;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.75rem;
}

.board-pool.has-expanded .board-pool-hint,
.board-pool.has-selection .board-pool-hint {
  display: none;
}

/* ---- side rail: a tall calendar, a compact shopping list below ---- */

.board-rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
}

.board-panel {
  padding: 10px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-sm);
}

.board-calendar {
  flex: 1 1 0;
}

.board-shop {
  flex: 0 0 auto;
  gap: 4px;
}

/* Collapsed, the list shows two rows of two items; "+n meer" or "+" opens it. */
.board-shop:not(.expanded) .shop-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  flex: none;
  max-height: calc(2 * 52px + 6px + 4px);
}

.board-shop:not(.expanded) .shop-item,
.board-shop:not(.expanded) .shop-check {
  min-height: 52px;
}

.board-shop:not(.expanded) .shop-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-shop .board-empty-item {
  grid-column: 1 / -1;
  padding: 4px 6px;
}

.board-rail.has-expanded > .board-region.expanded {
  flex: 1 1 0;
}

.board-region-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 0 0 4px;
}

.board-region-head h2 {
  margin-right: auto;
}

.board-more-slot:empty {
  display: none;
}

.board-region-head .board-more {
  padding: 0 12px;
  font-size: 0.8rem;
}

.board-region-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
}

.board .calendar-stale {
  align-self: flex-start;
  margin: 0 4px;
  font-size: 0.75rem;
}

.board-region-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.board-add-button.button {
  width: 56px;
  min-height: 56px;
  padding: 0;
  font-size: 1.6rem;
  background: var(--pink);
}

.board-add-button[aria-expanded="true"] {
  background: var(--ink);
}

.board-small-button.button.ghost {
  min-height: 44px;
  font-size: 0.85rem;
}

.board-day-heading.day-heading {
  flex: none;
  margin: 6px 2px 0;
  font-size: 0.9rem;
}

.board-day-heading.day-heading:first-child {
  margin-top: 0;
}

.board-calendar .board-list {
  gap: 5px;
}

/* Compact rows so a full day of appointments fits. */
.board .calendar-event {
  flex: none;
  grid-template-columns: 3.6em auto minmax(0, 1fr);
  gap: 8px;
  min-height: 48px;
  padding: 4px 10px;
}

.board .calendar-body {
  gap: 0;
}

.board .calendar-time {
  font-size: 0.85rem;
}

.board .calendar-title {
  font-size: 1rem;
  line-height: 1.15;
}

.board .calendar-source {
  overflow: hidden;
  font-size: 0.7rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The week's meals: one compact strip of day and title pairs under the
   agenda. It sits outside the list, so the overflow fitter gives the agenda
   whatever height is left. */
.board-meals {
  flex: none;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-md);
  background: var(--amber-soft);
}

.board-meals-title {
  flex: none;
  padding: 2px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  line-height: 1.2;
}

.board-meals-list {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.board-meals .meal-day {
  display: flex;
  gap: 5px;
  min-width: 0;
  max-width: 100%;
  font-size: 0.75rem;
  line-height: 1.2;
  padding: 2px 0;
}

.board-meals .meal-day-name {
  flex: none;
  font-size: 0.75rem;
}

.board-meals .meal-day-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.has-expanded > .board-region:not(.expanded) .board-meals {
  display: none;
}

/* The dot of a feed without a person takes the avatar's width, so the
   titles line up. */
.board .calendar-dot {
  width: 16px;
  height: 16px;
  margin: 0 6px;
}

.board .calendar-event .av {
  width: 28px;
  height: 28px;
  font-size: 0.7rem;
}

/* Open tasks: tap the task to claim or release (R7). */
.board-pool-item .check-wrap {
  width: 56px;
  height: 56px;
  margin: -12px 0 -12px -10px;
}

.board-pool-item.schedule-item {
  grid-template-columns: 46px minmax(0, 1fr);
}

.board-tap {
  min-height: 36px;
  cursor: pointer;
}

.board-pool-item.selected {
  outline: 3px solid var(--purple);
  outline-offset: -3px;
}

.board-claim-actions {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.board .claim-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}

.board .claim-avatar {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: auto;
  height: auto;
  min-height: 56px;
  padding: 6px 0;
  border-radius: var(--r-md);
}

.board .claim-avatar .av {
  width: 40px;
  height: 40px;
  font-size: 0.85rem;
}

.claim-avatar-name {
  font-weight: 800;
  font-size: 0.7rem;
}

/* In the open-task card the picker wraps (3 + 2 on a tablet), so every
   name stays readable. */
.board-pool .claim-picker {
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
}

.board-pool .claim-avatar-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* While the picker is open the list may scroll, so the picker is never cut
   off in a short card; board.js scrolls it into view. */
.board-pool.has-selection .board-list {
  overflow-y: auto;
  overscroll-behavior: contain;
}

.board-release.button {
  width: 100%;
  min-height: 56px;
  background: var(--pink);
}

.board .claim-lost {
  font-size: 0.75rem;
}

/* Shopping */
.board-shop-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  min-width: 0;
}

.board-shop-tools .board-small-button {
  justify-self: start;
}

.board-shop-form.shop-form {
  min-width: 0;
  padding: 0;
}

.board-shop-form input {
  min-height: 56px;
  font-size: 1rem;
}

.board-shop-form .button {
  min-height: 56px;
}

.board-shop-undo.shop-undo {
  margin: 0;
  font-size: 0.85rem;
}

.board .shop-list {
  padding: 2px;
  gap: 6px;
}

.board .shop-item {
  flex: none;
  min-height: 56px;
  padding: 0;
}

.board .shop-check {
  min-height: 56px;
  padding: 0 12px;
}

.board .shop-name {
  font-size: 1rem;
}

.board-empty-item {
  list-style: none;
}

.board .notice {
  bottom: 24px;
  font-size: 1rem;
}

/* Board pairing screen: bigger code field for the wall. */
.board .pair-card {
  width: min(520px, 100%);
}

.board .pair-form input,
.board .pair-form .button {
  min-height: 56px;
  font-size: 1.1rem;
}