/* V2R — the Recovered page, the History sheet, the Sync audit, the cards'
 * History / Review controls and Settings' Sync card.
 *
 * New screens get their own stylesheet (NEXT-PLAN §6 rule 5): app.css is
 * frozen, and capture.css, day.css and cards.css belong to the day page.
 * Built in the wireframe's language — MOCKUP.html's white cards on the page
 * wash, uppercase eyebrows, chips — with every colour from tokens.css, so
 * dark mode is the tokens' dark values and nothing here. 44px targets. */

/* ───────────────────────────────────────────── Recovered versions */

.rv__lede {
  margin: 0 0 var(--space-3);
  color: var(--ink-muted);
  font-size: var(--text-base);
}

.rv__summary,
.audit__status {
  margin: 0 0 var(--space-3);
  color: var(--ink-muted);
  font-size: var(--text-md);
  font-weight: 600;
}

.rv__summary:empty,
.audit__status:empty {
  display: none;
}

.rv__summary[data-state="error"],
.audit__status[data-state="error"] {
  color: var(--danger);
}

.rv {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--emphasis-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.rv[data-kind="fork"] {
  border-left-color: var(--accent);
}

.rv__title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
}

.rv__why {
  margin: var(--space-1) 0 var(--space-3);
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.rv__compare:focus-visible,
.hist:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Side by side at every width: the phone's two columns are narrow, and the
 * words wrap rather than the pair stacking, because "theirs beside mine" is
 * the whole point of the page (Prompt 12 item 1).
 *
 * Each column's slots — heading, when, words, one per changed field, the Keep
 * button — are rows the two columns SHARE (a subgrid; recovered.js sets how
 * many a pair spans), so a field sits level with its twin across the pair and
 * both buttons stand at one foot, after everything the owner reads (round 2). */
.rv__pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--space-2);
  row-gap: 0;
}

.rv__side {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: 0;
  align-content: start;
  min-width: 0;
  padding: var(--space-2);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.rv__head {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.rv__head strong {
  display: block;
  color: var(--ink-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Green says "mine": only the side this device wrote (recovered-spec.js
 * sidesFor `own`). A third device's pair — Kept | Set aside, or a fork's Now
 * on the entry | The copy — has no side of its own, so neither is green. */
.rv__side--own .rv__head strong {
  color: var(--accent);
}

.rv__this {
  color: var(--ink-muted);
}

.rv__when {
  margin: 0 0 var(--space-2);
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
}

.rv__text {
  min-width: 0;
  margin: 0 0 var(--space-2);
  color: var(--ink);
  font-size: var(--text-base);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* What only this side says: an orange wash on another device's words, green
 * on this device's own. On a third device both sides are another device's. */
.rv__only {
  padding: 0 0.125rem;
  border-radius: 2px;
  color: var(--ink);
  background: var(--tint-warn);
  box-shadow: inset 0 -2px 0 var(--emphasis-edge);
}

.rv__side--own .rv__only {
  background: var(--tint-money);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* A record with no words of its own keeps its row, empty (recovered.js). */
.rv__text--none {
  margin: 0;
}

.rv__deleted {
  margin: 0 0 var(--space-2);
  color: var(--ink-muted);
  font-style: italic;
}

/* A changed field, in its version's column above its button: the label, and
 * the value this version holds — marked (.rv__only) when the two differ. */
.rv__field {
  min-width: 0;
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.rv__field-label {
  display: block;
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.rv__field-value {
  display: block;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.rv__keep {
  align-self: end;
  width: 100%;
  padding-inline: var(--space-2);
}

.rv__actions {
  margin-top: var(--space-3);
}

.rv__actions:empty {
  display: none;
}

.rv__same {
  margin: var(--space-3) 0 0;
  color: var(--ink-muted);
  font-size: var(--text-md);
}

.rv__merge {
  margin-top: var(--space-3);
}

.rv__merge-label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--ink-faint);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.rv__merge-box {
  box-sizing: border-box;
  width: 100%;
  min-height: 8rem;
  margin-bottom: var(--space-2);
  padding: var(--space-2);
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  font: inherit;
  line-height: 1.45;
  resize: vertical;
}

.rv__merge-box:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.rv__status {
  margin: var(--space-2) 0 0;
  color: var(--ink-muted);
  font-size: var(--text-md);
}

.rv__status:empty {
  display: none;
}

.rv__empty {
  margin: var(--space-6) 0;
  padding: var(--space-4);
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  text-align: center;
}

/* A private pair, drawn as a locked card is: the lock, the veil, the button. */
.rv__veiled {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch);
}

.rv__reveal {
  flex: none;
  min-height: var(--touch);
  padding: 0 var(--space-1);
  background: transparent;
  border: 0;
  color: var(--accent);
  font: inherit;
  font-size: var(--text-md);
  font-weight: 600;
  cursor: pointer;
}

.rv__reveal:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ───────────────────────────────────────────── the cards' own controls */

.entry__extras {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0 var(--space-2);
  margin: 0 0 calc(-1 * var(--space-2));
}

.entry__extra {
  min-height: var(--touch);
  padding: 0 var(--space-1);
  background: transparent;
  border: 0;
  color: var(--accent);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}

.entry__review {
  color: var(--warn-ink);
}

.entry__extra:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* ───────────────────────────────────────────── the History sheet */

.hist__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hist__item {
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border);
}

.hist__item:last-child {
  border-bottom: 0;
}

.hist__meta {
  margin: 0 0 var(--space-1);
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.hist__now {
  display: inline-block;
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hist__text {
  margin: 0 0 var(--space-2);
  color: var(--ink);
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.hist__add {
  background: var(--tint-money);
  color: var(--ink);
  text-decoration: none;
  box-shadow: inset 0 -2px 0 var(--accent);
}

.hist__del {
  background: var(--tint-warn);
  color: var(--ink-muted);
  text-decoration: line-through;
}

.hist__empty {
  color: var(--ink-faint);
  font-style: italic;
}

.hist__error {
  margin: var(--space-2) 0 0;
  color: var(--danger);
  font-size: var(--text-md);
}

/* ───────────────────────────────────────────── the Sync audit */

.audit__section {
  margin: 0 0 var(--space-4);
}

.audit__section .card__lede {
  margin-bottom: var(--space-3);
}

.audit__sync,
.audit__run-checks,
.audit__link {
  margin-top: var(--space-3);
}

.audit__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.audit__device .card__name,
.audit__device .card__detail {
  margin: 0;
}

.audit__error {
  color: var(--warn-ink);
}

.audit__check-head,
.audit__check .card__detail,
.audit__ran {
  margin: 0;
}

.audit__ran {
  color: var(--ink-faint);
  font-size: var(--text-xs);
}

.audit__badge {
  display: inline-block;
  min-width: 4.5rem;
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--tint-money);
  color: var(--ok);
  font-size: var(--text-xs);
  font-weight: 700;
  text-align: center;
}

.audit__check[data-status="warn"] .audit__badge {
  background: var(--tint-warn);
  color: var(--warn-ink);
}

.audit__check[data-status="fail"] .audit__badge {
  background: var(--tint-warn);
  color: var(--danger);
}

.audit__counts {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
}

.audit__counts th,
.audit__counts td {
  padding: var(--space-1) var(--space-2) var(--space-1) 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.audit__counts td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.audit__counts thead th {
  color: var(--ink-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.audit__counts thead th:not(:first-child) {
  text-align: right;
}

.audit__differs th,
.audit__differs td {
  color: var(--warn-ink);
  font-weight: 700;
}

.audit__runs {
  max-height: 28rem;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  font-size: var(--text-sm);
}

.audit__run {
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere;
}

.audit__when {
  display: inline-block;
  min-width: 5rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.audit__who {
  color: var(--ink-faint);
}

.audit__run--error .audit__what {
  color: var(--danger);
  font-weight: 600;
}

/* ───────────────────────────────────────────── Settings' Sync card */

.sync-card__link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* The count inside a link button, as the Pending tab's count is drawn:
 * charcoal on the brand orange, 4.9:1 in light and 5.9:1 in dark (views.css
 * .tabs__count). views.css's .card__count is brand-orange TEXT, 2.52:1 on the
 * white button — too faint for a number (round-1 review). A flex item's
 * leading space collapses, so the count keeps its own gap. */
.sync-card__link .card__count,
.audit__link .card__count {
  margin-left: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: 999px;
  background: var(--emphasis);
  color: var(--ps-charcoal);
  font-size: var(--text-md);
  line-height: 1.5;
}

.sync-card__link .card__count:empty {
  display: none;
}