/* The free tools (tools/<slug>/) share styles.css (tokens, header, footer,
   buttons, the hero grid, .checks, the FAQ list) and compare.css (the hero
   spacing, the stacked phone table). This sheet adds the converter itself:
   the input beside the output on wide screens and stacked on phones, the
   agent tabs, the code blocks with their copy buttons, the one call to
   action and the formats table. Dark only, like the rest of the site. */

/* ---------- hero ---------- */
/* Smaller than the landing headline: on a tool page the converter, not the
   title, should meet the fold. */
.mcp-hero { padding-top: clamp(2.5rem, 6vw, 4.5rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.mcp-hero .hero-head h1 { max-width: 17ch; font-size: clamp(2.375rem, 1.5rem + 3.4vw, 4.5rem); }
.mcp-hero .hero-lede { margin-top: 20px; }
.mcp-hero .checks { justify-content: center; margin-top: 24px; }

/* ---------- the converter ---------- */
.mcp-tool-section { padding: 0 0 clamp(3rem, 6vw, 5rem); }
.mcp-tool { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; }
@media (min-width: 980px) { .mcp-tool { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.mcp-in, .mcp-out { display: grid; align-content: start; gap: 14px; min-width: 0; padding: 18px; border: 1px solid var(--edge); border-radius: 20px; background: var(--bg-2); }
@media (min-width: 980px) { .mcp-in { position: sticky; top: calc(var(--nav-h) + 16px); } }

.mcp-in-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mcp-label { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; }
.mcp-input {
  display: block; width: 100%; min-height: 260px; resize: vertical; padding: 14px 16px;
  border: 1px solid var(--edge); border-radius: 14px; background: var(--bg); color: var(--text);
  font-family: var(--mono); font-size: 0.875rem; line-height: 1.6; tab-size: 2;
  transition: border-color 150ms var(--ease-out);
}
.mcp-input:hover { border-color: #3a3a3f; }
.mcp-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
/* iOS zooms into any field set below 16px. */
@media (max-width: 760px) { .mcp-input { font-size: 16px; min-height: 200px; } }

.mcp-status { display: flex; gap: 8px; font-size: var(--t-small); line-height: 1.45; color: var(--text-2); }
.mcp-status::before { content: ''; flex: none; width: 8px; height: 8px; margin-top: 0.45em; border-radius: 999px; background: var(--done); }
.mcp-status[data-state="error"] { color: #ff9b94; }
.mcp-status[data-state="error"]::before { background: #ff7b72; }

.mcp-samples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mcp-samples-label { margin-right: 2px; font-size: var(--t-small); font-weight: 600; color: var(--muted); }
.mcp-samples .ctl, .mcp-clear { min-height: 32px; padding: 0 12px; font-size: 0.8125rem; }
@media (pointer: coarse) { .mcp-samples .ctl, .mcp-clear { min-height: 40px; } }

/* The agents as pills that wrap: all nine stay in view on a phone, which a
   sideways-scrolling strip would not promise. */
.mcp-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.mcp-tab {
  display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px 0 6px;
  border: 1px solid var(--edge); border-radius: 999px; background: var(--bg); color: var(--text);
  font: inherit; font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; cursor: pointer;
  transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out), color 150ms var(--ease-out);
}
.mcp-tab:hover { border-color: var(--text); }
.mcp-tab .provider-mark { width: 24px; height: 24px; background: var(--bg-2); }
.mcp-tab .provider-mark svg { width: 14px; height: 14px; }
.mcp-tab[aria-selected="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.mcp-tab[aria-selected="true"] .provider-mark { background: var(--bg); }
@media (pointer: coarse) { .mcp-tab { min-height: 44px; } }

.mcp-panel { display: grid; gap: 18px; min-width: 0; transition: opacity 150ms var(--ease-out); }
.mcp-panel:focus-visible { outline-offset: 6px; border-radius: 8px; }
/* A paste that does not parse leaves the last result in view, dimmed. */
.mcp-panel[data-state="stale"] { opacity: 0.4; }
.mcp-block { display: grid; gap: 8px; min-width: 0; }
.mcp-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.mcp-block-title { min-width: 0; overflow-wrap: anywhere; font-size: 0.9375rem; font-weight: 650; letter-spacing: -0.01em; }
.mcp-block-title code { font-size: 0.875rem; color: var(--text); }
.mcp-copy {
  flex: none; min-width: 72px; min-height: 32px; padding: 0 14px; border: 1px solid var(--edge); border-radius: 999px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
  transition: border-color 150ms var(--ease-out);
}
.mcp-copy:hover { border-color: var(--text); }
@media (pointer: coarse) { .mcp-copy { min-height: 40px; } }
/* Wrapped rather than scrolled sideways: indentation survives pre-wrap, and a
   long command stays readable on a phone. */
.mcp-code {
  margin: 0; max-height: 440px; overflow: auto; padding: 14px 16px; border: 1px solid var(--edge-soft); border-radius: 14px;
  background: var(--bg); font-family: var(--mono); font-size: 0.8125rem; line-height: 1.6; color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2;
}
.mcp-code code { font-size: inherit; }
/* Commands are one per line and break badly at their hyphens, so they keep
   their lines and scroll sideways instead. */
.mcp-code[data-lang="shell"] { white-space: pre; overflow-wrap: normal; }
.mcp-block-hint { font-size: 0.8125rem; line-height: 1.5; color: var(--muted); }
.mcp-block-hint code, .mcp-notes code { font-size: 0.95em; color: var(--text-2); }
.mcp-notes { display: grid; gap: 8px; margin: 0; padding: 12px 14px 12px 32px; border: 1px solid color-mix(in srgb, var(--kw-issue) 28%, transparent); border-radius: 14px; background: color-mix(in srgb, var(--kw-issue) 6%, transparent); font-size: 0.875rem; line-height: 1.5; color: var(--text-2); }
.mcp-notes li::marker { color: var(--kw-issue); }
.mcp-more { font-size: var(--t-small); font-weight: 600; }
.mcp-more a { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--edge); text-underline-offset: 0.2em; }
.mcp-more a:hover { text-decoration-color: var(--text); }

/* Without JavaScript the first result is all there is; controls that only
   the script can work stay out of the way. */
.no-js .mcp-samples, .no-js .mcp-clear, .no-js .mcp-copy { display: none; }

/* ---------- the one call to action ---------- */
.mcp-cta { padding: 0 0 var(--section); }
.mcp-cta-card {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: center;
  padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--panel-edge); border-radius: var(--r-card); background: var(--panel);
}
@media (min-width: 900px) { .mcp-cta-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.mcp-cta-copy { display: grid; justify-items: start; gap: 18px; }
.mcp-cta-copy h2 { max-width: 14ch; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem); color: var(--on-panel); }
.mcp-cta-copy p { max-width: 46ch; font-size: 1.0625rem; line-height: 1.55; color: var(--on-panel-2); }
.mcp-cta-action { display: grid; justify-items: start; gap: 4px; margin-top: 6px; }
.mcp-cta-action .hero-hint { margin-top: 10px; }
.mcp-cta-shot img { width: 100%; height: auto; }
@media (max-width: 480px) { .mcp-cta-action, .mcp-cta-action .button { width: 100%; } }

/* ---------- how it works ---------- */
.mcp-how, .mcp-formats, .mcp-faq { padding: var(--section) 0; border-top: 1px solid var(--edge-soft); }
.mcp-steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; padding: 0; border: 1px solid var(--edge); border-radius: 20px; overflow: hidden; background: var(--edge); }
.mcp-steps li { counter-increment: step; display: grid; align-content: start; gap: 10px; padding: 26px 24px 28px; background: var(--bg); }
.mcp-steps li::before { content: counter(step, decimal-leading-zero); font-size: var(--t-small); font-weight: 600; color: var(--muted); }
.mcp-step-head { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; color: var(--text); }
.mcp-steps p:not(.mcp-step-head) { color: var(--text-2); line-height: 1.5; }
.mcp-steps code { font-size: 0.875em; }
@media (max-width: 720px) { .mcp-steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the formats table ---------- */
/* Five columns fit the content width, so this table opts out of the hub's
   sideways-scrolling minimum and keeps the sticky first column. */
@media (min-width: 900px) {
  .cmp.cmp--formats { min-width: 0; }
  .cmp--formats col.mcp-col-agent { width: 14%; }
}
.cmp--formats tbody th a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--edge); text-underline-offset: 0.2em; }
.cmp--formats tbody th a:hover { text-decoration-color: var(--text); }
.cmp--formats code { font-size: 0.875em; }

/* ---------- questions ---------- */
.mcp-faq .faq-list { max-width: 800px; margin-top: clamp(1.5rem, 3vw, 2.5rem); border-top: 1px solid var(--edge); }
.mcp-faq .faq-list code { font-size: 0.875em; color: var(--text); }
.mcp-related { max-width: 800px; margin-top: 28px; font-size: var(--t-small); font-weight: 600; color: var(--muted); }
.mcp-related a { color: var(--text); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--edge); text-underline-offset: 0.2em; }
.mcp-related a:hover { text-decoration-color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .mcp-tab, .mcp-copy, .mcp-input, .mcp-panel { transition: none; }
}

/* ======================================================================
   The model routing planner (tools/model-routing-planner/): the controls
   in one card, then the answer as a relay of four steps, each card in its
   subscription's colour, with the commands to start them. The shared
   pieces above (hero, call to action, steps grid, table, questions) carry
   the rest of the page.
   ====================================================================== */

.mr-tool { display: grid; gap: 16px; margin: 0; }
.mr-controls, .mr-result { min-width: 0; padding: clamp(18px, 2.4vw, 26px); border: 1px solid var(--edge); border-radius: 20px; background: var(--bg-2); }
.mr-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
/* Seven subscriptions take the full width in two columns; the job and the
   lean sit side by side under them. */
@media (min-width: 1000px) {
  .mr-controls { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; }
  .mr-group--subs { grid-column: 1 / -1; }
  .mr-stack--job { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mr-subs { display: grid; gap: 14px 28px; }
@media (min-width: 760px) { .mr-subs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mr-group { display: grid; align-content: start; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.mr-label { padding: 0; font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.mr-row { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.mr-row-head { display: flex; align-items: center; gap: 8px; padding: 0; font-size: var(--t-small); font-weight: 600; color: var(--text-2); }
.mr-row-head .provider-mark { width: 24px; height: 24px; }
.mr-row-head .provider-mark svg { width: 14px; height: 14px; }

/* Radios drawn as pills: the input stays in the page for the keyboard and
   for screen readers, and the pill beside it shows the choice. */
.mr-opt { position: relative; display: inline-flex; min-width: 0; cursor: pointer; }
.mr-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mr-opt > span {
  display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 14px; border: 1px solid var(--edge); border-radius: 999px;
  background: var(--bg); color: var(--text); font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
  transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out), color 150ms var(--ease-out);
}
.mr-opt > span small { font-size: 0.75rem; font-weight: 500; color: var(--muted); }
.mr-opt:hover > span { border-color: var(--text); }
.mr-opt input:checked + span { background: var(--text); border-color: var(--text); color: var(--bg); }
.mr-opt input:checked + span small { color: color-mix(in srgb, var(--bg) 62%, transparent); }
.mr-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (pointer: coarse) { .mr-opt > span { min-height: 44px; } }
.mr-seg { display: flex; flex-wrap: wrap; gap: 6px; }

.mr-stack { display: grid; gap: 6px; }
@media (min-width: 640px) and (max-width: 999px) { .mr-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mr-stack--lean { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mr-stack .mr-opt { display: flex; }
.mr-stack .mr-opt > span { flex: 1; display: grid; gap: 2px; align-content: center; min-height: 44px; padding: 8px 14px; border-radius: 14px; white-space: normal; }
.mr-stack .mr-opt > span b { font-weight: 650; }
.mr-stack .mr-opt > span small { font-size: 0.8125rem; line-height: 1.35; }

/* ---------- the answer ---------- */
.mr-result { display: grid; gap: clamp(18px, 2.4vw, 26px); transition: opacity 150ms var(--ease-out); }
.mr-headline { display: grid; justify-items: start; gap: 6px; }
.mr-sentence { max-width: 30ch; font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.375rem); font-weight: 700; line-height: 1.1; letter-spacing: -0.035em; color: var(--text); }
.mr-team { font-size: 1.0625rem; color: var(--text-2); }
.mr-reserve { font-size: var(--t-small); color: var(--muted); }
.mr-swap { margin-top: 8px; min-height: 34px; padding: 0 14px; font-size: 0.8125rem; }
@media (pointer: coarse) { .mr-swap { min-height: 44px; } }
.mr-empty { padding: 24px 0; font-size: 1.0625rem; color: var(--text-2); }

/* The four steps in a row, read left to right; on phones a column, read
   top to bottom. A chevron in the gap carries the eye to the next step. */
.mr-relay { list-style: none; counter-reset: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; padding: 0; }
@media (min-width: 640px) { .mr-relay { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .mr-relay { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mr-step {
  --step: var(--muted);
  position: relative; display: grid; align-content: start; gap: 10px; min-width: 0; padding: 16px 16px 18px;
  border: 1px solid var(--edge); border-top: 3px solid var(--step); border-radius: 16px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--step) 11%, transparent), transparent 120px), var(--bg);
}
.mr-step[data-provider="claude"] { --step: var(--claude); }
.mr-step[data-provider="codex"] { --step: var(--codex); }
.mr-step[data-provider="gemini"] { --step: #4f8cff; }
.mr-step[data-provider="x"] { --step: #d4d4d8; }
.mr-step[data-provider="copilot"] { --step: #a371f7; }
.mr-step[data-provider="kimi"] { --step: #f472b6; }
.mr-step[data-provider="glm"] { --step: #5b7cff; }
.mr-step[data-skipped] { border-style: dashed; border-top-width: 1px; background: transparent; }
@media (min-width: 1000px) {
  .mr-step:not(:last-child)::after {
    content: ''; position: absolute; z-index: 1; top: 54px; right: -13px; width: 12px; height: 12px;
    background: var(--muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4 2l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }
}
.mr-step-head { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 0.8125rem; }
.mr-step-num { font-weight: 600; color: var(--muted); }
.mr-step-name { font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.mr-tier {
  margin-left: auto; padding: 2px 9px; border: 1px solid color-mix(in srgb, var(--step) 45%, transparent); border-radius: 999px;
  font-size: 0.75rem; font-weight: 650; color: color-mix(in srgb, var(--step) 70%, var(--text));
}
.mr-model { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.03em; color: var(--text); }
.mr-model > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.mr-model .provider-mark { flex: none; width: 30px; height: 30px; background: var(--bg-2); }
.mr-model .provider-mark svg { width: 16px; height: 16px; }
.mr-model--skip { font-size: 1.25rem; color: var(--muted); }
.mr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 0.8125rem; font-weight: 600; color: var(--text-2); }
.mr-effort { padding: 2px 9px; border: 1px solid var(--edge); border-radius: 999px; background: var(--bg-2); }
.mr-rate { display: inline-flex; align-items: center; gap: 7px; }
.mr-dots { display: inline-flex; gap: 3px; }
.mr-dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--edge); }
.mr-dots i[data-on] { background: var(--step); }
.mr-sub-name { font-size: var(--t-small); font-weight: 600; color: var(--text); }
.mr-why { font-size: var(--t-small); line-height: 1.45; color: var(--text-2); }
.mr-note { padding-left: 12px; border-left: 2px solid color-mix(in srgb, var(--step) 40%, transparent); font-size: 0.8125rem; line-height: 1.45; color: var(--muted); }

.mr-launch { display: grid; gap: 10px; padding-top: 18px; border-top: 1px solid var(--edge-soft); }
.mr-launch-title { font-size: 0.9375rem; font-weight: 650; letter-spacing: -0.01em; color: var(--text); }
.mr-launch-list { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.mr-launch-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; }
.mr-launch-step { font-size: 0.8125rem; font-weight: 600; color: var(--muted); }
.mr-code { margin: 0; min-width: 0; overflow-x: auto; padding: 9px 12px; border: 1px solid var(--edge-soft); border-radius: 12px; background: var(--bg); font-family: var(--mono); font-size: 0.8125rem; line-height: 1.5; color: var(--text); white-space: pre; }
.mr-code code { font-size: inherit; }
/* CLIs that publish no model names: the command starts them and /model picks. */
.mr-pick { grid-column: 2 / -1; margin-top: -4px; font-size: 0.8125rem; color: var(--text-2); }
.mr-pick kbd { padding: 1px 6px; border: 1px solid var(--edge); border-radius: 6px; background: var(--bg); font-family: var(--mono); font-size: 0.75rem; color: var(--text); }
@media (max-width: 560px) {
  .mr-launch-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mr-launch-step, .mr-pick { grid-column: 1 / -1; }
}

.no-js .mr-swap { display: none; }

/* ---------- the rates table ---------- */
.mr-table-model { display: inline-flex; align-items: center; gap: 8px; }
.mr-table-model .provider-mark { flex: none; width: 24px; height: 24px; }
.mr-table-model .provider-mark svg { width: 14px; height: 14px; }
.provider-mark--copilot { color: #a371f7; }
.provider-mark--kimi { color: #f472b6; }
.mr-rules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .mr-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mr-rules { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .mr-opt > span, .mr-result { transition: none; }
}