:root {
  --ink: #1c1e1a;
  --ink-soft: #5a5d54;
  --bg: #faf9f5;
  --surface: #ffffff;
  --rule: #dedad0;
  --accent: #2b5c82;
  --accent-soft: #e7eef3;
  --error: #a8461f;
  --error-soft: #f5e2d8;
}

* { box-sizing: border-box; }

/* Real bug, not defensive styling: any element with both the `hidden`
   attribute and a class that sets `display` (.search-form, .query-status
   below) has the browser's built-in `[hidden] { display: none }` silently
   defeated — same CSS specificity, and author rules beat the user-agent
   stylesheet on ties, so the class's `display` always wins regardless of
   the attribute. Confirmed directly: the status spinner was visible from
   page load, never actually hidden. `!important` is deliberate here, not
   sloppy — `hidden` should mean hidden, unconditionally, no matter what
   a future class declares. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.55;
}

main {
  max-width: 700px;
  margin: 0 auto;
  padding: 3rem 1.25rem 5rem;
}

header h1 {
  font-size: 1.9rem;
  margin: 0 0 0.5rem;
}

header .sub {
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 0 2rem;
}

.server-line {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0 0 1.5rem;
}

.server-line code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 0.1em 0.4em;
}

.status-panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

#model-status-text {
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.progress-track {
  height: 6px;
  background: var(--rule);
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  transition: width 0.2s ease;
}

.search-form {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

#query-input {
  flex: 1;
  padding: 0.7rem 0.9rem;
  font-size: 1rem;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
}

#query-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

#search-button {
  padding: 0.7rem 1.3rem;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: white;
  cursor: pointer;
}

#search-button:disabled {
  opacity: 0.6;
  cursor: default;
}

#search-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.error {
  background: var(--error-soft);
  color: var(--error);
  border: 1px solid color-mix(in srgb, var(--error) 30%, var(--rule));
  border-radius: 6px;
  padding: 0.8rem 1rem;
  font-size: 0.92rem;
}

.query-status {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0.5rem 0 1.5rem;
}

.spinner {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--rule);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation: none;
    border-top-color: var(--rule); /* static ring instead of a spin cue */
  }
}

section h2 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin: 2rem 0 0.8rem;
}

.answer-text {
  background: var(--accent-soft);
  border-radius: 8px;
  padding: 1.1rem 1.3rem;
  white-space: pre-wrap;
  min-height: 1.5em;
}

.sources-list {
  list-style: decimal;
  padding-left: 1.4rem;
  margin: 0;
}

.sources-list li {
  margin-bottom: 1.1rem;
}

.source-title {
  font-weight: 600;
}

.source-score {
  color: var(--ink-soft);
  font-size: 0.82rem;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

.source-text {
  color: var(--ink-soft);
  margin: 0.25rem 0 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eae7db;
    --ink-soft: #a9a690;
    --bg: #17181a;
    --surface: #1f2123;
    --rule: #34362f;
    --accent: #7db0d8;
    --accent-soft: #1e2c35;
    --error: #e0916a;
    --error-soft: #2e2019;
  }
  #search-button { color: #10131a; }
}