/* shared styles for the sub pages (changelog, privacy, imprint); index.html keeps its own inline styles */
/* same tokens and self-hosted fonts as index.html */
@font-face { font-family:Onest; src:url(fonts/onest.woff2) format("woff2"); font-weight:100 900; font-display:swap; }
@font-face { font-family:"IBM Plex Mono"; src:url(fonts/ibm-plex-mono-500.woff2) format("woff2"); font-weight:500; font-display:swap; }
:root { --bg:#060908; --panel:rgba(8,13,11,.8); --line:#1b2520; --dim:#7d8a83; --text:#c4cec8; --ink:#eef5f1;
        --g1:#22C55E; --g2:#10B981; --g3:#0D9488; --acc:#1aa860;
        --grad:linear-gradient(90deg,var(--g1),var(--g2),var(--g3));
        --body:Onest, system-ui, sans-serif; --mono:"IBM Plex Mono", ui-monospace, monospace; }
/* in the app: neutral greys, so it fits the green ENL NF and the amber NF card alike */
.inapp { --bg:#fff; --panel:#fff; --line:#e3e6e4; --dim:#5f6763; --text:#222826; --ink:#101412; --acc:#3a423e; }

* { box-sizing:border-box; }
html { background:var(--bg); overflow-x:clip; }
body { margin:0; color:var(--text); font:15px/1.6 var(--body); overflow-x:clip; }
a { color:var(--acc); }
a:focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
.wrap { max-width:1080px; margin:0 auto; padding:0 20px; }
.brand-mark { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

header { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 0; font-size:13px; }
header b { font-size:18px; font-weight:700; letter-spacing:.06em; }
header b a { text-decoration:none; }
header nav { display:flex; align-items:center; gap:22px; }
header nav a { color:var(--text); text-decoration:none; }
header nav a:hover, header nav a[aria-current] { color:var(--acc); }

h1 { font-size:clamp(26px,3.6vw,40px); line-height:1.15; font-weight:500; color:var(--ink); margin:36px 0 8px; text-wrap:balance; }
.lead { color:var(--dim); margin:0 0 40px; }

/* one row per release: version left, changes right */
.log section { display:grid; grid-template-columns:220px minmax(0,1fr); gap:8px 48px; padding:20px 0; border-top:1px solid var(--line); }
.log h2 { margin:0; font:500 14px/1.6 var(--mono); color:var(--ink); }
.log section:first-child h2 { color:var(--acc); }
.log ul { margin:0; padding:0 0 0 18px; max-width:68ch; }
.log li { margin:2px 0; }
sup { color:var(--dim); }

.foot { display:flex; flex-wrap:wrap; gap:8px 24px; margin-top:40px; padding:28px 0 60px; border-top:1px solid var(--line); color:var(--dim); font-size:12px; }
.foot a { color:var(--dim); }
.foot a:hover { color:var(--text); }

.inapp header, .inapp .foot, .inapp h1, .inapp .lead { display:none; }
.inapp .wrap { padding:0 16px; }
.inapp .log section { grid-template-columns:1fr; gap:4px; padding:16px 0; }
.inapp .log section:first-child { border-top:0; }

@media (max-width:760px) {
  header nav a.navlink { display:none; }
  .log section { grid-template-columns:1fr; gap:4px; }
}

/* legal pages */
.legal { max-width:760px; padding-bottom:20px; }
.legal h2 { margin:40px 0 8px; font-size:20px; line-height:1.3; font-weight:500; color:var(--ink); }
.legal h3 { margin:24px 0 6px; font-size:16px; font-weight:500; color:var(--ink); }
.legal p, .legal ul { margin:0 0 14px; }
.legal ul { padding-left:20px; }
.legal li { margin:4px 0; }
.legal strong { color:var(--ink); font-weight:500; }
.muted { color:var(--dim); }
.box { margin:24px 0 8px; padding:16px 20px; border:1px solid var(--acc); background:var(--panel); }
.box > strong { display:block; margin-bottom:4px; }
.box ul { margin:0; }
code { font-family:var(--mono); font-size:13px; overflow-wrap:anywhere; }
table { width:100%; border-collapse:collapse; margin:8px 0 14px; font-size:14px; }
th, td { text-align:left; vertical-align:top; padding:8px 10px 8px 0; border-bottom:1px solid var(--line); }
th { color:var(--dim); font-weight:500; }
@media (max-width:640px) {
  table, thead, tbody, tr, th, td { display:block; }
  thead { display:none; }
  td { border:0; padding:1px 0; }
  tr { border-bottom:1px solid var(--line); padding:8px 0; }
}