.wrap{max-width:1280px}

.day-cols{
  --col-gap:22px;
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  align-items:start;
  position:relative;
  z-index:0;
}
.day-cols.has-duty{
  grid-template-columns:minmax(0,2fr) minmax(188px,.9fr);
  gap:0 var(--col-gap);
  align-items:stretch;
}
@media (min-width:700px){
  .day-cols{grid-template-rows:auto 1fr}
  .day-main{display:grid;grid-row:span 2;grid-template-rows:subgrid}
  .duty-col{grid-row:span 2}
  .duty-col > .col-head::before{
    content:"";position:absolute;right:100%;bottom:-1px;width:var(--col-gap);
    border-top:1px solid var(--line);
  }
}
.day-rails,.day-now-track{
  position:absolute;
  left:0;right:0;
  pointer-events:none;
}
.day-rails{z-index:-1}
.day-rail{
  position:absolute;left:var(--gutter,58px);right:0;
  border-top:1px solid var(--line);
}
.day-now-track{z-index:5}
.day-now{position:absolute;left:0;right:0;border-top:2px solid var(--c-alert)}
.day-now .pill{
  position:absolute;left:2px;top:0;transform:translateY(-50%);
  background:var(--c-alert);color:#fff;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10px;font-weight:600;line-height:1;padding:3px 6px;border-radius:8px;
}
@media (min-width:700px){
  .day-cols[data-mode="hourly"] .hourly-hour .line,
  .day-cols[data-mode="hourly"] .hourly-hours::after,
  .day-cols[data-mode="hourly"] .duty-hour,
  .day-cols[data-mode="hourly"] .duty-hours::after{border-top-color:transparent}
  .day-cols[data-mode="hourly"] .hourly-now{visibility:hidden}
}
.day-main,.duty-col{min-width:0}

.hourly-event.clash,.row.clash .card{border-color:color-mix(in srgb,var(--c-alert) 55%, var(--line))}

.detail{display:none}
.swipe{min-width:0}
.swipe-act{display:none}
.hourly-event{padding:0}
.hourly-event .face{height:100%;padding:5px 28px 5px 9px;box-sizing:border-box;background:var(--tint);position:relative;z-index:1}
.hourly-event.short .face{padding:2px 8px}
.hourly-event .tip-btn{position:absolute;top:5px;right:6px}
.hourly-event:has(.drop) .face{padding-right:56px}
.hourly-event:has(.drop) .tip-btn{right:28px}
.hourly-event .drop{position:absolute;top:5px;right:6px;z-index:4}
.hourly-event.short:has(.drop) .face{padding-right:32px}
.hourly-event.short .tip-btn{display:none}

.row.can-order .card{cursor:grab;touch-action:none}
.row.ordering .card,.hourly-event.ordering,.hourly-event.past.ordering{opacity:.32}
.hourly-event .grip-o{
  left:0;right:auto;width:16px;height:auto;top:10px;bottom:10px;cursor:grab;z-index:4;
  touch-action:none
}
body.is-ordering{cursor:grabbing;user-select:none;-webkit-user-select:none}
body.is-reordering{pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .row,.hourly-event{transition:none}
}
.order-line{
  position:fixed;z-index:40;height:2px;pointer-events:none;
  background:var(--accent);border-radius:1px;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%, transparent);
}
.order-line::before,.order-line::after{
  content:"";position:absolute;top:50%;width:7px;height:7px;border-radius:50%;
  background:var(--accent);transform:translate(-50%,-50%);
}
.order-line::before{left:0}
.order-line::after{left:100%}
body > .order-ghost{
  position:fixed;z-index:50;pointer-events:none;margin:0;right:auto;bottom:auto;
  overflow:visible;opacity:1;
  transform:scale(1.03);transform-origin:center center;
  box-shadow:0 12px 28px color-mix(in srgb,#000 22%, transparent),
    0 0 0 1px color-mix(in srgb,var(--dot) 50%, var(--line));
}

footer{
  margin-top:28px;
  padding-top:16px;
  border-top:1px solid var(--line);
  color:var(--ink-faint);
  font-size:12.5px;
  line-height:1.45;
  max-width:40em;
}

@media (max-width:699px){
  .day-cols,.day-cols.has-duty{grid-template-columns:1fr}
}

@media (max-width:560px){
  .card .detail{
    display:block;grid-column:1;grid-row:3;
    color:var(--ink-soft);font-size:13.5px;line-height:1.45;margin-top:4px;
  }
  .card > .tip-btn{display:none}
  .hourly-event .head{grid-template-columns:auto minmax(0,1fr) auto;column-gap:6px}
  .hourly-event.roomy .head{grid-template-columns:1fr}
  .hourly-event.roomy .wet{grid-column:1}
  .hourly-event.roomy .title{white-space:normal}
  .hourly-event.roomy .detail{
    display:block;font-size:11px;line-height:1.35;color:var(--ink-soft);margin-top:3px;
  }
  .hourly-event.roomy .tip-btn{display:none}
  .hourly-event{padding:0}
}
@media (hover: none) and (pointer: coarse){
  .swipe{position:relative;overflow:hidden;border-radius:var(--radius)}
  .swipe .card{width:100%;position:relative;z-index:1}
  .swipe-act{
    display:flex;align-items:center;justify-content:center;text-align:center;
    position:absolute;top:0;right:0;bottom:0;width:92px;z-index:0;
    appearance:none;border:0;cursor:pointer;padding:8px;
    background:var(--ink);color:var(--paper);
    font-family:"IBM Plex Mono",ui-monospace,monospace;
    font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;line-height:1.25;
    opacity:0;pointer-events:none;
  }
  .swiped .swipe-act,.is-swiping .swipe-act{opacity:1;pointer-events:auto}
  .swipe-act:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
  .swipe .card,.hourly-event .face{transition:transform .2s ease}
  .is-swiping .card,.is-swiping .face{transition:none}
  .swiped .card,.swiped .face{transform:translateX(-92px)}
  .hourly-event,.row.can-order .card,.hourly-event.can-order{cursor:default;touch-action:pan-y}
  .hourly-event .grip{pointer-events:none;touch-action:pan-y}
  #order-done{color:var(--ink)}
  body.order-mode .row.can-order .card,
  body.edit-mode .hourly-event,
  body.edit-mode .hourly-event .grip,
  body.order-mode .hourly-event.can-order{cursor:grab;touch-action:none;pointer-events:auto}
  body.order-mode .swipe-act{display:none}
  body.order-mode .card,body.order-mode .face{transform:none}
}