/* Mobile workflows share the desktop data model, but own their presentation. */
.mobile-only,
.mobile-add {
  display: none;
}
.task-rename {
  grid-column: 1 / -1;
}
.task-rename summary,
.task-location summary,
.capture-location summary {
  padding: 12px 0;
}
.task-location {
  margin-block: 12px;
}
.task-location summary,
.capture-location summary {
  display: flex;
  align-items: center;
  gap: 8px;
}
.capture-location summary span {
  flex: 1;
}
.more-pages {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}
.more-pages button {
  justify-content: flex-start;
  min-height: 48px;
}
.sheet-shortcuts {
  display: flex;
  gap: 8px;
  margin-block: 16px;
}
.load-more {
  width: 100%;
  margin-top: 16px;
}
/* The Day layout is also usable on desktop. */
.week-date-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 12px;
}
.week-date-strip button {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.week-date-strip [aria-pressed='true'] {
  background: var(--green);
  color: var(--on-green);
}
.calendar-selected-day {
  padding: 12px 16px;
}
.calendar-selected-heading {
  font-size: 16px;
  margin-block: 4px;
}
@media (max-width: 640px), (max-width: 960px) and (max-height: 500px) {
  .app {
    display: block;
  }
  .nav {
    display: none;
  }
  :root {
    --mobile-nav-height: calc(66px + env(safe-area-inset-bottom));
  }
  .mobile-only {
    display: flex;
  }
  .main-shell {
    padding-bottom: var(--mobile-nav-height);
  }
  .topbar {
    position: sticky;
    top: 0;
    z-index: 9;
    min-height: 60px;
    padding: 6px 14px;
  }
  .topbar .actions > [data-action='new-task'] {
    display: none;
  }
  .workspace-switch {
    min-width: 0;
    flex: 1;
    max-width: calc(100% - 48px);
  }
  .workspace-switch-control {
    min-width: 0;
  }
  .topbar .workspace-switch select {
    max-width: none;
    width: 100%;
    font-size: 16px;
    text-overflow: ellipsis;
  }
  .workspace-switch-label {
    font-size: 10px;
  }
  .mobile-nav {
    position: fixed;
    z-index: 12;
    bottom: 0;
    left: 0;
    right: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 5px 6px max(5px, env(safe-area-inset-bottom));
    min-height: var(--mobile-nav-height);
    border: 0;
    border-top: 1px solid var(--line);
    background: var(--paper);
  }
  .mobile-nav button {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 52px;
    font-size: 11px;
    padding: 5px 0;
    border-radius: 8px;
  }
  .mobile-nav .ph {
    font-size: 21px;
  }
  .mobile-add {
    display: flex;
    position: fixed;
    z-index: 10;
    bottom: calc(var(--mobile-nav-height) + 12px);
    right: 16px;
    min-height: 48px;
    padding: 10px 16px;
    gap: 6px;
    border-radius: 24px;
    box-shadow: 0 3px 12px #15291e22;
  }
  .mobile-add .ph {
    font-size: 20px;
  }
  .page {
    padding: 16px 14px 80px;
  }
  .page-head {
    margin-bottom: 14px;
    align-items: center;
  }
  .page-head h1 {
    font-size: 24px;
  }
  .page-head > [data-action='new-task'],
  .quick-capture {
    display: none;
  }
  .task-list {
    overflow: visible;
  }
  .task-row {
    padding-block: 9px;
  }
  .task-name {
    font-size: 16px;
    line-height: 1.4;
  }
  .task-meta {
    margin-top: 2px;
  }
  .task-aside {
    margin-top: 2px;
  }
  .task-filters {
    display: none;
  }
  .filter-launch {
    width: 100%;
    justify-content: flex-start;
    border: 0;
    padding-left: 0;
  }
  .filter-chips {
    margin-block: 6px;
  }
  .list-caption {
    margin-block: 8px;
  }
  .subtasks .task-check {
    width: 44px;
  }
  .subtasks .task-row {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .attention-tabs {
    margin-block: 4px 12px;
  }
  .next-appointment {
    display: block;
    margin-bottom: 12px;
    border-left: 3px solid var(--green);
    padding: 8px 12px;
    background: var(--side);
    border-radius: 0 6px 6px 0;
  }
  .next-appointment > span {
    color: var(--soft);
    font-size: 12px;
  }
  .next-appointment .event-row {
    border: 0;
    padding: 5px 0 0;
    background: none;
    margin: 0;
  }
  .next-appointment .event-row p {
    display: none;
  }
  .next-appointment .event-time {
    min-width: 54px;
  }
  .today-tabs {
    margin-bottom: 10px;
  }
  .detail {
    padding-bottom: 20px;
  }
  .detail-top {
    position: sticky;
    top: var(--mobile-header-height, 76px);
    background: var(--paper);
    z-index: 4;
  }
  .detail h2 {
    margin-top: 6px !important;
    font-size: 22px;
    line-height: 1.35;
  }
  .detail .fields {
    gap: 10px;
  }
  .detail .task-rename {
    border-bottom: 1px solid var(--line);
  }
  .detail .field {
    font-size: 12px;
  }
  .detail-save {
    position: sticky;
    bottom: var(--mobile-nav-height);
    padding-block: 12px;
    z-index: 5;
  }
  .detail .tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .detail .tabs button {
    flex: 1;
    white-space: nowrap;
    padding-inline: 6px;
  }
  dialog {
    position: fixed;
    inset: auto 0 auto;
    top: calc(var(--visual-top, 0px) + var(--visual-height, 100dvh));
    transform: translateY(-100%);
    margin: 0;
    width: 100%;
    max-width: 100%;
    max-height: calc(var(--visual-height, 100dvh) - 12px);
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    padding: 16px 18px max(16px, env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }
  dialog .dialog-head {
    position: sticky;
    top: -16px;
    padding-block: 8px;
    background: var(--paper);
    z-index: 3;
    margin-top: -8px;
  }
  dialog .dialog-head h2 {
    font-size: 21px;
  }
  dialog .fields,
  dialog .filter-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }
  dialog [name='title'] {
    font-size: 17px;
  }
  dialog .actions {
    position: sticky;
    bottom: -16px;
    background: var(--paper);
    padding: 12px 0 4px;
    margin-top: 12px;
    z-index: 2;
  }
  dialog .actions > .primary {
    flex: 1;
  }
  dialog summary {
    display: flex;
    align-items: center;
    font-size: 13px;
    padding-block: 8px;
  }
  dialog .capture-location {
    border-block: 1px solid var(--line);
    margin-top: 8px;
  }
  dialog .capture-location .fields {
    padding-bottom: 12px;
  }
  dialog .due-hint {
    font-size: 12px;
  }
  dialog[data-kind='menu'] .actions > [data-action='close-dialog'] {
    display: none;
  }
  body:has(dialog[open]) {
    overflow: hidden;
  }
  #toast {
    bottom: calc(var(--mobile-nav-height) + 12px);
    z-index: 25;
    width: max-content;
  }
  .plan-switch {
    flex: 0 0 auto;
    gap: 4px;
    margin-bottom: 10px;
    padding: 3px;
    background: var(--side);
    border-radius: 8px;
  }
  .plan-switch button {
    flex: 1;
    border: 0;
    background: transparent;
  }
  .plan-switch [aria-pressed='true'] {
    background: var(--paper);
    color: var(--green);
    box-shadow: 0 1px 3px #15291e18;
  }
  .main-shell:has(.calendar-page):not(:has(.has-detail)),
  .main-shell:has(.timeline-page):not(:has(.has-detail)) {
    height: 100dvh;
    display: flex;
    flex-direction: column;
  }
  .main-shell:has(.calendar-page) .content,
  .main-shell:has(.timeline-page) .content {
    flex: 1;
    min-height: 0;
    display: flex;
  }
  .calendar-page,
  .timeline-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
    margin: 0;
    padding: 10px 12px 8px;
    overflow: hidden;
  }
  .calendar-page > *,
  .timeline-page > * {
    flex-shrink: 0;
  }
  .calendar-page > .page-head,
  .timeline-page > .page-head {
    display: none;
  }
  .main-shell:has(.calendar-page) .mobile-add,
  .main-shell:has(.timeline-page) .mobile-add {
    display: none;
  }
  .main-shell:has(.calendar-page) .topbar .actions > [data-action='new-task'],
  .main-shell:has(.timeline-page) .topbar .actions > [data-action='new-task'] {
    display: flex;
  }
  .main-shell:has(.calendar-page) .workspace-switch,
  .main-shell:has(.timeline-page) .workspace-switch {
    max-width: calc(100% - 96px);
  }
  .calendar-toolbar {
    gap: 4px;
    margin-bottom: 6px;
    flex-wrap: nowrap;
  }
  .calendar-toolbar .tabs {
    padding: 0;
    background: transparent;
  }
  .calendar-toolbar .tabs button {
    padding-inline: 8px;
  }
  .calendar-toolbar .controls {
    gap: 0;
    flex-wrap: nowrap;
  }
  .calendar-toolbar .controls button {
    padding-inline: 5px;
  }
  .calendar-range {
    margin-bottom: 4px;
  }
  .calendar-range h2 {
    font-size: 14px;
  }
  .calendar-layers {
    margin-bottom: 4px;
  }
  .calendar-options-body {
    max-height: 55dvh;
    overflow: auto;
  }
  .calendar-scroll,
  .calendar-selected-day,
  .timeline-scroll {
    flex: 1 1 0;
    min-height: 80px;
    max-height: none;
    overflow: auto;
  }
  .calendar-scroll .calendar-task .task-name {
    font-size: 15px;
  }
  .calendar-selected-day {
    padding: 8px 10px;
  }
  .week-date-strip {
    margin: 0 -6px 6px;
    gap: 0;
  }
  .week-date-strip button {
    min-height: 56px;
    padding: 4px 0;
  }
  .week-date-strip small {
    display: none;
  }
  .calendar-note {
    margin-block: 6px 0;
    font-size: 11px;
  }
  .calendar-scroll .week-grid {
    min-width: 0;
    width: calc(700% / 3);
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  .calendar-scroll .week-day {
    padding: 0 6px 10px;
    min-height: 100%;
  }
  .week-day .calendar-task {
    display: block;
    position: relative;
    padding-top: 4px;
  }
  .week-day .calendar-task .task-check {
    width: 44px;
  }
  .week-day .calendar-task-open {
    width: 100%;
    padding: 0;
  }
  .week-day .calendar-task .task-name {
    font-size: 14px;
    overflow-wrap: anywhere;
  }
  .week-day .calendar-task-open small {
    display: none;
  }
  .week-day .calendar-item-group > h3 {
    font-size: 11px;
    gap: 3px;
  }
  .week-day .calendar-item-group > h3 .ph {
    display: none;
  }
  .calendar-scroll .week-day .event-row {
    padding: 8px 3px;
  }
  .week-day .event-row p {
    display: none;
  }
  .week-day .calendar-date-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .week-day .calendar-date-heading small {
    display: none;
  }
  .timeline-mobile-actions {
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
  }
  .timeline-mobile-actions button {
    flex: 1;
    font-size: 12px;
    padding-inline: 6px;
  }
  .timeline-toolbar,
  .timeline-filters {
    display: none;
  }
  .timeline-navigation {
    margin-bottom: 4px;
    gap: 4px;
  }
  #timeline-visible-range {
    width: auto;
    order: 0;
    flex: 1;
    text-align: center;
    font-size: 11px;
  }
  .timeline-jump > summary {
    padding-inline: 5px;
  }
  .timeline-jump > summary span {
    display: none;
  }
  .timeline-scroll {
    --label-width: 160px;
  }
  .timeline-scroll .g-name strong {
    font-size: 13px;
  }
  .timeline-scroll .g-row-action {
    min-width: 44px;
    min-height: 44px;
  }
  .timeline-scroll .g-label {
    padding-inline: 4px;
  }
  .timeline-footer {
    margin-top: 4px;
  }
  .timeline-footer .legend {
    font-size: 10px;
    gap: 6px;
  }
  .timeline-guide {
    display: none;
  }
  .timeline-expanded .topbar,
  .timeline-expanded .mobile-nav,
  .timeline-expanded .plan-switch,
  .timeline-expanded .timeline-footer {
    display: none;
  }
  .timeline-expanded .main-shell {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .timeline-expanded .timeline-page {
    padding-top: max(8px, env(safe-area-inset-top));
  }
  .timeline-expanded .timeline-scroll {
    --label-width: 160px;
  }
}
@media (max-width: 375px) {
  .calendar-toolbar .tabs button {
    padding-inline: 6px;
  }
  .calendar-toolbar .controls [data-action='calendar-today'] {
    font-size: 12px;
    padding-inline: 3px;
  }
  dialog .fields,
  dialog .filter-grid {
    gap: 8px;
  }
}

@media (min-width: 641px) and (max-width: 960px) and (max-height: 500px) {
  .calendar-scroll .week-grid {
    width: 100%;
  }
  .calendar-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    grid-template-rows: auto auto minmax(80px, 1fr);
  }
  .calendar-page .plan-switch {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }
  .calendar-page .calendar-toolbar {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }
  .calendar-page .calendar-range {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    margin: 0;
  }
  .calendar-page .calendar-layers {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
  }
  .calendar-page .calendar-scroll {
    grid-column: 1 / -1;
    grid-row: 3;
    height: 100%;
  }
  .calendar-page .calendar-note {
    display: none;
  }
  .calendar-page:has(.week-date-strip) {
    grid-template-rows: auto auto auto minmax(80px, 1fr);
  }
  .calendar-page .week-date-strip {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 0;
  }
  .calendar-page .calendar-selected-day {
    grid-row: 4;
  }
  .calendar-page .week-date-strip button {
    min-height: 44px;
    flex-direction: row;
    justify-content: center;
  }
}

@media (max-width: 640px), (max-width: 960px) and (max-height: 500px) {
  .timeline-scroll .g-name strong {
    white-space: nowrap;
    display: block;
    line-height: 1.4;
  }
  .timeline-scroll .g-label.indent {
    padding-left: 8px;
  }
  .timeline-scroll .g-label.child {
    padding-left: 16px;
  }
  .timeline-scroll .g-head .g-label {
    overflow: hidden;
  }
  dialog[data-kind='filters'] [name='timelineSearch'] {
    width: 100%;
  }
  dialog[data-kind='filters'] .filter-grid > .field:has([name='timelineSearch']) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px), (max-width: 960px) and (max-height: 500px) {
  .mobile-nav {
    display: grid;
  }
  .topbar .add-label,
  .topbar .search-label {
    display: none;
  }
  .topbar .primary {
    width: 44px;
    min-width: 44px;
    padding: 10px;
  }
  .calendar-toolbar .calendar-jump {
    display: none;
  }
  .calendar-nav {
    display: contents;
  }
  .calendar-range > span {
    display: none;
  }
  .calendar-toolbar .tabs {
    flex-wrap: nowrap;
  }
}
@media (max-width: 375px) {
  .calendar-scroll .week-grid {
    width: 350%;
  }
}

@media (max-width: 640px), (max-width: 960px) and (max-height: 500px) {
  .topbar button {
    min-width: 44px;
    min-height: 44px;
  }
  .mobile-nav button {
    border: 0;
  }
}

/* One sheet footer owns the action area; nested controls stay in normal flow. */
@media (max-width: 640px), (max-width: 960px) and (max-height: 500px) {
  dialog {
    top: var(--visual-top, 0px);
    height: var(--visual-height, 100dvh);
    max-height: var(--visual-height, 100dvh);
    transform: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow: hidden;
    box-sizing: border-box;
  }
  dialog[open] {
    display: flex;
    align-items: flex-end;
    background: transparent;
  }
  dialog #modal-form {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    background: var(--paper);
    border-radius: 18px 18px 0 0;
  }
  dialog .dialog-head {
    position: static;
    flex: 0 0 auto;
    margin: 0;
    padding: 12px 16px;
  }
  dialog .dialog-head h2 {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  dialog .dialog-head button {
    flex-shrink: 0;
  }
  dialog .dialog-body {
    overflow-y: auto;
    min-height: 0;
    padding: 0 16px 16px;
    overscroll-behavior: contain;
  }
  dialog .actions {
    position: static;
    padding: 0;
    margin-top: 12px;
    flex-wrap: wrap;
  }
  dialog .dialog-footer {
    flex: 0 0 auto;
    margin: 0;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--paper);
  }
  dialog .dialog-footer > button {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  dialog .dialog-body .actions > button {
    flex: 0 1 auto;
  }
  .detail-top,
  .detail-save {
    position: static;
  }
  .detail-save {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 0;
  }
  .detail {
    padding-bottom: 24px;
  }
  body:has(dialog[open]) .mobile-add,
  body.keyboard-open .mobile-add,
  body.keyboard-open .mobile-nav,
  body:has(#toast:not(:empty)) .mobile-add {
    display: none;
  }
  #toast {
    max-width: calc(100vw - 24px);
    white-space: normal;
    box-sizing: border-box;
  }
  .actions {
    flex-wrap: wrap;
  }
  .draft-row .body {
    flex: 1 1 100%;
  }
  .draft-row .actions {
    width: 100%;
  }
  dialog input,
  dialog select,
  dialog textarea {
    min-width: 0;
    max-width: 100%;
  }
}
@media (max-width: 640px), (max-width: 960px) and (max-height: 500px) {
  .planning-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .planning-tabs button {
    flex: 1 1 auto;
  }
  .plan-toolbar {
    align-items: stretch;
  }
  .plan-toolbar .field {
    width: 100%;
  }
  .plan-toolbar .actions {
    width: 100%;
    gap: 8px;
  }
  .plan-toolbar .actions button {
    flex: 1 1 auto;
  }
  .plan-actions {
    padding-left: 0;
    gap: 6px;
  }
  .plan-actions button {
    min-height: 44px;
  }
  .plan-capacity {
    line-height: 1.5;
  }
  .task-aside {
    flex-wrap: wrap;
  }
  .task-aside button.icon {
    min-width: 44px;
    min-height: 44px;
  }
  .document-row {
    flex-wrap: wrap;
  }
  .document-row .body {
    flex: 1 1 calc(100% - 44px);
  }
  .review-project .actions button {
    white-space: normal;
  }
  .task-picker {
    max-height: none;
    overflow: visible;
  }
  dialog .check-field {
    align-items: flex-start;
  }
  dialog .check-field input {
    flex-shrink: 0;
  }
  dialog .dialog-footer {
    justify-content: stretch;
  }
  dialog .dialog-footer > button {
    flex: 1 1 0;
    min-height: 44px;
  }
}

@media (max-width: 640px), (max-width: 960px) and (max-height: 500px) {
  .review-decisions {
    grid-template-columns: 1fr;
  }
  .update-notice {
    position: static;
    padding: 8px 16px;
  }
  .inline-estimate {
    flex: 1 1 100%;
  }
  .recovery-field,
  .trash-item {
    overflow-wrap: anywhere;
  }
  .dialog-head h2 {
    overflow-wrap: anywhere;
  }
  .dialog-footer button {
    white-space: normal;
  }
  .review-focus,
  .day-appointments {
    min-width: 0;
  }
  .day-appointments .event-row {
    flex-wrap: wrap;
  }
  .day-appointments .event-row .body {
    min-width: 0;
    flex: 1 1 180px;
  }
  .detail {
    scroll-padding-block: 16px;
  }
}