/**
 * PCA Reviews: cards and the review reader. Self-contained: every class is prefixed, every value is a custom
 * property with a fallback, and nothing depends on the active theme. Where the PCBR theme tokens exist they are
 * used, so the component looks native there and still works elsewhere.
 *
 * Sizes inside the component are in em, relative to --pca-review-text-size, so text scaling keeps proportions.
 */
.pca-reviews {
  --pca-review-radius: var(--pcbr-r-surface, 12px);
  --pca-review-gap: var(--pcbr-space-4, 16px);
  --pca-review-text-size: var(--pcbr-fs-body, 16px);
  --pca-review-background: var(--pcbr-surface, #ffffff);
  --pca-review-border: var(--pcbr-line, #e6e3de);
  --pca-review-ink: var(--pcbr-ink, #1c1b19);
  --pca-review-ink-soft: var(--pcbr-ink-2, #4a4744);
  --pca-review-ink-faint: var(--pcbr-ink-3, #6b6863);
  --pca-review-accent: var(--pcbr-accent, #0f6e7c);
  --pca-review-star: #a86a00;
  /* The source mark: the blue of the X (Twitter) verified badge, which visitors read as "badge" at a glance;
     3.0:1 on white, the minimum for a non-text graphic (the visible words carry the meaning). */
  --pca-review-source-mark: #1d9bf0;
  --pca-review-backdrop: rgba(28, 27, 25, 0.62);
  --pca-review-lines: 4;
  --pca-review-modal-width: 720px;
  --pca-review-modal-height: 85vh;

  display: grid;
  gap: var(--pca-review-gap);
  font-size: var(--pca-review-text-size);
  line-height: 1.5;
  color: var(--pca-review-ink);
}

/* Host themes style these elements globally; inside the component they start clean. Component rules that set
   one of these properties are written with the .pca-reviews prefix so they win over this reset. */
.pca-reviews blockquote,
.pca-reviews p,
.pca-reviews ul,
.pca-reviews h2,
.pca-reviews h3 { margin: 0; padding: 0; border: 0; font-size: inherit; line-height: inherit; color: inherit; }
.pca-reviews blockquote::before,
.pca-reviews blockquote::after { content: none; }
.pca-reviews button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }

.pca-review-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- Grid ---- */
.pca-reviews__list { list-style: none; display: grid; gap: var(--pca-review-gap); grid-template-columns: minmax(0, 1fr); }
.pca-reviews__item { display: flex; min-width: 0; }
@media (min-width: 640px) { .pca-reviews__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pca-reviews__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pca-reviews .pca-reviews__notice { font-size: 0.8125em; color: var(--pca-review-ink-faint); }

/* ---- Card ----
   Identity first (avatar, name, context, source), then rating and date on one line, then the review, then the
   actions on one line at the foot. Groups are 8 to 12px apart; nothing else separates them. */
.pca-review-card {
  display: flex; flex-direction: column; gap: 0.625em; width: 100%; min-width: 0;
  padding: 1em 1.125em 0.5em; background: var(--pca-review-background);
  border: 1px solid var(--pca-review-border); border-radius: var(--pca-review-radius);
}
.pca-review-card__head { display: flex; align-items: flex-start; gap: 0.625em; min-width: 0; }
.pca-review-card__who { display: grid; gap: 0.125em; min-width: 0; font-size: 0.875em; line-height: 1.3; color: var(--pca-review-ink-soft); }
.pca-review-card__author { font-size: 1.0714em; font-weight: 600; color: var(--pca-review-ink); overflow-wrap: anywhere; }
.pca-review-card__context { overflow-wrap: anywhere; }
.pca-review-source { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3em; color: var(--pca-review-ink-soft); }
.pca-review-source__label { min-width: 0; overflow-wrap: anywhere; }
.pca-review-source__icon { flex: none; width: 1.0714em; height: 1.0714em; color: var(--pca-review-source-mark); }
.pca-review-card__rating { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25em 0.75em; }
.pca-review-stars { color: var(--pca-review-star); font-size: 1em; line-height: 1; letter-spacing: 0.08em; }
.pca-review-card__date { font-size: 0.8125em; line-height: 1; color: var(--pca-review-ink-soft); }
.pca-review-card__quote { min-width: 0; }
.pca-review-card__text { color: var(--pca-review-ink); overflow-wrap: anywhere; }
/* The clamp applies only once the script runs: without it the whole review is simply visible. In the clamped
   preview the reviewer's own line breaks collapse to spaces (the newline after each <br> remains in the text), so
   a list at the top of a review does not use up the whole preview; the reader keeps every break. */
.pca-reviews--js .pca-review-card__text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--pca-review-lines); line-clamp: var(--pca-review-lines); overflow: hidden;
}
.pca-reviews--js .pca-review-card__text br { display: none; }
/* Actions: one line, at the foot of every card in a row so neighbours align. Targets stay 44px tall; the card's
   bottom padding is reduced instead of pulling the row up with negative margins, which would overlap the two
   lines when the actions wrap at large text sizes. */
.pca-review-card__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1em; margin-top: auto; }
.pca-reviews .pca-review-card__more, .pca-reviews .pca-review-card__link {
  display: inline-flex; align-items: center; min-height: 44px; font-size: 0.875em;
  color: var(--pca-review-accent); text-decoration: underline; text-underline-offset: 3px;
}
.pca-reviews .pca-review-card__more { font-weight: 600; }
.pca-reviews .pca-review-card__more[hidden] { display: none; }
.pca-reviews .pca-review-card__link { margin-left: auto; }
.pca-reviews .pca-review-full__link {
  display: inline-flex; align-items: center; min-height: 44px; justify-self: start; align-self: flex-start;
  color: var(--pca-review-accent); text-decoration: underline; text-underline-offset: 3px;
}
.pca-reviews a:focus-visible,
.pca-reviews button:focus-visible,
.pca-review-full:focus-visible { outline: 2px solid var(--pca-review-accent); outline-offset: 2px; border-radius: 4px; }
.pca-review-full:focus { outline: none; }

/* ---- Row: one strip of cards that scrolls sideways (opt-in, layout="row") ----
   Native scrolling with scroll snap (proximity, so an enlarged card can still be reached in part), a hidden
   scrollbar, and server-rendered previous/next controls the script reveals only when the strip overflows. The
   strip is positioned so absolutely placed descendants (the screen-reader spans) stay inside it, and padded so
   focus rings are not clipped. A host may set --pca-review-bleed to let the strip run to its gutter. */
/* 18em is 288px at the default text size; a visitor's larger text widens the card with it, up to 84vw. */
.pca-reviews--row { --pca-review-card-width: 18em; --pca-review-bleed: 0px; }
.pca-reviews--row .pca-reviews__list {
  position: relative; display: flex; grid-template-columns: none; gap: var(--pca-review-gap);
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  margin-inline: calc(-1 * var(--pca-review-bleed)); padding-inline: var(--pca-review-bleed); scroll-padding-inline: var(--pca-review-bleed);
  padding-block: 4px; margin-block: -4px;
}
.pca-reviews--row .pca-reviews__list::-webkit-scrollbar { display: none; }
.pca-reviews--row .pca-reviews__item { flex: 0 0 min(84vw, var(--pca-review-card-width)); scroll-snap-align: start; }
.pca-reviews--row .pca-reviews__item:only-child { flex-basis: 100%; }
.pca-reviews__foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.pca-reviews__nav { display: flex; gap: 0.25em; flex: none; }
.pca-reviews__nav[hidden] { display: none; }
.pca-reviews .pca-reviews__nav-btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--pca-review-border); border-radius: 50%; color: var(--pca-review-ink); background: var(--pca-review-background);
}
.pca-reviews .pca-reviews__nav-btn:hover:not([disabled]) { background: var(--pcbr-surface-2, #f7f5f1); }
.pca-reviews .pca-reviews__nav-btn[disabled] { color: var(--pca-review-ink-faint); opacity: 0.45; cursor: default; }

/* ---- Reader (dialog) ---- */
.pca-review-modal {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--pca-review-ink); overflow: hidden;
}
.pca-review-modal:not([open]) { display: none; }
.pca-review-modal[open] { display: flex; align-items: center; justify-content: center; }
.pca-review-modal::backdrop { background: var(--pca-review-backdrop); }
.pca-review-modal__panel {
  display: flex; flex-direction: column; width: min(var(--pca-review-modal-width), calc(100% - 48px)); max-height: var(--pca-review-modal-height);
  background: var(--pca-review-background); border-radius: calc(var(--pca-review-radius) + 4px); overflow: hidden;
  box-shadow: 0 12px 32px rgba(28, 27, 25, 0.16);
}
/* The header stays in place while the reviews scroll beneath it. */
.pca-review-modal__header {
  flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 1em;
  padding: 1em 1em 1em 1.5em; border-bottom: 1px solid var(--pca-review-border); background: var(--pca-review-background);
}
.pca-review-modal__heading { display: grid; gap: 0.25em; min-width: 0; }
.pca-reviews .pca-review-modal__title { font-size: 1.25em; line-height: 1.3; font-weight: 600; }
.pca-reviews .pca-review-modal__notice { font-size: 0.8125em; color: var(--pca-review-ink-faint); }
.pca-reviews .pca-review-modal__close { flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--pca-review-ink); }
.pca-reviews .pca-review-modal__close:hover { background: var(--pcbr-surface-2, #f7f5f1); }
.pca-review-modal__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 1.5em; }
.pca-review-modal__body:focus { outline: none; }
.pca-review-full { display: grid; gap: 0.75em; padding: 1.5em 0; border-bottom: 1px solid var(--pca-review-border); scroll-margin-top: 0; }
.pca-review-full:last-child { border-bottom: 0; }
.pca-review-full__head { display: flex; align-items: flex-start; gap: 0.625em; min-width: 0; }
.pca-review-full__who { display: grid; gap: 0.125em; min-width: 0; font-size: 0.875em; line-height: 1.3; color: var(--pca-review-ink-soft); }
.pca-reviews .pca-review-full__author { font-size: 1.2143em; font-weight: 600; color: var(--pca-review-ink); overflow-wrap: anywhere; }
.pca-review-full__context { overflow-wrap: anywhere; }
.pca-review-full__rating { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25em 0.75em; }
.pca-review-full__date { font-size: 0.8125em; line-height: 1; color: var(--pca-review-ink-soft); }
.pca-review-full__text { overflow-wrap: anywhere; }

/* Phones: the reader is the screen, clear of the notch and the home indicator. */
@media (max-width: 639px) {
  .pca-review-modal__panel { width: 100%; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; box-shadow: none; }
  .pca-review-modal__header {
    padding-top: calc(0.75em + env(safe-area-inset-top, 0px));
    padding-left: calc(1.25em + env(safe-area-inset-left, 0px));
    padding-right: calc(0.75em + env(safe-area-inset-right, 0px));
  }
  .pca-review-modal__body {
    padding-left: calc(1.25em + env(safe-area-inset-left, 0px));
    padding-right: calc(1.25em + env(safe-area-inset-right, 0px));
    padding-bottom: calc(1.5em + env(safe-area-inset-bottom, 0px));
  }
}

/* The page behind the reader does not scroll; its position is restored on close. */
html.pca-review-modal-open { overflow: hidden; }
body.pca-review-modal-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; }

/* Motion is an enhancement: present only for visitors who have not asked for less. */
@media (prefers-reduced-motion: no-preference) {
  .pca-review-modal[open] .pca-review-modal__panel { animation: pca-review-in 160ms ease-out; }
  .pca-review-modal[open]::backdrop { animation: pca-review-fade 160ms ease-out; }
}
@keyframes pca-review-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pca-review-fade { from { opacity: 0; } to { opacity: 1; } }

/* Avatar: the reviewer's initials on a soft circle, as mail clients show a contact without a photo. Eight muted
   tones, chosen by name (ReviewRenderer::avatar_tone), quiet enough not to compete with the text; a Google
   profile photo, when the feed supplies one, sits over the initials. It leads the identity block, beside the name. */
.pca-reviews {
  /* Grows a little with the text, never past 44px: at 200% text the name column keeps its width. */
  --pca-review-avatar-size: clamp(32px, calc(var(--pca-review-text-size) * 2.25), 44px);
  --pca-review-avatar-ink: var(--pca-review-ink-soft);
  --pca-review-avatar-t0: var(--pcbr-surface-3, #efece6);
  --pca-review-avatar-t1: #f1e7d6; --pca-review-avatar-t2: #e1ebdd; --pca-review-avatar-t3: #dce8ec; --pca-review-avatar-t4: #dde5f2;
  --pca-review-avatar-t5: #e6e0f0; --pca-review-avatar-t6: #f2dfe2; --pca-review-avatar-t7: #f5e4d8; --pca-review-avatar-t8: #e8e6e1;
}
.pca-review-avatar {
  flex: none; position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: var(--pca-review-avatar-size); height: var(--pca-review-avatar-size); border-radius: 50%; overflow: hidden;
  background: var(--pca-review-avatar-t0); color: var(--pca-review-avatar-ink); user-select: none;
}
.pca-review-avatar--t1 { background: var(--pca-review-avatar-t1); } .pca-review-avatar--t2 { background: var(--pca-review-avatar-t2); }
.pca-review-avatar--t3 { background: var(--pca-review-avatar-t3); } .pca-review-avatar--t4 { background: var(--pca-review-avatar-t4); }
.pca-review-avatar--t5 { background: var(--pca-review-avatar-t5); } .pca-review-avatar--t6 { background: var(--pca-review-avatar-t6); }
.pca-review-avatar--t7 { background: var(--pca-review-avatar-t7); } .pca-review-avatar--t8 { background: var(--pca-review-avatar-t8); }
.pca-review-avatar__initials { font-size: calc(var(--pca-review-text-size) * 0.8125); font-weight: 600; line-height: 1; letter-spacing: 0.02em; }
.pca-review-avatar__figure { width: 50%; height: 50%; color: var(--pca-review-ink-faint); }
.pca-review-avatar__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }