:root {
  --singer-red: #e4002b;
}

body { background: #f6f7f9; }

.singer-nav { background: linear-gradient(90deg, #c50022, var(--singer-red)); }

/* SAACE branding — white on Singer red */
.saace-badge, .saace-badge-sm, .saace-badge-nav {
  display: inline-block;
  background: var(--singer-red);
  color: #fff;
  font-weight: 700;
  letter-spacing: .08em;
  border-radius: 6px;
  line-height: 1;
}
.saace-badge { font-size: .72rem; padding: 5px 10px; }
.saace-badge-sm { font-size: .6rem; padding: 4px 8px; }
.saace-badge-nav { font-size: .62rem; padding: 4px 8px; background: #fff; color: var(--singer-red); }

.saace-panel { border-top: 3px solid #ffd166; }

.stat-card { border-radius: 12px; }
.singer-stat { box-shadow: 0 0 0 1px rgba(228, 0, 43, .15); }

/* ---------------- market overview ---------------- */
.hero { }
.hero-eyebrow {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .09em;
  color: #8a9099; font-weight: 600;
}
.hero-rule {
  height: 3px; margin-top: 14px; border-radius: 3px;
  background: linear-gradient(90deg, var(--singer-red) 0%, var(--singer-red) 18%, #e9ecef 18%);
}
.meta-pill {
  display: inline-flex; align-items: center; font-size: .74rem; color: #5a6069;
  background: #fff; border: 1px solid #e4e7eb; border-radius: 999px; padding: 5px 12px;
  white-space: nowrap;
}
.meta-pill-action { text-decoration: none; transition: background .12s, color .12s; cursor: pointer; }
.meta-pill-action:hover { background: var(--singer-red); border-color: var(--singer-red); color: #fff; }
button.meta-pill { font-family: inherit; line-height: 1.4; }
button.meta-pill:disabled { opacity: .7; cursor: default; }

.metric {
  position: relative; background: #fff; border: 1px solid #e9ecef; border-radius: 12px;
  padding: 14px 16px; height: 100%; overflow: hidden;
}
.metric-icon {
  position: absolute; right: 10px; top: 8px; font-size: 1.5rem;
  color: #eef0f3; line-height: 1;
}
.metric-accent { border-color: rgba(228,0,43,.28); box-shadow: 0 0 0 1px rgba(228,0,43,.06); }
.metric-accent .metric-icon { color: #fbdde3; }
.metric-warn { border-color: #ffe08a; background: #fffdf6; }
.metric-warn .metric-icon { color: #ffe9b0; }
.metric-v { font-size: 1.55rem; font-weight: 700; line-height: 1.1; position: relative; }
.metric-l {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
  color: #6c757d; font-weight: 600; margin-top: 2px;
}
.metric-sub { font-size: .7rem; color: #9aa0a8; margin-top: 4px; line-height: 1.3; }

.panel { border-radius: 12px; border: 1px solid #e9ecef; }
.panel-head {
  background: #fff; border-bottom: 1px solid #f0f1f3; padding: .7rem 1rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem;
  border-radius: 12px 12px 0 0;
}

.share-bar {
  display: flex; height: 26px; border-radius: 6px; overflow: hidden; background: #f1f2f4;
}
.share-seg { transition: opacity .12s; }
.share-seg:hover { opacity: .82; }

.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; }
.legend-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none;
  vertical-align: middle;
}

.shelf-table thead th {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  color: #8a9099; font-weight: 600; border-bottom: 1px solid #eceef1;
}
.shelf-table td { font-size: .84rem; border-color: #f2f3f5; }
.shelf-table .singer-row { background: #fffafb; }

.span-track { position: relative; height: 8px; background: #f1f2f4; border-radius: 4px; }
.span-fill { position: absolute; top: 0; bottom: 0; border-radius: 4px; opacity: .75; }
.span-avg {
  position: absolute; top: -3px; width: 3px; height: 14px; border-radius: 2px;
  background: #fff; border-left: 3px solid; transform: translateX(-1px);
}
/* Median: a solid tick through the range, the way a box plot marks it. Distinct
   from the hollow average marker so the two are never confused — and the gap
   between them is the useful part, showing how top-heavy the range is. */
.span-med {
  position: absolute; top: -4px; width: 3px; height: 16px; border-radius: 1px;
  transform: translateX(-1px); box-shadow: 0 0 0 1px #fff;
}
.span-labels {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .66rem; color: #a6abb2; margin-top: 3px; gap: 6px;
}
.span-key { display: inline-flex; align-items: center; gap: 4px; color: #b6bbc2; }
.span-key-med, .span-key-avg { display: inline-block; width: 3px; height: 9px; border-radius: 1px; }
.span-key-med { background: #868e96; }
.span-key-avg { background: #fff; border-left: 3px solid #868e96; width: 0; }

.share-mini {
  width: 46px; height: 6px; background: #f1f2f4; border-radius: 3px; overflow: hidden; flex: none;
}
.share-mini > div { height: 100%; background: var(--singer-red); border-radius: 3px; }

.gap-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border: 1px solid #eef0f3; border-radius: 8px; background: #fff;
  transition: border-color .12s, background .12s;
}
.gap-row:hover { border-color: #f5c2cb; background: #fffafb; }

.studio-icon {
  width: 54px; height: 54px; border-radius: 50%; background: #fde7ea; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--singer-red); font-size: 1.6rem;
}
.flex-none { flex: none; }

.cat-card {
  border-radius: 12px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.cat-card:hover {
  transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.08);
  border-color: #f5c2cb;
}
.cat-gap { background: #fffdf3; border-color: #ffe08a; }
.cat-only { border-color: #b7dfc8; background: #fbfffc; }
/* products the classifier could not place in Singer's taxonomy */
.cat-unmatched { border-color: #d3d7dd; background: #fafbfc; border-style: dashed; }
.cat-unmatched:hover { border-color: #adb5bd; }
.cat-count { font-size: 1.15rem; font-weight: 700; line-height: 1; }
.cat-share { height: 6px; background: #eef0f3; border-radius: 3px; overflow: hidden; }
.cat-share-fill { height: 100%; background: var(--singer-red); border-radius: 3px; }
.cat-prices {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: .74rem; border-top: 1px solid #f0f1f3; padding-top: 8px;
}

.product-card { border-radius: 10px; overflow: hidden; }
.product-img-wrap { background: #fff; }
.product-img-wrap img { object-fit: contain; padding: 6px; }
.product-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
  line-height: 1.2em;
}

.chip {
  font-size: .68rem;
  background: #eef0f3;
  border-radius: 20px;
  padding: 2px 8px;
  color: #555;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* multi-select facet dropdowns — long sub-type lists need to scroll */
.facet-menu {
  min-width: 240px;
  max-height: 340px;
  overflow-y: auto;
}
.facet-menu .dropdown-item { cursor: pointer; }
.facet-menu .dropdown-item:active { background: #f8f9fa; color: inherit; }
.facet-drop .dropdown-toggle {
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* navbar competitor scope picker */
.scope-dot {
  width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto;
}

.vs-body { max-height: 1200px; overflow-y: auto; background: #fff; }
.vs-head { position: sticky; top: 0; z-index: 5; }

/* KPI strip */
.kpi { background:#fff; border:1px solid #e9ecef; border-radius:10px; padding:8px 12px; height:100%; }
.kpi-v { font-size:1.15rem; font-weight:700; line-height:1.1; }
.kpi-l { font-size:.7rem; color:#6c757d; text-transform:uppercase; letter-spacing:.02em; }
/* the average, kept as a secondary reading under the headline median */
.kpi-sub { font-size:.66rem; color:#9aa0a6; margin-top:1px; }

/* mini analytics cards */
.mini-card { border-radius:10px; }
.mini-card .card-header { background:#fff; border-bottom:1px solid #f0f1f3; }
.analytics-strip .card-body { min-height: 0; }
@media (min-width: 1400px) { .analytics-strip > [class*="col-xxl"] { min-width: 0; } }

/* Fixed-height chart shells. Without these the canvases stretch to fill the
   row whenever a sibling card (the AI verdict) grows. */
.chart-box { position: relative; width: 100%; }
.chart-box canvas { max-width: 100%; }

/* filter bar */
.btn-pulse { animation: btnPulse 1.4s ease-in-out infinite; }
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(228,0,43,.45); }
  50%      { box-shadow: 0 0 0 6px rgba(228,0,43,0); }
}

/* AI category verdict */
.verdict-card { border-width: 2px; }
.verdict-scroll {
  overflow-y: auto; overflow-x: hidden;
  max-height: 190px; scrollbar-width: thin; scrollbar-color: #ced4da transparent;
  scroll-behavior: smooth; overscroll-behavior: contain;
}
.verdict-scroll::-webkit-scrollbar { width: 6px; }
.verdict-scroll::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 3px; }
.verdict-scroll::-webkit-scrollbar-track { background: transparent; }
.verdict-scroll.is-scrollable {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 18px), transparent 100%);
}
.verdict-scroll.is-scrollable.at-end { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 1399.98px) { .verdict-scroll { max-height: 320px; } }
.verdict-choice { border-left: 3px solid #adb5bd; padding-left: 10px; }
.verdict-choice.is-singer { border-left-color: #198754; }
.verdict-choice.is-comp   { border-left-color: #ffc107; }
.verdict-detail { border-radius: 10px; }
.verdict-detail .ai-table td, .verdict-detail .ai-table th { font-size: .8rem; vertical-align: top; }

/* market overview insight table */
.pos-bar { position: relative; height: 16px; background: #f1f2f4; border-radius: 3px; }
.pos-bar .mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: #ced4da; }
.pos-bar .fill { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; }
.pos-bar .fill.up   { background: #e4002b; left: 50%; }
.pos-bar .fill.down { background: #198754; right: 50%; }
.insight-table td, .insight-table th { font-size: .82rem; vertical-align: middle; }

/* ---------------- design studio ---------------- */
.studio-card {
  border-radius: 12px; border: 1px solid #e9ecef;
  background: linear-gradient(180deg, #fff, #fdf7f8);
  transition: transform .12s ease, box-shadow .12s ease;
}
.studio-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }

.proj-item { border: 1px solid transparent; }
.proj-item:hover { background: #f6f7f9; border-color: #e9ecef; }
.proj-item.active { background: #fde7ea; border-color: #f5c2cb; }
.proj-thumb { width: 44px; height: 44px; object-fit: contain; background: #fff; flex: none; }
.min-w-0 { min-width: 0; }

.viewer-stage {
  position: relative; background: #fff; border: 1px solid #e9ecef; border-radius: 10px;
  height: 380px; display: flex; align-items: center; justify-content: center;
  cursor: grab; overflow: hidden; touch-action: pan-y;
}
.viewer-stage:active { cursor: grabbing; }
.viewer-stage img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; }
.viewer-fid { position: absolute; left: 8px; bottom: 8px; }

.swatch-dot {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid rgba(0,0,0,.2); flex: none;
}
.colour-row .form-control-color { width: 34px; padding: 2px; flex: none; }

.cost-table td, .cost-table th { font-size: .78rem; padding: .3rem .45rem; }

#wsTabs .nav-link { font-size: .84rem; color: #495057; border: none; border-bottom: 2px solid transparent; }
#wsTabs .nav-link.active { color: var(--singer-red); border-bottom-color: var(--singer-red); background: none; }

.ws-pane { min-height: 220px; }

.brand-badge { font-size:.68rem; color:#fff; }
.chip-attr { background:#fde7ea; color:#c50022; font-weight:600; }
/* the classifier was not confident about this product's category */
.chip-low { background:#fff4e0; color:#8a5a00; font-weight:600; }

/* floating compare action bar */
.compare-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 1045;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.96); padding: 8px 10px;
  border: 1px solid #e3e6ea; border-radius: 999px;
  box-shadow: 0 6px 22px rgba(0,0,0,.16);
}
.compare-fab .fab-main { border-radius: 999px; font-weight: 600; }
.compare-fab .fab-hint { margin-right: 2px; }

/* similarity */
.sim-badge { font-size: .68rem; }

/* AI analysis */
.ai-section h6 { color: var(--singer-red); margin-top: .75rem; }
.pros li::marker { color: #198754; }
.cons li::marker { color: #dc3545; }
.ai-table td, .ai-table th { font-size: .82rem; }

.customer-verdict { border-width: 2px; }

.cmp-table img { max-height: 130px; object-fit: contain; }
.cmp-table td, .cmp-table th { vertical-align: top; font-size: .85rem; }