/* BudTrendz — structural base: layout primitives and component anatomy.
   editorial.css layers the visual theme (tokens + its own layout) on top. */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, figure, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }

:root {
  /* Fallbacks; editorial.css overrides these. */
  --page:        #f6f6f3;
  --surface:     #ffffff;
  --surface-2:   #f2f2ee;
  --ink:         #101013;
  --ink-2:       #55555f;
  --ink-mute:    #85858f;
  --line:        rgba(16,16,19,.12);
  --accent:      #4b8b1f;
  --accent-ink:  #ffffff;
  --radius:      14px;
  --gap:         20px;
  --shadow:      0 1px 2px rgba(16,16,19,.06), 0 8px 24px rgba(16,16,19,.06);
  --font:        system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head:   var(--font);
  --font-num:    var(--font);
  --maxw:        1240px;

  /* Categorical series — validated (see palette validation in build notes).
     Light surface: 3 slots sit below 3:1, so charts ship legends + labels. */
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a;
  --s4:#eda100; --s5:#e87ba4; --s6:#008300;
  --grid: #e4e4de;
  --axis: #c4c4bc;
  --good: #0ca30c;
  --bad:  #d03b3b;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 16px; }

/* ---------- top bar ---------- */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
.topbar-in { display: flex; align-items: center; gap: 16px; padding-block: 12px; flex-wrap: wrap; }
/* Source is 1024x1024, so there's plenty of headroom — sized for the wordmark
   inside the badge to be legible. */
.logo img { height: 58px; width: auto; border-radius: 8px; }
.search { flex: 1 1 220px; min-width: 0; }
.search input {
  width: 100%; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--ink); font: inherit;
}
.search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }


/* ---------- tabs ---------- */
.tabs { display: flex; gap: 6px; padding-top: 18px; flex-wrap: wrap; }
.tabs button {
  border: 0; background: transparent; color: var(--ink-2);
  padding: 9px 2px; margin-right: 18px; font-size: 1rem; font-weight: 600;
  border-bottom: 2px solid transparent;
}
.tabs button.on { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- filters ---------- */
.controls { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; padding-block: 18px; }
.ctl { display: flex; flex-direction: column; gap: 5px; font-size: .74rem; }
.ctl > span { color: var(--ink-mute); text-transform: uppercase; letter-spacing: .07em; font-weight: 700; }
.ctl select {
  font: inherit; font-size: .88rem; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
}
.ctl-check { flex-direction: row; align-items: center; gap: 7px; font-size: .84rem; color: var(--ink-2); padding-bottom: 8px; }
.resultcount { margin-left: auto; color: var(--ink-mute); font-size: .84rem; padding-bottom: 8px; }

/* ---------- views ---------- */
.view { display: none; padding-bottom: 56px; }
.view.on { display: block; }

.cardgrid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(390px, 100%), 1fr)); }
.brandgrid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }

/* ---------- review card ---------- */
/* Thumbnail-led: Reddit thumbs are ~140px, so the media well stays near their
   native size rather than upscaling them into a blurry hero. */
.card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  display: flex; flex-direction: row; align-items: flex-start; text-align: left;
  padding: 0; width: 100%; gap: 0;
}
.card-media {
  width: 116px; flex: none; aspect-ratio: 1;
  background: var(--surface-2); overflow: hidden;
}
.card-media img { width: 100%; height: 100%; object-fit: cover; }

/* Rank sits in the card's own empty top-right, never over the photo. */
.card-rank {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  color: var(--ink-mute); font-size: .82rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
}
/* Only reserve space when a rank is actually present. */
.card:has(.card-rank) .card-head { padding-right: 40px; }

/* Lead-card rail: shown on the Editorial lead item only. */
.card-aside { display: none; }
.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.card-brand { font-size: 1.05rem; font-weight: 750; line-height: 1.25; font-family: var(--font-head); }
.card-product { color: var(--ink-2); font-size: .9rem; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2);
}
.chip-sent { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); }
.chip-sent[data-bias="-"] { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }

/* Metrics: value + key, never a bare number */
.metrics { display: flex; flex-wrap: wrap; gap: 14px; padding-block: 2px; }
.metrics li { display: flex; flex-direction: column; }
.m-val { font-family: var(--font-num); font-weight: 750; font-size: 1rem; font-variant-numeric: tabular-nums; }
.m-key { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-mute); font-weight: 700; }

.summary {
  color: var(--ink-2); font-size: .88rem; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card-foot {
  margin-top: auto; padding-top: 4px; display: flex; flex-wrap: wrap; gap: 8px;
  color: var(--ink-mute); font-size: .76rem;
}
.card-foot .dot::before { content: "·"; margin-right: 8px; }

/* ---------- brand card ---------- */
.bcard {
  display: flex; gap: 13px; align-items: center; width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px; box-shadow: var(--shadow);
}
.bcard-rank { font-size: 1.1rem; font-weight: 800; color: var(--ink-mute); min-width: 1.9ch; font-variant-numeric: tabular-nums; }
.bcard-thumb { width: 62px; height: 62px; border-radius: 10px; object-fit: cover; background: var(--surface-2); flex: none; }
.bcard-main { min-width: 0; flex: 1; display: block; }
/* These are spans (the card is a button, so it can't nest block elements
   with default display) — force the stack explicitly. */
.bcard-name, .bcard-sub, .bcard-stats { display: block; }
.bcard-name { font-weight: 750; font-size: 1rem; font-family: var(--font-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcard-sub { color: var(--ink-mute); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bcard-stats { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.bcard-stats .metrics { display: flex; flex-direction: column; gap: 0; }
.bcard-stats .m-val { font-size: .92rem; }

/* Sentiment run: one icon per review, newest first. */
.bcard-bias {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1px;
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line);
  font-size: .95rem; line-height: 1.15;
}
.bcard-bias i { font-style: normal; }
.bcard-bias em {
  font-style: normal; font-size: .7rem; font-weight: 700;
  color: var(--ink-mute); margin-left: 5px;
}

/* ---------- charts ---------- */
/* Always 2x2 — four charts, consistent across every style. */
.charts { display: grid; gap: var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.chart-fig { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }
.chart-fig figcaption h3 { font-size: 1rem; font-weight: 700; font-family: var(--font-head); }
.chart-fig figcaption p { color: var(--ink-mute); font-size: .82rem; margin-top: 2px; }
.plot { margin-top: 12px; }
.plot svg { width: 100%; height: auto; overflow: visible; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 11px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: .77rem; color: var(--ink-2); }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ax text { fill: var(--ink-mute); font-size: 11px; }
.ax line, .ax path { stroke: var(--axis); }
.gridline { stroke: var(--grid); stroke-width: 1; }
.val-label { fill: var(--ink-2); font-size: 10.5px; font-variant-numeric: tabular-nums; }

/* ---------- drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 60; display: flex; justify-content: flex-end; }
.drawer[hidden] { display: none; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.drawer-panel {
  position: relative; background: var(--surface); width: min(560px, 100%);
  height: 100%; overflow-y: auto; padding: 26px; box-shadow: -8px 0 40px rgba(0,0,0,.2);
}
.drawer-x { position: absolute; top: 12px; right: 14px; border: 0; background: transparent; font-size: 1.8rem; line-height: 1; color: var(--ink-mute); }
/* Room past the last element so nothing sits under the viewport edge. */
.drawer-panel { padding-bottom: 56px; }
.drawer-panel a:not(.d-cta) { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }

.d-back {
  border: 0; background: transparent; color: var(--ink-mute);
  font-size: .82rem; font-weight: 600; padding: 0 0 10px;
}
.d-back:hover { color: var(--ink); }
.d-title { font-family: var(--font-head); font-size: 1.6rem; font-weight: 750; line-height: 1.15; margin-top: 8px; }
.d-sub { color: var(--ink-2); font-size: .95rem; margin-top: 2px; }
.d-summary { margin-top: 16px; font-size: .95rem; line-height: 1.6; color: var(--ink-2); }
.d-section { font-family: var(--font-head); font-size: .78rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-mute); margin-top: 26px; }
.d-terps { margin-top: 14px; font-size: .88rem; color: var(--ink-2); }
.d-terps .m-key { display: block; margin-bottom: 2px; }
.d-meta { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; color: var(--ink-mute); font-size: .78rem; }
.d-meta .dot::before { content: "·"; margin-right: 8px; }

/* Thumb-sized tiles, not stretched panels */
.d-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 14px; }
.d-gallery img { border-radius: 10px; width: 108px; height: 108px; object-fit: cover; background: var(--surface-2); }
.d-notes { display: grid; gap: 12px; margin-top: 16px; }
.d-note h4 { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-mute); }
.d-note p { font-size: .9rem; color: var(--ink-2); }

/* Metrics row doubles as the action bar — the CTA fills what was dead space. */
.d-metrics {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 16px; padding-block: 14px; border-block: 1px solid var(--line);
}
.d-cta {
  flex: none; background: var(--accent); color: var(--accent-ink);
  font-size: .84rem; font-weight: 700; text-decoration: none;
  padding: 9px 15px; border-radius: 9px; white-space: nowrap;
}
.d-cta:hover { filter: brightness(1.08); }

/* ---------- brand drawer ---------- */
/* Clear the close button, which floats over the panel's top-right. */
.d-brandhead { display: flex; gap: 14px; align-items: center; padding-right: 38px; }
.d-brandthumb { width: 66px; height: 66px; border-radius: 12px; object-fit: cover; background: var(--surface-2); flex: none; }
.d-brandhead .d-title { margin-top: 0; }

.d-reviews { display: grid; gap: 8px; margin-top: 12px; }
.d-review {
  display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%;
  background: var(--surface-2); border: 1px solid transparent;
  border-radius: var(--radius); padding: 10px;
}
.d-review:hover { border-color: var(--line); }
.d-review-thumb { width: 62px; height: 62px; border-radius: 8px; object-fit: cover; flex: none; background: var(--surface); }
.d-review-main { min-width: 0; display: block; }
.d-review-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.d-review-top strong { font-size: .93rem; }
.d-review-meta { display: block; color: var(--ink-mute); font-size: .76rem; margin-top: 2px; }
.d-review-sum {
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; color: var(--ink-2); font-size: .83rem; margin-top: 5px;
}

/* hover layer — shared by every chart form */
.viz-tip {
  position: fixed; z-index: 80; display: none; pointer-events: none;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 11px; font-size: .8rem; line-height: 1.45;
  box-shadow: 0 6px 24px rgba(0,0,0,.18); max-width: 260px;
}
.viz-tip table { border-collapse: collapse; margin-top: 4px; }
.viz-tip td { padding: 1px 0; }
.viz-tip td:last-child { text-align: right; padding-left: 14px; font-variant-numeric: tabular-nums; }
.viz-tip i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 6px; }

.footer { padding-block: 26px 46px; color: var(--ink-mute); font-size: .82rem; display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.footer a { color: var(--ink-2); margin-right: 14px; }
.empty { padding: 60px 0; text-align: center; color: var(--ink-mute); }

/* 2x2 needs room for two plots; stack below that. */
@media (max-width: 900px) {
  .charts { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .topbar-in { gap: 10px; }
  .logo img { height: 46px; }
  .resultcount { margin-left: 0; width: 100%; }
  .drawer-panel { padding: 20px 16px; }

  /* Keep the three tabs on one line — sized to content, not forced to thirds,
     so "Trending Brands" doesn't wrap. */
  .tabs { gap: 4px; }
  .tabs button { margin-right: 0; flex: 0 1 auto; font-size: .85rem; padding-inline: 6px; white-space: nowrap; }

  /* Two selects per row, each free to shrink — no fixed intrinsic widths. */
  .controls { gap: 10px; }
  .ctl { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .ctl select { width: 100%; min-width: 0; }
  .ctl-check { flex: 1 1 100%; }
  .card-media { width: 96px; }
  .card-body { padding: 12px 13px 13px; }
  .m-val { font-size: .95rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .card, .bcard { transition: transform .16s ease, box-shadow .16s ease; }
  .card:hover, .bcard:hover { transform: translateY(-2px); }
}