/* Timberline · "What happens to your data" loop — all classes prefixed tl-life- */
.tl-life{--tl-blue:#4a7cff;--tl-blue-text:#3868ec;--tl-tint:#e9eeff;--tl-ink:#1b1b19;--tl-mute:#5e5b55;--tl-field:#ece9e1;--tl-chip-line:#dedad1;--tl-ease:cubic-bezier(.4,0,.2,1);--tl-cycle:16s;--tl-d:0s;
  margin:0;width:100%;max-width:620px;box-sizing:border-box;container-type:inline-size;
  font-family:"Jakarta","Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  color:var(--tl-ink);-webkit-font-smoothing:antialiased;text-align:left}
.tl-life *,.tl-life *::before,.tl-life *::after{box-sizing:border-box}

.tl-life-tile{background:#f4f2ec;border:1px solid #e5e2da;border-radius:28px;padding:16px}
.tl-life-card{list-style:none;margin:0;padding:4px 0;background:#fff;border-radius:20px;
  box-shadow:0 1px 2px rgba(27,27,25,.04),0 12px 32px -14px rgba(27,27,25,.14),0 36px 64px -36px rgba(27,27,25,.12)}

/* Rows (base styles = complete resting state; used as-is under reduced motion) */
.tl-life-row{position:relative;display:grid;grid-template-columns:148px minmax(0,1fr);gap:14px;padding:12px 18px 12px 22px;
  animation:tl-life-row var(--tl-cycle) var(--tl-ease) var(--tl-d) infinite}
.tl-life-row + .tl-life-row{border-top:1px solid #efece5}
.tl-life-row:nth-child(2){--tl-d:-12s}
.tl-life-row:nth-child(3){--tl-d:-8s}
.tl-life-row:nth-child(4){--tl-d:-4s}

.tl-life-bar{position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--tl-blue);
  opacity:0;transform:scaleY(.4);animation:tl-life-bar var(--tl-cycle) var(--tl-ease) var(--tl-d) infinite}

.tl-life-head{display:flex;flex-direction:column;gap:4px;padding-top:7px;min-width:0}
.tl-life-step{font-size:12px;font-weight:700;letter-spacing:.06em;line-height:1;color:var(--tl-mute);font-variant-numeric:tabular-nums;
  animation:tl-life-step var(--tl-cycle) var(--tl-ease) var(--tl-d) infinite}
.tl-life-label{font-size:14px;font-weight:600;line-height:1.3;color:var(--tl-ink)}

.tl-life-body{display:flex;flex-direction:column;gap:8px;min-width:0}
.tl-life-field{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:5px;min-width:0;background:var(--tl-field);border:1px solid transparent;border-radius:12px;
  animation:tl-life-field var(--tl-cycle) var(--tl-ease) var(--tl-d) infinite}
.tl-life-sub{font-size:12px;font-weight:600;color:var(--tl-mute);margin:0 0 -3px}

/* Chips */
.tl-life-chip{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%;min-height:28px;padding:4px 8px;
  background:#fff;border:1px solid var(--tl-chip-line);border-radius:8px;
  font-size:13px;font-weight:500;line-height:1.25;color:var(--tl-ink);box-shadow:0 1px 1px rgba(27,27,25,.04);
  animation:tl-life-lift var(--tl-cycle) var(--tl-ease) var(--tl-d) infinite}
.tl-life-field > :nth-child(2){animation-delay:calc(var(--tl-d) + .04s)}
.tl-life-field > :nth-child(3){animation-delay:calc(var(--tl-d) + .08s)}
.tl-life-chip-text{min-width:0;overflow-wrap:anywhere}
.tl-life-chip--new{animation-name:tl-life-appear}
.tl-life-chip--late{animation-name:tl-life-appear-late}
.tl-life-chip--blocked{background:#f7f6f2;border-style:dashed;color:#5f5c56;box-shadow:none}
.tl-life-chip--blocked .tl-life-ico{color:#5f5c56}
.tl-life-strike{position:relative}
.tl-life-strike::after{content:"";position:absolute;left:-1px;right:-1px;top:52%;height:1.5px;border-radius:1px;background:currentColor}

.tl-life-ico{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--tl-mute)}
.tl-life-ico--x{width:12px;height:12px;margin-left:1px}
.tl-life-ico--sm{width:13px;height:13px}

.tl-life-tag{flex:none;font-size:11px;font-weight:600;line-height:1;padding:3px 6px;border-radius:5px;background:#f1efe9;border:1px solid #e5e2da;color:#4f4c46}
.tl-life-badge{display:inline-flex;align-items:center;gap:5px;flex:none;font-size:12px;font-weight:600;line-height:1;padding:5px 9px;border-radius:999px;background:#f6f5f1;border:1px solid #e5e2da;color:#4f4c46}

.tl-life-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-left:2px}
.tl-life-avatar{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#e9e5dc;color:var(--tl-mute)}
.tl-life-hint{display:flex;align-items:center;gap:6px;font-size:12px;line-height:1.35;color:var(--tl-mute);padding-left:2px}

.tl-life-settle{animation:tl-life-settle var(--tl-cycle) var(--tl-ease) var(--tl-d) infinite}
.tl-life-turn{animation:tl-life-turn var(--tl-cycle) var(--tl-ease) var(--tl-d) infinite}

/* Select */
.tl-life-select{display:inline-flex;align-items:center;gap:8px;min-width:148px;height:34px;padding:0 9px 0 11px;background:#fff;border:1px solid var(--tl-chip-line);border-radius:9px;
  font-size:14px;font-weight:500;color:var(--tl-ink);animation:tl-life-focus var(--tl-cycle) var(--tl-ease) var(--tl-d) infinite}
.tl-life-vals{display:inline-grid;flex:1;overflow:hidden}
.tl-life-val{grid-area:1/1;white-space:nowrap}
.tl-life-val--from{opacity:0;animation:tl-life-from var(--tl-cycle) var(--tl-ease) var(--tl-d) infinite}
.tl-life-val--to{animation:tl-life-to var(--tl-cycle) var(--tl-ease) var(--tl-d) infinite}

/* Pause on hover */
.tl-life-card:hover,.tl-life-card:hover *,.tl-life-card:hover *::before,.tl-life-card:hover *::after{animation-play-state:paused}

/* Keyframes — each row's window is 0–25% of its 16s timeline */
@keyframes tl-life-row{0%{opacity:.86}3%,22%{opacity:1}25%,100%{opacity:.86}}
@keyframes tl-life-bar{0%{opacity:0;transform:scaleY(.4)}3%,22%{opacity:1;transform:scaleY(1)}25%,100%{opacity:0;transform:scaleY(.4)}}
@keyframes tl-life-step{0%{color:#5e5b55}3%,22%{color:#3868ec}25%,100%{color:#5e5b55}}
@keyframes tl-life-field{0%{background:#ece9e1;border-color:transparent}3%,22%{background:#e9eeff;border-color:rgba(74,124,255,.22)}25%,100%{background:#ece9e1;border-color:transparent}}
@keyframes tl-life-lift{
  0%{transform:translateY(0);box-shadow:0 1px 1px rgba(27,27,25,.04)}
  3%,22%{transform:translateY(-2px);box-shadow:0 1px 2px rgba(27,27,25,.06),0 6px 12px -6px rgba(27,27,25,.16)}
  25%,100%{transform:translateY(0);box-shadow:0 1px 1px rgba(27,27,25,.04)}}
@keyframes tl-life-appear{
  0%,2%{opacity:0;transform:translateY(4px) scale(.97);box-shadow:0 1px 1px rgba(27,27,25,.04)}
  7%,22%{opacity:1;transform:translateY(-2px);box-shadow:0 1px 2px rgba(27,27,25,.06),0 6px 12px -6px rgba(27,27,25,.16)}
  25%,97%{opacity:1;transform:translateY(0);box-shadow:0 1px 1px rgba(27,27,25,.04)}
  100%{opacity:0;transform:translateY(4px) scale(.97);box-shadow:0 1px 1px rgba(27,27,25,.04)}}
@keyframes tl-life-appear-late{
  0%{opacity:1;transform:translateY(0);box-shadow:0 1px 1px rgba(27,27,25,.04)}
  3%{opacity:1;transform:translateY(-2px);box-shadow:0 1px 2px rgba(27,27,25,.06),0 6px 12px -6px rgba(27,27,25,.16)}
  8%{opacity:0;transform:translateY(2px) scale(.97)}
  10%{opacity:0;transform:translateY(4px) scale(.97)}
  14%,22%{opacity:1;transform:translateY(-2px);box-shadow:0 1px 2px rgba(27,27,25,.06),0 6px 12px -6px rgba(27,27,25,.16)}
  25%,100%{opacity:1;transform:translateY(0);box-shadow:0 1px 1px rgba(27,27,25,.04)}}
@keyframes tl-life-settle{0%{transform:none;opacity:1}3%{transform:translateY(-3px) rotate(-8deg);opacity:.55}9%,100%{transform:none;opacity:1}}
@keyframes tl-life-turn{0%,3%{transform:none}7%{transform:rotate(-24deg)}12%,100%{transform:none}}
@keyframes tl-life-focus{
  0%,6%{border-color:#dedad1;box-shadow:0 0 0 0 rgba(74,124,255,0)}
  9%,18%{border-color:#4a7cff;box-shadow:0 0 0 3px rgba(74,124,255,.18)}
  22%,100%{border-color:#dedad1;box-shadow:0 0 0 0 rgba(74,124,255,0)}}
@keyframes tl-life-from{0%,10%{opacity:1;transform:none}13.5%{opacity:0;transform:translateY(-8px)}60%{opacity:0;transform:translateY(8px)}64%,100%{opacity:1;transform:none}}
@keyframes tl-life-to{0%,10%{opacity:0;transform:translateY(8px)}13.5%,60%{opacity:1;transform:none}64%,100%{opacity:0;transform:translateY(-8px)}}

/* Narrow slots: stack label above controls */
@container (max-width:480px){
  .tl-life-row{grid-template-columns:minmax(0,1fr);gap:10px;padding:14px 16px 14px 18px}
  .tl-life-head{flex-direction:row;align-items:baseline;gap:8px;padding-top:0}
  .tl-life-bar{top:14px;bottom:14px}
}
@container (max-width:380px){
  .tl-life-tile{padding:10px;border-radius:22px}
  .tl-life-card{border-radius:16px}
  .tl-life-row{padding:14px 12px 14px 14px}
}

/* Reduced motion: complete final state, static */
@media (prefers-reduced-motion:reduce){
  .tl-life *,.tl-life *::before,.tl-life *::after{animation:none !important;transition:none !important}
}

/* Site integration: occupy the Source Index visual column in place of the stone screenshot frame. */
.source-index-layout > .tl-life{justify-self:center}