/* UI styles. High contrast, visible focus, nothing carried by colour alone. */
:root { color-scheme: light; }
html { font-size: 100%; }
body {
  font-family: "Readex Pro", "Liberation Sans", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: #1a1a1a;
  background: #ffffff;
  margin: 0;
}
main, .site-header { max-width: 52rem; margin: 0 auto; padding: 0 1rem; }
main { padding-bottom: 3rem; }
main:focus { outline: none; }
h1, h2, h3, h4 { line-height: 1.25; margin: 1.5em 0 0.5em; }
h1 { font-size: 1.9rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }
a { color: #0b4f9c; text-decoration: underline; }
:focus-visible { outline: 3px solid #1a1a1a; outline-offset: 2px; }
.skip-link { position: absolute; left: -10000px; }
.skip-link:focus { position: static; display: inline-block; padding: 0.5rem 1rem; }

.site-header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  border-bottom: 2px solid #1a1a1a; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.app-name { font-weight: 700; margin: 0; }
.site-header ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
form.inline { display: inline; }
.link-button { background: none; border: none; padding: 0; font: inherit; color: #0b4f9c;
  text-decoration: underline; cursor: pointer; }

.field { margin: 0 0 1.25rem; }
fieldset.field { border: 1px solid #6b6b6b; padding: 0.5rem 1rem 0.75rem; }
legend { font-weight: 600; padding: 0 0.25rem; }
label { display: block; font-weight: 600; }
.radio label { display: inline; font-weight: 400; margin-left: 0.4rem; }
.radio { margin: 0.35rem 0; }
.hint { margin: 0.1rem 0 0.3rem; color: #3d3d3d; }
.error { margin: 0.1rem 0 0.3rem; font-weight: 600; color: #a00000; }
.field-error { border-left: 5px solid #a00000; padding-left: 0.75rem; }
fieldset.field-error { border-left-width: 5px; }
input[type="text"], input[type="url"], input[type="number"], input[type="password"], textarea {
  font: inherit; width: 100%; max-width: 36rem; box-sizing: border-box; padding: 0.4rem 0.5rem;
  border: 2px solid #1a1a1a; border-radius: 2px; }
input[type="number"] { max-width: 10rem; }
input[type="radio"] { transform: scale(1.25); }
button { font: inherit; font-weight: 600; padding: 0.55rem 1.1rem; border: 2px solid #1a1a1a;
  background: #1a1a1a; color: #ffffff; border-radius: 2px; cursor: pointer; }
button.secondary { background: #ffffff; color: #1a1a1a; margin-top: 1rem; }
.error-summary { border: 4px solid #a00000; padding: 0.5rem 1rem; margin: 1rem 0; }
.error-summary h2 { margin-top: 0.25rem; font-size: 1.2rem; }

table { border-collapse: collapse; width: 100%; margin: 0 0 1rem; }
caption { text-align: left; font-weight: 600; padding: 0.25rem 0; }
th, td { border: 1px solid #6b6b6b; padding: 0.35rem 0.5rem; text-align: left; vertical-align: top;
  overflow-wrap: break-word; }
thead th { background: #e8e8e8; }
blockquote.quote { margin: 0 0 1em; padding: 0.5rem 0.75rem; border-left: 4px solid #6b6b6b;
  background: #f7f7f7; white-space: pre-line; }
ol.blocks { padding-left: 1.5rem; }
.block-location { font-weight: 600; margin: 0.5rem 0 0.25rem; }
.url { overflow-wrap: anywhere; }
ul.tree, ul.tree ul { padding-left: 1.25rem; }
details summary { cursor: pointer; font-weight: 600; }
.progress-box { border: 2px solid #1a1a1a; padding: 0.5rem 1rem; }
progress { width: 100%; height: 1.25rem; }
ul.actions { padding-left: 1.25rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Page tree with checkboxes (preview). Nested lists give the level; indentation shows it. */
fieldset.tree-select { border: 1px solid #6b6b6b; padding: 0.5rem 1rem 0.75rem; margin: 0 0 1.25rem; }
ul.sel-tree, ul.sel-tree ul { list-style: none; padding-left: 1.5rem; margin: 0.15rem 0; }
ul.sel-tree { padding-left: 0; }
ul.sel-tree li { margin: 0.2rem 0; }
ul.sel-tree input[type="checkbox"] { transform: scale(1.25); margin-right: 0.4rem; }
ul.sel-tree label { display: inline; font-weight: 400; overflow-wrap: anywhere; }
ul.sel-tree input[data-kind="section"] + label { font-weight: 600; }
.sel-state, .sel-note { color: #3d3d3d; }
.sel-state { margin-left: 0.5rem; }
.sel-toggle { margin-left: 0.75rem; font-weight: 400; }
/* Decoration only (empty alt text): aria-expanded tells the state. */
.sel-toggle[aria-expanded="false"]::before { content: "▸ " / ""; }
.sel-toggle[aria-expanded="true"]::before { content: "▾ " / ""; }
.scope-box { border-left: 4px solid #1a1a1a; padding: 0.25rem 0 0.25rem 1rem; margin: 1rem 0; }
.form-actions button { margin: 1rem 1rem 0 0; }