:root {
  --bg: #ffffff;
  --bg-soft: #f5f7f9;
  --bg-sidebar: #f7f8fa;
  --text: #1d2329;
  --muted: #5f6b76;
  --border: #dde2e7;
  --accent: #065a82;
  --accent-hover: #054a6b;
  --accent-soft: #e6f0f6;
  --danger: #b42318;
  --warn-bg: #fff7e0;
  --warn-border: #f2d27a;
  --ok-bg: #e8f5ec;
  --ok-border: #9fd3ae;
  --radius: 6px;
  --topbar-h: 52px;
  --sidebar-w: 290px;
  color-scheme: light;
}

/* Dark colours: used when the Mac is set to dark, unless light was chosen here. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15191d;
    --bg-soft: #1d2227;
    --bg-sidebar: #1a1f24;
    --text: #e4e8ec;
    --muted: #9aa5b0;
    --border: #2e353c;
    --accent: #5fb3dc;
    --accent-hover: #86c7e7;
    --accent-soft: #1f3340;
    --danger: #f07167;
    --warn-bg: #3a3120;
    --warn-border: #6b5a2c;
    --ok-bg: #1f3326;
    --ok-border: #3c6b4a;
    color-scheme: dark;
  }
}

/* Dark chosen here, whatever the Mac is set to. */
:root[data-theme="dark"] {
    --bg: #15191d;
    --bg-soft: #1d2227;
    --bg-sidebar: #1a1f24;
    --text: #e4e8ec;
    --muted: #9aa5b0;
    --border: #2e353c;
    --accent: #5fb3dc;
    --accent-hover: #86c7e7;
    --accent-soft: #1f3340;
    --danger: #f07167;
    --warn-bg: #3a3120;
    --warn-border: #6b5a2c;
    --ok-bg: #1f3326;
    --ok-border: #3c6b4a;
    color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.75rem; line-height: 1.25; margin: 0 0 0.75rem; }
h2 { font-size: 1.35rem; margin: 1.5rem 0 0.5rem; }

code { background: var(--bg-soft); padding: 0.1em 0.35em; border-radius: 4px; }

.muted { color: var(--muted); }
.inline { display: inline; }

/* Top bar */
.topbar {
  position: sticky; top: 0; z-index: 20;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: 650; color: var(--text); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.search { flex: 1; max-width: 460px; }
.search input { width: 100%; }
.usermenu { margin-left: auto; display: flex; align-items: center; gap: 14px; white-space: nowrap; font-size: 14px; }
.usermenu > a { color: var(--muted); }

.icon-btn { background: none; border: 0; font-size: 20px; color: var(--text); cursor: pointer; padding: 4px 6px; }
.sidebar-toggle { display: inline-block; }
/* The small tool row at the top of the side panel */
.tools {
  position: sticky; top: -14px; z-index: 12;
  display: flex; flex-wrap: nowrap; gap: 4px;
  background: var(--bg-sidebar);
  padding: 14px 0 10px; margin: -14px 0 8px;
  border-bottom: 1px solid var(--border);
}
.tools-form { display: flex; gap: 4px; }
.tool {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; flex: none;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text); cursor: pointer;
}
.tool:hover { background: var(--bg-soft); border-color: var(--accent); text-decoration: none; }
.tool svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tool.disabled { opacity: 0.35; pointer-events: none; }
/* The label appears under the row, so it never runs off the side panel. */
.tool::after {
  content: attr(data-tip);
  position: absolute; top: 100%; left: 0;
  background: var(--text); color: var(--bg);
  font-size: 12px; line-height: 1.3; padding: 4px 8px; border-radius: 4px;
  white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity 0.12s ease; z-index: 30;
}
.tool:hover::after, .tool:focus-visible::after { opacity: 1; }

.notice.restricted { background: var(--accent-soft); border-color: var(--accent); }
.tree .locked { font-size: 10px; opacity: 0.75; margin-left: 4px; }

/* Variables */
.unknown-variable { color: var(--danger); background: var(--warn-bg); padding: 0 3px; border-radius: 3px; }
.stack { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin-bottom: 24px; }
.stack label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--muted); }
.stack input { padding: 7px 9px; }
.stack .btn { align-self: flex-start; }
.inline-edit { display: flex; gap: 6px; }
.inline-edit input[name="value"] { flex: 1; min-width: 200px; padding: 5px 8px; }
.variable-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.variable-picker button { font: inherit; font-size: 13px; padding: 3px 9px; border: 1px solid var(--border);
                          border-radius: 999px; background: var(--bg); color: var(--text); cursor: pointer; }
.variable-picker button:hover { background: var(--accent-soft); border-color: var(--accent); }

/* Dragging pages in the side panel */
.tree a[data-drag] { cursor: grab; }
.tree a.dragging { opacity: 0.45; }
.tree .drop-before { box-shadow: inset 0 2px 0 0 var(--accent); }
.tree .drop-after { box-shadow: inset 0 -2px 0 0 var(--accent); }
.tree .drop-inside { background: var(--accent-soft); border-radius: 4px; }
.theme-btn { background: none; border: 1px solid var(--border); color: var(--muted); font: inherit; font-size: 13px;
             padding: 4px 10px; border-radius: var(--radius); cursor: pointer; white-space: nowrap; }
.theme-btn:hover { background: var(--bg-soft); color: var(--text); }

/* Layout */
.shell { display: flex; min-height: calc(100vh - var(--topbar-h)); }

.sidebar {
  width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  padding: 14px 10px 40px;
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
}

.sidebar-resizer {
  flex: 0 0 7px; margin-left: -7px; z-index: 5;
  cursor: col-resize; background: transparent;
  border: 0; padding: 0;
}
.sidebar-resizer:hover, .sidebar-resizer:focus-visible, body.resizing .sidebar-resizer {
  background: var(--accent); opacity: 0.55; outline: none;
}

body.sidebar-collapsed .sidebar,
body.sidebar-collapsed .sidebar-resizer { display: none; }

.content { flex: 1; min-width: 0; padding: 24px 36px 80px; max-width: 980px; }
body.resizing { user-select: none; cursor: col-resize; }

/* Tree */
.tree { margin-top: 10px; font-size: 14px; }
.tree ul { list-style: none; margin: 0; padding-left: 14px; }
.tree > ul { padding-left: 0; }
.tree li { margin: 1px 0; }

/* Titles stay on one line. Resizing the panel never re-wraps them. */
.tree summary, .tree .leaf { display: flex; align-items: center; gap: 4px; min-width: 0; }
.tree summary { cursor: pointer; list-style: none; position: relative; padding: 2px 0 2px 16px; }
.tree summary::-webkit-details-marker { display: none; }
.tree summary::marker { content: ""; }
.tree summary::before {
  content: "\25B8"; position: absolute; left: 1px; top: 3px; width: 12px;
  text-align: center; color: var(--muted); font-size: 13px; line-height: 1.5;
}
.tree details[open] > summary::before { content: "\25BE"; }
.tree .leaf { padding: 2px 0 2px 16px; }
.tree a {
  display: block; flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text); padding: 2px 6px; border-radius: 4px;
}
.tree a:hover { background: var(--accent-soft); text-decoration: none; }
.tree a.current { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.dot { flex: 0 0 auto; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 4px; vertical-align: middle; }
.dot.draft { background: #e0a100; }
.dot.unpublished { background: var(--muted); }

/* Buttons and forms */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 14px; line-height: 1.2;
  padding: 7px 12px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--bg-soft); text-decoration: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-danger { color: var(--danger); }
.btn-ghost { border-color: transparent; }
.btn-small { padding: 5px 10px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-group .btn { padding: 7px 10px; }

.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); cursor: pointer; }
.link-btn:hover { text-decoration: underline; }

input[type=text], input[type=email], input[type=password], input[type=search], input:not([type]), select, textarea {
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 7px 10px; width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.field { display: block; margin-bottom: 14px; }
.field > span:first-child { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.field-error { color: var(--danger); font-size: 13px; }
.check { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; }
.check input { width: auto; }
.stack { display: block; }
.narrow { max-width: 440px; margin-bottom: 24px; }

.toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  position: sticky; top: var(--topbar-h); z-index: 10;
  background: var(--bg); padding: 10px 0; margin: 0 0 8px;
  border-bottom: 1px solid var(--border);
}
.sticky-actions { position: sticky; bottom: 0; background: var(--bg); padding: 12px 0; border-top: 1px solid var(--border); margin-top: 16px; }

.flash { padding: 10px 14px; border-radius: var(--radius); background: var(--ok-bg); border: 1px solid var(--ok-border); margin-bottom: 16px; }
.flash-error { background: #fdecea; border-color: #f4b5ae; color: #8a1c12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .flash-error { background: #3b1f1d; border-color: #6b2f2a; color: #f5c1bb; } }
:root[data-theme="dark"] .flash-error { background: #3b1f1d; border-color: #6b2f2a; color: #f5c1bb; }
.notice { padding: 10px 14px; border-radius: var(--radius); background: var(--warn-bg); border: 1px solid var(--warn-border); margin-bottom: 16px; font-size: 14px; }

.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.crumbs .sep { margin: 0 6px; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Document */
.doc { margin-top: 8px; }
.doc-body { overflow-wrap: anywhere; }
.doc-body img { max-width: 100%; height: auto; }
.doc-body table { border-collapse: collapse; margin: 1rem 0; max-width: 100%; }
.doc-body td, .doc-body th { border: 1px solid var(--border); padding: 6px 10px; vertical-align: top; }
.doc-body pre { background: var(--bg-soft); padding: 12px; border-radius: var(--radius); overflow-x: auto; }
.doc-body blockquote { margin: 1rem 0; padding: 0.25rem 1rem; border-left: 3px solid var(--border); color: var(--muted); }
.doc-body .file-meta { color: var(--muted); font-size: 0.9em; }
/* Words that used to be a link to the old extranet: ordinary text now. */
.doc-body .unlinked, .doc-body .unlinked * { color: inherit !important; text-decoration: none !important; cursor: text; }
.doc-body a[target="_blank"]::after { content: "\2197"; font-size: 0.8em; margin-left: 2px; color: var(--muted); }
.doc-body iframe, .doc-body video { display: block; max-width: 100%; border: 0; border-radius: var(--radius); background: #000; }
.doc-body iframe.embed-video { width: 100%; max-width: 760px; height: auto; aspect-ratio: 16 / 9; }
.doc-body iframe.embed-pdf { width: 100%; height: 80vh; min-height: 480px; background: var(--bg-soft); border: 1px solid var(--border); }
.doc-body video { width: 100%; max-width: 760px; height: auto; }
.doc-body audio { width: 100%; max-width: 520px; }
.doc-meta { margin-top: 40px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.revision { margin-top: 32px; padding: 20px; border: 1px dashed var(--border); border-radius: var(--radius); }

/* Tables */
.grid { width: 100%; border-collapse: collapse; font-size: 14px; margin: 12px 0 24px; }
.grid th, .grid td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.grid th { font-weight: 600; color: var(--muted); font-size: 13px; }
.grid tr.selected td { background: var(--accent-soft); }
.grid .actions { white-space: nowrap; text-align: right; }
.grid .actions > * + * { margin-left: 12px; }

/* Search */
.results { padding-left: 20px; }
.results li { margin-bottom: 16px; }
.results p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.tag { font-size: 12px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px; padding: 0 8px; margin-left: 6px; color: var(--muted); }

/* Editor */
.edit-header { margin-bottom: 12px; }
.title-input { font-size: 1.25rem; font-weight: 600; }
.edit-form .jodit-container { margin-bottom: 14px; }

/* Child pages, related pages and tags */
.page-links { margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--border); }
.page-links h2 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 0 0 8px; }
.page-links ul { margin: 0; padding-left: 18px; }
.page-links li { margin: 3px 0; }

.tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.tag-chip {
  display: inline-flex; gap: 6px; align-items: center;
  font-size: 13px; padding: 3px 10px; border-radius: 12px;
  background: var(--bg-soft); border: 1px solid var(--border); color: var(--text);
}
.tag-chip:hover { background: var(--accent-soft); text-decoration: none; }

/* Related pages picker */
.field-label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.picker { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; background: var(--bg); }
.picker-list { list-style: none; margin: 0 0 8px; padding: 0; }
.picker-list:empty { margin: 0; }
.picker-list li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 6px; border-radius: 4px; background: var(--bg-soft); margin-bottom: 4px; }
.picker-results { list-style: none; margin: 6px 0 0; padding: 0; max-height: 220px; overflow-y: auto; border-top: 1px solid var(--border); }
.picker-results li { padding: 4px 6px; }
.picker-results li:hover { background: var(--accent-soft); }

/* Empty state */
.empty { text-align: center; padding: 60px 20px; }

/* Sign-in */
body.auth { background: var(--bg-soft); display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; }
.auth-card { width: 100%; max-width: 380px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 28px; }
.auth-card .brand { font-size: 1.3rem; margin-bottom: 18px; display: block; }

/* Phone and tablet */
@media (max-width: 860px) {
  .sidebar-resizer { display: none; }
  body.sidebar-collapsed .sidebar { display: block; }
  .sidebar {
    position: fixed; left: 0; top: var(--topbar-h); z-index: 15;
    transform: translateX(-100%); transition: transform 0.2s ease;
    box-shadow: 0 0 20px rgba(0,0,0,0.15);
  }
  body.sidebar-open .sidebar { transform: none; }
  .content { padding: 16px 16px 80px; }
  .usermenu > a:not(:last-of-type) { display: none; }
  .brand { display: none; }
}

/* Two-step sign-in */
.steps { margin: 0 0 20px; padding-left: 20px; }
.steps > li { margin-bottom: 18px; line-height: 1.5; }
.qr { margin: 12px 0; text-align: center; }
.qr img { width: 240px; height: 240px; max-width: 100%; background: #fff; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
.typed-key { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; letter-spacing: 1px; word-spacing: 6px; background: var(--code-bg, rgba(127,127,127,.12)); padding: 8px 10px; border-radius: 6px; user-select: all; }
.two-step-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 8px; }
.auth-aside { margin-top: 16px; font-size: 14px; text-align: center; }
.backup-codes { list-style: none; padding: 14px; margin: 0 0 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 18px; border: 1px solid var(--border); border-radius: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 15px; letter-spacing: 1px; }
.backup-codes li { user-select: all; }
@media print {
  .usermenu, .sidebar, .tools, .topbar form { display: none !important; }
  .backup-codes { break-inside: avoid; }
}

/* The other topics in the same section, set in columns so a long list stays compact */
.also-in ul { columns: 2; column-gap: 32px; }
.also-in li { break-inside: avoid; }
.also-in h2 a { color: inherit; }
@media (max-width: 700px) { .also-in ul { columns: 1; } }
@media print { .also-in { display: none; } }

/* The collapse-everything button turns over when there is nothing left open */
.tool.flipped svg { transform: rotate(180deg); }

/* The text editor takes its colours from the theme chosen here, not from the Mac's setting */
:root[data-theme="dark"] .jodit_theme_dark.jodit-container,
:root[data-theme="dark"] .jodit_theme_dark .jodit-workplace,
:root[data-theme="dark"] .jodit_theme_dark .jodit-wysiwyg {
  background-color: var(--bg);
  color: var(--text);
}
:root[data-theme="dark"] .jodit_theme_dark .jodit-wysiwyg a { color: var(--accent); }

/* The manual's own typeface. Segoe UI where it exists, the closest match elsewhere, since
   macOS does not ship Segoe UI. Reading and writing use the same one, so nothing shifts
   between the editor and the published page. Headings keep their own sizes. */
:root {
  --read-font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --read-size: 16px;
  --read-leading: 1.6;
}
.doc-body,
.jodit-container .jodit-workplace .jodit-wysiwyg {
  font-family: var(--read-font);
  font-size: var(--read-size);
  line-height: var(--read-leading);
}
.doc-body font { font-family: inherit; }

/* Naming a pasted link */
.name-link-back { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 16px; }
.name-link { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 20px; width: 100%; max-width: 460px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.name-link-url { margin: 0 0 14px; font-size: 13px; color: var(--muted); word-break: break-all; }
.name-link .field { margin-bottom: 10px; }
.name-link input { width: 100%; padding: 8px 10px; font-size: 15px; }
.name-link-note { margin: 0 0 16px; font-size: 13px; color: var(--muted); }
.name-link-note:empty { display: none; }
.name-link-buttons { display: flex; gap: 10px; flex-wrap: wrap; }

/* A pasted screenshot never runs wider than the column, and is never blown up past its own
   size. The writing area gets the same cap, so an image looks the same while you write it
   as it does once published. */
.jodit-container .jodit-workplace .jodit-wysiwyg img {
  max-width: 100%;
  height: auto;
}

/* The file list */
.file-filter { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 18px; }
.file-filter input[type="search"] { padding: 7px 10px; min-width: 240px; flex: 1; max-width: 360px; }
.file-filter select { padding: 7px 10px; }
.pager { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 16px; }