/* Mobile first: every rule here is the phone layout, and the media queries at
   the end add what a wider screen can afford.

   The page used to drift sideways on a phone. The viewport meta tag was
   already right; the cause was content wider than the screen: a four-column
   table of requests, a row of tabs that would not wrap, and the long
   churchofjesuschrist.org URLs in the sources list, none of which can shrink
   below their own width. Anything that can overflow is now allowed to wrap. */

:root {
  --ink: #1b1b1a;
  --muted: #6b6b66;
  --rule: #e2e0da;
  --paper: #fdfcf9;
  --accent: #2f4858;
  --ok: #2e6b4f;
  --bad: #9b2c2c;
  --tap: 2.75rem;          /* 44px: the smallest comfortable touch target */
}
* { box-sizing: border-box; }
html {
  /* Stops iOS inflating text of its own accord when the phone is rotated. */
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  font: 17px/1.6 Charter, Georgia, 'Times New Roman', serif;
  color: var(--ink);
  background: var(--paper);
  /* A long URL is one unbreakable word; without this it pushes the page wider
     than the screen and everything can be swiped sideways. */
  overflow-wrap: break-word;
}
a { overflow-wrap: anywhere; }

header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem 1rem; padding: .85rem 1rem; border-bottom: 1px solid var(--rule);
}
.wordmark { font-weight: 600; text-decoration: none; color: var(--ink); font-size: 1.05rem; }
nav { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
nav a, .link {
  display: inline-flex; align-items: center; min-height: var(--tap);
  padding: 0 .55rem; color: var(--muted); text-decoration: none; font-size: .95rem;
  background: none; border: 0; cursor: pointer; font-family: inherit;
}
nav a:hover, .link:hover { color: var(--ink); }
nav form { margin: 0; }

main { max-width: 44rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
h1 { font-size: 1.45rem; font-weight: 600; margin: 0 0 1rem; line-height: 1.25; }
h2 { font-size: 1.25rem; font-weight: 600; margin: 1.75rem 0 .5rem; line-height: 1.3; }
h3 { font-size: 1.08rem; font-weight: 600; margin: 1.4rem 0 .4rem; }
.centered { text-align: center; padding-top: 2rem; }
.lead { color: var(--muted); font-size: 1.05rem; max-width: 32rem; margin: 0 auto 1.5rem; }
.fine { color: var(--muted); font-size: .88rem; }
.optional { color: var(--muted); font-weight: 400; font-size: .85rem; }
.notice {
  background: #fff8e6; border: 1px solid #e8d9a8; padding: .75rem 1rem; border-radius: 6px;
}

label { display: block; font-weight: 600; margin: 1.25rem 0 .35rem; font-size: .95rem; }
input, select, textarea {
  width: 100%; max-width: 100%; padding: .7rem; font: inherit;
  /* Never below 16px: iOS zooms into a smaller field on focus, and that zoom
     is itself the page jumping about under the reader's thumb. */
  font-size: max(1rem, 16px);
  border: 1px solid var(--rule); border-radius: 6px; background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.button {
  display: block; width: 100%; min-height: var(--tap); margin-top: 1.5rem;
  padding: .7rem 1.4rem; background: var(--accent); color: #fff; border: 0;
  border-radius: 6px; font: inherit; font-size: 1rem; cursor: pointer;
  text-align: center; text-decoration: none;
}
.button:hover { filter: brightness(1.15); }

/* Three choices side by side do not fit a phone, so they share the row and
   wrap their own labels rather than pushing the page wider. */
.tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem;
  border-bottom: 1px solid var(--rule); margin-bottom: .5rem;
}
.tab {
  min-height: var(--tap); padding: .5rem .35rem; background: none; border: 0;
  border-bottom: 2px solid transparent; font: inherit; font-size: .92rem;
  line-height: 1.25; color: var(--muted); cursor: pointer;
}
.tab.active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.hidden { display: none; }

.status { font-weight: 600; }
.status.done { color: var(--ok); }
.status.failed { color: var(--bad); }
.progress { color: var(--muted); font-size: .92rem; padding-left: 1.1rem; }
.sources { font-size: .92rem; padding-left: 1.1rem; }

/* Rendered model prose: the tag set app/markdown.py emits, and nothing else.
   Results used to arrive as preformatted text, so every soft wrap in the
   model's output became a hard break and its Markdown showed through raw. */
.prose > :first-child { margin-top: 0; }
.prose p { margin: 0 0 1rem; }
.prose h2 { font-size: 1.25rem; margin: 1.75rem 0 .6rem; }
.prose h3 { font-size: 1.08rem; margin: 1.5rem 0 .5rem; }
.prose h4 { font-size: 1rem; margin: 1.3rem 0 .4rem; }
.prose h5, .prose h6 { font-size: .95rem; margin: 1.2rem 0 .35rem; color: var(--muted); }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.prose li { margin: .25rem 0; }
.prose li > p { margin: 0; }
.prose blockquote {
  margin: 1rem 0; padding: .1rem 0 .1rem .85rem;
  border-left: 3px solid var(--rule); color: var(--muted);
}
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .9em; background: #f2f0ea; padding: .1rem .3rem; border-radius: 4px;
}
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }
.prose a { color: var(--accent); }
.prose .sources-heading { margin-top: 2rem; }

/* Request history. A four-column table cannot fit a phone and cannot shrink,
   so each request is a block that reflows instead. */
.history { list-style: none; margin: 0; padding: 0; }
.history li { border-bottom: 1px solid var(--rule); }
.history a {
  display: block; min-height: var(--tap); padding: .85rem .25rem;
  color: var(--ink); text-decoration: none;
}
.history a:hover { background: #f6f4ee; }
.history .what {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; font-weight: 600; line-height: 1.35;
}
.history .meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: .35rem; color: var(--muted); font-size: .85rem;
}

.pill {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  font-size: .78rem; background: var(--rule); color: var(--ink);
}
.pill.delivered, .pill.verified { background: #dcefe2; color: #1f5136; }
.pill.failed { background: #f6dede; color: var(--bad); }
.pill.partial { background: #fdf0d5; color: #7a5a11; }
.pill.running, .pill.queued { background: #e4ecf2; color: #26414f; }

footer {
  max-width: 44rem; margin: 0 auto; padding: 1.25rem 1rem;
  border-top: 1px solid var(--rule); color: var(--muted); font-size: .82rem;
}

@media (min-width: 40em) {
  body { line-height: 1.65; }
  header { padding: 1rem 1.5rem; }
  nav { gap: 1.25rem; }
  nav a, .link { padding: 0; }
  main { padding: 2rem 1.5rem 4rem; }
  h1 { font-size: 1.7rem; }
  h2 { font-size: 1.35rem; margin: 2rem 0 .5rem; }
  h3 { font-size: 1.1rem; margin: 1.5rem 0 .4rem; }
  .lead { font-size: 1.1rem; margin-bottom: 2rem; }
  .button { display: inline-block; width: auto; }
  .tabs { display: flex; gap: .25rem; }
  .tab { padding: .5rem .9rem; font-size: .95rem; }
  .prose h2 { font-size: 1.35rem; }
  .prose h3 { font-size: 1.12rem; }
  .history a { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 1rem; }
  .history .meta { margin-top: 0; justify-content: flex-end; }
  footer { padding: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}