/* ---------------------------------------------------------------------------
   AC EVO overview page. Nord palette (nordtheme.com), dark first.

   Colours are only ever referenced through the role variables below, never as
   raw hex further down, so the whole theme moves by editing this block.
   --------------------------------------------------------------------------- */
:root {
  --nord0: #2e3440;
  --nord1: #3b4252;
  --nord2: #434c5e;
  --nord3: #4c566a;
  --nord4: #d8dee9;
  --nord5: #e5e9f0;
  --nord6: #eceff4;
  --nord7: #8fbcbb;
  --nord8: #88c0d0;
  --nord9: #81a1c1;
  --nord10: #5e81ac;
  --nord11: #bf616a;
  --nord12: #d08770;
  --nord13: #ebcb8b;
  --nord14: #a3be8c;
  --nord15: #b48ead;

  /* roles */
  --bg: var(--nord0);
  --surface: var(--nord1);
  --raised: var(--nord2);
  --line: var(--nord3);
  --text-dim: var(--nord4);
  --text: var(--nord5);
  --heading: var(--nord6);
  --accent: var(--nord8);
  --accent-deep: var(--nord10);
  --ok: var(--nord14);
  --warn: var(--nord13);
  --bad: var(--nord11);

  --radius: 8px;
  --gap: 16px;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- shell ---------------------------------------------------------------- */

header.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 14px 24px;
  background: color-mix(in srgb, var(--bg) 88%, black);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}

header.top h1 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--heading);
}

header.top .spacer { flex: 1; }

.tick {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--nord3);
}
.tick.live { color: var(--nord7); }

main { padding: 24px; max-width: 1100px; margin: 0 auto; }

/* --- server cards --------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--gap);
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease, background 120ms ease;
}
.card:hover {
  border-color: var(--accent);
  background: var(--raised);
  transform: translateY(-1px);
}
.card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.card h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--heading);
}

.card .sub {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--nord3);
  margin-bottom: 14px;
}

.card .facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  font-size: 13px;
  margin-bottom: 14px;
}
.card .facts dt { color: var(--nord3); }
.card .facts dd { margin: 0; color: var(--text); font-family: var(--mono); }

/* --- state pill ----------------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--nord3) 40%, transparent);
  color: var(--text-dim);
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.pill.running { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.pill.starting, .pill.stopping { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.pill.offline { color: var(--text-dim); }
.pill.error, .pill.missing { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); background: color-mix(in srgb, var(--bad) 12%, transparent); }
.pill.running .dot { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* --- usage bars ----------------------------------------------------------- */

.bars { display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; font-size: 12px; }
.bar-row .lbl { color: var(--nord3); }
.bar-row .val { font-family: var(--mono); color: var(--text-dim); }
.track {
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--nord3) 45%, transparent);
  overflow: hidden;
}
.track > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--accent);
  transition: width 400ms ease;
}
.track > span.hot { background: var(--warn); }
.track > span.full { background: var(--bad); }

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

.back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--accent);
  font: inherit;
  font-size: 13px;
  padding: 0;
  margin-bottom: 16px;
  cursor: pointer;
}
.back:hover { text-decoration: underline; }

.detail-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.detail-head h2 { margin: 0; font-size: 20px; color: var(--heading); }
.detail-head .spacer { flex: 1; }

/* --- buttons -------------------------------------------------------------- */

.btn {
  font: inherit;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn:hover:not(:disabled) { background: var(--raised); border-color: var(--nord9); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--nord6); }
.btn.primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--nord0); }
.btn.good { color: var(--ok); }
.btn.good:hover:not(:disabled) { border-color: var(--ok); }
.btn.danger { color: var(--bad); }
.btn.danger:hover:not(:disabled) { border-color: var(--bad); }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* --- config form ---------------------------------------------------------- */

section.group { margin-bottom: 28px; }
section.group > h3 {
  margin: 0 0 2px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--nord7);
}
section.group > .hint {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--nord3);
}

.field {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 4px 20px;
  padding: 12px 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  align-items: start;
}
.field:first-of-type { border-top: none; }
.field > .label { padding-top: 7px; }
.field .name { color: var(--text); font-size: 14px; }
.field .env { font-family: var(--mono); font-size: 11px; color: var(--nord3); }
.field .desc { grid-column: 2; font-size: 12.5px; color: var(--nord3); margin-top: 2px; }
.field.changed .name { color: var(--warn); }
.field.changed .name::after { content: " *"; color: var(--warn); }

input[type="text"], input[type="number"], input[type="password"], select {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 7px 10px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
}
input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
input[readonly] { color: var(--nord3); }
select { appearance: none; background-image: none; cursor: pointer; }
.with-toggle { display: flex; gap: 8px; }
.with-toggle input { flex: 1; }

/* --- notices -------------------------------------------------------------- */

.notice {
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 18px;
  font-size: 13.5px;
  border: 1px solid;
}
.notice.warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); color: var(--warn); }
.notice.bad  { border-color: color-mix(in srgb, var(--bad) 45%, transparent);  background: color-mix(in srgb, var(--bad) 10%, transparent);  color: var(--bad); }
.notice.info { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.notice.ok   { border-color: color-mix(in srgb, var(--ok) 45%, transparent);   background: color-mix(in srgb, var(--ok) 10%, transparent);   color: var(--ok); }
.notice strong { color: inherit; }

.savebar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  background: linear-gradient(to top, var(--bg) 70%, transparent);
}
.savebar .count { font-size: 13px; color: var(--nord3); }

.empty { color: var(--nord3); text-align: center; padding: 60px 0; }
.hidden { display: none !important; }

@media (max-width: 720px) {
  .field { grid-template-columns: 1fr; }
  .field .desc { grid-column: 1; }
  main { padding: 16px; }
}

/* --- login gate ----------------------------------------------------------
   Replaces the browser's own Basic Auth dialog, which cannot be styled at all.
   The page sends the Authorization header from fetch() instead, and Caddy is
   configured not to return WWW-Authenticate, which is the header that makes a
   browser draw its own prompt.
   ------------------------------------------------------------------------- */

.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  /* A faint Frost glow from above so the card is not floating on flat black. */
  background:
    radial-gradient(1100px 420px at 50% -160px, color-mix(in srgb, var(--nord10) 28%, transparent), transparent 70%),
    var(--bg);
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px 30px 28px;
  box-shadow: 0 18px 50px -16px rgba(0, 0, 0, 0.55);
}

.login-mark { color: var(--accent); margin-bottom: 14px; line-height: 0; }

.login-card h1 {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 600;
  color: var(--heading);
  letter-spacing: 0.01em;
}

.login-sub { margin: 0 0 24px; font-size: 13px; color: var(--nord3); }

.login-field { display: block; margin-bottom: 16px; }
.login-field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nord3);
}

.login-error {
  border-radius: 6px;
  padding: 9px 11px;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--bad);
  border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent);
  background: color-mix(in srgb, var(--bad) 10%, transparent);
}

.login-go { width: 100%; padding: 10px; font-size: 14px; }
.login-go[aria-busy="true"] { opacity: 0.6; pointer-events: none; }

/* A variable that lives on the egg rather than on this server: one value shared
   by every server, so the control is shown but not editable here. */
.badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nord7);
  background: color-mix(in srgb, var(--nord7) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--nord7) 32%, transparent);
  vertical-align: 1px;
}
.field.inherited input,
.field.inherited select { border-style: dashed; color: var(--nord3); cursor: not-allowed; }

/* --- car lists ------------------------------------------------------------
   Two views onto the same live catalogue: a popover hung off each category name
   in the egg's help text, and an inline searchable list of every car under the
   two car-token fields.
   -------------------------------------------------------------------------- */
.btn.small { padding: 4px 9px; font-size: 12px; }

.cars-tools { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.cars-note { font-size: 11.5px; color: var(--nord3); }
.cars-note.bad { color: var(--bad); }

/* A category name inside the egg's own description, made hoverable in place. */
.cat {
  color: var(--accent);
  border-bottom: 1px dotted color-mix(in srgb, var(--accent) 60%, transparent);
  cursor: help;
  white-space: nowrap;
}
.cat:hover, .cat:focus-visible { color: var(--nord7); outline: none; }
.cat .cat-n {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  margin-left: 3px;
  padding: 0 4px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.car-pop {
  position: absolute;
  z-index: 40;
  min-width: 340px;
  max-width: min(560px, 92vw);
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 10px 30px rgb(0 0 0 / 45%);
}
.car-pop-head {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-dim);
}
.car-pop-head strong { color: var(--heading); text-transform: capitalize; }
.car-pop-head.bad { color: var(--bad); }

.cars-panel {
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg);
}
.cars-panel-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.cars-panel-head input { flex: 1; }

.car-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow: auto;
  display: grid;
  gap: 2px;
}
.car-list.tall { max-height: 420px; }
.car-list li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 4px 6px;
  border-radius: 5px;
  font-size: 12.5px;
}
.car-list li:nth-child(odd) { background: color-mix(in srgb, var(--raised) 45%, transparent); }
.car-list .cn { color: var(--text); }
.car-list .ct { display: flex; gap: 4px; }
.car-list .ct i {
  font-style: normal;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  color: var(--nord3);
}
.car-list code {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--nord9);
  cursor: copy;
  padding: 1px 4px;
  border-radius: 4px;
}
.car-list code:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.car-list code.copied { background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ok); }