/* Mock API Server.
 *
 * Its own sheet, but NOT its own design language: every value below is either a --ts-* token from
 * tool-studio.css or copied in shape from developer-lab.css and devlab-kafka.css, which are the
 * Lab's established vocabulary. A third visual vocabulary for a fifth Lab page is how a console
 * stops looking like one product.
 *
 * The page is a two-pane console - a rail of servers on the left, the selected server on the
 * right - and inside the right pane the ROUTE TABLE is the thing people came to work on, so it
 * gets the most contrast: a toned method pill per row, the path in monospace, and the fallback
 * pinned last at lower weight because it is what happens when nothing above it applies.
 *
 * Scoped through [data-lab-tool="mock-api"] wherever a rule reaches outside this page's own mk-*
 * classes - .dl-head belongs to developer-lab.css and is shared with every other Lab page.
 */

/* ---- masthead: title beside the meter ---- */
/* The hero is the shell's card (developer-lab.css); this page only sets its copy width. */
.tstudio[data-lab-tool="mock-api"] .dl-head-txt p { font-size: .86rem; line-height: 1.55; }

/* The illustration's theme-sensitive shapes, same approach as the Kafka pages: the artwork is
   authored light-only, and a near-white disc is the brightest thing on a dark page. */
.mk-art-disc { fill: #f1eefe; }
.mk-art-dot { fill: #d7d5f4; }
.mk-art-card { fill: #fff; stroke: #dbe0f5; stroke-width: 2; }
.mk-art-bar { fill: #eef2ff; }
.mk-art-line { fill: #dbe0f5; }
.mk-art-ok { fill: #fff; stroke: #dbe0f5; stroke-width: 2; }
[data-bs-theme="dark"] .mk-art-disc { fill: rgba(129, 140, 248, .12); }
[data-bs-theme="dark"] .mk-art-dot { fill: rgba(165, 180, 252, .38); }
[data-bs-theme="dark"] .mk-art-card { fill: #1b2133; stroke: #373e53; }
[data-bs-theme="dark"] .mk-art-bar { fill: #232a40; }
[data-bs-theme="dark"] .mk-art-line { fill: #3b4460; }
[data-bs-theme="dark"] .mk-art-ok { fill: #1b2133; stroke: #373e53; }

/* ---- the two standing notices: stacked in the right-hand column ---- */
.mk-vows { display: grid; grid-template-columns: 1fr; gap: .6rem; margin: 0; }
/* .tstudio first, for the reason devlab-kafka.css documents: theme.min.css is linked AFTER this
   file, so at equal specificity Bootstrap's .alert padding wins on source order. */
.tstudio .mk-vow {
  font-size: .78rem; line-height: 1.55; align-items: flex-start; margin: 0;
  padding: .65rem .8rem; border-radius: .7rem;
}

/* ---- the two-pane shell ---- */
/* The console on the left, where the work is; the meter, the notices and the server list in a
   column on the right, where a glance goes. On a phone the column comes FIRST in the stack so
   the list of servers - the way into everything else - is not below the whole console. */
.mk-shell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.mk-side { display: flex; flex-direction: column; gap: .85rem; order: -1; }
@media (min-width: 1200px) {
  .mk-shell { grid-template-columns: minmax(0, 1fr) 21rem; }
  .mk-side { order: 2; position: sticky; top: 5.25rem; }
}
/* padding: 0 on this and on .mk-card below. Both are <section>s, and the theme gives every
   section 2.5rem of padding top and bottom (3.5rem from 992px up), which drew an empty white band
   above each card's grey header. Reset on BOTH: with only the cards reset, the console would sit
   3.5rem higher than the server rail beside it, which carried the same padding by accident. */
.mk-main { min-width: 0; display: flex; flex-direction: column; gap: 1rem; padding: 0; }

/* ---- cards ---- */
.mk-card {
  border: 1px solid var(--ts-line); border-radius: 1.1rem; overflow: hidden;
  background: var(--ts-card); display: flex; flex-direction: column; padding: 0;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.mk-card-h {
  display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem;
  border-bottom: 1px solid var(--ts-line); background: var(--ts-soft);
}
.mk-card-h > span:nth-child(2) { display: flex; flex-direction: column; margin-right: auto; min-width: 0; }
.mk-card-h h2 { font-size: .92rem; line-height: 1.2; color: var(--ts-ink); margin: 0; font-weight: 700; }
.mk-card-h em { font-style: normal; font-size: .72rem; margin-top: .1rem; color: var(--ts-muted); }
.mk-card-acts { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.mk-ico {
  flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: .75rem;
  display: grid; place-items: center; font-size: .85rem;
  background: var(--ts-brand-s); color: var(--ts-brand-t);
}
.mk-ico.lg { width: 3rem; height: 3rem; border-radius: 1rem; font-size: 1.15rem; }
.mk-body { padding: 1rem; display: flex; flex-direction: column; gap: .1rem; }

/* ---- fields ---- */
.mk-lbl {
  display: block; font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; margin: .85rem 0 .3rem; color: var(--ts-muted);
}
.mk-body > .mk-lbl:first-child, .mk-body > div:first-child .mk-lbl,
.modal-body > .mk-lbl:first-child { margin-top: 0; }
.mk-opt {
  font-weight: 600; letter-spacing: 0; text-transform: none; font-size: .68rem;
  color: var(--ts-muted); margin-left: .25rem;
}
.mk-hint { font-size: .72rem; line-height: 1.5; margin: .35rem 0 0; color: var(--ts-muted); }
.mk-hint code, .mk-routes-note code, .dl-tip code {
  font-size: .9em; padding: .05rem .3rem; border-radius: .3rem;
  background: var(--ts-soft); color: var(--ts-brand-t); border: 1px solid var(--ts-line);
}
.mk-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; }
.mk-2col { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .75rem; }
@media (max-width: 575.98px) { .mk-2col { grid-template-columns: 1fr; } }
textarea.mk-body-in { min-height: 11rem; resize: vertical; }

/* ---- buttons that this page adds to the studio set ---- */
/* Stop is red-tinted and never shares a pixel with Start - see the note in the HTML. */
.mk-stop { color: #b91c1c; border-color: rgba(185, 28, 28, .35); }
.mk-stop:hover { background: rgba(185, 28, 28, .08); border-color: #b91c1c; }
[data-bs-theme="dark"] .mk-stop { color: #fda4af; border-color: rgba(253, 164, 175, .35); }
.mk-danger { color: var(--ts-muted); }
.mk-danger:hover { color: #b91c1c; border-color: rgba(185, 28, 28, .45); background: rgba(185, 28, 28, .06); }
[data-bs-theme="dark"] .mk-danger:hover { color: #fda4af; }
.mk-danger-txt { color: #b91c1c; }
[data-bs-theme="dark"] .mk-danger-txt { color: #fda4af; }

/* ---- the server rail ---- */
/* First in the column, so it reads as the page's index rather than one more card: a brand-tinted
   header with the icon as a badge, a real New button instead of a bare plus, and rows that carry
   a green edge while they run - the one fact somebody scanning the list is after. */
.mk-servers-card { border-color: color-mix(in srgb, var(--ts-brand) 28%, var(--ts-line)); box-shadow: 0 .35rem 1.1rem rgba(79, 70, 229, .08); }
.mk-servers-card > .mk-card-h {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ts-brand) 12%, var(--ts-card)), var(--ts-card));
  border-bottom-color: color-mix(in srgb, var(--ts-brand) 18%, var(--ts-line));
  padding: .9rem 1rem;
}
.mk-servers-card > .mk-card-h .mk-ico {
  width: 2.5rem; height: 2.5rem; border-radius: .85rem; font-size: .95rem; color: #fff;
  background: linear-gradient(135deg, var(--ts-brand), color-mix(in srgb, var(--ts-brand) 70%, #7c3aed));
  box-shadow: 0 .25rem .6rem rgba(79, 70, 229, .28);
}
.mk-servers-card > .mk-card-h h2 { font-size: 1rem; }
.mk-servers-card > .mk-card-h em { font-size: .74rem; }
.mk-new-btn { padding: .4rem .8rem; font-size: .78rem; gap: .35rem; white-space: nowrap; }
.mk-new-btn .fa-solid, .mk-new-btn svg { font-size: .72rem; }
.mk-servers-card .mk-body { padding: .8rem; }
.mk-servers { gap: .55rem; max-height: min(60vh, 34rem); overflow: auto; }
/* The empty column: a box with sparkles, a line, and the one action. */
.mk-servers-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.1rem .5rem 1.25rem; gap: .35rem; }
.mk-servers-empty svg { width: 7.5rem; height: auto; margin-bottom: .4rem; }
.mk-servers-empty b { font-size: .92rem; font-weight: 750; color: var(--ts-ink); }
.mk-servers-empty span { font-size: .76rem; color: var(--ts-muted); line-height: 1.5; max-width: 16rem; }
.mk-servers-empty .ts-btn { margin-top: .75rem; padding: .6rem 1.4rem; }
.mk-art-box-back { fill: #c7d2fe; } .mk-art-box-front { fill: #818cf8; } .mk-art-box-side { fill: #6366f1; }
.mk-art-box-lid { fill: #a5b4fc; } .mk-art-spark { fill: #fbbf24; }
[data-bs-theme="dark"] .mk-art-box-back { fill: #3b4460; } [data-bs-theme="dark"] .mk-art-box-lid { fill: #4c5578; }
.mk-empty { font-size: .82rem; color: var(--ts-muted); margin: 0; padding: 1.25rem 0; text-align: center; }
.mk-row {
  position: relative; border: 1px solid var(--ts-line); border-radius: .85rem; padding: .65rem .8rem .65rem .95rem;
  background: var(--ts-card); cursor: pointer; width: 100%; text-align: left; font: inherit;
  color: inherit; transition: border-color .14s ease, background .14s ease, box-shadow .14s ease;
}
/* The running edge: a green bar down the left, so which servers are live is visible without
   reading a single badge. Drawn as a pseudo-element so it follows the rounded corner. */
.mk-row::before {
  content: ""; position: absolute; left: 0; top: .55rem; bottom: .55rem; width: .22rem;
  border-radius: 0 .25rem .25rem 0; background: transparent; transition: background .14s ease;
}
.mk-row:has(.mk-dot.on)::before { background: #16a34a; }
.mk-row:hover { border-color: color-mix(in srgb, var(--ts-brand) 40%, var(--ts-line)); background: var(--ts-soft); box-shadow: 0 .15rem .5rem rgba(15, 23, 42, .06); }
.mk-row.is-open { border-color: var(--ts-brand); box-shadow: 0 0 0 1px var(--ts-brand-s); background: var(--ts-brand-s); }
.mk-row:focus-visible { outline: 2px solid var(--ts-brand); outline-offset: 2px; }
.mk-row-h { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.mk-row-name {
  font-size: .84rem; font-weight: 700; color: var(--ts-ink); margin-right: auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mk-row-meta {
  display: flex; gap: .6rem; font-size: .7rem; color: var(--ts-muted); margin-top: .35rem;
  padding-left: 1rem;
}
.mk-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ts-faint); flex: 0 0 auto; }
.mk-dot.on { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, .18); }
.mk-badge {
  font-size: .68rem; font-weight: 600; padding: .16rem .5rem; border-radius: 999px;
  background: var(--ts-soft); color: var(--ts-muted); white-space: nowrap; border: 1px solid var(--ts-line);
}
.mk-badge.on { background: rgba(34, 197, 94, .14); color: #15803d; border-color: transparent; }
[data-bs-theme="dark"] .mk-badge.on { color: #86efac; }

/* ---- welcome (nothing selected) ---- */
.mk-welcome {
  border: 1px dashed var(--ts-line); border-radius: 1.1rem; background: var(--ts-soft);
  padding: 1.4rem 1.4rem 1.2rem;
}
.mk-welcome-h { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: 1rem; }
.mk-welcome-h h2 { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; color: var(--ts-ink); margin: .15rem 0 .25rem; }
.mk-welcome-h p { font-size: .82rem; line-height: 1.55; color: var(--ts-muted); margin: 0; }
.mk-starts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
@media (max-width: 767.98px) { .mk-starts { grid-template-columns: 1fr; } }
.mk-start {
  display: flex; flex-direction: column; gap: .5rem; text-align: left; font: inherit; color: inherit;
  border: 1px solid var(--ts-line); border-radius: .9rem; background: var(--ts-card);
  padding: .9rem; cursor: pointer; transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease;
}
.mk-start:hover { border-color: var(--ts-brand); transform: translateY(-2px); box-shadow: 0 .6rem 1.4rem rgba(15, 23, 42, .08); }
[data-bs-theme="dark"] .mk-start:hover { box-shadow: 0 .6rem 1.4rem rgba(0, 0, 0, .35); }
.mk-start:focus-visible { outline: 2px solid var(--ts-brand); outline-offset: 2px; }
.mk-start b { font-size: .86rem; color: var(--ts-ink); }
.mk-start small { font-size: .74rem; line-height: 1.5; color: var(--ts-muted); }
.mk-start .mk-start-routes { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: auto; }
.mk-welcome-foot { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; margin-top: 1rem; }
.mk-welcome-foot .mk-hint { margin: 0; }

/* ---- console head ---- */
.mk-console { display: flex; flex-direction: column; gap: 1rem; }
.mk-console-h { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.mk-title { display: flex; align-items: center; gap: .55rem; min-width: 0; margin-right: auto; }
.mk-c-name {
  font-size: 1.25rem; font-weight: 800; letter-spacing: -.015em; color: var(--ts-ink); margin: 0;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 28rem;
}
.mk-c-name input {
  font: inherit; color: inherit; border: 1px solid var(--ts-brand); border-radius: .5rem;
  background: var(--ts-card); padding: .1rem .45rem; width: 20rem; max-width: 60vw;
}
.mk-c-name input:focus { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ts-brand) 18%, transparent); }
.mk-console-acts { display: flex; align-items: center; gap: .5rem; }

/* ---- the base URL ---- */
.mk-urlbar {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem;
  border: 1px solid var(--ts-line); border-radius: .9rem; background: var(--ts-card); padding: .6rem .8rem;
}
.mk-urlbar-lbl { font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ts-muted); }
.mk-urlbar-url {
  font-size: .8rem; overflow-wrap: anywhere; color: var(--ts-brand-t);
  background: var(--ts-soft); padding: .3rem .5rem; border-radius: .5rem;
}
.mk-urlbar-meta { grid-column: 1 / -1; font-size: .72rem; color: var(--ts-muted); }
.mk-urlbar-meta:empty { display: none; }

/* ---- the route table ---- */
.mk-tablewrap { overflow-x: auto; }
.mk-table { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; }
.mk-table th, .mk-table td { padding: .6rem .9rem; text-align: left; vertical-align: middle; }
.mk-table thead th {
  font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ts-muted); background: var(--ts-head); border-bottom: 1px solid var(--ts-line); white-space: nowrap;
}
.mk-table tbody td { border-bottom: 1px solid var(--ts-line); font-size: .81rem; color: var(--ts-ink); }
.mk-table tbody tr:last-child td { border-bottom: 0; }
.mk-table tbody tr.mk-r { cursor: pointer; transition: background .12s ease; }
.mk-table tbody tr.mk-r:hover { background: var(--ts-soft); }
.mk-table tbody tr.mk-r.is-sel { background: var(--ts-brand-s); }
.mk-table tbody tr.mk-r.is-sel td { border-bottom-color: transparent; }
.mk-table tbody tr.mk-r:focus-visible { outline: 2px solid var(--ts-brand); outline-offset: -2px; }
/* The quick-start menu: a title and a one-line blurb per template, wrapped rather than nowrap so
   three long blurbs do not make a menu wider than the card. */
#mk-quick-menu { min-width: 18rem; max-width: min(24rem, 90vw); padding: .4rem; }
#mk-quick-menu .dropdown-item { white-space: normal; border-radius: .6rem; padding: .5rem .7rem; font-size: .82rem; font-weight: 600; }
#mk-quick-menu .dropdown-item small { font-weight: 500; font-size: .72rem; line-height: 1.4; margin-top: .1rem; }
.mk-table td.mk-td-path { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; }
.mk-td-path .seg-p { color: var(--ts-brand-t); font-weight: 700; }
.mk-td-path .seg-w { color: #b45309; font-weight: 700; }
[data-bs-theme="dark"] .mk-td-path .seg-w { color: #fcd34d; }
.mk-td-path .sub { display: block; font-family: inherit; font-size: .68rem; color: var(--ts-muted); margin-top: .15rem; }
.mk-td-ans { color: var(--ts-muted); font-size: .78rem; white-space: nowrap; }
.mk-td-ans b { color: var(--ts-ink); font-weight: 700; }
.mk-td-acts { text-align: right; white-space: nowrap; }
.mk-td-acts .ts-mini + .ts-mini { margin-left: .3rem; }
.mk-table tr.mk-fb td { background: var(--ts-soft); color: var(--ts-muted); }
.mk-table tr.mk-fb td.mk-td-path { color: var(--ts-muted); }
.mk-table tr.mk-fb .mk-td-ans b { color: var(--ts-muted); }
.mk-table tr.mk-r-empty td { text-align: center; padding: 1.4rem 1rem; color: var(--ts-muted); font-size: .8rem; }
.mk-routes-note { font-size: .72rem; color: var(--ts-muted); margin: 0; padding: .55rem 1rem .7rem; border-top: 1px solid var(--ts-line); }
.mk-routes-note:empty { display: none; }

/* method pills: one tone per verb, the tones every API tool uses so nobody has to learn them */
.mk-m {
  display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .66rem; font-weight: 800; letter-spacing: .03em; padding: .18rem .5rem; border-radius: .4rem;
  background: var(--mk-m-bg); color: var(--mk-m-fg); line-height: 1.2; white-space: nowrap;
}
.mk-m.m-get    { --mk-m-bg: rgba(34, 197, 94, .14);  --mk-m-fg: #15803d; }
.mk-m.m-post   { --mk-m-bg: rgba(59, 130, 246, .14); --mk-m-fg: #1d4ed8; }
.mk-m.m-put    { --mk-m-bg: rgba(245, 158, 11, .16); --mk-m-fg: #b45309; }
.mk-m.m-patch  { --mk-m-bg: rgba(139, 92, 246, .14); --mk-m-fg: #6d28d9; }
.mk-m.m-delete { --mk-m-bg: rgba(244, 63, 94, .13);  --mk-m-fg: #be123c; }
.mk-m.m-any    { --mk-m-bg: rgba(100, 116, 139, .16); --mk-m-fg: #475569; }
.mk-m.m-res    { --mk-m-bg: rgba(20, 184, 166, .15); --mk-m-fg: #0f766e; }
[data-bs-theme="dark"] .mk-m.m-get    { --mk-m-fg: #86efac; }
[data-bs-theme="dark"] .mk-m.m-post   { --mk-m-fg: #93c5fd; }
[data-bs-theme="dark"] .mk-m.m-put    { --mk-m-fg: #fcd34d; }
[data-bs-theme="dark"] .mk-m.m-patch  { --mk-m-fg: #c4b5fd; }
[data-bs-theme="dark"] .mk-m.m-delete { --mk-m-fg: #fda4af; }
[data-bs-theme="dark"] .mk-m.m-any    { --mk-m-fg: #cbd5e1; }
[data-bs-theme="dark"] .mk-m.m-res    { --mk-m-fg: #5eead4; }
.mk-methods-all { display: flex; flex-wrap: wrap; gap: .3rem; padding: .45rem 0; }
.mk-mstack { display: inline-flex; flex-direction: column; gap: .2rem; }

/* status pill in the "Answers with" column */
.mk-st { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 800; }
.mk-st.ok { color: #15803d; }
.mk-st.warn { color: #b45309; }
.mk-st.bad { color: #be123c; }
[data-bs-theme="dark"] .mk-st.ok { color: #86efac; }
[data-bs-theme="dark"] .mk-st.warn { color: #fcd34d; }
[data-bs-theme="dark"] .mk-st.bad { color: #fda4af; }

/* ---- try it ---- */
.mk-try-pre {
  margin: 0; padding: .9rem 1rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .76rem; line-height: 1.6; color: var(--ts-ink); background: var(--ts-card);
  white-space: pre-wrap; overflow-wrap: anywhere; min-height: 4.5rem;
}
.mk-try-pre .c { color: var(--ts-muted); }
.mk-try-pre .k { color: var(--ts-brand-t); font-weight: 700; }

/* ---- modals ---- */
.mk-modal { border-radius: 1.1rem; border: 1px solid var(--ts-line); background: var(--ts-card); color: var(--ts-ink); }
.mk-modal .modal-header, .mk-modal .modal-footer { border-color: var(--ts-line); }
.mk-modal .modal-title { font-size: .98rem; font-weight: 800; letter-spacing: -.01em; color: var(--ts-ink); }
.mk-modal .modal-body { padding-top: .5rem; }
.mk-modal-err { font-size: .76rem; color: #b91c1c; margin-right: auto; }
.mk-modal-err:empty { display: none; }
[data-bs-theme="dark"] .mk-modal-err { color: #fda4af; }

/* the kind toggle: two big radio-like buttons, the way the Kafka pages do their segmented choice */
.mk-seg { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: .25rem; }
@media (max-width: 575.98px) { .mk-seg { grid-template-columns: 1fr; } }
.mk-seg button {
  display: flex; align-items: center; gap: .7rem; text-align: left; font: inherit; color: inherit;
  border: 1px solid var(--ts-line); border-radius: .85rem; background: var(--ts-card); padding: .65rem .8rem;
  cursor: pointer; transition: border-color .14s ease, background .14s ease;
}
/* .ico is a wrapper, not the icon: fontawesome's SVG build replaces the icon span with an <svg>
   that does not carry .fa-solid, so a selector on the icon itself matches nothing after load. */
.mk-seg button > .ico { width: 1.9rem; height: 1.9rem; border-radius: .6rem; display: grid; place-items: center;
  background: var(--ts-soft); color: var(--ts-muted); font-size: .8rem; flex: 0 0 auto; }
.mk-seg button > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.mk-seg button b { font-size: .82rem; color: var(--ts-ink); }
.mk-seg button small { font-size: .7rem; color: var(--ts-muted); line-height: 1.4; }
.mk-seg button:hover { border-color: color-mix(in srgb, var(--ts-brand) 45%, var(--ts-line)); }
.mk-seg button.on { border-color: var(--ts-brand); background: var(--ts-brand-s); }
.mk-seg button.on > .ico { background: var(--ts-brand); color: #fff; }
.mk-seg button:focus-visible { outline: 2px solid var(--ts-brand); outline-offset: 2px; }

/* mode switching: the dialog carries data-mode and data-kind, and everything else is CSS */
#mk-route-modal[data-mode="fallback"] .mk-only-route { display: none !important; }
#mk-route-modal[data-mode="route"] .mk-only-fallback { display: none !important; }
#mk-route-modal[data-kind="STATIC"] .mk-only-resource { display: none !important; }
#mk-route-modal[data-kind="RESOURCE"] .mk-only-static { display: none !important; }

.mk-route-line { align-items: end; }
.mk-pathfield { display: flex; align-items: stretch; min-width: 0; }
.mk-pathpre {
  display: inline-flex; align-items: center; padding: 0 .6rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72rem; color: var(--ts-muted); background: var(--ts-soft); border: 1px solid var(--ts-line); border-right: 0;
  border-radius: .65rem 0 0 .65rem; white-space: nowrap; max-width: 11rem; overflow: hidden; text-overflow: ellipsis;
}
.mk-pathfield .dl-input { border-radius: 0 .65rem .65rem 0; }

/* placeholder chips: one click drops the token where the caret is */
.mk-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .4rem; }
.mk-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .66rem; font-weight: 700;
  padding: .18rem .45rem; border-radius: .4rem; cursor: pointer; border: 1px solid var(--ts-line);
  background: var(--ts-soft); color: var(--ts-brand-t); transition: border-color .12s ease, background .12s ease;
}
.mk-chip:hover { border-color: var(--ts-brand); background: var(--ts-brand-s); }

.mk-more { margin-top: .85rem; }
.mk-more summary {
  cursor: pointer; font-size: .74rem; font-weight: 700; color: var(--ts-muted); list-style: none;
  display: inline-flex; align-items: center; gap: .4rem;
}
.mk-more summary::-webkit-details-marker { display: none; }
.mk-more summary::before { content: "\25B8"; font-size: .7rem; transition: transform .14s ease; }
.mk-more[open] summary::before { transform: rotate(90deg); }
.mk-more textarea { margin-top: .45rem; }
.mk-fb-quick { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1rem; }
.mk-fb-quick .mk-hint { margin: 0; flex: 1 1 14rem; }

/* the six generated operations, explained as a list of method pills */
.mk-ops { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .9rem; margin: .5rem 0 .25rem; }
@media (max-width: 575.98px) { .mk-ops { grid-template-columns: 1fr; } }
.mk-op { display: flex; align-items: center; gap: .5rem; font-size: .74rem; color: var(--ts-muted); min-width: 0; }
.mk-op code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .72rem; color: var(--ts-ink); }
.mk-op .mk-m { width: 3.6rem; text-align: center; }
.mk-caps { display: flex; align-items: end; padding-bottom: .35rem; font-size: .72rem; color: var(--ts-muted); line-height: 1.5; }

/* ---- resource data viewer ---- */
.mk-data-h { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; flex-wrap: wrap; }
.mk-data-url { font-size: .74rem; color: var(--ts-brand-t); overflow-wrap: anywhere; }
.mk-data-pre {
  margin: 0; padding: .8rem .9rem; border-radius: .7rem; border: 1px solid var(--ts-line);
  background: var(--ts-soft); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .74rem; line-height: 1.55; color: var(--ts-ink); max-height: 50vh; overflow: auto; white-space: pre;
}

/* ---- motion ---- */
@media (prefers-reduced-motion: reduce) {
  .mk-start, .mk-row, .mk-seg button, .mk-chip, .mk-more summary::before { transition: none; }
  .mk-start:hover { transform: none; }
}


/* ---- audit fixes: the notices fold on a phone, the rail scrolls sideways, the table stacks ---- */
.mk-vows-wrap > summary { display: none; }
.mk-vows-wrap > summary::-webkit-details-marker { display: none; }
.mk-tpl-done {
  display: inline-block; margin-left: .35rem; padding: .05rem .4rem; border-radius: 999px; vertical-align: middle;
  font-size: .6rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(34, 197, 94, .14); color: #15803d;
}
[data-bs-theme="dark"] .mk-tpl-done { color: #86efac; }
#mk-c-vis { font-size: .66rem; }
@media (max-width: 991.98px) {
  .mk-vows-wrap > summary {
    display: flex; align-items: center; gap: .5rem; list-style: none; cursor: pointer;
    padding: .55rem .8rem; border-radius: .7rem; border: 1px solid var(--ts-line); background: var(--ts-card);
    font-size: .78rem; font-weight: 700; color: var(--ts-ink);
  }
  .mk-vows-wrap > summary .fa-solid, .mk-vows-wrap > summary svg { color: var(--ts-brand-t); }
  .mk-vows-wrap[open] > summary { margin-bottom: .5rem; }
  /* The server list becomes a strip of cards the thumb scrolls sideways, so the console is one
     swipe down rather than a whole list down. */
  .mk-servers { flex-direction: row; overflow-x: auto; overflow-y: hidden; max-height: none; padding-bottom: .35rem; scrollbar-width: thin; }
  .mk-servers .mk-row { flex: 0 0 15rem; }
  .mk-servers-empty { width: 100%; }
}
@media (max-width: 575.98px) {
  /* Each route becomes a card: method and path on top, the answer, then the buttons in a row
     where a thumb can reach them - instead of a table whose actions sit off the right edge. */
  .mk-table thead { display: none; }
  .mk-table, .mk-table tbody, .mk-table tr, .mk-table td { display: block; width: 100%; }
  .mk-table tbody tr { padding: .6rem .8rem; border-bottom: 1px solid var(--ts-line); }
  .mk-table tbody tr:last-child { border-bottom: 0; }
  .mk-table tbody td { padding: .15rem 0; border-bottom: 0; }
  .mk-table tbody tr.mk-r.is-sel td { border-bottom-color: transparent; }
  .mk-table td.mk-td-ans { white-space: normal; }
  .mk-table td.mk-td-acts { display: flex; gap: .4rem; justify-content: flex-start; padding-top: .45rem; white-space: normal; }
  .mk-td-acts .ts-mini + .ts-mini { margin-left: 0; }
  .mk-table tr.mk-r-empty td { padding: .6rem 0; }
}