/* Component layer — follows the design system's .ac-* class conventions. */

.ac-shell { display: flex; flex-direction: column; min-height: 100vh; }

.ac-topbar {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  background: var(--surface-sidebar); color: #fff;
  box-shadow: var(--shadow-md);
}
.ac-topbar__mark {
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  background: linear-gradient(150deg, var(--brand-gold-light), var(--brand-gold-dark));
  color: var(--brand-navy); font-weight: var(--font-weight-bold);
  display: grid; place-items: center; font-size: var(--font-size-lg);
}
.ac-topbar__title { font-size: var(--font-size-lg); color: #fff; }
.ac-topbar__sub { color: var(--color-tertiary-200); font-size: var(--font-size-sm); }
.ac-topbar__spacer { flex: 1; }
.ac-topbar__stat { font-size: var(--font-size-sm); color: var(--color-tertiary-100); }
.ac-topbar__stat b { color: #fff; font-weight: var(--font-weight-semibold); }

.ac-main { flex: 1; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }

.ac-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.ac-card__head {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center; gap: var(--space-3);
}
.ac-card__title { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.ac-card__body { padding: var(--space-4); }

.ac-btn {
  font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-body);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md); border: 1px solid transparent;
  background: var(--color-primary); color: var(--text-on-primary);
  cursor: pointer; transition: background var(--duration-fast) var(--ease-standard);
  white-space: nowrap;
}
.ac-btn:hover:not(:disabled) { background: var(--color-primary-700); }
.ac-btn:disabled { background: var(--color-gray-300); color: var(--color-gray-500); cursor: not-allowed; }
.ac-btn--ghost { background: transparent; color: var(--color-primary-700); border-color: var(--border-strong); }
.ac-btn--ghost:hover:not(:disabled) { background: var(--color-primary-50); }
.ac-btn--danger { background: transparent; color: var(--color-red); border-color: var(--color-error-100); }
.ac-btn--danger:hover:not(:disabled) { background: var(--color-error-100); }
.ac-btn--sm { padding: var(--space-1) var(--space-2); font-size: var(--font-size-xs); }

.ac-input, .ac-textarea, .ac-select {
  font-family: inherit; font-size: var(--font-size-sm); color: var(--text-body);
  background: #fff; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3);
  width: 100%; box-sizing: border-box;
}
.ac-input:focus, .ac-textarea:focus, .ac-select:focus {
  outline: 2px solid var(--focus-ring); outline-offset: -1px; border-color: var(--focus-ring);
}
.ac-textarea { min-height: 190px; resize: vertical; font-family: var(--font-mono); font-size: var(--font-size-xs); line-height: 1.5; }
.ac-field { display: flex; flex-direction: column; gap: var(--space-1-5); }
.ac-label {
  font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
  text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); color: var(--text-muted);
}

.ac-badge {
  display: inline-block; padding: 1px var(--space-2);
  border-radius: var(--radius-sm); font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-semibold); text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  background: var(--color-gray-200); color: var(--color-gray-700);
}
.ac-badge--info { background: var(--color-info-100); color: var(--color-info-800); }
.ac-badge--warn { background: var(--color-warning-100); color: var(--color-warning-800); }
.ac-badge--ok { background: var(--color-green-100); color: #00644f; }
.ac-badge--err { background: var(--color-error-100); color: var(--color-error-800); }

.ac-chip {
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  border: 1px solid var(--border-strong); background: #fff;
  font-size: var(--font-size-xs); cursor: pointer; user-select: none;
  transition: all var(--duration-fast) var(--ease-standard);
}
.ac-chip:hover { border-color: var(--color-primary-300); }
.ac-chip--on { background: var(--color-primary-50); border-color: var(--color-primary); color: var(--color-primary-800); font-weight: var(--font-weight-semibold); }
.ac-chip input { margin: 0; accent-color: var(--color-primary); }

.ac-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border-subtle); }
.ac-tab {
  padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm); cursor: pointer;
  border: none; background: none; font-family: inherit; color: var(--text-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ac-tab--on { color: var(--color-primary-800); border-bottom-color: var(--color-primary); font-weight: var(--font-weight-semibold); }

.setup-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: var(--space-5); }
@media (max-width: 980px) { .setup-grid { grid-template-columns: 1fr; } }

.sample-list { display: flex; flex-direction: column; gap: var(--space-2); }
.sample {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); cursor: pointer; background: #fff;
  transition: all var(--duration-fast) var(--ease-standard);
}
.sample:hover { border-color: var(--color-primary-300); background: var(--color-primary-50); }
.sample--on { border-color: var(--color-primary); background: var(--color-primary-50); box-shadow: inset 3px 0 0 var(--color-primary); }
.sample__name { font-weight: var(--font-weight-semibold); color: var(--text-strong); }
.sample__desc { font-size: var(--font-size-xs); color: var(--text-muted); }
.sample__count { margin-left: auto; white-space: nowrap; }

.config-list { display: flex; flex-direction: column; gap: var(--space-2); }
.config {
  padding: var(--space-3); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); cursor: pointer; background: #fff;
}
.config--on { border-color: var(--color-primary); background: var(--color-primary-50); }
.config__head { display: flex; align-items: center; gap: var(--space-2); }
.config__name { font-weight: var(--font-weight-semibold); color: var(--text-strong); }
.config__desc { font-size: var(--font-size-xs); color: var(--text-muted); margin-top: var(--space-1); }

.searchbar { display: flex; gap: var(--space-3); align-items: flex-end; }
.searchbar .ac-field { flex: 1; }
.searchbar .ac-field--narrow { flex: 0 0 90px; }

.examples { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); align-items: center; }
.examples__label { font-size: var(--font-size-xs); color: var(--text-muted); }

.columns { display: grid; gap: var(--space-4); align-items: start; }
@media (max-width: 1900px) { .columns { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }
@media (max-width: 1240px) { .columns { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 780px) { .columns { grid-template-columns: 1fr !important; } }

.result__head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.result__name { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); color: var(--text-strong); }
.result__sub { font-size: var(--font-size-xs); color: var(--text-muted); }
.result__meta { margin-left: auto; font-size: var(--font-size-xs); color: var(--text-muted); }
.result__desc { font-size: var(--font-size-xs); color: var(--text-muted); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border-subtle); background: var(--surface-muted); }

.hit { display: flex; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-gray-100); position: relative; }
.hit:last-child { border-bottom: none; }
.hit__rank { flex: 0 0 20px; font-size: var(--font-size-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; text-align: right; }
.hit__body { flex: 1; min-width: 0; }
.hit__text { font-size: var(--font-size-sm); color: var(--text-body); overflow-wrap: anywhere; }
.hit__bar { height: 3px; border-radius: var(--radius-full); background: var(--color-primary-200); margin-top: var(--space-1); }
.hit__score { flex: 0 0 auto; font-family: var(--font-mono); font-size: var(--font-size-xxs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.hit__score { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.hit__dot {
  width: 7px; height: 7px; border-radius: var(--radius-full);
  flex: 0 0 7px; background: transparent;
}
/* Adjacent blocks must not repeat, so five hues cycle. */
.hit__dot--0 { background: var(--color-secondary); }
.hit__dot--1 { background: var(--color-info); }
.hit__dot--2 { background: var(--color-green); }
.hit__dot--3 { background: var(--color-red); }
.hit__dot--4 { background: var(--color-tertiary); }
.hit--match .hit__text mark { background: var(--color-secondary-100); padding: 0 2px; border-radius: 2px; }

.tie-note { padding: var(--space-2) var(--space-4); font-size: var(--font-size-xs); background: var(--color-warning-100); color: var(--color-warning-800); border-bottom: 1px solid var(--border-subtle); }

.runbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.runbar__id { font-family: var(--font-mono); font-size: var(--font-size-xs); color: var(--color-gray-700); }
.run-meta { font-size: var(--font-size-sm); color: var(--color-gray-600); }

.toast {
  position: fixed; bottom: var(--space-5); left: 50%; transform: translateX(-50%);
  background: var(--color-tertiary-800); color: #fff;
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); font-size: var(--font-size-sm); z-index: 60;
}
.toast--err { background: var(--color-red); }

.empty { padding: var(--space-8); text-align: center; color: var(--text-muted); font-size: var(--font-size-sm); }
.spinner {
  width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.4); border-top-color: #fff;
  border-radius: 50%; display: inline-block; animation: spin 0.7s linear infinite; vertical-align: -2px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.query-note {
  margin-top: var(--space-2); padding: var(--space-2) var(--space-3);
  background: var(--color-primary-50); border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm); font-size: var(--font-size-xs); color: var(--color-primary-800);
}

.sample__state { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.sample--busy { opacity: 0.75; }
.sample--dead { border-color: var(--color-error-100); }

.corpus-line { display: flex; gap: var(--space-3); padding: var(--space-1) var(--space-4); font-size: var(--font-size-sm); border-bottom: 1px solid var(--color-gray-100); }
.corpus-line:nth-child(even) { background: var(--surface-muted); }
.corpus-line__no { flex: 0 0 48px; text-align: right; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--font-size-xxs); }
.corpus-list { max-height: 460px; overflow-y: auto; }