/* Botanical remembrance: ivory, forest green, sage and quiet bronze. */
:root {
  color-scheme: light;
  --legacy-purple: #243e36;
  --legacy-purple-dark: #1a3029;
  --legacy-purple-rgb: 36, 62, 54;
  --legacy-ink: #263d35;
  --legacy-muted: #626c63;
  --legacy-line: #dbdfd6;
  --legacy-bg: #f7f5ef;
  --legacy-card: #fffdf8;
  --legacy-danger: #a0322f;
  --legacy-soft: #e5ebe2;
  --legacy-shadow: none;
  --focus: 0 0 0 3px #b8caba;
}
html, body, .mobile-shell, .auth-shell { background: var(--legacy-bg); color: var(--legacy-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.mobile-shell { max-width: 520px; box-shadow: none; }
.app-screen { padding: 16px 24px 32px; }
.cover-screen, .app-header { background: transparent; }
.app-header h1 { font-size: 1.5rem; font-weight: 600; }
.detail-name-row h2, .cover-copy h1 { font-family: Georgia, serif; font-weight: 400; font-size: 2.2rem; line-height: 1.2; }
p, input, textarea { line-height: 1.65; }
button, a, input, textarea { -webkit-tap-highlight-color: transparent; }
a { color: var(--legacy-purple); text-underline-offset: 3px; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid #243e36; outline-offset: 3px; box-shadow: none; }
input:focus, textarea:focus { border-color: #243e36; box-shadow: var(--focus); }
.cover-logo, .auth-logo, .loading-screen img, .legacy-empty img { filter: sepia(1) saturate(.7) brightness(.55); }
.legacy-search, .legacy-memory-card, .detail-meta-card, .anniversary-form,
.detail-memory-words, .compact-tribute, .legacy-category-row button, .legacy-flower-item,
.selected-flower-mini, .profile-purchases, .profile-purchase-item,
.stripe-payment-panel, .help-card, .legal-card, .company-card,
.support-form, .share-menu, .auth-panel {
  border-color: var(--legacy-line); background: var(--legacy-card); box-shadow: none; backdrop-filter: none;
}
.legacy-memory-card { border-radius: 12px; min-height: 108px; }
.legacy-memory-copy strong { font-size: 1.15rem; }
.legacy-memory-copy em { font-size: .92rem; font-style: normal; }
.legacy-memory-copy small { font-size: .85rem; font-weight: 500; }
.legacy-search { border-radius: 12px; }
.auth-form input, .legacy-field input, .legacy-field textarea {
  border: 1px solid #bdc8bd; background: #fffdf8; color: var(--legacy-ink); font-size: 1rem; padding: 12px 14px; border-radius: 9px;
}
.auth-form input::placeholder, .legacy-field input::placeholder,
.legacy-field textarea::placeholder, .legacy-search input::placeholder { color: #677167; opacity: 1; }
.legacy-field { margin-bottom: 12px; }
.legacy-field input { min-height: 48px; padding-block: 10px; }
.field-label { display: block; margin: 0 0 5px; font-weight: 600; font-size: .95rem; color: var(--legacy-ink); }
.field-help, .form-hint, .photo-hint { display: block; color: var(--legacy-muted); font-size: .88rem; line-height: 1.55; margin: 6px 0 12px; }
.legacy-primary, .floating-create { background: #243e36; color: #fff; box-shadow: none; border: 1px solid #243e36; }
.legacy-primary:hover { background: #1a3029; }
.legacy-primary:disabled { opacity: .65; }
.legacy-secondary, .detail-meta-card button, .detail-share-button, .back-button {
  background: #e5ebe2; color: #1a3029; border: 1px solid #cbd7ca; box-shadow: none;
}
.legacy-primary, .legacy-secondary, .legacy-danger { min-height: 48px; padding: 12px 18px; border-radius: 9px; }
.legacy-danger { background: #fff4f1; color: #a0322f; border-color: #d9a19a; }
.legacy-tabbar { max-width: 520px; background: rgba(247,245,239,.97); border-top: 1px solid var(--legacy-line); box-shadow: none; border-radius: 0; }
.legacy-tabbar button { color: #626c63; font-size: .75rem; min-height: 56px; }
.legacy-tabbar button.active { background: #dce5dc; color: #1a3029; }
.legacy-photo, .legacy-tribute-stage, .create-photo-preview { background: #e4e8df; }
.memory-initials { display: grid; place-items: center; height: 100%; min-height: 106px; color: #243e36; font: 1.8rem Georgia, serif; }
.legacy-tribute-stage { border-radius: 14px; min-height: 0; }
.detail-photo { width: 100%; max-height: 450px; object-fit: contain; }
.detail-memory-words { padding: 20px; border: 0; border-left: 2px solid #a78350; border-radius: 0; background: transparent; }
.detail-memory-words p { color: #344b40; line-height: 1.8; font-size: 1.05rem; white-space: pre-line; }
.detail-created { font-size: .88rem; }
.detail-meta-card { background: transparent; padding-inline: 0; border: 0; }
.detail-flower-action { margin-top: 14px; }
.legacy-category-row button.active, .legacy-flower-item.selected { border: 2px solid #243e36; box-shadow: none; }
.legacy-category-row button { min-height: 82px; }
.legacy-flower-item { border-radius: 12px; }
.legacy-flower-item::before, .selected-flower-mini::before, .compact-tribute::before { display: none; }
.legacy-flower-item img, .legacy-category-row img, .selected-flower-mini img, .compact-tribute img { filter: none; }
.category-scroll-wrap::after { background: linear-gradient(90deg, transparent, #f7f5ef 82%); }
.flower-duration-note { text-align: left; font-size: .9rem; line-height: 1.65; }
.legal-check { align-items: flex-start; min-height: 44px; font-size: .9rem; line-height: 1.5; gap: 10px; margin-block: 12px; }
.legal-check input { flex: 0 0 22px; width: 22px; height: 22px; margin-top: 1px; accent-color: #243e36; }
.legal-check a { text-decoration: underline; }
.post-count { font-size: .8rem; margin-top: -10px; margin-bottom: 18px; }
.create-photo-preview { max-width: 160px; height: 160px; border: 1px dashed #829785; border-radius: 12px; }
.create-photo-preview img { object-fit: contain; }
.legacy-image-picker { display: grid; justify-items: center; gap: 8px; margin-bottom: 24px; cursor: pointer; }
.legacy-image-picker:focus-within { outline: 3px solid #243e36; outline-offset: 4px; }
.compact-tribute { border: 0; border-bottom: 1px solid var(--legacy-line); border-radius: 0; background: transparent; padding: 18px 0; }
.compact-tribute p { margin: 6px 0; white-space: pre-line; }
.condolence-strip { margin-top: 32px; }
.community-section, .memory-preview, .profile-reminders, .profile-memory-list, .access-card { margin-block: 26px; }
.memory-message { padding: 18px 0; border-bottom: 1px solid var(--legacy-line); }
.memory-message p { margin: 6px 0 10px; white-space: pre-line; overflow-wrap: anywhere; }
.memory-message time, .memory-message small { font-size: .83rem; color: var(--legacy-muted); }
.memory-message button { margin: 8px 8px 0 0; }
.memory-preview { padding: 22px; border: 1px solid var(--legacy-line); border-radius: 12px; background: #fffdf8; }
.memory-preview img { width: 100%; max-height: 320px; object-fit: contain; border-radius: 9px; }
.memory-preview p { white-space: pre-line; }
.inline-error { display: block; padding: 12px; margin: 12px 0; background: #fff0ec; border-left: 3px solid #a0322f; color: #8e2926; line-height: 1.55; }
.profile-card { padding-top: 10px; text-align: left; }
.profile-purchases { margin-block: 22px; }
.profile-links { flex-wrap: wrap; }
.profile-links button { min-height: 44px; }
.profile-reminders article { padding: 16px 0; border-bottom: 1px solid var(--legacy-line); }
details { margin-block: 20px; border-block: 1px solid var(--legacy-line); padding-block: 14px; }
summary { cursor: pointer; font-weight: 600; min-height: 30px; }
.toast { background: #2d4638; color: #fff; right: max(16px, calc((100vw - 520px) / 2 + 16px)); bottom: 100px; box-shadow: 0 5px 20px #0002; }
.toast.error { background: #8e2926; }
.share-menu { background: #fffdf8; box-shadow: 0 6px 20px #0001; }
.stripe-payment-panel { padding: 10px 12px; gap: 4px; }
.payment-brand-row { padding: 0 4px; background: #fff; }
.payment-form { gap: 10px; }
.payment-form .legacy-field, .payment-form .field-help, .payment-form .legal-check { margin: 0; }
.payment-form .selected-flower-mini { grid-template-columns: 60px minmax(0, 1fr); gap: 10px; padding: 8px 10px; }
.payment-form .selected-flower-mini img { width: 60px; height: 60px; }
.payment-form .flower-duration-note { margin-block: 2px; line-height: 1.5; }
@media (min-width: 760px) { .mobile-shell { max-width: 520px; } .app-screen { padding-inline: 40px; } }
@media (max-width: 420px) {
  .app-screen { padding: 16px 16px 32px; }
  .detail-name-row h2 { font-size: 1.9rem; }
  .legacy-flower-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .legacy-flower-item { padding: 10px; }
  .legacy-flower-item img { height: 110px; }
  .legacy-flower-item strong { font-size: .92rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.form-label { display: block; margin: 0 0 5px; font-weight: 600; font-size: .95rem; color: var(--legacy-ink); }
.profile-memory-item, .reminder-item { display: grid; gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--legacy-line); }
.profile-memory-item h3, .reminder-item p { margin: 0; }
.profile-memory-item button { width: 100%; }
.access-panel { margin: 24px 0; padding: 20px; border: 1px solid var(--legacy-line); border-radius: 12px; background: #fffdf8; }
.access-panel h2 { margin-top: 0; font-size: 1.2rem; }
.access-panel input { padding: 12px; margin: 8px 0 16px; }
.community-section h2 { font-size: 1.35rem; }
.message-form { display: grid; gap: 10px; margin: 12px 0; }
.message-form .legacy-field, .message-form .field-help, .message-form .legal-check { margin: 0; }
.message-form .legacy-field textarea { min-height: 96px; padding-block: 10px; }
.memory-message footer { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; color: var(--legacy-muted); }
.moderation-actions, .memory-management-actions, .profile-account-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.checkout-notice { padding: 16px; background: #ecefe4; border-left: 3px solid #51674d; margin-block: 20px; }
.checkout-notice p { margin-top: 0; }
.legacy-field label, .profile-memory-item, .memory-message { overflow-wrap: anywhere; }

/* Mobile reading: bounded lists and details opened only when requested. */
.app-header { min-height: 44px; margin-bottom: 12px; }
.app-screen.with-tabbar { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
.legacy-search { margin-bottom: 12px; }
.legacy-search input { min-height: 48px; }
.legacy-memory-card { grid-template-columns: 72px minmax(0, 1fr); min-height: 80px; }
.legacy-photo { width: 72px; min-height: 78px; }
.memory-initials { min-height: 78px; font-size: 1.5rem; }
.legacy-memory-copy strong { font-size: 1.05rem; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.25; }
.legacy-memory-copy em { font-size: .85rem; }
.compact-memory-header { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; }
.compact-memory-portrait { width: 80px; height: 96px; border-radius: 10px; overflow: hidden; background: #e4e8df; }
.compact-memory-portrait .detail-photo { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.compact-memory-identity { min-width: 0; }
.compact-memory-identity h2 { margin: 0 0 6px; font: 1.8rem/1.12 Georgia, serif; overflow-wrap: anywhere; }
.compact-memory-identity p { margin: 4px 0; line-height: 1.4; }
.compact-memory-header:not(:has(.compact-memory-portrait)) { grid-template-columns: 1fr; }
.detail-utilities { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
.detail-utilities button { min-height: 44px; padding: 9px 12px; font-size: .88rem; }
.compact-detail > .share-menu { position: static; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.compact-detail > .share-menu a, .compact-detail > .share-menu button { min-height: 44px; }
.compact-detail > .share-menu span { white-space: normal; overflow-wrap: anywhere; }
.compact-memory-identity small, .profile-identity { overflow-wrap: anywhere; }
.legacy-detail { gap: 10px; }
.detail-memory-words { padding: 4px 0 4px 14px; margin-block: 2px; }
.detail-memory-words p { margin: 0; font-size: 1rem; line-height: 1.55; }
.detail-created { margin: 0; line-height: 1.4; }
.compact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.compact-actions.single-action { grid-template-columns: 1fr; }
.compact-actions .detail-flower-action { margin: 0; }
.compact-actions button { font-size: .92rem; padding: 11px 9px; line-height: 1.35; }
.compact-disclosure { margin: 8px 0; padding: 2px 0; }
.compact-disclosure > summary { min-height: 44px; padding: 11px 0; line-height: 1.4; }
.compact-disclosure .memory-management-actions { margin: 4px 0 12px; }
.read-more-text { white-space: pre-line; overflow-wrap: anywhere; }
.read-more-button { display: inline-flex; align-items: center; min-height: 44px; padding: 7px 0; background: transparent; color: #243e36; text-decoration: underline; text-underline-offset: 3px; font-size: .9rem; font-weight: 600; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block: 12px; }
.pager button { width: auto; min-width: 72px; min-height: 44px; padding: 8px 10px; border-radius: 8px; background: #e5ebe2; color: #1a3029; border: 1px solid #cbd7ca; font-size: .88rem; }
.pager button:disabled { opacity: .45; cursor: default; }
.pager-status { min-width: 0; font-size: .8rem; color: var(--legacy-muted); text-align: center; }
.contribution-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; margin: 0 0 8px; border: 1px solid var(--legacy-line); border-radius: 10px; background: #e5ebe2; }
.contribution-tabs button { min-height: 44px; padding: 8px 5px; border-radius: 7px; background: transparent; color: #626c63; font-size: .88rem; line-height: 1.4; }
.contribution-tabs button.active, .contribution-tabs button[aria-selected="true"], .contribution-tabs button[aria-pressed="true"] { background: #fffdf8; color: #1a3029; box-shadow: 0 1px 3px #0001; font-weight: 700; }
.contribution-tabs button span { font-size: .8rem; }
.contribution-panel { margin-block: 14px; scroll-margin-top: 16px; }
.contribution-panel h2 { margin: 10px 0 4px; font-size: 1.1rem; }
.contribution-panel .memory-message, .contribution-panel .compact-tribute { padding: 10px 0; }
.contribution-panel .memory-message p, .contribution-panel .compact-tribute p { margin: 0 0 6px; line-height: 1.5; font-size: .96rem; }
.contribution-panel .read-more-button { margin: 0; }
.compact-tribute img { width: 52px; height: 60px; object-fit: contain; }
.category-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; overflow: visible; margin: 12px 0; padding: 0; }
.category-chips button { min-width: 0; min-height: 44px; padding: 9px 4px; border: 1px solid var(--legacy-line); background: #fffdf8; border-radius: 9px; font-size: .86rem; }
.category-chips button.active { border-color: #243e36; background: #dce5dc; color: #1a3029; }
.category-chips img { display: none; }
.flower-screen .flower-intro { margin-bottom: 10px; }
.flower-screen .flower-section-heading h2 { font-size: 1.1rem; }
.flower-screen .legacy-flower-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.flower-screen .legacy-flower-item { min-height: 0; padding: 10px; }
.flower-screen .legacy-flower-item img { height: 92px; width: 100%; object-fit: contain; }
.flower-screen .legacy-flower-item strong { font-size: .94rem; line-height: 1.35; white-space: normal; }
.flower-screen .legacy-flower-item em { font-size: .92rem; }
.compact-flower-summary { margin: 10px 0; font-size: .9rem; line-height: 1.5; }
.flower-screen .sticky-action { max-width: 480px; bottom: max(12px, env(safe-area-inset-bottom)); }
.profile-card h2 { margin: 0; font-size: 1.3rem; }
.profile-card p { margin-block: 6px; }
.profile-memory-list, .profile-reminders { margin-block: 14px; }
.profile-memory-item, .reminder-item { padding-block: 12px; }
.profile-identity { margin-block: 0 12px; font-size: .92rem; }
.profile-purchases { margin-block: 12px; padding: 12px; gap: 8px; }
.profile-purchases h2, .profile-reminders h2 { margin-block: 0; font-size: 1.15rem; }
.profile-purchases .profile-memory-list { margin: 0; }
.profile-purchases .profile-memory-item { padding-block: 4px; border: 0; }
.profile-purchases .pager { margin-block: 6px 0; }
.access-panel { margin-block: 14px; padding: 16px; }
.create-form { gap: 8px; }
.create-form .legacy-field, .create-form > .field-help, .create-form .legal-check { margin: 0; }
.create-form .legacy-field .field-help { margin: 4px 0 0; }
.create-form .compact-disclosure { margin-block: 2px; }
.create-form .compact-disclosure[open] { padding-bottom: 10px; }
.create-form .compact-disclosure .legal-check { margin-top: 10px; }
.create-form .form-section-title { margin-block: 8px 2px; }
.help-screen .help-list { gap: 8px; }
.help-screen .help-card { display: block; padding: 0 12px; margin: 0; }
.help-screen .help-card summary { padding-block: 11px; min-height: 44px; }
.help-screen .help-card p { margin: 0 0 10px; }
.help-support-link { display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 0 0 12px; text-align: center; text-decoration: none; }
.help-screen .legal-links { margin-top: 10px; }
.help-screen .legal-links button { min-height: 44px; }
.visibility-badge { display: inline-block; width: fit-content; padding: 3px 8px; border-radius: 6px; background: #e5ebe2; color: #1a3029; font-size: .78rem; font-weight: 600; }
.demo-memory-note { padding: 8px 10px; margin-bottom: 10px; border-left: 3px solid #8e9b86; background: #e5ebe2; color: #1a3029; font-size: .85rem; line-height: 1.4; }
.demo-memory-note p { margin: 3px 0 0; }
.hidden-memory-banner { padding: 14px; border: 1px solid #cbd7ca; border-radius: 10px; background: #e9eee5; }
.hidden-memory-banner p { margin: 6px 0 10px; font-size: .93rem; line-height: 1.5; }
.hidden-memory-banner button { width: 100%; }
.lifecycle-disclosure { margin-top: 14px; }
.lifecycle-options { display: grid; gap: 8px; }
.lifecycle-options button { width: 100%; }
.lifecycle-panel { margin-top: 10px; padding: 14px; border: 1px solid #cbd7ca; border-radius: 10px; background: #fffdf8; }
.lifecycle-panel h3 { margin: 0 0 8px; font-size: 1.1rem; overflow-wrap: anywhere; }
.lifecycle-panel p { margin: 8px 0; font-size: .93rem; line-height: 1.5; }
.lifecycle-panel input { width: 100%; min-height: 48px; margin: 6px 0 12px; padding: 10px 12px; border: 1px solid #8e9b86; border-radius: 8px; background: #fff; font: inherit; }
.lifecycle-panel .memory-management-actions { display: grid; grid-template-columns: 1fr; }
.lifecycle-panel button { min-height: 48px; }
.lifecycle-panel > button { width: 100%; margin-top: 8px; }
.lifecycle-panel button:disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 360px) {
  .nav-header h1 { font-size: 1.2rem; white-space: normal; line-height: 1.2; }
  .compact-memory-header { gap: 12px; }
  .compact-memory-portrait { width: 72px; height: 96px; }
  .compact-memory-identity h2 { font-size: 1.55rem; }
  .category-chips { gap: 4px; }
  .category-chips button { font-size: .8rem; }
  .contribution-tabs button { font-size: .8rem; }
  .pager { gap: 4px; }
  .pager button { min-width: 64px; padding-inline: 7px; }
}

/* The mobile composition. Keep data-heavy sections bounded and controls reachable. */
:root {
  --forest: #243e36;
  --sage: #dce5dc;
  --bronze: #a78350;
  --serif: Georgia, "Times New Roman", serif;
  --ink: #263d35;
  --paper: #f7f5ef;
  --surface: #fffdf8;
  --muted: #626c63;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
html, body { background: #e9ece5; }
body { line-height: 1.5; }
button, input, textarea { font-family: inherit; }
button { touch-action: manipulation; }
svg { flex-shrink: 0; stroke-width: 1.65; }
.mobile-shell { width: 100%; max-width: 520px; min-height: 100svh; background: var(--paper); box-shadow: 0 0 70px #243e3609; }
.app-screen { min-height: 100svh; padding: 14px 20px 30px; }
.app-screen.with-tabbar { padding-bottom: calc(94px + env(safe-area-inset-bottom)); }
.app-header { min-height: 48px; margin-bottom: 16px; border-bottom: 1px solid var(--legacy-line); padding-bottom: 10px; }
.app-header h1 { font-family: var(--serif); font-size: 1.5rem; font-weight: 400; letter-spacing: -.025em; }
.app-header.centered-title { justify-content: flex-start; text-align: left; }
.nav-header { grid-template-columns: 40px minmax(0, 1fr) 40px; text-align: left; gap: 8px; }
.nav-header h1 { font-size: 1.35rem; white-space: normal; }
.back-button { width: 40px; height: 44px; min-height: 44px; border: 0; background: transparent; box-shadow: none; }
.header-sprig { width: 26px; height: 36px; justify-self: end; }
.brand-masthead { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--legacy-line); }
.brand-wordmark { display: inline-flex; gap: 9px; align-items: center; color: var(--forest); text-decoration: none; white-space: nowrap; }
.brand-wordmark img { width: 26px; height: 36px; }
.brand-wordmark span { font: 1.55rem/1.1 var(--serif); letter-spacing: -.04em; }
.brand-thought { color: var(--muted); font: italic .69rem/1.4 var(--serif); }
.memories-intro { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.memories-intro > div { flex: 1; }
.memories-intro h1 { margin: 0; color: var(--forest); font: 400 clamp(2.15rem, 10vw, 2.8rem)/1.02 var(--serif); letter-spacing: -.04em; }
.memories-intro p { margin: 10px 0 0; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.memories-intro > img { width: 100px; height: 134px; object-fit: cover; object-position: 28% center; border-radius: 80px 80px 8px 8px; }
.legacy-search { min-height: 50px; margin-bottom: 19px; border: 1px solid #cbd4c9; border-radius: 12px; background: #fffdf8; box-shadow: 0 3px 10px #243e3603; }
.legacy-search:focus-within { border-color: var(--forest); outline: 2px solid #b8caba; outline-offset: 2px; }
.legacy-search input { font-size: 1rem; box-shadow: none; }
.legacy-search input:focus { box-shadow: none; }
.list-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 2px; }
.list-heading h2 { flex-shrink: 0; margin: 0; font: 400 1.1rem/1.3 var(--serif); letter-spacing: -.02em; }
.list-heading > span { height: 1px; background: var(--legacy-line); flex: 1; }
.home-list { gap: 0; }
.legacy-memory-card { position: relative; grid-template-columns: 74px minmax(0, 1fr) 14px; align-items: center; gap: 12px; padding: 10px 0; min-height: 100px; border: 0; border-bottom: 1px solid var(--legacy-line); border-radius: 0; background: transparent; box-shadow: none; }
.legacy-memory-card:hover { background: #e8eee455; }
.legacy-memory-card:active { background: #dce5dc; }
.legacy-photo { align-self: center; width: 74px; height: 80px; min-height: 0; border-radius: 40px 40px 5px 5px; background: #dce5dc; }
.legacy-photo img { object-fit: cover; object-position: center 30%; }
.legacy-memory-copy { gap: 4px; }
.memory-title-line { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.legacy-memory-copy strong { display: block; flex: 1 1 auto; font: 400 1.18rem/1.15 var(--serif); letter-spacing: -.02em; overflow-wrap: anywhere; }
.legacy-memory-copy small { font-size: .74rem; color: var(--muted); font-weight: 400; }
.legacy-memory-copy em { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow: hidden; color: #57665a; font: .86rem/1.35 var(--serif); }
.visibility-badge { display: inline-block; padding: 2px 5px; border-radius: 4px; background: #e6e9e0; color: #506451; font-size: .61rem; font-weight: 500; line-height: 1.25; }
.memory-chevron { transform: rotate(180deg); color: #6d7c6c; }
.memory-chevron svg { width: 16px; height: 16px; }
.memory-initials { min-height: 0; width: 100%; height: 100%; font: 1.6rem var(--serif); color: #546a55; }
.legacy-empty { padding: 28px 18px; gap: 10px; background: #edf0e7; border-radius: 12px; margin-block: 14px; }
.legacy-empty svg { width: 28px; height: 28px; }
.legacy-empty strong { font: 1.15rem var(--serif); color: var(--forest); }
.legacy-empty p { margin: 0; font-size: .9rem; }
.create-invitation { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 80px; margin-top: 18px; padding: 13px 14px; text-align: left; border-radius: 10px; overflow: hidden; background: #e0e7db; color: var(--forest); }
.create-invitation > span { position: relative; z-index: 1; }
.create-invitation strong { display: block; font: 1.18rem/1.25 var(--serif); letter-spacing: -.02em; }
.create-invitation span span { display: flex; align-items: center; gap: 10px; margin-top: 7px; font-size: .8rem; }
.create-invitation svg { width: 17px; height: 17px; }
.create-invitation > img { width: 82px; height: 86px; align-self: stretch; margin: -13px -14px -13px 8px; object-fit: cover; object-position: 20% center; border-radius: 48px 0 0 0; }
.legacy-primary, .legacy-secondary, .legacy-danger { gap: 8px; font-size: .93rem; font-weight: 550; border-radius: 10px; }
.legacy-primary { box-shadow: 0 4px 12px #243e3610; }
.legacy-secondary { background: #e2e9de; border-color: #d5dece; }
.legacy-primary svg, .legacy-secondary svg { width: 19px; height: 19px; }
.legacy-tabbar { max-width: 520px; min-height: 75px; padding: 6px 10px calc(7px + env(safe-area-inset-bottom)); background: rgba(247,245,239,.98); border-top: 1px solid #d7ded2; box-shadow: 0 -5px 18px #243e3605; }
.legacy-tabbar button { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 4px; border-radius: 10px; font-size: .67rem; color: #697266; min-height: 58px; }
.legacy-tabbar button.active { background: transparent; color: var(--forest); font-weight: 700; }
.legacy-tabbar button svg { width: 23px; height: 23px; }
.legacy-tabbar button.active svg { stroke-width: 2; background: #dce5dc; box-shadow: 0 0 0 6px #dce5dc; border-radius: 10px; }
.legacy-tabbar button span { margin-top: 3px; }
/* Memorial: a personal portrait, words, then simple ways to participate. */
.detail-screen .app-header { margin-bottom: 10px; }
.demo-memory-note { font-size: .68rem; line-height: 1.4; padding: 5px 8px; border-left: 2px solid #97a58f; border-radius: 0 5px 5px 0; background: #e8ece2; margin-bottom: 14px; color: #5b6b58; }
.compact-detail { gap: 13px; }
.compact-memory-header { position: relative; isolation: isolate; grid-template-columns: 104px minmax(0, 1fr); gap: 15px; align-items: end; padding: 15px 0 3px; min-height: 146px; }
.compact-memory-header::before { content: ""; position: absolute; z-index: -1; inset: 0 -20px 45px; background: #e1e8dd; }
.compact-memory-header::after { content: ""; position: absolute; z-index: -1; top: 0; right: -20px; width: 130px; height: 74px; background: url('../assets/brand/olive-remembrance.webp') center / cover; opacity: .3; mask-image: linear-gradient(90deg, transparent, #000); }
.compact-memory-portrait { width: 104px; height: 128px; border-radius: 65px 65px 6px 6px; background: #dce5dc; border: 3px solid var(--paper); }
.compact-memory-portrait .detail-photo { object-fit: cover; object-position: center 30%; }
.compact-memory-identity { padding: 20px 0 3px; }
.compact-memory-identity h2 { font: 400 clamp(1.6rem, 7vw, 2rem)/1.04 var(--serif); letter-spacing: -.03em; margin-bottom: 8px; }
.compact-memory-identity p { color: var(--muted); font-size: .83rem; }
.compact-memory-identity small { display: block; font-size: .72rem; line-height: 1.4; color: var(--muted); margin-top: 7px; }
.detail-memory-words { position: relative; border: 0; padding: 8px 10px 8px 19px; margin: 0; background: transparent; }
.detail-memory-words::before { content: "“"; position: absolute; left: -2px; top: 2px; font: 2.6rem var(--serif); color: var(--bronze); }
.detail-memory-words p { font: 1.12rem/1.5 var(--serif); color: #344b40; }
.detail-utilities { gap: 0; border-block: 1px solid var(--legacy-line); padding: 3px 0; }
.detail-utilities button { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 7px; background: transparent; color: var(--forest); font-size: .78rem; border-radius: 6px; }
.detail-utilities button + button { border-left: 1px solid var(--legacy-line); border-radius: 0; }
.detail-utilities svg { width: 17px; height: 17px; }
.detail-utilities button:hover { background: #e5ebe2; }
.compact-actions { gap: 8px; }
.compact-actions button { font-size: .84rem; padding-inline: 9px; min-height: 48px; }
.compact-actions.single-action { grid-template-columns: 1fr; }
.contribution-panel { margin-top: 21px; }
.contribution-tabs { border: 0; border-bottom: 1px solid var(--legacy-line); border-radius: 0; padding: 0; gap: 0; background: transparent; margin-bottom: 15px; }
.contribution-tabs button { border-radius: 0; border-bottom: 2px solid transparent; color: #687363; font-family: var(--serif); font-size: 1rem; padding: 8px 4px; }
.contribution-tabs button.active, .contribution-tabs button[aria-pressed="true"] { background: transparent; border-bottom-color: var(--forest); color: var(--forest); box-shadow: none; font-weight: 400; }
.contribution-tabs button span { display: inline-block; padding: 0 4px; margin-left: 3px; background: #e3e9dd; border-radius: 4px; color: #596a55; font: .7rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.contribution-panel h2 { font: 1.1rem var(--serif); margin-bottom: 12px; }
.contribution-items { display: grid; gap: 10px; }
.contribution-panel .memory-message { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 13px 12px; border: 0; border-radius: 10px; background: #fffdf8; }
.message-avatar { width: 34px; height: 34px; display: grid; place-items: center; background: #dce5dc; border-radius: 50%; color: #47603f; font: 1.1rem var(--serif); }
.message-body { min-width: 0; }
.memory-message footer { gap: 4px 8px; justify-content: space-between; margin: 0 0 5px; }
.memory-message footer strong { color: var(--forest); font: .88rem var(--serif); }
.memory-message time { font-size: .7rem; color: #626c63; }
.contribution-panel .memory-message p { font: .92rem/1.5 var(--serif); margin-bottom: 0; }
.contribution-panel .compact-tribute { padding: 12px; border: 0; border-radius: 10px; background: #fffdf8; }
.contribution-items > .field-help { display: block; margin: 0; padding: 20px 16px; border-radius: 10px; border: 1px dashed #cbd7c5; background: #edf0e7; line-height: 1.6; }
.message-form, .anniversary-form { padding: 16px; border: 1px solid #d6dfce; border-radius: 12px; background: #edf1e8; }
.read-more-button { color: var(--forest); }
.cover-screen { display: block; padding-top: 14px; }
.cover-botanical { width: calc(100% + 40px); max-width: none; height: 260px; object-fit: cover; margin: 0 -20px 23px; border-radius: 0 0 50% 8% / 0 0 5% 3%; }
.cover-copy h1 { margin: 0; text-align: center; font: 2.3rem var(--serif); color: var(--forest); letter-spacing: -.04em; }
.cover-copy p { font-size: .95rem; line-height: 1.55; text-align: center; margin: 10px 0 22px; }
.cover-actions { display: grid; gap: 10px; }
.cover-free { text-align: center; font-size: .78rem; color: var(--muted); margin: 13px 0; }
.cover-links { display: flex; justify-content: center; gap: 9px; margin-top: 18px; }
.cover-links button { padding: 7px; min-height: 44px; font-size: .75rem; }
.profile-intro { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; }
.profile-intro-icon { display: grid; place-items: center; width: 48px; height: 54px; flex-shrink: 0; border-radius: 28px 28px 6px 6px; background: #dce5dc; }
.profile-intro h2, .help-intro h2 { margin: 0; font: 1.5rem/1.15 var(--serif); letter-spacing: -.03em; }
.profile-intro p, .help-intro p { margin: 7px 0 0; font-size: .85rem; color: var(--muted); line-height: 1.5; }
.help-intro { margin-bottom: 20px; padding: 5px 0 10px; }
.preview-screen > .legacy-secondary { margin-top: 10px; }
.toast { right: max(16px, calc((100vw - 520px) / 2 + 16px)); max-width: calc(100vw - 32px); }
@media (min-width: 760px) {
  .app-screen { padding-inline: 28px; }
  .compact-memory-header::before { inset-inline: -28px; }
  .compact-memory-header::after { right: -28px; }
  .legacy-memory-card { grid-template-columns: 82px minmax(0, 1fr) 16px; }
  .legacy-photo { width: 82px; height: 96px; }
  .memories-intro > img { width: 120px; height: 144px; }
  .cover-botanical { width: calc(100% + 56px); margin-inline: -28px; }
}
@media (max-width: 360px) {
  .app-screen { padding-inline: 16px; }
  .brand-wordmark span { font-size: 1.4rem; }
  .brand-thought { font-size: .63rem; }
  .memories-intro > img { width: 84px; height: 120px; }
  .memories-intro h1 { font-size: 2.2rem; }
  .legacy-memory-card { grid-template-columns: 62px minmax(0, 1fr) 12px; gap: 9px; }
  .legacy-photo { width: 62px; height: 80px; }
  .legacy-memory-copy strong { font-size: 1.06rem; }
  .legacy-memory-copy em { font-size: .79rem; }
  .compact-memory-header { grid-template-columns: 86px minmax(0, 1fr); gap: 12px; }
  .compact-memory-header::before { inset-inline: -16px; }
  .compact-memory-header::after { right: -16px; }
  .compact-memory-portrait { width: 86px; height: 116px; }
  .compact-memory-identity h2 { font-size: 1.55rem; }
  .compact-actions button { font-size: .76rem; gap: 5px; }
  .create-invitation strong { font-size: 1.06rem; }
  .cover-botanical { width: calc(100% + 32px); margin-inline: -16px; }
}

.loading-screen img { filter: none; width: 64px; height: 86px; }
.loading-screen h1 { font: 2rem var(--serif); font-weight: 400; }