/* abso components. Values come from tokens.css; this file only arranges them. */

:root { color-scheme: dark; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 20px;
  font-weight: 450;
  -webkit-font-smoothing: antialiased;
}
:where(a) { color: inherit; text-decoration: none; }
:where(a):hover, :where(a):focus-visible { text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
:where(button) { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; }
.mono { font-family: var(--font-mono); }
.tnum { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- agents: one slot class sets the colours every mark reads ---------- */
.agent-1, .agent-9  { --c: var(--agent-1); --on: var(--on-agent-1); }
.agent-2, .agent-10 { --c: var(--agent-2); --on: var(--on-agent-2); }
.agent-3, .agent-11 { --c: var(--agent-3); --on: var(--on-agent-3); }
.agent-4, .agent-12 { --c: var(--agent-4); --on: var(--on-agent-4); }
.agent-5, .agent-13 { --c: var(--agent-5); --on: var(--on-agent-5); }
.agent-6, .agent-14 { --c: var(--agent-6); --on: var(--on-agent-6); }
.agent-7, .agent-15 { --c: var(--agent-7); --on: var(--on-agent-7); }
.agent-8, .agent-16 { --c: var(--agent-8); --on: var(--on-agent-8); }

/* The mark: the logo's pill, 16 by 9. Solid = published, dashed = working now. */
.ab-mark { display: inline-block; width: 16px; height: 9px; flex: none; vertical-align: middle; overflow: visible; }
.ab-mark rect { fill: var(--c); stroke: var(--c); stroke-width: 1.5; }
.ab-mark.is-working rect { fill: none; stroke-dasharray: 2.6 1.9; stroke-linecap: round; }
.ab-mark:is(.agent-9, .agent-10, .agent-11, .agent-12, .agent-13, .agent-14, .agent-15, .agent-16) rect { fill: var(--paper); }
.ab-mark.is-lg { width: 30px; height: 16px; }
.ab-mark.is-lg rect { stroke-width: 2.5; }
.ab-mark.is-lg.is-working rect { stroke-dasharray: 4.4 3.3; }

/* An agent named in a row: mark + name. The name is always ink, never the hue. */
.ab-agent { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; color: var(--ink); }
.ab-agent .ab-mark { margin-right: 2px; }

/* The monogram: where identity must survive without colour. */
.ab-mono {
  display: inline-flex; align-items: center; justify-content: center;
  height: 18px; min-width: 18px; padding: 0 6px; box-sizing: border-box;
  border-radius: var(--radius-pill);
  background: var(--c); color: var(--on);
  font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .02em;
}
.ab-mono:is(.agent-9, .agent-10, .agent-11, .agent-12, .agent-13, .agent-14, .agent-15, .agent-16) { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px var(--c); }
.ab-mono.is-working { background: transparent; color: var(--ink); box-shadow: none; outline: 1.5px dashed var(--c); outline-offset: -1.5px; }

/* The strip: who wrote how much of a file or folder. 3 to 7 segments, then others. */
.ab-strip { display: flex; gap: 2px; width: 72px; height: 4px; flex: none; }
.ab-strip > i { display: block; min-width: 3px; border-radius: var(--radius-pill); background: var(--c); }
.ab-strip > i.is-others { background: var(--faint); }
.ab-strip.is-wide { width: 160px; height: 6px; }

/* ---------- buttons and keys ---------- */
.ab-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 28px; padding: 0 10px; box-sizing: border-box;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: transparent; color: var(--ink);
  font-size: 13px; line-height: 20px; font-weight: 550; white-space: nowrap; cursor: pointer;
}
.ab-btn:hover { background: var(--wash); }
.ab-btn.is-primary { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.ab-btn.is-primary:hover { opacity: .9; }
.ab-btn.is-ghost { border-color: transparent; color: var(--muted); }
.ab-btn.is-ghost:hover { color: var(--ink); background: var(--wash); }
.ab-btn.is-icon { width: 28px; padding: 0; justify-content: center; }
.ab-btn[disabled] { color: var(--faint); border-color: transparent; background: transparent; cursor: default; }
.ab-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border: 1px solid var(--rule-strong); border-bottom-width: 2px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 600; color: var(--muted);
}

/* ---------- the path ---------- */
.ab-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 2px var(--space-1); min-width: 0; font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 500; }
.ab-crumbs a { color: var(--muted); }
.ab-crumbs a:hover { color: var(--ink); }
.ab-crumbs .sep { color: var(--faint); }
.ab-crumbs .here { color: var(--ink); font-weight: 650; }
.ab-crumbs .ab-btn { margin-left: var(--space-2); }

/* ---------- the version picker, and the lines that say where in time you are ---------- */
.ab-vpick { gap: var(--space-2); padding: 0 8px 0 10px; }
.ab-vpick .draft { color: var(--ink); }
.ab-vpick .dot { color: var(--faint); }
.ab-vpick .v { font-family: var(--font-mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.ab-vpick .chev { color: var(--muted); font-size: 10px; }
.ab-vpick.is-old .v { color: var(--ink); text-decoration: underline; text-decoration-style: dashed; text-decoration-color: var(--muted); text-underline-offset: 4px; }

.ab-when {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: 6px var(--space-4); border-bottom: 1px solid var(--rule);
  background: var(--surface); color: var(--muted);
}
.ab-when b { color: var(--ink); font-weight: 600; }
.ab-when .num { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.ab-when .ab-btn { height: 24px; padding: 0 8px; }
.ab-when.is-news { background: var(--paper); }
.ab-when.is-news::before { content: ""; width: 3px; height: 14px; border-radius: 2px; background: var(--new); }

/* ---------- floating things: menus, the jump box, hover cards ---------- */
.ab-pop { background: var(--raised); border-radius: var(--radius-card); box-shadow: var(--pop); }
.ab-menu { width: 300px; padding: 4px; box-sizing: border-box; }
.ab-menu h6 { margin: 8px 8px 2px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.ab-menu .empty { margin: 0 8px 6px; font-size: 12px; line-height: 16px; color: var(--muted); }
.ab-item {
  position: relative; display: flex; align-items: center; gap: var(--space-2);
  height: 28px; padding: 0 8px; border-radius: var(--radius); color: var(--ink); cursor: pointer;
}
.ab-item:hover { background: var(--wash); }
.ab-item.is-on { background: var(--select); }
.ab-item.is-on::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--ink); }
.ab-item .meta { margin-left: auto; color: var(--muted); font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.ab-menu hr { border: 0; border-top: 1px solid var(--rule); margin: 4px 0; }
.ab-field { display: flex; align-items: center; gap: var(--space-2); height: 28px; padding: 0 8px; margin: 0 4px 4px; border: 1px solid var(--rule-strong); border-radius: var(--radius); color: var(--muted); }
.ab-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 600 13px/20px var(--font-mono); }

.ab-hover { width: 320px; padding: 12px 14px; box-sizing: border-box; }
.ab-hover p { margin: 6px 0 0; font-size: 13px; line-height: 20px; color: var(--ink); }
.ab-hover .meta { color: var(--muted); font-size: 12px; line-height: 16px; }
.ab-hover .meta .num { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }

/* ---------- the folder listing and the tree beside a file ---------- */
.ab-tree { list-style: none; margin: 0; padding: 0; min-width: 0; }
.ab-row {
  position: relative; display: grid; align-items: center; column-gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr) 72px 128px 56px;
  height: var(--row-listing); padding: 0 var(--space-4) 0 calc(var(--space-4) + var(--depth, 0) * var(--space-4));
  border-bottom: 1px solid var(--rule); color: var(--ink);
}
.ab-row:hover { background: var(--wash); }
.ab-row.is-on { background: var(--select); }
.ab-row.is-on::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--ink); }
.ab-row .name { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.ab-row .name a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-row .chev { width: 10px; flex: none; color: var(--muted); font-size: 11px; text-align: center; }
.ab-row.is-folder .name a { font-weight: 600; }
.ab-row.is-folder.is-open .chev { transform: rotate(90deg); }
.ab-row.is-new::after { content: ""; position: absolute; left: calc(var(--depth, 0) * var(--space-4) + 4px); top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--new); }
.ab-row .live { display: inline-flex; gap: 3px; }
.ab-row .who { display: flex; min-width: 0; }
.ab-row .who .ab-agent { overflow: hidden; color: var(--muted); font-size: 12px; }
.ab-row .when { color: var(--muted); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ab-tree-head { display: grid; grid-template-columns: minmax(0, 1fr) 72px 128px 56px; column-gap: var(--space-3); padding: 0 var(--space-4); height: 28px; align-items: center; border-bottom: 1px solid var(--rule); color: var(--muted); font-size: 12px; }
.ab-tree-head span { white-space: nowrap; }
.ab-tree-head span:last-child { text-align: right; }

.ab-tree.is-side .ab-row { grid-template-columns: minmax(0, 1fr) auto; border-bottom: 0; height: 26px; padding-right: var(--space-3); }
.ab-tree.is-side .ab-row :is(.who, .when, .ab-strip) { display: none; }

/* ---------- the code view ---------- */
.ab-file-head { display: flex; flex-direction: column; gap: 8px; padding: 12px var(--space-4); border-bottom: 1px solid var(--rule); }
.ab-file-head .facts { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: 12px; line-height: 16px; }
.ab-file-head .facts .num { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.ab-tabs { display: flex; gap: var(--space-4); margin-top: 2px; }
.ab-tabs a { padding: 4px 0; color: var(--muted); font-weight: 550; border-bottom: 2px solid transparent; }
.ab-tabs a.is-on { color: var(--ink); border-bottom-color: var(--ink); }
.ab-tabs a:hover { color: var(--ink); text-decoration: none; }

.ab-code { margin: 0; padding: 6px 0; overflow-x: auto; background: var(--paper); font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 400; color: var(--syn-plain); }
.ab-line { display: grid; grid-template-columns: 3px 5px 48px 2px minmax(0, 1fr) auto; align-items: stretch; min-height: 20px; }
.ab-line .who { background: var(--c, transparent); }
.ab-line.run-start .who { margin-top: 2px; }
.ab-line:is(.agent-9, .agent-10, .agent-11, .agent-12, .agent-13, .agent-14, .agent-15, .agent-16) .who { background: var(--paper); box-shadow: inset 1px 0 0 var(--c), inset -1px 0 0 var(--c); }
.ab-line .chg { margin-left: 2px; }
.ab-line.is-new .chg { background: var(--new); border-radius: 1px; }
.ab-line.is-draft .chg { background: none; border-left: 2px dashed var(--c-draft); margin-left: 1px; }
.ab-line .n { padding-right: 12px; text-align: right; color: var(--gutter); font-variant-numeric: tabular-nums; user-select: none; cursor: pointer; }
.ab-line .src { padding-left: 10px; padding-right: var(--space-4); white-space: pre; }
.ab-line .end { padding-right: var(--space-4); display: flex; align-items: center; }
.ab-line:hover { background: var(--wash); }
.ab-line.is-selected { background: var(--select); }
.ab-line.is-selected .n { color: var(--ink); font-weight: 600; }
.ab-line.is-selected .bar { background: var(--ink); }
.ab-code.is-wrap .ab-line .src { white-space: pre-wrap; overflow-wrap: anywhere; }

/* syntax: low-chroma text, emphasis by weight */
.t-k { color: var(--syn-keyword); font-weight: 650; }
.t-c { color: var(--syn-comment); }
.t-s { color: var(--syn-string); }
.t-n { color: var(--syn-number); }
.t-f { color: var(--syn-function); }
.t-t { color: var(--syn-type); }
.t-p { color: var(--syn-punct); }

/* a note sitting on a line */
.ab-notechip { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--wash); color: var(--muted); font-family: var(--font-sans); font-size: 11px; line-height: 16px; font-weight: 600; white-space: nowrap; }
.ab-notechip.is-objection { background: var(--fail-wash); color: var(--ink); box-shadow: inset 0 0 0 1px var(--fail); }

/* ---------- the side panel ---------- */
.ab-panel { width: 100%; max-width: 400px; box-sizing: border-box; background: var(--surface); border-left: 1px solid var(--rule); }
.ab-panel-head { display: flex; align-items: center; gap: var(--space-2); padding: 10px 12px 10px var(--space-4); border-bottom: 1px solid var(--rule); }
.ab-panel-head h3 { margin: 0; font-size: 15px; line-height: 20px; font-weight: 650; }
.ab-panel-head .ref { color: var(--muted); font-family: var(--font-mono); font-size: 12px; }
.ab-panel-head .ab-btn { margin-left: auto; }
.ab-panel section { padding: 14px var(--space-4); border-bottom: 1px solid var(--rule); }
.ab-panel section:last-child { border-bottom: 0; }
.ab-panel h4 { margin: 0 0 6px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.ab-panel p { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink); }
.ab-panel .byline { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: 8px; color: var(--muted); font-size: 12px; line-height: 16px; }
.ab-panel .byline b { color: var(--ink); font-size: 13px; font-weight: 600; }
.ab-panel .byline .num { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.ab-panel .quiet { color: var(--muted); font-size: 13px; line-height: 20px; }
.ab-panel .refs { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-panel .refs a { font-family: var(--font-mono); font-size: 12px; line-height: 20px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--wash); color: var(--ink); }
.ab-panel .check { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); }
.ab-panel .check::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pass); }
.ab-panel .actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- jump to a file ---------- */
.ab-jump { width: 560px; max-width: 100%; box-sizing: border-box; overflow: hidden; }
.ab-jump .input { display: flex; align-items: center; gap: var(--space-2); height: 44px; padding: 0 var(--space-4); border-bottom: 1px solid var(--rule); }
.ab-jump .input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: 500 15px/20px var(--font-mono); }
.ab-jump .input .hint { color: var(--muted); font-size: 12px; white-space: nowrap; }
.ab-jump ul { list-style: none; margin: 0; padding: 4px; }
.ab-jump li { position: relative; display: flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 12px; border-radius: var(--radius); font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.ab-jump li.is-on { background: var(--select); }
.ab-jump li.is-on::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: var(--ink); }
.ab-jump li .p { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-jump li mark { background: none; color: var(--ink); font-weight: 700; }
.ab-jump li .meta { margin-left: auto; font-family: var(--font-sans); font-size: 12px; }
.ab-jump .foot { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 8px var(--space-4); border-top: 1px solid var(--rule); color: var(--muted); font-size: 12px; line-height: 18px; }
.ab-jump .foot span { display: inline-flex; align-items: center; gap: 4px; }