/* Dua Parivaar parent app. Monsoon slate on cool paper; turmeric only for capture. */
@font-face { font-family: Mukta; src: url(/fonts/Mukta-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: Mukta; src: url(/fonts/Mukta-SemiBold.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: Mukta; src: url(/fonts/Mukta-Bold.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Kalam; src: url(/fonts/Kalam-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --slate: #1E2A3A; --paper: #F7F8F4; --turmeric: #E3A21A; --leaf: #2F7D5B; --rose: #C2456B; --mist: #DCE3EA; --ink-soft: #4A5868;
  --bg: var(--paper); --fg: var(--slate); --line: var(--mist); --card: #FFFFFF; --muted: var(--ink-soft);
  --sans: Mukta, "Noto Sans Devanagari", "Noto Sans", system-ui, sans-serif;
  --hand: Kalam, "Comic Neue", cursive;
  --dock-h: 96px;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #121B26; --fg: #EEF2F5; --line: #2A3848; --card: #1A2533; --muted: #A9B6C3; }
}
:root[data-theme="dark"] { --bg: #121B26; --fg: #EEF2F5; --line: #2A3848; --card: #1A2533; --muted: #A9B6C3; }
*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 1.0625rem/1.55 var(--sans); -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--turmeric); outline-offset: 2px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 1rem; top: 1rem; background: var(--card); padding: .5rem 1rem; z-index: 10; }
[hidden] { display: none !important; }

/* Header: family and the children this moment is about */
.top { position: sticky; top: env(safe-area-inset-top, 0px); background: var(--bg); z-index: 3; padding: .75rem 1rem .5rem; border-bottom: 1px solid var(--line); }
.top-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.family { margin: 0; font-weight: 600; }
.kids { display: flex; gap: .5rem; overflow-x: auto; padding: .5rem 0 .25rem; scrollbar-width: none; }
.kid { flex: none; border: 1.5px solid var(--line); background: var(--card); border-radius: 999px; padding: .35rem .9rem; min-height: 44px; cursor: pointer; }
.kid[aria-pressed="true"] { border-color: var(--fg); background: var(--fg); color: var(--bg); font-weight: 600; }
.kids.small .kid { min-height: 40px; }
.pill { border: 0; border-radius: 999px; padding: .25rem .75rem; background: var(--mist); color: var(--slate); font-size: .9rem; min-height: 32px; }
.pill.waiting { background: #FCEFD0; } .pill.problem { background: #F6D9E2; }

main { max-width: 40rem; margin: 0 auto; padding: 1rem 1rem calc(var(--dock-h) + 2rem); }
h1 { font-size: 1.75rem; line-height: 1.2; margin: 1.5rem 0 1rem; }
h2 { font-size: 1.05rem; font-weight: 600; margin: 1.75rem 0 .5rem; color: var(--muted); }
.welcome { font-size: 2.2rem; max-width: 14ch; }
.stack { display: grid; gap: .6rem; max-width: 26rem; }
label { font-weight: 600; font-size: .95rem; }
input, select, textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); padding: .7rem .8rem; min-height: 48px; }
textarea { resize: vertical; }
.note { color: var(--muted); min-height: 1.5em; margin: .5rem 0 0; }
.empty { color: var(--muted); }
.primary { background: var(--fg); color: var(--bg); border: 0; border-radius: 12px; padding: .75rem 1.25rem; font-weight: 600; min-height: 48px; cursor: pointer; }
.quiet { background: none; border: 0; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; cursor: pointer; padding: 0 .25rem; }

/* Prompt: a quiet question, never a task */
.prompt { margin-top: 1rem; padding: 1rem 1.1rem; border-left: 4px solid var(--turmeric); background: var(--card); border-radius: 4px 14px 14px 4px; }
.prompt-q { margin: 0 0 .25rem; font-size: 1.2rem; line-height: 1.35; }

/* Lists */
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.list .what { min-width: 0; }
.list .when { color: var(--muted); font-size: .9rem; white-space: nowrap; }
.list .words { font-family: var(--hand); font-size: 1.15rem; }
.list .state { font-size: .85rem; color: var(--muted); }
.list .state.saved { color: var(--leaf); } .list .state.failed { color: var(--rose); }
.list button { background: none; border: 1.5px solid var(--line); border-radius: 10px; padding: .3rem .7rem; min-height: 40px; cursor: pointer; }

/* The capture dock: one big turmeric button, quiet companions */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; display: grid; grid-template-columns: 1fr 1fr 1.4fr 1fr 1fr; align-items: end; gap: .25rem;
  padding: .5rem .5rem calc(.5rem + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-top: 1px solid var(--line); }
.mode { display: grid; justify-items: center; gap: .1rem; background: none; border: 0; padding: .35rem 0; min-height: 56px; font-size: .82rem; color: var(--fg); cursor: pointer; }
.mode .glyph { font-size: 1.35rem; line-height: 1; }
.catch { justify-self: center; width: 84px; height: 84px; margin-top: -30px; border-radius: 50%; border: 5px solid var(--bg); background: var(--turmeric); color: var(--slate);
  font-weight: 700; font-size: 1rem; line-height: 1.1; cursor: pointer; box-shadow: 0 6px 18px rgba(227, 162, 26, .35); }
.catch:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) { .catch:active { transform: none; } }

/* The sheet */
.sheet { border: 0; padding: 0; width: min(40rem, 100%); max-width: 100%; margin: auto auto 0; border-radius: 20px 20px 0 0; background: var(--card); color: var(--fg); max-height: 92vh; }
.sheet::backdrop { background: rgba(18, 27, 38, .45); }
.sheet-body { display: grid; gap: .55rem; padding: 1.1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); overflow-y: auto; max-height: 92vh; }
.sheet h2 { margin: 0 0 .25rem; color: var(--fg); font-size: 1.3rem; }
.sheet.quote textarea { font-family: var(--hand); font-size: 1.3rem; line-height: 1.45; }
.row { display: grid; gap: .4rem; }
.more summary { cursor: pointer; padding: .5rem 0; color: var(--muted); }
.more[open] { display: grid; gap: .5rem; }
.check { display: flex; gap: .6rem; align-items: center; font-weight: 400; }
.check input { width: 22px; min-height: 22px; height: 22px; }
.actions { display: flex; justify-content: space-between; align-items: center; margin-top: .25rem; }
.thumbs { display: flex; gap: .5rem; overflow-x: auto; }
.thumbs img, .thumbs video { width: 88px; height: 88px; object-fit: cover; border-radius: 10px; background: var(--mist); }
.rec { display: grid; justify-items: center; gap: .4rem; padding: .5rem 0; }
.rec-btn { width: 96px; height: 96px; border-radius: 50%; border: 0; background: var(--rose); color: #fff; font-weight: 600; cursor: pointer; }
.rec-btn[aria-pressed="true"] { background: var(--slate); }
.rec-time { margin: 0; font-variant-numeric: tabular-nums; font-size: 1.2rem; }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--dock-h) + 1rem + env(safe-area-inset-bottom, 0px)); background: var(--leaf); color: #fff;
  padding: .6rem 1.1rem; border-radius: 999px; z-index: 6; max-width: 90vw; }
.toast.problem { background: var(--rose); }
@media (min-width: 720px) { .welcome { font-size: 2.8rem; } }

/* ---- navigation and pages ---- */
.main-nav { display: flex; gap: 1.25rem; padding-top: .35rem; }
.main-nav a { color: var(--muted); text-decoration: none; padding: .35rem 0; min-height: 40px; display: inline-flex; align-items: center; border-bottom: 3px solid transparent; }
.main-nav a[aria-current] { color: var(--fg); font-weight: 600; border-bottom-color: var(--turmeric); }
.tabs { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; margin: .5rem 0 1rem; padding-bottom: .25rem; }
.tabs a { flex: none; padding: .4rem .85rem; border-radius: 999px; border: 1.5px solid var(--line); color: var(--fg); text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; }
.tabs a[aria-current] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.child-head h1 { margin-bottom: 0; } .muted { color: var(--muted); }
.block { margin: 1.25rem 0; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.section-head h2 { margin: 1.25rem 0 .5rem; }
.add { background: none; border: 1.5px dashed var(--ink-soft); border-radius: 10px; padding: .45rem .9rem; min-height: 44px; cursor: pointer; color: var(--fg); }
.form { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; margin: .5rem 0 1rem; max-width: 34rem; }
.field { display: grid; gap: .3rem; }
.help { display: block; color: var(--muted); font-size: .9rem; font-weight: 400; }
.field-error { color: var(--rose); font-size: .9rem; min-height: 0; }
[aria-invalid="true"] { border-color: var(--rose); }
.checks { display: grid; gap: .35rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); border: 0; padding: 0; }
.note-item { align-items: flex-start !important; }
.detail { border-top: 3px solid var(--fg); margin-top: 1.5rem; padding-top: .5rem; }
.detail-title { color: var(--fg); font-size: 1.3rem; margin: .5rem 0; }
.cards { list-style: none; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.cards a { display: grid; gap: .1rem; padding: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; color: var(--fg); text-decoration: none; min-height: 72px; }
.primary-link { color: var(--fg); font-weight: 600; text-underline-offset: 3px; }
.timeline .year { color: var(--fg); font-size: 1.5rem; margin: 1.5rem 0 .25rem; }
.tl { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.tl-area { color: var(--muted); font-size: .85rem; }
.tl-letter .tl-title, .tl-contribution .tl-title { font-style: italic; }
.year-card { border-left: 4px solid var(--leaf); padding: .25rem 0 .25rem 1rem; margin: 1rem 0; }
.year-card h2 { color: var(--fg); margin: .25rem 0; font-size: 1.25rem; }
.year-card p { margin: .25rem 0; }
.words { font-family: var(--hand); font-size: 1.12rem; }
.scroll-x { overflow-x: auto; }
.portraits { border-collapse: collapse; min-width: 100%; }
.portraits th, .portraits td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.portraits thead th { color: var(--muted); font-weight: 600; }
.portraits tbody th { font-weight: 600; white-space: nowrap; }
.letters .sealed { color: var(--leaf); }
.seal { background: var(--slate); color: #fff; border: 0; border-radius: 12px; padding: .75rem 1.25rem; min-height: 48px; margin-top: .5rem; cursor: pointer; }
.compare { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin: 1rem 0; }
.compare .col { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .75rem 1rem; }
.compare h3 { margin: .25rem 0 .5rem; font-size: 1rem; }
.compare ul { margin: 0; padding-left: 1.1rem; }
.emergency { max-width: 36rem; }
.emergency h2 { color: var(--fg); }
@media print {
  .top, .dock, .no-print, .skip { display: none !important; }
  body { background: #fff; color: #000; } main { padding: 0; }
}

/* ---- circle ---- */
.waiting { margin: 1rem 0 0; padding: .75rem 1rem; background: #FCEFD0; border-radius: 12px; }
.waiting a { color: var(--slate); font-weight: 600; }
.danger { background: none; border: 1.5px solid var(--rose); color: var(--rose); border-radius: 12px; padding: .6rem 1rem; min-height: 44px; cursor: pointer; }
.switch .primary, .switch .quiet { margin-top: .25rem; }
.review { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: .75rem 1rem; margin: .75rem 0; }
.review h3 { margin: .25rem 0; }
.keyshow { border: 2px solid var(--turmeric); border-radius: 14px; padding: .75rem 1rem; }
.key { display: block; word-break: break-all; background: var(--mist); color: var(--slate); padding: .6rem .75rem; border-radius: 8px; margin: .5rem 0; font-size: .95rem; }
.tabs.small a { min-height: 36px; padding: .25rem .7rem; }
.shared img, .shared video { max-width: 100%; border-radius: 12px; margin-top: .5rem; }

.button-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.farewell { max-width: 32rem; margin: 4rem auto; padding: 0 1rem; }

/* ---- legal pages and admin ---- */
body.legal main, body.admin main { padding-bottom: 3rem; }
.draft-banner { background: #F6D9E2; color: var(--slate); padding: .6rem 1rem; border-radius: 10px; font-weight: 600; }
.legal-area h3 { margin: 1rem 0 .25rem; }
.legal-area ul { margin: 0; padding-left: 1.2rem; }
.card { display: grid; padding: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.card strong { font-size: 1.6rem; }

/* ---- moments gallery and item actions ---- */
.item-actions { display: inline-flex; gap: .25rem; margin-left: .5rem; }
.link { background: none; border: 0; color: var(--fg); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 40px; padding: 0 .35rem; }
.danger-link { color: var(--rose); }
.moment { border: 1px solid var(--line); border-radius: 16px; background: var(--card); padding: .9rem 1rem; margin: .9rem 0; }
.moment-head { display: flex; justify-content: space-between; gap: .5rem; color: var(--muted); font-size: .9rem; }
.badge { border-radius: 999px; padding: .05rem .6rem; background: var(--mist); color: var(--slate); font-size: .8rem; white-space: nowrap; }
.badge.private { background: #E7E0F5; } .badge.circle { background: #FCEFD0; }
.moment h3 { margin: .35rem 0; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: .5rem; margin-top: .5rem; }
.media-grid img, .media-grid video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--mist); }
.media-grid audio { width: 100%; }
.media-wait { display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px; background: var(--mist); color: var(--slate); font-size: .85rem; text-align: center; padding: .5rem; }
.ideas { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1rem; }
.ideas button { border: 1.5px dashed var(--line); background: none; border-radius: 999px; padding: .3rem .8rem; min-height: 40px; cursor: pointer; color: var(--fg); }

/* ---- safety ---- */
.safety .sheet-body { border-top: 6px solid var(--rose); }
.helplines { list-style: none; padding: 0; margin: .5rem 0; display: grid; gap: .5rem; }
.helplines a { font-size: 1.25rem; font-weight: 700; color: var(--fg); }
.flag-red { border-left: 5px solid var(--rose); } .flag-amber { border-left: 5px solid var(--turmeric); }

.checkin-link { margin: 1rem 0 0; }
.checkin-link a { color: var(--fg); font-weight: 600; text-underline-offset: 3px; }

/* ---- guides ---- */
.guide-box { margin-top: 1rem; padding: .75rem 1rem; border-left: 4px solid var(--leaf); background: var(--card); border-radius: 4px 14px 14px 4px; }
.guide-box h2 { margin: 0 0 .25rem; color: var(--fg); font-size: 1rem; }
.guide-suggestion { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .25rem 0; }
.guide-suggestion a { color: var(--fg); }
.guide .lead { font-size: 1.15rem; }
.guide ul { padding-left: 1.2rem; }
.guide .say li { margin: .35rem 0; }

.answer:empty { display: none; }
.answer { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .5rem 1rem; }

/* ---- a child's own space ---- */
.kid-head { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0 1rem; }
.help-btn { background: var(--rose); color: #fff; border: 0; border-radius: 999px; padding: .5rem 1.2rem; min-height: 44px; font-weight: 700; cursor: pointer; }
.kid h1 { font-size: 1.6rem; }
.assent li { margin: .5rem 0; font-size: 1.1rem; }
.big { min-height: 56px; font-size: 1.1rem; padding: .75rem 1.25rem; }
.big-code { font-size: 1.8rem; letter-spacing: .15em; text-align: center; }
.help-sent { border-left: 5px solid var(--leaf); padding-left: 1rem; }

.letter-open .words { font-size: 1.15rem; line-height: 1.6; }

/* ---- the yearbook ---- */
.yearbook { max-width: 46rem; margin: 0 auto; }
.yb-tools { margin-bottom: 1rem; }
.yb-cover { text-align: center; padding: 4rem 1rem; border-bottom: 3px solid var(--turmeric); }
.yb-cover h1 { font-size: 3rem; margin: .25rem 0; }
.yb-small { text-transform: uppercase; letter-spacing: .2em; color: var(--muted); margin: 0; }
.yb-years { font-size: 1.3rem; }
.yb-year { padding: 2rem 0 1rem; border-bottom: 1px solid var(--line); }
.yb-year h2 { color: var(--fg); font-size: 2.2rem; margin: 0 0 .25rem; }
.yb-school { color: var(--muted); font-size: 1.05rem; margin-top: 0; }
.yb-words blockquote { font-family: var(--hand); font-size: 1.35rem; margin: .5rem 0; padding-left: 1rem; border-left: 4px solid var(--turmeric); }
.yb-words cite { font-family: var(--sans); font-size: .9rem; color: var(--muted); font-style: normal; }
.yb-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 1rem 0; }
.yb-photos figure { margin: 0; } .yb-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.yb-photos figcaption { font-size: .8rem; color: var(--muted); }
.yb-part h3 { margin: 1rem 0 .25rem; font-size: 1rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.yb-part ul { margin: 0; padding-left: 1.2rem; }
.yb-portrait dl { display: grid; grid-template-columns: 11rem 1fr; gap: .25rem .75rem; margin: 0; }
.yb-portrait dt { color: var(--muted); }
.yb-portrait dd { margin: 0; }
@media print {
  .yb-cover { min-height: 90vh; display: flex; flex-direction: column; justify-content: center; border: 0; }
  .yb-year { break-before: page; border: 0; }
  .yb-photos img { border-radius: 0; }
  .tabs, .kid-head, .help-btn, .child-head { display: none !important; }
}

.pro-data { white-space: pre-wrap; overflow-x: auto; max-height: 24rem; background: var(--card); padding: .75rem; border-radius: 8px; font-size: .85rem; }

/* ---- agents ---- */
.agent-results { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9rem; }
.agent-results th, .agent-results td { text-align: left; padding: .35rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.res-fail td { color: var(--rose); font-weight: 600; } .res-skipped td { color: var(--muted); }
.step-refused, .step-stopped { color: var(--rose); }

.yb-yearwords { font-size: 1.1rem; line-height: 1.6; font-style: italic; }
.yb-editor textarea { width: 100%; }
.proposal { border-left: 4px solid var(--leaf); }

/* ---- request an invitation ---- */
#form-join h2 { margin: 1rem 0 0; }
.join-lead, .join-alt { color: var(--muted); margin: 0; }
.check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.check input { width: auto; min-height: 0; margin-top: .3rem; }