/* Changelog page (changelog.html). Layout follows linear.app/changelog: big title, plain-text tabs + search, a divider,
   then a sticky date rail (dot + date) on the left and the entry on the right. Uses the Privacy page shell (privacy.css). */
:root{--cl-dot:var(--color-sub);--cl-dot-old:#3A4656}   /* dark: sub text colour, btn-border-dark */
:root[data-theme="light"]{--cl-dot-old:#D5DAE5}   /* light: line-control */
.nav__links a[aria-current="page"]{color:var(--color-ink)}

/* title row: tabs on the left, search on the right, divider below */
.cl-head{gap:20px}
.cl-bar{align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:36px;border-bottom:1px solid var(--color-border)}
.cl-tabs{display:flex;flex-wrap:wrap;gap:6px 22px}
.cl-tabs:empty{display:none}
.cl-tab{padding:4px 0;border:0;background:none;color:var(--color-sub);font:inherit;font-size:var(--text-base);font-weight:var(--weight-medium);line-height:20px;cursor:pointer;transition:color .12s}
.cl-tab:hover{color:var(--color-body)}
.cl-tab[aria-pressed="true"]{color:var(--color-ink)}
.cl-tab:focus-visible{outline:2px solid var(--color-accent);outline-offset:3px;border-radius:2px}
.cl-search{display:flex;align-items:center;gap:10px;flex:0 0 280px;width:280px;height:36px;box-sizing:border-box;padding:0 8px 0 12px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-chip);color:var(--color-sub);transition:border-color .12s}
.cl-search:hover{border-color:var(--color-border-strong)}
.cl-search:focus-within{border-color:var(--color-sub)}
.cl-search svg{flex-shrink:0}
.cl-search input{flex:1;min-width:0;border:0;background:none;outline:0;color:var(--color-ink);font:inherit;font-size:var(--text-sm);line-height:20px;-webkit-appearance:none;appearance:none}
.cl-search input::placeholder{color:var(--color-sub);opacity:1}
.cl-search input::-webkit-search-cancel-button{display:none}
.cl-key{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:20px;height:20px;box-sizing:border-box;border:1px solid var(--color-border-strong);border-radius:4px;color:var(--color-sub);font:inherit;font-size:12px;font-weight:var(--weight-medium);line-height:14px}

/* entries: date rail (line + dot + date, the date stays pinned while the entry scrolls) | title + body */
.cl-list{display:flex;flex-direction:column}
.cl-entry{display:flex;align-items:flex-start}
.cl-entry[hidden]{display:none}
.cl-date{flex:0 0 328px;width:328px;align-self:stretch;box-sizing:border-box;padding-left:24px;border-left:1px solid var(--color-border)}
.cl-date time{position:sticky;top:104px;display:block;color:var(--color-body);font-size:var(--text-sm);font-weight:var(--weight-medium);line-height:20px;padding-top:7px}
.cl-date time::before{content:"";position:absolute;left:-28.5px;top:14px;width:8px;height:8px;border-radius:4px;background:var(--cl-dot-old)}
.cl-entry.is-latest .cl-date time{color:var(--color-ink)}
.cl-entry.is-latest .cl-date time::before{background:var(--color-ink)}
.cl-body{flex:1 1 0;min-width:0;max-width:624px;display:flex;flex-direction:column;gap:20px;padding-bottom:96px}
.cl-entry[data-last] .cl-body{padding-bottom:0}
.cl-body h2{font-size:32px;line-height:36px;letter-spacing:-0.022em}
.cl-body ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.cl-body li{position:relative;padding-left:20px;color:var(--color-body);font-size:var(--text-base);letter-spacing:var(--tracking-tight);line-height:var(--leading-body)}
.cl-body li::before{content:"";position:absolute;left:2px;top:10px;width:5px;height:5px;border-radius:50%;background:var(--cl-dot)}
.cl-empty{margin:0;padding-left:24px;color:var(--color-sub);font-size:var(--text-base);line-height:var(--leading-body)}

/* tablet 600-1199: narrower rail */
@media (max-width:1199px){
  .cl-date{flex-basis:200px;width:200px}
  .cl-body h2{font-size:28px;line-height:32px}
  .cl-body{padding-bottom:72px}
}
/* phone <=599: no rail; the date sits above the title, as on Linear's phone layout */
@media (max-width:599px){
  .cl-bar{flex-direction:column;align-items:stretch;gap:16px;padding-bottom:24px}
  .cl-tabs{flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding-inline:16px;gap:20px;scrollbar-width:none}
  .cl-tabs::-webkit-scrollbar{display:none}
  .cl-tab{flex:0 0 auto}
  .cl-search{flex:none;width:100%;height:40px}
  .cl-key{display:none}
  .cl-entry{flex-direction:column;gap:8px}
  .cl-date{flex:none;width:auto;align-self:auto;padding:0;border-left:0}
  .cl-date time{position:static;padding-top:0}
  .cl-date time::before{display:none}
  .cl-body{max-width:none;padding-bottom:48px;gap:16px}
  .cl-body h2{font-size:24px;line-height:30px}
  .cl-body li{font-size:15px;line-height:24px}
  .cl-body li::before{top:9px}
  .cl-empty{padding-left:0}
}

/* ---------- Media in an entry (only entries that contain it change; text-only entries stay exactly as they were) ----------
   One image or video:   <figure class="cl-media"><div class="cl-media__box"><img ...></div><figcaption>Caption</figcaption></figure>
   Several, side by side: <div class="cl-strip"> <div class="cl-strip__track"> <figure class="cl-media">...</figure> x N </div> </div>
   (js/changelog.js adds the counter, the arrows and the play button.) Box is always 16:9, so the page never jumps while media loads. */
.cl-media{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.cl-media__box{position:relative;aspect-ratio:16/9;border-radius:12px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border);overflow:hidden}
.cl-media__box img,.cl-media__box video{display:block;width:100%;height:100%;object-fit:cover}
.cl-media figcaption{color:var(--color-sub);font-size:var(--text-sm);line-height:20px}
@keyframes cl-pulse{0%,100%{background-color:var(--color-surface)}50%{background-color:var(--color-surface-2)}}
.js .cl-media__box:not(.is-loaded){animation:cl-pulse 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.js .cl-media__box:not(.is-loaded){animation:none}}

/* play button + length on a video (added by js/changelog.js) */
.cl-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:0;padding:0;background:none;cursor:pointer}
.cl-play::before{content:"";width:52px;height:52px;border-radius:50%;background:var(--color-btn-bg);transition:transform .12s}
.cl-play::after{content:"";position:absolute;left:calc(50% - 5px);top:calc(50% - 9px);border-left:15px solid var(--color-btn-ink);border-top:9px solid transparent;border-bottom:9px solid transparent;transform:translateX(1px)}
.cl-play:hover::before{transform:scale(1.06)}
.cl-play:focus-visible{outline:2px solid var(--color-accent);outline-offset:-4px;border-radius:12px}
.cl-len{position:absolute;left:12px;bottom:12px;padding:4px 8px;border-radius:6px;background:rgba(10,13,18,.82);color:#F3F3F3;font-size:12px;font-weight:var(--weight-medium);line-height:14px;pointer-events:none}
.cl-media__box.is-playing .cl-play,.cl-media__box.is-playing .cl-len{display:none}

/* several media: one row that scrolls sideways. Desktop: runs 80px past the text column (to the page content edge) so the next slide peeks in. */
.cl-strip{display:flex;flex-direction:column;gap:14px;margin-right:-80px;min-width:0}
.cl-strip__track{position:relative;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent)}
.cl-strip__track::-webkit-scrollbar{display:none}
.cl-strip__track.is-end{-webkit-mask-image:none;mask-image:none}
.cl-strip__track:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px;border-radius:4px}
.cl-strip__track .cl-media{flex:0 0 480px;scroll-snap-align:start}
.cl-strip__bar{display:flex;align-items:center;justify-content:space-between;max-width:624px}
.cl-strip__count{color:var(--color-sub);font-size:13px;font-weight:var(--weight-medium);line-height:18px}
.cl-strip__btns{display:flex;gap:8px}
.cl-strip__btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--radius-md);background:none;box-shadow:inset 0 0 0 1px var(--color-border-strong);color:var(--color-ink);cursor:pointer;transition:box-shadow .12s}
.cl-strip__btn:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--color-sub)}
.cl-strip__btn:disabled{color:var(--cl-dot-old);box-shadow:inset 0 0 0 1px var(--color-border);cursor:default}
.cl-strip__btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.cl-strip__btn svg{width:14px;height:14px}

/* tablet 600-1199: no room to run past the column, so the strip stays inside it; slides are narrower so the next one peeks in */
@media (max-width:1199px){
  .cl-strip{margin-right:0}
  .cl-strip__track .cl-media{flex-basis:84%}
}
/* phone <=599: swipe only (no arrows), the counter stays */
@media (max-width:599px){
  .cl-strip__track .cl-media{flex-basis:84%}
  .cl-strip__btns{display:none}
  .cl-play::before{width:44px;height:44px}
  .cl-play::after{left:calc(50% - 4px);top:calc(50% - 8px);border-left-width:13px;border-top-width:8px;border-bottom-width:8px}
  .cl-media figcaption{font-size:13px;line-height:18px}
}