/* Mobile composition: designed for the Android shell, without changing desktop layout. */
@media (max-width: 899px) {
  :root { --mobile-nav-height: 82px; }
  html, body, #app { min-width: 0; overflow-x: clip; }
  body { background: #fffcf6; }
  .workspace.web-workspace { padding: 0 14px calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 24px); }
  .page-header.web-page-header { height: auto; min-height: 72px; padding: calc(env(safe-area-inset-top) + 10px) 2px 10px; }
  .page-header h1 { font-size: clamp(26px, 8vw, 32px); line-height: 1.1; margin-top: 4px; }
  .web-brand-title .app-mark { display: none; }
  .web-eyebrow { font-size: 10px; letter-spacing: .08em; }
  .header-actions { gap: 8px; }
  .header-actions .avatar { width: 38px; height: 38px; }
  .primary-nav.web-primary-nav { left: 0; right: 0; bottom: 0; inset-inline: 0; height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); padding: 7px 8px calc(7px + env(safe-area-inset-bottom)); border: 0; border-radius: 0; display: flex; flex-direction: row; gap: 7px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; background: rgba(255,252,246,.98); box-shadow: 0 -8px 26px rgba(36,55,43,.12); -webkit-overflow-scrolling: touch; }
  .primary-nav.web-primary-nav::after { content: ''; flex: 0 0 3px; }
  .primary-nav.web-primary-nav .web-nav-button { flex: 0 0 58px; width: 58px !important; max-width: 58px; min-width: 58px; min-height: 62px; grid-template-columns: 1fr !important; grid-template-rows: 30px 14px; padding: 5px 3px; scroll-snap-align: center; font-size: 10px; }
  .primary-nav.web-primary-nav .web-nav-button.active { box-shadow: inset 0 0 0 1px #f8c9b7, 0 3px 10px rgb(242 111 82 / 14%); }
  .nav-gem, .nav-gem .domain-icon-image { width: 27px; height: 27px; }
  .secondary-nav.web-secondary-nav { position: sticky; z-index: 8; top: 0; margin: 0 -14px 14px; padding: 8px 14px; display: flex; gap: 8px; overflow-x: auto; border-block: 1px solid var(--line); background: rgba(255,252,246,.96); backdrop-filter: blur(14px); -webkit-overflow-scrolling: touch; }
  .secondary-nav.web-secondary-nav .web-segment { flex: 0 0 auto; min-height: 38px; padding: 7px 12px; font-size: 13px; }
  .web-card, .p0-card { padding: 14px; border-radius: 18px; box-shadow: 0 8px 24px rgba(42,59,47,.08); }
  .web-domain-page, .web-section, .web-form, .web-list { gap: 14px; }
  .web-page-header, .web-domain-page > .web-page-header { padding: 14px; border-radius: 18px; }
  .web-card-actions, .p0-card-actions, .button-row { align-items: stretch; gap: 8px; }
  .web-card-actions > button, .p0-card-actions > button { flex: 1 1 120px; }
  .web-form, .p0-form { gap: 10px; }
  .web-overlay-host .modal, .web-overlay-host [role="dialog"], .vnext-cloud-dialog { width: min(100% - 20px, 520px); max-height: min(82dvh, 720px); overflow: auto; border-radius: 20px; }
  .vnext-cloud-status { top: calc(env(safe-area-inset-top) + 14px) !important; right: 12px; padding: 7px 10px; font-size: 12px; }
  .vnext-cloud-dialog section { padding: 20px; }
  .web-data-list, .field-grid, .p0-field-row, .parity-task-editor { grid-template-columns: 1fr; }
  .data-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .actual-timeline { margin-left: 38px; }
  .time-entry, .focus-session-group { width: calc(100% - 12px); }
  .focus-stage-shell, .web-shell.is-immersive .focus-stage-shell { min-height: 100dvh; padding: max(20px, env(safe-area-inset-top)) 18px calc(22px + env(safe-area-inset-bottom)); }
  .p0-focus-core { min-height: calc(100dvh - 56px); padding: 18px 8px; }
  .p0-timer, .p0-number { font-size: clamp(42px, 15vw, 64px); }
  .p0-calendar-controls { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px auto; gap: 5px; padding: 6px; align-items: center; }
  .p0-calendar-controls > button, .p0-calendar-controls .p0-calendar-date-trigger { min-height: 36px !important; padding: 5px 6px !important; }
  .p0-calendar-controls .p0-calendar-date-trigger { grid-column: auto; width: 100%; font-size: 12px !important; }
  .p0-calendar-controls .p0-calendar-nav { min-width: 32px !important; font-size: 21px !important; line-height: 1; }
  .p0-calendar-controls .p0-calendar-today { font-size: 11px !important; white-space: nowrap; }
  .p0-segmented { max-width: 100%; padding-bottom: 2px; }
  .p0-week-paging { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 10px; font-size: 12px; color: var(--p0-muted); }
  .p0-week-paging button { min-height: 44px; padding: 6px 10px; font-size: 13px; }
  .p0-week-scroll { scroll-snap-type: x mandatory; scroll-padding: 0; border-radius: 14px; }
  .p0-week-scroll .p0-calendar-week-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); width: calc(350% + 25px); min-width: 0 !important; gap: 10px; border: 0; background: transparent; }
  .p0-week-scroll .p0-calendar-day { scroll-snap-align: start; min-height: 210px; padding: 12px 10px; border: 1px solid var(--p0-line); border-radius: 14px; background: var(--p0-surface); }
  .p0-calendar-weekday { font-size: 14px; }
  .p0-calendar-week-date { margin-top: 6px; font-size: 21px; }
  .p0-calendar-week-tasks { display: grid; gap: 8px; margin-top: 14px; }
  .p0-calendar-week-task { min-height: 48px !important; height: auto !important; padding: 10px !important; font-size: 14px !important; }
  .p0-calendar-week-task .p0-calendar-event-name { font-size: 14px; line-height: 1.5; white-space: normal; overflow: visible; overflow-wrap: anywhere; }
  .p0-calendar-week-task .p0-calendar-event-time { font-size: 12px; line-height: 1.4; white-space: normal; overflow: visible; }
  .p0-calendar-month-scroll { overflow: visible !important; }
  .p0-calendar-month-grid.p0-calendar-month-board { border-radius: 12px; }
  .p0-calendar-month-days { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); padding: 10px 0; }
  .p0-calendar-month-days span { min-width: 0; text-align: center; font-size: 14px; font-weight: 800; color: var(--p0-muted); }
  .p0-calendar-month-week { display: grid !important; grid-template-columns: repeat(7, minmax(0,1fr)); min-height: 0 !important; align-items: stretch; }
  .p0-calendar-month-scroll .p0-calendar-month-day { min-width: 0; min-height: 96px !important; padding: 7px 1px; gap: 4px; text-align: center; justify-items: center; border-radius: 0; border-top: 0; border-left: 0; box-shadow: none; }
  .p0-calendar-date-number { font-size: 21px; padding: 0; line-height: 1.15; }
  .lunar-label { margin: 0; padding: 0; font-size: 12px; line-height: 1.3; }
  .p0-calendar-month-day .p0-calendar-marker { position: static; max-width: 100%; font-size: 11px; line-height: 1.2; }
  .p0-month-summary { color: #246450; font-size: 11px; font-weight: 750; line-height: 1.3; }
  .p0-month-summary::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; margin-right: 3px; vertical-align: middle; }
  .p0-month-detail { margin-top: 18px; display: grid; gap: 10px; }
  .p0-month-detail h2 { font-size: 18px; margin: 0; }
  .task-row.p0-task-card { grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; gap: 8px; padding: 11px; }
  .task-row.p0-task-card .task-copy { min-width: 0; }
  .task-row.p0-task-card .task-title { overflow-wrap: anywhere; line-height: 1.35; }
  .task-row.p0-task-card .task-actions { grid-column: 2 / 4; display: flex; align-items: center; gap: 6px; }
  .task-row.p0-task-card .quick-focus, .task-row.p0-task-card .p0-icon-button { flex: 0 0 36px; min-width: 36px !important; width: 36px; min-height: 36px; padding: 0 !important; font-size: 17px; }
}

@media (max-width: 380px) {
  .workspace.web-workspace { padding-inline: 10px; }
  .secondary-nav.web-secondary-nav { margin-inline: -10px; padding-inline: 10px; }
  .primary-nav.web-primary-nav .web-nav-button { flex-basis: 56px; width: 56px !important; max-width: 56px; min-width: 56px; }



}

/* The paired task controls use one box model across all routes and sizes. */
.task-row.p0-task-card .task-actions .p0-task-action {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 44px; width: 44px !important; min-width: 44px !important; max-width: 44px;
  height: 44px !important; min-height: 44px !important; max-height: 44px;
  padding: 0 !important; margin: 0; border: 1px solid var(--p0-line); border-radius: 12px;
  background: #fff; color: var(--p0-ink); box-shadow: none; font: 700 18px/1 system-ui; vertical-align: middle;
}
@media (min-width: 900px) { .p0-week-paging { display: none; } }
@media (max-width: 899px) {
  .primary-nav.web-primary-nav { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 2px; padding-inline: 4px; overflow-x: hidden; }
  .primary-nav.web-primary-nav::after { display: none; }
  .primary-nav.web-primary-nav .web-nav-button { width: 100% !important; min-width: 0; max-width: none; }
}

.p0-calendar-month-scroll .p0-calendar-month-day.selected {
  background: #eaf5f0; box-shadow: inset 0 0 0 2px #39816a; color: #174e43;
}
.p0-month-detail { scroll-margin-top: 64px; scroll-margin-bottom: 100px; }
.task-row.p0-task-card .task-actions .p0-task-action.p0-icon-button { font-size: 24px; }

/* Compact text calendars: task titles are content, not ellipsis labels. */
.p0-calendar-month-week { padding-bottom: 8px; gap: 2px 0; border-bottom: 1px solid var(--p0-line); }
.p0-calendar-month-scroll .p0-calendar-month-day { min-height: 62px !important; grid-row: 1; padding: 5px 2px; border-bottom: 0; }
.p0-month-text-event {
  position: relative; z-index: 1; min-width: 0; min-height: 24px; width: calc(100% - 2px);
  height: auto; margin: 0 1px; padding: 3px 2px; border: 0; border-radius: 3px;
  background: #e2f0ea; color: #28564c; text-align: left; align-self: stretch;
  font: 500 11px/1.35 system-ui, sans-serif; white-space: normal; overflow-wrap: anywhere;
}
.p0-month-text-event[data-tone="high"] { background: #fbe3da; color: #763c2f; }
.p0-month-text-event[data-tone="low"] { background: #e3edf7; color: #365675; }
.p0-month-text-event .p0-calendar-event-name { font: inherit; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.p0-month-text-event .p0-calendar-event-time { display: none; }
@media (max-width: 899px) {
  .p0-week-paging { margin-bottom: 6px; }
  .p0-week-scroll .p0-calendar-week-grid { width: calc(233.333333% + 8px); gap: 6px; }
  .p0-week-scroll .p0-calendar-day { min-height: 120px; padding: 7px 4px; border-radius: 7px; }
  .p0-calendar-weekday { font-size: 12px; }
  .p0-calendar-week-date { font-size: 17px; margin-top: 3px; }
  .p0-calendar-week-tasks { gap: 4px; margin-top: 7px; }
  .p0-calendar-week-task { min-height: 32px !important; padding: 4px !important; border-radius: 3px; font-size: 12px !important; }
  .p0-calendar-week-task .p0-calendar-event-name { font-size: 12px; line-height: 1.35; font-weight: 500; color: #28564c; }
  .p0-calendar-week-task .p0-calendar-event-time { font-size: 10px; line-height: 1.3; font-weight: 500; }
  .p0-calendar-month-week { min-height: 86px !important; align-content: start; background-image: linear-gradient(to right, transparent calc(100% - 1px), #eee7df 1px); background-size: calc(100% / 7) 100%; }
  .p0-calendar-month-scroll .p0-calendar-month-day { min-height: 55px !important; padding: 5px 1px 3px; gap: 1px; border-right: 0; }
  .p0-calendar-date-number { font-size: 17px; }
  .lunar-label { font-size: 10px; }
  .p0-calendar-month-day .p0-calendar-marker { font-size: 10px; }
  .p0-calendar-month-days { padding: 4px 0; }
  .p0-calendar-month-days span { padding: 7px 0; font-size: 12px; }
}

.p0-calendar-month-week { grid-auto-rows: min-content; }
.p0-month-text-event { align-self: start; }

.p0-month-day-texts { min-width: 0; display: grid; gap: 2px; align-content: start; align-self: start; }

.p0-month-text-event { min-height: 22px !important; padding: 3px 2px !important; }

/* R3: transparent date headers preserve the continuous calendar grid. */
.p0-calendar-month-scroll .p0-calendar-month-day,
.p0-calendar-month-scroll .p0-calendar-month-day.selected,
.p0-calendar-month-scroll .p0-calendar-month-day.is-blank {
  position: relative; display: flex; align-items: center; justify-content: flex-start;
  min-height: 32px !important; height: 32px; padding: 10px 2px 2px !important; gap: 1px;
  background: transparent !important; box-shadow: none !important; border: 0; color: var(--p0-ink);
}
.p0-calendar-month-day .p0-calendar-date-number { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font: 600 14px/18px system-ui; min-width: 15px; height: 18px; }
.p0-calendar-month-day .lunar-label { display: inline; flex: 0 0 auto; font: 400 8px/1 system-ui; white-space: nowrap; }
.p0-calendar-month-day .p0-calendar-marker { position: absolute; top: 0; right: 2px; font: 600 7px/9px system-ui; }
.p0-calendar-month-day.is-today .p0-calendar-date-number { background: #f28b32; color: white; width: 18px; border-radius: 50%; }
.p0-calendar-month-day.selected:not(.is-today) .p0-calendar-date-number { text-decoration: underline; text-underline-offset: 2px; }
.p0-month-text-event { height: 22px !important; min-height: 22px !important; max-height: 22px !important; overflow: hidden; display: block; }
.p0-month-text-event .p0-calendar-event-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 16px; }

/* R4: date first, lunar beside it, calendar markers below. */
.p0-calendar-month-scroll .p0-calendar-month-day {
  align-items: flex-start; padding: 2px 2px 12px !important; gap: 3px;
}
.p0-calendar-month-scroll .p0-calendar-date-number { font-size: 13px; }
.p0-calendar-month-scroll .lunar-label { margin-top: 5px; }
.p0-calendar-month-scroll .p0-calendar-marker { top: auto; bottom: 1px; color: #C74E46; }
.p0-calendar-month-scroll .p0-calendar-marker.is-workday { color: #248052; }

.p0-calendar-month-scroll .p0-calendar-month-day.selected { align-items: flex-start; padding: 2px 2px 12px !important; gap: 3px; }