/* main.css — base layer, iPhone/iPad baseline, menu, motion and component
   styles. Tailwind utilities come from the Play CDN (configured in index.html);
   this file holds what utilities can't express cleanly.

   "Desktop" below always means the same media query as Tailwind's lg/xl
   screens in index.html: a wide screen WITH a mouse. iPads (touch) get the
   bottom bar at every width (PWA-CHECKLIST 1A). */

/* ---- Base + iOS baseline (PWA-CHECKLIST 1A) ------------------------------ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: clip; }
[hidden] { display: none !important; }
body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
  font-synthesis-weight: none;
}
.font-serif { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; }
.font-sans { font-family: 'DM Sans', system-ui, sans-serif; }
h1, h2, h3 { color: var(--heading); }
.tabular-nums { font-variant-numeric: tabular-nums lining-nums; }

/* Date and time boxes: iOS draws them at its own width and ignores width:100% */
input[type="date"], input[type="time"], input[type="datetime-local"],
input[type="month"], input[type="week"] {
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; min-width: 0; max-width: 100%; text-align: left;
}
input::-webkit-date-and-time-value { text-align: left; margin: 0; min-height: 1.25em; }
.field > * { min-width: 0; max-width: 100%; }

/* iOS zooms in on any field under 16px */
@media (pointer: coarse) { input, select, textarea, [contenteditable] { font-size: max(16px, 1rem); } }

button, [role="button"], a, label { touch-action: manipulation; }

/* Long pasted values (URLs, account notes) wrap instead of pushing the page */
.wrap-any { overflow-wrap: anywhere; word-break: normal; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }

/* Focus — visible ring on every interactive element */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [contenteditable]:focus-visible,
[role='switch']:focus-visible, [role='button']:focus-visible, summary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Shadows — soft, never harsh */
.shadow-soft { box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 6px 20px -8px rgba(0,0,0,0.10); }
.shadow-lifted { box-shadow: 0 4px 12px -4px rgba(0,0,0,0.10), 0 20px 40px -16px rgba(0,0,0,0.22); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-accent) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-accent); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }

/* ---- Menu (planner-theme-palettes: light shade, deep same-hue text) ------ */
.lv-nav { background: var(--nav-bg); color: var(--nav-text); }
.lv-stripe { height: 6px; background: var(--brand-stripe); }
[data-theme="blush"] .lv-stripe, [data-theme="neutral"] .lv-stripe, [data-theme="dark"] .lv-stripe,
:root:not([data-theme]) .lv-stripe { display: none; }
.lv-nav-item { color: var(--nav-text); border-radius: 12px; }
.lv-nav-item .lv-nav-icon, .lv-nav-head .lv-nav-icon { color: var(--nav-icon); }
.lv-nav-item[aria-current="page"] {
  background: var(--nav-active-bg); color: var(--nav-active-text); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--accent-1-deep);
}
.lv-nav-head { color: var(--nav-text); border-radius: 12px; }
.lv-nav-sub { border-color: color-mix(in srgb, var(--nav-text) 18%, transparent); }
@media (hover: hover) {
  .lv-nav-item:hover:not([aria-current="page"]), .lv-nav-head:hover { background: var(--nav-hover-bg); }
}
/* Rainbow Pastel signature: category icons cycle through the six hues */
[data-theme="rainbow-pastel"] .lv-nav-group:nth-child(6n+1) .lv-nav-head .lv-nav-icon { color: var(--chip-1-text); }
[data-theme="rainbow-pastel"] .lv-nav-group:nth-child(6n+2) .lv-nav-head .lv-nav-icon { color: var(--chip-2-text); }
[data-theme="rainbow-pastel"] .lv-nav-group:nth-child(6n+3) .lv-nav-head .lv-nav-icon { color: var(--chip-3-text); }
[data-theme="rainbow-pastel"] .lv-nav-group:nth-child(6n+4) .lv-nav-head .lv-nav-icon { color: var(--chip-4-text); }
[data-theme="rainbow-pastel"] .lv-nav-group:nth-child(6n+5) .lv-nav-head .lv-nav-icon { color: var(--chip-5-text); }
[data-theme="rainbow-pastel"] .lv-nav-group:nth-child(6n+6) .lv-nav-head .lv-nav-icon { color: var(--chip-6-text); }

/* Bottom bar: same breakpoint as the side menu, safe area added to its height */
.lv-bottom-nav { height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
.lv-bottom-nav button { color: var(--nav-text); -webkit-touch-callout: none; user-select: none; }
.lv-bottom-nav button[aria-current="page"] { color: var(--nav-active-text); font-weight: 600; }
.lv-bottom-nav button[aria-current="page"] .lv-tab-pill { background: var(--nav-active-bg); box-shadow: inset 0 -3px 0 var(--accent-1-deep); }
.lv-tab-pill { display: grid; place-items: center; width: 52px; height: 30px; border-radius: 999px; }
#outlet { padding-bottom: calc(104px + env(safe-area-inset-bottom)); }
.fab-dash, .fab-add { bottom: calc(80px + env(safe-area-inset-bottom)); }
body.sheet-open .lv-bottom-nav, body.sheet-open .fab-dash, body.sheet-open .fab-add { display: none; }

@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  #outlet { padding-bottom: 40px; }
  .fab-dash { bottom: 24px; }
  .fab-add { display: none; }
}

/* Toasts sit above the bottom bar and never catch its taps */
#toast-container { bottom: calc(76px + env(safe-area-inset-bottom)); pointer-events: none; }
#toast-container .toast { pointer-events: none; }
#toast-container .toast button { pointer-events: auto; }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) { #toast-container { bottom: 0; } }

/* Pop-ups and sheets: never taller than the visible screen (iOS vh trap) */
.sheet-max { max-height: 92vh; max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - 8px); overscroll-behavior: contain; }
.sheet-body { overscroll-behavior: contain; }

/* Warm module pages get a soft accent wash behind the content */
.warm-page { background: linear-gradient(180deg, var(--callout-bg) 0%, transparent 260px); border-radius: 24px; }

/* Rich-text rendering of stored HTML (letters, story, obituary) */
.prose-note { line-height: 1.7; }
.prose-note p { margin: 0 0 0.75rem; }
[data-rich]:empty::before { content: attr(data-placeholder); color: var(--text-muted); }

/* Checklist row actions: always visible (there is no hover on a phone) */
.row-action { opacity: 0.6; }
@media (hover: hover) { .row-action { opacity: 0; } .group:hover .row-action, .row-action:focus-visible { opacity: 1; } }

/* Progress fills (gradient on Rainbow Pastel) */
.lv-progress { background: var(--progress-track); }
.lv-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--mark-2); }
[data-theme="rainbow-pastel"] .lv-progress > span { background: var(--progress-fill); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-edge) 35%, transparent); }

/* Chips */
.lv-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 10px; font-size: 0.75rem; font-weight: 600; line-height: 1.3; }
.lv-chip-1 { background: var(--chip-1-bg); color: var(--chip-1-text); }
.lv-chip-2 { background: var(--chip-2-bg); color: var(--chip-2-text); }
.lv-chip-3 { background: var(--chip-3-bg); color: var(--chip-3-text); }
.lv-chip-4 { background: var(--chip-4-bg); color: var(--chip-4-text); }
.lv-chip-ok { background: var(--success-bg); color: var(--success-text); }
.lv-chip-warn { background: var(--warning-bg); color: var(--warning-text); }
.lv-chip-danger { background: var(--danger-bg); color: var(--danger-text); }

/* Alerts */
.lv-alert-warn { background: var(--warning-bg); color: var(--warning-text); border: 1px solid color-mix(in srgb, var(--warning-text) 20%, transparent); }
.lv-alert-info { background: var(--info-bg); color: var(--info-text); border: 1px solid color-mix(in srgb, var(--info-text) 18%, transparent); }
.lv-alert-ok { background: var(--success-bg); color: var(--success-text); border: 1px solid color-mix(in srgb, var(--success-text) 18%, transparent); }
.lv-alert-danger { background: var(--danger-bg); color: var(--danger-text); border: 1px solid color-mix(in srgb, var(--danger-text) 20%, transparent); }
.lv-callout { background: var(--callout-bg); border: 1.5px solid var(--callout-border); }

/* Ghost button */
.btn-ghost { color: var(--btn-ghost-text); border: 1px solid var(--btn-ghost-border); background: transparent; }
@media (hover: hover) { .btn-ghost:hover { background: var(--surface-alt); } }

/* Checkboxes (checklists, handbook) */
.lv-check { border: 2px solid var(--btn-ghost-border); color: transparent; }
.lv-check[aria-pressed="true"], .lv-check[aria-checked="true"] { background: var(--accent-2); border-color: var(--accent-2); color: var(--btn-primary-text); }
.lv-done { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--border-accent); }

/* Free demo (inert in the paid app: only the demo build adds html.is-demo) */
html.is-demo .demo-hide { display: none !important; }

/* Page loading bar (only after 0.4s) */
body.lv-loading::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 160; background: var(--mark); animation: lvLoad 1.2s ease-in-out infinite; transform-origin: left; }
@keyframes lvLoad { 0% { transform: scaleX(0.05); } 50% { transform: scaleX(0.6); } 100% { transform: scaleX(0.95); opacity: .4; } }

/* Lock screen */
#lock-screen { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: grid; place-items: center; padding: 24px; overflow-y: auto; }
body.is-locked #app, body.is-locked #toast-container { visibility: hidden; }

/* Attachments */
.lv-thumb { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--surface-alt); border: 1px solid var(--border); flex: none; }

/* ---- Motion -------------------------------------------------------------- */
@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.card-enter { animation: cardIn 180ms ease-out both; }
.no-anim .card-enter { animation: none; }

.backdrop-fade { animation: fade 160ms ease-out; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* Form sheet: slide from bottom (touch / narrow) or right (desktop) */
.form-sheet { transform: translateY(100%); transition: transform 260ms cubic-bezier(0.22,1,0.36,1); }
.form-sheet.form-sheet-in { transform: translateY(0); }
.form-sheet.form-sheet-out { transform: translateY(100%); }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .form-sheet { transform: translateX(100%); }
  .form-sheet.form-sheet-in { transform: translateX(0); }
  .form-sheet.form-sheet-out { transform: translateX(100%); }
}

.sheet-in { animation: sheetIn 200ms cubic-bezier(0.22,1,0.36,1) both; }
@keyframes sheetIn { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }

.toast { opacity: 0; transform: translateY(12px); transition: opacity 220ms ease, transform 220ms ease; }
.toast.toast-in { opacity: 1; transform: none; }
.toast.toast-out { opacity: 0; transform: translateY(12px); }

.check, .lv-check { transition: transform 140ms cubic-bezier(0.34,1.56,0.64,1), background-color 140ms, border-color 140ms; }
.lv-check[aria-pressed='true'] { animation: pop 200ms cubic-bezier(0.34,1.56,0.64,1); }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }

.skeleton { background: linear-gradient(90deg, var(--surface-alt) 25%, var(--surface) 37%, var(--surface-alt) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease-in-out infinite; border-radius: 12px; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .form-sheet { transition: none; }
}

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Dashboard welcome panel (pwa-dashboard-illustration) ------------------
   A size container: the layout follows the PANEL's width, not the screen's
   (the side menu takes a different share at each size). */
.lv-hero { container-type: inline-size; background: var(--hero-bg); border: 1.5px solid var(--hero-border); border-radius: 24px; }
.lv-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 120px; grid-template-areas: "text art" "foot foot"; gap: 16px 12px; padding: 20px; align-items: center; }
.lv-hero-text { grid-area: text; min-width: 0; }
.lv-hero-art { grid-area: art; min-width: 0; align-self: center; }
.lv-hero-foot { grid-area: foot; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.lv-hero-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lv-hero-cta { align-self: stretch; }
.lv-hero-eyebrow { background: var(--hero-eyebrow-bg); color: var(--hero-eyebrow-text); }
.lv-hero-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 10px 12px; min-width: 0; }
@container (min-width: 600px) {
  .lv-hero-grid { grid-template-columns: minmax(0, 1fr) clamp(220px, 34cqw, 280px); padding: 28px; }
  .lv-hero-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lv-hero-cta { align-self: flex-start; }
}
@container (min-width: 880px) {
  .lv-hero-grid { grid-template-columns: minmax(0, 1fr) clamp(320px, 36cqw, 400px); grid-template-areas: "text art" "foot art"; }
  .lv-hero-art { align-self: end; }
}
.lv-art { width: 100%; height: auto; display: block; overflow: visible; }
.lv-art-glow { fill: var(--art-glow); }
.lv-art-shadow { fill: var(--art-shadow); opacity: .08; }
.lv-art-page { fill: var(--art-page); }
.lv-art-page2 { fill: var(--art-page2); }
.lv-art-ink { fill: var(--art-ink); opacity: .16; }
.lv-art-seal { fill: var(--art-seal); }
.lv-art-box { fill: var(--art-box); }
.lv-art-lid { fill: var(--art-lid); }
.lv-art-band { fill: var(--art-band); opacity: .55; }
.lv-art-clasp { fill: var(--art-clasp); }
rect.lv-art-fold { fill: var(--art-fold); opacity: .07; }
path.lv-art-fold { fill: none; stroke: var(--art-fold); stroke-width: 2; stroke-linejoin: round; opacity: .12; }
.lv-art-envelope { fill: var(--art-envelope); }
.lv-art-heart { fill: var(--art-heart); }
.lv-art-pot { fill: var(--art-pot); }
.lv-art-leaf { fill: var(--art-leaf); }
.lv-art-leaf2 { fill: var(--art-leaf2); }
.lv-art-spark { fill: var(--art-spark); }
.lv-art-twinkle { animation: lvTwinkle 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.lv-art-twinkle--late { animation-delay: 3s; }
@keyframes lvTwinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
@media (prefers-reduced-motion: reduce) { .lv-art-twinkle { animation: none; } }

/* Segmented status buttons (Digital Legacy Guide) */
.lv-seg { background: var(--surface); color: var(--text); }
.lv-seg[aria-pressed="true"] { background: var(--chip-2-bg); color: var(--chip-2-text); border-color: var(--accent-2); font-weight: 600; }
@media (hover: hover) { .lv-seg:hover:not([aria-pressed="true"]) { background: var(--surface-alt); } }

/* ---- ICE wallet card (screen preview; real print size in print.css) -------
   The card is always light ink on white, whatever the theme. */
.ice-card { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; min-width: 0; max-width: 100%; }
.ice-face { width: 324px; max-width: 100%; min-height: 204px; border-radius: 14px; border: 1.5px solid var(--border-accent); background: #FFFFFF; color: #23262B; padding: 12px 14px; font-size: 0.75rem; line-height: 1.35; overflow: hidden; }
.ice-band { margin: -12px -14px 8px; padding: 6px 14px; background: #F6DCDD; color: #8E3E48; font-weight: 700; letter-spacing: .06em; font-size: 0.75rem; }
.ice-name { font-family: 'DM Serif Display', Georgia, serif; font-size: 1.25rem; line-height: 1.15; overflow-wrap: anywhere; }
.ice-meta { color: #5B5257; margin-bottom: 6px; }
.ice-label { font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 0.625rem; color: #5B5257; margin-top: 6px; }
.ice-alert { color: #8E3E48; }
.ice-list { list-style: none; margin: 2px 0 0; padding: 0; overflow-wrap: anywhere; }
.ice-cols { columns: 2; column-gap: 10px; }
.ice-more { color: #5B5257; font-style: italic; }
.ice-extra { margin-top: 8px; font-style: italic; color: #5B5257; }