/* ===========================================================================
   amp-health — page-specific rules only.
   Anything reusable lives in base.css; tokens live in tokens.css. Both are
   copied verbatim from zed-style and must not be edited here.
   =========================================================================== */

.top  { max-width: 1100px; margin: 0 auto; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px 0; }
main  { max-width: 1100px; margin: 0 auto; padding: 24px 16px 80px; }
h1    { margin: 0; font-size: 40px; line-height: 1.1; }
.sub  { margin: 8px 0 28px; max-width: 520px; font-size: 15px; }

footer   { position: fixed; bottom: 8px; right: 12px; font-size: 12px; color: rgb(var(--ink-muted)); pointer-events: none; }
footer a { pointer-events: auto; color: inherit; text-decoration: none; }
footer a:hover { color: rgb(var(--ink-soft)); text-decoration: underline; }

/* --- AMP unreachable banner ---------------------------------------------- */

.banner {
  margin: 0 0 20px; padding: 10px 12px; border-radius: 4px; font-size: 13px;
  border: 1px solid rgb(var(--danger) / .4); background: rgb(var(--paper-card));
  color: rgb(var(--ink));
}
.banner .detail {
  display: block; margin-top: 4px; font-size: 12px;
  color: rgb(var(--ink-muted)); word-break: break-word;
}

/* --- Deployment summary strip -------------------------------------------- */

#summary { margin: 0 0 16px; }
#summary .warn b { color: rgb(var(--danger)); }
#summary .near b { color: #d97706; }
#summary .cap { display: block; margin-top: 2px; font-size: 10px; text-transform: none; letter-spacing: 0; }

/* --- Cleanup view --------------------------------------------------------- */

.cleanup-note { margin: 0 0 10px; font-size: 13px; color: rgb(var(--ink-muted)); }
table.htop td.age { color: rgb(var(--ink-muted)); }

/* --- Toolbar and view tabs ----------------------------------------------- */

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; flex-wrap: wrap; }
.tabs    { display: flex; gap: 6px; }

.tab {
  padding: 5px 12px; border-radius: 4px; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer;
  border: 1px solid rgb(var(--paper-border)); background: rgb(var(--paper-card)); color: rgb(var(--ink-soft));
  transition: color .12s, border-color .12s, background-color .12s;
}
.tab:hover { border-color: rgb(var(--ink-muted)); }
.tab[aria-pressed="true"] { border-color: rgb(var(--accent)); background: rgb(var(--accent)); color: #fff; }

/* --- Status dot ----------------------------------------------------------
   A 10px dot, never a background fill. Green is the one sanctioned non-accent
   colour; a deliberately stopped server is muted rather than red, because being
   off on purpose is not a fault. */

.dot { display: inline-block; width: 10px; height: 10px; border-radius: 999px; flex: none; background: rgb(var(--ink-muted)); }
.dot.up     { background: #16a34a; }
.dot.down   { background: rgb(var(--ink-muted)); }
.dot.failed { background: rgb(var(--danger)); }
.dot.other  { background: #d97706; }

.status { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.status .txt { font-size: 12px; color: rgb(var(--ink-muted)); }
.status.up .txt     { color: rgb(var(--ink)); }
.status.failed .txt { color: rgb(var(--danger)); }

/* --- Cards view ----------------------------------------------------------- */

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; align-items: start; }
.grid .inst.open { grid-column: 1 / -1; }

.inst { border: 1px solid rgb(var(--paper-border)); background: rgb(var(--paper-card)); border-radius: 4px; }
.inst.open { border-color: rgb(var(--accent) / .5); }

.inst-head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 11px 13px; border: 0; background: none; color: inherit; font: inherit;
  text-align: left; cursor: pointer; border-radius: 4px;
  transition: background-color .12s;
}
.inst-head:hover { background: rgb(var(--paper) / .6); }
.inst-head:focus-visible { outline: none; box-shadow: inset 0 0 0 1px rgb(var(--accent)); }

.inst-title { flex: 1; min-width: 0; }
.inst-name  { display: block; font-size: 14px; font-weight: 500; color: rgb(var(--ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inst-mod   { display: block; font-size: 11px; color: rgb(var(--ink-muted)); }

.chev { flex: none; color: rgb(var(--ink-muted)); font-size: 10px; }

/* Stat strip inside a card: recessed --paper on the raised --paper-card. */
.stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 0 13px 13px; padding: 10px 12px; border-radius: 4px;
  border: 1px solid rgb(var(--paper-border)); background: rgb(var(--paper));
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em;
  color: rgb(var(--ink-muted));
}
.stat-row > div { min-width: 0; }
.stat-row b {
  display: block; margin-bottom: 2px; font-size: 15px; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: rgb(var(--ink));
  font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stat-row .sub2 { display: block; margin-top: 2px; font-size: 10px; text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums; }

/* --- Table view: htop ----------------------------------------------------
   Monospace grid with an inverted header bar and character-drawn meters, the
   way htop draws them. The meters are real text, so they stay aligned with the
   columns without any width maths.

   The meter is the one place a third colour appears. zed-style allows non-accent
   fills on a progress bar, and a load gauge that cannot show "getting bad" is
   not doing its job — so the fill steps accent -> amber -> danger with load.
   Nothing else on the page picks up those colours. */

.tbl-wrap { overflow-x: auto; border-radius: 4px; }

table.htop {
  width: 100%; border-collapse: collapse;
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 12px; line-height: 1.6;
}

table.htop thead th {
  position: sticky; top: 0; z-index: 1;
  padding: 3px 10px; border: 0; border-bottom: 1px solid rgb(var(--paper-border));
  background: rgb(var(--accent)); color: #fff;
  font-family: inherit; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap; cursor: pointer; user-select: none; text-align: left;
}
table.htop thead th:hover { background: rgb(var(--accent-hover)); }
table.htop thead th.num { text-align: right; }
table.htop thead th .arrow { font-size: 9px; margin-left: 3px; }

table.htop td {
  padding: 2px 10px; border: 0; border-bottom: 1px solid rgb(var(--paper-border) / .5);
  white-space: nowrap; vertical-align: middle; color: rgb(var(--ink-soft));
}
table.htop tbody tr.row { cursor: pointer; }
table.htop tbody tr.row:hover { background: rgb(var(--paper) / .6); }
table.htop tbody tr.row.open { background: rgb(var(--accent-soft)); }
table.htop tbody tr.row.open td { border-bottom-color: transparent; }
table.htop tr.detail-row:hover { background: none; }
table.htop tr.detail-row > td { padding: 0; border-bottom: 1px solid rgb(var(--paper-border)); }

table.htop td.name { color: rgb(var(--ink)); width: 100%; }
/* Everything but the name shrinks to its content. */
table.htop th:not(:first-child), table.htop td:not(.name) { width: 1%; }
table.htop td.mod  { color: rgb(var(--ink-muted)); }
table.htop td.num  { text-align: right; font-variant-numeric: tabular-nums; }
table.htop td.nodata { color: rgb(var(--ink-muted)); }
/* 20 is healthy; below 18 players notice, below 15 they complain. */
table.htop td.tps-warn { color: #d97706; }
table.htop td.tps-bad  { color: rgb(var(--danger)); }

/* The single-letter state column, htop's S: R running, S stopped, F failed. */
table.htop td.st { text-align: center; font-weight: 500; }
.st-r { color: #16a34a; }
.st-s { color: rgb(var(--ink-muted)); }
.st-f { color: rgb(var(--danger)); }
.st-o { color: #d97706; }

/* Character-drawn meter: [|||||||        42.0%] */
.meter { white-space: pre; font-variant-ligatures: none; }
.meter .brk { color: rgb(var(--ink-muted)); }
.meter .gap { display: inline-block; }
.meter .val   { color: rgb(var(--ink)); }
.meter .bar.lo { color: rgb(var(--accent)); }
.meter .bar.mid { color: #d97706; }
.meter .bar.hi { color: rgb(var(--danger)); }

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

.detail { padding: 14px 13px 16px; border-top: 1px solid rgb(var(--paper-border)); }
.detail-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.ranges { display: flex; gap: 6px; }
.resolution { margin-left: auto; font-size: 11px; color: rgb(var(--ink-muted)); font-variant-numeric: tabular-nums; }

.charts { display: grid; gap: 10px; }
.chart-box {
  border: 1px solid rgb(var(--paper-border)); background: rgb(var(--paper));
  border-radius: 4px; padding: 9px 11px 5px;
}
.chart-box .label { display: block; margin-bottom: 5px; }
.chart-wrap { position: relative; height: 148px; }
.chart-box.empty-series canvas { opacity: .25; }
.chart-wrap .no-data {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: rgb(var(--ink-muted)); pointer-events: none;
}

.events { margin-top: 16px; }
.events .label { display: block; margin-bottom: 6px; }
.events ul { margin: 0; padding: 0; list-style: none; max-height: 190px; overflow-y: auto; }
.events li {
  display: flex; gap: 10px; align-items: baseline; padding: 5px 0; font-size: 13px;
  border-bottom: 1px solid rgb(var(--paper-border));
}
.events li:last-child { border-bottom: 0; }
.events .when { color: rgb(var(--ink-muted)); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12px; }
.events .what { color: rgb(var(--ink)); }
.events .what.down { color: rgb(var(--ink-muted)); }
.events .note { flex: 1; min-width: 0; color: rgb(var(--ink-muted)); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.events .none { color: rgb(var(--ink-muted)); font-size: 13px; }

.empty { padding: 36px; text-align: center; font-size: 14px; color: rgb(var(--ink-muted)); }

@media (max-width: 720px) {
  h1 { font-size: 32px; }
  .stat-row { grid-template-columns: 1fr; }
}

/* --- Sign-in page --------------------------------------------------------- */
/* Its own body class so these rules cannot reach the dashboard, which uses the
   same .card and .err names for other things. */

body.signin main {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
body.signin form { width: 100%; max-width: 340px; padding: 28px; }
body.signin h1   { margin: 0 0 6px; font-size: 32px; }
body.signin p    { margin: 0 0 20px; font-size: 14px; }
body.signin .input { margin-top: 6px; width: 100%; }
/* Reserve the line so filling it in does not shift the button under the cursor. */
body.signin .err  { margin: 8px 0 0; min-height: 18px; font-size: 13px; color: rgb(var(--danger)); }
body.signin .btn  { width: 100%; height: 36px; margin-top: 12px; }