/* Records and home screens (Fork D): projects grid, inbox, template tree, people. MSE tokens only. */
.cb-gap { margin: var(--sp-4) 0; }
.cb-h3 { font-size: var(--fs-md); font-weight: 650; margin: 4px 0; }

/* Project cards: an MSE card that is a link. */
.cb-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--sp-4); }
a.card.cb-project { display: flex; flex-direction: column; gap: 14px; color: var(--text); text-decoration: none; position: relative; overflow: hidden;
  transition: transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s; }
a.card.cb-project::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, transparent, var(--blue), transparent); opacity: .85; }
a.card.cb-project:hover, a.card.cb-project:focus-visible { transform: translateY(-2px); border-color: oklch(from var(--blue) l c h / .45); text-decoration: none; }
.cb-ph { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.cb-ph h2 { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -.015em; }
.cb-ph .sub { color: var(--text-3); font-size: var(--fs-sm); margin-top: 2px; }
.cb-ph .i { color: var(--text-3); margin-top: 6px; }
.cb-money { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cb-money .lbl { display: block; color: var(--text-3); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.cb-money b { font-size: var(--fs-xl); font-weight: 650; letter-spacing: -.02em; }
.cb-meter .ctx { color: var(--text-3); font-size: var(--fs-xs); margin-top: 6px; }
.cb-cov { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--rule); }
.cb-cov div { display: grid; gap: 2px; }
.cb-cov dt { color: var(--text-3); font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.cb-cov dd { margin: 0; font-family: "Geist Mono", ui-monospace, monospace; font-size: var(--fs-lg); font-weight: 600; }
.cb-cov .open dd { color: var(--brass-ink); }

/* New project drawer. */
.cb-zones { display: grid; gap: 8px; margin: 8px 0; }
.cb-zone { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; }
.cb-zone input[name=zone] { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--card-edge); background: var(--field); width: 100%; }
.cb-profile { display: grid; gap: 6px; margin-top: 8px; }
.cb-q { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: var(--fs-sm); }
.cb-q:last-child { border-bottom: 0; }

/* Inbox. */
.card.cb-need { border-left: 3px solid var(--brass); }
.cb-comment { display: block; }
.cb-comment-body { display: grid; gap: 8px; width: 100%; }
.cb-answer { display: flex; gap: 8px; align-items: flex-end; padding-left: 46px; }
.cb-answer textarea { flex: 1; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--card-edge); background: var(--field); resize: vertical; }

/* Template tree. */
.cb-tree { display: grid; gap: 8px; }
details.cb-art { border: 1px solid var(--card-edge); border-radius: var(--radius-sm); background: var(--card-solid); }
/* Fixed column widths, so the Greek column starts at the same x on every row (the count column no longer varies). */
details.cb-art > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr) 88px 18px; gap: 12px; align-items: center; padding: 12px 14px; min-height: var(--tap); }
details.cb-art > summary .cnt { text-align: right; white-space: nowrap; }
details.cb-art > summary::-webkit-details-marker { display: none; }
details.cb-art[open] > summary { border-bottom: 1px solid var(--rule); }
details.cb-art[open] > summary .chev { transform: rotate(180deg); }
.cb-art .nm { font-weight: 620; }
.cb-art .other, .cb-item .other, .cb-subhead .other { color: var(--text-3); font-size: var(--fs-sm); }
.cb-art .cnt { color: var(--text-3); font-size: var(--fs-xs); font-family: "Geist Mono", ui-monospace, monospace; }
.code { color: var(--text-3); font-size: var(--fs-sm); }
.cb-sub { padding: 8px 14px 10px; border-bottom: 1px solid var(--rule); }
.cb-sub:last-child { border-bottom: 0; }
.cb-subhead { display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 4px 0 6px; }
.cb-subhead b { font-weight: 600; }
.cb-subhead .btn { justify-self: end; }
.cb-items { list-style: none; margin: 0; padding: 0; }
.cb-item { display: grid; gap: 6px; padding: 9px 0 9px 18px; border-top: 1px solid var(--rule); }
.cb-item.retired { opacity: .55; }
.cb-item-main { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; }
.cb-item-names { display: grid; gap: 1px; min-width: 0; }
.cb-item-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding-left: 76px; }
.cb-item-meta .btn { margin-left: auto; }
.cb-unit { display: inline-flex; gap: 6px; align-items: center; }
.cb-roles { color: var(--text-3); font-size: var(--fs-xs); }
.cb-none { padding: 4px 0 4px 18px; }
.cb-checks { display: grid; align-content: end; }

/* People. */
.cb-person { display: inline-flex; gap: 10px; align-items: center; }
.avatar.cb-av { width: 28px; height: 28px; font-size: 11px; }

@media (max-width: 640px) {
  .cb-projects { grid-template-columns: 1fr; }
  .cb-cov { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  details.cb-art > summary { grid-template-columns: 40px minmax(0, 1fr) 18px; }
  details.cb-art > summary .other, details.cb-art > summary .cnt { display: none; }
  .cb-item { padding-left: 0; }
  .cb-item-main { grid-template-columns: 1fr; gap: 2px; }
  .cb-item-meta { padding-left: 0; }
  .cb-answer { padding-left: 0; flex-direction: column; align-items: stretch; }
}
.cb-tb { margin-top: 14px; }

/* Row blocks on a phone: a state word keeps its own width instead of stretching across the row. */
table.rowblocks td > .pill, table.rowblocks td > .cb-person { justify-self: start; width: max-content; max-width: 100%; }
.cb-money b { white-space: nowrap; }
@media (max-width: 640px) { .cb-money b { font-size: var(--fs-lg); } }

/* Inbox: how long each item has waited; past five days in the "bad" ink, as MSE home does. */
.cb-age { color: var(--text-3); font-size: var(--fs-xs); }
.cb-age.old, .cb-oldest.old { color: var(--bad-ink); font-weight: 600; }
.cb-oldest { color: var(--text-3); font-size: var(--fs-xs); font-family: "Geist Mono", ui-monospace, monospace; white-space: nowrap; }
.cb-nothing-else { display: flex; gap: 8px; align-items: center; color: var(--good-ink); font-size: var(--fs-sm); margin: var(--sp-4) 2px; }
.feed.queue .meta:empty { display: none; }

/* Home cards: the coverage labels stay on one line, so every value sits at the same height. */
.cb-cov dt { white-space: nowrap; }
.cb-cov abbr { text-decoration: none; cursor: help; }
.cb-cov div { align-content: end; }

/* Touch: every control at least 44 px (MSE --tap). */
@media (max-width: 640px), (pointer: coarse) {
  .cb-tb .checkline, .cb-zone .checkline { min-height: var(--tap); }
  .cb-tb .checkline input, .cb-zone .checkline input { width: 22px; height: 22px; }
  table.rowblocks tr.link { min-height: var(--tap); }
  .cb-item-meta .btn, .cb-subhead .btn, .cb-q .seg button { min-height: var(--tap); }
  .cb-zone .icon-btn { min-width: var(--tap); min-height: var(--tap); }
}
@media (max-width: 640px) {
  .cb-subhead { grid-template-columns: 40px minmax(0, 1fr); }
  .cb-subhead .other { display: none; }
  .cb-subhead .btn { grid-column: 1 / -1; justify-self: start; }
}