/* isolate-cloud web UI. Color carries meaning (AGENTS.md): green for OK
   or added, red for failed or removed, yellow for a warning or a change.
   Nothing else is colored. */

:root {
  --fg: #1d1f23;
  --muted: #6a6f78;
  --bg: #ffffff;
  --panel: #f5f6f8;
  --line: #dfe2e6;
  --accent: #2b59c3;
  --ok: #1d7a3a;
  --ok-bg: #e8f5ec;
  --err: #b42318;
  --err-bg: #fdecea;
  --warn: #8a6100;
  --warn-bg: #fff6db;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg: #e6e8eb;
    --muted: #9aa0a9;
    --bg: #15171a;
    --panel: #1e2125;
    --line: #2f343a;
    --accent: #7aa2ff;
    --ok: #5cc98a;
    --ok-bg: #12301f;
    --err: #ff7b72;
    --err-bg: #3a1714;
    --warn: #e3b341;
    --warn-bg: #352a0c;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--fg);
  background: var(--bg);
}

header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.75rem 1.5rem;
  border-bottom: 1px solid var(--line);
}
header .brand { font-weight: 600; color: var(--fg); text-decoration: none; }
header nav { display: flex; gap: 1rem; flex: 1; }
header .who { display: flex; gap: 0.75rem; align-items: center; margin-left: auto; }

main { max-width: 56rem; margin: 0 auto; padding: 1.5rem; }
h1 { font-size: 1.5rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 0.5rem; }

a { color: var(--accent); }
code, pre, .num, textarea { font-family: var(--mono); font-size: 0.9em; }
pre { white-space: pre-wrap; word-break: break-word; margin: 0; }
.muted, .hint { color: var(--muted); }
.hint { font-size: 0.875rem; margin: 0.25rem 0 0; }
.label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0.75rem 0 0.25rem; }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 1rem; margin: 0 0 1rem; }

/* Notices: one meaning per color. */
.notice { border-left: 4px solid; border-radius: 4px; padding: 0.75rem 1rem; margin: 0 0 1rem; }
.notice.ok { border-color: var(--ok); background: var(--ok-bg); }
.notice.err { border-color: var(--err); background: var(--err-bg); }
.notice.warn { border-color: var(--warn); background: var(--warn-bg); }
.notice .msg { font-family: inherit; font-weight: 600; }
.notice .fix { background: var(--bg); border: 1px solid var(--line); padding: 0.5rem; border-radius: 4px; }
.notice ul.valid { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.notice ul.valid code { background: var(--bg); border: 1px solid var(--line); padding: 0 0.35rem; border-radius: 3px; }

/* Tables: aligned, one fact per row. */
table { border-collapse: collapse; width: 100%; margin: 0 0 1rem; }
th, td { text-align: left; padding: 0.45rem 0.75rem 0.45rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; }
thead th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
table.kv th { width: 9rem; color: var(--muted); font-weight: 500; }
tr.changed td:first-child { box-shadow: inset 3px 0 0 var(--warn); padding-left: 0.5rem; }

.state { font-family: var(--mono); font-size: 0.85em; }
.state.active { color: var(--ok); }
.state.revoked { color: var(--err); }
.state.expired { color: var(--warn); }
.state.used { color: var(--muted); }

/* Forms. */
label { display: block; margin: 0 0 0.35rem; }
input, select, textarea {
  font: inherit; color: var(--fg); background: var(--bg);
  border: 1px solid var(--line); border-radius: 4px; padding: 0.4rem 0.5rem;
}
input.num { width: 8rem; text-align: right; }
textarea { width: 100%; display: block; margin: 0 0 0.75rem; }
button, .button {
  display: inline-block; font: inherit; cursor: pointer; text-decoration: none;
  color: #fff; background: var(--accent); border: 0; border-radius: 4px; padding: 0.45rem 0.9rem;
}
button.link { background: none; color: var(--accent); padding: 0; }
button.danger { background: var(--err); }
button.approve { background: var(--ok); }
form.inline { display: inline; margin: 0; }
ul.providers { list-style: none; padding: 0; }
ul.providers li { margin: 0 0 0.5rem; }

/* The approval page (ADR 0410): the check code large enough to compare
   with the terminal, and Approve greyed until the box is ticked. The box
   is required, so the browser won't send Approve without it either way;
   the server checks again. */
.checkcode { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 1rem; margin: 0 0 1rem; text-align: center; }
.checkcode .code { font-family: var(--mono); font-size: 2.25rem; letter-spacing: 0.15em; margin: 0; }
form.decide .confirm { display: flex; gap: 0.5rem; align-items: baseline; margin: 1rem 0; }
form.decide .buttons { display: flex; gap: 0.75rem; }
form.decide:has(input[name="confirm"]:not(:checked)) button.approve {
  opacity: 0.4; cursor: not-allowed;
}
.newkey .secret { font-size: 1rem; background: var(--bg); border: 1px solid var(--line); padding: 0.75rem; border-radius: 4px; user-select: all; }

/* The admin pages (plan C8). */
header nav { flex-wrap: wrap; }
header nav .sep { border-left: 1px solid var(--line); }
main:has(table.list) { max-width: 72rem; }
.summary { font-weight: 600; margin: 0 0 1rem; }
th.n, td.n { text-align: right; font-variant-numeric: tabular-nums; }
.state.ok { color: var(--ok); }
.state.warn { color: var(--warn); }
.state.bad { color: var(--err); }
.hint.problem { color: var(--warn); }
a.button.danger { background: var(--err); color: #fff; padding: 0.25rem 0.6rem; font-size: 0.875rem; white-space: nowrap; }
input.wide { width: 100%; }
.confirm .says { font-weight: 600; margin: 0 0 1rem; }
form .buttons { display: flex; gap: 1rem; align-items: center; margin: 1rem 0 0; }
.card label + input, .card label + select { margin: 0 0 0.75rem; }
nav.tabs { display: flex; border-bottom: 1px solid var(--line); margin: 0 0 1rem; }
nav.tabs a { padding: 0.5rem 1rem; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; }
nav.tabs a.active { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
form.filter { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
form.filter p.hint { flex-basis: 100%; margin: 0; }
details summary { cursor: pointer; }
details pre { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 0.5rem; margin: 0.5rem 0 0; max-width: 40rem; }
.pager { display: flex; gap: 1rem; align-items: center; }
table.access input { width: 100%; }
table.access tr.defaults td { background: var(--panel); }
pre.copy { user-select: all; margin: 0 0 1rem; }