/* The graph-theory "Explore" applets (graphbuild, walk, walkcount,
 * randomwalk): vertices, edges and the little matrix tables. The shared
 * classes are in maths-applets.css. */

.mcg-edge { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.mcg-edge.is-used { stroke: var(--tangerine); stroke-width: 4.6; }
.mcg-arrow { fill: var(--ink); }
.mcg-deg { font-size: 12px; font-weight: 700; fill: var(--teal-deep); pointer-events: none; }
.mcg-step { font-size: 12px; font-weight: 800; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }

.mcg-v { outline: none; }
.mcg-v[role="button"] { cursor: pointer; }
.mcg-vc { fill: var(--paper); stroke: var(--ink); stroke-width: 2.6; }
.mcg-vt { font-size: 15px; font-weight: 800; fill: var(--ink); pointer-events: none; }
.mcg-ring { fill: none; stroke: var(--gold); stroke-width: 5; display: none; }
.mcg-v.is-odd .mcg-ring { display: inline; }
.mcg-v.is-sel .mcg-vc, .mcg-v.is-here .mcg-vc { fill: var(--tangerine); }
.mcg-v.is-seen .mcg-vc { fill: color-mix(in srgb, var(--tangerine) 24%, var(--paper)); }
.mcg-v.is-start .mcg-vc { stroke: var(--teal-deep); stroke-width: 4.4; }
.mcg-v.is-next .mcg-vc { stroke: var(--teal-deep); stroke-width: 3.2; stroke-dasharray: 5 3; }
.mcg-v.is-goal .mcg-vc { fill: var(--teal-deep); stroke: var(--teal-deep); }
.mcg-v.is-goal .mcg-vt { fill: var(--paper); }
.mcg-v.is-both .mcg-vc { fill: var(--tangerine); stroke: var(--teal-deep); stroke-width: 5; }
.mcg-v:focus-visible .mcg-vc { stroke: var(--teal-deep); stroke-width: 5; }

/* graphbuild: a vertex is a handle (drag it, press it to choose it), and an
 * edge has a wide invisible line to press to remove it. */
.mca-handle.mcg-vh { fill: var(--paper); stroke: var(--ink); stroke-width: 2.6; }
.mca-handle.mcg-vh.is-sel { fill: var(--tangerine); }
.mca-handle.mcg-vh:focus-visible { stroke: var(--teal-deep); stroke-width: 5; }
.mcg-letters .mcg-vt { pointer-events: none; }
.mcg-e { cursor: pointer; outline: none; }
.mcg-hitline { fill: none; stroke: transparent; stroke-width: 20; pointer-events: stroke; }
.mcg-e:hover .mcg-edge, .mcg-e:focus-visible .mcg-edge { stroke: var(--tangerine); stroke-width: 4; }
.mcg-scroll { max-width: 100%; overflow-x: auto; }
.mcg-matrix tfoot th, .mcg-matrix tfoot td { border-top: 1px solid var(--line); }
@media (max-width: 480px) {
    .mcg-scroll .mcg-matrix th, .mcg-scroll .mcg-matrix td { min-width: 1.6em; padding: 4px 3px; }
}

.mcg-mat { margin: 0; min-width: 0; }
.mcg-mat figcaption { margin: 0 0 4px; font-size: 0.86rem; font-weight: 700; color: var(--muted); }
.mcg-mats { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 18px 0 8px; }
.mcg-pair { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: start; margin-top: 18px; }
.mcg-help { margin: 0 0 8px; }

.mcg-matrix { border-collapse: separate; border-spacing: 0; font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.mcg-matrix th, .mcg-matrix td { min-width: 2.3em; padding: 5px 6px; text-align: center; }
.mcg-matrix thead th, .mcg-matrix tbody th { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.mcg-matrix td.is-zero { color: var(--muted); font-weight: 500; }
.mcg-matrix td.is-on { background: color-mix(in srgb, var(--tangerine) 28%, var(--paper)); color: var(--ink); font-weight: 800; }
.mcg-matrix td.is-first { border-left: 2px solid var(--ink); }
.mcg-matrix td.is-last { border-right: 2px solid var(--ink); }
.mcg-matrix td.mcg-sum, .mcg-matrix th.mcg-sum { border-left: 1px solid var(--line); color: var(--teal-deep); font-weight: 800; }
.mcg-matrix td.mcg-sum.is-last { border-right: 0; }

.mcg-walkshead { margin: 14px 0 8px; font-size: 1rem; font-weight: 800; color: var(--ink); }
.mcg-walks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.mcg-walks li { padding: 4px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); font-weight: 700; color: var(--ink); }
.mcg-times { color: var(--teal-deep); font-weight: 800; }

.mcg-rank { display: grid; gap: 4px; margin: 0; padding-left: 24px; font-weight: 700; color: var(--ink); }
.mcg-rank li::marker { color: var(--tangerine); font-weight: 800; }
.mcg-hist { margin-bottom: 12px; }

@media (max-width: 860px) {
    .mcg-pair { grid-template-columns: minmax(0, 1fr); }
}

.mcg-main { display: grid; gap: 16px; min-width: 0; }
.mcg-badge { fill: var(--teal-deep); stroke: var(--paper); stroke-width: 2; pointer-events: none; }
.mcg-badge-t { font-size: 11px; font-weight: 800; fill: var(--paper); pointer-events: none; }
.mcg-under { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 32px; align-items: start; margin: 18px 0 8px; }
.mcg-under .mcg-mats { margin: 0 0 8px; }
.mcg-walkbox { min-width: 0; }
.mcg-walkbox .mcg-walkshead { margin-top: 0; }
@media (max-width: 860px) {
    .mcg-under { grid-template-columns: minmax(0, 1fr); }
}