/* web/contact-review.css — Contacts → To review as flash cards (web/contact-review.js, release 325; docs/CONTACT_REVIEW.md).
   Owner, 2026-10-14: "show me full contact cards side to side in a flash card fashion so that I can quickly decide if they
   are same." Two cards of equal width and height whose rows line up (the cards are subgrids of one grid: a row is as tall
   as the taller of its two cells), a large photo on a thin banner, "Same" marks, and ‹ Prev · Different person · Same
   person · Next › kept at the foot of the screen while the cards scroll. At 640 px or less the cards stack, A above B.
   Every colour is a theme token (styles.css :root; the dark theme re-declares them in studio-v2.css); nothing is wider
   than a phone. */

/* Network's switch above the pair (web/network.js pplSwitch) */
.np-ppl-viewrow { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.np-ppl-viewrow.is-inline { margin: 0 0 0 auto; }
.np-ppl-cards { min-width: 0; }

.cr { min-width: 0; }
.cr-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cr-live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* where he is, and why these two */
.cr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-width: 0; }
.cr-h { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.25; color: var(--ink); font-variant-numeric: tabular-nums; }
.cr-h:focus { outline: none; }
.cr-h:focus-visible, .cr-empty:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 6px; }
.cr-why { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; margin: 0; }
.cr-reason { flex: 0 0 auto; padding: 0 10px; border: 1px solid var(--slate-line); border-radius: var(--radius-pill); background: var(--slate-tint);
  font-size: 12px; font-weight: 700; line-height: 22px; color: var(--ink); }
.cr-detail { min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
/* Studio's read of the pair, on its own line under "Pair n of N": a reading aid, never a decision */
.cr-proof { flex: 1 1 100%; min-width: 0; margin: 0; padding: 4px 10px; border: 1px solid var(--slate-line); border-left-width: 3px;
  border-radius: var(--radius-sm); background: var(--slate-tint); font-size: 13px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.cr-proof.is-sure { border-color: var(--green-line); border-left-color: var(--green); background: var(--green-tint); }
.cr-proof.is-unsure { border-color: var(--amber-line); border-left-color: var(--amber); background: var(--amber-tint); }
.cr-proof.is-different { border-color: var(--red-line); border-left-color: var(--red); background: var(--red-tint); }
/* a 'check' pair: linked as one person already, and the records do not prove it */
.cr-why.is-check .cr-reason { border-color: var(--amber-line); background: var(--amber-tint); }
.cr-note { margin: 0; font-size: 13px; color: var(--ink-soft); }
.cr-err { margin: 0; padding-left: 8px; border-left: 3px solid var(--red); font-size: 13px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }

/* "You said: Same person" with Undo, on a pair decided before */
.cr-said { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border: 1px solid var(--slate-line);
  border-radius: var(--radius-sm); background: var(--slate-tint); color: var(--ink); font-size: 14px; }
.cr-said.is-accepted { border-color: var(--green-line); background: var(--green-tint); }
.cr-said-n { font-size: 13px; color: var(--ink-soft); }
.cr-said .cr-err { flex: 1 1 100%; }

/* the two cards: one grid, each card a subgrid of its rows, so a row lines up across both and they end level */
.cr-cards { min-width: 0; container: crcards / inline-size; }
.cr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; min-width: 0; }
.cr-card { display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); min-width: 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
@supports not (grid-template-rows: subgrid) {
  .cr-card { display: flex; flex-direction: column; }
}
.cr-row { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 18px; border-top: 1px solid var(--line-soft); }
.cr-k { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.cr-v { min-width: 0; font-size: 14px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
/* wide enough (two cards over 400 px each): the name of a row at its left, as the contact window's facts */
@container crcards (min-width: 840px) {
  .cr-row:not(.cr-top):not(.cr-foot) { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 0 14px; align-items: baseline; }
}
.cr-none { color: var(--ink-faint); }
.cr-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.cr-row--about .cr-clamp { -webkit-line-clamp: 2; }

/* the top: a thin banner (theirs, or a band of the theme), the large photo on it, the name and where the record came from */
.cr-top { position: relative; padding: 0 18px 14px; border-top: 0; }
.cr-band { position: relative; height: 64px; margin: 0 -18px; overflow: hidden; background: var(--blue-tint); }
.cr-band-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cr-ab { position: absolute; top: 8px; right: 10px; display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px;
  padding: 0 8px; border-radius: var(--radius-pill); background: var(--card); color: var(--ink); font-size: 12px; font-weight: 800; box-shadow: var(--shadow); }
.cr-id { display: flex; align-items: flex-end; gap: 14px; min-width: 0; margin-top: -40px; }
.cr-photo { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 96px; height: 96px;
  overflow: hidden; border: 3px solid var(--card); border-radius: 50%; background: var(--slate-tint); box-shadow: var(--shadow); }
.cr-ini { font-size: 32px; font-weight: 800; letter-spacing: .02em; color: var(--ink-soft); user-select: none; }
.cr-photo-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.cr-who { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; flex: 1 1 0; min-width: 0; padding-bottom: 4px; }
.cr-name { max-width: 100%; padding: 0; border: 0; background: none; font: inherit; font-size: 19px; font-weight: 800; line-height: 1.25; color: var(--ink);
  text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.cr-name:hover { color: var(--blue); text-decoration: underline; }
.cr-name:focus-visible, .cr-li:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.cr-who-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 20px; }   /* kept with no chip: the two names level */

/* values */
.cr-co { font-weight: 600; }
.cr-li { font-weight: 700; color: var(--blue); text-decoration: none; }
.cr-li:hover { text-decoration: underline; }
.cr-slug { margin-left: 8px; font-size: 12.5px; color: var(--ink-soft); overflow-wrap: anywhere; }
.cr-tier { display: inline-flex; margin-left: 6px; padding: 0 7px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-soft);
  font-size: 11.5px; font-weight: 700; line-height: 18px; color: var(--ink); }
.cr-list { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
.cr-li-item { min-width: 0; }
.cr-tag { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.cr-val { color: var(--ink); }
.cr-val.is-masked { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.cr-lab { margin-left: 6px; font-size: 12.5px; color: var(--ink-soft); }
.cr-ev { display: flex; flex-direction: column; min-width: 0; }
.cr-ev + .cr-ev { margin-top: 4px; }
.cr-ev-h { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.cr-ev-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-entry { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.cr-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.cr-chip { padding: 1px 9px; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface-soft); font-size: 12.5px; line-height: 20px; color: var(--ink); }
.cr-more { font-size: 12.5px; line-height: 22px; color: var(--ink-soft); }
.cr-stage { font-weight: 700; }
/* "Same": both hold it (a reading aid: never colour alone, the word says it) */
.cr-same { display: inline-flex; align-items: center; margin-left: 8px; padding: 0 8px; border: 1px solid var(--green-line); border-radius: var(--radius-pill);
  background: var(--green-tint); font-size: 11px; font-weight: 800; letter-spacing: .03em; line-height: 18px; color: var(--ink); white-space: nowrap; vertical-align: 1px; }
.cr-who-meta .cr-same { margin-left: 0; }
.cr-foot { padding-top: 9px; padding-bottom: 12px; font-size: 12.5px; color: var(--ink-soft); background: var(--surface-soft); }

/* Read both profiles, under the cards */
.cr-read { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cr-read-words { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--ink-soft); overflow-wrap: anywhere; }

/* ‹ Prev · Different person · Same person · Next ›: at the foot of the screen while the cards scroll */
.cr-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 -2px;
  padding: 12px 2px 10px; border-top: 1px solid var(--line); background: var(--card); }
.cr-btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
.cr-btns .btn { min-height: 44px; font-size: 14.5px; }
.cr-btns .cr-no, .cr-btns .cr-yes { min-width: 190px; min-height: 50px; padding: 0 24px; font-size: 15.5px; }
.cr-btns .cr-prev, .cr-btns .cr-next { min-width: 92px; }
.cr-btns .btn.is-busy { opacity: .55; cursor: progress; }
.cr-state { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.cr-state:empty { display: none; }
.cr-bar > .cr-err { align-self: stretch; }
.cr-keys { margin: 0; font-size: 12px; color: var(--ink-soft); }
.cr-kbd { display: inline-block; min-width: 18px; padding: 0 5px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px;
  background: var(--surface-soft); font: inherit; font-size: 12.5px; font-weight: 700; line-height: 18px; text-align: center; color: var(--ink); }
.cr-endacts { display: flex; }
/* the back-to-top button sits over the bar's right end: lifted above it while the cards are shown */
body:has(section.view:not(.hidden) .np-tabpanel:not([hidden]) .np-cview:not([hidden]) .cr-bar) .u-totop { bottom: 96px; }

@media (max-width: 640px) {
  .cr-grid { grid-template-columns: minmax(0, 1fr); row-gap: 14px; }
  .cr-row { padding: 9px 14px; }
  .cr-top { padding: 0 14px 12px; }
  .cr-band { margin: 0 -14px; height: 56px; }
  .cr-id { margin-top: -36px; gap: 12px; }
  .cr-photo { width: 80px; height: 80px; }
  .cr-ini { font-size: 26px; }
  .cr-name { font-size: 17px; }
  .cr-h { font-size: 16px; }
  /* one row, his order: the arrows alone for Prev and Next (their names stay for a screen reader) */
  .cr-btns { display: grid; grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 6px; width: 100%; }
  .cr-btns .btn { min-width: 0; padding: 0 6px; font-size: 14px; white-space: normal; line-height: 1.15; }
  .cr-btns .cr-no, .cr-btns .cr-yes { min-width: 0; min-height: 48px; padding: 0 8px; font-size: 14px; }
  .cr-btns .cr-prev, .cr-btns .cr-next { min-width: 44px; font-size: 20px; }
  .cr-bl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cr-keys { display: none; }
  .cr-bar { padding: 8px 2px; }
}
@media (hover: none) and (pointer: coarse) { .cr-keys { display: none; } }
@media (prefers-reduced-motion: reduce) { .cr-name { transition: none; } }

/* Full screen (owner, 2026-10-14: "Put a full screen mode where we can see both contacts in details"): the cards fill
   the window over the page (under every dialog, the contact window and the toasts); the heading on top, the cards scrolling in
   their own area, the buttons at the foot. Only while To review is the panel on screen (a hidden panel hides it too). */
.cr-fullbtn { margin-left: auto; }
.cr--full { position: fixed; inset: 0; z-index: 890; display: flex; flex-direction: column; padding: 14px clamp(12px, 2.5vw, 32px) 0;
  background: var(--bg, var(--surface-soft)); }
.cr--full > .cr-body { flex: 1 1 auto; min-height: 0; gap: 10px; }
.cr--full .cr-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-bottom: 12px; }
.cr--full .cr-bar { position: static; margin: 0 calc(-1 * clamp(12px, 2.5vw, 32px)); padding: 10px 16px 12px; }
.cr--full .cr-head { gap: 6px 14px; }
.cr--full .cr-proof { padding: 3px 10px; }
/* the top of a card made small: the photo beside the name, no tall banner, so the facts start high */
.cr--full .cr-band { display: none; }
.cr--full .cr-top { padding-top: 12px; }
.cr--full .cr-id { margin-top: 0; align-items: center; }
.cr--full .cr-ab { top: 10px; }
.cr--full .cr-photo { width: 76px; height: 76px; border-width: 2px; }
.cr--full .cr-ini { font-size: 26px; }
.cr--full .cr-row { padding: 7px 16px; }
.cr--full .cr-v { font-size: 14.5px; }
html:has(section.view:not(.hidden) .np-tabpanel:not([hidden]) .np-cview:not([hidden]) .cr--full) { overflow: hidden; }
html:has(section.view:not(.hidden) .np-tabpanel:not([hidden]) .np-cview:not([hidden]) .cr--full) .u-totop { display: none; }
@media (max-width: 640px) {
  .cr--full { padding: 10px 10px 0; }
  .cr--full .cr-bar { margin: 0 -10px; padding: 8px 6px; }
  .cr--full .cr-photo { width: 60px; height: 60px; }
}