/* Browse reviews (assets/browse-reviews.js) in 3Dhive's own shape: hive-cell
   scores, the filament colours an object was printed in, a honeycomb band of
   "prints from the hive" and a card per maker with their print profile.
   Shown in Browse's left panel when the object is clicked, and in the
   Analytics view's left column. Loaded after copied-view.css, whose panel
   and review-sheet rules this refines. */

:root{ --review-honey:#e39418; --review-cell:color-mix(in srgb,var(--ink) 13%,transparent); }
:root[data-theme="dark"]{ --review-honey:#f3b04a; }

/* ── the selected object's heading ─────────────────────────────────────── */

/* The ↗ cue takes no room until it shows, so the frosted heading ends at the
   rating instead of carrying blank space after it. */
.browse-object-heading-row::after{
  max-width:0; margin-left:-10px; overflow:hidden;
  transition:opacity .2s ease,transform .3s cubic-bezier(.2,.8,.2,1),max-width .24s ease,margin-left .24s ease;
}
@media(hover:hover) and (pointer:fine){
  .browse-center-frame:hover .browse-object-heading-row::after{ max-width:1em; margin-left:10px; }
}
.browse-center-frame:has(:focus-visible) .browse-object-heading-row::after{ max-width:1em; margin-left:10px; }

/* The rating opens the Analytics view with its reviews on the left. The
   header ignores the pointer so the object stays draggable behind it. */
button.browse-center-rating{
  pointer-events:auto; margin:-2px -6px; padding:2px 6px; border:0; border-radius:7px;
  background:transparent; color:var(--accent-ink); font:600 12px/1.4 var(--font); cursor:pointer;
  transition:background-color .15s ease;
}
button.browse-center-rating:hover,
button.browse-center-rating[aria-expanded="true"]{ background:color-mix(in srgb,var(--accent-ink) 14%,transparent); }
button.browse-center-rating:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:2px; }

/* ── the reviews view in Browse's left panel ───────────────────────────── */

.browse-review-panel__head{ padding-bottom:14px; border-bottom:1px solid var(--line); }
.browse-review-panel__head.browse-category-browser__head:has(.browse-category-browser__back){ padding-top:20px; }
.browse-review-panel__head .browse-category-browser__back{ margin-bottom:14px; }
.browse-review-panel__head h2{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.browse-review-panel__head h2::after{ content:none!important; }
.browse-review-panel__summary{ margin-top:14px; }
.browse-review-panel__summary:empty{ display:none; }
.browse-category-browser__list.browse-review-panel__list{ flex:1 1 auto; padding:16px 18px 62px; }
/* Phones stack the panels; the reviews move up to sit under their object. */
@media(max-width:760px){
  body[data-view="browse"] .browse-categories > .browse-category-browser[data-reviews]{ order:1; scroll-margin-top:76px; }
  .browse-category-browser__list.browse-review-panel__list{ padding-inline:12px; }
}

/* ── the Analytics view's left column ──────────────────────────────────── */

.browse-review-sheet__titles{ display:grid; gap:10px; min-width:0; }
.browse-review-sheet__titles > strong{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.browse-review-sheet__summary:empty{ display:none; }
.browse-review-sheet > header{ align-items:flex-start; border-bottom:1px solid var(--line); }
.browse-review-sheet > .browse-review-sheet__body{ padding-top:14px; }

/* ── the feed ──────────────────────────────────────────────────────────── */

.browse-reviews{ display:grid; gap:12px; min-width:0; color:var(--ink); font:13px/1.55 var(--font); }
.browse-reviews__empty{ margin:4px 0; color:var(--dim); font:13px/1.6 var(--font); }

/* Five hive cells instead of stars; each fills with honey per point. */
.browse-hive-meter{ display:inline-flex; align-items:center; flex:none; gap:2px; vertical-align:middle; }
.browse-hive-meter > i{
  display:block; width:10px; height:11.5px;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(90deg,var(--review-honey) calc(var(--fill,0) * 100%),var(--review-cell) 0);
}
.browse-hive-meter--large{ gap:3px; }
.browse-hive-meter--large > i{ width:15px; height:17px; }

.browse-reviews__summary{ display:grid; gap:10px; }
.browse-reviews__score{ display:flex; align-items:center; gap:12px; }
.browse-reviews__average{ color:var(--ink); font:700 30px/1 var(--font); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.browse-reviews__score-copy{ display:grid; gap:5px; }
.browse-reviews__score-copy small{ color:var(--dim); font:12px/1.3 var(--font); }
.browse-reviews__printed{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; color:var(--dim); font:12px/1.4 var(--font); }
.browse-reviews__printed-label{ font:650 10px/1.4 var(--font); letter-spacing:.12em; text-transform:uppercase; }
/* The colours overlap like spools on a rack. */
.browse-reviews__swatches{ display:inline-flex; align-items:center; padding-left:4px; }
.browse-reviews__swatches > .browse-review__swatch{
  width:14px; height:14px; margin-left:-4px;
  box-shadow:0 0 0 2px var(--surface),inset 0 0 0 1px color-mix(in srgb,var(--ink) 18%,transparent);
}
.browse-reviews__materials{ font-variant-numeric:tabular-nums; }
.browse-review__swatch{
  display:inline-block; flex:none; width:10px; height:10px; border-radius:50%;
  background:var(--swatch,#ccc); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 22%,transparent);
}

.browse-reviews__section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.browse-reviews__section-head h4{ margin:0; color:var(--dim); font:650 10.5px/1.4 var(--font); letter-spacing:.12em; text-transform:uppercase; }
.browse-reviews__section-head small{ color:var(--dim); font:11px/1.4 var(--font); white-space:nowrap; }

/* Prints from the hive: flat-topped cells, every other one half a cell
   lower, so the row reads as a strip of honeycomb. */
.browse-reviews__gallery{ display:grid; gap:6px; min-width:0; }
.browse-reviews__rail{ position:relative; min-width:0; }
.browse-reviews__strip{
  display:flex; align-items:flex-start; margin:0; padding:2px 2px 4px; list-style:none;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:none;
}
.browse-reviews__strip::-webkit-scrollbar{ display:none; }
.browse-reviews__strip > li{ flex:none; width:92px; height:80px; scroll-snap-align:start; }
.browse-reviews__strip > li + li{ margin-left:-19px; }
.browse-reviews__strip > li:nth-child(even){ margin-top:42px; }
.browse-reviews .browse-reviews__shot{
  position:relative; display:block; width:100%; height:100%; padding:0; border:0; overflow:hidden;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  background:var(--raised); cursor:pointer; transition:transform .15s ease;
}
.browse-reviews .browse-reviews__shot img{ display:block; width:100%; height:100%; max-width:none; margin:0; border:0; border-radius:0; object-fit:cover; }
/* A hexagonal ring inside the cell: honey on hover, the accent on focus. */
.browse-reviews .browse-reviews__shot::after{
  content:""; position:absolute; inset:0; opacity:0; background:var(--review-honey); transition:opacity .15s ease;
  clip-path:polygon(evenodd,25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%,25% 0,27% 4.5%,4% 50%,27% 95.5%,73% 95.5%,96% 50%,73% 4.5%,27% 4.5%);
}
.browse-reviews .browse-reviews__shot:hover{ transform:scale(1.04); }
.browse-reviews .browse-reviews__shot:hover::after{ opacity:1; }
.browse-reviews .browse-reviews__shot:focus{ outline:none; }
.browse-reviews .browse-reviews__shot:focus-visible::after{ opacity:1; background:var(--accent-ink); }
.browse-reviews__nudge{
  position:absolute; top:50%; z-index:1; display:grid; place-items:center; width:28px; height:28px; margin-top:-14px; padding:0;
  border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--ink);
  box-shadow:var(--shadow-sm); font:600 18px/1 var(--font); cursor:pointer;
}
.browse-reviews__nudge--previous{ left:-6px; }
.browse-reviews__nudge--next{ right:-6px; }
.browse-reviews__nudge[hidden]{ display:none; }
.browse-reviews__nudge:focus-visible{ outline:2px solid var(--accent-ink); outline-offset:2px; }

/* A card per maker. */
.browse-reviews__list{ display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.browse-reviews .browse-review{
  display:grid; gap:8px; margin:0; padding:14px 14px 12px; border:1px solid var(--line); border-radius:16px;
  background:var(--raised); outline:none; scroll-margin:12px;
}
.browse-reviews .browse-review:focus-visible{ box-shadow:0 0 0 2px var(--accent-ink); }
.browse-reviews .browse-review[data-flash]{ animation:browse-review-flash 1.5s ease-out; }
@keyframes browse-review-flash{
  0%,40%{ border-color:var(--review-honey); box-shadow:0 0 0 3px color-mix(in srgb,var(--review-honey) 30%,transparent); }
  100%{ border-color:var(--line); box-shadow:0 0 0 0 transparent; }
}
.browse-review__head{ display:flex; align-items:center; gap:10px; min-width:0; }
.browse-review__avatar{
  display:grid; place-items:center; flex:none; width:30px; height:34px;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:color-mix(in srgb,var(--review-honey) 28%,var(--surface)); color:var(--ink);
  font:700 10.5px/1 var(--font); letter-spacing:.02em;
}
.browse-review__who{ display:grid; flex:1 1 auto; min-width:0; }
.browse-reviews .browse-review__who strong{ overflow:hidden; color:var(--ink); font:600 13px/1.3 var(--font); text-overflow:ellipsis; white-space:nowrap; }
.browse-review__who small{ overflow:hidden; color:var(--dim); font:11.5px/1.35 var(--font); text-overflow:ellipsis; white-space:nowrap; }
.browse-review__sample{
  flex:none; padding:2px 8px; border:1px dashed color-mix(in srgb,var(--dim) 60%,transparent); border-radius:999px;
  color:var(--dim); font:650 9.5px/1.4 var(--font); letter-spacing:.1em; text-transform:uppercase;
}
.browse-review__verdict{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; }
.browse-reviews .browse-review__verdict strong{ color:var(--ink); font:650 13.5px/1.35 var(--font); }
.browse-reviews .browse-review p{ margin:0; }
.browse-reviews .browse-review__text{ color:var(--text,var(--ink)); font:13px/1.55 var(--font); }
.browse-review__profile{ display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.browse-review__profile > li{
  display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); color:var(--text,var(--ink)); font:600 11px/1.4 var(--font); font-variant-numeric:tabular-nums;
}
.browse-review__photos{ display:flex; flex-wrap:wrap; gap:6px; }
.browse-reviews .browse-review__photos :is(img,video){
  display:block; width:64px; height:64px; max-width:none; margin:0; border:1px solid var(--line); border-radius:12px;
  background:var(--surface); object-fit:cover;
}
.browse-reviews .browse-review__photos video{ width:120px; }
.browse-reviews .browse-review__useful{ color:var(--dim); font:11.5px/1.4 var(--font); }

/* Sample photos are drawn on demand; their frames shimmer until they arrive. */
.browse-reviews img[data-pending]{
  background:linear-gradient(100deg,var(--raised) 30%,color-mix(in srgb,var(--ink) 9%,var(--raised)) 50%,var(--raised) 70%) 0 0/300% 100%;
  animation:browse-review-shimmer 1.3s linear infinite;
}
@keyframes browse-review-shimmer{ to{ background-position:-150% 0; } }

@media(prefers-reduced-motion:reduce){
  .browse-object-heading-row::after,
  .browse-reviews .browse-reviews__shot,
  .browse-reviews .browse-reviews__shot::after{ transition:none; }
  .browse-reviews .browse-reviews__shot:hover{ transform:none; }
  .browse-reviews .browse-review[data-flash],
  .browse-reviews img[data-pending]{ animation:none; }
}
:root[data-reduce-motion="true"] .browse-object-heading-row::after,
:root[data-reduce-motion="true"] .browse-reviews .browse-reviews__shot,
:root[data-reduce-motion="true"] .browse-reviews .browse-reviews__shot::after{ transition:none; }
:root[data-reduce-motion="true"] .browse-reviews .browse-reviews__shot:hover{ transform:none; }
:root[data-reduce-motion="true"] :is(.browse-reviews .browse-review[data-flash],.browse-reviews img[data-pending]){ animation:none; }