/* The movie stays clear; every control lives in a separate strip below it. */
#media-player.has-custom-controls::-webkit-media-controls,
#media-player.has-custom-controls::-webkit-media-controls-start-playback-button{display:none!important}
.media-controls{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:8px 10px;align-items:center;padding:10px 0 0}
.media-controls[hidden]{display:none}
.media-control-button{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px;padding:7px 11px;border:1.5px solid var(--ink);background:var(--paper);font-size:11px;font-weight:800;white-space:nowrap}
.media-control-button:first-child{background:var(--pink)}
.media-control-button svg{width:14px;height:14px;fill:currentColor;flex:none}
.media-control-button [data-pause-icon],.media-control-button[data-state="playing"] [data-play-icon]{display:none}
.media-control-button[data-state="playing"] [data-pause-icon]{display:block}
.media-control-button:focus-visible,.media-seek:focus-visible{outline:3px solid #437fff;outline-offset:3px}
.media-time{justify-self:end;font:700 11px/1.5 Arial,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.media-seek{grid-column:1/-1;width:100%;min-width:0;height:24px;margin:0;accent-color:var(--pink);cursor:pointer}
.media-seek:disabled{cursor:default}
.media-status{grid-column:1/-1;margin:0;color:var(--muted);font-size:10px;line-height:1.5}
/* Reserve room for the external strip in the existing portrait modal. */
.media-dialog.is-portrait video{max-height:calc(100dvh - 270px)}
@media(max-width:359px){
  .media-controls{gap:6px}
  .media-control-button{padding-inline:7px;font-size:10px;gap:4px}
  .media-time{font-size:10px}
}