/* mobile-sheets: phone (≤760px) and tablet (761–1100px) layout — every popup as an app sheet.
   Phone: full-screen sheets that slide up, a sticky top bar with the title and ✕, a bottom action
   bar, a grabber to drag down (mobile-sheets.js), dropdowns and the people picker as bottom sheets,
   and the confirm box as a small action sheet. Tablet: large centred sheets with a 24px margin.
   Desktop (>1100px) is untouched. */

/* search's "Cancel" (added by mobile-sheets.js) shows on phones, tablets and touch screens only;
   the task popup's scrolled-bar title (also added by mobile-sheets.js) shows only on narrow screens */
.sheet-cancel, .sheet-title { display: none; }
@media (max-width: 1100px), (hover: none) and (pointer: coarse) {
  .sheet-cancel { display: inline-flex; flex: none; align-items: center; height: 40px; padding: 0 8px; border: 0; border-radius: 8px; background: none; color: var(--accent); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
  .sheet-cancel:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .pm-search-bar kbd { display: none; }
}

/* ================================================================ tablet */
@media (min-width: 761px) and (max-width: 1100px) {
  dialog.panel:not(.em-ask) { max-width: calc(100vw - 48px); max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); }
  .pm-add-modal .pm-compose, .pm-notes { max-height: calc(100dvh - 48px); }
  .pm-talk-list { max-height: none; }
  .pm-week-tiles { max-height: none; }

  /* the top bar (title and ✕) stays at the top while a long sheet scrolls, edge to edge */
  /* (a sticky bar stops at the scroller's padding, so where the scroller itself is padded, top
     is minus that padding: New task's box scrolls with 24px, Week and Talk with 22px) */
  dialog.panel .panel-inner > .panel-head, .pm-add-modal .pm-compose > .pm-add-head,
  dialog.panel:is(.pm-week-pop, .pm-talk) > :is(.pm-week-head, .pm-talk-head), .pm-np-form > .pm-np-head {
    position: sticky; top: 0; z-index: 5; box-sizing: border-box; min-height: 64px;
    margin: -24px -24px 0; padding: 12px 16px 12px 24px; border-bottom: 1px solid var(--line); background: var(--surface);
  }
  .pm-add-modal .pm-compose > .pm-add-head { top: -24px; }
  dialog.panel:is(.pm-week-pop, .pm-talk) > :is(.pm-week-head, .pm-talk-head) { top: -22px; margin-top: -22px; }
  .pm-np-form > .pm-np-head { margin-top: -22px; }

  /* task popup: two columns of fields so Next move and Due aren't cut short. Next move gets a line
     of its own; then Start · Due, Project · Space, Status · Priority */
  #pm-panel .pm-props { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #pm-panel .pm-prop:is([data-prop="next"], [data-prop="assignees"]) { grid-column: 1 / -1; }
  #pm-panel .pm-prop:is([data-prop="project"], [data-prop="space"], [data-prop="status"], [data-prop="priority"]) { grid-column: auto; }
}
/* side-by-side task popup on a tablet: a little more room for the details */
@media (min-width: 901px) and (max-width: 1100px) {
  #pm-panel .pm-modal-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  #pm-panel .pm-history-panel { width: calc(600% / 11); } /* History covers the whole details column, not half of it */
}

/* phone and tablet: New task's Assignees button, styled like the task popup's (it had no style) */
@media (max-width: 1100px) {
  #pm-add-panel .pm-assignees { display: flex; align-items: center; gap: 8px; width: calc(100% + 8px); height: 40px; margin-left: -8px; padding: 0 8px; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
  #pm-add-panel .pm-assignees:focus-visible, #pm-add-panel .pm-assign.open .pm-assignees { border-color: var(--accent); outline: none; }
  #pm-add-panel .pm-assign-empty { color: var(--muted); }
}

/* phone and tablet up to 900px: the task popup stacks the tile on top of the details and scrolls as
   one. Picture on the left, Delete / History / ✕ on the right, floating at the top of the sheet; once
   the tile's chip row reaches them they sit in a solid bar with the task's name (mobile-sheets.js adds
   .sheet-scrolled). History covers the whole sheet, with its own top bar. */
@media (max-width: 900px) {
  #pm-panel[open] { display: flex; flex-direction: column; overflow: hidden; }
  #pm-panel .pm-modal-grid { position: static; display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  #pm-panel .pm-notes { max-height: none; overflow: visible; }
  #pm-panel .pm-poster-body { padding-top: calc(64px + env(safe-area-inset-top, 0px)); }
  #pm-panel .pm-notes-head {
    position: absolute; top: 0; left: 0; right: 0; z-index: 5; justify-content: flex-end; gap: 8px;
    box-sizing: border-box; height: calc(56px + env(safe-area-inset-top, 0px)); margin: 0; padding: env(safe-area-inset-top, 0px) 12px 0;
    border-bottom: 1px solid transparent; pointer-events: none; transition: background-color .15s, border-color .15s;
  }
  #pm-panel .pm-notes-head > .pm-label { display: none; }
  #pm-panel .pm-notes-head > * { pointer-events: auto; }
  #pm-panel .pm-notes-head .icon-btn { width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; background: rgba(10, 15, 28, .6); color: #fff; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  #pm-panel .pm-notes-head .icon-btn svg { width: 20px; height: 20px; }
  #pm-panel .pm-notes-head #pm-history-btn.on { border-color: var(--accent); color: var(--accent); }
  /* scrolled past the tile: a real top bar, the task's name on the left and plain buttons */
  #pm-panel.sheet-scrolled .pm-notes-head { border-bottom-color: var(--line); background: var(--surface); pointer-events: auto; }
  #pm-panel.sheet-scrolled .pm-notes-head .icon-btn { border-color: transparent; background: none; color: var(--text); backdrop-filter: none; -webkit-backdrop-filter: none; }
  #pm-panel.sheet-scrolled .pm-notes-head #pm-history-btn.on { color: var(--accent); }
  #pm-panel.sheet-scrolled .pm-notes-head .sheet-title { display: block; flex: 1 1 auto; min-width: 0; margin: 0 auto 0 4px; overflow: hidden; color: var(--text); font-size: 17px; font-weight: 600; line-height: 22px; white-space: nowrap; text-overflow: ellipsis; }
  #pm-panel.sheet-scrolled::before { display: none; }
  /* the picture button lines up with them on the left */
  #pm-panel .pm-pic-btn { top: calc(env(safe-area-inset-top, 0px) + 8px); left: 12px; right: auto; width: 40px; height: 40px; }
  #pm-panel .pm-pic-menu { top: calc(env(safe-area-inset-top, 0px) + 56px); left: 12px; right: auto; }
  /* History covers the whole sheet, with its own top bar */
  #pm-panel .pm-history-panel { position: absolute; inset: 0; z-index: 8; width: 100%; padding-top: env(safe-area-inset-top, 0px); border-left: 0; box-shadow: none; }
  #pm-panel .pm-history-head { min-height: 56px; padding: 0 8px 0 16px; }
  #pm-panel .pm-history-head b { font-size: 17px; }
}
@media (min-width: 761px) and (max-width: 900px) {
  #pm-panel .pm-poster { min-height: 280px; }
}

/* ================================================================ phone */
@media (max-width: 760px) {
  /* every popup fills the screen and scrolls inside itself */
  dialog.panel:not(.em-ask) {
    width: 100%; max-width: 100%; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh;
    margin: 0; border: 0; border-radius: 0; box-shadow: none;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  /* it slides up from the bottom */
  dialog.panel[open] { animation: sheet-up .32s cubic-bezier(.2, .8, .2, 1); }
  dialog.panel.sheet-dragging { animation: none; transition: none; }
  dialog.panel.sheet-settle { transition: transform .22s cubic-bezier(.2, .8, .2, 1); }

  /* the grabber: a short bar at the top that says "drag me down" */
  dialog.panel::before { content: ""; position: absolute; top: calc(env(safe-area-inset-top, 0px) + 6px); left: 50%; z-index: 10; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: color-mix(in srgb, var(--muted) 45%, transparent); pointer-events: none; }

  /* ---- the top bar: title on the left, ✕ on the right, stuck to the top while you scroll ---- */
  dialog.panel :is(.panel-head, .pm-add-head, .pm-week-head, .pm-talk-head, .pm-np-head) {
    position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    box-sizing: border-box; min-height: calc(56px + env(safe-area-inset-top, 0px));
    margin: 0 -16px; padding: env(safe-area-inset-top, 0px) 8px 0 16px;
    border-bottom: 1px solid var(--line); background: var(--surface);
  }
  dialog.panel :is(.panel-head h2, .pm-add-head .pm-label, .pm-talk-head h2, .pm-np-head h2) { margin: 0; font-family: inherit; font-size: 17px; font-weight: 600; line-height: 22px; letter-spacing: 0; }
  /* the sheets' own side gutters (16px) and room above the home bar */
  dialog.panel .panel-inner { padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .pm-add-modal .pm-compose { max-height: none; overflow: visible; padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .pm-np-form { padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  dialog.panel:is(.pm-week-pop, .pm-talk) { padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
  .pm-week-pop > .pm-week-wait, .pm-week-pop > .error { margin-top: calc(64px + env(safe-area-inset-top, 0px)); }
  .pm-add-head + * { margin-top: 16px; }
  .pm-week-head + *, .pm-np-head + * { margin-top: 16px; }

  /* tap targets: 40px or more */
  dialog.panel .icon-btn { width: 40px; height: 40px; }
  dialog.panel .icon-btn svg { width: 20px; height: 20px; }
  dialog.panel .btn { min-height: 44px; }
  dialog.panel .btn.small { min-height: 40px; }
  /* 16px text in boxes so the phone doesn't zoom in when you type */
  dialog.panel :is(input:not([type=checkbox], [type=radio], [type=range], [type=color]), select, textarea) { font-size: 16px; }
  dialog.panel :is(input:not([type=checkbox], [type=radio], [type=range], [type=color], [type=date]), select) { min-height: 44px; }

  /* ---- bottom action bars: the main button sits above the home bar, full width ---- */
  #item-panel .panel-foot, .pm-talk-foot, .pm-week-btns, .pm-np-btns {
    position: sticky; bottom: 0; z-index: 4; display: flex; gap: 8px;
    margin: 16px -16px calc(-24px - env(safe-area-inset-bottom, 0px)); padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line); background: var(--surface);
  }
  #item-panel .panel-foot { flex-wrap: wrap; }
  #item-panel .panel-foot .btn.primary { flex: 1 1 100%; order: 1; margin-left: 0; }
  #item-panel .panel-foot .btn:not(.primary) { flex: 1 1 0; }
  .pm-talk-foot .btn, .pm-week-btns .btn, .pm-np-btns .btn { flex: 1; height: 48px; }
  /* short sheets still put that bar at the bottom of the screen */
  dialog.panel:is(.pm-week-pop, .pm-talk)[open] { display: flex; flex-direction: column; }
  dialog.panel:is(.pm-week-pop, .pm-talk) > * { flex-shrink: 0; }
  dialog.panel .panel-inner, .pm-np-form { box-sizing: border-box; min-height: 100%; }
  #item-panel .panel-foot, .pm-talk-foot, .pm-week-btns, .pm-np-btns { margin-top: auto; }

  /* New task: "Add to board" leaves the Section/Map row and becomes the sheet's bottom action bar,
     after More, so it's in reach however far down you've filled things in */
  #pm-add-panel .pm-compose { display: flex; flex-direction: column; box-sizing: border-box; min-height: 100%; }
  #pm-add-panel .pm-compose > * { flex-shrink: 0; }
  #pm-add-panel .pm-compose-row.bottom { display: contents; }
  #pm-add-panel .pm-compose-row.bottom > .field { flex: none; margin-top: 12px; }
  #pm-add-panel .pm-compose-row.bottom > .field:first-child { margin-top: 16px; }
  #pm-add-panel #pm-add {
    position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 4; order: 10; flex: none;
    width: 100%; height: 48px; margin-top: auto;
    /* the bar behind it: surface-coloured, a hairline on top; shifted sideways so its rounded ends fall off-screen */
    box-shadow: -48px 0 0 16px var(--surface), 48px 0 0 16px var(--surface), -48px -1px 0 16px var(--line), 48px -1px 0 16px var(--line);
  }
  #pm-add-panel .pm-more { margin-bottom: 28px; }

  /* ---- task popup: the tile on top, details below; ✕ / History / Delete float at the top ---- */
  /* (the stacked layout and the floating buttons are in the ≤900px block above) */
  #pm-panel .pm-poster { min-height: 0; }
  #pm-panel .pm-poster-body { padding-left: 16px; padding-right: 16px; }
  #pm-panel .pm-poster .pm-title-input { font-size: 28px; line-height: 34px; }
  #pm-panel .pm-chips { padding: 20px 16px 20px; }
  #pm-panel .pm-notes { padding: 20px 16px calc(32px + env(safe-area-inset-bottom, 0px)); }
  #pm-panel .pm-pic-menu { right: 12px; width: auto; }
  /* bigger pills and their ×, Assign and Finish */
  #pm-panel .pm-chips .pm-chip { height: 40px; padding: 0 14px; font-size: 13px; }
  #pm-panel .pm-chip-x { display: inline-grid; place-items: center; width: 40px; height: 40px; margin: 0 -14px 0 -10px; font-size: 16px; }
  #pm-panel .pm-poster-who .pm-assignees { height: 40px; }
  #pm-panel .pm-finish { height: 44px; padding: 0 22px; }
  dialog.panel .pm-st-btn { width: 40px; height: 40px; }
  #pm-panel .pm-props .pm-prop-value input:not([type=checkbox]) { height: 44px; }
  /* the real selects under the custom dropdowns (and the plain ones) get the same 44px as the row */
  dialog#pm-panel.pm-modal .pm-props .pm-prop-value select, dialog#pm-panel #pm-place select, dialog.panel select.pm-menu-native { height: 44px; min-height: 44px; }
  #pm-panel .pm-props .pm-prop-value { min-height: 44px; }
  /* a chip's colour dot keeps its look but gets a finger-sized hit area */
  #pm-panel .pm-chip-tone { width: 40px; height: 40px; margin: 0 -14px 0 -16px; border-radius: 0; background: radial-gradient(circle, currentColor 0 5px, transparent 5.5px); }
  #pm-panel .pm-fact-add { min-height: 40px; }
  #pm-panel .pm-history-panel .pm-history-list { padding: 12px 16px calc(24px + env(safe-area-inset-bottom, 0px)); }

  /* rows inside the task fields (both popups): roomier lines */
  dialog.panel .pm-menu-btn { height: 44px; }
  dialog.panel .pm-check-row { min-height: 44px; }
  dialog.panel .pm-x { width: 40px; height: 40px; }
  .pm-more summary { min-height: 48px; box-sizing: border-box; align-items: center; }

  /* ---- dropdown lists and the people picker: bottom sheets over a dimmed sheet ---- */
  dialog.panel .pm-menu-list {
    top: auto !important; left: 8px !important; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); min-width: 0 !important;
    max-height: min(60vh, 440px); max-height: min(60dvh, 440px); padding: 8px; border-radius: 16px;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5), 0 -8px 40px rgba(0, 0, 0, .4);
    overscroll-behavior: contain;
  }
  dialog.panel .pm-menu-opt { min-height: 48px; padding-left: 14px; font-size: 16px; }
  dialog.panel .pm-assign-pop {
    position: fixed; top: auto; left: 8px !important; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); z-index: 100;
    width: auto; max-width: none; padding: 12px; border-radius: 16px;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5), 0 -8px 40px rgba(0, 0, 0, .4);
  }
  dialog.panel .pm-assign-list { max-height: 45vh; max-height: 45dvh; overscroll-behavior: contain; }
  dialog.panel .pm-assign-opt { min-height: 48px; }
  #pm-panel .pm-assign-pop input.pm-assign-search, #pm-add-panel .pm-assign-pop input.pm-assign-search { height: 44px; min-height: 44px; font-size: 16px; }
  /* the open picker sits above the floating buttons */
  #pm-panel .pm-poster-body:has(.pm-assign-pop:not([hidden])) { z-index: 9; }
  dialog.panel .pm-assign:has(.pm-assign-pop:not([hidden])) { z-index: 9; }
  /* while one is open the sheet behind is out of play: a deeper dim, no grabber, and the floating
     buttons fade with it (taps on the dim only close the list; mobile-sheets.js) */
  dialog.panel:has(.pm-menu-list:not([hidden]), .pm-assign-pop:not([hidden]))::before { display: none; }
  #pm-panel:has(.pm-menu-list:not([hidden]), .pm-assign-pop:not([hidden])) :is(.pm-notes-head, .pm-pic-btn) { opacity: .35; }

  /* ---- search: the box is the top bar, results fill the rest ---- */
  #pm-search[open] { display: flex; flex-direction: column; overflow: hidden; }
  #pm-search .pm-search-bar { flex: none; gap: 10px; box-sizing: border-box; min-height: calc(56px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 8px 0 16px; background: var(--surface); }
  #pm-search .pm-search-bar input { height: 56px; min-width: 0; font-size: 16px; text-overflow: ellipsis; }
  #pm-search .pm-search-bar input::placeholder { text-overflow: ellipsis; }
  #pm-search .pm-search-results { flex: 1 1 auto; min-height: 0; max-height: none; padding: 6px 8px calc(16px + env(safe-area-inset-bottom, 0px)); overscroll-behavior: contain; }
  #pm-search .pm-search-row { min-height: 56px; }
  /* the search box is the whole top bar: no grabber crowding it (drag the bar itself to close) */
  #pm-search::before { display: none; }

  /* ---- Access (Settings → Users): bigger ticks and presets ---- */
  #access-panel .perm-cell { width: 40px; height: 40px; }
  #access-panel .pma-grid thead th { width: 44px; }
  #access-panel .pma-presets .perm { height: 40px; padding: 0 12px; font-size: 13px; }
  #access-panel .perm { min-height: 40px; }
  #access-panel .access-app { padding-left: 14px; padding-right: 14px; }

  /* ---- talk: the tags and rows are full-size taps ---- */
  .pm-talk-tag { height: 40px; padding: 0 12px; }
  .pm-talk-list { max-height: none; }
  .pm-talk-list input { height: 44px; }
  .pm-week-tiles { max-height: none; }
  .pm-np-sw { width: 40px; height: 40px; }

  /* ---- Roadmap's project popup: its sticky head clears the notch ---- */
  .pmv-rm-pop-head { padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
  .pmv-rm-pop-body { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

  /* ---- the confirm box: a small action sheet at the bottom, buttons stacked ---- */
  dialog.panel.em-ask {
    width: 100%; max-width: 100%; max-height: calc(100dvh - env(safe-area-inset-top, 0px) - 24px);
    margin: auto 0 0; border: 0; border-top: 1px solid var(--line); border-radius: 16px 16px 0 0;
  }
  dialog.panel.em-ask::before { top: 8px; }
  .em-ask-inner { gap: 8px; padding: 28px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .em-ask-title { font-size: 17px; text-align: center; }
  .em-ask-body { text-align: center; }
  .em-ask-btns { flex-direction: column-reverse; gap: 8px; margin-top: 12px; }
  .em-ask-btns .btn { width: 100%; height: 48px; }
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  dialog.panel[open] { animation: none; }
  dialog.panel.sheet-settle { transition: none; }
}