@charset "UTF-8";
/* A shared comic-book skin. Layout, saved preferences and form behaviour stay in their own stylesheets. */
:root {
  --cream: #fff6df;
  --paper: #fffdf5;
  --ink: #302e29;
  --muted: #655f52;
  --olive: #285a65;
  --sage: #e0ebbf;
  --line: #a7a08b;
  --clay: #9f3d2d;
  --yellow: #f7cf55;
  --action: #f7cf55;
  --action-ink: #302e29;
  --action-hover: #ffdf7b;
  --surface-green: #e3edca;
  --surface-yellow: #fff0b8;
  --surface-coral: #f9dfd1;
  --surface-blue: #dceef1;
  --surface-muted: #f1ebd9;
  --field: #fffef9;
  --field-line: #686252;
  --danger: #96392c;
  --danger-soft: #fbe3d8;
  --warning-ink: #6e4b0c;
  --success-ink: #3a5327;
  --comic-outline: #37342c;
  --comic-shadow: #37342c;
  --shadow: 3px 4px 0 var(--comic-shadow);
  --dock: #fff6df;
  --dock-line: #37342c;
  --app-accent: #f7cf55;
  --app-accent-ink: #302e29;
  --serif: 'Chalkboard SE', 'Comic Sans MS', 'Comic Sans', ui-rounded, system-ui, sans-serif;
}
body[data-theme="dark"], body.display-home {
  color-scheme: dark;
  --cream: #20343e;
  --paper: #2d3c3e;
  --ink: #fff5dd;
  --muted: #d2cbb7;
  --olive: #b8dee0;
  --sage: #394b32;
  --line: #898976;
  --clay: #ffc0a3;
  --yellow: #f3cf68;
  --action: #f3cf68;
  --action-ink: #302e29;
  --action-hover: #ffe398;
  --surface-green: #394b32;
  --surface-yellow: #51472b;
  --surface-coral: #583f34;
  --surface-blue: #314a4d;
  --surface-muted: #383d31;
  --field: #223337;
  --field-line: #a2a18b;
  --danger: #ffc0a3;
  --danger-soft: #57382f;
  --warning-ink: #ffe296;
  --success-ink: #d6edb4;
  --comic-outline: #b6ae91;
  --comic-shadow: #10130d;
  --shadow: 3px 4px 0 var(--comic-shadow);
  --dock: #2d3c3e;
  --dock-line: #b6ae91;
  --app-accent: #f3cf68;
  --app-accent-ink: #302e29;
}
@media (prefers-color-scheme: dark) {
  body[data-theme="system"] {
    color-scheme: dark;
    --cream: #20343e;
    --paper: #2d3c3e;
    --ink: #fff5dd;
    --muted: #d2cbb7;
    --olive: #b8dee0;
    --sage: #394b32;
    --line: #898976;
    --clay: #ffc0a3;
    --yellow: #f3cf68;
    --action: #f3cf68;
    --action-ink: #302e29;
    --action-hover: #ffe398;
    --surface-green: #394b32;
    --surface-yellow: #51472b;
    --surface-coral: #583f34;
    --surface-blue: #314a4d;
    --surface-muted: #383d31;
    --field: #223337;
    --field-line: #a2a18b;
    --danger: #ffc0a3;
    --danger-soft: #57382f;
    --warning-ink: #ffe296;
    --success-ink: #d6edb4;
    --comic-outline: #b6ae91;
    --comic-shadow: #10130d;
    --shadow: 3px 4px 0 var(--comic-shadow);
    --dock: #2d3c3e;
    --dock-line: #b6ae91;
    --app-accent: #f3cf68;
    --app-accent-ink: #302e29;
  }
}
body[data-theme], body.display-home, body.offline-shell {
  background-color: var(--cream); color: var(--ink);
}
h1, h2, h3, .brand, .display-clock time {
  font-family: var(--serif); font-weight: 700; letter-spacing: -.025em;
}
h1, h2, h3 { line-height: 1.22; }
body[data-theme] .eyebrow { color: var(--olive); letter-spacing: .08em; font-weight: 800; }
body[data-theme] :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--clay); outline-offset: 4px;
}
body[data-theme] :is(.site-header, .navigation) { background: var(--cream); border-color: var(--comic-outline); }
body[data-theme] .site-header { border-bottom-width: 2px; }
body[data-theme] .brand { color: var(--ink); letter-spacing: -.04em; }
.site-header .brand img {
  background: #fff3c8; border: 1px solid var(--comic-outline); border-radius: 9px; padding: 2px;
}
body[data-theme] .navigation { border-bottom: 2px solid var(--comic-outline); }
body[data-theme] .navigation nav a[aria-current] {
  background: var(--surface-yellow); color: var(--ink); border-color: var(--comic-outline); font-weight: 750;
}
body[data-theme] :is(.nav-menu > div, .conversation-menu > div, .share-menu > div,
  .reaction-menu, .delete-menu, .snooze-options form) {
  background: var(--paper); color: var(--ink); border: 2px solid var(--comic-outline);
  border-radius: 8px; box-shadow: var(--shadow);
}
body[data-theme] :is(.navigation nav a, .account-links a):hover { background: var(--surface-blue); }

/* Distinct comic panels, without rotating text or changing the chosen card order. */
body[data-theme] :is(.dashboard-card, .today-section, .panel, .record, .paper-form, .login-card,
  .together-card, .content-card, .archive-door, .archive-record, .storage-overview > :where(div),
  .person-node, .heritage-rooms > :where(a), .heritage-counts :where(div), .people-index > :where(a),
  .archive-card-list > :where(a, span), .family-book, .contact-row, .contact-detail,
  .assistant-item, .quick-add-grid a, .smart-home, .continue-card, .contact-search,
  .conversation-list, .conversation-pane, .update-card, .install-card) {
  border: 2px solid var(--comic-outline); border-radius: 12px; box-shadow: var(--shadow);
}
body[data-theme] :is(.dashboard-card, .panel, .record, .paper-form, .login-card,
  .together-card, .content-card, .archive-record, .family-book, .contact-detail,
  .contact-row, .assistant-item, .conversation-pane, .update-card, .install-card) {
  background: var(--paper); color: var(--ink);
}
body[data-theme] :is(.dashboard-side .dashboard-card:nth-child(2n), .birthday-card,
  .note, .record.note, .occasions, .attention-box, .pet-profile,
  .quick-add-grid a:nth-child(3n + 2), .profile-grid .record:nth-child(3n + 2)) {
  background: var(--surface-yellow); color: var(--ink);
}
body[data-theme] :is(.dashboard-side .shopping-preview, .side-room .shopping-preview,
  .quick-add, .contact-search, .continue-card, .private-note, .little-memories,
  .heritage-rooms > a:nth-child(2n), .revision-history, .media-memory, .privacy-note,
  .print-note, .quick-add-grid a:nth-child(3n), .profile-grid .record:nth-child(3n)) {
  background: var(--surface-green); color: var(--ink);
}
body[data-theme] :is(.note:nth-child(even), .door-dates) { background: var(--surface-coral); color: var(--ink); }
body[data-theme] :is(.door-albums, .date-tile) { background: var(--surface-green); color: var(--ink); }
body[data-theme] .door-memories { background: var(--surface-yellow); color: var(--ink); }
body[data-theme] :is(.door-documents, .family-hello, .person-cover, .heritage-tree) {
  background: var(--surface-blue); color: var(--ink);
}
body[data-theme] :is(.smart-home, .quiet, .completed, .tree-generation, .conversation-list,
  .dashboard-form li label, .merge-preview div, .relation-result) {
  background: var(--surface-muted); color: var(--ink);
}
body[data-theme] :is(.date-tile, .date-label, .note, .permission-list form, .empty-state,
  .contact-coming, .activation-code, .privacy-note, .print-note, .attention-box) {
  border: 1px solid var(--comic-outline); border-radius: 9px;
}
body[data-theme] .dashboard-card.today-card { border-top: 6px solid var(--yellow); }
body[data-theme] .date-label { background: var(--surface-yellow); color: var(--warning-ink); font-weight: 750; }
body[data-theme] .dashboard-welcome {
  border: 2px solid var(--comic-outline); border-top: 6px solid var(--yellow);
  border-radius: 16px; box-shadow: var(--shadow);
  background: linear-gradient(110deg, var(--surface-blue), var(--surface-yellow));
}
body[data-theme] :is(.dashboard-destinations a, .dashboard-actions a, .quick-add-grid a,
  .more-links a, .view-links a, .favorite-links a, .contact-shortcuts a, .admin-shortcuts a,
  .heritage-sections a, .year-pills a, .profile-options summary, .continue-card a) {
  border: 2px solid var(--comic-outline); border-radius: 9px;
  background: var(--paper); color: var(--ink); box-shadow: 2px 2px 0 var(--comic-shadow);
}
body[data-theme] .dashboard-destinations a:nth-child(4n + 1) { background: var(--surface-blue); }
body[data-theme] .dashboard-destinations a:nth-child(4n + 2) { background: var(--surface-yellow); }
body[data-theme] .dashboard-destinations a:nth-child(4n + 3) { background: var(--surface-green); }
body[data-theme] .dashboard-destinations a:nth-child(4n) { background: var(--surface-coral); }
body[data-theme] :is(.more-links a, .contact-shortcuts a, .favorite-links a):hover {
  background: var(--surface-blue); color: var(--ink);
}
body[data-theme] :is(.view-links a[aria-current="page"], .heritage-sections a[aria-current],
  .generation-label) {
  background: var(--action); color: var(--action-ink); border-color: var(--comic-outline); font-weight: 750;
}
body[data-theme] .more-links a span { background: var(--surface-yellow); color: var(--ink); }
body[data-theme] :is(.calendar, .calendar-day, .calendar-weekday, .archive-nav,
  .heritage-hero, .family-book section, .wish, .search-group, .task-line, .event-line,
  .upcoming-line, .life-line article, .conversation-header, .conversation-card) { border-color: var(--line); }
body[data-theme] .calendar-day p { background: var(--surface-blue); color: var(--ink); }
body[data-theme] .calendar-day.is-today { background: var(--surface-yellow); }
body[data-theme] .conversation-card.is-current { background: var(--surface-yellow); border-color: var(--comic-outline); }
body[data-theme] :is(.conversation-avatar, .contact-avatar, .person-initial, .avatar) {
  background: var(--surface-blue); color: var(--ink); border-color: var(--comic-outline);
}

/* Clear controls: real outlines, native field behaviour and readable labels. */
body[data-theme] :is(.button, .quick-add-button, .view-links > a.button, .archive-filters button) {
  background: var(--action); color: var(--action-ink); border: 2px solid var(--comic-outline);
  border-radius: 9px; box-shadow: 2px 3px 0 var(--comic-shadow); font-weight: 750;
}
body[data-theme] :is(.button, .quick-add-button, .archive-filters button):hover {
  background: var(--action-hover); color: var(--action-ink); border-color: var(--comic-outline);
}
body[data-theme] .button.secondary {
  background: var(--paper); color: var(--olive); border-color: var(--comic-outline);
}
body[data-theme] .button.secondary:hover { background: var(--surface-blue); color: var(--ink); }
body[data-theme] .button.destructive { background: var(--danger); color: var(--paper); }
body[data-theme] :is(.text-button, .quiet-button, .attach-button, .back) { color: var(--olive); }
body[data-theme] :is(.reactions button, .quick-choices button, .reaction-menu button) {
  background: var(--paper); color: var(--ink); border: 1px solid var(--comic-outline); border-radius: 8px;
}
body[data-theme] :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]):not([type="button"]), select, textarea) {
  background-color: var(--field); color: var(--ink); border: 2px solid var(--field-line); border-radius: 8px;
  font-family: var(--sans);
}
body[data-theme] :is(input, textarea)::placeholder { color: var(--muted); }
body[data-theme] option { background: var(--field); color: var(--ink); }
body[data-theme] :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--olive); }
body[data-theme] :is(.field label, legend) { color: var(--ink); }
body[data-theme] fieldset { border-color: var(--line); }
body[data-theme] :is(.errorlist, .messages, .storage-warning) {
  border: 1px solid var(--comic-outline); border-radius: 8px;
}
body[data-theme] .errorlist { background: var(--danger-soft); color: var(--danger); }
body[data-theme] .messages { background: var(--surface-green); color: var(--ink); }
body[data-theme] .storage-warning { background: var(--surface-yellow); color: var(--warning-ink); }
body[data-theme] :is(.pill, .confidence) { background: var(--surface-green); color: var(--success-ink); }
body[data-theme] :is(.pill.coral, .pill.off, .confidence-uncertain) { background: var(--surface-coral); color: var(--danger); }
body[data-theme] .confidence-likely { background: var(--surface-yellow); color: var(--warning-ink); }
body[data-theme] :is(.notice-count, .dock-count, .unread-badge, .pill.urgent) { background: #96392c; color: #fffdf5; }

/* Family conversations retain a clear distinction between incoming and own messages. */
body[data-theme] .message-thread { background: var(--cream); }
body[data-theme] .message {
  background: var(--paper); color: var(--ink); border: 1px solid var(--comic-outline);
  border-radius: 11px; box-shadow: 2px 2px 0 var(--comic-shadow);
}
body[data-theme] .message-own { background: var(--surface-green); }
body[data-theme] .message-system { background: var(--surface-muted); color: var(--muted); box-shadow: none; }
body[data-theme] :is(.reply-banner, .shared-card, .conversation-welcome, .conversion-preview) {
  background: var(--surface-yellow); color: var(--ink); border-color: var(--line);
}
body[data-theme] .message-composer { background: var(--paper); border-color: var(--comic-outline); }
body[data-theme] .message-composer textarea { background: var(--field); color: var(--ink); border: 2px solid var(--field-line); }
body[data-theme] .message-composer .message-actions { color: var(--olive); }

/* The same paper-and-ink treatment follows the app onto phones and family displays. */
body[data-theme] .mobile-dock {
  background: var(--dock); border-top: 2px solid var(--dock-line); box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body[data-theme] .mobile-dock a[aria-current] {
  background: var(--surface-yellow); color: var(--ink); box-shadow: inset 0 0 0 1px var(--comic-outline);
}
body[data-theme] .app-notice { border: 2px solid var(--comic-outline); border-radius: 9px; box-shadow: var(--shadow); }
body.offline-shell { background: radial-gradient(circle at 50% 10%, var(--surface-yellow), var(--cream) 70%); }
.offline-card, .display-card {
  background: var(--paper); color: var(--ink); border: 2px solid var(--comic-outline);
  border-radius: 14px; box-shadow: var(--shadow);
}
body.display-home, body.display-home.display-variant-1, body.display-home.display-variant-2 {
  background: var(--cream);
}
.display-card:nth-child(3n + 1) { background: var(--surface-yellow); }
.display-card:nth-child(3n + 2) { background: var(--surface-blue); }
.display-card:nth-child(3n) { background: var(--surface-green); }
.display-card li { border-color: var(--line); }
.display-footer .text-button { color: var(--olive); }

/* Snoopy stays a companion to the content, with no automatic, continuous movement. */
.welcome-grid > .welcome-copy { display: block; text-align: center; }
.welcome-grid > .welcome-copy .lead { margin-inline: auto; }
.peanuts-welcome-image {
  display: block; width: clamp(150px, 19vw, 260px); max-width: 100%; height: auto;
  margin: 0 auto 22px; filter: drop-shadow(0 3px 0 #302e2920);
}
.peanuts-footer-mascot {
  display: block; width: 96px; height: auto; flex: 0 0 96px; align-self: flex-end;
}
.peanuts-footer-mascot img { display: block; width: 100%; height: auto; }
.peanuts-offline-mascot {
  display: block; width: 108px; max-width: 100%; height: auto; margin: 0 auto 20px;
}
.peanuts-display-intro { display: flex; align-items: center; gap: 20px; min-width: 0; }
.peanuts-display-intro > div { min-width: 0; }
.peanuts-display-intro .eyebrow { margin-bottom: 8px; }
.peanuts-display-mascot {
  display: block; width: 112px; height: auto; flex: 0 0 112px;
  border-radius: 50%; background: radial-gradient(circle, #fff3cc 0 58%, transparent 72%);
}
.peanuts-display-intro h1 { overflow-wrap: anywhere; }
.welcome-snoopy { background: radial-gradient(circle, #fff3cc 0 58%, transparent 72%); }
.welcome-message { overflow-wrap: anywhere; }
body[data-theme] footer { border-top: 2px solid var(--comic-outline); }
body[data-theme] .display-footer { border-top: 0; }
@media (prefers-reduced-motion: no-preference) {
  body[data-theme] :is(.button, .quick-add-button, .dashboard-destinations a, .quick-add-grid a):active {
    transform: translate(2px, 2px); box-shadow: 0 1px 0 var(--comic-shadow);
  }
}
@media (max-width: 760px) {
  body[data-theme] .site-header { background: var(--cream); }
  body[data-theme] .dashboard-welcome { border-radius: 13px; }
  .peanuts-welcome-image { width: 170px; margin-bottom: 18px; }
  .peanuts-display-intro { gap: 14px; }
  .peanuts-display-mascot { width: 76px; flex-basis: 76px; }
  .peanuts-footer-mascot { width: 76px; flex-basis: 76px; }
  .dashboard-welcome .welcome-copy { grid-template-columns: minmax(0, 1fr) 76px; }
}
@media (max-width: 360px) {
  .dashboard-welcome .welcome-copy { grid-template-columns: minmax(0, 1fr) 64px; gap: 0 10px; }
  .welcome-snoopy { width: 64px; }
  .dashboard-welcome .welcome-message h1 { font-size: 1.4rem; }
}
@media print {
  body[data-theme], body.display-home {
    color-scheme: light; --cream: #fff; --paper: #fff; --ink: #222; --muted: #555;
    --olive: #222; --line: #999; --comic-outline: #333; --comic-shadow: transparent; --shadow: none;
    --surface-green: #f6f6f6; --surface-yellow: #f6f6f6; --surface-coral: #f6f6f6; --surface-blue: #f6f6f6;
    background: #fff; color: #222;
  }
}

/* A little sunshine around the pages; all information remains on solid paper. */
:root {
  --canvas-doodles: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2292%22%20height%3D%22560%22%20viewBox%3D%220%200%2092%20560%22%20fill%3D%22none%22%3E%3Cg%20stroke%3D%22%23c99b4d%22%20stroke-opacity%3D%22.23%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M34%2054l3%208%208%202-8%203-3%208-3-8-8-3%208-2z%22%2F%3E%3Cpath%20d%3D%22M19%20190c-8-1-10-12-3-16%200-11%2017-15%2022-5%2011-3%2018%206%2013%2013%209%205%205%2014-4%2014H22%22%2F%3E%3Cpath%20d%3D%22M31%20354c-12-16-24%208-7%2010-19%209%201%2025%208%208%205%2019%2024%203%2010-8%2017-2%204-25-7-10-2-18-23-14-14%200%22%2F%3E%3Ccircle%20cx%3D%2233%22%20cy%3D%22363%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M54%20470l2%206%207%201-6%203-1%207-3-6-7-1%206-3z%22%2F%3E%3Ccircle%20cx%3D%2223%22%20cy%3D%22276%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2257%22%20cy%3D%22111%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M24%20516q8-10%2016%200%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --canvas-glow: #fff8cb;
}
body[data-theme], body.offline-shell,
body.display-home, body.display-home.display-variant-1, body.display-home.display-variant-2 {
  background-color: var(--cream);
  background-image:
    var(--canvas-doodles), var(--canvas-doodles),
    radial-gradient(ellipse at 9% 8%, color-mix(in srgb, var(--surface-blue) 82%, transparent), transparent 48%),
    radial-gradient(ellipse at 91% 27%, color-mix(in srgb, var(--surface-coral) 63%, transparent), transparent 46%),
    radial-gradient(ellipse at 28% 75%, color-mix(in srgb, var(--surface-green) 60%, transparent), transparent 43%),
    radial-gradient(ellipse at 76% 0%, color-mix(in srgb, var(--canvas-glow) 60%, transparent), transparent 56%);
  background-size: 92px 560px, 92px 560px, 100% 1100px, 100% 1100px, 100% 1100px, 100% 1100px;
  background-position: left 90px, right 320px, left top, left top, left top, left top;
  background-repeat: repeat-y;
}
body[data-theme="dark"], body.display-home { --canvas-glow: #6a7655; }
@media (prefers-color-scheme: dark) {
  body[data-theme="system"] { --canvas-glow: #6a7655; }
}
@media (max-width: 760px) {
  body[data-theme], body.offline-shell,
  body.display-home, body.display-home.display-variant-1, body.display-home.display-variant-2 {
    background-image:
      radial-gradient(ellipse at 0% 4%, color-mix(in srgb, var(--surface-blue) 78%, transparent), transparent 58%),
      radial-gradient(ellipse at 100% 45%, color-mix(in srgb, var(--surface-coral) 60%, transparent), transparent 58%),
      radial-gradient(ellipse at 35% 88%, color-mix(in srgb, var(--surface-green) 58%, transparent), transparent 55%);
    background-size: 100% 1000px;
    background-position: left top;
  }
}
@media print {
  body[data-theme], body.offline-shell, body.display-home { background-image: none !important; }
}