/* ChoreBoy: a task row's "more" strip (rowmore.js; DESIGN.md "Row details: one line, the rest on hover").
   The row's body is its title line (the main button, and a phone's toggle beside it) with the strip
   under it. The strip folds with grid-template-rows (0fr ↔ 1fr), its pills fade and slide in one after
   another, and it folds away a little faster than it opens. Motion follows <html data-fx> (fx.js):
   subtle = a short fade, off (and reduced motion) = at once. */

.rm-body { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
.rm-body > :first-child { grid-column: 1; grid-row: 1; }
.rm-body > .rm-plain { grid-column: 1 / -1; }
.rm-toggle { display: none; }
.rm-sum { display: none; }

/* The title line: the title, then ⚡ Quickie, its time and 🚗 Leave by, flowing like words. */
.task-line { display: block; min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.task-line > .chip { margin-left: .35rem; vertical-align: 1px; max-width: 100%; }
.task-line > .leave-chip { white-space: normal; }

.rm-strip {
  grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .16s ease-in, visibility 0s linear .16s;
}
.rm-clip { min-height: 0; overflow: hidden; }
.rm-pad { display: flex; flex-direction: column; gap: .3rem; padding-top: .35rem; }
.rm-open .rm-strip { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .24s cubic-bezier(.2, .8, .2, 1), visibility 0s; }
/* Giving way to the row below: it folds at the pace that one opens (rowmore.js keeps that one at least as tall). */
.rm-swap .rm-strip { transition: grid-template-rows .24s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .24s; }
.rm-pad.rm-trim { transition: min-height .2s ease; }

/* Pills: in one after another (~25 ms apart), out together and faster. */
.rm-pad .task-chips > *, .rm-pad > :not(.task-chips) { opacity: 0; transform: translateY(-4px); transition: opacity .1s ease-in, transform .1s ease-in; }
.rm-open .rm-pad .task-chips > *, .rm-open .rm-pad > :not(.task-chips) { opacity: 1; transform: none; transition: opacity .2s ease-out, transform .22s cubic-bezier(.2, .8, .2, 1); }
.rm-open .rm-pad .task-chips > :nth-child(2) { transition-delay: 25ms; }
.rm-open .rm-pad .task-chips > :nth-child(3) { transition-delay: 50ms; }
.rm-open .rm-pad .task-chips > :nth-child(4) { transition-delay: 75ms; }
.rm-open .rm-pad .task-chips > :nth-child(5) { transition-delay: 100ms; }
.rm-open .rm-pad .task-chips > :nth-child(6) { transition-delay: 125ms; }
.rm-open .rm-pad .task-chips > :nth-child(7) { transition-delay: 150ms; }
.rm-open .rm-pad .task-chips > :nth-child(n+8) { transition-delay: 175ms; }
.rm-open .rm-pad > :not(.task-chips) { transition-delay: 60ms; }

/* A phone: a toggle on the title line (the number of hidden pills and a chevron), 44 px to tap. */
@media (hover: none), (pointer: coarse) {
  .rm-toggle {
    grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
    min-width: 44px; min-height: 44px; margin: -11px -.3rem -11px .2rem; padding: 0 .35rem;
    border: 0; border-radius: 999px; background: none; color: var(--text-2); font: 650 .72rem var(--font);
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .rm-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
  .rm-n { min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem; display: inline-grid; place-items: center; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); font-variant-numeric: tabular-nums; }
  .rm-open .rm-n { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }
  .rm-chev { width: .42rem; height: .42rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
  .rm-open .rm-chev { transform: translateY(2px) rotate(-135deg); }
}

/* ✨ Subtle: the strip is there at once and its pills fade in, quickly. */
html[data-fx="subtle"] .rm-strip, html[data-fx="subtle"] .rm-open .rm-strip { transition: none; }
html[data-fx="subtle"] .rm-pad .task-chips > *, html[data-fx="subtle"] .rm-pad > :not(.task-chips) { transform: none; transition: opacity .12s ease; transition-delay: 0s; }
html[data-fx="subtle"] .rm-chev, html[data-fx="subtle"] .rm-pad.rm-trim { transition: none; }

/* Off, and reduced motion: at once. */
html[data-fx="off"] .rm-strip, html[data-fx="off"] .rm-pad, html[data-fx="off"] .rm-pad .task-chips > *, html[data-fx="off"] .rm-pad > :not(.task-chips), html[data-fx="off"] .rm-chev { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .rm-strip, .rm-pad, .rm-pad .task-chips > *, .rm-pad > :not(.task-chips), .rm-chev { transition: none !important; }
}