/* Policy pages stylesheet (/app/legal/): a copy of the client help stylesheet plus the draft
   banner. Plain CSS, no build step. Kept free of the words the client wording check refuses,
   because it is served beside client pages. */
:root {
  --bg: #f4f5f2; --panel: #ffffff; --ink: #1b2420; --muted: #5c6862; --line: #d8ddd8;
  --accent: #1d6b5a; --soft: #eef1ec; --warn: #9a5b00; --bad: #b42318; --ok: #1d7a46;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111614; --panel: #19201d; --ink: #e3e9e5; --muted: #98a59e; --line: #2c3631;
    --accent: #4fbf9f; --soft: #1f2824; --warn: #f0a33a; --bad: #ff6b5e; --ok: #4cc38a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111614; --panel: #19201d; --ink: #e3e9e5; --muted: #98a59e; --line: #2c3631;
  --accent: #4fbf9f; --soft: #1f2824; --warn: #f0a33a; --bad: #ff6b5e; --ok: #4cc38a;
  color-scheme: dark;
}
body.ops { --accent: #1f5fae; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.ops { --accent: #6ea8ff; } }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--accent); }
header.top { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; padding: 12px 16px;
  background: var(--panel); border-bottom: 1px solid var(--line); }
header.top .brand { font-weight: 650; font-size: 17px; }
header.top .brand span { color: var(--muted); font-weight: 400; font-size: 14px; margin-left: 6px; }
header.top .back { margin-left: auto; font-size: 14px; }
.wrap { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 28px; max-width: 1120px;
  margin: 0 auto; padding: 20px 16px 60px; }
@media (max-width: 820px) { .wrap { grid-template-columns: minmax(0, 1fr); gap: 12px; } }
nav.toc { font-size: 14.5px; }
nav.toc ul { list-style: none; margin: 0; padding: 0; }
nav.toc li { margin: 0; }
nav.toc a { display: block; padding: 5px 10px; text-decoration: none; color: var(--ink);
  border-left: 3px solid transparent; }
nav.toc a:hover { background: var(--soft); }
nav.toc a[aria-current="page"] { border-left-color: var(--accent); background: var(--soft); font-weight: 600; }
@media (max-width: 820px) {
  nav.toc ul { display: flex; flex-wrap: wrap; gap: 4px; }
  nav.toc a { border: 1px solid var(--line); border-left-width: 1px; padding: 3px 9px; }
  nav.toc a[aria-current="page"] { border-color: var(--accent); }
}
main.doc { min-width: 0; max-width: 760px; }
main.doc h1 { font-size: 26px; line-height: 1.25; margin: 0 0 6px; }
main.doc .lede { color: var(--muted); font-size: 17px; margin: 0 0 18px; }
main.doc h2 { font-size: 19px; margin: 30px 0 8px; padding-top: 10px; border-top: 1px solid var(--line); }
main.doc h3 { font-size: 16px; margin: 20px 0 6px; }
main.doc p, main.doc li { max-width: 72ch; }
main.doc ol, main.doc ul { padding-left: 22px; }
main.doc li { margin: 4px 0; }
code, kbd, .mono { font-family: var(--mono); font-size: 0.92em; }
code { background: var(--soft); padding: 0 4px; }
.note { border-left: 3px solid var(--accent); background: var(--panel); padding: 8px 12px; margin: 12px 0; }
.note.warn { border-left-color: var(--warn); }
.note.soon { border-left-color: var(--muted); }
.tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 0 7px;
  border: 1px solid currentColor; color: var(--muted); vertical-align: 1px; white-space: nowrap; }
.tag.soon { color: var(--warn); }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14.5px; margin: 10px 0; background: var(--panel); }
th, td { text-align: left; vertical-align: top; padding: 7px 9px; border: 1px solid var(--line); }
th { background: var(--soft); font-weight: 600; }
td code { word-break: break-word; }
dl.faq dt { font-weight: 600; margin-top: 16px; }
dl.faq dd { margin: 4px 0 0; }
footer.foot { color: var(--muted); font-size: 13px; margin-top: 40px; padding-top: 10px;
  border-top: 1px solid var(--line); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 16px 0; }
.cards a { display: block; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line);
  text-decoration: none; color: var(--ink); }
.cards a strong { display: block; color: var(--accent); margin-bottom: 2px; }
.cards a span { color: var(--muted); font-size: 14px; }
.cards a:hover { border-color: var(--accent); }
.msg { color: var(--bad); }

/* Accessibility (2026-10-10): a visible keyboard focus ring on every link and
   control, the table boxes that scroll sideways on a phone take focus (arrow keys scroll them),
   and no motion for anyone whose system asks for less. Colours measured against WCAG 2.2 AA. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.scroll[tabindex]:focus-visible { outline-offset: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Policy pages: the draft banner, first on every page until the pages are in force. */
.draft { margin: 0; padding: 10px 16px; background: var(--warn); color: #ffffff; font-weight: 600;
  text-align: center; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .draft { color: #111614; } }
:root[data-theme="dark"] .draft { color: #111614; }
.ph { background: var(--soft); border: 1px dashed var(--muted); padding: 0 4px; font-family: var(--mono);
  font-size: 0.92em; }