/* All presentation changes are opt-in enhancements for roomy windows. */
.wide-control, .wide-count, .more-group-title { display: none; }
@media (min-width: 600px) and (min-height: 540px) {
  .wide-control { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
  .page-container { padding: 24px 28px; }
  .page-header { margin-bottom: 20px; }
  .page-header h2 { font-size: 1.5rem; }
  .page-header p { margin-top: 6px; }
  .feed-list, .timeline-photos { gap: 20px; }
  .post-card { border: 1px solid var(--border); box-shadow: 0 3px 14px rgba(80,40,50,.035); }
  .post-header { padding: 14px 16px 8px; }
  .post-avatar { width: 32px; height: 32px; font-size: 0.875rem; }
  .post-user { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
  .post-time { font-size: 0.6875rem; }
  .post-content { padding: 8px 16px 14px; font-size: 0.9375rem; line-height: 1.8; }
  .post-delete-form .btn-icon { color: var(--text-light); font-size: 1rem; min-width: 40px; min-height: 40px; }
  .post-delete-form.polished-delete:not(.delete-visible) { display: none; }
  .post-options { margin-left: auto; border: none; background: transparent; min-width: 40px; min-height: 40px; font-size: 1.375rem; color: var(--text-light); cursor: pointer; }
  .post-stats { display: none; }
  .wide-count { display: inline; font-variant-numeric: tabular-nums; }
  .post-actions-bar { padding: 4px 10px; }
  .post-actions-bar .btn-action { min-height: 44px; }
  .post-media-grid.media-count-1 .post-media-item { max-height: none; }
  .post-media-grid.media-count-1 .post-media-item > img { height: auto; max-height: none; object-fit: contain; }
  .create-post-card { max-width: none; padding: 18px 20px; margin-bottom: 24px; }
  #createPostForm { display: block; }
  #createPostForm .post-input { min-height: 110px; width: 100%; }
  #createPostForm .post-actions { margin-top: 8px; }
  .composer-collapse { border: none; background: transparent; color: var(--text-light); padding: 8px 0; font: inherit; font-size: 0.75rem; cursor: pointer; }
  .composer-collapse:disabled { display: none; }
  .composer-compact #createPostForm .post-input { min-height: 38px; height: 38px; resize: none; padding-top: 6px; padding-bottom: 6px; }
  .composer-compact .media-mode-help, .composer-compact .composer-collapse, .composer-compact #publishPostButton { display: none; }
  .composer-compact .post-actions { margin-bottom: 0; }
  .section-toggle, .todo-options-toggle, .calendar-today { border: 1px solid var(--border); background: var(--bg-card); border-radius: 12px; color: var(--rose-dark); font: inherit; padding: 10px 14px; min-height: 44px; cursor: pointer; }
  .section-toggle { margin-bottom: 18px; }
  .album-editor:not(.editor-open) { display: none; }
  .album-editor .album-upload-form { max-width: none; }
  .album-editor .upload-dropzone { padding: 18px; }
  .timeline-month-header { margin: 20px 0 16px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
  .timeline-month-label { font-size: 1.125rem; font-weight: 600; }
  .timeline-photo-card { background: var(--bg-card); border: 1px solid var(--border); box-shadow: none; overflow: hidden; border-radius: 16px; }
  .timeline-photo-img > img { max-height: none; object-fit: contain; }
  .timeline-photo-info { padding: 12px 14px; }
  .timeline-photo-caption { font-size: 0.875rem; line-height: 1.7; white-space: pre-wrap; overflow: visible; display: block; -webkit-line-clamp: unset; }
  .timeline-photo-meta { font-size: 0.6875rem; gap: 6px 10px; flex-wrap: wrap; }
  .detail-open { min-height: 40px; margin: 0 14px 12px; }
  body[data-page='todos'] .page-container { display: block; }
  body[data-page='todos'] .create-todo-card { position: static; padding: 16px 20px; }
  .todo-form:not(.options-open) .todo-optional { display: none; }
  .todo-options-toggle { background: transparent; padding: 6px 0; border: none; font-size: 0.8125rem; }
  .todo-list, .completed-todo-items { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 14px; }
  .todo-list .empty-state { grid-column: 1 / -1; }
  .todo-item { margin: 0; padding: 18px; min-width: 0; }
  .todo-title { font-size: 1rem; line-height: 1.6; }
  .todo-desc { font-size: 0.8125rem; line-height: 1.7; white-space: pre-wrap; }
  .todo-meta { flex-wrap: wrap; gap: 6px; }
  .completed-todos { margin-top: 22px; }
  .completed-todos:not(.completed-open) .completed-todo-items { display: none; }
  .countdown-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
  .countdown-card { margin: 0; min-width: 0; padding: 24px; }
  .countdown-number { flex-shrink: 0; }
  .countdown-value { font-size: clamp(32px,4vw,48px); }
  .countdown-date { color: var(--text-light); font-size: 0.75rem; }
  body[data-page='open_letter'] .page-container { max-width: 740px; margin-inline: auto; line-height: 1.9; }
  .more-group-title { display: block; grid-column: 1 / -1; font-size: 0.9375rem; color: var(--text-light); margin: 12px 0 0; }
}
/* Equal gutters keep the content centered; the fixed rail sits above the right gutter.
   2364 x 1672 reference is physical pixels, never a hard-coded CSS viewport. */
@media (min-width: 720px) and (min-height: 540px) {
  html { overflow-y: scroll; scrollbar-gutter: stable; }
  .app-container { --rail-gutter: max(80px, calc(80px + env(safe-area-inset-left)), calc(80px + env(safe-area-inset-right))); padding-inline: var(--rail-gutter); padding-bottom: calc(24px + var(--safe-bottom)); }
  .page-container { padding: 16px 12px; }
  .page-header { margin-bottom: 12px; }
  .page-header h2 { font-size: 1.375rem; }
  .page-header p { margin-top: 2px; }
  .bottom-nav { position: fixed; left: auto; right: calc(12px + env(safe-area-inset-right)); bottom: calc(18px + var(--safe-bottom)); top: auto; transform: none; width: 64px; height: auto; max-height: calc(100dvh - var(--header-height) - var(--safe-top) - 40px); display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; padding: 6px; overflow-y: auto; z-index: 101; border: 1px solid var(--border); border-radius: 20px; background: var(--bg-card); box-shadow: none; backdrop-filter: none; }
  .bottom-nav .nav-item { width: 100%; min-width: 0; height: 48px; flex: 0 0 48px; justify-content: center; padding: 3px 0; gap: 2px; border-radius: 12px; color: var(--text-light); }
  .bottom-nav .nav-item.active { background: var(--rose-light); color: var(--rose-dark); }
  .bottom-nav .nav-label { font-size: 0.6875rem; line-height: 1.4; font-weight: 600; }
  .bottom-nav .nav-icon svg { width: 20px; height: 20px; }
  .bottom-nav .nav-item:focus-visible { outline-offset: -2px; }
  .detail-selected .bottom-nav { display: none; }
  body[data-page='todos'] .create-todo-card { padding: 12px 16px; margin-bottom: 12px; }
  .completed-todos { margin-top: 12px; }
  .completed-todos .section-toggle { margin-bottom: 12px; }
  .todo-item { padding: 14px; }
  /* A wide single calendar must not grow into screen-sized square cells. */
  .cal-day { aspect-ratio: auto; height: 44px; min-height: 44px; border-radius: 12px; }
}
@media (max-width: 359px) {
  .bottom-nav .nav-item { min-width: 0; flex: 1 1 0; padding-inline: 2px; }
}
@media (min-width: 840px) and (min-height: 540px) {
  /* Match content-polish.js. Real inner-screen CSS width is much less than 2364px. */
  body[data-page='calendar'] .page-container { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; align-items: start; }
  body[data-page='calendar'] .page-header, body[data-page='calendar'] .section { grid-column: 1 / -1; }
  body[data-page='calendar'] .page-header { margin-bottom: 0; }
  body[data-page='calendar'] .calendar-card { grid-column: 1; grid-row: 2; padding: 10px 2px; margin-bottom: 0; }
  .calendar-card .cal-days { column-gap: 0; }
  .calendar-day-panel { grid-column: 2; grid-row: 2; min-width: 0; }
  .calendar-day-panel .selected-date-info { margin: 0 0 18px; padding: 0; border: 0; background: transparent; }
  .selected-date-header { font-size: 1.0625rem; font-weight: 600; line-height: 1.6; }
  .calendar-day-event { padding: 16px 0; line-height: 1.7; }
  .calendar-day-panel .calendar-event-editor { box-shadow: none; padding: 0; margin: 0; border: 0; }
  .calendar-day-panel .calendar-event-editor:not(.editor-open) { display: none; }
  .calendar-day-panel .calendar-event-editor .card-title { display: none; }
  .calendar-card .calendar-legend { display: none; }
  .calendar-nav { display: grid; grid-template-columns: 44px minmax(0,1fr) 44px 52px; gap: 2px; margin: 0 6px 8px; }
  .calendar-nav h3 { font-size: 0.9375rem; text-align: center; white-space: nowrap; }
  .calendar-nav .btn-icon { width: 44px; height: 44px; padding: 0; }
  .calendar-today { margin: 0; padding: 6px 4px; font-size: 0.8125rem; }
  .calendar-day-panel { padding: 16px; }
  .calendar-day-panel .form-group { width: 100%; }
  .calendar-day-panel input:not([type='checkbox']):not([type='color']) { width: 100%; min-width: 0; }
}