/* One surface grows upwards. The footer is always immediately above the tabbar. */
.calm-player-island{position:absolute;bottom:var(--tabbar-height);left:0;right:0;background:var(--raised);border-top:var(--size-border-hairline) solid var(--rule);z-index:3;transition:border-radius var(--motion-controlDuration) var(--motion-controlEasing)}
.calm-player-island.is-open{border-radius:var(--radius-sheet) var(--radius-sheet) 0 0}
.island-footer{padding:var(--space-group) var(--inset-control) var(--space-compact)}
.island-footer .calm-player-grid{grid-template-rows:var(--size-source-imageHeight) var(--size-target-min);gap:calc(var(--space-compact)/2) var(--space-compact)}
.island-footer .source-disclosure{display:grid;grid-template-columns:var(--size-source-imageWidth) minmax(0,1fr) var(--size-icon-standard);gap:var(--space-inline);align-items:center;min-width:0;width:100%;height:var(--size-source-imageHeight);text-align:left;border-radius:var(--radius)}
.source-disclosure>.axportrait,.source-disclosure>.axartwork{width:var(--size-source-imageWidth);height:var(--size-source-imageHeight);object-fit:contain}
.source-disclosure .axnames{min-width:0}.source-disclosure .source-chevron{display:grid;place-items:center;color:var(--ink2)}
.source-chevron svg{width:var(--size-icon-standard);height:var(--size-icon-standard)}
.island-footer [data-player-slot=speed]{font:var(--font-weight-regular) var(--type-body-size)/var(--type-body-line) var(--font-ui)}
.island-footer [data-player-slot=play]{color:var(--act-text)}
/* Restore the shared18px range thumb; keep the existing44px input target. */
.seek-surface{height:var(--size-target-min);min-width:0;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.island-footer input[type=range]{touch-action:none;user-select:none;-webkit-user-select:none;pointer-events:none}
.island-footer input[type=range]::-webkit-slider-thumb{width:18px;height:18px;margin-top:calc(-1 * var(--space-compact));border:var(--size-border-thumb) solid var(--act-text);background:var(--ground)}
.island-footer input[type=range]::-moz-range-track{height:2px;background:var(--frame)}
.island-footer input[type=range]::-moz-range-progress{height:2px;background:var(--act-text)}
.island-footer input[type=range]::-moz-range-thumb{width:18px;height:18px;border:var(--size-border-thumb) solid var(--act-text);border-radius:50%;background:var(--ground)}
.calm-player-island.is-seeking .seek-surface{cursor:grabbing}
.calm-player-island.is-seeking input[type=range]::-webkit-slider-thumb{width:var(--size-icon-standard);height:var(--size-icon-standard);margin-top:-9px;background:var(--act-text)}
.calm-player-island.is-seeking input[type=range]::-moz-range-thumb{width:var(--size-icon-standard);height:var(--size-icon-standard);background:var(--act-text)}
.seek-preview{display:none;position:absolute;bottom:calc(var(--footer-height) + var(--space-inline));transform:translateX(-50%);padding:var(--space-inline) var(--space-group);border:var(--size-border-hairline) solid var(--rule);border-radius:var(--radius);color:var(--ink);background:var(--raised);font:var(--font-weight-regular) var(--type-body-size)/var(--type-body-line) var(--font-ui);font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;z-index:4}
.calm-player-island.is-seeking .seek-preview{display:block}
@media(forced-colors:active){
 .island-footer input[type=range]::-webkit-slider-runnable-track{background:CanvasText}
 .island-footer input[type=range]::-webkit-slider-thumb{background:Canvas;border-color:CanvasText}
 .seek-preview{background:Canvas;color:CanvasText;border-color:CanvasText}
}
.player-content{position:relative;height:0;overflow:hidden;visibility:hidden;transition:height var(--motion-controlDuration) var(--motion-controlEasing)}
.calm-player-island.is-open .player-content{height:calc(var(--media-height) + var(--size-target-min));visibility:visible}
/* The default medium view uses60%; dragging restores the incumbent larger stop,
   bounded by available height and the whole image's aspect ratio. */
.calm-player-island{--media-height:min(calc(var(--phone-width) - 2*var(--space-screen)),calc(var(--phone-height)*.6 - var(--footer-height) - var(--size-target-min)))}
.panel-grab{position:absolute;top:0;left:50%;transform:translateX(-50%);width:calc(2*var(--size-target-min));height:var(--size-target-min);z-index:1;display:flex;justify-content:center;align-items:center;touch-action:none;color:var(--frame);background:transparent;border:0;border-radius:var(--radius)}
.panel-grab span{display:block;width:32px;height:4px;border-radius:var(--radius);background:currentColor;pointer-events:none}
.panel-grab{cursor:ns-resize}
.calm-player-island.is-resizing .player-content{transition:none}
.media-frame{height:var(--media-height);margin-top:var(--size-target-min);padding:0 var(--space-screen);overflow:hidden;display:flex;align-items:center;justify-content:center}
.media-frame img{display:block;max-width:100%;width:100%;height:100%;object-fit:contain;user-select:none;pointer-events:none}
.reading-scroll{height:100%;width:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--frame) transparent;font:var(--font-weight-regular) var(--reading-level1-bookSize)/var(--reading-level1-bookLine) var(--font-book);padding-block:var(--space-compact)}
.reading-scroll p+p{margin-top:var(--space-group)}
.source-disclosure:hover{background:var(--rule)}
.calm-player-island button:focus-visible,.calm-player-island .reading-scroll:focus-visible{outline:var(--size-focus-width) solid var(--act-text);outline-offset:var(--size-focus-offset)}
.calm-player-island input[type=range]:focus-visible{outline:var(--size-focus-width) solid var(--act-text);outline-offset:calc(-1*var(--size-focus-width))}

.calm-player-island[hidden]{display:none!important}.calm-player-island{--footer-height:120px;--phone-height:680px;--phone-width:393px}.island-status:empty{display:none}.island-status{padding:0 var(--space-screen) var(--space-compact);font:var(--font-weight-regular) var(--type-caption-size)/var(--type-caption-line) var(--font-ui);color:var(--ink2)}.island-status button{min-height:var(--size-target-min);padding-inline:var(--space-compact);color:var(--act-text)}
@media(prefers-reduced-motion:reduce){.calm-player-island,.calm-player-island .player-content{transition:none}}

.seek-surface:has(input:disabled){cursor:default;opacity:var(--opacity-disabled)}

/* Full-width Cover stays top-aligned; short panels scroll the image, never the transport. */
.calm-player-island[data-view=cover] .media-frame{display:block;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--frame) transparent}