/* Reference roster workspace: last-loaded design layer for the development console. */
:root {
  --ref-navy:#06296f;
  --ref-blue:#075cff;
  --ref-blue-2:#034fe1;
  --ref-ink:#10265a;
  --ref-muted:#5f7199;
  --ref-line:#dce5f1;
  --ref-soft:#f6f9fe;
  --ref-green:#078a4e;
  --ref-red:#f0444d;
  --ref-radius:10px;
}

/* More-menu controls are operational controls too: keep the shared touch
   target intact after Operations Check moved behind the compact primary row. */
#announcerOperationalApp .topbar-more-menu button {
  min-height:44px!important;
  height:44px!important;
}
body.light-mode { background:#f5f7fb!important; color:var(--ref-ink)!important; }
body.dark-mode {
  --ref-navy:#f4f8ff;
  --ref-ink:#e8f1ff;
  --ref-muted:#a9bfda;
  --ref-line:#2a4867;
  --ref-soft:#102944;
  --ref-blue:#4b8dff;
  --ref-blue-2:#78a9ff;
  background:#071322!important;
  color:var(--ref-ink)!important;
}
body.dark-mode .topbar,
body.dark-mode .reference-task-heading,
body.dark-mode #panelRoster,
body.dark-mode #panelRoster .time-block-card,
body.dark-mode #panelRoster .roster-card,
body.dark-mode #panelRoster .roster-table th,
body.dark-mode .reference-roster-footer { background:#10243b!important; border-color:var(--ref-line)!important; }
body.dark-mode .reference-task-heading,
body.dark-mode #panelRoster .time-block-card,
body.dark-mode #panelRoster .roster-card { box-shadow:none!important; }
body.dark-mode .reference-task-copy h1,
body.dark-mode .reference-task-copy p,
body.dark-mode #panelRoster .roster-heading h2,
body.dark-mode #panelRoster .roster-table :is(th, td),
body.dark-mode .reference-session-summary strong { color:var(--ref-ink)!important; }
body.dark-mode .reference-task-copy p,
body.dark-mode .reference-session-summary :is(span, small),
body.dark-mode .reference-roster-footer,
body.dark-mode #panelRoster .roster-heading .muted,
body.dark-mode #panelRoster .roster-table th { color:var(--ref-muted)!important; }
body.dark-mode #panelRoster .guardian-callout { background:#1a3b64!important; color:#dceaff!important; }
body.dark-mode .reference-session-status { background:#123e38!important; color:#88e4bd!important; }
body.dark-mode .reference-primary-actions #uploadHtmlBtn { background:#173865!important; border-color:#4b8dff!important; color:#e8f1ff!important; }
#announcerOperationalApp.wrap { width:min(calc(100% - 40px), 1480px)!important; padding-bottom:26px; }
body.light-mode .topbar { display:grid!important; grid-template-columns:minmax(230px,auto) minmax(0,1fr); align-items:center; gap:26px!important; min-height:72px; padding:0 24px!important; border:1px solid var(--ref-line)!important; border-radius:18px!important; background:#fff!important; box-shadow:0 9px 30px rgba(15,45,105,.06)!important; }
body.light-mode .topbar::after { display:none!important; }
body.light-mode .brand-lockup { min-width:0!important; padding-right:24px; border-right:1px solid var(--ref-line); }
body.light-mode .brand-lockup img { width:36px!important; height:36px!important; border-radius:8px!important; }
body.light-mode .brand-title { color:var(--ref-navy)!important; font-size:20px!important; line-height:1.1!important; letter-spacing:-.025em!important; }
#announcerOperationalApp .brand-powered { display:none!important; }
body.light-mode .topbar-actions { display:flex!important; justify-content:flex-end!important; align-items:center!important; min-width:0; }
body.light-mode .topbar-context { display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:0!important; min-width:0; }
body.light-mode .topbar-context select,
body.light-mode .topbar-context .identity-pill,
body.light-mode .topbar-context .device-pill { height:42px!important; min-height:42px!important; border:0!important; border-radius:0!important; background:#fff!important; box-shadow:none!important; color:var(--ref-navy)!important; }
body.light-mode .topbar-context #locationSelect { width:225px!important; padding-left:8px!important; }
body.light-mode .topbar-context #viewSelect { width:145px!important; padding-left:20px!important; border-left:1px solid var(--ref-line)!important; }
body.light-mode .topbar-context .identity-pill { width:160px!important; padding:0 18px!important; border-left:1px solid var(--ref-line)!important; text-align:left!important; }
body.light-mode .topbar-context .device-pill { display:none!important; }
body.light-mode .identity-reminder,
body.light-mode .managedDeviceChangeUser,
body.light-mode .managedDeviceSignOutDevice,
body.light-mode .topbar-status { display:none!important; }
.reference-task-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:20px 0 0; padding:20px 24px; background:#fff; border:1px solid var(--ref-line); border-radius:18px 18px 0 0; border-bottom:0; }
.reference-task-copy h1 { margin:0; color:var(--ref-navy); font-size:28px; line-height:1.1; letter-spacing:-.035em; }
.reference-task-copy p { margin:5px 0 0; color:var(--ref-muted); font-size:15px; }
.reference-primary-actions { display:flex!important; align-items:center!important; gap:12px!important; width:auto!important; }
.reference-primary-actions #uploadHtmlBtn,
.reference-primary-actions #speakerPanelBtn { display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:9px!important; min-width:166px!important; height:50px!important; padding:0 18px!important; border-radius:8px!important; font-size:15px!important; font-weight:800!important; white-space:nowrap!important; }
.reference-primary-actions #uploadHtmlBtn { background:#fff!important; border:1px solid var(--ref-blue)!important; color:var(--ref-blue)!important; }
.reference-primary-actions #speakerPanelBtn { background:var(--ref-blue)!important; border:1px solid var(--ref-blue)!important; color:#fff!important; }
.reference-primary-actions #speakerPanelBtn:hover { background:var(--ref-blue-2)!important; }
.reference-primary-actions .desktop-upload-label { position:static!important; width:auto!important; height:auto!important; margin:0!important; padding:0!important; overflow:visible!important; clip:auto!important; white-space:nowrap!important; }
.reference-primary-actions .topbar-more { position:relative; }
.reference-primary-actions .topbar-more summary { list-style:none; cursor:pointer; height:50px; min-width:50px; display:grid; place-items:center; border:1px solid var(--ref-line); border-radius:8px; color:transparent; }
.reference-primary-actions .topbar-more summary::-webkit-details-marker { display:none; }
.reference-primary-actions .topbar-more summary::after { content:'•••'; color:var(--ref-navy); letter-spacing:2px; font-weight:900; }
.reference-primary-actions .topbar-more-menu { z-index:30; }
#panelRoster { border:1px solid var(--ref-line); border-top:0; border-radius:0 0 18px 18px; overflow:hidden; background:#fff; }
#panelRoster .time-block-card { margin:0!important; padding:18px 24px 0!important; border:0!important; border-radius:0!important; border-bottom:1px solid var(--ref-line)!important; background:#fff!important; box-shadow:none!important; }
#panelRoster .time-block-toolbar { display:block!important; }
#panelRoster .roster-date-controls { display:grid!important; grid-template-columns:250px 1fr; grid-template-areas:'date session'; gap:16px!important; align-items:end!important; max-width:780px; }
#panelRoster .session-command-title { display:none!important; }
#panelRoster .roster-date-controls > label[for="rosterDate"] { grid-area:date; display:grid!important; gap:5px; color:var(--ref-ink)!important; font-size:0!important; letter-spacing:0!important; text-transform:none!important; }
#panelRoster .roster-date-controls > label[for="rosterDate"]::before { content:'Date'; font-size:14px; font-weight:800; }
#panelRoster #rosterDate { grid-area:date; width:250px!important; margin-top:25px; height:42px!important; padding:0 12px!important; border-radius:7px!important; }
#panelRoster #setDateBtn { display:none!important; }
#panelRoster .desktop-session-label { grid-area:session; display:grid!important; gap:5px; align-self:start!important; color:var(--ref-ink)!important; font-size:0!important; letter-spacing:0!important; text-transform:none!important; }
#panelRoster .desktop-session-label::before { content:'Session'; font-size:14px; font-weight:800; }
#panelRoster .desktop-session-select { grid-area:session; width:100%!important; margin-top:25px; height:42px!important; padding:0 12px!important; border:1px solid var(--ref-blue)!important; border-radius:7px!important; color:var(--ref-navy)!important; }
#panelRoster .time-block-selection { display:none!important; }
.reference-session-summary { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:18px 0 0; padding:13px 0 17px; border-top:1px solid var(--ref-line); }
.reference-session-summary > div { display:grid; grid-template-columns:auto; gap:3px; }
.reference-session-summary span { color:var(--ref-muted); font-size:13px; }
.reference-session-summary strong { color:var(--ref-navy); font-size:17px; }
.reference-session-summary small { color:var(--ref-muted); font-size:13px; }
.reference-session-status { display:inline-flex; align-items:center; gap:7px; min-height:30px; padding:0 12px; border-radius:7px; color:var(--ref-green)!important; background:#eaf9f2; white-space:nowrap; }
.reference-session-status::before { content:''; width:8px; height:8px; border-radius:99px; background:var(--ref-green); }
#panelRoster .blocks { display:none!important; }
#deckDateWarning { margin:12px 24px!important; border-radius:10px!important; }
#panelRoster .roster-card { margin:0!important; padding:20px 24px 0!important; border:0!important; border-radius:0!important; box-shadow:none!important; background:#fff!important; }
.roster-empty-workspace { display:none; align-items:center; justify-content:space-between; gap:18px; min-height:88px; padding:16px 0; }
.roster-empty-workspace > div { display:grid; gap:4px; }
.roster-empty-workspace strong { color:var(--ref-navy); font-size:17px; }
.roster-empty-workspace span { color:var(--ref-muted); font-size:14px; }
.roster-empty-workspace .primary { min-height:42px; white-space:nowrap; }
#panelRoster.no-session .roster-empty-workspace { display:flex!important; }
#panelRoster.no-session :is(.roster-toolbar, .roster-progress, .roster-table-wrap, #rosterMobileList, .reference-roster-footer) { display:none!important; }
#panelRoster .roster-toolbar { display:grid!important; grid-template-columns:auto minmax(250px,1fr) auto; grid-template-areas:'heading search sort' 'legend legend legend' 'bulk bulk bulk'; gap:12px 20px!important; align-items:center!important; }
#panelRoster .roster-heading { grid-area:heading; min-width:max-content; }
#panelRoster .roster-heading h2 { margin:0!important; color:var(--ref-navy)!important; font-size:23px!important; letter-spacing:-.03em!important; }
#panelRoster .roster-heading h2::after { content:' '; }
#panelRoster .roster-heading .muted { color:var(--ref-muted)!important; }
#panelRoster .searchWrap { grid-area:search; width:100%!important; }
#panelRoster .searchInput { height:42px!important; border-radius:7px!important; }
#panelRoster .roster-actions { grid-area:sort; display:flex!important; align-items:center!important; gap:8px!important; }
#panelRoster .roster-actions .deck-hide { display:none!important; }
#panelRoster .roster-actions select { height:42px!important; min-width:180px!important; border-radius:7px!important; }
#panelRoster #tagLegend { grid-area:legend; order:initial!important; width:auto!important; padding:10px 0 0!important; border-top:1px solid var(--ref-line)!important; overflow:visible!important; white-space:normal!important; }
#panelRoster #bulkAttendanceActions { grid-area:bulk; }
#panelRoster #bulkAttendanceActions button { min-height:38px!important; }
#panelRoster .roster-progress { display:none!important; }
#panelRoster .roster-table-wrap { margin:16px -24px 0!important; border:0!important; border-top:1px solid var(--ref-line)!important; border-radius:0!important; box-shadow:none!important; }
#panelRoster .roster-table { counter-reset:roster; }
#panelRoster .roster-table th { position:static!important; padding:11px 10px!important; background:#fff!important; color:#536688!important; font-size:12px!important; letter-spacing:0!important; text-transform:none!important; }
#panelRoster .roster-table th:first-child::before { content:'#'; display:inline-block; margin-right:18px; }
#panelRoster .roster-table tr[data-roster-entry] { counter-increment:roster; }
#panelRoster .roster-table td { padding:7px 10px!important; border-color:#e5ebf4!important; color:var(--ref-ink)!important; font-size:13px!important; }
#panelRoster .roster-table td:first-child { min-width:158px!important; }
#panelRoster .roster-table td:first-child::before { content:counter(roster); display:inline-grid; width:20px; margin-right:8px; color:#536688; }
#panelRoster .attWrap { display:inline-flex!important; gap:7px!important; flex-wrap:nowrap!important; vertical-align:middle; }
#panelRoster .attWrap .attBtn { width:40px!important; min-width:40px!important; height:40px!important; min-height:40px!important; padding:0!important; border-radius:6px!important; background:#fff!important; }
#panelRoster .attWrap .attBtn.here { color:var(--ref-green)!important; border-color:#69d4a1!important; background:#fff!important; }
#panelRoster .attWrap .attBtn.absent { color:var(--ref-red)!important; border-color:#ffabb1!important; background:#fff!important; }
#panelRoster .attWrap .attBtn.active.here { color:#fff!important; border-color:var(--ref-blue)!important; background:var(--ref-blue)!important; }
#panelRoster .attWrap .attBtn.active.absent { color:#fff!important; border-color:var(--ref-red)!important; background:var(--ref-red)!important; }
#panelRoster .guardian-callout { min-height:35px!important; padding:0 10px!important; gap:6px!important; border:0!important; border-radius:7px!important; background:#f0f6ff!important; color:var(--ref-blue)!important; white-space:nowrap!important; box-shadow:none!important; }
#panelRoster .guardian-callout-icon { filter:none!important; }
.reference-roster-footer { display:flex; justify-content:space-between; gap:16px; margin:0 -24px; padding:14px 24px; border-top:1px solid var(--ref-line); color:#536688; font-size:13px; }
.reference-mobile-nav { display:none; }
@media (max-width:1023px) {
  #announcerOperationalApp.wrap { width:min(calc(100% - 28px), 1480px)!important; }
  body.light-mode .topbar-context #locationSelect { width:185px!important; }
  body.light-mode .topbar-context .identity-pill { width:130px!important; }
  #panelRoster .roster-table-wrap { overflow-x:auto!important; overscroll-behavior-x:contain; }
}
@media (max-width:599px) {
  body.light-mode { padding-bottom:76px!important; }
  #announcerOperationalApp.wrap { width:100%!important; padding:0 0 72px!important; }
  body.light-mode .topbar { display:flex!important; min-height:64px; padding:0 18px!important; border-radius:0!important; border-width:0 0 1px!important; box-shadow:none!important; }
  body.light-mode .brand-lockup { padding:0!important; border:0!important; }
  body.light-mode .brand-lockup img { width:28px!important; height:28px!important; }
  body.light-mode .brand-title { font-size:19px!important; }
  body.light-mode .topbar-actions { flex:1!important; }
  body.light-mode .topbar-context { display:flex!important; width:auto!important; }
  body.light-mode .topbar-context #locationSelect,
  body.light-mode .topbar-context #viewSelect,
  body.light-mode .topbar-context .identity-pill { display:none!important; }
  .reference-task-heading { display:grid; grid-template-columns:1fr auto; gap:14px; margin:0; padding:16px 18px 10px; border:0; border-radius:0; }
  .reference-task-copy h1 { display:none; }
  .reference-task-copy p { display:none; }
  .reference-task-heading::before { content:'☰'; display:grid; place-items:center; width:36px; height:36px; color:var(--ref-navy); font-size:22px; }
  .reference-primary-actions { display:contents!important; }
  .reference-primary-actions #uploadHtmlBtn { grid-column:1 / -1; grid-row:2; min-width:0!important; width:100%!important; height:48px!important; border-radius:7px!important; background:var(--ref-blue)!important; border-color:var(--ref-blue)!important; color:#fff!important; }
  .reference-primary-actions #speakerPanelBtn,
  .reference-primary-actions .topbar-more { display:none!important; }
  .reference-task-heading::after { content:'Location'; grid-column:1 / -1; grid-row:3; color:var(--ref-navy); font-size:14px; font-weight:800; }
  .reference-task-heading + #readOnlyBanner { margin:0 18px!important; }
  #panelRoster { margin:0!important; border:0!important; border-radius:0!important; overflow:visible!important; }
  #panelRoster .time-block-card { padding:0 18px 14px!important; border:0!important; }
  #panelRoster .roster-date-controls { display:block!important; max-width:none!important; }
  #panelRoster .roster-date-controls > label[for="rosterDate"],
  #panelRoster #rosterDate { display:none!important; }
  #panelRoster .desktop-session-label { display:block!important; font-size:14px!important; font-weight:800!important; }
  #panelRoster .desktop-session-label::before { display:none!important; }
  #panelRoster .desktop-session-select { width:100%!important; margin-top:7px; height:44px!important; }
  .reference-session-summary { margin-top:14px; padding:14px; border:1px solid var(--ref-line); border-radius:8px; background:#fff; align-items:flex-start; }
  .reference-session-summary strong { font-size:16px; }
  .reference-session-summary small { line-height:1.35; }
  .reference-session-status { font-size:0!important; min-width:28px; min-height:28px; padding:0; justify-content:center; }
  .reference-session-status::before { width:9px; height:9px; }
  #panelRoster .roster-card { padding:16px 0 0!important; border-top:8px solid #f5f7fb!important; }
  #panelRoster.no-session .roster-card { padding:0 18px!important; border-top:8px solid #f5f7fb!important; }
  .roster-empty-workspace { min-height:96px; padding:14px 0; }
  .roster-empty-workspace strong { font-size:16px; }
  #panelRoster .roster-toolbar { padding:0 18px; display:grid!important; grid-template-columns:1fr auto; grid-template-areas:'heading sort' 'search search' 'legend legend'; gap:12px!important; }
  #panelRoster .roster-heading h2 { font-size:20px!important; }
  #panelRoster .roster-heading .muted { display:none!important; }
  #panelRoster .roster-actions .roster-sort-label { display:none!important; }
  #panelRoster .roster-actions select { min-width:100px!important; max-width:126px; height:38px!important; font-size:12px!important; }
  #panelRoster #tagLegend,
  #panelRoster #bulkAttendanceActions { display:none!important; }
  #panelRoster .roster-table-wrap { display:none!important; }
  #panelRoster #rosterMobileList { display:grid!important; gap:0!important; padding:9px 18px 0!important; }
  #panelRoster .roster-mobile-entry { display:grid!important; grid-template-columns:118px minmax(0,1fr) 44px; grid-template-areas:'actions heading call' 'actions details call'; gap:2px 10px; padding:13px 0!important; border:0!important; border-bottom:1px solid var(--ref-line)!important; border-radius:0!important; background:#fff!important; }
  #panelRoster .roster-mobile-heading { grid-area:heading; min-width:0; display:block!important; }
  #panelRoster .roster-mobile-heading strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ref-navy); font-size:14px; }
  #panelRoster .roster-mobile-heading .flagRow { display:none!important; }
  #panelRoster .roster-mobile-details { grid-area:details; margin:0!important; white-space:pre-line; color:#536688!important; font-size:12px!important; line-height:1.35!important; }
  #panelRoster .roster-mobile-actions { display:contents!important; }
  #panelRoster .roster-mobile-actions .attWrap { grid-area:actions; align-self:start; display:flex!important; gap:6px!important; }
  #panelRoster .roster-mobile-actions .attBtn { width:44px!important; min-width:44px!important; height:44px!important; min-height:44px!important; }
  #panelRoster .roster-mobile-actions .guardian-callout { grid-area:call; width:40px!important; min-width:40px!important; height:40px!important; min-height:40px!important; padding:0!important; align-self:start; justify-self:end; }
  #panelRoster .roster-mobile-actions .guardian-callout-label { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; }
  .reference-roster-footer { margin:0; padding:12px 18px; font-size:11px; }
  .reference-roster-footer #referenceShowingSummary { display:none; }
  .reference-mobile-nav { position:fixed; z-index:60; bottom:0; left:0; right:0; display:grid; grid-template-columns:repeat(3,1fr); min-height:62px; padding:5px 18px max(5px, env(safe-area-inset-bottom)); border-top:1px solid var(--ref-line); background:#fff; box-shadow:0 -8px 18px rgba(15,45,105,.06); }
  .reference-mobile-nav button { display:grid; place-items:center; gap:1px; padding:3px; border:0; color:#536688; background:transparent; font-size:11px; }
  .reference-mobile-nav button > span:first-child { font-size:19px; line-height:1; }
  .reference-mobile-nav button.active { color:var(--ref-blue); font-weight:800; }
  body.light-mode .topbar-more[open] { position:fixed!important; z-index:80; right:18px; bottom:72px; display:block!important; }
  body.light-mode .topbar-more[open] summary { display:none!important; }
  body.light-mode .topbar-more[open] .topbar-more-menu { display:grid!important; gap:6px; min-width:190px; padding:8px; border:1px solid var(--ref-line); border-radius:12px; background:#fff; box-shadow:0 16px 35px rgba(15,45,105,.18); }
  body.light-mode .topbar-more[open] .topbar-more-menu button { display:flex!important; align-items:center; gap:9px; min-height:42px; padding:0 10px; border:0; background:#fff; color:var(--ref-navy); }
}
#panelRoster .attWrap .attBtn.clear { color:#58709a!important; border-color:#cbd7e8!important; background:#fff!important; }
#panelRoster .attWrap .attBtn.active.clear { color:#fff!important; border-color:#58709a!important; background:#58709a!important; }
/* Strong mobile overrides for the legacy responsive layers loaded before this file. */
.reference-mobile-location { display:none; }
@media (max-width:599px) {
  #announcerOperationalApp .topbar .topbar-status,
  #announcerOperationalApp .topbar .topbar-context .identity-pill { display:none!important; }
  #announcerOperationalApp .reference-task-heading .reference-primary-actions { display:contents!important; }
  #announcerOperationalApp .reference-task-heading .reference-primary-actions #speakerPanelBtn,
  #announcerOperationalApp .reference-task-heading .reference-primary-actions .topbar-more { display:none!important; }
  #announcerOperationalApp #panelRoster .desktop-session-select,
  #announcerOperationalApp #panelRoster .desktop-session-label { display:block!important; }
  .reference-mobile-location { display:block; grid-column:1 / -1; grid-row:1; padding-left:31px; color:var(--ref-navy); font-size:14px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .reference-task-heading::before { grid-column:1; grid-row:1; z-index:1; }
  .reference-task-heading::after { display:none!important; }
}
#announcerOperationalApp .topbar .topbar-status { display:none!important; }
#announcerOperationalApp #panelRoster .roster-date-controls > label[for="rosterDate"],
#announcerOperationalApp #panelRoster .desktop-session-label { font-size:14px!important; letter-spacing:0!important; text-transform:none!important; }
#announcerOperationalApp #panelRoster .roster-date-controls > label[for="rosterDate"]::before,
#announcerOperationalApp #panelRoster .desktop-session-label::before { display:none!important; }
#announcerOperationalApp #panelRoster .roster-date-controls { grid-template-areas:'date-label session-label' 'date session'!important; grid-template-columns:250px 1fr!important; row-gap:6px!important; }
#announcerOperationalApp #panelRoster .roster-date-controls > label[for="rosterDate"] { grid-area:date-label!important; margin:0!important; }
#announcerOperationalApp #panelRoster #rosterDate { grid-area:date!important; margin:0!important; }
#announcerOperationalApp #panelRoster .desktop-session-label { grid-area:session-label!important; margin:0!important; }
#announcerOperationalApp #panelRoster .desktop-session-select { grid-area:session!important; margin:0!important; }
#announcerOperationalApp #panelRoster .roster-table .guardian-callout { display:inline-flex!important; align-items:center!important; justify-content:center!important; width:auto!important; min-width:132px!important; height:36px!important; min-height:36px!important; padding:0 10px!important; }
#announcerOperationalApp #panelRoster .roster-table .guardian-callout-label { position:static!important; display:inline!important; width:auto!important; height:auto!important; overflow:visible!important; clip:auto!important; white-space:nowrap!important; }
#announcerOperationalApp #panelRoster .roster-table { width:100%!important; min-width:0!important; table-layout:fixed!important; }
#announcerOperationalApp #panelRoster .roster-table :is(th,td):nth-child(1) { width:170px!important; min-width:170px!important; position:static!important; }
#announcerOperationalApp #panelRoster .roster-table :is(th,td):nth-child(2) { width:190px!important; min-width:190px!important; position:static!important; }
#announcerOperationalApp #panelRoster .roster-table :is(th,td):nth-child(3) { width:70px!important; min-width:70px!important; }
#announcerOperationalApp #panelRoster .roster-table :is(th,td):nth-child(4) { width:120px!important; min-width:120px!important; }
#announcerOperationalApp #panelRoster .roster-table :is(th,td):nth-child(5) { width:120px!important; min-width:120px!important; }
#announcerOperationalApp #panelRoster .roster-table :is(th,td):nth-child(6) { width:185px!important; min-width:185px!important; }
#announcerOperationalApp #panelRoster .roster-table :is(th,td):nth-child(7) { width:100px!important; min-width:100px!important; }
#announcerOperationalApp #panelRoster .roster-table :is(th,td):nth-child(8) { width:155px!important; min-width:155px!important; position:static!important; box-shadow:none!important; }
@media (min-width:1024px) and (max-width:1439px) {
  #announcerOperationalApp #panelRoster .roster-table :is(th,td):nth-child(1) { width:155px!important; min-width:155px!important; }
  #announcerOperationalApp #panelRoster .roster-table :is(th,td):nth-child(2) { width:160px!important; min-width:160px!important; }
  #announcerOperationalApp #panelRoster .roster-table :is(th,td):nth-child(3) { width:60px!important; min-width:60px!important; }
  #announcerOperationalApp #panelRoster .roster-table :is(th,td):nth-child(4),
  #announcerOperationalApp #panelRoster .roster-table :is(th,td):nth-child(5) { width:100px!important; min-width:100px!important; }
  #announcerOperationalApp #panelRoster .roster-table :is(th,td):nth-child(6) { width:160px!important; min-width:160px!important; }
  #announcerOperationalApp #panelRoster .roster-table :is(th,td):nth-child(7) { width:85px!important; min-width:85px!important; }
  #announcerOperationalApp #panelRoster .roster-table :is(th,td):nth-child(8) { width:145px!important; min-width:145px!important; }
  #announcerOperationalApp #panelRoster .roster-table .guardian-callout { width:40px!important; min-width:40px!important; padding:0!important; }
  #announcerOperationalApp #panelRoster .roster-table .guardian-callout-label { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; }
}
@media (max-width:599px) {
  #announcerOperationalApp #panelRoster .roster-date-controls { display:block!important; }
  #announcerOperationalApp #panelRoster .roster-mobile-entry { grid-template-columns:148px minmax(0,1fr) 44px!important; }
}

/* Compact desktop/tablet density: keep the active roster on screen, not whitespace. */
@media (min-width:600px) {
  #announcerOperationalApp .topbar { min-height:64px!important; padding:0 18px!important; }
  #announcerOperationalApp .reference-task-heading { margin-top:12px!important; padding:14px 22px!important; }
  #announcerOperationalApp .reference-task-copy h1 { font-size:25px!important; }
  #announcerOperationalApp .reference-task-copy p { margin-top:3px!important; }
  #announcerOperationalApp #panelRoster .time-block-card { padding:12px 18px 0!important; }
  #announcerOperationalApp #panelRoster .roster-date-controls { max-width:700px!important; grid-template-columns:220px 1fr!important; }
  #announcerOperationalApp #panelRoster #rosterDate { width:220px!important; }
  #announcerOperationalApp .reference-session-summary { margin-top:10px!important; padding:8px 0 10px!important; }
  #announcerOperationalApp .reference-session-summary > div { gap:1px!important; }
  #announcerOperationalApp #panelRoster .roster-card { padding:14px 18px 0!important; }
  #announcerOperationalApp #panelRoster.no-session .roster-card { padding:0 18px!important; }
  #announcerOperationalApp #panelRoster .roster-toolbar { gap:8px 16px!important; }
  #announcerOperationalApp #panelRoster #tagLegend { padding-top:5px!important; }
  #announcerOperationalApp #panelRoster .roster-table-wrap { margin:10px -18px 0!important; }
  #announcerOperationalApp .reference-roster-footer { margin:0 -18px!important; padding:10px 18px!important; }
}
@media (min-width:600px) and (max-width:1100px) {
  #announcerOperationalApp .topbar { grid-template-columns:190px minmax(0,1fr)!important; gap:8px!important; }
  #announcerOperationalApp .brand-lockup { padding-right:12px!important; }
  #announcerOperationalApp .topbar-context #locationSelect { width:160px!important; }
  #announcerOperationalApp .topbar-context #viewSelect { width:110px!important; }
  #announcerOperationalApp .topbar-context .identity-pill { width:128px!important; padding:0 10px!important; }
  #announcerOperationalApp .topbar-context .device-pill { display:none!important; }
}
@media (min-width:1200px) {
  #announcerOperationalApp #panelRoster .time-block-card { display:grid!important; grid-template-columns:minmax(520px,700px) minmax(360px,1fr); align-items:center!important; gap:18px!important; padding:12px 24px!important; }
  #announcerOperationalApp #panelRoster .time-block-toolbar { min-height:0!important; margin:0!important; padding:0!important; }
  #announcerOperationalApp #panelRoster .reference-session-summary { min-height:0!important; margin:0!important; padding:5px 0 5px 18px!important; border-top:0!important; border-left:1px solid var(--ref-line)!important; }
  #announcerOperationalApp #panelRoster .roster-toolbar { display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:6px 14px!important; min-height:0!important; padding:8px 0 4px!important; }
  #announcerOperationalApp #panelRoster .roster-heading { flex:0 0 auto!important; }
  #announcerOperationalApp #panelRoster .searchWrap { flex:1 1 420px!important; min-width:300px!important; }
  #announcerOperationalApp #panelRoster .roster-actions { flex:0 0 auto!important; }
  #announcerOperationalApp #panelRoster #tagLegend { order:4!important; flex:1 1 600px!important; width:auto!important; margin:0!important; padding:4px 0 0!important; }
  #announcerOperationalApp #panelRoster #bulkAttendanceActions { order:5!important; flex:0 0 auto!important; margin-left:auto!important; align-self:center!important; }
  #announcerOperationalApp #panelRoster .roster-table-wrap { margin-top:6px!important; }
}

/* Empty session is a separate workflow state: no inactive roster chrome. */
#announcerOperationalApp #panelRoster.no-session :is(.roster-toolbar, .roster-progress, .roster-table-wrap, #rosterMobileList, .reference-roster-footer) { display:none!important; }

/* One command header: eliminates the duplicate workspace title band while
   preserving the direct operational actions and semantic workspace context. */
.workspace-command-context.sr-only {
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:-1px!important;
  padding:0!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}
@media (min-width:600px) {
  body.light-mode #announcerOperationalApp .topbar-actions,
  body.dark-mode #announcerOperationalApp .topbar-actions {
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:12px!important;
    min-width:0!important;
  }
  body.light-mode #announcerOperationalApp .topbar-context,
  body.dark-mode #announcerOperationalApp .topbar-context {
    flex:1 1 auto!important;
    min-width:0!important;
  }
  #announcerOperationalApp .reference-primary-actions {
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    width:auto!important;
  }
  #announcerOperationalApp .reference-primary-actions :is(#uploadHtmlBtn, #speakerPanelBtn) {
    min-width:0!important;
    height:42px!important;
    min-height:42px!important;
    padding:0 13px!important;
  }
  #announcerOperationalApp .reference-primary-actions .topbar-more summary {
    min-width:42px!important;
    height:42px!important;
  }
}
@media (max-width:599px) {
  body.light-mode #announcerOperationalApp .topbar,
  body.dark-mode #announcerOperationalApp .topbar {
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    min-height:0!important;
    padding:12px 18px!important;
  }
  body.light-mode #announcerOperationalApp .topbar-actions,
  body.dark-mode #announcerOperationalApp .topbar-actions {
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    min-width:0!important;
  }
  body.light-mode #announcerOperationalApp .topbar-context,
  body.dark-mode #announcerOperationalApp .topbar-context {
    display:block!important;
    width:100%!important;
  }
  body.light-mode #announcerOperationalApp .topbar-context #locationSelect,
  body.dark-mode #announcerOperationalApp .topbar-context #locationSelect {
    display:block!important;
    width:100%!important;
    height:44px!important;
    min-height:44px!important;
    padding:0 12px!important;
    border:1px solid var(--ref-line)!important;
    border-radius:7px!important;
  }
  #announcerOperationalApp .topbar-context :is(#viewSelect, .identity-pill, .device-pill, .identity-reminder, #managedDeviceChangeUser, #managedDeviceSignOutDevice),
  #announcerOperationalApp .topbar-status { display:none!important; }
  #announcerOperationalApp .reference-primary-actions { display:block!important; width:100%!important; }
  #announcerOperationalApp .reference-primary-actions #uploadHtmlBtn {
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    height:48px!important;
    min-height:48px!important;
    border-radius:7px!important;
    background:var(--ref-blue)!important;
    border-color:var(--ref-blue)!important;
    color:#fff!important;
  }
  #announcerOperationalApp .reference-primary-actions :is(#speakerPanelBtn, .topbar-more) { display:none!important; }
}

/* Low-resolution tablet terminal layer.  Keep the whole command surface in
   normal document flow: context stays readable, actions remain visible, and
   tables own horizontal scrolling only. */
@media (min-width:600px) and (max-width:900px), (min-width:600px) and (max-height:760px) {
  #announcerOperationalApp.wrap { width:min(calc(100% - 20px), 1480px)!important; padding-bottom:16px!important; }
  body.light-mode #announcerOperationalApp .topbar,
  body.dark-mode #announcerOperationalApp .topbar {
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    min-height:0!important;
    padding:10px 12px!important;
  }
  #announcerOperationalApp .brand-lockup {
    padding:0 0 7px!important;
    border-right:0!important;
    border-bottom:1px solid var(--ref-line)!important;
  }
  #announcerOperationalApp .brand-lockup img { width:30px!important; height:30px!important; }
  #announcerOperationalApp .brand-title { font-size:18px!important; }
  body.light-mode #announcerOperationalApp .topbar-actions,
  body.dark-mode #announcerOperationalApp .topbar-actions {
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    min-width:0!important;
  }
  body.light-mode #announcerOperationalApp .topbar-context,
  body.dark-mode #announcerOperationalApp .topbar-context {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 118px 154px!important;
    gap:7px!important;
    min-width:0!important;
  }
  body.light-mode #announcerOperationalApp .topbar-context #locationSelect,
  body.dark-mode #announcerOperationalApp .topbar-context #locationSelect,
  body.light-mode #announcerOperationalApp .topbar-context #viewSelect,
  body.dark-mode #announcerOperationalApp .topbar-context #viewSelect,
  body.light-mode #announcerOperationalApp .topbar-context .identity-pill,
  body.dark-mode #announcerOperationalApp .topbar-context .identity-pill {
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    min-height:42px!important;
  }
  #announcerOperationalApp .reference-primary-actions {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) 42px!important;
    gap:7px!important;
    width:100%!important;
  }
  #announcerOperationalApp .reference-primary-actions :is(#uploadHtmlBtn,#speakerPanelBtn) {
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    padding:0 10px!important;
  }
  #announcerOperationalApp .reference-primary-actions .topbar-more,
  #announcerOperationalApp .reference-primary-actions .topbar-more summary {
    display:grid!important;
    width:42px!important;
    min-width:42px!important;
    height:44px!important;
    min-height:44px!important;
  }
  #announcerOperationalApp .reference-task-heading { margin-top:8px!important; padding:10px 14px!important; }
  #announcerOperationalApp #panelRoster .time-block-card { padding:10px 14px 0!important; }
  #announcerOperationalApp #panelRoster .roster-date-controls { max-width:none!important; grid-template-columns:170px minmax(0,1fr)!important; }
  #announcerOperationalApp #panelRoster #rosterDate { width:170px!important; }
  #announcerOperationalApp .reference-session-summary { margin-top:8px!important; padding:8px 0!important; }
  #announcerOperationalApp #panelRoster .roster-card { padding:12px 14px 0!important; }
  #announcerOperationalApp #panelRoster .roster-toolbar { gap:7px 12px!important; }
  #announcerOperationalApp #panelRoster .roster-table-wrap { margin:8px -14px 0!important; max-height:none!important; overflow-x:auto!important; overflow-y:visible!important; }
  #announcerOperationalApp .reference-roster-footer { margin:0 -14px!important; padding:9px 14px!important; }
}
@media (min-width:600px) and (max-width:680px) {
  body.light-mode #announcerOperationalApp .topbar-context,
  body.dark-mode #announcerOperationalApp .topbar-context { grid-template-columns:minmax(0,1fr) 118px!important; }
  #announcerOperationalApp .topbar-context .identity-pill { grid-column:1 / -1!important; }
}

/* Low-resolution landscape tablets --------------------------------------
   This must be the last tablet terminal layer. Earlier design generations
   each used !important grid rules, which let a 10-inch Android tablet land
   on a spacious command header and pushed the fourth chemistry pool out of
   the usable work area. Keep context in row one and direct work actions in
   row two; no control is hidden or clipped to get this compact shape. */
@media (min-width:901px) and (max-width:1300px) and (orientation:landscape),
       (min-width:901px) and (max-height:820px) and (orientation:landscape) {
  #announcerOperationalApp.wrap { width:min(calc(100% - 28px), 1480px)!important; }
  #announcerOperationalApp .topbar {
    display:grid!important;
    grid-template-columns:176px minmax(0,1fr)!important;
    gap:12px!important;
    align-items:center!important;
    min-height:0!important;
    padding:8px 12px!important;
  }
  #announcerOperationalApp .brand-lockup {
    min-height:88px!important;
    padding:0 12px 0 0!important;
    border-right:1px solid var(--ops-border, var(--ref-line))!important;
    border-bottom:0!important;
  }
  #announcerOperationalApp .brand-lockup img { width:34px!important; height:34px!important; flex-basis:34px!important; }
  #announcerOperationalApp .brand-title { font-size:18px!important; }
  #announcerOperationalApp .brand-powered { display:none!important; }
  body.light-mode #announcerOperationalApp .topbar-actions,
  body.dark-mode #announcerOperationalApp .topbar-actions {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"context context" "status utility"!important;
    align-items:center!important;
    gap:4px 8px!important;
    min-height:88px!important;
  }
  body.light-mode #announcerOperationalApp .topbar-context,
  body.dark-mode #announcerOperationalApp .topbar-context {
    grid-area:context!important;
    display:grid!important;
    grid-template-columns:minmax(210px,1fr) 116px 146px!important;
    gap:8px!important;
    min-width:0!important;
  }
  #announcerOperationalApp .topbar-context :is(#locationSelect,#viewSelect,.identity-pill) {
    display:block!important;
    width:100%!important;
    height:42px!important;
    min-height:42px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  #announcerOperationalApp .topbar-context .device-pill { display:none!important; }
  #announcerOperationalApp .reference-primary-actions,
  #announcerOperationalApp .topbar-utility {
    grid-area:utility!important;
    display:grid!important;
    grid-template-columns:124px 132px 42px!important;
    gap:8px!important;
    width:auto!important;
    align-items:center!important;
  }
  #announcerOperationalApp .reference-primary-actions :is(#uploadHtmlBtn,#speakerPanelBtn),
  #announcerOperationalApp .topbar-utility :is(#uploadHtmlBtn,#speakerPanelBtn) {
    display:inline-flex!important;
    width:100%!important;
    min-width:0!important;
    height:44px!important;
    min-height:44px!important;
    padding:0 10px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  #announcerOperationalApp .reference-primary-actions #uploadHtmlBtn { grid-column:1!important; grid-row:1!important; order:0!important; }
  #announcerOperationalApp .reference-primary-actions #speakerPanelBtn { grid-column:2!important; grid-row:1!important; order:0!important; width:132px!important; min-width:132px!important; }
  #announcerOperationalApp .reference-primary-actions .topbar-more,
  #announcerOperationalApp .topbar-utility .topbar-more,
  #announcerOperationalApp .reference-primary-actions .topbar-more summary,
  #announcerOperationalApp .topbar-utility .topbar-more summary {
    display:grid!important;
    width:42px!important;
    min-width:42px!important;
    height:44px!important;
    min-height:44px!important;
  }
  #announcerOperationalApp .reference-primary-actions .topbar-more { grid-column:3!important; grid-row:1!important; order:0!important; }
  #announcerOperationalApp .topbar-more[open] .topbar-more-menu {
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    width:244px!important;
    max-height:none!important;
    overflow:visible!important;
  }
  #announcerOperationalApp .topbar-more[open] .topbar-more-menu button {
    display:inline-flex!important;
    min-width:0!important;
    min-height:42px!important;
    white-space:nowrap!important;
  }
  #announcerOperationalApp .topbar-status {
    grid-area:status!important;
    display:block!important;
    min-width:0!important;
  }
  #announcerOperationalApp .topbar-status .next-pill {
    display:flex!important;
    width:100%!important;
    min-height:32px!important;
    padding:4px 8px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  #announcerOperationalApp .topbar-status :is(.time-pill,.last-pill) { display:none!important; }

  /* Chemistry is a two-column workbench on compact landscape tablets. The
     banner and history own the full rail; current pool markup is .chem-slot. */
  #panelChemReadings > .card:first-child { padding:12px 14px!important; }
  #panelChemReadings .page-heading { margin-bottom:0!important; }
  #panelChemReadings .chem-toolbar {
    display:grid!important;
    grid-template-columns:160px 160px repeat(3,auto) minmax(0,1fr)!important;
    align-items:end!important;
    gap:8px!important;
    margin-top:8px!important;
    padding-top:8px!important;
  }
  #panelChemReadings .chem-toolbar .field { min-width:0!important; max-width:none!important; }
  #panelChemReadings .chem-toolbar .spacer { display:none!important; }
  #panelChemReadings #chemProgressPill { justify-self:end!important; white-space:nowrap!important; }
  #panelChemReadings .chem-grid {
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    overflow:visible!important;
  }
  #panelChemReadings .chem-round-banner,
  #panelChemReadings .chem-history { grid-column:1 / -1!important; }
  #panelChemReadings .chem-slot { min-width:0!important; overflow:visible!important; }
}

/* Final terminal layer for short Android landscape tablets. This deliberately
   wins over the earlier width/height tablet experiments: context is one row,
   primary work actions are the second row, and the app never spends a third
   row on transient status chrome. */
@media (min-width:600px) and (max-width:1300px) and (max-height:820px) and (orientation:landscape) {
  body.light-mode #announcerOperationalApp .topbar,
  body.dark-mode #announcerOperationalApp .topbar {
    display:grid!important;
    grid-template-columns:150px minmax(0,1fr)!important;
    gap:10px!important;
    min-height:0!important;
    padding:6px 10px!important;
  }
  body.light-mode #announcerOperationalApp .brand-lockup,
  body.dark-mode #announcerOperationalApp .brand-lockup {
    min-height:88px!important;
    padding:0 10px 0 0!important;
    border-right:1px solid var(--ops-border, var(--ref-line))!important;
    border-bottom:0!important;
  }
  body.light-mode #announcerOperationalApp .topbar-actions,
  body.dark-mode #announcerOperationalApp .topbar-actions {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:42px 44px!important;
    gap:4px!important;
    min-height:88px!important;
    align-items:center!important;
  }
  body.light-mode #announcerOperationalApp .topbar-context,
  body.dark-mode #announcerOperationalApp .topbar-context {
    display:grid!important;
    grid-template-columns:minmax(160px,1fr) 106px minmax(132px,1fr)!important;
    gap:7px!important;
    min-width:0!important;
  }
  body.light-mode #announcerOperationalApp .topbar-context :is(#locationSelect,#viewSelect,.identity-pill),
  body.dark-mode #announcerOperationalApp .topbar-context :is(#locationSelect,#viewSelect,.identity-pill) {
    width:100%!important;
    min-width:0!important;
    height:42px!important;
    min-height:42px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  body.light-mode #announcerOperationalApp .topbar-status,
  body.dark-mode #announcerOperationalApp .topbar-status { display:none!important; }
  #announcerOperationalApp .topbar-context .device-pill { display:none!important; }
  #announcerOperationalApp .reference-primary-actions,
  #announcerOperationalApp .topbar-utility {
    display:flex!important;
    justify-content:flex-end!important;
    align-items:center!important;
    gap:8px!important;
    min-width:0!important;
    width:100%!important;
  }
  #announcerOperationalApp .reference-primary-actions :is(#uploadHtmlBtn,#speakerPanelBtn) {
    display:inline-flex!important;
    height:44px!important;
    min-height:44px!important;
    min-width:0!important;
    padding:0 12px!important;
    white-space:nowrap!important;
  }
  #announcerOperationalApp .reference-primary-actions .topbar-more,
  #announcerOperationalApp .reference-primary-actions .topbar-more summary {
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
  }
  #announcerOperationalApp .reference-primary-actions .topbar-more-menu {
    right:0!important;
    left:auto!important;
    width:min(280px,calc(100vw - 28px))!important;
    max-height:none!important;
    overflow:visible!important;
  }
  #announcerOperationalApp #panelRoster .time-block-card { padding:8px 14px 0!important; }
  #announcerOperationalApp #panelRoster .roster-date-controls { grid-template-columns:170px minmax(0,1fr)!important; }
  #announcerOperationalApp .reference-session-summary { margin-top:6px!important; padding:6px 0 8px!important; }
  #announcerOperationalApp #panelRoster .roster-card { padding:10px 14px 0!important; }
  #announcerOperationalApp #panelRoster .roster-table-wrap { max-height:none!important; overflow-x:auto!important; overflow-y:visible!important; }
}

/* Tablet roster cards -----------------------------------------------------
   A full eight-column roster is not useful on a low-resolution tablet: it
   makes staff pan sideways before they can mark attendance. The same entries
   are already rendered as semantic cards, so use them here without dropping
   age, class, level, instructor, zone, attendance, or guardian actions. */
@media (min-width:600px) and (max-width:1100px) {
  #announcerOperationalApp #panelRoster .roster-toolbar {
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:'heading sort' 'search search' 'legend legend' 'bulk bulk'!important;
    gap:8px 12px!important;
  }
  #announcerOperationalApp #panelRoster .roster-heading { min-width:0!important; }
  #announcerOperationalApp #panelRoster .roster-actions { grid-area:sort!important; }
  #announcerOperationalApp #panelRoster .roster-actions select { min-width:132px!important; }
  #announcerOperationalApp #panelRoster .roster-table-wrap { display:none!important; }
  #announcerOperationalApp #panelRoster #rosterMobileList {
    display:grid!important;
    gap:0!important;
    margin:8px -14px 0!important;
    padding:0 14px!important;
    border-top:1px solid var(--ref-line)!important;
  }
  #announcerOperationalApp #panelRoster .roster-mobile-entry {
    display:grid!important;
    grid-template-columns:146px minmax(0,1fr) 44px!important;
    grid-template-areas:'actions heading call' 'actions details call'!important;
    gap:3px 12px!important;
    padding:12px 0!important;
    border:0!important;
    border-bottom:1px solid var(--ref-line)!important;
    border-radius:0!important;
    background:transparent!important;
  }
  #announcerOperationalApp #panelRoster .roster-mobile-heading { grid-area:heading!important; min-width:0!important; }
  #announcerOperationalApp #panelRoster .roster-mobile-heading strong {
    display:block!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  #announcerOperationalApp #panelRoster .roster-mobile-details {
    grid-area:details!important;
    margin:0!important;
    color:var(--ref-muted)!important;
    line-height:1.35!important;
    white-space:pre-line!important;
  }
  #announcerOperationalApp #panelRoster .roster-mobile-actions { display:contents!important; }
  #announcerOperationalApp #panelRoster .roster-mobile-actions .attWrap {
    grid-area:actions!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-self:start!important;
    gap:7px!important;
  }
  #announcerOperationalApp #panelRoster .roster-mobile-actions .attBtn {
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:0!important;
    font-size:0!important;
  }
  #announcerOperationalApp #panelRoster .roster-mobile-actions .guardian-callout {
    grid-area:call!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:0!important;
    align-self:start!important;
    justify-self:end!important;
    font-size:0!important;
  }
  #announcerOperationalApp #panelRoster .roster-mobile-actions .guardian-callout-label {
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
    clip:rect(0,0,0,0)!important;
  }
}

/* Delivery clarity: informs staff before a call-out without changing its route. */
#announcerOperationalApp .announcement-delivery-status {
  display:flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  margin:10px 0;
  padding:8px 12px;
  border:1px solid var(--ref-line);
  border-radius:8px;
  background:var(--ref-soft);
  color:var(--ref-ink);
  font-size:14px;
  font-weight:700;
}
#announcerOperationalApp .announcement-delivery-icon { flex:0 0 auto; }
#announcerOperationalApp .announcement-delivery-status[data-state="remote-ready"],
#announcerOperationalApp .announcement-delivery-status[data-state="local-ready"] { border-color:#9ad9ba; background:#effbf4; color:#087a45; }
#announcerOperationalApp .announcement-delivery-status[data-state="browser-direct"] { border-color:#a9c8ff; background:#f1f6ff; color:var(--ref-blue); }
#announcerOperationalApp .announcement-delivery-status[data-state="local-unlock"],
#announcerOperationalApp .announcement-delivery-status[data-state="remote-locked"],
#announcerOperationalApp .announcement-delivery-status[data-state="setup-needed"] { border-color:#f0c989; background:#fff8e8; color:#8a5200; }
#announcerOperationalApp #announcementDeliverySettingsBtn { margin-left:auto; min-height:44px; white-space:nowrap; }
body.dark-mode #announcerOperationalApp .announcement-delivery-status { background:#102944; color:var(--ref-ink); }
body.dark-mode #announcerOperationalApp .announcement-delivery-status[data-state="remote-ready"],
body.dark-mode #announcerOperationalApp .announcement-delivery-status[data-state="local-ready"] { background:#123e38; color:#88e4bd; }
body.dark-mode #announcerOperationalApp .announcement-delivery-status[data-state="browser-direct"] { background:#173865; color:#dceaff; }
body.dark-mode #announcerOperationalApp .announcement-delivery-status[data-state="local-unlock"],
body.dark-mode #announcerOperationalApp .announcement-delivery-status[data-state="remote-locked"],
body.dark-mode #announcerOperationalApp .announcement-delivery-status[data-state="setup-needed"] { background:#4a3515; color:#ffd98b; }
@media (max-width:599px) {
  #announcerOperationalApp .announcement-delivery-status { align-items:flex-start; margin:8px 18px 12px; }
  #announcerOperationalApp #announcementDeliverySettingsBtn { width:100%; margin:4px 0 0; }
  #announcerOperationalApp .announcement-delivery-status:has(#announcementDeliverySettingsBtn:not([hidden])) { flex-wrap:wrap; }
}

/* Tablet recovery: the document owns vertical touch scrolling.  Roster cards
   and Guard Task lists expand into that document; they never become nested
   vertical scrollports on lower-resolution Android tablets. */
@media (min-width:600px) and (max-width:1100px) {
  body.android-app #announcerOperationalApp :is(#panelRoster, #panelGuardTasks, .guard-grid, .guard-section, #guardOpeningList, #guardOffDeckList, #guardClosingList) {
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    overscroll-behavior:auto!important;
    touch-action:auto!important;
  }
  body.android-app #announcerOperationalApp #panelRoster :is(.roster-table-wrap, #rosterMobileList) {
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:visible!important;
    overscroll-behavior:auto!important;
    touch-action:auto!important;
  }
  body.android-app #announcerOperationalApp #panelRoster .roster-table-wrap { overflow-x:auto!important; }
}

/* Keep the roster's only optional rail horizontal at every Android tablet width. */
@media (min-width:600px) {
  body.android-app #announcerOperationalApp #panelRoster .roster-table-wrap {
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    overscroll-behavior:auto!important;
    touch-action:auto!important;
  }
}


/* 2.0.5 Hotwav recovery: attendance marks must remain visible without an
   icon font or nested span. Keep the compact 40px targets and use only
   platform-safe button text. */
#panelRoster .attWrap .attBtn[data-attendance-mark] {
  display: inline-grid !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  place-items: center !important;
  overflow: visible !important;
  text-indent: 0 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}
#panelRoster .attWrap .attBtn[data-attendance-mark]::before,
#panelRoster .attWrap .attBtn[data-attendance-mark]::after {
  content: none !important;
  display: none !important;
}
#panelRoster .attWrap .attBtn.here[data-attendance-mark] {
  color: #147a46 !important;
  border-color: #69d4a1 !important;
  background: #f4fcf6 !important;
}
#panelRoster .attWrap .attBtn.absent[data-attendance-mark] {
  color: #b42331 !important;
  border-color: #ffabb1 !important;
  background: #fff6f6 !important;
}
#panelRoster .attWrap .attBtn.clear[data-attendance-mark] {
  color: #31537f !important;
  border-color: #9bb0cc !important;
  background: #edf3fb !important;
}
#panelRoster .attWrap .attBtn.active[data-attendance-mark] {
  color: #fff !important;
  text-shadow: none !important;
}
body.android-app #panelRoster .attWrap .attBtn[data-attendance-mark] {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 17px !important;
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}
body.android-app #panelRoster .attWrap .attBtn.here[data-attendance-mark] { color: #147a46 !important; }
body.android-app #panelRoster .attWrap .attBtn.absent[data-attendance-mark] { color: #b42331 !important; }
body.android-app #panelRoster .attWrap .attBtn.clear[data-attendance-mark] { color: #31537f !important; }
body.android-app #panelRoster .attWrap .attBtn.active[data-attendance-mark] { color: #fff !important; }

#panelRoster .attWrap .attBtn[data-attendance-mark]:focus-visible {
  outline: 3px solid #145df2 !important;
  outline-offset: 2px !important;
}
@media (forced-colors: active) {
  #panelRoster .attWrap .attBtn[data-attendance-mark] {
    forced-color-adjust: auto;
    color: ButtonText !important;
    background: Canvas !important;
    border-color: ButtonText !important;
  }
  #panelRoster .attWrap .attBtn.active[data-attendance-mark] {
    color: HighlightText !important;
    background: Highlight !important;
    border-color: Highlight !important;
  }
}

/* 2.0.6: local SVG marks avoid the Hotwav WebView icon-font failure. */
#panelRoster .attWrap .attBtn[data-attendance-mark] .attendance-icon {
  display: block !important;
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  overflow: visible !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 3 !important;
  color: currentColor !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}
#panelRoster .attWrap .attBtn[data-attendance-mark] .attendance-icon path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}
#panelRoster .attWrap .attBtn[data-attendance-mark] .attendance-fallback-mark {
  display: none !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}
/* The runtime can opt into a readable platform-text fallback if a WebView
   reports that inline SVG is unavailable. */
#panelRoster.announcer-svg-fallback .attWrap .attBtn[data-attendance-mark] .attendance-icon { display: none !important; }
#panelRoster.announcer-svg-fallback .attWrap .attBtn[data-attendance-mark] .attendance-fallback-mark { display: block !important; }
@media (forced-colors: active) {
  #panelRoster .attWrap .attBtn[data-attendance-mark] .attendance-icon,
  #panelRoster .attWrap .attBtn[data-attendance-mark] .attendance-icon path {
    stroke: currentColor !important;
  }
}

/* 2026-09-22: add a restrained color hierarchy without changing the roster
   geometry. Keep meaning attached to color, with the vector marks and text
   labels available for staff and older Android WebViews. */
#announcerOperationalApp #panelRoster .desktop-session-select {
  border-color:#72d7dc!important;
  background:#f0fbfc!important;
  box-shadow:inset 3px 0 0 #16a6b3!important;
}
#announcerOperationalApp .reference-session-summary {
  border-color:#b8e8e9!important;
  background:linear-gradient(90deg,#f0fbfc 0%,#f8fcff 68%,#f1f6ff 100%)!important;
}
#announcerOperationalApp .reference-session-summary strong { color:#075a78!important; }
#announcerOperationalApp .reference-session-status {
  color:#087a55!important;
  background:#e3f8ee!important;
}
#announcerOperationalApp #panelRoster .roster-card {
  background:#fff!important;
}
#announcerOperationalApp #panelRoster .roster-toolbar {
  background:linear-gradient(90deg,#f5f8ff 0%,#fff 74%)!important;
  border-bottom:1px solid #d6e2f6!important;
}
#announcerOperationalApp #panelRoster .roster-heading h2 { color:#123f91!important; }
#announcerOperationalApp #panelRoster .roster-table th {
  background:#eaf2ff!important;
  color:#284d87!important;
  border-color:#d1def3!important;
}
#announcerOperationalApp #panelRoster .roster-table tr[data-roster-entry]:nth-child(even) td {
  background:#f7faff!important;
}
#announcerOperationalApp #panelRoster .roster-table tr[data-roster-entry].row-here td,
#announcerOperationalApp #panelRoster .roster-table tr[data-roster-entry].roster-entry-present td {
  background:#f0faf5!important;
}
#announcerOperationalApp #panelRoster .roster-table tr[data-roster-entry].row-absent td,
#announcerOperationalApp #panelRoster .roster-table tr[data-roster-entry].roster-entry-absent td {
  background:#fff4f3!important;
}
#announcerOperationalApp #panelRoster .attWrap .attBtn.here[data-attendance-mark] {
  color:#16804f!important;
  border-color:#8bd4ad!important;
  background:#eefaf3!important;
}
#announcerOperationalApp #panelRoster .attWrap .attBtn.absent[data-attendance-mark] {
  color:#c33d48!important;
  border-color:#f0a0a3!important;
  background:#fff1f1!important;
}
#announcerOperationalApp #panelRoster .attWrap .attBtn.clear[data-attendance-mark] {
  color:#49678f!important;
  border-color:#b7c7df!important;
  background:#eef3fa!important;
}
#announcerOperationalApp #panelRoster .attWrap .attBtn.active.here[data-attendance-mark] {
  color:#fff!important;
  border-color:#158453!important;
  background:#158453!important;
  box-shadow:0 2px 7px rgba(21,132,83,.24)!important;
}
#announcerOperationalApp #panelRoster .attWrap .attBtn.active.absent[data-attendance-mark] {
  color:#fff!important;
  border-color:#c93643!important;
  background:#c93643!important;
  box-shadow:0 2px 7px rgba(201,54,67,.22)!important;
}
#announcerOperationalApp #panelRoster .attWrap .attBtn.active.clear[data-attendance-mark] {
  color:#fff!important;
  border-color:#526d96!important;
  background:#526d96!important;
}
#announcerOperationalApp #panelRoster .zone.zone-action {
  border-color:#b5c9ed!important;
  background:#f0f5ff!important;
  color:#285492!important;
}
#announcerOperationalApp #panelRoster .guardian-callout {
  background:#eaf2ff!important;
  color:#1453ad!important;
}
body.dark-mode #announcerOperationalApp #panelRoster .desktop-session-select {
  border-color:#287e91!important;
  background:#103247!important;
  color:#d9f8fb!important;
}
body.dark-mode #announcerOperationalApp .reference-session-summary {
  border-color:#286779!important;
  background:linear-gradient(90deg,#103247 0%,#142b45 100%)!important;
}
body.dark-mode #announcerOperationalApp .reference-session-summary strong { color:#a7edf0!important; }
body.dark-mode #announcerOperationalApp .reference-session-status { background:#123e38!important; color:#9ce7c3!important; }
body.dark-mode #announcerOperationalApp #panelRoster .roster-toolbar { background:#112943!important; border-color:#2a4867!important; }
body.dark-mode #announcerOperationalApp #panelRoster .roster-heading h2 { color:#b9d4ff!important; }
body.dark-mode #announcerOperationalApp #panelRoster .roster-table th { background:#19385a!important; color:#c6dcff!important; border-color:#2a4867!important; }
body.dark-mode #announcerOperationalApp #panelRoster .roster-table tr[data-roster-entry]:nth-child(even) td { background:#122b45!important; }
body.dark-mode #announcerOperationalApp #panelRoster .roster-table tr[data-roster-entry].row-here td,
body.dark-mode #announcerOperationalApp #panelRoster .roster-table tr[data-roster-entry].roster-entry-present td { background:#12372f!important; }
body.dark-mode #announcerOperationalApp #panelRoster .roster-table tr[data-roster-entry].row-absent td,
body.dark-mode #announcerOperationalApp #panelRoster .roster-table tr[data-roster-entry].roster-entry-absent td { background:#40252f!important; }
body.dark-mode #announcerOperationalApp #panelRoster .attWrap .attBtn.here[data-attendance-mark] { color:#9ce7bd!important; border-color:#3b8d65!important; background:#12372f!important; }
body.dark-mode #announcerOperationalApp #panelRoster .attWrap .attBtn.absent[data-attendance-mark] { color:#ffb8bd!important; border-color:#a84c58!important; background:#40252f!important; }
body.dark-mode #announcerOperationalApp #panelRoster .attWrap .attBtn.clear[data-attendance-mark] { color:#d2e0f7!important; border-color:#5b769d!important; background:#1a3452!important; }
body.dark-mode #announcerOperationalApp #panelRoster .attWrap .attBtn.active.here[data-attendance-mark] { color:#fff!important; background:#158453!important; }
body.dark-mode #announcerOperationalApp #panelRoster .attWrap .attBtn.active.absent[data-attendance-mark] { color:#fff!important; background:#c93643!important; }
body.dark-mode #announcerOperationalApp #panelRoster .attWrap .attBtn.active.clear[data-attendance-mark] { color:#fff!important; background:#526d96!important; }
body.dark-mode #announcerOperationalApp #panelRoster .zone.zone-action { border-color:#41648f!important; background:#183451!important; color:#c6dcff!important; }
body.dark-mode #announcerOperationalApp #panelRoster .guardian-callout { background:#183451!important; color:#c6dcff!important; }
@media (forced-colors:active) {
  #announcerOperationalApp #panelRoster .roster-table tr[data-roster-entry] td,
  #announcerOperationalApp #panelRoster .roster-table th { forced-color-adjust:auto; }
}

/* 2026-09-22: operational roster editing stays visible and compact. */
#announcerOperationalApp #panelRoster .roster-actions #addSwimmerBtn {
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:44px;
  white-space:nowrap;
}
#announcerOperationalApp #panelRoster .zone.zone-action {
  appearance:none;
  cursor:pointer;
  min-height:44px;
  font:inherit;
}
#announcerOperationalApp #panelRoster .zone.zone-action:disabled {
  cursor:not-allowed;
  opacity:.62;
}
#announcerOperationalApp #panelRoster .zone.zone-action:focus-visible,
#announcerOperationalApp #panelRoster #addSwimmerBtn:focus-visible {
  outline:3px solid rgba(28,101,243,.35);
  outline-offset:2px;
}
#announcerOperationalApp #panelRoster .roster-mobile-details .roster-mobile-zone {
  display:inline-flex;
  vertical-align:middle;
  margin:4px 0 0;
  color:var(--ref-blue);
  border-color:#bed1f4;
  background:#f5f8ff;
}
@media (max-width:599px) {
  #announcerOperationalApp #panelRoster .roster-actions #addSwimmerBtn {
    display:inline-flex!important;
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    padding:0!important;
    font-size:0!important;
  }
  #announcerOperationalApp #panelRoster .roster-actions #addSwimmerBtn > span:first-child {
    font-size:24px;
    line-height:1;
  }
  #announcerOperationalApp #panelRoster .roster-mobile-details .roster-mobile-zone {
    min-height:44px;
    padding:0 12px;
    margin-top:7px;
  }
}

#announcerOperationalApp .modal-status { margin:12px 0 0; padding:10px 12px; border:1px solid #f1c4bd; border-radius:9px; color:#9b3027; background:#fff7f5; font-size:14px; line-height:1.35; }
#announcerOperationalApp .modal-status[data-tone="working"] { border-color:#bcd4ff; color:#174d9d; background:#f3f7ff; }

/* Wide-screen density pass: keep workspace context and primary actions on one
   compact command row, then reduce the vertical chrome around the roster. */
@media (min-width:1200px) {
  body.light-mode #announcerOperationalApp .topbar,
  body.dark-mode #announcerOperationalApp .topbar {
    grid-template-columns:minmax(190px,220px) minmax(0,1fr)!important;
    align-items:center!important;
    gap:14px!important;
    min-height:72px!important;
    padding:8px 16px!important;
  }
  #announcerOperationalApp .brand-lockup {
    min-width:0!important;
    padding-right:14px!important;
  }
  body.light-mode #announcerOperationalApp .topbar-actions,
  body.dark-mode #announcerOperationalApp .topbar-actions {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:'context utility'!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
  }
  body.light-mode #announcerOperationalApp .topbar-context,
  body.dark-mode #announcerOperationalApp .topbar-context {
    display:flex!important;
    grid-area:context!important;
    justify-content:flex-end!important;
    align-items:center!important;
    gap:4px!important;
    min-width:0!important;
  }
  #announcerOperationalApp .topbar-context #locationSelect {
    flex:0 1 225px!important;
    width:min(225px,22vw)!important;
    min-width:0!important;
  }
  #announcerOperationalApp .topbar-context #viewSelect {
    flex:0 0 132px!important;
    width:132px!important;
  }
  #announcerOperationalApp .topbar-context .identity-pill {
    flex:0 1 168px!important;
    width:min(168px,16vw)!important;
    min-width:0!important;
  }
  #announcerOperationalApp .topbar-context .device-pill { display:none!important; }
  #announcerOperationalApp .topbar-status { display:none!important; }
  #announcerOperationalApp .reference-primary-actions {
    grid-area:utility!important;
    justify-content:flex-end!important;
    gap:6px!important;
  }
  #announcerOperationalApp .reference-primary-actions :is(#uploadHtmlBtn,#speakerPanelBtn) {
    min-width:126px!important;
    width:auto!important;
    height:42px!important;
    min-height:42px!important;
    padding:0 11px!important;
  }
  #announcerOperationalApp .reference-primary-actions .topbar-more summary {
    width:42px!important;
    min-width:42px!important;
    height:42px!important;
  }

  #announcerOperationalApp #panelRoster .time-block-card {
    grid-template-columns:minmax(440px,620px) minmax(0,1fr)!important;
    gap:14px!important;
    padding:8px 16px!important;
  }
  #announcerOperationalApp #panelRoster .roster-date-controls {
    grid-template-columns:190px minmax(0,1fr)!important;
    gap:10px!important;
    max-width:620px!important;
  }
  #announcerOperationalApp #panelRoster #rosterDate { width:190px!important; }
  #announcerOperationalApp #panelRoster .reference-session-summary {
    margin:0!important;
    padding:4px 0 4px 14px!important;
    border-top:0!important;
    border-left:1px solid var(--ref-line)!important;
  }
  #announcerOperationalApp .reference-session-summary > div { gap:0!important; }
  #announcerOperationalApp .reference-session-summary :is(span,small) { line-height:1.25!important; }

  #announcerOperationalApp #panelRoster .roster-card { padding:8px 16px 0!important; }
  #announcerOperationalApp #panelRoster .roster-toolbar {
    gap:5px 12px!important;
    padding:4px 0 2px!important;
  }
  #announcerOperationalApp #panelRoster #tagLegend { padding:3px 0 0!important; }
  #announcerOperationalApp #panelRoster #bulkAttendanceActions { gap:6px!important; }
  #announcerOperationalApp #panelRoster #bulkAttendanceActions button {
    min-height:38px!important;
    padding-top:5px!important;
    padding-bottom:5px!important;
  }
  #announcerOperationalApp #panelRoster .roster-table-wrap { margin-top:4px!important; }
}

/* Bridge the desktop-width gap below 1200px. Without this row, the workspace
   falls back to the roomy legacy header and stacked session summary just
   before the tablet layout begins. Keep the short-height tablet layer intact. */
@media (min-width:1101px) and (max-width:1199px) and (min-height:761px) {
  body.light-mode #announcerOperationalApp .topbar,
  body.dark-mode #announcerOperationalApp .topbar {
    display:grid!important;
    grid-template-columns:170px minmax(0,1fr)!important;
    align-items:center!important;
    gap:10px!important;
    min-height:68px!important;
    padding:6px 12px!important;
  }
  body.light-mode #announcerOperationalApp .brand-lockup,
  body.dark-mode #announcerOperationalApp .brand-lockup {
    min-width:0!important;
    min-height:0!important;
    padding-right:10px!important;
  }
  body.light-mode #announcerOperationalApp .topbar-actions,
  body.dark-mode #announcerOperationalApp .topbar-actions {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:'context utility'!important;
    grid-template-rows:44px!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
  }
  body.light-mode #announcerOperationalApp .topbar-context,
  body.dark-mode #announcerOperationalApp .topbar-context {
    display:flex!important;
    grid-area:context!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    align-items:center!important;
    gap:3px!important;
    min-width:0!important;
  }
  #announcerOperationalApp .topbar-context #locationSelect {
    flex:0 1 190px!important;
    width:190px!important;
    min-width:0!important;
  }
  #announcerOperationalApp .topbar-context #viewSelect {
    flex:0 1 106px!important;
    width:106px!important;
    min-width:0!important;
  }
  #announcerOperationalApp .topbar-context .identity-pill {
    flex:0 1 136px!important;
    width:136px!important;
    min-width:0!important;
    padding:0 8px!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  #announcerOperationalApp .topbar-context .device-pill,
  #announcerOperationalApp .topbar-status { display:none!important; }
  #announcerOperationalApp .reference-primary-actions {
    grid-area:utility!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:5px!important;
    min-width:0!important;
  }
  #announcerOperationalApp .reference-primary-actions :is(#uploadHtmlBtn,#speakerPanelBtn) {
    flex:0 0 auto!important;
    min-width:0!important;
    width:auto!important;
    height:42px!important;
    min-height:42px!important;
    padding:0 9px!important;
    font-size:14px!important;
  }
  #announcerOperationalApp .reference-primary-actions .topbar-more summary {
    width:40px!important;
    min-width:40px!important;
    height:42px!important;
  }

  #announcerOperationalApp #panelRoster .time-block-card {
    display:grid!important;
    grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr)!important;
    align-items:center!important;
    gap:12px!important;
    padding:8px 14px!important;
  }
  #announcerOperationalApp #panelRoster .time-block-toolbar { min-width:0!important; }
  #announcerOperationalApp #panelRoster .roster-date-controls {
    grid-template-columns:170px minmax(0,1fr)!important;
    gap:8px!important;
    max-width:none!important;
    width:100%!important;
  }
  #announcerOperationalApp #panelRoster #rosterDate { width:170px!important; }
  #announcerOperationalApp #panelRoster .reference-session-summary {
    min-width:0!important;
    margin:0!important;
    padding:4px 0 4px 12px!important;
    border-top:0!important;
    border-left:1px solid var(--ref-line)!important;
    gap:10px!important;
  }
  #announcerOperationalApp #panelRoster .reference-session-summary > div {
    min-width:0!important;
    gap:2px!important;
  }
  #announcerOperationalApp #panelRoster .reference-session-summary :is(span,small) {
    line-height:1.3!important;
  }
  #announcerOperationalApp #panelRoster .reference-session-summary small {
    overflow-wrap:anywhere!important;
  }
}

/* On 1200–1300px wide, normal-height screens were still picking up the
   landscape-tablet two-row header. Keep those workstations in the same single
   compact command row as other desktop widths. Short screens remain tablet. */
@media (min-width:1200px) and (max-width:1300px) and (min-height:761px) {
  body.light-mode #announcerOperationalApp .topbar,
  body.dark-mode #announcerOperationalApp .topbar {
    display:grid!important;
    grid-template-columns:200px minmax(0,1fr)!important;
    align-items:center!important;
    gap:12px!important;
    min-height:72px!important;
    padding:8px 16px!important;
  }
  body.light-mode #announcerOperationalApp .brand-lockup,
  body.dark-mode #announcerOperationalApp .brand-lockup {
    min-width:0!important;
    min-height:0!important;
    padding-right:12px!important;
  }
  body.light-mode #announcerOperationalApp .topbar-actions,
  body.dark-mode #announcerOperationalApp .topbar-actions {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:44px!important;
    grid-template-areas:'context utility'!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
  }
  body.light-mode #announcerOperationalApp .topbar-context,
  body.dark-mode #announcerOperationalApp .topbar-context {
    display:flex!important;
    grid-area:context!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:4px!important;
    min-width:0!important;
  }
  #announcerOperationalApp .topbar-context #locationSelect {
    flex:0 1 225px!important;
    width:225px!important;
    min-width:0!important;
  }
  #announcerOperationalApp .topbar-context #viewSelect {
    flex:0 1 132px!important;
    width:132px!important;
    min-width:0!important;
  }
  #announcerOperationalApp .topbar-context .identity-pill {
    flex:0 1 168px!important;
    width:168px!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  #announcerOperationalApp .topbar-context .device-pill,
  #announcerOperationalApp .topbar-status { display:none!important; }
  #announcerOperationalApp .reference-primary-actions {
    grid-area:utility!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:6px!important;
    min-width:0!important;
  }
}

/* Full-operations compactness pass (2026-09-23). The composer owns the wide
   rail while presets size to their content; phone chemistry stays in normal
   vertical page flow and the mobile navigation remains available in every
   workspace. */
#announcerOperationalApp #panelAnnouncements > .grid {
  display:grid!important;
  grid-template-columns:minmax(0,1.65fr) minmax(260px,.8fr)!important;
  align-items:start!important;
  gap:12px!important;
}
#announcerOperationalApp #panelAnnouncements > .grid > .card {
  min-width:0!important;
  align-self:start!important;
}
#announcerOperationalApp #panelAnnouncements > .grid > .card:first-child textarea {
  width:100%!important;
  min-height:96px!important;
}
#announcerOperationalApp #panelAnnouncements > .grid > .card:last-child .row {
  align-items:flex-start!important;
  gap:8px!important;
}
#announcerOperationalApp #panelAnnouncements > .grid > .card:last-child button {
  min-height:40px!important;
  white-space:normal!important;
}
#announcerOperationalApp .mobile-workspace-menu { display:none!important; }

@media (min-width:600px) and (max-width:899px) {
  #announcerOperationalApp #panelAnnouncements > .grid {
    grid-template-columns:minmax(0,1.2fr) minmax(220px,.8fr)!important;
  }
}

@media (max-width:599px) {
  #announcerOperationalApp #panelAnnouncements > .grid {
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
  }
  #announcerOperationalApp #panelAnnouncements > .grid > .card:first-child textarea {
    min-height:88px!important;
  }
  #announcerOperationalApp #panelChemReadings .chem-grid {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-flow:row!important;
    overflow:visible!important;
    scroll-snap-type:none!important;
    gap:10px!important;
  }
  #announcerOperationalApp #panelChemReadings .chem-grid > .chem-slot {
    flex:initial!important;
    width:auto!important;
    min-width:0!important;
    scroll-snap-align:none!important;
  }
  #announcerOperationalApp .reference-mobile-nav {
    display:grid!important;
    position:fixed!important;
    z-index:70!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    min-height:62px!important;
    padding:5px 12px max(5px,env(safe-area-inset-bottom))!important;
    border-top:1px solid var(--ref-line)!important;
    background:#fff!important;
    box-shadow:0 -6px 18px rgba(15,45,105,.1)!important;
  }
  body.dark-mode #announcerOperationalApp .reference-mobile-nav {
    border-color:#294562!important;
    background:#101f31!important;
    box-shadow:0 -6px 18px rgba(0,0,0,.24)!important;
  }
  body.dark-mode #announcerOperationalApp .reference-mobile-nav button { color:#b6c8de!important; }
  body.dark-mode #announcerOperationalApp .reference-mobile-nav button.active { color:#7db0ff!important; }
  #mobileWorkspaceMenu {
    display:none!important;
    position:fixed!important;
    z-index:90!important;
    right:12px!important;
    bottom:calc(72px + env(safe-area-inset-bottom))!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:min(340px,calc(100vw - 24px))!important;
    max-height:calc(100dvh - 100px)!important;
    overflow:auto!important;
    overscroll-behavior:contain!important;
    border:1px solid var(--ref-line)!important;
    border-radius:14px!important;
    background:#fff!important;
    box-shadow:0 14px 36px rgba(15,45,105,.2)!important;
    padding:10px!important;
  }
  #mobileWorkspaceMenu.mobile-open {
    display:grid!important;
  }
  #mobileWorkspaceMenu .mobile-workspace-shortcuts {
    display:grid!important;
    grid-column:1 / -1!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
    padding-bottom:8px!important;
    margin-bottom:2px!important;
    border-bottom:1px solid var(--ref-line)!important;
  }
  #mobileWorkspaceMenu .mobile-workspace-shortcut {
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    min-height:42px!important;
    padding:0 8px!important;
    font-size:12px!important;
    white-space:nowrap!important;
  }
  /* Restore the utility buttons from the top bar after placing them in the
     body-level phone menu. */
  body.light-mode #mobileWorkspaceMenu.mobile-open > button {
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
  }
  #mobileWorkspaceMenu .mobile-workspace-shortcut[aria-current="page"] {
    border-color:#91b6ff!important;
    background:#edf4ff!important;
    color:#174a9b!important;
    font-weight:800!important;
  }
  body.dark-mode #mobileWorkspaceMenu.mobile-open {
    border-color:#34506e!important;
    background:#15263a!important;
  }
  body.dark-mode #mobileWorkspaceMenu .mobile-workspace-shortcuts {
    border-color:#34506e!important;
  }
  body.dark-mode #mobileWorkspaceMenu .mobile-workspace-shortcut[aria-current="page"] {
    border-color:#4676b7!important;
    background:#203b5b!important;
    color:#d9e9ff!important;
  }
}

/* Final desktop command-row invariant. Keep the markup's context and primary
   actions as explicit siblings in the same grid row at every workstation
   width; older landscape rules otherwise leave an implicit second row. */
@media (min-width:1101px) and (min-height:761px) {
  body.light-mode #announcerOperationalApp .topbar,
  body.dark-mode #announcerOperationalApp .topbar {
    min-height:64px!important;
    padding:6px 12px!important;
  }
  body.light-mode #announcerOperationalApp .topbar-actions,
  body.dark-mode #announcerOperationalApp .topbar-actions {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-rows:44px!important;
    grid-template-areas:'context utility'!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
  }
  body.light-mode #announcerOperationalApp .topbar-context,
  body.dark-mode #announcerOperationalApp .topbar-context {
    grid-area:context!important;
    flex-wrap:nowrap!important;
    justify-content:flex-start!important;
    min-width:0!important;
  }
  #announcerOperationalApp .topbar-context #locationSelect {
    flex:1 1 225px!important;
    width:auto!important;
    min-width:0!important;
  }
  body.light-mode #announcerOperationalApp .topbar-status,
  body.dark-mode #announcerOperationalApp .topbar-status { display:none!important; }
  #announcerOperationalApp .reference-primary-actions {
    grid-area:utility!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    min-width:0!important;
    min-height:44px!important;
  }
}

/* Android's 1000–1300px landscape layouts use compact desktop rows, but retain
   full-height primary actions for touch. */
@media (min-width:901px) and (max-width:1300px) {
  body.android-app #announcerOperationalApp .reference-primary-actions :is(#uploadHtmlBtn,#speakerPanelBtn) {
    min-height:44px!important;
    height:44px!important;
  }
}