/* 03 Time. One scale for all three rows: a block is an hour of work. Labels on the bars, no legend.
   The Nightcut row is the loudest: it lifts into a panel as it plays, the 20 hours squeeze into Claude's sliver of
   20–45 minutes, and its quiet message bubble turns yellow. */

/* The poster: two lines that never touch (v11 T1: the "y" of "By" sat 4px inside "With"). Each phrase is its own
   block with air between them; inside a phrase that wraps on a phone the lines keep a clear gap too. */
.tm .tm-h { font-size: clamp(40px, 5.3vw, 76px); line-height: 1.04; max-width: none; }
.tm-h .tm-l1, .tm-h .tm-l2 { display: block; }
.tm-h .tm-l2 { margin-top: .14em; }
@media (max-width: 719px) { .tm-h .tm-l2 { margin-top: .26em; } }

.tm-chart { margin-top: var(--s6); display: grid; }
.tm-h + .tm-chart { margin-top: 36px; }
.tm-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) 200px; column-gap: var(--s5); align-items: center; padding: 13px 0; border-top: 1px solid rgba(242, 240, 233, .14); }
.tm-name { margin: 0; display: grid; gap: 2px; }
.tm-name b { font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.tm-name span { font-size: 16px; line-height: 1.35; font-weight: 500; color: var(--night-muted); }
.tm-logo svg { display: block; height: 34px; width: auto; color: #fff; }
.tm-track { display: grid; gap: 10px; min-width: 0; }
/* Every row runs in the same faint lane of 20 hour slots (the scale itself), so the clipper's 4.5 and Claude's sliver
   read against the 20 at a glance and no bar ever waits in an empty hole */
.tm-lane, .tm-run { border-radius: 6px; background: linear-gradient(90deg, rgba(242, 240, 233, .075) calc(100% - 6px), transparent 0) 0 0 / 5% 100% repeat-x; }
.tm-bar { height: 34px; width: calc(var(--h, 1) / 20 * 100%); border-radius: 6px; }
/* Hours as blocks: each tile is one hour with a small gap; 4.5 ends on half a block */
.tm-solid { background: linear-gradient(90deg, rgba(242, 240, 233, .88) calc(100% - 6px), transparent 0) 0 0 / calc(100% / var(--h)) 100% repeat-x; }
.tm-says { margin: 0; font-size: 18px; line-height: 1.4; font-weight: 500; color: var(--night-2); text-wrap: pretty; }
.tm-says b { font-weight: 700; color: var(--night-ink); }
.tm-v { margin: 0; justify-self: end; text-align: right; font-size: 32px; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; white-space: nowrap; }
.tm-n { font-weight: 700; }

/* The payoff: a lifted panel. Its columns line up with the rows above: the panel bleeds out of the column by exactly
   its own side padding (--tm-bleed), the same on both sides, so its contents sit on the column's edges. */
.tm-us { --tm-bleed: 24px; position: relative; margin: var(--s2) calc(-1 * var(--tm-bleed)) 0; padding: 18px var(--tm-bleed); border: 0; border-radius: var(--r-media); background: rgba(242, 240, 233, .08); box-shadow: inset 0 0 0 1px rgba(242, 240, 233, .12); }
.tm-clip { border-bottom: 0; }
.tm-run { position: relative; display: flex; align-items: center; gap: var(--s3); height: 34px; }
.tm-squeeze { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 6px; transform-origin: 0 50%; opacity: 0; pointer-events: none; }
/* Claude's 20–45 minutes on the same scale: less than one block; the label next to it says whose time it is */
.tm-ghost { flex: none; width: calc(100% * .75 / 20); min-width: 12px; height: 100%; border-radius: 6px; background: var(--yellow); }
.tm-ai { font-size: 18px; line-height: 1.2; font-weight: 600; color: var(--night-ink); white-space: nowrap; }
/* One message: the same speech bubble as every request on the page (bottom-right corner sharp), in yellow */
.tm-msg { display: inline-block; padding: 10px 20px 11px; border-radius: 24px 24px 6px 24px; background: var(--yellow); color: #14130f; font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; transform-origin: 100% 100%; cursor: default; }

/* Under the chart: the button where the wish to act peaks (with the receipt link under it), and beside it the Q&A
   answer that says the same thing in my voice. On a phone the clip comes after the button, as a small card. */
.tm-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s6); align-items: center; margin-top: 28px; }
.tm-cta { gap: var(--s2); }
.tm-cta .link { margin: -6px 0 -10px; }
@media (min-width: 900px) {
  /* the button sits right under the yellow bubble: the eye drops from "1 message" onto it; the clip (the shared
     compact talk card) on its left */
  .tm-cta { grid-column: 2; grid-row: 1; align-items: flex-end; text-align: right; }
  .tm .tm-talk { grid-column: 1; grid-row: 1; }
}

/* The motion (js/03-time.js): only the bars move. Every word, every value and the Nightcut row's own line are in
   place from the first frame, so nothing ever waits empty. The rows play in order once the payoff row is on screen
   too (so the comparison never plays to an unfinished chart): the 20 hours fill their lane, then the clipper's 4.5,
   then the Nightcut row lifts into a panel, the 20 hours squeeze into Claude's sliver and the quiet message bubble
   turns yellow. A row above the screen that was never seen is simply finished (.now skips its transitions). */
.js .tm-row .tm-bar { clip-path: inset(0 100% 0 0); transition: clip-path 1s cubic-bezier(.45, 0, .2, 1); }
.js .tm-clip .tm-bar { transition-duration: .55s; }
.js .tm-row.on .tm-bar { clip-path: inset(0 0 0 0); }
/* The payoff before it plays: a plain row with its words in place, Claude's sliver and the bubble quiet */
.js .tm-us .tm-ghost { opacity: .4; transition: opacity .35s ease; }
.js .tm-us.on .tm-squeeze { animation: tm-squeeze 1.05s cubic-bezier(.6, 0, .2, 1) forwards; }
.js .tm-us.on .tm-ghost { opacity: 1; transition-delay: .8s; }
/* Claude's label steps aside while the 20 hours squeeze through its place, and lands with the sliver */
.js .tm-us.on .tm-ai { animation: tm-ai 1.05s linear both; }
.js .tm-us .tm-msg { background: rgba(242, 240, 233, .1); color: rgba(242, 240, 233, .5); transition: background-color .3s ease, color .3s ease; }
.js .tm-us.done .tm-msg { background: var(--yellow); color: #14130f; animation: tm-pop .55s cubic-bezier(.3, 1.6, .5, 1); }
/* Before it plays the Nightcut row is a plain row like the others (no empty box waiting); playing, it lifts. */
.js .tm-us { background: rgba(242, 240, 233, 0); box-shadow: inset 0 0 0 1px rgba(242, 240, 233, 0); transition: background .6s ease, box-shadow .6s ease; }
.js .tm-us.on { background: rgba(242, 240, 233, .08); box-shadow: inset 0 0 0 1px rgba(242, 240, 233, .12); }
.js .tm-row.now, .js .tm-row.now * { transition: none !important; animation: none !important; }
@keyframes tm-squeeze {
  0% { opacity: 0; transform: none; }
  18% { opacity: .42; transform: none; }
  80% { opacity: .55; transform: scaleX(.0375); }
  100% { opacity: 0; transform: scaleX(.0375); }
}
@keyframes tm-ai { 0% { opacity: 1; } 12% { opacity: 0; } 72% { opacity: 0; } 100% { opacity: 1; } }
@keyframes tm-pop { 0% { transform: scale(.84); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .js .tm-row .tm-bar { clip-path: none; transition: none; }
  .js .tm-us .tm-ghost { opacity: 1; transition: none; }
  .js .tm-us .tm-msg { background: var(--yellow); color: #14130f; animation: none; transition: none; }
  .js .tm-us .tm-squeeze { display: none; }
}

/* ---------- Phone: name and value on one line, the bar under them, one short line under the bar ---------- */
@media (max-width: 899px) {
  .tm-row { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s3); row-gap: 10px; padding: 12px 0; }
  .tm-name { grid-column: 1; grid-row: 1; align-self: center; }
  .tm-v { grid-column: 2; grid-row: 1; align-self: center; font-size: 26px; }
  .tm-track { grid-column: 1 / -1; grid-row: 2; gap: 8px; }
  .tm-name b { font-size: 20px; }
  .tm-bar, .tm-run { height: 26px; }
  .tm-bar, .tm-ghost, .tm-squeeze, .tm-lane, .tm-run { border-radius: 5px; }
  .tm-solid { background-image: linear-gradient(90deg, rgba(242, 240, 233, .88) calc(100% - 3px), transparent 0); }
  .tm-lane, .tm-run { background-image: linear-gradient(90deg, rgba(242, 240, 233, .075) calc(100% - 3px), transparent 0); }
  .tm-logo svg { height: 28px; }
  .tm-says { font-size: 16px; }
  .tm-ai { font-size: 16px; }
  .tm-msg { font-size: 22px; padding: 8px 14px 9px; border-radius: 18px 18px 5px 18px; }
  .tm-us { --tm-bleed: 12px; padding: 14px var(--tm-bleed) 16px; }
}
@media (max-width: 899px) {
  .tm-foot { grid-template-columns: minmax(0, 1fr); row-gap: var(--s4); }
}
@media (max-width: 719px) {
  .tm-h + .tm-chart { margin-top: var(--s5); }
  .tm-foot { margin-top: var(--s4); }
}
/* Short phones (375×667): the whole comparison, the payoff row and its bubble included, fits the screen at the natural
   stop. The grey sub-lines go (the receipt names who), and the rows sit closer. */
@media (max-width: 899px) and (max-height: 700px) {
  .tm-name span { display: none; }
  .tm-h + .tm-chart { margin-top: 20px; }
  .tm-row { padding: 9px 0; row-gap: 8px; }
  .tm-track { gap: 6px; }
  .tm-us { margin-top: 8px; padding: 10px var(--tm-bleed) 12px; }
}

/* Phone: the clip is the shared compact card's phone form (base.css): a small frame beside the quote that opens to
   the full width when played. */

/* ---------- "How we counted": a receipt in the explainer sheet ----------
   Three tabs (by hand, an AI clipper, Nightcut); five tasks, each with its hours and a bar under it on one scale
   (11 h = full width). By hand the bars are full; for the clipper the shorts row drops to 1.5 h of sorting and the
   last three are left out; for Nightcut the bars drain, every task is ticked "Claude" and your time is one message. */
.tmr { padding: var(--s4); }
/* One green pill slides under the tabs, so exactly one tab is filled at any moment (a crossfade showed two half-filled) */
.tmr-tabs { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--r-ctl); background: var(--card); box-shadow: var(--sh-1); }
.tmr-tabs::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 16px) / 3); border-radius: 10px; background: var(--green); transition: transform .3s var(--ease); }
.tmr[data-tab="clip"] .tmr-tabs::before { transform: translateX(calc(100% + 4px)); }
.tmr[data-tab="nc"] .tmr-tabs::before { transform: translateX(calc(200% + 8px)); }
.tmr.is-cold .tmr-tabs::before { transition: none; }
.tmr-tabs button { position: relative; min-height: 44px; padding: 0 8px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font: 600 16px/1.1 var(--font); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .2s ease, color .15s ease; }
@media (hover: hover) { .tmr-tabs button:not([aria-selected="true"]):hover { background: var(--soft); } }
.tmr-tabs button[aria-selected="true"] { color: var(--green-ink); transition: background-color .2s ease, color .12s ease .08s; }
.tmr-rows { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.tmr-rows li { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--s2); padding: 11px 0 15px; }
.tmr-rows li > .ico { width: 22px; height: 22px; color: var(--green-3); transition: color .3s ease; }
.tmr-t { font-size: 18px; line-height: 1.3; font-weight: 500; color: var(--ink); transition: color .3s ease; }
.tmr-bar { position: absolute; left: 36px; right: 0; bottom: 0; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.tmr-bar i { display: block; height: 100%; width: calc(var(--hand) / 11 * 100%); border-radius: 3px; background: var(--ink); transition: width .8s var(--ease); }
.tmr[data-m="clip"] .tmr-bar i { width: calc(var(--clip) / 11 * 100%); }
.tmr[data-m="nc"] .tmr-bar i { width: 0; transition-duration: .6s; }
.tmr.is-cold .tmr-bar i { width: 0; transition: none; }
.tmr-rows li:nth-child(2) .tmr-bar i { transition-delay: .06s; } .tmr-rows li:nth-child(3) .tmr-bar i { transition-delay: .12s; }
.tmr-rows li:nth-child(4) .tmr-bar i { transition-delay: .18s; } .tmr-rows li:nth-child(5) .tmr-bar i { transition-delay: .24s; }
.tmr-v { display: grid; justify-items: end; min-width: 92px; }
.tmr-v b { grid-area: 1 / 1; white-space: nowrap; transition: opacity .25s ease, transform .35s var(--ease); }
.tmr-h { font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.tmr-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 17px; line-height: 1.2; font-weight: 600; color: var(--ok); opacity: 0; transform: translateY(6px); }
.tmr-ok .ico { width: 18px; height: 18px; stroke-width: 2.6; }
.tmr[data-m="clip"] .tmr-skip .tmr-t, .tmr[data-m="clip"] .tmr-skip > .ico, .tmr[data-m="clip"] .tmr-skip .tmr-h { color: #a29d91; }
.tmr[data-m="nc"] .tmr-h { opacity: 0; transform: translateY(-6px); }
.tmr[data-m="nc"] .tmr-ok { opacity: 1; transform: none; }
.tmr[data-m="nc"] li:nth-child(2) .tmr-ok { transition-delay: .08s; } .tmr[data-m="nc"] li:nth-child(3) .tmr-ok { transition-delay: .16s; }
.tmr[data-m="nc"] li:nth-child(4) .tmr-ok { transition-delay: .24s; } .tmr[data-m="nc"] li:nth-child(5) .tmr-ok { transition-delay: .32s; }
.tmr-total { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s2); padding-top: var(--s2); }
.tmr-k { font-size: 18px; font-weight: 600; color: var(--ink-2); }
.tmr-sum { display: grid; justify-items: end; align-items: center; }
.tmr-sum b { grid-area: 1 / 1; white-space: nowrap; transition: opacity .25s ease, transform .4s var(--ease); }
.tmr-n { font-size: 36px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.tmr-msg { padding: 7px 16px 8px; border-radius: 20px 20px 5px 20px; background: var(--yellow); color: #14130f; font-size: 26px; line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; opacity: 0; transform: translateY(10px) scale(.7); transform-origin: 100% 100%; }
.tmr[data-m="nc"] .tmr-n { opacity: 0; transform: translateY(-12px); }
.tmr[data-m="nc"] .tmr-msg { opacity: 1; transform: none; transition-delay: .3s; transition-timing-function: ease, cubic-bezier(.3, 1.5, .5, 1); }
.tmr-cap { display: grid; margin: var(--s3) 0 0; }
.tmr-cap span { grid-area: 1 / 1; font-size: 18px; line-height: 1.45; font-weight: 500; color: var(--ink-2); text-wrap: pretty; opacity: 0; transition: opacity .3s ease; }
.tmr[data-m="hand"] .tmr-cap [data-m="hand"], .tmr[data-m="clip"] .tmr-cap [data-m="clip"], .tmr[data-m="nc"] .tmr-cap [data-m="nc"] { opacity: 1; }
/* A switch is sequential (js/03-time.js): what changes fades out first, then the new mode fades in */
.tmr .is-out { opacity: 0 !important; transition: opacity .18s ease !important; }
@media (prefers-reduced-motion: reduce) { .tmr *, .tmr-bar i { transition: none !important; } }
.sheet-in .tmr + .ex-src { margin-top: 0; }
@media (max-width: 719px) {
  .tmr { padding: var(--s3); }
  .tmr-rows { margin-top: var(--s2); }
  .tmr-rows li { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; padding: 8px 0 12px; }
  .tmr-rows li > .ico { width: 20px; height: 20px; }
  .tmr-bar { left: 30px; height: 4px; }
  .tmr-t { font-size: 16px; }
  .tmr-h { font-size: 18px; }
  .tmr-ok { font-size: 16px; }
  .tmr-v { min-width: 76px; }
  .tmr-n { font-size: 28px; }
  .tmr-msg { font-size: 22px; }
  .tmr-k { font-size: 16px; }
  .tmr-cap { margin-top: var(--s2); }
  .tmr-cap span { font-size: 16px; line-height: 1.4; }
}
/* Short phones (375×667): the receipt and its line still fit the sheet without scrolling */
@media (max-width: 719px) and (max-height: 700px) {
  .tmr { padding: var(--s2); }
  .tmr-rows li { padding: 6px 0 10px; }
  .tmr-total { margin-top: var(--s1); padding-top: var(--s1); }
  .tmr-n { font-size: 26px; }
  .tmr-msg { font-size: 20px; padding: 6px 14px 7px; }
  .tmr-cap { margin-top: var(--s1); }
  .tmr-cap span { line-height: 1.35; }
}
/* Small laptops: the compact card's quote a step smaller, so it keeps to two lines beside the frame */
@media (min-width: 900px) and (max-width: 1199px) { .tm .tm-talk .tc-q { font-size: 22px; } }