/* Phone layouts and safe spacing around notches. */
html { -webkit-text-size-adjust: 100%; }
@media (pointer: coarse) {
  .shell { padding-left: max(28px,env(safe-area-inset-left)); padding-right: max(28px,env(safe-area-inset-right)); }
  .site-header { padding-top: max(24px,env(safe-area-inset-top)); }

  button, .filters input, .filters select { min-height: 44px; }
  .site-header a, .album-link, .back-link { min-height: 44px; align-content: center; }
}
@media (max-width: 760px) {
  .shell { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  body:not(.home-view) #main { padding-bottom: max(48px, env(safe-area-inset-bottom)); }
  .site-header, .home-view .site-header {
    display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; min-height: 0;
    padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left));
  }
  .header-home { grid-area: 1 / 1; justify-self: end; padding: 0; font-size: 26px; }
  .header-home a { display: inline-block; padding: 6px 0; }
  .site-header nav.header-summary { grid-area: 2 / 1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px 24px; width: 100%; }
  .header-counts { display: contents; }
  .header-count { margin: 0; gap: 8px; font-size: 22px; min-height: 44px; align-items: baseline; }
  .site-header .header-count a { display: inline-block; padding: 8px 0; }
  .site-header .header-editor { font-size: 22px; padding: 8px 0; justify-self: start; }
  .page-heading h1 { overflow-wrap: anywhere; }
  .home-cover { min-height: 260px; }
  .home-view { min-height: 100svh; }
  .bucket-controls { display: flex; flex-direction: column; align-items: stretch; gap: 20px; }
  .segmented { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); width: 100%; }
  .segmented button { padding: 12px 4px; font-size: 16px; white-space: normal; line-height: 1.4; }
  .filters { width: 100%; min-width: 0; }
  .filters label { min-width: 0; }
  .filters input, .filters select { font-size: 16px; }
  .list-viewport { -webkit-overflow-scrolling: touch; }
  .bucket-region .scroll-rail { display: none; }
  .bucket-region .list-viewport { max-height: 72svh !important; padding-right: 12px; }
  .bucket-table { display: block; min-width: 0; width: 100%; border-top: 4px solid #171717; }
  .bucket-table thead { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); }
  .bucket-table tbody { display: block; }
  .bucket-table tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px 12px; padding: 28px 0 36px; border: 0; box-shadow: none; }
  .bucket-table td, .bucket-table .item-id, .bucket-table .activity, .bucket-table .tag-cell, .bucket-table .album-cell { display: block; min-width: 0; padding: 0; margin: 0; border: 0; }
  .bucket-table .item-id, .bucket-table .activity, .bucket-table .tag-cell, .bucket-table .album-cell { grid-column: 1/-1; }
  .bucket-table .activity { margin-top: -8px; }
  .bucket-table .activity strong { font-size: 23px; line-height: 1.4; overflow-wrap: anywhere; }
  .bucket-table .score-cell:before, .bucket-table .tag-cell:before, .bucket-table .album-cell:before { display: block; content: attr(data-label); margin-bottom: 8px; font-size: 14px; line-height: 1.4; color: #626262; font-weight: 700; }
  .bucket-table .rating-icons { font-size: 13px; letter-spacing: 0; }
  .bucket-table .tag { max-width: 100%; overflow-wrap: anywhere; }
  .bucket-table .rating-number, .bucket-table .unrated, .bucket-table .tag { font-size: 16px; }
  .bucket-table .album-link { display: inline-block; padding: 8px 0; font-size: 18px; }
  .writing-table th:first-child { width: 100px; }
  .writing-table .writing-date { font-size: 15px; padding: 28px 12px 28px 0; }
  .writing-table .writing-title { padding: 26px 20px 26px 8px; }
  .writing-title h2 { font-size: clamp(24px,6vw,34px); line-height: 1.2; }
  .reading-page { width: 100%; min-width: 0; }
  .reading-header h1 { font-size: clamp(36px,9vw,64px); overflow-wrap: anywhere; }
  .reading-body, .poem .reading-body { font-size: 20px; overflow-wrap: anywhere; }
  .album-gallery { grid-template-columns: 1fr; }
  .album-photo img { height: auto; max-height: 70svh; }
  .photo-viewer { max-height: calc(100dvh - 32px); }
  .viewer-controls { flex-wrap: wrap; }
}
@media (max-width: 360px) {
  .segmented button { font-size: 14px; }
  .bucket-table .rating-icons { font-size: 11px; }
  .writing-table th:first-child { width: 86px; }
  .writing-table .writing-title { padding-right: 16px; }
}