/* What's new (templates/landing/whats_new/_body.html), loaded by BOTH shells: the public /whats-new (after
   landing-shared.css) and the app's /updates (after app.css, inside .wn-in-app, the page's scroller).
   Self-contained on purpose: every wn-* rule sets what it needs and relies on neither shell's classes, so the page
   looks the same in both. Colours are landing-shared.css's :root tokens, written out because the app has no such
   variables. Fonts: Inter + its metric-matched fallback, from landing/_fonts.html, which both shells include. */

/* In the app: the landing body's base (landing-shared.css `body`), restated on the scroller. */
.wn-in-app { font-family: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, sans-serif; background: #F4F3F0; color: #1A1814; -webkit-font-smoothing: antialiased; }

/* 7rem clears the landing shell's fixed nav, putting the title where the calendar's sits (its nav scrolls, so its
   title starts 1rem under the nav); in the app, 2rem under the app header, as every rail page's title does. */
.wn-page { max-width: 800px; margin: 0 auto; padding: 7rem 1.5rem 4rem; }
.wn-in-app .wn-page { padding-top: 2rem; }

/* The header matches the conference calendar's (Frances, 2026-09-29): centred title and grey line under it. Public
   values restated from conference-guide.css (.cg-h1, .cg-cal-hero .cg-h1, .cg-cal-hero .rp-subtitle) — keep them in
   step. In the app, app.css's shared rail-page title rule restyles .wn-in-app .wn-title (36px), as it does the
   calendar's. */
.wn-hero { margin: 0 0 2rem; text-align: center; }
.wn-title { font-size: clamp(1.75rem, 5vw, 2.75rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.2; color: #1A1814; margin: 0; }
.wn-lede { font-size: 1rem; line-height: 1.5; color: #4b5563; margin: .55rem auto 0; }
.wn-lede a, .wn-lede-link { color: #1A6B6A; font-weight: 600; text-decoration: none; }
.wn-lede a:hover, .wn-lede-link:hover { text-decoration: underline; text-underline-offset: 3px; }
/* In the app "here" is a button (it opens the Support window) drawn as the link it reads as. */
.wn-lede-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; cursor: pointer; }
.wn-lede-link:focus-visible { outline: 2px solid #1A6B6A; outline-offset: 2px; border-radius: 3px; }

/* One release note per update: the date in a narrow left column that stays in view while its changes scroll past,
   the weekday (TUES) stacked over the date (Sep 29, 2026). */
.wn-release { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 1.75rem; margin: 0 0 3.5rem; }
.wn-date { position: sticky; top: 6.5rem; align-self: start; margin: .3rem 0 0; font-weight: 600; }
.wn-in-app .wn-date { top: 1.5rem; }
/* The date links to its own release (a permalink to share); it reads as a date until hovered. */
.wn-date-link { display: block; color: inherit; text-decoration: none; }
.wn-date-link:hover .wn-date-full { text-decoration: underline; text-underline-offset: 3px; }
.wn-date-link:focus-visible { outline: 2px solid #1A6B6A; outline-offset: 3px; border-radius: 4px; }
/* A #anchor lands clear of the landing shell's fixed nav (the app has none over the page). */
.wn-release, .wn-change { scroll-margin-top: 7rem; }
.wn-in-app .wn-release, .wn-in-app .wn-change { scroll-margin-top: 1.5rem; }
.wn-date-day { display: block; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; color: #1A6B6A; }
.wn-date-full { display: block; margin-top: .15rem; font-size: .875rem; line-height: 1.3; color: #4A4540; white-space: nowrap; }

.wn-change, .wn-also { background: #FDFCFA; border: 1px solid #E3E1DD; border-radius: 16px; padding: 1rem 1.625rem 1.5rem; }
.wn-change + .wn-change, .wn-change + .wn-also { margin-top: 1rem; }
.wn-also { background: transparent; border-style: dashed; }

.wn-kind { display: inline-block; font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1; padding: .3rem .55rem; border-radius: 6px; }
/* New is golden (landing-shared's #FEF3C7 yellow, with darker amber text so the small label reads), Improved the
   landing teal, Fixed a quiet neutral. */
.wn-kind-new { background: #FEF3C7; color: #92400E; }
.wn-kind-improved { background: #E0F0EF; color: #124A4A; }
.wn-kind-fixed { background: #EFEEE9; color: #4A4540; }

.wn-change-title { font-size: 1.25rem; font-weight: 650; letter-spacing: -.015em; line-height: 1.3; color: #1A1814; margin: .75rem 0 .5rem; }
.wn-also-title { font-size: 1rem; font-weight: 650; line-height: 1.3; color: #1A1814; margin: 0; }
.wn-summary { font-size: 1rem; line-height: 1.6; color: #3F3A35; margin: 0; }

.wn-points { list-style: none; margin: .9rem 0 0; padding: 0; }
.wn-points li { position: relative; padding-left: 1.1rem; font-size: .9375rem; line-height: 1.55; color: #4A4540; }
.wn-points li + li { margin-top: .5rem; }
.wn-points li::before { content: ''; position: absolute; left: .2rem; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: #1A6B6A; opacity: .55; }

/* A change's screenshot (scripts/whats_new_screenshots.py, taken at 2x): the width/height attributes carry its natural
   size, which here only sets the shape; it is drawn no wider than the card and no taller than 380px, whichever binds
   (width: auto lets both limits apply). The hairline is a shadow, so it adds nothing to the box being scaled. */
.wn-shot { display: block; box-sizing: content-box; width: auto; height: auto; max-width: 100%; max-height: 380px; margin: 1rem 0 0; border-radius: 10px; box-shadow: 0 0 0 1px #E3E1DD; background: #fff; }
/* A screenshot of a page the reader can open is a link to it: the hairline turns teal on hover, like a guide card. */
.wn-shot-link { display: block; text-decoration: none; }
.wn-shot-link:hover .wn-shot { box-shadow: 0 0 0 1px #1A6B6A; }
.wn-shot-link:focus-visible { outline: none; }
.wn-shot-link:focus-visible .wn-shot { box-shadow: 0 0 0 2px #1A6B6A; }

/* Conference guides listed by an update: one card-like link per guide, two to a row. */
.wn-guides { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.wn-guides a { display: flex; flex-direction: column; gap: .1rem; height: 100%; box-sizing: border-box; padding: .6rem .8rem; background: #fff; border: 1px solid #EFEEE9; border-radius: 10px; text-decoration: none; color: #1A1814; }
.wn-guides a:hover { border-color: #1A6B6A; }
.wn-guides a:focus-visible { outline: 2px solid #1A6B6A; outline-offset: 2px; }
.wn-guide-name { font-size: .9375rem; font-weight: 600; line-height: 1.35; }
.wn-guide-meta { font-size: .8125rem; line-height: 1.35; color: #6B6560; }

/* A call to action opens a new tab, so it ends in an up-and-right arrow (an inline SVG: the self-hosted Inter subset
   has no ↗ glyph) and tells screen readers in hidden text. */
.wn-cta { display: inline-flex; align-items: center; gap: .25rem; margin-top: 1.1rem; font-size: .9375rem; font-weight: 600; color: #1A6B6A; text-decoration: none; }
.wn-cta:hover { text-decoration: underline; text-underline-offset: 3px; }
.wn-cta-icon { flex: none; width: 1em; height: 1em; }
.wn-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 760px) {
    .wn-page { padding: 7rem 1rem 3rem; }
    .wn-in-app .wn-page { padding-top: 2rem; }
    .wn-release { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
    .wn-date, .wn-in-app .wn-date { position: static; margin: 0; text-align: center; }  /* above its cards, under the centred title */
    .wn-change, .wn-also { padding: 1rem 1.25rem 1.25rem; }
    .wn-guides { grid-template-columns: minmax(0, 1fr); }
}