/* hosty console — one stylesheet, no external requests (the CSP forbids them). */

/* Devon's value ramp (devon-design/final-brief.md §5): #111 primary text and
   primary buttons · #444 supporting text · #767676 secondary/meta · #D4D4D4
   borders and outlined pills · #F2F2F2 subtle fills, hover, chips, skeletons ·
   #FFF page. Borders and boxes, not shadows. Colour never carries meaning on
   its own — --danger only ever reinforces a word that already says it.

   Light only, deliberately: the environments view this console leads with is
   light, and a dark shell around a light page reads as two products. */
:root {
  --bg:#fff; --panel:#fff; --ink:#111; --muted:#767676; --line:#d4d4d4;
  --accent:#111; --accent-ink:#fff;
  --live:#444; --live-bg:#f2f2f2;
  --fail:#b3261e; --fail-bg:#f2f2f2;
  --warn:#444; --warn-bg:#f2f2f2;
  --idle:#767676; --idle-bg:#f2f2f2;
  --code:#f2f2f2; --danger:#b3261e;
  color-scheme: light;
}

* { box-sizing: border-box; box-shadow: none; }
:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font:14px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.wrap { max-width:1060px; margin:0 auto; padding:0 22px; }
.mono, code, pre { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
code { background:var(--code); padding:1px 5px; border-radius:5px; font-size:.88em; }
pre code { background:none; padding:0; }
a { color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
a:hover { text-decoration:none; }
.dim { color:var(--muted); font-weight:400; }
.right { text-align:right; white-space:nowrap; }
.mt { margin-top:18px; }

/* ---------------------------------------------------------------- topbar */
.topbar { background:var(--panel); border-bottom:1px solid var(--line); margin-bottom:26px; }
.bar { display:flex; align-items:center; gap:22px; height:56px; flex-wrap:wrap; }
.brand { font-weight:650; letter-spacing:-.01em; color:var(--ink); }
.brand .dim { font-weight:400; font-size:13px; margin-left:6px; }
.topbar nav { display:flex; gap:18px; font-size:14px; }
/* Navigation and identity are structure, not prose: no underlines until hover. */
.brand, .topbar nav a, .who > a, .btn, .toc a { text-decoration:none; }
.brand:hover, .topbar nav a:hover, .who > a:hover, .toc a:hover { text-decoration:underline; }
.topbar nav a { color:var(--muted); padding:4px 0; border-bottom:2px solid transparent; }
.topbar nav a.on { color:var(--ink); border-bottom-color:var(--accent); }
.who { margin-left:auto; display:flex; align-items:center; gap:14px; font-size:14px; }
.who > a { color:var(--ink); display:flex; align-items:center; gap:7px; }

/* ----------------------------------------------------------------- pages */
.pagehead {
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
  flex-wrap:wrap; padding-bottom:16px; margin-bottom:20px; border-bottom:1px solid var(--line);
}
h1 { margin:0 0 4px; font-size:25px; letter-spacing:-.02em; }
h2 { margin:0 0 8px; font-size:16px; letter-spacing:-.01em; }
.sub { color:var(--muted); font-size:14px; margin:0; }
.crumb { color:var(--muted); font-size:13px; margin:0 0 4px; }
.stats { display:flex; gap:22px; }
.stat { text-align:right; }
.stat b { display:block; font-size:23px; line-height:1.1; font-variant-numeric:tabular-nums; }
.stat span { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.07em; }

.card {
  background:var(--panel); border:1px solid var(--line); border-radius:6px;
  margin-bottom:16px; overflow:hidden;
}
.card.pad { padding:18px 20px; }
.card.pad h2 + p, .card.pad p + p { margin-top:10px; }
.card.pad p { margin:0 0 2px; }
.cardhead {
  margin:0; padding:14px 18px; display:flex; align-items:baseline; gap:12px;
  flex-wrap:wrap; font-size:20px; border-bottom:1px solid var(--line);
}
.card.pad > .cardhead { margin:-18px -20px 14px; }
.cardhead .meta {
  margin-left:auto; color:var(--muted); font-size:12.5px; font-weight:400;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.card.empty { padding:26px 20px; }
.card.danger { border-color:color-mix(in srgb, var(--danger) 35%, var(--line)); }
.cols { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:16px; align-items:start; }
.stack > .card:last-child { margin-bottom:16px; }
@media (max-width:860px) { .cols { grid-template-columns:1fr; } }

/* ---------------------------------------------------------------- tables */
table { width:100%; border-collapse:collapse; }
th {
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted); font-weight:600; padding:9px 18px; border-bottom:1px solid var(--line);
}
td { padding:11px 18px; border-bottom:1px solid var(--line); vertical-align:middle; font-size:13.5px; }
tbody tr:last-child td { border-bottom:0; }
.card.pad table th:first-child, .card.pad table td:first-child { padding-left:0; }
.card.pad table th:last-child, .card.pad table td:last-child { padding-right:0; }
table.kv td { border-bottom:0; padding:5px 14px 5px 0; }
table.kv td:first-child { color:var(--muted); white-space:nowrap; }
table.kv.wide td:first-child { width:190px; }
.slug { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13px; }
.empty-row { padding:20px 18px; color:var(--muted); font-size:13.5px; margin:0; }
.card.pad .empty-row { padding:14px 0 0; }
.logrow td { padding-top:0; }

/* ----------------------------------------------------------------- pills */
/* Outlined, never colour-coded: the word inside is the whole signal. */
.pill {
  display:inline-block; padding:2px 8px; border-radius:999px;
  border:1px solid var(--line); font-size:11px; font-weight:500; color:var(--muted);
}
.pill.live { color:var(--live); background:var(--live-bg); }
.pill.failed { color:var(--fail); background:var(--fail-bg); }
.pill.other { color:var(--idle); background:var(--idle-bg); }
.role {
  display:inline-block; padding:1.5px 7px; border-radius:5px;
  font-size:11px; font-weight:600; text-transform:lowercase;
  background:var(--idle-bg); color:var(--idle);
}
/* A role is a word. It does not need a colour to say it again. */
.role.admin, .role.deployer { background:var(--idle-bg); color:var(--ink); }
.lock { color:var(--muted); font-size:11.5px; }

/* --------------------------------------------------------------- banners */
.banner {
  padding:11px 15px; border-radius:10px; font-size:14px; margin-bottom:16px;
  border:1px solid transparent;
}
.banner.ok { background:var(--live-bg); color:var(--live); border-color:color-mix(in srgb, var(--live) 25%, transparent); }
.banner.err { background:var(--fail-bg); color:var(--fail); border-color:color-mix(in srgb, var(--fail) 25%, transparent); }
.banner.warn { background:var(--warn-bg); color:var(--warn); border-color:color-mix(in srgb, var(--warn) 25%, transparent); }

/* --------------------------------------------------------------- buttons */
.btn {
  display:inline-block; padding:6px 12px; border-radius:6px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); font:inherit; font-size:13.5px;
  cursor:pointer; text-decoration:none; line-height:1.3;
}
.btn:hover { border-color:var(--accent); text-decoration:none; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.btn.primary:hover { filter:brightness(1.08); }
.btn.small { padding:4px 9px; font-size:12.5px; }
.btn.danger { color:var(--danger); border-color:color-mix(in srgb, var(--danger) 35%, var(--line)); }
.btn.danger:hover { background:var(--fail-bg); border-color:var(--danger); }
button.link {
  background:none; border:0; color:var(--muted); font:inherit; font-size:14px;
  cursor:pointer; padding:0;
}
button.link:hover { color:var(--ink); text-decoration:underline; }
form.inline { display:inline; }
.inline-form { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:14px; }
.actions { display:flex; gap:10px; align-items:center; }

/* ----------------------------------------------------------------- forms */
.rows { display:flex; flex-direction:column; gap:12px; margin-top:14px; align-items:flex-start; }
.rows.wide { gap:16px; }
.rows label, .grid2 label { display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--muted); width:100%; }
.rows button { align-self:flex-start; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; width:100%; }
@media (max-width:700px) { .grid2 { grid-template-columns:1fr; } }
input, select {
  font:inherit; font-size:14px; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:6px; padding:7px 10px; width:100%; max-width:460px;
}
input:focus, select:focus { outline:2px solid var(--accent); outline-offset:-1px; border-color:var(--accent); }
.inline-form input { width:auto; }
.hint { font-size:12px; color:var(--muted); font-weight:400; }

/* --------------------------------------------- runtime-aware project form */
/* The project form shows only the field groups that apply to the selected
   runtime. CSS-only (:has) because the CSP allows no inline script; a browser
   without :has simply shows every group, which still submits correctly. */
form:has(select[name="runtime"] option[value="auto"]:checked)   .rt:not(.rt-auto),
form:has(select[name="runtime"] option[value="go"]:checked)     .rt:not(.rt-go),
form:has(select[name="runtime"] option[value="node"]:checked)   .rt:not(.rt-node),
form:has(select[name="runtime"] option[value="python"]:checked) .rt:not(.rt-python),
form:has(select[name="runtime"] option[value="static"]:checked) .rt:not(.rt-static),
form:has(select[name="runtime"] option[value="custom"]:checked) .rt:not(.rt-custom) { display:none; }

/* ------------------------------------------------------------------ code */
pre.code, pre.log {
  background:var(--code); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; overflow-x:auto; font-size:12.5px; line-height:1.5;
  white-space:pre; margin:10px 0;
}
pre.log { max-height:340px; overflow-y:auto; white-space:pre-wrap; word-break:break-word; }
pre.log.tall { max-height:520px; }
pre.code.copy { position:relative; padding-right:76px; }
.copybtn {
  position:absolute; top:7px; right:7px; padding:3px 9px; font-size:11.5px;
  border:1px solid var(--line); border-radius:7px; background:var(--panel);
  color:var(--muted); cursor:pointer; font-family:inherit;
}
.copybtn:hover { color:var(--ink); border-color:var(--accent); }
.card.secret { border-color:var(--accent); }

/* ----------------------------------------------------------------- setup */
.toc { display:flex; flex-wrap:wrap; gap:14px; font-size:13.5px; margin-bottom:18px; }
.toc a { color:var(--muted); }
.toc a:hover { color:var(--accent); }
.facts, .steps, .downloads { margin:10px 0 0; padding-left:20px; }
.facts li, .steps li, .downloads li { margin-bottom:9px; font-size:14px; }
.steps li { margin-bottom:16px; }
.faq { margin:12px 0 0; }
.faq dt { font-weight:600; margin-top:14px; font-size:14px; }
.faq dd { margin:4px 0 0; color:var(--muted); font-size:14px; }
.ok-note { color:var(--live); font-size:14px; }
details summary { cursor:pointer; color:var(--accent); font-size:13.5px; margin-top:8px; }
details[open] summary { margin-bottom:6px; }

/* ---------------------------------------------------------------- signin */
.signin { max-width:400px; margin:8vh auto 0; }
.signin h1 { font-size:27px; }

/* ---------------------------------------------------------------- footer */
.foot {
  margin:30px auto 40px; color:var(--muted); font-size:12.5px;
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}

/* -------------------------------------------------------------- narrow */
@media (max-width:760px) {
  thead { display:none; }
  td { display:flex; justify-content:space-between; gap:14px; padding:7px 16px; border:0; }
  td::before {
    content:attr(data-l); color:var(--muted); font-size:11.5px;
    text-transform:uppercase; letter-spacing:.06em;
  }
  td:empty, td[data-l=""]::before { content:none; }
  tbody tr { display:block; padding:10px 0; border-bottom:1px solid var(--line); }
  table.kv td { display:table-cell; }
  table.kv td::before { content:none; }
  .who { margin-left:0; }
}

/* A select plus its submit button, sitting on one line inside a table cell. */
.inline-form.tight { margin-top:0; gap:6px; flex-wrap:nowrap; }
.inline-form.tight select { width:auto; padding:4px 8px; font-size:13px; }

/* The device-login code. It exists to be read off one screen and compared with
   another, so it is set as large and as unambiguous as the page allows: wide
   letter-spacing, tabular figures, and no ligatures to blur one glyph into the
   next. */
.big-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 34px; font-weight: 600; letter-spacing: .16em;
  font-variant-ligatures: none; font-variant-numeric: tabular-nums;
  margin: 18px 0 6px; text-align: center; color: var(--fg);
}
@media (max-width:760px) { .big-code { font-size:26px; letter-spacing:.1em; } }

/* Deleting a project is one disclosure inside its card, not a trip to the
   settings form. Closed by default: it is destructive, not routine. */
.danger-disclosure { border-top:1px solid var(--line); margin-top:14px; padding-top:10px; }
.danger-disclosure summary { cursor:pointer; color:var(--danger); }
.danger-disclosure[open] summary { margin-bottom:6px; }