#tension-app{--tension-color-0:#4aa798;--tension-color-1:#9fbe78;--tension-color-2:#d4c16b;--tension-color-3:#df9555;--tension-color-4:#c95b65}
.tension-toolbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;align-items:start;margin:1.4rem 0}
.tension-toolbar label{display:grid;gap:.3rem;min-width:0;line-height:1.4}
.tension-toolbar input,.tension-toolbar select{box-sizing:border-box;width:100%;min-width:0;height:2.9rem;padding:.6rem;font:inherit;background:var(--card-bg,#182538);color:inherit;border:1px solid #78858f;border-radius:.3rem}
.tension-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem}
#tension-map{display:block;width:100%;height:auto;aspect-ratio:2/1;background:#233e52;touch-action:none;cursor:grab;border-radius:.5rem}
#tension-map [data-region]{stroke:#152b3b;stroke-width:.35;vector-effect:non-scaling-stroke;fill:#87939e;cursor:pointer}
#tension-map .b0{fill:var(--tension-color-0)}
#tension-map .b1{fill:var(--tension-color-2)}
#tension-map .b2{fill:var(--tension-color-3)}
#tension-map .b3{fill:var(--tension-color-4)}
#tension-map .unknown{fill:url(#tension-hatch)}
#tension-map .stale{fill-opacity:.65}
#tension-map .partial.p0{fill:url(#tension-hatch-0)}
#tension-map .partial.p1{fill:url(#tension-hatch-1)}
#tension-map .partial.p2{fill:url(#tension-hatch-2)}
#tension-map .partial.p3{fill:url(#tension-hatch-3)}
#tension-map .partial.p4{fill:url(#tension-hatch-4)}
#tension-map .dim{opacity:.25}
#tension-map .selected,#tension-map path:focus,#tension-map circle:focus{stroke:white;stroke-width:2;outline:none}
#tension-details{min-width:0;overflow-wrap:anywhere}
#tension-details[hidden]{display:none}
#tension-details h2{margin-top:0}
.tension-components{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 2rem;padding:0;list-style:none}
.tension-evidence{margin:1rem 0}
.tension-evidence a+a{margin-left:1rem}
@media(max-width:640px){.tension-toolbar,.tension-components{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.tension-legend{margin:-.2rem 0 1.25rem;padding:.8rem 1rem;border:1px solid #78858f;border-radius:.4rem;font-size:.9rem;line-height:1.45}
.tension-legend-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:.45rem 1.1rem}
.tension-legend-row+.tension-legend-row{margin-top:.65rem}
.tension-legend-label{margin:0;flex:0 1 17rem;font-weight:600}
.tension-legend-list{display:flex;flex:1 1 32rem;flex-wrap:wrap;gap:.45rem 1rem;margin:0;padding:0;list-style:none}
.tension-legend-list li{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.tension-swatch{display:inline-block;flex-shrink:0;box-sizing:border-box;width:1.2rem;height:.85rem;border:1px solid #b8c7cf;border-radius:.15rem;background-color:var(--swatch-color);vertical-align:middle}
.tone-0{--swatch-color:var(--tension-color-0)}
.tone-1{--swatch-color:var(--tension-color-1)}
.tone-2{--swatch-color:var(--tension-color-2)}
.tone-3{--swatch-color:var(--tension-color-3)}
.tone-4{--swatch-color:var(--tension-color-4)}
.tension-swatch.striped{background-image:repeating-linear-gradient(135deg,transparent 0 3px,#f4f2e8 3px 4px)}
.tension-swatch.no-score{background-color:#87939e}
.tension-swatch.no-score-striped{background:repeating-linear-gradient(135deg,#6e7b85 0 3px,#b8c7cf 3px 4px)}
.tension-legend-note{margin:.55rem 0 0}
.tension-legend-note .tension-swatch{margin-right:.35rem}
@media(max-width:640px){.tension-legend{padding:.7rem}.tension-legend-label{flex-basis:100%}.tension-legend-list{column-gap:.8rem}}