/* Hallmark · pages: Flint, Chat flows (feature sub-pages)
 * macrostructure: Night hero → signature demo (Ask Flint / flow runner) → detail grid → night rules band → FAQ
 * theme: "Night + Mint" (shared tokens) · nav: N11 · footer: Ft3 + mast
 */

/* ── Ask Flint (scripted demo: question chips → answer + its source) ── */
.ask {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  border: var(--rule-width) solid var(--color-rule);
  background-color: var(--color-paper-2);
  background-image: radial-gradient(var(--color-rule) 1px, transparent 1px);
  background-size: 18px 18px;
}
.ask__kb { display: grid; gap: var(--space-sm); align-content: start; padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-paper); border: var(--rule-width) solid var(--color-rule); }
.ask__kb-title { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.ask__facts { display: grid; gap: var(--space-sm); }
.ask__facts dt { font-size: var(--text-xs); font-weight: var(--weight-strong); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-accent-text); }
.ask__facts dd { margin: 0; font-size: var(--text-sm); }
.ask__chat { display: grid; gap: var(--space-md); align-content: start; }
.ask__qs { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.ask__q {
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  border: var(--rule-width) solid var(--color-control);
  background: var(--color-paper);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ask__q:hover { border-color: var(--color-ink); }
.ask__q[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.ask__q:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (pointer: coarse) { .ask__q { min-height: 2.75rem; } }
.ask__thread { display: grid; min-height: 12rem; padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-paper); border: var(--rule-width) solid var(--color-rule); }
.ask__turn { display: grid; gap: var(--space-xs); align-content: start; }
.ask__turn[hidden] { display: none; }
.ask__turn.is-new .smsg--out, .ask__turn.is-new .ask__src { animation: ask-in 420ms var(--ease-out) both; }
.ask__turn.is-new .ask__src { animation-delay: 160ms; }
@keyframes ask-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ask__src { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2xs); font-size: var(--text-xs); color: var(--color-accent-text); }
.ask__src--handoff { color: var(--color-ink); font-weight: var(--weight-strong); }
.ask__caption { font-size: var(--text-xs); color: var(--color-muted); }
.smsg { display: grid; gap: var(--space-3xs); max-width: min(85%, 30rem); padding: var(--space-xs) var(--space-sm); border-radius: 12px; font-size: var(--text-sm); }
.smsg--in { justify-self: start; border-end-start-radius: 4px; background: var(--color-paper-2); border: var(--rule-width) solid var(--color-rule); }
.smsg--out { justify-self: end; border-end-end-radius: 4px; background: var(--color-paper); border: var(--rule-width) solid var(--color-control); }
.smsg--flint { border-color: var(--color-spark); }
.smsg__by { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-accent-text); }
@media (min-width: 60rem) {
  .ask { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); padding: var(--space-lg); gap: var(--space-lg); }
}

/* ── Drafts grid ── */
.draftcard h3 { font-size: var(--text-md); }
@media (min-width: 72rem) { .drafts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Rules band (night) ── */
.rules-section { background: var(--color-paper); color: var(--color-ink); }
.rules { display: grid; gap: var(--space-lg); }
.rules__badge { margin-block-end: var(--space-2xs); }
.rules__list { display: grid; gap: var(--space-sm); }
.rules__list li { display: grid; gap: var(--space-3xs); padding: var(--space-md); border-radius: var(--radius-md); border: var(--rule-width) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.rules__list b { color: var(--color-ink); font-weight: var(--weight-strong); }
@media (min-width: 48rem) { .rules__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .rules__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Chat flows: presets list + plans ── */
.presets { display: grid; gap: var(--space-sm); }
.preset { display: grid; gap: var(--space-3xs); padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-paper-2); border: var(--rule-width) solid var(--color-rule); }
.preset b { font-weight: var(--weight-strong); }
.preset span { font-size: var(--text-sm); color: var(--color-muted); }
@media (min-width: 48rem) { .presets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .presets { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.starts { display: grid; gap: var(--space-xs); margin-block-start: var(--space-lg); }
.starts__title { font-size: var(--text-md); }
.starts__list { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.starts__list li { padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); border: var(--rule-width) solid var(--color-control); background: var(--color-paper); font-size: var(--text-sm); font-weight: var(--weight-strong); }
.starts__note { font-size: var(--text-sm); color: var(--color-muted); }
.flowplans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-sm); }
.flowplan { display: grid; gap: var(--space-3xs); padding: var(--space-md); border-radius: var(--radius-md); border: var(--rule-width) solid var(--color-rule); }
.flowplan dt { font-size: var(--text-sm); color: var(--color-muted); }
.flowplan dd { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: -0.02em; }
@media (min-width: 60rem) { .flowplans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ── Flow runner (recovered from the home page's earlier version) ── */

.flows__demo {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  border: var(--rule-width) solid var(--color-rule);
  background-color: var(--color-paper-2);
  background-image: radial-gradient(var(--color-rule) 1px, transparent 1px);
  background-size: 18px 18px;
}
.flows__presets { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.flows__preset {
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  border: var(--rule-width) solid var(--color-control);
  background: var(--color-paper);
  color: var(--color-ink);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-strong);
  cursor: pointer;
  transition: background-color var(--dur-fast, 150ms) var(--ease-out, ease-out), color var(--dur-fast, 150ms) var(--ease-out, ease-out);
}
.flows__preset:hover { border-color: var(--color-ink); }
.flows__preset[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.flows__preset:focus-visible { outline: 2px solid var(--color-control); outline-offset: 2px; }
@media (pointer: coarse) { .flows__preset { min-height: 2.75rem; } }

.flow { display: grid; gap: var(--space-md); }
.flow[hidden] { display: none; }
.flow__nodes { display: grid; gap: var(--space-md); }
.flow__node {
  position: relative;
  display: grid;
  gap: var(--space-3xs);
  padding: var(--space-sm);
  border-radius: var(--radius-md, 10px);
  border: var(--rule-width) solid var(--color-rule);
  background: var(--color-paper);
  transition: opacity 400ms var(--ease-out, ease-out), box-shadow 400ms var(--ease-out, ease-out);
}
.flow__kind { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); transition: color 400ms var(--ease-out, ease-out); }
.flow__label { font-size: var(--text-sm); font-weight: var(--weight-strong); }
/* Connector into each node after the first (vertical on phones). */
.flow__node + .flow__node::before,
.flow__node + .flow__node::after {
  content: "";
  position: absolute;
  inset-inline-start: 1.5rem;
  inset-block-start: calc(var(--space-md) * -1 - 1px);
  width: 2px;
  height: var(--space-md);
  background: var(--color-rule);
}
.flow__node + .flow__node::after { background: var(--color-spark); transform: scaleY(1); transform-origin: top; transition: transform 500ms var(--ease-out, ease-out); }
.flow__node.is-on { box-shadow: inset 0 0 0 1px var(--color-spark); }
.flow__node.is-on .flow__kind { color: var(--color-accent-text); }

.flow__log { display: grid; gap: var(--space-2xs); align-content: start; padding: var(--space-sm); border-radius: var(--radius-md, 10px); background: var(--color-paper); border: var(--rule-width) solid var(--color-rule); }
.flow__log-title { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.flow__log ol { display: grid; gap: var(--space-3xs); }
.flow__line { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xs); font-size: var(--text-sm); transition: opacity 400ms var(--ease-out, ease-out), transform 400ms var(--ease-out, ease-out); }
.flow__line time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); padding-block-start: 0.15em; }
.flows__caption { font-size: var(--text-xs); color: var(--color-muted); }

/* Armed: dim until the run reaches each step. */
.flows__demo.is-armed .flow__node { opacity: 0.5; }
.flows__demo.is-armed .flow__node.is-on { opacity: 1; }
.flows__demo.is-armed .flow__node + .flow__node::after { transform: scaleY(0); }
.flows__demo.is-armed .flow__node + .flow__node.is-on::after { transform: scaleY(1); }
.flows__demo.is-armed .flow__line { opacity: 0; transform: translateY(4px); }
.flows__demo.is-armed .flow__line.is-on { opacity: 1; transform: none; }

@media (min-width: 48rem) {
  .flows__demo { padding: var(--space-lg); }
  .flow__nodes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-lg); align-items: stretch; }
  .flow__node + .flow__node::before,
  .flow__node + .flow__node::after {
    inset-inline-start: calc(var(--space-lg) * -1 - 1px);
    inset-block-start: 50%;
    width: var(--space-lg);
    height: 2px;
  }
  .flow__node + .flow__node::after { transform-origin: left; transform: scaleX(1); }
  .flows__demo.is-armed .flow__node + .flow__node::after { transform: scaleX(0); }
  .flows__demo.is-armed .flow__node + .flow__node.is-on::after { transform: scaleX(1); }
}
@media (min-width: 72rem) {
  .flow { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; }
}


@media (prefers-reduced-motion: reduce) {
  .ask__turn.is-new .smsg--out, .ask__turn.is-new .ask__src { animation: none; }
}