/* PostMyPost phone layout, measured at 390 px: project and sections on top, a row with the view switch,
   the short date and the filter, a bottom bar and sheets. Wider screens keep the desktop layout. */
:root { --bar-line: #282e34; --navbar-icon: #6f7f90; }
:root[data-theme=light] { --bar-line: #e6e6e6; --navbar-icon: #999; }
.mobile-top, .mobile-navbar, .mobile-only { display: none; }

.mobile-sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; max-height: 85dvh; margin: 0; padding: 0; border: 0; border-radius: 10px 10px 0 0; overflow-y: auto; color: var(--ink); background: var(--paper); font-size: 16px; line-height: 1.4; }
[data-theme=dark] .mobile-sheet { background: #21262b; }
.mobile-sheet::backdrop { background: rgb(0 0 0 / .7); }
.mobile-sheet.mobile-sheet-side { inset: 0 0 0 auto; width: min(340px, 100vw); height: 100dvh; max-height: none; border-radius: 0; }
.mobile-sheet-body { padding: 16px; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 42px; margin-bottom: 16px; }
.sheet-head h2 { font-size: 16px; font-weight: 700; }
.sheet-close { width: 42px; min-height: 42px; margin-right: -6px; border-radius: 10px; color: var(--pmp-icon); }
.sheet-close svg { width: 24px; height: 24px; }
.sheet-items { display: flex; flex-direction: column; gap: 4px; margin: -6px; }
.sheet-item { display: flex; align-items: center; width: 100%; min-height: 42px; padding: 0 10px; border: 0; border-radius: 10px; color: var(--pmp-union-text); background: transparent; font-size: 16px; text-align: left; }
.sheet-item.with-icon { min-height: 54px; padding: 6px; }
.sheet-item:hover, .sheet-item.active { background: var(--pmp-union); }
.sheet-item.active { color: var(--ink); }
.sheet-icon { display: grid; flex: 0 0 42px; place-items: center; width: 42px; height: 42px; color: var(--navbar-icon); font-size: 20px; line-height: 1; }
.sheet-icon svg { width: 24px; height: 24px; }
.sheet-icon .project-avatar { width: 24px; height: 24px; font-size: 9.143px; font-weight: 400; color: #fff; }
.sheet-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-item.with-icon .sheet-text { padding-left: 6px; }
.sheet-user { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 8px 0 24px; }
.sheet-user strong { font-weight: 500; }
.sheet-user .user-avatar { display: inline-flex; width: 56px; height: 56px; margin: 0; color: #fff; background: #b5b9be; font-size: 18px; font-weight: 400; }
@media (prefers-reduced-motion: no-preference) {
  .mobile-sheet[open] { animation: sheet-up .3s ease-in-out; }
  .mobile-sheet.mobile-sheet-side[open] { animation-name: sheet-left; }
}
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-left { from { transform: translateX(100%); } }

@media (max-width: 600px) {
  :root { --ui: 16px; }
  .workspace, .workspace.collapsed-menu { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; }
  .workspace .project-rail, .workspace .sidebar, .workspace .date-navigation, .workspace #view-tabs, .workspace #view-mode,
  .workspace #calendar-toggle, .workspace #new-post, .workspace .header-right > .user-avatar, .workspace .notify-wrap > .notify-button { display: none !important; }

  .mobile-top { display: block; grid-column: 1; grid-row: 1; padding: 6px 0; border-bottom: 1px solid var(--bar-line); background: var(--paper); }
  .mobile-top-row { display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 12px; }
  .mobile-project { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; height: 24px; padding: 0; border: 0; color: var(--ink); background: transparent; font-size: 16px; font-weight: 500; line-height: 1.2; }
  .mobile-project .project-avatar { width: 24px; height: 24px; font-size: 9.143px; font-weight: 400; color: #fff; }
  .mobile-project-name { margin-left: 3.4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-project [data-icon] { display: grid; flex: 0 0 24px; place-items: center; color: var(--pmp-icon); }
  .mobile-project svg { width: 24px; height: 24px; }
  .mobile-sections { display: flex; gap: 8px; height: 38px; padding: 0 12px; overflow-x: auto; scrollbar-width: none; }
  .mobile-sections::-webkit-scrollbar { display: none; }
  .mobile-sections button { flex: 0 0 auto; height: 38px; padding: 0 8px; border: 0; border-radius: 10px; color: var(--pmp-icon); background: transparent; font-size: 16px; font-weight: 500; white-space: nowrap; }
  .mobile-sections button.active { color: var(--brand); }

  .workspace .page-header { grid-column: 1; grid-row: 2; display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; height: auto; min-height: 0; padding: 12px 12px 16px; border: 0; background: transparent; }
  .workspace .page-header.mobile-row-empty { display: none; }
  .workspace .header-actions { display: flex; flex: 1 1 auto; justify-content: flex-start; gap: 6px; width: auto; min-width: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
  .workspace .header-right { display: contents; }
  .workspace .page-header .mobile-only { display: inline-flex; }
  .workspace .page-header :is(#mobile-switch, #mobile-date, #filter-toggle) { flex: 0 0 auto; align-items: center; gap: 0; height: 42px; min-height: 42px; padding: 0 8px; border: 0; border-radius: 10px; color: var(--pmp-union-text); background: var(--pmp-union); font-size: 16px; font-weight: 400; line-height: 1.4; white-space: nowrap; }
  .workspace .page-header #mobile-switch { padding: 0 9px; }
  .workspace .page-header #mobile-date { padding: 0 16px; }
  .workspace .page-header :is(#mobile-switch-label, #filter-toggle span:last-child) { display: inline; padding: 0 8px; }
  .workspace .page-header :is(#mobile-switch, #filter-toggle) [data-icon] { display: grid; place-items: center; }
  .workspace .page-header :is(#mobile-switch, #filter-toggle) svg { width: 24px; height: 24px; }
  .workspace .page-header :is(#mobile-switch, #mobile-date, #filter-toggle)[aria-expanded=true] { background: var(--pmp-union-active); }

  .workspace main { grid-column: 1; grid-row: 3; scrollbar-gutter: auto; scrollbar-width: none; }
  .workspace main::-webkit-scrollbar { display: none; }
  .workspace .board { gap: 12px; padding: 0 12px 12px; }
  .workspace .board-column { flex-basis: calc(100vw - 3.1 * var(--ui)); }
  .workspace .calendar-panel { display: none; }
  .workspace.show-calendar .calendar-panel { display: block; position: fixed; z-index: 80; inset: auto 0 0 0; width: auto; max-height: 85dvh; padding: 0 16px 16px; border: 0; border-radius: 10px 10px 0 0; box-shadow: 0 0 0 100vmax rgb(0 0 0 / .7); }
  .workspace .notifications-panel { width: 100vw; }
  .workspace .notifications-head { height: 54px; padding: 6px 12px; }

  .mobile-navbar { display: flex; grid-column: 1; grid-row: 4; padding: 6px 12px; border-top: 1px solid var(--bar-line); background: var(--paper); }
  .mobile-navbar-group { display: flex; flex: 1 1 0; min-width: 0; }
  .mobile-navbar-group:first-child > button { flex: 0 0 50%; }
  .login-screen { --ui: 16px; }
  .mobile-navbar-group button { position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; min-width: 0; height: 42px; padding: 0; border: 0; color: var(--pmp-icon); background: transparent; font-size: 11px; line-height: 1.4; }
  .mobile-navbar-group button > [data-icon] { display: grid; place-items: center; width: 24px; height: 24px; color: var(--navbar-icon); }
  .mobile-navbar-group svg { width: 24px; height: 24px; }
  .mobile-navbar-group button > span:nth-child(2) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-navbar-group .notify-badge { top: -3.2px; right: auto; left: calc(50% + 6.9px); min-width: 18px; height: 16.5px; padding: 0 4px; font-size: 11px; line-height: 16.5px; }
  .mobile-navbar-create { display: flex; justify-content: center; padding: 0 10.5px; }
  .mobile-create { display: grid; place-items: center; width: 36.8px; height: 36.8px; min-height: 0; padding: 0; border: 0; border-radius: 50%; color: var(--pmp-union-text); background: var(--pmp-union-active); }
  .mobile-create svg { width: 21px; height: 21px; }

  /* Week labels are lowercase on phones and the calendar fits the screen without sideways scrolling. */
  .workspace .calendar { width: auto; margin: 0 12px; }
  .workspace .calendar .weekdays > div { font-size: inherit; }
  .workspace .weekdays > div, .workspace .weekdays .calendar-date { text-transform: none; }
  .workspace .calendar-grid:has(.compact), .workspace .calendar:has(.compact) .weekdays { min-width: 0; }
  .workspace .calendar:has(.compact) { overflow-x: visible; }
}