/* 所有者：Agent E（适老化）。老人版（今天 / 记一下 / 家里人）、帮手版顶部深色条、吃什么纵向菜单。
   字号都乘以 --es：标准 1，大字 1.2。正文 ≥20px，标题 ≥28px，主按钮 ≥64px，其他按钮 ≥52px。 */
body[data-role="elder"] {
  --e-ink: #1d1a17;
  --e-quiet: #5c554e;
  --e-bg: #f6f2ec;
  --e-card: #fff;
  --e-accent: #bf4410;
  --e-accent-dark: #9c3309;
  --e-accent-soft: #fbe7dc;
  --e-ok: #2f6b3a;
  --e-ok-dark: #24552d;
  --e-ok-soft: #e3f0e4;
  --e-line: #e3dbd1;
  --es: 1;
  --e-tabbar: calc(84px * var(--es));
  background: var(--e-bg);
  color: var(--e-ink);
}
html:has(body[data-role="elder"]) {
  background: #f6f2ec;
}
body[data-role="elder"] {
  min-height: 100vh;
}
body.large-text[data-role="elder"],
html.large body[data-role="elder"] {
  --es: 1.2;
}

/* 老人版不显示帮手版的顶栏和页脚：导航在底部三个标签，设置在“家里人”里。 */
body[data-role="elder"] .app-header,
body[data-role="elder"] .app-footer,
body[data-role="elder"] .skip-link {
  display: none;
}
body[data-role="elder"] main {
  max-width: 620px;
  margin: 0 auto;
  padding: 16px 16px calc(var(--e-tabbar) + 32px + env(safe-area-inset-bottom));
  min-height: 0;
}
.loading-line {
  font-size: 20px;
  padding: 24px 16px;
}

.elder {
  font-family:
    "PingFang SC", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  font-size: calc(20px * var(--es));
  line-height: 1.45;
  color: var(--e-ink);
}
.elder h1,
.elder h2,
.elder p,
.elder ul {
  margin: 0;
}
.elder ul {
  padding: 0;
  list-style: none;
}
.elder button,
body[data-role="elder"] dialog,
body[data-role="elder"] .toast-wrap {
  font-family:
    "PingFang SC", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
}
.elder button {
  line-height: 1.25;
  border-radius: 18px;
  min-height: calc(52px * var(--es));
  color: var(--e-ink);
  -webkit-user-select: none;
  user-select: none;
}
.elder button:focus-visible,
.elder a:focus-visible {
  outline: 4px solid #1d4ed8;
  outline-offset: 3px;
}

/* ---------- 页头 ---------- */
.e-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin: 4px 0 16px;
}
.e-head {
  flex-wrap: wrap;
}
.e-head-text {
  min-width: 0;
}
.e-q.e-q-log {
  font-size: calc(28px * var(--es));
}
/* 底部标签是 fixed：main 上的进入动画只用淡入，不用位移（位移会让 fixed 跟着 main 走）。 */
body[data-role="elder"] main.view-enter {
  animation: e-fade 0.2s ease both;
}
@keyframes e-fade {
  from {
    opacity: 0.6;
  }
  to {
    opacity: 1;
  }
}
.e-head-today {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
}
.e-head-today .e-date {
  grid-column: 1;
}
.e-head-today .e-demo {
  grid-column: 2;
  justify-self: end;
}
.e-head-today .e-hello {
  grid-column: 1;
}
.e-head-today .e-mic {
  grid-column: 2;
  justify-self: end;
}
.e-date {
  font-size: calc(20px * var(--es));
  color: var(--e-quiet);
}
.e-hello,
.e-q {
  font-size: calc(32px * var(--es));
  font-weight: 700;
  line-height: 1.3;
}
.e-head-tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex: none;
}
.elder .e-demo {
  min-height: calc(52px * var(--es));
  padding: 0 16px;
  border: 2px solid #e0c48a;
  background: #fff3d6;
  color: #6b4500;
  font-size: calc(20px * var(--es));
  font-weight: 700;
  border-radius: 26px;
}
.elder .e-mic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: calc(60px * var(--es));
  padding: 0 20px 0 16px;
  border: 0;
  border-radius: 34px;
  background: var(--e-ink);
  color: #fff;
  font-size: calc(21px * var(--es));
  font-weight: 700;
  box-shadow: 0 6px 18px rgb(0 0 0 / 0.22);
  touch-action: none;
}
.elder .e-mic svg {
  width: calc(28px * var(--es));
  height: calc(28px * var(--es));
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.elder .e-mic.is-on {
  background: var(--e-accent);
  box-shadow: 0 0 0 6px var(--e-accent-soft);
}

/* ---------- 卡片 ---------- */
.e-card {
  background: var(--e-card);
  border-radius: 22px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 1px 0 var(--e-line);
}
.e-card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: calc(28px * var(--es));
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 10px !important;
}
.elder .e-speak {
  flex: none;
  width: calc(52px * var(--es));
  height: calc(52px * var(--es));
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--e-line);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.elder .e-speak svg {
  width: calc(26px * var(--es));
  height: calc(26px * var(--es));
  fill: none;
  stroke: var(--e-ink);
  stroke-width: 2;
}
.e-line {
  font-size: calc(22px * var(--es));
  line-height: 1.4;
}
.e-line-pic {
  display: flex;
  align-items: center;
  gap: 12px;
}
.e-buy-list li + li {
  margin-top: 8px;
}
.e-sub-line,
.e-text {
  font-size: calc(20px * var(--es));
  color: var(--e-quiet);
  margin-bottom: 8px !important;
}
.e-note {
  font-size: calc(20px * var(--es));
  color: #8a3a0e;
  background: #fff1e8;
  border-radius: 14px;
  padding: 8px 12px;
  margin-top: 10px !important;
}
.e-more-line {
  font-size: calc(20px * var(--es));
  color: var(--e-quiet);
  margin-top: 8px !important;
}
.e-by {
  font-size: calc(20px * var(--es));
  color: var(--e-quiet);
  margin-bottom: 4px !important;
}
.e-proposal {
  border: 3px solid #e0c48a;
  background: #fffaf0;
}
.e-proposal .e-line {
  font-size: calc(24px * var(--es));
  font-weight: 700;
}

/* 照片 */
.e-pic {
  position: relative;
  display: block;
  flex: none;
  width: clamp(72px, 22vw, 96px);
  height: clamp(72px, 22vw, 96px);
  border-radius: 16px;
  overflow: hidden;
  background: #efe9e1;
}
.e-pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.e-pic[data-food="egg"] img,
.e-pic[data-food="tofu"] img,
.e-pic[data-food="milk"] img {
  object-fit: contain;
  background: #f6f5f1;
}
.e-pic-sm {
  width: 56px;
  height: 56px;
  border-radius: 12px;
}
.e-pic-name {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.e-pic-text .e-pic-name {
  position: static;
  width: auto;
  height: 100%;
  clip-path: none;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: calc(20px * var(--es));
  font-weight: 700;
  color: var(--e-quiet);
  padding: 4px;
}

/* 今天吃这个？ */
.e-meal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.e-pics {
  display: flex;
  gap: 8px;
}
.e-meal-text {
  flex: 1 1 150px;
  min-width: 0;
}
.e-dish {
  font-size: calc(24px * var(--es));
  font-weight: 700;
  line-height: 1.3;
}
.e-why {
  font-size: calc(20px * var(--es));
  color: var(--e-ok);
  margin-top: 4px !important;
}
.e-why.e-why-buy {
  color: #8a3a0e;
}

/* 大按钮 */
.e-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.elder .e-big {
  flex: 1 1 auto;
  min-height: calc(64px * var(--es));
  padding: 8px 18px;
  border: 0;
  background: var(--e-accent);
  color: #fff;
  font-size: calc(23px * var(--es));
  font-weight: 700;
}
.elder .e-big:hover {
  background: var(--e-accent-dark);
}
.elder .e-big.e-ok {
  background: var(--e-ok);
}
.elder .e-big.e-ok:hover {
  background: var(--e-ok-dark);
}
.elder .e-big.e-alt,
.elder .e-big.e-alt-strong {
  background: #fff;
  color: var(--e-ink);
  border: 2px solid #b9ada0;
  font-weight: 700;
}
.elder .e-big.e-alt {
  flex: 0.7 1 auto;
}
.elder .e-big.e-alt:hover,
.elder .e-big.e-alt-strong:hover {
  background: #f6f1ea;
}
.elder .e-mid {
  flex: 1 1 auto;
  min-height: calc(56px * var(--es));
  padding: 8px 14px;
  border: 2px solid var(--e-line);
  background: #fff;
  font-size: calc(20px * var(--es));
  font-weight: 600;
}
.e-btns-2 {
  margin-top: 10px;
}

/* 换一个的原因 */
.e-reasons {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 2px dashed var(--e-line);
}
.e-reason-q {
  font-size: calc(20px * var(--es));
  color: var(--e-quiet);
  margin-bottom: 8px !important;
}
.e-reason-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.elder .e-reason {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: calc(56px * var(--es));
  padding: 6px 10px;
  border: 2px solid var(--e-line);
  background: #fff;
  font-size: calc(20px * var(--es));
  font-weight: 600;
}
.e-reason-icon {
  flex: none;
  width: calc(26px * var(--es));
  height: calc(26px * var(--es));
  fill: none;
  stroke: var(--e-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 记一下 ---------- */
.e-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.elder .e-seg {
  min-height: calc(56px * var(--es));
  border: 2px solid #b9ada0;
  background: #fff;
  font-size: calc(22px * var(--es));
  font-weight: 700;
}
.elder .e-seg[aria-pressed="true"] {
  background: var(--e-ink);
  border-color: var(--e-ink);
  color: #fff;
}
.e-sub {
  font-size: calc(20px * var(--es));
  color: var(--e-quiet);
  margin-bottom: 12px !important;
}
.e-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.e-grid-extra {
  margin-top: 10px;
}
.elder .e-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-height: 100px;
  padding: 6px 6px 8px;
  border: 3px solid transparent;
  border-radius: 18px;
  background: #fff;
  font-size: calc(20px * var(--es));
  font-weight: 600;
  text-align: center;
  box-shadow: 0 1px 0 var(--e-line);
}
.e-tile img,
.e-tile-text {
  display: block;
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 12px;
  background: #efe9e1;
}
.e-tile-text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(26px * var(--es));
  font-weight: 700;
  color: var(--e-quiet);
}
.e-tile-name {
  overflow-wrap: anywhere;
}
.elder .e-tile[aria-pressed="true"] {
  border-color: var(--e-accent);
  background: var(--e-accent-soft);
  font-weight: 700;
}
.elder .e-tile[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  top: 4px;
  right: 6px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--e-accent);
  color: #fff;
  font-size: 20px;
  line-height: 32px;
  text-align: center;
}
.elder .e-more-btn {
  width: 100%;
  margin-top: 12px;
  min-height: calc(56px * var(--es));
  border: 2px solid #b9ada0;
  background: #fff;
  font-size: calc(22px * var(--es));
  font-weight: 700;
}
.e-more-all {
  margin-top: 6px;
}
.e-group-name {
  font-size: calc(22px * var(--es));
  font-weight: 700;
  margin: 16px 0 8px !important;
}
.elder .e-done {
  width: 100%;
  margin-top: 14px;
  min-height: calc(68px * var(--es));
  font-size: calc(24px * var(--es));
}
.e-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--e-ok-soft);
  color: var(--e-ok);
  border-radius: 16px;
  padding: 12px 14px;
  margin-top: 12px;
  font-size: calc(20px * var(--es));
  line-height: 1.45;
}
.e-hint p {
  flex: 1;
}

/* ---------- 家里人 ---------- */
.e-prop-list .e-card {
  margin-bottom: 14px;
}
.e-small-link {
  margin-top: 14px !important;
  font-size: calc(20px * var(--es));
}
.e-small-link a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--e-quiet);
}

/* ---------- 底部三个标签 ---------- */
.e-tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: center;
  background: #fff;
  border-top: 2px solid var(--e-line);
  padding-bottom: env(safe-area-inset-bottom);
}
.elder .e-tab {
  position: relative;
  flex: 1 1 0;
  max-width: 220px;
  min-height: var(--e-tabbar);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--e-quiet);
  font-size: calc(20px * var(--es));
  font-weight: 600;
}
.elder .e-tab:hover {
  background: #faf6f1;
}
.elder .e-tab svg {
  width: calc(30px * var(--es));
  height: calc(30px * var(--es));
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.elder .e-tab[aria-current="page"] {
  color: var(--e-accent-dark);
  font-weight: 700;
}
.elder .e-tab[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 4px;
  border-radius: 0 0 4px 4px;
  background: var(--e-accent);
}
.e-badge {
  position: absolute;
  top: 6px;
  left: calc(50% + 12px);
  min-width: calc(28px * var(--es));
  height: calc(28px * var(--es));
  padding: 0 6px;
  border-radius: 14px;
  background: var(--e-accent);
  color: #fff;
  font-size: calc(20px * var(--es));
  line-height: calc(28px * var(--es));
  font-weight: 700;
}

/* 老人版的提示条和弹窗也要大字，放在底部标签上面。 */
/* 提示条放在底部标签上面（页顶有“按住说”，不能挡）。 */
body[data-role="elder"] .toast-wrap {
  bottom: calc(var(--e-tabbar) + 12px + env(safe-area-inset-bottom));
  width: min(94vw, 580px);
}
body[data-role="elder"] .toast-wrap #toast {
  font-size: calc(20px * var(--es));
}
body[data-role="elder"] .toast-wrap button {
  font-size: calc(20px * var(--es));
  min-height: 52px;
}
body[data-role="elder"] dialog {
  font-size: calc(20px * var(--es));
  line-height: 1.45;
}
body[data-role="elder"] dialog .dialog-header h2 {
  font-size: calc(28px * var(--es));
}
body[data-role="elder"] dialog .dialog-actions button {
  min-height: calc(60px * var(--es));
  font-size: calc(22px * var(--es));
  flex: 1 1 auto;
}
body[data-role="elder"] dialog p {
  font-size: calc(20px * var(--es));
}
.elder-about p + p {
  margin-top: 10px;
}

/* ---------- 帮手版顶部深色条（子女 / 团长用） ---------- */
.role-banner.helper-bar {
  max-width: none;
  margin: 0;
  background: #2b2622;
  color: #fff;
  padding: 14px max(16px, calc((100% - 1176px) / 2 + 28px));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
}
.helper-bar-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.helper-bar-text strong {
  font-size: 24px;
  line-height: 1.3;
}
.helper-bar-text span {
  font-size: 16px;
  color: #e9e2da;
  line-height: 1.4;
}
.role-banner.helper-bar button.helper-back {
  min-height: 56px;
  padding: 8px 22px;
  border: 0;
  border-radius: 16px;
  background: #fff;
  color: #1d1a17;
  font-size: 20px;
  font-weight: 700;
}
.role-banner.helper-bar button.helper-back:hover {
  background: #f3ece4;
}
body.large-text .helper-bar-text strong {
  font-size: 28px;
}
body.large-text .helper-bar-text span,
body.large-text .role-banner.helper-bar button.helper-back {
  font-size: 22px;
}

/* ---------- 帮手版“吃什么”：纵向菜单，一次 6 道 ---------- */
.recipe-list {
  overflow: visible;
}
.recipe-more {
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 760px) {
  .recipe-grid.recipe-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 360px) {
  body[data-role="elder"] main {
    padding-left: 12px;
    padding-right: 12px;
  }
  .e-card {
    padding: 14px 12px;
  }
  .elder .e-mic {
    padding: 0 14px 0 12px;
  }
  .e-grid {
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .elder *,
  .elder *::before,
  .elder *::after,
  .role-banner.helper-bar * {
    animation: none !important;
    transition: none !important;
  }
}