/* Narrow defaults intentionally retain the established phone shell. */
[hidden] { display: none !important; }
.continuity-notice { padding: 12px 16px; background: #fff0d9; color: #714d20; overflow-wrap: anywhere; }
.draft-discard, .detail-open, .detail-toolbar button { color: var(--rose-dark); background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; cursor: pointer; font: inherit; }
.draft-discard { font-size: 0.75rem; margin-top: 10px; justify-self: start; width: auto; }
.detail-open { display: none; margin: 8px; font-size: 0.8125rem; }
.post-upload-status, .album-upload-status, .post-content, .timeline-photo-caption, .event-info, .todo-title { overflow-wrap: anywhere; }
.form-group, .flex-grow, .post-user, .post-media-preview > *, .page-container > * { min-width: 0; }
.page-container { overflow-wrap: anywhere; }
.form-row { flex-wrap: wrap; }
input, textarea, select { max-width: 100%; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--rose-dark); outline-offset: 2px; }
.detail-pane { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; padding: 12px; min-width: 0; }
.detail-toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.detail-placeholder { border: 1px dashed var(--border); border-radius: 16px; padding: 18px; margin-bottom: 16px; color: var(--text-light); }
.detail-pane .timeline-photo-card { display: block; }
.detail-pane .detail-open { display: none; }
.detail-pane .timeline-photo-img { width: 100%; height: auto; aspect-ratio: auto; }
.detail-pane .timeline-photo-img img, .detail-pane .post-image img { max-height: 60dvh; object-fit: contain; width: 100%; }
.detail-pane .motion-photo { aspect-ratio: 4 / 3; }
.detail-pane .motion-photo > img { object-fit: contain; }
.calendar-day-event { padding: 10px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.cal-day { min-width: 0; padding: 0; color: inherit; font-family: inherit; border: none; background: transparent; }
.cal-days, .cal-weekdays { grid-template-columns: repeat(7, minmax(0,1fr)); }
body[data-page='album'].detail-selected .album-timeline { display: none; }
.detail-pane { scroll-margin-top: calc(var(--header-height) + 12px); }
.post-card { scroll-margin-top: calc(var(--header-height) + 12px); }
@media (min-width: 600px) and (min-height: 540px) {
  .detail-open { display: inline-block; }
  .app-container, .top-nav, .bottom-nav { max-width: 1280px; }
  .page-container { padding: 24px; }
  .timeline-photos, .feed-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: 4px; gap: 16px; align-items: start; }
  .timeline-photo-card, .feed-list > .post-card { margin: 0; align-self: start; }
  .timeline-photo-card { display: block; }
  .timeline-photo-img { width: 100%; height: auto; aspect-ratio: auto; }
  .timeline-photo-img > img { width: 100%; height: auto; max-height: 520px; object-fit: contain; }
  .timeline-photo-card { min-width: 0; }
  .feed-list { max-width: none; }
  .create-post-card { max-width: 700px; margin-left: auto; margin-right: auto; }
  .more-grid, .wishes-grid, .badges-grid, .anniversary-grid { grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); }
  .flash-container { max-width: 600px; }
  .album-upload-form { max-width: 720px; margin: auto; }
}
@media (min-width: 720px) and (min-height: 540px) {
  .app-container { padding-right: 96px; padding-bottom: 24px; }
  .bottom-nav { left: auto; right: max(12px, calc((100vw - 1280px) / 2 + 12px)); transform: none; top: auto; bottom: calc(16px + var(--safe-bottom)); width: 76px; height: auto; max-height: calc(100dvh - var(--header-height) - var(--safe-top) - 40px); flex-direction: column; justify-content: flex-end; overflow-y: auto; padding: 10px 6px; gap: 6px; border: 1px solid var(--border); border-radius: 24px; box-shadow: var(--shadow); }
  .nav-item { width: 100%; flex-shrink: 0; }
}
@media (min-width: 960px) and (min-height: 540px) {
  .create-post-card { max-width: none; }
  #createPostForm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); gap: 12px; }
  #createPostForm .post-input { grid-column: 1; grid-row: 1 / span 2; min-height: 120px; }
  #postMediaPreview, #postUploadStatus { grid-column: 2; }
  #createPostForm .post-actions, #createPostForm .media-mode-help { grid-column: 1 / -1; }
  .feed-detail-layout.has-detail, .album-detail-layout.has-detail { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(340px, 1fr); gap: 20px; align-items: start; }
  .feed-detail-layout .feed-list { width: 100%; }
  .feed-detail-layout.has-detail .feed-list, .album-detail-layout.has-detail .timeline-photos { grid-template-columns: minmax(0,1fr); }
  .detail-pane { position: sticky; top: calc(var(--header-height) + var(--safe-top) + 16px); max-height: calc(100dvh - var(--header-height) - var(--safe-top) - 32px); overflow: auto; }
  body[data-page='album'].detail-selected .album-timeline { display: block; }
  body[data-page='calendar'] .page-container, body[data-page='todos'] .page-container { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 20px; align-items: start; }
  body[data-page='calendar'] .page-header, body[data-page='todos'] .page-header { grid-column: 1 / -1; }
  body[data-page='calendar'] .calendar-card { grid-column: 1; grid-row: 2 / span 2; }
  body[data-page='calendar'] .section { grid-column: 1 / -1; }
  body[data-page='todos'] .create-todo-card { position: sticky; top: calc(var(--header-height) + 16px); }
  body[data-page='letters'] .page-container, body[data-page='open_letter'] .page-container,
  body[data-page='login'] .page-container, body[data-page='register'] .page-container,
  body[data-page='bind'] .page-container, body[data-page='medication_form'] .page-container { max-width: 760px; margin: auto; }
}
@media (min-width: 1200px) and (min-height: 540px) {
  .feed-list, .timeline-photos { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
/* Reported hinge coordinates are viewport-relative and only enabled after validation. */
html[data-posture='tabletop'] .detail-pane { position: fixed; inset: 0; width: 100%; max-height: none; height: 100dvh; z-index: 110; border-radius: 0; padding: 0; overflow: hidden; }
html[data-posture='tabletop'] .detail-toolbar { position: absolute; top: var(--fold-bottom); left: 16px; right: 16px; padding-top: 16px; z-index: 5; }
html[data-posture='tabletop'] .detail-pane .timeline-photo-img { position: absolute; top: 8px; left: 8px; right: 8px; width: auto; height: calc(var(--fold-top) - 16px); }
html[data-posture='tabletop'] .detail-pane .timeline-photo-img > img,
html[data-posture='tabletop'] .detail-pane .motion-photo { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; }
html[data-posture='tabletop'] .detail-pane .timeline-photo-info { position: absolute; top: calc(var(--fold-bottom) + 80px); left: 16px; right: 16px; max-height: calc(100dvh - var(--fold-bottom) - 160px); overflow: auto; }
html[data-posture='tabletop'] .detail-pane .photo-delete { display: none; }
.fold-controls { display: flex; flex-wrap: wrap; gap: 8px; }
html[data-posture='book'] .album-detail-layout.has-detail { display: grid; grid-template-columns: minmax(0, var(--book-left)) minmax(0,1fr); column-gap: var(--book-gap); }
html[data-posture='book'] body[data-page='album'].detail-selected .album-timeline { display: block; }
html[data-posture='book'] .album-detail-layout.has-detail .timeline-photos { grid-template-columns: minmax(0,1fr); }
@media (max-width: 599px), (max-height: 539px) {
  .detail-pane { position: static; }
  .app-container { max-width: 480px; }
}