/* Service status overview. Model metrics remain in the feed, outside this UI. */
.ft-status {
  --status-ink:#0e1220; --status-muted:#73839a; --status-line:#dbe3ec;
  --status-ok:#16a34a; --status-warn:#d97706; --status-bad:#dc2626; --status-nodata:#cbd5e1;
  padding:48px 0 58px; color:var(--status-ink);
}
.ft-status .btn { min-height:39px; padding:9px 14px; border-radius:6px; font-size:12px; }
.ft-status button:disabled { opacity:.55; cursor:default; }
.ft-status .status-symbol { display:inline-grid; place-items:center; width:23px; height:23px; border-radius:50%; background:transparent; color:#94a3b6; font-size:22px; font-weight:600; line-height:1; flex-shrink:0; }

.ft-status .status-total { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:21px 24px; border:1px solid #d8e1eb; border-radius:10px; background:#f2f5f8; }
.ft-status .status-total-left { display:flex; align-items:center; gap:14px; min-width:0; }
.ft-status .status-total h1 { margin:0; font-size:14px; font-weight:500; color:var(--status-muted); letter-spacing:-.01em; }
.ft-status .status-total strong { display:block; font-size:20px; font-weight:600; line-height:1.4; letter-spacing:-.02em; color:#6a7e96; }
.ft-status .status-total[data-state="operational"] strong { color:#28734f; }
.ft-status .status-total[data-state="degraded"] strong { color:#8a6120; }
.ft-status .status-total[data-state="outage"] strong { color:#96574f; }
.ft-status .status-total-right { display:flex; align-items:center; gap:14px; flex-shrink:0; }
.ft-status .status-updated { margin:0; color:var(--status-muted); font-size:11px; line-height:1.9; }
.ft-status .status-updated time { font-family:var(--mono); font-size:10px; color:#617992; }
.ft-status .status-updated .status-meta { color:var(--status-muted); }
.ft-status [data-state="operational"] > .status-symbol { background:#32805c; color:#fff; font-size:13px; }
.ft-status [data-state="degraded"] > .status-symbol { background:#ad7a22; color:#fff; font-size:14px; }
.ft-status [data-state="outage"] > .status-symbol { background:#af655d; color:#fff; font-size:14px; }

.ft-status .status-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:14px; }
.ft-status .status-card { min-width:0; padding:24px; border:1px solid var(--status-line); border-radius:10px; background:#fff; }
.ft-status .status-card-slim { display:flex; align-items:center; gap:24px; margin-top:22px; padding:18px 24px; }
.ft-status .status-slim-left { flex:1 1 0; min-width:0; }
.ft-status .status-slim-left .status-line { margin-top:6px; }
.ft-status .status-slim-right { flex:0 0 46%; min-width:0; }
.ft-status .status-slim-right .status-bars { margin-top:0; }

.ft-status .status-vendors { margin-top:14px; border-top:1px solid var(--status-line); padding-top:10px; }
.ft-status .status-vendors:empty { display:none; }
.ft-status .vendor-row { display:flex; align-items:center; gap:10px; padding:5px 0; font-size:12px; }
.ft-status .vendor-logo { width:18px; height:18px; object-fit:contain; flex-shrink:0; }
.ft-status .vendor-dot { width:18px; height:18px; border-radius:50%; background:var(--status-line); color:var(--status-muted);
  display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:600; flex-shrink:0; }
.ft-status .vendor-name { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--status-ink); }
.ft-status .vendor-track { flex:1 1 0; height:3px; border-radius:2px; background:var(--status-line); overflow:hidden; }
.ft-status .vendor-fill { display:block; height:100%; border-radius:2px; background:var(--status-ok); }
.ft-status .vendor-fill[data-color="warn"] { background:var(--status-warn); }
.ft-status .vendor-fill[data-color="bad"] { background:var(--status-bad); }
.ft-status .vendor-count { flex-shrink:0; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--status-muted); }
.ft-status .vendor-more { margin-top:4px; }
.ft-status .vendor-more summary { cursor:pointer; font-size:12px; color:var(--status-muted); list-style-position:inside; padding:4px 0; }
.ft-status .vendor-more summary:hover { color:var(--status-ink); }
.ft-status .vendor-more[open] summary { margin-bottom:2px; }
.ft-status .status-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ft-status .status-card h2 { margin:0; font-size:20px; line-height:1.5; letter-spacing:-.025em; }
.ft-status .status-group-state { display:flex; align-items:center; gap:8px; color:#72869e; flex-shrink:0; }
.ft-status .status-group-state strong { font-size:15px; font-weight:600; line-height:1.4; }
.ft-status .status-group-state .status-symbol { width:19px; height:19px; }
.ft-status .status-group-state[data-state="operational"] { color:#287352; }
.ft-status .status-group-state[data-state="degraded"] { color:#936921; }
.ft-status .status-group-state[data-state="outage"] { color:#9b5850; }

.ft-status .status-bars { display:flex; gap:2px; margin-top:18px; }
.ft-status .status-cell { flex:1 1 0; height:8px; border-radius:2px; background:var(--status-nodata); }
.ft-status .status-cell[data-color="ok"] { background:var(--status-ok); }
.ft-status .status-cell[data-color="warn"] { background:var(--status-warn); }
.ft-status .status-cell[data-color="bad"] { background:var(--status-bad); }

.ft-status .status-line { margin:12px 0 0; font-size:12px; line-height:1.7; color:var(--status-ink); }
.ft-status .status-line + .status-line { margin-top:2px; }
.ft-status .status-hint { margin:10px 0 0; color:var(--status-muted); font-size:11px; line-height:1.7; }

.ft-status .status-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-top:24px; }
.ft-status .status-footer p { margin:0; color:var(--status-muted); font-size:11px; line-height:1.9; }
.ft-status :is(a,button):focus-visible { outline:3px solid #6793d5; outline-offset:4px; }
@media(max-width:900px) and (min-width:681px) {
  .ft-status .status-card { padding:20px 16px; }
  .ft-status .status-card h2 { font-size:17px; }
}
@media(max-width:680px) {
  .ft-status { padding:24px 0 34px; }
  .ft-status .status-total { flex-direction:column; align-items:flex-start; padding:16px; gap:12px; }
  .ft-status .status-total-right { width:100%; justify-content:space-between; }
  .ft-status .status-cards { grid-template-columns:1fr; gap:10px; margin-top:10px; }
  .ft-status .status-card { padding:15px 16px; }
  .ft-status .status-card-slim { flex-direction:column; align-items:stretch; gap:8px; margin-top:16px; padding:15px 16px; }
  .ft-status .status-slim-right { flex-basis:auto; }
  .ft-status .status-slim-right .status-bars { margin-top:4px; }
  .ft-status .status-bars { margin-top:12px; }
  .ft-status .status-cell { height:6px; }
  .ft-status .status-footer { align-items:flex-start; flex-direction:column; gap:15px; margin-top:19px; }
}
@media(max-width:360px) {
  .ft-status .wrap { width:calc(100% - 32px); }
  .ft-status .status-card h2 { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) {
  .ft-status *, .ft-status *::before, .ft-status *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}
