:root {
  color-scheme: dark;
  --bg: #0a0c0f;
  --bg-2: #0c0e11;
  --panel: #101216;
  --panel-2: #12151b;
  --line: #22262e;
  --line-soft: #191d24;
  --line-strong: #2c313a;
  --text: #cfd4dd;
  --text-bright: #e7e9ee;
  --muted: #8a919e;
  --dim: #5b6270;
  --foot-dim: #454c56;
  --blue: #4fb3d9;
  --blue-bright: #7ccbe8;
  --green: #3fb950;
  --amber: #d4a72c;
  --red: #f2564d;
  --purple: #9d7cd8;
  --nav-on-bg: #171b21;
  --badge-bg: #171a20;
  --red-strong-bg: #a32a24;
  --ok-bg: #0f1a12;
  --ok-line: #2b4a33;
  --ok-btn-bg: #1a2f20;
  --blue-bg: #123240;
  --blue-line: #1d4a5e;
  --warn-bg: #15130c;
  --warn-line: #4a3d17;
  --err-bg: #160d0d;
  --err-line: #4a2020;
  --info-bg: #0e1519;
  --info-line: #1d3540;
  --shadow: rgba(0, 0, 0, .5);
  --glow-blue: rgba(79, 179, 217, .08);
  --glow-purple: rgba(157, 124, 216, .05);
  --glow-green: rgba(63, 185, 80, .04);
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f4f7;
  --bg-2: #ffffff;
  --panel: #ffffff;
  --panel-2: #f6f8fa;
  --line: #d0d7de;
  --line-soft: #e3e8ee;
  --line-strong: #b7c0ca;
  --text: #24292f;
  --text-bright: #1f2328;
  --muted: #57606a;
  --dim: #848d97;
  --foot-dim: #9aa4af;
  --blue: #0f7ea8;
  --blue-bright: #0a627f;
  --green: #1a7f37;
  --amber: #9a6700;
  --red: #cf222e;
  --purple: #6639ba;
  --nav-on-bg: #e6ebf1;
  --badge-bg: #eaeef2;
  --red-strong-bg: #cf222e;
  --ok-bg: #e8f5ec;
  --ok-line: #a8d8b5;
  --ok-btn-bg: #dff0e4;
  --blue-bg: #dceef7;
  --blue-line: #a5d2e6;
  --warn-bg: #fdf6e3;
  --warn-line: #e3cf8f;
  --err-bg: #fdecec;
  --err-line: #f0b7b3;
  --info-bg: #e7f3f9;
  --info-line: #b3d9ea;
  --shadow: rgba(0, 0, 0, .15);
  --glow-blue: rgba(15, 126, 168, .07);
  --glow-purple: rgba(102, 57, 186, .05);
  --glow-green: rgba(26, 127, 55, .04);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 system-ui, sans-serif;
}

/* a slowly drifting glow behind the content — purely decorative */
body::before {
  content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 340px at 50% 0%, var(--glow-blue), transparent 70%),
    radial-gradient(720px 520px at 85% 25%, var(--glow-purple), transparent 70%),
    radial-gradient(640px 640px at 12% 85%, var(--glow-green), transparent 70%);
  animation: bg-drift 75s ease-in-out infinite alternate;
}
@keyframes bg-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(-3%, 2%, 0) scale(1.08); }
  to { transform: translate3d(2%, -2%, 0) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-bright); text-decoration: underline; }
h1 { margin: 0; font-size: 16px; color: var(--text); text-wrap: pretty; }
h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }

.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.dim { color: var(--dim); }

/* --- shell (header + sidebar, design skill-store/Main.dc.html) ---------- */
.brand { font: 600 12px var(--mono); color: var(--text); }
.hdr {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px; height: 47px; padding: 0 13px;
  border-bottom: 1px solid var(--line); background: var(--bg-2);
}
.hdr-mark { width: 9px; height: 9px; background: var(--blue); border-radius: 2px; }
.hdr-brand { font: 500 11.5px var(--mono); letter-spacing: .05em; color: var(--text); }
.hdr-acct { display: flex; gap: 10px; align-items: center; margin-left: auto; font: 10.5px var(--mono); color: var(--muted); }

.shell { display: flex; align-items: stretch; min-height: calc(100vh - 47px - 29px); padding-bottom: 29px; }
.side {
  width: 204px; flex: none; display: flex; flex-direction: column;
  padding: 9px 8px; border-right: 1px solid var(--line); background: var(--bg-2);
  position: sticky; top: 47px; height: calc(100vh - 47px - 29px); overflow-y: auto;
}
.side nav { display: flex; flex-direction: column; gap: 1px; }
.side nav a {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px;
  border-radius: 5px; color: var(--muted); font-size: 13px; text-decoration: none;
}
.side nav a:hover { color: var(--text); text-decoration: none; }
.side nav a.on { background: var(--nav-on-bg); color: var(--text-bright); }
.side .ni { width: 13px; flex: none; font: 400 11px var(--mono); color: var(--dim); }
.side nav a.on .ni { color: var(--blue); }
.side .nl { flex: 1; }
.side .nb { font: 500 10.5px var(--mono); color: var(--muted); background: var(--badge-bg); padding: 3px 5px; border-radius: 4px; }
.side .nb.red { color: #fff; background: var(--red-strong-bg); }
.side-foot {
  margin-top: auto; padding: 11px 9px 4px; border-top: 1px solid var(--line);
  font: 10px/1.8 var(--mono); color: var(--foot-dim); overflow-wrap: anywhere;
}
.main { flex: 1; min-width: 0; }

/* --- footer (last activity) --------------------------------------------- */
.foot {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: 18px; height: 29px; padding: 0 13px;
  border-top: 1px solid var(--line); background: var(--bg-2);
  font: 10.5px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden;
}
.foot .foot-item { display: flex; align-items: baseline; gap: 7px; min-width: 0; overflow: hidden; }
.foot .foot-item > * { overflow: hidden; text-overflow: ellipsis; }
.foot .when { color: var(--dim); flex: none; }

/* --- layout ------------------------------------------------------------- */
.page { width: 100%; max-width: 1160px; margin: 0 auto; padding: 22px 20px 44px; display: flex; flex-direction: column; gap: 22px; }
.page.narrow { max-width: 860px; }
.page.slim { max-width: 480px; }
.page.wide { max-width: 1400px; }
.head-row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.push { margin-left: auto; }

/* --- tiles -------------------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tile { display: block; padding: 14px 16px; border: 1px solid var(--line); border-radius: 5px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); color: inherit; }
a.tile:hover { filter: brightness(1.18); text-decoration: none; color: inherit; }
.tile b { display: block; font: 600 26px var(--mono); }
.tile .label { margin-top: 3px; font: 10.5px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.tile .sub { margin-top: 2px; font: 10.5px var(--mono); color: var(--dim); }

/* --- sections ----------------------------------------------------------- */
.section-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.section-head .title { font: 10.5px var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.section-head .count { font: 10.5px var(--mono); color: var(--dim); }
.section-head .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.label-caps { font: 10.5px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }

/* --- cards -------------------------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.cards.tight { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.card { display: block; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; color: inherit; }
a.card:hover { filter: brightness(1.18); text-decoration: none; }
.card .card-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.card .card-top .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .card-title { margin-top: 5px; font-size: 12px; color: var(--muted); text-wrap: pretty; overflow-wrap: anywhere; }
.card.attn { padding: 12px 14px; }
.card.attn .card-title { margin-top: 7px; font-size: 13px; color: var(--text); }
.card .note { display: block; margin-top: 7px; font: 10.5px var(--mono); }
.kind { font: 10.5px var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.card-meta { margin-left: auto; font: 10.5px var(--mono); color: var(--dim); white-space: nowrap; flex: none; }

.empty { padding: 18px; text-align: center; font-size: 12px; color: var(--dim); background: var(--panel); border: 1px dashed var(--line); border-radius: 5px; }

/* --- panels & rows ------------------------------------------------------ */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 5px; }
.panel.pad { padding: 14px 16px; }
.panel .row { display: flex; gap: 12px; padding: 5px 10px; border-bottom: 1px solid var(--line-soft); font: 11px var(--mono); }
.panel .row:last-child { border-bottom: 0; }
.panel.roomy { padding: 12px 14px; }
.panel.roomy .row { padding: 10px 0; }
.panel .row .k { width: 110px; flex-shrink: 0; color: var(--muted); }
.panel .row .v { color: var(--text); overflow-wrap: anywhere; }
.body-box { padding: 12px 14px; font-size: 13px; text-wrap: pretty; }
.body-box pre { margin: 0; font: 12.5px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.body-box.scroll { max-height: 420px; overflow-y: auto; }

/* --- markdown ----------------------------------------------------------- */
.md h1 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.md h2 { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin: 12px 0 4px; }
.md h3 { font-size: 12px; font-weight: 600; color: var(--muted); margin: 10px 0 4px; }
.md p { margin: 4px 0; }
.md ul, .md ol { margin: 4px 0; padding-left: 20px; }
.md li { margin: 2px 0; }
.md code { font: 12px/1.5 var(--mono); background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 4px; padding: 1px 4px; overflow-wrap: anywhere; }
.md pre { margin: 8px 0; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 6px; overflow-x: auto; }
.md pre code { background: none; border: 0; padding: 0; font: 12px/1.6 var(--mono); }
.md table { border-collapse: collapse; margin: 8px 0; font-size: 12.5px; }
.md th, .md td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; }
.md th { color: var(--muted); }
.md blockquote { margin: 8px 0; padding: 2px 12px; border-left: 3px solid var(--line-strong); color: var(--muted); }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }
.md input[type="checkbox"] { vertical-align: middle; margin-right: 4px; }

.md-block { position: relative; }
.md-block .md-toggle { position: absolute; opacity: 0; pointer-events: none; }
.md-block .md-switch {
  position: absolute; top: 0; right: 0; cursor: pointer; user-select: none;
  font-size: 10px; color: var(--dim); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px;
}
.md-block .md-switch:hover { color: var(--muted); border-color: var(--line-strong); }
.md-block .md-toggle:checked ~ .md-switch { color: var(--blue); border-color: var(--blue); }
.md-block .md-raw { display: none; margin: 0; font: 12.5px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.md-block .md-toggle:checked ~ .md { display: none; }
.md-block .md-toggle:checked ~ .md-raw { display: block; }

/* --- roadmap ------------------------------------------------------------ */
.md a.dead { color: var(--dim); text-decoration: line-through; text-decoration-color: var(--red); pointer-events: none; }
.md a[data-status]::after { content: attr(data-status); margin-left: 6px; font: 10.5px var(--mono); color: var(--dim); }
.md a[data-status="in_progress"]::after { color: var(--blue); }
.md a[data-status="done"]::after { color: var(--green); }
.md a[data-status="blocked"]::after { color: var(--amber); }
.md a[data-status="stalled"]::after { color: var(--red); }
details.editor > summary { cursor: pointer; user-select: none; font: 10.5px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
details.editor > summary:hover { color: var(--text); }
details.editor[open] > summary { color: var(--blue); margin-bottom: 8px; }
.pick { display: flex; gap: 8px; align-items: center; min-height: 24px; font-size: 12px; color: var(--muted); cursor: pointer; }
.pick:hover { color: var(--text); }
.pick input[type="checkbox"] { accent-color: var(--blue); }

/* --- controls ----------------------------------------------------------- */
.btn {
  border-radius: 5px; font: 12px system-ui, sans-serif; padding: 9px 16px; min-height: 40px;
  cursor: pointer; background: var(--panel); color: var(--text); border: 1px solid var(--line);
}
.btn:hover:not(:disabled) { filter: brightness(1.2); }
.btn:disabled { color: var(--dim); border-color: var(--line); cursor: not-allowed; opacity: .6; }
.btn.block { width: 100%; }
.btn.ok { background: var(--ok-btn-bg); color: var(--green); border-color: var(--ok-line); }
.btn.blue { background: var(--blue-bg); color: var(--blue); border-color: var(--blue-line); }
.btn.danger { background: var(--panel); color: var(--red); border-color: var(--line); }
.btn.warn { background: var(--amber); color: var(--bg); border: 0; font-weight: 600; }
.btn.small { font: 11px system-ui, sans-serif; padding: 4px 10px; min-height: 26px; }
.btn.ok:disabled, .btn.blue:disabled, .btn.danger:disabled, .btn.warn:disabled { background: var(--panel); border: 1px solid var(--line); }

.chip {
  background: var(--panel); color: var(--muted); border: 1px solid var(--line);
  border-radius: 5px; font: 11px var(--mono); padding: 6px 12px; min-height: 30px; cursor: pointer;
}
.chip.on { background: var(--blue-bg); color: var(--blue); border-color: var(--blue-line); }

.field {
  width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 5px; font: 13px var(--mono); padding: 11px; min-height: 44px;
}
textarea.field { font-size: 12px; resize: vertical; min-height: 72px; }
select.field, .field.compact { font: 11px var(--mono); padding: 5px 8px; min-height: 28px; }
.field.code { font-size: 18px; letter-spacing: .4em; text-align: center; }
.form-label { display: block; margin-bottom: 6px; font: 10.5px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.form-stack { display: flex; flex-direction: column; gap: 8px; }
.form-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.badge { font: 10.5px var(--mono); border: 1px solid var(--line); border-radius: 5px; padding: 2px 8px; background: var(--panel); }
.notice { font: 10.5px var(--mono); border-radius: 5px; padding: 6px 10px; }
.notice.warn { color: var(--amber); background: var(--warn-bg); border: 1px solid var(--warn-line); }
.notice.error { color: var(--red); background: var(--err-bg); border: 1px solid var(--err-line); }
.notice.ok { color: var(--green); background: var(--ok-bg); border: 1px solid var(--ok-line); }
.notice.info { color: var(--blue); background: var(--info-bg); border: 1px solid var(--info-line); }

/* the blocked-task question is prose, not a one-line notice — render it like the body */
.question-box { padding: 12px 14px; }
.question-box .md, .question-box > p { font: 13px/1.6 system-ui, sans-serif; color: var(--text); text-wrap: pretty; }
.question-box .md > :first-child, .question-box > p { margin-top: 0; }
.question-box .md > :last-child, .question-box > p { margin-bottom: 0; }

details.menu { position: relative; }
details.menu > summary { list-style: none; cursor: pointer; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu .menu-body {
  position: absolute; top: 34px; right: 0; z-index: 10; min-width: 180px;
  display: flex; flex-direction: column; gap: 4px; padding: 8px 10px;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 5px;
  box-shadow: 0 8px 24px var(--shadow);
}
details.menu label { display: flex; align-items: center; gap: 8px; min-height: 22px; font: 11px var(--mono); cursor: pointer; }
details.menu input[type=checkbox] { accent-color: var(--blue); }

/* --- auth --------------------------------------------------------------- */
.auth-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; min-height: 80vh; }
.auth-card { width: 360px; max-width: 100%; padding: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 5px; }
.auth-card .lead { margin-bottom: 16px; font-size: 11px; color: var(--dim); }
.auth-card .field { margin-bottom: 10px; }
.totp-key { text-align: center; font: 10.5px var(--mono); color: var(--dim); margin-bottom: 12px; overflow-wrap: anywhere; }

/* --- activity ----------------------------------------------------------- */
.log-row { display: flex; gap: 12px; align-items: baseline; padding: 4px 8px; font: 11px var(--mono); }
.log-row .when { width: 130px; flex-shrink: 0; color: var(--dim); }
.log-row .tid { width: 340px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.month-head { font: 10.5px var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }

@media (max-width: 760px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .log-row { flex-wrap: wrap; }
}

/* --- inbox --------------------------------------------------------------- */
.inbox-split { display: flex; gap: 0; min-height: 300px; }
.inbox-rail { width: 218px; flex-shrink: 0; border-right: 1px solid var(--line); }
.rail-grp { font: 9.5px var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .1em; padding: 10px 10px 4px; }
.rail-item {
  display: flex; align-items: center; gap: 8px; width: calc(100% - 8px);
  background: none; border: 0; border-radius: 5px; margin: 1px 8px 1px 0; padding: 6px 10px;
  font: 11.5px var(--mono); color: var(--muted); cursor: pointer; text-align: left;
}
.rail-item:hover { color: var(--text); background: var(--panel-2); }
.rail-item.on { background: var(--blue-bg); color: var(--blue); }
.rail-item .n { margin-left: auto; font-size: 10px; color: var(--dim); }
.rail-item.on .n { color: var(--blue); opacity: .75; }
.inbox-main { flex: 1; min-width: 0; padding-left: 16px; }
.inbox-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.inbox-search {
  flex: 1; background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 5px; font: 12px var(--mono); padding: 7px 10px;
}
.inbox-search::placeholder { color: var(--dim); }
.inbox-search:focus { outline: none; border-color: var(--blue-line); }
.freshness { font: 10px var(--mono); color: var(--dim); white-space: nowrap; }
.card.adopted { border-color: var(--ok-line); background: var(--ok-bg); }
.adopted-link { font-size: 10.5px; color: var(--green); white-space: nowrap; }
.host-note { display: flex; align-items: center; gap: 7px; font: 10px var(--mono); color: var(--dim); margin: 10px 0 6px; }
.host-note .ok { color: var(--green); }
.sk { position: relative; overflow: hidden; border-radius: 4px; background: var(--panel-2); border: 1px solid var(--line-soft); }
.sk::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(138, 145, 158, .09), transparent);
  animation: inbox-shimmer 1.3s infinite;
}
.sk-row { height: 52px; }
.spin {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); border-top-color: var(--blue);
  animation: inbox-rotate .8s linear infinite;
}
@keyframes inbox-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes inbox-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .sk::after, .spin { animation: none; }
}
@media (max-width: 720px) {
  .inbox-split { flex-direction: column; }
  .inbox-rail { width: 100%; border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
}

/* the map around a task (detail) */
.task-map { position: relative; overflow: hidden; }
#map-canvas { display: block; width: 100%; height: 190px; touch-action: none; }
.map-note { position: absolute; left: 10px; bottom: 8px; font-size: 10px; pointer-events: none; }

/* ── flight deck ── */
:root {
  --hair: color-mix(in srgb, var(--blue) 18%, transparent);
  --hair-hot: color-mix(in srgb, var(--blue) 45%, transparent);
  --deck-display: ui-sans-serif, system-ui, "Segoe UI", sans-serif;
}

.fr { position: relative; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--hair); }
.fr::before, .fr::after {
  content: ""; position: absolute; width: 8px; height: 8px; pointer-events: none; border: 1px solid var(--hair-hot);
}
.fr::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.fr::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.caps { font: 600 9.5px var(--deck-display); letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }

/* masthead */
.hdr.deck { gap: 16px; align-items: center; border-bottom: 1px solid var(--hair); background: linear-gradient(180deg, var(--panel-2), var(--panel)); }
.hdr.deck .hdr-brand { font: 600 14px var(--deck-display); letter-spacing: .3em; color: var(--text-bright); }
.lamps { display: flex; gap: 14px; align-items: center; }
.lamp { display: inline-flex; align-items: center; gap: 6px; }
.lamp i { width: 5px; height: 5px; background: var(--green); box-shadow: 0 0 8px var(--green); }
.lamp.warn i { background: var(--amber); box-shadow: 0 0 8px var(--amber); animation: lamp-blink 2s steps(1) infinite; }
@keyframes lamp-blink { 50% { opacity: .3; } }
.loadbar { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--hair); overflow: hidden; opacity: 0; transition: opacity .12s; }
.loadbar.on { opacity: 1; }
.loadbar i { display: block; height: 100%; width: 40%; background: var(--blue); box-shadow: 0 0 8px var(--blue); animation: loadbar-sweep 1.1s ease-in-out infinite; }
@keyframes loadbar-sweep { from { transform: translateX(-100%); } to { transform: translateX(350%); } }

/* rail */
.side { border-right-color: var(--hair); }
.side nav a { font: 500 11.5px var(--deck-display); letter-spacing: .12em; text-transform: uppercase; border-left: 2px solid transparent; transition: color .15s, background .15s, border-color .15s; }
.side nav a.on { border-left-color: var(--blue); background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 12%, transparent), transparent); }

/* the transition between pages */
.main { position: relative; }
.main > .wipe { position: absolute; left: 0; top: 0; height: 1px; width: 100%; opacity: 0; pointer-events: none; background: linear-gradient(90deg, transparent, var(--blue), transparent); }
.main > .wipe.run { animation: deck-wipe .34s ease-out; }
@keyframes deck-wipe {
  0% { opacity: 0; transform: scaleX(0); transform-origin: left; }
  30% { opacity: .9; }
  100% { opacity: 0; transform: scaleX(1); transform-origin: left; }
}
.main.enter > .page { animation: deck-enter .16s cubic-bezier(.2,.7,.3,1) both; }
@keyframes deck-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* attention band */
.attn-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.attn-card { display: block; padding: 11px 13px 12px; color: inherit; border-left-width: 2px; transition: background .15s, transform .15s; }
.attn-card:hover { text-decoration: none; transform: translateY(-1px); }
.attn-card .attn-head { display: flex; align-items: center; gap: 8px; }
.attn-card .age { margin-left: auto; font: 10.5px var(--mono); color: var(--dim); }
.attn-card h3 { margin: 5px 0 3px; font: 500 14px var(--deck-display); color: var(--text-bright); letter-spacing: .01em; }
.attn-card .why { margin: 0; font-size: 11.5px; color: var(--muted); text-wrap: pretty; overflow-wrap: anywhere; }

/* bay */
.bay { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 12px; align-items: start; }

/* running operations */
.op { display: block; padding: 11px 13px; margin-bottom: 8px; color: inherit; transition: background .15s, border-color .15s; }
.op:hover { text-decoration: none; border-color: var(--hair-hot); background: linear-gradient(180deg, var(--panel), var(--panel-2)); }
.op-top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.op-id { font: 10.5px var(--mono); color: var(--blue); }
.op-t { font: 500 14px var(--deck-display); color: var(--text-bright); }
.op-meta { margin-left: auto; font: 10.5px var(--mono); color: var(--dim); white-space: nowrap; }
.op-log { margin-top: 5px; font: 11px var(--mono); color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars { display: flex; gap: 3px; margin-top: 9px; }
.bars i { height: 3px; flex: 1; background: var(--line); }
.bars i.used { background: var(--muted); }
.bars i.live { background: var(--blue); box-shadow: 0 0 7px var(--blue); animation: bar-pump 2.4s ease-in-out infinite; }
@keyframes bar-pump { 50% { opacity: .45; } }

/* fronta */
.q-row { display: grid; grid-template-columns: 74px minmax(0,1fr) auto auto; gap: 10px; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--line-soft); color: inherit; font: 11.5px var(--mono); }
.q-row:last-child { border-bottom: 0; }
.q-row:hover { text-decoration: none; background: color-mix(in srgb, var(--blue) 6%, transparent); }
.q-row .id { color: var(--blue); font-size: 10.5px; }
.q-row .t { font: 12.5px var(--deck-display); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-row .tag { font-size: 10px; color: var(--dim); border: 1px solid var(--hair); padding: 0 5px; }
.q-row .age { color: var(--dim); font-size: 10.5px; }

/* core */
.core { padding: 12px; text-align: center; }
.reticle { display: block; width: 168px; height: 168px; margin: 4px auto 0; }
.reticle .spin { transform-origin: 84px 84px; animation: reticle-rot 40s linear infinite; }
.reticle .spin-r { transform-origin: 84px 84px; animation: reticle-rot 25s linear infinite reverse; }
@keyframes reticle-rot { to { transform: rotate(360deg); } }
.reticle .val { font: 300 28px var(--deck-display); fill: var(--text-bright); }
.reticle .cap { font: 8.5px var(--deck-display); letter-spacing: .22em; fill: var(--dim); }
.tele { margin-top: 8px; border-top: 1px solid var(--hair); }
.tele a { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: baseline; padding: 7px 2px; border-bottom: 1px solid var(--line-soft); color: inherit; text-align: left; }
.tele a:hover { text-decoration: none; background: color-mix(in srgb, var(--blue) 6%, transparent); }
.tele b { font: 500 14px var(--deck-display); }
.tele .sub { grid-column: 1 / -1; font: 10px var(--mono); color: var(--dim); }

/* ticker */
.foot.ticker { padding: 0; overflow: hidden; gap: 0; }
.foot.ticker .tag { position: relative; z-index: 1; flex: none; align-self: stretch; display: flex; align-items: center; padding: 0 12px; border-right: 1px solid var(--hair); background: color-mix(in srgb, var(--blue) 7%, var(--bg-2)); }
.foot.ticker .track { display: flex; gap: 26px; white-space: nowrap; padding-left: 18px; animation: ticker-slide 44s linear infinite; }
@keyframes ticker-slide { to { transform: translateX(-50%); } }

@media (max-width: 900px) { .bay { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .lamp.warn i, .bars i.live, .reticle .spin, .reticle .spin-r, .foot.ticker .track, .loadbar i, .main > .wipe.run { animation: none; }
  .main.enter > .page { animation: none; }
}

/* an interactive hexagon background — it comes alive under the cursor and is empty at rest */
#hexbg { position: fixed; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen; }
:root[data-theme="light"] #hexbg { mix-blend-mode: multiply; }
.shell { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { #hexbg { display: none; } }
.task-map.tall #map-canvas { height: 260px; }

/* --- modal --------------------------------------------------------------- */
.overlay {
  position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: var(--shadow);
}
.modal {
  width: 900px; max-width: 100%; max-height: 82vh; overflow: auto; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 5px;
  box-shadow: 0 8px 24px var(--shadow);
}
.modal code {
  flex: 1; min-width: 0; padding: 6px 8px; font: 11px var(--mono); overflow-wrap: anywhere;
  background: var(--panel-2); border: 1px solid var(--line-soft); border-radius: 4px;
}