web/static/styles.css

/* Page chrome for the standalone builds (FastAPI server + static Space): masthead, ask bar,
   example chips, the frame around the stages, footer. Load AFTER panels.css, which owns the
   design tokens and everything inside the stage cards and panels.

   The Gradio Space never loads this file: it takes panels.css plus gradio.css, because Gradio
   draws its own page and the element selectors below (body, select) would restyle its widgets. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a { color: var(--blue); }

/* ---- masthead ---- */
.masthead {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.masthead-inner {
  max-width: 1360px; margin: 0 auto; padding: 20px 24px;
  display: flex; gap: 24px; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap;
}
h1 { margin: 0 0 4px; font-size: 21px; letter-spacing: -0.01em; }
h1 .accent { color: var(--blue); }
.tagline { margin: 0; color: var(--ink-soft); font-size: 13.5px; max-width: 62ch; }

.status {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--ink-soft); white-space: nowrap;
}
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ink-faint); flex: none;
}
.dot.ok { background: #22c55e; }
.dot.warn { background: #f59e0b; }
.dot.err { background: #ef4444; }

main { max-width: 1360px; margin: 0 auto; padding: 20px 24px 48px; }

/* ---- ask ---- */
.ask {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin-bottom: 18px;
}
.ask-row { display: flex; gap: 10px; }
#question {
  flex: 1; padding: 11px 13px; font-size: 15px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--ink);
}
#question:focus { outline: 2px solid var(--blue); outline-offset: -1px; }
#submit-btn {
  padding: 11px 20px; font: inherit; font-size: 14px; font-weight: 600;
  background: var(--blue); color: var(--on-blue); border: 0; border-radius: 8px; cursor: pointer;
  white-space: nowrap;
}
#submit-btn:hover:not(:disabled) { filter: brightness(1.1); }
#submit-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* The examples: one row that scrolls sideways. stages.js adds arrow buttons on a laptop. */
.examples-wrap { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); }
#examples { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 6px; }
#examples > .label { grid-column: 1 / -1; display: block; margin-bottom: 8px; font-size: 12.5px; color: var(--ink-soft); }
#examples > .gallery {
  --fade-left: 0px; --fade-right: 0px;
  display: flex; grid-row: 2; grid-column: 2; flex-wrap: nowrap; gap: 7px; padding: 2px 0;
  overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent 100%);
}
#examples > .gallery::-webkit-scrollbar { display: none; }
#examples.fade-left > .gallery { --fade-left: 32px; }
#examples.fade-right > .gallery { --fade-right: 32px; }
#examples > .ex-arrow {
  display: grid; grid-row: 2; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--ink); cursor: pointer;
}
#examples > .ex-prev { grid-column: 1; }
#examples > .ex-next { grid-column: 3; }
#examples > .ex-arrow:disabled { opacity: 0.35; cursor: default; }
@media (max-width: 759px), (hover: none) {
  #examples > .ex-arrow { display: none; }
  #examples > .gallery { grid-column: 1 / -1; }
}
.chip {
  display: inline-flex; flex: none; align-items: baseline; gap: 6px; max-width: 26em;
  font: inherit; font-size: 12.5px; font-weight: 500; scroll-snap-align: start;
  padding: 6px 11px; border-radius: 999px; cursor: pointer;
  background: var(--blue-soft); color: var(--blue);
  border: 1px solid transparent; text-align: left; white-space: nowrap;
}
.chip:hover { border-color: var(--blue); }
.chip .chip-cat {
  flex: none; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.75;
}
.chip .chip-q { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Search settings: one line until opened. */
.settings { margin-top: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); }
.settings > summary {
  padding: 9px 12px; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer;
}
.settings-body {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  padding: 2px 12px 12px; font-size: 12.5px; color: var(--ink-soft);
}
.settings-body label { display: flex; align-items: center; gap: 6px; }
.settings select {
  font: inherit; padding: 4px 7px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
}
.budget { margin: 10px 0 0; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-faint); }

/* Mode switching: the same markup serves the FastAPI build and the static Space, so each
   mode hides the controls the other one owns. `static-mode` is set by app.js at startup. */
.static-only { display: none; }
body.static-mode .static-only { display: block; }
body.static-mode .server-only { display: none; }

.static-note {
  margin: 13px 0 0; padding: 11px 13px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.6; color: var(--ink-soft);
  background: var(--blue-soft); border: 1px solid var(--border);
}
.static-note code {
  font-family: var(--mono); font-size: 11.5px;
  background: var(--surface); padding: 1px 5px; border-radius: 4px; border: 1px solid var(--border);
}
body.static-mode .chip[hidden] { display: none; }

/* ---- the stages: one card around the stage cards and the open panel ---- */
.pipe {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px 20px; min-width: 0; box-shadow: var(--shadow);
}
#panel-answer { display: grid; gap: 14px; }
/* The answer itself, beside its sources on a wide screen. Plain text: this build does not
   render Markdown yet. */
.answer-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); gap: 14px; align-items: start; }
.answer-row:not(:has(.sp-answer-side)) { display: none; }
.answer-text {
  min-width: 0; padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); font-size: 15px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere;
}
@media (max-width: 759px) {
  main { padding: 14px 14px 40px; }
  .pipe { padding: 14px 12px 16px; }
  .answer-row { grid-template-columns: minmax(0, 1fr); }
}

footer {
  margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--ink-faint);
}
footer p { margin: 0; max-width: 90ch; }