/* /guide/whats-new/ stylesheet: the phone app's update log, and the
   "What's new" button on the crew guide (/guide/). Loaded after guide.css,
   which brings the fonts, the tokens, the header and the footer.
   Only colour tokens from guide.css, plus the two added here. No motion
   beyond short colour fades on hover; reduced motion turns those off. */

:root{
  --ok:#0a7580;        /* Success Teal (DESIGN.md): a fix landed */
  --tint-2:#f2f9fb;    /* Blueprint Tint (DESIGN.md) */
}

/* the logo symbols' holder: takes no room */
.wn-defs{position:absolute; width:0; height:0; overflow:hidden}

/* ---------- the button on the crew guide ---------- */
.wn-cta{margin:24px 0 0}
.wn-btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 28px; border-radius:999px;
  background:var(--teal); color:#fff; font:600 16px/1 var(--inter); text-decoration:none;
  transition:background-color .18s ease}
.wn-btn:hover{background:var(--teal-deep)}

/* ---------- the header's way back ---------- */
.gh-back{margin-left:auto; display:inline-flex; align-items:center; min-height:44px; padding:0 4px;
  font:600 15px/1 var(--inter); color:var(--teal); text-decoration:none; border-radius:6px}
.gh-back:hover{color:var(--teal-deep); text-decoration:underline; text-underline-offset:3px}

/* ---------- the page ---------- */
.wn-intro{padding-bottom:32px}

.wn-group{max-width:1120px; margin:0 auto; padding:0 16px 24px}
.wn-group-head{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; column-gap:16px; row-gap:4px;
  padding:28px 0 8px; border-top:1px solid var(--border)}
.wn-group h2{font-size:clamp(36px,9vw,52px)}
.wn-range{margin:0; font:500 15px/1.4 var(--inter); color:var(--muted-2)}

/* one change */
.wn-e{padding:32px 0; border-bottom:1px solid var(--border); scroll-margin-top:16px}
.wn-e:last-child{border-bottom:0}
.wn-text{max-width:36em}
.wn-meta{display:flex; align-items:center; gap:12px; margin:0; font:500 14px/1 var(--inter); color:var(--muted-2)}
.wn-meta time{font-variant-numeric:tabular-nums}
.wn-tag{display:inline-flex; align-items:center; min-height:26px; padding:0 10px; border-radius:999px; border:1px solid var(--border);
  background:var(--card); color:var(--ink-2); font:600 12.5px/1 var(--inter); letter-spacing:.06em; text-transform:uppercase}
.wn-tag.new{background:var(--teal-tint); border-color:var(--wire); color:var(--teal-deep)}
.wn-tag.fixed{background:var(--tint-2); border-color:var(--wire); color:var(--ok)}
.wn-title{margin:12px 0 0; font:700 21px/1.3 var(--inter); color:var(--ink); text-wrap:balance}
.wn-body{margin:8px 0 0; font-size:17px; line-height:1.55; color:var(--ink-2); text-wrap:pretty}
.wn-when{margin:12px 0 0; font:600 14.5px/1.4 var(--inter); color:var(--muted-2)}

/* a fix's size: how much it got in a crew's way (owner, Oct 1) */
.wn-size{font:600 13px/1 var(--inter); color:var(--muted)}
.wn-size.blocked{color:var(--ink)}
.wn-size.often{color:var(--muted-2)}

/* filter chips: All, New features, Bug fixes (shown when whats-new.js runs) */
.wn-e[hidden], .wn-group[hidden], .wn-filter[hidden]{display:none !important}
.wn-filter{display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 0}
.wn-chip{min-height:44px; padding:0 18px; border-radius:999px; border:1px solid var(--border); background:var(--card);
  color:var(--ink-2); font:600 15px/1 var(--inter); cursor:pointer; transition:background-color .2s ease, color .2s ease, border-color .2s ease}
.wn-chip:hover{border-color:var(--wire)}
.wn-chip[aria-pressed="true"]{background:var(--teal); border-color:var(--teal); color:#fff}
.wn-chip:focus-visible{outline:2px solid var(--teal); outline-offset:2px}

/* the before and after: one frame on phones (below), side by side from 640px */
.wn-media{margin-top:20px; display:grid; gap:20px; grid-template-columns:minmax(0,280px)}
.wn-shot{margin:0; min-width:0}
.wn-cap{margin:0 0 8px; font:600 12.5px/1.2 var(--inter); letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.wn-zoom{display:block; border-radius:8px}
.wn-shot img, .wn-clip{display:block; width:100%; height:auto; border-radius:8px; border:1px solid var(--border);
  background:var(--card); box-shadow:0 1px 2px rgba(10,13,18,.05)}

/* phones: every entry fits one screen (owner, Oct 1). A pair shares one
   frame; the Before / After toggle or a swipe flips it. The media is capped
   so the tag, title, two lines and the toggle fit beside it at 360x740. */
.wn-flip{display:flex; gap:8px; margin:14px 0 0}
.wn-flip .wn-chip{min-height:40px; padding:0 16px}
.wn-more{display:inline-flex; align-items:center; min-height:40px; margin:2px 0 0; padding:0; border:0; background:none;
  font:600 15px/1 var(--inter); color:var(--teal); cursor:pointer}
.wn-more:hover{color:var(--teal-deep)}
.wn-more[hidden], .wn-flip[hidden]{display:none}
@media (max-width:639.98px){
  .wn-e{padding:24px 0}
  .wn-media{margin-top:14px; grid-template-columns:minmax(0,1fr)}
  .wn-media.two{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    scrollbar-width:none}
  .wn-media.two::-webkit-scrollbar{display:none}
  .wn-media.two .wn-shot{flex:0 0 100%; scroll-snap-align:start}
  .wn-e:has(.wn-flip:not([hidden])) .wn-cap{display:none}
  .wn-shot{--wn-cap-h:min(400px, calc(100svh - 340px))}
  .wn-shot img{width:auto; max-width:100%; max-height:var(--wn-cap-h); margin:0 auto}
  .wn-clip{width:auto; max-width:100%; height:var(--wn-cap-h); margin:0 auto}
  .wn-zoom{display:flex; justify-content:center}
  .wn-clamp .wn-e:not(.open) .wn-body{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden}
  .wn-clamp .wn-e:not(.open) .wn-when{display:none}
}
@media (min-width:640px){
  .wn-flip, .wn-more{display:none !important}
  .wn-media.two{grid-template-columns:repeat(2,minmax(0,240px)); gap:24px}
  .wn-media{grid-template-columns:minmax(0,240px)}
}
/* desktop: the words on the left, the pictures beside them */
@media (min-width:960px){
  .wn-e{display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:56px; align-items:start}
  .wn-e.text-only{display:block}
  .wn-text{padding-top:8px}
  .wn-media{margin-top:0}
}

.wn-end{max-width:1120px; margin:0 auto; padding:16px 16px 56px; font:600 16px/1.4 var(--inter)}
.wn-end a{color:var(--teal); text-underline-offset:3px}
.wn-end a:hover{color:var(--teal-deep)}

@media (prefers-reduced-motion:reduce){
  .wn-btn, .gh-back, .wn-chip{transition:none}
}

/* ---------- presentation mode (a widescreen TV, assets/present.js) ----------
   Every update fills the screen: words on the left, one big picture on the
   right. A before and after share one frame; Left / Right (or the toggle)
   flips it, like the phone layout. Sizes come from the screen height; all
   of it in the 130vh frame (guide.css). */
html.present .wn-group{max-width:130vh; padding:0}
html.present .wn-group-head{box-sizing:border-box; min-height:100vh; flex-direction:column; align-items:flex-start; justify-content:center; row-gap:2vh; padding:0}
html.present .wn-group h2{font-size:15vh}
html.present .wn-range{font-size:3.2vh}
html.present .wn-e{box-sizing:border-box; min-height:100vh; padding:5vh 0; grid-template-columns:minmax(0,80vh) auto; justify-content:center;
  column-gap:7vh; align-items:center; align-content:center; border-bottom:0}
html.present .wn-e.text-only{display:flex; flex-direction:column; justify-content:center}
html.present .wn-text{max-width:80vh; padding-top:0}
html.present .wn-title{margin-top:2.4vh; font-size:6vh; line-height:1.2}
html.present .wn-body{margin-top:2vh; font-size:3vh}
html.present .wn-when{margin-top:2vh; font-size:2.3vh}
html.present .wn-meta, html.present .wn-flip, html.present .wd-toggle, html.present .wn-filter{zoom:calc(var(--pz) * 1.35)}
html.present .wn-flip:not([hidden]){display:flex !important; margin-top:3vh}
html.present .wn-media{margin-top:0; grid-template-columns:auto}
html.present .wn-media.two{display:grid; overflow:visible; gap:0}
html.present .wn-media.two .wn-shot{grid-area:1/1; transition:opacity .35s cubic-bezier(.65,0,.35,1), visibility .35s}
html.present .wn-e:has(.wn-flip [data-shot="0"][aria-pressed="true"]) .wn-shot:nth-child(2),
html.present .wn-e:has(.wn-flip [data-shot="1"][aria-pressed="true"]) .wn-shot:nth-child(1){opacity:0; visibility:hidden}
html.present .wn-e:has(.wn-flip:not([hidden])) .wn-cap{display:none}
html.present .wn-cap{font-size:1.6vh}
html.present .wn-shot img{width:auto; max-width:none; height:84vh}
html.present .wn-clip{width:auto; max-width:none; height:84vh}

/* the New Style demo: one phone at a time, Old / New (Left / Right) */
html.present .wd{margin-top:0; align-items:center}
html.present .wd-toggle:not([hidden]){display:flex}
html.present .wd[data-show="new"] .wd-ph[data-look="old"],
html.present .wd[data-show="old"] .wd-ph[data-look="new"]{display:none}
html.present .wd:has(.wd-toggle:not([hidden])) .wd-ph .wn-cap{display:none}

@media (prefers-reduced-motion:reduce){
  html.present .wn-media.two .wn-shot{transition:none}
}