/* status.sir.gg · page styles on top of the shared sir.gg ui.css. Colour only for state, as everywhere on sir.gg. */
@layer components {
  .bg { position: fixed; inset: 0; z-index: -1; inline-size: 100%; block-size: 100%; opacity: 0; transition: opacity 1.2s ease; }
  .bg.on { opacity: .9; }

  .st { display: grid; gap: 1.25rem; max-inline-size: 52rem; padding-block: clamp(3rem, 9vh, 6rem) 2rem; }

  /* ---------- overall ---------- */
  .st-head { --s: var(--muted); display: grid; justify-items: center; gap: .75rem; padding-block: 1rem 1.75rem; text-align: center; }
  .st-head[data-s="up"] { --s: var(--free); }
  .st-head[data-s="degraded"] { --s: var(--warn); }
  .st-head[data-s="down"] { --s: var(--taken); }
  .st-head h1 { font-size: clamp(2.1rem, 5.6vw, 3.5rem); font-weight: 700; }
  /* the state word carries the colour: "working" green, "slow" amber, "down" red */
  .st-head h1 em { font-style: normal; color: var(--s); }
  .st-sub { color: var(--body); max-inline-size: 56ch; }
  .st-sub b { color: var(--fg); font-weight: 500; }

  /* ---------- cards ---------- */
  .st-card {
    background: rgb(12 12 13 / .82);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid var(--line); border-radius: var(--r-lg);
  }
  .st-card-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; padding: 1.1rem 1.35rem; border-block-end: 1px solid var(--line); }
  .st-card-h h2 { font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
  .st-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .8rem; color: var(--muted); }
  .st-legend .key { display: inline-flex; align-items: center; gap: .4rem; }
  .st-legend i { inline-size: .55rem; block-size: .55rem; border-radius: 2px; }
  .k-up { background: var(--free); } .k-part { background: var(--warn); } .k-down { background: var(--taken); }

  /* ---------- services ---------- */
  .svc > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .9rem 1.25rem; padding: 1.15rem 1.35rem; }
  .svc > li + li { border-block-start: 1px solid var(--line); }
  .svc-empty, .inc-empty { padding: 1.15rem 1.35rem; color: var(--muted); font-size: .92rem; }
  .svc-name { color: var(--fg); font-weight: 500; }
  .svc-about { font-size: .85rem; color: var(--muted); }
  .svc-state { --s: var(--muted); display: flex; align-items: center; gap: .9rem; justify-self: end; font-size: .88rem; }
  .svc-state[data-s="up"] { --s: var(--free); }
  .svc-state[data-s="slow"] { --s: var(--warn); }
  .svc-state[data-s="down"] { --s: var(--taken); }
  .svc-pill { display: inline-flex; align-items: center; gap: .45rem; color: var(--s); font-weight: 500; white-space: nowrap; }
  .svc-pill::before { content: ""; inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: currentColor; }
  .svc-ms { font-family: var(--mono); font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .spark { inline-size: 6.5rem; block-size: 1.6rem; color: var(--line-3); overflow: visible; }
  .spark path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }

  .bars { grid-column: 1 / -1; display: grid; gap: .45rem; }
  .bars-row { display: flex; gap: 2px; block-size: 1.9rem; }
  .bars-row i { flex: 1 1 0; min-inline-size: 0; border-radius: 2px; background: var(--raised-3); transition: opacity .15s; }
  .bars-row i.up { background: var(--free); }
  .bars-row i.part { background: var(--warn); }
  .bars-row i.down { background: var(--taken); }
  .bars-row:hover i { opacity: .55; }
  .bars-row:hover i:hover { opacity: 1; }
  .bars-foot { display: flex; justify-content: space-between; gap: 1rem; font-size: .78rem; color: var(--faint); }
  .d30 { display: none; }
  .bars-foot b { color: var(--body); font-weight: 500; font-variant-numeric: tabular-nums; }

  .bar-tip {
    position: fixed; z-index: 60; pointer-events: none; translate: -50% -100%;
    padding: .45rem .65rem; border-radius: var(--r-sm); background: var(--raised-3); border: 1px solid var(--line-2);
    font-size: .78rem; color: var(--fg); white-space: nowrap;
  }
  .bar-tip span { color: var(--muted); }

  /* ---------- incidents ---------- */
  .inc > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: .25rem 1rem; padding: 1rem 1.35rem; }
  .inc > li + li { border-block-start: 1px solid var(--line); }
  .inc-dot { inline-size: .5rem; block-size: .5rem; border-radius: 50%; background: var(--line-3); translate: 0 -.1em; }
  .inc-dot.open { background: var(--taken); }
  .inc-t { color: var(--fg); font-weight: 500; }
  .inc-t span { color: var(--muted); font-weight: 400; }
  .inc-when { font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .inc-d { grid-column: 2 / -1; font-size: .85rem; color: var(--muted); }

  .st-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.5rem; padding-block: 1rem 2rem; font-size: .85rem; color: var(--faint); }
  .st-foot a { color: var(--body); text-underline-offset: 3px; }
  .st-foot a:hover { color: var(--fg); }

  @media (max-width: 640px) {
    .svc > li { grid-template-columns: minmax(0, 1fr); }
    .svc-state { justify-self: start; }
    .spark { display: none; }
    .bars-row { block-size: 1.6rem; }
    .bars-row i:nth-child(-n+60) { display: none; }
    .d90 { display: none; } .d30 { display: inline; }
    .inc > li { grid-template-columns: auto minmax(0, 1fr); }
    .inc-when { grid-column: 2; }
  }
}