/* Status colours describe confirmed signals; pipeline colours describe media. */
#slc-body,
#slc-chart-dialog{
  --slc-surface:light-dark(#ffffff,#1d2a33);
  --slc-soft:light-dark(#f5f8fa,#26363d);
  --slc-line:light-dark(#dde5ec,#41525d);
  --slc-ink:light-dark(#243b38,#e8efed);
  --slc-muted:light-dark(#526660,#afc3bd);
  --slc-accent:light-dark(#175cd3,#84caff);
  --slc-state-ok-color:#078450;
  --slc-state-ok-ink:light-dark(#067647,#75e0ab);
  --slc-state-ok-bg:light-dark(#ecfdf3,#12382b);
  --slc-state-ok-line:light-dark(#17a36b,#3dba82);
  --slc-state-alarm-color:#d92d20;
  --slc-state-alarm-ink:light-dark(#b42318,#fda29b);
  --slc-state-alarm-bg:light-dark(#fff1f0,#4c1c20);
  --slc-state-alarm-line:light-dark(#e3463a,#eb786d);
  --slc-state-warning-color:#bf5700;
  --slc-state-warning-ink:light-dark(#93370d,#fec84b);
  --slc-state-warning-bg:light-dark(#fffaeb,#452e13);
  --slc-state-warning-line:light-dark(#c97718,#e8a641);
  --slc-state-unknown-color:#667085;
  --slc-state-unknown-ink:light-dark(#475467,#d0d5dd);
  --slc-state-unknown-bg:light-dark(#f2f4f7,#27313f);
  --slc-state-unknown-line:light-dark(#98a2b3,#8091a4);
  --slc-state-off-color:#667085;
  --slc-state-off-ink:light-dark(#475467,#d0d5dd);
  --slc-state-off-bg:light-dark(#f2f4f7,#27313f);
  --slc-state-off-line:light-dark(#98a2b3,#8091a4);
}

.slc-status{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.slc-status p{flex-basis:100%;margin:0}
.slc-status.slc-status-quiet{padding:0;border:0;background:transparent;box-shadow:none}
.slc-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}
.slc-tabs button[aria-pressed=true]{background:color-mix(in srgb,var(--slc-accent) 8%,var(--slc-surface));color:var(--slc-accent);border-color:var(--slc-accent)}
.slc-availability-summary button{max-width:100%;white-space:normal;text-align:left}
.slc-table{overflow:auto;max-height:70vh}
.slc-table table{width:100%;border-collapse:collapse}
.slc-table th,.slc-table td{text-align:left;padding:16px;border-bottom:1px solid var(--slc-line)}
.slc-table th{position:sticky;top:0;z-index:1;background:var(--slc-soft);color:var(--slc-muted)}
.slc-table td{min-width:140px;max-width:400px;overflow-wrap:break-word}
.slc-table td:first-child{min-width:220px}
.slc-table td small{display:block;margin-top:5px;color:var(--slc-muted)}
.slc-table td strong{font-weight:600}
.slc-row-actions{display:flex;gap:6px;flex-wrap:wrap;min-width:130px}
.slc-row-actions button{font-size:12px}
.slc-ok,.slc-open,.slc-running{color:var(--slc-state-ok-ink)}
.slc-alarm,.slc-conflict{color:var(--slc-state-alarm-ink)}
.slc-warning,.slc-intermediate{color:var(--slc-state-warning-ink)}
.slc-unknown,.slc-partial,.slc-info{color:var(--slc-state-unknown-ink)}
.slc-off,.slc-closed,.slc-stopped,.slc-reference{color:var(--slc-state-off-ink)}

/* Every badge includes a symbol and a visible label; colour is an extra cue. */
.slc-badge{
  --slc-badge-ink:var(--slc-state-off-ink);
  --slc-badge-bg:var(--slc-state-off-bg);
  --slc-badge-line:var(--slc-state-off-line);
  --slc-badge-symbol:"–";
  display:inline-flex;align-items:center;gap:7px;max-width:100%;
  padding:5px 9px;border:1px solid var(--slc-badge-line);border-radius:7px;
  background:var(--slc-badge-bg);color:var(--slc-badge-ink);
  font-size:12px;font-weight:600;line-height:1.45;white-space:normal;
  vertical-align:middle;overflow-wrap:break-word;
}
.slc-badge::before{
  content:var(--slc-badge-symbol);display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 17px;width:17px;height:17px;border:1.5px solid currentColor;border-radius:50%;
  font-size:11px;font-weight:800;line-height:1;
}
.slc-badge-ok,.slc-badge-on,.slc-badge-open,.slc-badge-running{--slc-badge-ink:var(--slc-state-ok-ink);--slc-badge-bg:var(--slc-state-ok-bg);--slc-badge-line:var(--slc-state-ok-line);--slc-badge-symbol:"✓"}
.slc-badge-alarm,.slc-badge-conflict{--slc-badge-ink:var(--slc-state-alarm-ink);--slc-badge-bg:var(--slc-state-alarm-bg);--slc-badge-line:var(--slc-state-alarm-line);--slc-badge-symbol:"!"}
.slc-badge-warning,.slc-badge-intermediate{--slc-badge-ink:var(--slc-state-warning-ink);--slc-badge-bg:var(--slc-state-warning-bg);--slc-badge-line:var(--slc-state-warning-line);--slc-badge-symbol:"▲"}
.slc-badge-intermediate{--slc-badge-symbol:"◐"}
.slc-badge-unknown,.slc-badge-partial,.slc-badge-info{--slc-badge-ink:var(--slc-state-unknown-ink);--slc-badge-bg:var(--slc-state-unknown-bg);--slc-badge-line:var(--slc-state-unknown-line);--slc-badge-symbol:"?"}
.slc-badge-info{--slc-badge-symbol:"i"}
.slc-badge-on,.slc-badge-running{--slc-badge-symbol:"▶"}
.slc-badge-off,.slc-badge-stopped{--slc-badge-symbol:"■"}
.slc-badge-open{--slc-badge-symbol:"↔"}
.slc-badge-closed{--slc-badge-symbol:"×"}
.slc-badge-conflict{--slc-badge-symbol:"≠"}
.slc-badge-reference{--slc-badge-symbol:"–";border-style:dashed}
.slc-badge-warning::before{border-radius:4px;font-size:9px}
.slc-badge-intermediate::before{font-size:14px}
.slc-status .slc-badge{font-size:13px}

.slc-chart svg{width:100%;max-height:300px}
.slc-chart text{fill:var(--slc-muted);font-size:12px}
.slc-grid{stroke:var(--slc-line);stroke-width:1}
.slc-line{stroke:var(--slc-accent);stroke-width:2;fill:none}
.slc-chart svg circle{fill:var(--slc-accent)}
#slc-body>.panel{margin-bottom:20px}
#slc-chart-dialog{width:min(960px,calc(100vw - 32px))}
.slc-chart-body{padding:20px 24px}
.slc-chart-body .slc-tabs{margin-top:0}
.slc-chart-viewport{overflow-x:auto}
.slc-chart-viewport svg{display:block;min-width:0;max-height:none}
.slc-chart svg .slc-chart-marker{stroke:var(--slc-surface);stroke-width:2}
.slc-chart-readout{min-height:2.5em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.slc-chart svg:focus-visible{outline:2px solid var(--slc-accent);outline-offset:-2px}
.slc-history-controls>.slc-tabs{margin:0 0 12px}
.slc-history-custom{border-top:1px solid var(--slc-line);padding-top:12px}
.slc-history-custom>summary{cursor:pointer;min-height:32px;font-size:13px;font-weight:600}
.slc-history-dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto;align-items:end;gap:12px;margin-top:12px}
.slc-history-dates label{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:12px;color:var(--slc-muted)}
.slc-history-dates input{width:100%;min-width:0;max-width:100%;min-height:42px}
.slc-history-dates button{min-height:42px}
.slc-history-dates input[aria-invalid]{border-color:var(--slc-state-alarm-ink)}
.slc-history-error{grid-column:1/-1;margin:0;color:var(--slc-state-alarm-ink);font-size:13px}
.slc-history-statistics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}
.slc-history-statistics>div{min-width:0;padding:12px;border:1px solid var(--slc-line);border-radius:8px}
.slc-history-statistics dt{font-size:12px;color:var(--slc-muted)}
.slc-history-statistics dd{margin:5px 0 0;font-size:18px;font-weight:600;color:var(--slc-ink);font-variant-numeric:tabular-nums;overflow-wrap:break-word}
.slc-filters{display:grid;grid-template-columns:minmax(220px,2fr) minmax(0,3fr);gap:12px;margin:20px 0}
.slc-filter-details{min-width:0}
.slc-filter-details>summary{display:none}
.slc-filter-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.slc-filter-grid>button{grid-column:1/-1;justify-self:start}
.slc-filters .slc-controller-select{display:none}
.slc-filters label{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:13px}
.slc-filters input,.slc-filters select{width:100%;min-width:0;min-height:42px}
.slc-filters>button{justify-self:start}
.slc-result-count{min-height:1.5em}
@media(max-width:900px){.slc-filters{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){
 .slc-chart-body{padding:14px}
 .slc-history-custom>summary{min-height:40px}
 .slc-history-dates{grid-template-columns:minmax(0,1fr)}
 .slc-history-dates input{min-height:44px;font-size:16px}
 .slc-history-dates button{width:100%;min-height:44px}
 .slc-history-statistics{gap:6px}
 .slc-history-statistics>div{padding:9px 7px}
 .slc-history-statistics dd{font-size:15px}
 #slc-body .slc-controller-tabs{display:none}
 #slc-body .slc-filters{grid-template-columns:minmax(0,1fr)}
 .slc-filter-details>summary{display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 12px;border:1px solid var(--slc-line);border-radius:10px;color:var(--slc-ink);font-size:14px;font-weight:600;cursor:pointer}
 .slc-filter-details>summary::before{content:'▸'}
 .slc-filter-details[open]>summary::before{content:'▾'}
 .slc-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:14px}
 .slc-filters .slc-controller-select{display:flex}
 .slc-filter-grid>button{width:100%;justify-self:stretch;min-height:44px}
 #slc-body .slc-availability-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .slc-availability-summary button{height:100%;margin:0}
}
@media(max-width:480px){.slc-filter-grid{grid-template-columns:minmax(0,1fr)}.slc-table th,.slc-table td{padding:12px}}
@media screen and (max-width:640px){
 .slc-table{overflow:visible;max-height:none}
 .slc-table table{display:block;min-width:0;width:100%}
 .slc-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .slc-table tbody{display:grid;gap:12px}
 .slc-table tbody tr{display:grid;border:1px solid var(--slc-line);border-radius:12px;padding:6px;min-width:0}
 .slc-table tbody td,.slc-table tbody td:first-child{display:block;padding:8px;min-width:0;max-width:none;overflow-wrap:anywhere;border:0}
 .slc-table tbody td::before{content:attr(data-label);display:block;margin-bottom:5px;color:var(--slc-muted);font-size:12px}
 .slc-table tbody td:first-child::before{display:none}
 .slc-table .slc-row-actions{flex-wrap:wrap}
 .slc-table .slc-row-actions button{min-height:44px}
}
.slc-availability-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;text-align:left;font:inherit;font-weight:650;color:var(--slc-ink);border:1px solid var(--slc-line);background:var(--slc-surface);padding:8px 12px;border-radius:10px;cursor:pointer}
.slc-availability-link:hover{background:#f0f5f1;border-color:#789487}
.slc-availability-link:focus-visible{outline:3px solid #248b48;outline-offset:3px}
.slc-availability-reason{font-weight:600}