/* About / Privacy / Contact pages: the app's Bold pop look (same tokens as index.html), made for reading. */
:root{
  --page:#FFF7E8; --card:#FFFFFF; --ink:#111111; --muted:#5E5850; --edge:#111111; --shadow:#111111;
  --sticker:#FFD23F; --link:#1F5FD1;
  --font:"Geologica", "Commissioner", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme:light;
}
/* night: follows the phone, or the Theme chosen in the app's Settings */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --page:#15121F; --card:#221D33; --ink:#FFF7E8; --muted:#BDB6CF; --edge:#FFF7E8; --shadow:#FFF7E8; --link:#9DB8FF;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --page:#15121F; --card:#221D33; --ink:#FFF7E8; --muted:#BDB6CF; --edge:#FFF7E8; --shadow:#FFF7E8; --link:#9DB8FF;
  color-scheme:dark;
}
/* the app's accessibility settings */
html[data-text="l"]{font-size:112.5%}
html[data-text="xl"]{font-size:125%}
:root.hc{--muted:var(--ink)}
.hc .foot{border-top-style:solid}
html.easy{--font:"Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}
html.rm *{transition:none!important; animation:none!important}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0; background:var(--page)}
html{overflow-x:hidden; overscroll-behavior:none}   /* only the page scrolls: a scrolling body would swallow the mouse wheel */
body{color:var(--ink); font:400 1rem/1.6 var(--font); -webkit-font-smoothing:antialiased}
:focus-visible{outline:3px solid var(--sticker); outline-offset:3px}
a{color:var(--link); font-weight:700; text-underline-offset:3px}

.page{max-width:680px; margin:0 auto;
  padding:calc(env(safe-area-inset-top, 0px) + 16px) max(16px, env(safe-area-inset-right, 0px)) 48px max(16px, env(safe-area-inset-left, 0px))}
.top{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px}
.logo{display:inline-block; background:var(--sticker); color:#111; border:2.5px solid var(--edge); box-shadow:3px 3px 0 var(--shadow);
  border-radius:12px; padding:2px 12px; font-weight:900; font-size:1.25rem; letter-spacing:-.02em; text-decoration:none; transform:rotate(-2deg)}
.pill{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 16px; border-radius:999px; background:var(--card); color:var(--ink);
  border:2.5px solid var(--edge); box-shadow:3px 3px 0 var(--shadow); font:inherit; font-weight:800; text-decoration:none; cursor:pointer;
  transition:transform .08s, box-shadow .08s}
.pill:hover{background:var(--sticker); color:#111}
.pill:active{transform:translate(3px,3px); box-shadow:0 0 0 var(--shadow)}

h1{font-size:2.25rem; line-height:1.05; font-weight:900; letter-spacing:-.02em; margin:0 0 8px}
.lead{color:var(--muted); font-size:1.05rem; margin:0 0 24px}
h2{font-size:1.25rem; font-weight:900; margin:32px 0 8px}
p,ul{margin:0 0 16px}
ul{padding-left:22px}
li{margin-bottom:8px}
.card{background:var(--card); border:2.5px solid var(--edge); box-shadow:4px 4px 0 var(--shadow); border-radius:20px; padding:16px 20px; margin:0 0 24px}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.big{font-size:1.25rem; font-weight:900; word-break:break-all}
.muted{color:var(--muted); font-size:.9rem}

.foot{display:flex; flex-wrap:wrap; gap:8px 16px; justify-content:center; margin-top:48px; padding-top:24px; border-top:2px dashed var(--muted); font-size:.9rem}
.foot a{color:var(--muted)}
.foot a[aria-current]{color:var(--ink); text-decoration:none}

/* Buy me a coffee (website only) */
.tip{display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:0 18px; border-radius:999px; background:var(--sticker); color:#111!important;
  border:2.5px solid var(--edge); box-shadow:3px 3px 0 var(--shadow); font-weight:800; text-decoration:none!important}
.tip:active{transform:translate(3px,3px); box-shadow:0 0 0 var(--shadow)}