/* Same four compact rows everywhere. Expansion is an explicit player choice. */
.phone-shell .fixed-top {padding:10px 15px 7px;}
.phone-shell .top-brand {display:flex;gap:10px;height:24px;margin-bottom:5px;}
.top-brand>small {margin-left:auto;}
.metrics-toggle {width:28px;height:28px;font-size:19px;color:#a7c6b6;line-height:1;}
.phone-shell .axes {grid-template-columns:1fr;gap:0;}
.phone-shell .axis {display:grid;grid-template-columns:87px minmax(40px,1fr) 91px;gap:9px;align-items:center;min-height:29px;border-bottom:1px solid #b2d3be12;}
.phone-shell .axis:last-child {border:0;}
.phone-shell .axis-heading {font-size:12px;margin:0;gap:4px;}
.phone-shell .axis-heading strong {font-size:12px;}
.phone-shell .axis-track,.phone-shell .segmented-energy {height:6px;}
.phone-shell .axis-detail,.phone-shell .axis-stress .axis-detail,.axis-history {display:none;}
.axis-slow {display:flex;align-items:center;justify-content:flex-end;gap:5px;color:#91a69a;font-size:9px;white-space:nowrap;}
.axis-slow .source-dots {gap:2px;margin:0;}
.axis-slow .source-dot {width:5px;height:5px;}
.phone-shell .axis-slow .background-track {height:2px;margin:0;flex:1;}
.phone-shell .axis-slow .background-track>i {height:6px;top:-2px;}
.phone-shell .money-small {height:18px;margin-top:2px;font-size:11px;}
.phone-shell .metrics-expanded .axes {gap:9px;}
.phone-shell .metrics-expanded .axis {display:grid;grid-template-columns:1fr auto;gap:0;padding-bottom:4px;}
.phone-shell .metrics-expanded .axis-heading {grid-column:1/-1;font-size:14px;margin-bottom:5px;}
.phone-shell .metrics-expanded .axis-heading strong {font-size:14px;}
.phone-shell .metrics-expanded .axis-track,.phone-shell .metrics-expanded .segmented-energy {grid-column:1/-1;height:9px;}
.phone-shell .metrics-expanded .axis-slow {display:none;}
.phone-shell .metrics-expanded .axis-detail {display:block;grid-column:1/-1;margin-top:5px;font-size:11px;line-height:16px;}
.phone-shell .metrics-expanded .background-labels {display:flex;}
.phone-shell .metrics-expanded .axis-detail .background-track {height:4px;margin:2px 0 5px;}
.phone-shell .metrics-expanded .axis-detail .background-track>i {height:10px;top:-3px;}
.phone-shell .metrics-expanded .axis-history {display:block;grid-column:2;color:#9bb8a8;font-size:9px;line-height:14px;margin-top:2px;}
/* Only populated secondary states, in the margin below the body tools. */
#body-state-list {left:17px;right:auto;top:58px;width:112px;}
.body-state-row {font-size:11px;}
@media(max-width:360px){
 .phone-shell .axis {grid-template-columns:80px minmax(30px,1fr) 82px;gap:6px;}
 .axis-slow {font-size:8px;gap:3px;}
}
@media(max-height:700px){
 .phone-shell .metrics-expanded .axes {gap:5px;}
 .phone-shell .metrics-expanded .axis-history {line-height:11px;}
 #body-state-list {top:45px;width:102px;}
}

/* The compact header never changes layout with the routine sheet. */

.player-dialog.metrics-screen {position:fixed;inset:0;width:min(100%,440px);height:100dvh;max-width:440px;max-height:100dvh;margin:0 auto;border:0;border-radius:0;background:#151e1b;}
.metrics-screen[open] {display:flex;flex-direction:column;animation:metrics-enter .25s ease-out;}
.metrics-screen .modal-heading {flex-shrink:0;}
.metrics-screen .modal-content {flex:1;min-height:0;max-height:none;padding:14px 17px 20px;}
.phone-shell .metrics-expanded .axis {border:0;}
.overview-quadrant {margin-top:18px;border-top:1px solid #35443c;padding-top:8px;}
.overview-quadrant .quadrant {display:block;width:100%;max-height:34dvh;}
@keyframes metrics-enter {from {transform:translateY(-100%);}to {transform:translateY(0);}}
@media(prefers-reduced-motion:reduce){.metrics-screen[open]{animation:none;}}

.metrics-screen details {margin-top:16px;border-top:1px solid #35443c;padding-top:12px;}
.metrics-screen summary {cursor:pointer;font-size:12px;color:#a9c6b6;}

.metrics-screen .modal-heading,.metrics-expanded,.overview-quadrant,.metrics-grip {touch-action:pan-x;}
.metrics-screen.metrics-dragging {animation:none;user-select:none;}
.metrics-grip {flex-shrink:0;width:100%;height:32px;display:grid;place-items:center;touch-action:none;cursor:grab;}
.metrics-grip i {width:38px;height:3px;border-radius:4px;background:#779488;}
.metrics-grip:active {cursor:grabbing;}