/*
 * Native touch corrections for the built-in World apps.
 *
 * This file is loaded after the sealed World reference bundle.  It is scoped
 * to coarse pointers and small/touch-sized viewports so the desktop reference
 * layout remains the comparison boundary.  The reference bundle itself is
 * intentionally left unchanged.
 */

@media (pointer: coarse) and (max-width: 1024px),
       (pointer: coarse) and (max-height: 500px) {
  /* Keep the primary native-app controls usable when the shell is touch sized. */
  .desktop .app-window-notes .notes-main .app-toolbar > button,
  .desktop .app-window-calendar .calendar-main .app-toolbar > button,
  .desktop .app-window-calendar .calendar-agenda-heading > button,
  .desktop .app-window-calendar .calendar-add-event,
  .desktop .app-window-calendar .calendar-sheet-top > button,
  .desktop .app-window-calendar .calendar-sheet-actions > button,
  .desktop .app-window-settings .sys-settings-sidebar button {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  .desktop .app-window-notes .notes-main .app-toolbar > button,
  .desktop .app-window-calendar .calendar-main .app-toolbar > button,
  .desktop .app-window-calendar .calendar-agenda-heading > button,
  .desktop .app-window-calendar .calendar-add-event,
  .desktop .app-window-calendar .calendar-sheet-top > button,
  .desktop .app-window-calendar .calendar-sheet-actions > button,
  .desktop .app-window-settings .sys-settings-sidebar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* The reference bundle removes these rings; restore a visible keyboard/touch
     focus state for fields that can be reached after a touch or keyboard handoff. */
  .desktop .app-window-notes :is(.notes-search input, .notes-title, .notes-body):focus-visible,
  .desktop .app-window-calendar :is(.calendar-event-title, .calendar-event-sheet input):focus-visible,
  .desktop .app-window-settings :is(.sys-search input, input, textarea, select):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent, #1687f9) 72%, transparent) !important;
    outline-offset: 2px !important;
  }

  /* Notes: retain the status text while giving the three toolbar actions a
     stable row at narrow phone widths. */
  .desktop .app-window-notes .notes-main .app-toolbar {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px 44px;
    align-items: center;
    gap: 4px !important;
    min-height: 52px !important;
    padding: 4px 8px !important;
  }

  .desktop .app-window-notes .notes-main .app-toolbar > .spacer {
    display: none !important;
  }

  .desktop .app-window-notes .notes-main .app-toolbar > button[aria-label="Delete note"] {
    grid-column: 1;
  }

  .desktop .app-window-notes .notes-main .app-toolbar > .notes-auto-save {
    grid-column: 2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .desktop .app-window-notes .notes-main .app-toolbar > button[aria-label="Export note"] {
    grid-column: 3;
  }

  .desktop .app-window-notes .notes-main .app-toolbar > button[aria-label="New note"] {
    grid-column: 4;
  }

  .desktop .app-window-notes .notes-title,
  .desktop .app-window-notes .notes-body,
  .desktop .app-window-notes .notes-search input {
    font-size: 16px !important;
  }

  /* Short landscape Notes windows otherwise let the editor run below the
     clipped app body.  The editor owns the scroll while the app stays fixed. */
  .desktop .app-window-notes .notes-editor {
    min-height: 0 !important;
    overflow: auto !important;
  }

  .desktop .app-window-notes .notes-editor time {
    margin-bottom: 8px !important;
  }

  .desktop .app-window-notes .notes-body {
    min-height: 0 !important;
  }

  /* Calendar toolbar: in a phone column the title gets its own line, leaving
     four full-sized controls on a predictable second row. */
  .desktop .app-window-calendar .calendar-main .app-toolbar {
    align-items: center;
    gap: 4px !important;
    padding: 6px 8px !important;
  }

  .desktop .app-window-calendar .calendar-main .app-toolbar > button {
    flex: 0 0 44px;
    padding: 0 !important;
  }

  .desktop .app-window-calendar .calendar-agenda-heading > button,
  .desktop .app-window-calendar .calendar-add-event {
    padding: 0 !important;
  }

  .desktop .app-window-calendar .calendar-event-title,
  .desktop .app-window-calendar .calendar-event-sheet input[type="date"],
  .desktop .app-window-calendar .calendar-event-sheet input[type="time"] {
    min-height: 44px !important;
    font-size: 16px !important;
  }

  /* Pin Calendar's commit/cancel footer inside the scrollable sheet.  On a
     short landscape viewport the old normal-flow footer sat entirely below
     the visible 204px app body. */
  .desktop .app-window-calendar .calendar-event-sheet {
    position: relative !important;
    padding: 12px 12px 64px !important;
    gap: 8px !important;
  }

  .desktop .app-window-calendar .calendar-sheet-actions {
    position: absolute !important;
    z-index: 3;
    right: 12px;
    bottom: 8px;
    left: 12px;
    min-height: 48px;
    align-items: center;
    justify-content: flex-end;
    gap: 8px !important;
    padding: 4px 0 !important;
    background: var(--panel, #fff) !important;
  }

  .desktop .app-window-calendar .calendar-sheet-actions > button {
    padding: 0 12px !important;
  }

  .desktop .app-window-calendar .calendar-sheet-top > button {
    padding: 0 !important;
  }

  /* Keep a 24px color chip inside a 44px hit box.  Wrapping is intentional so
     the five choices still fit the 320px event sheet without horizontal
     clipping. */
  .desktop .app-window-calendar .calendar-event-colors {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 0 !important;
  }

  .desktop .app-window-calendar .calendar-event-colors > button {
    box-sizing: border-box !important;
    flex: 0 0 44px;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 10px !important;
    background-clip: content-box !important;
  }

  .desktop .app-window-calendar .calendar-all-day {
    min-height: 44px !important;
    align-items: center;
    display: flex !important;
    gap: 6px;
  }

  /* Settings: toggles keep their switch affordance while receiving a 44px
     hit area. */
  .desktop .app-window-settings .sys-toggle {
    position: relative;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .desktop .app-window-settings .sys-toggle::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 5px;
    width: 34px;
    height: 20px;
    border-radius: 20px;
    background: #a9a9ae;
  }

  .desktop .app-window-settings .sys-toggle.on::before {
    background: var(--accent, #1687f9);
  }

  .desktop .app-window-settings .sys-toggle > span {
    position: absolute;
    z-index: 1;
    top: 14px;
    left: 7px;
  }

  .desktop .app-window-settings .sys-toggle.on > span {
    transform: translateX(14px);
  }

  .desktop .app-window-settings .sys-settings-sidebar .sys-search {
    min-height: 44px !important;
  }

}

@media (pointer: coarse) and (max-width: 720px) {
  .desktop .app-window-calendar .calendar-main .app-toolbar {
    flex-wrap: wrap !important;
    min-height: 96px !important;
  }

  .desktop .app-window-calendar .calendar-main .app-toolbar > h2 {
    flex: 1 0 100%;
    font-size: 18px !important;
  }

  .desktop .app-window-calendar .calendar-main .app-toolbar > .spacer {
    display: none !important;
  }

  .desktop .app-window-settings .sys-settings-sidebar button {
    min-height: 44px !important;
  }

}

@media (pointer: coarse) and (max-width: 340px) {
  /* Reflow the narrow Calendar sidebar above the month.  The reference side
     pane leaves only ~180px for the month at 320px, which makes date cells
     cramped and pushes the fourth toolbar action into a clipped row. */
  .desktop .app-window-calendar .calendar-app {
    flex-direction: column !important;
  }

  .desktop .app-window-calendar .calendar-sidebar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 48px 44px;
    flex: 0 0 100px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100px !important;
    min-height: 100px !important;
    gap: 4px;
    overflow: hidden !important;
    padding: 4px 8px !important;
  }

  .desktop .app-window-calendar .calendar-day-card {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    height: 48px;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    padding: 0 4px !important;
  }

  .desktop .app-window-calendar .calendar-day-card small {
    font-size: 10px !important;
  }

  .desktop .app-window-calendar .calendar-day-card strong {
    font-size: 32px !important;
    line-height: 1;
  }

  .desktop .app-window-calendar .calendar-day-card span {
    font-size: 10px !important;
    white-space: nowrap;
  }

  .desktop .app-window-calendar .calendar-calendar-toggle {
    grid-column: 1;
    grid-row: 2;
    min-width: 0;
    min-height: 44px !important;
    margin: 0 !important;
  }

  .desktop .app-window-calendar .calendar-agenda-heading {
    grid-column: 2;
    grid-row: 2;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    font-size: 0;
  }

  .desktop .app-window-calendar .calendar-agenda-heading > button {
    flex: 0 0 44px;
  }

  .desktop .app-window-calendar .calendar-agenda {
    display: none !important;
  }

  .desktop .app-window-calendar .calendar-add-event {
    grid-column: 2;
    grid-row: 1;
    width: 100px !important;
    min-width: 100px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 8px !important;
  }

  .desktop .app-window-calendar .calendar-main {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0;
  }

  .desktop .app-window-calendar .calendar-main .calendar-date {
    box-sizing: border-box;
    width: 100% !important;
    min-width: 36px !important;
    height: 44px !important;
    min-height: 44px !important;
  }

  /* The same 320px width leaves the Notes editor with only ~146px.  Use a
     compact two-row note rail so the list and New Note remain available while
     the editor receives the full app width. */
  .desktop .app-window-notes .notes-app {
    flex-direction: column !important;
    min-width: 0;
    min-height: 0;
  }

  .desktop .app-window-notes .notes-sidebar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 44px 48px;
    flex: 0 0 100px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100px !important;
    min-height: 100px !important;
    gap: 4px;
    overflow: hidden !important;
    padding: 4px 8px !important;
  }

  .desktop .app-window-notes .notes-sidebar-heading {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    min-height: 44px;
  }

  .desktop .app-window-notes .notes-search {
    grid-column: 2;
    grid-row: 1;
    width: 100px !important;
    min-width: 92px;
    min-height: 44px !important;
    margin: 0 !important;
  }

  .desktop .app-window-notes .notes-list {
    grid-column: 1;
    grid-row: 2;
    display: flex !important;
    flex-direction: row !important;
    min-width: 0;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 4px;
  }

  .desktop .app-window-notes .notes-list-item {
    flex: 0 0 132px;
    min-width: 132px;
    min-height: 44px !important;
    max-height: 48px;
    overflow: hidden;
    padding: 6px 8px !important;
  }

  .desktop .app-window-notes .notes-list-item span,
  .desktop .app-window-notes .notes-list-item small {
    display: none !important;
  }

  .desktop .app-window-notes .notes-new-sidebar {
    grid-column: 2;
    grid-row: 2;
    width: 88px !important;
    min-width: 88px !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 0 4px !important;
  }

  .desktop .app-window-notes .notes-main {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0;
  }

  .desktop .app-window-notes .notes-main .app-toolbar {
    grid-template-columns: 44px minmax(16px, 1fr) 44px 44px;
    min-width: 160px;
  }
}

/* A short landscape phone has only the 204px app body below the title bar.
   Collapse the two-pane Settings/Mail navigation into compact horizontal
   rails so the destination content and its primary action remain reachable. */
@media (pointer: coarse) and (min-width: 721px) and (max-height: 500px) {
  .desktop .app-window-calendar .calendar-sheet-backdrop {
    align-items: flex-start !important;
    overflow: auto !important;
    padding: 8px !important;
  }

  /* Let the short landscape backdrop own the scroll.  The footer then sticks
     to that scrollport while the title/date/time/color controls can each be
     brought into view, instead of an absolutely positioned footer scrolling
     away with the form contents. */
  .desktop .app-window-calendar .calendar-event-sheet {
    max-height: none !important;
    overflow: visible !important;
    padding: 12px 12px 56px !important;
  }

  .desktop .app-window-calendar .calendar-sheet-actions {
    position: sticky !important;
    top: auto !important;
    right: auto !important;
    bottom: -4px !important;
    left: auto !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    background: var(--panel, #fff) !important;
  }

  .desktop .app-window-settings .sys-settings {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0;
    min-height: 0;
    overflow: hidden !important;
  }

  .desktop .app-window-settings .sys-settings-sidebar {
    flex: 0 0 56px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 56px !important;
    min-height: 56px !important;
    flex-direction: row !important;
    align-items: center;
    gap: 4px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 4px !important;
  }

  .desktop .app-window-settings .sys-settings-sidebar .sys-account {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: center;
  }

  .desktop .app-window-settings .sys-settings-sidebar .sys-account > div {
    display: none !important;
  }

  .desktop .app-window-settings .sys-settings-sidebar > label {
    display: none !important;
  }

  .desktop .app-window-settings .sys-settings-sidebar .sys-search {
    flex: 0 0 140px;
    width: 140px !important;
    margin: 0 !important;
  }

  .desktop .app-window-settings .sys-settings-sidebar button {
    flex: 0 0 112px;
    min-width: 112px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    white-space: nowrap;
  }

  .desktop .app-window-settings .sys-settings-main {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0;
    min-height: 0 !important;
    overflow: auto !important;
    padding: 10px 12px !important;
  }

}