/* ============================================================
   Casting Engine — components.css
   Shared components, built once, reused by every screen.
   No screen defines its own button, badge, or card styles.
   Markup comes from src/views/components.js.
   ============================================================ */

/* ---- ArchetypeBadge ------------------------------------------------
   Tinted pill: archetype color at 14% as fill, full color label,
   0.08em letter-spaced caps, 11px, pill radius. */
.badge-archetype {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-round);
  font-family: var(--font-sans);
  font-size: var(--fg-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  background: color-mix(in srgb, var(--arch, var(--arch-unknown)) 14%, transparent);
  color: var(--arch, var(--arch-unknown));
  white-space: nowrap;
}
.badge-archetype[data-arch="ride-or-die"]  { --arch: var(--arch-ride-or-die); }
.badge-archetype[data-arch="hustler"]      { --arch: var(--arch-hustler); }
.badge-archetype[data-arch="diva"]         { --arch: var(--arch-diva); }
.badge-archetype[data-arch="storyline"]    { --arch: var(--arch-storyline); }
.badge-archetype[data-arch="comedian"]     { --arch: var(--arch-comedian); }
.badge-archetype[data-arch="wildcard"]     { --arch: var(--arch-wildcard); }
.badge-archetype[data-arch="party animal"] { --arch: var(--arch-party-animal); }
.badge-archetype[data-arch="unknown"]      { --arch: var(--arch-unknown); }

/* ---- StatusBadge (cycle status: live / upcoming / closed) ---------- */
.badge-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-round);
  font-family: var(--font-sans);
  font-size: var(--fg-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  background: color-mix(in srgb, var(--st, var(--neutral-status)) 14%, transparent);
  color: var(--st, var(--neutral-status));
}
.badge-status::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: var(--radius-round);
  background: var(--st, var(--neutral-status));
}
.badge-status[data-status="live"]     { --st: var(--success); }
.badge-status[data-status="upcoming"] { --st: var(--info); }
.badge-status[data-status="closed"]   { --st: var(--neutral-status); }
/* the LIVE badge glows */
.badge-status[data-status="live"] { box-shadow: 0 0 16px color-mix(in srgb, var(--success) 30%, transparent); }

/* ---- SampleDataBadge ----------------------------------------------
   Gray corner tag on every fake-populated element. No exceptions. */
.badge-sample {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: var(--fg-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
  background: var(--panel-subtle);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.badge-sample--corner {
  position: absolute;
  top: var(--space-1);
  right: var(--space-1);
  z-index: 2;
}

/* ---- StatBlock ------------------------------------------------------
   Large tabular number with a quiet label beneath it. */
.stat-block { display: flex; flex-direction: column; gap: 4px; }
.stat-block .stat-value {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  font-size: var(--fg-card);
  line-height: var(--leading-tight);
  color: var(--fg);
}
.stat-block .stat-label {
  font-family: var(--font-sans);
  font-size: var(--fg-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--muted);
}
.stat-block--hero .stat-value {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--fg-hero);
  letter-spacing: var(--tracking-tight);
  color: var(--lime);
}

/* ---- MetricGrid ---------------------------------------------------------- */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: var(--space-1);
}
.metric-card {
  min-width: 0;
  min-height: 96px;
  padding: var(--space-2) var(--space-1);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  text-align: center;
}
.metric-card-value {
  color: var(--fg);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: clamp(22px, 7vw, 36px);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-weight: var(--weight-bold);
  letter-spacing: 0;
  line-height: 1;
}
.metric-card-label {
  color: var(--muted);
  font-size: var(--fg-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  line-height: 1.25;
  text-transform: uppercase;
}
.metric-card--hero { background: color-mix(in srgb, var(--lime) 12%, var(--panel)); }
.metric-card--hero .metric-card-value { color: var(--lime); }

/* ---- Buttons --------------------------------------------------------
   Exact geometry per §00. One primary per screen, maximum. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: var(--control-height);
  padding: 0 var(--space-3);
  border-radius: var(--control-radius);
  font-family: var(--font-sans);
  font-size: var(--control-font);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid transparent;
  background: none;
  transition: box-shadow 0.2s var(--ease-out), border-color 0.2s var(--ease-out), transform 0.08s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(var(--press-scale)); }
.btn--block { width: 100%; }

.btn--primary {
  background: var(--lime);
  color: var(--on-lime);
  box-shadow: var(--shadow-card);
}
.btn--primary:hover { box-shadow: var(--shadow-overlay); }

.btn--secondary {
  border-color: var(--border);
  color: var(--fg);
}
.btn--secondary:hover { border-color: rgba(var(--lime-rgb), 0.6); }

.btn--ghost {
  color: var(--muted);
  height: auto;
  padding: var(--space-1);
}
.btn--ghost:hover { text-decoration: underline; }

.btn--destructive {
  border-color: var(--danger);
  color: var(--danger);
}

/* ---- FilterChips ---------------------------------------------------- */
.chips { display: flex; gap: var(--space-1); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--radius-round);
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--fg-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.chip:hover { border-color: rgba(var(--lime-rgb), 0.6); }
.chip[aria-pressed="true"] {
  border-color: rgba(var(--lime-rgb), 0.6);
  color: var(--lime);
  background: color-mix(in srgb, var(--lime) 10%, transparent);
}

/* ---- PersonCard -----------------------------------------------------
   Two layouts: --row (board card) and --grid (talent grid tile). */
.person-card {
  position: relative;
  contain: layout paint style;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s var(--ease-out);
}

.person-card--grid {
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}
.person-card:hover { border-color: rgba(var(--lime-rgb), 0.5); }

/* row layout: photo thumb left, text right (kanban board) */
.person-card--row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1);
}
.person-card--row .pc-photo {
  position: relative;
  width: 56px; height: 56px;
  flex: none;
  border-radius: var(--control-radius);
  background: var(--panel-subtle);
  object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  overflow: hidden;
}
.person-card--row .pc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.person-card--row .pc-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.person-card .pc-name {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.person-card .pc-meta { font-size: var(--fg-label); color: var(--muted); }
.person-card .pc-badges { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; min-width: 0; }
.person-card .pc-tape { color: var(--muted); flex: none; display: inline-flex; }

/* grid layout: portrait photo, ink-fade, text overlaid (talent grid) */
.person-card--grid { aspect-ratio: 3 / 4; }
.person-card--grid .pc-photo {
  position: absolute; inset: 0;
  background: var(--panel-subtle);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.person-card--grid .pc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.person-card--grid .pc-body {
  position: absolute; inset: auto 0 0 0;
  padding: var(--space-2);
  padding-top: var(--space-6);
  background: linear-gradient(to top, rgba(7, 9, 6, 0.97) 0%, rgba(7, 9, 6, 0.82) 48%, rgba(7, 9, 6, 0) 100%);
  display: flex; flex-direction: column; gap: 6px;
}
.person-card--grid .pc-name { color: var(--lime); }
.person-card--grid .pc-meta,
.person-card--grid .pc-tape { color: #fff; }
.person-card--grid .badge-archetype {
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.28);
}

/* dragging state (board) — the one lifted-shadow exception, matches modal depth */
.person-card--dragging {
  box-shadow: var(--shadow-overlay);
  border-color: rgba(var(--lime-rgb), 0.6);
  transform: rotate(2deg);
}

/* ---- ConfidenceMeter (agent read) ----------------------------------- */
.confidence {
  display: flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
  font-size: var(--fg-label);
  color: var(--muted);
}
.confidence .conf-track {
  flex: 1; height: 4px;
  border-radius: var(--radius-round);
  background: var(--panel-subtle);
  overflow: hidden;
}
.confidence .conf-fill {
  height: 100%;
  border-radius: var(--radius-round);
  background: var(--lime);
}

/* --- v3 §04 filter dropdowns (replace .chip) ------------------------------- */
.filter-select { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.filter-select select {
  appearance: none;
  width: 100%;
  min-height: 44px; /* touch target at 390px */
  padding: 0 calc(var(--space-3) + 14px) 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--control-radius);
  background-color: var(--panel);
  color: var(--fg);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  text-overflow: ellipsis;
  /* caret drawn in currentColor, not lime — lime is never a glyph */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 12px 8px;
}
.filter-select select:hover { border-color: rgba(var(--lime-rgb), 0.6); }
.filter-select select:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

/* --- v3 §07 favorite star -------------------------------------------------- */
/* Lime as a FILL only, never as text. Off state is a hairline outline. */
.fav-star {
  position: absolute; top: var(--space-2); right: var(--space-2); z-index: 2;
  display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  color: #fff;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}
.fav-star:hover { transform: scale(1.08); }
.fav-star:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.fav-star[disabled] { opacity: 0.55; cursor: default; }
.fav-star[aria-pressed="true"] { color: var(--lime); --star-fill: var(--lime); }