/* =====================================================================
   STF Taskboard — responsive layer
   Desktop-first. These rules only reshape narrow viewports.
   ===================================================================== */

/* chrome that is desktop-hidden by default */
.tb-menu-btn { display: none; }
.tb-app.is-collapsed .tb-menu-btn { display: grid; }
.tb-scrim { display: none; }

.tb-menu-btn {
  width: 36px; height: 36px; place-items: center; flex: none;
  border: none; background: none; color: var(--fg-2); cursor: pointer;
  border-radius: var(--radius-md); margin-left: -6px;
}
.tb-menu-btn:hover { background: var(--bg-3); color: var(--fg-1); }

/* horizontal-scroll wrappers — inert on desktop */
.tb-htable { min-width: 0; }

/* ---------------------------------------------------------------------
   PROJECTS MATRIX — adapt cards-per-row to window width
   (≈5 on large desktop, fewer as it narrows)
   --------------------------------------------------------------------- */
@media (max-width: 1380px) { .tb-matrix { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1120px) { .tb-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tb-pmatrix { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .tb-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 470px)  { .tb-matrix { grid-template-columns: 1fr; } .tb-pmatrix { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   TASK PAGE — keep 3 zones legible as the window narrows
   --------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .tb-pool2 { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1000px) {
  .tb-brief.expanded { width: 300px; }
  .tb-brief-col { width: 300px; }
  .tb-slotgrid { grid-template-columns: repeat(4, 1fr); }
  .tb-pool2 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 820px) {
  .tb-tp-inner { padding: 24px 20px 80px; }
  .tb-slotgrid { grid-template-columns: repeat(3, 1fr); }
  .tb-slotgrid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .tb-pool2 { grid-template-columns: repeat(3, 1fr); }
  /* brief becomes a slim rail by default on small screens */
  .tb-brief.expanded { width: 280px; }
  .tb-brief-col { width: 280px; }
}
@media (max-width: 600px) {
  .tb-slotgrid, .tb-slotgrid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  .tb-pool2 { grid-template-columns: repeat(2, 1fr); }
  .tb-tp-h1 { font-size: 24px; }
  .tb-sheet { padding: 26px 22px; }
  .tb-sheet-grid { grid-template-columns: 1fr; gap: 22px; }
}

/* ---------------------------------------------------------------------
   ≤ 1080px — collapse the task page's two-column layout
   --------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .tb-task-layout { grid-template-columns: 1fr; gap: 24px; }
  .tb-rail { position: static; flex-direction: column; }
  .tb-slots { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------------------
   ≤ 860px — phone / small tablet. Sidebar becomes a drawer.
   --------------------------------------------------------------------- */
@media (max-width: 860px) {
  /* sidebar becomes a fixed drawer — keep the SAME 2-track template (sidebar 0)
     so the track count never changes across the breakpoint (an interpolable,
     non-breaking transition). .tb-main is pinned to column 2, so the out-of-flow
     fixed sidebar can't push it into the wrong column. */
  .tb-app,
  .tb-app.is-collapsed { grid-template-columns: 0 1fr; }

  .tb-side {
    position: fixed; top: 0; left: 0; bottom: 0; width: 272px; z-index: 120;
    transform: translateX(-110%);
    transition: transform var(--dur-base) var(--ease-glide);
    box-shadow: var(--shadow-lg);
  }
  .tb-side.is-open { transform: none; }
  .tb-scrim {
    display: block; position: fixed; inset: 0; z-index: 110;
    background: rgba(8, 8, 8, 0.42); backdrop-filter: blur(2px);
  }
  .tb-menu-btn { display: grid; }

  .tb-topbar { padding: 0 14px; gap: 8px; }
  .tb-scroll-pad { padding: 24px 16px 96px; max-width: none; }
  .labs-root { padding: 24px 16px 96px; max-width: none; }
  .staff-root { padding: 24px 16px 96px; max-width: none; }

  /* topbar page nav compresses */
  .tb-topbar-nav { gap: 12px; }
  .tb-topbar-title { font-size: 19px; }
  .tb-pagetabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tb-pagetab { padding: 5px 9px; white-space: nowrap; }
  /* floating scale follows the full-width content (sidebar is a drawer) */
  .tb-framefloat, .tb-app.is-collapsed .tb-framefloat { left: 16px; bottom: 16px; }

  /* page heads stack */
  .tb-page-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .tb-page-title { font-size: 30px; }
  .tb-page-sub { font-size: 13.5px; }
  .tb-head-actions { flex-wrap: wrap; }

  /* projects index → stacked cards */
  .tb-proj-list { gap: 0; }
  .tb-proj-row {
    display: flex; flex-direction: column; align-items: flex-start; gap: 11px;
    padding: 18px 6px;
  }
  .tb-proj-idx, .tb-proj-row .tb-proj-go { display: none; }
  .tb-proj-name .nm { font-size: 18px; white-space: normal; }
  .tb-proj-prog { width: 100%; }
  .tb-proj-row > .tb-proj-tok, .tb-proj-row > .tb-tag { align-self: flex-start; }

  /* project board */
  .tb-board-hero { grid-template-columns: 1fr; gap: 22px; }
  .tb-board-title { font-size: 32px; }
  .tb-slots { grid-template-columns: repeat(2, 1fr); }

  /* task list → stacked */
  .tb-task-row {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
    padding: 16px;
  }
  .tb-task-row .go { display: none; }

  /* task page */
  .tb-task-h1 { font-size: 28px; }
  .tb-pool-grid { grid-template-columns: repeat(3, 1fr); }
  .tb-stage-bar { flex-wrap: wrap; }
  .tb-stage-anon { margin-left: 0; width: 100%; justify-content: flex-start; padding-top: 4px; }

  /* capacity — let dense tables scroll sideways */
  .tb-hscroll { overflow-x: auto; margin-left: -16px; margin-right: -16px; padding: 0 16px; -webkit-overflow-scrolling: touch; }
  .tb-hscroll .tb-htable { min-width: 660px; }
  .tb-legend { flex-wrap: wrap; gap: 10px 18px; }
  .tb-cap-legend { flex-wrap: wrap; gap: 10px 16px; }
  .tb-cap-legend span:last-child { margin-left: 0; }

  /* team resources */
  .tb-res-grid { grid-template-columns: repeat(2, 1fr); }

  /* sign-in is centered single-column already — just ease the padding */
  .tb-signin-core { padding: 28px; }
}

/* ---------------------------------------------------------------------
   ≤ 560px — tighten the smallest screens
   --------------------------------------------------------------------- */
@media (max-width: 560px) {
  .tb-slots { grid-template-columns: 1fr 1fr; }
  .tb-pool-grid { grid-template-columns: repeat(2, 1fr); }
  .tb-res-grid { grid-template-columns: 1fr; }
  .tb-page-title { font-size: 27px; }
  .tb-crumb { font-size: 12px; }
  .tb-head-actions .tb-btn span { display: inline; }
}