/* Screen-size behavior is kept together so tablet/phone rules don't compete. */
:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --mobile-nav-height: 76px;
  --mobile-nav-space: calc(var(--mobile-nav-height) + var(--safe-bottom));
  -webkit-text-size-adjust: 100%;
}

/* Intrinsic widths must never let a filename, nickname or date stretch a grid. */
body { min-height: 100svh; }
.app-guide-heading { display: flex; align-items: center; gap: 16px; }
.app-guide-heading img { flex: 0 0 64px; border-radius: 14px; }
.app-guide-heading h2 { margin-bottom: 5px; }
.app-guide-heading p { margin: 0; }
.app-guide-steps { padding-left: 1.35em; color: var(--muted); line-height: 1.8; }
.app-guide-steps li + li { margin-top: 8px; }
.standalone-app body { min-height: 100dvh; }
.quote-editor, .quote-entry { padding: clamp(20px, 4vw, 32px); }
.quote-library { margin-top: 32px; }
.quote-entry { margin-top: 16px; }
.quote-entry-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1.1rem; line-height: 1.9; }
.daily-quote [hidden] { display: none; }
@media (display-mode: standalone) {
  html { background: #101a22; }
  body { min-height: 100dvh; }
}
.home-grid > *, .home-aside > *, .auth-container > *, .form-row > *,
.settings-grid > *, .notes-layout > *, .wish-grid > *, .gallery-grid > *,
.page-heading > *, .section-heading > *, .first-memory > *,
.home-hero > *, .note-head > *, .anniversary-row > *, .upload-item > * {
  min-width: 0;
}
.hero-caption, .memory-card h3, .note-title, .gallery-caption,
.wish-card, .tag, .detail-media .eyebrow, .note-head, .anniversary-row,
.errorlist, .notice, .help, .upload-status, .auth-footnote {
  overflow-wrap: anywhere;
}
.field input, .field select, .field textarea, .filter-select,
input[type=date], input[type=month] {
  max-width: 100%;
  min-inline-size: 0;
}
.field input:not([type=checkbox]), .field select { min-height: 48px; }
input[type=date]::-webkit-date-and-time-value,
input[type=month]::-webkit-date-and-time-value { text-align: left; }
.form-row, .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.upload-item { grid-template-columns: 50px minmax(0, 1fr) auto; }
.upload-actions { gap: 8px; }
.original-choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  cursor: pointer;
}
.original-choice > input { width: 20px; height: 20px; flex: 0 0 20px; margin: 3px 0; }
.original-choice .help { display: block; margin-top: 4px; }
.topbar .nav-create, .nav-icon { display: none; }
.nav-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.page-heading > .button, .page-heading > form, .setting-row > form,
.section-heading > .button { flex-shrink: 0; }
.tag { max-width: 100%; }
.gallery-grid > .empty, .wish-grid > .empty { grid-column: 1 / -1; }
.detail-media img, .detail-media video { max-width: 100%; }

/* Finger-sized hit areas also apply to tablets with a desktop-width layout. */
@media (pointer: coarse), (max-width: 760px) {
  .new-button, .settings-link, .topbar nav a, .quiet-link, .theme-switch button,
  .view-tabs a, .idea button, .setting-row button, .upload-item button,
  .action-bar .button, .text-button, .pagination > a, .footer-right > a,
  .section-heading > a, .memory-card h3 a, .wish-card h3 a, .tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }
  details > summary { min-height: 44px; padding-block: 10px; }
  .check-group label { min-height: 44px; }
  .filters-panel label.row { min-height: 44px; }
  .field input, .field textarea, .field select, .filter-bar input, .filter-select,
  .upload-zone input { font-size: max(1rem, 16px); }
  .help, .upload-zone small, .upload-item .file-name, .upload-item .upload-status,
  .upload-item button, .idea button, .view-tabs a, .setting-row button,
  .text-button, .section-heading > a, .theme-switch button, .panel-tail,
  .status, .footer, .auth-footnote { font-size: .875rem; }
  .meta, .gallery-caption p, .setting-row small, .memory-date > small,
  .idea-copy small, .idea .added, .eyebrow { font-size: .75rem; }
  .button { min-height: 48px; }
}

@media (min-width: 1600px) {
  .landscape { background-position: center 57%; }
}

/* Tablets: wider forms, two-column gallery, and enough room for the header. */
@media (max-width: 1100px) {
  .topbar { padding: 22px 28px; gap: 18px; }
  .topbar nav { gap: 20px; }
  .container, .footer { width: calc(100% - 56px); }
  .home-grid { grid-template-columns: minmax(0, 1.35fr) minmax(260px, 1fr); gap: 18px; }
  .panel { padding: 22px; }
  .auth-container { grid-template-columns: minmax(0, 1fr) minmax(320px, 390px); gap: 32px; width: calc(100% - 56px); }
  .auth-intro h1 { font-size: 3.4rem; }
  .auth-intro .eyebrow { letter-spacing: .12em; }
  .gallery-grid, .wish-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones: a single content column and persistent, reachable navigation. */
@media (max-width: 760px) {
  html { scroll-padding-bottom: calc(var(--mobile-nav-space) + 20px); }
  body.has-navigation { padding-bottom: var(--mobile-nav-space); }
  .container, .footer {
    width: 100%;
    padding-left: max(18px, var(--safe-left));
    padding-right: max(18px, var(--safe-right));
  }
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    padding: max(14px, var(--safe-top)) max(18px, var(--safe-right)) 14px max(18px, var(--safe-left));
  }
  .brand { font-size: 1.4rem; }
  .brand span, .top-actions .new-button { display: none; }
  .settings-link { padding-inline: 12px; border: 1px solid var(--line); border-radius: 6px; font-size: .875rem; }
  .topbar .main-nav {
    position: fixed;
    z-index: 40;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2px;
    padding: 7px max(8px, var(--safe-right)) calc(7px + var(--safe-bottom)) max(8px, var(--safe-left));
    background: #10212e;
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 26px rgba(3, 12, 21, .16);
  }
  .topbar .main-nav a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    min-height: 60px;
    padding: 5px 2px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    font-size: .875rem;
    line-height: 1.35;
  }
  .main-nav .nav-icon { display: block; flex: 0 0 22px; }
  .topbar .main-nav a[aria-current] { background: rgba(197, 223, 223, .12); }
  .topbar .main-nav a[aria-current]::after { display: none; }
  .topbar .main-nav .nav-create { color: var(--accent); }
  .topbar .main-nav .nav-create .nav-icon { border: 1px solid currentColor; border-radius: 6px; padding: 2px; }
  .editing-field .topbar .main-nav { visibility: hidden; pointer-events: none; }
  .home-hero { padding: 28px 2px; align-items: flex-start; flex-direction: column; gap: 18px; }
  .home-hero > div { width: 100%; }
  .home-hero .eyebrow { flex-wrap: wrap; gap: 10px; font-size: .875rem; }
  .day-count { font-size: clamp(4.8rem, 19vw, 7.2rem); overflow-wrap: anywhere; }
  .day-count > span { font-size: 1.25rem; margin-left: 10px; }
  .hero-caption { font-size: 1rem; }
  .since { display: block; margin: 8px 0 0; font-size: .875rem; }
  .hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0; gap: 8px 16px; }
  .hero-actions > .button { min-width: 0; }
  .hero-actions .quiet-link { font-size: .875rem; }
  .home-grid, .notes-layout, .settings-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .home-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .home-aside section:last-child { grid-column: 1 / -1; }
  .recent-panel { min-height: 0; }
  .page-heading { padding: 26px 0 20px; align-items: center; flex-wrap: wrap; gap: 12px; }
  .page-heading > div { flex: 1 1 180px; }
  .page-heading h1 { font-size: 1.75rem; }
  .section-heading { align-items: center; flex-wrap: wrap; gap: 12px; }
  .section-heading > div { flex: 1 1 150px; }
  .section-heading > a { white-space: normal; }
  .first-memory { gap: 18px; padding: 26px 0; }
  .empty-date { padding-right: 18px; }
  .auth-container {
    display: block;
    width: 100%;
    max-width: 520px;
    min-height: auto;
    padding: max(28px, var(--safe-top)) max(18px, var(--safe-right)) 24px max(18px, var(--safe-left));
  }
  .auth-intro { margin: 0 4px 26px; }
  .auth-intro h1 { font-size: 2.65rem; margin: 12px 0 8px; }
  .auth-intro > p { font-size: 1.1rem; }
  .auth-intro .intro-line, .auth-intro > .small { display: none; }
  .auth-intro .eyebrow { font-size: .75rem; letter-spacing: .08em; }
  .auth-panel { padding: 24px; }
  .auth-panel h2 { font-size: 1.25rem; }
  .form-row { gap: 16px; }
  .stack { gap: 20px; }
  .filter-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
  }
  .filter-bar > input, .filter-bar > select, .filter-bar > button { width: 100%; min-width: 0; max-width: 100%; min-height: 48px; }
  .filter-bar > input[type=search], .filter-bar > .view-tabs { grid-column: 1 / -1; }
  .filter-bar input[type=month] { min-inline-size: 0; }
  .view-tabs { flex-wrap: wrap; gap: 5px; }
  .view-tabs a { padding: 8px 12px; }
  .gallery-grid { gap: 14px; }
  .gallery-caption { padding: 12px; }
  .gallery-caption strong { font-size: .9375rem; }
  .gallery-item:hover img { transform: none; }
  .wish-grid { gap: 16px; }
  .wish-card { padding: 20px; }
  .wish-card .action-bar { gap: 12px; }
  .ideas-grid, .credits-grid { grid-template-columns: minmax(0, 1fr); }
  .ideas-section .filter-bar { margin-top: 20px; }
  .idea { gap: 10px; }
  .idea button { padding: 8px 12px; }
  .note-compose { grid-row: 1; }
  .note-head { align-items: flex-start; }
  .avatar { flex-shrink: 0; }
  .replies { padding-left: 12px; }
  .memory-title { font-size: 1.85rem; }
  .memory-body { font-size: 1rem; }
  .detail-media img, .detail-media video { max-height: 65svh; }
  .detail-media figcaption > span { min-width: 0; overflow-wrap: anywhere; }
  .detail-media figcaption a { margin-right: 8px; }
  .memory-save-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .memory-save-row > .button { width: 100%; }
  .memory-save-row > .help { text-align: center; }
  .upload-zone { padding: 24px 14px; align-items: stretch; }
  .upload-zone input { width: 100%; min-height: 44px; }
  .upload-zone input::file-selector-button { min-height: 44px; padding: 8px 12px; margin-right: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--accent); color: var(--accent-ink); font: inherit; }
  .upload-item { grid-template-columns: 50px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .upload-copy { min-width: 0; }
  .upload-item .file-name { margin-bottom: 4px; }
  .upload-item .upload-status { line-height: 1.6; }
  .upload-item progress { height: 6px; margin-top: 10px; }
  .upload-item .upload-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .upload-actions button { min-width: 76px; }
  .existing-media img { width: 88px; height: 76px; }
  .setting-row { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .setting-row > div { flex: 1 1 150px; }
  .setting-row small { display: block; }
  .quota-number { font-size: 1.8rem; overflow-wrap: anywhere; }
  .footer { margin-top: 28px; padding-top: 20px; padding-bottom: max(24px, var(--safe-bottom)); gap: 14px; }
  .auth-footer { margin-top: 0; }
  .footer-right { width: 100%; gap: 12px; justify-content: space-between; }
  .theme-switch button { padding: 8px 12px; }
  .toast { width: max-content; max-width: calc(100% - 32px); bottom: calc(var(--mobile-nav-space) + 12px); }
  .editing-field .toast, body:not(.has-navigation) .toast { bottom: max(16px, var(--safe-bottom)); }
  .pagination { gap: 12px; flex-wrap: wrap; }
}

/* Compact phones: roomy single-column inputs, including first-time setup. */
@media (max-width: 540px) {
  .form-row, .auth-panel .form-row, .home-aside, .wish-grid { grid-template-columns: minmax(0, 1fr); }
  .home-aside section:last-child { grid-column: auto; }
  .panel { padding: 20px; }
  .first-memory { align-items: flex-start; }
  .empty-date { font-size: 3rem; padding-right: 14px; }
  .first-memory h3 { font-size: 1rem; }
  .first-memory p { font-size: .9375rem; }
  .memory-card { gap: 12px; }
  .memory-date { width: 38px; }
  .memory-date > span { font-size: 1.7rem; }
  .memory-card .thumb-strip { gap: 6px; flex-wrap: wrap; }
  .memory-card .thumb-link { flex: 1 1 calc(50% - 6px); max-width: none; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-photo { aspect-ratio: 1; }
  .gallery-caption p { font-size: .75rem; }
}

@media (max-width: 360px) {
  .container, .footer { padding-left: max(14px, var(--safe-left)); padding-right: max(14px, var(--safe-right)); }
  .panel { padding: 18px; }
  .auth-container { padding-left: max(14px, var(--safe-left)); padding-right: max(14px, var(--safe-right)); }
  .filter-bar, .gallery-grid { grid-template-columns: minmax(0, 1fr); }
  .first-memory { flex-direction: column; gap: 18px; }
  .empty-date { display: none; }
  .page-heading > .button, .page-heading > form { width: 100%; }
  .page-heading > form > .button { width: 100%; }
  .ideas-section .section-heading > .button { width: 100%; }
  .topbar .main-nav a { font-size: .8125rem; }
}

/* Short landscape viewports keep the navigation in normal flow. */
@media (max-width: 960px) and (orientation: landscape) and (max-height: 540px) {
  body.has-navigation { padding-bottom: 0; }
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding-left: max(18px, var(--safe-left)); padding-right: max(18px, var(--safe-right)); }
  .topbar .brand { grid-column: 1; grid-row: 1; }
  .topbar .brand span, .top-actions .new-button { display: none; }
  .topbar .top-actions { grid-column: 2; grid-row: 1; }
  .topbar .main-nav { position: static; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; grid-column: 1 / -1; grid-row: 2; width: 100%; padding: 0; box-shadow: none; border: none; }
  .editing-field .topbar .main-nav { visibility: visible; pointer-events: auto; }
  .topbar .main-nav a { display: flex; align-items: center; justify-content: center; min-height: 44px; flex-direction: row; padding: 8px 2px; }
  .topbar .main-nav .nav-icon { display: none; }
  .container, .footer { width: 100%; padding-left: max(18px, var(--safe-left)); padding-right: max(18px, var(--safe-right)); }
  .auth-container { padding-left: max(18px, var(--safe-left)); padding-right: max(18px, var(--safe-right)); }
  .has-navigation .footer { padding-bottom: max(20px, var(--safe-bottom)); }
  .toast { bottom: max(16px, var(--safe-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .landscape, .custom-landscape, .landscape-shade, .topbar, .footer, .action-bar { display: none; }
  body.has-navigation { padding: 0; }
  body { background: white; color: black; }
  .panel { background: white; border-color: #ddd; box-shadow: none; }
  .container { width: 100%; }
  .muted, .meta { color: #444; }
  .daily-quote { background: none; border: 0; box-shadow: none; text-shadow: none; }
  .daily-quote blockquote, .daily-quote figcaption { color: black; }
}