/* ============================================================================
   REFERENCE PRODUCT SHOWROOM
   ----------------------------------------------------------------------------
   Extends the canonical VoiceInsights tokens. No new brand colour is defined:
   every value resolves to --accent (Emerald Ink / Champagne by theme), the
   themed surface set, or the --vi-* ramps that style.css already declares.

   Two visual jobs this stylesheet has to do, both of which are semantic rather
   than decorative:

     1. A CANONICAL PRODUCT and a SECTOR REFERENCE must not read as the same
        kind of thing. The gallery separates them into their own regions with
        their own headings, and a sector reference carries a distinct, quieter
        card treatment — it is evidence, not a product in the catalog.

     2. A product's CLASS must be visible before the title is read, because
        "same report, different title" is the defect this whole package exists
        to correct. The class chip is the first thing in every card.

   State is never colour-only: every chip carries text, and the shared-evidence
   relationship is stated in words as well as marked.
   ============================================================================ */

.ref-hero .lead { max-width: 58ch; }
.ref-demo {
  display: inline-block;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); background: var(--shell-accent-wash);
  border: 1px solid var(--border); border-radius: 999px;
  padding: .3rem .7rem; margin: .5rem 0 0;
}
.ref-demo-lg { font-size: .74rem; margin-top: 1.2rem; }
.ref-loading { color: var(--text-muted); }

/* ---------------------------------------------------------------- filters */
.ref-filters {
  display: flex; flex-wrap: wrap; gap: .9rem 1.2rem; align-items: flex-end;
  padding: 1rem 0 1.4rem; border-bottom: 1px solid var(--border); margin-bottom: 1.6rem;
}
.ref-filter { display: flex; flex-direction: column; gap: .3rem; }
.ref-filter span {
  font-size: .7rem; font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}
.ref-filter select {
  font: inherit; font-size: .9rem; padding: .45rem .6rem; min-width: 12rem;
  color: var(--text); background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px;
}
.ref-filter select:focus-visible,
.ref-filters button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ref-count { margin: 0 0 0 auto; font-size: .85rem; color: var(--text-muted); }

/* ---------------------------------------------------------------- sections */
.ref-section-head { margin: 2.2rem 0 .4rem; }
.ref-section-head h2 { margin: 0; font-size: 1.25rem; }
.ref-section-head p { margin: .35rem 0 0; color: var(--text-muted); font-size: .92rem; max-width: 62ch; }

/* ------------------------------------------------------------------ cards */
.ref-grid {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}
.ref-card {
  display: flex; flex-direction: column; gap: .55rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 1.15rem 1.2rem;
}
.ref-card:hover { border-color: var(--border-strong, var(--accent)); }
.ref-card h3 { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.ref-card h3 a { color: var(--text); text-decoration: none; }
.ref-card h3 a:hover { color: var(--accent); text-decoration: underline; }
.ref-card h3 a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

/* A sector reference is evidence, not a catalog product. Quieter ground and a
   dashed edge, so the difference is visible before the badge is read. */
.ref-card[data-kind="sector-reference"] {
  background: var(--surface-2); border-style: dashed;
}

.ref-card-head { display: flex; flex-wrap: wrap; gap: .35rem; }
.ref-badge {
  font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: .22rem .5rem; border-radius: 5px;
  background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border);
}
.ref-badge-class { background: var(--shell-accent-wash); color: var(--accent); border-color: transparent; }
.ref-badge-shared { background: transparent; }
.ref-badge-sector { background: transparent; font-style: normal; }

.ref-products, .ref-counts { margin: 0; font-size: .84rem; color: var(--text-muted); }
.ref-products code {
  font-size: .92em; background: var(--surface-2); padding: .05em .35em; border-radius: 4px;
}
.ref-noformat { margin: 0; font-size: .84rem; color: var(--text-muted); font-style: italic; }

/* ------------------------------------------------------------- downloads */
.ref-formats { list-style: none; margin: .2rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.ref-dl {
  display: inline-flex; align-items: baseline; gap: .4rem;
  font-size: .82rem; font-weight: 600; text-decoration: none;
  color: var(--accent); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 7px; padding: .32rem .6rem;
}
.ref-dl:hover { border-color: var(--accent); }
.ref-dl:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ref-size { font-weight: 400; font-size: .78em; color: var(--text-muted); }

/* ----------------------------------------------------------------- detail */
.ref-detail { max-width: 62rem; }
.ref-detail h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.12; max-width: 22ch; }
.ref-detail h2 {
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-muted); margin: 2.1rem 0 .6rem;
  padding-bottom: .4rem; border-bottom: 1px solid var(--border);
}
.ref-kv { display: grid; gap: .1rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 0; }
.ref-kv > div { padding: .5rem 0; border-bottom: 1px solid var(--border); }
.ref-kv dt { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.ref-kv dd { margin: .2rem 0 0; font-size: .95rem; }
.ref-kv code { font-size: .88em; background: var(--surface-2); padding: .05em .35em; border-radius: 4px; }

.ref-preview-note, .ref-shared-note, .ref-suppressed {
  font-size: .88rem; color: var(--text-muted); max-width: 62ch; margin: .2rem 0 .8rem;
}
.ref-suppressed {
  border-left: 3px solid var(--border); padding-left: .8rem;
}
.ref-related { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.ref-related a {
  display: inline-block; font-size: .85rem; text-decoration: none; color: var(--accent);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 7px; padding: .35rem .65rem;
}
.ref-related a:hover { border-color: var(--accent); text-decoration: underline; }
.ref-related a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A bounded preview of real synthetic rows — a dataset shown as a dataset. */
.ref-rows { width: 100%; border-collapse: collapse; font-size: .82rem; }
.ref-rows th, .ref-rows td {
  text-align: start; padding: .4rem .55rem; border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ref-rows th { font-weight: 650; color: var(--text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.ref-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }

/* RTL: the grid and flex rows mirror on their own. Only the suppressed-format
   rule draws on one side and needs the logical property. */
[dir="rtl"] .ref-suppressed { border-left: 0; border-right: 3px solid var(--border); padding-left: 0; padding-right: .8rem; }

@media (prefers-reduced-motion: reduce) {
  .ref-card, .ref-dl, .ref-related a { transition: none; }
}

@media (max-width: 720px) {
  .ref-filters { gap: .7rem; }
  .ref-filter select { min-width: 0; width: 100%; }
  .ref-filter { width: 100%; }
  .ref-count { margin-left: 0; }
  .ref-grid { grid-template-columns: 1fr; }
  .ref-kv { grid-template-columns: 1fr; }
}