/* ──────────────────────────────────────────────────────────────────────────
 * Discover chip taxonomy (Phase 3.4 — DiscoverPhase3Plan.md)
 *
 * Six chip families, harmonious palette, WCAG AA contrast for both light
 * and dark modes. Additive layer: existing .discover-badge / .badge-* and
 * .pill rules keep handling geometry; these classes only set background +
 * color + border, so layout is unaffected.
 *
 * Usage:
 *   <span class="discover-badge chip-type">Fellowship</span>
 *   <span class="discover-badge chip-funding">Fully Funded</span>
 *   <span class="discover-badge chip-country">Vietnam</span>
 *   <span class="discover-badge chip-time">March</span>
 *   <span class="discover-badge chip-status">Updated today</span>
 *   <span class="discover-badge chip-warn">Closing soon</span>
 *
 * Family rationale:
 *   type     = blue   — what *kind* of program (scholarship/PhD/etc.)
 *   funding  = green  — money signal, green = "yes"
 *   country  = warm   — geographic, earthy
 *   time     = purple — deadline/period, cool & calm
 *   status   = grey   — neutral recency badge, low visual weight
 *   warn    = red    — urgency override (closing, broken, expired)
 *
 * Cap rule: keep ≤ 5 family chips per card. Renderer collapses extras into
 * "+N more" affordance to preserve scan density.
 * ────────────────────────────────────────────────────────────────────────── */

:root {
  /* Family 1 — Type (program category): blue */
  --chip-type-bg:        #E8F0FE;
  --chip-type-fg:        #1A4FBC;
  --chip-type-border:    #B5CBF7;
  /* Family 2 — Funding: green */
  --chip-funding-bg:     #E3F4E5;
  --chip-funding-fg:     #1F6E35;
  --chip-funding-border: #B6DDB8;
  /* Family 3 — Country: warm earth */
  --chip-country-bg:     #FDF2E0;
  --chip-country-fg:     #8A5A1A;
  --chip-country-border: #E8C58A;
  /* Family 4 — Time / Deadline: muted purple */
  --chip-time-bg:        #F1ECFA;
  --chip-time-fg:        #5B3DA8;
  --chip-time-border:    #C9B8E8;
  /* Family 5 — Status (updated/new/expiring): neutral grey */
  --chip-status-bg:      #F1F3F5;
  --chip-status-fg:      #4A5564;
  --chip-status-border:  #D5DAE0;
  /* Warning override (deadline approaching, broken, expired): warm red */
  --chip-warn-bg:        #FCE9E5;
  --chip-warn-fg:        #B9341E;
  --chip-warn-border:    #F3B8AC;
}

:root[data-theme="dark"] {
  --chip-type-bg:        #1B2D52;
  --chip-type-fg:        #A4C0F5;
  --chip-type-border:    #2E4886;
  --chip-funding-bg:     #1C3324;
  --chip-funding-fg:     #95D3A4;
  --chip-funding-border: #2F5A3D;
  --chip-country-bg:     #3A2A14;
  --chip-country-fg:     #F0C68F;
  --chip-country-border: #5D4625;
  --chip-time-bg:        #2A2244;
  --chip-time-fg:        #C7B5EE;
  --chip-time-border:    #4A3978;
  --chip-status-bg:      #232830;
  --chip-status-fg:      #BDC4CE;
  --chip-status-border:  #3A4250;
  --chip-warn-bg:        #3D1F19;
  --chip-warn-fg:        #F5A496;
  --chip-warn-border:    #6B3429;
}

/* Family classes. !important not used — class specificity (.discover-badge.chip-x)
   beats single-class .badge-* rules naturally. The border is 1px so chip height
   stays aligned with non-bordered legacy badges. */
.discover-badge.chip-type,    .pill.chip-type,    .chip.chip-type {
  background: var(--chip-type-bg);
  color:      var(--chip-type-fg);
  border:     1px solid var(--chip-type-border);
}
.discover-badge.chip-funding, .pill.chip-funding, .chip.chip-funding {
  background: var(--chip-funding-bg);
  color:      var(--chip-funding-fg);
  border:     1px solid var(--chip-funding-border);
}
.discover-badge.chip-country, .pill.chip-country, .chip.chip-country {
  background: var(--chip-country-bg);
  color:      var(--chip-country-fg);
  border:     1px solid var(--chip-country-border);
}
.discover-badge.chip-time,    .pill.chip-time,    .chip.chip-time {
  background: var(--chip-time-bg);
  color:      var(--chip-time-fg);
  border:     1px solid var(--chip-time-border);
}
.discover-badge.chip-status,  .pill.chip-status,  .chip.chip-status {
  background: var(--chip-status-bg);
  color:      var(--chip-status-fg);
  border:     1px solid var(--chip-status-border);
}
.discover-badge.chip-warn,    .pill.chip-warn,    .chip.chip-warn {
  background: var(--chip-warn-bg);
  color:      var(--chip-warn-fg);
  border:     1px solid var(--chip-warn-border);
}

/* Standalone .chip base class — for surfaces that don't share .discover-badge
   geometry (admin queue, modal popovers). Mirrors badge sizing. */
.chip {
  display:           inline-flex;
  align-items:       center;
  gap:               4px;
  padding:           2px 8px;
  font-size:         11px;
  font-weight:       600;
  line-height:       1.45;
  border-radius:     99px;
  border:            1px solid transparent;
  white-space:       nowrap;
  font-feature-settings: "tnum";
  letter-spacing:    0.01em;
  background:        var(--bg-hover, #f5f5f7);
  color:             var(--text-tertiary, #5d6166);
}

/* "+N more" affordance for the cap rule. Low-emphasis grey, never warns. */
.chip-more {
  background: transparent;
  color:      var(--text-tertiary, #6b7280);
  border:     1px dashed var(--chip-status-border);
  cursor:     pointer;
}
.chip-more:hover {
  background: var(--chip-status-bg);
  color:      var(--chip-status-fg);
}


/* Phase 3.5b — confidence visual bar. Replaces "X% confidence" plain chip
   with a 4-segment colored progress bar (red→amber→green) for fast scan.
   The bar fills proportionally to the percentage and the segment color
   reflects the bucket the percentage lands in. Pure CSS — no JS state. */
.confidence-bar {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  font-size:      11px;
  font-weight:    600;
  color:          var(--text-secondary, #4a5564);
  letter-spacing: 0.02em;
}
.confidence-bar-track {
  position:      relative;
  width:         92px;
  height:        6px;
  border-radius: 3px;
  background:    var(--chip-status-border, #d5dae0);
  overflow:      hidden;
}
.confidence-bar-fill {
  position:      absolute;
  inset:         0 auto 0 0;
  height:        100%;
  border-radius: 3px;
  transition:    width 200ms ease-out;
}
/* Buckets: <50 warn-red, 50-69 time-amber, 70-84 country-warm, 85+ funding-green. */
.confidence-bar-fill.bucket-low  { background: var(--chip-warn-fg,    #b9341e); }
.confidence-bar-fill.bucket-mid  { background: var(--chip-time-fg,    #5b3da8); }
.confidence-bar-fill.bucket-good { background: var(--chip-country-fg, #8a5a1a); }
.confidence-bar-fill.bucket-high { background: var(--chip-funding-fg, #1f6e35); }

/* Phase 3.3b — audit-flag chip. Appears on admin Published Programs rows
   when discover_program_audits has open findings. Click opens a modal.
   Color uses chip-warn family because every open audit is actionable. */
.audit-flag {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  padding:       3px 10px;
  font-size:     12px;
  font-weight:   600;
  border-radius: 99px;
  cursor:        pointer;
  border:        1px solid var(--chip-warn-border, #f3b8ac);
  background:    var(--chip-warn-bg,     #fce9e5);
  color:         var(--chip-warn-fg,     #b9341e);
}
.audit-flag:hover { filter: brightness(0.96); }
.audit-flag[data-count="0"] { display: none; }

/* Audit modal — minimal overlay reusing app neutrals. */
.audit-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.audit-modal {
  background: var(--card-bg, #fff); color: var(--text-primary, #111);
  border-radius: 10px; max-width: 640px; width: 92%; max-height: 80vh;
  overflow: auto; padding: 18px 20px; box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
.audit-modal h3 { margin: 0 0 12px 0; font-size: 16px; }
.audit-finding {
  border: 1px solid var(--chip-status-border, #d5dae0);
  border-radius: 8px; padding: 10px 12px; margin: 8px 0;
}
.audit-finding-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px; font-weight: 600;
}
.audit-finding-actions {
  display: flex; gap: 6px; margin-top: 8px;
}