/* ---------- The policy pages (privacy.html, terms.html, refunds.html; policy.js renders their Markdown).
   MIRRORED: write/policy.css and flowchart/policy.css are the same file, byte for byte, as are policy.js
   and the three pages (cloud/test/vendor.test.mjs checks). The pages load the apps' ui.css first (the
   tokens, both themes, .btn, .prefs-card and its glass, .panel-head, .section, .note, the scrollbar), so
   only the page's layout and the Markdown's own elements (.policy-body …) are here. */

/* the page scrolls, as a document; keyboard focus shows the apps' halo (no Tab tracking here: the
   browser's :focus-visible is the keyboard's) */
body { min-height: 100vh; }
:focus-visible { box-shadow: var(--state-shadow, 0 0 #0000), var(--halo); }

/* ---------- the page: the card on the app's page, wide enough to read */
.policy { display: grid; justify-items: center; padding: 32px 16px 48px; }
.policy .prefs-card { width: min(720px, 100%); }
.policy .panel-head { padding-top: 18px; }
.policy-back { justify-self: start; margin: 0 0 8px -8px; }

/* the Markdown (policy.js): a Settings section's type, the app's note colour, links as the account's */
.section.policy-body { grid-template-columns: minmax(0, 1fr); padding-bottom: 22px; }   /* (one column: not a row of stat tiles, though its quotes are .fact tiles) */
.policy-body > :first-child { margin-top: 0; }
.policy-body h2 { margin: 18px 0 2px; font-size: var(--text-lg); }
.policy-body :is(h3, h4) { margin: 12px 0 0; font-size: var(--text-md); font-weight: var(--weight-strong); color: var(--text-1); }
.policy-body p, .policy-body li { margin: 0; color: var(--text-2); }
.policy-body strong { color: var(--text-1); font-weight: var(--weight-strong); }
.policy-body a { color: var(--accent); }
.policy-body code { font-family: var(--font-mono); font-size: 0.92em; color: var(--text-1); }
.policy-body ul, .policy-body ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.policy-body li > ul, .policy-body li > ol { margin-top: 4px; }
.policy-body blockquote { margin: 4px 0; padding: 12px 14px; display: grid; gap: 6px; }
.policy-body hr { width: 100%; height: 0; margin: 10px 0; border: 0; border-top: 0.5px solid var(--line-card); }   /* (ui.css's rule) */
.policy-body .policy-table { overflow-x: auto; }
.policy-body table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.policy-body th, .policy-body td { padding: 6px 10px; text-align: left; vertical-align: top; color: var(--text-2); box-shadow: inset 0 -0.5px 0 var(--line-card); }
.policy-body th { color: var(--text-1); font-weight: var(--weight-strong); }
@media print {
  body { background: #fff; color: #000; }
  .policy-back { display: none; }
  .prefs-card { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}