/* The backlog board: its filter chips, its repository group headers, and the item rows.

   THE HIERARCHY IS THE POINT OF THIS FILE. A board row carries four ranks of information — the issue's title,
   its number, its status, and a tail of tags and links — and before this they were rendered at 13px, 14.5px
   and 12.5px in two greys, which is a spread nobody perceives and therefore no ranking at all. Now the title
   is the reading size in the foreground colour, everything under it is one step down and muted, and the
   repository header above it is an uppercase eyebrow: three ranks the eye separates without reading a word. */
.filters { display:flex; gap:var(--s-2); flex-wrap:wrap; }
.chip {
  display:inline-flex; align-items:center; min-height:var(--control-h);
  border:1px solid var(--line); background:transparent; color:var(--muted);
  border-radius:var(--radius-pill); padding:0 var(--s-4); font-size:var(--t-ui); cursor:pointer;
  font-family:inherit; white-space:nowrap;
  transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
             border-color var(--dur-1) var(--ease);
}
.chip:hover { color:var(--fg); border-color:var(--faint); }
.chip[aria-pressed="true"] { background:var(--accent-soft); border-color:transparent; color:var(--accent);
                             font-weight:600; }

/* A repository group header is a real <button>: it folds its group away, so it must be reachable and
   operable from the keyboard like every other control here — a clickable <div> is neither. It carries a
   touch-sized row of its own for the same reason the tabs do: on a phone it is how the operator gets a long
   board down to the part they care about. */
.repo { display:flex; align-items:center; gap:var(--s-2); width:100%; min-height:var(--control-h);
        margin:var(--s-5) 0 var(--s-2); padding:0;
        background:none; border:0; font:inherit; font-size:var(--t-micro); letter-spacing:.09em;
        text-transform:uppercase; color:var(--faint); font-weight:650; cursor:pointer; text-align:left;
        transition:color var(--dur-1) var(--ease); }
.repo:first-of-type { margin-top:var(--s-3); }
.repo:hover { color:var(--muted); }
.repo .caret { width:0; height:0; flex:none; border-left:5px solid currentColor;
               border-top:4px solid transparent; border-bottom:4px solid transparent;
               transform:rotate(90deg); transition:transform var(--dur-1) var(--ease); }
.repo.is-collapsed .caret { transform:none; }
.repo-count { border:1px solid var(--line-soft); background:var(--line-soft); border-radius:var(--radius-xs);
              padding:1px var(--s-2); font-variant-numeric:tabular-nums; letter-spacing:0; }
.repo-selected { color:var(--accent); letter-spacing:0; }

.item {
  display:flex; gap:var(--s-3); align-items:flex-start;
  padding:var(--s-3) var(--s-4); margin-bottom:var(--s-2);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--lift);
  transition:border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.item:hover { border-color:var(--faint); }
.item.is-blocked { opacity:.55; }
.item.is-selected { border-color:var(--accent); background:color-mix(in srgb,var(--accent-soft) 45%,var(--panel)); }

.body { flex:1; min-width:0; }
.row1 { display:flex; gap:var(--s-2); align-items:baseline; }
.num { color:var(--faint); font-variant-numeric:tabular-nums; font-size:var(--t-meta); flex:none; }
.title { font-size:var(--t-body); font-weight:500; letter-spacing:-.01em; }

.row2 { margin-top:var(--s-2); display:flex; gap:var(--s-2); flex-wrap:wrap; align-items:center;
        font-size:var(--t-meta); color:var(--muted); }
.scope { color:var(--faint); font-variant-numeric:tabular-nums; }
.stale { color:var(--block); }

.pr { color:var(--run); }
.pr .draft { color:var(--faint); }
.dep { color:var(--block); }

/* The partial-board banner (#77 defect #3): a repository the sweep could not read this pass, named with its
   reason. Warning-toned so it reads as a degraded board, not a decoration; one line per unread repository. */
.unread-banner {
  border:1px solid var(--block); border-radius:var(--radius-2, 8px);
  background:color-mix(in srgb, var(--block) 8%, transparent);
  color:var(--fg, inherit); padding:var(--s-3) var(--s-4); margin-bottom:var(--s-3);
  font-size:var(--t-meta); line-height:1.5;
}
.unread-line + .unread-line { margin-top:var(--s-2); }
.unread-repo { font-weight:600; }
.unread-reason { color:var(--block); }

/* The board's one moving part, disarmed — and, as everywhere else on this page, AFTER the rule it has to
   beat: `@media` adds no specificity, so a disarm above `.repo .caret` would lose to it and read as though
   it had worked. A transformed or animated rule added below this block has to move it down again. */
@media (prefers-reduced-motion: reduce) {
  .repo .caret { transition:none; }
}