/* DevBrain Phase 1 UI — shared stylesheet for board and task detail.
   One type family (system UI, tabular numerals), 4px spacing scale, status palette with
   light and dark themes. No shadows, no cards for layout: surfaces are separated by 1px rules. */

:root {
  --bg: #edefeb;          /* page */
  --surface: #fbfcfa;     /* rows, panels, inputs */
  --surface-2: #f3f5f1;   /* hover, epic header band */
  --ink: #1b1f22;
  --ink-2: #4f5862;       /* secondary text, agent-tier titles */
  --ink-3: #6b7480;       /* meta, placeholders; 4.6:1 on surface */
  --rule: #d5d9d4;
  --rule-2: #e4e7e2;
  --accent: #2f5d8a;      /* links, focus ring, primary button */
  --accent-ink: #ffffff;
  --danger: #a32d2d;
  --warn: #8a5a00;

  /* status: text colour (also the rollup segment) / chip tint */
  --st-draft: #5b6470;        --st-draft-bg: #e6e9ec;
  --st-proposed: #6b4fa3;     --st-proposed-bg: #ece6f7;
  --st-approved: #3d5a80;     --st-approved-bg: #e3eaf3;
  --st-ready: #1f63b5;        --st-ready-bg: #deeafa;
  --st-claimed: #8a5a00;      --st-claimed-bg: #fbf0d4;
  --st-in_progress: #7a4b00;  --st-in_progress-bg: #fce4b0;
  --st-blocked: #a32d2d;      --st-blocked-bg: #fbe1e1;
  --st-delivered: #0f6e6e;    --st-delivered-bg: #d8f0ef;
  --st-verified: #2e7d32;     --st-verified-bg: #ddf1dc;
  --st-closed: #3f6b41;       --st-closed-bg: #e3ebe2;
  --st-split: #5b6470;        --st-split-bg: #eef0f2;
  --st-archived: #7a8390;

  --row: 24px;
  --fs-0: 11px; --fs-1: 12px; --fs-2: 13px; --fs-3: 15px; --fs-4: 18px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --r-1: 3px; --r-2: 4px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #161a1c; --surface: #1e2326; --surface-2: #242a2e;
    --ink: #e3e7e6; --ink-2: #a5adb3; --ink-3: #8a939b;
    --rule: #30373b; --rule-2: #272d31;
    --accent: #7fb2dc; --accent-ink: #0f1a24; --danger: #f19a9a; --warn: #e7be5a;
    --st-draft: #aeb6be;       --st-draft-bg: #2a3035;
    --st-proposed: #b9a6e8;    --st-proposed-bg: #30294a;
    --st-approved: #9db7d8;    --st-approved-bg: #263140;
    --st-ready: #7fb2ec;       --st-ready-bg: #1e2f46;
    --st-claimed: #e7be5a;     --st-claimed-bg: #3b3119;
    --st-in_progress: #f2c664; --st-in_progress-bg: #4a3a14;
    --st-blocked: #f19a9a;     --st-blocked-bg: #4a2323;
    --st-delivered: #74cfcb;   --st-delivered-bg: #173838;
    --st-verified: #8fd68f;    --st-verified-bg: #1e3a20;
    --st-closed: #9dbf9c;      --st-closed-bg: #273127;
    --st-split: #aeb6be;       --st-split-bg: #262b2f;
    --st-archived: #737c84;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #161a1c; --surface: #1e2326; --surface-2: #242a2e;
  --ink: #e3e7e6; --ink-2: #a5adb3; --ink-3: #8a939b;
  --rule: #30373b; --rule-2: #272d31;
  --accent: #7fb2dc; --accent-ink: #0f1a24; --danger: #f19a9a; --warn: #e7be5a;
  --st-draft: #aeb6be;       --st-draft-bg: #2a3035;
  --st-proposed: #b9a6e8;    --st-proposed-bg: #30294a;
  --st-approved: #9db7d8;    --st-approved-bg: #263140;
  --st-ready: #7fb2ec;       --st-ready-bg: #1e2f46;
  --st-claimed: #e7be5a;     --st-claimed-bg: #3b3119;
  --st-in_progress: #f2c664; --st-in_progress-bg: #4a3a14;
  --st-blocked: #f19a9a;     --st-blocked-bg: #4a2323;
  --st-delivered: #74cfcb;   --st-delivered-bg: #173838;
  --st-verified: #8fd68f;    --st-verified-bg: #1e3a20;
  --st-closed: #9dbf9c;      --st-closed-bg: #273127;
  --st-split: #aeb6be;       --st-split-bg: #262b2f;
  --st-archived: #737c84;
  color-scheme: dark;
}

/* ---- base ---- */
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 var(--fs-2)/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.3; }
h1 { font-size: var(--fs-4); }
h2 { font-size: var(--fs-3); }
p { margin: 0 0 var(--sp-2); }
.id { color: var(--ink-2); letter-spacing: 0.01em; white-space: nowrap; }
.row.epic .id { font-weight: 500; }
.muted { color: var(--ink-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- app chrome ---- */
.topbar {
  height: 40px; display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-4); background: var(--surface); border-bottom: 1px solid var(--rule);
}
.brand { font-weight: 600; letter-spacing: 0.02em; color: var(--ink); }
.switcher { position: relative; }
.switcher > summary { list-style: none; cursor: pointer; padding: 2px var(--sp-2); border-radius: var(--r-2); display: inline-flex; gap: var(--sp-2); align-items: center; }
.switcher > summary::-webkit-details-marker { display: none; }
.switcher > summary:hover { background: var(--surface-2); }
.switcher > summary::after { content: ""; width: 6px; height: 6px; border: solid var(--ink-3); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg) translateY(-2px); }
.switcher .menu {
  position: absolute; top: 100%; left: 0; z-index: 10; min-width: 280px; margin: var(--sp-1) 0 0; padding: var(--sp-1) 0;
  list-style: none; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-2);
}
.switcher .menu a { display: grid; grid-template-columns: 44px 1fr auto; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); color: var(--ink); }
.switcher .menu a:hover, .switcher .menu a[aria-current] { background: var(--surface-2); text-decoration: none; }
.switcher .menu .muted { font-size: var(--fs-0); }
.topbar .spacer, .projectbar .spacer { flex: 1; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-1); color: var(--ink-2); }
.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--st-verified); }
body.sse-down .live::before { background: var(--warn); animation: pulse 1s steps(2) infinite; }
body.sse-down .live .on, body:not(.sse-down) .live .off { display: none; }
@keyframes pulse { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) { body.sse-down .live::before { animation: none; } }
.who { font-size: var(--fs-1); color: var(--ink-2); }
.btn-link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; }
.btn-link:hover { text-decoration: underline; }

.projectbar {
  height: 32px; display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-4); border-bottom: 1px solid var(--rule-2); font-size: var(--fs-1); color: var(--ink-2);
}
.projectbar h1 { font-size: var(--fs-2); }
.projectbar nav a { margin-right: var(--sp-3); }
.projectbar nav a[aria-current] { color: var(--ink); font-weight: 600; }
.projectbar nav .soon { color: var(--ink-3); }
.projectbar .search { width: 220px; height: 22px; padding: 0 var(--sp-2); border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--surface); }
.projectbar label { display: inline-flex; gap: var(--sp-1); align-items: center; }

main { padding: var(--sp-3) var(--sp-4) var(--sp-5); }

/* ---- board ---- */
.board { display: grid; grid-template-columns: 1fr; gap: 0 var(--sp-5); align-items: start; }
@media (min-width: 1280px) { .board { grid-template-columns: 1fr 1fr; } }
.tree, .tree ol { list-style: none; margin: 0; padding: 0; }
.colhead, .row {
  display: grid; grid-template-columns: 20px 60px minmax(0, 1fr) 164px 56px 40px 72px;
  gap: 0 var(--sp-2); align-items: center; height: var(--row); padding: 0 var(--sp-2) 0 0;
}
.colhead { color: var(--ink-3); font-size: var(--fs-0); border-bottom: 1px solid var(--rule); }
.colhead .r { text-align: right; }
.row { border-bottom: 1px solid var(--rule-2); background: var(--surface); }
.row:hover { background: var(--surface-2); }
.row .title { min-width: 0; display: flex; align-items: center; gap: var(--sp-2); overflow: hidden; }
.row .title a { color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .pct, .row .tok { text-align: right; font-size: var(--fs-1); color: var(--ink-2); white-space: nowrap; }
.row .st { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; overflow: hidden; white-space: nowrap; }
.row.epic { background: var(--surface-2); font-weight: 600; border-bottom: 1px solid var(--rule); }
.row.human .title a { font-weight: 500; }
.row.agent { color: var(--ink-2); }
.row.agent .title a { color: var(--ink-2); }
.row.agent .id { color: var(--ink-3); }
.row.done .title a { color: var(--ink-3); }
.row.split .title a { text-decoration: line-through; color: var(--ink-3); }
.row.archived { opacity: 0.6; }
/* indentation: each nested list is inset and carries the tree line as its left border */
.node > ol { border-left: 1px solid var(--rule); margin-left: 9px; }
.node > ol > .node > .row { padding-left: var(--sp-2); }

.toggle {
  width: 18px; height: 18px; display: inline-grid; place-items: center; padding: 0;
  border: 0; border-radius: var(--r-1); background: none; color: var(--ink-3); cursor: pointer;
}
.toggle:hover { background: var(--rule-2); color: var(--ink); }
.toggle::before { content: ""; width: 5px; height: 5px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform 120ms; }
.toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
.toggle[disabled] { visibility: hidden; }
.count { font-size: var(--fs-0); color: var(--ink-3); }

/* kind token: shown for every kind except epic and feature; dashed border = agent tier */
.kind {
  font-size: var(--fs-0); line-height: 14px; padding: 0 4px; border-radius: var(--r-1);
  border: 1px solid var(--ink-3); color: var(--ink-2); white-space: nowrap; flex: none;
}
.row.agent .kind, .kind.agent { border-style: dashed; border-color: var(--rule); color: var(--ink-3); }

/* status chips: the word is always present; colour is secondary */
.chip {
  display: inline-block; font-size: var(--fs-0); line-height: 16px; padding: 0 6px; border-radius: var(--r-1);
  font-weight: 600; white-space: nowrap; color: var(--st-draft); background: var(--st-draft-bg);
}
.chip.draft { color: var(--st-draft); background: var(--st-draft-bg); }
.chip.proposed { color: var(--st-proposed); background: var(--st-proposed-bg); }
.chip.approved { color: var(--st-approved); background: var(--st-approved-bg); }
.chip.ready { color: var(--st-ready); background: var(--st-ready-bg); }
.chip.claimed { color: var(--st-claimed); background: transparent; box-shadow: inset 0 0 0 1px var(--st-claimed); }
.chip.in_progress { color: var(--st-in_progress); background: var(--st-in_progress-bg); }
.chip.blocked { color: var(--st-blocked); background: var(--st-blocked-bg); }
.chip.delivered { color: var(--st-delivered); background: var(--st-delivered-bg); }
.chip.verified { color: var(--st-verified); background: var(--st-verified-bg); }
.chip.closed { color: var(--st-closed); background: var(--st-closed-bg); }
.chip.split { color: var(--st-split); background: var(--st-split-bg); font-style: italic; }
.chip.archived { color: var(--st-archived); background: transparent; box-shadow: inset 0 0 0 1px var(--rule); }
.chip.done { color: var(--st-verified); background: transparent; box-shadow: inset 0 0 0 1px var(--st-verified); }
.chip.waiting { color: var(--ink-2); background: transparent; box-shadow: inset 0 0 0 1px var(--ink-3); font-weight: 500; padding: 0 4px; }
.chip.flag { color: var(--warn); background: transparent; box-shadow: inset 0 0 0 1px var(--warn); font-weight: 500; }
.lease { font-size: var(--fs-0); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* rollup bar: segments proportional to child status counts; aria-label carries the counts */
.bar { display: flex; height: 8px; width: 56px; border-radius: 2px; overflow: hidden; background: var(--rule-2); }
.bar i { display: block; height: 100%; }
.bar .s-verified, .bar .s-closed { background: var(--st-verified); }
.bar .s-delivered { background: var(--st-delivered); }
.bar .s-in_progress, .bar .s-claimed { background: var(--st-in_progress); }
.bar .s-blocked { background: var(--st-blocked); }
.bar .s-ready { background: var(--st-ready); }
.bar .s-approved { background: var(--st-approved); opacity: 0.6; }
.bar .s-proposed { background: var(--st-proposed); opacity: 0.6; }
.bar .s-draft { background: var(--st-draft); opacity: 0.35; }
.bar.none { background: transparent; }  /* leaves: no bar */
.bar.empty { background: repeating-linear-gradient(90deg, var(--rule) 0 2px, transparent 2px 6px); }  /* parent without children */

.legend { margin-top: var(--sp-4); font-size: var(--fs-0); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); align-items: center; }
.legend .chip { font-weight: 500; }

/* ---- task detail ---- */
.crumbs { font-size: var(--fs-1); color: var(--ink-3); margin-bottom: var(--sp-2); display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; }
.crumbs a { color: var(--ink-2); }
.crumbs .sep { color: var(--rule); }
.detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
@media (min-width: 1100px) { .detail { grid-template-columns: minmax(0, 1fr) 340px; } }
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-2); }
.panel > section, .panel > header { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--rule-2); }
.panel > :last-child { border-bottom: 0; }
.panel header h1 { max-width: 60ch; }
.panel header .meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-top: var(--sp-2); font-size: var(--fs-1); color: var(--ink-2); }
.panel section h2 { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.panel section h2 .muted { font-size: var(--fs-0); font-weight: 400; }
.md { max-width: 72ch; }
.md ul { margin: 0 0 var(--sp-2); padding-left: 20px; }
.md pre { background: var(--surface-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-1); overflow: auto; font-size: var(--fs-1); }

/* field (display + editor) */
.field { position: relative; }
.field > .edit { position: absolute; right: 0; top: 0; font-size: var(--fs-0); opacity: 0; }
.field:hover > .edit, .field:focus-within > .edit { opacity: 1; }
.field.empty .md { color: var(--ink-3); font-style: italic; }
.editor { display: grid; gap: var(--sp-2); }
.editor input, .editor textarea, .editor select, .form input, .form select, .form textarea {
  width: 100%; padding: 4px var(--sp-2); border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--surface);
}
.editor textarea { min-height: 7lh; resize: vertical; }
.editor .actions, .form .actions { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.editor .actions .version { margin-left: auto; font-size: var(--fs-0); color: var(--ink-3); }
.editor.invalid input, .editor.invalid textarea { border-color: var(--danger); }
.err { border-left: 3px solid var(--danger); padding: var(--sp-1) var(--sp-2); font-size: var(--fs-1); background: var(--st-blocked-bg); }
.err code { font-weight: 600; }
.err .hint { color: var(--ink-2); display: block; }
.conflict { border-left: 3px solid var(--warn); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-1); background: var(--st-claimed-bg); display: grid; gap: var(--sp-2); }
.conflict .cmp { display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-2); }
.conflict .cmp > :first-child { color: var(--ink-2); }
.conflict .theirs { padding: 2px var(--sp-2); background: var(--surface); border-radius: var(--r-1); }

.btn {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 var(--sp-3);
  border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--surface); cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.danger { color: var(--danger); }
.btn.sm { height: 22px; padding: 0 var(--sp-2); font-size: var(--fs-1); }
.btn[disabled] { opacity: 0.5; cursor: default; }

/* side rail */
.rail { display: grid; gap: var(--sp-4); }
.props { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-1); margin: 0; }
.props dt { color: var(--ink-3); }
.props dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.props dd.field > .edit { top: -2px; }
.transitions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.checklist { list-style: none; margin: var(--sp-2) 0 0; padding: 0; font-size: var(--fs-1); }
.checklist li { display: grid; grid-template-columns: 18px 1fr; gap: var(--sp-2); padding: 2px 0; color: var(--ink-3); }
.checklist li::before { content: "ok"; font-size: var(--fs-0); color: var(--st-verified); font-weight: 600; }
.checklist li.fail { color: var(--ink); }
.checklist li.fail::before { content: "no"; color: var(--danger); }
.form { display: grid; gap: var(--sp-2); padding: var(--sp-3); margin-top: var(--sp-2); border: 1px dashed var(--rule); border-radius: var(--r-2); }
.form label { font-size: var(--fs-1); color: var(--ink-2); display: grid; gap: 2px; }
.form .check { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2); align-items: start; font-size: var(--fs-1); }
.form .check input { width: auto; margin-top: 3px; }

/* lists inside detail */
.list { list-style: none; margin: 0; padding: 0; font-size: var(--fs-1); }
.list li { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: var(--sp-2); align-items: center; padding: 3px 0; border-bottom: 1px solid var(--rule-2); }
.list li:last-child { border-bottom: 0; }
.list .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list .t .kind { margin-left: var(--sp-1); }
.history { list-style: none; margin: 0; padding: 0; font-size: var(--fs-1); }
.history li { display: grid; grid-template-columns: 78px 1fr; gap: var(--sp-2); padding: 4px 0; border-bottom: 1px solid var(--rule-2); }
.history li:last-child { border-bottom: 0; }
.history time { color: var(--ink-3); white-space: nowrap; }
.history .who { color: var(--ink-2); }
.history .model { color: var(--ink-3); }
.history .note { display: block; color: var(--ink-2); margin-top: 2px; }
.history .arrow { color: var(--ink-3); margin: 0 4px; }
.msg { padding: var(--sp-2) 0; border-bottom: 1px solid var(--rule-2); font-size: var(--fs-1); }
.msg:last-of-type { border-bottom: 0; }
.msg .from { display: flex; gap: var(--sp-2); color: var(--ink-3); }
.msg .from b { color: var(--ink-2); font-weight: 600; }
.msg p { margin: 2px 0 0; max-width: 72ch; }
.commit { display: grid; grid-template-columns: 70px 1fr auto; gap: var(--sp-2); font-size: var(--fs-1); padding: 3px 0; border-bottom: 1px solid var(--rule-2); }
.commit:last-child { border-bottom: 0; }
.commit .ok { color: var(--st-verified); font-size: var(--fs-0); }
.commit .unv { color: var(--ink-3); font-size: var(--fs-0); }

/* empty / loading / error */
.empty { color: var(--ink-3); font-size: var(--fs-1); padding: var(--sp-2) 0; }
.row.htmx-request, .field.htmx-request { opacity: 0.6; }
.htmx-indicator { display: none; font-size: var(--fs-0); color: var(--ink-3); }
.htmx-request .htmx-indicator { display: inline; }
.banner { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-1); background: var(--st-claimed-bg); color: var(--warn); border-bottom: 1px solid var(--rule); }
.banner.error { background: var(--st-blocked-bg); color: var(--danger); }

/* sign-in */
.signin { max-width: 320px; margin: 15vh auto; display: grid; gap: var(--sp-3); }

@media (max-width: 720px) {
  .colhead, .row { grid-template-columns: 20px 62px minmax(0, 1fr) 100px; }
  .row > .bar, .row > .pct, .row > .tok, .colhead > .c-roll, .colhead > .c-pct, .colhead > .c-tok { display: none; }
  .projectbar .search { width: 140px; }
}

/* ---- additions for the live board (not in the mock-up) ---- */
/* collapsed children list: hidden until expanded, visible while its content loads */
.tree ol.collapsed { display: none; }
.tree ol.collapsed.htmx-request { display: block; }
.row.loading { color: var(--ink-3); font-size: var(--fs-1); display: flex; align-items: center; padding-left: var(--sp-6); }
.row.more { color: var(--ink-3); font-size: var(--fs-1); display: flex; align-items: center; padding-left: var(--sp-6); }
.board.empty { display: block; }

/* project list */
.projects { list-style: none; margin: 0; padding: 0; max-width: 720px; }
.projects li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: baseline; padding: var(--sp-2) 0; border-bottom: 1px solid var(--rule-2); }
.projects li:last-child { border-bottom: 0; }
.projects .name { font-weight: 500; }
.projects .stats { font-size: var(--fs-1); color: var(--ink-2); white-space: nowrap; }
.page-title { margin-bottom: var(--sp-3); }

/* sign-in and standalone pages */
.signin h1 { font-size: var(--fs-4); }
.signin label { display: grid; gap: 2px; font-size: var(--fs-1); color: var(--ink-2); }
.signin input { width: 100%; padding: 6px var(--sp-2); border: 1px solid var(--rule); border-radius: var(--r-2); background: var(--surface); }
.signin .err { margin: 0; }
.standalone { max-width: 560px; margin: 15vh auto; padding: 0 var(--sp-4); display: grid; gap: var(--sp-3); }
.notice { max-width: 72ch; display: grid; gap: var(--sp-2); }