/* Rosters (design D-R2, design/brand/proposed/roster/). One side's week: the side switcher for managers,
   the page header with Pakcu, the grid with coverage rows, and one action under it. Built at 1280 px and
   checked at 390 and 320 px: below 640 px the person column narrows to 64 px so three days show, and the
   grid scrolls inside its own region, never the page. */
.roster-page .small { font-size: var(--g-font-size-small); }
.roster-page .muted { color: var(--g-color-muted); }
.roster-page .meta { display: block; font-size: var(--g-font-size-caption); font-weight: 400; color: var(--g-color-muted); }
.roster-page p { margin: 0; }
.side-control { display: flex; flex-direction: column; gap: var(--g-space-8); margin-bottom: var(--g-space-24); }
.side-control label { font-weight: 600; }
.side-control__row { display: flex; gap: var(--g-space-12); flex-wrap: wrap; }
.side-picker { flex: 1; min-width: 0; max-width: calc(var(--g-size-phone) * 1.5); }
.side-statuses span { display: block; }
.roster-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--g-space-24); margin-bottom: var(--g-space-24); }
.roster-header > div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--g-space-8); min-width: 0; }
.roster-header__title { font-size: var(--g-font-size-display); margin: 0; overflow-wrap: anywhere; }
.roster-header__pose { width: calc(var(--g-space-48) * 2); height: calc(var(--g-space-48) * 3); object-fit: contain; flex-shrink: 0; }
.roster-header .chip { white-space: normal; }
.week-nav { display: flex; flex-wrap: wrap; gap: var(--g-space-8); }
.context { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--g-space-8) var(--g-space-24); margin-bottom: var(--g-space-16); }
.context--late { padding: var(--g-space-16); border-radius: var(--g-radius-card); background: var(--g-color-warning-surface); }
.copy-week { margin-bottom: var(--g-space-16); }
.roster-note { padding: var(--g-space-16); border-radius: var(--g-radius-card); background: var(--g-color-mint); margin-bottom: var(--g-space-16); }
.roster-moment { margin-bottom: var(--g-space-16); }
.roster-moment > * + * { margin-top: var(--g-space-12); }
.published-line { font-size: var(--g-font-size-heading-small); font-weight: 700; }
.hand-placed { padding: var(--g-space-16); border-radius: var(--g-radius-input); background: var(--g-color-warning-surface); }
.roster-card > * + * { margin-top: var(--g-space-16); }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--g-space-8); }
.section-heading h2 { margin: 0; }
.gap-summary { padding: var(--g-space-12) var(--g-space-16); border-radius: var(--g-radius-input); background: var(--g-color-warning-surface); color: var(--g-color-warning); }
.table-scroll { max-width: 100%; overflow-x: auto; }
.roster-grid { width: 100%; min-width: calc(var(--g-size-phone) * 2); border-collapse: collapse; table-layout: fixed; font-size: var(--g-font-size-small); }
.roster-grid caption { text-align: left; caption-side: top; padding-bottom: var(--g-space-12); }
.roster-grid__legend { margin-left: var(--g-space-8); }
.roster-grid th, .roster-grid td { padding: var(--g-space-8); vertical-align: middle; text-align: left; overflow-wrap: break-word; }
.roster-grid thead th { background: var(--g-color-mint); font-weight: 700; }
.roster-grid thead th:first-child, .roster-grid tbody th, .roster-grid tfoot th { width: calc(var(--g-space-48) * 3); }
.roster-grid .day { display: block; font-size: var(--g-font-size-caption); font-weight: 400; }
.roster-grid tbody tr:nth-child(odd) > * { background: var(--g-color-ivory); }
.roster-grid tbody td, .roster-grid tfoot td { text-align: center; }
.roster-grid tfoot td { font-variant-numeric: tabular-nums; }
.roster-grid tfoot td.is-short { background: var(--g-color-warning-surface); color: var(--g-color-warning); }
.roster-grid tfoot td.is-short .meta { color: var(--g-color-warning); }
.roster-cell { display: flex; flex-direction: column; align-items: stretch; gap: var(--g-space-4); }
.roster-shift { width: 100%; min-width: 0; padding: var(--g-space-4) var(--g-space-8); font-size: var(--g-font-size-small); }
.roster-cell[data-state="saving"] .roster-shift { border-color: var(--g-color-line); }
.roster-cell[data-state="failed"] .cell-status { color: var(--g-color-error); }
.cell-retry { align-self: center; }
.mobile-hint { display: none; }
.action-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--g-space-16); margin-top: var(--g-space-24); }
.action-row .small { max-width: calc(var(--g-size-phone) * 1.25); }
.action-row form { margin: 0; }
.edit-status:not(:empty) { margin-top: var(--g-space-16); font-weight: 600; }
@media (max-width: 640px) {
  .roster-header { gap: var(--g-space-12); }
  .roster-header__pose { width: var(--g-space-48); height: calc(var(--g-space-48) * 1.5); }
  .roster-grid { min-width: calc(var(--g-space-32) * 2 + (var(--g-size-primary) + var(--g-space-24) + var(--g-space-12)) * 7); }
  .roster-grid thead th:first-child, .roster-grid tbody th, .roster-grid tfoot th { width: calc(var(--g-space-32) * 2); padding-inline: var(--g-space-4); }
  .roster-grid th, .roster-grid td { padding: var(--g-space-4); }
  .roster-grid__legend { display: block; margin-left: 0; }
  .roster-grid tfoot th { word-break: keep-all; overflow-wrap: normal; font-size: var(--g-font-size-caption); }
  .mobile-hint { display: block; }
  .action-row .btn, .action-row form { width: 100%; }
}
@media (max-width: 320px) { .roster-header__pose { display: none; } }
/* The roster's due-day line and its Change form (R2, Devan 21 Oct). */
.due-setting { margin-bottom: var(--g-space-16); }
.due-setting details > summary { display: inline-flex; align-items: center; min-height: var(--g-size-touch); cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: var(--g-space-4); }
.due-setting__form { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--g-space-12); max-width: var(--g-size-phone); }
.due-setting__form .field { margin-bottom: 0; flex: 1; }
.due-warning { padding: var(--g-space-12) var(--g-space-16); border-radius: var(--g-radius-input); background: var(--g-color-warning-surface); font-weight: 600; margin-bottom: var(--g-space-16); }