/* Native controls in the chosen theme (1.116.0, Veritas L54). A browser
   draws dropdowns, date pickers, checkboxes and scrollbars in the page's
   color-scheme, not in its colours. pa.js sets data-theme when the person
   picks a theme, so the scheme follows it; with no choice it follows the
   system. Written with :where() so a page's own color-scheme rule still wins
   where a page sets one. An open option list is painted by the system (white
   on Windows, whatever the page says) unless its options are given colours:
   Canvas and CanvasText are the scheme's own. */
:where(:root) { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) {
  :where(:root:not([data-theme="light"])) { color-scheme: dark; }
}
:where(option, optgroup) { background-color: Canvas; color: CanvasText; }
:where(option:disabled) { color: GrayText; }
:where(option:checked) { background-color: Highlight; color: HighlightText; }

/* The cookie banner (lib/ui/pa.js). Its own colours, light and dark, so it
   reads the same on every page; the theme follows data-theme, which pa.js
   sets, and the system's appearance where a page manages its own theme. */
.pa-consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 2147483000;
  max-width: 760px; margin: 0 auto; box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px;
  padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(120, 113, 108, .35); background: #ffffff; color: #1c1917;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
  font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: left;
}
.pa-consent[hidden] { display: none; }
.pa-consent-text { margin: 0; flex: 1 1 22rem; }
.pa-consent-text a { color: inherit; text-decoration: underline; }
.pa-consent-actions { display: flex; gap: 8px; flex: none; }
.pa-btn {
  font: 600 14px/1 inherit; padding: 10px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(120, 113, 108, .45); background: transparent; color: inherit;
}
.pa-btn-pri { background: #1c1917; border-color: #1c1917; color: #fafaf9; }
.pa-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

:root[data-theme="dark"] .pa-consent { background: #1c1917; color: #f5f5f4; border-color: rgba(214, 211, 209, .25); }
:root[data-theme="dark"] .pa-btn-pri { background: #f5f5f4; border-color: #f5f5f4; color: #1c1917; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pa-consent { background: #1c1917; color: #f5f5f4; border-color: rgba(214, 211, 209, .25); }
  :root:not([data-theme="light"]) .pa-btn-pri { background: #f5f5f4; border-color: #f5f5f4; color: #1c1917; }
}

/* Pinned-to-the-bottom things move up while the banner is open. */
.pa-lifted { bottom: 132px !important; }
@media (max-width: 640px) { .pa-lifted { bottom: 200px !important; } }

/* The Practice banner (lib/practice.mjs): on every page of the practice
   dashboard, never dismissable, the same in both themes. */
.pa-practice {
  position: sticky; top: 0; z-index: 2147483001; box-sizing: border-box; width: 100%;
  padding: 8px 16px; text-align: center; background: #b45309; color: #fff;
  font: 600 14px/1.4 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Polyaly (lib/ui/pa.js): a button at the corner, and a panel above it. */
.pa-missing { max-width: 40rem; margin: 0 auto; padding: 32px 16px; }
.pa-key-notice {
  margin: 0; padding: 12px 16px; background: #fef3c7; color: #1c1917; font-size: 15px; line-height: 1.4; overflow-wrap: anywhere;
}
.pa-polyaly-open {
  position: fixed; right: 16px; bottom: 16px; z-index: 2147482999;
  font: 600 14px/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 12px 16px; border-radius: 999px; border: 0; cursor: pointer;
  background: #1c1917; color: #fafaf9; box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
}
.pa-polyaly {
  position: fixed; right: 16px; bottom: 72px; z-index: 2147483000; box-sizing: border-box;
  width: min(420px, calc(100vw - 32px)); max-height: min(70vh, 640px); display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border-radius: 12px; border: 1px solid rgba(120, 113, 108, .35); background: #fff; color: #1c1917;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .18); font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.pa-polyaly[hidden] { display: none; }
.pa-polyaly-title { margin: 0; font-weight: 700; }
/* Where the question goes, before it is asked: small, and never hidden. */
.pa-polyaly-where { margin: 0; font-size: 12.5px; line-height: 1.45; opacity: .8; }
.pa-polyaly-log { overflow-y: auto; flex: 1 1 auto; min-height: 60px; }
.pa-polyaly-log p { margin: 0 0 8px; white-space: pre-wrap; }
.pa-polyaly-you { font-weight: 600; }
.pa-polyaly-tip { font-style: italic; }
.pa-polyaly-error { color: #b91c1c; }
.pa-polyaly-confirm { border: 1px solid rgba(120, 113, 108, .45); border-radius: 8px; padding: 8px; margin-bottom: 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.pa-polyaly-confirm p { flex-basis: 100%; }
.pa-polyaly-form { display: flex; flex-wrap: wrap; gap: 8px; }
.pa-polyaly-input { flex: 1 1 100%; box-sizing: border-box; font: inherit; padding: 8px; border-radius: 8px; border: 1px solid rgba(120, 113, 108, .45); background: transparent; color: inherit; }
:root[data-theme="dark"] .pa-polyaly { background: #1c1917; color: #f5f5f4; }
:root[data-theme="dark"] .pa-polyaly-open { background: #f5f5f4; color: #1c1917; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pa-polyaly { background: #1c1917; color: #f5f5f4; }
  :root:not([data-theme="light"]) .pa-polyaly-open { background: #f5f5f4; color: #1c1917; }
}

/* A newer build is running (1.116.0, lib/ui/pa.js): a bar across the top that
   says this page has stopped saving, with a Reload button. Its own colours,
   like the cookie banner's. */
.pa-build-notice {
  position: sticky; top: 0; z-index: 2147483002; box-sizing: border-box; width: 100%;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px;
  padding: 10px 16px; background: #fef3c7; color: #1c1917; border-bottom: 1px solid rgba(120, 113, 108, .35);
  font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow-wrap: anywhere;
}
.pa-build-words { flex: 1 1 18rem; max-width: 46rem; }

/* The language and currency switcher (lib/ui/pa.js, 1.117.0), at the foot of
   every site page. It takes the footer's own colours and font, and uses
   logical properties only, so it reads the same right to left. The selects
   are the browser's own, so they work from the keyboard as any select does. */
.pa-locale {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin-block: 12px 0; margin-inline: 0; font: inherit; color: inherit;
}
.pa-locale-label { font: inherit; color: inherit; }
.pa-locale-select {
  font: inherit; color: inherit; background: transparent;
  padding-block: 4px; padding-inline: 8px; border-radius: 6px;
  border: 1px solid rgba(120, 113, 108, .45); margin-inline-end: 6px;
}
.pa-locale-select:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.pa-locale-note { flex-basis: 100%; margin: 0; font: inherit; color: inherit; }

/* An agent's label, "{name} (Agent, {department})" (1.117.7, 3Sry D-220).
   The line wraps rather than shortening, so "Agent" is never cut off. An
   agent's mark is never a person's: it is marked as an agent's. */
.agent-label { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; }
.is-agent { border-radius: 6px; outline: 1px dashed currentColor; outline-offset: 1px; }