/* ============================================================
   Tamerix -- Issue 03: Tool use & function calling
   Page-specific styles. Shared editorial + interactive components
   (prose marks, form chrome, code, tables, panels, message cards,
   JSON blocks, the step trace, the comparison matrix) live in
   assets/issue.css. This file owns ONLY the accent and the
   components unique to this issue's toys.
   ============================================================ */

/* per-issue accent (kept in sync with data/issues.json; lives here so adding
   an issue never touches the shared assets/core.css) */
body[data-essay="tool-use"] { --accent:#0f766e; --accent-soft:#e2efed; }

/* ============================================================
   tool-spec: a Python function morphing into the JSON schema
   the model actually sees
   ============================================================ */

.tool-spec {
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  align-items: center;
  gap: 4px;
  margin: 14px 0;
}
.tool-spec .ts-side {
  background: var(--surface);
  border: 1px solid var(--hairline-cool);
  border-radius: var(--radius);
  overflow: hidden;
}
.tool-spec .ts-side.code { border-left: 3px solid var(--ink); }
.tool-spec .ts-side.schema { border-left: 3px solid var(--accent); }
.tool-spec .ts-cap {
  font-family: var(--font-ui);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 600;
  padding: 8px 14px 0;
}
.tool-spec .ts-cap.you  { color: var(--ink); }
.tool-spec .ts-cap.model { color: var(--accent); }
.tool-spec pre {
  margin: 6px 0 0;
  padding: 6px 14px 14px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink);
  overflow-x: auto;
  white-space: pre;
}
.tool-spec .ts-morph {
  text-align: center;
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--accent);
}
/* light token tinting inside the spec / JSON */
.tok-key { color: var(--accent); }
.tok-str { color: #9a3412; }
.tok-num { color: #1d4ed8; }
.tok-punc { color: var(--muted); }
.tok-com { color: var(--subtle); font-style: italic; }

/* ============================================================
   the loop runner (presets + the final-step accent on the trace)
   ============================================================ */

.loop-runner .query-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.loop-runner .preset {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--hairline-cool);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 8px 14px;
  cursor: pointer;
}
.loop-runner .preset:hover { background: var(--accent-soft); filter: none; }
.loop-runner .preset.active { background: var(--accent); color: var(--accent-ink); }

/* final step of a loop trace renders in ink, not accent */
.trace .trace-step.final .dot { background: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.trace .trace-step.final .step-label { color: var(--ink); }

/* ============================================================
   picker (the tool_call inspector and the tool_choice policy chooser)
   ============================================================ */

.picker { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.picker .opt {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--bg);
  border: 1px solid var(--hairline-cool);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 8px 14px;
  cursor: pointer;
  color: var(--ink);
}
.picker .opt:hover { background: var(--accent-soft); }
.picker .opt.active { background: var(--accent); color: var(--accent-ink); }
.picker-out {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink);
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 12px 16px;
  margin-top: 8px;
}

/* ============================================================
   responsive (bespoke)
   ============================================================ */

@media (max-width: 700px) {
  /* tool-spec stacks; the morph arrow rotates to point down */
  .tool-spec { grid-template-columns: 1fr; }
  .tool-spec .ts-morph { transform: rotate(90deg); font-size: 22px; }
}