:root {
  --ink: #19352e;
  --text: #29433c;
  --muted: #53685f;
  --accent: #17634f;
  --accent-strong: #104f3e;
  --line: #e0ebe4;
  --white: #fff;
  --surface: #fbfdfb;
  --mint: #e1f3e9;
  --mango: #fff0d4;
  --sky: #e9efff;
  --berry: #f2e9fb;
  --peach: #ffebe2;
  --stage: radial-gradient(ellipse at 91% 7%, #ffbb95 0%, transparent 43%),
    radial-gradient(ellipse at 66% 0%, #ffe8af 0%, transparent 47%),
    radial-gradient(ellipse at 100% 90%, #f7d2cf 0%, transparent 42%),
    radial-gradient(ellipse at 1% 102%, #83d3bd 0%, transparent 54%),
    linear-gradient(129deg, #a1dcd2 2%, #d6efde 54%, #dbe7d6 100%);
  --shadow: 0 2px 6px #234f3b0a, 0 14px 36px #31534916;
  --radius: 24px;
  --radius-inner: 15px;
  --gap: clamp(14px, 1.7vw, 24px);
  --frame: clamp(20px, 3.2vw, 56px);
  --touch: 44px;
  --control-height: 38px;
  --control-radius: 8px;
  --control-border: #c8d5ce;
  --control-hover: #f0f5f2;
  --control-selected: #e4f0e9;
  --control-focus: #2e7767;
  --menu-shadow: 0 4px 9px #19352e0d, 0 12px 28px #19352e1a;
  --ease: 170ms ease;
  --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: #ceeade;
  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: -1; background: var(--stage); }
[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: 620; 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); }
.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: 750 19px/1.3 var(--display); }
h3 { font: 700 16px/1.45 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: #fffef7ed; border: 1px solid var(--line); border-radius: 17px; 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: 10px; background: transparent; color: var(--muted);
  font-size: 12px; font-weight: 620; 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: var(--accent); border-radius: var(--control-radius); }
.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; }
.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); color: var(--accent); gap: 2px; font-weight: 700; font-size: 13px; white-space: nowrap; }
.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 .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: 16px; margin: 10px 0 26px; padding: 7px 1px; }
.hero .icon-tile { width: 76px; height: 76px; flex-basis: 76px; border-radius: 23px; box-shadow: var(--shadow); }
.hero .icon-tile .icon { width: 56px; height: 56px; }
.eyebrow { color: var(--accent-strong); font-size: 12px; font-weight: 780; letter-spacing: .12em; }
.hero h1, .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; }
.path-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr)); gap: var(--gap); align-items: start; }
.growth-evidence { margin-top: var(--gap); }
.path-panel .row .icon-tile { width: 34px; height: 34px; flex-basis: 34px; }
.path-panel .row .icon-tile .icon { width: 24px; height: 24px; }
.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); }
.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 {
  max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow: auto;
  width: min(720px, calc(100% - 36px)); padding: 22px; background: var(--white);
  color: var(--text); border: 1px solid var(--line); border-radius: 17px; box-shadow: var(--menu-shadow);
}
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; }
form[data-form=capture] { margin-top: 12px; }
.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); position: sticky; bottom: 0;
}
.capture-media { display: grid; gap: 8px; margin-block: 10px; min-width: 0; }
.voice-capture { display: grid; gap: 5px; padding: 10px; border-radius: var(--radius-inner); background: var(--surface); }
.voice-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.voice-record { background: var(--mint); border-color: var(--line); color: var(--accent-strong); }
.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; }
.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; }
.capture-attachments summary { display: flex; align-items: center; gap: 6px; width: fit-content; min-height: 44px; padding: 0 6px; color: var(--accent-strong); cursor: pointer; }
.capture-attachments summary::-webkit-details-marker { display: none; }
.capture-attachments[open] { padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.media-tools { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.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; }
.capture-actions { 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; }
.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-origin: 110px 74px;
  animation: login-wingbeat 170ms ease-in-out infinite alternate;
}
@keyframes login-wingbeat {
  from { transform: rotate(5deg) scaleX(1.03); }
  to { transform: rotate(27deg) scaleX(.55) scaleY(.86); }
}
.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% - 24px)); }
.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;
}
@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: 12px; margin: 5px 0 16px; }
  .hero .icon-tile { width: 53px; height: 53px; flex-basis: 53px; border-radius: 16px; }
  .hero .icon-tile .icon { width: 38px; height: 38px; }
  .hero p:last-child { font-size: 13px; }
  .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 { width: calc(100% - 20px); 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; }
}