/* ============================================================================
   Makli Admin Console — console-only styles, layered on the shared design system
   (assets/makli-ui.css: tokens, shell, sidebar, cards, tables, forms, pills, notices).
   Everything here uses the shared --mk-* tokens, so light and dark both work, and every
   class is prefixed .mka- so it cannot collide with the shared sheet.
   Layout rule for the log explorer: nothing inside a row or its detail panel may widen the
   page — grid/flex children get min-width:0 and code blocks wrap.
   ========================================================================= */

.mk-admin { --mka-radius: var(--mk-r-xs, 10px); --mka-gap: var(--mk-s4, 16px); }
.mk-admin .mk-main-inner { max-width: 1240px; }
.mk-admin .mk-main { min-width: 0; }

/* Icons */
.mk-ico { width: 16px; height: 16px; flex: 0 0 auto; vertical-align: -3px; }
.mk-btn .mk-ico, .mka-linkbtn .mk-ico { width: 15px; height: 15px; }
.mk-empty .mk-ico { width: 38px; height: 38px; opacity: .35; margin-bottom: var(--mk-s3); }
.mk-notice > .mk-ico { width: 17px; height: 17px; margin-top: 1px; }
.mka-yes { color: var(--mk-ok); }

/* Accessibility helpers */
.mka-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mka-skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; padding: 8px 14px; background: var(--mk-surface); color: var(--mk-ink); border: 1px solid var(--mk-brand); border-radius: var(--mka-radius); }
.mka-skip:focus { left: 12px; }

/* ── Shell ───────────────────────────────────────────────────────────────── */
.mka-sidebar .mk-brand { position: relative; }
.mk-admin .mk-main-inner { max-width: 1240px; }
.mka-sidebar .mk-brand > span:not(.mk-brand-mark) { display: flex; flex-direction: column; line-height: 1.2; }
.mka-nav-close { display: none !important; }
.mk-topbar .mk-brand > span:last-child { font-size: 15px; }
.mka-sidebar .mk-sidebar-foot { display: flex; flex-direction: column; gap: 6px; }
.mka-logout { margin: 0; }
.mka-who { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--mka-radius); color: var(--mk-ink); min-width: 0; }
.mka-who:hover { background: var(--mk-surface-2); text-decoration: none; }
.mka-avatar { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; display: grid; place-items: center; background: var(--mk-brand-soft); color: var(--mk-brand); font-weight: 700; font-size: 13px; }
.mka-who-text { display: flex; flex-direction: column; min-width: 0; }
.mka-who-text strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mka-who-text small { font-size: 11.5px; color: var(--mk-ink-3); }

.mka-crumbrow { display: flex; align-items: center; gap: var(--mk-s3); margin-bottom: var(--mk-s3); min-width: 0; }
.mka-crumbs { min-width: 0; }
.mka-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--mk-ink-3); }
.mka-crumbs li { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.mka-crumbs li .mk-ico { width: 13px; height: 13px; }
.mka-crumbs span[aria-current] { color: var(--mk-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40ch; }
.mka-crumbs a { color: var(--mk-ink-2); }
.mka-head-text { min-width: 0; flex: 1 1 320px; }
.mka-head-text h1 { overflow-wrap: anywhere; }
.mka-head-text p .mk-pill { margin-right: 4px; }
.mka-head-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ── Toasts (shared .mk-toasts/.mk-toast + warn/info, close button) ─────── */
.mka-toast > .mk-ico { margin-top: 2px; flex: 0 0 auto; }
.mka-toast.is-warn { border-left: 4px solid var(--mk-warn); }
.mka-toast.is-info { border-left: 4px solid var(--mk-brand-2); }
.mka-toast.is-ok > .mk-ico { color: var(--mk-ok); } .mka-toast.is-err > .mk-ico { color: var(--mk-err); }
.mka-toast.is-warn > .mk-ico { color: var(--mk-warn); } .mka-toast.is-info > .mk-ico { color: var(--mk-brand-2); }
.mka-toast-msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mka-toast-x { background: none; border: 0; color: inherit; opacity: .7; cursor: pointer; padding: 2px; border-radius: 6px; }
.mka-toast-x:hover { opacity: 1; }
.mka-toast.is-hiding { opacity: 0; transform: translateY(6px); transition: opacity var(--mk-t-norm, 250ms), transform var(--mk-t-norm, 250ms); }

/* ── Confirm modal (shared dialog.mk-modal) ─────────────────────────────── */
.mka-modal .mk-modal-head h3 { overflow-wrap: anywhere; }
.mka-modal-body { margin: 0 0 var(--mk-s3); color: var(--mk-ink-2); overflow-wrap: anywhere; }
.mka-modal form { margin: 0; }

/* ── Auth pages ──────────────────────────────────────────────────────────── */
.mka-auth-card { max-width: 440px; }
.mka-auth-card code { overflow-wrap: anywhere; }
.mka-center { text-align: center; }
.mka-block { width: 100%; }
.mka-mt { margin-top: var(--mk-s4); }
.mka-mt-s { margin-top: 6px; }
.mka-linkbtn { background: none; border: 0; padding: 0; color: var(--mk-brand); font: inherit; font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.mka-linkbtn:hover { text-decoration: underline; }
.mka-otp { font-size: 22px !important; letter-spacing: 6px; text-align: center; font-variant-numeric: tabular-nums; }

/* ── KPIs, segmented range, grids ────────────────────────────────────────── */
.mka-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--mka-gap); margin-bottom: var(--mk-s5); }
.mka-kpis-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.mka-kpis .mk-stat { min-width: 0; }
.mka-stat-sub { margin-top: 4px; font-size: 12.5px; color: var(--mk-ink-2); }
.mka-stat-text { font-size: 16px; font-weight: 600; color: var(--mk-ink); padding-top: 6px; }
.mka-bad { color: var(--mk-err) !important; }
.mka-ok { color: var(--mk-ok); }
.mka-seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--mk-surface-2); border: 1px solid var(--mk-line); border-radius: var(--mka-radius); flex-wrap: wrap; }
.mka-seg a { padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--mk-ink-2); }
.mka-seg a:hover { color: var(--mk-ink); text-decoration: none; }
.mka-seg a.is-active { background: var(--mk-surface); color: var(--mk-ink); box-shadow: var(--mk-shadow-1); }
.mka-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mk-s5); align-items: start; }
.mka-grid-2 > * { min-width: 0; margin-bottom: 0; }
.mka-grid-2 + .mka-grid-2, .mka-grid-2 + .mk-card, .mk-card + .mka-grid-2 { margin-top: var(--mk-s5); }
.mka-grid-2 { margin-bottom: var(--mk-s5); }
.mka-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: var(--mk-s5); margin-bottom: var(--mk-s5); }
.mka-cards > .mk-card { margin: 0; min-width: 0; }
.mka-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mk-s3); flex-wrap: wrap; margin-bottom: var(--mk-s3); }
.mka-card-head > div:first-child { min-width: 0; flex: 1 1 260px; }
.mka-card-head h2 { margin: 0 0 4px; font-size: 16.5px; font-weight: 650; overflow-wrap: anywhere; }
.mka-card-head .mk-card-sub { margin: 0; }
.mka-h3 { margin: var(--mk-s4) 0 var(--mk-s2); font-size: 14px; font-weight: 650; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mka-pad { padding: var(--mk-s4) var(--mk-s6) var(--mk-s5); }
.mka-pad-x { padding: var(--mk-s5) var(--mk-s6) 0; }
.mk-card.is-flush > .mka-card-head { padding: var(--mk-s5) var(--mk-s6) 0; }

/* Outcome bars */
.mka-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mka-bars li { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13.5px; }
.mka-bar-label { color: var(--mk-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mka-bar { height: 10px; background: var(--mk-surface-2); border-radius: 999px; overflow: hidden; }
.mka-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--mk-brand); }
.mka-bar-fill.is-ok { background: var(--mk-ok); } .mka-bar-fill.is-warn { background: var(--mk-warn); }
.mka-bar-fill.is-err { background: var(--mk-err); } .mka-bar-fill.is-mute { background: var(--mk-ink-3); }
.mka-bar-num { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.mka-bar-num small { color: var(--mk-ink-3); font-weight: 500; }
.mka-w-0 { width: 0; } .mka-w-5 { width: 5%; } .mka-w-10 { width: 10%; } .mka-w-15 { width: 15%; } .mka-w-20 { width: 20%; }
.mka-w-25 { width: 25%; } .mka-w-30 { width: 30%; } .mka-w-35 { width: 35%; } .mka-w-40 { width: 40%; } .mka-w-45 { width: 45%; }
.mka-w-50 { width: 50%; } .mka-w-55 { width: 55%; } .mka-w-60 { width: 60%; } .mka-w-65 { width: 65%; } .mka-w-70 { width: 70%; }
.mka-w-75 { width: 75%; } .mka-w-80 { width: 80%; } .mka-w-85 { width: 85%; } .mka-w-90 { width: 90%; } .mka-w-95 { width: 95%; } .mka-w-100 { width: 100%; }
.mka-w-0 { min-width: 0; } .mka-w-5 { min-width: 4px; }

/* Lists */
.mka-list { list-style: none; margin: 0; padding: 0; }
.mka-list li { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--mk-line-soft); }
.mka-list li:last-child { border-bottom: 0; }
.mka-list-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.mka-list-main > * { min-width: 0; overflow-wrap: anywhere; }
.mka-list-side { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.mka-dim { color: var(--mk-ink-3); font-size: 12.5px; }
.mka-err-detail { font-size: 12.5px; color: var(--mk-ink-2); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.mka-strong { font-weight: 650; }
.mka-optional { font-weight: 400; color: var(--mk-ink-3); font-size: 12px; margin-left: 4px; }
.mka-break { overflow-wrap: anywhere; word-break: break-word; }
.mka-ellipsis { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%; }
code.mka-ellipsis { display: block; }
.mka-facts { margin: var(--mk-s4) 0; padding-left: 18px; color: var(--mk-ink-2); font-size: 13.5px; }
.mka-facts li { margin-bottom: 4px; }

/* Health checks */
.mka-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 10px 20px; }
.mka-checks li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--mk-line-soft); border-radius: var(--mka-radius); min-width: 0; }
.mka-checks li > span { display: flex; flex-direction: column; min-width: 0; font-size: 13.5px; }
.mka-checks li.is-ok > .mk-ico { color: var(--mk-ok); margin-top: 2px; }
.mka-checks li.is-bad { border-color: color-mix(in srgb, var(--mk-warn) 40%, transparent); background: color-mix(in srgb, var(--mk-warn) 6%, transparent); }
.mka-checks li.is-bad > .mk-ico { color: var(--mk-warn); margin-top: 2px; }
.mka-check-detail { color: var(--mk-ink-2); font-size: 12.5px; overflow-wrap: anywhere; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.mka-table { width: 100%; }
.mka-table td, .mka-table th { overflow-wrap: anywhere; }
.mka-fixed { table-layout: fixed; }
.mka-fixed td, .mka-fixed th { overflow: hidden; }
.mka-table th.mk-num, .mka-table td.mk-num { text-align: right; }
.mka-c-xs { width: 84px; } .mka-c-s { width: 120px; } .mka-c-m { width: 150px; } .mka-c-l { width: 290px; }
.mka-c-name { width: auto; } .mka-c-owner { width: 20%; } .mka-c-url { width: 22%; }
.mk-card.is-flush > h2 { padding: var(--mk-s5) var(--mk-s6) 0; margin-bottom: var(--mk-s3); }

/* ── Details-as-card (create forms, categories) ──────────────────────────── */
.mka-details > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px;
  margin: calc(var(--mk-s6) * -1); padding: var(--mk-s4) var(--mk-s6); border-radius: var(--mk-r-sm, 14px);
}
.mk-card.is-flush.mka-details > summary { margin: 0; }
.mka-details > summary::-webkit-details-marker { display: none; }
.mka-details > summary:hover { background: var(--mk-surface-2); }
.mka-details > summary > span { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.mka-details > summary > span small { color: var(--mk-ink-2); font-size: 12.5px; font-weight: 400; }
.mka-details > summary > .mk-ico:first-child { color: var(--mk-brand); }
.mka-details[open] > summary { margin-bottom: var(--mk-s4); border-bottom: 1px solid var(--mk-line-soft); border-radius: var(--mk-r-sm, 14px) var(--mk-r-sm, 14px) 0 0; }
.mk-card.is-flush.mka-details[open] > summary { margin-bottom: 0; }
.mka-chev { transition: transform var(--mk-t-norm, 250ms) var(--mk-ease, ease); color: var(--mk-ink-3); }
.mka-details[open] > summary .mka-chev { transform: rotate(180deg); }
.mka-details > .mka-form, .mka-details > p, .mka-details > form { margin-top: var(--mk-s5); }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.mka-form { margin: 0; }
.mka-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 0 var(--mk-s4); }
.mka-form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mka-form-grid > * { min-width: 0; }
.mka-span-2 { grid-column: span 2; } .mka-span-3 { grid-column: 1 / -1; }
.mka-form-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: var(--mk-s2); }
.mka-fieldset { border: 0; padding: 0; margin: 0 0 var(--mk-s4); min-width: 0; }
.mka-fieldset legend { font-size: 13px; font-weight: 600; margin-bottom: 8px; padding: 0; }
.mka-scope { margin: 4px 0 12px 26px; }
.mka-inline-grid { display: flex; align-items: flex-end; gap: var(--mk-s3); flex-wrap: wrap; }
.mka-inline-grid .mk-field { margin-bottom: 0; }
.mka-inline-grid > .mk-btn { margin-bottom: 1px; }
.mka-grow { flex: 1 1 240px; min-width: 0; }
.mka-narrow { flex: 0 0 110px; }
.mka-inline-form { display: inline-flex; margin: 0; align-items: center; gap: 6px; }
.mka-inline-form select { padding: 5px 8px; border: 1px solid var(--mk-line); border-radius: 8px; background: var(--mk-input-bg); color: var(--mk-ink); font: inherit; font-size: 13px; max-width: 100%; }
.mka-btn-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mka-checks-row { display: flex; flex-wrap: wrap; gap: 0 10px; }
.mka-checks-row .mk-check { flex: 0 1 auto; }
.mk-field select { appearance: auto; }
.mk-field input[readonly] { background: var(--mk-surface-2); color: var(--mk-ink-2); }
.mk-field input[disabled], .mk-field select[disabled] { opacity: .7; }
.mka-mono-area, .mk-field textarea.mk-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }

/* Filters bar */
.mka-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--mk-s3); margin-bottom: var(--mk-s4); padding: var(--mk-s4); background: var(--mk-surface); border: 1px solid var(--mk-line); border-radius: var(--mk-r-sm, 14px); }
.mka-filters .mk-field { margin: 0; flex: 0 1 180px; min-width: 0; }
.mka-filters .mk-field.mka-grow { flex: 1 1 240px; }
.mka-filters .mk-field.mka-narrow { flex: 0 1 110px; }
.mka-filters .mk-field label { font-size: 12px; color: var(--mk-ink-2); }
.mka-filter-actions { display: flex; align-items: center; gap: 10px; }

/* Pager */
.mka-pager { margin: var(--mk-s2) 0 var(--mk-s6); padding: var(--mk-s3) 0; }
.mka-pager-links { display: flex; align-items: center; gap: 8px; }
.mka-pager-info, .mka-pager-page { font-size: 13px; color: var(--mk-ink-2); }
p.mka-pager-info { margin: var(--mk-s3) 0 var(--mk-s6); }

.mk-tabs .mk-tab { white-space: nowrap; }

/* Definition lists */
.mka-dl { display: grid; grid-template-columns: minmax(110px, max-content) minmax(0, 1fr); gap: 8px 16px; margin: 0 0 var(--mk-s3); font-size: 13.5px; }
.mka-dl dt { color: var(--mk-ink-2); font-weight: 500; }
.mka-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* Danger zone, one-time secrets */
.mka-danger { border-color: color-mix(in srgb, var(--mk-err) 35%, var(--mk-line)); }
.mka-danger > h2 { color: var(--mk-err); }
.mk-btn.mka-danger-text { color: var(--mk-err) !important; }
.mka-once > div { min-width: 0; }
.mka-secret { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0; padding: 8px 10px; background: var(--mk-surface); border: 1px dashed var(--mk-line); border-radius: 8px; color: var(--mk-ink); }
.mka-secret code { flex: 1 1 260px; min-width: 0; font-size: 13px; }
.mka-resolved { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 var(--mk-s3); padding: 8px 12px; background: var(--mk-surface-2); border-radius: 8px; font-size: 13px; color: var(--mk-ink-2); }
.mka-resolved > span { min-width: 0; overflow-wrap: anywhere; }
.mka-resolved > .mk-ico { margin-top: 2px; }

/* ── Actions & Intents ───────────────────────────────────────────────────── */
.mka-cat > summary { padding: var(--mk-s4) var(--mk-s5); }
.mka-actions { list-style: none; margin: 0; padding: 0; }
.mka-action { display: grid; grid-template-columns: 92px minmax(0, 1fr) 180px; gap: var(--mk-s4); padding: var(--mk-s4) var(--mk-s5); border-top: 1px solid var(--mk-line-soft); align-items: start; }
.mka-action.is-off .mka-action-main { opacity: .6; }
.mka-action-main { min-width: 0; }
.mka-action-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.mka-action-title code { overflow-wrap: anywhere; }
.mka-action-sum { margin: 4px 0 8px; font-size: 13.5px; color: var(--mk-ink-2); }
.mka-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mka-tag { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--mk-surface-2); color: var(--mk-ink-2); border: 1px solid var(--mk-line-soft); }
.mka-action-usage { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; text-align: right; }
.mka-usage-n { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mka-usage-n small { font-size: 12px; font-weight: 500; color: var(--mk-ink-3); }
.mka-usage-split { color: var(--mk-ink-2); }
.mka-more { margin-top: 8px; }
.mka-more > summary { cursor: pointer; font-size: 13px; color: var(--mk-brand); font-weight: 600; display: inline-block; }
.mka-more[open] > summary { margin-bottom: 8px; }
.mka-params { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--mk-ink-2); }
.mka-params li { margin-bottom: 4px; overflow-wrap: anywhere; }

.mka-cat-switch { margin-left: auto; }
.mka-action-switch .mk-switch { min-height: 24px; }
.mka-savebar {
  position: sticky; bottom: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: var(--mk-s4) 0 var(--mk-s6); padding: 12px var(--mk-s4); background: var(--mk-surface); border: 1px solid var(--mk-line);
  border-radius: var(--mk-r-sm, 14px); box-shadow: var(--mk-shadow-2);
}

/* ── Models ──────────────────────────────────────────────────────────────── */
.mka-roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: var(--mk-s5); }
.mka-roles > .mk-card { margin: 0; min-width: 0; }
.mka-role.is-default { border-color: var(--mk-brand-line); grid-column: 1 / -1; }
.mka-test { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.mka-test-out { font-size: 12.5px; color: var(--mk-ink-2); overflow-wrap: anywhere; max-width: 100%; }
.mka-test-out.is-ok { color: var(--mk-ok); } .mka-test-out.is-err { color: var(--mk-err); }
.mka-test-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: var(--mk-s3); }
.mka-test-row select { padding: 6px 8px; border: 1px solid var(--mk-line); border-radius: 8px; background: var(--mk-input-bg); color: var(--mk-ink); font: inherit; font-size: 13px; max-width: 100%; }
.mka-models td { vertical-align: top; }

/* ── Log explorer ────────────────────────────────────────────────────────── */
.mka-log { background: var(--mk-surface); border: 1px solid var(--mk-line); border-radius: var(--mk-r-sm, 14px); overflow: hidden; margin-bottom: var(--mk-s3); }
.mka-log-head, .mka-log-row { display: grid; gap: 12px; align-items: center; padding: 11px var(--mk-s4); }
.mka-log-head { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--mk-ink-3); border-bottom: 1px solid var(--mk-line); }
.mka-log-head > span, .mka-log-row > span { min-width: 0; overflow: hidden; }
.mka-log-runs { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, .8fr); }
.mka-log-chats { grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, .8fr); }
.mka-log-intents { grid-template-columns: minmax(0, .5fr) minmax(0, 1.2fr) minmax(0, 2.4fr) minmax(0, .9fr) minmax(0, .8fr); }
.mka-log-api { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, .8fr); }
.mka-log-audit { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, .8fr); }
.mka-entry { border-bottom: 1px solid var(--mk-line-soft); min-width: 0; }
.mka-entry:last-child { border-bottom: 0; }
.mka-entry > summary { list-style: none; cursor: pointer; font-size: 13.5px; }
.mka-entry > summary::-webkit-details-marker { display: none; }
.mka-entry > summary:hover { background: var(--mk-surface-2); }
.mka-entry[open] > summary { background: var(--mk-brand-soft); }
.mka-entry-body { padding: var(--mk-s4) var(--mk-s4) var(--mk-s5); border-top: 1px solid var(--mk-line-soft); background: var(--mk-bg); min-width: 0; overflow-wrap: anywhere; display: grid; gap: var(--mk-s3); }
.mka-entry-body > * { min-width: 0; margin: 0; }
.mka-sub h4 { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--mk-ink-3); }
.mka-steps, .mka-calls { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mka-step, .mka-calls > li { padding: 10px 12px; background: var(--mk-surface); border: 1px solid var(--mk-line-soft); border-radius: var(--mka-radius); display: grid; gap: 8px; min-width: 0; }
.mka-step-head, .mka-call-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; min-width: 0; }
.mka-step-head code, .mka-call-head span { overflow-wrap: anywhere; min-width: 0; }

/* Code blocks: always wrap, never widen, scroll when long. */
.mka-code { min-width: 0; border: 1px solid var(--mk-line); border-radius: var(--mka-radius); background: var(--mk-surface); overflow: hidden; }
.mka-code-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--mk-ink-3); border-bottom: 1px solid var(--mk-line-soft); background: var(--mk-surface-2); }
.mka-copy { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; color: var(--mk-brand); font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.mka-copy:hover { background: var(--mk-brand-soft); }
.mka-copy .mk-ico { width: 13px; height: 13px; }
.mka-code .mka-pre {
  margin: 0; padding: 10px 12px; max-height: 360px; overflow: auto; min-width: 0;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
  border: 0; border-radius: 0; background: transparent; tab-size: 2;
}

/* Chat bubbles */
.mka-chat { display: grid; gap: 8px; }
.mka-bubble { max-width: min(640px, 100%); padding: 10px 12px; border-radius: 12px; border: 1px solid var(--mk-line-soft); background: var(--mk-surface); min-width: 0; }
.mka-bubble p { margin: 4px 0 0; font-size: 13.5px; overflow-wrap: anywhere; }
.mka-bubble.is-makli { justify-self: end; background: var(--mk-brand-soft); border-color: var(--mk-brand-line); }

/* ── Debugger ────────────────────────────────────────────────────────────── */
.mka-result { border-color: var(--mk-brand-line); scroll-margin-top: 16px; }
.mka-gates { list-style: none; margin: 0 0 var(--mk-s4); padding: 0; display: grid; gap: 6px; }
.mka-gates li { display: grid; grid-template-columns: minmax(0, 180px) max-content minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 8px 10px; border: 1px solid var(--mk-line-soft); border-radius: 8px; font-size: 13.5px; }
.mka-gate-name { font-weight: 600; }
.mka-gate-detail { color: var(--mk-ink-2); overflow-wrap: anywhere; min-width: 0; }
.mka-steps-num { margin: 0 0 var(--mk-s4); padding-left: 20px; font-size: 13.5px; color: var(--mk-ink-2); }
.mka-steps-num li { margin-bottom: 8px; }
.is-working { opacity: .7; pointer-events: none; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .mka-form-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mka-action { grid-template-columns: 80px minmax(0, 1fr); }
  .mka-action-usage { grid-column: 2; text-align: left; flex-direction: row; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
}

@media (max-width: 900px) {
  /* The drawer itself is the shared .mk-shell.is-drawer; only the close button is ours. */
  .mka-nav-close { display: inline-grid !important; margin-left: auto; }
  .mka-grid-2 { grid-template-columns: minmax(0, 1fr); }
  .mka-grid-2 + .mka-grid-2 { margin-top: 0; }
  .mka-gates li { grid-template-columns: minmax(0, 1fr) max-content; }
  .mka-gate-detail { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .mk-admin .mk-main { padding: var(--mk-s4) var(--mk-s4) var(--mk-s7); }
  .mka-form-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .mka-span-2 { grid-column: 1 / -1; }
  .mka-bars li { grid-template-columns: minmax(0, 110px) minmax(0, 1fr) auto; }

  /* Tables → cards is the shared .mk-table.is-cards; fixed column widths no longer apply. */
  .mk-table.is-cards colgroup { display: none; }
  .mk-table.is-cards.mka-fixed { table-layout: auto; }
  .mk-table.is-cards td .mka-ellipsis { white-space: normal; overflow-wrap: anywhere; }
  .mk-table.is-cards td > * { min-width: 0; }

  .mka-log-head { display: none; }
  .mka-log-row { grid-template-columns: minmax(0, 1fr) !important; gap: 4px; }
  .mka-log-row > span { display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); gap: 8px; white-space: normal; }
  .mka-log-row > span::before { content: attr(data-label); font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--mk-ink-3); }
  .mka-log-row > span.mka-ellipsis { white-space: normal; overflow-wrap: anywhere; }
  .mka-log-row > span > .mk-pill { justify-self: start; }

  .mka-action { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .mka-action-usage { grid-column: 1; }
  .mka-dl { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .mka-dl dd { margin-bottom: 8px; }
  .mka-filters { padding: var(--mk-s3); }
  .mka-filters .mk-field, .mka-filters .mk-field.mka-narrow { flex: 1 1 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .mka-toast, .mka-chev { animation: none !important; transition: none !important; }
}