/* A quiet reading surface. Dark by default, because the reader is mid-review at
   night on a phone; light only when the system asks for it. Monochrome plus one
   accent, and Japanese set large enough to read the kanji rather than recognise
   the shape. */

:root {
  --bg: #12110f;
  --panel: #191715;
  --fg: #e8e4dc;
  --muted: #8f8a80;
  --line: #2a2724;
  --accent: #c87a3c;
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-jp: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #faf8f4;
    --panel: #ffffff;
    --fg: #1c1a17;
    --muted: #6b665e;
    --line: #e2ded6;
    --accent: #9a5518;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
}

/* The one rule the whole Japanese reading experience rests on. Every element
   holding Japanese carries lang="ja" (server/markdown_allowlist.py puts it there),
   so this selector reaches all of it and nothing else. */
[lang="ja"] {
  font-family: var(--font-jp);
  font-size: 1.35rem;
  line-height: 1.95;
}

main { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1.25rem 6rem; }

.bar {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--line);
  max-width: 46rem;
  margin: 0 auto;
}
.bar .brand { font-size: 1.5rem; text-decoration: none; color: var(--fg); }
.bar nav { display: flex; gap: 1rem; margin-left: auto; }
.bar nav a { color: var(--muted); text-decoration: none; font-size: 0.9rem; }
.bar nav a:hover { color: var(--accent); }

h1 { font-size: 1.3rem; font-weight: 600; letter-spacing: 0.01em; }
h2, h3, h4, h5, h6 { font-weight: 600; margin: 1.6rem 0 0.5rem; }

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

.threads { list-style: none; padding: 0; margin: 0; }
.threads li { border-bottom: 1px solid var(--line); }
.threads a { display: block; padding: 0.9rem 0; text-decoration: none; color: var(--fg); }
.threads a:hover { color: var(--accent); }
.meta { color: var(--muted); font-size: 0.8rem; display: flex; gap: 0.75rem; }

/* A title is a LABEL for a thread, not the thread. Japanese is set at 1.35rem with
   a 1.95 line height (the rule above), so a pasted paragraph's title runs eight
   wrapped lines on a phone: one row then fills half the screen and buries the list,
   and on the thread page the heading fills the first screen before the answer that
   the page exists to show. Two lines, with the ellipsis the clamp adds. */
.clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.status { text-transform: lowercase; }
.status-failed { color: var(--accent); }

.message { border-top: 1px solid var(--line); padding: 1.25rem 0; }
.message.user { color: var(--muted); }
.message.user .body { border-left: 2px solid var(--line); padding-left: 0.9rem; }

pre {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 0.75rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
code { font-family: var(--font-mono); font-size: 0.9em; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid var(--line); padding: 0.4rem 0.6rem; text-align: left; }
blockquote { margin: 0.8rem 0; padding-left: 0.9rem; border-left: 2px solid var(--line); }

textarea, input[type="text"], input[type="password"], select {
  width: 100%;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--line);
  padding: 0.7rem;
  font-family: inherit;
  font-size: 1rem;
}
textarea { min-height: 8rem; resize: vertical; }
label { display: block; margin: 1rem 0 0.35rem; color: var(--muted); font-size: 0.85rem; }

button {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.5rem 1rem;
  font: inherit;
  cursor: pointer;
}
button:hover { background: var(--accent); color: var(--bg); }

/* The "more" control and what it reveals. The chips are not in the document until
   the control is used: see server/web.py's next-steps route. */
.more { border-style: dashed; font-size: 0.85rem; padding: 0.3rem 0.8rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.chips form { margin: 0; }
.chip { border-radius: 999px; font-size: 0.95rem; }
/* A chip whose question has already been asked in this thread. Dimmed rather than
   removed: asking it again is legitimate (the first answer may have failed), and a
   chip that vanished would read as the model having stopped offering it. */
.chip.asked { opacity: 0.55; border-style: dashed; }

/* The show/hide control under the token box, which is the one checkbox on the whole
   surface -- the block `label` rule above would stack it over its own text. */
.inline-choice label { display: inline-flex; align-items: baseline; gap: 0.4rem; margin: 0; }
.inline-choice input { width: auto; }

button[disabled] { opacity: 0.45; cursor: not-allowed; }
button[disabled]:hover { background: transparent; color: var(--accent); }

.notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--panel);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  color: var(--muted);
}
.notice strong { color: var(--fg); }
.notice code { color: var(--fg); }

.columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.columns > section { min-width: 0; }
@media (max-width: 40rem) { .columns { grid-template-columns: 1fr; } }

.diff { font-size: 0.8rem; }
.diff .added { color: var(--accent); }
.diff .removed { color: var(--muted); text-decoration: line-through; }

/* The screenshot disclosure on a thread page. The summary is the trigger the
   product invariant asks for, so it has to look like something you press. */
.screenshot { margin: 1rem 0; }
.screenshot > summary {
  cursor: pointer;
  color: var(--accent);
  padding: 0.4rem 0;
}
/* Capped rather than full-bleed: the breakdown is what this page is for, and a
   phone screenshot at full width pushes it under the fold. */
.screenshot img {
  display: block;
  max-width: 100%;
  max-height: 60vh;
  width: auto;
  margin-top: 0.5rem;
  border: 1px solid var(--line);
}

/* The two arrow-joined chain lines: the spine that opens the stack and the journey
   line that closes the answer. Larger and in the one accent, which is the treatment
   the Android panel gives them (BunkaiType.spine), because the whole point of a
   chain line is that the eye takes the shape of the answer from it before reading
   any of it. Before this, both went through the paragraph path and the browser
   reflowed them -- the one failure competitive-inventory F3 names.

   Wrapping at the arrows rather than a horizontal scroll. Android shipped the
   non-wrapping scroll first and removed it: on a phone only the first segment fit,
   and the natural English the whole chain arrives at -- the LAST segment, every
   time -- sat off the right-hand edge with no scrollbar, no fade and nothing else
   on screen to say it was there. overflow-x stays as the backstop for a single
   segment too wide to break, which is the only case with nothing left to wrap. */
.chain {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.6rem;
  overflow-x: auto;
  margin: 1rem 0;
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--accent);
}
/* Each segment stays whole WHERE IT FITS: a break inside a unit is the thing the
   arrows exist to prevent, and it is worse than a break between two of them.

   But nowrap made that absolute, and a journey line's middle segment is a whole
   clause -- "as for him, whether-he-does-not-come is not even knowable" measures
   518px inside a 350px column. Flex gave it no way to shrink, so it was CLIPPED at
   the container edge, mid-word, with no scrollbar and no fade: the same
   no-affordance failure the comment above says Android shipped and removed, in the
   fix for it. A flex item only wraps internally when it cannot fit on a line of its
   own, so `normal` still keeps every segment that fits whole and breaks only the one
   that cannot. The hanging indent is what says a continuation line is the same unit
   rather than the next one. */
.chain .seg {
  white-space: normal;
  padding-left: 1rem;
  text-indent: -1rem;
}