/* recents.js: the Recents page — its head (app.css .page-head), the search
 * field, All / Needs you / Working / From Share tiles, Needs you rows and
 * each chat row's status word. Tiles and the answer card are fill steps off
 * the page: the chosen tile is a darker fill, never an outline. */

.board-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sv-space-2); margin-bottom: var(--sv-space-6); }
.board-tiles + .board-head { margin-top: 0; }
.board-tile {
  display: grid;
  gap: 2px;
  padding: var(--sv-space-3);
  border-radius: calc(var(--sv-radius) * 1.5);
  color: var(--sv-ink-secondary);
  font-weight: 400;
  text-align: left;
  transition: color var(--sv-dur-instant) var(--sv-ease-out), background-color var(--sv-dur-instant) var(--sv-ease-out);
}
.board-tile:hover { color: var(--sv-ink); }
.board-tile[aria-pressed="true"] { color: var(--sv-ink); }
.board .need-row { background: var(--sv-fill-2); }
.board .need-row:hover { background: var(--sv-fill-3); }
.board .board-tile { background: var(--sv-fill-2); }
.board .board-tile:hover { background: var(--sv-fill-3); }
.board .board-tile:active { background: var(--sv-fill-5); }
.board .board-tile[aria-pressed="true"] { background: var(--sv-fill-4); }
.board-tile .t-label { font-size: var(--ui-meta); }
.board-tile .t-count { color: var(--sv-ink); font-size: var(--sv-text-h3); font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.2; }
.board-tile.lit .t-count { color: var(--sv-attention); }
.board-empty { margin: 0; color: var(--sv-ink-secondary); }
.board-row .c-dot.needs { background: var(--sv-attention); }
.board-row .c-dot.fresh { background: var(--ws-working); }
/* Where a chat is, in a word: waiting on the person (attention) or just
 * finished (done green) stands out. */
.board-row .b-status { flex: none; color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.board-row.running .b-status { color: var(--sv-ink); }
.board-row.needs .b-status { color: var(--sv-attention); font-weight: 500; }
.board-row.fresh .b-status { color: var(--ws-working-ink); font-weight: 500; }
.board-row:is(.needs, .fresh) .b-label { font-weight: 500; }
.board-list:has(> .need-row) { gap: var(--sv-space-2); }
.need-row { align-items: flex-start; margin: 0; padding: var(--sv-space-2) var(--sv-space-3); border-radius: calc(var(--sv-radius) * 1.5); }
.need-row .c-dot { margin-top: 7px; }
.need-row .n-body { display: grid; gap: 2px; flex: 1; min-width: 0; }
.need-row .n-head { display: flex; align-items: baseline; gap: var(--sv-space-2); min-width: 0; }
.need-row .n-head .b-label { font-weight: 500; }
.need-row .n-text { color: var(--sv-ink-secondary); font-size: var(--ui-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.need-row .n-kind { margin-right: var(--sv-space-1); color: var(--sv-attention); font-weight: 500; }

/* The search field above the tiles: the tokens' input, the rail's icon inside. */
.board-search-wrap { position: relative; display: block; margin-bottom: var(--sv-space-4); }
.board-search-wrap .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--sv-ink-tertiary); pointer-events: none; }
.board-search { width: 100%; min-height: 40px; padding-left: 32px; }
.board-search:focus { border-color: var(--sv-ink); }

/* A search (Hamet, 2026-10-20): "New chat: <words>" first, then one list of
 * matching chats; a chat matched by what was said in it shows that message
 * under its title, indented to the title, and how many more. */
.board-new { margin-bottom: var(--sv-space-4); color: var(--sv-ink); }
.board-new .icon { flex: none; color: var(--sv-ink-secondary); }
.board-new .b-key { flex: none; padding: 1px 6px; border: 0; border-radius: var(--sv-radius); background: var(--sv-fill-2); color: var(--sv-ink-tertiary); font: inherit; font-size: var(--ui-meta); }
.board-match { display: grid; grid-template-columns: minmax(0, 1fr); }
.board-list > .board-match + *, .board-list > * + .board-match { margin-top: var(--sv-space-1); }
.board .board-match button.c-hit { min-height: 0; padding: 0 var(--sv-space-3) var(--sv-space-1) calc(var(--sv-space-3) * 2 + 7px); }
.board-more { margin: 0; padding: 0 0 var(--sv-space-1) calc(var(--sv-space-3) + 7px); color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.board > .board-more { padding-left: 0; margin-top: var(--sv-space-2); }

/* The answer card (Hamet, 2026-10-20): "Summary" labelled, the latest fact
 * read from the chats, next actions as buttons; the one to continue leads. */
.board-answer { display: grid; gap: var(--sv-space-2); margin-bottom: var(--sv-space-3); padding: var(--sv-space-3) var(--sv-space-4); border-radius: calc(var(--sv-radius) * 1.5); background: var(--sv-fill-2); }
.board-answer .a-head { display: flex; align-items: baseline; gap: var(--sv-space-2); }
.board-answer .a-label { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); font-weight: 500; letter-spacing: var(--sv-tracking-caps); text-transform: uppercase; }
.board-answer .a-meta { color: var(--sv-ink-tertiary); font-size: var(--ui-meta); }
.board-answer .a-text { margin: 0; color: var(--sv-ink); font-size: var(--ui-text); line-height: 1.45; }
.board-answer .a-text.a-none { color: var(--sv-ink-secondary); }
.board-answer.loading .a-text { animation: sv-caret var(--pulse, 2s) var(--sv-ease-inout) infinite; }
.board-answer .a-fact { display: -webkit-box; margin: 0; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--sv-ink-secondary); font-size: var(--ui-meta); overflow-wrap: anywhere; }
.board-answer .a-k { color: var(--sv-ink-tertiary); }
.board-answer .a-actions { display: flex; flex-wrap: wrap; gap: var(--sv-space-2); padding-top: var(--sv-space-1); }
.board-answer .a-act { display: inline-flex; align-items: center; gap: var(--sv-space-1); max-width: 100%; min-height: 32px; padding: 0 var(--sv-space-3); border: 0; border-radius: var(--sv-radius); background: var(--sv-fill-2); color: var(--sv-ink); font-size: var(--ui-meta); font-weight: 500; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: background-color var(--sv-dur-instant) var(--sv-ease-out); }
.board-answer .a-act:hover { background: var(--sv-fill-4); }
.board-answer .a-act.go { background: var(--sv-ink); color: var(--sv-surface); }
.board-answer .a-act.go:hover { opacity: 0.85; }
.board-answer .a-act.needs { background: color-mix(in srgb, var(--sv-attention) 12%, transparent); color: var(--sv-attention); }
.board-answer .a-act .icon { flex: none; width: 12px; height: 12px; }
.board-link { display: inline-flex; align-items: center; gap: var(--sv-space-1); justify-self: start; max-width: 100%; margin: 0 0 var(--sv-space-1) calc(var(--sv-space-3) + 7px); color: var(--sv-ink-secondary); font-size: var(--ui-meta); text-decoration: underline; text-underline-offset: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-link .icon { flex: none; width: 12px; height: 12px; }

/* Touch browsers zoom the page when a field under 16px takes focus. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  .board-search { min-height: 44px; font-size: 16px; }
  .board-answer .a-act { min-height: 44px; }
}

/* A phone: two tiles a row, and a row keeps its title, word and time (the project goes). */
@media (max-width: 480px) {
  .board-new .b-key { display: none; }
  .board-tiles { grid-template-columns: repeat(2, 1fr); }
  .board-row .b-sess { display: none; }
}