/* ================================================================
   AI forge — the flame button's wizard, plus the "forged by" brief
   that shows up inside the idea panel afterwards.

   Same workbench rules as everything else: one mono face, hairline
   borders, flat fills, --r (2px) as the only radius, no gradients,
   no glass. Nothing here introduces a color that isn't already a
   --var in base.css.
   ================================================================ */

.modal.ai-forge { width: 880px; }

/* ---------------- basic vs. advanced ----------------
   Sits above the mode toggle and outranks it: this one decides how
   MANY controls exist, the one below decides what they mean. */
.af-level {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--line-2);
}
.af-level .seg { flex-shrink: 0; }
.af-level-note { font-size: 0.68rem; color: var(--muted); line-height: 1.4; }

/* the hairline that marks a section as advanced-only */
.sec-label.af-adv-mark::after {
  content: "advanced";
  font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--acc); border: 1px solid var(--line-2);
  padding: 1px 4px; margin-left: 7px;
}

/* the pin ordinal on a chosen axis — it names which idea the axis lands on */
.af-ax-n {
  display: inline-block; min-width: 12px; margin-right: 5px;
  font-size: 0.58rem; text-align: center;
  border: 1px solid currentColor; opacity: 0.75;
}
.af-scope { flex-wrap: wrap; }

/* the brief preview — a wall of text, so it scrolls in its own box */
.af-preview-text {
  max-height: 52vh; overflow: auto;
  margin: 10px 0 0; padding: 11px;
  border: 1px solid var(--line-2); background: var(--bg-2);
  font-size: 0.68rem; line-height: 1.6; color: var(--ink-2);
  white-space: pre-wrap; word-break: break-word;
}

/* ---------------- inspiration vs. your own idea ----------------
   The first control in the wizard, because it changes what every
   pick below it means. The hint under it is not decoration: the two
   modes run different prompts and the difference has to be readable
   before anything is typed. */
.af-mode { margin-bottom: 8px; }
.af-mode .seg { width: 100%; }
.af-mode .seg button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; }
.af-mode-hint { margin: 7px 0 0; line-height: 1.55; }
.af-mode-nudge {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 0.68rem; line-height: 1.5; color: var(--ink-2);
  border-left: 2px solid var(--acc);
  padding: 5px 0 5px 8px;
  margin: 7px 0 0;
}
.af-mode-nudge svg { flex-shrink: 0; margin-top: 2px; color: var(--acc); }

/* the spark card — two fields and nothing to fetch */
.af-source.spark { display: block; }
.af-spark-name { margin-top: 7px; }
.af-spark-text { margin-top: 7px; resize: vertical; line-height: 1.6; }
.af-source.spark .af-hint { margin: 8px 0 0; }

/* ---------------- the source being forged ---------------- */
.af-source {
  display: flex; gap: 14px;
  padding: 12px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  margin-bottom: 4px;
}
.af-source.loading { align-items: flex-start; }
.af-src-img {
  width: 74px; flex-shrink: 0;
  border: 1px solid var(--line-2);
  object-fit: cover;
  align-self: flex-start;
}
.af-src-body { flex: 1; min-width: 0; }
.af-src-kind {
  font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted);
}
.af-src-kind::before { content: "· "; color: var(--acc); }
.af-src-title { font-size: 0.95rem; font-weight: 700; color: var(--ink); line-height: 1.3; margin-top: 2px; }
.af-src-sub { font-size: 0.68rem; color: var(--muted); margin-top: 2px; }
.af-src-summary {
  font-size: 0.74rem; line-height: 1.6; color: var(--ink-2);
  margin: 8px 0 0;
}
.af-more {
  border: none; background: none; padding: 0;
  color: var(--acc); font-family: var(--mono); font-size: 0.7rem;
}
.af-more::before { content: "["; }
.af-more::after { content: "]"; }

.af-facts { display: flex; flex-wrap: wrap; gap: 3px 16px; margin-top: 9px; }
.af-facts span { font-size: 0.68rem; color: var(--ink-2); }
.af-facts i {
  font-style: normal; color: var(--muted);
  font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase;
  margin-right: 6px;
}
.af-ents { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; margin-top: 8px; }
.af-ents > i {
  font-style: normal; color: var(--muted);
  font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.af-ents .chip { color: var(--st-shaping); }
.af-src-tags { margin-top: 7px; }
.af-src-status { font-size: 0.68rem; color: var(--muted); margin-top: 8px; }
.af-src-status::before { content: "> "; color: var(--acc); }
.af-src-status.err { color: var(--bad); }
.af-src-actions { display: flex; gap: 7px; margin-top: 10px; }
.af-src-actions .btn { text-decoration: none; }

/* ---------------- model picker ---------------- */
.af-model-row { display: flex; gap: 7px; align-items: center; }
.af-model-row select { flex: 1; }
.af-model-note { font-size: 0.66rem; color: var(--muted); margin-top: 5px; }
.af-model-note code { color: var(--ink-2); font-size: 0.64rem; }
.af-warn { color: var(--bad); }
.af-ok { color: var(--st-shipped, var(--good, #4ade80)); }

/* ---------------- the Claude branch (owner-exclusive) ----------------
   Marked in the picker itself, not just in the option text: selecting a model
   that runs on this machine is a different kind of act from picking one off a
   shared endpoint, and the border is the cheapest way to say so. */
.af-model-row select.af-claude-on {
  border-color: var(--acc);
  box-shadow: inset 2px 0 0 var(--acc);
}

.af-effort {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 8px; padding: 8px 10px;
  border: 1px solid var(--line-2); border-left: 2px solid var(--acc);
  background: var(--bg-2);
}
.af-effort-label {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.66rem; color: var(--ink-2); text-transform: lowercase; letter-spacing: 0.04em;
  flex-shrink: 0;
}
.af-effort-label .ic { width: 12px; height: 12px; color: var(--acc); }
.af-effort select { width: auto; min-width: 132px; flex-shrink: 0; }
.af-effort-note { font-size: 0.66rem; color: var(--muted); flex: 1; min-width: 140px; }

/* Which login pays. Same row shape as effort — they are two halves of one
   decision — but the options are email addresses, so the select needs room to
   show a whole one rather than trailing off mid-domain. */
.af-account { margin-top: 6px; }
.af-account select { min-width: 208px; max-width: 100%; }

/* the account the live run is actually spending, under the anvil */
.af-wait-acct {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.66rem; color: var(--muted);
}
.af-wait-acct .ic { width: 11px; height: 11px; color: var(--acc); }

/* ---------------- forging live feed ---------------- */
.af-forging { gap: 12px; }
.af-axes { justify-content: center; gap: 5px; }
.af-progress {
  list-style: none; margin: 0; padding: 0;
  width: 100%; max-width: 460px;
  display: flex; flex-direction: column; gap: 3px;
  font-size: 0.68rem; text-align: left;
}
.af-progress li {
  display: flex; gap: 8px; align-items: baseline;
  color: var(--muted);
  padding: 3px 8px;
  border-left: 1px solid var(--line-2);
  /* older lines fade back so the eye lands on what is happening now */
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.af-progress li.now { opacity: 1; color: var(--ink-2); border-left-color: var(--acc); }
.af-progress li i {
  font-style: normal; font-size: 0.6rem; letter-spacing: 0.05em;
  color: var(--acc); flex-shrink: 0; min-width: 58px;
}

/* ---------------- results: already-stashed banner + forge notes ---------------- */
.af-stashed {
  display: flex; align-items: center; gap: 7px;
  margin: 10px 0 0; padding: 8px 11px;
  border: 1px solid var(--line-2); border-left: 2px solid var(--st-shipped, var(--acc));
  background: var(--bg-2);
  font-size: 0.7rem; color: var(--ink-2);
}
.af-stashed .ic { width: 13px; height: 13px; color: var(--st-shipped, var(--acc)); flex-shrink: 0; }
.af-notes {
  margin-top: 9px; padding: 9px 11px;
  border: 1px solid var(--line-2); border-left: 2px solid var(--acc);
  background: var(--bg-2);
  font-size: 0.7rem; color: var(--muted); line-height: 1.55;
}
.af-notes i {
  display: block; font-style: normal; margin-bottom: 4px;
  font-size: 0.6rem; letter-spacing: 0.06em; color: var(--acc);
}

/* ---------------- pick grids ---------------- */
.af-hint { font-size: 0.68rem; color: var(--muted); margin: 0 0 8px; }
.af-count {
  margin-left: auto;
  font-size: 0.62rem; color: var(--muted);
  font-variant-numeric: tabular-nums;
  text-transform: none; letter-spacing: 0;
}
.af-sub-label {
  font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin: 10px 0 5px;
}
.af-sub-label::before { content: "— "; }

.af-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.af-grid.tight { grid-template-columns: repeat(5, 1fr); }

.af-chip {
  display: flex; flex-direction: column; gap: 2px;
  text-align: left;
  padding: 6px 8px;
  border: 1px solid var(--line-2);
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--mono);
  transition: border-color var(--fast), background var(--fast), color var(--fast);
  min-width: 0;
}
.af-chip b {
  font-size: 0.72rem; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.af-chip i {
  font-style: normal;
  font-size: 0.58rem; color: var(--muted); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.af-chip:hover { border-color: var(--muted); background: var(--bg-2); color: var(--ink); }
.af-chip.on {
  border-color: var(--acc);
  background: color-mix(in srgb, var(--acc) 12%, var(--bg));
  color: var(--ink);
}
.af-chip.on b { font-weight: 700; }
.af-chip.on b::before { content: "▸ "; color: var(--acc); }
.af-chip.on i { color: var(--ink-2); }
.af-chip.sm { padding: 5px 8px; }
.af-chip.sm b { font-size: 0.68rem; }

.af-custom-stack { margin-top: 9px; }
.af-custom-stack .chip-row:empty { display: none; }
.af-custom-stack .chip-row { margin-bottom: 6px; }

/* ---------------- options ---------------- */
.af-options { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.af-opt { display: flex; align-items: center; gap: 8px; }
.af-opt .label::before { content: none; }
.af-actions { position: sticky; bottom: -18px; background: var(--bg); padding: 12px 0 2px; }

/* ---------------- waiting on the model ---------------- */
.af-waiting {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 54px 20px;
  text-align: center;
}
.af-anvil { display: flex; gap: 3px; color: var(--acc); font-size: 1.1rem; line-height: 1; }
.af-anvil span { animation: af-pulse 1.1s ease-in-out infinite; animation-delay: var(--d); }
@keyframes af-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.motion-off .af-anvil span { animation: none; opacity: 0.7; }
.af-wait-model { font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.af-wait-phrase { font-size: 0.76rem; color: var(--ink-2); min-height: 1.4em; }
.af-wait-phrase::before { content: "> "; color: var(--acc); }
.af-wait-meta { font-size: 0.66rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------------- results ---------------- */
.af-results { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.af-idea {
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  padding: 13px 15px;
  transition: border-color var(--fast);
}
.af-idea:hover { border-color: var(--muted); }
.af-idea.saved { border-color: var(--st-shipped); }
.af-idea-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.af-idea-n {
  font-size: 0.66rem; color: var(--acc); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.af-idea-head h3 { margin: 0; font-size: 0.95rem; font-weight: 700; color: var(--ink); flex: 1; min-width: 0; }
.af-idea-tag { font-size: 0.72rem; color: var(--acc); margin-top: 3px; }
.af-idea-pitch { font-size: 0.78rem; line-height: 1.65; color: var(--ink-2); margin: 9px 0 0; }

.af-line { font-size: 0.72rem; line-height: 1.6; color: var(--ink-2); margin-top: 7px; }
.af-line i {
  font-style: normal; color: var(--muted);
  font-size: 0.58rem; letter-spacing: 0.11em; text-transform: uppercase;
  margin-right: 7px;
}
.af-line.risk { color: var(--muted); }
.af-line.risk i { color: var(--bad); }
.af-idea-chips { margin-top: 10px; }

.af-steps-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 11px; padding: 3px 0;
  border: none; background: none;
  color: var(--muted); font-family: var(--mono); font-size: 0.68rem;
}
.af-steps-toggle:hover { color: var(--acc); }
.af-steps-toggle .ic { width: 12px; height: 12px; }
.af-steps-toggle.open .ic:last-child { transform: rotate(180deg); }
.af-steps { margin: 8px 0 0; padding: 0 0 0 4px; list-style: none; counter-reset: afstep; }
.af-steps li {
  position: relative;
  counter-increment: afstep;
  padding: 5px 0 5px 26px;
  font-size: 0.74rem; line-height: 1.55; color: var(--ink-2);
  border-bottom: 1px solid var(--line);
}
.af-steps li:last-child { border-bottom: none; }
.af-steps li::before {
  content: counter(afstep, decimal-leading-zero);
  position: absolute; left: 0; top: 5px;
  font-size: 0.62rem; color: var(--muted);
}
.af-mark { color: var(--acc); font-size: 0.62rem; margin-right: 7px; }

.af-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 11px; }
.af-links a {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.66rem; color: var(--muted); text-decoration: none;
}
.af-links a:hover { color: var(--acc); }
.af-links a .ic { width: 10px; height: 10px; }
.af-links a.sugg::after { content: "?"; color: var(--st-spark); font-size: 0.6rem; }

.af-idea-actions { display: flex; gap: 7px; margin-top: 12px; }

/* ---------------- the brief left on a saved idea (panel.js) ---------------- */
.ai-brief {
  border: 1px solid var(--line-2);
  border-left: 2px solid var(--acc);
  background: var(--bg-2);
  padding: 10px 12px;
  margin-top: 4px;
}
.ai-brief .abr-model { font-size: 0.66rem; color: var(--muted); }
.ai-brief .abr-model b { color: var(--ink-2); font-weight: 500; }
.ai-brief .af-line:first-of-type { margin-top: 8px; }
.ai-brief .abr-seed {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 9px; font-size: 0.66rem; color: var(--muted); text-decoration: none;
}
.ai-brief .abr-seed:hover { color: var(--acc); }
.ai-brief .abr-seed .ic { width: 11px; height: 11px; }
.ai-brief .abr-remix { margin-top: 10px; }

/* ---------------- responsive ---------------- */
@media (max-width: 860px) {
  .af-grid { grid-template-columns: repeat(3, 1fr); }
  .af-grid.tight { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .af-grid, .af-grid.tight { grid-template-columns: repeat(2, 1fr); }
  .af-source { flex-direction: column; }
  .af-src-img { width: 96px; }
  .af-chip i { display: none; }
  .af-options { flex-direction: column; align-items: flex-start; gap: 10px; }
  .af-idea-actions { flex-wrap: wrap; }
  .af-effort { flex-direction: column; align-items: stretch; gap: 7px; }
  .af-effort select { width: 100%; }
  /* an email won't fit beside its label on a phone — let it take the row */
  .af-account select { width: 100%; min-width: 0; }
  .af-progress li i { min-width: 0; }
}