/* Long-form policy pages: terms, refunds, shipping.

   These live in a real stylesheet rather than a <style> block because the vhost
   sends `style-src 'self'` and an inline block is refused outright -- the page
   still renders, just entirely unstyled, which is the kind of failure that looks
   like nothing happened. Same reason policy.js exists. */

.policy { max-width: 46rem; }
.policy h2 { margin-top: 2.2rem; }
.policy h3 { margin-top: 1.4rem; font-size: 1rem; }
.policy li { margin-bottom: .35rem; }

.policy table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.policy th,
.policy td {
  text-align: left;
  padding: .45rem .6rem;
  border-bottom: 1px solid var(--line, #d8dee4);
  vertical-align: top;
}
.policy th { font-weight: 600; }
.policy td.num,
.policy th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* The two attention colours are TOKENS, declared light here and re-declared in
   both dark branches, because cnc.css runs the three-state theme this site uses:
   :root is light, `prefers-color-scheme: dark` guarded by :not([data-theme="light"])
   so an explicit light choice still wins, and [data-theme="dark"] for the toggle.
   Hard-coding them light made the draft box a near-white panel on a near-black
   page -- readable, and unmistakably a bug to look at. */
:root {
  --policy-flag-bg:     #fff3b0;
  --policy-flag-ink:    #4a3a00;
  --policy-flag-line:   #8a6d00;
  --policy-draft-bg:    #fffaf0;
  --policy-draft-ink:   #3d3000;
  --policy-draft-line:  #8a6d00;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --policy-flag-bg:    #4a3c00;
    --policy-flag-ink:   #ffe89a;
    --policy-flag-line:  #b39412;
    --policy-draft-bg:   #23200f;
    --policy-draft-ink:  #f2e6bd;
    --policy-draft-line: #b39412;
  }
}

:root[data-theme="dark"] {
  --policy-flag-bg:    #4a3c00;
  --policy-flag-ink:   #ffe89a;
  --policy-flag-line:  #b39412;
  --policy-draft-bg:   #23200f;
  --policy-draft-ink:  #f2e6bd;
  --policy-draft-line: #b39412;
}

/* A field the owner has still to supply. Deliberately loud: a placeholder that
   blends in is a placeholder that ships. */
.fillme {
  background: var(--policy-flag-bg);
  color: var(--policy-flag-ink);
  padding: 0 .25rem;
  border-bottom: 1px dashed var(--policy-flag-line);
}

.draft-note {
  border: 2px solid var(--policy-draft-line);
  background: var(--policy-draft-bg);
  color: var(--policy-draft-ink);
  padding: .9rem 1.1rem;
  margin: 1.2rem 0 2rem;
}
.draft-note p { margin: .4rem 0; max-width: none; }

.tariff-note { font-size: .875rem; color: var(--muted, #5a6b7c); }

@media (max-width: 40rem) {
  .policy table, .policy thead, .policy tbody, .policy tr, .policy th, .policy td {
    display: block;
  }
  .policy thead { display: none; }
  .policy tr { border-bottom: 1px solid var(--line, #d8dee4); padding: .4rem 0; }
  .policy td { border: 0; padding: .2rem 0; }
  .policy td.num { text-align: left; }
}