/* Original Style Hub diary clarity: readable mobile columns and explicit move affordance. */
.diary-wrap .calendar-appt .diary-move-handle{
  position:absolute;
  top:2px;
  right:2px;
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:24px;
  border-radius:5px;
  color:#70485b;
  background:rgba(255,255,255,.5);
  font:700 15px/1 var(--sh-font-ui,"Style Hub UI",sans-serif);
  letter-spacing:-3px;
  cursor:grab;
  touch-action:none;
  user-select:none;
}
.diary-wrap .calendar-appt.is-dragging .diary-move-handle{cursor:grabbing}
.diary-wrap .calendar-appt strong{padding-right:22px}
.diary-wrap .calendar-appt.micro strong{padding-right:18px!important}
.diary-wrap .calendar-appt .calendar-import-marker{
  font:600 9px/1.2 var(--sh-font-ui,"Style Hub UI",sans-serif)!important;
  color:#6d3e53!important;
  letter-spacing:0!important;
}
/* Keep the complete week in view on a phone. Open a card for full details. */
@media(max-width:700px){
  body.diary-page-active .diary-scroll{
    overflow-x:hidden!important;
    overflow-y:auto!important;
    scrollbar-gutter:auto!important;
  }
  body.diary-page-active .diary-grid,
  body.diary-page-active .diary-head-grid,
  body.diary-page-active .diary-body-grid{
    width:100%!important;
    min-width:0!important;
  }
  body.diary-page-active .diary-head-grid,
  body.diary-page-active .diary-body-grid{
    grid-template-columns:30px repeat(7,minmax(0,1fr))!important;
  }
  body.diary-page-active .diary-day-head.today{
    background:#fff3f8!important;
  }
  body.diary-page-active .diary-wrap .calendar-appt{
    left:1px!important;
    right:1px!important;
    padding:3px 1px!important;
    border-radius:5px!important;
    touch-action:none!important;
  }
  body.diary-page-active .diary-wrap .calendar-appt strong{
    display:-webkit-box!important;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden!important;
    white-space:normal!important;
    overflow-wrap:anywhere;
    padding-right:0!important;
    font-size:8px!important;
    line-height:1.08!important;
  }
  body.diary-page-active .diary-wrap .calendar-appt.micro strong{
    display:block!important;
    white-space:nowrap!important;
    font-size:7px!important;
  }
  body.diary-page-active .diary-wrap .calendar-appt .service,
  body.diary-page-active .diary-wrap .calendar-appt small,
  body.diary-page-active .diary-wrap .calendar-appt .calendar-import-marker,
  body.diary-page-active .diary-wrap .calendar-appt .diary-move-handle{
    display:none!important;
  }
  body.diary-page-active .diary-wrap .calendar-appt .diary-resize-handle{
    height:18px!important;
  }
  body.diary-page-active .diary-wrap .calendar-appt.imported-appointment{
    border-left:2px solid #a66d86!important;
  }
}

/* Keep the diary header stable and make booking cards feel like controls. */
body.diary-page-active .diary-premium-header{
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  align-items:center;
}
body.diary-page-active .diary-business-mark{
  box-sizing:border-box;
  width:54px!important;
  height:54px!important;
  margin:0!important;
  justify-self:end;
  align-self:center;
  transform:none!important;
}
body.diary-page-active .diary-wrap .calendar-appt,
body.diary-page-active .diary-wrap .calendar-appt *{
  -webkit-user-select:none!important;
  user-select:none!important;
  -webkit-touch-callout:none;
}
/* Reserve the gesture before the browser starts scrolling, including tablets. */
body.diary-page-active .diary-wrap .calendar-appt{touch-action:none}
body.diary-page-active .diary-wrap .calendar-appt::selection,
body.diary-page-active .diary-wrap .calendar-appt *::selection{background:transparent}
body.diary-page-active .diary-wrap .calendar-appt .diary-card-time{
  display:block;
  width:100%;
  margin:0 0 2px;
  color:#67445a;
  font:700 10px/1.1 var(--sh-font-ui,"Style Hub UI",sans-serif);
  letter-spacing:.01em;
  text-align:left;
}
body.diary-page-active .diary-wrap .calendar-appt.micro{
  flex-direction:column!important;
  gap:1px;
}
body.diary-page-active .diary-wrap .calendar-appt.micro .diary-card-time{
  margin:0;
  font-size:8px;
  line-height:1;
}
@media(max-width:700px){
  body.diary-page-active .diary-premium-header{
    min-height:44px!important;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)!important;
  }
  body.diary-page-active .diary-business-mark{
    width:44px!important;
    height:44px!important;
  }
  body.diary-page-active .diary-calendar-toolbar{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"range" "month" "selector"!important;
    justify-items:center;
    row-gap:3px!important;
  }
  body.diary-page-active .diary-calendar-toolbar>.diary-toolbar-range{
    grid-area:range;
    width:100%;
    text-align:center;
  }
  body.diary-page-active .diary-calendar-toolbar>.diary-month-jump{
    grid-area:month;
    width:min(100%,230px)!important;
    justify-self:center;
    text-align:center;
  }
  body.diary-page-active .diary-calendar-toolbar>.field{
    grid-area:selector;
    width:min(100%,320px)!important;
    justify-self:center;
  }
  body.diary-page-active .diary-calendar-toolbar .diary-month-jump input,
  body.diary-page-active .diary-calendar-toolbar .diary-month-jump input::-webkit-date-and-time-value,
  body.diary-page-active .diary-calendar-toolbar .diary-month-jump input::-webkit-datetime-edit{
    text-align:center;
    justify-content:center;
  }
  body.diary-page-active .diary-wrap .calendar-appt .diary-card-time{
    margin-bottom:1px;
    font-size:8px;
    line-height:1;
    text-align:left;
  }
  body.diary-page-active .diary-wrap .calendar-appt.micro .diary-card-time{font-size:7px}
  body.diary-page-active .diary-wrap .calendar-appt.micro strong{
    max-width:100%;
    overflow:hidden!important;
    text-overflow:ellipsis;
  }
}