/* ============================================================
   buyer_rep.components.css · Buyer reputation band (MIRROR of the
   shipped seller public-trust row "ผลงานที่ตรวจสอบได้").
   Ported from docs/design/handoff_out/buyer_rep_band/ — component
   rules only (the prototype's demo scaffold + the already-shipped
   .opener do NOT port). A viewer meeting an incoming offer sees the
   buyer's public-safe AGGREGATE track record (member_since +
   completed_with_sellers) — NEVER a score/rating/dispute/per-deal.
   EXTENDS Atlas — every value resolves to a supply.tokens.css var.
   Loaded AFTER trade.components.css (registered in shell.html).
   ============================================================ */

/* THE BAND (.buyrep) — sibling of the seller public-trust row.
   Left brass rail (mirrors .pvm-hero .ph-accent). */
.buyrep{ position:relative; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  box-shadow:var(--sh-sm); overflow:hidden; }
.buyrep .br-accent{ position:absolute; inset:0 auto 0 0; width:5px; background:linear-gradient(180deg,var(--brand),var(--brand2)); }
.buyrep.is-thin .br-accent{ background:linear-gradient(180deg,var(--pv-stale-ln),var(--pv-stale)); }
.buyrep.is-loading .br-accent{ background:var(--line2); }
.buyrep .br-body{ padding:var(--s4) var(--s4) var(--s4) calc(var(--s4) + 5px); display:flex; flex-direction:column; gap:var(--s3); }

/* the two AGGREGATE figures — the whole public-safe payload */
.br-facts{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
.br-fact{ background:var(--surface2); border:1px solid var(--line); border-radius:var(--r); padding:.6rem .7rem; }
.br-fact .br-fig{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:var(--fs-xl);
  font-weight:var(--fw-x); line-height:1; letter-spacing:-.01em; color:var(--ink); }
.br-fact .br-fig .u{ font-size:var(--fs-sm); color:var(--muted); font-weight:var(--fw-semi); margin-left:.25rem; letter-spacing:0; }
.br-fact .br-lbl{ display:block; font-size:var(--fs-xs); color:var(--ink2); margin-top:.35rem; line-height:1.35; font-weight:var(--fw-semi); }

/* plain, spoken explanation (low digital-literacy) */
.br-note{ display:flex; gap:.5rem; align-items:flex-start; font-size:var(--fs-xs); color:var(--muted); line-height:1.55; }
.br-note b{ color:var(--ink2); font-weight:var(--fw-semi); }

/* the honest GUARD — what we never show (VALUES canon 3, aggregate-only).
   reuses the shipped striped-wall grammar (.unlock/.feedlock). */
.br-guard{ border:1px dashed var(--pv-private-ln); border-radius:var(--r);
  background:repeating-linear-gradient(135deg, var(--pv-private-bg) 0 11px, transparent 11px 22px); padding:.6rem var(--s3); }
.br-guard .bg-top{ display:flex; align-items:center; gap:.4rem; font-size:var(--fs-2xs); font-weight:var(--fw-bold);
  text-transform:uppercase; letter-spacing:.06em; color:var(--pv-private); }
.br-guard .bg-list{ margin:.4rem 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:.3rem .5rem; }
.br-guard .bg-list li{ display:inline-flex; align-items:center; gap:.3rem; font-size:var(--fs-2xs); color:var(--ink2); font-weight:var(--fw-semi); }
.br-guard .bg-list li .c{ color:var(--pv-private); font-weight:var(--fw-x); }
.br-guard .bg-why{ margin-top:.4rem; font-size:var(--fs-2xs); color:var(--muted); line-height:1.5; }

/* thin_file state — "ยังไม่มีประวัติพอ", explicitly NOT "bad" */
.br-thin{ display:flex; gap:.6rem; align-items:flex-start; padding:.2rem 0; }
.br-thin .bt-main b{ display:block; font-size:var(--fs-sm); color:var(--ink); font-weight:var(--fw-bold); }
.br-thin .bt-main p{ margin:.25rem 0 0; font-size:var(--fs-xs); color:var(--muted); line-height:1.55; max-width:52ch; }

/* loading skeleton (reduced-motion safe) */
.br-sk{ background:linear-gradient(90deg, var(--surface2) 0%, var(--line) 50%, var(--surface2) 100%);
  background-size:200% 100%; border-radius:var(--r-sm); animation:brShimmer 1.3s ease-in-out infinite; }
.br-sk.a{ width:60%; height:16px; }
.br-sk.b{ width:38%; height:12px; margin-top:.4rem; }
@keyframes brShimmer{ 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce){ .br-sk{ animation:none; } }

/* the band nested inside an offerline — full-width row, flush, no double border.
   .br-slot is the grid-spanning cell that holds the lazily-fetched band. */
.offerline .br-slot{ grid-column:1 / -1; }
.offerline .br-slot:empty{ display:none; }
.offerline .buyrep{ margin-top:.5rem; box-shadow:none; }

/* the buyer-name → band opener sits inside .ol-buyer (reuses shipped .opener) */
.ol-buyer .opener{ margin-left:.5rem; }

@media (max-width:560px){ .br-facts{ grid-template-columns:1fr; } }
@media (pointer:coarse){ .ol-buyer .opener{ min-height:44px; } }