/* agent-settings.css — public FX / voice settings card (K231).
   Styled on the site's mode-aware tokens (dark / reader / HC track automatically).
   Also styles the sibling "For the curious" disclosure + the counts list on the
   Successor Hub. Reduced-motion strips every transition. */

/* ---- the card ---------------------------------------------------------- */
.agent-fx {
  margin: var(--s-4, 1rem) 0 0;
  border: var(--bw-base, 1px) solid var(--c-border, #2a2a2a);
  border-radius: var(--radius-0, 2px);
  background: var(--c-bg-elevated, #161616);
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.agent-fx[hidden] { display: none; }

.agent-fx-head { margin: 0; }
.agent-fx-disclose {
  display: flex; align-items: center; gap: var(--s-2, 0.5rem);
  width: 100%; text-align: left;
  font: inherit; font-size: var(--t-xs, 0.8rem);
  letter-spacing: var(--ls-wide, 0.08em); text-transform: uppercase;
  color: var(--c-fg-dim, #8a847b);
  background: transparent; border: 0;
  padding: var(--s-3, 0.75rem) var(--s-4, 1rem);
  cursor: pointer;
  transition: color 120ms var(--ease, ease);
}
.agent-fx-disclose::after { content: "\25B8"; margin-left: auto; color: var(--c-fg-muted, #5a554f); }
.agent-fx.agent-fx-open .agent-fx-disclose::after { content: "\25BE"; }
.agent-fx-disclose:hover, .agent-fx-disclose:focus-visible { color: var(--c-fg, #f0ebe5); outline: none; }
.agent-fx-disclose:focus-visible { box-shadow: inset 0 0 0 2px var(--c-focus-ring, rgba(196,30,58,0.5)); }

.agent-fx-body {
  padding: 0 var(--s-4, 1rem) var(--s-3, 0.75rem);
  border-top: var(--bw-thin, 1px) solid var(--c-border, #2a2a2a);
}
.agent-fx-body[hidden] { display: none; }

/* ---- groups + controls ------------------------------------------------- */
.agent-fx-grp { padding: var(--s-3, 0.75rem) 0 var(--s-1, 0.25rem); border-top: var(--bw-thin, 1px) solid var(--c-border, #2a2a2a); }
.agent-fx-grp:first-child { border-top: 0; }
.agent-fx-grp-label {
  margin: 0 0 var(--s-2, 0.5rem);
  font-size: var(--t-xs, 0.75rem); letter-spacing: var(--ls-wide, 0.1em);
  text-transform: uppercase; color: var(--c-fg-dim, #8a847b);
}
.agent-fx-ctl { display: flex; align-items: center; gap: var(--s-2, 0.6rem); padding: var(--s-1, 0.3rem) 0; flex-wrap: wrap; }
.agent-fx-clabel { flex: 0 0 40%; font-size: var(--t-xs, 0.82rem); color: var(--c-fg, #f0ebe5); }
.agent-fx-rangewrap { flex: 1 1 auto; display: flex; align-items: center; gap: var(--s-2, 0.5rem); min-width: 170px; }
.agent-fx-rangewrap input[type="range"] { flex: 1 1 auto; accent-color: var(--c-accent, #c41e3a); }
.agent-fx-val { font-size: var(--t-xs, 0.75rem); color: var(--c-fg-dim, #8a847b); min-width: 2.6em; text-align: right; }

.agent-fx-tgl, .agent-fx-cue, .agent-fx-select, .agent-fx-say {
  font: inherit; font-size: var(--t-xs, 0.78rem);
  background: transparent; color: var(--c-fg-dim, #8a847b);
  border: var(--bw-thin, 1px) solid var(--c-border, #2a2a2a); border-radius: var(--radius-0, 2px);
  padding: var(--s-1, 4px) var(--s-2, 10px);
  transition: color 120ms var(--ease, ease), border-color 120ms var(--ease, ease);
}
.agent-fx-tgl, .agent-fx-cue { cursor: pointer; letter-spacing: var(--ls-wide, 0.04em); text-transform: lowercase; }
.agent-fx-tgl:hover, .agent-fx-cue:hover, .agent-fx-tgl:focus-visible, .agent-fx-cue:focus-visible {
  color: var(--c-fg, #f0ebe5); border-color: var(--c-border-strong, #4a4540); outline: none;
}
.agent-fx-tgl.on { color: var(--c-accent, #c41e3a); border-color: var(--c-border-accent, #c41e3a); }
.agent-fx-cue { color: var(--c-fg, #f0ebe5); }
.agent-fx-select { color: var(--c-fg, #f0ebe5); }
.agent-fx-say { flex: 1 1 auto; min-width: 170px; color: var(--c-fg, #f0ebe5); }

.agent-fx-foot { margin: var(--s-3, 0.75rem) 0 0; font-size: var(--t-xs, 0.7rem); color: var(--c-fg-muted, #5a554f); }

/* ---- sibling: "For the curious" disclosure + counts -------------------- */
.successor-curio { border: var(--bw-thin, 1px) solid var(--c-border, #2a2a2a); border-radius: var(--radius-0, 2px); padding: 0 var(--s-4, 1rem); }
.successor-curio > summary { cursor: pointer; list-style: revert; padding: var(--s-3, 0.75rem) 0; }
.successor-curio > summary::-webkit-details-marker { color: var(--c-fg-muted, #5a554f); }
.successor-curio[open] > summary { border-bottom: var(--bw-thin, 1px) solid var(--c-border, #2a2a2a); }
.successor-curio-body { padding: var(--s-3, 0.75rem) 0 var(--s-2, 0.5rem); }
.successor-counts { margin: var(--s-3, 0.75rem) 0; padding: 0; display: grid; gap: var(--s-1, 0.35rem); }
.successor-counts > div { display: flex; justify-content: space-between; gap: var(--s-3, 1rem); border-bottom: var(--bw-thin, 1px) solid var(--c-border, #2a2a2a); padding-bottom: var(--s-1, 0.35rem); }
.successor-counts dt { margin: 0; color: var(--c-fg, #f0ebe5); }
.successor-counts dd { margin: 0; font-family: var(--font-mono, ui-monospace, monospace); color: var(--c-fg-dim, #8a847b); white-space: nowrap; }
.successor-toggle-name { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.92em; color: var(--c-fg-dim, #8a847b); white-space: nowrap; }
.agent-fx-note { color: var(--c-fg-muted, #5a554f); font-size: var(--t-xs, 0.8rem); }

/* ---- reduced motion: no transitions ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .agent-fx, .agent-fx *, .successor-curio, .successor-curio * { transition: none !important; animation: none !important; }
}
.agent-fx-reduced, .agent-fx-reduced * { transition: none !important; animation: none !important; }