:root { color-scheme: dark; --bg:#0d1014; --panel:#141920; --panel2:#1a2029; --line:#303a48; --fg:#e6ebf2; --mut:#a1adbd; --acc:#9ab2ff; --warn:#f5bc64; --bad:#ffabb4; }
* { box-sizing:border-box; }
body { margin:0; font:15px/1.6 "Segoe UI",system-ui,sans-serif; background:var(--bg); color:var(--fg); }
a { color:var(--acc); }
button { font:inherit; color:var(--fg); border:1px solid var(--line); background:var(--panel2); border-radius:6px; padding:8px 13px; cursor:pointer; }
button:hover:not(:disabled) { border-color:var(--acc); }
button:disabled { color:var(--mut); cursor:not-allowed; }
:focus-visible { outline:2px solid var(--acc); outline-offset:4px; }
[hidden] { display:none !important; }
.skip { position:absolute; left:12px; top:-80px; z-index:2; background:var(--panel2); padding:10px; }
.skip:focus { top:10px; }
.app { display:grid; grid-template-columns:224px minmax(0,1fr); min-height:100vh; }
aside { display:flex; flex-direction:column; padding:24px 16px; background:var(--panel); border-right:1px solid var(--line); }
.brand { display:flex; align-items:center; gap:10px; font-size:19px; font-weight:700; padding:0 10px 30px; }
.mark { width:12px; height:12px; border-radius:3px; background:var(--acc); }
.nav-label,.eyebrow { color:var(--mut); font-size:12px; text-transform:uppercase; letter-spacing:.08em; }
.nav-label { margin:0 10px 10px; }
nav { display:grid; gap:5px; }
nav a { padding:9px 12px; border-radius:6px; text-decoration:none; color:var(--mut); }
nav a:hover { background:var(--panel2); color:var(--fg); }
nav a[aria-current="page"] { background:var(--panel2); color:var(--fg); box-shadow:inset 2px 0 var(--acc); }
.later { border-top:1px solid var(--line); padding-top:24px; margin-top:26px; }
ul { list-style:none; padding:0 12px; margin:0; color:var(--mut); }
li { padding:7px 0; }
.foot { margin-top:auto; padding:32px 10px 0; color:var(--mut); font-size:12px; }
main { width:100%; max-width:1280px; padding:32px 38px; }
header { display:flex; justify-content:space-between; align-items:center; gap:20px; }
h1 { font-size:29px; line-height:1.2; margin:4px 0 24px; font-weight:600; }
h2 { font-size:19px; margin:8px 0; font-weight:600; }
p { margin:8px 0 14px; }
.badge,.tag { display:inline-block; border:1px solid var(--line); border-radius:20px; padding:3px 10px; font-size:12px; color:var(--mut); }
.badge { white-space:nowrap; }
.scope { padding:12px 15px; border:1px dashed var(--line); border-radius:6px; color:var(--mut); font-size:13px; }
.statusbar { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:23px 0; }
.statusbar p { margin:0; color:var(--mut); }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:24px; }
.card p { color:var(--mut); }
.empty-icon { font-size:34px; color:var(--mut); margin:18px 0; }
.text-link { display:inline-block; margin-top:7px; }
.gate { margin-top:22px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-left:3px solid var(--warn); }
.gate h2 { color:var(--warn); font-size:17px; }
.gate p { margin:4px 0; }
.gate button { flex-shrink:0; }
code { display:block; color:var(--mut); font-size:11px; overflow-wrap:anywhere; margin-top:10px; }
.muted,footer { font-size:12px; color:var(--mut); }
footer { margin-top:28px; }
.failure { padding:20px; border:1px solid var(--bad); border-radius:8px; background:#291c25; color:var(--bad); }
.tasks-empty { min-height:240px; }
@media(max-width:850px) { .app { grid-template-columns:180px minmax(0,1fr); } main { padding:24px; } .grid { grid-template-columns:1fr; } header { align-items:flex-start; flex-direction:column; gap:0; } header .badge { margin-bottom:16px; } .gate { align-items:flex-start; flex-direction:column; } }
@media(max-width:560px) { .app { display:block; } aside { padding:16px; border-right:0; border-bottom:1px solid var(--line); } .brand { padding-bottom:14px; } nav { grid-template-columns:1fr 1fr; } .later,.foot,aside>.nav-label { display:none; } main { padding:22px 16px; } .card { padding:18px; } .statusbar { align-items:flex-start; } }

.state-row { display:flex; align-items:center; gap:10px; margin:14px 0 4px; }
.dot { width:11px; height:11px; border-radius:50%; background:var(--mut); flex-shrink:0; }
[data-state="online"] .dot { background:#6fdc9a; }
[data-state="offline"] .dot { background:var(--warn); }
[data-state="error"] .dot { background:var(--bad); }
.facts { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:4px 14px; margin:12px 0 16px; font-size:13px; }
.facts dt { color:var(--mut); }
.facts dd { margin:0; overflow-wrap:anywhere; }
.gate[data-open="true"] { border-left-color:#6fdc9a; }
.gate[data-open="true"] h2 { color:#6fdc9a; }
.runs { list-style:none; padding:0; margin:12px 0 0; display:grid; gap:12px; }
.run { border:1px solid var(--line); border-radius:6px; padding:12px 14px; background:var(--panel2); }
.run-failed { border-color:var(--bad); }
.run-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.run pre { margin:10px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; font-size:12px; color:var(--fg); }
.nodes { list-style:none; padding:0; margin:18px 0 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
.nodes .card { margin:0; }
.gate-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
select { font:inherit; color:var(--fg); background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:7px 10px; }
select:disabled { opacity:.5; }
.header-actions { display:flex; align-items:center; gap:12px; }
.login { max-width:420px; margin-top:22px; }
.login form { display:grid; gap:10px; margin-top:14px; }
.login label { color:var(--mut); font-size:13px; }
.login input { font:inherit; color:var(--fg); background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:9px 11px; }
.login input:focus-visible { outline:2px solid #8fb4ff; outline-offset:1px; }
.login button { justify-self:start; }
.login-error { color:var(--bad); margin:0; }
p code, li code { display:inline; white-space:nowrap; margin:0; font-size:12px; color:var(--fg); }

/* Opt-in Hermes runs: keep form fields and IDs readable at narrow widths. */
#hermes-runs { margin-bottom:18px; }
#run-form { display:grid; gap:9px; max-width:620px; margin-top:18px; }
#run-form label { color:var(--mut); font-size:13px; }
#run-form select, #run-form textarea { width:100%; min-width:0; }
#run-form textarea { min-height:90px; resize:vertical; font:inherit; color:var(--fg); background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:9px 11px; }
#run-form button { justify-self:start; }
#run-list { padding:0; margin:14px 0 0; display:grid; gap:8px; }
#run-list li { display:flex; gap:9px; flex-wrap:wrap; align-items:center; border-top:1px solid var(--line); }
#run-list li span { flex:1 1 100%; overflow-wrap:anywhere; }

.projects { list-style:none; padding:0; margin:0; display:grid; gap:16px; }
.project-head { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.project-head h2 { margin:0; }
.project-title { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.rename-form { display:flex; align-items:end; gap:10px; flex-wrap:wrap; margin-top:12px; }
.rename-form[hidden] { display:none; }
.rename-form label { display:grid; gap:4px; color:var(--mut); font-size:13px; }
.rename-form input { font:inherit; color:var(--fg); background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:8px 10px; }
.folders { list-style:none; padding:0; margin:12px 0 0; display:grid; gap:10px; }
.folder { border-left:3px solid var(--line); padding:6px 0 6px 12px; }
.folder p { margin:4px 0 0; font-size:13px; }
.folder button { margin-top:8px; }
.folder-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.folder[data-state="ren"] { border-left-color:#6fdc9a; }
.folder[data-state="ændret"] { border-left-color:var(--warn); }
.folder[data-state="ikke-git"], .folder[data-state="ukendt"] { border-left-color:var(--bad); }
.pill { font-size:12px; border:1px solid var(--line); border-radius:20px; padding:1px 9px; color:var(--fg); }
code.path { display:inline; margin:0; font-size:12px; color:var(--fg); overflow-wrap:anywhere; }
#inbox-card, #ignored-card { margin-top:22px; }
.inbox { list-style:none; padding:0; margin:12px 0 0; display:grid; gap:10px; }
.inbox-item { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:10px 0; border-top:1px solid var(--line); }
.inbox-item code.path { margin-left:10px; }
.inbox-actions { display:flex; gap:8px; flex-wrap:wrap; }
button.quiet { background:transparent; }
#projects-scans { font-size:13px; margin:-12px 0 18px; }
.project-filter { display:grid; gap:6px; max-width:420px; margin:0 0 18px; color:var(--mut); font-size:13px; }
.project-filter input { font:inherit; color:var(--fg); background:var(--panel2); border:1px solid var(--line); border-radius:6px; padding:9px 11px; }
#projects-filter-empty { margin:0 0 18px; }