/* /funcionalidades/tareas-y-tiempo/ — one task at /app/tasks/[id]. Three
   scenes (pantallas-escenas.js): 0 the task, and a subtask ticked off — the
   resting state; 1 the page further down at Time, the running timer
   stopped and logged; 2 thirty minutes logged by hand. Every rule states
   the resting frame; each scene overrides what differs at its end, and the
   motion only plays up to it. */

@property --tt-d {
  syntax: '<integer>';
  inherits: false;
  initial-value: 2;
}

@property --tt-p {
  syntax: '<integer>';
  inherits: false;
  initial-value: 67;
}

@property --tt-s {
  syntax: '<integer>';
  inherits: false;
  initial-value: 39;
}

.pn-frame[data-screen="tasks-time"] {
  --tt-accent: #467557;
  --tt-elev: #f6f6f7;
  --tt-warn-soft: #fdf3dc;
  /* How far the page scrolls to put Time in view. */
  --tt-lift: -540px;
}

.pn-frame[data-screen="tasks-time"] .pn-scroll { overflow: hidden; }
.pn-frame[data-screen="tasks-time"] .tt-i { width: 13px; height: 13px; flex-shrink: 0; }
.pn-frame[data-screen="tasks-time"] .md-btn { white-space: nowrap; }
.pn-frame[data-screen="tasks-time"] .md-btn.is-sm { gap: 5px; padding: 5px 10px; border-radius: 7px; font-size: 9.5px; }
.pn-frame[data-screen="tasks-time"] .md-btn.is-sm svg { width: 11px; height: 11px; }
.pn-frame[data-screen="tasks-time"] .md-btn.is-danger { border-color: var(--ac-bad); background: var(--ac-bad); color: #fff; }
.pn-frame[data-screen="tasks-time"] .md-btn.is-off { opacity: 0.6; }

/* ---------- the header ---------- */

.pn-frame[data-screen="tasks-time"] .tt-page { display: flex; flex-direction: column; gap: 13px; }
.pn-frame[data-screen="tasks-time"] .tt-top { display: flex; flex-direction: column; gap: 10px; }
.pn-frame[data-screen="tasks-time"] .tt-back { color: var(--tt-accent); font-size: 11px; }
.pn-frame[data-screen="tasks-time"] .tt-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.pn-frame[data-screen="tasks-time"] .tt-title em { color: var(--ac-dim); font-family: var(--ac-mono); font-size: 13px; font-style: normal; font-weight: 400; letter-spacing: 0; }
.pn-frame[data-screen="tasks-time"] .tt-badges { display: flex; flex-wrap: wrap; gap: 6.5px; margin-top: 6px; }
.pn-frame[data-screen="tasks-time"] .tt-ibtn { width: 29px; height: 29px; }

/* ---------- the two columns ---------- */

.pn-frame[data-screen="tasks-time"] .tt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 256px;
  align-items: start;
  gap: 19px;
}

.pn-frame[data-screen="tasks-time"] .tt-main,
.pn-frame[data-screen="tasks-time"] .tt-side { display: flex; min-width: 0; flex-direction: column; gap: 19px; }

.pn-frame[data-screen="tasks-time"] .tt-card { overflow: visible; }

.pn-frame[data-screen="tasks-time"] .tt-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 19px;
  border-bottom: 1px solid var(--ac-line);
}

.pn-frame[data-screen="tasks-time"] .tt-tile {
  display: grid;
  width: 29px;
  height: 29px;
  flex-shrink: 0;
  place-items: center;
  border-radius: 8px;
  background: var(--tt-elev);
  color: var(--ac-mut);
}

.pn-frame[data-screen="tasks-time"] .tt-tile .tt-i { width: 14px; height: 14px; }
.pn-frame[data-screen="tasks-time"] .tt-card-head > p { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; line-height: 1.35; }
.pn-frame[data-screen="tasks-time"] .tt-head-action { display: flex; flex-shrink: 0; align-items: center; gap: 10px; }
.pn-frame[data-screen="tasks-time"] .tt-card-body { padding: 16px 19px; }

.pn-frame[data-screen="tasks-time"] .tt-card-foot {
  display: flex;
  gap: 6.5px;
  padding: 11px 19px;
  border-top: 1px solid var(--ac-line);
  border-radius: 0 0 13px 13px;
  background: rgb(246 246 247 / 0.4);
}

.pn-frame[data-screen="tasks-time"] .tt-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  height: 29px;
  box-sizing: border-box;
  padding: 0 10px;
  overflow: hidden;
  border: 1px solid var(--ac-line);
  border-radius: 7px;
  background: #fff;
  color: var(--ac-ink);
  font-size: 11px;
  white-space: nowrap;
}

.pn-frame[data-screen="tasks-time"] .tt-input em,
.pn-frame[data-screen="tasks-time"] .tt-input .tt-ph { color: var(--ac-dim); font-style: normal; }
.pn-frame[data-screen="tasks-time"] .tt-input .tt-i { width: 12px; height: 12px; color: var(--ac-dim); }
.pn-frame[data-screen="tasks-time"] .tt-input.is-grow { flex: 1; }

.pn-frame[data-screen="tasks-time"] .tt-desc { color: var(--ac-ink); font-size: 11px; line-height: 1.6; }

/* ---------- Subtasks ---------- */

.pn-frame[data-screen="tasks-time"] .tt-count { color: var(--ac-dim); font-family: var(--ac-mono); font-size: 9.5px; font-variant-numeric: tabular-nums; }
.pn-frame[data-screen="tasks-time"] .tt-count b { font-weight: 400; counter-reset: tt-d var(--tt-d); }
.pn-frame[data-screen="tasks-time"] .tt-count b::after { content: counter(tt-d); }

.pn-frame[data-screen="tasks-time"] .tt-progress { display: flex; align-items: center; gap: 6.5px; }
.pn-frame[data-screen="tasks-time"] .tt-tri { display: flex; width: 64px; flex-direction: column; gap: 2px; }
.pn-frame[data-screen="tasks-time"] .tt-tri u { display: block; height: 3px; overflow: hidden; border-radius: 99px; background: var(--tt-elev); }
.pn-frame[data-screen="tasks-time"] .tt-tri u.is-unused { height: 1px; margin: 1px 0; background: var(--ac-line); }
.pn-frame[data-screen="tasks-time"] .tt-tri s { display: block; height: 100%; border-radius: 99px; background: var(--tt-accent); }
.pn-frame[data-screen="tasks-time"] .tt-tri .tt-sub s { width: 67%; }
.pn-frame[data-screen="tasks-time"] .tt-pct { width: 29px; color: var(--ac-ink); font-size: 9.5px; font-weight: 400; text-align: right; counter-reset: tt-p var(--tt-p); }
.pn-frame[data-screen="tasks-time"] .tt-pct::after { content: counter(tt-p) '%'; }

.pn-frame[data-screen="tasks-time"] .tt-subtasks { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; }
.pn-frame[data-screen="tasks-time"] .tt-subtask { display: flex; align-items: center; gap: 8px; }

.pn-frame[data-screen="tasks-time"] .tt-box {
  display: grid;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  box-sizing: border-box;
  place-items: center;
  border: 1px solid #b9bdc5;
  border-radius: 3px;
  background: #fff;
  color: transparent;
}

.pn-frame[data-screen="tasks-time"] .tt-box .tt-i { width: 9px; height: 9px; stroke-width: 3; }

.pn-frame[data-screen="tasks-time"] .tt-subtask.is-done .tt-box,
.pn-frame[data-screen="tasks-time"] .tt-subtask.is-ticked .tt-box { border-color: var(--tt-accent); background: var(--tt-accent); color: #fff; }

.pn-frame[data-screen="tasks-time"] .tt-subtask-text { flex: 1; min-width: 0; color: var(--ac-ink); font-size: 11px; }
.pn-frame[data-screen="tasks-time"] .tt-subtask-text b { font-weight: 400; }
.pn-frame[data-screen="tasks-time"] .tt-subtask-text em { display: block; margin-top: 1px; color: var(--ac-dim); font-size: 9.5px; font-style: normal; }

.pn-frame[data-screen="tasks-time"] .tt-subtask.is-done .tt-subtask-text b,
.pn-frame[data-screen="tasks-time"] .tt-subtask.is-ticked .tt-subtask-text b { color: var(--ac-dim); text-decoration: line-through; }

.pn-frame[data-screen="tasks-time"] .tt-owner {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 7px;
  border: 1px solid var(--ac-line);
  border-radius: 6px;
  background: #fff;
  color: var(--ac-ink);
  font-size: 9.5px;
}

.pn-frame[data-screen="tasks-time"] .tt-owner .tt-i { width: 10px; height: 10px; color: var(--ac-dim); }
.pn-frame[data-screen="tasks-time"] .tt-mini { display: grid; flex-shrink: 0; place-items: center; color: var(--ac-dim); }
.pn-frame[data-screen="tasks-time"] .tt-mini .tt-i { width: 10px; height: 10px; }

/* ---------- Comments ---------- */

.pn-frame[data-screen="tasks-time"] .tt-mark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--ac-mut);
  font-size: 9.5px;
  font-weight: 500;
}

.pn-frame[data-screen="tasks-time"] .tt-mark .tt-i { width: 11px; height: 11px; }
.pn-frame[data-screen="tasks-time"] .tt-thread { display: flex; flex-direction: column; gap: 8px; }
.pn-frame[data-screen="tasks-time"] .tt-vis { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }

.pn-frame[data-screen="tasks-time"] .tt-vis-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 7px;
  color: var(--ac-mut);
  font-size: 9.5px;
  font-weight: 500;
}

.pn-frame[data-screen="tasks-time"] .tt-vis-btn .tt-i { width: 11px; height: 11px; }
.pn-frame[data-screen="tasks-time"] .tt-vis-btn.is-internal { background: var(--tt-warn-soft); color: var(--ac-warn); }
.pn-frame[data-screen="tasks-time"] .tt-vis em { margin-left: 3px; color: var(--ac-dim); font-size: 9.5px; font-style: normal; }
.pn-frame[data-screen="tasks-time"] .tt-editor { overflow: hidden; border: 1px solid var(--ac-line); border-radius: 7px; background: #fff; }

.pn-frame[data-screen="tasks-time"] .tt-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px 5px;
  border-bottom: 1px solid var(--ac-line);
  background: rgb(246 246 247 / 0.4);
}

.pn-frame[data-screen="tasks-time"] .tt-tool { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 5px; color: var(--ac-mut); }
.pn-frame[data-screen="tasks-time"] .tt-tool .tt-i { width: 12px; height: 12px; }
.pn-frame[data-screen="tasks-time"] .tt-sep { width: 1px; height: 13px; margin: 0 3px; background: var(--ac-line); }
.pn-frame[data-screen="tasks-time"] .tt-editor p { min-height: 70px; box-sizing: border-box; padding: 8px 10px; font-size: 11px; }
.pn-frame[data-screen="tasks-time"] .tt-editor p em { color: var(--ac-dim); font-style: normal; }
.pn-frame[data-screen="tasks-time"] .tt-extras { display: flex; flex-wrap: wrap; gap: 5px; }

.pn-frame[data-screen="tasks-time"] .tt-extra {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--ac-line);
  border-radius: 7px;
  color: var(--ac-mut);
  font-size: 9.5px;
}

.pn-frame[data-screen="tasks-time"] .tt-extra .tt-i { width: 11px; height: 11px; }
.pn-frame[data-screen="tasks-time"] .tt-send { display: flex; align-items: center; justify-content: space-between; gap: 6.5px; }

.pn-frame[data-screen="tasks-time"] .tt-comment {
  margin-top: 5px;
  padding: 11px;
  border: 1px solid var(--ac-line);
  border-radius: 10px;
  background: rgb(246 246 247 / 0.4);
}

.pn-frame[data-screen="tasks-time"] .tt-comment-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6.5px; font-size: 9.5px; }
.pn-frame[data-screen="tasks-time"] .tt-comment-head b { color: var(--ac-ink); font-weight: 500; }
.pn-frame[data-screen="tasks-time"] .tt-comment-head time { color: var(--ac-dim); font-variant-numeric: tabular-nums; }
.pn-frame[data-screen="tasks-time"] .tt-comment-body { margin-top: 6px; color: var(--ac-ink); font-size: 11px; line-height: 1.55; }

/* ---------- Time ---------- */

.pn-frame[data-screen="tasks-time"] .tt-totals { display: inline-grid; }
.pn-frame[data-screen="tasks-time"] .tt-totals > b { grid-area: 1 / 1; justify-self: end; color: var(--ac-dim); font-family: var(--ac-mono); font-size: 9.5px; font-variant-numeric: tabular-nums; font-weight: 400; white-space: nowrap; }
.pn-frame[data-screen="tasks-time"] .tt-totals .is-timer,
.pn-frame[data-screen="tasks-time"] .tt-totals .is-logged { visibility: hidden; }

.pn-frame[data-screen="tasks-time"] .tt-time-body { display: flex; flex-direction: column; gap: 10px; }
.pn-frame[data-screen="tasks-time"] .tt-timer { display: flex; align-items: center; }
.pn-frame[data-screen="tasks-time"] .tt-swap { display: flex; align-items: center; }

/* The face the product does not draw takes no room: no width, no padding,
   no border — so what is drawn sits where the product draws it. */
.pn-frame[data-screen="tasks-time"] .tt-swap > * { overflow: hidden; white-space: nowrap; }
.pn-frame[data-screen="tasks-time"] .tt-timer-btn .is-idle,
.pn-frame[data-screen="tasks-time"] .tt-timer-face .is-idle { max-width: 0; padding-right: 0; padding-left: 0; border-width: 0; visibility: hidden; }
.pn-frame[data-screen="tasks-time"] .tt-timer-btn .is-running,
.pn-frame[data-screen="tasks-time"] .tt-timer-btn .is-idle,
.pn-frame[data-screen="tasks-time"] .tt-timer-face > * { max-width: 220px; }
.pn-frame[data-screen="tasks-time"] .tt-timer-face { margin-left: 10px; }
.pn-frame[data-screen="tasks-time"] .tt-timer-face em { color: var(--ac-dim); font-size: 9.5px; font-style: normal; }
.pn-frame[data-screen="tasks-time"] .tt-clock { color: var(--ac-ink); font-family: var(--ac-mono); font-size: 14px; font-variant-numeric: tabular-nums; font-weight: 400; counter-reset: tt-s var(--tt-s); }
.pn-frame[data-screen="tasks-time"] .tt-clock::after { content: counter(tt-s, decimal-leading-zero); }

.pn-frame[data-screen="tasks-time"] .tt-log {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6.5px;
  padding-top: 10px;
  border-top: 1px solid var(--ac-line);
}

.pn-frame[data-screen="tasks-time"] .tt-field { display: block; }
.pn-frame[data-screen="tasks-time"] .tt-field > em { display: block; margin-bottom: 5px; color: var(--ac-ink); font-size: 11px; font-style: normal; font-weight: 500; }
.pn-frame[data-screen="tasks-time"] .tt-minutes { width: 77px; }
.pn-frame[data-screen="tasks-time"] .tt-note { min-width: 128px; }
.pn-frame[data-screen="tasks-time"] .tt-log .tt-input { display: grid; justify-content: stretch; }
.pn-frame[data-screen="tasks-time"] .tt-log .tt-input > i { grid-area: 1 / 1; font-style: normal; }
.pn-frame[data-screen="tasks-time"] .tt-typed { visibility: hidden; }
.pn-frame[data-screen="tasks-time"] .tt-typed > span { display: inline-block; overflow: hidden; vertical-align: bottom; white-space: nowrap; }
.pn-frame[data-screen="tasks-time"] .tt-log-btn { opacity: 0.6; }

.pn-frame[data-screen="tasks-time"] .tt-entries { margin: 0; padding: 0; list-style: none; }

.pn-frame[data-screen="tasks-time"] .tt-entry {
  display: flex;
  max-height: 40px;
  align-items: center;
  gap: 10px;
  padding: 6.5px 0;
  overflow: hidden;
  border-top: 1px solid var(--ac-line);
  font-size: 11px;
}

.pn-frame[data-screen="tasks-time"] .tt-entry em { color: var(--ac-dim); font-family: var(--ac-mono); font-size: 9.5px; font-style: normal; font-variant-numeric: tabular-nums; }
.pn-frame[data-screen="tasks-time"] .tt-entry b { color: var(--ac-ink); font-variant-numeric: tabular-nums; font-weight: 500; }
.pn-frame[data-screen="tasks-time"] .tt-entry span { flex: 1; min-width: 0; overflow: hidden; color: var(--ac-mut); text-overflow: ellipsis; white-space: nowrap; }
.pn-frame[data-screen="tasks-time"] .tt-entry.is-timer,
.pn-frame[data-screen="tasks-time"] .tt-entry.is-logged { max-height: 0; padding-top: 0; padding-bottom: 0; border-top-width: 0; visibility: hidden; }

/* ---------- Details ---------- */

.pn-frame[data-screen="tasks-time"] .tt-details { display: flex; flex-direction: column; gap: 13px; }
.pn-frame[data-screen="tasks-time"] .tt-detail > em { display: block; margin-bottom: 5px; color: var(--ac-ink); font-size: 11px; font-style: normal; font-weight: 500; }
.pn-frame[data-screen="tasks-time"] .tt-people { display: flex; flex-direction: column; gap: 5px; }
.pn-frame[data-screen="tasks-time"] .tt-person { display: flex; align-items: center; gap: 6.5px; color: var(--ac-ink); font-size: 11px; font-weight: 500; }
.pn-frame[data-screen="tasks-time"] .tt-person .pn-ava { width: 19px; height: 19px; font-size: 7.5px; }
.pn-frame[data-screen="tasks-time"] .tt-link { color: var(--ac-ink); font-size: 11px; font-weight: 500; }
.pn-frame[data-screen="tasks-time"] .tt-related { color: var(--tt-accent); font-size: 11px; }
.pn-frame[data-screen="tasks-time"] .tt-related em { color: var(--ac-mut); font-size: 9.5px; font-style: normal; }
.pn-frame[data-screen="tasks-time"] .tt-faint { color: var(--ac-dim); font-size: 11px; }
.pn-frame[data-screen="tasks-time"] .tt-value { color: var(--ac-ink); font-size: 11px; }

/* ---------- scene 1: Time, the timer stopped and logged ---------- */

.pn-frame[data-screen="tasks-time"][data-mk-scene="1"] .pn-body,
.pn-frame[data-screen="tasks-time"][data-mk-scene="2"] .pn-body { transform: translateY(var(--tt-lift)); }

.pn-frame[data-screen="tasks-time"][data-mk-scene="1"] .tt-timer-btn .is-running,
.pn-frame[data-screen="tasks-time"][data-mk-scene="2"] .tt-timer-btn .is-running,
.pn-frame[data-screen="tasks-time"][data-mk-scene="1"] .tt-timer-face .is-running,
.pn-frame[data-screen="tasks-time"][data-mk-scene="2"] .tt-timer-face .is-running { max-width: 0; padding-right: 0; padding-left: 0; border-width: 0; visibility: hidden; }

.pn-frame[data-screen="tasks-time"][data-mk-scene="1"] .tt-timer-btn .is-idle,
.pn-frame[data-screen="tasks-time"][data-mk-scene="2"] .tt-timer-btn .is-idle { max-width: 220px; padding-right: 12px; padding-left: 12px; border-width: 1px; visibility: visible; }

.pn-frame[data-screen="tasks-time"][data-mk-scene="1"] .tt-timer-face .is-idle,
.pn-frame[data-screen="tasks-time"][data-mk-scene="2"] .tt-timer-face .is-idle { max-width: 220px; visibility: visible; }

.pn-frame[data-screen="tasks-time"][data-mk-scene="1"] .tt-entry.is-timer,
.pn-frame[data-screen="tasks-time"][data-mk-scene="2"] .tt-entry.is-timer { max-height: 40px; padding-top: 6.5px; padding-bottom: 6.5px; border-top-width: 1px; visibility: visible; }

.pn-frame[data-screen="tasks-time"][data-mk-scene="1"] .tt-totals .is-before,
.pn-frame[data-screen="tasks-time"][data-mk-scene="2"] .tt-totals .is-before,
.pn-frame[data-screen="tasks-time"][data-mk-scene="2"] .tt-totals .is-timer { visibility: hidden; }
.pn-frame[data-screen="tasks-time"][data-mk-scene="1"] .tt-totals .is-timer { visibility: visible; }

/* ---------- scene 2: thirty minutes by hand ---------- */

.pn-frame[data-screen="tasks-time"][data-mk-scene="2"] .tt-entry.is-logged { max-height: 40px; padding-top: 6.5px; padding-bottom: 6.5px; border-top-width: 1px; visibility: visible; }
.pn-frame[data-screen="tasks-time"][data-mk-scene="2"] .tt-totals .is-logged { visibility: visible; }

@media (prefers-reduced-motion: no-preference) {
  /* scene 0 — the second subtask is ticked: its box, its line, the count,
     the bar and the percent. */
  .pn-frame[data-screen="tasks-time"][data-mk-scene="0"] .tt-subtask.is-ticked .tt-box { animation: tt-box-open 1.5s step-end, tt-press 0.22s ease 1.3s; }
  .pn-frame[data-screen="tasks-time"][data-mk-scene="0"] .tt-subtask.is-ticked .tt-subtask-text b { animation: tt-text-open 1.5s step-end; }
  .pn-frame[data-screen="tasks-time"][data-mk-scene="0"] .tt-count b { animation: tt-count-one 1.5s step-end; }
  .pn-frame[data-screen="tasks-time"][data-mk-scene="0"] .tt-pct { animation: tt-pct-third 1.5s step-end; }
  .pn-frame[data-screen="tasks-time"][data-mk-scene="0"] .tt-tri .tt-sub s { animation: tt-bar 0.45s ease 1.5s both; }

  /* scene 1 — the page scrolls to Time; the clock runs; Stop, and the hour
     and twelve minutes are an entry. */
  .pn-frame[data-screen="tasks-time"][data-mk-scene="1"] .pn-body { animation: tt-scroll 0.95s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both; }
  .pn-frame[data-screen="tasks-time"][data-mk-scene="1"] .tt-clock { animation: tt-tick 3s steps(3, end) both; }
  .pn-frame[data-screen="tasks-time"][data-mk-scene="1"] .tt-timer-btn .is-running { animation: tt-held-shown 3.2s step-end, tt-press 0.22s ease 3s; }
  .pn-frame[data-screen="tasks-time"][data-mk-scene="1"] .tt-timer-face .is-running { animation: tt-face-shown 3.2s step-end; }
  .pn-frame[data-screen="tasks-time"][data-mk-scene="1"] .tt-timer-btn .is-idle { animation: tt-held-gone 3.2s step-end; }
  .pn-frame[data-screen="tasks-time"][data-mk-scene="1"] .tt-timer-face .is-idle { animation: tt-face-gone 3.2s step-end; }
  .pn-frame[data-screen="tasks-time"][data-mk-scene="1"] .tt-entry.is-timer { animation: tt-row-gone 3.25s step-end, tt-fade 0.4s ease-out 3.25s both; }
  .pn-frame[data-screen="tasks-time"][data-mk-scene="1"] .tt-totals .is-before { animation: tt-held-visible 3.25s step-end; }
  .pn-frame[data-screen="tasks-time"][data-mk-scene="1"] .tt-totals .is-timer { animation: tt-held-hidden 3.25s step-end; }

  /* scene 2 — "30" in Minutes, the note, Log; the entry and the total. */
  .pn-frame[data-screen="tasks-time"][data-mk-scene="2"] .tt-minutes { animation: tt-focus-min 1.2s step-end; }
  .pn-frame[data-screen="tasks-time"][data-mk-scene="2"] .tt-note { animation: tt-focus-note 3.6s step-end; }
  .pn-frame[data-screen="tasks-time"][data-mk-scene="2"] .tt-minutes .tt-ph { animation: tt-ph-min 3.6s step-end; }
  .pn-frame[data-screen="tasks-time"][data-mk-scene="2"] .tt-minutes .tt-typed { animation: tt-typed-min 3.6s step-end; }
  .pn-frame[data-screen="tasks-time"][data-mk-scene="2"] .tt-minutes .tt-typed > span { animation: tt-type-min 0.3s steps(2, end) 0.6s both; }
  .pn-frame[data-screen="tasks-time"][data-mk-scene="2"] .tt-note .tt-ph { animation: tt-ph-note 3.6s step-end; }
  .pn-frame[data-screen="tasks-time"][data-mk-scene="2"] .tt-note .tt-typed { animation: tt-typed-note 3.6s step-end; }
  .pn-frame[data-screen="tasks-time"][data-mk-scene="2"] .tt-note .tt-typed > span { animation: tt-type-note 1.7s steps(var(--tt-note-n), end) 1.3s both; }
  .pn-frame[data-screen="tasks-time"][data-mk-scene="2"] .tt-log-btn { animation: tt-enabled 3.6s step-end, tt-press 0.22s ease 3.35s; }
  .pn-frame[data-screen="tasks-time"][data-mk-scene="2"] .tt-entry.is-logged { animation: tt-row-gone 3.65s step-end, tt-fade 0.4s ease-out 3.65s both; }
  .pn-frame[data-screen="tasks-time"][data-mk-scene="2"] .tt-totals .is-timer { animation: tt-held-visible 3.65s step-end; }
  .pn-frame[data-screen="tasks-time"][data-mk-scene="2"] .tt-totals .is-logged { animation: tt-held-hidden 3.65s step-end; }
}

/* How much of the note is typed out, and in how many keystrokes. */
.pn-frame[data-screen="tasks-time"] { --tt-note-w: 300px; --tt-note-n: 50; }
html[lang="en"] .pn-frame[data-screen="tasks-time"] { --tt-note-w: 250px; --tt-note-n: 44; }

/* Each hold keeps a state for its whole duration and hands over to the rule
   underneath when it ends — long step-end runs, never a short one behind a
   delay. */
@keyframes tt-held-visible { 0% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes tt-held-hidden { 0% { visibility: hidden; } 100% { visibility: visible; } }
@keyframes tt-held-shown { 0% { max-width: 220px; padding-right: 12px; padding-left: 12px; border-width: 1px; visibility: visible; } 100% { max-width: 0; padding-right: 0; padding-left: 0; border-width: 0; visibility: hidden; } }
@keyframes tt-held-gone { 0% { max-width: 0; padding-right: 0; padding-left: 0; border-width: 0; visibility: hidden; } 100% { max-width: 220px; visibility: visible; } }
@keyframes tt-face-shown { 0% { max-width: 220px; visibility: visible; } 100% { max-width: 0; visibility: hidden; } }
@keyframes tt-face-gone { 0% { max-width: 0; visibility: hidden; } 100% { max-width: 220px; visibility: visible; } }
@keyframes tt-row-gone { 0% { max-height: 0; padding-top: 0; padding-bottom: 0; border-top-width: 0; visibility: hidden; } 100% { max-height: 40px; visibility: visible; } }

@keyframes tt-box-open { 0% { border-color: #b9bdc5; background: #fff; color: transparent; } 100% { border-color: var(--tt-accent); } }
@keyframes tt-text-open { 0% { color: var(--ac-ink); text-decoration: none; } 100% { color: var(--ac-dim); } }
@keyframes tt-count-one { 0% { --tt-d: 1; } 100% { --tt-d: 2; } }
@keyframes tt-pct-third { 0% { --tt-p: 33; } 100% { --tt-p: 67; } }
@keyframes tt-bar { from { width: 33%; } to { width: 67%; } }
@keyframes tt-press { 40% { transform: scale(0.92); } }
@keyframes tt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tt-scroll { from { transform: none; } to { transform: translateY(var(--tt-lift)); } }
@keyframes tt-tick { from { --tt-s: 36; } to { --tt-s: 39; } }

/* Minutes is focused from 0.5s until the note takes the focus at 1.2s;
   the note keeps it until Log at 3.6s. */
@keyframes tt-focus-min { 0% { border-color: var(--ac-line); box-shadow: none; } 41.6% { border-color: var(--tt-accent); box-shadow: 0 0 0 2px rgb(70 117 87 / 0.2); } 100% { border-color: var(--ac-line); box-shadow: none; } }
@keyframes tt-focus-note { 0% { border-color: var(--ac-line); box-shadow: none; } 33.3% { border-color: var(--tt-accent); box-shadow: 0 0 0 2px rgb(70 117 87 / 0.2); } 100% { border-color: var(--ac-line); box-shadow: none; } }
@keyframes tt-ph-min { 0% { visibility: visible; } 16.6% { visibility: hidden; } 100% { visibility: visible; } }
@keyframes tt-typed-min { 0% { visibility: hidden; } 16.6% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes tt-type-min { from { max-width: 0; } to { max-width: 2ch; } }
@keyframes tt-ph-note { 0% { visibility: visible; } 36.1% { visibility: hidden; } 100% { visibility: visible; } }
@keyframes tt-typed-note { 0% { visibility: hidden; } 36.1% { visibility: visible; } 100% { visibility: hidden; } }
@keyframes tt-type-note { from { max-width: 0; } to { max-width: var(--tt-note-w); } }
/* Log is enabled once Minutes has a value (0.9s) and until it is sent. */
@keyframes tt-enabled { 0% { opacity: 0.6; } 25% { opacity: 1; } 100% { opacity: 0.6; } }