/* Shared player island: two content rows and the owner's right-hand 2×2 controls.
   54px identity row and34px time columns come from the existing compact player;
   controls use44px DS targets; 4px is half of compact8px, the prior top-row gap. */
.calm-player-grid{display:grid;grid-template-columns:minmax(0,1fr) repeat(2,var(--size-target-min));grid-template-rows:minmax(54px,auto) var(--size-target-min);column-gap:calc(var(--space-compact)/2);align-items:center;min-width:0}
.calm-player-grid>[data-player-slot=identity]{grid-area:1/1;min-width:0}
.calm-player-grid>[data-player-slot=text],.calm-player-grid>[data-player-slot=disclosure]{grid-area:1/2}
.calm-player-grid>[data-player-slot=loop]{grid-area:1/3}
.calm-player-grid>[data-player-slot=timeline]{grid-area:2/1;min-width:0}
.calm-player-grid>[data-player-slot=play]{grid-area:2/2}
.calm-player-grid>[data-player-slot=speed]{grid-area:2/3}
.calm-player-grid>[data-player-slot=status]{grid-column:1/-1;grid-row:3;min-width:0}
.calm-player-grid>[data-player-slot=status]:empty{display:none!important}
.calm-player-grid>.axprogress{grid-template-columns:34px minmax(0,1fr) 34px;gap:var(--space-compact);height:var(--size-target-min)}
.calm-player-grid .axnames,.calm-player-grid .identity-copy{min-width:0}
.calm-player-grid .axnames strong,.calm-player-grid .axnames small,.calm-player-grid .identity-copy strong,.calm-player-grid .identity-copy small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calm-player-grid>[data-player-slot=disclosure],.calm-player-grid>[data-player-slot=text],.calm-player-grid>[data-player-slot=loop],.calm-player-grid>[data-player-slot=play],.calm-player-grid>[data-player-slot=speed]{width:var(--size-target-min);height:var(--size-target-min);display:grid;place-items:center;border:0;box-shadow:none;background:transparent;color:var(--act-text);border-radius:var(--radius)}
.calm-player-grid>[data-player-slot=speed]{font:var(--font-weight-regular) var(--type-control-size)/var(--type-control-line) var(--type-control-family);font-variant-numeric:tabular-nums}
/* State is a quiet fill/dot from the existing control language, never an extra frame. */
.calm-player-grid>[aria-pressed=true]{background:var(--rule);color:var(--act-text)}
.calm-player-grid>:disabled{opacity:var(--opacity-disabled);cursor:default}
.calm-player-grid>:focus-visible{outline:var(--size-focus-width) solid var(--act-text);outline-offset:var(--size-focus-offset)}
/* Same44px seek target in both consumers, overriding the legacy36px DS track. */
.calm-player-grid .axprogress input[type=range]{height:var(--size-target-min)}

/* Three requested views; one existing44px target row, UI meta type, focus-width underline. */
.player-view-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:relative;flex:none;min-width:0;height:var(--size-target-min);border-bottom:var(--size-border-hairline) solid var(--rule)}
.player-view-tabs::after{content:'';position:absolute;bottom:0;left:0;width:calc(100% / 3);height:var(--size-focus-width);background:var(--act-text);transform:translateX(calc(var(--view-index) * 100%));transition:transform var(--motion-controlDuration) var(--motion-controlEasing);pointer-events:none}
.player-view-tabs button{display:grid;place-items:center;min-width:0;height:var(--size-target-min);padding:0 var(--space-compact);font:var(--font-weight-regular) var(--type-meta-size)/var(--type-meta-line) var(--font-ui);color:var(--ink2);background:transparent;border:0}
.player-view-tabs button[aria-selected=true]{color:var(--act-text)}
.player-view-tabs button:focus-visible{outline:var(--size-focus-width) solid var(--act-text);outline-offset:calc(-1 * var(--size-focus-width));border-radius:var(--radius)}
@media(prefers-reduced-motion:reduce){.player-view-tabs::after{transition:none}}