/* legal.css — the five policy pages: terms, privacy, refund, shipping, contact.
 *
 * One stylesheet rather than a <style> block per page, which is the opposite of what the
 * rest of static/ does. The reason is that these five pages are ONE document set: they
 * are read together, they are audited together by a payment gateway, and a policy page
 * that does not look like its four siblings reads as a page somebody forgot. Every other
 * page here is a different screen with a different job, so its own block is right there.
 *
 * Colours come from theme.css tokens only. These pages must survive every accent the user
 * can pick, and a hardcoded grey is the thing that goes invisible in one of the modes --
 * the invisible-text defect of 2026-07-04 was exactly that.
 */

body { font-family: var(--font); background: var(--bg); color: var(--text);
       min-height: 100vh; padding-bottom: 40px; }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 18px; }

header.bar { position: sticky; top: 0; z-index: 20; background: var(--bg);
             border-bottom: 1px solid var(--hair); padding: 12px 0; }
header.bar .wrap { display: flex; align-items: center; gap: 14px; }
.brand img { height: 26px; width: auto; vertical-align: middle; }
.grow { flex: 1; }
.navlink { color: var(--accent); text-decoration: none; font-size: .86em; font-weight: 600; }

h1 { font-size: 1.5em; letter-spacing: -.01em; margin: 30px 0 6px; }
.updated { color: var(--dim); font-size: .78em; margin-bottom: 22px; }
h2 { font-size: 1.02em; margin: 26px 0 8px; }
p, li { font-size: .89em; line-height: 1.7; color: var(--text); }
p { margin-bottom: 12px; }
ul, ol { margin: 0 0 14px 20px; }
li { margin-bottom: 6px; }
strong { font-weight: 600; }
a { color: var(--accent); }

.addr { font-style: normal; font-size: .89em; line-height: 1.7; }

/* An unstated fact is SHOWN, not silently skipped and not filled with something
 * plausible. This is the storefront's "Price on request" applied to a legal page: the
 * reader can see that the seller has not said yet, which is true, instead of reading an
 * address or a refund window that nobody chose. It is styled to be conspicuous on
 * purpose -- these are meant to be found and filled before launch, not lived with. */
.gap { display: inline-block; background: var(--warning-bg); border: 1px dashed var(--warning);
       border-radius: 5px; padding: 0 6px; font-size: .92em; color: var(--text);
       font-style: normal; white-space: nowrap; }

.note { background: var(--card); border: 1px solid var(--border); border-radius: 10px;
        padding: 13px 15px; font-size: .84em; line-height: 1.6; margin: 16px 0; }
.note.warn { background: var(--warning-bg); border-color: var(--warning); }

table.kv { width: 100%; border-collapse: collapse; margin: 6px 0 16px; }
table.kv th, table.kv td { text-align: left; vertical-align: top; padding: 9px 10px;
                           border-bottom: 1px solid var(--hair); font-size: .87em; }
table.kv th { width: 38%; font-weight: 600; color: var(--muted); }

footer { color: var(--dim); font-size: .76em; text-align: center; line-height: 1.9;
         margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--hair); }
footer a { color: var(--muted); }
footer nav { margin-bottom: 8px; }
footer nav a { margin: 0 5px; }

/* Both states live here. An inline display:none on the dark twin would outrank this
   rule and it could never be shown. */
.hdrmark { display: inline-block; }
.hdrmark-dark { display: none; }
[data-mode="dark"] .hdrmark-light { display: none; }
[data-mode="dark"] .hdrmark-dark { display: inline-block; }