/* ============================================================
   OliverDeck — COMPONENT · PRIMITIVES
   Badge, Chip, Tag, Ribbon, Hint, Stat.
   The badge's left accent-stripe + asymmetric clip (2px 10px
   10px 2px) is a signature OliverDeck move — keep it.
   ============================================================ */

/* ---------- BADGE ---------- */
.od-badge {
  position: relative;
  font-size: 11px;
  padding: 5px 10px 5px 12px;
  border-radius: var(--od-badge-radius);
  font-weight: var(--od-badge-font);
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1;
  font-family: var(--od-font-body);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.od-badge::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 3px; height: 16px;
  background: currentColor; opacity: .45;
  transform: translateY(-50%);
  border-radius: 1px;
}
.od-badge .material-symbols-outlined { font-size: 13px; font-variation-settings: 'wght' 700, 'FILL' 1; }
.od-badge[data-v="hit"]   { background: var(--olive-400); color: var(--wood-900); }
.od-badge[data-v="new"]   { background: var(--moss-500); color: #fff; }
.od-badge[data-v="sale"]  { background: var(--clay-500); color: #fff; }
.od-badge[data-v="sale"] .pct { background: rgba(0,0,0,.18); padding: 2px 6px; border-radius: 3px; margin-left: 4px; font-weight: 900; }
.od-badge[data-v="stock"] { background: var(--od-color-success-surface); color: var(--od-color-success-text); border: 1px solid #bddbaf; }
.od-badge[data-v="stock"]::before { display: none; }
.od-badge[data-v="pro"]   { background: var(--wood-900); color: var(--olive-300); }

/* ---------- CHIP — dot + count + close ---------- */
.od-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; padding: 5px 11px 5px 8px;
  border-radius: var(--od-chip-radius);
  background: var(--od-chip-bg); color: var(--od-color-text-secondary);
  font-weight: var(--fw-semi);
  border: 1px solid var(--od-chip-border);
  line-height: 1; transition: border-color .15s; cursor: default;
}
.od-chip[data-clickable] { cursor: pointer; }
.od-chip[data-clickable]:hover { border-color: var(--od-color-border-strong); }
.od-chip .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--olive-400); flex: none; }
.od-chip .count { font-variant-numeric: tabular-nums; background: var(--od-color-surface); color: var(--od-color-text-muted); border: 1px solid var(--od-color-border); border-radius: 999px; padding: 2px 6px; font-size: 10.5px; font-weight: 700; margin-left: 2px; }
.od-chip .x { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 999px; color: var(--od-color-text-faint); margin-left: 2px; cursor: pointer; background: none; border: 0; padding: 0; }
.od-chip .x:hover { background: var(--neutral-200); color: var(--od-color-text-primary); }
.od-chip .x .material-symbols-outlined { font-size: 12px; }
.od-chip[data-v="olive"]  { background: var(--olive-50); border-color: #ecd88a; color: var(--olive-800); }
.od-chip[data-v="olive"] .dot { background: var(--olive-500); }
.od-chip[data-v="moss"]   { background: var(--moss-50); border-color: #c6dcb0; color: var(--moss-700); }
.od-chip[data-v="moss"] .dot { background: var(--moss-500); }
.od-chip[data-v="lagoon"] { background: var(--lagoon-50); border-color: #b1cdc9; color: var(--lagoon-700); }
.od-chip[data-v="lagoon"] .dot { background: var(--lagoon-500); }
.od-chip[data-v="clay"]   { background: var(--clay-50); border-color: #e8c0a5; color: var(--clay-700); }
.od-chip[data-v="clay"] .dot { background: var(--clay-500); }

/* ---------- TAG — pill nav with active olive dot ---------- */
.od-tag {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; padding: 10px 18px; min-height: 40px;
  border-radius: var(--od-tag-radius);
  background: transparent; color: var(--od-color-text-secondary);
  font-weight: var(--fw-semi);
  border: 1px solid var(--od-color-border-strong);
  cursor: pointer; transition: border-color .18s, color .18s, background .18s; font-family: inherit;
}
.od-tag:hover { border-color: var(--wood-900); color: var(--od-color-text-primary); }
.od-tag .ct { font-size: 11px; color: var(--od-color-text-faint); font-weight: 600; font-variant-numeric: tabular-nums; }
.od-tag.is-active, .od-tag[aria-pressed="true"] { background: var(--od-tag-active-bg); color: var(--neutral-50); border-color: var(--od-tag-active-bg); padding-left: 32px; }
.od-tag.is-active::before, .od-tag[aria-pressed="true"]::before { content: ''; position: absolute; left: 14px; top: 50%; width: 8px; height: 8px; border-radius: 999px; background: var(--olive-400); transform: translateY(-50%); box-shadow: 0 0 8px var(--olive-400); }
.od-tag.is-active .ct, .od-tag[aria-pressed="true"] .ct { color: var(--olive-300); }

/* ---------- RIBBON — promo callout, right-pointed clip ---------- */
.od-ribbon {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 26px 10px 20px;
  background: var(--clay-500); color: #fff;
  font-weight: var(--fw-black); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%);
}
.od-ribbon .material-symbols-outlined { font-size: 16px; }
.od-ribbon[data-v="olive"] { background: var(--olive-400); color: var(--wood-900); }
.od-ribbon[data-v="dark"]  { background: var(--wood-900); color: var(--olive-300); }

/* ---------- HINT — Kuznetsov's advice callout. SINGLE definition ---------- */
.od-hint {
  font-size: 14px; line-height: 1.55; color: var(--od-color-text-secondary);
  padding: 12px 14px 12px 16px;
  border-left: 2px solid var(--olive-300);
  background: var(--olive-50);
  border-radius: 0 8px 8px 0;
  margin: 12px 0;
  display: flex; gap: 10px; align-items: flex-start;
}
.od-hint strong { color: var(--od-color-text-primary); font-weight: 700; }
.od-hint .material-symbols-outlined { color: var(--olive-700); font-size: 18px; flex: none; margin-top: 1px; }
.od-on-dark .od-hint { background: rgba(238,195,13,0.10); color: var(--neutral-300); border-left-color: var(--olive-400); }

/* ---------- STAT / METRIC ---------- */
.od-stat { display: flex; flex-direction: column; gap: 4px; }
.od-stat .val { font-family: var(--od-font-display); font-size: clamp(28px, 3vw, 44px); font-weight: var(--fw-semi); letter-spacing: var(--tracking-tight); line-height: 1; color: var(--od-color-text-primary); }
.od-stat .val sub { font-size: 0.4em; font-weight: 400; color: var(--od-color-text-muted); vertical-align: baseline; margin-left: 4px; }
.od-stat .lbl { font-size: 13px; color: var(--od-color-text-muted); line-height: 1.4; }
.od-on-dark .od-stat .val { color: var(--olive-300); }