/* GridFractAL server — the mobile companion's language, on a wider surface.
   Taken from the design rather than approximated: dense small type, IBM Plex Mono for anything
   numeric or machine-written, 9.5–10px uppercase micro-labels at 0.08em, hairline #f0efed inside
   a card and #ebe9e6 between them, 3px status bars, 16px chips. */

:root{
  --bg:#e9e7e2; --card:#fff; --line:#ebe9e6; --hair:#f0efed; --line-strong:#d6d3d1;
  --ink:#18181b; --muted:#57534e; --faint:#a8a29e; --wash:#fafaf9; --wash2:#f5f5f4;
  --accent:oklch(0.42 0.18 252); --accent-soft:oklch(0.96 0.025 252); --accent-line:oklch(0.85 0.06 252);
  --good:oklch(0.42 0.14 155); --good-soft:oklch(0.96 0.04 155); --good-mid:oklch(0.58 0.13 155);
  --bad:oklch(0.58 0.20 25); --bad-soft:oklch(0.96 0.04 25); --bad-deep:oklch(0.48 0.18 25);
  --warn:oklch(0.50 0.14 60); --warn-soft:oklch(0.96 0.05 70); --warn-mid:oklch(0.72 0.15 70);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;
  font-family:'IBM Plex Sans',ui-sans-serif,system-ui,sans-serif;font-size:13px;line-height:1.55}
.mono,code,kbd{font-family:'IBM Plex Mono',ui-monospace,monospace}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

/* ── chrome ─────────────────────────────────────────────────────────────── */
.top{display:flex;align-items:center;gap:14px;height:52px;padding:0 20px;background:var(--card);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.brand{font-weight:600;font-size:14px;letter-spacing:-0.02em;color:var(--ink)}
.brand span{color:var(--faint);font-weight:400}
.top nav{margin-left:auto;display:flex;align-items:center;gap:12px}
.who{color:var(--muted);font-size:12px}
main{max-width:820px;margin:0 auto;padding:22px 20px 56px}
footer{max-width:820px;margin:0 auto;padding:0 20px 36px;color:var(--faint);font-size:11px;line-height:1.6}

/* ── cards ──────────────────────────────────────────────────────────────── */
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:14px;
  overflow:hidden}
.card-head{padding:16px 16px 13px}
.card-body{padding:16px}
.card-head+.card-body{padding-top:0}
h1{font-size:19px;font-weight:600;letter-spacing:-0.02em;margin:0 0 3px}
h2{font-size:14px;font-weight:600;letter-spacing:-0.01em;margin:0 0 3px}
.sub{color:var(--muted);margin:0;font-size:12.5px;line-height:1.5}
.eyebrow{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;
  color:var(--faint);margin-bottom:5px}

/* ── the count strip, straight from the inbox header ────────────────────── */
.counts{display:flex;border-bottom:1px solid var(--line);background:var(--card)}
.counts div{flex:1;padding:9px 12px;border-right:1px solid var(--line);display:flex;
  flex-direction:column;gap:1px;align-items:flex-start}
.counts div:last-child{border-right:0}
.counts b{font-family:'IBM Plex Mono',monospace;font-size:16px;font-weight:500;letter-spacing:-0.02em}
.counts span{font-size:9.5px;text-transform:uppercase;letter-spacing:0.08em;color:var(--faint)}

/* ── list rows: 3px status bar, title, right-aligned mono, meta beneath ─── */
.row{padding:11px 14px 11px 12px;border-bottom:1px solid var(--hair);display:grid;
  grid-template-columns:3px 1fr auto;column-gap:10px;row-gap:4px;align-items:start}
.row:last-child{border-bottom:0}
.row .bar{width:3px;border-radius:2px;grid-row:1 / 3;align-self:stretch;background:var(--line-strong)}
.row .bar.on{background:var(--good-mid)}
.row .bar.off{background:var(--bad)}
.row .title{font-weight:500;font-size:13px;letter-spacing:-0.005em;line-height:1.35}
.row .when{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--faint);white-space:nowrap}
.row .meta{grid-column:2 / 4;font-size:10.5px;color:var(--faint);font-family:'IBM Plex Mono',monospace;
  display:flex;gap:6px;align-items:center;flex-wrap:wrap;word-break:break-all}

/* ── chips + pills ──────────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;padding:1px 6px;font-size:10px;font-weight:500;
  border-radius:4px;font-family:'IBM Plex Sans',sans-serif;letter-spacing:0}
.chip.on{background:var(--good-soft);color:var(--good)}
.chip.off{background:var(--bad-soft);color:var(--bad-deep)}
.chip.idle{background:var(--wash2);color:var(--muted)}

/* ── forms ──────────────────────────────────────────────────────────────── */
label{display:block;font-weight:500;font-size:12px;margin:14px 0 5px}
label:first-of-type{margin-top:0}
input[type=text],input[type=email],input[type=password],input[type=url]{
  width:100%;padding:9px 11px;border:1px solid var(--line-strong);border-radius:8px;
  font:inherit;font-size:13px;background:var(--card);color:var(--ink)}
input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
input::placeholder{color:var(--faint)}
.hint{color:var(--faint);font-size:11px;margin-top:5px;line-height:1.5}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--accent);
  color:#fff;border:0;border-radius:8px;padding:9px 15px;font:inherit;font-size:13px;font-weight:500;
  cursor:pointer;min-height:36px}
.btn:hover{opacity:.92;text-decoration:none}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.small{padding:6px 11px;min-height:30px;font-size:12px}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--line-strong)}
.btn.ghost:hover{background:var(--wash)}
.link{background:none;border:0;color:var(--accent);font:inherit;font-size:12px;cursor:pointer;padding:0}
.link.danger{color:var(--bad-deep)}

/* ── notes ──────────────────────────────────────────────────────────────── */
.note{border-radius:8px;padding:10px 12px;margin-bottom:12px;font-size:12.5px;line-height:1.5}
.note.bad{background:var(--bad-soft);color:var(--bad-deep)}
.note.good{background:var(--good-soft);color:var(--good)}
.note.warn{background:var(--warn-soft);color:var(--warn)}

/* ── the join code, the one thing a person retypes ──────────────────────── */
.code{font-family:'IBM Plex Mono',monospace;font-size:23px;font-weight:500;letter-spacing:0.10em;
  background:var(--wash);border:1px dashed var(--line-strong);border-radius:10px;
  padding:15px 10px;text-align:center;user-select:all;color:var(--ink)}
.qr{border:1px solid var(--line);border-radius:10px;background:#fff;padding:7px;display:block}

.split{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.split .grow{flex:1;min-width:210px}
.empty{color:var(--faint);padding:22px 14px;text-align:center;font-size:12.5px}
.steps{margin:0;padding-left:18px;color:var(--muted);font-size:12.5px;line-height:1.75}
.steps strong{color:var(--ink);font-weight:500}
.auth{max-width:380px;margin:6vh auto 0}

/* ── Download page ──────────────────────────────────────────────────────────
   ITS OWN CLASSES, because the first version borrowed .row and .note and got
   neither. .row is a 3-column GRID built for the instances list (bar, title,
   when, meta) — used for a two-ended build listing it stacked the halves and
   drew a second border under each. .note and .chip carry no base style at all;
   only their .bad/.good/.warn and .on/.off/.idle variants paint anything, so a
   plain one is an invisible box with padding. Same names, different meanings. */

.dl-pick{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 0;border-top:1px solid var(--hair)}
.dl-pick:first-child{border-top:0}
.dl-name{font-weight:500;font-size:13px;letter-spacing:-0.005em}
.dl-arch{color:var(--faint);font-size:11px}
.dl-size{font-family:'IBM Plex Mono',monospace;font-size:12px;white-space:nowrap}
.dl-sum{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--faint);
  word-break:break-all;margin-top:3px;line-height:1.45}

/* A neutral note. The variants above are for outcomes; this one is for context, so it reads as
   the page speaking rather than as something having gone right or wrong. */
.note.plain{background:var(--wash2);color:var(--muted)}

/* A term in a proposed agreement. Neutral like .chip.idle, but named for what it is so the two
   can diverge without one of them silently changing the other. */
.chip.term{background:var(--wash2);color:var(--muted)}

.dl-steps li{margin-bottom:9px}
.dl-steps li:last-child{margin-bottom:0}

/* Footer navigation. Spaced rather than separated by punctuation, so the set reads as links and
   not as a sentence with slashes in it. */
.foot-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:9px}

/* ── top-level navigation ───────────────────────────────────────────────────
   `.top nav` carries margin-left:auto, which is what pushes the account cluster
   right — and what silently swallowed the first attempt at a nav, since a second
   <nav> inherited it and landed in the same corner. The places sit beside the
   brand; only the account cluster is pushed. */
.top nav.mainnav{margin-left:4px;gap:16px}
.top nav.account{margin-left:auto}
.mainnav a{color:var(--muted);font-size:12.5px;font-weight:500;
  border-bottom:2px solid transparent;padding-bottom:2px}
.mainnav a:hover{color:var(--ink);text-decoration:none}
.mainnav a.on{color:var(--ink);border-bottom-color:var(--accent)}

/* On a phone the header cannot hold brand, places and account on one 52px line.
   Wrapped rather than truncated: a nav that hides its own items on the devices
   most likely to be a first visit is not a nav. */
@media (max-width:620px){
  .top{height:auto;flex-wrap:wrap;padding:8px 14px;gap:10px}
  .top nav.mainnav{order:3;width:100%;margin-left:0;gap:16px}
}

/* ── Accounts table ─────────────────────────────────────────────────────────
   The admin register. Plain table because it IS tabular — the site's .row grid
   is a three-column layout for instance cards and would misalign five columns. */

table.accounts { width: 100%; border-collapse: collapse; font-size: 13px; }
table.accounts th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-2, #6b7280);
  font-weight: 600;
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}
table.accounts td { padding: 9px 10px; border-bottom: 1px solid var(--divider, #f1f1f0); }
table.accounts tr:last-child td { border-bottom: none; }
table.accounts .num { text-align: right; font-variant-numeric: tabular-nums; }
table.accounts .mono { font-family: var(--mono, ui-monospace, monospace); font-size: 12px; }
table.accounts .muted { color: var(--text-2, #9ca3af); }

/* Approve is the routine act; revoke is the one worth a second's hesitation, so it is quiet until
   you are on it rather than shouting from every approved row. */
.btn-approve, .btn-revoke {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-approve { background: var(--accent, #2563eb); color: #fff; }
.btn-revoke {
  background: none;
  color: var(--text-2, #6b7280);
  border-color: var(--border, #e5e7eb);
  margin-left: 6px;
}
.btn-revoke:hover { color: var(--danger-text, #b91c1c); border-color: currentColor; }
form.inline { display: inline; }