/* =====================================================================
   Wakilii component primitives — built on the canonical token layer
   (wakilii-tokens.css). ONE definition per component, shared by the
   Tailwind app shell (base.html), the public pages (public_base.html)
   and — from DS5 — the React SPA. Class prefix: .wk-.

   Every colour, radius, shadow, space and type value here is a --wk-*
   token, never a literal, so the brand stays single-sourced and dark
   mode works for free. Pages adopt these in DS4; until then the file is
   additive (linked everywhere, legacy class names still own current
   markup), so shipping it changes nothing on its own.
   ===================================================================== */

/* =====================================================================
   1. Buttons — .wk-btn + modifiers
   ===================================================================== */
.wk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--wk-space-2);
  font-family: var(--wk-font-sans);
  font-weight: 500; font-size: var(--wk-text-sm);
  line-height: 1; letter-spacing: -0.005em;
  padding: 0.625rem 1.125rem;
  border-radius: var(--wk-radius-sm);
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .12s ease, border-color .12s ease,
              color .12s ease, box-shadow .12s ease, transform .04s ease;
}
.wk-btn:focus-visible { outline: none; box-shadow: 0 0 0 4px rgb(var(--wk-gold-rgb) / 0.28); }
.wk-btn:active { transform: translateY(0.5px); }
.wk-btn[disabled], .wk-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

.wk-btn--primary {
  background: var(--wk-btn-bg); color: var(--wk-text-invert);
  box-shadow: 0 1px 0 rgb(var(--wk-ink-900-rgb) / 0.10), inset 0 1px 0 rgb(255 255 255 / 0.10);
}
.wk-btn--primary:hover { background: var(--wk-ink-900); color: var(--wk-text-invert); }
a.wk-btn--primary, a.wk-btn--primary:hover { color: var(--wk-text-invert); }

.wk-btn--secondary { background: var(--wk-card); color: var(--wk-text); border-color: var(--wk-line); }
.wk-btn--secondary:hover { background: var(--wk-soft); border-color: var(--wk-line-strong); }

.wk-btn--quiet { background: transparent; color: var(--wk-accent); padding-left: var(--wk-space-2); padding-right: var(--wk-space-2); }
.wk-btn--quiet:hover { color: var(--wk-gold); background: transparent; }

.wk-btn--danger { background: var(--wk-card); color: var(--wk-danger); border-color: var(--wk-danger-line); }
.wk-btn--danger:hover { background: var(--wk-danger-soft); }

.wk-btn--sm { font-size: var(--wk-text-xs); padding: 0.375rem 0.75rem; border-radius: 0.375rem; }
.wk-btn--lg { font-size: var(--wk-text-md); padding: 0.8125rem 1.375rem; }
.wk-btn--block { width: 100%; }

/* =====================================================================
   2. Cards — .wk-card (+ pad / hover / interactive)
   ===================================================================== */
.wk-card {
  background: var(--wk-card);
  border: 1px solid var(--wk-line);
  border-radius: var(--wk-radius-lg);
  box-shadow: var(--wk-shadow-card);
}
.wk-card--pad { padding: var(--wk-space-5) var(--wk-space-6); }
.wk-card--hover { transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; }
.wk-card--hover:hover { box-shadow: var(--wk-shadow-lift); border-color: var(--wk-line-strong); }
a.wk-card--hover:hover { transform: translateY(-1px); }
.wk-card__title { font-size: var(--wk-text-md); font-weight: 600; color: var(--wk-text); margin: 0 0 var(--wk-space-1); letter-spacing: -0.005em; }
.wk-card__meta { font-size: var(--wk-text-xs); color: var(--wk-text-muted); }

/* =====================================================================
   3. Badges & pills — .wk-badge (status) / .wk-pill (tag)
   ===================================================================== */
.wk-badge {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-size: var(--wk-text-xs); font-weight: 600; line-height: 1;
  padding: 0.3em 0.6em; border-radius: var(--wk-radius-sm);
  border: 1px solid transparent; white-space: nowrap;
}
.wk-badge--neutral { background: var(--wk-soft); color: var(--wk-ink-700); }
.wk-badge--navy    { background: var(--wk-accent-soft); color: var(--wk-accent); }
.wk-badge--gold    { background: var(--wk-gold-soft); color: var(--wk-gold); }
.wk-badge--forest  { background: var(--wk-forest-soft); color: var(--wk-forest); }

.wk-pill {
  display: inline-flex; align-items: center;
  font-size: var(--wk-text-xs); color: var(--wk-ink-700);
  background: var(--wk-soft); border-radius: var(--wk-radius-pill);
  padding: 0.25em 0.75em; white-space: nowrap;
}
.wk-pill--outline { background: transparent; border: 1px solid var(--wk-line); color: var(--wk-text-muted); }

/* Interactive facet/filter pill — clickable, with a count and active state. */
.wk-pill--filter { border: 1px solid transparent; background: var(--wk-soft); color: var(--wk-ink-600); font-family: inherit; cursor: pointer; gap: 0.5em; }
.wk-pill--filter:hover { background: var(--wk-ink-100); color: var(--wk-ink-800); }
.wk-pill--filter.is-on { background: var(--wk-accent); border-color: transparent; color: var(--wk-text-invert); font-weight: 600; }
.wk-pill__n { font-size: 0.92em; color: var(--wk-text-muted); }
.wk-pill--filter.is-on .wk-pill__n { color: inherit; opacity: 0.72; }

/* Icon tile — soft info-blue rounded chip holding an svg glyph. Shared by
   the Knowledge category cards/rows and (later) the dashboard quick-access. */
.wk-icon-tile {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 46px; height: 46px; border-radius: var(--wk-radius-md);
  background: var(--wk-tile-bg); color: var(--wk-tile-ink);
}
.wk-icon-tile svg { width: 22px; height: 22px; }
.wk-icon-tile--lg { width: 50px; height: 50px; border-radius: var(--wk-radius-lg); }
.wk-icon-tile--lg svg { width: 24px; height: 24px; }

/* =====================================================================
   4. Trust & provenance — attribution is load-bearing in Wakilii.
      .wk-trust  (source/attribution chip)
      .wk-ai-badge + .wk-ai-note  (AI-generated marker + disclaimer)
   ===================================================================== */
.wk-trust {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: var(--wk-text-xs); color: var(--wk-text-muted);
  background: var(--wk-soft); border: 1px solid var(--wk-line);
  border-radius: var(--wk-radius-pill); padding: 0.3em 0.7em;
}
.wk-trust__dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--wk-ink-300); flex: 0 0 auto; }
.wk-trust--verified { color: var(--wk-forest); border-color: var(--wk-forest-soft); background: var(--wk-forest-soft); }
.wk-trust--verified .wk-trust__dot { background: var(--wk-forest); }

/* AI-generated marker — deliberately distinct (gold outline) so machine
   output is never mistaken for editorial/authoritative text. */
.wk-ai-badge {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: var(--wk-text-xs); font-weight: 600; line-height: 1;
  color: var(--wk-gold); background: var(--wk-gold-soft);
  border: 1px solid rgb(var(--wk-gold-rgb) / 0.35);
  border-radius: var(--wk-radius-pill); padding: 0.3em 0.7em; white-space: nowrap;
}
.wk-ai-badge::before { content: "✦"; font-size: 0.85em; line-height: 1; }
.wk-ai-note {
  font-size: var(--wk-text-xs); color: var(--wk-text-muted);
  border-left: 2px solid rgb(var(--wk-gold-rgb) / 0.45);
  padding-left: var(--wk-space-3); margin-top: var(--wk-space-3); line-height: var(--wk-leading-snug);
}

/* =====================================================================
   5. Page header — .wk-page-header (eyebrow · title · lede · actions)
   ===================================================================== */
.wk-page-header { margin-bottom: var(--wk-space-7); }
.wk-page-header__eyebrow {
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--wk-text-muted); margin-bottom: var(--wk-space-2);
}
.wk-page-header__title {
  font-family: var(--wk-font-sans); font-size: var(--wk-text-2xl);
  line-height: var(--wk-leading-tight); letter-spacing: var(--wk-tracking-display);
  color: var(--wk-text); margin: 0;
}
.wk-page-header__lede { font-size: var(--wk-text-md); color: var(--wk-text-muted); margin-top: var(--wk-space-2); max-width: var(--wk-reading); }
.wk-page-header__actions { display: flex; flex-wrap: wrap; gap: var(--wk-space-2); margin-top: var(--wk-space-4); }

/* =====================================================================
   6. Search bar — .wk-search (icon · input · submit)
   ===================================================================== */
.wk-search { display: flex; align-items: center; gap: var(--wk-space-2); min-width: 0; }
.wk-search__field { position: relative; flex: 1 1 auto; min-width: 0; }
.wk-search__icon { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--wk-text-hint); pointer-events: none; display: inline-flex; }
.wk-search__input {
  width: 100%; font-family: var(--wk-font-sans); font-size: var(--wk-text-base); color: var(--wk-text);
  background: var(--wk-card); border: 1px solid var(--wk-line);
  border-radius: var(--wk-radius-pill); padding: 0.7rem 1rem 0.7rem 2.5rem;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.wk-search__input::placeholder { color: var(--wk-text-hint); }
.wk-search__input:hover { border-color: var(--wk-line-strong); }
.wk-search__input:focus { outline: none; border-color: var(--wk-accent); box-shadow: 0 0 0 4px rgb(var(--wk-accent-rgb) / 0.12); }

/* =====================================================================
   7. Loading skeletons — .wk-skeleton (shimmer; reduced-motion aware)
   ===================================================================== */
.wk-skeleton {
  position: relative; overflow: hidden;
  background: var(--wk-soft); border-radius: var(--wk-radius-sm);
}
.wk-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgb(var(--wk-card-rgb) / 0.65), transparent);
  transform: translateX(-100%); animation: wk-shimmer 1.4s ease infinite;
}
.wk-skeleton--line  { height: 0.75rem; margin: 0.4rem 0; }
.wk-skeleton--title { height: 1.25rem; width: 55%; margin-bottom: 0.85rem; }
.wk-skeleton--card  { height: 7rem; border-radius: var(--wk-radius-lg); }
@keyframes wk-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .wk-skeleton::after { animation: none; } }

/* =====================================================================
   8. Empty state — .wk-empty (icon · title · text · action)
   ===================================================================== */
.wk-empty {
  text-align: center; max-width: 30rem; margin: var(--wk-space-12) auto;
  color: var(--wk-text-muted);
}
.wk-empty__icon { color: var(--wk-ink-300); margin-bottom: var(--wk-space-3); display: inline-flex; }
.wk-empty__title { font-size: var(--wk-text-lg); font-weight: 600; color: var(--wk-text); margin: 0 0 var(--wk-space-2); }
.wk-empty__text { font-size: var(--wk-text-sm); line-height: var(--wk-leading-body); margin: 0 auto var(--wk-space-4); }

/* =====================================================================
   9. AI answer block — .wk-answer (AskDenning structured answer)
   ===================================================================== */
.wk-answer {
  background: var(--wk-card); border: 1px solid var(--wk-line);
  border-radius: var(--wk-radius-lg); box-shadow: var(--wk-shadow-card);
  padding: var(--wk-space-6); border-left: 3px solid var(--wk-accent);
}
.wk-answer__short { font-size: var(--wk-text-lg); line-height: var(--wk-leading-snug); color: var(--wk-text); font-weight: 500; margin: 0 0 var(--wk-space-4); }
.wk-answer__label {
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--wk-text-muted); margin: var(--wk-space-5) 0 var(--wk-space-2);
}
.wk-answer__body { font-size: var(--wk-text-base); line-height: var(--wk-leading-body); color: var(--wk-ink-700); }
.wk-answer__sources { display: grid; gap: var(--wk-space-3); grid-template-columns: minmax(0, 1fr); margin-top: var(--wk-space-3); }

/* =====================================================================
   10. Citation block — .wk-cite (a cited authority, attribution-first)
   ===================================================================== */
.wk-cite {
  background: var(--wk-card); border: 1px solid var(--wk-line);
  border-radius: var(--wk-radius-md); padding: var(--wk-space-4) var(--wk-space-5);
  border-left: 3px solid var(--wk-gold-mark);
}
.wk-cite__party { font-weight: 600; color: var(--wk-text); font-size: var(--wk-text-base); letter-spacing: -0.005em; }
.wk-cite__meta { display: flex; flex-wrap: wrap; gap: 0.35em 0.9em; font-size: var(--wk-text-xs); color: var(--wk-text-muted); margin-top: var(--wk-space-1); }
.wk-cite__meta b { color: var(--wk-ink-700); font-weight: 600; }
.wk-cite__attribution { font-size: var(--wk-text-xs); color: var(--wk-text-hint); border-top: 1px solid var(--wk-line); margin-top: var(--wk-space-3); padding-top: var(--wk-space-2); }

/* =====================================================================
   Mobile — house breakpoints. Form controls hit 16px so iOS Safari
   doesn't zoom on focus; display type eases down; pills may wrap.
   ===================================================================== */
@media (max-width: 640px) {
  .wk-page-header__title { font-size: 1.625rem; }
  .wk-answer { padding: var(--wk-space-5); }
  .wk-answer__short { font-size: var(--wk-text-md); }
  .wk-search__input, .wk-btn { font-size: 16px; }
  .wk-card--pad { padding: var(--wk-space-4); }
}