/* changelog.css — the styles of the release notes, for the changelog on voicenoodler.com and the app's
   What's New window, which both show the same fragments (<article class="release">).

   The notes (.release and below) follow the system's appearance, light or dark, in the system font, so
   the app's window reads as native. The site's chrome applies under html.site and is always dark, with the
   landing page's tokens and Geist; under it the notes take the site's dark values whatever the system says. */

/* ── Release notes ───────────────────────────────────── */

.release {
    --notes-text: #1d1d1f;
    --notes-text-2: #6e6e73;
    --notes-border: rgba(0, 0, 0, 0.12);
    --notes-fill: rgba(0, 0, 0, 0.03);
    --notes-code: rgba(0, 0, 0, 0.06);
    --notes-accent: #456f00;
    --notes-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    --notes-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
    max-width: 640px;
    font-family: var(--notes-sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--notes-text);
    overflow-wrap: break-word;
}

@media (prefers-color-scheme: dark) {
    .release {
        --notes-text: #f2f2f2;
        --notes-text-2: #a1a1a6;
        --notes-border: rgba(255, 255, 255, 0.12);
        --notes-fill: rgba(255, 255, 255, 0.04);
        --notes-code: rgba(255, 255, 255, 0.09);
        --notes-accent: #bff549;
    }
}

/* Releases one after the other, as the app's window shows them */
.release + .release {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--notes-border);
}

.release header { margin: 0 0 12px; }

.release .release-meta {
    margin: 0 0 4px;
    font-size: 13px;
    color: var(--notes-text-2);
    font-variant-numeric: tabular-nums;
}

.release h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.release p { margin: 0 0 12px; }

.release section { margin-top: 28px; }

/* New, Improved, Fixed */
.release h3 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    font-variant-caps: all-small-caps;
    letter-spacing: 0.07em;
    color: var(--notes-accent);
}

/* One feature under New */
.release h4 {
    margin: 24px 0 6px;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.release h3 + h4 { margin-top: 4px; }

.release ul,
.release ol {
    margin: 0 0 12px;
    padding-left: 1.3em;
}
.release li { padding-left: 0.2em; }
.release li + li { margin-top: 6px; }
.release li::marker { color: var(--notes-text-2); }

.release strong { font-weight: 600; }

.release code {
    font-family: var(--notes-mono);
    font-size: 0.87em;
    padding: 0.1em 0.35em;
    border-radius: 5px;
    background: var(--notes-code);
}

.release a {
    color: var(--notes-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.release a:hover { text-decoration-color: currentColor; }

/* A screenshot or video, on a quiet stage the width of the column */
.release figure {
    margin: 16px 0 20px;
    padding: 20px;
    border: 1px solid var(--notes-border);
    border-radius: 10px;
    background: var(--notes-fill);
    overflow: hidden;
}
.release picture { display: block; }
.release img,
.release video {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.release > :last-child,
.release section > :last-child { margin-bottom: 0; }

@media (max-width: 480px) {
    .release figure { padding: 12px; }
}

/* ── The app's What's New window ─────────────────────── */

/* The page the app assembles (whatsNewPage); the web view draws no background, so the window's own shows through */
body.whats-new {
    margin: 0;
    padding: 24px;
    background: transparent;
}

/* ── Site ────────────────────────────────────────────── */

html.site {
    --bg: #0d0d0d;
    --bg-2: #141414;
    --bg-3: #1a1a1a;
    --bg-4: #262626;
    --text: #f2f2f2;
    --text-2: #999;
    --text-3: #666;
    --border: rgba(255, 255, 255, 0.1);
    --accent: #bff549;
    --radius-sm: 8px;
    --radius: 14px;
    --sans: "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    --mono: "Geist Mono", "SF Mono", SFMono-Regular, Menlo, monospace;
    /* Fast start, long soft landing: the curve of everything that arrives */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    color-scheme: dark;
    background: var(--bg);
}

.site *,
.site *::before,
.site *::after { box-sizing: border-box; }

.site body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
}

.site ::selection { background: rgba(191, 245, 73, 0.28); }

.site a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.site .wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* The notes in the site's dark values and type */
html.site .release {
    --notes-text: var(--text);
    --notes-text-2: var(--text-2);
    --notes-border: var(--border);
    --notes-fill: rgba(255, 255, 255, 0.025);
    --notes-code: rgba(255, 255, 255, 0.08);
    --notes-accent: var(--accent);
    --notes-sans: var(--sans);
    --notes-mono: var(--mono);
}
.site .release h2 {
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -0.03em;
}
.site .release h4 { letter-spacing: -0.02em; }
.site .release .release-meta {
    font-family: var(--mono);
    font-size: 12px;
    line-height: 20px;
}

/* ── Nav, as on the landing page ── */
.site .site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(13, 13, 13, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
}

.site .site-header nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
}

.site .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
    text-decoration: none;
}

.site .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    color: #0d0d0d;
    background: linear-gradient(180deg, #d4ff6e 0%, var(--accent) 55%, #a6dc2e 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(191, 245, 73, 0.35),
        0 4px 18px rgba(191, 245, 73, 0.22);
}
.site .brand-mark svg { width: 18px; height: 18px; }
.site .brand-mark path { transform-box: fill-box; transform-origin: center; }
.site .brand:hover .brand-mark path { animation: brand-wave 0.9s ease-in-out infinite alternate; }
.site .brand:hover .brand-mark path:nth-child(2) { animation-delay: -0.3s; }
.site .brand:hover .brand-mark path:nth-child(3) { animation-delay: -0.6s; }
.site .brand:hover .brand-mark path:nth-child(4) { animation-delay: -0.15s; }
.site .brand:hover .brand-mark path:nth-child(5) { animation-delay: -0.45s; }
@keyframes brand-wave { from { transform: scaleY(0.45); } to { transform: scaleY(1); } }

.site .wordmark { line-height: 1; }
.site .wordmark b {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.035em;
}

.site .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--radius-sm);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.02em;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease-out, color 0.2s ease-out, transform 0.1s;
}
.site .btn:active { transform: scale(0.98); }
.site .btn-primary { background: var(--accent); color: #0d0d0d; }
.site .btn-primary:hover { background: #f2f2f2; }
.site .btn-sm { height: 34px; padding: 0 12px; }

/* ── The changelog ── */
.site .changelog {
    flex: 1;
    padding: 80px 0 120px;
    background: radial-gradient(56% 420px at 50% 0%, rgba(191, 245, 73, 0.06) 0%, transparent 70%);
}

.site .changelog-column {
    max-width: 640px;
    margin: 0 auto;
}

.site .changelog h1 {
    margin: 0 0 64px;
    font-size: clamp(44px, 8vw, 72px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.05em;
}

/* The releases on a line through time, the newest one lit */
.site .changelog-entry {
    position: relative;
    padding-left: 28px;
}
.site .changelog-entry + .changelog-entry { margin-top: 72px; }

.site .changelog-entry::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5.5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--bg);
    box-shadow: inset 0 0 0 1.5px var(--text-3);
}
.site .changelog-entry:first-child::before {
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent);
}
.site .changelog-entry:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 26px;
    bottom: -64px;
    width: 1px;
    background: var(--border);
}

/* Each release's own page, linked beside its title (the meta line keeps the whole width, so a phone fits it) */
.site .changelog-entry h2 { padding-right: 36px; }
.site .release-link {
    position: absolute;
    top: 26px;
    right: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    color: var(--text-3);
    transition: color 0.2s ease-out, background 0.2s ease-out;
}
.site .release-link::before {
    content: "";
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 9.4l2.8-2.8'/%3E%3Cpath d='M7.3 4.2l.9-.9a2.9 2.9 0 0 1 4.1 4.1l-.9.9'/%3E%3Cpath d='M8.7 11.8l-.9.9a2.9 2.9 0 0 1-4.1-4.1l.9-.9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 9.4l2.8-2.8'/%3E%3Cpath d='M7.3 4.2l.9-.9a2.9 2.9 0 0 1 4.1 4.1l-.9.9'/%3E%3Cpath d='M8.7 11.8l-.9.9a2.9 2.9 0 0 1-4.1-4.1l.9-.9'/%3E%3C/svg%3E") center / contain no-repeat;
}
.site .release-link span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.site .release-link:hover { color: var(--accent); background: var(--bg-3); }

.site .changelog-back {
    margin: -40px 0 40px;
    font-size: 14px;
}
.site .changelog-back a {
    color: var(--text-2);
    text-decoration: none;
}
.site .changelog-back a::before { content: "\2190\00a0"; }
.site .changelog-back a:hover { color: var(--text); }

.site .changelog-empty {
    margin: 0;
    padding: 28px 32px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-2);
    color: var(--text-2);
}

/* ── Footer, as on the landing page ── */
.site .site-footer {
    padding: 40px 0 56px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-3);
}
.site .site-footer .wrap {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.site .site-footer a { color: var(--text-2); text-decoration: none; }
.site .site-footer a:hover { color: var(--text); }
.site .heart { color: #e25555; }

/* The line through time hangs in the margin, so the notes line up with the heading */
@media (min-width: 800px) {
    .site .changelog-entry { padding-left: 0; }
    .site .changelog-entry::before { left: -40px; }
    .site .changelog-entry:not(:last-child)::after { left: -36px; }
}

@media (max-width: 720px) {
    .site .wrap { padding: 0 16px; }
    .site .changelog { padding: 48px 0 80px; }
    .site .changelog h1 { margin-bottom: 44px; }
    .site .changelog-back { margin-top: -24px; }
    .site .changelog-entry + .changelog-entry { margin-top: 56px; }
    .site .changelog-entry:not(:last-child)::after { bottom: -48px; }
    .site .release h2 { font-size: 24px; }
    .site .release-link { top: 24px; }
}

/* ── Entrances, as on the landing page ── */

/* On the site the changelog arrives as it scrolls into view: the heading, then each release's header
   and the blocks of its notes rise out of the dark one after the other, a screenshot from a little
   smaller, and the line through time draws itself under its dot. The hidden state exists only under
   html.site.motion: the layout's script in the head sets that class when JavaScript runs and the
   visitor hasn't asked for reduced motion, so without either the page is simply there, and the app's
   What's New window (no site class, no JavaScript) never has it. The layout's script at the end of
   the body shows each element once (.in) and gives it its delay (--wait); it selects the elements of
   the first rule here, so the two lists change together */
html.site.motion .changelog h1,
html.site.motion .changelog-back,
html.site.motion .changelog-empty,
html.site.motion .release > header,
html.site.motion .release > p,
html.site.motion .release section > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
    transition-delay: var(--wait, 0ms);
}
html.site.motion .changelog h1 { transform: translateY(28px); transition-duration: 0.9s; }
html.site.motion .release figure { transform: translateY(24px) scale(0.97); transition-duration: 1s; }
html.site.motion .changelog .in { opacity: 1; transform: none; }

/* A release's dot pops up and its line draws itself down; the link to its own page fades in after */
html.site.motion .changelog-entry::before {
    transform: scale(0);
    transition: transform 0.6s cubic-bezier(.34, 1.5, .64, 1) var(--wait, 0ms);
}
html.site.motion .changelog-entry::after {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.4s var(--ease-out) var(--wait, 0ms);
}
html.site.motion .changelog-entry.in::before,
html.site.motion .changelog-entry.in::after { transform: none; }
html.site.motion .release-link { transition: color 0.2s ease-out, background 0.2s ease-out, opacity 0.7s ease-out 0.25s; }
html.site.motion .changelog-entry:not(.in) .release-link { opacity: 0; }

@media print {
    html.site.motion .changelog *,
    html.site.motion .changelog *::before,
    html.site.motion .changelog *::after { opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .site *,
    .site *::before,
    .site *::after { transition: none !important; animation: none !important; }
}