/* ============================================================
   VoiceInsights Africa — Shared Component Primitives (Milestone A)
   Only components confirmed absent from style.css: alerts, tabs,
   modal/dialog, pagination, stepper, timeline, dropdown, a
   filter/search bar, and semantic evidence/decision/recommendation
   card variants. Buttons, cards, badges, tables, forms and
   skeleton loaders already exist in style.css and are reused as-is.
   Load this AFTER style.css and tokens.css.
   ============================================================ */

/* ---------- Alert ---------- */
.alert {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  font-size: .88rem; line-height: 1.5;
}
.alert-icon { flex: none; font-size: 1.1rem; line-height: 1; }
.alert-title { font-weight: 700; margin-bottom: .2em; }
.alert-info    { border-color: rgba(79,164,144,.35); background: rgba(79,164,144,.08); }
.alert-success { border-color: rgba(111,191,139,.35); background: var(--success-bg); color: var(--success); }
.alert-warn    { border-color: rgba(228,194,58,.35); background: var(--warn-bg); color: var(--warn); }
.alert-danger  { border-color: rgba(217,99,74,.35); background: var(--danger-bg); color: var(--danger); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: var(--space-2); overflow-x: auto; border-bottom: 1px solid var(--border); padding-bottom: 0; }
.tab {
  flex: none; padding: var(--space-3) var(--space-4); border: none; background: transparent;
  color: var(--text-dim); font-weight: 700; font-size: .85rem; cursor: pointer;
  border-bottom: 2px solid transparent; transition: color var(--motion-base), border-color var(--motion-base);
}
.tab:hover { color: var(--text-muted); }
/* Wave 2: the shipped Workspace tab strip marks its selection with .is-active,
   so the canonical selected style answers to both names rather than forcing a
   JS rename that would risk the behaviour this wave is not allowed to change. */
/* The LABEL takes --accent-text (3.09:1 -> 4.88:1 on a light surface); the
   underline keeps the brand marigold, because a 2px rule is not text and has
   no ratio to meet. Selection is therefore still marked twice — by weight and
   by the rule — so it never rests on colour alone. */
.tab.active,
.tab.is-active { color: var(--accent-text); border-bottom-color: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------- Modal / Dialog ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); display: none;
  align-items: center; justify-content: center; padding: var(--space-5); z-index: 200;
}
.modal-overlay.open { display: flex; }
.modal-dialog {
  width: min(560px, 100%); max-height: 88vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: var(--space-6); box-shadow: var(--elevation-3);
}
.modal-dialog h2 { margin-top: 0; }
.modal-close { position: absolute; top: var(--space-4); right: var(--space-4); background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 1.1rem; }

/* ---------- Pagination ---------- */
.pagination { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.pagination button {
  min-width: 2.2rem; height: 2.2rem; padding: 0 .6rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: transparent; color: var(--text-muted);
  cursor: pointer; font-size: .82rem; font-weight: 700;
}
.pagination button.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.pagination button:disabled { opacity: .35; cursor: not-allowed; }

/* ---------- Stepper ---------- */
.stepper { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: var(--space-2); color: var(--text-dim); font-size: .82rem; font-weight: 700; }
.step-index {
  width: 1.6rem; height: 1.6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); font-size: .76rem;
}
.step.done .step-index { background: var(--success-bg); color: var(--success); border-color: transparent; }
.step.current .step-index { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.step.current { color: var(--text); }
.step-connector { width: 1.5rem; height: 1px; background: var(--border-strong); }

/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: var(--space-5); border-left: 2px solid var(--border-strong); }
.timeline-item { position: relative; margin-bottom: var(--space-5); }
.timeline-item::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-5) - 5px); top: .3rem;
  width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--bg);
}
.timeline-date { font-size: .74rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.timeline-title { font-weight: 700; margin: .2em 0; }

/* ---------- Dropdown ---------- */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 200px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: var(--elevation-2); padding: var(--space-2); display: none; z-index: 60;
}
.dropdown-menu.open { display: block; }
.dropdown-item {
  display: block; width: 100%; text-align: left; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  background: none; border: none; color: var(--text); font-size: .85rem; cursor: pointer;
}
.dropdown-item:hover { background: var(--surface-2); }

/* ---------- Filter / search bar ---------- */
.filter-bar { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-5); }
.search-field { position: relative; flex: 1 1 240px; min-width: 0; }
.search-field input {
  width: 100%; padding: .6rem .9rem .6rem 2.1rem; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: .85rem;
}
.search-field input:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.search-field::before {
  content: "🔎"; position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); font-size: .8rem; opacity: .6; pointer-events: none;
}

/* ---------- Semantic card variants (thin wrappers on .card) ---------- */
.evidence-card, .decision-card, .recommendation-card {
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface);
  padding: var(--space-4); border-left-width: 4px; border-left-style: solid;
}
.evidence-card       { border-left-color: var(--accent-2); }
.decision-card        { border-left-color: var(--accent); }
.recommendation-card  { border-left-color: var(--success); }
.evidence-card b, .decision-card b, .recommendation-card b { display: block; margin-bottom: .3em; }

@media (max-width: 640px) {
  .tabs { gap: var(--space-1); }
  .modal-dialog { padding: var(--space-4); }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar .search-field { flex: 0 0 auto; width: 100%; }
}

/* ---------- Product foundation ---------- */
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important;
  white-space: nowrap !important; border: 0 !important;
}
.section-header { max-width: 720px; margin-bottom: var(--space-6); }
.section-header.centered { margin-inline: auto; text-align: center; }
.section-header h2 { margin: .45rem 0 .75rem; font-size: var(--text-2xl); }
.section-header p { font-size: var(--text-lg); line-height: 1.65; }

.capability-card, .data-product-card, .trust-card, .industry-card, .kpi-card, .dashboard-panel, .chart-panel {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  background: var(--surface-base); padding: var(--space-5); box-shadow: var(--elevation-1);
}
.capability-card h3, .data-product-card h3, .trust-card h3, .industry-card h3 { margin: .65rem 0 .45rem; font-size: 1.05rem; }
.component-icon { width: 2.35rem; height: 2.35rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(228,162,58,.12); color: var(--accent); }
.component-icon svg { width: var(--icon-md); height: var(--icon-md); }

.format-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--space-4); }
.format-badge { display: inline-flex; align-items: center; min-height: 1.75rem; padding: .25rem .55rem; border: 1px solid var(--border-subtle); border-radius: 999px; color: var(--text-secondary); font-size: var(--text-xs); font-weight: 700; }
.format-badge.planned { border-style: dashed; opacity: .72; }
.format-disclosure { margin-top: var(--space-3); color: var(--text-secondary); }
.format-disclosure summary { width: fit-content; cursor: pointer; color: var(--text-secondary); font-size: var(--text-xs); font-weight: 750; }
.format-disclosure summary:hover { color: var(--text-primary); }
.format-disclosure[open] summary { color: var(--accent); }
.format-disclosure .format-list { margin-top: var(--space-2); }
.download-action { display: inline-flex; align-items: center; gap: .45rem; margin-top: var(--space-4); color: var(--accent-2); font-weight: 700; font-size: var(--text-sm); }

.state-panel { border: 1px dashed var(--border-interactive); border-radius: var(--radius-lg); padding: var(--space-6); text-align: center; background: var(--surface-raised); }
.state-panel h3 { margin: .75rem 0 .35rem; }
.state-panel p { max-width: 48ch; margin-inline: auto; }
.state-loading { position: relative; overflow: hidden; }
.state-loading::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent); transform: translateX(-100%); animation: vi-shimmer 1.6s infinite; }
@keyframes vi-shimmer { to { transform: translateX(100%); } }

.workspace-preview { border: 1px solid var(--border-interactive); border-radius: var(--radius-xl); overflow: hidden; background: var(--surface-base); box-shadow: var(--elevation-3); }
.workspace-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border-bottom: 1px solid var(--border-subtle); background: var(--surface-raised); }
.workspace-preview-body { display: grid; grid-template-columns: 180px 1fr; min-height: 440px; }
.workspace-preview-nav { padding: 1rem; border-right: 1px solid var(--border-subtle); }
.workspace-preview-nav span { display: block; padding: .55rem .65rem; border-radius: 8px; color: var(--text-tertiary); font-size: var(--text-xs); font-weight: 700; }
.workspace-preview-nav span.active { color: var(--text-primary); background: rgba(228,162,58,.12); }
.workspace-preview-main { padding: var(--space-5); min-width: 0; }
.workspace-kpis { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .75rem; }
.kpi-value { display: block; font-family: var(--font-display); font-size: 1.55rem; color: var(--text-primary); }
.kpi-label { color: var(--text-tertiary); font-size: var(--text-xs); }
.preview-chart { display: flex; align-items: end; gap: .45rem; height: 150px; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-subtle); }
.preview-chart span { flex: 1; min-width: 8px; height: var(--bar); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg,var(--accent),rgba(228,162,58,.22)); }

.breadcrumb-list { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: 0 0 .25rem; padding: 0; list-style: none; color: var(--text-tertiary); font-size: var(--text-xs); }
.breadcrumb-list li:not(:last-child)::after { content: '/'; margin-left: .35rem; color: var(--border-interactive); }

@media (max-width: 860px) {
  .workspace-preview-body { grid-template-columns: 1fr; }
  .workspace-preview-nav { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
  .workspace-preview-nav span { white-space: nowrap; }
  .workspace-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 480px) {
  .workspace-preview-main { padding: var(--space-4); }
  .workspace-kpis { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   WAVE 3 — RESPONSIVE, FOCUS AND MOTION PRIMITIVES

   Added to the CANONICAL component layer rather than to pages, so a single
   definition serves every shell surface and Wave 3's guarantees cannot drift
   page by page. Everything below is token-based, which is what lets the theme
   switch centrally instead of per-component.
   ============================================================ */

/* ---------- Focus visibility ----------
   :focus-visible only, so a mouse click does not paint a ring while a keyboard
   user still gets one. The outline is never removed without a replacement -
   that is the failure mode this exists to prevent. */
.tab:focus-visible,
.modal-close:focus-visible,
.dropdown-item:focus-visible,
.search-field input:focus-visible,
.nav-item:focus-visible,
.skip-link:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ---------- Table responsiveness ----------
   A scroll CONTAINER rather than shrinking columns: a table squeezed until the
   text wraps to one character per line is technically responsive and
   practically unreadable. Row actions stay reachable because the row keeps its
   width and the viewport moves. */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll > table { min-width: 40rem; }

/* ---------- Dialog responsiveness ---------- */
.modal-dialog {
  max-width: min(48rem, calc(100vw - var(--space-5) * 2));
  max-height: calc(100vh - var(--space-6) * 2);
  overflow-y: auto;
}

/* ---------- Touch targets ----------
   Applied to the controls a thumb actually reaches on a phone. Dense desktop
   tables are deliberately excluded: enlarging every cell control there breaks
   the layout it is meant to help. */
@media (pointer: coarse) {
  .tab,
  .modal-close,
  .nav-item,
  .mobile-nav-toggle,
  #menu-toggle,
  .ew-copilot-launch,
  #via-launcher { min-height: 44px; min-width: 44px; }
}

/* ---------- Card and filter reflow ---------- */
@media (max-width: 720px) {
  .filter-bar { flex-wrap: wrap; }
  .filter-bar > * { flex: 1 1 100%; }
  .workspace-kpis { grid-template-columns: 1fr; }
  .tabs { gap: var(--space-1); }
}

/* ---------- Reduced motion ----------
   Motion is shortened rather than deleted: a transition of ~0 keeps state
   changes legible without animating them at anyone who asked us not to. */
@media (prefers-reduced-motion: reduce) {
  .tab,
  .modal-overlay,
  .modal-dialog,
  .dropdown-menu,
  .nav-item { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}