.mass-extended-options { margin-block: 12px; padding: 14px; border: 1px solid #c9d5e4; border-radius: 12px; color: #263950; background: #f8faff; }
/* Native mathematical layout avoids combining-arrow glyphs and Unicode
   subscripts being detached by the surrounding Japanese UI font. */
.home-mass-formula { margin-block: 12px; padding: 8px 0; overflow-x: auto; color: #24384e; }
.home-mass-formula math { font-family: math; font-size: clamp(18px, 4.5vw, 22px); }
.home-mass-formula .home-mass-vector { font-weight: 700; }
/* Names match the mass menu; no numbered circles cover the particle paths. */
.detector-shell .detector-mass-track-label {
    pointer-events: none;
    fill: var(--track-color, #deebf7);
    font: 500 20px "Noto Sans JP", sans-serif;
    stroke: #08101e;
    stroke-width: 4px;
    paint-order: stroke fill;
    stroke-linejoin: round;
    opacity: .8;
}
.detector-shell .detector-mass-track-label:is(.is-mass-pair, .is-track-hovered) { opacity: 1; fill: #fff; font-weight: 700; }
.detector-mass-label-leader { pointer-events: none; stroke: var(--track-color); stroke-width: 1px; opacity: .45; }
.mass-remaining-compact > summary { cursor: pointer; min-height: 32px; font-size: 13px; color: #dbe9f7; }
@media (max-width: 640px) { .detector-shell .detector-mass-track-label { font-size: 26px; } }
.mass-extended-options > summary { cursor: pointer; min-height: 44px; align-content: center; font-weight: 600; font-size: 15px; }
.mass-extended-options p, .mass-extended-options small { font-size: 13px; line-height: 1.7; }
.mass-extended-options [data-four-lepton-list], .mass-extended-options [data-met-mass-list] { display: grid; gap: 10px; margin-block: 12px; }
.mass-extended-options button { display: grid; gap: 8px; width: 100%; min-height: 44px; padding: 12px; text-align: left; color: #263950; background: #fff; border: 1px solid #b8c8dc; border-radius: 10px; cursor: pointer; }
.mass-extended-options button:disabled { cursor: not-allowed; opacity: .65; }
.mass-extended-options .mass-four-pairing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mass-four-pairing > span { display: grid; align-content: start; gap: 8px; overflow-wrap: anywhere; }
.mass-four-pairing > small { grid-column: 1 / -1; }
.mass-four-pairing strong { font-size: 18px; }
.mass-remaining-pair, .mass-met-result { display: grid; gap: 7px; margin-block: 8px; }
.mass-remaining-pair { padding-top: 10px; border-top: 1px solid #7890ad55; }
.mass-remaining-pair strong { font-size: 22px; }
.mass-remaining-pair small, .mass-met-result small, .mass-met-result p { margin: 0; font-size: 12px; line-height: 1.6; }
.mass-met-result > strong { font-size: 28px; }
.mass-met-result > strong span { font-size: 14px; }
#particleEventCanvas .detector-mass-overlay .mass-met-result, #particleEventCanvas .detector-mass-overlay .mass-remaining-pair { color: #e5edf7; }
#particleEventCanvas .detector-mass-overlay .mass-met-result p, #particleEventCanvas .detector-mass-overlay .mass-remaining-pair small { color: #bbcee2; }
#homeMassDetailsDialog .mass-remaining-pair, #homeMassDetailsDialog .mass-met-result { color: #24384e; }
#homeMassDetailsDialog .mass-remaining-pair small, #homeMassDetailsDialog .mass-met-result p { color: #52667e; }
/* This light dialog lives inside the dark detector for fullscreen support. */
#homeMassDetailsDialog .mass-charge-label { color: #334d66; }
body.home-event-page #homeMassDetailsDialog .home-mass-object-symbol,
body.home-event-page #homeMassDetailsDialog .home-mass-result-pair > span {
    color: color-mix(in srgb, var(--track-color, #334d66) 35%, #152e44);
}
#homeMassDetailsDialog .home-mass-object-copy { gap: 3px; }
#homeMassDetailsDialog .home-mass-object-copy :is(strong, small) {
    white-space: normal;
    overflow-wrap: anywhere;
}
#homeMassDetailsDialog > header h2 { font-size: clamp(16px, 4.5vw, 18px); line-height: 1.5; text-wrap: balance; }
.mass-extended-options :is(button, a):focus-visible { outline: 2px solid #306cbb; outline-offset: 2px; }

/* Keep the close/details controls outside the scrollable result on small screens. */
#particleEventCanvas.has-detector-workspace .detector-mass-overlay {
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
}
#particleEventCanvas .detector-mass-overlay > header { position: static; }
#particleEventCanvas .detector-mass-overlay .detector-fullscreen-mass-content {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
/* Keep the first particle's charge visible while scrolling through partners. */
#particleEventCanvas .detector-mass-overlay[data-mass-selection-count="1"]:not([data-mass-mode="met"]) .detector-fullscreen-mass-content {
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
}
#particleEventCanvas .detector-mass-overlay[data-mass-selection-count="1"] .detector-fullscreen-mass-partners {
    min-height: 0;
    align-self: stretch;
    align-items: start;
    overflow-y: auto;
    overscroll-behavior: contain;
}
@media (max-width: 700px) {
    #particleEventCanvas.has-detector-workspace .detector-mass-overlay { max-height: min(25dvh, 185px); }
    #particleEventCanvas.has-detector-workspace .detector-mass-overlay[data-mass-selection-count="1"] { max-height: min(38dvh, 290px); }
}
@media (pointer: coarse) and (max-height: 500px) {
    #particleEventCanvas.has-detector-workspace .detector-mass-overlay,
    #particleEventCanvas.has-detector-workspace .detector-mass-overlay[data-mass-selection-count="1"] {
        inset: 10px auto auto 12px;
        width: min(340px, 44%);
        max-height: calc(100dvh - 138px);
        z-index: 25;
    }
}