/* ============================================================================
   Augurea · reviews.css — moderated customer reviews (PDP panel, reviews page,
   "my reviews" and the review form).

   Doctrine (slice-4, unchanged here): every value comes from tokens.css custom
   properties — no raw hex, no new color. Structural classes only; the shared
   system does the rest (.wrap, .btn, .badge, .field/.field-err/.field-help/
   .field-check, .link-btn). The canvas is pure white and the site ships a
   single light theme (see tokens.css and the intaglio.css note), so there is no
   prefers-color-scheme block: adding one would invent a palette the brand does
   not have. Mobile-first: the stacked rules are the base, wider viewports only
   add columns and air.

   Loaded page-scoped: the PDP gets it from reviews/_review_panel.html, which
   only renders behind REVIEWS_READ_ENABLED, so flags off leaves the PDP byte
   for byte as it was (contract §8). The standalone pages link it in page_css.
   ============================================================================ */

/* ---- shared type/meta ---------------------------------------------------- */
.reviews-panel-title,.reviews-page-title{font-family:var(--serif);margin:0}
.reviews-panel-title{font-size:var(--h2);font-weight:400;line-height:1.1;letter-spacing:-.01em}
.reviews-page-title{font-size:clamp(26px,4vw,38px)}
.reviews-attribution{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--warm-grey);margin:8px 0 20px}
.reviews-empty{color:var(--muted);font-size:14px;margin:0;padding:18px 0}

/* ---- PDP panel ----------------------------------------------------------- */
.reviews-panel{padding-block:40px 56px;border-top:1px solid var(--line);background:var(--bg)}

/* ---- list ---------------------------------------------------------------- */
.reviews-list{display:flex;flex-direction:column;gap:14px;margin:0}
.reviews-item{background:var(--surface);border:1px solid var(--line);padding:18px 18px 16px}
.reviews-item-title{font-family:var(--serif);font-size:18px;line-height:1.25;margin:0 0 10px}
.reviews-item-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 12px}
.reviews-item-by,.reviews-item-date{font-size:12px;color:var(--muted)}
.reviews-rating{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--burgundy);
  border:1px solid var(--burgundy);padding:3px 8px;white-space:nowrap}
.reviews-item-body{font-size:15px;line-height:1.6;color:var(--ink);margin:0 0 14px;
  overflow-wrap:anywhere}
.reviews-item-helpful{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--warm-grey);margin:0}

/* "helpful" toggle — a quiet control, never a second CTA next to .btn */
.reviews-helpful-form{margin-top:10px}
.reviews-helpful-btn{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--burgundy);background:none;
  border:1px solid var(--line-ui);padding:9px 14px;min-height:38px;cursor:pointer;
  transition:border-color var(--dur-fast,.2s) var(--ease-out,ease),
    background var(--dur-fast,.2s) var(--ease-out,ease)}
.reviews-helpful-btn:hover{border-color:var(--burgundy);background:var(--cream)}
.reviews-helpful-btn[aria-pressed="true"]{border-color:var(--burgundy);background:var(--cream-2)}
.reviews-helpful-btn:focus-visible{outline:2px solid var(--burgundy);outline-offset:1px}

/* ---- actions / links ----------------------------------------------------- */
.reviews-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin:20px 0 0}
.reviews-link{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--burgundy);text-decoration:none;border-bottom:1px solid var(--line-2);
  padding-bottom:2px;transition:border-color var(--dur-fast,.2s) var(--ease-out,ease)}
.reviews-link:hover{border-color:var(--burgundy)}
.reviews-link-cta{font-weight:600}

/* ---- standalone pages ---------------------------------------------------- */
.reviews-page .reviews-list{margin-top:18px}
.reviews-back{font-family:var(--mono);font-size:12px;letter-spacing:.06em;margin:0 0 14px}
.reviews-back a{color:var(--muted);text-decoration:none}
.reviews-back a:hover{color:var(--burgundy)}
.reviews-pager{display:flex;gap:22px;margin-top:26px;font-family:var(--mono);font-size:12px;
  letter-spacing:.06em;text-transform:uppercase}
.reviews-pager a{color:var(--burgundy);text-decoration:none}
.reviews-pager a:hover{color:var(--burgundy-deep)}

/* ---- my reviews ---------------------------------------------------------- */
.reviews-status{border-color:var(--line-2);color:var(--muted)}
.reviews-status-published{border-color:var(--good);color:var(--good)}
.reviews-status-pending{border-color:var(--gold-ink);color:var(--gold-ink)}
.reviews-status-rejected,.reviews-status-hidden{border-color:var(--burgundy);color:var(--burgundy)}
.reviews-item-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.reviews-withdraw-link{border-bottom-color:var(--line)}

/* ---- form ---------------------------------------------------------------- */
/* The form page is a single column of prose: cap the measure and keep the
   error summary, labels and actions on the same left edge as the fields. */
.reviews-form-page{max-width:760px}
.reviews-form{max-width:640px;margin-top:22px}
.reviews-form-product{font-family:var(--serif);font-size:19px;color:var(--muted);margin:6px 0 0}
.reviews-form .field textarea{min-height:170px;line-height:1.55;resize:vertical}
.reviews-field-consent{gap:8px}
.reviews-field-consent .field-check{margin-bottom:0}
.reviews-field-consent .field-check label{font-family:var(--sans);font-size:13px;
  letter-spacing:normal;text-transform:none;color:var(--muted)}
.reviews-form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}
.reviews-submit-status{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.reviews-error-summary{border:1px solid var(--burgundy);background:var(--cream);
  padding:16px 18px;margin:20px 0 4px}
.reviews-error-summary:focus-visible{outline:2px solid var(--burgundy);outline-offset:2px}
.reviews-error-summary-title{font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--burgundy);margin:0 0 8px}
.reviews-error-summary ul{margin:0;padding-left:18px;font-size:13px;color:var(--ink)}
.reviews-error-summary a{color:var(--burgundy)}

/* ---- withdrawal confirmation --------------------------------------------- */
/* The page states an irreversible consequence, so the warning is the loudest
   thing on it and the review it is about is quoted quietly underneath. */
.reviews-withdraw-warning{max-width:640px;border-left:2px solid var(--burgundy);
  background:var(--cream);padding:14px 16px;margin:18px 0 0;font-size:14px;
  line-height:1.6;color:var(--ink)}
.reviews-withdraw-subject{max-width:640px;font-family:var(--serif);font-size:18px;
  line-height:1.3;color:var(--muted);margin:16px 0 0;overflow-wrap:anywhere}
.reviews-withdraw-form{margin-top:6px}

/* ---- wider viewports ----------------------------------------------------- */
@media(min-width:720px){
  .reviews-panel{padding-block:56px 72px}
  .reviews-item{padding:22px 24px 20px}
  .reviews-item-title{font-size:20px}
  .reviews-list{gap:16px}
}

/* ============================================================================
   v1.1 (issue #71 D) - aggregate summary, histogram-as-filter, sort/filter
   controls, verified badge and the accessible star widget. Same doctrine as
   above: tokens only, structural classes only, not one inline style. The
   histogram deserves a note: a bar cannot carry its own width (CSP forbids the
   style attribute), so it carries one of the width classes below and the
   template snaps the percentage to the 5 % step they define.
   ============================================================================ */

/* ---- screen-reader-only text --------------------------------------------- */
/* The star glyphs are decorative; the words a screen reader needs live here.
   Same recipe as .soon-sr-only (static/css/soon.css). */
.reviews-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* ---- star row (display) --------------------------------------------------- */
/* Escaped code points, not literal glyphs: a stylesheet served without an
   explicit charset would otherwise depend on the referring document's
   encoding. \2606 is the hollow star, \2605 the solid one. */
.reviews-stars{display:inline-flex;gap:2px;color:var(--burgundy);font-size:15px;line-height:1}
.reviews-star{position:relative;display:inline-block;width:1em;height:1em;line-height:1}
.reviews-star::before{content:"\2606"}
.reviews-star-full::before{content:"\2605"}
.reviews-star-half::after{content:"\2605";position:absolute;inset:0;overflow:hidden;
  clip-path:inset(0 50% 0 0)}

/* ---- PDP buy-rail headline (issue #71 C: "una sola cifra protagonista") ----
   Our own figure takes the .pdp-rating slot (pdp.css) the third-party community
   badge used to own; only the two things that slot did not already style are
   declared here. Lives in reviews.css, not pdp.css, because it is only ever on
   screen when reviews/_review_panel.html has linked this file — with the flags
   down the PDP keeps exactly the assets and bytes it had in v1. */
.pdp-rating-own{gap:10px}
.pdp-rating-own-value{font-family:var(--serif);font-size:17px;color:var(--ink)}

/* ---- summary block -------------------------------------------------------- */
.reviews-summary{border:1px solid var(--line);background:var(--surface);padding:18px;
  margin:0 0 22px}
.reviews-summary-title,.reviews-hist-title,.reviews-best-title,.reviews-controls-legend,
.reviews-list-title{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--warm-grey);margin:0 0 12px}
.reviews-summary-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;
  margin:0 0 18px}
.reviews-summary-figure{display:flex;align-items:baseline;gap:8px;margin:0}
.reviews-summary-average{font-family:var(--serif);font-size:30px;line-height:1;color:var(--ink)}
.reviews-summary-scale{font-family:var(--mono);font-size:12px;color:var(--muted)}
.reviews-summary-count,.reviews-summary-verified{font-size:13px;color:var(--muted);margin:0}
.reviews-summary-recommend{font-size:13px;color:var(--burgundy);margin:0}

/* ---- histogram (each row is a filter) ------------------------------------- */
.reviews-hist-title{margin:0 0 8px}
.reviews-hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.reviews-hist-row{margin:0}
.reviews-hist-link{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:10px;padding:5px 6px;text-decoration:none;color:var(--ink);border:1px solid transparent;
  transition:border-color var(--dur-fast,.2s) var(--ease-out,ease),
    background var(--dur-fast,.2s) var(--ease-out,ease)}
.reviews-hist-link:hover{border-color:var(--line-ui);background:var(--cream)}
.reviews-hist-link:focus-visible{outline:2px solid var(--burgundy);outline-offset:1px}
.reviews-hist-link[aria-current="true"]{border-color:var(--burgundy);background:var(--cream-2)}
.reviews-hist-stars,.reviews-hist-pct,.reviews-hist-count{font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;color:var(--muted);white-space:nowrap}
/* Each row is its own grid, so an `auto` first column would be as wide as that
   row's own label and "1 estrella" would start its bar left of "5 estrellas".
   Fixed measures keep the four columns in one vertical line in both languages. */
.reviews-hist-stars{min-width:12ch}
.reviews-hist-pct{min-width:6ch;text-align:right}
.reviews-hist-count{min-width:5ch;text-align:right}
.reviews-hist-bar{display:block;height:8px;background:var(--cream-2);border:1px solid var(--line)}
.reviews-hist-fill{display:block;height:100%;background:var(--burgundy)}
.reviews-hist-fill-w0{width:0}
.reviews-hist-fill-w5{width:5%}
.reviews-hist-fill-w10{width:10%}
.reviews-hist-fill-w15{width:15%}
.reviews-hist-fill-w20{width:20%}
.reviews-hist-fill-w25{width:25%}
.reviews-hist-fill-w30{width:30%}
.reviews-hist-fill-w35{width:35%}
.reviews-hist-fill-w40{width:40%}
.reviews-hist-fill-w45{width:45%}
.reviews-hist-fill-w50{width:50%}
.reviews-hist-fill-w55{width:55%}
.reviews-hist-fill-w60{width:60%}
.reviews-hist-fill-w65{width:65%}
.reviews-hist-fill-w70{width:70%}
.reviews-hist-fill-w75{width:75%}
.reviews-hist-fill-w80{width:80%}
.reviews-hist-fill-w85{width:85%}
.reviews-hist-fill-w90{width:90%}
.reviews-hist-fill-w95{width:95%}
.reviews-hist-fill-w100{width:100%}

/* ---- "how we calculate this" ---------------------------------------------- */
.reviews-summary-how{margin-top:16px;border-top:1px solid var(--line);padding-top:10px}
.reviews-summary-how-title{font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--burgundy);cursor:pointer}
.reviews-summary-how-title:focus-visible{outline:2px solid var(--burgundy);outline-offset:2px}
.reviews-summary-how-body{font-size:13px;line-height:1.6;color:var(--muted);margin:10px 0 0;
  max-width:60ch}
.reviews-summary-how-list{list-style:none;margin:10px 0 0;padding:0;display:flex;
  flex-direction:column;gap:4px}
.reviews-summary-how-row{display:flex;justify-content:space-between;gap:16px;max-width:340px;
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted)}
.reviews-summary-how-key{color:var(--muted)}
.reviews-summary-how-value{color:var(--ink)}

/* The two capture fields are `.field` wrappers first; these only set the rhythm
   the shared `.field` rule cannot know about (a fieldset has no bottom margin
   of its own). */
.reviews-field-rating,.reviews-field-recommends{display:block;margin-bottom:18px}

/* ---- badges on a review row ----------------------------------------------- */
.reviews-item-badges{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.reviews-badge{font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;border:1px solid var(--line-2);color:var(--muted);padding:3px 8px;
  white-space:nowrap}
.reviews-badge-verified{border-color:var(--good);color:var(--good)}
.reviews-badge-recommends{border-color:var(--line-ui)}

/* ---- sort and filter controls --------------------------------------------- */
.reviews-controls{margin:0 0 20px}
.reviews-controls-set{border:1px solid var(--line);margin:0;padding:12px 16px 16px;
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px}
.reviews-controls-legend{margin:0;padding:0 6px}
.reviews-control{display:flex;flex-direction:column;gap:4px}
.reviews-control-check{flex-direction:row;align-items:center;gap:8px}
.reviews-control-label{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.reviews-control-input{min-height:38px;font-family:var(--sans);font-size:14px;padding:6px 8px;
  border:1px solid var(--line-ui);background:var(--surface);color:var(--ink)}
.reviews-control-input:focus-visible{outline:2px solid var(--burgundy);outline-offset:1px}
.reviews-control-checkbox{width:18px;height:18px;accent-color:var(--burgundy)}
.reviews-control-checkbox:focus-visible{outline:2px solid var(--burgundy);outline-offset:2px}
.reviews-controls-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}

/* ---- best positive / best critical ---------------------------------------- */
.reviews-best{margin:0 0 22px}
.reviews-best-title{margin:0 0 10px}
.reviews-list-title{margin:0 0 10px}
.reviews-best-grid{display:flex;flex-direction:column;gap:14px}
.reviews-best-col{flex:1 1 0}
.reviews-best-heading{font-family:var(--serif);font-size:15px;color:var(--muted);margin:0 0 8px}

/* ---- star widget (capture) ------------------------------------------------ */
/* The radios are hidden, never removed: they keep the arrow-key behaviour, the
   `required` check and the accessible names.

   DOM order IS visual order: 1..5 ascending, no `row-reverse` (UX-A11Y-2).
   The earlier layout rendered 5..1 and flipped it back with `row-reverse`, so
   keyboard order, focus order and reading order all ran opposite to what the
   eye saw. The price is that "fill every star up to the chosen one" now has to
   reach BACKWARDS through the siblings, which only `:has()` can do; the forward
   half is kept in its own rule so a browser without `:has()` still marks the
   chosen star, and the worst case is a widget that stops previewing the fill
   while staying completely operable. */
.reviews-stars-input,.reviews-choice-set{border:0;padding:0;margin:0;min-width:0}
.reviews-stars-legend,.reviews-choice-legend{font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0}
.reviews-stars-hint{font-size:12px;color:var(--muted);margin:4px 0 8px}
.reviews-stars-options{display:flex;gap:4px}
.reviews-stars-radio{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.reviews-stars-label{display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;min-height:40px;font-size:28px;line-height:1;color:var(--line-ui);
  cursor:pointer;transition:color var(--dur-fast,.2s) var(--ease-out,ease)}
.reviews-stars-label::before{content:"\2606"}
.reviews-stars-radio:checked + .reviews-stars-label::before,
.reviews-stars-label:hover::before{content:"\2605"}
.reviews-stars-radio:checked + .reviews-stars-label,
.reviews-stars-label:hover{color:var(--burgundy)}
/* every LOWER star, which in an ascending DOM comes before the chosen one */
.reviews-stars-label:has(~ .reviews-stars-radio:checked)::before,
.reviews-stars-label:has(~ .reviews-stars-label:hover)::before{content:"\2605"}
.reviews-stars-label:has(~ .reviews-stars-radio:checked),
.reviews-stars-label:has(~ .reviews-stars-label:hover){color:var(--burgundy)}
.reviews-stars-radio:focus-visible + .reviews-stars-label{outline:2px solid var(--burgundy);
  outline-offset:2px}

/* ---- yes/no question ------------------------------------------------------ */
.reviews-choice{display:inline-flex;align-items:center;gap:8px;margin:8px 20px 0 0}
.reviews-choice-radio{width:18px;height:18px;accent-color:var(--burgundy)}
.reviews-choice-radio:focus-visible{outline:2px solid var(--burgundy);outline-offset:2px}
.reviews-choice-label{font-family:var(--sans);font-size:14px;color:var(--ink);cursor:pointer}

/* ---- wider viewports ------------------------------------------------------ */
@media(min-width:720px){
  .reviews-summary{padding:22px 24px}
  .reviews-best-grid{flex-direction:row;gap:16px}
  .reviews-hist-link{gap:14px;padding:5px 8px}
}