/* The hub and the Tracker. The same sky, colours and type as the Foundry page (sky.css), written
   on their own so the Foundry's layout rules do not leak in. Speed first: no blur, no heavy shadow. */
:root {
  color-scheme: dark;
  --bg: #070A12; --panel: #0C1220; --panel-2: #0A0F1B; --line: rgba(255,255,255,0.09); --line-2: rgba(255,255,255,0.14);
  --text: #E6ECF5; --text-2: #B7C2D6; --muted: #93A0B8; --soft: #D5DDEA;
  --cyan: #7FD6EA; --link: #9FDDEB; --amber: #F3C26B; --red: #F07A7A; --green: #7ED3A1; --warm: #F7EBC8; --lilac: #B39DF5; --on-accent: #07131A;
  /* The same colours as numbers, for see-through tints, and the few that are not one of the above. */
  --ink: 255,255,255; --cyan-rgb: 127,214,234; --amber-rgb: 243,194,107; --warm-rgb: 247,235,200; --red-rgb: 240,122,122; --lilac-rgb: 179,157,245; --green-rgb: 126,211,161;
  --top: rgba(7,10,18,0.92); --toast: #141B2C; --link-hover: #D3F1F8; --cyan-hover: #9ADFEF; --lilac-2: #C9BBF8; --on-avatar: #07131A; --field: rgba(255,255,255,0.03); --lift: none;
  --display: "Space Grotesk", Inter, system-ui, sans-serif; --mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--text); font: 14px/20px Inter, system-ui, sans-serif; }
[hidden] { display: none !important; }
a { color: var(--link); } a:hover { color: var(--link-hover); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.mono { font-family: var(--mono); font-size: 12px; }
.muted { color: var(--muted); } .small { font-size: 13px; }
.cap { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.grow { flex: 1 1 0; min-width: 0; }
.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.btn { min-height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); background: none; cursor: pointer; }
.btn:hover { background: rgba(var(--ink),0.05); }
.btn.primary { border: 0; background: var(--cyan); color: var(--on-accent); font-weight: 600; }
.btn.primary:hover { background: var(--cyan-hover); }
.btn.small { min-height: 32px; padding: 0 10px; font-size: 13px; }
.btn.ghost { border-color: transparent; color: var(--text-2); }
.btn.danger { color: var(--red); }
.btn[aria-pressed="true"] { background: rgba(var(--cyan-rgb),0.12); border-color: rgba(var(--cyan-rgb),0.4); }
kbd { font-family: var(--mono); font-size: 11px; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--line-2); color: var(--text-2); }
.btn.primary kbd { border-color: color-mix(in srgb, var(--on-accent) 40%, transparent); color: var(--on-accent); }
input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="search"], select, textarea {
  min-height: 40px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--field); width: 100%; }
select { background: var(--panel); }
textarea { resize: vertical; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
label.inline { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 14px; min-height: 40px; }
label.inline input { width: auto; min-height: 0; }

/* Sign in */
.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.card { width: min(380px, 100%); padding: 28px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); display: grid; gap: 12px; }
.card .brand { font-family: var(--display); font-weight: 600; font-size: 22px; margin: 0; }
.mark { width: 14px; height: 14px; border-radius: 50%; flex: none; --c: var(--warm); background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
.mark.big { width: 36px; height: 36px; justify-self: center; box-shadow: 0 0 0 8px color-mix(in srgb, var(--c) 14%, transparent), 0 0 30px color-mix(in srgb, var(--c) 50%, transparent); }
.error { color: var(--red); min-height: 1.4em; margin: 0; }
.chat-note { margin: 0; padding: 8px 10px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(var(--amber-rgb),0.4); color: var(--text-2); }
.login-links { display: flex; gap: 14px; flex-wrap: wrap; margin: 0; }
button.link { background: none; border: 0; padding: 0; color: var(--text-2); text-decoration: underline; cursor: pointer; font-size: 13px; }
.add { display: grid; gap: 10px; }
#no-team { display: grid; gap: 10px; }

/* The top menu, the same on every page */
.hub-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; padding: 8px 24px; border-bottom: 1px solid var(--line); background: var(--top); position: sticky; top: 0; z-index: 10; }
.hub-top .home { display: flex; align-items: center; gap: 10px; min-height: 40px; text-decoration: none; color: var(--text); font-family: var(--display); font-weight: 600; font-size: 17px; }
.hub-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.hub-nav a, .hub-nav span { padding: 10px 14px; border-radius: 10px; text-decoration: none; color: var(--text-2); }
.hub-nav a:hover { background: rgba(var(--ink),0.05); color: var(--text); }
.hub-nav a[aria-current="page"] { color: var(--text); background: rgba(var(--ink),0.08); font-weight: 500; }
.hub-nav span { color: var(--muted); cursor: default; }
.hub-nav sup { font-size: 10px; color: var(--muted); margin-left: 4px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 13px; color: var(--on-avatar); background: var(--c, var(--cyan)); flex: none; }
.avatar.sm { width: 22px; height: 22px; font-size: 11px; }
.avatar.none { background: none; border: 1px dashed var(--muted); }
.team-logo { height: 28px; max-width: 120px; object-fit: contain; border-radius: 6px; }
.plan-banner { font-size: 12px; padding: 3px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--red); color: var(--red); }
.plan-banner.warn { box-shadow: inset 0 0 0 1px rgba(var(--amber-rgb),0.5); color: var(--text-2); }

.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 50; display: grid; gap: 8px; }
.toast { padding: 10px 14px; border-radius: 10px; background: var(--toast); border: 1px solid var(--line-2); max-width: 46ch; }
.toast.error { border-color: var(--red); }

/* Symbols: one star per job state, the same everywhere */
.star { position: relative; flex: none; width: 22px; height: 22px; display: grid; place-items: center; }
.star i { width: 10px; height: 10px; border-radius: 50%; }
.star.draft i { border: 1.5px solid var(--muted); }
.star.review i { border: 1.5px solid var(--amber); }
.star.ready i { background: var(--cyan); }
.star.landed i { background: var(--green); }
.star.foundry i { background: var(--warm); }
.star.foundry::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed var(--amber); animation: spin 5s linear infinite; }
.star.foundry.asks i { background: var(--amber); } .star.foundry.asks::before, .star.foundry.still::before { animation: none; }
.stars { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.stars i { width: 8px; height: 8px; border-radius: 50%; }
.stars i.landed { background: var(--green); } .stars i.foundry { background: var(--warm); box-shadow: 0 0 0 3px rgba(var(--warm-rgb),0.18); } .stars i.waiting { width: 7px; height: 7px; border: 1.5px solid var(--muted); }
.stars.big { gap: 12px; } .stars.big i { width: 14px; height: 14px; } .stars.big i.waiting { width: 11px; height: 11px; }
.prio { flex: none; font-size: 12px; font-weight: 600; min-width: 20px; }
.prio.p1 { color: var(--red); } .prio.p2 { color: var(--amber); } .prio.p3 { color: var(--text-2); } .prio.p4, .prio.none { color: var(--muted); font-weight: 400; }
.tag { flex: none; font-size: 12px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); white-space: nowrap; }
.tag.warm { border-color: rgba(var(--warm-rgb),0.4); color: var(--warm); } .tag.cyan { border-color: rgba(var(--cyan-rgb),0.4); color: var(--link); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes breathe { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* ── The dashboard ── */
.dash { width: 100%; max-width: 1300px; margin: 0 auto; padding: 28px 24px 48px; display: grid; gap: 20px; }
.hello { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; }
.hello h1 { font-size: 30px; line-height: 36px; }
.hello p { margin: 0; color: var(--text-2); font-size: 15px; }
.dash-top { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.system { position: relative; flex: 999 1 620px; min-width: 0; min-height: 440px; padding: 28px 24px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel-2); overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.system .orbit { position: absolute; left: 50%; top: 50%; border-radius: 50%; border: 1px solid rgba(var(--ink),0.06); transform: translate(-50%, -50%); pointer-events: none; }
.system .dot { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--muted); }
.bodies { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px 16px; align-items: center; }
.body { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; text-decoration: none; color: var(--text); text-align: center; }
a.body:hover { background: rgba(var(--ink),0.03); color: var(--text); }
.body .planet { width: 72px; height: 72px; border-radius: 50%; border: 1.5px solid var(--c); display: grid; place-items: center; background: var(--panel-2); }
.body .planet i { width: 30px; height: 30px; border-radius: 50%; background: var(--c); box-shadow: 0 0 20px color-mix(in srgb, var(--c) 45%, transparent); }
.body .sun { position: relative; width: 148px; height: 148px; display: grid; place-items: center; }
.body .sun::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed var(--amber); animation: spin 14s linear infinite; }
.body .sun img { width: 128px; height: 128px; object-fit: contain; }
.body .sun.quiet::before { animation: none; border-color: rgba(var(--amber-rgb),0.4); }
.body h2 { font-size: 20px; line-height: 26px; } .body.to-foundry h2 { font-size: 24px; line-height: 30px; color: var(--warm); }
.body .nums { color: var(--text-2); } .body .nums b { color: var(--text); font-weight: 600; } .body .nums b.warn { color: var(--amber); } .body .nums b.warm { color: var(--warm); }
.body .go { display: grid; place-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); color: var(--c2, var(--c)); font-weight: 500; }
.body.to-foundry .go { border: 0; background: var(--warm); color: var(--on-accent); font-weight: 600; padding: 0 20px; }
.body.soon { opacity: 0.75; } .body.soon .go { border-style: dashed; color: var(--muted); }

.needs { flex: 1 1 320px; min-width: 0; padding: 20px; border-radius: 20px; border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; gap: 10px; }
.needs.some { border-color: rgba(var(--amber-rgb),0.3); }
.needs h2 { font-size: 16px; line-height: 22px; display: flex; align-items: center; gap: 8px; }
.count { padding: 0 8px; border-radius: 999px; background: var(--amber); color: var(--on-accent); font-size: 13px; font-family: Inter, sans-serif; }
.need { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; background: rgba(var(--ink),0.04); text-decoration: none; color: var(--text); }
.need:hover { background: rgba(var(--ink),0.07); color: var(--text); }
.need .label { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--c); }
.need.from-foundry { --c: var(--warm); } .need.from-tracker { --c: var(--cyan); } .need.from-wiki { --c: var(--lilac-2); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.tile { display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); text-decoration: none; color: var(--text); min-height: 170px; }
a.tile:hover { border-color: var(--line-2); color: var(--text); }
.tile .big { display: flex; align-items: baseline; gap: 8px; color: var(--text-2); }
.tile .big b { font: 600 40px/44px var(--display); color: var(--c, var(--text)); }
.bars { display: flex; align-items: flex-end; gap: 8px; height: 48px; }
.bars i { flex: 1 1 0; min-height: 3px; border-radius: 4px 4px 0 0; background: rgba(var(--green-rgb),0.45); }
.bars i.today { background: var(--green); }
.bar-labels { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.machines { display: grid; gap: 8px; font-size: 13px; }
.machines div { display: flex; align-items: center; gap: 8px; }
.machines i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; } .machines .off i { background: none; border: 1.5px solid var(--muted); } .machines .off { color: var(--muted); }
.feed { padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); display: grid; gap: 8px; }
.feed .row { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--soft); }
.feed .row time { flex: none; width: 52px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.feed .row span { flex: 1 1 300px; }

/* ── The Tracker ── */
.tracker-page { display: flex; flex-wrap: wrap; align-items: stretch; min-height: calc(100vh - 57px); }
.rail { flex: 1 1 200px; max-width: 240px; min-width: 0; padding: 20px 14px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.rail .cap { padding: 16px 10px 6px; } .rail .cap:first-child { padding-top: 0; }
.rail button.view { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 10px; border-radius: 8px; border: 0; background: none; color: var(--text-2); text-align: left; cursor: pointer; }
.rail button.view:hover { background: rgba(var(--ink),0.05); color: var(--text); }
.rail button.view[aria-current="true"] { background: rgba(var(--ink),0.08); color: var(--text); font-weight: 500; }
.rail button.view.sprint { flex-direction: column; align-items: stretch; gap: 6px; }
.rail button.view .n { color: var(--muted); font-weight: 400; } .rail button.view .n.warn { color: var(--amber); }
.rail .new { margin-top: 6px; border-style: dashed; color: var(--muted); text-align: left; }
.list { flex: 999 1 520px; min-width: 0; padding: 20px 20px 60px; display: flex; flex-direction: column; gap: 12px; }
.list-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.list-head h1 { font-size: 24px; line-height: 30px; }
.list-head input[type="search"] { width: 200px; }
.keys { margin: 0; color: var(--muted); font-size: 13px; } .keys kbd { margin: 0 2px; }
.quick { display: flex; gap: 8px; } .quick input { flex: 1 1 0; }
.group h2 { margin: 8px 0 4px; font: 600 12px/20px Inter, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c, var(--muted)); }
.group h2 span { color: var(--muted); font-weight: 400; margin-left: 6px; }
.group.foundry { --c: var(--warm); } .group.review { --c: var(--amber); } .group.ready { --c: var(--cyan); } .group.landed { --c: var(--green); }
.job { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 4px 10px; border-radius: 8px; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; }
.job:hover { background: rgba(var(--ink),0.04); }
.job[aria-selected="true"] { background: rgba(var(--cyan-rgb),0.08); box-shadow: inset 0 0 0 1px rgba(var(--cyan-rgb),0.35); }
.job.landed { color: var(--text-2); }
.job .id { flex: none; width: 60px; color: var(--muted); }
.job .doing { flex: none; font-size: 12px; color: var(--warm); } .job .doing.asks { color: var(--amber); } .job .doing.done { color: var(--muted); }
.empty { padding: 40px 10px; color: var(--muted); text-align: center; }
.panel { flex: 1 1 340px; max-width: 440px; min-width: 0; padding: 20px; border-left: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; gap: 14px; }
.panel .top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.panel input.title { font: 600 18px/24px var(--display); }
.panel h2.title { font-size: 20px; line-height: 26px; }
.gates { display: flex; gap: 6px; flex-wrap: wrap; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.live { padding: 14px; border-radius: 12px; background: rgba(var(--warm-rgb),0.06); box-shadow: inset 0 0 0 1px rgba(var(--warm-rgb),0.22); display: grid; gap: 10px; }
.live .now { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .live .now b { color: var(--warm); font-weight: 600; }
.steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.steps i { height: 4px; border-radius: 2px; background: rgba(var(--ink),0.14); } .steps i.done { background: var(--green); } .steps i.now { background: var(--warm); }
.step-names { display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }
.history p { margin: 0; color: var(--text-2); font-size: 13px; } .history time { color: var(--muted); font-family: var(--mono); font-size: 11px; margin-right: 8px; }
.sprint-form { display: grid; gap: 10px; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.sprint-form .row, .sprint-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sprint-form .row label { flex: 1 1 130px; }

.job.marked { box-shadow: inset 3px 0 0 var(--amber); background: rgba(var(--amber-rgb),0.07); }
.bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(var(--amber-rgb),0.35); background: rgba(var(--amber-rgb),0.06); position: sticky; top: 58px; z-index: 5; }
.bulk select { width: auto; min-height: 32px; padding: 4px 8px; font-size: 13px; }
.subjobs { display: grid; gap: 2px; }
.comments { display: grid; gap: 10px; }
.comment { display: grid; gap: 4px; padding: 10px; border-radius: 10px; background: rgba(var(--ink),0.04); }
.comment .who { display: flex; align-items: center; gap: 8px; font-size: 13px; } .comment .who b { font-weight: 600; } .comment .who time { color: var(--muted); font-family: var(--mono); font-size: 11px; }
.comment p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Regression tests, in the Tracker */
.tests { display: grid; gap: 16px; }
.tests-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.tests-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.box { padding: 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); display: grid; gap: 12px; }
.box h2 { font-size: 16px; line-height: 22px; }
.box .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; } .box .row label { flex: 1 1 120px; }
.days { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.note { padding: 12px; border-radius: 10px; background: rgba(var(--warm-rgb),0.06); box-shadow: inset 0 0 0 1px rgba(var(--warm-rgb),0.22); color: var(--text-2); font-size: 13px; }
.fail { color: var(--red); font-weight: 600; } .pass { color: var(--green); }

/* ── The Wiki ── */
.wiki-main { max-width: 980px; }
.wiki-main > .list-head h1 { font-size: 30px; line-height: 36px; }
.wiki-empty { display: grid; gap: 14px; padding: 40px 0; max-width: 640px; }
.md { font-size: 16px; line-height: 26px; color: var(--soft); overflow-wrap: anywhere; }
.md h1, .md h2, .md h3, .md h4 { color: var(--text); margin: 22px 0 8px; } .md h1 { font-size: 26px; line-height: 32px; } .md h2 { font-size: 20px; line-height: 26px; } .md h3, .md h4 { font-size: 16px; line-height: 24px; }
/* The page's Markdown renderer writes its headings two levels down (it was made for notes inside a card). */
.md h5, .md h6 { color: var(--text); font-family: var(--display); font-weight: 600; margin: 22px 0 8px; } .md h4 { font-size: 26px; line-height: 32px; } .md h5 { font-size: 20px; line-height: 26px; } .md h6 { font-size: 16px; line-height: 24px; }
.md p { margin: 0 0 12px; } .md ul, .md ol { margin: 0 0 12px; padding-left: 22px; } .md li { margin: 4px 0; }
.md code { font-family: var(--mono); font-size: 14px; padding: 1px 5px; border-radius: 5px; background: rgba(var(--ink),0.07); color: var(--text-2); }
.md pre { padding: 12px 14px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); overflow-x: auto; } .md pre code { padding: 0; background: none; }
.md blockquote { margin: 0 0 12px; padding: 4px 14px; border-radius: 8px; background: rgba(var(--ink),0.04); color: var(--text-2); }
.md table { border-collapse: collapse; margin: 0 0 12px; display: block; overflow-x: auto; } .md th, .md td { border: 1px solid var(--line-2); padding: 6px 10px; text-align: left; } .md th { color: var(--text); }
.md hr { border: 0; border-top: 1px solid var(--line-2); margin: 18px 0; }
.wiki-tools { display: flex; flex-wrap: wrap; gap: 4px; }
.wiki-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; align-items: stretch; }
.wiki-body { min-height: 440px; font-family: var(--mono); font-size: 14px; line-height: 22px; }
.wiki-preview { min-height: 200px; padding: 12px 16px; border-radius: 10px; border: 1px dashed var(--line-2); overflow: auto; }
.proposal { border-color: rgba(var(--amber-rgb),0.35); background: rgba(var(--amber-rgb),0.06); }
.diff { font-family: var(--mono); font-size: 13px; line-height: 20px; display: grid; gap: 2px; overflow-x: auto; } .diff .plus { color: var(--green); } .diff .minus { color: var(--red); }

.files { display: grid; gap: 6px; } .files-list { display: grid; gap: 4px; }
.file { display: flex; align-items: center; gap: 8px; min-width: 0; } .file .link { text-align: left; font-size: 14px; color: var(--link); }
.files input[type="file"] { font-size: 13px; color: var(--text-2); }
.wiki-image { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 8px 0; }
.saved { display: flex; align-items: center; gap: 2px; } .saved .view { flex: 1 1 0; min-width: 0; }
.burn { display: flex; align-items: flex-end; gap: 3px; height: 160px; padding-top: 8px; border-bottom: 1px solid var(--line-2); }
.burn-day { position: relative; flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; }
.burn-day i { width: 100%; border-radius: 3px 3px 0 0; background: rgba(var(--cyan-rgb),0.6); min-height: 0; } .burn-day i.future { background: none; }
.burn-day u { position: absolute; left: 0; right: 0; height: 2px; background: var(--amber); text-decoration: none; }
.bars.tall { height: 120px; }
.sprint-bar.note { justify-content: flex-start; }

/* Board */
.board { display: grid; grid-template-columns: repeat(5, minmax(200px, 1fr)); gap: 12px; overflow-x: auto; align-items: start; padding-bottom: 8px; }
.col { min-width: 0; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); display: grid; gap: 8px; align-content: start; min-height: 160px; }
.col.over { border-color: var(--cyan); }
.col h2 { font: 600 12px/20px Inter, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c, var(--muted)); margin: 0; }
.tile-job { display: grid; gap: 6px; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--text); text-align: left; cursor: pointer; width: 100%; }
.tile-job[aria-selected="true"] { border-color: rgba(var(--cyan-rgb),0.5); }
.tile-job .meta { display: flex; align-items: center; gap: 8px; color: var(--muted); }

@media (max-width: 760px) {
  .hub-top { padding: 8px 12px; } .dash { padding: 20px 12px 40px; } .hello h1 { font-size: 24px; line-height: 30px; }
  .rail { max-width: none; flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--line); flex-direction: row; flex-wrap: wrap; padding: 10px 12px; }
  .rail .cap { flex-basis: 100%; padding: 8px 4px 2px; } .rail button.view { width: auto; }
  .list { padding: 14px 12px 40px; } .panel { max-width: none; border-left: 0; border-top: 1px solid var(--line); }
  .job .id { width: 52px; } .list-head input[type="search"] { width: 100%; }
}

/* ── The public page ── */
.landing { min-height: 100vh; display: flex; flex-direction: column; }
.land-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; padding: 12px 28px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; background: var(--top); }
.land-top .home { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font: 600 19px var(--display); }
.land-nav { display: flex; flex-wrap: wrap; gap: 4px; } .land-nav a { padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--text-2); } .land-nav a:hover { color: var(--text); background: rgba(var(--ink),0.05); }
.btn.big { min-height: 48px; padding: 0 22px; font-size: 16px; }
.landing main { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; align-items: center; padding: 72px 0 56px; }
.hero h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.08; letter-spacing: -0.02em; }
.hero p { font-size: 18px; line-height: 28px; color: var(--text-2); margin: 20px 0 0; max-width: 54ch; } .hero p.small { font-size: 14px; line-height: 20px; color: var(--muted); margin-top: 14px; }
.hero-go { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-art { position: relative; min-height: 420px; display: grid; place-items: center; overflow: hidden; border-radius: 24px; border: 1px solid var(--line); background: var(--panel-2); }
.hero-art .orbit { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid rgba(var(--ink),0.07); }
.hero-art img { position: relative; }
.moon { position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: 0 0 18px color-mix(in srgb, var(--c) 55%, transparent); }
.moon.sm { width: 10px; height: 10px; } .moon.cyan { --c: var(--cyan); } .moon.lilac { --c: var(--lilac); } .moon.warm { --c: var(--warm); animation: breathe 3s ease-in-out infinite; }
.land-section { padding: 56px 0; border-top: 1px solid var(--line); }
.land-section h2 { font-size: 30px; line-height: 36px; }
.land-section .lead { font-size: 17px; line-height: 26px; color: var(--text-2); margin: 10px 0 0; max-width: 62ch; }
.land-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 28px; }
.land-card { padding: 24px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); display: grid; gap: 10px; align-content: start; }
.land-card.sun-card { border-color: rgba(var(--warm-rgb),0.32); }
.land-card .planet { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--c); display: grid; place-items: center; } .land-card .planet i { width: 20px; height: 20px; border-radius: 50%; background: var(--c); }
.land-card h3 { font-size: 22px; line-height: 28px; } .land-card.plain h3 { font-size: 18px; line-height: 24px; }
.land-card p { margin: 0; color: var(--text-2); } .land-card ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 8px; color: var(--soft); }
.landing .steps { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.landing .steps li { counter-increment: s; padding: 22px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); color: var(--text-2); }
.landing .steps li::before { content: counter(s); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--cyan); color: var(--cyan); font: 600 15px var(--display); margin-bottom: 12px; }
.landing .steps b { display: block; color: var(--text); font: 600 17px/24px var(--display); margin-bottom: 4px; }
.price { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 28px; padding: 28px; border-radius: 18px; border: 1px solid rgba(var(--cyan-rgb),0.3); background: var(--panel); }
.price-main { display: grid; gap: 14px; justify-items: start; } .price-main p { margin: 0; color: var(--text-2); }
.price-n { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .price-n b { font: 600 40px/44px var(--display); } .price-n span { color: var(--muted); }
.price-list { margin: 0; padding-left: 18px; display: grid; gap: 10px; align-content: center; color: var(--soft); }
.land-foot { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 24px 28px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
/* The dashboard's first-run guide */
.guide { padding: 20px; border-radius: 16px; border: 1px solid rgba(var(--cyan-rgb),0.3); background: var(--panel); display: grid; gap: 12px; }
.guide h2 { font-size: 18px; line-height: 24px; }
.guide-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.guide-steps li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .guide-steps li.done { color: var(--muted); }
.guide-steps .tick { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--muted); display: grid; place-items: center; font-size: 13px; }
.guide-steps li.done .tick { border-color: var(--green); color: var(--green); }
.guide-steps a.btn { display: grid; place-items: center; text-decoration: none; color: var(--text); }
@media (max-width: 760px) { .land-top { padding: 10px 14px; } .landing main { padding: 0 14px; } .hero { padding: 40px 0 36px; gap: 24px; } .hero-art { min-height: 300px; } .land-section { padding: 40px 0; } .land-nav { display: none; } }

/* People and access */
.people-page { max-width: 980px; margin: 0 auto; padding: 24px 20px 80px; display: grid; gap: 18px; }
.people-page h1 { font-size: 24px; line-height: 30px; }
.people-page h2, .people-page h4 { font-size: 16px; margin: 0; }
.people-page section { padding: 18px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); display: grid; gap: 10px; min-width: 0; }
.people-page .hint { margin: 0; color: var(--muted); font-size: 13px; }
.people-page p { margin: 0; }
.people-page .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 48px; padding: 8px 0; border-top: 1px solid var(--line); }
.people-page ul.plain { list-style: none; margin: 0; padding: 0; }
.people-page .grow { flex: 1 1 180px; min-width: 0; }
.people-page .who { display: flex; align-items: center; gap: 10px; }
.people-page .picks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.people-page .row input[type="text"] { flex: 1 1 200px; width: auto; min-width: 0; }
.people-page .stage-chip, .people-page .uses { font-size: 12px; line-height: 18px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); white-space: nowrap; }
.people-page .uses.tracker { border-color: rgba(var(--cyan-rgb),0.45); color: var(--link); }
.people-page .uses.foundry { border-color: rgba(var(--amber-rgb),0.45); color: var(--amber); }
.people-page .uses.wiki { border-color: rgba(var(--lilac-rgb),0.5); color: var(--lilac-2); }
.people-page .uses.none { border-color: rgba(var(--red-rgb),0.5); color: var(--red); }
.people-page .btn:disabled { cursor: default; opacity: 0.75; } .people-page .btn:disabled:hover { background: none; }
.people-page .btn:disabled[aria-pressed="false"] { display: none; }
.people-page pre.code { margin: 0; padding: 10px; border-radius: 8px; background: rgba(var(--ink),0.05); overflow-x: auto; font: 12px/18px ui-monospace, 'JetBrains Mono', monospace; }
.people-page .invite-link { display: grid; gap: 8px; }
.body.off { opacity: 0.45; cursor: default; }
.panel .picks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .panel .picks select { width: auto; min-height: 32px; }

/* ── Light theme ──
   Dark is the default; a person can switch (the button in the top menu), and the choice is kept on
   their computer. Light is its own design, not the dark one inverted: a soft grey page, white
   panels with a clear edge and a small lift, darker accents that read on white. The sky pictures
   (the dashboard's system, the front page's art) stay night: they are windows onto the sky. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #EEF1F6; --panel: #FFFFFF; --panel-2: #F6F8FB; --line: rgba(18,28,48,0.13); --line-2: rgba(18,28,48,0.26);
  --text: #0C1220; --text-2: #3B4660; --muted: #5B667E; --soft: #26314A;
  --cyan: #0B7285; --link: #0B6477; --amber: #B45309; --red: #C0392B; --green: #1B7F45; --warm: #9A6200; --lilac: #6D4ED8; --on-accent: #FFFFFF;
  --ink: 18,28,48; --cyan-rgb: 11,114,133; --amber-rgb: 180,83,9; --warm-rgb: 154,98,0; --red-rgb: 192,57,43; --lilac-rgb: 109,78,216; --green-rgb: 27,127,69;
  --top: rgba(255,255,255,0.96); --toast: #FFFFFF; --link-hover: #084C5B; --cyan-hover: #095F6F; --lilac-2: #5B3FC4; --field: #FFFFFF;
  --lift: 0 1px 2px rgba(18,28,48,0.06), 0 6px 18px rgba(18,28,48,0.05);
}
/* Each surface is told apart from the page: a white panel, an edge, a small lift. */
:root[data-theme="light"] :is(.card, .needs, .tile, .feed, .box, .land-card, .price, .guide, .sprint-form, .tile-job, .toast, .landing .steps li, .people-page section) { box-shadow: var(--lift); }
:root[data-theme="light"] :is(.hub-top, .land-top) { box-shadow: 0 1px 0 var(--line), 0 2px 10px rgba(18,28,48,0.05); }
:root[data-theme="light"] .tracker-page { background: var(--panel); }
:root[data-theme="light"] .rail { background: var(--panel-2); }
:root[data-theme="light"] .panel { background: var(--panel-2); border-left-color: var(--line-2); }
:root[data-theme="light"] .rail { border-right-color: var(--line-2); }
:root[data-theme="light"] :is(.need, .comment, .md blockquote) { box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="light"] .job { border-bottom: 1px solid rgba(var(--ink),0.06); border-radius: 0; }
:root[data-theme="light"] .col { box-shadow: inset 0 0 0 1px var(--line); }
:root[data-theme="light"] .btn:not(.primary):not(.ghost) { background: var(--panel); }
:root[data-theme="light"] .btn:not(.primary):hover { background: rgba(var(--ink),0.06); }
:root[data-theme="light"] .btn[aria-pressed="true"] { background: rgba(var(--cyan-rgb),0.12); border-color: var(--cyan); color: var(--link); font-weight: 500; }
:root[data-theme="light"] .bars i { background: rgba(var(--green-rgb),0.35); }
:root[data-theme="light"] .stars i.foundry, :root[data-theme="light"] .star.foundry i { background: var(--amber); }
/* The night windows keep the dark theme's colours inside them. */
:root[data-theme="light"] :is(.system, .hero-art) {
  --panel-2: #0A0F1B; --text: #E6ECF5; --text-2: #B7C2D6; --muted: #93A0B8; --line: rgba(255,255,255,0.09); --ink: 255,255,255;
  --cyan: #7FD6EA; --amber: #F3C26B; --warm: #F7EBC8; --amber-rgb: 243,194,107; --on-accent: #07131A;
  background: #0A0F1B; color: var(--text); border-color: #0A0F1B; box-shadow: 0 10px 30px rgba(18,28,48,0.18);
}
.theme-btn { white-space: nowrap; }
.sprint-bar input.when { width: auto; min-height: 32px; padding: 4px 8px; font-size: 13px; }
/* Connect your computer, on the dashboard */
.connect { padding: 22px; border-radius: 16px; border: 1px solid rgba(var(--warm-rgb),0.35); background: var(--panel); display: grid; gap: 14px; }
.connect h2 { font-size: 20px; line-height: 26px; }
.connect-steps { margin: 0; padding: 0; list-style: none; counter-reset: c; display: grid; gap: 14px; }
.connect-steps > li { counter-increment: c; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 4px 12px; }
.connect-steps > li::before { content: counter(c); grid-row: span 3; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--amber); color: var(--amber); font: 600 15px var(--display); }
.connect-steps > li > b { font: 600 15px/22px var(--display); } .connect-steps > li p { margin: 0; color: var(--text-2); }
.connect-steps .cmd { display: flex; gap: 8px; align-items: stretch; min-width: 0; }
.connect-steps pre { flex: 1 1 0; min-width: 0; margin: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel-2); font: 12px/18px var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.connect .wait { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--text-2); }
.connect .wait i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px dashed var(--amber); animation: spin 3s linear infinite; }
:root[data-theme="light"] .connect { box-shadow: var(--lift); }
/* Search, in the top menu */
.search { position: relative; flex: 0 1 260px; min-width: 150px; }
.search input { min-height: 36px; padding: 6px 12px; }
.search-results { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(460px, 92vw); max-height: 70vh; overflow: auto; padding: 8px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--toast); box-shadow: 0 16px 40px rgba(0,0,0,0.35); display: grid; gap: 2px; }
.search-results .cap { padding: 8px 8px 4px; }
.search-results .hit { display: grid; gap: 2px; padding: 8px; border-radius: 8px; text-decoration: none; color: var(--text); min-width: 0; }
.search-results .hit:hover, .search-results .hit:focus { background: rgba(var(--ink),0.07); outline: none; }
.search-results p { margin: 0; padding: 8px; }
:root[data-theme="light"] .search-results { box-shadow: 0 16px 40px rgba(18,28,48,0.16); }
/* Help */
.help { position: fixed; top: 0; right: 0; bottom: 0; z-index: 60; width: min(440px, 100vw); padding: 20px; overflow: auto; background: var(--panel); border-left: 1px solid var(--line-2); box-shadow: -18px 0 50px rgba(0,0,0,0.35); display: flex; flex-direction: column; gap: 14px; }
.help-head { display: flex; align-items: center; gap: 10px; } .help-head h2 { font-size: 22px; line-height: 28px; }
.help-lead { margin: 0; color: var(--text-2); font-size: 15px; line-height: 22px; }
.help-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.help-tabs .btn[aria-selected="true"] { background: rgba(var(--cyan-rgb),0.14); border-color: var(--cyan); color: var(--link); font-weight: 500; }
.help-body { display: grid; gap: 8px; }
.help details { border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.help summary { padding: 12px 14px; cursor: pointer; font-weight: 500; min-height: 44px; }
.help details p { margin: 0; padding: 0 14px 14px; color: var(--text-2); line-height: 22px; }
:root[data-theme="light"] .help { box-shadow: -18px 0 50px rgba(18,28,48,0.14); }
@media (max-width: 760px) { .search { flex: 1 1 100%; order: 9; } }
/* What a sprint cost */
.cost { display: grid; gap: 0; overflow-x: auto; }
.cost-row { display: grid; grid-template-columns: minmax(120px, 2fr) repeat(4, minmax(90px, 1fr)); gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); align-items: baseline; }
.cost-row.head { border-top: 0; color: var(--muted); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; }
.cost-row.now span:first-child { color: var(--warm); font-weight: 500; }
.cost-job { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 0 10px; text-decoration: none; color: var(--text); min-width: 0; }
.cost-job i { position: absolute; left: 0; bottom: 2px; height: 3px; border-radius: 2px; background: rgba(var(--warm-rgb),0.7); }
.sprint-bar select { width: auto; min-height: 32px; padding: 4px 8px; font-size: 13px; }
/* Bookmarks on the dashboard */
.marks { padding: 16px 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); display: grid; gap: 10px; }
.marks-row { display: flex; flex-wrap: wrap; gap: 8px; }
.mark-chip { display: flex; align-items: center; gap: 8px; max-width: min(100%, 420px); min-height: 40px; padding: 0 4px 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel-2); }
.mark-chip a { color: var(--text); text-decoration: none; } .mark-chip a:hover { color: var(--link); }
.mark-chip .label { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c, var(--muted)); flex: none; }
.mark-chip.from-job { --c: var(--cyan); } .mark-chip.from-page { --c: var(--lilac-2); }
.btn.bookmark[aria-pressed="true"] { color: var(--amber); background: none; border-color: transparent; }
:root[data-theme="light"] .marks { box-shadow: var(--lift); }
/* The inbox */
.bell { position: relative; } .bell .count { margin-left: 2px; }
.bell-list { width: min(420px, 92vw); }
.bell-list .hit.new { box-shadow: inset 3px 0 0 var(--amber); padding-left: 12px; } .bell-list .hit.read { color: var(--text-2); }
.bell-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px 2px; border-top: 1px solid var(--line); margin-top: 4px; }
.bell-foot label.inline { min-height: 32px; font-size: 13px; color: var(--text-2); }
.connect-steps > li > * { grid-column: 2; } .connect-steps > li::before { grid-column: 1; grid-row: 1 / span 4; }
.needs-list { margin: 0; padding-left: 18px; color: var(--text-2); display: grid; gap: 4px; }
.conn-state { margin: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); color: var(--text-2); } .conn-state.on { border-color: rgba(var(--green-rgb),0.5); }
.connect-drawer { width: min(520px, 100vw); } .connect-drawer h3 { font-size: 16px; margin-top: 6px; }
/* The account menu */
.avatar-btn { padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; display: grid; }
.account-list { width: min(300px, 92vw); padding: 14px; gap: 8px; } .account-list .btn { justify-self: stretch; text-align: center; }
.eyebrow { margin: 0 0 14px; font: 600 13px/20px Inter, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); }
.hero .eyebrow { font-size: 13px; line-height: 20px; color: var(--amber); margin: 0 0 14px; }
/* Registers: the Wiki's inventory */
.registers { display: grid; gap: 18px; margin-top: 8px; }
.register { padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); display: grid; gap: 10px; min-width: 0; }
.register .list-head h2 { font-size: 18px; line-height: 24px; } .register .reg-find { width: 180px; min-height: 32px; padding: 4px 10px; }
.reg-totals { display: flex; flex-wrap: wrap; gap: 6px; } .reg-totals b { color: var(--text); font-weight: 600; }
.reg-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.reg-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.reg-table th { text-align: left; background: var(--panel-2); border-bottom: 1px solid var(--line-2); padding: 0; white-space: nowrap; }
.reg-table .th-btn { width: 100%; min-height: 40px; padding: 8px 12px; border: 0; background: none; text-align: left; font: 600 12px/20px Inter, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.reg-table .th-btn:hover { color: var(--text); }
.reg-table td { padding: 8px 12px; border-top: 1px solid var(--line); vertical-align: middle; overflow-wrap: anywhere; min-width: 90px; }
.reg-table td.n { text-align: right; font-variant-numeric: tabular-nums; } .reg-table td.acts { white-space: nowrap; text-align: right; min-width: 0; width: 1%; }
.reg-table tr:hover td { background: rgba(var(--ink),0.03); } .reg-table tr.editing td { background: rgba(var(--cyan-rgb),0.06); padding: 6px; }
.reg-table tr.editing input, .reg-table tr.editing select { min-height: 34px; padding: 4px 8px; min-width: 110px; }
.reg-cols { display: grid; gap: 8px; padding: 12px; border-radius: 10px; border: 1px dashed var(--line-2); justify-items: start; } .reg-cols > input { max-width: 320px; }
.reg-cols-list { display: grid; gap: 6px; width: 100%; } .reg-cols .row { display: flex; gap: 8px; align-items: center; } .reg-cols .row input { flex: 1 1 200px; max-width: 320px; } .reg-cols .row select { width: auto; }
.reg-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 4px; } .reg-add select { width: auto; min-height: 32px; padding: 4px 8px; font-size: 13px; }
:root[data-theme="light"] .register { box-shadow: var(--lift); }
.reg-history { display: grid; gap: 4px; padding: 12px; border-radius: 10px; border: 1px dashed var(--line-2); max-height: 320px; overflow: auto; }
.reg-history p { margin: 0; font-size: 13px; color: var(--text-2); } .reg-history time { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-right: 8px; } .reg-history b { color: var(--text); font-weight: 600; }
.reg-cols .row { flex-wrap: wrap; } .reg-cols .row .opts { flex: 1 1 260px; max-width: 420px; }
.registers { grid-template-columns: minmax(0, 1fr); min-width: 0; max-width: 100%; } .register { grid-template-columns: minmax(0, 1fr); max-width: 100%; } .reg-scroll { max-width: 100%; }
.wiki-main > * { min-width: 0; max-width: 100%; }
/* People in registers, and profiles */
.person-link { border: 0; background: none; padding: 0; color: var(--link); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; min-height: 24px; }
.person-link:hover { color: var(--link-hover); }
.not-user { color: var(--text-2); } .not-user-tag { margin-left: 6px; font-size: 11px; color: var(--muted); cursor: help; }
.profile-who { display: flex; align-items: center; gap: 12px; } .profile-who > div { display: grid; flex: 1 1 0; min-width: 0; } .profile-who b { font: 600 18px/24px var(--display); }
.profile-who .avatar { width: 44px; height: 44px; font-size: 17px; }
.profile-part { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.profile .picks { display: flex; flex-wrap: wrap; gap: 6px; }
.profile .stage-chip, .profile .uses { font-size: 12px; line-height: 18px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); white-space: nowrap; }
.profile .uses.tracker { border-color: rgba(var(--cyan-rgb),0.45); color: var(--link); } .profile .uses.foundry { border-color: rgba(var(--amber-rgb),0.45); color: var(--amber); }
.profile .uses.wiki { border-color: rgba(var(--lilac-rgb),0.5); color: var(--lilac-2); } .profile .uses.none { border-color: rgba(var(--red-rgb),0.5); color: var(--red); }
.profile-reg { font-weight: 600; margin-top: 4px; }
.profile-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 8px; background: rgba(var(--ink),0.04); }
/* The Foundry overview */
.overview { max-width: 1100px; }
.over-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.over-head h1 { font-size: 30px; line-height: 36px; } .over-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.overview .tiles { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.repo-name { font-weight: 600; font-family: var(--mono); font-size: 14px; }
.builder { font-size: 12px; line-height: 18px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--muted); white-space: nowrap; }
.builder.on { border-color: rgba(var(--green-rgb),0.55); color: var(--green); }
.wizard { display: grid; gap: 12px; padding: 18px; border-radius: 14px; border: 1px solid rgba(var(--cyan-rgb),0.4); background: var(--panel-2); justify-items: start; }
.wizard h3 { font-size: 18px; line-height: 24px; } .wizard form { justify-items: start; width: 100%; } .wizard input[type="text"] { max-width: 520px; }
.wizard-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; counter-reset: w; font-size: 13px; color: var(--muted); }
.wizard-steps li { counter-increment: w; display: flex; align-items: center; gap: 8px; }
.wizard-steps li::before { content: counter(w); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-2); font-weight: 600; }
.wizard-steps li.now { color: var(--text); font-weight: 500; } .wizard-steps li.now::before { border-color: var(--cyan); color: var(--cyan); }
.wizard-steps li.done::before { content: '✓'; border-color: var(--green); color: var(--green); }
.wizard-list { margin: 0; padding-left: 20px; display: grid; gap: 10px; width: 100%; } .wizard-list code { font-family: var(--mono); font-size: 13px; padding: 2px 6px; border-radius: 6px; background: rgba(var(--ink),0.07); }
.wizard-list pre.code { margin: 8px 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel); font: 12px/18px var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.rail select { min-height: 36px; padding: 6px 8px; font-size: 13px; }
:root[data-theme="light"] .wizard { box-shadow: var(--lift); }
.card .back { justify-self: start; margin: -8px 0 0 -8px; }
.connect-steps code, .help code { font-family: var(--mono); font-size: 13px; padding: 2px 6px; border-radius: 6px; background: rgba(var(--ink),0.08); overflow-wrap: anywhere; }
.rail .project-pick { width: 100%; font-weight: 600; }
.rail .project-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rail .project-form { display: grid; gap: 6px; margin-top: 8px; padding: 10px; border: 1px solid rgba(var(--ink),0.14); border-radius: 12px; background: rgba(var(--ink),0.04); animation: rise .18s ease-out; }
.rail .project-form input, .rail .project-form select { width: 100%; min-height: 36px; padding: 6px 8px; font-size: 13px; }
@keyframes rise { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rail .project-form { animation: none; } }
.project-chip { flex: none; font-family: var(--mono, ui-monospace, monospace); font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(120,200,255,.45); color: inherit; background: rgba(120,200,255,.12); margin-right: 8px; }

/* ── Glass and motion ────────────────────────────────────────────────────────────────────────────
   Panes sit on a soft glow and let it through; things ease in and answer the pointer. Blur is kept
   to the large panes (never list rows), and all motion stops for people who ask for less of it. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vmax 44vmax at 12% -8%, rgba(var(--cyan-rgb),0.13), transparent 62%),
    radial-gradient(52vmax 40vmax at 96% 4%, rgba(var(--lilac-rgb),0.12), transparent 60%),
    radial-gradient(60vmax 46vmax at 50% 112%, rgba(var(--amber-rgb),0.06), transparent 60%); }
:root[data-theme="light"] body::before { background:
    radial-gradient(60vmax 44vmax at 10% -10%, rgba(var(--cyan-rgb),0.22), transparent 62%),
    radial-gradient(52vmax 40vmax at 98% 0%, rgba(var(--lilac-rgb),0.18), transparent 60%),
    radial-gradient(60vmax 46vmax at 50% 114%, rgba(var(--amber-rgb),0.12), transparent 60%); }
:is(.card, .needs, .tile, .feed, .box, .guide, .sprint-form, .connect, .help, .marks, .register, .wizard, .people-page section) {
  background: color-mix(in srgb, var(--panel) 68%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-color: rgba(var(--ink),0.11);
  box-shadow: inset 0 1px 0 rgba(var(--ink),0.07), 0 10px 30px -18px rgba(0,0,0,0.55); }
:root[data-theme="light"] :is(.card, .needs, .tile, .feed, .box, .guide, .sprint-form, .connect, .help, .marks, .register, .wizard, .people-page section) {
  background: color-mix(in srgb, var(--panel) 74%, transparent); border-color: rgba(var(--ink),0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 1px 2px rgba(18,28,48,0.06), 0 14px 32px -20px rgba(18,28,48,0.28); }
.hub-top { background: color-mix(in srgb, var(--bg) 66%, transparent); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); }
.toast { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: color-mix(in srgb, var(--toast) 82%, transparent); }

.btn, .view, .tile, .tile-job, .need, select, input, textarea { transition: background-color .16s ease, border-color .16s ease, box-shadow .2s ease, transform .2s cubic-bezier(.2,.7,.2,1), color .16s ease; }
.btn:active { transform: scale(.97); }
.btn.primary { box-shadow: 0 6px 18px -8px rgba(var(--cyan-rgb),0.7); }
.btn.primary:hover { box-shadow: 0 10px 24px -8px rgba(var(--cyan-rgb),0.85); transform: translateY(-1px); }
a.tile:hover, .tile-job:hover { transform: translateY(-3px); border-color: rgba(var(--cyan-rgb),0.45);
  box-shadow: inset 0 1px 0 rgba(var(--ink),0.1), 0 18px 36px -18px rgba(var(--cyan-rgb),0.45); }
.view:hover { transform: translateX(2px); }
:is(input, select, textarea):focus-visible { box-shadow: 0 0 0 4px rgba(var(--cyan-rgb),0.16); }

@keyframes glass-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes slide-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
/* Panes ease in once, as the page opens; a live update that redraws them does not replay it. */
:root:not(.settled) :is(.tile, .needs, .feed, .box, .guide, .card, .register, .people-page section) { animation: glass-in .42s cubic-bezier(.2,.7,.2,1) both; }
:root:not(.settled) .tile:nth-child(2) { animation-delay: .05s; } :root:not(.settled) .tile:nth-child(3) { animation-delay: .1s; } :root:not(.settled) .tile:nth-child(4) { animation-delay: .15s; } :root:not(.settled) .tile:nth-child(5) { animation-delay: .2s; }
.sprint-form { animation: glass-in .22s ease-out both; }
.help { animation: slide-in .24s ease-out both; }
.toast { animation: glass-in .25s ease-out both; }
.order-note { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; font-size: 13px; color: var(--text-2); background: rgba(var(--cyan-rgb),0.07); border: 1px solid rgba(var(--cyan-rgb),0.2); }
.job .grip { flex: none; width: 12px; margin-right: -6px; color: var(--muted); opacity: 0; cursor: grab; transition: opacity .15s ease; font-size: 13px; line-height: 1; }
.job:hover .grip, .job:focus-visible .grip { opacity: .8; }
.job[draggable="true"] { cursor: grab; } .job[draggable="true"]:active { cursor: grabbing; }
.job.dragging { opacity: .35; }
.job.drop-before { box-shadow: inset 0 2px 0 var(--cyan); } .job.drop-after { box-shadow: inset 0 -2px 0 var(--cyan); }
@media (hover: none) { .job .grip { opacity: .6; } }
/* The side rail, a job's detail pane and board columns are panes too. */
.rail { background: rgba(var(--ink),0.022); }
.panel, .col { background: color-mix(in srgb, var(--panel) 70%, transparent); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.panel { animation: slide-in .22s ease-out both; }
:root.settled .panel { animation: none; }
.job { transition: background-color .14s ease, box-shadow .14s ease; }
.hub-top a, .hub-top button { transition: background-color .16s ease, color .16s ease; }
.card .soon-note { margin: 0; padding: 14px; border-radius: 12px; line-height: 1.5; color: var(--text-2); background: rgba(var(--cyan-rgb),0.07); border: 1px solid rgba(var(--cyan-rgb),0.22); }