/*
 * HDS Component Primitives — Base styles.
 * ============================================================
 * These styles implement the Component Contracts (components/*.md).
 * All values reference HDS tokens — no hardcoded hex, no magic numbers.
 *
 * Loading order: after all token files (foundation → semantic → decision → brand → density).
 */

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Button
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hds-space-2);
  padding: var(--hds-space-2) var(--hds-space-4);
  border: none;
  border-radius: var(--hds-radius-md);
  font-family: var(--hds-font-sans);
  font-size: var(--hds-font-base);
  font-weight: var(--hds-font-weight-semibold);
  line-height: var(--hds-leading-tight);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  transition:
    background var(--hds-duration-fast) var(--hds-ease-out),
    color var(--hds-duration-fast) var(--hds-ease-out),
    border-color var(--hds-duration-fast) var(--hds-ease-out),
    transform var(--hds-duration-fast) var(--hds-ease-out),
    box-shadow var(--hds-duration-fast) var(--hds-ease-out);
}

.hds-btn:focus-visible {
  outline: 3px solid var(--hds-brand-accent);
  outline-offset: 2px;
}

.hds-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── Size variants ── */

.hds-btn--sm {
  padding: var(--hds-space-1) var(--hds-space-3);
  font-size: var(--hds-font-sm);
  border-radius: var(--hds-radius-sm);
}

.hds-btn--lg {
  padding: var(--hds-space-3) var(--hds-space-6);
  font-size: var(--hds-font-md);
  border-radius: var(--hds-radius-lg);
}

.hds-btn--block {
  display: flex;
  width: 100%;
}

/* ── Type: Primary ── */

.hds-btn--primary {
  background: var(--hds-brand-accent);
  color: var(--hds-neutral-900);
}

.hds-btn--primary:hover {
  background: var(--hds-brand-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px var(--hds-brand-accent-glow);
}

.hds-btn--primary:active {
  transform: translateY(0);
}

/* ── Type: Secondary ── */

.hds-btn--secondary {
  background: transparent;
  color: var(--hds-text-secondary);
  border: 1px solid var(--hds-border-default);
}

.hds-btn--secondary:hover {
  color: var(--hds-text-primary);
  border-color: var(--hds-border-strong);
}

/* ── Type: Ghost ── */

.hds-btn--ghost {
  background: transparent;
  color: var(--hds-brand-accent);
}

.hds-btn--ghost:hover {
  background: var(--hds-brand-accent-soft);
}

/* ── Type: Danger ── */

.hds-btn--danger {
  background: var(--hds-feedback-danger);
  color: var(--hds-neutral-0);
}

.hds-btn--danger:hover {
  background: var(--hds-feedback-danger-hover);
}

.hds-btn--danger:focus-visible {
  outline: 3px solid var(--hds-feedback-danger);
}

/* ── Secondary / Ghost focus-visible overrides ── */

.hds-btn--secondary:focus-visible,
.hds-btn--ghost:focus-visible {
  outline-width: 2px;
}

/* ── Button icon ── */

.hds-btn__icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}

.hds-btn__icon--end {
  order: 1;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Card
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hds-card {
  background: var(--hds-surface-card);
  border: 1px solid var(--hds-border-default);
  border-radius: var(--hds-radius-lg);
  box-shadow: var(--hds-shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--hds-duration-fast) var(--hds-ease-out);
}

.hds-card__header {
  padding: var(--hds-density-card-padding) var(--hds-density-card-padding) 0;
}

.hds-card__title {
  font-size: var(--hds-font-md);
  font-weight: var(--hds-font-weight-bold);
  color: var(--hds-text-primary);
  margin: 0 0 var(--hds-space-1);
}

.hds-card__desc {
  font-size: var(--hds-font-sm);
  color: var(--hds-text-secondary);
  margin: 0 0 var(--hds-space-3);
}

.hds-card__body {
  padding: var(--hds-density-card-padding);
}

.hds-card__footer {
  padding: var(--hds-space-4) var(--hds-density-card-padding);
  border-top: 1px solid var(--hds-border-subtle);
  display: flex;
  align-items: center;
  gap: var(--hds-space-3);
}

/* ── Cards: base fallback padding ── */
.hds-card { padding: 20px; }

/* ── Legacy variant aliases (for backward compat with ✅ layouts) ── */
.hds-card--flat { box-shadow: none; }
.hds-card--raised:hover { box-shadow: var(--hds-shadow-md); transform: translateY(-2px); }
.hds-card--filled { background: var(--hds-surface-hover); border: none; box-shadow: none; }
.hds-card--filled:hover { box-shadow: var(--hds-shadow-md); }
.hds-card--outline { background: transparent; border: 1px solid var(--hds-border-default); box-shadow: none; }
.hds-card--outline:hover { border-color: var(--hds-brand-accent); }
.hds-card--floating { box-shadow: var(--hds-shadow-lg); }
.hds-card--floating:hover { box-shadow: var(--hds-shadow-xl); transform: translateY(-4px); }
.hds-card--glow:hover { box-shadow: 0 0 0 1px var(--hds-brand-accent), var(--hds-shadow-md); }

/* --- Solid: classic white card with subtle border and shadow --- */
.hds-card--solid {
  background: var(--hds-surface-card);
  border: 1px solid var(--hds-border-default);
  box-shadow: var(--hds-shadow-sm);
}
.hds-card--solid:hover {
  box-shadow: var(--hds-shadow-md);
  transform: translateY(-2px);
}

/* --- Subtle: light tinted bg, no border, no shadow, soft --- */
.hds-card--subtle {
  background: var(--hds-surface-hover);
  border: none;
  box-shadow: none;
}
.hds-card--subtle:hover {
  box-shadow: var(--hds-shadow-md);
  transform: translateY(-1px);
}

/* --- Bordered: 2px visible border, no shadow --- */
.hds-card--bordered {
  background: var(--hds-surface-card);
  border: 2px solid var(--hds-border-default);
  box-shadow: none;
}
.hds-card--bordered:hover {
  border-color: var(--hds-brand-accent);
}

/* --- Elevated: visible shadow at rest, dramatic lift on hover --- */
.hds-card--elevated {
  background: var(--hds-surface-card);
  border: 1px solid var(--hds-border-default);
  box-shadow: var(--hds-shadow-md);
}
.hds-card--elevated:hover {
  box-shadow: var(--hds-shadow-xl);
  transform: translateY(-4px);
}

/* --- Ghost: fully transparent, no chrome, appears on hover --- */
.hds-card--ghost {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.hds-card--ghost:hover {
  background: var(--hds-surface-hover);
}

/* --- Glass: translucent blur card --- */
.hds-card--glass {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.hds-card--glass:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* --- Accent Top: 4px brand-color top bar --- */
.hds-card--accent-top {
  border-top: 4px solid var(--hds-brand-accent);
  border-radius: 0 0 var(--hds-radius-lg) var(--hds-radius-lg);
}

/* --- Accent Left: 4px brand-color left bar --- */
.hds-card--accent-left {
  border-left: 4px solid var(--hds-brand-accent);
}

/* --- Dot: accent dot marker top-left --- */
.hds-card--dot {
  position: relative;
}
.hds-card--dot::before {
  content: '';
  position: absolute;
  top: var(--hds-space-3);
  left: var(--hds-space-3);
  width: 8px;
  height: 8px;
  border-radius: var(--hds-radius-full);
  background: var(--hds-brand-accent);
}

/* ── Card: focus-within (when a card contains a focused input) ── */

.hds-card:focus-within {
  border-color: var(--hds-brand-accent);
  box-shadow: 0 0 0 1px var(--hds-brand-accent-soft);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Form
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hds-form {
  display: flex;
  flex-direction: column;
  gap: var(--hds-density-field-gap);
}

.hds-form--grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--hds-density-field-gap) var(--hds-space-5);
}

.hds-form--grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--hds-density-field-gap) var(--hds-space-5);
}

.hds-form--inline {
  display: flex;
  align-items: flex-end;
  gap: var(--hds-space-3);
  flex-wrap: wrap;
}

.hds-form__section {
  padding-top: var(--hds-space-3);
}

.hds-form__section:first-child {
  padding-top: 0;
}

.hds-form__section-title {
  font-size: var(--hds-font-md);
  font-weight: var(--hds-font-weight-bold);
  color: var(--hds-text-primary);
  margin: 0 0 var(--hds-space-1);
}

.hds-form__section-desc {
  font-size: var(--hds-font-sm);
  color: var(--hds-text-secondary);
  margin: 0 0 var(--hds-space-4);
}

/* ── Field ── */

.hds-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--hds-space-1);
}

.hds-form__field--half { width: 50%; }
.hds-form__field--third { width: 33.333%; }
.hds-form__field--quarter { width: 25%; }

/* ── Label ── */

.hds-form__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--hds-font-sm);
  font-weight: var(--hds-font-weight-semibold);
  color: var(--hds-text-primary);
}

.hds-form__label-hint {
  font-size: var(--hds-font-xs);
  font-weight: var(--hds-font-weight-normal);
  color: var(--hds-text-muted);
}

.hds-form__required {
  color: var(--hds-feedback-danger);
  margin-left: 2px;
}

.hds-form__optional {
  font-weight: var(--hds-font-weight-normal);
  color: var(--hds-text-muted);
  margin-left: var(--hds-space-1);
}

.hds-form__count {
  margin-left: auto;
  font-size: var(--hds-font-xs);
  color: var(--hds-text-muted);
  font-weight: var(--hds-font-weight-normal);
}

/* ── Input ── */

.hds-form__input,
.hds-form__select,
.hds-form__textarea {
  width: 100%;
  padding: var(--hds-space-2) var(--hds-space-3);
  border: 1px solid var(--hds-border-default);
  border-radius: var(--hds-radius-md);
  font-family: var(--hds-font-sans);
  font-size: var(--hds-font-base);
  color: var(--hds-text-primary);
  background: var(--hds-surface-card);
  line-height: var(--hds-leading-normal);
  transition:
    border-color var(--hds-duration-fast) var(--hds-ease-out),
    box-shadow var(--hds-duration-fast) var(--hds-ease-out);
}

.hds-form__input::placeholder,
.hds-form__textarea::placeholder {
  color: var(--hds-text-muted);
}

.hds-form__input:focus,
.hds-form__select:focus,
.hds-form__textarea:focus {
  outline: none;
  border-color: var(--hds-brand-accent);
  box-shadow: 0 0 0 3px var(--hds-brand-accent-soft);
}

.hds-form__input:disabled,
.hds-form__select:disabled,
.hds-form__textarea:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--hds-surface-hover);
}

.hds-form__input[readonly],
.hds-form__textarea[readonly] {
  background: var(--hds-surface-hover);
  cursor: default;
}

/* ── Input size variants ── */

.hds-form__input--lg { padding: var(--hds-space-3) var(--hds-space-4); font-size: var(--hds-font-md); }
.hds-form__input--sm { padding: var(--hds-space-1) var(--hds-space-2); font-size: var(--hds-font-sm); }

/* ── Validation states ── */

.hds-form__input--valid {
  border-color: var(--hds-feedback-success);
}

.hds-form__input--valid:focus {
  box-shadow: 0 0 0 3px var(--hds-feedback-success-soft);
}

.hds-form__input--invalid {
  border-color: var(--hds-feedback-danger);
}

.hds-form__input--invalid:focus {
  box-shadow: 0 0 0 3px var(--hds-feedback-danger-soft);
}

/* ── Validation message ── */

.hds-form__message {
  font-size: var(--hds-font-xs);
  margin: 0;
  animation: hds-fade-in var(--hds-duration-fast) var(--hds-ease-out);
}

.hds-form__message--error {
  color: var(--hds-feedback-danger);
}

.hds-form__message--success {
  color: var(--hds-feedback-success);
}

/* ── Affix ── */

.hds-form__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.hds-form__affix {
  position: absolute;
  font-size: var(--hds-font-sm);
  color: var(--hds-text-muted);
  pointer-events: none;
  z-index: 1;
}

.hds-form__affix--prefix {
  left: var(--hds-space-3);
}

.hds-form__affix--suffix {
  right: var(--hds-space-3);
}

.hds-form__input--has-prefix {
  padding-left: calc(var(--hds-space-3) + 1.2em);
}

.hds-form__input--has-suffix {
  padding-right: calc(var(--hds-space-3) + 1.2em);
}

/* ── Validation indicator (checkmark / cross icon inside input) ── */

.hds-form__indicator {
  position: absolute;
  right: var(--hds-space-3);
  display: flex;
  align-items: center;
  font-size: var(--hds-font-base);
  pointer-events: none;
  transition: opacity var(--hds-duration-fast);
}

.hds-form__input--valid + .hds-form__indicator {
  color: var(--hds-feedback-success);
}

.hds-form__input--invalid + .hds-form__indicator {
  color: var(--hds-feedback-danger);
}

/* ── Checkbox / Radio ── */

.hds-form__checkbox,
.hds-form__radio {
  display: inline-flex;
  align-items: center;
  gap: var(--hds-space-2);
  font-size: var(--hds-font-sm);
  color: var(--hds-text-primary);
  cursor: pointer;
}

.hds-form__checkbox input[type="checkbox"],
.hds-form__radio input[type="radio"] {
  width: 16px;
  height: 16px;
  accent-color: var(--hds-brand-accent);
}

.hds-form__checkbox-label,
.hds-form__radio-label {
  user-select: none;
}

/* ── Actions ── */

.hds-form__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--hds-space-3);
  padding-top: var(--hds-space-4);
  border-top: 1px solid var(--hds-border-subtle);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Toast
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hds-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  padding: var(--hds-space-3) var(--hds-space-5);
  border-radius: var(--hds-radius-lg);
  font-family: var(--hds-font-sans);
  font-size: var(--hds-font-base);
  font-weight: var(--hds-font-weight-semibold);
  line-height: var(--hds-leading-tight);
  z-index: 10000;
  max-width: 480px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity var(--hds-duration-base) var(--hds-ease-out),
    transform var(--hds-duration-base) var(--hds-ease-spring);
}

.hds-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.hds-toast--success {
  background: var(--hds-feedback-success);
  color: var(--hds-neutral-0);
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
}

.hds-toast--error {
  background: var(--hds-feedback-danger);
  color: var(--hds-neutral-0);
  box-shadow: 0 8px 24px rgba(239, 68, 68, 0.3);
}

.hds-toast--info {
  background: var(--hds-brand-accent);
  color: var(--hds-neutral-0);
  box-shadow: 0 8px 24px var(--hds-brand-accent-glow);
}

.hds-toast--warning {
  background: var(--hds-feedback-warning);
  color: var(--hds-neutral-900);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Skeleton
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hds-skeleton {
  background:
    linear-gradient(
      90deg,
      var(--hds-surface-hover) 25%,
      var(--hds-border-subtle) 37%,
      var(--hds-surface-hover) 63%
    );
  background-size: 400% 100%;
  animation: hds-shimmer 1.4s ease infinite;
  border-radius: var(--hds-radius-sm);
}

.hds-skeleton--text {
  height: 1em;
  width: 60%;
  margin-bottom: var(--hds-space-2);
}

.hds-skeleton--title {
  height: 1.3em;
  width: 40%;
  margin-bottom: var(--hds-space-3);
}

.hds-skeleton--card {
  height: 120px;
  width: 100%;
  margin-bottom: var(--hds-space-4);
  border-radius: var(--hds-radius-lg);
}

.hds-skeleton--kpi {
  height: 100px;
  width: 100%;
  border-radius: var(--hds-radius-lg);
}

.hds-skeleton--table-row {
  height: 40px;
  width: 100%;
  margin-bottom: var(--hds-space-1);
  border-radius: var(--hds-radius-sm);
}

.hds-skeleton--avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--hds-radius-full);
}

@keyframes hds-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0 0; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Empty State
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hds-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--hds-space-4);
  padding: var(--hds-space-10) var(--hds-space-6);
  text-align: center;
}

.hds-empty-state__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hds-brand-accent-soft);
  border-radius: var(--hds-radius-lg);
  font-size: var(--hds-font-2xl);
  color: var(--hds-brand-accent);
}

.hds-empty-state__title {
  font-size: var(--hds-font-lg);
  font-weight: var(--hds-font-weight-bold);
  color: var(--hds-text-primary);
  margin: 0;
}

.hds-empty-state__desc {
  font-size: var(--hds-font-base);
  color: var(--hds-text-muted);
  max-width: 360px;
  margin: 0;
  line-height: var(--hds-leading-relaxed);
}

.hds-empty-state__action {
  margin-top: var(--hds-space-2);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Modal
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.hds-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: var(--hds-surface-overlay);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--hds-space-4);
  animation: hds-fade-in var(--hds-duration-base) var(--hds-ease-out);
}

.hds-modal {
  background: var(--hds-surface-card);
  border: 1px solid var(--hds-border-default);
  border-radius: var(--hds-radius-xl);
  box-shadow: var(--hds-shadow-xl);
  width: 100%;
  max-width: 600px;
  max-height: 85vh;
  overflow-y: auto;
  animation: hds-slide-up var(--hds-duration-slow) var(--hds-ease-spring);
}

.hds-modal--sm { max-width: 400px; }
.hds-modal--lg { max-width: 800px; }

.hds-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--hds-space-5) var(--hds-space-6);
  border-bottom: 1px solid var(--hds-border-subtle);
}

.hds-modal__title {
  font-size: var(--hds-font-lg);
  font-weight: var(--hds-font-weight-bold);
  color: var(--hds-text-primary);
  margin: 0;
}

.hds-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--hds-radius-sm);
  background: transparent;
  color: var(--hds-text-muted);
  font-size: var(--hds-font-lg);
  cursor: pointer;
  transition:
    background var(--hds-duration-fast),
    color var(--hds-duration-fast);
}

.hds-modal__close:hover {
  background: var(--hds-surface-hover);
  color: var(--hds-text-primary);
}

.hds-modal__body {
  padding: var(--hds-space-6);
}

.hds-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--hds-space-3);
  padding: var(--hds-space-4) var(--hds-space-6);
  border-top: 1px solid var(--hds-border-subtle);
}

/* ── Mobile: bottom sheet ── */

@media (max-width: 480px) {
  .hds-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .hds-modal {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--hds-radius-xl) var(--hds-radius-xl) 0 0;
    animation: hds-slide-up-mobile var(--hds-duration-slow) var(--hds-ease-spring);
  }
}

/* ── Native dialog support ── */

dialog.hds-modal {
  border: 1px solid var(--hds-border-default);
  border-radius: var(--hds-radius-xl);
  padding: 0;
  max-width: 600px;
  width: 90%;
  box-shadow: var(--hds-shadow-xl);
  background: var(--hds-surface-card);
}

dialog.hds-modal::backdrop {
  background: var(--hds-surface-overlay);
  backdrop-filter: blur(4px);
}

/* ── Keyframes ── */

@keyframes hds-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes hds-slide-up {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes hds-slide-up-mobile {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   Decision Primitives (from class-hds-primitives.php)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Judgment ── */

.hds-judgment {
  display: flex;
  flex-direction: column;
  gap: var(--hds-space-3);
}

.hds-judgment__score {
  display: flex;
  align-items: baseline;
  gap: var(--hds-space-3);
  flex-wrap: wrap;
}

.hds-judgment__value {
  font-size: var(--hds-font-3xl);
  font-weight: var(--hds-font-weight-extrabold);
  line-height: 1;
  color: var(--hds-text-primary);
}

.hds-judgment__prefix,
.hds-judgment__suffix {
  font-size: var(--hds-font-md);
  font-weight: var(--hds-font-weight-medium);
  color: var(--hds-text-muted);
}

.hds-judgment--certain .hds-judgment__value { color: var(--hds-judgment-certain-color); }
.hds-judgment--likely  .hds-judgment__value { color: var(--hds-judgment-likely-color); }
.hds-judgment--possible .hds-judgment__value { color: var(--hds-judgment-possible-color); }
.hds-judgment--unclear .hds-judgment__value { color: var(--hds-judgment-unclear-color); }
.hds-judgment--against .hds-judgment__value { color: var(--hds-judgment-against-color); }

.hds-judgment__label {
  font-size: var(--hds-font-sm);
  font-weight: var(--hds-font-weight-semibold);
  color: var(--hds-text-secondary);
  padding: var(--hds-space-1) var(--hds-space-3);
  border-radius: var(--hds-radius-full);
}

.hds-judgment--certain .hds-judgment__label { background: var(--hds-judgment-certain-soft); color: var(--hds-judgment-certain-text); }
.hds-judgment--likely  .hds-judgment__label { background: var(--hds-judgment-likely-soft);  color: var(--hds-judgment-likely-text); }
.hds-judgment--possible .hds-judgment__label { background: var(--hds-judgment-possible-soft); color: var(--hds-judgment-possible-text); }
.hds-judgment--unclear .hds-judgment__label { background: var(--hds-judgment-unclear-soft); color: var(--hds-judgment-unclear-text); }
.hds-judgment--against .hds-judgment__label { background: var(--hds-judgment-against-soft); color: var(--hds-judgment-against-text); }

.hds-judgment__bar {
  height: 6px;
  background: var(--hds-border-subtle);
  border-radius: var(--hds-radius-full);
  overflow: hidden;
}

.hds-judgment__fill {
  height: 100%;
  border-radius: var(--hds-radius-full);
  transition: width 0.6s var(--hds-ease-out);
}

.hds-judgment--certain .hds-judgment__fill { background: var(--hds-judgment-certain-color); }
.hds-judgment--likely  .hds-judgment__fill { background: var(--hds-judgment-likely-color); }
.hds-judgment--possible .hds-judgment__fill { background: var(--hds-judgment-possible-color); }
.hds-judgment--unclear .hds-judgment__fill { background: var(--hds-judgment-unclear-color); }
.hds-judgment--against .hds-judgment__fill { background: var(--hds-judgment-against-color); }

.hds-judgment__evidence {
  margin-top: var(--hds-space-2);
  font-size: var(--hds-font-xs);
  color: var(--hds-text-muted);
}

/* ── Evidence ── */

.hds-evidence {
  display: flex;
  flex-direction: column;
  gap: var(--hds-space-2);
}

.hds-evidence__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--hds-space-2);
  padding: var(--hds-space-1) 0;
  border: none;
  background: transparent;
  font-family: var(--hds-font-sans);
  font-size: var(--hds-font-xs);
  cursor: pointer;
  color: var(--hds-text-secondary);
  transition: color var(--hds-duration-fast);
}

.hds-evidence__toggle:hover {
  color: var(--hds-text-primary);
}

.hds-evidence__badge {
  padding: 1px var(--hds-space-2);
  border-radius: var(--hds-radius-full);
  font-size: var(--hds-font-xs);
  font-weight: var(--hds-font-weight-semibold);
  background: var(--hds-text-muted);
  color: var(--hds-neutral-0);
}

.hds-evidence--strong  .hds-evidence__badge { background: var(--hds-evidence-strong-color); }
.hds-evidence--moderate .hds-evidence__badge { background: var(--hds-evidence-moderate-color); }
.hds-evidence--weak    .hds-evidence__badge { background: var(--hds-evidence-weak-color); }

.hds-evidence__strength-label {
  font-weight: var(--hds-font-weight-semibold);
}

.hds-evidence--strong  .hds-evidence__strength-label { color: var(--hds-evidence-strong-text); }
.hds-evidence--moderate .hds-evidence__strength-label { color: var(--hds-evidence-moderate-text); }
.hds-evidence--weak    .hds-evidence__strength-label { color: var(--hds-evidence-weak-text); }

.hds-evidence__timestamp {
  color: var(--hds-text-muted);
}

.hds-evidence__detail {
  padding: var(--hds-space-3);
  background: var(--hds-surface-hover);
  border-radius: var(--hds-radius-md);
  border: 1px solid var(--hds-border-subtle);
}

.hds-evidence__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--hds-space-2);
}

.hds-evidence__source {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--hds-font-xs);
}

.hds-evidence__source-label {
  font-weight: var(--hds-font-weight-semibold);
  color: var(--hds-text-primary);
}

.hds-evidence__source-detail {
  color: var(--hds-text-muted);
}

.hds-evidence__empty {
  font-size: var(--hds-font-xs);
  color: var(--hds-text-muted);
  margin: 0;
}

/* ── Trajectory ── */

.hds-trajectory {
  display: flex;
  flex-direction: column;
  gap: var(--hds-space-3);
}

.hds-trajectory__header {
  display: flex;
  align-items: center;
  gap: var(--hds-space-2);
}

.hds-trajectory__direction {
  font-size: var(--hds-font-sm);
  font-weight: var(--hds-font-weight-semibold);
  padding: 2px var(--hds-space-2);
  border-radius: var(--hds-radius-full);
}

.hds-trajectory__direction--accelerating { background: var(--hds-growth-accelerating-soft); color: var(--hds-growth-accelerating-text); }
.hds-trajectory__direction--stable       { background: var(--hds-growth-stable-soft); color: var(--hds-growth-stable-text); }
.hds-trajectory__direction--flat        { background: var(--hds-growth-flat-soft); color: var(--hds-growth-flat-text); }
.hds-trajectory__direction--declining   { background: var(--hds-growth-declining-soft); color: var(--hds-growth-declining-text); }

.hds-trajectory__phases {
  display: flex;
  align-items: center;
  gap: 0;
}

.hds-trajectory__phase {
  display: flex;
  align-items: center;
  gap: var(--hds-space-2);
  flex: 1;
  position: relative;
  padding: var(--hds-space-2) 0;
}

.hds-trajectory__phase::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--hds-border-subtle);
  margin-right: var(--hds-space-2);
}

.hds-trajectory__phase:last-child::after {
  display: none;
}

.hds-trajectory__dot {
  width: 12px;
  height: 12px;
  border-radius: var(--hds-radius-full);
  flex-shrink: 0;
  border: 2px solid var(--hds-border-default);
  background: var(--hds-surface-card);
}

.hds-trajectory__phase--completed .hds-trajectory__dot {
  background: var(--hds-route-completed-color);
  border-color: var(--hds-route-completed-color);
}

.hds-trajectory__phase--current .hds-trajectory__dot,
.hds-trajectory__phase.is-current .hds-trajectory__dot {
  background: var(--hds-brand-accent);
  border-color: var(--hds-brand-accent);
  box-shadow: 0 0 0 3px var(--hds-brand-accent-soft);
}

.hds-trajectory__phase--blocked .hds-trajectory__dot {
  background: var(--hds-route-blocked-color);
  border-color: var(--hds-route-blocked-color);
}

.hds-trajectory__phase--completed::after {
  background: var(--hds-route-completed-color);
}

.hds-trajectory__label {
  font-size: var(--hds-font-xs);
  color: var(--hds-text-muted);
  white-space: nowrap;
}

.hds-trajectory__phase--current .hds-trajectory__label,
.hds-trajectory__phase.is-current .hds-trajectory__label {
  color: var(--hds-text-primary);
  font-weight: var(--hds-font-weight-semibold);
}

/* ── Opportunity ── */

.hds-opportunity {
  display: inline-block;
  padding: 2px var(--hds-space-2);
  border-radius: var(--hds-radius-full);
  font-size: var(--hds-font-xs);
  font-weight: var(--hds-font-weight-semibold);
  line-height: var(--hds-leading-tight);
}

.hds-opportunity--immediate { background: var(--hds-opportunity-immediate-soft); color: var(--hds-opportunity-immediate-text); }
.hds-opportunity--active    { background: var(--hds-opportunity-active-soft);    color: var(--hds-opportunity-active-text); }
.hds-opportunity--watch     { background: var(--hds-opportunity-watch-soft);     color: var(--hds-opportunity-watch-text); }
.hds-opportunity--dormant   { background: var(--hds-opportunity-dormant-soft);   color: var(--hds-opportunity-dormant-text); }