.duty-col{position:relative;min-width:0}
.duty-col > .duty-head{
  position:sticky;top:0;z-index:6;
  justify-content:center;text-align:center;
  background:var(--paper);
}
.duty-head h2.section{display:block;min-height:0;line-height:1.25;text-align:center}
@media (min-width:700px){
  .day-cols:has(.timeline[data-scale="hourly"]) .duty-col > .duty-head{border-bottom-color:transparent}
  .day-cols:has(.timeline[data-scale="hourly"]) .duty-col > .duty-head::after{
    content:"";position:absolute;left:0;right:0;height:1px;
    top:calc(100% + var(--head-gap, 13px));
    background:var(--line);pointer-events:none;
  }
}
@media (max-width:699px){
  .day-cols:has(.timeline[data-scale="hourly"]) .duty-col > .duty-head{margin-bottom:-1px}
}
.duty-mode{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px;padding:2px;
  flex:0 1 auto;min-width:0;max-width:100%;
  background:var(--surface-sunk);border:1px solid var(--line);border-radius:8px;
}
.duty-pick{position:relative}
.duty-responsible,.duty-events-btn,.duty-choices button{
  appearance:none;-webkit-appearance:none;border:0;cursor:pointer;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 11px;border-radius:6px;
  background:transparent;color:var(--ink-faint);
}
.duty-responsible,.duty-events-btn{display:inline-flex;align-items:center;gap:7px}
.duty-responsible[aria-pressed="true"],.duty-events-btn[aria-pressed="true"]{
  background:var(--surface);color:var(--ink);
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.duty-responsible .who,.duty-events-btn .who{letter-spacing:.04em}
.duty-responsible .caret,.duty-events-btn .caret{font-size:9px;color:var(--ink-faint)}
.duty-responsible.who-dave .who,.duty-events-btn.who-dave .who{color:var(--c-walk)}
.duty-responsible.who-kayla .who,.duty-events-btn.who-kayla .who{color:var(--c-kayla)}
.duty-responsible.who-shared .who{color:var(--c-alert)}
.duty-pick.align-end .duty-choices{left:auto;right:0}
.duty-events-btn:hover,.duty-choices button:hover{color:var(--ink-soft)}
.duty-responsible:focus-visible,.duty-events-btn:focus-visible,.duty-choices button:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;
}
.duty-choices{
  position:absolute;top:calc(100% + 6px);left:0;z-index:8;min-width:100%;
  display:flex;flex-direction:column;gap:2px;padding:4px;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 8px 28px -10px rgba(0,0,0,.45);
}
.duty-choices button{text-align:left;padding:6px 10px}
.duty-choices button.who-dave[aria-checked="true"]{background:var(--tint-walk);color:var(--c-walk)}
.duty-choices button.who-kayla[aria-checked="true"]{background:var(--tint-kayla);color:var(--c-kayla)}
.duty-choices button.who-shared[aria-checked="true"]{background:var(--tint-alert);color:var(--c-alert)}
.duty-choices button.who-general[aria-checked="true"]{background:var(--surface-sunk);color:var(--ink)}
.duty-note{
  position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:6;margin:0;
  padding:7px 10px;border-radius:7px;background:var(--ink);color:var(--paper);
  font-size:12.5px;line-height:1.35;box-shadow:0 8px 28px -10px rgba(0,0,0,.5);
  pointer-events:none;
}
.duty-empty{margin:8px 0 0;color:var(--ink-soft);font-size:13.5px;line-height:1.45}

.watch-free{display:flex;flex-direction:column;min-width:0}
.watch-label{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);text-align:center;
  line-height:1.3;padding:5px 10px 4px;border-bottom:1px solid var(--line);
}
.watch-pair{display:flex;flex:1}
.watch .tally{
  --who:var(--ink-soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:6px 12px;white-space:nowrap;text-align:center;
}
.watch-pair > .tally + .tally,
.watch > .tally{box-shadow:inset 1px 0 0 var(--line)}
.tally.who-dave{--who:var(--c-walk)}
.tally.who-kayla{--who:var(--c-kayla)}
.tally.who-yuna{--who:var(--c-nap)}
.tally-top{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:0}
.tally .name{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--who);
}
.tally.is-free{background:color-mix(in srgb, #6f8f82 28%, var(--surface))}
.watch .tally:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tally-fig .big{font-weight:600;font-size:13px;line-height:1;font-variant-numeric:tabular-nums}

.duty-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 12px;margin-top:8px;box-shadow:var(--shadow);
}
.duty-card .who{font-weight:600;font-size:15px;line-height:1.25}
.duty-card .when,.duty-block .when,.duty-shared .when{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px;color:var(--ink-soft);margin-top:3px;
}
.duty-card .when + .when{margin-top:0}
.duty-card .meet,.duty-block .meet,.duty-shared .meet{font-size:12px;color:var(--ink-soft);margin-top:3px}
.duty-card.who-dave{background:var(--tint-walk)}
.duty-card.who-kayla{background:var(--tint-kayla)}
.duty-card.shared{background:var(--tint-alert)}
.duty-block > .drop{
  position:absolute;top:4px;right:6px;z-index:5;
}

.duty-hourly{position:relative;--hour-h:120px;margin-top:0}
.duty-hour{height:var(--hour-h);border-top:1px solid var(--line)}
.duty-hours::after{content:"";display:block;border-top:1px solid var(--line)}
.duty-events{position:absolute;inset:0;z-index:1;touch-action:none}
.duty-hit{position:absolute;left:0;right:0;z-index:1;cursor:pointer}
.duty-block,.duty-shared,.duty-preview{
  position:absolute;left:0;right:0;overflow:hidden;z-index:2;
  border-radius:6px;padding:5px 8px;box-sizing:border-box;
}
.duty-block,.duty-preview{cursor:grab}
.duty-col.is-events .duty-block,.duty-col.is-events .duty-free,.duty-col.is-events .duty-grip{cursor:pointer}
.duty-block .who,.duty-shared .who,.duty-preview .who{
  font-weight:600;font-size:13px;line-height:1.2;
  padding-right:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.duty-block.who-dave,.duty-preview.who-dave{background:color-mix(in srgb,var(--tint-walk) 58%, transparent);border:1px solid color-mix(in srgb,var(--c-walk) 42%, transparent)}
.duty-block.who-kayla,.duty-preview.who-kayla{background:color-mix(in srgb,var(--tint-kayla) 58%, transparent);border:1px solid color-mix(in srgb,var(--c-kayla) 42%, transparent)}
.duty-block.who-shared,.duty-preview.who-shared{background:color-mix(in srgb,var(--tint-alert) 58%, transparent);border:1px solid color-mix(in srgb,var(--c-alert) 42%, transparent)}
.duty-block.past.who-dave{background:color-mix(in srgb,var(--tint-walk) 42%, transparent)}
.duty-block.past.who-kayla{background:color-mix(in srgb,var(--tint-kayla) 42%, transparent)}
.duty-block.past.who-shared{background:color-mix(in srgb,var(--tint-alert) 42%, transparent)}
.duty-block.is-work,.duty-preview.is-work{pointer-events:none}
.duty-block.is-work::after,.duty-preview.is-work::after,.duty-stripe{
  position:absolute;z-index:0;pointer-events:none;
  background:repeating-linear-gradient(-45deg, transparent 0 6px, color-mix(in srgb, var(--paper) 70%, transparent) 6px 8px);
}
.duty-block.is-work::after,.duty-preview.is-work::after{content:"";inset:1px;border-radius:4px}
.duty-stripe{left:1px;right:1px}
.duty-block.is-mixed{pointer-events:none}
.duty-block.is-mixed .duty-free,
.duty-block.is-mixed > .drop,
.duty-block.is-mixed > .duty-grip{pointer-events:auto}
.duty-free{position:absolute;left:0;right:0;z-index:1;cursor:grab}
.duty-block.is-mixed .who,
.duty-block.is-mixed .when,
.duty-block.is-mixed .meet{pointer-events:none}
.duty-block.now{isolation:isolate}
.duty-block.now::before{
  content:"";position:absolute;left:0;right:0;top:0;height:var(--spent);z-index:0;
  background:color-mix(in srgb,var(--paper) 42%, transparent);pointer-events:none;
}
.duty-block .who,.duty-block .when,.duty-block .meet{position:relative;z-index:1}
.duty-shared{
  background:color-mix(in srgb,var(--tint-alert) 58%, transparent);color:var(--ink);z-index:3;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c-alert) 42%, transparent);
}
.duty-bg{
  position:absolute;left:auto;right:0;width:66.666%;z-index:0;pointer-events:none;overflow:hidden;
  border-radius:6px;box-sizing:border-box;
  background:color-mix(in srgb,var(--ink-soft) 34%, var(--paper));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink-soft) 45%, transparent);
}
.duty-bg-label{
  position:absolute;left:auto;right:0;width:66.666%;z-index:5;pointer-events:none;overflow:visible;
  border-radius:6px;padding:5px 26px 5px 8px;box-sizing:border-box;color:var(--ink);
}
.duty-bg-label > .drop{pointer-events:auto;position:absolute;top:4px;right:6px}
.duty-bg-label .copy{min-width:0;overflow:hidden}
.duty-bg-label .title{
  font-size:12px;font-weight:600;line-height:1.2;color:inherit;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.duty-bg-label .when,
.duty-user .when{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:10.5px;line-height:1.3;color:inherit;opacity:.82;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.duty-bg-label .title + .when,
.duty-user .title + .when{margin-top:2px}
.duty-user{
  position:absolute;left:auto;right:0;width:66.666%;z-index:5;overflow:hidden;
  border-radius:6px;padding:5px 26px 5px 8px;box-sizing:border-box;cursor:grab;
  color:var(--ink);
}
.duty-user .title,
.duty-card .can-rename{cursor:text}
.duty-user .title{
  font-size:12px;font-weight:600;line-height:1.2;color:inherit;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.duty-user input.title,
.duty-card input.who{
  display:block;width:100%;min-width:0;height:auto;margin:0;padding:0;border:0;border-radius:0;
  background:transparent;color:inherit;outline:none;box-shadow:none;
  font-family:inherit;font-size:12px;font-weight:600;line-height:1.2;letter-spacing:inherit;
  appearance:none;-webkit-appearance:none;
}
.duty-card input.who{font-size:15px;line-height:1.25}
.duty-card.back input.who{font-size:14px}
.duty-user > .drop{position:absolute;top:4px;right:6px;z-index:5}
.duty-user.is-covered,
.duty-bg-label.is-covered{
  background-color:color-mix(in srgb,var(--ink-soft) 34%, var(--paper));
  background-image:linear-gradient(color-mix(in srgb,var(--cover) 58%, transparent),color-mix(in srgb,var(--cover) 58%, transparent));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink-soft) 45%, transparent);
}
.duty-user.is-covered.who-dave,.duty-bg-label.is-covered.who-dave{--cover:var(--tint-walk)}
.duty-user.is-covered.who-kayla,.duty-bg-label.is-covered.who-kayla{--cover:var(--tint-kayla)}
.duty-user.is-covered.who-shared,.duty-bg-label.is-covered.who-shared{--cover:var(--tint-alert)}
.duty-user.is-preview{pointer-events:none;opacity:.72}
.duty-user.is-preview.is-covered{opacity:1}
.duty-user.is-preview.duty-hover{opacity:.4}
.duty-card{position:relative}
.duty-card:has(.drop){padding-right:32px}
.duty-card > .drop{position:absolute;top:10px;right:10px}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .duty-bg-label,
  :root:not([data-theme="light"]) .duty-user{color:#fff}
}
:root[data-theme="dark"] .duty-bg-label,
:root[data-theme="dark"] .duty-user{color:#fff}
.duty-allday{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px}
.duty-chip{
  position:relative;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11px;padding:3px 22px 3px 7px;border-radius:5px;color:var(--ink-soft);
  background:color-mix(in srgb,var(--ink-faint) 22%, var(--surface));
  border:1px solid var(--line);
}
.duty-chip > .drop{pointer-events:auto;position:absolute;top:2px;right:3px}
.duty-card.back{
  background:color-mix(in srgb,var(--ink-faint) 20%, var(--surface));
  box-shadow:none;color:var(--ink-soft);
}
.duty-card.back .who{font-size:14px;opacity:.82}
.duty-preview{opacity:.72;pointer-events:none}
.duty-preview.duty-hover{opacity:.4}
.duty-grip{position:absolute;left:0;right:0;height:12px;z-index:4;cursor:ns-resize}
.duty-grip.n{top:0}
.duty-grip.s{bottom:0}
.duty-grip:hover::after{
  content:"";position:absolute;left:22%;right:22%;height:2px;border-radius:1px;
  background:color-mix(in srgb,var(--ink) 35%, transparent);
}
.duty-grip.n:hover::after{top:3px}
.duty-grip.s:hover::after{bottom:3px}
@media (hover: none) and (pointer: coarse){
  .duty-board,.duty-hourly,.duty-events{touch-action:pan-y}
  body:not(.edit-mode) .duty-events .duty-hit,
  body:not(.edit-mode) .duty-events .duty-block,
  body:not(.edit-mode) .duty-events .duty-block *,
  body:not(.edit-mode) .duty-events .duty-user,
  body:not(.edit-mode) .duty-events .duty-user *{
    pointer-events:none;touch-action:pan-y
  }
  body:not(.edit-mode) .duty-events .drop{pointer-events:auto;touch-action:manipulation}
  body.edit-mode .duty-events,
  body.edit-mode .duty-events .duty-hit,
  body.edit-mode .duty-events .duty-block:not(.is-work):not(.is-mixed),
  body.edit-mode .duty-events .duty-block:not(.is-work):not(.is-mixed) *,
  body.edit-mode .duty-events .duty-user,
  body.edit-mode .duty-events .duty-user *,
  body.edit-mode .duty-events .duty-free,
  body.edit-mode .duty-events .duty-grip{
    pointer-events:auto;touch-action:none
  }
}
body.is-duty{cursor:ns-resize;user-select:none}