/* ============================================================================
   AX-WIKI — Accxia design system

   The same tokens as AX-PROJECT, so the two products read as one: petrol
   carries every action, charcoal every word, and gold appears in exactly one
   role — the marker for "you are here". Barlow Condensed sets titles,
   eyebrows and table headers; Inter sets everything read as a sentence.
   ========================================================================= */

@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/barlow-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/barlow-condensed-700.woff2') format('woff2');
}

:root {
  /* neutrals: a grey that sits under petrol without drifting blue */
  --n0:#FFFFFF; --n10:#FAFAFA; --n20:#F4F5F6; --n30:#E9EBED; --n40:#DCDFE3;
  --n50:#C3C8CE; --n70:#9BA3AC; --n200:#6B7480; --n400:#4E555E; --n500:#3F464E;
  --n800:#22272B;

  /* brand */
  --ax-petrol:#007FA1; --ax-petrol-deep:#00607A; --ax-petrol-soft:#E3F2F6;
  --ax-charcoal:#3B3F44; --ax-gold:#C7A24B; --ax-gold-soft:#F6EFDC;

  --blue:#007FA1; --blue-hover:#0093B9; --blue-light:#E3F2F6; --blue-dark:#00607A;
  --green:#1F9D6B; --green-light:#E3F5EC; --green-dark:#0E6B47;
  --yellow:#C7A24B; --yellow-light:#F8F0DA; --yellow-dark:#7A5E12;
  --red:#D6453D; --red-light:#FBEAE9; --red-dark:#A32B24;
  --purple:#6B5BC4; --purple-light:#EDEAFA; --teal:#0E8FA8;
  --danger-bg:#A32B24; --danger-bg-hover:#C13A32; --danger-fg:#FFFFFF;

  --shadow-card:0 1px 2px rgba(34,39,43,.06);
  --shadow-raised:0 2px 8px rgba(34,39,43,.10);
  --shadow-overlay:0 12px 32px -8px rgba(34,39,43,.28);

  --radius:6px;
  --radius-lg:10px;
  --radius-pill:999px;
  --topnav-h:56px;
  --sidebar-w:264px;
  --content-max:1480px;

  --font:'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display:'Barlow Condensed', 'Inter var', 'Segoe UI', sans-serif;
  --font-mono:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  color-scheme:light;
}

/* --- dark theme -------------------------------------------------------------
   The neutral ramp flips, petrol lifts so it stays legible on a dark surface,
   and gold keeps its one job as the position marker. */
:root[data-theme="dark"] {
  --n0:#191D21; --n10:#1F242A; --n20:#262C33; --n30:#333A42; --n40:#434C55;
  --n50:#5A646F; --n70:#77828E; --n200:#A0AAB4; --n400:#BAC3CB; --n500:#CED5DB;
  --n800:#EAEEF2;

  --ax-petrol:#34ADCB; --ax-petrol-deep:#7FCFE2; --ax-petrol-soft:#0E323D;
  --ax-charcoal:#EAEEF2; --ax-gold:#D9B65F; --ax-gold-soft:#3A3018;

  --blue:#34ADCB; --blue-hover:#5CC3DD; --blue-light:#0E323D; --blue-dark:#8AD5E7;
  --green:#3FBE8A; --green-light:#10301F; --green-dark:#7FDCB4;
  --yellow:#D9B65F; --yellow-light:#332913; --yellow-dark:#EBD9A2;
  --red:#EE6A62; --red-light:#3A1E1C; --red-dark:#F7A19B;
  --purple:#9B8DEA; --purple-light:#272242; --teal:#43B6CE;
  --danger-bg:#B23A32; --danger-bg-hover:#CB4C43; --danger-fg:#FFFFFF;

  --shadow-card:0 1px 2px rgba(0,0,0,.4);
  --shadow-raised:0 2px 8px rgba(0,0,0,.45);
  --shadow-overlay:0 12px 32px -8px rgba(0,0,0,.6);

  color-scheme:dark;
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }

html, body { height:100%; }
body {
  margin:0; font-family:var(--font); font-size:14px; line-height:1.5;
  color:var(--n800); background:var(--n10); -webkit-font-smoothing:antialiased;
}
button, input, select, textarea { font-family:inherit; font-size:inherit; color:inherit; }
button { cursor:pointer; }
a { color:var(--ax-petrol); text-decoration:none; }
a:hover { text-decoration:underline; }
code { font-family:var(--font-mono); font-size:.92em; }
:focus-visible { outline:2px solid var(--ax-petrol); outline-offset:2px; border-radius:3px; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:var(--n40); border-radius:5px;
  border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover { background:var(--n50); background-clip:content-box; }

/* --- top bar -------------------------------------------------------------- */
.topnav {
  position:fixed; inset:0 0 auto 0; height:var(--topnav-h); z-index:400;
  display:flex; align-items:center; gap:6px; padding:0 20px;
  background:var(--n0); border-bottom:1px solid var(--n30);
}
.topnav-spacer { flex:1; }
.brand { display:flex; align-items:center; gap:10px; margin-right:14px; color:var(--n800); }
.brand:hover { text-decoration:none; }
.brand-logo { height:26px; width:auto; display:block; flex:none; }
.brand-logo-dark { display:none; }
:root[data-theme="dark"] .brand-logo-light { display:none; }
:root[data-theme="dark"] .brand-logo-dark { display:block; }
.login-logo { height:34px; width:auto; margin:0 auto 20px; display:block; }
.login-logo.brand-logo-dark { display:none; }
:root[data-theme="dark"] .login-logo.brand-logo-light { display:none; }
:root[data-theme="dark"] .login-logo.brand-logo-dark { display:block; }
.brand-name {
  font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:.09em;
  color:var(--n500); text-transform:uppercase; padding-left:12px;
  border-left:1px solid var(--n40);
}
.nav-btn {
  background:none; border:0; padding:7px 11px; border-radius:var(--radius);
  color:var(--n400); font-weight:500;
}
.nav-btn:hover { background:var(--n20); color:var(--n800); }
.nav-btn.active { color:var(--ax-petrol); }

.quick-search { position:relative; display:flex; align-items:center; }
.quick-search .icon { position:absolute; left:11px; width:15px; height:15px;
  color:var(--n70); pointer-events:none; }
.quick-search input {
  width:230px; padding:7px 10px 7px 33px; border:1px solid var(--n40);
  border-radius:var(--radius-pill); background:var(--n20); color:var(--n800);
  transition:width .15s ease;
}
.quick-search input::placeholder { color:var(--n200); }
.quick-search input:focus {
  outline:none; border-color:var(--ax-petrol); background:var(--n0); width:320px;
  box-shadow:0 0 0 3px var(--ax-petrol-soft);
}
.search-results {
  position:absolute; top:calc(100% + 6px); left:0; width:440px; max-height:420px;
  overflow:auto; background:var(--n0); border:1px solid var(--n30);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-overlay); display:none;
}
.search-results.open { display:block; }
.search-item { display:block; padding:9px 14px; color:var(--n800); }
.search-item:hover { background:var(--n20); text-decoration:none; }
.search-item small { color:var(--n200); }

.theme-toggle {
  display:flex; align-items:center; justify-content:center; width:32px; height:32px;
  border:0; border-radius:var(--radius); background:none; color:var(--n200);
  position:relative;
}
.theme-toggle:hover { background:var(--n20); color:var(--n800); }
.theme-toggle svg { width:18px; height:18px; fill:currentColor; }
.theme-toggle .icon-moon { display:none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display:none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display:block; }

.avatar {
  border-radius:50%; color:#fff; display:grid; place-items:center; flex:none;
  width:28px; height:28px; font-family:var(--font-display); font-weight:700;
  font-size:12px; letter-spacing:.04em;
}
.avatar.sm { width:20px; height:20px; font-size:10px; }
.avatar-btn { background:none; border:0; padding:2px; border-radius:50%; }
/* the bell is crossed out until browser notifications are switched on */
.notify-slash { opacity:1; }
.theme-toggle.notify-on { color:var(--ax-petrol); }
.theme-toggle.notify-on .notify-slash { display:none; }

.badge {
  position:absolute; top:1px; right:1px; min-width:16px; height:16px;
  background:var(--red); color:#fff; border-radius:var(--radius-pill); font-size:10px;
  display:grid; place-items:center; padding:0 4px; font-weight:700;
}

/* --- layout --------------------------------------------------------------- */
.shell { display:flex; padding-top:var(--topnav-h); min-height:100vh; }
.sidebar {
  width:var(--sidebar-w); flex:none; background:var(--n10);
  border-right:1px solid var(--n30); position:sticky; top:var(--topnav-h);
  height:calc(100vh - var(--topnav-h)); overflow-y:auto; padding:12px 10px;
}
/* the grip between the two columns */
.shell-grip {
  flex:none; width:7px; margin-left:-4px; cursor:col-resize;
  position:sticky; top:var(--topnav-h); height:calc(100vh - var(--topnav-h));
  z-index:120; background:none; border:0;
}
.shell-grip::before {
  content:""; display:block; width:3px; height:100%; margin:0 auto;
  border-radius:2px; background:transparent; transition:background .12s ease;
}
.shell-grip:hover::before, .shell-grip:focus-visible::before,
body.resizing .shell-grip::before { background:var(--ax-petrol); }
.shell-grip:focus-visible { outline:none; }
/* while dragging, nothing else should take the pointer or select text */
body.resizing { cursor:col-resize; user-select:none; }
body.resizing iframe { pointer-events:none; }

.sidebar-head { display:flex; gap:11px; align-items:center; padding:4px 6px 14px; }
.space-icon {
  width:34px; height:34px; border-radius:var(--radius); color:#fff; flex:none;
  display:grid; place-items:center; font-family:var(--font-display);
  font-weight:700; font-size:13px; letter-spacing:.05em;
}
.sidebar-title { font-family:var(--font-display); font-weight:700; font-size:17px;
  line-height:1.15; color:var(--n800); }
.sidebar-sub { color:var(--n200); font-size:12px; font-family:var(--font-display);
  font-weight:600; letter-spacing:.08em; text-transform:uppercase; }

.side-heading {
  padding:16px 11px 6px; font-family:var(--font-display); font-size:12px; font-weight:700;
  color:var(--n200); text-transform:uppercase; letter-spacing:.1em;
}
.side-link {
  display:flex; align-items:center; gap:11px; padding:8px 11px; margin-bottom:1px;
  border-radius:var(--radius); color:var(--n400); font-weight:500;
  border:0; background:none; width:100%; text-align:left;
  border-left:3px solid transparent;
}
.side-link:hover { background:var(--n20); text-decoration:none; color:var(--n800); }
.side-icon { width:16px; height:16px; fill:currentColor; flex:none; }
.side-link.active {
  background:var(--ax-petrol-soft); color:var(--ax-petrol-deep); font-weight:600;
  border-left-color:var(--ax-gold);
}

.main { flex:1; min-width:0; }
/* The reading area uses what is there. 2cm of air after the divider so the
   text does not start against the sidebar, and the same at the far edge. */
.content { max-width:none; margin:0; padding:28px 2cm 90px; }
.content.wide { max-width:none; }
/* long prose still keeps a measure it can be read at */
.content .doc { max-width:92ch; }

time.ago { white-space:nowrap; }

.att-row {
  display:flex; align-items:center; gap:10px; padding:5px 0;
  border-radius:var(--radius);
}
.att-row.dragging { opacity:.45; background:var(--ax-petrol-soft); }
.tree-item.dragging { opacity:.45; background:var(--ax-petrol-soft); }
.tree-item[draggable="true"] { cursor:default; }
.att-grip {
  cursor:grab; color:var(--n70); letter-spacing:-3px; font-size:13px;
  user-select:none; flex:none;
}
.att-grip:active { cursor:grabbing; }
.att-row .hint { margin:0; }

/* the four squares between the wordmark and Spaces - set close to Spaces, so
   it reads as belonging to the navigation rather than to the logo */
.nav-grid {
  margin-left:22px; margin-right:2px; width:32px; height:32px; flex:none;
  display:grid; place-items:center; border:0; border-radius:var(--radius);
  background:none; color:var(--n200); cursor:pointer;
}
.nav-grid svg { width:17px; height:17px; }
.nav-grid:hover { background:var(--n20); color:var(--ax-petrol); }
.link-menu {
  position:absolute; z-index:900; min-width:220px; max-width:320px;
  background:var(--n0); border:1px solid var(--n40);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-overlay);
  padding:5px; max-height:70vh; overflow-y:auto;
}
.link-menu a { display:block; padding:8px 12px; color:var(--n400);
  border-radius:var(--radius); }
.link-menu a:hover { background:var(--n20); color:var(--ax-petrol);
  text-decoration:none; }

/* Jumping to a heading put it exactly under the sticky bar, so the thing you
   asked for was the one thing you could not see - and only the last entry of a
   contents list looked right, because the page could scroll no further. The
   browser is told to stop short of the bar instead. */
.doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6 {
  scroll-margin-top: calc(var(--topnav-h) + 24px);
}
.help-doc h1, .help-doc h2, .help-doc h3,
.help-doc h4, .help-doc h5, .help-doc h6 {
  scroll-margin-top: 84px;
}

/* --- mentions ------------------------------------------------------------- */
.mention {
  background:var(--ax-petrol-soft); color:var(--ax-petrol-deep);
  border-radius:var(--radius-pill); padding:1px 8px; font-weight:600;
  white-space:nowrap;
}
.mention-box {
  position:absolute; z-index:900; min-width:250px; max-width:340px;
  background:var(--n0); border:1px solid var(--n40);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-overlay);
  padding:4px; max-height:260px; overflow-y:auto;
}
.mention-hit {
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:6px 8px; border:0; background:none; border-radius:var(--radius);
  cursor:pointer; color:var(--n400);
}
.mention-hit:hover, .mention-hit.on { background:var(--ax-petrol-soft); }
.mention-hit b { display:block; color:var(--n800); font-size:14px; }
.mention-hit .hint { margin:0; font-size:12px; }

.comment-box { min-height:76px; padding:10px 12px; }
.comment-box:empty::before {
  content:attr(data-placeholder); color:var(--n70); pointer-events:none;
}

/* the colour a space carries, picked from the palette */
.swatches { display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 4px; }
.swatch {
  width:28px; height:28px; border-radius:var(--radius); border:2px solid transparent;
  cursor:pointer; padding:0; outline-offset:2px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.swatch:hover { transform:scale(1.08); }
.swatch.on {
  border-color:var(--n800);
  box-shadow:inset 0 0 0 2px var(--n0), inset 0 0 0 3px rgba(0,0,0,.15);
}

/* the small editor inside the template dialog */
.tp-editor {
  border:1px solid var(--n40); border-radius:var(--radius); padding:12px 14px;
  min-height:180px; max-height:340px; overflow-y:auto; background:var(--n0);
}
.tp-editor:focus { outline:none; border-color:var(--ax-petrol);
  box-shadow:0 0 0 3px var(--ax-petrol-soft); }

/* --- a macro on a page ---------------------------------------------------- */
.macro-box {
  border:1px solid var(--n30); border-radius:var(--radius-lg);
  background:var(--n0); margin:20px 0; overflow:hidden;
}
.macro-head {
  display:flex; align-items:center; gap:10px; padding:11px 14px;
  background:var(--n10); border-bottom:1px solid var(--n30);
}
.macro-head b { font-family:var(--font-display); color:var(--n800); }
.macro-head .hint { margin:0; }
.macro-refresh {
  width:28px; height:28px; border:0; background:none; border-radius:var(--radius);
  color:var(--n200); cursor:pointer; display:grid; place-items:center; flex:none;
}
.macro-refresh svg { width:16px; height:16px; }
.macro-refresh:hover { background:var(--n30); color:var(--ax-petrol); }
.macro-refresh.spin svg { animation:macro-spin .8s linear infinite; }
@keyframes macro-spin { to { transform:rotate(360deg); } }
.macro-body { padding:12px 14px 14px; }
.macro-table { margin:0; font-size:13.5px; }
.index-box { max-width:88ch; }
.index-list { list-style:none; margin:0; padding:0; }
.index-list ul { list-style:none; margin:2px 0 2px 18px; padding:0;
  border-left:2px solid var(--n30); padding-left:12px; }
.index-list li { padding:3px 0; }
.index-list a { color:var(--ax-petrol); cursor:pointer; }
.index-toc .lvl-3 { padding-left:16px; }
.index-toc .lvl-4 { padding-left:32px; }
.macro-foot { margin:10px 0 0; }
/* what the editor shows for a macro that has not run: a block with its own
   handles, because a caret cannot be put inside one */
#editorBody .macro {
  display:flex; align-items:center; gap:10px;
  border:1px dashed var(--ax-petrol); border-radius:var(--radius);
  background:var(--ax-petrol-soft); padding:9px 12px; margin:14px 0;
  color:var(--ax-petrol-deep);
}
#editorBody .macro p { margin:0; }
#editorBody .macro .macro-name {
  font-family:var(--font-display); font-weight:700; font-size:13.5px;
}

.page-row-tick {
  width:10px; height:1px; background:var(--n40); flex:none; margin-right:2px;
}

/* --- dashboard ------------------------------------------------------------ */
.dash-grid {
  display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(300px, .85fr);
  gap:18px; align-items:start;
}
.dash-col { display:flex; flex-direction:column; gap:18px; }
.dash-col .panel-card, .dash-grid > .panel-card { margin:0; }
@media (max-width: 1120px) { .dash-grid { grid-template-columns:1fr; } }

.history-row {
  display:flex; gap:11px; padding:10px 0; border-bottom:1px solid var(--n30);
  font-size:13px;
}
.history-row:last-child { border-bottom:0; }
.history-row .when { color:var(--n200); font-size:12px; margin-top:2px; }
.history-row .hint { display:inline; margin:0; }
.grow { flex:1; min-width:0; }

.page-row {
  display:flex; align-items:center; gap:10px; padding:7px 0;
  border-bottom:1px solid var(--n30);
}
.page-row:last-child { border-bottom:0; }
.page-row .grow { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.page-row .hint { margin:0; white-space:nowrap; }

/* --- page tree ------------------------------------------------------------ */
.tree { padding:2px 0 24px; }
.tree-item { display:flex; align-items:center; border-radius:var(--radius);
  border-left:3px solid transparent; }
.tree-toggle {
  width:20px; height:26px; border:0; background:none; color:var(--n70);
  display:grid; place-items:center; flex:none; padding:0;
}
/* A page with no children keeps the space so the labels stay aligned. Named
   "leaf" rather than "empty": .empty is the standalone component further down
   and would otherwise land its 44px padding on this button. */
.tree-toggle.leaf { visibility:hidden; }
/* wrap rather than clip: a title nobody can read in full is worse than one
   taking a second line, and the column can now be widened anyway */
.tree-link {
  flex:1; min-width:0; padding:5px 8px 5px 0; color:var(--n400);
  overflow-wrap:anywhere; line-height:1.35;
}
.tree-item { align-items:flex-start; }
.tree-toggle { margin-top:2px; }
.tree-item:hover { background:var(--n20); }
.tree-item:hover .tree-link { color:var(--n800); text-decoration:none; }
.tree-item.active { background:var(--ax-petrol-soft); border-left-color:var(--ax-gold); }
.tree-item.active .tree-link { color:var(--ax-petrol-deep); font-weight:600; }
.space-branch .tree-item { padding-left:2px; }
.space-branch .tree-link { padding-left:2px; }
.space-branch .space-icon { margin-right:8px; }
.sidebar /* the plus only appears on the row under the pointer, so the tree stays calm */
.tree-add {
  width:20px; height:22px; flex:none; border:0; background:none; padding:0;
  color:var(--n70); font-size:16px; line-height:1; border-radius:4px;
  visibility:hidden; margin-right:4px;
}
.tree-item:hover .tree-add, .tree-add:focus-visible { visibility:visible; }
.tree-add:hover { background:var(--n30); color:var(--ax-petrol); }

.tree-children { display:none; }
/* the plus only appears on the row under the pointer, so the tree stays calm */
.tree-add {
  width:20px; height:22px; flex:none; border:0; background:none; padding:0;
  color:var(--n70); font-size:16px; line-height:1; border-radius:4px;
  visibility:hidden; margin-right:4px;
}
.tree-item:hover .tree-add, .tree-add:focus-visible { visibility:visible; }
.tree-add:hover { background:var(--n30); color:var(--ax-petrol); }

.tree-children { display:none; }
.tree-children.open { display:block; }

/* --- buttons -------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:7px 14px; border:1px solid var(--n40); border-radius:var(--radius);
  background:var(--n0); color:var(--n500); font-weight:500;
  white-space:nowrap; transition:background .12s ease, border-color .12s ease;
}
.btn:hover { background:var(--n20); border-color:var(--n50); text-decoration:none; }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn:disabled:hover { background:var(--n0); border-color:var(--n40); }
.btn-primary { background:var(--ax-petrol); border-color:var(--ax-petrol); color:#fff; }
.btn-primary:hover { background:var(--blue-hover); border-color:var(--blue-hover); }
.btn-primary:disabled:hover { background:var(--ax-petrol); border-color:var(--ax-petrol); }
.btn-subtle { color:var(--n400); }
.btn-subtle:hover { background:var(--n20); border-color:var(--n50); color:var(--n800); }
.btn-icon { background:transparent; border-color:transparent; padding:3px 6px; }
.btn-icon:hover { background:var(--n20); border-color:transparent; }
.btn-danger { background:var(--danger-bg); border-color:var(--danger-bg); color:var(--danger-fg); }
.btn-danger:hover { background:var(--danger-bg-hover); border-color:var(--danger-bg-hover); }
.btn-sm { padding:3px 9px; font-size:12px; }

/* --- forms ---------------------------------------------------------------- */
.field { margin-bottom:18px; }
.field > label {
  display:block; font-family:var(--font-display); font-size:13px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:var(--n400); margin-bottom:6px;
}
/* a label wrapping its own checkbox is a sentence, not an eyebrow */
.field > label:has(input) {
  font-family:var(--font); font-size:14px; font-weight:400; letter-spacing:0;
  text-transform:none; color:var(--n800); display:flex; align-items:center; gap:8px;
}
.field > label.plain {
  font-family:var(--font); font-size:14px; font-weight:400; letter-spacing:0;
  text-transform:none; color:var(--n800);
}
.input, select.input, textarea.input {
  width:100%; padding:8px 11px; min-height:38px;
  border:1px solid var(--n40); border-radius:var(--radius);
  background:var(--n0); color:var(--n800);
}
.input::placeholder { color:var(--n200); }
.input:hover { border-color:var(--n50); }
.input:focus {
  outline:none; border-color:var(--ax-petrol); box-shadow:0 0 0 3px var(--ax-petrol-soft);
}
select.input { cursor:pointer; }
textarea.input { min-height:104px; resize:vertical; line-height:1.55; }
input[type="color"].input { padding:3px; min-height:38px; cursor:pointer; }
input[type="checkbox"], input[type="radio"] { accent-color:var(--ax-petrol); }
.hint { font-size:12.5px; color:var(--n200); margin-top:6px; line-height:1.5; }

/* --- status vocabulary ---------------------------------------------------- */
.lozenge {
  display:inline-block; padding:2px 9px; border-radius:var(--radius-pill);
  font-family:var(--font-display); font-size:12px; font-weight:600;
  text-transform:uppercase; letter-spacing:.07em; line-height:17px;
  background:var(--n30); color:var(--n500); white-space:nowrap;
}
.lozenge.info { background:var(--blue-light); color:var(--blue-dark); }
.lozenge.done { background:var(--green-light); color:var(--green-dark); }
.lozenge.warn { background:var(--yellow-light); color:var(--yellow-dark); }
.lozenge.danger { background:var(--red-light); color:var(--red-dark); }
.progress {
  height:8px; background:var(--n30); border-radius:var(--radius-pill);
  overflow:hidden;
}
.progress > span {
  display:block; height:100%; background:var(--ax-petrol);
  transition:width .3s ease;
}
.people-row { display:flex; align-items:center; gap:9px; }

.tag {
  display:inline-flex; align-items:center; gap:5px; padding:2px 9px;
  border-radius:var(--radius-pill); background:var(--n20); border:1px solid var(--n30);
  color:var(--n400); font-size:12px; margin:0 4px 4px 0;
}

.notice {
  padding:11px 14px; border-radius:var(--radius); margin-bottom:16px; font-size:13px;
  background:var(--blue-light); color:var(--blue-dark);
  border:1px solid color-mix(in srgb, var(--ax-petrol) 35%, transparent);
}
.notice.error { background:var(--red-light); color:var(--red-dark);
  border-color:color-mix(in srgb, var(--red) 35%, transparent); }
.notice.success { background:var(--green-light); color:var(--green-dark);
  border-color:color-mix(in srgb, var(--green) 35%, transparent); }

.empty {
  padding:44px 24px; text-align:center; color:var(--n200); background:var(--n0);
  border-radius:var(--radius-lg); border:1px dashed var(--n40);
}
.empty h3 { display:block; color:var(--n500); margin:0 0 6px; font-size:15px;
  font-family:var(--font-display); font-weight:600; }

/* --- panels and tables ---------------------------------------------------- */
.panel-card {
  border:1px solid var(--n30); border-radius:var(--radius-lg); padding:20px;
  background:var(--n0); margin-bottom:18px;
}
.settings-tile { display:block; color:inherit; transition:border-color .12s ease; }
a.settings-tile:hover { text-decoration:none; border-color:var(--ax-petrol);
  box-shadow:var(--shadow-raised); }
a.settings-tile h3 { color:var(--ax-petrol-deep); }
.settings-tile h3 .side-icon, .tile-grid h3 .side-icon { width:18px; height:18px; }
.tile-grid .panel-card { display:flex; flex-direction:column; }
.tile-grid .hint { margin-top:0; }
.panel-card h3 {
  margin:0 0 14px; font-family:var(--font-display); font-size:17px; font-weight:700;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
/* three panels side by side where there is room, stacked where there is not */
.report-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));
  gap:18px; align-items:start;
}
.report-grid > .panel-card { margin:0; }
.stat-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr));
  gap:14px; margin-bottom:22px;
}
.stat {
  border:1px solid var(--n30); border-radius:var(--radius-lg); padding:14px 16px;
  background:var(--n0);
}
.stat b {
  display:block; font-family:var(--font-display); font-size:30px; font-weight:700;
  line-height:1.05; color:var(--ax-petrol-deep);
}
.stat span {
  color:var(--n200); font-size:12px; font-family:var(--font-display);
  font-weight:600; letter-spacing:.07em; text-transform:uppercase;
}
.row { display:flex; gap:14px; }
.row > * { flex:1; min-width:0; }

.tile-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(258px, 1fr));
  gap:18px; }
.tile-grid > * { margin:0; }

.table { width:100%; border-collapse:collapse; font-size:14px; background:var(--n0); }
.table th {
  text-align:left; font-family:var(--font-display); font-size:12px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--n200);
  padding:10px 12px; border-bottom:1px solid var(--n30); white-space:nowrap;
}
.table td { padding:10px 12px; border-bottom:1px solid var(--n30); vertical-align:middle;
  color:var(--n500); }
.table tbody tr:last-child td { border-bottom:0; }
.table tbody tr:hover td { background:var(--n10); }
.table-wrap { border:1px solid var(--n30); border-radius:var(--radius-lg);
  overflow:auto; background:var(--n0); margin-bottom:18px; }

/* --- page furniture ------------------------------------------------------- */
.breadcrumb {
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  color:var(--n200); font-size:12.5px; margin-bottom:10px;
}
.breadcrumb a { color:var(--n200); }
.breadcrumb a:hover { color:var(--ax-petrol); }
.page-title {
  font-family:var(--font-display); font-size:34px; font-weight:700; margin:0 0 6px;
  letter-spacing:.005em; line-height:1.15; color:var(--n800);
}
.page-meta { color:var(--n200); font-size:12.5px; margin-bottom:24px;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.page-actions { display:flex; gap:7px; margin-left:auto; }
.section-title { font-family:var(--font-display); font-size:20px; font-weight:700;
  margin:0 0 4px; color:var(--n800); }
.sub { color:var(--n200); margin-bottom:24px; }

/* --- rendered page content ------------------------------------------------ */
.doc { font-size:15.5px; line-height:1.72; color:var(--n500); }
.doc h1, .doc h2, .doc h3, .doc h4, .doc h5, .doc h6 {
  font-family:var(--font-display); font-weight:700; color:var(--n800);
  letter-spacing:.005em;
}
.doc h1 { font-size:27px; margin:34px 0 10px; }
.doc h2 { font-size:23px; margin:30px 0 10px; }
.doc h3 { font-size:19px; margin:26px 0 8px; }
.doc h4, .doc h5, .doc h6 { font-size:16px; margin:22px 0 8px; }
.doc p { margin:0 0 13px; }
.doc ul, .doc ol { margin:0 0 13px; padding-left:26px; }
.doc blockquote {
  margin:0 0 13px; padding:10px 18px; border-left:3px solid var(--ax-gold);
  background:var(--n10); border-radius:0 var(--radius) var(--radius) 0; color:var(--n400);
}
.doc pre {
  background:var(--n10); border:1px solid var(--n30); border-radius:var(--radius);
  padding:14px; overflow:auto; font-family:var(--font-mono); font-size:13px;
  color:var(--n800);
}
.doc code { background:var(--n20); padding:1px 5px; border-radius:4px; color:var(--n800); }
.doc pre code { background:none; padding:0; }
/* A table should read as a table: a header that looks like one, lines all the
   way round, and rows that alternate so the eye keeps its place across a wide
   one. */
.doc table {
  border-collapse:collapse; width:100%; margin:4px 0 20px;
  border:1px solid var(--n40); border-radius:var(--radius);
  overflow:hidden; font-size:14.5px;
}
.doc th, .doc td {
  border:1px solid var(--n40); padding:9px 12px; vertical-align:top;
}
.doc th {
  background:var(--n20); text-align:left; font-family:var(--font-display);
  font-weight:700; color:var(--n800); border-bottom:2px solid var(--n40);
}
.doc tbody tr:nth-child(even) td { background:var(--n10); }
.doc tbody tr:hover td { background:var(--ax-petrol-soft); }

/* a picture in the editor: grabbed by its own edge, no separate handle */
#editorBody { position:relative; }
#editorBody img.picked {
  outline:2px solid var(--ax-petrol); outline-offset:2px;
}
#editorBody img:hover { outline:1px dashed var(--n50); outline-offset:2px; }

/* pages that can be linked to, offered while typing */
.link-hits { margin-top:8px; max-height:220px; overflow-y:auto; }
.link-hit {
  display:block; width:100%; text-align:left; padding:7px 10px;
  border:1px solid transparent; border-radius:var(--radius);
  background:none; color:var(--n400); cursor:pointer;
}
.link-hit:hover { background:var(--n20); }
.link-hit.on { border-color:var(--ax-petrol); background:var(--ax-petrol-soft); }
.link-hit b { display:block; color:var(--n800); font-size:14px; }
.link-hit span { font-size:12px; color:var(--n200); }

/* The grabbers on a table, in the editor only.
   They used to be 7px wide, sitting half outside the cell with nothing to see
   until the pointer was already on them - so they were there but nobody could
   find them. They are wider now, and a faint line shows on the whole table as
   soon as the pointer is anywhere over it. */
#editorBody .col-grab {
  position:absolute; top:0; right:-6px; width:12px; height:100%;
  cursor:col-resize; user-select:none; z-index:5;
}
#editorBody .col-grab::before {
  content:""; display:block; width:2px; height:100%; margin:0 auto;
  background:transparent; transition:background .12s ease;
}
#editorBody table:hover .col-grab::before { background:var(--n50); }
#editorBody .col-grab:hover::before,
body.resizing #editorBody .col-grab::before { background:var(--ax-petrol); }

#editorBody .table-grab {
  position:absolute; top:0; right:-7px; width:13px; height:100%;
  cursor:ew-resize; user-select:none; z-index:5;
}
#editorBody .table-grab::before {
  content:""; display:block; width:3px; height:100%; margin:0 auto;
  border-radius:2px; background:transparent; transition:background .12s ease;
}
#editorBody table:hover .table-grab::before { background:var(--n50); }
#editorBody .table-grab:hover::before,
body.resizing #editorBody .table-grab::before { background:var(--ax-petrol); }
/* room at the right edge so the table grip is never off the page - and no
   clipping, or the grip sitting just outside the table is cut away along with
   its click area, which is why it did nothing at all */
#editorBody table { margin-right:16px; overflow:visible; }
/* once a width has been set, the browser must keep to it */
.doc table.sized { table-layout:fixed; }
.doc table.sized td, .doc table.sized th { overflow-wrap:anywhere; }

/* the text colour panel */
.tb-swatch {
  display:inline-block; width:13px; height:13px; border-radius:3px;
  background:linear-gradient(135deg, #D6453D 0 34%, #B98900 34% 67%, #007FA1 67%);
}
.colour-menu {
  position:absolute; z-index:900; background:var(--n0);
  border:1px solid var(--n40); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-overlay); padding:5px; min-width:170px;
}
.colour-pick {
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:6px 10px; border:0; background:none; border-radius:var(--radius);
  cursor:pointer; color:var(--n400); font-size:14px;
}
.colour-pick:hover { background:var(--n20); }
.colour-pick .dot {
  width:14px; height:14px; border-radius:50%; flex:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);
}
.colour-pick .dot.none {
  background:linear-gradient(135deg, transparent 45%, var(--n50) 45% 55%,
    transparent 55%); border:1px solid var(--n50);
}

/* the grid that opens under the table button */
.tbl-grid {
  position:absolute; z-index:900; background:var(--n0);
  border:1px solid var(--n40); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-overlay); padding:10px;
}
.tbl-cells {
  display:grid; grid-template-columns:repeat(10, 18px); gap:3px;
}
.tbl-cells span {
  width:18px; height:18px; border:1px solid var(--n40); border-radius:2px;
  background:var(--n0); cursor:pointer;
}
.tbl-cells span.on { background:var(--ax-petrol); border-color:var(--ax-petrol); }
.tbl-label {
  margin-top:9px; text-align:center; color:var(--n200); font-size:12px;
  font-family:var(--font-display); font-weight:600; letter-spacing:.04em;
}
.doc img { max-width:100%; height:auto; border-radius:var(--radius); }
.doc hr { border:0; border-top:1px solid var(--n30); margin:26px 0; }
/* --- attachments inside the text ------------------------------------------ */
.doc-figure { margin:18px 0; }
.doc-figure img { display:block; max-width:100%; height:auto;
  border:1px solid var(--n30); border-radius:var(--radius); }
.doc-figure figcaption { margin-top:7px; font-size:12.5px; color:var(--n200); }
.attachment-link {
  display:inline-flex; align-items:center; gap:7px; padding:4px 11px 4px 9px;
  border:1px solid var(--n30); border-radius:var(--radius-pill);
  background:var(--n10); color:var(--ax-petrol); font-size:13.5px; line-height:20px;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.attachment-link::before {
  content:""; width:14px; height:14px; flex:none; background:currentColor;
  -webkit-mask:var(--clip-mask) center/contain no-repeat;
  mask:var(--clip-mask) center/contain no-repeat;
}
.attachment-link:hover { background:var(--ax-petrol-soft); border-color:var(--ax-petrol);
  text-decoration:none; }
:root {
  --clip-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M21 12.4l-8.7 8.7a5 5 0 01-7.1-7.1l9-9a3.3 3.3 0 114.7 4.7l-9 9a1.7 1.7 0 11-2.4-2.4l8.3-8.3'/%3E%3C/svg%3E");
}

/* the whole text area answers a dragged file, not just a strip of it */
#editorBody.dropping {
  outline:2px dashed var(--ax-petrol); outline-offset:6px;
  background:var(--ax-petrol-soft); border-radius:var(--radius);
}

.mention {
  background:var(--ax-petrol-soft); color:var(--ax-petrol-deep);
  padding:0 5px; border-radius:4px; font-weight:500;
}

/* --- table of contents ---------------------------------------------------- */
.with-toc { display:flex; gap:36px; align-items:flex-start; }
.toc {
  width:208px; flex:none; position:sticky; top:calc(var(--topnav-h) + 28px);
  font-size:13px; border-left:2px solid var(--n30); padding-left:14px;
}
.toc-link { cursor:pointer; }
.toc a { display:block; padding:4px 0; color:var(--n200); }
.toc a:hover { color:var(--ax-petrol); text-decoration:none; }
.toc .lvl-3 { padding-left:12px; }
.toc .lvl-4, .toc .lvl-5, .toc .lvl-6 { padding-left:24px; }

/* --- editor --------------------------------------------------------------- */
.editor-toolbar {
  position:sticky; top:var(--topnav-h); z-index:200; background:var(--n0);
  border-bottom:1px solid var(--n30); padding:7px 0; margin-bottom:18px;
  display:flex; gap:2px; flex-wrap:wrap; align-items:center;
}
.tb-btn {
  width:30px; height:30px; border:0; background:none; border-radius:var(--radius);
  display:grid; place-items:center; color:var(--n400);
}
.tb-btn:hover { background:var(--n20); color:var(--n800); }
.tb-sep { width:1px; height:20px; background:var(--n30); margin:0 7px; }
.title-input {
  width:100%; font-family:var(--font-display); font-size:34px; font-weight:700;
  border:0; outline:none; padding:0; margin-bottom:14px; background:transparent;
  color:var(--n800); line-height:1.15;
}
.title-input::placeholder { color:var(--n50); }
#editorBody { min-height:420px; outline:none; padding-bottom:40px; }
.editor-footer {
  position:fixed; bottom:0; left:var(--sidebar-w); right:0; background:var(--n0);
  border-top:1px solid var(--n30); padding:12px 40px; display:flex;
  gap:10px; align-items:center; z-index:200;
}

/* --- comments ------------------------------------------------------------- */
.comments { margin-top:44px; border-top:1px solid var(--n30); padding-top:26px; }
.comment { display:flex; gap:13px; padding:14px 0; border-bottom:1px solid var(--n30); }
.comment-body { flex:1; min-width:0; }
.comment-meta { font-size:12.5px; color:var(--n200); margin-bottom:5px; }

/* --- modal ---------------------------------------------------------------- */
.modal-root {
  position:fixed; inset:0; background:rgba(34,39,43,.5); z-index:700;
  display:flex; align-items:flex-start; justify-content:center; padding:64px 16px;
  overflow:auto;
}
:root[data-theme="dark"] .modal-root { background:rgba(0,0,0,.62); }
.modal {
  background:var(--n0); border-radius:var(--radius-lg); box-shadow:var(--shadow-overlay);
  width:min(620px, 100%); display:flex; flex-direction:column;
  max-width:100%; max-height:86vh;
}
.modal.wide { width:min(900px, 100%); }
.modal-head {
  padding:20px 26px 16px; font-family:var(--font-display); font-size:22px; font-weight:700;
  border-bottom:1px solid var(--n30); color:var(--n800);
}
.modal-body { padding:22px 26px 6px; overflow:auto; min-height:0; flex:1; }
.modal-foot {
  padding:16px 26px 20px; display:flex; justify-content:flex-end; gap:10px;
  border-top:1px solid var(--n30); background:var(--n10);
}

/* --- system settings ------------------------------------------------------ */
.settings { display:flex; width:100%; }
.settings-nav {
  width:var(--sidebar-w); flex:none; background:var(--n10);
  border-right:1px solid var(--n30); min-height:calc(100vh - var(--topnav-h));
  padding:16px 10px;
}
.settings-nav h2 {
  font-family:var(--font-display); font-size:17px; font-weight:700;
  margin:0 11px 12px; color:var(--n800);
}
.settings-body { flex:1; min-width:0; padding:28px 40px 70px; max-width:var(--content-max); }
.settings-body h1 {
  font-family:var(--font-display); font-size:30px; font-weight:700; margin:0 0 4px;
  color:var(--n800); letter-spacing:.005em;
}

/* --- permissions ----------------------------------------------------------
   The old layout put the permission names in column headings rotated 60
   degrees, and past the second row nobody could tell which tick belonged to
   which heading. Each subject now gets its own block with the name written
   next to every checkbox. */
.perm-subject {
  border:1px solid var(--n30); border-radius:var(--radius-lg); background:var(--n0);
  margin-bottom:14px; overflow:hidden;
}
.perm-head {
  display:flex; align-items:center; gap:11px; padding:13px 16px;
  background:var(--n10); border-bottom:1px solid var(--n30);
}
.perm-head .grow { min-width:0; }
.perm-head b { display:block; }
.perm-head .hint { margin:0; }
.perm-body {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(232px, 1fr));
  gap:2px 18px; padding:14px 16px;
}
.perm-check {
  display:flex; align-items:center; gap:9px; padding:5px 6px; border-radius:var(--radius);
  font-size:13.5px; color:var(--n500); cursor:pointer;
}
.perm-check:hover { background:var(--n20); color:var(--n800); }
.perm-check input { flex:none; }
.perm-check.granted { color:var(--ax-petrol-deep); font-weight:500; }
.perm-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  margin-top:16px; }

/* --- public help site ------------------------------------------------------
   Its own chrome on purpose: nothing here links back into the wiki, so it does
   not borrow the application's shell either. The wiki is a workbench and looks
   like one; this is something a customer reads, so it is given air, a wider
   measure, and one accent - the gold rule that marks where you are. */
.help-body { background:var(--n0); }

.help-top {
  position:sticky; top:0; z-index:400; height:60px;
  display:flex; align-items:center; gap:12px; padding:0 32px;
  background:var(--n0); border-bottom:1px solid var(--n30);
}
.help-top .brand-name {
  font-size:15px; letter-spacing:.14em; color:var(--ax-charcoal);
}
.help-search input { width:260px; }
.help-search input:focus { width:340px; }

/* --- the band at the top of the front page -------------------------------- */
.help-hero {
  background:
    radial-gradient(ellipse at 15% -30%,
      color-mix(in srgb, var(--ax-petrol) 22%, transparent), transparent 62%),
    linear-gradient(160deg, var(--n10), var(--n0) 70%);
  border-bottom:1px solid var(--n30);
}
/* The front page keeps the proportions it had - a band and an index centred on
   the page, not a row of thin columns pushed against the left edge. The page
   views use the full width; that is where the room was wanted. */
.help-hero-inner { padding:62px 32px 56px; }
.help-hero h1 {
  margin:0; font-family:var(--font-display); font-size:52px; font-weight:700;
  line-height:1.02; letter-spacing:-.005em; color:var(--n800);
}
.help-hero h1::after {
  content:""; display:block; width:60px; height:4px; margin-top:18px;
  background:var(--ax-gold); border-radius:2px;
}
.help-hero p {
  margin:18px 0 0; max-width:56ch; font-size:17px; line-height:1.6;
  color:var(--n400);
}
.help-hero-search {
  display:flex; gap:10px; margin-top:30px; max-width:620px; position:relative;
}
.help-hero-search svg {
  position:absolute; left:15px; top:14px; width:18px; height:18px;
  color:var(--n70); pointer-events:none;
}
.help-hero-search input {
  flex:1; min-width:0; padding:12px 16px 12px 44px; font-size:15px;
  border:1px solid var(--n40); border-radius:var(--radius-pill);
  background:var(--n0); color:var(--n800);
}
.help-hero-search input:focus {
  outline:none; border-color:var(--ax-petrol);
  box-shadow:0 0 0 4px var(--ax-petrol-soft);
}
.help-hero-search .btn { border-radius:var(--radius-pill); padding:0 22px; }

/* --- shell ---------------------------------------------------------------- */
.help-shell {
  display:flex; gap:44px; margin:0; padding:0 32px; align-items:flex-start;
}
/* The sidebar takes the width its titles need instead of a fixed one that cut
   half of them off. Bounded at both ends: narrow enough to leave the text its
   room, wide enough that a long page title still fits on a line or two. */
.help-nav {
  flex:0 0 auto; width:max-content; min-width:250px; max-width:24rem;
  padding:38px 0 70px; position:sticky; top:60px;
  max-height:calc(100vh - 60px); overflow-y:auto;
}
.help-navhead, .help-eyebrow {
  margin:0 0 12px; color:var(--n200); font-family:var(--font-display);
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
}
.help-link {
  display:flex; align-items:flex-start; gap:7px; padding:7px 10px; margin-bottom:1px;
  border-radius:var(--radius); color:var(--n400); font-size:14.5px;
  border-left:3px solid transparent; cursor:pointer; line-height:1.35;
}
/* wraps rather than being clipped: a title nobody can read in full is worse
   than one taking a second line */
.help-link a { color:inherit; flex:1; min-width:0; overflow-wrap:anywhere; }
.help-chev { margin-top:3px; }
.help-link a:hover { text-decoration:none; }
.help-link:hover { background:var(--n20); color:var(--n800); }
.help-link.active {
  background:var(--ax-petrol-soft); color:var(--ax-petrol-deep); font-weight:600;
  border-left-color:var(--ax-gold);
}
.help-leaf { display:block; }

/* a branch opens and closes without a line of script */
.help-branch > summary { list-style:none; }
.help-branch > summary::-webkit-details-marker { display:none; }
.help-chev {
  width:11px; height:11px; flex:none; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(-45deg) translate(-1px,-1px);
  opacity:.55; transition:transform .12s ease;
}
.help-branch[open] > summary .help-chev {
  transform:rotate(45deg) translate(-2px,-2px);
}

.help-main { flex:1; min-width:0; padding:38px 0 90px; }
/* the prose keeps a readable measure even on a very wide screen - the page
   uses the width, the sentences do not run the whole of it */
.help-doc { max-width:88ch; }
/* On a wide screen the page uses the room: the text keeps its measure and the
   contents list moves out to the right rather than leaving one empty half. */
.help-main .with-toc { justify-content:space-between; max-width:1500px; gap:48px; }
.help-main .toc { width:230px; }

/* --- the front page index ------------------------------------------------- */
/* auto-fit, not auto-fill: with a single section - which is what a guide with
   one root page has - an unfilled track would leave it in one narrow column
   with the rest of the screen empty. auto-fit lets it take the whole width,
   and the list inside it flows into columns of its own. */
.help-sections {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:34px 48px; align-items:start;
}
.help-section { min-width:0; }
.help-section h2 {
  margin:0 0 12px; padding-bottom:9px; font-family:var(--font-display);
  font-size:21px; font-weight:700; border-bottom:2px solid var(--n30);
  position:relative;
}
.help-section h2::after {
  content:""; position:absolute; left:0; bottom:-2px; width:38px; height:2px;
  background:var(--ax-gold);
}
.help-section h2 a { color:var(--n800); font-weight:800; }
/* white on the dark theme, so the heading is plainly a heading and not one
   more entry in the list below it */
:root[data-theme="dark"] .help-section h2 a { color:#fff; }
.help-section h2 a:hover { color:var(--ax-petrol); text-decoration:none; }
/* the entries flow into as many columns as the width allows, so a long list
   reads across and down rather than as one endless line of single items */
.help-index {
  columns:270px; column-gap:48px;
}
.help-index > li { break-inside:avoid; -webkit-column-break-inside:avoid; }
.help-index, .help-index ul { list-style:none; margin:0; padding:0; }
.help-index li { margin:0 0 2px; }
.help-index > li > a {
  display:block; padding:5px 0; color:var(--n400); font-size:14.5px;
}
/* every entry at this level is an app or a main page, so every one is set as
   one - the same gold rule as the section above, at a smaller size. Whether it
   happens to carry sub-pages is not what makes it a heading. */
.help-index > li > a {
  position:relative; margin-top:10px; padding-bottom:8px;
  font-family:var(--font-display); font-weight:700; font-size:15.5px;
  color:var(--n800);
}
:root[data-theme="dark"] .help-index > li > a { color:#fff; }
.help-index > li > a::after {
  content:""; position:absolute; left:0; bottom:0; width:34px; height:2px;
  background:var(--ax-gold);
}
.help-index > li > a:hover { color:var(--ax-petrol); }
.help-index > li > ul { margin-top:8px; }
.help-index a:hover { color:var(--ax-petrol); text-decoration:none; }
.help-index ul {
  margin:0 0 6px 14px; padding-left:12px; border-left:1px solid var(--n30);
}
.help-index ul a { display:block; padding:3px 0; color:var(--n200); font-size:13.5px; }

/* --- a page --------------------------------------------------------------- */
.help-title {
  font-family:var(--font-display); font-size:40px; font-weight:700; margin:6px 0 26px;
  line-height:1.1; color:var(--n800);
}
.help-doc { font-size:16px; line-height:1.78; }
.help-doc > h2 {
  padding-top:6px; margin-top:38px; border-top:1px solid var(--n30);
}
.help-doc > h2:first-child { border-top:0; margin-top:0; padding-top:0; }
.help-toc { border-left-color:var(--n30); }

/* an index built into a published page */
.help-index-box {
  margin:26px 0; border:1px solid var(--n30); border-radius:var(--radius-lg);
  background:var(--n10); padding:16px 20px 18px; max-width:88ch;
}
.help-index-box h2 {
  margin:0 0 10px; font-family:var(--font-display); font-size:17px; font-weight:700;
  color:var(--n800); position:relative; padding-bottom:8px;
}
.help-index-box h2::after {
  content:""; position:absolute; left:0; bottom:0; width:34px; height:2px;
  background:var(--ax-gold);
}
.help-index-box ul { list-style:none; margin:0; padding:0; }
.help-index-box ul ul {
  margin:2px 0 2px 4px; padding-left:12px; border-left:2px solid var(--n30);
}
.help-index-box li { padding:3px 0; }
.help-index-box .lvl-3 { padding-left:16px; }
.help-index-box .lvl-4 { padding-left:32px; }

.help-result {
  display:block; padding:16px 18px; margin-bottom:10px; background:var(--n0);
  border:1px solid var(--n30); border-left:3px solid transparent;
  border-radius:var(--radius-lg); color:var(--n400);
}
.help-result:hover {
  text-decoration:none; border-left-color:var(--ax-gold);
  box-shadow:var(--shadow-card); background:var(--n10);
}
.help-result b { display:block; color:var(--n800); font-size:16px;
  font-family:var(--font-display); font-weight:700; margin-bottom:4px; }
.help-result span { font-size:14px; }

/* --- foot ----------------------------------------------------------------- */
.help-foot { border-top:1px solid var(--n30); background:var(--n10); }
.help-foot-inner {
  padding:30px 32px 40px;
  display:flex; align-items:flex-start; gap:22px;
  color:var(--n200); font-size:13px;
}
.help-foot-inner .brand-logo { height:22px; opacity:.75; }
.help-foot p { margin:0 0 4px; }
.help-foot-fine { color:var(--n70); }

@media (max-width: 940px) {
  .help-nav { display:none; }
  .help-shell { padding:0 18px; }
  .help-hero-inner { padding:40px 18px 36px; }
  .help-main { padding:24px 0 60px; }
  .help-hero-inner { padding:40px 18px 36px; }
  .help-hero h1 { font-size:36px; }
  .help-search { display:none; }
  .help-sections { grid-template-columns:1fr; gap:26px; }
}

/* --- sign-in -------------------------------------------------------------- */
.login-body {
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--n10);
  background-image:radial-gradient(circle at 50% 0%,
    color-mix(in srgb, var(--ax-petrol) 10%, transparent), transparent 60%);
}
.login-card {
  width:100%; max-width:410px; background:var(--n0); border:1px solid var(--n30);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-overlay);
  padding:36px 34px 26px; text-align:center; position:relative;
}
.login-logo { height:32px; width:auto; margin:0 auto 22px; display:block; }
.login-logo.brand-logo-dark { display:none; }
:root[data-theme="dark"] .login-logo.brand-logo-light { display:none; }
:root[data-theme="dark"] .login-logo.brand-logo-dark { display:block; }
.login-title {
  margin:0; font-family:var(--font-display); font-size:20px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ax-charcoal);
}
.login-sub { margin:6px 0 26px; color:var(--n200); font-size:13px; }
.login-card .field { text-align:left; }
.login-submit { width:100%; padding:10px 12px; }
.login-error {
  background:var(--red-light); color:var(--red-dark); border-radius:var(--radius);
  padding:11px 14px; margin-bottom:16px; font-size:13px; text-align:left;
  border:1px solid color-mix(in srgb, var(--red) 35%, transparent);
}
.login-divider {
  display:flex; align-items:center; gap:12px; margin:18px 0 14px;
  color:var(--n200); font-size:12px;
}
.login-divider::before, .login-divider::after {
  content:""; flex:1; height:1px; background:var(--n30);
}
.login-foot { margin:22px 0 0; color:var(--n200); font-size:12px; }
.login-theme { position:absolute; top:14px; right:14px; }

.notice-warn {
  background:var(--yellow-light); color:var(--yellow-dark);
  border-color:color-mix(in srgb, var(--yellow) 40%, transparent);
}
.notice-ok {
  background:var(--green-light); color:var(--green-dark);
  border-color:color-mix(in srgb, var(--green) 35%, transparent);
}

.spinner {
  width:22px; height:22px; border:2px solid var(--n30);
  border-top-color:var(--ax-petrol); border-radius:50%;
  animation:spin .7s linear infinite; margin:60px auto;
}
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration:3s; }
  .btn, .quick-search input { transition:none; }
}

@media (max-width: 980px) {
  .sidebar, .settings-nav, .toc { display:none; }
  .content, .settings-body { padding:18px; }
  .editor-footer { left:0; padding:12px 18px; }
  .quick-search input, .quick-search input:focus { width:100%; }
  .quick-search { flex:1; }
  .search-results { width:100%; }
  .brand-name { display:none; }
}