/*
 * rmc-cp-operator-footer.css — v4.01.41 (2026-06-02)
 * Preview HTML ribbon frame: primary row (brand | pills) + secondary micro-row (stat/trust/legal).
 * v4.01.41: ~30% vertical density (padding/min-height/gaps ×0.7); civic + compact share selectors.
 */

.cp-corporate-footer > :is(.rmc-operator-footer-compact, .rmc-operator-footer-civic).rmc-manager-login-footer,
.rmc-app-shell__footer > :is(.rmc-operator-footer-compact, .rmc-operator-footer-civic).rmc-manager-login-footer {
  padding: 0;
  margin-top: 0;
  border-top: none;
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]).rmc-civic-footer {
  padding: 0;
  border-top: 1px solid var(--hairline);
  background: var(--surface-canvas, var(--surface-elevated));
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-inner--ribbon {
padding: 0;
gap: 0;
max-width: none;
width: 100%;
align-items: stretch;
text-align: left;
box-sizing: border-box;
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-inner {
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
box-sizing: border-box;
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-legal {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
min-width: 0;
font-size: 10.5px;
color: var(--text-muted);
}

/* —— Primary ribbon (screenshot frame) —— */
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon {
width: 100%;
box-sizing: border-box;
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon--primary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px 11px;
flex-wrap: wrap;
/* No floor: the row is its content's height. The 31px floor added ~10px of
   empty band on every operator page. */
min-height: 0;
padding: var(--rmc-civic-ribbon-pad-y, 3px) 20px;
box-sizing: border-box;
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon__brand {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 4px 8px;
min-width: 0;
font-size: 12px;
line-height: 1.2;
color: var(--text-secondary);
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon__brand strong {
color: var(--text-primary);
font-weight: 600;
white-space: nowrap; /* horizontal-overflow-risk-allow: short-brand-wordmark */
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon__brand-meta {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
font-size: 12px;
color: var(--text-tertiary);
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .rmc-civic-footer__motto {
font-family: inherit;
font-style: normal;
font-size: inherit;
color: inherit;
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon__actions {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
gap: 4px;
margin-left: auto;
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-pill,
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .rmc-civic-footer__appbadge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: var(--rmc-civic-pill-pad-y, 1px) 7px;
border-radius: var(--radius-pill, 999px);
border: 1px solid var(--hairline);
background: var(--surface-elevated);
color: var(--text-secondary);
font-size: 11px;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
white-space: nowrap; /* horizontal-overflow-risk-allow: short-pill */
transition: border-color var(--motion-fast, 140ms) var(--ease-standard, ease),
  color var(--motion-fast, 140ms) var(--ease-standard, ease);
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) a.cp-footer-pill:hover,
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) a.cp-footer-pill:focus-visible,
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) a.rmc-civic-footer__appbadge:hover,
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) a.rmc-civic-footer__appbadge:focus-visible {
border-color: var(--school-primary, var(--primary));
color: var(--text-primary);
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-pill--live {
background: var(--success-soft, color-mix(in oklab, var(--success) 14%, transparent));
border-color: color-mix(in oklab, var(--success) 30%, var(--hairline));
color: var(--success);
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-pill__dot {
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--success);
flex-shrink: 0;
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-pill--compliance,
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .rmc-civic-footer__pill--secure.cp-footer-pill--compliance {
background: color-mix(in oklab, var(--info, var(--school-primary)) 12%, var(--surface-elevated));
border-color: color-mix(in oklab, var(--info, var(--school-primary)) 22%, var(--hairline));
color: var(--text-secondary);
font-weight: 600;
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-pill--icon {
width: 18px;
height: 18px;
padding: 0;
justify-content: center;
font-size: 11px;
}

/* —— Secondary micro-row (extra production data, same compact frame) —— */
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon--secondary {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 4px 8px;
padding: var(--rmc-civic-ribbon-pad-top, 2px) 20px
         var(--rmc-civic-ribbon-pad-bottom, 3px);
border-top: 1px solid var(--hairline);
font-size: 10.5px;
line-height: 1.15;
color: var(--text-muted);
box-sizing: border-box;
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon__stat {
flex: 1 1 auto;
min-width: 0;
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon__trust {
display: inline-flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon__trust .rmc-civic-footer__social-label {
font-size: 10.5px;
color: var(--text-tertiary);
margin-right: 2px;
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon__legal {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
flex-shrink: 0;
padding: 0;
margin: 0;
border: 0;
font-size: 10.5px;
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon__legal a {
color: var(--text-muted);
text-decoration: none;
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon__legal a:hover,
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon__legal a:focus-visible {
color: var(--text-primary);
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .rmc-civic-footer__legal-sep {
opacity: 0.55;
}

html[data-surface="control-plane"] .cp-corporate-footer :is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]),
html[data-surface="control-plane"] .rmc-app-shell__footer :is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) {
padding: 0;
border-top: none;
background: transparent;
}

html[data-surface="control-plane"] :is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]).rmc-civic-footer--dark {
background: var(--surface-canvas, transparent);
border-top-color: var(--hairline);
}

@media (max-width: 991.98px) {
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon--primary {
  flex-direction: column;
  align-items: flex-start;
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon__actions {
  margin-left: 0;
  justify-content: flex-start;
  width: 100%;
}
}

@media (max-width: 767.98px) {
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon--primary,
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon--secondary {
  padding-inline: 14px;
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon--secondary {
  flex-direction: column;
  align-items: flex-start;
}
}

@media (prefers-reduced-motion: reduce) {
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-pill,
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .rmc-civic-footer__appbadge {
  transition: none;
}
}

/* Phone: trim the operator footer's decorative tiers so it doesn't eat ~a
 third of the screen and crowd page CTAs (the MFA "Verify" button overlap).
 Keep brand + gateway links + legal; drop the informational stat line and the
 social/trust icon row, and tighten vertical padding. Full footer at >=992px. */
@media (max-width: 991.98px) {
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .rmc-civic-footer__stat,
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .rmc-civic-footer__social,
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .rmc-civic-footer__strip {
  display: none;
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]).rmc-civic-footer {
  padding-top: 6px;
  padding-bottom: 6px;
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .rmc-civic-footer__inner {
  gap: 4px;
}
}

/* ------------------------------------------------------------------ */
/* One ribbon, not two (2026-10-20, owner: halve the footer)            */
/* ------------------------------------------------------------------ */
/* The operator footer stacked a primary ribbon (brand, clock/weather,  */
/* gateway pills, compliance pill) over a secondary one (stat line,     */
/* trust icons, legal). Measured through the real control-plane         */
/* stylesheet ORDER -- the skeleton links ~90 sheets and three of them  */
/* cascade after this file -- that was 23px + 42px + border = 66px at   */
/* EVERY viewport from 992 to 1920, because the secondary ribbon wraps  */
/* its three groups onto two lines however much width it is given.      */
/*                                                                      */
/* There is width to spare on an operator screen and no reason for two  */
/* bands. Both ribbons sit on one line from 768px up, each compressible */
/* and each scrolling on its own axis rather than wrapping. Every pill, */
/* icon, link and label stays in the DOM, in source order, reachable --  */
/* and reachable by the scroll arrows this platform puts on every        */
/* scroller. Applied at EVERY width: a 390px phone measured 55px with    */
/* the ribbons stacked and 33px with them folded, and both ribbons scroll */
/* on their own axis either way, so nothing becomes unreachable.          */

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-inner--ribbon {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0 14px;
}
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon--primary,
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon--secondary {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon--secondary {
  /* It is no longer a band under the first one, so it carries no rule */
  /* above it and no top padding of its own.                           */
  border-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  justify-content: flex-end;
}
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon--primary > *,
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon--secondary > * {
  flex: 0 0 auto;
}
/* Below the fold-together width the ribbons still stack -- but each is one */
/* line that scrolls, rather than two or three wrapped ones.                */
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon--primary,
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon--secondary {
  /* The blocks above turn each ribbon into a COLUMN below 992px (primary)
     and below 768px (secondary), which is what kept them 31px and 18px tall
     however little they contained. A ribbon is a row at every width now; it
     scrolls instead of stacking. */
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon--primary > *,
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon--secondary > * {
  flex: 0 0 auto;
}

:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]).rmc-civic-footer {
  /* The band's own vertical padding measured 0 above 992px and 6px/6px below
     it, so the narrowest screen -- the one with the least room to spare --
     paid 12px that the widest did not. The ribbons carry their own padding;
     the band carries none, at every width. */
  padding-top: 0;
  padding-bottom: 0;
}

/* ------------------------------------------------------------------ */
/* The primary ribbon must not be a scroll container (2026-10-20)       */
/* ------------------------------------------------------------------ */
/* Same defect, same place, same proof as the tenant mid-row: the       */
/* clock/weather dock is a direct child of this ribbon and opens a      */
/* dropup out of the top of the band, and a scroll container clips it   */
/* -- `overflow-x: auto` forces the other axis to clip too, so there is */
/* no way to scroll sideways and still let a panel out of the top.      */
/* The scroll moves to the two groups beside the dock, which hold no    */
/* popup. The ribbon still never wraps; its scrollable children absorb  */
/* the overflow, so it has none of its own.                             */
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon--primary {
  overflow: visible;
}
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon--primary > .cp-footer-ribbon__brand,
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon--primary > .cp-footer-ribbon__actions {
  flex: 0 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  /* Once a group is allowed to SHRINK it will wrap internally unless told
     not to -- measured, brand went to 33px and the gateway pills to 38px at
     1440 the moment they became shrinkable. They scroll instead. */
  flex-wrap: nowrap;
  white-space: nowrap;
}
:is(.rmc-operator-footer-compact, .rmc-operator-footer-civic, [data-rmc-footer-surface="operator-civic"]) .cp-footer-ribbon--primary > .rmc-footer-temporal {
  flex: 0 0 auto;
}