/**
 * Planix — What's New
 *
 * Design language: one shared "document" shell used by What's New, Help &
 * Support, Privacy Policy and Terms of Service. It reuses the app's product
 * palette (blue #2563EB brand, slate neutrals, 1px #E2E8F0 hairlines, 16px
 * card radius, 44px touch targets) so these pages read as part of the product
 * rather than a plain text dump.
 *
 * Theme switching: js/theme.js applies the `dark` class to BOTH <html> and
 * <body>. Every override below is therefore scoped to `.dark` (an ancestor
 * match) and never to `.dark body` — that selector silently fails when the
 * class lands directly on <body>, which is exactly how the whole app toggles.
 */

:root{
      color-scheme: light;
      --ink:#0f172a;
      --muted:#64748b;
      --line:#e2e8f0;
      --brand:#2563eb;
      --brand-ink:#1d4ed8;
      --soft:#eff6ff;
      --card:#ffffff;
      --canvas:#f8fafc;
    }
    * { box-sizing:border-box; }
    body { margin:0; background:var(--canvas); color:var(--ink); font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; }

    /* ===== Page content column ===== */
    .shell { width:100%; max-width:920px; margin:0 auto; padding:40px 24px 88px; }

    /* ===== Sticky page header ===== */
    .top { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:calc(12px + env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) 12px max(24px,env(safe-area-inset-left,0px)); position:sticky; top:0; z-index:30; background:rgba(255,255,255,.82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
    .top-left { display:flex; align-items:center; gap:12px; min-width:0; flex-wrap:wrap; }
    .top-right { display:flex; align-items:center; gap:12px; }
    .top .logo { color:var(--brand); font-weight:800; font-size:1.15rem; letter-spacing:-.02em; text-decoration:none; white-space:nowrap; }
    /* min-height was 36px, under the 44px touch target minimum. */
    .back { display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--muted); font-size:.875rem; font-weight:600; text-decoration:none; transition:border-color .18s ease,color .18s ease,background-color .18s ease; }
    .back:hover { border-color:#cbd5e1; color:var(--ink); }
    .back:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.25); }

    /* ===== Page heading ===== */
    .page-head { margin-bottom:32px; }
    /* .7rem was 11.2px, below the 12px legibility floor. */
    .eyebrow { display:inline-block; color:var(--brand); font-size:.8125rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
    h1 { margin:10px 0 12px; font-size:clamp(1.9rem,5vw,2.6rem); font-weight:800; line-height:1.12; letter-spacing:-.045em; }
    .intro { margin:0; max-width:62ch; color:var(--muted); font-size:.975rem; line-height:1.75; }

    /* ===== Shared document card ===== */
    .release, .content { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:32px 34px 36px; box-shadow:0 1px 2px rgba(15,23,42,.04),0 12px 28px -18px rgba(15,23,42,.18); }

    /* ===== Release entry ===== */
    .release-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-bottom:22px; border-bottom:1px solid var(--line); }
    .release-title { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .release h2, .release-head h2 { margin:0; font-size:1.125rem; font-weight:700; letter-spacing:-.02em; }
    /* .6875rem was 11px. */
    .badge { display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; background:var(--soft); color:var(--brand-ink); font-size:.75rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
    .date { color:var(--muted); font-size:.875rem; font-weight:600; white-space:nowrap; }

    /* ===== Change list ===== */
    .notes { list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:14px; }
    .notes li { position:relative; padding-left:26px; color:var(--muted); font-size:.9rem; line-height:1.65; }
    /* Brand bullet: an inline SVG check keeps the marker crisp and colourable on
       every platform, unlike list-style markers or emoji. */
    .notes li::before { content:""; position:absolute; left:0; top:.28em; width:16px; height:16px; border-radius:50%; background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px 11px no-repeat; }
    .notes strong, .content strong { color:var(--ink); font-weight:650; }

    /* ===== Support strip ===== */
    .support-strip { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-top:24px; padding:22px 26px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg,#ffffff,var(--soft)); }
    .support-strip h2 { margin:0 0 4px; font-size:.9375rem; font-weight:700; letter-spacing:-.01em; }
    .support-strip p { margin:0; color:var(--muted); font-size:.8125rem; line-height:1.6; }
    .btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 20px; border-radius:12px; background:var(--brand); color:#fff; font-size:.8125rem; font-weight:600; text-decoration:none; white-space:nowrap; transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease; }
    .btn:hover { background:var(--brand-ink); box-shadow:0 8px 20px -10px rgba(37,99,235,.9); }
    .btn:active { transform:translateY(1px); }
    .btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(37,99,235,.3); }

    /* ===== Dark theme (.dark on <html> and/or <body>) ===== */
    .dark { color-scheme: dark; }
    .dark body { background-color:#0f172a; color:#f1f5f9; }
    .dark .top { background:rgba(15,23,42,.85); border-bottom-color:#1e293b; }
    .dark .logo { color:#60a5fa; }
    .dark .back { background:#1e293b; border-color:#334155; color:#94a3b8; }
    .dark .back:hover { border-color:#475569; color:#e2e8f0; }
    .dark h1 { color:#f8fafc; }
    .dark .eyebrow { color:#60a5fa; }
    /* #94a3b8 on the #1e293b card was 3.83:1, under the 4.5:1 needed for the
       small body text these selectors carry. */
    .dark .intro { color:#B6C2D4; }
    .dark .release, .dark .content { background:#1e293b; border-color:#334155; box-shadow:0 12px 32px -18px rgba(0,0,0,.7); }
    .dark .release-head { border-bottom-color:#334155; }
    .dark .release h2, .dark .release-head h2 { color:#e2e8f0; }
    .dark .date { color:#B6C2D4; }
    .dark .badge { background:rgba(96,165,250,.14); color:#93c5fd; }
    .dark .notes li { color:#B6C2D4; }
    .dark .notes li::before { background-color:rgba(96,165,250,.16); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2360a5fa' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E"); }
    .dark .notes strong, .dark .content strong { color:#f1f5f9; }
    .dark .support-strip { background:#1e293b; border-color:#334155; }
    .dark .support-strip h2 { color:#e2e8f0; }
    .dark .support-strip p { color:#B6C2D4; }

    /* ===== Responsive ===== */
    @media(max-width:767px){
      .shell{padding:24px 16px 72px}
      .top{padding:10px 16px}
      .release,.content{padding:24px 20px 28px;border-radius:14px}
      .release-head{flex-direction:column;gap:10px}
      .date{white-space:normal}
      .support-strip{padding:18px 20px}
      .support-strip .btn{width:100%}
    }
    @media (min-width:768px){ .shell{padding-top:48px} }
    @media (prefers-reduced-motion:reduce){ .btn,.back{transition:none} }

    /* Reserve the home indicator on notched devices. */
    @media (max-width:767px){
      .shell{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
    }