/* Argus Cloud - mobile first. Neil's primary device is a phone. */
:root {
  --bg: #101418;
  --panel: #171d23;
  --line: #262f38;
  --ink: #e6edf3;
  --muted: #8b98a5;
  --accent: #4b9fea;
  --ok: #3fb27f;
  --bad: #e5534b;
  --radius: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- wordmark ------------------------------------------------------------ */
.wordmark {
  font-weight: 700;
  letter-spacing: 0.34em;
  font-size: 1.5rem;
}
.wordmark.small { font-size: 1rem; letter-spacing: 0.28em; }
.wordmark-sub {
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  margin: 0.35rem 0 1.75rem;
  text-transform: uppercase;
}

/* --- login gate ---------------------------------------------------------- */
.gate {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.gate-card {
  width: 100%;
  max-width: 340px;
  text-align: center;
}
.gate-card form { display: flex; flex-direction: column; gap: 0.7rem; }

input[type="password"] {
  width: 100%;
  padding: 0.85rem 0.9rem;
  font-size: 1rem;               /* >=16px stops iOS zooming the page */
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
input[type="password"]:focus {
  outline: none;
  border-color: var(--accent);
}

button[type="submit"] {
  padding: 0.85rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
button[type="submit"]:active { filter: brightness(0.9); }

.error {
  margin-top: 1rem;
  color: var(--bad);
  font-size: 0.9rem;
}

/* --- signed-in shell ----------------------------------------------------- */
.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--line);
  padding-top: max(0.9rem, env(safe-area-inset-top));
}
.bar form { margin: 0; }

button.link {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 0.9rem;
  padding: 0.3rem;
  cursor: pointer;
}
button.link:active { color: var(--ink); }

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.1rem 1.1rem calc(2rem + env(safe-area-inset-bottom));
}

.ok { color: var(--ok); font-size: 0.92rem; margin: 0.2rem 0 1.4rem; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 0.9rem;
}
.card h2 {
  margin: 0 0 0.35rem;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.muted { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.6rem; }

.pending {
  display: inline-block;
  margin: 0;
  padding: 0.2rem 0.55rem;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: 999px;
}

.foot {
  margin-top: 1.8rem;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.6;
}
.foot code { font-size: 0.74rem; word-break: break-all; }

/* --- status strip -------------------------------------------------------- */
.status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.9rem;
  margin-bottom: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  font-size: 0.9rem;
}
.status .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--muted); flex: none;
}
.status.running .dot { background: var(--accent); animation: pulse 1.1s infinite; }
.status.ok .dot { background: var(--ok); }
.status.stopped .dot,
.status.vanished .dot { background: #d9a441; }
.status.failed .dot { background: var(--bad); }
@keyframes pulse { 50% { opacity: 0.25; } }

/* --- form ---------------------------------------------------------------- */
.field { display: block; margin-bottom: 0.5rem; }
.field span {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
input[type="date"] {
  width: 100%;
  padding: 0.7rem 0.8rem;
  font-size: 1rem;                /* >=16px: stops iOS zooming on focus */
  font-family: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
textarea {
  width: 100%;
  padding: 0.75rem 0.8rem;
  font-size: 1rem;
  font-family: inherit;
  line-height: 1.45;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  resize: vertical;
}
textarea:focus, input[type="date"]:focus {
  outline: none; border-color: var(--accent);
}
.hint { color: var(--muted); font-size: 0.8rem; margin: 0.45rem 0 0.8rem; }

.actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.9rem;
  flex-wrap: wrap;
}
.actions button {
  flex: 1 1 auto;
  min-height: 48px;              /* comfortable thumb target */
  padding: 0.8rem 1rem;
  font-size: 0.98rem;
  font-weight: 600;
  font-family: inherit;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
}
.actions .primary { background: var(--accent); color: #fff; }
.actions .secondary {
  background: transparent; color: var(--ink); border-color: var(--line);
}
.actions button:disabled { opacity: 0.45; cursor: default; }
.actions button:active:not(:disabled) { filter: brightness(0.9); }

.danger {
  background: transparent;
  color: var(--bad);
  border: 1px solid var(--bad);
  border-radius: var(--radius);
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
}

/* --- run log ------------------------------------------------------------- */
.loghead {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.5rem;
}
.loghead h2 { margin: 0; }
#log {
  margin: 0;
  padding: 0.75rem;
  max-height: 55vh;
  overflow: auto;
  background: #0b0e11;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  color: #cbd5e0;
  -webkit-overflow-scrolling: touch;
}
.follow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 0.6rem; color: var(--muted); font-size: 0.8rem;
}

/* --- nav ----------------------------------------------------------------- */
a { color: var(--accent); text-decoration: none; }
.bar a.wordmark { color: var(--ink); }
.nav { display: flex; align-items: center; gap: 1rem; }
.nav a { color: var(--muted); font-size: 0.9rem; }
.nav a.on { color: var(--ink); }
.nav form { margin: 0; }

h1.ph {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0.4rem 0 1rem;
  letter-spacing: 0.01em;
}
.back { margin: 0.3rem 0 0.6rem; font-size: 0.85rem; }

/* --- run / file lists ---------------------------------------------------- */
.runlist, .filelist { list-style: none; margin: 0; padding: 0; }
.runlist li, .filelist li { margin-bottom: 0.5rem; }
.runlist.tight li { margin-bottom: 0.35rem; }

.runlist a, .filelist a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.6rem 0.85rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
}
.runlist a:active, .filelist a:active { border-color: var(--accent); }

.rd b, .fn { display: block; font-weight: 600; font-size: 0.95rem; }
.fn { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 0.85rem; }
.sub { display: block; color: var(--muted); font-size: 0.78rem; margin-top: 0.15rem; }

.tags { display: flex; align-items: center; gap: 0.4rem; flex: none; }
.tag {
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
}
.tag.warn { color: #d9a441; border-color: #6b551f; }
.chev { color: var(--muted); font-size: 1.2rem; line-height: 1; }

/* --- package view -------------------------------------------------------- */
.bigbtn {
  display: block;
  text-align: center;
  min-height: 52px;
  padding: 0.95rem 1rem;
  margin-bottom: 0.9rem;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius);
}
.bigbtn:active { filter: brightness(0.9); }

pre.summary {
  margin: 0;
  padding: 0.75rem;
  max-height: 60vh;
  overflow: auto;
  background: #0b0e11;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font: 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre;
  color: #cbd5e0;
  -webkit-overflow-scrolling: touch;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
}