/* grain/styles/grain.css — GRAIN's grade-as-signal MECHANISM (the inherited --type-font
   switch + caret/settle). Reads token slots from variables.css (the default theme).
   One of GRAIN's three page-level stylesheets, all LINKED (not bundled): variables.css
   (tokens) → global.css (base/skin) → grain.css (this, the grade mechanism). The "AI is
   acting" spotlight lives separately in the optional AI module, grain/ai/ai.css. */

/* ---- The typography atom: one inherited switch (DESIGN-SYSTEM §3) -----------
   Every type primitive reads --type-font and knows nothing about grades. State
   lives on ancestors; CSS inheritance distributes it. */
.t, h1, h2, h3, h4, h5, h6, p, li, label, button, input, textarea, a {
  font-family: var(--type-font);
}
.is-ai,    [data-grade="grain"]  { --type-font: var(--font-grain); }
.is-human, [data-grade="smooth"] { --type-font: var(--font-smooth); }
[data-grade="accent"]            { --type-font: var(--font-accent); }
/* An element that CARRIES a grade also renders in it — not only its covered descendants. So
   data-grade works on any element (a bare <span>, a <div>), not just .t/p/li/h*. Children still
   inherit and covered primitives still re-read --type-font, so nested grades keep working. */
[data-grade] { font-family: var(--type-font); }

/* a field is "yours, right now": draft (grain) at rest, clean while editing */
.field              { --type-font: var(--font-grain); }
.field:focus-within { --type-font: var(--font-smooth); }

/* commit state == grade: anything the single writer hasn't committed reads grain
   (in-transit), settling to clean on commit (AI-INTERFACE §5). */
[data-commit="pending"] { --type-font: var(--font-grain); }

/* ---- AI text + streaming (DESIGN-SYSTEM §3 "Typing / streaming") ------------- */
.ai-text { color: var(--color-fg); }
.caret {
  display: inline-block; width: 0.5ch; margin-left: 1px;
  border-right: 2px solid var(--color-fg);
  animation: caret-blink 1s steps(1) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }
.settled { animation: settle 0.5s ease both; }   /* "fax developing into a clean page" */
@keyframes settle { from { opacity: 0.55; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .caret { animation: none; }
  .settled { animation: none; }
}

/* NOTE: the "AI is acting" spotlight (dim/spotlit/label/confirm) is NOT here — it's in
   the optional AI module, grain/ai/ai.css. This stylesheet is the design-system grade
   mechanism alone, usable with no AI interface at all. */