/* Slab or Not: shared style for the info pages (photo guide, terms). Same look as the check page. */
:root{
  --bg:#E8ECE9; --app:#FFFFFF; --ink:#16201C; --muted:#5B6863; --rule:#D5DDD8; --chip:#EEF2EF;
  --brand:#0B3D2E; --brand-ink:#FFFFFF; --cta:#FFD60A; --cta-ink:#2B2400;
  --good:#2B7A3D; --good-bg:#E3F2E6; --warn:#9A6200; --warn-bg:#FFF3D1; --bad:#B42318; --bad-bg:#FBE7E5;
  --display:"Archivo","Arial Narrow",system-ui,sans-serif; --body:"IBM Plex Sans",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0C1210; --app:#151D1A; --ink:#E6ECE8; --muted:#97A49E; --rule:#2A3531; --chip:#1E2925;
  --brand:#0F4D3A; --good:#5CC27A; --good-bg:#16301F; --warn:#E3B04B; --warn-bg:#2E2610; --bad:#F07167; --bad-bg:#3A1A17; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0C1210; --app:#151D1A; --ink:#E6ECE8; --muted:#97A49E; --rule:#2A3531; --chip:#1E2925;
  --brand:#0F4D3A; --good:#5CC27A; --good-bg:#16301F; --warn:#E3B04B; --warn-bg:#2E2610; --bad:#F07167; --bad-bg:#3A1A17; color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 48px}
.wrap{max-width:640px;margin:0 auto}
.bar{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--brand);color:var(--brand-ink);padding:14px 18px;border-radius:18px 18px 0 0}
.brand{font:800 19px/1 var(--display);color:inherit;text-decoration:none}
.brand b{color:var(--cta)}
.bar a.back{color:var(--brand-ink);font-size:14px;opacity:.9}
.page{background:var(--app);border:1px solid var(--rule);border-top:0;border-radius:0 0 18px 18px;padding:20px 20px 28px}
h1{font:800 28px/1.15 var(--display);margin:0 0 6px;text-wrap:balance}
h2{font:700 20px/1.25 var(--display);margin:28px 0 8px}
h3{font:700 16px/1.3 var(--display);margin:18px 0 4px}
p{margin:0 0 12px} ul,ol{margin:0 0 12px;padding-left:22px} li{margin:4px 0}
.lede{color:var(--muted);font-size:17px}
.small{font-size:13px;color:var(--muted)}
a{color:inherit}
.tips{list-style:none;padding:0;display:flex;flex-direction:column;gap:12px}
.tips li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;margin:0}
.tips .n{width:34px;height:34px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center;font:700 15px var(--display)}
.tips b{display:block}
.ex{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 6px}
.ex figure{margin:0;display:flex;flex-direction:column;gap:6px}
.ex img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;display:block;border:3px solid transparent}
.ex .ok img{border-color:var(--good)} .ex .no img{border-color:var(--bad)}
.ex figcaption{font-size:13px;line-height:1.35}
.ex .ok figcaption b{color:var(--good)} .ex .no figcaption b{color:var(--bad)}
.box{border-radius:12px;padding:12px 14px;background:var(--chip);margin:12px 0}
.box.warn{background:var(--warn-bg)}
.cta{display:block;text-align:center;font:700 17px var(--display);background:var(--cta);color:var(--cta-ink);text-decoration:none;border-radius:12px;padding:14px 16px;margin-top:22px}
.toc{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;margin:6px 0 4px}
@media (max-width:420px){ .ex{grid-template-columns:1fr 1fr 1fr;gap:6px} .ex figcaption{font-size:12px} }