/* The MCR look (October 18th, 2026): what every MCR dashboard on mcr.toolbox.zixi.com shares, taken
   from the Tata Dish Connectivity page (connections/src/styles.css): its fonts, its dark-first NOC
   palette and light theme, its glow and blueprint grid, and the bar across the top (bar.js).
   Tokens are --mcr-*, so they never collide with an app's own names; an app maps its tokens onto
   them. <html data-theme="dark|light"> comes from theme.js. Fonts are served from here (OFL, see
   fonts/LICENSE-*.txt), not from Google, so a wall screen never waits on another site. */

@font-face { font-family: "Archivo"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url("fonts/archivo.woff2") format("woff2-variations"), url("fonts/archivo.woff2") format("woff2"); }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-display: swap; font-weight: 200 900;
  src: url("fonts/source-sans-3.woff2") format("woff2-variations"), url("fonts/source-sans-3.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 400; src: url("fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 500; src: url("fonts/ibm-plex-mono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-display: swap; font-weight: 600; src: url("fonts/ibm-plex-mono-600.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  --mcr-bg: #070b10; --mcr-bg-glow: rgba(64, 126, 247, .10); --mcr-bg-glow-2: rgba(38, 161, 142, .07);
  --mcr-surface: #0d141b; --mcr-surface-2: #111a23; --mcr-surface-3: #17222d; --mcr-glass: rgba(13, 20, 27, .78);
  --mcr-line: #1f2b38; --mcr-line-2: #2a3a4a; --mcr-ink: #e6edf3; --mcr-muted: #8b9bab; --mcr-faint: #5b6b7b;
  --mcr-accent: #3fc1d9; --mcr-accent-ink: #04161b; --mcr-accent-soft: rgba(63, 193, 217, .14);
  --mcr-ok: #3ccf7e; --mcr-warn: #f0b429; --mcr-bad: #ff5d5d;
  --mcr-ok-bg: rgba(60, 207, 126, .12); --mcr-warn-bg: rgba(240, 180, 41, .12); --mcr-bad-bg: rgba(255, 93, 93, .12);
  --mcr-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .03) inset;
  --mcr-shadow-up: 0 18px 44px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .04) inset;
  --mcr-f-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --mcr-f-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --mcr-f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --mcr-r: 12px;
  --mcr-bar-h: 56px;
  --mcr-ease: cubic-bezier(.2, .8, .2, 1);
}
:root[data-theme="light"] {
  color-scheme: light;
  --mcr-bg: #eef2f6; --mcr-bg-glow: rgba(33, 180, 249, .10); --mcr-bg-glow-2: rgba(28, 139, 112, .06);
  --mcr-surface: #ffffff; --mcr-surface-2: #f6f8fa; --mcr-surface-3: #edf1f5; --mcr-glass: rgba(255, 255, 255, .82);
  --mcr-line: #dbe2e9; --mcr-line-2: #c8d2dc; --mcr-ink: #0f1a24; --mcr-muted: #526272; --mcr-faint: #8795a3;
  --mcr-accent: #0b7a94; --mcr-accent-ink: #ffffff; --mcr-accent-soft: rgba(11, 122, 148, .10);
  --mcr-ok: #17894a; --mcr-warn: #a76a00; --mcr-bad: #c62828;
  --mcr-ok-bg: rgba(23, 137, 74, .10); --mcr-warn-bg: rgba(183, 121, 31, .12); --mcr-bad-bg: rgba(198, 40, 40, .09);
  --mcr-shadow: 0 8px 24px rgba(16, 32, 48, .08), 0 1px 2px rgba(16, 32, 48, .06);
  --mcr-shadow-up: 0 16px 36px rgba(16, 32, 48, .14), 0 2px 4px rgba(16, 32, 48, .06);
}

/* the page: Tata's glow and its faint blueprint grid (body class mcr-canvas) */
body.mcr-canvas {
  background: radial-gradient(1200px 600px at 10% -10%, var(--mcr-bg-glow), transparent 60%),
              radial-gradient(900px 500px at 100% 0%, var(--mcr-bg-glow-2), transparent 60%), var(--mcr-bg);
  background-attachment: fixed;
}
body.mcr-canvas::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: linear-gradient(var(--mcr-line) 1px, transparent 1px), linear-gradient(90deg, var(--mcr-line) 1px, transparent 1px);
  background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
}
.mcr-eyebrow { font-family: var(--mcr-f-display); font-stretch: 80%; text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; font-weight: 700; color: var(--mcr-muted); }

/* ---- the bar (bar.js) ------------------------------------------------------------------------ */
.mcr-bar {
  /* above an app's page and sticky strips (Tata's tabs: 20), below its side panels, tooltips and dialogs (40 and up) */
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px;
  height: var(--mcr-bar-h); padding: 0 20px; box-sizing: border-box;
  font: 500 14px/1.3 var(--mcr-f-body); color: var(--mcr-ink); -webkit-font-smoothing: antialiased;
  background: color-mix(in srgb, var(--mcr-bg) 84%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--mcr-line);
}
.mcr-bar *, .mcr-bar *::before, .mcr-bar *::after { box-sizing: border-box; }
.mcr-bar a { color: inherit; text-decoration: none; }
.mcr-bar :focus-visible { outline: 2px solid var(--mcr-accent); outline-offset: 2px; border-radius: 8px; }
.mcr-home { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px 0 4px; border-radius: 10px; transition: background .2s; flex: none; }
.mcr-home:hover { background: var(--mcr-accent-soft); }
.mcr-logo { display: block; height: 22px; width: auto; }
.mcr-logo.ink { display: none; }
:root[data-theme="light"] .mcr-logo.ink { display: block; }
:root[data-theme="light"] .mcr-logo.white { display: none; }
.mcr-name { font: 800 17px/1 var(--mcr-f-display); font-stretch: 78%; letter-spacing: .06em; }
.mcr-sep { color: var(--mcr-line-2); font-size: 20px; font-weight: 300; margin: 0 -4px; flex: none; }

.mcr-switch { position: relative; flex: none; }
.mcr-app { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 0; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--mcr-ink); font: 700 15px/1 var(--mcr-f-display); font-stretch: 85%; letter-spacing: .01em; transition: background .2s; }
.mcr-app:hover, .mcr-switch.open .mcr-app { background: var(--mcr-accent-soft); }
.mcr-app .ic { width: 18px; height: 18px; color: var(--mcr-accent); }
.mcr-app .chev { width: 12px; height: 12px; color: var(--mcr-muted); transition: transform .25s var(--mcr-ease); }
.mcr-switch.open .mcr-app .chev { transform: rotate(180deg); }
.mcr-menu {
  position: absolute; top: calc(100% + 8px); left: 0; width: 340px; padding: 6px; border-radius: 14px;
  background: color-mix(in srgb, var(--mcr-surface) 95%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid var(--mcr-line-2); box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: 24px 0;
  transition: opacity .18s ease, transform .22s var(--mcr-ease), visibility 0s linear .22s;
}
.mcr-switch.open .mcr-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .22s var(--mcr-ease); }
.mcr-menu a { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 12px; align-items: center; padding: 9px 10px; border-radius: 10px; transition: background .15s; }
.mcr-menu a:hover, .mcr-menu a:focus-visible { background: var(--mcr-accent-soft); outline: 0; }
.mcr-menu a[aria-current="page"] { background: var(--mcr-surface-3); }
.mcr-menu .mi { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: var(--mcr-accent-soft); color: var(--mcr-accent); }
.mcr-menu .mi svg { width: 20px; height: 20px; }
.mcr-menu .mt { font: 700 14.5px/1.2 var(--mcr-f-display); font-stretch: 88%; display: flex; align-items: center; gap: 8px; }
.mcr-menu .md { font-size: 12.5px; color: var(--mcr-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcr-menu .here { font: 600 10.5px/1 var(--mcr-f-mono); color: var(--mcr-accent); letter-spacing: .04em; }
.mcr-menu hr { border: 0; border-top: 1px solid var(--mcr-line); margin: 5px 6px; }

/* an app's own pages, after its name: a sliding pill under the current one */
.mcr-nav { position: relative; display: flex; align-items: center; gap: 2px; min-width: 0; height: 100%; flex: 1; }
.mcr-nav:empty { flex: 1; }
.mcr-nav > a { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px;
  border-radius: 9px; color: var(--mcr-muted); font-weight: 600; white-space: nowrap; transition: color .2s; }
.mcr-nav > a:hover { color: var(--mcr-ink); }
.mcr-nav > a[aria-current="page"] { color: var(--mcr-ink); }
.mcr-nav > a svg { opacity: .7; }
.mcr-ind { position: absolute; z-index: 0; top: 50%; left: 0; height: 34px; width: 0; margin-top: -17px; border-radius: 9px; pointer-events: none; opacity: 0;
  background: var(--mcr-accent-soft); border: 1px solid color-mix(in srgb, var(--mcr-accent) 40%, transparent);
  transition: transform .35s var(--mcr-ease), width .35s var(--mcr-ease), opacity .2s; }
.mcr-ind.still { transition: none; }

.mcr-right { display: flex; align-items: center; gap: 14px; flex: none; }
.mcr-slot { display: flex; align-items: center; gap: 14px; }
.mcr-slot:empty { display: none; }
.mcr-who { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: var(--mcr-muted); white-space: nowrap; }
.mcr-who[hidden] { display: none; }
.mcr-who a { color: var(--mcr-muted); text-decoration: underline; text-underline-offset: 2px; }
.mcr-who a:hover { color: var(--mcr-ink); }
.mcr-who .open { font: 600 11px/1 var(--mcr-f-mono); letter-spacing: .03em; color: var(--mcr-warn); background: var(--mcr-warn-bg);
  border: 1px solid color-mix(in srgb, var(--mcr-warn) 35%, transparent); padding: 5px 8px; border-radius: 999px; }

.mcr-seg { position: relative; display: inline-flex; padding: 3px; border-radius: 10px; background: var(--mcr-surface-2); border: 1px solid var(--mcr-line); }
.mcr-seg button { position: relative; z-index: 1; border: 0; background: transparent; padding: 5px 10px; border-radius: 7px; cursor: pointer;
  font: 650 12.5px/1 var(--mcr-f-body); color: var(--mcr-muted); transition: color .2s; }
.mcr-seg button:hover { color: var(--mcr-ink); }
.mcr-seg button[aria-pressed="true"] { color: var(--mcr-accent-ink); }
.mcr-seg .pill { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 7px; background: var(--mcr-accent);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--mcr-accent) 35%, transparent); transition: transform .3s var(--mcr-ease), width .3s var(--mcr-ease); }
.mcr-seg .pill.still { transition: none; }

.mcr-clock { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 9px; align-items: center;
  padding: 4px 11px 4px 7px; border-radius: 11px; background: var(--mcr-surface-2); border: 1px solid var(--mcr-line); line-height: 1.15; cursor: default; }
.mcr-clock .face { grid-row: 1 / span 2; width: 28px; height: 28px; }
.mcr-clock .ring { fill: var(--mcr-surface); stroke: var(--mcr-line-2); stroke-width: 1.1; }
.mcr-clock .ticks line { stroke: var(--mcr-faint); stroke-width: .9; stroke-linecap: round; }
.mcr-clock .ticks line.major { stroke: var(--mcr-muted); stroke-width: 1.3; }
.mcr-clock .h-hand { stroke: var(--mcr-ink); stroke-width: 2.1; stroke-linecap: round; }
.mcr-clock .m-hand { stroke: var(--mcr-ink); stroke-width: 1.4; stroke-linecap: round; }
.mcr-clock .s-hand { stroke: var(--mcr-accent); stroke-width: .9; stroke-linecap: round; }
.mcr-clock .pin { fill: var(--mcr-accent); }
.mcr-clock .t { display: flex; align-items: baseline; gap: 4px; }
.mcr-clock .time { font: 600 14px/1 var(--mcr-f-mono); font-variant-numeric: tabular-nums; color: var(--mcr-ink); }
.mcr-clock .zone { font: 600 9.5px/1 var(--mcr-f-mono); letter-spacing: .08em; color: var(--mcr-faint); }
.mcr-clock .date { font-size: 11.5px; color: var(--mcr-muted); }
@media (max-width: 1180px) { .mcr-clock .date, .mcr-name { display: none; } .mcr-clock { grid-template-rows: auto; } }

@media (prefers-reduced-motion: reduce) {
  .mcr-menu, .mcr-switch.open .mcr-menu, .mcr-ind, .mcr-seg .pill, .mcr-app .chev { transition: none; }
}