:root {
  --bg: #fafaf8; --panel: #ffffff; --ink: #1c1c1a; --muted: #6b6b66; --line: #deded8;
  --accent: #2f5fd0; --ok: #2d7a3e; --warn: #a15c00; --bad: #b3261e;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #151514; --panel: #1e1e1c; --ink: #ecebe6; --muted: #9a9992; --line: #34342f;
          --accent: #7ba2ff; --ok: #6cc17e; --warn: #e0a24a; --bad: #ff8a80; }
}
* { box-sizing: border-box; }
body { margin: 0; display: grid; grid-template-columns: 250px 1fr; min-height: 100vh;
       background: var(--bg); color: var(--ink); font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; }
aside { border-right: 1px solid var(--line); padding: 20px 14px; background: var(--panel); }
aside h1 { font-size: 16px; margin: 0 8px 18px; }
.group { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 16px 8px 4px; }
nav button { display: flex; width: 100%; justify-content: space-between; align-items: center; text-align: left;
             background: none; border: 0; color: var(--ink); padding: 7px 8px; border-radius: 6px; font: inherit; cursor: pointer; }
nav button:hover { background: var(--bg); }
nav button.active { background: var(--bg); font-weight: 600; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
.dot.ready { background: var(--ok); } .dot.incomplete { background: var(--warn); }
main { padding: 28px 36px 80px; max-width: 760px; }
h2 { margin: 0 0 4px; font-size: 22px; }
.muted { color: var(--muted); }
.field { margin: 18px 0; }
.field > label { display: block; font-weight: 600; margin-bottom: 4px; }
.field .help { color: var(--muted); font-size: 13px; margin-top: 4px; }
.req { color: var(--bad); }
input[type=text], input[type=password], select, textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); color: var(--ink); font: inherit; }
textarea { min-height: 80px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.row { display: flex; gap: 8px; }
button.btn { padding: 8px 14px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel);
             color: var(--ink); font: inherit; cursor: pointer; white-space: nowrap; }
button.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.btn:disabled { opacity: .5; cursor: default; }
.status { font-size: 13px; margin-top: 4px; }
.status.ok { color: var(--ok); } .status.warn { color: var(--warn); } .status.bad { color: var(--bad); }
.error { color: var(--bad); font-size: 13px; margin-top: 4px; }
.bar { position: sticky; bottom: 0; background: var(--bg); padding: 14px 0; border-top: 1px solid var(--line); margin-top: 28px; }
.saved { color: var(--ok); margin-left: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
td, th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
td.mono { font-family: ui-monospace, Menlo, monospace; word-break: break-all; }
@media (max-width: 720px) { body { grid-template-columns: 1fr; } aside { border-right: 0; border-bottom: 1px solid var(--line); } main { padding: 20px 16px 80px; } }

.lead { font-size: 16px; margin: 0 0 12px; }
main p.muted { max-width: 68ch; }
.field > label { margin-bottom: 2px; }
.field .help { margin: 0 0 6px; max-width: 68ch; font-size: 14px; }
.example { color: var(--muted); font-size: 13px; margin-top: 4px; }
.mono { font-family: ui-monospace, Menlo, monospace; }
.preview { margin-top: 4px; font-size: 13px; color: var(--ok); }
.callout { border-left: 3px solid var(--warn); background: var(--panel); padding: 8px 12px; margin: 10px 0; border-radius: 0 6px 6px 0; font-size: 14px; max-width: 68ch; }
.callout.small { font-size: 13px; margin: 6px 0; }
details.steps { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 8px 0 12px; background: var(--panel); max-width: 68ch; }
details.steps summary { cursor: pointer; font-weight: 600; font-size: 14px; }
details.steps ol { margin: 8px 0 2px; padding-left: 20px; }
details.steps li { margin: 6px 0; font-size: 14px; }
table.glossary { margin: 10px 0 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; max-width: 68ch; }
table.glossary td:first-child { white-space: nowrap; word-break: normal; }

.connection { border: 1px solid var(--line); border-radius: 8px; padding: 4px 16px 14px; margin: 26px 0 8px; background: var(--panel); max-width: 68ch; }
.connection h3 { margin: 12px 0 2px; font-size: 15px; }
.small { font-size: 13px; }
.result { margin: 12px 0 4px; padding: 8px 12px; border-radius: 6px; border-left: 3px solid var(--line); }
.result.ok { border-color: var(--ok); } .result.ok strong { color: var(--ok); }
.result.warn { border-color: var(--warn); } .result.warn strong { color: var(--warn); }
.result.fail { border-color: var(--bad); } .result.fail strong { color: var(--bad); }
ul.details { margin: 6px 0; padding-left: 20px; font-size: 14px; }

/* Waiting on you, and the activity log */
.count { min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--warn); color: #fff; font-size: 12px; text-align: center; }
.count:empty { display: none; }
button.link { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-align: left; }
button.link:hover { text-decoration: underline; }
.connection .row { align-items: center; flex-wrap: wrap; margin-top: 8px; }
.connection .row input[type=text] { flex: 1 1 200px; width: auto; }
table.activity td.undo { width: 1%; white-space: nowrap; }
table.activity td.undo details.steps { white-space: normal; min-width: 260px; margin: 0; }
table.activity tr.undone td:nth-child(2) { color: var(--muted); text-decoration: line-through; }

/* Editing a release */
details.connection.edit > summary { cursor: pointer; padding: 10px 0 4px; list-style-position: outside; }
fieldset.track { border: 1px solid var(--line); border-radius: 8px; margin: 14px 0; padding: 4px 12px 12px; }
fieldset.track legend { font-weight: 600; font-size: 14px; padding: 0 4px; }
.connection .row .field { flex: 1 1 140px; margin: 8px 0; }
label.check { display: flex; align-items: center; gap: 6px; font-size: 14px; }
input[type=number] { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; }
.connection .row .field input, .connection .row .field select { width: 100%; flex: none; }
tr.diff td { color: var(--warn); }

/* Pop-ups drawn in the page (the desktop window) */
dialog.popup { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); max-width: 52ch; padding: 16px 18px; }
dialog.popup::backdrop { background: rgba(0, 0, 0, .35); }
dialog.popup p { margin: 0 0 14px; white-space: pre-line; }
dialog.popup .row { justify-content: flex-end; }

/* The website's own pages */
body.form-page { display: block; }
body.form-page main { margin: 0 auto; }
.placeholder { border: 1px dashed var(--line); border-radius: 8px; padding: 10px 16px; color: var(--muted); max-width: 68ch; }
.signin { max-width: 380px; }
.code { font-family: ui-monospace, Menlo, monospace; font-size: 26px; letter-spacing: .12em; margin: 8px 0; }
.thumb { width: 48px; height: 48px; border-radius: 4px; object-fit: cover; background: var(--line); }
.thumb.none { display: inline-block; }
.fp { font-family: ui-monospace, Menlo, monospace; }
fieldset.track .row input { flex: 1 1 140px; }