/* AnnouncerCore operations shell
   Cal.com-inspired scheduling discipline: neutral canvas, direct hierarchy,
   compact controls, and geometry that changes only by viewport.
   This is the single terminal layout layer; legacy CSS supplies component
   internals but may not override this scoped operations geometry. */

:root {
  --ops-page: #f7f8fa;
  --ops-surface: #ffffff;
  --ops-subtle: #f3f5f7;
  --ops-border: #dfe4ea;
  --ops-ink: #182230;
  --ops-muted: #667085;
  --ops-blue: #2563eb;
  --ops-blue-hover: #1d4ed8;
  --ops-teal: #0f766e;
  --ops-radius: 12px;
  --ops-control: 44px;
}

body.light-mode { background: var(--ops-page) !important; color: var(--ops-ink) !important; }
body.dark-mode {
  --ops-page: #0f1722;
  --ops-surface: #152131;
  --ops-subtle: #1d2a3a;
  --ops-border: #2e4054;
  --ops-ink: #eff6ff;
  --ops-muted: #a9b8c9;
}

#announcerOperationalApp.wrap {
  width: min(calc(100% - 48px), 1480px) !important;
  max-width: 1480px !important;
  min-width: 0 !important;
}
#announcerOperationalApp :is(.topbar, .card, .roster-table-wrap, .roster-progress) {
  border-color: var(--ops-border) !important;
  box-shadow: none !important;
}
#announcerOperationalApp .topbar,
#panelRoster > .card,
#panelChemReadings > .card,
#panelAnnouncements > .card,
#panelLifeguard > .card,
#panelGuardTasks > .card,
#panelAdmin > .card {
  background: var(--ops-surface) !important;
  border-radius: var(--ops-radius) !important;
}
#announcerOperationalApp :is(button, select, input, textarea) {
  min-height: var(--ops-control) !important;
  border-radius: 8px !important;
}
#announcerOperationalApp :is(button, select, input, textarea):focus-visible {
  outline: 3px solid rgb(37 99 235 / .30) !important;
  outline-offset: 2px !important;
}
#announcerOperationalApp .primary,
#announcerOperationalApp #uploadHtmlBtn {
  background: var(--ops-blue) !important;
  border-color: var(--ops-blue) !important;
  box-shadow: none !important;
}
#announcerOperationalApp .primary:hover,
#announcerOperationalApp #uploadHtmlBtn:hover {
  background: var(--ops-blue-hover) !important;
  border-color: var(--ops-blue-hover) !important;
}
#announcerOperationalApp [inert] { pointer-events:none !important; }
/* Legacy layout declarations include forced panel display. Semantic workspace
   visibility takes precedence so direct routes cannot stack two workspaces. */
#announcerOperationalApp :is(#panelRoster, #panelAnnouncements, #panelChemReadings, #panelGuardTasks, #panelVirtualDesk, #panelAdmin, #panelLifeguard).hidden { display:none !important; }

/* Command bar ------------------------------------------------------------ */
#announcerOperationalApp .topbar {
  display:grid !important;
  grid-template-columns: minmax(198px, .58fr) minmax(0, 2.42fr) !important;
  gap:24px !important;
  align-items:center !important;
  padding:14px 18px !important;
  overflow:visible !important;
  position:relative !important;
  top:auto !important;
}
#announcerOperationalApp .topbar::after { display:none !important; }
#announcerOperationalApp .brand-lockup {
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-width:0 !important;
  padding-right:22px !important;
  border-right:1px solid var(--ops-border) !important;
}
#announcerOperationalApp .brand-lockup img { width:46px !important; height:46px !important; flex:0 0 46px !important; }
#announcerOperationalApp .brand-title { color:var(--ops-ink) !important; font-size:20px !important; line-height:1.15 !important; letter-spacing:-.025em !important; }
#announcerOperationalApp .brand-powered { color:var(--ops-muted) !important; font-size:12px !important; }
#announcerOperationalApp .topbar-actions {
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  grid-template-areas:"context utility" "status utility" !important;
  gap:8px 14px !important;
  min-width:0 !important;
}
#announcerOperationalApp .topbar-context {
  grid-area:context;
  display:grid !important;
  grid-template-columns:minmax(218px,1.25fr) minmax(132px,.72fr) minmax(164px,.95fr) auto !important;
  gap:8px !important;
  min-width:0 !important;
}
#announcerOperationalApp .topbar-context :is(select,.identity-pill,.device-pill) {
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
#announcerOperationalApp .identity-reminder { display:none !important; }
#announcerOperationalApp .topbar-utility {
  grid-area:utility;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:8px !important;
}
#announcerOperationalApp .topbar-utility #uploadHtmlBtn.desktop-upload-quick,
#announcerOperationalApp .topbar-utility #speakerPanelBtn {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  width:auto !important;
  min-width:126px !important;
  height:44px !important;
  padding:0 14px !important;
  white-space:nowrap !important;
}
#announcerOperationalApp .topbar-more { display:block !important; position:relative !important; }
#announcerOperationalApp .topbar-more > summary {
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  list-style:none !important;
  min-width:44px !important;
  height:44px !important;
  padding:0 !important;
  border:1px solid var(--ops-border) !important;
  border-radius:8px !important;
  color:var(--ops-ink) !important;
  cursor:pointer !important;
  font-size:0 !important;
}
#announcerOperationalApp .topbar-more > summary::before { content:'•••'; font-size:17px; letter-spacing:1px; line-height:1; }
#announcerOperationalApp .topbar-more > summary::-webkit-details-marker { display:none; }
#announcerOperationalApp .topbar-more-menu { display:none !important; }
#announcerOperationalApp .topbar-more[open] .topbar-more-menu {
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:8px !important;
  position:absolute !important;
  z-index:100 !important;
  top:52px !important;
  right:0 !important;
  width:232px !important;
  padding:10px !important;
  border:1px solid var(--ops-border) !important;
  border-radius:10px !important;
  background:var(--ops-surface) !important;
  box-shadow:0 12px 28px rgb(15 23 42 / .16) !important;
}
#announcerOperationalApp .topbar-more-menu button {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  width:100% !important;
  min-width:0 !important;
  height:42px !important;
}
#announcerOperationalApp .topbar-status {
  grid-area:status;
  display:flex !important;
  align-items:center !important;
  gap:14px !important;
  min-width:0 !important;
  padding:0 !important;
  border:0 !important;
}
#announcerOperationalApp .topbar-status .next-pill {
  display:flex !important;
  flex:1 1 auto !important;
  min-width:0 !important;
  min-height:30px !important;
  padding:5px 10px !important;
  border:1px solid #c5eee8 !important;
  background:#f0fdfa !important;
  color:var(--ops-teal) !important;
}
#announcerOperationalApp .topbar-status :is(.time-pill,.last-pill) { flex:0 0 auto !important; white-space:nowrap !important; color:var(--ops-muted) !important; }
body.dark-mode #announcerOperationalApp .topbar-status .next-pill { background:#123532 !important; border-color:#275e59 !important; color:#72e0d5 !important; }

/* Task heading ----------------------------------------------------------- */
@media (min-width:600px) {
  #announcerOperationalApp .reference-task-heading { margin-top:10px !important; padding:10px 20px !important; }
  #announcerOperationalApp .reference-primary-actions :is(#uploadHtmlBtn, #speakerPanelBtn) { min-height:46px !important; height:46px !important; }
}

/* Roster workspace ------------------------------------------------------- */
#panelRoster { display:block !important; margin-top:18px !important; min-width:0 !important; }
#panelRoster .time-block-card { margin:0 0 12px !important; padding:13px 18px !important; min-height:0 !important; }
#panelRoster .time-block-toolbar { display:flex !important; align-items:center !important; min-height:44px !important; }
#panelRoster .roster-date-controls { display:flex !important; align-items:center !important; gap:8px !important; min-width:0 !important; flex-wrap:nowrap !important; }
#panelRoster .roster-date-controls h2 { margin:0 6px 0 0 !important; font-size:19px !important; white-space:nowrap !important; }
#panelRoster .roster-date-controls .dateInput { width:150px !important; }
#panelRoster .desktop-session-label { display:block !important; margin-left:3px !important; white-space:nowrap !important; }
#panelRoster .desktop-session-select { display:block !important; width:clamp(172px,15vw,230px) !important; }
#panelRoster .time-block-selection { margin-left:auto !important; width:auto !important; }
#panelRoster .time-block-selection > .pill { white-space:nowrap !important; }
#panelRoster .blocks.has-time-buttons,
#panelRoster #mobileSessionPicker { display:none !important; }
#panelRoster .roster-card { padding:0 0 16px !important; margin:0 !important; }
#panelRoster .roster-toolbar {
  display:grid !important;
  grid-template-columns:minmax(max-content,.54fr) minmax(260px,1.25fr) auto !important;
  grid-template-areas:"heading search actions" "legend legend legend" "bulk bulk bulk" !important;
  align-items:center !important;
  gap:10px 16px !important;
  padding:15px 18px 10px !important;
}
#panelRoster .roster-heading { grid-area:heading !important; min-width:0 !important; }
#panelRoster .roster-heading h2 { margin:0 !important; font-size:24px !important; letter-spacing:-.03em !important; }
#panelRoster .searchWrap { grid-area:search !important; width:100% !important; max-width:none !important; }
#panelRoster .roster-actions { grid-area:actions !important; margin-left:0 !important; }
#panelRoster #tagLegend { grid-area:legend !important; gap:6px 10px !important; padding:2px 0 !important; }
#panelRoster #bulkAttendanceActions { grid-area:bulk !important; padding-top:2px !important; }
#panelRoster .roster-progress { margin:10px 18px 12px !important; padding:10px 12px !important; border-radius:8px !important; }
#panelRoster .roster-table-wrap { margin:0 18px !important; overflow-x:auto !important; overflow-y:visible !important; border-radius:8px !important; }
/* viewport-fit correction: the desktop rail may never clip roster work */
#panelRoster .roster-table { width:100% !important; min-width:0 !important; table-layout:fixed !important; }
#panelRoster .roster-table :is(th,td) { padding:11px 9px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
#panelRoster .roster-table th:first-child,#panelRoster .roster-table td:first-child { width:108px !important; min-width:108px !important; }
#panelRoster .roster-table th:last-child,#panelRoster .roster-table td:last-child { width:62px !important; min-width:62px !important; }
/* compact attendance controls */
#panelRoster .roster-table .attWrap { display:flex !important; flex-wrap:nowrap !important; gap:6px !important; }
#panelRoster .roster-table .attBtn { flex:0 0 40px !important; width:40px !important; min-width:40px !important; height:40px !important; padding:0 !important; white-space:nowrap !important; }
#panelRoster .roster-table .attendance-label { display:none !important; }
#panelRoster .roster-table .guardian-callout { width:40px !important; min-width:40px !important; }

/* Desktop uses a compact desktop time command bar. */
@media (min-width:1180px) {
  #announcerOperationalApp .topbar { grid-template-columns:minmax(198px,.58fr) minmax(0,2.42fr) !important; }
  #panelRoster .blocks.has-time-buttons { display:none !important; }
  #panelRoster .time-block-card { position:static !important; }
}

/* Tablet keeps a horizontal workbench; data scroll stays inside its rail. */
@media (min-width:600px) and (max-width:1179px) {
  #announcerOperationalApp.wrap { width:calc(100% - 32px) !important; }
  #announcerOperationalApp .topbar { grid-template-columns:1fr !important; gap:14px !important; }
  #announcerOperationalApp .brand-lockup { padding:0 0 12px !important; border-right:0 !important; border-bottom:1px solid var(--ops-border) !important; }
  #announcerOperationalApp .topbar-actions { grid-template-columns:1fr !important; grid-template-areas:"context" "utility" "status" !important; }
  #announcerOperationalApp .topbar-context { grid-template-columns:minmax(174px,1.25fr) minmax(126px,.72fr) minmax(152px,1fr) auto !important; }
  #announcerOperationalApp .topbar-utility { justify-content:flex-start !important; }
  /* Tablets choose a session from the compact native selector. The full rail
     was wasting vertical roster space and forced horizontal scrolling. Keep
     the date/session command row separate from selected-state actions. */
  #panelRoster .time-block-toolbar { display:grid !important; grid-template-columns:minmax(0,1fr) !important; gap:10px !important; }
  #panelRoster .roster-date-controls { flex-wrap:wrap !important; }
  #panelRoster .desktop-session-select { flex:1 1 172px !important; min-width:172px !important; }
  #panelRoster .time-block-selection { margin-left:0 !important; justify-self:start !important; }
  #panelRoster .desktop-session-label,#panelRoster .desktop-session-select { display:block !important; }
  #panelRoster .blocks.has-time-buttons { display:none !important; }
  #panelRoster .time-block-card { position:static !important; }
  /* The table may need a side-to-side rail for its columns, but the class
     list itself must remain part of the document's vertical scroll. Older
     Android shell rules capped this wrapper to viewport height, which trapped
     staff inside a nested list on some tablets. */
  #panelRoster .roster-table-wrap {
    max-height:none !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
  }
  #panelRoster .roster-table { min-width:980px !important; table-layout:auto !important; }
  #panelRoster .roster-table .guardian-callout { width:auto !important; min-width:118px !important; }
}



/* Android tablet scroll ownership ----------------------------------------
   Android WebView must always hand a vertical gesture to the document. Older
   inline shell generations made roster and guard children viewport-sized
   scrollports; this terminal contract deliberately removes those traps.
   The roster rail keeps only its horizontal column scroll. */
@media (min-width:600px) {
  html:has(body.android-app),
  body.android-app {
    height:auto !important;
    min-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior-y:auto !important;
    touch-action:auto !important;
  }
  body.android-app #announcerOperationalApp,
  body.android-app #panelRoster,
  body.android-app #panelGuardTasks,
  body.android-app #panelRoster .roster-card,
  body.android-app #panelGuardTasks .guard-grid,
  body.android-app #panelGuardTasks .guard-section,
  body.android-app #guardOpeningList,
  body.android-app #guardMiddayList,
  body.android-app #guardClosingList {
    height:auto !important;
    max-height:none !important;
    min-height:0 !important;
    overflow:visible !important;
    overscroll-behavior:auto !important;
    touch-action:auto !important;
  }
  body.android-app #panelRoster .roster-table-wrap {
    display:block !important;
    height:auto !important;
    max-height:none !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    overscroll-behavior:auto !important;
    touch-action:auto !important;
  }
  body.android-app #panelRoster .blocks,
  body.android-app #panelRoster .time-block-toolbar {
    touch-action:auto !important;
    overscroll-behavior:auto !important;
  }
}

/* Phone: vertical action path and complete, readable roster cards.
   It intentionally trades columns for
   readable roster cards and keeps every action reachable without wrapping. */
@media (max-width:599px) {
  body { padding:0 !important; background:var(--ops-page) !important; }
  #announcerOperationalApp.wrap { width:100% !important; max-width:none !important; }
  #announcerOperationalApp .topbar { grid-template-columns:1fr !important; gap:12px !important; padding:14px 16px !important; border-radius:0 0 14px 14px !important; border-inline:0 !important; }
  #announcerOperationalApp .brand-lockup { padding:0 !important; border: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; }
  #announcerOperationalApp .topbar-actions { grid-template-columns:1fr !important; grid-template-areas:"context" "utility" "status" !important; gap:10px !important; }
  #announcerOperationalApp .topbar-context { grid-template-columns:1fr 1fr !important; }
  #announcerOperationalApp .topbar-context #locationSelect,
  #announcerOperationalApp .topbar-context .identity-pill { grid-column:1 / -1 !important; }
  #announcerOperationalApp .topbar-context .device-pill { display:none !important; }
  #announcerOperationalApp .topbar-utility { display:grid !important; grid-template-columns:1fr 1fr 44px !important; gap:8px !important; }
  #announcerOperationalApp .topbar-utility #uploadHtmlBtn.desktop-upload-quick,
  #announcerOperationalApp .topbar-utility #speakerPanelBtn { width:100% !important; min-width:0 !important; padding:0 8px !important; font-size:13px !important; }
  #announcerOperationalApp .topbar-more > summary { min-width:44px !important; width:44px !important; }
  #announcerOperationalApp .topbar-status { display:block !important; }
  #announcerOperationalApp .topbar-status .next-pill { width:100% !important; }
  #announcerOperationalApp .topbar-status :is(.time-pill,.last-pill) { display:none !important; }
  #panelRoster { margin-top:10px !important; }
  #panelRoster > .card { border-radius:0 !important; border-inline:0 !important; }
  #panelRoster .time-block-card { padding:13px 16px !important; }
  #panelRoster .time-block-toolbar { display:grid !important; grid-template-columns:1fr !important; gap:8px !important; }
  #panelRoster .time-block-toolbar > .spacer { display:none !important; }
  #panelRoster .roster-date-controls { display:grid !important; grid-template-columns:minmax(0,1fr) 46px !important; gap:8px !important; }
  #panelRoster .roster-date-controls h2 { grid-column:1 / -1 !important; font-size:20px !important; }
  #panelRoster .roster-date-controls label { display:none !important; }
  #panelRoster .roster-date-controls .dateInput { width:100% !important; }
  #panelRoster .desktop-session-label,#panelRoster .desktop-session-select { display:none !important; }
  #panelRoster .time-block-selection > .pill { display:none !important; }
  #panelRoster .time-block-selection { grid-column:1 / -1 !important; display:block !important; margin:0 !important; width:100% !important; }
  #panelRoster #mobileSessionPicker { display:flex !important; width:100% !important; min-height:44px !important; justify-content:center !important; white-space:nowrap !important; }
  #panelRoster .blocks { display:none !important; }
  #panelRoster.session-picker-open .blocks { display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; margin-top:12px !important; }
  #panelRoster .block-option { min-width:0 !important; }
  #panelRoster .roster-card { padding:0 0 12px !important; }
  #panelRoster .roster-toolbar { grid-template-columns:minmax(0,1fr) auto !important; grid-template-areas:"heading actions" "search search" "legend legend" "bulk bulk" !important; padding:14px 16px 8px !important; gap:10px !important; }
  #panelRoster .roster-heading h2 { font-size:21px !important; }
  #panelRoster .roster-heading #rosterMeta { display:block !important; margin-top:2px !important; font-size:12px !important; }
  #panelRoster .roster-actions #addSwimmerBtn,#panelRoster .roster-actions .roster-sort-label { display:none !important; }
  #panelRoster .roster-actions #sortBy { width:140px !important; min-width:140px !important; }
  #panelRoster #tagLegend { max-height:34px !important; overflow-x:auto !important; flex-wrap:nowrap !important; white-space:nowrap !important; padding:2px 0 !important; }
  #panelRoster #tagLegend .legendItem { flex:0 0 auto !important; }
  #panelRoster #bulkAttendanceActions { display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px !important; }
  #panelRoster #bulkAttendanceActions button { min-width:0 !important; padding-inline:8px !important; font-size:12px !important; white-space:nowrap !important; }
  #panelRoster .roster-progress { margin:10px 16px !important; padding:10px !important; }
  #panelRoster .roster-filter-group { flex-wrap:nowrap !important; overflow-x:auto !important; justify-content:flex-start !important; }
  #panelRoster .roster-filter { flex:0 0 auto !important; min-height:36px !important; padding:6px 9px !important; font-size:12px !important; }
  #panelRoster .roster-table-wrap { display:none !important; }
  #panelRoster .roster-mobile-list { display:grid !important; gap:8px !important; padding:0 16px 12px !important; }
  #panelRoster .roster-mobile-entry { gap:7px !important; padding:12px !important; border-radius:10px !important; }
  #panelRoster .roster-mobile-heading strong { font-size:15px !important; }
  #panelRoster .roster-mobile-actions { grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px !important; gap:7px !important; }
  #panelRoster .roster-mobile-actions .attWrap { display:contents !important; }
  #panelRoster .roster-mobile-actions .attBtn { min-width:0 !important; min-height:44px !important; padding:0 8px !important; font-size:12px !important; white-space:nowrap !important; }
  #panelRoster .roster-mobile-actions .guardian-callout { grid-column:auto !important; width:44px !important; min-width:44px !important; min-height:44px !important; padding:0 !important; font-size:0 !important; }
  #panelRoster .roster-mobile-actions .guardian-callout::before { content:'☎'; font-size:18px; }
  #panelGuardTasks .guard-grid { display:grid !important; grid-template-columns:1fr !important; overflow:visible !important; }
  #panelGuardTasks .guard-section { min-width:0 !important; }
}

/* Small phones and text-scaled WebViews: preserve one action per row rather
   than squeezing date, session, or attendance controls into clipped columns. */
@media (max-width:374px) {
  #announcerOperationalApp .topbar { padding-inline:12px !important; }
  #panelRoster .time-block-card { padding-inline:12px !important; }
  #panelRoster .roster-toolbar { padding-inline:12px !important; }
  #panelRoster #bulkAttendanceActions { grid-template-columns:1fr !important; }
  #panelRoster .roster-progress { margin-inline:12px !important; }
  #panelRoster .roster-mobile-list { padding-inline:12px !important; }
}

/* Cycle 4 touch-target correction: phone filter tabs and the preview close icon
   remain compact without falling below Android/iOS touch guidance. */
@media (max-width:599px) {
  #panelRoster .roster-filter { min-height:44px !important; }
  #previewClose { min-width:44px !important; width:44px !important; }
}


/* Restricted development workspace -------------------------------------- */
html[data-announcer-development-no-login="true"] #announcerOperationalApp .brand-copy::after {
  content:'Development · synthetic data · no sign-in';
  display:block;
  margin-top:3px;
  color:#0f766e;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
}
html[data-announcer-development-no-login="true"] #announcerOperationalApp #identityBtn::before { content:'DEV '; font-size:11px; color:var(--ops-teal); font-weight:800; }
html[data-announcer-development-no-login="true"] #announcerOperationalApp #identityBtn { cursor:default; opacity:.9; }
html[data-announcer-development-no-login="true"] #announcerOperationalApp #uploadHtmlBtn.hidden { display:none !important; }
@media (max-width:599px) {
  html[data-announcer-development-no-login="true"] #announcerOperationalApp .brand-copy::after { font-size:10px; }
  html[data-announcer-development-no-login="true"] #announcerOperationalApp .topbar-utility { grid-template-columns:1fr 44px !important; }
}

/* Operations check: a compact, on-demand shift signal. */
#announcerOperationalApp .operations-check-btn {
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  min-width:44px !important;
  height:44px !important;
  padding:0 10px !important;
  white-space:nowrap !important;
}
#announcerOperationalApp .operations-check-btn.needs-attention {
  color:#9a6700 !important;
  border-color:#f2c46d !important;
  background:#fff8e8 !important;
}
#announcerOperationalApp .operations-check-panel {
  position:absolute !important;
  z-index:110 !important;
  top:calc(100% + 10px) !important;
  right:18px !important;
  width:min(440px, calc(100vw - 36px)) !important;
  padding:12px !important;
  border:1px solid var(--ops-border) !important;
  border-radius:10px !important;
  background:var(--ops-surface) !important;
  box-shadow:0 16px 36px rgb(15 23 42 / .18) !important;
}
#announcerOperationalApp .operations-check-panel.hidden { display:none !important; }
#announcerOperationalApp .operations-check-head { display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; }
#announcerOperationalApp .operations-check-head strong { font-size:15px !important; }
#announcerOperationalApp .operations-check-head button { min-width:44px !important; min-height:44px !important; padding:0 !important; font-size:22px !important; line-height:1 !important; }
#announcerOperationalApp .operations-check-caption { margin:2px 0 10px !important; color:var(--ops-muted) !important; font-size:12px !important; }
#announcerOperationalApp .operations-check-list { display:grid !important; gap:6px !important; }
#announcerOperationalApp .operations-check-row { display:grid !important; grid-template-columns:10px 86px minmax(0, 1fr) auto !important; align-items:center !important; gap:8px !important; min-height:44px !important; padding:6px 0 !important; border-top:1px solid var(--ops-border) !important; }
#announcerOperationalApp .operations-check-dot { width:8px !important; height:8px !important; border-radius:50% !important; background:#22a06b !important; }
#announcerOperationalApp .operations-check-row.warn .operations-check-dot { background:#d89b18 !important; }
#announcerOperationalApp .operations-check-label { font-weight:750 !important; font-size:13px !important; }
#announcerOperationalApp .operations-check-text { min-width:0 !important; color:var(--ops-muted) !important; font-size:13px !important; overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; }
#announcerOperationalApp .operations-check-row button { min-height:44px !important; min-width:0 !important; padding:0 9px !important; font-size:12px !important; white-space:nowrap !important; }
#announcerOperationalApp .operations-check-refresh { width:100% !important; min-height:44px !important; margin-top:10px !important; }
body.dark-mode #announcerOperationalApp .operations-check-btn.needs-attention { color:#ffd47f !important; border-color:#916c2f !important; background:#382d16 !important; }

@media (max-width:599px) {
  #announcerOperationalApp .operations-check-btn .utility-label { display:none !important; }
  #announcerOperationalApp .operations-check-panel { position:fixed !important; top:auto !important; right:12px !important; bottom:calc(72px + env(safe-area-inset-bottom, 0px)) !important; width:calc(100vw - 24px) !important; max-height:min(520px, calc(100dvh - 96px)) !important; overflow-y:auto !important; }
  #announcerOperationalApp .operations-check-row { grid-template-columns:10px 82px minmax(0, 1fr) !important; }
  #announcerOperationalApp .operations-check-row button { grid-column:2 / -1 !important; width:100% !important; min-height:44px !important; }
}
@media (max-width:599px) {
  #announcerOperationalApp .reference-mobile-nav { grid-template-columns:repeat(4, minmax(0, 1fr)) !important; }
}