/* Pharos — a fire kept lit on a threshold.
   Dark by default because this is a thing you glance at in a corner of a screen, and the one warm
   colour in it is the beam. Everything else is grey so that the beam means something. */

:root {
  --ground: #0c0d11;
  --panel: #14161c;
  --panel-2: #1b1e26;
  --line: #262a34;
  --ink: #e7e8ee;
  --ink-dim: #9aa0ae;
  --ink-faint: #6a707e;
  --beam: #ffb545;
  --human: #6fd08c;
  --bot: #6a707e;
  --self: #5b8dd6;
  --unknown: #c9a86a;
  --bad: #e2725b;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --- header ------------------------------------------------------------------------------- */

header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .7rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel) 0%, var(--ground) 100%);
  position: sticky;
  top: 0;
  z-index: 5;
}

h1 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  gap: .55rem;
}

/* The lighthouse, as a two-pixel mark rather than a picture. */
.beam {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--beam);
  box-shadow: 0 0 0 3px rgba(255, 181, 69, .18), 0 0 14px 2px rgba(255, 181, 69, .5);
}

nav { display: flex; gap: .3rem; }

.tab {
  background: none;
  border: 1px solid transparent;
  color: var(--ink-dim);
  padding: .3rem .7rem;
  border-radius: .4rem;
  cursor: pointer;
  font: inherit;
}
.tab:hover { color: var(--ink); }
.tab.is-on { color: var(--ink); border-color: var(--line); background: var(--panel-2); }

.right { margin-left: auto; display: flex; align-items: center; gap: .9rem; }
.right form { margin: 0; }

.link { font-size: .78rem; color: var(--ink-faint); }
.link.is-live { color: var(--human); }
.link.is-down { color: var(--bad); }

.quiet {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink-faint);
  border-radius: .4rem;
  padding: .25rem .6rem;
  cursor: pointer;
  font: inherit;
  font-size: .78rem;
}
.quiet:hover { color: var(--ink); }

/* --- views -------------------------------------------------------------------------------- */

main { padding: 1rem 1.1rem 3rem; max-width: 1400px; }
.view.is-hidden { display: none; }

.filters {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .3rem 0 .8rem;
  color: var(--ink-dim);
  font-size: .82rem;
  flex-wrap: wrap;
}
.filters label { display: flex; align-items: center; gap: .35rem; cursor: pointer; }
.spacer { flex: 1; }
.counts { color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* --- the stream --------------------------------------------------------------------------- */

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

.row {
  display: grid;
  grid-template-columns: 4.5rem 7rem 13rem 1fr 3rem;
  gap: .8rem;
  align-items: baseline;
  padding: .4rem .6rem;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  border-left: 2px solid transparent;
}
.row:hover { background: var(--panel); }

/* `hidden` alone does nothing here. The browser's own `[hidden] { display: none }` lives in the
   user-agent stylesheet, and any author rule beats it whatever the specificity — so `.row`'s
   `display: grid` above silently wins and the class filters appear to do nothing. This rule is
   what makes them work. */
.row[hidden] { display: none; }
.row.is-new { animation: arrive 1.2s ease-out; }

@keyframes arrive {
  from { background: rgba(255, 181, 69, .13); }
  to { background: transparent; }
}

.row.c-human { border-left-color: var(--human); }
.row.c-bot { border-left-color: var(--bot); }
.row.c-self { border-left-color: var(--self); }
.row.c-unknown { border-left-color: var(--unknown); }

.t { color: var(--ink-faint); font-family: var(--mono); font-size: .76rem; }
.kind { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-dim); }
.kind.k-scan, .kind.k-server_error { color: var(--bad); }
.kind.k-login { color: var(--beam); }
.who { color: var(--ink-dim); font-family: var(--mono); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; }
.what { font-family: var(--mono); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.what .host { color: var(--ink-dim); }
.st { font-family: var(--mono); font-size: .78rem; color: var(--ink-faint); text-align: right; }
.st.s4, .st.s5 { color: var(--bad); }

/* Reason lives one level down: always available, never in the way. */
.reason {
  grid-column: 3 / -1;
  color: var(--ink-faint);
  font-size: .74rem;
  padding-top: .15rem;
}

.empty { color: var(--ink-faint); padding: 2rem .6rem; font-size: .85rem; }
.empty.is-hidden { display: none; }

/* --- sites -------------------------------------------------------------------------------- */

.sites { width: 100%; border-collapse: collapse; font-size: .85rem; }
.sites th {
  text-align: left;
  color: var(--ink-faint);
  font-weight: 500;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: .4rem .6rem;
  border-bottom: 1px solid var(--line);
}
.sites td { padding: .45rem .6rem; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: .8rem; }
.sites .n { text-align: right; font-variant-numeric: tabular-nums; }
.sites tbody tr:hover { background: var(--panel); }
.zero { color: var(--ink-faint); }
.some { color: var(--human); }
.note { color: var(--ink-faint); font-size: .78rem; max-width: 46rem; margin-top: 1.2rem; }

/* --- detail ------------------------------------------------------------------------------- */

dialog {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: .6rem;
  padding: 1.2rem;
  max-width: 46rem;
  width: 92vw;
}
dialog::backdrop { background: rgba(0, 0, 0, .6); }
dialog dl { display: grid; grid-template-columns: 9rem 1fr; gap: .3rem .9rem; margin: 0 0 1rem; }
dialog dt { color: var(--ink-faint); font-size: .78rem; }
dialog dd { margin: 0; font-family: var(--mono); font-size: .8rem; word-break: break-all; }
dialog button { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: .4rem; padding: .35rem .8rem; cursor: pointer; font: inherit; }

/* --- login -------------------------------------------------------------------------------- */

.login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .8rem;
}
.login h1 { font-size: 1.4rem; }
.login form { display: flex; gap: .5rem; }
.login input {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: .4rem;
  padding: .5rem .7rem;
  font: inherit;
}
.login button {
  background: var(--beam);
  color: #201603;
  border: 0;
  border-radius: .4rem;
  padding: .5rem 1rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.bad { color: var(--bad); font-size: .85rem; }

@media (max-width: 780px) {
  .row { grid-template-columns: 4rem 1fr 3rem; }
  .who { display: none; }
  .reason { grid-column: 1 / -1; }
}