/* Markov chain calculator. Same tokens and grammar as the AHP and certainty-equivalent
   tools: numbered steps, a guided path through the inputs, then the results with the
   working shown. All rules are scoped under .mk-* so nothing leaks. */

.mk-wrap { max-width: 980px; margin: 0 auto; }
.mk-card {
    background: var(--bg-surface);
    border: 1px solid var(--rule-2);
    border-radius: var(--radius-3);
    padding: var(--space-8);
    box-shadow: var(--shadow-1);
}

.mk-step { padding-top: var(--space-8); margin-top: var(--space-8); border-top: 1px solid var(--rule-1); }
.mk-step:first-child { padding-top: 0; margin-top: 0; border-top: 0; }

.mk-block-title {
    font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600;
    letter-spacing: var(--tracking-wider);
    color: var(--amber-700); margin: 0 0 var(--space-4) 0;
    display: flex; align-items: center; gap: var(--space-2);
}
.mk-block-title .n {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: var(--radius-pill);
    background: var(--amber-50); color: var(--amber-700); border: 1px solid var(--amber-100);
    font-size: var(--text-sm); font-family: var(--font-serif); font-weight: 500;
}

.mk-hint { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--fg-3); margin: var(--space-3) 0 0 0; line-height: var(--lh-relaxed); max-width: 74ch; }
.mk-mini { font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; color: var(--navy-600); background: none; border: 0; cursor: pointer; padding: 4px 0; }
.mk-mini:hover:not(:disabled) { color: var(--amber-600); }
.mk-mini:disabled { opacity: .4; cursor: not-allowed; }

/* ---- step 1: the states ---- */
.mk-state-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.mk-state-row { display: flex; align-items: center; gap: var(--space-2); }
.mk-state-num { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3); width: 22px; text-align: right; flex: 0 0 auto; }
.mk-state-row input[type="text"] {
    flex: 1 1 auto; min-width: 0;
    font-family: var(--font-sans); font-size: var(--text-sm); color: var(--fg-1);
    background: var(--bg-page); border: 1px solid var(--rule-3); border-radius: var(--radius-1);
    padding: 9px 11px;
}
.mk-state-row input[type="text"]:focus { outline: none; border-color: var(--navy-600); box-shadow: var(--shadow-focus); }
.mk-x {
    flex: 0 0 auto; width: 32px; height: 32px; border: 1px solid var(--rule-3);
    background: var(--bg-surface); color: var(--fg-3); border-radius: var(--radius-1);
    cursor: pointer; font-size: 17px; line-height: 1; transition: all var(--dur-fast) var(--ease-out);
}
.mk-x:hover:not(:disabled) { color: var(--danger); border-color: var(--danger); }
.mk-x:disabled { opacity: .35; cursor: not-allowed; }

/* ---- step 2: the guided transition wizard ---- */
.mk-modebar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.mk-modes { display: inline-flex; border: 1px solid var(--rule-3); border-radius: var(--radius-2); overflow: hidden; }
.mk-mode-btn {
    font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500; color: var(--fg-2);
    background: var(--bg-surface); border: 0; padding: 8px 16px; cursor: pointer;
    transition: all var(--dur-fast) var(--ease-out);
}
.mk-mode-btn + .mk-mode-btn { border-left: 1px solid var(--rule-3); }
.mk-mode-btn:not(.active):hover { background: var(--slate-50); color: var(--fg-1); }
.mk-mode-btn.active { background: var(--navy-900); color: var(--fg-on-dark); }

/* the rail of from-states, one per wizard step */
.mk-rail { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.mk-rail-btn {
    font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 500;
    color: var(--fg-2); background: var(--bg-page);
    border: 1px solid var(--rule-2); border-radius: var(--radius-pill);
    padding: 5px 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    transition: all var(--dur-fast) var(--ease-out);
}
.mk-rail-btn:hover { border-color: var(--rule-3); color: var(--fg-1); }
.mk-rail-btn.active { background: var(--navy-900); border-color: var(--navy-900); color: var(--fg-on-dark); }
.mk-rail-btn .tick { font-size: 11px; color: var(--success); }
.mk-rail-btn.active .tick { color: var(--amber-300); }
.mk-rail-btn .warn { font-size: 11px; color: var(--danger); }
.mk-rail-btn.active .warn { color: var(--amber-300); }

.mk-from-head { font-family: var(--font-serif); font-size: var(--text-lg); color: var(--navy-900); margin: 0 0 var(--space-1) 0; }
.mk-from-sub { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--fg-2); margin: 0 0 var(--space-5) 0; max-width: 68ch; line-height: var(--lh-relaxed); }

.mk-trans-row { display: grid; grid-template-columns: minmax(120px, 1.2fr) 2fr minmax(88px, auto); gap: var(--space-4); align-items: center; padding: var(--space-3) 0; border-top: 1px solid var(--rule-1); }
.mk-trans-row:first-child { border-top: 0; }
.mk-trans-label { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--fg-1); display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.mk-trans-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-trans-row input[type="range"] { width: 100%; accent-color: var(--amber-500); cursor: pointer; }
.mk-num {
    width: 100%; font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg-1);
    background-color: var(--bg-page); border: 1px solid var(--rule-1); border-radius: var(--radius-1);
    padding: 6px 8px; text-align: center; -moz-appearance: textfield;
}
.mk-num:focus { outline: none; border-color: var(--navy-600); box-shadow: var(--shadow-focus); }
.mk-num.bad { border-color: var(--danger); }

.mk-rowsum { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-4); font-family: var(--font-mono); font-size: var(--text-sm); }
.mk-rowsum.ok { color: var(--success); }
.mk-rowsum.bad { color: var(--danger); }
.mk-wizard-nav { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; align-items: center; }

/* ---- full matrix view ---- */
.mk-matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.mk-matrix { border-collapse: collapse; width: 100%; font-family: var(--font-sans); font-size: var(--text-sm); }
table.mk-matrix th, table.mk-matrix td { border: 1px solid var(--rule-2); padding: 4px; text-align: center; min-width: 96px; }
table.mk-matrix thead th { background: var(--bg-sunken); color: var(--fg-1); font-weight: 600; font-size: var(--text-xs); }
table.mk-matrix thead th.mk-corner { min-width: 150px; text-align: left; color: var(--fg-3); font-weight: 500; padding: 8px; }
table.mk-matrix tbody th { background: var(--bg-sunken); color: var(--fg-1); font-weight: 600; font-size: var(--text-xs); text-align: left; padding: 6px 8px; min-width: 150px; }
table.mk-matrix td.mk-sum { font-family: var(--font-mono); color: var(--fg-2); background: var(--bg-sunken); }
table.mk-matrix td.mk-sum.bad { color: var(--danger); font-weight: 600; }
table.mk-matrix td.mk-sum.ok { color: var(--success); }

/* ---- results ---- */
.mk-diagram-wrap { margin: 0 0 var(--space-6); overflow-x: auto; }
.mk-diagram { width: 100%; max-width: 620px; height: auto; display: block; margin: 0 auto; }
.mk-node { fill: var(--bg-page); stroke: var(--navy-900); stroke-width: 1.5px; }
.mk-node-label { font-family: var(--font-sans); font-size: 15px; font-weight: 600; fill: var(--navy-900); text-anchor: middle; }
.mk-node-share { font-family: var(--font-mono); font-size: 12.5px; fill: var(--amber-700); text-anchor: middle; }
.mk-edge { fill: none; stroke: var(--slate-400); stroke-width: 1.4px; }
.mk-edge-strong { stroke: var(--navy-600); }
.mk-edge-label {
    font-family: var(--font-mono); font-size: 13px; fill: var(--fg-2); text-anchor: middle;
    paint-order: stroke; stroke: var(--bg-surface); stroke-width: 3.5px; stroke-linejoin: round;
}
.mk-arrow { fill: var(--slate-400); }
.mk-arrow-strong { fill: var(--navy-600); }
.mk-diagram-note { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--fg-3); margin: 0 0 var(--space-6) 0; }

.mk-dist-row { margin-bottom: var(--space-3); }
.mk-dist-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--fg-1); gap: var(--space-2); }
.mk-dist-top .nm { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.mk-dist-top .nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-dist-top .pct { font-family: var(--font-mono); color: var(--fg-1); font-weight: 600; font-size: var(--text-md); flex: 0 0 auto; }
.mk-dist-track { height: 12px; background: var(--slate-100); border-radius: var(--radius-1); overflow: hidden; }
.mk-dist-fill { height: 100%; background: var(--navy-600); border-radius: var(--radius-1); transition: width var(--dur-normal) var(--ease-out); }
.mk-dist-fill.top { background: var(--amber-500); }

.mk-verdict {
    margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border-radius: var(--radius-2);
    font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--lh-relaxed);
}
.mk-verdict.ok { background: rgba(46,110,63,.08); border: 1px solid rgba(46,110,63,.3); color: var(--success); }
.mk-verdict.warn { background: var(--bg-sunken); border: 1px solid var(--rule-2); color: var(--fg-2); }
.mk-verdict.bad { background: rgba(156,59,59,.08); border: 1px solid rgba(156,59,59,.3); color: var(--danger); }

.mk-nstep-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-2); }
.mk-nstep-label { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--fg-1); }
.mk-nstep-val { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--amber-700); font-weight: 600; }
.mk-select {
    font-family: var(--font-sans); font-size: var(--text-sm); color: var(--fg-1);
    background-color: var(--bg-page); border: 1px solid var(--rule-3); border-radius: var(--radius-1);
    padding: 7px 10px; cursor: pointer;
}
.mk-select:focus { outline: none; border-color: var(--navy-600); box-shadow: var(--shadow-focus); }
#mkSteps { width: 100%; accent-color: var(--amber-500); cursor: pointer; margin-bottom: var(--space-5); }

.mk-details { margin-top: var(--space-4); }
.mk-details > summary {
    cursor: pointer; font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600;
    color: var(--navy-600); padding: var(--space-2) 0; list-style: none;
}
.mk-details > summary::-webkit-details-marker { display: none; }
.mk-details > summary::before { content: "\25B8\00A0"; color: var(--amber-600); }
.mk-details[open] > summary::before { content: "\25BE\00A0"; }
.mk-details > summary:hover { color: var(--amber-600); }
.mk-work { margin-top: var(--space-3); }
.mk-work .mk-line { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-2); margin: 2px 0; line-height: var(--lh-relaxed); }
.mk-work .mk-line b { color: var(--fg-1); }
.mk-work .mk-note { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--fg-3); margin: 0 0 var(--space-3) 0; line-height: var(--lh-relaxed); max-width: 74ch; }
.mk-work .mk-formula {
    font-family: var(--font-mono); font-size: var(--text-xs); color: var(--navy-900);
    background: var(--bg-sunken); border: 1px solid var(--rule-1); border-radius: var(--radius-1);
    padding: var(--space-2) var(--space-3); margin: 0 0 var(--space-3) 0; display: inline-block;
}
.mk-mat-wrap { overflow-x: auto; margin: var(--space-2) 0 var(--space-4); }
table.mk-mat { border-collapse: collapse; font-family: var(--font-mono); font-size: var(--text-xs); }
table.mk-mat th, table.mk-mat td { border: 1px solid var(--rule-2); padding: 3px 8px; text-align: center; color: var(--fg-2); white-space: nowrap; }
table.mk-mat thead th, table.mk-mat tbody th { background: var(--bg-sunken); color: var(--fg-1); font-weight: 600; }
table.mk-mat tbody tr.mk-final td { color: var(--fg-1); font-weight: 600; background: var(--amber-50); }

/* Results-moment next step, in the results' own typography. No panel, no tint. */
.mk-next {
    margin: var(--space-6) 0 0 0;
    font-family: var(--font-sans); font-size: var(--text-sm); color: var(--fg-2);
    line-height: var(--lh-relaxed); max-width: 70ch;
}
.mk-next a { color: var(--fg-link); text-decoration: underline; text-underline-offset: 3px; }
.mk-next a:hover { color: var(--navy-900); }

.mk-actions { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; align-items: center; }
.mk-actions .btn-secondary { font-size: var(--text-sm); }
.mk-action-link {
    font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 500;
    color: var(--navy-600); text-decoration: none; padding: 4px 0;
}
.mk-action-link:hover { color: var(--amber-600); text-decoration: underline; text-underline-offset: 3px; }
.mk-copied { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--success); }

.mk-faq-item { border-top: 1px solid var(--rule-2); padding: var(--space-5) 0; }
.mk-faq-item:first-child { border-top: 0; }
.mk-faq-q { font-family: var(--font-serif); font-size: var(--text-lg); color: var(--navy-900); margin: 0 0 var(--space-2) 0; }
.mk-faq-a { font-family: var(--font-sans); font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--fg-2); margin: 0; max-width: 72ch; }
.mk-cta-list { columns: 2; column-gap: var(--space-10); }

@media (max-width: 880px) {
    .mk-card { padding: var(--space-5); }
    .mk-cta-list { columns: 1; }
    .mk-trans-row { grid-template-columns: 1fr; gap: var(--space-2); }
    .mk-trans-row input[type="range"] { order: 3; }
    table.mk-matrix th, table.mk-matrix td { min-width: 88px; }
    table.mk-matrix thead th.mk-corner, table.mk-matrix tbody th { min-width: 128px; }
}