/* One shared heading position for the three dock pages. */
:root{--main-page-inset:16px;--main-page-top:20px;--main-page-heading-height:38px}
.progress-root{padding:var(--main-page-top) var(--main-page-inset) 0}
.profile-view-heading{min-height:var(--main-page-heading-height);align-items:center}
body[data-route="track"] .page-heading,
body[data-route="library"] .page-heading{
  display:flex;
  align-items:center;
  min-height:calc(var(--main-page-top) + var(--main-page-heading-height));
  padding:var(--main-page-top) var(--main-page-inset) 0;
}
.profile-view-heading h1,
body[data-route="track"] .page-heading h1,
body[data-route="library"] .page-heading h1{margin:0;font-size:24px;line-height:1.2;letter-spacing:-.65px}
@media(max-width:365px){:root{--main-page-inset:12px}}

/* Centre the native date value inside a definite control height. Keep the V10
   auto-width/grid-stretch fix and the native calendar picker unchanged. */
.field input[type="date"]{
  display:flex;
  align-items:center;
  height:46px;
  block-size:46px;
  min-height:46px;
  min-block-size:46px;
  padding:0 10px;
  line-height:normal;
}
.field input[type="date"]::-webkit-datetime-edit,
.field input[type="date"]::-webkit-date-and-time-value{
  display:inline-flex;
  align-items:center;
  height:100%;
  block-size:100%;
  min-height:0;
  min-block-size:0;
  margin:0;
  padding:0;
  line-height:normal;
}
.field input[type="date"]::-webkit-datetime-edit-fields-wrapper{padding:0;align-self:center}
.field input[type="date"]::-webkit-datetime-edit,
.field input[type="date"]::-webkit-date-and-time-value{flex:1;min-inline-size:0}
.field input[type="date"]::-webkit-calendar-picker-indicator{align-self:center;margin-left:auto}