/* Card detail: the modal sheet with meaning, what to test, links and "often confused with". */
.modal{position:fixed; inset:0; background:var(--bg); display:flex; align-items:flex-start; justify-content:center; padding:16px; padding-top:calc(16px + env(safe-area-inset-top, 0px)); overflow:auto; z-index:10}
.modal .sheet{margin-block:auto}
.sheet{background:var(--surface); border-radius:22px; max-width:520px; width:100%; border:1px solid var(--line); padding:0 0 20px; position:relative; border-top:10px solid var(--cls)}
.sheet .in{padding:20px 22px 0}
.back{margin:20px 22px 0; border:1.5px solid var(--line); background:var(--bg); color:var(--ink); font:700 15px var(--body); padding:9px 16px; border-radius:12px; cursor:pointer}
.sheet h3{font:800 28px var(--display); margin:0}
.sheet h4{font:700 13px var(--body); text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:16px 0 4px}
.sheet p{margin:0}
.qa{margin:4px 0 0; padding-left:20px; display:flex; flex-direction:column; gap:4px}
.qa li::marker{color:var(--accent)}
.links{margin:4px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:2px}
.links a{display:inline-block; padding:6px 0; color:var(--accent); text-underline-offset:3px}
.close{position:absolute; top:10px; right:10px; border:0; background:var(--soft); color:var(--ink); width:36px; height:36px; border-radius:50%; font-size:20px; cursor:pointer}
.mini{display:flex; gap:8px; flex-wrap:wrap; margin-top:6px}
.mini button{border:1.5px solid var(--line); background:var(--bg); color:var(--ink); border-radius:999px; padding:4px 10px; font:700 13px var(--body); cursor:pointer}