/* mobile-pm: phone (≤760px) and tablet (761–1100px) layout — see the matching builder's notes */
/* The Project Management pages: 40K View, Horizons, Roadmap, Dates, Map, Board, Completed.
   Phones read like an app: a smaller hero, the board as one list of full-width cards grouped by
   section, and every button at least 40px tall. Tablets keep the board's four status columns and
   put each section's name on its own row above them. Desktop (over 1100px) is untouched. */

/* ================================================================ phone */
@media (max-width: 760px) {
  .main.pm { --btn-h-sm: 40px; padding-top: 20px; } /* the app bar already names the page */

  /* hero: eyebrow, a 32px title, the read-out underneath */
  .main.pm .pm-head { margin-bottom: 20px; }
  .main.pm .pm-alt { font-size: 11px; line-height: 16px; letter-spacing: .14em; }
  .main.pm .pm-title-row { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 4px; }
  .main.pm .pm-head h1 { font-size: 32px; line-height: 1.1; letter-spacing: -.025em; }
  .main.pm .pm-head-right { width: 100%; }
  .main.pm .pm-read { max-width: none; font-size: 13px; line-height: 1.6; text-align: left; }
  .pm-bar { height: 8px; margin-top: 20px; }
  .pm-key { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin-top: 14px; }
  .pm-key span { min-width: 0; }
  .pm-key b { margin-left: auto; font-size: 18px; }

  /* 40K board: no box around it, just the list */
  #projects-page .pm-lanes-wrap { margin-top: 8px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  #projects-page .pm-lanes-head { flex-wrap: wrap; align-items: center; row-gap: 12px; margin-bottom: 4px; }
  #projects-page .pm-lanes-head h2 { flex: 1 1 100%; font-size: 20px; }
  #projects-page .pm-lanes-head .pm-label { display: none; }
  .pm-scope { display: flex; flex: 1 1 100%; margin-left: 0; padding: 3px; }
  .pm-scope button { flex: 1 1 0; height: 40px; font-size: 14px; }
  #projects-page .pm-lanes-scroll { overflow: visible; } /* lets the section names stick under the app bar */

  /* the board as a list: section, then its cards by status (as app.css does under 700px) */
  .pm-lanes { grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 10px; }
  .pm-lanes > div:first-child, .pm-lanes .pm-lh { display: none; }
  .pm-lanes .pm-cell:not(:has(.pm-card)) { display: none; }
  .pm-lanes .pm-area { align-items: center; margin: 12px -16px 0; padding: 10px 16px; font-size: 17px; line-height: 24px; letter-spacing: -.01em; }
  .pm-lanes .pm-area .icon-btn { width: 40px; height: 40px; margin: -8px -10px -8px 0; opacity: .7; }
  .pm-lanes .pm-area .icon-btn svg { width: 16px; height: 16px; }
  /* Section names stick under the app bar only where the browser can tell a stuck header (scroll-state
     queries): there the delete-section × is switched off while stuck, so a scrolling thumb can't land on it.
     Elsewhere (iOS Safari today) the names scroll with the list, so a live × is never parked under the bar. */
  @supports (container-type: scroll-state) {
    .pm-lanes .pm-area {
      position: sticky; top: var(--appbar-h, 56px); z-index: 2; container-type: scroll-state;
      background: var(--bg); /* opaque: cards scrolling underneath never show through */
    }
    @container scroll-state(stuck: top) {
      .pm-lanes .pm-area .icon-btn { visibility: hidden; pointer-events: none; }
    }
  }
  .pm-lanes .pm-cell { gap: 10px; min-height: 0; padding: 0; border-radius: 16px; background: none; }
  .pm-lanes .pm-cell.over { padding: 6px; background: rgba(52, 211, 153, .06); }
  .pm-lanes .pm-cell::before { display: flex; align-items: center; gap: 8px; margin: 6px 2px 0; color: var(--muted); font-size: 11px; font-weight: 600; line-height: 16px; letter-spacing: .1em; text-transform: uppercase; }
  .pm-lanes .pm-cell[data-status=next]::before { content: "Up next"; }
  .pm-lanes .pm-cell[data-status=moving]::before { content: "In motion"; }
  .pm-lanes .pm-cell[data-status=waiting]::before { content: "Waiting on others"; }
  .pm-lanes .pm-cell[data-status=done]::before { content: "Done"; }

  /* cards: full width, roomy, a 40px step button */
  .pm-card { padding: 14px 14px 14px 18px; border-radius: 16px; }
  .pm-card:hover { transform: none; }
  .pm-card:active { transform: scale(.985); }
  .pm-card-top { gap: 10px; min-height: 40px; margin: -4px -4px 0 0; }
  .pm-due { font-size: 13px; }
  .pm-card .pm-cyc { height: 40px; padding: 0 16px; font-size: 13px; }
  .pm-card h4 { margin: 6px 0 4px; font-size: 17px; line-height: 24px; }
  .pm-next { font-size: 14px; line-height: 20px; }

  /* + Section and Close the week under the list */
  .pm-lanes-foot { gap: 8px; margin-top: 18px; }
  .pm-lanes-foot .btn { flex: 1 1 0; }
  .pm-week-phone { display: inline-flex; justify-content: center; margin-left: 0; }
  .main.pm .pm-principles { gap: 8px; margin-top: 28px; }

  /* section boxes on the other views: lighter padding so the content gets the width */
  .main.pm-view :is(.pmv-hz-park, .pmv-rm-wrap) { padding: 16px; }
  .main.pm-view .pmv-map-box { padding: 16px 12px; }
  .main.pm-view :is(.pmv-map-tools, .pmv-bd-tools) .btn { flex: 1 1 calc(50% - 4px); }

  /* Horizons */
  .pmv-hz-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 20px; }
  .pmv-hz-col { padding: 14px 10px 10px; }
  .pmv-hz-item { min-height: 44px; padding: 10px 8px; font-size: 15px; line-height: 21px; }
  .pmv-hz-pick { display: grid; flex: 1 1 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-right: -28px; } /* under the text, clear of the × */
  .pmv-hz-pick button { height: 40px; padding: 0 4px; font-size: 13px; }
  .pmv-hz-x { width: 40px; height: 40px; }
  .pmv-hz-park-row { padding-top: 10px; padding-bottom: 10px; }

  /* Roadmap: the stream names read as list rows */
  .pmv-rm-meta { min-height: 48px; }
  .pmv-rm-x { width: 40px; height: 40px; }
  .pmv-rm-swatch { width: 36px; height: 36px; }

  /* Dates: the agenda is the phone's list; the day popover sits above the tab bar */
  .pmv-dt-next { margin: 20px 0 20px; }
  .pmv-dt-ag { min-height: 52px; border-radius: 14px; }
  .pmv-dt-nav .btn { min-width: 40px; }
  /* the period on its own line, then ← Today → at the left: the next arrow stays clear of the round
     buttons in the bottom-right corner when the page opens with this row near the bottom of the screen */
  .pmv-dt-nav { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); gap: 8px; }
  .pmv-dt-nav .pmv-dt-title { grid-row: 1; grid-column: 1 / -1; margin: 0 2px; overflow: visible; white-space: normal; text-align: left; }
  .pmv-dt-pop { bottom: calc(var(--tabbar-h, 64px) + 12px); }
  .pmv-dt-x { width: 40px; height: 40px; top: 4px; right: 4px; }
  /* month grid at dot size (pm-view-dates.css, up to 700px): the chips are only colour marks, so the
     whole day cell is the target (tapping a day pins a deadline there); items open from the agenda below */
  @media (max-width: 700px) {
    .pmv-dt-cal .pmv-dt-chip { pointer-events: none; }
    .pmv-dt-cal .pmv-dt-dn { min-width: 26px; padding: 2px 4px; font-size: 12px; line-height: 20px; }
    .pmv-dt-day:has(button.pmv-dt-dn):active { background: rgba(52, 211, 153, .1); }
  }

  /* Map: + on every row, always shown and finger sized */
  .pmv-map-node { min-height: 40px; }
  .pmv-map-row { padding-right: 48px; } /* each branch's + ends clear of the round buttons on the right */
  .pmv-map-add { width: 40px; height: 40px; opacity: .9; }
  .pmv-map-card, .pmv-map-ws, .pmv-map-move { width: 100%; }
  .pmv-map-move { height: 40px; }

  /* Board: whole tick rows are the target */
  .pmv-bd-notes .pmv-bd-subs label { align-items: center; min-height: 40px; }
  .pmv-bd-subs input[type=checkbox] { width: 20px; min-width: 20px; height: 20px; margin: 0; }
  .pmv-bd-btns .pm-finish { height: 40px; }

  /* Completed + Trash */
  .pmv-dn-tabs { display: flex; margin-bottom: 20px; }
  .pmv-dn-tab { flex: 1; justify-content: center; height: 40px; font-size: 14px; }
  .pmv-dn-bin { width: 40px; height: 40px; }
  .pmv-dn-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .pmv-dn-card { border-radius: 16px; }
  .pmv-tr-row { min-height: 64px; padding-left: 14px; }
  .pmv-tr-head .btn { flex: none; white-space: nowrap; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .pm-card:active { transform: none; }
}

/* ================================================================ tablet */
@media (min-width: 761px) and (max-width: 1100px) {
  /* 40K board: four status columns across the full width, each section's name a row above */
  #projects-page .pm-lanes-wrap { padding: 20px; }
  #projects-page .pm-lanes-scroll { overflow: visible; }
  .pm-lanes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; min-width: 0; }
  .pm-lanes > div:first-child { display: none; } /* the empty corner above the section names */
  .pm-lh { align-self: end; flex-wrap: wrap; gap: 6px; padding: 0 2px 6px; font-size: 11px; line-height: 16px; letter-spacing: .06em; }
  .pm-lh .pm-week-btn { height: 32px; margin: -8px 0 -8px auto; padding: 0 8px; white-space: nowrap; } /* adds no height: DONE stays level with the other headers */
  .pm-lanes .pm-area { grid-column: 1 / -1; align-items: center; margin-top: 10px; padding: 12px 2px 2px; border-top: 1px solid var(--line); font-size: 16px; }
  .pm-lanes .pm-lh + .pm-area { margin-top: 0; border-top: 0; }
  .pm-cell { min-height: 72px; padding: 6px; border-radius: 12px; }
  .pm-card { padding: 10px 10px 10px 13px; }
  .pm-card-top { flex-wrap: wrap; row-gap: 6px; } /* the step button drops under the date when the column is narrow */
  .pm-card .pm-cyc { height: 28px; }
  .pm-card h4 { font-size: 15px; line-height: 21px; overflow-wrap: break-word; }
  .pm-next { font-size: 12.5px; line-height: 18px; }

  /* Horizons: two columns, so headings and items keep their lines */
  .pmv-hz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Completed: cards share the width */
  .pmv-dn-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
/* narrow tablets: a slimmer frame so each column keeps room for its cards */
@media (min-width: 761px) and (max-width: 900px) {
  #projects-page .pm-lanes-wrap { padding: 16px 12px; }
  .pm-cell { padding: 4px; }
  .pm-card { padding: 10px 9px 10px 12px; }
  .pm-lh .pm-week-btn { display: none; } /* Close the week moves under the board, beside + Section */
  .pm-week-phone { display: inline-flex; margin-left: auto; }
}