/* Tally, the made-up product. Follows the page theme through its own tokens. */
.tally-stage {
  --t-bg: #ffffff;
  --t-side: #faf9f6;
  --t-ink: #232220;
  --t-soft: #5d5a54;
  --t-faint: #9a968e;
  --t-line: #eeece7;
  --t-field: #e3e0d9;
  --t-chip: #efede8;
  --t-btn: #232220;
  --t-btn-ink: #ffffff;
  --t-btn-hover: #3a3835;
  --t-done: #3f7d4e;
  container-type: inline-size;
  background: var(--t-bg);
  color: var(--t-ink);
}
[data-theme="dark"] .tally-stage {
  --t-bg: #1b1a18;
  --t-side: #201f1d;
  --t-ink: #ecebe7;
  --t-soft: #b3afa7;
  --t-faint: #7f7b73;
  --t-line: #2c2b28;
  --t-field: #3a3834;
  --t-chip: #2e2d2a;
  --t-btn: #ecebe7;
  --t-btn-ink: #1b1a18;
  --t-btn-hover: #d6d4cf;
  --t-done: #6fae7d;
}
.tally { display: grid; grid-template-columns: 180px 1fr; height: 100%; font: 14px/1.5 system-ui, -apple-system, sans-serif; }
.t-side { padding: 20px 12px; border-right: 1px solid var(--t-line); background: var(--t-side); display: grid; align-content: start; gap: 2px; }
.t-brand { display: flex; align-items: center; gap: 8px; padding: 0 8px 18px; font-weight: 650; letter-spacing: -0.01em; }
.t-brand i { width: 18px; height: 18px; border-radius: 5px; background: var(--t-ink); }
.t-nav { display: flex; justify-content: space-between; padding: 6px 8px; border-radius: 7px; color: var(--t-soft); }
.t-nav[aria-current] { background: var(--t-chip); color: var(--t-ink); font-weight: 500; }
.t-nav span { font-variant-numeric: tabular-nums; color: var(--t-faint); font-size: 12px; }
.t-main { padding: 20px 24px; display: grid; grid-template-rows: auto auto 1fr; gap: 16px; min-width: 0; align-content: start; }
.t-top { display: flex; gap: 8px; align-items: center; }
.t-top h3 { margin: 0 auto 0 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.tally input { padding: 7px 10px; border: 1px solid var(--t-field); border-radius: 8px; font: inherit; font-size: 13px; background: var(--t-bg); color: inherit; min-width: 0; }
.tally input::placeholder { color: var(--t-faint); }
.search { width: 200px; }
.t-btn { padding: 7px 12px; border: 0; border-radius: 8px; background: var(--t-btn); color: var(--t-btn-ink); font: 500 13px/1.2 system-ui, sans-serif; white-space: nowrap; cursor: pointer; transition: background-color 150ms ease, transform 120ms ease; }
.t-btn:hover, .t-btn[data-cr-hover] { background: var(--t-btn-hover); }
.t-btn:active { transform: scale(0.97); }
.t-compose { display: none; gap: 8px; padding: 10px; border: 1px solid var(--t-field); border-radius: 10px; background: var(--t-side); }
.t-compose.open { display: flex; }
.task-name { flex: 1; }
.list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--t-line); }
.list li { display: grid; grid-template-columns: 20px 1fr auto auto; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--t-line); }
.check { width: 18px; height: 18px; padding: 0; border: 1.5px solid var(--t-field); border-radius: 50%; background: var(--t-bg); cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease; }
.check:hover, .check[data-cr-hover] { border-color: var(--t-faint); }
.list li.done .check { background: var(--t-done); border-color: var(--t-done); }
.list li.done .title { color: var(--t-faint); text-decoration: line-through; }
.list li.new { animation: t-rise 260ms cubic-bezier(0.23, 1, 0.32, 1); }
@keyframes t-rise { from { opacity: 0; transform: translateY(-4px); } }
.who { width: 22px; height: 22px; border-radius: 50%; background: var(--t-chip); display: grid; place-items: center; font-size: 10px; font-weight: 600; color: var(--t-soft); }
.due { font-size: 12px; color: var(--t-faint); font-variant-numeric: tabular-nums; width: 44px; text-align: right; }
.empty { padding: 24px 4px; color: var(--t-faint); }
@container (max-width: 480px) {
  .tally { grid-template-columns: 1fr; }
  .t-side { display: none; }
  .t-main { padding: 16px; }
  .t-top { flex-wrap: wrap; }
  .t-top h3 { width: 100%; }
  .search { flex: 1; width: auto; }
  .due { display: none; }
  .list li { grid-template-columns: 20px 1fr auto; }
}
/* Clear the phone frame's camera notch. */
.cr-frame[data-frame="phone"] .t-main { padding-top: 56px; }
@media (prefers-reduced-motion: reduce) { .list li.new { animation: none; } }