:root {
  --ink: #293c38;
  --text: #40514c;
  --muted: #68736e;
  --accent: #365e53;
  --accent-strong: #264a40;
  --line: #e8e9e3;
  --white: #fff;
  --surface: #fafbf8;
  --mint: #edf3ed;
  --mango: #fbf2e3;
  --sky: #edf1fa;
  --berry: #f1edf7;
  --peach: #fbeee7;
  --stage-warm: radial-gradient(ellipse at 84% 6%, #f8dfcf 0%, transparent 48%),
    radial-gradient(ellipse at 54% 40%, #fff2d9a0 0%, transparent 54%),
    radial-gradient(ellipse at 0% 85%, #e5eee9 0%, transparent 48%),
    linear-gradient(150deg, #f8f7f4, #f5ede5);
  --stage: var(--stage-warm);
  --stage-ai: radial-gradient(ellipse at 12% 8%, #e8f1fc 0%, transparent 54%), radial-gradient(ellipse at 94% 45%, #ece7f7 0%, transparent 57%), radial-gradient(ellipse at 32% 100%, #f8e9df 0%, transparent 42%), #f8f9fc;
  --ai-ink: #444d72;
  --ai-line: #e2e5f0;
  --shadow: 0 2px 4px #38483b03, 0 12px 36px #46433907;
  --radius: 32px;
  --radius-inner: 22px;
  --gap: clamp(16px, 1.8vw, 28px);
  --frame: clamp(20px, 3.2vw, 56px);
  --touch: 44px;
  --control-height: 38px;
  --control-radius: 12px;
  --control-border: #dfe3dc;
  --control-hover: #f3f5ef;
  --control-selected: #eaf0e9;
  --control-focus: #526f67;
  --menu-shadow: 0 4px 12px #363e3506, 0 18px 45px #363e350e;
  --ease: 220ms cubic-bezier(.2,.65,.3,1);
  --motion-card: 300ms cubic-bezier(.2,.65,.3,1);
  --motion-scene: 500ms cubic-bezier(.2,.65,.3,1);
  --font: system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
  --display: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font: 15px/1.55 var(--font);
  color: var(--text);
  background: #f5efe7;
  font-variant-numeric: tabular-nums;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; isolation: isolate; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: var(--stage-warm); }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--stage-ai); opacity: 0; transition: opacity var(--motion-scene); }
body[data-ambience=luminous]::after { opacity: 1; }
[hidden] { display: none !important; }
a { color: var(--accent); text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select, summary, [tabindex] { outline-offset: 2px; }
:focus-visible { outline: 2px solid var(--control-focus); }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--control-height); padding: 7px 12px; border: 1px solid var(--control-border);
  border-radius: var(--control-radius); color: var(--ink); background: var(--white);
  font-size: 14px; font-weight: 550; line-height: 1.35;
  transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
:where(button, .button):hover { background-color: var(--control-hover); border-color: #aabfb3; }
.primary { background: var(--accent); border-color: var(--accent); color: var(--white); }
.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.danger-icon, .settings-icon.danger-icon, .link.danger-icon { color: #b14b40; }
.danger-icon:hover { background: #fff0ed; }
button.danger { background: #ad4035; border-color: #ad4035; color: white; }
button.danger:hover { background: #90352c; border-color: #90352c; }
.delete-preview { max-height: 28dvh; overflow: auto; overflow-wrap: anywhere; white-space: pre-wrap; }
.primary .icon { width: 16px; height: 16px; }
.link { padding: 4px 7px; background: transparent; border: 0; color: var(--accent); text-align: left; }
.link:hover { background: var(--control-hover); }
.inline:hover, .back-link:hover { text-decoration: underline; }
.pill-action { color: var(--accent-strong); background: var(--surface); padding-inline: 10px; white-space: nowrap; font-size: 13px; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { color: var(--ink); overflow-wrap: anywhere; }
h2 { font: 580 19px/1.4 var(--display); }
h3 { font: 580 16px/1.5 var(--display); }
small, .small { font-size: 13px; }
.muted { color: var(--muted); }
.icon { display: inline-block; flex: none; width: 20px; height: 20px; vertical-align: middle; }
.icon-tile {
  width: 42px; height: 42px; flex: 0 0 42px; display: inline-grid; place-items: center;
  border-radius: 14px; background: var(--tone, var(--mint)); color: var(--ink);
}
.icon-tile .icon { width: 29px; height: 29px; }
.tone-mint { --tone: var(--mint); --edge: #67a990; }
.tone-mango { --tone: var(--mango); --edge: #d79850; }
.tone-sky { --tone: var(--sky); --edge: #7c98ce; }
.tone-berry { --tone: var(--berry); --edge: #ae8fc8; }
.tone-peach { --tone: var(--peach); --edge: #d88e7d; }
.tone-white { --tone: #ffffffe0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.masthead, main {
  width: min(100%, 1700px); margin-inline: auto;
  padding-left: max(var(--frame), env(safe-area-inset-left));
  padding-right: max(var(--frame), env(safe-area-inset-right));
}
.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: max(18px, env(safe-area-inset-top)); padding-bottom: 18px;
}
.brand { display: inline-flex; align-items: center; flex: none; gap: 12px; color: var(--ink); min-height: var(--touch); }
.brand-mark {
  position: relative; display: block; flex: none; width: 48px; height: 48px;
}
/* The transparent artwork uses the masthead padding without changing the brand row. */
.brand-mark img {
  position: absolute; top: 50%; left: 50%; width: 72px; height: auto;
  transform: translate(-50%, -50%); pointer-events: none;
}
.brand-wordmark { display: block; width: auto; height: 25px; margin-inline-start: auto; }
.brand small { display: block; margin-top: 3px; text-align: right; white-space: nowrap; font-size: 11px; line-height: 1.2; font-weight: 730; letter-spacing: .13em; }
[data-screen="loading"] .masthead, [data-screen="login"] .masthead { display: none; }
.brand-mark img.awaiting-flight { visibility: hidden; }
.masthead-end, .masthead-date { display: flex; align-items: center; gap: 8px; }
.masthead-date {
  min-height: var(--control-height); padding-inline: 4px 6px; color: var(--text);
  font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap;
}
.masthead-date svg { width: 21px; height: 21px; flex: none; }
#demo-label { background: #ffffff94; }
main { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
.dock {
  position: fixed; z-index: 3; left: 50%; bottom: max(17px, env(safe-area-inset-bottom));
  transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 5px 7px;
  background: #fffffff0; border: 1px solid #ffffffcc; border-radius: 40px; box-shadow: var(--menu-shadow);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.dock a, .dock button {
  position: relative; display: flex; flex-direction: column; gap: 3px; align-items: center;
  justify-content: center; min-width: 64px; min-height: 56px; padding: 4px 7px;
  border: 0; border-radius: 28px; background: transparent; color: var(--muted);
  font-size: 11px; font-weight: 500; line-height: 1.3; white-space: nowrap;
}
.dock a:hover, .dock button:hover { background: var(--control-hover); }
.dock a[aria-current] { background: var(--control-selected); color: var(--accent-strong); }
.dock-icon { display: grid; place-items: center; width: 30px; height: 30px; }
.dock-icon svg { width: 26px; height: 26px; }
.dock .dock-record .dock-icon { background: radial-gradient(circle,#e6eafa,#eef2fa00 72%); border-radius: 50%; width: 40px; height: 31px; }
.dock .dock-record img { display: block; width: 45px; height: 45px; object-fit: contain; }
.dock .dock-record { color: var(--accent-strong); }
.panel { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(15px, 1.65vw, 24px); min-width: 0; }
.panel.paper { background: #fdfdfa; }
.panel.warm { background: #fffaf0; }
.panel-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.panel-head > :is(h2,h3) { flex: 1; min-width: 0; }
.panel-head .icon-tile { width: 36px; height: 36px; flex-basis: 36px; border-radius: 11px; }
.panel-head .icon-tile .icon { width: 26px; height: 26px; }
.panel p + p { margin-top: 5px; }
.panel .description { margin: 5px 0 10px; }
.badge {
  display: inline-flex; align-items: center; border-radius: 100px; padding: 4px 9px;
  background: var(--mint); color: var(--accent-strong); font-size: 12px;
  line-height: 1.45; font-weight: 700; white-space: nowrap;
}
.badge.gold { background: var(--mango); color: #714c24; }
.jump { display: inline-flex; align-items: center; justify-content: flex-end; min-height: var(--touch); max-width: 100%; color: var(--accent); gap: 2px; font-weight: 700; font-size: 13px; overflow-wrap: anywhere; }
.jump:hover { text-decoration: underline; }
.jump .icon { width: 16px; height: 16px; }
.today-board { display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(305px, 1fr); gap: var(--gap); }
.schedule { display: flex; flex-direction: column; min-height: 0; }
.schedule-head, .schedule-head > div:first-child { display: flex; align-items: center; gap: 12px; }
.schedule-head { justify-content: space-between; margin-bottom: 12px; }
.schedule-head h1 { font: 800 clamp(23px, 2.4vw, 33px)/1.25 var(--display); letter-spacing: .02em; }
.schedule-head .icon-tile { width: 47px; height: 47px; flex-basis: 47px; }
.schedule-head .icon-tile .icon { width: 34px; height: 34px; }
.date-controls { display: flex; gap: 2px; flex-shrink: 0; padding: 2px; border: 1px solid var(--line); border-radius: 11px; }
.date-controls button { padding: 4px; min-width: var(--control-height); background: transparent; border: 0; }
.date-controls button:hover, .date-button:hover { background: var(--control-hover); }
.date-controls .icon { width: 16px; height: 16px; }
.date-controls .date-reset { padding-inline: 10px; font-size: 13px; }
.previous { transform: rotate(180deg); }
.schedule-scroll { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--line); border-radius: 16px; scrollbar-width: thin; }
.schedule table { min-width: 100%; height: 100%; table-layout: fixed; border-spacing: 0; text-align: left; }
.schedule thead { position: sticky; top: 0; z-index: 1; }
.schedule th, .schedule td { border-bottom: 1px solid var(--line); }
.schedule th:not(:last-child), .schedule td:not(:last-child) { border-right: 1px solid var(--line); }
.schedule tr:last-child td, .schedule tbody tr:last-child th { border-bottom: 0; }
.schedule thead th { background: #f5faf6; border-bottom: 1px solid var(--line); padding: 7px 10px; }
.schedule thead th:first-child { width: 76px; color: var(--muted); font-size: 12px; text-align: center; }
.schedule thead th:not(:first-child) { min-width: 124px; font-size: 14px; }
.area-heading { display: flex; align-items: center; gap: 7px; overflow-wrap: anywhere; }
.schedule thead .icon-tile { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; }
.schedule thead .icon { width: 25px; height: 25px; }
.schedule tbody th { width: 76px; min-width: 76px; padding: 5px; text-align: center; vertical-align: middle; background: #fff; }
.schedule tbody td { padding: 5px 6px; vertical-align: middle; height: 60px; }
.schedule .selected-day :is(td,th) { background: #f1f8f3; }
.date-button { flex-direction: column; width: 100%; min-height: 47px; gap: 0; padding: 4px 6px; border: 0; background: transparent; color: var(--muted); font-size: 11px; }
.date-button strong { color: var(--ink); font-size: 16px; line-height: 1.2; }
.date-button[aria-pressed=true] { background: var(--control-selected); color: var(--accent-strong); }
.date-button[aria-pressed=true] strong { color: inherit; }
.activity {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0;
  width: 100%; padding: 5px 8px; border: 0; border-inline-start: 3px solid var(--edge);
  border-radius: 9px; background: var(--tone); text-align: left; line-height: 1.32; overflow-wrap: anywhere;
}
.activity + .activity { margin-top: 4px; }
.activity.observation { border: 1px solid var(--edge); border-inline-start-width: 1px; }
.activity:hover { border-color: var(--accent); }
.activity strong { font-size: 13px; }
.activity small { color: var(--muted); font-size: 11px; font-weight: 650; }
.activity small .icon { width: 14px; height: 14px; margin-right: 1px; }
.schedule-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; }
.legend { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--mint); border-left: 3px solid #67a990; }
.legend i + i { margin-left: 7px; border: 1px solid #67a990; }
.board-widgets { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; min-height: 0; }
.task-widget > .jump { margin-top: 3px; }
.growth-widget .panel-head { margin-bottom: 5px; }
.spotlight {
  position: relative; display: flex; justify-content: space-between; align-items: center; isolation: isolate;
  min-height: 110px; padding: 12px 13px; border-radius: var(--radius-inner); background: #edf7ed;
  color: var(--accent-strong); overflow: hidden;
}
.spotlight > span { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.spotlight > span > span { font-size: 13px; font-weight: 690; }
.spotlight small { font-size: 12px; }
.spotlight strong { font: 800 clamp(18px, 1.8vw, 26px)/1.22 var(--display); }
.spotlight strong.spotlight-description { font-size: 15px; line-height: 1.5; font-weight: 600; }
.spotlight .icon { width: 15px; height: 15px; }
.spotlight:hover { background: #e6f3e7; }
.garden-art { flex: 0 0 min(36%, 139px); width: min(36%, 139px); height: 84px; }
.draft-link {
  display: flex; align-items: center; gap: 10px; background: #fff8ed; box-shadow: var(--shadow);
  border-radius: 19px; padding: 10px 14px; color: var(--ink); min-height: var(--touch);
}
.draft-link > span:nth-child(2) { flex: 1; }
.draft-link strong, .draft-link small { display: block; }
.draft-link strong { font-size: 14px; }
.draft-link small { font-size: 12px; color: var(--muted); }
.draft-link:hover { background: #fff3df; }
.mobile-recent, .mobile-capture, .mobile-intro { display: none; }
.hero { display: flex; align-items: center; gap: 12px; margin: 8px 0 20px; padding: 4px 1px; }
.hero .icon-tile { width: 52px; height: 52px; flex-basis: 52px; border-radius: 16px; box-shadow: var(--shadow); }
.hero .icon-tile .icon { width: 38px; height: 38px; }
.hero h1 { flex: 1; min-width: 0; font: 500 clamp(26px, 2.8vw, 36px)/1.4 var(--display); letter-spacing: -.035em; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-intro h1 { font: 820 clamp(27px, 3.4vw, 44px)/1.25 var(--display); margin: 3px 0 5px; }
.back-link { display: inline-flex; align-items: center; min-height: var(--touch); font-size: 14px; font-weight: 680; }
.columns { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.stack { display: grid; gap: var(--gap); min-width: 0; }
.section-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.growth-board { min-width: 0; }
.growth-board-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.growth-board-heading h2 { font-size: 19px; }
.growth-switcher { display: flex; gap: 5px; padding: 4px; background: #f1f7f2; border-radius: 12px; }
.growth-switcher button { flex: 1; min-width: 0; min-height: 44px; gap: 7px; padding: 8px; background: transparent; border-color: transparent; white-space: nowrap; }
.growth-switcher button[aria-pressed=true] { background: white; border-color: #d4e5d9; box-shadow: 0 1px 4px #234f3b0a; color: var(--accent); }
.growth-switcher button > span { font-size: 12px; color: var(--muted); font-weight: 500; }
.growth-area { margin-top: 19px; }
.growth-area + .growth-area { padding-top: 17px; border-top: 1px solid var(--line); }
.growth-area > header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.growth-area > header h3 { font-size: 14px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.growth-area > header .icon-tile { width: 29px; height: 29px; flex-basis: 29px; border-radius: 9px; }
.growth-area > header .icon-tile .icon { width: 21px; height: 21px; }
.growth-item-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 26px; align-items: start; }
.growth-topic, .growth-collection > summary { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 72px; padding: 12px 7px; color: var(--ink); border-bottom: 1px solid var(--line); border-radius: 6px; }
.growth-topic:hover, .growth-collection > summary:hover { background: #f5faf6; }
.growth-item-copy { flex: 1; min-width: 0; }
.growth-item-copy strong { display: block; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.growth-item-copy small { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.growth-topic > .icon, .growth-collection > summary > .icon { flex: 0 0 15px; width: 15px; height: 15px; color: var(--muted); }
.growth-topic-row { display: flex; align-items: center; gap: 3px; min-width: 0; border-bottom: 1px solid var(--line); }
.growth-topic-row > .growth-topic { flex: 1; border-bottom: 0; }
.growth-topic-row > .classification-control { flex: none; }
.growth-managed-item { min-width: 0; position: relative; }
.growth-managed-item.has-control > .growth-collection > summary { padding-right: 53px; }
.growth-managed-item > .classification-control { position: absolute; right: 0; top: 14px; }
.growth-detail-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.classification-operation-icons { display: flex; gap: 8px; }
.classification-actions { justify-content: space-between; }
.classification-actions > .classification-operation-icons { margin-right: auto; }
.classification-count { margin-bottom: 14px; }
.growth-collection { min-width: 0; }
.growth-collection > summary { list-style: none; cursor: pointer; }
.growth-collection > summary::-webkit-details-marker { display: none; }
.growth-collection[open] > summary > .icon { transform: rotate(90deg); }
.growth-collection-body { padding: 8px 7px 17px; }
.growth-collection-body h4 { font-size: 12px; color: var(--muted); margin: 9px 0 7px; }
.growth-topic-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.growth-topic-tag { display: inline-flex; align-items: center; max-width: 100%; min-height: 36px; padding: 5px 9px; border-radius: 8px; background: var(--mint); font-size: 12px; overflow-wrap: anywhere; }
.growth-evidence-links { display: grid; }
.growth-evidence-links a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding-block: 7px; border-bottom: 1px solid var(--line); font-size: 13px; }
.growth-evidence-links a > time { flex: none; color: var(--muted); font-size: 12px; }
.growth-evidence-links a > span { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.growth-evidence-links .icon { width: 13px; height: 13px; flex: none; }
.growth-board-content > .empty-art { padding-block: 35px; }
@media (max-width: 700px) {
  .growth-item-grid { grid-template-columns: minmax(0,1fr); }
  .growth-switcher button { padding-inline: 4px; gap: 4px; font-size: 13px; }
  .growth-area { margin-top: 16px; }
  .growth-area + .growth-area { padding-top: 14px; }
}
@media (max-width: 360px) {
  .growth-switcher button { gap: 3px; font-size: 12px; }
  .growth-switcher button > span { font-size: 11px; }
}
.list { padding: 0; margin: 0; list-style: none; }
.row {
  display: flex; align-items: center; gap: 9px; min-width: 0; padding: 5px 0;
  min-height: 57px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere;
}
.row:last-child { border-bottom: 0; }
.row a { color: var(--ink); }
.row .row-main { flex: 1; min-width: 0; }
.row strong { display: block; font-size: 15px; color: var(--ink); }
.row small { display: block; color: var(--muted); line-height: 1.35; }
.row-link, .task-name { border: 0; padding: 0; background: transparent; text-align: left; }
.row-link { display: flex; gap: 9px; width: 100%; align-items: center; min-height: var(--touch); }
.event-link { display: grid; grid-template-columns: 42px minmax(0, 1fr) 16px; padding-block: 6px; }
.event-link-plain { grid-template-columns: minmax(0, 1fr) 16px; }
.event-link .row-main { display: grid; gap: 4px; }
.event-result { display: block; min-width: 0; }
.event-result .badge { max-width: 100%; white-space: normal; text-align: left; }
.event-progress { display: block; color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.5; }
.row-link:hover strong, .task-name:hover strong { text-decoration: underline; }
.task-name { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; line-height: 1.35; }
.task-toggle { display: grid; place-items: center; position: relative; cursor: pointer; flex: 0 0 44px; height: 44px; }
.task-toggle input { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; opacity: 0; }
.task-toggle span { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid #7fa796; border-radius: 6px; background: var(--white); pointer-events: none; }
.task-toggle .icon { width: 15px; height: 15px; opacity: 0; }
.task-toggle input:hover + span { border-color: var(--accent); }
.task-toggle input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--white); }
.task-toggle input:checked + span .icon { opacity: 1; animation: check-in 210ms ease-out; }
.task-toggle input:focus-visible + span { outline: 2px solid var(--control-focus); outline-offset: 2px; }
.task-toggle input:disabled + span { opacity: .5; }
@keyframes check-in { 0% { transform: scale(.65); } 70% { transform: scale(1.16); } }
.row-chevron { width: 16px; height: 16px; color: #577466; }
.empty { padding: 12px 0; color: var(--muted); }
.empty-art { display: grid; justify-items: center; gap: 6px; padding: 13px 8px; text-align: center; }
.empty-art .icon-tile { width: 57px; height: 57px; border-radius: 17px; }
.empty-art .icon-tile .icon { width: 39px; height: 39px; }
.empty-art .primary { margin-top: 4px; }
.schedule > .empty-art { flex: 1; align-content: center; }
.schedule > .empty-art .icon-tile { width: 140px; height: 102px; }
.schedule > .empty-art .icon-tile .icon { width: 121px; height: 80px; }
.quote {
  margin: 8px 0; padding: 11px 13px; border-left: 3px solid #a1c4b2; border-radius: 8px;
  background: #f1f7f2; overflow-wrap: anywhere; white-space: pre-wrap;
}
.review { overflow-wrap: anywhere; }
.review + .review { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 7px; }
.chart { display: block; width: min(100%, 610px); min-height: 120px; overflow: visible; }
.chart text { font: 15px var(--font); fill: var(--muted); }
.chart text.result { font-weight: 700; fill: var(--ink); }
.gridline { stroke: #d9e6df; }
.plotline { fill: none; stroke: #408d75; stroke-width: 2.8; }
.plotdot { fill: #f3c472; stroke: #427c68; stroke-width: 1.2; }
details { overflow-wrap: anywhere; }
summary { cursor: pointer; min-height: var(--control-height); display: list-item; padding-block: 8px; }
.plan-day + .plan-day { border-top: 1px solid var(--line); padding-top: 13px; margin-top: 10px; }
.plan-day h3 { padding: 4px 0; color: var(--accent); font-size: 14px; }
.report-range { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.report-range button { font-size: 13px; }
.story-tools { flex-wrap: wrap; }
.story-tools h2 { margin-right: auto; }
.story-search { width: min(53%, 310px); }
#story-media { font-size: 13px; }
:is(.report-range button, #story-media)[aria-pressed=true] {
  background: var(--control-selected); border-color: #a4c5b5; color: var(--accent-strong);
}
.story-day { margin-bottom: 22px; }
.story-day > h2 { font-size: 17px; margin: 10px 0; }
.story-day > h2 small { color: var(--muted); margin-inline-start: 4px; }
.story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 245px), 1fr)); gap: var(--gap); }
.story-card {
  display: flex; flex-direction: column; overflow: hidden; min-width: 0; border-radius: 19px; background: #fff;
  color: var(--ink); box-shadow: var(--shadow); transition: transform var(--ease);
}
.story-card:hover { transform: translateY(-2px); }
.story-cover { display: grid; place-items: center; height: 125px; background: var(--tone); }
.story-cover > .icon { width: 68px; height: 68px; }
.story-cover > img { display: block; width: 100%; height: 125px; object-fit: cover; }
.story-copy { display: grid; align-content: start; gap: 4px; padding: 13px 15px 15px; overflow-wrap: anywhere; }
.story-copy small, .story-excerpt { color: var(--muted); }
.story-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; }
.story-detail { width: min(100%, 900px); }
dialog {
  --dialog-gutter: max(12px, env(safe-area-inset-left), env(safe-area-inset-right));
  --dialog-gap: max(12px, env(safe-area-inset-top), env(safe-area-inset-bottom));
  position: fixed; inset: var(--dialog-center-top, 50dvh) 0 auto; transform: translateY(-50%); margin: 0 auto;
  max-height: calc(var(--dialog-visible-height, 100dvh) - 2 * var(--dialog-gap)); overflow: auto;
  width: min(720px, calc(100% - 2 * var(--dialog-gutter))); padding: 22px; background: var(--white);
  color: var(--text); border: 1px solid var(--line); border-radius: 17px; box-shadow: var(--menu-shadow);
  overscroll-behavior: contain; scrollbar-width: thin;
}
body:has(dialog[open]) { overflow: hidden; }
dialog::backdrop { background: #152b275f; }
dialog header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
dialog header h2 { font-size: 22px; }
dialog header .link { min-width: 44px; }
.draft-cards { display: grid; gap: 10px; margin-top: 14px; }
.draft-cards .panel { padding: 12px 14px 5px; border: 1px solid var(--line); box-shadow: none; overflow-wrap: anywhere; }
.review-essentials { align-items: start; }
.review-details { padding-block: 6px; color: var(--text); }
.review-details > summary { width: fit-content; cursor: pointer; color: var(--accent-strong); }
.review-details:not([open]) > :not(summary) { display: none; }
label.field { display: grid; gap: 6px; font-weight: 620; font-size: 13px; }
input:not([type=checkbox], [type=file], [type=hidden]), textarea, select {
  width: 100%; min-width: 0; min-height: var(--control-height); border: 1px solid var(--control-border);
  border-radius: var(--control-radius); padding: 7px 10px; background: var(--white); color: var(--ink);
  font-size: 16px; font-weight: 400; transition: border-color var(--ease);
}
:is(input, textarea, select):focus { border-color: var(--control-focus); }
:is(input, textarea, select):focus-visible { outline-offset: 0; }
:is(input, textarea)::placeholder { color: var(--muted); opacity: 1; }
input[type=checkbox] { accent-color: var(--accent); }
textarea { resize: vertical; min-height: 110px; }
dialog[open]:has(form[data-form=capture]) {
  display: flex; flex-direction: column; overflow: hidden;
}
dialog:has(form[data-form=capture]) > header { flex: none; }
.capture-header-actions { display: flex; align-items: center; gap: 6px; }
.capture-header-actions .link { height: 44px; }
form[data-form=capture] { display: flex; flex-direction: column; min-height: 0; margin-top: 0; }
.capture-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.capture-editor textarea { display: block; min-height: clamp(110px, 28dvh, 240px); }
.fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 11px 12px; margin: 12px 0; }
.full { grid-column: 1 / -1; }
.actions {
  display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; margin-top: 12px;
  padding: 11px 0 3px; border-top: 1px solid var(--line); background: var(--white);
}
.capture-media { display: grid; gap: 8px; margin-block: 10px; min-width: 0; }
.voice-capture { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 0; }
.voice-controls { display: flex; align-items: center; gap: 8px; }
.voice-record { width: 44px; height: 44px; flex: none; padding: 0; border-radius: 50%; background: var(--mint); border-color: var(--line); color: var(--accent-strong); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
form[data-input-mode=voice] .voice-capture { grid-template-columns: minmax(0, 1fr); justify-items: center; padding-block: clamp(14px, 6dvh, 44px); text-align: center; }
form[data-input-mode=voice] .voice-controls { flex-direction: column; }
form[data-input-mode=voice] .voice-record { width: 76px; height: 76px; }
form[data-input-mode=voice] .voice-record .icon { width: 32px; height: 32px; }
.voice-record.is-transcribing > .icon { display: none; }
.voice-spinner { width: 22px; height: 22px; border: 2px solid var(--line); border-top-color: var(--accent-strong); border-radius: 50%; animation: voice-spin 1s linear infinite; }
@keyframes voice-spin { to { transform: rotate(360deg); } }
.voice-record.is-recording { background: #f9e5e0; color: #8c382a; }
.voice-clock { font-variant-numeric: tabular-nums; color: #8c382a; font-weight: 700; }
.voice-status { color: var(--muted); }
.voice-error { color: #8c382a; }
.dictation-recovery { grid-column: 1 / -1; width: 100%; }
.dictation-recovery audio { display: block; width: 100%; min-width: 0; margin-bottom: 6px; }
.dictation-recovery > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.capture-file { position: relative; cursor: pointer; }
.capture-file:focus-within { outline: 2px solid var(--control-focus); outline-offset: 2px; }
.capture-file:has(input:disabled) { opacity: .55; cursor: default; }
.media-tools { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.media-icon-tools { gap: 10px; }
.media-icon-tools .media-icon { width: 46px; height: 46px; padding: 0; flex: 0 0 46px; border-radius: 12px; }
.media-icon-tools .media-icon > .icon { width: 23px; height: 23px; }
form[data-input-mode=voice] .media-icon-tools { justify-content: center; }
form[data-input-mode=voice] .capture-attachments > p { text-align: center; }
.attached-files { display: grid; gap: 6px; list-style: none; margin: 0; padding: 0; }
.attached-files li { display: grid; padding: 0 8px 4px; border: 1px solid var(--line); border-radius: 10px; }
.attachment-name { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; font-size: 13px; overflow-wrap: anywhere; }
.attachment-remove { width: 44px; padding: 0; }
.attached-files audio { width: 100%; min-width: 0; }
.diary-edit-media { margin-top: 17px; padding-top: 14px; border-top: 1px solid var(--line); }
.diary-edit-media h3 { font-size: 14px; }
.diary-existing-media { display: grid; grid-template-columns: repeat(auto-fill,minmax(68px,1fr)); gap: 8px; }
.diary-existing-thumb { position: relative; display: grid; place-items: center; height: 82px; overflow: hidden; border-radius: 9px; background: var(--mint); }
.diary-existing-thumb > .icon { width: 28px; height: 28px; }
.diary-existing-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.diary-edit-media .edit-attachment-preview { display: block; width: 100%; max-height: 160px; min-width: 0; object-fit: contain; border-radius: 7px; }
.diary-edit-media .capture-file.is-disabled { opacity: .55; cursor: default; }
.capture-actions { position: static; flex: none; justify-content: space-between; align-items: center; }
.capture-actions button { margin-inline-start: auto; }
.capture-progress { flex: 1 1 160px; }
.transcript-notice { margin-block: 8px; padding: 8px 10px; border-radius: var(--radius-inner); background: var(--surface); }
.media-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 9px; margin-block: 10px; }
.media-gallery figure { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.media-gallery figcaption { padding: 4px 9px; overflow-wrap: anywhere; font-size: 13px; }
.media-gallery figcaption a { display: inline-flex; align-items: center; min-height: var(--touch); text-decoration: underline; }
.media-gallery :is(img,video,audio) { display: block; width: 100%; }
.media-gallery :is(img,video) { max-height: 350px; object-fit: contain; }
.error { color: #993c32; font-weight: 650; margin: 8px 0; }
.loading { padding: 20px; }
.startup-error { display: grid; gap: 14px; width: min(100%, 460px); margin: clamp(24px, 10vh, 100px) auto; }
.sign-in { max-width: 460px; margin: 24px auto; }
[data-screen="login"] main { padding-bottom: 0; }
.login-layout {
  display: grid; grid-template-columns: 1fr minmax(275px, .86fr); align-items: center;
  gap: clamp(30px, 6vw, 88px); width: min(100%, 900px); margin-inline: auto;
  min-height: 100vh; min-height: 100dvh;
  padding-block: max(28px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-bottom));
}
[data-screen="family"] .login-layout { display: none; }
.login-brand { display: grid; justify-items: center; text-align: center; min-width: 0; }
.login-mascot {
  display: block; width: clamp(148px, 22vw, 250px); height: auto;
  background: radial-gradient(ellipse at center, #f8ffedaa 0%, #f8ffed00 70%);
}
.login-wordmark { display: block; width: clamp(165px, 24vw, 280px); max-width: 100%; height: auto; }
.login-brand p { margin-top: 6px; font-size: clamp(13px, 1.65vw, 19px); font-weight: 680; letter-spacing: .18em; }
.login-panel { width: 100%; padding: clamp(24px, 4vw, 46px); background: #fffef6; }
.login-panel h1 { margin-bottom: 22px; font: 760 clamp(23px, 3vw, 31px)/1.25 var(--display); }
.login-panel .field { margin-bottom: 14px; }
.login-panel input { min-height: 46px; font-size: 16px; }
.login-panel .primary { width: 100%; margin-top: 8px; }
[data-screen="login"] .login-layout.login-keyboard-open {
  position: fixed; inset-inline: 0; top: var(--login-visible-top); z-index: 1;
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  width: min(100%, 440px); height: var(--login-visible-height); min-height: 0; overflow-y: auto;
  padding: 10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
}
.login-keyboard-open .login-brand { display: none; }
.login-keyboard-open .login-panel { flex: none; margin-block: auto; padding: 16px 20px; }
.login-keyboard-open .login-panel h1 { margin-bottom: 12px; font-size: 21px; }
.login-keyboard-open .login-panel .field { margin-bottom: 9px; }
.login-keyboard-open .login-panel .primary { margin-top: 4px; }
.login-flight {
  position: fixed; z-index: 6; aspect-ratio: 1; pointer-events: none;
  transform-origin: top left;
}
.login-flight svg { display: block; width: 100%; height: 100%; overflow: visible; }
.is-flying .flight-wings {
  transform-box: view-box;
  transform-origin: 112px 72px;
  animation: login-wingbeat 240ms ease-in-out infinite alternate;
}
@keyframes login-wingbeat {
  from { transform: rotate(-4deg) scaleX(1.02); }
  to { transform: rotate(16deg) scaleX(.66) scaleY(.93); }
}
.family-controls { display: flex; align-items: center; gap: 3px; }
.child-avatar {
  display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 50%; background: var(--mint); color: var(--accent); object-fit: cover;
}
.child-avatar .icon { width: 58%; height: 58%; }
.child-picker { position: relative; display: flex; align-items: center; }
.child-picker select {
  appearance: none; max-width: clamp(82px, 26vw, 150px); padding-inline: 10px 28px;
  background: #ffffffb3; border-color: #46625342; line-height: 1.25;
}
.child-picker select:hover:not(:disabled) { background: var(--white); }
.child-picker > .icon {
  position: absolute; inset-inline-end: 9px; width: 13px; height: 13px;
  color: var(--muted); transform: rotate(90deg); pointer-events: none;
}
.child-picker > .child-avatar {
  position: absolute; inset-inline-start: 6px; width: 30px; height: 30px; pointer-events: none;
}
.child-picker.has-avatar select { max-width: clamp(117px, 33vw, 185px); padding-inline-start: 43px; }
.account-settings { position: relative; }
.account-settings summary {
  display: flex; align-items: center; justify-content: center;
  width: var(--touch); height: var(--touch); padding: 0; list-style: none;
  border-radius: var(--control-radius); color: var(--text); cursor: pointer;
}
.account-settings summary::-webkit-details-marker { display: none; }
.account-settings summary .icon { display: block; width: 21px; height: 21px; }
.account-settings summary:hover, .account-settings[open] summary { color: var(--accent-strong); }
.settings-actions {
  position: absolute; z-index: 4; inset-block-start: calc(100% + 4px); inset-inline-end: 0;
  width: 162px; padding: 4px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--white); box-shadow: var(--menu-shadow);
}
.settings-actions :is(button, a) {
  display: flex; justify-content: flex-start; width: 100%; padding-inline: 10px;
  border: 0; border-radius: 6px; white-space: nowrap;
}
.settings-actions :is(button, a):is(:hover, :focus-visible) { background: var(--control-hover); }
.settings-actions :is(button, a):focus-visible { outline-offset: -2px; }
.settings-actions [data-action="logout"] { color: #994638; }
.settings-actions [data-action="logout"]:hover { background: #f9eeeb; }
dialog:has(.settings-heading) { width: min(520px, calc(100% - 2 * var(--dialog-gutter))); }
.settings-heading > div, .settings-controls { display: flex; align-items: center; gap: 6px; }
.settings-heading > div { min-width: 0; }
.settings-icon {
  flex: none; width: var(--touch); height: var(--touch); padding: 0; border-radius: 10px;
  color: var(--accent-strong); background: var(--white);
}
.settings-icon:hover:not(.primary) { background: var(--control-hover); }
.settings-icon.primary { color: #fff; background: var(--accent); }
.settings-icon.primary:hover { background: var(--accent-strong); }
.settings-icon .icon { width: 20px; height: 20px; }
.family-section { display: grid; gap: 10px; padding-block: 10px; }
.family-section + .family-section { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 16px; }
.settings-profile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; overflow-wrap: anywhere; }
.settings-profile > .child-avatar, .settings-person {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
}
.settings-person { background: var(--mint); color: var(--accent-strong); }
.settings-add { position: relative; justify-self: start; border-style: dashed; }
.settings-add::after {
  content: attr(aria-label); position: absolute; inset-inline-start: calc(100% + 8px);
  z-index: 1; padding: 3px 8px; border-radius: 6px; background: var(--ink); color: #fff;
  font-size: 12px; font-weight: 550; white-space: nowrap; pointer-events: none; visibility: hidden;
}
.settings-add:is(:hover, :focus-visible)::after { visibility: visible; }
.family-grants summary { width: fit-content; cursor: pointer; color: var(--accent-strong); font-size: 13px; }
.family-grants section, [data-form^="family-"] { margin-block: 12px; }
.family-grants .field { margin-top: 6px; }
.avatar-picker { margin-block: 8px 12px; }
.avatar-picker summary { cursor: pointer; width: fit-content; padding: 4px 8px; border-radius: 8px; }
.avatar-picker summary .child-avatar { vertical-align: middle; margin-inline: 4px 8px; }
.avatar-options {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px;
  min-inline-size: 0; margin: 10px 0; padding: 0; border: 0;
}
.avatar-options label { position: relative; min-width: 0; cursor: pointer; }
.avatar-choice {
  display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; padding: 6px 2px;
  border: 1px solid var(--line); border-radius: 10px; text-align: center; overflow-wrap: anywhere;
  font-size: 12px; line-height: 1.2;
}
.avatar-choice .child-avatar { width: 46px; height: 46px; }
.avatar-options button.avatar-choice { justify-content: flex-start; font-weight: 500; }
.avatar-options input:checked + .avatar-choice, .avatar-choice[aria-current] { border-color: var(--accent); background: var(--mint); }
.avatar-options input:focus-visible + .avatar-choice { outline: 2px solid var(--accent-strong); outline-offset: 1px; }
.avatar-preview { display: grid; justify-items: center; gap: 12px; padding-block: 12px 16px; }
.avatar-preview .child-avatar { width: min(160px, 56vw); height: auto; aspect-ratio: 1; }
.avatar-preview figcaption { color: var(--ink); font-weight: 650; }
.model-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.camera-action { display: none; }
@media (pointer: coarse) { .camera-action { display: inline-flex; } }
[data-editable="false"] :is(.dock-record,[data-task],[data-action=new],[data-action=new-task],
  [data-action=result],[data-action=toggle-task],[data-action=scan],[data-action=dedupe],[data-action=resolve],
  [data-action=event-dates],[data-action=task-dates],[data-action=plan],[data-action=summary],
  [data-action=capture-group],[data-action=ignore],[data-action=open-card],.draft-link) { display: none; }
#notice {
  position: fixed; z-index: 5; bottom: calc(99px + env(safe-area-inset-bottom)); right: var(--frame);
  max-width: calc(100vw - 2 * var(--frame)); padding: 10px 14px; background: var(--ink);
  color: #fff; border-radius: 12px; box-shadow: var(--shadow); font-size: 14px;
}
#notice button { margin-left: 12px; min-height: 44px; color: white; border-color: #ffffff80; background: transparent; }
.completion-feedback { padding: 10px 12px; margin-block: 10px; border-radius: 10px; color: var(--accent); background: var(--mint); }
@media (min-width: 880px) and (min-height: 630px) {
  body[data-page=today] main { padding-bottom: 0; }
  .today-board {
    height: calc(100vh - 186px); height: calc(100dvh - 186px - env(safe-area-inset-bottom));
    max-height: 820px;
  }
  .board-widgets { overflow: auto; scrollbar-width: thin; padding: 0 2px 10px; margin: 0 -2px -10px; }
}
@media (max-width: 879px), (pointer: coarse) {
  :root { --control-height: var(--touch); }
}
@media (max-width: 879px) {
  :root { --frame: clamp(12px, 3.2vw, 26px); --gap: 13px; }
  .today-board { display: block; }
  .schedule { display: none; }
  .mobile-intro { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 2px 0 15px; }
  .mobile-intro .icon { width: 46px; height: 46px; }
  .mobile-intro h1 { font-size: clamp(25px, 5vw, 37px); margin-bottom: 0; }
  .mobile-recent { display: block; order: 2; }
  .mobile-capture {
    display: flex; align-items: center; justify-content: space-between; gap: 7px; order: 1;
    padding: 9px 12px; border: 1px solid #ffffff8f; border-radius: 16px; background: #ffffffe0;
  }
  .mobile-capture > span { font-size: 13px; font-weight: 700; }
  .mobile-capture > span .icon { width: 24px; height: 24px; }
  .mobile-capture .primary { white-space: nowrap; }
  .growth-widget { order: 3; }
  .draft-link { order: 4; }
  .masthead { padding-block: max(13px, env(safe-area-inset-top)) 12px; }
  .brand { gap: 8px; }
  .brand-mark { width: 39px; height: 39px; }
  .brand-mark img { width: 62px; }
  .brand-wordmark { height: 20px; }
  .brand small { font-size: 10px; }
  .masthead-date { display: none; }
}
@media (max-width: 620px) {
  .login-layout { grid-template-columns: minmax(0, 1fr); align-content: center; gap: 24px; width: min(100%, 380px); }
  .login-mascot { width: clamp(100px, 34vw, 148px); }
  .login-panel { padding: 23px; }
  .masthead, .masthead-end, .family-controls { flex-wrap: wrap; }
  .masthead-end, .family-controls { justify-content: flex-end; }
  .masthead-end { margin-inline-start: auto; }
  .columns, .fields { grid-template-columns: minmax(0, 1fr); }
  .panel { border-radius: 19px; }
  .dock { width: min(calc(100% - 20px), 425px); justify-content: space-around; gap: 1px; padding-inline: 4px; bottom: max(8px, env(safe-area-inset-bottom)); }
  .dock a, .dock button { min-width: 54px; min-height: 57px; padding-inline: 4px; }
  .dock-icon { width: 29px; height: 29px; }
  .dock-icon svg { width: 25px; height: 25px; }
  .hero { gap: 10px; margin: 4px 0 14px; }
  .hero .icon-tile { width: 44px; height: 44px; flex-basis: 44px; border-radius: 13px; }
  .hero .icon-tile .icon { width: 32px; height: 32px; }
  .hero h1 { font-size: clamp(20px, 5.5vw, 26px); }
  .story-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 155px), 1fr)); }
  .story-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
  .story-tools h2 { grid-column: 1 / -1; }
  .story-search { width: 100%; }
  .story-cover, .story-cover > img { height: 100px; }
  .story-cover > .icon { width: 52px; height: 52px; }
  .story-copy { padding: 10px 11px; }
  dialog { --dialog-gutter: max(10px, env(safe-area-inset-left), env(safe-area-inset-right)); padding: 15px; }
  dialog header h2 { font-size: 20px; }
  .row-link .badge { white-space: normal; text-align: center; }
}
@media (max-width: 360px) {
  .masthead { column-gap: 6px; }
  .family-controls { gap: 0; }
  .child-picker select { max-width: 25vw; padding-inline: 7px 21px; }
  .child-picker > .icon { inset-inline-end: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .story-card:hover { transform: none; }
}

/* Diary entries and timeline cards retain a stable width. */
body[data-page=today] main { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }
.diary-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(240px,300px); gap: var(--gap); align-items: start; }
.diary-ledger, .diary-aside, .diary-entry { min-width: 0; }
.diary-aside { display: grid; gap: var(--gap); }
.diary-guide p { margin-top: 12px; color: var(--muted); line-height: 1.8; }
.diary-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-bottom: 14px; }
.diary-tools h2 { flex: 1 1 140px; }
.diary-date-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.diary-date { width: 152px; max-width: 100%; }
.diary-search { width: 100%; }
.diary-day + .diary-day { margin-top: 22px; }
.diary-day > h3 { padding-block: 10px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.diary-entry { padding-block: 17px; }
.diary-entry + .diary-entry { border-top: 1px dashed var(--line); }
.entry-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; font-size: 12px; color: var(--muted); }
.entry-status { font-size: 12px; color: var(--accent); }
.diary-copy, .memory-copy { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.85; font-size: 15px; }
.entry-footer { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.diary-tags { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; flex: 1; }
.diary-tag { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; padding: 3px 8px; border-radius: 8px; background: var(--control-hover); color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.plan-tag { background: var(--mango); color: #765325; min-height: 32px; }
.diary-tag .icon { width: 14px; height: 14px; }
.entry-tools { display: flex; gap: 3px; margin-left: auto; }
.entry-tools button { width: 40px; min-height: 44px; display: grid; place-items: center; padding: 0; }
.entry-original { margin-top: 16px; }
.entry-classifications { margin-top: 14px; }
.entry-classifications h3 { margin-bottom: 8px; }
.entry-classifications .button { max-width: 100%; margin: 3px; overflow-wrap: anywhere; }

.memory-timeline { max-width: 1100px; margin-inline: auto; }
.memory-day { position: relative; padding: 0 0 25px 37px; margin-bottom: 0; }
.memory-day::before { content: ''; position: absolute; left: 9px; top: 18px; bottom: -18px; width: 2px; background: #5e9d843d; }
.memory-day::after { content: ''; position: absolute; left: 3px; top: 14px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 3px solid #ddf0e6; }
.memory-day:last-child::before { bottom: 25px; }
.memory-day > h2 { display: flex; align-items: center; min-height: 42px; margin: 4px 0 12px; }
.memory-day time { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.memory-day-entries { display: grid; gap: 13px; }
.memory-card { min-width: 0; padding: 19px 21px 12px; border-radius: 20px; background: var(--white); box-shadow: var(--shadow); overflow-wrap: anywhere; }
.memory-media { min-width: 0; margin-top: 12px; position: relative; }
.photo-stack { width: 100%; height: var(--closed-height,161px); position: relative; overflow-anchor: none; }
.photo-layer, .single-photo { display: grid; place-items: center; width: var(--photo-width,196px); max-width: 100%; aspect-ratio: 3 / 2; min-height: 0; padding: 0; border: 5px solid white; border-radius: 10px; box-shadow: 0 2px 10px #19352e24; background: var(--mint); overflow: hidden; touch-action: manipulation; }
.photo-layer { position: absolute; top: 0; left: 0; z-index: var(--photo-z,1); transform-origin: 0 0; transform: translate3d(var(--stack-x,8px),var(--stack-y,8px),0) rotate(var(--rotation,-3deg)) scale(var(--stack-scale,1)); pointer-events: none; }
.photo-layer img, .single-photo img { position: absolute; width: 100%; height: 100%; object-fit: contain; inset: 0; background: white; }
.single-photo { position: relative; margin: 8px 0; }
.is-expanded > .photo-stack { height: var(--open-height,240px); }
.is-expanded .photo-layer { transform: translate3d(var(--open-x,8px),var(--open-y,8px),0) rotate(0deg) scale(1); pointer-events: auto; }
.memory-media.is-ready:not(.is-measuring) > .photo-stack { transition: height 500ms cubic-bezier(.22,.7,.25,1); }
.memory-media.is-ready:not(.is-measuring) .photo-layer { transition: transform 440ms cubic-bezier(.22,1.18,.36,1) var(--fold-delay,0ms); }
.memory-media.is-ready.is-expanded:not(.is-measuring) .photo-layer { transition-delay: var(--unfold-delay,0ms); }
.photo-stack-toggle { position: absolute; z-index: 10; left: 0; top: 0; width: var(--stack-hit-width,241px); max-width: 100%; height: var(--closed-height,161px); padding: 0; border: 0; background: transparent; border-radius: 14px; touch-action: manipulation; }
.media-collapse { position: absolute; bottom: 0; right: 0; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 50%; background: var(--control-hover); color: var(--accent); touch-action: manipulation; }
.media-collapse .icon { width: 20px; height: 20px; }
.video-mark { position: absolute; display: grid; place-items: center; inset: 50% auto auto 50%; transform: translate(-50%,-50%); width: 34px; height: 34px; border-radius: 50%; background: #173b328c; color: white; font-size: 16px; }
.other-evidence { margin-top: 9px; }
.other-evidence > summary { color: var(--accent); font-size: 13px; }
.other-evidence > summary .icon { width: 16px; height: 16px; margin-right: 5px; }
dialog:has(.media-viewer) { width: min(1000px,calc(100% - 2 * var(--dialog-gutter))); padding: 14px; }
.media-viewer-body { min-width: 0; max-height: calc(var(--dialog-visible-height,100dvh) - 170px); overflow: auto; border-radius: 10px; background: #f1f5f2; }
.media-viewer video { display: block; width: 100%; max-height: calc(var(--dialog-visible-height,100dvh) - 180px); }
.zoom-image { display: block; width: 100%; border: 0; padding: 0; background: transparent; cursor: zoom-in; }
.zoom-image img { display: block; width: 100%; max-height: calc(var(--dialog-visible-height,100dvh) - 180px); object-fit: contain; }
.zoom-image.is-zoomed { width: 200%; max-width: none; cursor: zoom-out; }
.zoom-image.is-zoomed img { max-height: none; }
.viewer-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; padding-top: 10px; }
.viewer-controls button { min-width: 44px; }
.viewer-controls .button { margin-left: auto; }

.plan-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.plan-filters {
  display: inline-flex; align-items: stretch; gap: 2px; padding: 3px;
  border: 1px solid #ffffff80; border-radius: 11px; background: #ffffff5c;
}
.plan-filters button {
  min-height: var(--control-height); padding: 6px 10px; border: 0; border-radius: 7px;
  background: transparent; color: var(--muted); font-size: 13px; font-weight: 550; white-space: nowrap;
}
.plan-filters button:hover { background: #ffffff66; color: var(--ink); }
.plan-filters button[aria-pressed=true] {
  background: var(--white); color: var(--accent-strong); font-weight: 650;
  box-shadow: 0 1px 3px #19352e14, 0 0 0 1px #19352e06;
}
.plan-filters button:focus-visible { outline-offset: -2px; }
.plan-tools .plan-create { flex: none; width: var(--touch); height: var(--touch); padding: 0; border-radius: 50%; }
.plan-tools .plan-create .icon { width: 20px; height: 20px; }
@media (max-width: 380px) {
  .plan-tools { gap: 6px; }
  .plan-filters button { padding-inline: 6px; font-size: 12px; }
}
.plan-tone-drum { --plan-accent:#efb35d; --plan-tint:#fff1da; }
.plan-tone-reading { --plan-accent:#78bd8f; --plan-tint:#e5f4e9; }
.plan-tone-piano { --plan-accent:#b098d9; --plan-tint:#f0eafa; }
.plan-tone-swimming { --plan-accent:#74bfe5; --plan-tint:#e3f4fc; }
.plan-tone-tennis { --plan-accent:#b5c96b; --plan-tint:#f1f6df; }
.plan-tone-art { --plan-accent:#e9a4ae; --plan-tint:#fcebef; }
.plan-tone-math { --plan-accent:#dcb967; --plan-tint:#fff4db; }
.plan-tone-cycling { --plan-accent:#7dbba5; --plan-tint:#e8f5ed; }
.plan-tone-toothbrush { --plan-accent:#7ec9d2; --plan-tint:#e7f6f8; }
.plan-tone-sleep { --plan-accent:#a8a0d7; --plan-tint:#eeeafa; }
.plan-tone-plant { --plan-accent:#94bd73; --plan-tint:#edf5e5; }
.plan-tone-heart { --plan-accent:#e7a194; --plan-tint:#fcece6; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,330px),1fr)); gap: 15px; }
.plan-card { position: relative; min-width: 0; padding: 14px 16px 13px 14px; border-radius: 22px; border-left: 5px solid var(--plan-accent,#94bd73); background: var(--white); box-shadow: 0 3px 14px #3153490b; overflow-wrap: anywhere; }
.plan-card.is-finished { background: #f6faf6; }
.plan-card.is-done-today { background: #f5fbf7; }
.plan-swipe { position: relative; isolation: isolate; width: 100%; height: 52px; overflow: hidden; border-radius: 28px; background: #e6f2ec; color: var(--accent); box-shadow: inset 0 0 0 1px #b5d4c44d; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.plan-swipe:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.plan-swipe-fill { position: absolute; inset: 0; z-index: -1; background: #c5e5d5; transform: scaleX(0); transform-origin: left center; pointer-events: none; }
.plan-swipe[data-swipe-origin="1"] .plan-swipe-fill { transform: scaleX(1); }
.plan-swipe[data-swipe-origin="0.5"] .plan-swipe-fill { transform: scaleX(.5); }
.plan-swipe-label { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 10px 0 54px; font-size: 13px; font-weight: 650; white-space: nowrap; transition: opacity 160ms; pointer-events: none; }
.plan-swipe.is-completed .plan-swipe-label { padding: 0 54px 0 10px; }
.plan-swipe.is-bidirectional .plan-swipe-label { justify-content: space-between; padding: 0; }
.plan-swipe.is-bidirectional .plan-swipe-label > span { display: flex; justify-content: center; align-items: center; gap: 2px; width: calc(50% - 24px); font-size: 12px; }
.plan-swipe-label .icon { width: 12px; height: 12px; }
.plan-swipe-thumb { position: absolute; top: 4px; left: 4px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--accent); box-shadow: 0 2px 6px #254d3826,0 0 0 1px #ffffffb3; cursor: grab; touch-action: pan-y; }
.plan-swipe[data-swipe-origin="1"] .plan-swipe-thumb { left: calc(100% - 48px); }
.plan-swipe[data-swipe-origin="0.5"] .plan-swipe-thumb { left: calc(50% - 22px); }
.plan-swipe-thumb .icon { width: 21px; height: 21px; pointer-events: none; }
.plan-swipe.is-bidirectional .plan-swipe-thumb .icon { width: 15px; height: 15px; }
.plan-swipe.is-dragging .plan-swipe-thumb { cursor: grabbing; box-shadow: 0 3px 9px #254d3838; }
.plan-swipe.is-dragging .plan-swipe-label { opacity: .3; }
.plan-swipe.is-ready { box-shadow: inset 0 0 0 2px #75ad92; }
.plan-swipe.is-ready .plan-swipe-label { justify-content: center; padding: 0 48px; opacity: 1; }
.plan-swipe.is-saving .plan-swipe-thumb { cursor: wait; }
.plan-swipe.is-saving .plan-swipe-label { opacity: 1; }
.plan-swipe[aria-disabled="true"] { background: var(--control-hover); color: var(--muted); box-shadow: none; }
.plan-swipe[aria-disabled="true"] .plan-swipe-label { padding-inline: 10px; }
@media(prefers-reduced-motion: reduce){ .plan-swipe-label { transition: none; } }
.plan-card-heading { display: grid; grid-template-columns: 56px minmax(0,1fr) 32px; gap: 11px; align-items: start; }
.plan-task-icon { position: relative; display: grid; place-items: center; width: 56px; height: 56px; padding: 6px; border: 0; border-radius: 17px; background: var(--plan-tint,var(--mint)); }
.plan-task-image { display: block; width: 44px; height: 44px; object-fit: contain; }
.plan-icon-edit { position: absolute; right: -5px; bottom: -4px; display: grid; place-items: center; width: 23px; height: 23px; background: var(--white); border-radius: 50%; box-shadow: 0 1px 4px #19352e24; color: var(--accent); }
.plan-icon-edit .icon { width: 13px; height: 13px; }
.plan-card-copy { min-width: 0; }
.plan-card-copy h3 button { display: block; width: 100%; padding: 0; min-height: 28px; color: var(--ink); font-size: 18px; font-weight: 750; line-height: 1.4; overflow-wrap: anywhere; text-align: left; }
.plan-card-copy > p { margin-top: 3px; line-height: 1.55; font-size: 13px; }
.plan-date { display: inline-block; white-space: nowrap; }
.plan-card-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px; margin-top: 10px; margin-left: 67px; }
.plan-status { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 650; color: var(--accent); }
.plan-status .icon { width: 18px; height: 18px; }
.plan-more { position: relative; justify-self: end; margin-top: -6px; margin-right: -6px; }
.plan-more > summary { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; list-style: none; cursor: pointer; }
.plan-more > summary::-webkit-details-marker { display: none; }
.plan-more > summary:hover, .plan-more[open] > summary { background: var(--control-hover); }
.plan-more-menu { position: absolute; top: 42px; right: 0; z-index: 5; display: grid; width: 186px; padding: 6px; border: 1px solid var(--line); border-radius: 13px; background: var(--white); box-shadow: var(--menu-shadow); }
.plan-more-menu :is(button,a) { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; text-align: left; justify-content: flex-start; color: var(--text); font-size: 14px; }
.plan-more-menu :is(button,a):hover { background: var(--control-hover); }
.plan-more-menu .danger-icon { color: #a94136; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }
.plan-more-menu .icon { width: 18px; height: 18px; }
.plan-edit-icon { display: flex; align-items: center; gap: 12px; }
.plan-edit-icon > label { flex: 1; }
.plan-edit-icon-preview { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px; background: var(--control-hover); }
dialog.plan-icon-dialog { inset: auto 0 0; transform: none; margin: 0 auto; width: min(560px,100%); max-width: 100%; border-radius: 25px 25px 0 0; padding: 20px 16px calc(18px + env(safe-area-inset-bottom)); }
dialog.plan-icon-dialog::backdrop { background: #152b2726; }
.plan-icon-dialog header h2 { font-size: 21px; }
.plan-picker-tools { display: flex; gap: 5px; align-items: center; }
.plan-picker-tools > .link { width: 44px; padding: 10px; }
.plan-auto-icon { gap: 3px; padding: 5px 10px; border: 0; border-radius: 24px; background: var(--control-hover); color: var(--accent); min-height: 40px; font-size: 14px; }
.plan-auto-icon[aria-pressed=true] { background: var(--mint); box-shadow: inset 0 0 0 1px #8bbca6; }
.plan-auto-icon .icon { width: 18px; height: 18px; }
.plan-picker-caption { margin: 0 0 12px; overflow-wrap: anywhere; }
.plan-icon-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px 7px; }
.plan-icon-option { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 13px; }
.plan-icon-swatch { position: relative; display: grid; place-items: center; width: 100%; max-width: 64px; aspect-ratio: 1; border-radius: 16px; background: var(--plan-tint); }
.plan-icon-swatch img { width: 76%; height: 76%; object-fit: contain; }
.plan-icon-option[aria-pressed=true] .plan-icon-swatch { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan-icon-selected { position: absolute; top: -5px; right: -4px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: white; }
.plan-icon-selected .icon { width: 14px; height: 14px; }
.plan-picker-note { margin-top: 14px; font-size: 12px; }
@media(max-width:620px){ .plan-card { padding: 12px 14px 12px 12px; } }
@media(max-width:360px){ .plan-icon-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } .plan-picker-tools { gap: 1px; } .plan-icon-dialog header h2 { font-size: 18px; } }
@media(max-width:360px){ .plan-card-footer { margin-left: 0; } }
.plan-card-footer > div:first-child { min-width: 0; }
.plan-card-footer strong, .plan-card-footer small { display: block; }
.plan-card-footer strong { color: var(--accent); }
.plan-card-actions { display: flex; gap: 5px; flex: none; margin-left: auto; }
.plan-source { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-top: 10px; color: var(--muted); }
.plan-source .icon { width: 15px; height: 15px; }
.finished-plans { margin-top: 23px; }
.finished-plans > summary { margin-bottom: 10px; }
.calendar-overview { display: grid; gap: var(--gap); }
.calendar-panel { min-width: 0; }
.calendar-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 3px 12px; margin-bottom: 12px; }
.calendar-toolbar h2 { margin: 0; font-size: 20px; }
.calendar-toolbar > p { grid-column: 1 / -1; margin: 0; }
.calendar-navigation { display: flex; align-items: center; gap: 6px; justify-self: end; }
.calendar-navigation > button { min-height: 44px; padding: 6px 10px; font-size: 13px; white-space: nowrap; }
.calendar-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.calendar-table th, .calendar-table td { padding: 10px; vertical-align: top; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.calendar-table th:last-child, .calendar-table td:last-child { border-right: 0; }
.calendar-table tbody tr:last-child > * { border-bottom: 0; }
.calendar-table thead th { text-align: left; background: #f4faf5; font-size: 14px; }
.calendar-table thead th:first-child { width: 80px; text-align: center; }
.calendar-table tbody th { padding: 6px; text-align: center; background: #fbfdfb; }
.calendar-table tbody th button { display: flex; flex-direction: column; gap: 0; width: 100%; border: 0; background: transparent; color: var(--muted); }
.calendar-table tbody th button strong { font-size: 22px; color: var(--ink); }
.calendar-table tbody th button small { font-size: 12px; }
.calendar-table tr.is-selected > * { background: #f4faf6; }
.calendar-table tr.is-today th button { color: var(--accent); background: var(--mint); }
.calendar-table tr.is-today th button strong { color: var(--accent); }
.calendar-cell-empty { display: block; min-height: 48px; color: #8fa69b; padding: 12px 6px; }
.calendar-item { display: flex; align-items: flex-start; width: 100%; min-width: 0; min-height: 44px; padding: 10px; gap: 8px; border: 1px solid transparent; border-radius: 10px; text-align: left; color: var(--ink); background: #f0f8f3; overflow-wrap: anywhere; }
.calendar-item + .calendar-item { margin-top: 6px; }
.calendar-item:hover { border-color: #93b8a7; background: #e5f3eb; }
.calendar-item-copy { flex: 1; min-width: 0; }
.calendar-item-copy strong, .calendar-item-copy small { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2; }
.calendar-item-copy strong { font-size: 14px; line-height: 1.45; font-weight: 650; }
.calendar-item-copy small { margin-top: 4px; color: var(--muted); line-height: 1.45; font-size: 12px; }
.calendar-item-mark { flex: 0 0 22px; }
.calendar-item-mark .icon { width: 22px; height: 22px; }
.calendar-item > .icon { flex: 0 0 13px; width: 13px; height: 18px; margin-top: 2px; opacity: .6; }
.calendar-plan { background: #fff6e7; }
.calendar-plan:hover { background: #ffedcf; border-color: #dfb87e; }
.calendar-plan.is-done { background: #f0f4f0; }
.calendar-plan.is-done strong { color: var(--muted); text-decoration: line-through; }
.calendar-week-strip, .calendar-mobile-agenda, .calendar-title-short { display: none; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 12px; margin-top: 14px; }
.calendar-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.has-record, .has-plan { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #529f87; }
.has-plan { background: #dcab60; }
.calendar-floating > div { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 10px; }
.calendar-floating .calendar-item { margin: 0; }
@media (max-width: 879px) {
  .calendar-panel { padding: 16px; }
  .calendar-title-short { display: inline; }
  .calendar-title-long, .calendar-legend { display: none; }
  .calendar-desktop { display: none; }
  .calendar-week-strip { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 3px; margin: 0 -4px 20px; }
  .calendar-week-strip button { display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 76px; padding: 8px 1px 5px; background: transparent; border-color: transparent; border-radius: 12px; }
  .calendar-week-strip button > span:first-child { font-size: 11px; color: var(--muted); white-space: nowrap; }
  .calendar-week-strip strong { font-size: 18px; }
  .calendar-week-strip [aria-current=date] { border-color: #b4d8c8; }
  .calendar-week-strip [aria-pressed=true] { background: var(--accent); color: white; }
  .calendar-week-strip [aria-pressed=true] > span:first-child { color: #e5f5ed; }
  .calendar-dots { display: flex; gap: 3px; justify-content: center; height: 7px; align-items: center; }
  .calendar-week-strip [aria-pressed=true] .has-record { background: #d2f5e4; }
  .calendar-mobile-agenda { display: block; }
  .calendar-mobile-day { display: grid; grid-template-columns: 37px minmax(0,1fr); gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); scroll-margin-block: 16px 110px; }
  .calendar-mobile-day.is-selected { border-top-color: #a7ceba; }
  .calendar-mobile-day.is-empty:not(.is-selected) { display: none; }
  .calendar-day-date time { display: flex; flex-direction: column; align-items: center; padding: 6px 1px; border-radius: 9px; color: var(--muted); font-size: 11px; }
  .calendar-day-date strong { color: var(--ink); font-size: 21px; line-height: 1.4; }
  .calendar-day-date small { font-size: 10px; }
  .calendar-mobile-day.is-selected .calendar-day-date time { color: var(--accent); background: var(--mint); }
  .calendar-day-content { min-width: 0; }
  .calendar-mobile-day .calendar-agenda-section + .calendar-agenda-section { margin-top: 6px; }
  .calendar-mobile-day .calendar-agenda-section h3 {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .calendar-mobile-day .calendar-item { padding: 9px 8px; gap: 6px; }
  .calendar-mobile-day .calendar-item-copy .calendar-note, .calendar-mobile-day .calendar-plan-default { display: none; }
  .calendar-mobile-day .calendar-item-mark { flex-basis: 19px; }
  .calendar-mobile-day .calendar-item-mark .icon { width: 19px; height: 19px; }
  .calendar-mobile-day .calendar-item > .icon { flex-basis: 11px; width: 11px; }
  .calendar-agenda-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
  .calendar-agenda-heading h2 { font-size: 18px; }
  .calendar-agenda-section + .calendar-agenda-section { margin-top: 20px; }
  .calendar-agenda-section h3 { display: flex; gap: 7px; align-items: center; font-size: 14px; margin-bottom: 9px; }
  .calendar-agenda-section h3 > span { font-size: 12px; font-weight: 500; color: var(--muted); }
  .calendar-empty { font-size: 13px; color: var(--muted); padding: 9px 0; }
}
.plan-weekdays { min-width: 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(70px,1fr)); gap: 5px; border: 1px solid var(--line); border-radius: 10px; }
.plan-weekdays label { display: flex; gap: 6px; align-items: center; min-height: 44px; }
.occurrence-list { display: grid; gap: 5px; margin-top: 12px; }
.occurrence-list button { justify-content: flex-start; text-align: left; }
.occurrence-list button small { margin-left: auto; flex: none; white-space: nowrap; }
.occurrence-list [aria-pressed=true] { background: var(--mint); }
.occurrence-list button span { min-width: 0; flex: 1; }
@media (max-width: 999px) { .diary-layout { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 620px) {
  .diary-ledger { padding: 15px; }
  .memory-card { padding: 15px 14px 8px; }
  .memory-day { padding-left: 29px; }
  .memory-day::before { left: 6px; }
  .memory-day::after { left: 0; }
  .plan-card { padding: 12px 14px 12px 12px; }
}

/* Ambient family space. Shared scale, calm surfaces and one primary focus. */
body[data-ambience=luminous] { --stage: var(--stage-ai); }
.masthead { padding-block: max(22px, env(safe-area-inset-top)) 20px; }
.masthead-date { color: var(--muted); font-weight: 450; }
.brand small { font-weight: 500; color: var(--muted); }
.hero > .icon-tile { background: transparent; box-shadow: none; }
.panel { background: #ffffffed; }
.panel.paper { background: #fffefbed; }
.panel.warm { background: #fffaf0dd; }
.panel-head .icon-tile { background: transparent; }
.badge { font-weight: 550; }
.row strong, .row-link strong, .calendar-item-copy strong { font-weight: 550; }
.hero.calendar-hero { margin-block: 12px 24px; }
.calendar-hero > div { min-width: 0; }
.ambient-eyebrow, .ai-eyebrow { color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: .1em; margin-bottom: 7px; }
.calendar-overview { grid-template-columns: minmax(0,2.25fr) minmax(250px,1fr); align-items: start; }
.calendar-panel { padding: clamp(18px,2vw,30px); }
.calendar-companion { display: grid; gap: var(--gap); min-width: 0; }
.ambient-invitation { display: flex; flex-direction: column; align-items: flex-start; padding: 22px 25px 27px; border-radius: 32px; background: linear-gradient(155deg,#f0f3faee,#f8eee5d9); min-width: 0; }
.ambient-invitation > img { width: 120px; height: 120px; object-fit: contain; align-self: center; margin-block: -3px 8px; }
.ambient-invitation h2 { font-size: clamp(18px,1.65vw,23px); font-weight: 500; letter-spacing: -.025em; }
.ambient-invitation .invitation-copy { color: var(--muted); font-size: 13px; line-height: 1.9; margin-block: 12px 20px; }
.ambient-invitation .primary { border-radius: 24px; padding-inline: 18px; }
.ambient-focus .panel-head { margin-bottom: 16px; }
.ambient-focus h2 { font-size: 16px; }
.ambient-rest { color: var(--muted); font-size: 14px; padding-block: 6px 20px; line-height: 1.8; }
.focus-plans { display: grid; gap: 8px; }
.focus-plans .calendar-item { background: #faf6ef; border-radius: 15px; margin: 0; }
.ai-review-entry { width: 100%; display: flex; gap: 8px; justify-content: flex-start; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; padding: 16px 0 0; margin-top: 16px; font-size: 13px; color: var(--ai-ink); }
.ai-review-entry > .icon:last-child { margin-left: auto; width: 14px; }
.calendar-floating { grid-column: 1/-1; }
.calendar-navigation { gap: 2px; padding: 2px; border-radius: 22px; background: var(--surface); }
.calendar-navigation > button { border: 0; background: transparent; border-radius: 20px; font-size: 12px; min-height: 44px; }
.calendar-toolbar { gap: 6px 12px; margin-bottom: 20px; }
.calendar-toolbar h2 { font-size: 18px; font-weight: 500; }
.calendar-toolbar > p { font-size: 12px; }
.calendar-table { border: 0; border-radius: 0; overflow: visible; }
.calendar-table th, .calendar-table td { border-right: 0; border-bottom: 1px solid #eeeee8; padding: 10px 7px; }
.calendar-table thead th { background: transparent; color: var(--muted); font-size: 12px; font-weight: 450; padding-bottom: 14px; }
.calendar-table thead th:first-child { width: 65px; }
.calendar-table tbody th { background: transparent; }
.calendar-table tr.is-selected > * { background: #faf9f5; }
.calendar-table tbody th button { border-radius: 18px; }
.calendar-table tbody th button strong { font-size: 23px; font-weight: 450; }
.calendar-table tbody th button small { font-size: 11px; }
.calendar-table tr.is-today th button { background: #edf2eb; color: var(--accent); }
.calendar-item { background: #f1f5f0; border-radius: 14px; padding: 11px 9px; }
.calendar-plan { background: #fcf4e9; }
.calendar-cell-empty { opacity: .4; min-height: 44px; }
.calendar-legend { gap: 14px; font-size: 11px; }
.calendar-legend > span:last-child { display: none; }
.memory-timeline { max-width: 1160px; }
.memory-card { border-radius: 28px; padding: 24px 27px 18px; }
.memory-day > h2 { font-size: 18px; font-weight: 500; }
.memory-day::before { width: 1px; background: #c5cec1; }
.memory-day::after { width: 9px; height: 9px; left: 5px; top: 17px; background: #9dac99; border: 2px solid #f8f5ef; }
.memory-copy { line-height: 1.95; color: var(--text); }
.story-layout { display: grid; grid-template-columns: minmax(0,2fr) minmax(260px,1fr); gap: var(--gap); align-items: start; max-width: 1360px; margin-inline: auto; }
.story-detail { width: 100%; min-width: 0; }
.story-context { display: grid; gap: var(--gap); min-width: 0; }
.story-detail .diary-copy { font-size: 16px; line-height: 2; margin-block: 18px 24px; }
.story-detail .panel-head { margin-bottom: 20px; }
.story-context .panel-head { margin-bottom: 18px; }
.story-context h2 { font-size: 16px; }
.story-context .growth-topic-tag { background: var(--mint); border-radius: 22px; min-height: 44px; padding-inline: 14px; gap: 8px; }
.story-context .growth-topic-tag .icon { width: 13px; height: 13px; }
.story-plan-link { display: flex; width: 100%; min-height: 60px; gap: 10px; padding: 12px; text-align: left; border: 0; border-radius: 18px; background: #faf5ed; }
.story-plan-link + .story-plan-link { margin-top: 8px; }
.story-plan-link span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.story-plan-link strong, .story-plan-link small { display: block; font-size: 13px; font-weight: 500; line-height: 1.6; }
.story-plan-link small { font-size: 11px; color: var(--muted); margin-top: 4px; }
.story-plan-link > .icon:last-child { width: 13px; height: 13px; }
.growth-switcher { border-radius: 26px; background: #f4f4ed; }
.growth-switcher button { border-radius: 22px; font-weight: 500; }
.growth-switcher button[aria-pressed=true] { border-color: transparent; }
.plan-card { border-radius: 26px; box-shadow: var(--shadow); }
.plan-card-title, .plan-card h2 { font-weight: 580; }
.plan-filters { border-color: #ffffffb3; background: #ffffff63; border-radius: 24px; padding: 4px; }
.plan-filters button { border-radius: 20px; }
.login-panel { background: #fffffff0; box-shadow: var(--shadow); border-radius: 32px; }
.login-panel h1 { font-weight: 500; }
.login-brand p { font-weight: 500; color: var(--muted); }
dialog { border-radius: 28px; border-color: #ffffffbf; box-shadow: 0 24px 100px #27312f24; padding: 26px; }
dialog::backdrop { background: #30363842; }
dialog header h2 { font-size: 19px; font-weight: 550; }
dialog > header { margin-bottom: 18px; }
dialog header .link { color: var(--muted); font-weight: 450; }
label.field { font-weight: 500; }
input:not([type=checkbox], [type=file], [type=hidden]), textarea, select { border-color: var(--control-border); }
.actions { background: transparent; }

/* One assistant identity, with state driven by the active request. */
dialog.ai-dialog { background: var(--stage-ai); border-color: #ffffff; --accent: #505a80; --accent-strong: #3d466a; --control-focus: #6575a1; --control-hover: #eef0f8; --line: var(--ai-line); }
.ai-presence { display: grid; justify-items: center; gap: 5px; text-align: center; padding-block: 5px 10px; }
.ai-presence-art { display: grid; place-items: center; width: 112px; height: 106px; background: radial-gradient(ellipse,#d5ddf58c, #ede4f454 45%,transparent 72%); border-radius: 50%; }
.ai-presence-art img { display: block; width: 104px; height: 104px; object-fit: contain; }
.ai-presence-label { font-size: clamp(18px,2.1vw,24px); font-weight: 450; line-height: 1.5; letter-spacing: -.035em; color: #39445d; }
.ai-presence[data-phase=processing] .ai-presence-art { animation: assistant-halo 2s ease-in-out infinite alternate; }
.ai-presence[data-phase=listening] .ai-presence-art { animation: assistant-halo 1s ease-in-out infinite alternate; }
.ai-presence[data-phase=ready] .ai-presence-art { background: radial-gradient(ellipse,#e4edd68f,#e5e8f45c 48%,transparent 73%); }
.ai-presence[data-phase=paused] .ai-presence-art { animation: none; }
@keyframes assistant-halo { from { box-shadow: 0 0 12px 2px #bdc9ee00; } to { box-shadow: 0 0 48px 12px #bdc9ee60; } }
.ai-workspace, .ai-result, .ai-receipt { min-width: 0; }
.ai-capture-intro { text-align: center; color: #6d7383; font-size: 13px; line-height: 1.8; margin: 3px 0 18px; }
.ai-workspace form { margin-top: 20px; }
.ai-workspace textarea, .ai-dialog .capture-editor textarea { background: #ffffffb3; border: 1px solid #dfe4f0; border-radius: 22px; padding: 18px; min-height: 120px; line-height: 1.8; }
.ai-workspace .fields { gap: 18px; }
.ai-workspace input { background: #ffffffbf; }
.ai-question-examples { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 10px; }
.ai-question-examples button { font-size: 12px; color: #626c87; padding-inline: 0; min-height: 44px; }
.ai-form-footer { display: flex; gap: 12px; justify-content: space-between; align-items: center; padding-top: 20px; margin-top: 12px; }
.ai-form-footer .primary, .ai-branches .primary { border-radius: 24px; padding-inline: 20px; }
.ai-dialog .primary { box-shadow: 0 3px 9px #424d7512; }
.ai-dialog .capture-media { margin-top: 0; }
.ai-dialog form[data-input-mode=voice] .voice-capture { padding-block: 15px 20px; gap: 12px; }
.ai-dialog .voice-record { border: 1px solid #ffffff; background: #ffffffe6; color: #58658c; box-shadow: 0 5px 22px #6578a31a; }
.ai-dialog form[data-input-mode=voice] .voice-record { width: 68px; height: 68px; }
.ai-dialog .voice-record.is-recording { background: #f8e6df; color: #9c5f55; }
.ai-dialog .voice-status { font-size: 12px; color: #68748c; }
.ai-dialog .capture-attachments { padding-top: 8px; }
.ai-dialog .capture-attachments > p { font-size: 11px; opacity: .85; }
.ai-dialog .media-icon-tools { gap: 16px; }
.ai-dialog .media-icon { border: 0; background: #ffffff70; border-radius: 50%; }
.ai-dialog .capture-actions { border-top-color: #dde2ee; padding-top: 15px; }
.ai-dialog form[data-input-mode=text] .ai-presence { grid-template-columns: 55px minmax(0,1fr); text-align: left; justify-items: start; gap: 8px; padding-bottom: 10px; }
.ai-dialog form[data-input-mode=text] .ai-presence-art, .ai-dialog form[data-input-mode=text] .ai-presence-art img { width: 55px; height: 55px; }
.ai-dialog form[data-input-mode=text] .ai-presence-label { align-self: center; font-size: 17px; }
.ai-dialog form[data-input-mode=text] .ai-capture-intro { display: none; }
.ai-context { max-width: 94%; margin: 13px auto 23px; text-align: center; font-size: 13px; color: #6d7383; overflow-wrap: anywhere; }
.ai-answer-card { background: #ffffffc9; border: 1px solid #ffffff; border-radius: 26px; padding: 22px 24px; margin-top: 18px; box-shadow: 0 12px 32px #4b577006; }
.ai-card-heading { display: flex; align-items: center; gap: 8px; color: #7383a3; margin-bottom: 16px; }
.ai-card-heading h3 { font-size: 13px; color: #62708c; font-weight: 500; }
.ai-card-heading .icon { width: 17px; height: 17px; }
.ai-answer-copy { color: #3d485a; font-size: 15px; line-height: 1.95; overflow-wrap: anywhere; white-space: pre-wrap; }
.ai-answer-copy p + p { margin-top: 16px; }
.ai-saved-copy { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.85; font-size: 15px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.ai-saved-card .jump { font-size: 12px; font-weight: 500; margin-top: 8px; }
.ai-evidence { margin-block: 22px; }
.ai-evidence > summary { min-height: 44px; padding-block: 12px; cursor: pointer; font-size: 12px; color: #67728c; }
.ai-evidence-list { display: grid; gap: 8px; }
.ai-evidence-card, .ai-output-card { display: flex; align-items: center; gap: 12px; background: #ffffff70; border: 1px solid #ffffff90; border-radius: 19px; padding: 13px 16px; color: #45516b; text-align: left; width: 100%; min-width: 0; }
.ai-evidence-card > span { background: #eef0f8; border-radius: 50%; padding: 9px; }
.ai-evidence-card > div, .ai-output-card > div { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ai-evidence-card strong, .ai-output-card strong { display: block; font-size: 13px; font-weight: 500; line-height: 1.6; }
.ai-evidence-card small, .ai-output-card small { display: block; font-size: 11px; color: #70798d; margin-block: 3px; }
.ai-evidence-card > .icon, .ai-output-card > .icon:last-child { width: 14px; height: 14px; }
.ai-evidence-card:hover, .ai-output-card:hover { background: #ffffffc4; border-color: #cad2e5; }
.ai-next { margin-top: 24px; }
.ai-branches { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ai-branches > :is(button,a) { border-radius: 22px; font-size: 13px; }
.ai-structured { display: grid; gap: 10px; margin-top: 14px; }
.ai-receipt-note { margin-top: 17px; line-height: 1.8; }
.ai-review-panel { background: var(--stage-ai); text-align: center; }
.ai-review-panel .ai-presence { padding: 0 0 16px; }
.ai-review-panel .ai-presence-label { font-size: 13px; }
.ai-review-panel .ai-presence-art, .ai-review-panel .ai-presence-art img { width: 80px; height: 80px; }
.ai-review-panel h2 { font-size: 22px; font-weight: 500; margin-bottom: 12px; }
.ai-review-panel .ai-branches { justify-content: center; margin-top: 22px; }
.report-range { display: inline-flex; gap: 2px; padding: 4px; border-radius: 24px; background: #f1f3f7; }
.report-range button { border: 0; border-radius: 20px; padding-inline: 12px; background: transparent; font-size: 12px; color: var(--muted); }
.report-range button[aria-pressed=true] { background: white; color: var(--ai-ink); box-shadow: 0 1px 5px #4956790a; }
@keyframes assistant-card-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (min-width: 880px) {
  .calendar-desktop { max-height: max(220px,calc(100dvh - 440px)); overflow: auto; scrollbar-width: thin; }
  .calendar-table thead { position: sticky; top: 0; z-index: 1; background: #fffefa; }
  .calendar-companion { max-height: max(360px,calc(100dvh - 290px)); overflow: auto; scrollbar-width: thin; border-radius: 32px; }
  body[data-page=today] main { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
}
@media (min-width: 880px) and (max-height: 820px) {
  .masthead { padding-block: 16px 10px; }
  .hero.calendar-hero { margin-block: 4px 18px; }
  .calendar-hero h1 { font-size: 29px; }
  .ambient-invitation > img { width: 92px; height: 92px; }
  .ambient-invitation .invitation-copy { display: none; }
  .ambient-invitation .primary { margin-top: 18px; }
}
@media (min-width: 880px) and (min-height: 821px) {
  .calendar-desktop { max-height: max(220px,calc(100dvh - 490px)); }
}
@media (min-width: 880px) and (max-width: 1100px) {
  .calendar-overview { grid-template-columns: minmax(0,2.25fr) minmax(230px,1fr); gap: 18px; }
  .calendar-table th, .calendar-table td { padding: 8px 5px; }
  .calendar-item { padding: 8px 6px; gap: 5px; }
  .calendar-item-mark { flex-basis: 17px; }
  .calendar-item-mark .icon { width: 17px; height: 17px; }
  .calendar-item-copy strong { font-size: 13px; }
  .ambient-invitation { padding: 18px 20px 22px; }
}
@media (max-width: 879px) {
  .story-layout { grid-template-columns: minmax(0,1fr); }
  .calendar-overview { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .calendar-companion { display: contents; }
  .ambient-invitation { order: -1; display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 13px 15px; border-radius: 26px; }
  .ambient-invitation > img { width: 77px; height: 77px; margin: -4px 0; flex: none; }
  .ambient-invitation > div { flex: 1; position: relative; min-width: 0; padding-right: 43px; }
  .ambient-invitation .ai-eyebrow { font-size: 10px; margin-bottom: 5px; }
  .ambient-invitation h2 { font-size: 16px; line-height: 1.6; }
  .ambient-invitation .invitation-copy, .ambient-focus { display: none; }
  .ambient-invitation .primary { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 0; width: 44px; height: 44px; padding: 0; background: #ffffffa6; color: var(--ai-ink); border: 0; }
  .ambient-invitation .primary .icon { width: 20px; height: 20px; }
  .calendar-panel { padding: 18px 15px; border-radius: 28px; }
  .hero.calendar-hero { margin-block: 9px 18px; }
  .calendar-hero .ambient-eyebrow { font-size: 11px; margin-bottom: 4px; }
  .calendar-hero h1 { font-size: 26px; }
  .calendar-toolbar { margin-bottom: 14px; }
  .calendar-toolbar h2 { font-size: 17px; }
  .calendar-week-strip button { min-height: 72px; border-radius: 26px; font-weight: 450; }
  .calendar-week-strip strong { font-weight: 500; }
  .calendar-week-strip [aria-current=date] { border-color: #d9dfd2; }
  .calendar-week-strip [aria-pressed=true] { background: #536b5d; }
  .calendar-agenda-heading h2 { font-size: 16px; font-weight: 500; }
  .calendar-mobile-day { border-top-color: #eeeee8; padding-block: 16px; }
  .calendar-mobile-day:not(.is-selected) { display: none; }
  .calendar-day-date strong { font-weight: 450; }
  .calendar-item-copy strong { font-size: 14px; }
  .memory-card { padding: 20px 18px 13px; border-radius: 25px; }
}
@media (max-width: 620px) {
  .masthead { padding-block: max(18px,env(safe-area-inset-top)) 14px; }
  .hero h1 { font-size: 25px; }
  dialog { padding: 20px; border-radius: 28px; }
  .ai-dialog > header { margin-bottom: 8px; }
  .ai-presence-label { font-size: 20px; }
  .ai-presence-art, .ai-presence-art img { width: 96px; height: 96px; }
  .ai-capture-intro { font-size: 12px; margin-bottom: 12px; }
  .ai-answer-card { padding: 20px; border-radius: 24px; }
  .ai-answer-copy { font-size: 15px; }
  .ai-form-footer { align-items: flex-end; }
  .ai-form-footer > span { max-width: 42%; font-size: 11px; }
  .ai-form-footer .primary { flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ai-presence-art, .ai-presence-art img, .ai-presence-label::after, .ai-answer-card { animation: none !important; }
  :root { --motion-card: 0ms; --motion-scene: 0ms; }
}

/* A continuous assistant scene: input -> context -> working -> usable cards. */
dialog.ai-dialog[open]:is(:has(> .ai-workspace),:has(> .ai-result),:has(> .ai-receipt),:has(> form[data-form=capture])) { display: flex; flex-direction: column; height: min(740px,calc(var(--dialog-visible-height,100dvh) - 2 * var(--dialog-gap))); overflow: hidden; }
dialog[data-closing] { pointer-events: none; }
.ai-dialog > header { flex: none; }
.ai-dialog > :is(.ai-workspace,.ai-result,.ai-receipt) { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 2px 12px; scrollbar-width: thin; }
.ai-dialog .ai-workspace { display: flex; flex-direction: column; }
.ai-dialog .ai-workspace > .ai-presence { margin-block: auto; }
.ai-dialog .ai-workspace > form { margin-top: 0; padding-top: 28px; }
.ai-dialog form[data-form=capture] { flex: 1; }
.ai-dialog form[data-input-mode=voice]:not(.is-ai-waiting) .capture-body { display: flex; flex-direction: column; justify-content: center; }
.ai-dialog .capture-body > .ai-capture-intro { flex: none; }
.ai-context-thread { position: relative; display: grid; gap: 4px; width: min(100%,440px); margin: 0 auto 18px; padding: 14px 18px; border: 1px solid #ffffffc9; border-radius: 23px; background: #ffffffa1; box-shadow: 0 7px 24px #65739807; text-align: left; color: #58627c; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.ai-context-thread .ai-eyebrow { font-size: 10px; color: #7a8399; margin: 0; letter-spacing: .08em; }
.ai-context-thread > span:last-child { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ai-context-thread::after { content: ''; position: absolute; top: calc(100% + 1px); left: 50%; width: 1px; height: 18px; background: linear-gradient(#b9c5e2,transparent); }
.ai-submitted-context { flex: none; }
.ai-workspace.ai-waiting-scene > form { display: none; }
.ai-workspace.ai-waiting-scene > .ai-capture-intro { display: none; }
.ai-workspace.ai-waiting-scene > .ai-presence { margin-block: auto; }
form.is-ai-waiting .capture-body { display: flex; flex-direction: column; flex: 1; }
form.is-ai-waiting :is(.capture-editor,.capture-media,.ai-capture-intro,.capture-actions) { display: none !important; }
form.is-ai-waiting .capture-body > .ai-presence { display: grid; grid-template-columns: 1fr; text-align: center; justify-items: center; margin-block: auto; }
.ai-dialog form.is-ai-waiting .ai-presence-art, .ai-dialog form.is-ai-waiting .ai-presence-art img { width: 112px; height: 112px; }
.ai-dialog form.is-ai-waiting .ai-presence-label { font-size: 21px; }
.ai-flow { display: none; align-items: center; justify-content: center; gap: 9px; height: 30px; padding-top: 10px; }
.ai-flow i { width: 4px; height: 4px; border-radius: 50%; background: #8597c0; animation: assistant-flow 1.3s ease-in-out infinite; }
.ai-flow i:nth-child(2) { animation-delay: 140ms; }
.ai-flow i:nth-child(3) { animation-delay: 280ms; }
.ai-presence[data-phase=processing] .ai-flow, .ai-presence[data-phase=listening] .ai-flow { display: flex; }
@keyframes assistant-flow { 0%,100% { opacity: .25; transform: translateY(0); } 45% { opacity: 1; transform: translateY(-7px); } }
.ai-result > .ai-presence, .ai-receipt:has(.ai-presence[data-phase=ready]) > .ai-presence { display: grid; grid-template-columns: 44px minmax(0,1fr); align-items: center; text-align: left; gap: 10px; padding: 0 8px 12px; }
.ai-result > .ai-presence .ai-presence-art, .ai-result > .ai-presence .ai-presence-art img,
.ai-receipt:has(.ai-presence[data-phase=ready]) > .ai-presence .ai-presence-art, .ai-receipt:has(.ai-presence[data-phase=ready]) > .ai-presence .ai-presence-art img { width: 44px; height: 44px; }
.ai-result > .ai-presence .ai-presence-label, .ai-receipt:has(.ai-presence[data-phase=ready]) > .ai-presence .ai-presence-label { font-size: 17px; justify-self: start; }
.ai-result .ai-context-thread { margin-bottom: 12px; }
.ai-result .ai-evidence { margin-block: 14px; }
.ai-result .ai-next { margin-top: 12px; }
.ai-result .ai-answer-card { position: relative; margin-top: 8px; }
.ai-result .ai-answer-card::before { content: ''; position: absolute; width: 1px; height: 18px; left: 50%; bottom: calc(100% + 1px); background: linear-gradient(transparent,#cad2e7); }
.dock-indicator { position: absolute; z-index: 0; top: 0; left: 0; width: 0; height: 0; border-radius: 28px; background: var(--control-selected); pointer-events: none; }
.dock > :is(a,button) { z-index: 1; }
.dock a[aria-current] { background: transparent; }
@media (max-width:620px) {
  .ai-dialog .ai-workspace > form { padding-top: 16px; }
  .ai-context-thread { padding: 12px 15px; border-radius: 21px; }
  .ai-dialog .ai-workspace > .ai-presence { margin-block: auto; }
  .ai-dialog .ai-workspace.ai-waiting-scene > .ai-presence { margin-block: auto; }
}
@media (prefers-reduced-motion:reduce) {
  .ai-flow i { animation: none; opacity: .6; }
}