/* One cell grid: a single font size and line height everywhere, like a real terminal. */
:root {
  --bg: #1a1918;
  --fg: #e6e2da;
  --dim: #8c877e;
  --faint: #4d4944;
  --bar: #2a2826;
  --accent: #d97757;
  --green: #8fc07f;
  --blue: #8db4e2;
  --red: #e27d7d;
  --mono: ui-monospace, "SF Mono", Menlo, "Cascadia Mono", Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--fg); }
body {
  font: 14px/1.2 var(--mono);
  padding: 1.2em 2ch 3.6em;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
::selection { background: #4a3a33; }

p, pre, ul { margin: 0 0 1.2em; }
pre { font: inherit; white-space: pre; overflow-x: auto; }
.prose { max-width: 80ch; }
b, strong { font-weight: 700; color: var(--fg); }

.dim { color: var(--dim); }
.faint { color: var(--faint); }
.acc { color: var(--accent); }
.ok { color: var(--green); }
.err { color: var(--red); }
pre .d { color: var(--dim); }
pre .a { color: var(--accent); }
pre .g { color: var(--green); }
pre .f { color: var(--faint); }

a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--fg); }
a:focus-visible, button:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

/* scrollback */
.shell { color: var(--dim); margin-bottom: 1.2em; }
.box { color: var(--accent); margin-bottom: 1.2em; overflow: hidden; }
.box .t { color: var(--fg); }
.box .d { color: var(--dim); }
.tip { color: var(--dim); margin-bottom: 1.2em; }
.tip button {
  all: unset; cursor: pointer; color: var(--fg);
  background: var(--bar); padding: 0 1ch;
}
.tip button:hover { color: var(--accent); }

.turn { margin-bottom: 1.2em; }
.you {
  display: inline-block; max-width: 100%;
  background: var(--bar); color: var(--dim);
  padding: 0 1ch; margin-bottom: 1.2em;
}
.you span { color: var(--fg); }

/* Claude-style reply: bullet in the gutter, text hangs */
.r { padding-left: 2ch; position: relative; }
.r p, .r .entry, .r ul { max-width: 80ch; }
.r > :last-child { margin-bottom: 0; }
.bul { position: absolute; left: 0; }
.bul.tool { color: var(--green); }
.sub { color: var(--dim); padding-left: 3ch; text-indent: -3ch; }
.sub::before { content: "⎿  "; color: var(--faint); }
h2 { font: inherit; font-weight: 700; margin: 2.4em 0 1.2em; }
h3 { font: inherit; font-weight: 700; margin: 0; display: inline; }
ul { list-style: none; padding: 0; }
li { padding-left: 2ch; text-indent: -2ch; }
li::before { content: "- "; color: var(--dim); }
.entry { margin-bottom: 1.2em; }
.entry:last-child { margin-bottom: 0; }

/* spinner */
#spin { color: var(--accent); margin-bottom: 1.2em; }
#spin:empty { display: none; }
#spin .dim { color: var(--dim); }

/* prompt */
.rule { color: var(--faint); white-space: pre; overflow: hidden; }
.prompt { position: relative; display: block; cursor: text; white-space: pre-wrap; word-break: break-all; }
.prompt .caret { color: var(--dim); }
.cursor { background: var(--fg); color: var(--bg); animation: blink 1.06s steps(1) infinite; }
.prompt:not(.focused) .cursor { background: none; outline: 1px solid var(--dim); outline-offset: -1px; animation: none; }
.prompt .ph { color: var(--faint); }
.prompt input {
  position: absolute; inset: 0; width: 100%; opacity: 0;
  font-size: 16px; border: 0; padding: 0; background: none; color: transparent;
}
@keyframes blink { 50% { background: transparent; color: var(--fg); } }

.status { display: flex; justify-content: space-between; gap: 2ch; color: var(--dim); padding: 0 2ch; }
.status .r2 { color: var(--faint); }

#menu { display: none; padding: 0 2ch; }
#menu.open { display: block; }
#menu.open + .status { display: none; }
#menu .row { display: grid; grid-template-columns: 15ch 1fr; gap: 2ch; color: var(--dim); cursor: pointer; }
#menu .row.on .c::before { content: ""; }
@media (pointer: coarse) {
  #menu .row { padding: .6em 0; border-bottom: 1px solid var(--bar); }
  #menu .row:active { background: var(--bar); }
}
#menu .row .c { color: var(--fg); }
#menu .row.on .c, #menu .row.on .x { color: var(--accent); }
#menu .none { color: var(--faint); }

@media (max-width: 560px) {
  body { font-size: 12.5px; padding: 1.2em 1.5ch 3.6em; }
  #menu .row { grid-template-columns: 13ch 1fr; gap: 1ch; }
  .status .r2 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}