/* Status marks. Reserved for meaning: a machine down or stuck, never
   decoration. Always beside a label, in the legend, the tooltip and the
   table, because amber on white is below 3:1 by design. */
:root {
  --state-up: #E3F4EA;
  --state-down: #d03b3b;
  --state-stuck: #fab219;
  --state-unknown: #E8EEF4;

  /* How much of a day or a week was down, for stretches too long to draw
     every incident to scale. One hue, light to dark; checked with the
     dataviz ordinal validator. */
  --down-1: #EBA3A3;
  --down-2: #DE6B6B;
  --down-3: #C23434;
  --down-4: #7F2525;
}

/* Shell ------------------------------------------------------------ */

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

.page-head { margin-bottom: 22px; }

.page-title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 38px;
  line-height: 1.1;
  margin: 10px 0 6px;
}

.page-sub {
  margin: 0;
  color: var(--ink-soft);
  font-size: 16px;
  max-width: 68ch;
}

/* Filters: one row, above everything they scope ------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 22px;
  margin-bottom: 18px;
}

.presets {
  display: inline-flex;
  background: var(--white);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 3px;
}

.preset {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-mid);
  background: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
}

.preset:hover { background: var(--page); color: var(--ink); }
.preset[aria-pressed="true"] { background: var(--blue); color: var(--white); }
.preset:focus-visible { outline: 3px solid var(--blue-edge); outline-offset: 1px; }

.custom {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.custom .field-label { margin-bottom: 5px; }
.custom .field-input { width: auto; padding: 8px 12px; font-size: 14px; border-radius: 10px; }
.custom .btn { padding: 8px 18px; font-size: 14px; }
.custom.active .field-input { border-color: var(--blue); }

.status-line { margin-bottom: 22px; }
.status-line:empty { display: none; }

/* Headline numbers ------------------------------------------------- */

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 12px;
  margin-bottom: 26px;
}

.kpi {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
}

.kpi-value {
  font-family: var(--text);
  font-weight: 600;
  font-size: 30px;
  line-height: 1.15;
  color: var(--ink);
  margin: 6px 0 2px;
}

.kpi-hero .kpi-value { font-size: 44px; }
.kpi-note { margin: 0; font-size: 13px; color: var(--ink-muted); }

/* Machines ------------------------------------------------------------ */

.board {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
  padding: 22px 24px 18px;
  margin-bottom: 30px;
  transition: opacity .15s;
}

.board.loading, .kpis.loading, .incidents.loading { opacity: .5; }

.board-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 14px;
}

.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; }

.legend li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--ink-mid);
}

.swatch { width: 14px; height: 10px; border-radius: 3px; flex: none; }
.swatch-up { background: var(--state-up); box-shadow: inset 0 0 0 1px var(--good-line); }
.swatch-down { background: var(--state-down); }
.swatch-stuck { background: var(--state-stuck); }
.swatch-unknown { background: var(--state-unknown); box-shadow: inset 0 0 0 1px var(--line-strong); }

.rows { list-style: none; margin: 0; padding: 0; }

.row {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) 7.5rem 1fr;
  align-items: center;
  gap: 18px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.row:first-child { border-top: 0; }

.who-name { font-weight: 600; color: var(--ink); margin: 0; }
.who-where { font-size: 13px; color: var(--ink-muted); margin: 0; }

.pct {
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
}

.pct-note { font-size: 12px; color: var(--ink-muted); margin: 0; white-space: nowrap; }

.strip {
  position: relative;
  height: 22px;
  border-radius: 6px;
  background: var(--state-up);
  overflow: hidden;
}

/* Each stretch of trouble. The 2px surface gap between touching stretches
   comes from the box-shadow, not a border drawn around them. */
.seg {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 3px;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: default;
  box-shadow: 0 0 0 1px var(--white);
}

.seg-down { background: var(--state-down); }
.seg-stuck { background: var(--state-stuck); }
.seg-unknown { background: var(--state-unknown); box-shadow: none; }
.seg:hover, .seg:focus-visible { filter: brightness(1.12); outline: 2px solid var(--ink); outline-offset: 1px; z-index: 2; }

/* Past a week, one cell per day or per week instead. A five minute blip
   drawn to scale on a year is invisible, and drawn at a visible width it
   is hundreds of times its length; a cell says how much of its day was
   down, which is the honest version of both. */
.strip.cells {
  display: flex;
  gap: 2px;
  background: none;
  border-radius: 0;
  overflow: visible;
}

.cell {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  border: 0;
  padding: 0;
  border-radius: 3px;
  background: var(--state-up);
  cursor: default;
}

.cell-unknown { background: var(--state-unknown); }
.cell-1 { background: var(--down-1); }
.cell-2 { background: var(--down-2); }
.cell-3 { background: var(--down-3); }
.cell-4 { background: var(--down-4); }
.cell:hover, .cell:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; position: relative; z-index: 2; }

.swatch-1 { background: var(--down-1); }
.swatch-2 { background: var(--down-2); }
.swatch-3 { background: var(--down-3); }
.swatch-4 { background: var(--down-4); }
.legend .ramp { gap: 2px; }
.legend .ramp-label { margin-left: 5px; }

.more { display: block; margin: 14px auto 0; }

/* An outage Lamassu reported before the monitor ran: a start with no end,
   so a dot rather than a stretch. Ringed in the surface colour so it
   reads over any cell or segment. */
.reported {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--state-down);
  box-shadow: 0 0 0 2px var(--white);
  cursor: default;
  z-index: 3;
}

.reported-stuck { background: var(--state-stuck); }
.reported:hover, .reported:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.strip.cells { position: relative; }
.swatch-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--state-down); }

.axis {
  display: grid;
  grid-template-columns: minmax(9rem, 13rem) 7.5rem 1fr;
  gap: 18px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.ticks { position: relative; height: 18px; }

.tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-faint);
  white-space: nowrap;
}

.tick:first-child { transform: none; }
.tick:last-child { transform: translateX(-100%); }

.tip {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  background: var(--ink-deep);
  color: var(--white);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: var(--shadow-card);
  max-width: 18rem;
}

.tip strong { display: block; font-size: 15px; }
.tip span { color: var(--ink-faint); }

/* Incidents: the table view, so nothing is only readable by hovering -- */

.incidents h2, .lamassu h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 24px;
  margin: 8px 0 12px;
}

.table-wrap {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow-x: auto;
}

table { width: 100%; border-collapse: collapse; font-size: 14px; }

th {
  text-align: left;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-mid);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

tr:last-child td { border-bottom: 0; }
td.what { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; }
td.ongoing { color: var(--bad); font-weight: 600; }

.empty { padding: 18px; margin: 0; color: var(--ink-muted); text-align: center; }

.lamassu { margin-top: 30px; }

@media (max-width: 760px) {
  .row, .axis { grid-template-columns: 1fr auto; gap: 8px 12px; }
  .row .strip, .axis .ticks { grid-column: 1 / -1; }
  .axis > :not(.ticks) { display: none; }
  .pct, .pct-note { text-align: right; }
}

@media (max-width: 560px) {
  .wrap { padding: 24px 16px 64px; }
  .page-title { font-size: 30px; }
  .board { padding: 16px; }
  .kpi-hero .kpi-value { font-size: 36px; }
}