/* SYQAVO Command Center (Master Admin > System Management): the website's dark glass language (tokens from shared/brand.css), adapted for operations.
   Scoped to .cc so nothing else in the app changes. */
.cc {
  color: var(--sq-ink); font-variant-numeric: tabular-nums;
}
.module .cc:not(.cc-detail) { background: linear-gradient(155deg, var(--sq-glass-2), var(--sq-glass) 60%); border: 1px solid var(--sq-line); border-radius: var(--sq-radius); padding: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 24px 60px -32px rgba(0, 0, 0, .7); }
.cc h1, .cc h2, .cc h3, .cc h4 { color: var(--sq-ink); text-wrap: balance; margin: 0; }
.cc h2 { font-size: 15px; letter-spacing: .01em; }
.cc h3 { font-size: 14px; margin-top: 6px; }
.cc h4 { font-size: 13px; color: var(--sq-ink-2); }
.cc a { color: var(--sq-accent-2); }
.cc .mono { font-family: var(--mono); }
.cc .small { font-size: 12.5px; }
.cc .num { text-align: right; }
.cc-muted { color: var(--sq-mute); }
.cc-err { color: #ff8fab; min-height: 1em; margin: 0; font-size: 13px; }
.cc-stack { display: flex; flex-direction: column; gap: 14px; }
.cc-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.cc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.cc-brand { display: flex; align-items: center; gap: 12px; }
.cc-brand h1 { font-size: 22px; font-weight: 750; letter-spacing: -.01em; }
.cc-kicker { font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--sq-mute); }
.cc-mark { width: 34px; height: 34px; border-radius: 11px; flex: none; background: conic-gradient(from 200deg, var(--sq-saffron), var(--sq-rose), var(--sq-violet), var(--sq-mint), var(--sq-saffron)); box-shadow: 0 0 22px rgba(139, 108, 255, .45); }
.cc-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.cc-pill { --c: #7c789a; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 99px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--sq-ink); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.cc-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.cc-sev { --c: var(--sq-custom); display: inline-block; font: 700 10.5px var(--mono); letter-spacing: .06em; padding: 2px 7px; border-radius: 6px; color: var(--sq-bg); background: var(--c); margin-right: 6px; }
.cc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; background: var(--sq-glass-2); border: 1px solid var(--sq-line); color: var(--sq-ink-2); font-size: 12px; font-weight: 600; }
.cc-chip.bad { background: rgba(255, 59, 59, .18); border-color: rgba(255, 59, 59, .5); color: #ffd0d0; }
.cc-chip.toggle { cursor: pointer; font: inherit; font-size: 12.5px; min-height: 36px; }
.cc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-banner { border: 1px solid rgba(124, 120, 154, .6); background: rgba(124, 120, 154, .18); border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; color: var(--sq-ink); }

.cc-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 4px; background: var(--sq-glass); border: 1px solid var(--sq-line); border-radius: 14px; margin-bottom: 16px; }
.cc-tab { flex: none; font: inherit; font-weight: 600; font-size: 13.5px; color: var(--sq-mute); background: transparent; border: 0; border-radius: 10px; padding: 9px 14px; cursor: pointer; min-height: 40px; }
.cc-tab[aria-current='page'] { color: var(--sq-ink); background: var(--sq-glass-2); box-shadow: inset 0 -2px 0 var(--sq-saffron); }
.cc-tab:focus-visible, .cc-btn:focus-visible, .cc-link:focus-visible, .cc-stage:focus-visible, .cc-table tr:focus-visible, .cc-chip.toggle:focus-visible { outline: 2px solid var(--sq-accent-2); outline-offset: 2px; }

.cc-card { background: linear-gradient(155deg, var(--sq-glass-2), var(--sq-glass) 60%); border: 1px solid var(--sq-line); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cc-card.warn { border-color: rgba(251, 191, 36, .45); }
.cc-card.kill { border-color: rgba(255, 59, 59, .45); }
.cc-card.chaos { border-style: dashed; }
.cc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cc-tile { --c: rgba(255, 255, 255, .25); border: 1px solid var(--sq-line); border-top: 2px solid var(--c); border-radius: 14px; padding: 12px 14px; background: var(--sq-glass); }
.cc-tile .l { font-size: 12px; color: var(--sq-mute); font-weight: 600; }
.cc-tile .n { font-size: 26px; font-weight: 750; margin-top: 2px; }
.cc-tile .d { font-size: 12px; color: var(--sq-mute); }
.cc-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 14px; }

.cc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cc-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 7px 0; border-bottom: 1px solid var(--sq-line); }
.cc-list li:last-child { border-bottom: 0; }
.cc-link { font: inherit; color: var(--sq-ink); background: none; border: 0; padding: 4px 0; min-height: 32px; cursor: pointer; text-align: left; }
.cc-link:hover { color: var(--sq-accent-2); }
.cc-link.inline { color: var(--sq-accent-2); text-decoration: underline; padding: 0; min-height: 0; }
.cc-dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.cc-dl dt { color: var(--sq-mute); font-size: 12.5px; }
.cc-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.cc-dl dd small { display: block; color: var(--sq-mute); font-size: 11.5px; }
.cc-dl.wide { grid-template-columns: minmax(110px, max-content) 1fr; }
.cc-readings { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 8px; }
.cc-reading { --c: #7c789a; display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 12px; background: var(--sq-glass); border-left: 3px solid var(--c); }
.cc-reading .l { font-size: 12px; color: var(--sq-mute); }
.cc-reading strong { font-size: 14.5px; overflow-wrap: anywhere; }

.cc-btn { font: inherit; font-weight: 650; font-size: 13px; color: var(--sq-ink); background: var(--sq-glass-2); border: 1px solid var(--sq-line-2); border-radius: 11px; padding: 8px 14px; min-height: 40px; cursor: pointer; }
.cc-btn:hover { background: rgba(255, 255, 255, .14); }
.cc-btn.primary { background: var(--sq-grad); color: var(--sq-accent-ink); border: 0; }
.cc-btn.danger { background: #ff3b3b; border: 0; color: #fff; }
.cc-btn:disabled { opacity: .6; cursor: progress; }
.cc-input { font: inherit; color: var(--sq-ink); background: rgba(7, 6, 15, .55); border: 1px solid var(--sq-line-2); border-radius: 10px; padding: 8px 10px; min-height: 40px; width: 100%; }
.cc select.cc-input option { color: #1d1b18; }
.cc-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--sq-ink-2); }
.cc-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.cc-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--sq-mute); min-width: 150px; }
.cc-field.grow { flex: 1 1 220px; }
.cc-tablewrap { overflow-x: auto; border: 1px solid var(--sq-line); border-radius: 14px; }
.cc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cc-table th { text-align: left; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sq-mute); background: var(--sq-glass); padding: 9px 12px; }
.cc-table td { padding: 9px 12px; border-top: 1px solid var(--sq-line); vertical-align: top; }
.cc-table tbody tr { cursor: pointer; }
.cc-table tbody tr:hover { background: var(--sq-glass); }

.cc-map { display: flex; flex-direction: column; gap: 10px; }
.cc-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cc-search { position: relative; flex: 1 1 260px; }
.cc-results { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); display: flex; flex-direction: column; background: var(--sq-bg-3); border-radius: 12px; box-shadow: 0 12px 30px rgba(0, 0, 0, .45); overflow: hidden; }
.cc-results:empty { display: none; }
.cc-result { font: inherit; text-align: left; color: var(--sq-ink); background: none; border: 0; border-bottom: 1px solid var(--sq-line); padding: 9px 12px; cursor: pointer; }
.cc-result:hover { background: var(--sq-glass-2); }
.cc-mapgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; align-items: start; }
.cc-side { background: var(--sq-glass); border: 1px solid var(--sq-line); border-radius: 18px; padding: 14px; overflow-y: auto; max-height: min(84vh, 960px); min-height: 200px; }

.cc-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; }
.cc-path .sep { color: var(--sq-mute); }
.cc-crumb { padding: 3px 9px; border-radius: 8px; background: var(--sq-glass-2); border: 1px solid var(--sq-line); }
.cc-crumb.k-incident { background: rgba(255, 92, 138, .18); border-color: rgba(255, 92, 138, .5); font-family: var(--mono); }
.cc-cause { padding: 10px 12px; border-radius: 12px; background: var(--sq-glass); border-left: 3px solid var(--sq-violet); margin: 0; }
.cc-rems { display: flex; flex-direction: column; gap: 10px; }
.cc-rem { padding: 12px; border-radius: 12px; border: 1px solid var(--sq-line); background: var(--sq-glass); display: flex; flex-direction: column; gap: 6px; }
.cc-timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--sq-line-2); display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.cc-timeline li { position: relative; }
.cc-timeline li::before { content: ''; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--sq-mute); }
.cc-timeline .k-recovered::before, .cc-timeline .k-verified::before, .cc-timeline .k-remediation_succeeded::before { background: var(--sq-mint); }
.cc-timeline .k-remediation_failed::before, .cc-timeline .k-escalated::before { background: var(--sq-rose); }
.cc-timeline .k-remediation_started::before { background: var(--sq-violet); }
.cc-timeline .k-blocked::before { background: var(--sq-soon); }
.cc-timeline .when { display: block; color: var(--sq-mute); font-size: 11.5px; }
.cc-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 8px; }
.cc-stage { font: inherit; text-align: left; color: var(--sq-ink-2); background: var(--sq-glass); border: 1px solid var(--sq-line); border-radius: 12px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; min-height: 64px; }
.cc-stage b { font-size: 18px; color: var(--sq-ink); }
.cc-stage[aria-pressed='true'] { border-color: var(--sq-saffron); background: rgba(255, 159, 67, .14); color: var(--sq-ink); }

/* the incident sheet and the reason dialog take the command center's dark surface */
.sheet:has(.cc-detail), .sheet:has(form.cc) { background: var(--sq-bg-2); color: var(--sq-ink); }
.sheet:has(.cc-detail) .sheet-head h2, .sheet:has(form.cc) .sheet-head h2, .sheet:has(.cc-detail) .icon-btn, .sheet:has(form.cc) .icon-btn { color: var(--sq-ink); }
.sheet.wide:has(.cc-detail) { width: min(920px, 100%); }

@media (max-width: 900px) {
  .cc-mapgrid { grid-template-columns: 1fr; }
  .cc-side { max-height: none; }
  .cc-flow { height: 68vh; min-height: 380px; }
  .cc-flowstage .cc-side { position: static; width: auto; max-height: none; margin: 8px; box-shadow: none; }
}
/* on a phone the flowchart comes first; the six situation answers follow it */
@media (max-width: 760px) {
  .cc-map > .cc-situation { order: 10; } .cc-map > .cc-incrow { order: 9; } .cc-map > .cc-statusrow { order: 11; }
  .cc-zoom { display: none; } /* pinch to zoom and drag to move on a phone; Reset view stays */
}
@media (max-width: 560px) {
  .module .cc:not(.cc-detail) { padding: 12px; border-radius: 16px; }
  .cc-brand h1 { font-size: 19px; }
  .cc-dl, .cc-dl.wide { grid-template-columns: 1fr; }
  .cc-dl dt { margin-top: 4px; }
  .cc-tile .n { font-size: 22px; }
  .cc-field { min-width: 0; flex: 1 1 140px; }
}
@media (prefers-reduced-motion: reduce) { .cc * { transition: none !important; animation: none !important; } }

/* ── the system flowchart (shared/flowchart.js): rows from top to bottom, boxes, arrows, incident view, legend ── */
.cc-flowwrap { position: relative; border-radius: 18px; overflow: hidden; background: #0b0a17; border: 1px solid var(--sq-line); min-width: 0; }
.cc-flowstage { position: relative; }
.cc-flow { height: min(78vh, 900px); min-height: 460px; }
.cc-flowstage .cc-side { position: absolute; top: 10px; right: 10px; width: min(360px, calc(100% - 20px)); max-height: calc(100% - 20px); background: rgba(18, 15, 36, .96); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); }
.cc-side[hidden] { display: none; }
.cc-x { float: right; font: inherit; width: 32px; height: 32px; margin: -4px -4px 4px 8px; border-radius: 10px; color: var(--sq-ink-2); background: var(--sq-glass); border: 1px solid var(--sq-line); cursor: pointer; }
.cc-x:hover, .cc-x:focus-visible { color: var(--sq-ink); border-color: var(--sq-line-2); outline: none; }
.fc { display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; font-family: inherit; }
.fc:active { cursor: grabbing; }
.fc:focus-visible { outline: 2px solid var(--sq-accent-2); outline-offset: -2px; }
.fc-lane { fill: rgba(255, 255, 255, .022); stroke: rgba(255, 255, 255, .05); }
.fc-lane.alt { fill: rgba(139, 108, 255, .045); }
.fc-lane-label { fill: var(--sq-ink-2); font: 700 12px var(--sq-mono); letter-spacing: .08em; text-transform: uppercase; }
.fc-lane-count { fill: var(--sq-mute); font-size: 11px; }
.fc-caption { fill: var(--sq-mute); font: 600 10.5px var(--sq-mono); letter-spacing: .04em; }
.fc-node { --c: #7c789a; cursor: pointer; outline: none; }
.fc-box { fill: #171429; stroke: color-mix(in srgb, var(--c) 55%, #2b2748); stroke-width: 1.4; transition: opacity .15s; }
.fc-bar { fill: var(--c); }
.fc-title { fill: var(--sq-ink); font-size: 13px; font-weight: 650; }
.fc-title.mono { font: 600 11.5px var(--sq-mono); }
.fc-sub { fill: var(--sq-ink-2); font-size: 10.5px; }
.fc-node:hover .fc-box { fill: #201c38; }
.fc-node:focus-visible .fc-box { stroke: var(--sq-accent-2); stroke-width: 2.5; }
.fc-node.s-NOT_MONITORED .fc-box { stroke-dasharray: 5 4; stroke: #4a466c; }
.fc-node.s-NOT_MONITORED .fc-bar { fill: none; stroke: #5d5a7d; stroke-width: 1; }
.fc-node.s-UNKNOWN .fc-box { stroke-dasharray: 2 3; }
.fc-node.own .fc-box { stroke: var(--c); stroke-width: 2.4; fill: color-mix(in srgb, var(--c) 14%, #171429); }
.fc-node.contained .fc-box { stroke: #fbbf24; stroke-width: 2.2; stroke-dasharray: 9 4; }
.fc-tag { fill: #fde68a; font: 700 9px var(--sq-mono); letter-spacing: .08em; text-anchor: end; }
.fc-badge circle { fill: var(--c); stroke: #0b0a17; stroke-width: 2; }
.fc-badge text { fill: #0b0a17; font: 800 10.5px var(--sq-mono); text-anchor: middle; }
.fc-chev rect { fill: rgba(255, 255, 255, .07); stroke: rgba(255, 255, 255, .16); }
.fc-chev text { fill: var(--sq-ink); font-size: 13px; text-anchor: middle; }
.fc-chev:hover rect { fill: rgba(255, 255, 255, .18); }
.fc-edge { fill: none; stroke: #6f6a99; stroke-width: 1.3; opacity: .5; }
.fc-edge.far { opacity: .2; }
.fc-edge.async { stroke-dasharray: 6 5; }
.fc-edge.declared { stroke-dasharray: 2 5; }
.fc-edge.k-part { stroke: #4b4770; stroke-dasharray: 1.5 4; opacity: .7; }
.fc-edge.k-audit, .fc-edge.k-event { opacity: .16; }
.fc-hit { fill: none; stroke: transparent; stroke-width: 12; cursor: pointer; pointer-events: stroke; }
.fc-edge-g:hover .fc-edge { stroke: var(--sq-ink); opacity: 1; stroke-width: 2; }
.fc-edge-g.via { display: none; }
.fc-arrow { fill: #8c87b8; } .fc-arrow.on { fill: #ffffff; } .fc-arrow.hot { fill: #ff5c8a; }
/* a selected part: what leads to it and what it leads to stay lit, the rest steps back */
.fc-node.dim { opacity: .2; }
.fc-edge-g.dim .fc-edge { opacity: .07; }
.fc-edge-g.on .fc-edge { stroke: #ffffff; opacity: .95; stroke-width: 2; }
.fc-node.sel .fc-box { stroke: #ffffff; stroke-width: 3; fill: #2a2550; }
.fc-node.up .fc-box { stroke: var(--sq-saffron); stroke-width: 2; }
.fc-node.down .fc-box { stroke: var(--sq-accent-2, #8b6cff); stroke-width: 2; }
/* an incident, on the same chart: the failing part, what it affects, and what only leads to it */
.fc-node.f-fail .fc-box { stroke: #ff3b3b; stroke-width: 3.2; fill: rgba(255, 59, 59, .2); }
.fc:not(.still) .fc-node.f-fail .fc-box { animation: fc-pulse 1.6s ease-in-out infinite; }
.fc-node.f-affected .fc-box { stroke: #ff9f43; stroke-width: 2.4; fill: rgba(255, 159, 67, .13); }
.fc-node.f-risk .fc-box { stroke: #fbbf24; stroke-width: 1.6; stroke-dasharray: 3 4; }
.fc-node.mark .fc-box { stroke: #93c5fd; stroke-width: 2.6; }
.fc-edge-g.hot .fc-edge { stroke: #ff5c8a; opacity: .9; stroke-width: 1.9; }
@keyframes fc-pulse { 50% { stroke-opacity: .35; } }
.cc-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 11.5px; color: var(--sq-ink-2); }
.cc-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cc-legend i { width: 9px; height: 9px; border-radius: 50%; }
.cc-legend.flow { flex-direction: column; gap: 5px; padding: 9px 12px 10px; border-top: 1px solid var(--sq-line); background: #0e0c1b; }
.cc-legend .lg-row { display: flex; flex-wrap: wrap; gap: 5px 14px; }
.cc-legend .lg-line { display: inline-block; width: 22px; height: 0; border-top: 2px solid #8c87b8; }
.cc-legend .lg-line.async { border-top-style: dashed; } .cc-legend .lg-line.part { border-top-style: dotted; border-top-color: #5d5a7d; }
.cc-legend .lg-box { display: inline-block; width: 16px; height: 11px; border-radius: 3px; border: 2px solid #ff3b3b; background: rgba(255, 59, 59, .2); }
.cc-legend .lg-box.aff { border-color: #ff9f43; background: rgba(255, 159, 67, .13); } .cc-legend .lg-box.risk { border: 1.6px dashed #fbbf24; background: none; }
.cc-legend .lg-tag { font: 700 9px var(--sq-mono); letter-spacing: .08em; color: #fde68a; border: 1.5px dashed #fbbf24; border-radius: 4px; padding: 1px 4px; }
.cc-incs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cc-inc { font: inherit; font-size: 12.5px; color: var(--sq-ink); display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 3px 10px; border-radius: 99px; background: var(--sq-glass); border: 1px solid var(--sq-line); cursor: pointer; }
.cc-inc[aria-pressed='true'] { border-color: #ff5c8a; background: rgba(255, 92, 138, .16); }
.cc-inc:focus-visible { outline: 2px solid var(--sq-accent-2); outline-offset: 2px; }
.cc-steps { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--sq-line-2); display: flex; flex-direction: column; gap: 9px; }
.cc-steps li { position: relative; display: flex; flex-direction: column; gap: 1px; overflow-wrap: anywhere; }
.cc-steps li::before { content: ''; position: absolute; left: -20px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--sq-violet); }
.cc-steps li.done::before { background: var(--sq-mint); } .cc-steps li.todo::before { background: none; border: 2px solid var(--sq-mute); width: 6px; height: 6px; }
.cc-steps strong { font: 600 11px var(--sq-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sq-mute); }
.cc-lane { font: 700 12px var(--sq-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--sq-ink-2); margin: 4px 0; }
.cc-pad { padding: 9px 12px; margin: 0; }
@media (prefers-reduced-motion: reduce) { .fc-node.f-fail .fc-box { animation: none; } .fc-box { transition: none; } }
  background: rgba(20, 17, 39, .92); border: 1px solid var(--sq-line-2); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.cc-seg { display: inline-flex; gap: 4px; padding: 3px; border-radius: 99px; background: var(--sq-glass); border: 1px solid var(--sq-line); }
.cc-seg .cc-btn { min-height: 34px; padding: 4px 12px; }
.cc-seg .cc-btn[aria-pressed='true'] { background: var(--sq-glass-hi); color: var(--sq-ink); }
.cc-chip.warn { background: rgba(251, 191, 36, .14); border-color: rgba(251, 191, 36, .45); color: #fde68a; }

.cc-situation { margin-bottom: 12px; }
.cc-sits { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; align-items: start; }
.cc-sit { --c: var(--sq-line-2); display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 14px; background: var(--sq-glass); border: 1px solid var(--sq-line);
  border-left: 3px solid var(--c); font-size: 12.5px; line-height: 1.45; }
.cc-sit .q { font: 600 11px var(--sq-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--sq-mute); }
.cc-sit .a { color: var(--sq-ink); overflow-wrap: anywhere; }

.cc-outline { background: var(--sq-glass); border: 1px solid var(--sq-line); border-radius: 18px; padding: 12px 14px; max-height: min(74vh, 760px); overflow: auto; }
.cc-orow { display: inline-flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 32px; }
.cc-odot { --c: #7c789a; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); flex: none; }
.cc-ostate { font-size: 12px; color: var(--sq-ink-2); }


/* analytics chart (reliability figures) */
.cc-chart { display: block; width: 100%; min-width: 520px; height: auto; }
.cc-chart .grid { stroke: var(--sq-line); stroke-width: 1; }
.cc-chart .tick { fill: var(--sq-mute); font: 10.5px var(--sq-mono); }
.cc-chart .opened { fill: var(--sq-rose); }
.cc-chart .recovered { fill: var(--sq-mint); }
.cc-legend.static { margin-bottom: 6px; }
.cc-legend .sw-opened, .cc-legend .sw-recovered { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.cc-legend .sw-opened { background: var(--sq-rose); } .cc-legend .sw-recovered { background: var(--sq-mint); }
.cc-stack > .cc-pill, .cc-stack > .cc-row { align-self: flex-start; }