/* The Time page's story (/features/time-tracking; pages/features/time-workspace.html) and the home page's Time
   section: real recordings and screens of the app in flat frames (never tilted), on the site's own tokens.
   Films play through js/outer/product-loop.js. */

/* ---------- the hero: one left edge, a steady rhythm (kicker, title, line, actions, terms), then the film ---------- */
.time-show .ts-hero .intro { max-width:760px; padding-top:clamp(8px, 2vw, 24px); }
.time-show .ts-hero h1 { margin:14px 0 0; font-size:var(--fs-d1); line-height:1.02; letter-spacing:-.045em; }
.time-show .ts-hero h1 .accent { display:inline-block; margin-top:.04em; }
.time-show .ts-hero .lead { max-width:34em; margin-top:22px; font-size:var(--fs-lead); line-height:1.55; text-wrap:balance; }
/* the example, drawn as the line you'd type: quiet, on paper, never broken across lines */
.time-show .ts-line { display:inline-block; padding:1px 10px 2px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--bg-panel); box-shadow:0 1px 0 var(--line); color:var(--ink); font-weight:500; white-space:nowrap; }
.time-show .ts-hero .page-head__cta { margin-top:30px; }
.time-show .ts-hero .page-head__link svg { transition:transform .15s ease; }
.time-show .ts-hero .page-head__link:hover svg { transform:translateX(2px); }
.time-show .ts-hero .page-head__meta { margin-top:12px; }

/* ---------- a film: the browser's frame, the recording, a quiet pause control ---------- */
.ts-film, .ts-shot { position:relative; margin:0; }
.ts-film { display:grid; grid-template-areas:"chrome" "screen" "caption"; overflow:hidden; border-radius:var(--r-xl); background:var(--bg-panel); box-shadow:var(--shadow-card); }
.ts-film > .ts-chrome { grid-area:chrome; }
.ts-film > .ts-screen { grid-area:screen; }
.ts-film > figcaption { grid-area:caption; }
.time-show .ts-film--hero { margin-top:clamp(40px, 6vw, 72px); }   /* over .feature-editorial figure { margin:0 } */
.ts-chrome { display:flex; align-items:center; gap:7px; height:34px; padding:0 14px; border-bottom:1px solid var(--line); background:var(--paper); }
.ts-chrome i { width:9px; height:9px; border-radius:var(--r-pill); background:var(--line); }
.ts-chrome span { margin-left:10px; font-size:var(--fs-xs); color:var(--caption); letter-spacing:.02em; }
.ts-screen { position:relative; line-height:0; background:var(--paper); }
.ts-screen video, .ts-screen img { display:block; width:100%; height:auto; }
.ts-film figcaption, .ts-shot figcaption { padding:12px 16px 14px; font-size:var(--fs-sm); line-height:1.45; color:var(--caption); }
.ts-film figcaption { border-top:1px solid var(--line); background:var(--bg-panel); }
.ts-film figcaption i, .ts-shot figcaption i { font-style:normal; color:var(--ink); font-weight:600; }
.ts-loop-toggle { grid-area:screen; align-self:end; justify-self:end; position:relative; z-index:1; margin:0 14px 14px 0; display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid var(--line); border-radius:var(--r-pill); background:color-mix(in srgb, var(--bg-panel) 88%, transparent); color:var(--ink); cursor:pointer; opacity:0; transition:opacity .2s ease, background-color .2s ease; backdrop-filter:blur(6px); }
.ts-film:hover .ts-loop-toggle, .ts-loop-toggle:focus-visible, .ts-film:not(.is-playing) .ts-loop-toggle { opacity:1; }
.ts-loop-toggle:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }
.ts-loop-toggle:hover { background:var(--bg-panel); }
.ts-loop-toggle .ts-i-play, .ts-film.is-playing .ts-loop-toggle .ts-i-pause { display:block; }
.ts-loop-toggle .ts-i-pause, .ts-film.is-playing .ts-loop-toggle .ts-i-play { display:none; }
.ts-film.is-still .ts-loop-toggle { display:none; }

/* ---------- three facts under the hero ---------- */
.ts-facts { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(16px, 3vw, 40px); margin:clamp(28px, 4vw, 44px) 0 0; padding:0; list-style:none; }
.ts-facts li { padding-top:14px; border-top:2px solid var(--hl); }
.ts-facts b { display:block; font-size:var(--fs-md); color:var(--ink); }
.ts-facts span { display:block; margin-top:4px; font-size:var(--fs-sm); line-height:1.5; color:var(--text-muted); }
.time-show .feature-nav { margin-top:clamp(28px, 4vw, 44px); }

/* ---------- a chapter: the words on one side, the product on the other ---------- */
.ts-chapter { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(28px, 5vw, 72px); align-items:center; padding-block:clamp(56px, 8vw, 112px); border-bottom:1px solid var(--line); scroll-margin-top:80px; }
.ts-chapter--flip > .ts-copy { order:2; }
/* a film chapter: the words across the top (title left, copy right), the film full width beneath */
.ts-chapter--wide { grid-template-columns:1fr; gap:clamp(24px, 3vw, 40px); }
.ts-chapter--wide > .ts-copy { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(20px, 5vw, 72px); align-items:end; }
.ts-chapter--wide > .ts-copy h2 { margin-bottom:0; }
.ts-chapter--wide > .ts-copy p:last-child { margin-bottom:0; }
.ts-copy h2, .ts-team h2, .ts-keys h2 { margin:8px 0 14px; font-family:var(--font-display); font-weight:var(--font-display-weight); font-size:var(--fs-d2); line-height:1.05; letter-spacing:-.04em; color:var(--ink); }
.ts-copy p { max-width:46ch; margin:0 0 12px; font-size:var(--fs-body); line-height:1.65; color:var(--text-muted); }
.ts-copy code { padding:2px 7px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); font:600 .92em/1.4 var(--font-mono); color:var(--ink); white-space:nowrap; }
.ts-shot { overflow:hidden; border-radius:var(--r-xl); background:var(--bg-panel); box-shadow:var(--shadow-card); }
.ts-shot img { display:block; width:100%; height:auto; }
.ts-shot figcaption { border-top:1px solid var(--line); }
.time-show kbd, .home-time kbd { display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border:1px solid var(--line); border-bottom-width:2px; border-radius:var(--r-sm); background:var(--bg-panel); font:650 var(--fs-xs)/1 var(--font-sans); color:var(--ink); vertical-align:1px; }

/* ---------- team: four short promises ---------- */
.ts-team { padding-block:clamp(56px, 8vw, 112px); border-bottom:1px solid var(--line); scroll-margin-top:80px; }
.ts-team__head { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(20px, 5vw, 72px); align-items:end; }
.ts-team__head h2 { margin-bottom:0; }
.ts-team__lead { max-width:46ch; margin:0; font-size:var(--fs-body); line-height:1.65; color:var(--text-muted); }
.ts-team__shots { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:clamp(16px, 2.5vw, 28px); margin-top:clamp(28px, 4vw, 48px); align-items:start; }
.ts-cards { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; margin-top:clamp(20px, 3vw, 36px); }
.ts-cards article { padding:20px 20px 22px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-panel); }
.ts-cards h3 { margin:0 0 6px; font-size:var(--fs-md); color:var(--ink); }
.ts-cards p { margin:0; font-size:var(--fs-sm); line-height:1.55; color:var(--text-muted); }

/* ---------- keyboard: the keys, large, as you'd press them ---------- */
.ts-keys { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:clamp(28px, 5vw, 72px); align-items:center; padding-block:clamp(56px, 8vw, 112px); scroll-margin-top:80px; }
.ts-keys p { max-width:40ch; color:var(--text-muted); line-height:1.6; }
.ts-keymap { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; margin:0; }
.ts-keymap > div { display:flex; flex-direction:column; gap:12px; padding:18px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper); }
.ts-keymap dt { display:flex; gap:6px; margin:0; }
.ts-keymap kbd { min-width:42px; height:42px; padding:0 10px; border-bottom-width:3px; border-radius:var(--r-md); font-size:var(--fs-md); box-shadow:0 1px 0 var(--line); }
.ts-keymap dd { margin:0; font-size:var(--fs-sm); color:var(--text-muted); }

/* ---------- the close: the hero's rhythm again, then room before the footer ---------- */
.time-show .ts-close { padding-block:clamp(64px, 9vw, 128px) clamp(72px, 10vw, 140px); border-top:1px solid var(--line); }
.time-show .ts-close h2 { margin:12px 0 0; font-family:var(--font-display); font-weight:var(--font-display-weight); font-size:var(--fs-d2); line-height:1.05; letter-spacing:-.04em; color:var(--ink); }
.time-show .ts-close .page-head__cta { margin-top:30px; }
.time-show .ts-close .page-head__meta { margin-top:12px; }
.time-show .ts-close .page-head__link svg { transition:transform .15s ease; }
.time-show .ts-close .page-head__link:hover svg { transform:translateX(2px); }

/* ---------- the home page's Time section ---------- */
.home-time .ts-film { margin-top:clamp(20px, 3vw, 36px); }
.home-time .ts-notes { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(16px, 3vw, 40px); margin-top:clamp(20px, 3vw, 32px); }
.home-time .ts-notes h3 { margin:0 0 4px; font-size:var(--fs-md); color:var(--ink); }
.home-time .ts-notes p { margin:0; font-size:var(--fs-sm); line-height:1.55; color:var(--text-muted); }

/* ---------- motion: chapters rise into place as they arrive, where the browser can tie it to scrolling ---------- */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .ts-chapter > *, .ts-cards article, .ts-keymap > div { animation:ts-arrive linear both; animation-timeline:view(); animation-range:entry 0% entry 40%; }
    }
}
@keyframes ts-arrive { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }

@media (max-width: 900px) {
    .ts-chapter, .ts-keys, .ts-chapter--wide > .ts-copy, .ts-team__head, .ts-team__shots { grid-template-columns:1fr; }
    .ts-chapter--flip > .ts-copy { order:0; }
    .ts-cards { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .ts-facts, .home-time .ts-notes { grid-template-columns:1fr; gap:14px; }
    .ts-cards, .ts-keymap { grid-template-columns:1fr; }
    .ts-chrome span { display:none; }
    .time-show .ts-line { white-space:normal; }
    .ts-loop-toggle { opacity:1; }
}