/* SCF Tasks, the bolt board.

   In three seconds a viewer must understand how much of today the team has finished, and the element
   that carries it is the day bolt: a full bleed length of the shop's own cloth with a 116px numeral
   lying on it.

   The organising idea is that the day is a bolt of cloth made from the team's own fabrics, and
   finishing work is what reveals it. Every task is one length of that bolt, cut from the photograph
   of the fabric that person carries, so a person's tasks read as one continuous piece of their cloth
   with cuts between them. Take the cloth away and there is no progress, no grouping and no status
   control left on the page.

   Composition: the day bolt dominates the first screen, person bolts are stacked beneath it and are
   subordinate, and every bolt runs past the page gutter to the screen edge. The eye lands second on
   the first person's name, set on their own cloth. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Several elements are shown and hidden through the hidden attribute while their own rule sets a
   display value, and without this the attribute is ignored. */
[hidden] {
  display: none !important;
}

::selection {
  background: var(--accent);
  color: var(--accent-ink);
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

#app {
  --gutter: 18px;
  --col: 760px;
  --bleed: -18px;
  min-height: 100dvh;
  padding: var(--safe-t) var(--gutter) 0;
}

@media (min-width: 760px) {
  #app {
    --gutter: 28px;
    --bleed: -28px;
  }
}

@media (min-width: 1180px) {
  #app {
    --col: 1120px;
  }
}

.top,
#past-banner,
#main {
  max-width: var(--col);
  margin-inline: auto;
}

/* top bar */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 54px;
}

.wordmark {
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--f-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.me-chip,
.text-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 120ms var(--ease), background-color 180ms var(--ease), color 180ms var(--ease);
}

.me-chip {
  color: var(--ink-2);
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-btn {
  color: var(--accent);
}

.me-chip::after,
.text-btn::after {
  content: "";
  position: absolute;
  inset: -6px -4px;
}

.me-chip:active,
.text-btn:active {
  transform: scale(.97);
}

@media (hover: hover) and (pointer: fine) {
  .me-chip:hover {
    background: var(--ground-2);
    color: var(--ink);
  }

  .text-btn:hover {
    background: var(--accent-soft);
  }
}

/* past banner */

#past-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  padding: 9px 9px 9px 14px;
  margin-bottom: 14px;
  border-left: 2px solid var(--accent);
  background: var(--ground-2);
}

#past-banner-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.pill-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: transform 120ms var(--ease), background-color 180ms var(--ease);
}

.pill-btn:active {
  transform: scale(.97);
}

@media (hover: hover) and (pointer: fine) {
  .pill-btn:hover {
    background: var(--accent-deep);
  }
}

/* the day */

#main {
  padding-bottom: calc(112px + var(--safe-b));
}

#day {
  padding: 4px 0 16px;
}

.eyebrow {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--muted);
}

/* a bolt */

.bolt {
  position: relative;
  margin-inline: var(--bleed);
  overflow: hidden;
  background: var(--ground-2);
}

.bolt-day {
  height: 208px;
}

.bolt-cloth {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 5px;
}

.seg-group {
  position: relative;
  display: flex;
  gap: 2px;
  min-width: 0;
  flex: var(--grow, 1) 1 0;
}

/* Whose cloth this run is. It sits on the cloth like a ticket pinned to a bolt. */
.group-name {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: 7px 4px 10px;
  background: linear-gradient(to bottom, rgba(7, 6, 5, .72), rgba(7, 6, 5, 0));
  z-index: 4;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

.seg {
  position: relative;
  flex: 1 1 0;
  min-width: 2px;
  overflow: hidden;
  background: var(--ground-2);
}

/* The cloth of one person runs across all of their lengths as a single picture, so the gaps between
   the lengths read as cuts in one piece rather than as separate tiles. */
.seg-img {
  position: absolute;
  inset: 0;
  background-image: var(--cloth);
  background-size: var(--bg-size, 100%) 100%;
  background-position: var(--bg-pos, 50%) 50%;
  background-repeat: no-repeat;
}

.seg-veil {
  position: absolute;
  inset: 0;
  background: var(--ground);
  opacity: calc(1 - var(--lit-todo));
  transition: opacity 620ms var(--ease);
}

.seg[data-status="doing"] .seg-veil {
  opacity: calc(1 - var(--lit-doing));
}

.seg[data-status="done"] .seg-veil {
  opacity: calc(1 - var(--lit-done));
}

/* The one moment on this page that costs more than the rest: a length of cloth being drawn the
   instant its work is finished. Nothing else here moves. */
.seg-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-130%);
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .8) 46%, transparent 90%);
}

.seg.is-cut .seg-sheen {
  opacity: 1;
  transform: translateX(130%);
  transition: transform 620ms var(--spring), opacity 620ms var(--ease);
}

.bolt-selvedge {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(246, 244, 241, .34) 0 2px, transparent 2px 7px) top left / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, rgba(246, 244, 241, .34) 0 2px, transparent 2px 7px) bottom left / 100% 3px no-repeat;
}

.bolt-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(7, 6, 5, .9) 0%, rgba(7, 6, 5, .42) 32%, rgba(7, 6, 5, 0) 64%);
}

.bolt-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

.day-figure {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 10px;
  z-index: 3;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 14px;
  margin: 0;
}

#day-count {
  font-family: var(--f-display);
  font-size: 116px;
  line-height: .78;
  letter-spacing: -.01em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 8px 34px rgba(0, 0, 0, .55);
}

#day-of {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  padding-bottom: 6px;
}

/* the measure under the day bolt, one tick a task and a longer tick every fifth */
.measure {
  height: 14px;
  margin-inline: var(--bleed);
  background-image:
    repeating-linear-gradient(90deg, var(--ghost) 0 1px, transparent 1px var(--pitch-5, 50%)),
    repeating-linear-gradient(90deg, var(--rail) 0 1px, transparent 1px var(--pitch, 10%));
  background-size: 100% 11px, 100% 6px;
  background-position: left top, left top;
  background-repeat: no-repeat, no-repeat;
}

#day-copy {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--muted);
}

/* people */

#people {
  display: grid;
  gap: 14px;
}

@media (min-width: 760px) {
  .bolt-day {
    height: clamp(208px, 21vw, 320px);
  }

  #day-count {
    font-size: clamp(116px, 13vw, 208px);
  }

  #day-of {
    font-size: 14px;
  }

  .person-bolt {
    height: 124px;
  }

  .person-name {
    font-size: 36px;
  }
}

@media (min-width: 1180px) {
  #people {
    grid-template-columns: 1fr 1fr;
    gap: 18px 28px;
    align-items: start;
  }

  /* An opened person takes the whole row, so the shelf never goes ragged. */
  .person[data-open="true"] {
    grid-column: 1 / -1;
  }
}

.person {
  margin-inline: var(--bleed);
}

.person-bolt {
  display: block;
  width: 100%;
  margin-inline: 0;
  height: 108px;
  padding: 0;
  border: 0;
  text-align: left;
  transition: transform 160ms var(--ease);
}

.person-bolt:active {
  transform: scale(.994);
}

.person-name {
  position: absolute;
  left: var(--gutter);
  bottom: 8px;
  z-index: 3;
  font-family: var(--f-display);
  font-size: 30px;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 4px 20px rgba(0, 0, 0, .6);
  max-width: calc(100% - 140px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.person-count {
  position: absolute;
  right: var(--gutter);
  bottom: 13px;
  z-index: 3;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}

.person-you {
  position: absolute;
  left: var(--gutter);
  top: 9px;
  z-index: 3;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
}

.person-open {
  position: absolute;
  right: var(--gutter);
  top: 9px;
  z-index: 3;
  width: 22px;
  height: 22px;
  color: var(--ink-2);
}

.person-open::before,
.person-open::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 14px;
  height: 2px;
  background: currentColor;
  transition: transform 260ms var(--ease), opacity 260ms var(--ease);
}

.person-open::after {
  transform: rotate(90deg);
}

.person[data-open="true"] .person-open::after {
  transform: rotate(0deg);
  opacity: 0;
}

/* the tasks under a person */

.person-tasks {
  padding: 0 var(--gutter);
  background: var(--ground-2);
}

.bolt-name {
  margin: 0;
  padding: 11px 0 12px;
  border-bottom: 1px solid var(--rail);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

.task {
  display: flex;
  align-items: stretch;
  gap: 14px;
  padding: 0;
  border-bottom: 1px solid var(--rail);
  transition: background-color 400ms var(--ease);
}

.task:last-child {
  border-bottom: 0;
}

.task.is-hit {
  background: var(--accent-soft);
}

.task-spine {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  min-height: 74px;
  padding: 0;
  margin: 14px 0;
  border: 0;
  overflow: hidden;
  background: var(--ground);
  transition: transform 140ms var(--ease);
}

.task-spine .seg-img {
  background-size: cover;
  background-position: center;
}

.task-spine:active {
  transform: scale(.96);
}

.task-spine.is-static {
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  .task-spine:hover .seg-veil {
    opacity: calc(1 - var(--lit-doing));
  }
}

.task-main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 14px 0 16px;
}

.task-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0 0 5px;
}

.task-cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}

.task-state {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.task-title {
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font-family: var(--f-ui);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.34;
  color: var(--ink);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 160ms var(--ease);
}

p.task-title {
  cursor: default;
}

@media (hover: hover) and (pointer: fine) {
  button.task-title:hover {
    color: var(--accent);
  }
}

.task-note {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.task[data-status="done"] .task-main {
  opacity: .58;
}

.task-empty {
  padding: 16px 0 20px;
  font-size: 13px;
  color: var(--muted);
}

/* the cold load */

.skeleton {
  height: 108px;
  margin-inline: var(--bleed);
  background: var(--ground-2);
  animation: pulse 1.6s var(--ease) infinite;
}

.skeleton:nth-child(2) {
  animation-delay: .12s;
}

.skeleton:nth-child(3) {
  animation-delay: .24s;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .4;
  }
}

/* the add control */

#app:has(#add-btn:not([hidden]))::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(104px + var(--safe-b));
  z-index: 10;
  pointer-events: none;
  background: linear-gradient(to top, var(--ground) 40%, rgba(18, 16, 14, 0));
}

#add-btn {
  position: fixed;
  left: 50%;
  bottom: calc(18px + var(--safe-b));
  transform: translateX(-50%);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: var(--shadow-lift);
  transition: transform 140ms var(--ease), background-color 180ms var(--ease);
}

#add-btn:active {
  transform: translateX(-50%) scale(.97);
}

@media (hover: hover) and (pointer: fine) {
  #add-btn:hover {
    background: var(--accent-deep);
  }
}

/* the sheets */

dialog.sheet-dlg {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}

dialog.sheet-dlg[open] {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overscroll-behavior: contain;
}

dialog.sheet-dlg::backdrop {
  background: rgba(7, 6, 5, .74);
  opacity: 1;
  transition: opacity 200ms var(--ease);
}

@starting-style {
  dialog.sheet-dlg[open]::backdrop {
    opacity: 0;
  }
}

dialog.sheet-dlg.is-closing::backdrop {
  opacity: 0;
}

.dlg {
  width: 100%;
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 18px calc(22px + var(--safe-b));
  background: var(--panel);
  border-top: 2px solid var(--accent);
  transform: translateY(100%);
  opacity: 0;
  transition: transform 320ms var(--ease), opacity 320ms var(--ease);
}

.dlg:focus,
.dlg:focus-visible {
  outline: none;
}

dialog.sheet-dlg[open] .dlg {
  transform: none;
  opacity: 1;
}

@starting-style {
  dialog.sheet-dlg[open] .dlg {
    transform: translateY(100%);
    opacity: 0;
  }
}

dialog.sheet-dlg.is-closing .dlg {
  transform: translateY(100%);
  opacity: 0;
  transition-duration: 200ms;
}

.dlg-grip {
  width: 34px;
  height: 3px;
  margin: 5px auto 14px;
  background: var(--rail);
}

@media (min-width: 760px) {
  dialog.sheet-dlg[open] {
    align-items: center;
  }

  .dlg {
    width: min(540px, 100% - 36px);
    max-height: 88dvh;
    padding: 26px 26px 22px;
    border: 1px solid var(--rail);
    border-top: 2px solid var(--accent);
    transform: scale(.96);
  }

  dialog.sheet-dlg[open] .dlg {
    transform: none;
  }

  @starting-style {
    dialog.sheet-dlg[open] .dlg {
      transform: scale(.96);
      opacity: 0;
    }
  }

  dialog.sheet-dlg.is-closing .dlg {
    transform: scale(.96);
  }

  .dlg-grip {
    display: none;
  }
}

.dlg-title {
  margin: 0 0 6px;
  font-family: var(--f-display);
  font-size: 30px;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--ink);
}

.dlg-sub {
  margin: 0 0 22px;
  font-size: 13.5px;
  color: var(--muted);
}

.dlg-foot {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--rail);
}

/* fields */

.field {
  margin-bottom: 20px;
}

.field-label {
  display: block;
  margin-bottom: 9px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--rail);
  border-radius: var(--r-sm);
  background: var(--ground);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.4;
  transition: border-color 180ms var(--ease), background-color 180ms var(--ease);
}

textarea.input {
  resize: vertical;
  min-height: 64px;
}

.input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.input:focus-visible {
  outline-offset: 1px;
  background: var(--ground-2);
}

.input[disabled] {
  opacity: .45;
  pointer-events: none;
}

.field-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.field-row .input {
  flex: 1 1 auto;
}

.field-err {
  margin: 9px 0 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--bad);
}

.field-err:empty {
  display: none;
}

.field.is-bad .input {
  border-color: var(--bad);
}

/* chips */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--rail);
  border-radius: var(--r-sm);
  background: var(--ground);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  overflow: hidden;
  transition: transform 120ms var(--ease), background-color 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease);
}

.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.chip span {
  position: relative;
  z-index: 2;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9);
}

/* A person's chip carries their own cloth, so picking a name is picking a bolt. */
.chip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: var(--cloth, none);
  background-size: cover;
  background-position: center;
  opacity: .3;
  transition: opacity 180ms var(--ease);
}

.chip:active {
  transform: scale(.97);
}

.chip:has(input:checked) {
  border-color: var(--accent);
  color: var(--ink);
}

.chip:has(input:checked)::before {
  opacity: .82;
}

.chip:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .chip:hover {
    border-color: var(--ghost);
  }
}

/* buttons */

.dlg-actions,
.dlg-confirm {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.confirm-text {
  margin-right: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: var(--f-ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  background: none;
  transition: transform 120ms var(--ease), background-color 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease);
}

.btn:active {
  transform: scale(.97);
}

.btn[disabled] {
  opacity: .45;
  pointer-events: none;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn-plain {
  color: var(--muted);
}

.btn-danger-plain {
  margin-right: auto;
  color: var(--bad);
}

.btn-danger {
  background: var(--bad);
  color: var(--bad-soft);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    background: var(--accent-deep);
  }

  .btn-plain:hover {
    background: var(--ground);
    color: var(--ink-2);
  }

  .btn-danger-plain:hover {
    background: var(--bad-soft);
  }

  .btn-danger:hover {
    filter: brightness(1.06);
  }
}

.btn-busy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.btn[aria-busy="true"] .btn-label {
  opacity: 0;
}

.btn[aria-busy="true"] .btn-busy {
  opacity: 1;
}

.btn[aria-busy="true"] {
  pointer-events: none;
}

/* the lists inside the sheets */

.day-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 12px;
  width: 100%;
  min-height: 62px;
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid var(--rail);
  background: none;
  text-align: left;
  transition: background-color 180ms var(--ease);
}

.day-row:last-of-type {
  border-bottom: 0;
}

.day-label {
  font-family: var(--f-display);
  font-size: 19px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
}

.day-count {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.day-strip {
  grid-column: 1 / -1;
  display: flex;
  gap: 2px;
  height: 7px;
}

.day-strip i {
  flex: 1 1 0;
  background: var(--rail);
}

.day-strip i[data-status="done"] {
  background: var(--accent);
}

.day-strip i[data-status="doing"] {
  background: var(--accent-deep);
  opacity: .5;
}

.day-row[aria-current="true"] .day-label {
  color: var(--accent);
}

@media (hover: hover) and (pointer: fine) {
  .day-row:hover {
    background: var(--ground);
  }
}

.list-empty {
  padding: 14px 0 20px;
  font-size: 13px;
  color: var(--muted);
}

.who-row {
  position: relative;
  display: block;
  width: 100%;
  height: 64px;
  line-height: 64px;
  padding: 0 16px;
  margin-bottom: 6px;
  border: 1px solid var(--rail);
  border-radius: var(--r-sm);
  background: var(--ground);
  overflow: hidden;
  text-align: left;
  font-family: var(--f-display);
  font-size: 23px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
  transition: border-color 180ms var(--ease), transform 120ms var(--ease);
}

.who-cloth {
  position: absolute;
  inset: 0;
  background-image: var(--cloth);
  background-size: cover;
  background-position: center;
  opacity: .62;
}

/* Named on purpose. A bare `.who-row span` also matches the cloth layer and, being one class and one
   element, outranks `.who-cloth` and drags it back out of absolute positioning. */
.who-name {
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .95);
}

/* The name sits at the left, so the cloth is darkened most at the left. A pale print needs it. */
.who-cloth::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 6, 5, .8) 0%, rgba(7, 6, 5, .42) 44%, rgba(7, 6, 5, .12) 100%);
}

.who-row:active {
  transform: scale(.985);
}

.who-row[aria-current="true"] {
  border-color: var(--accent);
}

@media (hover: hover) and (pointer: fine) {
  .who-row:hover {
    border-color: var(--ghost);
  }
}

.team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--rail);
}

.team-row:last-of-type {
  border-bottom: 0;
}

.team-row-name {
  font-family: var(--f-display);
  font-size: 18px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.team-row.is-hidden .team-row-name {
  color: var(--ghost);
}

#team-list {
  margin-bottom: 22px;
}

/* toast */

#toast {
  position: fixed;
  left: 50%;
  bottom: calc(80px + var(--safe-b));
  z-index: 30;
  max-width: min(420px, calc(100vw - 36px));
  padding: 12px 16px;
  border-left: 2px solid var(--accent);
  background: var(--panel);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  box-shadow: var(--shadow-lift);
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}

#toast.is-up {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-duration: 220ms;
}

#toast:empty {
  display: none;
}

/* reduced motion */

@media (prefers-reduced-motion: reduce) {
  .me-chip,
  .text-btn,
  .pill-btn,
  .chip,
  .btn,
  .task-spine,
  .person-bolt,
  .who-row,
  #add-btn {
    transition-property: background-color, border-color, color, opacity;
  }

  .me-chip:active,
  .text-btn:active,
  .pill-btn:active,
  .chip:active,
  .btn:active,
  .task-spine:active,
  .person-bolt:active,
  .who-row:active {
    transform: none;
  }

  #add-btn:active {
    transform: translateX(-50%);
  }

  .dlg,
  dialog.sheet-dlg[open] .dlg,
  dialog.sheet-dlg.is-closing .dlg {
    transform: none;
    transition-property: opacity;
  }

  .seg.is-cut .seg-sheen {
    transition: none;
    opacity: 0;
  }

  .person-open::before,
  .person-open::after {
    transition: none;
  }

  .skeleton {
    animation: none;
    opacity: .7;
  }

  #toast,
  #toast.is-up {
    transform: translate(-50%, 0);
    transition-property: opacity;
  }
}