/* review page: only what castomo-dashkit does not already draw; kit tokens only (no colour literals, no font-family, no pixel font sizes). */

/* A small gap under a meter's hint line; the card has no rule of its own for text after a meter. */
.review-gap { margin-block-start: var(--s1); }

/* ---------- Work queue: a rank number in the list's left margin ---------- */
.review-queue { counter-reset: none; }
.review-rank {
  flex: none;
  inline-size: 1.75rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  text-align: center;
}
.review-queue > li > .btn { flex: none; }
.review-queue .list-main b { overflow-wrap: anywhere; }

/* A list of plain lines (what "buildable" means, field changes): no min height, a tighter rhythm. */
.review-plain > li { min-height: 0; padding-block: var(--s0); }

/* A table under a card's head: the kit's table-card has no head, so the table bleeds to the card's edges instead. */
.review-clip { overflow: clip; }
.review-bleed { margin-inline: calc(var(--card-pad) * -1); margin-block: var(--s1) calc(var(--card-pad) * -1); }

/* ---------- Issues ---------- */
.review-issues > li { align-items: flex-start; }
.review-issue-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0); }
.review-issues .list-main b { font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Questions and assumptions ---------- */
.review-items { list-style: none; display: grid; }
.review-item {
  display: grid;
  gap: var(--s0);
  padding-block: var(--s2);
  border-block-start: var(--rule-w) solid var(--rule);
  min-width: 0;
}
.review-item:first-child { border-block-start: 0; padding-block-start: 0; }
.review-item:last-child { padding-block-end: 0; }
.review-item-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s0); }
.review-item-head b { flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere; }
.review-answer { color: var(--ink-2); overflow-wrap: anywhere; }
.review-own { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s0); }
.review-own .field { flex: 1 1 14rem; min-width: 0; }

/* A card a link has just led to. */
[data-focus] { animation: review-flash 2.4s var(--ease-out); }
@keyframes review-flash {
  0%, 60% { background: var(--accent-soft); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) { [data-focus] { animation: none; background: var(--accent-soft); } }

/* ---------- Comments ---------- */
.review-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s1); }
.review-toolbar .field { flex: 1 1 14rem; min-width: 0; }
.review-thread > li { align-items: flex-start; border-radius: var(--radius-sm); }
.review-comment[data-resolved] .review-comment-body { color: var(--ink-3); }
.review-comment-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0); }
.review-comment-meta small { color: var(--ink-3); font-size: var(--t-1); }
.review-comment-body { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-2); }
.review-mention { color: var(--accent-ink); font-weight: 650; }

/* The picker sits under the textarea inside the form, in the flow: it pushes the controls down rather than covering them. */
.review-mentions-anchor { position: relative; }
.review-mentions {
  list-style: none;
  display: grid;
  padding: var(--s-1);
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--radius-sm);
  background: var(--paper-2);
}
.review-mentions[hidden] { display: none; }
.review-mentions button {
  display: flex;
  align-items: baseline;
  gap: var(--s0);
  inline-size: 100%;
  min-height: var(--target);
  padding-inline: var(--s1);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.review-mentions small { color: var(--ink-3); }
.review-mentions [aria-selected="true"] button { background: var(--accent-soft); color: var(--accent-ink); }
@media (hover: hover) { .review-mentions button:hover { background: var(--hover); } }
.review-compose-foot { display: flex; flex-wrap: wrap; align-items: end; gap: var(--s1); }
.review-compose-foot .field { flex: 1 1 14rem; min-width: 0; }

/* ---------- Changes ---------- */
.review-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1); }
@media (max-width: 560px) { .review-compare { grid-template-columns: minmax(0, 1fr); } }
.review-diffs { display: grid; gap: var(--s0); }
.review-diff { border: var(--rule-w) solid var(--rule); border-radius: var(--radius-sm); min-width: 0; }
.review-diff[data-kind="removed"] .review-diff-name { text-decoration: line-through; color: var(--bad); }
.review-diff[data-kind="added"] .review-diff-name { color: var(--ok); }
.review-diff summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s0);
  min-height: var(--target);
  padding-inline: var(--s1);
  cursor: pointer;
}
.review-diff summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.review-diff-name { flex: 1 1 10rem; min-width: 0; font-weight: 650; overflow-wrap: anywhere; }
.review-diff-body { display: grid; gap: var(--s0); padding: var(--s1); border-block-start: var(--rule-w) solid var(--rule); min-width: 0; }
.review-diff-body code { color: var(--ink-3); overflow-wrap: anywhere; }
.review-delta { overflow-wrap: anywhere; }
.review-delta del { color: var(--ink-3); }
.review-delta ins { color: var(--ink); text-decoration: none; font-weight: 650; }

/* ---------- Search ---------- */
.review-search { display: grid; gap: var(--s1); padding: var(--card-pad); }
.review-search .segmented { justify-self: start; max-inline-size: 100%; }
.review-hits { list-style: none; display: grid; gap: var(--s0); }
.review-hit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-1) var(--s1);
  inline-size: 100%;
  padding: var(--s1) var(--s2);
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--radius-card, var(--radius-sm));
  background: var(--paper-2);
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.review-hit-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s0); grid-column: 1; min-width: 0; }
.review-hit-head b { overflow-wrap: anywhere; }
.review-hit-head small { color: var(--ink-3); }
.review-hit-snippet { grid-column: 1; color: var(--ink-2); overflow-wrap: anywhere; }
.review-hit > .ci { grid-column: 2; grid-row: 1 / span 2; color: var(--ink-3); }
@media (hover: hover) { .review-hit:hover { background: var(--hover); border-color: var(--rule-strong); } }
.review-hit:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
/* No padding: it would pull a highlighted word away from the letters that follow it. */
mark { background: var(--accent-soft); color: inherit; border-radius: 3px; }