/* Top buttons — v2 Nov 1 2026 (Jeremy: "make sure they look even on their sides … on the monitor they're not all the same"):
   phones: columns line up between the two Cabarrus rows and Dispatch has the same corner shape as its neighbours;
   monitors (769px+): every top button the same height and width, text centred (see the block at the end).
   Display only: same buttons, links, clicks and active Dispatch marker (gold dot).
   Phone top buttons — v1 Oct 30 2026 (Jeremy: "Can we get these top buttons fixed?").
   Phones only (max-width 768px). Desktop untouched.
   Cabarrus: tidy 2-row grid, same pattern as CMC's phone nav —
     row 1 = where you are (Dispatch/Interpreter, Switch, Lock), row 2 = go to (Map, Glossary, Schedule, Manager).
   Pineville / University / Winston (5 buttons, fit on one row from 360px): only on very small phones (<360px)
   split into Lock + Map / Glossary + Schedule + Manager so nothing is cut off. */
@media (max-width: 768px) {
  html body .top-actions:has(> #cabRolePill) {
    display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: 6px !important; flex-wrap: initial !important; align-items: stretch !important;
  }
  html body .top-actions:has(> #cabRolePill) > * { grid-column: span 3 !important; order: 3; }
  /* v2 Nov 1 2026: Dispatch spans two columns, Switch and Lock one each, so every edge lines up with the
     Map / Glossary / Schedule / Manager row underneath (was 3 thirds over 4 quarters, edges did not meet). */
  html body .top-actions:has(> #cabRolePill) > #cabRolePill { grid-column: span 6 !important; order: 0; }
  html body .top-actions:has(> #cabRolePill) > #cabSwitchBtn { grid-column: span 3 !important; order: 1; }
  html body .top-actions:has(> #cabRolePill) > #lockBtn { grid-column: span 3 !important; order: 2; } /* same order as CMC: role, Switch, Lock */
  /* No role chosen yet (pill + Switch hidden): Lock + Map on row 1, the other three on row 2 */
  html body .top-actions:has(> #cabRolePill.hidden) > #lockBtn,
  html body .top-actions:has(> #cabRolePill.hidden) > a[href*="map=1"] { grid-column: span 6 !important; order: 1; }
  html body .top-actions:has(> #cabRolePill.hidden) > .hdr-ctl-glossary,
  html body .top-actions:has(> #cabRolePill.hidden) > .hdr-ctl-schedule,
  html body .top-actions:has(> #cabRolePill.hidden) > a[href*="manager"] { grid-column: span 4 !important; }

  /* Interpreter view hides Map and Manager: Glossary + Schedule share row 2 evenly */
  html.cab-interp-mode body .top-actions:has(> #cabRolePill) > .hdr-ctl-glossary,
  html.cab-interp-mode body .top-actions:has(> #cabRolePill) > .hdr-ctl-schedule { grid-column: span 6 !important; }

  html body .top-actions:has(> #cabRolePill) .hdr-ctl,
  html body .top-actions:has(> #cabRolePill) > #cabRolePill {
    width: auto !important; min-width: 0 !important; max-width: none !important; flex: none !important;
    height: 44px !important; padding: 0 4px !important; margin: 0 !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important;
    font-size: 12.5px !important; letter-spacing: 0 !important; box-sizing: border-box !important;
  }
  /* Dispatch / Interpreter pill: same size and shape as its neighbours, marked as the current view (gold dot kept) */
  html body .top-actions > #cabRolePill:not(.hidden) {
    display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important;
    border-radius: 10px !important; font-weight: 700 !important; align-self: stretch !important;
  }
  html[data-theme="maroon"] body .top-actions > #cabRolePill:not(.hidden),
  html[data-theme="enterprise"] body .top-actions > #cabRolePill:not(.hidden) {
    background: rgba(255,255,255,.2) !important; border: 1.5px solid rgba(255,255,255,.85) !important; color: #fff !important;
  }
}
@media (max-width: 359px) {
  html body .top-actions:has(> #cabRolePill) .hdr-ctl,
  html body .top-actions:has(> #cabRolePill) > #cabRolePill { font-size: 12px !important; padding: 0 2px !important; }
  html body .top-actions:not(:has(> #cabRolePill)):not(:has(> #rolePill)) {
    display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 6px !important; flex-wrap: initial !important;
  }
  html body .top-actions:not(:has(> #cabRolePill)):not(:has(> #rolePill)) > * { grid-column: span 2 !important; }
  html body .top-actions:not(:has(> #cabRolePill)):not(:has(> #rolePill)) > #lockBtn,
  html body .top-actions:not(:has(> #cabRolePill)):not(:has(> #rolePill)) > a[href*="map=1"] { grid-column: span 3 !important; }
  html body .top-actions:not(:has(> #cabRolePill)):not(:has(> #rolePill)) .hdr-ctl {
    width: auto !important; min-width: 0 !important; flex: none !important; padding: 0 4px !important; text-overflow: clip !important;
  }
}

/* ---------- v2 Nov 1 2026: corner shape of the Dispatch marker matches its neighbours (phones and monitors) ---------- */
html[data-theme="maroon"] body .top-actions > #cabRolePill:not(.hidden),
html[data-theme="enterprise"] body .top-actions > #cabRolePill:not(.hidden) { border-radius: 999px !important; }
@media (min-width: 769px) {
  html[data-theme="classic"] body .top-actions > #cabRolePill:not(.hidden) { border-radius: 12px !important; }
}

/* ---------- v2 Nov 1 2026: monitors (769px and wider) — equal top buttons ----------
   One 4-column grid (column = --tn-col). Cabarrus with a role: Dispatch (2 columns) · Switch · Lock over
   Map · Glossary · Schedule · Manager. Pineville / University / Winston-Salem (and Cabarrus before a role is picked):
   Lock · Map over Glossary · Schedule · Manager, and on wide monitors (1260px+) one row of 5 equal buttons.
   Widths are chosen so the page title and its top line keep the room they had (no extra wrapping). */
@media (min-width: 769px) {
  html body .top-actions {
    display: grid !important; gap: 8px !important; flex-wrap: initial !important;
    align-items: stretch !important; justify-content: end !important; justify-self: end !important;
    --tn-col: 112px;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important; grid-auto-flow: row !important;
    width: calc(var(--tn-col) * 4 + 24px) !important;
  }
  html[data-theme="sky"] body .top-actions { --tn-col: 148px; }
  html body .top-actions .hdr-ctl,
  html body .top-actions > #cabRolePill:not(.hidden) {
    width: auto !important; min-width: 0 !important; max-width: none !important; flex: none !important; margin: 0 !important;
    height: 36px !important; padding: 0 8px !important; box-sizing: border-box !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important;
    white-space: nowrap !important; overflow: hidden !important; text-overflow: clip !important;
  }
  html[data-theme="sky"] body .top-actions .hdr-ctl { height: 40px !important; padding: 0 12px !important; }
  html body .top-actions > #cabRolePill:not(.hidden) { gap: 6px !important; font-size: 13px !important; line-height: 1 !important; align-self: stretch !important; }

  /* Cabarrus Dispatch / Interpreter */
  html body .top-actions:has(> #cabRolePill:not(.hidden)) > * { grid-column: span 3 !important; order: 3; }
  html body .top-actions:has(> #cabRolePill:not(.hidden)) > #cabRolePill { grid-column: span 6 !important; order: 0; }
  html body .top-actions:has(> #cabRolePill:not(.hidden)) > #cabSwitchBtn { grid-column: span 3 !important; order: 1; }
  html body .top-actions:has(> #cabRolePill:not(.hidden)) > #lockBtn { grid-column: span 3 !important; order: 2; }
  html.cab-interp-mode body .top-actions:has(> #cabRolePill:not(.hidden)) > .hdr-ctl-glossary,
  html.cab-interp-mode body .top-actions:has(> #cabRolePill:not(.hidden)) > .hdr-ctl-schedule { grid-column: span 6 !important; }

  /* 5-button pages */
  html body .top-actions:not(:has(> #cabRolePill:not(.hidden))) > * { grid-column: span 4 !important; }
  html body .top-actions:not(:has(> #cabRolePill:not(.hidden))) > #lockBtn,
  html body .top-actions:not(:has(> #cabRolePill:not(.hidden))) > a[href*="map=1"] { grid-column: span 6 !important; }
}
@media (min-width: 1260px) {
  html:not([data-theme="sky"]) body .top-actions:not(:has(> #cabRolePill:not(.hidden))) {
    --tn-col: 104px;
    grid-template-columns: none !important; grid-auto-flow: column !important; grid-auto-columns: var(--tn-col) !important;
    width: auto !important;
  }
  html:not([data-theme="sky"]) body .top-actions:not(:has(> #cabRolePill:not(.hidden))) > *,
  html:not([data-theme="sky"]) body .top-actions:not(:has(> #cabRolePill:not(.hidden))) > #lockBtn,
  html:not([data-theme="sky"]) body .top-actions:not(:has(> #cabRolePill:not(.hidden))) > a[href*="map=1"] { grid-column: auto !important; }
}