/* The customer-facing stylesheet. Hand-written, no build step, no framework -
   the same rule the hub's is under.

   Not a copy of the hub's: this page has a different job. There is no
   navigation, no login, no operator chrome, and everything on it has to make
   sense to somebody who has never seen a monitoring tool. The one thing shared
   is the heat ramp, which comes from common/static/heat.css - a colour must
   mean the same on both pages. --line is defined here because that file paints
   a gap with it. */

:root {
  --bg: #f6f7f9;
  --panel: #fff;
  --ink: #1b1f24;
  --muted: #6a737d;
  --line: #dfe3e8;
  --ok: #1a7f37;
  --ok-bg: #e8f5ec;
  --bad: #b42318;
  --bad-bg: #fdeceb;
  --warn: #8a5a00;
  --warn-bg: #fdf3e0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171a; --panel: #1c2024; --ink: #e6e8ea; --muted: #99a1a9;
    --line: #2c3238; --ok: #4ac776; --ok-bg: #14301f; --bad: #ff6b5e;
    --bad-bg: #351a18; --warn: #e0b055; --warn-bg: #2e2515;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

header {
  padding: .8rem 1.2rem; background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; letter-spacing: -.02em; }

main { max-width: 900px; margin: 0 auto; padding: 1.6rem 1.2rem 3rem; }
footer {
  max-width: 900px; margin: 0 auto; padding: 0 1.2rem 3rem;
  color: var(--muted); font-size: .82rem;
}
footer p { margin: 0; }

h1 { font-size: 1.5rem; margin: 0 0 1.2rem; }
h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em;
     color: var(--muted); margin: 1.2rem 0 .5rem; }
.hint { color: var(--muted); font-size: .9rem; }

.empty-page { max-width: 32rem; margin: 4rem auto; text-align: center; }
.empty-page p { color: var(--muted); }

/* The whole-page banner for "no hub is talking to us any more". Amber, not
   red: red on this page means a site is down, and this is not that. */
.notice {
  background: var(--warn-bg); color: var(--warn); padding: .7rem .9rem;
  border-radius: 8px; margin: 0 0 1.2rem; font-size: .9rem;
}

/* One site. Collapsed it is a name, a state and an uptime figure over the
   strip; open it adds the list of interruptions. <details> so this needs no
   JavaScript at all. */
.site {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: .9rem 1.1rem; margin-bottom: .8rem;
}
.site > summary {
  cursor: pointer; display: flex; align-items: baseline; flex-wrap: wrap;
  gap: .5rem; list-style: none;
}
.site > summary::-webkit-details-marker { display: none; }
.site > summary::before {
  content: "\25B8"; color: var(--muted); font-size: .8rem;
  transition: transform .1s; display: inline-block;
}
.site[open] > summary::before { transform: rotate(90deg); }
.site-name { font-weight: 600; font-size: 1.05rem; }
.status {
  font-weight: 600; text-transform: uppercase; font-size: .7rem;
  padding: .12rem .45rem; border-radius: 4px;
}
.status.up { color: var(--ok); background: var(--ok-bg); }
.status.down { color: var(--bad); background: var(--bad-bg); }
.status.unknown { color: var(--muted); background: var(--line); }
.uptime { margin-left: auto; font-variant-numeric: tabular-nums;
          font-weight: 600; }
.uptime.bad { color: var(--bad); }
.over { color: var(--muted); font-size: .78rem; }

/* The strip. 96 flex children, so it fits any width without measuring
   anything. The colours are common/static/heat.css. */
.strip { margin: .8rem 0 .2rem; }
.bar { display: flex; gap: 1px; height: 18px; }
.bar i { flex: 1 1 0; border-radius: 1px; min-width: 0; }
.axis { position: relative; height: 1.1rem; }
.axis span {
  position: absolute; transform: translateX(-50%); top: .15rem;
  font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums;
}

/* Published equipment. Each row is the same drawing as the site's own strip,
   one row down: a name, 24 hours of it, and how much of that was up. The bars
   are narrower than the site's because they are subordinate to it, not because
   they mean anything different.

   No group heading when the group has no name — equipment published one item
   at a time arrives under "", and "" is not something to print. */
.equip { margin: .8rem 0 0; }
.equip h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em;
            color: var(--muted); margin: .9rem 0 .4rem; }
.equip h3 .down-count { color: var(--bad); margin-left: .5rem;
                        text-transform: none; letter-spacing: 0; }
.equip-row { display: flex; align-items: center; gap: .7rem; margin: .35rem 0; }
.equip-name { flex: 0 0 10rem; font-size: .88rem; overflow: hidden;
              text-overflow: ellipsis; white-space: nowrap; }
.equip-row .bar { flex: 1 1 auto; height: 12px; }
.equip-uptime { flex: 0 0 4.5rem; text-align: right; font-size: .8rem;
                font-variant-numeric: tabular-nums; color: var(--muted); }
.equip-uptime.bad { color: var(--bad); font-weight: 600; }

/* "Last updated 40 minutes ago." Stated rather than implied: the data stays on
   the page, so the age is the only thing that stops it being read as current. */
.stale {
  color: var(--warn); background: var(--warn-bg); font-size: .85rem;
  padding: .45rem .7rem; border-radius: 6px; margin: .6rem 0 0;
}

table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .4rem .6rem .4rem 0;
         border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
     color: var(--muted); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
td.when, td.how-long { white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.ongoing td { color: var(--bad); font-weight: 600; }

@media (max-width: 560px) {
  .uptime { margin-left: 0; }
  .over { width: 100%; }
  /* The name over the bar rather than beside it: 10rem of name and a strip
     worth reading do not both fit on a phone. */
  .equip-row { flex-wrap: wrap; }
  .equip-name { flex: 1 1 100%; }
  .equip-row .bar { flex: 1 1 60%; }
}