/* Weighted-graph applets (applets/mst.js): Kruskal and Prim, Prim on a table,
 * the Chinese postman and the travelling salesman. Shared classes are in
 * maths-applets.css. Colour: ink is the graph, tangerine what has been chosen,
 * deep teal what is being looked at, gold the cycle or the bound. */

.mst-edge .mst-hit { stroke: transparent; stroke-width: 28; stroke-linecap: round; fill: none; }
.mst-edge .mst-line { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.mst-edge .mst-twin { stroke: transparent; stroke-width: 0; fill: none; }
.mst-edge .mst-tag { fill: var(--paper); stroke: var(--line); stroke-width: 1; }
.mst-edge .mst-w { font-size: 13px; font-weight: 800; fill: var(--ink); pointer-events: none; }
.mst-edge.is-take .mst-line { stroke: var(--tangerine); stroke-width: 5; }
.mst-edge.is-take .mst-tag { stroke: var(--tangerine); stroke-width: 2; }
.mst-edge.is-cand .mst-line, .mst-edge.is-cur .mst-line { stroke: var(--teal-deep); stroke-width: 4; }
.mst-edge.is-cand .mst-tag, .mst-edge.is-cur .mst-tag { stroke: var(--teal-deep); stroke-width: 2; }
.mst-edge.is-rej .mst-line { stroke: var(--muted); stroke-width: 1.6; stroke-dasharray: 5 5; }
.mst-edge.is-rej .mst-w { fill: var(--muted); font-weight: 600; text-decoration: line-through; }
.mst-edge.is-unused .mst-line { stroke: var(--muted); stroke-width: 1.6; }
.mst-edge.is-unused .mst-w { fill: var(--muted); font-weight: 600; }
.mst-edge.is-cyc .mst-line { stroke: var(--gold); stroke-width: 6; }
.mst-edge.is-cyc .mst-tag { stroke: var(--gold); stroke-width: 2; }
.mst-edge[role="button"] { cursor: pointer; }
.mst-edge[role="button"]:hover .mst-tag { stroke: var(--ink); }
.mst-edge:focus { outline: none; }
.mst-edge:focus-visible .mst-tag { stroke: var(--ink); stroke-width: 3; }
.mst-edge:focus-visible .mst-line { stroke-width: 5; }

.mst-vc { fill: var(--paper); stroke: var(--ink); stroke-width: 2.5; }
.mst-vt { font-size: 15px; font-weight: 800; fill: var(--ink); pointer-events: none; }
.mst-vert.is-in .mst-vc { fill: color-mix(in srgb, var(--tangerine) 38%, var(--paper)); }
.mst-vert.is-start .mst-vc { stroke-width: 4.5; }

.mst-start { display: grid; gap: 4px; justify-items: start; }
.mst-start[hidden], [data-listwrap][hidden], .mst-list[hidden], .mca-help[hidden] { display: none; }

.mst-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mst-chip { padding: 4px 9px; border: 2px solid var(--line); border-radius: 999px; background: var(--paper); font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.mst-chip b { font-weight: 800; }
.mst-chip.is-take { border-color: var(--tangerine); background: color-mix(in srgb, var(--tangerine) 18%, var(--paper)); }
.mst-chip.is-rej { border-style: dashed; border-color: var(--muted); color: var(--muted); text-decoration: line-through; }
.mst-chip.is-cur { border-color: var(--teal-deep); box-shadow: 0 0 0 2px var(--teal-deep); }
.mst-chip.is-unused { color: var(--muted); }

.mst-start .mca-seg { flex-wrap: nowrap; }
.mst-start .mca-seg button { min-width: 34px; padding: 0 8px; }

/* Prim on a table. */
.mst-table { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.mst-table th, .mst-table td { padding: 0; text-align: center; }
.mst-table thead th { height: 34px; border-radius: 8px; font-size: 1rem; font-weight: 800; color: var(--ink); }
.mst-table tbody th { width: 2.4em; border-radius: 8px; font-size: 1rem; font-weight: 800; color: var(--ink); }
.mst-table thead th.is-in { background: var(--tangerine); color: var(--ink); }
.mst-table tbody th.is-out { color: var(--muted); text-decoration: line-through; }
.mst-cell { display: block; width: 100%; min-height: 40px; padding: 0; border: 2px solid var(--line); border-radius: 8px; background: var(--paper); font-size: 1rem; font-weight: 700; color: var(--ink); }
.mst-cell:disabled { opacity: 1; cursor: default; }
.mst-table td.is-out .mst-cell { border-color: transparent; background: color-mix(in srgb, var(--ink) 7%, var(--paper)); color: var(--muted); font-weight: 500; }
.mst-table td.is-pick .mst-cell { border-color: var(--teal-deep); background: color-mix(in srgb, var(--teal) 16%, var(--paper)); }
.mst-table td.is-box .mst-cell { border-width: 4px; border-color: var(--tangerine); background: color-mix(in srgb, var(--tangerine) 24%, var(--paper)); color: var(--ink); font-weight: 800; }
.mst-table td.is-box.is-out .mst-cell { color: var(--ink); }
.mst-table .mst-cell:not(:disabled) { cursor: pointer; }
.mst-table .mst-cell:not(:disabled):hover { border-color: var(--ink); }
.mst-table .mst-cell:focus-visible { outline: 3px solid var(--tangerine); outline-offset: 1px; }
.mst-table tr:has(th.is-out) .mst-cell { text-decoration: line-through; text-decoration-thickness: 1px; }
.mst-table tr:has(th.is-out) td.is-box .mst-cell { text-decoration: none; }

/* The Chinese postman: degrees, odd vertices, repeated edges, the choices. */
.mst-vert.is-odd .mst-vc { fill: color-mix(in srgb, var(--tangerine) 38%, var(--paper)); }
.mst-degbox { fill: var(--paper); stroke: var(--teal-deep); stroke-width: 1.6; }
.mst-degtext { font-size: 12px; font-weight: 800; fill: var(--teal-deep); pointer-events: none; }
.mst-vert.is-odd .mst-degbox { fill: var(--tangerine); stroke: var(--ink); }
.mst-vert.is-odd .mst-degtext { fill: var(--ink); }
.mst-edge.is-rep .mst-twin { stroke: var(--tangerine); stroke-width: 3.4; stroke-linecap: round; }
.mst-edge.is-rep .mst-line { stroke-width: 3; }
.mst-edge.is-rep .mst-tag { stroke: var(--tangerine); stroke-width: 2; }
[data-optwrap][hidden] { display: none; }
.mst-opts { display: grid; gap: 8px; }
.mst-opt { min-height: 44px; padding: 8px 14px; border: 2px solid var(--ink); border-radius: 12px; background: var(--paper); font-size: 0.95rem; font-weight: 700; line-height: 1.35; text-align: left; color: var(--ink); cursor: pointer; }
.mst-opt:hover { background: color-mix(in srgb, var(--gold) 14%, var(--paper)); }
.mst-opt[aria-pressed="true"] { border-color: var(--tangerine); background: color-mix(in srgb, var(--tangerine) 18%, var(--paper)); }
.mst-opt:focus-visible { outline: 3px solid var(--tangerine); outline-offset: 2px; }
.mst-edge.is-rep2 .mst-twin { stroke-width: 6; }

/* The travelling salesman: tour, deleted vertex, bounds. */
.mst-vert.is-here .mst-vc { fill: color-mix(in srgb, var(--gold) 55%, var(--paper)); }
.mst-vert.is-gone .mst-vc { fill: var(--paper); stroke: var(--muted); stroke-dasharray: 4 3; }
.mst-vert.is-gone .mst-vt { fill: var(--muted); }
.mst-vert[role="button"] { cursor: pointer; }
.mst-vert:focus { outline: none; }
.mst-vert:focus-visible .mst-vc { stroke: var(--tangerine); stroke-width: 4.5; }
.mst-edge.is-dead .mst-line { stroke: var(--muted); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: 0.55; }
.mst-edge.is-dead .mst-w { fill: var(--muted); font-weight: 500; }
.mst-edge.is-dead .mst-tag { opacity: 0.6; }
.mst-edge.is-lb .mst-line { stroke: var(--gold); stroke-width: 5; stroke-dasharray: none; opacity: 1; }
.mst-edge.is-lb .mst-tag { stroke: var(--gold); stroke-width: 2.4; opacity: 1; }
.mst-edge.is-lb .mst-w { fill: var(--ink); font-weight: 800; }
.mst-below { max-width: 380px; margin-top: 14px; }
.mst-table td.is-lbcell .mst-cell { border-width: 3px; border-color: var(--gold); background: color-mix(in srgb, var(--gold) 22%, var(--paper)); }
.mst-table td.is-out .mst-cell { text-decoration: line-through; text-decoration-thickness: 1px; }
.mst-table td.is-box .mst-cell { text-decoration: none; }
.mst-table thead th.is-out { color: var(--muted); text-decoration: line-through; }
.mst-table tbody th.is-in { background: var(--tangerine); }
.mst-stack > div { flex-direction: column; gap: 2px; }
.mst-stack dd { text-align: left; }