/* Family accounts (spec §17, §19): the child home (the iPad), 设置 → 家庭成员 and 工具名称, the 通知
   switch and the leave-child-mode sheet. Side-by-side items share one size variable and equal grid
   columns (§12). */

/* ======================= Child pages: header and card grid (spec §17.4, §24.3) ======================= */

/* One look for every child card (homework, hero, 奖励站): padding, radius, shadow and the head row
   (icon + title) come from these, so the cards line up across the two columns. */
.page--kid {
  --kid-pad: 16px;
  --kid-icon: 48px;
  --kid-head-fs: 24px;
  --kid-title-fs: 30px;
  --kid-slot-h: 300px;
  --kid-max: 1240px;
  --kid-sticky-top: calc(var(--safe-top) + 68px);
}
@media (min-width: 700px) { .page--kid { --kid-pad: 20px; --kid-icon: 52px; --kid-head-fs: 26px; --kid-title-fs: 36px; --kid-slot-h: 340px; } }
/* Every child page (home, 我的作业, 我的英雄, 奖励站): one content width on big screens, and the
   header's words start where the cards start. */
.page--kid .page-body, .page--heroes-kid .page-body, .page--prizes-kid .page-body { width: 100%; max-width: var(--kid-max, 1240px); margin-left: auto; margin-right: auto; }
.page--kid .hero, .page--heroes-kid .hero, .page--prizes-kid .hero {
  padding-left: max(var(--gutter), var(--safe-left), calc((100% - var(--kid-max, 1240px)) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), var(--safe-right), calc((100% - var(--kid-max, 1240px)) / 2 + var(--gutter)));
}

/* Child home: a low header, the avatar beside the greeting (spec §24.3a #5). */
.page--kid-home .hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "av title" "av sub";
  align-items: center;
  column-gap: 16px;
  padding-top: 6px;
}
.page--kid-home .hero-title {
  grid-area: title;
  align-self: end;
  font-size: min(var(--kid-title-fs), 7.6vw);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.page--kid-home .hero-sub { grid-area: sub; align-self: start; margin-top: 2px; font-size: 17px; }
.kid-avatar {
  grid-area: av;
  width: 64px; height: 64px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 8px 20px rgba(10, 0, 20, 0.30);
  animation: kid-bob 3.6s ease-in-out infinite alternate;
}
@media (min-width: 700px) { .kid-avatar { width: 76px; height: 76px; } }
.kid-avatar svg { width: 100%; height: 100%; }
@keyframes kid-bob { from { transform: translateY(-2px); } to { transform: translateY(2px); } }
/* The other child pages (我的作业): a one-line title, nothing tall. */
.page--hwk .hero-title { font-size: 30px; }

.kid-exit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  color: #fff;
  background: var(--hero-glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-size: 15px;
  font-weight: 600;
  transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2);
}
.kid-exit svg { width: 18px; height: 18px; }
.kid-exit:active { transform: scale(0.95); background: var(--hero-glass-strong); }

/* One grid of two equal columns (family/kid-columns.js):
   portrait — homework across both columns, the hero and 奖励站 cards side by side under it, equal;
   landscape — homework left; right, the hero card and the 奖励站 card stacked, at their own height,
   following the scroll when they fit the screen (is-sticky). */
.kid-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--gap);
}
.kid-main { grid-column: 1 / -1; display: grid; min-width: 0; }
.kid-side { display: contents; }
.kid-panels.is-single-side .kid-side > * { grid-column: 1 / -1; }
@media (orientation: landscape) and (min-width: 900px) {
  .kid-panels { align-items: start; }
  .kid-main { grid-column: 1; }
  .kid-side { display: grid; grid-column: 2; gap: var(--gap); align-content: start; min-width: 0; }
  .kid-side.is-sticky { position: sticky; top: var(--kid-sticky-top); }
}
/* With 今天的习惯 (kid-columns.js pair, spec §37.3): from 700px (the iPad, both orientations) homework
   and habits side by side and equally tall; the hero and 奖励站 cards under them, side by side and
   equally tall (.kid-row is not .kid-side, so their landscape side-column looks do not apply). */
.kid-pair { grid-column: 1 / -1; display: grid; min-width: 0; }
.kid-row { display: contents; }
.kid-panels.is-single-side .kid-row > * { grid-column: 1 / -1; }
/* Narrower than 700px (a phone) the hero and 奖励站 cards stack too, each across the width, like the
   homework and habits above them (spec §37.10 「手机宽度时上下排」): side by side at ~170px their
   titles and prizes were cut off. */
@media not all and (min-width: 700px) { .kid-panels--pair .kid-row > * { grid-column: 1 / -1; } }
@media (min-width: 700px) {
  .kid-panels--pair { align-items: stretch; }
  .kid-panels--pair .kid-main { grid-column: 1; }
  .kid-panels--pair .kid-pair { grid-column: 2; }
  /* A panel with nothing today, beside a long one: its friendly empty box fills the panel. */
  .kid-panels--pair .hwk-list:has(> .hwk-empty:only-child) { flex: 1; }
}
/* Panels of tools.js childSlot 'extra' (e.g. 我的待办, spec §38.5): without 今天的习惯, under the homework
   and as wide; two of them side by side in portrait, equal in height. */
.kid-stack { display: grid; gap: var(--gap); align-content: start; min-width: 0; }
.kid-extra { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: var(--gap); min-width: 0; }
@media (orientation: portrait) and (min-width: 700px) { .kid-extra--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* With 今天的习惯 (the pair grid): a row of their own under the hero and 奖励站 cards, across the width
   (kid-columns.js `after`); two of them side by side from 700px, like the rows above. */
.kid-panels--pair > .kid-extra { grid-column: 1 / -1; }
@media (min-width: 700px) { .kid-panels--pair > .kid-extra--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Not the wide landscape grid: the homework, then the hero and 奖励站 cards (the coins stay on the first
   screen), then these panels across the width (spec §38.9). */
@media not all and (orientation: landscape) and (min-width: 900px) {
  .kid-main:has(> .kid-stack), .kid-stack { display: contents; }
  .kid-stack > .kid-slot { grid-column: 1 / -1; }
  .kid-extra { grid-column: 1 / -1; order: 1; }
}
.kid-slot { display: flex; min-width: 0; }
.kid-slot[hidden] { display: none; }
.kid-slot > * { flex: 1; min-width: 0; }
.kid-panel { display: flex; flex-direction: column; min-width: 0; }
.kid-panel > * { flex: 1; }
/* Skeletons about as tall as what comes, so the page does not jump. */
.kid-slot-loading { min-height: var(--kid-slot-h); border-radius: var(--r-xl); }
.kid-slot-loading--homework { min-height: 480px; }
.kid-slot-loading--station { min-height: 168px; }
.kid-slot-loading--habits { min-height: 480px; }

.kid-slot-empty {
  --slot-ink: var(--positive);
  --slot-soft: var(--leaf-soft);
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 10px;
  min-height: var(--kid-slot-h);
  padding: 28px;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  text-align: center;
}
.kid-slot-empty[data-accent="pineapple"] { --slot-ink: var(--pineapple-deep); --slot-soft: var(--pineapple-soft); }
.kid-slot-empty[data-accent="coral"] { --slot-ink: var(--danger); --slot-soft: var(--danger-soft); }
.kid-slot-failed { width: 100%; border: 0; font: inherit; color: inherit; transition: transform var(--dur-1) var(--ease-out); }
.kid-slot-failed:active { transform: scale(0.98); }
.kid-slot-icon {
  display: grid;
  place-items: center;
  width: 88px; height: 88px;
  border-radius: 28px;
  color: var(--slot-ink);
  background: var(--slot-soft);
}
.kid-slot-icon svg { width: 48px; height: 48px; }
.kid-slot-title { font-size: 26px; font-weight: 800; }
.kid-slot-text { max-width: 22em; font-size: 18px; color: var(--text-2); }

.kid-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: var(--gap);
  margin-top: var(--gap);
}
@media (min-width: 700px) { .kid-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kid-tool {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 10px;
  height: 100%;
  min-height: 150px;
  padding: var(--card-pad);
  border-radius: var(--r-l);
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
  box-shadow: var(--shadow-2);
  transition: transform var(--dur-1) var(--ease-out);
}
.kid-tool:active { transform: scale(0.96); }
.kid-tool-icon {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(135deg, #FF9A57, #FF5E62);
}
.kid-tool[data-accent="leaf"] .kid-tool-icon { background: linear-gradient(135deg, #62CF90, #2B9A5C); }
.kid-tool[data-accent="pineapple"] .kid-tool-icon { background: linear-gradient(135deg, #FFD45C, #FFA51F); color: #5A3500; }
.kid-tool[data-accent="mangosteen"] .kid-tool-icon { background: linear-gradient(135deg, #A563CC, #5E2580); }
.kid-tool[data-accent="sky"] .kid-tool-icon { background: linear-gradient(135deg, #7AA7FF, #2D6CF0); }
.kid-tool-icon svg { width: 36px; height: 36px; }
.kid-tool-name { font-size: 22px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .kid-avatar { animation: none; }
}

/* ======================= 设置 → 家庭成员 ======================= */

.page--family .page-body { margin-top: 0; padding-top: 4px; }
.member-avatar {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
}
.member-avatar svg { width: 100%; height: 100%; }
.member-row .row-sub { white-space: normal; }
.member-cards { display: grid; gap: var(--gap); }
.member-card { padding: 6px 0 var(--card-pad); }
.member-card .row { padding-left: var(--card-pad); padding-right: var(--card-pad); }
/* Stacked full-width buttons of one height: the hand-over label is long, and two equal columns at
   375px would wrap it (§12). */
.member-actions {
  --member-btn-h: 50px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: var(--member-btn-h);
  gap: 10px;
  padding: 4px var(--card-pad) 0;
}
.member-btn { min-width: 0; height: 100%; padding: 0 14px; font-size: 16px; }
.member-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.member-btn span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.member-add { margin-top: var(--gap); }
.member-empty { padding: 18px 4px 4px; font-size: 15px; color: var(--text-3); text-align: center; }

.child-form { display: grid; gap: 16px; }
.child-form .field + .field { margin-top: 0; }
.avatar-picks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.avatar-pick {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  padding: 6px;
  border: 2px solid transparent;
  border-radius: 20px;
  background: var(--surface-3);
  transition: border-color var(--dur-2), box-shadow var(--dur-2), transform var(--dur-1) var(--ease-out);
}
.avatar-pick:active { transform: scale(0.95); }
.avatar-pick[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.avatar-pick-art { width: 100%; max-width: 64px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.avatar-pick-art svg { width: 100%; height: 100%; }
/* All six avatars (editing a member, spec §19.1): two equal rows of three. */
.avatar-picks--all { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; }

/* Every member row ends in the same pencil button (one size, §12). */
.member-edit { flex-shrink: 0; }
.member-edit svg { width: 20px; height: 20px; }
.member-account { margin: 0; text-align: center; }

/* ======================= 设置 → 工具名称 (spec §19.2) ======================= */

.tool-name-row .badge-icon { flex-shrink: 0; }
.tool-name-chip {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  min-width: 64px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
}
.tool-name-form { display: grid; gap: 4px; }
.tool-name-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 10px; }
.tool-name-actions .btn { min-width: 0; height: 100%; }

/* ======================= 设置 → 通知 ======================= */

.push-row .row-sub { white-space: normal; }
.push-guide {
  display: grid;
  gap: 6px;
  margin: 10px 8px 0;
  padding: 12px 14px 12px 34px;
  border-radius: var(--r-s);
  background: var(--warning-soft);
  font-size: 14px;
  line-height: 1.5;
  list-style: decimal;
}

/* ======================= Leave child mode ======================= */

.exit-form { display: grid; gap: 16px; }
.exit-form .field + .field { margin-top: 0; }
.exit-form .sheet-lead { text-align: center; }