/* story.nitaimaarek.com, on top of the shared framework (ui.css). */

.top { margin-block: var(--ui-7) var(--ui-5); }
.top h1 { margin: 0 0 var(--ui-1); letter-spacing: 0; }
.lede { margin: 0; color: var(--ui-muted); }

/* The story reads like a page, not a chat log: serif text, one column, your lines
   marked by a thin rule on their starting edge. */
.story {
  font-family: "Frank Ruehl CLM", "Frank Ruhl Libre", "David CLM", David, "Noto Serif Hebrew", "Times New Roman", serif;
  font-size: 1.2rem;
  line-height: 1.85;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.story:empty { display: none; }
.story .you {
  display: block;
  margin-block: var(--ui-3) var(--ui-1);
  padding-inline-start: var(--ui-3);
  border-inline-start: 2px solid var(--ui-accent);
  color: var(--ui-text);
}
.story .model { color: var(--ui-text); }
.story .model.live::after {
  content: "";
  display: inline-block;
  width: .5ch;
  height: 1.1em;
  margin-inline-start: 2px;
  vertical-align: -.15em;
  background: var(--ui-accent);
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.story .the-end {
  display: block;
  margin-block: var(--ui-4) var(--ui-2);
  text-align: center;
  color: var(--ui-muted);
  font-size: .95rem;
  letter-spacing: .08em;
}
@media (prefers-reduced-motion: reduce) { .story .model.live::after { animation: none; } }

.empty { color: var(--ui-faint); margin-block: var(--ui-4); }
.err { color: var(--ui-bad, #d9534f); margin-block: var(--ui-3); }

.turn {
  position: sticky;
  bottom: 0;
  margin-top: var(--ui-5);
  padding-block: var(--ui-3);
  background: var(--ui-bg);
  border-top: var(--ui-border) solid var(--ui-line);
}
.turn textarea { width: 100%; min-height: 0; font-size: 1.05rem; }
.row { display: flex; flex-wrap: wrap; gap: var(--ui-2); margin-top: var(--ui-2); }
.opts { margin-top: var(--ui-3); }
.grid { display: grid; grid-template-columns: max-content 1fr; gap: var(--ui-2) var(--ui-4); align-items: center; }
.range { display: flex; align-items: center; gap: var(--ui-2); }
.range input { flex: 1; }
.range output { font-variant-numeric: tabular-nums; color: var(--ui-muted); min-width: 4ch; }
.hint { color: var(--ui-faint); font-size: .9em; margin: var(--ui-3) 0 0; }

.foot { margin-block: var(--ui-6) var(--ui-7); color: var(--ui-faint); font-size: .9em; }
.foot p { margin: 0 0 var(--ui-2); max-width: 60ch; }

@media (max-width: 520px) {
  .top { margin-block: var(--ui-5) var(--ui-4); }
  .story { font-size: 1.12rem; }
  .grid { grid-template-columns: 1fr; gap: var(--ui-1); }
}